.progress-bar{container-type:inline-size;--reward-size:clamp(2.25rem,11cqw,5rem);--reward-clearance:2.625rem;--reward-hover-width:8.5rem;--reward-hover-height:11rem;position:relative;width:100%;display:flex;flex-direction:column;gap:var(--reward-clearance);padding-top:var(--reward-clearance);font-family:shuttleblock-condensed,sans-serif}.progress-bar__rewards{position:absolute;top:var(--reward-clearance);left:0;right:0;height:.75rem;z-index:1}.progress-bar__reward{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:var(--reward-size);height:var(--reward-size);padding:.3rem;border:0;cursor:pointer;filter:drop-shadow(0 0 0 rgba(16,18,20,0));transition:width .18s ease .14s,height .18s ease .14s,padding-bottom .18s ease .14s,filter .18s ease}.progress-bar__reward:before{content:"";position:absolute;inset:0;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}.progress-bar__reward:focus-visible,.progress-bar__reward:hover{width:var(--reward-hover-width);height:var(--reward-hover-height);padding-bottom:1.75rem;z-index:3;outline:none;filter:drop-shadow(0 8px 5px rgba(0,0,0,.1));transition:width .18s ease,height .18s ease,padding-bottom .18s ease,filter .18s ease}.progress-bar__reward:hover:before{clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}.progress-bar__reward--unlocked:before{background:var(--color-lime-300)}.progress-bar__reward--locked:before{background:var(--color-neutral-25)}.progress-bar__reward-art{position:relative;flex:none;width:calc(var(--reward-size) - .6rem);height:calc(var(--reward-size) - .6rem);transition:transform .22s ease-out}.progress-bar__reward--unlocked:hover .progress-bar__reward-art{animation-duration:1s;animation-timing-function:cubic-bezier(0,.23,1,.71);animation-name:taDa;transform-origin:center bottom}.progress-bar__reward--locked:hover .progress-bar__reward-art{animation-duration:.5s;animation-timing-function:cubic-bezier(0,.23,1,.71);animation-name:headShake;transform-origin:center bottom}.progress-bar__reward-image{width:100%;height:100%;object-fit:contain}.progress-bar__reward-lock{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:50%;height:50%;color:var(--color-white);background:var(--color-orange-500);transition:transform .18s ease;clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}.progress-bar__reward:hover .progress-bar__reward-lock{transform:translate(-50%,-50%)}.progress-bar__reward-lock svg{width:60%;height:60%}.progress-bar__reward-status,.progress-bar__reward-title{position:absolute;left:.5rem;right:.5rem;opacity:0;text-align:center;pointer-events:none;transition:opacity .12s ease}.progress-bar__reward-status{top:.6rem}.progress-bar__reward-title{bottom:.6rem;max-width:10ch;margin-left:auto;margin-right:auto}.progress-bar__reward:focus-visible .progress-bar__reward-status,.progress-bar__reward:focus-visible .progress-bar__reward-title,.progress-bar__reward:hover .progress-bar__reward-status,.progress-bar__reward:hover .progress-bar__reward-title{opacity:1;transition:opacity .16s ease .2s}.progress-bar__reward-status{font-family:shuttleblock-condensed,sans-serif;font-weight:600;font-size:.8rem;letter-spacing:0;line-height:1;text-transform:uppercase}.progress-bar__reward-title{font-family:Area Inktrap,area-inktrap,Inter,sans-serif;font-size:.75rem;font-weight:600;line-height:1.2;color:var(--color-black)}.progress-bar__reward-date{display:block;margin-top:.15rem;font-size:.7rem;font-weight:600;color:var(--color-neutral-500)}.progress-bar__reward--unlocked .progress-bar__reward-status{color:var(--color-lime-700)}.progress-bar__reward--locked .progress-bar__reward-status{color:var(--color-orange-500)}.progress-bar__track{position:relative;width:100%;height:.75rem;background:var(--color-neutral-50);overflow:hidden;clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}.progress-bar__fill{height:100%;background:var(--color-lime-400);transition:width .24s ease}.progress-bar__ruler{display:flex;justify-content:space-between;align-items:flex-start;width:100%;height:1.75rem;color:var(--color-black)}.progress-bar__tick{position:relative;width:1px;height:.4rem;background:var(--color-neutral-100)}.progress-bar__tick--major{height:.7rem;background:var(--color-neutral-200)}.progress-bar__label{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.25rem;font-size:.75rem;line-height:1}@media (prefers-reduced-motion:reduce){.progress-bar__reward,.progress-bar__reward-status,.progress-bar__reward-title{transition:none}}@media (max-width:620px){.progress-bar{--reward-hover-width:7rem;--reward-hover-height:8.5rem;padding-top:0;gap:.5rem}.progress-bar__rewards{position:relative;top:auto;height:var(--reward-size)}.progress-bar__tick:not(.progress-bar__tick--major){display:none}}@keyframes headShake{0%{transform:translateX(0)}12.5%{transform:translateX(-5px) rotateY(-9deg) skewY(1deg)}37.5%{transform:translateX(4px) rotateY(4.5deg) skewY(-1deg)}62.5%{transform:translateX(-2px) rotateY(-2.25deg) skewY(0)}87.5%{transform:translateX(1px) rotateY(3deg)}to{transform:translateX(0)}}@keyframes taDa{0%{transform:scale(1)}10%{transform:scale(.9) rotate(-3deg)}20%{transform:scale(.9) rotate(-3deg)}30%{transform:scale(1.1) rotate(3deg)}40%{transform:scale(1.1) rotate(-3deg)}50%{transform:scale(1.1) rotate(3deg)}60%{transform:scale(1.1) rotate(-3deg)}70%{transform:scale(1.1) rotate(3deg)}80%{transform:scale(1.1) rotate(-3deg)}90%{transform:scale(1.1) rotate(3deg)}to{transform:scale(1) rotate(0)}}