/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md.

   2026-09-14: retuned to the live flyte.org design system. Colors, type and
   radii below are the flyte.org Webflow tokens (--_theme---*, --_brand---*,
   --_typography---*, --_ui-styles---*) read off the published site, remapped
   onto this file's role names so the page's existing var() references keep
   working. flyte.org's own values are quoted in the comments. */

/* flyte.org's typefaces, served from the site's own CDN (access-control-allow-origin: *) */
@font-face {
  font-family: "Instrument Sans";
  src: url(https://cdn.prod.website-files.com/690e2a44303093ad8549854b/69123f5f9e4cb9705a1244b5_InstrumentSans-VariableFont_wdth%2Cwght.ttf) format("truetype");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(https://cdn.prod.website-files.com/690e2a44303093ad8549854b/69123f5f5d8bef7997a72e31_InstrumentSans-Italic-VariableFont_wdth%2Cwght.ttf) format("truetype");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e2a44303093ad8549854b/69123f7aad0c287f8b907af1_IBMPlexMono-Regular.ttf) format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(https://cdn.prod.website-files.com/690e2a44303093ad8549854b/69123f7a529f9f4b94eae29a_IBMPlexMono-Bold.ttf) format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

#flyte-agents {
  --color-bg: #050310;      /* flyte --_theme---background (dark) / --_brand---dark */
  --color-surface: #15141d; /* flyte --_theme---container (dark) / --_brand---gray-900 */
  --color-text: #e6e6e8;    /* flyte --_theme---foreground / --_brand---gray-300 */
  --color-accent: #8c4fff;  /* flyte --_theme---accent (dark) / --_brand---purple-dark */
  --color-accent-2: #a97cff; /* one step lighter on the same purple, for the
     secondary-accent role; flyte has no second accent hue. */
  --color-divider: #373540; /* flyte --_theme---border (dark) / --_brand---gray-700 */

  /* Tonal ramps. The neutral ramp is now flyte's own gray family — steps 200,
     500, 700 and 900 ARE --_brand---gray-{300,500,700,900} and 100 is white;
     the in-between steps interpolate them, so the ramp reads as flyte's
     near-neutral cool gray rather than the old indigo-tinted one. */
  --color-neutral-100: #ffffff;
  --color-neutral-200: #e6e6e8;
  --color-neutral-300: #c8c7ce;
  --color-neutral-400: #a5a3ad;
  --color-neutral-500: #83818c;
  --color-neutral-600: #6a6873;
  --color-neutral-700: #454350;
  --color-neutral-800: #2a2833;
  --color-neutral-900: #15141d;

  /* Accent ramp — flyte's purple family. 500 is --_brand---purple-dark
     (the dark-theme accent), 600 is --_brand---purple (the light-theme accent
     and the brand color), 100/200 are --_brand---purple-{100,200}. */
  --color-accent-100: #f5f4f8;
  --color-accent-200: #ebe9f1;
  --color-accent-300: #cfbdff;
  --color-accent-400: #a97cff;
  --color-accent-500: #8c4fff;
  --color-accent-600: #6f2aef;
  --color-accent-700: #5620b9;
  --color-accent-800: #3c1881;
  --color-accent-900: #271051;

  --color-accent-2-100: #f5f4f8;
  --color-accent-2-200: #ebe9f1;
  --color-accent-2-300: #d8caff;
  --color-accent-2-400: #bb9bff;
  --color-accent-2-500: #a97cff;
  --color-accent-2-600: #8c4fff;
  --color-accent-2-700: #6f2aef;
  --color-accent-2-800: #4a1ba0;
  --color-accent-2-900: #2c1160;

  /* Deck section-divider ground — deck-scale fills only, not interface colors. */
  --color-section: #3c1881;
  --color-section-glow: #6f2aef;
  --color-section-ghost: #8c4fff;

  /* flyte --_typography---font-styles--{heading,body,code,heading-weight} */
  --font-heading: "Instrument Sans", Arial, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Instrument Sans", Arial, sans-serif;
  --font-code: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  /* flyte --_ui-styles---radius--{small,medium,large} are .75/1.5/3rem on a
     17.2px root — 12.9/25.8/51.6px. This page's chrome is denser than
     flyte.org's marketing sections, so sm takes flyte's small verbatim and
     md/lg step toward (not all the way to) flyte's medium and large. Buttons
     and chips are full pills, as they are on flyte.org. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* Elevation — flyte.org's surfaces are flat with a hairline border, so the
     ring color is its --_theme---border and the ambient shadow stays soft. */
  --shadow-sm: 0 0 0 1px #373540;
  --shadow-md: 0 0 0 1px #373540, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #454350, 0 16px 40px rgba(0,0,0,0.65);
}

#flyte-agents {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
#flyte-agents h1, #flyte-agents h2, #flyte-agents h3, #flyte-agents h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

#flyte-agents code, #flyte-agents pre, #flyte-agents kbd, #flyte-agents samp { font-family: var(--font-code); }

#flyte-agents .lighten {mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

#flyte-agents *, #flyte-agents *::before, #flyte-agents *::after { box-sizing: border-box; }
#flyte-agents { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 400; }  /* flyte body: 1rem/1.5 on a 17.2px root */
#flyte-agents h1, #flyte-agents h2, #flyte-agents h3, #flyte-agents h4, #flyte-agents h5, #flyte-agents h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 var(--space-2);
}
#flyte-agents h1 { letter-spacing: -0.035em; }  /* flyte h1/h2/h3: lh 1.2, ls -.035em / -.025em */
#flyte-agents h4 { line-height: 1.3; }
#flyte-agents h5, #flyte-agents h6 { line-height: 1.4; }
#flyte-agents h1 { font-size: 42px; }
#flyte-agents h2 { font-size: 32px; }
#flyte-agents h3 { font-size: 25px; }
#flyte-agents h4 { font-size: 20px; }
#flyte-agents h5 { font-size: 16px; }
#flyte-agents h6 { font-size: 13px; }
#flyte-agents h6 { letter-spacing: 0.08em; text-transform: uppercase; }
#flyte-agents p { margin: 0 0 var(--space-3); }
#flyte-agents a { color: var(--color-accent); text-underline-offset: 3px; }
#flyte-agents img { display: block; max-width: 100%; }
#flyte-agents figure { margin: 0; }
#flyte-agents figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
#flyte-agents .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
#flyte-agents :focus { outline: none; }
#flyte-agents :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#flyte-agents ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
#flyte-agents .hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
/* Buttons follow flyte.org's .button: a full pill, weight 600, a filled accent
   primary carrying a top-down white wash that clears on hover, and a secondary
   that is a 2px inset border which turns accent on hover. */
