:root{--bg: #faf9f7;--fg: #1b1a18;--muted: #77726c;--line: #d6d2cc;--rule: #8d8781;--cell-bg: #fff;--ink: #24221f;--accent: #2f6f4e}@media(prefers-color-scheme:dark){:root{--bg: #16181a;--fg: #eceae7;--muted: #8f9296;--line: #33383d;--rule: #5d646b;--cell-bg: #1e2124;--ink: #e8e6e3;--accent: #63b98a}}*{box-sizing:border-box}body{margin:0;padding:1.25rem 1rem 3rem;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;display:flex;justify-content:center}#app{width:100%;max-width:44rem}header{text-align:center;margin-bottom:.75rem}h1{font-size:1.35rem;margin:0;letter-spacing:-.01em}.status{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}.toolbar{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem}button{font:inherit;font-size:.9rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:7px;background:var(--cell-bg);color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem}button:hover:not(:disabled){border-color:var(--rule)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.swatch{width:.85em;height:.85em;border:1px solid var(--rule);border-radius:2px;display:inline-grid;place-items:center;font-size:.7em;line-height:1}.swatch.fill{background:var(--ink)}.board{--cell: clamp(15px, calc((100vw - 6.5rem) / var(--n)), 30px);display:grid;grid-template-columns:auto auto;justify-content:center;gap:.3rem}.corner{grid-area:1 / 1}.col-clues{grid-area:1 / 2;display:grid;grid-template-columns:repeat(var(--w),var(--cell))}.row-clues{grid-area:2 / 1;display:grid;grid-template-rows:repeat(var(--h),var(--cell))}.cells{grid-area:2 / 2;display:grid;grid-template-columns:repeat(var(--w),var(--cell));touch-action:none;outline:none}.clue{display:flex;font-size:clamp(9px,calc(var(--cell) * .46),13px);font-variant-numeric:tabular-nums;color:var(--fg);line-height:1.15;transition:opacity .15s,color .15s}.clue.col{flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:.2em}.clue.row{align-items:center;justify-content:flex-end;gap:.4em;padding-right:.3em}.clue span{transition:opacity .15s}.clue span.done{opacity:.28}.clue.done{opacity:.3}.cell{width:var(--cell);height:var(--cell);background:var(--cell-bg);border-top:1px solid var(--line);border-left:1px solid var(--line);border-right:0;border-bottom:0;display:grid;place-items:center;color:var(--muted);font-size:calc(var(--cell) * .6);line-height:1;user-select:none}.cell.rule-left{border-left-color:var(--rule)}.cell.rule-top{border-top-color:var(--rule)}.cell.rule-right{border-right:1px solid var(--rule)}.cell.rule-bottom{border-bottom:1px solid var(--rule)}.cell.filled{background:var(--ink)}.cells .cell{position:relative}.board.celebrating .cell:not(.filled){animation:cellwave var(--wave-dur, .46s) ease-in-out both;animation-delay:calc(var(--wave) * var(--wave-step, 45ms))}.board.celebrating.reduced .cell:not(.filled){animation-name:cellwave-soft}@keyframes cellwave{0%,to{transform:scale(1);z-index:0}40%{transform:scale(1.16);z-index:1}}@keyframes cellwave-soft{0%,to{opacity:1}50%{opacity:.55}}.cell.marked:after{content:"✕"}.cell.focused{box-shadow:inset 0 0 0 2px var(--accent)}.board-actions{display:flex;gap:.5rem;justify-content:center;margin-top:1.25rem}#restart{color:var(--muted);font-size:.82rem;padding:.35rem .9rem}#restart:hover:not(:disabled){color:var(--fg)}footer{margin-top:1.5rem;text-align:center;color:var(--muted);font-size:.8rem}a{color:inherit}.empty{text-align:center;color:var(--muted);padding:4rem 0}.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:1rem;animation:fade .25s ease-out}.card{background:var(--cell-bg);border:1px solid var(--line);border-radius:14px;padding:1.5rem;text-align:center;max-width:22rem}.card h2{margin:1rem 0 .25rem;text-transform:capitalize;font-size:1.4rem}.meta{margin:0;color:var(--muted);font-variant-numeric:tabular-nums}.credit{margin:1rem 0 0;color:var(--muted);font-size:.75rem}.picture{display:grid;grid-template-columns:repeat(var(--w),1fr);width:min(15rem,60vw);margin:0 auto;aspect-ratio:var(--w) / var(--h)}.px{background:transparent}.px.on{background:var(--ink);animation:pop .32s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(var(--d) * 1ms)}.actions{display:flex;gap:.5rem;justify-content:center;margin-top:1.2rem}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{transform:scale(0)}}@media(prefers-reduced-motion:reduce){.px.on,.overlay{animation:none}}