.op-sudoku{max-width:48rem;margin-inline:auto}.op-sudoku__progress{display:flex;justify-content:space-between;font-weight:700}.op-sudoku__board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));width:min(100%,36rem);margin-inline:auto;border:2px solid var(--border-color,#64748b);border-radius:.5rem;overflow:hidden}.op-sudoku__cell{display:grid;place-items:center;min-width:0;aspect-ratio:1;border:0;border-inline-end:1px solid #cbd5e1;border-block-end:1px solid #cbd5e1;background:var(--surface,#fff);color:var(--text,#172033);font:600 clamp(.85rem,4vw,1.5rem)/1 system-ui,sans-serif;cursor:pointer}.op-sudoku__cell:nth-child(9n){border-inline-end:0}.op-sudoku__cell:nth-last-child(-n+9){border-block-end:0}.op-sudoku__cell.has-right-rule{border-inline-end:2px solid #64748b}.op-sudoku__cell.has-bottom-rule{border-block-end:2px solid #64748b}.op-sudoku__cell.is-given{background:#eef2f7;font-weight:800}.op-sudoku__cell.is-selected{background:#dbeafe;outline:2px solid #2563eb;outline-offset:-2px}.op-sudoku__cell.is-incorrect{background:#fee2e2;color:#991b1b}.op-sudoku__cell:focus-visible{z-index:1;outline:3px solid #2563eb;outline-offset:-3px}.op-sudoku__notes{display:grid;grid-template-columns:repeat(3,1fr);width:100%;font-size:clamp(.35rem,1.8vw,.65rem);line-height:1.15}.op-sudoku__digits{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-block:1rem}.op-sudoku__digits button{min-width:2.75rem;min-height:2.75rem}.op-sudoku .calculator-grid{align-items:end}