.play-control-buttons[data-v-2874aaa2]{display:flex;gap:8px}.base-snackbar__text[data-v-5ee02014]{align-items:center;background-color:#333;border-radius:8px;color:#fff;display:flex;font-size:14px;height:40px;justify-content:center;opacity:.9;width:240px}.piano-wrapper[data-v-519af0b1]{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-519af0b1]{display:inline}.key[data-v-519af0b1]{border:1px solid #333;border-radius:0 0 5px 5px;cursor:pointer;display:inline-block}.white-key[data-v-519af0b1]{background-color:#fff;height:var(--height);min-width:15px;width:calc(100%/var(--white-key-count))}.white-key[data-c-note][data-v-519af0b1],.white-key[data-other-note][data-v-519af0b1]{position:relative}.white-key[data-c-note][data-v-519af0b1]:before,.white-key[data-other-note][data-v-519af0b1]:before{bottom:0;font-size:12px;left:50%;position:absolute;transform:translate(-50%)}.white-key[data-other-note][data-v-519af0b1]:before{color:#333;content:attr(data-other-note)}.white-key[data-c-note][data-v-519af0b1]:before{color:#ff9191;content:attr(data-c-note)}.black-key[data-v-519af0b1]{background-color:#333;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-519af0b1]:before{border-top:calc(var(--height)*.65*.85) solid hsla(0,0%,100%,.2);margin:0 auto}.black-key[data-v-519af0b1]:after,.black-key[data-v-519af0b1]:before{border-left:3px solid transparent;border-right:3px solid transparent;content:"";display:block;width:90%}.black-key[data-v-519af0b1]:after{border-bottom:calc(var(--height)*.65*.15) solid hsla(0,0%,100%,.1);margin:2px auto 0}.input-wrong-color[data-v-519af0b1]{background-color:#ff9191!important}.input-wrong-color.black-key[data-v-519af0b1]{filter:brightness(85%)}.input-answered-color[data-v-519af0b1]{background-color:#4c9f70!important}.input-answered-color.black-key[data-v-519af0b1]{filter:brightness(90%)}.input-hint-color[data-v-519af0b1]{background-color:#dff4df}.input-hint-color.black-key[data-v-519af0b1]{filter:brightness(70%)}.input-base-color[data-v-519af0b1]{background-color:#79addc}.input-base-color.black-key[data-v-519af0b1]{filter:brightness(85%)}.input-reference-color[data-v-519af0b1]{background-color:#f0972d}.input-reference-color.black-key[data-v-519af0b1]{filter:brightness(85%)}.input-out-of-range-color[data-v-519af0b1]{background-color:#c4d4d9}.input-out-of-range-color.black-key[data-v-519af0b1]{filter:brightness(85%)}.input-out-of-range-color.input-base-color[data-v-519af0b1],.input-out-of-range-color.input-wrong-color[data-v-519af0b1]{background-color:#707070!important}.input-out-of-range-color.input-base-color.black-key[data-v-519af0b1],.input-out-of-range-color.input-wrong-color.black-key[data-v-519af0b1]{filter:brightness(70%)}.piano-container__out-of-range-alert[data-v-e12852da]{left:50%;pointer-events:none;position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);transform:translate(-50%);z-index:1200}