/* A scroll-led story, designed to remain legible without JavaScript or WebGL. */
.story-intro{padding:clamp(110px,13vw,200px) 0 clamp(70px,8vw,120px);background:radial-gradient(ellipse at 50% 0%,#163846 0%,#091421 50%,#070c16 85%);text-align:center;overflow:hidden}.story-intro .wrap{display:flex;flex-direction:column;align-items:center}.story-intro h2{max-width:20ch;margin:24px auto 22px;font-size:clamp(2.8rem,5.4vw,5.8rem);letter-spacing:-.055em}.story-intro h2 em{color:#8bf1e4;font-style:normal}.story-intro p{max-width:50ch;color:#bdcbd8;font-size:1.12rem}.story-start{display:inline-flex;gap:14px;margin-top:38px;color:#abf8ed;text-decoration:none;font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.14em}.story-start span{font-size:1.3rem;line-height:.8}
.story-journey{display:grid;grid-template-columns:1fr 1fr;background:#08111d;position:relative;border-top:1px solid #213447;border-bottom:1px solid #213447}.story-visual{position:sticky;top:82px;height:calc(100svh - 82px);min-height:520px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#163447 0%,#0c1d2c 40%,#08111d 75%);border-right:1px solid #22394a}.story-visual-inner{position:relative;width:100%;height:100%;display:grid;place-items:center}.story-visual-inner:before,.story-visual-inner:after{content:"";position:absolute;inset:9%;border:1px solid rgba(128,232,224,.08);border-radius:50%;pointer-events:none}.story-visual-inner:after{inset:20%;border-style:dashed}.story-orb{position:absolute;inset:5% 0}.story-canvas,.story-canvas canvas{display:block;width:100%;height:100%}.story-fallback{position:absolute;inset:20%;display:grid;place-items:center;opacity:.65}.story-fallback i{position:absolute;width:70%;aspect-ratio:1;border:1px solid #6bd8d1;border-radius:50%;transform:rotateX(65deg) rotate(-25deg);box-shadow:0 0 30px #42c8be30}.story-fallback i:nth-child(2){transform:rotateY(65deg) rotate(25deg)}.story-fallback i:nth-child(3){transform:rotateX(62deg) rotate(45deg)}.story-fallback b{width:36%;aspect-ratio:1;border:1px solid #82e9df;transform:rotate(45deg);background:radial-gradient(circle,#5dd8cb30,transparent)}.story-orb.is-live .story-fallback{display:none}.story-hud{position:absolute;top:38px;left:42px;right:42px;display:flex;justify-content:space-between;gap:16px;font:600 .62rem var(--mono);letter-spacing:.16em;color:#9dc6c7}.story-hud-stage{color:#a6fff2}.story-progress{position:absolute;bottom:79px;left:42px;right:42px;height:2px;background:#2b4654}.story-progress span{display:block;width:25%;height:100%;background:#84eee3;transition:width .35s}.story-visual-caption{position:absolute;bottom:40px;left:42px;right:42px;color:#d1eae8;font:500 .7rem var(--mono);letter-spacing:.04em}.story-status-dot{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#7cf3df;box-shadow:0 0 12px #7cf3df}.story-chapters{min-width:0}.story-chapter{min-height:calc(100svh - 82px);padding:clamp(80px,10vw,150px) clamp(35px,7vw,110px);display:flex;align-items:center;border-bottom:1px solid #1b3041}.story-chapter:last-child{border:0}.story-chapter>div{max-width:560px}.story-number{display:flex;align-items:center;gap:12px;color:#8ce8dd;font:600 .7rem var(--mono);letter-spacing:.18em}.story-number i{width:34px;height:1px;background:#4b8b89}.story-chapter h2{margin:30px 0;font-size:clamp(2.6rem,4.3vw,5rem);max-width:12ch}.story-chapter p{max-width:43ch;color:#bdcbd8;font-size:1.1rem;line-height:1.75}.story-chapter a{display:inline-flex;gap:30px;margin-top:35px;padding-bottom:8px;border-bottom:1px solid #75e9dd;color:#a9f7ea;text-decoration:none;font-weight:600}.story-chapter a:hover{color:#fff;border-color:#fff}.story-chapter a span{transition:transform .2s}.story-chapter a:hover span{transform:translate(3px,-3px)}
@media(max-width:760px){.story-intro{padding:100px 0 70px}.story-journey{display:block}.story-visual{top:72px;height:40svh;min-height:270px;max-height:380px;z-index:3;border-right:0;border-bottom:1px solid #294352}.story-orb{inset:-18% 0}.story-hud{top:20px;left:22px;right:22px;font-size:.56rem}.story-progress{bottom:47px;left:22px;right:22px}.story-visual-caption{bottom:20px;left:22px;font-size:.6rem}.story-chapter{min-height:60svh;padding:72px 24px}.story-chapter h2{margin:22px 0;font-size:clamp(2.5rem,8vw,3.7rem)}.story-chapter p{font-size:1rem}.story-chapter a{margin-top:25px}}
@media(prefers-reduced-motion:reduce){.story-visual{position:relative;top:auto}.story-progress span,.story-chapter a span{transition:none}}

/* Make the current chapter easy to track while keeping normal scrolling. */
.story-intro h2{line-height:1.05}.story-start{align-items:center;padding:12px 0;border-bottom:1px solid #487c7d}.story-start:hover{color:#fff;border-color:#a1f6ec}
.story-chapter{position:relative;transition:background-color .3s ease}.story-chapter.is-current{background:linear-gradient(110deg,rgba(70,175,168,.07),transparent 75%)}.story-chapter.is-current:before{content:"";position:absolute;left:0;top:15%;bottom:15%;width:3px;background:#74e8dc}
.story-chapter a{align-items:center;min-height:44px}.story-chapter a:focus-visible{outline:3px solid #a1f6ec;outline-offset:6px}.story-hud,.story-visual-caption{line-height:1.5}
@media(max-width:760px){.story-visual{height:30svh;min-height:190px;max-height:250px}.story-orb{inset:-34% 0}.story-chapter{min-height:0;padding-block:70px 80px}.story-chapter.is-current:before{top:12%;bottom:12%}}
@media(max-width:760px) and (max-height:600px){.story-visual{position:relative;top:auto;height:190px;min-height:0}}
@media(prefers-reduced-motion:reduce){.story-chapter{transition:none}}