.auth-shell main:has(> .login-page) {
  min-height: 100svh;
  display: grid;
  align-content: center;
  background: radial-gradient(ellipse at 100% 0%, #192d74 0, transparent 34%),
              radial-gradient(ellipse at 88% 84%, #071b59 0, transparent 35%),
              #030a1e;
  color: #f5f8ff;
}

.login-page {
  --login-gutter: clamp(25px, 4.5vw, 78px);
  --login-edge: calc(var(--login-gutter) + max(0px, (100vw - 1740px) / 2));
  --login-inset: clamp(28px, 6vh, 70px);
  width: 100%;
  min-height: 100svh;
  margin-inline: auto;
  padding: var(--login-inset) var(--login-edge);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 64px);
  overflow: clip;
}

.login-story {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding-inline-start: clamp(0px, 1.6vw, 28px);
  padding-block: 0 3px;
}

.login-story::before,
.login-rug-motion {
  position: absolute;
  z-index: -1;
  inset: calc(-1 * var(--login-inset)) -65px calc(-1 * var(--login-inset)) calc(-1 * var(--login-edge));
  mask-image: linear-gradient(90deg, #000 78%, transparent);
}

.login-story::before {
  content: "";
  background: linear-gradient(90deg, transparent 79%, #030a1e 100%),
              linear-gradient(0deg, #030a1e 0%, #030a1e00 21%),
              url("login-rug-wave.webp") 61% center / cover no-repeat;
}

.login-rug-motion {
  --rug-x: .61;
  --rug-y: .5;
  --rug-y-offset: 0;
  visibility: hidden;
  pointer-events: none;
}
.login-rug-motion[data-ready] { visibility: visible; }
.login-story:has(.login-rug-motion[data-ready])::before { visibility: hidden; }
.login-rug-motion canvas { display: block; width: 100%; height: 100%; }
.login-rug-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 79%, #030a1e 100%),
              linear-gradient(0deg, #030a1e 0%, #030a1e00 21%);
}

.login-story::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% -7% 13% calc(-1 * var(--login-edge));
  border-radius: 50%;
  border-bottom: 1px solid #16a9fc85;
  background: radial-gradient(ellipse at 44% 94%, #167dff49, transparent 38%);
  transform: rotate(-16deg);
  opacity: .53;
  pointer-events: none;
}

.login-brand {
  position: relative;
  display: block;
  width: clamp(135px, 14vw, 220px);
  aspect-ratio: 1513 / 1040;
}

.login-brand img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }

.login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(#0874ff 0 66%, #f5f8ff 66% 84.3%, #a8d8ff 84.3%);
  mask: url("logo.png") center / contain no-repeat;
}

.login-story-title {
  margin: clamp(22px, 5.4vh, 63px) 0 0;
  color: #f5f8ff;
  font-size: clamp(46px, 5.75vw, 100px);
  font-weight: 800;
  line-height: .97;
  letter-spacing: -.065em;
}

.login-story-title span {
  display: block;
  width: fit-content;
  color: #53e7ff;
  background: linear-gradient(100deg, #5bffff, #35a5ff 90%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-story-caption {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: auto 0 0;
  padding-top: 34px;
  color: #eef6ff;
  font-size: clamp(11px, 1.2vw, 16px);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.login-story-caption::before { content: ""; width: clamp(24px, 3vw, 58px); height: 2px; background: #34f1ff; }

.login-panel {
  align-self: center;
  position: relative;
  isolation: isolate;
  padding: clamp(30px, 4.35vw, 68px);
  border: 1px solid #4e83bb;
  border-top-color: #6feaff;
  border-bottom-color: #27a7fb;
  border-radius: clamp(26px, 3vw, 48px);
  background: radial-gradient(ellipse at 0 0, #05cce842, transparent 29%),
              radial-gradient(ellipse at 100% 100%, #0659ff52, transparent 40%),
              radial-gradient(ellipse at 89% 0%, #16458482, transparent 46%),
              linear-gradient(145deg, #06203b, #03152b 67%, #051c3b);
  box-shadow: inset 0 0 32px #1568d52b, 0 22px 60px #0007;
  color: #f5f8ff;
  color-scheme: dark;
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse at 0 0, #11e8ff42, transparent 31%),
              radial-gradient(ellipse at 100% 100%, #1558ff4d, transparent 37%);
  opacity: .55;
  pointer-events: none;
}

.login-panel-mark {
  display: grid;
  place-items: center;
  width: clamp(45px, 4.6vw, 75px);
  aspect-ratio: 1;
  margin-bottom: 16px;
  color: #57f5ff;
  border: 1px solid #28dfff;
  border-radius: 16px;
  background: #032340a6;
  box-shadow: inset 0 0 12px #19e3ff3d, 0 0 18px #04d5fa29;
}

.login-panel-mark svg { width: 53%; height: 53%; }

.login-kicker { display: block; margin-bottom: 12px; color: #a4e1ff; font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.login-panel h1 { margin: 0 0 9px; color: #f5f8ff; font-size: clamp(34px, 4vw, 59px); font-weight: 800; line-height: .98; letter-spacing: -.055em; }
.login-panel h1 span { display: block; }
.login-subtitle { margin: 0; color: #a8ccec; font-size: clamp(15px, 1.3vw, 21px); }

.login-panel .notice { margin: 18px 0 0; color: #e9f6ff; background: #143250; border-color: #547a9b; }
.login-panel .notice.error { color: #ffdad9; background: #472238; border-color: #da7888; }

.login-panel form { display: grid; gap: 7px; margin-top: clamp(18px, 3vh, 29px); }
.login-panel form label { margin: 0; color: #f5f8ff; font-size: 15px; }
.login-field { position: relative; margin-bottom: 9px; }

.login-field-icon {
  position: absolute;
  inset: 0 auto 0 14px;
  width: 31px;
  display: grid;
  place-items: center start;
  color: #b3d2ed;
  pointer-events: none;
}

.login-field-icon::after { content: ""; position: absolute; right: 0; width: 1px; height: 22px; background: #8fbae37a; }
.login-field-icon svg { width: 21px; height: 21px; }

.login-panel .login-field input {
  min-height: 51px;
  padding-left: 58px;
  border: 1px solid #678db6;
  border-radius: 11px;
  background: linear-gradient(100deg, #112d46, #112643);
  color: #f5f8ff;
  font-size: 16px;
}

.login-panel input::placeholder { color: #b7cde4; }
.login-panel .login-field:focus-within input { border-color: #60e5ff; box-shadow: 0 0 0 2px #21ddf928; }
.login-field:focus-within .login-field-icon { color: #6bf4ff; }
.login-panel .password-wrap input { padding-right: 88px; }
.login-panel .password-toggle { min-width: 68px; background: transparent; color: #63f2ff; font-size: 14px; font-weight: 650; }
.login-panel :focus-visible { outline: 2px solid #67f3ff; outline-offset: 3px; }

.login-panel .login-submit {
  position: relative;
  overflow: hidden;
  margin-top: 7px;
  min-height: 56px;
  justify-content: center;
  gap: 16px;
  border: 1px solid #38dbff;
  border-radius: 12px;
  background: linear-gradient(94deg, #084de5, #005ddd 67%, #007fbd 88%, #00bfd7);
  box-shadow: 0 5px 17px #087bff54;
  color: #fff;
  font-size: clamp(16px, 1.45vw, 22px);
  font-weight: 750;
}

.login-panel .login-submit:hover { background: linear-gradient(94deg, #0746cc, #0053cc 67%, #0076b1); }
.login-submit > .icon { width: 23px; height: 23px; }

.login-submit::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(110deg, transparent, #c8fbff49, transparent);
  opacity: 0;
  pointer-events: none;
}

.login-panel-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 9px 14px;
  border-top: 1px solid #7599c575;
  margin-top: 25px;
  padding-top: 15px;
}
.login-help { color: #b9d5f0; }
.login-help summary { display: flex; align-items: center; gap: 9px; cursor: pointer; color: #68eeff; font-weight: 650; list-style: none; }
.login-help summary::-webkit-details-marker { display: none; }
.login-help summary span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid; border-radius: 50%; font-size: 13px; }
.login-help p { margin: 10px 0 0; }

.login-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid #82c9ee4d;
  border-radius: 7px;
  background: #0a2847;
  color: #bbdef5;
  font-size: 12px;
  font-weight: 650;
}
.login-motion-toggle:hover { color: #fff; border-color: #6be4ff; }
.login-motion-toggle[hidden] { display: none; }
.login-motion-icon { width: 8px; height: 9px; border-inline: 2px solid currentColor; }
.login-page[data-motion="paused"] .login-motion-icon {
  border: 0;
  border-left: 7px solid currentColor;
  border-block: 4px solid transparent;
}

@media (max-width: 800px) {
  .login-page {
    --login-gutter: 16px;
    --login-edge: max(var(--login-gutter), (100vw - 488px) / 2);
    --login-inset: 14px;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 28px;
  }
  .auth-shell main:has(> .login-page) { align-content: start; }
  .login-story { min-height: 218px; padding: 3px 8px 36px; }
  .login-story::before, .login-rug-motion {
    inset: calc(-1 * var(--login-inset)) calc(-1 * var(--login-edge)) 0;
    mask-image: none;
  }
  .login-story::before {
    background-position: center, center, 69% 42px;
    background-color: #03081a;
  }
  .login-rug-motion { --rug-x: .69; --rug-y: 0; --rug-y-offset: 42; }
  .login-story::after { inset: 12% -12% 0 calc(-1 * var(--login-edge)); }
  .login-brand { width: 103px; }
  .login-story-title { margin-top: 12px; font-size: clamp(35px, 8.6vw, 45px); text-shadow: 0 2px 12px #01091e; }
  .login-story-title span { text-shadow: none; }
  .login-story-caption { display: none; }
  .login-panel { margin-top: -22px; padding: 23px clamp(18px, 5vw, 32px) 26px; border-radius: 24px; }
  .login-panel-mark { width: 38px; border-radius: 11px; margin-bottom: 12px; }
  .login-panel h1 span { display: inline; }
  .login-panel form { margin-top: 17px; }
  .login-panel-footer { margin-top: 20px; }
}

@property --login-ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .login-page[data-motion="paused"] { --login-play: paused; }
  .login-page[data-motion] .login-story::after {
    animation: login-orbit 8s ease-in-out infinite alternate var(--login-play, running);
  }
  .login-page[data-motion] .login-brand::after,
  .login-page[data-motion] .login-panel::before {
    animation: login-glow 3.8s ease-in-out infinite alternate var(--login-play, running);
  }
  .login-page[data-motion] .login-story-title span {
    background-image: linear-gradient(100deg, #51ffff 7%, #33a7ff 42%, #72f5ff 64%, #36aaff);
    background-size: 210% 100%;
    animation: login-title-light 5.5s ease-in-out infinite alternate var(--login-play, running);
  }
  .login-page[data-motion] .login-panel-mark svg {
    animation: login-arrow 2.8s ease-in-out infinite alternate var(--login-play, running);
  }
  .login-page[data-motion] .login-submit::after {
    animation: login-button-light 4s ease-in-out infinite var(--login-play, running);
  }
  .login-page[data-motion="on"] .login-panel input {
    transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
  }
  .login-page[data-motion="on"] .login-submit > .icon {
    transition: transform 160ms ease-out;
  }
  .login-page[data-motion="on"] .login-submit:hover > .icon { transform: translateX(4px); }

  @supports (mask-composite: exclude) {
    .login-page[data-motion] .login-panel::after {
      content: "";
      position: absolute;
      inset: -1px;
      padding: 2px;
      border-radius: inherit;
      background: conic-gradient(from var(--login-ring-angle, 0deg),
          transparent 4%, #2af8ff 12%, transparent 20% 52%, #4e7bff 62%, transparent 72%);
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      animation: login-panel-ring 7s linear infinite var(--login-play, running);
    }
  }
}

@keyframes login-orbit {
  from { transform: translateY(0) rotate(-16deg); opacity: .38; }
  to { transform: translateY(-18px) rotate(-11deg); opacity: .86; }
}
@keyframes login-glow {
  from { opacity: .67; }
  to { opacity: 1; }
}
@keyframes login-title-light {
  from { background-position: 0 center; }
  to { background-position: 100% center; }
}
@keyframes login-arrow {
  from { transform: translateX(-2px); }
  to { transform: translateX(3px); }
}
@keyframes login-button-light {
  0%, 27% { opacity: 0; transform: translateX(-115%) skewX(-16deg); }
  40% { opacity: .9; }
  65%, 100% { opacity: 0; transform: translateX(365%) skewX(-16deg); }
}
@keyframes login-panel-ring { to { --login-ring-angle: 1turn; } }

@media (forced-colors: active) {
  .login-story-title span { -webkit-text-fill-color: CanvasText; }
}