:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  color: #f5f5f7;
  background: #000;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; overflow: hidden; padding: 28px; background: #000; }
.ambient { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; }
.ambient-one { width: 54rem; height: 40rem; left: calc(50% - 27rem); top: -28rem; background: radial-gradient(circle, rgba(41,151,255,.25), transparent 68%); }
.ambient-two { width: 34rem; height: 34rem; right: -20rem; bottom: -20rem; background: radial-gradient(circle, rgba(126,87,194,.16), transparent 70%); }
.login-card { position: relative; z-index: 1; width: min(520px, 100%); padding: 42px; border: 1px solid rgba(255,255,255,.11); border-radius: 26px; background: linear-gradient(145deg, rgba(29,29,33,.88), rgba(12,12,15,.92)); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 44px 110px rgba(0,0,0,.6); backdrop-filter: blur(28px); }
.mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #1687ff, #705dff); box-shadow: 0 18px 40px rgba(41,151,255,.28), inset 0 1px rgba(255,255,255,.4); }
.mark svg { width: 32px; height: 32px; }
.eyebrow { margin: 24px 0 9px; color: #64d2ff; font-size: 9px; font-weight: 720; letter-spacing: .2em; }
h1 { margin: 0; font-size: 34px; font-weight: 660; letter-spacing: -.045em; }
.lead, .note { color: #a1a1aa; font-size: 14px; line-height: 1.65; }
.lead { margin: 14px 0 0; }
.steps { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px 14px; margin: 29px 0; }
.steps span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(41,151,255,.28); border-radius: 10px; color: #8bc7ff; background: rgba(41,151,255,.08); font-size: 10px; font-weight: 700; }
.steps p { display: grid; gap: 3px; margin: 0; }
.steps b { color: #ededf1; font-size: 13px; font-weight: 610; }
.steps small { color: #777780; font-size: 10px; }
.touch-id-login, .passkey-login { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 0; padding: 13px 17px; border-radius: 12px; color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; transition: filter .18s, transform .18s, opacity .18s; }
.touch-id-login { background: linear-gradient(135deg, #1687ff, #6457ff); box-shadow: 0 13px 32px rgba(41,151,255,.24); }
.passkey-login { border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.065); }
.touch-id-login svg, .passkey-login svg { width: 20px; height: 20px; }
.touch-id-login:hover:not(:disabled), .passkey-login:hover:not(:disabled) { filter: brightness(1.12); }
.touch-id-login:active:not(:disabled), .passkey-login:active:not(:disabled) { transform: scale(.99); }
.touch-id-login:disabled, .passkey-login:disabled { opacity: .55; cursor: default; }
.method-divider { display: flex; align-items: center; gap: 12px; margin: 13px 0; color: #5e5e67; font-size: 9px; }
.method-divider::before, .method-divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.08); }
.status { margin: 13px 0 0; color: #8bc7ff; font-size: 11px; line-height: 1.5; text-align: center; }
.download { display: inline-flex; justify-content: center; width: 100%; margin-top: 12px; padding: 10px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: #a1a1aa; background: rgba(255,255,255,.04); text-decoration: none; font-size: 11px; font-weight: 600; transition: color .18s, background .18s, transform .18s; }
.download:hover { color: #fff; background: rgba(255,255,255,.075); }
.download:active { transform: scale(.99); }
.note { margin: 24px 0 0; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.08); color: #777780; font-size: 10px; }
.error { padding: 11px 13px; border: 1px solid rgba(255,69,58,.25); border-radius: 10px; color: #ff918a; background: rgba(255,69,58,.09); font-size: 12px; }
@media (max-width: 560px) { body { padding: 14px; overflow: auto; } .login-card { padding: 30px 24px; } h1 { font-size: 29px; } }