/* f2-home-port CSS — embeds [0]+[1]+[2] of the Flyte 2 home port,
   concatenated in cascade order and served as a site asset.
   [0] nocturne + home style.css (scoped to #flyte2-page)
   [1] light theme, badge and host-navbar overrides
   [2] the #agents section (added 2026-09-16) */

/* flyte.org's typefaces, served from the site's own CDN */
@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; }

#flyte2-page {
  /* flyte.org --_theme---* / --_brand---* (dark theme) */
  --color-bg: #050310;
  --color-surface: #15141d;
  --color-text: #e6e6e8;
  --color-accent: #8c4fff;
  --color-accent-2: #a97cff;
  --color-divider: #373540;
  --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;
  --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;
  --color-section: #3c1881;
  --color-section-glow: #6f2aef;
  --color-section-ghost: #8c4fff;
  --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;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  --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);
}
#flyte2-page {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
#flyte2-page h1, #flyte2-page h2, #flyte2-page h3, #flyte2-page h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
#flyte2-page .lighten {mix-blend-mode:lighten;background-color:transparent}
#flyte2-page, #flyte2-page *, #flyte2-page *::before, #flyte2-page *::after { box-sizing: border-box; }
#flyte2-page { margin: 0; font-size: 17px; line-height: 1.5; font-weight: 400; }
#flyte2-page h1, #flyte2-page h2, #flyte2-page h3, #flyte2-page h4, #flyte2-page h5, #flyte2-page 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);
}
#flyte2-page h1 { letter-spacing: -0.035em; }
#flyte2-page h4 { line-height: 1.3; }
#flyte2-page h5, #flyte2-page h6 { line-height: 1.4; }
#flyte2-page h1 { font-size: 42px; }
#flyte2-page h2 { font-size: 32px; }
#flyte2-page h3 { font-size: 25px; }
#flyte2-page h4 { font-size: 20px; }
#flyte2-page h5 { font-size: 16px; }
#flyte2-page h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
#flyte2-page p { margin: 0 0 var(--space-3); }
#flyte2-page a { color: var(--color-accent); text-underline-offset: 3px; }
#flyte2-page img { display: block; max-width: 100%; }
#flyte2-page figure { margin: 0; }
#flyte2-page figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
#flyte2-page .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
#flyte2-page :focus { outline: none; }
#flyte2-page :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#flyte2-page ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
#flyte2-page .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);
}
#flyte2-page .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);
  background: transparent; border: 1px solid transparent;
  /* background-origin defaults to padding-box, which sizes the filled variants'
     gradient wash to the padding box but clips it to the border box — the 1px
     border ring then shows a TILED repeat of it (dark hairline on top, white on
     the bottom). border-box sizes the gradient to the whole pill. */
  background-origin: border-box;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-pill);
}
#flyte2-page .btn svg { display: block; }
#flyte2-page .btn:disabled { opacity: 0.45; cursor: not-allowed; }
#flyte2-page .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; }
#flyte2-page .btn-primary:hover { background-image: none; }
#flyte2-page .btn-primary:active { background-image: none; filter: brightness(0.92); }
#flyte2-page .btn-secondary { border-color: transparent; box-shadow: inset 0 0 0 2px var(--color-divider); }
#flyte2-page .btn-secondary:hover { box-shadow: inset 0 0 0 2px var(--color-accent); }
#flyte2-page .btn-secondary:active { box-shadow: inset 0 0 0 2px var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
#flyte2-page .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
#flyte2-page .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
#flyte2-page .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
#flyte2-page .btn-icon { width: 36px; height: 36px; padding: 0; }
#flyte2-page .btn-block { width: 100%; margin-top: var(--space-2); }
#flyte2-page .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);
}
#flyte2-page .radio input, #flyte2-page .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
#flyte2-page .seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
#flyte2-page .seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; cursor: pointer;
}
#flyte2-page .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
#flyte2-page .seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
#flyte2-page .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
#flyte2-page .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
#flyte2-page .card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface);
}
#flyte2-page .card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
#flyte2-page .card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.2;
}
#flyte2-page .card-body { margin: 0; font-size: 14.5px; opacity: 0.8; flex: 1; }
#flyte2-page .card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
#flyte2-page .elev-sm { box-shadow: var(--shadow-sm); }
#flyte2-page .elev-md { box-shadow: var(--shadow-md); }
#flyte2-page .elev-lg { box-shadow: var(--shadow-lg); }
#flyte2-page .tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: var(--radius-pill);
}
#flyte2-page .tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
#flyte2-page .tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
#flyte2-page .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
#flyte2-page .inst-tab { cursor: pointer; font-family: inherit; font-size: 14px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--color-neutral-500); }
#flyte2-page .inst-tab.on { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-text); }
#flyte2-page .inst-tab:hover { color: var(--acc-icon); }
#flyte2-page .inst-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
#flyte2-page .harness-tab { cursor: pointer; font-family: inherit; font-size: 12.5px; padding: 4px 13px; border-radius: 999px; white-space: nowrap; background: transparent; border: 1px solid var(--color-divider); color: var(--color-neutral-400); }
#flyte2-page .harness-tab.on { background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: var(--color-accent); color: var(--acc-icon); }
#flyte2-page .harness-tab:hover { border-color: var(--color-accent); color: var(--acc-icon); }
#flyte2-page .harness-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#flyte2-page .app-tab { font: inherit; font-size: 12.5px; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--color-neutral-400); white-space: nowrap; transition: background 0.18s ease, color 0.18s ease; }
#flyte2-page .app-tab.on { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-300); }
#flyte2-page .app-tab:hover { color: var(--color-text); }
#flyte2-page .lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-body); font-weight: 400; font-size: 13.5px; text-align: left; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); cursor: pointer; background: transparent; color: var(--color-neutral-300); }
#flyte2-page .lang-opt.on { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-300); }
#flyte2-page .lang-opt:hover { background: color-mix(in srgb, var(--color-text) 8%, transparent); }
#flyte2-page .lang-opt .lang-sdk { font-size: 11px; color: var(--color-neutral-600); }
#flyte2-page .hero-cta:hover { filter: brightness(1.15); }
#flyte2-page .hero-cta:active { filter: brightness(0.9); }
#flyte2-page .union-deploy { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--color-accent) 55%, transparent), 0 0 48px 8px color-mix(in srgb, var(--color-accent) 28%, transparent); transition: box-shadow 220ms ease, transform 220ms ease; }
#flyte2-page .union-deploy:hover { box-shadow: 0 0 26px 4px color-mix(in srgb, var(--color-accent) 75%, transparent), 0 0 64px 14px color-mix(in srgb, var(--color-accent) 38%, transparent); transform: translateY(-1px); }
#flyte2-page .inst-doc { color: var(--color-neutral-500); }
#flyte2-page .inst-doc:hover { color: var(--color-neutral-300); }
#flyte2-page .inst-copy { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--acc-icon); }
#flyte2-page .inst-copy:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); color: var(--acc-icon-h); }
#flyte2-page .inst-copy:active { background: color-mix(in srgb, var(--color-accent) 34%, transparent); }
#flyte2-page .inst-copy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
#flyte2-page .demo-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* custom dropdown — script.js swaps every .demo-select for this, because native
   <select> popups render at unscaled coordinates under emulated mobile viewports */
