*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;padding:10px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}.container{background:#add8e6;border-radius:10px;align-items:center;gap:10px;width:100%;max-width:fit-content;height:100%;padding:12px;display:flex;box-shadow:0 10px 40px #0000004d}#new-puzzle-options{background-color:#fff;border-radius:10px;flex-direction:column;align-self:center;gap:10px;padding:10px;display:flex}#difficulty-dropdown{color:#333;cursor:pointer;background-color:#fff;border:2px solid #667eea;border-radius:5px;outline:none;padding:10px;font-size:.9em;font-weight:700;transition:all .3s;display:none}#difficulty-dropdown:hover{background-color:#f8f9fa;border-color:#5568d3}#difficulty-dropdown:focus{border-color:#764ba2;box-shadow:0 0 0 3px #667eea33}#controls{flex-direction:column;gap:10px;display:flex}h1{text-align:center;color:#333;flex-shrink:0;margin-bottom:2px;font-size:1.6em}.subtitle{text-align:center;color:#666;flex-shrink:0;margin-bottom:8px;font-size:.75em}.sudoku-grid{aspect-ratio:1;border:3px solid #333;flex-shrink:0;grid-template-columns:repeat(9,1fr);gap:0;width:100%;max-height:70vh;margin-bottom:8px;display:grid}.sudoku-cell{aspect-ratio:1;cursor:pointer;background:#fff;border:1px solid #999;justify-content:center;align-items:center;width:100%;padding:0;font-size:1.1em;font-weight:700;transition:background-color .2s,color .2s;display:flex;position:relative}.sudoku-cell:hover{background-color:#f0f0f0}.sudoku-cell input{text-align:center;z-index:2;background:0 0;border:none;outline:none;width:100%;height:100%;padding:0;font-size:1.1em;font-weight:700}body.pencil-mode .sudoku-cell input{cursor:crosshair}body.pencil-mode .sudoku-cell.show-candidates:not(.has-value) input{color:#0000;caret-color:#0000}body.pencil-mode .sudoku-cell:not(.has-value):focus-within{outline-offset:-2px;outline:2px solid #27ae60}.candidates{pointer-events:none;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);width:100%;height:100%;padding:2px;display:none;position:absolute;top:0;left:0}.sudoku-cell.show-candidates:not(.has-value) .candidates{display:grid}.sudoku-cell.has-value .candidates{display:none!important}.candidate{color:#ddd;pointer-events:auto;user-select:none;cursor:pointer;border-radius:2px;justify-content:center;align-items:center;font-size:.55em;font-weight:400;line-height:1;transition:all .2s;display:flex}.candidate.active{color:#667eea;background-color:#667eea1a;font-weight:700}.candidate:hover{color:#999;background-color:#667eea26}.controls-group{flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:8px;margin-bottom:8px;display:flex}.toggle-container{cursor:pointer;color:#444;align-items:center;gap:8px;font-size:.85em;display:flex}.toggle-container input{cursor:pointer}.sudoku-cell input::placeholder{color:#ccc}.sudoku-cell:nth-child(3n):not(:nth-child(9n)){border-right:3px solid #333}.sudoku-cell:nth-child(n+19):nth-child(-n+27):not(:nth-child(n+73)),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:3px solid #333}.sudoku-cell.original input{color:#2c3e50;background-color:#e8f4f8;font-weight:700}.sudoku-cell.solved input{color:#27ae60;background-color:#ecf7ed}.sudoku-cell.error input{color:#e74c3c;background-color:#fadbd8}.sudoku-cell.highlight-primary{animation:.5s ease-in-out pulse-primary;background-color:#fff3cd!important}.sudoku-cell.highlight-secondary{animation:.5s ease-in-out pulse-secondary;background-color:#d1ecf1!important}.sudoku-cell.highlight-elimination{animation:.5s ease-in-out pulse-elimination;background-color:#f8d7da!important}@keyframes pulse-primary{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes pulse-secondary{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}@keyframes pulse-elimination{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.button-group{flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:6px;margin-bottom:6px;display:flex}button{cursor:pointer;text-transform:uppercase;letter-spacing:.5px;border:none;border-radius:5px;min-width:100px;padding:8px 12px;font-size:.75em;font-weight:700;transition:all .3s}.btn-solve{color:#fff;background-color:#27ae60}.btn-solve:hover{background-color:#229954}.btn-solve:active{transform:scale(.95)}.btn-clear{color:#fff;background-color:#e74c3c}.btn-clear:hover{background-color:#c0392b}.btn-clear:active{transform:scale(.95)}.btn-example{color:#fff;background-color:#3498db}.btn-example:hover{background-color:#2980b9}.btn-example:active{transform:scale(.95)}.message{text-align:center;border-radius:5px;flex-shrink:0;padding:8px;font-size:.75em;font-weight:700;line-height:1.3;display:none}.message.success{color:#155724;background-color:#d4edda;display:block}.message.error{color:#721c24;background-color:#f8d7da;display:block}.message.info{color:#0c5460;background-color:#d1ecf1;display:block}.puzzle-and-steps-wrapper{flex-wrap:wrap;gap:12px;margin-bottom:8px;display:flex}.puzzle-and-steps-wrapper>section{flex:none}.steps-and-stats-column{flex-direction:column;flex:1;gap:12px;display:flex}.steps-container{background-color:#f8f9fa;border-radius:5px;flex-shrink:0;max-height:200px;padding:12px;font-size:.75em;display:none;overflow-y:auto}@media (width>=1024px){.steps-container{flex:1;max-width:400px;max-height:none}.steps-and-stats-column{max-width:400px;max-height:70vh}}.steps-container.visible{display:block}.step-controls{border-top:2px solid #e0e0e0;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:10px;padding-top:10px;display:flex}.step-controls button{flex:0 auto;min-width:auto;padding:6px 12px;font-size:.85em}.step-info{color:#667eea;padding:4px 8px;font-size:.9em;font-weight:700}.solving-stats{background-color:#e7f3ff;border-radius:5px;flex-shrink:0;padding:10px;font-size:.85em;display:none}.solving-stats.visible{display:block}.solving-stats h4{color:#667eea;margin:0 0 8px}.stat-item{justify-content:space-between;margin:4px 0;display:flex}.stat-label{font-weight:700}.stat-value{color:#27ae60}.steps-container h3{color:#667eea;background-color:#f8f9fa;margin-bottom:8px;padding-bottom:4px;font-size:1.1em;position:sticky;top:0}.step{background-color:#fff;border-left:3px solid #667eea;border-radius:3px;margin-bottom:4px;padding:6px 8px;line-height:1.5}.step .step-number{color:#667eea;font-weight:700}.step .technique{color:#27ae60;font-weight:700}.step .cell-ref{color:#e74c3c;font-family:monospace}.btn-human-solve{color:#fff;background-color:#9b59b6}.btn-human-solve:hover{background-color:#8e44ad}.btn-human-solve:active{transform:scale(.95)}.btn-candidates-toggle{color:#fff;background-color:#f39c12;min-width:auto;padding:8px 12px;font-size:.75em}.btn-candidates-toggle:hover{background-color:#e67e22}.btn-candidates-toggle:active{transform:scale(.95)}.btn-candidates-clear{color:#fff;background-color:#95a5a6;min-width:auto;padding:8px 12px;font-size:.75em}.btn-candidates-clear:hover{background-color:#7f8c8d}.btn-candidates-clear:active{transform:scale(.95)}.btn-pencil-toggle{color:#fff;background-color:#16a085;align-items:center;gap:6px;min-width:auto;margin-top:50px;padding:8px 12px;font-size:.75em;display:flex}.btn-pencil-toggle:hover{background-color:#138d75}.btn-pencil-toggle:active{transform:scale(.95)}.btn-pencil-toggle.active{background-color:#27ae60;box-shadow:0 0 0 3px #27ae604d}.btn-pencil-toggle.active:hover{background-color:#229954}.btn-dark-mode{color:#fff;background-color:#34495e;align-items:center;gap:6px;min-width:auto;padding:8px 12px;font-size:.75em;display:flex}.btn-dark-mode:hover{background-color:#2c3e50}.btn-dark-mode:active{transform:scale(.95)}.btn-dark-mode.active{background-color:#f39c12;box-shadow:0 0 0 3px #f39c124d}.btn-dark-mode.active:hover{background-color:#e67e22}.btn-help{color:#fff;background-color:#3498db}.btn-help:hover{background-color:#2980b9}.btn-help:active{transform:scale(.95)}.btn-share{color:#fff;background-color:#667eea}.btn-share:hover{background-color:#5568d3}.btn-share:active{transform:scale(.95)}#helpDialog,#customPuzzleDialog{background:#fff;border:none;border-radius:12px;width:90%;max-width:700px;max-height:85vh;margin:0;padding:0;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #0006}#customPuzzleDialog{max-width:500px}#helpDialog::backdrop,#customPuzzleDialog::backdrop{backdrop-filter:blur(4px);background:#0009}.custom-puzzle-form{flex-direction:column;gap:16px;margin-top:16px;display:flex}.custom-puzzle-form label{flex-direction:column;gap:8px;font-size:1em;display:flex}.clues-hint{color:#666;font-size:.85em;font-weight:400}.custom-puzzle-form input[type=number]{text-align:center;border:2px solid #667eea;border-radius:5px;outline:none;padding:12px;font-size:1.1em;font-weight:700;transition:all .3s}.custom-puzzle-form input[type=number]:focus{border-color:#764ba2;box-shadow:0 0 0 3px #667eea33}.difficulty-guide{background-color:#f8f9fa;border-radius:5px;padding:12px;font-size:.9em;line-height:1.6}.difficulty-guide>div{margin-bottom:4px}.difficulty-guide>div:first-child{margin-bottom:8px}.btn-generate-custom{color:#fff;cursor:pointer;text-transform:uppercase;letter-spacing:.5px;background-color:#667eea;border:none;border-radius:5px;padding:12px 20px;font-size:.95em;font-weight:700;transition:all .3s}.btn-generate-custom:hover{background-color:#5568d3}.btn-generate-custom:active{transform:scale(.95)}.dialog-header{color:#fff;z-index:10;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex;position:sticky;top:0}.dialog-header h2{margin:0;font-size:1.5em;font-weight:600}.close-dialog{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;min-width:auto;height:36px;padding:0;font-size:1.5em;line-height:1;transition:all .3s;display:flex}.close-dialog:hover{background:#ffffff4d;transform:rotate(90deg)}.close-dialog:active{transform:rotate(90deg)scale(.9)}.dialog-content{max-height:calc(85vh - 80px);padding:24px;overflow-y:auto}.dialog-content section{margin-bottom:24px}.dialog-content section:last-child{margin-bottom:0}.dialog-content h3{color:#667eea;border-bottom:2px solid #667eea;margin-bottom:12px;padding-bottom:8px;font-size:1.3em}.dialog-content h4{color:#764ba2;margin-top:16px;margin-bottom:8px;font-size:1.1em}.dialog-content p{color:#333;margin-bottom:12px;font-size:.95em;line-height:1.6}.dialog-content ul{margin-bottom:12px;margin-left:20px}.dialog-content li{color:#444;margin-bottom:8px;font-size:.95em;line-height:1.6}.dialog-content strong{color:#667eea;font-weight:600}.dialog-content::-webkit-scrollbar{width:8px}.dialog-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.dialog-content::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.dialog-content::-webkit-scrollbar-thumb:hover{background:#5568d3}body.dark-mode{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)}body.dark-mode .container{background:#0f3460}body.dark-mode #new-puzzle-options{color:#e0e0e0;background-color:#1a1a2e}body.dark-mode #difficulty-dropdown{color:#e0e0e0;background-color:#1a1a2e;border-color:#667eea}body.dark-mode #difficulty-dropdown:hover{background-color:#16213e}body.dark-mode h1{color:#e0e0e0}body.dark-mode .subtitle{color:#b0b0b0}body.dark-mode .sudoku-cell{background:#1a1a2e;border-color:#555}body.dark-mode .sudoku-cell:hover{background-color:#16213e}body.dark-mode .sudoku-cell input{color:#e0e0e0}body.dark-mode .sudoku-cell input::placeholder{color:#555}body.dark-mode .sudoku-grid{border-color:#667eea}body.dark-mode .sudoku-cell:nth-child(3n):not(:nth-child(9n)){border-right-color:#667eea}body.dark-mode .sudoku-cell:nth-child(n+19):nth-child(-n+27):not(:nth-child(n+73)),body.dark-mode .sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom-color:#667eea}body.dark-mode .sudoku-cell.original input{color:#7fb3d5;background-color:#1a2f3a;font-weight:700}body.dark-mode .sudoku-cell.solved input{color:#2ecc71;background-color:#1a3a27}body.dark-mode .sudoku-cell.error input{color:#e74c3c;background-color:#3a1a1a}body.dark-mode .sudoku-cell.highlight-primary{background-color:#3a3520!important}body.dark-mode .sudoku-cell.highlight-secondary{background-color:#1a3a3a!important}body.dark-mode .sudoku-cell.highlight-elimination{background-color:#3a1a1a!important}body.dark-mode .candidate{color:#555}body.dark-mode .candidate.active{color:#667eea;background-color:#667eea33}body.dark-mode .candidate:hover{color:#b0b0b0;background-color:#667eea40}body.dark-mode .message.success{color:#2ecc71;background-color:#1a3a27}body.dark-mode .message.error{color:#e74c3c;background-color:#3a1a1a}body.dark-mode .message.info{color:#3498db;background-color:#16213e}body.dark-mode .steps-container{color:#e0e0e0;background-color:#1a1a2e}body.dark-mode .steps-container h3{background-color:#1a1a2e}body.dark-mode .step-controls{border-top-color:#667eea}body.dark-mode .step-info{color:#667eea}body.dark-mode .solving-stats{color:#e0e0e0;background-color:#16213e}body.dark-mode .solving-stats h4{color:#667eea}body.dark-mode .stat-value{color:#2ecc71}body.dark-mode .step{background-color:#16213e;border-left-color:#667eea}body.dark-mode .toggle-container{color:#e0e0e0}body.dark-mode #helpDialog,body.dark-mode #customPuzzleDialog{color:#e0e0e0;background:#1a1a2e}body.dark-mode .clues-hint{color:#b0b0b0}body.dark-mode .custom-puzzle-form input[type=number]{color:#e0e0e0;background-color:#16213e;border-color:#667eea}body.dark-mode .difficulty-guide{color:#e0e0e0;background-color:#16213e}body.dark-mode .dialog-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}body.dark-mode .dialog-content{background:#1a1a2e}body.dark-mode .dialog-content h3{color:#667eea;border-bottom-color:#667eea}body.dark-mode .dialog-content h4{color:#9b59b6}body.dark-mode .dialog-content p,body.dark-mode .dialog-content li{color:#e0e0e0}body.dark-mode .dialog-content strong{color:#667eea}body.dark-mode .dialog-content::-webkit-scrollbar-track{background:#16213e}body.dark-mode .dialog-content::-webkit-scrollbar-thumb{background:#667eea}@media (width<=768px){body{height:auto;margin-bottom:20px;padding:5px}.container{flex-direction:column;gap:8px;max-width:100%;height:auto;padding:8px}.container>div:nth-child(2){order:-1;width:100%;align-self:stretch!important}#new-puzzle-options{flex-direction:column;order:1;align-self:stretch;width:100%;padding:8px}#controls{order:2}#new-puzzle-options>div{width:100%;margin-bottom:8px}.difficulty-btn,#new-puzzle-options hr,#new-puzzle-options>button{display:none}#difficulty-dropdown{width:100%;display:block}h1{margin-bottom:4px;font-size:1.3em}.subtitle{margin-bottom:6px;font-size:.7em}.sudoku-grid{max-width:100%;max-height:none;margin-bottom:10px}.sudoku-cell,.sudoku-cell input{font-size:1em}.candidate{font-size:.45em}#controls{width:100%}button{width:calc(50% - 4px);min-width:auto;padding:10px 12px;font-size:.8em}.button-group{flex-direction:row;gap:8px}#controls{grid-template-columns:1fr 1fr;gap:8px;display:grid}#controls>button,#controls>label{width:100%}.btn-pencil-toggle{width:100%;margin-top:0}.toggle-container{justify-content:center;width:100%;padding:8px;font-size:.9em}.puzzle-and-steps-wrapper{flex-direction:column}.steps-and-stats-column{width:100%;min-width:auto}.steps-container{width:100%;min-width:auto;max-height:150px;font-size:.7em}.solving-stats{width:100%}#helpDialog{width:95%;max-width:95%;max-height:90vh}.dialog-header{padding:16px 18px}.dialog-header h2{font-size:1.2em}.dialog-content{max-height:calc(90vh - 70px);padding:18px}.dialog-content h3{font-size:1.1em}.dialog-content h4{font-size:1em}.dialog-content p,.dialog-content li{font-size:.9em}}@media (width<=480px){body{padding:2px}.container{gap:6px;padding:6px}#new-puzzle-options{padding:6px}#new-puzzle-options button{min-width:calc(50% - 5px);padding:8px 6px;font-size:.8em}h1{font-size:1.1em}.subtitle{font-size:.65em}.sudoku-grid{border:2px solid #333}.sudoku-cell{border:.5px solid #999;font-size:.9em}.sudoku-cell input{font-size:.9em}.sudoku-cell:nth-child(3n):not(:nth-child(9n)){border-right:2px solid #333}.sudoku-cell:nth-child(n+19):nth-child(-n+27):not(:nth-child(n+73)),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:2px solid #333}.candidate{font-size:.4em}button{padding:8px 10px;font-size:.75em}.message{padding:6px;font-size:.7em}.steps-container{width:100%;max-height:120px;padding:8px;font-size:.65em}.dialog-header{padding:12px 14px}.dialog-header h2{font-size:1.1em}.close-dialog{width:32px;height:32px;font-size:1.3em}.dialog-content{padding:14px}.dialog-content h3{font-size:1em}.dialog-content h4{font-size:.95em}.dialog-content p,.dialog-content li{font-size:.85em}}@media (width<=768px) and (orientation:landscape){.container{flex-direction:row;height:100%;overflow-y:auto}.container>div:nth-child(2){flex:1;order:0;width:auto;align-self:start!important}#new-puzzle-options{flex-direction:column;order:-1;width:auto;max-width:150px;max-height:100vh;overflow-y:auto}#new-puzzle-options button{width:100%;min-width:auto}.sudoku-grid{max-height:85vh}#controls{order:1;grid-template-columns:1fr 1fr;gap:6px;max-width:200px;max-height:100vh;padding:5px;display:grid;overflow-y:auto}#controls>button,#controls>label{width:100%;padding:8px 6px;font-size:.7em}.btn-pencil-toggle{grid-column:1/-1}.toggle-container{grid-column:1/-1;padding:6px;font-size:.75em}}