: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);
}

/* --- Zifferblatt --- */

/*
 * Abgeschnitten wird nichts Sichtbares: Zeiger reichen höchstens 45 % und die
 * Striche höchstens 48,5 % vom Mittelpunkt nach außen, liegen also innerhalb des
 * Quadrats. Die Striche sind aber jeder ein volles Quadrat, das gedreht wird —
 * und ein um 45° gedrehtes Quadrat hat eine um Faktor 1,41 größere Hüllbox. Ohne
 * das Abschneiden schiebt diese leere Hülle die Seite über die Bildschirmbreite
 * hinaus, auf einem Telefon um rund 40 px.
 */
.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);
}

/* Die zwölf Stundenpositionen tragen das Ablesen, also bekommen sie Gewicht. */
.ticks i:nth-child(5n + 1)::before {
  width: 1.5%;
  height: 6.5%;
  background: var(--tick-strong);
}

/* --- Zeiger --- */

/*
 * Der Ursprung liegt am unteren Ende des Zeigers. Die individuellen
 * Transform-Eigenschaften werden in der Reihenfolge translate, rotate, scale
 * angewandt: das Element wird also erst um seine halbe Breite nach links
 * geschoben, sodass sein unteres Ende in der Mitte des Zifferblatts sitzt, und
 * dann um genau diesen Punkt gedreht. clock.js schreibt ausschließlich `rotate`.
 */
.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);
}

/* --- Textzeilen --- */

/*
 * „13:41:44.993" sind zwölf Zeichen. Bei Monospace liegt der Vorschub um 0,6 em,
 * die Zeile braucht also rund 7,2 em. Bei 11vw sind das 79vw — passt auch auf ein
 * schmales Telefon, ohne umzubrechen. Die Obergrenze verhindert, dass die Zeile
 * auf breiten Bildschirmen das Zifferblatt erschlägt.
 */
.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;
}

/* Gleiche Größe wie die Uhrzeit, nur zurückgenommen — sonst zieht das Zappeln
   der Millisekunden das Auge von der eigentlichen Zeit weg. */
.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;
}