:root{
	--bg: #0b0f19;
	--text: rgba(255,255,255,0.92);
	--muted: rgba(255,255,255,0.70);
	--border: rgba(255,255,255,0.18);
	--accent: #93c5fd;
	--accent2: #a78bfa;
	--link: color-mix(in srgb, var(--accent) 70%, white);
	--link-hover: color-mix(in srgb, var(--accent2) 70%, white);
	--surface: rgba(255,255,255,0.06);
	--ring: rgba(147,197,253,0.28);
	--max: 840px;
}

@media (prefers-color-scheme: light){
	:root{
		--bg: #f8fafc;
		--text: rgba(2,6,23,0.92);
		--muted: rgba(2,6,23,0.68);
		--border: rgba(15,23,42,0.14);
		--accent: #2563eb;
		--accent2: #7c3aed;
		--link: color-mix(in srgb, var(--accent) 86%, black);
		--link-hover: color-mix(in srgb, var(--accent2) 86%, black);
		--surface: rgba(2,6,23,0.05);
		--ring: rgba(37,99,235,0.22);
	}
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.wrap{
	width: min(var(--max), calc(100% - 44px));
	margin: 0 auto;
	padding: 56px 0;
}

h1{
	margin: 0 0 10px;
	font-size: 28px;
	letter-spacing: -0.01em;
}

.lead{
	margin: 0 0 22px;
	color: var(--muted);
	max-width: 70ch;
}

.links{
	list-style: disc;
	padding-left: 1.25rem;
	margin: 10px 0 0;
}

.links li{
	margin: 8px 0;
}

.link{
	display: inline;
	padding: 0;
	margin: 0;
	border-radius: 0;
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.links li::marker{
	color: #0b0f19;
}

.link-title{
	font-weight: 600;
}

.link-arrow{
	opacity: 0.75;
	flex: 0 0 auto;
}

.note{
	margin: 18px 0 0;
	color: var(--muted);
	font-size: 14px;
}