.piano-modal .modal-card{width:min(1100px,100%);max-height:calc(100dvh - 40px);padding:34px 36px 25px;background:linear-gradient(135deg,#242620,#171b17);border-color:#baa16d66;box-shadow:0 30px 110px #000b}
.piano-modal .modal-card h2{font:normal clamp(28px,3.5vw,40px)/1.15 Georgia,serif;margin:12px 0 9px}
.piano-modal .piano-intro{margin:0 0 24px;font:italic 15px Georgia,serif;color:#bcb29e}
.piano-modal #modal-choices{display:none}
.piano-instrument{overflow:hidden;border:1px solid #836342;border-radius:7px;background:#211a15;box-shadow:0 18px 35px #0005,0 1px 0 #c5a88040 inset}
.piano-fallboard{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px;min-height:151px;padding:24px 28px 26px;background:linear-gradient(180deg,#403025 0%,#251c17 12%,#31231b 80%,#1a120e);border-bottom:5px solid #742b29;box-shadow:0 -1px 0 #bd935566 inset}
.piano-small-label{display:block;font:9px Arial,sans-serif;letter-spacing:2px;color:#c3aa85}
.piano-readout{min-width:0}.piano-readout output{display:block;margin:10px 0 6px;font:26px Georgia,serif;color:#f0dfb9;overflow-wrap:anywhere}.piano-readout #piano-frequency{font:10px Arial,sans-serif;color:#b4a28b;letter-spacing:.5px}
.piano-maker{text-align:center;color:#c6a576;display:grid;gap:8px}.piano-maker-mark{width:25px;height:31px;border:1px solid #c6a57675;margin:0 auto;font:24px Georgia,serif;box-shadow:0 0 0 3px #c6a57614}.piano-maker strong{font:13px Georgia,serif;letter-spacing:3px;font-weight:400}.piano-maker>span:last-child{font:7px Arial,sans-serif;letter-spacing:2.8px;color:#a88c67}
.piano-register{text-align:right}.piano-register>div{display:flex;align-items:center;justify-content:end;gap:12px;margin:12px 0 8px}.piano-register output{font:14px Georgia,serif;color:#e4d1aa;white-space:nowrap}.piano-register button{width:30px;height:30px;border:1px solid #b698655c;border-radius:50%;background:#ffffff06;color:#d7bd8d;font:18px Arial,sans-serif}.piano-register>span:last-child{font:7px Arial,sans-serif;letter-spacing:2.2px;color:#aa9174}.piano-register button:disabled{cursor:default;opacity:.3}
.piano-key-scroll{padding:0 12px;background:#171310;overflow-x:auto;scrollbar-color:#8e7651 #211912;scrollbar-width:thin;overscroll-behavior-x:contain}
#piano-keyboard{position:relative;height:235px;min-width:690px;isolation:isolate;touch-action:none;user-select:none}
.piano-key{position:absolute;top:0;left:calc(var(--key-position)*100%/15);display:flex;flex-direction:column;align-items:center;justify-content:end;border-radius:0 0 4px 4px;padding:0 0 21px;touch-action:none;gap:13px;transition:background .06s,box-shadow .06s}
.piano-white{z-index:1;width:calc(100%/15);height:100%;color:#6a6050;background:linear-gradient(90deg,#d7cfbc 0%,#f6f1df 9%,#fff9eb 65%,#eee6d2 98%);border:1px solid #857d6c;box-shadow:0 -7px 0 #c2b59b inset,0 -8px 0 #fff7df inset,0 4px 6px #0005}
.piano-white.is-down{background:linear-gradient(90deg,#ccb688,#e9d2a0 20%,#f8e2b4 80%,#d0b98b);box-shadow:0 5px 16px #0004 inset,0 -2px 0 #a68d62 inset;transform:translateY(3px);height:calc(100% - 3px)}
.piano-black{z-index:2;width:calc(64%/15);height:61%;padding-bottom:13px;color:#bcb09a;background:linear-gradient(90deg,#151515,#373531 18%,#252421 80%,#111 97%);border:1px solid #090a08;box-shadow:0 -10px 0 #131411 inset,0 -11px 0 #4a4941 inset,3px 6px 6px #0006;gap:9px}
.piano-black.is-down{background:linear-gradient(90deg,#392e20,#6c5533 40%,#45351e);box-shadow:0 -3px 0 #241d14 inset,1px 2px 2px #0007;transform:translateY(3px);height:calc(61% - 3px)}
.piano-key:focus-visible{outline:2px solid #b28536;outline-offset:-4px}.piano-key-note{font:11px Georgia,serif}.piano-key kbd{font:9px Arial,sans-serif;border:1px solid #a79b804d;border-radius:3px;color:inherit;min-width:18px;padding:3px;text-align:center;background:#fff2}.piano-black kbd{background:#0002;border-color:#a79b8040}
.piano-keybed{height:22px;border-top:1px solid #100e0c;background:linear-gradient(#291e17,#513a27 45%,#2b1e15);box-shadow:0 1px 0 #b28e5044 inset}
.piano-scroll-controls{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;color:#bba785;font:10px Arial,sans-serif}.piano-scroll-controls button{padding:11px 8px;background:transparent;color:#e3c896;font-size:11px;min-height:40px}.piano-scroll-controls button:disabled{cursor:default;opacity:.3}
.piano-controls{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin:25px 0 19px;font:12px Arial,sans-serif}
.piano-controls button{display:flex;align-items:center;gap:12px;background:#ffffff04;border:1px solid #b39b6655;border-radius:4px;padding:12px 15px;color:#e0d3b9;min-height:43px}
.piano-controls button[aria-pressed=true]{background:#bd9e6424;border-color:#c5a66c}.piano-controls #piano-pedal-state{font-size:10px;color:#c2aa7c}.piano-pedal-icon{display:block;width:22px;height:9px;border:1px solid #c2aa7c;border-radius:9px 2px 2px 4px;transform:rotate(-18deg)}
.piano-volume{display:flex;align-items:center;gap:14px;color:#c3baa5}.piano-volume input{width:100px;accent-color:#c7ac78;cursor:pointer}.piano-volume output{font-size:10px;min-width:28px;color:#b3a78f}
.piano-modal .piano-help{font:11px/2 Arial,sans-serif;color:#b8b09f;margin:0;max-width:760px}.piano-help kbd,.piano-footer kbd{padding:2px 4px;font-size:9px;border-color:#a99c7238;color:#d4c7ab;border-radius:2px}
.piano-footer{border-top:1px solid #c4a86b26;margin-top:21px;padding-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:10px/1.7 Arial,sans-serif;color:#a99e8b}
@media(max-width:720px){.piano-modal{padding:12px}.piano-modal .modal-card{padding:27px 18px 20px}.piano-fallboard{grid-template-columns:1fr 1fr;padding:20px 17px;gap:12px;min-height:130px}.piano-maker{display:none}.piano-register>div{gap:8px}.piano-controls{gap:16px}.piano-key-scroll{padding-inline:7px}#piano-keyboard{height:205px}.piano-footer{display:grid}.piano-volume{gap:8px}.piano-volume input{width:90px}}
@media(max-height:820px) and (min-width:721px){.piano-modal .modal-card{padding:24px 28px 18px}.piano-modal .modal-card h2{font-size:32px;margin-top:10px}.piano-modal .piano-intro{margin-bottom:17px}.piano-fallboard{min-height:110px;padding-block:15px}#piano-keyboard{height:clamp(135px,27dvh,210px)}.piano-controls{margin-block:18px 12px}.piano-footer{margin-top:15px;padding-top:12px}}
@media(prefers-reduced-motion:reduce){.piano-key{transition:none}}