/* Hand-written, no framework, no build step. The whole site is three files and
   is served by Cloudflare Pages independently of the application, so that the
   privacy policy stays reachable while the app's node is powered down. */

:root {
  --accent: #6750a4;
  --fg: #1c1b1f;
  --fg-muted: #49454f;
  --bg: #fffbfe;
  --rule: #e4dfe8;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #cfbcff;
    --fg: #e6e1e5;
    --fg-muted: #cac4d0;
    --bg: #141218;
    --rule: #2e2a33;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
  max-width: 42rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1 {
  margin: 0 0 0.25rem;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

h2 {
  margin: 2.5rem 0 0.5rem;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}

.tagline {
  margin: 0 0 2rem;
  color: var(--fg-muted);
  font-size: 1.05rem;
}

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0;
}

.button {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
}

.button.primary {
  background: var(--accent);
  color: var(--bg);
}

ul {
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.4rem;
}

/* Wide content must scroll inside itself rather than widening the page. */
table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

td,
th {
  padding: 0.4rem 0.9rem 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: 0.9rem;
}