/* Cortex Developer Docs — design language: Nativz ink + cyan, Jost UI, JetBrains Mono code */
:root {
  --bg: #0A0D13;
  --surface: #10141D;
  --surface-2: #161B26;
  --line: #232938;
  --cyan: #00AEEF;
  --cyan-t: #5BC7F2;
  --cyan-dim: rgba(0,174,239,0.12);
  --txt: #f1f5f9;
  --txt-2: #cbd5e1;
  --mut: #8d97ab;
  --mut-2: #64748b;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --acc2: #c084fc;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Cross-document view transitions: page-to-page nav fades instead of flashing */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }
/* Background on html (not just body) so the dark paint is instant during navigation */
html { color-scheme: dark; background: var(--bg); overflow-y: scroll; scrollbar-gutter: stable; }
body { font-family: 'Jost', system-ui, sans-serif; background: var(--bg); color: var(--txt); font-size: 15px; -webkit-font-smoothing: antialiased; }
.page-glow { position: fixed; top: -220px; left: 50%; transform: translateX(-38%); width: 900px; height: 480px; background: radial-gradient(ellipse at center, rgba(0,174,239,0.09), transparent 65%); pointer-events: none; z-index: 0; }
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); font-size: 0.88em; color: var(--txt-2); }
p code, .kv code, .mut code { background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }

/* icon (lucide mask tint) */
.ic { display: inline-block; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; flex: none; vertical-align: -2px; }
.ic-a { color: var(--cyan-t); }
.ic-h { width: 22px; height: 22px; color: var(--cyan-t); margin-right: 4px; }

/* ── Top bar ── */
.top { position: sticky; top: 0; z-index: 50; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background: rgba(10,13,19,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-brand { display: flex; align-items: center; gap: 13px; }
.top-brand .brand-logo { height: 19px; width: auto; display: block; }
.top-brand .brand-bar { width: 1px; height: 22px; background: var(--line); }
.top-brand .brand-cortex { font-family: 'Jost', system-ui, sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.24em; color: var(--txt); margin-right: -0.24em; }
.top-sub { font-weight: 500; font-size: 13px; color: var(--mut); margin-left: 2px; padding-left: 11px; border-left: 1px solid var(--line); white-space: nowrap; }
.top-right { display: flex; align-items: center; gap: 16px; }
.top-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--mut); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.top-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(52,211,153,0.7); }
.top-key { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mut); transition: color 0.2s; }
.top-key:hover { color: var(--cyan-t); }
.top-avatar { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--cyan-dim); color: var(--cyan-t); font-size: 11px; font-weight: 700; align-items: center; justify-content: center; border: 1px solid rgba(0,174,239,0.3); }

/* ── Frame ── */
.frame { display: flex; min-height: calc(100vh - 56px); position: relative; z-index: 1; }
.main { flex: 1; min-width: 0; display: flex; gap: 40px; justify-content: center; padding: 40px 44px; }
.main-col { flex: 1; min-width: 0; max-width: 780px; }

/* ── TOC rail ── */
.toc { width: 190px; flex: none; position: sticky; top: 96px; align-self: flex-start; display: flex; flex-direction: column; gap: 2px; }
.toc-h { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut-2); margin-bottom: 8px; }
.toc a { font-size: 12.5px; color: var(--mut); padding: 5px 12px; border-left: 2px solid var(--line); transition: color 0.15s, border-color 0.15s; line-height: 1.4; }
.toc a:hover { color: var(--txt-2); }
.toc a.on { color: var(--cyan-t); border-left-color: var(--cyan); }
@media (max-width: 1280px) { .toc { display: none; } }

