.rating{--active: #FFED76;--active-pale: rgba(255, 237, 118, .36);--inactive: #1216212f;--face-active: #121621;--face-inactive: #1c212e00;display:flex;position:relative;overflow:visible}.rating ul{margin:0;padding:0;list-style:none;display:flex;color:var(--inactive);overflow:visible}.rating li{--face: var(--face-inactive);cursor:pointer;position:relative;transform-origin:center;overflow:visible}.rating li:not(:last-child){margin-right:16px}.rating li:before,.rating li:after{content:"";position:absolute;z-index:2;transition:all .2s ease}.rating li:before{--r: 0deg;width:2px;height:2px;border-radius:1px;top:15px;left:13px;background:var(--face);transform:rotate(var(--r));filter:drop-shadow(8px 0 0 var(--face))}.rating li span{width:2px;height:2px;display:block;position:absolute;left:50%;top:50%;border-radius:50%;margin:-1px 0 0 -1px;transform:scale(.6);opacity:0;box-shadow:16px -16px 0 var(--active-pale),-16px -16px 0 var(--active-pale),-21px 8px 0 var(--active-pale),21px 8px 0 var(--active-pale),0 22px 0 var(--active-pale)}.rating li:nth-child(1):after{width:10px;height:10px;top:20px;left:13px;border-radius:50%;border:1px solid transparent;border-top-color:var(--face)}.rating li:nth-child(3):after{width:6px;left:15px;top:20px;height:1px;background:var(--face)}.rating li:nth-child(4):after{width:10px;height:10px;top:12px;left:13px;border-radius:50%;border:1px solid transparent;border-bottom-color:var(--face)}.rating li:nth-child(5):before{--r: -45deg;width:3px;height:3px;border-top:1px solid var(--face);border-right:1px solid var(--face);border-radius:0 1px 0 0;left:12px;background:transparent;filter:drop-shadow(6px 6px 0 var(--face))}.rating li:nth-child(5):after{width:6px;height:3px;left:15px;top:20px;border-radius:0 0 3px 3px;background:var(--face)}.rating li.current{--face: var(--face-active)}.rating li.current svg,.rating li.filled svg{color:var(--active);fill:#0003}.rating li.current:before{animation:blink 3s linear infinite}.rating li:nth-child(4).current{animation:active-4 .4s ease}.rating li:nth-child(5).current{animation:active-5 .72s ease}.rating li.current span{animation:active-span .32s ease}.rating svg{width:36px;height:34px;display:block;fill:#0000000a;transform-box:fill-box;transform-origin:center}.rating>div{left:0;top:0;position:absolute;display:none;transform:translate(var(--x));transition:transform .3s cubic-bezier(0,0,.265,1.1) .24s}.rating>div span svg{color:var(--active);fill:#0003}.rating.animate-left>div,.rating.animate-right>div{display:block}.rating.animate-left>div span,.rating.animate-right>div span{display:block;animation:scale .28s linear .24s}.rating.animate-left>div{animation:double-left .32s linear .24s}.rating.animate-right>div{animation:double-right .32s linear .24s}.rating.animate-left>div span svg{animation:left .3s ease,right-end .4s ease .4s}.rating.animate-right>div span svg{animation:right .3s ease,left-end .4s ease .4s}.rating.animate-left li.move-to:before{animation:move-to-left .31s ease .36s}.rating.animate-left li.move-from:before{animation:move-to-right .28s ease}.rating.animate-right li.move-to:before{animation:move-to-right .31s ease .36s}.rating.animate-right li.move-from:before{animation:move-to-left .28s ease}@keyframes active-4{40%{transform:scale(1.25)}}@keyframes active-span{60%{opacity:1}to{transform:scale(1.16);opacity:0}}@keyframes active-5{0%{transform:rotate(0) translateY(0) scale(1)}15%{transform:rotate(180deg) scale(1.1)}30%{transform:rotate(360deg) scale(1.2)}70%{transform:rotate(360deg) translateY(14%) scaleY(.72)}to{transform:rotate(360deg) translateY(0) scaleY(1)}}@keyframes double-right{60%{filter:drop-shadow(-5px 0 1px var(--active-pale)) drop-shadow(4px 0 1px var(--active-pale))}}@keyframes double-left{60%{filter:drop-shadow(5px 0 1px var(--active-pale)) drop-shadow(-4px 0 1px var(--active-pale))}}@keyframes scale{60%{transform:scaleX(1.32);filter:blur(.5px)}}@keyframes blink{0%,5%,15%,to{transform:rotate(var(--r)) scaleY(1)}10%{transform:rotate(var(--r)) scaleY(.4)}}@keyframes right{0%,to{transform-origin:17% 100%}50%{transform:rotate(-12deg) skew(12deg)}}@keyframes left{0%,to{transform-origin:83% 100%}50%{transform:rotate(12deg) skew(-12deg)}}@keyframes right-end{0%,to{transform-origin:17% 100%}40%{transform:rotate(-6deg) skew(4deg) scaleX(.92)}70%{transform:rotate(1deg) skew(-8deg) scaleX(1.04)}}@keyframes left-end{0%,to{transform-origin:83% 100%}40%{transform:rotate(6deg) skew(-4deg) scaleX(.92)}70%{transform:rotate(-1deg) skew(8deg) scaleX(1.04)}}@keyframes move-to-right{40%{transform:translate(3px) rotate(var(--r))}}@keyframes move-to-left{40%{transform:translate(-3px) rotate(var(--r))}}