/* Sign in: Friendlywhale's (fw2) phone-and-code card, in Fin's light palette. */
@font-face{font-family:Inter;src:url('/inter-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  color-scheme:light;
  --paper:#fff;--field:#f8f9fc;--ink:#131724;--ink-2:#5b5870;--ink-3:#8e8ba0;--rule:#dedbe9;
  --accent:#c0bafa;--accent-hover:#b4acf2;--accent-ink:#6254a4;--accent-soft:#efedfc;--accent-mark:#9b8de0;
  --danger:#98623f;--danger-soft:#fff7ef;
  --hero-a:#e9e6fb;--hero-b:#f1f0fb;--hero-c:#f8f9fc;--hero-glow:rgba(192,186,250,.55);--hero-sky:rgba(155,141,224,.22);
  --body:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;color:var(--ink);
  padding:calc(env(safe-area-inset-top) + 20px) max(16px,env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 28px) max(16px,env(safe-area-inset-left));
  font:16px/1.5 var(--body);font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(75% 60% at 100% 108%,var(--hero-glow),transparent 60%),
    radial-gradient(60% 50% at 105% -10%,var(--hero-sky),transparent 60%),
    linear-gradient(165deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 100%);
  background-attachment:fixed}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
main{width:100%;max-width:420px;padding-top:34px}
.card{background:var(--paper);border-radius:30px;padding:30px 24px 24px;box-shadow:0 30px 70px -30px rgba(98,84,164,.35),0 2px 6px rgba(19,23,36,.05);animation:rise .5s cubic-bezier(.2,.75,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.mark{width:68px;height:68px;margin:-64px auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);box-shadow:0 12px 26px -12px rgba(98,84,164,.55),0 0 0 5px var(--paper)}
.mark svg{width:46px;height:23px;display:block}
h1{margin:0;text-align:center;font-weight:650;font-size:28px;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.lede{margin:10px 0 0;text-align:center;color:var(--ink-2);text-wrap:pretty}
.lede b{color:var(--ink);font-weight:650;white-space:nowrap}
form{margin:22px 0 0}
.field{width:100%;height:58px;padding:0 18px;border-radius:17px;border:1.5px solid var(--rule);background:var(--field);color:var(--ink);font:500 18px/1 var(--body);outline:none;transition:border-color .15s ease,box-shadow .15s ease;-webkit-appearance:none;appearance:none}
.field::placeholder{color:var(--ink-3);font-weight:400}
.field:focus{border-color:var(--accent-mark);box-shadow:0 0 0 4px var(--accent-soft)}
.field.code{height:68px;padding:0 8px 0 calc(8px + .42em);text-align:center;font:650 30px/1 var(--mono);letter-spacing:.42em;font-variant-numeric:tabular-nums}
.field.code::placeholder{letter-spacing:.42em;opacity:.45}
button{font:inherit;cursor:pointer;touch-action:manipulation;border:0}
.primary{width:100%;height:56px;margin-top:12px;border-radius:17px;background:var(--accent);color:var(--ink);font:650 17px/1 var(--body);display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;transition:transform .12s ease,opacity .15s ease,background .15s ease}
.primary:hover{background:var(--accent-hover)}
.primary:active{transform:scale(.975)}
.primary[disabled]{opacity:.55;cursor:default}
.spinner{width:17px;height:17px;border-radius:50%;border:2.4px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.error{margin:18px 0 -6px;padding:12px 15px;border-radius:15px;background:var(--danger-soft);color:var(--danger);font-size:14.5px;line-height:1.45}
.others{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14.5px;color:var(--ink-3)}
.others form{margin:0;display:inline}
.link{background:none;padding:8px 6px;border-radius:10px;color:var(--accent-ink);font:600 14.5px/1.2 var(--body);text-decoration:none}
.link[disabled]{color:var(--ink-3);cursor:default}
.link:focus-visible,.primary:focus-visible{outline:2.5px solid var(--accent-ink);outline-offset:3px}
.fine{margin:18px 6px 0;text-align:center;font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}