.piano-scroll{overflow-x:auto;overscroll-behavior-x:contain;border:6px solid #303443;border-top-width:13px;border-radius:9px;background:#303443;scrollbar-width:thin;scrollbar-color:#858b9e #303443;box-shadow:0 5px 10px #25293614;touch-action:pan-x pan-y}
.piano-keyboard{--key-min:44px;display:flex;position:relative;height:182px;min-width:calc(var(--white-count)*var(--key-min));isolation:isolate}
.piano-keyboard.one-octave{--key-min:38px}
.piano-keyboard .piano-key{margin:0;box-sizing:border-box;border-radius:0 0 5px 5px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;position:relative;flex:1;min-width:0;height:100%;padding:0 0 16px;border:1px solid #c8cad2;border-bottom:5px solid #d9dbe1;background:linear-gradient(#f1f2f5 0,#fff 27%,#fff 92%,#f1f2f5 100%);color:#4d5366;box-shadow:inset 0 -1px 0 #fff;transition:background .15s,box-shadow .15s}
.piano-keyboard .piano-key>strong{font-size:13px;font-weight:600;line-height:1.5}
.piano-keyboard .piano-key>small{font-size:9px;color:#969baa;line-height:1.5}
.piano-keyboard .piano-key>sup{position:absolute;top:auto;bottom:61px;left:0;right:0;text-align:center;color:#9ea4b4;font-size:9px}
.piano-keyboard .black-key{position:absolute;z-index:2;top:0;flex:none;width:calc(64%/var(--white-count));height:63%;padding-bottom:11px;border:1px solid #1c1f2b;border-bottom:5px solid #141722;background:linear-gradient(90deg,#2a2e3d,#414657 45%,#252938);color:#f0f1f6;box-shadow:0 3px 4px #14172255,inset 0 1px 1px #ffffff29;border-radius:0 0 4px 4px}
.piano-keyboard .black-key>strong{font-size:10px;font-weight:500;white-space:nowrap}
.piano-keyboard .black-key>small{font-size:8px;color:#b5bacb}
.piano-keyboard .white-key:disabled{background:linear-gradient(#edf0f3,#fafbfc 32%,#fff);color:#858b9a;border-color:#cdd0d8;border-bottom-color:#d9dbe1}
.piano-keyboard .black-key:disabled{background:linear-gradient(90deg,#292d3b,#3c4253 45%,#232735);color:#c4c9d6;border-color:#1c1f2b;border-bottom-color:#141722}
.piano-keyboard .white-key.unavailable>strong,.piano-keyboard .white-key.unavailable>small{color:#c7cad3}
.piano-keyboard .black-key.unavailable>strong,.piano-keyboard .black-key.unavailable>small{color:#686e80}
.piano-keyboard .white-key:hover:not(:disabled){background:#ecefff;color:#4555dc;border-color:#aeb7f1;border-bottom-color:#aeb7f1}
.piano-keyboard .black-key:hover:not(:disabled){background:linear-gradient(#626eb1,#394782);color:#fff;border-color:#394782;border-bottom-color:#28365f}
.piano-keyboard .piano-key:active:not(:disabled){transform:none;box-shadow:inset 0 3px 7px #25293622;border-bottom-width:2px}
.piano-keyboard .piano-key:focus-visible{outline:3px solid #8292ff;outline-offset:-4px;z-index:3}
.piano-keyboard .white-key.correct{background:#dcf2e6;border-color:#6aa68d;border-bottom-color:#6aa68d;color:#246446}
.piano-keyboard .black-key.correct{background:#317a59;border-color:#225b41;border-bottom-color:#174a32;color:#fff}
.piano-keyboard .white-key.wrong{background:#f9e5dd;border-color:#d7a38f;border-bottom-color:#d7a38f;color:#98543a}
.piano-keyboard .black-key.wrong{background:#9a5b47;border-color:#7d4435;border-bottom-color:#663729;color:#fff}
.piano-keyboard .piano-key.correct>small,.piano-keyboard .piano-key.wrong>small{color:inherit}
.piano-keyboard .piano-key.correct:after{content:'✓';position:absolute;top:auto;left:0;right:0;bottom:60px;text-align:center;font-size:12px}
.piano-keyboard .black-key.correct:after{bottom:46px}
.piano-help{margin:10px 0 0;font-size:9px;line-height:1.8;color:#9a9fac}
@media(max-width:740px){.piano-keyboard{--key-min:48px;height:170px}.piano-keyboard.one-octave{--key-min:38px}.piano-keyboard .piano-key>strong{font-size:12px}.piano-keyboard .black-key>strong{font-size:10px}.answer-heading>strong{font-size:11px}.piano-help{font-size:8px}}