:root {
	color-scheme: light dark;
	--bg: #f4f5f7;
	--card: #ffffff;
	--fg: #1b1f24;
	--muted: #5b6470;
	--border: #c9ced6;
	--accent: #1f5fbf;
	--accent-fg: #ffffff;
	--error: #b3261e;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14171b;
		--card: #1d2127;
		--fg: #e6e9ee;
		--muted: #9aa3af;
		--border: #3a414b;
		--accent: #6ea4f0;
		--accent-fg: #0d1117;
		--error: #f2928b;
	}
}
* { box-sizing: border-box; }
body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.4 system-ui, sans-serif;
}
main {
	width: min(22rem, calc(100vw - 2rem));
	padding: 1.5rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 8px;
}
h1 { margin: 0 0 1rem; font-size: 1.2rem; }
label { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.9rem; }
input {
	width: 100%;
	padding: 0.5rem 0.6rem;
	font: inherit;
	color: inherit;
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 4px;
}
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot { min-height: 1.6rem; margin: 0.5rem 0; }
.error { margin: 0; color: var(--error); font-size: 0.9rem; }
button {
	width: 100%;
	padding: 0.55rem;
	font: inherit;
	font-weight: 600;
	color: var(--accent-fg);
	background: var(--accent);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}