.bio-login {
  --bio-login-accent: #8ebdff;
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 120px clamp(32px, 5vw, 88px) 90px;
  overflow: hidden;
  color-scheme: dark;
  color: #eef5ff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  background: linear-gradient(118deg, #10223a 0%, #0e1b2e 46%, #0b1220 78%);
}
.bio-login *, .bio-login *::before, .bio-login *::after { box-sizing: border-box; }
.bio-login :is(button, input) { font-family: inherit; -webkit-tap-highlight-color: transparent; }
.bio-login :is(button, a):focus-visible { outline: 2px solid var(--bio-login-accent); outline-offset: 5px; }
.bio-login .bio-login-ambient { position: absolute; z-index: 0; inset: -20%; pointer-events: none; background: radial-gradient(ellipse at 62% 42%, #1d426c55, transparent 51%); translate: calc(var(--bio-login-shift-x, 0px) * -.55) calc(var(--bio-login-shift-y, 0px) * -.55); animation: bio-login-light 8s ease-in-out infinite alternate, bio-login-ambient-arrival 1.8s ease-out; transition: filter .5s ease; }
.bio-login:focus-within .bio-login-ambient { filter: brightness(1.6); }
.bio-login .bio-login-portrait { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 62%; pointer-events: none; isolation: isolate; translate: var(--bio-login-shift-x, 0px) var(--bio-login-shift-y, 0px); -webkit-mask-image: linear-gradient(90deg, #000 43%, #000e 63%, transparent 100%); mask-image: linear-gradient(90deg, #000 43%, #000e 63%, transparent 100%); animation: bio-login-arrival 1.6s cubic-bezier(.22, .61, .36, 1) both; }
.bio-login .bio-login-portrait img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; object-position: 50% 17%; filter: saturate(.86) brightness(1.05); }
.bio-login .bio-login-portrait :is(.bio-login-rim, .bio-login-sheen) { position: absolute; inset: 0; mix-blend-mode: screen; }
.bio-login .bio-login-portrait .bio-login-rim { filter: contrast(1.6) brightness(1.65) saturate(1.1); opacity: .2; -webkit-mask-image: linear-gradient(125deg, transparent 7%, #000 35%, #000 72%, transparent 96%); mask-image: linear-gradient(125deg, transparent 7%, #000 35%, #000 72%, transparent 96%); animation: bio-login-rim-breath 6.8s ease-in-out infinite alternate; }
.bio-login .bio-login-portrait .bio-login-sheen { filter: contrast(1.8) brightness(2.1) saturate(.8); opacity: 0; -webkit-mask-image: linear-gradient(112deg, transparent 40%, #0003 46%, #000 50%, #0003 54%, transparent 60%); mask-image: linear-gradient(112deg, transparent 40%, #0003 46%, #000 50%, #0003 54%, transparent 60%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; animation: bio-login-light-drift 14s ease-in-out 1.8s infinite; }
.bio-login .bio-login-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0b1220 0%, #0b122000 37%, #0b122000 80%, #0b12203b 100%); }
.bio-login .bio-login-brand { position: absolute; z-index: 2; top: 38px; left: clamp(32px, 5vw, 88px); display: flex; align-items: center; gap: 17px; margin: 0; padding: 0; user-select: none; }
.bio-login .bio-login-word { color: #eef5ff; font-size: 39px; font-weight: 680; line-height: 1; letter-spacing: -2px; }
.bio-login .bio-login-word span { color: var(--bio-login-accent); }
.bio-login .bio-login-company { padding-top: 4px; font-size: 12px; font-weight: 480; color: #c0d0e2; letter-spacing: .02em; }
.bio-login .bio-login-form { position: relative; z-index: 2; grid-column: 2; width: min(100%, 380px); min-width: 0; justify-self: center; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.bio-login .bio-login-form h1 { margin: 0 0 12px; color: #eef5ff; font-size: 35px; line-height: 1.18; letter-spacing: -1.15px; font-weight: 570; text-wrap: initial; }
.bio-login .bio-login-form form { display: block; margin: 34px 0 0; padding: 0; }
.bio-login .field { display: block; margin: 0; padding: 0; }
.bio-login .field + .field { margin-top: 22px; }
.bio-login .field-label { display: block; margin: 0 0 9px; color: #dce8f7; font-size: 13px; line-height: 1.4; font-weight: 500; }
.bio-login .field input:not([type=range]) { display: block; width: 100%; min-width: 0; height: 54px; min-height: 54px; max-height: none; margin: 0; padding: 15px 16px; color: #eef5ff; font-size: 16px; line-height: 22px; border: 1px solid #87a4c43d; border-radius: 9px; outline: none; background: #18304a55; box-shadow: none; transition: border-color .18s, box-shadow .18s, background .18s; }
.bio-login .field input::placeholder { color: #8196ae; opacity: 1; }
.bio-login .field input:not([type=range]):hover { border-color: #9fb9d467; }
.bio-login .field input:not([type=range]):focus { border-color: #8ebdff; background: #1b355261; box-shadow: 0 0 0 3px #8ebdff15; outline: none; }
.bio-login .field input:not([type=range])[aria-invalid="true"] { border-color: #df9b9e; }
.bio-login .field input:-webkit-autofill { -webkit-text-fill-color: #eef5ff; caret-color: #eef5ff; -webkit-box-shadow: 0 0 0 1000px #14243b inset; }
.bio-login .password-wrap { display: block; position: relative; }
.bio-login .field .password-wrap input:not([type=range]) { padding-right: 56px; }
.bio-login .password-toggle { position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; margin: 0; padding: 0; color: #a7bad0; background: transparent; border: 0; border-radius: 6px; box-shadow: none; }
.bio-login .password-toggle:hover { color: #eef5ff; background: #8ebdff0c; }
.bio-login .password-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bio-login .btn.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 28px 0 0; padding: 15px 17px; border: 1px solid #6ca4f731; border-radius: 9px; background: #377be2; box-shadow: 0 7px 24px #06152935; color: #fff; font-size: 15px; line-height: 22px; font-weight: 590; filter: none; transform: none; transition: background .18s; }
.bio-login .btn.auth-submit:hover { background: #4688eb; filter: none; transform: none; }
.bio-login .btn.auth-submit:disabled { cursor: wait; opacity: 1; background: #326fc9; }
.bio-login .bio-login-spinner { display: none; flex: 0 0 auto; width: 17px; height: 17px; border: 2px solid #fff5; border-top-color: white; border-radius: 50%; animation: bio-login-spin .7s linear infinite; }
.bio-login .auth-submit.is-loading .bio-login-spinner, .bio-login form[aria-busy="true"] .bio-login-spinner { display: block; }
.bio-login .text-btn.login-help { display: block; width: fit-content; min-height: 44px; margin: 14px auto -8px; padding: 12px 4px; border: 0; border-radius: 0; background: none; color: #a9c5e8; font-size: 13px; line-height: 20px; font-weight: 400; text-underline-offset: 4px; box-shadow: none; }
.bio-login .text-btn.login-help:hover { color: #d3e4ff; background: none; text-decoration: underline; }
.bio-login .auth-error { margin: 18px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: #f0b6b8; font-size: 13px; line-height: 1.5; }
.bio-login .auth-error:empty, .bio-login .auth-error.hidden, .bio-login .auth-error[hidden] { display: none; }
.bio-login .bio-login-form .auth-footer { color: #a7bad0; font-size: 12px; line-height: 1.6; }
.bio-login .bio-login-motion { position: absolute; z-index: 2; right: max(20px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 12px; margin: 0; border: 0; border-radius: 8px; background: transparent; color: #8299b4; box-shadow: none; }
.bio-login .bio-login-motion:hover { color: #d9e9ff; background: #8ebdff0c; }
.bio-login .bio-login-motion svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bio-login .bio-login-motion:disabled { cursor: default; opacity: .55; }
.bio-login.bio-login-paused :is(.bio-login-ambient, .bio-login-portrait, .bio-login-rim, .bio-login-sheen), .bio-login.bio-login-hidden :is(.bio-login-ambient, .bio-login-portrait, .bio-login-rim, .bio-login-sheen) { animation-play-state: paused; transition: none; }
.bio-login.bio-login-ready .bio-login-portrait { animation: none; opacity: 1; }
.bio-login.bio-login-ready .bio-login-ambient { animation-name: bio-login-light; }
.bio-login.bio-login-paused:focus-within .bio-login-ambient { filter: none; }
@keyframes bio-login-light { from { opacity: .35; transform: scale(.97); } to { opacity: .8; transform: scale(1.06); } }
@keyframes bio-login-ambient-arrival { from { filter: brightness(.15); } to { filter: brightness(1); } }
@keyframes bio-login-arrival { from { opacity: 0; } to { opacity: 1; } }
@keyframes bio-login-rim-breath { from { opacity: .1; } to { opacity: .42; } }
@keyframes bio-login-light-drift {
  0%, 8% { -webkit-mask-position: 145% 0; mask-position: 145% 0; opacity: 0; }
  24%, 54% { opacity: .36; }
  76%, 100% { -webkit-mask-position: -60% 0; mask-position: -60% 0; opacity: 0; }
}
@keyframes bio-login-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) {
  .bio-login { display: block; padding: 166px max(24px, env(safe-area-inset-right)) 60px max(24px, env(safe-area-inset-left)); background: linear-gradient(155deg, #10223a 0%, #0b1627 42%, #0b1220 85%); }
  .bio-login .bio-login-brand { top: max(28px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); display: block; }
  .bio-login .bio-login-word { font-size: 35px; }
  .bio-login .bio-login-company { margin-top: 10px; font-size: 10px; }
  .bio-login .bio-login-portrait { inset: 0 -16px auto auto; width: 268px; height: 260px; -webkit-mask-image: radial-gradient(ellipse 80% 91% at 78% 12%, #000 17%, transparent 88%); mask-image: radial-gradient(ellipse 80% 91% at 78% 12%, #000 17%, transparent 88%); }
  .bio-login .bio-login-portrait img { object-position: 50% 24%; }
  .bio-login .bio-login-portrait::after { background: linear-gradient(0deg, #0b1627 0%, #0b162700 55%); }
  .bio-login .bio-login-ambient { background: radial-gradient(ellipse at 83% 15%, #1d426c55, transparent 50%); }
  .bio-login .bio-login-form { width: 100%; max-width: 390px; margin: 0 auto; }
  .bio-login .bio-login-form h1 { margin-bottom: 10px; font-size: 30px; line-height: 1.2; letter-spacing: -.9px; }
  .bio-login .bio-login-form form { margin-top: 28px; }
  .bio-login .field + .field { margin-top: 20px; }
  .bio-login .btn.auth-submit { margin-top: 25px; }
}
@media (max-height: 620px) {
  .bio-login { padding-top: 106px; padding-bottom: 60px; }
  .bio-login .bio-login-brand { top: max(25px, env(safe-area-inset-top)); }
}
@media (max-width: 700px) and (max-height: 620px) {
  .bio-login { padding-top: 128px; }
  .bio-login .bio-login-portrait { height: 210px; width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .bio-login *, .bio-login *::before, .bio-login *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bio-login :is(.bio-login-ambient, .bio-login-portrait) { translate: none !important; }
  .bio-login .bio-login-sheen { display: none !important; }
}