/* Same instrument family, adapted to the horizontal shape of a keyboard. */
.piano .chord-stage{padding:22px 28px 18px}.piano .chord-layout{max-width:none;grid-template-columns:1fr 1fr;grid-template-areas:"heading actions" "diagram diagram" "notes notes" "variants variants";gap:0 24px}
.piano .chord-heading{padding:0 0 16px;min-width:0}.piano .chord-heading h1{display:flex;align-items:baseline;gap:20px;letter-spacing:-3px}.piano .chord-root{font-size:112px}.piano .chord-quality{font-size:60px;margin:0}.piano .chord-quality.long-quality{font-size:44px}.piano .grip-label{font-size:21px;margin:4px 0 0}.piano .chord-actions{flex-direction:row;width:100%;margin:0;align-self:center;gap:12px}.piano .chord-actions .button{flex:1;min-width:0;min-height:62px}.piano .diagram{width:100%;margin:0}.piano-keyboard{width:100%;height:auto;max-height:300px;display:block;overflow:visible}
.piano-key rect{stroke:var(--ink);stroke-width:1.2}.white-key rect{fill:#fff}.black-key rect{fill:#24302d;stroke:#142720;stroke-width:1.5}.piano-key.active rect{fill:var(--green)}.black-key.active rect{fill:#278575}.piano-key text{fill:var(--muted);font:500 28px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}.piano-key.active text,.key-dot{fill:#fff}.keyboard-notes{grid-area:notes;text-align:center;padding:14px 0 5px}.keyboard-notes p{margin:0}.piano-tone-line{font-size:23px;font-weight:500;letter-spacing:1px;line-height:1.45;overflow-wrap:anywhere}.keyboard-range{font-size:13px;line-height:1.5;color:var(--muted);margin-top:3px!important}.piano .variants{width:420px;max-width:100%;margin:14px auto 2px}.piano .stage-footer{margin-top:18px}.piano .fingering-line{font-size:22px;color:var(--ink);letter-spacing:2px}
body.piano.focus-mode .app-shell{width:min(1600px,calc(100% - 32px))}body.piano.focus-mode .chord-layout{grid-template-columns:1fr 1fr;max-width:none}body.piano.focus-mode .chord-heading{padding:0 0 10px}body.piano.focus-mode .chord-root{font-size:112px}body.piano.focus-mode .piano-keyboard{max-height:min(36vh,360px)}body.piano.focus-mode .chord-actions{margin:0}body.piano.focus-mode .stage-footer{margin-top:12px}
@media(min-width:851px) and (max-height:950px){.piano .chord-stage{padding:18px 28px 14px}.piano .chord-root{font-size:96px}.piano .chord-quality{font-size:56px}.piano .chord-heading{padding-bottom:14px}.piano .piano-keyboard{max-height:clamp(170px,28vh,270px)}.piano .variants{margin-top:8px}.piano .stage-footer{margin-top:14px}.piano .keyboard-notes{padding:10px 0 2px}}
@media(max-width:850px) and (min-width:641px){.piano .chord-stage{padding:20px}.piano .chord-root{font-size:90px}.piano .chord-quality{font-size:48px}.piano .chord-heading h1{gap:14px}.piano .chord-actions{flex-direction:column;gap:8px}.piano .chord-actions .button{min-height:56px}.piano .piano-keyboard{margin-top:12px}}
@media(max-width:640px){.piano .chord-stage{padding:18px 10px 12px}.piano .chord-layout{grid-template-columns:100%;grid-template-areas:"heading" "diagram" "notes" "variants" "actions";gap:0}.piano .chord-heading{padding:0 0 20px}.piano .chord-heading h1{justify-content:center;gap:12px}.piano .chord-root{font-size:72px}.piano .chord-quality{font-size:39px}.piano .chord-quality.long-quality{font-size:30px}.piano .grip-label{font-size:17px;margin-top:7px}.piano .piano-keyboard{height:185px;max-height:none}.piano .keyboard-notes{padding:12px 0 2px}.piano .piano-tone-line{font-size:21px;letter-spacing:.5px}.piano .keyboard-range{font-size:12px}.piano .variants{margin:14px auto 12px}.piano .chord-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}.piano .chord-actions .button{font-size:17px;min-height:54px;padding:10px 7px}.piano .chord-actions .icon{width:21px;height:21px}.piano .stage-footer{margin-top:18px}.piano .detail-columns{overflow-wrap:anywhere}body.piano.focus-mode .chord-layout{grid-template-columns:100%;grid-template-areas:"heading" "diagram" "notes" "variants" "actions"}body.piano.focus-mode .chord-root{font-size:72px}body.piano.focus-mode .piano-keyboard{height:220px;max-height:none}body.piano.focus-mode .chord-actions{margin:0}body.piano.focus-mode .chord-heading{padding-bottom:16px}}
@media print{.piano .chord-layout{grid-template-columns:100%;grid-template-areas:"heading" "diagram" "notes"}.piano .chord-heading{text-align:left}.piano .keyboard-range{display:block}.piano .piano-keyboard{max-height:none}}
/* Keep the instrument visible at music-stand distances without scaling text. */
@media(min-width:851px){.piano .app-shell{width:min(1300px,calc(100% - 64px));margin:16px auto 20px}.piano .app-header{height:64px;padding-bottom:8px}.piano .selectors{padding:18px 8px 16px}.piano .quality-controls{margin-top:16px}.piano .chord-root{font-size:120px}.piano .chord-quality{font-size:64px}.piano .chord-actions{max-width:480px;justify-self:end}.piano .piano-keyboard{height:240px;max-height:none}.piano .stage-footer{margin-top:16px}body.piano.focus-mode .piano-keyboard{height:min(34vh,330px);max-height:none}}
@media(min-width:851px) and (max-height:950px){.piano .app-shell{margin-top:12px}.piano .chord-root{font-size:96px}.piano .chord-quality{font-size:56px}.piano .piano-keyboard{height:clamp(170px,25vh,230px)}}
@media(max-width:850px) and (min-width:641px){.piano .piano-keyboard{height:230px;max-height:none}.piano-key text{font-size:24px}}
@media(max-width:640px){.piano-key text{font-size:14px}.piano-key .key-dot{r:3px}.piano .piano-keyboard{height:175px}.piano .instrument-heading{gap:12px}}