:root {
  --fx-ink: #14161a; --fx-ink-2: #5b6270; --fx-line: #e4e7ec; --fx-bg: #fff;
  --fx-accent: #0040cc; --fx-code-bg: #f6f7f9;
  --fx-4xx: #b45309; --fx-5xx: #b91c1c; --fx-2xx: #15803d;
}
@media (prefers-color-scheme: dark) {
  :root { --fx-ink: #e8eaed; --fx-ink-2: #9aa2b1; --fx-line: #2a2f38; --fx-bg: #14161a;
          --fx-accent: #7aa2ff; --fx-code-bg: #1c2027; }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fx-bg); color: var(--fx-ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.fx-topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--fx-line); font-size: 14px;
}
.fx-topbar__brand { font-weight: 700; }
.fx-topbar a { color: inherit; text-decoration: none; opacity: .75; }
.fx-topbar a:hover { opacity: 1; text-decoration: underline; }
.fx-topbar__spacer { flex: 1; }
.fx-main { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
h1 { font-size: 30px; line-height: 1.25; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 32px 0 8px; letter-spacing: .01em; }
p { margin: 0 0 14px; }
a { color: var(--fx-accent); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code { background: var(--fx-code-bg); padding: 1px 5px; border-radius: 4px; font-size: .92em; }
.fx-code { background: none; padding: 0; font-size: inherit; }
.fx-pre {
  background: var(--fx-code-bg); border: 1px solid var(--fx-line); border-radius: 8px;
  padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.55;
}
.fx-status { color: var(--fx-ink-2); margin-bottom: 26px; }
.fx-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 13px;
  font-weight: 600; border: 1px solid currentColor; margin-right: 8px;
}
.fx-badge--2 { color: var(--fx-2xx); }
.fx-badge--4 { color: var(--fx-4xx); }
.fx-badge--5 { color: var(--fx-5xx); }
.fx-crumb { font-size: 14px; margin-bottom: 20px; }
.fx-note { color: var(--fx-ink-2); font-size: 14px; font-weight: 400; }
.fx-list { list-style: none; padding: 0; margin: 0 0 8px; }
.fx-list li { padding: 5px 0; border-bottom: 1px solid var(--fx-line); }
.fx-list li:last-child { border-bottom: 0; }
.fx-foot { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--fx-line); color: var(--fx-ink-2); font-size: 14px; }
