body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg:#0f1115;--bg-elevated:#151822;--card:#1b1f2b;--card-strong:#202636;--text:#f5f7fb;--muted:#a5b0c4;--border:#ffffff14;--accent:#5b9dff;--accent-strong:#3e82f7;--success:#2ecc71;--danger:#ff5d5d;--shadow:0 14px 40px #060b188c;--radius:12px;--radius-lg:18px;--glow:0 0 20px #5b9dff59}.App{background:radial-gradient(circle at top,#1a2233 0,#0f1115 45%);background:radial-gradient(circle at top,#1a2233 0,var(--bg) 45%);box-sizing:border-box;font-family:Inter,SF Pro Text,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;letter-spacing:.01em;min-height:100vh;padding:clamp(16px,3vw,32px);position:relative;text-align:center;transition:background .3s ease,color .3s ease;width:100%}.App,.App.light{color:#f5f7fb;color:var(--text)}.App.light{--bg:#f6f8fb;--bg-elevated:#fff;--card:#fff;--card-strong:#f4f6fb;--text:#121621;--muted:#5b667a;--border:#12162114;--accent:#2f7cf6;--accent-strong:#2565d4;--shadow:0 16px 40px #2634591f;background:radial-gradient(circle at top,#eef3ff 0,#0f1115 45%);background:radial-gradient(circle at top,#eef3ff 0,var(--bg) 45%)}.app-header{border-bottom:1px solid #ffffff14;border-bottom:1px solid var(--border);margin-bottom:32px;margin-top:8px;padding-bottom:28px}.app-title{color:#f5f7fb;color:var(--text);font-size:clamp(1.85rem,4vw,2.75rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0 0 6px}.app-title:after{background:linear-gradient(90deg,#5b9dff,#0000);background:linear-gradient(90deg,var(--accent),#0000);border-radius:2px;content:"";display:block;height:3px;margin:12px auto 0;opacity:.9;width:32px}.app-tagline{font-size:clamp(.9rem,1.8vw,1.05rem);font-weight:400;letter-spacing:.02em;margin:0}.app-tagline,.light .app-tagline{color:#a5b0c4;color:var(--muted)}.mode-toggle{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);box-shadow:0 2px 12px #00000026;display:inline-flex;flex-wrap:wrap;gap:0;justify-content:center;margin:0 auto 32px;max-width:min(100%,560px);padding:4px}.light .mode-toggle{background:#202636;background:var(--card-strong);border-color:#ffffff14;border-color:var(--border);box-shadow:0 2px 12px #0000000f}.mode-toggle button{background:#0000;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;letter-spacing:.01em;padding:10px 18px;transition:color .2s ease,background .2s ease,box-shadow .2s ease}.light .mode-toggle button,.mode-toggle button{color:#a5b0c4;color:var(--muted)}.mode-toggle button:hover{background:#ffffff0a;color:#f5f7fb;color:var(--text)}.light .mode-toggle button:hover{background:#0000000a;color:#f5f7fb;color:var(--text)}.mode-toggle button.active{background:#5b9dff;background:var(--accent);box-shadow:0 2px 10px #5b9dff59;color:#fff;font-weight:600}.light .mode-toggle button.active{box-shadow:0 2px 10px #2f7cf64d}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-bottom:40px}.chord-display-options{display:flex;gap:20px}.chord-display-options label{align-items:center;cursor:pointer;display:flex;gap:6px}.chord-display-options input[type=radio]{cursor:pointer}.chord-position-options{display:flex;gap:20px;margin-top:10px}.chord-position-options label{align-items:center;cursor:pointer;display:flex;gap:6px}.chord-position-options input[type=radio]{cursor:pointer}.chord-tone-legend{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);color:#a5b0c4;color:var(--muted);display:flex;flex-wrap:wrap;font-size:.9rem;gap:14px 20px;margin-top:12px;padding:10px 14px}.chord-tone-legend-item{align-items:center;display:inline-flex;gap:6px}.chord-tone-legend-item .dot{border-radius:50%;flex-shrink:0;height:12px;width:12px}.chord-tone-legend-item.root .dot{background:#e8b923}.chord-tone-legend-item.third .dot{background:#4a9eff}.chord-tone-legend-item.fifth .dot{background:#22c997}.chord-tone-legend-item.seventh .dot{background:#c77dff}label{align-items:center;color:#a5b0c4;color:var(--muted);display:flex;font-size:1rem;gap:10px}select{border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:.95rem;padding:10px 14px;transition:border .2s ease,background .2s ease,box-shadow .2s ease}.light select,select{background:#1b1f2b;background:var(--card);color:#f5f7fb;color:var(--text)}.light select{border-color:#ffffff14;border-color:var(--border)}select:hover{border-color:#5b9dff66}.light select:hover,select:hover{background:#202636;background:var(--card-strong)}.fretboard-container{display:flex;justify-content:center;max-width:100%;overflow-x:auto;padding:24px 12px}.fretboard{background:linear-gradient(180deg,#2a1f1b,#231814);border:1px solid #ffffff14;border-radius:18px;border-radius:var(--radius-lg);min-width:-webkit-fit-content;min-width:fit-content;padding:22px;position:relative}.fretboard,.light .fretboard{box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow)}.light .fretboard{background:linear-gradient(180deg,#f7efe7,#f1e4d8);border-color:#ffffff14;border-color:var(--border)}.fret-numbers{display:flex;margin-bottom:10px;padding-left:0}.fret-number{color:#ccc;font-size:.9rem;text-align:center;width:60px}.fret-number.open-fret{color:#999;font-weight:700;width:48px}.light .fret-number{color:#666}.string-row{height:40px;position:relative}.open-string,.string-row{align-items:center;display:flex}.open-string{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:50%;color:#f5f7fb;color:var(--text);flex-shrink:0;font-size:1rem;font-weight:600;height:38px;justify-content:center;margin-right:10px;transition:all .2s ease;width:38px}.open-string.in-scale{border-color:#5b9dff;border-color:var(--accent);box-shadow:0 0 10px #5b9dff73}.open-string.root-note{border-color:#ff5d5d;border-color:var(--danger);box-shadow:0 0 12px #ff5d5db3}.open-string.chord-tone-open.chord-tone-root{background:#e8b923;border-color:#e8b923;color:#1a1a1a}.open-string.chord-tone-open.chord-tone-3rd{background:#4a9eff;border-color:#4a9eff;color:#fff}.open-string.chord-tone-open.chord-tone-5th{background:#22c997;border-color:#22c997;color:#1a1a1a}.open-string.chord-tone-open.chord-tone-7th{background:#c77dff;border-color:#c77dff;color:#1a1a1a}.open-string.clickable{cursor:pointer}.open-string.clickable:hover{border-color:#5b9dff99;box-shadow:0 0 10px #5b9dff66;transform:translateY(-1px) scale(1.05)}.open-string.clickable:active{transform:scale(1.1)}.light .open-string{background:#fff;border-color:#ddd;color:#333}.light .open-string.clickable:hover{border-color:#999;box-shadow:0 0 10px #0000004d}.fret-container{align-items:center;border-right:1px solid #ffffff24;display:flex;height:40px;justify-content:center;position:relative;width:60px}.light .fret-container{border-right-color:#12162126}.fret-container:first-of-type{border-left:2px solid #ffffff59}.light .fret-container:first-of-type{border-left-color:#12162140}.string-line{background:linear-gradient(90deg,#ffffff59,#ffffff26);height:2px;position:absolute;top:50%;transform:translateY(-50%);width:100%;z-index:1}.light .string-line{background:linear-gradient(90deg,#12162159,#12162126)}.note-circle{align-items:center;background:#151822;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:50%;cursor:pointer;display:flex;height:30px;justify-content:center;position:relative;transition:all .2s ease;width:30px;z-index:2}.note-circle:hover{border-color:#5b9dff99;box-shadow:0 0 16px #5b9dff80;transform:translateY(-1px) scale(1.12)}.note-circle:active{transform:scale(1.2)}.note-circle.root-note{background:#ff5d5de6;border-color:#ff5d5de6;color:#fff}.note-text{color:#f5f7fb;color:var(--text);font-size:.72rem;font-weight:600}.root-note .note-text{color:#fff}.fret-markers{display:flex;margin-top:15px;padding-left:50px}.fret-marker-spacer{width:48px}.fret-marker-container{align-items:center;display:flex;height:20px;justify-content:center;position:relative;width:60px}.fret-marker{background:#666;border-radius:50%;height:8px;position:absolute;width:8px}.light .fret-marker{background:#999}.fret-marker.single{top:50%;transform:translateY(-50%)}.fret-marker.double.top{top:2px}.fret-marker.double.bottom{bottom:2px}.note-circle.chord-note,.note-circle.chord-position{background:#5b9dff;background:var(--accent);border-color:#5b9dff;border-color:var(--accent)}.note-circle.chord-position.chord-tone-root{background:#e8b923;border-color:#e8b923;color:#1a1a1a}.note-circle.chord-position.chord-tone-3rd{background:#4a9eff;border-color:#4a9eff;color:#fff}.note-circle.chord-position.chord-tone-5th{background:#22c997;border-color:#22c997;color:#1a1a1a}.note-circle.chord-position.chord-tone-7th{background:#c77dff;border-color:#c77dff;color:#1a1a1a}.note-circle.chord-position.open-note,.note-circle.open-note{background:#0000;border:2px solid #5b9dff;border:2px solid var(--accent)}.note-circle.chord-position.chord-tone-root.open-note{border-color:#e8b923;color:#e8b923}.note-circle.chord-position.chord-tone-3rd.open-note{border-color:#4a9eff;color:#4a9eff}.note-circle.chord-position.chord-tone-5th.open-note{border-color:#22c997;color:#22c997}.note-circle.chord-position.chord-tone-7th.open-note{border-color:#c77dff;color:#c77dff}.open-note .note-text{color:#5b9dff;color:var(--accent);font-weight:700}.string-line.dont-play{background:#0000;position:relative}.x-mark{color:#ff6b6b;font-size:24px;font-weight:700;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.App-header,.App-link,.App-logo{display:none}.metronome-container{border:1px solid #ffffff14;border:1px solid var(--border);border-radius:18px;border-radius:var(--radius-lg);box-sizing:border-box;margin:40px auto;max-width:800px;padding:28px 22px;width:100%}.light .metronome-container,.metronome-container{background:#1b1f2b;background:var(--card);box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow)}.metronome-container h2{margin-bottom:25px;margin-top:0;text-align:center}.light .metronome-container h2,.metronome-container h2{color:#f5f7fb;color:var(--text)}.metronome-controls{align-items:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-bottom:30px}.bpm-control{align-items:center;display:flex;flex:1 1;gap:15px;min-width:200px}.bpm-control label{color:#a5b0c4;color:var(--muted);font-weight:700;white-space:nowrap}.light .bpm-control label{color:#666}.bpm-slider{background:#ffffff1a;border-radius:3px;cursor:pointer;flex:1 1;height:6px;outline:none}.light .bpm-slider{background:#ddd}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#5b9dff;background:var(--accent);border-radius:50%;cursor:pointer;height:20px;width:20px}.bpm-slider::-moz-range-thumb{background:#5b9dff;background:var(--accent);border:none;border-radius:50%;cursor:pointer;height:20px;width:20px}.bpm-input{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:4px;color:#f5f7fb;color:var(--text);font-size:1rem;padding:6px 10px;text-align:center;width:60px}.light .bpm-input{background:#fff;border-color:#ddd;color:#333}.time-signature-control{align-items:center;display:flex;gap:10px}.time-signature-control label{color:#ccc;font-weight:700;white-space:nowrap}.light .time-signature-control label{color:#666}.time-signature-control select{background:#333;border:1px solid #555;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;padding:6px 12px}.light .time-signature-control select{background:#fff;border-color:#ddd;color:#333}.play-button{background:#5b9dff;background:var(--accent);border:none;border-radius:999px;box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow);color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:11px 28px;transition:all .2s ease}.play-button:hover{background:#3e82f7;background:var(--accent-strong)}.play-button.playing{background:#ff5d5d;background:var(--danger)}.play-button.playing:hover{background:#c0392b}.beat-emphasis{text-align:center}.beat-emphasis label{color:#ccc;display:block;font-size:1.1rem;font-weight:700;margin-bottom:20px}.light .beat-emphasis label{color:#666}.beats{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:20px;padding:0 10px}.beat-control{flex-direction:column;gap:12px}.beat-control,.beat-display{align-items:center;display:flex}.beat-display{background:#202636;background:var(--card-strong);border:3px solid #0000;border-radius:50%;color:#f5f7fb;color:var(--text);font-size:1.2rem;font-weight:700;height:45px;justify-content:center;transition:all .2s ease;width:45px}.light .beat-display{background:#f0f0f0;color:#333}.beat-display.active{background:#5b9dff;background:var(--accent);border-color:#5b9dff99;box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow);color:#fff;transform:scale(1.15)}.emphasis-control{align-items:center;display:flex;gap:8px}.emphasis-btn{align-items:center;background:#202636;background:var(--card-strong);border:none;border-radius:50%;color:#f5f7fb;color:var(--text);cursor:pointer;display:flex;font-size:1rem;height:24px;justify-content:center;transition:all .2s ease;width:24px}.light .emphasis-btn{background:#ddd;color:#333}.emphasis-btn:hover:not(:disabled){background:#5b9dff40}.light .emphasis-btn:hover:not(:disabled){background:#ccc}.emphasis-btn:disabled{cursor:not-allowed;opacity:.3}.emphasis-level{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:18px;height:50px;overflow:hidden;position:relative;width:36px}.light .emphasis-level{background:#f5f5f5;border-color:#ddd}.emphasis-fill{background:#fff3;border-radius:0 0 16px 16px;bottom:0;left:0;position:absolute;right:0;transition:all .3s ease}.emphasis-level.level-0 .emphasis-fill{background:#444}.light .emphasis-level.level-0 .emphasis-fill{background:#ccc}.emphasis-level.level-1 .emphasis-fill{background:#5b9dffbf}.emphasis-level.level-2 .emphasis-fill{background:#ffb24a}.emphasis-level.level-3 .emphasis-fill{background:#ff5d5d;background:var(--danger)}.emphasis-legend{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:15px}.legend-item{align-items:center;color:#aaa;display:flex;font-size:.9rem;gap:6px}.light .legend-item{color:#666}.legend-color{border:1px solid #555;border-radius:4px;height:16px;width:16px}.light .legend-color{border-color:#ccc}.legend-color.level-0{background:#444}.light .legend-color.level-0{background:#ccc}.legend-color.level-1{background:#5a8fd8}.legend-color.level-2{background:orange}.legend-color.level-3{background:#ff6b6b}.app-footer{color:#a5b0c4;color:var(--muted);font-size:.95rem;margin-top:48px;padding:24px 20px 80px}.light .app-footer{color:#888}.theme-toggle{align-items:center;background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:50%;bottom:20px;box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow);color:#f5f7fb;color:var(--text);cursor:pointer;display:flex;font-size:1.5rem;height:50px;justify-content:center;position:fixed;right:20px;transition:all .3s ease;width:50px}.light .theme-toggle{background:#fff;border-color:#ddd;box-shadow:0 2px 10px #0000001a}.theme-toggle:hover{transform:translateY(-2px) scale(1.05)}@media (max-width:768px){.app-header{margin-bottom:24px;padding-bottom:20px}.mode-toggle{gap:4px;margin-bottom:24px;padding:3px}.mode-toggle button{font-size:.82rem;padding:8px 12px}.App{padding:10px}.controls{align-items:stretch;flex-direction:column;gap:14px}.controls label{font-size:.95rem;justify-content:space-between}.chord-display-options{flex-direction:column;gap:10px}.fretboard{padding:12px}.fret-container,.fret-number{width:40px}.open-string{font-size:.9rem;height:30px;width:30px}.note-circle{height:24px;width:24px}.note-text{font-size:.65rem}.metronome-container{padding:20px 15px}.metronome-controls{align-items:stretch;flex-direction:column}.bpm-control{min-width:100%}.beat-display{font-size:1rem;height:40px;width:40px}.emphasis-btn{font-size:.9rem;height:22px;width:22px}.emphasis-level{height:45px;width:32px}.beats{gap:10px}.theme-toggle{font-size:1.2rem;height:44px;width:44px}}@media (max-width:480px){.fret-container,.fret-number{width:30px}.fret-markers,.fret-numbers{padding-left:35px}.fret-marker-spacer{width:35px}.note-circle{height:20px;width:20px}.note-text{font-size:.6rem}}.strum-machine-container{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:18px;border-radius:var(--radius-lg);box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow);box-sizing:border-box;color:#f5f7fb;color:var(--text);margin:20px auto;max-width:1200px;padding:28px;width:95%}.light .strum-machine-container{background:#fff;box-shadow:0 4px 20px #0000001a;color:#333}.strum-machine-container h2{color:#5b9dff;color:var(--accent);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:30px;margin-top:0;text-align:center}.strum-machine-container h3{color:#f5f7fb;color:var(--text);font-size:1.2rem;margin-bottom:15px;margin-top:0}.light .strum-machine-container h3{color:#333}.strum-section{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);margin-bottom:20px;padding:20px}.progression-section{padding:18px}.section-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}.light .strum-section{background:#f8f9fa;border-color:#e0e0e0}.pattern-selector{margin-bottom:20px}.pattern-selector select{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#f5f7fb;color:var(--text);cursor:pointer;font-size:1.1rem;max-width:300px;padding:10px 15px;width:100%}.light .pattern-selector select{background:#fff;border-color:#ddd;color:#333}.strum-pattern-editor{flex-wrap:wrap;gap:8px}.strum-box,.strum-pattern-editor{display:flex;justify-content:center}.strum-box{align-items:center;background:#1b1f2b;background:var(--card);border:2px solid #ffffff14;border:2px solid var(--border);border-radius:12px;cursor:pointer;flex-direction:column;height:80px;transition:all .2s ease;width:60px}.light .strum-box{background:#fff;border-color:#ddd}.strum-box:hover{box-shadow:0 8px 18px #5b9dff40;transform:translateY(-2px)}.strum-box.active,.strum-box:hover{border-color:#5b9dff;border-color:var(--accent)}.strum-box.active{background:#5b9dff;background:var(--accent);box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow);transform:scale(1.1)}.strum-arrow{color:#5b9dff;color:var(--accent);font-size:2rem;font-weight:700;margin-bottom:5px}.strum-box.active .strum-arrow{color:#fff}.strum-label{color:#a5b0c4;color:var(--muted);font-size:1rem;font-weight:600}.light .strum-label{color:#666}.strum-box.active .strum-label{color:#fff}.key-progression-selectors{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px}.progression-toolbar{gap:10px}.key-selector,.progression-pattern-selector{flex:1 1;min-width:180px}.key-selector label,.progression-pattern-selector label{color:#ccc;display:flex;flex-direction:column;font-size:1rem;font-weight:600;gap:8px}.light .key-selector label,.light .progression-pattern-selector label{color:#666}.key-selector select,.progression-pattern-selector select{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#f5f7fb;color:var(--text);cursor:pointer;font-size:1.1rem;padding:10px 15px;transition:all .2s ease;width:100%}.light .key-selector select,.light .progression-pattern-selector select{background:#f0f0f0;border-color:#ccc;color:#333}.key-selector select:hover,.progression-pattern-selector select:hover{border-color:#4a90e2}.chord-category-selector{margin-bottom:15px}.chord-category-selector label{align-items:center;color:#ccc;display:flex;font-size:1rem;gap:10px}.light .chord-category-selector label{color:#666}.chord-category-selector select{background:#2a2a2a;border:1px solid #555;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;padding:8px 15px}.light .chord-category-selector select{background:#f0f0f0;border-color:#ccc;color:#333}.chord-progression{display:flex;flex-direction:column;gap:15px;margin-bottom:15px}.chord-progression.compact{gap:10px;margin-bottom:0}.chord-item{align-items:center;background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;display:flex;gap:15px;padding:15px;transition:all .2s ease}.chord-item.compact{gap:10px;padding:10px 12px}.light .chord-item{background:#fff;border-color:#ddd}.chord-item.active{background:#5b9dff1f;border-color:#5b9dff;border-color:var(--accent);box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow)}.light .chord-item.active{background:#e8f4fd;box-shadow:0 0 15px #4a90e233}.chord-item select{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#f5f7fb;color:var(--text);cursor:pointer;flex:1 1;font-size:1.2rem;max-width:150px;padding:8px 15px}.chord-item.compact select{font-size:1rem;max-width:130px;padding:8px 12px}.light .chord-item select{background:#f0f0f0;border-color:#ccc;color:#333}.measures-control{align-items:center;display:flex;gap:10px}.chord-item.compact .measures-control{gap:6px}.measures-control label{color:#ccc;font-size:.9rem;white-space:nowrap}.chord-item.compact .measures-control label{color:#a5b0c4;color:var(--muted);font-size:.8rem}.light .measures-control label{color:#666}.measures-control input{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;color:#f5f7fb;color:var(--text);font-size:1rem;padding:8px;text-align:center;width:60px}.chord-item.compact .measures-control input{font-size:.9rem;padding:6px 8px;width:54px}.light .measures-control input{background:#f0f0f0;border-color:#ccc;color:#333}.remove-btn{background:#ff5d5d;background:var(--danger);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:1.2rem;padding:8px 12px;transition:all .2s ease}.chord-item.compact .remove-btn{font-size:1rem;padding:6px 10px}.remove-btn:hover:not(:disabled){background:#e04b4b}.remove-btn:disabled{background:#666;cursor:not-allowed;opacity:.5}.add-chord-btn{background:#2ecc71;background:var(--success);border:none;border-radius:12px;box-shadow:0 10px 20px #2ecc7140;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px;transition:all .2s ease;width:100%}.add-chord-btn.compact{border-radius:999px;box-shadow:none;font-size:.9rem;padding:8px 14px;width:auto}.add-chord-btn:hover:not(:disabled){background:#23b164}.add-chord-btn:disabled{background:#666;cursor:not-allowed;opacity:.5}.strum-fretboard{border-top:1px solid #ffffff14;border-top:1px solid var(--border);margin-top:30px;padding-top:30px}.light .strum-fretboard{border-top-color:#ddd}.strum-fretboard h3{color:#4a90e2;font-size:1.8rem;margin-bottom:20px;text-align:center}.strum-chord-options{align-items:center;display:flex;flex-wrap:wrap;gap:16px}.specify-progression-btn{background:#444;border:1px solid #555;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;padding:8px 16px;transition:all .2s ease}.specify-progression-btn:hover{background:#555;border-color:#666}.light .specify-progression-btn{background:#f0f0f0;border-color:#ddd;color:#333}.light .specify-progression-btn:hover{background:#e0e0e0}.use-chord-progression-label{align-items:center;color:#f5f7fb;color:var(--text);cursor:pointer;display:flex;font-size:1rem;gap:8px}.use-chord-progression-label input[type=checkbox]{cursor:pointer;height:18px;width:18px}.strum-drawer-overlay{background:#0006;inset:0;opacity:0;position:fixed;transition:opacity .25s ease,visibility .25s ease;visibility:hidden;z-index:1000}.strum-drawer-overlay.open{opacity:1;visibility:visible}.strum-drawer{background:#202636;background:var(--card-strong);border-left:1px solid #ffffff14;border-left:1px solid var(--border);box-shadow:-4px 0 24px #0003;display:flex;flex-direction:column;height:100vh;max-width:380px;overflow:hidden;position:fixed;right:0;top:0;transform:translateX(100%);transition:transform .25s ease;width:100%;z-index:1001}.strum-drawer.open{transform:translateX(0)}.light .strum-drawer{background:#fff;border-left-color:#e0e0e0;box-shadow:-4px 0 24px #00000014}.strum-drawer-header{align-items:center;border-bottom:1px solid #ffffff14;border-bottom:1px solid var(--border);display:flex;flex-shrink:0;justify-content:space-between;padding:20px}.strum-drawer-header h3{color:#f5f7fb;color:var(--text);font-size:1.25rem;margin:0}.strum-drawer-close{background:#0000;border:none;border-radius:6px;color:#a5b0c4;color:var(--muted);cursor:pointer;font-size:1.5rem;height:36px;line-height:1;padding:0;transition:color .2s,background .2s;width:36px}.strum-drawer-close:hover{background:#0000000f;color:#f5f7fb;color:var(--text)}.light .strum-drawer-close:hover{background:#0000000f}.strum-drawer-body{flex:1 1;overflow-y:auto;padding:20px}.strum-drawer-body .key-progression-selectors{flex-direction:column}.strum-drawer-body .key-selector,.strum-drawer-body .progression-pattern-selector{min-width:100%}.strum-drawer-body .section-header{margin-bottom:12px}.strum-section.playing-view{padding:15px 20px}.progression-display{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.progression-chord{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;color:#a5b0c4;color:var(--muted);font-size:1.5rem;font-weight:700;padding:12px 20px;transition:all .3s ease}.light .progression-chord{background:#fff;border-color:#ddd;color:#666}.progression-chord.active{background:#5b9dff;background:var(--accent);border-color:#5b9dff;border-color:var(--accent);box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow);color:#fff;transform:scale(1.15)}.light .progression-chord.active{box-shadow:0 0 25px #4a90e266}.strum-machine-layout{align-items:center;display:flex;flex-direction:column;padding:20px 0;width:100%}@media (max-width:768px){.strum-machine-container{padding:20px}.progression-section .section-header{align-items:stretch;flex-direction:column}.add-chord-btn.compact{width:100%}.strum-pattern-editor{gap:6px}.strum-box{height:70px;width:50px}.strum-arrow{font-size:1.5rem}.strum-label{font-size:.9rem}.chord-item{flex-wrap:wrap}.chord-item select{max-width:100%}.chord-item.compact{align-items:stretch;flex-direction:column}.chord-item.compact .measures-control{justify-content:space-between}}@media (max-width:480px){.strum-box{height:60px;width:40px}.strum-arrow{font-size:1.3rem}.strum-label{font-size:.8rem}.strum-machine-container h2{font-size:1.5rem}.strum-machine-container h3{font-size:1.1rem}}.intervals-trainer-container{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:18px;border-radius:var(--radius-lg);box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow);color:#f5f7fb;color:var(--text);margin:20px auto;max-width:1400px;padding:28px;width:95%}.light .intervals-trainer-container{background:#fff;box-shadow:0 4px 20px #0000001a;color:#333}.intervals-trainer-container h2{color:#5b9dff;color:var(--accent);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:8px;margin-top:0;text-align:left}.intervals-description{color:#a5b0c4;color:var(--muted);font-size:1rem;line-height:1.6;margin-bottom:0;text-align:left}.ear-training-container{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:18px;border-radius:var(--radius-lg);box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow);color:#f5f7fb;color:var(--text);margin:20px auto;max-width:1200px;padding:28px;width:95%}.ear-training-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-bottom:20px}.ear-training-container h2{color:#5b9dff;color:var(--accent);margin:0 0 8px}.ear-training-description{color:#a5b0c4;color:var(--muted);line-height:1.6;margin:0}.ear-training-modes{display:flex;flex-wrap:wrap;gap:10px}.mode-chip{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:999px;color:#f5f7fb;color:var(--text);cursor:pointer;padding:8px 16px;transition:all .2s ease}.mode-chip.active{background:#5b9dff;background:var(--accent);border-color:#5b9dff;border-color:var(--accent);box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow);color:#fff}.quiz-card{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);padding:20px}.quiz-toolbar{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-bottom:12px}.level-select label,.quiz-toggle{display:flex;gap:8px}.level-select label{align-items:center;color:#a5b0c4;color:var(--muted);font-size:.95rem}.level-select select{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#f5f7fb;color:var(--text);padding:8px 12px}.quiz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.quiz-options{grid-gap:12px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.quiz-option{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#f5f7fb;color:var(--text);cursor:pointer;padding:10px 12px;transition:all .2s ease}.quiz-option:hover{border-color:#5b9dff80;transform:translateY(-1px)}.quiz-feedback{display:flex;flex-direction:column;gap:6px;margin-top:16px}.quiz-summary{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;margin-top:16px;padding:16px}.summary-score{color:#f5f7fb;color:var(--text);font-size:1rem;font-weight:600;margin-bottom:8px}.summary-recommendations ul{color:#a5b0c4;color:var(--muted);margin:8px 0 0;padding-left:18px}.summary-recommendations li{margin-bottom:6px}.feedback-text{color:#a5b0c4;color:var(--muted)}.answer-text{color:#5b9dff;color:var(--accent);font-weight:600}.intervals-header{align-items:flex-start;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;margin-bottom:24px}.intervals-title{flex:1 1;max-width:640px;min-width:260px}.light .intervals-description{color:#666}.direction-selector{display:flex;gap:15px;justify-content:center;margin-bottom:0}.direction-btn{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:999px;color:#f5f7fb;color:var(--text);cursor:pointer;font-size:1rem;font-weight:600;padding:10px 24px;transition:all .3s ease}.light .direction-btn{background:#f0f0f0;border-color:#ddd;color:#333}.direction-btn:hover{background:#202636;background:var(--card-strong);border-color:#5b9dff59}.light .direction-btn:hover{background:#e0e0e0}.direction-btn.active{background:#5b9dff;background:var(--accent);border-color:#5b9dff;border-color:var(--accent);box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow);color:#fff;transform:scale(1.05)}.interval-reference-toggle-wrap{margin-bottom:12px;margin-top:24px}.interval-reference-toggle-btn{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);color:#f5f7fb;color:var(--text);cursor:pointer;font-size:.95rem;max-width:420px;padding:12px 20px;text-align:left;transition:all .2s ease;width:100%}.interval-reference-toggle-btn:hover{background:#202636;background:var(--card-strong);border-color:#5b9dff;border-color:var(--accent)}.interval-reference-toggle-btn.open{border-color:#5b9dff;border-color:var(--accent);margin-bottom:0}.interval-reference-wrap{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);margin-top:16px;padding:24px}.interval-reference-section{max-width:100%}.interval-reference-header{align-items:center;color:#a5b0c4;color:var(--muted);display:flex;flex-wrap:wrap;font-size:.95rem;gap:12px;justify-content:space-between;margin-bottom:20px}.interval-reference-section .intervals-grid{margin-bottom:0}.intervals-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));margin-bottom:30px}.interval-card{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;padding:20px;transition:all .3s ease}.light .interval-card{background:#f8f9fa;border-color:#ddd}.interval-card:hover{box-shadow:0 8px 20px #5b9dff40;transform:translateY(-2px)}.interval-card.selected,.interval-card:hover{border-color:#5b9dff;border-color:var(--accent)}.interval-card.selected{background:#5b9dff1f;box-shadow:0 0 20px #5b9dff59;box-shadow:var(--glow)}.light .interval-card.selected{background:#e8f4fd;box-shadow:0 0 20px #4a90e233}.interval-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:10px}.interval-header h3{color:#5b9dff;color:var(--accent);font-size:1.3rem;margin:0}.interval-semitones{background:#0f111580;border-radius:12px;color:#a5b0c4;color:var(--muted);font-size:.9rem;padding:4px 10px}.light .interval-semitones{background:#e0e0e0;color:#666}.interval-description{color:#a5b0c4;color:var(--muted);font-size:.95rem;line-height:1.4;margin-bottom:15px}.light .interval-description{color:#666}.interval-actions{display:flex;flex-direction:column;gap:12px}.play-interval-btn{background:#2ecc71;background:var(--success);border:none;border-radius:12px;box-shadow:0 10px 20px #2ecc7140;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px;transition:all .2s ease}.play-interval-btn:hover:not(:disabled){background:#23b164;transform:scale(1.02)}.play-interval-btn:disabled{background:#666;cursor:not-allowed;opacity:.6}.play-interval-btn.playing{animation:pulse .8s infinite;background:#e67e22}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.song-reference{align-items:center;background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;display:flex;gap:10px;justify-content:space-between;padding:12px}.light .song-reference{background:#fff;border-color:#ddd}.song-info{flex:1 1}.song-info strong{color:#5b9dff;color:var(--accent);display:block;font-size:.85rem;margin-bottom:5px}.song-title{color:#f5f7fb;color:var(--text);font-size:1rem;font-weight:600;margin-bottom:3px}.light .song-title{color:#333}.song-artist{color:#a5b0c4;color:var(--muted);font-size:.9rem}.light .song-artist{color:#666}.listen-song-btn{background:#5b9dff;background:var(--accent);border:none;border-radius:10px;box-shadow:0 10px 20px #5b9dff33;color:#fff;cursor:pointer;font-size:.95rem;padding:8px 16px;transition:all .2s ease;white-space:nowrap}.listen-song-btn:hover:not(:disabled){background:#3e82f7;background:var(--accent-strong);transform:scale(1.05)}.listen-song-btn:disabled{background:#666;cursor:not-allowed;opacity:.6}.listen-song-btn.playing{animation:pulse .8s infinite;background:#e67e22}.interval-practice{background:#202636;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;margin-top:20px;padding:25px}.light .interval-practice{background:#f8f9fa;border-color:#4a90e2}.interval-practice h3{color:#5b9dff;color:var(--accent);font-size:1.5rem;margin-top:0}.interval-practice h4{color:#5b9dff;color:var(--accent);font-size:1.1rem;margin-bottom:10px}.interval-practice p{color:#a5b0c4;color:var(--muted);font-size:1.05rem;margin-bottom:20px}.light .interval-practice p{color:#666}.practice-tips ul{list-style:none;padding:0}.practice-tips li{color:#ccc;padding:8px 0 8px 25px;position:relative}.light .practice-tips li{color:#666}.practice-tips li:before{color:#4a90e2;content:"♪";font-size:1.2rem;left:0;position:absolute}.youtube-player-overlay{align-items:center;animation:fadeIn .3s ease;background:#000000e6;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:10000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.youtube-player-container{background:#1b1f2b;background:var(--card);border-radius:12px;box-shadow:0 10px 50px #00000080;max-height:90%;max-width:90%;padding:20px;position:relative}.close-youtube-btn{align-items:center;background:#0f1115b3;border:1px solid #ffffff26;border-radius:50%;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;height:34px;justify-content:center;position:absolute;right:10px;top:10px;transition:all .2s ease;width:34px;z-index:10001}.close-youtube-btn:hover{background:#ff5d5dd9;transform:scale(1.05)}.youtube-player-container iframe{border-radius:8px;display:block}.song-info-overlay{color:#fff;margin-top:15px;text-align:center}.song-info-overlay strong{color:#4a90e2;display:block;font-size:1.3rem;margin-bottom:8px}.song-info-overlay div{color:#ccc;font-size:1rem;margin:4px 0}.note-drill-container{margin:0 auto;max-width:900px;width:95%}.note-drill-card{background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:18px;border-radius:var(--radius-lg);box-shadow:0 14px 40px #060b188c;box-shadow:var(--shadow);padding:28px}.note-drill-card h2{color:#5b9dff;color:var(--accent);margin:0 0 8px}.note-drill-description{color:#a5b0c4;color:var(--muted);font-size:.95rem;line-height:1.45;margin:0 0 24px}.note-drill-controls{align-items:center;display:flex;flex-wrap:wrap;gap:20px;margin-bottom:28px}.note-drill-bpm{align-items:center;display:flex;gap:10px}.note-drill-bpm .bpm-slider{width:120px}.note-drill-bpm .bpm-input{background:#151822;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;color:#f5f7fb;color:var(--text);font-size:1rem;padding:6px 8px;width:56px}.note-drill-play-along{color:#a5b0c4;color:var(--muted);cursor:pointer}.note-drill-mode,.note-drill-option,.note-drill-play-along{align-items:center;display:flex;gap:8px}.note-drill-mode select,.note-drill-option select{background:#151822;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;color:#f5f7fb;color:var(--text);font-size:.95rem;min-width:180px;padding:8px 12px}.note-drill-prompt-area{align-items:center;background:#151822;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);display:flex;flex-direction:column;justify-content:center;margin-bottom:24px;min-height:120px;padding:24px}.note-drill-prompt-grid{align-items:stretch;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.note-drill-block{align-items:center;background:#1b1f2b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;border-radius:var(--radius);display:flex;flex-direction:column;justify-content:center;min-width:100px;padding:16px 24px}.note-drill-block-label{color:#a5b0c4;color:var(--muted);font-size:.7rem;letter-spacing:.1em;margin-bottom:4px;text-transform:uppercase}.note-drill-block-value{color:#f5f7fb;color:var(--text);font-size:1.25rem;font-weight:600}.note-drill-block-note .note-drill-block-value{color:#5b9dff;color:var(--accent);font-size:clamp(2.5rem,8vw,4rem);font-weight:700;line-height:1.1}.note-drill-block-string .note-drill-block-value{color:#2ecc71;color:var(--success);font-size:1.1rem}.note-drill-block-fret .note-drill-block-value{color:#a5b0c4;color:var(--muted);font-weight:600}.note-drill-prompt-placeholder{color:#a5b0c4;color:var(--muted);font-size:1rem}.note-drill-fretboard-wrap{margin-top:16px}.note-drill-fretboard-wrap .fretboard-container{max-width:100%}@media (max-width:768px){.quiz-toolbar{align-items:stretch;flex-direction:column}.quiz-toggle,.quiz-toggle .mode-chip{width:100%}.level-select label{justify-content:space-between}.ear-training-header{align-items:stretch;flex-direction:column}.ear-training-modes,.mode-chip{width:100%}.intervals-header,.quiz-actions{flex-direction:column}.intervals-header{align-items:stretch}.direction-selector{justify-content:flex-start}.direction-btn{width:100%}.youtube-player-container iframe{height:250px!important;width:100%!important}.youtube-player-container{padding:15px}.close-youtube-btn{font-size:.95rem;height:32px;right:8px;top:8px;width:32px}.note-drill-controls{align-items:stretch;flex-direction:column}.note-drill-mode select,.note-drill-option select{min-width:100%}.note-drill-prompt-grid{flex-direction:column;margin:0 auto;max-width:220px;width:100%}.note-drill-block-note .note-drill-block-value{font-size:2.5rem}.intervals-grid{grid-template-columns:1fr}.intervals-trainer-container{padding:20px}.interval-card{padding:15px}.song-reference{align-items:stretch;flex-direction:column}.listen-song-btn{width:100%}}
/*# sourceMappingURL=main.bbcba046.css.map*/