:root{--color-bg-primary: #faf8f6;--color-surface: #ffffff;--color-text-primary: #5a5047;--color-text-secondary: #8b7d73;--color-primary: #d4a5a5;--color-primary-hover: #e0b8b8;--color-accent-1: #b8d4e8;--color-accent-2: #d4c4b8;--color-accent-3: #c8d4c0;--color-accent-4: #e8d4b8;--color-cell-empty: #fef9f5;--color-cell-given: #e8e0d8;--color-cell-selected: #c4d8e8;--color-cell-related: #e0f2fe;--color-error: #e89b9b;--color-success: #b8d4b8;--color-border: #ddd0c8;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--radius-sm: 6px;--radius-md: 8px;--duration-fast: .15s}body.dark-mode{--color-bg-primary: #1a1614;--color-surface: #2c2420;--color-text-primary: #e8e0d8;--color-text-secondary: #b8a89c;--color-primary: #d4a5a5;--color-primary-hover: #e0b8b8;--color-accent-1: #4a5a68;--color-accent-2: #5c4e44;--color-accent-3: #4a5c44;--color-accent-4: #5c4e38;--color-cell-empty: #2c2420;--color-cell-given: #3e342e;--color-cell-selected: #4a5a68;--color-cell-related: #384450;--color-error: #e89b9b;--color-success: #4a684a;--color-border: #5c4e44}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;background-color:var(--color-bg-primary);color:var(--color-text-primary);width:100%}body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-12)}.container{width:100%;max-width:500px;background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-20);box-shadow:0 4px 12px #5a504714}.header{text-align:center;margin-bottom:var(--space-24)}.header-top{display:flex;align-items:center;justify-content:center;gap:var(--space-12);margin-bottom:var(--space-8)}.theme-toggle{background:none;border:none;font-size:24px;cursor:pointer;padding:var(--space-8);border-radius:50%;transition:background-color var(--duration-fast)}.theme-toggle:hover{background-color:var(--color-accent-1)}.settings-toggles{display:flex;gap:var(--space-8);margin-top:var(--space-8);justify-content:center}.settings-toggle-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-8);padding:var(--space-4) var(--space-8);font-size:18px;cursor:pointer;opacity:.6;transition:opacity var(--duration-fast),background-color var(--duration-fast)}.settings-toggle-btn.active{opacity:1;background-color:var(--color-surface)}.settings-toggle-btn:hover{opacity:1}.timer{font-size:24px;font-weight:600;color:var(--color-primary);font-family:Courier New,monospace;font-variant-numeric:tabular-nums}.header h1{font-size:32px;font-weight:600;margin-bottom:var(--space-8);color:var(--color-primary);letter-spacing:-.5px}.header p{font-size:14px;color:var(--color-text-secondary)}.board-container{display:flex;justify-content:center;margin-bottom:var(--space-24);margin-top:var(--space-24)}.sudoku-board{display:grid;grid-template-columns:repeat(9,1fr);gap:0;border:3px solid var(--color-primary);background-color:var(--color-primary);border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 2px 8px #5a50471a}.sudoku-cell{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background-color:var(--color-cell-empty);border:1px solid var(--color-border);font-size:20px;font-weight:600;color:var(--color-text-primary);cursor:pointer;transition:all var(--duration-fast) ease;-webkit-user-select:none;user-select:none;position:relative}.sudoku-cell:focus{outline:none}.sudoku-cell.given{background-color:var(--color-cell-given);color:var(--color-text-primary);font-weight:700;cursor:not-allowed}.sudoku-cell.selected{background-color:var(--color-cell-selected);color:var(--color-text-primary);box-shadow:inset 0 0 0 2px var(--color-primary)}.sudoku-cell.related{background-color:var(--color-cell-related)}.sudoku-cell.error{background-color:var(--color-error);color:var(--color-surface);font-weight:700}.sudoku-cell:nth-child(9n+3),.sudoku-cell:nth-child(9n+6){border-right:3px solid var(--color-primary)}.sudoku-cell:nth-child(n+19):nth-child(-n+27),.sudoku-cell:nth-child(n+46):nth-child(-n+54){border-bottom:3px solid var(--color-primary)}@media(max-width:480px){.sudoku-cell{width:40px;height:40px;font-size:16px}.sudoku-board{gap:0;border-width:2px}.container{padding:var(--space-16)}.header h1{font-size:24px}}.controls{display:flex;flex-direction:column;gap:var(--space-12)}.button-row{display:flex;gap:var(--space-8);justify-content:center}.btn{flex:1;padding:var(--space-12) var(--space-16);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--duration-fast) ease;text-transform:uppercase;letter-spacing:.5px}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--color-primary);color:var(--color-surface);flex:1}.btn-primary:hover{background-color:var(--color-primary-hover);box-shadow:0 2px 8px #d4a5a54d}.btn-secondary{background-color:var(--color-accent-3);color:var(--color-text-primary);flex:1}.btn-secondary:hover{background-color:#d8e0d0;box-shadow:0 2px 8px #c8d4c04d}.btn-tertiary{background-color:var(--color-accent-1);color:var(--color-text-primary);flex:1}.btn-tertiary:hover{background-color:#c4dff0;box-shadow:0 2px 8px #b4d4e84d}.btn:disabled{opacity:.5;cursor:not-allowed}.difficulty-selector{display:flex;gap:var(--space-8);justify-content:center;margin-bottom:var(--space-16)}.btn-icon{background:none;border:none;font-size:20px;cursor:pointer;padding:var(--space-4)}.mode-badge{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--color-primary);font-weight:700;margin-top:-10px;margin-bottom:var(--space-12)}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;pointer-events:none}.note-num{display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--color-text-secondary);line-height:1}.number-pad-container{display:flex;flex-direction:column;gap:var(--space-12);width:100%;max-width:400px}.tools-row{display:flex;justify-content:center}.tool-btn{background-color:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border);padding:var(--space-8) var(--space-16);font-size:14px;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-fast)}.tool-btn.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.tools-section{margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--color-border);width:100%}.tools-toggle{background:none;border:none;color:var(--color-text-secondary);font-size:12px;font-weight:600;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:var(--space-4);padding:0;margin-bottom:var(--space-8)}.tools-content{animation:fadeIn var(--duration-fast) ease-out}.button-row.small-gap{gap:var(--space-8);flex-wrap:wrap}.tool-action-btn{padding:var(--space-4) var(--space-8);font-size:12px;background-color:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary)}.tool-action-btn:hover{background-color:var(--color-bg-secondary)}.difficulty-btn{background:none;border:none;padding:var(--space-8) var(--space-12);cursor:pointer;font-size:14px;color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:all var(--duration-fast)}.difficulty-btn.active{background-color:var(--color-primary);color:#fff;font-weight:600}.difficulty-btn:hover{background-color:var(--color-surface);border-color:var(--color-primary-hover);color:var(--color-primary)}.main-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:400px;margin:0 auto;padding:var(--space-24);text-align:center}.menu-title{font-size:48px;color:var(--color-primary);margin-bottom:var(--space-8)}.menu-subtitle{color:var(--color-text-secondary);margin-bottom:var(--space-32)}.menu-options{display:flex;flex-direction:column;gap:var(--space-24);width:100%}.mode-group{display:flex;flex-direction:column;gap:var(--space-12)}.mode-group h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-secondary);margin-bottom:var(--space-4)}.menu-btn{width:100%;padding:var(--space-16);font-size:18px;display:flex;align-items:center;justify-content:center;gap:var(--space-8);position:relative}.resume-btn{background-color:var(--color-success);border-color:var(--color-success);color:#fff;margin-bottom:var(--space-12)}.daily-btn{background-color:var(--color-accent-1);color:#fff}.badge{font-size:10px;padding:2px 6px;border-radius:4px;background-color:#0000001a;text-transform:uppercase;font-weight:700}.menu-footer{margin-top:var(--space-48);color:var(--color-text-secondary);font-size:12px}.message{text-align:center;padding:var(--space-12);border-radius:var(--radius-sm);margin-top:var(--space-12);font-weight:500;animation:slideIn .3s ease}.message.success{background-color:var(--color-success);color:var(--color-surface)}.message.error{background-color:var(--color-error);color:var(--color-surface)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);margin-top:var(--space-16)}.number-btn{padding:var(--space-8);background-color:var(--color-accent-4);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;color:var(--color-text-primary);transition:all var(--duration-fast) ease}.number-btn:hover{background-color:var(--color-primary);color:var(--color-surface);transform:translateY(-2px)}.number-btn.clear{grid-column:1 / -1;background-color:var(--color-error);color:var(--color-surface)}.number-btn.clear:hover{background-color:#d87e7e}@media(max-width:480px){.container{max-width:100%}.number-pad{grid-template-columns:repeat(5,1fr)}.number-btn.clear{grid-column:auto}.button-row{flex-direction:column}.btn{width:100%}}.tutorial-overlay,.glossary-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-16)}.tutorial-modal,.glossary-modal{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-24);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:fadeIn var(--duration-fast) ease-out}.tutorial-close,.glossary-close{position:absolute;top:var(--space-12);right:var(--space-12);background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-text-secondary)}.tutorial-progress{display:flex;justify-content:center;gap:var(--space-8);margin-bottom:var(--space-20)}.tutorial-progress-dot{width:10px;height:10px;border-radius:50%;background-color:var(--color-border);transition:background-color var(--duration-fast)}.tutorial-progress-dot.active{background-color:var(--color-primary)}.tutorial-progress-dot.completed{background-color:var(--color-success)}.tutorial-title{font-size:22px;text-align:center;margin-bottom:var(--space-16);color:var(--color-text-primary)}.tutorial-content{text-align:center;color:var(--color-text-secondary);line-height:1.6;margin-bottom:var(--space-20)}.tutorial-visual{background-color:var(--color-bg-primary);border-radius:var(--radius-sm);padding:var(--space-16);margin-bottom:var(--space-20);text-align:center}.tutorial-grid-demo{display:flex;gap:var(--space-12);justify-content:center;flex-wrap:wrap}.tutorial-grid-demo div{background-color:var(--color-accent-1);padding:var(--space-8) var(--space-12);border-radius:var(--radius-sm);font-size:14px}.tutorial-example{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;max-width:300px;margin:0 auto var(--space-12)}.example-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background-color:var(--color-cell-empty);border:1px solid var(--color-border);font-size:14px}.example-cell.filled{background-color:var(--color-cell-given)}.example-cell.target{background-color:var(--color-cell-selected);font-weight:700}.example-hint{color:var(--color-primary);font-size:14px;font-weight:500}.tutorial-note-demo .note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;width:60px;margin:0 auto var(--space-8);background-color:var(--color-cell-empty);border:2px solid var(--color-primary);padding:var(--space-8);border-radius:var(--radius-sm)}.tutorial-note-demo .note-grid span{font-size:12px;text-align:center}.tutorial-note-demo .note-grid span.faded{opacity:.2}.tutorial-nav{display:flex;gap:var(--space-12);justify-content:center}.tutorial-btn{min-width:120px}.tutorial-btn:disabled{opacity:.3;cursor:not-allowed}.glossary-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-16)}.glossary-header h2{font-size:20px}.glossary-search{width:100%;padding:var(--space-12);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:16px;background-color:var(--color-bg-primary);color:var(--color-text-primary);margin-bottom:var(--space-16)}.glossary-content{max-height:50vh;overflow-y:auto}.glossary-item{padding:var(--space-12);border-bottom:1px solid var(--color-border)}.glossary-item:last-child{border-bottom:none}.glossary-term{font-size:16px;color:var(--color-primary);margin-bottom:var(--space-8)}.glossary-definition{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.glossary-empty{text-align:center;color:var(--color-text-secondary);padding:var(--space-24)}.educational-group{border-top:1px solid var(--color-border);padding-top:var(--space-16);margin-top:var(--space-16)}.app-layout{display:flex;min-height:100vh;width:100%}.app-content{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12)}.ad-sidebar{display:none;width:160px;min-width:160px;background-color:var(--color-bg-primary);padding:var(--space-12)}.ad-placeholder{background:repeating-linear-gradient(45deg,var(--color-border),var(--color-border) 10px,transparent 10px,transparent 20px);opacity:.1}@media(min-width:1200px){.ad-sidebar{display:block}}.cookie-banner{position:fixed;bottom:0;left:0;right:0;background-color:var(--color-surface);box-shadow:0 -4px 20px #0000001a;padding:var(--space-16);z-index:1000;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.cookie-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-12);align-items:center;text-align:center}.cookie-content p{font-size:14px;color:var(--color-text-secondary)}.cookie-content a{color:var(--color-primary)}.cookie-buttons{display:flex;gap:var(--space-12)}.install-prompt{position:fixed;top:var(--space-16);left:50%;transform:translate(-50%);background-color:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 4px 20px #00000026;padding:var(--space-16);z-index:999;animation:fadeIn .3s ease-out;max-width:300px}.install-content{text-align:center}.install-content p{margin-bottom:var(--space-8);font-size:14px}.install-instructions{font-size:12px!important;color:var(--color-text-secondary)}.share-icon{display:inline-block;font-size:16px}.install-buttons{display:flex;gap:var(--space-8);justify-content:center;margin-top:var(--space-12)}.btn-sm{padding:var(--space-8) var(--space-12);font-size:12px}.privacy-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-16)}.privacy-modal{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-24);max-width:600px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.privacy-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-16)}.privacy-header h2{font-size:20px}.privacy-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-text-secondary)}.privacy-content section{margin-bottom:var(--space-20)}.privacy-content h3{font-size:16px;color:var(--color-primary);margin-bottom:var(--space-8)}.privacy-content p,.privacy-content li{font-size:14px;color:var(--color-text-secondary);line-height:1.6}.privacy-content ul{padding-left:var(--space-20);margin-top:var(--space-8)}.privacy-content a{color:var(--color-primary)}.privacy-update{font-size:12px;color:var(--color-text-secondary);text-align:center;margin-top:var(--space-24)}.privacy-link{background:none;border:none;color:var(--color-text-secondary);font-size:12px;cursor:pointer;margin-top:var(--space-8)}.privacy-link:hover{color:var(--color-primary)}