:root{color-scheme:dark;--bg:#0c111b;--panel:#141c29;--line:#283446;--muted:#9dacbf;--ink:#e4edf7;--accent:#59d9c0;font-family:system-ui,-apple-system,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}header{padding:20px 3vw;border-bottom:1px solid var(--line);display:flex;gap:32px;align-items:center}a{color:var(--accent);text-decoration:none}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted)}#badge{margin-left:auto;border:1px solid #37665f;color:var(--accent);padding:4px 10px;border-radius:20px;font-size:12px}main{max-width:1600px;margin:auto;padding:25px 3vw}.heading{display:flex;justify-content:space-between;gap:20px;align-items:center}h1{font-size:28px;font-weight:600;margin:0 0 8px}h2{font-size:14px;font-weight:600;margin:0}p{color:var(--muted);font-size:13px;line-height:1.6}.heading p{margin:0}label{font-size:12px;color:var(--muted)}button,select{background:#1b283a;color:var(--ink);border:1px solid #35445b;border-radius:6px;padding:7px 10px;font:inherit;font-size:12px}button{cursor:pointer}button:hover,button.selected{border-color:var(--accent);background:#203f43}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.45}#play{background:#20564f;min-width:70px}input[type=range]{accent-color:var(--accent);flex:1;min-width:60px}#clock{font:13px ui-monospace,monospace;min-width:95px}.transport{display:flex;align-items:center;gap:14px;margin:22px 0}.panels{display:grid;grid-template-columns:1.7fr 1fr;gap:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:17px;margin-bottom:16px;min-width:0}.panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}canvas{display:block;width:100%;border-radius:5px;background:#0a101a}#waterfall,#constellation{height:340px}#timeline{height:100px;cursor:crosshair}#waterfall{cursor:crosshair}.caption{font-size:11px;margin:10px 0 0}.cloudcontrols{display:flex;justify-content:space-between;gap:10px;margin-top:10px}.bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px}#events{height:300px;overflow:auto;margin-top:12px}#events button{display:block;width:100%;text-align:left;border-radius:4px;margin:3px 0;padding:10px;display:flex;gap:14px}#events time{font:12px ui-monospace,monospace;color:var(--muted);width:75px}#events small{margin-left:auto;color:var(--muted)}dl{display:grid;grid-template-columns:100px 1fr;gap:9px;font-size:12px;line-height:1.5}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}details{font-size:12px;color:var(--muted);margin-top:20px}li{margin-bottom:7px;line-height:1.5}#selection{font-size:12px;color:var(--accent)}#notice{white-space:pre-wrap;color:#ddc58c}#subtitle{overflow-wrap:anywhere}#provenance{overflow-wrap:anywhere}#revision{max-width:260px}@media(max-width:850px){.panels,.bottom{grid-template-columns:1fr}.heading{align-items:flex-start;flex-direction:column}.transport{flex-wrap:wrap}#seek{flex-basis:40%}.panelhead{flex-wrap:wrap}header{gap:16px}.eyebrow{font-size:9px}#waterfall,#constellation{height:280px}}

.buildbar{display:flex;gap:15px;align-items:center;margin-top:20px}#jobstatus{font-size:12px;color:var(--muted)}
.waterfall-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 10px;font-size:11px}.waterfall-legend>span{display:flex;align-items:center;gap:6px}.waterfall-legend i{font:600 16px/1 ui-monospace,monospace;font-style:normal}.sender-tx{color:#b8a2ef}.sender-rx{color:#59d9c0}.sender-selected{color:#ffce64}

.sourcebar{background:#172233;border-left:3px solid #7295bb;padding:10px 14px;margin:14px 0;font-size:12px;overflow-wrap:anywhere}.sourcebar p{margin:5px 0 0;font-size:12px}

.comparisons{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:14px}.receiver{padding:14px;border:1px solid #33445a;border-radius:8px;background:linear-gradient(145deg,#172637,#101722)}.receiver h3{font-size:13px;margin:0 0 7px;color:#a8c8f4}.receiver canvas{height:260px;margin-top:12px}.receiver .caption{min-height:34px}.receiver .stats{font:11px ui-monospace,monospace;color:#72dccc}.cloudcontrols{flex-wrap:wrap}#signalSource{max-width:150px}

#details dd{white-space:pre-line}

.linkstate{border-color:#355268;background:linear-gradient(115deg,#142938,#151c2d)}.linkgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.linkgrid span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.linkgrid strong{font-size:14px;font-weight:550;line-height:1.5;display:block}#linkPhase{color:#72e2cd;font-size:19px}#linkActivity{font-size:12px;color:#d9bcfa}@media(max-width:650px){.linkgrid{grid-template-columns:1fr}}

.packetheading,.packetfooter{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;margin:8px 0}.packetheading strong{font-size:13px;font-weight:500}.packetheading span,.packetfooter span{color:var(--muted)}.packetprogress{height:2px;background:#29384c;margin:10px 0 8px}#packetFill{height:100%;background:#ffda85;width:0}#exchangeNote{margin-bottom:0;color:#b9cbd9}

#packetMode{color:#b8dacc;font-size:12px;line-height:1.5}.modeguide table{width:100%;border-collapse:collapse;font-size:11px}.modeguide td,.modeguide th{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}.modeguide summary{cursor:pointer}

.sessionoverview p{margin:6px 0 0}.sessionoverview #sessionOutcome{color:var(--ink)}
.eventfilters{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.eventfilters label{display:flex;align-items:center;gap:5px}.eventfilters input{background:#101a28;border:1px solid #35445b;border-radius:5px;padding:7px;color:var(--ink);max-width:190px}
.inspectiongroup{font-size:12px;font-weight:600;margin:20px 0 8px;color:#b8dacc}#evidence dd,#metrics dd{white-space:pre-line}#plotBasis{color:#b8dacc}#playbackCounts{font-variant-numeric:tabular-nums}#events button[hidden]{display:none}

.bytespanel pre{overflow:auto;max-height:300px;background:#0b121d;padding:14px;border:1px solid #29394c;border-radius:6px;font:12px/1.7 ui-monospace,monospace;white-space:pre}.bytespanel article{margin-bottom:16px}.bytespanel details{margin-top:16px}#byteTraffic{max-height:220px;overflow:auto;display:grid;gap:5px}#byteTraffic button{text-align:left;font:12px/1.6 ui-monospace,monospace;overflow-wrap:anywhere}

.stationrails{display:flex;justify-content:space-between;padding:8px 14px;color:#cad7e5;font-weight:600}#ladder{max-height:340px;overflow:auto;padding:0 12px;border-left:1px solid #3b5269;border-right:1px solid #3b5269;margin:0 14px}#ladder button{display:grid;grid-template-columns:68px 1fr;gap:4px 12px;width:100%;text-align:left;margin:5px 0;padding:9px 12px;background:#121e2d;border:1px solid #28394b}#ladder .flight{display:flex;align-items:center;gap:12px}#ladder .flight:after{content:'→';margin-left:auto;font-size:23px;color:#b6ccdf}#ladder .rx .flight:after{content:'←'}#ladder .observed .flight:after{content:'·'}#ladder small{grid-column:2;color:#a6b7cb}#ladder .active{border-color:#59d9c0}#ladder .selected{outline:2px solid #ffce64;outline-offset:-2px}#ladder .future{opacity:.5}#ladder time{font:11px ui-monospace,monospace;color:#a6b7cb}#anatomyTrack{position:relative;min-height:48px}#anatomyParts{display:flex;gap:2px;min-height:48px}#anatomyParts button{min-width:0;padding:8px 4px;background:#1b3246;border:1px solid #3c5d73;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#anatomyParts button:nth-child(even){background:#283449}#anatomyParts button.current{background:#25554f;border-color:#59d9c0}#anatomyCursor{position:absolute;top:-4px;bottom:-4px;width:2px;background:#ffce64;pointer-events:none}#anatomyCursor:before{content:'';position:absolute;left:-4px;top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #ffce64}

.example-caption{color:var(--ink);line-height:1.65;margin:0 0 24px}.example-footer{max-width:1500px;margin:24px auto;padding:20px;color:var(--muted);font-size:12px}.example-footer a{color:var(--accent)}

.inspector-jumps { display:flex; flex-wrap:wrap; gap:12px 24px; margin-block:16px; }
.inspector-jumps a { text-decoration:underline; }
.event-pages { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
#signal-values { max-height:300px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.6 ui-monospace,monospace; }
#signal-text a { text-decoration:underline; }
#ladder .future { opacity:1; border-style:dashed; }

#waterfall-peaks { max-height:300px; overflow:auto; font:12px/1.6 ui-monospace,monospace; white-space:pre-wrap; }