*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3rem;
  font-family:system-ui,sans-serif;
  text-align:center;
  background:#000;
  color:#fff;
}

/* seven-segment clock */
.clock{
  display:flex;
  align-items:center;
  gap:1.2vw;
}
.digit{
  width:min(120px,16vw);
  height:min(200px,28vw);
  overflow:visible;
}
.seg{
  fill:none;
  transition:fill .08s linear;
}
.seg.on{
  fill:#ffc966;
  filter:url(#seg-glow);
}

#title,#tagline{
  opacity:0;
  transition:opacity 1.2s ease-in;
}
#title.visible,#tagline.visible{
  opacity:1;
}

main h1{
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:900;
  font-size:clamp(2rem,6vw,4rem);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#ffc966;
  text-shadow:0 0 6px rgba(255,201,102,.8), 0 0 18px rgba(255,201,102,.5);
}

main p{
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.85rem;
  color:#fff;
  margin-top:.5rem;
}