.hmhba-chart svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.hmhba-chart text {
	font-family: var(--font-sans);
}

.hmhba-chart--pyramid {
	overflow: hidden;
}
.hmhba-chart .pyr-slice {
	cursor: pointer;
	outline: none;
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition:
		transform 0.16s ease-out,
		filter 0.16s ease-out,
		opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
		translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hmhba-chart .pyr-slice.is-active {
	filter: brightness(1.18) drop-shadow(0 8px 22px #14111c8c);
	transform: translateY(-3px);
}
.hmhba-chart .pyr-label-group {
	pointer-events: none;
	transition:
		transform 0.16s ease-out,
		opacity 0.4s ease-out;
}
.hmhba-chart .pyr-label-group.is-lifted {
	transform: translateY(-3px);
}
.hmhba-chart .pyr-count {
	font-family: var(--font-display);
	fill: var(--hmhba-pyr-count, #fff);
	font-size: 32px;
	letter-spacing: 0.02em;
}
.hmhba-chart .pyr-count-sm {
	font-size: 24px;
}
.hmhba-chart .pyr-label {
	fill: var(--hmhba-pyr-label, #fff);
	font-size: 15px;
	font-weight: 700;
}
.hmhba-chart .pyr-label-sm {
	font-size: 13px;
}
.hmhba-chart .pyr-detail {
	fill: var(--hmhba-pyr-detail, #ffffffc7);
	font-size: 12px;
}
.hmhba-chart .pyr-out-num {
	font-family: var(--font-display);
	fill: var(--hmhba-pyr-out-num, var(--color-hmhba-purple));
	font-size: 26px;
	letter-spacing: 0.02em;
}
.hmhba-chart .pyr-out-label {
	fill: var(--hmhba-pyr-out-label, var(--color-hmhba-ink));
	font-size: 14px;
	font-weight: 700;
}
.hmhba-chart .pyr-out-detail {
	fill: var(--hmhba-pyr-out-detail, var(--color-hmhba-muted));
	font-size: 11.5px;
}

.hmhba-chart--donut {
	display: flex;
	justify-content: center;
}
.hmhba-chart--donut svg {
	max-width: 620px;
}
.hmhba-chart .donut-arc {
	cursor: pointer;
	outline: none;
	transition:
		stroke-width 0.16s ease-out,
		filter 0.16s ease-out,
		opacity 0.3s ease-out;
}
.hmhba-chart .donut-arc.is-active {
	stroke-width: 5;
	filter: brightness(1.08) drop-shadow(0 6px 14px #14111c47);
}
.hmhba-chart .lbl {
	transition: opacity 0.35s ease-out;
}
.hmhba-chart .arc-label-cause {
	fill: var(--hmhba-donut-label, #fff);
	font-size: 11px;
	font-weight: 600;
}
.hmhba-chart .arc-label-pct {
	font-family: var(--font-display);
	fill: var(--hmhba-donut-label, #fff);
	font-size: 16px;
}
.hmhba-chart .arc-label-cause.dark,
.hmhba-chart .arc-label-pct.dark {
	fill: var(--hmhba-donut-label-dark, var(--color-hmhba-ink));
}
.hmhba-chart .donut-center {
	transition: opacity 0.5s ease-out 0.15s;
}
.hmhba-chart .donut-center-num {
	font-family: var(--font-display);
	font-size: 64px;
	fill: var(--hmhba-donut-center, var(--color-hmhba-purple));
}
.hmhba-chart .donut-center-label {
	font-size: 15px;
	font-weight: 600;
	fill: var(--hmhba-donut-center-label, var(--color-hmhba-ink-2));
}
.hmhba-chart .donut-center-note {
	font-size: 12px;
	fill: var(--hmhba-donut-center-note, var(--color-hmhba-muted));
}

.hmhba-chart--map .state {
	stroke: var(--hmhba-map-border, var(--color-hmhba-ink));
	stroke-width: 0.5px;
	stroke-opacity: 0.55;
	cursor: pointer;
	outline: none;
	transition:
		stroke-width 0.12s,
		stroke-opacity 0.12s,
		filter 0.18s;
}
.hmhba-chart--map .state--empty {
	cursor: default;
	pointer-events: none;
}
.hmhba-chart--map .state:hover,
.hmhba-chart--map .state:focus-visible,
.hmhba-chart--map .state.is-active {
	stroke-width: 2.2px;
	stroke-opacity: 1;
	filter: brightness(1.08) drop-shadow(0 6px 14px #14111c59);
}
.hmhba-chart--map .state-border {
	stroke: var(--hmhba-map-border, var(--color-hmhba-ink));
	stroke-opacity: 0.55;
	stroke-width: 0.5px;
}
.hmhba-chart--map .state-label-offset-group {
	cursor: pointer;
}
.hmhba-chart--map .state-label-offset {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	fill: var(--hmhba-map-label, var(--color-hmhba-ink));
}
.hmhba-chart--map .state-label-offset-group.is-active .state-label-offset {
	fill: var(--color-hmhba-purple);
}
.hmhba-chart--map .state-leader {
	stroke: var(--color-hmhba-ink-2);
	stroke-width: 0.6px;
	opacity: 0.4;
	fill: none;
	stroke-linecap: round;
	pointer-events: none;
}
.map-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--color-hmhba-ink-2);
}
.map-legend-num {
	font-variant-numeric: tabular-nums;
}
.map-legend-bar {
	display: inline-block;
	width: 240px;
	height: 12px;
	border: 1px solid #00000014;
	border-radius: 2px;
}
.map-legend-label {
	margin-left: 8px;
	color: var(--color-hmhba-muted);
}
.state-map-callouts {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 14px;
}
.state-callout {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--color-hmhba-line);
	border-radius: 999px;
	background: #fff;
	color: var(--color-hmhba-ink);
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
}
.state-callout:hover,
.state-callout:focus-visible,
.state-callout.is-active {
	background: var(--color-hmhba-purple);
	border-color: var(--color-hmhba-purple);
	color: #fff;
}
.state-callout-abbr {
	font-weight: 700;
	letter-spacing: 0.04em;
}
@media (max-width: 600px) {
	.hmhba-chart--map .leaders-layer,
	.hmhba-chart--map .offset-labels-layer {
		display: none;
	}
	.state-map-callouts {
		display: flex;
	}
}

.hmhba-motion .hmhba-chart[data-motion="pyramid"]:not(.is-in) .pyr-slice {
	opacity: 0;
	translate: 0 -18px;
}
.hmhba-motion .hmhba-chart[data-motion="pyramid"]:not(.is-in) .pyr-label-group,
.hmhba-motion .hmhba-chart[data-motion="donut"]:not(.is-in) .donut-arc,
.hmhba-motion .hmhba-chart[data-motion="donut"]:not(.is-in) .donut-center,
.hmhba-motion .hmhba-chart[data-motion="donut"]:not(.is-done) .lbl:not(.is-shown) {
	opacity: 0;
}
.hmhba-chart.is-entering .pyr-slice {
	transition-delay: 0s, 0s, calc(var(--i) * 110ms), calc(var(--i) * 110ms);
}
.hmhba-chart.is-entering .pyr-label-group {
	transition-delay: 0s, calc(var(--i) * 110ms + 260ms);
}

@media (max-width: 600px) {
	.hmhba-chart--pyramid svg {
		width: 127.358%;
		margin-left: -13.679%;
	}
	.hmhba-chart .pyr-outside-label .pyr-out-num {
		font-size: 36px;
	}
	.hmhba-chart .pyr-outside-label .pyr-out-label {
		font-size: 20px;
	}
	.hmhba-chart .pyr-outside-label .pyr-out-detail {
		display: none;
	}
	.hmhba-chart .pyr-count {
		font-size: 36px;
	}
	.hmhba-chart .pyr-label {
		font-size: 18px;
	}
	.hmhba-chart .pyr-detail {
		font-size: 14px;
	}
	.hmhba-chart .arc-label-cause {
		font-size: 18px;
	}
	.hmhba-chart .arc-label-pct {
		font-size: 24px;
	}
	.hmhba-chart .lbl-small .arc-label-cause {
		font-size: 12px;
	}
	.hmhba-chart .lbl-small .arc-label-pct {
		font-size: 16px;
	}
}

.hmhba-tip {
	position: fixed;
	z-index: 1000;
	min-width: 200px;
	max-width: 280px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--color-hmhba-tip-bg, #0f0c16f5);
	color: var(--color-hmhba-tip-text, #fff);
	font-size: 12.5px;
	line-height: 1.5;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.1s;
	box-shadow: 0 8px 24px #0000002e;
}
.hmhba-tip.is-visible {
	opacity: 1;
}
.hmhba-tip-title {
	margin-bottom: 4px;
	font-size: 13.5px;
	font-weight: 700;
}
.hmhba-tip-big {
	margin: 4px 0;
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.05;
}
.hmhba-tip-line {
	margin-top: 6px;
	color: #b8b3c4;
	font-size: 13px;
}
.hmhba-tip-line strong {
	color: #fff;
}
.hmhba-tip-note {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #ffffff1f;
	color: #d9d4e6;
	font-size: 12px;
}

.hmhba-motion .hmhba-chart[data-motion="map"]:not(.is-in) .state,
.hmhba-motion .hmhba-chart[data-motion="map"]:not(.is-in) .state-border,
.hmhba-motion .hmhba-chart[data-motion="map"]:not(.is-in) .leaders-layer,
.hmhba-motion .hmhba-chart[data-motion="map"]:not(.is-in) .offset-labels-layer {
	opacity: 0;
}
.hmhba-motion .hmhba-chart[data-motion="map"]:not(.is-in) .map-legend-bar {
	clip-path: inset(0 100% 0 0);
}
.hmhba-chart--map.is-entering .state {
	transition:
		opacity 0.45s ease-out var(--d, 0ms),
		stroke-width 0.12s,
		stroke-opacity 0.12s,
		filter 0.18s;
}
.hmhba-chart--map.is-entering .state-border {
	transition: opacity 0.4s ease-out;
}
.hmhba-chart--map.is-entering .map-legend-bar {
	transition: clip-path 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.hmhba-chart--map.is-entering .leaders-layer,
.hmhba-chart--map.is-entering .offset-labels-layer {
	transition: opacity 0.4s ease-out 1.1s;
}
.hmhba-chart.is-resetting,
.hmhba-chart.is-resetting * {
	transition: none !important;
}

.hmhba-chart[data-motion] {
	position: relative;
}
.hmhba-chart-replay {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 14px 6px 12px;
	border: 1px solid var(--color-hmhba-line);
	border-radius: 999px;
	background: #ffffffe6;
	color: var(--color-hmhba-ink-2);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease-out, color 0.14s, background-color 0.14s, border-color 0.14s;
}
.hmhba-chart.is-in .hmhba-chart-replay {
	opacity: 1;
}
.hmhba-chart-replay:hover,
.hmhba-chart-replay:focus-visible {
	border-color: var(--color-hmhba-purple);
	background: var(--color-hmhba-purple);
	color: #fff;
}
.hmhba-chart-replay:focus-visible {
	outline: 2px solid var(--color-hmhba-purple);
	outline-offset: 2px;
}