/* ── Sidebar ── */
.sb { width: 264px; flex: none; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; height: calc(100vh - 56px); position: sticky; top: 56px; }
.sb-head { padding: 18px 16px 13px; border-bottom: 1px solid var(--line); }
.sb-head a { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.sb-head a:hover { color: var(--cyan-t); }
.sb-nav { flex: 1; overflow-y: auto; padding: 14px 8px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.sb-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut-2); padding: 0 12px 6px; }
.sb-link { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 9px; font-size: 12.5px; color: var(--mut); transition: color 0.15s, background 0.15s; }
.sb-link .ic { width: 14px; height: 14px; }
.sb-link span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-link em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--mut-2); }
.sb-link:hover { color: var(--txt-2); background: rgba(255,255,255,0.03); }
.sb-link.on { background: var(--cyan-dim); color: var(--cyan-t); }
.sb-link.on em { color: rgba(91,199,242,0.7); }
.sb-filter { position: relative; margin: 0 4px 8px; }
.sb-filter .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--mut-2); }
.sb-filter input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px 7px 30px; font-family: inherit; font-size: 12px; color: var(--txt); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.sb-filter input::placeholder { color: var(--mut-2); }
.sb-filter input:focus { border-color: rgba(0,174,239,0.5); box-shadow: 0 0 0 3px rgba(0,174,239,0.12); }
.sb-secs { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }
.sb-foot { padding: 12px 16px; border-top: 1px solid var(--line); }
.sb-foot a { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); }
.sb-foot a:hover { color: var(--cyan-t); }
.sb-foot .ic { width: 12px; height: 12px; }

/* ── Page head ── */
.page-head { margin-bottom: 36px; padding-top: 8px; }
.page-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.018em; }
.page-head h1 .ic-h { vertical-align: -3px; margin-right: 10px; }
.page-head h1 em { font-style: normal; color: var(--txt); background-image: linear-gradient(rgba(0,173,239,0.55), rgba(0,173,239,0.55)); background-repeat: no-repeat; background-size: 100% 0.45em; background-position: 0 78%; padding: 0 0.08em; }
.page-head > p { font-size: 14.5px; color: var(--mut); margin-top: 10px; max-width: 62ch; line-height: 1.65; }
.eyebrow { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(91,199,242,0.85); margin-bottom: 10px; }
.eyebrow .ic { width: 12px; height: 12px; }
.eyebrow a:hover { color: var(--cyan-t); text-decoration: underline; }
.crumb { color: var(--mut-2); }
.head-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.agent-btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--txt); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.agent-btn:hover { border-color: rgba(0,174,239,0.45); box-shadow: 0 0 24px rgba(0,174,239,0.1); transform: translateY(-1px); }
.agent-btn.primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.agent-btn.primary .ic { color: #fff; }
.agent-btn.primary .agent-sub { color: rgba(255,255,255,0.75); border-left-color: rgba(255,255,255,0.35); }
.agent-btn.primary:hover { box-shadow: 0 0 28px rgba(0,174,239,0.35); }
.agent-btn .ic { color: var(--cyan-t); }
.agent-sub { font-family: var(--mono); font-size: 10px; color: var(--mut-2); border-left: 1px solid var(--line); padding-left: 9px; }
.agent-note { display: flex; gap: 10px; align-items: flex-start; background: var(--cyan-dim); border: 1px solid rgba(0,174,239,0.22); border-radius: 12px; padding: 12px 14px; margin-top: 14px; }
.agent-note .ic { color: var(--cyan-t); margin-top: 1px; }
.agent-note p { font-size: 12px; color: rgba(91,199,242,0.92); line-height: 1.55; }

/* ── Cards ── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; margin-bottom: 22px; }
.card-flush { padding: 0; overflow: hidden; }
.card h2, .card h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
.free-h { font-size: 14.5px; font-weight: 600; margin-bottom: 14px; }
section > .free-h { margin-top: 6px; }
.mut { font-size: 12.5px; color: var(--mut); line-height: 1.65; margin-bottom: 12px; }
.mut b { color: var(--txt-2); font-weight: 600; }
.card a:not(.cb-copy):not(.agent-btn) { color: var(--cyan-t); }
.card a:not(.cb-copy):not(.agent-btn):hover { text-decoration: underline; }
.inline-link { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; margin-top: 4px; }
.inline-link .ic { width: 12px; height: 12px; }

/* steps */
.steps { display: flex; flex-direction: column; gap: 20px; }
.step-row { display: flex; gap: 12px; }
.step-n { width: 24px; height: 24px; border-radius: 50%; background: var(--cyan-dim); color: var(--cyan-t); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.step-body { flex: 1; min-width: 0; padding-top: 2px; }
.step-body p { font-size: 13.5px; color: var(--txt-2); line-height: 1.6; margin-bottom: 10px; }

/* map cards */
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.map-card { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px; transition: border-color 0.2s, box-shadow 0.2s; }
.map-card:hover { border-color: rgba(0,174,239,0.4); box-shadow: 0 0 28px rgba(0,174,239,0.07); }
.map-ic { display: inline-flex; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); align-items: center; justify-content: center; flex: none; color: var(--mut); transition: color 0.2s; }
.map-card:hover .map-ic { color: var(--cyan-t); }
.map-body { flex: 1; min-width: 0; }
.map-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.map-d { display: block; font-size: 11.5px; color: var(--mut); margin-top: 3px; line-height: 1.5; }
.map-arrow { color: var(--mut-2); opacity: 0.4; margin-top: 4px; transition: opacity 0.2s, color 0.2s; }
.map-card:hover .map-arrow { opacity: 1; color: var(--cyan-t); }
.badge { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--cyan-t); background: var(--cyan-dim); border-radius: 999px; padding: 1px 7px; }

