.base-piano[data-v-19b71e1f]{--black-key-height-ratio:.58;--black-key-height:calc(var(--black-key-height-ratio) * 100%);--black-key-label-padding-bottom:4px;--black-key-width:calc((100% / var(--white-key-count)) * var(--piano-black-key-width-ratio,.7));--black-label-gap:1px;--black-note-font-size:11px;--black-solfege-font-size:9px;--edge-cut-width:calc(var(--black-key-width) * .6);--key-border-width:2px;--piano-background-color:#34363a;--piano-base-black-key-color:var(--piano-base-white-key-color);--piano-base-black-label-color:var(--piano-base-white-label-color);--piano-black-label-color:var(--token-text-inverse);--piano-base-white-key-color:var(--token-highlight);--piano-base-white-label-color:var(--token-text-on-light);--piano-black-key-color:var(--token-piano-black-key);--piano-relation-color:#005b79;--piano-target-black-key-color:var(--piano-target-white-key-color);--piano-target-black-label-color:var(--piano-target-white-label-color);--piano-target-white-key-color:#c6e2f8;--piano-target-white-label-color:var(--token-text-on-light);--piano-white-key-color:var(--token-surface-light);--piano-white-label-color:var(--token-text-on-light);--relation-bottom-space:0px;--relation-label-font-size:14px;--relation-line-stroke-width:2.2px;--relation-top-space:0px;--white-key-count:7;--white-key-label-padding-bottom:8px;--white-label-gap:4px;--white-note-font-size:18px;--white-solfege-font-size:14px;box-sizing:border-box;width:100%;padding:var(--relation-top-space) 0 var(--relation-bottom-space);flex-shrink:0;margin-left:auto;margin-right:auto;position:relative;overflow:visible}.base-piano__content[data-v-19b71e1f]{width:100%;height:auto;aspect-ratio:var(--piano-aspect-ratio,7/3);background-color:var(--piano-background-color);border:var(--key-border-width) solid var(--piano-black-key-color);position:relative;overflow:hidden}.base-piano__relations[data-v-19b71e1f]{z-index:8;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.base-piano__relations-svg[data-v-19b71e1f]{width:100%;height:100%;overflow:visible}.base-piano__relation-line[data-v-19b71e1f]{fill:none;stroke:var(--piano-relation-color);stroke-width:var(--relation-line-stroke-width);stroke-linecap:butt;stroke-linejoin:round;vector-effect:non-scaling-stroke}.base-piano__relation-head[data-v-19b71e1f]{fill:var(--piano-relation-color);stroke:none}.base-piano__relation-label[data-v-19b71e1f]{font-size:var(--relation-label-font-size);dominant-baseline:middle;text-anchor:middle;fill:var(--piano-relation-color);stroke:var(--theme-surface-light,#f0f0f0);stroke-width:.45px;paint-order:stroke;vector-effect:non-scaling-stroke;font-weight:600}.base-piano__white-keys[data-v-19b71e1f]{grid-template-columns:repeat(var(--white-key-count),1fr);width:100%;height:100%;display:grid}.base-piano__label[data-v-19b71e1f]{gap:var(--white-label-gap);flex-direction:column;align-items:center;font-weight:600;line-height:1;display:flex}.base-piano__label--white-key[data-v-19b71e1f]{color:var(--piano-white-label-color)}.base-piano__label--black-key[data-v-19b71e1f]{gap:var(--black-label-gap);color:var(--piano-black-label-color)}.base-piano__white-key[data-v-19b71e1f]{box-sizing:border-box;padding-bottom:var(--white-key-label-padding-bottom);background-color:var(--piano-white-key-color);border-right:var(--key-border-width) solid var(--piano-black-key-color);justify-content:center;align-items:flex-end;display:flex}.base-piano__white-key[data-v-19b71e1f]:last-child{border-right:none}.base-piano__white-key.is-base[data-v-19b71e1f]{background-color:var(--piano-base-white-key-color)}.base-piano__white-key.is-base .base-piano__label--white-key[data-v-19b71e1f]{color:var(--piano-base-white-label-color)}.base-piano__white-key.is-target[data-v-19b71e1f]{background-color:var(--piano-target-white-key-color)}.base-piano__white-key.is-target .base-piano__label--white-key[data-v-19b71e1f]{color:var(--piano-target-white-label-color)}.base-piano__black-keys[data-v-19b71e1f]{height:var(--black-key-height);pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.base-piano__black-key[data-v-19b71e1f]{box-sizing:border-box;width:var(--black-key-width);height:100%;padding-bottom:var(--black-key-label-padding-bottom);background-color:var(--piano-black-key-color);border:var(--key-border-width) solid var(--piano-black-key-color);border-top-width:0;justify-content:center;align-items:flex-end;display:flex;position:absolute}.base-piano__black-key.is-base[data-v-19b71e1f]{background-color:var(--piano-base-black-key-color)}.base-piano__black-key.is-base .base-piano__label--black-key[data-v-19b71e1f]{color:var(--piano-base-black-label-color)}.base-piano__black-key.is-target[data-v-19b71e1f]{background-color:var(--piano-target-black-key-color)}.base-piano__black-key.is-target .base-piano__label--black-key[data-v-19b71e1f]{color:var(--piano-target-black-label-color)}.base-piano__solfege[data-v-19b71e1f]{font-size:var(--white-solfege-font-size);white-space:nowrap}.base-piano__solfege--black-key[data-v-19b71e1f]{font-size:var(--black-solfege-font-size)}.base-piano__note[data-v-19b71e1f]{font-size:var(--white-note-font-size);white-space:nowrap}.base-piano__note--black-key[data-v-19b71e1f]{font-size:var(--black-note-font-size)}.base-piano.has-left-overflow .base-piano__content[data-v-19b71e1f]{clip-path:polygon(var(--edge-cut-width) 0,100% 0,100% 100%,0 100%,0 var(--black-key-height),var(--edge-cut-width) var(--black-key-height))}.base-piano.has-right-overflow .base-piano__content[data-v-19b71e1f]{clip-path:polygon(0 0,calc(100% - var(--edge-cut-width)) 0,calc(100% - var(--edge-cut-width)) var(--black-key-height),100% var(--black-key-height),100% 100%,0 100%)}.base-piano.has-left-overflow.has-right-overflow .base-piano__content[data-v-19b71e1f]{clip-path:polygon(var(--edge-cut-width) 0,calc(100% - var(--edge-cut-width)) 0,calc(100% - var(--edge-cut-width)) var(--black-key-height),100% var(--black-key-height),100% 100%,0 100%,0 var(--black-key-height),var(--edge-cut-width) var(--black-key-height))}.base-piano[data-v-19b71e1f]:after,.base-piano[data-v-19b71e1f]:before{top:var(--relation-top-space);z-index:5;width:var(--edge-cut-width);height:calc((100% - var(--relation-top-space) - var(--relation-bottom-space)) * var(--black-key-height-ratio));pointer-events:none;content:"";background-color:#0000;display:none;position:absolute}.base-piano.has-left-overflow[data-v-19b71e1f]:before{border-right:var(--key-border-width) solid var(--piano-black-key-color);left:0}.base-piano.has-left-overflow[data-v-19b71e1f]:before,.base-piano.has-right-overflow[data-v-19b71e1f]:after{border-bottom:var(--key-border-width) solid var(--piano-black-key-color);display:block}.base-piano.has-right-overflow[data-v-19b71e1f]:after{border-left:var(--key-border-width) solid var(--piano-black-key-color);right:0}