.beat-roll.svelte-k8htqx{--note-height: 1rem;overflow-y:auto;height:100%;padding:0 .5rem;scrollbar-width:none}.beat-roll--disabled.svelte-k8htqx{opacity:.5;pointer-events:none;cursor:not-allowed}.beat-roll__inner.svelte-k8htqx{width:100%;height:calc(128 * var(--note-height));position:relative;display:grid;grid-template-columns:repeat(var(--note-count),1fr);grid-template-rows:repeat(128,var(--note-height));background-image:radial-gradient(circle,var(--c-bg-2) 2px,transparent 2px);background-size:calc(100% / var(--note-count)) var(--note-height);background-position:0 0;background-repeat:repeat;transition:all var(--trans-dur, .3s) var(--cubic-out);transform:scaleY(var(--scale-y, 1))}.beat-roll__inner--scaled.svelte-k8htqx{background-image:radial-gradient(circle,transparent 2px,transparent 2px)}.beat-roll__inner--playing.svelte-k8htqx{background-image:linear-gradient(to right,var(--c-bg-2) 100%,transparent 100%);background-repeat:no-repeat;background-size:calc(100% / var(--note-count)) 100%;background-position:calc(var(--play-index) * 100% / (var(--note-count) - 1)) 5%;transition:none}.beat-roll__note.svelte-k8htqx{border-radius:var(--s-radius-0);border:1px solid var(--c-bg-0);position:relative;z-index:1;cursor:pointer;outline:none;display:flex;align-items:center;justify-content:flex-start;color:transparent}.beat-roll__note.svelte-k8htqx:hover{color:var(--c-fg-r-0)}.beat-roll__hover.svelte-k8htqx{position:absolute;width:calc(100% / var(--note-count));height:var(--note-height);outline:none;background:var(--c-bg-0);border-radius:var(--s-radius-0);border:1px solid var(--color, var(--c-bg-0));color:var(--color);top:calc(var(--hover-y) / 128 * 100%);left:calc(var(--hover-x) / var(--note-count) * 100%);z-index:0;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.beat-roll__toolbar-bg.svelte-k8htqx{position:absolute;width:100%;height:100%;background:var(--c-bg-trans-3);border:none;outline:none;font-size:0;color:transparent;z-index:2}.beat-roll__toolbar.svelte-k8htqx{position:absolute;height:3rem;z-index:3;display:flex;align-items:flex-start;justify-content:center}.beat-roll__toolbar-content.svelte-k8htqx{padding:.125rem;border-radius:1.5rem;color:var(--c-fg-r-0);display:flex;align-items:center;justify-content:space-between;cursor:pointer}.beat-roll__tips.svelte-k8htqx{position:sticky;bottom:0;left:0;z-index:4;font-size:.75rem;line-height:1.25rem;height:1.25rem;display:flex;align-items:flex-end;justify-content:flex-start;gap:.75rem;background-color:var(--c-bg-0);opacity:0;visibility:hidden}.beat-roll__tips--show.svelte-k8htqx{opacity:1;visibility:visible}.beat-roll__tips__icon.svelte-k8htqx{display:flex;align-items:flex-top;justify-content:center;width:1.5rem;height:1.5rem;border-radius:.75rem;background:var(--c-bg-0)}.beat-roll__tips__item.svelte-k8htqx{flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem}