:root {
  --pool-deep: #062a3d;
  --pool-mid: #0a4a63;
  --aqua: #2fd4d4;
  --foam: #eafcff;
  --coral: #ff6f61;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 20%, var(--pool-mid), var(--pool-deep) 70%);
  color: var(--foam);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

#stage {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  text-align: center;
}

#status {
  font-size: 2.4vh;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

#status:empty {
  display: none;
}

#mode {
  font-size: 3.2vh;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua);
}

#clock {
  font-size: 26vh;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6vh rgba(47, 212, 212, 0.35);
  color: var(--foam);
}

body[data-mode="1"] #clock,
body[data-mode="2"] #clock {
  color: var(--aqua);
}

#hint {
  font-size: 2.2vh;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  min-height: 2.2vh;
}

.mono {
  font-family: "SFMono-Regular", ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
}