:root{--primary-purple: #00d96f;--primary-purple-dark: #00b359;--primary-purple-6600cc: #00a04d;--primary-purple-light: #2ee88d;--primary-purple-lighter: #66ffb2;--primary-purple-alpha-5: rgb(0, 217, 111, .05);--primary-purple-alpha-10: rgb(0, 217, 111, .1);--primary-purple-alpha-15: rgb(0, 217, 111, .15);--primary-purple-alpha-20: rgb(0, 217, 111, .2);--primary-purple-alpha-25: rgb(0, 217, 111, .25);--primary-purple-alpha-30: rgb(0, 217, 111, .3);--primary-purple-alpha-40: rgb(0, 217, 111, .4);--primary-purple-alpha-50: rgb(0, 217, 111, .5);--primary-purple-alpha-60: rgb(0, 217, 111, .6);--primary-purple-alpha-80: rgb(0, 217, 111, .8);--light-bg-primary: #ffffff;--light-bg-secondary: #f8f9fa;--light-bg-tertiary: #e4ffe8;--light-bg-quaternary: #f0fff0;--light-bg-gradient-1: #e4ffe8;--light-bg-gradient-2: #d2f9d2;--light-bg-gradient-3: #f0fff0;--light-bg-gradient-4: #d8ffe1;--light-text-primary: #121212;--light-text-secondary: #374151;--light-text-tertiary: #6b7280;--light-border-primary: #e2e8f0;--light-border-secondary: #d1d5db;--dark-bg-primary: #121212;--dark-bg-secondary: #1a202c;--dark-bg-tertiary: #1b6940;--dark-bg-quaternary: #0d2e1a;--dark-bg-surface: #0a0a0a;--dark-text-primary: #d2f9d2;--dark-text-secondary: #ffffff;--dark-text-tertiary: #e9ecef;--dark-border-primary: #4a5568;--dark-border-secondary: #2d3748;--blue-007bff: #007bff;--blue-0056b3: #0056b3;--blue-003d7a: #003d7a;--blue-100: #dbeafe;--blue-200: #bfdbfe;--blue-300: #93c5fd;--blue-400: #60a5fa;--blue-450: #4a90e2;--blue-500: #3b82f6;--blue-550: #357abd;--blue-580: #4589cd;--blue-590: #5a9ff2;--blue-600: #2563eb;--blue-650: #2969a3;--blue-700: #1d4ed8;--blue-800: #1e40af;--blue-900: #1e3a8a;--blue-alpha-05: rgb(59, 130, 246, .05);--blue-alpha-10: rgb(59, 130, 246, .1);--blue-alpha-20: rgb(59, 130, 246, .2);--blue-alpha-30: rgb(59, 130, 246, .3);--blue-alpha-40: rgb(59, 130, 246, .4);--blue-alpha-50: rgb(59, 130, 246, .5);--blue-alpha-60: rgb(59, 130, 246, .6);--blue-alpha-80: rgb(59, 130, 246, .8);--blue-450-alpha-30: rgb(74, 144, 226, .3);--blue-450-alpha-40: rgb(74, 144, 226, .4);--blue-450-alpha-50: rgb(74, 144, 226, .5);--blue-450-alpha-60: rgb(74, 144, 226, .6);--blue-450-alpha-80: rgb(74, 144, 226, .8);--cyan-60d5f8: #60d5f8;--green-28a745: #28a745;--green-218838: #218838;--green-20c997: #20c997;--green-1ba085: #1ba085;--green-1a9977: #1a9977;--green-100: #dcfce7;--green-200: #bbf7d0;--green-4caf50: #4caf50;--green-a5d6a7: #a5d6a7;--green-400: #4ade80;--green-449d44: #449d44;--green-500: #22c55e;--green-550: #10b981;--green-5cb85c: #5cb85c;--green-600: #16a34a;--green-700: #15803d;--green-800: #166534;--green-light: #86efac;--green-border: #22c55e;--green-alpha-05: rgb(34, 197, 94, .05);--green-alpha-10: rgb(34, 197, 94, .1);--green-alpha-20: rgb(34, 197, 94, .2);--green-alpha-30: rgb(34, 197, 94, .3);--green-alpha-40: rgb(34, 197, 94, .4);--green-alpha-50: rgb(34, 197, 94, .5);--green-alpha-60: rgb(34, 197, 94, .6);--green-alpha-80: rgb(34, 197, 94, .8);--green-light-alpha-50: rgb(134, 239, 172, .5);--red-991b1b: #991b1b;--red-c53030: #c53030;--red-c82333: #c82333;--red-dc3545: #dc3545;--red-e53e3e: #e53e3e;--red-500: #ef4444;--red-600: #dc2626;--red-700: #b91c1c;--red-light: #f87171;--red-lighter: #fca5a5;--red-f5c2c7: #f5c2c7;--red-ff0066: #ff0066;--red-ff4444: #ff4444;--red-alpha-05: rgb(239, 68, 68, .05);--red-alpha-10: rgb(239, 68, 68, .1);--red-alpha-20: rgb(239, 68, 68, .2);--red-alpha-30: rgb(239, 68, 68, .3);--red-alpha-40: rgb(239, 68, 68, .4);--red-alpha-50: rgb(239, 68, 68, .5);--red-alpha-60: rgb(239, 68, 68, .6);--red-alpha-80: rgb(239, 68, 68, .8);--red-light-alpha-60: rgb(248, 113, 113, .6);--red-dc3545-alpha-0: rgb(220, 53, 69, 0);--red-dc3545-alpha-70: rgb(220, 53, 69, .7);--orange-b45309: #b45309;--orange-d97706: #d97706;--orange-400: #fb923c;--orange-500: #f97316;--orange-600: #ea580c;--orange-700: #c2410c;--orange-ff7700: #ff7700;--orange-ff8c00: #ff8c00;--orange-scale: #f97316;--orange-scale-dark: #ea580c;--orange-alpha-40: rgb(249, 115, 22, .4);--orange-400-alpha-60: rgb(251, 146, 60, .6);--orange-600-alpha-60: rgb(217, 119, 6, .6);--amber-200: #fef3c7;--amber-400: #fbbf24;--amber-500: #f59e0b;--amber-ffcc02: #ffcc02;--amber-ffd700: #ffd700;--amber-ffed4e: #ffed4e;--amber-alpha-60: rgb(245, 158, 11, .6);--amber-alpha-80: rgb(251, 191, 36, .8);--yellow-400: #facc15;--purple-300: #d8b4fe;--purple-400: #c084fc;--purple-500: #a855f7;--purple-600: #a855f7;--purple-6366f1: #6366f1;--purple-6d28d9: #6d28d9;--purple-700: #9333ea;--purple-800: #7e22ce;--purple-8e44ad: #8e44ad;--purple-9333ea: #9333ea;--purple-9b59b6: #9b59b6;--purple-chord: #a855f7;--purple-chord-dark: #9333ea;--purple-alpha-40: rgb(168, 85, 247, .4);--purple-600-alpha-60: rgb(168, 85, 247, .6);--white: #ffffff;--white-e5e5e5: #e5e5e5;--black: #000000;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-f8f9fa: #f8f9fa;--gray-e9ecef: #e9ecef;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-333: #333333;--gray-400: #9ca3af;--gray-404040: #404040;--gray-400-alpha-30: rgb(156, 163, 175, .3);--gray-444: #444444;--gray-neutral: #808080;--gray-500: #6b7280;--gray-555: #555555;--gray-6c757d: #6c757d;--gray-600: #4b5563;--gray-666: #666666;--gray-700: #374151;--gray-777: #777777;--gray-800: #1f2937;--gray-888: #888888;--gray-111111: #111111;--gray-1a1a1a: #1a1a1a;--gray-1e1e1e: #1e1e1e;--gray-212529: #212529;--gray-2a1a14: #2a1a14;--gray-2d2d2d: #2d2d2d;--gray-2d3338: #2d3338;--gray-3e2723: #3e2723;--gray-343a40: #343a40;--gray-850: #2d3748;--gray-900: #111827;--gray-999: #999999;--gray-c9c9c9: #c9c9c9;--gray-ccc: #cccccc;--gray-d5d5d5: #d5d5d5;--gray-dee2e6: #dee2e6;--gray-ddd: #dddddd;--gray-e0e0e0: #e0e0e0;--gray-f0f0dc: #f0f0dc;--gray-f0f9ff: #f0f9ff;--gray-f5f5f5: #f5f5f5;--gray-f5f5dc: #f5f5dc;--gray-1a1a1a-alpha-90: rgb(26, 26, 26, .9);--gray-1a1a1a-alpha-95: rgb(26, 26, 26, .95);--keyboard-white-key: #ffffff;--keyboard-white-key-secondary: #f9fafb;--keyboard-white-key-hover: #f7fafc;--keyboard-white-key-border: #e2e8f0;--keyboard-black-key: #374151;--keyboard-black-key-secondary: #111827;--keyboard-black-key-border: #4b5563;--guitar-fretboard-primary: #3e2723;--guitar-fretboard-secondary: #1e1e1e;--guitar-surface: #2a1f1c;--guitar-border: #2d2d2d;--fret-wire-primary: #c9c9c9;--fret-wire-secondary: #888888;--fret-marker: #f5f5dc;--fret-marker-secondary: #dddddd;--fret-marker-border: #bbbbbb;--string-1: #e6e6e6;--string-2: #d9d9d9;--string-3: #d0d0d0;--string-4: #c8c8c8;--string-5: #b0b0b0;--string-6: #a0a0a0;--string-center: #999999;--string-center-dark: #808080;--string-center-darker: #707070;--string-center-darkest: #606060;--note-selected: #3b82f6;--note-selected-dark: #1d4ed8;--note-melody: #4caf50;--note-melody-dark: #2e7d32;--note-scale: #f97316;--note-scale-dark: #ea580c;--note-scale-root: #dc2626;--note-scale-root-dark: #b91c1c;--note-chord: #a855f7;--note-chord-dark: #9333ea;--note-chord-root: #dc2626;--note-chord-root-dark: #b91c1c;--scrollbar-track: #1a1a1a;--scrollbar-thumb-primary: #00b359;--scrollbar-thumb-secondary: #00d96f;--scrollbar-thumb-hover-primary: #2ee88d;--scrollbar-thumb-hover-secondary: #66ffb2;--scrollbar-thumb-active-primary: #00a04d;--scrollbar-thumb-active-secondary: #00b359;--scrollbar-guitar-track: #2d2d2d;--scrollbar-guitar-track-secondary: #1a1a1a;--scrollbar-guitar-thumb-primary: #22c55e;--scrollbar-guitar-thumb-secondary: #16a34a;--scrollbar-guitar-thumb-border: #4ade80;--scrollbar-guitar-thumb-hover-primary: #16a34a;--scrollbar-guitar-thumb-hover-secondary: #15803d;--black-alpha-10: rgb(0, 0, 0, .1);--black-alpha-20: rgb(0, 0, 0, .2);--black-alpha-30: rgb(0, 0, 0, .3);--black-alpha-40: rgb(0, 0, 0, .4);--black-alpha-50: rgb(0, 0, 0, .5);--black-alpha-60: rgb(0, 0, 0, .6);--black-alpha-90: rgb(0, 0, 0, .9);--white-alpha-10: rgb(255, 255, 255, .1);--white-alpha-15: rgb(255, 255, 255, .15);--white-alpha-20: rgb(255, 255, 255, .2);--white-alpha-30: rgb(255, 255, 255, .3);--white-alpha-40: rgb(255, 255, 255, .4);--white-alpha-50: rgb(255, 255, 255, .5);--white-alpha-60: rgb(255, 255, 255, .6);--white-alpha-80: rgb(255, 255, 255, .8);--white-alpha-90: rgb(255, 255, 255, .9);--btn-primary-bg: #3b82f6;--btn-primary-bg-hover: #1d4ed8;--btn-primary-border: #3b82f6;--btn-primary-text: #ffffff;--btn-secondary-bg-light: rgb(255, 255, 255, .9);--btn-secondary-bg-dark: rgb(27, 105, 64, .8);--btn-secondary-border-light: rgb(210, 249, 210, .4);--btn-secondary-border-dark: rgb(210, 249, 210, .3);--btn-secondary-text-light: #1b6940;--btn-secondary-text-dark: #d2f9d2;--shadow-primary-light: rgb(27, 105, 64, .1);--shadow-primary-dark: rgb(0, 0, 0, .2);--shadow-hover-light: rgb(27, 105, 64, .2);--shadow-hover-dark: rgb(0, 0, 0, .3);--shadow-button: rgb(59, 130, 246, .2);--shadow-button-hover: rgb(59, 130, 246, .3);--shadow-note: rgb(0, 0, 0, .3);--shadow-scale-root: rgb(220, 38, 38, .6)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden;font-family:"Source Sans 3",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:6px}::-webkit-scrollbar-thumb{background:linear-gradient(145deg,var(--scrollbar-thumb-primary),var(--scrollbar-thumb-secondary));border-radius:6px;border:2px solid var(--scrollbar-track)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(145deg,var(--scrollbar-thumb-hover-primary),var(--scrollbar-thumb-hover-secondary));box-shadow:0 0 8px var(--purple-alpha-40)}::-webkit-scrollbar-thumb:active{background:linear-gradient(145deg,var(--scrollbar-thumb-active-primary),var(--scrollbar-thumb-active-secondary))}html{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-secondary) var(--scrollbar-track)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}.theme-toggle{position:absolute;top:var(--space-lg);right:var(--space-lg);background:var(--primary-purple);color:var(--dark-text-primary);border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;font-size:20px;transition:all .2s ease;box-shadow:0 4px 8px var(--shadow-primary-dark);display:flex;align-items:center;justify-content:center}.theme-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 12px var(--shadow-hover-dark)}.theme-toggle:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow),0 4px 8px var(--shadow-primary-dark)}.theme-toggle-nav{display:flex;align-items:center;gap:var(--space-2);background:none;border:none;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-lg);transition:all .2s ease;color:var(--light-text-primary)}.dark .theme-toggle-nav{color:var(--dark-text-primary)}.theme-toggle-nav:hover{background:var(--black-alpha-10)}.dark .theme-toggle-nav:hover{background:var(--white-alpha-10)}.theme-toggle-nav:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.toggle-track{position:relative;width:var(--space-10);height:var(--space-5);border-radius:var(--space-2);background:var(--gray-200);transition:all .3s ease}.dark .toggle-track{background:var(--gray-700)}.toggle-thumb{position:absolute;top:var(--space-1);width:var(--space-4);height:var(--space-4);border-radius:50%;background:var(--white);transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px var(--black-alpha-10)}.toggle-thumb.light{left:var(--space-1);background:var(--amber-400);color:var(--white)}.toggle-thumb.dark{left:var(--space-5);background:var(--purple-6366f1);color:var(--white)}.toggle-label{font-size:var(--text-sm);font-weight:var(--font-medium);-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (max-width: 768px){.toggle-label{display:none}.theme-toggle-nav{gap:0;padding:var(--padding-xs)}}.theme-toggle-simple{display:flex;align-items:center;gap:var(--space-2);background:none;border:none;cursor:pointer;padding:var(--space-2);border-radius:var(--radius-lg);transition:all .2s ease;color:var(--light-text-primary)}.dark .theme-toggle-simple{color:var(--dark-text-primary)}.theme-toggle-simple:hover{background:var(--black-alpha-10)}.dark .theme-toggle-simple:hover{background:var(--white-alpha-10)}.theme-toggle-simple:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}._authModalOverlay_1i5ju_2{position:fixed!important;inset:0!important;background:linear-gradient(135deg,#1b6940cc,#145232e6,#121212cc);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:9999!important;animation:_fadeIn_1i5ju_1 .2s ease-out;padding:20px;box-sizing:border-box;overflow-y:auto}.dark ._authModalOverlay_1i5ju_2{background:linear-gradient(135deg,#121212e6,#1e1e1ecc 30%,#282828e6 70%,#121212e6)}._authModal_1i5ju_2{background:linear-gradient(145deg,#fffffff2,#f0f0fffa);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:2px solid rgb(210,210,249,.3);border-radius:20px;padding:0;max-width:420px;width:90%;max-height:calc(100vh - 40px);overflow-y:auto;position:relative;box-shadow:0 20px 60px #1b69404d,inset 0 1px #ffffffb3;animation:_slideIn_1i5ju_1 .3s ease-out;margin:auto}.dark ._authModal_1i5ju_2{background:linear-gradient(145deg,#282828f2,#1e1e1efa);border:2px solid rgb(80,80,80,.3);box-shadow:0 20px 60px #00000080,inset 0 1px #ffffff0d}._closeButton_1i5ju_58{position:absolute;top:20px;right:20px;background:#ffffff1a;border:2px solid rgb(27,105,64,.3);border-radius:50%;width:40px;height:40px;font-size:20px;cursor:pointer;color:#1b6940;z-index:10;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 2px 8px #1b694033}._closeButton_1i5ju_58:hover{background:#fff3;border-color:#1b694080;transform:scale(1.1);box-shadow:0 4px 12px #1b69404d}._closeButton_1i5ju_58:active{transform:scale(.95)}.dark ._closeButton_1i5ju_58{background:#0000004d;border-color:#ffffff4d;color:#f8f9fa;box-shadow:0 2px 8px #0006}.dark ._closeButton_1i5ju_58:hover{background:#00000080;border-color:#ffffff80;box-shadow:0 4px 12px #0009}._authForm_1i5ju_106{padding:60px 40px 40px}._authBrand_1i5ju_111{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:24px}._authLogo_1i5ju_119{height:40px;width:auto;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease}._authLogo_1i5ju_119:hover{transform:scale(1.05)}._authSlogan_1i5ju_130{font-size:.875rem;font-style:italic;color:#00d96f;opacity:1;margin:0}._authForm_1i5ju_106 h2{margin:0 0 12px;color:#1b6940;font-size:28px;font-weight:700;text-align:center}.dark ._authForm_1i5ju_106 h2{color:#f8f9fa}._formDescription_1i5ju_150{color:#1b6940;font-size:18px;font-weight:600;text-align:center;margin:0 0 32px;line-height:1.5}.dark ._formDescription_1i5ju_150{color:#f8f9fa}._formGroup_1i5ju_163{margin-bottom:20px}._formGroup_1i5ju_163 label{display:block;margin-bottom:8px;font-weight:700;color:#1b6940;font-size:15px}.dark ._formGroup_1i5ju_163 label{color:#f8f9fa}._formGroup_1i5ju_163 input{width:100%;padding:16px 20px;border:2px solid rgb(210,210,249,.4);border-radius:12px;font-size:16px;font-weight:500;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-sizing:border-box;color:#1b6940}.dark ._formGroup_1i5ju_163 input{background:#3c3c3ccc;border-color:#50505066;color:#f8f9fa}._formGroup_1i5ju_163 input::-moz-placeholder{color:#1b694099;font-weight:500}._formGroup_1i5ju_163 input::placeholder{color:#1b694099;font-weight:500}.dark ._formGroup_1i5ju_163 input::-moz-placeholder{color:#f8f9fa99}.dark ._formGroup_1i5ju_163 input::placeholder{color:#f8f9fa99}._formGroup_1i5ju_163 input:focus{outline:none;border-color:#3b82f6;background:#fffffff2;box-shadow:0 0 0 4px #3b82f626;transform:translateY(-2px)}.dark ._formGroup_1i5ju_163 input:focus{border-color:#3b82f6;background:#464646e6;box-shadow:0 0 0 4px #3b82f626}._formGroup_1i5ju_163 input:disabled{background:#d2d2f933;cursor:not-allowed;opacity:.7}.dark ._formGroup_1i5ju_163 input:disabled{background:#32323280}._authButton_1i5ju_232{width:100%;padding:16px 24px;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:16px;position:relative;overflow:hidden}._authButton_1i5ju_232._primary_1i5ju_247{background:#1b6940;color:#fff;border:2px solid #1b6940;box-shadow:0 4px 15px #1b694033}.dark ._authButton_1i5ju_232._primary_1i5ju_247{background:#4c1d95;border-color:#4c1d95;box-shadow:0 4px 15px #4c1d954d}._authButton_1i5ju_232._primary_1i5ju_247:hover:not(:disabled){background:#1e1557;border-color:#1e1557;transform:translateY(-2px);box-shadow:0 6px 20px #1b69404d}.dark ._authButton_1i5ju_232._primary_1i5ju_247:hover:not(:disabled){background:#3730a3;border-color:#3730a3;box-shadow:0 6px 20px #4c1d9566}._authButton_1i5ju_232._primary_1i5ju_247._createAccount_1i5ju_274{background:#3b82f6;border-color:#3b82f6;box-shadow:0 4px 15px #3b82f633}.dark ._authButton_1i5ju_232._primary_1i5ju_247._createAccount_1i5ju_274{background:#2563eb;border-color:#2563eb;box-shadow:0 4px 15px #2563eb4d}._authButton_1i5ju_232._primary_1i5ju_247._createAccount_1i5ju_274:hover:not(:disabled){background:#1d4ed8;border-color:#1d4ed8;box-shadow:0 6px 20px #3b82f64d}.dark ._authButton_1i5ju_232._primary_1i5ju_247._createAccount_1i5ju_274:hover:not(:disabled){background:#1e40af;border-color:#1e40af;box-shadow:0 6px 20px #2563eb66}._authButton_1i5ju_232:disabled{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}._authFooter_1i5ju_305{margin-top:24px;text-align:center}._authFooter_1i5ju_305 p{margin:0 0 12px;color:#666;font-size:14px}.dark ._authFooter_1i5ju_305 p{color:#a0aec0}._linkButton_1i5ju_320{background:none;border:none;color:#3b82f6;font-weight:600;cursor:pointer;text-decoration:none;font-size:inherit;padding:0;margin:0}.dark ._linkButton_1i5ju_320{color:#60a5fa}._linkButton_1i5ju_320:hover{text-decoration:underline;color:#1d4ed8}.dark ._linkButton_1i5ju_320:hover{color:#93c5fd}._errorMessage_1i5ju_346{background:#fee2e2;color:#dc2626;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;border:1px solid #fecaca}.dark ._errorMessage_1i5ju_346{background:#ef44441a;color:#fca5a5;border-color:#ef44444d}._successMessage_1i5ju_362{background:#d1fae5;color:#065f46;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px;border:1px solid #a7f3d0}.dark ._successMessage_1i5ju_362{background:#22c55e1a;color:#86efac;border-color:#22c55e4d}@keyframes _fadeIn_1i5ju_1{0%{opacity:0}to{opacity:1}}@keyframes _slideIn_1i5ju_1{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 480px){._authModalOverlay_1i5ju_2{padding:60px 10px 10px;align-items:flex-start}._authModal_1i5ju_2{width:100%;max-width:100%;margin:0;max-height:calc(100vh - 80px)}._authForm_1i5ju_106{padding:40px 20px 24px}._authLogo_1i5ju_119{height:35px}._authSlogan_1i5ju_130{font-size:.75rem}._authForm_1i5ju_106 h2{font-size:20px}}@media (max-height: 600px){._authModalOverlay_1i5ju_2{align-items:flex-start;padding-top:20px}._authModal_1i5ju_2{max-height:calc(100vh - 40px)}}._userMenu_s23zq_2{position:relative;display:inline-block}._userMenuTrigger_s23zq_7{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#fffffff2;border:2px solid rgb(210,210,249,.3);border-radius:12px;color:#1b6940;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:600;box-shadow:0 4px 12px #1b694026}._userMenuTrigger_s23zq_7:hover{background:#fff;border-color:#d2d2f980;transform:translateY(-1px);box-shadow:0 6px 20px #1b694033}.dark ._userMenuTrigger_s23zq_7{background:#1b6940e6;border-color:#d2d2f94d;color:#d2d2f9;box-shadow:0 4px 12px #0000004d}.dark ._userMenuTrigger_s23zq_7:hover{background:#1b6940;border-color:#d2d2f980;box-shadow:0 6px 20px #0006}._userAvatar_s23zq_44{width:32px;height:32px;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0}._userAvatar_s23zq_44 img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}._avatarInitials_s23zq_59{width:100%;height:100%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}._userName_s23zq_71{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._chevron_s23zq_78{flex-shrink:0;transition:transform .2s ease}._chevron_s23zq_78._open_s23zq_83{transform:rotate(180deg)}._userMenuDropdown_s23zq_88{position:absolute;top:100%;right:0;margin-top:8px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgb(210,210,249,.3);border-radius:16px;box-shadow:0 20px 60px #1b694033;min-width:240px;overflow:hidden;z-index:200;animation:_dropdownFadeIn_s23zq_1 .2s ease-out}.dark ._userMenuDropdown_s23zq_88{background:#1b6940f2;border-color:#d2d2f94d;box-shadow:0 20px 60px #0006}._userMenuHeader_s23zq_110{padding:20px;background:linear-gradient(135deg,#e8e4ffcc,#d2d2f999);border-bottom:1px solid rgb(210,210,249,.3)}.dark ._userMenuHeader_s23zq_110{background:linear-gradient(135deg,#1b6940cc,#14523299);border-bottom-color:#d2d2f933}._userInfo_s23zq_121{text-align:left}._userNameLarge_s23zq_125{font-weight:700;color:#1b6940;font-size:16px;margin-bottom:4px}.dark ._userNameLarge_s23zq_125{color:#d2d2f9}._userEmail_s23zq_136{color:#00d96f;font-size:13px;font-weight:500}.dark ._userEmail_s23zq_136{color:#7fffc3}._userMenuDivider_s23zq_146{height:1px;background:#e1e5e9}._userMenuActions_s23zq_151{padding:8px 0}._menuItem_s23zq_155{width:100%;display:flex;align-items:center;gap:12px;padding:14px 20px;background:none;border:none;color:#1b6940;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:left}.dark ._menuItem_s23zq_155{color:#d2d2f9}._menuItem_s23zq_155:hover{background:#e8e4ffcc;transform:translate(4px)}.dark ._menuItem_s23zq_155:hover{background:#1b6940cc}._menuItem_s23zq_155._danger_s23zq_184{color:#dc2626}.dark ._menuItem_s23zq_155._danger_s23zq_184{color:#fca5a5}._menuItem_s23zq_155._danger_s23zq_184:hover{background:#dc26261a}.dark ._menuItem_s23zq_155._danger_s23zq_184:hover{background:#dc262633}._menuItem_s23zq_155 svg{flex-shrink:0;opacity:.7}@keyframes _dropdownFadeIn_s23zq_1{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){._userName_s23zq_71{display:none}._userMenuTrigger_s23zq_7{padding:6px}._userMenuDropdown_s23zq_88{right:-8px;min-width:220px}}.header{width:100%;position:sticky;top:0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgb(255,255,255,.1);transition:all .3s ease}.light .header{background:#e8e4ffcc;border-bottom:1px solid rgb(18,18,18,.1)}.dark .header{background:#121212cc;border-bottom:1px solid rgb(210,210,249,.1)}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:1rem 2rem;position:relative}.header-left{display:flex;align-items:center}.header-brand{display:flex;flex-direction:column;align-items:center;gap:0}.header-logo{height:40px;width:auto;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease;cursor:pointer}.header-logo:hover{transform:scale(1.05)}.header-title{font-size:1.5rem;font-weight:700;margin:0;color:var(--light-text-primary);text-decoration:none;transition:color .3s ease}.dark .header-title{color:var(--dark-text-primary)}.header-slogan{font-size:.75rem;font-weight:400;margin:0;color:#00d96f;opacity:1;font-style:italic}.header-nav{display:flex;align-items:center;gap:2rem;position:absolute;left:50%;transform:translate(-50%)}.nav-link{background:none;border:none;text-decoration:none;font-size:.875rem;font-weight:500;color:var(--light-text-primary);opacity:.7;transition:all .3s ease;padding:.5rem 0;position:relative;cursor:pointer}.dark .nav-link{color:var(--dark-text-primary)}.nav-link:hover{opacity:1;transform:translateY(-1px)}.nav-link-active{opacity:1;font-weight:600;color:var(--primary-purple)}.dark .nav-link-active{color:var(--primary-purple-light)}.nav-link-active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary-purple);border-radius:1px}.dark .nav-link-active:after{background:var(--primary-purple-light)}.header-right{display:flex;align-items:center;gap:1rem}.auth-section{display:flex;align-items:center}.auth-buttons{display:flex;align-items:center;gap:.75rem}.auth-btn{padding:.75rem 1.25rem;border:none;border-radius:12px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-btn{background:var(--white);color:var(--gray-900);border:2px solid var(--white);box-shadow:0 4px 15px var(--white-alpha-30)}.login-btn:hover{background:var(--gray-200);border-color:var(--gray-200);transform:translateY(-2px);box-shadow:0 6px 20px var(--white-alpha-40)}.dark .login-btn{background:var(--gray-800);color:var(--white);border-color:var(--gray-800);box-shadow:0 4px 15px var(--gray-800-alpha-30)}.dark .login-btn:hover{background:var(--gray-700);border-color:var(--gray-700);transform:translateY(-2px);box-shadow:0 6px 20px var(--gray-800-alpha-40)}.signup-btn{background:var(--blue-500);color:var(--white);border:2px solid var(--blue-500);box-shadow:0 4px 15px var(--shadow-button)}.signup-btn:hover{background:var(--blue-700);border-color:var(--blue-700);transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-button-hover)}@media (min-width: 1024px){.header-content{flex-wrap:nowrap}.header-nav{position:absolute;left:50%;transform:translate(-50%)}}@media (max-width: 1023px){.header-content{padding:1rem;flex-wrap:wrap;gap:1rem}.header-logo{height:35px}.header-slogan{font-size:.75rem}.header-title{font-size:1.25rem}.header-slogan{font-size:.6875rem}.header-nav{gap:1.5rem;order:3;width:100%;justify-content:center;padding-top:.5rem;border-top:1px solid rgb(255,255,255,.1);position:static;transform:none;left:auto}.dark .header-nav{border-top:1px solid rgb(210,210,249,.1)}.nav-link{font-size:.8125rem}.header-right{gap:.5rem;order:2;justify-content:flex-end;width:100%;flex:1}.auth-section{margin-left:.5rem}.auth-buttons{gap:.5rem}.auth-btn{padding:.375rem .75rem;font-size:.8125rem}}.footer{width:100%;margin-top:auto;border-top:1px solid rgb(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.light .footer{background:#e8e4ffcc;border-top:1px solid rgb(18,18,18,.1)}.dark .footer{background:#121212cc;border-top:1px solid rgb(210,210,249,.1)}.footer-content{max-width:1200px;margin:0 auto;padding:2rem}.footer-main{display:flex;justify-content:space-between;align-items:center;gap:2rem}.footer-brand{display:flex;flex-direction:column;align-items:center;gap:0}.footer-logo{height:40px;width:auto;-o-object-fit:contain;object-fit:contain;transition:transform .3s ease}.footer-logo:hover{transform:scale(1.05)}.footer-slogan{font-size:.875rem;margin:0;color:#00d96f;opacity:1;font-style:italic}.footer-info{display:flex;flex-direction:column;align-items:flex-end;gap:1rem}.footer-contact{display:flex;align-items:center}.footer-email{color:var(--primary-purple);text-decoration:none;font-size:.875rem;font-weight:500;transition:all .2s ease;padding:.25rem .5rem;border-radius:.25rem}.footer-email:hover{background:var(--primary-purple-alpha-10);text-decoration:underline}.dark .footer-email{color:var(--primary-purple-light)}.dark .footer-email:hover{background:var(--primary-purple-alpha-10)}.footer-copyright{text-align:right;font-size:.75rem;color:var(--light-text-primary);opacity:.6;line-height:1.4}.dark .footer-copyright{color:var(--dark-text-primary)}.footer-copyright p{margin:0}.footer-author{font-weight:600;opacity:.8}@media (max-width: 768px){.footer-content{padding:1.5rem 1rem}.footer-main{flex-direction:column;text-align:center;gap:1.5rem}.footer-brand,.footer-info{align-items:center}.footer-copyright{text-align:center}.footer-logo{height:35px}}._homeContainer_ktvx0_6{width:100%;max-width:1200px;margin:0 auto;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;gap:4rem}._heroSection_ktvx0_21{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem 0;width:100%}._heroTitle_ktvx0_31{font-size:3.5rem;font-weight:800;margin:0;background:linear-gradient(135deg,var(--primary-purple) 0%,var(--primary-purple-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.dark ._heroTitle_ktvx0_31{background:linear-gradient(135deg,var(--primary-purple-light) 0%,var(--primary-purple-lighter) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}._heroSubtitle_ktvx0_49{font-size:1.5rem;font-weight:600;color:var(--light-text-secondary);margin:0;max-width:700px}.dark ._heroSubtitle_ktvx0_49{color:var(--dark-text-secondary);text-shadow:0 0 20px var(--primary-purple-alpha-20)}._heroDescription_ktvx0_62{font-size:1.125rem;color:var(--light-text-tertiary);margin:0;max-width:600px;line-height:1.6}.dark ._heroDescription_ktvx0_62{color:#e9ecefe6}._heroCta_ktvx0_74{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap;justify-content:center}._primaryBtn_ktvx0_82{padding:1rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--primary-purple);color:var(--white);border:2px solid var(--primary-purple);box-shadow:0 4px 15px var(--primary-purple-alpha-30)}.dark ._primaryBtn_ktvx0_82{background:var(--primary-purple-light);border-color:var(--primary-purple-light);box-shadow:0 4px 20px var(--primary-purple-alpha-40),0 0 30px var(--primary-purple-alpha-20)}._primaryBtn_ktvx0_82:hover{background:var(--primary-purple-dark);border-color:var(--primary-purple-dark);transform:translateY(-2px);box-shadow:0 6px 20px var(--primary-purple-alpha-50)}.dark ._primaryBtn_ktvx0_82:hover{background:var(--primary-purple-lighter);border-color:var(--primary-purple-lighter);transform:translateY(-2px);box-shadow:0 8px 30px var(--primary-purple-alpha-60),0 0 40px var(--primary-purple-alpha-30)}._primaryBtn_ktvx0_82:focus-visible{outline:3px solid var(--primary-purple);outline-offset:2px}.dark ._primaryBtn_ktvx0_82:focus-visible{outline-color:var(--primary-purple-lighter)}._secondaryBtn_ktvx0_127{padding:1rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--white-alpha-90);color:var(--dark-bg-tertiary);border:2px solid var(--btn-secondary-border-light);box-shadow:0 4px 15px var(--shadow-primary-light)}.dark ._secondaryBtn_ktvx0_127{background:var(--btn-secondary-bg-dark);color:var(--dark-text-primary);border-color:var(--btn-secondary-border-dark);box-shadow:0 4px 15px var(--shadow-primary-dark)}._secondaryBtn_ktvx0_127:hover{background:#fff;border-color:#d2d2f999;transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-hover-light)}.dark ._secondaryBtn_ktvx0_127:hover{background:#1b6940;border-color:#d2d2f980;transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-hover-dark)}._secondaryBtn_ktvx0_127:focus-visible{outline:3px solid var(--primary-purple);outline-offset:2px}._featuresSection_ktvx0_173{width:100%;display:flex;flex-direction:column;gap:2rem}._featuresTitle_ktvx0_180{font-size:2rem;font-weight:700;text-align:center;margin:0;color:var(--light-text-primary)}.dark ._featuresTitle_ktvx0_180{color:var(--dark-text-primary)}._featuresGrid_ktvx0_192{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;width:100%}._featureCard_ktvx0_199{background:var(--white-alpha-80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(210,210,249,.3);border-radius:16px;padding:2rem;display:flex;flex-direction:column;gap:1rem;transition:all .3s ease;box-shadow:0 4px 15px var(--primary-purple-alpha-10)}.dark ._featureCard_ktvx0_199{background:linear-gradient(135deg,#1a202ce6,#1b694066);border:1px solid rgb(210,210,249,.2);box-shadow:0 4px 20px #0006,0 0 0 1px #2ee88d1a inset}._featureCard_ktvx0_199:hover{transform:translateY(-4px);box-shadow:0 8px 25px var(--primary-purple-alpha-20);border-color:var(--primary-purple-alpha-40)}.dark ._featureCard_ktvx0_199:hover{transform:translateY(-4px);box-shadow:0 8px 30px #0009,0 0 40px var(--primary-purple-alpha-30),0 0 0 1px var(--primary-purple-alpha-30) inset;border-color:var(--primary-purple-alpha-60)}._featureIcon_ktvx0_231{font-size:3rem;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--primary-purple-alpha-15) 0%,var(--primary-purple-alpha-25) 100%)}.dark ._featureIcon_ktvx0_231{background:linear-gradient(135deg,var(--primary-purple-alpha-30) 0%,var(--primary-purple-alpha-50) 100%);box-shadow:0 0 20px var(--primary-purple-alpha-20),0 0 0 1px var(--primary-purple-alpha-40) inset}._featureTitle_ktvx0_247{font-size:1.25rem;font-weight:600;margin:0;color:var(--light-text-primary)}.dark ._featureTitle_ktvx0_247{color:var(--dark-text-primary)}._featureDescription_ktvx0_258{font-size:.9375rem;color:var(--light-text-tertiary);margin:0;line-height:1.6}.dark ._featureDescription_ktvx0_258{color:var(--dark-text-tertiary)}._howItWorksSection_ktvx0_273{width:100%;display:flex;flex-direction:column;gap:2rem;padding:2rem 0}._howItWorksTitle_ktvx0_281{font-size:2rem;font-weight:700;text-align:center;margin:0;color:var(--light-text-primary)}.dark ._howItWorksTitle_ktvx0_281{color:var(--dark-text-primary)}._stepsGrid_ktvx0_293{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;width:100%}._stepCard_ktvx0_300{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:1.5rem}._stepNumber_ktvx0_309{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary-purple) 0%,var(--primary-purple-light) 100%);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;box-shadow:0 4px 15px var(--primary-purple-alpha-30)}.dark ._stepNumber_ktvx0_309{background:linear-gradient(135deg,var(--primary-purple-light) 0%,var(--primary-purple-lighter) 100%);box-shadow:0 4px 20px var(--primary-purple-alpha-40),0 0 25px var(--primary-purple-alpha-25)}._stepTitle_ktvx0_328{font-size:1.125rem;font-weight:600;margin:0;color:var(--light-text-primary)}.dark ._stepTitle_ktvx0_328{color:var(--dark-text-primary)}._stepDescription_ktvx0_339{font-size:.9375rem;color:var(--light-text-tertiary);margin:0;line-height:1.5}.dark ._stepDescription_ktvx0_339{color:var(--dark-text-tertiary)}._ctaSection_ktvx0_354{width:100%;text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,var(--primary-purple-alpha-10) 0%,var(--primary-purple-alpha-20) 100%);border-radius:24px;border:1px solid var(--primary-purple-alpha-30);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.dark ._ctaSection_ktvx0_354{background:linear-gradient(135deg,#1b694099,#00d96f4d,#1b694099);border:1px solid var(--primary-purple-alpha-50);box-shadow:0 4px 30px var(--primary-purple-alpha-20),0 0 60px var(--primary-purple-alpha-15),0 0 0 1px var(--primary-purple-alpha-30) inset}._ctaTitle_ktvx0_371{font-size:2rem;font-weight:700;margin:0 0 1rem;color:var(--light-text-primary)}.dark ._ctaTitle_ktvx0_371{color:var(--dark-text-primary)}._ctaDescription_ktvx0_382{font-size:1.125rem;color:var(--light-text-secondary);margin:0 0 2rem;line-height:1.6}.dark ._ctaDescription_ktvx0_382{color:var(--dark-text-primary)}@media (max-width: 1023px){._homeContainer_ktvx0_6{padding:2rem 1.5rem;gap:3rem}._heroTitle_ktvx0_31{font-size:2.5rem}._heroSubtitle_ktvx0_49{font-size:1.25rem}._heroDescription_ktvx0_62{font-size:1rem}._featuresTitle_ktvx0_180,._howItWorksTitle_ktvx0_281,._ctaTitle_ktvx0_371{font-size:1.75rem}._featuresGrid_ktvx0_192,._stepsGrid_ktvx0_293{gap:1.5rem}}@media (max-width: 767px){._homeContainer_ktvx0_6{padding:1.5rem 1rem;gap:2.5rem}._heroTitle_ktvx0_31{font-size:2rem}._heroSubtitle_ktvx0_49{font-size:1.125rem}._heroDescription_ktvx0_62{font-size:.9375rem}._heroCta_ktvx0_74{flex-direction:column;width:100%}._primaryBtn_ktvx0_82,._secondaryBtn_ktvx0_127{width:100%;padding:.875rem 1.5rem}._featuresTitle_ktvx0_180,._howItWorksTitle_ktvx0_281,._ctaTitle_ktvx0_371{font-size:1.5rem}._featuresGrid_ktvx0_192,._stepsGrid_ktvx0_293{grid-template-columns:1fr}._ctaSection_ktvx0_354{padding:2rem 1.5rem}}@media (prefers-reduced-motion: reduce){._featureCard_ktvx0_199,._primaryBtn_ktvx0_82,._secondaryBtn_ktvx0_127{transition-duration:.01ms!important}._featureCard_ktvx0_199:hover,._primaryBtn_ktvx0_82:hover,._secondaryBtn_ktvx0_127:hover{transform:none!important}}._practiceContainer_12f5x_6{width:100%;max-width:1200px;margin:0 auto;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;gap:3rem}._backButtonContainer_12f5x_21{width:100%;max-width:1200px;margin:0 auto;padding:1.5rem 2rem 0}._backButton_12f5x_21{padding:.75rem 1.5rem;border:none;border-radius:12px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .3s ease;background:var(--white-alpha-80);color:var(--light-text-primary);border:2px solid rgb(210,210,249,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 2px 10px var(--primary-purple-alpha-10)}.dark ._backButton_12f5x_21{background:linear-gradient(135deg,#1a202ce6,#1b694066);color:var(--dark-text-primary);border:2px solid rgb(210,210,249,.2);box-shadow:0 2px 10px #0000004d}._backButton_12f5x_21:hover{background:var(--white);border-color:var(--primary-purple-alpha-50);transform:translate(-3px);box-shadow:0 4px 15px var(--primary-purple-alpha-20)}.dark ._backButton_12f5x_21:hover{background:linear-gradient(135deg,#1a202c,#1b694099);border-color:var(--primary-purple-alpha-70);transform:translate(-3px);box-shadow:0 4px 20px var(--primary-purple-alpha-30)}._backButton_12f5x_21:focus-visible{outline:3px solid var(--primary-purple);outline-offset:2px}.dark ._backButton_12f5x_21:focus-visible{outline-color:var(--primary-purple-lighter)}._welcomeSubtitle_12f5x_78{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);width:auto;max-width:90%;padding:1.25rem 2.5rem;background:var(--black);color:var(--white);text-align:center;font-size:1.25rem;font-weight:600;border-radius:16px;box-shadow:0 8px 30px #00000080;z-index:1000;animation:_welcomeSlideUp_12f5x_1 .6s ease-out;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none}.dark ._welcomeSubtitle_12f5x_78{box-shadow:0 8px 40px #000000b3,0 0 40px var(--primary-purple-alpha-30)}@keyframes _welcomeSlideUp_12f5x_1{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}._lessonControls_12f5x_119{width:100%;max-width:1200px;margin:2rem auto;padding:2rem;background:var(--white-alpha-80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(210,210,249,.3);border-radius:20px;box-shadow:0 4px 15px var(--primary-purple-alpha-10);display:flex;flex-direction:column;gap:1.5rem}.dark ._lessonControls_12f5x_119{background:linear-gradient(135deg,#1a202ce6,#1b694066);border:1px solid rgb(210,210,249,.2);box-shadow:0 4px 20px #0006}._lessonInstructions_12f5x_141{padding:1rem 1.5rem;background:var(--primary-purple-alpha-10);border-radius:12px;border-left:4px solid var(--primary-purple)}.dark ._lessonInstructions_12f5x_141{background:var(--primary-purple-alpha-20);border-left-color:var(--primary-purple-light)}._lessonInstructions_12f5x_141 h3{margin:0 0 .75rem;font-size:1.125rem;font-weight:700;color:var(--light-text-primary)}.dark ._lessonInstructions_12f5x_141 h3{color:var(--dark-text-primary)}._lessonInstructions_12f5x_141 ol{margin:0;padding-left:1.5rem;color:var(--light-text-secondary);line-height:1.8}.dark ._lessonInstructions_12f5x_141 ol{color:var(--dark-text-secondary)}._lessonControlsRow_12f5x_175{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}._controlGroup_12f5x_182{display:flex;align-items:center;gap:.5rem}._controlGroup_12f5x_182 label{font-weight:600;color:var(--light-text-primary);font-size:.9375rem}.dark ._controlGroup_12f5x_182 label{color:var(--dark-text-primary)}._numberInput_12f5x_198{width:80px;padding:.625rem .75rem;border:2px solid rgb(210,210,249,.3);border-radius:8px;font-size:.9375rem;font-weight:600;background:var(--white);color:var(--light-text-primary);transition:all .3s ease}.dark ._numberInput_12f5x_198{background:#1a202ccc;color:var(--dark-text-primary);border-color:#d2d2f933}._numberInput_12f5x_198:focus{outline:none;border-color:var(--primary-purple);box-shadow:0 0 0 3px var(--primary-purple-alpha-20)}._generateButton_12f5x_222,._playButton_12f5x_223,._checkButton_12f5x_224{padding:.75rem 1.5rem;border:none;border-radius:10px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px #0000001a}._generateButton_12f5x_222{background:var(--primary-purple);color:var(--white)}.dark ._generateButton_12f5x_222{background:var(--primary-purple-light)}._generateButton_12f5x_222:hover:not(:disabled){background:var(--primary-purple-dark);transform:translateY(-2px);box-shadow:0 4px 15px var(--primary-purple-alpha-40)}.dark ._generateButton_12f5x_222:hover:not(:disabled){background:var(--primary-purple-lighter)}._generateButton_12f5x_222:disabled{opacity:.5;cursor:not-allowed}._playButton_12f5x_223{background:#22c55e;color:var(--white)}._playButton_12f5x_223:hover:not(:disabled){background:#16a34a;transform:translateY(-2px);box-shadow:0 4px 15px #22c55e66}._playButton_12f5x_223:disabled{opacity:.5;cursor:not-allowed}._checkButton_12f5x_224{background:#3b82f6;color:var(--white)}._checkButton_12f5x_224:hover:not(:disabled){background:#2563eb;transform:translateY(-2px);box-shadow:0 4px 15px #3b82f666}._checkButton_12f5x_224:disabled{opacity:.5;cursor:not-allowed}._feedbackMessage_12f5x_291{padding:1rem 1.5rem;border-radius:10px;font-weight:600;font-size:1rem;text-align:center;animation:_feedbackFadeIn_12f5x_1 .3s ease-out}._feedbackMessage_12f5x_291._correct_12f5x_300{background:#22c55e26;color:#16a34a;border:2px solid rgb(34,197,94,.4)}.dark ._feedbackMessage_12f5x_291._correct_12f5x_300{background:#22c55e33;color:#4ade80;border-color:#22c55e80}._feedbackMessage_12f5x_291._incorrect_12f5x_312{background:#ef444426;color:#dc2626;border:2px solid rgb(239,68,68,.4)}.dark ._feedbackMessage_12f5x_291._incorrect_12f5x_312{background:#ef444433;color:#fca5a5;border-color:#ef444480}@keyframes _feedbackFadeIn_12f5x_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}._melodyInfo_12f5x_335{padding:1rem;background:#94a3b81a;border-radius:10px;display:flex;flex-direction:column;gap:.5rem}.dark ._melodyInfo_12f5x_335{background:#94a3b826}._melodyInfo_12f5x_335 p{margin:0;font-size:.9375rem;color:var(--light-text-secondary);font-weight:500}.dark ._melodyInfo_12f5x_335 p{color:var(--dark-text-secondary)}._headerSection_12f5x_363{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem 0;width:100%}._pageTitle_12f5x_373{font-size:3rem;font-weight:800;margin:0;background:linear-gradient(135deg,var(--primary-purple) 0%,var(--primary-purple-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.2}.dark ._pageTitle_12f5x_373{background:linear-gradient(135deg,var(--primary-purple-light) 0%,var(--primary-purple-lighter) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}._pageSubtitle_12f5x_391{font-size:1.25rem;font-weight:500;color:var(--light-text-secondary);margin:0;max-width:700px;line-height:1.6}.dark ._pageSubtitle_12f5x_391{color:var(--dark-text-secondary)}._instrumentsSection_12f5x_408{width:100%;display:flex;flex-direction:column;gap:2rem}._instrumentsGrid_12f5x_415{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:100%}._instrumentCard_12f5x_422{background:var(--white-alpha-80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(210,210,249,.3);border-radius:20px;padding:2.5rem 2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;transition:all .3s ease;box-shadow:0 4px 15px var(--primary-purple-alpha-10);text-align:center}.dark ._instrumentCard_12f5x_422{background:linear-gradient(135deg,#1a202ce6,#1b694066);border:1px solid rgb(210,210,249,.2);box-shadow:0 4px 20px #0006,0 0 0 1px #2ee88d1a inset}._instrumentCard_12f5x_422:hover{transform:translateY(-6px);box-shadow:0 12px 30px var(--primary-purple-alpha-25);border-color:var(--primary-purple-alpha-50)}.dark ._instrumentCard_12f5x_422:hover{transform:translateY(-6px);box-shadow:0 12px 40px #0009,0 0 50px var(--primary-purple-alpha-40),0 0 0 1px var(--primary-purple-alpha-40) inset;border-color:var(--primary-purple-alpha-70)}._instrumentIcon_12f5x_456{font-size:4rem;display:flex;align-items:center;justify-content:center;width:100px;height:100px;border-radius:20px;background:linear-gradient(135deg,var(--primary-purple-alpha-15) 0%,var(--primary-purple-alpha-25) 100%);transition:all .3s ease;color:var(--light-text-primary)}.dark ._instrumentIcon_12f5x_456{background:linear-gradient(135deg,var(--primary-purple-alpha-30) 0%,var(--primary-purple-alpha-50) 100%);box-shadow:0 0 30px var(--primary-purple-alpha-25),0 0 0 1px var(--primary-purple-alpha-40) inset;color:var(--white)}._instrumentCard_12f5x_422:hover ._instrumentIcon_12f5x_456{transform:scale(1.05)}._instrumentName_12f5x_479{font-size:1.75rem;font-weight:700;margin:0;color:var(--light-text-primary)}.dark ._instrumentName_12f5x_479{color:var(--dark-text-primary)}._instrumentDescription_12f5x_490{font-size:.9375rem;color:var(--light-text-tertiary);margin:0;line-height:1.6}.dark ._instrumentDescription_12f5x_490{color:var(--dark-text-tertiary)}._instrumentButton_12f5x_501{width:100%;padding:1rem 1.5rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--primary-purple);color:var(--white);border:2px solid var(--primary-purple);box-shadow:0 4px 15px var(--primary-purple-alpha-30)}.dark ._instrumentButton_12f5x_501{background:var(--primary-purple-light);border-color:var(--primary-purple-light);box-shadow:0 4px 20px var(--primary-purple-alpha-40),0 0 30px var(--primary-purple-alpha-20)}._instrumentButton_12f5x_501:hover{background:var(--primary-purple-dark);border-color:var(--primary-purple-dark);transform:translateY(-2px);box-shadow:0 6px 20px var(--primary-purple-alpha-50)}.dark ._instrumentButton_12f5x_501:hover{background:var(--primary-purple-lighter);border-color:var(--primary-purple-lighter);transform:translateY(-2px);box-shadow:0 8px 30px var(--primary-purple-alpha-60),0 0 40px var(--primary-purple-alpha-30)}._instrumentButton_12f5x_501:focus-visible{outline:3px solid var(--primary-purple);outline-offset:2px}.dark ._instrumentButton_12f5x_501:focus-visible{outline-color:var(--primary-purple-lighter)}._lessonsSection_12f5x_551{width:100%;display:flex;flex-direction:column;gap:2rem}._lessonsGrid_12f5x_558{display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;width:100%}._featuredLessonCard_12f5x_569{grid-column:span 3;background:var(--white-alpha-80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(210,210,249,.3);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;transition:all .3s ease;box-shadow:0 4px 15px var(--primary-purple-alpha-10);position:relative;overflow:hidden}.dark ._featuredLessonCard_12f5x_569{background:linear-gradient(135deg,#1a202ce6,#1b694066);border:1px solid rgb(210,210,249,.2);box-shadow:0 4px 20px #0006,0 0 0 1px #2ee88d1a inset}._featuredLessonCard_12f5x_569:hover{transform:translateY(-6px);box-shadow:0 12px 30px var(--primary-purple-alpha-25);border-color:var(--primary-purple-alpha-50)}.dark ._featuredLessonCard_12f5x_569:hover{transform:translateY(-6px);box-shadow:0 12px 40px #0009,0 0 50px var(--primary-purple-alpha-40),0 0 0 1px var(--primary-purple-alpha-40) inset;border-color:var(--primary-purple-alpha-70)}._lessonCard_12f5x_608{grid-column:span 2;background:var(--white-alpha-80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(210,210,249,.3);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;transition:all .3s ease;box-shadow:0 4px 15px var(--primary-purple-alpha-10);position:relative;overflow:hidden}.dark ._lessonCard_12f5x_608{background:linear-gradient(135deg,#1a202ce6,#1b694066);border:1px solid rgb(210,210,249,.2);box-shadow:0 4px 20px #0006,0 0 0 1px #2ee88d1a inset}._lessonCard_12f5x_608:hover{transform:translateY(-6px);box-shadow:0 12px 30px var(--primary-purple-alpha-25);border-color:var(--primary-purple-alpha-50)}.dark ._lessonCard_12f5x_608:hover{transform:translateY(-6px);box-shadow:0 12px 40px #0009,0 0 50px var(--primary-purple-alpha-40),0 0 0 1px var(--primary-purple-alpha-40) inset;border-color:var(--primary-purple-alpha-70)}._lessonHeader_12f5x_647{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}._lessonIcon_12f5x_654{font-size:3rem;display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:16px;background:linear-gradient(135deg,var(--primary-purple-alpha-15) 0%,var(--primary-purple-alpha-25) 100%);flex-shrink:0;transition:all .3s ease}.dark ._lessonIcon_12f5x_654{background:linear-gradient(135deg,var(--primary-purple-alpha-30) 0%,var(--primary-purple-alpha-50) 100%);box-shadow:0 0 25px var(--primary-purple-alpha-25),0 0 0 1px var(--primary-purple-alpha-40) inset}._lessonCard_12f5x_608:hover ._lessonIcon_12f5x_654,.dark ._lessonCard_12f5x_608:hover ._lessonIcon_12f5x_654{transform:scale(1.05)}._lessonMeta_12f5x_680{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}._difficultyBadge_12f5x_691{padding:.375rem .75rem;border-radius:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;display:inline-block;white-space:nowrap}._beginnerBadge_12f5x_702{background:linear-gradient(135deg,#22c55e33,#22c55e4d);color:#22c55e;border:1px solid rgb(34,197,94,.4)}.dark ._beginnerBadge_12f5x_702{background:linear-gradient(135deg,#22c55e4d,#22c55e66);color:#4ade80;border:1px solid rgb(34,197,94,.5);box-shadow:0 0 15px #22c55e33}._intermediateBadge_12f5x_715{background:linear-gradient(135deg,#f59e0b33,#f59e0b4d);color:#d97706;border:1px solid rgb(245,158,11,.4)}.dark ._intermediateBadge_12f5x_715{background:linear-gradient(135deg,#f59e0b4d,#f59e0b66);color:#fbbf24;border:1px solid rgb(245,158,11,.5);box-shadow:0 0 15px #f59e0b33}._advancedBadge_12f5x_728{background:linear-gradient(135deg,#ef444433,#ef44444d);color:#dc2626;border:1px solid rgb(239,68,68,.4)}.dark ._advancedBadge_12f5x_728{background:linear-gradient(135deg,#ef44444d,#ef444466);color:#fca5a5;border:1px solid rgb(239,68,68,.5);box-shadow:0 0 15px #ef444433}._durationBadge_12f5x_741{padding:.375rem .75rem;border-radius:8px;font-size:.75rem;font-weight:600;background:#94a3b826;color:#64748b;border:1px solid rgb(148,163,184,.3);white-space:nowrap}.dark ._durationBadge_12f5x_741{background:#94a3b833;color:#cbd5e1;border:1px solid rgb(148,163,184,.3)}._lessonContent_12f5x_762{display:flex;flex-direction:column;gap:1rem;flex:1}._lessonTitle_12f5x_769{font-size:1.5rem;font-weight:700;margin:0;color:var(--light-text-primary);line-height:1.3}.dark ._lessonTitle_12f5x_769{color:var(--dark-text-primary)}._lessonDescription_12f5x_781{font-size:.9375rem;color:var(--light-text-tertiary);margin:0;line-height:1.6}.dark ._lessonDescription_12f5x_781{color:var(--dark-text-tertiary)}._topicsContainer_12f5x_796{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}._topicsLabel_12f5x_803{font-size:.875rem;font-weight:600;color:var(--light-text-secondary);margin:0}.dark ._topicsLabel_12f5x_803{color:var(--dark-text-secondary)}._topicsList_12f5x_814{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.375rem}._topicItem_12f5x_823{font-size:.875rem;color:var(--light-text-tertiary);padding-left:1.25rem;position:relative}._topicItem_12f5x_823:before{content:"•";position:absolute;left:.5rem;color:var(--primary-purple);font-weight:700}.dark ._topicItem_12f5x_823{color:var(--dark-text-tertiary)}.dark ._topicItem_12f5x_823:before{color:var(--primary-purple-light)}._startButton_12f5x_850{width:100%;padding:.875rem 1.5rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--primary-purple);color:var(--white);border:2px solid var(--primary-purple);box-shadow:0 4px 15px var(--primary-purple-alpha-30)}.dark ._startButton_12f5x_850{background:var(--primary-purple-light);border-color:var(--primary-purple-light);box-shadow:0 4px 20px var(--primary-purple-alpha-40),0 0 30px var(--primary-purple-alpha-20)}._startButton_12f5x_850:hover{background:var(--primary-purple-dark);border-color:var(--primary-purple-dark);transform:translateY(-2px);box-shadow:0 6px 20px var(--primary-purple-alpha-50)}.dark ._startButton_12f5x_850:hover{background:var(--primary-purple-lighter);border-color:var(--primary-purple-lighter);transform:translateY(-2px);box-shadow:0 8px 30px var(--primary-purple-alpha-60),0 0 40px var(--primary-purple-alpha-30)}._startButton_12f5x_850:focus-visible{outline:3px solid var(--primary-purple);outline-offset:2px}.dark ._startButton_12f5x_850:focus-visible{outline-color:var(--primary-purple-lighter)}._comingSoonSection_12f5x_900{width:100%;text-align:center;padding:3rem 2rem;background:linear-gradient(135deg,var(--primary-purple-alpha-10) 0%,var(--primary-purple-alpha-20) 100%);border-radius:24px;border:1px solid var(--primary-purple-alpha-30);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;gap:1.5rem}.dark ._comingSoonSection_12f5x_900{background:linear-gradient(135deg,#1b694099,#00d96f4d,#1b694099);border:1px solid var(--primary-purple-alpha-50);box-shadow:0 4px 30px var(--primary-purple-alpha-20),0 0 60px var(--primary-purple-alpha-15),0 0 0 1px var(--primary-purple-alpha-30) inset}._comingSoonTitle_12f5x_921{font-size:1.75rem;font-weight:700;margin:0;color:var(--light-text-primary)}.dark ._comingSoonTitle_12f5x_921{color:var(--dark-text-primary)}._comingSoonDescription_12f5x_932{font-size:1.125rem;color:var(--light-text-secondary);margin:0;line-height:1.6;max-width:600px}.dark ._comingSoonDescription_12f5x_932{color:var(--dark-text-primary)}._sandboxButton_12f5x_944{padding:1rem 2rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--white-alpha-90);color:var(--dark-bg-tertiary);border:2px solid var(--btn-secondary-border-light);box-shadow:0 4px 15px var(--shadow-primary-light)}.dark ._sandboxButton_12f5x_944{background:var(--btn-secondary-bg-dark);color:var(--dark-text-primary);border-color:var(--btn-secondary-border-dark);box-shadow:0 4px 15px var(--shadow-primary-dark)}._sandboxButton_12f5x_944:hover{background:#fff;border-color:#d2d2f999;transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-hover-light)}.dark ._sandboxButton_12f5x_944:hover{background:#1b6940;border-color:#d2d2f980;transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-hover-dark)}._sandboxButton_12f5x_944:focus-visible{outline:3px solid var(--primary-purple);outline-offset:2px}@media (max-width: 1023px){._practiceContainer_12f5x_6{padding:2rem 1.5rem;gap:2.5rem}._backButtonContainer_12f5x_21{padding:1rem 1.5rem 0}._backButton_12f5x_21{font-size:.875rem;padding:.625rem 1.25rem}._pageTitle_12f5x_373{font-size:2.5rem}._pageSubtitle_12f5x_391{font-size:1.125rem}._instrumentsGrid_12f5x_415{grid-template-columns:1fr;gap:1.5rem}._instrumentCard_12f5x_422{padding:2rem 1.5rem}._instrumentIcon_12f5x_456{width:90px;height:90px;font-size:3.5rem}._instrumentName_12f5x_479{font-size:1.5rem}._lessonsGrid_12f5x_558{grid-template-columns:repeat(2,1fr);gap:1.5rem}._featuredLessonCard_12f5x_569,._lessonCard_12f5x_608{grid-column:span 1}._comingSoonTitle_12f5x_921{font-size:1.5rem}}@media (max-width: 767px){._practiceContainer_12f5x_6{padding:1.5rem 1rem;gap:2rem}._backButtonContainer_12f5x_21{padding:1rem 1rem 0}._backButton_12f5x_21{font-size:.875rem;padding:.625rem 1rem}._welcomeSubtitle_12f5x_78{font-size:1rem;padding:1rem 1.5rem;bottom:1rem;max-width:95%}._pageTitle_12f5x_373{font-size:2rem}._pageSubtitle_12f5x_391{font-size:1rem}._instrumentsGrid_12f5x_415{grid-template-columns:1fr;gap:1.5rem}._instrumentCard_12f5x_422{padding:2rem 1.5rem}._instrumentIcon_12f5x_456{width:80px;height:80px;font-size:3rem}._instrumentName_12f5x_479{font-size:1.5rem}._instrumentDescription_12f5x_490{font-size:.875rem}._instrumentButton_12f5x_501{padding:.875rem 1.25rem}._lessonControls_12f5x_119{margin:1.5rem 1rem;padding:1.5rem}._lessonControlsRow_12f5x_175{flex-direction:column;align-items:stretch}._generateButton_12f5x_222,._playButton_12f5x_223,._checkButton_12f5x_224{width:100%}._lessonsGrid_12f5x_558{grid-template-columns:1fr;gap:1.5rem}._featuredLessonCard_12f5x_569,._lessonCard_12f5x_608{grid-column:span 1;padding:1.5rem}._lessonIcon_12f5x_654{width:60px;height:60px;font-size:2.5rem}._lessonTitle_12f5x_769{font-size:1.25rem}._comingSoonSection_12f5x_900{padding:2rem 1.5rem}._comingSoonTitle_12f5x_921{font-size:1.25rem}._comingSoonDescription_12f5x_932{font-size:1rem}}@media (prefers-reduced-motion: reduce){._backButton_12f5x_21,._welcomeSubtitle_12f5x_78,._instrumentCard_12f5x_422,._instrumentIcon_12f5x_456,._instrumentButton_12f5x_501,._lessonCard_12f5x_608,._featuredLessonCard_12f5x_569,._startButton_12f5x_850,._sandboxButton_12f5x_944,._generateButton_12f5x_222,._playButton_12f5x_223,._checkButton_12f5x_224,._feedbackMessage_12f5x_291{transition-duration:.01ms!important;animation-duration:.01ms!important}._welcomeSubtitle_12f5x_78,._feedbackMessage_12f5x_291{animation:none!important}._backButton_12f5x_21:hover,._instrumentCard_12f5x_422:hover,._instrumentIcon_12f5x_456:hover,._instrumentButton_12f5x_501:hover,._lessonCard_12f5x_608:hover,._featuredLessonCard_12f5x_569:hover,._startButton_12f5x_850:hover,._sandboxButton_12f5x_944:hover,._generateButton_12f5x_222:hover,._playButton_12f5x_223:hover,._checkButton_12f5x_224:hover{transform:none!important}}.instrument-controls{position:relative;display:flex;gap:10px;align-items:flex-start;justify-content:center;z-index:20;min-height:40px;height:auto;width:100%;flex-wrap:wrap;padding:10px 0}@media (min-width: 769px){.instrument-controls{gap:10px}}@media (max-width: 768px) and (min-width: 481px){.instrument-controls{gap:10px;justify-content:center}.control-group{flex:0 0 auto;min-width:100px}}@media (max-width: 480px){.instrument-controls{flex-flow:column nowrap;gap:10px;height:auto;justify-content:center;align-items:center;padding:15px 10px;width:100%}.control-group{flex:0 0 auto;min-width:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:auto;margin:0 auto}}@media (max-width: 360px){.instrument-controls{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px;padding:15px 0!important;margin:0 auto!important;width:100%!important;left:0!important;right:0!important;position:relative!important}.control-group{display:flex!important;flex-direction:column!important;align-items:center!important;margin:0!important;padding:0!important;position:static!important}}.control-group{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}.instrument-selector-group{flex:1 0 100%;margin-bottom:15px}.instrument-selector-group .control-label{font-size:16px;font-weight:700;color:var(--gray-50)!important;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px;text-shadow:0 0 10px var(--primary-purple-alpha-50)}.instrument-selector{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.instrument-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--primary-purple-alpha-10),var(--primary-purple-alpha-5));border:2px solid var(--primary-purple-alpha-30);border-radius:16px;padding:20px;min-width:120px;height:100px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px var(--black-alpha-20)}.instrument-card:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow),0 8px 32px var(--black-alpha-20)}.instrument-card:nth-child(1){background:linear-gradient(145deg,var(--blue-alpha-10),var(--blue-alpha-05));border-color:var(--blue-alpha-30)}.instrument-card:nth-child(1):hover{transform:translateY(-5px) scale(1.05);border-color:var(--blue-alpha-60);box-shadow:0 15px 40px var(--blue-alpha-30)}.instrument-card:nth-child(1).active{background:linear-gradient(145deg,var(--blue-alpha-30),var(--blue-alpha-20));border-color:var(--blue-500);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 35px var(--blue-alpha-40)}.instrument-card:nth-child(1) .instrument-icon{filter:drop-shadow(0 0 8px var(--blue-alpha-50));color:var(--blue-500)}.instrument-card:nth-child(1):hover .instrument-icon{filter:drop-shadow(0 0 15px var(--blue-alpha-80))}.instrument-card:nth-child(1) .instrument-name{text-shadow:0 0 8px var(--blue-alpha-50)}.instrument-card:nth-child(1) .instrument-glow{background:radial-gradient(circle,var(--blue-alpha-20) 0%,transparent 70%)}.instrument-card:nth-child(2){background:linear-gradient(145deg,var(--green-alpha-10),var(--green-alpha-05));border-color:var(--green-alpha-30)}.instrument-card:nth-child(2):hover{transform:translateY(-5px) scale(1.05);border-color:var(--green-alpha-60);box-shadow:0 15px 40px var(--green-alpha-30)}.instrument-card:nth-child(2).active{background:linear-gradient(145deg,var(--green-alpha-30),var(--green-alpha-20));border-color:var(--green-500);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 35px var(--green-alpha-40)}.instrument-card:nth-child(2) .instrument-icon{filter:drop-shadow(0 0 8px var(--green-alpha-50));color:var(--green-500)}.instrument-card:nth-child(2):hover .instrument-icon{filter:drop-shadow(0 0 15px var(--green-alpha-80))}.instrument-card:nth-child(2) .instrument-name{text-shadow:0 0 8px var(--green-alpha-50)}.instrument-card:nth-child(2) .instrument-glow{background:radial-gradient(circle,var(--green-alpha-20) 0%,transparent 70%)}.instrument-card:nth-child(3){background:linear-gradient(145deg,var(--red-alpha-10),var(--red-alpha-05));border-color:var(--red-alpha-30)}.instrument-card:nth-child(3):hover{transform:translateY(-5px) scale(1.05);border-color:var(--red-alpha-60);box-shadow:0 15px 40px var(--red-alpha-30)}.instrument-card:nth-child(3).active{background:linear-gradient(145deg,var(--red-alpha-30),var(--red-alpha-20));border-color:var(--red-500);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 35px var(--red-alpha-40)}.instrument-card:nth-child(3) .instrument-icon{filter:drop-shadow(0 0 8px var(--red-alpha-50));color:var(--red-500)}.instrument-card:nth-child(3):hover .instrument-icon{filter:drop-shadow(0 0 15px var(--red-alpha-80))}.instrument-card:nth-child(3) .instrument-name{text-shadow:0 0 8px var(--red-alpha-50)}.instrument-card:nth-child(3) .instrument-glow{background:radial-gradient(circle,var(--red-alpha-20) 0%,transparent 70%)}.instrument-card.active .instrument-glow{opacity:1;animation:pulse 2s ease-in-out infinite}.instrument-icon{font-size:32px;margin-bottom:8px;transition:all .3s ease}.instrument-card:hover .instrument-icon{transform:scale(1.2) rotate(5deg)}.instrument-card.active .instrument-icon{transform:scale(1.1);animation:bounce 1.5s ease-in-out infinite}.instrument-name{font-size:14px;font-weight:600;color:var(--gray-50);text-transform:uppercase;letter-spacing:.5px}.instrument-glow{position:absolute;inset:-50%;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:-1}@media (max-width: 768px){.instrument-selector{gap:10px}.instrument-card{min-width:100px;height:80px;padding:15px}.instrument-icon{font-size:28px}.instrument-name{font-size:12px}}@media (max-width: 480px){.instrument-selector{flex-direction:column;align-items:center;gap:10px}.instrument-card{width:200px;height:70px;flex-direction:row;gap:15px;min-width:unset}.instrument-icon{font-size:24px;margin-bottom:0}}.mobile-selector{display:none}.desktop-selector{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}@media (max-width: 480px){.desktop-selector{display:none}.mobile-selector{display:flex;justify-content:center;width:100%;position:relative;z-index:1002}.instrument-dropdown{position:relative;background:linear-gradient(145deg,var(--primary-purple-alpha-10),var(--primary-purple-alpha-5));border:2px solid var(--primary-purple-alpha-30);border-radius:12px;padding:12px 16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 16px var(--black-alpha-10);min-width:160px;max-width:200px;z-index:1001}.instrument-dropdown:hover{border-color:var(--primary-purple-alpha-50);box-shadow:0 6px 20px var(--primary-purple-alpha-20)}.current-instrument{display:flex;align-items:center;justify-content:space-between;gap:8px}.current-instrument .instrument-icon{font-size:20px;filter:drop-shadow(0 0 6px var(--primary-purple-alpha-40))}.current-instrument .instrument-name{font-size:14px;font-weight:600;color:var(--gray-50);text-transform:uppercase;letter-spacing:.5px;text-shadow:0 0 6px var(--primary-purple-alpha-30)}.dropdown-arrow{font-size:12px;color:var(--gray-50);transition:transform .3s ease;opacity:.7}.dropdown-arrow.rotated{transform:rotate(180deg)}.dropdown-options{position:absolute;top:calc(100% + 8px);left:0;right:0;background:linear-gradient(145deg,var(--black-alpha-50),var(--black-alpha-50));border:2px solid var(--primary-purple-alpha-30);border-radius:8px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 8px 32px var(--black-alpha-40);z-index:1003;overflow:hidden}.dropdown-option{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;transition:all .2s ease;border-bottom:1px solid var(--primary-purple-alpha-10)}.dropdown-option:last-child{border-bottom:none}.dropdown-option:hover{background:var(--primary-purple-alpha-15)}.dropdown-option .instrument-icon{font-size:18px}.dropdown-option .instrument-name{font-size:13px;font-weight:600;color:var(--gray-50);text-transform:uppercase;letter-spacing:.5px}.dropdown-option.keyboard-option:hover{background:var(--blue-alpha-15)}.dropdown-option.keyboard-option .instrument-icon{filter:drop-shadow(0 0 6px var(--blue-alpha-50));color:var(--blue-500)}.dropdown-option.keyboard-option .instrument-name{text-shadow:0 0 6px var(--blue-alpha-30)}.dropdown-option.guitar-option:hover{background:var(--green-alpha-15)}.dropdown-option.guitar-option .instrument-icon{filter:drop-shadow(0 0 6px var(--green-alpha-50));color:var(--green-500)}.dropdown-option.guitar-option .instrument-name{text-shadow:0 0 6px var(--green-alpha-30)}.dropdown-option.bass-option:hover{background:var(--red-alpha-15)}.dropdown-option.bass-option .instrument-icon{filter:drop-shadow(0 0 6px var(--red-alpha-50));color:var(--red-500)}.dropdown-option.bass-option .instrument-name{text-shadow:0 0 6px var(--red-alpha-30)}.instrument-dropdown.keyboard-active{background:linear-gradient(145deg,var(--blue-alpha-30),var(--blue-alpha-20));border-color:var(--blue-500);box-shadow:0 8px 32px var(--blue-alpha-40)}.instrument-dropdown.keyboard-active:hover{border-color:var(--blue-alpha-80);box-shadow:0 12px 40px var(--blue-alpha-50);transform:translateY(-2px) scale(1.02)}.instrument-dropdown.keyboard-active .current-instrument .instrument-icon{filter:drop-shadow(0 0 12px var(--blue-alpha-80));color:var(--blue-500)}.instrument-dropdown.keyboard-active .current-instrument .instrument-name{text-shadow:0 0 12px var(--blue-alpha-60)}.instrument-dropdown.guitar-active{background:linear-gradient(145deg,var(--green-alpha-30),var(--green-alpha-20));border-color:var(--green-500);box-shadow:0 8px 32px var(--green-alpha-40)}.instrument-dropdown.guitar-active:hover{border-color:var(--green-alpha-80);box-shadow:0 12px 40px var(--green-alpha-50);transform:translateY(-2px) scale(1.02)}.instrument-dropdown.guitar-active .current-instrument .instrument-icon{filter:drop-shadow(0 0 12px var(--green-alpha-80));color:var(--green-500)}.instrument-dropdown.guitar-active .current-instrument .instrument-name{text-shadow:0 0 12px var(--green-alpha-60)}.instrument-dropdown.bass-active{background:linear-gradient(145deg,var(--red-alpha-30),var(--red-alpha-20));border-color:var(--red-500);box-shadow:0 8px 32px var(--red-alpha-40)}.instrument-dropdown.bass-active:hover{border-color:var(--red-alpha-80);box-shadow:0 12px 40px var(--red-alpha-50);transform:translateY(-2px) scale(1.02)}.instrument-dropdown.bass-active .current-instrument .instrument-icon{filter:drop-shadow(0 0 12px var(--red-alpha-80));color:var(--red-500)}.instrument-dropdown.bass-active .current-instrument .instrument-name{text-shadow:0 0 12px var(--red-alpha-60)}}.control-group.octave-range-control{flex:1 0 100%}.control-label{font-size:12px;font-weight:600;color:var(--gray-50)!important;text-transform:uppercase;letter-spacing:.5px}.control-label.checkbox-label{text-transform:none;display:flex;align-items:center;gap:8px;cursor:pointer}.styled-checkbox{width:16px;height:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--primary-purple-alpha-10);border:2px solid var(--primary-purple);border-radius:4px;cursor:pointer;transition:all .2s ease;position:relative;flex-shrink:0}.styled-checkbox:checked{background:linear-gradient(145deg,var(--primary-purple),var(--primary-purple-dark));border-color:var(--primary-purple-lighter)}.styled-checkbox:checked:after{content:"✓";position:absolute;top:-2px;left:2px;color:var(--white);font-size:12px;font-weight:700}.styled-checkbox:hover{background:var(--primary-purple-alpha-20);transform:scale(1.1)}.control-input{background:var(--white-alpha-10);border:2px solid var(--white);color:var(--white);padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;outline:none;min-width:120px;width:120px;text-align:center;height:32px}.control-input.with-internal-buttons{background:var(--gray-600);border:2px solid var(--white);color:var(--white);padding-left:20px;padding-right:20px}@media (max-width: 480px){.control-input{min-width:100px;width:100px;font-size:11px}}@media (max-width: 360px){.control-input{min-width:120px;width:120px;font-size:12px;margin:0 auto}}.control-input:hover:not(:disabled):not([readonly]){background:var(--white-alpha-20);box-shadow:0 6px 12px var(--black-alpha-30)}.control-input.with-internal-buttons:hover:not(:disabled):not([readonly]){background:var(--gray-700);box-shadow:0 6px 12px var(--black-alpha-30)}.control-input:disabled,.control-input[readonly]{cursor:not-allowed;opacity:.7}.control-input:disabled:hover,.control-input[readonly]:hover{background:var(--gray-600);box-shadow:none;transform:none}.control-input:focus{box-shadow:0 0 0 2px var(--white-alpha-30)}.control-input.with-internal-buttons:focus{box-shadow:0 0 0 2px var(--blue-alpha-30)}.control-input option{background:var(--dark-bg-primary);color:var(--white);text-align:center;-moz-text-align-last:center;text-align-last:center;padding:8px 0;direction:ltr;border:1px solid var(--gray-800);display:block;width:100%;box-sizing:border-box;border-radius:4px;margin:1px 0}.control-input option:checked{background:var(--blue-500)!important;color:var(--dark-bg-primary)!important;font-weight:600}.input-with-buttons{position:relative;display:inline-block}.control-button-internal{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:20px;background:transparent;border:none;color:var(--dark-text-primary);border-radius:3px;font-size:12px;pointer-events:auto;font-weight:700;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;z-index:10}@media (max-width: 480px){.control-button-internal{width:20px;height:24px;font-size:14px}}.input-with-buttons .control-button-internal{color:var(--white)!important}.input-with-buttons .control-button-internal:hover{color:var(--white)!important;background:var(--white-alpha-10)!important}.input-with-buttons .control-button-internal:active{color:var(--white)!important;background:var(--white-alpha-20)!important}.input-with-buttons .control-button-internal.minus,.input-with-buttons .control-button-internal.plus,.input-with-buttons .control-button-internal.minus:hover,.input-with-buttons .control-button-internal.plus:hover,.input-with-buttons .control-button-internal.minus:active,.input-with-buttons .control-button-internal.plus:active{color:var(--white)!important}.control-button-internal:hover{background:var(--primary-purple-alpha-10)}.control-button-internal:active{background:var(--primary-purple-alpha-20);transform:translateY(-50%) scale(.95)}.control-button-internal:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:1px;box-shadow:var(--focus-ring-shadow)}.control-button-internal.minus{left:3px}.control-button-internal.plus{right:3px}.control-button.delete-selection{background:var(--red-alpha-10);border:2px solid var(--red-600);color:var(--red-lighter);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:none;outline:none;display:flex;align-items:center;gap:6px;height:32px;min-width:120px;margin-top:0;margin-bottom:0}.control-button.delete-selection:hover{background:var(--red-alpha-20)}.control-button.delete-selection:active{transform:translateY(0);box-shadow:none}@media (max-width: 480px){.control-button.delete-selection{min-width:120px!important;width:120px!important;font-size:11px;padding:6px 12px}}@media (max-width: 480px) and (min-width: 361px){.control-button.delete-selection{margin-left:auto!important;margin-right:auto!important}}@media (max-width: 360px){.control-button.delete-selection{min-width:120px!important;width:120px!important;font-size:12px;padding:6px 12px;margin-left:auto;margin-right:auto}}.control-button.generate-melody{background:var(--blue-alpha-10);border:2px solid var(--blue-500);color:var(--blue-400);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px var(--black-alpha-20);outline:none;height:32px;width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;justify-content:center}.control-button.generate-melody:hover:not(:disabled){background:var(--blue-alpha-20);transform:translateY(-1px);box-shadow:0 6px 12px var(--black-alpha-30)}.control-button.generate-melody:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px var(--black-alpha-20)}.control-button.generate-melody:disabled{background:var(--gray-neutral);border-color:var(--gray-600);color:var(--gray-600);cursor:not-allowed;opacity:.5}.play-melody-container{width:100%;display:flex;justify-content:center}.control-button.play-melody{position:relative;width:48px;height:48px;min-width:48px;max-width:48px;display:flex;justify-content:center;align-items:center;padding:0;background:transparent;border:none;color:var(--white);transition:all .2s ease;cursor:pointer;outline:none}.control-button.play-melody:hover:not(:disabled){color:var(--white);transform:translateY(-1px)}.control-button.play-melody:active:not(:disabled){transform:translateY(0);color:var(--white)}.control-button.play-melody.playing{background:transparent;border:none;color:var(--white)}.control-button.play-melody.playing:hover{color:var(--white)}.control-button.play-melody.disabled{opacity:.4;cursor:not-allowed}.control-button.play-melody.disabled:hover{transform:none;color:var(--white)}.play-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px}.play-icon svg{width:96px;height:96px;transition:all .2s ease}.control-button.play-melody:active .play-icon svg{transform:scale(.9)}.control-group.melody-controls-row{width:100%;margin-top:8px}.melody-controls-container{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:12px}.melody-controls-container .control-button{flex-shrink:0}.control-group.progress-bar-row{width:100%;margin-top:8px}.progress-bar-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}.progress-bar-background{width:100%;height:10px;background:var(--blue-alpha-20);border:1px solid var(--blue-500);border-radius:4px;overflow:visible;box-shadow:inset 0 1px 3px var(--black-alpha-30);position:relative;cursor:pointer}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--blue-500),var(--blue-400));transition:width .15s ease-out;border-radius:3px;box-shadow:0 0 6px var(--blue-alpha-60)}.progress-bar-head{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--white);border:2px solid var(--blue-500);border-radius:50%;cursor:grab;box-shadow:0 2px 4px var(--black-alpha-30);transition:all .15s ease-out;z-index:2}.progress-bar-head:hover{width:14px;height:14px;border-color:var(--blue-400);box-shadow:0 3px 6px var(--blue-alpha-40)}.progress-bar-head:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.1)}.progress-bar-container.disabled{opacity:.4;pointer-events:none}.progress-bar-container.disabled .progress-bar-background,.progress-bar-container.disabled .progress-bar-head{cursor:not-allowed}.progress-time-info{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:16px;font-weight:600;color:var(--dark-text-primary);text-shadow:0 1px 2px var(--black-alpha-50)}.progress-current{color:var(--white)}.progress-divider{color:var(--primary-purple);opacity:.7}.progress-total{color:var(--white);opacity:.8}@media (max-width: 480px){.control-button.play-melody{width:40px;height:40px;min-width:40px;max-width:40px}.play-icon svg{width:80px;height:80px}.progress-bar-background{height:8px;width:240px!important;min-width:240px!important;max-width:240px!important}.progress-bar-container{width:240px!important;min-width:240px!important;max-width:240px!important}.progress-time-info{font-size:12px;width:240px!important;min-width:240px!important;max-width:240px!important}.melody-controls-container{gap:8px}.progress-bar-head{width:10px;height:10px}.progress-bar-head:hover{width:12px;height:12px}}@media (max-width: 360px){.control-button.play-melody{width:40px;height:40px;min-width:40px;max-width:40px}.play-icon svg{width:80px;height:80px}.progress-bar-background{height:8px;width:240px!important;min-width:240px!important;max-width:240px!important}.progress-bar-container{width:240px!important;min-width:240px!important;max-width:240px!important}.progress-time-info{font-size:12px;width:240px!important;min-width:240px!important;max-width:240px!important}}@media (max-width: 480px){.control-button.generate-melody{width:120px!important;font-size:12px;padding:6px 12px;height:32px!important;line-height:1;max-height:32px;min-height:32px;flex-shrink:0;box-sizing:border-box}}@media (max-width: 360px){.control-button.generate-melody{width:120px!important;font-size:12px;padding:6px 12px;height:32px!important;line-height:1;margin:0 auto;max-height:32px;min-height:32px;flex-shrink:0;box-sizing:border-box}}.control-button.apply-scale{background:var(--green-alpha-10);border:2px solid var(--green-400);color:var(--green-light);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px var(--black-alpha-20);outline:none;height:32px;min-width:120px;margin-top:19px}.control-button.apply-scale:hover{background:var(--green-alpha-20);transform:translateY(-1px);box-shadow:0 6px 12px var(--black-alpha-30)}.control-button.apply-scale:active{transform:translateY(0);box-shadow:0 2px 4px var(--black-alpha-20)}@media (max-width: 480px){.control-button.apply-scale{min-width:100px;font-size:11px;padding:6px 8px}}@media (max-width: 360px){.control-button.apply-scale{min-width:120px;width:120px;font-size:12px;padding:6px 12px;margin:0 auto}}.control-group.scale-chord-options{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;flex:0 0 auto!important}@media (max-width: 480px) and (min-width: 361px){.header-controls-left{display:flex;flex-flow:row wrap;align-items:center;justify-content:center;gap:10px;width:100%}.header-controls-left .control-group{flex:0 0 auto;margin:0;padding:0}.header-controls-left .control-group:has(.selection-mode-switch){margin:0}.control-group.scale-chord-options{margin:22px 0 0!important;padding:0!important}.header-controls-left .control-group:has(.delete-selection){margin:0!important}.control-button.delete-selection{margin:0!important}body:has([data-instrument=guitar]) .control-group.scale-chord-options,body:has([data-instrument=bass]) .control-group.scale-chord-options,body:has(.instrument-container[data-practice-mode=true]) .control-group.scale-chord-options{margin-top:3px!important}body:has([data-instrument=guitar]) .control-button.delete-selection,body:has([data-instrument=bass]) .control-button.delete-selection,body:has(.instrument-container[data-practice-mode=true]) .control-button.delete-selection{margin-top:4px!important}body:has([data-instrument=keyboard]) .control-button.delete-selection{margin-top:2px!important}}@media (max-width: 360px){.header-controls-left{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%}.header-controls-left .control-group{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0!important;padding:0!important}.header-controls-left .control-group>*{margin:0!important}.header-controls-left .control-group:has(.selection-mode-switch){margin:0!important;padding:0!important}.control-group.scale-chord-options{margin:0!important;padding:0!important;gap:0!important}.control-group.scale-chord-options>*{margin:0!important}.control-group.scale-chord-options .scale-options-container{margin:0!important;padding:0!important}.scale-options-container.collapsed{min-height:0!important;height:auto!important;margin:0!important;padding:0!important}.header-controls-left .control-group:has(.delete-selection){margin:0!important;padding:0!important}.control-button.delete-selection{margin:0!important}}.header-controls-left{display:flex!important;flex-flow:row wrap!important;align-items:flex-start!important;gap:20px!important}.octave-range-control{min-width:280px!important;width:100%!important;max-width:500px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;margin:0 auto!important}.octave-range-slider{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%;margin:0 auto}.range-labels-center{display:flex;justify-content:center;width:100%;max-width:100%;margin-bottom:8px}.range-label-center{font-size:12px;font-weight:600;color:var(--white);background:var(--white-alpha-10);border:2px solid var(--white);border-radius:6px;padding:4px 12px;box-shadow:0 2px 4px var(--black-alpha-20)}.light .range-label-center{color:var(--white)}.dual-range-container{position:relative;width:100%!important;min-width:280px!important;max-width:100%!important;height:40px;margin:0 auto}.range-fill{position:absolute;top:0;height:6px;background:linear-gradient(145deg,var(--white),var(--gray-200));border-radius:3px;z-index:1;pointer-events:none}.range-slider{position:absolute;width:100%;height:6px;border-radius:3px;background:var(--white-alpha-20);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;pointer-events:none}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,var(--white),var(--gray-300));border:2px solid var(--white);cursor:pointer;box-shadow:0 2px 4px var(--black-alpha-30);pointer-events:auto}.range-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,var(--white),var(--gray-300));border:2px solid var(--white);cursor:pointer;box-shadow:0 2px 4px var(--black-alpha-30);pointer-events:auto}.range-slider.range-low{z-index:3}.range-slider.range-high{z-index:2;background:transparent}.range-slider.range-low::-webkit-slider-thumb{margin-left:0}.range-slider.range-high::-webkit-slider-thumb{margin-left:0}.range-slider.range-low::-moz-range-thumb{transform:translate(0)}.range-slider.range-high::-moz-range-thumb{transform:translate(0)}.range-slider.range-low.same-position::-webkit-slider-thumb{margin-left:-10px}.range-slider.range-high.same-position::-webkit-slider-thumb{margin-left:10px}.range-slider.range-low.same-position::-moz-range-thumb{transform:translate(-10px)}.range-slider.range-high.same-position::-moz-range-thumb{transform:translate(10px)}.range-slider:hover::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 4px 8px var(--black-alpha-40)}.range-slider:hover::-moz-range-thumb{transform:scale(1.1);box-shadow:0 4px 8px var(--black-alpha-40)}.octave-visual{display:flex;justify-content:center;align-items:center;gap:0;margin-top:-29px;font-size:0;line-height:0;letter-spacing:0;word-spacing:0;width:100%}.octave-mini{width:12.5%;height:54px;padding:0;margin:0;border:0;outline:0;transition:all .3s ease;flex-shrink:0;display:block;vertical-align:top}.octave-icon{width:100%;height:100%;filter:brightness(1);display:block;margin:0;padding:0;border:0;vertical-align:top}.octave-mini.highlight .octave-icon{filter:brightness(1) saturate(1)}.octave-mini.dim .octave-icon{filter:brightness(.4) saturate(.5)}@media (max-width: 480px){.octave-mini{height:40px}}@media (max-width: 360px){.octave-range-control .octave-mini{height:32px!important;width:12.5%!important}.octave-range-control .dual-range-container{width:240px!important;min-width:240px!important;max-width:240px!important;height:36px!important}.octave-range-control .range-label-center{font-size:11px!important;padding:3px 10px!important}.octave-range-control .octave-range-slider,.octave-range-control .octave-visual{width:240px!important;max-width:240px!important}}.control-input.instrument-select-keyboard{background:var(--blue-alpha-10)!important;border:2px solid var(--blue-500)!important}.control-input.instrument-select-keyboard:hover{background:var(--blue-alpha-20)!important}.control-input.instrument-select-keyboard:focus{box-shadow:0 0 0 2px var(--blue-alpha-30)!important}.control-input.instrument-select-guitar{background:var(--green-alpha-10)!important;border:2px solid var(--green-500)!important}.control-input.instrument-select-guitar:hover{background:var(--green-alpha-20)!important}.control-input.instrument-select-guitar:focus{box-shadow:0 0 0 2px var(--green-alpha-30)!important}.control-input.instrument-select-bass{background:var(--red-alpha-10)!important;border:2px solid var(--red-500)!important}.control-input.instrument-select-bass:hover{background:var(--red-alpha-20)!important}.control-input.instrument-select-bass:focus{box-shadow:0 0 0 2px var(--red-alpha-30)!important}.control-input.flashing,select.control-input.flashing,.modern-control-item .input-with-buttons .control-input.flashing{border-color:var(--green-550)!important;box-shadow:0 0 8px var(--green-alpha-40)!important}.modern-control-item .input-with-buttons:has(.control-input.flashing){border-color:var(--green-550)!important;box-shadow:0 0 8px var(--green-alpha-40)!important}.control-group.notes-toggle-row{width:100%;flex:1 1 100%}.notes-toggle-container{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:19px}.instrument-controls.guitar-mode .notes-toggle-container{margin-top:0}@media (min-width: 481px){.instrument-controls:not(.guitar-mode) .notes-toggle-container{margin-top:19px}}.notes-toggle-container .toggle-text{font-size:12px;font-weight:600;color:var(--dark-text-primary)}.light .notes-toggle-container.control-input{background:var(--primary-purple-alpha-15);border:2px solid var(--purple-800);color:var(--dark-text-primary)}.light .notes-toggle-container.control-input:hover{background:var(--primary-purple-alpha-25);border-color:var(--purple-700)}@media (max-width: 480px){.control-group.notes-toggle-row{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:auto!important;margin:0!important;padding:0!important;text-align:center!important;flex:0 0 auto!important;position:static!important}.notes-toggle-container{display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;text-align:center!important;position:static!important}.notes-toggle-container .toggle-text{font-size:11px}}@media (max-width: 360px){.control-group.notes-toggle-row{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:auto!important;margin:0 auto!important;text-align:center!important;flex:0 0 auto!important}.notes-toggle-container{display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto!important;text-align:center!important}}.control-group.bpm-notes-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:flex-start;justify-content:center}.control-group.bpm-notes-melody-row{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center;justify-content:center;border:2px solid var(--gray-600);border-radius:8px;padding:10px;background:var(--black-alpha-10)}.control-group.bpm-notes-melody-row .melody-controls-top{display:flex;flex-direction:row;gap:0;align-items:flex-start;justify-content:center}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:first-child{transform:translateY(10px) translate(-112px)}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(2){transform:translateY(19px) translate(-102px)}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(3){transform:translate(-92px)}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(4){transform:translate(-72px)}.control-subgroup{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}.control-subgroup.generate-melody{flex:0 0 120px}.control-group.deselect-generate-row{display:flex;flex-direction:row;gap:10px;width:100%;align-items:center;justify-content:center}.control-group.deselect-generate-row .control-subgroup{flex:1;display:flex;justify-content:center}@media (max-width: 480px){.control-group.bpm-notes-row{gap:8px}.control-group.bpm-notes-melody-row{gap:6px;padding:10px;width:auto;min-width:260px;margin:0 auto}.control-group.deselect-generate-row{gap:8px}.control-group.bpm-notes-melody-row .melody-controls-top{flex-direction:column;gap:6px;align-items:center}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:first-child,.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(2),.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(3),.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(4){transform:none}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:first-child{order:4;display:flex;align-items:center;justify-content:center;width:100%}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(2){order:3;gap:0;display:flex;align-items:center;justify-content:center;width:100%}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(3){order:1;display:flex;align-items:center;justify-content:center;width:100%}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(4){order:2;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:first-child,.melody-controls-top .control-subgroup:nth-child(2),.melody-controls-top .control-subgroup:nth-child(3),.melody-controls-top .control-subgroup:nth-child(4){transform:none}.melody-controls-top .control-subgroup:first-child{order:4;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:nth-child(2){order:3;gap:0;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:nth-child(3){order:1;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:nth-child(4){order:2;display:flex;align-items:center;justify-content:center;width:100%}}@media (max-width: 360px){.control-group.bpm-notes-row{flex-direction:column;gap:5px}.control-group.bpm-notes-melody-row{flex-direction:column;gap:5px;margin:0 auto}.control-group.deselect-generate-row{flex-direction:column;gap:5px}.control-subgroup{width:100%}.control-group.bpm-notes-melody-row .melody-controls-top{flex-direction:column;gap:6px;align-items:center}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:first-child{order:4;display:flex;align-items:center;justify-content:center;width:100%}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(2){order:3;gap:0;display:flex;align-items:center;justify-content:center;width:100%}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(3){order:1;display:flex;align-items:center;justify-content:center;width:100%}.control-group.bpm-notes-melody-row .melody-controls-top .control-subgroup:nth-child(4){order:2;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top{flex-direction:column;gap:6px;align-items:center}.melody-controls-top .control-subgroup:first-child{order:4;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:nth-child(2){order:3;gap:0;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:nth-child(3){order:1;display:flex;align-items:center;justify-content:center;width:100%}.melody-controls-top .control-subgroup:nth-child(4){order:2;display:flex;align-items:center;justify-content:center;width:100%}}@media (max-width: 360px){.controls-container.third-row{display:flex!important;flex-flow:row wrap!important;justify-content:center!important;align-items:center!important;gap:12px!important;margin-top:7px!important}}.control-group.recording-controls{margin-top:12px;border-top:1px solid var(--gray-300);padding-top:12px}.recording-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.control-button.record-button{min-width:120px;background:var(--accent-color, var(--green-28a745));color:var(--white);border:none;transition:all .2s ease}.control-button.record-button:hover:not(:disabled){background:var(--accent-hover-color, var(--green-218838));transform:translateY(-1px)}.control-button.record-button:disabled{background:var(--disabled-color, var(--gray-6c757d));cursor:not-allowed;transform:none}.control-button.download-button{min-width:40px;width:40px;height:40px;background:var(--white);color:var(--gray-800);border:2px solid var(--gray-200);border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.control-button.download-button:hover:not(:disabled){background:var(--gray-100);border-color:var(--btn-primary-bg);color:var(--btn-primary-bg);transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow-button)}@media (prefers-color-scheme: dark){.control-group.recording-controls{border-top-color:var(--border-color-dark, var(--gray-404040))}.control-button.record-button{--accent-color: var(--green-20c997);--accent-hover-color: var(--green-1a9977)}.control-button.download-button{background:var(--dark-bg-secondary);color:var(--dark-text-tertiary);border-color:var(--dark-border-primary)}.control-button.download-button:hover:not(:disabled){background:var(--gray-850);border-color:var(--green-550);color:var(--green-550);box-shadow:0 2px 8px var(--green-alpha-20)}}.control-group.modern-controls-row{background:linear-gradient(135deg,var(--gray-50) 0%,var(--gray-200) 100%);border:1px solid var(--gray-300);border-radius:12px;padding:20px;margin:0;max-width:100%;box-sizing:border-box;overflow:visible}.controls-container{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;max-width:100%;box-sizing:border-box}.modern-generate-button{background:var(--btn-primary-bg);color:var(--white);border:2px solid var(--blue-700);border-radius:6px;padding:7.5px 24px;font-size:15px;font-weight:600;transition:all .2s ease;cursor:pointer;width:100%;min-width:auto;margin-top:0}.modern-generate-button:hover:not(:disabled){background:var(--blue-700);border-color:var(--blue-700)}.modern-generate-button:disabled{background:var(--gray-500);border:2px solid var(--gray-600);cursor:not-allowed}@media (min-width: 769px){.controls-container:not(.second-row):not(.third-row){gap:12px;flex-wrap:nowrap}.modern-generate-button{margin-top:29px}}.modern-notes-toggle-button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;overflow:hidden}.modern-notes-toggle-button.expanded{min-width:300px;max-width:600px;width:auto;padding:0 20px 15px;background:var(--green-alpha-10);border:2px solid var(--green-550);border-radius:6px}.modern-notes-toggle-button .toggle-content{background:var(--green-550);color:var(--dark-bg-primary)!important;border:2px solid var(--green-550);border-radius:6px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .3s ease;cursor:pointer;min-width:140px;display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;outline:none}.modern-notes-toggle-button .toggle-content:hover{background:var(--green-700);border-color:var(--green-700);color:var(--dark-bg-primary)!important}.modern-notes-toggle-button .toggle-content:active{background:var(--green-700);border-color:var(--green-700);color:var(--dark-bg-primary)!important;transform:none}.modern-notes-toggle-button.expanded .toggle-content{background:var(--green-alpha-10);border-radius:0 0 6px 6px;border-top:none}.modern-notes-toggle-button .expanded-melody-content{width:100%;margin-top:0;padding-top:8px;animation:expand-in .3s ease-out}.modern-notes-toggle-button .expanded-melody-content .melody-title{color:var(--green-550)!important;font-size:14px;font-weight:600;margin-bottom:8px;text-align:center}.modern-notes-toggle-button .expanded-melody-content .melody-notes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.modern-notes-toggle-button .expanded-melody-content .melody-note{background:var(--green-550)!important;color:var(--dark-bg-primary)!important;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;border:2px solid transparent;transition:none}.modern-notes-toggle-button .expanded-melody-content .melody-note.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;color:var(--gray-800)!important;border:2px solid var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important;transition:none!important}@keyframes expand-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.modern-notes-toggle-button *{color:var(--black)!important}.modern-notes-toggle-button.expanded .toggle-content *{color:var(--green-550)!important}.modern-control-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;box-sizing:border-box}.modern-control-item .control-label{font-size:14px;font-weight:600;color:var(--gray-700);margin:0;text-transform:uppercase;letter-spacing:.5px}.modern-control-item .input-with-buttons{position:relative;background:var(--blue-alpha-10)!important;border:2px solid var(--btn-primary-bg)!important;border-radius:8px;overflow:visible;transition:all .2s ease}.modern-control-item .input-with-buttons:focus-within{border-color:var(--btn-primary-bg);box-shadow:0 0 0 3px var(--blue-alpha-10)}.modern-control-item .control-input{border:none;background:transparent;padding:12px 40px;text-align:center;font-size:16px;font-weight:600;color:var(--btn-primary-bg)!important;width:80px}.modern-control-item .control-input:focus{outline:none}.modern-control-item .control-button-internal{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;width:32px;height:27px;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;z-index:10;pointer-events:auto;color:var(--btn-primary-bg)}.modern-control-item .control-button-internal:hover{background:var(--btn-primary-bg);color:var(--white);transform:translateY(-50%)}.modern-control-item .control-button-internal.minus{left:4px}.modern-control-item .control-button-internal.plus{right:4px}.controls-container.second-row{margin-top:7px;padding-top:0;justify-content:center}.controls-container.third-row{margin-top:7px;justify-content:center;display:flex;align-items:center;flex-flow:row wrap}.modern-control-item.audio-player-section{flex:1;max-width:100%;width:100%}.modern-control-item.audio-player-section.centered{width:100%;align-items:center}@media (prefers-color-scheme: dark){.control-group.modern-controls-row{background:linear-gradient(135deg,var(--dark-bg-secondary) 0%,var(--dark-bg-surface) 100%);border-color:var(--dark-border-primary)}.modern-control-item .control-label{color:var(--dark-text-tertiary)}.modern-control-item .input-with-buttons{background:var(--gray-850);border-color:var(--gray-600)}.modern-control-item .input-with-buttons:focus-within{border-color:var(--btn-primary-bg);box-shadow:0 0 0 3px var(--blue-alpha-10)}.modern-control-item .control-input{color:var(--dark-text-tertiary)}.modern-control-item .control-button-internal{background:transparent;color:var(--dark-text-tertiary)}.modern-control-item .control-button-internal:hover{background:var(--green-550);color:var(--dark-bg-primary)}}.dark .modern-control-item.audio-player-section audio,body.dark .modern-control-item.audio-player-section audio{filter:invert(1) hue-rotate(180deg)}@media (max-width: 768px){.controls-container{flex-direction:column;gap:12px}.modern-generate-button,.modern-notes-toggle-button{min-width:200px}.modern-control-item{width:100%}.controls-container.third-row{display:flex!important;flex-flow:row wrap!important;justify-content:center!important;align-items:center!important;gap:12px!important}}@media (max-width: 768px) and (min-width: 601px){.controls-container:not(.second-row):not(.third-row){display:grid;grid-template:"bpm notes chord" auto "generate generate generate" auto / 1fr 1fr 1fr;gap:12px 8px}.modern-control-item:nth-child(1){grid-area:bpm}.modern-control-item:nth-child(2){grid-area:notes}.modern-control-item:nth-child(3){grid-area:chord}.modern-generate-button{grid-area:generate;min-width:auto;width:100%}.modern-notes-toggle-button{min-width:auto;width:100%}}@media (max-width: 600px) and (min-width: 481px){.control-group.modern-controls-row{padding:25px 20px;width:80%;margin-left:auto;margin-right:auto}.controls-container:not(.second-row):not(.third-row){display:grid;grid-template:"bpm notes" auto "chord chord" auto "generate generate" auto / 1fr 1fr;gap:12px 8px}.modern-control-item:nth-child(1){grid-area:bpm}.modern-control-item:nth-child(2){grid-area:notes}.modern-control-item:nth-child(3){grid-area:chord}.modern-generate-button{grid-area:generate;width:100%;min-width:auto}.modern-notes-toggle-button{width:100%;min-width:auto}}@media (max-width: 480px){.control-group.modern-controls-row{display:flex!important;flex-direction:column!important;align-items:center!important;margin:0 auto!important;padding:15px!important;position:static!important;width:auto!important;max-width:360px!important}.controls-container:not(.second-row):not(.third-row){display:flex;flex-direction:column;gap:12px}.modern-control-item:nth-child(1),.modern-control-item:nth-child(2),.modern-control-item:nth-child(3){width:100%}.modern-generate-button{width:100%}.controls-container{flex-direction:column;gap:12px}.control-group.modern-controls-row .modern-control-item .control-input{width:110px!important;min-width:110px!important}.controls-container.third-row{display:flex!important;flex-flow:row wrap!important;justify-content:center!important;align-items:center!important;gap:12px!important}.modern-notes-toggle-button.expanded{min-width:280px;max-width:320px;padding:0 15px 12px}.modern-notes-toggle-button .expanded-melody-content .melody-notes{gap:4px}.modern-notes-toggle-button .expanded-melody-content .melody-note{font-size:11px;padding:3px 6px}.modern-notes-toggle-button .expanded-melody-content .melody-note.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;color:var(--gray-800)!important;border:2px solid var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important;transition:none!important}}.wav-player-container{margin-top:12px;padding:12px;background:var(--gray-100);border:1px solid var(--gray-300);border-radius:8px;display:flex;flex-direction:column;gap:8px;align-items:center}.wav-player-container .control-label{font-size:14px;font-weight:500;color:var(--text-color, var(--gray-333));margin:0}.wav-audio-player{width:100%;max-width:600px;height:40px;border-radius:6px;outline:none}.wav-audio-player::-webkit-media-controls-panel{background-color:var(--white);border-radius:6px}.wav-audio-player::-webkit-media-controls-play-button,.wav-audio-player::-webkit-media-controls-pause-button{background-color:var(--accent-color, var(--blue-007bff));border-radius:50%;color:var(--white)}@media (prefers-color-scheme: dark){.wav-player-container{background:var(--input-background-dark, var(--gray-2d3338));border-color:var(--border-color-dark, var(--gray-404040))}.wav-player-container .control-label{color:var(--text-color-dark, var(--gray-e9ecef))}.wav-audio-player::-webkit-media-controls-panel{background-color:var(--control-background-dark, var(--gray-343a40))}}@media (max-width: 480px){.recording-buttons{flex-direction:column;gap:8px}.control-button.record-button{width:100%;min-width:auto}}@media (min-width: 481px){body:has([data-instrument=keyboard]) .control-button.delete-selection{margin-top:23px!important}body:has([data-instrument=guitar]) .control-button.delete-selection,body:has([data-instrument=bass]) .control-button.delete-selection,body:has(.instrument-container[data-practice-mode=true]) .control-button.delete-selection{margin-top:5px!important}}.generating-indicator{display:flex;align-items:center;gap:12px;padding:16px 24px;background:var(--blue-alpha-10);border:2px solid var(--blue-500);border-radius:8px;color:var(--blue-400);font-size:14px;font-weight:500}.generating-spinner{width:20px;height:20px;border:2px solid var(--blue-alpha-30);border-left:2px solid var(--blue-500);border-radius:50%;animation:spin 1s linear infinite}.generating-text{color:var(--blue-400);font-weight:500}@media (max-width: 480px){.generating-indicator{padding:12px 16px;font-size:12px;gap:8px}.generating-spinner{width:16px;height:16px}}.ai-button-container{position:relative;display:flex;justify-content:center;align-items:center;margin-top:20px;margin-bottom:20px;z-index:100}@media (max-width: 768px){.ai-button-container{margin-top:15px;margin-bottom:15px}}.melody-controls{text-align:center;margin-top:40px}.notes-toggle-container{display:flex;justify-content:center;padding:12px 20px;background:var(--primary-purple-alpha-10);border:none;border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);max-width:200px;margin-left:auto;margin-right:auto;margin-bottom:20px;cursor:pointer;transition:all .2s ease;outline:none}.notes-toggle-container:hover{background:var(--primary-purple-alpha-20);transform:translateY(-1px);box-shadow:0 6px 12px var(--black-alpha-30)}.notes-toggle-container:focus{box-shadow:0 0 0 2px var(--primary-purple-alpha-30)}.dark .notes-toggle-container{background:var(--primary-purple-alpha-15)}.light .notes-toggle-container{background:var(--primary-purple-alpha-10);color:var(--dark-bg-tertiary)}.light .notes-toggle-container:hover{background:var(--primary-purple-alpha-15)}.chord-mode-select{background:#007bff1a!important;border:2px solid var(--blue-007bff)!important;color:var(--blue-007bff)!important;font-weight:600!important;text-align:center!important;-moz-text-align-last:center!important;text-align-last:center!important;min-width:120px!important;width:120px!important;padding:6px 10px!important;height:35px!important;line-height:1.2!important;font-size:12px!important;box-sizing:border-box!important}.chord-mode-select:hover:not(:disabled){background:#007bff26!important;border-color:var(--blue-007bff)!important;box-shadow:0 2px 4px #0000000d!important}.chord-mode-select:disabled:hover{background:#007bff1a!important;border-color:var(--blue-007bff)!important;box-shadow:none!important}.chord-mode-select:focus{box-shadow:0 0 0 3px #007bff1a!important;border-color:var(--blue-007bff)!important}.chord-mode-select option{background:var(--gray-1a1a1a)!important;color:var(--white)!important;padding:8px!important;text-align:center!important}.light .chord-mode-select{background:#0080ff1f!important;border-color:#0080ff66!important;color:var(--blue-003d7a)!important}.light .chord-mode-select:hover:not(:disabled){background:#0080ff33!important;border-color:#0080ff99!important}.light .chord-mode-select:disabled:hover{background:#0080ff1f!important;border-color:#0080ff66!important}.light .chord-mode-select:focus{box-shadow:0 0 0 2px #0080ff66!important;border-color:#0080ffb3!important}.light .chord-mode-select option{background:var(--gray-f0f9ff)!important;color:var(--blue-003d7a)!important}.chord-mode-toggle{background:#007bff1a;border:2px solid var(--blue-007bff);color:var(--blue-007bff);font-weight:600;text-align:center;min-width:120px;width:120px;padding:6px 10px;border-radius:6px;height:35px;line-height:1.2;font-size:12px;box-sizing:border-box;cursor:pointer;transition:all .2s ease;outline:none;margin:0 auto 20px;display:block}.chord-mode-toggle:hover:not(:disabled){background:#007bff26;border-color:var(--blue-007bff);transform:translateY(-1px);box-shadow:0 6px 12px #0000004d}.chord-mode-toggle:disabled:hover{background:#007bff1a;border-color:var(--blue-007bff);transform:none;box-shadow:none}.chord-mode-toggle:focus{box-shadow:0 0 0 3px #007bff1a;border-color:var(--blue-007bff)}.chord-mode-toggle:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.chord-mode-toggle.flashing{border-color:var(--green-550)!important;border-width:4px!important;box-shadow:0 0 20px var(--green-alpha-80)!important;background:var(--green-alpha-40)!important;transition:none!important;transform:scale(1.05)!important}.light .chord-mode-toggle.flashing{border-color:var(--green-550)!important;border-width:4px!important;box-shadow:0 0 20px #10b981!important;background:var(--green-alpha-50)!important;transition:none!important;transform:scale(1.05)!important}.light .chord-mode-toggle{background:#0080ff1f;border-color:#0080ff66;color:var(--blue-003d7a)}.light .chord-mode-toggle:hover:not(:disabled){background:#0080ff33;border-color:#0080ff99}.light .chord-mode-toggle:disabled:hover{background:#0080ff1f;border-color:#0080ff66}.light .chord-mode-toggle:focus{box-shadow:0 0 0 2px #0080ff66;border-color:#0080ffb3}.selected-notes{font-size:18px;font-weight:600;margin-bottom:20px;color:var(--dark-bg-primary)}.dark .selected-notes{color:var(--dark-text-primary)}.buttons{display:flex;gap:15px;justify-content:center;margin-bottom:30px}.button{padding:12px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;background:var(--primary-purple);color:var(--dark-text-primary)}.button:disabled{opacity:.5;cursor:not-allowed}.button:not(:disabled):hover{background:var(--primary-purple-6600cc);transform:translateY(-2px);box-shadow:0 4px 12px var(--primary-purple-alpha-40)}.button-stop{background:var(--red-e53e3e)!important;color:var(--white)!important}.button-stop:not(:disabled):hover{background:var(--red-c53030)!important;box-shadow:0 4px 12px #e53e3e66!important}@media (max-width: 768px){.notes-toggle-container{max-width:250px;padding:10px 15px}.selected-notes{font-size:16px}.buttons{gap:10px;flex-wrap:wrap}.button{padding:10px 18px;font-size:14px}}.generate-button{position:relative}.change-badge{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:linear-gradient(45deg,var(--red-ff0066),var(--red-ff4444));border:3px solid var(--white);border-radius:50%;font-size:12px;font-weight:700;color:var(--white);display:flex;align-items:center;justify-content:center;animation:attention 1.5s infinite;z-index:10;box-shadow:0 0 8px #f449,0 4px 8px var(--black-alpha-40)}@keyframes attention{0%{transform:scale(1) rotate(0);box-shadow:0 0 8px #f449,0 4px 8px var(--black-alpha-40)}25%{transform:scale(1.2) rotate(-5deg);box-shadow:0 0 15px #f44c,0 6px 12px var(--black-alpha-50)}50%{transform:scale(1.3) rotate(0);box-shadow:0 0 20px #f44,0 8px 16px #0009}75%{transform:scale(1.2) rotate(5deg);box-shadow:0 0 15px #f44c,0 6px 12px var(--black-alpha-50)}to{transform:scale(1) rotate(0);box-shadow:0 0 8px #f449,0 4px 8px var(--black-alpha-40)}}.notes-visibility-toggle{position:absolute;top:80px;right:20px;background:var(--primary-purple);color:var(--dark-text-primary);border:none;border-radius:50%;width:50px;height:50px;cursor:pointer;font-size:20px;transition:all .2s ease;box-shadow:0 4px 8px #0003;display:flex;align-items:center;justify-content:center}.notes-visibility-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0000004d}.notes-visibility-toggle:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow),0 4px 8px #0003}.notes-toggle-content{display:flex;align-items:center;gap:.5rem;color:var(--dark-text-primary);font-size:12px;font-weight:600}.light .notes-toggle-content,.light .notes-toggle-content .toggle-label{color:var(--dark-text-primary)}.notes-toggle-content .toggle-label{font-size:12px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:inherit;text-shadow:none;white-space:nowrap}@media (max-width: 768px){.notes-toggle-content{flex-direction:row;gap:.5rem}.notes-toggle-content .toggle-label{font-size:11px;display:block!important}}@media (min-width: 481px){.notes-visibility-toggle{position:absolute!important;top:80px!important;right:20px!important;margin-top:20px!important;transform:none!important}}@media (max-width: 480px){.notes-visibility-toggle{position:static!important;transform:none!important;margin:0 auto!important}}@media (max-width: 360px){.notes-visibility-toggle{margin:0 auto!important}}.label-with-tooltip{display:flex;align-items:center;gap:.5rem}.tooltip-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:transparent;border:2px solid var(--white);color:var(--white);font-size:.75rem;font-weight:700;cursor:help;transition:all .2s ease;box-shadow:0 0 8px var(--white-alpha-50);flex-shrink:0}.tooltip-icon:hover,.active .tooltip-icon{background:var(--white);color:var(--dark-bg-primary);border-color:var(--white);box-shadow:0 0 12px var(--white-alpha-80)}.dark .tooltip-icon{border-color:var(--white);box-shadow:0 0 8px var(--white-alpha-40)}.dark .tooltip-icon:hover,.dark .active .tooltip-icon{background:var(--white);color:var(--dark-bg-primary);border-color:var(--white);box-shadow:0 0 12px var(--white-alpha-60)}.tooltip-container{position:relative;display:inline-block}.tooltip-box{position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-8px);background:var(--dark-bg-primary);color:var(--white);padding:.875rem 1.5rem;border-radius:10px;font-size:.875rem;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;pointer-events:none;z-index:1000;border:2px solid var(--purple-700);box-shadow:0 0 20px var(--purple-alpha-40),0 0 40px var(--purple-alpha-40),0 4px 12px var(--black-alpha-50);min-width:280px;max-width:400px;white-space:normal;text-align:left;line-height:1.4}.tooltip-title{font-size:1.15rem;font-weight:800;color:var(--blue-400);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:.4rem;text-align:left;text-shadow:0 0 10px var(--blue-alpha-80),0 0 20px var(--blue-alpha-60),0 0 30px var(--blue-alpha-40);animation:title-glow 1.5s ease-in-out infinite}@keyframes title-glow{0%,to{text-shadow:0 0 10px var(--blue-alpha-80),0 0 20px var(--blue-alpha-60),0 0 30px var(--blue-alpha-40)}50%{text-shadow:0 0 15px var(--blue-500),0 0 30px var(--blue-alpha-80),0 0 45px var(--blue-alpha-60)}}.tooltip-text{font-size:.8125rem;font-weight:400;color:var(--gray-200);line-height:1.45;max-width:100%;text-align:left;white-space:pre-line}.tooltip-box:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:var(--purple-700)}.tooltip-box.visible,.tooltip-container:hover .tooltip-box{opacity:1;visibility:visible;transform:translate(-50%) translateY(-12px)}.dark .tooltip-box{background:var(--dark-bg-primary);border-color:var(--purple-500);box-shadow:0 0 20px var(--purple-alpha-40),0 0 40px var(--purple-alpha-40),0 4px 12px var(--black-alpha-50);text-shadow:0 0 10px var(--purple-alpha-40)}.dark .tooltip-box:after{border-top-color:var(--purple-500)}.light .tooltip-icon{border-color:var(--white);color:var(--white);box-shadow:0 0 8px var(--white-alpha-50)}.light .tooltip-icon:hover,.light .active .tooltip-icon{background:var(--white);color:var(--dark-bg-primary);border-color:var(--white);box-shadow:0 0 12px var(--white-alpha-80)}.light .tooltip-box{background:var(--white);color:var(--light-text-primary);border-color:var(--primary-purple);box-shadow:0 0 20px var(--primary-purple-alpha-40),0 0 40px var(--primary-purple-alpha-30),0 4px 12px var(--black-alpha-20)}.light .tooltip-title{color:var(--blue-400);text-shadow:0 0 10px var(--blue-alpha-80),0 0 20px var(--blue-alpha-60),0 0 30px var(--blue-alpha-40);animation:light-title-glow 1.5s ease-in-out infinite}@keyframes light-title-glow{0%,to{text-shadow:0 0 10px var(--blue-alpha-80),0 0 20px var(--blue-alpha-60),0 0 30px var(--blue-alpha-40)}50%{text-shadow:0 0 15px var(--blue-500),0 0 30px var(--blue-alpha-80),0 0 45px var(--blue-alpha-60)}}.light .tooltip-text{color:var(--light-text-secondary)}.light .tooltip-box:after{border-top-color:var(--primary-purple)}@media (max-width: 768px){.tooltip-icon{width:16px;height:16px;font-size:.7rem}.label-with-tooltip{gap:.4rem}.tooltip-box{min-width:220px;max-width:280px;padding:.75rem 1.25rem}.tooltip-title{font-size:1rem;letter-spacing:1px;margin-bottom:.35rem}.tooltip-text{font-size:.8rem;line-height:1.4}}@media (max-width: 480px){.tooltip-icon{width:14px;height:14px;font-size:.65rem}.label-with-tooltip{gap:.35rem}.tooltip-box{min-width:180px;max-width:240px;padding:.65rem 1rem}.tooltip-title{font-size:.9rem;letter-spacing:.5px}.tooltip-text{font-size:.75rem}}.melody-display{width:100%;background:var(--blue-alpha-10);border:2px solid var(--blue-500);border-radius:8px;padding:12px}.melody-title{color:var(--blue-500);font-size:14px;font-weight:600;margin-bottom:8px;text-align:center}.melody-notes{display:flex;flex-wrap:wrap;gap:6px}.melody-note{background:var(--blue-500)!important;color:var(--white)!important;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;border:2px solid transparent;transition:none}.melody-note.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;color:var(--gray-800)!important;border:2px solid var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important;transition:none!important}@media (prefers-color-scheme: dark){.melody-display{background:#20c9971a;border-color:var(--green-20c997)}.melody-title{color:var(--green-20c997)}.melody-note{background:var(--green-20c997)!important;color:var(--gray-212529)!important}.melody-note.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;color:var(--gray-800)!important;border:2px solid var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important;transition:none!important}}.light .melody-display{background:var(--blue-alpha-05);border-color:var(--blue-500)}.light .melody-title{color:var(--blue-500)}.light .melody-note{background:var(--blue-500)!important;color:var(--white)!important}.light .melody-note.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;color:var(--gray-800)!important;border:2px solid var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important;transition:none!important}.custom-audio-player{width:100%;max-width:480px;min-width:420px;background:var(--gray-1a1a1a-alpha-90);border-radius:8px;padding:12px;box-shadow:0 4px 12px var(--black-alpha-30);border:1px solid var(--gray-800);position:relative;overflow:visible;box-sizing:border-box;margin:0 auto}.audio-controls{display:flex;align-items:center;gap:12px;color:var(--white)}.play-pause-btn{background:linear-gradient(145deg,var(--blue-450),var(--blue-550));border:none;border-radius:50%;width:40px;height:40px;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;color:var(--white);flex-shrink:0}.play-pause-btn:hover{background:linear-gradient(145deg,var(--blue-590),var(--blue-580));transform:translateY(-1px);box-shadow:0 4px 8px var(--black-alpha-30)}.play-pause-btn:active{transform:translateY(0)}.play-pause-btn svg{width:18px;height:18px}.time-display{font-size:12px;font-weight:600;color:var(--gray-ddd);min-width:40px;text-align:center}.progress-bar{flex:1;min-width:100px;cursor:pointer;padding:12px 0;position:relative}.progress-track{height:12px;background:var(--gray-800);border-radius:6px;position:relative;overflow:visible;border:1px solid var(--gray-555);box-shadow:inset 0 1px 2px var(--black-alpha-30);z-index:1}.progress-fill{height:100%;background:linear-gradient(90deg,var(--blue-450),var(--blue-550),var(--blue-650));border-radius:6px;transition:width .1s ease;position:relative;box-shadow:0 1px 3px var(--blue-450-alpha-30),0 0 10px var(--blue-450-alpha-40),0 0 20px var(--blue-450-alpha-30),inset 0 1px 0 var(--white-alpha-30)}.progress-fill:after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:linear-gradient(145deg,var(--blue-450),var(--blue-550));border-radius:50%;box-shadow:0 2px 4px var(--black-alpha-30),0 0 6px var(--blue-450-alpha-40);opacity:0;transition:all .2s ease;border:2px solid var(--white);z-index:10}.progress-track:hover{background:var(--gray-444);border-color:var(--gray-600)}.progress-track:hover .progress-fill{box-shadow:0 1px 3px var(--blue-450-alpha-40),0 0 15px var(--blue-450-alpha-60),0 0 30px var(--blue-450-alpha-30),inset 0 1px 0 var(--white-alpha-40)}.progress-track:hover .progress-fill:after,.progress-bar.dragging .progress-fill:after{opacity:1;box-shadow:0 2px 4px var(--black-alpha-30),0 0 8px var(--blue-450-alpha-60),0 0 16px var(--blue-450-alpha-40)}.progress-bar.dragging{cursor:grabbing}.progress-bar.dragging .progress-track{background:var(--gray-444);border-color:var(--gray-777)}.progress-bar.dragging .progress-fill{box-shadow:0 1px 3px var(--blue-450-alpha-50),0 0 20px var(--blue-450-alpha-80),0 0 40px var(--blue-450-alpha-40),inset 0 1px 0 var(--white-alpha-50)}.progress-bar:before{content:"";position:absolute;inset:0;background:transparent;cursor:pointer}.progress-hover-time{position:absolute;top:-35px;transform:translate(-50%);background:var(--black-alpha-90);color:var(--white);padding:4px 8px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px var(--black-alpha-40);z-index:10}.progress-hover-time:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--black-alpha-90)}.volume-control{position:relative;display:flex;align-items:center;flex-shrink:0}.volume-btn{background:transparent;border:none;cursor:pointer;color:var(--gray-ddd);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px;transition:all .2s ease}.volume-btn:hover{background:var(--white-alpha-10);color:var(--white)}.volume-btn svg{width:20px;height:20px}.volume-slider{position:absolute;right:0;bottom:40px;background:var(--gray-1a1a1a-alpha-95);border:1px solid var(--gray-800);border-radius:4px;padding:8px;box-shadow:0 4px 12px var(--black-alpha-40);z-index:1000;min-width:40px;display:flex;justify-content:center}.volume-slider input[type=range]{writing-mode:vertical-lr;direction:rtl;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:4px;height:80px;background:linear-gradient(to top,var(--blue-450) 0%,var(--blue-450) var(--volume-percentage, 100%),var(--gray-444) var(--volume-percentage, 100%),var(--gray-444) 100%);outline:none;cursor:pointer;border-radius:2px}.volume-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:linear-gradient(145deg,var(--blue-450),var(--blue-550));border-radius:50%;cursor:pointer;box-shadow:0 2px 4px var(--black-alpha-30)}.volume-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;background:linear-gradient(145deg,var(--blue-450),var(--blue-550));border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px var(--black-alpha-30)}@media (max-width: 768px){.custom-audio-player{padding:10px;min-width:0}.progress-bar{min-width:80px}.time-display{font-size:11px;min-width:35px}}@media (max-width: 480px){.custom-audio-player{padding:8px}.audio-controls{gap:6px}.play-pause-btn{width:32px;height:32px;min-width:32px;min-height:32px}.play-pause-btn svg{width:14px;height:14px}.time-display{font-size:10px;min-width:30px}.progress-bar{min-width:60px}.progress-track{height:10px}.progress-fill:after{width:14px;height:14px;right:-7px}.volume-btn{width:28px;height:28px}.volume-btn svg{width:16px;height:16px}.volume-slider{right:-5px;bottom:35px}.volume-slider input[type=range]{height:60px}}@media (max-width: 360px){.custom-audio-player{padding:6px}.audio-controls{gap:4px}.play-pause-btn{width:28px;height:28px;min-width:28px;min-height:28px}.play-pause-btn svg{width:12px;height:12px}.time-display{font-size:9px;min-width:28px}.progress-bar{min-width:50px}.progress-track{height:8px}.progress-fill:after{width:12px;height:12px;right:-6px}.volume-btn{width:24px;height:24px}.volume-btn svg{width:14px;height:14px}}.live-feedback-button{margin-top:16px;width:100%;max-width:480px;padding:12px 24px;background:linear-gradient(145deg,var(--purple-600),var(--purple-700));border:none;border-radius:8px;color:var(--white);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px var(--black-alpha-20)}.live-feedback-button:hover{background:linear-gradient(145deg,var(--purple-500),var(--purple-600));transform:translateY(-1px);box-shadow:0 4px 12px var(--black-alpha-30)}.live-feedback-button:active{transform:translateY(0);box-shadow:0 2px 6px var(--black-alpha-20)}.live-feedback-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.live-feedback-button.listening{background:linear-gradient(145deg,var(--red-600),var(--red-700));animation:pulse-listening 1.5s ease-in-out infinite}.live-feedback-button.listening:hover{background:linear-gradient(145deg,var(--red-500),var(--red-600))}.live-feedback-button.paused{background:linear-gradient(145deg,var(--blue-600),var(--blue-700));animation:none}.live-feedback-button.paused:hover{background:linear-gradient(145deg,var(--blue-500),var(--blue-600))}@keyframes pulse-listening{0%,to{box-shadow:0 2px 8px var(--black-alpha-20),0 0 0 0 var(--red-dc3545-alpha-70)}50%{box-shadow:0 4px 12px var(--black-alpha-30),0 0 0 8px var(--red-dc3545-alpha-0)}}@media (prefers-reduced-motion: reduce){.live-feedback-button.listening{animation:none}}.live-feedback-display{margin-top:20px;padding:20px;background:var(--gray-1a1a1a-alpha-90);border:1px solid var(--gray-800);border-radius:8px;width:100%;max-width:480px}.feedback-stage-title{text-align:center;color:var(--primary-purple-light);font-size:16px;font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}.feedback-progress{text-align:center;color:var(--white);font-size:14px;font-weight:600;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--gray-800);display:flex;flex-direction:column;gap:6px}.stage-hint{font-size:12px;font-weight:500;font-style:italic}.stage-hint.stage-1{color:var(--green-400)}.stage-hint.stage-2{color:var(--orange-400)}.feedback-checkboxes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:20px;padding:16px}.note-checkbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.checkbox-label{font-size:11px;font-weight:600;color:var(--gray-400);text-align:center}.checkbox-box{width:32px;height:32px;border:3px solid var(--gray-555);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;background:var(--gray-800)}.checkbox-box svg{width:20px;height:20px;color:var(--green-400)}.note-checkbox.completed .checkbox-box{background:var(--green-800);border-color:var(--green-500)}.note-checkbox.active .checkbox-box{border-color:var(--blue-450);background:var(--blue-900);box-shadow:0 0 12px var(--blue-450-alpha-40);animation:pulse-checkbox 1.5s ease-in-out infinite}@keyframes pulse-checkbox{0%,to{box-shadow:0 0 12px var(--blue-450-alpha-40)}50%{box-shadow:0 0 20px var(--blue-450-alpha-60)}}.note-checkbox.pending .checkbox-box{background:var(--gray-900);border-color:var(--gray-666)}.feedback-tuner{width:100%}.tuner-scale{position:relative;width:100%;margin-bottom:12px}.tuner-marks{position:relative;width:100%;height:20px;margin-bottom:8px}.tuner-mark{position:absolute;font-size:11px;color:var(--white);font-weight:500;transform:translate(-50%)}.tuner-mark:nth-child(1){left:0%}.tuner-mark:nth-child(2){left:25%}.tuner-mark:nth-child(3){left:50%}.tuner-mark:nth-child(4){left:75%}.tuner-mark:nth-child(5){left:100%}.tuner-mark.center{color:var(--white);font-weight:700}.tuner-track{position:relative;width:100%;height:60px;background:var(--gray-1a1a1a);border-radius:8px;padding:10px 0;overflow:hidden}.tuner-acceptable-zone{position:absolute;left:25%;right:25%;bottom:15px;height:30px;background:var(--green-alpha-20);border-left:2px solid var(--green-alpha-40);border-right:2px solid var(--green-alpha-40);z-index:0}.tuner-track:before{content:"";position:absolute;left:0;right:0;bottom:15px;height:30px;background-image:repeating-linear-gradient(to right,var(--gray-555) 0px,var(--gray-555) 2px,transparent 2px,transparent 10%)}.tuner-center-line{position:absolute;left:50%;bottom:15px;width:4px;height:30px;background:var(--white);transform:translate(-50%);z-index:1}.tuner-indicator{position:absolute;top:5px;width:4px;height:50px;background:var(--red-600);transform:translate(-50%);transition:left .15s ease-out;z-index:2;border-radius:2px}.tuner-indicator:after{display:none}.tuner-indicator.correct{background:var(--green-500)}.tuner-indicator.wrong{animation:pulse-indicator .3s ease}@keyframes pulse-indicator{0%,to{opacity:1}50%{opacity:.8}}.feedback-complete{text-align:center;padding:24px}.complete-message{font-size:32px;font-weight:700;color:var(--green-400);margin-bottom:16px;animation:celebration .6s ease}@keyframes celebration{0%{transform:scale(.8) rotate(-5deg);opacity:0}50%{transform:scale(1.1) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}.complete-stats{font-size:18px;font-weight:600;color:var(--white)}.complete-stats .accuracy{color:var(--blue-450)}@media (prefers-reduced-motion: reduce){.complete-message,.tuner-indicator.wrong,.note-checkbox.active .checkbox-box{animation:none}}@media (max-width: 768px){.live-feedback-button{margin-top:12px;padding:10px 20px;font-size:13px}.live-feedback-display{margin-top:16px;padding:16px}.feedback-checkboxes{gap:10px;padding:12px}.checkbox-box{width:28px;height:28px}.checkbox-box svg{width:18px;height:18px}.tuner-track{height:54px}.tuner-indicator{height:44px}.tuner-center-line{height:26px;bottom:14px}.tuner-track:before{height:26px;bottom:14px}.complete-message{font-size:28px}.complete-stats{font-size:16px}}@media (max-width: 480px){.live-feedback-button{margin-top:10px;padding:8px 16px;font-size:12px}.live-feedback-display{margin-top:12px;padding:12px}.feedback-checkboxes{gap:8px;padding:10px}.checkbox-box{width:26px;height:26px}.checkbox-box svg{width:16px;height:16px}.tuner-track{height:50px}.tuner-indicator{height:40px}.tuner-center-line{height:22px;bottom:12px}.tuner-track:before{height:22px;bottom:12px}.tuner-mark{font-size:10px}.complete-message{font-size:24px}.complete-stats{font-size:14px}}@media (max-width: 360px){.live-feedback-button{margin-top:8px;padding:7px 14px;font-size:11px}}.light .custom-audio-player{background:var(--light-bg-secondary);border-color:var(--light-border-primary)}.light .audio-controls{color:var(--light-text-primary)}.light .time-display{color:var(--light-text-secondary)}.light .progress-track{background:var(--light-bg-tertiary);border-color:var(--light-border-secondary)}.light .progress-track:hover,.light .progress-bar.dragging .progress-track{background:var(--light-bg-primary);border-color:var(--light-border-primary)}.light .progress-hover-time{background:var(--light-bg-primary);color:var(--light-text-primary);border:1px solid var(--light-border-primary)}.light .progress-hover-time:after{border-top-color:var(--light-bg-primary)}.light .volume-btn{color:var(--light-text-secondary)}.light .volume-btn:hover{background:var(--black-alpha-10);color:var(--light-text-primary)}.light .volume-slider{background:var(--light-bg-secondary);border-color:var(--light-border-primary)}.light .volume-slider input[type=range]{background:linear-gradient(to top,var(--blue-450) 0%,var(--blue-450) var(--volume-percentage, 100%),var(--light-border-secondary) var(--volume-percentage, 100%),var(--light-border-secondary) 100%)}.light .live-feedback-button{background:linear-gradient(145deg,var(--purple-600),var(--purple-700));box-shadow:0 2px 8px var(--black-alpha-15)}.light .live-feedback-button:hover{background:linear-gradient(145deg,var(--purple-500),var(--purple-600));box-shadow:0 4px 12px var(--black-alpha-25)}.light .live-feedback-button.listening{background:linear-gradient(145deg,var(--red-600),var(--red-700))}.light .live-feedback-button.listening:hover{background:linear-gradient(145deg,var(--red-500),var(--red-600))}.light .live-feedback-button.paused{background:linear-gradient(145deg,var(--blue-600),var(--blue-700))}.light .live-feedback-button.paused:hover{background:linear-gradient(145deg,var(--blue-500),var(--blue-600))}.light .live-feedback-display{background:var(--light-bg-secondary);border-color:var(--light-border-primary)}.light .feedback-progress{color:var(--light-text-secondary);border-bottom-color:var(--light-border-secondary)}.light .checkbox-box{background:var(--light-bg-tertiary);border-color:var(--light-border-secondary)}.light .note-checkbox.completed .checkbox-box{background:var(--green-100);border-color:var(--green-600)}.light .note-checkbox.completed .checkbox-box svg{color:var(--green-700)}.light .note-checkbox.active .checkbox-box{border-color:var(--blue-500);background:var(--blue-100);box-shadow:0 0 12px var(--blue-450-alpha-40)}.light .note-checkbox.pending .checkbox-box{background:var(--light-bg-primary);border-color:var(--light-border-tertiary)}.light .tuner-track{background:var(--light-bg-secondary)}.light .tuner-acceptable-zone{background:var(--green-alpha-20);border-left-color:var(--green-alpha-60);border-right-color:var(--green-alpha-60)}.light .tuner-track:before{background-image:repeating-linear-gradient(to right,var(--light-border-primary) 0px,var(--light-border-primary) 2px,transparent 2px,transparent 10%)}.light .tuner-mark,.light .tuner-mark.center{color:var(--light-text-primary)}.light .tuner-center-line{background:var(--light-text-primary)}.light .tuner-indicator{background:var(--red-600)}.light .tuner-indicator.correct{background:var(--green-600)}.light .complete-message{color:var(--green-600)}.light .complete-stats{color:var(--light-text-secondary)}.scale-options-integrated{align-items:center!important;justify-content:center!important;gap:0!important;width:100%;min-width:100px}.scale-options-container{position:relative;width:auto;min-height:40px;background:transparent;z-index:100;pointer-events:auto}.scale-options-container.collapsed{width:auto}.scale-options-container.collapsed:has(.scale-options-toggle.instrument-guitar),.scale-options-container.collapsed:has(.scale-options-toggle.instrument-bass),body:has(.instrument-container[data-practice-mode=true]) .scale-options-container.collapsed{height:32px;min-height:32px;max-height:32px}.scale-options-container.expanded{width:auto;height:32px;min-height:32px;max-height:32px}.scale-options-container.expanded:has(.scale-options-toggle.instrument-guitar),.scale-options-container.expanded:has(.scale-options-toggle.instrument-bass),body:has(.instrument-container[data-practice-mode=true]) .scale-options-container.expanded{height:32px;min-height:32px;max-height:32px}.scale-options-popup{position:absolute!important;top:100%!important;left:0!important;margin:0!important;padding:16px;padding-top:16px!important;width:200px!important;max-width:200px!important;min-width:200px!important;box-sizing:border-box;z-index:102!important;background:#000000f2;border-radius:6px;box-shadow:0 4px 12px #0000004d;border:2px solid var(--orange-500);pointer-events:auto!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:none!important}.scale-options-popup.chord-mode{border:2px solid var(--purple-600)}.scale-options-popup *{pointer-events:auto!important}.dark .scale-options-popup{background:#000000f2;border:2px solid var(--orange-500);box-shadow:0 4px 12px #0006}.dark .scale-options-popup.chord-mode{border:2px solid var(--purple-600)}.scale-options-toggle{background:#a855f71a;border:2px solid var(--purple-600);color:var(--purple-300);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background .2s ease;outline:none;display:flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:120px;margin-top:23px;margin-bottom:0;z-index:101;pointer-events:auto}.scale-options-toggle.instrument-guitar,.scale-options-toggle.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-toggle{margin-top:5px}.scale-options-toggle:hover{background:#a855f733}.scale-options-toggle:active{background:#a855f726}.scale-options-toggle:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.scale-controls{margin:0 auto;padding:8px;background:#f973160d;border-radius:6px;border:1px solid rgb(249,115,22,.3);width:calc(100% - 16px);display:flex;flex-direction:column;gap:12px}.scale-controls.chord-mode{background:#a855f70d;border:1px solid rgb(168,85,247,.3)}.dark .scale-controls{background:#f973160d;border-color:#f973164d}.dark .scale-controls.chord-mode{background:#a855f70d;border-color:#a855f74d}.control-section{margin-bottom:0}.control-section:last-child{margin-bottom:0}.scale-options-content .control-label{display:block;font-size:11px;font-weight:600;margin-bottom:6px;color:var(--orange-500)!important;text-transform:uppercase;letter-spacing:.5px;text-align:center}.scale-options-content.chord-mode .control-label{color:var(--purple-600)!important}.light .scale-options-content .control-label{color:var(--orange-500)!important}.light .scale-options-content.chord-mode .control-label{color:var(--purple-600)!important}.dark .scale-options-content .control-label{color:var(--orange-500)!important}.dark .scale-options-content.chord-mode .control-label{color:var(--purple-600)!important}.control-select{width:100%;padding:5px 8px;border:2px solid var(--orange-500);border-radius:6px;background:#f973161a;color:var(--orange-500);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0003;outline:none}.control-select.chord-mode{border:2px solid var(--purple-600);background:#a855f71a;color:var(--purple-600)}.dark .control-select{background:#f973161a;border-color:var(--orange-500);color:var(--orange-500)}.dark .control-select.chord-mode{background:#a855f71a;border-color:var(--purple-600);color:var(--purple-600)}.control-select:hover{background:#f973164d;transform:translateY(-1px);box-shadow:0 6px 12px #0000004d}.control-select.chord-mode:hover{background:#a855f74d}.control-select:focus{outline:none;box-shadow:0 0 0 2px #f9731666}.control-select.chord-mode:focus{box-shadow:0 0 0 2px #a855f766}.control-select option{background:var(--black);color:var(--white);text-align:center;-moz-text-align-last:center;text-align-last:center;padding:8px 0;direction:ltr;border:1px solid var(--gray-333);display:block;width:100%;box-sizing:border-box;border-radius:4px;margin:1px 0}.control-select option:checked{background:var(--blue-500)!important;color:var(--black)!important;font-weight:600}.apply-button{width:100%;padding:5px 10px;background:#4caf501a;border:2px solid var(--green-4caf50);color:var(--green-a5d6a7);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px var(--black-alpha-20);outline:none;height:28px}.apply-button:hover{background:#4caf5033;transform:translateY(-1px);box-shadow:0 6px 12px #0000004d}.apply-button:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.apply-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.scale-options-content{padding:10px}.scale-options-header h3{font-size:12px}.scale-options-header p{font-size:10px}.mode-toggle{display:flex;align-items:center;justify-content:center;margin-bottom:16px}.toggle-switch{position:relative;display:inline-block;width:120px;height:32px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch input:focus-visible+.toggle-slider{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#f973161a;border:2px solid var(--orange-500);transition:all .3s ease;border-radius:6px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}.toggle-text{font-size:11px;font-weight:600;z-index:2;position:relative;color:var(--gray-999);opacity:.7;pointer-events:none}.toggle-text.left{margin-left:2px}.toggle-text.right{margin-right:2px}.toggle-slider:before{position:absolute;content:"";height:29px;width:58px;left:-1px;top:0;background-color:var(--orange-500);transition:all .3s ease;border-radius:4px;z-index:1;box-shadow:none}.toggle-slider .toggle-text.left{color:var(--black);opacity:1;font-weight:700;text-shadow:none}.toggle-slider .toggle-text.right{color:var(--gray-999);opacity:.7}input:checked+.toggle-slider{background-color:#a855f71a;border-color:var(--purple-600)}input:checked+.toggle-slider:before{transform:translate(60px);background-color:var(--purple-600)}input:checked+.toggle-slider .toggle-text.left{color:var(--gray-999);opacity:.7;font-weight:600}input:checked+.toggle-slider .toggle-text.right{color:var(--black);opacity:1;font-weight:700;text-shadow:none}.toggle-slider:hover{background-color:#f9731633}input:checked+.toggle-slider:hover{background-color:#a855f733}.toggle-slider.flashing{border-color:var(--green-550)!important;box-shadow:none!important}@media (min-width: 768px){.scale-options-popup{left:0!important;right:auto!important;transform:none!important;top:calc(100% + 23px)!important}.scale-options-popup.instrument-guitar,.scale-options-popup.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-popup{top:calc(100% + 5px)!important}}@media (min-width: 481px) and (max-width: 767px){.scale-options-popup{left:auto!important;right:0!important;transform:none!important;top:calc(100% + 23px)!important}.scale-options-popup.instrument-guitar,.scale-options-popup.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-popup{left:0!important;right:auto!important;top:calc(100% + 5px)!important}}@media (min-width: 361px){.scale-options-popup.instrument-guitar,.scale-options-popup.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-popup{left:0!important;right:auto!important;top:calc(100% + 5px)!important}}@media (max-width: 480px) and (min-width: 361px){.scale-options-toggle{margin:0!important}.scale-options-toggle.instrument-guitar,.scale-options-toggle.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-toggle{margin:0!important}.scale-options-container,.scale-options-container.collapsed{margin:0!important}.scale-options-popup{left:auto!important;right:0!important;transform:none!important;top:100%!important}.scale-options-popup.instrument-guitar,.scale-options-popup.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-popup{left:0!important;right:auto!important;top:100%!important}.scale-options-popup.instrument-keyboard{top:100%!important;right:0!important}.scale-options-content{padding:10px 8px!important}.scale-controls{padding:6px!important;width:calc(100% - 16px)!important}.toggle-switch{width:110px;height:28px}.toggle-slider{padding:0 6px}.toggle-text{font-size:10px}.toggle-slider:before{height:25px;width:53px;top:-1px;left:0;border-radius:4px}input:checked+.toggle-slider:before{transform:translate(54px)}}@media (max-width: 360px){.scale-options-toggle{margin:0!important}.scale-options-toggle.instrument-guitar,.scale-options-toggle.instrument-bass,body:has(.instrument-container[data-practice-mode=true]) .scale-options-toggle{margin:0!important}.scale-options-container,.scale-options-container.collapsed{margin:0!important;padding:0!important}.scale-options-popup{left:50%!important;transform:translate(-50%)!important;top:100%!important}.scale-options-container:has(.scale-options-toggle.instrument-guitar),.scale-options-container:has(.scale-options-toggle.instrument-bass),body:has(.instrument-container[data-practice-mode=true]) .scale-options-container{display:flex!important;align-items:center!important;justify-content:center!important}}.applied-scales-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto;padding:4px;background:#0000004d;border-radius:4px;border:1px solid var(--gray-333)}.applied-scale-item{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:#f973161a;border:1px solid rgb(249,115,22,.3);border-radius:4px;transition:all .2s ease}.applied-scale-item:hover{background:#f9731633;border-color:#f9731680}.scale-name{font-size:11px;font-weight:600;color:var(--orange-400);flex:1}.delete-scale-button{width:18px;height:18px;background:#dc26261a;border:1px solid rgb(220,38,38,.4);color:var(--red-light);border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s ease;outline:none;margin-left:8px}.delete-scale-button:hover{background:#dc262633;border-color:#dc262699;color:var(--red-600);transform:scale(1.1)}.delete-scale-button:active{transform:scale(.95)}.delete-scale-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:1px;box-shadow:var(--focus-ring-shadow)}.applied-scales-list::-webkit-scrollbar{width:4px}.applied-scales-list::-webkit-scrollbar-track{background:#0003;border-radius:2px}.applied-scales-list::-webkit-scrollbar-thumb{background:#f973164d;border-radius:2px}.applied-scales-list::-webkit-scrollbar-thumb:hover{background:#f9731680}.applied-chords-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto;padding:4px;background:#0000004d;border-radius:4px;border:1px solid var(--gray-333)}.applied-chord-item{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:#a855f71a;border:1px solid rgb(168,85,247,.3);border-radius:4px;transition:all .2s ease}.applied-chord-item:hover{background:#a855f733;border-color:#a855f780}.chord-name{font-size:11px;font-weight:600;color:var(--purple-400);flex:1}.delete-chord-button{width:18px;height:18px;background:#dc26261a;border:1px solid rgb(220,38,38,.4);color:var(--red-light);border-radius:50%;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s ease;outline:none;margin-left:8px}.delete-chord-button:hover{background:#dc262633;border-color:#dc262699;color:var(--red-600);transform:scale(1.1)}.delete-chord-button:active{transform:scale(.95)}.delete-chord-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:1px;box-shadow:var(--focus-ring-shadow)}.applied-chords-list::-webkit-scrollbar{width:4px}.applied-chords-list::-webkit-scrollbar-track{background:#0003;border-radius:2px}.applied-chords-list::-webkit-scrollbar-thumb{background:#a855f74d;border-radius:2px}.applied-chords-list::-webkit-scrollbar-thumb:hover{background:#a855f780}.empty-list-message{padding:8px;text-align:center;color:var(--gray-400);font-size:.875rem;font-style:italic;opacity:.7}:global(.dark) .empty-list-message{color:var(--gray-500)}.instrument-container{position:relative;display:flex;flex-direction:column;background:linear-gradient(145deg,var(--gray-850),var(--dark-bg-secondary));padding:0;margin-top:1rem;border-radius:20px 20px 0 0;box-shadow:0 20px 40px var(--black-alpha-30);border:4px solid var(--dark-border-primary);width:auto;max-width:95vw;min-width:auto;min-height:350px;overflow-y:visible}.instrument-header-controls{display:flex;justify-content:flex-start;align-items:flex-start;padding:4px;border-bottom:2px solid var(--dark-border-primary);background:linear-gradient(145deg,var(--gray-700),var(--gray-800));border-radius:16px 16px 0 0;min-height:72px;max-width:100%;box-sizing:border-box;overflow:visible;flex-wrap:wrap}.instrument-container:has(.guitar-container) .instrument-header-controls,.instrument-container:has(.bass-container) .instrument-header-controls,.instrument-container[data-practice-mode=true] .instrument-header-controls{min-height:50px}.header-controls-left{display:flex;align-items:flex-start;gap:1rem;max-width:100%;box-sizing:border-box;flex-wrap:wrap}.header-controls-left .control-group{display:flex;flex-direction:column;align-items:flex-start}.header-controls-left .notes-toggle-row{transform:translateY(5px)}.instrument-wrapper{display:flex;justify-content:center;align-items:center;flex:1;overflow:auto visible;scrollbar-width:thin;scrollbar-color:var(--blue-500) var(--dark-bg-secondary)}@media (min-width: 481px) and (max-width: 768px){.instrument-container{width:100vw;max-width:100vw;margin:.5rem 0 0;border-radius:0}.instrument-header-controls{border-radius:0;padding:4px}.instrument-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.instrument-container:has(.keyboard-container){min-height:305px}.instrument-controls-container{width:700px;max-width:90vw;margin:1rem auto 0;padding:0 20px}.keyboard-container{justify-content:flex-start;padding-left:0}.keyboard{min-width:320px;margin:0}.keyboard.default-mode{margin:0}.keyboard:not(.default-mode) .black-keys{left:0}.black-keys,.keyboard.default-mode .black-keys{left:0}}@media (max-width: 480px){.instrument-container{width:100vw;max-width:100vw;margin:.5rem 0 0;border-radius:0}.instrument-header-controls{border-radius:0;padding:4px;gap:.5rem}.instrument-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}.instrument-container:has(.keyboard-container){min-height:305px}}@media (max-width: 360px){.instrument-container:has(.guitar-container) .instrument-header-controls,.instrument-container:has(.bass-container) .instrument-header-controls,.instrument-container[data-practice-mode=true] .instrument-header-controls{min-height:43px}.header-controls-left{flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.header-controls-left .control-group{width:100%;display:flex;justify-content:center;align-items:center;margin:0;padding:0}.header-controls-left .control-group>*{margin:0}body:has([data-instrument=keyboard]) .control-group.scale-chord-options,body:has([data-instrument=guitar]) .control-group.scale-chord-options,body:has([data-instrument=bass]) .control-group.scale-chord-options{margin-top:0;margin-bottom:0}body:has([data-instrument=keyboard]) .control-button.delete-selection,body:has([data-instrument=guitar]) .control-button.delete-selection,body:has([data-instrument=bass]) .control-button.delete-selection{margin-top:0;margin-bottom:0}.header-controls-left .control-group:has(.selection-mode-switch),.header-controls-left .control-group.selection-mode-group{margin:0;padding:0}.header-controls-left .control-group:has(.delete-selection),.header-controls-left>.control-group:has(.delete-selection){margin:0;padding:0}.control-button.delete-selection{margin:0}.control-group.scale-chord-options{gap:0;margin:0;padding:0}.control-group.scale-chord-options>*{margin:0;padding-bottom:0}.control-group.scale-chord-options .scale-chord-container,.control-group.scale-chord-options .scale-options-custom,.control-group.scale-chord-options>div{margin-bottom:0;padding-bottom:0}.scale-options-container.collapsed{min-height:0;height:auto;margin:0;padding:0}}@media (min-width: 769px){.instrument-wrapper{overflow-x:auto;scroll-behavior:smooth;justify-content:flex-start;padding-left:0}.keyboard-container{padding-left:0}.keyboard{min-width:-moz-fit-content;min-width:fit-content;margin-right:0}}.instrument-container>*{position:relative}.instrument-controls-container{position:relative;display:flex;justify-content:center;align-items:center;background:linear-gradient(145deg,var(--gray-850),var(--dark-bg-secondary));padding:0 30px;margin-top:0;border-radius:20px;box-shadow:0 20px 40px var(--black-alpha-30);border:4px solid var(--dark-border-primary);width:700px;min-height:80px;overflow:visible;transition:width .3s ease;box-sizing:border-box;margin-left:auto;margin-right:auto}.instrument-controls-container.guitar-mode,.instrument-controls-container.bass-mode{width:700px}@media (max-width: 480px){.instrument-controls-container{width:700px;max-width:90vw;margin:1rem auto 0;padding:0 20px}}@media (max-width: 360px){.instrument-controls-container{width:100%;max-width:100vw;margin:1rem 0 0;padding:0;display:flex;justify-content:center;align-items:center}.instrument-controls-container.guitar-mode,.instrument-controls-container.bass-mode{width:100%;max-width:100vw;padding:0}}.keyboard-container{position:relative;display:flex;align-items:center;justify-content:flex-start;width:100%;padding-left:0}@media (max-width: 480px){.keyboard-container{justify-content:flex-start;padding-left:0}}.keyboard{position:relative;display:flex;width:auto;min-width:-moz-fit-content;min-width:fit-content}.keyboard.default-mode{margin-left:0;margin-right:0}@media (max-width: 480px){.keyboard{min-width:320px;margin:0}.keyboard.default-mode{margin:0}.keyboard:not(.default-mode) .black-keys{left:0}}.white-key{width:60px;height:280px;background:linear-gradient(145deg,var(--keyboard-white-key),var(--keyboard-white-key-hover));border:2px solid var(--keyboard-white-key);border-radius:0 0 8px 8px;margin-right:2px;position:relative;cursor:pointer;transition:all .1s ease;flex-shrink:0;box-shadow:inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10),0 4px 8px var(--black-alpha-20)}.white-key:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10),0 4px 8px var(--black-alpha-20);z-index:5}.dark .white-key{box-shadow:inset 0 2px 4px var(--gray-400-alpha-30),inset 0 -2px 4px var(--black-alpha-10),0 4px 8px var(--black-alpha-40)}.dark .white-key:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color-dark);outline-offset:var(--focus-ring-offset);box-shadow:0 0 0 4px #2ee88d4d,inset 0 2px 4px var(--gray-400-alpha-30),inset 0 -2px 4px var(--black-alpha-10),0 4px 8px var(--black-alpha-40)}.white-key:active{box-shadow:inset 0 2px 4px #fff9,inset 0 -1px 2px var(--black-alpha-20),0 1px 2px var(--black-alpha-20)}.white-key.selected{background:linear-gradient(145deg,var(--note-selected),var(--note-selected-dark));border-color:var(--white)}.white-key.melody{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark));border-color:var(--white)}.white-key.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;border-color:var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important}.white-key.melody:is(.scale-note,.scale-root,.chord-note,.chord-root,.chord-scale-note,.chord-note-scale-root,.chord-root-scale-note,.chord-root-scale-root,.manual-scale-note,.manual-chord-note,.manual-scale-chord-note,.manual-scale-root,.manual-chord-root,.manual-chord-root-note,.manual-scale-chord-root-note){background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark))!important;border-color:var(--white)!important}.white-key.currently-playing,.white-key.currently-playing.melody,.white-key.currently-playing.selected,.white-key.currently-playing.scale-note,.white-key.currently-playing.scale-root,.white-key.currently-playing.chord-note,.white-key.currently-playing.chord-root,.white-key.currently-playing.melody.scale-note,.white-key.currently-playing.melody.scale-root,.white-key.currently-playing.melody.chord-note,.white-key.currently-playing.melody.chord-root,.white-key.currently-playing.melody.chord-scale-note,.white-key.currently-playing.selected.melody{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;border-color:var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 2px 4px var(--white-alpha-80),inset 0 -2px 4px var(--black-alpha-10)!important}.white-key:last-child{margin-right:0}.black-keys{position:absolute;top:0;left:0;pointer-events:none}.keyboard.default-mode .black-keys{left:0}@media (max-width: 480px){.black-keys,.keyboard.default-mode .black-keys{left:0}}.black-key{position:absolute;width:36px;height:180px;background:linear-gradient(145deg,var(--keyboard-black-key),var(--keyboard-black-key-secondary));border:2px solid var(--white);border-radius:0 0 6px 6px;cursor:pointer;pointer-events:all;transition:all .1s ease;box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 4px 8px var(--black-alpha-50)}.black-key:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow),inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 4px 8px var(--black-alpha-50);z-index:10}.dark .black-key:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color-dark);outline-offset:var(--focus-ring-offset);box-shadow:0 0 0 4px #2ee88d4d,inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 4px 8px var(--black-alpha-50)}.black-key:active{box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 1px var(--black-alpha-40),0 1px 2px var(--black-alpha-50)}.black-key.selected{background:linear-gradient(145deg,var(--note-selected),var(--note-selected-dark));border-color:var(--white)}.black-key.melody{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark));border-color:var(--white)}.black-key.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;border-color:var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30)!important}.black-key.melody.scale-note,.black-key.melody.scale-root,.black-key.melody.chord-note,.black-key.melody.chord-root,.black-key.melody.chord-scale-note,.black-key.melody.chord-note-scale-root,.black-key.melody.chord-root-scale-note,.black-key.melody.chord-root-scale-root,.black-key.melody.manual-scale-note,.black-key.melody.manual-chord-note,.black-key.melody.manual-scale-chord-note,.black-key.melody.manual-scale-root,.black-key.melody.manual-chord-root,.black-key.melody.manual-chord-root-note,.black-key.melody.manual-scale-chord-root-note{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark))!important;border-color:var(--white)!important}.black-key.currently-playing,.black-key.currently-playing.melody,.black-key.currently-playing.selected,.black-key.currently-playing.scale-note,.black-key.currently-playing.scale-root,.black-key.currently-playing.chord-note,.black-key.currently-playing.chord-root,.black-key.currently-playing.melody.scale-note,.black-key.currently-playing.melody.scale-root,.black-key.currently-playing.melody.chord-note,.black-key.currently-playing.melody.chord-root,.black-key.currently-playing.melody.chord-scale-note,.black-key.currently-playing.selected.melody{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;border-color:var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30)!important}.keyboard.melody-active .white-key:not(.melody):not(.currently-playing),.keyboard.melody-active .black-key:not(.melody):not(.currently-playing){opacity:.5!important;filter:brightness(.7)!important;transition:opacity .2s ease}.white-key.scale-note,.black-key.scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-scale-dark));border-color:var(--white)}.white-key.scale-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-scale-root-dark));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 0 8px var(--shadow-scale-root),0 6px 16px var(--black-alpha-30)}.black-key.scale-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-scale-root-dark));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 0 8px var(--shadow-scale-root),0 4px 8px var(--black-alpha-50)}.white-key.selected.scale-note,.black-key.selected.scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-scale-dark));border-color:var(--white)}.white-key.selected.scale-root,.black-key.selected.scale-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-scale-root-dark));border-color:var(--white)}.white-key.chord-note,.black-key.chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-chord-dark));border-color:var(--white)}.white-key.chord-scale-note,.black-key.chord-scale-note,.white-key.selected.chord-scale-note,.black-key.selected.chord-scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-chord));border-color:var(--white)}.white-key.chord-note-scale-root,.black-key.chord-note-scale-root,.white-key.selected.chord-note-scale-root,.black-key.selected.chord-note-scale-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-chord));border-color:var(--white)}.white-key.chord-root-scale-note,.black-key.chord-root-scale-note,.white-key.selected.chord-root-scale-note,.black-key.selected.chord-root-scale-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-scale));border-color:var(--white)}.white-key.chord-root-scale-root,.black-key.chord-root-scale-root,.white-key.selected.chord-root-scale-root,.black-key.selected.chord-root-scale-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border-color:var(--white)}.white-key.chord-root,.white-key.chord-note.chord-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 0 8px var(--shadow-scale-root),0 6px 16px var(--black-alpha-30)}.black-key.chord-root,.black-key.chord-note.chord-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 0 8px var(--shadow-scale-root),0 4px 8px var(--black-alpha-50)}.white-key.selected.chord-note,.black-key.selected.chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-chord-dark));border-color:var(--white)}.white-key.selected.chord-root,.white-key.selected.chord-note.chord-root,.black-key.selected.chord-root,.black-key.selected.chord-note.chord-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border-color:var(--white)}.key-label{position:absolute;bottom:15px;left:50%;transform:translate(-50%);font-size:12px;font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;color:var(--gray-700)}.black-key .key-label{color:var(--white);font-size:10px;bottom:12px}.octave-controls{display:flex;flex-direction:column;gap:10px;position:absolute;top:20px;z-index:10}.left-controls{left:10px}.right-controls{right:10px}.octave-button{width:40px;height:40px;background:var(--white-alpha-10);border:2px solid var(--white);border-radius:50%;color:var(--white);font-size:24px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;box-shadow:0 2px 4px var(--black-alpha-20)}.octave-button:hover{background:var(--white-alpha-20);transform:translateY(-1px);box-shadow:0 4px 8px var(--black-alpha-30)}.octave-button:active{transform:translateY(0);box-shadow:0 1px 2px var(--black-alpha-20)}.octave-button:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow),0 2px 4px var(--black-alpha-20)}@media (max-width: 768px){.octave-controls{gap:8px;top:15px}.left-controls{left:5px}.right-controls{right:5px}.octave-button{width:35px;height:35px;font-size:20px}}.instrument-wrapper::-webkit-scrollbar{height:12px}.instrument-wrapper::-webkit-scrollbar-button{display:none;width:0;height:0}.instrument-wrapper::-webkit-scrollbar-button:start:decrement,.instrument-wrapper::-webkit-scrollbar-button:end:increment{display:none}.instrument-wrapper::-webkit-scrollbar-button:horizontal:start:decrement,.instrument-wrapper::-webkit-scrollbar-button:horizontal:end:increment{display:none}.keyboard-container::-webkit-scrollbar-button{display:none}.instrument-wrapper::-webkit-scrollbar-track{background:linear-gradient(145deg,var(--dark-bg-secondary),var(--gray-850));border-radius:6px;box-shadow:inset 0 2px 4px var(--black-alpha-30)}.instrument-wrapper::-webkit-scrollbar-thumb{background:linear-gradient(145deg,var(--blue-500),var(--blue-700));border-radius:6px;border:1px solid var(--blue-400);box-shadow:0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-10)}.instrument-wrapper::-webkit-scrollbar-thumb:hover{background:linear-gradient(145deg,var(--blue-600),var(--blue-800));box-shadow:0 3px 6px var(--black-alpha-40),inset 0 1px 2px var(--white-alpha-15)}.instrument-wrapper::-webkit-scrollbar-thumb:active{background:linear-gradient(145deg,var(--blue-800),var(--blue-900))}.instrument-container:has(.guitar-container){padding:0;min-height:240px}.instrument-container:has(.bass-container){padding:0;min-height:200px}.instrument-container:has(.keyboard-container){min-height:305px}@media (min-width: 481px) and (max-width: 768px){.instrument-container:has(.guitar-container){padding:0;min-height:240px}.instrument-container:has(.bass-container){padding:0;min-height:200px}}@media (max-width: 480px){.instrument-container:has(.guitar-container){padding:0;min-height:240px}.instrument-container:has(.bass-container){padding:0;min-height:200px}}.white-key.manual-scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-selected));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 4px 8px var(--black-alpha-30)}.black-key.manual-scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-selected));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 4px 8px var(--black-alpha-50)}.white-key.manual-chord-note{background:linear-gradient(90deg,var(--note-chord),var(--note-selected));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 4px 8px var(--black-alpha-30)}.black-key.manual-chord-note{background:linear-gradient(90deg,var(--note-chord),var(--note-selected));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 4px 8px var(--black-alpha-50)}.white-key.manual-scale-chord-note{background:linear-gradient(90deg,var(--note-chord),var(--note-scale),var(--note-selected));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 4px 8px var(--black-alpha-30)}.black-key.manual-scale-chord-note{background:linear-gradient(90deg,var(--note-chord),var(--note-scale),var(--note-selected));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 4px 8px var(--black-alpha-50)}.white-key.manual-scale-root,.white-key.manual-chord-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-selected));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 0 8px var(--shadow-scale-root),0 6px 16px var(--black-alpha-30)}.black-key.manual-scale-root,.black-key.manual-chord-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-selected));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 0 8px var(--shadow-scale-root),0 4px 8px var(--black-alpha-50)}.white-key.manual-chord-root-note{background:linear-gradient(90deg,var(--note-chord-root),var(--note-chord),var(--note-selected));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 0 8px var(--shadow-scale-root),0 6px 16px var(--black-alpha-30)}.black-key.manual-chord-root-note{background:linear-gradient(90deg,var(--note-chord-root),var(--note-chord),var(--note-selected));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 0 8px var(--shadow-scale-root),0 4px 8px var(--black-alpha-50)}.white-key.manual-scale-chord-root-note{background:linear-gradient(90deg,var(--note-chord-root),var(--note-chord),var(--note-scale),var(--note-selected));border-color:var(--white);box-shadow:inset 0 2px 4px var(--white-alpha-10),inset 0 -2px 4px var(--black-alpha-20),0 0 8px var(--shadow-scale-root),0 6px 16px var(--black-alpha-30)}.black-key.manual-scale-chord-root-note{background:linear-gradient(90deg,var(--note-chord-root),var(--note-chord),var(--note-scale),var(--note-selected));border-color:var(--white);box-shadow:inset 0 1px 2px var(--white-alpha-10),inset 0 -1px 2px var(--black-alpha-30),0 0 8px var(--shadow-scale-root),0 4px 8px var(--black-alpha-50)}.selection-mode-switch{display:flex;flex-direction:column;gap:0;background:var(--black-alpha-20);padding:0;border-radius:.5rem;border:2px solid var(--gray-neutral);transition:all .3s ease;min-width:120px}.selection-mode-switch.flashing{border-color:var(--green-550)!important;box-shadow:0 0 8px var(--green-alpha-40)!important}.selection-mode-switch .switch-option{padding:.5rem 1.5rem;border:none;background:transparent;color:var(--white);cursor:pointer;border-radius:0;font-size:.875rem;font-weight:600;transition:all .2s ease;white-space:nowrap;width:100%}.selection-mode-switch .switch-option:first-child{border-radius:.375rem .375rem 0 0}.selection-mode-switch .switch-option:last-child{border-radius:0 0 .375rem .375rem}.selection-mode-switch .switch-option:hover:not(:disabled){background:#ffffff0d}.selection-mode-switch .switch-option:disabled{cursor:not-allowed;opacity:.7}.selection-mode-switch .switch-option:disabled:hover{background:transparent}.selection-mode-switch .switch-option:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:-2px;box-shadow:var(--focus-ring-shadow);z-index:1}.selection-mode-switch .switch-option.active{background:linear-gradient(145deg,var(--white),var(--gray-200));color:var(--gray-800);box-shadow:0 2px 4px var(--black-alpha-10)}.selection-mode-switch .switch-option.active:hover:not(:disabled){background:linear-gradient(145deg,var(--gray-50),var(--gray-300))}.selection-mode-switch .switch-option.active:disabled:hover{background:linear-gradient(145deg,var(--white),var(--gray-200))}.selection-mode-switch.disabled{opacity:.7;cursor:not-allowed}.chord-mode-switch{display:flex;flex-direction:column;gap:0;background:var(--black-alpha-20);padding:0;border-radius:.5rem;border:2px solid var(--gray-neutral);transition:all .3s ease;min-width:120px}.chord-mode-switch.disabled{opacity:.5;cursor:not-allowed;border-color:var(--gray-666)}.modern-control-item.with-unavailable-notice{margin-top:20px}.chord-mode-unavailable{color:var(--red-600);font-size:.75rem;font-weight:600;text-align:center;margin-top:4px}.chord-mode-switch.flashing{border-color:var(--green-550)!important;box-shadow:0 0 8px var(--green-alpha-40)!important}.chord-mode-switch .switch-option{padding:.5rem 1.5rem;border:none;background:transparent;color:var(--white);cursor:pointer;border-radius:0;font-size:.875rem;font-weight:600;transition:all .2s ease;white-space:nowrap;width:100%}.chord-mode-switch .switch-option:first-child{border-radius:.375rem .375rem 0 0}.chord-mode-switch .switch-option:last-child{border-radius:0 0 .375rem .375rem}.chord-mode-switch .switch-option:hover:not(:disabled){background:#ffffff0d}.chord-mode-switch .switch-option:disabled{cursor:not-allowed;opacity:1}.chord-mode-switch .switch-option:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:-2px;box-shadow:var(--focus-ring-shadow);z-index:1}.chord-mode-switch .switch-option.active{background:linear-gradient(145deg,var(--blue-500),var(--blue-600));color:var(--black)}.chord-mode-switch .switch-option.active:hover:not(:disabled){background:linear-gradient(145deg,var(--blue-400),var(--blue-500))}.chord-mode-switch .switch-option.active:disabled:hover{background:linear-gradient(145deg,var(--blue-500),var(--blue-600))}.chord-mode-switch .switch-option:disabled:hover{background:transparent}.light .octave-button{background:var(--white);border-color:var(--gray-400);color:var(--gray-800);box-shadow:0 2px 4px var(--black-alpha-10)}.light .octave-button:hover{background:var(--gray-100);box-shadow:0 4px 8px var(--black-alpha-20)}.light .octave-button:active{box-shadow:0 1px 2px var(--black-alpha-10)}.light .selection-mode-switch{background:var(--black-alpha-20);border-color:var(--gray-neutral)}.light .selection-mode-switch .switch-option{color:var(--white)}.light .selection-mode-switch .switch-option:hover{background:#ffffff0d}.light .selection-mode-switch .switch-option.active{background:linear-gradient(145deg,var(--white),var(--gray-200));color:var(--gray-800);box-shadow:0 2px 4px var(--black-alpha-10)}.light .selection-mode-switch .switch-option.active:hover{background:linear-gradient(145deg,var(--gray-50),var(--gray-300))}.light .chord-mode-switch{background:var(--black-alpha-20);border-color:var(--gray-neutral)}.light .chord-mode-switch.disabled{opacity:.5;border-color:var(--gray-666)}.light .chord-mode-unavailable{color:var(--red-600)}.light .chord-mode-switch .switch-option{color:var(--white)}.light .chord-mode-switch .switch-option:hover:not(:disabled){background:#ffffff0d}.light .chord-mode-switch .switch-option.active{background:linear-gradient(145deg,var(--blue-500),var(--blue-600));color:var(--black)}.light .chord-mode-switch .switch-option.active:hover{background:linear-gradient(145deg,var(--blue-400),var(--blue-500))}.guitar-container{position:relative;display:flex;justify-content:flex-start;align-items:center;padding:0 20px 50px 45px;min-width:auto;overflow:auto visible;max-width:95vw;scrollbar-width:auto;scrollbar-color:var(--green-500) var(--scrollbar-guitar-track)}@media (min-width: 481px) and (max-width: 768px){.guitar-container{min-width:auto;margin:0;padding:0 20px 50px 45px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100vw;width:100vw}.fretboard{min-width:800px;max-width:1200px;width:95vw;margin:0}.guitar-string{width:100%}}@media (max-width: 480px){.guitar-container{min-width:auto;margin:0;padding:0 20px 50px 45px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100vw;width:100vw}.fretboard{min-width:320px;max-width:800px;width:95vw;margin:0}.guitar-string{width:100%}}.fretboard{position:relative;width:auto;min-width:1305px;height:175px;background:linear-gradient(145deg,var(--guitar-fretboard-primary),var(--guitar-fretboard-secondary));border-radius:0;box-shadow:inset 0 2px 4px var(--black-alpha-50),0 4px 8px var(--black-alpha-30);border:2px solid var(--guitar-border)}.fret{position:absolute;top:0;height:100%;width:3px;z-index:10}.fret-wire{width:100%;height:100%;background:linear-gradient(145deg,var(--fret-wire-primary),var(--fret-wire-secondary));border-radius:1px;box-shadow:0 1px 2px var(--black-alpha-50),inset 0 1px 1px var(--white-alpha-30)}.fret-marker{position:absolute;width:12px;height:12px;background:linear-gradient(145deg,var(--fret-marker),var(--fret-marker-secondary));border-radius:50%;top:86.5px;left:50%;transform:translate(-50%,-50%) translate(-30px);box-shadow:inset 0 1px 2px var(--white-alpha-50),0 1px 2px var(--black-alpha-30);border:1px solid var(--fret-marker-border)}.double-marker-1{transform:translate(-50%,-50%) translate(-30px) translateY(-21px)}.double-marker-2{transform:translate(-50%,-50%) translate(-30px) translateY(19px)}.guitar-string{position:absolute;left:0;width:1299px;height:2px;background:linear-gradient(90deg,var(--string-4),var(--string-center-dark),var(--string-4));border-radius:1px;box-shadow:0 1px 1px var(--black-alpha-30);z-index:15}.guitar-string:nth-of-type(1){height:1px;background:linear-gradient(90deg,var(--string-1),var(--string-center),var(--string-1))}.guitar-string:nth-of-type(2){height:1.5px;background:linear-gradient(90deg,var(--string-2),var(--string-center),var(--string-2))}.guitar-string:nth-of-type(3){height:2px;background:linear-gradient(90deg,var(--string-3),var(--fret-wire-secondary),var(--string-3))}.guitar-string:nth-of-type(4){height:2.5px;background:linear-gradient(90deg,var(--string-4),var(--string-center-dark),var(--string-4))}.guitar-string:nth-of-type(5){height:3.5px;background:linear-gradient(90deg,var(--string-5),var(--string-center-darker),var(--string-5))}.guitar-string:nth-of-type(6){height:4.5px;background:linear-gradient(90deg,var(--string-6),var(--string-center-darkest),var(--string-6))}.guitar-container::-webkit-scrollbar{height:12px}.guitar-container::-webkit-scrollbar-button{display:none;width:0;height:0}.guitar-container::-webkit-scrollbar-button:start:decrement,.guitar-container::-webkit-scrollbar-button:end:increment{display:none}.guitar-container::-webkit-scrollbar-button:horizontal:start:decrement,.guitar-container::-webkit-scrollbar-button:horizontal:end:increment{display:none;width:0}.guitar-container::-webkit-scrollbar-track{background:linear-gradient(145deg,var(--scrollbar-guitar-track),var(--scrollbar-guitar-track-secondary));border-radius:6px;box-shadow:inset 0 2px 4px var(--black-alpha-30)}.guitar-container::-webkit-scrollbar-thumb{background:linear-gradient(145deg,var(--scrollbar-guitar-thumb-primary),var(--scrollbar-guitar-thumb-secondary));border-radius:6px;border:1px solid var(--scrollbar-guitar-thumb-border);box-shadow:0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-20)}.guitar-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(145deg,var(--scrollbar-guitar-thumb-hover-primary),var(--scrollbar-guitar-thumb-hover-secondary));box-shadow:0 3px 6px var(--black-alpha-40),inset 0 1px 2px var(--white-alpha-30)}.guitar-container::-webkit-scrollbar-thumb:active{background:linear-gradient(145deg,var(--green-700),var(--green-800))}.fret-checkbox-container{position:absolute;bottom:-40px;left:50%;transform:translate(-44px);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:20}.fret-checkbox{width:28px;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid var(--green-500);border-radius:50%;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center}.fret-checkbox:checked{background:linear-gradient(145deg,var(--green-500),var(--green-600));border-color:var(--green-400)}.fret-checkbox:hover{background:var(--green-alpha-60);transform:scale(1.05)}.fret-checkbox:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.fret-checkbox-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;cursor:pointer;text-align:center;color:var(--green-light);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fret-checkbox:checked+.fret-checkbox-label{color:var(--white)}.fret-checkbox.disabled{opacity:.5;background:transparent;border-color:var(--green-alpha-30);cursor:not-allowed}.fret-checkbox.disabled:hover{background:transparent;transform:none;border-color:var(--green-alpha-30)}.fret-checkbox-label.disabled{opacity:.5;color:var(--green-light-alpha-50);cursor:not-allowed}.string-checkbox-container{position:absolute;left:-40px;transform:translateY(-50%);display:flex;align-items:center;gap:6px;z-index:20;flex-direction:row-reverse}.string-checkbox{width:28px;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid var(--green-500);border-radius:50%;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center}.string-checkbox:checked{background:linear-gradient(145deg,var(--green-500),var(--green-600));border-color:var(--green-400)}.string-checkbox:hover{background:var(--green-alpha-60);transform:scale(1.05)}.string-checkbox:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.string-checkbox-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;cursor:pointer;text-align:center;color:var(--green-light);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.string-checkbox:checked+.string-checkbox-label{color:var(--white)}.fret-position{position:absolute;border-radius:8px;cursor:pointer;z-index:30;transition:all .2s ease;background:transparent}.fret-position:hover{background:transparent}.fret-position:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.open-string-position{background:var(--white-alpha-30)}.open-string-position:hover{background:transparent}.note-circle{position:absolute;width:20px;height:20px;background:linear-gradient(145deg,var(--note-selected),var(--note-selected-dark));border:1px solid var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:20;box-shadow:0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-30);pointer-events:none}.note-circle.preview{background:linear-gradient(145deg,var(--blue-alpha-40),var(--blue-alpha-40));border:1px solid var(--white-alpha-60);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.preview.scale-note{background:linear-gradient(145deg,var(--orange-alpha-40),var(--orange-alpha-40));border:1px solid var(--orange-400-alpha-60)}.note-circle.preview.scale-root-note{background:linear-gradient(145deg,var(--red-alpha-40),var(--red-alpha-40));border:1px solid var(--red-light-alpha-60);box-shadow:0 0 6px var(--red-alpha-40),0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.preview.chord-note{background:linear-gradient(145deg,var(--purple-alpha-40),var(--purple-alpha-40));border:1px solid var(--purple-600-alpha-60)}.note-circle.preview.chord-scale-note{background:linear-gradient(145deg,var(--orange-alpha-40),var(--purple-alpha-40));border:1px solid var(--orange-600-alpha-60)}.note-circle.preview.chord-root-note{background:linear-gradient(145deg,var(--red-alpha-40),var(--red-alpha-40));border:1px solid var(--red-light-alpha-60);box-shadow:0 0 6px var(--red-alpha-40),0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;border-color:var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 1px 2px var(--white-alpha-80),inset 0 -1px 2px var(--black-alpha-10)!important}.note-circle.melody-note{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark))!important}.fretboard.melody-active .note-circle:not(.melody-note):not(.currently-playing){opacity:.5!important;filter:brightness(.7)!important;transition:opacity .2s ease}.note-name{font-size:9px;font-weight:700;color:var(--white);text-shadow:0 1px 1px var(--black-alpha-50);-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes note-appear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.scale-selector{margin-bottom:20px;padding:15px;background:var(--primary-purple-alpha-5);border:1px solid var(--primary-purple-alpha-20);border-radius:8px}.scale-selector-header{margin-bottom:10px}.scale-toggle-button{background:var(--primary-purple-alpha-10);border:1px solid var(--primary-purple);color:var(--dark-text-primary);padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease}.scale-toggle-button:hover{background:var(--primary-purple-alpha-20);transform:translateY(-1px)}.scale-selector-content{display:flex;flex-direction:column;gap:15px}.scale-controls{display:flex;gap:20px;flex-wrap:wrap}.scale-control-group{display:flex;flex-direction:column;gap:5px;min-width:120px}.scale-control-group label{font-size:12px;color:var(--dark-text-primary);font-weight:600}.scale-control-group select{background:var(--primary-purple-alpha-10);border:1px solid var(--primary-purple);color:var(--dark-text-primary);padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s ease}.scale-control-group select:hover,.scale-control-group select:focus{background:var(--primary-purple-alpha-20);outline:none}.scale-description{padding:10px;background:var(--black-alpha-20);border-radius:4px;border-left:3px solid var(--primary-purple)}.scale-description p{margin:5px 0;font-size:12px;color:var(--dark-text-primary)}.scale-actions{display:flex;gap:10px;flex-wrap:wrap}.apply-scale-button,.clear-scale-button{padding:8px 16px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.apply-scale-button{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark));color:var(--white)}.apply-scale-button:hover{background:linear-gradient(145deg,var(--green-light),var(--note-melody));transform:translateY(-1px)}.clear-scale-button{background:var(--red-alpha-60);color:var(--white)}.clear-scale-button:hover{background:var(--red-500);transform:translateY(-1px)}.note-circle.scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-scale-dark));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.scale-root-note{background:linear-gradient(145deg,var(--note-scale-root),var(--note-scale-root-dark));border:1px solid var(--white);box-shadow:0 0 8px var(--shadow-scale-root),0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-30)}.note-circle.chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-chord-dark));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.chord-scale-note{background:linear-gradient(145deg,var(--note-chord),var(--note-scale));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.chord-note-scale-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.chord-root-scale-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-scale));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.chord-root-scale-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border:1px solid var(--white);box-shadow:0 0 8px var(--shadow-scale-root),0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-30)}.note-circle.chord-root-chord-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord));border:1px solid var(--white);box-shadow:0 0 8px var(--red-alpha-40),0 0 6px var(--purple-alpha-40),0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-30)}.note-circle.chord-root-note,.note-circle.chord-note.chord-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border:1px solid var(--white);box-shadow:0 0 8px var(--shadow-scale-root),0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-30)}.note-circle.manual-scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-scale-root,.note-circle.manual-chord-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-scale-chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-scale),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-scale-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-scale),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-chord-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-scale-chord-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord),var(--note-scale),var(--note-selected));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-20),inset 0 1px 2px var(--white-alpha-20)}.note-circle.manual-note{background:linear-gradient(145deg,var(--note-selected),var(--note-selected-dark));border:1px solid var(--white);box-shadow:0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-30)}@media (max-width: 768px){.scale-controls{flex-direction:column;gap:10px}.scale-actions{flex-direction:column}.apply-scale-button,.clear-scale-button{width:100%}}.position-toggle{margin:10px 0;padding:8px;background:var(--black-alpha-10);border-radius:4px}.position-toggle label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dark-text-primary);font-weight:600;cursor:pointer}.position-toggle input[type=checkbox]{width:16px;height:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--primary-purple-alpha-10);border:2px solid var(--primary-purple);border-radius:4px;cursor:pointer;transition:all .2s ease;position:relative}.position-toggle input[type=checkbox]:checked{background:linear-gradient(145deg,var(--primary-purple),var(--primary-purple-dark));border-color:var(--primary-purple-lighter)}.position-toggle input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-2px;left:2px;color:var(--white);font-size:12px;font-weight:700}.position-selector{margin:10px 0;padding:10px;background:var(--black-alpha-20);border-radius:4px;border-left:3px solid var(--orange-500)}.position-info{margin-top:8px;padding:8px;background:var(--orange-alpha-40);border-radius:4px}.position-info p{margin:3px 0;font-size:11px;color:var(--dark-text-primary)}.light .fret-checkbox-label,.light .string-checkbox-label{color:var(--light-text-primary)}.light .scale-selector{background:var(--light-bg-tertiary);border-color:var(--primary-purple-alpha-30)}.light .scale-toggle-button{color:var(--light-text-primary)}.light .scale-toggle-button:hover{background:var(--primary-purple-alpha-30)}.light .scale-control-group label{color:var(--light-text-primary)}.light .scale-control-group select{color:var(--light-text-primary);background:var(--light-bg-primary);border-color:var(--primary-purple)}.light .scale-control-group select:hover,.light .scale-control-group select:focus{background:var(--light-bg-tertiary)}.light .scale-description{background:var(--light-bg-secondary);border-left-color:var(--primary-purple)}.light .scale-description p{color:var(--light-text-secondary)}.light .position-toggle{background:var(--light-bg-secondary)}.light .position-toggle label{color:var(--light-text-primary)}.light .position-selector{background:var(--light-bg-secondary);border-left-color:var(--orange-600)}.light .position-info{background:var(--light-bg-tertiary)}.light .position-info p{color:var(--light-text-secondary)}.bass-container{position:relative;display:flex;justify-content:flex-start;align-items:center;padding:0 20px 50px 45px;min-width:auto;overflow:auto visible;max-width:95vw;scrollbar-width:auto;scrollbar-color:var(--red-500) var(--dark-bg-secondary)}@media (min-width: 481px) and (max-width: 768px){.bass-container{min-width:auto;margin:0;padding:0 20px 50px 45px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100vw;width:100vw}.bass-fretboard{min-width:800px;max-width:1200px;width:95vw;margin:0}.bass-string{width:100%}}@media (max-width: 480px){.bass-container{min-width:auto;margin:0;padding:0 20px 50px 45px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100vw;width:100vw}.bass-fretboard{min-width:320px;max-width:800px;width:95vw;margin:0}.bass-string{width:100%}}.bass-fretboard{position:relative;width:auto;min-width:1305px;height:135px;background:linear-gradient(145deg,var(--guitar-fretboard-primary),var(--guitar-fretboard-secondary));border-radius:0;box-shadow:inset 0 2px 4px var(--black-alpha-50),0 4px 8px var(--black-alpha-40);border:2px solid var(--guitar-border)}.bass-fret{position:absolute;top:0;height:100%;width:4px;z-index:10}.bass-fret-wire{width:100%;height:100%;background:linear-gradient(145deg,var(--fret-wire-primary),var(--fret-wire-secondary));border-radius:1.5px;box-shadow:0 2px 3px var(--black-alpha-50),inset 0 1px 2px var(--white-alpha-30)}.bass-fret-marker{position:absolute;width:14px;height:14px;background:linear-gradient(145deg,var(--fret-marker),var(--fret-marker-secondary));border-radius:50%;top:67px;left:50%;transform:translate(-50%,-50%) translate(-30px);box-shadow:inset 0 1px 2px var(--white-alpha-80),0 2px 3px var(--black-alpha-40);border:1px solid var(--fret-marker-border)}.bass-double-marker-1{transform:translate(-50%,-50%) translate(-30px) translateY(-20px)}.bass-double-marker-2{transform:translate(-50%,-50%) translate(-30px) translateY(18px)}.bass-string{position:absolute;left:0;width:1299px;background:linear-gradient(90deg,var(--string-4),var(--string-center-darker),var(--string-4));border-radius:2px;box-shadow:0 2px 2px var(--black-alpha-40);z-index:15}.bass-string:nth-of-type(1){height:3.5px;background:linear-gradient(90deg,var(--string-4),var(--string-center-dark),var(--string-4))}.bass-string:nth-of-type(2){height:4.5px;background:linear-gradient(90deg,var(--string-5),var(--string-center-darker),var(--string-5))}.bass-string:nth-of-type(3){height:5.5px;background:linear-gradient(90deg,var(--string-5),var(--string-center-darkest),var(--string-5))}.bass-string:nth-of-type(4){height:6.5px;background:linear-gradient(90deg,var(--string-6),var(--string-center-darkest),var(--string-6))}.bass-fret-checkbox-container{position:absolute;bottom:-40px;left:50%;transform:translate(-44px);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:20}.bass-fret-checkbox{width:28px;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid var(--red-500);border-radius:50%;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center}.bass-fret-checkbox:checked{background:linear-gradient(145deg,var(--red-500),var(--red-600));border:2px solid var(--red-500)}.bass-fret-checkbox:hover{background:var(--red-alpha-60);transform:scale(1.05)}.bass-fret-checkbox:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.bass-fret-checkbox-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;cursor:pointer;text-align:center;color:var(--red-light);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bass-fret-checkbox:checked+.bass-fret-checkbox-label{color:var(--white)}.bass-fret-checkbox.disabled{opacity:.5;background:transparent;border-color:var(--red-alpha-20);cursor:not-allowed}.bass-fret-checkbox.disabled:hover{background:transparent;transform:none;border-color:var(--red-alpha-20)}.bass-fret-checkbox-label.disabled{opacity:.5;color:var(--red-alpha-60);cursor:not-allowed}.bass-string-checkbox-container{position:absolute;left:-40px;transform:translateY(-50%);display:flex;align-items:center;gap:6px;z-index:20;flex-direction:row-reverse}.bass-string-checkbox{width:28px;height:28px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:2px solid var(--red-500);border-radius:50%;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center}.bass-string-checkbox:checked{background:linear-gradient(145deg,var(--red-500),var(--red-600));border:2px solid var(--red-500)}.bass-string-checkbox:hover{background:var(--red-alpha-60);transform:scale(1.05)}.bass-string-checkbox:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.bass-string-checkbox-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:700;cursor:pointer;text-align:center;color:var(--red-light);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bass-string-checkbox:checked+.bass-string-checkbox-label{color:var(--white)}.bass-fret-position{position:absolute;border-radius:8px;cursor:pointer;z-index:30;transition:all .2s ease;background:transparent}.bass-fret-position:hover{background:transparent}.bass-fret-position:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset);box-shadow:var(--focus-ring-shadow)}.bass-open-string-position{background:var(--white-alpha-30)}.bass-open-string-position:hover{background:transparent}.bass-note-circle{position:absolute;width:22px;height:22px;background:linear-gradient(145deg,var(--note-selected),var(--note-selected-dark));border:1px solid var(--keyboard-white-key);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:20;box-shadow:0 3px 5px var(--black-alpha-40),inset 0 1px 3px var(--white-alpha-30);pointer-events:none}.bass-note-circle.preview{background:linear-gradient(145deg,var(--blue-alpha-40),var(--blue-alpha-40));border:1px solid var(--white-alpha-80);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.preview.scale-note{background:linear-gradient(145deg,var(--orange-alpha-40),var(--orange-alpha-40));border:1px solid var(--white-alpha-80)}.bass-note-circle.preview.scale-root-note{background:linear-gradient(145deg,var(--red-alpha-40),var(--red-alpha-40));border:1px solid var(--white-alpha-80);box-shadow:0 0 6px var(--red-alpha-40),0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.preview.chord-note{background:linear-gradient(145deg,var(--purple-alpha-40),var(--purple-alpha-40));border:1px solid var(--white-alpha-80)}.bass-note-circle.preview.chord-scale-note{background:linear-gradient(145deg,var(--orange-alpha-40),var(--purple-alpha-40));border:1px solid var(--white-alpha-80)}.bass-note-circle.preview.chord-root-note{background:linear-gradient(145deg,var(--red-alpha-40),var(--red-alpha-40));border:1px solid var(--white-alpha-80);box-shadow:0 0 6px var(--red-alpha-40),0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.currently-playing{background:linear-gradient(145deg,var(--amber-400),var(--amber-500))!important;border-color:var(--amber-200)!important;box-shadow:0 0 20px var(--amber-alpha-80),0 0 40px var(--amber-alpha-60),inset 0 1px 2px var(--white-alpha-80),inset 0 -1px 2px var(--black-alpha-10)!important}.bass-note-circle.melody-note{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark))!important}.bass-fretboard.melody-active .bass-note-circle:not(.melody-note):not(.currently-playing){opacity:.5!important;filter:brightness(.7)!important;transition:opacity .2s ease}.bass-note-name{font-size:9px;font-weight:700;color:var(--keyboard-white-key);text-shadow:0 1px 2px var(--black-alpha-50);-webkit-user-select:none;-moz-user-select:none;user-select:none}@keyframes bass-note-appear{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.bass-scale-selector{margin-bottom:20px;padding:15px;background:var(--primary-purple-alpha-5);border:1px solid var(--primary-purple-alpha-20);border-radius:8px;z-index:50;position:relative}.bass-scale-selector-header{margin-bottom:10px}.bass-scale-toggle-button{background:var(--primary-purple-alpha-10);border:1px solid var(--primary-purple);color:var(--dark-text-primary);padding:8px 12px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600;transition:all .2s ease;position:relative;z-index:51}.bass-scale-toggle-button:hover{background:var(--primary-purple-alpha-20);transform:translateY(-1px)}.bass-scale-selector-content{display:flex;flex-direction:column;gap:15px;position:relative;z-index:50}.bass-scale-controls{display:flex;gap:20px;flex-wrap:wrap}.bass-scale-control-group{display:flex;flex-direction:column;gap:5px;min-width:120px}.bass-scale-control-group label{font-size:12px;color:var(--dark-text-primary);font-weight:600}.bass-scale-control-group select{background:var(--primary-purple-alpha-10);border:1px solid var(--primary-purple);color:var(--dark-text-primary);padding:6px 8px;border-radius:4px;cursor:pointer;font-size:12px;transition:all .2s ease}.bass-scale-control-group select:hover,.bass-scale-control-group select:focus{background:var(--primary-purple-alpha-20);outline:none}.bass-scale-description{padding:10px;background:var(--black-alpha-20);border-radius:4px;border-left:3px solid var(--primary-purple)}.bass-scale-description p{margin:5px 0;font-size:12px;color:var(--dark-text-primary)}.bass-scale-actions{display:flex;gap:10px;flex-wrap:wrap}.bass-apply-scale-button,.bass-clear-scale-button{padding:8px 16px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.bass-apply-scale-button{background:linear-gradient(145deg,var(--note-melody),var(--note-melody-dark));color:var(--keyboard-white-key)}.bass-apply-scale-button:hover{background:linear-gradient(145deg,var(--red-600),var(--note-melody));transform:translateY(-1px)}.bass-clear-scale-button{background:var(--red-alpha-60);color:var(--keyboard-white-key)}.bass-clear-scale-button:hover{background:var(--red-500);transform:translateY(-1px)}.bass-note-circle.scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-scale-dark));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.scale-root-note{background:linear-gradient(145deg,var(--note-scale-root),var(--note-scale-root-dark));border:1px solid var(--keyboard-white-key);box-shadow:0 0 10px var(--shadow-scale-root),0 3px 5px var(--black-alpha-40),inset 0 1px 3px var(--white-alpha-30)}.bass-note-circle.chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-chord-dark));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.chord-scale-note{background:linear-gradient(145deg,var(--note-chord),var(--note-scale));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.chord-note-scale-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-chord))!important;border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.chord-root-scale-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-scale));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.chord-root-scale-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border:1px solid var(--keyboard-white-key);box-shadow:0 0 10px var(--shadow-scale-root),0 3px 5px var(--black-alpha-40),inset 0 1px 3px var(--white-alpha-30)}.bass-note-circle.chord-root-chord-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord));border:1px solid var(--keyboard-white-key);box-shadow:0 0 10px var(--red-alpha-40),0 0 8px var(--purple-alpha-40),0 3px 5px var(--black-alpha-40),inset 0 1px 3px var(--white-alpha-30)}.bass-note-circle.chord-root-note,.bass-note-circle.chord-note.chord-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord-root-dark));border:1px solid var(--keyboard-white-key);box-shadow:0 0 10px var(--shadow-scale-root),0 3px 5px var(--black-alpha-40),inset 0 1px 3px var(--white-alpha-30)}.bass-note-circle.manual-scale-note{background:linear-gradient(145deg,var(--note-scale),var(--note-selected));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-selected));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-scale-root{background:linear-gradient(145deg,var(--note-scale-root),var(--note-selected))!important;border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-chord-root{background:linear-gradient(145deg,var(--note-chord-root),var(--note-selected));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-scale-chord-note{background:linear-gradient(145deg,var(--note-chord),var(--note-scale),var(--note-selected));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-scale-root-note{background:linear-gradient(145deg,var(--note-scale-root),var(--note-scale),var(--note-selected))!important;border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-chord-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord),var(--note-selected));border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}.bass-note-circle.manual-scale-chord-root-note{background:linear-gradient(145deg,var(--note-chord-root),var(--note-chord),var(--note-scale),var(--note-selected));border:1px solid var(--keyboard-white-key);box-shadow:0 0 10px var(--shadow-scale-root),0 3px 5px var(--black-alpha-40),inset 0 1px 3px var(--white-alpha-30)}.bass-note-circle.manual-note{background:linear-gradient(145deg,var(--note-selected),var(--blue-600))!important;border:1px solid var(--keyboard-white-key);box-shadow:0 3px 5px var(--black-alpha-20),inset 0 1px 3px var(--white-alpha-20)}@media (max-width: 768px){.bass-scale-controls{flex-direction:column;gap:10px}.bass-scale-actions{flex-direction:column}.bass-apply-scale-button,.bass-clear-scale-button{width:100%}}.bass-position-toggle{margin:10px 0;padding:8px;background:var(--black-alpha-10);border-radius:4px}.bass-position-toggle label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dark-text-primary);font-weight:600;cursor:pointer}.bass-position-toggle input[type=checkbox]{width:16px;height:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--primary-purple-alpha-10);border:2px solid var(--primary-purple);border-radius:4px;cursor:pointer;transition:all .2s ease;position:relative}.bass-position-toggle input[type=checkbox]:checked{background:linear-gradient(145deg,var(--primary-purple),var(--primary-purple-dark));border-color:var(--primary-purple-lighter)}.bass-position-toggle input[type=checkbox]:checked:after{content:"✓";position:absolute;top:-2px;left:2px;color:var(--keyboard-white-key);font-size:12px;font-weight:700}.bass-position-selector{margin:10px 0;padding:10px;background:var(--black-alpha-20);border-radius:4px;border-left:3px solid var(--primary-purple)}.bass-position-info{margin-top:8px;padding:8px;background:var(--primary-purple-alpha-10);border-radius:4px}.bass-position-info p{margin:3px 0;font-size:11px;color:var(--dark-text-primary)}.bass-container::-webkit-scrollbar{height:12px}.bass-container::-webkit-scrollbar-button{display:none;width:0;height:0}.bass-container::-webkit-scrollbar-button:start:decrement,.bass-container::-webkit-scrollbar-button:end:increment{display:none}.bass-container::-webkit-scrollbar-button:horizontal:start:decrement,.bass-container::-webkit-scrollbar-button:horizontal:end:increment{display:none;width:0!important}.bass-container::-webkit-scrollbar-track{background:linear-gradient(145deg,var(--dark-bg-secondary),var(--dark-bg-tertiary));border-radius:6px;box-shadow:inset 0 2px 4px var(--black-alpha-30)}.bass-container::-webkit-scrollbar-thumb{background:linear-gradient(145deg,var(--red-500),var(--red-600));border-radius:6px;border:1px solid var(--red-400);box-shadow:0 2px 4px var(--black-alpha-30),inset 0 1px 2px var(--white-alpha-20)}.bass-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(145deg,var(--red-400),var(--red-700));box-shadow:0 3px 6px var(--black-alpha-40),inset 0 1px 2px var(--white-alpha-30)}.bass-container::-webkit-scrollbar-thumb:active{background:linear-gradient(145deg,var(--red-700),var(--red-800))}.light .bass-fret-checkbox-label,.light .bass-string-checkbox-label{color:var(--light-text-primary)}.light .bass-scale-selector{background:var(--light-bg-tertiary);border-color:var(--primary-purple-alpha-30)}.light .bass-scale-toggle-button{color:var(--light-text-primary)}.light .bass-scale-toggle-button:hover{background:var(--primary-purple-alpha-30)}.light .bass-scale-control-group label{color:var(--light-text-primary)}.light .bass-scale-control-group select{color:var(--light-text-primary);background:var(--light-bg-primary);border-color:var(--primary-purple)}.light .bass-scale-control-group select:hover,.light .bass-scale-control-group select:focus{background:var(--light-bg-tertiary)}.light .bass-scale-description{background:var(--light-bg-secondary);border-left-color:var(--primary-purple)}.light .bass-scale-description p{color:var(--light-text-secondary)}.light .bass-position-toggle{background:var(--light-bg-secondary)}.light .bass-position-toggle label{color:var(--light-text-primary)}.light .bass-position-selector{background:var(--light-bg-secondary);border-left-color:var(--orange-600)}.light .bass-position-info{background:var(--light-bg-tertiary)}.light .bass-position-info p{color:var(--light-text-secondary)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}._modalOverlay_1q9ur_2{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:_fadeIn_1q9ur_1 .3s ease-out}@keyframes _fadeIn_1q9ur_1{0%{opacity:0}to{opacity:1}}._modalContent_1q9ur_28{background:linear-gradient(145deg,#1b6940fa,#145232fa);border:2px solid rgba(210,210,249,.3);border-radius:24px;padding:40px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 80px #00000080;animation:_slideUp_1q9ur_1 .3s ease-out}@keyframes _slideUp_1q9ur_1{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.light ._modalContent_1q9ur_28{background:linear-gradient(145deg,#fffffffa,#e4ffe8fa);border-color:#00d96f4d}._modalTitle_1q9ur_67{font-size:28px;font-weight:700;color:var(--dark-text-primary);margin:0 0 12px;text-align:center;text-shadow:0 2px 8px rgba(0,217,111,.3)}.light ._modalTitle_1q9ur_67{color:var(--light-text-primary);text-shadow:0 2px 8px rgba(0,217,111,.2)}._modalSubtitle_1q9ur_82{font-size:16px;font-weight:500;color:#d2d2f9cc;margin:0 0 32px;text-align:center}.light ._modalSubtitle_1q9ur_82{color:#1b6940b3}._optionsList_1q9ur_95{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}._optionItem_1q9ur_103{display:flex;align-items:center;gap:16px;padding:20px;background:#ffffff0d;border:2px solid rgba(210,210,249,.15);border-radius:16px;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}._optionItem_1q9ur_103:hover{background:#ffffff14;border-color:#d2d2f940;transform:translateY(-2px);box-shadow:0 8px 24px #0003}._optionItem_1q9ur_103._selected_1q9ur_123{background:linear-gradient(135deg,#00d96f33,#2ee88d26);border-color:#00d96f80;box-shadow:0 0 20px #00d96f4d}.light ._optionItem_1q9ur_103{background:#00d96f0d;border-color:#00d96f33}.light ._optionItem_1q9ur_103:hover{background:#00d96f1a;border-color:#00d96f4d}.light ._optionItem_1q9ur_103._selected_1q9ur_123{background:linear-gradient(135deg,#00d96f26,#2ee88d1a);border-color:#00d96f80;box-shadow:0 0 20px #00d96f33}._radio_1q9ur_154{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border:2px solid rgba(210,210,249,.4);border-radius:50%;cursor:pointer;transition:all .2s ease;flex-shrink:0;background:#ffffff0d;position:relative}._radio_1q9ur_154:checked{background:linear-gradient(135deg,#00d96f,#2ee88d);border-color:#00d96f}._radio_1q9ur_154:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#fff;border-radius:50%}.light ._radio_1q9ur_154{border-color:#00d96f66;background:#fffc}.light ._radio_1q9ur_154:checked{background:linear-gradient(135deg,#00d96f,#2ee88d);border-color:#00d96f}._optionContent_1q9ur_195{flex:1;display:flex;flex-direction:column;gap:4px}._optionLabel_1q9ur_202{font-size:16px;font-weight:600;color:var(--dark-text-primary)}.light ._optionLabel_1q9ur_202{color:var(--light-text-primary)}._optionDescription_1q9ur_212{font-size:13px;font-weight:400;color:#d2d2f9b3}.light ._optionDescription_1q9ur_212{color:#1b694099}._checkmark_1q9ur_223{width:20px;height:20px;flex-shrink:0;color:#00d96f}._modalActions_1q9ur_231{display:flex;gap:12px;justify-content:flex-end}._cancelButton_1q9ur_238{padding:14px 28px;background:transparent;border:2px solid rgba(210,210,249,.3);border-radius:12px;color:var(--dark-text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}._cancelButton_1q9ur_238:hover{background:#ffffff0d;border-color:#d2d2f980;transform:translateY(-1px)}.light ._cancelButton_1q9ur_238{border-color:#00d96f4d;color:var(--light-text-primary)}.light ._cancelButton_1q9ur_238:hover{background:#00d96f0d;border-color:#00d96f80}._startButton_1q9ur_267{padding:14px 28px;background:linear-gradient(135deg,#00d96f,#2ee88d);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 16px #00d96f66;display:flex;align-items:center;gap:8px}._startButton_1q9ur_267:hover:not(:disabled){background:linear-gradient(135deg,#00b359,#00b359);transform:translateY(-2px);box-shadow:0 8px 24px #00d96f80}._startButton_1q9ur_267:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}@media (max-width: 640px){._modalContent_1q9ur_28{padding:28px 20px;border-radius:20px}._modalTitle_1q9ur_67{font-size:24px}._modalSubtitle_1q9ur_82{font-size:14px;margin-bottom:24px}._optionItem_1q9ur_103{padding:16px;gap:12px}._optionLabel_1q9ur_202{font-size:15px}._optionDescription_1q9ur_212{font-size:12px}._modalActions_1q9ur_231{flex-direction:column-reverse}._cancelButton_1q9ur_238,._startButton_1q9ur_267{width:100%;justify-content:center}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}._appContainer_138i2_1{display:flex;flex-direction:column;align-items:center;width:100%;min-height:100vh;transition:all .3s ease;position:relative}._light_138i2_11{background:linear-gradient(135deg,var(--light-bg-gradient-1) 0%,var(--light-bg-gradient-2) 25%,var(--light-bg-gradient-3) 50%,var(--light-bg-gradient-4) 75%,var(--light-bg-gradient-2) 100%)}._dark_138i2_20{background:linear-gradient(135deg,var(--dark-bg-surface) 0%,var(--dark-bg-primary) 25%,var(--dark-bg-quaternary) 50%,var(--dark-bg-tertiary) 75%,var(--dark-bg-primary) 100%)}._app-header_138i2_29{text-align:center;margin-bottom:2rem}._app-description_138i2_34{font-size:1.125rem;text-align:center;margin-bottom:2rem;color:var(--light-text-primary);opacity:.9}._dark_138i2_20 ._app-description_138i2_34{color:var(--dark-text-primary)}