:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #071c16;
  color: #edfdf4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 0%, #1f6047 0%, transparent 48%),
    linear-gradient(145deg, #061b15, #0b3024);
}

.container {
  width: min(100%, 850px);
  padding: clamp(32px, 7vw, 72px) clamp(20px, 6vw, 64px);
  text-align: center;
  background: rgb(7 34 25 / 82%);
  border: 1px solid rgb(134 239 172 / 24%);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgb(0 0 0 / 35%);
}

.intro { max-width: 620px; margin: 0 0 28px; color: #fff; font-size: clamp(1rem, 2.5vw, 1.2rem); line-height: 1.55; text-align: center; }
h1 { margin: 0 0 42px; color: #dcfce7; font-size: clamp(2rem, 5vw, 3.5rem); }

.countdown { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 22px); }
.unit { min-width: 0; }
output { display: block; color: #86efac; font-family: "Courier New", monospace; font-size: clamp(2.4rem, 10vw, 6.4rem); font-weight: bold; font-variant-numeric: tabular-nums; letter-spacing: -.08em; line-height: 1; text-shadow: 0 0 25px rgb(74 222 128 / 24%); }
.unit span { display: block; margin-top: 13px; color: #bbf7d0; font-size: clamp(.7rem, 2vw, .95rem); text-transform: uppercase; letter-spacing: .14em; }
.separator { color: #4ade80; font-family: "Courier New", monospace; font-size: clamp(2.4rem, 8vw, 5rem); font-weight: bold; margin-top: -24px; }
.question { margin: 38px 0 0; color: #fff; font-size: clamp(1rem, 2.5vw, 1.25rem); }

.finished-message { color: #bbf7d0; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.2; }

@media (max-width: 420px) {
  .countdown { gap: 6px; }
  .separator { margin-top: -20px; }
}