#flyte-agents .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  /* the filled variants carry a gradient wash; background-origin defaults to
     padding-box, which sizes the gradient to the padding box but clips it to
     the border box — the 1px border ring then shows a TILED repeat of it (the
     gradient's dark end as a hairline on top, its white start on the bottom).
     border-box sizes the gradient to the whole pill instead. */
  background-origin: border-box;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-pill);
}
#flyte-agents .btn svg { display: block; }
#flyte-agents .btn:disabled { opacity: 0.45; cursor: not-allowed; }
#flyte-agents .btn-primary {
  background-color: var(--color-accent);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(0,0,0,0));
  color: #ffffff; border-color: transparent;
}
#flyte-agents .btn-primary:hover { background-image: none; }
#flyte-agents .btn-primary:active { background-image: none; filter: brightness(0.92); }
#flyte-agents .btn-secondary {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--color-divider);
}
#flyte-agents .btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--color-accent); }
#flyte-agents .btn-secondary:active { box-shadow: inset 0 0 0 2px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
#flyte-agents .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
#flyte-agents .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
#flyte-agents .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
#flyte-agents .btn-icon { width: 36px; height: 36px; padding: 0; }
#flyte-agents .btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
#flyte-agents .field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
#flyte-agents .input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
#flyte-agents .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
#flyte-agents .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
#flyte-agents textarea.input { min-height: 90px; resize: vertical; }
#flyte-agents .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
#flyte-agents .radio input, #flyte-agents .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
#flyte-agents .radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
#flyte-agents .radio:hover .dot { border-color: var(--color-accent); }
#flyte-agents .radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
#flyte-agents .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#flyte-agents .seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
#flyte-agents .seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; cursor: pointer;
}
#flyte-agents .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
#flyte-agents .seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
#flyte-agents .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
#flyte-agents .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
#flyte-agents .card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface);
}
#flyte-agents .card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
#flyte-agents .card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.2;
}
#flyte-agents .card-body { margin: 0; font-size: 14.5px; opacity: 0.8; flex: 1; }
#flyte-agents .card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
#flyte-agents .elev-sm { box-shadow: var(--shadow-sm); }
#flyte-agents .elev-md { box-shadow: var(--shadow-md); }
#flyte-agents .elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
#flyte-agents .tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: var(--radius-pill);  /* flyte badges/chips are pills */
}
#flyte-agents .tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
#flyte-agents .tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
#flyte-agents .tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
#flyte-agents .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
#flyte-agents .nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
#flyte-agents .nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
#flyte-agents .nav a { color: inherit; text-decoration: none; font-size: 15.5px; }
#flyte-agents .nav a:hover, #flyte-agents .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
#flyte-agents .table { width: 100%; border-collapse: collapse; font-size: 14px; }
#flyte-agents .table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
#flyte-agents .table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
#flyte-agents .table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
#flyte-agents .table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
#flyte-agents .table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
#flyte-agents .dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
#flyte-agents .dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
#flyte-agents .dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
#flyte-agents .dialog-body { font-size: 14px; opacity: 0.85; }
#flyte-agents .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* Flyte /agents landing page — page styles.
   ../_shared/nocturne.css (design tokens + base components) must be linked
   BEFORE this file. Everything here is new; nothing maps onto an existing
   Webflow class. */

