@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-d41a367d],[data-v-d41a367d]::backdrop,[data-v-d41a367d]:after,[data-v-d41a367d]:before{--tw-duration:initial;--tw-font-weight:initial}}}.piano-keyboard[data-v-d41a367d]{overflow:hidden;padding:1vh 0;touch-action:none;width:100%}.keyboard-container[data-v-d41a367d]{display:flex;height:180px;justify-content:center;min-width:-moz-fit-content;min-width:fit-content;-webkit-user-select:none;-moz-user-select:none;user-select:none}.key[data-v-d41a367d]{cursor:pointer;--tw-border-style:none;transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));--tw-duration:.1s;border-style:none;outline:none;position:relative;transition-duration:.1s}.key.white[data-v-d41a367d]{align-items:flex-end;background:linear-gradient(#f8f8f6,#eeeeec);border-bottom:3px solid #c8c8c6;border-right:1px solid #d4d4d2;box-shadow:0 2px 4px #00000026;display:flex;flex-shrink:0;height:100%;justify-content:center;width:48px}.key.white[data-v-d41a367d],.key.white[data-v-d41a367d]:first-child{border-radius:0 0 6px 6px}.key.white[data-v-d41a367d]:hover{background:linear-gradient(#fff,#f5f5f3)}.key.white.active[data-v-d41a367d]{background:linear-gradient(#e8e8e6,#ddddd8);border-bottom-width:1px;box-shadow:0 1px 2px #0000001a,inset 0 0 20px #c6a75e40;transform:translateY(2px)}.key.white.highlighted[data-v-d41a367d]{background:linear-gradient(#4ade80,#22c55e);box-shadow:0 2px 4px #00000026,0 0 16px #22c55e80}.key.white.active.highlighted[data-v-d41a367d]{background:linear-gradient(#22c55e,#16a34a)}.key.white.error[data-v-d41a367d]{background:linear-gradient(#f87171,#ef4444);box-shadow:0 2px 4px #00000026,0 0 16px #ef444480}.black-key-slot[data-v-d41a367d]{position:relative;width:0;z-index:2}.key.black[data-v-d41a367d]{align-items:flex-end;background:linear-gradient(#2a2a2a,#0a0a0a);border-radius:0 0 4px 4px;box-shadow:0 3px 6px #0006,inset 0 -1px 2px #ffffff0d;display:flex;height:60%;justify-content:center;left:-16px;position:absolute;top:0;width:32px}.key.black[data-v-d41a367d]:hover{background:linear-gradient(#333,#151515)}.key.black.active[data-v-d41a367d]{background:linear-gradient(#1a1a1a,#050505);box-shadow:0 1px 3px #0000004d,inset 0 0 15px #c6a75e4d;height:58%}.key.black.highlighted[data-v-d41a367d]{background:linear-gradient(#166534,#14532d);box-shadow:0 3px 6px #0006,0 0 12px #22c55e80}.key.black.active.highlighted[data-v-d41a367d]{background:linear-gradient(#14532d,#052e16)}.key.black.error[data-v-d41a367d]{background:linear-gradient(#7f1d1d,#450a0a);box-shadow:0 3px 6px #0006,0 0 12px #ef444480}.key-label[data-v-d41a367d]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,1.33333));padding-bottom:calc(var(--spacing,.25rem)*2);pointer-events:none;--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.white-label[data-v-d41a367d]{color:#888}.black-label[data-v-d41a367d]{color:#999;font-size:.6rem;padding-bottom:calc(var(--spacing,.25rem)*1)}.piano-keyboard.full-piano[data-v-d41a367d]{overflow:hidden;padding:.5vh 0}.piano-keyboard.full-piano .keyboard-container[data-v-d41a367d]{height:clamp(120px,25vh,220px);justify-content:center;min-width:0}.piano-keyboard.full-piano .key.white[data-v-d41a367d]{width:1.83vw}.piano-keyboard.full-piano .key.black[data-v-d41a367d]{left:-.585vw;width:1.17vw}.piano-keyboard.full-piano .key-label[data-v-d41a367d]{font-size:0}@media(max-width:640px){.keyboard-container[data-v-d41a367d]{height:120px}.key.white[data-v-d41a367d]{width:22px}.key.black[data-v-d41a367d]{left:-7px;width:14px}.key-label[data-v-d41a367d]{font-size:0}.middle-c-label[data-v-d41a367d]{font-size:7px;line-height:1}.piano-keyboard.full-piano .keyboard-container[data-v-d41a367d]{height:clamp(90px,20vh,160px)}}@property --tw-duration{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}