/* The viewport is the frame; controls stay at its edges, not on the face. */
body>header{position:absolute;inset:0 0 auto;z-index:6;padding:22px 4.5%;border:0;background:linear-gradient(#081719e0,transparent)}
body>header .brand{font-size:22px}body>header nav{font-size:11px;gap:25px}
.experience{position:relative;height:100vh;height:100dvh;min-height:0;background:#081719;color:#ede2c9;overflow:hidden;isolation:isolate}
#motion-stage{position:absolute;inset:0;cursor:grab;touch-action:pan-y;outline-offset:-5px}
#motion-stage:active{cursor:grabbing}#motion-stage canvas{display:block;width:100%;height:100%}
.experience-title{position:absolute;top:clamp(115px,20vh,240px);left:4.5%;max-width:220px;pointer-events:none;z-index:2;text-shadow:0 2px 12px #081719}
.experience-title .eyebrow{color:#88aaa0;font-size:9px;letter-spacing:.17em;margin-bottom:24px}
.experience-title h1{font-size:clamp(30px,3.1vw,56px);font-weight:400;letter-spacing:.16em;margin:0 0 20px;line-height:1.45}
.experience-title p:not(.eyebrow){font-size:11px;line-height:2.2;max-width:170px;color:#aebcad}
#scene-techniques,#motion-fps{display:none}
.motion-meta{position:absolute;right:4.5%;top:130px;text-align:right;display:flex;flex-direction:column;gap:12px;font-size:9px;letter-spacing:.08em;color:#88aaa0;pointer-events:none}
#motion-phase{font-family:"Songti SC",serif;font-size:21px;color:#d6b37b;letter-spacing:.2em}
#scene-hotspots{position:absolute;inset:0;pointer-events:none;z-index:3}
.scene-pin{position:absolute;left:-12px;top:-12px;width:24px;height:24px;padding:0;border:1px solid #d6b37b66;border-radius:50%;background:#102b2bb0;color:#e0c596;font:10px Georgia,serif;cursor:pointer;pointer-events:auto}
.scene-pin:hover,.scene-pin[aria-pressed=true]{background:#d6b37b;color:#172d30}.scene-pin[hidden]{display:none}
.scene-story{position:absolute;bottom:180px;left:4.5%;max-width:210px;border-left:1px solid #d6b37b55;padding-left:14px;pointer-events:none;z-index:2;text-shadow:0 1px 6px #081719}
.scene-story .eyebrow{display:none}.scene-story h2{font-size:16px;font-weight:400;margin:0 0 8px}.scene-story p{font-size:10px;line-height:1.9;color:#aebcad;margin:0}
.motion-caption{position:absolute;bottom:125px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;font-size:9px;color:#88aaa0;pointer-events:none;gap:16px}
.motion-console{position:absolute;bottom:60px;left:4.5%;right:4.5%;z-index:4;display:flex;align-items:center;gap:22px}
.motion-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.motion-actions button,.motion-options select{border:1px solid #88aaa03d;background:#081719b8;color:#ede2c9;padding:8px 13px;font-size:11px;border-radius:2px;cursor:pointer}
.motion-actions button:hover,.motion-actions button[aria-pressed=true]{border-color:#d6b37b;color:#edcf98}.motion-actions button:disabled{opacity:.4;cursor:not-allowed}
.motion-settings{position:relative;margin-left:auto}.motion-settings summary{list-style:none;cursor:pointer;font-size:11px;color:#aebcad;padding:8px 0 8px 12px;white-space:nowrap}.motion-settings summary::-webkit-details-marker{display:none}.motion-settings summary span{margin-left:18px;color:#d6b37b}
.settings-panel{position:absolute;bottom:45px;right:0;width:min(560px,90vw);max-height:60dvh;overflow:auto;padding:22px;background:#0e2426f7;border:1px solid #88aaa04d;box-shadow:0 12px 55px #0004}
.motion-options{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;margin-top:20px;font-size:10px;color:#aebcad}.motion-options label{display:flex;align-items:center;gap:10px}.motion-options select{padding:6px 9px;max-width:270px}
.motion-gain input{width:100px;accent-color:#d6b37b}.motion-gain output{min-width:32px;color:#d6b37b}
.journey{display:flex;gap:16px;align-items:center;font-size:10px;color:#aebcad;margin-top:20px}.journey input{flex:1;accent-color:#d6b37b;height:3px;cursor:pointer}
.settings-panel>p{font-size:10px;line-height:1.9;color:#88aaa0;margin:18px 0 0}
.motion-down{position:absolute;bottom:18px;right:4.5%;font-size:10px;color:#aebcad;padding:5px}
.file-painting{width:100%;height:100%;object-fit:contain;opacity:.65}.file-notice{position:absolute;z-index:8;top:36%;left:50%;transform:translateX(-50%);width:min(420px,88%);padding:24px;border:1px solid #d6b37b88;background:#102729f5;text-align:center}.file-notice p{font-size:13px;line-height:1.8}.file-notice a{display:inline-block;color:#172d30;background:#d6b37b;padding:10px 18px}.motion-failure{position:absolute;bottom:30%;left:10%;max-width:80%}
@media(max-width:1000px){.experience-title{max-width:170px}.experience-title h1{font-size:32px}.experience-title p:not(.eyebrow){max-width:140px}.scene-story{max-width:170px}.motion-caption span:last-child{display:none}}
@media(max-width:760px){
 body>header{padding:calc(18px + env(safe-area-inset-top)) 6% 12px}body>header .brand{font-size:20px}body>header .brand small{font-size:7px}body>header nav{gap:14px;font-size:10px}body>header nav a:last-child{display:none}
 .experience-title{top:100px;left:6%;max-width:82%;display:flex;gap:20px;align-items:flex-start}.experience-title .eyebrow{display:none}.experience-title h1{font-size:25px;margin:0;writing-mode:vertical-rl;letter-spacing:.18em}.experience-title p:not(.eyebrow){font-size:10px;max-width:175px;line-height:1.9;margin:0;padding-top:3px}
 .motion-meta{top:100px;right:6%}#motion-status{display:none}#motion-phase{font-size:13px;writing-mode:vertical-rl}.scene-story{display:none}
 .motion-caption{bottom:calc(159px + env(safe-area-inset-bottom));left:6%;right:6%;font-size:8px;justify-content:center;text-align:center}
 .motion-console{bottom:calc(68px + env(safe-area-inset-bottom));left:6%;right:6%;flex-wrap:wrap;gap:8px 12px}.motion-actions{gap:6px}.motion-actions button{font-size:10px;padding:8px 9px}.motion-settings{margin-left:0;flex-basis:100%}.motion-settings summary{padding-left:0}.settings-panel{left:0;right:auto;width:88vw;max-height:58dvh;padding:18px}.motion-options{gap:14px}.motion-options select{max-width:65vw;font-size:10px}.motion-down{left:6%;right:auto;bottom:calc(18px + env(safe-area-inset-bottom));font-size:9px}
}
@media(max-height:620px){.experience-title{top:100px}.experience-title h1{font-size:25px;margin-bottom:8px}.experience-title .eyebrow,.experience-title p:not(.eyebrow),.scene-story,.motion-meta{display:none}.motion-caption{bottom:110px}.motion-console{bottom:55px}.settings-panel{max-height:60dvh}.experience-title{display:block}}
@media(prefers-reduced-motion:reduce){.scene-pin{scroll-behavior:auto}}