/* ============================================================================
   Firstpass — design system (landing + docs). Light default, first-class dark.
   One accent: mint #19E3B1. System font stack, no external loads, no build.
   ========================================================================== */

/* ---- tokens ---------------------------------------------------------------
   Light is the base. Dark is applied when the OS prefers it (JS-off path) or
   when the user has explicitly chosen it (html[data-theme=dark], set by the
   inline head script before first paint). Explicit choice always wins.        */
:root{
  --accent:#19E3B1;              /* the single accent, used as-is on dark/fills */
  --accent-strong:#0c8f6c;       /* accessible accent for text/links on light  */
  --accent-soft:rgba(25,227,177,.12);
  --accent-line:rgba(25,227,177,.34);

  --bg:#ffffff;
  --bg-subtle:#f7f8f9;
  --surface:#ffffff;
  --surface-2:#f6f7f8;
  --surface-3:#f0f2f3;
  --code-bg:#f7f8f9;
  --code-ink:#1b2733;

  --text:#0a0b0d;
  --text-2:#51555c;
  --text-3:#727680;
  --text-inv:#ffffff;

  --border:rgba(10,12,16,.10);
  --border-2:rgba(10,12,16,.16);
  --border-3:rgba(10,12,16,.24);

  --red:#e5484d;
  --amber:#c98a12;
  --blue:#3b7ddd;
  --shadow:0 1px 2px rgba(10,12,16,.04),0 8px 30px -18px rgba(10,12,16,.28);
  --shadow-lg:0 24px 60px -32px rgba(10,12,16,.32);

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;

  --r:10px; --r-sm:7px; --r-lg:16px;
  --nav-h:60px;
  --maxw:1280px;

  /* diagram/chart semantic colors — flip in dark below */
  --d-stroke:#c3c9d2;            /* hairline connectors                        */
  --d-fill:#ffffff;             /* node fill                                   */
  --d-fill-2:#f4f6f8;           /* alt node fill                               */
  --d-ink:#20242b;              /* diagram text                                */
  --d-ink-mut:#6a7280;          /* diagram muted text                          */
  --d-grid:rgba(10,12,16,.08);  /* chart gridlines                            */
  --d-pass:#19b98f;             /* good/served (accessible on light)          */
  --d-fail:#e5484d;             /* fail/escalate                              */
  --d-warn:#c98a12;             /* mixed/gate                                 */
  --d-track:#e7eaed;            /* bar track                                  */
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --bg:#08090b; --bg-subtle:#0b0d10; --surface:#0e1013; --surface-2:#14171b;
    --surface-3:#191d22; --code-bg:#0e1116; --code-ink:#d7dbe0;
    --text:#ededee; --text-2:#a2a7ae; --text-3:#7b818b; --text-inv:#08090b;
    --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16); --border-3:rgba(255,255,255,.24);
    --accent-strong:#3ff0c2; --accent-soft:rgba(25,227,177,.13); --accent-line:rgba(25,227,177,.32);
    --red:#ff6166; --amber:#f5b544; --blue:#6ea8ff;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 20px 50px -30px rgba(0,0,0,.8);
    --shadow-lg:0 30px 70px -40px rgba(0,0,0,.85);
    --d-stroke:#38414d; --d-fill:#12161c; --d-fill-2:#171c23; --d-ink:#e6edf3;
    --d-ink-mut:#8b95a2; --d-grid:rgba(255,255,255,.09); --d-pass:#19E3B1; --d-fail:#ff6166;
    --d-warn:#f5b544; --d-track:#22272e;
  }
}
:root[data-theme="dark"]{
  --bg:#08090b; --bg-subtle:#0b0d10; --surface:#0e1013; --surface-2:#14171b;
  --surface-3:#191d22; --code-bg:#0e1116; --code-ink:#d7dbe0;
  --text:#ededee; --text-2:#a2a7ae; --text-3:#7b818b; --text-inv:#08090b;
  --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.16); --border-3:rgba(255,255,255,.24);
  --accent-strong:#3ff0c2; --accent-soft:rgba(25,227,177,.13); --accent-line:rgba(25,227,177,.32);
  --red:#ff6166; --amber:#f5b544; --blue:#6ea8ff;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 20px 50px -30px rgba(0,0,0,.8);
  --shadow-lg:0 30px 70px -40px rgba(0,0,0,.85);
  --d-stroke:#38414d; --d-fill:#12161c; --d-fill-2:#171c23; --d-ink:#e6edf3;
  --d-ink-mut:#8b95a2; --d-grid:rgba(255,255,255,.09); --d-pass:#19E3B1; --d-fail:#ff6166;
  --d-warn:#f5b544; --d-track:#22272e;
}

