:root{color-scheme:dark;--bg:#080d16;--surface:#101826;--surface2:#151f30;--border:#2a3549;--muted:#8797ae;--text:#e8edf7;--ice:#68d9fa;--warm:#ffaf73;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,select{cursor:pointer}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{height:70px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);background:#0d1420;gap:15px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{width:35px;height:35px;display:grid;place-items:center;border:1px solid #79dbf7;border-radius:9px;box-shadow:0 0 26px #16b0ee33;color:#a7e8fa;font-size:28px}.brand-name{font-size:15px;font-weight:850;letter-spacing:.12em}.brand-name span{font-weight:400;color:#8091aa;font-size:11px;letter-spacing:.1em}.breadcrumbs,.top-status{font-size:10px;font-weight:700;letter-spacing:.13em;color:var(--muted)}.breadcrumbs span{margin:0 9px;color:#3c536f}.top-status{display:flex;align-items:center;gap:10px}.status-dot,.pulse-indicator{width:7px;height:7px;display:inline-block;border-radius:50%;background:#60f0ad;box-shadow:0 0 12px #60f0ad}.layout{flex:1;display:grid;grid-template-columns:340px minmax(0,1fr);min-height:calc(100vh - 70px)}.controls{border-right:1px solid var(--border);background:linear-gradient(180deg,#101827,#0d1420);padding:27px 27px 18px;max-height:calc(100vh - 70px);overflow-y:auto}.eyebrow{font-size:10px;color:#5cbcd8;letter-spacing:.18em;font-weight:800;margin-bottom:13px}.controls h1{font-size:39px;letter-spacing:-.065em;line-height:.96;margin:9px 0 15px;font-weight:750}.controls h1 span{color:#69cbe6}.lede{font-size:12px;color:#9daac0;line-height:1.75;margin:0}.divider{height:1px;background:var(--border);margin:23px 0}.input-group{margin:0 0 14px}.input-group label{display:block;font-size:11px;color:#9cabc0;margin-bottom:8px;letter-spacing:.03em}.input-group select,.input-group input[type=color]{width:100%;height:36px;border:1px solid #36445b;border-radius:6px;background:#171f2f;color:#dee7f3;padding:0 10px;font-size:12px;outline:none}.input-group select:focus{border-color:#6ad6ff}.control-slider{margin:21px 0}.slider-top{display:flex;justify-content:space-between;font-size:11px;margin-bottom:10px;color:#bfcbd9}.slider-top output{font-variant-numeric:tabular-nums;color:var(--ice)}input[type=range]{width:100%;height:4px;appearance:none;background:#31425b;border-radius:8px;vertical-align:middle}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:#88e3fd;border:3px solid #243242;border-radius:50%;box-shadow:0 0 10px #76d3ff99}.checks{display:grid;gap:17px}.toggle{display:flex;align-items:center;gap:12px;font-size:12px;color:#b6c4d9;cursor:pointer}.toggle input{position:absolute;opacity:0}.switch{position:relative;width:31px;height:17px;border:1px solid #425067;border-radius:20px;background:#2a3445;transition:.2s;flex-shrink:0}.switch::before{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;background:#8b97a8;border-radius:50%;transition:.2s}.toggle input:checked+.switch{background:#196d89;border-color:#3fbfe8}.toggle input:checked+.switch:before{transform:translateX(14px);background:#a4eafd}.dual{display:grid;grid-template-columns:1fr 72px;gap:12px}.dual input[type=color]{padding:4px}.side-foot{font-size:9px;letter-spacing:.1em;color:#5c6f88;line-height:2.1;margin-top:20px}.viewer-panel{min-width:0;display:flex;flex-direction:column;position:relative;background:#0b111b}#stage{position:relative;min-height:500px;flex:1;overflow:hidden}#stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.vignette{pointer-events:none;position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 140px #020711dd;opacity:.53}.overlay-left{position:absolute;left:30px;top:28px;z-index:2;pointer-events:none}.chip{display:inline-flex;align-items:center;gap:9px;color:#b0ddf1;background:#10253caa;border:1px solid #31526e;border-radius:3px;font-weight:700;font-size:9px;letter-spacing:.16em;padding:9px 11px}.pulse-indicator{background:#57ddff;box-shadow:0 0 12px #57ddff}.view-title{font-size:17px;font-weight:700;letter-spacing:.13em;margin-top:16px}.view-caption{color:#91a7bd;font-size:9px;letter-spacing:.12em;margin-top:8px}.telemetry{position:absolute;right:27px;top:28px;z-index:2;background:#0b1525bd;padding:19px 22px;border:1px solid #2b4561;backdrop-filter:blur(8px);width:234px}.small-k{color:#79b2cf;font-size:9px;font-weight:750;letter-spacing:.13em;margin-bottom:16px}.metrics{display:flex;justify-content:space-between;gap:15px}.metrics div{display:flex;flex-direction:column;gap:4px}.metrics strong{font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}.metrics span{font-size:8px;letter-spacing:.12em;color:#718ba5}.running{color:#69dda9;border-top:1px solid #29405b;padding-top:13px;margin-top:15px;font-size:9px;letter-spacing:.14em;font-weight:800}.viewer-help{position:absolute;bottom:22px;left:30px;z-index:2;font-size:9px;font-weight:650;letter-spacing:.11em;color:#849ab0}.axis-label{position:absolute;z-index:2;color:#668ca7;font-size:9px;letter-spacing:.15em;left:50%;pointer-events:none}.axis-y{top:24%}.axis-z{bottom:20%}.transport{display:flex;justify-content:space-between;gap:12px;padding:18px 25px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#111b2a}.transport-left{display:flex;gap:9px;flex-wrap:wrap}.action,.audio-button{font-size:10px;font-weight:760;letter-spacing:.08em;min-height:37px;padding:0 16px;border:1px solid #35455d;color:#becddd;background:#1a2537;border-radius:5px}.action:hover,.audio-button:hover{border-color:#7acbe6;color:white}.action.primary{background:#207697;color:#f2fcff;border-color:#3fa6c2}.action.accent{border-color:#d2906b;color:#f7be8d;background:#3b2b2c}.audio-button{white-space:nowrap}.audio-button.enabled{border-color:#3bb698;color:#8dedcf}.bottom-caption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px 24px;font-size:9px;color:#71839a;letter-spacing:.04em}.caption-label{color:#496886;font-weight:800;letter-spacing:.1em;margin-right:6px}#errorOverlay{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(500px,90%);padding:24px;background:#172337;border:1px solid #efad87;border-radius:8px;box-shadow:0 0 0 100vmax #020610aa}#errorOverlay[hidden]{display:none}#errorOverlay strong{color:#ffc58e}#errorOverlay p{font-size:13px;line-height:1.7;color:#cbd5e5}@media(max-width:1100px){.breadcrumbs{display:none}.layout{grid-template-columns:285px 1fr}.controls{padding:22px 20px}.telemetry{width:203px}.view-title{max-width:280px;line-height:1.5}}@media(max-width:730px){.topbar{height:58px;padding:0 15px}.top-status{font-size:8px}.layout{display:flex;flex-direction:column}.controls{order:2;max-height:none;overflow:visible;border-right:0;border-top:1px solid var(--border)}.viewer-panel{order:1;min-height:560px}#stage{min-height:400px}.overlay-left{left:15px;top:18px}.telemetry{right:10px;top:17px;width:157px;padding:10px}.metrics strong{font-size:15px}.metrics{gap:6px}.view-title{font-size:12px;max-width:170px}.view-caption{max-width:155px;font-size:7px;line-height:1.5}.chip{font-size:7px;letter-spacing:.05em}.viewer-help{bottom:12px;left:15px;font-size:8px}.transport{flex-wrap:wrap;padding:12px}.transport-left{gap:6px}.action,.audio-button{font-size:9px;padding:0 11px}.bottom-caption{padding:10px 15px}.controls h1{font-size:35px}}