body{background:#e7eee8;background-image:linear-gradient(180deg,#edf3ec 0,#edf3ec 52%,#dce6d7 52%,#dce6d7 54%,#efe1ca 54%,#e6d1b2 100%);background-attachment:fixed}main{max-width:1040px;gap:12px}header{min-height:80px}header:after{width:132px;height:102px;top:-13px}.hero{border:2px solid #bba27c;border-radius:8px;background:linear-gradient(90deg,#fff9e9 49.7%,#e7d5b4 50%,#fff9e9 50.3%);box-shadow:0 5px 0 #a2845e,0 9px 16px #6852381a;padding:16px 22px;position:relative}.hero:before,.hero:after{content:'';position:absolute;bottom:-8px;width:28px;height:17px;border-radius:2px;border:1px solid #876944;background:linear-gradient(#eddab1,#c1a16f);z-index:1;pointer-events:none}.hero:before{left:18px}.hero:after{right:18px}.hero h2{font-size:17px;margin-bottom:9px;color:#826746}#notes{padding:8px 0;background:repeating-linear-gradient(0deg,transparent 0 6px,#c8b48e44 6px 7px,transparent 7px 9px);border-top:1px solid #d9c7a9;border-bottom:1px solid #d9c7a9}#notes span,#notes em{background:#fff9e9dd;border-radius:5px}#notes em{background:#d8e9cf;color:#355a37}.piano-instrument{order:2;width:100%;position:relative;margin:5px 0 2px;filter:drop-shadow(0 7px 5px #674c2c15)}.piano-cabinet{display:block;width:100%;height:128px;object-fit:fill;pointer-events:none}.piano-base{display:block;width:100%;height:125px;object-fit:fill;pointer-events:none;margin-top:-2px}.keyboard{position:relative;background:linear-gradient(#402d22 0 10px,#7a4d34 10px 70%,#b8865c 70%);border:3px solid #67432d;border-top:0;border-bottom:7px solid #a36f4b;border-radius:0 0 8px 8px;padding:8px 16px 15px;gap:3px;box-shadow:inset 0 -4px #e3b786,0 2px 0 #62432d}.keyboard:before{display:none}.key{height:206px;background:linear-gradient(90deg,#f2e9d6,#fffdf2 7%,#fffdf2 90%,#e7dcc4);border:1px solid #aa9879;border-top:0;border-bottom:8px solid #d6c5a2;box-shadow:inset 0 -2px #fff4dd,0 5px 1px #4d302940;border-radius:0 0 6px 6px;padding-bottom:18px;justify-content:flex-end;gap:5px}.key:before{content:'';width:6px;height:6px;left:50%;top:auto;bottom:66px;background:var(--note-color);border:1px solid #b5a382;box-shadow:none}.key b{font-size:22px;position:relative}.key small{font-size:11px}.key:is(.lit,.held){background:linear-gradient(90deg,#d4e4bf,#e4efcb,#c7dba9);transform:translateY(5px);border-bottom-width:4px;box-shadow:inset 0 5px 13px #58703c28,0 1px 1px #3b402d44;color:#3b5e37}.key:is(.lit,.held):before{content:'';background:#78a35e;transform:translateX(-50%)}.black-keys{position:absolute;pointer-events:none;z-index:2}.black-key{display:block;position:absolute;width:7.5%;height:100%;transform:translateX(-50%);background:linear-gradient(90deg,#28282a,#4a4645 18%,#3b3736 75%,#211e1d);border:1px solid #181918;border-bottom:9px solid #1c1e1d;border-radius:0 0 4px 4px;box-shadow:2px 5px 3px #392a2655;pointer-events:auto}.black-key:before{content:'';position:absolute;inset:3px 4px 12px;border-top:2px solid #91847a55;border-left:1px solid #7c726e66;border-radius:0 0 3px 3px;background:linear-gradient(120deg,#ffffff09,transparent)}.piano-guide{text-align:center;font-size:11px;color:#7a664b;letter-spacing:1px;margin-top:-4px}.controls{gap:8px}footer{color:#806d52}@media(max-width:600px){main{gap:12px}header{min-height:62px}header:after{width:90px;height:70px;right:65px;top:-5px}.hero{padding:12px 14px}.hero h2{font-size:14px;margin-bottom:8px}.piano-cabinet{height:84px}.piano-base{height:91px}.keyboard{padding:6px 8px 11px;gap:2px;border-left-width:2px;border-right-width:2px;border-bottom-width:5px}.key{height:158px;border-bottom-width:6px;padding-bottom:12px}.key b{font-size:15px}.key small{font-size:10px}.key:before{bottom:53px;width:5px;height:5px}.black-key{border-bottom-width:7px;border-radius:0 0 3px 3px}.black-key:before{inset:2px 2px 10px}.piano-guide{font-size:10px;margin-top:-3px;letter-spacing:.3px}.piano-instrument{margin:2px 0}.hero:before,.hero:after{height:12px;width:23px;bottom:-6px}}@media(max-width:350px){.key b{font-size:12px}.key{height:149px}.piano-cabinet{height:72px}.piano-base{height:78px}.hero h2{font-size:13px}.piano-guide{font-size:9px}}@media(orientation:landscape) and (max-height:550px){main{grid-template-columns:minmax(180px,.8fr) minmax(0,1.6fr);gap:10px}header{min-height:36px}.piano-instrument{grid-column:2;grid-row:2;order:2;align-self:start;margin:0}.piano-cabinet{height:65px}.piano-base{height:76px}.keyboard{padding:6px 7px 10px;gap:2px}.key{height:142px;padding-bottom:12px;border-bottom-width:5px}.key b{font-size:14px}.key:before{bottom:50px;width:5px;height:5px}.piano-guide{font-size:9px}.hero{padding:11px}.hero h2{display:none}.black-key{border-bottom-width:6px}.controls{margin:0}.hero:before,.hero:after{display:none}}
.black-keys{left:16px;right:16px;top:8px;height:107px}@media(max-width:600px){.black-keys{left:8px;right:8px;top:6px;height:82px}}@media(max-width:350px){.black-keys{height:77px}}@media(orientation:landscape) and (max-height:550px){.black-keys{left:7px;right:7px;top:6px;height:74px}}