.cx-slider { display: flex; align-items: center; gap: var(--sp-4); width: 100%; }

.cx-range {
  appearance: none; -webkit-appearance: none;
  flex: 1; min-width: var(--slider-min-w); height: var(--ctl-h-icon); background: transparent; cursor: pointer;
  /* --fill is written by the element as the value changes, so the filled part
   * of the track follows the theme's accent without JS naming a colour. */
  --fill: 0%;
}
.cx-range::-webkit-slider-runnable-track {
  height: var(--sp-2); border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}
.cx-range::-moz-range-track {
  height: var(--sp-2); border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}
.cx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb-size); height: var(--thumb-size); margin-top: calc((var(--sp-2) - var(--thumb-size)) / 2);
  border-radius: var(--r-pill); background: var(--elev-1);
  border: var(--bw-2) solid var(--accent);
  transition: transform var(--dur-1) var(--ease-standard);
}
.cx-range::-moz-range-thumb {
  width: var(--thumb-size); height: var(--thumb-size); border-radius: var(--r-pill);
  background: var(--elev-1); border: var(--bw-2) solid var(--accent);
}
.cx-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.cx-range:focus-visible { outline: none; }
.cx-range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.cx-range:focus-visible::-moz-range-thumb { box-shadow: var(--focus-ring); }
.cx-range:disabled { opacity: var(--disabled-opacity); cursor: default; }

.cx-slider-sm .cx-range { height: var(--thumb-size); }

.cx-readout {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-5); color: var(--text);
  flex: none; width: 8ch; min-width: 8ch; height: var(--ctl-h-md); padding: 0 var(--sp-3);
  text-align: right; background: var(--elev-2);
  border: var(--bw) solid var(--line); border-radius: var(--ctl-r);
}
.cx-readout:hover:not(:disabled) { border-color: var(--line-hover); }

.cx-macro { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.cx-macro-presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.cx-macro-presets .cx-on { color: var(--accent); background: var(--accent-soft); }

.cx-range-pair { display: flex; flex-direction: column; gap: var(--sp-1); width: 100%; }