:root {
  --blue: #4A9CC7;
  --navy: #1E2B3A;
  --bg: #131C27;
  --muted: #8BA7BC;
}
html, body { margin: 0; padding: 0; background: var(--bg); color: #fff;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif; }
h1, h2, h3 { font-family: "Syne", ui-sans-serif, system-ui, sans-serif; }
a { color: var(--blue); }
.staging-banner { background: #F5A623; color: #000; text-align: center; padding: 4px; font-size: 13px; }
.topbar { display: flex; justify-content: space-between; padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1); }
.layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; padding: 24px; }
.sidebar .section { margin-bottom: 24px; }
.sidebar h3 { font-size: 13px; text-transform: uppercase; color: var(--muted); }
.sidebar ul { list-style: none; padding: 0; margin: 8px 0; }
.sidebar li { margin: 4px 0; }
.sidebar a.active { color: #fff; font-weight: 500; }
.content { max-width: 820px; line-height: 1.6; }
.content pre { background: var(--navy); padding: 16px; border-radius: 6px; overflow-x: auto; }
.content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.content table { border-collapse: collapse; }
.content th, .content td { border: 1px solid rgba(255,255,255,0.15); padding: 6px 10px; }