:root {
	--load-balancer-color: var(--color);
	--request-fill: var(--palette-green);
	--request-border: color-mix(in srgb, var(--request-fill) 50%, var(--white));
	--dropped-request-fill: var(--palette-red);
	--dropped-request-border: color-mix(
		in srgb,
		var(--dropped-request-fill) 50%,
		var(--white)
	);
	--server-color: light-dark(var(--gray-500), var(--gray-400));
	--server-low-color: light-dark(var(--gray-300), var(--gray-400));
	--server-high-color: light-dark(var(--gray-500), var(--gray-700));
	--chart-orange: var(--palette-orange);
	--chart-blue: var(--palette-blue);
	--chart-green: var(--palette-green);
	--chart-red: var(--palette-red);
}

s-simulation {
	display: block;
	box-sizing: content-box;
	/* Simulation, footer controls, container borders, and footer separator. */
	height: calc(var(--simulation-height, 250px) + 3.625rem + 1px);
	margin-bottom: 1rem;
	padding-top: 1rem;
	contain: strict;
	content-visibility: auto;
}

s-simulation[show-controls] {
	height: calc(var(--simulation-height, 250px) + 20.875rem + 1px);
}

.load-balancing-chart {
	height: 458px;
	contain: strict;
	content-visibility: auto;
}

.load-balancing-chart > * {
	box-sizing: content-box;
	margin: 0;
	padding: 1rem 0 0.5rem;
}

.load-balancing-playground {
	margin-top: 20px;
}