@font-face{font-family:Geist;src:url('assets/geist-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Geist Mono;src:url('assets/geist-mono-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#080b09;--lime:#ceff00;--paper:#f2f3ee;--grid:24px;--grid-x:0px;--grid-y:0px;background:var(--ink);color:var(--paper);font-family:Geist,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background-image:linear-gradient(#899c7914 var(--grid-line,1px),transparent var(--grid-line,1px)),linear-gradient(90deg,#899c7914 var(--grid-line,1px),transparent var(--grid-line,1px));background-size:var(--grid) var(--grid);background-position:var(--grid-x) var(--grid-y)}
main{position:relative;min-height:100svh;display:grid;place-items:center;padding:100px 0 110px}
.composition{width:100%;text-align:center}
h1{position:relative;width:min(94vw,1540px);aspect-ratio:5.95;margin:0 auto;font-size:clamp(40px,13vw,220px);font-weight:900;letter-spacing:-.075em;line-height:1.2;color:var(--lime)}
canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.js .fallback{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
#glow{opacity:.95}
#flying{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pixel-text{position:relative;display:inline-block}
.js .pixel-text{color:transparent}
.pixel-text canvas{inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px)}
.tagline{margin:20px 20px 0;font-family:Geist Mono,monospace;font-size:clamp(10px,1.45vw,23px);line-height:1.5;font-weight:400;letter-spacing:.19em}
.launching{position:absolute;bottom:max(clamp(64px,12svh,120px),env(safe-area-inset-bottom));left:0;right:0;margin:0;color:var(--lime);font:700 clamp(16px,1.7vw,25px)/1.5 Geist Mono,monospace;letter-spacing:.15em;text-transform:uppercase}
.verbs{display:flex;justify-content:center;align-items:center;gap:clamp(30px,7.7vw,120px);padding:0;margin:42px 20px 0;list-style:none;text-transform:uppercase;font-family:Geist Mono,monospace;font-size:clamp(19px,3.25vw,51px);line-height:1.15;font-weight:700;letter-spacing:-.025em}
.verbs li{position:relative;white-space:nowrap}
.verbs li+li:before{content:'';position:absolute;left:calc(clamp(30px,7.7vw,120px) / -2 - 5px);top:calc(50% - 5px);width:10px;height:10px;background:var(--lime)}
.social{position:absolute;z-index:1;top:32px;right:36px;width:48px;height:48px;display:grid;place-items:center;color:var(--paper);transition:color .2s,transform .2s}
.social svg{width:25px;height:25px}
.social:hover{color:var(--lime);transform:translateY(-2px)}
.social:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.js .tagline,.js .verbs li,.js .launching{opacity:0;transform:translateY(14px)}
.js .complete .tagline,.js .complete .verbs li,.js .complete .launching{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.js .complete .verbs li:nth-child(1){transition-delay:.55s}
.js .complete .verbs li:nth-child(2){transition-delay:.8s}
.js .complete .verbs li:nth-child(3){transition-delay:1.05s}
.js .complete .launching{transition-delay:1.35s}
.js .complete .launching canvas{animation:launch-glow 2.8s ease-in-out 1.95s infinite both}
@keyframes launch-glow{0%,100%{filter:drop-shadow(0 0 8px #ceff00cc) drop-shadow(0 0 14px #ceff0070)}50%{filter:drop-shadow(0 0 16px #ceff00) drop-shadow(0 0 28px #ceff00b0)}}
@media(min-width:1800px){.composition{max-width:1800px}}
@media(max-width:600px){main{padding:88px 0}.social{top:20px;right:18px}.social svg{width:22px;height:22px}h1{width:100%;aspect-ratio:5.4}.tagline{margin-top:26px;font-size:clamp(10px,3vw,14px);letter-spacing:.13em}.verbs{margin-top:32px;gap:clamp(24px,8vw,46px);font-size:clamp(16px,4.9vw,26px)}.verbs li+li:before{width:5px;height:5px;top:calc(50% - 2.5px);left:calc(clamp(24px,8vw,46px) / -2 - 2.5px)}}
@media(prefers-reduced-motion:reduce){*,*:before{transition:none!important;transform:none!important}.js .tagline,.js .verbs li,.js .launching{opacity:1}.js .complete .launching canvas{animation:none;filter:drop-shadow(0 0 8px #ceff00cc) drop-shadow(0 0 14px #ceff0070)}}
