.piano-page .tool-hero{padding-top:32px;padding-bottom:30px}
.piano-page .tool-heading h1{font-size:clamp(2.6rem,5vw,4.25rem)}
.piano-page .tool-section{padding-top:28px}
.piano-layout{padding-top:0;padding-bottom:4rem}
.piano-card{background:#fff;border:1px solid #e7e3da;border-radius:22px;box-shadow:0 16px 42px rgba(28,31,29,.08);overflow:hidden}
.piano-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.25rem 1.4rem;background:#fbfaf7;border-bottom:1px solid #ece9e2}
.piano-controls-group{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.piano-controls button,.piano-controls .piano-switch{font:inherit;border:1px solid #d4d1c8;background:#fff;color:#292d2c;border-radius:10px;min-height:42px;padding:.55rem .8rem;cursor:pointer}
.piano-controls button:hover,.piano-controls button:focus-visible{border-color:#a18b5a;outline:2px solid transparent;box-shadow:0 0 0 3px #dccda688}
.piano-controls .piano-switch{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer}
.piano-switch input{accent-color:#b8904c;width:17px;height:17px}
.piano-volume{display:flex;align-items:center;gap:.65rem;font-weight:600;color:#333}
.piano-volume input{width:clamp(100px,15vw,180px);accent-color:#b8904c}
.piano-volume output{min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.piano-instruction{margin:0;padding:1rem 1.4rem;color:#555f5d;font-size:.95rem}
.piano-viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:#bba06a #eee9df;scrollbar-width:thin;background:#242827;padding:1.35rem 1rem 1.65rem;touch-action:pan-x}
.piano-keyboard{--white-w:54px;--black-w:34px;--white-h:258px;--black-h:160px;position:relative;width:calc(52 * var(--white-w));height:var(--white-h);user-select:none;-webkit-user-select:none}
.piano-key{position:absolute;top:0;padding:0;border:0;border-radius:0 0 6px 6px;cursor:pointer;touch-action:pan-x;-webkit-tap-highlight-color:transparent;user-select:none}
.piano-key.white{left:calc(var(--i) * var(--white-w));width:var(--white-w);height:var(--white-h);z-index:1;background:linear-gradient(#fff 5%,#f3f0e9 75%,#ded9cf);box-shadow:inset -2px 0 #cdc8bf,0 3px 4px #1118;border:1px solid #bbb8b1}
.piano-key.black{left:calc((var(--i) + 1) * var(--white-w) - var(--black-w) / 2);width:var(--black-w);height:var(--black-h);z-index:2;background:linear-gradient(90deg,#171a1b,#343839 65%,#0f1112);box-shadow:inset -2px -4px #080a0a,1px 4px 5px #1118;border:1px solid #080b0a}
.piano-key.active.white,.piano-key.white:active{background:linear-gradient(#f8e9c8,#e8c781);transform:translateY(2px)}
.piano-key.active.black,.piano-key.black:active{background:linear-gradient(#60492b,#a57d38);transform:translateY(2px)}
.piano-key:focus-visible{outline:3px solid #cc9c43;outline-offset:-4px}
.piano-key-name{position:absolute;bottom:14px;left:0;right:0;display:block;text-align:center;font-size:12px;font-weight:700;color:#58605d;white-space:nowrap;pointer-events:none}
.piano-key.black .piano-key-name{bottom:10px;color:#eee1c6;font-size:10px}
.piano-keyboard.hide-labels .piano-key-name{display:none}
.piano-keyboard .piano-key[data-note="Do"] .piano-key-name{color:#9b7134}
.piano-navigation{padding:.95rem 1.4rem 1.25rem;background:#fbfaf7;border-top:1px solid #ece9e2}
.piano-navigation-track{height:10px;border-radius:99px;background:#e3ded2;position:relative;cursor:pointer}
.piano-navigation-thumb{position:absolute;top:0;bottom:0;left:0;width:22%;border-radius:99px;background:#b69254;transition:left .08s linear}
.piano-status{margin:.7rem 0 0;color:#47524d;font-size:.9rem;min-height:1.4em}
.piano-tip{margin-top:1.25rem;color:#4a514e;font-size:.95rem}
.piano-credit{margin-top:1.4rem;text-align:center;color:#273a38;font-weight:700}
.piano-credit p{margin:.45rem 0}
.piano-credit .piano-sample-credit{font-size:.8rem;line-height:1.5;font-weight:400;color:#68716e}
.piano-sample-credit a{color:#826435;text-decoration:underline}
@media(max-width:700px){.piano-controls{padding:1rem}.piano-controls-group{width:100%}.piano-controls button{flex:1}.piano-volume{width:100%}.piano-volume input{flex:1;width:auto}.piano-viewport{padding:1rem .5rem 1.25rem}.piano-keyboard{--white-w:44px;--black-w:28px;--white-h:215px;--black-h:135px}.piano-key-name{font-size:10px;bottom:11px}.piano-key.black .piano-key-name{font-size:9px}.piano-instruction,.piano-navigation{padding-left:1rem;padding-right:1rem}}
@media(max-width:700px){.piano-page .tool-hero{padding-top:26px;padding-bottom:24px}.piano-page .tool-section{padding-top:18px}}