:root {
	--bg: #ffffff;
	--text: #111111;
	--muted: #666666;
	--card-bg: #f5f5f5;
	--card-border: #e2e2e2;
	--card-hover: #ececec;
	--accent: #111111;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0d0d0d;
		--text: #f2f2f2;
		--muted: #999999;
		--card-bg: #1a1a1a;
		--card-border: #2a2a2a;
		--card-hover: #232323;
		--accent: #ffffff;
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

main {
	width: 100%;
	max-width: 420px;
	text-align: center;
}

.avatar {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
}

h1 {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

p.tagline {
	color: var(--muted);
	font-size: 0.95rem;
	margin: 0 0 32px;
}

ul.links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

ul.links a {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	text-decoration: none;
	color: var(--text);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 14px 20px;
	font-size: 0.98rem;
	font-weight: 500;
	transition:
		background 0.15s ease,
		transform 0.1s ease;
}

ul.links a:hover {
	background: var(--card-hover);
}

ul.links a:active {
	transform: scale(0.98);
}

ul.links svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: currentColor;
}

footer {
	margin-top: 36px;
	color: var(--muted);
	font-size: 0.8rem;
}