/* 9senses AI Explainers — standardized optical pattern.
 *
 * Typography: Special Elite (headings, labels, node pills, numbers),
 *             Open Sans (all body copy).
 *             Both are self-hosted by the site under exactly these family
 *             names. This plugin loads no font files and requests nothing
 *             from an external CDN — it only references the families.
 * Ink:        #D6D6D6 for text and headings (var --ns-aix-ink).
 * Accent:     #58a7f9 (var --ns-aix-accent), secondary #2b6cb0.
 *
 * Layout > 750px:  head -> [steps | animation] -> [step explanation | aspects]
 * Layout <= 750px: head -> animation (+dots) -> explanation -> aspects
 */

.ns-aix{
  --ns-aix-ink:#D6D6D6;
  --ns-aix-accent:#58a7f9;
  --ns-aix-secondary:#2b6cb0;
  --ns-aix-muted:color-mix(in srgb, var(--ns-aix-ink) 68%, transparent);
  --ns-aix-faint:color-mix(in srgb, var(--ns-aix-ink) 40%, transparent);
  --ns-tw:"Special Elite","Courier Prime","Courier New",monospace;
  --ns-body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;width:100%;overflow:visible;isolation:isolate;
  color:var(--ns-aix-ink);font-family:var(--ns-body);
  padding:clamp(8px,1.6vw,16px) 0 clamp(14px,2.2vw,24px);
}
.ns-aix *{box-sizing:border-box}
/* Every heading inside the widget is typewriter, whatever the theme sets.
   Divi and most themes target h1-h6 with high-specificity body-scoped rules,
   so this catch-all is stated explicitly and stays !important. */
.ns-aix h1,.ns-aix h2,.ns-aix h3,.ns-aix h4,.ns-aix h5,.ns-aix h6{
  font-family:var(--ns-tw) !important;font-weight:400 !important;
  font-style:normal !important;text-transform:none;
}

/* ---- header ------------------------------------------------------------ */
.ns-aix-head{width:100%;max-width:1180px;margin:0 auto clamp(8px,1.2vw,14px)}
.ns-aix-kicker{
  font-family:var(--ns-tw) !important;font-size:clamp(12px,1.1vw,14px);letter-spacing:.08em;
  color:var(--ns-aix-accent);margin-bottom:5px;
  text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 30%, transparent);
}
/* Deliberately small h3 (standard element of the pattern) */
.ns-aix-title{
  font-family:var(--ns-tw) !important;font-weight:400 !important;
  color:var(--ns-aix-ink) !important;
  font-size:clamp(20px,1.9vw,26px);line-height:1.18 !important;letter-spacing:.02em;
  margin:0 0 5px !important;
}
.ns-aix-intro{
  font-family:var(--ns-body);font-size:clamp(14px,1.05vw,16px);line-height:1.6;
  color:var(--ns-aix-muted);max-width:1080px;margin:0;
}
.ns-aix-tabs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
/* Per-flow explanation. Stacked in one grid cell so switching journeys
   cannot change the height of the header. */
/* ---- compound journey bubble (restored from the robotics explainer) ----
   The active tab and the journey explanation are enclosed by one outline;
   the unselected tab sits outside it. The path itself is computed from the
   live element boxes, so it follows tab width and text wrapping. */
.ns-aix-flowgroup{position:relative}
/* The shaped variant zeroes the tabs' own top margin (the outline is drawn
   from the tab box), so the gap to the paragraph above has to live on the
   group itself — otherwise the bubble sits flush against the intro text. */
