@property --p{syntax:"<number>";inherits:true;initial-value:0}.sts{--p:0;--max:260px;--knob:48px;background:var(--color-panel);border:1px solid var(--color-line-strong);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;width:100%;max-width:360px;height:58px;padding:5px;display:flex;position:relative;box-shadow:inset 0 2px 5px #201e191f,0 1px #ffffffb3}.sts.is-drag{cursor:grabbing}.sts.is-disabled{cursor:not-allowed;opacity:.5}.sts-trail{width:calc(var(--knob) + max(0, var(--p)) * var(--max));background:linear-gradient(90deg, color-mix(in srgb, var(--color-pulse) 10%, transparent), color-mix(in srgb, var(--color-pulse) calc(14% + var(--p) * 40%), transparent));pointer-events:none;border-radius:999px;position:absolute;top:5px;bottom:5px;left:5px}.sts-ticks{opacity:0;transition:opacity .2s var(--ease-out-soft);pointer-events:none;position:absolute;inset:0}.sts.is-drag .sts-ticks{opacity:1}.sts-ticks i{background:var(--color-line-strong);border-radius:50%;width:4px;height:4px;margin-left:-2px;position:absolute;bottom:9px}.sts-label{min-width:0;padding:0 18px 0 calc(var(--knob) + 12px);text-align:center;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;color:#0000;background:linear-gradient(100deg, var(--color-dim) 0%, var(--color-dim) 40%, var(--color-frost) 50%, var(--color-dim) 60%, var(--color-dim) 100%);opacity:max(0, calc(1 - var(--p) * 1.9));pointer-events:none;background-size:260% 100%;-webkit-background-clip:text;background-clip:text;flex:1;font-size:11px;font-weight:600;animation:2.8s linear infinite sts-shine;overflow:hidden}.sts.is-done .sts-label{opacity:1;padding:0 calc(var(--knob) + 12px) 0 18px}@keyframes sts-shine{0%{background-position:130% 0}to{background-position:-30% 0}}.sts-knob{width:var(--knob);height:var(--knob);color:var(--color-void);background:var(--color-frost);transform:translateX(calc(max(0, var(--p)) * var(--max))) scale(1);cursor:inherit;border:0;border-radius:50%;place-items:center;transition:background-color .25s,box-shadow .3s,scale .2s;display:grid;position:absolute;top:5px;left:5px;box-shadow:inset 0 1px #ffffff38,inset 0 -6px 12px #00000040,0 6px 14px -6px #201e1999}.sts-knob svg{width:20px;height:20px}.sts-knob:focus-visible{outline:2px solid var(--color-pulse);outline-offset:3px}.sts:hover .sts-knob,.sts.is-drag .sts-knob{box-shadow:inset 0 1px 0 #ffffff38, inset 0 -6px 12px #00000040, 0 0 0 4px var(--color-pulse-dim), 0 10px 18px -8px #201e1999}.sts.is-drag .sts-knob{scale:1.04}.sts.is-settle,.sts.is-done{transition:--p .44s cubic-bezier(.3,1.35,.5,1)}.sts.is-done .sts-knob{background:var(--color-pulse);color:#fff;box-shadow:0 0 0 6px var(--color-pulse-dim), 0 0 24px color-mix(in srgb, var(--color-pulse) 50%, transparent)}@media (prefers-reduced-motion:reduce){.sts-label{color:var(--color-mist);background:0 0;animation:none}.sts.is-settle,.sts.is-done{transition:none}}