/* Aries access screen. The form stays independent from the optional scenery. */
.auth-binary-login.magno-orbit-login {
  --orbit-ivory: #f2f1ed;
  --orbit-muted: #a6afb8;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  background: #03060c;
  color: var(--orbit-ivory);
}
.magno-orbit-login::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 21% 31%, #15304770, transparent 43%),
    radial-gradient(ellipse at 58% 9%, #31304535, transparent 36%),
    radial-gradient(ellipse at 80% 80%, #13303b25, transparent 45%),
    linear-gradient(155deg, transparent 30%, #00040b75 70%, #020408);
}
.magno-orbit-login .orbit-brand { position: absolute; z-index: 3; left: 5vw; top: 34px; display: flex; gap: 25px; align-items: center; margin: 0; }
.magno-orbit-login .orbit-brand img { width: 145px; height: auto; filter: invert(1) grayscale(1) brightness(1.55); opacity: .86; }
.magno-orbit-login .orbit-brand span { font: 500 8px/1.5 var(--sans,sans-serif); letter-spacing: .26em; color: #9eabb4; text-transform: uppercase; }
.magno-orbit-login .orbit-stage { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.magno-orbit-login .orbit-canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease; }
.magno-orbit-login.orbit-webgl-ready .orbit-canvas { opacity: 1; }
.magno-orbit-login .orbit-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,410px); align-items: center; gap: clamp(40px,7vw,120px); width: min(1440px,100%); min-height: 100svh; margin: auto; padding: 112px 7vw 90px; pointer-events: none; }
.magno-orbit-login .orbit-intro { align-self: end; padding-bottom: 12px; max-width: 620px; text-shadow: 0 6px 35px #0009; }
.magno-orbit-login .orbit-intro .eyebrow { font-size: 9px; letter-spacing: .32em; color: #aab8c4; margin: 0 0 24px; }
.magno-orbit-login .orbit-intro h1 { font: 400 clamp(46px,5.4vw,80px)/1.05 var(--serif,serif); font-style: normal; letter-spacing: -.025em; margin: 0 0 24px; color: #f2f1ed; }
.magno-orbit-login .orbit-intro > p:last-child { color: #abb6c0; font: 16px/1.6 var(--serif,serif); margin: 0; }
.magno-orbit-login .orbit-form.auth-glass { pointer-events: auto; position: relative; width: 100%; margin: 0; padding: 38px 34px; border: 1px solid #e2edff26; border-radius: 26px; background: linear-gradient(145deg,#c4ddff0d,#11182338 65%); box-shadow: 0 32px 85px #0005,inset 0 1px #ffffff16; backdrop-filter: blur(28px) saturate(1.1); -webkit-backdrop-filter: blur(28px) saturate(1.1); transform: none; opacity: 1; }
.magno-orbit-login .orbit-form.auth-glass:before { left: 12%; width: 46%; background: linear-gradient(90deg,transparent,#dbeaff65,transparent); }
.magno-orbit-login .orbit-form .eyebrow { font-size: 8px; letter-spacing: .25em; margin: 0 0 17px; color: #a7b5c1; }
.magno-orbit-login .orbit-form h2 { font-size: 39px; letter-spacing: -.035em; margin: 0 0 30px; color: var(--orbit-ivory); }
.magno-orbit-login .orbit-form label { color: #c7d0d8; font-size: 10px; letter-spacing: .1em; margin-bottom: 18px; }
.magno-orbit-login .orbit-form input { height: 54px; min-height: 48px; margin-top: 9px; border: 1px solid #d7e6ff30; border-radius: 12px; background: #03070e90; color: #f7f7f5; box-shadow: inset 0 1px 12px #0002; transition: border-color .2s,box-shadow .2s; }
.magno-orbit-login .orbit-form input:focus { outline: 2px solid #c1d4e4; outline-offset: 3px; border-color: #b6ccdf; box-shadow: 0 0 0 6px #b6ccdf0b; }
.magno-orbit-login .orbit-form .pin-input { font-size: 27px; letter-spacing: .42em; text-align: center; font-variant-numeric: tabular-nums; }
.magno-orbit-login .orbit-form .auth-submit { height: 53px; min-height: 48px; margin: 8px 0 16px; padding: 14px 18px; border-radius: 12px; border: 1px solid #dae9ff57; background: linear-gradient(135deg,#c9e3ff28,#88abcf0c); color: #f3f6fb; box-shadow: inset 0 1px #ffffff30,0 8px 22px #0003; font-size: 11px; letter-spacing: .08em; transition: background .2s,transform .2s,box-shadow .2s; }
.magno-orbit-login .orbit-form .auth-submit:hover { background: linear-gradient(135deg,#c9e3ff3d,#88abcf1e); box-shadow: inset 0 1px #ffffff50,0 0 24px #8cb2db12; transform: translateY(-1px); }
.magno-orbit-login .orbit-form .auth-submit:disabled { opacity: .55; transform: none; cursor: wait; }
.magno-orbit-login .orbit-form .hint { margin: 0; color: #a0adba; font-size: 11px; line-height: 1.6; }
.magno-orbit-login .orbit-form .error { margin: 12px 0 0; color: #ffbbb2; font-size: 12px; line-height: 1.5; }
.magno-orbit-login .orbit-form .error:empty { display: none; }
/* SVG holds the same star map on devices without WebGL. */
.magno-orbit-login .orbit-fallback.aries-fallback { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; opacity: 1; transition: opacity .5s; }
.magno-orbit-login .aries-fallback-svg { display: block; width: 100%; height: 100%; }
.magno-orbit-login.orbit-webgl-ready .orbit-fallback { opacity: 0; visibility: hidden; }
@media (max-width: 900px) {
  .magno-orbit-login .orbit-brand { left: 28px; top: 26px; }
  .magno-orbit-login .orbit-brand img { width: 128px; }
  .magno-orbit-login .orbit-brand span { display: none; }
  .magno-orbit-login .orbit-layout { grid-template-columns: 1fr; align-content: center; justify-items: center; gap: 26px; width: min(520px,100%); padding: 230px 28px 38px; }
  .magno-orbit-login .orbit-intro { justify-self: center; align-self: auto; text-align: center; padding: 0; max-width: none; }
  .magno-orbit-login .orbit-intro .eyebrow { display: none; }
  .magno-orbit-login .orbit-intro h1 { font-size: 43px; margin: 0 0 13px; line-height: 1.03; }
  .magno-orbit-login .orbit-intro > p:last-child { font-size: 14px; }
  .magno-orbit-login .orbit-form.auth-glass { max-width: 440px; padding: 28px; background: linear-gradient(145deg,#18243188,#060b15a8); }
  .magno-orbit-login .orbit-form h2 { font-size: 33px; margin-bottom: 23px; }
}
@media (max-width: 480px) {
  .magno-orbit-login .orbit-layout { padding: 210px 20px 28px; gap: 24px; }
  .magno-orbit-login .orbit-brand { left: 22px; top: 21px; }
  .magno-orbit-login .orbit-brand img { width: 114px; }
  .magno-orbit-login .orbit-intro h1 { font-size: clamp(33px,10vw,42px); }
  .magno-orbit-login .orbit-form.auth-glass { border-radius: 22px; padding: 24px; }
  .magno-orbit-login .orbit-form .eyebrow { margin-bottom: 13px; }
  .magno-orbit-login .orbit-form h2 { font-size: 31px; margin-bottom: 22px; }
}
@media (max-height: 740px) and (max-width: 900px) {
  .magno-orbit-login .orbit-layout { align-content: start; padding-top: 166px; gap: 20px; }
  .magno-orbit-login .orbit-intro h1 { font-size: 34px; }
  .magno-orbit-login .orbit-form.auth-glass { padding: 22px; }
}
@media (max-height: 720px) and (min-width: 901px) {
  .magno-orbit-login .orbit-brand { top: 23px; }
  .magno-orbit-login .orbit-layout { padding-top: 86px; padding-bottom: 40px; }
  .magno-orbit-login .orbit-intro h1 { font-size: clamp(43px,5vw,66px); }
  .magno-orbit-login .orbit-form.auth-glass { padding: 28px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .magno-orbit-login .orbit-canvas,.magno-orbit-login .orbit-fallback,.magno-orbit-login .orbit-form .auth-submit { transition: none; }
  .magno-orbit-login .orbit-form .auth-submit:hover { transform: none; }
}
