.auth-body{
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  --font-sans:"Segoe UI",Tahoma,Arial,sans-serif;
  background:#0b1012;
  --color-brand:#063970;
  --color-brand-600:#052e5a}
.auth-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
  gap:70px;
  max-width:1240px;
  margin:auto;
  min-height:100dvh;
  padding:60px
}
.auth-story{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:55px;
  color:#eff1f4;
  padding-block:12px
}
.auth-story-brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:#edf0f4;
  font-size:25px;
  letter-spacing:-1px;
  font-weight:600;
  text-decoration:none
}
.auth-story-brand svg{
  width:28px;
  height:30px;
  color:#eef4fb
}
.auth-story-brand>span{
  font-weight:400;
  color:#aab3be
}
.auth-story-kicker{
  font-size:10px;
  letter-spacing:1.5px;
  color:#9bc5f4;
  margin-bottom:23px
}
.auth-story h2{
  font-size:clamp(38px,4vw,56px);
  line-height:1.1;
  font-weight:500;
  letter-spacing:-2.5px;
  white-space:pre-line
}
.auth-story h2+p{
  max-width:390px;
  font-size:14px;
  line-height:1.8;
  color:#a0aab5;
  margin-top:25px
}
.auth-story-foot{
  font:10px "Segoe UI",Tahoma,Arial,sans-serif;
  letter-spacing:1px;
  color:#728193
}
.auth-story-circuit{
  height:150px;
  position:relative;
  margin-top:45px;
  background-image:linear-gradient(#8fa4bc10 1px,transparent 1px),linear-gradient(90deg,#8fa4bc10 1px,transparent 1px);
  background-size:24px 24px;
  display:flex;
  align-items:center
}
.auth-story-circuit span{
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  background:#19232e;
  border:1px solid #425265;
  color:#9bc5f4;
  font-size:40px;
  border-radius:9px;
  position:relative;
  z-index:1
}
.auth-story-circuit i{
  position:absolute;
  height:30px;
  left:80px;
  right:40px;
  border-right:1px solid #425265;
  border-top:1px solid #425265;
  transform:skew(-35deg)
}
.auth-story-circuit i:nth-child(3){
  top:100px;
  right:80px
}
.auth-story-circuit i:nth-child(4){
  top:20px;
  right:90px
}
.auth-card{
  max-width:440px;
  border:1px solid #333e4a;
  border-radius:9px;
  padding:36px;
  background:#ebeef2;
  box-shadow:0 20px 60px #0003
}
.auth-card>.auth-foot{
  display:inline-block;
  margin-top:0;
  margin-bottom:28px;
  color:#3e4f62;
  font-size:12px
}
.auth-head h1{
  font-size:28px;
  letter-spacing:-1px
}
.auth-brand{
  color:#063970
}
.auth-body .btn-brand{
  background:#063970;
  border-color:#063970;
  color:#ffffff;
  min-height:46px;
  border-radius:5px
}
.auth-body .btn-brand:hover{
  background:#0a4f94
}
.auth-body input:focus-visible,.auth-body button:focus-visible,.auth-body a:focus-visible{
  outline:2px solid #395d87;
  outline-offset:3px
}
.auth-body input[type=checkbox]{
  accent-color:#28415d
}
@media(max-width:850px){
  .auth-shell{
    padding:35px;
    gap:35px;
    grid-template-columns:minmax(0,1fr) minmax(320px,1fr)
  }
  .auth-story h2{
    font-size:39px
  }
  .auth-card{
    padding:28px
  }
}
@media(max-width:650px){
  .auth-shell{
    grid-template-columns:1fr;
    padding:30px 20px;
    gap:30px;
    min-height:100dvh
  }
  .auth-story{
    gap:0;
    width:100%;
    max-width:440px;
    padding:0
  }
  .auth-story>div,.auth-story-foot{
    display:none
  }
  .auth-card{
    align-self:start;
    max-width:440px;
    padding:27px
  }
  .auth-story-brand{
    font-size:23px
  }
}