.mp-metric-ring{
	--mp-ring-size:120px;
	--mp-ring-progress:#2563eb;
	--mp-ring-track:#e8edf5;
	--mp-ring-stroke:8px;
	display:inline-flex;
	vertical-align:middle;
}
.mp-metric-ring__chart{
	position:relative;
	width:var(--mp-ring-size);
	height:var(--mp-ring-size);
	flex:0 0 var(--mp-ring-size);
}
.mp-metric-ring__svg{
	display:block;
	width:100%;
	height:100%;
	transform:rotate(-90deg);
}
.mp-metric-ring__track,
.mp-metric-ring__progress{
	fill:none;
	stroke-width:var(--mp-ring-stroke);
}
.mp-metric-ring__track{
	stroke:var(--mp-ring-track);
}
.mp-metric-ring__progress{
	stroke:var(--mp-ring-progress);
	stroke-linecap:round;
	transition:stroke-dashoffset .6s ease;
}
.mp-metric-ring__center{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:.15rem;
	pointer-events:none;
	text-align:center;
	padding:18%;
}
.mp-metric-ring__icon{
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:calc(var(--mp-ring-size) * .22);
	line-height:1;
	color:#2563eb;
}
.mp-metric-ring__icon svg{
	width:1em;
	height:1em;
}
.mp-metric-ring__inner-pct{
	font-size:calc(var(--mp-ring-size) * .11);
	font-weight:600;
	line-height:1.1;
	color:#64748b;
	letter-spacing:-.02em;
}