html,body{font-family:Karla;max-width:100vw}@media (max-width: 768px){body{font-size:18px}}.wheel{--size: 30px;--thickness: 0px;--fill-color: #9fcad7;--empty-color: #eee;--fill-percent: 50;width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(var(--fill-color) calc(var(--fill-percent) * 1%),var(--empty-color) 0%);mask:radial-gradient(circle,transparent calc(50% - var(--thickness) + 5px),black 50%);transform:rotate(0)}.rating-wheel-container{position:relative;width:32px;height:32px}.rating-wheel{--size: 3rem;--thickness: 0px;--fill-color: #333;--empty-color: #eee;--fill-percent: 50;width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(var(--fill-color) calc(var(--fill-percent) * 1%),var(--empty-color) 0%);mask:radial-gradient(circle,transparent calc(50% - var(--thickness)),black calc(50% - var(--thickness) + 1px));position:absolute;top:0;left:0}.wheel-overlay{position:absolute;top:0;left:0;width:32px;height:32px;pointer-events:none}.bar{--size: 10rem;--thickness: 4px;--fill-color: #9fcad7;--empty-color: #ddd;--fill-percent: 50;width:var(--size);height:var(--thickness);border-radius:.125rem;background:linear-gradient(to right,var(--fill-color) calc(var(--fill-percent) * 1%),var(--empty-color) 0%)}@keyframes swirl{0%{background-position:50% 50%}50%{background-position:60% 40%}to{background-position:50% 50%}}.title-gradient-text{background:radial-gradient(circle at 15% 20%,#59cbea 0%,#ff7ae6 100%,transparent 55%),radial-gradient(circle at 80% 18%,#f9d976 0%,#59cbea 22%,transparent 60%),radial-gradient(circle at 70% 80%,#59cbea 0%,#9a6bff 20%,transparent 55%),radial-gradient(circle at 25% 75%,#9a6bff 0%,#5af9d4 24%,transparent 60%),radial-gradient(circle at 50% 45%,#5af9d4 0%,#ff8a00 18%,transparent 55%),radial-gradient(circle at 40% 15%,#59cbea 0%,#ff7ae6 18%,transparent 60%),radial-gradient(circle at 85% 60%,#ff7ae6 0%,#4f72ff 20%,transparent 60%),radial-gradient(circle at 10% 60%,#4f72ff 0%,#e056fd 18%,transparent 55%),radial-gradient(circle at 55% 85%,#e056fd 0%,#00cfff 18%,transparent 55%),radial-gradient(circle at 50% 20%,#00cfff 0%,#f9d976 16%,transparent 50%),radial-gradient(circle at 65% 35%,#f9d976 0%,#59cbea 18%,transparent 55%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;background-size:200% 200%;animation:swirl 1s ease-in-out infinite}@property --p{syntax: "<angle>"; inherits: false; initial-value: 0deg;}.title-gradient-circle{--p: 0deg;border-radius:50%;background:conic-gradient(from var(--p),#59cbea,#ff55c3,#ffe066,#9a6bff,#5af9d4,#ff8a00,#ff7ae6,#4f72ff,#59cbea);-webkit-mask:radial-gradient(circle,transparent 60%,black calc(60% + 2px)),radial-gradient(circle,black 60%,transparent calc(60% + 2px));mask:radial-gradient(circle,transparent 60%,black calc(60% + 2px)),radial-gradient(circle,black 60%,transparent calc(60% + 2px))}@keyframes spinGradient{to{--p: 360deg}}