@layer warp.inputs{:where([data-scope=slider]){--_v0:0;--_v1:.5;--warp-sweep-radius:9999px;block-size:max(28px, var(--warp-hit-min));touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;align-items:center;display:grid;position:relative}:where([data-scope=slider]) :where([data-part=track]){border-radius:var(--warp-radius-round);background:color-mix(in oklab, var(--warp-color-border-control) 55%, transparent);block-size:4px;position:relative}:where([data-scope=slider]) :where([data-part=range]){inline-size:calc((var(--_v1) - var(--_v0)) * 100%);border-radius:inherit;background:var(--warp-color-accent-solid);position:absolute;inset-block:0;inset-inline-start:calc(var(--_v0) * 100%);overflow:clip}:where([data-scope=slider]) :where([data-part=thumb]){z-index:3;box-sizing:border-box;background:var(--warp-color-surface-raised);border:2px solid var(--warp-color-accent-solid);block-size:18px;inline-size:18px;box-shadow:var(--warp-elevation-1);transition:scale var(--warp-duration-fast) var(--warp-ease-pop), background-color var(--warp-duration-base) var(--warp-ease-out);touch-action:none;border-radius:50%;outline:none;position:absolute;inset-block-start:50%;inset-inline-start:calc(var(--_v) * 100%);translate:-50% -50%}:where([data-scope=slider]) :where([data-part=thumb]):before{content:"";inset:min(-6px, calc((100% - var(--warp-hit-min)) / 2));border-radius:50%;position:absolute}:where([data-scope=slider]) :where([data-part=thumb]:focus-visible){box-shadow:0 0 0 3px color-mix(in oklab, var(--warp-color-sweep) 35%, transparent), var(--warp-elevation-1)}:where([data-scope=slider]) :where([data-part=thumb][data-dragging]){background:var(--warp-color-accent-solid);scale:1.12}:where([data-scope=slider]) :where([data-part=bubble]){border-radius:var(--warp-radius-mark);background:var(--warp-color-surface-inverse);color:var(--warp-color-on-inverse);font:500 var(--warp-text-caption-size) / 1.2 var(--warp-text-body-font);font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--warp-duration-fast), translate var(--warp-duration-fast) var(--warp-ease-out);padding:3px 7px;position:absolute;inset-block-end:calc(100% + 8px);inset-inline-start:50%;translate:-50% 4px}:where([data-scope=slider]) :where([data-part=thumb]:is([data-dragging],:focus-visible)) :where([data-part=bubble]){opacity:1;translate:-50%}:where([data-pointer=coarse]) :where([data-scope=slider] [data-part=bubble]){inset-block-end:calc(100% + 22px)}:where([data-scope=slider]) :where([data-part=ticks]){pointer-events:none;justify-content:space-between;display:flex;position:absolute;inset-block-start:calc(50% + 10px);inset-inline:0}:where([data-scope=slider]) :where([data-part=ticks]) :where(span){inline-size:0;color:var(--warp-color-text-subtle);font-variant-numeric:tabular-nums;justify-items:center;gap:2px;font-size:11px;display:grid}:where([data-scope=slider]) :where([data-part=ticks]) :where(span:first-child){justify-items:start}:where([data-scope=slider]) :where([data-part=ticks]) :where(span:last-child){justify-items:end}:where([data-scope=slider]) :where([data-part=ticks]) :where(span):before{content:"";background:var(--warp-color-border-strong);block-size:4px;inline-size:1px}:where([data-scope=slider]:has([data-part=ticks])){margin-block-end:18px}:where([data-scope=slider][data-disabled]){opacity:var(--warp-opacity-disabled);pointer-events:none}:where([data-scope=slider][data-variant=hue]) :where([data-part=track]){border-radius:var(--warp-radius-mark);block-size:12px;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--warp-color-text) 12%, transparent);background:linear-gradient(90deg in hsl longer hue, #f42525, #f42525)}:where([data-scope=slider][data-variant=hue]) :where([data-part=range]){display:none}:where([data-scope=slider][data-variant=hue]) :where([data-part=thumb]){background:var(--_c,#fff);box-shadow:0 0 0 1px #0000004d, var(--warp-elevation-1);border:2px solid #fff}:where([data-scope=range-head]){justify-content:space-between;align-items:baseline;gap:var(--warp-space-related);display:flex}:where([data-scope=range-head])>:where(:first-child){font:var(--warp-label-float-weight) var(--warp-label-float-size) / 1.4 var(--warp-label-font);letter-spacing:var(--warp-label-float-tracking);text-transform:uppercase;color:var(--warp-color-label-rest)}:where([data-scope=range-head]) :where(output){font:500 var(--warp-text-caption-size)/1.25 var(--warp-font-mono);font-variant-numeric:tabular-nums;color:var(--warp-color-text)}:where([data-fields=classic]) :where([data-scope=range-head])>:where(:first-child){font:var(--warp-text-label-weight) var(--warp-text-label-size) / 1.4 var(--warp-text-label-font);letter-spacing:0;text-transform:none;color:var(--warp-color-text)}:where([data-scope=color]){gap:var(--warp-space-group);display:grid}:where([data-scope=color]) :where([data-part=area]){border-radius:var(--warp-radius-control);touch-action:none;cursor:crosshair;background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(var(--_hue,152) 100% 50%));block-size:148px;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--warp-color-text) 12%, transparent);position:relative}:where([data-scope=color]) :where([data-part=swatch]){cursor:pointer;border-radius:var(--warp-radius-mark);background:var(--_c);block-size:24px;inline-size:24px;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--warp-color-text) 15%, transparent);transition:scale var(--warp-duration-fast) var(--warp-ease-pop);border:0;padding:0;position:relative}:where([data-scope=color]) :where([data-part=swatch]):before{content:"";inset:min(0px, calc((100% - var(--warp-hit-min)) / 2));position:absolute}:where([data-scope=color]) :where([data-part=swatch][aria-checked=true]){box-shadow:0 0 0 2px var(--warp-color-surface), 0 0 0 3.5px var(--warp-color-sweep)}:where([data-scope=color]) :where([data-part=swatch]:hover){scale:1.08}:where([data-scope=color]) :where([data-part=swatch]:focus-visible){outline:var(--warp-focus-width) solid var(--warp-color-focus);outline-offset:3px}:where([data-pointer=coarse]) :where([data-scope=color] [data-part=swatch]){block-size:36px;inline-size:36px}@media (pointer:coarse){:where(:root:not([data-pointer])) :where([data-scope=color] [data-part=swatch]){block-size:36px;inline-size:36px}}}