*{box-sizing:border-box}
html,body{margin:0;overscroll-behavior:none;background:#08070c}
html{scroll-behavior:auto}
#journey{color:#fff0cb}
html.playing,html.playing body{height:100%;overflow:hidden}
#journey{font:14px "Microsoft YaHei","PingFang SC",system-ui,sans-serif}
main{min-height:0}
#journey{height:780svh;position:relative}
.viewport{position:sticky;top:0;height:100svh;overflow:hidden}
canvas{display:block;width:100%;height:100%}
.controls{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:8px}
.act{position:absolute;inset:0;display:grid;align-items:end;padding:16px clamp(20px,8vw,116px) clamp(30px,8vh,88px);
  opacity:var(--act-opacity,0);transform:translateY(var(--act-y,0px));
  background:linear-gradient(0deg,#08070cf5 0%,#08070cc9 20%,transparent 61%);pointer-events:none}
.act[inert]{visibility:hidden}
.act-copy{max-width:510px;text-shadow:0 1px 7px #08070c;pointer-events:auto}
.act-copy p{margin:8px 0 0;line-height:1.6}
.act-copy h2{margin:6px 0 12px;font-size:clamp(27px,3.2vw,48px);line-height:1.13;text-wrap:balance}
.act-label{color:#ffd285;font-weight:800;letter-spacing:.22em}
.act-copy .evidence{color:#f0dec6;font-size:13px}
.act-copy a{color:#ffe3a3;text-underline-offset:3px}
.act-copy .research-note{font-size:12px;color:#d3bb98}
@media (max-width:599px){
  .act{padding-bottom:max(25px,env(safe-area-inset-bottom));background:linear-gradient(0deg,#08070c 0%,#08070ce0 24%,transparent 62%)}
}
.controls button{font:inherit;font-weight:650;min-width:52px;min-height:44px;padding:6px 12px;border:1px solid #e2b97583;
  border-radius:5px;color:inherit;background:#121019ed;cursor:pointer}
.controls button:hover{border-color:#ffe4a9}
.controls button:focus-visible{outline:2px solid #ffe4a9;outline-offset:3px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The approved opening remains full-frame; text placement responds to each camera stop. */
.act{padding-bottom:clamp(66px,10vh,100px)}
.act-1,.act-3{justify-items:end;background:linear-gradient(0deg,#08070cf5,transparent 68%)}
.act-2 .act-copy{max-width:520px}
.act-4 .act-copy{max-width:550px}
.act-copy{width:100%}
.act .research-note a{display:inline-block;min-height:24px}
#research-body{position:relative;color:var(--ink);background:var(--paper)}
.site-head{scroll-margin-top:0}
#research-body section[id]{scroll-margin-top:var(--nav-height,66px)}
.site-foot{position:relative}
.research::before{pointer-events:none}
@media(max-width:599px){
 .act{padding:18px 22px 68px;align-items:end;background:linear-gradient(0deg,#08070cf5 0%,#08070cdd 35%,transparent 77%)}
 .act-copy h2{font-size:28px;line-height:1.25}
 .act-copy p{font-size:14px;line-height:1.65}
 .act-copy .evidence{font-size:13px}
 .act-copy .research-note{font-size:11px}
 .site-head{flex-wrap:wrap;gap:3px}
 .site-head nav{display:flex;width:100%;overflow-x:auto;gap:2px}
 .site-head nav a{white-space:nowrap;padding:8px 10px;font-size:12px;flex-shrink:0}
}
.act-copy h2 span{white-space:nowrap}
@media(prefers-reduced-motion:reduce){.tape-track{animation:none}.btn{transition:none}}