#flyte2-page .r-dd { position: relative; }
#flyte2-page .r-dd .demo-select { display: none !important; }
#flyte2-page .r-dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; font: inherit; font-size: 14px; text-align: left; padding: 9px 13px; border-radius: 12px; background: var(--color-neutral-900); border: 1px solid var(--color-divider); color: var(--color-text); cursor: pointer; }
#flyte2-page .r-dd-btn:hover { border-color: color-mix(in srgb, var(--color-text) 26%, transparent); }
#flyte2-page .r-dd-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#flyte2-page .r-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#flyte2-page .r-dd-caret { flex: none; opacity: 0.65; transition: transform 0.18s ease; }
#flyte2-page .r-dd-open .r-dd-caret { transform: rotate(180deg); }
#flyte2-page .r-dd-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); min-width: 100%; z-index: 40; padding: 6px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45); }
#flyte2-page .r-dd-open .r-dd-menu { display: block; }
#flyte2-page .r-dd-opt { display: block; width: 100%; text-align: left; white-space: nowrap; font: inherit; font-size: 14px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--color-neutral-300); cursor: pointer; }
#flyte2-page .r-dd-opt:hover { background: var(--color-neutral-900); color: var(--color-text); }
#flyte2-page .r-dd-opt.on { background: var(--color-neutral-700); color: var(--color-text); }
#flyte2-page .r-dd-opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
#flyte2-page .ent-cta { background-color: #ffd21e; background-image: linear-gradient(180deg, #ffd21e, #ffbc1d); border: 1px solid transparent; color: #000000; }
#flyte2-page .ent-cta:hover { background-image: none; }
#flyte2-page .ent-cta:active { background-image: none; filter: brightness(0.92); }
#flyte2-page .r-code, #flyte2-page .r-code + div, #flyte2-page [class*="mono"] { scrollbar-width: thin; scrollbar-color: var(--color-neutral-700) transparent; }
#flyte2-page .r-code::-webkit-scrollbar, #flyte2-page .mono::-webkit-scrollbar { width: 8px; height: 8px; }
#flyte2-page .r-code::-webkit-scrollbar-track, #flyte2-page .mono::-webkit-scrollbar-track { background: transparent; }
#flyte2-page .r-code::-webkit-scrollbar-thumb, #flyte2-page .mono::-webkit-scrollbar-thumb { background: var(--color-neutral-700); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
#flyte2-page .r-code::-webkit-scrollbar-thumb:hover, #flyte2-page .mono::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-600); border: 2px solid transparent; background-clip: padding-box; }
#flyte2-page [id="install"], #flyte2-page [id="platform"], #flyte2-page [id="integrations"], #flyte2-page [id="resources"], #flyte2-page [id="demo"] { scroll-margin-top: 88px; }
#flyte2-page a:hover { color: var(--color-accent-300); }
#flyte2-page pre, #flyte2-page code, #flyte2-page .mono { font-family: var(--font-code); }
@keyframes runpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes dotpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(91,143,217,0.6); } 50% { box-shadow: 0 0 0 5px rgba(91,143,217,0); } }
#flyte2-page .bar-running { animation: runpulse 1.1s ease-in-out infinite; }
#flyte2-page .dot-active { animation: dotpulse 1.4s ease-out infinite; }
#flyte2-page .caret { animation: blink 1s step-end infinite; }
@keyframes langswap { from { opacity: 0; transform: translateY(0.32em); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes coderise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
#flyte2-page .lang-swap { display: inline-block; animation: langswap 420ms cubic-bezier(0.22,0.8,0.2,1); }
#flyte2-page .code-rise { animation: coderise 380ms cubic-bezier(0.22,0.8,0.2,1); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pillrise { from { transform: translateY(120px) scale(0.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes pillbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pillburn {
  0% { opacity: 1; transform: none; filter: none; }
  35% { opacity: 1; filter: brightness(1.7) saturate(2.2) drop-shadow(0 0 14px #ff7a2f); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.5) rotate(7deg); filter: brightness(2.4) saturate(3) blur(4px); }
}
@keyframes copyglow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 12px 0 color-mix(in srgb, var(--color-accent) 30%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--color-accent) 0%, transparent), 0 0 22px 4px color-mix(in srgb, var(--color-accent) 45%, transparent); }
}
#flyte2-page .copy-glow { animation: copyglow 2.4s ease-in-out infinite; }
#flyte2-page .r-seg { border: 0 !important; background: var(--color-neutral-900); border-radius: 999px !important; padding: 4px; gap: 2px; }
#flyte2-page .r-seg .seg-opt { border-radius: 999px; padding: 7px 16px; color: var(--color-neutral-400); transition: background 0.18s ease, color 0.18s ease; }
#flyte2-page .r-seg .seg-opt + .seg-opt { border-left: 0; }
#flyte2-page .r-seg .seg-opt:has(input:checked) { background: var(--color-neutral-700); color: var(--color-text); box-shadow: none; }
#flyte2-page .r-seg .seg-opt:has(input[name="sc"]:checked) { background: rgba(212,87,78,0.18); color: var(--err); }
#flyte2-page .r-seg .seg-opt:not(:has(input:checked)):hover { background: transparent; color: var(--color-text); }
@keyframes failGlowPill { 0%,100% { box-shadow: 0 0 6px rgba(212,87,78,0.35); } 50% { box-shadow: 0 0 18px rgba(212,87,78,0.85); } }
#flyte2-page .fail-glow-pill { animation: failGlowPill 1.1s ease-in-out infinite; }
@keyframes failGlowBar { 0%,100% { box-shadow: 0 0 5px 1px rgba(212,87,78,0.5); } 50% { box-shadow: 0 0 13px 3px rgba(212,87,78,0.95); } }
#flyte2-page .fail-glow-bar { animation: failGlowBar 1.1s ease-in-out infinite; }
@keyframes heroMorphA { 0% { transform: scale(0.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes heroMorphB { 0% { transform: scale(0.92); } 55% { transform: scale(1.05); } 100% { transform: scale(1); } }
#flyte2-page .hero-morph-a { animation: heroMorphA 420ms cubic-bezier(0.34,1.56,0.64,1); }
#flyte2-page .hero-morph-b { animation: heroMorphB 420ms cubic-bezier(0.34,1.56,0.64,1); }
@keyframes failGlowText { 0%,100% { text-shadow: 0 0 4px rgba(212,87,78,0.35); } 50% { text-shadow: 0 0 12px rgba(212,87,78,0.9); } }
#flyte2-page .fail-glow-text { animation: failGlowText 1.1s ease-in-out infinite; }
@keyframes emberfly { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(-22px, -52px) scale(0.4); } }
#flyte2-page .pill-rise { animation: pillrise 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) both, pillbob 2.6s 0.7s ease-in-out infinite; }
#flyte2-page .pill-burn { animation: pillbob 2.6s ease-in-out infinite, pillburn 1.05s 2.25s ease-in both; }
#flyte2-page .ember { animation: emberfly 0.9s 2.25s ease-out both; }
#flyte2-page .hero-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-code); font-size: 16px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid rgba(228,96,86,0.95); background: rgba(36,13,17,0.94); color: #f7c1bb; white-space: nowrap; box-shadow: 0 0 22px 4px rgba(220,90,80,0.45), 0 0 60px 12px rgba(220,90,80,0.22), inset 0 0 12px rgba(220,90,80,0.18); }
#flyte2-page { --ok:#7fb98a; --err:#d4574e; --err-soft:#e8a49e; --run:#5b8fd9;
  --tok-c:#6a6873; --tok-s:#9ec9a4; --tok-d:#cfbdff; --tok-k:#a97cff; --tok-n:#e2b86b;
  --acc-icon:#cfbdff; --acc-icon-h:#e7dcff; --acc-env2:#cfbdff; --acc-fix:#a97cff;
  --sc-bg:rgba(30,12,16,0.88); --sc-bd:rgba(212,87,78,0.7);
  --st-run:#9ec2ec; --st-ok:#8fd0a2; --st-err:#e2a19e; }
#flyte2-page .r-glow { box-shadow: inset 0 0 0 1.5px var(--color-accent), inset 0 0 46px color-mix(in srgb, var(--color-accent) 38%, transparent), 0 0 9px 1px color-mix(in srgb, var(--color-accent) 55%, transparent) !important; background: color-mix(in srgb, var(--color-accent) 9%, transparent) !important; }
#flyte2-page .r-vid-light { display: none !important; }
@media (max-width: 1080px) {
#flyte2-page .r-demo-body, #flyte2-page .r-split { grid-template-columns: 1fr !important; }
#flyte2-page .r-demo-body > div:first-child { border-right: 0 !important; border-bottom: 1px solid var(--color-divider) !important; }
#flyte2-page .r-h1 { font-size: 50px !important; }
#flyte2-page .r-hero-right { flex: 1 1 100% !important; max-width: 560px !important; }
}
@media (max-width: 860px) {
#flyte2-page .r-codepane { display: none !important; }
#flyte2-page .r-mobile-selects { display: flex !important; }
#flyte2-page .r-seg-wrap, #flyte2-page .r-breakit { display: none !important; }
#flyte2-page .r-controls > div:last-child { margin-left: 0 !important; flex: 1 1 100%; }
#flyte2-page .r-controls > div:last-child .btn { width: 100%; }
#flyte2-page [data-screen-label] { padding-left: 24px !important; padding-right: 24px !important; }
#flyte2-page [data-screen-label="Enterprise"] > div { padding-left: 24px !important; padding-right: 24px !important; }
#flyte2-page [data-screen-label="Hero"] { min-height: 0 !important; padding-top: 14px !important; overflow-x: clip; }
#flyte2-page .r-h1 { font-size: 40px !important; letter-spacing: -0.015em; margin-bottom: 12px !important; }
#flyte2-page .r-h1 br { display: none; }
#flyte2-page h2 { font-size: 26px !important; }
#flyte2-page .r-hero-row p br { display: none; }
#flyte2-page .r-hero-row { gap: 18px !important; }
#flyte2-page .r-hero-right { min-width: 0 !important; }
#flyte2-page .r-sub { font-size: 17px !important; margin-bottom: 18px !important; }
#flyte2-page .r-subtle { font-size: 13px !important; margin: -10px 0 18px !important; }
#flyte2-page .r-hero-btns .btn { font-size: 14.5px !important; padding: 10px 20px !important; border-radius: 999px !important; }
/* the 4 install-target tabs wrap and collide with the dragon's feet — swap the
   row for a single dropdown, half the terminal width so the feet land beside it */
#flyte2-page #instTabs { display: none !important; }
#flyte2-page #instSelWrap { display: block !important; }
#flyte2-page #instSelWrap .r-dd { width: 50%; }
/* dragon scene goes fluid: the video fills the column and the pill tracks the
   flame with percentage offsets, so the composition survives any width.
   margin-top claws back the empty band above the dragon; margin-bottom seats
   it on the terminal's top edge */
#flyte2-page .r-videowrap { height: auto !important; aspect-ratio: 16 / 9; margin-top: -7% !important; margin-bottom: -15.5% !important; }
#flyte2-page .r-videowrap video { width: 100% !important; height: 100% !important; object-fit: cover; left: 0 !important; right: auto !important; top: 0 !important; }
#flyte2-page .r-videowrap > div:last-child { left: 0 !important; right: auto !important; top: 45% !important; bottom: auto !important; transform: translateY(-50%); }
#flyte2-page .r-videowrap > div:last-child > div { font-size: clamp(11px, 3.4vw, 16px) !important; padding: 0.55em 1.1em !important; }
/* the 120px pill rise was sized for the tall desktop scene; on the short mobile
   scene the pill would start inside the terminal, so shorten the travel */
@keyframes pillrisesm { from { transform: translateY(44px) scale(0.92); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
#flyte2-page .pill-rise { animation: pillrisesm 0.7s cubic-bezier(0.22, 0.8, 0.2, 1) both, pillbob 2.6s 0.7s ease-in-out infinite; }
#flyte2-page .r-cards3, #flyte2-page .r-footer-grid { grid-template-columns: 1fr 1fr !important; }
#flyte2-page .r-wf { grid-template-columns: 150px 1fr 0 !important; gap: 8px !important; }
#flyte2-page .r-wf > span:last-child { display: none; }
#flyte2-page .r-wfgrid { left: 158px !important; right: 8px !important; }
#flyte2-page .r-code { max-height: 260px !important; }
#flyte2-page .r-code .mono, #flyte2-page .r-code .mono span { font-size: 12px !important; line-height: 1.7 !important; }
}
@media (max-width: 560px) {
#flyte2-page [data-screen-label] { padding-left: 18px !important; padding-right: 18px !important; }
#flyte2-page .r-h1 { font-size: 32px !important; }
#flyte2-page h2 { font-size: 23px !important; }
#flyte2-page .r-cards3, #flyte2-page .r-footer-grid { grid-template-columns: 1fr !important; }
#flyte2-page .r-wf { grid-template-columns: 116px 1fr 0 !important; }
#flyte2-page .r-wfgrid { left: 124px !important; }
}


/* ── badges: the site's own .tag class sets background/color/border/weight,
   so every one of those has to be declared here or it bleeds through ── */
#flyte2-page .tag {
  gap: 0;
  justify-content: flex-start;
  font-weight: 400;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid transparent;
  color: inherit;
}
#flyte2-page .tag-outline {
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}
#flyte2-page.r-light .tag-outline {
  background-color: var(--color-accent-100);
  border-color: var(--color-accent-700);
  color: var(--color-accent-700);
}
#flyte2-page .tag-accent { background-color: var(--color-accent-800); color: var(--color-accent-100); }
#flyte2-page .tag-neutral { background-color: var(--color-neutral-800); color: var(--color-neutral-100); }

/* ── light theme — mirrors the site's navbar toggle (html.dark-mode) ── */
#flyte2-page.r-light {
  color-scheme: light;
  /* flyte.org's light theme: --_theme---background #fff, --_theme---container
     #f5f4f8, --_theme---heading #050310, --_theme---border #e6e6e8,
     --_theme---accent #6f2aef. The neutral ramp is the dark ramp reversed. */
  --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:#373540;
  --color-neutral-400:#5d5b67; --color-neutral-500:#83818c;
  --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; --err-soft:#a83a32; --run:#4791D6;
  --tok-c:#83818c; --tok-s:#38795a; --tok-d:#5620b9; --tok-k:#6f2aef; --tok-n:#8a5f0d;
  --acc-icon:#5620b9; --acc-icon-h:#3c1881; --acc-env2:#6f2aef; --acc-fix:#6f2aef;
  --sc-bg:rgba(212,87,78,0.10); --sc-bd:rgba(192,59,49,0.55);
  --st-run:#2f5e96; --st-ok:#2e7d4f; --st-err:#a83a32;

  /* Legibility on a light ground. The markup sets colors inline as var(--token),
     so redefining the token here fixes every use at once. 600 and 700 are not a
     mirrored lightness: they carry the page's smallest text — muted labels
     ("Use case:", "cpu 2 · 2Gi") at 600, gutter numbers, prompt glyphs and log
     timestamps at 700 — which a mirror would leave at 2.3:1 and 1.3:1 on white.
     accent-300 is the "bright purple on an accent wash" role (inline <code>,
     selected tabs, link hover) and has to run dark here. accent-200 and -100 do
     NOT flip: their only grounds are the always-dark Enterprise band and the
     accent-800 chip, so a light-mode value would be dark purple on dark purple. */
  --color-accent-300:#5620b9;
  --color-neutral-600:#6a6873;
  --color-neutral-700:#83818c;
  --color-neutral-800:#ebe9f1;
  --color-neutral-900:#f5f4f8;
}
/* the three places neutral-700 is a surface, not text — keep those light */
#flyte2-page.r-light .r-seg .seg-opt:has(input:checked) { background: #e6e6e8; }
#flyte2-page.r-light .r-dd-opt.on { background: #e6e6e8; }
#flyte2-page.r-light .r-code::-webkit-scrollbar-thumb, #flyte2-page.r-light .mono::-webkit-scrollbar-thumb { background: #c8c7ce; }
#flyte2-page.r-light .r-wfgrid { background-image: repeating-linear-gradient(to right, rgba(36,32,58,0.08) 0 1px, transparent 1px 20%) !important; }
#flyte2-page.r-light .r-wf { border-bottom-color: rgba(36,32,58,0.07) !important; }
#flyte2-page.r-light .hero-pill { background:rgba(253,242,240,0.95) !important; border-color:rgba(192,59,49,0.9) !important; color:#a83a32 !important; box-shadow:0 0 18px 3px rgba(220,90,80,0.30), 0 0 48px 10px rgba(220,90,80,0.14), inset 0 0 10px rgba(220,90,80,0.10) !important; }
#flyte2-page.r-light .r-vid-dark { display: none !important; }
#flyte2-page.r-light .r-vid-light { display: block !important; }
#flyte2-page.r-light .r-videowrap video.lighten {
  mix-blend-mode: darken;
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 12%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.55) 48%, #000 66%), linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0, transparent 12%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.55) 48%, #000 66%), linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%) !important;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
#flyte2-page.r-light [data-screen-label="Logos"] img { filter:grayscale(1) brightness(0) !important; opacity:0.45 !important; }
#flyte2-page.r-light [data-screen-label="Enterprise"] { color:#e6e6e8; }
#flyte2-page.r-light [data-screen-label="Enterprise"] h2 { color:#ffffff; }

