@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ==========================================================================
   Conductor Docs — Zinc + Orkes Purple Theme (Light + Dark)
   Inter × IBM Plex Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- Tokens — Light (default) ---------- */
:root {
  --c-bg: #ffffff;
  --c-bg-secondary: #f4f4f5;
  --c-bg-tertiary: #e4e4e7;
  --c-border: #d4d4d8;
  --c-border-dim: #e4e4e7;
  --c-text: #09090b;
  --c-text-muted: #52525b;
  --c-text-dim: #71717a;
  --c-accent: #6c37bd;
  --c-accent-hover: #492687;
  --c-blue: #3b82f6;
  --c-green: #22c55e;
  --c-header-bg: rgba(255, 255, 255, 0.85);

  --font-body: "Inter", -apple-system, "system-ui", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --shadow-card: 0 4px 16px rgba(0,0,0,0.06);
  --shadow-elevated: 0 12px 40px rgba(0,0,0,0.1);

  /* MkDocs Material overrides */
  --md-primary-fg-color: var(--c-bg);
  --md-primary-fg-color--light: var(--c-bg-tertiary);
  --md-primary-fg-color--dark: var(--c-bg);
  --md-accent-fg-color: var(--c-accent);
  --md-typeset-font-size: 0.85rem;
  --md-default-bg-color: var(--c-bg);
  --md-default-fg-color: var(--c-text);
  --md-default-fg-color--light: var(--c-text-muted);
  --md-default-fg-color--lighter: var(--c-text-dim);
  --md-default-fg-color--lightest: var(--c-border);
}

/* ---------- Tokens — Dark (slate) ---------- */
[data-md-color-scheme="slate"] {
  --c-bg: #09090b;
  --c-bg-secondary: #18181b;
  --c-bg-tertiary: #27272a;
  --c-border: #3f3f46;
  --c-border-dim: #27272a;
  --c-text: #fafafa;
  --c-text-muted: #a1a1aa;
  --c-text-dim: #71717a;
  --c-header-bg: rgba(9, 9, 11, 0.85);

  --shadow-card: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-elevated: 0 12px 40px rgba(0,0,0,0.4);

  --md-default-bg-color: var(--c-bg);
  --md-default-fg-color: var(--c-text);
  --md-default-fg-color--light: var(--c-text-muted);
  --md-default-fg-color--lighter: var(--c-text-dim);
  --md-default-fg-color--lightest: var(--c-border);
  --md-typeset-color: var(--c-text-muted);
  --md-code-bg-color: var(--c-bg-secondary);
  --md-code-fg-color: var(--c-text);
  --md-typeset-a-color: var(--c-blue);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body) !important;
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  background: var(--c-bg) !important;
}

/* ---------- Header ---------- */
.md-header {
  background: var(--c-header-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-text) !important;
  border-bottom: 1px solid var(--c-border);
  box-shadow: none !important;
}
.md-header[data-md-state="shadow"] {
  box-shadow: 0 1px 8px rgba(0,0,0,0.3) !important;
}
.md-header__title {
  font-family: var(--font-body) !important;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text) !important;
}
.md-logo img { height: 30px !important; }
[data-md-color-scheme="slate"] .md-logo img {
  filter: brightness(0) invert(1);
}

/* Tabs */
.md-tabs {
  background: var(--c-header-bg) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}
/* Material hides the tab bar below 76.25em and falls back to the drawer, but
   the home page hides drawer navigation (hide: navigation), leaving that page
   with no navigation at all on narrow screens. The tab list is natively a
   scrollable nowrap flex row, so keep the bar visible as a swipeable strip. */
@media screen and (max-width: 76.234375em) {
  .md-tabs {
    display: block;
  }
}
.md-tabs__link {
  font-family: var(--font-body) !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text-dim) !important;
  letter-spacing: 0;
  opacity: 1 !important;
}
.md-tabs__item--active > .md-tabs__link,
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--c-text) !important;
}
.md-tabs__item--active > .md-tabs__link {
  border-bottom: 2px solid var(--c-accent);
  font-weight: 600;
}

/* ---------- Quickstart language pickers ---------- */
.agent-language-picker,
.worker-language-picker {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-secondary);
}
.agent-language-picker > label,
.worker-language-picker > label {
  display: block;
  margin-bottom: 6px;
  color: var(--c-text);
  font-size: 13px;
  font-weight: 700;
}
.agent-language-picker > select,
.worker-language-picker > select {
  min-width: 220px;
  padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-text);
  font: inherit;
}
.agent-language-picker > p,
.worker-language-picker > p {
  margin: 6px 0 16px !important;
  color: var(--c-text-muted);
  font-size: 13px;
}
.agent-language-guide > :last-child,
.worker-language-guide > :last-child {
  margin-bottom: 0;
}
.agent-language-guide__heading,
.worker-language-guide__heading {
  margin: 20px 0 12px !important;
  color: var(--c-text);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- Typography (docs pages) ---------- */
.md-typeset h1 {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  color: var(--c-text) !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 10px !important;
}
.md-typeset h2 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: var(--c-text) !important;
  line-height: 1.3;
  margin-top: 28px;
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: none;
}
.md-typeset h3 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--c-text) !important;
  margin-top: 24px;
  margin-bottom: 8px;
}
.md-typeset h4 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  color: var(--c-text-muted) !important;
  margin-top: 18px;
  margin-bottom: 6px;
}
.md-typeset {
  line-height: 1.6;
  color: var(--c-text-muted);
  font-size: 15px;
}
.md-typeset p {
  margin-top: 0;
  margin-bottom: 12px;
}
.md-typeset ul,
.md-typeset ol {
  margin-top: 0;
  margin-bottom: 12px;
}
.md-typeset li + li {
  margin-top: 3px;
}
.md-typeset a {
  color: var(--c-blue);
  text-decoration-color: rgba(59, 130, 246, 0.3);
  text-underline-offset: 2px;
}
.md-typeset a:hover {
  color: #60a5fa;
  text-decoration-color: rgba(59, 130, 246, 0.6);
}

/*
 * Inline code inside a link. Material colours it with --md-typeset-a-color,
 * which in the default (light) scheme resolves to --md-primary-fg-color —
 * white here — making linked inline code invisible on its light pill. The
 * slate block already redefines --md-typeset-a-color; light mode does not,
 * so colour it with the link blue explicitly.
 */
.md-typeset a code {
  color: var(--c-blue) !important;
}
.md-typeset a:hover code,
.md-typeset a:focus code {
  color: #60a5fa !important;
}

