.piano-room{max-width:1100px;color:var(--foreground);margin:auto;padding:clamp(36px,7vw,84px) clamp(18px,5vw,56px) 130px}.piano-room h1{margin:20px 0 26px;font-family:Georgia,serif;font-size:clamp(46px,7vw,86px);line-height:1.04}.piano-room h1 em{color:var(--gold)}.piano-intro{max-width:580px;color:var(--muted);font-size:17px;line-height:1.8}.piano-console{color:#f6ecd0;background:#10251d;border:1px solid #bba16b;margin:38px 0 28px;padding:clamp(16px,3vw,32px);box-shadow:0 18px 48px #0002}.piano-controls{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.piano-controls button{color:#f2d6a0;min-height:44px;font:inherit;background:0 0;border:1px solid #bba16b;padding:10px 16px;font-size:13px}.piano-controls button[aria-checked=true]{background:#d6b66722}.piano-controls label{color:#e3d5b5;width:170px;font-size:12px;line-height:1.7}.piano-controls label span{float:right}.piano-controls input{accent-color:#d6b667;width:100%;min-height:44px}.piano-status{color:#e1d2b0;min-height:24px;margin:14px 0 22px;font-size:13px;line-height:1.8}.piano-keyboard{outline-offset:6px;grid-template-columns:repeat(13,minmax(0,1fr));align-items:start;gap:5px;padding:6px;display:grid}.piano-keyboard button{cursor:pointer;border:1px solid #bda878;border-radius:0 0 4px 4px;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;min-width:44px;min-height:180px;padding:20px 3px;font:22px Georgia,serif;transition:box-shadow .12s,background .12s;display:flex;box-shadow:0 4px #030b07}.piano-keyboard .piano-white{color:#203d30;background:#f4eddd}.piano-keyboard .piano-black{color:#ead6a8;background:#172b22;border-color:#998050;min-height:135px}.piano-keyboard kbd{letter-spacing:.08em;font:11px Arial,sans-serif}.piano-keyboard .piano-held{color:#142b20;background:#dbb773;box-shadow:0 0 20px #dbb77377}.piano-help{color:#c7b894;max-width:700px;margin-top:24px;font-size:12px;line-height:1.8}.piano-room :focus-visible{outline-offset:4px;outline:3px solid #c6a15e}.piano-afterword{font-family:Georgia,serif;font-size:20px;line-height:1.8}.piano-links{flex-wrap:wrap;gap:20px;margin-top:22px;display:flex}.piano-links a{min-height:44px;color:var(--gold);border-bottom:1px solid var(--line);padding:10px 0;font-size:13px}@media (max-width:850px){.piano-keyboard{grid-template-columns:repeat(7,minmax(44px,1fr));gap:8px}.piano-keyboard button{min-height:112px}.piano-keyboard .piano-black{min-height:96px}}@media (max-width:440px){.piano-keyboard{grid-template-columns:repeat(4,minmax(44px,1fr));gap:8px;padding:4px}.piano-controls{gap:12px}.piano-controls label{width:100%}.piano-keyboard button{min-height:104px}.piano-keyboard .piano-black{min-height:90px}}@media (prefers-reduced-motion:reduce){.piano-keyboard button{transition:none}.piano-keyboard .piano-held{box-shadow:0 4px #030b07}}@media (min-width:851px){.piano-keyboard{grid-template-columns:repeat(8,minmax(44px,1fr));gap:4px}.piano-keyboard button{grid-row:1}.piano-keyboard button:first-child{grid-column:1}.piano-keyboard button:nth-child(3){grid-column:2}.piano-keyboard button:nth-child(5){grid-column:3}.piano-keyboard button:nth-child(6){grid-column:4}.piano-keyboard button:nth-child(8){grid-column:5}.piano-keyboard button:nth-child(10){grid-column:6}.piano-keyboard button:nth-child(12){grid-column:7}.piano-keyboard button:nth-child(13){grid-column:8}.piano-keyboard .piano-black{z-index:2;justify-self:end;width:70%;transform:translate(52%)}.piano-keyboard button:nth-child(2){grid-column:1}.piano-keyboard button:nth-child(4){grid-column:2}.piano-keyboard button:nth-child(7){grid-column:4}.piano-keyboard button:nth-child(9){grid-column:5}.piano-keyboard button:nth-child(11){grid-column:6}}