/* 9senses Computer Vision Explainer — standalone plugin */
.ns-cv{
  --ns-cv-ink:#f1f1f1;
  --ns-cv-muted:rgba(255,255,255,.65);
  --ns-cv-faint:rgba(255,255,255,.12);
  --ns-cv-panel:rgba(4,10,22,.18);
  --ns-cv-body:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ns-cv-tw:"Special Elite","Courier Prime",Georgia,serif;
  position:relative;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  color:var(--ns-cv-ink);
  font-family:var(--ns-cv-body);
  padding:clamp(8px,1.7vw,18px) 0 clamp(16px,2.4vw,28px);
}
.ns-cv *{box-sizing:border-box}
.ns-cv::before,.ns-cv::after{display:none}

.ns-cv-head{
  width:100%;
  max-width:1180px;
  margin:0 auto clamp(10px,1.45vw,18px);
  padding-right:clamp(0px,4vw,70px);
}
.ns-cv-kicker{
  margin:0 0 10px;
  color:var(--ns-cv-accent,#30ce7c);
  font-family:var(--ns-cv-tw) !important;
  font-size:clamp(14px,1.3vw,17px);
  letter-spacing:.08em;
  text-shadow:0 0 12px color-mix(in srgb,var(--ns-cv-accent,#30ce7c) 30%,transparent);
}
.ns-cv-title{
  max-width:930px;
  margin:0 0 10px !important;
  color:#f1f1f1 !important;
  font-family:var(--ns-cv-tw) !important;
  font-size:clamp(31px,3vw,41px);
  font-weight:400 !important;
  line-height:1.1 !important;
  letter-spacing:.02em;
}
.ns-cv-intro{
  max-width:1100px;
  margin:0;
  color:var(--ns-cv-muted);
  font-size:clamp(15px,1.16vw,17px);
  line-height:1.62;
}

.ns-cv-body{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(430px,1.18fr);
  gap:clamp(20px,3.6vw,54px);
  align-items:start;
  width:100%;
  max-width:1180px;
  margin:10px auto 0;
}
.ns-cv-copy{min-width:0}
.ns-cv-progress{
  height:2px;
  max-width:590px;
  margin:10px 0 13px;
  overflow:hidden;
  background:var(--ns-cv-faint);
}
.ns-cv-progress span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,var(--ns-cv-accent,#30ce7c),var(--ns-cv-secondary,#0c71c3));
  transition:width 1.25s cubic-bezier(.16,.72,.18,1);
}
.ns-cv-steps{
  display:grid;
  gap:3px;
  max-width:620px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.ns-cv-steps li{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.ns-cv-step{
  appearance:none;
  display:grid;
  grid-template-columns:43px 1fr;
  gap:12px;
  align-items:start;
  width:100%;
  padding:6px 11px 6px 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(255,255,255,.52);
  font-family:var(--ns-cv-body);
  text-align:left;
  cursor:pointer;
  transition:color 1.05s cubic-bezier(.16,.72,.18,1),transform 1.05s cubic-bezier(.16,.72,.18,1),background 1.05s cubic-bezier(.16,.72,.18,1),opacity 1.05s cubic-bezier(.16,.72,.18,1);
}
.ns-cv-step:hover,.ns-cv-step:focus-visible{
  color:#fff;
  outline:none;
  background:rgba(255,255,255,.035);
}
.ns-cv-step:focus-visible{box-shadow:inset 2px 0 0 var(--ns-cv-accent,#30ce7c)}
.ns-cv-step.ns-on{
  color:#f5f5f5;
  transform:translateX(6px);
  background:linear-gradient(90deg,rgba(255,255,255,.04),transparent 74%);
}
.ns-cv-step-num{
  color:rgba(255,255,255,.30);
  font-family:var(--ns-cv-tw);
  font-size:14.5px;
  line-height:1.62;
  text-align:right;
  transition:color .95s cubic-bezier(.16,.72,.18,1),text-shadow .95s cubic-bezier(.16,.72,.18,1);
}
.ns-cv-step.ns-on .ns-cv-step-num{
  color:var(--ns-cv-accent,#30ce7c);
  text-shadow:0 0 12px color-mix(in srgb,var(--ns-cv-accent,#30ce7c) 45%,transparent);
}
.ns-cv-step-text{display:block;min-width:0}
.ns-cv-step-label{
  display:block;
  color:inherit;
  font-family:var(--ns-cv-tw);
  font-size:18.7px;
  line-height:1.22;
  letter-spacing:.03em;
  opacity:.82;
  transform:translateY(5px);
  transition:letter-spacing .9s cubic-bezier(.16,.72,.18,1),opacity .9s cubic-bezier(.16,.72,.18,1),transform .9s cubic-bezier(.16,.72,.18,1);
}
.ns-cv-step.ns-on .ns-cv-step-label{
  letter-spacing:.055em;
  opacity:1;
  transform:translateY(0);
}
.ns-cv-step-micro{
  display:block;
  margin-top:1px;
  color:rgba(255,255,255,.44);
  font-size:12.35px;
  line-height:1.42;
  opacity:.58;
  transform:translateY(7px);
  transition:color 1s cubic-bezier(.16,.72,.18,1) .12s,opacity 1s cubic-bezier(.16,.72,.18,1) .12s,transform 1s cubic-bezier(.16,.72,.18,1) .12s;
}
.ns-cv-step.ns-on .ns-cv-step-micro{
  color:rgba(255,255,255,.72);
  opacity:1;
  transform:translateY(0);
}
/* Takeaway intentionally suppressed in v1.0.1 */
.ns-cv-takeaway{display:none;

  max-width:590px;
  margin:14px 0 0;
  padding:8px 0 8px 14px;
  border-left:2px solid rgba(48,206,124,.48);
  border-left-color:color-mix(in srgb,var(--ns-cv-accent,#30ce7c) 52%,transparent);
  color:rgba(255,255,255,.54);
  font-size:12.4px;
  line-height:1.48;
}

.ns-cv-stage{
  position:relative;
  width:calc(100% + 20px);
  max-width:735px;
  height:clamp(530px,44vw,575px);
  min-height:0;
  margin:clamp(-42px,-2.8vw,-30px) auto 0 -20px;
  overflow:visible;
}
.ns-cv-canvas{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
}
.ns-cv-stage-index{
  position:absolute;
  z-index:4;
  top:12px;
  left:7%;
  display:flex;
  gap:8px;
  align-items:center;
  width:118px;
  color:rgba(255,255,255,.45);
  font-family:var(--ns-cv-tw);
  font-size:12px;
  letter-spacing:.05em;
  pointer-events:none;
}
.ns-cv-stage-index i{
  display:block;
  flex:1;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.16);
}
.ns-cv-stage-index i::after{
  content:"";
  display:block;
  width:var(--ns-cv-stage-progress,11.11%);
  height:100%;
  background:var(--ns-cv-accent,#30ce7c);
  box-shadow:0 0 9px color-mix(in srgb,var(--ns-cv-accent,#30ce7c) 45%,transparent);
  transition:width 1.15s cubic-bezier(.16,.72,.18,1);
}
.ns-cv-toggle{
  appearance:none;
  position:absolute;
  z-index:6;
  top:0;
  right:3.5%;
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(3,8,18,.12);
  color:#fff;
  cursor:pointer;
  transition:border-color .35s ease,background .35s ease,transform .35s ease;
}
.ns-cv-toggle:hover,.ns-cv-toggle:focus-visible{
  border-color:var(--ns-cv-accent,#30ce7c);
  background:rgba(255,255,255,.05);
  outline:none;
  transform:scale(1.05);
}
.ns-cv-toggle[hidden]{display:none !important}
.ns-cv-toggle span{position:relative;display:block;width:11px;height:13px}
.ns-cv-toggle span::before,.ns-cv-toggle span::after{
  content:"";
  position:absolute;
  top:1px;
  width:3px;
  height:11px;
  border-radius:2px;
  background:currentColor;
  transition:transform .25s ease,clip-path .25s ease,left .25s ease,width .25s ease;
}
.ns-cv-toggle span::before{left:1px}
.ns-cv-toggle span::after{right:1px}
.ns-cv-toggle[aria-pressed="true"] span::before{
  left:1px;
  width:11px;
  height:12px;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.ns-cv-toggle[aria-pressed="true"] span::after{display:none}

.ns-cv-detail{
  position:absolute;
  z-index:5;
  left:calc(50% - 4px);
  bottom:0;
  width:min(78%,520px);
  height:var(--ns-cv-detail-height,194px);
  min-height:0;
  transform:translateX(-50%);
  pointer-events:none;
}
.ns-cv-detail-viewport{position:relative;display:grid;height:100%;min-height:0;overflow:hidden}
.ns-cv-detail-rail{
  position:absolute;
  z-index:6;
  top:0;
  bottom:0;
  left:0;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--ns-cv-accent,#30ce7c),color-mix(in srgb,var(--ns-cv-secondary,#0c71c3) 70%,white 8%));
  box-shadow:0 0 16px color-mix(in srgb,var(--ns-cv-accent,#30ce7c) 55%,transparent),0 0 30px color-mix(in srgb,var(--ns-cv-secondary,#0c71c3) 25%,transparent);
}
.ns-cv-panel{
  position:relative;
  grid-area:1/1;
  margin:0;
  padding:0 0 0 20px;
  border:0;
  background:transparent;
  visibility:hidden;
  opacity:0;
  transform:translateY(-30px);
  transition:opacity 1.05s cubic-bezier(.2,.68,.18,1),transform 1.05s cubic-bezier(.2,.68,.18,1);
  will-change:transform,opacity;
}
.ns-cv[data-dir="-1"] .ns-cv-panel{transform:translateY(30px)}
.ns-cv-panel.ns-on{visibility:visible;opacity:1;transform:translateY(0)}
.ns-cv-panel.ns-leaving{visibility:visible}
.ns-cv[data-dir="1"] .ns-cv-panel.ns-leaving{opacity:0;transform:translateY(30px)}
.ns-cv[data-dir="-1"] .ns-cv-panel.ns-leaving{opacity:0;transform:translateY(-30px)}
.ns-cv-panel h3{
  max-width:100%;
  margin:0 0 8px !important;
  overflow:hidden;
  color:#fff !important;
  font-family:var(--ns-cv-tw) !important;
  font-size:clamp(17px,1.32vw,21px);
  font-weight:400 !important;
  line-height:1.18 !important;
  text-shadow:0 0 14px rgba(0,0,0,.48);
  white-space:normal;
  overflow-wrap:anywhere;
  max-width:30ch;
}
.ns-cv-panel p{
  max-width:54ch;
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:13.85px;
  line-height:1.54;
  text-shadow:0 0 12px rgba(0,0,0,.46);
}
.ns-cvx-placeholder{
  padding:12px;
  border:1px dashed #aaa;
  background:rgba(0,0,0,.04);
  color:#aaa;
  font-family:system-ui,sans-serif;
  font-size:12px;
}

.ns-cv-theme-light{
  --ns-cv-ink:#10131c;
  --ns-cv-muted:rgba(16,19,28,.68);
  --ns-cv-faint:rgba(16,19,28,.12);
  --ns-cv-panel:rgba(255,255,255,.12);
}
.ns-cv-theme-light .ns-cv-title{color:#10131c !important}
.ns-cv-theme-light .ns-cv-intro{color:rgba(16,19,28,.70)}
.ns-cv-theme-light .ns-cv-step{color:rgba(16,19,28,.57)}
.ns-cv-theme-light .ns-cv-step:hover,.ns-cv-theme-light .ns-cv-step:focus-visible,.ns-cv-theme-light .ns-cv-step.ns-on{
  color:#10131c;
  background:rgba(16,19,28,.035);
}
.ns-cv-theme-light .ns-cv-step-num{color:rgba(16,19,28,.34)}
.ns-cv-theme-light .ns-cv-step-micro{color:rgba(16,19,28,.48)}
.ns-cv-theme-light .ns-cv-step.ns-on .ns-cv-step-micro{color:rgba(16,19,28,.69)}
.ns-cv-theme-light .ns-cv-takeaway{color:rgba(16,19,28,.58)}
.ns-cv-theme-light .ns-cv-panel h3{color:#10131c !important;text-shadow:none}
.ns-cv-theme-light .ns-cv-panel p{color:rgba(16,19,28,.77);text-shadow:none}
.ns-cv-theme-light .ns-cv-stage-index{color:rgba(16,19,28,.48)}
.ns-cv-theme-light .ns-cv-stage-index i{background:rgba(16,19,28,.16)}
.ns-cv-theme-light .ns-cv-toggle{border-color:rgba(16,19,28,.24);background:rgba(255,255,255,.22);color:#10131c}



@media (min-width:981px){
  .ns-cv-body{align-items:stretch;}
  .ns-cv-stage{
    align-self:stretch;
    height:auto;
    min-height:0;
  }
  .ns-cv-detail{bottom:0;}
}
@media (max-width:980px){
  .ns-cv{min-height:0 !important}
  .ns-cv-head{margin-bottom:16px}
  .ns-cv-body{grid-template-columns:1fr;gap:20px}
  .ns-cv-copy{max-width:720px}
  .ns-cv-stage{width:100%;max-width:700px;height:clamp(590px,78vw,660px);margin:-20px auto 0 0}
}
@media (max-width:640px){
  .ns-cv{padding-top:6px}
  .ns-cv-head{padding-right:0}
  .ns-cv-title{font-size:clamp(26px,7.8vw,34px)}
  .ns-cv-step{grid-template-columns:36px 1fr;gap:10px;padding-right:4px}
  .ns-cv-step-label{font-size:18px}
  .ns-cv-step-micro{font-size:12.1px}
  .ns-cv-stage{height:625px;margin-top:-8px}
  .ns-cv-stage-index{left:4%;top:9px}
  .ns-cv-toggle{right:2%;top:-2px}
  .ns-cv-detail{left:50%;bottom:0;width:95%}
  .ns-cv-detail-viewport{height:100%;min-height:0}
  .ns-cv-panel{padding:13px 4px 12px 19px}
  .ns-cv-panel h3{font-size:19px;white-space:normal}
  .ns-cv-panel p{font-size:13.7px;line-height:1.52}
}
@media (max-width:390px){
  .ns-cv-stage{height:650px}
}
@media (prefers-reduced-motion:reduce){
  .ns-cv-step,.ns-cv-step-num,.ns-cv-step-label,.ns-cv-step-micro,.ns-cv-panel,.ns-cv-progress span,.ns-cv-stage-index i::after,.ns-cv-toggle{transition:none !important}
}

.ns-cv-toggle{display:none !important;}