/* ---------- Compact page summaries ---------- */
.page-summary {
  display: flex;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: linear-gradient(115deg, rgba(59, 130, 246, 0.1), transparent 55%), var(--c-bg-secondary);
}
.page-summary__text {
  margin: 0 !important;
  color: var(--c-text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.page-summary__source {
  margin: 8px 0 0 !important;
  font-size: 13px;
}

/* ---------- Concept heroes ---------- */
.concept-hero {
  --concept-accent: var(--c-blue);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
  align-items: center;
  gap: 28px;
  margin: 24px 0 30px;
  padding: 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--concept-accent) 15%, transparent), transparent 62%), var(--c-bg-secondary);
}
.concept-hero--workflows { --concept-accent: #2563eb; }
.concept-hero--tasks { --concept-accent: #7c3aed; }
.concept-hero--workers { --concept-accent: #0f766e; }
.concept-hero--event-bus { --concept-accent: #492687; }
.concept-hero--cookbook { --concept-accent: #0f766e; }
.concept-hero__content > :last-child {
  margin-bottom: 0;
}
.concept-hero__eyebrow {
  margin: 0 0 6px !important;
  color: var(--concept-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.concept-hero h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
}
.concept-hero__graphic {
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--concept-accent);
}
/* Graphic-only hero (no __content column): span the grid and center. */
.concept-hero__graphic:only-child {
  grid-column: 1 / -1;
  max-width: 560px;
  margin: 0 auto;
}
.concept-hero:has(> .concept-hero__graphic:only-child) {
  padding: 13px;
}
/* Diagram-only agent hero: span the grid, center, and tighten. */
.agent-runtime-hero > .agent-runtime-hero__diagram:only-child {
  grid-column: 1 / -1;
  max-width: 620px;
  margin: 0 auto;
}
.agent-runtime-hero:has(> .agent-runtime-hero__diagram:only-child) {
  padding: 13px;
}
.agent-concepts-hero > .agent-concepts-hero__diagram:only-child {
  grid-column: 1 / -1;
  max-width: 660px;
  margin: 0 auto;
}
.agent-concepts-hero:has(> .agent-concepts-hero__diagram:only-child) {
  padding: 12px;
}
.concept-hero__node,
.concept-hero__outcome-box {
  fill: var(--c-bg);
  stroke: var(--c-text-muted);
  stroke-width: 2;
}
.concept-hero__node--accent {
  fill: color-mix(in srgb, var(--concept-accent) 14%, var(--c-bg));
  stroke: var(--concept-accent);
}
.concept-hero__outcome {
  fill: color-mix(in srgb, var(--concept-accent) 14%, var(--c-bg));
  stroke: var(--concept-accent);
  stroke-width: 2;
}
.concept-hero__line {
  fill: none;
  stroke: var(--c-text-muted);
  stroke-width: 2;
}
.concept-hero__line--inside {
  stroke: var(--concept-accent);
  stroke-width: 3;
}
.concept-hero__check {
  fill: none;
  stroke: var(--concept-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}
.concept-hero__label {
  fill: var(--c-text);
  font-size: 13px;
  font-weight: 700;
}
.concept-hero__detail {
  fill: var(--c-text-muted);
  font-size: 11px;
}
.concept-hero--event-bus .event-hero__node--broker {
  fill: color-mix(in srgb, #2563eb 11%, var(--c-bg));
  stroke: #2563eb;
}
.concept-hero--event-bus .event-hero__node--action {
  fill: color-mix(in srgb, #0f766e 11%, var(--c-bg));
  stroke: #0f766e;
}
.concept-hero--event-bus .event-hero__line--dashed {
  stroke-dasharray: 5 4;
}
.event-bus-hero__visual {
  display: grid;
  min-width: 0;
  gap: 14px;
}
.event-bus-hero__brokers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.event-bus-hero__broker {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: #fff;
  color: #1f2937;
  font-size: 12px;
  font-weight: 700;
}
.event-bus-hero__broker img {
  display: block;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  object-fit: contain;
}
.event-bus-hero__broker span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-bus-hero__flow {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  color: var(--c-text-muted);
  font-size: 11px;
  text-align: center;
}
.event-bus-hero__flow b {
  color: var(--concept-accent);
  font-size: 16px;
}
.event-bus-hero__flow strong {
  padding: 6px 8px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--concept-accent) 15%, var(--c-bg));
  color: var(--c-text);
  font-size: 12px;
  line-height: 1.25;
}
.event-bus-hero__flow small {
  color: var(--c-text-muted);
  font-size: 10px;
  font-weight: 500;
}
.event-bus-recipes {
  margin: 18px 0 0;
}
.event-bus-recipes__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}
.event-bus-recipes__link:hover {
  background: #492687;
  border-color: #492687;
}

/* ---------- Cookbook landing ---------- */
.cookbook-hero__sources rect {
  fill: var(--c-bg);
  stroke: var(--c-text-muted);
  stroke-width: 2;
}
.cookbook-hero__sources text {
  fill: var(--c-text);
  font-size: 12px;
  font-weight: 700;
}
.cookbook-grid {
  --cookbook-accent: #0f766e;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}
.cookbook-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-secondary);
  color: var(--c-text) !important;
  text-decoration: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cookbook-card:hover {
  border-color: var(--cookbook-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.cookbook-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--cookbook-accent) 35%, transparent);
  outline-offset: 3px;
}
.cookbook-card__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--cookbook-accent) 14%, var(--c-bg));
  color: var(--cookbook-accent);
}
.cookbook-card__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.cookbook-card__body {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.cookbook-card__body strong {
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.25;
}
.cookbook-card__body span {
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.cookbook-card__arrow {
  color: var(--cookbook-accent);
  font-size: 21px;
  font-weight: 700;
}

/* ---------- Agent discovery ---------- */
.agent-concepts-callout,
.framework-hero {
  margin: 24px 0 30px;
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(108, 55, 189, 0.12), transparent 58%), var(--c-bg-secondary);
}
.agent-concepts-callout h2,
.framework-hero h2 {
  margin: 0 0 8px;
}
.agent-concepts-callout p:last-child,
.framework-hero p:last-child {
  margin-bottom: 0;
}
.agent-concepts-kicker,
.framework-hero__eyebrow {
  margin: 0 0 6px !important;
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.framework-logo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.framework-logo-grid--quickstart {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.framework-logo-card {
  display: flex;
  min-height: 118px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-text) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.framework-logo-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-card);
  color: var(--c-text) !important;
  transform: translateY(-2px);
}
.framework-logo-card:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
}
.framework-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.framework-logo--wide {
  width: 104px;
}
.framework-heading-logo {
  width: 24px;
  height: 24px;
  margin-right: 7px;
  vertical-align: -5px;
}
.framework-heading-logo--wide {
  width: 74px;
}
[data-md-color-scheme="slate"] .framework-logo,
[data-md-color-scheme="slate"] .framework-heading-logo {
  filter: brightness(0) invert(1);
}
.integration-hero {
  --integration-accent: var(--c-accent);
  margin: 24px 0 30px;
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--integration-accent) 16%, transparent), transparent 58%), var(--c-bg-secondary);
}
.integration-hero--a2a { --integration-accent: #2563eb; }
.integration-hero--mcp { --integration-accent: #7c3aed; }
.integration-hero--hitl { --integration-accent: #00a6a6; }
.integration-hero--durable { --integration-accent: #6c37bd; }
.integration-hero--workflow { --integration-accent: #2563eb; }
.integration-hero--first-agent { --integration-accent: #7c3aed; }
.integration-hero--agents { --integration-accent: var(--c-accent); }
.integration-hero--guardrails { --integration-accent: #0f766e; }
.integration-hero--evals { --integration-accent: #7e22ce; }
.integration-hero h2 {
  margin: 0 0 8px;
}
.integration-hero__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  margin-bottom: 14px;
}
.integration-hero__identity--conductor {
  justify-content: flex-start;
}
.integration-hero__logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.integration-hero__logo--conductor {
  width: 132px;
}
.integration-hero__connector {
  color: var(--integration-accent);
  font-size: 24px;
  font-weight: 700;
}
.integration-hero__eyebrow {
  margin: 0 0 6px !important;
  color: var(--integration-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.integration-hero__diagram {
  display: block;
  width: 100%;
  margin: 22px 0 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
}

/* ---------- Agents & AI runtime hero ---------- */
.agent-runtime-hero {
  --agent-authoring: #c2410c;
  --agent-brain: #7c3aed;
  --agent-runtime: #2563eb;
  --agent-hands: #0f766e;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  align-items: center;
  gap: 28px;
  margin: 24px 0 34px;
  padding: 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--agent-brain) 12%, transparent), transparent 44%),
    linear-gradient(315deg, color-mix(in srgb, var(--agent-hands) 12%, transparent), transparent 44%),
    var(--c-bg-secondary);
}
.agent-runtime-hero__content > :last-child {
  margin-bottom: 0;
}
.agent-runtime-hero__eyebrow {
  margin: 0 0 6px !important;
  color: var(--agent-runtime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agent-runtime-hero h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.16;
}
.agent-runtime-hero__paths {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}
.agent-runtime-hero__paths a {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--agent-runtime) 42%, var(--c-border));
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--agent-runtime);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.agent-runtime-hero__paths a:hover {
  border-color: var(--agent-runtime);
  color: var(--agent-runtime);
}
.agent-runtime-hero__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 600;
}
.agent-runtime-hero__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.agent-runtime-hero__swatch {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.agent-runtime-hero__swatch--authoring { background: var(--agent-authoring); }
.agent-runtime-hero__swatch--brain { background: var(--agent-brain); }
.agent-runtime-hero__swatch--runtime { background: var(--agent-runtime); }
.agent-runtime-hero__swatch--hands { background: var(--agent-hands); }
.agent-runtime-hero__diagram {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.agent-runtime-hero__lane-label,
.agent-runtime-hero__compile {
  fill: var(--c-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.agent-runtime-hero__compile {
  fill: var(--agent-runtime);
  font-size: 10px;
}
.agent-runtime-hero__brain-box {
  fill: color-mix(in srgb, var(--agent-brain) 10%, var(--c-bg));
  stroke: color-mix(in srgb, var(--agent-brain) 55%, var(--c-border));
  stroke-width: 1.5;
}
.agent-runtime-hero__authoring-box {
  fill: color-mix(in srgb, var(--agent-authoring) 9%, var(--c-bg));
  stroke: color-mix(in srgb, var(--agent-authoring) 55%, var(--c-border));
  stroke-width: 1.5;
}
.agent-runtime-hero__authoring-card {
  fill: var(--c-bg);
  stroke: var(--agent-authoring);
  stroke-width: 1.5;
}
.agent-runtime-hero__brain-card {
  fill: var(--c-bg);
  stroke: var(--agent-brain);
  stroke-width: 1.5;
}
.agent-runtime-hero__runtime-box {
  fill: color-mix(in srgb, var(--agent-runtime) 13%, var(--c-bg));
  stroke: var(--agent-runtime);
  stroke-width: 2;
}
.agent-runtime-hero__hands-card {
  fill: color-mix(in srgb, var(--agent-hands) 10%, var(--c-bg));
  stroke: color-mix(in srgb, var(--agent-hands) 72%, var(--c-border));
  stroke-width: 1.5;
}
.agent-runtime-hero__label,
.agent-runtime-hero__runtime-title {
  fill: var(--c-text);
  font-size: 13px;
  font-weight: 700;
}
.agent-runtime-hero__runtime-title {
  fill: var(--agent-runtime);
  font-size: 15px;
}
.agent-runtime-hero__runtime-title--brain { fill: var(--agent-brain); }
.agent-runtime-hero__detail,
.agent-runtime-hero__runtime-detail {
  fill: var(--c-text-muted);
  font-size: 10px;
}
.agent-runtime-hero__runtime-detail { font-size: 11px; }
.agent-runtime-hero__arrow,
.agent-runtime-hero__runtime-rule {
  fill: none;
  stroke: var(--c-text-muted);
  stroke-width: 1.75;
}
.agent-runtime-hero__arrow--runtime,
.agent-runtime-hero__runtime-rule {
  stroke: var(--agent-runtime);
}
.agent-runtime-hero__arrowhead { fill: var(--c-text-muted); }
.agent-runtime-hero__arrowhead--runtime { fill: var(--agent-runtime); }
.agent-runtime-hero__turn-loop {
  fill: none;
  stroke: var(--agent-runtime);
  stroke-dasharray: 5 4;
  stroke-width: 1.75;
}

/* ---------- AI Cookbook hero ---------- */
.ai-cookbook-hero {
  --ai-cookbook-input: #0f766e;
  --ai-cookbook-ai: #7c3aed;
  --ai-cookbook-control: #2563eb;
  --ai-cookbook-outcome: #c2410c;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(350px, 1.1fr);
  align-items: center;
  gap: 28px;
  margin: 24px 0 34px;
  padding: 13px 26px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ai-cookbook-ai) 12%, transparent), transparent 45%),
    linear-gradient(315deg, color-mix(in srgb, var(--ai-cookbook-input) 12%, transparent), transparent 45%),
    var(--c-bg-secondary);
}
.ai-cookbook-hero__content > :last-child { margin-bottom: 0; }
.ai-cookbook-hero__eyebrow {
  margin: 0 0 6px !important;
  color: var(--ai-cookbook-control);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ai-cookbook-hero h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.16;
}
.ai-cookbook-hero__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 600;
}
.ai-cookbook-hero__legend span { display: inline-flex; align-items: center; gap: 6px; }
.ai-cookbook-hero__swatch { width: 9px; height: 9px; border-radius: 50%; }
.ai-cookbook-hero__swatch--input { background: var(--ai-cookbook-input); }
.ai-cookbook-hero__swatch--ai { background: var(--ai-cookbook-ai); }
.ai-cookbook-hero__swatch--control { background: var(--ai-cookbook-control); }
.ai-cookbook-hero__swatch--outcome { background: var(--ai-cookbook-outcome); }
.ai-cookbook-hero__diagram { display: block; width: 100%; min-width: 0; overflow: visible; }
.ai-cookbook-hero__lane,
.ai-cookbook-hero__caption {
  fill: var(--c-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.ai-cookbook-hero__caption { fill: var(--ai-cookbook-control); letter-spacing: 0.02em; }
.ai-cookbook-hero__family { fill: var(--c-bg); stroke-width: 1.5; }
.ai-cookbook-hero__family--workflows { stroke: var(--ai-cookbook-ai); }
.ai-cookbook-hero__family--agents { stroke: var(--ai-cookbook-control); }
.ai-cookbook-hero__starter { fill: color-mix(in srgb, var(--ai-cookbook-control) 12%, var(--c-bg)); stroke: var(--ai-cookbook-control); stroke-width: 2; }
.ai-cookbook-hero__model { fill: color-mix(in srgb, var(--ai-cookbook-ai) 11%, var(--c-bg)); stroke: var(--ai-cookbook-ai); stroke-width: 1.25; }
.ai-cookbook-hero__policy { fill: color-mix(in srgb, var(--ai-cookbook-control) 13%, var(--c-bg)); stroke: var(--ai-cookbook-control); stroke-width: 1.25; }
.ai-cookbook-hero__outcome { fill: color-mix(in srgb, var(--ai-cookbook-outcome) 11%, var(--c-bg)); stroke: var(--ai-cookbook-outcome); stroke-width: 1.5; }
.ai-cookbook-hero__label,
.ai-cookbook-hero__starter-title { fill: var(--c-text); font-size: 12px; font-weight: 700; }
.ai-cookbook-hero__starter-title { fill: var(--ai-cookbook-control); font-size: 16px; }
.ai-cookbook-hero__detail { fill: var(--c-text-muted); font-size: 10px; }
.ai-cookbook-hero__policy-text { fill: var(--ai-cookbook-control); font-size: 10px; font-weight: 700; }
.ai-cookbook-hero__arrow { fill: none; stroke: var(--c-text-muted); stroke-width: 1.75; }
.ai-cookbook-hero__arrow--control { stroke: var(--ai-cookbook-control); }
.ai-cookbook-hero__arrowhead { fill: var(--c-text-muted); }
.ai-cookbook-hero__arrowhead--control { fill: var(--ai-cookbook-control); }
.ai-cookbook-hero__check { fill: none; stroke: var(--ai-cookbook-outcome); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }

/* ---------- Workflow diagrams ---------- */
.md-typeset .workflow-diagram {
  display: grid;
  place-items: center;
  margin: 22px 0 28px;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 7%, transparent), transparent 52%),
    var(--c-bg-secondary);
  box-shadow: var(--shadow-card);
}
.md-typeset .workflow-diagram .mermaid {
  width: 100%;
  margin: 0;
  background: transparent;
}
/* Material's mermaid themeCSS forces label text to --md-mermaid-font-family.
   Custom properties inherit into the closed shadow root Material renders the
   SVG into, so overriding the variable here is the only way to restyle
   diagram type. Deliberately the system stack, not the Inter webfont: Mermaid
   measures labels at render time, and a late-loading webfont swaps in with
   wider metrics and clips the last characters (e.g. "Conductor serve|r").
   Must match fontFamily in main.py's MERMAID_WORKFLOW_INIT. */
.md-typeset .workflow-diagram {
  --md-mermaid-font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.md-typeset .workflow-diagram .mermaid svg {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 1180px;
  min-width: 520px;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  .md-typeset .workflow-diagram { padding: 14px; }
  .md-typeset .workflow-diagram .mermaid svg { min-width: 440px; }
}
/* Subgraph fill/border are set via clusterBkg and clusterBorder in
   MERMAID_WORKFLOW_INIT (main.py), not here. */

/* ---------- Agent concepts decision guide ---------- */
.agent-concepts-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: 26px;
  margin: 22px 0 30px;
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 10%, transparent), transparent 48%),
    linear-gradient(315deg, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 48%),
    var(--c-bg-secondary);
}
.agent-concepts-hero__content > :last-child { margin-bottom: 0; }
.agent-concepts-hero__eyebrow,
.agent-concepts-path__eyebrow {
  margin: 0 0 6px !important;
  color: var(--c-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.agent-concepts-hero h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.16;
}
.agent-concepts-hero__diagram {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}
.agent-concepts-hero__lane {
  fill: var(--c-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.agent-concepts-hero__source { fill: var(--c-bg); stroke-width: 1.5; }
.agent-concepts-hero__source--workflow { stroke: var(--c-blue); }
.agent-concepts-hero__source--sdk { stroke: var(--c-accent); }
.agent-concepts-hero__source--a2a { stroke: #0f766e; }
.agent-concepts-hero__conductor {
  fill: color-mix(in srgb, var(--c-blue) 11%, var(--c-bg));
  stroke: var(--c-blue);
  stroke-width: 2;
}
.agent-concepts-hero__outcome {
  fill: color-mix(in srgb, var(--c-accent) 10%, var(--c-bg));
  stroke: var(--c-accent);
  stroke-width: 1.5;
}
.agent-concepts-hero__title,
.agent-concepts-hero__conductor-title {
  fill: var(--c-text);
  font-size: 13px;
  font-weight: 700;
}
.agent-concepts-hero__conductor-title { fill: var(--c-blue); font-size: 18px; }
.agent-concepts-hero__detail,
.agent-concepts-hero__conductor-detail {
  fill: var(--c-text-muted);
  font-size: 10px;
}
.agent-concepts-hero__conductor-detail { font-size: 11px; }
.agent-concepts-hero__arrow,
.agent-concepts-hero__rule {
  fill: none;
  stroke: var(--c-text-muted);
  stroke-width: 1.75;
}
.agent-concepts-hero__arrow--out,
.agent-concepts-hero__rule { stroke: var(--c-blue); }
.agent-concepts-hero__arrowhead { fill: var(--c-text-muted); }
.agent-concepts-paths,
.agent-concepts-next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 28px;
}
.agent-concepts-path,
.agent-concepts-next-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 17px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-secondary);
  overflow-wrap: anywhere;
}
.agent-concepts-path h3 {
  margin: 0 0 12px;
  color: var(--c-text);
  font-size: 17px;
}
.agent-concepts-path dl {
  display: grid;
  gap: 5px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 13px;
  line-height: 1.45;
}
.agent-concepts-path dt { color: var(--c-text); font-weight: 700; }
.agent-concepts-path dd {
  margin: 0 0 7px;
  margin-left: 0 !important;
  margin-inline-start: 0;
  padding-left: 0 !important;
  padding-inline-start: 0;
  color: var(--c-text-muted);
}
.agent-concepts-path a {
  display: inline-block;
  margin-top: auto;
  font-weight: 700;
  white-space: nowrap;
}
.agent-concepts-next-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--c-text-muted) !important;
  font-size: 13px;
  line-height: 1.45;
  text-decoration: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.agent-concepts-next-step strong { color: var(--c-text); font-size: 15px; }
.agent-concepts-next-step:hover {
  border-color: var(--c-blue);
  box-shadow: var(--shadow-card);
  color: var(--c-text-muted) !important;
  transform: translateY(-2px);
}
.agent-concepts-next-step:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-blue) 40%, transparent);
  outline-offset: 3px;
}

