@keyframes hMSxt72gKQG07WhXVBWZ {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bl_HmnC2pwF6zqk4JsgR {
  0%, 100% { opacity: 0.5; transform: scale(1); filter: blur(18px); }
  50% { opacity: 1; transform: scale(1.06); filter: blur(24px); }
}

@keyframes gJdtiRfA2JLlANBdBBD8 {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes XL7YMgw2XkSXK8WyHZoh {
  from { opacity: 1; }
  to { opacity: 0; }
}



/* The circles never move; the logos slide through them. The window shifts
   left (abc -> bcd), so the outgoing logo exits left and the incoming one
   arrives from the right. The chip's overflow:hidden masks both, so each logo
   is clipped by the circle as it passes — a slot-machine feel. The slight
   blur at each end blends the outgoing and incoming logos, so the overlap
   reads as one logo changing rather than two sliding past each other. */
@keyframes K52NCsYktMCozYfRfxMP {
  from { opacity: 0; transform: translateX(18px); filter: blur(2px); }
  60% { filter: blur(0.5px); }
  to { opacity: 1; transform: translateX(0); filter: blur(0); }
}

@keyframes XCW5XePv8EQKDsvK07b_ {
  from { opacity: 1; transform: translateX(0); filter: blur(0); }
  40% { filter: blur(0.5px); }
  to { opacity: 0; transform: translateX(-18px); filter: blur(2px); }
}

/* Character-limit warning — fade + tiny rise on appearance. */
@keyframes pqpAv6BUIQ3FRwc2Qi_0 {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qgAbtoYhi_loduzX7fWL {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.xLhNAacWH7rFed3yhGjf {
  position: relative;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.w6cPM1d5eXtPhqvTlxjp {
  position: relative;
}

.KpBzuQAwCtp0pmJHuQK8 {
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 38px;
  background: linear-gradient(
    135deg,
    rgba(252, 181, 0, 0.25),
    rgba(245, 56, 120, 0.2),
    rgba(56, 106, 245, 0.25)
  );
  animation: bl_HmnC2pwF6zqk4JsgR 4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.EFzo4VNqH090pH8ngV9a {
  position: relative;
  width: 100%;
  padding: 3px;
  border-radius: 32px;
  box-sizing: border-box;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  z-index: 1;
}

.EFzo4VNqH090pH8ngV9a::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent 0deg,
    transparent 10deg,
    rgba(252, 181, 0, 0.5) 40deg,
    rgba(245, 56, 120, 0.4) 60deg,
    transparent 100deg,
    transparent 190deg,
    rgba(56, 106, 245, 0.5) 220deg,
    rgba(245, 56, 120, 0.35) 240deg,
    transparent 280deg,
    transparent 360deg
  );
  animation: hMSxt72gKQG07WhXVBWZ 6s linear infinite;
  z-index: 0;
}

.EPIUZEOIGG01dDnOSlLw {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 29px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px -1px,
              rgba(0, 0, 0, 0.04) 0px 12px 30px -2px;
  overflow: hidden;
}

.fVgNBFt9yKk9FiSWOcAA {
  padding: 20px;
}

.pO9zpr6jmrDT6K6Q0Gxj {
  position: relative;
}

._1s3CFqNkCdOGd54rY4q {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 8px;
  border: none;
  outline: none;
  background: transparent;
  color: rgb(3, 7, 18);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  resize: none;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.S2jB9xXdmgNxqZgd_3Ph {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  color: #9ca3af;
  pointer-events: none;
  z-index: 0;
  animation: gJdtiRfA2JLlANBdBBD8 200ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.rGoUzDL8_oDZQsAvF75g {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  background: #9ca3af;
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: qgAbtoYhi_loduzX7fWL 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.qtjh57xVgmz5_9cgXWEH {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
}

/* Connect and "Your agents" sit side by side, and stack when the box is
   too narrow for both plus the Build button (phones). */
.Tidu4O2QzEnu0mBfMRrA {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

/* "Your agents" link to /mcp. Reuses the Connect pill's look; only the
   link defaults need resetting. */
.tva11jLT9dRPaTs4cg_Q {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}

/* With Your agents shown, Connect and Your agents read as two separate
   buttons: each sits on a soft grey fill, and the logo circles drop their
   outline. */
.HMVfN0kZAvWGwrkVlol4 .CWGwngsUKeUriZkQh6Qw {
  height: 36px;
  padding: 0 4px 0 6px;
  border-radius: 99px;
  background: #f5f6f7;
}

@media (hover: hover) and (pointer: fine) {
  .HMVfN0kZAvWGwrkVlol4 .CWGwngsUKeUriZkQh6Qw:hover {
    background: #eceef0;
  }
}

.HMVfN0kZAvWGwrkVlol4 .CpgLeIFN3PgVM8Cxetbe {
  border: none;
}

.wXxfxiULxwu3yM1DtH7Y .HMVfN0kZAvWGwrkVlol4 .CWGwngsUKeUriZkQh6Qw {
  background: #1f2937;
}

@media (hover: hover) and (pointer: fine) {
  .wXxfxiULxwu3yM1DtH7Y .HMVfN0kZAvWGwrkVlol4 .CWGwngsUKeUriZkQh6Qw:hover {
    background: #374151;
  }
}

.tva11jLT9dRPaTs4cg_Q:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.NrUI1qRqzMqRDohvMfcO {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ── Data source picker ── */

.L9g1Oc9kcZPUXJwO63wb {
  position: relative;
  flex-shrink: 0;
}

/* A chosen source can have a long name (REST API templates). Let the chip
   shrink so the name ends with "…" and the remove button stays visible. */
.x1oyJW56YmtzhbYtrWTf { flex-shrink: 1; min-width: 0; max-width: 100%; }
.x1oyJW56YmtzhbYtrWTf .CWGwngsUKeUriZkQh6Qw { max-width: 100%; }
.x1oyJW56YmtzhbYtrWTf .hzbDeBn4U92HA9lpZ6mV { min-width: 0; }
.x1oyJW56YmtzhbYtrWTf .v08qaceIL1hsx6AVLiyZ { overflow: hidden; text-overflow: ellipsis; }

/* Collapsed trigger — pill with a "+" circle, featured logos, and a "+N" count. */
/* Wrapper — holds the trigger button and the optional "clear" button. */
/* ── Trigger pill (matches Studio's "Connect" pill in Figma) ──
   32px tall, no border on the pill itself; the logos live in bordered
   white chips that overlap each other. */
.CWGwngsUKeUriZkQh6Qw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-left: 4px;
  padding-right: 2px;
  border-radius: 20px;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
  transition: background 200ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .CWGwngsUKeUriZkQh6Qw:hover {
    background: rgba(24, 32, 45, 0.05);
  }
}

/* Press feedback — the trigger acknowledges the click (emil-design-eng).
   Lives on the wrapper so pressing either button scales the whole pill. */
.CWGwngsUKeUriZkQh6Qw:active {
  transform: scale(0.98);
}

/* The trigger itself — visually transparent inside the pill. The gap holds
   the "+ Connect" lead off the logo chips (and off the selected source name). */
.hzbDeBn4U92HA9lpZ6mV {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}

/* "+" and its label sit tighter together than they do to the chips. */
.rwErmoG0UUTICtQRG6br {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Ghost icon button — no fill, no border. */
.AQbO1oLsQrpo902lPL05 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 99px;
  color: #555d6f;
  box-sizing: border-box;
}

.FyHqdAQ6jTLoyl5MDlYI {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #555d6f;
  white-space: nowrap;
}

/* Overlapping logo chips. isolation keeps the z-index stack local. */
.g6GV3mEOp62yXnse1bkg {
  display: inline-flex;
  align-items: center;
  isolation: isolate;
}

.CpgLeIFN3PgVM8Cxetbe {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid #dfe2e6;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  box-sizing: border-box;
}

/* Every chip but the last tucks under the one before it (static row only —
   the conveyor spaces its chips by transform instead). */
.g6GV3mEOp62yXnse1bkg .CpgLeIFN3PgVM8Cxetbe:not(:last-child) {
  margin-right: -6px;
}

.ICjRtas5u5j3Lk0Ez2pS {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  object-fit: contain;
}

/* The sliding pair: the arriving logo enters as the leaving one exits, both
   over the same beat so the circle never reads as empty.
   fill-mode `both` is deliberate: the stagger below delays slots 1 and 2, and
   without a backwards fill they would flash at full opacity during that delay.
   The reduced-motion block resets these to a visible resting state. */
.Ze46Q4s_1QM_9fwhxnA7 {
  animation: K52NCsYktMCozYfRfxMP 1500ms cubic-bezier(0.78, 0, 0.22, 1) both;
}

.sTr5M5Z_I8ED30fOIgKE {
  animation: XCW5XePv8EQKDsvK07b_ 1500ms cubic-bezier(0.78, 0, 0.22, 1) both;
}

@media (hover: hover) and (pointer: fine) {
}

/* Once a source is picked, a bordered chip leads instead of the ghost "+",
   so the pill needs slightly less left padding to stay optically even. */
.iTipt_Jki2bpTW_VaUU2 {
  padding-left: 2px;
}

/* Name of the selected source, shown in place of the "Connect" label. */
.v08qaceIL1hsx6AVLiyZ {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #555d6f;
  white-space: nowrap;
  padding-left: 2px;
}

.lFDLxIwSg0CxwO_lC9xV {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.32, 0.72, 0, 1),
              color 150ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (hover: hover) and (pointer: fine) {
  .lFDLxIwSg0CxwO_lC9xV:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #374151;
  }
}













@media (hover: hover) and (pointer: fine) {
}











/* ── Data source modal ─────────────────────────────────────────────────────
   Rendered as a sibling of the card (never inside it): the card uses
   overflow:hidden with a border-radius, and WebKit clips fixed-position
   descendants to such a container. */
/* The native <dialog> holding the modal. It only lifts the modal into the
   top layer; it draws nothing itself, and the backdrop below does the dimming. */
.D9aU0MbE_JGIBkLt1_QH {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.D9aU0MbE_JGIBkLt1_QH::backdrop { background: transparent; }

.I1WCORWYnfASTRvE0Ti9 {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 7, 18, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  box-sizing: border-box;
}

.gsPCjTaafofqp4ctC7Og { animation: a17KldSPN541BVpubVLP 200ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.CCDJkEfQS4WbQbi82JPt { animation: zeTpf5P576CA7yfc3c9g 150ms cubic-bezier(0.32, 0.72, 0, 1) both; pointer-events: none; }

@keyframes a17KldSPN541BVpubVLP { from { opacity: 0; } to { opacity: 1; } }
@keyframes zeTpf5P576CA7yfc3c9g { from { opacity: 1; } to { opacity: 0; } }

/* Width is fixed so steps never resize sideways. Surface, border, radius
   and shadow match the product's integrations modal (pricing page). */
.lm_Cj0q6cqNum_O8Rumo {
  position: relative;
  display: flex;
  width: 560px;
  max-width: 100%;
  /* Fixed height: searching or switching step must not resize the modal. */
  height: min(720px, 86vh);
  overflow: hidden;
  border: 1px solid #dfe2e6;
  border-radius: 16px;
  background: #fff;
  color: #111822;
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.1), 0 24px 48px -8px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
  /* Inherited properties cross the Shadow DOM boundary, so a centred section on
     the page would otherwise centre everything in here. Pin them explicitly. */
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  font-style: normal;
  word-spacing: normal;
  line-height: 1.5;
}

.gsPCjTaafofqp4ctC7Og .lm_Cj0q6cqNum_O8Rumo { animation: oUJHV0oiDdz7HRrqAke0 240ms cubic-bezier(0.32, 0.72, 0, 1) both; }
.CCDJkEfQS4WbQbi82JPt .lm_Cj0q6cqNum_O8Rumo { animation: EtnyTtJ73KqPyOZzu9Mw 150ms cubic-bezier(0.32, 0.72, 0, 1) both; }

@keyframes oUJHV0oiDdz7HRrqAke0 { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes EtnyTtJ73KqPyOZzu9Mw { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.97); } }

.pnvgXT37nlu7jxVBYbwC {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: 24px 22px 22px;
  box-sizing: border-box;
  animation: MH9MGP3sAfajAfiMpQ19 300ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* The sign-up step is short, so it centres in the fixed frame. */

/* Scroll region: the only part that moves. min-height:0 lets a flex child
   actually shrink, without it the body refuses to scroll. */
.RYr5Ef4Ug6AYNVIa6Xa2 {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.bMPbHigvkl6gZGj3yZA8 {
  height: 100%;
  overflow-y: auto;
  /* At the top or bottom of the list, don't hand the scroll on to the page. */
  overscroll-behavior: contain;
  padding-right: 4px;
  margin-right: -4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.bMPbHigvkl6gZGj3yZA8::-webkit-scrollbar { width: 8px; }
.bMPbHigvkl6gZGj3yZA8::-webkit-scrollbar-track { background: transparent; }
.bMPbHigvkl6gZGj3yZA8::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

@keyframes MH9MGP3sAfajAfiMpQ19 { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

.ty6zfbT38toNb4CqSDPW { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.U1hDUt8KiIMtEUE7Otra {
  flex: 1;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.019em;
  color: #030712;
}

.tNQiB3fis9ulhb8vmuC0 { position: relative; flex-shrink: 0; }
.tNQiB3fis9ulhb8vmuC0 svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #9ca3af; pointer-events: none; }
.tNQiB3fis9ulhb8vmuC0 input {
  width: 200px;
  height: 32px;
  padding: 0 12px 0 32px;
  border: 1px solid #e9eaed;
  border-radius: 10px;
  background: #f5f6f7;
  font: inherit;
  font-size: 14px;
  color: #111822;
  outline: none;
  box-sizing: border-box;
  transition: border-color 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.tNQiB3fis9ulhb8vmuC0 input::placeholder { color: #9ca3af; }
.tNQiB3fis9ulhb8vmuC0 input:focus { border-color: #386af5; }

.ALo81unjQKXY2axMwfLp {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #e9eaed;
  border-radius: 999px;
  background: #fff;
  color: #555d6f;
  cursor: pointer;
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08), inset 0 -1px 1px rgba(0, 0, 0, 0.06);
  transition: background 160ms cubic-bezier(0.32, 0.72, 0, 1), transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ALo81unjQKXY2axMwfLp:active { transform: scale(0.94); }

.FOwC6tv79kxuqvi3Xmtu { margin: 0 0 22px; font-size: 13.5px; line-height: 1.5; color: #6b7280; }
.mpNWDCJYwqXZ0InbIaEH { padding: 20px 2px; font-size: 13.5px; color: #6b7280; }

.BhTI4aBY9IaQ8yYEZgK6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.k2nHOaUR2TCZvHUtO6ep {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 10px;
  border: 1px solid #dfe2e6;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: #111822;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 160ms cubic-bezier(0.32, 0.72, 0, 1), transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
.k2nHOaUR2TCZvHUtO6ep img { width: 24px; height: 24px; flex-shrink: 0; object-fit: contain; }
.k2nHOaUR2TCZvHUtO6ep span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k2nHOaUR2TCZvHUtO6ep:active { transform: scale(0.985); }


.QDIlsw7mIdup0Z7JMOAd { cursor: default; opacity: 0.5; box-shadow: none; }
.QDIlsw7mIdup0Z7JMOAd:active { transform: none; }

.KTec8Skt8WxDEjuh7H2E { margin: 22px 0 12px; font-size: 13px; font-weight: 600; color: #030712; }

/* Fade at the foot of the scroll region — hides once you reach the end. */
.cYM9TT69R5zZr2q03A1w {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0.72) 78%, #fff 100%);
  transition: opacity 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.oh1wRXZx4IfAJMFt4wqY { opacity: 0; }

/* Hover is a grey darken fill, matching the product rather than the website.
   Same value as the trigger pill, which came from Figma as --effect-hover-darken.
   Borders stay put on hover; only the surface changes. */
@media (hover: hover) and (pointer: fine) {
  .k2nHOaUR2TCZvHUtO6ep:hover { background: rgba(24, 32, 45, 0.05); }
  .QDIlsw7mIdup0Z7JMOAd:hover { background: #fff; }   /* not interactive — no response */
  .ALo81unjQKXY2axMwfLp:hover { background: rgba(24, 32, 45, 0.05); color: #030712; }
}

@media (max-width: 560px) {
  .I1WCORWYnfASTRvE0Ti9 { padding: 14px; }
  .lm_Cj0q6cqNum_O8Rumo { border-radius: 20px; }
  .pnvgXT37nlu7jxVBYbwC { padding: 20px 16px 18px; }
  .lm_Cj0q6cqNum_O8Rumo { height: min(720px, 92vh); }

  /* Stack the header: the title gets its own line rather than being squeezed
     against the search field, which made it wrap to two lines. */
  .ty6zfbT38toNb4CqSDPW { flex-wrap: wrap; gap: 10px; }
  .U1hDUt8KiIMtEUE7Otra { order: 1; flex: 1 1 auto; font-size: 18px; }
  .ty6zfbT38toNb4CqSDPW .ALo81unjQKXY2axMwfLp { order: 2; }
  .tNQiB3fis9ulhb8vmuC0 { order: 3; flex: 1 1 100%; }
  .tNQiB3fis9ulhb8vmuC0 input { width: 100%; }

  .BhTI4aBY9IaQ8yYEZgK6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.SUSOaBoY26D7RNr9eDCs {
  font-size: 13px;
  font-weight: 500;
  color: #ef4444;
  white-space: nowrap;
  animation: pqpAv6BUIQ3FRwc2Qi_0 120ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.v4RQ6DFc0JaoZiUzejJK {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid #1F2937;
  border-radius: 12px;
  background: linear-gradient(to bottom, #030712, #1F2937);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  white-space: nowrap;
  flex-shrink: 0;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .v4RQ6DFc0JaoZiUzejJK:hover {
    opacity: 0.85;
  }
}

.v4RQ6DFc0JaoZiUzejJK:active {
  transform: scale(0.97);
}

.v4RQ6DFc0JaoZiUzejJK:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* ── Voice input ── square soft-grey button beside Build; red while listening. */
.xZcgn0K5CRpv0H_Z72yG {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  transition: background 160ms cubic-bezier(0.32, 0.72, 0, 1),
              color 160ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (hover: hover) and (pointer: fine) {
  .xZcgn0K5CRpv0H_Z72yG:hover { background: #e5e7eb; }
  .yzrbnueSLdIqy573e8BG:hover { background: #fde2e2; }
}
.xZcgn0K5CRpv0H_Z72yG:active { transform: scale(0.95); }
.xZcgn0K5CRpv0H_Z72yG:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.yzrbnueSLdIqy573e8BG {
  background: #fee2e2;
  color: #dc2626;
  animation: wYoNYbdSjM20_HUXqdCc 1.6s ease-in-out infinite;
}
@keyframes wYoNYbdSjM20_HUXqdCc {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.28); }
  50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .yzrbnueSLdIqy573e8BG { animation: none; }
}
.wXxfxiULxwu3yM1DtH7Y .xZcgn0K5CRpv0H_Z72yG { background: #1f2937; color: #d1d5db; }
.wXxfxiULxwu3yM1DtH7Y .yzrbnueSLdIqy573e8BG { background: rgba(248, 113, 113, 0.16); color: #f87171; }
@media (hover: hover) and (pointer: fine) {
  .wXxfxiULxwu3yM1DtH7Y .xZcgn0K5CRpv0H_Z72yG:hover { background: #374151; }
  .wXxfxiULxwu3yM1DtH7Y .yzrbnueSLdIqy573e8BG:hover { background: rgba(248, 113, 113, 0.24); }
}

.y5PBhLrfkpkgSfE95C3v {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.rdmckDJ0d38M4R7TCX3S {
  margin-bottom: 0;
  margin-top: 20px;
}

.DAvMhMjqB3fGk6a_mflc .RFzTtX3i2ET8cy3goWND {
  -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black);
  mask-image: linear-gradient(to right, transparent, black 40px, black);
}

.rbYOvECDLHFeTL7NmXJA .RFzTtX3i2ET8cy3goWND {
  -webkit-mask-image: linear-gradient(to left, transparent, black 40px, black);
  mask-image: linear-gradient(to left, transparent, black 40px, black);
}

.DAvMhMjqB3fGk6a_mflc.rbYOvECDLHFeTL7NmXJA .RFzTtX3i2ET8cy3goWND {
  -webkit-mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, black 40px, black calc(100% - 40px), transparent);
}

.ZKxeYEiIcWgxhVbZbgqZ {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.32, 0.72, 0, 1),
              background 150ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .y5PBhLrfkpkgSfE95C3v:hover .ZKxeYEiIcWgxhVbZbgqZ {
    pointer-events: auto;
  }

  .y5PBhLrfkpkgSfE95C3v:hover .bpBFmkXsEvWuMmwqTK3j {
    opacity: 1;
  }

  .y5PBhLrfkpkgSfE95C3v:hover .tdwW64lNNyMJquyhA8tw {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  .ZKxeYEiIcWgxhVbZbgqZ:hover {
    background: #f9fafb;
  }
}

.n6zDtnPkk6iqy_0subyR {
  left: -14px;
}

.x3meAIkbwy01Sfc0MVm8 {
  right: -14px;
}

.RFzTtX3i2ET8cy3goWND {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 4px 0 12px;
  margin: -4px 0 -12px;
}

.WMf2KbnRRO3WLqdbuTuS {
  justify-content: center;
}

.RwckHN3I_u0sAyv_RF2s {
  justify-content: flex-start;
}

.ZYSZ13zaDf3eOnWeNLfQ {
  justify-content: flex-start;
}

.RFzTtX3i2ET8cy3goWND::-webkit-scrollbar {
  display: none;
}

.lDjWozwByV2jwCrooaBH {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #f3f4f6;
  border-radius: 999px;
  background: #ffffff;
  color: #6b7280;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.06);
  transition: box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1),
              color 200ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
  white-space: nowrap;
  flex-shrink: 0;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .lDjWozwByV2jwCrooaBH:hover {
    box-shadow: 0px 6px 12px -2px rgba(0, 0, 0, 0.1);
    color: #374151;
  }
}

.lDjWozwByV2jwCrooaBH:active {
  transform: scale(0.97);
}

@media (max-width: 480px) {
  /* With "Your agents" on a phone: Connect and Your agents share the first
     line with smaller text and one logo circle each (the Connect circle
     cycles through data sources), and
     Build takes the full width below them. */
  .HMVfN0kZAvWGwrkVlol4 {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  /* Still wraps on the narrowest phones (320px) rather than overflow. */
  .HMVfN0kZAvWGwrkVlol4 .Tidu4O2QzEnu0mBfMRrA {
    gap: 6px;
  }

  .HMVfN0kZAvWGwrkVlol4 .CpgLeIFN3PgVM8Cxetbe {
    width: 26px;
    height: 26px;
  }

  .HMVfN0kZAvWGwrkVlol4 .NrUI1qRqzMqRDohvMfcO {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .HMVfN0kZAvWGwrkVlol4 .v4RQ6DFc0JaoZiUzejJK {
    flex: 1 1 100%;
    padding: 12px 16px;
  }

  .HMVfN0kZAvWGwrkVlol4 .CWGwngsUKeUriZkQh6Qw,
  .HMVfN0kZAvWGwrkVlol4 .hzbDeBn4U92HA9lpZ6mV {
    gap: 4px;
  }

  .HMVfN0kZAvWGwrkVlol4 .FyHqdAQ6jTLoyl5MDlYI {
    font-size: 12px;
  }

  .HMVfN0kZAvWGwrkVlol4 .AQbO1oLsQrpo902lPL05 {
    width: 24px;
    height: 24px;
  }

  .HMVfN0kZAvWGwrkVlol4 .AQbO1oLsQrpo902lPL05 svg {
    width: 16px;
    height: 16px;
  }

  .HMVfN0kZAvWGwrkVlol4 .g6GV3mEOp62yXnse1bkg .CpgLeIFN3PgVM8Cxetbe:not(:first-child) {
    display: none;
  }

  /* With the mic on a phone: Connect keeps one logo circle so Connect, the
     mic and Build fit on one line, down to 320px. */
  .JFIee1I2_fXPSAyCC0C2 .g6GV3mEOp62yXnse1bkg .CpgLeIFN3PgVM8Cxetbe:not(:first-child) {
    display: none;
  }

  .JFIee1I2_fXPSAyCC0C2 .xZcgn0K5CRpv0H_Z72yG {
    width: 40px;
    height: 40px;
  }

  /* With Your agents too, the mic sits beside a full-width Build. */
  .HMVfN0kZAvWGwrkVlol4.JFIee1I2_fXPSAyCC0C2 .NrUI1qRqzMqRDohvMfcO {
    flex-wrap: nowrap;
  }

  .HMVfN0kZAvWGwrkVlol4.JFIee1I2_fXPSAyCC0C2 .v4RQ6DFc0JaoZiUzejJK {
    flex: 1 1 auto;
    padding: 10px 16px;
  }

  .EFzo4VNqH090pH8ngV9a {
    max-width: 100%;
    border-radius: 24px;
  }

  .EPIUZEOIGG01dDnOSlLw {
    border-radius: 20px;
  }

  .FyHqdAQ6jTLoyl5MDlYI {
    font-size: 13px;
  }
}

/* Narrowest phones with the mic: Connect gets its own line, and the mic sits
   beside a full-width Build below it, like the Your agents layout. */
@media (max-width: 360px) {
  .JFIee1I2_fXPSAyCC0C2 {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .JFIee1I2_fXPSAyCC0C2 .NrUI1qRqzMqRDohvMfcO {
    width: 100%;
  }

  .JFIee1I2_fXPSAyCC0C2 .v4RQ6DFc0JaoZiUzejJK {
    flex: 1 1 auto;
  }
}

/* ── Dark theme ── */

.wXxfxiULxwu3yM1DtH7Y .KpBzuQAwCtp0pmJHuQK8 {
  background: linear-gradient(
    135deg,
    rgba(252, 181, 0, 0.35),
    rgba(245, 56, 120, 0.3),
    rgba(56, 106, 245, 0.35)
  );
}

.wXxfxiULxwu3yM1DtH7Y .EFzo4VNqH090pH8ngV9a::before {
  background: conic-gradient(
    transparent 0deg,
    transparent 10deg,
    rgba(252, 181, 0, 0.6) 40deg,
    rgba(245, 56, 120, 0.5) 60deg,
    transparent 100deg,
    transparent 190deg,
    rgba(56, 106, 245, 0.6) 220deg,
    rgba(245, 56, 120, 0.45) 240deg,
    transparent 280deg,
    transparent 360deg
  );
}

.wXxfxiULxwu3yM1DtH7Y .EPIUZEOIGG01dDnOSlLw {
  background: #111827;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px -1px,
              rgba(0, 0, 0, 0.2) 0px 12px 30px -2px;
}

.wXxfxiULxwu3yM1DtH7Y ._1s3CFqNkCdOGd54rY4q {
  color: #f9fafb;
}

.wXxfxiULxwu3yM1DtH7Y .S2jB9xXdmgNxqZgd_3Ph {
  color: #6b7280;
}

.wXxfxiULxwu3yM1DtH7Y .rGoUzDL8_oDZQsAvF75g {
  background: #6b7280;
}

.wXxfxiULxwu3yM1DtH7Y .v4RQ6DFc0JaoZiUzejJK {
  border-color: #e5e7eb;
  background: linear-gradient(to bottom, #f9fafb, #e5e7eb);
  color: #111827;
}

.wXxfxiULxwu3yM1DtH7Y .SUSOaBoY26D7RNr9eDCs {
  color: #f87171;
}

.wXxfxiULxwu3yM1DtH7Y .lDjWozwByV2jwCrooaBH {
  border-color: #374151;
  background: #1f2937;
  color: #9ca3af;
  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .wXxfxiULxwu3yM1DtH7Y .lDjWozwByV2jwCrooaBH:hover {
    box-shadow: 0px 6px 12px -2px rgba(0, 0, 0, 0.4);
    color: #e5e7eb;
  }
}

.wXxfxiULxwu3yM1DtH7Y .ZKxeYEiIcWgxhVbZbgqZ {
  border-color: #374151;
  background: #1f2937;
  color: #9ca3af;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

@media (hover: hover) and (pointer: fine) {
  .wXxfxiULxwu3yM1DtH7Y .ZKxeYEiIcWgxhVbZbgqZ:hover {
    background: #374151;
  }
}

.wXxfxiULxwu3yM1DtH7Y .CWGwngsUKeUriZkQh6Qw {
  background: #1f2937;
}

@media (hover: hover) and (pointer: fine) {
  .wXxfxiULxwu3yM1DtH7Y .CWGwngsUKeUriZkQh6Qw:hover {
    background: #374151;
  }
}

.wXxfxiULxwu3yM1DtH7Y .AQbO1oLsQrpo902lPL05 {
  color: #d1d5db;
}

.wXxfxiULxwu3yM1DtH7Y .FyHqdAQ6jTLoyl5MDlYI {
  color: #d1d5db;
}

.wXxfxiULxwu3yM1DtH7Y .v08qaceIL1hsx6AVLiyZ {
  color: #d1d5db;
}

.wXxfxiULxwu3yM1DtH7Y .lFDLxIwSg0CxwO_lC9xV {
  color: #6b7280;
}

@media (hover: hover) and (pointer: fine) {
  .wXxfxiULxwu3yM1DtH7Y .lFDLxIwSg0CxwO_lC9xV:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
  }
}



.jUqVrMkuNtT0emBppfDp {
  position: absolute;
  inset: 0;
}

.wXxfxiULxwu3yM1DtH7Y .S2SQ2_40f3U1cSAqaEr_ {
  filter: invert(1);
}

.wXxfxiULxwu3yM1DtH7Y .CpgLeIFN3PgVM8Cxetbe {
  border-color: #4b5563;
  background: #111827;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.4);
}

@media (hover: hover) and (pointer: fine) {
}





@media (hover: hover) and (pointer: fine) {
}

@media (prefers-reduced-motion: reduce) {
  .KpBzuQAwCtp0pmJHuQK8 {
    animation: none;
    opacity: 0.6;
  }

  .EFzo4VNqH090pH8ngV9a::before {
    animation: none;
  }

  .rGoUzDL8_oDZQsAvF75g {
    animation: none;
    opacity: 0.6;
  }

  .S2jB9xXdmgNxqZgd_3Ph {
    animation: none;
  }

  .v4RQ6DFc0JaoZiUzejJK,
  .lDjWozwByV2jwCrooaBH {
    transition: opacity 200ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .v4RQ6DFc0JaoZiUzejJK:active,
  .lDjWozwByV2jwCrooaBH:active {
    transform: none;
    opacity: 0.7;
  }

  


  .SUSOaBoY26D7RNr9eDCs {
    animation: gJdtiRfA2JLlANBdBBD8 100ms linear both;
  }

  .Ze46Q4s_1QM_9fwhxnA7 {
    animation: none;
  }

  .sTr5M5Z_I8ED30fOIgKE {
    display: none;
  }

  .CWGwngsUKeUriZkQh6Qw:active {
    transform: none;
    opacity: 0.85;
  }
}