.block-chart-range { margin-top: var(--space-4); min-width: 0; }
.block-chart-range-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--fs-2xs); }
.block-chart-range-heading output { font-variant-numeric: tabular-nums; }
.block-chart-range-track { position: relative; height: var(--control-h-l); margin-inline: var(--control-h-s); background: var(--muted); border-radius: var(--radius-sm); touch-action: none; cursor: crosshair; }
.block-chart-range-track > svg { width: 100%; height: 100%; pointer-events: none; }
.block-chart-range-track polyline { fill: none; stroke: var(--reading-secondary,var(--muted-foreground)); stroke-width: 1; }
.block-chart-range-window { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb,var(--primary) 16%,transparent); border-block: 1px solid var(--primary); cursor: grab; }
.block-chart-range-window:active { cursor: grabbing; }
.block-chart-range-handle { position: absolute; top: 0; bottom: 0; width: var(--control-h-s); touch-action: none; cursor: ew-resize; }
.block-chart-range-handle[data-range-handle="start"] { transform: translateX(-100%); }
.block-chart-range-handle[data-range-handle="end"] { transform: translateX(0); }
.block-chart-range-handle::after { content: ''; display: block; height: var(--space-4); width: var(--space-1); margin: auto; border-inline: 1px solid currentColor; }