.rating{--bg:#{hsl($hue,10%,90%)}--fg:#{hsl($hue,10%,10%)}--primary:#{hsl($hue,90%,55%)}--yellow:#{hsl($starHue,90%,55%)}--yellow-t:#{hsla($starHue,90%,55%,0)}--bezier:cubic-bezier(.42,0,.58,1);--trans-dur:.3s;font-size:calc(22px + .625vw)}.rating__display{font-size:1em;font-weight:500;min-height:1.25em;position:absolute;text-align:center;top:100%;width:100%}.rating__stars{display:flex;position:relative}.rating__star{display:block;height:32px;overflow:visible;pointer-events:none;width:32px}.rating__star-fill,.rating__star-line,.rating__star-ring,.rating__star-stroke{animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:ease-in-out}.rating__star-fill,.rating__star-line,.rating__star-ring{stroke:var(--yellow)}.rating__star-fill{fill:var(--yellow);transform:scale(0);transition:fill var(--trans-dur) var(--bezier),transform var(--trans-dur) var(--bezier)}.rating__star-line{stroke-dasharray:12 13;stroke-dashoffset:-13}.rating__star-stroke{stroke:#c7cad1;transition:stroke var(--trans-dur)}.rating__label{cursor:pointer;padding:.125em}.rating__label--delay1 .rating__star-fill,.rating__label--delay1 .rating__star-line,.rating__label--delay1 .rating__star-ring,.rating__label--delay1 .rating__star-stroke{animation-delay:.05s}.rating__label--delay2 .rating__star-fill,.rating__label--delay2 .rating__star-line,.rating__label--delay2 .rating__star-ring,.rating__label--delay2 .rating__star-stroke{animation-delay:.1s}.rating__label--delay3 .rating__star-fill,.rating__label--delay3 .rating__star-line,.rating__label--delay3 .rating__star-ring,.rating__label--delay3 .rating__star-stroke{animation-delay:.15s}.rating__label--delay4 .rating__star-fill,.rating__label--delay4 .rating__star-line,.rating__label--delay4 .rating__star-ring,.rating__label--delay4 .rating__star-stroke{animation-delay:.2s}.rating__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute}.rating__input:hover~[data-rating]:not([hidden]){display:none}.rating__input-1:hover~[data-rating="1"][hidden],.rating__input-2:hover~[data-rating="2"][hidden],.rating__input-3:hover~[data-rating="3"][hidden],.rating__input-4:hover~[data-rating="4"][hidden],.rating__input-5:hover~[data-rating="5"][hidden],.rating__input:checked:hover~[data-rating]:not([hidden]){display:block}.rating__input-1:hover~.rating__label:first-of-type .rating__star-stroke,.rating__input-2:hover~.rating__label:nth-of-type(-n+2) .rating__star-stroke,.rating__input-3:hover~.rating__label:nth-of-type(-n+3) .rating__star-stroke,.rating__input-4:hover~.rating__label:nth-of-type(-n+4) .rating__star-stroke,.rating__input-5:hover~.rating__label:nth-of-type(-n+5) .rating__star-stroke{stroke:var(--yellow);transform:scale(1)}.rating__input-1:checked~.rating__label:first-of-type .rating__star-ring,.rating__input-2:checked~.rating__label:nth-of-type(-n+2) .rating__star-ring,.rating__input-3:checked~.rating__label:nth-of-type(-n+3) .rating__star-ring,.rating__input-4:checked~.rating__label:nth-of-type(-n+4) .rating__star-ring,.rating__input-5:checked~.rating__label:nth-of-type(-n+5) .rating__star-ring{animation-name:starRing}.rating__input-1:checked~.rating__label:first-of-type .rating__star-stroke,.rating__input-2:checked~.rating__label:nth-of-type(-n+2) .rating__star-stroke,.rating__input-3:checked~.rating__label:nth-of-type(-n+3) .rating__star-stroke,.rating__input-4:checked~.rating__label:nth-of-type(-n+4) .rating__star-stroke,.rating__input-5:checked~.rating__label:nth-of-type(-n+5) .rating__star-stroke{animation-name:starStroke}.rating__input-1:checked~.rating__label:first-of-type .rating__star-line,.rating__input-2:checked~.rating__label:nth-of-type(-n+2) .rating__star-line,.rating__input-3:checked~.rating__label:nth-of-type(-n+3) .rating__star-line,.rating__input-4:checked~.rating__label:nth-of-type(-n+4) .rating__star-line,.rating__input-5:checked~.rating__label:nth-of-type(-n+5) .rating__star-line{animation-name:starLine}.rating__input-1:checked~.rating__label:first-of-type .rating__star-fill,.rating__input-2:checked~.rating__label:nth-of-type(-n+2) .rating__star-fill,.rating__input-3:checked~.rating__label:nth-of-type(-n+3) .rating__star-fill,.rating__input-4:checked~.rating__label:nth-of-type(-n+4) .rating__star-fill,.rating__input-5:checked~.rating__label:nth-of-type(-n+5) .rating__star-fill{animation-name:starFill}.rating__input-1:not(:checked):hover~.rating__label:first-of-type .rating__star-fill,.rating__input-2:not(:checked):hover~.rating__label:nth-of-type(2) .rating__star-fill,.rating__input-3:not(:checked):hover~.rating__label:nth-of-type(3) .rating__star-fill,.rating__input-4:not(:checked):hover~.rating__label:nth-of-type(4) .rating__star-fill,.rating__input-5:not(:checked):hover~.rating__label:nth-of-type(5) .rating__star-fill{fill:var(--yellow-t)}.rating__sr{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;width:1px}@media (prefers-color-scheme:dark){:root{--bg:#17181c;--fg:#e3e4e8}.rating{margin:auto}.rating__star-stroke{stroke:#454954}}@keyframes starRing{0%,20%{animation-timing-function:ease-in;opacity:1;r:8px;stroke-width:16px;transform:scale(0)}35%{animation-timing-function:ease-out;opacity:.5;r:8px;stroke-width:16px;transform:scale(1)}50%,to{opacity:0;r:16px;stroke-width:0;transform:scale(1)}}@keyframes starFill{0%,40%{animation-timing-function:ease-out;transform:scale(0)}60%{animation-timing-function:ease-in-out;transform:scale(1.2)}80%{transform:scale(.9)}to{transform:scale(1)}}@keyframes starStroke{0%{transform:scale(1)}20%,to{transform:scale(0)}}@keyframes starLine{0%,40%{animation-timing-function:ease-out;stroke-dasharray:1 23;stroke-dashoffset:1}60%,to{stroke-dasharray:12 13;stroke-dashoffset:-13}}