/* 9senses Generative AI Explainer — standalone plugin (matches the NLP + Chatbot Audit explainers' design language) */
/* ============================================================
     9senses Generative AI Explainer  (prefix: ns-gx)
     Design language matched to the NLP + Chatbot Audit explainers:
     Special Elite display, Inter body, dark glass, #30ce7c / #0c71c3,
     particle-field canvas backdrop, gradient rails, house easing.
     ============================================================ */
  .ns-gx{
    --ns-gx-accent:#30ce7c;
    --ns-gx-secondary:#0c71c3;
    --ns-ink:#f1f1f1;
    --ns-muted:rgba(255,255,255,.64);
    --ns-body:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --ns-tw:"Special Elite","Courier Prime",Georgia,serif;
    --ease:cubic-bezier(.16,.72,.18,1);
    position:relative;width:100%;max-width:1180px;margin:0 auto;
    color:var(--ns-ink);font-family:var(--ns-body);isolation:isolate;
  }
  .ns-gx *{box-sizing:border-box}
  .ns-gx svg.ic{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}

  /* ---- Header ---- */
  .ns-gx-head{margin:0 0 clamp(14px,2vw,22px)}
  .ns-gx-kicker{font-family:var(--ns-tw);font-size:clamp(13px,1.2vw,15px);letter-spacing:.14em;text-transform:uppercase;color:var(--ns-gx-accent);margin:0 0 10px;display:inline-flex;align-items:center;gap:9px}
  .ns-gx-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ns-gx-accent);box-shadow:0 0 10px color-mix(in srgb,var(--ns-gx-accent) 80%,transparent);animation:nsGxDot 1.5s ease-in-out infinite}
  @keyframes nsGxDot{0%,100%{opacity:1}50%{opacity:.35}}
  .ns-gx-title{font-family:var(--ns-tw);font-weight:400;color:#fff;font-size:clamp(29px,3vw,42px);line-height:1.08;letter-spacing:.02em;margin:0 0 12px}
  .ns-gx-intro{font-size:clamp(15px,1.12vw,16.5px);line-height:1.62;color:var(--ns-muted);max-width:760px;margin:0}

  /* ---- Horizontal step rail (audit-explainer layout) ---- */
  .ns-gx-steps{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1.4vw,16px);position:relative}
  .ns-gx-steps::before{content:"";position:absolute;left:6%;right:6%;top:72px;height:1px;background-image:linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.14) 50%,transparent 50%);background-size:10px 1px;pointer-events:none}
  .ns-gx-steps li{list-style:none;margin:0;padding:0}
  .ns-gx-step{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.54);width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;padding:0 2px 16px;font-family:var(--ns-body);transition:color 1.2s var(--ease),opacity 1.2s var(--ease)}
  .ns-gx-step:hover,.ns-gx-step:focus-visible{outline:none;color:#fff}
  .ns-gx-step.ns-on{color:#f5f5f5}
  .ns-gx-step-num{font-family:var(--ns-tw);font-size:14px;line-height:1.1;letter-spacing:.08em;color:rgba(255,255,255,.3);margin-bottom:7px;transition:color 1s var(--ease),text-shadow 1s var(--ease)}
  .ns-gx-step.ns-on .ns-gx-step-num{color:var(--ns-gx-accent);text-shadow:0 0 12px color-mix(in srgb,var(--ns-gx-accent) 45%,transparent)}
  .ns-gx-step-label{font-family:var(--ns-tw);font-size:clamp(11px,.92vw,13px);line-height:1.16;letter-spacing:.03em;min-height:3em;display:grid;place-items:center;color:inherit;opacity:.82;transition:opacity 1s var(--ease),letter-spacing 1s var(--ease)}
  .ns-gx-step.ns-on .ns-gx-step-label{opacity:1;letter-spacing:.05em}
  .ns-gx-step-icon{position:relative;z-index:1;width:44px;height:44px;margin-top:9px;border:1px solid rgba(255,255,255,.18);border-radius:9px;display:grid;place-items:center;font-size:21px;color:rgba(255,255,255,.55);background:rgba(5,10,24,.18);transition:color 1.1s var(--ease),border-color 1.1s var(--ease),box-shadow 1.1s var(--ease)}
  .ns-gx-step.ns-on .ns-gx-step-icon{color:#fff;border-color:color-mix(in srgb,var(--ns-gx-accent) 65%,rgba(255,255,255,.3));box-shadow:0 0 20px color-mix(in srgb,var(--ns-gx-accent) 22%,transparent)}
  .ns-gx-step-icon::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);width:0;height:0;border-radius:50%;opacity:0;background:var(--ns-gx-accent);box-shadow:0 0 14px color-mix(in srgb,var(--ns-gx-accent) 55%,transparent);transition:all 1s var(--ease)}
  .ns-gx-step.ns-on .ns-gx-step-icon::after{width:10px;height:10px;opacity:1}

  /* "goes live" marker on the rail — splits Build (steps 1-4) from Operate (5-7) */
  .ns-gx-golive{position:absolute;left:57.1%;top:2px;bottom:14px;transform:translateX(-50%);pointer-events:none;z-index:3}
  .ns-gx-golive::before{content:"";position:absolute;top:22px;bottom:2px;left:50%;transform:translateX(-50%);width:1px;background:linear-gradient(180deg,color-mix(in srgb,var(--ns-gx-accent) 55%,transparent),transparent)}
  .ns-gx-golive .lbl{position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-family:var(--ns-tw);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--ns-gx-accent) 85%,#fff);background:rgba(7,11,20,.92);border:1px solid color-mix(in srgb,var(--ns-gx-accent) 40%,transparent);border-radius:99px;padding:3px 8px 2px;white-space:nowrap}

  .ns-gx-progress{height:2px;background:rgba(255,255,255,.11);overflow:hidden;margin:0 0 clamp(14px,1.8vw,20px)}
  .ns-gx-progress span{display:block;height:100%;width:14.28%;background:linear-gradient(90deg,var(--ns-gx-accent),var(--ns-gx-secondary));transition:width 1.25s var(--ease)}

  /* ---- Body: animation + explanation, split evenly, both top-aligned ---- */
  .ns-gx-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,48px);align-items:start}

  /* ---- Stage ---- */
  .ns-gx-stage{position:relative;height:clamp(430px,42vw,500px);min-height:430px;overflow:visible;background:transparent}
  .ns-gx-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
  .ns-gx-scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
  .ns-gx-scene.ns-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .7s var(--ease),transform .7s var(--ease),visibility 0s}
  .ns-gx-pad{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:clamp(11px,1.7vw,18px);padding:clamp(2px,.8vw,8px) 6px 8px}

  /* shared glass modules */
  .ns-gx-card,.ns-gx-chip,.ns-gx-pnode,.ns-gx-store,.ns-gx-gate,.ns-gx-msg,.ns-gx-metric,.ns-gx-conn{
    border:1px solid rgba(255,255,255,.14);background:rgba(5,10,24,.06);box-shadow:0 0 18px rgba(0,0,0,.10);
  }
  @keyframes nsGxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .ns-gx-float{animation:nsGxFloat 6.5s ease-in-out infinite;animation-delay:var(--d,0s);will-change:transform}

  /* ---- Scene 1 — Business & Use Cases ---- */
  .ns-gx-s1{display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,1.4vw,14px);width:min(100%,340px)}
  .ns-gx-arrowcol{display:grid;place-items:center;color:var(--ns-gx-accent);font-size:24px;opacity:.7}
  .ns-gx-s1 .ns-gx-arrowcol svg{transform:rotate(90deg)}
  .ns-gx-goals{display:grid;gap:8px}
  .ns-gx-card{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center;padding:9px 11px;color:#fff;min-height:46px;border-radius:9px}
  .ns-gx-card .ns-gx-cic{width:28px;height:28px;display:grid;place-items:center;font-size:18px;color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.12);border-radius:6px}
  .ns-gx-card strong{font-size:12.8px;font-weight:540;line-height:1.18;letter-spacing:.01em}
  .ns-gx-usestack{display:grid;gap:8px}
  .ns-gx-use{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 11px;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(5,10,24,.06)}
  .ns-gx-use b{font-size:12.8px;font-weight:540;letter-spacing:.01em}
  .ns-gx-use .vc{display:flex;gap:5px}
  .ns-gx-use .vc i{width:13px;height:5px;border-radius:99px;background:rgba(255,255,255,.18)}
  .ns-gx-use .vc i.on{background:var(--ns-gx-accent);box-shadow:0 0 8px color-mix(in srgb,var(--ns-gx-accent) 60%,transparent)}
  .ns-gx-use.top{border-color:color-mix(in srgb,var(--ns-gx-accent) 50%,rgba(255,255,255,.14));box-shadow:0 0 22px color-mix(in srgb,var(--ns-gx-accent) 14%,transparent)}

  /* ---- Scene 2 — Scope & Prototype ---- */
  .ns-gx-s2{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.2vw,22px);width:min(100%,360px)}
  .ns-gx-candgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;width:100%}
  .ns-gx-chip{border-radius:8px;padding:11px 8px;text-align:center;font-family:var(--ns-tw);font-size:12.5px;letter-spacing:.02em;color:rgba(255,255,255,.62);transition:all 1.1s var(--ease)}
  .ns-gx-chip.sel{color:#fff;border-color:color-mix(in srgb,var(--ns-gx-accent) 60%,rgba(255,255,255,.3));box-shadow:0 0 18px color-mix(in srgb,var(--ns-gx-accent) 20%,transparent);background:rgba(255,255,255,.04)}
  .ns-gx-chip.dim{opacity:.4}
  .ns-gx-stackpick{display:flex;flex-direction:column;gap:8px;align-items:stretch;width:100%}
  .ns-gx-stackpick span{justify-content:flex-start}
  .ns-gx-stackpick span{display:inline-flex;align-items:center;gap:7px;font-family:var(--ns-tw);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:7px 13px;background:rgba(4,8,18,.18)}
  .ns-gx-stackpick span svg{color:var(--ns-gx-accent)}

  /* ---- Scene 3 — RAG Pipeline (HERO) ---- */
  .ns-gx-rag{position:relative;width:min(100%,340px);display:grid;place-items:center;padding-bottom:24px}
  .ns-gx-ragsvg{width:100%;height:auto;max-height:420px;overflow:visible}
  .ns-gx-ragsvg .pwire{stroke:rgba(255,255,255,.16);stroke-width:1.4;fill:none}
  .ns-gx-ragsvg .pwire-hot{stroke:var(--ns-gx-accent);stroke-width:1.6;fill:none;stroke-dasharray:4 9;opacity:.85}
  .ns-gx-ragsvg .pbox{fill:rgba(5,10,24,.5);stroke:rgba(255,255,255,.2);stroke-width:1.2}
  .ns-gx-ragsvg .pbox-core{fill:rgba(5,10,24,.55);stroke:color-mix(in srgb,var(--ns-gx-accent) 60%,rgba(255,255,255,.25));stroke-width:1.4}
  .ns-gx-ragsvg .plabel{font-family:var(--ns-tw);font-size:12.5px;letter-spacing:.03em;text-transform:lowercase}
  .ns-gx-ragsvg .psub{font-family:var(--ns-body);font-size:9px;letter-spacing:.02em}
  .ns-gx-ragsvg .pdoc{fill:rgba(5,10,24,.45);stroke:rgba(255,255,255,.22);stroke-width:1}
  .ns-gx-ragsvg .pcite{fill:color-mix(in srgb,var(--ns-gx-accent) 18%,rgba(5,10,24,.5));stroke:var(--ns-gx-accent);stroke-width:1}
  .ns-gx-ragsvg .flowdot{fill:#fff}
  .ns-gx-ragcap{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--ns-tw);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.6)}

  /* ---- Scene 4 — Implementation & Integration ---- */
  .ns-gx-s4{display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,1.7vw,16px);width:min(100%,340px)}
  .ns-gx-s4 .ns-gx-coreblk{justify-items:stretch}
  .ns-gx-s4 .ns-gx-coreblk .blk{position:relative}
  .ns-gx-s4 .ns-gx-coreblk::after{content:"";display:block;width:1px;height:14px;margin:2px auto -2px;background:linear-gradient(180deg,color-mix(in srgb,var(--ns-gx-accent) 60%,transparent),transparent)}
  .ns-gx-coreblk{display:grid;gap:8px;justify-items:center}
  .ns-gx-coreblk .blk{border:1px solid color-mix(in srgb,var(--ns-gx-accent) 45%,rgba(255,255,255,.18));border-radius:10px;padding:13px 18px;text-align:center;background:rgba(5,10,24,.18);box-shadow:0 0 22px color-mix(in srgb,var(--ns-gx-accent) 14%,transparent)}
  .ns-gx-coreblk .blk b{font-family:var(--ns-tw);font-size:14px;letter-spacing:.03em;color:#fff;display:block}
  .ns-gx-coreblk .blk small{font-size:10.5px;color:rgba(255,255,255,.6);letter-spacing:.02em}
  .ns-gx-conns{display:grid;gap:9px}
  .ns-gx-conn{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:center;padding:9px 12px;border-radius:8px;color:#fff}
  .ns-gx-conn svg{color:var(--ns-gx-accent);font-size:17px}
  .ns-gx-conn b{font-size:12.6px;font-weight:540;letter-spacing:.01em}
  .ns-gx-hybrid{grid-column:1/-1;text-align:center;font-family:var(--ns-tw);font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.6);margin-top:4px}

  /* ---- Scene 5 — Validation & Hallucination control ---- */
  .ns-gx-s5{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,340px)}
  .ns-gx-gates{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
  .ns-gx-gate{border-radius:9px;padding:11px 12px;text-align:center;min-width:96px;position:relative}
  .ns-gx-gate b{display:block;font-family:var(--ns-tw);font-size:12px;letter-spacing:.02em;color:#fff}
  .ns-gx-gate small{display:block;font-size:9.5px;color:rgba(255,255,255,.55);margin-top:3px;line-height:1.3}
  .ns-gx-gate .tick{position:absolute;top:-9px;right:-9px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--ns-gx-accent);color:#04210f;font-size:12px;box-shadow:0 0 12px color-mix(in srgb,var(--ns-gx-accent) 50%,transparent)}
  .ns-gx-gatesep{color:rgba(255,255,255,.3);font-size:16px;transform:rotate(90deg);text-align:center}
  .ns-gx-held{display:flex;align-items:center;gap:9px;font-family:var(--ns-tw);font-size:12px;letter-spacing:.03em;color:rgba(255,206,112,.92);border:1px dashed rgba(255,206,112,.45);border-radius:99px;padding:8px 14px;background:rgba(255,206,112,.05)}
  .ns-gx-held svg{color:rgba(255,206,112,.92)}

  /* ---- Scene 6 — User testing & refinement ---- */
  .ns-gx-s6{display:flex;flex-direction:column;align-items:stretch;gap:clamp(12px,2vw,18px);width:min(100%,360px)}
  .ns-gx-s6 .ns-gx-scorecol{justify-items:center}
  .ns-gx-s6 .sc{width:100%;max-width:300px}
  .ns-gx-msgs{display:grid;gap:8px}
  .ns-gx-msg{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;color:#fff}
  .ns-gx-msg svg{color:var(--ns-gx-accent);font-size:16px;flex:0 0 auto}
  .ns-gx-msg b{font-size:12.4px;font-weight:500;letter-spacing:.01em}
  .ns-gx-msg em{margin-left:auto;font-style:normal;font-family:var(--ns-tw);font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:2px 6px}
  .ns-gx-scorecol{display:grid;gap:9px;justify-items:center}
  .ns-gx-scorecol .sc{display:grid;gap:7px;width:160px}
  .ns-gx-bar{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center;font-family:var(--ns-tw);font-size:10.5px;letter-spacing:.03em;color:rgba(255,255,255,.66)}
  .ns-gx-bar .tr{height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
  .ns-gx-bar .tr i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ns-gx-accent),var(--ns-gx-secondary))}
  .ns-gx-loopnote{display:flex;align-items:center;gap:7px;font-family:var(--ns-tw);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.6)}
  .ns-gx-loopnote svg{color:var(--ns-gx-accent)}

  /* ---- Scene 7 — Monitoring & Governance ---- */
  .ns-gx-s7{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,360px)}
  .ns-gx-dash{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;width:100%}
  .ns-gx-metric{border-radius:9px;padding:11px 9px;text-align:center}
  .ns-gx-metric b{display:block;font-family:var(--ns-tw);font-size:19px;color:#fff;line-height:1}
  .ns-gx-metric small{display:block;font-size:9.5px;color:rgba(255,255,255,.55);margin-top:5px;letter-spacing:.02em}
  .ns-gx-metric .spark{height:18px;margin-top:7px;display:flex;align-items:flex-end;gap:2px;justify-content:center}
  .ns-gx-metric .spark i{width:3px;background:color-mix(in srgb,var(--ns-gx-accent) 70%,transparent);border-radius:2px}
  .ns-gx-govrow{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
  .ns-gx-govrow span{display:inline-flex;align-items:center;gap:6px;font-family:var(--ns-tw);font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:6px 12px}
  .ns-gx-govrow span svg{color:var(--ns-gx-accent)}
  .ns-gx-retrain{display:flex;align-items:center;gap:8px;font-family:var(--ns-tw);font-size:11.5px;letter-spacing:.05em;color:color-mix(in srgb,var(--ns-gx-accent) 85%,#fff)}
  .ns-gx-retrain svg{color:var(--ns-gx-accent)}

  /* ---- Detail panel (right column, beside the stage) ---- */
  .ns-gx-detail{position:relative;padding:4px 0 6px 22px}
  .ns-gx-detail-rail{position:absolute;left:0;top:6px;bottom:8px;width:3px;border-radius:99px;background:linear-gradient(180deg,var(--ns-gx-accent),color-mix(in srgb,var(--ns-gx-secondary) 70%,white 8%));box-shadow:0 0 16px color-mix(in srgb,var(--ns-gx-accent) 55%,transparent),0 0 30px color-mix(in srgb,var(--ns-gx-secondary) 26%,transparent)}
  .ns-gx-detail-vp{display:grid;position:relative}
  .ns-gx-panel{grid-area:1/1;opacity:0;transform:translateY(-22px);transition:opacity 1s var(--ease),transform 1s var(--ease);pointer-events:none}
  .ns-gx-panel.ns-on{opacity:1;transform:translateY(0);pointer-events:auto}
  .ns-gx-panel h4{font-family:var(--ns-tw);font-weight:400;font-size:clamp(18px,1.6vw,23px);line-height:1.16;color:#fff;margin:0 0 9px}
  .ns-gx-panel p{margin:0 0 11px;font-size:14.5px;line-height:1.58;color:rgba(255,255,255,.78);max-width:62ch}
  .ns-gx-panel ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px}
  .ns-gx-panel li{position:relative;padding-left:17px;font-size:12.4px;letter-spacing:.01em;color:rgba(255,255,255,.6)}
  .ns-gx-panel li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--ns-gx-accent);box-shadow:0 0 8px color-mix(in srgb,var(--ns-gx-accent) 55%,transparent)}

  /* ---- Responsive ---- */
  @media (max-width:960px){
    .ns-gx-body{grid-template-columns:1fr;gap:22px}
    .ns-gx-stage{height:auto;min-height:460px}
    .ns-gx-candgrid{grid-template-columns:repeat(2,1fr)}
    .ns-gx-dash{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:760px){
    .ns-gx-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(94px,1fr);overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
    .ns-gx-steps::before{display:none}
    .ns-gx-golive{display:none}
    .ns-gx-step-label{min-height:2.6em}
  }
  @media (prefers-reduced-motion:reduce){.ns-gx *{animation:none!important;transition:none!important}}