/* ============================================================================
   ByondAPI — Developer Documentation.
   Part of the Byond product family (shares the Byond logo + Hanken/JetBrains
   type spine), but wears its OWN developer identity: a near-black terminal
   canvas, an ELECTRIC VIOLET accent (distinct from ByondVoice's cyan->indigo),
   a terminal-green secondary for "GET"/success, a dot-grid + violet mesh
   backdrop, and Sora as the technical display face. Code-forward, copy-able,
   syntax-highlighted. No build step — vanilla CSS.
   ============================================================================ */
:root{
  /* near-black terminal canvas */
  --bg:#0B0B12; --bg-1:#0F0F18; --bg-2:#14141F; --bg-3:#1A1A28;
  --panel:#101019; --panel-2:#15151F;
  --ink:#ECEDF5; --ink-soft:#B7BACA; --muted:#7E8298; --faint:#565A70;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.05); --line-3:rgba(255,255,255,.14);

  /* ELECTRIC VIOLET — the ByondAPI accent (distinct from ByondVoice cyan->indigo) */
  --v1:#9B6CFF; --v2:#7C5CFF; --v3:#B14BE8;
  --accent:#8C6BFF;
  --grad:linear-gradient(122deg,#9B6CFF 0%,#7C5CFF 46%,#C04BE0 100%);
  --grad-soft:linear-gradient(122deg,rgba(155,108,255,.18),rgba(192,75,224,.10));

  /* method / status accents (terminal palette) */
  --green:#39E08B; --green-d:#22C778;
  --amber:#F2B544; --cyan:#46D6F0; --red:#FF6A7A; --orange:#FF9159; --pink:#FF6FD0;

  /* method colors for HTTP verbs */
  --m-get:#39E08B; --m-post:#9B6CFF; --m-del:#FF6A7A; --m-put:#F2B544;

  /* syntax highlighting (terminal-grade) */
  --c-key:#9B6CFF;     /* json keys / object props */
  --c-str:#39E08B;     /* strings */
  --c-num:#F2B544;     /* numbers */
  --c-bool:#46D6F0;    /* booleans / null */
  --c-punc:#7E8298;    /* braces / punctuation */
  --c-cmd:#ECEDF5;     /* shell command */
  --c-flag:#FF9159;    /* curl flags / -X -H */
  --c-url:#9B6CFF;     /* urls */
  --c-comment:#565A70; /* comments */
  --c-kw:#FF6FD0;      /* js keywords */
  --c-fn:#46D6F0;      /* js functions */

  --r:14px; --r-sm:10px;
  --sidebar:280px; --toc:228px; --maxw:1480px;
  --display:"Sora",sans-serif; --sans:"Hanken Grotesk",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.62; overflow-x:hidden;
  font-size:15px;
}
/* layered atmosphere: violet mesh glows + a fine dot-grid + grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 84% -4%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(46% 42% at 6% 4%, rgba(192,75,224,.12), transparent 58%),
    radial-gradient(70% 60% at 50% 108%, rgba(57,224,139,.06), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(120% 80% at 60% 0%, #000, transparent 78%);
}
body.locked{overflow:hidden}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); font-weight:500; letter-spacing:.01em}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
::selection{background:rgba(124,92,255,.34); color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

/* ---------------------------------------------------------------- logo lockup */
.bv-logo{display:flex; align-items:center; gap:10px; flex:none}
.bv-mark{display:flex; align-items:center; flex:none}
.bv-mark img{height:24px; width:auto; display:block; } /* dark bg: "yond" is black */
.bv-word{font-family:var(--display); font-weight:700; font-size:17.5px; letter-spacing:-.02em; color:var(--ink); line-height:1}
.bv-word .api{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:14px; border-radius:11px; padding:10px 17px; transition:transform .18s ease, box-shadow .2s ease, background .2s, border-color .2s, color .2s; cursor:pointer; border:1px solid transparent; white-space:nowrap}
.btn-grad{background:var(--grad); color:#fff; box-shadow:0 10px 28px -12px rgba(124,92,255,.8)}
.btn-grad:hover{transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(124,92,255,.9)}
.btn-ghost{border-color:var(--line-3); color:var(--ink); background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--accent); color:#fff; transform:translateY(-2px)}
.btn-arrow::after{content:"→"; font-family:var(--mono); transition:transform .2s}
.btn-arrow:hover::after{transform:translateX(3px)}

/* ============================================================================
   TOP BAR
   ============================================================================ */
.topbar{position:sticky; top:0; z-index:60; height:64px; backdrop-filter:saturate(150%) blur(14px); background:rgba(11,11,18,.74); border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--maxw); margin:0 auto; height:100%; padding:0 22px; display:flex; align-items:center; gap:18px}
.tb-left{display:flex; align-items:center; gap:14px; min-width:var(--sidebar); flex:none}
.docs-tag{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line-3); border-radius:6px; padding:3px 7px; background:rgba(124,92,255,.08)}

