.progress-ring{--size:43px;--ring-thickness:1px;--filled:calc(3.6deg * var(--percentage));--unfilled:calc(360deg - var(--filled));--fade-fraction:.486;--fade-length:calc(var(--fade-fraction) * var(--filled));--fade-end:calc(var(--unfilled) + var(--fade-length));width:var(--size);height:var(--size);position:relative}.progress-ring:before{content:"";background:conic-gradient(from 90deg, #c2cadb00 0deg, #c1cadc00 var(--unfilled), #fe7ac6 var(--fade-end), #ff4766 360deg);z-index:1;border-radius:50%;position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 62%,#000 63%);mask:radial-gradient(circle,#0000 62%,#000 63%)}.progress-ring>*{z-index:2;position:relative}