/* Nexus access: approved 62/38 composition and lighting on the locked X master. */
#nexus-cabinet-demo .nx-auth {
  --nx-auth-split: 62vw;
  --nx-pointer-x: 50%;
  --nx-pointer-y: 45%;
  position: relative;
  isolation: isolate;
  display: block;
  grid-template-columns: none;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  color: #f6f5f8;
  background: radial-gradient(ellipse at 54% 53%, #111018 0, #08080b 35%, #050507 72%);
}
#nexus-cabinet-demo .nx-auth::before,
#nexus-cabinet-demo .nx-auth::after,
#nexus-cabinet-demo .nx-auth-panel::before { content: none; }
#nexus-cabinet-demo .nx-auth-brand {
  position: absolute;
  z-index: 3;
  top: 38px;
  left: 42px;
  display: block;
}
#nexus-cabinet-demo .nx-auth-brand img {
  display: block;
  width: clamp(184px, 15vw, 240px);
  height: auto;
}
#nexus-cabinet-demo .nx-auth-brand span,
#nexus-cabinet-demo .nx-auth-mobile-logo { display: none; }
#nexus-cabinet-demo .nx-auth-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: none;
  mask: none;
}
#nexus-cabinet-demo .nx-auth-x {
  --nx-x-width: min(1215.4px, 108.56vh);
  --nx-x-rest-opacity: .95;
  position: absolute;
  z-index: 1;
  width: var(--nx-x-width);
  aspect-ratio: 532 / 423;
  left: calc(var(--nx-auth-split) - var(--nx-x-width) / 2 - 80px);
  top: 50%;
  transform: translateY(-50%);
  opacity: .95;
  transition: opacity 240ms ease;
  animation: nx-access-light-on 650ms ease-out backwards;
}
#nexus-cabinet-demo .nx-auth-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: var(--nx-auth-split);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  animation: nx-access-atmosphere-on 900ms ease-out both;
}
#nexus-cabinet-demo .nx-auth-atmosphere > svg {
  display: block;
  width: 100%;
  height: 100%;
}
#nexus-cabinet-demo .nx-auth-x > svg {
  display: block;
  width: 100%;
  height: 100%;
}
#nexus-cabinet-demo .nx-auth-svg-pointer {
  opacity: .5;
  transition: opacity 240ms ease;
}
#nexus-cabinet-demo .nx-auth.is-focused .nx-auth-x,
#nexus-cabinet-demo .nx-auth.is-login-focus .nx-auth-x,
#nexus-cabinet-demo .nx-auth.is-password-focus .nx-auth-x { opacity: .72; }
#nexus-cabinet-demo .nx-auth.is-focused .nx-auth-svg-pointer,
#nexus-cabinet-demo .nx-auth.is-login-focus .nx-auth-svg-pointer,
#nexus-cabinet-demo .nx-auth.is-password-focus .nx-auth-svg-pointer { opacity: .15; }
#nexus-cabinet-demo .nx-auth.is-focused .nx-auth-form-shell,
#nexus-cabinet-demo .nx-auth.is-login-focus .nx-auth-form-shell,
#nexus-cabinet-demo .nx-auth.is-password-focus .nx-auth-form-shell { animation: none; }
#nexus-cabinet-demo .nx-auth-panel {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--nx-auth-split));
  min-height: 100vh;
  min-height: 100svh;
  margin-left: var(--nx-auth-split);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 120px 32px 72px;
  background: linear-gradient(100deg, #101016 0, #09090d 28%, #060608 72%);
  backdrop-filter: none;
}
#nexus-cabinet-demo .nx-auth-form-shell {
  width: 100%;
  max-width: 440px;
  min-width: 0;
  margin: 0;
  transform: none;
  animation: nx-access-form-on 180ms ease-out both;
}
#nexus-cabinet-demo .nx-auth-kicker {
  display: block;
  margin: 0 0 22px;
  color: #f6f5f8;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#nexus-cabinet-demo .nx-auth-form-shell h1 {
  margin: 0 0 40px;
  font-size: clamp(56px, 5.3vw, 88px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.045em;
}
#nexus-cabinet-demo .nx-auth-form {
  display: grid;
  gap: 18px;
  margin: 0;
}
#nexus-cabinet-demo .nx-auth-field-wrap {
  position: relative;
  display: grid;
  gap: 9px;
  margin: 0;
}
#nexus-cabinet-demo .nx-auth-field-wrap > span {
  color: #f6f5f8;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color 140ms ease;
}
#nexus-cabinet-demo .nx-auth-field-wrap:focus-within > span { color: #d9bdff; }
#nexus-cabinet-demo .nx-auth-input {
  display: block;
  min-width: 0;
  width: 100%;
  height: 58px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid #434149;
  border-radius: 4px;
  background: rgb(5 5 8 / .48);
  color: #f6f5f8;
  font-size: 16px;
  line-height: normal;
  outline: none;
  box-shadow: 0 0 0 1px transparent, 0 0 24px transparent;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
