.scrub-cursor { stroke: #6ee7a8; stroke-width: 2.5; pointer-events: none; }
.scrub-dot { fill: #6ee7a8; stroke: #10261c; stroke-width: 2; pointer-events: none; }
.scrub-controls { position: relative; padding: 12px 4px 0; color: #adbdc2; font-size: 14px; }
.scrub-output { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; font-variant-numeric: tabular-nums; }
.scrub-time { border: 1px solid #387856; background: #142c21; color: #9bf1c2; padding: 6px 10px; border-radius: 6px; font-weight: 650; white-space: nowrap; }
.scrub-values { line-height: 1.7; }
.network-scrubber { width: 100%; height: 44px; margin: 4px 0 0; padding: 0; cursor: ew-resize; accent-color: #6ee7a8; background: transparent; border: 0; touch-action: pan-y; }
.network-scrubber:focus-visible { outline: 2px solid #6ee7a8; outline-offset: 2px; }
.scrub-controls small { display: block; font-size: 12px; color: #adbdc2; }
.network-chart:has(.scrub-controls) { height: auto; min-height: 320px; }
.network-chart:has(.scrub-controls) > svg { display: block; width: 100%; height: 280px; }
.chart-shell:has(.scrub-controls) { height: auto; padding-bottom: 0; }
.chart-shell:has(.scrub-controls) > svg { width: 100%; height: 270px; }
.chart-shell:has(.scrub-controls) .chart-axis--bottom { display: none; }
@media (max-width: 700px) {
  .network-chart:has(.scrub-controls) > svg, .chart-shell:has(.scrub-controls) > svg { height: 220px; }
  .scrub-output { display: grid; gap: 8px; }
  .scrub-time { justify-self: start; font-size: 16px; }
  .scrub-controls small { font-size: 13px; }
}