@font-face{font-family:"Pixel Operator SC";src:url("./assets/PixelOperatorSC.ttf") format("truetype");font-display:swap;font-weight:400}
:root{--blue:#2924ff;--pink:#f53ce5;--ink:#121212;--pixel:"Pixel Operator SC",monospace}
*{box-sizing:border-box}html{scrollbar-color:var(--blue) #f5f5f5}body{margin:0;background:#fff;color:var(--ink);font-family:Bahnschrift,"Arial Narrow",Arial,sans-serif}button{font:inherit}button:focus-visible{outline:3px solid var(--pink);outline-offset:7px}
.scroll-story{height:850svh;position:relative}.stage{height:100svh;position:sticky;top:0;overflow:hidden;background:#fff}.composition{position:absolute;inset:0;max-width:1440px;margin:auto}.headline{position:absolute;top:11.3%;left:50%;width:95%;margin:0;text-align:center;color:var(--blue);font-size:clamp(25px,3.7vw,52px);font-weight:400;line-height:1.12;letter-spacing:.055em;transform:translate(-50%,0);opacity:0;will-change:transform,opacity}.headline strong{font-weight:600}
.card-slot{position:absolute;top:36.9%;left:50%;width:min(625px,80vw);height:clamp(128px,21.4svh,166px);transform:translateX(-50%);z-index:2;pointer-events:none}.feature-card{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:20px 24px;background:var(--blue);color:#fff;box-shadow:14px 16px 0 var(--pink);text-align:center;font-family:var(--pixel);font-weight:400;font-size:clamp(28px,3.5vw,40px);line-height:1.35;opacity:0;will-change:transform,opacity;transform-origin:50% 100%}
.box-scene{position:absolute;left:50%;top:65%;width:410px;height:260px;transform:translateX(-50%);z-index:3;pointer-events:none}.box-scene canvas{display:block;width:100%;height:100%}.scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;align-items:center;gap:15px;white-space:nowrap;font-family:var(--pixel);font-size:17px;letter-spacing:.08em;color:#696979}.pixel-arrow{color:var(--blue);font-size:27px;animation:nudge 1.5s ease-in-out infinite}.step-nav{position:absolute;right:35px;bottom:29px;display:flex;gap:16px;align-items:center;opacity:0}.step-count{font-family:var(--pixel);font-size:18px;color:var(--blue);white-space:nowrap}.steps{display:flex;gap:4px}.step-button{width:22px;height:30px;background:none;border:0;padding:6px;cursor:pointer}.step-button:after{content:"";display:block;width:9px;height:9px;background:#e5e4ed;transition:background .2s,transform .2s}.step-button[aria-current="step"]:after{background:var(--blue);transform:translateY(-3px);box-shadow:2px 2px 0 var(--pink)}
.after-story{min-height:65svh;padding:100px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-top:1px solid #eee}.after-story p{font-size:clamp(25px,3vw,40px);line-height:1.25;letter-spacing:.04em;color:var(--blue)}.end-mark{color:var(--pink);font-size:34px}.replay{border:0;border-bottom:2px solid var(--blue);background:none;color:var(--blue);padding:12px 0;font-family:var(--pixel);font-size:21px;cursor:pointer}.replay span{margin-left:24px}.no-script{padding:32px}.fallback-box{display:flex;align-items:center;justify-content:center;width:150px;height:150px;margin:35px auto;background:#ffcb20;border:6px solid #000;box-shadow:10px 10px 0 #b37b00;font:120px var(--pixel)}
@keyframes nudge{50%{transform:translateY(5px)}}
@media(min-width:1500px){.box-scene{width:470px;height:300px}}
@media(max-height:650px) and (min-width:701px){.headline{top:7%;font-size:34px}.card-slot{top:31%;height:125px}.feature-card{font-size:30px}.box-scene{top:58%;width:320px;height:205px}.scroll-cue{bottom:12px}.step-nav{bottom:12px}}
@media(max-width:700px){.headline{top:15%;font-size:clamp(22px,5.5vw,37px);line-height:1.19;letter-spacing:.025em}.card-slot{top:36%;width:84vw;height:140px}.feature-card{font-size:clamp(24px,5.8vw,34px);padding:15px 12px;box-shadow:9px 11px 0 var(--pink)}.box-scene{top:61%;width:330px;height:220px}.scroll-cue{bottom:25px;font-size:15px}.step-nav{right:0;left:0;bottom:25px;justify-content:center}.step-button{width:24px}.after-story{padding:70px 24px}}
@media(max-width:700px) and (max-height:650px){.headline{top:9%}.card-slot{top:30%;height:115px}.box-scene{top:54%;width:285px;height:190px}.feature-card{font-size:24px}}
@media(prefers-reduced-motion:reduce){.pixel-arrow{animation:none}.step-button:after{transition:none}}

html.lenis{scroll-behavior:auto!important}