.control-row{display:flex;align-items:center;padding:16px 60px 16px 12px;gap:6px;position:relative}.btn-group{display:flex;gap:6px}.btn-with-label{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.btn-label{font-size:.48rem;color:#666;text-transform:uppercase;letter-spacing:.05em}.menu-btn{width:48px;height:28px;border-radius:14px;border:none;cursor:pointer;font-size:0;transition:all .15s ease}.menu-btn.yellow{background:linear-gradient(180deg,#e8a832,#c89028);box-shadow:0 3px 8px #e8a8324d}.menu-btn.yellow.active{box-shadow:0 0 15px #e8a83299}.menu-btn.dark{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#4a4a4a,#2a2a2a);box-shadow:0 3px 8px #0006;position:relative}.menu-btn.dark:hover{background:linear-gradient(180deg,#5a5a5a,#3a3a3a)}.menu-btn.dark.active{box-shadow:0 0 12px #fff3}.menu-btn.red{width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,#d44040,#b33030);box-shadow:0 3px 8px #d440404d}.menu-btn.red.recording{animation:pulse-red 1s infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 15px #d4404099}50%{box-shadow:0 0 25px #d44040e6}}.spacer{flex:1}.bass-light{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:#222;transition:all .2s ease}.bass-light.active{background:#e8a832;box-shadow:0 0 6px #e8a832,0 0 10px #e8a832}.chord-display{text-align:center;position:absolute;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.chord-name{font-size:2rem;font-weight:700;color:#fff;line-height:1}.chord-name sup{font-size:.45em;vertical-align:super}.chord-notes{font-size:.65rem;color:#666;margin-top:2px}.key-indicator{font-size:.55rem;color:#c4a870;margin-top:4px;opacity:0;transition:opacity .2s}.key-indicator.active{opacity:1}.dropdown-menu{position:absolute;top:100%;left:50%;transform:translate(-50%);background:#2a2a2a;border:1px solid #444;border-radius:8px;padding:8px 0;min-width:150px;z-index:200;display:none;box-shadow:0 8px 24px #00000080;margin-top:8px}.dropdown-menu.visible{display:block}.sound-menu{max-height:400px;overflow-y:auto;min-width:180px}.dropdown-category{padding:8px 16px 4px;font-size:.55rem;font-weight:700;color:#e8a832;text-transform:uppercase;letter-spacing:.1em;border-top:1px solid #3a3a3a;margin-top:4px}.dropdown-category:first-child{border-top:none;margin-top:0}.dropdown-item{padding:8px 16px;font-size:.75rem;color:#999;cursor:pointer;transition:all .1s ease}.dropdown-item:hover{background:#333;color:#fff}.dropdown-item.active{color:#e8a832}.effects-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);background:#2a2a2a;border:1px solid #444;border-radius:12px;padding:16px;min-width:260px;z-index:200;display:none;box-shadow:0 8px 24px #00000080;margin-top:8px}.effects-panel.visible{display:block}.volume-panel{min-width:180px;left:auto;right:0;transform:none}.effect-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.effect-row:last-child{margin-bottom:0}.effect-label{font-size:.65rem;color:#888;width:55px;text-transform:uppercase}.effect-slider{flex:1;height:6px;-webkit-appearance:none;background:#444;border-radius:3px;outline:none}.effect-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#e8a832;border-radius:50%;cursor:pointer}.midi-select{width:100%;padding:6px;background:#333;border:1px solid #555;color:#ccc;border-radius:4px;font-size:.75rem}.option-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.option-label{font-size:.75rem;color:#ccc}.option-toggle{padding:6px 12px;background:#444;border:1px solid #555;border-radius:4px;color:#888;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .15s ease}.option-toggle:hover{background:#555;color:#ccc}.option-toggle.active{background:#e8a832;border-color:#e8a832;color:#1a1a1a}.option-hint{font-size:.65rem;color:#666;line-height:1.4;margin-bottom:12px}.option-divider{height:1px;background:#444;margin:8px 0}.drum-panel{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:#2a2a2a;border:1px solid #444;border-radius:12px;padding:12px;width:280px;z-index:200;display:none;box-shadow:0 -8px 24px #00000080;margin-bottom:8px}.drum-panel.visible{display:block}.drum-panel-title{font-size:.65rem;color:#e8a832;text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;text-align:center}.drum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:300px;overflow-y:auto}.drum-item{padding:8px 10px;background:#333;border:1px solid #444;border-radius:6px;color:#aaa;font-size:.7rem;cursor:pointer;transition:all .15s ease;text-align:center}.drum-item:hover{background:#3a3a3a;color:#fff;border-color:#555}.drum-item.active{background:#d44040;border-color:#d44040;color:#fff}.loop-indicator{display:none;padding:4px 10px;background:#d4404033;border-radius:10px;font-size:.6rem;color:#d44040;white-space:nowrap;position:absolute;left:50%;transform:translate(calc(-50% - 60px))}.loop-indicator.visible{display:block}.tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#000;color:#fff;padding:6px 10px;border-radius:6px;font-size:.6rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:300}.tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:#000}.btn-with-label:hover .tooltip{opacity:1}.midi-mapping-btn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:linear-gradient(135deg,#8a2be226,#8a2be20d);border:1px solid rgba(138,43,226,.3);border-radius:8px;color:#fff;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.midi-mapping-btn:hover{background:linear-gradient(135deg,#8a2be240,#8a2be21a);border-color:#8a2be280}.midi-mapping-btn span:first-child{font-size:1.1rem}.mapping-badge{margin-left:auto;background:#ffffff26;padding:2px 8px;border-radius:10px;font-size:.75rem;font-weight:600}.mapping-badge.enabled{background:#8a2be266;color:#e0c0ff}.chord-section{padding:16px 12px;display:flex;flex-direction:column;gap:12px}.chord-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.chord-btn{width:56px;height:56px;border-radius:10px;border:none;background:linear-gradient(180deg,#4a4a4a,#2a2a2a);color:#666;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s ease;box-shadow:0 4px 8px #0006,inset 0 1px #ffffff14;position:relative;display:flex;align-items:center;justify-content:center}.chord-btn:before{content:"";position:absolute;width:75%;height:75%;border-radius:50%;background:linear-gradient(135deg,#000000e6,#80808000,#cccccc1a);pointer-events:none}.chord-btn:after{content:"";position:absolute;width:calc(75% - 4px);height:calc(75% - 4px);border-radius:50%;background:linear-gradient(135deg,#cccccc1a,#80808000,#000000e6);pointer-events:none}.chord-btn span{position:relative;z-index:1}.chord-btn:hover{background:linear-gradient(180deg,#5a5a5a,#3a3a3a);color:#888}.chord-btn.active{background:linear-gradient(180deg,#5a5a5a,#3a3a3a);color:#fff;box-shadow:0 4px 8px #0006,inset 0 1px #ffffff1f}.knobs-section{display:flex;flex-direction:column;align-items:center;padding:16px 12px;gap:8px}.knob-row{display:flex;align-items:center;gap:10px}.knob-label{font-size:.5rem;color:#555;text-transform:uppercase;letter-spacing:.08em;text-align:right;line-height:1.2}.knob{width:80px;height:80px;border-radius:50%;background:linear-gradient(145deg,#3a3a3a,#1a1a1a);box-shadow:0 6px 12px #00000080,inset 0 2px 4px #ffffff0d;position:relative;cursor:grab}.knob:hover{box-shadow:0 6px 12px #00000080,inset 0 2px 4px #ffffff0d,0 0 15px #e8a83233}.knob.small{width:45px;height:45px}.knob-indicator{position:absolute;top:10px;left:50%;transform-origin:50% 30px;width:4px;height:18px;background:#e8a832;border-radius:2px;margin-left:-2px}.knob.small .knob-indicator{top:6px;width:3px;height:12px;margin-left:-1.5px;transform-origin:50% 16px}.knob-value{font-size:.9rem;color:#666;font-weight:600;min-width:20px;text-align:center}.knob-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3000;opacity:0;pointer-events:none;transition:opacity .2s ease;padding:40px;gap:30px}.knob-modal.visible{opacity:1;pointer-events:auto}.knob-modal-title{font-size:1.2rem;color:#c4a870;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.knob-modal-value{font-size:3rem;color:#fff;font-weight:700}.knob-modal-slider{width:80%;max-width:300px;height:12px;-webkit-appearance:none;background:#333;border-radius:6px;outline:none}.knob-modal-slider::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;background:#e8a832;border-radius:50%;cursor:pointer}.knob-modal-close{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#ccc;padding:12px 32px;border-radius:25px;font-size:1rem;cursor:pointer;margin-top:20px}.knob-modal-close:hover{background:#ffffff26;color:#fff}.keyboard-section{flex:1;display:flex;align-items:stretch;margin-right:0;border-radius:0 0 24px;overflow:hidden}.keyboard{position:relative;flex:1;display:flex;align-items:flex-end}.white-key{flex:1;height:100%;background:linear-gradient(180deg,#4a4a4a,#3a3a3a);border:1px solid #2a2a2a;border-bottom:none;border-right:none;border-radius:0;cursor:pointer;position:relative;z-index:1;transition:all .08s ease}.white-key:last-of-type{border-right:1px solid #2a2a2a}.white-key:hover{background:linear-gradient(180deg,#5a5a5a,#4a4a4a)}.white-key:active,.white-key.active{background:linear-gradient(180deg,#3a3a3a,#2a2a2a)}.white-key.highlighted{background:linear-gradient(180deg,#e8a832,#c89028)}.white-key.pressed{box-shadow:inset 0 0 0 3px #58c4ff}.white-key.highlighted.pressed{background:linear-gradient(180deg,#e8a832,#c89028);box-shadow:inset 0 0 0 3px #58c4ff}.black-key{width:13%;height:60%;background:linear-gradient(180deg,#5a5a5a,#4a4a4a);border-radius:0 0 4px 4px;cursor:pointer;position:absolute;z-index:2;top:0;transition:all .08s ease;box-shadow:0 4px 8px #0006;transform:translate(-50%)}.black-key:hover{background:linear-gradient(180deg,#6a6a6a,#5a5a5a)}.black-key:active,.black-key.active{background:linear-gradient(180deg,#4a4a4a,#3a3a3a)}.black-key.highlighted{background:linear-gradient(180deg,#e8a832,#c89028)}.black-key.pressed{box-shadow:inset 0 0 0 3px #58c4ff}.black-key.highlighted.pressed{background:linear-gradient(180deg,#e8a832,#c89028);box-shadow:inset 0 0 0 3px #58c4ff}.device{position:relative;width:800px;background:#1a1a1a;border-radius:24px;box-shadow:0 30px 60px #00000080,0 10px 20px #0000004d;transform:scale(.9);transform-origin:center center}.speaker-section{padding:16px 30px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#d4b88a,#c4a870 30%,#a89060)}.speaker-grille{display:flex;flex-direction:row;gap:5px;height:50px}.speaker-grille .slot{width:3px;height:100%;background:#00000059;border-radius:2px}.device-brand{font-size:.9rem;font-weight:300;font-style:italic;color:#555;letter-spacing:.05em;writing-mode:vertical-rl;transform:rotate(180deg);position:absolute;right:12px;top:20px;z-index:10}.main-panel{background:#1a1a1a;margin:0;border-radius:0 0 24px 24px;position:relative}.panel-shelf{height:12px;background:linear-gradient(180deg,#0a0a0a,#1a1a1a 20%,#2a2a2a,#3a3a3a 80%,#2a2a2a);box-shadow:inset 0 2px 4px #00000080}.bottom-section{display:flex;align-items:stretch;background:#252525;border-radius:16px 16px 24px 24px;min-height:200px;overflow:hidden}.start-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.tutorial-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:28px 32px;max-width:700px;width:100%;position:relative}.tutorial-card h1{font-size:2rem;font-weight:300;font-style:italic;color:#c4a870;text-align:center;margin:0 0 20px}.tutorial-close{position:absolute;top:16px;right:16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:36px;height:36px;border-radius:50%;font-size:1.4rem;cursor:pointer;z-index:1001;display:flex;align-items:center;justify-content:center;line-height:1}.tutorial-close:hover{background:#fff3}.tutorial-content{display:flex;flex-direction:column;gap:16px}.tutorial-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}.row-label{font-size:.65rem;color:#e8a832;text-transform:uppercase;letter-spacing:.1em;font-weight:600;min-width:45px}.modifier-row{display:flex;gap:4px}.mod-key{display:flex;flex-direction:column;align-items:center;gap:3px}.mod-key-cap{width:36px;height:36px;background:linear-gradient(180deg,#e8a832,#c89028);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:#1a1a1a;box-shadow:0 2px 6px #e8a8324d}.mod-key-label{font-size:.6rem;color:#888;font-weight:500}.piano-row{padding:8px 0}.piano-visual{position:relative;height:90px;display:flex;justify-content:center}.piano-container{position:relative;display:flex}.piano-white-key{width:38px;height:80px;background:linear-gradient(180deg,#4a4a4a,#3a3a3a);border:1px solid #2a2a2a;border-radius:0 0 5px 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;margin-right:-1px;position:relative}.piano-white-key:last-child{margin-right:0}.piano-black-key{position:absolute;width:26px;height:48px;background:linear-gradient(180deg,#5a5a5a,#3a3a3a);border-radius:0 0 4px 4px;top:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4px;box-shadow:0 3px 6px #00000080}.key-computer{font-weight:700;font-size:.8rem;color:#fff}.key-note{font-size:.5rem;color:#888;margin-top:1px}.piano-black-key .key-computer{font-size:.7rem}.piano-black-key .key-note{font-size:.45rem;color:#777}.controls-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}.control-item{display:flex;flex-direction:column;align-items:center;gap:4px}.control-keys{display:flex;gap:2px}.ctrl-key{background:#3a3a3a;border:1px solid #555;padding:3px 6px;border-radius:4px;font-size:.65rem;font-weight:600;color:#ccc;min-width:22px;text-align:center}.control-label{font-size:.6rem;color:#666}.start-btn{display:block;margin:20px auto 0;background:linear-gradient(180deg,#e8a832,#c89028);color:#1a1a1a;border:none;padding:14px 40px;font-size:.95rem;font-weight:600;border-radius:30px;cursor:pointer;box-shadow:0 6px 20px #e8a8324d;transition:transform .2s ease}.start-btn:hover{transform:scale(1.05)}.about-modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2001;opacity:0;pointer-events:none;transition:opacity .2s ease}.about-modal.visible{opacity:1;pointer-events:auto}.about-content{background:#1a1a1a;border:1px solid #333;border-radius:16px;padding:32px;max-width:500px;width:90%;color:#ccc;position:relative}.about-content h2{font-size:1.5rem;color:#e8a832;margin-bottom:20px;font-weight:300;font-style:italic}.about-content p{line-height:1.6;margin-bottom:16px;font-size:.9rem}.about-content .signature{margin-top:24px;font-style:italic;color:#888;text-align:right}.about-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#333;border:none;color:#999;cursor:pointer;font-size:1.2rem}.about-close:hover{background:#444;color:#fff}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal{background:#1a1a1a;border:1px solid #333;border-radius:16px;padding:24px;max-width:500px;width:90%;color:#ccc}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#fff}.modal-close{width:32px;height:32px;border-radius:50%;background:#333;border:none;color:#999;cursor:pointer;font-size:1.2rem}.modal-close:hover{background:#444;color:#fff}.modal-section{margin-bottom:16px}.modal-section h3{font-size:.8rem;color:#e8a832;margin-bottom:8px;text-transform:uppercase}.modal-section ul{list-style:none;font-size:.85rem}.modal-section li{padding:4px 0;display:flex;gap:12px}.modal-section kbd{background:#333;padding:2px 8px;border-radius:4px;font-family:inherit;min-width:50px;text-align:center;color:#fff}.rotate-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#1a1a1a;z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:24px;color:#888;text-align:center;padding:40px}.rotate-icon{font-size:4rem;animation:rotate-hint 2s ease-in-out infinite}@keyframes rotate-hint{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}.rotate-overlay h2{color:#c4a870;font-weight:300;font-style:italic;font-size:1.5rem}.rotate-overlay p{font-size:.9rem;max-width:280px;line-height:1.5}@media(max-width:900px)and (orientation:portrait){.rotate-overlay.active{display:flex}}@media(max-height:500px){.tutorial-card{padding:16px 20px}.tutorial-card h1{font-size:1.5rem;margin-bottom:12px}.tutorial-content{gap:10px}.mod-key-cap{width:28px;height:28px;font-size:.75rem}.mod-key-label{font-size:.5rem}.piano-visual{height:65px}.piano-white-key{width:30px;height:58px}.piano-black-key{width:20px;height:36px}.key-computer{font-size:.65rem}.key-note{font-size:.4rem}.ctrl-key{padding:2px 5px;font-size:.6rem;min-width:18px}.control-label{font-size:.5rem}.start-btn{padding:10px 28px;font-size:.85rem;margin-top:12px}.tutorial-close{top:10px;right:10px;width:30px;height:30px;font-size:1.1rem}.row-label{font-size:.55rem;min-width:35px}}.midi-mapping-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.midi-mapping-modal{background:linear-gradient(145deg,#1a1a2e,#16162a);border:1px solid rgba(138,43,226,.3);border-radius:16px;padding:24px;max-width:520px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #00000080,0 0 40px #8a2be226}.midi-mapping-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.midi-mapping-header h2{margin:0;font-size:1.4rem;color:#fff;font-weight:600}.midi-mapping-header .close-btn{background:transparent;border:none;color:#ffffff80;font-size:1.8rem;cursor:pointer;padding:0;line-height:1;transition:color .2s}.midi-mapping-header .close-btn:hover{color:#fff}.midi-mapping-description{color:#fff9;font-size:.85rem;margin:0 0 16px;line-height:1.5}.midi-mapping-toggle{margin-bottom:20px;padding:12px 16px;background:#8a2be21a;border-radius:8px;border:1px solid rgba(138,43,226,.2)}.midi-mapping-toggle label{display:flex;align-items:center;gap:10px;cursor:pointer;color:#fff;font-weight:500}.midi-mapping-toggle input[type=checkbox]{width:18px;height:18px;accent-color:#8a2be2}.learn-mode-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(90deg,#ffa50026,#ff64001a);border:1px solid rgba(255,165,0,.4);border-radius:8px;margin-bottom:20px;color:#fa0;font-size:.9rem}.learn-pulse{width:12px;height:12px;background:#fa0;border-radius:50%;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.learn-mode-banner .last-note{margin-left:auto;color:#fff9;font-size:.8rem}.learn-mode-banner button{background:#ffa50033;border:1px solid rgba(255,165,0,.4);color:#fa0;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s}.learn-mode-banner button:hover{background:#ffa5004d}.midi-mapping-groups{display:flex;flex-direction:column;gap:20px}.mapping-group h3{margin:0 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;color:#8a2be2cc;font-weight:600}.mapping-items{display:flex;flex-direction:column;gap:6px}.mapping-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:10px 14px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:8px;transition:all .2s}.mapping-item:hover{background:#ffffff0d;border-color:#ffffff1f}.mapping-item.learning{background:#ffa5001a;border-color:#ffa50066}.mapping-item.mapped{border-color:#8a2be24d}.action-label{color:#fff;font-weight:500;font-size:.9rem}.mapping-value{color:#fff6;font-family:SF Mono,Consolas,monospace;font-size:.8rem;min-width:80px;text-align:center}.mapping-item.mapped .mapping-value{color:#8a2be2}.mapping-actions{display:flex;gap:6px}.learn-btn{background:#8a2be233;border:1px solid rgba(138,43,226,.4);color:#b388ff;padding:5px 12px;border-radius:4px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s}.learn-btn:hover:not(:disabled){background:#8a2be24d}.learn-btn:disabled{opacity:.4;cursor:not-allowed}.learn-btn.active{background:#fa0;border-color:#fa0;color:#000}.clear-btn{background:#ff646426;border:1px solid rgba(255,100,100,.3);color:#f88;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:.85rem;transition:all .2s}.clear-btn:hover:not(:disabled){background:#ff646440}.clear-btn:disabled{opacity:.4;cursor:not-allowed}.midi-mapping-footer{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center}.clear-all-btn{background:transparent;border:1px solid rgba(255,100,100,.3);color:#ff6464b3;padding:8px 20px;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .2s}.clear-all-btn:hover:not(:disabled){background:#ff64641a;border-color:#ff646480;color:#f88}.clear-all-btn:disabled{opacity:.4;cursor:not-allowed}.top-header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 30px;z-index:2000}.logo{font-size:1.1rem;font-weight:700;color:#c4a870;letter-spacing:.05em;text-transform:uppercase}.info-btn{position:fixed;top:20px;right:20px;background:#0000000d;border:1px solid rgba(0,0,0,.1);color:#666;padding:8px 16px;border-radius:20px;font-size:.75rem;cursor:pointer;transition:all .2s ease;z-index:2000}.info-btn:hover{background:#0000001a;color:#333}.info-bar{display:flex;gap:12px;margin-top:20px;font-size:.75rem;color:#666}.info-item{display:flex;align-items:center;gap:8px;background:#0000000a;padding:8px 16px;border-radius:20px;border:1px solid rgba(0,0,0,.08);color:#555}.controls-btn{border:1px solid rgba(0,0,0,.12);cursor:pointer;transition:all .2s ease;font-family:inherit;font-size:.75rem;color:#666;background:#0000000a}.controls-btn:hover{background:#00000014;color:#333;border-color:#ffffff4d}.status-dot{width:6px;height:6px;border-radius:50%;background:#444}.status-dot.active{background:#4caf50;box-shadow:0 0 8px #4caf5080}.github-cta{position:fixed;bottom:24px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}.github-cta-text{font-size:.7rem;color:#888;letter-spacing:.02em}.github-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#24292e;color:#fff;text-decoration:none;border-radius:6px;font-size:.8rem;font-weight:500;transition:all .2s ease;border:1px solid #444}.github-btn:hover{background:#2f363d;border-color:#666;transform:translateY(-1px)}.github-btn svg{opacity:.9}@media(max-width:768px){.github-cta{display:none}}@media(max-width:700px){.top-header{justify-content:flex-start;padding:12px 15px}.top-header .logo{width:80px!important}.info-btn{position:fixed;top:auto;bottom:20px;left:50%;transform:translate(-50%);z-index:2000}}*{margin:0;padding:0;box-sizing:border-box}html{background:#f5f0e8}:root{--gold: #c4a870;--gold-dark: #a89060;--orange-side: #d4753e;--black-panel: #1a1a1a;--black-soft: #252525;--button-dark: #3a3a3a;--button-yellow: #e8a832;--button-red: #d44040;--key-white: #3a3a3a;--key-black: #4a4a4a;--device-bg: #1a1a1a}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f0e8;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;-webkit-user-select:none;user-select:none;position:relative}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");opacity:.08;pointer-events:none;z-index:0}body>*{position:relative;z-index:1}#root{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}