.piano-roll.svelte-1e1qha5{-webkit-tap-highlight-color:transparent}.piano-roll.svelte-1e1qha5 .key:not(.empty){border-radius:var(--in-radius);outline:var(--in-outline) solid black;background:var(--key-color);box-shadow:inset 0 var(--key-shadow-px) 0 var(--key-shadow-color)}.piano-roll.svelte-1e1qha5 .key:not(.empty).white{--key-color: var(--piano-white);--key-shadow-color: var(--piano-white-shadow);--key-shadow-px: var(--in-shadow);--key-hover-color: var(--piano-white-hover)}.piano-roll.svelte-1e1qha5 .key:not(.empty).black{--key-color: var(--piano-black);--key-shadow-color: var(--piano-black-shadow);--key-shadow-px: calc(var(--in-shadow) / 1.2);--key-hover-color: var(--piano-black-hover)}.piano-roll.svelte-1e1qha5 .key:not(.empty).pressed{--key-color: var(--piano-pressed);--key-shadow-color: var(--piano-pressed-shadow);--key-shadow-px: var(--in-shadow-pressed);--key-hover-color: var(--piano-pressed-hover)}.piano-roll.svelte-1e1qha5.interactive .key:hover{background:var(--key-hover-color)}.piano-roll.svelte-1e1qha5{cursor:inherit}.piano-roll.svelte-1e1qha5.interactive{cursor:pointer}.piano-roll.svelte-1e1qha5{--key-width:calc(100% / 7);width:100%;height:100%;display:grid}.piano-roll.svelte-1e1qha5 .white-row{grid-row:1;grid-column:1;height:100%;display:flex}.piano-roll.svelte-1e1qha5 .white-row .key{flex:1}.piano-roll.svelte-1e1qha5 .black-row{grid-row:1;grid-column:1;width:calc(100% - var(--key-width));height:calc(var(--in-black-height) * 100%);margin:0 auto;display:flex;justify-content:space-around}.piano-roll.svelte-1e1qha5 .black-row .key{flex-basis:calc((var(--in-black-width) * var(--key-width)))}.piano-roll.svelte-1e1qha5 .black-row .key.black[data-chroma="1"],.piano-roll.svelte-1e1qha5 .black-row .key.black[data-chroma="6"]{transform:translate(calc(-100% * var(--in-lone-offset)))}.piano-roll.svelte-1e1qha5 .black-row .key.black[data-chroma="3"],.piano-roll.svelte-1e1qha5 .black-row .key.black[data-chroma="10"]{transform:translate(calc(100% * var(--in-lone-offset)))}div.svelte-lr7leg{--in-lone-offset:var(--lone-offset, .1);--in-black-width:var(--black-width, .825);--in-black-height:var(--black-height, .65);--in-radius:var(--radius, 5px);--in-outline:var(--outline, 4px);--in-shadow:calc(-1 * var(--shadow, 15px));--in-shadow-pressed:calc(-1 * var(--shadow-pressed, 5px))}div.svelte-lr7leg{width:100%;height:100%;display:flex;background:#000;border-radius:var(--in-radius);outline:var(--in-outline) solid black}