:root {
  --bg:#f3f6fc;
  --ink:#233657;
  --muted:#78879f;
  --blue:#3973e8;
  --line:#e4eaf5
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--bg)
}
button,input {
  font:inherit
}
a {
  color:var(--blue);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #9abcf9;
  outline-offset:3px
}
.page {
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(340px,.95fr) minmax(400px,1.05fr)
}
.story {
  background:linear-gradient(160deg,#20375b,#172b49 70%,#213d64);
  color:white;
  padding:42px 55px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  font-size:25px;
  font-weight:750;
  letter-spacing:-.8px
}
.brand-icon {
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:11px;
  background:#528bff;
  box-shadow:0 5px 20px #0d1d3540;
  font-size:23px;
  color:white
}
.story-content {
  margin:auto 0;
  padding:60px 0;
  position:relative;
  z-index:1;
  max-width:480px
}
.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  color:#9bb9e8;
  font-weight:650
}
.story h1 {
  font-size:43px;
  line-height:1.18;
  letter-spacing:-1.6px;
  font-weight:650;
  margin:17px 0
}
.story h1 span {
  color:#9ec0ff
}
.story p {
  max-width:380px;
  color:#aebfda;
  line-height:1.8;
  font-size:14px
}
.visual {
  position:relative;
  height:210px;
  margin-top:38px;
  display:flex;
  align-items:center;
  padding-left:8px
}
.deck {
  position:relative;
  z-index:2;
  background:#fff;
  color:#254574;
  width:280px;
  height:178px;
  border-radius:10px;
  padding:24px;
  transform:rotate(-5deg);
  box-shadow:0 18px 40px #08182b40
}
.deck.back {
  position:absolute;
  left:32px;
  transform:rotate(7deg);
  background:#aec8f2;
  z-index:1
}
.deck small {
  font-size:8px;
  letter-spacing:1px;
  color:#8197b7
}
.deck h2 {
  font-size:21px;
  line-height:1.3;
  margin:14px 0
}
.deck-line {
  width:42px;
  height:4px;
  border-radius:3px;
  background:#528bff
}
.deck-footer {
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  font-size:9px;
  color:#8ca0bc
}
.ppt-label {
  background:#3b5780;
  border:1px solid #7295c74d;
  color:#d9e7ff;
  position:absolute;
  bottom:0;
  left:198px;
  z-index:3;
  padding:9px 13px;
  border-radius:8px;
  font-size:11px;
  white-space:nowrap
}
.story-footer {
  color:#7f98ba;
  font-size:11px
}
.login-area {
  display:flex;
  flex-direction:column;
  padding:40px 48px;
  min-width:0
}
.mobile-brand {
  display:none;
  color:var(--ink)
}
.top-note {
  align-self:flex-end;
  font-size: 13px;
  color:var(--muted)
}
.login-wrap {
  width:100%;
  max-width:390px;
  margin:auto;
  padding:45px 0
}
.welcome-tag {
  display:inline-block;
  color:#5277b5;
  background:#eaf0fc;
  border-radius:6px;
  padding:5px 9px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.5px
}
.login-wrap h2 {
  font-size:30px;
  letter-spacing:-.9px;
  margin:16px 0 8px;
  font-weight:650
}
.intro {
  font-size:13px;
  color:var(--muted);
  margin:0 0 29px;
  line-height:1.7
}
.field {
  margin-bottom:19px
}
.field label {
  display:block;
  font-size: 13px;
  font-weight:600;
  margin-bottom:7px
}
.field input {
  width:100%;
  border:1px solid #dce4f1;
  background:#fff;
  border-radius:9px;
  padding:13px 14px;
  color:var(--ink);
  min-height:47px;
  box-shadow:0 2px 4px #23365702
}
.field input::placeholder {
  color:#a0adc1
}
.field input:focus {
  border-color:#7fa7ef;
  box-shadow:0 0 0 3px #3973e812
}
.options {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:11px;
  margin:3px 0 23px
}
.remember {
  display:flex;
  align-items:center;
  gap:7px;
  color:#7183a0;
  cursor:pointer
}
.remember input {
  width:15px;
  height:15px;
  margin:0;
  accent-color:var(--blue)
}
.submit {
  width:100%;
  padding:13px 18px;
  background:var(--blue);
  border:1px solid var(--blue);
  border-radius:9px;
  color:white;
  font-weight:600;
  font-size:13px;
  min-height:47px;
  box-shadow:0 5px 12px #3973e81c
}
.submit:disabled {
  opacity:.85;
  cursor:default
}
.submit span {
  margin-left:10px
}
.help {
  padding:16px 0 0;
  text-align:center;
  font-size:11px;
  color:#8998af
}
.demo-note {
  margin-top:27px;
  padding:11px 13px;
  border:1px dashed #d9e3f3;
  border-radius:8px;
  font-size:10px;
  color:#94a1b5;
  line-height:1.6
}
.login-footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  color:#98a5b9
}
.login-footer a {
  color:#8394ad
}
.notice {
  font-size:11px;
  color:#8e9db3;
  margin:6px 0 0;
  max-width:370px
}
.support-details {
  margin-top:16px;
  color:#7c8eaa;
  font-size:11px;
  text-align:center
}
.support-details summary {
  cursor:pointer;
  list-style:none;
  color:#6887b8
}
.support-details summary::-webkit-details-marker {
  display:none
}
.support-details p {
  margin:9px 0;
  line-height:1.7
}
.story:after {
  content:'';
  position:absolute;
  width:470px;
  height:470px;
  right:-285px;
  bottom:-160px;
  border:1px solid #53739b20;
  border-radius:50%;
  box-shadow:0 0 0 65px #53739b08,0 0 0 130px #53739b05;
  pointer-events:none
}
@media(min-width:1600px) {
  .story {
    padding:48px 75px
  }
  .story-content {
    max-width:530px
  }
  .story h1 {
    font-size:49px
  }
  .login-wrap {
    max-width:410px
  }
}
@media(max-width:1050px) {
  .story {
    padding:32px
  }
  .story h1 {
    font-size:35px
  }
  .login-area {
    padding:32px
  }
  .deck {
    width:240px;
    height:168px;
    padding:21px
  }
  .ppt-label {
    left:150px
  }
  .page {
    grid-template-columns:minmax(300px,.9fr) minmax(350px,1.1fr)
  }
}
@media(max-width:760px) {
  .page {
    display:block
  }
  .story {
    display:none
  }
  .login-area {
    min-height:100vh;
    min-height:100dvh;
    padding:25px 24px;
    max-width:550px;
    margin:auto
  }
  .mobile-brand {
    display:flex;
    font-size:23px
  }
  .mobile-brand .brand-icon {
    width:36px;
    height:36px;
    font-size:21px
  }
  .top-note {
    display:none
  }
  .login-wrap {
    padding:45px 0;
    margin:auto;
    width:100%;
    max-width:390px
  }
  .login-wrap h2 {
    font-size:29px
  }
  .intro {
    margin-bottom:25px
  }
  .login-footer {
    padding-top:15px
  }
  .demo-note {
    margin-top:25px
  }
}
@media(max-width:380px) {
  .login-area {
    padding:22px 18px
  }
  .login-wrap {
    padding:35px 0
  }
  .options {
    font-size:10px;
    gap:8px
  }
  .login-footer {
    font-size:9px
  }
  .login-wrap h2 {
    font-size:27px
  }
}
[hidden] {
  display:none!important
}
.text-button {
  border:0;
  background:none;
  color:#3973e8;
  font:inherit;
  font-size:11px;
  padding:3px 0;
  cursor:pointer
}
.text-button:hover {
  text-decoration:underline
}
.back-button {
  display:block;
  margin:20px auto 0;
  padding:8px;
  font-size: 13px
}
.submit {
  cursor:pointer
}
.submit:hover {
  background:#2d65d5
}
.form-status {
  margin:15px 0 0;
  padding:12px 14px;
  border:1px solid #d9e6fb;
  border-radius:8px;
  background:#edf4ff;
  color:#5376a6;
  font-size: 13px;
  line-height:1.7
}
#reset-title:focus {
  outline:none
}
/* More comfortable form typography */

