:root {
    --bg:#0B0C10; --panel:#111318; --elev:#171A21; --hover:#1D212A; --fg:#EDEFF4; --muted:#A1A7B5;
    --faint:#80879A; --line:rgba(255,255,255,0.07); --line2:rgba(255,255,255,0.12);
    --accent:#7C83FF; --accent-ink:#0B0C10; --ok:#4ADE80; --danger:#F87171;
    --radius:14px; --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -16px rgba(0,0,0,0.6);
    color-scheme:dark;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg:#FAFAFA; --panel:#FFFFFF; --elev:#F4F4F6; --hover:#ECECF0; --fg:#0B0C10; --muted:#52525B;
      --faint:#6B6B75; --line:rgba(10,12,16,0.07); --line2:rgba(10,12,16,0.13); --accent:#5B63F5; --accent-ink:#FFFFFF;
      --ok:#15803D; --danger:#DC2626; --shadow:0 1px 2px rgba(10,12,16,0.04), 0 12px 32px -18px rgba(10,12,16,0.18);
      color-scheme:light;
    }
  }
  * { box-sizing:border-box; }
  html { overflow-x:clip; -webkit-text-size-adjust:100%; }
  body { margin:0; color:var(--fg); font:15px/1.5 var(--font); background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased; }
  a { color:inherit; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
  .wrap { max-width:1280px; margin:0 auto; padding:0 20px; }
  header.top { display:flex; align-items:center; justify-content:space-between; gap:12px; height:64px; }
  .brand { display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-0.01em; font-size:1rem; text-decoration:none; }
  .toplinks { display:flex; align-items:center; gap:4px; font-size:.875rem; }
  .toplinks a { color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px; }
  .toplinks a:hover { color:var(--fg); background:var(--elev); }
  .site-footer { padding:40px 0 48px; font-size:.8125rem; color:var(--faint); border-top:1px solid var(--line); margin-top:48px; display:grid; gap:10px; }
  .site-footer p { margin:0; max-width:900px; }
  .site-footer a { color:var(--muted); }
  .footer-links { display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:4px; }
  .footer-links a { text-decoration:none; font-weight:560; }
  .footer-links a:hover { color:var(--fg); text-decoration:underline; }
  @media (max-width: 600px) { .wrap { padding:0 16px; } }
.doc { max-width:820px; padding:24px 0 8px; }
.doc h1 { font-size:clamp(1.75rem,4vw,2.5rem); letter-spacing:-0.03em; line-height:1.1; margin:16px 0 8px; }
.doc h2 { font-size:1.25rem; letter-spacing:-0.02em; margin:40px 0 10px; scroll-margin-top:16px; }
.doc h3 { font-size:1rem; margin:24px 0 8px; }
.doc p, .doc li { color:var(--muted); line-height:1.65; }
.doc strong { color:var(--fg); }
.doc code { font-family:var(--mono); font-size:.82em; background:var(--elev); border:1px solid var(--line); border-radius:6px; padding:1px 5px; word-break:break-word; }
.doc pre { background:var(--elev); border:1px solid var(--line); border-radius:10px; padding:12px 14px; overflow:auto; font-family:var(--mono); font-size:.8rem; }
.doc table { width:100%; border-collapse:collapse; font-size:.85rem; display:block; overflow-x:auto; }
.doc th, .doc td { border-bottom:1px solid var(--line); padding:8px; text-align:left; vertical-align:top; }
.doc th { color:var(--faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.doc .example { background:#0D1117; border-radius:10px; padding:16px; margin:10px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.doc .example img { max-width:100%; height:auto; }
.toc { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.85rem; }
.toc a { color:var(--muted); }
.updated { color:var(--faint); font-size:.8rem; }