.piano-card { max-width: 760px; }
.piano-keys { display: flex; justify-content: center; gap: .4rem; margin: 1rem 0 1.25rem; flex-wrap: wrap; }
.piano-key {
    width: clamp(40px, 11vw, 68px); height: clamp(150px, 34vw, 210px);
    border: none; border-radius: 0 0 14px 14px; cursor: pointer; color: #fff;
    font-family: var(--kf); font-weight: 700; font-size: 1.3rem;
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: .8rem;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .18); transition: transform .06s, filter .06s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.piano-key:active, .piano-key.lit { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); filter: brightness(1.18); }
.piano-key.nolabel { color: transparent; text-shadow: none; }
.piano-select {
    border: 2px solid #e3dcff; background: #faf8ff; color: #5b4b9e;
    border-radius: 999px; padding: .45rem 1rem; font-size: 1rem; font-weight: 600;
    font-family: var(--kf); cursor: pointer;
}
#piano-record.active { background: #ff6b6b; border-color: #ff6b6b; color: #fff; animation: pulse-rec 1s infinite; }
@keyframes pulse-rec { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }