:root{--bg:oklch(4.8% .008 160);--ink:oklch(95% .02 90);--muted:oklch(74% .02 96);--soft:oklch(58% .016 110);--line:oklch(96% .014 88/.14);--gold:oklch(81% .13 79);--gold-deep:oklch(64% .12 66);--glass:oklch(98% .012 88/.1);--shadow:oklch(3% .008 160);--display:"Iowan Old Style", "Songti SC", "STSong", Georgia, serif;--body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", sans-serif;--pointer-x:0;--pointer-y:0;--scroll-progress:0;--story-progress:0;--scroll-shift:0%;color:var(--ink);background:var(--bg);font-family:var(--body);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{background:radial-gradient(circle at 50% -10%,oklch(26% .04 78/.16),#0000 42rem),linear-gradient(oklch(5.5% .01 160),oklch(3.8% .008 160));min-width:320px;margin:0;overflow-x:hidden}body:before{z-index:-3;background:radial-gradient(circle at calc(50% + var(--pointer-x) * 18%) calc(20% + var(--pointer-y) * 12%), oklch(73% .11 77/.12), transparent 24rem), radial-gradient(circle at calc(22% + var(--pointer-x) * 14%) 80%, oklch(48% .05 128/.06), transparent 22rem);content:"";position:fixed;inset:0}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{z-index:40;border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:oklch(6% .008 160/.62);border-radius:999px;justify-content:space-between;align-items:center;width:min(1240px,100% - 40px);margin:18px auto 0;padding:13px 16px;display:flex;position:fixed;inset:0 0 auto;box-shadow:0 12px 60px oklch(2% .008 160/.35)}.brand,.site-nav{align-items:center;display:flex}.brand{font-family:var(--display);letter-spacing:.04em;gap:10px;font-size:21px}.brand-mark{background:var(--gold);border-radius:50%;width:13px;height:13px;box-shadow:0 0 24px oklch(78% .13 78/.82),inset 0 0 8px oklch(99% .02 90/.8)}.site-nav{color:var(--muted);gap:20px;font-size:13px}.site-nav a:hover{color:var(--ink)}.story-shell{position:relative}.cinema-stage{z-index:0;height:100svh;position:fixed;inset:0;overflow:hidden}.scene,.scene-glow,.grain{position:absolute;inset:0}.scene{background-color:var(--bg);opacity:0;filter:saturate(.95)brightness(.88);background-position:50%;background-repeat:no-repeat;background-size:cover;transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1),filter 1.2s cubic-bezier(.22,1,.36,1);transform:scale(1.06)}.scene:after{content:"";background:linear-gradient(90deg,oklch(3% .008 160/.86) 0%,oklch(3% .008 160/.54) 36%,#0000 62%,oklch(3% .008 160/.72) 100%),linear-gradient(oklch(2% .008 160/.52),#0000 24% 74%,oklch(2% .008 160/.7));position:absolute;inset:0}.scene-01{background-image:url(/scenes/scene-01-empty-jar.png)}.scene-02{background-image:url(/scenes/scene-02-memory-stream.png)}.scene-03{background-image:url(/scenes/scene-03-full-jar.png)}.scene-04{background-image:url(/scenes/scene-04-light-trail.png)}#app[data-step="1"] .scene-01,#app[data-step="2"] .scene-02,#app[data-step="3"] .scene-03,#app[data-step="4"] .scene-04,#app[data-step="5"] .scene-04{opacity:1;filter:saturate(1.04)brightness();transform:scale(1)}.scene-glow{pointer-events:none;mix-blend-mode:screen}.light-current{pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:calc(.34 + var(--story-progress) * .5);position:absolute;inset:0}.current-ribbon,.light-core,.light-dust{position:absolute}.current-ribbon{filter:blur(10px);transform-origin:50%;border-radius:999px;top:50%;left:50%}.ribbon-main{width:min(108vw,1600px);height:clamp(110px,16vw,200px);opacity:calc(.16 + var(--story-progress) * .36);transform:translate3d(calc(-54% + var(--scroll-progress) * 11%), calc(-6% + var(--pointer-y) * 5%), 0) rotate(calc(-17deg + var(--story-progress) * 23deg));background:radial-gradient(circle at 18%,oklch(98% .025 88/.88),#0000 10%),linear-gradient(90deg,#0000 0%,oklch(73% .12 74/.08) 12%,oklch(82% .13 78/.3) 42%,oklch(60% .07 128/.22) 66%,#0000 100%)}.ribbon-soft{width:min(96vw,1380px);height:clamp(70px,10vw,134px);opacity:calc(.12 + var(--story-progress) * .22);filter:blur(18px);transform:translate3d(calc(-50% + var(--scroll-progress) * 14%), calc(34% - var(--story-progress) * 20%), 0) rotate(calc(8deg - var(--story-progress) * 10deg));background:linear-gradient(90deg,#0000 0%,oklch(76% .09 132/.04) 20%,oklch(83% .09 84/.22) 48%,#0000 100%)}.ribbon-trail{width:min(82vw,1140px);height:clamp(42px,6vw,80px);opacity:calc(.08 + var(--story-progress) * .28);filter:blur(7px);transform:translate3d(calc(-46% + var(--scroll-progress) * 20%), calc(-28% + var(--story-progress) * 32%), 0) rotate(calc(-24deg + var(--story-progress) * 18deg));background:linear-gradient(90deg,#0000 0%,oklch(98% .03 88/.36) 26%,oklch(70% .11 72/.26) 52%,#0000 100%)}.light-core{background:radial-gradient(circle at 35% 32%,oklch(99% .02 90),oklch(90% .08 86) 22%,oklch(74% .14 76) 56%,#0000 72%);border-radius:50%;box-shadow:0 0 22px oklch(78% .13 78/.5),0 0 72px oklch(74% .12 76/.22)}.core-01{left:calc(12% + var(--story-progress) * 52%);top:calc(62% - var(--story-progress) * 32%);width:clamp(22px,2vw,30px);height:clamp(22px,2vw,30px);opacity:calc(.3 + var(--story-progress) * .5);animation:9s ease-in-out infinite drift-core-a}.core-02{left:calc(22% + var(--story-progress) * 42%);top:calc(54% - var(--story-progress) * 20%);width:clamp(16px,1.5vw,24px);height:clamp(16px,1.5vw,24px);opacity:calc(.18 + var(--story-progress) * .42);animation:8s ease-in-out infinite drift-core-b}.core-03{left:calc(56% + var(--story-progress) * 18%);top:calc(46% + var(--story-progress) * 12%);width:clamp(10px,1vw,18px);height:clamp(10px,1vw,18px);opacity:calc(.1 + var(--story-progress) * .36);animation:7s ease-in-out infinite drift-core-c}.light-dust{opacity:calc(.16 + var(--story-progress) * .2);background-repeat:repeat;inset:0}.dust-left{background-image:radial-gradient(circle,oklch(96% .025 88/.18) 0 1px,#0000 1.5px);background-size:120px 120px;background-position:calc(8% + var(--scroll-progress) * 18%) calc(12% + var(--scroll-progress) * 24%);-webkit-mask-image:radial-gradient(circle at 24% 42%,#000,#0000 58%);mask-image:radial-gradient(circle at 24% 42%,#000,#0000 58%)}.dust-center{background-image:radial-gradient(circle,oklch(82% .08 130/.14) 0 1px,#0000 1.6px);background-size:140px 140px;background-position:calc(50% + var(--scroll-progress) * -14%) calc(38% + var(--scroll-progress) * 26%);-webkit-mask-image:radial-gradient(circle at 52% 52%,#000,#0000 56%);mask-image:radial-gradient(circle at 52% 52%,#000,#0000 56%)}.dust-right{background-image:radial-gradient(circle,oklch(92% .05 82/.16) 0 1px,#0000 1.4px);background-size:110px 110px;background-position:calc(84% + var(--scroll-progress) * -18%) calc(70% + var(--scroll-progress) * 18%);-webkit-mask-image:radial-gradient(circle at 80% 62%,#000,#0000 52%);mask-image:radial-gradient(circle at 80% 62%,#000,#0000 52%)}.glow-left{background:radial-gradient(circle at calc(18% + var(--pointer-x) * 10% + var(--story-progress) * 6%) calc(36% - var(--story-progress) * 10%), oklch(74% .12 77/.16), transparent 24rem)}.glow-right{background:radial-gradient(circle at calc(78% + var(--pointer-x) * 12% - var(--story-progress) * 8%) calc(70% + var(--pointer-y) * 8% - var(--story-progress) * 18%), oklch(52% .05 128/.12), transparent 20rem)}.grain{opacity:.2;background-image:radial-gradient(circle,oklch(100% 0 0/.12) 0 .7px,#0000 1.1px),radial-gradient(circle,oklch(81% .08 78/.06) 0 .8px,#0000 1.2px);background-position:0 0,19px 27px;background-size:42px 42px,66px 66px}.progress-rail{z-index:30;flex-direction:column;align-items:center;gap:12px;display:flex;position:fixed;top:50%;left:min(32px,3vw);transform:translateY(-50%)}.progress-label,.progress-count{color:var(--soft);letter-spacing:.22em;font-size:11px}.progress-track{background:oklch(98% .01 90/.12);width:1px;height:160px;position:relative;overflow:hidden}.progress-fill{transform-origin:top;background:linear-gradient(180deg, var(--gold), oklch(90% .05 88));width:100%;height:100%;display:block;transform:scaleY(.02);box-shadow:0 0 24px oklch(78% .13 78/.44)}.story-step,.download-block{z-index:2;width:min(1240px,100% - 72px);margin-inline:auto;position:relative}.story-step{align-items:center;min-height:120svh;display:grid}.story-hero{align-items:start;min-height:76svh;padding-top:140px}.story-step-right{justify-items:end}.story-card{border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:linear-gradient(oklch(6% .008 160/.54),oklch(5% .008 160/.38)),radial-gradient(circle at 0 0,oklch(85% .05 80/.08),#0000 18rem);border-radius:34px;width:min(540px,100%);padding:clamp(24px,3vw,42px);box-shadow:0 32px 90px oklch(2% .008 160/.34),inset 0 1px oklch(100% 0 0/.04)}.story-card-hero{-webkit-backdrop-filter:none;backdrop-filter:none;width:min(720px,100%);box-shadow:none;background:0 0;border:0;border-radius:0;margin-top:0;padding:0}.eyebrow,.step-index{color:var(--gold);letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px;font-size:11px;display:inline-block}h1,h2,p{margin-top:0}h1,h2{font-family:var(--display);font-weight:500}h1{letter-spacing:-.08em;max-width:11ch;margin-bottom:26px;font-size:clamp(62px,8vw,126px);line-height:.9}h1 span{display:block}h2{letter-spacing:-.06em;max-width:11ch;margin-bottom:20px;font-size:clamp(34px,4vw,62px);line-height:.98}.lede,.story-card p,.download-card p{max-width:34ch;color:var(--muted);font-size:clamp(16px,1.3vw,19px);line-height:1.9}.download-block{align-items:end;min-height:88svh;padding-bottom:8vh;display:grid}.download-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:radial-gradient(circle at 100% 0,oklch(77% .12 78/.16),#0000 18rem),linear-gradient(oklch(7% .008 160/.7),oklch(5% .008 160/.58));border:1px solid oklch(96% .014 88/.18);border-radius:38px;width:min(640px,100%);padding:clamp(28px,3.5vw,46px);box-shadow:0 38px 120px oklch(2% .008 160/.42)}.store-button{min-width:236px;color:var(--ink);text-align:left;background:oklch(4% .008 160/.72);border:1px solid oklch(86% .08 80/.36);border-radius:24px;margin-top:20px;padding:18px 22px;box-shadow:inset 0 1px oklch(100% 0 0/.05),0 22px 60px oklch(2% .008 160/.3)}.store-button span{color:var(--soft);font-size:12px;display:block}.store-button strong{color:var(--gold);margin-top:4px;font-size:22px;display:block}.site-footer{z-index:3;width:min(1240px,100% - 40px);color:var(--soft);justify-content:space-between;margin:0 auto;padding:24px 0 42px;font-size:13px;display:flex;position:relative}@keyframes drift-core-a{0%,to{transform:translate(0,0)scale(.94)}50%{transform:translate(16px,-14px)scale(1.08)}}@keyframes drift-core-b{0%,to{transform:translate(0,0)scale(.92)}50%{transform:translate(14px,10px)scale(1.12)}}@keyframes drift-core-c{0%,to{transform:translate(0,0)scale(.84)}50%{transform:translate(10px,-12px)scale(1.06)}}@media (width<=900px){.site-header{width:calc(100% - 24px)}.progress-rail{display:none}.story-step,.download-block{width:min(100% - 28px,640px)}.story-step{justify-items:start;min-height:100svh}.story-card,.download-card{width:100%}.story-card{border-radius:28px}.story-card-hero{padding-top:0}h1{max-width:9ch;font-size:clamp(54px,14vw,82px)}h2{max-width:10ch;font-size:clamp(34px,9vw,50px)}.scene:after{background:linear-gradient(oklch(2% .008 160/.74),#0000 18% 76%,oklch(2% .008 160/.76)),linear-gradient(90deg,oklch(2% .008 160/.7),#0000 24% 80%,oklch(2% .008 160/.4))}.download-block{min-height:74svh}.site-footer{gap:8px;width:min(100% - 28px,640px);display:grid}.ribbon-main{width:130vw;transform:translate3d(calc(-58% + var(--scroll-progress) * 10%), calc(6% + var(--pointer-y) * 4%), 0) rotate(calc(-26deg + var(--story-progress) * 18deg))}.ribbon-soft{width:116vw}.ribbon-trail{width:102vw;transform:translate3d(calc(-52% + var(--scroll-progress) * 16%), calc(-12% + var(--story-progress) * 26%), 0) rotate(calc(-28deg + var(--story-progress) * 14deg))}.core-01{left:calc(8% + var(--story-progress) * 58%);top:calc(56% - var(--story-progress) * 22%)}.core-02{left:calc(20% + var(--story-progress) * 44%);top:calc(50% - var(--story-progress) * 14%)}.core-03{left:calc(60% + var(--story-progress) * 10%);top:calc(46% + var(--story-progress) * 10%)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene,.progress-fill,*{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}