:root {
  --bg-top: #101008; --bg: #060604; --bg2: #020201;
  --ink: rgba(236,232,214,.78); --dim: rgba(200,190,160,.42);
  --faint: rgba(200,190,160,.2); --accent: #e8d9a0;
  --accent-soft: rgba(232,217,160,.5); --glow: 0 0 16px rgba(232,217,160,.28);
  --hour-ink: #e8c070; --minute-ink: #7ec8c0; --second-ink: #c8a0e0;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  overflow: hidden;
  background: radial-gradient(115% 88% at 50% 8%, var(--bg-top), var(--bg) 48%, var(--bg2));
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.stage { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; }
canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.readout {
  position: fixed;
  pointer-events: auto;
  text-shadow: 0 2px 12px #000;
  user-select: none;
  -webkit-user-select: none;
}
.time {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: .62;
}
.time.hour { color: var(--hour-ink); }
.time.minute { color: var(--minute-ink); }
.time.second { color: var(--second-ink); }
.sep {
  color: var(--accent-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  animation: blink 1s steps(1,end) infinite;
  opacity: .45;
}
.meta {
  color: var(--dim);
  text-transform: uppercase;
  opacity: .85;
  letter-spacing: .16em;
}

@media (orientation: portrait) {
  .readout {
    left: 0; right: 0; bottom: 3vh;
    display: flex; flex-direction: column; align-items: center; gap: 1vh;
  }
  .time-row {
    display: flex; justify-content: center; align-items: baseline; gap: 0ch;
  }
  .time {
    font-size: 18vw;
  }
  .sep {
    font-size: 12vw;
    line-height: 2.0;
  }
  .meta {
    font-size: 4vw;
  }
}

@media (orientation: landscape) {
  .readout {
    right: 2vw; top: 0; bottom: 0; width: 16vw;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3vh;
  }
  .time-row {
    display: flex; flex-direction: column; align-items: center; gap: 0.5vh;
  }
  .time {
    font-size: 12vh;
  }
  .sep {
    font-size: 10vh;
    line-height: 0.8;
    display: inline-block;
    transform: rotate(90deg);
    position: relative;
    top: 1.0vh;
    left: 0.6vw;
  }
  .meta {
    font-size: 2vh;
  }
}

@keyframes blink { 50% { opacity: .25; } }