/* code blocks */
.cb { background: #07090E; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 10px 0; }
.cb-h { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; border-bottom: 1px solid #1A1F2C; }
.cb-lab { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut-2); white-space: nowrap; }
.cb-lab .ic { width: 11px; height: 11px; }
.cb-h-bare { justify-content: flex-end; border-bottom: none; padding-bottom: 0; }
.cb-copy { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 10.5px; color: var(--mut-2); background: none; border: none; cursor: pointer; transition: color 0.15s; }
.cb-copy:hover { color: var(--cyan-t); }
.cb-copy.did { color: var(--ok); }
.cb-copy .ic { width: 11px; height: 11px; }
.cb pre { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #B6C2D6; padding: 12px 14px; overflow-x: auto; }
.tc { color: #586174; }
.ts { color: #8AD8B0; }
.tk { color: #5BC7F2; }
.tp { color: #F1F5F9; font-weight: 600; }
.tf { color: #C8A8F9; }

/* tabs */
.tabs { margin-top: 4px; }
.tab-row { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 0; }
.tab { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--mut); background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 12px 9px; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
.tab:hover { color: var(--txt-2); }
.tab.on { color: var(--cyan-t); border-bottom-color: var(--cyan); }
.tab-pane { display: none; }
.tab-pane.on { display: block; }

/* errors / kv */
.errs { display: flex; flex-direction: column; gap: 7px; }
.err-row { display: flex; gap: 14px; font-size: 12.5px; color: var(--mut); }
.err-row code { width: 34px; flex: none; color: var(--txt-2); }
.err-row code.err-2 { color: var(--ok); }
.err-row code.err-4 { color: var(--warn); }
.err-row code.err-5 { color: var(--danger); }
.kv p { font-size: 12.5px; color: var(--mut); line-height: 1.7; margin-bottom: 7px; }
.kv b { color: var(--txt-2); font-weight: 600; }

/* method badges */
.mb { display: inline-flex; align-items: center; justify-content: center; width: 58px; flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border-radius: 6px; padding: 3px 0; }
.mb-get { background: rgba(52,211,153,0.14); color: var(--ok); }
.mb-post { background: var(--cyan-dim); color: var(--cyan-t); }
.mb-patch { background: rgba(251,191,36,0.14); color: var(--warn); }
.mb-put { background: rgba(192,132,252,0.14); color: var(--acc2); }
.mb-delete { background: rgba(248,113,113,0.14); color: var(--danger); }

.ep-group-h { display: flex; align-items: center; gap: 9px; margin-top: 30px; font-size: 15px; }
/* endpoint accordion */
.ep-acc { border-bottom: 1px solid var(--line); }
.ep-acc:last-child { border-bottom: none; }
.ep-acc summary { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none; transition: background 0.15s; }
.ep-acc summary::-webkit-details-marker { display: none; }
.ep-acc summary:hover { background: rgba(255,255,255,0.02); }
.ep-path { font-size: 13px; color: var(--txt); flex: none; white-space: nowrap; }
.ep-desc { font-size: 12px; color: var(--mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ep-chev { width: 13px; height: 13px; color: var(--mut-2); transition: transform 0.2s; }
.ep-acc[open] .ep-chev { transform: rotate(180deg); }
.ep-detail { padding: 4px 16px 18px 86px; }
.auth-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut); margin-bottom: 6px; }
.auth-row .ic { width: 12px; height: 12px; color: var(--warn); }
.usewhen { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.usewhen b { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--cyan-t); flex: none; margin-top: 2px; }
.usewhen span { font-size: 12px; color: var(--mut); line-height: 1.6; }
.how-h { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--mut-2); margin: 14px 0 6px; }
.mis { display: flex; gap: 9px; align-items: flex-start; border-left: 2px solid rgba(248,113,113,0.4); background: rgba(248,113,113,0.05); border-radius: 0 8px 8px 0; padding: 9px 12px; font-size: 12px; color: var(--txt-2); line-height: 1.55; margin-bottom: 6px; }
.mis .ic { width: 13px; height: 13px; color: var(--danger); margin-top: 1px; }

/* MCP page */
.srv { margin: 40px 0; }
.srv-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.srv-head .map-ic { width: 42px; height: 42px; color: var(--cyan-t); }
.srv-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.srv-head .mut { margin: 2px 0 0; }
.ov-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.ov-grid > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.ov-grid b { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--mut-2); margin-bottom: 4px; }
.ov-grid p { font-size: 12px; color: var(--txt-2); line-height: 1.55; }
.rail { position: relative; }
.rail::before { content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.rail-step { position: relative; display: flex; gap: 12px; margin-bottom: 18px; }
.rail-step:last-child { margin-bottom: 0; }
.rail-n { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); color: var(--mut); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 0 0 4px var(--surface); }
.rail-a .rail-n { background: linear-gradient(var(--cyan-dim), var(--cyan-dim)), var(--surface); color: var(--cyan-t); }
.rail-body { flex: 1; min-width: 0; padding-top: 2px; }
.rail-body > p { font-size: 13px; font-weight: 600; color: var(--txt); margin-bottom: 6px; }
.tool-card { margin-bottom: 14px; }
.tool-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.tool-head code { font-size: 13.5px; font-weight: 600; color: var(--cyan-t); background: none; border: none; padding: 0; }
.tool-head span { font-size: 13.5px; font-weight: 600; color: var(--txt); }
.fields { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.field { padding: 10px 13px; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: none; }
.field-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.field-l code { font-size: 12px; color: var(--txt); background: none; border: none; padding: 0; }
.ftype { font-family: var(--mono); font-size: 9.5px; color: var(--mut); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.freq { font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--warn); background: rgba(251,191,36,0.13); border-radius: 4px; padding: 2px 6px; }
.field > p { font-size: 11.5px; color: var(--mut); line-height: 1.5; }
.xlink { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.xlink:hover { border-color: rgba(0,174,239,0.4); }
.xlink .mut { margin: 3px 0 0; }
.xlink > .ic { color: var(--mut-2); }
.xlink:hover > .ic { color: var(--cyan-t); }

@media (max-width: 1000px) {
  .sb { display: none; }
  .main { padding: 28px 20px; }
  .map-grid, .ov-grid { grid-template-columns: 1fr; }
  .ep-desc { display: none; }
  .ep-detail { padding-left: 16px; }
  .top-pill, .top-key { display: none; }
}

.top-login { font-size: 13px; font-weight: 600; color: var(--txt); border: 1px solid var(--line); border-radius: 9px; padding: 7px 16px; transition: border-color 0.2s, transform 0.2s; white-space: nowrap; }
.top-login:hover { border-color: var(--cyan); transform: translateY(-1px); }

/* stat chips */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--mut); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }
.stat b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--cyan-t); }
.sec-anchor { scroll-margin-top: 80px; }
.sec-anchor:target { border-color: rgba(0,174,239,0.55); box-shadow: 0 0 32px rgba(0,174,239,0.12); }
.sample-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--warn); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); border-radius: 999px; padding: 3px 10px; margin-left: 4px; white-space: nowrap; }