/* ---- reset / base --------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html{scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  letter-spacing:-.006em;overflow-x:hidden}
a{color:var(--accent-strong);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
h1,h2,h3,h4{letter-spacing:-.022em;line-height:1.15;color:var(--text);font-weight:640;margin:0}
p{margin:0 0 16px}
code,kbd,pre{font-family:var(--mono)}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:10px 16px;
  border:1px solid var(--border-2);border-radius:8px;z-index:200}
.skip:focus{left:12px;top:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---- top navigation (shared) --------------------------------------------- */
.topnav{position:sticky;top:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border)}
.topnav .bar{display:flex;align-items:center;gap:20px;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:660;font-size:16px;letter-spacing:-.02em;color:var(--text)}
.brand:hover{text-decoration:none}
.brand svg{display:block}
.brand .ver{font:500 11px/1 var(--mono);color:var(--text-3);border:1px solid var(--border-2);
  border-radius:5px;padding:3px 6px;letter-spacing:0}
.navlinks{display:flex;align-items:center;gap:4px;margin-left:8px}
.navlinks a{color:var(--text-2);font-size:14px;font-weight:480;padding:7px 11px;border-radius:7px;letter-spacing:-.01em}
.navlinks a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.navlinks a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.nav-sp{flex:1}
.nav-right{display:flex;align-items:center;gap:8px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--border);color:var(--text-2);transition:.15s}
.icon-btn:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}
.icon-btn svg{width:17px;height:17px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-toggle .sun{display:none}
  :root:not([data-theme]) .theme-toggle .moon{display:block}}
.gh-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--text-2);padding:7px 11px;border-radius:7px}
.gh-link:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:540;font-size:14px;
  padding:9px 16px;border-radius:8px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);
  cursor:pointer;transition:.16s ease;white-space:nowrap}
.btn:hover{border-color:var(--border-3);background:var(--surface-2);text-decoration:none}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:580}
.btn.primary:hover{opacity:.88;background:var(--text)}
.btn.accent{background:var(--accent);color:#04140f;border-color:var(--accent);font-weight:600}
.btn.accent:hover{opacity:.9;background:var(--accent)}
.btn.lg{padding:12px 22px;font-size:15px}
.menu-btn{display:none}
@media (max-width:900px){
  .navlinks{display:none}
  .gh-link .txt{display:none}
  .menu-btn{display:inline-grid}
}

/* mobile drawer for top nav (landing) */
.mobile-nav{display:none;border-bottom:1px solid var(--border);background:var(--surface);padding:10px 24px 16px}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:11px 8px;color:var(--text-2);font-size:15px;border-bottom:1px solid var(--border)}
.mobile-nav a:last-child{border-bottom:0}

/* ============================================================================
   LANDING
   ========================================================================== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:1080px;margin:0 auto;padding:0 24px}
section{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);letter-spacing:.02em;
  color:var(--accent-strong);text-transform:uppercase;margin:0 0 18px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

.hero{padding:88px 0 40px;text-align:center;position:relative}
.hero-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at 50% -2%,var(--accent-soft),transparent 68%)}
.pill{display:inline-flex;align-items:center;gap:9px;font:500 13px/1 var(--mono);color:var(--text-2);
  border:1px solid var(--border-2);border-radius:999px;padding:7px 15px;background:var(--surface);
  box-shadow:var(--shadow);margin-bottom:30px}
.pill b{color:var(--accent-strong);font-weight:600}
h1.title{font-size:clamp(40px,6vw,72px);font-weight:680;letter-spacing:-.04em;line-height:1.02;
  margin:0 auto;max-width:15ch;text-wrap:balance}
.grad{background:linear-gradient(96deg,var(--text),var(--accent-strong));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .sub{font-size:clamp(17px,1.8vw,20px);color:var(--text-2);max-width:60ch;margin:24px auto 0;
  line-height:1.6;text-wrap:balance}
.hero .sub b{color:var(--text);font-weight:580}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:36px 0 0}
.hero-trust{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;margin:34px 0 0;
  font:500 13px/1.4 var(--mono);color:var(--text-3)}
.hero-trust b{color:var(--text-2);font-weight:600}
.hero-trust span{display:inline-flex;align-items:center;gap:8px}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* terminal */
.term{max-width:720px;margin:56px auto 0;border:1px solid var(--border-2);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg);text-align:left}
.term .bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border);
  font:500 12px/1 var(--mono);color:var(--text-3);background:var(--surface-2)}
