:root { --bg: #09090e; --fg: #f5f5f7; --l2: #a5a6b5; --l3: #6c6c70; --a1: #3478ff; --a2: #7545ff; color-scheme: dark }
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif; padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: hidden; -webkit-tap-highlight-color: transparent }
.field { position: fixed; inset: -20%; background: radial-gradient(38% 30% at 18% 18%, #1f4fd6, transparent 70%), radial-gradient(30% 26% at 86% 14%, #b0185f, transparent 70%), radial-gradient(44% 34% at 62% 90%, #5b21c9, transparent 72%), radial-gradient(30% 24% at 10% 84%, #0f766e, transparent 70%); filter: blur(50px) saturate(140%); opacity: .8; animation: drift 38s ease-in-out infinite alternate }
@keyframes drift { to { transform: translate3d(3%, -2%, 0) scale(1.06) } }
@media (prefers-reduced-motion: reduce) { .field { animation: none } }
.card { position: relative; width: min(360px, 100%); border-radius: 28px; padding: 30px 22px 24px; background: rgba(36, 36, 46, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .13), 0 30px 60px -24px rgba(0, 0, 0, .8); backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%); display: grid; gap: 12px; text-align: center }
.logo { width: 80px; height: 80px; border-radius: 19px; margin: 0 auto; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7) }
h1 { margin: 4px 0 0; font: 800 30px/1 -apple-system, "SF Pro Display", sans-serif; letter-spacing: -.03em; text-wrap: balance }
.sub { margin: 0; color: #c9cad6; font-size: 15px; line-height: 1.4 }
.bio { width: 64px; height: 64px; margin: 2px auto; color: #8fa6ff }
.btn { border: 0; font: 600 17px -apple-system, sans-serif; padding: 15px; border-radius: 999px; cursor: pointer; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 8px 24px -8px rgba(76, 96, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .35); user-select: none; -webkit-user-select: none }
.btn:active { transform: scale(.98) }
.btn:disabled { opacity: .6 }
.fine { margin: 0; font-size: 12px; color: var(--l2); line-height: 1.45 }
.err { margin: 0; font-size: 13px; color: #ff7a70 }
[hidden] { display: none !important }
a.btn { display: block; text-decoration: none }
.btn.ghost { background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .13) }
.g { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 800; font-size: 14px; margin-right: 9px; vertical-align: -5px }