.ns-aix-flowgroup-shaped{padding:0 0 2px;margin-top:clamp(14px,1.5vw,22px)}
.ns-aix-flowshape{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.ns-aix-flowshape-fill{
  fill:color-mix(in srgb, var(--ns-aix-secondary) 16%, transparent);
  stroke:none;
}
.ns-aix-flowshape-glow{
  fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;
  stroke:color-mix(in srgb,var(--ns-aix-accent) 70%, rgba(255,255,255,.30));
  stroke-width:1.2;opacity:.62;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--ns-aix-accent) 42%, transparent));
  transition:opacity .5s ease;
}
.ns-aix-flowgroup-shaped .ns-aix-tabs{position:relative;z-index:2;margin-top:0;padding:6px 12px 0}
/* inside the bubble the tab border would double the outline */
.ns-aix-flowgroup-shaped .ns-aix-tab{border-color:transparent;background:transparent}
.ns-aix-flowgroup-shaped .ns-aix-tab.ns-on{
  border-color:transparent;box-shadow:none;color:#fff;
}
.ns-aix-flowgroup-shaped .ns-aix-flow-intros{padding:0 14px 7px;position:relative;z-index:2;margin-top:4px}

.ns-aix-flow-intros{display:grid;align-items:start;margin-top:9px;overflow:hidden}
.ns-aix-flow-intro{
  grid-area:1 / 1;margin:0;opacity:0;pointer-events:none;
  font-family:var(--ns-body);font-size:clamp(13px,.95vw,14.5px);line-height:1.42;
  color:var(--ns-aix-muted);max-width:1080px;
  transition:opacity .7s ease;
}
.ns-aix-flow-intro.ns-on{opacity:1;pointer-events:auto}
.ns-aix-tab{
  appearance:none;cursor:pointer;font-family:var(--ns-tw);font-size:13.5px;letter-spacing:.05em;
  color:var(--ns-aix-muted);background:transparent;border:1px solid var(--ns-aix-faint);
  border-radius:999px;padding:6px 16px 4px;
  transition:color .6s ease,border-color .6s ease,box-shadow .6s ease;
}
.ns-aix-tab:hover,.ns-aix-tab:focus-visible{color:var(--ns-aix-ink);outline:none}
.ns-aix-tab:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--ns-aix-accent) 58%, transparent),0 0 16px color-mix(in srgb,var(--ns-aix-accent) 24%, transparent)}
.ns-aix-tab.ns-on{
  color:#fff;border-color:color-mix(in srgb,var(--ns-aix-accent) 70%, transparent);
  box-shadow:0 0 16px color-mix(in srgb,var(--ns-aix-accent) 30%, transparent);
}

/* ---- two-column body: steps | animation -------------------------------- */
.ns-aix-body{
  display:grid;grid-template-columns:minmax(250px,.72fr) minmax(400px,1.28fr);
  gap:clamp(16px,3vw,44px);align-items:stretch;
  width:100%;max-width:1180px;margin:8px auto 0;
}
.ns-aix-copy{overflow:visible;min-width:0;display:flex;flex-direction:column}
.ns-aix-progress{height:2px;background:color-mix(in srgb,var(--ns-aix-ink) 14%, transparent);overflow:hidden;margin:6px 0 10px;max-width:520px}
.ns-aix-progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--ns-aix-accent),var(--ns-aix-secondary));
  transition:width 1.4s cubic-bezier(.16,.72,.18,1);
}

/* Compact numbered items: reduced so the full sequence fits the column
   without scrolling next to the stage. */
.ns-aix-step-panel{display:none}
.ns-aix-step-panel.ns-on{display:block}
.ns-aix-steps{list-style:none !important;margin:0 !important;padding:0 !important;display:none;gap:1px;max-width:560px}
.ns-aix-steps.ns-on{display:grid}
.ns-aix-steps li{margin:0 !important;padding:0 !important;list-style:none !important}
.ns-aix-step{
  appearance:none;border:0;background:transparent;color:var(--ns-aix-faint);width:100%;
  display:grid;grid-template-columns:auto 1fr;gap:7px;align-items:start;text-align:left;
  padding:3px 0 3px 0;cursor:pointer;border-radius:0;font-family:var(--ns-body);
  transition:color 1.1s cubic-bezier(.16,.72,.18,1),transform 1.1s cubic-bezier(.16,.72,.18,1),background 1.1s cubic-bezier(.16,.72,.18,1);
}
.ns-aix-step:hover,.ns-aix-step:focus-visible{color:var(--ns-aix-ink);outline:none;background:color-mix(in srgb,var(--ns-aix-ink) 4%, transparent)}
.ns-aix-step:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ns-aix-accent) 52%, transparent)}
.ns-aix-step.ns-on{
  color:var(--ns-aix-ink);transform:translateX(5px);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ns-aix-ink) 5%, transparent),transparent 72%);
}
/* The number is set as tall as the two text rows it belongs to and aligned
   left with them, so the column reads as one block instead of a thin gutter
   with a small figure floating in it. */
