.beat-roll.svelte-1r32vjt{--note-height: 1.25rem;position:relative;overflow-y:auto;height:100%;padding:0 .5rem;scrollbar-width:none}.beat-roll--disabled.svelte-1r32vjt{opacity:.5;pointer-events:none;cursor:not-allowed}.beat-roll--playing.svelte-1r32vjt{background-image:linear-gradient(to right,var(--color-route-10, var(--c-bg-1)) 100%,transparent 100%);background-repeat:no-repeat;background-size:calc((100% - 1rem) / var(--note-count)) 100%;background-position:calc(.5rem + var(--play-index) * (100% - 1rem) / (var(--note-count) - 1)) 5%;transition:none}.beat-roll__aside.svelte-1r32vjt{position:absolute;top:0;left:0;bottom:0;width:1.25rem;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:calc(11 * var(--note-height));padding-top:calc(7 * var(--note-height))}.beat-roll__aside__item.svelte-1r32vjt{flex:none;height:var(--note-height);line-height:var(--note-height);font-size:.625rem;color:var(--c-fg-3)}.beat-roll__inner.svelte-1r32vjt{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(--color-ff) 2px,transparent 2px),radial-gradient(circle,var(--c-bg-1) 2px,transparent 2px),radial-gradient(circle,var(--color-ff) 2px,transparent 2px),radial-gradient(circle,var(--c-bg-1) 2px,transparent 2px),radial-gradient(circle,var(--color-ff) 2px,transparent 2px),radial-gradient(circle,var(--color-ff) 2px,transparent 2px),radial-gradient(circle,var(--c-bg-1) 2px,transparent 2px),radial-gradient(circle,var(--color-ff) 2px,transparent 2px),radial-gradient(circle,var(--c-bg-1) 2px,transparent 2px),radial-gradient(circle,var(--color-ff) 2px,transparent 2px),radial-gradient(circle,var(--c-bg-1) 2px,transparent 2px);background-size:calc(100% / var(--note-count)) calc(11 * var(--note-height));background-position:0 var(--note-height),0 0,0 calc(-1 * var(--note-height)),0 calc(-2 * var(--note-height)),0 calc(-3 * var(--note-height)),0 calc(-4 * var(--note-height)),0 calc(-5 * var(--note-height)),0 calc(-6 * var(--note-height)),0 calc(-7 * var(--note-height)),0 calc(-8 * var(--note-height)),0 calc(-9 * var(--note-height));background-repeat:repeat;background-blend-mode:normal;transition:all var(--trans-dur, .3s) var(--cubic-out);transform:scaleY(var(--scale-y, 1))}.beat-roll__inner--moving.svelte-1r32vjt{cursor:grabbing!important}.beat-roll__inner--resizing.svelte-1r32vjt{cursor:ew-resize!important}.beat-roll__inner--scaled.svelte-1r32vjt{background-image:radial-gradient(circle,transparent 2px,transparent 2px)}.beat-roll__note.svelte-1r32vjt{border-radius:var(--s-radius-0);border:1px solid var(--c-bg-0);padding:0;position:relative;z-index:1;outline:none;display:flex;align-items:center;justify-content:flex-start;color:transparent;background:var(--bg-color);padding:0 0 0 .125rem;font-size:.75rem;white-space:nowrap;-webkit-user-select:none;user-select:none}.beat-roll__inner.svelte-1r32vjt:not(.beat-roll__inner--scaled) .beat-roll__note:where(.svelte-1r32vjt):first-of-type{color:var(--c-fg-r-0)}.beat-roll__note.svelte-1r32vjt:hover{color:var(--c-fg-r-0);cursor:pointer}.beat-roll__note--show-note.svelte-1r32vjt{color:var(--c-fg-r-0)}.beat-roll__note--hide.svelte-1r32vjt{background:transparent;border-color:transparent;color:transparent!important;cursor:unset}.beat-roll__note__octave.svelte-1r32vjt{cursor:grab}.beat-roll__note__octave--dragging.svelte-1r32vjt{cursor:grabbing}.beat-roll__note__space.svelte-1r32vjt{flex:1}.beat-roll__note__ticks-bar.svelte-1r32vjt{background:var(--c-bg-0);border:1px solid var(--c-bg-r-0);cursor:ew-resize;display:block;width:.5rem;border-radius:.25rem;margin-right:-.0625rem;color:transparent;opacity:0;font-size:0;height:calc(100% + .125rem)}.beat-roll__note__ticks-bar.svelte-1r32vjt:hover{width:.5rem}.beat-roll__note.svelte-1r32vjt:hover .beat-roll__note__ticks-bar:where(.svelte-1r32vjt){opacity:1}.beat-roll__note--hide.svelte-1r32vjt .beat-roll__note__ticks-bar:where(.svelte-1r32vjt){opacity:0!important}.beat-roll__hover.svelte-1r32vjt{position:absolute;width:calc(100% / var(--note-count) * var(--note-ticks, 1));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;padding:0 0 0 .25rem}.beat-roll__toolbar-bg.svelte-1r32vjt{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-1r32vjt{position:absolute;width:100%;z-index:3;display:flex;align-items:flex-start;justify-content:center;margin-top:1.5rem}.beat-roll__toolbar-content.svelte-1r32vjt{padding:.125rem;border-radius:1.25rem;color:var(--c-fg-r-0);cursor:pointer;display:grid;grid-template-columns:repeat(5,1fr);gap:.125rem}.beat-roll__toolbar-content.svelte-1r32vjt .field{grid-column:span 4;--min-height: 2.25rem;--thumb-height: 2.25rem}.beat-roll__tips.svelte-1r32vjt{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-1r32vjt{opacity:1;visibility:visible}.beat-roll__tips__icon.svelte-1r32vjt{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-1r32vjt{flex:1;display:flex;align-items:center;justify-content:center;gap:.25rem}