:root{color-scheme:dark;--bg:#11171c;--panel:#192128;--text:#eaf0ef;--muted:#9aabb3;--line:#2c3941;--cyan:#74d9dd;--coral:#ff8e7e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;color:var(--text);background:transparent;border:1px solid var(--line);padding:10px 13px;border-radius:4px;min-height:44px}button:hover{border-color:var(--muted);background:#26343c}button[aria-pressed=true]{background:var(--cyan);border-color:var(--cyan);color:#0f242a}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ffbf76;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}a{color:var(--cyan);text-decoration:none}.topbar{display:flex;align-items:center;justify-content:space-between;padding:24px 4vw;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;gap:13px;align-items:center;color:var(--text);font-weight:700;letter-spacing:1.5px;font-size:14px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;color:var(--bg);background:var(--cyan);font-weight:850;letter-spacing:-1px;font-size:19px}.brand small{display:block;color:var(--muted);font-size:9px;font-weight:500;letter-spacing:1.7px;margin-top:4px}.demo-label{font-size:10px;letter-spacing:1.6px;color:var(--muted);display:flex;gap:8px;align-items:center}.demo-label i,.monitor-chin i{background:var(--cyan);width:6px;height:6px;display:inline-block;border-radius:50%}main{max-width:1800px;margin:auto;padding:0 4vw}.intro{display:flex;justify-content:space-between;gap:30px;padding:42px 0 32px;align-items:flex-end}.eyebrow,.section-label,.scene-kicker,.note-number{font-size:10px;letter-spacing:1.8px;font-weight:650;color:var(--muted)}.eyebrow{margin:0 0 10px;color:var(--cyan)}h1{font-size:clamp(30px,3.5vw,53px);line-height:1.08;letter-spacing:-1.8px;font-weight:600;margin:0}h1 span{color:var(--muted)}.intro-note{margin:0;color:var(--muted);font-size:13px;line-height:1.8}.workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px}.scene-section,.display-section{min-width:0}.scene-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;margin-bottom:14px}#dimension-label{font-size:11px;color:var(--muted)}.segmented{display:inline-flex;gap:0}.segmented button{border-radius:0;padding:8px 15px}.segmented button:first-child{border-radius:4px 0 0 4px}.segmented button:last-child{border-radius:0 4px 4px 0}.segmented button+button{border-left:0}#scene{height:475px;position:relative;background:#1c252c;overflow:hidden;border:1px solid var(--line);border-radius:5px}#scene>canvas{width:100%;height:100%;display:block;touch-action:none}.scene-overlay{position:absolute;left:20px;bottom:18px;pointer-events:none;display:flex;flex-direction:column;gap:5px}.scene-kicker{font-size:9px;color:#a3bcc9}#scene-caption{font-size:12px;color:#d1dee4}#loading,#scene-error{position:absolute;inset:0;display:grid;place-items:center;padding:35px;font-size:14px;color:var(--cyan);background:#1c252c;z-index:2}#scene-error[hidden],#loading[hidden]{display:none}#scene-error{color:var(--coral)}.views{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.views button{font-size:11px;padding:8px 11px}.scene-hint{font-size:11px;color:var(--muted);margin:12px 0}.section-label{display:flex;align-items:center;justify-content:space-between;min-height:46px;margin-bottom:14px;gap:8px}#phase-label{color:var(--cyan);letter-spacing:1px;font-size:10px}.monitor{background:#080d11;border:1px solid #3c4c55;padding:11px 11px 0;border-radius:8px;box-shadow:0 22px 50px #0005}.monitor canvas{display:block;width:100%;aspect-ratio:16/9;height:auto;border-radius:2px}.monitor-chin{height:27px;display:flex;gap:7px;align-items:center;justify-content:center;font-size:7px;letter-spacing:1.8px;color:#7f969f}.monitor-chin i{height:3px;width:3px}.transport{display:flex;align-items:center;gap:10px;margin-top:20px}.transport button{font-size:19px;line-height:1;padding:10px;min-width:44px}.transport input{accent-color:var(--cyan);min-width:0;flex:1;cursor:pointer}.transport output{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.playback-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.playback-options button{font-size:11px}.replay-note{font-size:12px;color:var(--muted);line-height:1.7;margin:20px 0 16px;max-width:560px}.legend{display:flex;gap:22px;font-size:10px;color:var(--muted);flex-wrap:wrap}.legend span{display:flex;align-items:center;gap:8px}.line{width:23px;height:2px;background:#efb85b}.ring{width:10px;height:10px;border:2px solid #efb85b;border-radius:50%}.design-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:38px 0 0;padding:30px 0;border-top:1px solid var(--line)}.note-number{color:var(--cyan);font-size:9px}h2{font-size:17px;font-weight:550;letter-spacing:-.3px;margin:9px 0}p{margin:0}.design-notes p{color:var(--muted);font-size:12px;line-height:1.8;max-width:380px}footer{border-top:1px solid var(--line);padding:22px 0 30px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:20px}footer p{max-width:620px}footer strong{color:#ccd7dc;font-weight:500}footer div{display:flex;gap:18px;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start}body.screen-focus .scene-section{display:none}body.screen-focus .workspace{grid-template-columns:minmax(0,1000px);justify-content:center}body.screen-focus .design-notes,body.screen-focus .intro{display:none}body.screen-focus .workspace{padding-top:22px}@media(min-width:1600px){#scene{height:550px}}@media(max-width:1050px){.workspace{grid-template-columns:1fr;gap:25px}#scene{height:490px}.intro-note{font-size:12px}.monitor{max-width:850px;margin:auto}.display-section{max-width:850px;width:100%;margin:auto}.design-notes{gap:22px}}@media(max-width:600px){.topbar{padding:16px 5vw}.brand{font-size:12px}.brand small{font-size:7px}.demo-label{font-size:7px;letter-spacing:.8px}.demo-label i{display:none}main{padding:0 5vw}.intro{padding:28px 0 24px;display:block}.intro-note{margin-top:17px;font-size:12px}.intro-note br{display:none}h1{font-size:35px}.scene-toolbar{flex-wrap:wrap;margin-bottom:10px}#dimension-label{font-size:10px}#scene{height:390px}.views{gap:5px}.views button{padding:8px;font-size:10px}.design-notes{grid-template-columns:1fr;gap:22px}.design-notes p{max-width:none}footer{flex-direction:column}footer div{justify-content:flex-start}.section-label{font-size:8px;letter-spacing:1px}.playback-options{gap:7px}.playback-options button{font-size:10px;padding:9px}.transport{gap:7px}.transport output{font-size:9px}}