/*fern-site-stylesheet*/@font-face {
    font-family: 'ChatSans';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/642258a2d527730682ffea64e5a8fd1be050a29675206ba56fb1c07d66e43123/assets/fonts/Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSans';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/a3dbc42bd74032e386071a2987f82230421541a9d5085625a5765ad513f07128/assets/fonts/Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSans';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/19c898a17d78f99f9f293ed25b1ad46397501a430aa2f2989ac00c778ec79edc/assets/fonts/Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSans';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/10cb2bfd8644ff3ed3a2732ebffe45421b7933e67a146291c8e6f4418d77f5a1/assets/fonts/SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSansHeading';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/19c898a17d78f99f9f293ed25b1ad46397501a430aa2f2989ac00c778ec79edc/assets/fonts/Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSansHeading';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/10cb2bfd8644ff3ed3a2732ebffe45421b7933e67a146291c8e6f4418d77f5a1/assets/fonts/SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSansHeading';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/9d4c6b6fb9f5c48e56ba031b5fcce78141361372229bdfe5efb398dc3dc3dda2/assets/fonts/Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'ChatSansHeading';
    src: url('/_fern-files/livingbrain.docs.buildwithfern.com/4e8b67f011e0b542c31b256ab05ec8c563ed99f4adf2c75bb1759a72b85079a1/assets/fonts/ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 704px;
  --sidebar-width: 288px;
  --page-width: 1440px;
  --logo-height: 26px;
  --font-body: 'ChatSans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'ChatSansHeading', 'ChatSans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fdfdff;
  --accent-2: #f7f8ff;
  --accent-3: #eff1ff;
  --accent-4: #e3e7ff;
  --accent-5: #d6dbff;
  --accent-6: #c7cdff;
  --accent-7: #b2b8ff;
  --accent-8: #979bff;
  --accent-9: #5238de;
  --accent-10: #4722cc;
  --accent-11: #5747dd;
  --accent-12: #29236e;

  --accent-a1: #0000ff02;
  --accent-a2: #0020ff08;
  --accent-a3: #0020ff10;
  --accent-a4: #0025ff1c;
  --accent-a5: #0020ff29;
  --accent-a6: #001cff38;
  --accent-a7: #0014ff4d;
  --accent-a8: #000aff68;
  --accent-a9: #2100d5c7;
  --accent-a10: #2b00c4dd;
  --accent-a11: #1600d0b8;
  --accent-a12: #070057dc;

  --accent-contrast: #fff;
  --accent-surface: #f5f6ffcc;
  --accent-indicator: #5238de;
  --accent-track: #5238de;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.4% 0.0033 280.3);
      --accent-2: oklch(98.1% 0.0117 280.3);
      --accent-3: oklch(96.1% 0.0221 280.3);
      --accent-4: oklch(93.5% 0.0446 280.3);
      --accent-5: oklch(90.4% 0.0664 280.3);
      --accent-6: oklch(86.5% 0.0879 280.3);
      --accent-7: oklch(80.8% 0.1117 280.3);
      --accent-8: oklch(72.9% 0.1493 280.3);
      --accent-9: oklch(48.7% 0.2351 280.3);
      --accent-10: oklch(43.6% 0.2351 280.3);
      --accent-11: oklch(51% 0.2188 280.3);
      --accent-12: oklch(31.5% 0.1248 280.3);

      --accent-a1: color(display-p3 0.0196 0.0196 1 / 0.008);
      --accent-a2: color(display-p3 0.0196 0.1451 0.8784 / 0.032);
      --accent-a3: color(display-p3 0.0078 0.1294 0.9412 / 0.063);
      --accent-a4: color(display-p3 0.0039 0.1137 0.9294 / 0.106);
      --accent-a5: color(display-p3 0.0039 0.102 0.9255 / 0.157);
      --accent-a6: color(display-p3 0.0039 0.0941 0.9294 / 0.216);
      --accent-a7: color(display-p3 0.0039 0.0706 0.9373 / 0.299);
      --accent-a8: color(display-p3 0.0039 0.0314 0.9333 / 0.404);
      --accent-a9: color(display-p3 0.1059 0 0.7922 / 0.777);
      --accent-a10: color(display-p3 0.1373 0 0.7294 / 0.859);
      --accent-a11: color(display-p3 0.0667 0 0.7725 / 0.718);
      --accent-a12: color(display-p3 0.0235 0 0.3216 / 0.863);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9608 0.9686 1 / 0.8);
      --accent-indicator: oklch(48.7% 0.2351 280.3);
      --accent-track: oklch(48.7% 0.2351 280.3);
    }
  }
}


