:root{--bg:#1a1a2e;--bg-surface:#16213e;--text-primary:#fff;--text-secondary:#8892a4;--accent-green:#2ecc71;--accent-yellow:#f39c12;--accent-red:#e74c3c}:root.light{--bg:#f5f5f5;--bg-surface:#fff;--text-primary:#1a1a2e;--text-secondary:#666;--accent-green:#27ae60;--accent-yellow:#e67e22;--accent-red:#c0392b}@media (prefers-color-scheme:light){:root:not(.dark){--bg:#f5f5f5;--bg-surface:#fff;--text-primary:#1a1a2e;--text-secondary:#666;--accent-green:#27ae60;--accent-yellow:#e67e22;--accent-red:#c0392b}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text-primary);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{z-index:1;flex-direction:column;min-height:100vh;display:flex;position:relative}.header-bar{background:var(--bg-surface);border-bottom:1px solid var(--text-secondary);align-items:center;gap:20px;padding:12px 72px 12px 20px;display:flex}.header-note{align-items:baseline;gap:2px;min-width:72px;display:flex}.header-note-name{font-size:28px;font-weight:700}.header-note-octave{color:var(--text-secondary);font-size:14px}.header-freq{color:var(--text-secondary);width:80px;font-size:12px}.header-dial{flex:1;min-width:160px}.header-fingering svg{width:140px;height:auto}.header-icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px;font-size:22px;line-height:1;transition:color .2s}.header-icon-btn:hover{color:var(--text-primary)}.header-clear{background:var(--bg);color:var(--text-primary);border:1px solid var(--text-secondary);cursor:pointer;border-radius:6px;padding:6px 12px;font-size:12px}.header-clear:hover{background:var(--text-secondary);color:var(--bg)}.horizontal-dial{align-items:center;gap:10px;display:flex}.horizontal-dial-bar{background:linear-gradient(90deg, var(--accent-red), var(--accent-yellow) 20%, var(--accent-green) 45%, var(--accent-green) 55%, var(--accent-yellow) 80%, var(--accent-red));opacity:.6;border-radius:7px;flex:1;height:14px;position:relative}.horizontal-dial-tick{background:var(--text-primary);border-radius:2px;width:3px;margin-left:-1.5px;transition:left .12s ease-out;position:absolute;top:-4px;bottom:-4px}.horizontal-dial-label{text-align:right;min-width:48px;font-size:13px;font-weight:600}.staff{background:var(--bg);flex:1;width:100%;max-height:calc(100vh - 120px)}.theme-toggle{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--text-secondary);cursor:pointer;z-index:10;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:background .2s;display:flex;position:fixed;top:16px;right:16px}.theme-toggle:hover{background:var(--text-secondary)}.start-screen,.error-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:20px;display:flex}.start-subtitle{color:var(--text-secondary);font-size:18px}.start-button{background:var(--accent-green);color:#fff;cursor:pointer;border:none;border-radius:12px;margin-top:20px;padding:16px 48px;font-size:20px;font-weight:600;transition:opacity .2s}.start-button:hover{opacity:.85}.error-message{color:var(--accent-red);max-width:360px;font-size:16px;line-height:1.5}.settings-backdrop{z-index:20;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.settings-dialog{background:var(--bg-surface);color:var(--text-primary);border-radius:12px;min-width:320px;max-width:420px;padding:24px;box-shadow:0 8px 32px #0006}.settings-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.settings-header h2{font-size:18px;font-weight:600}.settings-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.settings-close:hover{color:var(--text-primary)}.settings-field{flex-direction:column;gap:4px;margin-bottom:16px;display:flex}.settings-label{font-size:14px;font-weight:500}.settings-hint{color:var(--text-secondary);font-size:11px}.settings-input{background:var(--bg);width:100%;color:var(--text-primary);border:1px solid var(--text-secondary);border-radius:6px;padding:8px 10px;font-family:monospace;font-size:14px}.training-screen{flex-direction:column;flex:1;min-height:0;display:flex}.training-topbar{background:var(--bg-surface);border-bottom:1px solid var(--text-secondary);align-items:center;gap:16px;padding:8px 20px;display:flex}.training-status{color:var(--text-secondary);flex:1;align-items:center;gap:16px;font-size:13px;display:flex}.training-status-title{color:var(--text-primary);font-weight:600}.training-status-progress{font-family:monospace}.training-status-mistakes{color:var(--accent-yellow)}.challenge-groups{flex-direction:column;gap:24px;padding:24px 20px;display:flex;overflow-y:auto}.challenge-group-heading{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;font-size:14px;font-weight:600}.challenge-group-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.challenge-card{background:var(--bg-surface);border:1px solid var(--text-secondary);color:var(--text-primary);cursor:pointer;text-align:left;border-radius:10px;flex-direction:column;gap:6px;padding:14px 16px;font-family:inherit;transition:transform .1s,border-color .1s;display:flex}.challenge-card:hover{border-color:var(--accent-green);transform:translateY(-1px)}.challenge-card-title{font-size:15px;font-weight:600}.challenge-card-meta{color:var(--text-secondary);font-size:12px}.challenge-card-stars{color:var(--text-secondary);gap:2px;font-size:16px;display:flex}.challenge-card-star-filled{color:var(--accent-yellow)}.challenge-card-score{color:var(--text-secondary);font-family:monospace;font-size:12px}.training-result-backdrop{z-index:30;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.training-result{background:var(--bg-surface);color:var(--text-primary);text-align:center;border-radius:16px;min-width:320px;padding:32px 40px;position:relative;box-shadow:0 12px 48px #00000080}.training-result-ribbon{background:var(--accent-green);color:#fff;letter-spacing:.05em;text-transform:uppercase;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:700;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.training-result-stars{color:var(--text-secondary);justify-content:center;gap:8px;margin-bottom:8px;font-size:44px;display:flex}.training-result-star-filled{color:var(--accent-yellow)}.training-result-score{margin-bottom:8px;font-size:48px;font-weight:700}.training-result-stats{color:var(--text-secondary);flex-direction:column;gap:2px;margin-bottom:20px;font-size:13px;display:flex}.training-result-actions{justify-content:center;gap:12px;display:flex}.training-empty{text-align:center;color:var(--text-secondary);padding:40px}.challenge-card-description{color:var(--text-secondary);font-size:12px;font-style:italic;line-height:1.3}.challenge-card{position:relative}.challenge-card-controls{opacity:.35;gap:4px;transition:opacity .15s;display:flex;position:absolute;top:6px;right:6px}.challenge-card:hover .challenge-card-controls,.challenge-card-controls:focus-within{opacity:1}.challenge-card-icon{min-width:22px;height:22px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:4px;justify-content:center;align-items:center;padding:0 6px;font-size:13px;line-height:1;display:inline-flex}.challenge-card-icon:hover{background:var(--bg);color:var(--text-primary)}.challenge-card-icon-delete:hover{color:var(--accent-red)}.challenge-card-icon-confirming{background:var(--accent-red);padding:0 8px;font-size:11px;font-weight:600;color:#fff!important}.challenge-card-add{border:1px dashed var(--text-secondary);min-height:96px;color:var(--text-secondary);text-align:center;background:0 0;justify-content:center;align-items:center;gap:8px;display:flex}.challenge-card-add:hover{border-color:var(--accent-green);color:var(--accent-green);background:0 0;transform:none}.challenge-card-add-plus{font-size:26px;font-weight:300;line-height:1}.challenge-card-add-label{font-size:13px;font-weight:500}.custom-dialog{width:min(640px,100vw - 32px);max-width:640px;max-height:calc(100vh - 48px);overflow-y:auto}.custom-section{margin-bottom:16px}.custom-section-header{width:100%;color:var(--text-primary);text-align:left;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:baseline;padding:0 0 6px;font-family:inherit;font-size:13px;font-weight:600;display:flex}.custom-section-hint{color:var(--text-secondary);font-size:11px;font-weight:400}.custom-textarea{background:var(--bg);width:100%;color:var(--text-primary);border:1px solid var(--text-secondary);resize:vertical;border-radius:6px;padding:8px 10px;font-family:SF Mono,Menlo,Consolas,monospace;font-size:12px;line-height:1.45}.custom-prologue{background:var(--bg);opacity:.85}.custom-actions-row{flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px;display:flex}.custom-hint{color:var(--text-secondary);flex:1;min-width:180px;font-size:11px}.custom-btn{background:var(--bg);color:var(--text-primary);border:1px solid var(--text-secondary);cursor:pointer;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:13px}.custom-btn:hover:not(:disabled){background:var(--text-secondary);color:var(--bg)}.custom-btn-primary{background:var(--accent-green);color:#fff;border-color:var(--accent-green)}.custom-btn-primary:hover:not(:disabled){opacity:.9;background:var(--accent-green);color:#fff}.custom-btn:disabled{opacity:.4;cursor:not-allowed}.custom-preview-empty{color:var(--text-secondary);border:1px dashed var(--text-secondary);text-align:center;opacity:.7;border-radius:6px;padding:8px 10px;font-size:12px}.custom-preview-ok,.custom-preview-errors{border:1px solid;border-radius:6px;padding:10px 12px;font-size:12px}.custom-preview-ok{border-color:var(--accent-green);background:color-mix(in srgb, var(--accent-green) 10%, transparent)}.custom-preview-errors{border-color:var(--accent-red);background:color-mix(in srgb, var(--accent-red) 10%, transparent)}.custom-preview-heading{margin-bottom:4px;font-weight:600}.custom-preview-ok ul,.custom-preview-errors ul{margin:0;padding:0;list-style:none}.custom-preview-ok li,.custom-preview-errors li{padding:2px 0;line-height:1.4}.custom-preview-meta{color:var(--text-secondary);font-family:monospace;font-size:11px}.custom-error-line{color:var(--text-secondary);font-family:monospace}.custom-footer{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}