:root{--bg: #111;--bg-surface: #1a1a1a;--bg-card: #222;--bg-card-hover: #2a2a2a;--text: #e8e8e8;--text-muted: #888;--accent: #4fc3f7;--accent-dim: #2a7a9e;--danger: #ef5350;--success: #66bb6a;--warning: #ffa726;--radius: 8px;--radius-lg: 12px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", "Fira Code", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;-webkit-font-smoothing:antialiased}#app{max-width:800px;margin:0 auto;padding:var(--space-lg)}.landing h1{font-size:1.8rem;margin-bottom:var(--space-xs)}.landing .subtitle{color:var(--text-muted);margin-bottom:var(--space-xl)}.nav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}.nav-card{background:var(--bg-card);border:1px solid #333;border-radius:var(--radius-lg);padding:var(--space-lg);cursor:pointer;transition:background .15s,border-color .15s;text-decoration:none;color:var(--text);display:block}.nav-card:hover{background:var(--bg-card-hover);border-color:var(--accent-dim)}.nav-card .icon{font-size:2rem;margin-bottom:var(--space-sm);display:block}.nav-card h2{font-size:1.1rem;margin-bottom:var(--space-xs)}.nav-card p{color:var(--text-muted);font-size:.85rem;line-height:1.4}.nav-card.disabled{opacity:.4;cursor:default}.nav-card.disabled:hover{background:var(--bg-card);border-color:#333}.page-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}.back-btn{background:none;border:1px solid #444;color:var(--text);border-radius:var(--radius);padding:var(--space-xs) var(--space-sm);cursor:pointer;font-size:.9rem;transition:border-color .15s}.back-btn:hover{border-color:var(--accent-dim)}.page-header h1{font-size:1.4rem}.placeholder-page{text-align:center;padding:var(--space-2xl);color:var(--text-muted)}.metronome{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.bpm-display{font-size:4rem;font-weight:700;font-family:var(--font-mono);line-height:1}.bpm-label{color:var(--text-muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}.bpm-slider{width:100%;max-width:400px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#333;border-radius:3px;outline:none}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer}.bpm-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}.beat-indicators{display:flex;gap:var(--space-md)}.beat-dot{width:28px;height:28px;border-radius:50%;background:#333;border:2px solid #555;transition:background .05s,border-color .05s}.beat-dot.active{background:var(--accent);border-color:var(--accent)}.beat-dot.downbeat{border-color:var(--warning)}.beat-dot.downbeat.active{background:var(--warning);border-color:var(--warning)}.controls-row{display:flex;gap:var(--space-md);align-items:center}.btn{background:var(--bg-card);border:1px solid #444;color:var(--text);border-radius:var(--radius);padding:var(--space-sm) var(--space-lg);cursor:pointer;font-size:1rem;font-family:var(--font);transition:background .15s,border-color .15s}.btn:hover{background:var(--bg-card-hover);border-color:var(--accent-dim)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#000;font-weight:600;min-width:100px}.btn-primary:hover{background:#6dd0fa;border-color:#6dd0fa}.time-sig-selector{display:flex;gap:var(--space-xs)}.time-sig-btn{background:var(--bg-card);border:1px solid #444;color:var(--text-muted);border-radius:var(--radius);padding:var(--space-xs) var(--space-sm);cursor:pointer;font-size:.85rem;font-family:var(--font-mono);transition:all .15s}.time-sig-btn:hover{border-color:var(--accent-dim)}.time-sig-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--text)}.settings-row{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;justify-content:center}.toggle-btn{font-size:.85rem;padding:var(--space-xs) var(--space-sm);color:var(--text-muted);border:1px solid #444;opacity:.5}.toggle-btn.active{opacity:1;background:var(--accent-dim);border-color:var(--accent);color:var(--text)}.tone-selector{display:flex;gap:var(--space-xs)}.trainer{display:flex;flex-direction:column;gap:var(--space-lg)}.trainer-settings{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:center;justify-content:center}.trainer-setting-group{display:flex;gap:var(--space-xs)}.trainer-prompt{font-size:2rem;font-weight:700;text-align:center}.trainer-prompt strong{color:var(--accent);font-size:5rem;display:block;padding:var(--space-lg) 0}.trainer-feedback{text-align:center;font-size:1rem;font-weight:600;min-height:1.5em}.trainer-feedback.correct{color:var(--success)}.trainer-feedback.incorrect{color:var(--danger)}.trainer-score{display:flex;justify-content:center;gap:var(--space-md);font-size:.9rem;color:var(--text-muted)}.score-streak{color:var(--warning);font-weight:600}.trainer-fretboard{width:100%}.flash-next-row{display:flex;justify-content:center;gap:var(--space-md)}.flash-reveal-btn{font-size:.85rem;color:var(--text-muted)}.note-buttons{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}.note-btn{min-width:48px;font-size:1rem;font-weight:600;padding:var(--space-sm) var(--space-md)}.tuner{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.tuner-note{font-size:4rem;font-weight:700;font-family:var(--font-mono);line-height:1;transition:color .15s}.tuner-note.in-tune{color:var(--success)}.tuner-note.close{color:var(--warning)}.tuner-octave{font-size:1.2rem;color:var(--text-muted);margin-top:calc(-1 * var(--space-md))}.tuner-cents-display{display:flex;align-items:baseline;gap:var(--space-xs)}.tuner-cents-value{font-size:1.5rem;font-family:var(--font-mono);font-weight:600}.tuner-cents-label{font-size:.85rem;color:var(--text-muted)}.tuner-meter{width:100%;max-width:400px}.tuner-meter-bar{position:relative;height:8px;background:#333;border-radius:4px}.tuner-meter-center{position:absolute;left:50%;top:-4px;width:2px;height:16px;background:var(--success);transform:translate(-50%)}.tuner-meter-needle{position:absolute;left:50%;top:-6px;width:12px;height:20px;background:var(--accent);border-radius:3px;transform:translate(-50%);transition:left .08s}.tuner-meter-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-muted);margin-top:var(--space-xs)}.tuner-freq{font-size:.9rem;color:var(--text-muted);font-family:var(--font-mono)}.tuner-status{font-size:.85rem;color:var(--text-muted)}.chords{display:flex;flex-direction:column;gap:var(--space-lg)}.chords-settings{display:flex;flex-direction:column;gap:var(--space-md)}.chords-setting-row{display:flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center}.setting-label{font-size:.85rem;color:var(--text-muted);min-width:40px}.chords-info{text-align:center}.info-title{font-size:1.2rem;font-weight:700;color:var(--accent)}.info-notes{font-size:.9rem;color:var(--text-muted);margin-left:var(--space-sm);font-family:var(--font-mono)}.chords-fretboard{width:100%}.fretboard-container{width:100%;overflow-x:auto}.fretboard-container canvas{display:block}@media(max-width:480px){#app{padding:var(--space-md)}.landing h1{font-size:1.4rem}.nav-grid{grid-template-columns:1fr}.bpm-display{font-size:3rem}.beat-dot{width:22px;height:22px}}