#area { min-height: 240px; display: grid; place-items: center; padding: 16px; border-radius: 12px; font-size: 1.4rem; font-weight: 600; color: #fff; text-align: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; overflow-wrap: anywhere; }
#area.idle { background: #2563eb; }
#area.running { background: #16a34a; }
#area.done { background: #475569; }
#area:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.stats p { margin: 0; text-align: center; }
.stats strong { display: block; font-size: clamp(1.6rem, 9vw, 2.4rem); font-variant-numeric: tabular-nums; }
#durations button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
@media (prefers-reduced-motion: no-preference) {
  #area.hit { animation: click-pulse 120ms ease-out; }
  @keyframes click-pulse { from { transform: scale(.97); } to { transform: scale(1); } }
}