*{box-sizing:border-box}















  



  :root{--sans:Arial,Helvetica,sans-serif}
  













  body{background:var(--paper);color:var(--ink-2);font-family:var(--sans);
       display:flex;flex-direction:column;align-items:center;
       justify-content:center;justify-content:safe center;
       min-height:100vh;min-height:100dvh;margin:0;
       






       padding:60px 24px 128px;gap:0;
       position:relative;overflow-x:hidden}

  












































































  body::before,body::after{content:'';position:fixed;pointer-events:none;
       border-radius:50%;z-index:0}
  





  body::before{top:-30%;left:-20%;
       width:min(88vmax,1080px);height:min(88vmax,1080px);
       background:radial-gradient(circle at 50% 50%,var(--ab-lift),transparent 68%);
       animation:ab-lift 71s steps(24,end) infinite;
       















       animation-delay:var(--ab-delay-lift,0s)}
  


  body::after{bottom:-32%;right:-22%;
       width:min(80vmax,960px);height:min(80vmax,960px);
       background:radial-gradient(circle at 50% 50%,var(--ab-shade),transparent 66%);
       animation:ab-shade 97s steps(24,end) infinite;
       animation-delay:var(--ab-delay-shade,0s)}

  





  :root{--ab-lift:rgba(255,255,255,.92); --ab-shade:rgba(146,152,167,.30)}
  :root[data-theme="graphite"]{
       --ab-lift:rgba(255,255,255,.055); --ab-shade:rgba(0,0,0,.52)}

  


  @keyframes ab-lift{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    34%    {transform:translate3d(7%,5%,0) scale(1.06)}
    67%    {transform:translate3d(3%,-4%,0) scale(.97)}
  }
  @keyframes ab-shade{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    38%    {transform:translate3d(-6%,-4.5%,0) scale(1.07)}
    71%    {transform:translate3d(-2%,3.5%,0) scale(.96)}
  }
  






















  :root::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
       opacity:.04;background-repeat:repeat;background-size:180px 180px;
       background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  


  :root[data-theme="graphite"]::after{opacity:.055}

  


  @media(prefers-reduced-motion:reduce){
    body::before,body::after{animation:none}
  }

  




















  :root{
    




    --silk-low:#D3D8E1; --silk-high:#F0F2F7; --silk-grain:0.014;
    


    --silk-fps:20; --silk-scale:0.55; --silk-speed:0.62; --silk-weave:1.55;
  }
  :root[data-theme="graphite"]{
    


    --silk-low:#121214; --silk-high:#26262B; --silk-grain:0.022;
  }
  #jp-silk{position:fixed;inset:0;width:100%;height:100%;z-index:0;
       pointer-events:none;display:block;opacity:0;
       transition:opacity .9s ease}
  


  #jp-silk.is-in{opacity:1}
  
  :root.jp-silk-on body::before,
  :root.jp-silk-on body::after{display:none}
  @media(prefers-reduced-motion:reduce){
    

    #jp-silk{transition:none}
  }

  


  



  .jp-logo{position:relative;z-index:1;display:block;width:56px;height:56px;
       object-fit:contain;margin:0 0 58px}
  




















  .jp-logo-link{position:relative;z-index:1;display:block;margin:0 0 58px;
       line-height:0;border-radius:14px;-webkit-tap-highlight-color:transparent}
  .jp-logo-link .jp-logo{margin:0}
  .jp-logo-link:empty{display:none}
  .jp-logo-link:focus-visible{outline:2px solid var(--ink);outline-offset:7px}
  







  @media(prefers-color-scheme:dark){
    :root:not([data-theme]) .jp-logo{filter:invert(1) brightness(1.1)}
  }
  :root[data-theme="graphite"] .jp-logo{filter:invert(1) brightness(1.1)}

  
























  






























  :root{
    --ac-a:rgba(255,255,255,.44); --ac-b:rgba(255,255,255,.20);
    --ac-rim:rgba(22,21,19,.20);
    --ac-cast:0 26px 52px -20px rgba(22,21,19,.40),
              0 3px 10px -4px rgba(22,21,19,.24);
    

    --ac-well:rgba(255,255,255,.26); --ac-well-on:rgba(255,255,255,.44);
    --ac-well-rim:rgba(22,21,19,.16);
    

    --ac-btn-a:rgba(255,255,255,.62); --ac-btn-b:rgba(255,255,255,.32);
    --ac-btn-a-h:rgba(255,255,255,.80); --ac-btn-b-h:rgba(255,255,255,.46);
  }
  :root[data-theme="graphite"]{
    


    --ac-a:rgba(64,66,72,.34); --ac-b:rgba(34,35,39,.20);
    --ac-rim:rgba(255,255,255,.22);
    --ac-cast:0 28px 56px -20px rgba(0,0,0,.80),
              0 3px 12px -4px rgba(0,0,0,.62);
    --ac-well:rgba(0,0,0,.24); --ac-well-on:rgba(0,0,0,.36);
    --ac-well-rim:rgba(255,255,255,.16);
    --ac-btn-a:rgba(98,101,109,.42); --ac-btn-b:rgba(62,64,70,.26);
    --ac-btn-a-h:rgba(118,121,130,.54); --ac-btn-b-h:rgba(78,80,87,.36);
  }

  











  .card{position:relative;z-index:1;width:100%;max-width:392px;padding:34px 34px 28px;
       border-radius:20px;
       border:1px solid var(--ac-rim);
       background:linear-gradient(180deg,var(--ac-a),var(--ac-b));
       -webkit-backdrop-filter:blur(40px) saturate(1.8);
       backdrop-filter:blur(40px) saturate(1.8);
       box-shadow:inset 0 1px 0 var(--g-spec),
                  inset 2px 2px .5px -2px var(--g-bev-l),
                  inset -2px -2px .5px -2px var(--g-bev-d),
                  var(--ac-cast)}
  



  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .card{background:linear-gradient(180deg,var(--g-lite-a),var(--g-lite-b))}
  }

  .brand{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 4px}
  .dot{display:none}
  .brand-name{color:var(--ink);letter-spacing:.24em;text-transform:uppercase;
       font-size:11.5px;font-weight:700}
  h1{font-family:var(--sans);color:var(--ink);margin:0 0 6px;font-size:23px;
       font-weight:700;letter-spacing:-.02em;text-align:center}
  .sub{color:var(--ink-3);font-size:13px;margin:0 0 22px;text-align:center}
  p{color:var(--ink-2)}

  label{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
       color:var(--ink-3);margin:14px 0 6px;font-weight:700}

  

  









  input{width:100%;padding:11px 13px;border-radius:11px;font-size:14px;
       font-family:inherit;color:var(--ink);
       background:var(--ac-well);border:1px solid var(--ac-well-rim);
       box-shadow:inset 0 1px 2px var(--g-wash);
       transition:background .16s,border-color .16s,box-shadow .16s}
  input:focus{background:var(--ac-well-on);border-color:var(--ink-3);outline:none;
       box-shadow:inset 0 1px 2px var(--g-wash),0 0 0 3px var(--ring)}

  































  







  button{background:none;border:0;margin:0;padding:0;width:auto;
         color:inherit;font-family:inherit;box-shadow:none}

  






  button[type=submit]{width:100%;margin-top:22px;padding:0;height:44px;cursor:pointer;
       border-radius:9999px;font-size:14px;font-weight:700;font-family:inherit;
       color:var(--ink);border:1px solid var(--g-lite-rim);
       background:linear-gradient(180deg,var(--ac-btn-a),var(--ac-btn-b));
       box-shadow:inset 0 1px 0 var(--g-spec),
                  inset 2px 2px .5px -2px var(--g-bev-l),
                  inset -2px -2px .5px -2px var(--g-bev-d),
                  inset 0 0 5px 5px var(--g-wash),
                  var(--g-cast);
       transition:background .16s,border-color .12s,box-shadow .16s,transform .12s}
  button[type=submit]:hover{border-color:var(--g-lite-rim-h);
       background:linear-gradient(180deg,var(--ac-btn-a-h),var(--ac-btn-b-h));
       box-shadow:inset 0 1px 0 var(--g-spec-h),
                  inset 2px 2px .5px -2px var(--g-bev-l),
                  inset -2px -2px .5px -2px var(--g-bev-d),
                  inset 0 0 5px 5px var(--g-wash),
                  var(--g-cast-h)}
  button[type=submit]:active{transform:translateY(1px) scale(.995)}
  button[type=submit]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  




  .as-btn{display:flex;align-items:center;justify-content:center;
       width:100%;margin-top:22px;height:44px;border-radius:9999px;
       font-size:14px;font-weight:700;text-decoration:none;
       color:var(--ink)!important;border:1px solid var(--g-lite-rim);
       background:linear-gradient(180deg,var(--ac-btn-a),var(--ac-btn-b));
       box-shadow:inset 0 1px 0 var(--g-spec),
                  inset 2px 2px .5px -2px var(--g-bev-l),
                  inset -2px -2px .5px -2px var(--g-bev-d),
                  inset 0 0 5px 5px var(--g-wash),
                  var(--g-cast);
       transition:background .16s,border-color .12s,box-shadow .16s}
  .as-btn:hover{border-color:var(--g-lite-rim-h);
       background:linear-gradient(180deg,var(--ac-btn-a-h),var(--ac-btn-b-h));
       box-shadow:inset 0 1px 0 var(--g-spec-h),
                  inset 2px 2px .5px -2px var(--g-bev-l),
                  inset -2px -2px .5px -2px var(--g-bev-d),
                  inset 0 0 5px 5px var(--g-wash),
                  var(--g-cast-h)}

  .err{margin-top:16px;padding:10px 12px;border-radius:11px;font-size:13px;
       text-align:center;background:var(--danger-soft);color:var(--danger);
       border:1px solid var(--danger-rule)}
  .ok{margin-top:16px;padding:10px 12px;border-radius:11px;font-size:13px;
       text-align:center;background:var(--positive-soft);color:var(--positive);
       border:1px solid var(--positive)}
  



  .note{margin-top:16px;padding:10px 12px;border-radius:11px;font-size:13px;
       text-align:center;background:var(--tint);color:var(--ink-2);
       border:1px solid var(--rule)}
  .meta{margin-top:16px;color:var(--ink-3);font-size:11.5px;text-align:center}
  .meta a{color:var(--ink-2)!important;text-decoration:none;font-weight:700}
  .meta a:hover{color:var(--ink)!important}
  





  .meta a.site-link{color:var(--ink-3)!important;font-weight:400}
  .meta a.site-link:hover{color:var(--ink)!important;text-decoration:underline}
  

  .row-forgot{display:flex;justify-content:flex-end;margin-top:8px}
  .row-forgot a{font-size:11.5px;color:var(--ink-3);text-decoration:none}
  .row-forgot a:hover{color:var(--ink);text-decoration:underline}

  @media(prefers-reduced-motion:reduce){
    button[type=submit]{transition:none}
  }

  

  













