/* Playable 88-key piano: isolated from the existing tuner / studio controls. */
.rt-piano-panel{overflow:hidden}
.rt-piano-controls{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin:22px 0 17px}
.rt-piano-controls label{font-size:12px;display:flex;flex-direction:column;gap:7px}
.rt-piano-controls select{min-width:132px}
.rt-piano-controls input[type=range]{width:145px;accent-color:var(--rt-focus)}
.rt-piano-controls .rt-piano-check{align-self:center;flex-direction:row;align-items:center;font-size:13px;gap:9px}
.rt-piano-controls input[type=checkbox]{width:18px;height:18px;accent-color:var(--rt-focus)}
.rt-piano-octaves{display:flex;align-items:center;gap:7px;margin-right:auto}
.rt-piano-octaves strong{font-size:13px;min-width:60px;text-align:center}
.rt-piano-octaves button{padding:9px 12px;min-width:42px;min-height:42px}
.rt-piano-note{font-size:13px;font-variant-numeric:tabular-nums;font-weight:650;margin:12px 0 3px;color:var(--ink);min-height:21px}
.rt-piano-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:14px;background:#171c27;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-color:#79869e #272d3b;scrollbar-width:thin}
.rt-piano-keys{height:204px;position:relative;isolation:isolate}
.rt-piano-key{position:absolute;top:0;display:flex;align-items:flex-end;justify-content:center;border-radius:0 0 6px 6px;font-family:inherit;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:pan-x;outline-offset:-4px;transition:background 50ms}
.rt-main .rt-piano-white{height:194px;width:44px;padding:0 0 13px;background:linear-gradient(#fff,#f3f0e8);border:1px solid #969db0;color:#596171;font-weight:700;font-size:11px;z-index:1;box-shadow:inset -2px 0 4px #ddd8cf}
.rt-main .rt-piano-black{height:124px;width:28px;padding:0;background:linear-gradient(145deg,#343c53,#101523 72%);border:1px solid #070b14;z-index:3;box-shadow:1px 4px 4px #0007}
.rt-main .rt-piano-white:hover{background:#e2efd5}
.rt-main .rt-piano-black:hover{background:#3f506d}
.rt-main .rt-piano-white.is-playing{background:#bdfa72;box-shadow:inset 0 0 0 3px #5a8a34}
.rt-main .rt-piano-black.is-playing{background:#79c18e;box-shadow:inset 0 0 0 2px #bdfa72}
.rt-main .rt-piano-key:focus-visible{outline:3px solid #64a9d8;outline-offset:-4px}
.rt-piano-help{font-size:12px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.rt-piano-help kbd{font-family:inherit;font-size:11px;background:var(--rt-control);border:1px solid var(--line);border-radius:4px;padding:2px 5px;color:var(--ink)}
@media(max-width:700px){.rt-piano-keys{height:178px}.rt-main .rt-piano-white{height:169px}.rt-main .rt-piano-black{height:106px}.rt-piano-controls{gap:10px}.rt-piano-octaves{flex-basis:100%}.rt-piano-scroll{margin-left:-6px;margin-right:-6px;max-width:calc(100% + 12px)}}

.rt-key-shortcut{position:absolute;bottom:32px;font:700 12px system-ui;color:#45516a;pointer-events:none}
.rt-piano-black .rt-key-shortcut{bottom:12px;color:#fff}
