*{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}}#bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:6px 16px 14px;display:flex}.mode{background:var(--surface-card);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:3px;display:flex}.mode-opt{min-width:84px;font-family:var(--font-display);color:var(--text-secondary);border-radius:999px;padding:8px 0;font-size:.9rem;font-weight:500;transition:background .15s,color .15s}.mode[aria-pressed=false] [data-mode=shade]{background:var(--text-primary);color:var(--surface-card);font-weight:700}.mode[aria-pressed=true] [data-mode=cross]{background:var(--brand-yellow);color:var(--brand-yellow-fg);font-weight:700}.round-btn{color:var(--text-secondary);background:var(--surface-card);border:1px solid var(--border);cursor:pointer;border-radius:999px;padding:9px 16px;font-size:.9rem;font-weight:500}.round-btn:hover{color:var(--text-primary);border-color:var(--border-strong)}.hint{background:var(--surface-card);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:8px;width:calc(100% - 32px);max-width:520px;margin:0 auto 6px;padding:12px 40px 12px 14px;font-size:.9rem;line-height:1.45;position:relative}.hint p{margin:0}.hint a{color:var(--teal);margin-top:6px;font-weight:700;text-decoration:none;display:inline-block}.hint a:hover{text-decoration:underline}.hint-close{width:28px;height:28px;color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:6px;font-size:1.1rem;line-height:1;position:absolute;top:6px;right:6px}.hint-close:hover{color:var(--text-primary);background:var(--surface-muted)}@media (width<=400px){.mode-opt{min-width:64px}.round-btn{padding:9px 12px}}.section-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);margin:22px 0 8px;font-size:.7rem}.choose--compact .choice{padding:9px 18px;font-size:.9rem}.note{color:var(--text-secondary);margin:14px 0 0;font-size:.85rem;line-height:1.5}.level-grid{grid-template-columns:repeat(5,1fr);gap:6px;margin:4px 0 18px;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);border-style:dashed;border-color:var(--border-strong);cursor:not-allowed;background:0 0}.lvl.locked:hover{border-color:var(--border-strong)}.lock-note{margin:-8px 0 14px}.lvl.next{border:2px solid var(--text-primary)}.lvl.current:before{content:"";background:var(--teal);border-radius:50%;width:5px;height:5px;margin-left:-2.5px;position:absolute;bottom:5px;left:50%}.cta--danger{background:var(--error);color:var(--surface-card)}@media (width>=640px){#levels{max-width:560px}.level-grid{grid-template-columns:repeat(10,1fr)}}