.ring{--inner-angle:calc((360/var(--char-count))*1deg);--character-width:1;text-transform:uppercase;font-family:monospace;font-size:calc(var(--font-size,1)*1rem);position:relative}@media (prefers-reduced-motion:no-preference){.text-ring{animation:20s linear infinite spin}@keyframes spin{to{rotate:360deg}}}.text-ring{position:relative}.text-ring [style*=--index]{transform:translate(-50%,-50%)rotate(calc(360deg/var(--total)*var(--index)))translateY(calc(var(--radius,5)*-1ch));font-family:monospace;position:absolute;top:50%;left:50%}