:root {
	--fg: #111;
	--muted: #666;
	--line: #e9e9e9;
	--hover: #f6f6f6;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fg);
	background: #fff;
}

.wrap { max-width: 820px; margin: 40px auto; padding: 0 20px; }
.title { font-size: 72px; line-height: 1; margin: 0 0 24px; font-weight: 800; }

/* list on the homepage */
.list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.item {
	display: block;
	padding: 18px 8px;
	text-decoration: none;
	color: var(--fg);
	border-bottom: 1px solid var(--line);
}
.item strong { font-weight: 700; }
.item:hover { background: var(--hover); }

/* inner pages */
.back {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--muted);
	text-decoration: none;
}
.page-title { font-size: 40px; margin: 8px 0 16px; }
.section { margin: 18px 0 28px; }
.card {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 14px 16px;
	margin: 10px 0;
}
h2, h3 { margin: 0 0 10px; }
ul { margin: 8px 0 0 18px; }
small, .muted { color: var(--muted); }