/* ---------- Agents & AI overview cards ---------- */
.agent-overview-grid {
  display: grid;
  gap: 12px;
  margin: 18px 0 28px;
}
.agent-overview-grid--three,
.agent-overview-grid--outcomes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.agent-overview-grid--principles {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.agent-overview-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
  padding: 17px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-secondary);
  color: var(--c-text-muted) !important;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.agent-overview-card > strong {
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.3;
}
.agent-overview-card--link {
  text-decoration: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.agent-overview-card--link:hover {
  border-color: var(--c-blue);
  box-shadow: var(--shadow-card);
  color: var(--c-text-muted) !important;
  transform: translateY(-2px);
}
.agent-overview-card--link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-blue) 40%, transparent);
  outline-offset: 3px;
}
.agent-overview-card__kicker,
.agent-overview-card__number {
  color: var(--c-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.agent-overview-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: auto;
  padding-top: 5px;
}
.agent-overview-card__links a {
  font-weight: 700;
}
.integration-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.integration-hero > .integration-action-grid:first-child {
  margin-top: 0;
}
/* Home tab — OSS page design (Figma 6748:486). Palette sampled from the frame:
   navy #1e2941, slate #475678, blue #1976d2, section bg #f8f9fa, card border #e8ebf0 */
.home-wrapper {
  --home-navy: #1e2941;
  --home-slate: #475678;
  --home-blue: #1976d2;
  --home-section-bg: #f8f9fa;
  --home-card-bg: #ffffff;
  --home-card-border: #e8ebf0;
  --home-chip-bg: #e8f1fb;
}
[data-md-color-scheme="slate"] .home-wrapper {
  --home-navy: #e6eaf2;
  --home-slate: #a6b0c3;
  --home-blue: #5ca3e6;
  --home-section-bg: #1a2130;
  --home-card-bg: #151b28;
  --home-card-border: #2b3446;
  --home-chip-bg: rgba(25, 118, 210, 0.18);
}
.home-wrapper .hero {
  text-align: center;
  padding: 56px 0 48px;
}
.home-wrapper .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid var(--home-card-border);
  border-radius: 999px;
  background: var(--home-card-bg);
  color: var(--home-navy);
  font-size: 0.82rem;
}
.home-wrapper .hero-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-blue);
}
.home-wrapper .hero-title {
  color: var(--home-navy);
  font-size: 3rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 20px 0 18px;
}
.home-wrapper .hero-subtitle {
  color: var(--home-slate);
  max-width: 720px;
  margin: 0 auto 14px;
  font-size: 1.02rem;
  line-height: 1.6;
}
.home-wrapper .hero-subtitle strong { color: var(--home-navy); }
.home-wrapper .hero-subtitle + .hero-subtitle { margin-top: 22px; }
.home-wrapper .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.home-wrapper .btn-primary {
  background: var(--home-blue);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.home-wrapper .btn-primary:hover { background: #1565c0; }
.home-wrapper .repo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--home-card-border);
  border-radius: 8px;
  background: var(--home-card-bg);
  color: var(--home-navy) !important;
  font-weight: 600;
}
.home-wrapper .home-skills-line {
  text-align: center;
  margin: 0;
  font-size: 0.95rem;
  color: var(--home-slate);
}
.home-skills-line a { color: var(--home-blue); font-weight: 600; }
.home-section {
  margin: 0 0 8px;
  padding: 48px 32px;
}
.home-section--alt {
  background: var(--home-section-bg);
  border-radius: 16px;
}
.home-section .section-header-inline {
  text-align: center;
  margin-bottom: 8px;
}
.home-section .section-header-inline h2 {
  color: var(--home-navy);
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
}
.home-section-sub {
  text-align: center;
  color: var(--home-slate);
  max-width: 640px;
  margin: 10px auto 26px;
}
.home-sdk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.home-sdk-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--home-card-border);
  border-radius: 12px;
  background: var(--home-card-bg);
  box-shadow: 0 1px 2px rgba(30, 41, 65, 0.05);
  text-decoration: none;
  color: inherit;
}
.home-sdk-card:hover { border-color: var(--home-blue); }
.home-sdk-card img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}
.home-sdk-card__meta { display: flex; flex-direction: column; min-width: 0; }
.home-sdk-card__meta strong { font-size: 0.95rem; color: var(--home-navy); }
.home-sdk-card__meta span {
  font-size: 0.78rem;
  color: var(--home-slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-sdk-card__arrow { margin-left: auto; color: var(--home-blue); }
/* Card look scoped to Home so other pages keep their own style */
.home-wrapper .integration-action-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--home-card-bg);
  border: 1px solid var(--home-card-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(30, 41, 65, 0.05);
  color: var(--home-slate);
  text-decoration: none;
}
.home-wrapper .integration-action-card:hover { border-color: var(--home-blue); }
.home-wrapper .integration-action-card__title {
  color: var(--home-navy);
  font-weight: 700;
  font-size: 1.02rem;
}
.home-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--home-chip-bg);
  color: var(--home-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.home-card-cta {
  margin-top: auto;
  padding-top: 12px;
  color: var(--home-blue);
  font-weight: 600;
  font-size: 0.88rem;
}
.home-wrapper .faq-section .section-header-inline h2 { color: var(--home-navy); }
@media (max-width: 900px) {
  .home-sdk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-wrapper .hero-title { font-size: 2.2rem; }
  .home-section { padding: 36px 18px; }
}
@media (max-width: 600px) {
  .home-sdk-grid { grid-template-columns: 1fr; }
}
.integration-action-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.integration-action-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.integration-action-card {
  display: flex;
  min-height: 102px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: var(--c-text-muted) !important;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.integration-action-card:hover {
  border-color: var(--integration-accent);
  box-shadow: var(--shadow-card);
  color: var(--c-text-muted) !important;
  transform: translateY(-2px);
}
.integration-action-card:focus-visible {
  outline: 3px solid var(--integration-accent);
  outline-offset: 3px;
}
.integration-action-card__title {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 700;
}
.agent-framework-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.agent-framework-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.agent-framework-strip__item img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
[data-md-color-scheme="slate"] .integration-hero__logo,
[data-md-color-scheme="slate"] .agent-framework-strip__item img {
  filter: brightness(0) invert(1);
}
@media screen and (max-width: 44.9375em) {
  .framework-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .integration-action-grid,
  .integration-action-grid--three,
  .integration-action-grid--four,
  .cookbook-grid,
  .agent-concepts-paths,
  .agent-concepts-next-steps,
  .agent-overview-grid--three,
  .agent-overview-grid--principles,
  .agent-overview-grid--outcomes {
    grid-template-columns: 1fr;
  }
  .agent-concepts-callout,
  .framework-hero,
  .integration-hero,
  .concept-hero,
  .agent-concepts-hero,
  .agent-runtime-hero {
    padding: 20px;
  }
  .agent-runtime-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ai-cookbook-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .agent-concepts-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .concept-hero {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Code */
.md-typeset code {
  font-family: var(--font-mono) !important;
  background: var(--c-bg-secondary);
  color: var(--c-text);
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-sm);
  padding: 0.08em 0.25em;
}
.md-typeset pre {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--c-border-dim);
  box-shadow: none;
  margin-top: 0.4rem !important;
  margin-bottom: 0.65rem !important;
}
.md-typeset pre > code {
  font-size: 14px !important;
  line-height: 1.5 !important;
  background: var(--c-bg-secondary) !important;
  color: var(--c-text-muted) !important;
  padding: 12px 16px !important;
  border-radius: var(--r-sm) !important;
  border: none;
  letter-spacing: 0 !important;
}
/* Syntax highlighting colors are scoped to [data-md-color-scheme="slate"] at bottom of file.
   Light mode uses Material's default syntax theme. */

/* Tables */
.md-typeset table:not([class]) {
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: none;
  font-size: 14px;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}
.md-typeset table:not([class]) th {
  background: var(--c-bg-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-border-dim);
  padding: 8px 12px;
}
.md-typeset table:not([class]) td {
  border-color: var(--c-border-dim);
  padding: 7px 12px;
}
.md-typeset table:not([class]) code {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.md-typeset table:not([class]) tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

/* Keep a short identifier in the first column on one line so it does not break
   mid-word when the second column holds a long description.
   Opt in with `## Heading { .wide-first-col }` on the heading above the table.
   `.schema-table-heading` is the original, narrower opt-in and behaves the same.

   Both `+ table` and `+ * table` are needed: the built HTML has the table as a
   direct sibling of the heading, but Material's JS then wraps it in
   div.md-typeset__scrollwrap, so a `+ table` selector alone matches the static
   page and silently stops matching in the browser. */
.md-typeset h2.schema-table-heading + table,
.md-typeset h2.schema-table-heading + * table,
.md-typeset h2.wide-first-col + table,
.md-typeset h3.wide-first-col + table,
.md-typeset h2.wide-first-col + * table,
.md-typeset h3.wide-first-col + * table {
  table-layout: auto;
  width: 100%;
}
.md-typeset h2.schema-table-heading + table th:first-child,
.md-typeset h2.schema-table-heading + table td:first-child,
.md-typeset h2.schema-table-heading + * table th:first-child,
.md-typeset h2.schema-table-heading + * table td:first-child,
.md-typeset h2.wide-first-col + table th:first-child,
.md-typeset h2.wide-first-col + table td:first-child,
.md-typeset h3.wide-first-col + table th:first-child,
.md-typeset h3.wide-first-col + table td:first-child,
.md-typeset h2.wide-first-col + * table th:first-child,
.md-typeset h2.wide-first-col + * table td:first-child,
.md-typeset h3.wide-first-col + * table th:first-child,
.md-typeset h3.wide-first-col + * table td:first-child {
  min-width: 15rem;
  white-space: nowrap;
}
.md-typeset h2.schema-table-heading + table td:first-child a,
.md-typeset h2.schema-table-heading + table td:first-child a code,
.md-typeset h2.schema-table-heading + * table td:first-child a,
.md-typeset h2.schema-table-heading + * table td:first-child a code,
.md-typeset h2.wide-first-col + table td:first-child a,
.md-typeset h3.wide-first-col + table td:first-child a,
.md-typeset h2.wide-first-col + * table td:first-child a,
.md-typeset h3.wide-first-col + * table td:first-child a {
  display: inline-block;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

/* Sidebar */
.md-sidebar {
  background: var(--c-bg) !important;
}
.md-nav__link {
  font-size: 13px;
  font-family: var(--font-body) !important;
  padding: 5px 9px;
  line-height: 1.4;
  color: var(--c-text-dim) !important;
}
.md-nav__link--active {
  color: var(--c-text) !important;
  font-weight: 600;
}
.md-nav__item--active > .md-nav__link,
.md-nav__item--active > .md-nav__link:is([for]),
.md-nav__item--nested > .md-nav__link,
label.md-nav__link[for] {
  background: transparent !important;
  color: var(--c-text-muted) !important;
}
.md-nav__link--active {
  background: var(--c-bg-secondary) !important;
  border-radius: var(--r-sm);
}
.md-nav__item--section > .md-nav__link {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-dim) !important;
  background: transparent !important;
}

/* Material only marks nav groups as --section inside the *active* tab's
   subtree. Pages linked by absolute URL (quickstart/first-agent.html?nav=...)
   match no nav entry, so no tab is active and every group falls back to a
   collapsible toggle — a chevron and an indent that appear on no other page.
   navigation.expand keeps these groups open anyway, so render nested groups
   the same way as sections and drop the decorative toggle. */
.md-sidebar--primary .md-nav__item--nested > .md-nav__link,
.md-sidebar--primary .md-nav__item--nested > label.md-nav__link {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-dim) !important;
  cursor: default;
}
.md-sidebar--primary .md-nav__item--nested > .md-nav__link .md-nav__icon {
  display: none !important;
}
.md-sidebar--primary .md-nav__item--nested > .md-nav,
.md-sidebar--primary .md-nav__item--nested > .md-nav > .md-nav__list {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Material pins the section container (.md-nav__container) to the top of the
   nav while its children scroll past. The rule above makes section links
   transparent, which let those children render straight through the pinned
   label. Restore an opaque background on the sticky element only. */
.md-nav__item--section > .md-nav__link.md-nav__container,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link.md-nav__container {
  background: var(--c-bg) !important;
}
label.md-nav__link {
  font-size: 13px;
  background: transparent !important;
}
.md-nav__title,
.md-nav__title[for],
.md-nav--primary .md-nav__title,
.md-nav--primary .md-nav__title[for],
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-nav--lifted .md-nav__title,
.md-nav--lifted .md-nav[data-md-level="1"] > .md-nav__title,
[data-md-level] > .md-nav__title {
  /* These titles are position:sticky in Material. A transparent background lets
     nav items scroll *through* the label, so the background must stay opaque. */
  background: var(--c-bg) !important;
  box-shadow: none !important;
  color: var(--c-text-dim) !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 10px !important;
}
.md-nav__item .md-nav,
.md-nav--lifted .md-nav,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav,
.md-nav[data-md-level="1"],
.md-nav[data-md-level="2"] {
  background: transparent !important;
}
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link--index,
.md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav__link {
  background: transparent !important;
  box-shadow: none !important;
}
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link.md-nav__container,
.md-nav--lifted > .md-nav__list > .md-nav__item--nested > .md-nav__link.md-nav__container,
.md-nav .md-nav__item--section > div.md-nav__link.md-nav__container {
  padding: 0 !important;
}
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link--index {
  padding-left: 8px !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-dim) !important;
}

/* Search */
.md-search__form {
  border-radius: var(--r-md) !important;
  background: var(--c-bg-secondary) !important;
  border: 1px solid var(--c-border) !important;
}
.md-search__input {
  font-family: var(--font-body) !important;
  color: var(--c-text) !important;
}
.md-search__input::placeholder {
  color: var(--c-text-dim) !important;
}
.md-search__icon {
  color: var(--c-text-dim) !important;
}

/* Admonitions */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--r-sm) !important;
  border-left: 3px solid;
  box-shadow: none;
  margin-top: 10px !important;
  margin-bottom: 12px !important;
  font-size: 14px !important;
  background: var(--c-bg-secondary);
}
.md-typeset .admonition .admonition-title,
.md-typeset details summary {
  font-size: 14px !important;
  padding: 8px 12px 8px 44px !important;
}
.md-typeset .admonition p,
.md-typeset details p {
  font-size: 14px !important;
  margin-bottom: 8px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Footer */
.md-footer {
  background: var(--c-bg) !important;
  border-top: 1px solid var(--c-border-dim);
}
.md-footer-meta {
  background: var(--c-bg) !important;
}
.md-footer-nav__link {
  color: var(--c-text) !important;
}
.md-footer-nav__title {
  color: var(--c-text) !important;
}
.md-footer-nav__direction {
  color: var(--c-text-muted) !important;
}
.md-copyright {
  color: var(--c-text-dim) !important;
}
.md-copyright a {
  color: var(--c-text-muted) !important;
}
.md-social__link svg {
  fill: var(--c-text-muted) !important;
}
.md-social__link:hover svg {
  fill: var(--c-accent) !important;
}
.md-footer-nav__link:hover .md-footer-nav__title {
  color: var(--c-accent) !important;
}

/* Main content area */
.md-main {
  background: var(--c-bg) !important;
}
.md-content {
  background: var(--c-bg) !important;
}

/* ==========================================================================
   HOME PAGE — full custom layout
   ========================================================================== */

.home-wrapper {
  position: relative;
  overflow: hidden;
  margin-bottom: -1.2rem;
}

.md-content article:has(> .home-wrapper) > h1 { display: none; }

.md-content:has(.home-wrapper) .md-content__inner {
  padding-top: 0;
  margin-top: 0;
  max-width: none;
}
.md-content:has(.home-wrapper) article {
  padding-top: 0;
}
.md-main:has(.home-wrapper) .md-main__inner {
  margin-top: 0;
}

/* ---------- Section Header Inline (pill + headline on same line) ---------- */
.section-header-inline {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.section-header-inline .section-label {
  position: relative;
  top: -0.1em;
}
.home-wrapper .section-header-inline h2 {
  font-family: var(--font-body) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Section Label ---------- */
.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  background: rgba(108, 55, 189, 0.1);
  border: 1px solid rgba(108, 55, 189, 0.2);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* ---------- Hero ---------- */
.hero {
  padding: 32px 0 40px;
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.hero-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--c-text-muted);
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 24px;
}
.home-wrapper .hero-title {
  font-family: var(--font-body) !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em;
  margin: 0 0 24px !important;
  padding: 0;
  text-align: center;
  color: var(--c-text) !important;
}
.hero-highlight {
  color: var(--c-accent) !important;
}
.hero-subtitle {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0 auto 16px;
  max-width: 640px;
  text-align: center;
}
.hero-differentiators {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-text-dim);
  margin: 0 auto 28px;
  text-align: center;
}
.hero-install {
  margin: 20px auto 0;
  text-align: center;
}
.hero-install code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--c-text-muted);
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-md);
  padding: 10px 20px;
  display: inline-block;
  user-select: all;
  cursor: text;
}

