:root{--bg-color: #f0f0f0;--container-bg: white;--text-color: #333;--button-bg: #f0f0f0;--button-border: #ccc;--button-active: #4CAF50;--button-active-text: white;--piano-white: white;--piano-black: black;--piano-highlight: #4CAF50;--shadow-color: rgba(0,0,0,.1);--section-bg: #f9f9f9;--key-glow: none;--key-transition: all .3s ease;--piano-white-active: white;--piano-black-active: black;--piano-highlight-active: #4CAF50;--key-shadow: none;--arpeggio-flash: #60ff65;--arpeggio-glow: rgba(96, 255, 101, .4)}[data-theme=pastel]{--bg-color: #f7e8ed;--container-bg: #fdf6f8;--text-color: #6b5c61;--button-bg: #e8d0d8;--button-border: #d4b5c0;--button-active: #b793a3;--button-active-text: #ffffff;--piano-white: #fff5f7;--piano-black: #796b70;--piano-highlight: #dba5b9;--shadow-color: rgba(179, 147, 163, .2);--section-bg: #fceef3;--key-glow: none;--key-transition: all .3s ease;--piano-white-active: white;--piano-black-active: black;--piano-highlight-active: #4CAF50;--key-shadow: none;--arpeggio-flash: #ffb5c5;--arpeggio-glow: rgba(255, 181, 197, .4)}[data-theme=soft]{--bg-color: #e6ecf2;--container-bg: #f5f8fa;--text-color: #546e7a;--button-bg: #d5e1e8;--button-border: #b3c6d3;--button-active: #88a2b2;--button-active-text: #ffffff;--piano-white: #f8fafc;--piano-black: #5c7280;--piano-highlight: #9ab5c5;--shadow-color: rgba(84, 110, 122, .15);--section-bg: #edf2f7;--key-glow: none;--key-transition: all .3s ease;--piano-white-active: white;--piano-black-active: black;--piano-highlight-active: #4CAF50;--key-shadow: none;--arpeggio-flash: #9ab5c5;--arpeggio-glow: rgba(154, 181, 197, .4)}[data-theme=contrast]{--bg-color: #1a1a1a;--container-bg: #2d2d2d;--text-color: #ffffff;--button-bg: #404040;--button-border: #505050;--button-active: #00ff00;--button-active-text: #000000;--piano-white: #ffffff;--piano-black: #000000;--piano-highlight: #00ff00;--shadow-color: rgba(0, 255, 0, .2);--section-bg: #363636;--key-glow: none;--key-transition: all .3s ease;--piano-white-active: white;--piano-black-active: black;--piano-highlight-active: #4CAF50;--key-shadow: none;--arpeggio-flash: #00ff00;--arpeggio-glow: rgba(0, 255, 0, .4)}[data-theme=dark]{--bg-color: #121212;--container-bg: #1e1e1e;--text-color: #e0e0e0;--button-bg: #2d2d2d;--button-border: #404040;--button-active: #4a9eff;--button-active-text: #ffffff;--piano-white: #e0e0e0;--piano-black: #1a1a1a;--piano-highlight: #4a9eff;--shadow-color: rgba(74, 158, 255, .2);--section-bg: #2a2a2a;--key-glow: none;--key-transition: all .3s ease;--piano-white-active: white;--piano-black-active: black;--piano-highlight-active: #4CAF50;--key-shadow: none;--arpeggio-flash: #4a9eff;--arpeggio-glow: rgba(74, 158, 255, .4)}[data-theme=dark-pastel]{--bg-color: #2a2438;--container-bg: #352f44;--text-color: #dbd8e3;--button-bg: #5c5470;--button-border: #6c6783;--button-active: #b9a2d8;--button-active-text: #2a2438;--piano-white: #dbd8e3;--piano-black: #352f44;--piano-highlight: #b9a2d8;--shadow-color: rgba(219, 216, 227, .1);--section-bg: #413a52;--key-glow: none;--key-transition: all .3s ease;--piano-white-active: white;--piano-black-active: black;--piano-highlight-active: #4CAF50;--key-shadow: none;--arpeggio-flash: #b9a2d8;--arpeggio-glow: rgba(185, 162, 216, .4)}[data-audio-enabled=true]{--key-glow: 0 0 10px rgba(255, 255, 255, .2);--piano-white-active: #fff;--piano-black-active: #000;--piano-highlight-active: #60ff65;--key-shadow: 0 0 15px rgba(255, 255, 255, .1)}[data-audio-enabled=false]{--piano-white-active: #d4d4d4;--piano-black-active: #2d2d2d;--piano-highlight-active: #808080;filter:saturate(.8)}body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;background-color:var(--bg-color);color:var(--text-color)}.container{text-align:center;background-color:var(--container-bg);padding:20px;border-radius:10px;box-shadow:0 4px 6px var(--shadow-color);overflow-x:auto}.piano-container{width:100%;overflow-x:auto;margin:20px 0}.piano{display:flex;justify-content:center;margin-bottom:20px;min-width:1200px}.piano-key{width:40px;height:200px;border:1px solid black;margin:0 2px;display:flex;align-items:flex-end;justify-content:center;transition:var(--key-transition);box-shadow:var(--key-shadow);position:relative}.piano-key.white{background-color:var(--piano-white-active);border:1px solid rgba(0,0,0,.2);z-index:1;color:var(--text-color)}.piano-key.black{background-color:var(--piano-black-active);height:120px;width:24px;margin-left:-12px;margin-right:-12px;z-index:2;color:var(--piano-white)}.piano-key.highlighted{background-color:var(--piano-highlight-active);box-shadow:var(--key-glow);color:var(--piano-white)}.piano-key.arpeggio-active{animation:arpeggioFlash .2s ease-out}.piano-key-label{position:absolute;bottom:5px;font-size:10px;color:#666}.mode-indicator{position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:8px;height:8px;border-radius:50%;background-color:red;display:none}.piano-key.mode-active .mode-indicator{display:block}@keyframes arpeggioFlash{0%{background-color:var(--piano-highlight-active);box-shadow:0 0 20px var(--piano-highlight-active);transform:scale(1.02)}to{background-color:var(--piano-white-active);box-shadow:var(--key-shadow);transform:scale(1)}}[data-audio-enabled=true] .piano-key:hover{filter:brightness(1.1);box-shadow:var(--key-glow)}[data-audio-enabled=true] .piano-key.highlighted{box-shadow:0 0 15px var(--piano-highlight-active);filter:brightness(1.2)}.controls{display:flex;flex-direction:column;align-items:center;gap:10px}.auto-next-container{display:flex;align-items:center;gap:10px}#circleOfFifthsBtn{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s}#circleOfFifthsBtn.active{background-color:var(--button-active);color:var(--button-active-text)}#nextChordBtn{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s}#nextChordBtn:hover{background-color:#e0e0e0}#previousChordBtn{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s;margin-right:5px}#previousChordBtn:hover{background-color:#e0e0e0}input[type=number]{width:60px}.toggle-container{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0}.toggle-container button{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:all .3s ease;white-space:nowrap}.toggle-container button.active{background-color:var(--button-active);color:var(--button-active-text)}.toggle-container button:hover{transform:translateY(-2px);box-shadow:0 2px 4px var(--shadow-color)}.additional-intervals-section{margin-top:20px;background-color:var(--section-bg);padding:15px;border-radius:8px;box-shadow:0 2px 4px var(--shadow-color)}.additional-intervals-section.hidden{display:none}.interval-categories{display:flex;flex-wrap:wrap;gap:15px}.interval-category{background-color:#fff;border:1px solid #ddd;border-radius:5px;padding:10px;flex:1;min-width:200px}.interval-category h4{margin-top:0;border-bottom:1px solid #eee;padding-bottom:5px}.interval-category button{display:block;width:100%;margin:5px 0;padding:8px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s}.interval-category button:hover{background-color:#e0e0e0}.circle-of-fifths-container{display:flex;align-items:center;gap:5px}#circleOfFifthsSelect{padding:5px;margin-left:5px;border:1px solid var(--button-border);border-radius:4px}.mode-container{margin-top:15px;text-align:center}.mode-buttons{display:flex;justify-content:center;gap:10px;margin-bottom:10px}.mode-buttons button{padding:8px 15px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s}.mode-buttons button.active{background-color:var(--button-active);color:var(--button-active-text)}.information-section{margin-top:20px;background-color:var(--section-bg);padding:20px;border-radius:8px;box-shadow:0 2px 4px var(--shadow-color)}.information-section.hidden{display:none}.info-content{text-align:left}.info-content section{margin-bottom:20px}.info-content h4{border-bottom:1px solid #eee;padding-bottom:10px;color:#333}.info-content ul{padding-left:20px}button{background-color:var(--button-bg);border-color:var(--button-border);color:var(--text-color)}button.active{background-color:var(--button-active);color:var(--button-active-text)}.theme-switcher{display:flex;gap:10px;margin-bottom:15px;justify-content:center}.theme-btn{padding:8px 15px;border-radius:20px;cursor:pointer;transition:all .3s ease}.theme-btn:hover{transform:translateY(-2px);box-shadow:0 2px 4px var(--shadow-color)}.theme-btn.active{transform:scale(1.05)}#audioToggle{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s;margin-right:5px}#audioToggle.active{background-color:var(--button-active);color:var(--button-active-text)}.fx-panel{background-color:var(--section-bg);padding:20px;border-radius:8px;margin-top:20px;box-shadow:0 2px 4px var(--shadow-color)}.fx-section{transition:all .3s ease}.fx-section.hidden{display:none}.fx-section h3{color:var(--text-color);border-bottom:1px solid var(--button-border);padding-bottom:5px;margin-bottom:10px}.slider-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:10px}.slider-group{display:flex;flex-direction:column}.slider-label{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--text-color)}.fx-slider{width:100%;margin:10px 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--button-bg);outline:none}.fx-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--button-active);cursor:pointer}.fx-slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--button-active);cursor:pointer}.fx-panel select{padding:5px;background-color:var(--button-bg);color:var(--text-color);border:1px solid var(--button-border);border-radius:4px}.fx-toggle{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--text-color);cursor:pointer;border-radius:4px;transition:all .3s ease}.fx-toggle.active{background-color:var(--button-active);color:var(--button-active-text)}.fx-select{width:100%;padding:8px;margin-bottom:15px;background-color:var(--button-bg);color:var(--text-color);border:1px solid var(--button-border);border-radius:4px;cursor:pointer}.fx-select:hover{border-color:var(--button-active)}.fx-select option{background-color:var(--container-bg);color:var(--text-color)}.midi-section{display:flex;flex-direction:column;gap:10px;padding:10px}#midiDeviceSelector{padding:8px;border-radius:4px;border:1px solid var(--button-border);background-color:var(--button-bg);color:var(--text-color);width:100%;max-width:300px;margin:0 auto}#midiDeviceSelector:focus{outline:none;border-color:var(--button-active)}#midiStatus{text-align:center;padding:5px;border-radius:4px;background-color:var(--section-bg);color:var(--text-color)}.progression-section{display:flex;flex-direction:column;gap:10px;padding:10px}.progression-description{font-size:.9em;color:var(--text-color);padding:5px;background:var(--section-bg);border-radius:4px;margin-top:5px}.bpm-controls{display:inline-flex;align-items:center;gap:5px;margin:0 10px}#bpmInput{width:60px;padding:4px;border:1px solid var(--button-border);border-radius:4px;background:var(--button-bg);color:var(--text-color)}#metronomeToggle{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);cursor:pointer;transition:background-color .3s}#metronomeToggle.active{background-color:var(--button-active);color:var(--button-active-text)}.control-buttons{display:flex;justify-content:center;margin:15px 0}.control-btn{padding:10px 20px;font-size:1.1em;background-color:var(--button-bg);border:2px solid var(--button-border);color:var(--text-color);border-radius:5px;cursor:pointer;transition:all .3s ease}.control-btn:hover{background-color:var(--button-active);color:var(--button-active-text);transform:translateY(-2px);box-shadow:0 2px 4px var(--shadow-color)}.control-btn:active{transform:translateY(0)}.tooltip{background-color:var(--container-bg);color:var(--text-color);padding:8px 12px;border-radius:4px;border:1px solid var(--button-border);font-size:14px;z-index:1000;box-shadow:0 2px 4px var(--shadow-color);pointer-events:none;animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#simpleChordsBtn{background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--text-color);padding:5px 10px;cursor:pointer;transition:all .3s ease}#simpleChordsBtn.active{background-color:var(--button-active);color:var(--button-active-text)}.midi-controls{display:flex;flex-direction:column;gap:15px;margin-top:15px}.midi-control-group{display:flex;justify-content:space-between;gap:20px}.midi-octave-controls,.midi-progression-controls{display:flex;align-items:center;gap:10px}.midi-wheel-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.midi-volume-control,.midi-pitch-control,.midi-mod-control{display:flex;flex-direction:column;align-items:center;gap:5px}.midi-volume-control input,.midi-pitch-control input,.midi-mod-control input{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;border-radius:5px;background:var(--button-bg);outline:none}.midi-volume-control input::-webkit-slider-thumb,.midi-pitch-control input::-webkit-slider-thumb,.midi-mod-control input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--button-active);cursor:pointer}.midi-volume-control span,.midi-pitch-control span,.midi-mod-control span{font-size:.8em;color:var(--text-color)}.midi-octave-controls button,.midi-progression-controls button{padding:5px 10px;background-color:var(--button-bg);border:1px solid var(--button-border);color:var(--text-color);cursor:pointer;border-radius:4px;transition:all .3s ease}.midi-octave-controls button:hover,.midi-progression-controls button:hover{background-color:var(--button-active);color:var(--button-active-text)}#midiOctaveValue,#midiProgressionValue{min-width:30px;text-align:center;padding:2px 5px;background-color:var(--section-bg);border-radius:3px}