.term .bar i{width:11px;height:11px;border-radius:50%;display:inline-block}
.term .bar .d1{background:#ff5f56}.term .bar .d2{background:#ffbd2e}.term .bar .d3{background:#27c93f}
.term .bar span{margin-left:10px}
.term .body{padding:18px 20px 22px;font:400 13px/1.85 var(--mono);min-height:270px;color:var(--text-2)}
.term .ln{display:flex;gap:10px;white-space:pre-wrap;word-break:break-word}
.term .pre{color:var(--text-3);flex:0 0 auto}
.c-mut{color:var(--text-3)}.c-mint{color:var(--accent-strong)}.c-amber{color:var(--amber)}
.c-red{color:var(--red)}.c-ink{color:var(--text)}.c-blue{color:var(--blue)}
.term .ln.anim{opacity:0;transform:translateY(3px);animation:appear .3s forwards}
@keyframes appear{to{opacity:1;transform:none}}
.cursor{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* section headings on landing */
.sec{padding:72px 0}
.sec-head{max-width:64ch}
.sec h2{font-size:clamp(28px,3.6vw,42px);font-weight:660;letter-spacing:-.032em}
.sec .lead{color:var(--text-2);font-size:18px;max-width:62ch;margin:16px 0 0}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.stats .st{padding:28px 24px;border-right:1px solid var(--border)}
.stats .st:last-child{border-right:0}
.stats .n{font-size:34px;font-weight:680;letter-spacing:-.03em;color:var(--text)}
.stats .n .u{font-size:18px;color:var(--text-3);font-weight:560}
.stats .l{color:var(--text-2);font-size:13.5px;margin-top:6px;line-height:1.45}
@media (max-width:820px){.stats{grid-template-columns:1fr 1fr}.stats .st:nth-child(2){border-right:0}
  .stats .st:nth-child(1),.stats .st:nth-child(2){border-bottom:1px solid var(--border)}}
@media (max-width:480px){.stats{grid-template-columns:1fr}.stats .st{border-right:0;border-bottom:1px solid var(--border)}
  .stats .st:last-child{border-bottom:0}}

/* cards */
.cards{display:grid;gap:18px;margin-top:44px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.card:hover{border-color:var(--border-2);box-shadow:var(--shadow)}
.card .ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-strong)}
.card h3{font-size:17px;font-weight:600;margin:0 0 8px}
.card p{color:var(--text-2);font-size:14.5px;line-height:1.6;margin:0}
.card .step-n{font:600 12px/1 var(--mono);color:var(--accent-strong);margin-bottom:14px}

/* vs / compare */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:40px;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs .col{padding:32px}
.vs .col.a{background:var(--surface-2)}
.vs .col.b{background:var(--surface);border-left:1px solid var(--border)}
@media (max-width:760px){.vs .col.b{border-left:0;border-top:1px solid var(--border)}}
.vs .tag{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--mono);padding:6px 10px;
  border-radius:6px;margin-bottom:18px;text-transform:uppercase;letter-spacing:.03em}
.vs .a .tag{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.vs .b .tag{color:var(--accent-strong);background:var(--accent-soft)}
.vs h3{font-size:19px;margin:0 0 18px;font-weight:620}
.vs ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.vs li{display:flex;gap:11px;font-size:14.5px;color:var(--text-2);line-height:1.5}
.vs li .m{flex:0 0 auto;font-weight:700;margin-top:1px}
.vs .a li .m{color:var(--red)}.vs .b li .m{color:var(--accent-strong)}
.vs .b li{color:var(--text)}

/* install tabs */
.install{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin-top:36px}
.tabs{display:flex;gap:2px;padding:8px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap}
.tab{font:500 13px/1 var(--sans);padding:8px 14px;border-radius:7px;border:1px solid transparent;background:transparent;
  color:var(--text-2);cursor:pointer}
.tab[aria-selected="true"]{background:var(--surface);color:var(--text);border-color:var(--border)}
.tabpanel{display:none}.tabpanel.active{display:block}

/* landing footer */
.foot{border-top:1px solid var(--border);margin-top:80px;padding:48px 0 60px;background:var(--bg-subtle)}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot h4{font-size:13px;color:var(--text-3);font-weight:600;margin:0 0 14px;text-transform:uppercase;letter-spacing:.04em}
.foot a{display:block;color:var(--text-2);font-size:14px;padding:5px 0}
.foot a:hover{color:var(--text)}
.foot .about{max-width:34ch;color:var(--text-2);font-size:14px}
.foot .legal{margin-top:36px;padding-top:24px;border-top:1px solid var(--border);color:var(--text-3);font-size:13px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* status columns (shipped vs next) */
.statcols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
@media (max-width:760px){.statcols{grid-template-columns:1fr}}
.statcol{border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 28px;background:var(--surface)}
.statcol.shipped{background:linear-gradient(180deg,var(--accent-soft),transparent 44%)}
.statcol.next{background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 12%,transparent),transparent 44%)}
.statcol .st-tag{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 var(--mono);padding:5px 11px;
  border-radius:999px;margin-bottom:18px;text-transform:uppercase;letter-spacing:.03em}
