:root {
  color-scheme: light;
  --background: #eef1f5;
  --dial: #ffffff;
  --ink: #192333;
  --muted: #526174;
  --accent: #bd2843;
  --border: #c6ced9;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #10151e;
  --dial: #1a2330;
  --ink: #f0f3f8;
  --muted: #b0bed0;
  --accent: #ff718b;
  --border: #45546a;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--background);
  color: var(--ink);
  font-family: system-ui, sans-serif;
  transition: background-color 200ms, color 200ms;
}

main {
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.clock {
  /* Reserve room for the control, readout, and comfortable edge padding. */
  width: min(calc(100vw - 32px), calc(100vh - 156px));
  width: min(calc(100vw - 32px), calc(100dvh - 156px));
  margin: 0;
  text-align: center;
}

#dial {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.face {
  fill: var(--dial);
  stroke: var(--border);
  stroke-width: 1;
}

.tick {
  stroke: var(--muted);
  stroke-width: 1.4;
}

.tick.major {
  stroke: var(--ink);
  stroke-width: 3;
}

.numeral {
  fill: var(--ink);
  font-size: 23px;
  font-weight: 500;
  text-anchor: middle;
  dominant-baseline: central;
}

.hand {
  stroke: var(--ink);
  stroke-linecap: round;
}

.hour {
  stroke-width: 7;
}

.minute {
  stroke-width: 4.5;
}

.second {
  stroke: var(--accent);
  stroke-width: 1.8;
}

.cap {
  fill: var(--accent);
}

.face,
.tick,
.numeral,
.hand,
.cap {
  transition: fill 200ms, stroke 200ms;
}

figcaption {
  margin-top: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.6;
}

.time-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

#digital-time {
  color: var(--ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.zone {
  font-size: 10px;
  letter-spacing: 0.12em;
}

#theme-toggle {
  position: fixed;
  z-index: 1;
  top: 12px;
  right: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--dial);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}

#theme-toggle[aria-pressed="true"] {
  border-color: var(--accent);
}

#theme-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}