.piano-panel{background:#fffdf9;border:1px solid var(--line);border-radius:28px;padding:32px;scroll-margin-top:110px}
.piano-top{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:center}.piano-top h2{font-size:1.8rem;margin-bottom:12px}.piano-top p{color:var(--muted);font-size:.9rem}.piano-current{height:145px}.piano-current .staff{width:100%;height:145px}
.piano-controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;padding:20px 0;border-top:1px solid var(--line)}.piano-controls label{display:flex;align-items:center;gap:10px;font-size:.83rem;flex-wrap:wrap}.piano-controls select{max-width:100%}.piano-controls input{max-width:145px;accent-color:var(--purple)}.piano-controls output{min-width:38px}
.piano-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));position:relative;padding:0;margin:8px 0 22px;border-top:8px solid #332640;border-radius:10px;background:#332640;isolation:isolate}
.piano-key{font:inherit;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;padding:12px 2px;border-radius:0 0 10px 10px;position:relative;min-width:0}
.piano-key.white{z-index:0;height:225px;background:linear-gradient(#fff,#faf7f2);border:1px solid #b8b0c1;border-bottom:6px solid #d3cbdc;color:#342447}.piano-key.black{position:absolute;top:0;width:7%;height:136px;background:linear-gradient(#4a385b,#231a2f);border:1px solid #160e20;border-bottom:5px solid #08060d;z-index:2;color:#fff;box-shadow:0 5px 7px #0004}
.piano-key[data-key="1"]{left:9%}.piano-key[data-key="3"]{left:21.5%}.piano-key[data-key="6"]{left:46.5%}.piano-key[data-key="8"]{left:59%}.piano-key[data-key="10"]{left:71.5%}
.piano-key-name{font-size:.95rem;font-weight:700;line-height:1.2;text-align:center}.black .piano-key-name{font-size:.72rem}.piano-letter{font-size:.7rem;line-height:1.2}.piano-key kbd{font-family:inherit;font-size:.67rem;opacity:.8}
.piano-key.white.sounding,.piano-key.white:active{background:linear-gradient(to bottom,#fff 60%,#eadff7 60%,#dac7f0 100%);border-bottom-color:#9879c4}.piano-key.black.sounding,.piano-key.black:active{background:#8254b7;border-bottom-color:#56317e}.piano-key:focus-visible{outline:3px solid #e87830;outline-offset:-4px}
.piano-help{font-size:.85rem;line-height:1.8;color:var(--muted);margin-block:14px}.piano-status{min-height:25px;color:var(--purple-dark);font-size:.9rem}.piano-history{border-top:1px solid var(--line);padding-top:26px;margin-top:12px}.piano-history-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.piano-history h2{font-size:1.5rem}#piano-history-text{margin-top:16px;font-size:.9rem}#piano-sequence .staff{width:100%;height:auto;max-height:220px}
.piano-panel [hidden]{display:none!important}
@media(max-width:760px){.piano-panel{padding:20px 12px;border-radius:22px}.piano-top{grid-template-columns:1fr;gap:0}.piano-top h2{font-size:1.4rem}.piano-current{height:120px}.piano-current .staff{height:120px}.piano-controls{gap:14px}.piano-controls label{width:100%}.piano-key.white{height:190px}.piano-key.black{height:115px}.piano-key-name{font-size:.76rem}.black .piano-key-name{font-size:.59rem}.piano-key kbd{font-size:.6rem}.piano-key{gap:6px;padding-bottom:10px}.piano-letter{font-size:.6rem}.piano-history-heading{align-items:flex-start}.piano-history-heading .exercise-actions{margin-top:0}#piano-sequence{overflow:auto}#piano-sequence .staff{min-width:0}.piano-panel{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.piano-key{transition:none}}
@media print{.piano-controls,.piano-keys,.piano-history-heading .exercise-actions,.piano-help{display:none!important}.piano-panel{border:0;padding:0}}

#piano-latch[aria-pressed="true"]{background:var(--purple);color:white}.piano-top h2{overflow-wrap:anywhere}

#piano-sequence{max-height:440px;overflow:auto;overscroll-behavior:contain;margin-top:18px;padding:6px}.piano-sequence-row{break-inside:avoid;border-bottom:1px solid var(--line)}.piano-sequence-row p{font-size:.8rem;color:var(--muted);margin:8px 0 0}#piano-sequence .staff{display:block;margin-inline:auto;max-width:700px}#piano-sequence:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media print{#piano-sequence{max-height:none;overflow:visible}.piano-sequence-row{break-inside:avoid}}

/* Focus and sounding states must never lift a white key over a black key. */