:root{
  color-scheme: light;
  --bg:#eceee8; --card:#ffffff; --ink:#0f1110; --ink-2:#3a3d39; --muted:#71756e; --soft:#dfe2da;
  --blue:#2b3ff5; --blue-2:#4a5bff; --blue-deep:#1c2bd0; --sky:#c9d0ff;
  --ok:#1f8a4c; --bad:#d23a2a; --warn:#9a5b00; --bad-bg:#fdecea;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.4,.5,1);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:10px}
h1,h2{margin:0;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
h1:focus,h1:focus-visible{outline:none}
p{margin:0}
i.s{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark{font-size:1.28rem;font-weight:600;letter-spacing:-.05em;display:inline-flex;align-items:baseline}

/* ---------- Glass (flat fill, no gradients) ---------- */
.glass{position:relative;isolation:isolate;background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);transform:translateZ(0);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.12),0 12px 40px -12px rgba(10,20,90,.35)}

/* ---------- Buttons ---------- */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:.92rem;line-height:1;padding:.95rem 1.25rem;border-radius:999px;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--spring),background .25s,color .35s var(--ease);--fill:var(--blue)}
.btn::before{content:"";position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:260%;aspect-ratio:1;border-radius:50%;background:var(--fill);transform:translate(-50%,-50%) scale(0);transition:transform .55s var(--ease);pointer-events:none}
.btn:hover::before{transform:translate(-50%,-50%) scale(1)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn-ink{background:var(--ink);color:#fff;--fill:var(--blue)}
.btn-white{background:#fff;color:var(--ink);--fill:var(--ink)}
.btn-white:hover{color:#fff}
.btn-soft{background:var(--bg);color:var(--ink);--fill:var(--ink)}
.btn-soft:hover{color:#fff}
.btn.block{width:100%}
.btn-label{display:inline-flex;align-items:center;gap:.55rem;transition:opacity .2s}
.btn svg{width:18px;height:18px;flex:none;fill:currentColor}
.arrow{display:inline-block;transition:transform .35s var(--spring)}
.btn:hover .arrow{transform:translateX(3px)}
.dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0;transition:opacity .2s;pointer-events:none}
.dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.25}40%{opacity:1}}
.btn.loading{cursor:progress}
.btn.loading .btn-label{opacity:0}
.btn.loading .dots{opacity:1}
.link{appearance:none;background:none;border:0;cursor:pointer;font-weight:500;font-size:.9rem;color:var(--muted);padding:.6rem;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}
.link[disabled]{cursor:default;text-decoration:none}
.link[disabled]:hover{color:var(--muted)}

/* ---------- Layout ---------- */
.auth-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px;min-height:100vh;min-height:100dvh}
.side{position:sticky;top:12px;align-self:start;height:calc(100vh - 24px);height:calc(100dvh - 24px);border-radius:28px;background:var(--blue);color:#fff;overflow:hidden;display:flex;flex-direction:column;padding:24px clamp(24px,3vw,40px);view-transition-name:stage}
.side-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.side-top .wordmark{view-transition-name:wordmark}
.home{font-size:.88rem;font-weight:500;color:rgba(255,255,255,.75);padding:.55rem .85rem;border-radius:999px;transition:background .2s,color .2s}
.home:hover{color:#fff;background:rgba(255,255,255,.12)}
.side-body{position:relative;z-index:2;margin-top:auto;padding-bottom:clamp(120px,22vh,210px)}
.side-title{margin:0;font-size:clamp(2.6rem,4.8vw,4.8rem);font-weight:600;letter-spacing:-.045em;line-height:.94;max-width:11ch;text-wrap:balance}
.side-title i.s{font-size:1.06em}
.drift{position:absolute;left:0;bottom:-.2em;z-index:1;white-space:nowrap;font-family:var(--serif);font-style:italic;font-size:clamp(9rem,21vw,19rem);line-height:.8;letter-spacing:-.04em;color:var(--blue-2);pointer-events:none;display:flex;animation:drift 60s linear infinite}
.drift span{padding-right:.35em}
@keyframes drift{to{transform:translateX(-50%)}}

.pills{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;max-width:540px}
.pills li{display:flex;align-items:center;gap:.6rem;padding:.65rem 1rem;border-radius:999px;font-size:.92rem;font-weight:500}
.pills li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#fff}

.snap{margin-top:28px;width:min(380px,100%);background:#fff;color:var(--ink);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 60px -24px rgba(10,20,90,.5)}
.snap-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chip{font-size:.78rem;font-weight:600;padding:.45rem .7rem;border-radius:999px;background:var(--bg);color:var(--ink-2)}
.snap-tag{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.snap-score{display:flex;align-items:flex-end;gap:10px}
.snap-score b{font-size:4.4rem;font-weight:600;letter-spacing:-.075em;line-height:.8;font-variant-numeric:tabular-nums}
.snap-score small{font-size:.9rem;font-weight:500;color:var(--muted)}
.delta{display:inline-block;font-size:.75rem;font-weight:600;color:#fff;background:var(--ok);padding:.28rem .5rem;border-radius:999px;margin-bottom:.15rem}
.snap-areas{display:flex;flex-direction:column;gap:10px}
.area{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:.88rem;font-weight:500}
.area b{font-weight:600;font-variant-numeric:tabular-nums}
.track{grid-column:1/-1;height:6px;border-radius:6px;background:var(--bg);overflow:hidden}
.track i{display:block;height:100%;border-radius:6px;background:var(--blue);transition:width 1.3s var(--ease)}
.snap-foot{font-size:.8rem;color:var(--muted)}

.main{display:flex;flex-direction:column;min-width:0;padding-inline:clamp(4px,3vw,40px)}
.topline{display:flex;justify-content:flex-end;align-items:center;gap:.7rem;min-height:56px;font-size:.9rem;color:var(--muted)}
.topline .btn{padding:.72rem 1.1rem;font-size:.86rem}
.card-wrap{flex:1;display:grid;place-items:center;padding-block:20px 12px}
.card{width:min(440px,100%);background:var(--card);border-radius:28px;padding:clamp(24px,3.4vw,38px);view-transition-name:card}
.legal{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding-block:10px 6px;font-size:.8rem;color:var(--muted)}
.legal a:hover{color:var(--ink)}

/* ---------- Views and form ---------- */
.view{display:flex;flex-direction:column;gap:18px}
.view.enter{animation:viewIn .55s var(--ease)}
@keyframes viewIn{from{opacity:.2;transform:translateY(14px)}}
.view h1{font-size:clamp(1.9rem,3vw,2.4rem);line-height:1}
.lead{color:var(--muted);margin-top:-6px}
.lead b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.oauth{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plan-pick{display:flex;align-items:center;gap:10px;margin:-4px 0 0;background:var(--bg);border-radius:14px;padding:.7rem .95rem;font-size:.92rem}
.plan-pick span{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan-pick b{flex:1;font-weight:600}
.plan-pick a{font-weight:600;color:var(--blue)}
.plan-pick a:hover{text-decoration:underline;text-underline-offset:3px}
.or{text-align:center;font-size:.84rem;color:var(--muted)}
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.field label small{font-size:inherit;font-weight:500;color:var(--muted)}
.input{position:relative}
.field input:not([type="checkbox"]){font:500 1rem/1.4 var(--sans);color:var(--ink);background:var(--bg);border:0;border-radius:12px;padding:.85rem 1rem;width:100%;transition:background .2s,box-shadow .2s}
.field input::placeholder{color:#9a9e96}
.field input:not([type="checkbox"]):focus{outline:none;background:#fff;box-shadow:0 0 0 2px var(--blue)}
.field input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 100px var(--bg) inset;transition:background-color 9999s}
.field input:-webkit-autofill:focus{box-shadow:0 0 0 100px #fff inset,0 0 0 2px var(--blue)}
.field.invalid input:not([type="checkbox"]){background:var(--bad-bg)}
.field.invalid input:not([type="checkbox"]):focus{background:#fff;box-shadow:0 0 0 2px var(--bad)}
.input input{padding-right:4.8rem!important}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);appearance:none;border:0;background:#fff;border-radius:8px;padding:.45rem .7rem;font-size:.78rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.input:focus-within .pw-toggle{background:var(--bg)}
.pw-toggle:hover,.input:focus-within .pw-toggle:hover{background:var(--ink);color:#fff}
.mini{appearance:none;border:0;background:none;padding:0;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--blue)}
.mini:hover{text-decoration:underline;text-underline-offset:3px}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px}
.meter i{height:4px;border-radius:4px;background:var(--bg);transition:background .35s}
.hint{font-size:.8rem;color:var(--muted);transition:color .3s}
.caps{font-size:.8rem;font-weight:600;color:var(--warn)}
.msg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.msg > span{min-height:0;overflow:hidden}
.msg em{display:block;font-style:normal;font-size:.8rem;font-weight:500;color:var(--bad)}
.invalid > .msg{grid-template-rows:1fr}

.field .checkline{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;font-weight:500;color:var(--ink-2);line-height:1.4;cursor:pointer;position:relative}
.checkline input{position:absolute;left:0;top:0;width:20px;height:20px;margin:0;opacity:0;cursor:pointer}
.box{flex:none;width:20px;height:20px;border-radius:6px;background:var(--bg);display:grid;place-content:center;transition:background .25s}
.box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .3s var(--spring)}
.checkline input:checked + .box{background:var(--ink)}
.checkline input:checked + .box::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.checkline input:focus-visible + .box{box-shadow:0 0 0 2px var(--blue)}
.field.invalid .box{background:var(--bad-bg)}
.checkline a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.form .btn.block{margin-top:4px}

/* ---------- Done states ---------- */
.tick{width:56px;height:56px}
.tick svg{display:block;width:100%;height:100%}
.tick circle{fill:var(--blue);transform-box:fill-box;transform-origin:center;animation:pop .55s var(--spring) both}
.tick path{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .45s .25s var(--ease) forwards}
@keyframes pop{from{transform:scale(.5);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
.next{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.next li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg);animation:viewIn .5s var(--ease) both}
.next li:nth-child(2){animation-delay:.08s}
.next li:nth-child(3){animation-delay:.16s}
.next .n{width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-content:center;font-size:.8rem;font-weight:700;color:var(--ink-2)}
.next li.now .n{background:var(--blue);color:#fff}
.next li.done .n{background:var(--ink);color:#fff}
.next b{display:block;font-weight:600;font-size:.95rem;line-height:1.3}
.next small{display:block;font-size:.84rem;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.mock-note{font-size:.8rem;color:var(--muted);background:var(--bg);padding:.75rem .95rem;border-radius:12px}
.back{appearance:none;border:0;background:none;padding:0;cursor:pointer;align-self:flex-start;font-weight:600;font-size:.88rem;color:var(--muted);transition:color .2s}
.back:hover{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;transform:translate(-50%,160%);background:var(--ink);color:#fff;padding:.9rem 1.2rem;border-radius:999px;font-weight:500;font-size:.9rem;transition:transform .6s var(--spring);max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}

/* ---------- First load ---------- */
.rise{animation:rise .8s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes rise{from{opacity:.001;transform:translateY(22px)}}
.vt .rise{animation:none}

/* ---------- Page transitions (browsers that support them) ---------- */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-group(stage){border-radius:28px;overflow:clip}
::view-transition-old(stage){animation:none;opacity:0}
::view-transition-new(stage){animation:none;height:100%;object-fit:cover;object-position:left bottom}
::view-transition-group(card){background:var(--card);border-radius:28px;overflow:clip}
::view-transition-old(card){animation:vt-fade-out .2s ease both}
::view-transition-new(card){animation:vt-fade-in .35s .15s ease both}
::view-transition-old(title-signup),::view-transition-old(title-login),::view-transition-old(pills),::view-transition-old(snap){animation:vt-out .3s var(--ease) both}
::view-transition-new(title-signup),::view-transition-new(title-login),::view-transition-new(pills),::view-transition-new(snap){animation:vt-in .55s .12s var(--ease) both}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
@keyframes vt-out{to{opacity:0;transform:translateY(-16px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(20px)}}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  .auth-grid{grid-template-columns:minmax(0,1fr);padding:10px;gap:10px}
  .side{position:relative;top:auto;height:auto;padding:20px 20px 0}
  .side-body{margin-top:44px;padding-bottom:clamp(88px,28vw,140px)}
  .side-title{font-size:clamp(2.3rem,9vw,3.4rem)}
  .pills,.snap{display:none}
  .drift{font-size:clamp(7rem,34vw,11rem)}
  .main{padding-inline:0}
  .topline{justify-content:center;min-height:0;padding-top:6px}
  .card-wrap{padding-block:10px}
  .card{width:100%}
}
@media (max-width:420px){.oauth{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Turnstile check: takes no space unless Cloudflare asks for a click */
.ts-box:empty{display:none}
.ts-box{margin:4px 0 2px}