:root {
	color-scheme: light dark;
	font-family: system-ui, -apple-system, sans-serif;
	line-height: 1.6;
	color: #12243b;
	background: #f4f7fa;
}
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer {
	width: min(100% - 2rem, 62rem);
	margin-inline: auto;
}
header { padding-block: clamp(2rem, 6vw, 4rem) 1rem; }
header p, footer { color: #4a6077; }
h1, h2, h3 { line-height: 1.2; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.75rem); letter-spacing: -.04em; }
h2 { margin-top: 2rem; }
h3 { margin-top: 0; }
section, article {
	background: #fff;
	border: 1px solid #d7e1eb;
	border-radius: .75rem;
	padding: 1rem 1.25rem;
	margin-block: 1rem;
	overflow-wrap: anywhere;
}
section article { box-shadow: none; }
ul { padding-inline-start: 1.3rem; }
a { color: #0559a0; text-underline-offset: .15em; }
a:focus-visible { outline: 3px solid #2689df; outline-offset: 3px; }
footer { padding-block: 1rem 2rem; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: .6rem; border-block-end: 1px solid #d7e1eb; }
@media (prefers-color-scheme: dark) {
	:root { color: #e8eff7; background: #111a24; }
	header p, footer { color: #a4b8cb; }
	section, article { background: #192633; border-color: #314252; }
	th, td { border-color: #314252; }
	a { color: #8acbff; }
}