.statcol.shipped .st-tag{color:var(--accent-strong);background:var(--accent-soft);border:1px solid var(--accent-line)}
.statcol.next .st-tag{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 34%,transparent)}
.statcol ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
.statcol li{position:relative;padding-left:24px;font-size:14px;color:var(--text-2);line-height:1.5}
.statcol li b{color:var(--text);font-weight:620}
.statcol.shipped li::before{content:"✓";position:absolute;left:0;color:var(--accent-strong);font-weight:700}
.statcol.next li::before{content:"→";position:absolute;left:0;color:var(--amber);font-weight:700}
.statcol li .mono,.statcol li code{color:var(--text-3);font-size:12.5px}

/* ============================================================================
   DOCS SHELL — sidebar | content | toc
   ========================================================================== */
.docs{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:264px minmax(0,1fr) 220px;gap:0;align-items:start}
.sidebar{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;
  padding:32px 20px 60px;border-right:1px solid var(--border);scrollbar-width:thin}
.sidebar .grp{margin-bottom:26px}
.sidebar .grp-t{font:600 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);
  margin:0 0 10px;padding:0 10px}
.sidebar a{display:block;padding:7px 10px;font-size:14px;color:var(--text-2);border-radius:7px;
  line-height:1.35;letter-spacing:-.01em}
.sidebar a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.sidebar a[aria-current="page"]{color:var(--accent-strong);background:var(--accent-soft);font-weight:560}
.sidebar a .num{display:inline-block;width:1.4em;color:var(--text-3);font-family:var(--mono);font-size:12px}

.content{min-width:0;padding:40px 52px 90px;max-width:820px}
.content .crumb{font:500 12.5px/1 var(--mono);color:var(--text-3);margin-bottom:14px}
.content .crumb a{color:var(--text-3)}
.content h1{font-size:clamp(30px,4vw,40px);font-weight:680;letter-spacing:-.035em;margin:0 0 12px}
.content .page-sub{font-size:18px;color:var(--text-2);line-height:1.55;margin:0 0 30px;max-width:64ch}
.content h2{font-size:24px;font-weight:640;margin:52px 0 14px;padding-top:8px;scroll-margin-top:calc(var(--nav-h) + 14px)}
.content h3{font-size:18px;font-weight:620;margin:32px 0 10px;scroll-margin-top:calc(var(--nav-h) + 14px)}
.content h2 .anchor,.content h3 .anchor{opacity:0;margin-left:8px;color:var(--text-3);font-weight:400;font-size:.8em;transition:.12s}
.content h2:hover .anchor,.content h3:hover .anchor{opacity:1}
.content h2 .anchor:hover,.content h3 .anchor:hover{color:var(--accent-strong);text-decoration:none}
.content p{color:var(--text-2);font-size:15.5px;line-height:1.68;max-width:68ch}
.content li{color:var(--text-2);font-size:15.5px;line-height:1.62}
.content ul,.content ol{padding-left:22px;margin:0 0 18px;max-width:66ch}
.content li{margin:6px 0}
.content li::marker{color:var(--text-3)}
.content strong{color:var(--text);font-weight:620}
.content a{font-weight:500}
.content h2:first-of-type{margin-top:12px}

/* inline code + pre */
.content :not(pre)>code{font-size:.86em;background:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:.12em .4em;color:var(--code-ink);white-space:nowrap}
.codeblock{position:relative;margin:0 0 22px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--code-bg)}
.codeblock .cb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 8px 14px;
  border-bottom:1px solid var(--border);font:500 12px/1 var(--mono);color:var(--text-3);background:var(--surface-2)}
.codeblock pre{margin:0;padding:16px 16px;overflow-x:auto;font-size:13px;line-height:1.7;color:var(--code-ink);
  tab-size:2}
.codeblock pre code{white-space:pre}
.copy-btn{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--sans);color:var(--text-2);
  background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 9px;cursor:pointer;transition:.14s}