/* search trigger */
.search-trigger{flex:1; max-width:440px; display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; font-family:var(--sans); font-size:13.5px; transition:border-color .2s, background .2s}
.search-trigger:hover{border-color:var(--line-3); background:rgba(255,255,255,.05)}
.search-trigger svg{width:15px;height:15px;stroke:var(--muted);stroke-width:2;fill:none;flex:none}
.search-trigger .st-txt{flex:1; text-align:left}
.search-trigger .kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--line-3); border-radius:5px; padding:2px 6px; color:var(--ink-soft); background:rgba(255,255,255,.04)}

.tb-right{display:flex; align-items:center; gap:14px; margin-left:auto; flex:none}
.tb-link{font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:color .2s}
.tb-link:hover{color:#fff}
.tb-status{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--green); border:1px solid rgba(57,224,139,.25); border-radius:20px; padding:5px 11px; background:rgba(57,224,139,.06)}
.tb-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(57,224,139,.5)}50%{box-shadow:0 0 0 6px rgba(57,224,139,0)}}

.menu-btn{display:none; width:38px;height:38px; border:1px solid var(--line-3); border-radius:10px; background:rgba(255,255,255,.03); cursor:pointer; align-items:center; justify-content:center; flex:none}
.menu-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.8;fill:none}

/* ============================================================================
   LAYOUT — sidebar | content | toc
   ============================================================================ */
.shell{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr) var(--toc); align-items:start; position:relative; z-index:1}

/* ---------------------------------------------------------------- left nav */
.sidebar{position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto; padding:26px 16px 60px 22px; border-right:1px solid var(--line); overscroll-behavior:contain}
.sidebar::-webkit-scrollbar{width:8px}
.nav-group{margin-bottom:24px}
.nav-group > .ng-title{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); padding:0 12px; margin-bottom:9px; display:block}
.nav-link{display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:9px; font-size:13.7px; font-weight:500; color:var(--ink-soft); transition:color .16s, background .16s; position:relative; cursor:pointer}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.04)}
.nav-link.active{color:#fff; background:rgba(124,92,255,.12)}
.nav-link.active::before{content:""; position:absolute; left:-22px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:3px; background:var(--grad); box-shadow:0 0 10px rgba(124,92,255,.7)}
.nav-link .verb{font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.05em; padding:2px 5px; border-radius:5px; flex:none; line-height:1.3}
.verb.get{color:var(--m-get); background:rgba(57,224,139,.13)}
.verb.post{color:var(--m-post); background:rgba(155,108,255,.16)}
.verb.del{color:var(--m-del); background:rgba(255,106,122,.14)}
.nav-sub{margin:2px 0 2px 12px; padding-left:12px; border-left:1px solid var(--line-2); display:flex; flex-direction:column; gap:1px}

/* ---------------------------------------------------------------- content col */
.content{padding:46px 52px 120px; min-width:0; max-width:920px}
.doc-section{scroll-margin-top:90px; padding-top:8px}
.doc-section + .doc-section{margin-top:30px; padding-top:54px; border-top:1px solid var(--line-2)}

.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:9px; margin-bottom:16px}
.eyebrow::before{content:""; width:22px; height:1px; background:linear-gradient(90deg,var(--accent),transparent)}

