html{scroll-behavior:smooth}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0;touch-action:manipulation}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--bg:#09090b;--bg-elevated:#18181b;--card:#18181b;--card-strong:#27272a;--text:#fafafa;--muted:#a1a1aa;--border:#ffffff14;--border-strong:#ffffff1f;--accent:#38bdf8;--accent-strong:#0ea5e9;--accent-muted:color-mix(in srgb,var(--accent) 28%,#0000);--success:#4ade80;--danger:#fb7185;--shadow:0 25px 50px -12px #0000008c;--shadow-sm:0 4px 14px #00000040;--radius:14px;--radius-lg:22px;--radius-sm:10px;--glow:0 0 32px color-mix(in srgb,var(--accent) 45%,#0000);--font-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--surface-glass:#18181bb8}.App{background-image:radial-gradient(ellipse 120% 80% at 50% -30%,#38bdf824,#0000 55%),radial-gradient(ellipse 70% 50% at 100% 0,#a78bfa14,#0000 45%),radial-gradient(ellipse 60% 40% at 0 20%,#22d3ee0f,#0000 40%);box-sizing:border-box;font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-sans);letter-spacing:-.01em;margin-inline:auto;max-width:1120px;min-height:100vh;min-height:100dvh;padding:clamp(16px,3vw,36px) max(clamp(16px,3vw,36px),env(safe-area-inset-right)) clamp(16px,3vw,36px) max(clamp(16px,3vw,36px),env(safe-area-inset-left));position:relative;text-align:center;transition:background .35s ease,color .35s ease;width:100%}.App,.App.light{background-color:#09090b;background-color:var(--bg);color:#fafafa;color:var(--text)}.App.light{--bg:#fafafa;--bg-elevated:#fff;--card:#fff;--card-strong:#f4f4f5;--text:#18181b;--muted:#71717a;--border:#09090b14;--border-strong:#09090b1f;--accent:#0284c7;--accent-strong:#0369a1;--accent-muted:color-mix(in srgb,var(--accent) 22%,#0000);--shadow:0 20px 40px -12px #0f172a1f;--shadow-sm:0 4px 14px #0f172a0f;--surface-glass:#ffffffd1;background-image:radial-gradient(ellipse 100% 70% at 50% -20%,#0ea5e91f,#0000 50%),radial-gradient(ellipse 60% 50% at 100% 0,#8b5cf60f,#0000 45%)}.app-header{border-bottom:1px solid #ffffff14;border-bottom:1px solid var(--border);margin-bottom:28px;margin-top:4px;padding-bottom:24px}.app-title{background:linear-gradient(135deg,#fafafa,color-mix(in srgb,#fafafa 72%,#38bdf8));background:linear-gradient(135deg,var(--text) 0,color-mix(in srgb,var(--text) 72%,var(--accent)) 100%);-webkit-background-clip:text;background-clip:text;color:#fafafa;color:var(--text);font-size:clamp(1.9rem,4.2vw,2.85rem);font-weight:800;letter-spacing:-.045em;line-height:1.1;margin:0 0 8px}.app-title,.light .app-title{-webkit-text-fill-color:#0000}.light .app-title{background:linear-gradient(135deg,#09090b,#0369a1);-webkit-background-clip:text;background-clip:text}.app-title:after{-webkit-text-fill-color:initial;background:linear-gradient(90deg,#38bdf8,#0ea5e9);background:linear-gradient(90deg,var(--accent),var(--accent-strong));border-radius:999px;content:"";display:block;height:4px;margin:14px auto 0;opacity:.95;width:40px}.app-tagline{font-size:clamp(.9rem,1.75vw,1.05rem);font-weight:500;letter-spacing:-.01em;margin:0}.app-tagline,.light .app-tagline{color:#a1a1aa;color:var(--muted)}.mode-toggle{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:999px;box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0a;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0a;display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:0 auto 28px;max-width:min(100%,920px);padding:5px}.light .mode-toggle{background:#ffffffe6;box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffffe6;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffffe6}.mode-toggle button{background:#0000;border:none;border-radius:999px;cursor:pointer;font-size:.8125rem;font-weight:600;letter-spacing:-.02em;padding:11px 16px;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .15s ease}.light .mode-toggle button,.mode-toggle button{color:#a1a1aa;color:var(--muted)}.mode-toggle button:hover{background:#ffffff0f;color:#fafafa;color:var(--text)}.light .mode-toggle button:hover{background:#09090b0d;color:#fafafa;color:var(--text)}.mode-toggle button.active{background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent) 0,var(--accent-strong) 100%);box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000),0 2px 8px #0003;box-shadow:var(--glow),0 2px 8px #0003;color:#fff;font-weight:700}.mode-toggle button:focus-visible{outline:2px solid #38bdf8;outline:2px solid var(--accent);outline-offset:2px}.light .mode-toggle button.active{box-shadow:0 8px 24px color-mix(in srgb,#38bdf8 35%,#0000);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 35%,#0000)}.controls{align-items:stretch;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 4px 14px #00000040;box-shadow:var(--shadow-sm);display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:36px;margin-left:auto;margin-right:auto;max-width:720px;padding:20px 22px}.light .controls{background:#ffffffd9}.chord-display-options{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.chord-display-options label{align-items:center;border:1px solid #0000;border-radius:10px;border-radius:var(--radius-sm);cursor:pointer;display:flex;gap:8px;padding:8px 12px;transition:background .2s ease,border-color .2s ease}.chord-display-options label:hover{background:color-mix(in srgb,#38bdf8 28%,#0000);background:var(--accent-muted);border-color:#ffffff14;border-color:var(--border)}.chord-display-options input[type=radio]{accent-color:#38bdf8;accent-color:var(--accent);cursor:pointer;height:1rem;width:1rem}.chord-position-options{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:8px}.chord-position-options label{align-items:center;border-radius:10px;border-radius:var(--radius-sm);cursor:pointer;display:flex;gap:8px;padding:8px 12px;transition:background .2s ease}.chord-position-options label:hover{background:color-mix(in srgb,#38bdf8 28%,#0000);background:var(--accent-muted)}.chord-position-options input[type=radio]{accent-color:#38bdf8;accent-color:var(--accent);cursor:pointer;height:1rem;width:1rem}.chord-tone-legend{border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);color:#a1a1aa;color:var(--muted);display:flex;flex-wrap:wrap;font-size:.8125rem;font-weight:500;gap:12px 18px;justify-content:center;margin-top:14px;padding:14px 18px}.chord-tone-legend,.light .chord-tone-legend{background:#27272a;background:var(--card-strong)}.chord-tone-legend-item{align-items:center;display:inline-flex;gap:8px}.chord-tone-legend-item .dot{border-radius:50%;box-shadow:0 0 0 2px #00000026;flex-shrink:0;height:10px;width:10px}.chord-tone-legend-item.root .dot{background:#fbbf24}.chord-tone-legend-item.third .dot{background:#38bdf8}.chord-tone-legend-item.fifth .dot{background:#34d399}.chord-tone-legend-item.seventh .dot{background:#c084fc}label{align-items:center;color:#a1a1aa;color:var(--muted);display:flex;font-size:.875rem;font-weight:600;gap:10px;letter-spacing:-.02em}select{border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;border-radius:var(--radius-sm);box-shadow:inset 0 1px 0 #ffffff0a;cursor:pointer;font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-sans);font-size:.9375rem;font-weight:500;min-width:8rem;padding:11px 16px;transition:border .2s ease,background .2s ease,box-shadow .2s ease}.light select,select{background:#27272a;background:var(--card-strong);color:#fafafa;color:var(--text)}.light select{border-color:#ffffff14;border-color:var(--border);box-shadow:none}select:hover{background:#18181b;background:var(--bg-elevated);border-color:color-mix(in srgb,#38bdf8 45%,#ffffff14);border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}.light select:hover{background:#fff}select:focus-visible{outline:2px solid #38bdf8;outline:2px solid var(--accent);outline-offset:2px}.fretboard-container{align-items:center;display:flex;justify-content:center;max-width:100%;overflow-x:auto;overflow-y:visible;padding:24px 12px}.fretboard{background:linear-gradient(180deg,#ffffff0a,#0000 40%),linear-gradient(165deg,#3d2e28,#1c1410 48%,#120d0a);border:1px solid #ffffff1f;border:1px solid var(--border-strong);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 25px 50px -12px #0000008c,inset 0 1px 0 #ffffff0f;box-shadow:var(--shadow),inset 0 1px 0 #ffffff0f;min-width:-webkit-fit-content;min-width:fit-content;padding:22px 24px;position:relative}.light .fretboard{background:linear-gradient(180deg,#ffffffa6,#0000 45%),linear-gradient(165deg,#faf5ef,#ede4d8 50%,#e8dccf);border-color:#ffffff14;border-color:var(--border);box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffffe6;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffffe6}.fret-numbers{display:flex;margin-bottom:12px;padding-left:0}.fret-number{color:#a8a29e;font-size:.8125rem;font-weight:600;letter-spacing:-.02em;text-align:center;width:60px}.fret-number.open-fret{color:#78716c;font-weight:700;width:48px}.light .fret-number{color:#78716c}.string-row{height:40px;position:relative}.open-string,.string-row{align-items:center;display:flex}.open-string{background:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:50%;color:#fafafa;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:#38bdf8;border-color:var(--accent);box-shadow:0 0 12px color-mix(in srgb,#38bdf8 50%,#0000);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 50%,#0000)}.open-string.root-note{border-color:#fb7185;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:#0ea5e9;border-color:#0ea5e9;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:color-mix(in srgb,#38bdf8 65%,#0000);border-color:color-mix(in srgb,var(--accent) 65%,#0000);box-shadow:0 0 12px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,#0000);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:#18181b;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:color-mix(in srgb,#38bdf8 70%,#0000);border-color:color-mix(in srgb,var(--accent) 70%,#0000);box-shadow:0 0 20px color-mix(in srgb,#38bdf8 55%,#0000);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 55%,#0000);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:#fafafa;color:var(--text);font-size:.72rem;font-weight:600}.root-note .note-text{color:#fff}.note-circle.highlight-drill{background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent) 0,var(--accent-strong) 100%);border-color:color-mix(in srgb,#38bdf8 80%,#fff);border-color:color-mix(in srgb,var(--accent) 80%,#fff);box-shadow:0 0 22px color-mix(in srgb,#38bdf8 60%,#0000),0 0 0 2px #ffffff1f;box-shadow:0 0 22px color-mix(in srgb,var(--accent) 60%,#0000),0 0 0 2px #ffffff1f;cursor:default;transform:scale(1.1);z-index:3}.note-circle.highlight-drill .note-text{color:#fff;font-weight:700}.open-string.highlight-drill{background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent) 0,var(--accent-strong) 100%);border-color:color-mix(in srgb,#38bdf8 75%,#fff);border-color:color-mix(in srgb,var(--accent) 75%,#fff);box-shadow:0 0 18px color-mix(in srgb,#38bdf8 55%,#0000);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,#0000);color:#fff;transform:scale(1.08);z-index:2}.light .open-string.highlight-drill{color:#fff}.fret-markers{display:flex;margin-top:15px;padding-left:0}.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:#38bdf8;background:var(--accent);border-color:#38bdf8;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:#0ea5e9;border-color:#0ea5e9;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 #38bdf8;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:#0ea5e9;color:#0ea5e9}.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:#38bdf8;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{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0d;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0d;box-sizing:border-box;margin:40px auto;max-width:800px;padding:28px 26px;width:100%}.light .metronome-container{background:#ffffffeb;box-shadow:0 4px 14px #00000040;box-shadow:var(--shadow-sm)}.metronome-container h2{font-size:1.25rem;font-weight:700;letter-spacing:-.03em;margin-bottom:22px;margin-top:0;text-align:center}.light .metronome-container h2,.metronome-container h2{color:#fafafa;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:#a1a1aa;color:var(--muted);font-weight:700;white-space:nowrap}.light .bpm-control label{color:#666}.bpm-slider{background:color-mix(in srgb,#a1a1aa 22%,#0000);background:color-mix(in srgb,var(--muted) 22%,#0000);border-radius:999px;cursor:pointer;flex:1 1;height:8px;outline:none}.light .bpm-slider{background:#e4e4e7}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent),var(--accent-strong));border:2px solid #ffffff59;border-radius:50%;box-shadow:0 2px 8px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 45%,#0000);cursor:pointer;height:22px;width:22px}.bpm-slider::-moz-range-thumb{background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent),var(--accent-strong));border:2px solid #ffffff59;border-radius:50%;box-shadow:0 2px 8px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 45%,#0000);cursor:pointer;height:22px;width:22px}.bpm-input{background:#27272a;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;border-radius:var(--radius-sm);color:#fafafa;color:var(--text);font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-sans);font-size:1rem;font-weight:600;padding:8px 10px;text-align:center;width:64px}.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:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent) 0,var(--accent-strong) 100%);border:none;border-radius:999px;box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000),0 4px 14px #0003;box-shadow:var(--glow),0 4px 14px #0003;color:#fff;cursor:pointer;font-family:Plus Jakarta Sans,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-family:var(--font-sans);font-size:.9375rem;font-weight:700;letter-spacing:-.02em;padding:12px 32px;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}.play-button:hover{filter:brightness(1.06);transform:translateY(-1px)}.play-button.playing{background:linear-gradient(145deg,#fb7185,#e11d48);background:linear-gradient(145deg,var(--danger),#e11d48)}.play-button.playing:hover{filter:brightness(1.05)}.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:#27272a;background:var(--card-strong);border:3px solid #0000;border-radius:50%;color:#fafafa;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:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent),var(--accent-strong));border-color:color-mix(in srgb,#38bdf8 55%,#0000);border-color:color-mix(in srgb,var(--accent) 55%,#0000);box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:var(--glow);color:#fff;transform:scale(1.12)}.emphasis-control{align-items:center;display:flex;gap:8px}.emphasis-btn{align-items:center;background:#27272a;background:var(--card-strong);border:none;border-radius:50%;color:#fafafa;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:color-mix(in srgb,#38bdf8 28%,#0000);background:var(--accent-muted)}.light .emphasis-btn:hover:not(:disabled){background:#ccc}.emphasis-btn:disabled{cursor:not-allowed;opacity:.3}.emphasis-level{background:#27272a;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:color-mix(in srgb,#38bdf8 78%,#000);background:color-mix(in srgb,var(--accent) 78%,#000)}.emphasis-level.level-2 .emphasis-fill{background:#ffb24a}.emphasis-level.level-3 .emphasis-fill{background:#fb7185;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:#38bdf8;background:var(--accent)}.legend-color.level-2{background:orange}.legend-color.level-3{background:#ff6b6b}.app-footer{color:#a1a1aa;color:var(--muted);font-size:.95rem;margin-top:48px;padding:24px 20px calc(80px + env(safe-area-inset-bottom))}.light .app-footer{color:#888}.theme-toggle{align-items:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff1f;border:1px solid var(--border-strong);border-radius:50%;bottom:calc(20px + env(safe-area-inset-bottom));box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0f;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0f;color:#fafafa;color:var(--text);cursor:pointer;display:flex;font-size:1.45rem;height:52px;justify-content:center;position:fixed;right:calc(20px + env(safe-area-inset-right));transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;width:52px}.light .theme-toggle{background:#ffffffeb;border-color:#ffffff14;border-color:var(--border);box-shadow:0 4px 14px #00000040;box-shadow:var(--shadow-sm)}.theme-toggle:hover{border-color:color-mix(in srgb,#38bdf8 40%,#ffffff14);border-color:color-mix(in srgb,var(--accent) 40%,var(--border));box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000),0 4px 14px #00000040;box-shadow:var(--glow),var(--shadow-sm);transform:translateY(-3px) scale(1.04)}@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;min-height:44px;padding:8px 12px}.App{padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}.controls{align-items:stretch;flex-direction:column;gap:14px}.controls label{font-size:.95rem;justify-content:space-between}.controls select{font-size:16px}.chord-display-options{flex-direction:column;gap:10px}.fretboard{padding:12px}.fret-container,.fret-number{width:40px}.open-string{font-size:.9rem;height:30px;min-height:30px;min-width:30px;width:30px}.note-circle{height:24px;min-height:24px;min-width:24px;width:24px}.note-text{font-size:.65rem}.fret-marker-spacer,.fret-number.open-fret{width:40px}.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{bottom:calc(20px + env(safe-area-inset-bottom));font-size:1.2rem;height:44px;right:calc(20px + env(safe-area-inset-right));width:44px}}@media (max-width:600px){.app-header{margin-bottom:16px;padding-bottom:14px}.app-title{font-size:1.5rem}.app-tagline{font-size:.85rem}.mode-toggle{margin-bottom:16px;max-width:100%;width:100%}.mode-toggle button{flex:1 1;font-size:.75rem;min-width:0;padding:10px 8px}.controls{gap:12px;margin-bottom:20px}.chord-display-options,.chord-position-options{flex-direction:column;gap:8px}.fretboard-container{align-items:center;display:flex;justify-content:center;margin:0 auto;min-height:min(85vh,85dvh);overflow:visible;padding:16px 8px}.fretboard-container .fretboard{margin:0;transform:rotate(-90deg) scale(min(1,.10526vh,calc(100dvh/950)));transform-origin:center center}.fretboard{padding:14px}.fret-container,.fret-number,.fret-number.open-fret{width:36px}.open-string{font-size:.8rem;height:28px;margin-right:8px;min-height:28px;min-width:28px;width:28px}.string-row{height:34px}.note-circle{height:22px;min-height:22px;min-width:22px;width:22px}.note-text{font-size:.6rem}.fret-markers{margin-top:10px}.fret-marker-spacer{width:36px}.fret-numbers{padding-left:0}.app-footer{margin-top:32px;padding-bottom:calc(80px + env(safe-area-inset-bottom))}.theme-toggle{bottom:calc(16px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right))}}@media (max-width:480px){.fret-container,.fret-number{width:30px}.fret-number.open-fret{width:32px}.fret-numbers{padding-left:0}.fret-marker-spacer{width:32px}.open-string{font-size:.75rem;height:24px;min-height:24px;min-width:24px;width:24px}.string-row{height:30px}.note-circle{height:20px;min-height:20px;min-width:20px;width:20px}.note-text{font-size:.55rem}.mode-toggle button{font-size:.7rem;padding:8px 4px}}.strum-machine-container{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0d;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0d;box-sizing:border-box;color:#fafafa;color:var(--text);margin:20px auto;max-width:1200px;padding:28px 26px;width:95%}.light .strum-machine-container{background:#ffffffeb;box-shadow:0 4px 14px #00000040;box-shadow:var(--shadow-sm);color:#18181b}.strum-machine-container h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#fafafa,#38bdf8);background:linear-gradient(135deg,var(--text) 0,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:#fafafa;color:var(--text);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.04em;margin-bottom:28px;margin-top:0;text-align:center}.light .strum-machine-container h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#09090b,#38bdf8);background:linear-gradient(135deg,#09090b 0,var(--accent) 100%);-webkit-background-clip:text;background-clip:text}.strum-machine-container h3{color:#fafafa;color:var(--text);font-size:1.2rem;margin-bottom:15px;margin-top:0}.light .strum-machine-container h3{color:#333}.strum-section{background:#27272a;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#fafafa;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:#18181b;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 10px 24px color-mix(in srgb,#38bdf8 28%,#0000);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,#0000);transform:translateY(-2px)}.strum-box.active,.strum-box:hover{border-color:#38bdf8;border-color:var(--accent)}.strum-box.active{background:#38bdf8;background:var(--accent);box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:var(--glow);transform:scale(1.1)}.strum-arrow{color:#38bdf8;color:var(--accent);font-size:2rem;font-weight:700;margin-bottom:5px}.strum-box.active .strum-arrow{color:#fff}.strum-label{color:#a1a1aa;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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#fafafa;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:#18181b;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:color-mix(in srgb,#38bdf8 28%,#0000);background:var(--accent-muted);border-color:#38bdf8;border-color:var(--accent);box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:var(--glow)}.light .chord-item.active{background:#e8f4fd;box-shadow:0 0 15px #4a90e233}.chord-item select{background:#27272a;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#fafafa;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:#a1a1aa;color:var(--muted);font-size:.8rem}.light .measures-control label{color:#666}.measures-control input{background:#27272a;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;color:#fafafa;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:#fb7185;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:#4ade80;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:#fafafa;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:#27272a;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:#fafafa;color:var(--text);font-size:1.25rem;margin:0}.strum-drawer-close{background:#0000;border:none;border-radius:6px;color:#a1a1aa;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:#fafafa;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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;color:#a1a1aa;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:#38bdf8;background:var(--accent);border-color:#38bdf8;border-color:var(--accent);box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);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{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0d;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0d;color:#fafafa;color:var(--text);margin:20px auto;max-width:1400px;padding:28px 26px;width:95%}.light .intervals-trainer-container{background:#ffffffeb;box-shadow:0 4px 14px #00000040;box-shadow:var(--shadow-sm);color:#18181b}.intervals-trainer-container h2{color:#fafafa;color:var(--text);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;letter-spacing:-.04em;margin-bottom:8px;margin-top:0;text-align:left}.intervals-description{color:#a1a1aa;color:var(--muted);font-size:1rem;line-height:1.6;margin-bottom:0;text-align:left}.ear-training-container{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0d;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0d;color:#fafafa;color:var(--text);margin:20px auto;max-width:1200px;padding:28px 26px;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:#fafafa;color:var(--text);font-size:clamp(1.35rem,2.5vw,1.75rem);font-weight:800;letter-spacing:-.04em;margin:0 0 8px}.ear-training-description{color:#a1a1aa;color:var(--muted);line-height:1.6;margin:0}.ear-training-modes{display:flex;flex-wrap:wrap;gap:10px}.mode-chip{background:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:999px;color:#fafafa;color:var(--text);cursor:pointer;padding:8px 16px;transition:all .2s ease}.mode-chip.active{background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent),var(--accent-strong));border-color:#0000;box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);box-shadow:var(--glow);color:#fff}.quiz-card{background:#27272a;background:var(--card-strong);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;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:#a1a1aa;color:var(--muted);font-size:.95rem}.level-select select{background:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#fafafa;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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:10px;color:#fafafa;color:var(--text);cursor:pointer;padding:10px 12px;transition:all .2s ease}.quiz-option:hover{border-color:color-mix(in srgb,#38bdf8 55%,#ffffff14);border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-1px)}.quiz-feedback{display:flex;flex-direction:column;gap:6px;margin-top:16px}.quiz-summary{background:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:12px;margin-top:16px;padding:16px}.summary-score{color:#fafafa;color:var(--text);font-size:1rem;font-weight:600;margin-bottom:8px}.summary-recommendations ul{color:#a1a1aa;color:var(--muted);margin:8px 0 0;padding-left:18px}.summary-recommendations li{margin-bottom:6px}.feedback-text{color:#a1a1aa;color:var(--muted)}.answer-text{color:#38bdf8;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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:999px;color:#fafafa;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:#27272a;background:var(--card-strong);border-color:color-mix(in srgb,#38bdf8 40%,#ffffff14);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}.light .direction-btn:hover{background:#e0e0e0}.direction-btn.active{background:linear-gradient(145deg,#38bdf8,#0ea5e9);background:linear-gradient(145deg,var(--accent),var(--accent-strong));border-color:#0000;box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);color:#fafafa;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:#27272a;background:var(--card-strong);border-color:#38bdf8;border-color:var(--accent)}.interval-reference-toggle-btn.open{border-color:#38bdf8;border-color:var(--accent);margin-bottom:0}.interval-reference-wrap{background:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);margin-top:16px;padding:24px}.interval-reference-section{max-width:100%}.interval-reference-header{align-items:center;color:#a1a1aa;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:#27272a;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 12px 28px color-mix(in srgb,#38bdf8 22%,#0000);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 22%,#0000);transform:translateY(-2px)}.interval-card.selected,.interval-card:hover{border-color:#38bdf8;border-color:var(--accent)}.interval-card.selected{background:color-mix(in srgb,#38bdf8 28%,#0000);background:var(--accent-muted);box-shadow:0 0 32px color-mix(in srgb,#38bdf8 45%,#0000);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:#38bdf8;color:var(--accent);font-size:1.3rem;margin:0}.interval-semitones{background:#0f111580;border-radius:12px;color:#a1a1aa;color:var(--muted);font-size:.9rem;padding:4px 10px}.light .interval-semitones{background:#e0e0e0;color:#666}.interval-description{color:#a1a1aa;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:#4ade80;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:#18181b;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:#38bdf8;color:var(--accent);display:block;font-size:.85rem;margin-bottom:5px}.song-title{color:#fafafa;color:var(--text);font-size:1rem;font-weight:600;margin-bottom:3px}.light .song-title{color:#333}.song-artist{color:#a1a1aa;color:var(--muted);font-size:.9rem}.light .song-artist{color:#666}.listen-song-btn{background:#38bdf8;background:var(--accent);border:none;border-radius:10px;box-shadow:0 10px 24px color-mix(in srgb,#38bdf8 35%,#0000);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,#0000);color:#fff;cursor:pointer;font-size:.95rem;padding:8px 16px;transition:all .2s ease;white-space:nowrap}.listen-song-btn:hover:not(:disabled){background:#0ea5e9;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:#27272a;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:#38bdf8;color:var(--accent);font-size:1.5rem;margin-top:0}.interval-practice h4{color:#38bdf8;color:var(--accent);font-size:1.1rem;margin-bottom:10px}.interval-practice p{color:#a1a1aa;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:#18181b;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{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:#18181bb8;background:var(--surface-glass);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:22px;border-radius:var(--radius-lg);box-shadow:0 4px 14px #00000040,inset 0 1px 0 #ffffff0d;box-shadow:var(--shadow-sm),inset 0 1px 0 #ffffff0d;padding:28px 26px}.note-drill-card h2{color:#fafafa;color:var(--text);font-weight:800;letter-spacing:-.03em;margin:0 0 8px}.note-drill-description{color:#a1a1aa;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:#18181b;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;color:#fafafa;color:var(--text);font-size:1rem;padding:6px 8px;width:56px}.note-drill-play-along{color:#a1a1aa;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:#18181b;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:8px;color:#fafafa;color:var(--text);font-size:.95rem;min-width:180px;padding:8px 12px}.note-drill-prompt-area{align-items:center;background:#18181b;background:var(--bg-elevated);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;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:#18181b;background:var(--card);border:1px solid #ffffff14;border:1px solid var(--border);border-radius:14px;border-radius:var(--radius);display:flex;flex-direction:column;justify-content:center;min-width:100px;padding:16px 24px}.note-drill-block-label{color:#a1a1aa;color:var(--muted);font-size:.7rem;letter-spacing:.1em;margin-bottom:4px;text-transform:uppercase}.note-drill-block-value{color:#fafafa;color:var(--text);font-size:1.25rem;font-weight:600}.note-drill-block-note .note-drill-block-value{color:#38bdf8;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:#4ade80;color:var(--success);font-size:1.1rem}.note-drill-block-fret .note-drill-block-value{color:#a1a1aa;color:var(--muted);font-weight:600}.note-drill-prompt-placeholder{color:#a1a1aa;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.350f8288.css.map*/