.reference-keyboard{margin-top:24px}.keyboard-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.keyboard-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}.keyboard-controls label{display:flex;align-items:center;gap:7px}.keyboard-help{font-size:14px}.keyboard-scroll{overflow-x:auto;padding:8px 3px 12px}.piano{position:relative;display:flex;min-width:690px;height:190px;isolation:isolate}.piano-key{touch-action:none;user-select:none;-webkit-user-select:none;padding:0;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;border-radius:0 0 7px 7px;font-size:15px;line-height:1.3}.piano-key.white{position:relative;flex:1;background:#f1f3f5;color:#202730;border:1px solid #9fa7b0;height:190px;z-index:1;padding-bottom:12px}.piano-key.black{position:absolute;top:0;width:4.4%;height:120px;background:#252c36;color:#f3f5f8;border:1px solid #080b10;z-index:2;padding-bottom:12px;box-shadow:0 4px 3px #0006;font-size:12px}.piano-key .octave{font-size:12px;color:#58616e;margin-top:5px}.piano-key.white[aria-pressed=true]{background:#b5ef79;color:#172313}.piano-key.black[aria-pressed=true]{background:#729d43;color:#fff}.piano-key:focus-visible{outline:3px solid #c4a4ff;outline-offset:-4px;z-index:3}.keyboard-readout{min-height:26px;font-size:14px;color:var(--muted);margin:8px 0 0}.keyboard-scroll:focus-visible{outline:2px solid var(--seventh);outline-offset:2px}@media(max-width:640px){.piano{min-width:650px;height:170px}.piano-key.white{height:170px}.piano-key.black{height:108px}.keyboard-controls{gap:10px}.keyboard-heading h2{font-size:18px}}