.copy-btn:hover{color:var(--text);border-color:var(--border-2)}
.copy-btn.ok{color:var(--accent-strong);border-color:var(--accent-line)}
/* token colors for code (applied by generator spans) */
.tk-c{color:var(--text-3);font-style:italic}   /* comment */
.tk-k{color:var(--accent-strong)}               /* keyword/flag */
.tk-s{color:var(--blue)}                         /* string */
.tk-n{color:var(--amber)}                        /* number */
.tk-p{color:var(--text-3)}                       /* punctuation/prompt */

/* callouts */
.note{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);
  padding:16px 18px;margin:0 0 22px;background:var(--surface-2);font-size:14.5px;color:var(--text-2);line-height:1.6}
.note.warn{border-left-color:var(--amber)}
.note.info{border-left-color:var(--blue)}
.note .nt{display:block;font-weight:640;color:var(--text);margin-bottom:4px;font-size:13.5px}

/* layered-doc devices — scannable spine + deep detail (Requests-101 style system) */
.tldr{margin:2px 0 20px;padding:12px 16px;border-radius:var(--r);
  background:var(--accent-soft);border:1px solid var(--accent-line);font-size:14.5px;line-height:1.6;color:var(--text-2)}
.tldr::before{content:"TL;DR";display:inline-block;margin-right:10px;font:600 10.5px/1.75 var(--mono);letter-spacing:.05em;color:var(--accent-strong);text-transform:uppercase;vertical-align:1px}
.tldr b{color:var(--text);font-weight:620}
.recap{margin:22px 0 4px;padding:12px 16px;border-left:3px solid var(--border-2);background:var(--surface-2);
  border-radius:0 var(--r) var(--r) 0;font-size:13.5px;color:var(--text-3);line-height:1.55}
.recap::before{content:"In one line";display:block;font:600 10.5px/1.6 var(--mono);letter-spacing:.05em;color:var(--text-3);text-transform:uppercase;margin-bottom:3px}
.recap b{color:var(--text-2);font-weight:620}
.modnum{display:inline-block;font:600 13px/1 var(--mono);color:var(--accent-strong);margin-right:9px;vertical-align:2px}
.subh{font-size:15.5px;font-weight:620;color:var(--text);margin:26px 0 8px;letter-spacing:-.01em}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px;display:block;overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;min-width:520px}
.content table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px}
.tblwrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--border);border-radius:var(--r)}
.tblwrap table{width:100%;border-collapse:collapse;min-width:560px;font-size:14px}
.tblwrap th,.tblwrap td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.tblwrap th{background:var(--surface-2);color:var(--text);font-weight:600;font-size:12.5px;white-space:nowrap}
.tblwrap td{color:var(--text-2)}
.tblwrap tr:last-child td{border-bottom:0}
.tblwrap td code,.tblwrap th code{background:var(--surface-3);border:1px solid var(--border);border-radius:4px;
  padding:.1em .35em;font-size:12.5px;white-space:nowrap;color:var(--code-ink)}

/* pill badges */
.badge{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--mono);padding:4px 9px;border-radius:6px;
  border:1px solid var(--border-2);color:var(--text-2);background:var(--surface-2);white-space:nowrap}
.badge.ok{color:var(--accent-strong);border-color:var(--accent-line);background:var(--accent-soft)}
.badge.warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent);
  background:color-mix(in srgb,var(--amber) 12%,transparent)}
.badge.dim{color:var(--text-3)}

/* prev / next */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}
@media (max-width:520px){.pager{grid-template-columns:1fr}}
.pager a{display:block;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r);transition:.16s}
.pager a:hover{border-color:var(--border-2);background:var(--surface-2);text-decoration:none}
.pager a .dir{font:500 12px/1 var(--mono);color:var(--text-3)}
.pager a .t{display:block;margin-top:7px;font-weight:580;color:var(--text);font-size:15px}
.pager a.next{text-align:right}

/* right toc */
.toc{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));overflow-y:auto;padding:44px 20px 60px;
  font-size:13px}
.toc .toc-t{font:600 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin:0 0 12px}
.toc a{display:block;padding:5px 0 5px 12px;color:var(--text-3);border-left:2px solid var(--border);line-height:1.4}
.toc a:hover{color:var(--text);text-decoration:none}
.toc a.sub{padding-left:24px;font-size:12.5px}
.toc a.active{color:var(--accent-strong);border-left-color:var(--accent)}

