:root{--c-days:#E64522;--c-m1:#F39C34;--c-m3:#F2D24B;--c-m6:#5EAB52;--c-plus:#E9F3E7}.donut{--size:100%;--inner-ratio:0.4;--start:0deg;--s1:calc(var(--p1) * 1%);--s2:calc((var(--p1) + var(--p2)) * 1%);--s3:calc((var(--p1) + var(--p2) + var(--p3)) * 1%);--s4:calc((var(--p1) + var(--p2) + var(--p3) + var(--p4)) * 1%);position:relative;width:var(--size);aspect-ratio:1;isolation:isolate}@media (max-width:767px){.donut.-home{--inner-ratio:0.5!important}}.donut__ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--start),var(--c-days) 0,var(--c-m1) var(--s1),var(--c-m3) var(--s2),var(--c-m6) var(--s3),var(--c-plus) var(--s4),var(--c-plus) 100%);-webkit-mask:radial-gradient(circle at center,transparent calc(50% * var(--inner-ratio)),#000 0);mask:radial-gradient(circle at center,transparent calc(50% * var(--inner-ratio)),#000 0);z-index:0}.donut__center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.3;z-index:1}.donut__holeBG{position:absolute;inset:0;border-radius:50%;background:#fff;width:calc(var(--size) * var(--inner-ratio));height:calc(var(--size) * var(--inner-ratio));left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}