:root{--bg: #ffffff;--fg: #1a1a1a;--muted: #8a8a8a;--line: #c9c9c9;--line-strong: #1a1a1a;--cell: #ffffff;--clue: #1a1a1a;--user: #2563eb;--sel: #e7eefc;--peer: #f2f4f7;--same: #d8e3fb;--error-bg: #fde8e8;--error-fg: #d62828;--accent: #d62828}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}#root{min-height:100dvh;display:flex;justify-content:center}.loading{display:grid;place-items:center;min-height:100dvh;color:var(--muted)}.app{width:100%;max-width:460px;padding:12px 12px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.topbar h1{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.5px}.accent{color:var(--accent)}.meta{display:flex;gap:6px}.badge{font-size:.8rem;font-weight:600;padding:4px 8px;border:1px solid var(--line);border-radius:8px;color:var(--fg);white-space:nowrap}.badge.errors{color:var(--error-fg);border-color:var(--error-fg)}.diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.diff{padding:8px 4px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font-size:.85rem;font-weight:600;cursor:pointer}.diff.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.board{display:grid;grid-template-columns:repeat(9,1fr);aspect-ratio:1 / 1;width:100%;border:2px solid var(--line-strong);border-radius:4px;overflow:hidden;touch-action:manipulation}.cell{position:relative;border:.5px solid var(--line);background:var(--cell);padding:0;margin:0;cursor:pointer;display:grid;place-items:center;font-size:clamp(1.1rem,6vw,1.6rem);color:var(--user);font-weight:600}.cell:nth-child(3n){border-right:1.5px solid var(--line-strong)}.cell:nth-child(9n){border-right:none}.board>.cell:nth-child(n+19):nth-child(-n+27),.board>.cell:nth-child(n+46):nth-child(-n+54){border-bottom:1.5px solid var(--line-strong)}.cell.clue{color:var(--clue);font-weight:700}.cell.peer{background:var(--peer)}.cell.same{background:var(--same)}.cell.selected{background:var(--sel);box-shadow:inset 0 0 0 2px var(--user)}.cell.error{color:var(--error-fg);background:var(--error-bg)}.cell .value{line-height:1}.cell .notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:1px}.cell .note{font-size:clamp(.5rem,2.4vw,.7rem);color:var(--muted);display:grid;place-items:center;line-height:1;font-weight:500}.pad-wrap{display:flex;flex-direction:column;gap:8px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.action{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:.9rem;font-weight:600;cursor:pointer}.action.active{background:var(--user);color:#fff;border-color:var(--user)}.icon-btn{display:inline-grid;place-items:center;line-height:0}.icon-btn svg{display:block}.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}.num{aspect-ratio:1 / 1.15;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);font-size:clamp(1rem,5vw,1.3rem);font-weight:700;cursor:pointer}.num:active{background:var(--sel)}.num.done{opacity:.25}.share-icon{display:inline-grid;place-items:center;width:32px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--fg);cursor:pointer;line-height:0}.share-icon:active{background:var(--sel)}.share-icon svg{display:block}.share{padding:12px 16px;border:1px solid var(--fg);border-radius:10px;background:var(--fg);color:var(--bg);font-size:.95rem;font-weight:700;cursor:pointer}.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.85rem;font-weight:600;max-width:90vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:20;box-shadow:0 6px 20px #00000040}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:grid;place-items:center;padding:24px;z-index:10}.modal{background:var(--bg);border-radius:16px;padding:28px 24px;text-align:center;max-width:320px;width:100%;box-shadow:0 12px 40px #0003}.modal h2{margin:0 0 8px}.modal p{margin:0 0 18px;color:var(--muted)}
