:root {
  --bg: #fff;
  --ink: #111;
  --g3: #888;
  --g5: #bbb;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100vh; /* fallback for browsers without dvh */
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  display: grid;
  place-items: center;
}

#watch {
  width: min(90vw, 90vh);
  aspect-ratio: 1;
}

.dial {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.75;
}

#ticks line { stroke: var(--g5); stroke-width: 0.75; }
#ticks line[data-major="true"] { stroke: var(--ink); stroke-width: 0.9; }

#labels text {
  fill: var(--g3);
  font: 9px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}

#hand {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.pin { fill: var(--ink); }