:root{--bg: oklch(14% .018 250);--panel: oklch(18% .018 250);--panel-2: oklch(21% .015 250);--surface: oklch(24% .016 250);--line: oklch(31% .018 250);--line-strong: oklch(43% .02 250);--fg: oklch(91% .012 240);--muted: oklch(64% .018 245);--faint: oklch(48% .02 250);--ack: oklch(72% .16 150);--warn: oklch(76% .14 78);--fail: oklch(67% .19 28);--trace: oklch(71% .15 205);--font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "JetBrains Mono Variable", "SFMono-Regular", ui-monospace, Menlo, monospace}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);text-rendering:optimizeLegibility}button,input,select,textarea{font:inherit}button{color:inherit}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0}.app-shell{min-height:100vh;height:100vh;display:grid;grid-template-rows:58px minmax(0,1fr);overflow:hidden}.topbar{display:grid;grid-template-columns:minmax(260px,330px) 1fr auto;gap:14px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);background:#04080d}.brand-lockup{display:flex;align-items:center;gap:10px;min-width:0}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line-strong);color:var(--ack);font-weight:800;font-family:var(--font-mono)}.brand-title{font-weight:720;font-size:14px;letter-spacing:0}.brand-subtitle,.panel-header p,.layer-title span,label span,.metric span,.proof-strip span,.kv-grid span,.app-decode-grid span,.tracker-detail span{color:var(--muted);font-size:11px;line-height:1.2}.topbar-metrics{display:flex;align-items:center;gap:8px;min-width:0}.state-pill,.metric,.map-token-state,.frame-chip,.panel-count{border:1px solid var(--line);background:var(--panel-2);min-height:34px;display:inline-flex;align-items:center}.state-pill{gap:8px;padding:0 10px;font-size:12px;font-weight:680}.state-dot{width:7px;height:7px;border-radius:50%;background:var(--fail)}.state-pill.sse .state-dot{background:var(--ack)}.state-pill.polling .state-dot{background:var(--warn)}.metric{flex-direction:column;align-items:flex-start;justify-content:center;padding:0 9px;min-width:88px}.metric strong,.proof-strip strong,.tracker-detail strong,.queue-status strong{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums}.replay-controls{display:flex;align-items:center;gap:8px;justify-content:flex-end}.toggle{min-height:34px;padding:0 10px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel-2);color:var(--fg)}input,select,textarea{color:var(--fg);background:#080e14;border:1px solid var(--line);border-radius:0;outline:none}input:focus,select:focus,textarea:focus,button:focus-visible{border-color:var(--trace);box-shadow:0 0 0 1px var(--trace)}select,input{min-height:32px;padding:0 9px}textarea{padding:8px 9px;resize:vertical}.scrubber{width:128px;padding:0;accent-color:var(--trace)}.console-grid{min-height:0;display:grid;grid-template-columns:minmax(390px,30vw) minmax(470px,1fr) minmax(360px,28vw);gap:10px;padding:10px}.panel{min-width:0;min-height:0;border:1px solid var(--line);background:var(--panel);overflow:hidden}.panel-header{min-height:50px;padding:9px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}.panel-header h2,.decode-layer h3{margin:0;font-size:13px;line-height:1.1;letter-spacing:0}.panel-header p,.layer-title h3{margin:3px 0 0}.panel-count,.frame-chip,.map-token-state{min-height:28px;padding:0 8px;font-family:var(--font-mono);font-size:11px;color:var(--muted)}.timeline-panel,.decode-panel,.right-rail{display:flex;flex-direction:column}.filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 10px;border-bottom:1px solid var(--line)}label{display:grid;gap:4px;min-width:0}.span-2,.wide{grid-column:1 / -1}.timeline-head{display:grid;grid-template-columns:1.25fr 1fr .82fr .48fr .58fr .42fr;gap:7px;padding:7px 10px;color:var(--muted);font-family:var(--font-mono);font-size:10px;border-bottom:1px solid var(--line);background:#080e14}.timeline-list{overflow:auto;min-height:0}.timeline-row{position:relative;width:100%;display:grid;grid-template-columns:1.25fr 1fr .82fr .48fr .58fr .42fr;gap:7px;min-height:44px;align-items:center;padding:7px 10px 16px;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}.timeline-row:hover{background:#141b23}.timeline-row.selected{background:#10252c;box-shadow:inset 2px 0 0 var(--trace)}.timeline-row.ack.selected{box-shadow:inset 2px 0 0 var(--ack)}.timeline-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.mac{color:var(--fg)}.sdu-tag{position:absolute;left:10px;bottom:3px;width:auto;max-width:calc(100% - 20px);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0}.sdu-tag.position,.sdu-tag.telemetry,.sdu-tag.ack{color:var(--ack)}.sdu-tag.status-pull,.sdu-tag.locate{color:var(--warn)}.decode-panel{overflow:auto}.decode-head p{color:var(--ack)}.proof-strip{display:grid;grid-template-columns:.8fr .9fr .7fr 1.3fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}.proof-strip div,.kv-grid div,.app-decode-grid div,.tracker-detail div{min-width:0;background:var(--panel-2);padding:8px 9px;display:grid;gap:3px}.proof-strip strong,.kv-grid strong,.app-decode-grid strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.decode-layer{padding:10px;border-bottom:1px solid var(--line)}.layer-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.copy-button,.send-button{min-height:30px;border:1px solid var(--line-strong);background:#1e2731;color:var(--fg);padding:0 10px;cursor:pointer}.copy-button:hover,.send-button:hover{background:#27313c}.hex-dump{border:1px solid var(--line);background:#04080d;overflow:auto}.hex-row{min-width:540px;display:grid;grid-template-columns:78px 1fr 118px;gap:9px;padding:5px 7px;border-bottom:1px solid rgba(255,255,255,.04);font-size:11px}.hex-row:last-child{border-bottom:0}.offset,.ascii{color:var(--muted)}.byte-grid{display:grid;grid-template-columns:repeat(16,minmax(18px,1fr));gap:3px}.byte-grid span{text-align:center;color:var(--fg)}.byte-grid .payload-byte{color:var(--ack);background:color-mix(in oklch,var(--ack) 9%,transparent)}.pdu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pdu-card{border:1px solid var(--line);background:var(--panel-2)}.pdu-top{display:flex;align-items:center;justify-content:space-between;padding:7px 8px;border-bottom:1px solid var(--line);font-size:11px}.pdu-top span{color:var(--muted)}dl{margin:0;padding:7px 8px;display:grid;gap:5px}dl div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:8px}dt{color:var(--muted);font-size:10px}dd{margin:0;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.payload-slice{color:var(--ack)}.kv-grid,.app-decode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}.app-decode-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.right-rail{min-height:0;gap:10px}.map-panel{min-height:0;flex:1 1 52%;display:flex;flex-direction:column}.map-layout{display:grid;grid-template-columns:136px minmax(0,1fr);min-height:280px;flex:1;border-bottom:1px solid var(--line)}.tracker-list{border-right:1px solid var(--line);background:#070c11;overflow:auto}.tracker-row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;display:grid;grid-template-columns:10px 1fr;grid-template-rows:auto auto auto;gap:2px 6px;text-align:left;padding:8px;cursor:pointer}.tracker-row span,.tracker-row strong{font-size:10px}.tracker-row>span:not(.tracker-status){grid-column:2;color:var(--muted)}.tracker-status{grid-row:1 / -1;width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--ack)}.tracker-row.selected{background:#0f2228}.map-stage{position:relative;min-width:0;min-height:0;background:#020509}.mapboxgl-map,.mapboxgl-canvas-container,.mapboxgl-canvas{width:100%;height:100%}.map-dot{width:13px;height:13px;border:2px solid var(--bg);border-radius:50%;background:var(--ack);cursor:pointer;box-shadow:0 0 0 1px var(--ack)}.map-dot.selected{width:17px;height:17px;background:var(--trace);box-shadow:0 0 0 1px var(--trace),0 0 0 7px color-mix(in oklch,var(--trace) 18%,transparent)}.map-dot.flash,.svg-dot.flash{animation:fix-pulse 1s ease-out 3}@keyframes fix-pulse{0%{box-shadow:0 0 color-mix(in oklch,var(--ack) 52%,transparent)}to{box-shadow:0 0 0 20px color-mix(in oklch,var(--ack) 0%,transparent)}}.fallback-map{width:100%;height:100%;display:block}.svg-dot{fill:var(--ack);stroke:var(--bg);stroke-width:.8;cursor:pointer}.map-readout{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);border:1px solid var(--line);background:#0d1117e6;padding:7px 8px;display:grid;gap:2px}.map-readout span{color:var(--muted);font-size:10px}.map-readout strong{font-size:11px}.tracker-detail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}.command-panel{flex:1 1 48%;min-height:0;display:flex;flex-direction:column}.command-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px;border-bottom:1px solid var(--line)}.send-button{grid-column:1 / -1;color:#04080d;background:var(--ack);border-color:var(--ack);font-weight:780}.send-button:disabled{opacity:.55}.queue-head{padding:8px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}.queue-head strong{color:var(--fg)}.command-queue{overflow:auto;min-height:0}.queue-row{display:grid;grid-template-columns:1fr;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line);background:transparent}.queue-row>div{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px}.queue-row strong,.queue-row span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-row span{color:var(--muted)}.queue-row.pending{box-shadow:inset 2px 0 0 var(--warn)}.queue-row.acknowledged{box-shadow:inset 2px 0 0 var(--ack)}.queue-row.expired{box-shadow:inset 2px 0 0 var(--fail)}.queue-row.expired .queue-status span,.queue-row.expired .queue-status strong{color:var(--fail)}@media(max-width:1180px){.console-grid{grid-template-columns:360px minmax(420px,1fr)}.right-rail{grid-column:1 / -1;min-height:520px;flex-direction:row}.map-panel,.command-panel{flex-basis:50%}}