/* 9senses Machine Learning Explainer — standalone plugin */
.ns-ml{
  --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;
  position:relative;width:100%;overflow:hidden;isolation:isolate;color:var(--ns-ink);font-family:var(--ns-body);
  padding:clamp(8px,1.7vw,18px) 0 clamp(14px,2.4vw,26px);
}
.ns-ml *{box-sizing:border-box}
/* No global atmospheric veil: the vectormap effect is drawn directly on canvas. */
.ns-ml::before{display:none}
.ns-ml::after{display:none}
@keyframes nsMlBreath{0%,100%{opacity:.42;transform:translateY(-50%) scale(.98)}50%{opacity:.78;transform:translateY(-50%) scale(1.03)}}

.ns-ml-head{width:100%;max-width:1180px;margin:0 auto clamp(8px,1.35vw,16px);padding-right:clamp(0px,4vw,70px)}
.ns-ml-kicker{
  font-family:var(--ns-tw) !important;font-size:clamp(14px,1.3vw,17px);letter-spacing:.08em;
  color:var(--ns-ml-accent,#30ce7c);margin-bottom:10px;text-shadow:0 0 12px color-mix(in srgb,var(--ns-ml-accent,#30ce7c) 30%, transparent);
}
.ns-ml-title{
  font-family:var(--ns-tw) !important;font-weight:400 !important;color:#f1f1f1 !important;
  font-size:clamp(31px,3vw,41px);line-height:1.1 !important;letter-spacing:.02em;margin:0 0 10px !important;max-width:none;white-space:nowrap;
}
.ns-ml-intro{font-size:clamp(15px,1.16vw,17px);line-height:1.62;color:var(--ns-muted);max-width:1080px;margin:0}
.ns-ml-body{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(420px,1.22fr);gap:clamp(18px,3.6vw,52px);align-items:start;width:100%;max-width:1180px;margin:10px auto 0}
.ns-ml-copy{min-width:0}
.ns-ml-takeaway{display:none}
.ns-ml-progress{height:2px;background:rgba(255,255,255,.12);overflow:hidden;margin:12px 0 16px;max-width:560px}
.ns-ml-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ns-ml-accent,#30ce7c),var(--ns-ml-secondary,#0c71c3));transition:width 1.6s cubic-bezier(.16,.72,.18,1)}
.ns-ml-steps{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:6px;max-width:610px}
.ns-ml-steps li{margin:0 !important;padding:0 !important;list-style:none !important}
.ns-ml-step{
  appearance:none;border:0;background:transparent;color:rgba(255,255,255,.54);width:100%;display:grid;grid-template-columns:44px 1fr;gap:12px;
  align-items:start;text-align:left;padding:9px 11px 9px 0;cursor:pointer;border-radius:0;font-family:var(--ns-body);
  transition:color 1.45s cubic-bezier(.16,.72,.18,1),transform 1.45s cubic-bezier(.16,.72,.18,1),background 1.45s cubic-bezier(.16,.72,.18,1),opacity 1.45s cubic-bezier(.16,.72,.18,1);
}
.ns-ml-step:hover,.ns-ml-step:focus-visible{color:#fff;outline:none;background:rgba(255,255,255,.035)}
.ns-ml-step.ns-on{color:#f5f5f5;transform:translateX(6px);background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 72%)}
.ns-ml-step-num{
  font-family:var(--ns-tw);font-size:15px;line-height:1.6;color:rgba(255,255,255,.32);text-align:right;
  transition:color 1.25s cubic-bezier(.16,.72,.18,1),text-shadow 1.25s cubic-bezier(.16,.72,.18,1),opacity 1.25s cubic-bezier(.16,.72,.18,1);
}
.ns-ml-step.ns-on .ns-ml-step-num{color:var(--ns-ml-accent,#30ce7c);text-shadow:0 0 12px color-mix(in srgb,var(--ns-ml-accent,#30ce7c) 45%, transparent)}
.ns-ml-step-label{display:block;font-family:var(--ns-tw);font-size:19.5px;line-height:1.25;color:inherit;letter-spacing:.03em;opacity:.82;transform:translateY(8px);transition:letter-spacing 1.1s cubic-bezier(.16,.72,.18,1),opacity 1.1s cubic-bezier(.16,.72,.18,1),transform 1.1s cubic-bezier(.16,.72,.18,1)}
.ns-ml-step.ns-on .ns-ml-step-label{letter-spacing:.055em;opacity:1;transform:translateY(0)}
.ns-ml-step-micro{display:block;font-size:12.8px;line-height:1.46;color:rgba(255,255,255,.46);margin-top:2px;opacity:.66;transform:translateY(10px);transition:color 1.28s cubic-bezier(.16,.72,.18,1) .2s,opacity 1.28s cubic-bezier(.16,.72,.18,1) .2s,transform 1.28s cubic-bezier(.16,.72,.18,1) .2s}
.ns-ml-step.ns-on .ns-ml-step-micro{color:rgba(255,255,255,.72);opacity:1;transform:translateY(0)}

.ns-ml-stage{position:relative;height:clamp(470px,44vw,550px);min-height:0;aspect-ratio:auto;width:calc(100% + 20px);max-width:710px;margin:clamp(-47px,-3.1vw,-35px) auto 0 -20px;overflow:visible}
.ns-ml-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}
.ns-ml-core,.ns-ml-node{
  position:absolute;z-index:3;display:grid;place-items:center;pointer-events:none;text-align:center;
  font-family:var(--ns-tw);font-weight:400;letter-spacing:.04em;text-transform:lowercase;color:rgba(255,255,255,.58);
  transition:opacity 1.65s cubic-bezier(.16,.72,.18,1),filter 1.65s cubic-bezier(.16,.72,.18,1),transform 1.65s cubic-bezier(.16,.72,.18,1),color 1.65s cubic-bezier(.16,.72,.18,1),border-color 1.65s cubic-bezier(.16,.72,.18,1),box-shadow 1.65s cubic-bezier(.16,.72,.18,1);
}
.ns-ml-core{left:50%;top:34%;width:27%;max-width:178px;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.34);border-radius:50%;transform:translate(-50%,-50%);background:transparent;box-shadow:none}
.ns-ml-core::before,.ns-ml-core::after{content:"";position:absolute;inset:-15%;border:1px dashed rgba(255,255,255,.15);border-radius:50%;animation:nsMlSpin 28s linear infinite}
.ns-ml-core::after{inset:-29%;animation-direction:reverse;animation-duration:42s;opacity:.58}
.ns-ml-core span{font-size:clamp(22px,3vw,38px);position:relative;z-index:1;color:#f7fbff;text-shadow:0 0 20px rgba(48,206,124,.18)}
@keyframes nsMlSpin{to{transform:rotate(360deg)}}
.ns-ml-node{width:92px;height:42px;border:1px solid rgba(255,255,255,.18);background:rgba(5,10,24,.06);backdrop-filter:none;font-size:15px;line-height:1;border-radius:999px;text-shadow:0 0 9px rgba(0,0,0,.7)}
.ns-ml-node span{display:block;transform:translateY(4px)}
.ns-ml-node-data{left:5%;top:11%}.ns-ml-node-vector{left:19%;top:47%}.ns-ml-node-output{right:4%;top:16%}.ns-ml-node-check{right:15%;bottom:24%}.ns-ml-node-feedback{left:10%;bottom:25%}
.ns-ml[data-step="0"] .ns-ml-node-data,
.ns-ml[data-step="1"] .ns-ml-node-vector,
.ns-ml[data-step="2"] .ns-ml-core,
.ns-ml[data-step="3"] .ns-ml-core,
.ns-ml[data-step="4"] .ns-ml-node-output,
.ns-ml[data-step="5"] .ns-ml-node-check,
.ns-ml[data-step="6"] .ns-ml-node-feedback{
  color:#fff;border-color:color-mix(in srgb,var(--ns-ml-accent,#30ce7c) 65%, rgba(255,255,255,.3));
  box-shadow:0 0 24px color-mix(in srgb,var(--ns-ml-accent,#30ce7c) 25%, transparent);filter:brightness(1.2);
}
.ns-ml[data-step="2"] .ns-ml-core,.ns-ml[data-step="3"] .ns-ml-core{box-shadow:0 0 20px color-mix(in srgb,var(--ns-ml-accent,#30ce7c) 28%, transparent);background:transparent}
.ns-ml-detail{position:absolute;left:calc(50% + 18px);bottom:-69px;width:min(88%,600px);min-height:180px;transform:translateX(-50%);z-index:4;pointer-events:none}
 .ns-ml-detail-viewport{position:absolute;inset:0;overflow:hidden}
.ns-ml-detail-rail{position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:999px;background:linear-gradient(180deg,var(--ns-ml-accent,#30ce7c),color-mix(in srgb,var(--ns-ml-secondary,#0c71c3) 70%, white 8%));box-shadow:0 0 16px color-mix(in srgb,var(--ns-ml-accent,#30ce7c) 55%, transparent),0 0 30px color-mix(in srgb,var(--ns-ml-secondary,#0c71c3) 25%, transparent);z-index:5;pointer-events:none}
.ns-ml-panel{
  position:absolute;inset:0;opacity:0;transform:translateY(-34px);
  transition:opacity 1.45s cubic-bezier(.2,.68,.18,1),transform 1.45s cubic-bezier(.2,.68,.18,1);
  padding:14px 0 14px 24px;background:transparent;
  border:0;box-shadow:none;backdrop-filter:none;
  will-change:transform,opacity;
}
.ns-ml[data-dir="-1"] .ns-ml-panel{transform:translateY(34px)}
.ns-ml-panel.ns-on{opacity:1;transform:translateY(0)}
.ns-ml[data-dir="1"] .ns-ml-panel.ns-leaving{opacity:0;transform:translateY(34px)}
.ns-ml[data-dir="-1"] .ns-ml-panel.ns-leaving{opacity:0;transform:translateY(-34px)}
.ns-ml-panel-label{display:none}
.ns-ml-panel h3{font-family:var(--ns-tw) !important;font-weight:400 !important;font-size:clamp(18px,1.5vw,23px);line-height:1.16 !important;color:#fff !important;margin:0 0 9px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 14px rgba(0,0,0,.48)}
.ns-ml-panel p{margin:0;font-size:14.4px;line-height:1.58;color:rgba(255,255,255,.78);text-shadow:0 0 12px rgba(0,0,0,.46)}
.ns-mlx-placeholder{padding:12px;border:1px dashed #aaa;color:#aaa;font-size:12px;font-family:system-ui,sans-serif;background:rgba(0,0,0,.04)}

.ns-ml-theme-light{--ns-ink:#10131c;--ns-muted:rgba(16,19,28,.68)}
.ns-ml-theme-light .ns-ml-title{color:#10131c !important}
.ns-ml-theme-light .ns-ml-intro,.ns-ml-theme-light .ns-ml-takeaway{color:rgba(16,19,28,.72)}
.ns-ml-theme-light .ns-ml-step{color:rgba(16,19,28,.58)}
.ns-ml-theme-light .ns-ml-step:hover,.ns-ml-theme-light .ns-ml-step:focus-visible,.ns-ml-theme-light .ns-ml-step.ns-on{color:#10131c;background:rgba(16,19,28,.035)}
.ns-ml-theme-light .ns-ml-step-micro{color:rgba(16,19,28,.48)}
.ns-ml-theme-light .ns-ml-step.ns-on .ns-ml-step-micro{color:rgba(16,19,28,.68)}

@media (max-width:980px){
  .ns-ml{min-height:0 !important}.ns-ml-head{margin-bottom:16px}.ns-ml-title{white-space:normal}.ns-ml-body{grid-template-columns:1fr;gap:18px}.ns-ml-stage{height:clamp(470px,62vw,560px);max-width:660px;width:100%;margin-top:-25px;margin-left:0}.ns-ml::after{right:50%;transform:translate(50%,-50%)}
}
@media (max-width:640px){
  .ns-ml{padding-top:6px}.ns-ml-head{padding-right:0}.ns-ml-title{font-size:clamp(26px,7.8vw,34px);white-space:normal}.ns-ml-stage{height:500px;aspect-ratio:auto}.ns-ml-detail{width:96%;left:50%;bottom:-37px;min-height:210px}.ns-ml-node{width:78px;height:36px;font-size:13px}
  .ns-ml-core{width:36%}.ns-ml-panel{padding:14px 0 14px 20px}.ns-ml-step{grid-template-columns:36px 1fr}
}
@media (prefers-reduced-motion:reduce){.ns-ml::after,.ns-ml-core::before,.ns-ml-core::after{animation:none !important}.ns-ml-step,.ns-ml-step-num,.ns-ml-step-label,.ns-ml-step-micro,.ns-ml-panel,.ns-ml-progress span{transition:none !important}}