/* =====================================================================
   Component state classes (Designer-buildable)
   ===================================================================== */

/* The card grids are content blocks, not chrome: no ring, and a ground barely
   lifted off the page so the type and the code panels inside carry the
   structure. `.elev-sm` still sits on the markup — these rules load after
   nocturne.css and win. */
#flyte-agents { --ag-soft: color-mix(in srgb, var(--color-surface) 55%, var(--color-bg)); }
#flyte-agents .ag-devex, #flyte-agents .ag-build, #flyte-agents .ag-fw, #flyte-agents .ag-prod {
  box-shadow: none;
  background: var(--ag-soft);
  transition: background 0.18s ease;
}
#flyte-agents .ag-fw:hover { box-shadow: none; background: var(--color-surface); }

/* section furniture */
#flyte-agents .ag-kicker { display: inline-block; font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px; }
#flyte-agents .ag-lede { font-size: 17px; line-height: 1.6; color: var(--color-neutral-400); max-width: 760px; margin: 0; text-wrap: pretty; }
/* in-card doc links are a footnote, not a call to action — the section CTAs
   carry the accent */
#flyte-agents .ag-doclink { align-self: flex-start; font-size: 12.5px; padding-left: 0; padding-right: 0; font-weight: 400; color: var(--color-neutral-500); }
#flyte-agents .ag-doclink:hover { color: var(--color-text); background: transparent; text-decoration: underline; text-underline-offset: 3px; }
#flyte-agents .ag-doclink:active { background: transparent; }

/* hero */
#flyte-agents .ag-hero-h1 { font-size: 58px; margin: 0 0 16px; max-width: 16ch; }
#flyte-agents .ag-hero-sub { font-size: 19px; line-height: 1.55; color: var(--color-neutral-400); max-width: 54ch; margin: 0 0 24px; text-wrap: pretty; }
#flyte-agents .ag-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
#flyte-agents .ag-hero-btns .btn { font-size: 16px; padding: 13px 26px; }

/* The Reason → Act → Observe ring in the hero's right column. One 4.8s cycle
   shared by every node and connector, offset per element by the inline --i, so
   the highlight walks the loop. Keyframes are in the embed block below. */
