.rx-slider { position: relative; display: grid; min-width: 0; gap: 4px; }
.rx-slider__track { position: absolute; top: calc(var(--rx-control-height) / 2 - 1.5px); right: 0; left: 0; height: 3px; overflow: visible; border-radius: 2px; background: var(--rx-track); pointer-events: none; }
.rx-slider__fill { display: block; width: var(--rx-slider-fill, 0%); height: 100%; border-radius: inherit; background: var(--rx-red); }
.rx-slider__thumb { position: absolute; top: 50%; left: var(--rx-slider-fill, 0%); width: var(--rx-slider-thumb-size); height: var(--rx-slider-thumb-size); transform: translate(-50%, -50%); border: 2px solid var(--rx-red); border-radius: 50%; background: var(--rx-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.rx-slider__input { position: relative; z-index: 1; width: 100%; height: var(--rx-control-height); margin: 0; opacity: 0; cursor: pointer; }
.rx-slider__input:disabled { cursor: not-allowed; }
.rx-slider__labels { display: flex; justify-content: space-between; gap: 8px; color: var(--rx-muted); font-size: 10px; line-height: 1; }
.rx-slider:has(.rx-slider__input:disabled) { opacity: .68; }
.rx-slider:has(.rx-slider__input:disabled) .rx-slider__fill { background: var(--rx-track); }
.rx-slider:has(.rx-slider__input:disabled) .rx-slider__thumb { border-color: #BDBDBD; box-shadow: none; }

.rx-fader { position: relative; width: 34px; flex: 0 0 auto; }
.rx-fader--compact { height: 116px; }
.rx-fader--standard { height: 126px; }
.rx-fader__rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); border-radius: 2px; background: #222; pointer-events: none; }
.rx-fader__fill { position: absolute; right: 0; bottom: 0; left: 0; height: var(--rx-fader-fill, 50%); border-radius: inherit; background: var(--rx-red); }
.rx-fader__thumb { position: absolute; bottom: var(--rx-fader-fill, 50%); left: 50%; width: var(--rx-fader-thumb-width); height: var(--rx-fader-thumb-height); transform: translate(-50%, 50%); border: 1px solid #BDBDBD; border-radius: 3px; background: var(--rx-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
.rx-fader__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; writing-mode: vertical-lr; direction: rtl; }
.rx-fader__input:disabled { cursor: not-allowed; }

.rx-segmented { display: grid; min-width: 0; gap: 4px; }
.rx-segmented--compact { display: flex; flex-wrap: wrap; }
.rx-segmented--equal, .rx-segmented--grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.rx-segmented__item { min-width: 0; min-height: 32px; overflow: visible; padding: 4px 7px; border: 1px solid var(--rx-border); border-radius: var(--rx-control-radius); color: var(--rx-text); background: var(--rx-surface); font-size: 12px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.rx-segmented__item:hover:not(:disabled) { border-color: var(--rx-red); color: var(--rx-red); background: var(--rx-hover); }
.rx-segmented__item[aria-pressed="true"] { border-color: var(--rx-red); color: #fff; background: var(--rx-red); }
.rx-segmented__item:disabled { border-color: var(--rx-border); color: var(--rx-muted); background: var(--rx-hover); opacity: 1; }

.rx-control-section { min-width: 0; padding: var(--rx-section-padding); border: 1px solid var(--rx-border); border-radius: var(--rx-control-radius); background: var(--rx-surface); }
.rx-control-section__header { display: flex; min-width: 0; min-height: 18px; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.rx-control-section__label { min-width: 0; overflow: hidden; color: var(--rx-text); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rx-control-section__value { flex: 0 0 auto; color: var(--rx-red); font-size: 12px; font-weight: 700; white-space: nowrap; }
.rx-control-section__value-wrap { display: inline-flex; min-width: 0; align-items: baseline; justify-content: flex-end; gap: 3px; }
.rx-numeric-unit { color: var(--rx-muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.rx-semantic-numeric-input { box-sizing: border-box; min-width: 0; border: 1px solid #DCDCDC; border-radius: var(--rx-radius-sm); color: var(--rx-red); background: var(--rx-surface); font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.rx-semantic-numeric-input:hover:not(:disabled), .rx-semantic-numeric-input:focus { border-color: var(--rx-red); outline: 0; }
.rx-semantic-numeric-input:disabled, .rx-semantic-numeric-input[readonly] { color: var(--rx-muted); background: var(--rx-hover); }

.rx-toggle { position: relative; width: 41px; height: 22px; min-height: 22px; padding: 0; border: 1px solid #AEB2B4; border-radius: 999px; background: #B9BCBF; cursor: pointer; }
.rx-toggle.is-on { border-color: var(--rx-red); background: var(--rx-red); }
.rx-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform 170ms ease; }
.rx-toggle.is-on .rx-toggle__thumb { transform: translateX(19px); }

@media (max-height: 820px) and (min-width: 1001px) {
  .rx-fader--compact { height: 104px; }
}