:root{--line:#c9c9c9;--line-strong:#444;--given:#1a1a1a;--filled:#2a6ebb;--conflict:#b00020;--bg:#fdfdfc;--panel:#f4f4f2;--muted:#6b6b6b;--unsure:#d98a00}*{box-sizing:border-box}body{margin:0;padding:2rem 1rem;background:var(--bg);color:#1a1a1a;font:16px/1.5 system-ui,sans-serif}main{max-width:40rem;margin:0 auto}h1{font-size:1.4rem;font-weight:600;margin:0 0 1rem}.status{margin:0 0 .75rem;min-height:3rem}.status.error{color:var(--conflict)}.board{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,27rem);border:2px solid var(--line-strong);background:#fff}.cell{aspect-ratio:1;min-width:0;border:1px solid var(--line);border-radius:0;text-align:center;font-size:clamp(1rem,4vw,1.4rem);font-variant-numeric:tabular-nums;color:var(--filled);background:#fff;touch-action:manipulation}.cell.given{color:var(--given);font-weight:600;background:var(--panel)}.cell.conflict{color:var(--conflict);background:#fdecef}.cell.uncertain{background:#fff6e0;box-shadow:inset 0 0 0 2px var(--unsure)}.cell:focus{outline:2px solid var(--filled);outline-offset:-2px;z-index:1}.cell:nth-child(9n+4),.cell:nth-child(9n+7){border-left-color:var(--line-strong)}.cell:nth-child(n+19):nth-child(-n+27),.cell:nth-child(n+46):nth-child(-n+54){border-bottom-color:var(--line-strong)}.controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.controls button[hidden]{display:none}.controls button{display:inline-flex;align-items:center;padding:.5rem;border:1px solid var(--line-strong);border-radius:4px;background:#fff;font:inherit;cursor:pointer;touch-action:manipulation}.controls button svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.controls button svg .solid{fill:currentColor;stroke:none}footer{margin-top:2rem;font-size:.8rem;line-height:1.4;color:var(--muted)}footer p{margin:.2rem 0}.controls button:hover{background:var(--panel)}.controls button:disabled{opacity:.5;cursor:default}.shot[hidden]{display:none}.shot{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:1rem;background:rgba(0,0,0,0.88);color:#fff}.shot-stage{position:relative;width:min(100%,30rem);aspect-ratio:1;background:#000}.shot-video{width:100%;height:100%;object-fit:cover}.shot-frame{position:absolute;inset:8%;border:2px dashed rgba(255,255,255,0.7);border-radius:4px;pointer-events:none}.shot-hint{margin:0;min-height:3rem;text-align:center}.shot .controls{margin-top:0;justify-content:center}.shot .controls button{background:#fff}