#flyte-agents .ag-loop { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 26px 26px 22px; border-radius: var(--radius-lg); background: var(--ag-soft); }
#flyte-agents .ag-loop-node { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-surface); }
#flyte-agents .ag-loop-dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--color-neutral-700); }
#flyte-agents .ag-loop-name { font-size: 17px; color: var(--color-neutral-300); }
#flyte-agents .ag-loop-api { font-size: 11px; color: var(--color-neutral-600); margin-left: auto; white-space: nowrap; }
#flyte-agents .ag-loop-arrow { align-self: flex-start; margin-left: 46px; padding: 5px 0; font-size: 14px; line-height: 1; color: var(--color-neutral-700); }
#flyte-agents .ag-loop-return { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-divider); font-size: 13px; line-height: 1.45; color: var(--color-neutral-500); }
#flyte-agents .ag-loop-return-glyph { color: var(--color-accent); font-size: 15px; line-height: 1.2; flex: none; }

/* "Run any harness" marquee under the hero. The track holds the list twice, so
   translating it -50% loops seamlessly; keyframes are in the embed block. */
#flyte-agents .ag-harness { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--color-divider); }
#flyte-agents .ag-harness-label { display: block; font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 14px; }
#flyte-agents .ag-harness-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
#flyte-agents .ag-harness-track { display: flex; align-items: center; gap: 12px; width: max-content; }
#flyte-agents .ag-harness-item { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 10px 17px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--ag-soft); text-decoration: none; white-space: nowrap; transition: border-color 0.18s ease, background 0.18s ease; }
#flyte-agents .ag-harness-logo { width: 18px; height: 18px; flex: none; background: var(--color-neutral-400); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background 0.18s ease; }
#flyte-agents .ag-harness-name { font-size: 14px; color: var(--color-neutral-300); }
#flyte-agents .ag-harness-item:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
#flyte-agents .ag-harness-item:hover .ag-harness-logo { background: var(--acc-icon); }
#flyte-agents .ag-harness-item:hover .ag-harness-name { color: var(--color-text); }

/* problem → answer rows */
#flyte-agents .ag-fix { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--color-divider); align-items: start; }
#flyte-agents .ag-fix-q { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 21px; line-height: 1.3; color: var(--color-text); margin: 0; }
#flyte-agents .ag-fix-a { font-size: 15.5px; line-height: 1.6; color: var(--color-neutral-400); margin: 0; text-wrap: pretty; }

/* "build the loop your way" cards — same shape as the devex cards: the code
   cell is a panel inset in the card, not a full-bleed pane */
#flyte-agents .ag-build { gap: 9px; padding: 22px 20px; }
#flyte-agents .ag-build .card-body { flex: none; }

/* pattern panel — a tab row over one code cell. The six patterns differ only
   in control flow, so showing them side by side as cards buried the thing that
   actually varies; one panel lets you flip between them in place. */
#flyte-agents .ag-tabwrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#flyte-agents .ag-tablabel { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); white-space: nowrap; }
#flyte-agents .ag-tabrow { display: flex; flex-wrap: wrap; gap: 8px; }
#flyte-agents .ag-patpanel { border-radius: var(--radius-lg); background: var(--ag-soft); overflow: hidden; }
#flyte-agents .ag-patpanel-head { display: flex; gap: 10px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--color-divider); }
#flyte-agents .ag-patpanel-file { font-size: 12px; color: var(--color-neutral-400); }
#flyte-agents .ag-patpanel-code { padding: 16px 0 18px; overflow: auto; background: var(--color-neutral-900); }
#flyte-agents .ag-patpanel-note { margin: 0; padding: 14px 18px; border-top: 1px solid var(--color-divider); font-size: 14.5px; line-height: 1.55; color: var(--color-neutral-400); text-wrap: pretty; }
#flyte-agents .ag-tab-use { color: var(--color-neutral-600); }
#flyte-agents .ag-tab-use::before { content: " · "; }

/* tool-source table */
#flyte-agents .ag-trow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-divider); font-size: 14px; line-height: 1.5; }
#flyte-agents .ag-tcell-1 { color: var(--color-text); }
#flyte-agents .ag-tcell-2, #flyte-agents .ag-tcell-3 { color: var(--color-neutral-500); }