.auth-thm{position:fixed;top:26px;right:26px;margin:0;z-index:2;width:34px;height:34px;
       display:grid;place-items:center;cursor:pointer;border-radius:9999px;
       border:1px solid var(--ac-rim);
       background:linear-gradient(180deg,var(--ac-a),var(--ac-b));
       -webkit-backdrop-filter:blur(20px) saturate(1.8);
       backdrop-filter:blur(20px) saturate(1.8);
       box-shadow:inset 0 1px 0 var(--g-spec),var(--ac-cast);
       color:var(--ink-2);transition:color .14s,background .14s,box-shadow .14s}
  .auth-thm:hover{color:var(--ink);
       background:linear-gradient(180deg,var(--ac-btn-a-h),var(--ac-btn-b-h));
       border-color:var(--g-lite-rim-h);
       box-shadow:inset 0 1px 0 var(--g-spec-h),var(--g-cast-h)}
  .auth-thm svg{width:16px;height:16px;display:none}
  

  :root[data-mode="light"] .auth-thm .i-moon{display:block}
  :root[data-mode="dark"]  .auth-thm .i-sun{display:block}





.alt-row{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
   text-align:center;font-size:12.5px;color:var(--ink-3)}
.alt-row a{color:var(--ink)!important;font-weight:700;text-decoration:none;
   margin-left:4px}