/* mobile: the bottom fade above is a fixed 34px tuned for the 322px desktop
   video — at mobile heights it eats the dragon's legs, so make it proportional.
   It has to live here (after the base light rule) to win the cascade. */
@media (max-width: 860px) {
#flyte2-page.r-light .r-videowrap video.lighten {
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 12%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.55) 48%, #000 66%), linear-gradient(to bottom, #000 89.5%, transparent 100%) !important;
  mask-image: linear-gradient(to right, transparent 0, transparent 12%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.55) 48%, #000 66%), linear-gradient(to bottom, #000 89.5%, transparent 100%) !important;
}
}

/* ── host navbar ── match the prototype's page background in both themes.
   These selectors deliberately sit OUTSIDE #flyte2-page: the site's navbar is a
   Webflow component, not part of the wrapper. The strip above it (.pre-header_link)
   is a translucent purple accent and is left alone. Values mirror --color-bg,
   which now equals the site's own navbar colors. */
html:not(.dark-mode) .navbar2_component { background-color: #ffffff; }
html.dark-mode .navbar2_component { background-color: #050310; }

/* Sticky navbar. .navigation is an unstyled wrapper (the site's CSS defines no
   rules for it at all) holding the announcement strip .pre-header_link (3.5rem)
   above .navbar2_component. Pinning the WRAPPER with a -3.5rem offset lets the
   strip scroll away and lands the navbar flush at the viewport top; pinning the
   navbar alone would not work, since a sticky element only holds while its
   containing block is in view and .navigation is only ~8rem tall.
   .page-wrapper is overflow: CLIP, which — unlike overflow: hidden — does not
   establish a scroll container, so sticky still resolves against the viewport
   (verified: navbar.top stays 0 at 400/1600/3000px of scroll). */
.navigation { position: sticky; top: -3.5rem; z-index: 900; }

/* Navbar track sizing. .navbar2_container is a 3-column grid, .375fr 1fr .375fr
   inside a 72rem max-width — the last track resolves to ~282px, which was
   already narrower than the button row and became far too narrow once the
   Install CTA joined it (~430px). The row is justify-content: flex-end, so it
   overflowed LEFT across the menu track and "Docs" collided with the GitHub
   pill. Sizing the outer tracks to their content and giving the slack to the
   menu clears it at every width (measured: -83..-18px of clearance before,
   +39..+143px after) without touching the container's width. */
@media (min-width: 992px) {
  .navbar2_container { grid-template-columns: auto 1fr auto; }
}

/* Nav CTA — the "Install Flyte" pill the page script injects into
   .navbar2_button-wrapper (see the last embed). Colour and size come from the
   site's own .button.is-small, so it matches the GitHub/Join pills and follows
   the light/dark toggle for free; these rules only add the reveal. The element
   is in the DOM from first paint and never removed, so its width is permanently
   reserved and the navbar does not reflow when it appears.
   nowrap + align-self are load-bearing: .navbar2_button-wrapper is
   align-items: stretch, and the site's own buttons dodge that by sitting inside
   a wrapper div. Without these the label breaks onto two lines and the pill
   stretches to the full height of the navbar row. */
.f2-navcta {
  white-space: nowrap;
  align-self: center;
  opacity: 0;
  transform: translateY(-0.375rem);
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.8, 0.2, 1);
}
.f2-navcta.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* the navbar collapses to a burger at 991px — no room for the CTA below that */
@media (max-width: 991px) { .f2-navcta { display: none; } }


/* ── Agents section (added 2026-09-16) ───────────────────────────────────
   Kept in its own embed so the hand-curated embed [0] stays diffable. Every
   selector here is new — nothing above declares .fw-chip, .agent-hd-btns,
   .trace-rise, .r-sub-link or .r-agent-*. The run waterfall reuses the demo's
   .r-wf / .r-wfgrid, already styled in embed [0]. Keyframes stay unscoped, as
   there. Nothing here is light-mode specific: every value is a theme token, so
   this sitting after the light-theme embed is harmless. */
#flyte2-page .agent-hd-btns .btn { font-size: 15.5px; padding: 12px 25px; white-space: nowrap; }
#flyte2-page .agent-hd-btns .btn-primary { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--color-accent) 40%, transparent); transition: box-shadow 220ms ease, transform 220ms ease; }
#flyte2-page .agent-hd-btns .btn-primary:hover { box-shadow: 0 0 30px 5px color-mix(in srgb, var(--color-accent) 58%, transparent); transform: translateY(-1px); }
#flyte2-page .fw-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 17px; border-radius: 999px; border: 1px solid var(--color-divider); background: var(--color-surface); text-decoration: none; transition: border-color 0.18s ease, background 0.18s ease; }
#flyte2-page .fw-chip-logo { width: 19px; height: 19px; 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; }
#flyte2-page .fw-chip-name { font-size: 14.5px; color: var(--color-neutral-200); white-space: nowrap; }
#flyte2-page .fw-chip-pkg { font-size: 11px; color: var(--color-neutral-600); white-space: nowrap; }
#flyte2-page .fw-chip:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
#flyte2-page .fw-chip:hover .fw-chip-logo { background: var(--acc-icon); }
#flyte2-page .fw-chip:hover .fw-chip-name { color: var(--color-text); }
#flyte2-page .fw-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#flyte2-page [id="agents"] { scroll-margin-top: 88px; }
/* "agents" in the hero subline links to /agents. Deliberately quiet: it keeps
   the subline's own color and only carries a faint accent underline, so it
   reads as prose with a hint rather than as a call to action. The anchor is
   created by f2-home-port-v2.js; the repo prototype has it inline. */
#flyte2-page .r-sub-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--color-accent) 55%, transparent); transition: color 0.18s ease, text-decoration-color 0.18s ease; }
#flyte2-page .r-sub-link:hover { color: var(--color-text); text-decoration-color: var(--color-accent); }
#flyte2-page .r-sub-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; }
/* A slow, low-amplitude glow — enough to catch the eye on a second pass, not
   enough to blink at the reader. Paused on hover, where the color change takes
   over as the affordance. */
@keyframes subglow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 42%, transparent); }
}
#flyte2-page .r-sub-link { animation: subglow 3.4s ease-in-out infinite; }
#flyte2-page .r-sub-link:hover { animation-play-state: paused; }
@keyframes tracein { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
#flyte2-page .trace-rise .trace-row { animation: tracein 340ms cubic-bezier(0.22,0.8,0.2,1) backwards; }
@media (prefers-reduced-motion: reduce) {
#flyte2-page .trace-rise .trace-row { animation: none; }
#flyte2-page .r-sub-link { animation: none; }
}
@media (max-width: 1080px) {
#flyte2-page .r-agent-body { grid-template-columns: 1fr !important; }
#flyte2-page .r-agent-body > div:first-child { border-right: 0 !important; border-bottom: 1px solid var(--color-divider) !important; }
}
@media (max-width: 860px) {
#flyte2-page .r-agent-code { max-height: 320px !important; }
}