/* sidebar mobile */
.sidebar-toggle{display:none}
@media (max-width:1180px){
  .docs{grid-template-columns:264px minmax(0,1fr)}
  .toc{display:none}
  .content{padding-right:40px}
}
@media (max-width:900px){
  .docs{grid-template-columns:1fr}
  .sidebar{position:fixed;top:var(--nav-h);left:0;width:min(320px,86vw);z-index:90;background:var(--surface);
    border-right:1px solid var(--border);transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .content{padding:28px 22px 80px}
  .sidebar-toggle{display:inline-grid}
  .scrim{position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(0,0,0,.4);z-index:80;opacity:0;pointer-events:none;transition:.2s}
  .scrim.show{opacity:1;pointer-events:auto}
}

/* ============================================================================
   DIAGRAMS + CHARTS (inline SVG, theme-aware via CSS vars)
   ========================================================================== */
.figure{margin:8px 0 26px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:20px;overflow:hidden}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{margin-top:14px;font-size:13px;color:var(--text-3);line-height:1.5;text-align:center}
.fp-svg .n-fill{fill:var(--d-fill)}
.fp-svg .n-fill-2{fill:var(--d-fill-2)}
.fp-svg .n-stroke{stroke:var(--d-stroke)}
.fp-svg .ink{fill:var(--d-ink)}
.fp-svg .ink-mut{fill:var(--d-ink-mut)}
.fp-svg .accent{fill:var(--accent)}
.fp-svg .accent-s{stroke:var(--accent)}
.fp-svg .pass{fill:var(--d-pass)}.fp-svg .pass-s{stroke:var(--d-pass)}
.fp-svg .fail{fill:var(--d-fail)}.fp-svg .fail-s{stroke:var(--d-fail)}
.fp-svg .warn{fill:var(--d-warn)}.fp-svg .warn-s{stroke:var(--d-warn)}
.fp-svg .grid{stroke:var(--d-grid)}
.fp-svg .track{fill:var(--d-track)}
.fp-svg text{font-family:var(--sans)}
.fp-svg .m{font-family:var(--mono)}
.fp-svg .accent-ink{fill:var(--accent-strong)}

/* ---- animated diagram primitives ------------------------------------------
   Motion is layered ONLY inside prefers-reduced-motion:no-preference. Every
   SVG's own markup is its correct static (reduced-motion / JS-off) state, so
   the diagrams stay complete and legible with animation and JS both absent.
   Decorative overlays (.flow/.halo/.spark) are hidden when motion is off —
   the wire/node they sit on is always drawn beneath them.                    */
.fp-svg .flow,.fp-svg .halo,.fp-svg .spark{opacity:0}
@media (prefers-reduced-motion:no-preference){
  /* signal pulse travelling along a wire (bright overlay on a static connector) */
  .fp-svg .flow{opacity:1;fill:none;stroke:var(--accent);stroke-linecap:round;
    stroke-dasharray:16 230;stroke-dashoffset:246;animation:fp-flow 3s linear infinite}
  .fp-svg .flow.f{stroke:var(--d-fail)}.fp-svg .flow.w{stroke:var(--d-warn)}
  .fp-svg .flow.p{stroke:var(--d-pass)}
  .fp-svg .flow.s{animation-duration:2.1s}.fp-svg .flow.l{animation-duration:4.2s}
  @keyframes fp-flow{from{stroke-dashoffset:246}to{stroke-dashoffset:0}}

  /* staggered starts, shared by any looped primitive */
  .fp-svg .d1{animation-delay:-.5s}.fp-svg .d2{animation-delay:-1s}
  .fp-svg .d3{animation-delay:-1.5s}.fp-svg .d4{animation-delay:-2s}
  .fp-svg .d5{animation-delay:-2.5s}.fp-svg .d6{animation-delay:-3s}

  /* node breathing (opacity only) */
  .fp-svg .breathe{animation:fp-breathe 3.2s ease-in-out infinite}
  @keyframes fp-breathe{0%,100%{opacity:.62}50%{opacity:1}}

  /* pulsing node — subtle scale */
  .fp-svg .beat{transform-box:fill-box;transform-origin:center;
    animation:fp-beat 2.6s ease-in-out infinite}
  @keyframes fp-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

  /* expanding halo ring behind an active node */
  .fp-svg .halo{opacity:1;transform-box:fill-box;transform-origin:center;
    animation:fp-halo 2.8s ease-out infinite}
  @keyframes fp-halo{0%{opacity:.5;transform:scale(.5)}70%{opacity:0;transform:scale(1.7)}100%{opacity:0}}

  /* mint / semantic glow (no SVG filter defs needed) */
  .fp-svg .glow{filter:drop-shadow(0 0 2px var(--accent))}
  .fp-svg .glow-f{filter:drop-shadow(0 0 2px var(--d-fail))}
  .fp-svg .glow-w{filter:drop-shadow(0 0 2px var(--d-warn))}
  .fp-svg .glow-p{filter:drop-shadow(0 0 2px var(--d-pass))}

  /* sequenced reveal — items light up in order on a slow loop */
  .fp-svg .seq{animation:fp-seq 6s ease-in-out infinite both}
  @keyframes fp-seq{0%,5%{opacity:.18}15%,92%{opacity:1}100%{opacity:.18}}

  /* bar grow from its own base (rises from the axis) */
  .fp-svg .grow{transform-box:fill-box;transform-origin:bottom center;
    animation:fp-grow 3s ease-out infinite both}
  @keyframes fp-grow{0%{transform:scaleY(0)}34%,100%{transform:scaleY(1)}}

  /* horizontal fill grow (meter/track bars) */
  .fp-svg .fill{transform-box:fill-box;transform-origin:left center;
    animation:fp-fill 3.2s ease-out infinite both}
  @keyframes fp-fill{0%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}

  /* gate check — an affirming pulse */
  .fp-svg .tick{transform-box:fill-box;transform-origin:center;
    animation:fp-tick 3s ease-in-out infinite}
  @keyframes fp-tick{0%,42%,100%{opacity:.5;transform:scale(.88)}
    56%{opacity:1;transform:scale(1.16)}72%{opacity:1;transform:scale(1)}}

  /* blink caret / status dot */
  .fp-svg .flick{animation:fp-flick 1.5s steps(1) infinite}
  @keyframes fp-flick{50%{opacity:.25}}

  /* dashed link draw-in (build a chain/loop one segment at a time) */
  .fp-svg .draw{stroke-dasharray:180;stroke-dashoffset:180;
    animation:fp-draw 6s ease-in-out infinite both}
  @keyframes fp-draw{0%,5%{stroke-dashoffset:180}20%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:180}}
}

