:root {
	--bg: #ffffff;
	--surface: #f7f7f5;
	--text: #1a1a18;
	--muted: #5c5c56;
	--border: #e2e2dd;
	--accent: #2b5f4a;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #16161a;
		--surface: #1e1e23;
		--text: #ececeb;
		--muted: #a0a09a;
		--border: #32323a;
		--accent: #7fc4a5;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 3rem 1.25rem 6rem;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

main {
	max-width: 44rem;
	margin: 0 auto;
}

header {
	padding-bottom: 1.75rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--border);
}

.brand {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
	margin-bottom: .75rem;
}

h1 {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 .5rem;
	letter-spacing: -.02em;
}

.updated {
	margin: 0;
	font-size: .875rem;
	color: var(--muted);
}

h2 {
	font-size: 1.1875rem;
	margin: 2.75rem 0 .75rem;
	letter-spacing: -.01em;
}

p, li { color: var(--text); }

ul { padding-left: 1.25rem; }

li { margin-bottom: .5rem; }

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

strong { font-weight: 600; }

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
}

.card p:first-child { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.index-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
}

.index-list li {
	margin-bottom: 1rem;
}

.index-list a {
	display: block;
	padding: 1.25rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	text-decoration: none;
	color: var(--text);
}

.index-list a:hover { border-color: var(--accent); }

.index-list .title {
	display: block;
	font-weight: 600;
	margin-bottom: .25rem;
	color: var(--accent);
}

.index-list .desc {
	display: block;
	font-size: .9375rem;
	color: var(--muted);
}

footer {
	max-width: 44rem;
	margin: 4rem auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
	font-size: .875rem;
	color: var(--muted);
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.25rem 0;
	font-size: .9375rem;
}

th, td {
	text-align: left;
	padding: .625rem .75rem;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
}

th { font-weight: 600; }