:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #1a1a1a;
	--muted: #5f6368;
	--ok: #1e7f3c;
	--err: #b3261e;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #121212;
		--fg: #ececec;
		--muted: #a0a4a8;
		--ok: #6fcf8f;
		--err: #f28b82;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 16px;
}

h1 {
	margin: 0 0 8px;
	font-size: 28px;
}

h2 {
	margin: 32px 0 8px;
	font-size: 18px;
}

p {
	color: var(--muted);
}

#api-status[data-state="ok"] {
	color: var(--ok);
}

#api-status[data-state="error"] {
	color: var(--err);
}