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