.login-wrap {
  max-width:420px
}
.login-wrap h2 {
  font-size:32px
}
.intro {
  font-size:15px;
  line-height:1.7
}
.welcome-tag {
  font-size:11px;
  padding:6px 10px
}
.field label {
  font-size:14px;
  margin-bottom:9px
}
.field {
  margin-bottom:21px
}
.field input {
  font-size:16px;
  min-height:52px;
  padding:14px 15px
}
.options {
  font-size:13px;
  margin-bottom:25px
}
.remember {
  font-size:13px;
  gap:8px
}
.remember input {
  width:17px;
  height:17px
}
.text-button {
  font-size:13px
}
.submit {
  font-size:16px;
  min-height:53px;
  padding:14px 18px
}
.back-button {
  font-size:14px
}
.support-details {
  font-size:13px;
  margin-top:19px
}
.form-status {
  font-size:14px
}
.demo-note {
  font-size:11px;
  line-height:1.7
}
.login-footer {
  font-size:11px
}
.top-note {
  font-size:13px
}
@media(max-width:760px) {
  .login-wrap {
    max-width:420px
  }
  .login-wrap h2 {
    font-size:30px
  }
  .intro {
    font-size:15px
  }
  .field input {
    font-size:16px
  }
  .submit {
    font-size:16px
  }
  .options {
    font-size:13px
  }
}
@media(max-width:380px) {
  .login-wrap h2 {
    font-size:28px
  }
  .options {
    font-size: 13px;
    gap:8px
  }
  .remember,.options .text-button {
    font-size: 13px
  }
  .login-footer {
    font-size:10px
  }
}
/* Balanced type scale and slightly raised form position */

