:root {
	--ink: #1c1f24;
	--muted: #5d6470;
	--line: #dfe3e8;
	--bg: #f7f8fa;
	--card: #ffffff;
	--accent: #2f6fd6;
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e8eaed;
		--muted: #a3aab5;
		--line: #2c313a;
		--bg: #15181d;
		--card: #1c2027;
		--accent: #7aa7f0;
	}
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 17px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
main {
	max-width: 680px;
	margin: 0 auto;
	padding: 3rem 1rem 4rem;
}
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 1.5rem;
}
h1 {
	margin: 0 0 0.5rem;
	font-size: 2rem;
}
h2 {
	font-size: 1.05rem;
	margin: 1.6rem 0 0.3rem;
}
p,
ul {
	margin: 0 0 0.8rem;
}
a {
	color: var(--accent);
}
.muted {
	color: var(--muted);
}
nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 1.2rem 0;
}
footer {
	margin-top: 2rem;
	font-size: 0.9rem;
	color: var(--muted);
}