:root{--bg: #0b1220;--bg-raised: #111c30;--bg-sunken: #070d17;--line: #1e2d45;--text: #e2e8f0;--text-dim: #94a3b8;--text-faint: #64748b;--accent: #38bdf8;--danger: #f87171;--warn: #fbbf24;--radius: 10px;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.app{display:flex;flex-direction:column;height:100%;min-height:0}.controls{padding:14px 20px 10px;border-bottom:1px solid var(--line);background:var(--bg-raised);display:grid;gap:10px}.titles h1{margin:0;font-size:19px;letter-spacing:-.01em}.titles p{margin:3px 0 0;color:var(--text-dim);font-size:13px}.mode-picker{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.mode-divider{margin-left:10px;color:var(--text-faint);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.mode-picker button,.transport button{background:var(--bg-sunken);color:var(--text-dim);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer;transition:border-color .15s,color .15s,background .15s}.mode-picker button:hover,.transport button:hover:not(:disabled){color:var(--text);border-color:#33507a}.mode-picker button.is-active{background:#38bdf824;border-color:var(--accent);color:var(--text)}.mode-picker button.danger.is-active{background:#f8717129;border-color:var(--danger)}.mode-picker button.ghost{margin-left:auto}.scenario-banner{border:1px solid rgba(248,113,113,.35);background:#f8717114;border-radius:var(--radius);padding:9px 12px;display:grid;gap:5px;font-size:13px}.scenario-banner.is-variant{border-color:#38bdf859;background:#38bdf812}.scenario-banner .outcome strong{color:var(--danger)}.scenario-banner.is-variant .outcome strong{color:var(--accent)}.scenario-banner p{margin:0;color:var(--text-dim)}.legend{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--text-dim)}.legend li{display:flex;align-items:center;gap:6px;cursor:help}.legend .swatch{width:10px;height:10px;border-radius:3px}.stage-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 430px}.viewport{position:relative;min-height:0;background:var(--bg)}.viewport canvas{display:block}.loading,.no-webgl{padding:24px;color:var(--text-dim);overflow:auto;height:100%}.actor-label{width:168px;text-align:center;pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.85)}.actor-label strong{display:block;font-size:15px;color:#0b1220}.actor-label span{display:block;font-size:11px;color:#0b1220b8}.actor-label.is-active strong{color:#05101f}.holdings-anchor{position:relative;width:0;height:0}.holdings-anchor>.holdings{position:absolute;left:50%;transform:translate(-50%)}.holdings-anchor.is-above>.holdings{bottom:0}.holdings-anchor.is-below>.holdings{top:0}.holdings{width:210px;margin:0;padding:0;list-style:none;display:grid;gap:4px;pointer-events:none}.holdings li{background:#070d17eb;border:1px solid var(--line);border-left-width:3px;border-radius:6px;padding:3px 7px;text-align:left}.holdings em{display:block;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}.holdings code{font-family:var(--mono);font-size:11px;color:var(--text);word-break:break-all}.panel{border-left:1px solid var(--line);background:var(--bg-raised);overflow-y:auto;padding:18px 20px 28px}.panel-header h2{margin:4px 0 8px;font-size:20px;line-height:1.3;letter-spacing:-.01em}.step-count{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}.channel{margin:0 0 8px;font-size:12px;padding:4px 9px;border-radius:6px;display:inline-block}.channel-front{background:#fbbf241f;color:#fcd34d}.channel-back{background:#4ade801f;color:#86efac}.channel-internal{background:#94a3b81f;color:var(--text-dim)}.hop{margin:0;font-size:13px;color:var(--text-dim);display:flex;flex-wrap:wrap;align-items:center;gap:4px}.credential-chip{margin-left:6px;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--chip);color:var(--chip);cursor:help}.narration{color:var(--text);margin:14px 0 4px}.panel-section{margin-top:18px}.panel-section h4{margin:0 0 7px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}.wire{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-sunken);padding:10px 12px}.wire-head{margin:0 0 6px;font-family:var(--mono);font-size:12px;display:flex;flex-wrap:wrap;gap:7px;align-items:baseline}.wire-head .method,.wire-head .status{color:var(--accent);font-weight:600}.wire-head .url{color:var(--text);word-break:break-all}.wire-headers{margin:0 0 6px;font-family:var(--mono);font-size:12px}.wire-headers>div{display:flex;gap:6px}.wire-headers dt{color:var(--text-faint)}.wire-headers dd{margin:0;color:var(--text-dim);word-break:break-all}.wire pre,.text-view pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.55;color:#cbd5e1;white-space:pre-wrap;word-break:break-word}.wire-note{margin:8px 0 0;font-size:12px;color:var(--text-faint);border-top:1px solid var(--line);padding-top:7px}.callout{margin-top:16px;border-radius:var(--radius);padding:10px 12px;font-size:13px;border:1px solid}.callout p{margin:4px 0 0;color:var(--text-dim)}.callout-insight{border-color:#38bdf859;background:#38bdf812}.callout-insight strong{color:var(--accent)}.callout-warning{border-color:#fbbf2459;background:#fbbf2412}.callout-warning strong{color:var(--warn)}.code-refs{margin:0;padding:0;list-style:none;display:grid;gap:6px}.code-refs a{display:grid;gap:1px;text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:var(--bg-sunken)}.code-refs a:hover{border-color:#33507a}.code-refs .repo{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}.code-refs code{font-family:var(--mono);font-size:12px;color:var(--accent);word-break:break-all}.code-refs .path{font-family:var(--mono);font-size:11px;color:var(--text-faint);word-break:break-all}.timeline{border-top:1px solid var(--line);background:var(--bg-raised);padding:9px 20px 11px;display:flex;align-items:center;gap:16px}.transport{display:flex;gap:6px;flex-shrink:0}.transport button:disabled{opacity:.4;cursor:default}.transport .play{min-width:68px;color:var(--text);border-color:#33507a}.ticks{display:flex;gap:4px;margin:0;padding:0;list-style:none;flex:1;min-width:0}.ticks li{flex:1;min-width:6px}.tick{display:block;width:100%;height:8px;border:0;border-radius:3px;background:var(--line);cursor:pointer;padding:0;transition:background .15s,transform .15s}.tick:hover{transform:scaleY(1.6)}.tick.is-done{background:#2b4a72}.tick.is-current{background:var(--accent);transform:scaleY(1.9)}.tick.channel-front.is-current{background:var(--warn)}.text-main{flex:1;min-height:0;overflow-y:auto;padding:22px 24px 40px;display:grid;gap:26px;justify-items:center;align-items:start}.sequence{width:100%;max-width:1040px}.sequence-scroll{overflow-x:auto}.sequence svg{display:block;width:100%;height:auto;min-width:820px}.lifeline{stroke:var(--line);stroke-width:1}.lifeline-label{fill:var(--text-dim);font-size:13px;font-family:system-ui,sans-serif}.seq-label{font-size:11.5px;font-family:system-ui,sans-serif}.seq-hit{fill:transparent}.seq-step{cursor:pointer}.seq-step:hover .seq-hit,.seq-step.is-current .seq-hit{fill:#38bdf812}.sequence-key{color:var(--text-faint);font-size:12px;margin:8px 0 0}.text-view{width:100%;max-width:780px}.text-view ol{margin:0;padding:0;list-style:none;display:grid;gap:26px}.text-view h3{margin:0 0 4px;font-size:17px}.text-view p{margin:6px 0}.text-view .meta{color:var(--text-dim);font-size:13px}.text-view .meta code{font-family:var(--mono);font-size:12px;word-break:break-all}.text-view .note{font-size:13px;color:var(--text-faint);border-left:2px solid var(--line);padding-left:10px}.text-view .note-warning{border-left-color:var(--warn)}.text-view .note-insight{border-left-color:var(--accent)}.text-view pre{background:var(--bg-sunken);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;overflow-x:auto}a{color:var(--accent)}@media (max-width: 1180px) and (min-width: 861px){.stage-main{grid-template-columns:minmax(0,1fr) 360px}.panel{padding:14px 16px 24px}.panel-header h2{font-size:18px}}@media (max-width: 860px){.stage-main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(200px,40%) minmax(0,1fr)}.panel{border-left:0;border-top:1px solid var(--line)}.mode-picker button.ghost{margin-left:0}}@media (max-height: 860px){.titles{display:none}.controls{padding:10px 16px 8px}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}.zone-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;pointer-events:none}.text-view>ol>li{border-left:2px solid transparent;padding-left:14px;margin-left:-16px;cursor:pointer;transition:border-color .2s,background .2s;border-radius:0 6px 6px 0}.text-view>ol>li:hover{border-left-color:var(--line)}.text-view>ol>li.is-current{border-left-color:var(--accent);background:#38bdf80f}.text-view>ol>li.is-current h3{color:var(--accent)}.spec-refs{margin:0;padding:0;list-style:none;display:grid;gap:8px}.spec-refs li{border:1px solid var(--line);border-left:3px solid #a78bfa;border-radius:8px;padding:7px 10px;background:var(--bg-sunken)}.spec-refs a{font-size:12px;font-weight:600;color:#c4b5fd;text-decoration:none}.spec-refs a:hover{text-decoration:underline}.spec-refs p{margin:3px 0 0;font-size:12px;color:var(--text-dim)}.hop-tip{width:272px;background:#070d17f7;border:1px solid #33507a;border-radius:8px;padding:9px 11px;cursor:pointer;box-shadow:0 8px 26px #0000008c;text-align:left}.hop-tip:hover{border-color:var(--accent)}.hop-tip-head{margin:0 0 4px;font-size:13px;font-weight:600;color:var(--text);line-height:1.35}.hop-tip-head .n{display:inline-block;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:4px;background:var(--line);color:var(--text-dim);font-size:11px;margin-right:6px}.hop-tip-hop{margin:0 0 6px;font-size:11px;color:var(--text-faint)}.hop-tip-wire{margin:0 0 5px;font-family:var(--mono);font-size:11px;color:var(--text-dim);word-break:break-all}.hop-tip-wire b{color:var(--accent);margin-right:5px}.hop-tip pre{margin:0;font-family:var(--mono);font-size:10.5px;line-height:1.5;color:#cbd5e1;white-space:pre-wrap;word-break:break-word}.hop-tip-more{margin:5px 0 0;font-size:10.5px;color:var(--accent);border-top:1px solid var(--line);padding-top:5px;font-weight:600}.channel-direct{background:#818cf824;color:#a5b4fc}.legends{display:grid;gap:5px}.legend-caption{color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.1em;min-width:56px}.line-swatch{width:22px;height:0;border-top:2px solid var(--text-dim);display:inline-block}.line-swatch.is-dashed{border-top-style:dashed}.line-swatch.is-faint{border-top-color:#33507a}.legend-hint{color:var(--accent);font-style:italic}.legend-hint:before{content:""}.panel{position:relative}.panel-fade{position:sticky;bottom:-28px;height:34px;margin-top:-34px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg-raised));opacity:0;transition:opacity .2s}.panel.has-more .panel-fade{opacity:1}