*{box-sizing:border-box;margin:0;padding:0}:root{--font-display:"neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;--font-body:"neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;--font-mono:"source-code-pro", ui-monospace, Menlo, monospace;--brand-yellow:#fed538;--brand-yellow-fg:#1a1a1a;--surface:#f7f7f5;--surface-card:#fff;--surface-muted:#f0eee8;--text-primary:#1a1a1a;--text-secondary:#6b6b6b;--text-disabled:#c4c4be;--border:#ebebeb;--border-strong:#d0cec8;--teal:#169ab6;--error:#b3261e;--backdrop:#f7f7f5d1}.dark{--surface:#0b0e14;--surface-card:#12151c;--surface-muted:#1f2330;--text-primary:#f2f2f0;--text-secondary:#9ca0a8;--text-disabled:#5b5f68;--border:#23262e;--border-strong:#3a3d46;--teal:#2dbfdd;--error:#ff6b5e;--backdrop:#0b0e14d1}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html.dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{background:var(--surface);width:100%;height:100%;overflow:hidden}body{font-family:var(--font-body);color:var(--text-primary);-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);flex-direction:column;display:flex}canvas{touch-action:none;display:block}button{font:inherit;color:inherit}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--teal);outline-offset:2px}#hud{border-bottom:1px solid var(--border);grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 16px;display:grid}.home{font-family:var(--font-display);color:var(--text-primary);justify-self:start;align-items:center;gap:8px;font-size:1rem;font-weight:700;text-decoration:none;display:inline-flex}.home svg{flex-shrink:0;width:22px;height:22px}.hud-stats{gap:24px;display:flex}.hud-panel{text-align:center;min-width:56px}.hud-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);font-size:.65rem}.hud-value{font-family:var(--font-display);font-variant-numeric:tabular-nums;text-transform:capitalize;font-size:1.1rem;font-weight:700}.hud-actions{justify-self:end;align-items:center;gap:8px;display:flex}.icon-btn{width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{color:var(--text-primary);background:var(--surface-muted)}.icon-btn svg{width:16px;height:16px}.icon-btn .moon,.dark .icon-btn .sun{display:none}.dark .icon-btn .moon{display:block}.ghost-btn{background:var(--surface-card);border:1px solid var(--border-strong);cursor:pointer;border-radius:8px;padding:7px 14px;font-size:.85rem;font-weight:500}.ghost-btn:hover{border-color:var(--text-primary)}#stage{flex:1;min-height:0;position:relative;overflow:hidden}#stage canvas{position:absolute;inset:0}#overlay{z-index:10;background:var(--backdrop);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:20px;display:flex;position:fixed;inset:0;overflow-y:auto}.card{text-align:center;background:var(--surface-card);border:1px solid var(--border);border-radius:12px;width:100%;max-width:420px;margin:auto;padding:32px 28px 28px}.eyebrow{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:8px;font-size:.7rem}.card h1{font-family:var(--font-display);letter-spacing:-.01em;margin-bottom:8px;font-size:2rem;font-weight:700}.card .lede{color:var(--text-secondary);margin-bottom:18px;font-size:.95rem;line-height:1.55}.rules{color:var(--text-secondary);text-align:left;background:var(--surface-muted);border-radius:8px;margin-bottom:20px;padding:14px 16px;font-size:.85rem;line-height:1.7}.rules b{color:var(--text-primary)}.choose{flex-direction:column;gap:8px;display:flex}.cta,.choice{width:100%;font-family:var(--font-display);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:12px 18px;font-size:1rem;font-weight:700;display:flex}.cta{background:var(--brand-yellow);color:var(--brand-yellow-fg);border:none;justify-content:center;margin-bottom:8px}.cta:hover{opacity:.88}.choice{background:var(--surface-card);border:1px solid var(--border-strong);text-transform:capitalize}.choice:hover{border-color:var(--text-primary)}.choice .best{font-family:var(--font-mono);color:var(--text-secondary);text-transform:none;font-size:.75rem;font-weight:400}.text-link{color:var(--text-secondary);text-underline-offset:3px;cursor:pointer;background:0 0;border:none;margin:16px auto 0;font-size:.9rem;text-decoration:underline;display:block}.text-link:hover{color:var(--text-primary)}#iosHint{color:var(--text-secondary);margin-top:14px;font-size:.8rem}@media (width<=520px){.home span{display:none}.hud-stats{gap:14px}}#soundBtn .sound-off,#soundBtn[aria-pressed=false] .sound-on{display:none}#soundBtn[aria-pressed=false] .sound-off{display:block}.lab-heading{color:var(--text-secondary);text-align:center;margin:18px 0 0;font-size:.85rem}#levels{max-height:calc(100dvh - 120px);overflow-y:auto}.chapter{margin:0 0 18px}.chapter-head{justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:.85rem;display:flex}.chapter-head b{font-family:var(--font-display);font-size:.95rem}.chapter-head span{color:var(--text-secondary)}.level-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.lvl{aspect-ratio:1;font-family:var(--font-display);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-strong);cursor:pointer;border-radius:8px;font-size:.95rem;font-weight:700;position:relative}.lvl:hover{border-color:var(--text-primary)}.lvl.solved{background:var(--surface-muted);color:var(--text-secondary);border-color:var(--border)}.lvl.solved:after{content:"✓";color:var(--teal);font-size:.65rem;position:absolute;top:2px;right:5px}.lvl.clean{background:color-mix(in srgb, var(--brand-yellow) 35%, var(--surface-card));color:var(--text-primary)}.lvl.clean:after{content:"★";color:var(--text-primary)}.lvl.locked{color:var(--text-disabled);cursor:not-allowed;background:0 0;border-style:dashed}.lvl.locked:hover{border-color:var(--border-strong)}.lvl.next{border:2px solid var(--text-primary)}.lock-note{color:var(--text-secondary);margin:0 0 12px;font-size:.85rem}@media (width>=640px){#levels{max-width:560px}.level-grid{grid-template-columns:repeat(10,1fr)}}@media (width<=420px){#movesPanel{display:none}}