:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#faf9f6;--text:#1c1c1a;--text-sub:#5e5e5a;--line:#cfcdc6;--accent:#306dfd;--accent-hover:#2458d6;--accent-active:#1e4bbf;--surface:#f1efe9;--select-bg:#dbe6ff;--danger:#c0392b;--frame:3px;--block-line:2px;--select-ring:3px;--board-size:clamp(300px, min(calc(100vw - 16px), calc(100dvh - 380px)), 560px);--cell:calc((var(--board-size) - 2 * var(--frame)) / 9);--digit-ratio:.58;--note-ratio:.26;--font:system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Segoe UI", sans-serif;--title-size:22px}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#161616;--text:#ededea;--text-sub:#a6a6a1;--line:#3a3a38;--surface:#1f1f1e;--select-bg:#22304f;--danger:#ff7b72}}@media (width>=1024px){:root{--title-size:32px}}*{box-sizing:border-box}body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font);margin:0;font-size:16px;line-height:1.5}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{grid-template-columns:var(--board-size);grid-template-areas:"head""board""side";place-content:start center;gap:12px;padding:12px 0 24px;display:grid}.title{font-size:var(--title-size);margin:0;line-height:1.2}.head{grid-area:head;padding:0 8px}.board{width:var(--board-size);height:var(--board-size);border:var(--frame) solid var(--text);background:var(--surface);touch-action:manipulation;grid-template:repeat(9,1fr)/repeat(9,1fr);grid-area:board;display:grid}.cell{min-width:0;box-shadow:inset -1px -1px 0 var(--line);font-size:calc(var(--cell) * var(--digit-ratio));cursor:pointer;background:0 0;border:0;padding:0;line-height:1;position:relative}.cell[data-col="2"],.cell[data-col="5"]{border-right:var(--block-line) solid var(--text)}.cell[data-row="2"],.cell[data-row="5"]{border-bottom:var(--block-line) solid var(--text)}.cell[data-selected=true]{background:var(--select-bg);box-shadow:inset 0 0 0 var(--select-ring) var(--accent)}.digit{font-variant-numeric:tabular-nums}.cell[data-given=true] .digit{font-weight:700}.cell[data-given=false] .digit{color:var(--accent);font-weight:400}.cell[data-duplicate=true] .digit{-webkit-text-decoration:underline wavy var(--danger);text-decoration:underline wavy var(--danger);text-underline-offset:3px}.cell[data-duplicate=true]:after{content:"";background:var(--danger);clip-path:polygon(0 0,100% 0,100% 100%);width:35%;height:35%;position:absolute;top:0;right:0}.notes{width:100%;height:100%;font-size:calc(var(--cell) * var(--note-ratio));color:var(--text-sub);grid-template:repeat(3,1fr)/repeat(3,1fr);display:grid}.note{place-items:center;display:grid}.side{grid-area:side;gap:12px;padding:0 8px;display:grid}.difficulty,.tools{grid-auto-columns:1fr;grid-auto-flow:column;gap:8px;display:grid}.choice,.tool,.pad-key,.restart{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:4px;min-height:48px;padding:8px 12px;font-weight:700}.choice[aria-pressed=true],.tool[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff}button:disabled{opacity:.4;cursor:default}.pad{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.pad-key{font-size:20px}.pad-erase{font-size:16px}.message{min-height:3em;margin:0;font-weight:700}.legend{color:var(--text-sub);margin:0;font-size:14px}.restart[data-emphasis=true]{border-color:var(--accent);background:var(--accent);color:#fff}.restart[data-emphasis=true]:hover{border-color:var(--accent-hover);background:var(--accent-hover)}.restart[data-emphasis=true]:active{border-color:var(--accent-active);background:var(--accent-active)}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (aspect-ratio>=6/5){:root{--board-size:clamp(300px, min(calc(100dvh - 24px), calc(100vw - 360px)), 720px)}.app{grid-template-columns:var(--board-size) minmax(260px, 320px);grid-template-rows:auto 1fr;grid-template-areas:"board head""board side";align-content:center;column-gap:16px;min-height:100dvh;padding:12px 16px}.head,.side{align-self:start;padding:0}}