:root {
	color-scheme: light dark;
	--bg: #f7f5f2;
	--fg: #1f1d1a;
	--muted: #5f5a52;
	--accent: #6b4f2a;
	--accent-fg: #ffffff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #161513;
		--fg: #f1ede7;
		--muted: #b3ab9f;
		--accent: #d6b77e;
		--accent-fg: #161513;
	}
}

[hidden] {
	display: none !important;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		sans-serif;
	line-height: 1.5;
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
}

main {
	width: 100%;
	max-width: 28rem;
	padding: 16px;
}

h1 {
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0 0 12px;
}

p {
	margin: 0 0 12px;
	color: var(--muted);
	overflow-wrap: anywhere;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 8px;
	padding: 12px 20px;
	border-radius: 12px;
	background: var(--accent);
	color: var(--accent-fg);
	font-weight: 600;
	text-decoration: none;
}