.scrub-field{--sf-accent:#f5f5f5;--sf-chip:#1c1c1f;--sf-ghost-ink:#111;--sf-h:30px;--sf-fs:12px;--sf-r:7px;--sf-w:100%;--sf-ease-out:cubic-bezier(.23, 1, .32, 1);isolation:isolate;width:var(--sf-w);height:var(--sf-h);border-radius:var(--sf-r);background:var(--sf-chip);font-family:inherit;font-size:var(--sf-fs);color:#ffffffeb;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-items:center;gap:4px;padding:0 12px 0 6px;line-height:1;transition:background-color .2s,box-shadow .2s;display:inline-flex;position:relative;box-shadow:0 0 0 1px #ffffff0f}.scrub-field[data-dirty=true]{box-shadow:0 0 0 1px color-mix(in srgb, var(--sf-accent) 55%, transparent);transition-duration:0s}.scrub-field[data-typing=true]{background:color-mix(in srgb, currentColor 7%, var(--sf-chip));cursor:text}.scrub-field:focus-within{box-shadow:0 0 0 1px #0a84ffb3}.scrub-field__track{z-index:-1;border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.scrub-field__fill{background:color-mix(in srgb, var(--sf-accent) 7%, transparent);transform-origin:0;position:absolute;inset:0}.scrub-field__ticks{pointer-events:none;position:absolute;inset:0}.scrub-field__tick{background:color-mix(in srgb, var(--sf-accent) 14%, transparent);border-radius:1px;width:1px;height:28%;position:absolute;top:50%;translate:-50% -50%}.scrub-field__thumb{background:color-mix(in srgb, var(--sf-accent) 55%, transparent);pointer-events:none;width:3px;height:42%;transition:background-color .12s ease, height .16s var(--sf-ease-out);border-radius:2px;margin-left:-5px;position:absolute;top:50%;translate:-50% -50%}.scrub-field:hover .scrub-field__thumb,.scrub-field[data-dragging=true] .scrub-field__thumb{background:var(--sf-accent)}.scrub-field[data-dragging=true] .scrub-field__thumb{height:52%}.scrub-field[data-disabled=true]{opacity:.5;cursor:default}.scrub-field__handle{border-radius:calc(var(--sf-r) - 2px);min-width:0;height:100%;color:color-mix(in srgb, currentColor 60%, transparent);white-space:nowrap;text-overflow:ellipsis;cursor:inherit;transition:color .12s ease, transform .16s var(--sf-ease-out);align-items:center;padding:0 6px;font-weight:500;display:inline-flex;overflow:hidden}@media (hover:hover) and (pointer:fine){.scrub-field:not([data-disabled=true]):hover .scrub-field__handle{color:color-mix(in srgb, currentColor 88%, transparent)}}.scrub-field:not([data-disabled=true]):not([data-typing=true]):active .scrub-field__handle,.scrub-field[data-dragging=true] .scrub-field__handle{color:currentColor;transform:scale(.96)}.scrub-field__input{width:100%;min-width:0;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;cursor:inherit;background:0 0;border:0;outline:0;flex:1;margin:0;padding:0;font-weight:500;transition:color .12s}.scrub-field[data-typing=true] .scrub-field__input{cursor:text}.scrub-field[data-over=true] .scrub-field__input{color:color-mix(in srgb, currentColor 55%, transparent)}.scrub-field__suffix{color:color-mix(in srgb, currentColor 45%, transparent);flex:none;font-weight:500}.scrub-field__ghost{transform-origin:50% 100%;background:var(--sf-accent);color:var(--sf-ghost-ink);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .125s var(--sf-ease-out), scale .125s var(--sf-ease-out);border-radius:999px;padding:2px 6px;font-size:11px;font-weight:600;line-height:1.4;position:absolute;top:-6px;left:0;translate:0 -100%;scale:.95}.scrub-field[data-dragging=true] .scrub-field__ghost{opacity:1;scale:1}@media (prefers-reduced-motion:reduce){.scrub-field .scrub-field__handle{transition:color .12s;transform:none}.scrub-field .scrub-field__ghost{transition:opacity .2s;scale:1}}
