.keyboard-scroll[data-v-6449145e]{padding-bottom:4px;overflow-x:auto}.keyboard[data-v-6449145e]{min-width:calc(var(--whites) * var(--key-min));-webkit-user-select:none;user-select:none;height:170px;display:flex;position:relative}.key[data-v-6449145e]{cursor:pointer;border:1px solid #0b1929;justify-content:center;align-items:flex-end;padding:0 0 8px;font-family:inherit;display:flex}.key.white[data-v-6449145e]{background-color:#eef2f6;border-radius:0 0 6px 6px;flex:1;min-width:0}.key.white.active[data-v-6449145e]{background-color:#fbd49f}.key.black[data-v-6449145e]{z-index:1;width:calc(100% / var(--whites) * .6);background-color:#0b1929;border-radius:0 0 4px 4px;height:62%;position:absolute;top:0;transform:translate(-50%)}.key.black.active[data-v-6449145e]{background-color:#b36a07}.key[data-v-6449145e]:focus-visible{z-index:2}.compact[data-v-6449145e]{padding-bottom:0;overflow:hidden}.compact .keyboard[data-v-6449145e]{min-width:0;height:54px}.compact .key[data-v-6449145e]{cursor:inherit;padding:0}.compact .key.white[data-v-6449145e]{border-radius:0 0 3px 3px}.compact .key.black[data-v-6449145e]{border-radius:0 0 2px 2px}.compact .key.marked[data-v-6449145e]{background-color:#7db9de}.compact .key.tonic[data-v-6449145e]{background-color:#f7a433}.mark[data-v-6449145e]{color:#0b1929;white-space:nowrap;background-color:#7db9de;border-radius:13px;justify-content:center;align-items:center;min-width:26px;height:26px;padding:0 4px;font-size:.72rem;font-weight:700;line-height:1;display:flex}.tonic .mark[data-v-6449145e]{background-color:#f7a433}