:root{--page:#f6f6f8;--ink:#1b1b22;--muted:#5d5d6b;--line:#c9c9d3;--accent:#3b5bdb;--on-accent:#fff}@media (prefers-color-scheme:dark){:root{--page:#16161c;--ink:#ececf2;--muted:#a0a0b0;--line:#3a3a48;--accent:#8ea2ff;--on-accent:#16161c}}*{box-sizing:border-box}body{background:var(--page);color:var(--ink);margin:0;font:16px/1.4 system-ui,sans-serif}main{flex-direction:column;gap:24px;max-width:640px;margin:0 auto;padding:16px;display:flex}h1,h2{margin:0;font-size:1rem;font-weight:600}label{margin-bottom:6px;font-weight:600;display:block}input[type=text]{border:1px solid var(--line);width:100%;color:inherit;font:inherit;background:0 0;border-radius:6px;padding:10px 12px}#name{text-transform:uppercase}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.hint{color:var(--muted);margin:6px 0 0;font-size:.875rem}.size-label{color:var(--muted);font-variant-numeric:tabular-nums;margin:6px 0}.stage{margin-top:12px;line-height:0}canvas{border:1px solid var(--line);border-radius:4px;max-width:100%;height:auto;display:block}#wordmark{image-rendering:pixelated}.swatches{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:8px;display:grid}.swatch{border:2px solid var(--line);cursor:pointer;border-radius:6px;height:48px;font:700 1.25rem/1 system-ui,sans-serif}.swatch[aria-pressed=true]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}#download{background:var(--accent);color:var(--on-accent);font:inherit;cursor:pointer;border:0;border-radius:6px;padding:14px 16px;font-weight:700}#download:disabled{opacity:.4;cursor:not-allowed}[hidden]{display:none!important}