/* Confine the 3D scene to its own stage, keeping copy readable in every phase. */
#scene{left:39%;right:0;top:4%;bottom:9%}
.story{z-index:2;width:36%;top:29%}
.ambient{background:linear-gradient(90deg,#11121465,transparent 48%)}
#model-status{position:absolute;top:15%;left:7vw;font-size:8px;letter-spacing:.19em;color:#8e929a;max-width:30%;line-height:1.8}
.experience-controls{display:flex;gap:10px;align-items:center}
#detail-toggle{border:1px solid #d9bc8e60;background:#d9bc8e0a;color:#d9bc8e;padding:13px 18px;font-size:12px}
.model-note a{text-decoration:underline;text-underline-offset:3px}
.credits{max-width:800px;line-height:1.8;font-size:11px;color:#929499;margin-top:26px}
.credits a{text-decoration:underline;text-underline-offset:3px}
#scene .fallback{inset:12% 12%;width:76%;height:76%}
@media(max-width:1100px){.scroll-note{display:none}.story{width:39%;left:5.5vw}.stage-bottom{gap:12px}.chapter{min-width:0}}
@media(max-width:760px){
 #scene{left:0;right:0;top:40%;bottom:11%}
 .story{width:86%;top:16%;left:7%}
 #model-status{top:auto;bottom:14%;left:auto;right:6%;font-size:6px;max-width:40%}
 .stage-bottom{bottom:44px;left:6%;right:6%}
 .experience-controls{gap:6px}
 #detail-toggle,#motion-toggle{font-size:9px;padding:9px 8px}
 .chapter{gap:8px}.chapter>span:first-child{font-size:23px}#phase-name{max-width:63px;font-size:7px}
 .model-note{font-size:7px;max-width:88%;line-height:1.5;bottom:10px}
 #scene .fallback{inset:5% 20%;width:60%;height:90%}
}
@media(max-width:380px){#detail-toggle{max-width:89px}.stage-bottom{left:4%;right:4%}.experience-controls{gap:4px}}
@media(prefers-reduced-motion:reduce){.journey{height:100svh;min-height:660px}.scroll-note{display:none}}