.al-prog{ position:absolute; display:flex; align-items:center; gap:16px; pointer-events:none;
  --al-prog-lum:0; --al-prog-glow:#FFC53D; --al-prog-k:1; }
.al-prog[hidden]{ display:none; }
.al-prog-turn{ position:relative; }
.al-prog-bar{ position:relative; width:420px; height:65px; border-radius:999px; padding:6px; overflow:hidden; background:#fff;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.2); }
.al-prog-bar i{ display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,#FF5C9A,#FFC53D,#2FC98D,#3DA6D4,#6E7CF0);
  background-size:408px 100%; transition:width .5s cubic-bezier(.34,1.56,.64,1); }
.al-prog-num{ font-family:var(--font-read); font-size:48px; font-weight:900; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.35); white-space:nowrap;
  position:relative; }   
.al-prog-ring{ position:relative; padding:6px; border-radius:999px; overflow:hidden;
  box-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.22); }
.al-prog-spin, .al-prog-beam{ position:absolute; left:50%; top:50%; width:460px; height:460px; margin:-230px 0 0 -230px; }
.al-prog-spin{ background:conic-gradient(#FFC53D 0deg,#FFF6B0 40deg,#ffffff 60deg,#FFF6B0 80deg,#FFC53D 120deg,#FF9F1C 180deg,
                                          #FFC53D 240deg,#FFF6B0 280deg,#ffffff 300deg,#FFF6B0 320deg,#FFC53D 360deg);
  animation:alProgSpin 3.2s linear infinite; will-change:transform; }
@keyframes alProgSpin{ to{ transform:rotate(360deg); } }
.al-prog-beam{ background:conic-gradient(rgba(255,255,255,0) 0deg,#fff 22deg,rgba(255,255,255,0) 46deg,rgba(255,255,255,0) 180deg,#fff 202deg,rgba(255,255,255,0) 226deg,rgba(255,255,255,0) 360deg);
  opacity:var(--al-prog-lum); transition:opacity .5s ease-out; animation:alProgSpin 2.1s linear infinite reverse; will-change:transform,opacity; }
.al-prog-glow{ position:absolute; left:0; top:0; right:0; bottom:0; border-radius:999px; pointer-events:none; }
.al-prog-glow b{ position:absolute; left:0; top:0; right:0; bottom:0; border-radius:999px; display:block; opacity:0; }
.al-prog-g1{ box-shadow:0 0 0 calc(3px*var(--al-prog-k)) var(--al-prog-glow),
                        0 0 calc(12px*var(--al-prog-k)) calc(5px*var(--al-prog-k)) var(--al-prog-glow),
                        0 0 calc(34px*var(--al-prog-k)) calc(12px*var(--al-prog-k)) var(--al-prog-glow);
  transition:opacity .5s ease-out; will-change:opacity; }
.al-prog-glow .al-prog-g1{ opacity:var(--al-prog-lum); }
.al-prog-g2w{ position:absolute; left:0; top:0; right:0; bottom:0; border-radius:999px; opacity:var(--al-prog-lum); transition:opacity .5s ease-out; }
.al-prog-g2{ box-shadow:0 0 calc(22px*var(--al-prog-k)) calc(9px*var(--al-prog-k)) var(--al-prog-glow),
                        0 0 calc(60px*var(--al-prog-k)) calc(22px*var(--al-prog-k)) var(--al-prog-glow);
  animation:alProgBreathe 1.6s ease-in-out infinite alternate; will-change:opacity; }
@keyframes alProgBreathe{ from{ opacity:.15; } to{ opacity:.9; } }
.al-prog.al-prog-dark .al-prog-g2, .al-prog.al-prog-dark .al-prog-beam{ animation:none; }   
.al-prog-b1, .al-prog-b2{ box-shadow:0 0 0 6px var(--al-prog-glow),0 0 26px 10px var(--al-prog-glow); }
.al-prog.al-prog-burst .al-prog-b1{ animation:alProgBurst .9s cubic-bezier(.2,.7,.3,1) 1 both; }
.al-prog.al-prog-burst .al-prog-b2{ animation:alProgBurst .9s cubic-bezier(.2,.7,.3,1) .22s 1 both; }
@keyframes alProgBurst{ 0%{ opacity:.95; transform:scale(1); } 100%{ opacity:0; transform:scale(1.22,2.1); } }
.al-prog.al-prog-stand{ flex-direction:column; }
.al-prog.al-prog-stand .al-prog-box{ width:77px; height:432px; position:relative; }
.al-prog.al-prog-stand .al-prog-turn{ position:absolute; left:50%; top:50%; width:432px; margin:-38.5px 0 0 -216px; transform:rotate(-90deg); }