:root{
  --ink:#0c0e11; --ink2:#0a0c0f;
  --white:#f5f3ea;
  --acid:#d8ff3e;
  --red:#ff3d1f;
  --cyan:#3ee0ff;
  --font-d:'Unbounded',system-ui,sans-serif;
  --font-b:'Manrope',system-ui,sans-serif;
  --font-m:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:none;scrollbar-width:none}
html.lock{overflow:hidden}
::-webkit-scrollbar{width:0;height:0}
body{background:var(--ink);color:var(--white);font-family:var(--font-b);overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--acid);color:var(--ink)}
.mono{font-family:var(--font-m)}

.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:flex;align-items:flex-end;padding:clamp(20px,5vw,56px);transition:transform .8s cubic-bezier(.76,0,.24,1) .1s}
.loader.done{transform:translateY(-101%)}
.loader__box{width:100%}
.loader__label{font-size:11px;letter-spacing:.32em;color:rgba(245,243,234,.6)}
.loader__pct{font-family:var(--font-d);font-weight:900;line-height:1;font-size:clamp(64px,18vw,180px);color:var(--acid);font-variant-numeric:tabular-nums;margin-top:8px}
.loader__hint{margin-top:16px;font-size:10px;letter-spacing:.22em;color:rgba(245,243,234,.4)}

.grain{position:fixed;inset:-100%;z-index:70;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 7s steps(8) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}
.flash{position:fixed;inset:0;z-index:66;background:var(--red);opacity:0;pointer-events:none}
.flash.on{animation:flashA .55s ease-out}
@keyframes flashA{0%{opacity:.5}100%{opacity:0}}
#fx{position:fixed;inset:0;z-index:75;pointer-events:none}
.progress{position:fixed;top:0;right:8px;width:3px;height:100%;z-index:80;pointer-events:none}
.progress i{display:block;width:100%;height:100%;background:#fff;mix-blend-mode:difference;transform:scaleY(0);transform-origin:top}
.hud{position:fixed;top:26px;left:clamp(18px,3vw,32px);z-index:80;pointer-events:none;mix-blend-mode:difference;color:#fff;display:flex;flex-direction:column;gap:6px}
.hud__line{font-family:var(--font-m);font-weight:700;font-size:10px;letter-spacing:.22em;display:flex;align-items:center;gap:8px}
.hud__dot{width:7px;height:7px;background:var(--acid);animation:blink 1.4s infinite}
.hud__pct{font-family:var(--font-d);font-weight:900;font-size:clamp(28px,4vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.mark{position:fixed;z-index:82;font-family:var(--font-m);font-style:normal;font-size:12px;line-height:1;color:#fff;mix-blend-mode:difference;pointer-events:none}
.mark--tl{top:10px;left:12px}.mark--tr{top:10px;right:12px}.mark--bl{bottom:10px;left:12px}.mark--br{bottom:10px;right:12px}
.cursor,.cursor-dot{display:none}
@media (pointer:fine){
  body,.btn{cursor:none}
  .cursor{display:block;position:fixed;left:0;top:0;z-index:96;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid var(--acid);border-radius:50%;pointer-events:none;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,background-color .25s}
  .cursor.hot{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(216,255,62,.9)}
  .cursor-dot{display:block;position:fixed;left:0;top:0;z-index:97;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--acid);border-radius:50%;pointer-events:none}
}

.stage{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:calc(clamp(20px,5vw,56px) + 30px) clamp(20px,5vw,56px) clamp(20px,5vw,56px);scroll-snap-align:start;scroll-snap-stop:always}
.bignum{position:absolute;right:-2%;bottom:-6%;z-index:0;font-family:var(--font-d);font-weight:900;line-height:1;font-size:clamp(180px,44vmin,540px);color:transparent;-webkit-text-stroke:2px rgba(245,243,234,.08);pointer-events:none;user-select:none;will-change:transform}
.display{position:relative;z-index:2;font-family:var(--font-d);font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:-.01em}
.stage--1 .display{font-size:clamp(2rem,8vw,6.5rem)}
.stage--2 .display{font-size:clamp(2.2rem,9vw,7.5rem)}
.stage--3 .display{font-size:clamp(2.4rem,10vw,8.5rem)}
.kicker{position:relative;z-index:2;font-family:var(--font-m);font-weight:700;font-size:clamp(10px,1.3vw,12px);letter-spacing:.24em;color:var(--acid);margin-bottom:clamp(14px,2.5vh,26px);min-height:1.2em}
.kicker--red{color:var(--red)}
.stage--2 .kicker{color:var(--ink);opacity:.75}
.tag{position:absolute;z-index:3;font-family:var(--font-m);font-style:normal;font-weight:700;font-size:10px;letter-spacing:.16em;padding:.7em 1em;border:2px solid currentColor;white-space:nowrap;transform:scale(0) rotate(var(--r));opacity:0}
.is-active .tag{animation:tagIn .55s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--d)}
@keyframes tagIn{70%{transform:scale(1.15) rotate(var(--r));opacity:1}100%{transform:scale(1) rotate(var(--r));opacity:1}}
.ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:2px solid var(--acid);background:rgba(12,14,17,.92);overflow:hidden}
.ticker__inner{display:flex;width:max-content;animation:marquee 16s linear infinite}
.ticker__inner span{font-family:var(--font-m);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--acid);padding:10px 0;white-space:nowrap}
.ticker--red{border-color:var(--red)}
.ticker--red .ticker__inner{animation-duration:8s}
.ticker--red .ticker__inner span{color:var(--red)}
.ticker--top{top:0;bottom:auto;border-top:0;border-bottom:2px solid var(--red)}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:0}}