/* Buttons */
.hero-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.hero > .home-journey-grid {
  max-width: 700px;
  margin: 20px auto 0;
  text-align: left;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #fff !important;
  background: var(--c-accent);
  border-radius: var(--r-md);
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(108, 55, 189, 0.3);
}
.btn-arrow {
  transition: transform 0.2s;
}
.btn-primary:hover .btn-arrow {
  transform: translateX(3px);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text-muted) !important;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none !important;
  transition: all 0.2s;
}
.btn-ghost:hover {
  color: var(--c-text) !important;
  border-color: var(--c-text-dim);
  background: var(--c-bg-secondary);
}

/* Repo link */
a.repo-link,
a.repo-link:hover,
a.repo-link:focus,
.md-typeset a.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-bg-secondary) !important;
  color: var(--c-text-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
a.repo-link:hover {
  border-color: var(--c-accent) !important;
  box-shadow: var(--shadow-elevated), 0 0 20px rgba(108, 55, 189, 0.15) !important;
  transform: translateY(-2px);
  color: var(--c-text) !important;
}
a.repo-link svg {
  flex-shrink: 0;
  color: var(--c-text-muted) !important;
}
.repo-stats {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--c-border);
}
.repo-stat {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text-muted);
}
.repo-stat svg {
  opacity: 0.7;
}

/* ---------- Hero Quickstart ---------- */
.hero-quickstart {
  margin-top: 32px;
}
.hero-code-block {
  display: inline-block;
  text-align: left;
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  max-width: 480px;
  width: 100%;
}
.hero-code-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  margin-bottom: 10px;
}
code.hero-terminal {
  display: block;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--c-text-muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  letter-spacing: 0;
}
.hero-highlight-code {
  color: var(--c-accent) !important;
}
.install-comment {
  color: var(--c-text-dim);
}
.hero-quickstart-alt {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--c-text-dim);
}
.hero-quickstart-alt code {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  background: var(--c-bg-secondary) !important;
  border: 1px solid var(--c-border-dim) !important;
  border-radius: var(--r-sm);
  padding: 2px 6px !important;
  color: var(--c-text-muted) !important;
}