/* tabbed code panels (sandboxing, shipping) */
#flyte-agents .ag-tab { font: inherit; font-size: 13px; padding: 6px 14px; border: 1px solid var(--color-divider); border-radius: 999px; cursor: pointer; background: transparent; color: var(--color-neutral-400); white-space: nowrap; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
#flyte-agents .ag-tab.on { background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: var(--color-accent); color: var(--acc-icon); }
#flyte-agents .ag-tab:hover { border-color: var(--color-accent); color: var(--acc-icon); }
#flyte-agents .ag-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* devex cards */
#flyte-agents .ag-devex { gap: 9px; padding: 22px 20px; }
#flyte-agents .ag-devex .card-body { flex: none; }
#flyte-agents .ag-devex-code, #flyte-agents .ag-build-code {
  border-radius: var(--radius-sm);
  background: var(--color-neutral-900);
  /* a hair of separation, not a frame */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-divider) 45%, transparent);
  padding: 12px 0 13px; overflow: auto; margin-top: 4px; min-width: 0;
}

/* framework cards */
#flyte-agents .ag-fw { gap: 6px; padding: 18px 18px 16px; text-decoration: none; }
#flyte-agents .ag-fw-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* masked rather than an <img>, so the mark takes the theme's text color */
#flyte-agents .ag-fw-logo { width: 20px; height: 20px; flex: none; background: var(--color-neutral-400); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; transition: background 0.18s ease; }
#flyte-agents .ag-fw:hover .ag-fw-logo { background: var(--color-accent); }
#flyte-agents .ag-fw-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16.5px; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#flyte-agents .ag-fw-desc { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-500); flex: 1; }
#flyte-agents .ag-fw-pkg { font-size: 10.5px; color: var(--color-neutral-600); overflow-wrap: anywhere; }
#flyte-agents .ag-fw:hover .ag-fw-name { color: var(--color-accent); }

/* tutorial links */
#flyte-agents .ag-tut { display: flex; flex-direction: column; gap: 5px; padding: 16px 0; border-top: 1px solid var(--color-divider); text-decoration: none; }
#flyte-agents .ag-tut-name { font-size: 15.5px; color: var(--color-text); }
#flyte-agents .ag-tut-arrow { color: var(--color-accent); opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; display: inline-block; }
#flyte-agents .ag-tut-desc { font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-500); }
#flyte-agents .ag-tut:hover .ag-tut-name { color: var(--color-accent); }
#flyte-agents .ag-tut:hover .ag-tut-arrow { opacity: 1; transform: translateX(3px); }

/* closing CTA band */
#flyte-agents .ag-cta { background: linear-gradient(135deg, var(--color-section), var(--color-section-glow)); color: #e6e6e8; }
#flyte-agents .ag-cta h2 { color: #ffffff; }
#flyte-agents .ag-cta p { color: rgba(230, 230, 232, 0.82); }

/* =====================================================================
   WEBFLOW: paste into an Embed (base rules, pseudo-states, keyframes and
   media queries — CSS the Designer cannot express)
   ===================================================================== */

#flyte-agents { margin: 0; background: var(--color-bg); color: var(--color-text); font-size: 17px; }
#flyte-agents { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#flyte-agents a { color: var(--color-accent); }
#flyte-agents a:hover { color: var(--color-accent-300); }
#flyte-agents pre, #flyte-agents code, #flyte-agents .mono { font-family: var(--font-code); }
#flyte-agents code { font-size: 0.87em; color: var(--color-accent-300); }
#flyte-agents [id] { scroll-margin-top: 88px; }

/* scrollbars inside code panels */
#flyte-agents .r-term, #flyte-agents .mono { scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) transparent; }
#flyte-agents .r-term::-webkit-scrollbar, #flyte-agents .mono::-webkit-scrollbar { width: 8px; height: 8px; }
#flyte-agents .r-term::-webkit-scrollbar-track, #flyte-agents .mono::-webkit-scrollbar-track { background: transparent; }
#flyte-agents .r-term::-webkit-scrollbar-thumb, #flyte-agents .mono::-webkit-scrollbar-thumb { background: var(--color-neutral-700); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
#flyte-agents .r-term::-webkit-scrollbar-corner, #flyte-agents .mono::-webkit-scrollbar-corner { background: transparent; }

