.story-intro{position:relative;height:430svh;background:#f8f6f2;color:#2c2237;isolation:isolate}.story-screen{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#ece4f280,transparent 63%),#f8f6f2}.story-screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:8;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}.story-nav{position:absolute;top:22px;left:30px;right:32px;display:flex;align-items:center;justify-content:space-between;z-index:10}.story-nav img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 3px 3px #4e2f5b15)}.story-skip{font-size:12px;text-decoration:none;color:#796b85;display:flex;gap:8px;align-items:center}.story-skip:hover{color:#663f87}.story-skip:focus-visible,.story-controls button:focus-visible{outline:2px solid #9468b9;outline-offset:5px;border-radius:5px}.story-titles{position:absolute;top:10%;left:4%;width:92%;height:22%;text-align:center;z-index:3;pointer-events:none}.story-titles h1,.story-titles h2{position:absolute;inset:0;margin:0!important;font-size:clamp(40px,5.4vw,76px)!important;line-height:1.02!important;letter-spacing:-.052em!important;font-weight:650!important;color:#2c2237}.story-titles em{font-family:Georgia,'Times New Roman',serif!important;font-weight:400;font-style:italic;color:#8053a7}.story-titles h2{opacity:0}.story-light{position:absolute;width:24vw;height:24vw;border-radius:50%;filter:blur(80px);opacity:.23;pointer-events:none}.light-left{background:#d4b7ed;left:-16%;top:40%}.light-right{background:#eedab4;right:-14%;top:55%}.story-stage{position:absolute;top:33%;height:59%;left:0;width:100%;z-index:2}.story-stage canvas{display:block;width:100%;height:100%}.story-controls{position:absolute;bottom:25px;left:32px;right:32px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;z-index:10;font-size:11px;color:#89788f}.story-controls button{justify-self:start;border:1px solid #d5c5e1;border-radius:25px;padding:9px 13px 9px 10px;background:#ffffff88;display:flex;align-items:center;gap:6px;color:#6e547e;font:inherit;cursor:pointer;box-shadow:0 2px 3px #4e2e6810;backdrop-filter:blur(10px)}.story-controls button:hover{background:#fff}.story-controls svg{width:14px;height:14px;fill:currentColor}.story-controls>span:nth-child(2){text-align:center}.story-illustration{text-align:right;font-size:10px;color:#a394aa}.story-scrub{position:absolute;bottom:0;left:0;width:100%;height:18px;z-index:12;display:flex;align-items:flex-end}.story-scrub input{appearance:none;-webkit-appearance:none;width:100%;margin:0;height:3px;border:0;border-radius:0;cursor:ew-resize;background:linear-gradient(to right,#9977b9 var(--progress,0%),#e8deee var(--progress,0%))}.story-scrub input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:#9467b6;opacity:0}.story-scrub:hover input::-webkit-slider-thumb,.story-scrub input:focus-visible::-webkit-slider-thumb{opacity:1}.story-scrub input:focus-visible{outline:2px solid #9977b9;outline-offset:3px}
[data-theme=dark] .story-screen{background:radial-gradient(ellipse at 50% 65%,#36253e,transparent 70%),#18131f}[data-theme=dark] .story-titles h1,[data-theme=dark] .story-titles h2{color:#f4ecf8}[data-theme=dark] .story-titles em{color:#c39ee0}[data-theme=dark] .story-controls button{background:#2a2035;color:#c8b0d8;border-color:#655070}
@media(max-width:700px){.story-screen{min-height:540px}.story-nav{top:17px;left:20px;right:20px}.story-nav img{width:34px;height:34px}.story-titles{top:12%;height:21%}.story-titles h1,.story-titles h2{font-size:clamp(37px,9.6vw,60px)!important;line-height:1.04!important}.story-stage{top:34%;height:55%}.story-controls{left:18px;right:18px;bottom:22px;grid-template-columns:1fr 1fr;font-size:10px}.story-illustration{display:none}.story-controls>span:nth-child(2){text-align:right}.story-light{width:60vw;height:60vw}.light-left{left:-40%}.light-right{right:-40%}.story-skip{font-size:11px}}
@media(max-height:650px) and (min-width:701px){.story-titles{top:8%}.story-titles h1,.story-titles h2{font-size:48px!important}.story-stage{top:31%;height:61%}.story-nav{top:12px}}
@media(prefers-reduced-motion:reduce){.story-intro{height:100svh}.story-light{display:none}}
/* A larger continuous workspace, with more scroll distance per beat. */
.story-intro{height:900svh}.story-titles{top:8%;height:17%}.story-titles h1,.story-titles h2{font-size:clamp(38px,4.6vw,64px)!important}.story-stage{top:23%;height:71%}.story-controls{bottom:20px}.story-nav{top:15px}
@media(max-width:700px){.story-titles{top:10%;height:18%}.story-titles h1,.story-titles h2{font-size:clamp(33px,8.3vw,48px)!important}.story-stage{top:23%;height:71%}.story-controls{bottom:20px}}
@media(max-height:650px) and (min-width:701px){.story-titles{top:6%}.story-titles h1,.story-titles h2{font-size:40px!important}.story-stage{top:23%;height:71%}}
@media(prefers-reduced-motion:reduce){.story-intro{height:100svh}}

/* Native scroll remains in control; the small settling motion never blocks input. */
.story-intro{height:800svh;overscroll-behavior:auto}
.story-controls #story-cue{color:#806a90;text-align:center}
@media(max-width:700px){.story-controls{grid-template-columns:auto 1fr;gap:12px}.story-controls #story-cue{text-align:right;font-size:10px}.story-controls #story-play{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.story-intro{height:100svh}}

/* The narration leads the visual workflow, one complete word at a time. */
.story-intro{height:1000svh}.story-titles{top:6%;left:4%;width:92%;height:22%}
.story-titles .story-title{max-width:1180px;margin:0 auto!important;font-size:clamp(32px,3.8vw,54px)!important;line-height:1.08!important;letter-spacing:-.045em!important}
.story-titles .script-line{display:block}.story-titles .script-word{display:inline-block;white-space:nowrap}
.story-stage{top:27%;height:67%}
@media(max-width:700px){.story-titles{top:7%;height:22%}.story-titles .story-title{font-size:clamp(25px,6.2vw,34px)!important;line-height:1.08!important}.story-stage{top:28%;height:65%}}
@media(max-height:650px) and (min-width:701px){.story-titles{top:5%}.story-titles .story-title{font-size:35px!important}.story-stage{top:29%;height:65%}}
@media(hover:hover) and (pointer:fine){#opening,#opening *{cursor:url('/story-assets/intro-dot.svg') 4 4,none!important}}
@media(prefers-reduced-motion:reduce){.story-intro{height:100svh}}

/* A quiet three-row title wheel. The centre reads; its neighbours give context. */
.story-titles{top:6.5%;left:6%;width:88%;height:22%;perspective:900px;overflow:hidden;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.story-titles:before,.story-titles:after{content:'';position:absolute;left:4%;right:4%;height:1px;background:linear-gradient(90deg,transparent,#ad97bb40 16%,#ad97bb40 84%,transparent);z-index:-1}
.story-titles:before{top:22%}.story-titles:after{top:78%}
.story-titles .story-title{inset:auto 0 auto;bottom:auto;height:110px;max-width:1100px;display:grid;place-items:center;transform-origin:50% 50%;font-size:clamp(30px,3.7vw,50px)!important;line-height:1.08!important;will-change:transform,top;backface-visibility:hidden}
.title-full,.title-preview{grid-area:1/1;width:100%}.title-full{transform-origin:center}
.title-preview{font:400 clamp(12px,1.45vw,18px)/1.3 Outfit,sans-serif;letter-spacing:-.015em;color:#6e6475;padding-inline:15px;text-wrap:balance}
.story-titles .script-word{transition:opacity .14s linear}
.story-stage{top:29%;height:65%}
[data-theme=dark] .title-preview{color:#d2c6dc}
@media(max-width:700px){.story-titles{top:7%;left:5%;width:90%;height:23%}.story-titles .story-title{font-size:clamp(24px,5.7vw,34px)!important;height:90px}.title-preview{font-size:12px;padding-inline:8px}.story-titles:before{top:22%}.story-titles:after{top:78%}.story-stage{top:30%;height:63%}}
@media(max-height:650px) and (min-width:701px){.story-titles{top:7%;height:25%}.story-titles .story-title{font-size:29px!important;height:85px}.title-preview{font-size:12px}.story-stage{top:32%;height:62%}}
@media(prefers-reduced-motion:reduce){.story-title{transform:translateY(-50%)!important}.story-titles .script-word{transition:none}}

/* Five beats: typography yields the stage to the action. */
.story-titles{overflow:visible;mask-image:none;-webkit-mask-image:none;left:7%;width:86%;z-index:5}
.story-titles:before,.story-titles:after{display:none}
.story-titles .story-title{font-size:clamp(44px,6.5vw,94px)!important;height:auto;line-height:1.02!important;max-width:1300px;text-wrap:balance}
.story-stage{top:15%;height:79%;transform-origin:50% 65%;will-change:transform,filter,opacity}
.story-illustration{display:none}.story-controls{opacity:.45;transition:opacity .2s}.story-controls:hover,.story-controls:focus-within{opacity:1}
@media(max-width:700px){.story-stage{top:20%;height:73%}.story-titles .story-title{font-size:clamp(34px,8vw,52px)!important}.story-titles{left:5%;width:90%}}
@media(prefers-reduced-motion:reduce){.story-stage{filter:none!important}.story-controls{transition:none}}
.story-titles.compact-title .story-title{font-size:clamp(34px,4.2vw,60px)!important}
@media(max-width:700px){.story-titles.compact-title .story-title{font-size:28px!important}}
/* Clear title space, with light that follows the story's motion. */
.story-screen{background:radial-gradient(ellipse at var(--glow-x,30%) var(--glow-y,35%),#cbb1e880 0%,transparent 58%),radial-gradient(ellipse at 90% 80%,#f0d9bd85,transparent 58%),linear-gradient(145deg,#faf8fc,#f2eaf7 55%,#faf5ee)}
.story-stage{top:29%;height:64%}.story-titles.compact-title .story-title{font-size:clamp(30px,3.8vw,56px)!important;line-height:1.14!important}
@media(max-width:700px){.story-stage{top:30%;height:63%}.story-titles.compact-title .story-title{font-size:clamp(24px,5.6vw,32px)!important}}
[data-theme=dark] .story-screen{background:radial-gradient(ellipse at var(--glow-x,30%) var(--glow-y,35%),#60417488,transparent 65%),linear-gradient(145deg,#18131f,#2a1d32)}

/* The camera owns a single full-height canvas; later steps share this workspace. */
.story-stage{top:10%;height:82%}
@media(max-width:700px){.story-stage{top:13%;height:78%}}

/* More room for a swipe to land on each idea, without gesture locking. */
.story-intro{height:1200svh}
@media(prefers-reduced-motion:reduce){.story-intro{height:100svh}}