:root {
	--bg: #fff;
	--text: #222;
	--muted: #666;
	--line: #e4e4e4;
	--accent: #7a5af5;
	--code-bg: #f3f3f3;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1e1e1e;
		--text: #ddd;
		--muted: #999;
		--line: #333;
		--accent: #a68cff;
		--code-bg: #2a2a2a;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}

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

header { padding: 64px 0 24px; }

h1 { font-size: 40px; margin: 0 0 12px; }
h2 { font-size: 26px; margin: 64px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); }
h3 { font-size: 19px; margin: 36px 0 8px; }

.lede { font-size: 20px; margin: 0 0 12px; }
.meta { color: var(--muted); margin: 0 0 20px; }

nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img {
	display: block;
	width: 100%;
	height: auto;
	margin: 16px 0;
	border: 1px solid var(--line);
	border-radius: 8px;
}

img.narrow { max-width: 360px; }

.hero img {
	width: min(1200px, calc(100vw - 40px));
	max-width: none;
	margin-left: 50%;
	transform: translateX(-50%);
}

code, kbd {
	font: 14px ui-monospace, SFMono-Regular, Menlo, monospace;
	background: var(--code-bg);
	border-radius: 4px;
	padding: 2px 6px;
}

kbd { border: 1px solid var(--line); }

ol, ul { padding-left: 22px; }
li { margin: 6px 0; }

table { border-collapse: collapse; width: 100%; }
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td:first-child { white-space: nowrap; }

footer {
	margin-top: 64px;
	padding-top: 20px;
	padding-bottom: 40px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 15px;
}