#nexus-cabinet-demo .nx-auth-input::placeholder { color: #9f9ba7; opacity: 1; }
#nexus-cabinet-demo .nx-auth-input:hover { border-color: #6d647b; }
#nexus-cabinet-demo .nx-auth-input:focus,
#nexus-cabinet-demo .nx-auth-input:focus-visible {
  outline: none;
  border-color: #ab7af7;
  background: #0e0b15;
  box-shadow: 0 0 0 1px rgb(171 122 247 / .14), 0 0 24px rgb(124 58 237 / .08);
}
#nexus-cabinet-demo .nx-auth-input[aria-invalid="true"] {
  border-color: #dd8799;
  box-shadow: 0 0 0 1px rgb(221 135 153 / .1);
}
#nexus-cabinet-demo .nx-auth-input:disabled { opacity: .85; }
#nexus-cabinet-demo .nx-auth-input:-webkit-autofill {
  -webkit-text-fill-color: #f6f5f8;
  box-shadow: 0 0 0 1000px #100b18 inset;
}
#nexus-cabinet-demo #nx-auth-password { padding-right: 58px; }
#nexus-cabinet-demo .nx-auth-password-toggle {
  position: absolute;
  top: auto;
  right: 7px;
  bottom: 7px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #e8e5ee;
  transform: none;
  transition: color 140ms ease, background-color 140ms ease;
}
#nexus-cabinet-demo .nx-auth-password-toggle:hover {
  background: rgb(167 122 239 / .08);
  color: #d9bdff;
  transform: none;
}
#nexus-cabinet-demo .nx-auth-password-toggle:focus-visible {
  outline: 2px solid #c49aff;
  outline-offset: -2px;
}
#nexus-cabinet-demo .nx-auth-password-toggle svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 120ms ease;
}
#nexus-cabinet-demo .nx-auth-submit {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
  margin-top: 6px;
  padding: 14px 50px;
  border: 1px solid #7541f8;
  border-radius: 4px;
  background: #6023f2;
  color: #fff;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
  transform: none;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
