/* The app's palette, verbatim from electron/home-window.html, so the site and
   the thing you download look like one product. Keep them in step by hand —
   there is no build step here, and that is the point. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #1c1c1e;
  --muted: #8a8a8e;
  --border: #e2e2e7;
  --accent: #ff9500;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1c1e;
    --fg: #f2f2f7;
    --muted: #8e8e93;
    --border: #38383a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 2rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
  font:
    16px/1.5 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    system-ui,
    sans-serif;
  color: var(--fg);
  background: var(--bg);
}

h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 0;
  /* Balanced so the line breaks at the em dash rather than mid-clause. */
  max-width: 30ch;
  text-wrap: balance;
  font-size: 1.125rem;
  color: var(--muted);
}

.download {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.download:hover { filter: brightness(1.08); }
.download:active { filter: brightness(0.94); }
.download:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.requirements {
  margin: -0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

footer {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--muted);
}