/* Sized to sit against the label without stealing width from the text: a
   larger figure pushed the descriptions into extra line breaks. Top aligned
   with the label rather than centred on the whole row. */
.ns-aix-step-num{
  font-family:var(--ns-tw);font-size:22px;line-height:1;color:var(--ns-aix-faint);
  text-align:left;margin-top:1px;opacity:.55;
  transition:color 1s cubic-bezier(.16,.72,.18,1),opacity 1s cubic-bezier(.16,.72,.18,1),text-shadow 1s cubic-bezier(.16,.72,.18,1);
}
.ns-aix-step.ns-on .ns-aix-step-num{
  color:var(--ns-aix-accent);opacity:1;
  text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 45%, transparent);
}
.ns-aix-step-label{
  display:block;font-family:var(--ns-tw);font-size:15px;line-height:1.2;color:inherit;
  letter-spacing:.03em;opacity:.85;
  transition:letter-spacing .9s cubic-bezier(.16,.72,.18,1),opacity .9s cubic-bezier(.16,.72,.18,1);
}
.ns-aix-step.ns-on .ns-aix-step-label{letter-spacing:.05em;opacity:1}
/* The one-liner is allowed to run past the sequence column and over the
   empty left margin of the animation rather than wrapping onto a second
   line. It is not interactive, so it cannot get in the way of the stage. */
.ns-aix-step-micro{
  display:block;font-size:11px;line-height:1.3;color:var(--ns-aix-faint);margin-top:1px;opacity:.75;
  white-space:nowrap;width:max-content;max-width:190%;pointer-events:none;
  transition:color 1s cubic-bezier(.16,.72,.18,1) .12s,opacity 1s cubic-bezier(.16,.72,.18,1) .12s;
}
.ns-aix-step.ns-on .ns-aix-step-micro{color:var(--ns-aix-muted);opacity:1}

/* ---- animation stage (per-topic scene, see assets/scenes/) -------------- */
/* The stage no longer dictates the row height. It was fixed at up to 480px
   while the compact step list needs ~320px, which left a large empty band
   under the sequence before the explanation. The stage now starts near the
   list height and stretches to whatever the taller column actually needs. */
.ns-aix-stage{
  position:relative;min-height:clamp(300px,27vw,390px);height:100%;
  width:100%;overflow:hidden;
}
.ns-aix-canvas{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  display:block !important;max-width:none !important;max-height:none !important;margin:0 !important;
}
/* Only the step currently being shown carries a node word. The others are
   kept in the DOM (for translation plugins and for screen readers) but are
   never painted: they have no position of their own, so leaving them visible
   stacked them all in the stage corner. */
.ns-aix-node{
  position:absolute;left:0;top:0;z-index:3;appearance:none;border:0;cursor:pointer;
  font-family:var(--ns-tw);font-weight:400;letter-spacing:.04em;text-transform:lowercase;
  font-size:13.5px;line-height:1;color:var(--ns-aix-ink);
  background:transparent;padding:5px 11px 3px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ns-aix-ink) 18%, transparent);
  text-shadow:0 0 9px rgba(0,0,0,.7);white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .55s ease,border-color 1.2s cubic-bezier(.16,.72,.18,1),box-shadow 1.2s cubic-bezier(.16,.72,.18,1),color 1.2s cubic-bezier(.16,.72,.18,1);
  will-change:transform,opacity;
}
.ns-aix-node.ns-on{
  opacity:1;pointer-events:auto;
  color:#fff;
  border-color:color-mix(in srgb,var(--ns-aix-accent) 65%, rgba(255,255,255,.3));
  box-shadow:0 0 22px color-mix(in srgb,var(--ns-aix-accent) 28%, transparent);
}
.ns-aix-node.ns-hidden{display:none}
.ns-aix-node span{display:block;transform:translateY(1px)}

