:root{--bg: #1a1a1d;--tile: #3a3a3f;--tile-empty: rgba(255, 255, 255, .055);--border: #5d5d65;--text: #f4f4f5;--correct: #3aa394;--present: #d3ad69;--absent: #312a2c;--key: #5a5a62;--key-shadow: #3c3c42;--muted: #b4b4bb;--border-strong: #9a9aa3;--on-color: #f4f4f5;--absent-text: var(--muted);color-scheme:dark}:root[data-theme=light]{--bg: #f6f6f8;--tile: #d6d6dc;--tile-empty: rgba(0, 0, 0, .06);--border: #b0b0b8;--text: #1a1a1d;--correct: #2e9384;--present: #c4973f;--absent: #6b6b74;--key: #d0d0d6;--key-shadow: #adadb5;--muted: #5a5a62;--border-strong: #6e6e78;--on-color: #fff;--absent-text: #fff;color-scheme:light}:root[data-theme=classic]{--bg: #6e5c62;--tile: #594b50;--tile-empty: rgba(0, 0, 0, .16);--border: #957f87;--text: #f6f1f3;--key: #4c4347;--key-shadow: #2e282a;--muted: #e6dcdf;--border-strong: #e6dcdf;--on-color: #fff;--absent-text: #d9cdd1}:root[data-theme=yonaka]{--bg: #09090c;--tile: #26252f;--tile-empty: rgba(255, 255, 255, .05);--border: #47465d;--text: #e8e8ed;--correct: #7a69cf;--present: #a87a22;--absent: #38374a;--key: #47465d;--key-shadow: #2c2b3b;--muted: #a9a8c0;--border-strong: #6f6e91;--on-color: #fff;--absent-text: #c9c8d9}:root[data-contrast=high]{--correct: #f5793a;--present: #85c0f9;--on-color: #000}:root:not([data-theme=light])[data-contrast=high]{--bg: #000;--text: #fff;--tile: #2b2b2b;--tile-empty: rgba(255, 255, 255, .1);--border: #bbb;--border-strong: #fff;--absent: #3a3a3a;--absent-text: #fff;--key: #3d3d3d;--key-shadow: #777;--muted: #e4e4e4}:root[data-theme=light][data-contrast=high]{--bg: #fff;--text: #000;--tile: #e4e4e4;--tile-empty: rgba(0, 0, 0, .1);--border: #444;--border-strong: #000;--absent: #555;--absent-text: #fff;--key: #d9d9d9;--key-shadow: #555;--muted: #222}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Nunito,system-ui,sans-serif;font-weight:600}main{--max-w: 1200px;--side: 16px;--gap: 6px;--board-gap: 32px;--cols: var(--n);--board-rows: 1;--chrome: 390px;--avail: calc(min(100vw, var(--max-w)) - 2 * var(--side) - 8px);--cell: min( 72px, calc((var(--avail) - (var(--cols) - 1) * var(--board-gap) - var(--cols) * (var(--word-len) - 1) * var(--gap)) / (var(--cols) * var(--word-len))), max( 40px, calc((100dvh - var(--chrome) - (var(--board-rows) - 1) * var(--board-gap)) / (var(--board-rows) * var(--rows)) - var(--gap)) ) );display:flex;flex-direction:column;align-items:center;width:100%;max-width:var(--max-w);min-height:100dvh;margin:0 auto;padding:12px var(--side) 16px;text-align:center}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;margin:4px 0 10px}h1{grid-column:2;margin:0;font-size:2rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.tools{grid-column:3;justify-self:end;display:flex;gap:6px}.tool{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--tile-empty);color:var(--text)}.tool[aria-pressed=true]{background:var(--key)}#theme-menu{position:fixed;inset:auto;margin:0;padding:6px;min-width:160px;background:var(--key);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 24px #00000059}#theme-menu:popover-open{display:grid;gap:2px}#theme-menu button{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:none;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer}#theme-menu button:hover,#theme-menu button[aria-pressed=true]{background:var(--tile-empty)}#theme-menu button[aria-pressed=true]:after{content:"✓";margin-left:auto}#theme-menu button:before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid var(--border-strong);background:var(--sw)}#theme-menu [data-theme=dark]{--sw: #1a1a1d}#theme-menu [data-theme=light]{--sw: #f6f6f8}#theme-menu [data-theme=classic]{--sw: #6e5c62}#theme-menu [data-theme=yonaka]{--sw: #7a69cf}nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border-radius:22px;background:var(--tile-empty)}nav a{display:flex;align-items:center;min-height:36px;padding:0 16px;border-radius:18px;color:var(--muted);text-decoration:none;text-transform:uppercase;font-size:.8rem;font-weight:800;letter-spacing:.08em}nav a:hover{color:var(--text)}nav a[aria-current]{background:var(--key);color:var(--text)}nav a:focus-visible,.key:focus-visible,.tool:focus-visible,#theme-menu button:focus-visible{outline:3px solid var(--text);outline-offset:2px}#message{width:fit-content;min-height:36px;margin:8px 0 0;padding:0 18px;border-radius:20px;display:flex;align-items:center;background:var(--text);color:var(--bg);font-weight:800}#message:empty{padding:0;background:none}#boards{display:grid;grid-template-columns:repeat(var(--cols),auto);justify-content:center;gap:var(--board-gap);margin-block:auto;padding-block:12px}.board{display:grid;gap:var(--gap);align-content:start}.board.solved{opacity:.55}.row{display:grid;grid-template-columns:repeat(var(--word-len),var(--cell));gap:var(--gap)}.cell{height:var(--cell);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * .55);font-weight:800;text-transform:uppercase;background:var(--tile);border:3px solid transparent;border-radius:calc(var(--cell) * .15)}.row.empty .cell{background:var(--tile-empty)}.row.current .cell{border-color:var(--border);border-bottom-width:6px}.row.current .cell.filled{border-color:var(--border-strong)}.cell.pop{animation:pop .12s ease-out}.cell.correct{background:var(--correct);color:var(--on-color)}.cell.present{background:var(--present);color:var(--on-color)}.cell.absent{background:var(--absent);color:var(--absent-text)}:root[data-contrast=high] .row.empty .cell{border-color:var(--border)}.mark.correct{background:var(--correct)}.mark.present{background:var(--present)}.mark.absent{background:var(--absent)}.cell.flip{animation:flip .4s ease both}.row.shake{animation:shake .3s}@keyframes flip{50%{transform:scaleY(0)}}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@keyframes pop{50%{transform:scale(1.08)}}#keyboard{width:min(100%,560px);padding-top:4px}.kbrow{display:flex;justify-content:center;gap:6px;margin-bottom:8px}.key{position:relative;overflow:hidden;padding:0;flex:1;max-width:52px;height:clamp(44px,6.5dvh,58px);border:0;border-radius:8px;cursor:pointer;background:var(--key);box-shadow:0 3px 0 var(--key-shadow);color:var(--text);font:inherit;font-size:1.15rem;font-weight:800;text-transform:uppercase;transition:transform .06s,box-shadow .06s}@media(hover:hover){.key:hover{filter:brightness(1.12)}}.key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--key-shadow)}.key.wide{flex:1.5;max-width:84px;font-size:.75rem;letter-spacing:.04em}.marks{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--n),1fr)}main[data-n="4"] .marks{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-auto-flow:row}.label{position:relative}@media(max-width:900px){main[data-n="3"],main[data-n="4"]{--cols: 2;--board-rows: 2}}@media(max-width:640px){main{--side: 12px}main:not([data-n="1"]){--board-gap: 14px;--gap: 4px}.kbrow{gap:4px}h1{font-size:1.5rem}.tools{gap:4px}.tool{width:32px;height:32px}nav a{padding:0 10px;font-size:.72rem;letter-spacing:.04em}}@media(prefers-reduced-motion:reduce){.cell.pop,.row.shake{animation:none}}