.keys[data-v-0f337140]{border:1px solid color-mix(in srgb,var(--ui-border) 80%,transparent);background:var(--ui-bg);border-radius:5px;height:32px;display:flex;overflow:hidden}.key[data-v-0f337140]{flex:none;display:block;position:relative}.white[data-v-0f337140]{width:calc(100%/var(--white-key-count));border-right:1px solid color-mix(in srgb,var(--ui-border) 65%,transparent);background:color-mix(in srgb,var(--ui-bg) 75%,#fff);height:100%}.black[data-v-0f337140]{z-index:1;width:calc(100%/var(--white-key-count)*.62);height:58%;margin-right:calc(100%/var(--white-key-count)*-.31);margin-left:calc(100%/var(--white-key-count)*-.31);background:color-mix(in srgb,var(--ui-text) 72%,var(--ui-bg));border-radius:0 0 2px 2px}.white.active[data-v-0f337140]{background:color-mix(in srgb,var(--ui-primary) 28%,var(--ui-bg))}.black.active[data-v-0f337140]{background:color-mix(in srgb,var(--ui-primary) 76%,var(--ui-text))}.middle-c[data-v-0f337140]{z-index:2;border-right-color:var(--ui-primary);box-shadow:inset 2px 0 var(--ui-primary),inset -1px 0 var(--ui-primary)}.middle-c-marker[data-v-0f337140]{background:var(--ui-primary);color:#fff;border-radius:2px;padding:1px 2px;font-size:7px;font-weight:700;line-height:1;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}