/* ============================================================================
   Slaydit Ninja — interactive overlay showcase (Direction 3, device diorama)
   Self-contained + fully scoped under #nxlive so it can never touch the rest of
   the site. Base tokens (--cyan/--bg/…) inherit from the storefront :root; only
   the overlay/diorama-specific tokens are declared here.
   ============================================================================ */
#nxlive{
  --nj-panel:#464d57; --nj-panel-2:#3d434c; --nj-line:#31363e; --nj-text:#e7ecf2; --nj-dim:#aab4c0;
  --code-bg:#2b3038; --room:#070d17; --room-2:#0a1320; --bezel:#141b26; --bezel-2:#1c2530;
  --glass-line:rgba(148,196,220,.10);
  position:relative;
}
#nxlive .nx-inner{max-width:1120px;margin:0 auto;padding:0 24px}
#nxlive .eyebrow{font:800 11.5px/1 -apple-system,sans-serif;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase}
#nxlive h2{letter-spacing:-.02em}
#nxlive .lead{color:var(--dim);max-width:60ch}

/* scroll reveal */
#nxlive .nx-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
#nxlive .nx-reveal.nx-in{opacity:1;transform:none}

/* ── SHOWCASE HEAD ─────────────────────────────────────────────────────── */
#nxlive .nx-head{text-align:center;max-width:60ch;margin:0 auto}
#nxlive .nx-head .eyebrow{display:block;margin-bottom:14px}
#nxlive .nx-head h2{font-size:clamp(26px,4.4vw,46px);line-height:1.06;margin:0 auto;max-width:18ch}
#nxlive .nx-head h2 em{font-style:normal;color:transparent;background:linear-gradient(120deg,var(--cyan),#7ff0ff 60%,var(--green));-webkit-background-clip:text;background-clip:text}
#nxlive .nx-head .lead{margin:18px auto 0;font-size:clamp(15px,1.7vw,17px);max-width:56ch}

/* ── HERO / DIORAMA ────────────────────────────────────────────────────── */
#nxlive .nx-stage{margin:48px auto 0;max-width:1000px;position:relative;perspective:1600px}
#nxlive .diorama{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,7deg)) rotateY(var(--ry,-11deg));transition:transform .28s cubic-bezier(.2,.7,.2,1)}
#nxlive.no-parallax .diorama{transform:none!important}
#nxlive .ambient{position:absolute;inset:-16% -10% -34%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 34%,rgba(34,211,238,.16),transparent 70%),radial-gradient(46% 40% at 22% 78%,rgba(52,211,153,.08),transparent 70%);
  filter:blur(6px);transform:translateZ(-220px)}
#nxlive .monitor{position:relative;z-index:2;border-radius:26px;padding:20px 20px 16px;
  background:linear-gradient(180deg,var(--bezel-2),var(--bezel) 60%,#0f151d);border:1px solid rgba(148,196,220,.12);
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset,0 -1px 0 rgba(0,0,0,.5) inset,0 60px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4);
  transform-style:preserve-3d}
#nxlive .monitor::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,211,238,.55),transparent 34%,transparent 70%,rgba(52,211,153,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#nxlive .webcam{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#2b3a48,#080c12);box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 5px rgba(34,211,238,.4)}
#nxlive .callscreen{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;
  background:linear-gradient(180deg,#0b111c,#070c15);box-shadow:0 0 0 1px rgba(0,0,0,.7),0 24px 60px rgba(0,0,0,.5) inset}
#nxlive .callscreen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background:linear-gradient(115deg,rgba(255,255,255,.06),transparent 26%),radial-gradient(120% 90% at 50% 0%,transparent 60%,rgba(0,0,0,.4));
  mix-blend-mode:screen;opacity:.7}
#nxlive .tiles{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:10px}
#nxlive .vt{position:relative;border-radius:9px;overflow:hidden;border:1px solid rgba(148,196,220,.09);display:flex;align-items:flex-end;padding:7px}
#nxlive .vt .grad{position:absolute;inset:0;z-index:0}
#nxlive .vt.p1 .grad{background:radial-gradient(120% 120% at 30% 20%,#1a2740,#0e1626)}
#nxlive .vt.p2 .grad{background:radial-gradient(120% 120% at 70% 30%,#22203a,#141026)}
#nxlive .vt.p3 .grad{background:radial-gradient(120% 120% at 40% 70%,#102a2b,#0a1a1c)}
#nxlive .vt.p4 .grad{background:radial-gradient(120% 120% at 60% 40%,#241a2a,#160f1c)}
#nxlive .vt.p5 .grad{background:radial-gradient(120% 120% at 30% 60%,#1b2436,#0d1420)}
#nxlive .vt.you{grid-column:2;grid-row:2;outline:1.5px solid rgba(52,211,153,.75);outline-offset:-1px}
#nxlive .vt .ava{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;z-index:1;
  display:flex;align-items:center;justify-content:center;font:800 11px/1 sans-serif;color:#cdd7e5;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
#nxlive .vt .name{position:relative;z-index:2;font:600 8.5px/1 sans-serif;color:#d6e0ee;background:rgba(0,0,0,.5);border-radius:5px;padding:2px 6px}
#nxlive .vt .mic{position:absolute;top:6px;right:6px;z-index:2;width:13px;height:13px;border-radius:4px;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
#nxlive .vt .mic svg{width:8px;height:8px}
#nxlive .callbar{position:absolute;left:0;right:0;bottom:0;z-index:7;height:30px;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(0deg,rgba(6,10,17,.92),transparent)}
#nxlive .cbtn{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
#nxlive .cbtn svg{width:10px;height:10px;fill:#cdd7e5}
#nxlive .cbtn.hang{background:var(--rose);border-color:transparent;width:30px}
#nxlive .cbtn.hang svg{fill:#2a0a0e}
#nxlive .overlay-float{position:absolute;right:3.5%;bottom:7%;z-index:12;width:56%;max-width:470px;transform:translateZ(70px);filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}
#nxlive .overlay-float .halo{position:absolute;inset:-14%;z-index:-1;background:radial-gradient(closest-side,rgba(34,211,238,.22),transparent 72%)}
#nxlive .overlay-float .ninja{box-shadow:0 40px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) inset}
#nxlive .stand{position:relative;z-index:1;width:200px;height:74px;margin:-2px auto 0;transform-style:preserve-3d}
#nxlive .stand .neck{position:absolute;left:50%;top:0;transform:translateX(-50%);width:60px;height:44px;background:linear-gradient(180deg,#161d27,#0d131b);border-radius:0 0 8px 8px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
#nxlive .stand .base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:200px;height:20px;border-radius:50%/60%;background:linear-gradient(180deg,#1a222d,#0b1017);box-shadow:0 20px 34px -10px rgba(0,0,0,.8)}
#nxlive .reflection{position:relative;z-index:0;width:78%;max-width:720px;margin:8px auto 0;height:70px;background:linear-gradient(180deg,rgba(34,211,238,.14),transparent 78%);filter:blur(9px);opacity:.5;border-radius:50%;transform:scaleY(-1)}
/* switch lives OUTSIDE the 3D diorama (flat control row under the device) so its labels
   can never project over the overlay's control bar */
