:root {
  color-scheme: dark;
  --ink: #06131c;
  --ice: #d8f4ff;
  --water: #58c7ea;
  --ember: #e9a15b;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--ink);
  color: #f4fbff;
  font-family: "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.landing {
  position: relative;
  display: grid;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  place-items: end center;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}
.backdrop {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(20, 96, 124, .38), transparent 52%), linear-gradient(180deg, #06131c 0%, #071923 58%, #03090e 100%);
}
.hero-art {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 43%;
  animation: reveal 1.1s ease-out both;
}
.shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 12, 18, .04) 28%, rgba(3, 10, 15, .12) 52%, rgba(3, 9, 13, .78) 100%), linear-gradient(90deg, rgba(3, 12, 18, .12), transparent 34%, transparent 66%, rgba(22, 12, 6, .12));
}
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.1vw, 3.15rem);
  width: min(650px, calc(100% - 2rem));
  margin: 0 1rem max(8vh, 3rem);
  padding: clamp(1.05rem, 2.4vw, 1.55rem) clamp(1.1rem, 4vw, 2.8rem);
  border: 1px solid rgba(206, 235, 246, .19);
  border-radius: 3px;
  background: linear-gradient(110deg, rgba(3, 19, 29, .82), rgba(6, 24, 33, .72) 52%, rgba(29, 18, 11, .76));
  box-shadow: 0 18px 70px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  animation: settle .8s .12s ease-out both;
}
.time-unit { display: grid; justify-items: center; gap: .23rem; min-width: 4.2rem; font-variant-numeric: tabular-nums; }
.number { color: var(--ice); font-size: clamp(2rem, 5vw, 3.45rem); font-weight: 300; line-height: 1; letter-spacing: -.055em; text-shadow: 0 0 25px rgba(88, 199, 234, .28); }
.unit { color: rgba(231, 241, 245, .72); font-size: clamp(.62rem, 1.35vw, .76rem); font-weight: 500; letter-spacing: .09em; }
.separator { width: 1px; height: 2.6rem; background: linear-gradient(180deg, transparent, rgba(187, 221, 234, .42), transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes reveal { from { opacity: .55; transform: scale(1.025); } to { opacity: 1; transform: scale(1); } }
@keyframes settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .landing { min-height: 420px; }
  .hero-art { inset: 8vh 0 auto; width: 100%; height: auto; max-height: 48vh; object-fit: contain; object-position: center top; }
  .shade { background: linear-gradient(180deg, transparent 6%, rgba(3, 9, 13, .08) 25%, rgba(3, 9, 13, .28) 42%, rgba(3, 9, 13, .88) 76%); }
  .countdown { gap: clamp(.48rem, 2.7vw, 1rem); width: calc(100% - 1.25rem); margin: 0 .625rem max(8vh, 2.4rem); padding: 1rem .55rem; backdrop-filter: blur(9px); }
  .time-unit { min-width: 0; flex: 1; }
  .number { font-size: clamp(1.65rem, 8.6vw, 2.55rem); }
  .unit { font-size: clamp(.52rem, 2.5vw, .66rem); letter-spacing: .04em; }
  .separator { height: 2.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}