:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #4a4a4a;
  --accent: #0b57d0;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --fg: #f2f2f2; --muted: #c4c4c4; --accent: #8ab4f8; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { text-align: center; padding: 1rem; }
.clock {
  display: block;
  font-size: clamp(3rem, 16vw, 10rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.date { font-size: clamp(1.1rem, 4vw, 1.75rem); margin: 0.75rem 0 0.25rem; }
.zone { color: var(--muted); margin: 0 0 1.5rem; }
button {
  font: inherit;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}