/* Legacy 2.4.2/2.4.3 page-cache guard. Current renderer emits no motion
   toggle, but stale Divi/WordPress HTML must never make it visible. */
.ns-aix-motion-toggle{display:none !important}

/* ---- compact step navigator -------------------------------------------- */
.ns-aix-controls{
  display:none;width:100%;max-width:1180px;margin:4px auto 0;min-height:36px;
  align-items:center;justify-content:center;
}
.ns-aix-dots{display:flex;justify-content:center;min-width:0}
.ns-aix-dotset{display:none;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;max-width:100%}
.ns-aix-dotset.ns-on{display:flex}
/* The button is a full touch target; the pseudo-element preserves the small,
   quiet visual dot used by the original layout. */
.ns-aix-dot{
  appearance:none;border:0;cursor:pointer;position:relative;width:36px;height:36px;padding:0;
  border-radius:50%;background:transparent;
}
.ns-aix-dot::before{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--ns-aix-ink) 26%, transparent);
  transition:background .38s ease,box-shadow .38s ease,transform .38s ease;
}
.ns-aix-dot.ns-on::before{
  background:var(--ns-aix-accent);transform:translate(-50%,-50%) scale(1.25);
  box-shadow:0 0 10px color-mix(in srgb,var(--ns-aix-accent) 55%, transparent);
}
.ns-aix-dot:focus-visible{outline:1px solid color-mix(in srgb,var(--ns-aix-accent) 72%, transparent);outline-offset:-5px}

/* ---- two-column band below: explanation | key aspects ------------------ */
.ns-aix-below{
  display:grid;grid-template-columns:minmax(280px,1.05fr) minmax(260px,.95fr);
  gap:clamp(16px,3vw,44px);align-items:start;
  width:100%;max-width:1180px;margin:clamp(10px,1.6vw,18px) auto 0;
  border-top:1px solid color-mix(in srgb,var(--ns-aix-ink) 12%, transparent);
  padding-top:clamp(12px,1.6vw,18px);
}
/* Every panel occupies the SAME grid cell, so the column is always as tall
   as its longest step and the widget cannot change height as the sequence
   advances. Previously only the active panel was in flow, so each step
   resized the band and pushed the rest of the page up and down. */
.ns-aix-explain,.ns-aix-aspects{display:grid;align-items:start}
.ns-aix-panel,.ns-aix-aspectset{
  grid-area:1 / 1;opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
/* Outgoing copy clears first; incoming copy starts after the short clearance.
   The shared grid cell still reserves the longest panel height, so this removes
   text ghosting without reintroducing page movement. */
.ns-aix-panel.ns-on,.ns-aix-aspectset.ns-on{
  opacity:1;transform:translateY(0);pointer-events:auto;
  transition:opacity .42s ease .14s,transform .52s cubic-bezier(.2,.68,.18,1) .08s;
}
.ns-aix-panel h4{
  font-family:var(--ns-tw) !important;font-weight:400 !important;
  font-size:22px;line-height:1.2 !important;
  color:var(--ns-aix-ink) !important;margin:0 0 5px !important;
}
/* The decorative rule is replaced by the step number, repeated from the
   sequence so the reader can see which step this explanation belongs to. */
.ns-aix-panel-num{
  color:var(--ns-aix-accent);margin-right:.45em;font-size:1em;
  text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 40%, transparent);
}
.ns-aix-panel p{
  margin:0;font-family:var(--ns-body);font-size:14.5px;line-height:1.62;
  color:color-mix(in srgb,var(--ns-aix-ink) 86%, transparent);
}
.ns-aix-aspectset{display:grid;gap:22px;align-content:start}
.ns-aix-aspectset.ns-on{display:grid}
.ns-aix-aspect{
  border-left:2px solid color-mix(in srgb,var(--ns-aix-accent) 55%, transparent);
  padding:2px 0 2px 14px;
}
.ns-aix-aspect h5{
  font-family:var(--ns-tw) !important;font-weight:400 !important;font-size:15.5px;
  letter-spacing:.045em;text-transform:lowercase;
  color:var(--ns-aix-accent) !important;margin:0 0 1px !important;
  text-shadow:0 0 10px color-mix(in srgb,var(--ns-aix-accent) 30%, transparent);
}
.ns-aix-aspect p{
  margin:0;font-family:var(--ns-body);font-size:13.3px;line-height:1.56;
  color:var(--ns-aix-muted);
}