/* gating */
.gate { text-align: center; padding: 40px 28px; }
.gate h2 { font-size: 19px; margin: 14px 0 10px; }
.gate-lock { display: inline-flex; width: 52px; height: 52px; border-radius: 14px; background: var(--cyan-dim); border: 1px solid rgba(0,174,239,0.3); align-items: center; justify-content: center; }
.gate-lock .ic { width: 22px; height: 22px; color: var(--cyan-t); }
.gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.gate-note { font-size: 12px; color: var(--mut-2); margin-top: 16px; }
.gate-note a { color: var(--cyan-t); }
.gate-sm { text-align: left; padding: 22px; }
.gate-sm .gate-actions { justify-content: flex-start; align-items: center; }
.mock-link { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--mut); border: 1px dashed var(--line); border-radius: 12px; padding: 13px; margin-top: 18px; transition: color 0.2s, border-color 0.2s; }
.mock-link:hover { color: var(--cyan-t); border-color: rgba(0,174,239,0.4); }
.mock-link .ic { width: 13px; height: 13px; }
.mock-inline { margin-top: 0; padding: 9px 16px; display: inline-flex; }
.lock-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); border-radius: 999px; padding: 3px 10px; vertical-align: 3px; margin-left: 6px; }
.lock-chip .ic { width: 10px; height: 10px; }
.admin-banner { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 12.5px; color: #FBD38D; background: rgba(251,191,36,0.08); border-bottom: 1px solid rgba(251,191,36,0.22); padding: 9px 20px; position: relative; z-index: 2; }
.admin-banner .ic { width: 13px; height: 13px; color: var(--warn); }
.admin-banner b { font-weight: 700; }
.admin-banner a { color: var(--cyan-t); text-decoration: underline; }
.top-admin { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--warn); border: 1px solid rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.top-admin .ic { width: 12px; height: 12px; }
.sb-eyebrow .ic { width: 10px; height: 10px; vertical-align: -1px; margin-left: 3px; color: var(--mut-2); }
.ov-2 { grid-template-columns: 1fr 1fr; }
.ov-grid b .ic { width: 11px; height: 11px; margin-right: 5px; color: var(--cyan-t); }
.ov-grid a { color: var(--cyan-t); }
@media (max-width: 880px) { .ov-2 { grid-template-columns: 1fr; } }

/* client picker */
.pick-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px; border-bottom: none; }
.tab.pick { border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--txt-2); background: var(--surface-2); margin-bottom: 0; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s; }
.tab.pick:hover { transform: translateY(-1px); color: var(--txt); }
.tab.pick.on { border-color: rgba(0,174,239,0.55); background: var(--cyan-dim); color: var(--cyan-t); }
.tab.pick .ic { width: 13px; height: 13px; }

