/* Keyboard occupies its own row, never the score surface. */
.web-piano-keyboard[hidden]{display:none!important}
.web-piano-keyboard{flex:none;min-width:0;padding:8px 10px;border:1px solid #ccd8e7;border-radius:13px;background:#fff;display:grid;grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr);gap:6px 12px}
#web-piano-keyboard-toggle{align-self:flex-end;flex:none;min-height:44px;padding:8px 14px;border:1px solid #b5c8e0;border-radius:10px;background:#fff;color:#2457a1;font-weight:700}
.web-piano-keyboard .piano-keyboard-heading{display:flex;align-items:start;justify-content:space-between;gap:8px}
.web-piano-keyboard .piano-keyboard-heading h2{font-size:18px;letter-spacing:-.02em;margin:0;color:#20374f}
.web-piano-keyboard .piano-keyboard-heading>span{font:600 11px system-ui;color:#607a93;text-align:right}
.web-piano-keyboard .piano-hands{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.web-piano-keyboard .piano-hands>div{border-radius:10px;padding:10px;background:#e8f2ff;border-left:3px solid #3675c5;min-width:0}
.web-piano-keyboard .piano-hands>div[data-hand="right"]{background:#e1f4f0;border-color:#168477}
.web-piano-keyboard .piano-hands strong{font-size:12px;color:#335576}
.web-piano-keyboard .piano-hands p{font-size:16px;font-weight:750;min-height:24px;margin:6px 0 0;overflow-wrap:anywhere;color:#20374f}
.web-piano-keyboard .piano-keys-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:9px;padding:8px;background:#14243c}
.web-piano-keyboard .piano-keys{position:relative;--key-width:26px;min-width:100%;width:calc(var(--white-count)*var(--key-width));height:clamp(120px,16vh,180px)}
.web-piano-keyboard .piano-key.white{width:var(--key-width);border:1px solid #9ca8b6;background:#fff}
.web-piano-keyboard .piano-key.black{z-index:2;width:calc(var(--key-width)*.64);height:62%;border:1px solid #09111c;background:#14243c;box-shadow:0 4px 2px #0006}
.web-piano-keyboard .piano-key small{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:600 9px system-ui;color:#60758c}
.web-piano-keyboard .piano-key.black small{font-size:7px;color:#c6d4e2;overflow:hidden}
.web-piano-keyboard .piano-key.left-hand{background:#3675c5!important;border-color:#17477f!important}
.web-piano-keyboard .piano-key.right-hand{background:#168477!important;border-color:#0f5d54!important}
.web-piano-keyboard .piano-key.left-hand.right-hand{background:linear-gradient(90deg,#3675c5 50%,#168477 50%)!important}
.web-piano-keyboard .piano-key[data-active] small{color:#fff;font-weight:800}
.web-piano-keyboard .piano-keyboard-caption{font-size:12px;line-height:1.5;color:#60758c;margin:12px 0 0}
.web-piano-keyboard .piano-key.white{background:linear-gradient(#fff 0%,#fff 82%,#f0f3f5 100%);border-color:#abb5c0;border-radius:0 0 4px 4px;box-shadow:inset 0 -3px 0 #d4dce3}
.web-piano-keyboard .piano-key.black{height:56%;background:linear-gradient(90deg,#111c2b,#24354b 45%,#111c2b);border-color:#08111d;border-radius:0 0 4px 4px;box-shadow:0 3px 2px #0005,inset 0 -3px 0 #09111b}
.web-piano-keyboard .piano-key.white small{opacity:0;font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:clip}
.web-piano-keyboard .piano-key.white[data-pitch-class="0"] small{opacity:1;color:#60758c;font-weight:650}
.web-piano-keyboard .piano-key.white[data-active] small{opacity:1;color:#fff;font-size:12px!important;font-weight:800}
.web-piano-keyboard .piano-key.black small{display:none!important}
.web-piano-keyboard .piano-key.black[data-active]::after{content:'';position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 4px #fff8}
.web-piano-keyboard .piano-key.white.left-hand{background:linear-gradient(#eaf3ff,#c5ddfb 38%,#3675c5 80%)!important;box-shadow:inset 0 -3px 0 #17477f}
.web-piano-keyboard .piano-key.white.right-hand{background:linear-gradient(#edfaf6,#bee6d9 38%,#168477 80%)!important;box-shadow:inset 0 -3px 0 #0f5d54}
.web-piano-keyboard .piano-key.white.left-hand.right-hand{background:linear-gradient(90deg,#3675c5 50%,#168477 50%)!important}
.web-piano-keyboard .piano-keyboard-heading{align-items:center}
.web-piano-keyboard .piano-keyboard-heading h2{font-size:14px}
.web-piano-keyboard .piano-hands{margin:0;gap:8px}
.web-piano-keyboard .piano-hands>div{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4px 8px}
.web-piano-keyboard .piano-hands p{font-size:13px;margin:0;min-height:0}
.web-piano-keyboard .piano-keys-scroll{grid-column:1/-1;padding:5px}
.web-piano-keyboard .piano-keys{height:clamp(74px,10vh,112px)}
.web-piano-keyboard .piano-keyboard-caption{display:none}
.web-piano-keyboard-visible .score-scroll{min-height:160px}
@media(max-width:600px){.web-piano-keyboard{grid-template-columns:1fr}.web-piano-keyboard .piano-keyboard-heading{display:none}.web-piano-keyboard .piano-keys{height:80px}.web-piano-keyboard .piano-hands strong{font-size:10px}}
@media print{#web-piano-keyboard,.web-piano-keyboard,#web-piano-keyboard-toggle{display:none!important}}
/* Let the existing navigation wrap on small browser windows. */
@media(max-width:600px){body:not(.ms-focus) .site-head{height:auto;min-height:66px;flex-wrap:wrap;gap:8px;padding:10px 12px}body:not(.ms-focus) .site-head .home-link{margin-left:0}}
.web-piano-keyboard .piano-key{position:absolute;top:0;left:calc(var(--key-index)*var(--key-width));height:100%;border-radius:0 0 5px 5px;box-sizing:border-box;transition:background-color .06s}
.web-piano-keyboard .piano-key.black{height:56%}
/* The source tablet grid has a fixed number of rows. Give the optional
   keyboard and its toggle real rows without displacing the passage toolbar. */
.main-area:has(> #web-piano-keyboard){display:flex;flex-direction:column;min-height:0}
.main-area:has(> #web-piano-keyboard)>:not(.score-scroll){flex-shrink:0}
.main-area:has(> #web-piano-keyboard)>.score-scroll{flex:1 1 0;height:auto;min-height:160px}
body.tablet-reader .main-area:has(> #web-piano-keyboard)>.score-scroll{min-height:0}
.main-area:has(> #web-piano-keyboard)>.transport{align-self:stretch;width:100%}
/* In focus mode the header is hidden: the reader must occupy the sole body row. */
@media screen{body.ms-focus.tablet-reader:has(#web-piano-keyboard){grid-template-rows:minmax(0,1fr)}}