/* small inline stat chips used in docs */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.chip{border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;min-width:130px;background:var(--surface)}
.chip .cn{font-size:23px;font-weight:680;letter-spacing:-.02em;color:var(--text)}
.chip .cn .u{font-size:14px;color:var(--text-3);font-weight:560}
.chip .cl{font-size:12.5px;color:var(--text-2);margin-top:3px}
.chip.good .cn{color:var(--accent-strong)}

/* definition grid */
.defs{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin:0 0 24px}
.defs .row{display:grid;grid-template-columns:180px 1fr;gap:0;border-bottom:1px solid var(--border)}
.defs .row:last-child{border-bottom:0}
@media (max-width:640px){.defs .row{grid-template-columns:1fr}}
.defs .k{padding:14px 16px;background:var(--surface-2);font-family:var(--mono);font-size:13px;color:var(--text);
  border-right:1px solid var(--border);font-weight:500}
@media (max-width:640px){.defs .k{border-right:0;border-bottom:1px solid var(--border)}}
.defs .v{padding:14px 16px;color:var(--text-2);font-size:14.5px;line-height:1.55}
.defs .v code{background:var(--surface-3);border:1px solid var(--border);border-radius:4px;padding:.08em .34em;font-size:12.5px}

hr.rule{border:0;border-top:1px solid var(--border);margin:40px 0}


/* ── Requests 101 tutorial: lesson pages, progress, course nav ───────────── */
.course-title{display:block;font-weight:680;font-size:14px;color:var(--text);margin:0 0 2px}
.sidebar-back{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-3);margin-bottom:16px}
.sidebar-back:hover{color:var(--accent-strong)}
.lesson-progress{margin:0 0 26px}
.lp-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.lp-group{font:600 10.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-strong)}
.lp-count{font:600 12px/1 var(--mono);color:var(--text-3)}
.lp-bar{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;border:1px solid var(--border-2)}
.lp-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width .5s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.lp-bar span{transition:none}}
.lesson-lead{font-size:17px;line-height:1.55;color:var(--text-2);margin:0 0 22px}
.lesson-lead b{color:var(--text);font-weight:620}
/* lesson nav list in the sidebar */
.sidebar .lnav a{display:flex;gap:9px;align-items:baseline}
.sidebar .lnav a .num{flex:none}
.sidebar .lnav a.done .num{color:var(--accent-strong)}
.sidebar .lnav a.done::after{content:"✓";margin-left:auto;color:var(--accent-strong);font-size:11px}


/* course pages (How Agents Talk to Models) have no right-hand TOC — reclaim the space */
.docs.docs-course{grid-template-columns:264px minmax(0,1fr)}
.docs.docs-course .content{max-width:1040px}
@media (max-width:900px){.docs.docs-course{grid-template-columns:1fr}}


/* ============================================================================
   Mark, hero backdrop, and config builder.
   Every rule here follows the motion contract set out above: the HTML/SVG is
   authored in its finished state, and motion is layered only inside
   prefers-reduced-motion:no-preference. Turn animation off and nothing is lost.
   ========================================================================== */

