.midi-keyboard{margin-bottom:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:11px}
.midi-keyboard summary{display:flex;align-items:center;gap:12px;padding:9px 12px;cursor:pointer;list-style:none}
.midi-keyboard summary::-webkit-details-marker{display:none}
.midi-keyboard summary::before{content:'▸';color:var(--muted)}
.midi-keyboard[open] summary::before{content:'▾'}
.midi-status{margin-left:auto;color:var(--muted);font-size:10px}
[data-connected=true] .midi-status{color:var(--accent)}
.midi-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:3px 12px 8px}
.midi-controls label{display:flex;align-items:center;gap:7px;min-width:0;color:var(--muted)}
.midi-controls select{min-width:0;max-width:200px;height:32px;padding:4px 7px;border:1px solid var(--line);border-radius:5px;background:var(--bg)}
.midi-controls .button{min-height:32px;padding:6px 10px}
.midi-keyboard p{margin:0 12px 8px;color:var(--muted);font-size:10px;line-height:1.6}
.midi-keyboard .midi-feedback{color:var(--accent)}
.midi-keyboard summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
@media(max-width:580px){.midi-controls label{flex-wrap:wrap}.midi-controls select{max-width:165px}}