.pick-logo { width: 15px; height: 15px; border-radius: 4px; object-fit: contain; flex: none; }

.mcp-logo { filter: grayscale(1) brightness(1.6); }

/* chat demo */
.chat-demo { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.chat-msg { display: flex; }
.chat-msg span { font-size: 13.5px; line-height: 1.55; padding: 10px 14px; border-radius: 14px; max-width: 78%; }
.chat-msg.user { justify-content: flex-end; }
.chat-msg.user span { background: var(--cyan-dim); border: 1px solid rgba(0,174,239,0.3); color: var(--txt); border-bottom-right-radius: 4px; }
.chat-msg.bot span { background: var(--surface-2); border: 1px solid var(--line); color: var(--txt-2); border-bottom-left-radius: 4px; }
.chat-tool { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--mut); border: 1px dashed var(--line); border-radius: 999px; padding: 4px 12px; margin-left: 4px; }
.chat-tool .ic { width: 11px; height: 11px; color: var(--cyan-t); }
.chat-tool em { font-style: normal; color: var(--mut-2); padding-left: 7px; border-left: 1px solid var(--line); }

.pick-ic { width: 14px !important; height: 14px !important; }

/* compact code blocks inside walkthrough rails */
.rail .cb { margin: 8px 0 2px; border-radius: 8px; }
.rail .cb pre { padding: 9px 12px; font-size: 11.5px; line-height: 1.5; }
.rail .cb-h { padding: 4px 6px; }
.rail .cb-h-bare { position: absolute; right: 4px; top: 4px; padding: 0; background: none; border: none; }
.rail .cb { position: relative; }
.rail .cb-copy { font-size: 10px; padding: 4px 8px; }
.rail .cb-copy .ic { width: 10px; height: 10px; }

