/* codenrap hub sign-in. Self-hosted fonts only (Bricolage Grotesque display, Geist body, Geist Mono labels). */
@font-face{font-family:"Bricolage Grotesque";src:url(/auth/fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Geist;src:url(/auth/fonts/geist-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/auth/fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#0b1210; --field:#111b19; --field-hi:#14211e; --line:#27353265; --line:#273532; --line2:#3a4d49;
  --ink:#eef4f2; --ink2:#aebdb9; --ink3:#8d9e9a;
  --btn:#5eead4; --btn-hi:#8ff3e2; --btn-ink:#04201b; --ring:#5eead4; --err:#ff8f86; --lwm:#f1f5f4; --lwn:#5eead4;
  --display:"Bricolage Grotesque",Geist,system-ui,sans-serif; --body:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:#f3f6f5; --field:#ffffff; --field-hi:#ffffff; --line:#d3ddda; --line2:#aebdb9;
    --ink:#0b1412; --ink2:#3d4d49; --ink3:#586965;
    --btn:#0b1412; --btn-hi:#1c2d29; --btn-ink:#effffb; --ring:#0e9f8a; --err:#bf3329; --lwm:#0b1412; --lwn:#0e9f8a;
    color-scheme:light;
  }
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100dvh}
.shell{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:100dvh}

/* ---- brand panel (always dark) ---- */
.brand{position:relative;overflow:hidden;background:#071110;color:#eef4f2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(28px,4.2vw,56px);isolation:isolate}
.mesh{position:absolute;inset:0;z-index:-2;filter:blur(70px);opacity:.9}
.mesh i{position:absolute;border-radius:50%;will-change:transform}
.b1{width:62%;aspect-ratio:1;left:-12%;top:-14%;background:radial-gradient(circle,#0f8f7e,transparent 66%);animation:d1 26s ease-in-out infinite alternate}
.b2{width:56%;aspect-ratio:1;right:-18%;top:30%;background:radial-gradient(circle,#155a63,transparent 66%);animation:d2 32s ease-in-out infinite alternate}
.b3{width:48%;aspect-ratio:1;left:10%;bottom:-24%;background:radial-gradient(circle,#2a8f5e,transparent 66%);opacity:.55;animation:d3 38s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate3d(18%,14%,0) scale(1.15)}}
@keyframes d2{to{transform:translate3d(-20%,-12%,0) scale(.9)}}
@keyframes d3{to{transform:translate3d(24%,-16%,0) scale(1.2)}}
.brand::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.bigc{position:absolute;z-index:-1;width:78%;right:-6%;top:10%;pointer-events:none}
.bigc .cur{fill:#5eead4;opacity:.42;animation:blink 1.15s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
body:has(.go.loading) .bigc .cur{animation-duration:.45s}
.lock{display:block;height:44px;width:calc(44px*298/64);--wm:#f1f5f4;--wn:#5eead4}
.lock use{pointer-events:none}
.lk-w{fill:var(--wm)}.lk-w .n{fill:var(--wn)}.lk-h{fill:var(--wm);opacity:.6}
.pitch{max-width:none}
.pitch .big{max-width:11em;font:600 clamp(30px,3.4vw,46px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
.pitch .mono{margin-top:18px;font:500 12px/1 var(--mono);letter-spacing:.06em;color:#9fb5b0;text-transform:lowercase}

/* ---- form side ---- */
.side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}
.lock-m{--wm:var(--lwm);--wn:var(--lwn);display:none;height:40px;width:calc(40px*298/64);margin-bottom:36px}
.card{width:100%;max-width:372px;animation:rise .7s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h1{font:640 40px/1.02 var(--display);letter-spacing:-.03em}
.sub{color:var(--ink2);margin:10px 0 30px;font-size:15.5px}
.ghost{position:absolute;opacity:0;pointer-events:none;height:0;width:0;border:0;padding:0}

.field{position:relative}
.field input{width:100%;height:58px;background:var(--field);color:var(--ink);border:1.5px solid var(--line);border-radius:14px;
  padding:22px 52px 6px 16px;font:inherit;font-size:17px;letter-spacing:.01em;outline:0;transition:border-color .2s,box-shadow .25s,background .2s}
.field input:hover{border-color:var(--line2)}
.field input:focus{border-color:var(--ring);background:var(--field-hi);box-shadow:0 0 0 4px color-mix(in srgb,var(--ring) 22%,transparent)}
.field label{position:absolute;left:17px;top:18px;color:var(--ink3);pointer-events:none;transform-origin:left top;font-size:16px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),color .2s}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-11px) scale(.76)}
.field input:focus + label{color:var(--ink2)}
.eye{position:absolute;right:7px;top:8px;width:42px;height:42px;border:0;border-radius:10px;background:none;color:var(--ink3);display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s}
.eye:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.eye:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.eye svg{width:20px;height:20px;grid-area:1/1;transition:opacity .15s,transform .2s}
.eye .i-hide{opacity:0;transform:scale(.7)}
.eye[aria-pressed=true] .i-show{opacity:0;transform:scale(.7)}
.eye[aria-pressed=true] .i-hide{opacity:1;transform:none}

.msg{min-height:22px;margin:9px 2px 0;font-size:13.5px;color:var(--err);font-weight:500;opacity:0;transform:translateY(-3px);transition:opacity .2s,transform .2s}
.msg.on{opacity:1;transform:none}
.caps{margin:2px 2px 2px;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink2)}
.caps::before{content:"\21EA\00a0"}
.shake{animation:shake .46s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.field.bad input{border-color:var(--err);box-shadow:0 0 0 4px color-mix(in srgb,var(--err) 16%,transparent)}

.remember{display:flex;align-items:center;gap:12px;margin:14px 2px 22px;cursor:pointer;user-select:none;color:var(--ink2);font-size:14.5px;-webkit-tap-highlight-color:transparent}
.remember input{position:absolute;opacity:0;width:1px;height:1px}
.sw{position:relative;width:38px;height:22px;border-radius:99px;background:var(--line);flex:none;transition:background .2s;box-shadow:inset 0 0 0 1px var(--line2)}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--ink3);transition:transform .22s cubic-bezier(.3,1.4,.5,1),background .2s}
.remember input:checked + .sw{background:var(--btn);box-shadow:none}
.remember input:checked + .sw::after{transform:translateX(16px);background:var(--btn-ink)}
.remember input:focus-visible + .sw{outline:2px solid var(--ring);outline-offset:3px}

.go{position:relative;width:100%;height:54px;border:0;border-radius:14px;background:var(--btn);color:var(--btn-ink);font:600 16px var(--body);letter-spacing:.005em;
  cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:background .2s,transform .12s,opacity .2s}
.go:hover:not(:disabled){background:var(--btn-hi)}
.go:active:not(:disabled){transform:scale(.985)}
.go:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.go:disabled{cursor:default}
.go>*{grid-area:1/1;transition:opacity .2s,transform .25s}
.go .spin,.go .tick{opacity:0;transform:scale(.6)}
.spin{width:20px;height:20px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--btn-ink) 28%,transparent);border-top-color:var(--btn-ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tick{width:22px;height:22px}
.go.loading .lbl{opacity:0;transform:translateY(-8px)}
.go.loading .spin{opacity:1;transform:none}
.go.done .lbl,.go.done .spin{opacity:0}
.go.done .tick{opacity:1;transform:none}
.go.locked{background:var(--field);color:var(--ink3);box-shadow:inset 0 0 0 1.5px var(--line)}
.card.leave{animation:leave .35s ease forwards}
@keyframes leave{to{opacity:0;transform:translateY(-8px)}}
.ns{position:fixed;bottom:14px;left:0;right:0;text-align:center;color:var(--ink2);font-size:13px}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .brand{display:none}
  .side{background:radial-gradient(120% 60% at 50% -10%,color-mix(in srgb,var(--ring) 16%,transparent),transparent 70%),var(--bg)}
  .lock-m{display:block}
  h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.bigc .cur{animation:none}}