:root{color-scheme:dark;--bg:#10191c;--panel:#172226;--line:#344348;--text:#e8e6dd;--muted:#a6b0ad;--mint:#a4d7c1;--gold:#e2c791;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 52% -10%,#263b3b 0%,transparent 42%),var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.skip{position:absolute;top:-90px;left:16px;padding:12px;background:var(--gold);color:var(--bg);z-index:10}.skip:focus{top:16px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.topbar{height:72px;max-width:1480px;margin:auto;padding:0 clamp(22px,4vw,60px);display:flex;align-items:center;gap:28px;border-bottom:1px solid #ffffff1a;font-size:12px}.topbar .brand{font-size:24px;font-weight:700;letter-spacing:-1.4px}.brand span{color:var(--gold);font-weight:400}.topbar>span{margin-right:auto;color:var(--muted);font-size:10px;letter-spacing:.22em}.topbar>a:last-child{color:var(--mint)}main{max-width:1480px;margin:auto;padding:38px clamp(22px,4vw,60px) 100px}.intro{display:flex;gap:24px;justify-content:space-between;align-items:flex-start;margin-bottom:28px}.intro>div{max-width:840px}.eyebrow,.prototype,.control-head>span,.stage-top,.stage-bottom{font-size:10px;letter-spacing:.2em;font-weight:650}.eyebrow{color:var(--mint);margin:0 0 16px}h1{font-size:clamp(40px,4.5vw,60px);font-weight:550;letter-spacing:-.065em;line-height:1.04;margin:0 0 16px;max-width:810px}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--gold)}.lead{color:#c4ccc8;font-size:clamp(14px,1.2vw,16px);line-height:1.6;margin:0;max-width:730px}.prototype{color:var(--gold);white-space:nowrap;border:1px solid #e2c7915c;background:#e2c7910d;border-radius:999px;padding:11px 14px;margin-top:2px}.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:18px;align-items:start}.stage-shell,.controls,.review{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}.stage-top,.stage-bottom{display:flex;justify-content:space-between;gap:18px;padding:16px 20px;color:#a7b6b2}.stage-top{border-bottom:1px solid var(--line)}.stage-top>span:first-child{color:var(--mint)}.stage-top i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #7adbb0;margin-right:7px}canvas{display:block;width:100%;height:auto;background:#253136}.stage-bottom{border-top:1px solid var(--line);font-size:9px;letter-spacing:.08em}.stage-bottom span:last-child{color:var(--gold);letter-spacing:.18em}.controls{padding:20px}.control-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}.control-head>span{color:var(--mint)}.control-head button{background:#2a3839;border:1px solid #50635f;border-radius:9px;color:var(--text);padding:9px 12px;font-size:11px}.control-head button:hover{background:#354846}fieldset{border:0;border-bottom:1px solid var(--line);margin:22px 0 0;padding:0 0 23px}legend{font-family:Georgia,serif;font-size:27px;padding:0}fieldset p{margin:5px 0 15px;color:var(--muted);font-size:12px;line-height:1.5}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.actions button{text-align:left;padding:12px 10px;min-height:43px;border-radius:11px;background:#212e31;border:1px solid #455356;color:#d1d8d3;font-size:12px;transition:background .2s,border-color .2s,transform .2s}.actions button:hover{background:#304340;transform:translateY(-2px)}.actions button[aria-pressed="true"]{background:#a4d7c11f;border-color:var(--mint);color:#e4f4e9}.joint-toggle{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;margin-top:20px;font-size:12px;cursor:pointer}.joint-toggle input{accent-color:var(--mint);width:17px;height:17px}.joint-toggle small{grid-column:2;color:var(--muted);font-size:10px;margin-top:3px}.review{display:grid;grid-template-columns:1fr minmax(260px,40%);gap:40px;padding:clamp(24px,4vw,52px);margin-top:28px}.review h2{font-size:clamp(28px,3vw,45px);letter-spacing:-.05em;line-height:1.1;font-weight:550;max-width:580px;margin:0 0 20px}.review p:not(.eyebrow){font-size:14px;color:#c0cbc5;line-height:1.8;max-width:630px}.review-links{display:flex;flex-wrap:wrap;gap:25px;margin-top:28px}.review-links a{color:var(--mint);border-bottom:1px solid #a4d7c180;padding-bottom:5px}.review figure{margin:0;align-self:center}.review img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid #ffffff24}.review figcaption{color:var(--muted);font-size:11px;margin-top:10px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:980px){.lab-layout{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}.control-head,.joint-toggle{grid-column:1/-1}.controls fieldset{margin-top:18px}.review{grid-template-columns:1fr 40%}}@media(max-width:650px){.topbar{gap:12px;height:64px}.topbar>span{font-size:8px}.topbar>a:last-child{font-size:10px}main{padding-top:38px}.intro{display:block;margin-bottom:26px}.prototype{display:inline-block;margin-top:22px;font-size:8px}h1{font-size:45px}.stage-top,.stage-bottom{font-size:8px;letter-spacing:.08em;padding:13px}.stage-bottom span:last-child{display:none}.controls{display:block}.review{grid-template-columns:1fr;padding:25px;gap:20px}.review figure{order:-1}}@media(prefers-reduced-motion:reduce){.actions button{transition:none}.actions button:hover{transform:none}}

.no-script{padding:16px 20px;border:1px solid var(--gold);border-radius:12px;color:var(--gold);margin:0 0 24px}

.view-controls{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}.view-controls button{border:1px solid transparent;background:transparent;color:var(--muted);padding:9px 12px;border-radius:8px;font-size:11px;min-height:36px}.view-controls button[aria-pressed="true"]{border-color:#a4d7c155;background:#a4d7c112;color:var(--mint)}button:disabled{opacity:.4;cursor:wait}.stage-shell canvas{aspect-ratio:3/2}.stage-shell:not(.loaded) canvas{background:#172226 url(/assets/room/studio.jpg) center/cover}.stage-shell.failed canvas{display:none}.stage-shell.failed:after{content:"The motion preview could not load. Please reload to try again.";display:block;padding:24px;color:var(--gold)}

.timeline{display:grid;gap:10px;font-size:12px;margin-top:20px}.timeline input{width:100%;accent-color:var(--mint)}.timeline small{font-size:10px;color:var(--muted);line-height:1.5}@media(min-width:651px) and (max-width:980px){.timeline{grid-column:1/-1}}
@media(max-width:650px){.lab-layout{display:block}.lab-layout>.stage-shell{position:sticky;top:8px;z-index:3;box-shadow:0 12px 25px #08101170}.lab-layout>.controls{margin-top:18px}.stage-top{padding:10px}.view-controls{gap:3px;padding:6px}.view-controls button{padding:7px 9px;font-size:10px}.stage-bottom{padding:10px}}