.alt-row a:hover{text-decoration:underline}




:root.auth-swapping *,
:root.auth-swapping *::before,
:root.auth-swapping *::after{transition:none!important;animation:none!important}







.pw-meter{display:flex;gap:4px;margin-top:8px}
.pw-seg{flex:1 1 0;height:4px;border-radius:2px;background:var(--rule-2);
   transition:background .18s}



.pw-meter[data-score="1"] .pw-seg:nth-child(-n+1){background:var(--danger)}
.pw-meter[data-score="2"] .pw-seg:nth-child(-n+2),
.pw-meter[data-score="3"] .pw-seg:nth-child(-n+3){background:var(--gold)}
.pw-meter[data-score="4"] .pw-seg{background:var(--positive)}
 


.pw-note{margin-top:6px;font-size:11.5px;color:var(--ink-3);line-height:1.35}
.pw-note:empty{display:none}
.pw-note b{color:var(--ink-2);font-weight:700}







.f-err{display:none;margin-top:7px;padding:7px 10px;border-radius:9px;
   font-size:11.5px;line-height:1.35;color:var(--danger);
   background:var(--danger-soft);border:1px solid var(--danger-rule)}
.f-err:not(:empty){display:block}
input.is-bad{border-color:var(--danger-rule)}
input.is-bad:focus{border-color:var(--danger);
   box-shadow:inset 0 1px 2px var(--g-wash),0 0 0 3px var(--danger-soft)}