/* sticky nav */
#flyte-agents .navbar { transition: background 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease; }
#flyte-agents .navbar-stuck { background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 0 var(--color-divider); }
#flyte-agents .nav a { color: var(--color-neutral-300); text-decoration: none; font-size: 14px; }
#flyte-agents .nav a:hover { color: var(--color-text); }
#flyte-agents .nav a.btn { color: var(--color-text); }

@keyframes coderise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#flyte-agents .code-rise { animation: coderise 380ms cubic-bezier(0.22, 0.8, 0.2, 1); }

/* the harness marquee — the track is the list twice, so -50% is one full lap */
@keyframes agmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
#flyte-agents .ag-harness-track { animation: agmarquee 46s linear infinite; }
#flyte-agents .ag-harness:hover .ag-harness-track { animation-play-state: paused; }

/* the hero loop cycle — 4.8s, one node lit at a time, offset by --i */
@keyframes agloopnode {
  0%, 27% { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
            box-shadow: 0 0 26px 1px color-mix(in srgb, var(--color-accent) 26%, transparent); }
  38%, 100% { border-color: var(--color-divider); background: var(--color-surface); box-shadow: none; }
}
@keyframes agloopdot {
  0%, 27% { background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); }
  38%, 100% { background: var(--color-neutral-700); box-shadow: none; }
}
@keyframes agloopname {
  0%, 27% { color: var(--color-text); }
  38%, 100% { color: var(--color-neutral-300); }
}
@keyframes agloopapi {
  0%, 27% { color: var(--acc-icon); }
  38%, 100% { color: var(--color-neutral-600); }
}
@keyframes aglooparrow {
  0%, 18% { color: var(--color-accent); transform: translateY(2px); }
  30%, 100% { color: var(--color-neutral-700); transform: none; }
}
@keyframes agloopreturn {
  0%, 12% { color: var(--color-accent); transform: rotate(-120deg); }
  40%, 100% { color: var(--color-accent); transform: none; }
}
#flyte-agents .ag-loop-node { animation: agloopnode 4.8s calc(var(--i) * 1.6s) infinite; }
#flyte-agents .ag-loop-dot { animation: agloopdot 4.8s calc(var(--i) * 1.6s) infinite; }
#flyte-agents .ag-loop-name { animation: agloopname 4.8s calc(var(--i) * 1.6s) infinite; }
#flyte-agents .ag-loop-api { animation: agloopapi 4.8s calc(var(--i) * 1.6s) infinite; }
/* each arrow fires just after the node above it lights */
#flyte-agents .ag-loop-arrow { animation: aglooparrow 4.8s calc(var(--i) * 1.6s + 0.75s) infinite; }
#flyte-agents .ag-loop-return-glyph { display: inline-block; animation: agloopreturn 4.8s 4s infinite; }

@media (prefers-reduced-motion: reduce) {
  #flyte-agents .code-rise { animation: none; }
  #flyte-agents .ag-loop-node, #flyte-agents .ag-loop-dot, #flyte-agents .ag-loop-name, #flyte-agents .ag-loop-api, #flyte-agents .ag-loop-arrow, #flyte-agents .ag-loop-return-glyph, #flyte-agents .ag-harness-track { animation: none; }
  /* with the marquee stopped the duplicate half is dead weight — let it scroll */
  #flyte-agents .ag-harness-viewport { overflow-x: auto; }
  #flyte-agents { scroll-behavior: auto; }
}

/* status + syntax tokens, theme-aware — same values as the homepage */
#flyte-agents { --ok: #7fb98a; --err: #d4574e; --run: #5b8fd9;
  --tok-c: #6a6873; --tok-s: #9ec9a4; --tok-d: #cfbdff; --tok-k: #a97cff; --tok-n: #e2b86b;
  --acc-icon: #cfbdff; }

/* ── light theme ──
   The same two deliberate breaks from a mirrored ramp as the homepage:
   neutral-600 and -700 are used here for small text, not as surfaces, so a
   mirrored lightness would leave them at 2.3:1 and 1.3:1. */
