:root{--green: #4ade80;--red: #f87171;--grey: #d1d5db;--bg: #f7f7f8;--fg: #1a1a1a}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;margin:0;padding:1.5rem;background:var(--bg);color:var(--fg)}main{max-width:720px;margin:0 auto}.hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1rem}.hdr h1{margin:0;font-size:1.5rem}.meta{color:#6b7280;font-size:.875rem}.grid{display:grid;grid-template-columns:9rem repeat(3,1fr);grid-template-rows:5rem repeat(3,5rem);gap:.5rem}.label{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:.75rem;padding:.25rem;background:#fff;border-radius:.5rem;border:1px solid var(--grey)}.label .icon{font-size:1.25rem}.cell{background:#fff;border:1px solid var(--grey);border-radius:.5rem;padding:.5rem;display:flex;align-items:center;justify-content:center}.cell select{width:100%;padding:.5rem;font-size:1rem}.cell.correct{background:var(--green)}.cell.incorrect{background:var(--red)}.actions{margin-top:1rem}button{padding:.5rem 1rem;font-size:1rem;cursor:pointer}.hidden{display:none}#solved-banner{background:#22c55e;color:#fff;padding:.75rem 1.25rem;border-radius:6px;text-align:center;font-weight:600;margin-bottom:1rem}.cell input[type=text],.cell button.cell-input{display:block;width:100%;height:100%;box-sizing:border-box;border:2px solid #d1d5db;border-radius:6px;background:#fff;font-size:1.1rem;font-weight:600;text-align:center;cursor:pointer;outline:none;transition:border-color .15s;padding:0;font-family:inherit}.cell input[type=text]:focus,.cell button.cell-input.is-active{border-color:#f59e0b}.cell--valid input[type=text],.cell--valid button.cell-input{border-color:#22c55e;color:#16a34a}.cell--invalid input[type=text],.cell--invalid button.cell-input{border-color:#ef4444;color:#dc2626}.cell--not-found input[type=text],.cell--not-found button.cell-input{border-color:#f59e0b}.cell--duplicate input[type=text],.cell--duplicate button.cell-input{border-color:#ef4444;color:#dc2626}.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:.125rem}.stopwatch{color:#6b7280;font-size:.875rem;font-variant-numeric:tabular-nums}.numpad-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:100;display:none}.numpad-backdrop.is-open{display:block}.numpad-sheet{position:fixed;bottom:0;left:0;right:0;background:#f9fafb;border-radius:16px 16px 0 0;padding:12px 16px 24px;box-shadow:0 -4px 20px #00000026;transform:translateY(100%);transition:transform .25s ease-out;z-index:101}.numpad-backdrop.is-open .numpad-sheet{transform:translateY(0)}.numpad-display{font-size:2rem;font-weight:700;text-align:center;min-height:3rem;line-height:3rem;margin-bottom:12px;letter-spacing:.1em;color:#111827}.numpad-display:empty:before{content:attr(data-placeholder);color:#9ca3af;font-weight:400;font-size:1.2rem}.numpad-letters{display:flex;gap:6px;justify-content:center;margin-bottom:8px}.numpad-letter-key{flex:1;max-width:52px;height:40px;border:none;border-radius:8px;background:#ddd6fe;color:#5b21b6;font-size:.85rem;font-weight:700;cursor:pointer;transition:background .1s}.numpad-letter-key.is-active{background:#7c3aed;color:#fff}.numpad-letter-key:disabled{opacity:.35;cursor:default}.numpad-digits{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.numpad-digit-key{height:56px;border:none;border-radius:10px;background:#e5e7eb;color:#111827;font-size:1.4rem;font-weight:600;cursor:pointer;transition:background .1s}.numpad-digit-key:active,.numpad-letter-key:active{filter:brightness(.9)}.numpad-key-backspace{background:#fecaca;color:#991b1b;font-size:1.1rem}.numpad-key-ok{background:#22c55e;color:#fff;font-size:1rem;font-weight:700}