:root{color-scheme:light;--line-thin: #bbb;--line-thick: #333;--cell-bg: #fff;--cell-selected: #cfe8ff;--cell-selected-value: #ffd54f;--cell-peer-overlay: rgba(255, 213, 79, .1);--cell-value-match-overlay: rgba(255, 213, 79, .3);--text-given: #636363;--text-user: #558ec9;--text-note: #bfbfbf;--text-mistake: #c01c28;--text-revealed: #9a5b00;--gold-border: #d4af37;--gold-bg: #fff8dc;--gold-text: #b8860b}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0;padding:1rem;background:#fff;color:#000;display:flex;flex-direction:column;align-items:center;gap:1rem}#app{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:32rem}.board{position:relative;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);width:min(90vw,32rem);aspect-ratio:1 / 1;border:2px solid var(--line-thick);overflow:hidden}.cell{position:relative;border:1px solid var(--line-thin);background:var(--cell-bg);display:flex;align-items:center;justify-content:center;font-size:min(6.4vw,2.4rem);cursor:pointer;padding:0;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}.cell.box-top{border-top:2px solid var(--line-thick)}.cell.box-left{border-left:2px solid var(--line-thick)}.cell.box-bottom{border-bottom:2px solid var(--line-thick)}.cell.box-right{border-right:2px solid var(--line-thick)}.cell.selected{background:var(--cell-selected)}.cell.selected-value{background-color:var(--cell-selected-value)}.cell.peer{background-image:linear-gradient(var(--cell-peer-overlay),var(--cell-peer-overlay))}.cell.value-match{background-image:linear-gradient(var(--cell-value-match-overlay),var(--cell-value-match-overlay))}.cell-value{color:var(--text-user);font-weight:700;line-height:1}.cell.given .cell-value{color:var(--text-given)}.cell.revealed .cell-value{color:var(--text-revealed)}.cell.mistake .cell-value{color:var(--text-mistake)}.cell.value-match .cell-value{color:#000}.cell.paused-cell .cell-value{color:#0000004d}.board.paused .cell{cursor:default}.board.solved{--line-thick: var(--gold-border);--line-thin: var(--gold-border)}.board.solved .cell{background:var(--gold-bg)}.board.solved .cell-value{color:var(--gold-text)}.celebration{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:5}.board.solved .celebration{opacity:1}.shockwave-ring{position:absolute;width:3rem;height:3rem;border-radius:50%;border:4px solid var(--gold-border);opacity:0}.board.solved .shockwave-ring{animation:shockwave 1.4s ease-out forwards}.board.solved .shockwave-ring:nth-child(2){animation-delay:.25s}.board.solved .shockwave-ring:nth-child(3){animation-delay:.5s}@keyframes shockwave{0%{transform:scale(.3);opacity:.8}to{transform:scale(14);opacity:0}}.nailed-it-wrap{position:relative;z-index:1;max-width:85%;pointer-events:none;touch-action:none;cursor:grab}.board.solved .nailed-it-wrap{pointer-events:auto}.nailed-it-wrap.dragging{cursor:grabbing}.nailed-it{background:#fff;border:6px solid #000;color:#000;font-weight:800;font-size:min(7vw,2rem);padding:.5em .7em;text-align:center;box-shadow:.35rem .35rem #0000004d;transform:scale(0)}.board.solved .nailed-it{animation:nailed-it-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes nailed-it-pop{0%{transform:scale(0) rotate(-8deg)}60%{transform:scale(1.15) rotate(2deg)}to{transform:scale(1) rotate(0)}}.cell-notes{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;padding:2px}.note{font-size:min(2.56vw,1.04rem);line-height:1;color:var(--text-note);font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}.note.match{color:#000;font-weight:700}.cell-value.hidden,.cell-notes.hidden{display:none}.pads-row{display:flex;flex-direction:row;gap:1.5rem;width:100%;justify-content:center}.pads-row.swapped{flex-direction:row-reverse}.pad-group{display:flex;flex-direction:column;align-items:center;gap:.4rem}.pad-swap{align-self:center;background:none;border:none;padding:0;font-size:1.5rem;line-height:1;color:var(--line-thin);cursor:pointer}.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.pad-button{width:min(11vw,3.4rem);height:min(11vw,3.4rem);border:1px solid var(--line-thin);border-radius:.5rem;background:var(--cell-bg);font-size:min(5.5vw,1.7rem);font-weight:700;cursor:pointer}.number-pad-value .pad-button{color:var(--text-user);font-size:min(6.6vw,2.04rem)}.number-pad-notes .pad-button{color:var(--text-note)}.pad-button.pad-complete{visibility:hidden;pointer-events:none}.controls{display:flex;flex-direction:column;gap:.5rem;width:100%}.control-group{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.mistakes-toggle.active{background:var(--text-mistake);border-color:var(--text-mistake);color:#fff}.new-game-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px;padding:1.2px 7.2px;background:#fff;border:1px solid var(--line-thick);border-radius:.25rem;color:#000}.status-group{justify-content:space-between;align-items:center;font-variant-numeric:tabular-nums}.status-text-group{display:flex;align-items:baseline;gap:.75rem}.status-icon-group{display:flex;gap:.5rem}.timer-button{display:flex;align-items:baseline;gap:.4rem;background:none;border:none;padding:0;font:inherit;color:#000;cursor:pointer}.timer{font-weight:600}.paused-label{display:none;font-weight:600}.timer-button.paused .timer,.timer-button.paused .paused-label{opacity:.3}.timer-button.paused .paused-label{display:inline}.message{color:var(--text-mistake);min-height:1.2em}.icon-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:none;background:none;color:var(--line-thick);cursor:pointer}.icon-button:disabled{color:var(--line-thin);cursor:default}.icon-button svg{width:100%;height:100%}