:root {
	color-scheme: dark;
	font-family:
		Inter,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
	background: #07111f;
	color: #f5f7fb;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	background: radial-gradient(
		circle at top,
		#882828 0%,
		#5e1b1b 55%,
		#290c0c 100%
	);
	padding: 1.5rem;
}

.card {
	width: min(100%, 720px);
	padding: 2.5rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 24px;
	background: rgba(24, 8, 8, 0.8);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	text-align: center;
}

.eyebrow {
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.8rem;
	color: #ff7979;
}

h1 {
	margin: 0;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.target-date {
	margin: 1rem 0 2rem;
	color: #c7d6ec;
}

.timer {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segment {
	padding: 1.2rem;
	border-radius: 16px;
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.08),
		rgba(255, 255, 255, 0.02)
	);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.segment span {
	display: block;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.segment label {
	color: #9eb0c9;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

@media (max-width: 600px) {
	.card {
		padding: 1.5rem;
	}

	.timer {
		grid-template-columns: 1fr;
	}
}