:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #0d0f12;
  color: #f5f3ed;
  --accent: #ffd757;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: radial-gradient(ellipse at 50% 35%, #ffd75710, transparent 57%);
}
header { padding: clamp(20px, 4vw, 48px); }
header img { display: block; object-fit: contain; }
main { align-self: center; text-align: center; padding: 16px 18px clamp(42px, 8vh, 92px); }
.emblem {
  width: 108px;
  aspect-ratio: 1;
  margin: 0 auto 30px;
  display: grid;
  place-items: center;
  border: 1px solid #ffd75750;
  border-radius: 32px;
  color: var(--accent);
  background: #ffd7570a;
  box-shadow: 0 0 70px #ffd75717;
  transform: rotate(-8deg);
}
.emblem span { font: 800 64px/1 system-ui; animation: reveal 650ms ease-out both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
h1 { font-size: clamp(2.25rem, 7vw, 6.3rem); line-height: 1; letter-spacing: -.07em; margin: 0; }
h1 em { color: var(--accent); font-style: normal; }
p { color: #c5c6cb; font-size: 1rem; margin: 18px 0; }
.countdown { display: flex; justify-content: center; gap: clamp(5px, 2vw, 16px); margin: 27px auto 18px; }
[hidden] { display: none; }
.countdown div { min-width: 0; width: clamp(58px, 19vw, 112px); background: #ffffff08; border: 1px solid #ffffff20; border-radius: 12px; padding: 12px 2px; }
strong { display: block; font: 700 clamp(1.4rem, 5vw, 2.6rem)/1.15 system-ui; font-variant-numeric: tabular-nums; }
small { display: block; color: var(--accent); font-size: .65rem; letter-spacing: .035em; margin-top: 6px; }
.date { font-size: .875rem; }
time { display: inline-block; color: #e5e3db; }
@media (prefers-reduced-motion: reduce) { .emblem span { animation: none; } }