*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#060c0d;color:#eff5ed;font-family:Arial,Helvetica,sans-serif}#stage{position:fixed;inset:0}canvas{display:block;width:100%;height:100%}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 45%,transparent 30%,#03070877 100%)}header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:36px 4vw;border-top:3px solid #83b699}header a{color:#eff5ed;text-decoration:none;font-size:29px;letter-spacing:-1.3px;font-weight:700}header a span{font-size:11px;display:block;font-weight:400;letter-spacing:4px;text-transform:uppercase;margin-top:3px}.edition{font-size:10px;letter-spacing:3px;color:#adc0b3}.story{position:fixed;left:7vw;top:36%;width:37vw;pointer-events:none;will-change:opacity,transform}.eyebrow{font-size:10px;letter-spacing:3px;color:#a6dabb;margin:0 0 25px;display:flex;align-items:center;gap:15px}.eyebrow:before{content:'';height:1px;width:35px;background:#a6dabb}h1{font-size:clamp(32px,4.2vw,72px);line-height:1.08;letter-spacing:-.055em;font-weight:500;margin:0;max-width:640px}#copy{font-size:clamp(13px,1.13vw,18px);line-height:1.75;color:#9cafa6;max-width:350px;margin-top:27px}footer{position:fixed;bottom:0;left:0;right:0;padding:22px 4vw 25px;background:linear-gradient(transparent,#060c0df5 30%)}#chapters{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:25px}#chapters button{border:0;border-top:1px solid #ffffff24;border-radius:0;text-align:left;padding:13px 0 0;background:none;color:#7d9287;font-size:10px;line-height:1.5;transition:color .4s,border-color .4s}#chapters button span{display:block;font-size:9px;letter-spacing:2px;margin-bottom:3px}#chapters button[aria-current=true]{border-color:#c4ffdc;color:#d8f7e6}button{font:inherit;cursor:pointer;color:#c4d3cb;background:#ffffff05;border:1px solid #ffffff20;border-radius:22px;padding:9px 17px;font-size:11px;white-space:nowrap}button:hover{color:white;border-color:#a6dabb}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #a6dabb;outline-offset:5px}button:disabled{opacity:.4;cursor:wait}.transport{display:flex;align-items:center;gap:12px}.timeline{flex:1;display:flex;align-items:center}input[type=range]{width:100%;height:2px;accent-color:#afd6bc;cursor:pointer}output{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#9bafa2}#loading{position:fixed;inset:0;background:#060c0d;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;font-size:12px;letter-spacing:2px;transition:opacity .7s}#loading span{height:1px;width:100px;background:#a6dabb;animation:breathe 1s infinite alternate}#loading.done{opacity:0;pointer-events:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes breathe{to{width:40px;opacity:.2}}@media(max-width:700px){header{padding:24px 6vw}.edition{font-size:8px;letter-spacing:1px}.story{top:18%;left:8vw;width:84vw}h1{font-size:36px;max-width:85vw}.eyebrow{margin-bottom:14px}#copy{font-size:13px;margin-top:14px;max-width:280px}#chapters{gap:8px;margin-bottom:17px}#chapters button{font-size:0;padding-top:8px}#chapters button span{font-size:10px}.transport{gap:6px;flex-wrap:wrap}button{font-size:10px;padding:8px 11px}#fullscreen{display:none}.timeline{min-width:80px}output{font-size:8px}footer{padding:15px 6vw 22px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Keep the moving geometry behind the copy in shadow during close shots. */
.vignette{background:linear-gradient(90deg,#060c0d 0%,#060c0df0 27%,#060c0d00 53%),radial-gradient(ellipse at 65% 45%,transparent 30%,#03070877 100%)}
@media(max-width:700px){.vignette{background:radial-gradient(ellipse at 65% 45%,transparent 30%,#03070877 100%)}}