/* ---------- Hero Conductor Skills install card ---------- */
.hero > .hero-skills-card {
  margin-top: 32px;
  width: min(840px, calc(100vw - 64px));
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.hero-skills-card {
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px 24px;
  text-align: center;
}
.hero-skills-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.hero-skills-icon {
  color: var(--c-accent);
  flex-shrink: 0;
  line-height: 0;
}
.hero-skills-card h3 {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  margin: 0 !important;
}
.hero-skills-description {
  max-width: 540px;
  margin: 0 auto 14px !important;
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.hero-skills-card .highlight {
  margin: 0 0 14px;
  text-align: left;
}
.hero-skills-card .highlight pre {
  margin: 0;
}
.hero-skills-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}
.hero-skills-link {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent);
  text-decoration: none;
}
.hero-skills-link:hover {
  color: var(--c-accent-hover);
}
@media (max-width: 700px) {
  .hero > .hero-skills-card {
    width: calc(100vw - 32px);
  }
  .hero-skills-card {
    padding: 16px;
  }
  .hero-skills-actions {
    align-items: center;
    flex-direction: column;
    gap: 10px;
  }
}

/* ---------- Value Strip ---------- */
.value-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 20px 0;
  border-top: 1px solid var(--c-border-dim);
  border-bottom: 1px solid var(--c-border-dim);
}
.value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px;
}
.value-metric {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
}
.value-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  margin-top: 4px;
}
.value-divider {
  width: 1px;
  height: 40px;
  background: var(--c-border-dim);
}
@media (max-width: 900px) {
  .value-strip { flex-wrap: wrap; gap: 24px; }
  .value-divider { display: none; }
}
.hero-logos {
  padding-top: 32px;
}

/* ---------- Logo Wall ---------- */
.logo-wall {
  padding: 48px 0 24px;
  text-align: center;
}
.logo-wall-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-dim);
  margin: 0 0 16px;
}
.logo-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}
.logo-track:hover {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-name {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text-muted);
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0.35;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.logo-name:hover {
  opacity: 0.6;
}

/* ---------- Features ---------- */
.features-section {
  padding: 32px 0 28px;
}
.features-header {
  margin-bottom: 20px;
}
.home-wrapper .features-header h2 {
  font-family: var(--font-body) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  padding: 20px;
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-lg);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.feature-card:hover {
  border-color: var(--c-border);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.feature-card.feature-accent {
  border-color: var(--c-accent);
  background: linear-gradient(135deg, rgba(108, 55, 189, 0.06) 0%, var(--c-bg-secondary) 100%);
}
.feature-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-dim);
  margin-bottom: 14px;
}
.home-wrapper .feature-card h3 {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  margin: 0 0 10px !important;
  line-height: 1.4;
}
.feature-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin: 0;
}
.feature-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-accent) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.feature-link:hover {
  color: var(--c-accent-hover) !important;
}

/* ---------- Language Logos ---------- */
.lang-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.lang-logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--c-bg-tertiary);
  border: 1px solid var(--c-border-dim);
  padding: 5px;
  transition: all 0.2s;
  text-decoration: none !important;
}
.lang-logos a:hover {
  border-color: var(--c-accent);
  background: rgba(108, 55, 189, 0.1);
  transform: translateY(-1px);
}
.lang-logos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.9) contrast(1.1);
}

/* ---------- Quickstart ---------- */
.quickstart-preview {
  padding: 32px 0;
  background: var(--c-bg-secondary);
  margin: 0 -1000px;
  padding-left: 1000px;
  padding-right: 1000px;
  border-top: 1px solid var(--c-border-dim);
  border-bottom: 1px solid var(--c-border-dim);
}
.qs-header {
  margin-bottom: 16px;
}
.home-wrapper .qs-header h2 {
  font-family: var(--font-body) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
}
.qs-header p {
  color: var(--c-text-muted);
  font-size: 18px;
  margin: 0;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step {
  background: var(--c-bg);
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.step-marker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px 0;
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-bg-secondary);
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--c-border-dim);
}
.step-label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}
.step-content {
  padding: 0 22px;
}
.step-content pre {
  margin: 12px -22px 0 !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  border: none !important;
  border-top: 1px solid var(--c-border-dim) !important;
  box-shadow: none !important;
}
.step-content pre > code {
  padding: 12px 16px !important;
}
.qs-terminal {
  max-width: 640px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--c-border-dim);
}
.qs-cta {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.steps-cta {
  text-align: center;
  margin-top: 20px;
}

/* ---------- Architecture cards ---------- */
.arch-section {
  padding: 32px 0;
}
.arch-header {
  margin-bottom: 20px;
}
.home-wrapper .arch-header h2 {
  font-family: var(--font-body) !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.arch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.arch-card {
  display: block;
  padding: 20px 18px;
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-lg);
  text-decoration: none !important;
  color: var(--c-text) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.arch-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.arch-card:hover::before {
  transform: scaleX(1);
}
.arch-card:hover {
  border-color: var(--c-border);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.arch-number {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}
.home-wrapper .arch-card h3 {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  margin: 0 0 8px !important;
  color: var(--c-text) !important;
}
.arch-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-muted);
  margin: 0;
}

/* ---------- Install ---------- */
.install-section {
  padding: 32px 0;
}
.install-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.install-option {
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-lg);
  padding: 20px 18px;
}
.home-wrapper .install-option h3 {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  padding: 0;
  margin: 0 0 4px !important;
}
.install-cmd {
  margin-top: 8px;
}
.install-cmd code {
  display: block;
  font-family: var(--font-mono) !important;
  background: transparent !important;
  color: var(--c-text-muted) !important;
  border: none !important;
  border-radius: var(--r-sm);
  padding: 0.5rem 0.75rem !important;
  white-space: pre-wrap;
  overflow-x: auto;
}
.install-comment {
  color: var(--c-text-dim);
}
.install-rec {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  background: rgba(108, 55, 189, 0.1);
  padding: 2px 8px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- FAQ ---------- */
.faq-section {
  padding: 32px 0;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
.faq-item.faq-item {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid var(--c-border-dim) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
}
.faq-item.faq-item[open] {
  border-bottom-color: var(--c-accent) !important;
}
.faq-item.faq-item > summary {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  cursor: pointer;
  list-style: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none !important;
  border: none !important;
}
.faq-item.faq-item > summary:hover {
  color: var(--c-accent) !important;
}
.faq-item.faq-item > summary::-webkit-details-marker {
  display: none !important;
}
.faq-item.faq-item > summary::before {
  display: none !important;
}
.faq-item.faq-item > summary::after {
  content: "+" !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--c-text-dim) !important;
  flex-shrink: 0;
  position: static !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}
.faq-item.faq-item[open] > summary::after {
  content: "\2212" !important;
  color: var(--c-accent) !important;
  transform: none !important;
}
.faq-item.faq-item > p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--c-text-muted) !important;
  padding: 0 0 14px !important;
  margin: 0 !important;
}
.faq-item.faq-item > p a {
  color: var(--c-accent) !important;
}
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */
.cta-section {
  padding: 36px 0 32px;
  text-align: center;
}
.cta-content {
  max-width: 520px;
  margin: 0 auto;
}
.home-wrapper .cta-content h2 {
  font-family: var(--font-body) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em;
  color: var(--c-text) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}
.cta-content p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text-muted);
  margin-bottom: 24px;
}
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: 1fr; }
  .install-options { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding: 48px 0 24px; }
  .home-wrapper .hero-title { font-size: 36px !important; }
  .hero-subtitle { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .features-grid { grid-template-columns: 1fr; }
  .arch-grid { grid-template-columns: 1fr; }
  .home-wrapper .section-header-inline h2,
  .home-wrapper .features-header h2,
  .home-wrapper .qs-header h2,
  .home-wrapper .arch-header h2,
  .home-wrapper .cta-content h2 { font-size: 28px !important; }
}

/* ---------- Entrance Animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-badge {
  animation: fadeIn 0.5s ease-out both;
}
.hero-title {
  animation: fadeUp 0.6s ease-out 0.1s both;
}
.hero-subtitle {
  animation: fadeUp 0.5s ease-out 0.2s both;
}
.hero-actions {
  animation: fadeUp 0.5s ease-out 0.3s both;
}
.hero-quickstart {
  animation: fadeUp 0.5s ease-out 0.4s both;
}
.feature-card {
  animation: fadeUp 0.5s ease-out both;
}
.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.15s; }
.feature-card:nth-child(3) { animation-delay: 0.2s; }
.feature-card:nth-child(4) { animation-delay: 0.25s; }
.feature-card:nth-child(5) { animation-delay: 0.3s; }
.feature-card:nth-child(6) { animation-delay: 0.35s; }
.section-label {
  animation: fadeUp 0.5s ease-out both;
}
.arch-card {
  animation: fadeUp 0.5s ease-out both;
}
.arch-card:nth-child(1) { animation-delay: 0.05s; }
.arch-card:nth-child(2) { animation-delay: 0.1s; }
.arch-card:nth-child(3) { animation-delay: 0.15s; }
.arch-card:nth-child(4) { animation-delay: 0.2s; }

/* ---------- Micro-interactions & Polish ---------- */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.feature-link {
  transition: color 0.15s, letter-spacing 0.2s;
}
.feature-link:hover {
  letter-spacing: 0.02em;
}
.md-typeset .tabbed-labels > label {
  font-family: var(--font-body) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 0.4rem 0.8rem;
  transition: color 0.2s, border-color 0.2s;
}
.md-typeset .tabbed-labels > label:hover {
  color: var(--c-text);
}
.md-clipboard {
  color: var(--c-text-dim) !important;
  transition: color 0.15s, transform 0.15s;
}
.md-clipboard:hover {
  color: var(--c-accent) !important;
  transform: scale(1.1);
}
.md-typeset pre {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border) transparent;
}
.md-typeset pre::-webkit-scrollbar {
  height: 6px;
}
.md-typeset pre::-webkit-scrollbar-thumb {
  background: var(--c-border);
  border-radius: 3px;
}

/* TOC polish */
.md-nav--secondary .md-nav__link {
  font-size: 12px;
  transition: color 0.15s;
  padding: 3px 6px;
  line-height: 1.4;
}
.md-nav--secondary > .md-nav__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-dim) !important;
  background: var(--c-bg) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--c-border-dim);
  padding: 0.3rem 0.6rem;
}
.md-nav--secondary .md-nav__link--active {
  color: var(--c-text) !important;
  font-weight: 600;
  background: transparent !important;
}

/* Content area max-width for readability */
.md-content__inner {
  max-width: 48rem;
  padding-top: 0.5rem;
}

.md-typeset code {
  letter-spacing: -0.01em;
}
.md-typeset a {
  transition: color 0.15s, text-decoration-color 0.15s;
}
.md-typeset h1 {
  animation: none;
}

/* ==========================================================================
   SDK Grid — Language card layout
   ========================================================================== */

.sdk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 2rem 0;
}

.sdk-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-md);
  background: var(--c-bg-secondary);
  text-decoration: none !important;
  color: inherit !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.sdk-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.sdk-card h3 {
  margin: 0 0 4px 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
}

.sdk-card p {
  margin: 0;
  font-size: 14px;
  color: var(--c-text-dim);
  line-height: 1.5;
}

.sdk-info {
  flex: 1;
  min-width: 0;
}

