:root { color-scheme:light; --ink:#2d2d33; --paper:#e6e6e3; --accent:#696375; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; background:var(--paper); }
body { -webkit-tap-highlight-color:transparent; }
main { position:relative; width:100%; height:100svh; min-height:320px; isolation:isolate; background:var(--paper); }
main::after { content:""; position:absolute; inset:16px; border:1px solid #33333e36; pointer-events:none; z-index:2; }
.scene-frame { position:absolute; inset:92px 16px 104px; border-top:1px solid #42424d14; border-bottom:1px solid #42424d14; z-index:0; pointer-events:none; }
.scene-frame i { position:absolute; height:100%; width:1px; background:#42424d0e; left:33.333%; }
.scene-frame i+i { left:66.666%; }
.brand { position:absolute; left:42px; top:34px; z-index:4; width:42px; height:42px; color:var(--ink); }
.brand svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ambient-dot { position:absolute; top:51px; right:52px; width:7px; height:7px; border-radius:50%; background:#b7b7be; z-index:4; }
.ambient-dot i { display:block; width:100%; height:100%; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #4b49510b; }
#viewport,#fallback { position:absolute; inset:0; }
#viewport { z-index:1; opacity:0; transition:opacity 1.2s ease; }
#viewport canvas { width:100%; height:100%; display:block; outline:none; }
#fallback { display:grid; place-items:center; padding:7vw; transition:opacity .7s ease; }
#fallback svg { width:100%; max-width:1300px; filter:grayscale(1); opacity:.72; }
body.ready #viewport { opacity:1; }
body.ready #fallback { opacity:0; pointer-events:none; }
[data-fallback-task],[data-fallback-device] { display:none; }
body[data-device="vision"] [data-fallback-device="vision"],body[data-device="glasses"] [data-fallback-device="glasses"],body[data-scenario="breaker"] [data-fallback-task="breaker"],body[data-scenario="rack"] [data-fallback-task="rack"],body[data-scenario="weld"] [data-fallback-task="weld"],body[data-scenario="carry"] [data-fallback-task="carry"] { display:inline; }
.scenario-selector { position:absolute; top:31px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:5; }
.scenario { width:40px; height:40px; color:#98959e; border-bottom:1px solid transparent; }
.scenario svg { width:18px; height:18px; }
.scenario.active { color:#4c4758; border-bottom-color:#77717f; }
.controls { position:absolute; display:flex; align-items:center; gap:24px; bottom:max(35px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); z-index:5; }
button { appearance:none; display:grid; place-items:center; border:0; color:var(--ink); background:transparent; cursor:pointer; padding:0; flex-shrink:0; transition:background .25s,color .25s,transform .25s,box-shadow .25s; }
button svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
button:hover { color:#1d2520; background:#f5f5f1; }
button:active { transform:scale(.93); }
button:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.round { width:42px; height:42px; border:1px solid #48485435; border-radius:2px; background:#e6e6e3; }
.play-icon { display:none; }
body.paused .pause-icon { display:none; }
body.paused .play-icon { display:block; }
.timeline { display:flex; position:relative; align-items:center; gap:39px; height:50px; }
.progress-track { position:absolute; height:1px; left:22px; right:22px; top:25px; background:#72717b42; z-index:-1; overflow:hidden; }
#progress { background:#666270; width:0; height:100%; transform-origin:left; }
.stage { width:44px; height:44px; border-radius:2px; background:#e6e6e3; color:#939099; border:1px solid transparent; }
.stage.active { color:#eeeeeb; background:#36333f; border-color:#36333f; }
.corner { position:absolute; bottom:48px; width:12px; height:12px; border-bottom:1px solid #76717f60; z-index:3; }
.corner-left { left:48px; border-left:1px solid #76717f60; }
.corner-right { right:48px; border-right:1px solid #76717f60; }
@media (max-width:700px) { .brand {left:23px;top:22px;width:33px;height:33px;} .ambient-dot {right:34px;top:37px;width:5px;height:5px;} .controls {bottom:max(21px,env(safe-area-inset-bottom));gap:18px;} .timeline {gap:26px;} .round {width:38px;height:38px;} .corner {display:none;} main::after {inset:10px;} .scene-frame {left:10px;right:10px;top:76px;bottom:88px;} #fallback {padding:3vw;} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; } }
@media (max-width:700px) { .scenario-selector { top:18px;gap:3px; } .scenario { width:35px;height:38px; } }
.brand, .ambient-dot, .scenario-selector, .controls, .corner { display:none; }