/* ---- the mark -------------------------------------------------------------
   The ladder draws itself, the first rung snaps lit, and it climbs on hover.  */
.fp-mark{flex:none;overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .fp-mark .st{stroke-dasharray:46;animation:fp-mark-draw .85s cubic-bezier(.22,.9,.28,1) .08s both}
  @keyframes fp-mark-draw{from{stroke-dashoffset:46}to{stroke-dashoffset:0}}
  .fp-mark .lit{transform-box:fill-box;transform-origin:left center;
    animation:fp-mark-lit .42s cubic-bezier(.2,1.2,.3,1) .52s both}
  @keyframes fp-mark-lit{from{transform:scaleX(.06)}to{transform:scaleX(1)}}
  /* hover — the request tries the next rungs, then settles back on the first */
  .brand:hover .fp-mark .lit{animation:fp-mark-climb .9s cubic-bezier(.5,0,.3,1)}
  @keyframes fp-mark-climb{
    0%{transform:translate(0,0)}
    28%{transform:translate(7.8px,-8px)}
    56%{transform:translate(15.6px,-16px)}
    100%{transform:translate(0,0)}}
}

/* ---- hero backdrop --------------------------------------------------------
   Not decoration for its own sake: the rungs are the ladder, and the motes are
   requests rising and settling on the first one. Sits behind the text at low
   contrast, masked to fade out well before it reaches any copy.               */
.hero-glow{background:
    radial-gradient(52% 46% at 50% -2%,var(--accent-soft),transparent 68%),
    radial-gradient(30% 34% at 12% 4%,rgba(25,227,177,.10),transparent 70%),
    radial-gradient(26% 30% at 88% 10%,rgba(59,125,221,.07),transparent 72%)}
.hero-rungs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
/* the ladder itself — evenly spaced hairlines, faded top and bottom */
.hero-rungs::before{content:"";position:absolute;inset:0;opacity:.55;
  background:repeating-linear-gradient(to bottom,var(--accent-line) 0 1px,transparent 1px 76px);
  -webkit-mask-image:radial-gradient(72% 62% at 50% 22%,#000 12%,transparent 78%);
  mask-image:radial-gradient(72% 62% at 50% 22%,#000 12%,transparent 78%)}
.hero-mote{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);
  opacity:0;box-shadow:0 0 12px 2px var(--accent-line)}
@media (prefers-reduced-motion:no-preference){
  /* rise through the ghost rungs, then settle and seal on the first one */
  .hero-mote{animation:fp-mote 7s cubic-bezier(.35,0,.25,1) infinite}
  @keyframes fp-mote{
    0%{opacity:0;transform:translateY(0) scale(.6)}
    8%{opacity:.85;transform:translateY(-12px) scale(1)}
    46%{opacity:.85;transform:translateY(-152px) scale(1)}
    62%{opacity:.5;transform:translateY(-176px) scale(.9)}
    78%,100%{opacity:0;transform:translateY(-196px) scale(.5)}}
  .hero-mote.m2{animation-duration:9s;animation-delay:-3.1s}
  .hero-mote.m3{animation-duration:8s;animation-delay:-5.6s}
  .hero-mote.m4{animation-duration:10.5s;animation-delay:-1.4s}
  .hero-mote.m5{animation-duration:7.6s;animation-delay:-7.2s}
}

/* ---- config builder -------------------------------------------------------
   Replaces a hand-written TOML blob: pick the three things that actually change
   between setups and the file writes itself into the codeblock below.         */
.fpb{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  overflow:hidden;margin:22px 0}
.fpb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;
  background:var(--border);border-bottom:1px solid var(--border)}
.fpb-f{background:var(--surface-2);padding:14px 16px}
.fpb-f>label{display:block;font:600 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 10px}
.fpb-opts{display:flex;flex-wrap:wrap;gap:6px}
.fpb-opts button{font:500 13px/1 var(--sans);padding:7px 12px;border-radius:7px;cursor:pointer;
  border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);
  transition:background .14s,color .14s,border-color .14s}
.fpb-opts button:hover{border-color:var(--border-3);color:var(--text)}
.fpb-opts button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);
  color:var(--accent-strong);font-weight:600}
.fpb-opts button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
.fpb .codeblock{margin:0;border:0;border-radius:0}
.fpb-why{padding:12px 16px;border-top:1px solid var(--border);background:var(--surface-2);
  font:400 13px/1.55 var(--sans);color:var(--text-3)}
.fpb-why b{color:var(--text-2);font-weight:600}