:root {
  color-scheme: light dark;

  --bg: light-dark(#fbfbfa, #0d0d0f);
  --fg: light-dark(#16161a, #ececef);
  --dim: light-dark(#8a8a92, #6e6e78);
  --tick: light-dark(#c9c9cf, #33333a);
  --tick-strong: light-dark(#16161a, #ececef);
  --accent: light-dark(#d4342a, #ff5b4d);

  --dial: min(86vw, 56vh);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  min-height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

.clock {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vmin, 1.8rem);
  padding: env(safe-area-inset-top) 1rem env(safe-area-inset-bottom);
}

.dial {
  position: relative;
  width: var(--dial);
  height: var(--dial);
  overflow: hidden;
}

.ticks { position: absolute; inset: 0; }

.ticks i {
  position: absolute;
  inset: 0;
  rotate: calc(var(--i) * 6deg);
}

.ticks i::before {
  content: "";
  position: absolute;
  top: 1.5%;
  left: 50%;
  translate: -50% 0;
  width: 0.7%;
  height: 3.2%;
  border-radius: 999px;
  background: var(--tick);
}

.ticks i:nth-child(5n + 1)::before {
  width: 1.5%;
  height: 6.5%;
  background: var(--tick-strong);
}

.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  translate: -50% 0;
  transform-origin: 50% 100%;
  border-radius: 999px;
  background: var(--fg);
  will-change: rotate;
}

.hand--hour   { width: 1.9%; height: 29%; }
.hand--minute { width: 1.3%; height: 42%; }
.hand--second { width: 0.6%; height: 45%; background: var(--accent); }

.cap {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 2.6%;
  height: 2.6%;
  border-radius: 50%;
  background: var(--accent);
}

.digital {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Roboto Mono", "DejaVu Sans Mono", monospace;
  font-size: clamp(1.6rem, 11vw, 4.5rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.digital__ms {
  color: var(--dim);
}

.status {
  font-size: clamp(0.72rem, 1.9vmin, 0.95rem);
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  text-align: center;
  text-wrap: balance;
}