.piano-wrapper[data-v-970b0dcb]{width:100%;min-width:calc(15px * var(--white-key-count));white-space:nowrap;margin:0 auto;padding-top:16px;font-size:0;position:relative}.keys[data-v-970b0dcb]{display:inline}.key[data-v-970b0dcb]{cursor:pointer;border:1px solid var(--token-piano-black-key);border-radius:0 0 5px 5px;display:inline-block}.white-key[data-v-970b0dcb]{width:calc(100% / var(--white-key-count));min-width:15px;height:var(--height);background-color:var(--token-surface-light)}.white-key[data-c-note][data-v-970b0dcb],.white-key[data-other-note][data-v-970b0dcb]{position:relative}.white-key[data-c-note][data-v-970b0dcb]:before,.white-key[data-other-note][data-v-970b0dcb]:before{font-size:12px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.white-key[data-other-note][data-v-970b0dcb]:before{color:var(--token-text-on-light);content:attr(data-other-note)}.white-key[data-c-note][data-v-970b0dcb]:before{color:var(--token-danger-soft);content:attr(data-c-note)}.black-key[data-v-970b0dcb]{z-index:1;width:calc(100% / var(--white-key-count) * .65);min-width:9.75px;height:calc(var(--height) * .65);background-color:var(--token-piano-black-key);position:absolute;transform:translate(-50%)}.black-key[data-v-970b0dcb]:before{border-top:calc(var(--height) * .5525) solid #fff3;margin:0 auto}.black-key[data-v-970b0dcb]:after,.black-key[data-v-970b0dcb]:before{content:"";border-left:3px solid #0000;border-right:3px solid #0000;width:90%;display:block}.black-key[data-v-970b0dcb]:after{border-bottom:calc(var(--height) * .0975) solid #ffffff1a;margin:2px auto 0}.input-wrong-color[data-v-970b0dcb]{background-color:var(--token-danger-soft)!important}.input-wrong-color.black-key[data-v-970b0dcb]{filter:brightness(85%)}.input-answered-color[data-v-970b0dcb]{background-color:var(--token-success)!important}.input-answered-color.black-key[data-v-970b0dcb]{filter:brightness(90%)}.input-hint-color[data-v-970b0dcb]{background-color:#dff4df}.input-hint-color.black-key[data-v-970b0dcb]{filter:brightness(70%)}.input-base-color[data-v-970b0dcb]{background-color:#79addc}.input-base-color.black-key[data-v-970b0dcb],.input-out-of-range-color.black-key[data-v-970b0dcb],.input-reference-color.black-key[data-v-970b0dcb]{filter:brightness(85%)}.input-reference-color[data-v-970b0dcb]{background-color:var(--token-sub)}.input-out-of-range-color[data-v-970b0dcb]{background-color:var(--token-piano-disabled-key)}.input-out-of-range-color.input-base-color[data-v-970b0dcb],.input-out-of-range-color.input-wrong-color[data-v-970b0dcb]{background-color:var(--theme-border,#707070)!important}.input-out-of-range-color.input-base-color.black-key[data-v-970b0dcb],.input-out-of-range-color.input-wrong-color.black-key[data-v-970b0dcb]{filter:brightness(70%)}.piano-container__out-of-range-alert[data-v-0a906a60]{top:calc(8px + env(safe-area-inset-top,0px));z-index:1200;pointer-events:none;position:fixed;left:50%;transform:translate(-50%)}.setting-menu-button[data-v-4d1d227a]{width:100%;min-height:40px;color:var(--token-main-text);cursor:pointer;background-color:var(--token-surface);border:2px solid var(--token-main);border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:0 12px;font-size:14px;font-weight:600;line-height:1;transition:opacity .2s;display:flex}.setting-menu-button[data-v-4d1d227a]:hover{opacity:.8}