:root {
  --bg: #0f1419;
  --surface: #1a2230;
  --text: #e6edf3;
  --muted: #9aa7b4;
  --accent: #f5a623;
  --border: #2a3442;
  --link: #6cb6ff;
  --max: 820px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f9fc;
    --surface: #ffffff;
    --text: #1a2230;
    --muted: #5b6770;
    --accent: #d98300;
    --border: #e1e7ef;
    --link: #1862c6;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  line-height: 1.65;
  font-size: 17px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 20px 80px;
}

header.site {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.head-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.2px;
}

.brand .dot { color: var(--accent); }

nav.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

nav.langs a {
  font-size: 13px;
  text-decoration: none;
  color: var(--muted);
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
}

nav.langs a:hover { color: var(--text); }

nav.langs a[aria-current="true"] {
  color: var(--text);
  border-color: var(--border);
  background: var(--bg);
}

h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 28px 0 6px;
}

h2 {
  font-size: 22px;
  margin: 34px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 18px;
  margin: 22px 0 6px;
  color: var(--accent);
}

/* Fourth level: used by the privacy policy to separate the data collected
   without consent from the data that needs it. Same weight as h3 but in the
   body colour, so it reads as a subdivision and not as a new section. */
h4 {
  font-size: 16px;
  margin: 18px 0 4px;
  color: var(--text);
}

p, li { color: var(--text); }

.muted { color: var(--muted); }

.updated {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 8px;
}

a { color: var(--link); }

ul { padding-left: 22px; }
li { margin: 4px 0; }

.doc-nav {
  margin: 18px 0 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.doc-nav a {
  font-size: 14px;
  text-decoration: none;
  color: var(--muted);
}

.doc-nav a[aria-current="true"] { color: var(--accent); font-weight: 600; }

footer.site {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 20px 60px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

footer.site a { color: var(--link); }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}