/* Floating performance keyboard */
.keyboard-launch{white-space:nowrap;color:var(--accent-2)!important}.virtual-keyboard-panel{position:fixed;z-index:90;min-width:560px;min-height:280px;max-width:calc(100vw - 10px);max-height:calc(100vh - 10px);display:flex;flex-direction:column;overflow:hidden;resize:both;border:1px solid #52636d;border-radius:8px;background:#10171c;box-shadow:0 20px 65px #000c}.virtual-keyboard-panel>header,.keyboard-window-shell>header{min-height:42px;display:flex;align-items:center;gap:7px;padding:7px 9px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#1b282d,#171d24)}.virtual-keyboard-panel>header{cursor:move;touch-action:none}.virtual-keyboard-panel>header>div,.keyboard-window-shell>header>div{flex:1}.virtual-keyboard-panel>header strong,.virtual-keyboard-panel>header small,.keyboard-window-shell>header strong,.keyboard-window-shell>header small{display:block}.virtual-keyboard-panel>header small,.keyboard-window-shell>header small{margin-top:2px;color:var(--muted);font-size:8px}.virtual-keyboard-panel>header button,.keyboard-window-shell>header button{height:26px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:#141d23;color:var(--muted)}.virtual-keyboard-panel>header button:hover,.keyboard-window-shell>header button:hover{color:var(--text);border-color:#53636e}.virtual-keyboard-controls{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:7px 8px;border-bottom:1px solid var(--line);background:#131b21}.virtual-keyboard-controls label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:8px}.virtual-keyboard-controls select{max-width:160px;padding:5px;border:1px solid var(--line);border-radius:4px;background:#0c1216}.virtual-keyboard-controls input[type=range]{width:76px}.virtual-keyboard-controls button{height:27px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:#192229;color:var(--muted)}.virtual-keyboard-controls button.active.arm{color:var(--accent);border-color:#407567;background:#14251f}.virtual-keyboard-controls button.active.record{color:#ff9aa8;border-color:#914955;background:#351b22;box-shadow:0 0 8px #ff7e8e33}.virtual-keyboard-controls>output{min-width:22px;color:var(--accent-2);font:9px var(--mono);text-align:center}.computer-keys{padding:0 4px}.keyboard-record-status{margin-left:auto;color:var(--accent);font:8px var(--mono);white-space:nowrap}.midi-input-controls{display:flex;align-items:center;gap:6px;padding-right:8px;margin-right:3px;border-right:1px solid var(--line)}.midi-input-controls>label{font-weight:700}.midi-input-controls .midi-enable{color:var(--accent);border-color:#407567;background:#14251f}.midi-input-status{max-width:210px;color:var(--muted);font:8px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.midi-input-status.connected{color:var(--accent)}.midi-input-status.denied,.midi-input-status.error,.midi-input-status.disconnected{color:var(--danger)}.virtual-keyboard-scroll{position:relative;flex:1;min-height:125px;overflow-x:auto;overflow-y:hidden;padding:7px 8px 9px;background:linear-gradient(#0b1014,#151c21);touch-action:none}.virtual-keyboard-keys{position:relative;height:100%;min-width:calc(var(--white-keys) * 42px);display:flex;align-items:stretch;user-select:none}.virtual-key{touch-action:none}.virtual-key.white{position:relative;flex:0 0 42px;height:100%;border:1px solid #8d969b;border-radius:0 0 5px 5px;background:linear-gradient(90deg,#d9dcdb,#fff 43%,#ced2d1);box-shadow:inset 0 -5px 8px #71808655;color:#273238}.virtual-key.white span{position:absolute;left:0;right:0;bottom:7px;font:8px var(--mono)}.virtual-key.black{position:absolute;z-index:2;left:calc(var(--white-index) * 42px - 13px);top:0;width:26px;height:62%;border:1px solid #050708;border-radius:0 0 4px 4px;background:linear-gradient(90deg,#070a0c,#293139 52%,#080b0d);box-shadow:0 4px 5px #0008}.virtual-key.white.active{background:linear-gradient(#b6f8e5,#62daba);box-shadow:inset 0 -4px 12px #267b65}.virtual-key.black.active{background:linear-gradient(#4fbca0,#173f35);box-shadow:0 2px 8px #6ee7c799}.selected-note-velocity{padding-left:8px;border-left:1px solid var(--line)}.selected-note-velocity output{color:var(--accent-2);font:8px var(--mono)}
.keyboard-window-body{min-width:560px;overflow:hidden;background:#0d1115}.keyboard-window-body #keyboard-app{height:100%;overflow:hidden}.keyboard-window-shell{height:100%;display:flex;flex-direction:column}.keyboard-window-shell>header{min-height:46px}.keyboard-window-shell .virtual-keyboard-scroll{min-height:160px}.keyboard-connecting{height:100%;margin:0;display:grid;place-items:center;color:var(--muted);font:12px var(--mono)}
@media(max-width:900px){.keyboard-record-status{display:none}.virtual-keyboard-panel{min-width:540px}.virtual-keyboard-controls select{max-width:115px}}
.piano-roll-sync-toggle{height:30px!important;padding:0 8px!important;display:flex;align-items:center;gap:6px}.piano-roll-sync-toggle small{min-width:18px;color:var(--faint);font:7px var(--mono);text-transform:uppercase}.piano-roll-sync-toggle.on{color:#aebfff!important;border-color:#596fb4!important;background:#18213b!important}.piano-roll-sync-toggle.on small{color:#c7d2ff}
.virtual-key.white.scale-tone{background:linear-gradient(90deg,#c9eee4,#f5fffc 45%,#b7dfd4);color:#163c32}.virtual-key.black.scale-tone{background:linear-gradient(90deg,#0b2922,#397c69 52%,#102f28);border-color:#4f8e7c}.virtual-key.scale-root::after{content:'';position:absolute;left:3px;right:3px;bottom:3px;height:3px;border-radius:2px;background:#ffbc6e;box-shadow:0 0 6px #ffbc6e88}.virtual-key.white.playback-active,.virtual-key.white.scale-tone.playback-active{background:linear-gradient(#e8edff,#8aa7ff);box-shadow:inset 0 -4px 12px #425cad,0 0 8px #8aa7ff88}.virtual-key.black.playback-active,.virtual-key.black.scale-tone.playback-active{background:linear-gradient(#9fb4ff,#314a9a);box-shadow:0 2px 9px #8aa7ffcc}.virtual-key.white.active,.virtual-key.white.scale-tone.active{background:linear-gradient(#fff0c8,#ffbc6e);box-shadow:inset 0 -4px 12px #956323}.virtual-key.black.active,.virtual-key.black.scale-tone.active{background:linear-gradient(#ffd28e,#8f5a21);box-shadow:0 2px 8px #ffbc6ebb}.virtual-key.active.playback-active{outline:2px solid #f7fffd;outline-offset:-3px}.virtual-key.active::after,.virtual-key.playback-active::after{background:#f7fffd;box-shadow:0 0 7px #fff}@media(max-width:900px){.scale-guide-controls.compact label{font-size:0}.scale-guide-controls.compact label select{font-size:8px}}
.midi-activity{display:inline-block;width:7px;height:7px;flex:0 0 7px;margin-right:5px;border-radius:50%;background:#3d4b52;box-shadow:0 0 0 1px #071013;transition:background .06s,box-shadow .06s}.midi-activity.active{background:#62f0cc;box-shadow:0 0 8px #62f0cc}.midi-input-status{display:inline-flex;align-items:center}.virtual-key.midi-input-active{outline:2px solid #5df0d2;outline-offset:-3px}.virtual-key.white.midi-input-active{box-shadow:inset 0 0 0 3px #29a98e,0 0 10px #5df0d299}.virtual-key.black.midi-input-active{box-shadow:inset 0 0 0 2px #65f3d5,0 2px 10px #5df0d2bb}.virtual-key.midi-input-active::before{content:'';position:absolute;z-index:4;left:5px;right:5px;top:5px;height:3px;border-radius:3px;background:#5df0d2;box-shadow:0 0 7px #5df0d2}
.virtual-keyboard-controls .piano-sustain{color:#d6bd86;border-color:#6f5e3c;background:#201c13}.virtual-keyboard-controls .piano-sustain.active{color:#17130c;border-color:#e5c279;background:#e5c279;box-shadow:0 0 10px #e5c27955}
.keyboard-harmony-strip{display:grid;grid-template-columns:minmax(170px,1fr) minmax(220px,1.3fr) auto;align-items:center;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line);background:#0f171c;color:var(--muted);font-size:8px}.keyboard-live-readout,.keyboard-scale-reference{min-width:0;display:flex;flex-direction:column;gap:2px}.keyboard-live-readout strong{overflow:hidden;color:var(--accent-2);font:9px var(--mono);text-overflow:ellipsis;white-space:nowrap}.keyboard-live-readout span,.keyboard-scale-reference span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.keyboard-scale-reference strong{color:#ffcf8d;font-size:8px}.keyboard-chord-controls{display:flex;align-items:center;justify-content:flex-end;gap:5px;white-space:nowrap}.keyboard-chord-controls label{display:flex;align-items:center;gap:4px}.keyboard-chord-controls select{height:27px;max-width:110px;padding:0 5px;border:1px solid var(--line);border-radius:4px;background:#0c1216;color:var(--text);font-size:8px}.keyboard-chord-controls button{height:27px;padding:0 8px;border:1px solid var(--line);border-radius:4px;background:#192229;color:var(--muted)}.keyboard-chord-controls .chord-mode-toggle{display:flex;align-items:center;gap:5px}.keyboard-chord-controls .chord-mode-toggle small{color:var(--faint);font:7px var(--mono);text-transform:uppercase}.keyboard-chord-controls .chord-mode-toggle.on{color:var(--accent);border-color:#407567;background:#14251f}.keyboard-chord-controls .chord-mode-toggle.on small{color:var(--accent-2)}.outside-scale-notice{color:#ffbc6e;font:7px var(--mono)}.outside-scale-notice[hidden]{display:none}@media(max-width:760px){.keyboard-harmony-strip{grid-template-columns:1fr 1fr}.keyboard-chord-controls{grid-column:1/-1;justify-content:flex-start}.keyboard-scale-reference span{white-space:normal}}