.sudoku-grid{position:relative;display:grid;border:2px solid #334155;background-color:white}.sudoku-grid-4x4{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.sudoku-grid-6x6{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}.sudoku-grid-8x8{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.sudoku-grid-9x9{grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr)}.sudoku-cell{display:flex;align-items:center;justify-content:center;background-color:white;font-weight:600;position:relative;cursor:pointer;user-select:none}.sudoku-cell.original{color:#0f172a;font-weight:700}.sudoku-cell.selected{background-color:#bae6fd}.camera-frame{position:relative;width:100%;max-width:500px;margin:0 auto}.camera-frame:before{content:"";display:block;padding-top:100%}.camera-frame video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.camera-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border:2px dashed #0ea5e9;pointer-events:none}.step-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#0ea5e9;color:white;font-weight:700;font-size:14px;margin-right:8px}.number-pad-popup{position:absolute;background-color:#f1f5f9;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);z-index:50;padding:.25rem}.number-pad-popup button{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:.25rem;background-color:white;transition:background-color .2s}.number-pad-popup button:hover{background-color:#e2e8f0}.number-pad-popup .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem}@media (max-width:640px){.sudoku-cell{font-size:1rem!important}}