/* AI Transformation horizontal explainer.
 * The transformation loop remains the frame; semantic token clusters carry
 * the story inside it. Typography and spacing follow the Audit and Generative
 * AI explainers: readable labels stay in ink, inactive navigation uses muted
 * ink, blue carries active information, green success and amber caution. */
.ns-aix-trans{
  --ns-aix-trans-success:#30ce7c;
  --ns-aix-trans-warning:#f2b263;
  --ns-aix-trans-line:color-mix(in srgb,var(--ns-aix-ink) 16%,transparent);
  --ns-aix-trans-copy:var(--ns-aix-ink);
  container-type:inline-size;
  overflow:visible;
}
.ns-aix-trans .ns-aix-title,.ns-aix-trans .ns-aix-intro{color:var(--ns-aix-ink)!important}
.ns-aix-trans-head{margin-bottom:clamp(10px,1.5vw,18px)}
.ns-aix-trans-step-icon svg{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}

/* ---- six-stage rail ---- */
.ns-aix-trans-navwrap{
  width:100%;max-width:1180px;min-width:0;margin:0 auto;overflow:hidden;
  scroll-snap-type:x proximity;overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;padding:22px 1px 6px;scrollbar-width:none;
}
.ns-aix-trans-navwrap::-webkit-scrollbar{display:none;width:0;height:0}
.ns-aix-trans-steps{
  list-style:none!important;margin:0!important;padding:0 0 12px!important;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(4px,.72vw,10px);
  width:100%!important;max-width:100%!important;min-width:0!important;position:relative;
}
.ns-aix-trans-steps::before{
  content:"";position:absolute;left:5%;right:5%;bottom:35px;height:1px;
  background-image:linear-gradient(90deg,var(--ns-aix-trans-line) 0,var(--ns-aix-trans-line) 48%,transparent 48%);
  background-size:10px 1px;pointer-events:none;
}
.ns-aix-trans-steps li{list-style:none!important;margin:0!important;padding:0!important;min-width:0!important;max-width:100%;scroll-snap-align:center}
.ns-aix-trans-step{
  appearance:none;border:0;background:transparent;color:var(--ns-aix-muted);width:100%;min-width:0;max-width:100%;min-height:106px;
  display:grid;grid-template-rows:auto minmax(2.3em,auto) 38px;justify-items:center;align-items:center;text-align:center;
  gap:5px;padding:2px 6px 8px;cursor:pointer;font-family:var(--ns-body);position:relative;
  transition:color .75s ease,background .75s ease,transform .75s ease;
}
.ns-aix-trans-step:hover{color:var(--ns-aix-ink)}
.ns-aix-trans-step:focus-visible{outline:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ns-aix-accent) 62%,transparent),0 0 16px color-mix(in srgb,var(--ns-aix-accent) 20%,transparent)}
.ns-aix-trans-step.ns-on{color:var(--ns-aix-ink);background:linear-gradient(180deg,color-mix(in srgb,var(--ns-aix-accent) 6%,transparent),transparent 78%);transform:translateY(-1px)}
.ns-aix-trans-step-num{font-family:var(--ns-tw);font-size:14px;letter-spacing:.08em;color:var(--ns-aix-muted);transition:color .7s ease,text-shadow .7s ease}
.ns-aix-trans-step.ns-on .ns-aix-trans-step-num{color:var(--ns-aix-accent);text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 38%,transparent)}
.ns-aix-trans-step-label{font-family:var(--ns-tw);font-size:clamp(11.5px,.9vw,13.5px);line-height:1.18;letter-spacing:.02em;display:grid;place-items:center;min-width:0;max-width:100%;color:inherit}
.ns-aix-trans-step-icon{position:relative;z-index:1;width:38px;height:38px;display:grid;place-items:center;font-size:19px;border:1px solid var(--ns-aix-trans-line);color:var(--ns-aix-muted);background:color-mix(in srgb,var(--ns-aix-secondary) 5%,transparent);transition:color .75s ease,border-color .75s ease,box-shadow .75s ease,background .75s ease}
.ns-aix-trans-step.ns-on .ns-aix-trans-step-icon{color:var(--ns-aix-ink);border-color:color-mix(in srgb,var(--ns-aix-accent) 66%,transparent);background:color-mix(in srgb,var(--ns-aix-accent) 8%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--ns-aix-accent) 22%,transparent)}
.ns-aix-trans-step-icon::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);width:7px;height:7px;opacity:0;background:var(--ns-aix-accent);box-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 55%,transparent);transition:opacity .7s ease}
.ns-aix-trans-step.ns-on .ns-aix-trans-step-icon::after{opacity:1}
.ns-aix-trans-loopnote{position:absolute;right:0;top:-18px;pointer-events:none}
.ns-aix-trans-loopnote .lbl{font-family:var(--ns-tw);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ns-aix-accent);opacity:.78}
.ns-aix-trans-loopnote::after{content:"↺";margin-left:6px;color:var(--ns-aix-accent);opacity:.75}
.ns-aix-trans-progress{width:100%;max-width:1180px;height:2px;margin:0 auto clamp(14px,1.7vw,21px);background:var(--ns-aix-trans-line);overflow:hidden}
.ns-aix-trans-progress span{display:block;width:16.6667%;height:100%;background:linear-gradient(90deg,var(--ns-aix-accent),var(--ns-aix-secondary));transition:width 1.1s cubic-bezier(.16,.72,.18,1)}