#nxlive .nx-switchrow{text-align:center;margin-top:20px}
#nxlive .modeswitch{position:relative;display:inline-flex;align-items:center;gap:0;background:#10161f;border:1px solid rgba(148,196,220,.18);border-radius:999px;padding:4px;box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4) inset;white-space:nowrap}
#nxlive .modeswitch button{appearance:none;border:0;background:transparent;color:var(--dim);cursor:pointer;font:800 10.5px/1 -apple-system,sans-serif;letter-spacing:.06em;padding:8px 13px;border-radius:999px;transition:color .2s;position:relative;z-index:2}
#nxlive .modeswitch button[aria-pressed="true"]{color:#052027}
#nxlive .modeswitch .knob{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:999px;z-index:1;background:linear-gradient(180deg,#5ef0ff,var(--cyan));box-shadow:0 4px 12px rgba(34,211,238,.5);transition:transform .32s cubic-bezier(.3,.8,.3,1),width .32s}
#nxlive .modeswitch:focus-within{outline:2px solid rgba(34,211,238,.6);outline-offset:3px}
#nxlive .switch-hint{margin:10px auto 0;color:var(--faint);font:600 10.5px/1 sans-serif;letter-spacing:.04em;opacity:.8}
@media(max-width:760px){
  #nxlive .diorama{transform:rotateX(3deg) rotateY(-3deg)}
  #nxlive .overlay-float{width:74%;right:2%;bottom:5%}
  #nxlive .stand{transform:none}
  #nxlive .modeswitch{position:relative;transform:none;margin:14px auto 0}
  #nxlive .switch-hint{position:static;transform:none;margin:8px auto 0;text-align:center}
  #nxlive .reflection{display:none}
}

/* ── BANDS (sub-sections) ──────────────────────────────────────────────── */
#nxlive .nx-band{padding:64px 0 0}
#nxlive .nx-band .head{max-width:62ch}
#nxlive .nx-band h2{font-size:clamp(23px,3.2vw,34px);line-height:1.1;margin-top:10px}
#nxlive .nx-band .head p{color:var(--dim);margin-top:12px;font-size:16px}

/* ── TWO MODES ─────────────────────────────────────────────────────────── */
#nxlive .modes-grid{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){#nxlive .modes-grid{grid-template-columns:1fr}}
#nxlive .modecard{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));padding:24px 22px 26px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
#nxlive .modecard:hover{border-color:rgba(34,211,238,.35);transform:translateY(-3px)}
#nxlive .modecard .tophint{display:flex;align-items:center;gap:9px;margin-bottom:18px}
#nxlive .modecard .badge{font:800 10.5px/1 sans-serif;letter-spacing:.12em;padding:6px 11px;border-radius:999px}
#nxlive .modecard.beh .badge{color:var(--cyan);background:var(--cyan-soft);border:1px solid rgba(34,211,238,.35)}
#nxlive .modecard.cod .badge{color:var(--green);background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.35)}
#nxlive .modecard h3{font-size:19px;letter-spacing:-.01em}
#nxlive .modecard .desc{color:var(--dim);font-size:14px;margin-top:5px;max-width:44ch}
#nxlive .modecard .njholder{margin-top:20px;display:flex;justify-content:center}
#nxlive .modecard .njholder .ninja{width:100%;max-width:420px}

/* ── INVISIBILITY SLIDER ───────────────────────────────────────────────── */
#nxlive .compare{margin-top:36px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--room-2);position:relative;user-select:none;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
#nxlive .compare .frame{position:relative;aspect-ratio:16/9.4}
#nxlive .cmp-layer{position:absolute;inset:0}
#nxlive .cmp-tiles{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:14px}
#nxlive .cmp-tiles .vt .ava{width:46px;height:46px;font-size:14px}
#nxlive .cmp-tiles .vt .name{font-size:11px;padding:3px 8px}
#nxlive .theirbadge{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--green);font:700 11px/1 sans-serif;letter-spacing:.04em;border-radius:999px;padding:7px 14px;display:flex;align-items:center;gap:8px;white-space:nowrap;max-width:calc(100% - 28px)}
#nxlive .theirbadge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);flex:none}
#nxlive .scan{position:absolute;left:0;right:0;top:0;height:34%;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(52,211,153,.09),transparent);animation:nxscan 3.4s linear infinite}
@keyframes nxscan{from{transform:translateY(-110%)}to{transform:translateY(330%)}}
#nxlive .cmp-yours{overflow:hidden;width:var(--pos,52%);z-index:7;border-right:0}
#nxlive .cmp-yours .inner{position:absolute;inset:0;width:var(--framew,100%)}
#nxlive .cmp-yours .yourbadge{position:absolute;top:14px;left:14px;z-index:9;background:var(--cyan-soft);border:1px solid rgba(34,211,238,.45);color:var(--cyan);font:700 11px/1 sans-serif;letter-spacing:.04em;border-radius:999px;padding:7px 14px;display:flex;align-items:center;gap:8px;white-space:nowrap}
#nxlive .cmp-yours .yourbadge i{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 7px var(--cyan);flex:none}
#nxlive .cmp-yours .ov{position:absolute;right:3.5%;bottom:6%;width:52%;max-width:400px;z-index:10;filter:drop-shadow(0 24px 34px rgba(0,0,0,.5))}
#nxlive .handle{position:absolute;top:0;bottom:0;left:var(--pos,52%);width:2px;background:linear-gradient(180deg,var(--cyan),#7ff0ff);z-index:11;transform:translateX(-1px);box-shadow:0 0 18px rgba(34,211,238,.7)}
#nxlive .handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(4,8,14,.85);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 24px rgba(34,211,238,.4);cursor:ew-resize;color:var(--cyan);font:800 14px/1 sans-serif}
#nxlive .handle .grip:focus-visible{outline:3px solid #fff;outline-offset:2px}
#nxlive .cmp-caption{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
#nxlive .cmp-caption b{color:var(--text)}
#nxlive .cmp-caption .k{display:inline-flex;align-items:center;gap:7px}
#nxlive .cmp-caption .nx-dot.g{color:var(--green)}#nxlive .cmp-caption .nx-dot.c{color:var(--cyan)}