.sdk-arrow {
  font-size: 1.3rem;
  color: var(--c-text-dim);
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.sdk-card:hover .sdk-arrow {
  color: var(--c-accent);
  transform: translateX(3px);
}

/* SDK Language Icons */
.sdk-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(1.1);
}

.sdk-java {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23EA2D2E' d='M47.6 98.6s-4.1 2.4 2.9 3.2c8.5 1 12.8.9 22.1-.9 0 0 2.5 1.5 5.9 2.9-20.9 8.9-47.3-.5-30.9-5.2zm-2.6-11.9s-4.6 3.4 2.4 4.1c9.1.9 16.2 1 28.6-1.3 0 0 1.7 1.7 4.4 2.7-25.3 7.4-53.5.6-35.4-5.5z'/%3E%3Cpath fill='%23EA2D2E' d='M69.1 61.5c5.2 6 -1.4 11.4-1.4 11.4s13.2-6.8 7.1-15.4c-5.7-8-10-12 13.5-25.7 0 0-36.9 9.2-19.2 29.7z'/%3E%3Cpath fill='%23EA2D2E' d='M102.4 108.3s3 2.5-3.3 4.4c-12.1 3.7-50.3 4.8-60.9.1-3.8-1.7 3.4-4 5.6-4.5 2.4-.5 3.7-.4 3.7-.4-4.3-3-27.7 5.9-11.9 8.5 43.2 7.1 78.7-3.2 66.8-8.1zM49.7 70.8s-19.6 4.7-6.9 6.4c5.4.7 16.1.5 26.1-.3 8.2-.6 16.4-2 16.4-2s-2.9 1.2-5 2.7c-20.1 5.3-58.9 2.8-47.7-2.6 9.5-4.5 17.1-4.2 17.1-4.2zm35.5 19.8c20.4-10.6 11-20.8 4.4-19.4-1.6.3-2.3.6-2.3.6s.6-.9 1.7-1.4c12.7-4.5 22.5 13.2-4.2 20.2 0 0 .3-.3.4-1z'/%3E%3Cpath fill='%23EA2D2E' d='M76.5 19.7s11.3 11.3-10.7 28.7c-17.7 14-4 22 0 31.1-10.3-9.3-17.8-17.5-12.8-25.1C60.5 43.7 80.3 38.5 76.5 19.7z'/%3E%3Cpath fill='%23EA2D2E' d='M51.4 117.4c19.6 1.3 49.7-.7 50.4-10.1 0 0-1.4 3.5-16.2 6.2-16.7 3.1-37.4 2.7-49.6.7 0 .1 2.5 2.1 15.4 3.2z'/%3E%3C/svg%3E");
}

.sdk-python {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3ClinearGradient id='a' x1='70.3' x2='18.9' y1='1266.5' y2='1228.1' gradientTransform='translate(0 -1197)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23387EB8'/%3E%3Cstop offset='1' stop-color='%23366994'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23a)' d='M63.4 11c-7.2 0-14 .7-19.9 1.9-17.3 3.7-20.4 11.4-20.4 25.6v18.8h40.8v6.3H25.9C15 63.6 5.7 71.2 3 84.5c-3.1 15.2-3.2 24.7 0 40.6 2.4 11.8 8 20.6 18.9 20.6h12.2V127c0-13.5 11.7-25.4 24.4-25.4h40.8c10.5 0 18.9-8.6 18.9-19.2V44.5c0-10.2-8.6-17.9-18.9-19.7-6.5-1.2-13.3-1.8-20.5-1.9H63.4zM42 25c3.9 0 7.1 3.3 7.1 7.3 0 4-3.2 7.2-7.1 7.2-3.9 0-7.1-3.2-7.1-7.2 0-4 3.2-7.3 7.1-7.3z'/%3E%3ClinearGradient id='b' x1='88.1' x2='136' y1='1310.4' y2='1278.5' gradientTransform='translate(0 -1197)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFE052'/%3E%3Cstop offset='1' stop-color='%23FFC331'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23b)' d='M98.2 63.6v18.1c0 14.1-12 25.9-24.4 25.9H33c-10.3 0-18.9 8.9-18.9 19.2v36c0 10.2 8.9 16.2 18.9 19.2 12 3.6 23.5 4.2 40.8 0 11.5-2.8 18.9-8.4 18.9-19.2v-14.4H53v-6.3h59.7c11 0 15-7.7 18.9-19.2 4-11.8 3.8-23.2 0-40.6-2.7-12.5-7.9-19.2-18.9-19.2H98.2zM86.7 126c3.9 0 7.1 3.2 7.1 7.2 0 4-3.2 7.3-7.1 7.3-3.9 0-7.1-3.3-7.1-7.3 0-4 3.2-7.2 7.1-7.2z'/%3E%3C/svg%3E");
}

.sdk-go {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='12' fill='%2300ADD8'/%3E%3Ctext x='60' y='76' text-anchor='middle' font-family='Arial,sans-serif' font-weight='bold' font-size='52' fill='white'%3EGo%3C/text%3E%3C/svg%3E");
}

.sdk-js {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23F0DB4F' d='M2 2h124v124H2z'/%3E%3Cpath fill='%23323330' d='M34.5 103.7c2.8 4.5 5.3 8.3 11.8 8.3 6 0 10-2.3 10-11.5V59.7h12.7v41c0 18.9-11.1 27.5-27.2 27.5-14.6 0-23-7.5-27.3-16.6l11-6.9zm47.4-1.5c3.2 5.3 7.5 9.2 14.9 9.2 6.3 0 10.3-3.1 10.3-7.5 0-5.2-4.1-7-11-10l-3.8-1.6c-10.9-4.6-18.1-10.4-18.1-22.7 0-11.3 8.6-19.9 22-19.9 9.6 0 16.4 3.3 21.4 12l-11.7 7.5c-2.6-4.6-5.4-6.4-9.7-6.4-4.4 0-7.2 2.8-7.2 6.4 0 4.5 2.8 6.3 9.3 9.1l3.8 1.6C114 84 121.2 89.6 121.2 102.2c0 14.4-11.3 22.3-26.5 22.3-14.8 0-24.4-7.1-29.1-16.3l12.3-7z'/%3E%3C/svg%3E");
}

.sdk-csharp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%239B4F96' d='M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7z'/%3E%3Cpath fill='%23068488' d='M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8l-106.6 62z'/%3E%3Cpath fill='%23fff' d='M85.3 76.5c-2.4 9.6-11.8 17.3-24.2 17.3-14.3 0-26.1-10.2-26.1-27.3s11.5-27.3 26.1-27.3c11.9 0 21.1 6.9 24 16.6l14.8-5.4c-5.2-15.3-18.8-25.8-38.5-25.8-22.5 0-41.1 16.6-41.1 41.9 0 25.4 18.2 41.9 41.1 41.9 19.5 0 33.8-11.3 38.7-27l-14.8-4.9z'/%3E%3Cpath fill='%23fff' d='M97 66.2h5.6v-6h5.9v6h5.6v5.9h-5.6v6.1h-5.9v-6.1H97z'/%3E%3C/svg%3E");
}

.sdk-ruby {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='12' fill='%23CC342D'/%3E%3Cpolygon fill='white' points='60,20 95,50 80,100 40,100 25,50'/%3E%3Cpolygon fill='%23CC342D' opacity='0.3' points='60,20 95,50 60,55'/%3E%3Cpolygon fill='%23CC342D' opacity='0.2' points='95,50 80,100 60,55'/%3E%3Cpolygon fill='%23CC342D' opacity='0.15' points='25,50 60,20 60,55'/%3E%3Cpolygon fill='%23CC342D' opacity='0.1' points='25,50 40,100 60,55'/%3E%3C/svg%3E");
}

.sdk-rust {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' rx='12' fill='%23000'/%3E%3Ccircle cx='60' cy='60' r='34' fill='none' stroke='white' stroke-width='6'/%3E%3Ccircle cx='60' cy='24' r='5' fill='white'/%3E%3Crect x='46' y='48' width='28' height='6' rx='2' fill='white'/%3E%3Crect x='46' y='58' width='20' height='6' rx='2' fill='white'/%3E%3Crect x='46' y='68' width='10' height='6' rx='2' fill='white'/%3E%3Cline x1='58' y1='68' x2='74' y2='74' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.event-next-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .75rem;
  margin: 1.25rem 0;
}

.event-next-steps a {
  display: block;
  padding: .85rem 1rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-secondary);
  color: var(--c-text) !important;
  font-weight: 650;
  text-decoration: none !important;
}

.event-next-steps a:hover { border-color: var(--c-accent); }

