/* Topic piano — kids' schools (Destiny, Nov 8, 2026).
   Each topic is a piano key: touch it, hear its soft note, and the topic opens.
   Calm by design: no flashing, no motion that starts on its own. */
.piano{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 8px;padding:14px 10px 18px;background:#17102b;border:1.5px solid #872085;border-radius:16px}
.pkey{flex:1 1 86px;max-width:150px;min-width:86px;min-height:158px;background:linear-gradient(180deg,#fdfbf5,#e9e2cf);border:1.5px solid #8a6d1f;border-radius:0 0 12px 12px;color:#241842;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:10px 6px 12px;text-align:center;box-shadow:0 3px 0 #8a6d1f}
.pkey:hover,.pkey:focus-visible{background:#fff7dd;outline:3px solid #e8c877;outline-offset:2px}
.pkey.playing{background:#ffe9a8}
.pkey .pkey-sym{font-size:1.25rem;color:#872085;line-height:1}
.pkey .pkey-name{font-weight:700;font-size:.92rem;line-height:1.3}
.pkey .pkey-note{font-size:.8rem;color:#6b5a2a;letter-spacing:.06em;text-transform:uppercase}
.piano-note-line{color:#cfc2f2;font-size:.95rem;margin:4px 0 0}
@media (max-width:560px){.pkey{flex-basis:29%;min-height:142px}}