#nexus-cabinet-demo .nx-auth-submit:hover {
  background: #753bfa;
  border-color: #9867ff;
  transform: none;
  box-shadow: 0 0 24px rgb(110 54 247 / .12);
}
#nexus-cabinet-demo .nx-auth-submit:active {
  background: #4e19d4;
  border-color: #6830ec;
  transform: none;
}
#nexus-cabinet-demo .nx-auth-submit:focus-visible { outline: 2px solid #d0adff; outline-offset: 4px; }
#nexus-cabinet-demo .nx-auth-submit:disabled { opacity: 1; background: #5725ce; color: #f2eafb; cursor: wait; }
#nexus-cabinet-demo .nx-auth-submit span { transition: opacity 120ms ease; }
#nexus-cabinet-demo .nx-auth-submit.is-loading span { opacity: 1; }
#nexus-cabinet-demo .nx-auth-submit.is-loading::after {
  content: "";
  position: absolute;
  inset: auto 22px auto auto;
  top: calc(50% - 9px);
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid rgb(255 255 255 / .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: nx-access-spin 750ms linear infinite;
}
#nexus-cabinet-demo .nx-auth-error {
  min-height: 21px;
  margin: 0;
  color: #ffc0ca;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#nexus-cabinet-demo .nx-auth-divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--nx-auth-split);
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, #2d1c47 0%, #8f50ed 22%, #a369fa 50%, #8f50ed 79%, #2d1c47 100%);
  box-shadow: 0 0 16px 2px rgb(126 57 225 / .28);
}
#nexus-cabinet-demo .nx-auth-preview-note {
  position: absolute;
  z-index: 5;
  top: 24px;
  right: 28px;
  margin: 0;
  color: #aaa5b4;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .035em;
  display: flex;
  align-items: center;
  gap: 14px;
}
#nexus-cabinet-demo .nx-auth-preview-note button {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #493653;
  border-radius: 4px;
  color: #d3b4fa;
  background: #140f1d;
  font-size: 11px;
  cursor: pointer;
}
#nexus-cabinet-demo .nx-auth-preview-note button:focus-visible {
  outline: 2px solid #c49aff;
  outline-offset: 3px;
}
#nexus-cabinet-demo .nx-auth.is-transitioning {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  min-height: 100vh;
  background: transparent;
  pointer-events: none;
}
#nexus-cabinet-demo .nx-auth.is-transitioning .nx-auth-visual {
  width: var(--nx-auth-split);
  background: radial-gradient(ellipse at 54% 53%, #111018 0, #08080b 35%, #050507 72%);
  background-size: 100vw 100%;
  background-repeat: no-repeat;
}
#nexus-cabinet-demo .nx-auth.is-transitioning .nx-auth-divider { visibility: hidden; }
#nexus-cabinet-demo .nx-auth-transition-line {
  position: fixed;
  z-index: 101;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, #2d1c47 0%, #8f50ed 22%, #a369fa 50%, #8f50ed 79%, #2d1c47 100%);
  box-shadow: 0 0 16px 2px rgb(126 57 225 / .4);
  pointer-events: none;
}
#nexus-cabinet-demo .nx-cabinet-shell.is-entering { animation: none; transform: none; filter: none; }
/* The incoming overview is already laid out behind the moving boundary. */
#nexus-cabinet-demo.nx-auth-arrived .nx-overview,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview *,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview *::before,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview *::after,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview > *,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-cockpit-head,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-cockpit-primary > *,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-cockpit-rail > *,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-player-track-segments li,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-position-grid dd,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-core-orbit,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-core-axis,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-core-node,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-core-center,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-league-route::before,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-league-route .is-current::before,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-level-scale span,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-path-levels::after,
#nexus-cabinet-demo.nx-auth-arrived .nx-overview .nx-path-levels li {
  animation-duration: 1ms;
  animation-delay: -2ms;
  animation-iteration-count: 1;
}
@keyframes nx-access-form-on { from { opacity: .5; } to { opacity: 1; } }
@keyframes nx-access-light-on { from { opacity: 0; filter: brightness(.6); } to { opacity: var(--nx-x-rest-opacity); filter: brightness(1); } }
@keyframes nx-access-atmosphere-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-access-spin { to { transform: rotate(360deg); } }
@media (min-width: 801px) and (max-width: 1100px) {
  #nexus-cabinet-demo .nx-auth-x { --nx-x-width: min(1030px, 92vh); }
  #nexus-cabinet-demo .nx-auth-brand { top: 32px; left: 30px; }
  #nexus-cabinet-demo .nx-auth-panel { padding-right: 28px; padding-left: 28px; }
  #nexus-cabinet-demo .nx-auth-form-shell h1 { font-size: 64px; }
  #nexus-cabinet-demo .nx-auth-kicker { font-size: 12px; }
}
@media (min-width: 801px) and (max-aspect-ratio: 4/3) {
  #nexus-cabinet-demo .nx-auth-x { --nx-x-width: min(1030px, 92vh); }
}
@media (max-width: 800px) {
  #nexus-cabinet-demo .nx-auth { --nx-auth-split: 0px; }
  #nexus-cabinet-demo .nx-auth.is-transitioning {
    background: radial-gradient(ellipse at 54% 53%, #111018 0, #08080b 35%, #050507 72%);
  }
  #nexus-cabinet-demo .nx-auth.is-transitioning .nx-auth-visual { width: 100%; }
  #nexus-cabinet-demo .nx-auth-atmosphere { width: 100%; opacity: .45; animation: none; }
  #nexus-cabinet-demo .nx-auth-brand { display: block; top: 25px; left: 24px; }
  #nexus-cabinet-demo .nx-auth-brand img { width: 176px; }
  #nexus-cabinet-demo .nx-auth-x {
    --nx-x-width: 620px;
    --nx-x-rest-opacity: .16;
    left: calc(50% - 310px);
    top: -75px;
    transform: none;
    opacity: .16;
    animation: nx-access-light-on 650ms ease-out backwards;
  }
  #nexus-cabinet-demo .nx-auth.is-focused .nx-auth-x,
  #nexus-cabinet-demo .nx-auth.is-login-focus .nx-auth-x,
  #nexus-cabinet-demo .nx-auth.is-password-focus .nx-auth-x { opacity: .1; }
  #nexus-cabinet-demo .nx-auth-svg-pointer { display: none; }
  #nexus-cabinet-demo .nx-auth-panel {
    width: 100%;
    margin-left: 0;
    align-items: center;
    padding: 130px 24px 60px;
    background: linear-gradient(180deg, transparent 0, rgb(6 6 8 / .52) 170px, #08080c 420px);
  }
  #nexus-cabinet-demo .nx-auth-form-shell { width: 100%; max-width: 440px; margin: 0; }
  #nexus-cabinet-demo .nx-auth-form-shell h1 { font-size: 64px; margin: 0 0 34px; }
  #nexus-cabinet-demo .nx-auth-kicker { margin-bottom: 18px; font-size: 12px; }
  #nexus-cabinet-demo .nx-auth-form { gap: 18px; }
  #nexus-cabinet-demo .nx-auth-divider { display: none; }
  #nexus-cabinet-demo .nx-auth-preview-note { top: 14px; right: 16px; font-size: 9px; }
  #nexus-cabinet-demo .nx-auth-preview-note > span { display: none; }
}
@media (max-width: 380px) {
  #nexus-cabinet-demo .nx-auth-form-shell h1 { font-size: 60px; }
  #nexus-cabinet-demo .nx-auth-input { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-atmosphere { animation: none; }
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-form-shell,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-x { animation: none; }
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-svg-glint,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-svg-pointer { display: none; }
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-x,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-input,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-password-toggle,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-password-toggle svg,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-submit,
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-submit span { transition: none; }
  #nexus-cabinet-demo:not([data-access-motion="full"]) .nx-auth-submit.is-loading::after { animation: none; }
}
#nexus-cabinet-demo[data-access-motion="off"] .nx-auth-x,
#nexus-cabinet-demo[data-access-motion="off"] .nx-auth-form-shell,
#nexus-cabinet-demo[data-access-motion="off"] .nx-auth-atmosphere { animation: none; }
#nexus-cabinet-demo[data-access-motion="off"] .nx-auth-svg-glint,
#nexus-cabinet-demo[data-access-motion="off"] .nx-auth-svg-pointer { display: none; }
