:root{--ui:"Geist", -apple-system, system-ui, sans-serif;--ember-ramp:linear-gradient(100deg, #c8102e 0%, #e0563b 55%, #e8944b 100%);--nx-mesh:url("/delivered/4c2ae7c9095f03cd.jpg")}/* ---- the panel: the nx-card glass, verbatim, no shimmer ----------------- */
.nxdP{position:absolute;top:0;right:0;width:344px;height:566px;
  display:flex;flex-direction:column;align-items:center;
  border-radius:16px;overflow:hidden;pointer-events:auto;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,0 18px 40px -26px rgba(0,0,0,.6);
  transform-origin:100% 100%;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);
  animation:nxd-rise .8s cubic-bezier(.22,1,.36,1) both}
.nxdP.is-away{opacity:0;transform:translate(40px,150px) scale(.3);pointer-events:none}
@keyframes nxd-rise{0%{opacity:0;translate:0 18px}100%{opacity:1;translate:0 0}}

.nxd-head{padding:22px 20px 0;text-align:center;flex:none;
  transition:opacity .3s ease,translate .3s ease}
.nxdP.mode-chat .nxd-head{opacity:0;pointer-events:none;translate:0 -8px}
.nxd-head b{font-family:var(--ui,system-ui);font-size:17px;font-weight:600;color:#fff;
  display:flex;align-items:center;gap:9px;justify-content:center}
.nxd-head .sub{display:block;margin-top:5px;font-family:var(--ui,system-ui);
  font-size:12.5px;font-weight:300;line-height:1.45;color:rgba(255,255,255,.78)}

.nxd-req{display:block;margin:15px auto 0;flex:none;position:relative;z-index:4;
  cursor:pointer;font-family:var(--ui,system-ui);font-size:14.5px;font-weight:500;
  color:#fff;background:#c8102e;border:1px solid #c8102e;
  border-radius:var(--r,8px);padding:10px 26px;
  transition:background .3s ease,color .3s ease,border-color .3s ease,
             opacity .3s ease,translate .3s ease}
.nxd-req:hover{background:#fff;border-color:#fff;color:#c8102e}
.nxdP.mode-chat .nxd-req,.nxdP.is-live .nxd-req{
  opacity:0;pointer-events:none;translate:0 -8px}
/* she is live: the request button has done its job, the way into chat
   takes its seat */
.nxd-vline{position:absolute;left:26px;right:26px;top:116px;z-index:4;
  display:flex;align-items:center;gap:10px;
  opacity:0;pointer-events:none;transition:opacity .35s ease .25s}
.nxdP.is-live .nxd-vline{opacity:1;pointer-events:auto}
.nxd-vline > span{flex:1;font-family:var(--ui,system-ui);font-size:11.5px;
  font-weight:300;line-height:1.4;color:rgba(255,255,255,.72)}

/* the cross back to the original screen, chat mode only */
.nxd-x{position:absolute;top:12px;right:12px;z-index:7;
  border:0;background:transparent;color:rgba(255,255,255,.65);
  font-size:21px;line-height:1;cursor:pointer;padding:4px 7px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease .25s,color .2s ease,transform .3s ease}
.nxdP.mode-chat .nxd-x{opacity:1;pointer-events:auto}
.nxd-x:hover{color:#fff;transform:rotate(90deg)}

/* ---- the medallion: one object, FLIP-shrunk between modes --------------- */
.nxd-stage{position:absolute;top:170px;left:50%;width:224px;height:224px;
  margin-left:-112px;z-index:3;pointer-events:none;will-change:transform;
  transition:transform .62s cubic-bezier(.45,.05,.2,1)}
.nxd-stage img{position:absolute;top:-27px;left:50%;transform:translateX(-50%);
  width:260px;max-width:none;display:block;opacity:0;transition:opacity .95s ease}
.nxd-stage img.is-on{opacity:1}
.nxd-ring{position:absolute;inset:-14px;width:calc(100% + 28px);
  height:calc(100% + 28px);overflow:visible;transition:opacity .3s ease}
.nxd-ring rect{fill:url(#nxdGrad);transform-box:fill-box;
  transform-origin:center bottom;transform:scaleY(.3);opacity:.85;
  animation:nxd-eqr 1.6s ease-in-out infinite}
@keyframes nxd-eqr{
  0%{transform:scaleY(.22);opacity:.55}
  50%{transform:scaleY(1);opacity:1}
  100%{transform:scaleY(.22);opacity:.55}
}
.nxd-stage.to-corner .nxd-ring{opacity:0}
/* Speak pressed: the ring surges and a live chip confirms she is on */
.nxdP.is-live .nxd-ring{filter:brightness(1.35) saturate(1.3)}
.nxdP.is-live .nxd-ring rect{animation-duration:.55s !important}
.nxd-livechip{position:absolute;top:396px;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;gap:7px;pointer-events:none;
  font-family:var(--ui,system-ui);font-size:11.5px;font-weight:400;color:#fff;
  background:rgba(200,16,46,.30);border:1px solid rgba(232,148,75,.55);
  border-radius:100px;padding:5px 13px;opacity:0;transition:opacity .3s ease}
.nxdP.is-live .nxd-livechip{opacity:1}
.nxd-livechip::before{content:"";width:7px;height:7px;border-radius:50%;
  background:#e8944b;animation:nxd-pulse 1.2s ease-out infinite}
@keyframes nxd-pulse{
  0%{box-shadow:0 0 0 0 rgba(232,148,75,.6)}
  70%{box-shadow:0 0 0 7px rgba(232,148,75,0)}
  100%{box-shadow:0 0 0 0 rgba(232,148,75,0)}}


/* ---- voice mode: the prompts live outside, ready to be spoken ----------- */
.nxd-asks{position:absolute;left:22px;right:22px;top:430px;z-index:2;
  display:flex;flex-direction:column;gap:7px;
  transition:opacity .3s ease,translate .35s ease}
.nxdP.mode-chat .nxd-asks{opacity:0;translate:0 10px;pointer-events:none}
.nxd-ask{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;
  background:transparent;border:0;padding:5px 2px}
.nxd-ask i{width:6px;height:6px;border-radius:50%;flex:none;font-style:normal;
  background:var(--ember-ramp,linear-gradient(90deg,#c8102e,#e8944b))}
.nxd-ask em{font-style:normal;font-family:var(--ui,system-ui);font-size:12.5px;
  font-weight:300;color:rgba(255,255,255,.88)}
.nxd-ask:hover em{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- chat mode ---------------------------------------------------------- */
.nxd-chat{position:absolute;left:0;right:0;top:14px;bottom:0;z-index:1;
  display:flex;flex-direction:column;padding:12px 14px 14px;min-height:0;
  opacity:0;pointer-events:none;translate:0 14px;
  transition:opacity .4s ease .28s,translate .5s cubic-bezier(.22,1,.36,1) .28s}
.nxdP.mode-chat .nxd-chat{opacity:1;pointer-events:auto;translate:0 0}
/* the invitation back to voice */
.nxd-sline{display:flex;align-items:center;gap:10px;flex:none;margin-bottom:8px}
/* in the hero panel the words go; one centred Speak, the seat at right */
.nxdP .nxd-sline{position:relative;justify-content:center;min-height:44px;
  margin-bottom:10px;padding-right:0}
.nxdP .nxd-sline > span:not(.seat){display:none}
.nxdP .nxd-sline .nxd-sbtn{margin:0 auto}
.nxdP .nxd-sline .seat{position:absolute;right:26px;top:0;margin:0}
.nxd-sline > span{flex:1;font-family:var(--ui,system-ui);font-size:11.5px;
  font-weight:300;line-height:1.4;color:rgba(255,255,255,.72)}
.nxd-sbtn{flex:none;cursor:pointer;font-family:var(--ui,system-ui);font-size:12.5px;
  font-weight:500;padding:6px 18px;border-radius:100px;
  background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  transition:background .25s ease,border-color .25s ease}
.nxd-sbtn:hover{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  border-color:transparent}
/* the seat the medallion shrinks into, top right beside the cross */
.nxd-sline .seat{width:44px;height:44px;flex:none;margin-right:26px}
.nxd-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  padding:4px 2px;min-height:0}
.nxd-log::-webkit-scrollbar{width:0}
.nxd-msg{max-width:84%;padding:8px 13px;border-radius:14px;
  font-family:var(--ui,system-ui);font-size:13px;font-weight:300;
  line-height:1.45;color:#fff}
.nxd-msg.me{background:rgba(255,255,255,.15);align-self:flex-end;
  border-bottom-right-radius:4px}
.nxd-msg.nexy{background:rgba(10,22,44,.55);border:1px solid rgba(255,255,255,.18);
  align-self:flex-start;border-bottom-left-radius:4px}
.nxd-sugg{display:flex;flex-direction:column;gap:6px;flex:none;margin:8px 0 2px}
.nxd-sugg button{text-align:left;cursor:pointer;font-family:var(--ui,system-ui);
  font-size:12px;font-weight:300;color:rgba(255,255,255,.85);
  background:rgba(10,22,44,.42);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;padding:8px 12px;transition:background .25s ease}
.nxd-sugg button:hover{background:rgba(10,22,44,.68)}
.nxd-inrow{display:flex;gap:8px;margin-top:8px;flex:none}
.nxd-inrow input{flex:1;height:40px;min-width:0;
  background:rgba(10,22,44,.5);border:1px solid rgba(255,255,255,.25);
  border-radius:100px;color:#fff;padding:0 16px;outline:none;
  font-family:var(--ui,system-ui);font-size:13px;font-weight:300}
.nxd-inrow input::placeholder{color:rgba(255,255,255,.5)}
.nxd-inrow input:focus{border-color:rgba(255,255,255,.5)}
/* the send arrow, white so it stands out */
.nxd-send{width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid #fff;background:#fff;color:#0a1d33;font-size:15px;
  line-height:1;transition:background .25s ease,color .25s ease}
.nxd-send:hover{
  background:var(--ember-ramp,linear-gradient(100deg,#c8102e,#e0563b 55%,#e8944b));
  border-color:transparent;color:#fff}

/* ---- consent gate ------------------------------------------------------- */
.nxd-consent{position:absolute;inset:0;z-index:8;display:none;
  align-items:center;justify-content:center;padding:26px;
  background:rgba(8,16,32,.72);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);border-radius:inherit}
.nxd-consent.is-open{display:flex;animation:nxd-unfurl .35s cubic-bezier(.22,1,.36,1) both}
.nxd-consent.is-closing{animation:nxd-furl .3s ease both}
.nxd-consent > div{background:rgba(16,28,52,.96);border:1px solid rgba(255,255,255,.24);
  border-radius:14px;padding:20px 18px;text-align:center;max-width:270px}
.nxd-consent p{font-family:var(--ui,system-ui);font-size:12.5px;font-weight:300;
  line-height:1.55;color:rgba(255,255,255,.85);margin:0 0 14px}
.nxd-consent p a{color:#fff;text-decoration:underline}
.nxd-consent button{cursor:pointer;font-family:var(--ui,system-ui);font-size:13px;
  font-weight:500;border-radius:100px;padding:9px 20px}
.nxd-agree{background:#fff;border:1px solid #fff;color:#0a1d33;margin-right:8px}
.nxd-later{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}

/* ---- the dock: a card with presence, not a sliver ----------------------- */
.nxd-pill{position:fixed;right:26px;bottom:26px;z-index:400;cursor:pointer;
  display:flex;align-items:center;gap:15px;text-align:left;
  background:rgba(16,28,52,.55);border:1px solid rgba(255,255,255,.32);
  border-radius:100px;padding:8px 22px 8px 9px;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 60px -22px rgba(0,0,0,.65);
  opacity:0;transform:translateY(30px) scale(.7);transform-origin:100% 100%;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.34,1.4,.64,1) .22s,
             transform .45s cubic-bezier(.34,1.4,.64,1) .22s,
             box-shadow .3s ease}
.nxd-pill:hover{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,
  0 30px 70px -22px rgba(0,0,0,.8)}
.nxd-pill.is-in{opacity:1;transform:none;pointer-events:auto}
.nxd-pill:not(.is-in){transition-delay:0s;transition-duration:.3s}
.nxd-pill.is-tucked{opacity:0;transform:translateY(16px) scale(.72);
  pointer-events:none;transition-delay:0s;transition-duration:.28s}
.nxd-pill .por{position:relative;width:46px;height:46px;flex:none}
.nxd-pill .por::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 210deg,#c8102e,#e0563b,#e8944b,#c8102e);
  animation:nxd-spin 9s linear infinite}
@keyframes nxd-spin{to{transform:rotate(360deg)}}
.nxd-pill img{position:relative;width:46px;height:46px;border-radius:50%;
  object-fit:cover;border:2px solid #101c34;background:#152647;display:block}
.nxd-pill .txt{display:flex;flex-direction:column;gap:2px}
.nxd-pill b{font-family:var(--ui,system-ui);font-size:14px;font-weight:600;
  letter-spacing:-.01em;color:#fff}
.nxd-pill .s2{display:flex;align-items:center;gap:7px;
  font-family:var(--ui,system-ui);font-size:11px;font-weight:300;
  color:rgba(255,255,255,.75)}
.nxd-wave{display:inline-flex;align-items:center;gap:2.5px;height:14px}
.nxd-wave i{width:2.5px;border-radius:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#e8944b,#c8102e));
  animation:nxd-eq 1.1s ease-in-out infinite}
.nxd-wave i:nth-child(1){height:6px}
.nxd-wave i:nth-child(2){height:10px;animation-delay:.18s}
.nxd-wave i:nth-child(3){height:14px;animation-delay:.36s}
.nxd-wave i:nth-child(4){height:9px;animation-delay:.54s}
.nxd-wave i:nth-child(5){height:5px;animation-delay:.72s}
@keyframes nxd-eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* ---- the floating window, on the brand mesh ----------------------------- */
.nxd-float{position:fixed;right:26px;bottom:88px;z-index:401;width:344px;height:500px;
  display:none;flex-direction:column;border-radius:16px;overflow:hidden;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  transform-origin:100% 100%}
.nxd-float.is-open{display:flex;animation:nxd-unfurl .45s cubic-bezier(.22,1,.36,1) both}
.nxd-float.is-closing{animation:nxd-furl .34s cubic-bezier(.55,0,.55,.2) both}
@keyframes nxd-unfurl{0%{opacity:0;transform:translateY(26px) scale(.82)}
  100%{opacity:1;transform:none}}
@keyframes nxd-furl{0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(26px) scale(.82)}}
.nxd-fhead{display:flex;align-items:center;gap:10px;flex:none;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.14)}
.nxd-fhead img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:1px solid rgba(255,255,255,.3);background:#152647}
.nxd-fhead b{font-family:var(--ui,system-ui);font-size:14px;font-weight:600;color:#fff}
.nxd-fhead span{display:block;font-family:var(--ui,system-ui);font-size:11px;
  font-weight:300;color:rgba(255,255,255,.65);margin-top:1px}
.nxd-fx{margin-left:auto;border:0;background:transparent;color:rgba(255,255,255,.6);
  font-size:20px;line-height:1;cursor:pointer;padding:4px 6px;
  transition:color .2s ease,transform .3s ease}
.nxd-fx:hover{color:#fff;transform:rotate(90deg)}
.nxd-fsline{padding:10px 14px 0;flex:none}
.nxd-fbody{position:relative;flex:1;min-height:0}
.nxd-fvoice{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:14px;padding:10px 16px 14px;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.nxd-fasks{display:flex;flex-direction:column;gap:7px;width:100%;margin-top:2px}
.nxd-fasks .nxd-ask{width:100%}
.nxd-float.fmode-voice .nxd-fvoice .nxd-ring{filter:brightness(1.35) saturate(1.3)}
.nxd-float.fmode-voice .nxd-fvoice .nxd-ring rect{animation-duration:.55s !important}
.nxd-fvoice .nxd-livechip{position:static;transform:none;opacity:1}
.nxd-float.fmode-voice .nxd-fvoice{opacity:1;pointer-events:auto}
.nxd-fstage{position:relative;width:180px;height:180px}
.nxd-fstage img{position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  width:209px;max-width:none;display:block}
.nxd-float .nxd-chat{position:absolute;inset:0;top:0;opacity:1;pointer-events:auto;
  translate:0 0;transition:opacity .35s ease}
.nxd-float.fmode-voice .nxd-chat{opacity:0;pointer-events:none}

@media(max-height:830px){
  .nxdP{height:524px}
  .nxd-stage{top:184px;width:172px;height:172px;margin-left:-86px}
  .nxd-stage img{width:200px;top:-21px}
  .nxd-livechip{top:362px}
  .nxd-asks{top:396px}
}
@media(max-width:1119px){.nxdP{display:none}}
@media(max-width:640px){.nxd-float{right:12px;left:12px;width:auto}}
@media(prefers-reduced-motion:reduce){
  .nxdP{animation:none;transition:opacity .3s ease}
  .nxd-ring rect,.nxd-wave i{animation:none}
  .nxd-stage{transition:none}
  .nxd-stage img{transition:none}
}


/* ---- where the whole component sits -------------------------------------
   Left and up, into the channel's own breathing room. Done with margins
   rather than top/right: the host box's `top` is written as an inline
   style by the figure script upstream, which re-measures it against the H1
   on every resize, so anything set there gets overwritten. Margins it does
   not touch. */

@media(max-width:1279px){}

/* ---- the panel stops being a panel ------------------------------------- */
/* ONE CENTRE LINE at x=148: the sphere, the call seat, the CTA and the
   introduction all hang off it. The prompts are the only thing that does
   not, because they are what the composition leans on to the right. */
.nxdP{width:340px;height:496px;background:none;border:1px solid transparent;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  overflow:visible;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             transform .55s cubic-bezier(.22,1,.36,1),
             background .4s ease,border-color .4s ease,box-shadow .4s ease}
/* a conversation needs something to sit on, so the surface returns for the
   thread and leaves again when she goes back to voice */
.nxdP.mode-chat{background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.17);overflow:hidden;
  backdrop-filter:blur(15px) saturate(125%);
  -webkit-backdrop-filter:blur(15px) saturate(125%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset,
             0 18px 40px -26px rgba(0,0,0,.6)}

/* ---- the sphere ---------------------------------------------------------
   The liquid gradient, structure and keyframes as supplied: four radial
   pools over a conic wheel, oversized by 30% so the blur never exposes an
   edge, blurred and slowly translated / rotated / scaled on an alternating
   loop. Recoloured to the teal-and-blue palette sampled off the reference
   rather than the purple it arrived in - swap the six stops below to go
   back. Two things are layered on top of it: a shading pass, because that
   is the difference between a sphere and a disc, and grain, because that
   is the difference between a gradient and a surface. */
.nxd-stage{top:132px;left:47px;margin-left:0;width:246px;height:246px}
.nxd-stage img{display:none !important}
.nxs-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  /* ONE CLOCK. The liquid and the rim shimmer are both derived from
     --ldur, so the rim turns exactly once per full out-and-back of the
     gradient beneath it and the two can never drift apart - including in
     the live state, where --lsp scales both together. */
  --lb:20px;--lsp:1;--ldur:2.14s;background:#2b6f74;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.5))
         drop-shadow(0 0 70px rgba(90,190,210,.20));
  transition:filter .5s ease}
.nxdP.is-live .nxs-orb,.nxd-float.fmode-voice .nxs-orb{--lsp:.42;
  filter:drop-shadow(0 26px 54px rgba(10,60,70,.6))
         drop-shadow(0 0 92px rgba(120,215,230,.38))}

.nxs-liquid{position:absolute;inset:-30%;
  background:
    radial-gradient(circle at 25% 30%, #a9e2ff 0 12%, transparent 36%),
    radial-gradient(circle at 75% 28%, #e5feff 0 10%, transparent 34%),
    radial-gradient(circle at 68% 76%, #234931 0 16%, transparent 43%),
    radial-gradient(circle at 20% 74%, #a2bf7a 0 11%, transparent 38%),
    conic-gradient(
      from 25deg,
      #348289,
      #66bbe2,
      #d9f0e2,
      #2f6b4a,
      #348289
    );
  filter:blur(var(--lb)) saturate(1.56);
  /* 4.7s - half again as quick as the 7s it was, which is where the plane
     stops drifting and starts to move like a fluid under the crop */
  animation:nxs-liquid calc(var(--ldur) * var(--lsp))
            ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid{
  0%   {transform:translate3d(-11%,-9%,0) rotate(-13deg) scale(1.06)}
  50%  {transform:translate3d(12%,8%,0)   rotate(15deg)  scale(1.15)}
  100% {transform:translate3d(-5%,14%,0)  rotate(28deg)  scale(1.09)}
}

/* ---- the second plane, and why -------------------------------------------
   One plane on a loop retraces itself exactly every cycle - you start to
   read the repeat within about twenty seconds, and water never does that.
   A second plane on its own path fixes it, but only if the two durations
   share no common multiple: at 1.618x the phase between them effectively
   never recurs, so the composite never arrives at the same arrangement
   twice. Different pools, different path, half-strength, so it modulates
   the first rather than competing with it. */
.nxs-liquid2{position:absolute;inset:-34%;opacity:.55;
  background:
    radial-gradient(circle at 62% 18%, #d9f0e2 0 14%, transparent 40%),
    radial-gradient(circle at 18% 58%, #66bbe2 0 13%, transparent 38%),
    radial-gradient(circle at 80% 70%, #2f6b4a 0 15%, transparent 42%),
    conic-gradient(from 200deg, #2f6b4a, #348289, #a9e2ff, #348289, #2f6b4a);
  filter:blur(var(--lb)) saturate(1.44);
  animation:nxs-liquid2 calc(var(--ldur) * 1.618 * var(--lsp))
            ease-in-out infinite alternate;
  will-change:transform}
@keyframes nxs-liquid2{
  0%   {transform:translate3d(11%,12%,0)  rotate(17deg)  scale(1.11)}
  50%  {transform:translate3d(-14%,-10%,0) rotate(-13deg) scale(1.05)}
  100% {transform:translate3d(8%,-14%,0)  rotate(-27deg) scale(1.13)}
}
/* Weight into the lower right and a turn at the circumference, so the
   thing reads as a sphere rather than a disc. Deliberately almost no white
   in it - the pale belongs to the gradient pools underneath, and a bright
   overlay here would read as exactly the gloss sweep we do not want. */
.nxs-shade{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 54%),
    radial-gradient(circle at 76% 84%,rgba(6,32,34,.55) 0%,
      rgba(6,32,34,0) 58%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 68%,rgba(5,26,30,.5) 100%)}
/* ---- the gloss ---------------------------------------------------------
   There is no gloss layer to copy: their DOM has only the gradient, the
   canvas and the grain, and the filter over the gradient composites its
   own highlight branch away against an opaque black flood. The sheen is
   inside their shader. So this is built rather than lifted - a glass read,
   held still: a tight specular, the broad cap it sits in, a cool bounce off
   the lower rim, and an inner shadow to close the edge. Nothing sweeps. */
.nxs-gloss{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:
    /* THE CAP. Sampling the reference at the crown gives #defeff, with
       #a9e2ff and #d9f0e2 either side - it is near-white right across the
       top, not a specular dot in one corner. This broad luminous cap is
       what actually reads as shine on their sphere. */
    /* pulled well back: at .92/.52 the cap was bleaching the top half and
       the teal and moss underneath never got a look in. The crown still
       lifts, it just no longer paints over the colour. */
    radial-gradient(ellipse 88% 44% at 46% -16%,
      rgba(255,255,255,.18) 0%,rgba(255,255,255,.08) 26%,
      rgba(255,255,255,.02) 54%,rgba(255,255,255,0) 76%),
    /* the light concentrates a little to the upper left inside that cap */
    radial-gradient(ellipse 40% 26% at 33% 12%,
      rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 100%),
    /* a cool bounce coming back off the lower rim */
    radial-gradient(ellipse 66% 46% at 70% 92%,
      rgba(200,245,255,.16) 0%,rgba(200,245,255,0) 62%);
  /* light does not stop at the crown: a lit edge carries the whole way
     round, so the sphere is glassy on every side and not just the top */
  box-shadow:inset 0 0 34px rgba(4,22,26,.42),
             inset 0 -18px 34px rgba(4,22,26,.34),
             inset 0 0 0 1px rgba(255,255,255,.18),
             inset 0 0 22px rgba(255,255,255,.05)}

/* ---- the shimmer, travelling ACROSS the face -----------------------------
   Not around the circumference - over the whole globe. Two broad soft bands
   at different angles crossing the sphere on different clocks: where they
   overlap the light gathers and where they part it thins, so the surface
   shimmers instead of a single bar of glare sliding past. Both are wide,
   blurred and low-contrast, and the whole layer is masked to fall away at
   the rim, so the light sits on a curved surface rather than on glass. */
.nxs-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  overflow:hidden;
  -webkit-mask:radial-gradient(circle at 50% 50%,
    #000 38%,rgba(0,0,0,.5) 72%,transparent 96%);
  mask:radial-gradient(circle at 50% 50%,
    #000 38%,rgba(0,0,0,.5) 72%,transparent 96%)}
.nxs-sheen i{position:absolute;inset:-70%;display:block;
  filter:blur(var(--sb,16px))}
.nxs-sheen i:nth-child(1){
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 30%,rgba(255,255,255,.19) 50%,
    rgba(255,255,255,0) 70%);
  animation:nxs-sw1 calc(var(--ldur) * 2 * var(--lsp))
            ease-in-out infinite alternate}
.nxs-sheen i:nth-child(2){
  background:linear-gradient(64deg,
    rgba(190,240,255,0) 32%,rgba(190,240,255,.13) 50%,
    rgba(190,240,255,0) 68%);
  animation:nxs-sw2 calc(var(--ldur) * 3 * var(--lsp))
            ease-in-out infinite alternate}
@keyframes nxs-sw1{
  0%   {transform:translate3d(-46%,-22%,0)}
  100% {transform:translate3d(46%,22%,0)}}
@keyframes nxs-sw2{
  0%   {transform:translate3d(42%,-18%,0)}
  100% {transform:translate3d(-42%,18%,0)}}
.nxd-fstage .nxs-sheen i{--sb:11px}
.nxs-av .nxs-sheen i{--sb:3px}
.nxd-fstage .nxs-gloss{box-shadow:inset 0 0 22px rgba(4,22,26,.40),
             inset 0 -9px 19px rgba(4,22,26,.26)}
.nxs-av .nxs-gloss{box-shadow:inset 0 0 7px rgba(4,22,26,.40),
             inset 0 -3px 6px rgba(4,22,26,.26)}

/* their grain, to the letter: an overlay-blended noise tile at half
   opacity, sitting inside a second overlay-blended wrapper, so the blend
   lands twice and the grain bites instead of hazing */
.nxs-grainwrap{position:absolute;inset:0;border-radius:50%;
  pointer-events:none;mix-blend-mode:overlay}
.nxs-grain{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  mix-blend-mode:overlay;opacity:.375;background-size:150px 150px;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='2.2' intercept='-0.3'/></feComponentTransfer></filter><rect width='150' height='150' filter='url(%23n)'/></svg>")}
/* the blur has to track the sphere or the pools resolve into four discs at
   avatar size and into one flat wash at full size */
.nxd-fstage .nxs-orb{--lb:14px}
.nxs-av .nxs-orb{--lb:4px}
.nxs-av .nxs-grain{background-size:56px 56px;opacity:.375}

/* ---- the call seat -----------------------------------------------------
   Placed off the reference: 48px on a 256px sphere, so 18.75% of the
   diameter, centred on the sphere's axis with its own centre sitting
   exactly on the bottom edge - half in, half out. At 280px that is 52px,
   centred at x=148, y=286 (the sphere's bottom). */
.nxs-call{position:absolute;left:170px;top:378px;width:46px;height:46px;
  margin:-23px 0 0 -23px;z-index:5;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(9,18,34,.86);color:#fff;padding:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 5px rgba(9,18,34,.30),0 14px 30px -12px rgba(0,0,0,.7);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),
             background .3s ease,border-color .3s ease}
.nxs-call:hover{transform:scale(1.07);border-color:rgba(255,255,255,.5)}
.nxs-call svg{width:21px;height:21px;display:block}
.nxdP.is-live .nxs-call{background:#c8102e;border-color:#c8102e}
.nxdP.mode-chat .nxs-call{opacity:0;pointer-events:none}
/* ---- the live signal ---------------------------------------------------
   A seat that turns red and grows a voice around it says everything the
   label said, in the place the eye is already looking. So the label goes
   and the wave takes it: bars radiating off the seat's rim, white so they
   hold over both the sphere and the field. Sibling rather than child, to
   keep them clear of the seat's own backdrop-filter. */
.nxdP .nxd-livechip{display:none}
.nxs-wave{position:absolute;left:170px;top:378px;width:76px;height:76px;
  margin:-38px 0 0 -38px;z-index:4;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .35s ease;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.45))}
.nxdP.is-live .nxs-wave{opacity:1}
.nxs-wave rect{fill:#fff;transform-box:fill-box;transform-origin:center bottom;
  animation:nxs-eq 1s ease-in-out infinite}
@keyframes nxs-eq{0%,100%{transform:scaleY(.28);opacity:.5}
  50%{transform:scaleY(1);opacity:1}}

/* ---- three prompts hovering off the shoulder ---------------------------
   They cross the sphere the way they were drawn: left edges aligned just
   past its centre, right edges ragged with the sentence. Dark glass, so
   they read over the bright side of the sphere and over the hero alike. */
/* Right-aligned, so their ends line up and their heads stagger with the
   sentence, and the block is centred on the sphere's middle rather than
   floating against its top. Over the sphere, not under it: the stage sits
   at z-index 3 and the asks shipped at 2. */
.nxd-asks{display:block;left:147px;right:auto;width:270px;top:186px;
  --row:51px;z-index:4;height:calc(var(--row) * 3)}
.nxd-ask{position:absolute;left:0;right:auto;width:auto;max-width:none;
  padding:7px 13px;gap:9px;text-align:left;
  background:rgba(9,18,34,.62);border:1px solid rgba(255,255,255,.2);
  border-radius:100px;
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.75);
  opacity:0;translate:10px 0;pointer-events:none;
  transition:opacity .55s ease,translate .6s cubic-bezier(.22,1,.36,1),
             background .25s ease,border-color .25s ease}
.nxd-ask.is-in{opacity:1;translate:0 0;pointer-events:auto}
.nxd-ask:hover{background:rgba(9,18,34,.86);border-color:rgba(120,215,230,.6)}
.nxd-ask em{white-space:nowrap}
.nxd-ask i{background:linear-gradient(90deg,#66bbe2,#a9e2ff)}
/* Both lists, not just the hero one. These row offsets were scoped to
   .nxd-asks while the dock renders into .nxd-fasks, so the float window got
   absolutely positioned chips with no top at all and stacked all three on
   the same line. */
.nxd-asks .nxd-ask:nth-child(3n+1){left:32px}
.nxd-asks .nxd-ask:nth-child(3n+3){left:14px}
.nxd-asks .nxd-ask:nth-child(3n+1),
.nxd-fasks .nxd-ask:nth-child(3n+1){top:0}
.nxd-asks .nxd-ask:nth-child(3n+2),
.nxd-fasks .nxd-ask:nth-child(3n+2){top:var(--row)}
.nxd-asks .nxd-ask:nth-child(3n+3),
.nxd-fasks .nxd-ask:nth-child(3n+3){top:calc(var(--row) * 2)}
/* No drift. They bobbed up and down on their own clocks, which read as
   restlessness next to a sphere that is already moving - the arrival and
   the departure carry it now, and between the two they hold still. */
.nxdP.mode-chat .nxd-asks{opacity:0;pointer-events:none}

/* ---- the CTA, then the introduction ------------------------------------ */
.nxdP .nxd-req{position:absolute;left:170px;top:420px;margin:0;
  transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;
  white-space:nowrap;font-size:15px;padding:13px 30px;
  box-shadow:0 14px 30px -14px rgba(200,16,46,.9)}
.nxdP.is-live .nxd-req{opacity:1;pointer-events:auto;translate:0 0}
.nxdP.mode-chat .nxd-req{opacity:0;pointer-events:none;translate:0 -8px}
.nxd-req .ar{transition:transform .3s ease}
.nxd-req:hover .ar{transform:translateX(3px)}

/* 50px of clear field under the CTA. At 6px the introduction read as a
   caption hanging off the button instead of its own line of the stack. */
.nxdP .nxd-head{position:absolute;left:0;right:0;width:auto;top:4px;
  padding:0;text-align:center}
.nxd-head .sub{max-width:300px;margin-left:auto;margin-right:auto}

/* the way into typing sits under the introduction, quiet and on the axis */
.nxdP .nxd-vline{top:82px;bottom:auto;left:0;right:0;width:auto;
  justify-content:center;
  opacity:1;pointer-events:auto}
.nxdP .nxd-vline > span{display:none}
.nxdP .nxd-vline .nxd-sbtn{flex:none;font-size:11.5px;font-weight:400;
  padding:5px 15px}
.nxdP.mode-chat .nxd-vline{opacity:0;pointer-events:none}
.nxd-sugg button:nth-child(n+4){display:none}

/* ---- the dock and the float wear the same sphere ------------------------ */
.nxd-fstage img{display:none}
.nxd-fstage .nxs-orb{filter:none}
/* the avatars run the same sphere, just cropped smaller - one implementation
   everywhere, so the agent has one face */
.nxs-av{position:relative;display:block;border-radius:50%;overflow:hidden;
  background:#2b6f74}
.nxs-av .nxs-orb{filter:none}
.nxd-pill .nxs-av{width:46px;height:46px;border:2px solid #101c34}
.nxd-fhead .nxs-av{width:34px;height:34px;border:1px solid rgba(255,255,255,.3)}
.nxd-fasks{position:relative;width:100%;--row:38px;
  height:calc(var(--row) * 3);display:block}
.nxd-fasks .nxd-ask{padding:6px 13px;border-radius:100px;font-size:12px}

@media(max-width:1279px){
  .nxdP{width:300px;height:420px}
  .nxd-stage{top:118px;left:54px;width:192px;height:192px}
  .nxs-call{left:150px;top:310px;width:36px;height:36px;
    margin:-18px 0 0 -18px}
  .nxs-call svg{width:16px;height:16px}
  .nxs-wave{left:150px;top:310px;width:60px;height:60px;
    margin:-30px 0 0 -30px}
  .nxd-asks{left:132px;width:230px;top:157px;--row:40px}
  .nxdP .nxd-req{left:150px;top:350px}
  .nxdP .nxd-head{top:4px}
  .nxd-head .sub{max-width:270px}
  .nxdP .nxd-vline{top:76px}
}
@media(prefers-reduced-motion:reduce){
  .nxd-ask,.nxd-ask.is-in{animation:none;transition:opacity .3s ease}
  .nxs-wave rect{animation:none;transform:scaleY(.62)}
  /* the sphere keeps its colour, its gloss and its lit rim - it just stops */
  .nxs-liquid,.nxs-liquid2,.nxs-sheen i{animation:none}
}

.nxd-track{position:relative}
.nxd-track-in{position:absolute;left:0;right:0;top:0;bottom:0;
  z-index:5;pointer-events:none}
.nxd-host{position:sticky;top:96px;margin-left:auto;
  width:344px;height:566px;pointer-events:none;border-radius:16px;
  background-image:linear-gradient(rgba(9,22,42,.52),rgba(9,22,42,.52)),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:cover,cover;background-position:50% 50%,72% 26%;
  box-shadow:0 26px 64px -34px rgba(0,0,0,.55)}
.nxd-host .nxdP{box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
@media(max-width:1119px){.nxd-host,.nxd-track-in{display:none}}