:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  --background: #000;
  --foreground: #fff;
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--foreground);
  background: var(--background);
  transition: background-color 120ms linear, color 120ms linear;
}

body.flash-yellow {
  --background: #ffd400;
  --foreground: #000;
}

body.flash-red {
  --background: #f04438;
  --foreground: #000;
}

body.time-window {
  --background: #fff;
  --foreground: #000;
}

body.flash-time {
  --background: #fff;
  --foreground: #d50000;
}

body.overtime {
  --background: #fff;
  --foreground: #d50000;
}

body.overtime.overtime-invert {
  --background: #d50000;
  --foreground: #fff;
}

body.terminal {
  --background: #d50000;
  --foreground: #fff;
}

main {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 48px);
}

nav {
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
}

.clock {
  align-self: center;
  min-width: 0;
  text-align: center;
}

nav button,
#timer {
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

nav button {
  padding: 10px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: clamp(0.8rem, 2vw, 1rem);
  letter-spacing: 0.02em;
}

nav button:hover,
nav button:focus-visible,
nav button[aria-pressed="true"] {
  color: var(--background);
  background: var(--foreground);
}

button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

#timer {
  width: 100%;
  padding: 0;
  outline: none;
  font-size: clamp(5rem, 25vw, 22rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.9;
  letter-spacing: -0.07em;
  text-align: center;
  caret-color: currentColor;
}

#negative-timer {
  margin: 0.25em 0 0;
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

#negative-timer[hidden] {
  display: none;
}

#timer:not([readonly]) {
  cursor: text;
}

#timer.with-hours {
  font-size: clamp(4rem, 16vw, 14rem);
  letter-spacing: -0.06em;
}

#status {
  margin: 0;
  text-align: center;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  opacity: 0.7;
}

@media (max-width: 520px) {
  nav button {
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

}