.sudoku-table{display:grid;grid-template-columns:repeat(9,1fr);width:486px;height:486px}.sudoku-table .cell-frame{position:relative;border:1px solid rgb(60,121,75);display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}.sudoku-table .cell-frame:has(.initial-number){font-weight:700;color:#27925c;font-size:1.2em;background-color:#d3f5e3}.sudoku-table .cell-frame:has(.input-number){font-weight:700;color:#277992;background-color:#cee6ee}.sudoku-table .cell-frame .candidate-list{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;justify-items:center;width:100%;height:100%}.sudoku-table .cell-frame .candidate-list .candidate{width:12px;height:12px;font-size:10px;color:#277992;text-align:center}.sudoku-table .cell-frame .candidate-list .candidate.same-number{background-color:#277992;color:#fff}.sudoku-table .cell-frame .candidate-list .candidate.remove-target{background-color:#b8aaaa;color:#d41a1a}.sudoku-table .cell-frame.same-number{background-color:#277992}.sudoku-table .cell-frame.same-number .initial-number,.sudoku-table .cell-frame.same-number .input-number{color:#fff}.sudoku-table .cell-frame.selected{background-color:#3c794b}.sudoku-table .cell-frame.selected .initial-number,.sudoku-table .cell-frame.selected .input-number,.sudoku-table .cell-frame.selected .candidate{color:#fff}.sudoku-table .cell-frame.error{background-color:#b8aaaa;font-weight:700}.sudoku-table .cell-frame.error .initial-number,.sudoku-table .cell-frame.error .input-number{color:#d41a1a}.sudoku-table .cell-frame.left-border{border-left:2px solid rgb(60,121,75)}.sudoku-table .cell-frame.top-border{border-top:2px solid rgb(60,121,75)}.sudoku-table .cell-frame.right-border{border-right:2px solid rgb(60,121,75)}.sudoku-table .cell-frame.bottom-border{border-bottom:2px solid rgb(60,121,75)}.sudoku-table.hint{width:360px;height:360px}.sudoku-table.hint .cell-frame.hint-target{background-color:#277992;color:#fff}.sudoku-table.hint .cell-frame.hint-target .candidate{color:#fff}.mode-list{margin-top:36px;display:grid;grid-template-columns:repeat(2,1fr);background-color:#d1d1d1}.mode-list div{padding:16px;border:1px solid rgb(128,122,122)}.mode-list div.selected{background-color:#352a2a;color:#fff}.number-pad{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr)}.number-pad .num{border:1px solid rgb(74,74,74);display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px}.number-pad .num:hover{cursor:pointer;background-color:#4a4a4a;color:#fff}.hint-list{margin-top:36px}.hint-list .hint-item{margin-top:12px;padding:12px;border:1px solid rgb(74,74,74)}.hint-list .hint-item .cell-frame .index{visibility:hidden;position:absolute;top:0;left:0;display:block;width:1.2rem;height:1.2rem;border-radius:50%;background-color:#00f;color:#fff;font-size:.6em;text-align:center}.hint-list .hint-item .cell-frame:hover .index{visibility:visible}.hint-list .hint-item .step-list .step{margin-top:12px;padding:12px;background-color:#d1d1d1}.hint-list .hint-item .strategy-list{border:1px solid rgb(173,173,173)}.hint-list .hint-item .strategy-list .strategy{padding:12px}