:root {
	--bg: #ffffff;
	--surface: #f5f6f8;
	--text: #1c1f24;
	--muted: #5b6370;
	--border: #e2e5ea;
	--accent: #2557d6;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111317;
		--surface: #1a1d23;
		--text: #e7e9ed;
		--muted: #9aa2ae;
		--border: #2a2e36;
		--accent: #7aa2ff;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header,
main,
footer {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px;
}

header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding-top: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border);
}

.logo {
	display: block;
	line-height: 0;
}

.logo img {
	border-radius: 20px;
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 14px;
}

main {
	padding-top: 32px;
	padding-bottom: 48px;
}

h1 {
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 8px;
}

h2 {
	font-size: 20px;
	margin: 36px 0 8px;
}

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

.lead {
	font-size: 18px;
	color: var(--muted);
}

.updated {
	color: var(--muted);
	font-size: 14px;
}

code {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 2px 6px;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 24px 0;
}

li {
	margin-bottom: 6px;
}

footer {
	padding-top: 24px;
	padding-bottom: 32px;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 14px;
}

footer p {
	margin: 4px 0;
}