/* ---- Divi builder placeholder ------------------------------------------ */
/* Robotics keeps its real 3D arm; the WebGL canvas overlays the 2D one,
   which then only draws the autonomous journey or acts as fallback. */
/* The WebGL layer belongs to the industrial journey only. It is absolutely
   positioned above the 2D canvas, so leaving it in place on the autonomous
   journey covered that scene with the arm's last frame — the autonomous
   animation was being drawn underneath and never seen. */
.ns-aix-canvas3d{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;z-index:1;
}
.ns-aix-rob3d:not([data-journey="industrial"]) .ns-aix-canvas3d{display:none}
.ns-aix-stage .ns-aix-node{z-index:3}

.ns-aix-placeholder{
  padding:12px;border:1px dashed #aaa;color:#aaa;font-size:12px;
  font-family:system-ui,sans-serif;background:rgba(0,0,0,.04);
}

/* The viewport breakpoint is the mobile switch. Measured container width is
   used only for this tighter two-column grid, so ordinary Divi columns do not
   unexpectedly become a single-column mobile composition. The media queries
   below remain as the no-JavaScript/early-render fallback. */
.ns-aix.ns-aix-compact .ns-aix-body{grid-template-columns:1fr;gap:10px}
.ns-aix.ns-aix-compact .ns-aix-copy{overflow:visible;display:none}
.ns-aix.ns-aix-compact .ns-aix-stage{min-height:clamp(300px,80vw,400px);height:auto}
.ns-aix.ns-aix-compact .ns-aix-controls{display:flex}
.ns-aix.ns-aix-compact .ns-aix-dots{display:flex}
.ns-aix.ns-aix-compact .ns-aix-below{grid-template-columns:1fr;gap:14px}
.ns-aix.ns-aix-compact .ns-aix-explain,.ns-aix.ns-aix-compact .ns-aix-aspects{min-height:0}
.ns-aix.ns-aix-compact .ns-aix-title{font-size:clamp(19px,5.6vw,24px)}
.ns-aix.ns-aix-compact .ns-aix-node{font-size:12.5px;padding:4px 9px 2px}
.ns-aix.ns-aix-narrow .ns-aix-body{
  grid-template-columns:minmax(148px,.62fr) minmax(240px,1.38fr);
  gap:clamp(8px,1vw,12px);
}
.ns-aix.ns-aix-narrow .ns-aix-below{
  grid-template-columns:minmax(160px,1.05fr) minmax(160px,.95fr);
  gap:clamp(8px,1vw,12px);
}

/* ---- responsive: <= 750px drops the left sequence column ---------------- */
@media (max-width:750px){
  .ns-aix-body{grid-template-columns:1fr;gap:10px}
  .ns-aix-copy{overflow:visible;display:none}
  .ns-aix-stage{min-height:clamp(300px,80vw,400px);height:auto}
  .ns-aix-controls{display:flex}
  .ns-aix-dots{display:flex}
  .ns-aix-below{grid-template-columns:1fr;gap:14px}
  .ns-aix-explain{min-height:0}
  .ns-aix-aspects{min-height:0}
  .ns-aix-title{font-size:clamp(19px,5.6vw,24px)}
  .ns-aix-node{font-size:12.5px;padding:4px 9px 2px}
}

