.loader{height:80px;width:300px;position:relative;margin:0 auto}.loader-track{position:absolute;inset:50% 0 0;height:4px;background:linear-gradient(to right,transparent 0%,rgba(156,163,175,.3) 20%,rgba(156,163,175,.5) 50%,rgba(156,163,175,.3) 80%,transparent 100%);border-radius:2px;transform:translateY(-50%);animation:track-pulse 2s ease-in-out infinite}.loader-ball{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--step-color, #3b82f6);box-shadow:0 0 20px var(--step-color, #3b82f6),0 0 40px #3b82f64d,inset -4px -4px 8px #0003,inset 4px 4px 8px #ffffff4d;top:50%;left:0;transform:translateY(-50%);animation:ball-bounce 1.2s cubic-bezier(.68,-.55,.265,1.55) infinite,ball-roll 2.4s linear infinite}.loader[data-step="1"] .loader-ball{background:#3b82f6;box-shadow:0 0 20px #3b82f6,0 0 40px #3b82f64d,inset -4px -4px 8px #0003,inset 4px 4px 8px #ffffff4d}.loader[data-step="2"] .loader-ball{background:#a855f7;box-shadow:0 0 20px #a855f7,0 0 40px #a855f74d,inset -4px -4px 8px #0003,inset 4px 4px 8px #ffffff4d}.loader[data-step="3"] .loader-ball{background:#6366f1;box-shadow:0 0 20px #6366f1,0 0 40px #6366f14d,inset -4px -4px 8px #0003,inset 4px 4px 8px #ffffff4d}.loader[data-step="4"] .loader-ball{background:#10b981;box-shadow:0 0 20px #10b981,0 0 40px #10b9814d,inset -4px -4px 8px #0003,inset 4px 4px 8px #ffffff4d}@keyframes ball-bounce{0%,to{transform:translateY(-50%) translate(0) scaleY(1)}25%{transform:translateY(-80%) translate(75px) scaleY(.8)}50%{transform:translateY(-50%) translate(150px) scaleY(1)}75%{transform:translateY(-80%) translate(225px) scaleY(.8)}}@keyframes ball-roll{0%{left:0;transform:translateY(-50%) translate(0) rotate(0)}25%{left:25%;transform:translateY(-50%) translate(0) rotate(90deg)}50%{left:50%;transform:translateY(-50%) translate(0) rotate(180deg)}75%{left:75%;transform:translateY(-50%) translate(0) rotate(270deg)}to{left:100%;transform:translateY(-50%) translate(-24px) rotate(360deg)}}@keyframes track-pulse{0%,to{opacity:.5}50%{opacity:1}}.dark .loader-track{background:linear-gradient(to right,transparent 0%,rgba(75,85,99,.5) 20%,rgba(75,85,99,.7) 50%,rgba(75,85,99,.5) 80%,transparent 100%)}