:root{--paper: #f4f6fa;--paper-line: rgba(40, 70, 140, .06);--surface: #ffffff;--ink: #1b2340;--ink-soft: #5d6684;--line: #d9deea;--accent: #1f6fd1;--accent-ink: #ffffff;--marker: #ffd23f;--danger: #c92a2a;--board-bg: #e6e9f1;--board-empty: #ffffff;--board-highlight: #b7c0d8;--board-grid: rgba(27, 35, 64, .13);--board-ink: #1b2340;--board-ink-soft: #9aa1b8;--thumb-empty: #e9ecf3;--font-display: "Pixelify Sans", "Courier New", monospace;--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--radius: 10px;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--paper: #12162a;--paper-line: rgba(140, 170, 255, .05);--surface: #1b2038;--ink: #e8ebf7;--ink-soft: #a0a8c6;--line: #2f3654;--accent: #5b9cf0;--accent-ink: #0d1226;--marker: #f5c518;--danger: #ff6b6b;--board-bg: #0e1222;--board-empty: #262c48;--board-highlight: #4a5480;--board-grid: rgba(200, 210, 255, .12);--board-ink: #f2f4ff;--board-ink-soft: #7880a3;--thumb-empty: #262c48;color-scheme:dark}}:root[data-theme=dark]{--paper: #12162a;--paper-line: rgba(140, 170, 255, .05);--surface: #1b2038;--ink: #e8ebf7;--ink-soft: #a0a8c6;--line: #2f3654;--accent: #5b9cf0;--accent-ink: #0d1226;--marker: #f5c518;--danger: #ff6b6b;--board-bg: #0e1222;--board-empty: #262c48;--board-highlight: #4a5480;--board-grid: rgba(200, 210, 255, .12);--board-ink: #f2f4ff;--board-ink-soft: #7880a3;--thumb-empty: #262c48;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:16px/1.55 var(--font-body);color:var(--ink);background-color:var(--paper);background-image:linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);background-size:24px 24px}img,canvas{max-width:100%}[hidden]{display:none!important}a{color:var(--accent)}h1,h2,.h2{font-family:var(--font-display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0;letter-spacing:.01em}h1{font-size:clamp(2rem,5vw,3.25rem)}h2,.h2{font-size:1.6rem}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.muted{color:var(--ink-soft)}.small{font-size:.875rem}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.wrap{max-width:1120px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--radius);font:600 1rem var(--font-body);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:transform .08s,background .15s}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px color-mix(in srgb,var(--accent) 60%,#000)}.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{border-color:var(--ink-soft)}.btn-quiet{background:var(--surface);color:var(--ink);border-color:var(--line)}.btn-small{min-height:36px;padding:0 14px;font-size:.875rem}.btn.danger{color:var(--danger);border-color:var(--danger)}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}.logo{display:inline-flex;align-items:center;gap:10px;font:700 1.35rem var(--font-display);color:var(--ink);text-decoration:none}.logo-mark{width:22px;height:22px;border-radius:3px;background:linear-gradient(90deg,#e63946 50%,#ffd23f 50%) top / 100% 50% no-repeat,linear-gradient(90deg,#1f6fd1 50%,#3f9b4f 50%) bottom / 100% 50% no-repeat}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding-block:32px 56px}.hero-copy{display:grid;gap:20px;min-width:0}.eyebrow{margin:0;font:600 .8rem var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}.hero h1{max-width:16ch}.hero h1:after{content:""}.lede{margin:0;font-size:1.125rem;max-width:52ch;color:var(--ink-soft)}.drop{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:18px;border:2px dashed var(--line);border-radius:14px;background:var(--surface)}.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.drop-note{color:var(--ink-soft);font-size:.9rem}.error{margin:0;color:var(--danger);min-height:1.4em}.hero-art{margin:0;display:grid;gap:10px;min-width:0}.hero-art canvas{width:100%;height:auto;image-rendering:pixelated;border-radius:6px;box-shadow:0 0 0 1px var(--line),10px 10px color-mix(in srgb,var(--marker) 70%,transparent)}.hero-art figcaption{font:600 .78rem var(--font-mono);color:var(--ink-soft);letter-spacing:.04em}.section{padding-block:28px;display:grid;gap:20px}.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.section-head p{margin:0}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.card{display:grid;gap:6px;align-content:start;text-align:left;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font:inherit;color:inherit;cursor:pointer;min-width:0}button.card:hover,.card-open:hover{border-color:var(--ink-soft)}.card-saved{cursor:default}.card-open{all:unset;cursor:pointer;display:block;border-radius:6px}.thumb{width:100%;aspect-ratio:1;object-fit:contain;image-rendering:pixelated;border-radius:6px;background:var(--thumb-empty);display:block}.card-title{font-weight:700;margin-top:6px}.card-meta{font:600 .78rem var(--font-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums}.card-actions{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}.bar{height:6px;border-radius:3px;background:var(--thumb-empty);overflow:hidden}.bar span{display:block;height:100%;background:var(--accent)}.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}.steps li:before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;margin-bottom:10px;background:var(--marker);color:#1b2340;font:700 1rem var(--font-mono);border-radius:4px}.steps strong{display:block}.site-footer{padding-block:32px 48px;font-size:.9rem}.create{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;padding-block:8px 48px}.preview-pane{display:grid;gap:10px;position:sticky;top:16px;min-width:0}.preview-frame{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;place-items:center}#preview{width:100%;height:auto;max-height:70vh;object-fit:contain;image-rendering:pixelated}.controls{display:grid;gap:18px;min-width:0}.field{display:grid;gap:8px;border:0;padding:0;margin:0}.field>span,.field legend{font-weight:600;display:flex;justify-content:space-between;gap:8px;padding:0}.field output{font:600 .85rem var(--font-mono);color:var(--ink-soft)}input[type=text]{min-height:44px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit}input[type=range]{width:100%;accent-color:var(--accent)}.segmented{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--radius);overflow:hidden;width:max-content}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented label{padding:8px 18px;cursor:pointer;font-weight:600}.segmented input:checked+label{background:var(--accent);color:var(--accent-ink)}.segmented input:focus-visible+label{outline:3px solid var(--accent);outline-offset:-3px}body.is-playing{overflow:hidden;background-image:none}body.is-playing #app{height:100%}.play{height:100%;display:flex;flex-direction:column}.play-bar{display:flex;align-items:center;gap:10px;padding-block:8px;padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));background:var(--surface);border-bottom:1px solid var(--line)}.play-title{display:grid;min-width:0;flex:1;line-height:1.25}.play-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-title span{font:600 .75rem var(--font-mono);font-variant-numeric:tabular-nums}.tools{display:flex;gap:6px}.icon-btn{min-width:40px;height:40px;padding:0 10px;display:inline-grid;place-items:center;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:600 .9rem var(--font-body);text-decoration:none;cursor:pointer}.icon-btn[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}.progress{height:4px;background:var(--line)}.progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}.board-wrap{position:relative;flex:1;min-height:0}#board{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;display:block}.board-tip{position:absolute;left:50%;bottom:12px;transform:translate(-50%);margin:0;width:max-content;max-width:calc(100% - 32px);padding:8px 14px;border-radius:8px;background:var(--ink);color:var(--surface);font-size:.85rem;text-align:center;pointer-events:none}.palette{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px));padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px));background:var(--surface);border-top:1px solid var(--line)}.swatch{position:relative;flex:0 0 auto;width:56px;height:64px;border-radius:10px;overflow:hidden;border:2px solid var(--line);background:var(--surface);cursor:pointer;scroll-snap-align:center;display:grid;place-items:center;padding:0;font:inherit}.sw-fill{position:absolute;left:0;right:0;bottom:0;background:var(--sw);height:0;transition:height .2s}.swatch:before{content:"";position:absolute;inset:0 0 auto;height:18px;background:var(--sw)}.sw-num{position:relative;font:700 1.05rem var(--font-mono);color:var(--ink);margin-top:8px}.sw-left{position:absolute;bottom:3px;left:0;right:0;text-align:center;font:600 .65rem var(--font-mono);color:var(--ink-soft)}.swatch.is-selected{border-color:var(--ink);box-shadow:0 0 0 2px var(--marker);transform:translateY(-2px)}.swatch.is-done{opacity:.55}.swatch.is-done[data-tone=dark] .sw-num,.swatch.is-done[data-tone=dark] .sw-left{color:#fff}.swatch.is-done[data-tone=light] .sw-num,.swatch.is-done[data-tone=light] .sw-left{color:#1b2340}.done-layer{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 45%,transparent);display:grid;place-items:center;padding:16px;z-index:20}.done-card{background:var(--surface);border-radius:16px;padding:24px;display:grid;gap:14px;width:min(520px,100%);max-height:100%;overflow:auto}.done-card p{margin:0}#done-img{width:100%;image-rendering:pixelated;border-radius:6px;border:1px solid var(--line)}@media (max-width: 820px){.hero,.create{grid-template-columns:1fr;gap:28px}.hero{padding-block:8px 32px}.hero-art{order:-1}.preview-pane{position:static}.steps{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}@media (max-width: 480px){.tools #zoom-in,.tools #zoom-out{display:none}.play-title strong{font-size:.9rem}}@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}