.piano-key[data-v-f563dce9]{transform-origin:bottom;transition:all .2s ease}.black-key[data-v-f563dce9]{border:1px solid rgba(17,24,39,.3);border-radius:0 0 .375rem .375rem;box-shadow:0 3px 6px #0003,inset 0 1px #ffffff1a;height:134px;width:clamp(26px,2.4vw,34px);z-index:10}.black-key[data-v-f563dce9]:not(.highlighted-key):not(.active-key):not(.hint-key){background-color:#374151}.black-key[data-v-f563dce9]:hover:not(:disabled):not(.highlighted-key):not(.active-key):not(.hint-key){background-color:#4b5563;box-shadow:0 4px 8px #00000040,inset 0 1px #ffffff26}.black-key[data-v-f563dce9]:active:not(:disabled){box-shadow:0 2px 4px #0003,inset 0 2px 4px #00000026;transform:translateY(1px)}@media (max-width:640px){.black-key[data-v-f563dce9]{height:108px}}.success-ring[data-v-f563dce9]{z-index:20}.success-ring[data-v-f563dce9]:after{animation:successRing-f563dce9 .5s ease-out;border:2px solid;border-radius:inherit;content:"";inset:-3px;pointer-events:none;position:absolute;z-index:21}@keyframes successRing-f563dce9{0%{border-width:2px;opacity:.8;transform:scale(1)}to{border-width:1px;opacity:0;transform:scale(1.15)}}.piano-key[data-v-270e05b5]{transform-origin:bottom;transition:all .2s ease}.white-key[data-v-270e05b5]{border:1px solid rgba(229,231,235,.3);border-radius:0 0 .5rem .5rem;box-shadow:0 2px 4px #0000000d,inset 0 1px #ffffff03;height:224px;width:clamp(38px,4vw,56px);z-index:0}.white-key[data-v-270e05b5]:not(.highlighted-key):not(.active-key):not(.hint-key){background-color:#fff}.white-key[data-v-270e05b5]:hover:not(:disabled):not(.highlighted-key):not(.active-key):not(.hint-key){background-color:#f9fafb;box-shadow:0 3px 6px #00000014,inset 0 1px #fffffff2}.white-key[data-v-270e05b5]:active:not(:disabled){box-shadow:0 1px 2px #0000001a,inset 0 2px 4px #0000000d;transform:translateY(2px)}@media (max-width:640px){.white-key[data-v-270e05b5]{height:180px}}.dark .white-key[data-v-270e05b5]{background-color:#1f2937;border-color:#374151}.dark .white-key[data-v-270e05b5]:hover:not(:disabled){background-color:#374151}.success-ring[data-v-270e05b5]{position:relative;z-index:10}.success-ring[data-v-270e05b5]:after{animation:successRing-270e05b5 .5s ease-out;border:2px solid;border-radius:inherit;content:"";inset:-3px;pointer-events:none;position:absolute;z-index:11}@keyframes successRing-270e05b5{0%{border-width:2px;opacity:.8;transform:scale(1)}to{border-width:1px;opacity:0;transform:scale(1.15)}}.octave-container[data-v-2839fa58]{overflow:hidden}.octave-container[data-v-2839fa58]:first-child{border-radius:.5rem 0 0}.octave-container[data-v-2839fa58]:last-child{border-radius:0 .5rem 0 0}.visual-piano[data-v-2839fa58]{isolation:isolate;scrollbar-width:none;-ms-overflow-style:none}.visual-piano[data-v-2839fa58]::-webkit-scrollbar{display:none}@media (max-width:640px){.visual-piano[data-v-2839fa58]{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.white-key[data-v-2839fa58]{height:180px}.black-key[data-v-2839fa58]{height:108px}}@media (prefers-contrast:high){.white-key[data-v-2839fa58]{border:2px solid #000}.black-key[data-v-2839fa58]{border:2px solid #fff}}.keyboard-guide[data-v-e58319a2]{transition:all .2s ease}.kbd[data-v-e58319a2]{border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 4px #0000001a}.kbd[data-v-e58319a2]:hover:not(.cursor-not-allowed){box-shadow:0 4px 8px #00000026;scale:1.05;transform:translateY(-1px)}.key-map-item[data-v-d551bf92]{transition:all .2s ease}.key-map-item[data-v-d551bf92]:hover{box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}