.progress-bar{padding:.5rem;border-radius:30px;display:flex;justify-content:center;align-self:center;align-items:center;position:relative;gap:1rem}.progress-helper{background-color:var(--accent);width:calc(100% - 1rem);height:calc(100%);position:absolute;left:calc(0% + .5rem);transform:translateX(-100%) translateY(0);z-index:4}.progress-helper-background{background-color:purple;width:calc(100%);height:calc(100%);position:absolute;right:0;transform:translateX(0);top:0;z-index:1}.anim-helper-0{animation:progress-bar-anim-0 .5s linear forwards;transform:translateX(calc(-100% + 3.5rem)) translateY(0)}.anim-helper-1{animation:progress-bar-anim-1 .5s linear forwards;transform:translateX(calc(-100% + 8rem)) translateY(0)}.anim-helper-2{animation:progress-bar-anim-2 .5s linear forwards;transform:translateX(calc(-100% + 12.5rem)) translateY(0)}.anim-helper-3{animation:progress-bar-anim-3 .5s linear forwards;transform:translateX(calc(-100% + 17rem)) translateY(0)}@keyframes progress-bar-anim-1{0%{transform:translateX(calc(-100% + 3.5rem)) translateY(0)}to{transform:translateX(calc(-100% + 8rem)) translateY(0)}}@keyframes progress-bar-anim-2{0%{transform:translateX(calc(-100% + 8rem)) translateY(0)}to{transform:translateX(calc(-100% + 12.5rem)) translateY(0)}}@keyframes progress-bar-anim-3{0%{transform:translateX(calc(-100% + 12.5rem)) translateY(0)}to{transform:translateX(calc(-100% + 17rem)) translateY(0)}}.progress-bar:after{content:"";background-color:var(--primary);width:calc(75%);height:calc(.5rem);position:absolute;top:50%;right:50%;transform:translateX(50%) translateY(-50%)}.circle{font-size:2rem;background-color:var(--popup-grey);border:2px solid var(--primary);border-radius:100%;aspect-ratio:1/1;width:3.5rem;display:flex;justify-content:center;align-items:center;z-index:3;position:relative;overflow:hidden}.circle-helper,.circle-helper-transition{aspect-ratio:1/1;width:100%;height:100%;background-color:var(--primary);position:absolute;left:-100%;text-align:center}.circle-helper-transition{animation:circle-anim .5s linear forwards;animation-delay:.5s}.circle-helper-timing{animation-delay:0s}.text-helper-timing{animation-delay:.5s!important}.text-appear{filter:blur(1rem)}.text-appear-transition{filter:blur(1rem);animation:text-appear-transition-anim 1s forwards}.small-stick-helper{width:100%;position:absolute;height:2px;top:50%;left:0;transform:translateX(calc(-100% + 3.5rem));background-color:var(--primary);z-index:0}.small-stick-helper-transition-1{animation:small-stick-anim-1 .5s linear forwards}.small-stick-helper-transition-2{animation:small-stick-anim-2 .5s linear forwards}.small-stick-helper-transition-3{animation:small-stick-anim-3 .5s linear forwards}@keyframes small-stick-anim-1{0%{transform:translateX(calc(-100% + 3.5rem))}to{transform:translateX(calc(-100% + 3.5rem + 1.5rem))}}@keyframes small-stick-anim-2{0%{transform:translateX(calc(-100% + 7rem + 1.5rem))}to{transform:translateX(calc(-100% + 10rem))}}@keyframes text-appear-transition-anim{0%{filter:blur(1rem)}50%{filter:blur(1rem)}to{filter:blur(0)}}@keyframes circle-anim{0%{transform:translateX(0)}to{transform:translateX(100%)}}.small-grey-circle{background-color:var(--popup-grey);border-radius:100%;aspect-ratio:1/1;width:3rem;z-index:4}.small-grey-circle,.small-grey-circle-container{display:flex;justify-content:center;align-items:center}.small-grey-circle-container{padding:.5rem;border-radius:30px;align-self:center;position:absolute;gap:1rem;background-color:aliceblue;width:100%;height:100%}.coloring{animation:coloring .5s linear forwards}@keyframes coloring{0%{transform:translateX(0)}to{transform:translateX(100%)}}