h1.doc-h1{font-family:var(--display); font-weight:700; font-size:clamp(34px,4.4vw,50px); line-height:1.04; letter-spacing:-.03em}
h2.doc-h2{font-family:var(--display); font-weight:700; font-size:clamp(25px,3vw,33px); line-height:1.1; letter-spacing:-.025em; scroll-margin-top:90px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
h3.doc-h3{font-family:var(--display); font-weight:600; font-size:19.5px; letter-spacing:-.015em; margin:34px 0 12px; scroll-margin-top:90px}
h4.doc-h4{font-family:var(--display); font-weight:600; font-size:15.5px; letter-spacing:-.01em; margin:24px 0 10px; color:var(--ink)}
.content p{color:var(--ink-soft); margin:13px 0; font-size:15px; max-width:74ch}
.content p.lead{font-size:18px; color:var(--ink-soft); margin-top:18px; max-width:70ch; line-height:1.6}
.content strong{color:#fff; font-weight:600}
.content a.tlink{color:var(--v1); border-bottom:1px solid rgba(155,108,255,.35); transition:border-color .2s, color .2s}
.content a.tlink:hover{color:#fff; border-color:var(--v1)}
.content ul.dlist{list-style:none; margin:14px 0; display:flex; flex-direction:column; gap:9px; max-width:74ch}
.content ul.dlist li{position:relative; padding-left:22px; color:var(--ink-soft); font-size:14.5px}
.content ul.dlist li::before{content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:2px; background:var(--grad)}
.content ul.dlist li strong{color:#fff}

/* inline code */
code.ic{font-family:var(--mono); font-size:.86em; background:rgba(155,108,255,.12); color:#C9B8FF; padding:.12em .42em; border-radius:6px; border:1px solid rgba(155,108,255,.16); white-space:nowrap}
code.ic.g{background:rgba(57,224,139,.1); color:#8DF0BE; border-color:rgba(57,224,139,.16)}
code.ic.a{background:rgba(242,181,68,.1); color:#F4CE82; border-color:rgba(242,181,68,.16)}

/* anchor link on headings */
.anchor{margin-left:10px; opacity:0; color:var(--accent); font-family:var(--mono); font-weight:400; font-size:.6em; transition:opacity .2s; cursor:pointer; vertical-align:middle}
h2.doc-h2:hover .anchor, h3.doc-h3:hover .anchor{opacity:.7}
.anchor:hover{opacity:1!important}

/* ============================================================================
   HERO (intro block)
   ============================================================================ */
.hero{position:relative}
.hero .doc-h1{margin-top:8px}
.hero-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px}
.meta-chip{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink-soft); border:1px solid var(--line-3); border-radius:9px; padding:8px 12px; background:rgba(255,255,255,.025)}
.meta-chip b{color:#fff; font-weight:600}
.meta-chip svg{width:14px;height:14px;stroke:var(--accent);stroke-width:2;fill:none}
.meta-chip .gd{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green)}

/* base-url callout */
.baseurl{margin-top:30px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)); overflow:hidden}
.baseurl-row{display:flex; align-items:center; gap:14px; padding:16px 18px; flex-wrap:wrap}
.baseurl-row .bu-lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); flex:none}
.baseurl-row .bu-val{font-family:var(--mono); font-size:15px; color:#fff; flex:1; min-width:0; word-break:break-all}
.baseurl-row .bu-val .scheme{color:var(--green)}
.baseurl-row + .baseurl-row{border-top:1px solid var(--line-2)}
.baseurl-note{padding:12px 18px; background:rgba(124,92,255,.05); border-top:1px solid var(--line-2); font-size:12.8px; color:var(--muted); font-family:var(--mono); line-height:1.6}
.baseurl-note b{color:var(--v1)}

/* ============================================================================
   CALLOUTS / NOTES
   ============================================================================ */
.note{display:flex; gap:13px; padding:15px 17px; border-radius:var(--r); margin:22px 0; border:1px solid; font-size:14px; line-height:1.6; align-items:flex-start}
.note .n-ic{width:20px;height:20px;flex:none;margin-top:1px}
.note .n-ic svg{width:20px;height:20px;stroke-width:1.9;fill:none}
.note b{color:#fff; font-weight:600}
.note p{margin:0; color:inherit; max-width:none}
.note.info{border-color:rgba(70,214,240,.28); background:rgba(70,214,240,.06); color:#C6EEF8}
.note.info .n-ic svg{stroke:var(--cyan)}
.note.tip{border-color:rgba(57,224,139,.28); background:rgba(57,224,139,.06); color:#BEF2D6}
.note.tip .n-ic svg{stroke:var(--green)}
.note.warn{border-color:rgba(242,181,68,.3); background:rgba(242,181,68,.07); color:#F6DCA6}
.note.warn .n-ic svg{stroke:var(--amber)}
.note.danger{border-color:rgba(255,106,122,.3); background:rgba(255,106,122,.07); color:#FFC7CE}
.note.danger .n-ic svg{stroke:var(--red)}

/* ============================================================================
   ENDPOINT HEADER PILL
   ============================================================================ */
.endpoint{display:flex; align-items:center; gap:12px; margin:18px 0 6px; padding:13px 16px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); flex-wrap:wrap}
.method{font-family:var(--mono); font-weight:700; font-size:12.5px; letter-spacing:.04em; padding:5px 11px; border-radius:8px; flex:none}
.method.get{color:var(--m-get); background:rgba(57,224,139,.14); box-shadow:inset 0 0 0 1px rgba(57,224,139,.25)}
.method.post{color:#fff; background:linear-gradient(122deg,rgba(155,108,255,.9),rgba(192,75,224,.8)); box-shadow:0 6px 16px -8px rgba(124,92,255,.8)}
.method.del{color:#fff; background:linear-gradient(122deg,#FF6A7A,#E04657); box-shadow:0 6px 16px -8px rgba(255,106,122,.7)}
.endpoint .ep-path{font-family:var(--mono); font-size:15.5px; color:#fff; font-weight:500; flex:1; min-width:0; word-break:break-all}
.endpoint .ep-path .seg-base{color:var(--muted)}
.endpoint .ep-auth{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; padding:5px 10px; border-radius:7px; border:1px solid var(--line-3); color:var(--ink-soft); flex:none; display:inline-flex; gap:6px; align-items:center}
.endpoint .ep-auth svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.endpoint .ep-auth.data{color:var(--green); border-color:rgba(57,224,139,.3); background:rgba(57,224,139,.05)}
.endpoint .ep-auth.session{color:var(--v1); border-color:rgba(155,108,255,.3); background:rgba(155,108,255,.05)}

/* ============================================================================
   PARAMETER TABLES
   ============================================================================ */
.params{margin:18px 0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.params-head{display:flex; align-items:center; gap:10px; padding:11px 16px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.params-head .ph-where{margin-left:auto; font-size:10px; color:var(--faint)}
.param{display:grid; grid-template-columns:minmax(140px,1.1fr) minmax(120px,1fr) 2.4fr; gap:14px; padding:14px 16px; border-bottom:1px solid var(--line-2); align-items:baseline}
.param:last-child{border-bottom:none}
.param:hover{background:rgba(255,255,255,.018)}
.param .pname{font-family:var(--mono); font-size:13.5px; color:#fff; font-weight:600; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.param .pname .req{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:2px 6px; border-radius:5px}
.param .pname .req.required{color:var(--red); background:rgba(255,106,122,.13)}
.param .pname .req.optional{color:var(--muted); background:rgba(255,255,255,.05)}
.param .ptype{font-family:var(--mono); font-size:12px; color:var(--cyan)}
.param .ptype .penum{display:block; color:var(--faint); font-size:11px; margin-top:3px; line-height:1.5}
.param .pdesc{font-size:13.6px; color:var(--ink-soft); line-height:1.55}
.param .pdesc code{font-family:var(--mono); font-size:.86em; background:rgba(255,255,255,.06); padding:.1em .35em; border-radius:5px; color:#D6D8E6; white-space:nowrap}
.param .pdesc .pdef{color:var(--muted); font-size:.92em}

/* ============================================================================
   STATUS / RESPONSE VALUE LISTS
   ============================================================================ */
.statusgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin:18px 0}
.statuscard{border:1px solid var(--line); border-radius:11px; padding:13px 15px; background:rgba(255,255,255,.022); transition:border-color .2s, transform .2s}
.statuscard:hover{border-color:var(--line-3); transform:translateY(-2px)}
.statuscard .sc-val{font-family:var(--mono); font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:8px}
.statuscard .sc-val::before{content:""; width:8px; height:8px; border-radius:50%; flex:none}
.statuscard.ok .sc-val{color:var(--green)} .statuscard.ok .sc-val::before{background:var(--green); box-shadow:0 0 7px var(--green)}
.statuscard.warn .sc-val{color:var(--amber)} .statuscard.warn .sc-val::before{background:var(--amber); box-shadow:0 0 7px var(--amber)}
.statuscard.bad .sc-val{color:var(--red)} .statuscard.bad .sc-val::before{background:var(--red); box-shadow:0 0 7px var(--red)}
.statuscard.neutral .sc-val{color:var(--cyan)} .statuscard.neutral .sc-val::before{background:var(--cyan); box-shadow:0 0 7px var(--cyan)}
.statuscard p{font-size:12.8px; color:var(--ink-soft); margin:7px 0 0; line-height:1.5; max-width:none}

/* ============================================================================
   CODE BLOCKS (tabbed: cURL / JS) + copy
   ============================================================================ */
.codeblock{margin:18px 0; border:1px solid var(--line); border-radius:var(--r); background:#0A0A11; overflow:hidden; box-shadow:0 24px 60px -40px rgba(0,0,0,.9)}
.cb-head{display:flex; align-items:center; gap:4px; padding:0 8px 0 14px; height:42px; background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); border-bottom:1px solid var(--line)}
.cb-dots{display:flex; gap:6px; margin-right:8px}
.cb-dots i{width:10px;height:10px;border-radius:50%;display:block}
.cb-dots i:nth-child(1){background:#FF5F57} .cb-dots i:nth-child(2){background:#FEBC2E} .cb-dots i:nth-child(3){background:#28C840}
.cb-tabs{display:flex; gap:2px; height:100%}
.cb-tab{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--muted); background:none; border:none; padding:0 13px; height:100%; cursor:pointer; position:relative; transition:color .18s; display:inline-flex; align-items:center; gap:7px}
.cb-tab:hover{color:var(--ink-soft)}
.cb-tab.active{color:#fff}
.cb-tab.active::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--grad); border-radius:2px}
.cb-tab .lang-dot{width:7px;height:7px;border-radius:2px;background:var(--faint)}
.cb-tab[data-lang="bash"] .lang-dot{background:var(--green)}
.cb-tab[data-lang="js"] .lang-dot{background:var(--amber)}
.cb-tab[data-lang="json"] .lang-dot{background:var(--v1)}
.cb-label{font-family:var(--mono); font-size:11px; color:var(--muted); padding:0 10px}
.cb-copy{margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:6px 11px; cursor:pointer; transition:.18s; align-self:center; margin-right:4px}
.cb-copy:hover{color:#fff; border-color:var(--line-3); background:rgba(255,255,255,.07)}
.cb-copy svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.cb-copy.copied{color:var(--green); border-color:rgba(57,224,139,.4); background:rgba(57,224,139,.08)}
.cb-copy.copied .ic-copy{display:none}
.cb-copy .ic-check{display:none}
.cb-copy.copied .ic-check{display:inline}

.cb-panes{position:relative}
.cb-pane{display:none; margin:0; overflow-x:auto; padding:16px 18px; font-family:var(--mono); font-size:13px; line-height:1.72; tab-size:2}
.cb-pane.active{display:block}
.cb-pane code{font-family:var(--mono); white-space:pre; display:block}
.cb-pane::-webkit-scrollbar{height:8px}

/* single (non-tabbed) code block */
.codeblock.single .cb-head .cb-tabs{pointer-events:none}

/* syntax tokens */
.tok-key{color:var(--c-key)}
.tok-str{color:var(--c-str)}
.tok-num{color:var(--c-num)}
.tok-bool{color:var(--c-bool)}
.tok-punc{color:var(--c-punc)}
.tok-cmd{color:var(--c-cmd); font-weight:600}
.tok-flag{color:var(--c-flag)}
.tok-url{color:var(--c-url)}
.tok-comment{color:var(--c-comment); font-style:italic}
.tok-kw{color:var(--c-kw)}
.tok-fn{color:var(--c-fn)}
.tok-prop{color:var(--c-key)}
.tok-cont{color:var(--muted)} /* line continuation backslash */

/* response status banner above a json block */
.resp-banner{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; margin:22px 0 -6px; padding:6px 12px; border-radius:8px; border:1px solid}
.resp-banner .rb-code{font-weight:700}
.resp-banner.ok{color:var(--green); border-color:rgba(57,224,139,.3); background:rgba(57,224,139,.06)}
.resp-banner.err{color:var(--red); border-color:rgba(255,106,122,.3); background:rgba(255,106,122,.06)}
.resp-banner.warn{color:var(--amber); border-color:rgba(242,181,68,.3); background:rgba(242,181,68,.06)}

/* ============================================================================
   QUICKSTART STEPS
   ============================================================================ */
.qsteps{margin:24px 0; display:flex; flex-direction:column; gap:0; counter-reset:qs}
.qstep{position:relative; padding:0 0 30px 56px; border-left:1px solid var(--line); margin-left:16px}
.qstep:last-child{border-left:1px solid transparent; padding-bottom:0}
.qstep::before{counter-increment:qs; content:counter(qs); position:absolute; left:-16px; top:-2px; width:32px;height:32px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line-3); color:var(--v1); font-family:var(--mono); font-weight:700; font-size:13px; display:grid; place-items:center; box-shadow:0 0 0 4px var(--bg)}
.qstep h4{margin:0 0 6px; font-family:var(--display); font-weight:600; font-size:16.5px; color:#fff; letter-spacing:-.01em}
.qstep p{margin:0; font-size:14px; color:var(--ink-soft)}
.qstep .codeblock{margin-top:14px}

/* ============================================================================
   ERRORS TABLE
   ============================================================================ */
.errtable{margin:20px 0; display:flex; flex-direction:column; gap:10px}
.errrow{display:grid; grid-template-columns:84px 1fr; gap:16px; border:1px solid var(--line); border-radius:12px; padding:15px 17px; background:rgba(255,255,255,.022); transition:border-color .2s}
.errrow:hover{border-color:var(--line-3)}
.errrow .ecode{font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.02em; line-height:1}
.errrow .ecode small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--muted); margin-top:5px}
.errrow.c401 .ecode{color:var(--amber)} .errrow.c403 .ecode{color:var(--orange)}
.errrow.c422 .ecode{color:var(--cyan)} .errrow.c429 .ecode{color:var(--red)}
.errrow .ebody b{color:#fff; font-weight:600; font-size:14.5px}
.errrow .ebody p{margin:5px 0 0; font-size:13.6px; color:var(--ink-soft); max-width:none}
.errrow .ebody code{font-family:var(--mono); font-size:.85em; background:rgba(255,255,255,.06); padding:.1em .35em; border-radius:5px; color:#D6D8E6}

/* ============================================================================
   RIGHT TOC (on this page)
   ============================================================================ */
.toc{position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto; padding:46px 20px 60px 8px; overscroll-behavior:contain}
.toc-title{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; padding-left:14px}
.toc-list{display:flex; flex-direction:column; gap:1px; border-left:1px solid var(--line); position:relative}
.toc-list a{font-size:12.8px; color:var(--muted); padding:6px 14px; transition:color .16s; position:relative; line-height:1.4}
.toc-list a.sub{padding-left:26px; font-size:12.2px}
.toc-list a:hover{color:var(--ink-soft)}
.toc-list a.active{color:#fff}
.toc-list a.active::before{content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:2px; border-radius:2px; background:var(--grad)}

/* ============================================================================
   FOOTER (inside content col)
   ============================================================================ */
.doc-foot{margin-top:80px; padding-top:32px; border-top:1px solid var(--line)}
.doc-foot-cta{border:1px solid var(--line); border-radius:18px; padding:30px 32px; background:linear-gradient(135deg,rgba(124,92,255,.1),rgba(192,75,224,.04)); position:relative; overflow:hidden}
.doc-foot-cta::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 100% 0%, rgba(124,92,255,.18), transparent 60%); pointer-events:none}
.doc-foot-cta h3{font-family:var(--display); font-weight:700; font-size:23px; letter-spacing:-.02em; color:#fff; position:relative}
.doc-foot-cta p{color:var(--ink-soft); margin:9px 0 18px; max-width:52ch; position:relative}
.doc-foot-cta .fc-btns{display:flex; gap:12px; flex-wrap:wrap; position:relative}
.doc-foot-links{display:flex; justify-content:space-between; align-items:center; margin-top:34px; flex-wrap:wrap; gap:16px}
.doc-foot-links .fl-left{display:flex; align-items:center; gap:14px}
.doc-foot-links .fl-blurb{font-size:12.5px; color:var(--muted); max-width:34ch}
.doc-foot-links .fl-nav{display:flex; gap:20px; flex-wrap:wrap}
.doc-foot-links .fl-nav a{font-size:13px; color:var(--ink-soft)}
.doc-foot-links .fl-nav a:hover{color:#fff}
.doc-foot-bot{margin-top:24px; padding-top:18px; border-top:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--muted)}
.doc-foot-bot .status{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px}
.doc-foot-bot .status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2.2s infinite}

/* ============================================================================
   SEARCH PALETTE (⌘K)
   ============================================================================ */
.search-modal{position:fixed; inset:0; z-index:120; display:none; padding:14vh 16px 16px; justify-content:center; align-items:flex-start}
.search-modal.open{display:flex}
.search-scrim{position:fixed; inset:0; background:rgba(5,5,9,.66); backdrop-filter:blur(5px); animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.search-box{position:relative; width:min(620px,100%); background:var(--panel); border:1px solid var(--line-3); border-radius:16px; box-shadow:0 40px 100px -30px rgba(0,0,0,.85); overflow:hidden; animation:popIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes popIn{from{opacity:0; transform:translateY(-12px) scale(.98)}to{opacity:1; transform:none}}
.search-input-row{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.search-input-row svg{width:18px;height:18px;stroke:var(--muted);stroke-width:2;fill:none;flex:none}
.search-input-row input{flex:1; background:none; border:none; outline:none; color:#fff; font-family:var(--sans); font-size:16px}
.search-input-row input::placeholder{color:var(--muted)}
.search-input-row .esc{font-family:var(--mono); font-size:10.5px; border:1px solid var(--line-3); border-radius:6px; padding:3px 7px; color:var(--muted)}
.search-results{max-height:48vh; overflow-y:auto; padding:8px}
.search-empty{padding:34px 18px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px}
.sr-item{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:10px; cursor:pointer; transition:background .12s}
.sr-item:hover, .sr-item.active{background:rgba(124,92,255,.14)}
.sr-item .sr-ic{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.05);display:grid;place-items:center;flex:none;font-family:var(--mono);font-size:10px;color:var(--accent);border:1px solid var(--line)}
.sr-item .sr-ic.verb-get{color:var(--m-get)} .sr-item .sr-ic.verb-post{color:var(--m-post)} .sr-item .sr-ic.verb-del{color:var(--m-del)}
.sr-item .sr-meta{flex:1; min-width:0}
.sr-item .sr-title{font-size:14px; color:#fff; font-weight:500}
.sr-item .sr-title em{font-style:normal; color:var(--v1); background:rgba(124,92,255,.16); border-radius:3px; padding:0 2px}
.sr-item .sr-sub{font-size:11.5px; color:var(--muted); font-family:var(--mono)}
.sr-item .sr-enter{font-family:var(--mono); font-size:10px; color:var(--faint); opacity:0}
.sr-item.active .sr-enter{opacity:1}
.search-foot{display:flex; align-items:center; gap:16px; padding:10px 16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10.5px; color:var(--faint)}
.search-foot span{display:inline-flex; align-items:center; gap:6px}
.search-foot kbd{font-family:var(--mono); border:1px solid var(--line-3); border-radius:4px; padding:1px 5px; color:var(--muted)}

/* ============================================================================
   MOBILE NAV DRAWER + scrim
   ============================================================================ */
.nav-scrim{position:fixed; inset:0; background:rgba(5,5,9,.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:55}
.nav-scrim.open{opacity:1; visibility:visible}

/* reveal-on-load (staggered) */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.show{opacity:1; transform:none}

/* scroll-to-top */
.totop{position:fixed; bottom:22px; right:22px; width:42px;height:42px; border-radius:11px; border:1px solid var(--line-3); background:rgba(20,20,31,.86); backdrop-filter:blur(8px); display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:.25s; z-index:40}
.totop.show{opacity:1; visibility:visible; transform:none}
.totop:hover{border-color:var(--accent); background:rgba(124,92,255,.14)}
.totop svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1240px){
  :root{--toc:0px}
  .shell{grid-template-columns:var(--sidebar) minmax(0,1fr)}
  .toc{display:none}
  .content{padding:42px 40px 100px}
}
@media (max-width:960px){
  :root{--sidebar:0px}
  .shell{grid-template-columns:1fr}
  .tb-left{min-width:auto}
  .menu-btn{display:flex}
  .tb-status{display:none}
  /* sidebar becomes a drawer */
  .sidebar{position:fixed; top:64px; left:0; bottom:0; width:300px; max-width:86vw; background:var(--bg-1); border-right:1px solid var(--line-3); transform:translateX(-104%); transition:transform .3s cubic-bezier(.2,.8,.2,1); z-index:58; height:auto}
  .sidebar.open{transform:none; box-shadow:30px 0 80px -30px rgba(0,0,0,.8)}
  .nav-link.active::before{left:-12px}
  .content{padding:34px 28px 90px; max-width:none}
  .search-trigger .st-txt{display:none}
  .search-trigger{max-width:46px; justify-content:center; padding:0}
  .search-trigger .kbd{display:none}
}
@media (max-width:620px){
  .topbar-in{padding:0 14px; gap:12px}
  .content{padding:26px 16px 80px}
  .param{grid-template-columns:1fr; gap:6px}
  .param .ptype{margin-top:2px}
  .tb-right .tb-link{display:none}
  .endpoint{padding:12px 13px}
  .endpoint .ep-path{font-size:13.5px; flex-basis:100%; order:3}
  .doc-foot-cta{padding:24px 20px}
  .statusgrid{grid-template-columns:1fr 1fr}
  .cb-pane{font-size:12px}
  .baseurl-row .bu-val{font-size:13px}
}
@media (max-width:420px){
  .statusgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}