:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--space-7: 48px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--page: #f4f6fa;--surface: #ffffff;--surface-sunken: #eef1f7;--surface-raised: #ffffff;--ink: #16181d;--ink-soft: #4a5060;--ink-faint: #6c7385;--line: #d9dee8;--line-strong: #9aa3b5;--accent: #2f5fd0;--accent-strong: #24499f;--accent-ink: #ffffff;--accent-wash: #e5ecfb;--accent-wash-strong: #cfdcf7;--danger: #b3261e;--danger-wash: #fbe3e1;--warn: #8a5300;--warn-wash: #fdeed3;--good: #1c6b45;--shadow-sm: 0 1px 2px rgb(16 20 30 / 8%);--shadow-md: 0 6px 20px rgb(16 20 30 / 10%);--shadow-lg: 0 18px 48px rgb(16 20 30 / 18%);--focus: 0 0 0 3px var(--accent-wash-strong);color-scheme:light}[data-theme=dark]{--page: #14161c;--surface: #1c1f27;--surface-sunken: #22262f;--surface-raised: #262a34;--ink: #eef1f6;--ink-soft: #b3bbcb;--ink-faint: #8d95a7;--line: #333844;--line-strong: #6b7488;--accent: #7aa2f7;--accent-strong: #9cbaff;--accent-ink: #10131a;--accent-wash: #253251;--accent-wash-strong: #33436c;--danger: #ff9a90;--danger-wash: #4a2320;--warn: #f0c07a;--warn-wash: #3f3018;--good: #7ddcaa;--shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);--shadow-md: 0 6px 20px rgb(0 0 0 / 45%);--shadow-lg: 0 18px 48px rgb(0 0 0 / 60%);color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;background:var(--page);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.app{max-width:1120px;margin:0 auto;padding:var(--space-6) var(--space-5) var(--space-7);display:flex;flex-direction:column;gap:var(--space-5)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.masthead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4)}.title{margin:0;font-size:30px;font-weight:650;letter-spacing:-.02em}.tagline{margin:var(--space-1) 0 0;color:var(--ink-soft);font-size:14px}.tagline strong{color:var(--ink);font-weight:600}.btn{width:auto;min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink);font:inherit;font-size:15px;font-weight:550;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,transform 80ms ease}.btn:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-sunken)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--focus)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.btn--primary:hover:not(:disabled){border-color:var(--accent-strong);background:var(--accent-strong)}.btn--secondary{background:var(--surface-raised)}.btn--ghost{border-color:transparent;background:transparent}.btn--ghost:hover:not(:disabled){border-color:var(--line)}.btn--small{min-height:36px;padding:var(--space-1) var(--space-3);font-size:14px}.btn--icon{min-width:44px;padding:var(--space-2);font-size:18px;line-height:1}.btn--on{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-strong)}[data-theme=dark] .btn--on{color:var(--ink)}.select{min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink);font:inherit;font-size:15px;cursor:pointer}.select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-5);align-items:start}.board-column{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}.side-column{display:flex;flex-direction:column;gap:var(--space-3)}.statusbar{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm)}.stat{display:flex;flex-direction:column;gap:2px;min-width:56px}.stat__label{color:var(--ink-faint);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.stat__value{font-size:17px;font-weight:600}.stat__value--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.statusbar .btn{margin-left:auto}.board-frame{position:relative;width:100%;max-width:560px}.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1 / 1;border:2px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-md)}.board-row{display:contents}.cell{position:relative;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface);color:var(--accent-strong);font-size:clamp(18px,4.6vw,30px);font-weight:550;cursor:pointer;user-select:none;transition:background-color 90ms ease}[data-theme=dark] .cell{color:var(--accent-strong)}.cell:nth-child(3n){border-right:2px solid var(--line-strong)}.cell:nth-child(9n){border-right:none}.board-row:nth-child(3n) .cell{border-bottom:2px solid var(--line-strong)}.board-row:nth-child(9) .cell{border-bottom:none}.cell:focus{outline:none}.cell:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.cell--given{color:var(--ink);cursor:default;font-weight:650}.cell--peer{background:var(--surface-sunken)}.cell--same{background:var(--accent-wash)}.cell--selected{background:var(--accent-wash-strong)}.cell--conflict{color:var(--danger);background:var(--danger-wash)}.cell--mistake{color:var(--danger);background:var(--danger-wash);box-shadow:inset 0 0 0 2px var(--danger)}.cell__value{position:relative;z-index:1}.cell__notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);color:var(--ink-faint);font-size:clamp(7px,1.5vw,11px);font-weight:500;line-height:1;pointer-events:none}.note{display:flex;align-items:center;justify-content:center;visibility:hidden}.note--on{visibility:visible}.board--hidden .cell__value,.board--hidden .cell__notes{visibility:hidden}.veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);border-radius:var(--radius-md);background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent)}.veil[hidden]{display:none}.veil__text{margin:0;font-size:20px;font-weight:600;color:var(--ink-soft)}.panel{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm)}.panel__title{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin:0 0 var(--space-3);font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}.panel__note{font-size:11px;font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--ink-soft)}.new-game{display:flex;gap:var(--space-2)}.new-game .select{flex:1 1 auto;min-width:0}.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.pad__key{position:relative;min-height:52px;padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink);font:inherit;font-size:20px;font-weight:600;cursor:pointer;transition:background-color .12s ease,border-color .12s ease}.pad__key:hover{border-color:var(--accent);background:var(--accent-wash)}.pad__key:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pad__key--done{color:var(--ink-faint);opacity:.5}.pad__left{position:absolute;right:var(--space-1);bottom:2px;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-faint)}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.actions .btn{padding:var(--space-2);font-size:14px}.keyhint{margin:0;color:var(--ink-faint);font-size:13px;line-height:1.7}.keyhint strong{color:var(--ink-soft);font-weight:600}.status{margin:0;min-height:20px;color:var(--ink-soft);font-size:14px}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#0c0f168c;z-index:10}.modal[hidden]{display:none}.modal__card{width:100%;max-width:400px;padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-lg)}.modal__title{margin:0 0 var(--space-2);font-size:22px;font-weight:650}.modal__text{margin:0 0 var(--space-5);color:var(--ink-soft);font-size:15px}.modal__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}@media (max-width: 860px){.layout{grid-template-columns:minmax(0,1fr)}.board-frame{max-width:none;margin:0 auto;width:min(100%,520px)}.side-column{width:min(100%,520px);margin:0 auto}.pad{grid-template-columns:repeat(9,1fr)}.pad__key{min-height:48px;font-size:18px}}@media (max-width: 520px){.app{padding:var(--space-4) var(--space-3) var(--space-6);gap:var(--space-4)}.title{font-size:24px}.statusbar{gap:var(--space-3);padding:var(--space-3)}.stat{min-width:48px}.stat__value{font-size:15px}.pad{grid-template-columns:repeat(5,1fr)}.actions{grid-template-columns:repeat(3,1fr)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:1ms;animation-duration:1ms}}