/* Colours copied from app/lib/theme/tokens/palette.dart -- the site is the
   one place outside the app allowed to hold them. See
   docs/superpowers/specs/2026-10-12-privacy-site-design.md. */
:root {
  --bg: #f4f2f7;
  --ink: #1a1429;
  --primary: #7209b7;
  --muted: color-mix(in srgb, var(--ink) 68%, var(--bg));
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #120e1b;
    --ink: #ffffff;
    --primary: #a63aef;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.page { max-width: 42rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.wordmark {
  display: block;
  width: 11rem;
  aspect-ratio: 3914 / 858.2112;
  background: var(--primary);
  -webkit-mask: url(wordmark.svg) no-repeat center / contain;
  mask: url(wordmark.svg) no-repeat center / contain;
}
a { color: var(--primary); }
.lang { font-size: 0.9375rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
.updated, .foot { color: var(--muted); font-size: 0.9375rem; }
.prose ul { padding-left: 1.25rem; }
.foot {
  margin-top: 3rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  padding-top: 1rem;
}