.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:44px}
.pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);
   width:32px;height:32px;display:grid;place-items:center;margin:0;padding:0;
   border:0;background:none;color:var(--ink-3);cursor:pointer;border-radius:8px;
   box-shadow:none;transition:color .12s,background .12s}




.pw-eye:hover{color:var(--ink);background:var(--ac-well-on)}
.pw-eye svg{width:16px;height:16px}
.pw-eye .e-on{display:none}
.pw-eye.on .e-off{display:none}
.pw-eye.on .e-on{display:block}
.pw-eye:focus-visible{outline:2px solid var(--ink);outline-offset:1px}












:root{--chr-a:#FFFFFF; --chr-b:#FAFAFC; --chr-c:#F6F6F8; --chr-d:#EDEDF1;
      --chr-lip:rgba(18,18,24,.13); --chr-ink:#161513}
:root[data-theme="graphite"]{--chr-a:#3A3B40; --chr-b:#313236; --chr-c:#26272B;
      --chr-d:#1C1D20; --chr-lip:rgba(0,0,0,.5); --chr-ink:#F2F3F5}
.as-btn.is-metal{
   color:var(--chr-ink)!important;border:1px solid transparent;
   background:linear-gradient(180deg,var(--chr-a),var(--chr-b) 40%,
                              var(--chr-c) 62%,var(--chr-d)) padding-box,
              var(--rim-sm) border-box;
   box-shadow:var(--lift-sm), inset 0 1px 0 var(--chr-a),
              inset 0 -1px 0 var(--chr-lip);
   transition:filter .16s,box-shadow .16s,transform .12s}
.as-btn.is-metal:hover{filter:brightness(1.03);
   box-shadow:var(--lift-lg), inset 0 1px 0 var(--chr-a),
              inset 0 -1px 0 var(--chr-lip)}
.as-btn.is-metal:active{transform:translateY(1px)}




.err-list{margin:0;padding:0 0 0 18px;text-align:left}
.err-list li{margin:2px 0}







.pw-wrap:has(.pw-mark) input{padding-right:74px}
.pw-mark{position:absolute;top:50%;right:38px;transform:translateY(-50%);
   width:20px;height:20px;display:grid;place-items:center;pointer-events:auto;
   opacity:0;transition:opacity .14s,color .14s;cursor:default}
.pw-mark svg{width:15px;height:15px;display:none}
.pw-mark.is-ok{opacity:1;color:var(--positive)}
.pw-mark.is-no{opacity:1;color:var(--danger)}
.pw-mark.is-ok .m-ok{display:block}
.pw-mark.is-no .m-no{display:block}


.pw-live{position:absolute;width:1px;height:1px;overflow:hidden;
   clip:rect(0 0 0 0);white-space:nowrap}















.otp{display:block;margin-top:6px}
.otp-row{display:flex;gap:8px;justify-content:center}


.otp-box:nth-child(4){margin-left:12px}
.otp-box{position:relative;width:44px;height:52px;flex:0 0 auto}
.otp-in{position:absolute;inset:0;width:100%;height:100%;padding:0;
   text-align:center;font-size:19px;font-family:inherit;
   color:transparent;caret-color:transparent;
   




   background:var(--ac-well);border:1px solid var(--ac-well-rim);border-radius:11px;
   box-shadow:inset 0 1px 2px var(--g-wash);
   transition:background .16s,border-color .16s,box-shadow .16s}
.otp-in::selection{background:transparent}
.otp-in:focus{outline:none;background:var(--ac-well-on);border-color:var(--ink-3);
   box-shadow:inset 0 1px 2px var(--g-wash),0 0 0 3px var(--ring)}

.otp-ch{position:absolute;inset:0;display:grid;place-items:center;
   pointer-events:none;font-size:19px;font-weight:700;color:var(--ink);
   font-variant-numeric:tabular-nums}
.otp-ch.is-in{animation:otp-pop .22s cubic-bezier(.23,1,.32,1)}
@keyframes otp-pop{
  from{opacity:0;transform:translateY(7px) scale(.97);filter:blur(3px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}


.otp-box.is-on .otp-ch:empty::after{content:'';display:block;width:2px;
   height:22px;border-radius:1px;background:var(--ink);
   animation:otp-blink 1.06s steps(1,end) infinite}
@keyframes otp-blink{0%,49%{opacity:1}50%,100%{opacity:0}}




.otp.is-bad .otp-in{border-color:var(--danger-rule)}
.otp.is-bad .otp-row{animation:otp-shake .32s cubic-bezier(.23,1,.32,1)}
@keyframes otp-shake{
  0%{transform:translateX(0)}   25%{transform:translateX(-5px)}
  50%{transform:translateX(4px)} 75%{transform:translateX(-3px)}
  100%{transform:translateX(0)}
}


.otp.is-busy{opacity:.55;pointer-events:none;transition:opacity .15s}

@media(prefers-reduced-motion:reduce){
  .otp-ch.is-in{animation:none}
  .otp.is-bad .otp-row{animation:none}
  .otp-box.is-on .otp-ch:empty::after{animation:none;opacity:1}
}





.otp-alt{margin-top:16px;text-align:center}







.otp-alt button{width:auto;height:auto;margin:0;padding:2px 4px;
   font-size:12px;font-weight:400;border:0;border-radius:0;
   background:none;box-shadow:none;color:var(--ink-3);
   text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.otp-alt button:hover{color:var(--ink);background:none;box-shadow:none}

















@media(prefers-reduced-motion:no-preference){
  .card{animation:auth-rise .38s cubic-bezier(.23,1,.32,1) both}
  .jp-logo{animation:auth-rise .38s cubic-bezier(.23,1,.32,1) 60ms both}
}
@keyframes auth-rise{
  from{opacity:0;transform:translateY(10px)}
  to  {opacity:1;transform:none}
}
@view-transition{navigation:auto}
::view-transition-group(auth-card){animation-duration:.34s}
.card{view-transition-name:auth-card}
.jp-logo{view-transition-name:auth-mark}



#jp-silk{view-transition-name:none}