.clock {
  margin: 24px 0 20px; text-align: center;
  font: 700 clamp(44px, 12vw, 72px)/1 var(--font-mono);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.clock.is-done { color: var(--danger); animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: .35; } }

.presets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.presets button {
  border: 1px solid var(--border); background: var(--bg); border-radius: 20px;
  padding: 6px 14px; font: var(--fs-sm) var(--font); color: var(--text-muted); cursor: pointer;
}
.presets button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.laps { list-style: none; margin: 20px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.laps li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 2px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-sm);
}
.laps li span:first-child { color: var(--text-muted); }