:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #000; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100svh; display: grid; place-items: center; padding: 32px 20px; }
.counter { position: relative; text-align: center; }
button {
  display: grid; place-items: center; width: 180px; min-height: 92px;
  padding: 20px 24px; border: 1px solid #444; border-radius: 12px;
  background: #191919; color: #fff; font: 700 36px/1.2 Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation;
  transition: background 100ms, border-color 100ms, transform 80ms;
  overflow-wrap: anywhere; max-width: calc(100vw - 40px);
}
button:hover { background: #242424; border-color: #777; }
button:active { transform: scale(.96); background: #303030; }
button:focus-visible { outline: 2px solid white; outline-offset: 6px; }
button:disabled { cursor: wait; }
.reset { position: absolute; top: 100%; width: 100%; margin: 22px 0 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
#status { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(300px, 85vw); margin: 60px 0 0; color: #999; font-size: 12px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { button { transition: none; } }

button.wide { width: min(90vw, 440px); }