/* Between 750px and ~960px keep two columns but relax minimums */
@media (min-width:751px) and (max-width:980px){
  .ns-aix-body{grid-template-columns:minmax(220px,.8fr) minmax(320px,1.2fr)}
}

@media (prefers-reduced-motion:reduce){
  .ns-aix-step,.ns-aix-step-num,.ns-aix-step-label,.ns-aix-step-micro,
  .ns-aix-panel,.ns-aix-aspectset,.ns-aix-progress span,.ns-aix-node,.ns-aix-tab,.ns-aix-dot::before{
    transition:none !important;
  }
}

/* ---- NLP Development -> Implementation handoff ------------------------
   Restored from the standalone NLP 1.1.6 explainer. The process content
   dissolves, a concise "model goes live" panel holds in the body, and a
   luminous token crosses from the Development tab to Implementation. The
   scene canvas itself is untouched; this is controller/DOM presentation only. */
.ns-aix-nlp .ns-aix-body{position:relative}
.ns-aix-nlp .ns-aix-tab[data-flow="execution"]{position:relative;overflow:visible}
.ns-aix-nlp .ns-aix-tab[data-flow="execution"]::before,
.ns-aix-nlp .ns-aix-tab[data-flow="execution"]::after{
  content:"";position:absolute;pointer-events:none;opacity:0;z-index:5;
}
.ns-aix-nlp .ns-aix-tab[data-flow="execution"]::before{
  left:var(--ns-aix-handoff-start,-12px);top:50%;
  width:calc(var(--ns-aix-handoff-end,50%) - var(--ns-aix-handoff-start,-12px));
  height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
}
.ns-aix-nlp .ns-aix-tab[data-flow="execution"]::after{
  left:var(--ns-aix-handoff-start,-12px);top:50%;width:15px;height:15px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.72);
  background:radial-gradient(circle at 32% 30%,#fff 0 24%,#dffbff 25%,#98efff 56%,rgba(152,239,255,.18) 78%,rgba(152,239,255,0) 100%);
  box-shadow:0 0 16px rgba(255,255,255,.98),0 0 34px rgba(152,239,255,.62),0 0 56px color-mix(in srgb,var(--ns-aix-accent) 35%, transparent);
}

.ns-aix-nlp[data-handoff="travel"] .ns-aix-copy,
.ns-aix-nlp[data-handoff="travel"] .ns-aix-stage,
.ns-aix-nlp[data-handoff="travel"] .ns-aix-controls,
.ns-aix-nlp[data-handoff="travel"] .ns-aix-below{
  animation:nsAixNlpContentOut248 var(--ns-aix-handoff-duration,7200ms) ease forwards !important;
  pointer-events:none !important;
}
@keyframes nsAixNlpContentOut248{
  0%{opacity:1;filter:brightness(1)}
  78%{opacity:.18;filter:brightness(.78)}
  100%{opacity:0;filter:brightness(.72)}
}
.ns-aix-nlp[data-handoff="in"] .ns-aix-copy,
.ns-aix-nlp[data-handoff="in"] .ns-aix-stage,
.ns-aix-nlp[data-handoff="in"] .ns-aix-controls,
.ns-aix-nlp[data-handoff="in"] .ns-aix-below{
  opacity:0;animation:nsAixNlpContentIn248 .85s ease forwards !important;
  pointer-events:none !important;
}
@keyframes nsAixNlpContentIn248{
  0%{opacity:0;filter:brightness(.88)}
  100%{opacity:1;filter:brightness(1)}
}

