.hdg-chart {
	--hdg-highlight: #968f96;
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.hdg-chart img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	user-select: none;
}

.hdg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hdg-overlay a {
	pointer-events: none;
}

.hdg-channel-group {
	pointer-events: none;
}

.hdg-channel {
	fill: transparent;
	stroke: none;
	pointer-events: fill;
}

.hdg-center {
	fill: transparent;
	stroke: transparent;
	stroke-width: 10;
	pointer-events: fill;
}

.hdg-channel-group:hover .hdg-channel,
.hdg-overlay a:hover .hdg-channel,
.hdg-overlay a:focus-visible .hdg-channel {
	fill: var(--hdg-highlight);
}

.hdg-overlay a:hover .hdg-center,
.hdg-overlay a:focus-visible .hdg-center,
.hdg-center:hover {
	stroke: var(--hdg-highlight);
	fill: color-mix(in srgb, var(--hdg-highlight) 28%, transparent);
}

.hdg-overlay a:focus-visible {
	outline: none;
}

.hdg-chart .hdg-gate {
	position: absolute;
	z-index: 2;
	display: block;
	width: 3.4%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: transparent;
	text-decoration: none;
	transform: translate(-50%, -50%);
	cursor: default;
}

.hdg-chart a.hdg-gate {
	cursor: pointer;
}

.hdg-chart .hdg-gate:hover,
.hdg-chart .hdg-gate:focus-visible {
	background: transparent;
	outline: none;
	box-shadow: 0 0 0 3px var(--hdg-highlight);
}