/* Sign-in gate: aurora light behind the form. Native port of the
   Aceternity AuroraBackground — two stacked repeating gradients (a white
   stripe mask over a blue/violet band), blurred and inverted, with a second
   copy drifting across in difference blend. Concentrated top-right by a
   radial mask so the card sits in calm light. */
.gate{position:relative;min-height:100dvh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px}
#app:has(> .gate:not([hidden])){max-width:none;margin:0}
body:has(#gate.gate:not([hidden])) #desk-dock{display:none}
.au-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.au{position:absolute;inset:-10px;opacity:.5;will-change:transform;
  --white-gradient:repeating-linear-gradient(100deg,#fff 0%,#fff 7%,transparent 10%,transparent 12%,#fff 16%);
  --aurora:repeating-linear-gradient(100deg,#3b82f6 10%,#a5b4fc 15%,#93c5fd 20%,#ddd6fe 25%,#60a5fa 30%);
  background-image:var(--white-gradient),var(--aurora);background-size:300%,200%;background-position:50% 50%,50% 50%;
  filter:blur(10px) invert(1);
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 70%);
  mask-image:radial-gradient(ellipse at 100% 0%,#000 10%,transparent 70%)}
.au::after{content:"";position:absolute;inset:0;background-image:var(--white-gradient),var(--aurora);
  background-size:200%,100%;background-attachment:fixed;mix-blend-mode:difference;animation:aurora 60s linear infinite}
@keyframes aurora{from{background-position:50% 50%,50% 50%}to{background-position:350% 50%,350% 50%}}
/* the sign-in card */
.gate .gatewrap{position:relative;z-index:1;width:min(420px,100%);padding:30px 28px 24px;text-align:center;
  background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--r-xl);box-shadow:var(--shadow-panel);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(1.2);backdrop-filter:blur(var(--blur)) saturate(1.2)}
.gate .brand-lg,.gate .brand-hero{height:64px;width:auto;margin:0 auto 16px;display:block}
.gate .eyebrow{margin-bottom:6px}
.gate .display{font-size:clamp(34px,7cqw,44px);margin:0 0 8px;line-height:1.05}
.gate .sub{margin:0 auto 18px;max-width:30ch;font-size:14.5px}
.gate .lbl{text-align:left}
.gate .hint{margin-top:14px;font-size:12px}
.gate .err{text-align:left}
@media (prefers-reduced-motion:reduce){.au::after{animation:none}}
@media (max-width:640px){.gate{padding:16px 16px max(24px,env(safe-area-inset-bottom))}.gate .gatewrap{padding:24px 20px 20px}}