@property --p{syntax:"<number>";inherits:true;initial-value:0}.stu{--p:0;--max:196px;--knob:44px;color:#fff;-webkit-backdrop-filter:blur(14px)saturate(1.15);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff1f;border:1px solid #ffffff59;border-radius:999px;align-items:center;width:250px;height:54px;padding:4px;animation:.5s cubic-bezier(.22,1,.36,1) both stu-in;display:flex;position:relative;box-shadow:inset 0 1px #ffffff73,0 10px 30px -14px #00000080}.stu.is-drag{cursor:grabbing}@keyframes stu-in{0%{opacity:0;transform:translateY(8px)scale(.96)}to{opacity:1;transform:none}}.stu-trail{width:calc(var(--knob) + max(0, var(--p)) * var(--max));background:linear-gradient(90deg, #ffffff0f, rgb(255 255 255/calc(.08 + var(--p) * .16)));pointer-events:none;border-radius:999px;position:absolute;top:4px;bottom:4px;left:4px}.stu-label{padding-left:var(--knob);text-align:center;font-family:var(--font-jet-mono), ui-monospace, monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#0000;background:linear-gradient(100deg,#ffffff8c 0% 40%,#fff 50%,#ffffff8c 60% 100%) 0 0/260% 100%;filter:drop-shadow(0 1px 1.5px #00000073);opacity:max(0, calc(1 - var(--p) * 1.9));pointer-events:none;-webkit-background-clip:text;background-clip:text;flex:1;font-size:11px;animation:2.8s linear infinite stu-shine}@keyframes stu-shine{0%{background-position:130% 0}to{background-position:-30% 0}}.stu-knob{width:var(--knob);height:var(--knob);color:#fff;transform:translateX(calc(max(0, var(--p)) * var(--max)));cursor:inherit;background:#ffffff47;border:1px solid #fff9;border-radius:50%;place-items:center;transition:background-color .25s,box-shadow .3s;display:grid;position:absolute;top:4px;left:4px;box-shadow:inset 0 1px #ffffffb3,inset 0 -8px 16px #0000000f,0 8px 20px -10px #0000008c}.stu-knob svg{width:18px;height:18px}.stu-knob:focus-visible{outline-offset:3px;outline:2px solid #ffffffd9}.stu:hover .stu-knob,.stu.is-drag .stu-knob{background:#ffffff5c;box-shadow:inset 0 1px #fffc,0 0 18px #ffffff40,0 8px 20px -10px #0000008c}.stu.is-settle,.stu.is-done{transition:--p .44s cubic-bezier(.3,1.35,.5,1)}.stu.is-done .stu-knob{background:#ffffff80;box-shadow:inset 0 1px #fff,0 0 32px #ffffff8c,0 8px 20px -10px #0000008c}.stu.is-done{animation:.5s .15s both stu-done}@keyframes stu-done{to{opacity:0;transform:scale(.97)}}@media (max-width:640px){.stu{width:232px}}@media (prefers-reduced-motion:reduce){.stu,.stu-label{animation:none}.stu.is-settle,.stu.is-done{transition:none}.stu-label{color:#ffffffbf;background:0 0}}