/* Shared by every page: black background, high contrast, colour-vision-deficiency-safe
   status colours (Okabe-Ito blue / orange / yellow). Status is always spelled out in
   words too - colour is never the only signal. */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: #b3b3b3;
  --line: #666;
  --surface: #141414;
  --running: #56b4e9; /* blue */
  --paused: #e69f00; /* orange */
  --alert: #f0e442; /* yellow */
  --on-colour: #000;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--alert); outline-offset: 2px; }