:root{--bg:#050607;--panel:#0e1013c7;--panel-solid:#0e1013;--line:#ffffff1a;--text:#e9e7e2;--muted:#9a9890;--accent:#76b900;--accent-ink:#0b0d08;--focus:#ffd166;--radius:12px;--font:"Saira", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}body{--legend-h:62px}body.guided{--legend-h:40px}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font);margin:0;overflow:hidden}#viewport{position:fixed;inset:0}#viewport canvas{touch-action:none;display:block}#overlay{pointer-events:none;z-index:5;width:100%;height:100%;position:fixed;inset:0;overflow:visible}.hud{z-index:10;background:var(--panel);-webkit-backdrop-filter:blur(14px)saturate(1.2);border:1px solid var(--line);border-radius:var(--radius);position:fixed}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.hud-title{max-width:min(460px,100vw - 32px);padding:12px 16px 14px;top:16px;left:16px}.hud-title h1{letter-spacing:.01em;margin:0;font-size:22px;font-weight:650;font-stretch:112%}.hud-title p{color:var(--muted);margin:2px 0 10px;font-size:13px;line-height:1.35}.hud-title p:empty{display:none}.hud-title p:empty+.mode-toggle{margin-top:10px}.mode-toggle{background:#ffffff0d;border-radius:999px;padding:3px;display:inline-flex}.mode-toggle button{color:var(--muted);border-radius:999px;padding:5px 14px;font-size:13px}.alt-link{color:var(--muted);vertical-align:middle;margin-left:10px;font-size:12.5px;text-decoration:none;display:inline-block}.alt-link:hover{color:var(--accent)}.mode-toggle button.active{background:var(--accent);color:var(--accent-ink);font-weight:600}.hud-views{gap:2px;padding:4px;display:flex;top:16px;left:50%;transform:translate(-50%)}.hud-views:empty,.hud-views.single{display:none}.hud-views button{color:var(--muted);white-space:nowrap;border-radius:8px;padding:7px 14px;font-size:13px}.hud-views button.active{color:var(--text);background:#ffffff1a}.right-stack{z-index:10;width:280px;max-height:calc(100vh - 40px - var(--legend-h));flex-direction:column;gap:10px;display:flex;position:fixed;top:16px;right:16px}.right-stack .hud{position:static}.hud-controls{flex:none}.hud-controls summary,.hud-panel summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600;list-style:none}.hud-controls summary::-webkit-details-marker{display:none}.hud-panel summary::-webkit-details-marker{display:none}.hud-controls summary:after,.hud-panel summary:after{content:"▾";float:right;color:var(--muted)}.hud-controls:not([open]) summary:after,.hud-panel:not([open]) summary:after{content:"▸"}.hud-panel{overscroll-behavior:contain;scrollbar-width:thin;flex:0 auto;min-height:0;overflow-y:auto}.hud-panel[hidden]{display:none}.hud-panel summary{z-index:1;background:var(--panel-solid);border-radius:var(--radius) var(--radius) 0 0;position:sticky;top:0}.panel-body{gap:9px;padding:0 14px 12px;font-size:13px;display:grid}.ctl-heading{text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-top:4px;font-size:11px;font-weight:600}.ctl-note{color:var(--muted);font-size:12px;line-height:1.4}.ctl-slider{grid-template-columns:1fr auto;align-items:center;gap:2px 8px;display:grid}.ctl-slider input{grid-column:1/-1}.ctl-value{font-family:var(--mono);color:var(--text);font-size:11.5px}.ctl-label{color:#cfcdc6}.ctl-buttons{flex-wrap:wrap;gap:6px;display:flex}.ctl-btn{background:#ffffff14;border-radius:7px;padding:5px 10px;font-size:12.5px}.ctl-btn:hover{background:#ffffff24}.ctl-btn.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.ctl-btn.danger{color:#ffb3b3;background:#ff5a5a2e}.ctl-btn.on{outline:1px solid var(--accent)}.ctl-toggle{align-items:center;gap:8px;display:flex}.ctl-toggle input{accent-color:var(--accent)}.ctl-choice{gap:4px;display:grid}.ctl-seg{background:#ffffff0d;border-radius:8px;padding:2px;display:flex}.ctl-seg button{color:var(--muted);border-radius:6px;flex:1;padding:4px 6px;font-size:12px}.ctl-seg button.on{color:var(--text);background:#ffffff1f}.ctl-seg.vertical{flex-direction:column;gap:2px}.ctl-seg.vertical button{text-align:left;padding:6px 9px}.ctl-stats{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.ctl-stat{background:#ffffff0a;border-radius:8px;padding:5px 7px;display:grid}.ctl-stat .v{font-family:var(--mono);font-size:14px;font-weight:600}.ctl-stat .k{color:var(--muted);font-size:10.5px;line-height:1.2}.ctl-log{font-family:var(--mono);color:#bdbab2;gap:2px;max-height:120px;font-size:11px;display:grid;overflow:auto}.ctl-log-line.warn{color:#ffd166}.ctl-log-line.bad{color:#ff8a8a}.ctl-log-line.good{color:#b6e37a}.controls-body{gap:8px;padding:0 14px 12px;font-size:13px;display:grid}.row{align-items:center;gap:8px;display:flex}.explode-row{flex-direction:column;align-items:stretch;gap:4px}.explode-row.hidden{display:none}.toggle input{accent-color:var(--accent)}input[type=range]{accent-color:var(--accent);width:100%}.hud-legend{height:var(--legend-h);scrollbar-width:thin;flex-wrap:wrap;align-content:center;align-items:center;gap:4px 18px;padding:0 14px;font-size:12px;display:flex;bottom:16px;left:16px;right:16px;overflow:auto}.hud-legend:empty{display:none}.hud-legend .item{color:var(--muted);white-space:nowrap;flex:none;align-items:center;gap:7px;display:flex}body.guided .hud-legend{flex-wrap:nowrap;align-content:normal}.hud-legend .sw{border-radius:3px;flex:none;width:12px;height:12px;box-shadow:inset 0 0 0 1px #fff3}.info-card{right:16px;bottom:calc(24px + var(--legend-h));width:min(360px,100vw - 32px);max-height:55vh;padding:14px 16px 16px;overflow:auto}.info-card h2{margin:2px 0 8px;font-size:18px;font-weight:650}.info-card .close{color:var(--muted);font-size:22px;position:absolute;top:6px;right:10px}.info-kicker,.tour-kicker{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-size:11px;font-weight:600}#info-body{color:#cfcdc6;font-size:14px;line-height:1.5}#info-body p{margin:0 0 8px}#info-body .facts{grid-template-columns:auto 1fr;gap:3px 12px;margin-top:8px;font-size:13px;display:grid}#info-body .facts dt{color:var(--muted)}#info-body .facts dd{font-family:var(--mono);margin:0;font-size:12px}#info-body .related{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}#info-body .related button{background:#ffffff12;border-radius:999px;padding:3px 9px;font-size:12px}code,.mono{font-family:var(--mono);background:#ffffff12;border-radius:4px;padding:1px 5px;font-size:.92em}.tour{left:50%;bottom:calc(24px + var(--legend-h));width:min(620px,100vw - 32px);padding:14px 18px 12px;transform:translate(-50%)}.tour h2{margin:2px 0 6px;font-size:19px;font-weight:650}.tour-text{color:#d6d4cd;max-height:30vh;font-size:14.5px;line-height:1.55;overflow:auto}.tour-text p{margin:0 0 8px}.tour-nav{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.tour-nav button{background:#ffffff12;border-radius:8px;padding:6px 14px;font-size:13px}.tour-nav button.primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.tour-nav button:disabled{opacity:.35;cursor:default}#tour-replay{margin-right:auto}#tour-replay[hidden]{display:none}.tour-progress{gap:3px;margin-bottom:8px;display:flex}.tour-progress span{cursor:pointer;background:#ffffff1f;border-radius:2px;flex:1;height:3px}.tour-progress span.done{background:#76b90080}.tour-progress span.on{background:var(--accent)}@media (width<=1279px){body{--legend-h:40px}.hud-legend{flex-wrap:nowrap;align-content:normal}}@media (height<=800px){body.guided{--legend-h:0px}body.guided .hud-legend{display:none}}body.guided .info-card{display:none}#overlay .leader{stroke:#ffffff8c;stroke-width:1px;fill:none}#overlay .dot{fill:var(--focus)}#overlay .tag rect{fill:#0a0c0edb;stroke:#ffd1668c;stroke-width:1px}#overlay .tag text{fill:#f4f1e8;font:600 12.5px var(--font)}#overlay .tag.sub text{font-weight:450}.tooltip{z-index:20;pointer-events:none;border:1px solid var(--line);white-space:nowrap;background:#0a0c0eeb;border-radius:8px;padding:6px 10px;font-size:13px;position:fixed;transform:translate(14px,14px)}.tooltip small{color:var(--muted);font-size:11.5px;display:block}.loading{z-index:50;background:var(--bg);color:var(--muted);place-content:center;justify-items:center;gap:14px;font-size:14px;transition:opacity .4s;display:grid;position:fixed;inset:0}.loading.done{opacity:0;pointer-events:none}.spinner{border:2px solid #ffffff26;border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=720px),(height<=500px){body,body.guided{--legend-h:0px}.hud-title{max-width:calc(100vw - 32px);padding:10px 12px}.hud-title h1{font-size:18px}.hud-title p{display:none}.hud-views{top:auto;bottom:16px}.right-stack{width:230px;max-height:55vh;top:auto;bottom:64px}.hud-legend{display:none}.tour{padding:12px 14px 10px;bottom:12px}.tour-text{max-height:24vh;font-size:13.5px}body.guided .hud-views,body.guided .right-stack{display:none}.info-card{max-height:40vh;bottom:120px}}