.light, :root {
  --grayscale-1: #fdfcfd;
  --grayscale-2: #faf9fb;
  --grayscale-3: #f2eff3;
  --grayscale-4: #eae7ec;
  --grayscale-5: #e3dfe6;
  --grayscale-6: #dbd8e0;
  --grayscale-7: #d0cdd7;
  --grayscale-8: #bcbac7;
  --grayscale-9: #8e8c99;
  --grayscale-10: #84828e;
  --grayscale-11: #65636d;
  --grayscale-12: #211f26;

  --grayscale-a1: #55005503;
  --grayscale-a2: #2b005506;
  --grayscale-a3: #30004010;
  --grayscale-a4: #20003618;
  --grayscale-a5: #20003820;
  --grayscale-a6: #14003527;
  --grayscale-a7: #10003332;
  --grayscale-a8: #08003145;
  --grayscale-a9: #05001d73;
  --grayscale-a10: #0500197d;
  --grayscale-a11: #0400119c;
  --grayscale-a12: #020008e0;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #8e8c99;
  --grayscale-track: #8e8c99;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.991 0.988 0.992);
      --grayscale-2: color(display-p3 0.98 0.976 0.984);
      --grayscale-3: color(display-p3 0.946 0.938 0.952);
      --grayscale-4: color(display-p3 0.915 0.906 0.925);
      --grayscale-5: color(display-p3 0.886 0.876 0.901);
      --grayscale-6: color(display-p3 0.856 0.846 0.875);
      --grayscale-7: color(display-p3 0.814 0.804 0.84);
      --grayscale-8: color(display-p3 0.735 0.728 0.777);
      --grayscale-9: color(display-p3 0.555 0.549 0.596);
      --grayscale-10: color(display-p3 0.514 0.508 0.552);
      --grayscale-11: color(display-p3 0.395 0.388 0.424);
      --grayscale-12: color(display-p3 0.128 0.122 0.147);

      --grayscale-a1: #55005503;
      --grayscale-a2: #2b005506;
      --grayscale-a3: #30004010;
      --grayscale-a4: #20003618;
      --grayscale-a5: #20003820;
      --grayscale-a6: #14003527;
      --grayscale-a7: #10003332;
      --grayscale-a8: #08003145;
      --grayscale-a9: #05001d73;
      --grayscale-a10: #0500197d;
      --grayscale-a11: #0400119c;
      --grayscale-a12: #020008e0;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.555 0.549 0.596);
      --grayscale-track: color(display-p3 0.555 0.549 0.596);
    }
  }
}


.dark {
  --accent-1: #090814;
  --accent-2: #151325;
  --accent-3: #251d4c;
  --accent-4: #31216c;
  --accent-5: #3b2a7d;
  --accent-6: #45358b;
  --accent-7: #5242a0;
  --accent-8: #624fbf;
  --accent-9: #9c8fff;
  --accent-10: #9183f2;
  --accent-11: #b0a7ff;
  --accent-12: #e0deff;

  --accent-a1: #0000f20b;
  --accent-a2: #6b5af81d;
  --accent-a3: #6e51fe45;
  --accent-a4: #6c44ff66;
  --accent-a5: #734eff78;
  --accent-a6: #795bfe87;
  --accent-a7: #7f65fe9d;
  --accent-a8: #8067febd;
  --accent-a9: #9c8fff;
  --accent-a10: #9889fef2;
  --accent-a11: #b0a7ff;
  --accent-a12: #e0deff;

  --accent-contrast: #fff;
  --accent-surface: #201c4080;
  --accent-indicator: #9c8fff;
  --accent-track: #9c8fff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(14.5% 0.0264 286.9);
      --accent-2: oklch(20.1% 0.0357 286.9);
      --accent-3: oklch(26.9% 0.0837 286.9);
      --accent-4: oklch(31.7% 0.1244 286.9);
      --accent-5: oklch(35.7% 0.1334 286.9);
      --accent-6: oklch(39.8% 0.1363 286.9);
      --accent-7: oklch(44.8% 0.1465 286.9);
      --accent-8: oklch(50.7% 0.1685 286.9);
      --accent-9: oklch(71% 0.1599 286.9);
      --accent-10: oklch(67.3% 0.1599 286.9);
      --accent-11: oklch(77.6% 0.1599 286.9);
      --accent-12: oklch(91.4% 0.0511 286.9);

      --accent-a1: color(display-p3 0 0 0.9961 / 0.037);
      --accent-a2: color(display-p3 0.4431 0.3725 0.9922 / 0.107);
      --accent-a3: color(display-p3 0.4353 0.3294 1 / 0.258);
      --accent-a4: color(display-p3 0.4196 0.2863 1 / 0.384);
      --accent-a5: color(display-p3 0.4392 0.3255 1 / 0.449);
      --accent-a6: color(display-p3 0.4745 0.3804 1 / 0.507);
      --accent-a7: color(display-p3 0.498 0.4196 1 / 0.592);
      --accent-a8: color(display-p3 0.5098 0.4275 1 / 0.711);
      --accent-a9: color(display-p3 0.6196 0.5765 1 / 0.972);
      --accent-a10: color(display-p3 0.6078 0.5569 1 / 0.919);
      --accent-a11: color(display-p3 0.698 0.6706 1 / 0.976);
      --accent-a12: color(display-p3 0.8902 0.8824 1 / 0.988);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1255 0.1176 0.2431 / 0.5);
      --accent-indicator: oklch(71% 0.1599 286.9);
      --accent-track: oklch(71% 0.1599 286.9);
    }
  }
}


