.echo-slider{position:relative;width:100%;max-width:260px}.echo-slider__control{display:flex;align-items:center;min-width:1.75rem;height:var(--echo-control-compact);cursor:pointer;touch-action:none}.echo-slider__track{position:relative;width:100%;height:10px;border-radius:var(--echo-radius-full);background:var(--echo-drawn-hollow,linear-gradient(160deg,color-mix(in oklab,var(--echo-well) 72%,var(--echo-shade-ink,black)),color-mix(in oklab,var(--echo-lcd) 88%,var(--echo-shade-ink,black))));box-shadow:var(
    --echo-shadow-well,inset 0 2px 5px color-mix(in oklab,var(--echo-cast-ink,black) calc(.6 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1))),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)
  )}.echo-slider__rail{position:absolute;inset:0;height:100%;overflow:hidden;border-radius:inherit}.echo-slider__indicator{position:absolute;height:100%;border-radius:var(--echo-radius-full);background:var(--echo-drawn-fill,linear-gradient(90deg,var(--echo-accent-5) 0,var(--echo-accent-glow) 100%));box-shadow:inset 0 calc(1px * (1 - var(--echo-drawn, 0))) 0 color-mix(in oklch,var(--echo-accent-highlight) 45%,transparent)}.echo-slider__indicator:before{content:"";position:absolute;inset-block:0;inset-inline-end:calc(100% - 5px);width:400px;background:var(--echo-drawn-fill,var(--echo-accent-5));box-shadow:inherit}.echo-slider__thumb{display:flex;align-items:center;justify-content:center;width:28px;height:28px}.echo-slider__cap,.echo-slider__travel{display:flex;width:100%;height:100%;will-change:transform}.echo-slider__cap{align-items:center;justify-content:center;border-radius:var(--echo-radius-full);background:var(--echo-drawn-ink,linear-gradient(180deg,var(--echo-cap-highlight) 0,color-mix(in oklab,var(--echo-cap-highlight) 50%,var(--echo-cap)) 40%,var(--echo-cap) 62%,var(--echo-cap-shadow) 100%));box-shadow:inset 0 1px 0 rgb(255 255 255/calc(.42 * var(--echo-gloss, 1))),0 0 0 calc(2px * var(--echo-drawn, 0)) var(--echo-surface),0 calc(3px + 6px * var(--lift, 0)) calc(6px + 12px * var(--lift, 0)) color-mix(in oklab,var(--echo-cast-ink,black) calc(.55 * var(--echo-shade, 1) * 100%),transparent)}.echo-slider__thumb:has(:focus-visible){outline:2px solid transparent;outline-offset:2px;border-radius:var(--echo-radius-full)}.echo-slider__thumb:has(:focus-visible) .echo-slider__cap{box-shadow:inset 0 1px 0 rgb(255 255 255/calc(.42 * var(--echo-gloss, 1))),0 0 0 2px var(--echo-surface),0 0 0 4px var(--echo-accent-ink,var(--echo-accent-glow))}.echo-slider__grip{width:2px;height:12px;border-radius:var(--echo-radius-full);background:var(--echo-accent-glow);box-shadow:0 0 calc(6px * var(--lift, 0) * (1 - var(--echo-drawn, 0))) var(--echo-accent-glow)}.echo-slider[data-disabled]{opacity:.45}@media (pointer:coarse){.echo-slider__thumb>input{width:44px;height:44px;transform:translate(-8px,-8px)}}.echo-slider[data-size=sm] .echo-slider__control{height:var(--echo-control-compact)}.echo-slider[data-size=sm] .echo-slider__track{height:6px}.echo-slider[data-size=sm] .echo-slider__thumb{width:20px;height:20px}.echo-slider[data-size=sm] .echo-slider__grip{height:8px}@media (forced-colors:active){.echo-slider__track{background:Canvas;border:var(--echo-border-hairline,1px) solid ButtonText}.echo-slider__indicator{background:Highlight}.echo-slider__cap{background:ButtonText;border:var(--echo-border-thick,2px) solid Canvas}.echo-slider__grip{background:Canvas}}