/* quickstart paths */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.path-card { padding: 22px 20px; }
.path-card .map-d { margin-top: 6px; line-height: 1.55; }
.badge-rec { color: var(--cyan-t); background: var(--cyan-dim); border-color: rgba(0,174,239,0.35); }
@media (max-width: 880px) { .path-grid { grid-template-columns: 1fr; } }

/* try-it prompt tiles */
.try-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.try-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--txt-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; cursor: pointer; transition: border-color 0.15s, color 0.15s, transform 0.15s; }
.try-tile:hover { border-color: rgba(0,174,239,0.45); color: var(--txt); transform: translateY(-1px); }
.try-tile .ic { width: 12px; height: 12px; color: var(--mut-2); flex: none; transition: color 0.15s; }
.try-tile:hover .ic { color: var(--cyan-t); }
@media (max-width: 880px) { .try-grid { grid-template-columns: 1fr; } }

/* connect-from dropdown */
.pick-select-wrap { position: relative; display: flex; align-items: center; gap: 10px; max-width: 320px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 14px; margin: 16px 0 20px; cursor: pointer; transition: border-color 0.15s; }
.pick-select-wrap:hover, .pick-select-wrap:focus-within { border-color: rgba(0,174,239,0.45); }
.pick-select-wrap > .ic { width: 14px; height: 14px; color: var(--cyan-t); flex: none; }
.pick-select-wrap .pick-chev { color: var(--mut-2); position: absolute; right: 12px; pointer-events: none; }
.pick-select-wrap select { appearance: none; -webkit-appearance: none; flex: 1; background: transparent; border: none; outline: none; color: var(--txt); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 11px 22px 11px 0; cursor: pointer; }
.pick-select-wrap select option { background: #0a1620; color: #e8eef4; }

/* custom dropdown */
.dd { position: relative; max-width: 300px; margin: 16px 0 20px; }
.dd-btn { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--txt); cursor: pointer; transition: border-color 0.15s; }
.dd-btn:hover, .dd.open .dd-btn { border-color: rgba(0,174,239,0.45); }
.dd-ic { width: 14px; height: 14px; color: var(--cyan-t); flex: none; }
.dd-chev { width: 13px; height: 13px; color: var(--mut-2); margin-left: auto; transition: transform 0.18s; }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: #0a1620; border: 1px solid var(--line); border-radius: 12px; padding: 5px; box-shadow: 0 18px 44px rgba(0,0,0,0.5); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.dd.open .dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.dd-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; border-radius: 8px; padding: 9px 10px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--txt-2); cursor: pointer; text-align: left; transition: background 0.12s, color 0.12s; }
.dd-opt:hover { background: rgba(0,174,239,0.08); color: var(--txt); }
.dd-opt .dd-check { width: 12px; height: 12px; margin-left: auto; color: var(--cyan-t); opacity: 0; }
.dd-opt.on { color: var(--cyan-t); }
.dd-opt.on .dd-check { opacity: 1; }