.stage--1{background:radial-gradient(120% 90% at 75% 30%,#1a2028 0%,var(--ink) 58%)}
.stage--1 .bignum{-webkit-text-stroke-color:rgba(216,255,62,.09)}
.stage--1 .tag{color:var(--acid);background:rgba(12,14,17,.5)}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.w{display:inline-block;transform:translateY(115%) skewY(3deg)}
.stage--1.is-active .w{animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
.stage--1 .line:nth-of-type(1) .w:nth-of-type(1){animation-delay:.15s}
.stage--1 .line:nth-of-type(1) .w:nth-of-type(2){animation-delay:.24s}
.stage--1 .line:nth-of-type(2) .w:nth-of-type(1){animation-delay:.36s}
.stage--1 .line:nth-of-type(3) .w:nth-of-type(1){animation-delay:.5s}
@keyframes rise{to{transform:translateY(0) skewY(0)}}
.hl{color:var(--acid)}
.caret{display:inline-block;width:.14em;height:.8em;background:var(--acid);margin-left:.12em;transform:translateY(.08em);animation:blink 1.1s steps(2,start) infinite}
.note{position:relative;z-index:2;margin-top:clamp(14px,2.5vh,22px);font-family:var(--font-m);font-size:clamp(10px,1.4vw,12px);letter-spacing:.18em;color:var(--acid);opacity:0;transform:rotate(-2deg) translateY(10px)}
.stage--1.is-active .note{animation:noteIn .6s ease 1.5s forwards}
@keyframes noteIn{to{opacity:.9;transform:rotate(-2deg) translateY(0)}}
.side-tag{position:absolute;right:16px;top:50%;z-index:3;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--font-m);font-weight:700;font-size:10px;letter-spacing:.42em;color:rgba(245,243,234,.32)}
.eye{position:absolute;z-index:1;right:max(-120px,-8vw);top:50%;transform:translateY(-50%);width:min(62vmin,520px);aspect-ratio:1;will-change:transform}
.eye-ring{position:absolute;inset:-6%;border:2px dashed rgba(216,255,62,.35);border-radius:50%;animation:spin 42s linear infinite}
.eye-core{position:absolute;inset:14%;background:var(--white);border-radius:50%;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 8px rgba(12,14,17,.9),0 30px 80px rgba(0,0,0,.5);animation:eyelid 5.5s infinite}
@keyframes eyelid{0%,91%,100%{transform:scaleY(1)}93.5%{transform:scaleY(.06)}96%{transform:scaleY(1)}}
.pupil{width:36%;aspect-ratio:1;background:var(--ink);border-radius:50%;transition:transform .15s ease-out;will-change:transform}
.pupil::after{content:"";display:block;width:34%;aspect-ratio:1;background:var(--acid);border-radius:50%;margin:16% 0 0 16%}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{position:absolute;z-index:1;color:var(--acid);font-style:normal;font-size:18px;opacity:.8;animation:float 5s ease-in-out infinite}
.spark--a{top:18%;left:12%}
.spark--b{top:62%;left:46%;font-size:12px;animation-delay:-2.4s}
@keyframes float{50%{transform:translateY(-14px) rotate(20deg)}}
.hint{position:absolute;left:clamp(20px,5vw,56px);bottom:clamp(58px,10vh,92px);z-index:3;display:flex;align-items:center;gap:.7em;font-family:var(--font-m);font-weight:700;font-size:11px;letter-spacing:.22em;color:rgba(245,243,234,.65)}
.hint .arr{color:var(--acid);font-size:15px;animation:bob 1.1s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

.stage--2{background:var(--acid);color:var(--ink)}
.stage--2::before{content:"";position:absolute;inset:-60%;background:repeating-linear-gradient(-45deg,rgba(12,14,17,.055) 0 28px,transparent 28px 56px);animation:stripesMove 3s linear infinite;pointer-events:none}
@keyframes stripesMove{to{transform:translate(56px,56px)}}
.stage--2 .bignum{-webkit-text-stroke-color:rgba(12,14,17,.14)}
.stage--2 .tag{color:var(--ink);background:rgba(245,243,234,.35)}
.panel{overflow:hidden;position:relative;z-index:2}
.w2{display:inline-block;opacity:0;transform:translateY(120%) skewY(5deg)}
.stage--2.is-active .w2{animation:pop .95s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*.13s + .12s)}
@keyframes pop{to{opacity:1;transform:translateY(0) skewY(0)}}
.stage--2 .sub{position:relative;z-index:2;margin-top:clamp(16px,3vh,28px);font-size:clamp(11px,1.5vw,13px);letter-spacing:.08em;color:rgba(12,14,17,.7);opacity:0;transform:translateY(20px);transition:opacity .8s ease .85s,transform .8s ease .85s}
.stage--2.is-active .sub{opacity:1;transform:none}
.orbit{position:absolute;top:clamp(50px,9vh,100px);right:clamp(14px,5vw,64px);z-index:2;width:clamp(110px,18vmin,170px);aspect-ratio:1;animation:spin 18s linear infinite}
.orbit svg{width:100%;height:100%;overflow:visible}
.orbit text{font-family:var(--font-m);font-weight:700;font-size:15px;letter-spacing:3px;fill:var(--ink)}
.fineprint{position:absolute;left:clamp(20px,5vw,56px);bottom:16px;z-index:3;font-family:var(--font-m);font-size:9px;letter-spacing:.16em;color:var(--ink);opacity:.55;max-width:82vw}

.stage--3{background:radial-gradient(120% 90% at 50% 115%,#3a0e06 0%,var(--ink) 64%)}
.stage--3::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 180px rgba(255,61,31,.28);pointer-events:none;z-index:1}
.stage--3 .bignum{-webkit-text-stroke-color:rgba(255,61,31,.14)}
.fade-blur{opacity:0;filter:blur(16px);transform:scale(1.07)}
.stage--3.is-active .fade-blur{animation:reveal 1.5s cubic-bezier(.16,1,.3,1) .25s forwards}
@keyframes reveal{to{opacity:1;filter:blur(0);transform:scale(1)}}
.outline{color:transparent;-webkit-text-stroke:clamp(2px,.35vw,4px) var(--red)}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;opacity:0;pointer-events:none}
.stage--3.is-active .glitch::before{color:var(--red);animation:glA 3s infinite}
.stage--3.is-active .glitch::after{color:var(--cyan);animation:glB 2.7s infinite}
@keyframes glA{0%,86%,100%{opacity:0;transform:none;clip-path:inset(0)}89%{opacity:.9;transform:translate(-7px,2px);clip-path:inset(8% 0 55% 0)}93%{opacity:.9;transform:translate(5px,-2px);clip-path:inset(58% 0 6% 0)}}
@keyframes glB{0%,80%,100%{opacity:0;transform:none;clip-path:inset(0)}84%{opacity:.8;transform:translate(6px,1px);clip-path:inset(40% 0 30% 0)}90%{opacity:.8;transform:translate(-5px,-1px);clip-path:inset(5% 0 72% 0)}}
.stage--3.is-active{animation:shake .7s cubic-bezier(.36,.07,.19,.97) 1.6s}
@keyframes shake{10%,90%{transform:translate(-2px,0)}20%,80%{transform:translate(4px,1px) rotate(.3deg)}30%,50%,70%{transform:translate(-7px,-2px) rotate(-.4deg)}40%,60%{transform:translate(7px,2px) rotate(.4deg)}}
.laugh{position:relative;z-index:2;margin-top:clamp(16px,3vh,30px);font-size:12px;letter-spacing:.14em;color:rgba(245,243,234,.55);opacity:0}
.stage--3.is-active .laugh{animation:fadeIn 1s ease 1.7s forwards}
@keyframes fadeIn{to{opacity:1}}
.stamp{position:absolute;left:var(--x);top:var(--y);z-index:2;font-family:var(--font-m);font-style:normal;font-weight:700;font-size:clamp(9px,1.4vw,12px);letter-spacing:.18em;color:var(--red);border:2px solid var(--red);padding:.55em .9em;background:rgba(12,14,17,.4);transform:rotate(var(--r)) scale(0);opacity:0}
.stage--3.is-active .stamp{animation:stampIn .5s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(1.2s + var(--i)*.14s)}
@keyframes stampIn{70%{transform:rotate(var(--r)) scale(1.18);opacity:1}100%{transform:rotate(var(--r)) scale(1);opacity:1}}
.peeper{position:absolute;left:var(--px);top:var(--py);width:var(--ps);height:var(--ps);z-index:1;font-style:normal;transform:scale(0) rotate(45deg);opacity:0}
.stage--3.is-active .peeper{animation:eyeOpen .5s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:var(--pd)}
@keyframes eyeOpen{to{transform:scale(1) rotate(45deg);opacity:1}}
.peeper::before{content:"";position:absolute;inset:0;background:var(--white);border-radius:60% 0 60% 0}
.peeper b{position:absolute;left:50%;top:50%;width:38%;height:38%;margin:-19% 0 0 -19%;background:var(--ink);border-radius:50%;animation:peek 2.8s ease-in-out infinite;animation-delay:var(--po)}
@keyframes peek{0%,100%{transform:translateX(-70%)}50%{transform:translateX(70%)}}

.stage--4{background-color:var(--ink2);background-image:linear-gradient(rgba(245,243,234,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(245,243,234,.045) 1px,transparent 1px);background-size:44px 44px}
.end-title{font-size:clamp(3rem,14vw,10rem)}
.dot{color:var(--red)}
.body-text{position:relative;z-index:2;max-width:52ch;margin-top:clamp(14px,2.5vh,24px);color:rgba(245,243,234,.78);font-size:clamp(14px,1.8vw,17px);line-height:1.65}
.body-text b{color:var(--acid)}
.cert{position:relative;z-index:2;margin-top:clamp(24px,4vh,40px);max-width:520px;border:2px dashed rgba(216,255,62,.5);background:rgba(216,255,62,.04);padding:clamp(16px,3vw,26px) clamp(18px,4vw,32px);transform:rotate(-1.5deg) translateY(30px);opacity:0;transition:opacity .8s ease .8s,transform .8s cubic-bezier(.16,1,.3,1) .8s}
.stage--4.is-active .cert{opacity:1;transform:rotate(-1.5deg) translateY(0)}
.cert-head{font-size:10px;letter-spacing:.3em;color:rgba(245,243,234,.5);margin-bottom:10px}
.cert-big{font-family:var(--font-d);font-weight:900;font-size:clamp(17px,3vw,26px);letter-spacing:.04em}
.cert-big b{color:var(--acid)}
.cert-row{font-size:11px;letter-spacing:.12em;color:rgba(245,243,234,.6);margin-top:6px}
.cert-stamp{position:absolute;right:-10px;top:-16px;font-family:var(--font-m);font-weight:700;font-size:10px;letter-spacing:.18em;color:var(--red);border:2px solid var(--red);padding:.6em .9em;transform:rotate(8deg);background:var(--ink2)}
.btns{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,4vh,36px)}
.btn{font-family:var(--font-m);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:1.1em 1.5em;border:2px solid var(--acid);color:var(--acid);background:transparent;box-shadow:5px 5px 0 rgba(216,255,62,.22);transition:transform .15s ease,box-shadow .15s ease}
.btn--solid{background:var(--acid);color:var(--ink)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 rgba(216,255,62,.32)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.copied{position:relative;z-index:2;margin-top:16px;font-size:11px;letter-spacing:.16em;color:var(--acid);opacity:0;transition:opacity .4s ease}
.copied.show{opacity:1}
.footer{position:absolute;left:clamp(20px,5vw,56px);bottom:16px;z-index:2;font-size:9px;letter-spacing:.18em;color:rgba(245,243,234,.35);max-width:86vw}
.stage--4 .kicker,.stage--4 .end-title,.stage--4 .body-text,.stage--4 .btns{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.stage--4.is-active .kicker{opacity:1;transform:none;transition-delay:.1s}
.stage--4.is-active .end-title{opacity:1;transform:none;transition-delay:.2s}
.stage--4.is-active .body-text{opacity:1;transform:none;transition-delay:.45s}
.stage--4.is-active .btns{opacity:1;transform:none;transition-delay:.6s}

@media (max-width:720px){
  .eye{opacity:.45;right:-38%}
  .orbit{top:auto;bottom:78px;width:96px}
  .side-tag{display:none}
  .stage--1 .tag + .tag{display:none}
  .stage--2 .tag + .tag + .tag{display:none}
}
@media (max-width:640px){
  .stamp:nth-of-type(even){display:none}
  .peeper:nth-of-type(3),.peeper:nth-of-type(5),.peeper:nth-of-type(7){display:none}
}
@media (max-height:560px){.hint{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
}