.event-badge {
  display: inline-block;
  margin-left: .35rem;
  padding: .08rem .38rem;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-text-muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Responsive */
@media (max-width: 600px) {
  .sdk-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Dark mode component overrides (slate scheme)
   Syntax highlighting only applied in dark mode
   ========================================================================== */

/* Slate: syntax highlighting — dark scheme */
[data-md-color-scheme="slate"] .md-typeset pre > code .k,
[data-md-color-scheme="slate"] .md-typeset pre > code .kd,
[data-md-color-scheme="slate"] .md-typeset pre > code .kn,
[data-md-color-scheme="slate"] .md-typeset pre > code .kp,
[data-md-color-scheme="slate"] .md-typeset pre > code .kr,
[data-md-color-scheme="slate"] .md-typeset pre > code .kt,
[data-md-color-scheme="slate"] .md-typeset pre > code .keyword { color: #c084fc !important; }
[data-md-color-scheme="slate"] .md-typeset pre > code .s,
[data-md-color-scheme="slate"] .md-typeset pre > code .s1,
[data-md-color-scheme="slate"] .md-typeset pre > code .s2,
[data-md-color-scheme="slate"] .md-typeset pre > code .sb,
[data-md-color-scheme="slate"] .md-typeset pre > code .sc,
[data-md-color-scheme="slate"] .md-typeset pre > code .sd,
[data-md-color-scheme="slate"] .md-typeset pre > code .se,
[data-md-color-scheme="slate"] .md-typeset pre > code .sh,
[data-md-color-scheme="slate"] .md-typeset pre > code .si,
[data-md-color-scheme="slate"] .md-typeset pre > code .sx,
[data-md-color-scheme="slate"] .md-typeset pre > code .string { color: #22c55e !important; }
[data-md-color-scheme="slate"] .md-typeset pre > code .m,
[data-md-color-scheme="slate"] .md-typeset pre > code .mi,
[data-md-color-scheme="slate"] .md-typeset pre > code .mf,
[data-md-color-scheme="slate"] .md-typeset pre > code .mh,
[data-md-color-scheme="slate"] .md-typeset pre > code .mo,
[data-md-color-scheme="slate"] .md-typeset pre > code .number { color: #6c37bd !important; }
[data-md-color-scheme="slate"] .md-typeset pre > code .c,
[data-md-color-scheme="slate"] .md-typeset pre > code .c1,
[data-md-color-scheme="slate"] .md-typeset pre > code .cm,
[data-md-color-scheme="slate"] .md-typeset pre > code .cs,
[data-md-color-scheme="slate"] .md-typeset pre > code .comment { color: #71717a !important; font-style: italic; }
[data-md-color-scheme="slate"] .md-typeset pre > code .na,
[data-md-color-scheme="slate"] .md-typeset pre > code .nb,
[data-md-color-scheme="slate"] .md-typeset pre > code .nc,
[data-md-color-scheme="slate"] .md-typeset pre > code .nd,
[data-md-color-scheme="slate"] .md-typeset pre > code .ne,
[data-md-color-scheme="slate"] .md-typeset pre > code .nf,
[data-md-color-scheme="slate"] .md-typeset pre > code .name { color: #60a5fa !important; }
[data-md-color-scheme="slate"] .md-typeset pre > code .nn,
[data-md-color-scheme="slate"] .md-typeset pre > code .no,
[data-md-color-scheme="slate"] .md-typeset pre > code .nv,
[data-md-color-scheme="slate"] .md-typeset pre > code .nt { color: #6c37bd !important; }
[data-md-color-scheme="slate"] .md-typeset pre > code .p,
[data-md-color-scheme="slate"] .md-typeset pre > code .o,
[data-md-color-scheme="slate"] .md-typeset pre > code .punctuation,
[data-md-color-scheme="slate"] .md-typeset pre > code .operator { color: #a1a1aa !important; }
[data-md-color-scheme="slate"] .md-typeset pre > code .ow { color: #835edd !important; }
/* Durable Adaptive Graphs launch card */
.dag-proof-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1180px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid rgba(6, 214, 160, 0.42);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.12), rgba(59, 130, 246, 0.08));
}
.dag-proof-card__eyebrow { margin: 0; color: #0f766e; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dag-proof-card h2 { margin: .3rem 0 .6rem; }
.dag-proof-card p { max-width: 700px; margin: 0; }
.dag-proof-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; min-width: 290px; }
@media (max-width: 760px) { .dag-proof-card { align-items: flex-start; flex-direction: column; margin: 1rem; } .dag-proof-card__actions { min-width: 0; } }


/* Orkes docs migration overrides */
:root {
  --c-accent: #6c37bd;
  --c-accent-hover: #492687;
  --c-accent-soft: #f5f4ff;
  --c-accent-border: #dddcf4;
  /* Align with the marketing site: purple links + cool-navy text/neutrals (light). */
  --c-blue: #6c37bd;
  --c-blue-hover: #492687;
  --c-text: #1e2941;
  --c-text-muted: #3b4a6f;
  --c-text-dim:rgb(108, 115, 134);
  --c-border: #dcdfe8;
  --c-border-dim: #eef0f4;
  --c-bg-secondary: #f7f7f9;
  --c-bg-tertiary: #f1f3f5;
  --c-secondary-accent: #1dcaff;
  /* Light nav to match the marketing site: transparent over the top gradient,
     navy text, becomes solid white on scroll (rule below). */
  --c-header-bg: transparent;
  --c-header-border: transparent;
  --c-header-text: #1e2941;
  --c-header-muted: #57637f;
  --c-header-subtle: #f1f3f5;
  --md-accent-fg-color: var(--c-accent);
}
[data-md-color-scheme="slate"] {
  --c-accent: #baaeff;
  --c-accent-hover: #dddcf4;
  --c-accent-soft: #27223d;
  --c-accent-border: #342960;
  /* Align with the marketing site: purple links (dark). */
  --c-blue: #baaeff;
  --c-blue-hover: #dddcf4;
  --c-secondary-accent: #1dcaff;
  --c-header-bg: #1b1730;
  --c-header-border: rgba(255, 255, 255, 0.08);
  --c-header-text: #ffffff;
  --c-header-muted: rgba(255, 255, 255, 0.74);
  --c-header-subtle: rgba(255, 255, 255, 0.08);
  --md-accent-fg-color: var(--c-accent);
}
.md-header,
.md-tabs {
  background: var(--c-header-bg) !important;
  color: var(--c-header-text) !important;
  border-bottom-color: var(--c-header-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.md-header[data-md-state="shadow"] {
  box-shadow: none !important;
}
/* Marketing-site top gradient: lavender glow at top-right, flowing behind the
   transparent nav and into the page (light scheme only). data-md-color-scheme is
   set on <body>, so target the body element directly. */
body[data-md-color-scheme="default"] {
  background:
    radial-gradient(1100px 720px at 100% 0%, #efeafb 0%, rgba(239, 234, 251, 0) 62%) fixed no-repeat,
    var(--c-bg) !important;
}
/* The base paints .md-main / .md-content solid white, hiding the body gradient.
   Make the content wrappers transparent so the gradient flows through the page. */
body[data-md-color-scheme="default"] .md-main,
body[data-md-color-scheme="default"] .md-content {
  background: transparent !important;
}
/* Paint the gradient directly on the nav, viewport-fixed, so it shows on the bar
   itself and lines up seamlessly with the page gradient. */
body[data-md-color-scheme="default"] .md-header,
body[data-md-color-scheme="default"] .md-tabs {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
/* Once scrolled, the nav becomes a solid, blurred white bar (same specificity but
   later + the --shadow class, so it wins over the gradient rule above). */
body[data-md-color-scheme="default"] .md-header--shadow,
body[data-md-color-scheme="default"] .md-header--shadow ~ .md-tabs {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  // border-bottom-color: var(--c-border) !important;
}
.md-header__title,
.md-header__topic,
.md-header__button,
.md-header .md-icon,
.md-header .md-source,
.md-header .md-source__repository,
.md-header .md-social__link {
  color: var(--c-header-text) !important;
}
/* "Enterprise" nav sections (tagged in postprocess): mark the seam between
   shared OSS docs and enterprise-only docs with the Orkes accent instead of a
   plain topical header. */
.md-nav__item--enterprise {
  margin-top: 1.1em;
  padding-top: 1em;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.md-nav__item--enterprise > label.md-nav__link {
  color: var(--c-accent) !important;
}
.md-nav__item--enterprise > label.md-nav__link .md-ellipsis::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.5em;
  border-radius: 1.5px;
  background: var(--c-accent);
  transform: rotate(45deg);
  vertical-align: 0.05em;
}
.md-tabs__item {
  padding: 0 0.15rem;
}
.md-tabs__link {
  color: var(--c-header-muted) !important;
  border: 1px solid transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  font-size: 0.66rem;
  padding: 0.25rem 0.5rem;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.md-tabs__item--active > .md-tabs__link,
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--c-header-text) !important;
}
.md-tabs__item--active > .md-tabs__link {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  border-bottom-color: var(--c-secondary-accent);
  box-shadow: none;
  font-weight: 700;
}
.md-tabs__link:hover {
  background: rgba(255, 255, 255, 0.08);
}
.md-tabs__item--active > .md-tabs__link:hover {
  background: rgba(255, 255, 255, 0.12);
}
.md-search__form {
  background: var(--c-header-subtle) !important;
  border: 1px solid var(--c-header-border) !important;
  box-shadow: none !important;
}
.md-search__form:hover,
.md-search__form:focus-within {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.md-search__input,
.md-search__input::placeholder,
.md-search__icon {
  color: var(--c-header-muted) !important;
}
.md-search__input:focus,
.md-search__input:focus::placeholder {
  color: var(--c-header-text) !important;
}
.md-header__button.md-logo {
  width: auto !important;
  height: 2.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-right: 0.8rem !important;
  padding: 0 !important;
}
.md-logo img {
  height: 44px !important;
  width: auto !important;
  max-width: 148px;
  object-fit: contain;
}
.md-logo .md-logo__light {
  display: block !important;
}
.md-logo .md-logo__dark {
  display: none !important;
}
[data-md-color-scheme="slate"] .md-logo img {
  filter: none !important;
}
[data-md-color-scheme="slate"] .md-logo .md-logo__light {
  display: none !important;
}
[data-md-color-scheme="slate"] .md-logo .md-logo__dark {
  display: block !important;
}
.section-label,
.install-rec {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--c-accent) 20%, transparent) !important;
}
.btn-primary:hover {
  box-shadow: 0 4px 14px color-mix(in srgb, var(--c-accent) 30%, transparent) !important;
}
a.repo-link:hover {
  box-shadow: var(--shadow-elevated), 0 0 20px color-mix(in srgb, var(--c-accent) 15%, transparent) !important;
}
.feature-card.feature-accent {
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 6%, transparent) 0%, var(--c-bg-secondary) 100%) !important;
}
.lang-logos a:hover {
  background: color-mix(in srgb, var(--c-accent) 10%, transparent) !important;
}
.resources-section {
  padding: 32px 0;
}
.home-wrapper .section-header-inline h2 {
  font-family: var(--font-body) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--c-text) !important;
  letter-spacing: 0;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.diagram-node,
.diagram-task {
  fill: var(--c-bg-tertiary);
}
.diagram-callout {
  fill: var(--c-bg);
  stroke: #9aa3a6;
  stroke-width: 3;
}
.diagram-text {
  fill: var(--c-text);
  font-family: var(--font-body);
  font-size: 22px;
}
.diagram-arrow,
.diagram-curve {
  fill: none;
  stroke: #9aa3a6;
  stroke-width: 3;
}
.diagram-warning {
  fill: #f6b64a;
}
.diagram-warning-text {
  fill: #fff;
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 700;
}
.diagram-clock-ring {
  fill: none;
  stroke: #9aa3a6;
  stroke-width: 3;
  stroke-dasharray: 26 9;
}
.diagram-tick {
  fill: none;
  stroke: var(--c-text);
  stroke-width: 5;
  stroke-linecap: round;
}
.diagram-failure-arrow {
  fill: none;
  stroke: #d8485a;
  stroke-width: 3;
}
.diagram-subflow rect:first-child {
  fill: transparent;
  stroke: #cbd5d8;
  stroke-width: 3;
  stroke-dasharray: 12 12;
}
.diagram-subflow circle,
.diagram-subflow rect:not(:first-child) {
  fill: #d8dddf;
}
.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.resource-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 22px;
  border: 1px solid var(--c-border-dim);
  border-radius: var(--r-lg);
  background: var(--c-bg-secondary);
  color: var(--c-text) !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.resource-card:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}
.resource-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-dim);
  margin-bottom: 16px;
}
.home-wrapper .resource-card h3 {
  font-family: var(--font-body) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.resource-card p {
  color: var(--c-text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.resource-link {
  margin-top: auto;
  padding-top: 18px;
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
}
.md-sidebar {
  background: transparent !important;
}
.md-sidebar--primary .md-nav__title,
.md-sidebar--primary .md-nav__title[for],
.md-sidebar--primary .md-nav__item--section > .md-nav__link {
  background: var(--c-bg) !important;
  z-index: 3;
}
.md-sidebar__scrollwrap {
 scrollbar-color: var(--c-border) transparent !important;
}
.md-sidebar--primary .md-nav__title,
.md-sidebar--primary .md-nav__title[for] {
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  min-height: 2rem;
  line-height: 1.4;
  padding-top: 0.45rem !important;
  padding-bottom: 0.35rem !important;
}
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__title,
  .md-sidebar--primary .md-nav__title[for] {
    display: none !important;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: none !important;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav {
    margin-top: 0 !important;
  }
}
@media (max-width: 760px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }
  .home-wrapper .section-header-inline h2 {
    font-size: 24px !important;
  }
  .resource-card {
    min-height: 0;
  }
}

/* ---------- Home page tokens (Sora + JetBrains Mono, scoped) ---------- */
.home-wrapper {
  font-family: 'Sora', system-ui, sans-serif;
  --bg: #FFFFFF; --surface: #FFFFFF; --panel-1: #F4F4F7; --panel-2: #F4EFFC;
  --border: #E7E4F0; --text: #17162B; --muted: #5A5872; --faint: #8E8CA3;
  --accent: #6c37bd; --accent-soft: rgba(109,40,217,0.09); --shadow: rgba(30,20,70,0.10); --accent-hover: #492687;
  --code-bg: #FFFFFF; --code-fg: #2B2A45; --chip-bg: #FFFFFF;
  --kw: #7C3AED; --str: #16A34A; --pun: #8E8CA3; --dec: #EA580C; --fn: #2563EB; --typ: #0891B2;
}
[data-md-color-scheme="slate"] .home-wrapper {
  --bg: #0E0D1C; --surface: #171533; --panel-1: #15142E; --panel-2: #1B1440;
  --border: #2A2748; --text: #ECEBF5; --muted: #A6A3C0; --faint: #6F6C90;
  --accent: #492687; --accent-soft: rgba(167,139,250,0.15); --shadow: rgba(0,0,0,0.4);
  --code-bg: #0B0A18; --code-fg: #D7D5EA; --chip-bg: #0F0D24;
  --kw: #C4A6FF; --str: #5FD48A; --pun: #6F6C90; --dec: #FB923C; --fn: #7AA6FF; --typ: #4CC7DE;
}
.home-wrapper a { color: var(--accent); text-decoration: none; }
@keyframes cdpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Page title + Hero ---------- */
.hp-section { padding: 52px 40px 8px; background: transparent; }
.hp-wrap { max-width: 960px; margin: 0 auto; }
.hp-eyebrow-hero {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.home-wrapper h1.hp-title {
  font-size: 42px; font-weight: 700; letter-spacing: -.03em; color: var(--text); margin: 0 0 18px;
}
.hp-hero-sub { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; max-width: 640px; }
.hp-cta-pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: #fff !important; background: var(--accent); padding-left: 22px; padding-right: 22px; border-radius: 6px; min-height: 40px;
}
.hp-cta-pill:hover { background: var(--accent-hover); }

/* ---------- Section headers (shared) ---------- */
.hp-eyebrow-section {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.home-wrapper h2.hp-section-title {
  font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 0 0 8px;
}
.hp-section-sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; max-width: 620px; }
.hp-text-cta { font-size: 14px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }

/* ---------- Choose how you build ---------- */
.hp-choose-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 66px; }
.hp-choose-card {
  display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px; color: inherit; transition: border-color .15s, box-shadow .15s;
}
.hp-choose-card .hp-text-cta { margin-top: auto; }
.hp-choose-card:hover { border-color: var(--accent); box-shadow: 0 10px 34px var(--accent-soft); opacity: 1; }
.hp-choose-icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
}
.home-wrapper .hp-choose-card h3 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.hp-choose-card > p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.hp-choose-card .hp-code-block {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
  margin-bottom: 20px; overflow: auto;
}
.hp-choose-card .hp-code-block pre {
  margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.75; color: var(--code-fg);
  white-space: pre;
}
.hp-choose-card .hp-feature-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.hp-choose-card .hp-feature-list div {
  border-left: 3px solid var(--faint); padding-left: 12px; font-size: 13px; line-height: 1.4; color: var(--muted);
}
.hp-choose-card .hp-inline-chip { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hp-choose-card .hp-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--chip-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 7px; color: var(--accent);
}

/* ---------- SDK strip ---------- */
.hp-sdk-header { text-align: center; margin-bottom: 34px; }
.hp-sdk-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.home-wrapper .hp-sdk-header h2 {
  font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 12px 0 6px;
}
.hp-sdk-header p { font-size: 16px; color: var(--muted); margin: 0; }
.hp-sdk-card {
  background: #141130; border: 1px solid #241f45; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,10,50,.25);
}
.hp-sdk-tabbar { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid #241f45; flex-wrap: wrap; }
.hp-sdk-input { position: absolute; opacity: 0; pointer-events: none; }
.hp-sdk-tab {
  padding: 8px 15px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; font-family: 'JetBrains Mono', monospace; color: #8b86ad; background: transparent;
  transition: color .15s, border-color .15s, background .15s;
}
#hp-sdk-python:checked ~ .hp-sdk-card .hp-sdk-tabbar label[for="hp-sdk-python"],
#hp-sdk-java:checked ~ .hp-sdk-card .hp-sdk-tabbar label[for="hp-sdk-java"],
#hp-sdk-js:checked ~ .hp-sdk-card .hp-sdk-tabbar label[for="hp-sdk-js"],
#hp-sdk-go:checked ~ .hp-sdk-card .hp-sdk-tabbar label[for="hp-sdk-go"],
#hp-sdk-csharp:checked ~ .hp-sdk-card .hp-sdk-tabbar label[for="hp-sdk-csharp"] {
  border-color: #7C3AED; color: #fff; background: rgba(124,58,237,.28);
}
.hp-sdk-panel { display: none; grid-template-columns: 300px 1fr; }
#hp-sdk-python:checked ~ .hp-sdk-card [data-panel="python"],
#hp-sdk-java:checked ~ .hp-sdk-card [data-panel="java"],
#hp-sdk-js:checked ~ .hp-sdk-card [data-panel="js"],
#hp-sdk-go:checked ~ .hp-sdk-card [data-panel="go"],
#hp-sdk-csharp:checked ~ .hp-sdk-card [data-panel="csharp"] { display: grid; }
.hp-sdk-install-col { padding: 26px 28px; border-right: 1px solid #241f45; }
.hp-sdk-install-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #8b86ad; margin-bottom: 8px;
}
.hp-sdk-install-cmd {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #c9c4e6; background: #0d0b22;
  border: 1px solid #241f45; border-radius: 9px; padding: 12px 14px; margin: 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.hp-sdk-caption { font-size: 14px; line-height: 1.6; color: #a29dc0; margin: 18px 0 0; }
.hp-sdk-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: #b39dff !important; }
.hp-editor-chrome { display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid var(--border); }
.hp-dot { width: 11px; height: 11px; border-radius: 50%; }
.hp-dot.red { background: #FF5F57; }
.hp-dot.yellow { background: #FEBC2E; }
.hp-dot.green { background: #28C840; }
.hp-filename { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--faint); }
.hp-sdk-code-col { min-width: 0; }
.hp-sdk-code-col .hp-editor-chrome { border-bottom: 1px solid #241f45; }
.hp-sdk-code-col .hp-filename { color: #8b86ad; }
.hp-sdk-code-col pre {
  margin: 0; padding: 22px 24px; font-family: 'JetBrains Mono', monospace; font-size: 13.5px; line-height: 1.7;
  color: #d7d3ee; white-space: pre; overflow: auto; min-height: 180px;
}
/* These SDK blocks are hand-styled dark panels. We wrap them in <pre><code> only
   to opt into the code-copy button, so we must strip the docs-wide light code
   styling (.md-typeset pre > code, specificity 0,1,2 with !important) and let the
   dark panel show through. Prefix with .hp-sdk-panel (0,2,x) to out-specify it. */
.hp-sdk-panel .hp-sdk-install-cmd code,
.hp-sdk-panel .hp-sdk-code-col pre code {
  background: none !important; color: inherit !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  font: inherit !important; white-space: inherit !important; overflow-wrap: inherit !important;
}
/* Copy button: visible on the dark panel. */
.hp-sdk-install-cmd .md-code__button,
.hp-sdk-code-col .md-code__button { color: #8b86ad; }
.hp-sdk-install-cmd .md-code__button:hover,
.hp-sdk-code-col .md-code__button:hover { color: #fff; }
@media (max-width: 700px) {
  .hp-sdk-panel { grid-template-columns: 1fr; }
  .hp-sdk-install-col { border-right: none; border-bottom: 1px solid #241f45; }
}

/* ---------- Developer journey ---------- */
.hp-journey { display: flex; flex-direction: column; margin-bottom: 66px; border-left: 2px solid var(--border); padding-left: 26px; }
.hp-journey-step { position: relative; padding-bottom: 30px; }
.hp-journey-step:last-child { padding-bottom: 0; }
.hp-journey-badge {
  position: absolute; left: -38px; top: -2px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.home-wrapper .hp-journey-step h3 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.hp-journey-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-journey-chip {
  font-size: 13px; font-weight: 600; color: var(--muted) !important; border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 13px; background: var(--surface);
}
.hp-journey-chip:hover { border-color: var(--accent); color: var(--accent) !important; opacity: 1; }

/* ---------- What's new + community ---------- */
.hp-resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.hp-resource-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px;
}
.hp-resource-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.home-wrapper .hp-resource-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin: 0 0 14px; }
.hp-resource-card > p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 14px; }
.hp-changelog-list { display: flex; flex-direction: column; flex: 1; }
.hp-changelog-item { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); color: inherit; }
.hp-changelog-item:last-child { border-bottom: none; }
.hp-changelog-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.hp-changelog-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: cdpulse 2s infinite; flex-shrink: 0; }
.hp-changelog-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--faint); }
.hp-changelog-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.hp-changelog-headline { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text); }
.hp-resource-links { display: flex; flex-direction: column; }
.hp-resource-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--border); color: var(--text) !important; font-size: 14px; font-weight: 600;
}
.hp-resource-links a:last-child { border-bottom: none; }
.hp-resource-links svg { flex-shrink: 0; }
.hp-resource-cta { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 700; color: var(--accent); }
.hp-resource-cta:hover { color: var(--accent-hover) !important; }

/* Align headings with the marketing site: semibold, navy (Material h1 defaults to light 300). */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 600;
  color: var(--c-text);
}

/*
 * Inline code inside a link. Material colours it with --md-typeset-a-color,
 * which resolves to white on the scheme body here, making linked inline
 * code invisible on its light pill. Colour it with the link purple explicitly.
 */
.md-typeset a code {
  color: var(--c-blue) !important;
}
.md-typeset a:hover code,
.md-typeset a:focus code {
  color: var(--c-blue-hover) !important;
}

/*
 * Footer prev/next navigation. The OSS base CSS recolors the footer nav using
 * legacy Material class names (.md-footer-nav__*), but this Material build uses
 * BEM names (.md-footer__*), so those rules never match — leaving Material's
 * default white text on our light footer band (invisible in light mode).
 * Re-apply the color using the current class names.
 */
.md-footer__link,
.md-footer__title {
  color: var(--c-text) !important;
}
.md-footer__direction {
  color: var(--c-text-muted) !important;
}
.md-footer__link:hover .md-footer__title {
  color: var(--c-accent) !important;
}

/* Marketing-site footer (ported from orkes.io). Always dark navy, both schemes. */
.orkes-footer {
  background: #1e2941;
  color: #a2a8b5;
  padding: 64px 32px 32px;
}
.orkes-footer * {
  box-sizing: border-box;
}
.orkes-footer__inner {
  max-width: 1312px;
  margin: 0 auto;
}
.orkes-footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.orkes-footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
}
.orkes-footer__col h3 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: #ccd1dc;
  margin: 0 0 20px;
}
.orkes-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.orkes-footer__col a {
  font-size: 14px;
  line-height: 22px;
  color: #a2a8b5;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.orkes-footer__col a:hover {
  color: #fff;
}
.orkes-footer__social {
  display: flex;
  gap: 20px;
  padding-top: 4px;
}
.orkes-footer__social a {
  color: #a2a8b5;
  display: inline-flex;
  transition: color 0.15s ease;
}
.orkes-footer__social a:hover {
  color: #fff;
}
.orkes-footer__social svg {
  width: 28px;
  height: 28px;
}
.orkes-footer__legal {
  max-width: 1312px;
  margin: 48px auto 0;
  border-top: 1px solid #3b4a6f;
  padding-top: 24px;
  text-align: center;
  font-size: 12.5px;
  color: #7a8296;
}
@media (min-width: 960px) {
  .orkes-footer__top {
    flex-direction: row;
    justify-content: space-between;
  }
}
.md-typeset table .table-note {
  display: inline-block;
  margin-top: 0.35em;
  padding: 0.1em 0.5em;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--c-text-dim);
  background: var(--c-bg-secondary);
  border: 1px solid var(--c-border-dim);
  border-radius: 4px;
}
.md-typeset table .table-note strong {
  color: var(--c-text-muted);
  font-weight: 600;
}