/* ---- body and persistent loop ---- */
.ns-aix-trans-body{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr);gap:clamp(18px,2.7vw,36px);align-items:start}
.ns-aix-trans-stage{position:relative;height:clamp(420px,36vw,465px);min-width:0;overflow:hidden}
.ns-aix-trans-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;pointer-events:none;z-index:1;opacity:1}
.ns-aix-trans-loop{position:absolute;inset:-12px 0 10px;display:grid;place-items:center;pointer-events:none;z-index:0}
.ns-aix-trans-loop>svg{display:block;width:min(96%,575px);height:auto;max-height:100%;overflow:visible}
.ns-aix-trans-seg{fill:none;stroke:var(--ns-aix-secondary);stroke-width:6;stroke-linecap:round;opacity:.12;transition:opacity .6s ease,stroke .6s ease,filter .6s ease}
.ns-aix-trans-tip{fill:var(--ns-aix-secondary);opacity:.12;transition:opacity .6s ease,fill .6s ease,filter .6s ease}
.ns-aix-trans[data-step="0"] [data-seg="0"],.ns-aix-trans[data-step="1"] [data-seg="1"],.ns-aix-trans[data-step="2"] [data-seg="2"],.ns-aix-trans[data-step="3"] [data-seg="3"],.ns-aix-trans[data-step="4"] [data-seg="4"],.ns-aix-trans[data-step="5"] [data-seg="5"]{opacity:.72}
.ns-aix-trans[data-step="0"] path[data-seg="0"],.ns-aix-trans[data-step="1"] path[data-seg="1"],.ns-aix-trans[data-step="2"] path[data-seg="2"],.ns-aix-trans[data-step="3"] path[data-seg="3"],.ns-aix-trans[data-step="4"] path[data-seg="4"],.ns-aix-trans[data-step="5"] path[data-seg="5"]{stroke:var(--ns-aix-accent);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ns-aix-accent) 48%,transparent))}
.ns-aix-trans[data-step="0"] polygon[data-seg="0"],.ns-aix-trans[data-step="1"] polygon[data-seg="1"],.ns-aix-trans[data-step="2"] polygon[data-seg="2"],.ns-aix-trans[data-step="3"] polygon[data-seg="3"],.ns-aix-trans[data-step="4"] polygon[data-seg="4"],.ns-aix-trans[data-step="5"] polygon[data-seg="5"]{fill:var(--ns-aix-accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--ns-aix-accent) 48%,transparent))}