.ns-aix-nlp[data-handoff="travel"] .ns-aix-tab[data-flow="development"]{
  animation:nsAixNlpDevTabFade248 var(--ns-aix-handoff-duration,7200ms) cubic-bezier(.22,.61,.36,1) forwards;
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-tab[data-flow="execution"]{
  animation:nsAixNlpImplTabLight248 var(--ns-aix-handoff-duration,7200ms) cubic-bezier(.22,.61,.36,1) forwards;
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-tab[data-flow="execution"]::before{
  opacity:1;animation:nsAixNlpTabLine248 var(--ns-aix-handoff-duration,7200ms) ease forwards;
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-tab[data-flow="execution"]::after{
  opacity:1;animation:nsAixNlpTabToken248 var(--ns-aix-handoff-duration,7200ms) cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes nsAixNlpDevTabFade248{
  0%{opacity:1;filter:brightness(1)}
  25%{opacity:.78;filter:brightness(.92)}
  78%{opacity:.36;filter:brightness(.72)}
  100%{opacity:.34;filter:brightness(.70)}
}
@keyframes nsAixNlpImplTabLight248{
  0%,58%{box-shadow:none;filter:brightness(.78)}
  78%{box-shadow:0 0 22px rgba(255,255,255,.48),0 0 34px color-mix(in srgb,var(--ns-aix-accent) 34%, transparent);filter:brightness(1.22)}
  100%{box-shadow:0 0 16px color-mix(in srgb,var(--ns-aix-accent) 25%, transparent);filter:brightness(1.08)}
}
@keyframes nsAixNlpTabLine248{
  0%{opacity:0} 10%{opacity:.95} 82%{opacity:.95} 100%{opacity:0}
}
@keyframes nsAixNlpTabToken248{
  0%{left:var(--ns-aix-handoff-start,-12px);opacity:0;transform:translate(-50%,-50%) scale(.72)}
  10%{opacity:1}
  78%{left:var(--ns-aix-handoff-end,50%);opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  100%{left:var(--ns-aix-handoff-end,50%);opacity:0;transform:translate(-50%,-50%) scale(.86)}
}
.ns-aix-nlp[data-handoff="in"] .ns-aix-tab[data-flow="execution"]{
  box-shadow:0 0 22px color-mix(in srgb,var(--ns-aix-accent) 24%, transparent),0 0 34px rgba(255,255,255,.08) !important;
  filter:brightness(1.05);
}

.ns-aix-nlp .ns-aix-handoff-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(74%,520px);max-width:92vw;z-index:40;pointer-events:none;opacity:0;
  display:grid;grid-template-columns:3px minmax(0,1fr);gap:20px;
  padding:22px 26px 22px 22px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--ns-aix-accent) 30%, rgba(255,255,255,.14));
  background:
    radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--ns-aix-accent) 12%,transparent) 0%,transparent 55%),
    linear-gradient(180deg,rgba(8,14,26,.92),rgba(6,10,20,.86));
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 30px color-mix(in srgb,var(--ns-aix-accent) 22%,transparent),
    0 0 60px color-mix(in srgb,var(--ns-aix-secondary) 16%,transparent),
    0 24px 60px rgba(0,0,0,.5);
  backdrop-filter:blur(7px) saturate(1.15);-webkit-backdrop-filter:blur(7px) saturate(1.15);
}
.ns-aix-nlp .ns-aix-handoff-rail{
  position:relative;width:3px;border-radius:999px;transform-origin:top center;
  background:linear-gradient(180deg,var(--ns-aix-accent),color-mix(in srgb,var(--ns-aix-secondary) 70%,white 8%));
  box-shadow:0 0 16px color-mix(in srgb,var(--ns-aix-accent) 60%,transparent),0 0 30px color-mix(in srgb,var(--ns-aix-secondary) 28%,transparent);
}
.ns-aix-nlp .ns-aix-handoff-inner{min-width:0}
.ns-aix-nlp .ns-aix-handoff-kicker{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:9px;
  font-family:var(--ns-tw)!important;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ns-aix-accent);text-shadow:0 0 14px color-mix(in srgb,var(--ns-aix-accent) 45%,transparent);
}
.ns-aix-nlp .ns-aix-handoff-kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ns-aix-accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--ns-aix-accent) 80%,transparent);
  animation:nsAixNlpHandoffDot248 1.5s ease-in-out infinite;
}
.ns-aix-nlp .ns-aix-handoff-panel h4{
  margin:0 0 11px!important;font-family:var(--ns-tw)!important;font-weight:400!important;
  font-size:clamp(20px,1.9vw,27px);line-height:1.18!important;letter-spacing:.01em;color:#fff!important;
  text-shadow:0 0 20px color-mix(in srgb,var(--ns-aix-accent) 22%,transparent),0 0 14px rgba(0,0,0,.4);
}
.ns-aix-nlp .ns-aix-handoff-panel p{
  margin:0;max-width:46ch;font-family:var(--ns-body);font-size:clamp(14px,1.06vw,15.5px);line-height:1.56;
  color:rgba(255,255,255,.82);text-shadow:0 0 12px rgba(0,0,0,.42);
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel{
  animation:nsAixNlpHandoffIn248 var(--ns-aix-handoff-duration,7200ms) cubic-bezier(.16,.72,.18,1) forwards;
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-rail{
  animation:nsAixNlpHandoffRail248 var(--ns-aix-handoff-duration,7200ms) cubic-bezier(.16,.72,.18,1) forwards;
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-kicker,
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel h4,
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel p{
  animation:nsAixNlpHandoffRise248 var(--ns-aix-handoff-duration,7200ms) cubic-bezier(.16,.72,.18,1) forwards;
}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel h4{animation-delay:.04s}
.ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel p{animation-delay:.08s}
.ns-aix-nlp[data-handoff="in"] .ns-aix-handoff-panel{animation:none!important}
@keyframes nsAixNlpHandoffIn248{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.965)}
  8%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes nsAixNlpHandoffRail248{
  0%{transform:scaleY(0);opacity:0} 3%{opacity:1} 12%,100%{transform:scaleY(1);opacity:1}
}
@keyframes nsAixNlpHandoffRise248{
  0%,6%{opacity:0;transform:translateY(12px)} 16%,100%{opacity:1;transform:translateY(0)}
}
@keyframes nsAixNlpHandoffDot248{
  0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.7)}
}

