.mobile-only{display:none!important}@media (min-width:769px){.desktop-only{display:flex!important}.mobile-only{display:none!important}}@media (max-width:768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}}.piano-desktop{position:fixed;top:0;right:20px;display:flex;gap:12px;z-index:9998}.p-key{display:flex;justify-content:center;align-items:flex-end;padding-bottom:25px;text-decoration:none;font-family:'Golos Text',sans-serif;position:relative;transition:0.1s ease;box-shadow:0 6px 0 #bbb;border-radius:0 0 8px 8px}.v-letter{display:flex;flex-direction:column;align-items:center;font-size:11px;line-height:1.3;font-weight:500}.p-key.white{background:#fff;height:160px;width:55px;border:2px solid #eee;border-top:none;color:#000;z-index:1}.p-key.black{background:#1a1a1a;color:#fff;width:34px;z-index:2;margin:0 -25px;border:1px solid #000;height:190px;top:-70px}.p-key:active{transform:translateY(5px);box-shadow:0 0px 0 #bbb;color:#ff4500!important}.piano-toggle{position:fixed!important;top:5px!important;right:5px!important;z-index:999999!important;background:#fff!important;width:35px!important;height:35px!important;align-items:center;justify-content:center;border-radius:8px;box-shadow:0 2px 0 #bbb;cursor:pointer}.piano-icon-wrap{display:flex;gap:2px;pointer-events:none}.p-line{width:8px;height:20px;border-radius:0 0 2px 2px;transition:0.3s}.p-line.white{background:#fff;border:1px solid #888}.p-line.black{background:#1a1a1a;height:14px}.piano-toggle.active .p-line:nth-child(1){transform:rotate(45deg) translate(10px,-5px);background:#fff}.piano-toggle.active .p-line:nth-child(2){opacity:0}.piano-toggle.active .p-line:nth-child(3){transform:rotate(-45deg) translate(-9px,-4px);background:#fff}.piano-offcanvas{position:fixed!important;top:0!important;right:-100%!important;width:45%!important;min-width:180px;height:100vh!important;background:#f4f4f4!important;z-index:100000!important;transition:0.5s cubic-bezier(0.16,1,0.3,1);box-shadow:-10px 0 30px rgba(0,0,0,0.2);display:flex!important;flex-direction:column}.piano-offcanvas.active{right:0!important}.mobile-piano-content{display:flex;flex-direction:column;padding-top:80px;padding-left:32px!important;padding-right:0}.m-key{display:flex;align-items:center;justify-content:flex-end;padding-right:15px;text-decoration:none;font-family:'Golos Text',sans-serif;font-weight:500;font-size:11px;letter-spacing:1px;transition:0.2s ease;border-radius:8px 0 0 8px}.m-white{background:#fff!important;color:#000!important;height:60px;width:100%;border:1px solid #eee;border-right:none;box-shadow:-5px 5px 0px #bbb;margin-bottom:6px;z-index:1}.m-black{background:#1a1a1a!important;color:#fff!important;height:40px;width:80%;align-self:flex-end;border:1px solid #000;border-right:none;box-shadow:-5px 5px 0px #444;margin-bottom:6px;z-index:2}.m-key:active{color:#ff4500!important;transform:translateX(6px);box-shadow:0 0 0 transparent!important}.piano-knob{position:fixed;top:10px;right:calc(15px + 5 * 40px);width:32px;height:32px;background:#fff;border-radius:50%;box-shadow:0 4px 0 #bbb;cursor:pointer;z-index:9999;display:flex;align-items:center;justify-content:center}.knob-core{width:8px;height:18px;border-radius:4px;background:linear-gradient(to bottom,#9a9a9a 0%,#555 50%,#111 100%);transition:transform 0.7s cubic-bezier(.16,1.4,.3,1)}.piano-knob.active .knob-core{transform:rotate(180deg)}.piano-desktop{transition:transform 1.2s cubic-bezier(0.165,0.84,0.44,1)}.piano-desktop.hide-up{transform:translateY(-144px)}