.sudoku{grid-template-columns:minmax(0,1fr);grid-template-areas:"level""board""info""dock""actions"}.sudoku-level{grid-area:level}.sudoku-board-wrap{grid-area:board;min-width:0}.sudoku-info{grid-area:info;gap:10px;min-width:0;display:grid}.sudoku-dock{grid-area:dock;gap:8px;min-width:0;display:grid}.sudoku-actions{flex-wrap:wrap;grid-area:actions;gap:10px;display:flex}.sudoku-actions .btn{flex:auto}.sudoku--done .sudoku-dock{display:none}@media (width<=1023px){.sudoku-dock{z-index:20;margin-inline:calc(var(--gutter) * -1);padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--bg);position:sticky;bottom:0}}@media (width>=1024px){.sudoku{grid-template:"board level""board info""board dock""board actions""board."1fr/minmax(0,560px) minmax(300px,440px);align-items:start;gap:20px 48px}.sudoku-info .status{border-top:1px solid var(--line);padding-top:12px}.sudoku-dock{gap:10px}}.sudoku-board{aspect-ratio:1;border:2px solid var(--ink);background:var(--panel);-webkit-user-select:none;user-select:none;direction:ltr;grid-template-rows:repeat(9,minmax(0,1fr));grid-template-columns:repeat(9,minmax(0,1fr));width:100%;max-width:560px;display:grid;container-type:inline-size}.sudoku-board[aria-busy=true] .sudoku-cell{cursor:progress}.sudoku-cell{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);min-width:0;min-height:0;color:var(--accent-text);font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:0;justify-content:center;align-items:center;margin:0;padding:0;font-size:22px;font-weight:500;line-height:1;transition:background-color .12s;display:flex;position:relative}@media (width>=1024px){.sudoku-cell{font-size:30px}}@supports (font-size:1cqw){.sudoku-cell{font-size:clamp(18px,8px + 4cqw,32px)}}.sudoku-cell:nth-child(9n){border-right:0}.sudoku-cell:nth-child(9n+3),.sudoku-cell:nth-child(9n+6){border-right:2px solid var(--ink)}.sudoku-cell:nth-child(n+73){border-bottom:0}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid var(--ink)}.sudoku-cell--given{color:var(--ink);font-weight:600}.sudoku-cell--peer{background:var(--bg)}.sudoku-cell--clash{background:#f2541b14}.sudoku-cell--same{font-weight:800}.sudoku-cell--sel{z-index:1;outline:2px solid var(--accent);outline-offset:-2px;background:#f2541b29}.sudoku-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.sudoku-cell--wrong .sudoku-d{text-decoration:underline;text-decoration-color:var(--accent-text);text-underline-offset:4px;text-decoration-thickness:2px}@media (hover:hover){.sudoku-cell:not(.sudoku-cell--sel):hover{background:var(--line-2)}}@media (width>=1024px){.sudoku-cell--wrong .sudoku-d{text-underline-offset:5px}}.sudoku-d{display:block}.sudoku-board--solved .sudoku-d{animation:.42s cubic-bezier(.2,.8,.2,1) both sudoku-wave}@keyframes sudoku-wave{0%{transform:none}40%{transform:scale(1.18)}to{transform:none}}.sudoku-notes{color:var(--muted);grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));font-size:10px;font-weight:500;line-height:1;display:grid;position:absolute;inset:2px}@media (width>=1024px){.sudoku-notes{font-size:12px;inset:4px}}@supports (font-size:1cqw){.sudoku-notes{font-size:clamp(9px,4px + 1.6cqw,13px)}}.sudoku-notes span{justify-content:center;align-items:center;display:flex}.sudoku-note--hit{color:var(--ink);font-weight:800}.sudoku-readouts dd .unit{margin-inline-start:1px}.sudoku-tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;display:grid}.sudoku-tool{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0;height:48px;color:var(--ink);white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:6px;padding:0 4px;font-size:15px;font-weight:600;transition:background-color .15s,color .15s,border-color .15s;display:flex}.sudoku-tool svg{flex:none;width:18px;height:18px}.sudoku-tool[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--bg)}.sudoku-tool:disabled{opacity:.45;cursor:default}.sudoku-tool:active:not(:disabled),.sudoku-key:active:not(:disabled){transform:translateY(1px)}@media (hover:hover){.sudoku-tool:hover:not(:disabled):not([aria-pressed=true]),.sudoku-key:hover:not(:disabled){border-color:var(--input)}}.sudoku-pad{grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;display:grid}.sudoku-key{border:1px solid var(--line);background:var(--panel);min-width:0;height:60px;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:0;transition:color .15s,border-color .15s;display:flex}.sudoku-key-d{font-size:24px;font-weight:500;line-height:1}.sudoku-key-n{height:11px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px;line-height:1}.sudoku--notes .sudoku-key:not(:disabled){color:var(--muted)}.sudoku-key:disabled{border-color:var(--line-2);color:var(--input);cursor:default;background:0 0}@media (width<=1023px) and (height<=700px){.sudoku-tool{height:42px}.sudoku-key{height:52px}}@media (width>=1024px){.sudoku-tools{gap:10px}.sudoku-tool{gap:8px;height:52px;padding:0 6px}.sudoku-pad{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.sudoku-key{gap:6px;height:72px}.sudoku-key-d{font-size:28px}.sudoku-key-n{height:13px;font-size:13px}}