:root{--px-black:#000;--px-navy:#1d2b53;--px-plum:#7e2553;--px-pine:#008751;--px-brown:#ab5236;--px-stone:#5f574f;--px-silver:#c2c3c7;--px-cream:#fff1e8;--px-red:#ff004d;--px-orange:#ffa300;--px-yellow:#ffec27;--px-green:#00e436;--px-blue:#29adff;--px-lavender:#83769c;--px-pink:#ff77a8;--px-peach:#fca;--px-white:#fff;--fox-bg:var(--px-cream);--fox-surface:var(--px-white);--fox-bevel-hi:var(--px-white);--fox-bevel-lo:var(--px-silver);--fox-line:var(--px-stone);--fox-text:var(--px-black);--fox-text-2:var(--px-stone);--fox-placeholder:var(--px-lavender);--fox-link:var(--px-brown);--fox-font-pixel:"FoxPixel", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--fox-font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", sans-serif;--fox-font-mono:ui-monospace, "SF Mono", Consolas, monospace;--fox-step-fast:80ms steps(2);--fox-step:.16s steps(4);--fox-mascot:url(/assets/sprites/mascot.png);--fox-logo:url(/assets/sprites/logo.png)}.fox-mascot{--f:58px;width:var(--f);height:var(--f);background:var(--fox-mascot) 0 0 / calc(var(--f) * 4) calc(var(--f) * 6) no-repeat;image-rendering:pixelated;flex:none;display:block}.fox-mascot-2x{--f:116px}.fox-m-idle{background-position-y:0;animation:3s step-end infinite fox-blink-frame}.fox-m-record{background-position-y:calc(var(--f) * -1);animation:.8s steps(2,end) infinite fox-frames-2}.fox-m-play{background-position-y:calc(var(--f) * -2);animation:.6s steps(4,end) infinite fox-frames-4}.fox-m-success{background-position-y:calc(var(--f) * -3)}.fox-m-error{background-position-y:calc(var(--f) * -4)}.fox-m-sleep{background-position-y:calc(var(--f) * -5);animation:1.6s steps(2,end) infinite fox-frames-2}@keyframes fox-frames-2{0%{background-position-x:0}to{background-position-x:calc(var(--f) * -2)}}@keyframes fox-frames-4{0%{background-position-x:0}to{background-position-x:calc(var(--f) * -4)}}@keyframes fox-blink-frame{0%{background-position-x:0}92%{background-position-x:calc(var(--f) * -1)}to{background-position-x:calc(var(--f) * -1)}}
@font-face{font-family:FoxPixel;src:url(/assets/fonts/tiny5.woff2)format("woff2");font-display:swap}:root{--web-night:#122965;--web-max:1120px}*,:before,:after{box-sizing:border-box}html{font-synthesis:none;-webkit-text-size-adjust:100%}body{background:var(--fox-bg);color:var(--fox-text);font:17px/1.6 var(--fox-font-ui);margin:0}img{max-width:100%;display:block}a{color:var(--fox-link);text-underline-offset:3px}a:hover{color:var(--px-black)}:focus-visible{outline:2px solid var(--px-orange);outline-offset:2px}code{font:.9em var(--fox-font-mono);background:var(--fox-surface);border:2px solid var(--px-silver);padding:0 4px}h1,h2,h3,.pixel{font-family:var(--fox-font-pixel);letter-spacing:.5px;margin:0;font-weight:400;line-height:1.15}h1{text-wrap:balance;font-size:clamp(32px,6vw,48px)}h2{font-size:clamp(24px,4vw,32px)}h3{font-size:20px}.label{font:14px/1 var(--fox-font-pixel);letter-spacing:1px;text-transform:uppercase;color:var(--fox-text-2)}.container{width:100%;max-width:var(--web-max);margin:0 auto;padding:0 16px}.section{padding:72px 0}.section-head{gap:8px;max-width:640px;margin-bottom:32px;display:grid}.section-head p{color:var(--fox-text-2);margin:0}.px-icon{shape-rendering:crispedges;flex:none;display:block}p .px-icon{vertical-align:-2px;display:inline-block}.raised{background:var(--fox-surface);border:2px solid var(--px-black);box-shadow:inset 2px 2px 0 var(--fox-bevel-hi), inset -2px -2px 0 var(--fox-bevel-lo), 4px 4px 0 var(--px-black)}.inset{background:var(--fox-surface);border:2px solid var(--px-black);box-shadow:inset 2px 2px 0 var(--fox-bevel-lo)}.btn{--fill:var(--px-silver);--hi:var(--px-white);--lo:var(--px-stone);min-height:48px;font:16px/1 var(--fox-font-pixel);color:var(--px-black);white-space:nowrap;background:var(--fill);border:2px solid var(--px-black);box-shadow:inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 4px 4px 0 var(--px-black);cursor:pointer;transition:transform var(--fox-step-fast), box-shadow var(--fox-step-fast);justify-content:center;align-items:center;gap:8px;padding:0 20px;text-decoration:none;display:inline-flex}.btn:hover{color:var(--px-black);outline:2px solid var(--px-black);outline-offset:-6px}.btn:active{box-shadow:inset 2px 2px 0 var(--lo), 2px 2px 0 var(--px-black);transform:translate(2px,2px)}.btn-primary{--fill:var(--px-orange);--hi:var(--px-peach);--lo:var(--px-brown)}.btn-blue{--fill:var(--px-blue);--hi:var(--px-white);--lo:var(--px-navy)}.btn-red{--fill:var(--px-red);--hi:var(--px-pink);--lo:var(--px-plum)}.btn-small{min-height:36px;box-shadow:inset 2px 2px 0 var(--hi), inset -2px -2px 0 var(--lo), 2px 2px 0 var(--px-black);padding:0 12px;font-size:14px}.btn.is-disabled{--fill:var(--fox-bg);--hi:var(--fox-bg);--lo:var(--fox-bg);color:var(--fox-text-2);box-shadow:none;cursor:default;border-style:dashed;outline:none;transform:none}.keys{vertical-align:middle;gap:4px;display:inline-flex}kbd{min-width:28px;font:14px/1.4 var(--fox-font-pixel);text-align:center;color:var(--px-black);background:var(--px-white);border:2px solid var(--px-black);box-shadow:inset -2px -2px 0 var(--px-silver), 2px 2px 0 var(--px-black);padding:2px 6px;display:inline-block}.navbar{border-bottom:2px solid var(--px-black);background:var(--fox-bg);z-index:2;position:relative}.nav-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding-top:12px;padding-bottom:12px;display:flex}.brand{font:20px/1 var(--fox-font-pixel);color:var(--px-black);align-items:center;gap:10px;text-decoration:none;display:flex}.brand-logo{background:var(--fox-logo) center / 32px 32px no-repeat;width:32px;height:32px;image-rendering:pixelated}.nav-links{font:16px/1 var(--fox-font-pixel);flex-wrap:wrap;align-items:center;gap:4px 20px;display:flex}.nav-links a:not(.btn){color:var(--px-black);border-bottom:2px solid #0000;padding:6px 0;text-decoration:none}.nav-links a:not(.btn):hover{border-bottom-color:var(--px-orange)}.nav-links .narrow{display:none}@media (max-width:600px){.nav-inner{flex-wrap:nowrap}.nav-links .wide{display:none}.nav-links .narrow{display:inline}}.footer{border-top:2px solid var(--px-black);color:var(--fox-text-2);padding:24px 0;font-size:15px}.footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;display:flex}.footer-inner p{margin:0}.footer-links{flex-wrap:wrap;gap:20px;display:flex}.hero{background:var(--web-night);border-bottom:2px solid var(--px-black);color:var(--px-cream);overflow:hidden}.hero-inner{max-width:1400px;margin:0 auto;position:relative}.hero-art{width:100%;height:auto;image-rendering:pixelated}.hero-copy{width:46%;padding:24px 16px 24px max(16px, calc((100vw - var(--web-max)) / 2 + 16px));flex-direction:column;justify-content:center;gap:20px;display:flex;position:absolute;top:0;bottom:0;left:0}.hero-copy p{max-width:34ch;color:var(--px-cream);margin:0;font-size:18px}.hero-copy .label{color:var(--px-peach)}.hero-actions{flex-wrap:wrap;gap:12px;display:flex}.hero .btn.is-disabled{color:var(--px-cream);border-color:var(--px-cream);background:0 0}.hero-soon{color:var(--px-silver)!important}@media (max-width:900px){.hero-copy{width:auto;padding:40px 16px 8px;position:static}.hero-art{width:200%;max-width:none;margin-left:-100%}}.grid-2{align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))!important}.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px;display:grid}.card{align-content:start;gap:8px;padding:20px;display:grid}.card h3{align-items:center;gap:10px;display:flex}.card p{color:var(--fox-text-2);margin:0}.chip{width:40px;height:40px;color:var(--px-black);border:2px solid var(--px-black);background:var(--chip,var(--px-orange));flex:none;justify-content:center;align-items:center;display:inline-flex}.card-title{font-size:20px}.demo{grid-template-columns:minmax(0,3fr) minmax(220px,1fr);align-items:center;gap:32px;display:grid}.demo-shot{width:100%;height:auto}.steps{gap:20px;margin:0;padding:0;list-style:none;display:grid}.steps li{align-items:center;gap:16px;display:flex}.steps li>div{gap:4px;display:grid}.step-title{font-size:24px}@media (max-width:800px){.demo{grid-template-columns:1fr}.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.steps li{flex-direction:column;align-items:start;gap:4px;font-size:15px}.step-title{font-size:20px}}.features{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.features li{font:16px/1.3 var(--fox-font-pixel);align-items:center;gap:12px;padding:14px 16px;display:flex}.also{color:var(--fox-text-2);margin:16px 0 0}.callout{background:var(--px-peach);color:var(--px-black);align-items:center;gap:20px;padding:20px 24px;text-decoration:none;display:flex}.callout:hover{color:var(--px-black);outline:2px solid var(--px-black);outline-offset:-8px}.callout>div{gap:6px;display:grid}.callout-link{font:16px/1 var(--fox-font-pixel);color:var(--fox-link)}.limits{color:var(--fox-text-2);gap:8px;margin:0;padding:0;list-style:none;display:grid}.limits li{align-items:center;gap:10px;display:flex}.page-head{gap:12px;padding:56px 0 32px;display:grid}.page-head p{max-width:60ch;color:var(--fox-text-2);margin:0;font-size:18px}.prose{overflow-wrap:anywhere;max-width:760px;margin-bottom:72px;padding:32px}.prose h1{display:none}.prose h2{margin:32px 0 8px;font-size:24px}.prose h3{margin:20px 0 4px;font-size:18px}.prose>:first-child{margin-top:0}.prose hr{border:0;border-top:2px solid var(--px-silver);margin:32px 0}.prose li+li{margin-top:4px}.moved-art{width:460px;max-width:100%;height:auto;image-rendering:pixelated;border:2px solid var(--px-black);box-shadow:4px 4px 0 var(--px-black);background:var(--web-night);margin-bottom:12px}@media (max-width:520px){.moved-art{width:345px}}.howto{counter-reset:howto;gap:16px;max-width:760px;margin:0 0 16px;padding:0;list-style:none;display:grid}.howto li{counter-increment:howto;grid-template-columns:48px 1fr;gap:16px;padding:20px;display:grid}.howto li:before{content:counter(howto);width:48px;height:48px;font:24px/1 var(--fox-font-pixel);background:var(--px-orange);border:2px solid var(--px-black);justify-content:center;align-items:center;display:flex}.howto h2{margin-bottom:8px;font-size:20px}.howto-shot{border:2px solid var(--px-black);width:360px;max-width:100%;height:auto;margin-top:12px}.howto-after{color:var(--fox-text-2);margin:0 0 32px}.howto p{color:var(--fox-text-2);margin:0}.faq{gap:12px;max-width:760px;margin-bottom:72px;display:grid}.faq details{padding:14px 20px}.faq summary{font:16px/1.4 var(--fox-font-pixel);cursor:pointer}.faq details p{color:var(--fox-text-2);margin:8px 0 0}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.strip{font:16px/1 var(--fox-font-pixel);flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;padding:0;list-style:none;display:flex}.strip li{align-items:center;gap:6px;display:flex}.strip li+li:before{content:"→";color:var(--fox-text-2);margin-right:6px}.tldr{flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none;display:flex}.tldr li{font:16px/1 var(--fox-font-pixel);align-items:center;gap:8px;padding:10px 14px;display:flex}.playground{margin-bottom:72px}.pg-buttons{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.pg-count{background:var(--px-white);border:2px solid var(--px-black);min-width:2ch;padding:2px 4px;font-size:14px}.pg-tiles{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;display:grid}.pg-tile{aspect-ratio:1;font:24px/1 var(--fox-font-pixel);color:var(--px-black);cursor:pointer;background:var(--px-white);border:2px solid var(--px-black);box-shadow:inset -2px -2px 0 var(--px-silver), 2px 2px 0 var(--px-black)}.pg-tile.is-done{background:var(--px-green);box-shadow:inset -2px -2px 0 var(--px-pine), 2px 2px 0 var(--px-black)}.pg-feed{justify-items:start}.pg-fox{cursor:pointer;padding:12px}.pg-fox:active{transform:translate(2px,2px)}.pg-reset{grid-column:1/-1}