#flyte-agents.r-light {
  --color-bg: #ffffff; --color-surface: #f5f4f8; --color-text: #050310;
  --color-accent: #6f2aef; --color-accent-2: #8c4fff; --color-divider: #e6e6e8;
  --color-neutral-100: #050310; --color-neutral-200: #15141d; --color-neutral-300: #24203a;
  --color-neutral-400: #454350; --color-neutral-500: #83818c; --color-neutral-600: #6a6873;
  --color-neutral-700: #83818c; --color-neutral-800: #e6e6e8; --color-neutral-900: #f5f4f8;
  --color-accent-300: #5620b9; --color-accent-400: #6f2aef; --color-accent-500: #6f2aef;
  --shadow-sm: 0 0 0 1px #e6e6e8; --shadow-md: 0 0 0 1px #e6e6e8, 0 6px 18px rgba(5, 3, 16, 0.08);
  --shadow-lg: 0 0 0 1px #dcdbe0, 0 16px 40px rgba(5, 3, 16, 0.14);
  --ok: #2e7d4f; --err: #c03b31; --run: #4791d6;
  --tok-c: #83818c; --tok-s: #38795a; --tok-d: #5620b9; --tok-k: #6f2aef; --tok-n: #8a5f0d;
  --acc-icon: #5620b9;
}
/* the two places neutral-700 is a surface, not text */
#flyte-agents.r-light .r-term::-webkit-scrollbar-thumb, #flyte-agents.r-light .mono::-webkit-scrollbar-thumb { background: #c8c7ce; }
/* the CTA band stays dark in both themes, so its copy does not flip */
#flyte-agents.r-light .ag-cta { color: #e6e6e8; }
#flyte-agents.r-light .ag-cta h2 { color: #ffffff; }

/* Grid items and code panels must be allowed to shrink below their content, or
   a wide code line pushes its whole column — and with it the page — sideways.
   Every collapsed template below uses minmax(0, 1fr) for the same reason. */
#flyte-agents .ag-grid-2 > *, #flyte-agents .ag-grid-3 > *, #flyte-agents .ag-grid-4 > * { min-width: 0; }
#flyte-agents .ag-build, #flyte-agents .ag-devex, #flyte-agents .ag-build-code, #flyte-agents .ag-devex-code, #flyte-agents [data-gen="rightsize"] { min-width: 0; }

/* ── responsive ── */
@media (max-width: 1080px) {
  #flyte-agents .ag-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  #flyte-agents .ag-hero { gap: 34px !important; }
  #flyte-agents .ag-loop { max-width: 460px; }
  #flyte-agents .ag-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #flyte-agents .ag-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #flyte-agents .ag-hero-h1 { font-size: 46px; }
  #flyte-agents .ag-fix { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 860px) {
  #flyte-agents [data-screen-label] { padding-left: 24px !important; padding-right: 24px !important; }
  #flyte-agents .ag-hero-h1 { font-size: 38px; letter-spacing: -0.015em; }
  #flyte-agents .ag-hero-sub { font-size: 17px; }
  #flyte-agents h2 { font-size: 27px !important; }
  #flyte-agents h3 { font-size: 21px !important; }
  #flyte-agents .ag-trow { grid-template-columns: 1fr; gap: 4px; }
  #flyte-agents .ag-tcell-1 { font-weight: 500; }
  /* stacked, the sandbox comparison loses its column headers — so label the
     two value cells inline and drop the now-meaningless header row */
  #flyte-agents .ag-trow-head { display: none; }
  #flyte-agents #sandboxing .ag-tcell-2::before { content: "Workflow · "; color: var(--color-neutral-600); }
  #flyte-agents #sandboxing .ag-tcell-3::before { content: "Code · "; color: var(--color-neutral-600); }
  #flyte-agents .nav { flex-wrap: wrap; gap: 14px !important; align-items: center; }
  #flyte-agents .r-burger { display: inline-flex !important; }
  #flyte-agents .r-navitems { display: none !important; }
  #flyte-agents .r-navitems.r-open { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; flex: 1 1 100%; padding-top: 6px; }
  #flyte-agents .r-navitems.r-open .btn { justify-content: center; }
}
@media (max-width: 640px) {
  #flyte-agents [data-screen-label] { padding-left: 18px !important; padding-right: 18px !important; }
  #flyte-agents .ag-grid-3, #flyte-agents .ag-grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  #flyte-agents .ag-hero-h1 { font-size: 32px; }
}