.sr{--p:0;inset:0;z-index:30;pointer-events:none}.sr,.sr-rail{position:absolute}.sr-rail{right:clamp(10px,2.2vw,34px);top:50%;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(-50%);transition:opacity .4s}.sr[data-state=done] .sr-rail{opacity:.55}.sr-cue{display:flex;flex-direction:column;align-items:center;gap:7px;font-family:var(--font-sans);font-weight:500;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);transition:opacity .3s}.sr-cue i{width:10px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;animation:sr-bounce 1.1s ease-in-out infinite}.sr[data-state=live] .sr-cue{opacity:.5}.sr[data-state=live] .sr-cue i{animation-duration:.7s}.sr[data-state=done] .sr-cue{opacity:0}.sr-track{position:relative;width:10px;height:42svh;border-radius:999px;background:hsla(0,0%,100%,.1);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.14),0 0 0 6px rgba(3,7,19,.38)}.sr-fill{position:absolute;left:0;right:0;top:0;height:calc(var(--p) * 100%);border-radius:999px;background:linear-gradient(180deg,#e05a10,#f0b442 45%,#3fc6ff);box-shadow:0 0 18px rgba(63,198,255,.55)}.sr[data-state=start] .sr-track:after{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(180deg,transparent,hsla(0,0%,100%,.4),transparent);background-size:100% 36%;background-repeat:no-repeat;animation:sr-sweep 1.5s ease-in-out infinite}.sr-tick{position:absolute;left:50%;width:22px;height:2px;border-radius:2px;background:hsla(0,0%,100%,.28);transform:translate(-50%,-50%);transition:background .25s,width .25s}.sr-tick[data-on=true]{width:28px;background:#fff}.sr-knob{position:absolute;left:50%;top:calc(var(--p) * 100%);width:22px;height:22px;border-radius:999px;background:#fff;box-shadow:0 0 0 4px rgba(3,7,19,.6),0 0 24px hsla(0,0%,100%,.55);transform:translate(-50%,-50%);transition:transform .17s cubic-bezier(.2,.8,.2,1)}.sr[data-pulse] .sr-knob{transform:translate(-50%,-50%) scale(1.5)}.sr-knob b{position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);font-family:var(--font-display,inherit);font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:700;line-height:1;letter-spacing:-.02em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 2px 14px rgba(0,0,0,.7)}.sr[data-state=start] .sr-knob b{opacity:.6}.sr-meta{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:7rem;font-family:var(--font-sans);font-weight:500;font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;text-align:center;color:hsla(0,0%,100%,.8);text-shadow:0 2px 10px rgba(0,0,0,.7)}.sr-meta [data-count]{color:#f0b442}.sr-meta [data-label]{color:#fff;font-weight:600}@keyframes sr-bounce{0%,to{transform:translateY(-3px) rotate(45deg);opacity:.45}50%{transform:translateY(4px) rotate(45deg);opacity:1}}@keyframes sr-sweep{0%{background-position:0 -40%}to{background-position:0 140%}}@media (max-width:767px){.sr-rail{right:8px;gap:8px}.sr-track{width:6px;height:30svh;box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.14),0 0 0 4px rgba(3,7,19,.38)}.sr-knob{width:14px;height:14px}.sr-knob b{right:auto;left:50%;top:auto;bottom:calc(100% + 7px);transform:translateX(-50%);padding:3px 7px;border-radius:999px;background:rgba(3,7,19,.8);font-size:.68rem}.sr-tick{width:14px}.sr-tick[data-on=true]{width:18px}.sr-cue{font-size:.5rem}.sr-cue span,.sr-meta{display:none}.sr-knob b{transition:opacity .3s}.sr[data-state=start] .sr-knob b{opacity:0}}@media (prefers-reduced-motion:reduce){.sr-cue i,.sr[data-state=start] .sr-track:after{animation:none}}