/* Brand type and buttons, after Composio and CrewAI: a light grotesk for headlines, a serif italic
   accent, mono uppercase square buttons, a dark header. Fonts are self-hosted (OFL, assets/fonts). */
@font-face { font-family: "Inter Tight"; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/InterTight-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/InstrumentSerif-Italic.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/GeistMono-latin.woff2") format("woff2"); }
:root {
  --aa-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --aa-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --aa-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --aa-box: #4338ca;
}

/* Site-wide: dark header and tabs, grotesk headings. */
.md-header, .md-tabs { background-color: #111113; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: var(--aa-sans); letter-spacing: -.02em; }
.md-typeset h1 { font-weight: 500; }

/* Landing page */
.aa-home { font-family: var(--aa-sans); }
.aa-home h1, .aa-home h2 { font-weight: 500; letter-spacing: -.045em; }
.aa-home h1 { line-height: 1.14; }
.aa-hl, .aa-hl2 { font-family: var(--aa-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.aa-hl2 { color: var(--aa-blue); }
.aa-pill, .aa-tag, .aa-works-in, .aa-stats li { font-family: var(--aa-mono); text-transform: uppercase; letter-spacing: .1em; }
.aa-pill { border-radius: 0; font-size: .72em; }
.aa-stats b { font-family: var(--aa-sans); font-weight: 500; letter-spacing: -.03em; text-transform: none; }
.aa-stats li { font-size: .78em; }
.aa-install, .aa-code pre, .aa-call, .aa-tile, .aa-copybtn, .aa-codenote, .aa-tablist [role=tab] { font-family: var(--aa-mono); }
.aa-install { border-radius: 0; font-weight: 500; }
.aa-btn { border-radius: 0; font-family: var(--aa-mono); font-weight: 500; font-size: .85em; text-transform: uppercase;
  letter-spacing: .03em; min-height: 3.2em; padding: 0 1.6em; }
.aa-btn:hover { transform: none; }
.aa-btn--primary, .aa-dark .aa-btn--primary,
[data-md-color-scheme="slate"] .aa-btn--primary { background: #fff; border-color: #fff; color: #000; }
.aa-btn--primary:hover, .aa-dark .aa-btn--primary:hover,
[data-md-color-scheme="slate"] .aa-btn--primary:hover { background: #e5e5e5; border-color: #e5e5e5; color: #000; }
[data-md-color-scheme="default"] .aa-band:not(.aa-dark) .aa-btn--primary { background: #0f0f0f; border-color: #0f0f0f; color: #fff; }
[data-md-color-scheme="default"] .aa-band:not(.aa-dark) .aa-btn--primary:hover { background: #2a2a2a; }
.aa-btn:not(.aa-btn--primary) { border-color: color-mix(in srgb, var(--aa-ink) 35%, transparent); }
.aa-chip { border-radius: .3em; font-weight: 500; }
.aa-tabs { border-radius: .6em; }
.aa-tablist [role=tab] { border-radius: .3em; font-weight: 500; font-size: .82em; }
.aa-card b { font-weight: 600; }
.aa-corelogo { font-family: var(--aa-sans); font-weight: 600; }
.aa-dark { background: #0a0a0a; }
[data-md-color-scheme="default"] .aa-light { background: #f6f6f6; }

.aa-code { display: flow-root; }
.aa-code[hidden] { display: none; }
.aa-copybtn { position: static; float: right; margin: 0 0 .5em .5em; border-radius: 0; }
.aa-copybtn + pre { clear: both; padding-right: 1em; }
.aa-installs { display: flex; flex-direction: column; align-items: center; gap: .6em; margin-bottom: .2em; }
.aa-installs .aa-install { margin: 0; min-width: min(100%, 26em); }
.aa-install--skill { border-color: rgba(45,212,191,.45); }
.aa-install { white-space: nowrap; }
@media (max-width: 40em) { .aa-installs .aa-install { font-size: .72em; padding: .9em .7em; min-width: 0; max-width: 100%; } }

/* Mix: CrewAI's rounded gradient hero card and italic serif voice, Composio's sans and mono buttons. */
.aa-heroband { padding: .6em; background: var(--md-default-bg-color); }
.aa-heroband::before { display: none; }
.aa-heroband .aa-inner { max-width: none; padding: 4.2em 1.2em 3.4em; border-radius: 1.6em; overflow: hidden;
  background:
    radial-gradient(60% 50% at 20% 15%, rgba(129,140,248,.7), transparent 70%),
    radial-gradient(55% 45% at 85% 30%, rgba(45,212,191,.4), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, rgba(67,56,202,.8), transparent 75%),
    #17132f; }
.aa-heroband .aa-inner > * { max-width: 46em; margin-left: auto; margin-right: auto; }
.aa-heroband h1 { color: #fff; margin-bottom: .5em; }
.aa-heroband .aa-hl { display: inline-block; background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff; font-size: 1.08em; display: inline; }
.aa-heroband .aa-lede { color: rgba(255,255,255,.82); }
.aa-heroband .aa-pill { border-radius: 999px; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.aa-heroband .aa-install { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.25); color: #fff; }
.aa-heroband .aa-install--skill { border-color: rgba(45,212,191,.6); }
.aa-heroband .aa-btn:not(.aa-btn--primary) { border-color: rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.06); }
.aa-heroband .aa-works-in, .aa-heroband .aa-stats li { color: rgba(255,255,255,.72); }
.aa-heroband .aa-stats b { color: #fff; }
.aa-btn, .aa-install, .aa-copybtn { border-radius: .45em; }
.aa-pill--new { border-radius: 999px; }
@media (max-width: 40em) { .aa-heroband .aa-inner { padding: 3.2em 1em 2.6em; border-radius: 1.2em; } }

/* Highlighted headline line: white italic serif, no box (a box behind it collided with the line above). */
.aa-heroband .aa-hl { color: #fff; background: none; padding: 0; }

/* Logos (Simple Icons and Font Awesome, bundled with the theme). */
.aa-logo { display: inline-flex; width: 1.15em; height: 1.15em; margin-right: .45em; vertical-align: -.2em; flex: none; }
.aa-logo svg { width: 100%; height: 100%; fill: currentColor; }
.aa-logo--dot::before { content: ""; width: .5em; height: .5em; margin: auto; border-radius: 50%; background: var(--aa-teal); }
.aa-logos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5em .6em; margin: .2em auto 0; padding: 0; }
.aa-logos li, .aa-logolist li { margin: 0; display: inline-flex; align-items: center; padding: .45em .8em; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: .82em; font-weight: 500; }
.aa-logos a { color: inherit; }
.aa-heroband .aa-logos li { color: #fff; }
.aa-skill .aa-logos { margin: 0 auto 1.4em; max-width: 48em; }
.md-typeset .aa-logolist ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; margin: 1em 0; padding: 0; }
.md-typeset .aa-logolist li { margin: 0; font-size: .72rem; }
.md-typeset .aa-logolist .twemoji, .md-typeset .aa-gcard .twemoji { width: 1.15em; height: 1.15em; margin-right: .45em; flex: none; }
.md-typeset .aa-logolist .twemoji svg, .md-typeset .aa-gcard .twemoji svg { width: 100%; max-height: none; }
.md-typeset .aa-gcard .twemoji { width: 1.6rem; height: 1.6rem; margin: 0 0 .5em; }
.aa-works-in { margin-bottom: .6em; }
.aa-chip { display: inline-flex; align-items: center; }
.aa-tablist [role=tab] { display: inline-flex; align-items: center; }

/* What it does: three steps. */
.aa-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin: 2.2em 0 0; padding: 0; text-align: left; }
.aa-steps li { margin: 0; }
.aa-stepn { display: inline-grid; place-items: center; width: 2em; height: 2em; margin-bottom: .8em; border-radius: 50%;
  background: var(--md-primary-fg-color); color: #fff; font: 600 .9em/1 var(--aa-mono); }
.aa-codenote--top { margin: 0 0 .7em; }
.aa-codenote a { color: var(--aa-blue); font-weight: 600; }
@media (max-width: 60em) { .aa-steps { grid-template-columns: 1fr; } }
.md-typeset .aa-gcard .twemoji { color: var(--md-default-fg-color); line-height: 1; }
.aa-langnote { margin: 1em auto 1.8em; max-width: 46em; font-size: .78em; color: rgba(255,255,255,.7); }
.aa-langnote code { font-size: .95em; color: #fff; background: rgba(255,255,255,.08); padding: .1em .35em; border-radius: .3em; }
/* The theme hides the header logo below desktop width; keep the brand mark visible on phones. */
@media screen and (max-width: 76.234375em) { .md-header__button.md-logo { display: inline-block; margin: .2rem; padding: .4rem; } .md-header__button.md-logo img { height: 1.3rem; } }