.ab-bateria{--text-primary:var(--color-text);--text-secondary:var(--color-muted);--text-tertiary:var(--color-muted);--link-color:var(--color-accent);--bg-primary:var(--color-surface);--border-color:var(--color-line);--line-width:1px}.bateria-notation__viewport{--notation-fade-out:14px;--notation-fade-in:56px;--notation-played:1;--notation-playhead:33.333%;--notation-played-ramp:24px;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg, transparent 0, rgb(0 0 0/var(--notation-played)) var(--notation-fade-out), rgb(0 0 0/var(--notation-played)) calc(var(--notation-playhead) - var(--notation-played-ramp)), #000 var(--notation-playhead), #000 calc(100% - var(--notation-fade-in)), transparent 100%);-webkit-mask-image:linear-gradient(90deg, transparent 0, rgb(0 0 0/var(--notation-played)) var(--notation-fade-out), rgb(0 0 0/var(--notation-played)) calc(var(--notation-playhead) - var(--notation-played-ramp)), #000 var(--notation-playhead), #000 calc(100% - var(--notation-fade-in)), transparent 100%);mask-image:linear-gradient(90deg, transparent 0, rgb(0 0 0/var(--notation-played)) var(--notation-fade-out), rgb(0 0 0/var(--notation-played)) calc(var(--notation-playhead) - var(--notation-played-ramp)), #000 var(--notation-playhead), #000 calc(100% - var(--notation-fade-in)), transparent 100%);align-items:center;display:flex;position:relative;overflow:hidden}.bateria-notation__viewport.is-scrolled{--notation-fade-out:48px}.bateria-notation__viewport.is-played-faded{--notation-played:.4}.bateria-notation__track{will-change:transform;flex:none}.bateria-notation-overlay .bateria-notation__track svg,.bateria-notation-overlay svg{width:auto;min-width:0;height:auto;max-height:var(--notation-max-h,110px);display:block}.bateria-notation-overlay.has-custom-size .bateria-notation__track svg,.bateria-notation-overlay.has-custom-size svg{max-height:var(--notation-max-h,150px)}.bateria-notation__playhead{background:var(--link-color);opacity:0;pointer-events:none;z-index:1;width:2px;box-shadow:0 0 4px color-mix(in srgb, var(--link-color) 40%, transparent);border-radius:1px;margin-left:-1px;transition:opacity .15s;position:absolute;top:0;bottom:0;left:33.333%}.bateria-notation__playhead.is-active{opacity:.9}.bateria-studio.is-sheet-focus .bateria-rhythm-highway{display:none}.bateria-studio.is-sheet-focus .bateria-notation-overlay .bateria-notation__track svg,.bateria-studio.is-sheet-focus .bateria-notation-overlay svg{max-height:var(--notation-max-h,min(240px, 42vh))}.bateria-studio.is-sheet-focus .bateria-notation-overlay.has-custom-size .bateria-notation__track svg,.bateria-studio.is-sheet-focus .bateria-notation-overlay.has-custom-size svg{max-height:var(--notation-max-h,230px)}.bateria-rhythm-highway{z-index:3;pointer-events:none;position:absolute;inset:0}.bateria-lane-labels{z-index:2;text-align:center;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);opacity:.85;grid-template-columns:repeat(3,1fr);font-size:.65rem;font-weight:600;display:grid;position:absolute;top:calc(62% + 3rem);left:0;right:0}.bateria-lanes{grid-template-columns:repeat(3,1fr);display:grid;position:absolute;inset:0}.bateria-lane-labels[data-lane-count="1"],.bateria-lanes[data-lane-count="1"]{grid-template-columns:1fr}.bateria-lane-labels[data-lane-count="2"],.bateria-lanes[data-lane-count="2"]{grid-template-columns:repeat(2,1fr)}.bateria-lane-labels[data-lane-count="4"],.bateria-lanes[data-lane-count="4"]{grid-template-columns:repeat(4,1fr)}.bateria-lane-labels[data-lane-count="5"],.bateria-lanes[data-lane-count="5"]{grid-template-columns:repeat(5,1fr)}.bateria-lane-labels[data-lane-count="6"],.bateria-lanes[data-lane-count="6"]{grid-template-columns:repeat(6,1fr)}.bateria-lane-labels[data-lane-count="7"],.bateria-lanes[data-lane-count="7"]{grid-template-columns:repeat(7,1fr)}.bateria-lane-labels[data-lane-count="8"],.bateria-lanes[data-lane-count="8"]{grid-template-columns:repeat(8,1fr)}.bateria-lane-labels[data-lane-count="6"],.bateria-lane-labels[data-lane-count="7"],.bateria-lane-labels[data-lane-count="8"]{font-size:.58rem}.bateria-lane-label--kick{order:1;grid-column:1/-1;margin-top:.35rem}.bateria-lane{position:relative}.bateria-lane:after{content:"";background:linear-gradient(180deg, transparent 0%, transparent 45%, color-mix(in srgb, var(--border-color) 30%, transparent) 62%, transparent 100%);width:1px;position:absolute;top:0;bottom:0;right:0}.bateria-lane:last-child:after{display:none}.bateria-lane.is-hidden{opacity:.2}.bateria-lane.is-flash{animation:.3s ease-out bateria-lane-flash}@keyframes bateria-lane-flash{0%{background:color-mix(in srgb, var(--link-color) 18%, transparent)}to{background:0 0}}.bateria-hit-line{background:var(--link-color);height:2px;box-shadow:0 0 4px color-mix(in srgb, var(--link-color) 50%, transparent);z-index:4;pointer-events:none;position:absolute;top:62%;left:0;right:0}.bateria-hit-keys{z-index:6;pointer-events:none;grid-template-columns:repeat(3,1fr);justify-items:center;display:grid;position:absolute;top:62%;left:0;right:0;transform:translateY(-50%)}.bateria-hit-keys[data-lane-count="4"]{grid-template-columns:repeat(4,1fr)}.bateria-hit-keys[data-lane-count="5"]{grid-template-columns:repeat(5,1fr)}.bateria-hit-keys[data-lane-count="6"]{grid-template-columns:repeat(6,1fr)}.bateria-hit-keys[data-lane-count="7"]{grid-template-columns:repeat(7,1fr)}.bateria-hit-keys[data-lane-count="8"]{grid-template-columns:repeat(8,1fr)}.bateria-hit-key{border:var(--line-width) solid var(--border-color);background:color-mix(in srgb, var(--bg-primary) 88%, transparent);color:var(--text-secondary);box-shadow:0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent);border-radius:5px;padding:.16rem .45rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.2;transition:color 80ms,border-color 80ms,box-shadow 80ms,transform 80ms}.bateria-hit-key.is-active{color:var(--link-color);border-color:var(--link-color);background:color-mix(in srgb, var(--link-color) 14%, var(--bg-primary));box-shadow:0 0 10px color-mix(in srgb, var(--link-color) 45%, transparent);transform:scale(1.14)}.bateria-gem{z-index:3;border-radius:4px;width:28px;height:28px;position:absolute;left:50%;transform:translate(-50%)}.bateria-gem.is-hit{transform:translate(-50%)scale(1.15);box-shadow:0 0 16px}.bateria-lane--kick{color:var(--color-piece-kick)}.bateria-lane--snare{color:var(--color-piece-snare)}.bateria-lane--hihat{color:var(--color-piece-hihat)}.bateria-lane--crash{color:var(--color-piece-crash)}.bateria-lane--ride{color:var(--color-piece-ride)}.bateria-lane--ht{color:var(--color-piece-tom1)}.bateria-lane--mt{color:var(--color-piece-tom2)}.bateria-lane--lt{color:var(--color-piece-floor)}.bateria-lane--perc{color:var(--color-piece-perc)}.bateria-lanes>.bateria-kick-track{z-index:0;position:absolute;inset:0}.bateria-kick-track:after{display:none}.bateria-kick-track.is-flash{animation:none}.bateria-kick-track.is-flash:before{content:"";background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--link-color) 22%, transparent), transparent);height:2.5rem;animation:.3s ease-out forwards bateria-kick-flash;position:absolute;top:calc(62% - 1.25rem);left:0;right:0}@keyframes bateria-kick-flash{0%{opacity:1}to{opacity:0}}.bateria-lane--kick .bateria-gem,.bateria-lane--kick .bateria-gem.is-hit{opacity:.8;background:currentColor;border-radius:999px;width:auto;height:6px;margin-top:11px;left:6%;right:6%;transform:none}.bateria-lane--snare .bateria-gem,.bateria-lane--ht .bateria-gem,.bateria-lane--mt .bateria-gem,.bateria-lane--lt .bateria-gem{background:currentColor;border-radius:4px;width:24px;height:24px;margin-top:2px}.bateria-lane--hihat .bateria-gem{border:3px solid;border-radius:50%;width:24px;height:24px;margin-top:2px}.bateria-lane--crash .bateria-gem{border:3px solid;border-radius:2px;width:20px;height:20px;margin-top:4px;transform:translate(-50%)rotate(45deg)}.bateria-lane--ride .bateria-gem{background:radial-gradient(circle,currentColor 0 3px,#0000 3.5px);border:3px solid;border-radius:50%;width:26px;height:26px;margin-top:1px}.bateria-lane--crash .bateria-gem.is-hit{transform:translate(-50%)rotate(45deg)scale(1.15)}.bateria-lane--perc .bateria-gem{border:2px dotted;width:16px;height:16px;margin-top:6px}.bateria-beat-markers{z-index:5;pointer-events:none;justify-content:space-around;padding:0 12%;display:flex;position:absolute;top:calc(62% - 1.6rem);left:0;right:0}.bateria-beat-marker{font-variant-numeric:tabular-nums;color:var(--text-tertiary);opacity:.5;font-size:.85rem;font-weight:700;transition:opacity .1s,color .1s,transform .1s}.bateria-beat-marker.is-active{opacity:1;color:var(--link-color);transform:scale(1.2)}.bateria-notation svg path,.bateria-notation svg text,.bateria-notation-overlay svg path,.bateria-notation-overlay svg text{transition:fill 80ms linear,stroke 80ms linear}.bateria-notation svg .vf-stem,.bateria-notation-overlay svg .vf-stem{stroke:var(--text-primary)}@media (prefers-reduced-motion:reduce){.bateria-notation svg path,.bateria-notation svg text,.bateria-notation-overlay svg path,.bateria-notation-overlay svg text,.bateria-beat-marker,.bateria-gem,.bateria-lane.is-flash,.bateria-kick-track.is-flash:before,.bateria-notation__playhead,.bateria-music-flow__segment,.bateria-music-flow__fill{transition:none;animation:none}}