:root {
	color-scheme: light dark;
	--fg: #1d1b2f;
	--muted: #5b5873;
	--accent: #6d4aff;
	--bg: #f7f6fc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg: #ecebf5;
		--muted: #a7a4bf;
		--accent: #a18bff;
		--bg: #15131f;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
}

main {
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 24px;
}

h1 {
	font-size: 2.6rem;
	margin: 0 0 8px;
	color: var(--accent);
}

.lead {
	font-size: 1.2rem;
	color: var(--muted);
}

a {
	color: var(--accent);
}

code {
	padding: 1px 6px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
}

footer {
	margin-top: 48px;
	font-size: 0.9rem;
	color: var(--muted);
}