: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}*{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{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)}.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}.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}.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-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:flex-start;margin-top:.15rem;background:none;border:none;padding:0;font-size:1.5rem;line-height:1;color:var(--line-thin);cursor:pointer}.pad-label{font-size:.85rem;font-weight:600;color:var(--line-thick)}.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)}.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}.status-group{justify-content:space-between;font-variant-numeric:tabular-nums}.timer{font-weight:600}.message{color:var(--text-mistake);min-height:1.2em}