:root{color-scheme:dark;--bg:#111411;--panel:#171c17;--line:#343c32;--text:#e8e9dc;--muted:#a5ae9f;--accent:#c0fa73;font-synthesis:none;scroll-behavior:smooth;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-size:14px;line-height:1.7}::selection{background:var(--accent);color:var(--bg)}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{font:inherit}.shell{max-width:1440px;margin:auto;padding:0 6%}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:100px;display:flex}.brand{letter-spacing:-1.5px;font-size:24px;font-weight:700}.brand>span:first-child{color:var(--accent);margin-right:8px}.cursor{color:var(--accent)}nav{gap:34px;display:flex}nav a{font-size:13px}.skip{background:var(--accent);color:var(--bg);z-index:10;padding:12px;position:absolute;top:-80px}.skip:focus{top:10px}.hero{padding-top:38px}.eyebrow,.label{letter-spacing:1.5px;color:var(--muted);font-size:11px}.eyebrow{align-items:center;gap:10px;display:flex}.dot{background:var(--accent);border-radius:50%;width:6px;height:6px;display:inline-block}.version{letter-spacing:0;color:var(--accent);border:1px solid var(--line);margin-left:auto;padding:3px 10px}.hero-grid{grid-template-columns:1.12fr 1fr;align-items:center;gap:6%;padding:70px 0 50px;display:grid}h1,h2,h3,p{margin:0}h1{letter-spacing:-5px;font-size:clamp(44px,5.5vw,77px);font-weight:500;line-height:1.1}em{color:var(--accent);font-style:normal}.block-cursor{color:var(--accent);font-size:.8em;animation:1.6s step-end infinite blink}.intro{color:var(--muted);margin:28px 0;font-size:15px;line-height:1.9}.actions{align-items:center;gap:26px;margin:32px 0;display:flex}.button{background:var(--accent);color:var(--bg);border:1px solid var(--accent);align-items:center;gap:32px;padding:13px 20px;font-weight:700;display:inline-flex}.button:hover{background:var(--text);color:var(--bg);border-color:var(--text)}.text-link{font-size:13px}.text-link span{color:var(--accent);margin-left:8px}.install{border:1px solid var(--line);background:var(--panel);justify-content:space-between;align-items:center;max-width:350px;padding:12px 15px;display:flex}.install code{font:inherit}.install code span{color:var(--accent)}.install button{color:var(--muted);cursor:pointer;background:0 0;border:0;padding:4px;font-size:11px}.install button:hover{color:var(--accent)}.copy-status{min-height:23px;color:var(--accent);margin-top:6px;font-size:11px}.art-terminal,.code-window{border:1px solid var(--line);background:#141914;box-shadow:10px 10px #0b0e0b}.terminal-bar{border-bottom:1px solid var(--line);color:var(--muted);justify-content:space-between;padding:11px 16px;font-size:10px;display:flex}.landscape{text-align:center;color:var(--accent);text-shadow:0 0 20px #c0fa7320;margin:30px 16px;font:clamp(9px,1vw,14px)/1.6 SFMono-Regular,Consolas,monospace}.terminal-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;padding:10px 14px;font-size:9px;display:flex}.terminal-footer .dot{width:4px;height:4px;margin-right:5px}.section{border-bottom:1px solid var(--line);padding:100px 0;scroll-margin-top:30px}.section-heading{grid-template-columns:1fr 1.7fr 1fr;align-items:start;gap:30px;display:grid}.label{color:var(--accent);font-size:10px;display:block}h2{letter-spacing:-1.6px;font-size:clamp(28px,3vw,40px);font-weight:400;line-height:1.3}.section-heading p,.start p,.project p{color:var(--muted);font-size:13px;line-height:1.9}.modules{grid-template-columns:1fr 1fr;gap:0 60px;margin-top:55px;display:grid}.modules article{border-top:1px solid var(--line);gap:25px;padding:30px 0;display:flex}.module-number{color:var(--accent);padding-top:4px;font-size:11px}h3{letter-spacing:-.5px;font-size:17px;font-weight:400}.modules p{color:var(--muted);max-width:390px;margin:14px 0 19px;font-size:12px;line-height:1.9}.modules a{color:var(--accent);font-size:11px}.start{grid-template-columns:1fr 1.5fr;align-items:center;gap:65px;display:grid}.start h2{margin:25px 0}.start p{margin-bottom:24px}.code-window pre{tab-size:4;margin:0;padding:28px 25px;font-size:12px;line-height:1.85;overflow-x:auto}.code-window code{font:inherit}.syntax{color:#d2b6ef}.function{color:#dfea9f}.string{color:var(--accent)}.code-note{border-top:1px solid var(--line);color:var(--muted);padding:12px 16px;font-size:10px}.project-grid{grid-template-columns:1fr 1fr;gap:100px;margin-top:28px;display:grid}.project p{max-width:490px;margin-top:23px}.directory a{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:20px 0;font-size:14px;display:flex}.directory a:first-child{border-top:1px solid var(--line)}.directory small{color:var(--muted);margin-bottom:4px;font-size:10px;display:block}.directory>a>span:last-child{color:var(--accent)}.closing{text-align:center;padding:90px 0 100px}.closing>span{color:var(--accent);margin-bottom:20px;font-size:30px;display:block}.closing h2{margin-bottom:30px;font-size:clamp(28px,3.5vw,45px)}footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:25px;padding:28px 0;font-size:10px;display:flex}footer .brand{color:var(--text);font-size:20px}footer div{gap:20px;display:flex}@keyframes blink{50%{opacity:0}}@media (width>=1500px){.shell{padding:0 80px}}@media (width<=900px){.hero-grid{gap:35px}h1{letter-spacing:-3px}.desktop-break{display:none}.section-heading{grid-template-columns:1fr 2fr}.section-heading>p{grid-column:2}.start{grid-template-columns:1fr 1.4fr;gap:35px}.code-window pre{padding:20px 14px;font-size:10px}.project-grid{gap:45px}.section{padding:75px 0}}@media (width<=650px){.shell{padding:0 6%}header{height:80px}.brand{font-size:22px}nav{gap:18px}nav a{font-size:11px}.eyebrow{letter-spacing:1px;flex-wrap:wrap;font-size:9px}.version{font-size:9px}.hero{padding-top:25px}.hero-grid{grid-template-columns:1fr;gap:25px;padding:45px 0 40px}h1{letter-spacing:-3px;font-size:52px}.intro{margin:22px 0;font-size:13px}.actions{margin:26px 0}.landscape{margin:25px 8px;font-size:11px}.art-terminal{width:100%;max-width:440px}.terminal-bar{font-size:9px}.section{padding:55px 0}.section-heading{display:block}.section-heading h2{margin:20px 0}.section-heading p{max-width:300px}.modules{grid-template-columns:1fr;margin-top:30px}.modules article{gap:18px;padding:25px 0}.modules p{max-width:none}.start{grid-template-columns:1fr;gap:30px}.code-window pre{font-size:10px}.project-grid{grid-template-columns:1fr;gap:30px}.closing{padding:60px 0}.closing h2{font-size:28px}footer{flex-wrap:wrap;padding:25px 0}footer>span{margin-left:auto}footer div{gap:25px;width:100%}.button,.text-link{font-size:12px}}@media (prefers-reduced-motion:reduce){:root{scroll-behavior:auto}.block-cursor{animation:none}}html{scroll-padding-top:20px}.muted{color:var(--muted);opacity:.7}body:before{content:"";z-index:-1;pointer-events:none;background-image:linear-gradient(#c0fa7308 1px,#0000 1px),linear-gradient(90deg,#c0fa7308 1px,#0000 1px);background-size:48px 48px;position:fixed;inset:0;mask-image:radial-gradient(at 50% 0,#000 0%,#0000 75%)}.glow{z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(520px circle at var(--x,50%) var(--y,30%), #c0fa730d, transparent 60%);transition:opacity .6s;position:fixed;inset:0}.glow.on{opacity:1}.boot,.wipe{animation:.7s cubic-bezier(.2,.7,.2,1) both boot-in;animation-delay:calc(var(--i,0) * .12s + 50ms)}.wipe{animation-name:wipe-in;animation-duration:.9s;display:inline-block}@keyframes boot-in{0%{opacity:0;transform:translateY(10px)}}@keyframes wipe-in{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -10% 0 0)}}.pulse{animation:2.4s ease-in-out infinite pulse;box-shadow:0 0 #c0fa7366}@keyframes pulse{50%{box-shadow:0 0 0 5px #c0fa7300}}.caret{vertical-align:-.18em;background:var(--accent);width:.55em;height:1.05em;margin-left:2px;animation:1.1s step-end infinite blink;display:inline-block}.blink-soft{animation:1.6s step-end infinite blink}.tw{animation:4s ease-in-out infinite twinkle;animation-delay:var(--d)}@keyframes twinkle{0%,to{opacity:1;text-shadow:0 0 8px #c0fa73}45%{opacity:.25;text-shadow:none}}.crt{position:relative;overflow:hidden}.crt:after{content:"";pointer-events:none;background:linear-gradient(#0000 0%,#c0fa7309 50%,#0000 100%) 0 -120px/100% 120px no-repeat,repeating-linear-gradient(#0000 0 2px,#0000001f 2px 3px);animation:7s linear infinite scan;position:absolute;inset:0}@keyframes scan{to{background-position:0 calc(100% + 120px),0 0}}.code-window,.demo-window{transition:box-shadow .4s,transform .4s}.code-window:hover,.demo-window:hover{transform:translate(-2px,-2px);box-shadow:14px 14px #0b0e0b,0 0 0 1px #c0fa7333}.ticker{border-block:1px solid var(--line);padding:19px 0;overflow:hidden;mask-image:linear-gradient(90deg,#0000,#000 8% 92%,#0000)}.ticker-track{width:max-content;animation:38s linear infinite ticker;display:flex}.ticker:hover .ticker-track{animation-play-state:paused}.ticker-track>div{gap:64px;padding-right:64px;display:flex}.ticker span{color:var(--muted);letter-spacing:2px;white-space:nowrap;font-size:10px}.ticker span:before{content:"+";color:var(--accent);margin-right:12px}@keyframes ticker{to{transform:translate(-50%)}}.js .reveal{opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .1s);transform:translateY(18px)}.js .reveal.in{opacity:1;transform:none}.modules article{position:relative}.modules article:before{content:"";background:var(--accent);width:0;height:1px;transition:width .5s cubic-bezier(.2,.7,.2,1);position:absolute;top:-1px;left:0}.modules article:hover:before{width:100%}.modules article a span,.text-link span,.directory>a>span:last-child{transition:transform .25s;display:inline-block}.modules article:hover a span,.text-link:hover span,.directory>a:hover>span:last-child{transform:translate(3px,-3px)}.text-link[href^=\#]:hover span{transform:translateY(3px)}.directory a{transition:padding .3s,color .2s}.directory a:hover{padding-left:10px}.button{transition:background .2s,border-color .2s,box-shadow .3s}.button:hover{box-shadow:0 0 28px #c0fa7340}.code-window .ln{white-space:pre;min-height:1.85em;display:block}.js .code-window.reveal .ln{clip-path:inset(0 100% 0 0)}.js .code-window.reveal.in .ln{animation:.45s steps(24,end) both print;animation-delay:calc(.35s + var(--i) * 90ms)}@keyframes print{to{clip-path:inset(0 -5% 0 0)}}.play-grid{grid-template-columns:1.75fr 1fr;align-items:start;gap:50px;margin-top:55px;display:grid}.demo-window{border:1px solid var(--line);background:#0b0e0b;box-shadow:10px 10px #0b0e0b}.bar-link{color:var(--accent)}.demo-stage{aspect-ratio:16/10;background:#0b0e0b;position:relative}.demo-stage img,.demo-stage iframe{border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.demo-stage img{object-fit:cover;filter:saturate(.9)brightness(.75);transition:filter .5s,transform 6s ease-out}.demo-window:hover .demo-stage img{filter:saturate(1.05)brightness(.9);transform:scale(1.03)}.demo-stage.running img,.demo-stage.running .run{display:none}.run{z-index:1;background:radial-gradient(#0b0e0bb3 0%,#0b0e0b33 60%,#0000 80%);place-content:center;justify-items:center;gap:14px;display:grid;position:absolute;inset:0}.run:hover{color:var(--text)}.run-prompt{color:var(--text);font-size:15px}.run-button{background:var(--accent);color:var(--bg);padding:12px 20px;font-weight:700;transition:box-shadow .3s,transform .2s}.run:hover .run-button{transform:translateY(-2px);box-shadow:0 0 34px #c0fa7366}.run-note{color:var(--muted);letter-spacing:1px;font-size:10px}.facts{gap:0;display:grid}.fact{border-top:1px solid var(--line);gap:4px;padding:20px 0;display:grid}.fact b{letter-spacing:-1.5px;color:var(--accent);font-variant-numeric:tabular-nums;font-size:clamp(28px,3vw,38px);font-weight:400}.fact>span{color:var(--muted);font-size:12px}.how{border-top:1px solid var(--line);padding-top:20px}.how p{color:var(--muted);margin-top:12px;font-size:12px;line-height:1.9}.closing .prompt{color:var(--accent);margin-bottom:20px;font-size:30px;display:block}@media (width<=900px){.play-grid{grid-template-columns:1fr;gap:30px}.facts{grid-template-columns:repeat(3,1fr);gap:0 20px}.how{grid-column:1/-1}}@media (width<=650px){.play-grid{margin-top:30px}.facts{grid-template-columns:1fr}.ticker{padding:15px 0}.ticker span{letter-spacing:1px;font-size:9px}.demo-stage{aspect-ratio:4/3}}@media (prefers-reduced-motion:reduce){.boot,.wipe,.pulse,.caret,.blink-soft,.tw,.crt:after,.ticker-track,.js .code-window.reveal.in .ln{animation:none!important}.js .code-window.reveal .ln,.wipe{clip-path:none}.js .reveal{opacity:1;transition:none;transform:none}.ticker-track{flex-wrap:wrap}.demo-window:hover .demo-stage img,.code-window:hover,.demo-window:hover{transform:none}}.demo-window:has(.running):after{display:none}canvas.island{aspect-ratio:10/9;cursor:grab;touch-action:pan-y;width:100%;display:block}canvas.island:active{cursor:grabbing}.hello-demo{margin-top:55px}.hello-grid{grid-template-columns:1.3fr 1fr;align-items:start;gap:32px;display:grid}.code-window .ln[hidden]{display:none}.hello .code-window pre{min-height:calc(var(--lines,16) * 1.7em + 56px);font-size:11.5px;line-height:1.7}.hello .code-window .ln{min-height:1.7em}.ln.new{animation:.5s steps(28,end) both print,2.2s ease-out both fresh;animation-delay:calc(var(--k,0) * .28s), calc(var(--k,0) * .28s)}@keyframes fresh{0%,40%{box-shadow:inset 2px 0 0 var(--accent);background:#c0fa7314}to{background:0 0;box-shadow:inset 2px 0 #0000}}.game-window{border:1px solid var(--line);background:#141914;box-shadow:10px 10px #0b0e0b}.game-stage{aspect-ratio:4/3;background:#050605;transition:background .8s;position:relative;overflow:hidden}.game-stage:not([data-step="1"]){background:#1b2a1b}.empty-note{color:var(--muted);opacity:.6;place-items:center;font-size:11px;transition:opacity .4s;display:grid;position:absolute;inset:0}.game-stage:not([data-step="1"]) .empty-note{opacity:0}.crab{width:15%;image-rendering:pixelated;shape-rendering:crispedges;transition:transform .5s cubic-bezier(.3,1.6,.5,1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.game-stage:is([data-step="3"],[data-step="4"],[data-step="5"],[data-step="6"],[data-step="7"]) .crab{transform:translate(-50%,-50%)scale(1)}.game-stage[data-step="4"] .crab{animation:2.6s linear infinite walk}.game-stage:is([data-step="5"],[data-step="6"],[data-step="7"]) .crab{animation:3.2s linear infinite pace}@keyframes pace{0%,to{left:50%}25%{left:82%}75%{left:18%}}.crab{z-index:2;filter:drop-shadow(0 0 6px #0b0e0b)}.crowd{opacity:0;grid-template-rows:repeat(25,1fr);grid-template-columns:repeat(40,1fr);transition:opacity .4s;display:grid;position:absolute;inset:4%}.crowd i{background:var(--crab) center / contain no-repeat;opacity:0;margin:1px}.game-stage:is([data-step="6"],[data-step="7"]) .crowd{opacity:.85}.game-stage:is([data-step="6"],[data-step="7"]) .crowd i{animation:.3s ease-out both pop-in;animation-delay:var(--d)}.game-stage[data-step="7"] .crowd i{animation:10ms both pop-in,1.6s linear infinite spin}@keyframes pop-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes walk{0%{left:50%}50%{left:112%}50.01%{left:-12%}to{left:50%}}.keys-pad{z-index:3;opacity:0;gap:6px;transition:opacity .3s;display:flex;position:absolute;bottom:14px;right:14px}.game-stage:is([data-step="4"],[data-step="5"],[data-step="6"],[data-step="7"]) .keys-pad{opacity:1}.key{border:1px solid var(--line);color:var(--muted);font:inherit;background:#0b0e0bcc;padding:4px 10px;font-size:14px}.game-stage[data-step="4"] .key-left{display:none}.game-stage[data-step="4"] .key-right{border-color:var(--accent);color:var(--accent);background:#1b2a1b;box-shadow:0 0 18px #c0fa7333}.game-stage:is([data-step="5"],[data-step="6"],[data-step="7"]) .key-right{animation:3.2s step-end infinite hold-right}.game-stage:is([data-step="5"],[data-step="6"],[data-step="7"]) .key-left{animation:3.2s step-end infinite hold-left}@keyframes hold-right{0%,75%{border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px #c0fa7333}25%{border-color:var(--line);color:var(--muted);box-shadow:none}}@keyframes hold-left{0%,75%{border-color:var(--line);color:var(--muted);box-shadow:none}25%{border-color:var(--accent);color:var(--accent);box-shadow:0 0 18px #c0fa7333}}.step-caption{border-top:1px solid var(--line);min-height:82px;color:var(--muted);padding:14px 16px;font-size:12px;line-height:1.8}.step-caption code,.step-caption kbd{color:var(--accent);font:inherit}.step-caption kbd{border:1px solid var(--line);padding:0 5px}@media (width<=900px){.hello-grid{grid-template-columns:1fr}.hello .game-window{order:-1}.hello .code-window pre{min-height:0}}@media (width<=650px){.hello-demo{margin-top:30px}}@media (prefers-reduced-motion:reduce){.ln.new,.game-stage .crab,.game-stage .crowd i,.game-stage .key{animation:none!important}}
