*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; }
main {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1rem;
}
h1 { margin: 0 0 .5em; font-size: clamp(1.5rem, 5vw, 3.5rem); font-weight: 600; }
.clock { display: flex; gap: clamp(.75rem, 3vw, 3rem); }
.unit { display: flex; flex-direction: column; align-items: center; }
.num { font-size: clamp(3rem, 14vw, 10rem); line-height: 1; font-variant-numeric: tabular-nums; font-weight: 700; }
.label { font-size: clamp(.7rem, 2vw, 1.4rem); text-transform: uppercase; letter-spacing: .15em; margin-top: .5em; }
.done { font-size: clamp(2rem, 9vw, 7rem); font-weight: 700; margin: 0; }
[hidden] { display: none !important; }
.decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; display: none; }