@scope(.ds-slider){:scope{--tone:var(--t-tone-sky);--ds-slider-track:var(--t-fill-track);--ds-slider-thumb:18px;display:block}:scope.ds-tone-amber{--tone:var(--t-tone-amber)}:scope.ds-tone-sage{--tone:var(--t-tone-sage)}:scope.ds-tone-plum{--tone:var(--t-tone-plum)}:scope.ds-tone-ember{--tone:var(--t-tone-ember)}:scope .ds-slider__label{font-family:var(--type-family-ui);font-weight:var(--type-weight-medium);font-size:var(--type-size-2xs);letter-spacing:var(--type-track-wider);text-transform:uppercase;color:var(--t-fg-subtle);margin-bottom:var(--space-2);display:block}:scope .ds-slider__row{align-items:center;gap:var(--space-3);display:flex;position:relative}:scope .ds-slider__input{appearance:none;cursor:pointer;anchor-name:--ds-slider-input;background:0 0;flex:1;height:8px}:scope .ds-slider__input::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:var(--ds-slider-track);height:8px}:scope .ds-slider__input::-moz-range-track{border-radius:var(--radius-full);background:var(--ds-slider-track);height:8px}:scope .ds-slider__input::-webkit-slider-thumb{appearance:none;box-sizing:content-box;border-radius:var(--radius-full);background:var(--t-fg-primary);border:2px solid oklch(from var(--tone) l c h / var(--alpha-75));cursor:pointer;width:14px;height:14px;box-shadow:0 0 6px oklch(from var(--tone) l c h / var(--alpha-45));margin-top:-5px}:scope .ds-slider__input::-moz-range-thumb{box-sizing:content-box;border-radius:var(--radius-full);background:var(--t-fg-primary);border:2px solid oklch(from var(--tone) l c h / var(--alpha-75));cursor:pointer;width:14px;height:14px}@media (pointer:coarse){:scope{--ds-slider-thumb:44px}:scope .ds-slider__input{height:44px}:scope .ds-slider__input::-webkit-slider-thumb{box-sizing:border-box;width:44px;height:44px;box-shadow:inset 0 0 0 2px oklch(from var(--tone) l c h / var(--alpha-75));filter:drop-shadow(0 0 3px oklch(from var(--tone) l c h / var(--alpha-45)));background-clip:content-box;border:13px solid #0000;margin-top:-18px}:scope .ds-slider__input::-moz-range-thumb{box-sizing:border-box;width:44px;height:44px;box-shadow:inset 0 0 0 2px oklch(from var(--tone) l c h / var(--alpha-75));background-clip:content-box;border:13px solid #0000}}@media (forced-colors:active){:scope .ds-slider__input::-webkit-slider-runnable-track{box-sizing:border-box;border:1px solid buttontext}:scope .ds-slider__input::-moz-range-track{box-sizing:border-box;border:1px solid buttontext}:scope .ds-slider__input::-webkit-slider-thumb{forced-color-adjust:none;background-color:buttontext}:scope .ds-slider__input::-moz-range-thumb{forced-color-adjust:none;background-color:buttontext}:scope .ds-slider__input:focus-visible{outline-offset:2px;outline:2px solid highlight}}:scope .ds-slider__bubble{font-family:var(--type-family-mono);font-size:var(--type-size-xs);color:var(--t-fg-primary);text-align:right;min-width:28px}:scope[data-fine-scrub] .ds-slider__row{touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none}:scope[data-fine-scrub] .ds-slider__input{pointer-events:none}:scope .ds-slider__rate{padding:var(--space-2) var(--space-3);background:var(--elev-3-scrim);backdrop-filter:var(--elev-3-blur);border:1px solid var(--elev-3-border);border-radius:var(--radius-sm);box-shadow:var(--elev-3-shadow);color:var(--t-fg-primary);font-family:var(--type-family-mono);font-size:var(--type-size-2xs);letter-spacing:var(--type-track-wider);text-transform:uppercase;white-space:nowrap;pointer-events:none;margin:0;position:fixed;inset:auto;transform:translate(-50%,-100%)}:scope .ds-slider__marks{height:6px;margin-top:var(--space-2);position:relative}:scope .ds-slider__marks span{background:var(--t-fg-subtle);width:1px;height:4px;position:absolute;top:0;transform:translate(-50%)}@supports (anchor-name:--x){:scope .ds-slider__bubble{background:var(--t-bg-elevated);border:1px solid var(--t-border-hairline);border-radius:var(--radius-sm);position-anchor:--ds-slider-input;position-area:top;opacity:0;min-width:0;transition:opacity var(--motion-duration-quick);padding:1px 6px;position:absolute;top:-22px;left:0}:scope:hover .ds-slider__bubble,:scope:focus-within .ds-slider__bubble{opacity:1}}}