.dark {
  --grayscale-1: #111111;
  --grayscale-2: #191919;
  --grayscale-3: #222222;
  --grayscale-4: #2a2a2a;
  --grayscale-5: #313131;
  --grayscale-6: #3a3a3a;
  --grayscale-7: #484848;
  --grayscale-8: #606060;
  --grayscale-9: #6e6e6e;
  --grayscale-10: #7b7b7b;
  --grayscale-11: #b4b4b4;
  --grayscale-12: #eeeeee;

  --grayscale-a1: #00000000;
  --grayscale-a2: #ffffff09;
  --grayscale-a3: #ffffff12;
  --grayscale-a4: #ffffff1b;
  --grayscale-a5: #ffffff22;
  --grayscale-a6: #ffffff2c;
  --grayscale-a7: #ffffff3b;
  --grayscale-a8: #ffffff55;
  --grayscale-a9: #ffffff64;
  --grayscale-a10: #ffffff72;
  --grayscale-a11: #ffffffaf;
  --grayscale-a12: #ffffffed;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6e6e6e;
  --grayscale-track: #6e6e6e;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.067 0.067 0.067);
      --grayscale-2: color(display-p3 0.098 0.098 0.098);
      --grayscale-3: color(display-p3 0.135 0.135 0.135);
      --grayscale-4: color(display-p3 0.163 0.163 0.163);
      --grayscale-5: color(display-p3 0.192 0.192 0.192);
      --grayscale-6: color(display-p3 0.228 0.228 0.228);
      --grayscale-7: color(display-p3 0.283 0.283 0.283);
      --grayscale-8: color(display-p3 0.375 0.375 0.375);
      --grayscale-9: color(display-p3 0.431 0.431 0.431);
      --grayscale-10: color(display-p3 0.484 0.484 0.484);
      --grayscale-11: color(display-p3 0.706 0.706 0.706);
      --grayscale-12: color(display-p3 0.933 0.933 0.933);

      --grayscale-a1: #00000000;
      --grayscale-a2: #ffffff09;
      --grayscale-a3: #ffffff12;
      --grayscale-a4: #ffffff1b;
      --grayscale-a5: #ffffff22;
      --grayscale-a6: #ffffff2c;
      --grayscale-a7: #ffffff3b;
      --grayscale-a8: #ffffff55;
      --grayscale-a9: #ffffff64;
      --grayscale-a10: #ffffff72;
      --grayscale-a11: #ffffffaf;
      --grayscale-a12: #ffffffed;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.431 0.431 0.431);
      --grayscale-track: color(display-p3 0.431 0.431 0.431);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(82, 56, 222, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(229, 229, 229, 1);
  --sidebar-background: rgba(250, 250, 250, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(255, 255, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(156, 143, 255, 1);
  --background: rgba(10, 10, 10, 1);
  --border: rgba(31, 31, 31, 1);
  --sidebar-background: rgba(10, 10, 10, 1);
  --header-background: rgba(10, 10, 10, 1);
  --card-background: rgba(23, 23, 23, 1);
  --theme-color: #0a0a0a;
}

/* ============================================================================
   Living Brain — docs theme
   Tokens lifted from stg.livingbrain.com (Tailwind/shadcn :root and .dark).
   ==========================================================================*/

:root {
  --lb-brand-blue:  #4949F2;   /* logo mark, primary ramp start */
  --lb-brand-mint:  #30F2B1;   /* logo mark gradient end       */
  --lb-primary:     #583CEF;   /* --primary (light)            */
  --lb-primary-dk:  #7C6BFF;   /* --primary (dark)             */
  --lb-secondary:   #F1EFFF;   /* --secondary                  */
  --lb-secondary-fg:#3B2BB8;   /* --secondary-foreground       */
  --lb-ink:         #0A0A0A;
  --lb-muted-fg:    #737373;
  --lb-border:      #E5E5E5;
  --lb-radius:      0.625rem;  /* --radius                     */
  --lb-night-0:     #070807;   /* footer gradient start        */
  --lb-night-1:     #111211;   /* footer gradient end          */
}

/* Their shadcn radius scale, applied to Fern's chrome. */
.fern-card,
.fern-callout,
.fern-endpoint,
pre, code[class*="language-"] { border-radius: var(--lb-radius) !important; }

/* ---------------------------------------------------------------------------
   "API reference" style pill — matches the badge on their /docs page
   -------------------------------------------------------------------------*/
.lb-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--lb-secondary-fg); background: var(--lb-secondary);
  border-radius: 999px; margin-bottom: 1.25rem;
}
.dark .lb-pill { color: #C7BEFF; background: rgba(88, 60, 239, 0.16); }

.lb-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--lb-brand-mint);
  box-shadow: 0 0 0 3px rgba(48, 242, 177, 0.22);
}

