:root {
  --page-bg: #d1d5db;
  --primary-font: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --secondary-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --text-color: #111827;
  --accent-color: #1f2937;
  --label-color: #6b7280;
  --separator-color: rgba(17, 24, 39, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--secondary-font);
  background: var(--page-bg);
  color: var(--text-color);
  display: flex;
  min-height: 100vh;
}

.page {
  width: min(960px, 90vw);
  margin: auto;
  padding: clamp(24px, 5vw, 48px);
}

.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 40px);
}

.hero__title {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  letter-spacing: -0.03em;
  margin: 0;
}

.hero__status {
  margin: 12px 0 0;
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: var(--label-color);
}

.hero__status:empty {
  display: none;
}

.hero__date {
  font-size: 0.95rem;
  color: var(--label-color);
  margin: 0;
}

.timer {
  display: inline-flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(16px, 6vw, 32px);
  padding: clamp(24px, 6vw, 48px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.06);
  backdrop-filter: blur(10px);
}

.timer__segment {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(72px, 16vw, 120px);
}

.timer__value {
  font-family: var(--primary-font);
  font-weight: 700;
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  letter-spacing: 0.08em;
  color: var(--accent-color);
}

.timer__label {
  margin-top: 8px;
  font-size: clamp(0.75rem, 2.2vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--label-color);
}

.timer__separator {
  display: none;
  align-self: center;
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  color: var(--separator-color);
}

@media (min-width: 768px) {
  .timer__separator {
    display: block;
  }
}