@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#233044;background:#edf1f5;font-size:16px;--teal:#007d77;--border:#dbe2e9}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--border);background:white;color:#304057;padding:9px 13px;border-radius:6px;font-size:.875rem;font-weight:600}button:hover{background:#e8f4f2;border-color:#8ebeb9}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #32aea8;outline-offset:2px}header{height:78px;background:#101c2d;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:700;color:inherit;text-decoration:none;letter-spacing:-.6px}.brand>span{font-size:35px;color:#54d6c6}.brand>small{border-left:1px solid #4a5462;margin-left:18px;padding-left:25px;font-size:11px;letter-spacing:1.7px;font-weight:500}.header-right{display:flex;gap:18px;align-items:center}.header-right button{background:transparent;color:#ddd;border-color:#3c4c61}.badge{font:11px 'IBM Plex Mono',monospace;letter-spacing:1px;color:#75d8cb;padding:7px 9px;border:1px solid #275951;border-radius:4px}.workspace{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:calc(100vh - 78px)}.library{padding:28px 18px;background:#f8fafb;border-right:1px solid var(--border);display:flex;flex-direction:column;max-height:calc(100vh - 78px);position:sticky;top:0}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.5px;color:#708095;display:flex;align-items:center;gap:8px}.eyebrow span{background:#e4ebee;padding:3px 7px;border-radius:4px;letter-spacing:0}.library h2{font-size:18px;letter-spacing:-.5px;margin:16px 0 22px}#search{width:100%;border:1px solid var(--border);border-radius:6px;background:white;font-size:14px;padding:11px;margin-bottom:10px}select{width:100%;padding:9px;border:1px solid var(--border);border-radius:5px;background:#fff;color:#304057;font-size:14px}.library>select{margin-bottom:18px}#caseList{overflow:auto;flex:1;margin:0 -9px;padding:0 9px}.case-item{width:100%;text-align:left;background:transparent;border:1px solid transparent;padding:13px 11px;margin-bottom:5px;line-height:1.35;font-size:14px}.case-item small{display:block;font:11px 'IBM Plex Mono',monospace;color:#8794a4;margin-bottom:5px}.case-item.active{background:#e3f1ef;border-color:#b4d7d1;color:#006b64;border-left:3px solid #008e80}.case-item.active small{color:#508c83}.library footer{font-size:11px;line-height:1.8;color:#8b97a6;padding-top:20px;border-top:1px solid var(--border)}main{padding:28px 30px;min-width:0}.case-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.top-actions{display:flex;gap:8px;flex-shrink:0}h1{font-size:27px;letter-spacing:-.8px;margin:9px 0 12px;font-weight:700}h2,h3{letter-spacing:-.4px}h3{font-size:16px}#vignette{max-width:1050px;line-height:1.65;color:#647083;font-size:15px;margin:0 0 15px}.scenario-options{display:flex;align-items:center;gap:18px;margin:0 0 12px}.scenario-options label{display:flex;gap:8px;align-items:center;font-size:12px;color:#708095}.scenario-options select{width:auto;font-size:12px;padding:6px}.scenario-options>span{font:11px 'IBM Plex Mono',monospace;color:#8a97a8}nav{display:flex;gap:5px;border-bottom:1px solid #ced7e0;margin-bottom:21px;overflow:auto}nav button{white-space:nowrap;background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;padding:12px 13px;color:#728094;font-size:14px}nav button.active{border-bottom-color:var(--teal);color:var(--teal)}.lab-grid{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:20px}.traces{background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden;align-self:start}.trace-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px}.trace-heading strong{font-size:14px}.trace-heading strong:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#00998c;margin-right:9px}.trace-heading button{font-size:12px;padding:6px 9px}#channelLabel{display:block;font:11px 'IBM Plex Mono',monospace;color:#8793a2;margin:5px 0 0 16px}.scope{background:#101c2b;position:relative;height:310px;padding:0 8px}canvas{width:100%;height:100%;display:block}.scope-meta{position:absolute;bottom:12px;left:18px;right:18px;display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;color:#8a9bb0;pointer-events:none}.trace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border-bottom:1px solid var(--border)}.trace-toolbar label{display:flex;align-items:center;gap:7px;font-size:12px;color:#8390a0}.trace-toolbar select{width:auto;font-size:12px;padding:6px}.trace-toolbar button{font-size:12px;white-space:nowrap}.metrics{display:grid;grid-template-columns:repeat(3,1fr);padding:22px 10px;border-bottom:1px solid var(--border)}.metrics>div{padding-left:18px;border-right:1px solid var(--border)}.metrics>div:last-child{border:0}.metrics small{display:block;font-size:10px;letter-spacing:1px;color:#8390a0;margin-bottom:9px}.metrics b{font:500 23px 'IBM Plex Mono',monospace;letter-spacing:-1px;color:#26475b}.table-heading{display:flex;align-items:center;padding:10px 18px;gap:12px}.table-heading h3{margin:7px 0}.table-heading span{font-size:11px;color:#8b96a4;flex:1}.table-heading button{font-size:11px;padding:6px}.table-wrap{max-height:190px;overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th{text-align:left;background:#f7f9fb;color:#7e8a9a;font-size:10px;font-weight:500;padding:11px 15px;position:sticky;top:0}td{padding:11px 15px;border-bottom:1px solid #edf1f4;font:11px 'IBM Plex Mono',monospace}td.empty{text-align:center;padding:25px 10px;color:#8b97a6;font:13px 'DM Sans',sans-serif}.controls{border:1px solid var(--border);border-radius:9px;background:#fff;padding:20px}.controls .eyebrow{margin-bottom:18px}.controls label{display:block;font-size:12px;color:#778598;margin-bottom:14px}.controls label select{display:block;margin-top:7px}.current-header{display:flex;justify-content:space-between;font-size:12px;color:#778598;margin-top:20px}.dial{width:150px;height:150px;margin:16px auto 14px;background:conic-gradient(from 220deg,#e8a35b 0deg 56deg,#e9edf1 56deg 280deg,transparent 280deg);border-radius:50%;padding:8px}.dial>div{border:8px solid white;border-radius:50%;background:#faf8f4;display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%}.dial input{font:500 38px 'IBM Plex Mono',monospace;color:#a96924;background:transparent;border:0;text-align:center;width:100%;padding:0;appearance:textfield}.dial input::-webkit-inner-spin-button{appearance:none}.dial small{font-size:9px;letter-spacing:1.7px;color:#a6937d}input[type=range]{width:100%;accent-color:#bd8648;cursor:pointer}.range-labels{display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;color:#909aa7}.steps{display:flex;gap:6px;margin:15px 0 20px}.steps button{flex:1;padding:6px;font:12px 'IBM Plex Mono',monospace}.paired{display:grid;grid-template-columns:1fr 1fr;gap:8px}.primary{background:#007e75;color:white;border-color:#007e75;display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 15px;margin-top:4px}.primary:hover{background:#006a63;color:white}kbd{font-size:10px;font-weight:400;background:#ffffff1a;border:1px solid #ffffff33;border-radius:3px;padding:3px 5px}#status,#patternInfo{font-size:11px;color:#8290a2;line-height:1.5;margin:11px 0 18px}.volume{border-top:1px solid var(--border);padding-top:15px;margin-bottom:0!important}.volume input{accent-color:var(--teal);margin-top:10px}.learning{background:#fff;border:1px solid var(--border);border-radius:9px;padding:23px;margin-top:20px}.learning-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.learning h2{font-size:20px;margin:8px 0 14px}#question{font-size:15px;color:#657489;line-height:1.6}#question select{max-width:230px;margin:10px 8px 0 0}#notes{border-top:1px solid var(--border);margin-top:17px;padding-top:17px;line-height:1.7;color:#526277;font-size:15px}#notes b{color:#007d77}.note-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}#notes small{display:block;font-size:12px;color:#8591a1;margin-top:14px}.disclaimer{font-size:11px;color:#8b97a6;line-height:1.6;margin:18px 0 0}.check{display:flex!important;gap:7px;align-items:center}.check input{accent-color:var(--teal)}[hidden]{display:none!important}output{float:right;color:var(--teal)}dialog{border:0;border-radius:14px;max-width:720px;width:90%;padding:35px;color:#304057;line-height:1.75;box-shadow:0 30px 100px #0005}dialog::backdrop{background:#0e1c2d99;backdrop-filter:blur(4px)}dialog h2{font-size:28px}dialog p,dialog li{font-size:15px}dialog li{margin-bottom:12px}dialog a{color:var(--teal)}.close{float:right;font-size:24px;border:0;padding:0 8px}.no-cases{font-size:14px;color:#7d8898;line-height:1.7;padding:15px}@media(min-width:1600px){main{padding:35px 45px}.scope{height:370px}.workspace{grid-template-columns:290px minmax(0,1fr)}}@media(max-width:1250px){.workspace{grid-template-columns:225px minmax(0,1fr)}main{padding:22px 18px}.lab-grid{grid-template-columns:minmax(0,1fr) 230px;gap:12px}.controls{padding:16px}.brand>small{display:none}.trace-toolbar{flex-wrap:wrap}.metrics b{font-size:20px}.metrics>div{padding-left:9px}.case-top{align-items:start}.top-actions{flex-direction:column}.scenario-options{flex-wrap:wrap}}@media(max-width:950px){.workspace{grid-template-columns:1fr}.library{position:relative;max-height:250px;padding:18px;border-right:0}.library h2,.library footer{display:none}.library .eyebrow{margin-bottom:12px}.library #search{width:60%}.library>select{position:absolute;right:18px;top:48px;width:33%}#caseList{display:flex;gap:8px;min-height:85px;overflow:auto}.case-item{min-width:200px;width:200px;margin:0}h1{font-size:24px}.scope{height:310px}}@media(max-width:650px){header{padding:0 16px;height:65px}.badge{display:none}.lab-grid{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.controls .eyebrow,#stimControls,#needleControls,#rnsControls,#exerciseControls,.primary,#status,.volume{grid-column:1/-1}.controls label{margin-bottom:0}.dial{width:130px;height:130px;margin:12px auto}.case-top{gap:6px}.case-top button{font-size:11px;padding:8px}.learning-heading{align-items:start;flex-direction:column}.learning-heading button{margin-bottom:16px}.brand{font-size:21px}.trace-heading{padding:12px}.trace-toolbar label{font-size:11px}.note-grid{grid-template-columns:1fr}.metrics b{font-size:18px}.metrics small{font-size:9px}#vignette{font-size:14px}.learning{padding:18px}.header-right button{font-size:12px}.scope-meta{font-size:9px}.scenario-options{gap:8px}.scenario-options label{flex-wrap:wrap}}
.controls label,.current-header,.trace-toolbar label,.trace-toolbar select,.scenario-options label,.scenario-options select{font-size:14px}.trace-toolbar{flex-wrap:wrap}.controls .paired select{padding:8px 4px}.trace-toolbar button,.trace-heading button,.table-heading button{font-size:13px}.metrics small{font-size:11px}.eyebrow{font-size:12px}.selected{background:#e3f1ef;color:#007d77;border-color:#8bc8bf}

.library>.eyebrow{margin-bottom:20px}.site-credit{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:18px;margin-top:24px;color:#7b899b;font-size:13px}.site-credit strong{color:#34465a;font-weight:600}

.brand{font-size:22px}.latency-comparison{padding:12px 16px;background:#f5f9fa;border-bottom:1px solid var(--border);font-size:13px;line-height:1.8}.latency-comparison b{color:#007d77;margin-right:8px}.latency-comparison small{display:block;color:#7b899b;font-size:12px}@media(max-width:650px){.brand{font-size:17px;gap:7px}.brand>span{font-size:26px}.header-right{gap:6px}}

.scope-scroll{max-height:600px;overflow-y:auto;background:#101c2b}.scope-scroll .scope{min-width:0}