/* ── ANATOMY ───────────────────────────────────────────────────────────── */
#nxlive .anatomy{margin-top:36px;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
@media(max-width:900px){#nxlive .anatomy{grid-template-columns:1fr;gap:28px}}
#nxlive .anat-stage{position:relative;width:min(440px,90vw);margin:0 auto}
#nxlive .spot{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--cyan);color:#052027;font:800 12px/24px sans-serif;text-align:center;z-index:6;cursor:pointer;transition:transform .22s;border:2px solid rgba(4,8,14,.6)}
#nxlive .spot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(34,211,238,.55);opacity:0}
#nxlive .spot:hover,#nxlive .spot.on{transform:scale(1.28)}
#nxlive .spot.on::after{opacity:1;animation:nxping 1.3s infinite}
#nxlive .spot:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes nxping{from{transform:scale(.7);opacity:.9}to{transform:scale(1.4);opacity:0}}
#nxlive .anat-list{display:flex;flex-direction:column;gap:9px;max-width:440px}
/* clickable progress rail (hybrid tour position) — sits under the overlay in the stage */
#nxlive .anat-rail{display:flex;gap:6px;justify-content:center;margin:18px 0 2px}
#nxlive .anat-rail button{width:22px;height:6px;border-radius:999px;border:0;padding:0;cursor:pointer;background:rgba(148,196,220,.22);transition:background .25s,width .25s}
#nxlive .anat-rail button:hover{background:rgba(148,196,220,.4)}
#nxlive .anat-rail button.on{background:var(--cyan);width:30px}
#nxlive-m .anat-rail{display:flex;gap:6px;justify-content:center;margin:14px 0 0}
#nxlive-m .anat-rail button{width:20px;height:6px;border-radius:999px;border:0;padding:0;cursor:pointer;background:rgba(148,196,220,.22);transition:background .25s,width .25s}
#nxlive-m .anat-rail button.on{background:var(--cyan);width:28px}
#nxlive-m .anat-nj .at{cursor:pointer}
#nxlive .anat-item{border:1px solid var(--line);border-radius:13px;padding:12px 15px;background:rgba(255,255,255,.015);cursor:pointer;transition:.22s}
#nxlive .anat-item:hover{border-color:rgba(34,211,238,.3)}
#nxlive .anat-item.on{border-color:var(--cyan);background:var(--cyan-soft)}
#nxlive .anat-item b{font-size:14px;display:flex;align-items:center}
#nxlive .anat-item p{font-size:13px;color:var(--dim);margin-top:3px}
#nxlive .anat-item .n{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--cyan-soft);color:var(--cyan);font:800 11px/20px sans-serif;text-align:center;margin-right:10px;align-items:center;justify-content:center}

/* ── HONESTY STRIP ─────────────────────────────────────────────────────── */
#nxlive .honesty{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){#nxlive .honesty{grid-template-columns:1fr}}
#nxlive .hcard{border:1px solid var(--line);border-radius:16px;padding:18px;background:rgba(255,255,255,.015)}
#nxlive .hcard .ic{width:32px;height:32px;border-radius:9px;background:var(--cyan-soft);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
#nxlive .hcard .ic svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:2}
#nxlive .hcard b{font-size:14.5px}
#nxlive .hcard p{color:var(--dim);font-size:13px;margin-top:5px}

/* ══ NINJA OVERLAY REPLICA ═════════════════════════════════════════════ */
#nxlive .ninja{width:100%;background:var(--nj-panel);border:2px solid var(--nj-line);border-radius:22px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;position:relative}
#nxlive .nj-top{display:flex;align-items:center;gap:6px;padding:10px 12px}
#nxlive .nj-timer{display:flex;align-items:center;gap:6px;background:#173226;border:1px solid #1f4a35;color:#5ee6a1;font:700 12px/1 ui-monospace,Consolas,monospace;padding:6px 10px;border-radius:8px}
#nxlive .nj-timer i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;animation:nxblink 1.6s infinite}
@keyframes nxblink{50%{opacity:.4}}
#nxlive .nj-ctrls{margin-left:auto;display:flex;gap:5px}
#nxlive .nj-btn{width:30px;height:26px;border-radius:7px;background:var(--nj-panel-2);border:1px solid #565e69;color:#cdd5de;font:600 12px/1 -apple-system,sans-serif;display:flex;align-items:center;justify-content:center;transition:.2s}
#nxlive .nj-btn.active{background:rgba(34,211,238,.18);border-color:var(--cyan);color:#fff}
#nxlive .nj-btn.eye{color:var(--amber);border-color:#8a6d2f;background:rgba(245,177,61,.12)}
#nxlive .nj-btn.end{width:auto;padding:0 9px;background:rgba(251,113,133,.14);border-color:#7c3a44;color:#f9a1ad;font-weight:700}
#nxlive .nj-body{min-height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 20px;position:relative;overflow:hidden}
#nxlive .nj-dots{display:flex;gap:7px}
#nxlive .nj-dots i{width:8px;height:8px;border-radius:50%;background:var(--cyan);opacity:.35;animation:nxdotkf 1.1s infinite}
#nxlive .nj-dots i:nth-child(2){animation-delay:.18s}#nxlive .nj-dots i:nth-child(3){animation-delay:.36s}
@keyframes nxdotkf{40%{opacity:1;transform:translateY(-3px)}}
#nxlive .nj-center{display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .25s}
#nxlive .nj-listen{color:var(--nj-dim);font-size:13.5px}
#nxlive .nj-scene{position:absolute;inset:14px 18px;opacity:0;transition:opacity .3s;pointer-events:none;display:flex;flex-direction:column}
#nxlive .nj-q{opacity:0;transform:translateY(-5px);transition:.35s}
#nxlive .nj-q b{display:block;font-size:10px;letter-spacing:.12em;color:var(--nj-dim);margin-bottom:3px}
#nxlive .nj-q p{background:var(--nj-panel-2);border:1px solid #565e69;border-radius:12px;padding:9px 12px;font-size:13px;color:var(--nj-text)}
#nxlive .nj-cap-shot{display:flex;align-items:center;gap:9px;background:var(--nj-panel-2);border:1px solid #565e69;border-radius:12px;padding:8px 10px}
#nxlive .nj-cap-shot .thumb{width:52px;height:34px;border-radius:6px;background:#11151b;border:1px solid #565e69;flex:none;position:relative;overflow:hidden}
#nxlive .nj-cap-shot .thumb::before{content:"";position:absolute;left:5px;top:5px;right:16px;height:3px;border-radius:2px;background:#4a5666;box-shadow:0 6px 0 -1px #3a4552,0 12px 0 -1px #46525f,0 18px 0 -1px #3a4552}
#nxlive .nj-cap-shot .lbl{font-size:11px;color:var(--nj-dim)}
#nxlive .nj-cap-shot .lbl b{color:var(--nj-text);font-size:12px;display:block}
#nxlive .nj-a{margin-top:9px;opacity:0;transition:.35s;overflow:hidden;flex:1}
#nxlive .nj-a .nj-chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(34,211,238,.16);color:var(--cyan);font:800 10px/1 sans-serif;margin-bottom:8px}
#nxlive .stream{font-size:13.5px;color:var(--nj-text);line-height:1.62;white-space:pre-wrap}
#nxlive .streaming .stream::after{content:"▌";color:var(--cyan);animation:nxblink 1s infinite}
#nxlive .nj-code-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 4px}
#nxlive .nj-code-head span{font:700 10px/1 sans-serif;letter-spacing:.1em;color:var(--cyan)}
#nxlive .nj-code-head .copy{color:var(--nj-dim);border:1px solid #565e69;border-radius:6px;padding:2px 7px;font-size:10px;font-weight:600;cursor:pointer}
#nxlive .nj-code{background:var(--code-bg);border-radius:9px;padding:9px 11px;font:12px/1.55 ui-monospace,Consolas,monospace;color:#cfd8e3;white-space:pre;overflow-x:auto}
#nxlive .nj-code .k{color:#c792ea}#nxlive .nj-code .f{color:#82aaff}#nxlive .nj-code .s{color:#c3e88d}#nxlive .nj-code .c{color:#5b6b82}
#nxlive .nj-cx{margin-top:6px;font-size:11px;color:var(--nj-dim)}
#nxlive .live .nj-center{opacity:0}#nxlive .live .nj-scene{opacity:1}#nxlive .live .nj-q,#nxlive .live .nj-a{opacity:1;transform:none}
#nxlive .nj-foot{display:flex;gap:8px;padding:11px 12px}
#nxlive .nj-ask{flex:1;background:var(--nj-panel-2);border:1px solid #565e69;border-radius:10px;color:#8d97a3;font-size:13px;padding:8px 12px}
#nxlive .nj-cap{display:flex;align-items:center;gap:6px;border:1px solid var(--cyan);color:var(--cyan);border-radius:10px;padding:0 12px;font:600 13px/1 sans-serif;background:rgba(34,211,238,.07);transition:.2s;cursor:pointer}
#nxlive .nj-cap.flash{background:var(--cyan);color:#06222a;box-shadow:0 0 16px rgba(34,211,238,.6)}
#nxlive .nj-send{width:36px;border-radius:10px;background:rgba(34,211,238,.16);border:1px solid var(--cyan);color:var(--cyan);display:flex;align-items:center;justify-content:center}
/* mode-pill hidden: it overlapped the overlay's control bar and is redundant with the
   BEHAVIORAL/CODING switch under the device (the real overlay has no such pill). */
#nxlive .mode-pill{display:none}
/* scaled-down variants */
#nxlive .nj-sm .nj-body{min-height:150px;padding:8px 9px}
#nxlive .nj-sm .nj-top{padding:6px 7px}#nxlive .nj-sm .nj-btn{width:18px;height:15px;font-size:8px;border-radius:4px}
#nxlive .nj-sm .nj-timer{font-size:8px;padding:3px 6px;gap:4px}#nxlive .nj-sm .nj-foot{padding:6px 7px}
#nxlive .nj-sm .nj-ask{font-size:8px;padding:4px 7px}#nxlive .nj-sm .nj-cap{font-size:8px;padding:0 7px}#nxlive .nj-sm .nj-send{width:19px}
#nxlive .nj-sm .nj-listen{font-size:9px}#nxlive .nj-sm .nj-scene{inset:8px 9px}
#nxlive .nj-sm .nj-q p{font-size:8.5px;padding:5px 7px}#nxlive .nj-sm .stream{font-size:9px;line-height:1.5}
#nxlive .nj-sm .nj-a .nj-chip{width:13px;height:13px;font-size:6px;margin-bottom:4px}#nxlive .nj-sm .nj-q b{font-size:7.5px}
#nxlive .nj-sm .nj-cap-shot{padding:5px 6px;gap:6px}#nxlive .nj-sm .nj-cap-shot .thumb{width:30px;height:20px}#nxlive .nj-sm .nj-cap-shot .lbl{font-size:7.5px}#nxlive .nj-sm .nj-cap-shot .lbl b{font-size:8px}
#nxlive .nj-sm .nj-dots i{width:6px;height:6px}

/* ══ TRANSPARENCY — every replica reads as see-through frosted glass (the real
   overlay is ~50% transparent so it never blocks your screen). ══ */
#nxlive .ninja{background:rgba(58,64,73,.6);-webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15);border-color:rgba(148,196,220,.26)}
#nxlive .nj-q p,#nxlive .nj-cap-shot,#nxlive .nj-btn{background:rgba(61,67,76,.6)}
#nxlive .nj-btn.active{background:rgba(34,211,238,.24)}
#nxlive .nj-btn.eye{background:rgba(245,177,61,.18)}
#nxlive .nj-btn.end{background:rgba(251,113,133,.2)}
#nxlive .nj-ask{background:rgba(61,67,76,.48)}
#nxlive .nj-code{background:rgba(30,34,40,.72)}

@media(prefers-reduced-motion:reduce){
  #nxlive *{animation:none!important;transition:none!important}
  #nxlive .diorama{transition:none}
  #nxlive .nx-reveal{opacity:1;transform:none}
}

/* ============================================================================
   MOBILE / TABLET showcase — #nxlive-m (Direction 1: Readable Overlay Hero).
   Shown <=860px; the desktop diorama (#nxlive) is hidden there. Scoped to
   #nxlive-m; overlay tokens redeclared (the #nxlive ones are element-scoped).
   ============================================================================ */
@media (max-width:860px){ #nxlive{ display:none !important } }
#nxlive-m{ display:none }
@media (max-width:860px){ #nxlive-m{ display:block } }

#nxlive-m{
  --nj-panel:#464d57; --nj-panel-2:#3d434c; --nj-line:#31363e; --nj-text:#e7ecf2; --nj-dim:#aab4c0; --code-bg:#2b3038;
  padding:26px 18px 40px; font-family:-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
}
#nxlive-m .eyebrow{font:800 11px/1 inherit;letter-spacing:.2em;color:var(--cyan);text-transform:uppercase;display:block}
#nxlive-m h1{font-size:26px;line-height:1.12;letter-spacing:-.02em;margin:12px 0 0;font-weight:800}
#nxlive-m h1 em{font-style:normal;background:linear-gradient(120deg,var(--cyan),#7ff0ff 55%,var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
#nxlive-m .lead{color:var(--dim);font-size:14.5px;line-height:1.5;margin:12px 0 0;max-width:40ch}

/* HERO: blurred call-grid backdrop + big overlay on top */
#nxlive-m .herowrap{margin-top:26px}
#nxlive-m .nxstage{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#0b111c,#070c15);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5) inset;padding:20px 16px 22px}
#nxlive-m .callback{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:8px;padding:12px;
  filter:blur(2.5px) saturate(1.05);opacity:.62;transform:scale(1.04)}
#nxlive-m .callback::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(4,8,14,.7))}
#nxlive-m .vt{position:relative;border-radius:11px;overflow:hidden;border:1px solid rgba(148,196,220,.09);display:flex;align-items:flex-end;padding:8px}
#nxlive-m .vt .grad{position:absolute;inset:0;z-index:0}
#nxlive-m .vt.p1 .grad{background:radial-gradient(120% 120% at 30% 20%,#1a2740,#0e1626)}
#nxlive-m .vt.p2 .grad{background:radial-gradient(120% 120% at 70% 30%,#22203a,#141026)}
#nxlive-m .vt.p3 .grad{background:radial-gradient(120% 120% at 40% 70%,#102a2b,#0a1a1c)}
#nxlive-m .vt.p4 .grad{background:radial-gradient(120% 120% at 60% 40%,#241a2a,#160f1c)}
#nxlive-m .vt.p5 .grad{background:radial-gradient(120% 120% at 30% 60%,#1b2436,#0d1420)}
#nxlive-m .vt.p6 .grad{background:radial-gradient(120% 120% at 60% 30%,#152a34,#0a1720)}
#nxlive-m .vt.you{outline:1.5px solid rgba(52,211,153,.7);outline-offset:-1px}
#nxlive-m .vt .ava{position:absolute;inset:0;margin:auto;width:40px;height:40px;border-radius:50%;z-index:1;display:flex;align-items:center;justify-content:center;font:800 13px/1 inherit;color:#cdd7e5;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
#nxlive-m .vt .name{position:relative;z-index:2;font:600 9.5px/1 inherit;color:#d6e0ee;background:rgba(0,0,0,.5);border-radius:5px;padding:2px 6px}
#nxlive-m .heroninja{position:relative;z-index:3;width:100%;max-width:340px;margin:0 auto;filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}

/* segmented toggle */
#nxlive-m .segwrap{margin-top:16px;text-align:center}
#nxlive-m .seg{position:relative;display:inline-flex;align-items:center;gap:0;background:#10161f;border:1px solid rgba(148,196,220,.18);border-radius:999px;padding:4px;box-shadow:0 10px 22px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4) inset}
#nxlive-m .seg button{appearance:none;border:0;background:transparent;color:var(--dim);cursor:pointer;font:800 12px/1 inherit;letter-spacing:.05em;padding:11px 20px;border-radius:999px;transition:color .2s;position:relative;z-index:2;-webkit-tap-highlight-color:transparent}
#nxlive-m .seg button[aria-pressed="true"]{color:#052027}
#nxlive-m .seg .knob{position:absolute;top:4px;left:4px;height:calc(100% - 8px);border-radius:999px;z-index:1;background:linear-gradient(180deg,#5ef0ff,var(--cyan));box-shadow:0 4px 12px rgba(34,211,238,.5);transition:transform .32s cubic-bezier(.3,.8,.3,1),width .32s}
#nxlive-m .seg:focus-within{outline:2px solid rgba(34,211,238,.6);outline-offset:3px}
#nxlive-m .seghint{margin:11px auto 0;color:var(--faint);font:600 11px/1 inherit;letter-spacing:.03em;opacity:.85}

/* section heads */
#nxlive-m .band{margin-top:44px}
#nxlive-m .band .bhead .eyebrow{margin-bottom:9px}
#nxlive-m .band h2{font-size:20px;line-height:1.16;letter-spacing:-.01em;margin:0;font-weight:800}
#nxlive-m .band .bhead p{color:var(--dim);font-size:14px;line-height:1.5;margin:9px 0 0;max-width:44ch}

/* invisibility slider */
#nxlive-m .compare{margin-top:20px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#0a1320;position:relative;user-select:none;-webkit-user-select:none;box-shadow:0 24px 50px -26px rgba(0,0,0,.7);touch-action:pan-y}
#nxlive-m .cmp-frame{position:relative;aspect-ratio:9/11}
#nxlive-m .cmp-layer{position:absolute;inset:0}
#nxlive-m .cmp-tiles{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:7px;padding:12px}
#nxlive-m .cmp-tiles .vt .ava{width:38px;height:38px;font-size:12px}
/* interviewer badge sits top-RIGHT (labels the right/theirs side) so it never collides
   with the top-left YOUR VIEW badge on a narrow phone */
#nxlive-m .theirbadge{position:absolute;top:12px;left:auto;right:12px;z-index:6;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--green);font:700 10px/1.25 inherit;letter-spacing:.02em;border-radius:999px;padding:6px 12px;display:flex;align-items:center;gap:7px;white-space:nowrap;max-width:calc(50% - 14px)}
#nxlive-m .theirbadge i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 7px var(--green);flex:none}
#nxlive-m .scan{position:absolute;left:0;right:0;top:0;height:34%;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(52,211,153,.09),transparent);animation:nxscan 3.4s linear infinite}
#nxlive-m .cmp-yours{overflow:hidden;width:var(--pos,52%);z-index:7}
#nxlive-m .cmp-yours .inner{position:absolute;inset:0;width:var(--framew,100%)}
#nxlive-m .cmp-yours .yourbadge{position:absolute;top:12px;left:12px;z-index:9;background:var(--cyan-soft);border:1px solid rgba(34,211,238,.45);color:var(--cyan);font:700 10px/1 inherit;letter-spacing:.02em;border-radius:999px;padding:6px 11px;display:flex;align-items:center;gap:7px;white-space:nowrap}
#nxlive-m .cmp-yours .yourbadge i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 7px var(--cyan);flex:none}
#nxlive-m .cmp-yours .ov{position:absolute;right:5%;bottom:5%;left:5%;z-index:10;filter:drop-shadow(0 20px 30px rgba(0,0,0,.5))}
#nxlive-m .handle{position:absolute;top:0;bottom:0;left:var(--pos,52%);width:2px;background:linear-gradient(180deg,var(--cyan),#7ff0ff);z-index:11;transform:translateX(-1px);box-shadow:0 0 18px rgba(34,211,238,.7)}
#nxlive-m .handle .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:rgba(4,8,14,.85);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 24px rgba(34,211,238,.4);cursor:ew-resize;color:var(--cyan);font:800 16px/1 inherit;touch-action:none}
#nxlive-m .handle .grip:focus-visible{outline:3px solid #fff;outline-offset:2px}
#nxlive-m .cmp-caption{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}
#nxlive-m .cmp-caption b{color:var(--text)}
#nxlive-m .cmp-caption .k{display:inline-flex;align-items:center;gap:7px}
#nxlive-m .cmp-caption .dot.g{color:var(--green)}#nxlive-m .cmp-caption .dot.c{color:var(--cyan)}
#nxlive-m .cmp-hint{text-align:center;margin:12px auto 0;color:var(--cyan);font:700 11px/1 inherit;letter-spacing:.03em;display:flex;align-items:center;justify-content:center;gap:8px;opacity:.9}
#nxlive-m .cmp-hint .sw{animation:nxswipe 2.2s ease-in-out infinite}
@keyframes nxswipe{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}

/* tappable anatomy */
#nxlive-m .anat{margin-top:20px}
#nxlive-m .anat-stage{position:relative;width:min(320px,100%);margin:0 auto 18px}
#nxlive-m .anat-stage .ninja{width:100%}
#nxlive-m .anat-ring{position:absolute;border:2px solid var(--cyan);border-radius:10px;z-index:20;pointer-events:none;box-shadow:0 0 0 4px rgba(34,211,238,.18),0 0 18px rgba(34,211,238,.4);transition:all .3s cubic-bezier(.3,.8,.3,1);opacity:0}
#nxlive-m .anat-ring.on{opacity:1}
#nxlive-m .anat-list{display:flex;flex-direction:column;gap:9px}
#nxlive-m .anat-item{border:1px solid var(--line);border-radius:13px;padding:13px 15px;background:rgba(255,255,255,.015);cursor:pointer;transition:.22s;text-align:left;width:100%;appearance:none;color:inherit;font-family:inherit;-webkit-tap-highlight-color:transparent}
#nxlive-m .anat-item.on{border-color:var(--cyan);background:var(--cyan-soft)}
#nxlive-m .anat-item b{font-size:14px;display:flex;align-items:center;font-weight:700}
#nxlive-m .anat-item p{font-size:12.5px;color:var(--dim);margin:4px 0 0;line-height:1.45}
#nxlive-m .anat-item .n{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--cyan-soft);color:var(--cyan);font:800 11px/1 inherit;margin-right:11px;align-items:center;justify-content:center;flex:none}
#nxlive-m .anat-item:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* honesty */
#nxlive-m .honesty{margin-top:16px;display:flex;flex-direction:column;gap:12px}
#nxlive-m .hcard{width:auto;border:1px solid var(--line);border-radius:16px;padding:16px;background:rgba(255,255,255,.015)}
#nxlive-m .hcard .ic{width:32px;height:32px;border-radius:9px;background:var(--cyan-soft);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
#nxlive-m .hcard .ic svg{width:17px;height:17px;stroke:var(--cyan);fill:none;stroke-width:2}
#nxlive-m .hcard b{font-size:14px}
#nxlive-m .hcard p{color:var(--dim);font-size:12.5px;margin:5px 0 0;line-height:1.45}

/* ── overlay replica (nj-*) for the mobile section ── */
#nxlive-m .ninja{width:100%;background:var(--nj-panel);border:2px solid var(--nj-line);border-radius:20px;display:flex;flex-direction:column;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset}
#nxlive-m .nj-top{display:flex;align-items:center;gap:6px;padding:10px 12px}
#nxlive-m .nj-timer{display:flex;align-items:center;gap:6px;background:#173226;border:1px solid #1f4a35;color:#5ee6a1;font:700 12px/1 ui-monospace,Consolas,monospace;padding:6px 10px;border-radius:8px}
#nxlive-m .nj-timer i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 6px #34d399;animation:nxblink 1.6s infinite}
#nxlive-m .nj-ctrls{margin-left:auto;display:flex;gap:5px}
#nxlive-m .nj-btn{width:30px;height:26px;border-radius:7px;background:var(--nj-panel-2);border:1px solid #565e69;color:#cdd5de;font:600 12px/1 inherit;display:flex;align-items:center;justify-content:center}
#nxlive-m .nj-btn.active{background:rgba(34,211,238,.24);border-color:var(--cyan);color:#fff}
#nxlive-m .nj-btn.eye{color:var(--amber);border-color:#8a6d2f;background:rgba(245,177,61,.18)}
#nxlive-m .nj-btn.end{width:auto;padding:0 9px;background:rgba(251,113,133,.2);border-color:#7c3a44;color:#f9a1ad;font-weight:700}
#nxlive-m .nj-body{min-height:216px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16px 18px;position:relative;overflow:hidden}
#nxlive-m .nj-dots{display:flex;gap:7px}
#nxlive-m .nj-dots i{width:8px;height:8px;border-radius:50%;background:var(--cyan);opacity:.35;animation:nxdotkf 1.1s infinite}
#nxlive-m .nj-dots i:nth-child(2){animation-delay:.18s}#nxlive-m .nj-dots i:nth-child(3){animation-delay:.36s}
#nxlive-m .nj-center{display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .25s}
#nxlive-m .nj-listen{color:var(--nj-dim);font-size:13px}
#nxlive-m .nj-scene{position:absolute;inset:14px 16px;opacity:0;transition:opacity .3s;pointer-events:none;display:flex;flex-direction:column}
#nxlive-m .nj-q b{display:block;font-size:10px;letter-spacing:.12em;color:var(--nj-dim);margin-bottom:4px}
#nxlive-m .nj-q p{background:var(--nj-panel-2);border:1px solid #565e69;border-radius:12px;padding:9px 12px;font-size:13px;color:var(--nj-text);line-height:1.4}
#nxlive-m .nj-cap-shot{display:flex;align-items:center;gap:9px;background:var(--nj-panel-2);border:1px solid #565e69;border-radius:12px;padding:8px 10px}
#nxlive-m .nj-cap-shot .thumb{width:52px;height:34px;border-radius:6px;background:#11151b;border:1px solid #565e69;flex:none;position:relative;overflow:hidden}
#nxlive-m .nj-cap-shot .thumb::before{content:"";position:absolute;left:5px;top:5px;right:16px;height:3px;border-radius:2px;background:#4a5666;box-shadow:0 6px 0 -1px #3a4552,0 12px 0 -1px #46525f,0 18px 0 -1px #3a4552}
#nxlive-m .nj-cap-shot .lbl{font-size:11px;color:var(--nj-dim)}
#nxlive-m .nj-cap-shot .lbl b{color:var(--nj-text);font-size:12px;display:block}
#nxlive-m .nj-a{margin-top:10px;opacity:0;transition:.35s;overflow-y:auto;flex:1}
#nxlive-m .nj-a .nj-chip{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(34,211,238,.16);color:var(--cyan);font:800 10px/1 inherit;margin-bottom:8px}
#nxlive-m .stream{font-size:14px;color:var(--nj-text);line-height:1.6;white-space:pre-wrap;margin:0}
#nxlive-m .streaming .stream::after{content:"▌";color:var(--cyan);animation:nxblink 1s infinite}
#nxlive-m .nj-code-head{display:flex;align-items:center;justify-content:space-between;margin:9px 0 5px}
#nxlive-m .nj-code-head span{font:700 10px/1 inherit;letter-spacing:.1em;color:var(--cyan)}
#nxlive-m .nj-code-head .copy{color:var(--nj-dim);border:1px solid #565e69;border-radius:6px;padding:3px 8px;font-size:10px;font-weight:600;cursor:pointer}
#nxlive-m .nj-code{background:var(--code-bg);border-radius:9px;padding:10px 12px;font:12.5px/1.6 ui-monospace,Consolas,monospace;color:#cfd8e3;white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
#nxlive-m .nj-code .k{color:#c792ea}#nxlive-m .nj-code .f{color:#82aaff}#nxlive-m .nj-code .s{color:#c3e88d}#nxlive-m .nj-code .c{color:#5b6b82}
#nxlive-m .nj-cx{margin-top:7px;font-size:11.5px;color:var(--nj-dim)}
#nxlive-m .live .nj-center{opacity:0}#nxlive-m .live .nj-scene{opacity:1}#nxlive-m .live .nj-q,#nxlive-m .live .nj-a{opacity:1;transform:none}
#nxlive-m .nj-foot{display:flex;gap:8px;padding:11px 12px}
#nxlive-m .nj-ask{flex:1;background:rgba(61,67,76,.48);border:1px solid #565e69;border-radius:10px;color:#8d97a3;font-size:13px;padding:9px 12px;display:flex;align-items:center}
#nxlive-m .nj-cap{display:flex;align-items:center;gap:6px;border:1px solid var(--cyan);color:var(--cyan);border-radius:10px;padding:0 13px;font:600 13px/1 inherit;background:rgba(34,211,238,.07);transition:.2s;cursor:pointer}
#nxlive-m .nj-cap.flash{background:var(--cyan);color:#06222a;box-shadow:0 0 16px rgba(34,211,238,.6)}
#nxlive-m .nj-send{width:38px;border-radius:10px;background:rgba(34,211,238,.16);border:1px solid var(--cyan);color:var(--cyan);display:flex;align-items:center;justify-content:center}
/* transparency (frosted glass) */
#nxlive-m .ninja{background:rgba(58,64,73,.6);-webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15);border-color:rgba(148,196,220,.26)}
#nxlive-m .nj-q p,#nxlive-m .nj-cap-shot,#nxlive-m .nj-btn{background:rgba(61,67,76,.6)}
#nxlive-m .nj-btn.active{background:rgba(34,211,238,.24)}
#nxlive-m .nj-btn.eye{background:rgba(245,177,61,.18)}
#nxlive-m .nj-btn.end{background:rgba(251,113,133,.2)}
#nxlive-m .nj-code{background:rgba(30,34,40,.72)}

/* HERO overlay auto-fits its scene so the CODING code block is never clipped:
   the scene flows (drives body height) instead of being absolutely pinned to a
   fixed 216px body; the Listening state overlays on top. The behavioral scene
   still sizes naturally. Scoped to the hero only — slider mini + desktop untouched. */
#nxlive-m .heroninja .nj-body{justify-content:flex-start}
#nxlive-m .heroninja .nj-center{position:absolute;inset:0;justify-content:center}
#nxlive-m .heroninja .nj-scene{position:relative;inset:auto;width:100%}
#nxlive-m .heroninja .nj-a{flex:none;overflow:visible}

/* tablet enhancements (within the mobile section, 600–860px) */
@media (min-width:600px) and (max-width:860px){
  #nxlive-m{padding:40px 46px 60px}
  #nxlive-m h1{font-size:34px;max-width:20ch}
  #nxlive-m .lead{font-size:16px;max-width:52ch}
  #nxlive-m .head{text-align:center;margin:0 auto}
  #nxlive-m .head .lead{margin-left:auto;margin-right:auto}
  #nxlive-m .nxstage{padding:34px 40px 40px;max-width:640px;margin:0 auto}
  #nxlive-m .callback{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}
  #nxlive-m .heroninja{max-width:460px}
  #nxlive-m .heroninja .nj-body{min-height:250px}
  #nxlive-m .band{margin-top:60px}
  #nxlive-m .band h2{font-size:26px}
  #nxlive-m .band .bhead{text-align:center;max-width:56ch;margin:0 auto}
  #nxlive-m .band .bhead p{margin-left:auto;margin-right:auto}
  #nxlive-m .compare{max-width:600px;margin-left:auto;margin-right:auto}
  #nxlive-m .cmp-frame{aspect-ratio:16/10}
  #nxlive-m .cmp-tiles{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}
  #nxlive-m .cmp-yours .ov{left:auto;width:56%;max-width:340px}
  #nxlive-m .cmp-caption{flex-direction:row;justify-content:space-between}
  #nxlive-m .anat{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;max-width:640px;margin:20px auto 0}
  #nxlive-m .anat-stage{margin-top:6px}
  #nxlive-m .honesty{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:640px;margin:16px auto 0}
}
@media (prefers-reduced-motion:reduce){ #nxlive-m *{animation:none!important;transition:none!important} }


/* ══════════ LIVE ON YOUR PHONE (#nxphone) — real app screen, animated ══════════ */
#nxphone{--pa:#00D4FF;--pbg:#050914;--psurf:#0B1528;--psurf2:#101D36;--pborder:#162038;
  --ptext:#E8EDF5;--pmuted:#8A95AA;--psubtle:#828B9E;--psoft:rgba(0,212,255,.12);--pdanger:#FF5A5A;
  padding:70px 24px;position:relative}
#nxphone .ph-inner{max-width:1000px;margin:0 auto}
#nxphone .ph-head{text-align:center;margin-bottom:34px}
#nxphone .eyebrow{font:800 11px/1 sans-serif;letter-spacing:.22em;color:var(--pa);text-transform:uppercase;display:block;margin-bottom:12px}
#nxphone h2{font-size:32px;line-height:1.1;letter-spacing:-.015em;margin:0 0 8px;font-weight:800;color:#e7eff8}
#nxphone h2 em{font-style:normal;color:var(--pa)}
#nxphone .lead{color:#93a3b5;max-width:56ch;margin:0 auto;font-size:15px}
#nxphone .ph-row{display:flex;gap:52px;align-items:center;justify-content:center;flex-wrap:wrap}
#nxphone .ph-points{max-width:310px;display:flex;flex-direction:column;gap:18px}
#nxphone .ph-pt{display:flex;gap:12px;align-items:flex-start}
#nxphone .ph-pt .ph-ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--psoft);border:1px solid rgba(0,212,255,.3);display:flex;align-items:center;justify-content:center;color:var(--pa)}
#nxphone .ph-pt b{display:block;font-size:15px;margin-bottom:2px;color:#e7eff8}
#nxphone .ph-pt p{margin:0;font-size:13px;color:#93a3b5;line-height:1.45}
#nxphone svg{display:block}
#nxphone .ph-phone{width:346px;flex:none;border-radius:48px;padding:13px;background:linear-gradient(160deg,#20262f,#0c1017);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(148,196,220,.12);text-align:left}
#nxphone .ph-screen{position:relative;border-radius:38px;overflow:hidden;background:var(--pbg);height:680px;display:flex;flex-direction:column}
#nxphone .ph-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:104px;height:26px;background:#000;border-radius:0 0 16px 16px;z-index:9}
#nxphone .ph-sbar{display:flex;align-items:center;justify-content:space-between;padding:12px 22px 4px;font:600 13px/1 sans-serif;color:#e6eef7}
#nxphone .ph-sbar .ph-r{display:flex;align-items:center;gap:6px}
#nxphone .ph-app{flex:1;margin:8px;border-radius:26px;background:var(--psurf);border:1px solid var(--pborder);position:relative;overflow:hidden;text-align:left}
#nxphone .ph-app.ph-on::before{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;z-index:1;box-shadow:inset 0 0 0 1px rgba(0,212,255,.5),inset 0 0 22px rgba(0,212,255,.22);animation:phglow 2.4s ease-in-out infinite}
@keyframes phglow{50%{box-shadow:inset 0 0 0 1px rgba(0,212,255,.8),inset 0 0 30px rgba(0,212,255,.34)}}
#nxphone .ph-top{position:absolute;inset-inline:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;z-index:3}
#nxphone .ph-live{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 sans-serif;color:var(--pdanger)}
#nxphone .ph-live i{width:10px;height:10px;border-radius:50%;background:var(--pdanger);box-shadow:0 0 8px var(--pdanger);animation:phbl 1.4s infinite}
@keyframes phbl{50%{opacity:.4}}
#nxphone .ph-tright{display:flex;align-items:center;gap:6px}
#nxphone .ph-seg{display:flex;background:var(--psurf2);border-radius:999px;padding:2px}
#nxphone .ph-seg button{border:0;background:transparent;color:var(--pmuted);font:600 11px/1 sans-serif;padding:5px 8px;border-radius:999px;text-transform:capitalize;cursor:pointer}
#nxphone .ph-seg button.on{background:var(--pa);color:#fff}
#nxphone .ph-gear{width:28px;height:28px;border-radius:50%;background:var(--psurf2);color:var(--pmuted);display:flex;align-items:center;justify-content:center;flex:none}
#nxphone .ph-timer{font:600 13px/1 ui-monospace,monospace;color:var(--pmuted)}
#nxphone .ph-body{position:absolute;inset:0;padding:58px 20px 150px;overflow:hidden;z-index:2;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 50px,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 50px,#000 78%,transparent 100%)}
#nxphone .ph-empty{color:var(--pmuted);font-size:15px;line-height:1.5;margin:0}
#nxphone .ph-hearing{display:block;margin-top:12px;font-size:13.5px;font-style:italic;color:var(--psubtle)}
#nxphone .ph-turn{display:flex;flex-direction:column;gap:7px}
#nxphone .ph-q{align-self:flex-end;max-width:88%;background:var(--psurf2);color:var(--ptext);border-radius:16px 16px 6px 16px;padding:8px 14px;font-size:14px}
#nxphone .ph-q .ph-lbl{display:block;font:600 10px/1 sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--psubtle);margin-bottom:3px}
#nxphone .ph-a{display:flex;align-items:flex-start;gap:8px}
#nxphone .ph-a .ph-av{flex:none;width:24px;height:24px;border-radius:50%;background:var(--psoft);color:var(--pa);display:flex;align-items:center;justify-content:center;font:700 10px/1 sans-serif;margin-top:2px}
#nxphone .ph-a .ph-bub{flex:1;background:var(--psurf);border:1px solid var(--pborder);border-radius:16px 16px 16px 6px;padding:10px 14px;font-size:14px;line-height:1.5;color:#dbe6f2}
#nxphone .ph-car{display:inline-block;width:2px;height:14px;background:var(--pa);vertical-align:-2px;margin-left:1px;animation:phbl .8s infinite}
#nxphone .ph-foot{position:absolute;inset-inline:0;bottom:0;padding:10px 14px 12px;z-index:3}
#nxphone .ph-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:10px}
#nxphone .ph-chip{border-radius:999px;padding:6px 10px;font:500 12px/1 sans-serif;background:var(--psoft);color:var(--pa)}
#nxphone .ph-ctrls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
#nxphone .ph-miccol{grid-column:2;display:flex;flex-direction:column;align-items:center}
#nxphone .ph-mic{width:64px;height:64px;border-radius:50%;background:var(--pa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px var(--psoft)}
#nxphone .ph-mic.ph-pulse{animation:phmp 1.8s ease-in-out infinite}
@keyframes phmp{50%{box-shadow:0 0 26px rgba(0,212,255,.55)}}
#nxphone .ph-miclbl{margin-top:5px;font-size:11px;color:var(--pmuted)}
#nxphone .ph-stop{grid-column:3;justify-self:end;width:48px;height:48px;border-radius:50%;background:var(--pdanger);color:#fff;display:flex;align-items:center;justify-content:center}
#nxphone .ph-nav{height:56px;display:flex;justify-content:space-around;align-items:center;padding:0 6px;background:var(--pbg);border-top:1px solid var(--pborder)}
#nxphone .ph-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:#566173;font:500 10px/1 sans-serif}
#nxphone .ph-nav a.on{color:var(--pa)}
@media(max-width:760px){ #nxphone{padding:54px 18px} #nxphone h2{font-size:26px} #nxphone .ph-row{gap:30px} #nxphone .ph-points{max-width:430px} }
@media (prefers-reduced-motion:reduce){ #nxphone *{animation:none!important} }