.circle-of-fifths{display:flex;justify-content:center;align-items:center;padding:.75rem;background-color:#1a1a1a;border-radius:8px;width:auto;box-sizing:border-box}.circle-container{position:relative;width:220px;height:220px;display:flex;justify-content:center;align-items:center}.circle-section{position:absolute;background-color:#2a2a2a;border:2px solid #444;border-radius:4px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s ease;transform-origin:center}.major-key{width:40px;height:40px;z-index:2}.minor-key{width:30px;height:30px;background-color:#333;border-color:#555;z-index:1}.circle-section:hover{background-color:#3a3a3a;border-color:#666;transform:scale(1.1);z-index:3}.circle-section.selected{background-color:#4a4a4a;border-color:#888;transform:scale(1.1);box-shadow:0 0 10px #ffffff4d;z-index:4}.minor-key:hover{background-color:#444}.minor-key.selected{background-color:#555}.section-content{color:#fff;font-weight:700;text-align:center;-webkit-user-select:none;user-select:none}.major-key .section-content{font-size:1rem}.minor-key .section-content{font-size:.8rem}@media (prefers-color-scheme: light){.circle-of-fifths{background-color:#f5f5f5}.circle-section{background-color:#e0e0e0;border-color:#ccc}.minor-key{background-color:#d0d0d0;border-color:#bbb}.circle-section:hover{background-color:#f0f0f0;border-color:#999}.circle-section.selected{background-color:#d0d0f0;border-color:#666;box-shadow:0 0 10px #0003}.minor-key:hover{background-color:#e0e0e0}.minor-key.selected{background-color:#c0c0e0}.section-content{color:#333}}@media (max-width: 768px){.circle-of-fifths{padding:.5rem;margin:0 auto}.circle-container{width:210px;height:210px}.major-key{width:38px;height:38px}.minor-key{width:28px;height:28px}}@media (max-width: 480px){.circle-container{width:180px;height:180px}.major-key{width:32px;height:32px}.minor-key{width:24px;height:24px}.major-key .section-content{font-size:.9rem}.minor-key .section-content{font-size:.7rem}.circle-of-fifths{padding:.3rem}}.feedback-container{max-width:600px;margin:0 auto;padding:40px 20px;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background-color:#1a1a1a}.feedback-header{text-align:center;margin-bottom:40px}.feedback-header h1{font-size:2.5rem;color:#fff;margin-bottom:10px;font-weight:700}.feedback-header p{color:#b0b0b0;font-size:1.1rem;line-height:1.6}.feedback-form{background:#2d2d2d;padding:40px;border-radius:12px;box-shadow:0 4px 6px #0000004d}.form-group{margin-bottom:24px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#fff;font-size:.95rem}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:2px solid #4a4a4a;border-radius:8px;font-size:1rem;transition:border-color .3s ease,box-shadow .3s ease;box-sizing:border-box;background-color:#3a3a3a;color:#fff}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#4da6ff;box-shadow:0 0 0 3px #4da6ff4d}.form-group input.error,.form-group textarea.error{border-color:#ff6b6b;box-shadow:0 0 0 3px #ff6b6b4d}.form-group textarea{resize:vertical;min-height:120px;font-family:inherit;line-height:1.5}.error-message{color:#ff6b6b;font-size:.875rem;margin-top:6px;display:block}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:32px;padding-top:24px;border-top:1px solid #4a4a4a}.btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:120px}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:#4da6ff;color:#fff}.btn-primary:hover:not(:disabled){background-color:#39f;transform:translateY(-1px);box-shadow:0 4px 8px #4da6ff80}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#545b62;transform:translateY(-1px);box-shadow:0 4px 8px #6c757d80}.feedback-success{text-align:center;background:#2d2d2d;padding:60px 40px;border-radius:12px;box-shadow:0 4px 6px #0000004d}.feedback-success h2{color:#4caf50;font-size:2rem;margin-bottom:16px;font-weight:700}.feedback-success p{color:#b0b0b0;font-size:1.1rem;line-height:1.6;margin-bottom:32px}@media (max-width: 768px){.feedback-container{padding:20px 16px}.feedback-form{padding:24px}.feedback-header h1{font-size:2rem}.form-actions{flex-direction:column}.btn{width:100%;margin-bottom:8px}.feedback-success{padding:40px 24px}.feedback-success h2{font-size:1.5rem}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;--accent-color: #646cff;--accent-color-rgb: 100, 108, 255;--text-color: rgba(255, 255, 255, .87);--border-color: #444;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#root{max-width:1280px;width:100%;margin:0 auto;padding:2rem;text-align:center;box-sizing:border-box}h1{font-size:3.2em;line-height:1.1}h2{font-size:1.8em;margin-bottom:1em}h3{font-size:1.2em;margin-top:0;margin-bottom:.5em}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.error{color:#ff6b6b;background-color:#ff6b6b1a;padding:1em;border-radius:8px;margin:1em 0}.midi-monitor{display:flex;flex-direction:column;gap:2rem;width:100%}.monitor-section{display:flex;gap:1.5rem}.device-list{text-align:left;padding:1.5em;background-color:#1a1a1a;border-radius:8px;width:100%;margin-top:1rem;box-sizing:border-box}.device-list ul{list-style:none;padding:0;margin:0}.device-list li{padding:.5em 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #333}.device-list li:last-child{border-bottom:none}.status{display:inline-block;padding:.2em .6em;border-radius:4px;font-size:.8em;margin-left:1em}.status.connected{background-color:#4caf50;color:#fff}.status.disconnected{background-color:#f44336;color:#fff}.chord-display{display:flex;flex-direction:row;gap:1rem;width:100%}.left-column{flex:1;min-width:0;display:flex;gap:1rem}.active-notes,.detected-chord{background-color:#2a2a2a;border-radius:4px;padding:.7em;min-height:80px;display:flex;flex-direction:column}.staff-notation-container{flex:1;min-width:0;background-color:#2a2a2a;border-radius:4px;display:flex;flex-direction:column}.active-notes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5em}.copy-button{font-size:.8em;padding:.2em .6em;background-color:#444;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.copy-button:hover{background-color:#666}@media (prefers-color-scheme: light){.copy-button{background-color:#ccc;color:#333}.copy-button:hover{background-color:#999}}.active-notes p{margin:auto 0;flex-grow:1;display:flex;align-items:center;justify-content:center;color:#aaa;font-style:italic}.active-notes h3{margin-top:0;margin-bottom:0}.detection-result{display:flex;flex-direction:column;align-items:center;margin-bottom:.5rem}.detection-tag{position:absolute;top:.7em;right:.7em;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:500;text-transform:uppercase}.detection-tag small{text-transform:none;font-weight:400;opacity:.8}.note-content,.chord-content{flex-grow:1;display:flex;flex-direction:column;justify-content:center}.chord-content{min-height:60px}.note-content .note-list,.note-content p{margin:0}.chord-content .chord-info{flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start}.chord-content p{margin:auto;flex-grow:1;display:flex;align-items:center}.detected-chord p{margin:auto 0;flex-grow:1;display:flex;align-items:center;justify-content:center;color:#aaa;font-style:italic;font-size:1em;text-align:center;padding:1em .5em}.detected-chord h3{margin-top:0;margin-bottom:.8em}.detected-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8em}.detected-header h3{margin:0}.note-list{display:flex;flex-wrap:wrap;gap:.5em}.note{display:inline-block;padding:.3em .6em;background-color:#444;border-radius:4px;font-family:monospace;font-weight:700}.note-midi{font-size:.8em;color:#aaa;font-weight:400}.chord{font-size:2em;font-weight:700;color:#90caf9;padding:.3em;background-color:#333;border-radius:4px;margin-bottom:.3em;text-align:center}.chord-category{display:inline-block;padding:.3em .6em;background-color:#444;border-radius:4px;color:#a5d6a7;font-size:.9em;font-weight:700;margin-bottom:.3em;text-align:center}.chord-info{display:flex;flex-direction:column;gap:1em;flex-grow:1}.chord-description{font-size:.95em;color:#e0e0e0;line-height:1.5;background-color:#ffffff0d;padding:1em;border-radius:4px;margin-top:.5em;flex-grow:1;overflow-y:auto;display:flex;align-items:center}.midi-messages{display:flex;flex-direction:column;text-align:left;background-color:#1a1a1a;border-radius:8px;padding:1em;flex-grow:1}.message-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.message-header h2{margin:0}.message-container{text-align:left;max-height:300px;overflow-y:auto;margin:0;padding:.5em;border:1px solid #444;border-radius:4px;background-color:#2a2a2a}.message{margin:.5em 0;padding:.5em;border-radius:4px;background-color:#333;font-family:monospace;display:grid;grid-template-columns:150px 1fr auto;gap:1em;align-items:center}.message-type{font-weight:700;color:#90caf9}.message-data{color:#a5d6a7;overflow-x:auto;white-space:nowrap}.message-device{color:#ffcc80;text-align:right}@media (max-width: 768px){.monitor-section{flex-direction:column}.message{padding:.5em .7em}.message-device{display:block;margin-top:.3em}.chord-display{flex-direction:column}.piano-keyboard{height:130px;padding:10px 0;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}.white-key{width:24px}.black-key{width:14px;margin-left:-7px;margin-right:-7px}.key-label{font-size:.5rem}#root{padding:1rem}h1{font-size:2.2em}h2{font-size:1.5em}.device-list{padding:1em}.staff-notation-container{margin-top:1rem;min-height:250px}.staff-notation{max-width:100%;overflow:auto}.staff-notation canvas,.staff-notation svg{max-width:100%}.midi-monitor,.monitor-section{gap:1rem}.instrument-toggle{flex-wrap:wrap;justify-content:center}.instrument-button{padding:.5em .8em;font-size:.9em}.clear-notes-container{flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:100%;margin:.8rem 0;padding:0 .5rem;box-sizing:border-box}.clear-notes-container .clear-button,.clear-notes-container .play-button,.clear-notes-container .share-button{padding:.5em .8em;font-size:.9em;flex:0 1 auto;min-width:40px;margin:0 .1rem}.octave-controls{flex-wrap:wrap;justify-content:center}.toggle-section{flex-wrap:wrap;justify-content:center;gap:.5rem}}@media (max-width: 480px){.piano-container,.guitar-container{padding:.7em;margin:.5rem 0}.instruments-container{margin:.5rem 0;padding:0;gap:.7rem}.piano-keyboard{height:100px;overflow-x:auto;padding:8px 0;max-width:100%;-webkit-overflow-scrolling:touch;min-height:100px;scroll-padding:10px}.piano-container{overflow:hidden;max-width:100%;max-width:100vw;overflow-x:hidden}.piano-octave{margin-right:0}.white-key{width:22px;min-width:22px}.black-key{width:12px;left:-6px;height:50px;min-height:40px}.key-label{font-size:7px}#root{padding:.75rem}.active-notes-header,.detected-header{flex-direction:column;align-items:flex-start}.copy-button{margin-top:.5em}.fretboard-wrapper{overflow-x:auto}.staff-notation-container{min-height:200px}.note-list{flex-wrap:wrap}.note{margin-bottom:.5rem}.chord-content{padding:.5rem}.active-notes,.detected-chord{min-height:60px;padding:.5em}.piano-container,.guitar-container{padding:.7em}.instrument-button{padding:.4em .6em;font-size:.8em}.clear-notes-container{gap:.4rem;margin:.6rem 0;padding:0 .3rem}.clear-notes-container .clear-button,.clear-notes-container .play-button,.clear-notes-container .share-button{padding:.4em .6em;font-size:.8em;min-width:36px}.keyboard-mapping{overflow-x:auto}.mapping-keys{flex-wrap:wrap;justify-content:center}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff;--accent-color: #646cff;--accent-color-rgb: 100, 108, 255;--text-color: #213547;--border-color: #ddd}button{background-color:#f9f9f9}.device-list,.midi-messages,.midi-chord{background-color:#f9f9f9;border:1px solid #ddd}.active-notes,.detected-chord{background-color:#e6e6e6}.message-container{background-color:#fafafa;border-color:#ddd}.message,.chord,.note{background-color:#eaeaea}.message-type,.chord{color:#1976d2}.message-data{color:#388e3c}.message-device{color:#e65100}.note-midi{color:#666}.chord-category{background-color:#e0e0e0;color:#2e7d32;border:1px solid rgba(0,0,0,.1)}.chord-description{color:#424242;background-color:#0000000d;border:1px solid rgba(0,0,0,.1)}.toggle-messages-button{color:#fff;background-color:#666}.toggle-messages-button.active,.toggle-messages-button:hover{background-color:#4a7eb5}.piano-container{background-color:#f0f0f0}.piano-key{border-color:#ccc}.black-key{background-color:#333}.piano-key.pressed{background-color:#2196f3;color:#fff}.black-key.pressed{background-color:#1976d2}.active-notes p,.detected-chord p{color:#666}.guitar-container{background-color:#f0f0f0}.fretboard-wrapper{background-color:#e0e0e0;box-shadow:0 5px 15px #0003}.guitar-string:before{background-color:#777}.fret{border-right-color:#999}.fret.open{border-right-color:#666}.fret:hover{background-color:#0000001a}.fret.pressed{background-color:#2196f333}.note-marker{background-color:#2196f3;box-shadow:0 2px 4px #0003}.note-name{color:#fff}.fret-marker{background-color:#777}.fret-number{color:#666}.instrument-button{color:#fff;background-color:#777}.instrument-button.active{background-color:#4a7eb5}.instrument-button:hover:not(.active){background-color:#888}.clear-notes-container .clear-button{color:#fff;background-color:#666}.clear-notes-container .clear-button:hover{background-color:#ef5350}}.toggle-section{margin:1rem 0;display:flex;justify-content:center}.toggle-messages-button{padding:.7em 1.5em;font-weight:600;color:#fff;background-color:#555;transition:background-color .3s ease;min-width:200px}.toggle-messages-button.active{background-color:#3a6ea5}.toggle-messages-button:hover,.mapping-toggle-button:hover{background-color:#555}.mapping-toggle-button[aria-pressed=true]{background-color:#90a4ae;color:#fff}.sound-toggle-button.enabled{background-color:#4caf50;color:#fff}.sound-toggle-button.disabled{background-color:#f44336;color:#fff}.sound-toggle-button.enabled:hover{background-color:#388e3c}.sound-toggle-button.disabled:hover{background-color:#d32f2f}.hold-toggle-button.enabled{background-color:#2196f3;color:#fff}.hold-toggle-button.disabled{background-color:#90a4ae;color:#333}.hold-toggle-button.enabled:hover{background-color:#1976d2}.hold-toggle-button.disabled:hover{background-color:#78909c}.sustain-indicator,.hold-indicator{background-color:#2196f3;color:#fff;padding:.5rem;border-radius:4px;margin-top:.5rem;text-align:center;font-weight:600;opacity:1}.keyboard-mapping{border-radius:8px;padding:1rem;margin-bottom:1rem}.mapping-guide{display:flex;flex-direction:column;gap:.8rem}.mapping-title{font-weight:700;font-size:1rem;margin-bottom:.3rem}.mapping-keys{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}.octave-controls{display:flex;gap:1rem;justify-content:center;margin-top:.5rem;padding-top:.5rem;border-top:1px solid #444}.key-map-item{display:flex;flex-direction:column;align-items:center;gap:.2rem}.key-cap{background-color:#3a3a3a;color:#fff;font-family:monospace;font-weight:700;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:4px;box-shadow:0 2px 2px #0003}.key-note{font-size:.8rem;color:#ddd}.sharp-key .key-cap{background-color:#607d8b}.key-control-label{position:absolute;top:5px;right:5px;font-size:.6rem;background-color:#0000004d;color:#fff;padding:2px 4px;border-radius:2px;opacity:.8}.black-key .key-control-label{background-color:#fff3}.piano-keyboard{display:flex;justify-content:flex-start;position:relative;height:180px;overflow-x:auto;padding:10px 0;background-color:#111;border-radius:8px;box-shadow:0 5px 15px #00000080;width:100%;min-width:0;-webkit-overflow-scrolling:touch;touch-action:pan-x;-webkit-user-select:none;user-select:none}.piano-octave{display:flex;position:relative;height:100%;margin-right:1px}.piano-octave:last-child{margin-right:0}.piano-key{position:relative;border:1px solid #555;box-sizing:border-box;padding:0;border-radius:0 0 4px 4px;display:flex;align-items:flex-end;justify-content:center;transition:all .05s ease-out;margin:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;will-change:transform,background-color}.white-key{background-color:#fff;width:32px;height:100%;color:#333;z-index:1;border-right-width:1px}.black-key{background-color:#222;width:18px;height:65%;margin-left:-9px;margin-right:-9px;z-index:2;color:#fff;box-shadow:0 0 3px #000c}.piano-key.pressed{background-color:#90caf9;box-shadow:inset 0 2px 5px #0000004d;color:#222}.black-key.pressed{background-color:#64b5f6}.key-label{font-size:.65rem;font-weight:700;padding-bottom:.4rem;pointer-events:none}.keyboard-shortcut{position:absolute;top:-25px;left:50%;transform:translate(-50%);font-size:.8rem;font-weight:700;background-color:#0009;color:#fff;padding:2px 6px;border-radius:4px;z-index:3;pointer-events:none}.black-key .keyboard-shortcut{background-color:#fffc;color:#222}.black-key .key-label{padding-bottom:.25rem}@media (max-width: 768px){.piano-keyboard{height:130px;padding:20px 0 10px;margin:0 auto;overflow-x:auto;-webkit-overflow-scrolling:touch}.white-key{width:24px}.black-key{width:14px;margin-left:-7px;margin-right:-7px}.key-label{font-size:.5rem}.keyboard-shortcut{font-size:.7rem;padding:1px 3px;top:-20px}}@media (prefers-color-scheme: light){.mapping-toggle-button{background-color:#ccc;color:#333}.mapping-toggle-button:hover{background-color:#bbb}.mapping-toggle-button[aria-pressed=true]{background-color:#90a4ae;color:#fff}.keyboard-mapping{background-color:#f0f0f0}.key-cap{background-color:#e0e0e0;color:#333;box-shadow:0 2px 2px #0000001a}.key-note{color:#555}.sharp-key .key-cap{background-color:#90a4ae;color:#fff}.octave-controls{border-top-color:#ddd}.key-control-label{background-color:#00000026;color:#333}.black-key .key-control-label{background-color:#ffffff80;color:#000}.keyboard-shortcut{background-color:#0003;color:#333}.black-key .keyboard-shortcut{background-color:#ffffffe6;color:#222}}.guitar-container{margin:1rem 0;padding:1rem;background-color:#1a1a1a;border-radius:8px;width:100%}.guitar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.guitar-header h2{margin:0}.guitar-header h3{margin:0;color:var(--accent-color)}.fretboard-wrapper{position:relative;width:100%;overflow-x:auto;padding:1rem 0;background-color:#111;border-radius:8px;box-shadow:0 5px 15px #00000080}.fretboard{display:flex;flex-direction:column;gap:1px;margin-top:15px;width:100%;overflow-x:auto}.guitar-string{display:flex;align-items:center;height:30px;position:relative;border-bottom:1px solid var(--border-color)}.guitar-string:before{content:"";position:absolute;top:50%;left:30px;right:0;height:1px;background-color:#a0a0a0;transform:translateY(-50%);z-index:1}.guitar-string:nth-child(1):before{height:1px}.guitar-string:nth-child(2):before{height:1.2px}.guitar-string:nth-child(3):before{height:1.4px}.guitar-string:nth-child(4):before{height:1.6px}.guitar-string:nth-child(5):before{height:1.8px}.guitar-string:nth-child(6):before{height:2px}.string-name{min-width:30px;font-size:.8rem;text-align:center;color:var(--text-color);font-weight:500;padding-right:5px}.fret{width:40px;height:30px;display:flex;justify-content:center;align-items:center;border-right:1px solid var(--border-color);cursor:pointer;position:relative}.fret.open{border-right:3px solid #555;background-color:#c8c8c81a}.fret:hover{background-color:#6464641a}.guitar-string:nth-child(1) .fret:nth-child(5):after,.guitar-string:nth-child(1) .fret:nth-child(7):after,.guitar-string:nth-child(1) .fret:nth-child(9):after,.guitar-string:nth-child(1) .fret:nth-child(11):after,.guitar-string:nth-child(1) .fret:nth-child(14):after{content:"";position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:10px;height:10px;background-color:#96969680;border-radius:50%;z-index:10}.guitar-string:nth-child(4) .fret:nth-child(14):after{content:"";position:absolute;bottom:-15px;left:50%;transform:translate(-50%);width:10px;height:10px;background-color:#96969680;border-radius:50%;z-index:10}.note-marker{width:25px;height:25px;border-radius:50%;background-color:var(--accent-color);display:flex;justify-content:center;align-items:center;color:#fff;font-size:.7rem;font-weight:700;z-index:5;box-shadow:0 2px 4px #0000004d}@media (prefers-color-scheme: light){.note-marker{color:#fff;box-shadow:0 2px 4px #0003}.fret.open{border-right:3px solid #777;background-color:#f0f0f080}.fret:hover{background-color:#c8c8c84d}}.fret-markers{display:flex;height:20px;margin-bottom:10px;position:relative;width:max-content;min-width:100%}.fret-marker-position{flex:1;display:flex;justify-content:center;align-items:center}.fret-marker{width:20px;height:20px;border-radius:50%;background-color:#555}.double-marker{position:relative}.double-marker:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background-color:#555;left:-30px}.fret-numbers{display:flex;height:20px;margin-bottom:5px;position:relative;width:max-content;min-width:100%}.fret-number{flex:1;display:flex;justify-content:center;align-items:center;font-size:.7rem;color:#aaa}.instrument-toggle{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;margin-top:-1rem}.instrument-button{padding:.7em 1.5em;font-weight:600;color:#fff;background-color:#555;transition:background-color .3s ease,transform .1s ease;min-width:120px;border-radius:8px;box-shadow:0 2px 4px #0000004d}.instrument-button.active{background-color:#3a6ea5;transform:translateY(2px);box-shadow:0 1px 2px #0000004d}.instrument-button:hover:not(.active){background-color:#666}.fret.pressed{background-color:rgba(var(--accent-color-rgb),.15)}.note-name{font-size:.7rem;font-weight:700;color:#fff}.midi-chord{text-align:left;padding:1.5em;background-color:#1a1a1a;border-radius:8px;flex:1;min-width:0;width:100%;box-sizing:border-box;position:relative}.sustain-indicator{position:absolute;top:1em;right:1em;background-color:rgba(var(--accent-color-rgb),.8);color:#fff;padding:.3em .6em;border-radius:4px;font-size:.8em;font-weight:700;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}@media (prefers-color-scheme: light){.sustain-indicator{background-color:rgba(var(--accent-color-rgb),.9);color:#fff}}.instruments-container{display:flex;flex-direction:column;gap:1rem;width:100%;box-sizing:border-box;overflow:hidden}.piano-container{display:flex;flex-direction:column;gap:.5rem;width:100%;background-color:#1a1a1a;border-radius:8px;padding:1em;overflow:hidden;box-sizing:border-box;max-width:100%;margin-bottom:1rem;position:relative}.piano-container button,.guitar-container button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.piano-container{margin-bottom:1rem;position:relative}.piano-keyboard,.fretboard-wrapper{width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}@media (min-width: 1024px){.instruments-container{flex-direction:column}.piano-container,.guitar-container{width:100%;margin:0}.piano-keyboard,.fretboard-wrapper{width:100%;min-width:0}}.clear-notes-container{display:flex;justify-content:center;gap:10px;margin:1rem 0;flex-wrap:wrap;max-width:100%;box-sizing:border-box;padding:0 .5rem}.clear-notes-container button{flex:0 1 auto;min-width:40px;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clear-notes-container .clear-button{width:auto;min-width:50px;margin-top:0;padding:.7em 1em;font-weight:600;color:#fff;background-color:#555;transition:background-color .3s ease;display:flex;align-items:center;justify-content:center;margin-left:0;flex:0 1 auto}.clear-notes-container .share-button{min-width:50px;margin:0;display:flex;align-items:center;justify-content:center}.clear-notes-container .clear-button:hover{background-color:#e57373;border-color:#e57373}.clear-notes-container .play-button{min-width:50px;background-color:#2ecc71;color:#fff;border:none;border-radius:4px;padding:8px 12px;cursor:pointer;font-size:14px;font-weight:600;transition:background-color .2s;display:flex;align-items:center;justify-content:center}.clear-notes-container .play-button:hover{background-color:#27ae60}.clear-notes-container .play-button:active{background-color:#219653}.midi-warning{padding:10px;background-color:#ff980026;border-left:4px solid #ff9800;border-radius:4px;margin:1em 0}.midi-warning p{margin:.5em 0;color:#e0e0e0}@media (prefers-color-scheme: light){.midi-warning{background-color:#ff98001a}.midi-warning p{color:#333}}.octave-display{display:flex;flex-direction:column;align-items:flex-end;font-size:.95rem;font-weight:500;color:var(--text-color)}.keyboard-help{margin-top:.3rem;font-size:.8rem;opacity:.8}.virtual-keyboard-layout{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:1rem 0}.black-keys-row{display:flex;height:3.5rem;width:100%;position:relative;z-index:2;padding-left:0;margin-bottom:1.2rem;justify-content:center}.white-keys-row{display:flex;justify-content:center;position:relative;z-index:1;margin-top:0}.spacer{width:1.25rem}.virtual-keyboard-layout .key-map-item{display:flex;flex-direction:column;align-items:center;margin:0 .15rem}.virtual-keyboard-layout .key-cap{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background-color:#3a3a3a;color:#e0e0e0;border-radius:4px;box-shadow:0 2px 4px #0000004d;font-family:monospace;font-weight:700;font-size:1rem;transition:transform .1s,box-shadow .1s}.virtual-keyboard-layout .key-cap:hover{transform:translateY(1px);box-shadow:0 1px 2px #0000004d}.virtual-keyboard-layout .key-note{font-size:.7rem;margin-top:.2rem;color:#bbb;white-space:nowrap;min-width:3rem;text-align:center}.virtual-keyboard-layout .sharp-key .key-cap{background-color:#222;color:#fff}@media (prefers-color-scheme: light){.virtual-keyboard-layout .key-cap{background-color:#f5f5f5;color:#333;box-shadow:0 2px 4px #0003}.virtual-keyboard-layout .key-cap:hover{transform:translateY(1px);box-shadow:0 1px 2px #0003}.virtual-keyboard-layout .key-note{color:#666}.virtual-keyboard-layout .sharp-key .key-cap{background-color:#444;color:#fff}}.toast-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:10px 20px;border-radius:4px;z-index:1000;font-size:14px;box-shadow:0 2px 10px #0000004d;opacity:1;transition:opacity .3s ease}.toast-notification.hide{opacity:0}@media (prefers-color-scheme: light){.toast-notification{background-color:#4a7eb5;color:#fff;box-shadow:0 2px 10px #0003}}.detection-result{display:flex;align-items:center;margin-bottom:.5rem}.detection-tag{display:inline-block;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:500;text-transform:uppercase}.chord-tag{background-color:#6366f1;color:#fff}.scale-tag{background-color:#8b5cf6;color:#fff}.interval-tag{background-color:#10b981;color:#fff}@media (prefers-color-scheme: light){.chord-tag{background-color:#3a5ae8}.scale-tag{background-color:#5933ba}.interval-tag{background-color:#218b4e}}.staff-notation-container{background-color:#1a1a1a;border-radius:8px;width:100%;overflow:hidden}.staff-notation-container h3{color:var(--accent-color);margin-top:0;margin-bottom:1rem;text-align:center}.staff-notation-layout{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:1rem}.staff-notation{flex:1;width:50%;display:flex;flex-direction:column;align-items:center}.staff-notation canvas,.staff-notation svg{background-color:#fff;border-radius:4px;box-shadow:0 4px 8px #0003;width:100%}.staff-notation svg *{stroke:#000}.circle-of-fifths{flex:1;width:50%;display:flex;justify-content:center;align-items:center}@media (max-width: 768px){.staff-notation-layout{flex-direction:column;align-items:center;gap:.75rem;padding:.75rem}.staff-notation{margin-right:0;margin-bottom:.5rem;width:100%}.circle-of-fifths{width:100%;max-width:none;margin:0 auto}.chord-detection-container .staff-notation-layout{flex-direction:column;align-items:center;gap:15px;padding:.75rem}.chord-detection-container .staff-notation{max-width:100%;width:100%;height:180px}.chord-detection-container .circle-of-fifths{max-width:100%;width:100%;height:180px;margin-top:15px}}@media (max-width: 480px){.staff-notation-layout{flex-direction:column;padding:0;gap:.5rem}.staff-notation{width:100%;margin-bottom:.5rem}.circle-of-fifths{max-width:180px}.staff-notation-container{padding:.5rem}}@media (prefers-color-scheme: light){.staff-notation-container{background-color:#f5f5f5}.staff-notation-container h3{color:var(--accent-color)}.staff-notation canvas,.staff-notation svg{box-shadow:0 2px 6px #0000001a}}@media (min-width: 1024px){.staff-notation-container{margin:0}}.staff-notation:hover:before{opacity:1}.share-button{background-color:#3498db;color:#fff;cursor:pointer;align-items:center;transition:background-color .2s}.share-button:hover{background-color:#2980b9}.share-button:active{background-color:#1c638e}@media (prefers-color-scheme: light){.mapping-toggle-button{background-color:#ccc;color:#333}.mapping-toggle-button:hover{background-color:#bbb}.mapping-toggle-button[aria-pressed=true]{background-color:#90a4ae;color:#fff}.sound-toggle-button.enabled{background-color:#4caf50;color:#fff}.sound-toggle-button.disabled{background-color:#f44336;color:#fff}.sound-toggle-button.enabled:hover{background-color:#388e3c}.sound-toggle-button.disabled:hover{background-color:#d32f2f}.hold-toggle-button.enabled{background-color:#2196f3;color:#fff}.hold-toggle-button.disabled{background-color:#90a4ae;color:#333}.hold-toggle-button.enabled:hover{background-color:#1976d2}.hold-toggle-button.disabled:hover{background-color:#78909c}.keyboard-mapping{background-color:#f0f0f0}}.clear-notes-container .clear-button svg,.clear-notes-container .share-button svg,.clear-notes-container .play-button svg,.clear-notes-container .transpose-button svg,.sound-toggle-button svg,.mapping-toggle-button svg{font-size:1.2rem}.transpose-button{min-width:40px;background-color:#7e57c2;color:#fff;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;padding:.5rem .8rem;font-size:1rem;font-weight:700;border:none;border-radius:4px;cursor:pointer;flex:0 1 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis}.transpose-button:hover{background-color:#5e35b1}.transpose-button:active{background-color:#4527a0}.mapping-toggle-button,.hold-toggle-button,.sound-toggle-button{padding:.5rem 1rem;font-size:.9rem;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease;font-weight:600;display:flex;align-items:center;justify-content:center}.sound-toggle-button{min-width:50px}.mapping-toggle-button.enabled{background-color:#2196f3;color:#fff}.mapping-toggle-button.disabled{background-color:#455a64;color:#eee}.mapping-toggle-button.enabled:hover{background-color:#1976d2}.mapping-toggle-button.disabled:hover{background-color:#37474f}@media (prefers-color-scheme: light){.mapping-toggle-button{background-color:#ccc;color:#333}.mapping-toggle-button:hover{background-color:#bbb}.mapping-toggle-button[aria-pressed=true]{background-color:#90a4ae;color:#fff}.mapping-toggle-button.enabled{background-color:#2196f3;color:#fff}.mapping-toggle-button.disabled{background-color:#90a4ae;color:#333}.mapping-toggle-button.enabled:hover{background-color:#1976d2}.mapping-toggle-button.disabled:hover{background-color:#78909c}.sound-toggle-button.enabled{background-color:#4caf50;color:#fff}.sound-toggle-button.disabled{background-color:#f44336;color:#fff}.sound-toggle-button.enabled:hover{background-color:#388e3c}.sound-toggle-button.disabled:hover{background-color:#d32f2f}.hold-toggle-button.enabled{background-color:#2196f3;color:#fff}.hold-toggle-button.disabled{background-color:#90a4ae;color:#333}.hold-toggle-button.enabled:hover{background-color:#1976d2}.hold-toggle-button.disabled:hover{background-color:#78909c}.keyboard-mapping{background-color:#f0f0f0}.transpose-button{background-color:#7e57c2;color:#fff}.transpose-button:hover{background-color:#5e35b1}.transpose-button:active{background-color:#4527a0}}.circle-of-fifths-container{display:flex;flex-direction:column;align-items:center}.key-signature-display{text-align:center;margin-top:.5rem;font-size:.9rem;font-weight:500;color:var(--text-color)}@media (max-width: 768px){.circle-of-fifths-container{margin-top:.5rem;width:100%}.key-signature-display{margin-top:.75rem}}@media (max-width: 480px){.circle-of-fifths-container{margin-top:.3rem}.key-signature-display{font-size:.8rem;margin-top:.5rem}}.drum-pads-container{width:100%;max-width:400px;margin-left:auto;margin-right:auto}.drum-pads-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:10px;width:100%}.drum-pad{height:70px;border:none;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .05s ease-out;box-shadow:0 4px 6px #0000004d;position:relative;overflow:hidden;color:#fff;font-weight:700;will-change:transform,background-color;-webkit-tap-highlight-color:transparent;padding:.5rem}.drum-pad.has-notes{border:2px solid rgba(255,255,255,.5)}.drum-pad:hover{filter:brightness(1.1)}.drum-pad.active{transform:translateY(2px);box-shadow:0 2px 3px #0000004d}.pad-info{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}.pad-name{font-size:.8rem;line-height:1.1;text-align:center;max-width:100%;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.7);margin-bottom:.25rem}.note-count{font-size:.7rem;opacity:.8}.clear-pad-button{position:absolute;top:4px;right:4px;background-color:#fff3;color:#fff;border:none;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;padding:0;line-height:1}.clear-pad-button:hover{background-color:#fff6}.drum-pads-help{text-align:center;margin-top:1rem;font-size:.85rem;opacity:.7}@media (max-width: 768px){.drum-pads-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr)}.drum-pad{height:60px}.pad-name{font-size:.7rem}.note-count{font-size:.6rem}}@media (max-width: 480px){.drum-pads-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:5px}.drum-pad{height:50px}.pad-name{font-size:.6rem}.note-count{font-size:.55rem}.clear-pad-button{width:16px;height:16px}}.arrow-button-container{display:flex;justify-content:center;margin:16px 0;width:100%;position:relative;z-index:5}.arrow-down-button{background-color:#3f51b5;color:#fff;border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 6px #0000004d;padding:0}.arrow-down-button:disabled{background-color:#9e9e9e;opacity:.6;cursor:not-allowed}.arrow-down-button:hover:not(:disabled){background-color:#303f9f;transform:translateY(-2px);box-shadow:0 6px 8px #0006}.arrow-down-button:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 3px #0000004d}.arrow-down-button svg{width:28px;height:28px}.pad-note-count{position:absolute;top:8px;right:8px;background-color:#0000004d;color:#fff;border-radius:12px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;padding:0 5px}@media (prefers-color-scheme: light){.arrow-down-button{background-color:#2196f3}.arrow-down-button:hover{background-color:#1976d2}.pad-note-count{background-color:#00000080}}@media (max-width: 768px){.arrow-button-container{margin:12px 0}.arrow-down-button{width:40px;height:40px}.arrow-down-button svg{width:24px;height:24px}}@media (max-width: 480px){.arrow-button-container{margin:8px 0}.arrow-down-button{width:36px;height:36px}.arrow-down-button svg{width:20px;height:20px}}.audio-warning{background-color:#ffebee;border:1px solid #ef5350;color:#c62828;padding:10px 15px;margin:10px auto;max-width:800px;border-radius:4px;font-size:14px;text-align:center}.audio-warning p{margin:5px 0}.drum-pad.held{box-shadow:0 0 0 2px #fff,0 4px 6px #0000004d}.held-indicator{position:absolute;top:4px;left:4px;width:8px;height:8px;background-color:#fff;border-radius:50%;opacity:.8;animation:pulse 1.5s infinite}@media (max-width: 768px){.held-indicator{width:6px;height:6px}}@media (max-width: 480px){.held-indicator{width:5px;height:5px}}@media (prefers-color-scheme: light){.drum-pad.held{box-shadow:0 0 0 2px #1976d2,0 4px 6px #0003}.held-indicator{background-color:#1976d2}}.drum-controls{width:100%;display:flex;justify-content:center;align-items:center;margin-bottom:1rem;gap:15px;flex-wrap:wrap}.beat-button{background-color:#3f51b5;color:#fff;font-weight:700;padding:.6rem 1.2rem;border-radius:30px;border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 5px #0003}.beat-button:hover{background-color:#303f9f;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.beat-button.playing{background-color:#f44336;animation:pulse-beat 2s infinite}.beat-button.playing:hover{background-color:#d32f2f}.beat-icon{font-size:1.2rem;line-height:1}@keyframes pulse-beat{0%{box-shadow:0 0 #f4433699}70%{box-shadow:0 0 0 6px #f4433600}to{box-shadow:0 0 #f4433600}}@media (prefers-color-scheme: light){.beat-button{background-color:#2196f3}.beat-button:hover{background-color:#1976d2}.beat-button.playing{background-color:#f44336;animation:pulse-beat-light 2s infinite}.beat-button.playing:hover{background-color:#d32f2f}}@keyframes pulse-beat-light{0%{box-shadow:0 0 #f4433699}70%{box-shadow:0 0 0 6px #f4433600}to{box-shadow:0 0 #f4433600}}@media (max-width: 768px){.beat-button{padding:.5rem 1rem;font-size:.9rem}.beat-icon{font-size:1rem}}.pad-keyboard-toggle{background-color:#607d8b;color:#fff;font-weight:700;padding:.6rem 1.2rem;border-radius:30px;border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 2px 5px #0003;margin-left:1rem}.pad-keyboard-toggle:hover{background-color:#455a64;transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.pad-keyboard-toggle.enabled{background-color:#4caf50;animation:pulse-toggle 2s infinite}.pad-keyboard-toggle.enabled:hover{background-color:#388e3c}.pad-keyboard-toggle .toggle-icon{font-size:1.2rem;line-height:1}.pad-keyboard-help{text-align:center;margin-bottom:1rem;font-size:.9rem;color:#e0e0e0;background-color:#4caf5033;padding:.5rem;border-radius:4px;max-width:600px;margin-left:auto;margin-right:auto}.pad-key-label{position:absolute;top:8px;left:8px;background-color:#00000080;color:#fff;width:20px;height:20px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;pointer-events:none;font-family:monospace}@keyframes pulse-toggle{0%{box-shadow:0 0 #4caf5099}70%{box-shadow:0 0 0 6px #4caf5000}to{box-shadow:0 0 #4caf5000}}@media (max-width: 768px){.drum-controls{flex-direction:column;gap:.75rem}.pad-keyboard-toggle{margin-left:0;padding:.5rem 1rem;font-size:.9rem}.pad-keyboard-help{font-size:.8rem;padding:.4rem}.pad-key-label{width:16px;height:16px;font-size:.7rem}}@media (prefers-color-scheme: light){.pad-keyboard-toggle{background-color:#78909c}.pad-keyboard-toggle:hover{background-color:#546e7a}.pad-keyboard-toggle.enabled{background-color:#4caf50}.pad-keyboard-toggle.enabled:hover{background-color:#388e3c}.pad-keyboard-help{color:#333;background-color:#4caf501a}.pad-key-label{background-color:#0000004d}}.toggle-pads-container{position:absolute;top:10px;left:10px;z-index:100}.toggle-pads-button{background-color:#424242;color:#fff;font-weight:700;padding:.5rem 1rem;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #0000004d;display:flex;align-items:center;gap:.3rem}.toggle-pads-button:hover{background-color:#303030;transform:translateY(-2px);box-shadow:0 4px 8px #0006}.toggle-pads-button.pads-hidden{background-color:#757575}.toggle-pads-button.pads-hidden:hover{background-color:#616161}@media (max-width: 768px){.toggle-pads-container{top:5px;left:5px}.toggle-pads-button{padding:.4rem .8rem;font-size:.85rem}}@media (prefers-color-scheme: light){.toggle-pads-button{background-color:#2196f3;color:#fff}.toggle-pads-button:hover{background-color:#1976d2}.toggle-pads-button.pads-hidden{background-color:#78909c}.toggle-pads-button.pads-hidden:hover{background-color:#607d8b}}.guitar-container{display:flex;flex-direction:column;gap:.5rem;width:100%;background-color:#1a1a1a;border-radius:8px;padding:1em;overflow:hidden;box-sizing:border-box;max-width:100%}.adsr-controls{background:linear-gradient(135deg,#2a2a3a 0%,#1a1a2a 100%);border-radius:10px;padding:16px;margin:15px 0;width:100%;max-width:550px;box-shadow:0 8px 20px #0003,0 2px 5px #0000001a;border:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}.adsr-controls:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,transparent,rgba(255,255,255,.03),transparent);pointer-events:none}.adsr-controls h3{margin-top:0;margin-bottom:15px;font-size:1.3rem;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.3)}.adsr-sliders{display:flex;flex-direction:column;gap:15px}.slider-container{display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.2);padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.slider-container label{font-size:.95rem;color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.3)}.slider-container input[type=range]{width:100%;height:8px;-webkit-appearance:none;background:linear-gradient(to right,#4a90e2,#6cb6ff);border-radius:4px;cursor:pointer;box-shadow:inset 0 1px 3px #0000004d}.slider-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:linear-gradient(145deg,#fff,#f0f0f0);border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0003;transition:all .2s ease;border:1px solid rgba(255,255,255,.8)}.slider-container input[type=range]::-webkit-slider-thumb:hover{background:linear-gradient(145deg,#f0f0f0,#e6e6e6);transform:scale(1.1);box-shadow:0 3px 7px #0000004d}.slider-container input[type=range]:focus{outline:none}.reset-adsr-button{margin-top:15px;padding:10px 15px;background:linear-gradient(145deg,#4a90e2,#3a7bc8);border:none;border-radius:6px;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #0003;width:100%}.reset-adsr-button:hover{background:linear-gradient(145deg,#5a9ff1,#4a90e2);transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.reset-adsr-button:active{transform:translateY(0);box-shadow:0 1px 2px #0003}.adsr-visualization{flex:0 0 auto;background:rgba(20,20,30,.4);border-radius:8px;padding:12px;box-shadow:0 2px 5px #0003;max-width:250px;width:100%;border:1px solid rgba(255,255,255,.05)}.adsr-canvas{display:block;width:100%;height:auto;max-height:150px;border-radius:4px;background-color:#0003;box-shadow:inset 0 1px 3px #0000004d;padding:5px}.adsr-explanation{margin-top:12px;font-size:.85rem;color:#fffc;background:rgba(0,0,0,.2);border-radius:6px;padding:8px;border:1px solid rgba(255,255,255,.05)}.adsr-explanation p{margin:5px 0;line-height:1.3}@media (prefers-color-scheme: light){.adsr-controls{background:linear-gradient(135deg,#f0f0f0 0%,#e0e0e0 100%);box-shadow:0 8px 20px #0000001a,0 2px 5px #0000000d;border:1px solid #ddd}.adsr-controls h3{color:#333;text-shadow:none}.slider-container{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1)}.slider-container label{color:#444;text-shadow:none}.slider-container input[type=range]{background:linear-gradient(to right,#3a7bc8,#4a90e2);box-shadow:inset 0 1px 3px #0000001a}.slider-container input[type=range]::-webkit-slider-thumb{background:linear-gradient(145deg,#fff,#f5f5f5);border:1px solid #ccc}.adsr-visualization{background:rgba(240,240,245,.7);box-shadow:0 2px 5px #0000001a;border:1px solid rgba(0,0,0,.1)}.adsr-canvas{background-color:#0000000d;box-shadow:inset 0 1px 3px #0000001a}.adsr-explanation{color:#000000b3;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1)}.reset-adsr-button{background:linear-gradient(145deg,#3a7bc8,#2a6cb8)}.reset-adsr-button:hover{background:linear-gradient(145deg,#4a90e2,#3a7bc8)}}@media (max-width: 768px){.adsr-controls{margin:10px 0;padding:14px}.adsr-header{margin-bottom:12px;padding-bottom:6px}.adsr-header h3{font-size:1.2rem}.adsr-controls-layout{flex-direction:column;align-items:center;gap:15px}.adsr-visualization{width:100%;max-width:100%;padding:10px;margin-top:10px}.adsr-canvas{max-height:120px}.slider-container{padding:10px;gap:6px}.slider-container label{font-size:.85rem}.reset-adsr-button{font-size:.9rem;padding:8px 12px;margin-top:10px}}@media (max-width: 480px){.adsr-controls{max-width:100%;padding:12px}.adsr-header{margin-bottom:10px;padding-bottom:5px}.adsr-header h3{font-size:1.1rem}.slider-container{padding:8px}.slider-container input[type=range]{height:6px}.slider-container input[type=range]::-webkit-slider-thumb{width:16px;height:16px}.adsr-canvas{max-height:100px}.adsr-explanation{display:none}}.adsr-toggle-button{background-color:#444;color:#fff;border:none;border-radius:4px;padding:6px 12px;margin:5px 0;font-size:.9rem;cursor:pointer;transition:background-color .2s,transform .1s;display:flex;align-items:center;justify-content:center}.adsr-toggle-button:hover{background-color:#555}.adsr-toggle-button:active{transform:scale(.97)}@media (prefers-color-scheme: light){.adsr-toggle-button{background-color:#e0e0e0;color:#333;border:1px solid #ccc}.adsr-toggle-button:hover{background-color:#d0d0d0}}@media (max-width: 768px){.adsr-toggle-button{font-size:.8rem;padding:5px 10px}}@media (max-width: 480px){.adsr-toggle-button{font-size:.75rem;padding:4px 8px;margin:3px 0}}.adsr-controls-layout{display:flex;flex-direction:row;gap:20px;align-items:flex-start;justify-content:space-between;width:100%}.adsr-sliders{flex:1;min-width:200px}.adsr-visualization{flex:0 0 auto;background-color:#14141499;border-radius:6px;padding:10px;box-shadow:0 2px 5px #0003;max-width:250px;width:100%}.adsr-canvas{display:block;width:100%;height:auto;max-height:150px}@media (prefers-color-scheme: light){.adsr-visualization{background-color:#f0f0f0cc;box-shadow:0 2px 5px #0000001a}}@media (max-width: 768px){.adsr-controls-layout{flex-direction:column;align-items:center}.adsr-visualization{width:100%;max-width:100%;padding:8px}.adsr-canvas{max-height:120px}}@media (max-width: 480px){.adsr-canvas{max-height:100px}}.adsr-explanation{margin-top:10px;font-size:.8rem;color:#ffffffb3}.adsr-explanation p{margin:3px 0;line-height:1.2}@media (prefers-color-scheme: light){.adsr-explanation{color:#000000b3}}@media (max-width: 768px){.adsr-explanation{font-size:.7rem}}@media (max-width: 480px){.adsr-explanation{display:none}}.bpm-control{display:flex;flex-direction:column;align-items:center;margin:0 15px;min-width:150px}.bpm-control label{font-size:.9rem;color:#fff;margin-bottom:5px;font-weight:500}.bpm-value{font-weight:700;font-size:1.1rem;color:#4a90e2;transition:color .2s ease}.bpm-value.changing{color:#ff9800}.bpm-slider{width:100%;height:8px;-webkit-appearance:none;background:linear-gradient(to right,#4a90e2,#6cb6ff);border-radius:4px;cursor:pointer}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#fff;border-radius:50%;cursor:pointer;box-shadow:0 2px 5px #0003;transition:background .2s}.bpm-slider::-webkit-slider-thumb:hover{background:#f0f0f0}.bpm-slider:focus{outline:none}@media (prefers-color-scheme: light){.bpm-control label{color:#333}.bpm-value{color:#3a7bc8}.bpm-slider{background:linear-gradient(to right,#3a7bc8,#4a90e2)}.bpm-slider::-webkit-slider-thumb{background:#fff;border:1px solid #ccc}}@media (max-width: 768px){.drum-controls{flex-direction:column;align-items:center;gap:10px}.bpm-control{width:90%;max-width:200px;margin:5px 0}.bpm-control label{font-size:.8rem}.bpm-slider{height:6px}.bpm-slider::-webkit-slider-thumb{width:16px;height:16px}}@media (max-width: 480px){.bpm-control{width:100%;margin:3px 0}.bpm-slider{height:5px}.bpm-slider::-webkit-slider-thumb{width:14px;height:14px}.bpm-slider::-moz-range-thumb{width:14px;height:14px;background:linear-gradient(to right,#3a7bc8,#4a90e2)}}.sequencer-container{background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);border-radius:12px;padding:16px;margin:0;width:100%;max-width:100%;box-shadow:0 10px 25px #0006,0 2px 5px #0000004d;border:1px solid #3a3a3a;position:relative;overflow:hidden}.sequencer-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#4a90e2,#2ecc71,#4a90e2);background-size:200% 100%;animation:gradient-shift 8s linear infinite}@keyframes gradient-shift{0%{background-position:0% 50%}to{background-position:200% 50%}}.sequencer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px;position:relative}.sequencer-header h2{color:#fff;margin:0;font-size:1.5rem;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5);position:relative;padding-bottom:4px}.sequencer-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:rgba(0,0,0,.2);padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.05)}.play-button{width:44px;height:44px;background:linear-gradient(145deg,#333,#2a2a2a);border-radius:6px;cursor:pointer;border:1px solid #444;color:#fff;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;box-shadow:0 2px 4px #0003}.play-button:hover{background:linear-gradient(145deg,#3a3a3a,#333);transform:translateY(-2px);box-shadow:0 4px 8px #0000004d}.play-button:active{transform:translateY(0);box-shadow:0 1px 2px #0003}.play-button.playing{background:linear-gradient(145deg,#2ecc71,#27ae60);border-color:#2ecc71;box-shadow:0 0 10px #2ecc7180}.play-button.playing:hover{background:linear-gradient(145deg,#3dd382,#2ecc71);filter:brightness(1.1)}.sequencer-track{display:flex;align-items:center;gap:12px;position:relative}.sequencer-track:not(:last-child):after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.1),transparent)}.track-label{width:60px;min-width:60px;flex:0 0 60px;color:#fff;font-size:.95rem;text-align:right;padding-right:8px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sequencer-track:nth-child(1) .track-label{color:#4a90e2}.sequencer-track:nth-child(2) .track-label{color:#e74c3c}.sequencer-track:nth-child(3) .track-label{color:#f1c40f}.sequencer-track:nth-child(4) .track-label{color:#2ecc71}.sequencer-track:nth-child(5) .track-label{color:#9b59b6}.sequencer-cell{background:linear-gradient(145deg,#333,#2a2a2a);border-radius:6px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:inset 0 1px 3px #0000004d;border:1px solid #444;overflow:hidden;box-sizing:border-box}.sequencer-cell:hover{background:linear-gradient(145deg,#3a3a3a,#333);transform:translateY(-2px);box-shadow:0 2px 5px #0003}.sequencer-cell.active{background:linear-gradient(145deg,#4a90e2,#3a7bc8);box-shadow:0 0 10px #4a90e280;border-color:#4a90e2;transform:scale(1.05);z-index:1}.sequencer-track:nth-child(1) .sequencer-cell.active{background:linear-gradient(145deg,#4a90e2,#3a7bc8);box-shadow:0 0 10px #4a90e280;border-color:#4a90e2}.sequencer-track:nth-child(2) .sequencer-cell.active{background:linear-gradient(145deg,#e74c3c,#c0392b);box-shadow:0 0 10px #e74c3c80;border-color:#e74c3c}.sequencer-track:nth-child(3) .sequencer-cell.active{background:linear-gradient(145deg,#f1c40f,#f39c12);box-shadow:0 0 10px #f1c40f80;border-color:#f1c40f}.sequencer-track:nth-child(4) .sequencer-cell.active{background:linear-gradient(145deg,#2ecc71,#27ae60);box-shadow:0 0 10px #2ecc7180;border-color:#2ecc71}.sequencer-track:nth-child(5) .sequencer-cell.active{background:linear-gradient(145deg,#9b59b6,#8e44ad);box-shadow:0 0 10px #9b59b680;border-color:#9b59b6}.sequencer-cell.active:hover{filter:brightness(1.1)}.sequencer-cell.current{outline:2px solid rgba(255,255,255,.8);outline-offset:-1px;box-shadow:0 0 10px #ffffff4d;border:1px solid #444}.sequencer-cell.active.current{transform:scale(1.05);z-index:2;outline:2px solid rgba(255,255,255,.8);outline-offset:-1px;box-shadow:0 0 15px #2ecc71b3;animation:cell-pulse-opacity .25s infinite alternate}@keyframes cell-pulse-opacity{0%{filter:brightness(1);box-shadow:0 0 10px #ffffff80}to{filter:brightness(1.3);box-shadow:0 0 20px #ffffffb3}}.sequencer-grid{display:flex;flex-direction:column;gap:4px;overflow-x:auto;background:rgba(0,0,0,.15);border-radius:8px;padding:16px;border:1px solid rgba(255,255,255,.05)}.track-cells{display:flex;gap:4px;flex-grow:1}.beat-marker{position:absolute;top:4px;left:4px;font-size:.7rem;color:#ffffff80;pointer-events:none;transition:all .2s ease}.sequencer-cell.active .beat-marker{color:#ffffffe6}.sequencer-cell.active:after{content:"";position:absolute;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7) 0%,transparent 70%);opacity:.4;transition:all .2s ease}.sequencer-cell.active.current:after{opacity:.8;animation:ripple .5s infinite alternate}@keyframes ripple{0%{transform:scale(.8);opacity:.5}to{transform:scale(1.2);opacity:.2}}.sequencer-help{margin-top:20px;color:#fff9;font-size:.85rem;text-align:center;background:rgba(0,0,0,.2);border-radius:6px;padding:10px;border:1px solid rgba(255,255,255,.05)}@media (max-width: 768px){.sequencer-container{padding:16px;margin:16px auto}.sequencer-header{flex-direction:column;align-items:flex-start;gap:12px}.sequencer-controls{width:100%;justify-content:space-between;flex-wrap:wrap;padding:10px}.sequencer-cell{width:33px;height:33px}.track-label{width:65px;font-size:.85rem}.beat-marker{font-size:.6rem}}@media (max-width: 480px){.sequencer-container{padding:12px;margin:12px auto}.sequencer-controls{gap:8px;padding:8px}.sequencer-cell{width:26px;height:26px}.track-label{width:55px;font-size:.75rem}.play-button{width:40px;height:40px}.bpm-slider{width:120px}}@media (prefers-color-scheme: light){.sequencer-container{background:linear-gradient(135deg,#f0f0f0 0%,#e0e0e0 100%);box-shadow:0 8px 20px #0000001a,0 2px 5px #0000000d;border:1px solid #ddd}.sequencer-header h2{color:#333;text-shadow:none}.sequencer-controls{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1)}.steps-control label,.bpm-control label{color:#333}.sequencer-grid{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1)}.track-label{color:#333;text-shadow:none}.sequencer-cell{background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border:1px solid #ccc;box-shadow:inset 0 1px 3px #0000001a}.sequencer-cell:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0)}.beat-marker{color:#0000004d}.sequencer-help{color:#666;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1)}.sequencer-track:nth-child(1) .track-label{color:#3a7bc8}.sequencer-track:nth-child(2) .track-label{color:#c0392b}.sequencer-track:nth-child(3) .track-label{color:#f39c12}.sequencer-track:nth-child(4) .track-label{color:#27ae60}.sequencer-track:nth-child(5) .track-label{color:#8e44ad}}.tempo-visualization{height:4px;width:150px;background:rgba(0,0,0,.2);border-radius:2px;margin:4px 0;overflow:hidden;position:relative}.tempo-pulse{position:absolute;height:100%;width:30px;background:linear-gradient(90deg,transparent,#4a90e2,transparent);transform:translate(-100%);opacity:.7}.tempo-pulse.pulsing{animation:tempo-pulse linear infinite}@keyframes tempo-pulse{0%{transform:translate(-100%)}to{transform:translate(150px)}}@media (max-width: 480px){.tempo-visualization{width:120px}}@media (prefers-color-scheme: light){.tempo-visualization{background:rgba(0,0,0,.1)}.tempo-pulse{background:linear-gradient(90deg,transparent,#3a7bc8,transparent)}}.sequencer-track:nth-child(1) .sequencer-cell.active:hover,.sequencer-track:nth-child(2) .sequencer-cell.active:hover,.sequencer-track:nth-child(3) .sequencer-cell.active:hover,.sequencer-track:nth-child(4) .sequencer-cell.active:hover,.sequencer-track:nth-child(5) .sequencer-cell.active:hover{filter:brightness(1.2)}.sequencer-container.loading{position:relative;min-height:200px}.sequencer-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:500;z-index:10;border-radius:12px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:loadingPulse 1.5s infinite alternate}@keyframes loadingPulse{0%{opacity:.7}to{opacity:.9}}.sequencer-loading:after{content:"";display:inline-block;width:16px;height:16px;margin-left:8px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spinner 1s ease-in-out infinite}@keyframes spinner{to{transform:rotate(360deg)}}@media (prefers-color-scheme: light){.sequencer-loading{background:rgba(255,255,255,.7);color:#333}.sequencer-loading:after{border:3px solid rgba(0,0,0,.2);border-top-color:#333}}.adsr-controls{background-color:#1e1e1ecc;border-radius:8px;padding:15px;margin:10px 0;width:100%;max-width:550px}.drum-pads-adsr-container{display:flex;flex-direction:row;gap:20px;width:100%;margin-left:auto;margin-right:auto;align-items:flex-start;justify-content:center;flex-wrap:wrap}@media (max-width: 1024px){.drum-pads-adsr-container{flex-direction:column;align-items:center;gap:15px}.adsr-section{width:100%;max-width:100%}.adsr-controls{max-width:100%}}@media (max-width: 768px){.adsr-section{min-width:unset}}.adsr-controls h3{margin-top:0;margin-bottom:15px;font-size:1.2rem;color:#fff;text-align:center}.sequencer-adsr-container{display:flex;flex-direction:row;gap:20px;width:100%;max-width:1200px;margin-left:auto;margin-right:auto;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.sequencer-adsr-container .adsr-section{flex:0 0 auto;width:40%;min-width:400px;display:flex;flex-direction:column;align-items:center;order:1}.sequencer-adsr-container .sequencer-container{flex:0 0 auto;width:55%;min-width:600px;order:2}@media (max-width: 1200px){.sequencer-adsr-container{flex-direction:column;align-items:center;gap:15px}.sequencer-adsr-container .adsr-section,.sequencer-adsr-container .sequencer-container{width:100%;max-width:100%;min-width:unset}.sequencer-adsr-container .adsr-section{order:1}.sequencer-adsr-container .sequencer-container{order:2}}.drum-pads-sequencer-container{display:flex;flex-direction:row;gap:20px;width:100%;max-width:1200px;margin-left:auto;margin-right:auto;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin-bottom:20px}.drum-pads-section{flex:0 0 auto;width:40%;min-width:350px;display:flex;flex-direction:column;align-items:center}.sequencer-section{flex:0 0 auto;width:50%;min-width:600px;display:flex;flex-direction:column}@media (max-width: 1200px){.drum-pads-sequencer-container{flex-direction:column;align-items:center;gap:15px}.drum-pads-section,.sequencer-section{width:100%;max-width:100%;min-width:unset}}.adsr-section{flex:0 0 auto;width:50%;min-width:300px;display:flex;flex-direction:column;align-items:center}.sequencer-compact{padding:14px;width:100%}.sequencer-compact .sequencer-header{margin-bottom:14px}.sequencer-compact .sequencer-header h2{font-size:1.4rem}.sequencer-compact .sequencer-controls{padding:8px 10px;gap:10px}.sequencer-compact .sequencer-grid{padding:10px;gap:3px}.sequencer-compact .sequencer-track{gap:6px}.sequencer-compact .track-label{width:50px;min-width:50px;flex:0 0 50px;font-size:.85rem;padding-right:6px}.sequencer-compact .track-cells{gap:3px}.sequencer-compact .sequencer-cell{width:29px;height:29px}.sequencer-compact .sequencer-help{margin-top:8px;padding:6px;font-size:.8rem}.sequencer-compact .play-button{width:38px;height:38px}@media (max-width: 768px){.sequencer-compact{padding:10px}.sequencer-compact .sequencer-cell{width:30px;height:30px}.sequencer-compact .track-label{width:45px;min-width:45px;flex:0 0 45px;font-size:.75rem;padding-right:4px}}@media (max-width: 480px){.sequencer-compact{padding:8px}.sequencer-compact .sequencer-cell{width:26px;height:26px}.sequencer-compact .track-label{width:40px;min-width:40px;flex:0 0 40px;font-size:.7rem;padding-right:3px}}.component-toggle-container{width:100%;display:flex;justify-content:center;margin-bottom:12px}.component-toggle-button{padding:8px 16px;font-size:.9rem;background:linear-gradient(145deg,#444,#333);color:#fff;border:none;border-radius:20px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 5px #0003;position:relative;overflow:hidden}.component-toggle-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translate(-100%);transition:transform .6s ease}.component-toggle-button:hover:before{transform:translate(100%)}.component-toggle-button.sequencer-active{background:linear-gradient(145deg,#4a90e2,#3a7bc8)}.component-toggle-button.adsr-active{background:linear-gradient(145deg,#9b59b6,#8e44ad)}@media (prefers-color-scheme: light){.component-toggle-button{background:linear-gradient(145deg,#e0e0e0,#d0d0d0);color:#333;box-shadow:0 2px 5px #0000001a}.component-toggle-button.sequencer-active{background:linear-gradient(145deg,#3a7bc8,#2a6cb8);color:#fff}.component-toggle-button.adsr-active{background:linear-gradient(145deg,#8e44ad,#7e349d);color:#fff}}@media (max-width: 768px){.component-toggle-button{font-size:.8rem;padding:6px 12px}}.component-toggle-container{display:flex;justify-content:center;margin-bottom:12px}.segmented-control{display:flex;background:rgba(30,30,40,.6);border-radius:28px;padding:4px;box-shadow:0 2px 8px #0000004d,inset 0 1px 2px #0000004d;position:relative;border:1px solid rgba(255,255,255,.1);width:fit-content}.segmented-control-option{padding:8px 16px;font-size:.9rem;font-weight:600;color:#fff9;cursor:pointer;position:relative;z-index:1;text-align:center;border-radius:20px;transition:color .3s ease;-webkit-user-select:none;user-select:none;min-width:120px}.three-segments .segmented-control-option{min-width:110px;padding:8px;font-size:.85rem}.segmented-control-option.active{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3)}.segmented-control-slider{position:absolute;top:4px;left:4px;bottom:4px;width:calc(50% - 4px);background:linear-gradient(145deg,#2a5b9e,#3672c5);border-radius:20px;transition:transform .3s ease,background .3s ease;box-shadow:0 2px 6px #0003;z-index:0;border:1px solid rgba(255,255,255,.1)}.three-segments .segmented-control-slider{width:calc(33.33% - 4px)}.segmented-control-slider.center{transform:translate(100%);background:linear-gradient(145deg,#8e44ad,#9b59b6)}.segmented-control-slider.right{transform:translate(100%);background:linear-gradient(145deg,#1abc9c,#16a085)}.three-segments .segmented-control-slider.right{transform:translate(200%)}@media (prefers-color-scheme: light){.segmented-control{background:rgba(230,230,235,.8);box-shadow:0 2px 8px #0000001a,inset 0 1px 2px #ffffff80;border:1px solid rgba(0,0,0,.1)}.segmented-control-option{color:#1e1e28b3}.segmented-control-option.active{color:#fff}.segmented-control-slider{background:linear-gradient(145deg,#2c62a8,#3a7fd4)}.segmented-control-slider.center{background:linear-gradient(145deg,#7d3c98,#8e44ad)}.segmented-control-slider.right{background:linear-gradient(145deg,#16a085,#1abc9c)}}@media (max-width: 768px){.segmented-control{max-width:90%}.segmented-control-option{padding:6px 10px;font-size:.8rem;min-width:90px}.three-segments .segmented-control-option{min-width:85px;padding:6px 4px;font-size:.75rem}}@media (max-width: 480px){.segmented-control-option{font-size:.75rem;padding:6px 8px;min-width:70px}.three-segments .segmented-control-option{min-width:70px;padding:6px 2px;font-size:.7rem}}.chord-detection-container{background:transparent;border-radius:10px;padding:0;box-shadow:none;display:flex;flex-direction:column;align-items:center}.chord-detection-container .chord-display{width:100%;box-shadow:none;background:transparent;display:flex;flex-direction:column}.chord-detection-container .active-notes{display:none}.chord-detection-container .detected-chord{width:100%;padding:15px 20px;border-radius:4px;background-color:#2a2a2a;box-shadow:none}.chord-detection-container .detected-chord h3{text-align:center;font-size:1.2rem;margin-bottom:10px;color:#fff}.chord-detection-container .chord-content{display:flex;flex-direction:column;align-items:center;min-height:60px}.chord-detection-container .detection-result{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative;padding-top:0;gap:8px}.chord-detection-container .detection-tag{position:relative;padding:.2rem .5rem;border-radius:4px;font-size:.7rem;font-weight:500;text-transform:uppercase;margin-right:.5rem;top:0;right:0}.chord-detection-container .chord{font-size:1.8em;font-weight:700;color:#90caf9;padding:.3em .6em;background-color:#333;border-radius:4px;text-shadow:none;text-align:center;min-width:100px}.chord-detection-container .staff-notation-container{width:100%;display:flex;flex-direction:column;align-items:center;background-color:#2a2a2a;border-radius:4px}.chord-detection-container .staff-notation-container h3{display:none}.chord-detection-container .staff-notation-layout{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding:1rem}.chord-detection-container .staff-notation{flex:1;width:50%;height:220px;margin-bottom:12px}.chord-detection-container .circle-of-fifths{flex:1;width:50%;height:220px;background-color:#2a2a2a;border-radius:4px;padding:0;margin:0;display:flex;justify-content:center;align-items:center}.chord-detection-container .circle-container{width:100%;height:100%;max-width:160px;max-height:160px}.chord-detection-container .staff-notation svg{width:100%;height:100%;max-height:220px;display:block}@media (prefers-color-scheme: light){.chord-detection-container .detected-chord{background-color:#f5f5f5;border:1px solid #e0e0e0}.chord-detection-container .detected-chord h3{color:#333}.chord-detection-container .chord{background-color:#e0e0e0;color:#1976d2;text-shadow:none}.chord-detection-container .circle-of-fifths,.chord-detection-container .staff-notation-container{background-color:#f5f5f5;border:1px solid #e0e0e0}}@media (max-width: 768px){.chord-detection-container .chord{font-size:1.6rem}.chord-detection-container .staff-notation-layout{flex-direction:column;align-items:center;gap:15px}.chord-detection-container .staff-notation{max-width:100%;width:100%;height:180px}.chord-detection-container .circle-of-fifths{max-width:100%;width:100%;height:180px;margin-top:15px}.chord-detection-container .circle-container{max-width:180px;max-height:180px}}@media (max-width: 480px){.chord-detection-container .chord{font-size:1.4rem}.chord-detection-container .staff-notation,.chord-detection-container .circle-of-fifths{height:150px}.chord-detection-container .circle-container{max-width:150px;max-height:150px}}.chord-detection-toggle{display:flex;justify-content:center;margin:15px 0}.chord-detection-info{color:#aaa;font-size:.9rem;line-height:1.5;text-align:center;margin-top:10px;max-width:400px}@media (prefers-color-scheme: light){.chord-detection-container{background:transparent}.chord-detection-info{color:#666}}@media (prefers-color-scheme: light){.sequencer-container{background:linear-gradient(135deg,#f0f0f0 0%,#e0e0e0 100%);box-shadow:0 8px 20px #0000001a,0 2px 5px #0000000d;border:1px solid #ddd}.sequencer-header h2{color:#333;text-shadow:none}.sequencer-controls{background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.1)}.steps-control label,.bpm-control label{color:#333}.sequencer-grid{background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1)}.track-label{color:#333;text-shadow:none}.sequencer-cell{background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border:1px solid #ccc;box-shadow:inset 0 1px 3px #0000001a}.sequencer-cell:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0)}.beat-marker{color:#0000004d}.sequencer-help{color:#666;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.1)}.play-button{background:linear-gradient(145deg,#e8e8e8,#d8d8d8);border:1px solid #ccc;color:#333;box-shadow:0 2px 4px #0000001a}.play-button:hover{background:linear-gradient(145deg,#f0f0f0,#e0e0e0);box-shadow:0 4px 8px #00000026}.play-button.playing{background:linear-gradient(145deg,#27ae60,#2ecc71);border-color:#27ae60;color:#fff;box-shadow:0 0 10px #2ecc714d}.play-button.playing:hover{background:linear-gradient(145deg,#2ecc71,#3dd382)}.sequencer-track:nth-child(1) .track-label{color:#3a7bc8}.sequencer-track:nth-child(2) .track-label{color:#c0392b}.sequencer-track:nth-child(3) .track-label{color:#f39c12}.sequencer-track:nth-child(4) .track-label{color:#27ae60}.sequencer-track:nth-child(5) .track-label{color:#8e44ad}}.play-icon{display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;width:24px;height:24px}.adsr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.adsr-header h3{margin:0;font-size:1.3rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}@media (prefers-color-scheme: light){.adsr-header{border-bottom:1px solid rgba(0,0,0,.1)}.adsr-header h3{color:#333;text-shadow:none}}.preset-selector{display:flex;align-items:center;margin-left:10px}.preset-dropdown{background-color:#222;color:#fff;border:1px solid #444;border-radius:4px;padding:6px 28px 6px 10px;font-size:14px;cursor:pointer;transition:all .2s ease;min-width:140px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:12px}.preset-dropdown:hover,.preset-dropdown:focus{background-color:#333;border-color:#666;outline:none}.preset-dropdown option{background-color:#222;color:#fff}@media (prefers-color-scheme: light){.preset-dropdown{background-color:#f0f0f0;color:#333;border-color:#ccc;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")}.preset-dropdown:hover,.preset-dropdown:focus{background-color:#e0e0e0;border-color:#999}.preset-dropdown option{background-color:#f0f0f0;color:#333}}@media (max-width: 768px){.preset-selector{margin-top:10px;margin-left:0;width:100%}.preset-dropdown{width:100%}}.app-footer{width:100%;background-color:#2a2a2a;padding:20px 0;margin-top:50px;border-top:1px solid rgba(255,255,255,.1)}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 20px}.footer-links{display:flex;align-items:center;gap:20px}.feedback-link{color:#007bff;text-decoration:none;font-weight:500;padding:8px 16px;border-radius:6px;transition:all .3s ease;display:flex;align-items:center;gap:8px}.feedback-link:hover{background-color:#007bff1a;color:#0056b3;transform:translateY(-1px)}@media (max-width: 768px){.footer-content{flex-direction:column;gap:16px}.footer-links{order:1}}@media (prefers-color-scheme: light){.app-footer{background-color:#f5f5f5;border-top:1px solid rgba(0,0,0,.1)}.feedback-link{color:#007bff}.feedback-link:hover{background-color:#007bff1a;color:#0056b3}}.piano-keyboard-mode-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:8px 12px;background-color:#00000026;border-radius:8px;width:100%;box-sizing:border-box;max-width:100%;overflow:hidden}.keyboard-instructions{display:flex;flex-direction:column;gap:5px;flex:1;overflow:hidden;min-width:0}.midi-instruction{font-size:.9rem;color:#fffc;margin:0}.piano-keyboard-text{font-size:.95rem;color:#fff;padding-right:10px;margin:0}.piano-keyboard-mode-container .pad-keyboard-toggle{margin:0 15px}.keyboard-controls-right{display:flex;align-items:center;justify-content:flex-end;flex:1;overflow:hidden;min-width:0}@media (max-width: 768px){.piano-keyboard-mode-container{flex-direction:column;align-items:flex-start;gap:12px;padding:10px;max-width:100%;box-sizing:border-box;margin-right:0}.keyboard-instructions{margin-bottom:5px;width:100%}.piano-keyboard-mode-container .pad-keyboard-toggle{margin:5px 0;align-self:center}.keyboard-controls-right{width:100%;justify-content:center}.midi-instruction,.piano-keyboard-text{font-size:.85rem}}@media (prefers-color-scheme: light){.piano-keyboard-mode-container{background-color:#0000000d}.midi-instruction{color:#000000b3}.piano-keyboard-text{color:#333}.keyboard-controls-right .octave-display{color:#3a7bc8}}.keyboard-controls-right .octave-display{color:#4a90e2;font-weight:500;white-space:nowrap}@media (max-width: 768px){.keyboard-controls-right{flex-direction:column;align-items:flex-start;gap:8px}}.analytics-info{max-width:800px;margin:2rem auto;padding:1.5rem;border-radius:8px;background:linear-gradient(145deg,#2a2a2a,#1a1a1a);box-shadow:0 4px 12px #0003;color:#fff}.analytics-info h2{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:#61dafb}.analytics-info ol{margin:1rem 0;padding-left:1.5rem}.analytics-info li{margin-bottom:.5rem}.analytics-info a{color:#61dafb;text-decoration:underline;transition:color .2s}.analytics-info a:hover{color:#fff}.analytics-info .note{margin-top:1rem;padding:.75rem;border-left:3px solid #61dafb;background-color:#61dafb1a;font-size:.9rem}@media (prefers-color-scheme: light){.analytics-info{background:linear-gradient(145deg,#f5f5f5,#ffffff);box-shadow:0 4px 12px #0000001a;color:#333}.analytics-info h2,.analytics-info a{color:#06c}.analytics-info a:hover{color:#036}.analytics-info .note{border-left:3px solid #0066cc;background-color:#0066cc0d}}.mobile-warning-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000d9;z-index:9999;display:flex;justify-content:center;align-items:center;padding:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.mobile-warning-container{max-width:450px;background:linear-gradient(145deg,#1a1a1a,#272727);border-radius:12px;padding:2rem;box-shadow:0 10px 25px #00000080;text-align:center;color:#fff}.mobile-warning-icon{font-size:3rem;margin-bottom:1rem;color:#f39c12;animation:pulse-warning 2s infinite}@keyframes pulse-warning{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.mobile-warning-container h2{margin-bottom:1rem;font-size:1.5rem;color:#f39c12}.mobile-warning-message{margin-bottom:1.5rem;line-height:1.5;font-size:1.1rem}.mobile-warning-recommendation{display:flex;align-items:center;justify-content:center;gap:1rem;background-color:#2ecc7133;border-left:4px solid #2ecc71;padding:1rem;margin-bottom:1.5rem;border-radius:8px}.device-icon{font-size:1.8rem;color:#2ecc71}.mobile-limitations{margin:1.5rem 0;text-align:left;background-color:#3498db1a;padding:1rem;border-radius:8px}.mobile-limitations h3{margin-bottom:.75rem;color:#3498db;font-size:1.1rem}.mobile-limitations ul{margin-left:1.5rem}.mobile-limitations li{margin-bottom:.5rem}.mobile-warning-actions{margin-top:1.5rem}.show-details-button{background:none;border:1px solid #3498db;color:#3498db;border-radius:50px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:all .3s ease}.show-details-button:hover{background-color:#3498db1a}@media (prefers-color-scheme: light){.mobile-warning-container{background:linear-gradient(145deg,#f5f5f5,#ffffff);color:#333;box-shadow:0 10px 25px #0000001a}.mobile-warning-container h2,.mobile-warning-icon{color:#e67e22}.mobile-warning-recommendation{background-color:#2ecc711a}.device-icon{color:#27ae60}.mobile-limitations{background-color:#3498db0d}.mobile-limitations h3{color:#2980b9}.show-details-button{border:1px solid #2980b9;color:#2980b9}.show-details-button:hover{background-color:#3498db0d}}.limitations-scroll-container{max-height:150px;overflow-y:auto;margin:.5rem 0;padding-right:.5rem;scrollbar-width:thin;scrollbar-color:rgba(97,218,251,.5) rgba(30,30,30,.3)}.limitations-scroll-container::-webkit-scrollbar{width:8px}.limitations-scroll-container::-webkit-scrollbar-track{background:rgba(30,30,30,.3);border-radius:4px}.limitations-scroll-container::-webkit-scrollbar-thumb{background-color:#61dafb80;border-radius:4px}.limitations-scroll-container::-webkit-scrollbar-thumb:hover{background-color:#61dafbb3}@media (prefers-color-scheme: light){.limitations-scroll-container{scrollbar-color:rgba(0,102,204,.5) rgba(240,240,240,.5)}.limitations-scroll-container::-webkit-scrollbar-track{background:rgba(240,240,240,.5)}.limitations-scroll-container::-webkit-scrollbar-thumb{background-color:#0066cc80}.limitations-scroll-container::-webkit-scrollbar-thumb:hover{background-color:#0066ccb3}}