.play-control-buttons[data-v-2c4c54fe]{display:flex;gap:8px}.piano-wrapper[data-v-7b2983c3]{font-size:0;margin:0 auto;min-width:calc(15px*var(--white-key-count));padding-top:16px;position:relative;white-space:nowrap;width:100%}.keys[data-v-7b2983c3]{display:inline}.key[data-v-7b2983c3]{border:1px solid #000;border-radius:0 0 5px 5px;cursor:pointer;display:inline-block}.white-key[data-v-7b2983c3]{background-color:#fff;height:var(--height);min-width:15px;width:calc(100%/var(--white-key-count))}.white-key[data-c-note][data-v-7b2983c3],.white-key[data-other-note][data-v-7b2983c3]{position:relative}.white-key[data-c-note][data-v-7b2983c3]:before,.white-key[data-other-note][data-v-7b2983c3]:before{bottom:0;font-size:12px;left:50%;position:absolute;transform:translate(-50%)}.white-key[data-other-note][data-v-7b2983c3]:before{color:#333;content:attr(data-other-note)}.white-key[data-c-note][data-v-7b2983c3]:before{color:#ff9191;content:attr(data-c-note)}.black-key[data-v-7b2983c3]{background-color:#000;height:calc(var(--height)*.65);min-width:9.75px;position:absolute;transform:translate(-50%);width:calc(100%/var(--white-key-count)*.65);z-index:1}.black-key[data-v-7b2983c3]:before{border-top:calc(var(--height)*.65*.85) solid hsla(0,0%,100%,.2);margin:0 auto}.black-key[data-v-7b2983c3]:after,.black-key[data-v-7b2983c3]:before{border-left:3px solid transparent;border-right:3px solid transparent;content:"";display:block;width:90%}.black-key[data-v-7b2983c3]:after{border-bottom:calc(var(--height)*.65*.15) solid hsla(0,0%,100%,.1);margin:2px auto 0}.input-wrong-color[data-v-7b2983c3]{background-color:#ffb6c1!important}.input-wrong-color.black-key[data-v-7b2983c3]{filter:brightness(85%)}.input-answered-color[data-v-7b2983c3]{background-color:#90ee90!important}.input-answered-color.black-key[data-v-7b2983c3]{filter:brightness(90%)}.input-hint-color[data-v-7b2983c3]{background-color:#d3d3d3}.input-hint-color.black-key[data-v-7b2983c3]{filter:brightness(70%)}.input-base-color[data-v-7b2983c3]{background-color:#91e6ff}.input-base-color.black-key[data-v-7b2983c3]{filter:brightness(85%)}.input-reference-color[data-v-7b2983c3]{background-color:gold}.input-reference-color.black-key[data-v-7b2983c3]{filter:brightness(85%)}