/* ---------------------------------------------------------------------------
   Hero — recreates the aurora that runs across the bottom of livingbrain.com.
   Their version is a WebGL canvas under `mix-blend-screen`; this is a
   dependency-free CSS approximation using blurred, drifting conic ribbons.

   The landing page uses `layout: custom`, which renders full-viewport-width, so
   the hero bleeds edge to edge; `.lb-hero-inner` re-centers the content.
   -------------------------------------------------------------------------*/
.lb-hero {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%;
  padding: 5.5rem 1.5rem 7rem;
  background: linear-gradient(180deg, var(--lb-night-1) 0%, var(--lb-night-0) 100%);
  color: #fff;
}

.lb-hero-inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  gap: 3.5rem; align-items: center;
}

/* Two counter-drifting ribbon layers, screen-blended like the original. */
.lb-hero::before,
.lb-hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: -30%; right: -30%; height: 110%;
  mix-blend-mode: screen;
  filter: blur(44px) saturate(140%);
  opacity: 0.9;
}

.lb-hero::before {
  bottom: -52%;
  background:
    radial-gradient(44% 30% at 20% 52%, rgba(73, 73, 242, 0.95) 0%, rgba(73, 73, 242, 0) 60%),
    radial-gradient(40% 26% at 50% 44%, rgba(0, 165, 239, 0.90) 0%, rgba(0, 165, 239, 0) 58%),
    radial-gradient(42% 28% at 79% 54%, rgba(48, 242, 177, 0.60) 0%, rgba(48, 242, 177, 0) 62%);
  animation: lb-drift-a 19s ease-in-out infinite alternate;
}

.lb-hero::after {
  bottom: -64%;
  background:
    radial-gradient(46% 24% at 33% 50%, rgba(88, 60, 239, 0.80) 0%, rgba(88, 60, 239, 0) 62%),
    radial-gradient(38% 22% at 67% 46%, rgba(124, 107, 255, 0.70) 0%, rgba(124, 107, 255, 0) 60%);
  animation: lb-drift-b 26s ease-in-out infinite alternate;
}

@keyframes lb-drift-a {
  0%   { transform: translate3d(-6%, 2%, 0) rotate(-4deg) scaleY(1);    }
  50%  { transform: translate3d( 4%, -3%, 0) rotate( 2deg) scaleY(1.16); }
  100% { transform: translate3d( 8%, 1%, 0) rotate( 5deg) scaleY(0.94); }
}

@keyframes lb-drift-b {
  0%   { transform: translate3d( 7%, -1%, 0) rotate( 3deg) scaleY(1.08); }
  50%  { transform: translate3d(-3%,  3%, 0) rotate(-2deg) scaleY(0.92); }
  100% { transform: translate3d(-8%, -2%, 0) rotate(-6deg) scaleY(1.12); }
}

/* Respect users who ask for less motion — freeze mid-drift, keep the look. */
@media (prefers-reduced-motion: reduce) {

  .lb-hero::before, .lb-hero::after { animation: none; }

}

.lb-hero h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.04; letter-spacing: -0.025em; font-weight: 700;
  color: #fff;
}