/* ---- token-cluster story plane ---- */
.ns-aix-trans-scene{position:absolute;inset:0;z-index:2;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .52s ease,transform .52s ease,visibility 0s linear .52s}
.ns-aix-trans-scene.ns-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .62s ease,transform .62s ease,visibility 0s}
.ns-aix-trans-story{position:absolute;inset:0 4px 0;min-width:0;color:var(--ns-aix-ink)}
.ns-aix-trans-facet{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:112px;display:grid;grid-template-rows:38px auto auto;justify-items:center;align-items:start;gap:4px;text-align:center;z-index:3;pointer-events:none}
.ns-aix-trans-facet-marker{display:block;width:38px;height:38px;opacity:0}
.ns-aix-trans-facet b{display:block;max-width:100%;font-family:var(--ns-tw);font-size:13.5px;font-weight:400;line-height:1.18;letter-spacing:.025em;color:var(--ns-aix-ink);text-shadow:0 2px 8px rgba(0,7,23,.95);transition:text-shadow .55s ease,color .55s ease,filter .55s ease}
.ns-aix-trans-facet small{display:grid;gap:2px;max-width:150px;font-family:var(--ns-body);font-size:11.5px;line-height:1.28;color:var(--ns-aix-ink);text-shadow:0 2px 7px rgba(0,7,23,.95)}
.ns-aix-trans-facet-wide{width:164px}
.ns-aix-trans-facet.is-vector-active b{color:#fff;text-shadow:0 2px 8px #000717,0 0 24px color-mix(in srgb,var(--ns-aix-accent) 75%,transparent)}
.ns-aix-trans-facet[data-tone="success"].is-vector-active b,.ns-aix-trans-facet[data-tone="success"] b{color:color-mix(in srgb,var(--ns-aix-trans-success) 82%,white 18%)}
.ns-aix-trans-facet[data-tone="warning"] b{color:color-mix(in srgb,var(--ns-aix-trans-warning) 82%,white 18%)}
.ns-aix-trans-facet-static b{opacity:.92}
.ns-aix-trans-scene-chip{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:4;max-width:78%;font-family:var(--ns-tw);font-size:12.5px;line-height:1.22;letter-spacing:.035em;color:var(--ns-aix-ink);border:1px solid color-mix(in srgb,var(--ns-aix-accent) 28%,transparent);background:rgba(14,24,52,.80);padding:7px 13px;box-shadow:0 0 14px rgba(0,0,0,.14);white-space:nowrap;text-align:center}

/* Quiet structural geometry supports the token motion without becoming a
 * second diagram. The moving clusters remain the primary message carrier. */
.ns-aix-trans-structure{position:absolute;inset:8% 8% 12%;z-index:0;pointer-events:none;opacity:.42}
.ns-aix-trans-entry-field i{position:absolute;top:16%;width:1px;height:37%;background:linear-gradient(180deg,color-mix(in srgb,var(--ns-aix-accent) 48%,transparent),transparent);transform-origin:bottom}
.ns-aix-trans-entry-field i:nth-child(1){left:20%;transform:rotate(-30deg)}
.ns-aix-trans-entry-field i:nth-child(2){left:50%}
.ns-aix-trans-entry-field i:nth-child(3){right:20%;transform:rotate(30deg)}
.ns-aix-trans-entry-field span{position:absolute;left:31%;right:31%;top:61%;height:1px;background:linear-gradient(90deg,transparent,var(--ns-aix-trans-warning),transparent);box-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-trans-warning) 30%,transparent)}
.ns-aix-trans-environment{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:3;display:flex;gap:7px;flex-wrap:wrap;justify-content:center;width:76%}
.ns-aix-trans-environment span{font-family:var(--ns-tw);font-size:11.8px;line-height:1.2;letter-spacing:.025em;color:var(--ns-aix-ink);border:1px solid color-mix(in srgb,var(--ns-aix-ink) 15%,transparent);background:rgba(7,15,33,.44);padding:5px 8px}

.ns-aix-trans-scan-field{inset:12% 12% 18%;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 16%,transparent)}
.ns-aix-trans-scan-field::before,.ns-aix-trans-scan-field::after{content:"";position:absolute;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ns-aix-accent) 34%,transparent),transparent)}
.ns-aix-trans-scan-field::before{top:28%}.ns-aix-trans-scan-field::after{bottom:28%}
.ns-aix-trans-scan-field span{position:absolute;top:0;bottom:0;width:2px;left:12%;background:linear-gradient(180deg,transparent,var(--ns-aix-accent),transparent);box-shadow:0 0 15px color-mix(in srgb,var(--ns-aix-accent) 48%,transparent);animation:nsAixTransScan 6.4s ease-in-out infinite}
@keyframes nsAixTransScan{0%,100%{left:12%;opacity:.15}45%,55%{opacity:.72}50%{left:88%}}

