:root {
  --bg: #f4f1ea;
  --ink: #17181b;
  --muted: #62646b;
  --tick: #b9b5ab;
  --accent: #c2410c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111317;
    --ink: #eceae4;
    --muted: #9a9ca3;
    --tick: #3a3e45;
    --accent: #fb923c;
  }
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}
main { width: min(640px, 100%); }
h1 {
  font-size: clamp(2.75rem, 13vw, 6.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dial {
  position: relative;
  height: 28px;
  margin: 1.5rem 0;
}
.ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 5%);
  -webkit-mask: linear-gradient(transparent 40%, #000 40%);
  mask: linear-gradient(transparent 40%, #000 40%);
}
.needle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--x, 50%);
  width: 2px;
  background: var(--accent);
  transition: left 300ms cubic-bezier(.2, .7, .2, 1);
}
p { color: var(--muted); font-size: 1.125rem; }
@media (prefers-reduced-motion: reduce) {
  .needle { transition: none; }
}