@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);
}
.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;
}