:root {
      color-scheme: dark;
      --bg-0:#070b16; --bg-1:#0b1124; --text:#e8eef9; --muted:#97a3bb; --faint:#5f6b85;
      --line:rgba(255,255,255,.09); --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.07);
      --accent:#5b9dff; --accent-2:#22d3ee; --grad:linear-gradient(135deg,#6366f1,#38bdf8 55%,#22d3ee);
      --ok:#34d399; --warn:#fbbf24; --err:#fb7185; --radius:16px;
      --shadow:0 20px 60px -25px rgba(0,0,0,.7); --code:#0a1020;
      --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      --get:#34d399; --post:#5b9dff;
      --spring:cubic-bezier(.22,1,.36,1);
    }
    * { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
    html { scroll-behavior:smooth; }
    button:focus, a:focus, summary:focus { outline: none; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
    body { margin:0; color:var(--text); font-family:"Inter",system-ui,sans-serif; font-size:15px;
      line-height:1.6; letter-spacing:-.01em; -webkit-font-smoothing:antialiased;
      background:
        radial-gradient(1200px 600px at 85% -10%, rgba(56,189,248,.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(99,102,241,.1), transparent 60%),
        linear-gradient(180deg,var(--bg-0),var(--bg-1)); min-height:100vh; }
    a { color:var(--accent); text-decoration:none; }
    a:hover { text-decoration:underline; }
    code { font-family:var(--mono); font-size:.86em; background:rgba(255,255,255,.07);
      padding:.1rem .38rem; border-radius:6px; color:#cfe1ff; }

    /* Top bar */
    .topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
      padding:.85rem 1.5rem; border-bottom:1px solid var(--line);
      background:rgba(7,11,22,.7); backdrop-filter:blur(16px); }
    .brand { display:flex; align-items:center; gap:.6rem; font-weight:700; }
    .logo { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--grad);
      color:#04111f; font-weight:800; font-size:.8rem; }
    .topbar nav { display:flex; gap:1.2rem; font-size:.9rem; font-weight:600; }
    .topbar nav a { color:var(--muted); }
    .topbar nav a:hover { color:var(--text); text-decoration:none; }

    .shell { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:230px 1fr; gap:2.5rem; padding:2rem 1.5rem 5rem; }
    @media (max-width:900px){ .shell{ grid-template-columns:1fr; } .sidebar{ display:none; } }

    /* Sidebar */
    .sidebar { position:sticky; top:72px; align-self:start; height:max-content; font-size:.9rem; }
    .sidebar .group { color:var(--faint); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem;
      font-weight:700; margin:1.3rem 0 .5rem; }
    .sidebar a { display:block; color:var(--muted); padding:.32rem .6rem; border-radius:8px; border-left:2px solid transparent; }
    .sidebar a:hover { color:var(--text); text-decoration:none; background:var(--glass); }
    .sidebar a.active { color:var(--text); border-left-color:var(--accent); background:var(--glass); }

    /* Content */
    .content { min-width:0; }
    h1 { font-size:2rem; font-weight:800; letter-spacing:-.03em; margin:.2rem 0 .4rem; }
    .lede { color:var(--muted); font-size:1.05rem; max-width:64ch; }
    h2 { font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:2.8rem 0 .8rem; padding-top:.5rem; }
    h3 { font-size:1.02rem; font-weight:700; margin:1.8rem 0 .5rem; }
    p { color:var(--text); }
    section { scroll-margin-top:84px; }
    .hr { height:1px; background:var(--line); margin:2.5rem 0; border:0; }

    .card { background:var(--glass); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem 1.4rem; box-shadow:var(--shadow); }
    .callout { border-left:3px solid var(--accent); background:rgba(91,157,255,.07); padding:.9rem 1.1rem; border-radius:10px; margin:1.1rem 0; color:var(--muted); }
    .callout.warn { border-left-color:var(--warn); background:rgba(251,191,36,.07); }
    .callout strong { color:var(--text); }

    /* Endpoint header */
    .ep { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.4rem 0 .2rem; }
    .method { font-family:var(--mono); font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:7px; letter-spacing:.04em; }
    .method.get { color:var(--get); background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); }
    .method.post { color:var(--post); background:rgba(91,157,255,.12); border:1px solid rgba(91,157,255,.3); }
    .path { font-family:var(--mono); font-size:.95rem; color:var(--text); }

    /* Tables */
    table { width:100%; border-collapse:collapse; margin:.8rem 0 .4rem; font-size:.9rem; }
    th, td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
    th { color:var(--faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
    td code { white-space:nowrap; }
    .req { color:var(--err); font-size:.7rem; font-weight:700; }
    .opt { color:var(--faint); font-size:.7rem; font-weight:700; }

    /* Code blocks + tabs */
    .codewrap { margin:1rem 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--code); }
    .tabs { display:flex; align-items:center; gap:.2rem; padding:.45rem .5rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
    .tab { font-size:.78rem; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; padding:.3rem .7rem; border-radius:7px; font-family:inherit; }
    .tab:hover { color:var(--text); }
    .tab.active { color:var(--text); background:var(--glass-strong); }
    .copy { margin-left:auto; font-size:.74rem; font-weight:600; color:var(--muted); background:none; border:1px solid var(--line); border-radius:7px; padding:.28rem .6rem; cursor:pointer; font-family:inherit; transition:.15s; }
    .copy:hover { color:var(--text); border-color:var(--accent); }
    pre { margin:0; padding:1rem 1.1rem; overflow-x:auto; }
    pre code { background:none; padding:0; font-size:.83rem; line-height:1.65; color:#d7e3f7; white-space:pre; }
    .tok-k{color:#c4b5fd}.tok-s{color:#86efac}.tok-c{color:#5f6b85}.tok-n{color:#7dd3fc}.tok-p{color:#94a3b8}
    .hidden{display:none}

    .footer { color:var(--faint); font-size:.82rem; margin-top:3rem; }

    /* ---------- motion ---------- */
    @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
    @keyframes slideDown { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }

    .topbar { animation: slideDown .5s var(--spring) both; }
    .sidebar { animation: fadeUp .6s var(--spring) .12s both; }
    .content > section:first-child h1 { animation: fadeUp .6s var(--spring) .06s both; }
    .content > section:first-child .lede { animation: fadeUp .6s var(--spring) .14s both; }
    .content > section:first-child .callout { animation: fadeUp .6s var(--spring) .22s both; }

    .sidebar a { transition: color .2s, border-color .2s var(--spring), background .2s; }

    /* Scroll-reveal — sections are visible by DEFAULT; JS only hides off-screen
       ones (via .reveal-pending) and removes the class to reveal. This way
       content can never be left permanently hidden if anything goes wrong. */
    .anim section { transition: opacity .55s var(--spring), transform .55s var(--spring); }
    .anim section.reveal-pending { opacity:0; transform:translateY(20px); }

    /* Tab pane crossfade */
    .codewrap pre[data-lang].show-pane { animation: fadeUp .25s var(--spring); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
      .anim section.reveal-pending { opacity:1 !important; transform:none !important; }
    }

/* utility classes (replacing former inline style attributes) */
.mt-tight { margin-top: .3rem; }
.note { color: var(--muted); font-size: .9rem; }