.ns-aix-trans-compass{inset:18% 21% 19%;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 20%,transparent);border-radius:50%}
.ns-aix-trans-compass::before,.ns-aix-trans-compass::after{content:"";position:absolute;background:color-mix(in srgb,var(--ns-aix-accent) 18%,transparent)}
.ns-aix-trans-compass::before{left:50%;top:-8%;bottom:-8%;width:1px}.ns-aix-trans-compass::after{top:50%;left:-8%;right:-8%;height:1px}
.ns-aix-trans-compass span{position:absolute;inset:36%;border:1px solid color-mix(in srgb,var(--ns-aix-secondary) 26%,transparent);border-radius:50%}
.ns-aix-trans-range{position:absolute;left:50%;top:58%;transform:translateX(-50%);z-index:2;display:grid;grid-template-columns:auto 86px auto;align-items:center;gap:8px;font-family:var(--ns-tw);font-size:11.8px;color:var(--ns-aix-ink);text-shadow:0 2px 7px #000717}
.ns-aix-trans-range i{height:5px;background:linear-gradient(90deg,color-mix(in srgb,var(--ns-aix-accent) 18%,transparent),var(--ns-aix-accent));box-shadow:0 0 9px color-mix(in srgb,var(--ns-aix-accent) 26%,transparent)}

.ns-aix-trans-cover-field{inset:13% 15% 17%;border-radius:50%;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 14%,transparent)}
.ns-aix-trans-cover-field .exposure{position:absolute;left:29%;right:29%;top:38%;height:1px;background:linear-gradient(90deg,transparent,var(--ns-aix-trans-warning),transparent);box-shadow:0 0 10px color-mix(in srgb,var(--ns-aix-trans-warning) 25%,transparent)}
.ns-aix-trans-cover-field .coverage{position:absolute;left:20%;right:20%;top:20%;bottom:16%;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 24%,transparent);border-bottom-color:transparent;border-radius:50% 50% 44% 44%}

.ns-aix-trans-gate-field{inset:13% 10% 17%}
.ns-aix-trans-gate-field::before{content:"";position:absolute;left:10%;right:10%;top:49%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ns-aix-accent) 24%,transparent),transparent)}
.ns-aix-trans-gate-field span{position:absolute;left:43%;right:43%;top:22%;bottom:21%;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 24%,transparent);border-radius:48% 48% 8px 8px;box-shadow:0 0 18px color-mix(in srgb,var(--ns-aix-accent) 8%,transparent)}

