/* Scroll story: sticky 3D stage with captions. Theme tokens are set per site. */
.story{position:relative;background:var(--story-bg);color:var(--story-fg)}
.story-stage{position:relative}
.story-stage canvas{display:none}
.story-steps{list-style:none;margin:0 auto;padding:72px max(22px,env(safe-area-inset-left,0px)) 72px;max-width:760px;display:grid;gap:44px}
.story-step h2{font-size:clamp(28px,3.4vw,46px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 0;text-wrap:balance;color:var(--story-fg)}
.story-step p{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--story-muted);max-width:44ch}
.story-step .story-kicker{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--story-kicker)}
.story-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.story-note{font-size:12px!important;margin-top:18px!important}

/* live: sticky stage, scroll track */
.story.is-live{height:calc(var(--steps) * 64vh + 100vh)}
.story.is-live .story-stage,.story.is-still .story-stage{position:sticky;top:var(--story-top,0px);height:calc(100vh - var(--story-top,0px));height:calc(100svh - var(--story-top,0px));overflow:hidden}
.story.is-still .story-stage{position:relative;height:min(78vh,720px)}
.story.is-live canvas,.story.is-still canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s}
.story-stage.is-ready canvas{opacity:1}
.story.is-live .story-steps{position:absolute;left:max(var(--story-gutter,40px),env(safe-area-inset-left,0px));top:50%;translate:0 -50%;width:min(430px,36vw);max-width:none;padding:0;margin:0;display:block;height:auto;z-index:2}
.story.is-live .story-step{position:absolute;left:0;top:50%;translate:0 -50%;width:100%;opacity:0;will-change:opacity,transform}
.story.is-live .story-step:not(.is-active){pointer-events:none}
.story-progress{position:absolute;left:max(var(--story-gutter,40px),env(safe-area-inset-left,0px));bottom:28px;display:none;gap:6px;z-index:2}
.story.is-live .story-progress{display:flex}
.story-progress i{display:block;width:22px;height:2px;border-radius:2px;background:var(--story-line);overflow:hidden;position:relative}
.story-progress i::after{content:"";position:absolute;inset:0;background:var(--story-fg);transform-origin:left;scale:var(--fill,0) 1}

@media(max-width:760px){
  .story.is-live{height:calc(var(--steps) * 100vh + 100vh)}
  .story.is-live .story-stage::after{content:"";position:absolute;inset:auto 0 0;height:52%;background:linear-gradient(to bottom,transparent,var(--story-bg) 42%);z-index:1;pointer-events:none}
  .story.is-live .story-steps{left:16px;right:16px;top:auto;bottom:max(54px,env(safe-area-inset-bottom,0px));translate:none;width:auto;min-height:220px}
  .story.is-live .story-step{top:auto;bottom:0;translate:none}
  .story-step h2{font-size:28px}
  .story-step p{font-size:14.5px}
  .story-progress{left:16px;bottom:22px}
}
/* csong.health theme for the scroll story */
.story[data-story="safety-case"]{--story-bg:#f5f5f7;--story-fg:#1d1d1f;--story-muted:#66666d;--story-kicker:#355f4c;--story-line:#d2d2d7;--story-top:72px;--story-gutter:max(40px,calc((100vw - 1200px) / 2 + 40px))}
.story-weeks{position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:2;display:none;align-items:center;gap:14px;font-size:11px;color:#66666d;opacity:0;pointer-events:none}
.story.is-live .story-weeks{display:flex}
.story-weeks ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,64px);gap:4px}
.story-weeks li{position:relative;padding-top:9px;font-variant-numeric:tabular-nums}
.story-weeks li::before,.story-weeks li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:#d2d2d7}
.story-weeks li::after{background:#355f4c;transform-origin:left;scale:clamp(0,calc(var(--w,0) * 4 - var(--i)),1) 1}
.story-weeks b{font-weight:600;color:#1d1d1f}
@media(max-width:760px){.story[data-story="safety-case"]{--story-top:0px}.story-weeks{bottom:auto;top:18px}.story-weeks ol{grid-template-columns:repeat(4,48px)}}

/* Preview refinement: quieter type, stable framing and a lighter stage. */
.story[data-story="safety-case"]{--story-bg:#f7f8f9;--story-muted:#555d63;--story-kicker:#355f4c}
.story-step h2{font-size:40px;line-height:1.12;letter-spacing:0;font-weight:600}
.story-step .story-kicker{letter-spacing:0;font-size:12px}
.story.is-live .story-steps{width:min(390px,32%);top:48%}
.story-step p{font-size:16px;line-height:1.65}
.story-progress{gap:8px;bottom:36px}
.story-progress i{width:28px;height:3px}
.story.is-still .story-stage{height:auto;overflow:visible}
.story.is-still canvas{position:relative;height:380px}
.story.is-still .story-steps{padding-top:24px}
@media(max-width:760px){
 .story-step h2{font-size:30px}
 .story.is-live{height:calc(var(--steps) * 70svh + 100svh)}
 .story.is-live .story-steps{width:auto;left:24px;right:24px;top:auto;bottom:60px;min-height:225px}
 .story-step p{font-size:15px;line-height:1.55}
 .story-progress{left:24px;bottom:24px}
}