.rail-done, .rail-a .rail-n.rail-done { background: linear-gradient(rgba(52,211,153,0.12), rgba(52,211,153,0.12)), var(--surface); border: 1px solid rgba(52,211,153,0.45); color: var(--ok); }
.rail-done .ic { width: 11px; height: 11px; color: var(--ok); }

/* quickstart path choice */
.path-pick { display: flex; align-items: flex-start; gap: 14px; text-align: left; font-family: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.path-pick:hover { transform: translateY(-1px); border-color: rgba(0,174,239,0.35); }
.path-pick.on { border-color: rgba(0,174,239,0.6); background: var(--cyan-dim); box-shadow: 0 0 28px rgba(0,174,239,0.08); }
.path-pick .map-t { color: var(--txt); }
.path-pick .map-d { margin-top: 5px; line-height: 1.55; }

#pick { margin-bottom: 28px; }
#pick .path-grid { gap: 16px; }

/* one-line code row */
.cb-inline { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 0; margin-top: 8px; border-radius: 9px; }
.cb-inline pre { flex: 1; padding: 9px 12px; font-size: 12px; white-space: nowrap; overflow-x: auto; }
.cb-inline .cb-copy { flex: none; }

/* copy-for-AI feedback */
.agent-btn.copied { border-color: rgba(52,211,153,0.55); color: var(--ok); animation: copyPop 0.32s cubic-bezier(0.34,1.56,0.64,1); }
.agent-btn.copied .ic { color: var(--ok); }
.agent-btn.copied .agent-sub { color: rgba(52,211,153,0.75); border-left-color: rgba(52,211,153,0.35); }
@keyframes copyPop { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* nested sidebar links */
.sb-sub { display: flex; flex-direction: column; margin-left: 17px; padding-left: 7px; border-left: 1px solid var(--line); }
.sb-sub .sb-link { font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }

.key-btn { margin: 12px 0 0; text-decoration: none; line-height: normal; }

/* stuck? footer note */
.stuck-note { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--mut); background: rgba(251,191,36,0.05); border: 1px solid rgba(251,191,36,0.22); border-radius: 12px; padding: 12px 16px; transition: border-color 0.15s, background 0.15s; }
.stuck-note .ic { width: 14px; height: 14px; color: var(--warn); flex: none; }
.stuck-note .ic:last-child { margin-left: auto; color: var(--mut-2); transition: transform 0.15s, color 0.15s; }
.stuck-note b { color: var(--txt-2); font-weight: 600; }
.stuck-note:hover { border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.08); }
.stuck-note:hover .ic:last-child { transform: translateX(2px); color: var(--warn); }

/* inline copy-for-AI action */
.copy-ai-inline { font-family: inherit; font-size: inherit; font-weight: 600; color: var(--cyan-t); background: none; border: none; padding: 0; cursor: pointer; border-bottom: 1px dashed rgba(0,174,239,0.5); transition: color 0.15s; }
.copy-ai-inline:hover { color: #7fd6f7; }
.copy-ai-inline.did { color: var(--ok); border-bottom-color: rgba(52,211,153,0.5); }

/* card addendum strip */
.card-addendum { display: flex; align-items: center; gap: 9px; margin: 16px -22px -22px; padding: 12px 22px; border-top: 1px solid var(--line); background: rgba(255,255,255,0.015); border-radius: 0 0 14px 14px; font-size: 12.5px; color: var(--mut); }
.card-addendum .ic { width: 13px; height: 13px; color: var(--mut-2); flex: none; }

/* route label */
.path-label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mut); margin: 0 0 10px; }