@font-face{font-family:Anybody;src:url(f/ab.woff2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:block}
@font-face{font-family:Serif;src:url(f/is-i.woff2) format("woff2");font-style:italic;font-display:block}
@font-face{font-family:Serif;src:url(f/is-n.woff2) format("woff2");font-style:normal;font-display:block}
@font-face{font-family:Tight;src:url(f/it.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--ink:#030304;--bone:#f2ede3;--dim:rgba(242,237,227,.56);--ember:#ff7a3d;--pad:clamp(20px,4vw,64px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--bone);font-family:Tight,system-ui,sans-serif;-webkit-font-smoothing:antialiased;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{overflow-x:hidden}
::selection{background:var(--ember);color:var(--ink)}
a{color:inherit;text-decoration:none}
#gl{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;z-index:0}
#track{display:none}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
.serif{font-family:Serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.wide{font-family:Anybody;font-weight:850;font-stretch:135%;letter-spacing:-.01em;text-transform:uppercase}
.sp{display:block}
.c{display:inline-block;will-change:transform,opacity;white-space:pre}
header{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad)*.6) var(--pad);mix-blend-mode:normal;font-size:13px;letter-spacing:.02em}
.brand{font-family:Anybody;font-weight:800;font-stretch:130%;font-size:15px;letter-spacing:.08em}
.brand sup{font-family:Tight;font-weight:500;font-size:9px;letter-spacing:0;margin-left:3px;color:var(--dim)}
.sig{display:inline-flex;gap:8px;align-items:center;padding:11px 18px;border-radius:99px;background:rgba(242,237,227,.07);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(242,237,227,.14);transition:background .3s,color .3s}
.sig:hover{background:var(--bone);color:var(--ink)}
.sig em{font-style:normal;color:var(--ember)}
#ov{position:fixed;inset:0;z-index:10;pointer-events:none}
.sc{position:absolute;inset:0;padding:var(--pad);opacity:0;visibility:hidden}
.sc.on{visibility:visible}
.sc a{pointer-events:auto}
/* hero */
.s-hero{display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(110px,17vh,200px)}
.kick{display:flex;gap:18px;font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--dim);margin-bottom:clamp(14px,2.4vh,28px)}
.kick span+span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ember);margin:0 14px 2px 0;box-shadow:0 0 12px var(--ember)}
.s-hero h1{font-weight:400;line-height:.9}
.s-hero .l1{font-size:clamp(40px,7.4vw,128px);line-height:1}
.s-hero .l2{font-size:clamp(46px,9.6vw,178px);line-height:.92;margin-top:.04em}
.scroll{position:absolute;left:var(--pad);bottom:calc(var(--pad)*.8 + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.scroll b{display:block;width:44px;height:1px;background:linear-gradient(90deg,var(--bone),transparent);transform-origin:left;animation:sl 2.4s cubic-bezier(.7,0,.2,1) infinite}
@keyframes sl{0%{transform:scaleX(0)}50%{transform:scaleX(1);transform-origin:left}50.01%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* proof */
.s-proof{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right}
.s-proof h2{font-weight:400;line-height:.95}
.s-proof .serif{font-size:clamp(34px,5.4vw,96px)}
.s-proof .wide{font-size:clamp(60px,12vw,230px);line-height:.9;color:var(--ember);text-shadow:0 0 60px rgba(255,122,61,.35)}
.cap{max-width:30em;font-size:clamp(14px,1.15vw,18px);line-height:1.55;color:var(--dim);margin-top:22px}
.meter{margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-variant-numeric:tabular-nums}
.meter b{color:var(--bone);font-weight:600}
.meter span{color:var(--ember);margin:0 6px}
/* warp */
.s-warp{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.warpw{font-size:clamp(34px,9.6vw,200px);line-height:.9;font-stretch:150%;white-space:nowrap}
.c2{font-size:clamp(22px,2.6vw,44px);color:var(--bone);margin-top:10px}
/* saturn */
.s-sat{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(60px,12vh,140px)}
.tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.tag:before{content:"";display:inline-block;width:28px;height:1px;background:var(--ember);vertical-align:middle;margin-right:12px}
.s-sat h2{font-weight:400;line-height:.92}
.s-sat .serif{font-size:clamp(32px,5vw,88px);margin-bottom:.12em}
.s-sat .wide{font-size:clamp(48px,9vw,168px)}
.out{color:transparent;-webkit-text-stroke:1.5px var(--bone)}
/* black hole */
.s-bh{display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(100px,15vh,170px)}
.s-bh h2{font-weight:400;line-height:.95}
.s-bh .serif{font-size:clamp(34px,5.6vw,100px)}
.s-bh .wide{font-size:clamp(40px,8.4vw,160px)}
.c3{max-width:26em}
/* fall */
.s-fall{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.big{font-size:clamp(28px,3.6vw,64px);line-height:1.08;max-width:15em;transform-origin:left bottom}
.big em{color:var(--ember)}
.b2{margin-top:.25em}
/* end */
.s-end{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:110px}
.endw{font-size:clamp(56px,9.4vw,200px);line-height:.84;font-stretch:150%;margin-bottom:clamp(26px,4.5vh,56px)}
.endw .sp:last-child{color:transparent;-webkit-text-stroke:2px var(--bone)}
.dc{display:inline-flex;align-items:center;gap:18px;padding:16px 24px 16px 18px;border-radius:100px;background:var(--bone);color:var(--ink);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;box-shadow:0 0 0 0 rgba(255,122,61,0),0 20px 60px rgba(0,0,0,.5);min-height:64px}
.dc:hover{box-shadow:0 0 0 6px rgba(255,122,61,.25),0 20px 80px rgba(255,122,61,.35)}
.dc svg{width:42px;height:42px;padding:10px;border-radius:50%;background:var(--ink);fill:var(--bone);flex:none;transition:background .4s}
.dc:hover svg{background:#5865F2;fill:#fff}
.dc span{display:flex;flex-direction:column;line-height:1.15}
.dc b{font-family:Anybody;font-weight:800;font-stretch:120%;text-transform:uppercase;font-size:clamp(15px,1.3vw,19px);letter-spacing:.02em}
.dc small{font-size:12.5px;opacity:.6;margin-top:3px}
.dc em{font-style:normal;font-size:22px;margin-left:8px;color:var(--ember)}
footer{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad)*.6 + env(safe-area-inset-bottom));display:flex;gap:24px;justify-content:space-between;font-size:12px;color:var(--dim);letter-spacing:.04em}
footer a{pointer-events:auto;color:var(--bone)}
/* loader */
#loader{position:fixed;inset:0;z-index:50;background:var(--ink);display:grid;place-items:center;transition:opacity 1.2s cubic-bezier(.6,0,.2,1),visibility 1.2s}
#loader.done{opacity:0;visibility:hidden}
.ld-word{font-family:Anybody;font-weight:850;font-stretch:150%;font-size:clamp(44px,8vw,120px);letter-spacing:.06em;display:flex;justify-content:center}
.ld-word span{display:inline-block;animation:ld 1.6s cubic-bezier(.2,.8,.2,1) both}
.ld-word span:nth-child(2){animation-delay:.08s}.ld-word span:nth-child(3){animation-delay:.16s}.ld-word span:nth-child(4){animation-delay:.24s}
@keyframes ld{from{opacity:0;transform:translateY(40%) scaleY(1.6);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
.ld-sub{text-align:center;margin-top:14px;font-size:13px;color:var(--dim);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ld-sub i{font-family:Serif;font-size:17px}
.ld-sub b{color:var(--bone);font-weight:600}
/* cursor */
#cur{position:fixed;z-index:60;left:0;top:0;width:0;height:0;pointer-events:none;display:none}
#cur i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(242,237,227,.6);transition:width .35s,height .35s,left .35s,top .35s,background .35s,border-color .35s}
#cur:after{content:"";position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--ember)}
html.fine #cur{display:block}
html.fine.hov #cur i{width:84px;height:84px;left:-42px;top:-42px;background:rgba(255,122,61,.12);border-color:var(--ember)}
html.fine,html.fine a{cursor:none}
.nos{position:fixed;inset:0;display:grid;place-items:center;z-index:99;background:#000}
@media (max-width:760px){
  .s-sat .serif,.s-bh .serif{margin-bottom:.18em}
  .warpw{font-size:11vw}
  .s-bh .wide{font-size:clamp(34px,10.5vw,60px)}
  .endw{font-size:clamp(48px,15vw,96px)}
  .s-sat{justify-content:flex-end;padding-bottom:110px}
  .s-bh{padding-top:96px}
  .s-proof{justify-content:flex-start;padding-top:110px}
  .s-hero{padding-top:110px}
  .kick{flex-direction:column;gap:6px}.kick span+span:before{display:none}
  .s-proof{align-items:flex-start;text-align:left}
  .c3{position:static;text-align:left;margin-top:18px}
  footer{flex-direction:column;gap:6px}
  .s-end{justify-content:center;padding-bottom:120px}
  .dc{padding:12px 18px 12px 12px;gap:12px}
  .s-bh{padding-top:110px}
  .sig{padding:9px 14px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.scroll b,.ld-word span{animation:none}}

.sc h1,.sc h2,.big,.cap,.tag,.kick,.meter{text-shadow:0 0 28px rgba(3,3,4,.75),0 0 3px rgba(3,3,4,.5)}
.sc:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.s-hero:before,.s-bh:before{background:radial-gradient(70% 60% at 18% 30%,rgba(3,3,4,.55),transparent 70%)}
.s-proof:before{background:radial-gradient(60% 70% at 85% 50%,rgba(3,3,4,.6),transparent 70%)}
.s-sat:before{background:radial-gradient(70% 55% at 20% 80%,rgba(3,3,4,.65),transparent 70%)}
.s-warp:before{background:radial-gradient(50% 40% at 50% 50%,rgba(3,3,4,.6),transparent 75%)}
.s-fall{justify-content:flex-end;align-items:flex-start;text-align:left;padding-bottom:clamp(60px,12vh,130px)}
.s-fall:before{background:linear-gradient(0deg,rgba(3,3,4,.85),transparent 45%)}
.s-end:before{background:radial-gradient(60% 70% at 20% 50%,rgba(3,3,4,.6),transparent 70%)}
.s-proof .serif{color:var(--bone)}
.big{color:var(--bone)}

.serif{line-height:1.12}
.sc .serif+*{margin-top:.12em}
header .sig{background:rgba(6,6,8,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* header right + sound */
.hr{display:flex;gap:10px;align-items:center}
.snd{all:unset;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:99px;background:rgba(6,6,8,.55);border:1px solid rgba(242,237,227,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-size:12px;letter-spacing:.06em;color:var(--dim);transition:color .3s,border-color .3s;pointer-events:auto}
.snd i{display:flex;gap:2px;align-items:center;height:12px}
.snd i b{display:block;width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .3s}
.snd.on{color:var(--bone);border-color:rgba(255,122,61,.5)}
.snd.on i b{background:var(--ember);animation:eq 1.1s ease-in-out infinite}
.snd.on i b:nth-child(2){animation-delay:-.3s}.snd.on i b:nth-child(3){animation-delay:-.6s}.snd.on i b:nth-child(4){animation-delay:-.15s}.snd.on i b:nth-child(5){animation-delay:-.8s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
/* HUD */
#hud{position:fixed;z-index:15;inset:0;pointer-events:none;opacity:0;font-variant-numeric:tabular-nums}
.tl{position:absolute;left:50%;top:calc(var(--pad)*.6 + 14px);transform:translateX(-50%);list-style:none;display:flex;gap:22px;padding-bottom:12px}
.tl li{display:flex;align-items:baseline;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,237,227,.28);transition:color .5s,transform .5s}
.tl li em{font-style:normal;font-family:Anybody;font-stretch:120%;font-weight:700;font-size:10px;width:18px}
.tl li span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
.tl li.past{color:rgba(242,237,227,.5)}
.tl li.on{color:var(--bone)}
.tl li.on em{color:var(--ember)}
.tl li.on span{opacity:1;max-width:120px}
.tl li{gap:0}.tl li.on{gap:8px}
#hud:after{content:"";position:absolute;right:0;bottom:0;width:min(620px,64vw);height:190px;background:radial-gradient(80% 90% at 100% 100%,rgba(3,3,4,.88),transparent 72%);z-index:-1}
.rail{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(242,237,227,.12)}
.rail b{position:absolute;inset:0;background:linear-gradient(90deg,var(--ember),var(--bone));transform-origin:left;transform:scaleX(0);box-shadow:0 0 8px var(--ember)}
.tele{position:absolute;right:var(--pad);bottom:calc(var(--pad)*.8 + env(safe-area-inset-bottom));display:flex;gap:26px;text-align:right}
.tele .row{display:flex;flex-direction:column;gap:5px;min-width:96px}
.tele label{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tele b{font-family:Anybody;font-stretch:115%;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--bone);white-space:nowrap}
.tele b small{font-family:Tight;font-weight:500;font-size:10px;letter-spacing:.1em;color:var(--dim);margin-left:5px;text-transform:uppercase}
.tele .row:first-child b{color:var(--ember)}
#ov{transition:none}
@media (max-width:760px){
  .tl{display:none}
  .tele{left:var(--pad);right:auto;top:calc(var(--pad)*.6 + 46px);bottom:auto;text-align:left;gap:16px}
  .tele .row{min-width:0}.tele .row:first-child{display:none}
  .tele b{font-size:12px}.tele label{font-size:8.5px}
  .snd span{display:none}.snd{padding:10px 12px}
  .s-hero{padding-top:150px}.s-proof,.s-bh{padding-top:150px}
}

html.capmode *{transition:none!important}
.tele b{text-shadow:0 0 14px rgba(3,3,4,.9)}
.tele .row:first-child b{color:var(--bone)}.tele .row:first-child label{color:var(--ember)}
@media (max-width:760px){#hud:before{content:"";position:absolute;left:0;right:0;top:0;height:170px;background:linear-gradient(rgba(3,3,4,.75),transparent);z-index:-1}#hud:after{display:none}}

.tele label{white-space:nowrap}
@media (max-width:1240px){.tl{gap:14px}.tl li.on span{max-width:0;opacity:0}.tl li.on{gap:0}}