.ns-aix-trans-operating-field{inset:11% 15% 14%;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 22%,transparent);border-radius:50%}
.ns-aix-trans-operating-field span{position:absolute;inset:18%;border:1px dashed color-mix(in srgb,var(--ns-aix-secondary) 22%,transparent);border-radius:50%}
.ns-aix-trans-application{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:156px;display:grid;gap:9px;text-align:center;padding:13px 12px;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 34%,transparent);background:rgba(7,15,33,.68);box-shadow:0 0 24px rgba(0,0,0,.18)}
.ns-aix-trans-application>b{font-family:var(--ns-tw);font-size:14px;font-weight:400;letter-spacing:.03em;color:var(--ns-aix-ink)}
.ns-aix-trans-application>div{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.ns-aix-trans-application>div span{font-family:var(--ns-tw);font-size:11.5px;color:var(--ns-aix-ink);border-top:2px solid var(--ns-aix-accent);padding-top:5px}
.ns-aix-trans-application>div span:last-child{border-color:var(--ns-aix-trans-warning)}
.ns-aix-trans-application small{font-family:var(--ns-body);font-size:11.8px;line-height:1.2;color:var(--ns-aix-ink)}

/* ---- explanation column ---- */
.ns-aix-trans-detail{position:relative;min-width:0;padding-left:24px}
.ns-aix-trans-detail-rail{position:absolute;left:0;top:2px;bottom:4px;width:2px;background:linear-gradient(180deg,var(--ns-aix-accent),var(--ns-aix-secondary));box-shadow:0 0 14px color-mix(in srgb,var(--ns-aix-accent) 35%,transparent)}
.ns-aix-trans-detail-rail::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:8px;height:8px;background:var(--ns-aix-accent);box-shadow:0 0 10px color-mix(in srgb,var(--ns-aix-accent) 45%,transparent)}
.ns-aix-trans-detail-viewport{position:relative;display:grid;overflow:hidden}
.ns-aix-trans-panel{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease,visibility 0s linear .55s;padding:4px 0 12px}
.ns-aix-trans-panel.ns-on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .65s ease,transform .65s ease,visibility 0s}
.ns-aix-trans-panel h4{font-size:clamp(20px,1.7vw,27px);line-height:1.16!important;color:var(--ns-aix-ink)!important;margin:0 0 11px!important}
.ns-aix-trans-panel h4 span{color:var(--ns-aix-accent);margin-right:9px;text-shadow:0 0 12px color-mix(in srgb,var(--ns-aix-accent) 35%,transparent)}
.ns-aix-trans-panel p{margin:0 0 14px!important;font-family:var(--ns-body);font-size:14.5px;line-height:1.62;color:var(--ns-aix-trans-copy)}
.ns-aix-trans-panel ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:8px}
.ns-aix-trans-panel li{position:relative;padding-left:18px;margin:0!important;font-size:12.8px;line-height:1.43;color:var(--ns-aix-trans-copy)}
.ns-aix-trans-panel li::before{content:"";position:absolute;left:0;top:.48em;width:7px;height:7px;border:1px solid color-mix(in srgb,var(--ns-aix-accent) 64%,transparent)}

/* ---- responsive ---- */
@container (max-width:900px){
  .ns-aix-trans-body{grid-template-columns:1fr;gap:18px}
  .ns-aix-trans-stage{height:465px}
  .ns-aix-trans-detail{padding-left:20px}
}
@container (max-width:620px){
  .ns-aix-trans-navwrap{overflow-x:auto;overflow-y:hidden}
  .ns-aix-trans-steps{grid-template-columns:repeat(6,112px);width:672px!important;min-width:672px!important;max-width:none!important;gap:0}
  .ns-aix-trans-step-label{font-size:12px}
  .ns-aix-trans-loop>svg{width:104%}
  .ns-aix-trans-facet{width:98px}
  .ns-aix-trans-facet-wide{width:144px}
  .ns-aix-trans-facet b{font-size:12.5px}
  .ns-aix-trans-facet small{font-size:11.5px}
  .ns-aix-trans-scene-chip{font-size:12px;max-width:88%;white-space:normal}
}
@container (max-width:430px){
  .ns-aix-trans-stage{height:475px}
  .ns-aix-trans-story{inset-inline:0}
  .ns-aix-trans-facet{width:88px}
  .ns-aix-trans-facet-wide{width:132px}
  .ns-aix-trans-facet b{font-size:12px}
  .ns-aix-trans-environment{width:88%;gap:5px}.ns-aix-trans-environment span{font-size:11.5px;padding:4px 6px}
  .ns-aix-trans-application{width:142px;padding:11px 9px}
  .ns-aix-trans-range{grid-template-columns:auto 62px auto;gap:6px;font-size:11.5px}
}
@supports not (container-type:inline-size){
  @media (max-width:960px){.ns-aix-trans-body{grid-template-columns:1fr;gap:18px}.ns-aix-trans-stage{height:465px}.ns-aix-trans-detail{padding-left:20px}}
  @media (max-width:640px){.ns-aix-trans-navwrap{overflow-x:auto}.ns-aix-trans-steps{grid-template-columns:repeat(6,112px);width:672px!important;min-width:672px!important;max-width:none!important;gap:0}}
}
@media (prefers-reduced-motion:reduce){
  .ns-aix-trans *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}