/* Page visuals. One canvas component, several scenes. */

.viz {
	margin: var(--md) 0 0;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(34, 211, 238, .07), transparent 60%),
		var(--surface);
	overflow: hidden;
}

.viz__canvas {
	display: block;
	width: 100%;
	height: 280px;
}

.viz figcaption {
	display: block;
	padding: 12px var(--sm) 14px;
	border-top: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
}

/* First item in a callout column: the column's own gap is enough. */
.stack-lg > .viz:first-child {
	margin-top: 0;
}

@media (min-width: 720px) {
	.viz__canvas { height: 320px; }
}