/* Any device: one always-on server, the same Axis on an iPad, a MacBook and an iPhone.
   One pulse splits three ways and the same notification lands on every screen at once. */
.nxd{max-width:640px;margin-inline:auto}
.nxd-stage{position:relative;aspect-ratio:100/84}
.nxd-tall{display:none}
.nxd-stage>*:not(svg){position:absolute}

.nxd-server{left:37.5%;top:0;width:25%;--nx-pool:.4}
.nxd-led{left:44%;top:56%;width:52%;height:14%;transform:rotate(-13deg);opacity:.45}
.nxd-cap{left:66%;top:4.5%}
.nxd-on{display:flex;align-items:center;gap:7px;margin:7px 0 0;font:500 13px/1.2 'DM Sans',sans-serif;color:#c9cfcc}
.nxd-on .nx-dot{width:6px;height:6px}

/* devices: official Apple bezels; screens are containers so they can hold live Axis UI */
.nxd-dev{margin:0;container-type:inline-size}
.nxd-bezel{position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none;user-select:none}
.nxd-screen{position:absolute;z-index:1;overflow:hidden;background:#07090a}
.nxd-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.nxd-ipad{left:0;top:38.8%;width:46%;aspect-ratio:3000/2300;z-index:1;filter:drop-shadow(0 22px 30px rgba(0,0,0,.75))}
.nxd-ipad .nxd-screen{left:4.133%;top:5.13%;width:91.8%;height:89.7%;border-radius:2.4%/3.2%}
.nxd-mac{left:20%;top:44.5%;width:60%;aspect-ratio:3/2;z-index:2;filter:drop-shadow(0 28px 34px rgba(0,0,0,.8))}
.nxd-mac .nxd-screen{left:9.4366%;top:10.669%;width:81.1268%;height:78.662%}
.nxd-phone{left:80%;top:50.2%;width:17.2%;aspect-ratio:800/1633;z-index:3;filter:drop-shadow(-12px 22px 26px rgba(0,0,0,.85))}
.nxd-phone .nxd-screen{left:5.102%;top:2.2%;width:89.796%;height:95.6%;border-radius:13%/6.2%}
.nxd-floor{left:6%;right:6%;top:84%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(55,205,188,.3),rgba(55,205,188,0));filter:blur(18px);z-index:0}

/* the shared notification, sized to each screen */
.nxd-toast{position:absolute;z-index:3;display:flex;align-items:center;gap:.7em;padding:.6em .9em .6em .6em;border-radius:.9em;background:rgba(18,23,24,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 .8em 2em rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;font-family:'DM Sans',sans-serif;opacity:0}
.nxd-toast b{display:block;font-size:1em;font-weight:600;color:#eef2f0;letter-spacing:-.01em;line-height:1.2}
.nxd-toast small{display:block;font-size:.82em;color:#97a19e;line-height:1.2;margin-top:.15em}
.nxd-toast .nx-tick{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:var(--nx-teal);color:#04201c;flex:none}
.nxd-toast .nx-tick svg{width:62%;height:62%}
.nxd-mac .nxd-toast{right:12%;top:14%;font-size:2.15cqi}
.nxd-ipad .nxd-toast{right:7%;top:9%;font-size:2.6cqi}
.nxd-phone .nxd-toast{left:7%;right:7%;top:8%;font-size:6.6cqi;padding:.55em .6em .55em .5em;gap:.5em}
.nxd-phone .nxd-toast>span:last-child{min-width:0}
.nxd-phone .nxd-toast b{overflow:hidden;text-overflow:ellipsis}

@keyframes nxd-land{0%,27%{opacity:0;translate:0 -.6em;scale:.97}32%,90%{opacity:1;translate:none;scale:none}96%,100%{opacity:0;translate:0 -.3em}}
.nx.is-live .nxd-toast{animation:nxd-land var(--nx-cycle) cubic-bezier(.2,.8,.2,1) infinite}
.nx.is-live .nxd-led{--o0:.45;--o1:.45;animation:nx-boot var(--nx-cycle) ease-out infinite}
@media (prefers-reduced-motion:reduce){.nxd-toast{opacity:1}}

@media (max-width:560px){
  .nxd{max-width:420px}
  .nxd-stage{aspect-ratio:100/112;--nx-fw:.45;--nx-rw:.7}
  .nxd-wide{display:none}.nxd-tall{display:block}
  .nxd-server{left:32%;width:36%}
  .nxd-cap{left:71%;top:3%}
  .nxd-cap .nx-cap{font-size:9px;letter-spacing:.14em}
  .nxd-on{font-size:11.5px}
  .nxd-mac{left:8%;top:30%;width:84%}
  .nxd-ipad{left:0;top:62%;width:44%;z-index:3}
  .nxd-phone{left:78%;top:55%;width:20%;z-index:4}
  .nxd-floor{top:88%}
}

/* real-UI screens (any-device.js): rendered at a real pane width, scaled to the bezel */
.nxd-screen>.nxd-fit{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;background:#07090a}
.nxd-fit .nxd-pane{flex:1;min-height:0;height:100%}
.nxd-row{display:flex;height:100%}
.nxd-row>.nxd-pane{flex:none}
.nxd-row>.nxd-pane+.nxd-pane{border-left:1px solid rgba(255,255,255,.07)}
.nxd-status{flex:none;height:52px;background:var(--ax-side,#0e1213)}
.nxd-phone .nxd-fit .nxd-pane{height:auto}