.circle-wrapper{display:flex;gap:16px;justify-content:space-around;align-items:center;margin:20px 0}.circle{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--circle-color) calc(var(--value) * 1%),var(--Icon-On-Container-Disabled) 0);display:flex;align-items:center;justify-content:center;position:relative;margin-top:8px;margin-bottom:8px}.circle::after,.circle::before{content:"";position:absolute;width:85%;height:85%;background:var(--Container-Primary-enabled);border-radius:50%;z-index:1}.score-single .circle{background:conic-gradient(var(--circle-color) calc(var(--value) * 1%),var(--Icon-On-Surface-Disabled) 0)}.score-single .circle::after,.score-single .circle::before{background:var(--Container-Neutral)}.circle.green{--circle-color:var(--Chart-Fill-Green)}.circle.yellow{--circle-color:var(--Chart-Fill-Yellow)}.circle.orange{--circle-color:var(--Chart-Fill-Orange)}.circle.red{--circle-color:var(--Chart-Fill-Red)}.circle.indigo{--circle-color:var(--Chart-Fill-Indigo)}.circle.white{--circle-color:var(--Icon-On-Surface-Disabled)}.circle span{position:relative;z-index:2;color:var(--Text-On-Container-Negative)}.box{width:88px;display:flex;text-align:center;justify-content:center;flex-direction:column;align-items:center}.circle-progress{--circle-c:175.93;position:relative;width:64px;height:64px;flex-shrink:0}.circle-progress__svg{width:100%;height:100%;transform:rotate(-90deg)}.circle-progress__track{stroke:var(--Icon-On-Surface-Disabled);stroke-width:5;stroke-linecap:round;stroke-dasharray:var(--circle-c);stroke-dashoffset:0}.circle-progress__fill-border{stroke-width:6;stroke-linecap:round;stroke-dasharray:calc(var(--circle-c) * var(--value)/ 100) var(--circle-c);stroke-dashoffset:0}.circle-progress__fill{stroke-width:4;stroke-linecap:round;stroke-dasharray:calc(var(--circle-c) * var(--value)/ 100) var(--circle-c);stroke-dashoffset:0;transition:stroke-dasharray .3s}.circle-progress--orange .circle-progress__fill-border{stroke:var(--Chart-Stroke-Orange)}.circle-progress--orange .circle-progress__fill{stroke:var(--Chart-Fill-Orange)}.circle-progress--green .circle-progress__fill-border{stroke:var(--Chart-Stroke-Green)}.circle-progress--green .circle-progress__fill{stroke:var(--Chart-Fill-Green)}.circle-progress--red .circle-progress__fill-border{stroke:var(--Chart-Stroke-Red)}.circle-progress--red .circle-progress__fill{stroke:var(--Chart-Fill-Red)}.circle-progress--yellow .circle-progress__fill-border{stroke:var(--Chart-Stroke-Yellow)}.circle-progress--yellow .circle-progress__fill{stroke:var(--Chart-Fill-Yellow)}.circle-progress--indigo .circle-progress__fill-border{stroke:var(--Chart-Stroke-Indigo)}.circle-progress--indigo .circle-progress__fill{stroke:var(--Chart-Fill-Indigo)}.circle-progress--white .circle-progress__fill-border{stroke:var(--Stroke-On-Surface-Subtle)}.circle-progress--white .circle-progress__fill{stroke:var(--Icon-On-Container-Negative)}.circle-progress__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--Text-On-Container-Negative);z-index:1}