.login-wrap {
  max-width:400px;
  transform:translateY(-30px)
}
.login-wrap h2 {
  font-size:30px
}
.intro {
  font-size:14px
}
.welcome-tag {
  font-size:10px;
  padding:5px 9px
}
.field label {
  font-size:13px;
  margin-bottom:8px
}
.field {
  margin-bottom:19px
}
.field input {
  font-size:14px;
  min-height:49px;
  padding:13px 14px
}
.options {
  font-size: 13px;
  margin-bottom:23px
}
.remember {
  font-size: 13px
}
.remember input {
  width:16px;
  height:16px
}
.text-button {
  font-size: 13px
}
.submit {
  font-size:14px;
  min-height:49px;
  padding:13px 18px
}
.back-button {
  font-size:13px
}
.support-details {
  font-size: 13px;
  margin-top:17px
}
.form-status {
  font-size: 13px
}
.top-note {
  font-size: 13px
}
@media(max-width:760px) {
  .login-wrap {
    max-width:400px;
    transform:translateY(-22px)
  }
  .login-wrap h2 {
    font-size:29px
  }
  .intro {
    font-size:14px
  }
  .field input {
    font-size:16px
  }
  .submit {
    font-size:14px
  }
  .options,.remember,.options .text-button {
    font-size: 13px
  }
}
@media(max-width:380px) {
  .login-wrap h2 {
    font-size:27px
  }
  .options,.remember,.options .text-button {
    font-size:11px
  }
}
@media(max-height:700px) {
  .login-wrap {
    transform:none;
    padding-top:24px;
    padding-bottom:24px
  }
}


.login-error {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid #f0b8bd;
    border-left: 4px solid #d93646;
    border-radius: 8px;
    background: #fff0f1;
    color: #b42332;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}