.eth-ruler{background:var(--eth-color-bg-inset);border-bottom:var(--eth-border-width) solid var(--eth-color-border);cursor:default;-webkit-user-select:none;user-select:none;touch-action:none;font-family:var(--eth-font-mono);font-size:var(--eth-fs-xs);color:var(--eth-color-text-dim);position:relative;overflow:hidden}.eth-ruler__marks{position:absolute;top:0;left:0}.eth-beat-canvas{pointer-events:none;transform-origin:0 0;will-change:transform}.eth-ruler__loop{height:var(--eth-size-ruler-loop-height);background:var(--eth-color-accent);opacity:.85;border-radius:0 0 var(--eth-radius-sm) var(--eth-radius-sm);cursor:grab;will-change:transform;position:absolute;top:0;left:0}.eth-ruler__loop:after{content:"";inset:0 0 calc(-1 * var(--eth-size-ruler-loop-hit-extra));position:absolute}.eth-ruler__loop--off{background:var(--eth-color-knob-track);opacity:.9}.eth-ruler__playhead{will-change:transform;left:calc(-1 * var(--eth-size-playhead-marker-half-width));border-left:var(--eth-size-playhead-marker-half-width) solid transparent;border-right:var(--eth-size-playhead-marker-half-width) solid transparent;border-top:var(--eth-size-playhead-marker-height) solid var(--eth-color-playhead);pointer-events:none;width:0;height:0;transition:border-top-color var(--eth-duration-slow) var(--eth-ease-out);position:absolute;bottom:0}.eth-ruler__playhead[data-playing]{border-top-color:var(--eth-color-playhead-playing)}.eth-playhead-line{width:var(--eth-border-width);background:var(--eth-color-playhead);pointer-events:none;z-index:2;will-change:transform;opacity:var(--eth-opacity-muted);transition:opacity var(--eth-duration-slow) var(--eth-ease-out), background-color var(--eth-duration-slow) var(--eth-ease-out);position:absolute;top:0;bottom:0;left:0}.eth-playhead-line[data-playing]{opacity:1;background:var(--eth-color-playhead-playing)}.eth-playhead-line:before{content:"";width:var(--eth-space-xl);background:linear-gradient(to right, transparent, var(--eth-color-playhead-glow));pointer-events:none;opacity:0;transition:opacity var(--eth-duration-slow) var(--eth-ease-out);position:absolute;top:0;bottom:0;right:100%}.eth-playhead-line[data-playing]:before{opacity:1}:root[data-glow=off] .eth-playhead-line:before{display:none}.eth-render-frozen{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.eth-render-frozen__shade{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--eth-color-text-dim) 16%, transparent) 0 var(--eth-space-hair), transparent var(--eth-space-hair) var(--eth-space-sm)), color-mix(in srgb, var(--eth-color-bg) 55%, transparent);position:absolute;top:0;bottom:0}.eth-render-frozen__shade[hidden]{display:none}.eth-render-frozen__shade--before{left:0}.eth-render-frozen__shade--after{right:0}.eth-render-frozen__shade--after[data-edge]{border-left:var(--eth-border-width-strong) dashed var(--eth-color-warn)}.eth-render-frozen__label{top:50%;left:var(--eth-space-xs);padding-inline:var(--eth-space-xs);border-radius:var(--eth-radius-sm);font-size:var(--eth-fs-xs);white-space:nowrap;color:var(--eth-color-warn);background:var(--eth-color-bg-overlay);line-height:1.4;position:absolute;transform:translateY(-50%)}.eth-render-frozen__shade--after:not([data-edge]) .eth-render-frozen__label{display:none}