.header-actions{min-width:max-content}.midi-learn-button{height:36px;padding:0 12px;border:1px solid #4b5043;background:#191b17;border-radius:4px;font-size:.66rem;letter-spacing:.08em;color:#9fa392}.midi-learn-button.active{background:#62b9ff;color:#0d1115;border-color:#62b9ff;box-shadow:0 0 12px #62b9ff55}.key-tools{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:5px}.key-hint{grid-column:2;margin:0}.octave-controls{grid-column:1;display:flex;align-items:center;gap:6px}.octave-controls button{width:29px;height:25px;border:1px solid #3f4338;background:#171915;color:#dfff49;font-size:1rem;line-height:1}.octave-controls span{font-family:"DM Mono",monospace;font-size:.55rem;color:#8a8e80;min-width:65px;text-align:center}.octave-controls strong{color:#e8e6d8}.knob{cursor:ns-resize;touch-action:none}.midi-learnable{transition:outline-color .15s,box-shadow .15s}.midi-learnable:hover{outline:1px dashed #62b9ff88;outline-offset:3px}.midi-learning{outline:2px solid #62b9ff!important;outline-offset:4px!important;box-shadow:0 0 15px #62b9ff88!important}.midi-mapped{box-shadow:0 0 0 1px #62b9ff66}.midi-learn-tag{position:fixed;z-index:30;background:#62b9ff;color:#081018;padding:7px 10px;border-radius:3px;font-family:"DM Mono",monospace;font-size:.62rem;pointer-events:none;transform:translate(8px,-105%)}
@media(max-width:1200px){.topbar{grid-template-columns:150px 1fr 350px}}
@media(max-width:820px){.midi-learn-button{font-size:.55rem;padding:0 7px}.key-tools{grid-template-columns:1fr}.octave-controls,.key-hint{grid-column:1;justify-self:center}.key-hint{margin-top:4px}.topbar{grid-template-columns:1fr auto}.header-actions{gap:4px}}