@media (max-width:750px){
  .ns-aix-nlp .ns-aix-tab[data-flow="execution"]::before,
  .ns-aix-nlp .ns-aix-tab[data-flow="execution"]::after{display:none!important}
  .ns-aix-nlp .ns-aix-handoff-panel{width:min(90%,520px);padding:19px 20px 19px 17px;gap:15px}
}
@media (prefers-reduced-motion:reduce){
  .ns-aix-nlp[data-handoff] .ns-aix-copy,
  .ns-aix-nlp[data-handoff] .ns-aix-stage,
  .ns-aix-nlp[data-handoff] .ns-aix-controls,
  .ns-aix-nlp[data-handoff] .ns-aix-below,
  .ns-aix-nlp[data-handoff] .ns-aix-tab,
  .ns-aix-nlp[data-handoff] .ns-aix-tab::before,
  .ns-aix-nlp[data-handoff] .ns-aix-tab::after,
  .ns-aix-nlp[data-handoff] .ns-aix-handoff-panel,
  .ns-aix-nlp[data-handoff] .ns-aix-handoff-rail,
  .ns-aix-nlp[data-handoff] .ns-aix-handoff-kicker,
  .ns-aix-nlp[data-handoff] .ns-aix-handoff-panel h4,
  .ns-aix-nlp[data-handoff] .ns-aix-handoff-panel p{animation:none!important}
  .ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel{
    opacity:1;transform:translate(-50%,-50%) scale(1)
  }
  .ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-rail{opacity:1;transform:scaleY(1)}
  .ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-kicker,
  .ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel h4,
  .ns-aix-nlp[data-handoff="travel"] .ns-aix-handoff-panel p{opacity:1;transform:none}
  .ns-aix-nlp .ns-aix-handoff-kicker::before{animation:none!important}
}