:root {
	--ink: #1c1916;
	--muted: #5c564e;
	--paper: #f3efe6;
	--card: #fffdf8;
	--line: #d9d0c3;
	--accent: #b5471b;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font: 17px/1.5 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.shell {
	max-width: 760px;
	margin: 0 auto;
	padding: 32px 20px 64px;
}

.top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 36px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 16px;
}

.mark {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	text-decoration: none;
}

nav a {
	color: var(--muted);
	margin-left: 16px;
	text-decoration: none;
	font-size: 15px;
}

nav a:hover,
.mark:hover {
	color: var(--accent);
}

h1 {
	font-size: 2.2rem;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
}

h2 {
	font-size: 1.15rem;
	margin: 0 0 10px;
}

.lede {
	color: var(--muted);
	font-size: 1.05rem;
	margin: 0 0 28px;
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 20px 22px;
	margin: 0 0 18px;
}

pre {
	background: var(--ink);
	color: #f3efe6;
	padding: 14px 16px;
	overflow: auto;
	font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.86em;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

th,
td {
	text-align: left;
	padding: 8px 8px 8px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.hint,
footer {
	color: var(--muted);
	font-size: 14px;
}

ol {
	padding-left: 1.2em;
}

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