*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#f2f1ed;background:#030303;font-synthesis:none}
body{margin:0}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:wait;opacity:.4}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #d9dfce;outline-offset:6px}
[hidden]{display:none!important}
#studio{isolation:isolate;background:#030303}
canvas{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:pan-y;outline:none;z-index:0}
body.viewer-active canvas{cursor:grab;touch-action:none}
body.viewer-active canvas:active{cursor:grabbing}
#viewer-backdrop{position:fixed;inset:0;background:#030303;opacity:var(--view-progress,0);pointer-events:none;z-index:-1}
#model-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.interface{position:absolute;inset:0;pointer-events:none;z-index:2;transform:translateZ(0);transition:opacity .35s ease}
.interface button{pointer-events:auto}
.focus-control{position:absolute;bottom:28px;left:28px;border:1px solid #70746a;background:#151713;padding:12px 18px;font-size:13px;opacity:0;pointer-events:none!important}
.focus-control:focus-visible{opacity:1;pointer-events:auto!important}
.focus-control:disabled{opacity:0}
#hero-play{left:auto;right:28px}
#explorer-ui{position:fixed;opacity:1;transition:none}
body.viewer-active #hero-ui{opacity:0}
.interface header{position:absolute;right:30px;top:28px;opacity:var(--close-opacity,0);transform:translate3d(0,calc((1 - var(--close-opacity,0))*-10px),0);will-change:transform,opacity}
.viewer-close{display:grid;place-items:center;width:50px;height:50px;padding:0;border:1px solid #ffffff26;border-radius:50%;background:#4b4d46bb;color:#f3f2ed;backdrop-filter:blur(12px);transition:transform .3s ease,background .3s ease,color .3s ease;}
.viewer-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .35s ease}
.viewer-close:hover{transform:scale(1.06);background:#eee;color:#171b13}
.viewer-close:hover svg{transform:rotate(90deg)}
.viewer-close:active{transform:scale(.96)}
.explorer-bottom{position:absolute;bottom:30px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.explorer-bottom{opacity:var(--controls-opacity,0);transform:translate3d(0,calc((1 - var(--controls-opacity,0))*10px),0);will-change:transform,opacity}
.control-group{display:flex;gap:24px}
.explorer-bottom button{border:0;border-bottom:1px solid #555;background:none;padding:12px 0;font-size:12px;white-space:nowrap;min-height:44px}
.explorer-bottom button:hover{color:white;border-color:#eee}
#surface{display:flex;gap:10px;align-items:center}
.indicator{width:6px;height:6px;border-radius:100%;background:#d9b18d;transition:background .2s}
#surface[aria-pressed=false] .indicator{background:#898989}
#status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:#999;pointer-events:none;z-index:3}
#status span{width:16px;height:1px;background:#aaa;animation:pulse 1.5s infinite}
#status[role=alert]{inset:auto 6% 30px;padding:16px;line-height:1.7;text-align:center;background:#030303dd}
dialog{border:1px solid #353535;background:#111;color:#bbbeb5;width:min(500px,calc(100% - 40px));max-height:85svh;padding:28px;line-height:1.7;font-size:13px}
dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}
dialog h2{font-size:21px;font-weight:400;color:#eee;margin:0}
dialog button{background:none;border:0;font-size:25px}
dialog a{color:#ddd;text-decoration:underline;text-underline-offset:4px}
@keyframes pulse{50%{opacity:.2;transform:scaleX(.4)}}
@media(max-width:600px){.interface header{right:21px;top:20px}.viewer-close{width:46px;height:46px}.explorer-bottom{left:23px;right:23px;bottom:24px}.control-group{gap:20px}.explorer-bottom button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}