body { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 50% 0%, var(--bg-glow), transparent 70%), var(--bg); }
.halo svg { top: 46%; }
.signin { position: relative; z-index: 1; width: min(400px, 100%); text-align: center; animation: up .8s cubic-bezier(.2,.7,.2,1) both; }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }
h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 12vw, 76px); line-height: 1; letter-spacing: -.02em; margin: 0 0 6px; }
.lead { margin: 0 0 30px; color: var(--ink-2); font-size: 16px; }
.key-card { display: grid; gap: 10px; text-align: left; padding: 22px; border-radius: 18px; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-panel); }
label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.key-field { display: flex; gap: 8px; }
.key-field .field { flex: 1; min-width: 0; font: 14px var(--mono); }
.key-card .btn-primary { margin-top: 4px; padding: 12px 20px; font-size: 15px; }
#status { min-height: 1.4em; margin: 0; font-size: 13.5px; color: var(--ink-2); }
#status.error { color: var(--ember); }
.note { margin: 18px auto 0; max-width: 34ch; font-size: 13px; color: var(--ink-3); }