.lb-hero p {
  margin: 0; max-width: 46ch;
  font-size: 1.0625rem; line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.lb-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

.lb-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 1.125rem; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; text-decoration: none !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.lb-btn:hover { transform: translateY(-1px); }
.lb-btn:focus-visible { transform: translateY(-1px); outline: none;
}

.lb-btn-primary { background: #fff; color: var(--lb-ink) !important; }
.lb-btn-primary:hover { background: rgba(255, 255, 255, 0.9); }
.lb-btn-primary:focus-visible { background: rgba(255, 255, 255, 0.9); outline: none;
}

.lb-btn-ghost {
  background: rgba(255, 255, 255, 0.07); color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.lb-btn-ghost:hover { background: rgba(255, 255, 255, 0.13); }
.lb-btn-ghost:focus-visible { background: rgba(255, 255, 255, 0.13); outline: none;
}

/* ---------------------------------------------------------------------------
   Terminal snippet — right column of the hero
   -------------------------------------------------------------------------*/
.lb-terminal {
  background: #FFFFFF;
  border: 1px solid var(--lb-border);
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  color: #262626;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lb-terminal-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid #EDEDED;
}
.lb-terminal-dots { display: flex; gap: 6px; }
.lb-terminal-dots span { width: 9px; height: 9px; border-radius: 50%; background: #D9D9D9; }
.lb-terminal-title { font-size: 12px; font-weight: 500; color: #8C8C8C; }

.lb-terminal-body {
  background: #F7F7F8;
  padding: 1.375rem 1.5rem;
  font-size: 13px; line-height: 1.75;
  overflow-x: auto; white-space: pre;
}
.lb-terminal-body strong { font-weight: 700; color: #0A0A0A; }
.lb-terminal .lb-c { color: #8C8C8C; }
.lb-terminal .lb-s { color: var(--lb-primary); }
.lb-terminal .lb-prompt { color: var(--lb-primary); font-weight: 600; }
.lb-terminal .lb-indent { padding-left: 2ch; }
.lb-terminal .lb-gap { height: 0.75rem; }
.lb-terminal .lb-gap-top { margin-top: 0.5rem; }

/* Typing animation: blink, type the command, blink, type the response, then
   leave the cursor blinking on the final prompt. Each line reveals --n
   characters starting at --d over --t; its cursor shows from --cs for --cw. */
.lb-terminal .lb-type {
  display: inline-block; vertical-align: top;
  overflow: hidden; width: 0;
  animation: lb-typing var(--t) steps(var(--n), end) var(--d) forwards;
}
.lb-terminal .lb-caret {
  display: inline-block; vertical-align: top;
  width: 0.6em; height: 1.25em; margin-top: 0.25em;
  background: var(--lb-primary);
  visibility: hidden;
  animation: lb-caret-window var(--cw) linear var(--cs), lb-blink 1s step-end infinite;
}
.dark .lb-terminal .lb-caret { background: var(--lb-primary-dk); }
.lb-terminal .lb-l9 .lb-type { animation: lb-typing 0s linear var(--d) forwards; }
.lb-terminal .lb-l9 .lb-caret {
  animation: lb-caret-show 0s linear var(--cs) forwards, lb-blink 1s step-end var(--cs) infinite;
}

.lb-l1 { --n: 33; --d: 1.2s;   --t: 0.99s; --cs: 0s;     --cw: 2.31s; }
.lb-l2 { --n: 46; --d: 2.31s;  --t: 1.38s; --cs: 2.31s;  --cw: 1.5s;  }
.lb-l3 { --n: 39; --d: 3.81s;  --t: 1.17s; --cs: 3.81s;  --cw: 1.29s; }
.lb-l4 { --n: 29; --d: 5.1s;   --t: 0.87s; --cs: 5.1s;   --cw: 0.99s; }
.lb-l5 { --n: 29; --d: 6.09s;  --t: 0.87s; --cs: 6.09s;  --cw: 2.19s; }
.lb-l6 { --n: 13; --d: 8.28s;  --t: 0.23s; --cs: 8.28s;  --cw: 0.35s; }
.lb-l7 { --n: 37; --d: 8.63s;  --t: 0.67s; --cs: 8.63s;  --cw: 0.79s; }
.lb-l8 { --n: 45; --d: 9.42s;  --t: 0.81s; --cs: 9.42s;  --cw: 0.93s; }
.lb-l9 { --n: 2;  --d: 10.35s; --cs: 10.35s; }

@keyframes lb-typing { to { width: calc(var(--n) * 1ch); } }
@keyframes lb-caret-window { from, to { visibility: visible; } }
@keyframes lb-caret-show { to { visibility: visible; } }
@keyframes lb-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {

  .lb-terminal .lb-type { width: auto; animation: none; }
  .lb-terminal .lb-caret { animation: none; }
  .lb-terminal .lb-l9 .lb-caret { visibility: visible; }

}

.lb-terminal-links {
  display: flex; flex-wrap: wrap; gap: 1.125rem;
  padding: 0.875rem 1.5rem 1.125rem;
  background: #F7F7F8;
  border-top: 1px solid #EDEDED;
}
.lb-terminal-links a {
  font-size: 12px; font-weight: 500; color: #525252 !important;
  text-decoration: underline; text-decoration-color: #D4D4D4; text-underline-offset: 4px;
}
.lb-terminal-links a:hover { color: #0A0A0A !important; text-decoration-color: currentColor; }
.lb-terminal-links a:focus-visible { color: #0A0A0A !important; text-decoration-color: currentColor; outline: none;
}

.dark .lb-terminal { background: #171717; border-color: #262626; color: #E5E5E5; }
.dark .lb-terminal-bar { border-bottom-color: #262626; }
.dark .lb-terminal-dots span { background: #404040; }
.dark .lb-terminal-body,
.dark .lb-terminal-links { background: #111111; }
.dark .lb-terminal-links { border-top-color: #262626; }
.dark .lb-terminal-body strong { color: #FFFFFF; }
.dark .lb-terminal .lb-s,
.dark .lb-terminal .lb-prompt { color: var(--lb-primary-dk); }
.dark .lb-terminal-links a { color: #A3A3A3 !important; text-decoration-color: #404040; }
.dark .lb-terminal-links a:hover { color: #FFFFFF !important; }
.dark .lb-terminal-links a:focus-visible { color: #FFFFFF !important; outline: none;
}

/* ---------------------------------------------------------------------------
   Content below the hero
   -------------------------------------------------------------------------*/
.lb-landing-body {
  max-width: 1200px; margin: 0 auto;
  padding: 4.5rem 1.5rem 5rem;
}
.lb-landing-body h2 { margin-top: 0; }

@media (max-width: 1024px) {

  .lb-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .lb-terminal { max-width: 40rem; }

}

@media (max-width: 640px) {

  .lb-hero { padding: 3.5rem 1.25rem 5rem; }
  .lb-landing-body { padding: 3rem 1.25rem 4rem; }

}

/* ---------------------------------------------------------------------------
   Small type refinements to match their site
   -------------------------------------------------------------------------*/
.lb-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--lb-muted-fg);
  margin: 2.5rem 0 0.75rem;
}

/* Product name, sitting above the status pill inside the hero. The Fern-rendered
   page heading is hidden below, so this is what carries the title visually. */
.lb-hero-eyebrow {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 1.125rem;
}

/* ---------------------------------------------------------------------------
   Landing page only — standalone page, no tabs, no interactive anchors.

   `.lb-hero` exists only on the overview page, so `body:has(.lb-hero)` scopes
   all of this to `/` and leaves /docs, /api-reference and /sdk untouched.
   -------------------------------------------------------------------------*/

/* Headings are click-to-copy-link triggers (cursor:pointer + a Radix tooltip),
   not real <a> anchors — so there is no href to strip. Killing pointer events
   removes both the copy affordance and the tooltip. Trade-off: these three
   headings are no longer selectable with the mouse. */
body:has(.lb-hero) .fern-main h1,
body:has(.lb-hero) .fern-main h2,
body:has(.lb-hero) .fern-main h3 {
  pointer-events: none;
  cursor: default;
}

/* The header logo links out to livingbrain.com. Keep the image, drop the link. */
body:has(.lb-hero) a[data-fern-logo] {
  pointer-events: none;
  cursor: default;
}

/* The page title is rendered inside the hero as .lb-hero-eyebrow instead, so the
   default header is redundant here — with the subtitle and page actions also gone
   it collapses to an empty 8px strip. `title` stays in frontmatter so the <title>
   tag and sidebar entry are unaffected. The :has() guard means this only matches
   the header that actually holds the page heading. */
body:has(.lb-hero) .fern-main header:has(h1.fern-page-heading) {
  display: none;
}

/* The landing page stands alone: hide the header tab row. */
body:has(.lb-hero) .fern-header-tabs {
  display: none;
}

/* ---------------------------------------------------------------------------
   Footer — ported from livingbrain.com (components/Footer.tsx)
   -------------------------------------------------------------------------*/
.lb-footer {
  border-top: 1px solid rgba(3, 7, 18, 0.08);
  background: #FFFFFF;
  color: #030712;
  font-size: 1rem;
}
.dark .lb-footer { border-top-color: rgba(255, 255, 255, 0.10); background: #111211; color: #fff; }

.lb-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.lb-footer-content { padding-top: 5rem; padding-bottom: 5rem; }

.lb-footer-top {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  padding-bottom: 3.5rem;
}

.lb-footer-badge {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; border-radius: 999px;
  border: 1px solid rgba(3, 7, 18, 0.20);
  font-size: 13px; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase;
}
.dark .lb-footer-badge { border-color: rgba(255, 255, 255, 0.25); }
.lb-footer-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }

.lb-footer-about { display: flex; flex-direction: column; gap: 1.875rem; }
.lb-footer-about p { margin: 0; line-height: 1.65; }

.lb-footer-mail {
  display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
  color: inherit !important; text-decoration: underline; text-underline-offset: 2px;
}
.lb-footer-mail svg { width: 20px; height: 20px; color: #9CA3AF; }

.lb-footer-social { display: flex; align-items: center; gap: 1rem; }
.lb-footer-social a { display: flex; color: rgba(3, 7, 18, 0.5) !important; transition: color 0.2s ease; }
.lb-footer-social a:hover { color: #030712 !important; }
.lb-footer-social a:focus-visible { color: #030712 !important; outline: none;
}
.dark .lb-footer-social a { color: rgba(255, 255, 255, 0.5) !important; }
.dark .lb-footer-social a:hover { color: #fff !important; }
.dark .lb-footer-social a:focus-visible { color: #fff !important; outline: none;
}
.lb-footer-social svg { width: 22px; height: 22px; }

.lb-footer-company { grid-column-start: 4; display: flex; flex-direction: column; gap: 0.5rem; }
.lb-footer-company span { color: rgba(3, 7, 18, 0.5); }
.dark .lb-footer-company span { color: rgba(255, 255, 255, 0.5); }
.lb-footer-company a { color: inherit !important; text-decoration: none; width: fit-content; }
.lb-footer-company a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lb-footer-company a:focus-visible { text-decoration: underline; text-underline-offset: 2px; outline: none;
}

.lb-footer-bottom {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  padding-top: 3.5rem;
}
.lb-footer-logo { display: block; color: #030712; }
.dark .lb-footer-logo { color: #fff; }
.lb-footer-logo svg { display: block; width: 100%; max-width: 326px; height: auto; }
.lb-footer-copyright {
  grid-column-start: 4; display: flex; align-items: flex-end;
  color: rgba(3, 7, 18, 0.5);
}
.dark .lb-footer-copyright { color: rgba(255, 255, 255, 0.5); }

@media (max-width: 1279px) {

  .lb-footer-top,
  .lb-footer-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lb-footer-company,
  .lb-footer-copyright { grid-column-start: 3; }

}

@media (max-width: 1023px) {

  .lb-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .lb-footer-badge-col { grid-column: 1 / -1; }
  .lb-footer-company { grid-column-start: auto; }
  .lb-footer-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .lb-footer-copyright { grid-column-start: auto; }

}

@media (max-width: 767px) {

  .lb-footer-top,
  .lb-footer-bottom { grid-template-columns: minmax(0, 1fr); }

}

/* ---------------------------------------------------------------------------
   "Connect your MCP client" panel (components/ConnectMcp.tsx), mirroring the
   one on livingbrain.fernmcp.dev/livingbrain.
   -------------------------------------------------------------------------*/
.lb-connect {
  --lb-connect-bg: #FFFFFF;
  --lb-connect-bar: #FAFAFA;
  --lb-connect-border: var(--lb-border);
  --lb-connect-muted: var(--lb-muted-fg);
  margin: 1.25rem 0;
  min-width: 0;
}
.dark .lb-connect {
  --lb-connect-bg: #171717;
  --lb-connect-bar: #111111;
  --lb-connect-border: #262626;
  --lb-connect-muted: #A3A3A3;
}

.lb-connect-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.875rem;
}
.lb-connect-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.lb-connect-browse {
  font-size: 0.8125rem; font-weight: 500; white-space: nowrap;
  color: var(--accent) !important; text-decoration: none !important;
}
.lb-connect-browse:hover { text-decoration: underline !important; }
.lb-connect-browse:focus-visible { text-decoration: underline !important; outline: none;
}

.lb-connect-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  border: 1px solid var(--lb-connect-border); border-radius: var(--lb-radius);
  background: var(--lb-connect-bar);
  margin-bottom: 0.75rem;
}
.lb-connect-tab {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.375rem 0.75rem; border-radius: calc(var(--lb-radius) - 3px);
  font-size: 0.8125rem; font-weight: 500; color: var(--lb-connect-muted);
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.lb-connect-tab:hover { color: inherit; }
.lb-connect-tab:focus-visible { color: inherit; outline: none;
}
.lb-connect-tab[aria-selected="true"] {
  color: inherit; background: var(--lb-connect-bg);
  border-color: var(--lb-connect-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.lb-connect-tab-icon { width: 14px; height: 14px; flex: none; }

.lb-connect-code {
  border: 1px solid var(--lb-connect-border); border-radius: var(--lb-radius);
  background: var(--lb-connect-bg); overflow: hidden;
}
.lb-connect-code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-bottom: 1px solid var(--lb-connect-border); background: var(--lb-connect-bar);
}
.lb-connect-file {
  font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.75rem; color: var(--lb-connect-muted);
}
.lb-connect-copy {
  padding: 0.3125rem 0.75rem; border-radius: 6px; border: 0; cursor: pointer;
  font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--lb-primary);
}
.dark .lb-connect-copy { background: var(--lb-primary-dk); }
.lb-connect-copy:hover { filter: brightness(1.08); }
.lb-connect-copy:focus-visible { filter: brightness(1.08); outline: none;
}

.lb-connect .lb-connect-pre {
  margin: 0 !important; padding: 1rem 1.125rem !important;
  min-height: 7.5rem; overflow-x: auto;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.8125rem; line-height: 1.65; white-space: pre;
}
.lb-connect-placeholder {
  color: inherit; background: rgba(88, 60, 239, 0.12);
  border-radius: 3px; padding: 0 2px;
  text-decoration: underline wavy rgba(88, 60, 239, 0.55); text-underline-offset: 3px;
}
.dark .lb-connect-placeholder { background: rgba(124, 107, 255, 0.2); }

.lb-connect-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1.125rem; border-top: 1px solid var(--lb-connect-border);
  background: var(--lb-connect-bar); cursor: pointer;
}
.lb-connect-option-label { display: block; font-size: 0.8125rem; font-weight: 600; }
.lb-connect-option-desc { display: block; font-size: 0.75rem; color: var(--lb-connect-muted); }
.lb-connect-option input {
  appearance: none; flex: none; position: relative; cursor: pointer;
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--lb-connect-border); transition: background 0.15s ease;
}
.lb-connect-option input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease;
}
.lb-connect-option input:checked { background: var(--lb-primary); }
.lb-connect-option input:checked::after { transform: translateX(14px); }

.lb-connect-hint { margin: 0.625rem 0 0 !important; font-size: 0.8125rem; color: var(--lb-connect-muted); }

/* Landing page: copy on the left, panel on the right. */
.lb-landing-mcp {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem; align-items: start;
  padding-bottom: 4rem; margin-bottom: 4rem;
  border-bottom: 1px solid var(--lb-border);
}
.dark .lb-landing-mcp { border-bottom-color: #1F1F1F; }
.lb-landing-mcp .lb-connect { margin: 0; }
.lb-landing-mcp-copy .lb-eyebrow { margin-top: 0; }
.lb-landing-mcp-copy h2 { margin: 0 0 1rem; font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.02em; }
.lb-landing-mcp-copy p { margin: 0 0 1.25rem; color: var(--lb-muted-fg); line-height: 1.65; }
.dark .lb-landing-mcp-copy p { color: #A3A3A3; }
.lb-landing-mcp-link { font-weight: 600; color: var(--accent) !important; text-decoration: none !important; }
.lb-landing-mcp-link:hover { text-decoration: underline !important; }
.lb-landing-mcp-link:focus-visible { text-decoration: underline !important; outline: none;
}

.lb-landing-cli { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lb-landing-cli .lb-agent { margin: 0; order: -1; }

@media (max-width: 1024px) {

  .lb-landing-mcp { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .lb-landing-cli .lb-agent { order: 0; }

}

/* ---------------------------------------------------------------------------
   Coding-agent terminal on the CLI page (components/AgentTerminal.tsx).
   -------------------------------------------------------------------------*/
.lb-agent {
  --lb-agent-ink: #0A0A0A;
  --lb-agent-bg: #FFFFFF;
  --lb-agent-bar: #FAFAFA;
  --lb-agent-border: var(--lb-border);
  --lb-agent-muted: var(--lb-muted-fg);
  margin: 1.5rem 0 2rem;
  min-width: 0;
}
.dark .lb-agent {
  --lb-agent-ink: #E5E5E5;
  --lb-agent-bg: #111111;
  --lb-agent-bar: #171717;
  --lb-agent-border: #262626;
  --lb-agent-muted: #A3A3A3;
}

.lb-agent-term {
  border: 1px solid var(--lb-agent-border); border-radius: calc(var(--lb-radius) + 4px);
  background: var(--lb-agent-bg); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.12);
}
.lb-agent-bar {
  position: relative; display: flex; align-items: center;
  padding: 0.625rem 0.875rem; background: var(--lb-agent-bar);
  border-bottom: 1px solid var(--lb-agent-border);
}
.dark .lb-agent-bar .lb-terminal-dots span { background: #404040; }
.lb-agent-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6875rem; font-weight: 700; color: var(--lb-agent-muted);
}

.lb-agent-body {
  display: flex; flex-direction: column; gap: 0.625rem;
  min-height: 21rem; padding: 1.125rem 1.375rem 1.375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78125rem; line-height: 1.55; color: var(--lb-agent-ink);
}
.lb-agent .lb-agent-banner {
  margin: 0 0 0.5rem !important; padding: 0 !important; overflow: visible;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  font-family: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  font-size: calc(var(--lb-banner-size, 7) * 1px); line-height: 1; letter-spacing: 0; white-space: pre;
  font-variant-ligatures: none; color: var(--lb-agent-ink);
  max-width: 100%; overflow-x: auto; overflow-y: hidden;
}
.lb-agent .lb-agent-banner-gradient {
  background-image: linear-gradient(90deg, #4796E4, #847ACE, #C3677F) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lb-agent { --lb-hermes-1: #B8860B; --lb-hermes-2: #A86F00; --lb-hermes-3: #8B5A2B; }
.dark .lb-agent { --lb-hermes-1: #FFD700; --lb-hermes-2: #FFBF00; --lb-hermes-3: #CD7F32; }
@media (max-width: 640px) {

  .lb-agent .lb-agent-banner { font-size: calc(var(--lb-banner-size, 7) * 0.7px); }

}
.lb-agent-line {
  display: grid; grid-template-columns: 1.5ch minmax(0, 1fr); gap: 0.75ch;
  overflow-wrap: anywhere;
  opacity: 0; animation: lb-agent-in 0.3s ease forwards;
  animation-delay: calc(var(--i) * 0.45s + 0.15s);
}
.lb-agent-prompt { color: var(--lb-agent-muted); }
.lb-agent-mark { color: var(--lb-agent-color); }
.lb-agent-call strong { font-weight: 700; }
.lb-agent-out { color: var(--lb-agent-muted); padding-left: 2.25ch; margin-top: -0.375rem; }
.lb-agent-reply { margin-top: 0.25rem; }
.lb-agent-caret {
  display: inline-block; width: 0.6em; height: 1.1em; vertical-align: text-bottom;
  background: var(--lb-agent-ink); animation: lb-blink 1s steps(1) infinite;
}
@keyframes lb-agent-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {

  .lb-agent-line { opacity: 1; animation: none; }
  .lb-agent-caret { animation: none; }

}

.lb-agent-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.875rem; }
.lb-agent-tab {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  padding: 0.375rem 0.6875rem; border-radius: 999px; cursor: pointer;
  font-size: 0.75rem; font-weight: 500; color: var(--lb-agent-muted);
  background: var(--lb-agent-bg); border: 1px solid var(--lb-agent-border);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lb-agent-tab:hover { color: var(--lb-agent-ink); transform: translateY(-1px); }
.lb-agent-tab:focus-visible { color: var(--lb-agent-ink); transform: translateY(-1px); outline: none;
}
.lb-agent-tab[aria-selected="true"] {
  color: var(--lb-agent-ink); border-color: var(--lb-agent-color);
  box-shadow: 0 0 0 1px var(--lb-agent-color);
}
.lb-agent-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lb-agent-color); flex: none; }