body{align-items:flex-start;background:linear-gradient(135deg,#151b37,#22135f);display:flex;font-family:Arial,sans-serif;justify-content:center;margin:0;min-height:100vh;padding:20px;user-select:none}.main-container{display:flex;gap:30px;max-width:1800px;width:100%}.panel{backdrop-filter:blur(10px);background:rgba(30,41,59,.95);height:95vh;overflow-y:auto;padding:30px 10px;scrollbar-color:hsla(0,0%,46%,.6) transparent;scrollbar-width:thin}.left-panel{min-width:250px;width:300px}.main-content{align-items:center;display:flex;flex:1;flex-direction:column}.right-panel{min-width:250px;width:300px}.container{backdrop-filter:blur(10px);background:rgba(30,41,59,.95);box-shadow:0 15px 35px rgba(0,0,0,.1);max-width:1000px;padding:30px;position:relative;width:100%;z-index:10}h1{color:#4a5568;font-size:2.5rem;font-weight:300;margin-bottom:30px;text-align:center}.walkthrough-section{background:linear-gradient(145deg,#f8f9fa,#e9ecef);border:2px solid #dee2e6;border-radius:12px;overflow:hidden;transition:all .3s ease}.walkthrough-header{align-items:center;background:#2d3748;color:#fff;cursor:pointer;display:flex;justify-content:space-between;padding:15px 20px;transition:all .2s ease}.walkthrough-header:hover{background:linear-gradient(145deg,#3a4574,#493989);color:#fff}.walkthrough-title{font-size:18px;font-weight:600;margin:0}.walkthrough-toggle{align-items:center;background:hsla(0,0%,100%,.2);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:700;height:24px;justify-content:center;transition:all .2s ease;width:24px}.walkthrough-toggle:hover{background:hsla(0,0%,100%,.3);transform:scale(1.05)}.walkthrough-content{background:#fff;overflow:hidden;padding:20px;transition:max-height .3s ease,padding .3s ease}.walkthrough-content.collapsed{max-height:0;padding:0 20px}.walkthrough-step{background:rgba(102,126,234,.05);border-left:4px solid #667eea;border-radius:0 8px 8px 0;margin-bottom:15px;padding:12px}.walkthrough-step:last-child{margin-bottom:0}.walkthrough-step-title{color:#4a5568;font-size:14px;font-weight:600;margin-bottom:5px}.walkthrough-step-text{color:#718096;font-size:13px;line-height:1.4}.welcome-message{background:#475569;border-radius:2px;color:#fff;font-weight:600;margin-bottom:8px;padding:15px 20px;text-align:center}.circle-container{height:400px;margin:40px auto;position:relative;width:400px;--seventh-button-size:30px;--secondary-dominant-button-size:30px}.circle{border:3px solid #e2e8f0;border-radius:50%;height:100%;position:relative;user-select:none;width:100%}.note{align-items:center;background:linear-gradient(145deg,#fff,#f7fafc);border:2px solid #cbd5e0;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#2d3748;cursor:pointer;display:flex;font-size:24px;font-weight:700;height:80px;justify-content:center;position:absolute;transform-origin:center;width:80px;z-index:10}.note-circle{user-select:none}.note-content{transform:rotate(calc(var(--circle-rotation, 0deg)*-1))}div.note:hover,span.note:hover{background:linear-gradient(145deg,#f7fafc,#edf2f7);box-shadow:0 6px 20px rgba(0,0,0,.2);cursor:pointer}.note.chord-tone-0{background:linear-gradient(145deg,#e53e3e,#c53030);border-color:#9b2c2c;box-shadow:0 0 20px rgba(229,62,62,.5);color:#fff;transform:scale(1.15)}.note.chord-tone-1{background:linear-gradient(145deg,#ed8936,#dd6b20);border-color:#c05621;box-shadow:0 0 20px rgba(237,137,54,.5);color:#fff;transform:scale(1.15)}.note.chord-tone-2{background:linear-gradient(145deg,#ecc94b,#d69e2e);border-color:#b7791f;box-shadow:0 0 20px rgba(236,201,75,.5);color:#fff;transform:scale(1.15)}.note.chord-tone-3{background:linear-gradient(145deg,#48bb78,#38a169);border-color:#2f855a;box-shadow:0 0 20px rgba(72,187,120,.5);color:#fff;transform:scale(1.15)}.note.chord-tone-4{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#2b6cb0;box-shadow:0 0 20px rgba(66,153,225,.5);color:#fff;transform:scale(1.15)}.note.chord-tone-5{background:linear-gradient(145deg,#9f7aea,#805ad5);border-color:#553c9a;box-shadow:0 0 20px rgba(159,122,234,.5);color:#fff;transform:scale(1.15)}.note.chord-tone-6{background:linear-gradient(145deg,#d53f8c,#b83280);border-color:#97266d;box-shadow:0 0 20px rgba(213,63,140,.5);color:#fff;transform:scale(1.15)}.chord-info{color:#4a5568;font-size:larger;font-weight:600;margin-bottom:50px;margin-top:10px;text-align:center}.info{color:#718096;font-style:italic;margin-top:20px;text-align:center}.toolbar{gap:15px}.button-group,.toolbar{display:flex;flex-direction:column}.button-group label{color:#4a5568;font-size:14px;font-weight:700;margin-bottom:5px}.button-row{display:flex;flex-wrap:wrap;gap:5px}button{background:linear-gradient(145deg,#fff,#f7fafc);border:1px solid #cbd5e0;border-radius:16px;color:#4a5568;cursor:pointer;flex-shrink:0;font-size:14px;font-weight:600;min-width:30px;padding:6px 10px;transition:all .3s ease;white-space:nowrap}.accidental-btn,.note-btn{padding:4px 0;width:unset}button:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0);box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}button.active{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#2b6cb0;color:#fff}.accidental{font-size:18px;margin-left:2px}.piano-keyboard{background:#f7fafc;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);height:110px;margin:10px auto;overflow-x:auto;overflow-y:hidden;padding:10px;position:relative;scrollbar-color:#cbd5e0 #f7fafc;scrollbar-width:thin;width:600px}.piano-keyboard::-webkit-scrollbar{height:8px}.piano-keyboard::-webkit-scrollbar-track{background:#f7fafc;border-radius:4px}.piano-keyboard::-webkit-scrollbar-thumb{background:#cbd5e0;border-radius:4px}.piano-keyboard::-webkit-scrollbar-thumb:hover{background:#a0aec0}.piano-keys{display:grid;grid-template-columns:repeat(42,1fr);height:100px;min-width:1200px;position:relative}.white-key{align-items:flex-end;background:linear-gradient(145deg,#fff,#f7fafc);border:1px solid #cbd5e0;border-radius:0 0 8px 8px;color:#4a5568;cursor:pointer;display:flex;font-size:12px;font-weight:600;justify-content:center;padding-bottom:8px;position:relative;transition:all .3s ease}.key-enharmonic-note:hover{border-radius:3px;box-shadow:1px 1px 5px #000}.white-key:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0);box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(2px)}.black-key{align-items:flex-end;background:linear-gradient(145deg,#2d3748,#1a202c);border:1px solid #1a202c;border-radius:0 0 4px 4px;color:#e2e8f0;cursor:pointer;display:flex;font-size:10px;font-weight:600;height:60px;justify-content:center;padding-bottom:4px;position:absolute;transition:all .3s ease;width:24px;z-index:2}.black-key:hover{background:linear-gradient(145deg,#4a5568,#2d3748);box-shadow:0 4px 12px rgba(0,0,0,.3);transform:scaleY(1.05)}.black-key.chord-tone-0,.white-key.chord-tone-0{background:linear-gradient(145deg,#e53e3e,#c53030)!important;border-color:#9b2c2c!important;box-shadow:0 0 15px rgba(229,62,62,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-1,.white-key.chord-tone-1{background:linear-gradient(145deg,#ed8936,#dd6b20)!important;border-color:#c05621!important;box-shadow:0 0 15px rgba(237,137,54,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-2,.white-key.chord-tone-2{background:linear-gradient(145deg,#ecc94b,#d69e2e)!important;border-color:#b7791f!important;box-shadow:0 0 15px rgba(236,201,75,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-3,.white-key.chord-tone-3{background:linear-gradient(145deg,#48bb78,#38a169)!important;border-color:#2f855a!important;box-shadow:0 0 15px rgba(72,187,120,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-4,.white-key.chord-tone-4{background:linear-gradient(145deg,#4299e1,#3182ce)!important;border-color:#2b6cb0!important;box-shadow:0 0 15px rgba(66,153,225,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-5,.white-key.chord-tone-5{background:linear-gradient(145deg,#9f7aea,#805ad5)!important;border-color:#553c9a!important;box-shadow:0 0 15px rgba(159,122,234,.5)!important;color:#fff!important;transform:scale(1.05)!important}.black-key.chord-tone-6,.white-key.chord-tone-6{background:linear-gradient(145deg,#d53f8c,#b83280)!important;border-color:#97266d!important;box-shadow:0 0 15px rgba(213,63,140,.5)!important;color:#fff!important;transform:scale(1.05)!important}.note-seventh{align-items:center;background:linear-gradient(145deg,#9f7aea,#805ad5);border:2px solid #553c9a;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;cursor:pointer;display:none;font-size:14px;font-weight:700;height:var(--seventh-button-size);justify-content:center;position:absolute;width:var(--seventh-button-size);z-index:5}.note-seventh:before{content:"7";transform:rotate(calc(var(--circle-rotation, 0deg)*-1))}.note-seventh.show{display:flex}.note-seventh:hover{background:linear-gradient(145deg,#b794f4,#9f7aea);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.note-seventh.playing{background:linear-gradient(145deg,#48bb78,#38a169);border-color:#2f855a;box-shadow:0 0 20px rgba(72,187,120,.5);color:#fff;transform:scale(1.15)}.note-flat-second{align-items:center;background:linear-gradient(145deg,#ed8936,#dd6b20);border:2px solid #c05621;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;cursor:pointer;display:none;font-size:16px;font-weight:700;height:50px;justify-content:center;position:absolute;transition:all .3s ease;width:50px;z-index:5}.note-flat-second.show{display:flex}.note-flat-second:hover{background:linear-gradient(145deg,#f6ad55,#ed8936);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.note-flat-second.playing{background:linear-gradient(145deg,#48bb78,#38a169);border-color:#2f855a;box-shadow:0 0 20px rgba(72,187,120,.5);color:#fff;transform:scale(1.15)}.note-sharp-fourth{align-items:center;background:linear-gradient(145deg,#4299e1,#3182ce);border:2px solid #2b6cb0;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;cursor:pointer;display:none;font-size:16px;font-weight:700;height:50px;justify-content:center;position:absolute;transition:all .3s ease;width:50px;z-index:5}.note-sharp-fourth.show{display:flex}.note-sharp-fourth:hover{background:linear-gradient(145deg,#63b3ed,#4299e1);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.note-sharp-fourth.playing{background:linear-gradient(145deg,#48bb78,#38a169);border-color:#2f855a;box-shadow:0 0 20px rgba(72,187,120,.5);color:#fff;transform:scale(1.15)}.note-secondary-dominant{align-items:center;background:linear-gradient(145deg,#d53f8c,#b83280);border:2px solid #97266d;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;cursor:pointer;display:none;font-size:12px;font-weight:700;height:var(--secondary-dominant-button-size);justify-content:center;position:absolute;transition:all .3s ease;width:var(--secondary-dominant-button-size);z-index:5}.note-secondary-dominant:before{content:attr(data-note-with-accidental) "7";transform:rotate(calc(var(--circle-rotation, 0deg)*-1))}.note-secondary-dominant.show{display:flex}.note-secondary-dominant:hover{background:linear-gradient(145deg,#e53e8c,#d53f8c);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.note-secondary-dominant.playing{background:linear-gradient(145deg,#48bb78,#38a169);border-color:#2f855a;box-shadow:0 0 20px rgba(72,187,120,.5);color:#fff;transform:scale(1.15)}.note-parallel-chord{align-items:center;background:linear-gradient(145deg,#805ad5,#6b46c1);border:2px solid #553c9a;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);color:#fff;cursor:pointer;display:none;font-size:12px;font-weight:700;height:var(--secondary-dominant-button-size);justify-content:center;position:absolute;transition:all .3s ease;width:var(--secondary-dominant-button-size);z-index:5}.note-parallel-chord:before{content:"p";transform:rotate(calc(var(--circle-rotation, 0deg)*-1))}.note-parallel-chord.show{display:flex}.note-parallel-chord:hover{background:linear-gradient(145deg,#9f7aea,#805ad5);box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.tooltip-icon{background:#718096;border-radius:50%;color:#fff;cursor:help;display:inline-block;font-size:9px;font-weight:700;height:14px;line-height:14px;margin-left:6px;opacity:.7;text-align:center;vertical-align:middle;width:14px}.tooltip-icon:hover{background:#4a5568;opacity:1;transform:scale(1.05)}#selected-degree-box{border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.1);padding:4px 6px}.voicing-controls{display:flex;flex-direction:column;gap:12px}.voicing-selected-notes{align-items:center;background:rgba(237,242,247,.5);border:2px solid #e2e8f0;border-radius:8px;color:#4a5568;display:flex;font-size:14px;font-weight:600;justify-content:center;min-height:40px;padding:10px}.voicing-placeholder{color:#a0aec0;font-style:italic}.voicing-scale-degrees{display:flex;flex-direction:column;gap:8px}.voicing-degree-row{display:flex;gap:8px;justify-content:center}.voicing-degree-group{align-items:center;display:flex;flex-direction:row;gap:4px}.voicing-accidental-buttons{align-items:center;display:flex;flex-direction:column;gap:2px}.voicing-accidental-btn{align-items:center;background:#fff;border:1px solid #cbd5e0;border-radius:4px;color:#4a5568;cursor:pointer;display:flex;font-size:10px;font-weight:600;height:16px;justify-content:center;margin:0;min-width:16px;padding:0;transition:all .2s ease;width:16px}.voicing-accidental-btn:hover{background:#edf2f7;box-shadow:0 2px 6px rgba(0,0,0,.1);transform:translateY(-1px)}.voicing-accidental-btn.selected{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#2b6cb0;box-shadow:0 2px 6px rgba(66,153,225,.3);color:#fff;transform:scale(1.1)}.voicing-degree-btn{align-items:center;background:#fff;border:2px solid #cbd5e0;border-radius:8px;color:#4a5568;cursor:pointer;display:flex;font-size:14px;font-weight:600;height:40px;justify-content:center;transition:all .3s ease;width:40px}.voicing-degree-btn:hover{background:#edf2f7;box-shadow:0 4px 12px rgba(0,0,0,.15);transform:translateY(-2px)}.voicing-degree-btn.selected{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#2b6cb0;box-shadow:0 4px 12px rgba(66,153,225,.3);color:#fff;transform:scale(1.05)}.voicing-actions{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px}.voicing-action-btn{background:#fff;border:2px solid #cbd5e0;border-radius:8px;color:#4a5568;cursor:pointer;font-size:12px;font-weight:600;padding:8px 16px;transition:all .3s ease}.voicing-action-btn:hover{background:#edf2f7;box-shadow:0 2px 8px rgba(0,0,0,.1);transform:translateY(-1px)}.voicing-action-btn:active{transform:translateY(0)}.chromatic-chords-section{margin-top:15px;padding-top:15px}.chromatic-chords-section label{color:#2d3748;font-weight:600}.interval-display-section{margin-top:15px;padding-top:15px}.interval-display-section label{color:#2d3748;font-weight:600}.interval-line{background:#333;border-radius:2px;height:3px;pointer-events:none;position:absolute;z-index:10}:root{--d2-color:#8b0000;--m2-color:#dc143c;--M2-color:#ff6b6b;--A2-color:#ffb3ba;--d3-color:#8b4513;--m3-color:#d94d2e;--M3-color:gold;--A3-color:#ffe4b5;--d4-color:#1b5e20;--P4-color:#4caf50;--A4-color:#81c784;--d5-color:#ae1ae9;--P5-color:#0f9bf2;--A5-color:#c5ff07;--d6-color:#0d47a1;--m6-color:#1565c0;--M6-color:#1976d2;--A6-color:#42a5f5;--d7-color:#ce1785;--m7-color:#7b1fa2;--M7-color:#ff00d0;--A7-color:#e91e63}.interval-line[data-interval=d2]{background:var(--d2-color)}.interval-line[data-interval=m2]{background:var(--m2-color)}.interval-line[data-interval=M2]{background:var(--M2-color)}.interval-line[data-interval=A2]{background:var(--A2-color)}.interval-line[data-interval=d3]{background:var(--d3-color)}.interval-line[data-interval=m3]{background:var(--m3-color)}.interval-line[data-interval=M3]{background:var(--M3-color)}.interval-line[data-interval=A3]{background:var(--A3-color)}.interval-line[data-interval=d4]{background:var(--d4-color)}.interval-line[data-interval=P4]{background:var(--P4-color)}.interval-line[data-interval=A4]{background:var(--A4-color)}.interval-line[data-interval=d5]{background:var(--d5-color)}.interval-line[data-interval=P5]{background:var(--P5-color)}.interval-line[data-interval=A5]{background:var(--A5-color)}.interval-line[data-interval=d6]{background:var(--d6-color)}.interval-line[data-interval=m6]{background:var(--m6-color)}.interval-line[data-interval=M6]{background:var(--M6-color)}.interval-line[data-interval=A6]{background:var(--A6-color)}.interval-line[data-interval=d7]{background:var(--d7-color)}.interval-line[data-interval=m7]{background:var(--m7-color)}.interval-line[data-interval=M7]{background:var(--M7-color)}.interval-line[data-interval=A7]{background:var(--A7-color)}.interval-label{align-items:center;background:hsla(0,0%,100%,.95);border:1px solid rgba(0,0,0,.1);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.3);color:#333;display:flex;font-size:12px;font-weight:700;gap:4px;padding:2px 6px;pointer-events:none;position:absolute;white-space:nowrap;z-index:9999!important}.interval-direction-triangle{color:#333;display:inline-block;font-size:10px;line-height:1}.interval-checkbox-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:6px;padding:4px 8px;transition:background-color .2s ease;user-select:none}.interval-checkbox-label:hover{background-color:rgba(66,153,225,.1)}.interval-checkbox,.interval-step-checkbox,.interval-type-checkbox{cursor:pointer;margin:0}.checkbox-text{color:#4a5568;font-size:13px;font-weight:500}.interval-checkbox-label input:checked+.checkbox-text{color:#2b6cb0;font-weight:600}.interval-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:10px}.interval-group{background:rgba(237,242,247,.5);border:1px solid #e2e8f0;border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:12px}.interval-group-label{color:#4a5568;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:4px;text-transform:uppercase}.interval-step-group{margin-bottom:15px}.interval-step-label{letter-spacing:.5px;margin-bottom:8px;padding-left:2px;text-transform:uppercase}.interval-btn,.interval-step-label{color:#4a5568;font-size:12px;font-weight:600}.interval-btn{background:#fff;border:2px solid #cbd5e0;border-radius:8px;cursor:pointer;margin:2px;min-width:40px;padding:8px 12px;transition:all .3s ease}.interval-btn:hover{background:#edf2f7;box-shadow:0 2px 8px rgba(0,0,0,.1);transform:translateY(-1px)}.interval-btn.active{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.interval-btn.active[data-interval=d2]{background:var(--d2-color);border-color:var(--d2-color);color:#fff}.interval-btn.active[data-interval=m2]{background:var(--m2-color);border-color:var(--m2-color);color:#fff}.interval-btn.active[data-interval=M2]{background:var(--M2-color);border-color:var(--M2-color);color:#fff}.interval-btn.active[data-interval=A2]{background:var(--A2-color);border-color:var(--A2-color);color:#8b0000}.interval-btn.active[data-interval=d3]{background:var(--d3-color);border-color:var(--d3-color);color:#fff}.interval-btn.active[data-interval=m3]{background:var(--m3-color);border-color:var(--m3-color);color:#fff}.interval-btn.active[data-interval=M3]{background:var(--M3-color);border-color:var(--M3-color);color:#8b4513}.interval-btn.active[data-interval=A3]{background:var(--A3-color);border-color:var(--A3-color);color:#8b4513}.interval-btn.active[data-interval=d4]{background:var(--d4-color);border-color:var(--d4-color);color:#fff}.interval-btn.active[data-interval=P4]{background:var(--P4-color);border-color:var(--P4-color);color:#fff}.interval-btn.active[data-interval=A4]{background:var(--A4-color);border-color:var(--A4-color);color:#fff}.interval-btn.active[data-interval=d5]{background:var(--d5-color);border-color:var(--d5-color);color:#fff}.interval-btn.active[data-interval=P5]{background:var(--P5-color);border-color:var(--P5-color);color:#fff}.interval-btn.active[data-interval=A5]{background:var(--A5-color);border-color:var(--A5-color);color:#fff}.interval-btn.active[data-interval=d6]{background:var(--d6-color);border-color:var(--d6-color);color:#fff}.interval-btn.active[data-interval=m6]{background:var(--m6-color);border-color:var(--m6-color);color:#fff}.interval-btn.active[data-interval=M6]{background:var(--M6-color);border-color:var(--M6-color);color:#fff}.interval-btn.active[data-interval=A6]{background:var(--A6-color);border-color:var(--A6-color);color:#fff}.interval-btn.active[data-interval=d7]{background:var(--d7-color);border-color:var(--d7-color);color:#fff}.interval-btn.active[data-interval=m7]{background:var(--m7-color);border-color:var(--m7-color);color:#fff}.interval-btn.active[data-interval=M7]{background:var(--M7-color);border-color:var(--M7-color);color:#fff}.interval-btn.active[data-interval=A7]{background:var(--A7-color);border-color:var(--A7-color);color:#fff}.interval-btn.active:hover{filter:brightness(.8)}.chord-section{margin-bottom:15px}.chord-section-title{color:#718096;font-size:12px;font-weight:600;letter-spacing:.5px;margin-bottom:8px;padding-left:2px;text-transform:uppercase}.audio-prompt-overlay{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border:2px solid #cbd5e0;border-radius:12px;box-shadow:0 8px 25px rgba(0,0,0,.15);color:#4a5568;font-size:16px;font-weight:600;left:50%;max-width:400px;opacity:0;padding:20px 30px;pointer-events:none;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease;z-index:10}.audio-prompt-overlay.show{opacity:1}.audio-prompt-overlay.enharmonic-warning{background:hsla(0,0%,100%,0);font-size:12px;line-height:1.4;padding:15px 20px}.audio-prompt-overlay.enharmonic-warning .warning-icon{font-size:24px;margin-bottom:8px}.audio-prompt-overlay.enharmonic-warning .warning-text{color:#4a5568;font-weight:600}.degree-slider-container{background:rgba(237,242,247,.5);border-radius:8px;margin-top:10px;padding:4px}.degree-slider{height:30px;margin-bottom:1px;width:100%}.degree-marker,.degree-slider{align-items:center;display:flex;position:relative}.degree-marker{background:#e2e8f0;border-radius:3px;color:#4a5568;flex:1;font-size:10px;font-weight:700;height:20px;justify-content:center;margin:0 2px;transition:all .3s ease}.degree-marker.available{background:#1e3448;box-shadow:0 2px 4px rgba(66,153,225,.3);color:#fff}.degree-marker[style*="font-weight: bold"]{background:#3182ce!important;box-shadow:0 2px 8px rgba(72,187,120,.4)!important;color:#fff!important}.degree-slider-label{color:#718096;font-size:11px;font-weight:500;text-align:center}#available-degrees-text{color:#1c1c1c;font-weight:600}.voicing-degree-btn.unavailable{background:#f7fafc!important;border-color:#e2e8f0!important;color:#a0aec0!important;opacity:.8!important}.voicing-degree-btn.unavailable:hover{background:#f7fafc!important;box-shadow:none!important;transform:none!important}.voicing-reference-root{margin-top:10px}.voicing-reference-root-buttons{align-items:center;display:flex;gap:4px;justify-content:center;padding-bottom:6px;padding-top:6px}.voicing-reference-root-btn{align-items:center;background:#fff;border:1px solid #cbd5e0;border-radius:15px;color:#4a5568;cursor:pointer;display:flex;flex-grow:0;flex-shrink:0;font-size:10px;font-weight:600;height:30px;justify-content:center;transition:all .3s ease;width:30px}.voicing-reference-root-btn:hover{background:#edf2f764;box-shadow:0 1px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.voicing-reference-root-btn.active{background:#3182ceb9;border-color:#2b6cb0;box-shadow:0 1px 4px rgba(66,153,225,.3);color:#fff;transform:scale(1.05)}.voicing-intervals{background:rgba(237,242,247,.3);border:1px solid #e2e8f0;border-radius:4px;color:#718096;font-size:12px;font-weight:500;margin-top:4px;padding:4px 10px}.voicing-section-header{align-items:center;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:0;padding:12px 16px;position:relative;transition:all .2s ease}.voicing-section-header:hover{background:#e9ecef;background:linear-gradient(145deg,#edf2f7,#e2e8f0);border-color:#cbd5e0;box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-1px)}.voicing-section-header label{color:#2d3748;font-size:16px;font-weight:600;margin:0}.voicing-expand-btn{align-items:center;background:#aaa;border:none;border-radius:6px;color:#161616;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:24px;justify-content:center;margin-left:10px;padding:0;transition:all .2s ease;width:24px}.voicing-expand-btn:hover{background:#5a6268;transform:scale(1.05)}.expand-icon{color:#fff;font-size:12px;font-weight:700;line-height:1;margin:0;padding:0;transition:transform .2s ease}.voicing-expand-btn.collapsed .expand-icon{transform:rotate(-90deg)}.voicing-expandable-content{background:hsla(0,0%,100%,.95);border:2px solid #e2e8f0;border-radius:0 0 8px 8px;border-top:none;margin-top:0;overflow:hidden;padding:16px;transition:all .3s ease}.voicing-expandable-content.collapsed{border:none;margin:0;max-height:0;padding:0 16px}.voicing-intervals{align-items:center;background:rgba(66,153,225,.1);border:1px solid rgba(66,153,225,.3);border-radius:6px;color:#2b6cb0;display:flex;flex:1;font-size:13px;font-weight:600;justify-content:center;margin:0 15px;min-height:20px;padding:6px 12px;text-align:center}.voicing-input-section{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}.voicing-input-section .button-group{margin:0;padding:0}.voicing-input-section label{margin:0}.chord-btn.semi-match{background:linear-gradient(145deg,#fff,#f7fafc)!important;border:3px solid #f6ad55!important;box-shadow:0 0 0 2px rgba(246,173,85,.3)!important;color:#4a5568!important}.chord-btn.semi-match:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0)!important;box-shadow:0 4px 12px rgba(0,0,0,.15),0 0 0 2px rgba(246,173,85,.4)!important;transform:translateY(-2px)}.chord-btn.semi-match.active{background:linear-gradient(145deg,#4299e1,#3182ce)!important;border-color:#2b6cb0!important;box-shadow:0 0 0 2px rgba(246,173,85,.5)!important;color:#fff!important}.chord-btn.semi-match.active:hover{background:linear-gradient(145deg,#3182ce,#2c5aa0)!important;box-shadow:0 0 0 2px rgba(246,173,85,.6)!important}.interval-section-header{align-items:center;background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:0;padding:12px 16px;position:relative;transition:all .2s ease}.interval-section-header:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0);border-color:#cbd5e0;box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-1px)}.interval-section-header label{color:#2d3748;font-size:16px;font-weight:600;margin:0}.interval-expand-btn{align-items:center;background:#aaa;border:none;border-radius:6px;color:#161616;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:24px;justify-content:center;margin:0;padding:0;transition:all .2s ease;width:24px}.interval-expand-btn:hover{background:#5a6268;transform:scale(1.05)}.interval-expand-btn.collapsed .expand-icon{transform:none}.interval-expandable-content{background:hsla(0,0%,100%,.95);margin-top:0;max-height:0;overflow:hidden;padding:16px;transition:max-height .3s ease,padding .3s ease,border .3s ease}.interval-expandable-content.collapsed{border:none!important;margin:0;max-height:0!important;padding:0 16px!important}.voicing-chord-info{color:#718096;font-size:12px;font-style:italic;padding-top:6px}.voicing-header-buttons{align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;display:flex;gap:8px;padding:8px 12px}.voicing-clear-btn{align-items:center;background:#b9bcbf;border:none;border-radius:4px;cursor:pointer;display:flex;flex-shrink:0;height:18px!important;justify-content:center;margin:0;max-height:18px!important;max-width:18px!important;min-height:18px!important;min-width:18px!important;padding:0;transition:all .2s ease;width:18px!important}.voicing-clear-btn:hover{background:#5a6268;box-shadow:none;transform:none}.clear-icon{color:#fff;font-size:8px;font-weight:700;line-height:1;margin:0;padding:0}#circle-title{position:relative}#arrangement-type{transition:all .3s ease}.arrangement-changing{opacity:.5;text-decoration:line-through}.arrangement-new{opacity:0;transform:translateY(-10px)}.arrangement-visible{opacity:1;transform:translateY(0)}.voicing-backspace-btn{align-items:center;background:#b9bcbf;border:none;border-radius:4px;cursor:pointer;display:flex;flex-shrink:0;height:18px!important;justify-content:center;margin:0;max-height:18px!important;max-width:18px!important;min-height:18px!important;min-width:18px!important;padding:0;transition:all .2s ease;width:18px!important}.voicing-backspace-btn:hover{background:#5a6268;transform:scale(1.05)}.enharmonic-warning{font-size:12px;left:50%;line-height:1.4;max-width:300px;pointer-events:none;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%);z-index:1000}.enharmonic-warning .warning-icon{font-size:24px;margin-bottom:8px}.enharmonic-warning .warning-text{color:#4a5568;font-weight:600}.scale-display-section{margin-bottom:15px}.scale-section-header{align-items:center;background:#f8f9fa;border:2px solid #e2e8f0;border-radius:8px 8px 0 0;cursor:pointer;display:flex;justify-content:space-between;margin:0;padding:12px 16px}.scale-section-header label{font-size:16px;font-weight:600;margin:0}.scale-expand-btn{align-items:center;background:#aaa;border:none;border-radius:6px;color:#161616;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:24px;justify-content:center;margin:0;padding:0;transition:all .2s ease;width:24px}.scale-expand-btn:hover{background:hsla(0,0%,100%,.3);transform:scale(1.05)}.scale-expand-btn.collapsed .expand-icon{transform:rotate(-90deg)}.scale-expandable-content{background:hsla(0,0%,100%,.95);border:2px solid #e2e8f0;border-radius:0 0 8px 8px;border-top:none;margin-top:0;max-height:0;overflow:hidden;padding:16px;transition:max-height .3s ease,padding .3s ease,border .3s ease}.scale-expandable-content.collapsed{border:none!important;margin:0;max-height:0!important;padding:0!important}.welcome-message-subtitle{color:#718096;font-size:12px;font-style:italic;margin-bottom:10px;text-align:center}.voicing-reference-root-reorder-btn{border:transparent!important;border-radius:0!important;height:20px;padding:0;width:4px}.voicing-reference-root-reorder-btn:hover{background:#edf2f7;box-shadow:0 1px 4px rgba(0,0,0,.1);color:#4a5568;transform:translateY(-1px)}.voicing-reference-root-reorder-btn:active{transform:scale(.95)}.lowest-degree-btn{padding:6px 5px}.chord-name-display{user-select:all}.enharmonic-guide{background:#f7fafc;display:grid;gap:1px;grid-template-columns:repeat(72,1fr);min-height:40px;min-width:1200px;overflow-x:auto;overflow-y:hidden;padding:4px 0;scrollbar-color:#cbd5e0 #f7fafc;scrollbar-width:thin;width:100%}.enharmonic-column{align-items:center;display:flex;flex-direction:column;gap:1px;justify-content:flex-start;min-height:30px;min-width:0}.enharmonic-note{align-items:center;border:1px solid rgba(0,0,0,.1);border-radius:2px;display:flex;font-size:8px;font-weight:600;justify-content:center;line-height:1;min-height:12px;overflow:hidden;padding:1px 2px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:8px}.enharmonic-note.enharmonic-placeholder{background:transparent;border:none;min-height:10px}.enharmonic-note.c-note{background:#ffb3ba;color:#8b0000}.enharmonic-note.d-note{background:#ffd9b3;color:#8b4513}.enharmonic-note.e-note{background:#ffffb3;color:#8b8b00}.enharmonic-note.f-note{background:#b3ffb3;color:#006400}.enharmonic-note.g-note{background:#b3ffff;color:#066}.enharmonic-note.a-note{background:#b3b3ff;color:navy}.enharmonic-note.b-note{background:#ffb3ff;color:purple}.visual-keyboard{background:#333;border-radius:8px;flex-direction:column;font-family:monospace;margin:0 auto;padding:15px;transform:scale(.8);user-select:none;width:500px}.keyboard-row,.visual-keyboard{display:flex;gap:2px}.key{align-items:center;background:#f0f0f0;border:1px solid #ccc;border-radius:3px;cursor:pointer;display:flex;font-size:10px;height:15px;justify-content:center;padding:8px;position:relative;text-align:center;transition:all .1s ease;width:30px}.key:after{background:rgba(0,0,0,.8);border-radius:2px;bottom:-18px;color:#666;color:#fff;content:attr(title);font-size:8px;left:50%;opacity:0;padding:2px 4px;pointer-events:none;position:absolute;transform:translateX(-50%);transition:opacity .2s;white-space:nowrap;z-index:10}.key:hover:after{opacity:1}.white-key-b{background:#fff;border-color:#999;color:#333}.black-key{background:#333;border-color:#666;color:#fff}.gray-key{background:#bdbdbd;border-color:#ccc;color:#545454}.space{width:120px}.tab{width:45px}.caps{width:65px}.quote{width:45px}.enter{width:65px}.shift-left{width:15px}.shift-right{width:80px}.backspace{width:95px}.alt,.ctrl{width:40px}.win{width:30px}.key:hover{box-shadow:0 2px 4px rgba(0,0,0,.2);transform:translateY(-1px)}.key.pressed{box-shadow:inset 0 2px 4px rgba(0,0,0,.3);transform:translateY(2px)}.key.pressed.white-key{background:#e0e0e0}.key.pressed.black-key{background:#555}.key.hover{box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.keyboard-shift-controls{display:flex;flex-direction:column;gap:30px;position:absolute;right:50px;top:50%;transform:translateY(-50%);z-index:10}.keyboard-shift-section{display:flex;gap:4px;margin:0}.keyboard-shift-section label{display:none}.keyboard-shift-btn{align-items:center;background:hsla(0,0%,100%,.9);border:1px solid #cbd5e0;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.1);color:#4a5568;cursor:pointer;display:flex;font-size:9px;font-weight:600;height:20px;justify-content:center;padding:0;transition:all .2s ease;width:20px}.keyboard-shift-btn:hover{background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.15);transform:scale(1.1)}.keyboard-shift-btn:active{transform:scale(.95)}.keyboard-container{display:inline-block;position:relative;width:100%}#keyboard-display{width:100%}@media (max-width:1200px){.main-content{flex:1}}@media (max-width:768px){.main-container{align-items:center;display:flex;flex-direction:column}.left-panel,.right-panel{height:fit-content;max-width:none;width:100%}.main-content{flex:none;order:-1;transform:scale(.8);transform-origin:center top;width:100%}.fretboard-container{margin-left:-85px!important;transform:scale(.8)}.container{width:100%;width:420px}.piano-keyboard{width:350px}.keyboard-display{width:250px}.visual-keyboard{transform:scale(.7) translateX(-120px)}.keyboard-shift-controls{left:370px;top:100px}.mobile-only-message{display:block!important;left:160px;position:absolute;top:0}.dark-mode .circle-svg,.light-mode .circle-svg{box-shadow:unset!important}#clear-voicing,#voicing-sound-toggle-2{left:unset!important}#clear-voicing{right:0!important}}.light-dark-mode-btn{align-items:center;background:hsla(0,0%,100%,.9);border:2px solid #cbd5e0;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer;display:flex;height:50px;justify-content:center;transition:all .3s ease;width:50px}.light-dark-mode-btn:hover{background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2);transform:scale(1.1)}.light-dark-mode-btn svg{height:24px;transition:all .3s ease;width:24px}.light-dark-mode-btn .moon-icon{display:block}.light-dark-mode-btn .sun-icon{display:none}body.dark-mode .light-dark-mode-btn{background:rgba(30,41,59,.9);border-color:#475569}body.dark-mode .light-dark-mode-btn:hover{background:#1e293b}body.light-mode .container,body.light-mode .panel{background:hsla(0,0%,100%,.95)}body.light-mode .walkthrough-section{background:linear-gradient(145deg,#f8f9fa,#e9ecef);border-color:#dee2e6}body.light-mode .walkthrough-content{background:#fff;color:#4a5568}body.light-mode .walkthrough-step-title{color:#4a5568}body.dark-mode .panel{background:#121f36}body.dark-mode .container{background:rgba(30,41,59,.95)}body.dark-mode .walkthrough-section{background:linear-gradient(145deg,#1e293b,#334155);border-color:#475569}body.dark-mode .walkthrough-content{background:#1e293b;color:#e2e8f0}body.dark-mode .walkthrough-step-title{color:#e2e8f0}body.dark-mode .light-dark-mode-btn .moon-icon{display:none}body.dark-mode .light-dark-mode-btn .sun-icon,body.light-mode .light-dark-mode-btn .moon-icon{display:block}body.light-mode .light-dark-mode-btn .sun-icon{display:none}body.dark-mode .voicing-reference-root-btn.note-selected{border:2px solid gold!important}body.dark-mode button{background:#2b2b7559;border:1px solid #cbd5e0;color:#c4c4c4;font-weight:200;margin-right:1px}body.dark-mode button:hover{background:#3a3a8a66;box-shadow:0 4px 12px rgba(0,0,0,.3);color:#e2e8f0;transform:translateY(-2px)}body.dark-mode button.active{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#2b6cb0;color:#fff}body.dark-mode #circle-title{color:#e2e8f0}body.light-mode #circle-title{color:#4a5568}body.dark-mode .button-group label{color:#a3a5a8}body.light-mode .button-group label{color:#4a5568}body.dark-mode .chord-section-title{color:#64758f;font-weight:200}body.dark-mode .chord-info{color:ivory;font-weight:200}body.dark-mode .scale-display-section{background:#1e293b;border-color:#475569}body.dark-mode .scale-display-section .scale-section-header{background:#334155;border-color:#475569;color:#e2e8f0}body.dark-mode .scale-display-section .scale-expandable-content{background:#1e293b;border-color:#475569;color:#e2e8f0}body.light-mode .scale-display-section{background:#f8f9fa;border-color:#dee2e6}body.light-mode .scale-display-section .scale-section-header{background:#f8f9fa;border-color:#dee2e6;color:#4a5568}body.light-mode .scale-display-section .scale-expandable-content{background:#fff;border-color:#dee2e6;color:#4a5568}body.dark-mode .button-group[style*="background: rgba(255, 255, 255, 0.95)"], body.dark-mode .voicing-actions{background:#1e293b!important;border-color:#475569!important;color:#e2e8f0}body.dark-mode .scale-btn{background:#2b2b7559!important;border-color:#cbd5e0!important;color:#c4c4c4!important;font-weight:200!important}body.dark-mode .scale-btn:hover{background:#3a3a8a66!important;color:#e2e8f0!important}body.dark-mode .scale-btn.active{background:linear-gradient(145deg,#4299e1,#3182ce)!important;border-color:#2b6cb0!important;color:#fff!important}body.dark-mode .tooltip-icon{background:#475569!important;color:#e2e8f0!important}body.dark-mode .tooltip-icon:hover{background:#64748b!important}body.dark-mode .interval-section-header{background:#334155!important;border-color:#475569!important;color:#f1f5f9!important}body.dark-mode .interval-expandable-content{background:#1e293b!important;border-color:#475569!important;color:#f1f5f9!important}body.dark-mode .interval-expandable-content .checkbox-text,body.dark-mode .interval-expandable-content label,body.dark-mode .interval-section-header label,body.dark-mode .interval-step-label{color:#f1f5f9!important}body.light-mode .interval-section-header{background:#f8f9fa;border-color:#dee2e6;color:#4a5568}body.light-mode .interval-expandable-content{background:#fff;border-color:#dee2e6;color:#4a5568}body.dark-mode .warning-text{color:#e2e8f0!important;text-shadow:1px 2px 5px #000}body.dark-mode .enharmonic-guide,body.dark-mode .piano-keyboard{background:#3a3a3a!important}.note-selected{stroke:#5d617b!important;stroke-width:2px!important}.voicing-reference-root-btn.note-selected{border:2px solid #5d617b!important;outline:none!important}body.dark-mode .welcome-message{background:rgba(0,0,0,.2)!important;box-shadow:unset!important}body.dark-mode .note-selected{stroke:gold!important;stroke-width:3px!important}body.dark-mode .walkthrough-step-text{color:#acacac!important}.voicing-reference-root-item{align-items:center;display:flex;flex-direction:column;gap:2px}.voicing-reference-root-label{color:#000;font-size:8px;font-weight:500;line-height:1;min-height:12px;order:2;padding-top:4px;text-align:center}body.dark-mode .voicing-reference-root-label{color:#ccc}.volume-control{margin-bottom:15px}.volume-slider-container{align-items:center;display:flex;gap:10px;margin-top:8px}.volume-slider{-webkit-appearance:none;appearance:none;background:#e2e8f0;border-radius:3px;flex:1;height:6px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#3182ce;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:18px;transition:all .2s ease;width:18px}.volume-slider::-webkit-slider-thumb:hover{background:#2c5aa0;transform:scale(1.1)}.volume-slider::-moz-range-thumb{background:#3182ce;border:none;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:18px;transition:all .2s ease;width:18px}.volume-slider::-moz-range-thumb:hover{background:#2c5aa0;transform:scale(1.1)}.volume-display{background:rgba(237,242,247,.8);border-radius:4px;color:#4a5568;font-size:12px;font-weight:600;min-width:40px;padding:4px 8px;text-align:center}.fretboard-container{border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);margin:30px auto;width:600px}.fretboard-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.fretboard-header h3{color:#2d3748;font-size:18px;font-weight:600;margin:0}.fretboard-toggle-btn{background:linear-gradient(145deg,#4299e1,#3182ce);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;transition:all .3s ease}.fretboard-toggle-btn:hover{background:linear-gradient(145deg,#3182ce,#2b6cb0);box-shadow:0 4px 8px rgba(49,130,206,.3);transform:translateY(-1px)}.fretboard{background:#654b25;border-radius:8px;box-shadow:inset 0 0 5px 0 rgba(0,0,0,.75);height:235px;overflow-x:auto;position:relative;width:100%}.open-notes{left:-35px;list-style:none;margin:0;padding:0;position:absolute;top:3px}.open-notes li{color:#fff;font-size:18px;font-weight:700;margin-bottom:20px}.open-notes li.active{color:#fa990f}.fretboard-string{background:#c8bb93;border-bottom:2px solid #958963;box-sizing:border-box;height:1px;left:50px;position:absolute;width:100%}.fretboard-strings{top:10px}.fretboard-string:first-child{height:6px;top:10px}.fretboard-string:nth-child(2){height:5px;top:48px}.fretboard-string:nth-child(3){height:4px;top:86px}.fretboard-string:nth-child(4){height:3px;top:124px}.fretboard-string:nth-child(5){height:2px;top:162px}.fretboard-string:nth-child(6){height:1px;top:200px}.fretboard-fret{background:#d7d6d6;border-right:2px solid #686868;height:86%;position:absolute;top:7px;width:3px}.fretboard-fret.fret-0{background:#654b25;border-right:none;position:absolute;width:0}.fretboard-fret.fret-1{left:50px}.fretboard-fret.fret-2{left:100px}.fretboard-fret.fret-3{left:150px}.fretboard-fret.fret-4{left:200px}.fretboard-fret.fret-5{left:250px}.fretboard-fret.fret-6{left:300px}.fretboard-fret.fret-7{left:350px}.fretboard-fret.fret-8{left:400px}.fretboard-fret.fret-9{left:450px}.fretboard-fret.fret-10{left:500px}.fretboard-fret.fret-11{left:550px}.fretboard-fret.fret-12{left:600px}.fretboard-fret.fret-12:before,.fretboard-fret.fret-3:before,.fretboard-fret.fret-5:before,.fretboard-fret.fret-7:before,.fretboard-fret.fret-9:before{background:#593c0d;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.5);content:"";height:6px;left:28px;position:absolute;top:50%;transform:translate(-50%,-50%);width:6px}.fretboard-fret.fret-12:before{height:8px;width:8px}.fretboard-note{align-items:center;background:linear-gradient(145deg,#f7fafc,#e2e8f0);border:1px solid #cbd5e0;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#4a5568;cursor:pointer;display:flex;font-size:10px;font-weight:600;height:17px;justify-content:center;position:absolute;transition:all .3s ease;width:17px;z-index:10}.fretboard-note:hover{background:linear-gradient(145deg,#edf2f7,#e2e8f0);box-shadow:0 4px 8px rgba(0,0,0,.15);transform:scale(1.1)}.fretboard-hand-toggle{margin-top:10px}.fretboard-strings.fretboard-right-mode .fretboard-string{left:unset;right:0}.capo-button{align-items:center;background:#333;border:1px solid #555;border-radius:3px;bottom:-25px;color:#fff;cursor:pointer;display:flex;font-size:10px;height:15px;justify-content:center;left:27px;position:absolute;text-align:center;transform:translateX(-50%);transition:all .2s ease;width:20px}.capo-button:hover{background:#555}.capo-button.active{background:#35587e}#show-fretboard,#show-piano-keyboard{align-items:center;background:#f8f9fa;border:1px solid #ddd;border-radius:30px;color:#333;cursor:pointer;display:flex;font-size:18px;height:40px;justify-content:center;margin:0 4px;padding:24px;transition:all .2s ease;width:40px}#show-fretboard:hover,#show-piano-keyboard:hover{background:#e9ecef;transform:translateY(-1px)}#show-fretboard.active,#show-piano-keyboard.active{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#3182ce;color:#fff}.dark-mode #show-fretboard,.dark-mode #show-piano-keyboard{background:rgba(30,41,59,.9);border-color:#555;color:#fff}.dark-mode #show-fretboard:hover,.dark-mode #show-piano-keyboard:hover{background:#404040}.dark-mode #show-fretboard.active,.dark-mode #show-piano-keyboard.active{background:linear-gradient(145deg,#4299e1,#3182ce);border-color:#0d6efd;color:#fff}.dark-mode .voicing-accidental-btn{color:#000!important}.light-mode .fretboard{background:#986923!important}.dark-mode .circle-svg{box-shadow:0 0 7px 0 rgba(0,0,0,.1)}.light-mode .circle-svg{box-shadow:0 0 6px 0 rgba(0,0,0,.03)}.light-dark-mode-toggle{align-items:center;display:flex;gap:8px}.reset-settings-btn{background:crimson}