/* Scroll follows the visitor's natural movement; no scroll interception. */
.scroll-story{height:220svh;position:relative;margin:55px 0 70px;border-radius:36px;background:linear-gradient(150deg,#e5edff,#ede3fb 50%,#d8f3e3);isolation:isolate}
.story-stage{position:sticky;top:24px;min-height:calc(100svh - 48px);display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(24px,4vw,80px);padding:clamp(24px,4vw,70px);overflow:hidden;border-radius:36px}
.story-copy h2{font-size:clamp(32px,4vw,70px);line-height:1.08;margin:18px 0 22px}.story-copy h2 em{font-style:normal;color:#2653ca}.story-instruction{font-size:clamp(15px,1.25vw,21px);max-width:30em}.story-steps{display:grid;gap:12px;margin-top:28px}.story-steps span{display:flex;gap:12px;align-items:center;color:#64728b;font-size:14px;transition:color .3s,translate .3s}.story-steps b{font-size:11px;border:1px solid #b6c5df;border-radius:50%;width:29px;height:29px;display:grid;place-items:center}.story-steps .active{color:#253964;font-weight:800;translate:6px 0}.story-steps .active b{color:white;background:#2853cd;border-color:#2853cd}
.story-visual{transform:scale(var(--story-scale,1));transform-origin:center}.story-window{padding:clamp(18px,2vw,34px);border-radius:28px;background:#ffffffed;border:1px solid #fff;box-shadow:0 28px 75px #344d9020}.story-window>span{font-size:10px;font-weight:800;letter-spacing:2px;color:#657896}.story-window svg{display:block;width:100%;height:auto;margin:22px 0;background:#f4f7fd;border-radius:16px}.story-equation{display:block;text-align:center;font-size:clamp(24px,2.8vw,44px);color:#293b68}.story-explanation{min-height:4em;font-size:clamp(14px,1.1vw,18px);line-height:1.6;text-align:center}.story-progress{height:3px;background:#c3d1e4;border-radius:4px;margin:24px 18px 0;overflow:hidden}.story-progress i{display:block;width:100%;height:100%;background:#7452b6;transform:scaleX(var(--story-progress,0));transform-origin:left}.story-footer{text-align:center;font-size:12px;color:#576b83}
.arrival{opacity:.3;translate:0 32px;transition:opacity .85s ease,translate .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--arrival-delay,0s)}.arrival.arrival-shown,.arrival:focus-within{opacity:1;translate:0 0}.scroll-depth{translate:0 var(--depth-y,0px);scale:var(--depth-scale,1)}
@media(max-width:760px){.scroll-story{height:190svh;margin:28px 0 40px;border-radius:24px}.story-stage{grid-template-columns:1fr;gap:16px;padding:22px 16px;min-height:calc(100svh - 24px);top:12px;align-content:center}.story-copy h2{font-size:32px;margin:10px 0}.story-instruction{font-size:14px;margin:8px 0}.story-steps{display:flex;gap:8px;margin:16px 0 0}.story-steps span{font-size:0;gap:0}.story-steps .active{translate:0 -2px}.story-window{padding:16px}.story-window svg{margin:14px 0}.story-explanation{font-size:13px;min-height:4.8em;margin:10px 0 0}.story-equation{font-size:26px}.story-progress{margin-top:14px}.story-footer{margin-bottom:0}.arrival{translate:0 18px}}
@media(max-height:600px){.story-stage{position:relative;min-height:0}.scroll-story{height:auto}.story-steps{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-stage{position:relative;min-height:0}.arrival,.scroll-depth{opacity:1;translate:none;scale:none;transition:none}.story-visual{transform:none}.story-steps span{transition:none}}

.scroll-story{height:340svh}.story-window svg{aspect-ratio:16/9}.story-copy h2{font-size:clamp(30px,3.5vw,60px)}
.village-pop{transform-box:fill-box;transform-origin:center;animation:village-bounce .8s ease-in-out both;animation-delay:calc(var(--i)*.09s)}
.village-glow{animation:village-glow 2.4s ease-in-out infinite}
@keyframes village-bounce{from{opacity:0;translate:0 -16px;scale:.85 1.1}65%{opacity:1;translate:0 3px;scale:1.06 .94}to{opacity:1;translate:0 0;scale:1}}
@keyframes village-glow{50%{filter:drop-shadow(0 0 7px #eec969)}}
@media(max-width:760px){.scroll-story{height:320svh}.story-stage{gap:8px}.story-copy h2{font-size:28px}.story-steps{margin-top:10px}}
@media(prefers-reduced-motion:reduce),(max-height:600px){.scroll-story{height:auto}.village-pop,.village-glow{animation:none}}

.story-window{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.story-window>span{display:none}
.story-drawing{aspect-ratio:8/5;overflow:hidden;border-radius:12px}
.story-window .story-drawing>svg{display:block;width:100%;height:100%;margin:0;background:transparent;border-radius:0}

.story-equation[hidden]{display:block!important;visibility:hidden}

/* Keep intrinsic SVG sizes and changing captions from resizing the sticky scene. */
.story-stage{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);overflow-anchor:none}
.story-copy,.story-visual,.story-window,.story-drawing{min-width:0;max-width:100%}
.story-copy h2{min-height:3.24em;overflow-wrap:break-word}
.story-drawing{width:100%;position:relative;contain:layout paint}
.story-equation{min-height:2.6em;line-height:1.3}
.story-equation[hidden]::before{content:' ';white-space:pre}
.scroll-depth{translate:none;scale:none}
@media(max-width:760px){.story-stage{grid-template-columns:minmax(0,1fr)}.story-copy h2{min-height:2.16em}}

/* A stable visual explanation replaces the repeated lesson name and paragraph. */
.story-concept{height:120px;display:grid;place-items:center;margin-top:12px;min-width:0}
.story-window .story-concept svg{width:100%;max-width:480px;height:120px;aspect-ratio:4/1;background:none;margin:0;border-radius:0}

.story-footer{display:none}