.piano-pair{display:grid;grid-template-columns:1fr 1.15fr;gap:20px;align-items:start;margin:28px 0}.piano-pair figure{margin:0;min-width:0}.piano-pair img{width:100%;height:auto;display:block;border-radius:20px}.piano-pair figcaption{font-size:14px;color:#b2c7c0;line-height:1.7;margin:12px 0}.piano-pair figure:nth-child(2){position:sticky;top:90px}details{padding:16px;border:1px solid #39504b;border-radius:12px}summary{cursor:pointer}details p{font-size:16px}@media(max-width:700px){.piano-pair{grid-template-columns:1fr}.piano-pair figure:nth-child(2){position:static}.piano-pair figure{overflow-x:auto}.piano-pair img{min-width:380px}.piano-pair:before{content:'↔';color:#a5d8c7}}
.piano-pair svg{display:block;width:100%;height:auto;border-radius:20px}.piano-pair svg text{pointer-events:none}.piano-pair [data-tone]{cursor:pointer;transition:fill .12s,stroke .12s}.piano-pair [data-tone].tone-active,.piano-pair [data-tone]:focus-visible{fill:#ceabef;stroke:#fff;stroke-width:3;outline:none}.piano-audio{padding:20px;border:1px solid #526c65;border-radius:16px;margin:25px 0}.piano-audio button{background:#abe0ce;color:#14252b;border:0;border-radius:30px;padding:12px 22px;font:inherit;cursor:pointer}.piano-audio p{font-size:15px!important;margin-bottom:0}@media(max-width:700px){.piano-pair svg{min-width:380px}}