/* Original design, using standard CSS with no framework dependencies. */

:root{font-family:Arial,Helvetica,sans-serif;
  color:#202124;
  background:#f0f4f9}
*{box-sizing:border-box}
body{margin:0}
main{max-width:1120px;
  margin:auto;
  padding:28px}
header{display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px}
header strong{font-size:22px}
header span,.eyebrow{font-size:13px;
  font-weight:700;
  letter-spacing:1.3px;
  color:#425571}
.notice{padding:15px 20px;
  background:#e1eaf9;
  border-left:4px solid #0b57d0;
  line-height:1.6;
  font-size:14px;
  border-radius:4px}
nav{display:flex;
  gap:30px;
  margin:30px 0;
  color:#596573;
  font-size:14px}
nav span{display:flex;
  align-items:center;
  gap:9px}
nav b{display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:#e0e6ee}
nav .active{color:#0b57d0;
  font-weight:700}
nav .active b{color:white;
  background:#0b57d0}
.card{background:white;
  border-radius:28px;
  padding:44px;
  min-width:0}
.email{max-width:760px;
  margin:auto}
h1{font-size:34px;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.7px;
  margin:18px 0 26px}
p{font-size:16px;
  line-height:1.65;
  margin:16px 0}
button{background:#0b57d0;
  color:white;
  border:0;
  border-radius:24px;
  padding:13px 24px;
  font:600 15px Arial;
  cursor:pointer;
  min-height:46px}
button:hover{background:#0842a0}
button:focus-visible{outline:3px solid #9c4c00;
  outline-offset:4px}
button:disabled{opacity:.5;
  cursor:default}
.sender{font-size:14px;
  line-height:1.7;
  overflow-wrap:anywhere}
hr{border:0;
  border-top:1px solid #e3e7ed;
  margin:25px 0}
.small{font-size:14px;
  color:#566170}
.small code{overflow-wrap:anywhere}
aside{background:#f0f4f9;
  border-radius:14px;
  padding:18px 22px;
  margin:26px 0 0}
aside p{margin:6px 0 0;
  font-size:15px}
.signin{display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  padding:50px;
  min-height:420px}
.brand{font-size:28px;
  color:#1764c0;
  letter-spacing:-1px;
  font-weight:600;
  margin-bottom:12px}
.brand span{color:#202124}
.signin h1{font-size:40px;
  margin:24px 0 10px}
.account{display:inline-block;
  border:1px solid #c6cbd1;
  border-radius:22px;
  padding:9px 16px;
  font-size:14px;
  margin-top:8px;
  overflow-wrap:anywhere}
.credentials{padding-top:36px}
.field-label{font-size:14px;
  margin:0 0 8px;
  color:#0b57d0}
.fake-field{display:flex;
  align-items:center;
  min-height:58px;
  border:1px solid #747775;
  border-radius:4px;
  padding:14px;
  font-size:16px;
  overflow-wrap:anywhere}
.text-button{background:transparent;
  color:#0b57d0;
  padding:10px 0;
  border-radius:4px;
  font-size:14px}
.text-button:hover{background:#edf3fd}
.actions{display:flex;
  justify-content:flex-end;
  margin:20px 0 8px}
.reveal h1{font-size:40px;
  max-width:710px}
.reveal>p{max-width:740px}
.captured{background:#fff1df;
  border:1px solid #efd2a9;
  border-radius:16px;
  padding:22px 26px;
  display:flex;
  flex-direction:column;
  gap:12px}
.captured span{font-size:12px;
  font-weight:bold;
  color:#854600;
  letter-spacing:1.2px}
.captured code{font-size:28px;
  overflow-wrap:anywhere}
.assurance{color:#345a44;
  font-size:14px}
.lessons{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-top:30px}
.lessons b{color:#0b57d0;
  font-size:14px}
.lessons h2{font-size:18px;
  margin:10px 0}
.lessons p{font-size:15px;
  margin:0}
.reveal aside{margin-bottom:24px}
footer{font-size:13px;
  color:#566170;
  text-align:center;
  padding:24px 0;
  line-height:1.6}
@media(max-width:700px){main{padding:20px 14px}
header span{font-size:11px;
  max-width:130px;
  text-align:right}
.card{padding:28px 22px;
  border-radius:22px}
h1,.reveal h1{font-size:29px}
.signin{grid-template-columns:1fr;
  gap:10px}
.credentials{padding-top:15px}
.lessons{grid-template-columns:1fr;
  gap:22px}
nav{gap:15px;
  justify-content:space-between}
nav span{font-size:12px;
  gap:5px}
.captured code{font-size:23px}
}


/* Reference-inspired sign-in layout, with explicit classroom branding. */
body{font-family:Arial,Helvetica,sans-serif}
main{max-width:1100px}
.training-label{display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 18px;
  color:#425571;
  font-size:14px;
  margin:0 0 24px;
  line-height:1.5}
.training-label strong{letter-spacing:1px;
  font-size:13px}
.login-view{max-width:1100px;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:50px 28px}
.login-view .signin{width:100%;
  min-height:360px;
  grid-template-columns:1fr 1fr;
  gap:46px;
  border-radius:28px;
  padding:36px}
.identity{padding-top:0}
.brand-mark{color:#0b57d0;
  font-weight:700;
  font-size:44px;
  line-height:48px;
  width:48px;
  position:relative;
  margin:0 0 30px}
.brand-mark span{font-size:25px;
  position:absolute;
  top:-4px;
  right:1px;
  color:#137333}
.signin h1{font-size:38px;
  line-height:1.18;
  letter-spacing:-1.2px;
  margin:0 0 24px}
.identity p{margin:0;
  font-size:16px}
.credentials{padding-top:79px;
  display:flex;
  flex-direction:column;
  align-items:stretch}
.fake-field{min-height:56px;
  color:#444746;
  font-size:16px;
  padding:16px;
  border-color:#80868b}
.text-button{align-self:flex-start;
  font-size:14px;
  font-weight:600;
  min-height:36px;
  padding:7px 0}
.passkey{background:#f8fafd;
  border-radius:28px;
  padding:18px 16px;
  margin:13px 0 0}
.passkey h2{font-size:20px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:-.4px;
  margin:0;
  display:flex;
  align-items:center;
  gap:14px}
.passkey-icon{font-size:23px;
  color:#444746}
.passkey p{font-size:15px;
  line-height:1.5;
  color:#444746;
  margin:14px 0 16px}
.panel-actions{display:flex;
  justify-content:flex-end}
.soft-button{background:#c2e7ff;
  color:#004a77;
  min-height:40px;
  padding:10px 22px;
  font-size:14px;
  font-weight:600}
.soft-button:hover{background:#a8dafb}
.actions{margin:52px 0 0;
  gap:35px;
  align-items:center}
.actions>button:not(.text-button){min-width:80px;
  min-height:40px;
  padding:10px 23px}
.login-footer{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px 16px 0;
  font-size:12px;
  color:#3c4043}
.login-footer>div{display:flex;
  align-items:center;
  gap:30px}
.login-footer a{padding:4px 0;
  font-size:12px;
  font-weight:400;
  color:#3c4043;
  background:transparent;
  min-height:32px;
  border-radius:4px}
.info-panel{background:white;
  border:1px solid #c4d2e4;
  margin:20px 0 0;
  flex-shrink:0}
.info-panel p{font-size:15px;
  margin:0}
.email{margin:0 auto}
.reveal{margin-top:0}
@media(min-width:1500px){.login-view{max-width:1320px}
.login-view .signin{min-height:380px;
  padding:40px;
  gap:65px}
.signin h1{font-size:44px}
.credentials{padding-top:85px}
}
@media(max-width:750px){.login-view{padding:25px 16px;
  justify-content:flex-start}
.login-view .signin{grid-template-columns:1fr;
  gap:32px;
  min-height:0;
  padding:28px 24px}
.brand-mark{margin-bottom:22px}
.signin h1{font-size:32px}
.credentials{padding-top:0}
.actions{margin-top:32px;
  gap:20px}
.login-footer{align-items:flex-start;
  padding:16px 6px;
  line-height:1.5;
  flex-wrap:wrap}
.login-footer>div{gap:24px}
.training-label{justify-content:flex-start;
  font-size:13px}
.passkey h2{font-size:19px}
}


.signin{position:relative;
  overflow:hidden}
.loading-track{position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:#d3e3fd;
  overflow:hidden}
.loading-track span{display:block;
  width:38%;
  height:100%;
  background:#0b57d0;
  animation:practice-loading 1s ease-in-out infinite}
.is-loading .identity,.is-loading .credentials{opacity:.45;
  transition:opacity .18s}
.loading-status{position:absolute;
  bottom:12px;
  left:36px;
  color:#425571;
  font-size:13px;
  line-height:1.5}
.stage-content{animation:practice-enter .25s ease-out}
.captured code+span{margin-top:12px}
.reveal{animation:practice-enter .3s ease-out}
@keyframes practice-loading{from{transform:translateX(-110%)}
to{transform:translateX(365%)}
}
@keyframes practice-enter{from{opacity:0;
  transform:translateX(12px)}
to{opacity:1;
  transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.loading-track span{animation:none;
  width:100%;
  opacity:.7}
.stage-content,.reveal{animation:none}
.is-loading .identity,.is-loading .credentials{transition:none}
}


/* Ensure hidden screens stay hidden despite their layout styles. */
[hidden] { display: none !important; }

/* Editable email field uses the original field styling. */
input.fake-field { width: 100%; font-family: inherit; background: transparent; }
input.fake-field:focus-visible { outline: 2px solid #0b57d0; outline-offset: 1px; }

/* Rounded secondary action matching the Next button's dimensions. */
.actions .create-account-button {
  min-height: 40px;
  padding: 10px 23px;
  border-radius: 24px;
  align-self: center;
  background: transparent;
}
.actions .create-account-button:hover {
  background: #F7F8FE;
}

/* Email validation treatment matching the supplied reference. */
.email-field { position: relative; }
.email-field label {
  position: absolute;
  top: 50%;
  left: 10px;
  padding: 0 6px;
  color: #747775;
  background: #fff;
  font-size: 16px;
  line-height: 20px;
  transform: translateY(-50%);
  transform-origin: left center;
  transition: top 160ms ease, transform 160ms ease, color 160ms ease;
  cursor: text;
}
.email-field input:focus + label,
.email-field input:not(:placeholder-shown) + label,
.email-field.has-error label {
  top: 0;
  transform: translateY(-50%) scale(0.875);
}
.email-field input:focus {
  border: 2px solid #0b57d0;
  padding: 15px;
  outline: none;
}
.email-field input:focus + label { color: #0b57d0; }
.email-field.has-error label { color: #b3261e; }
@media (prefers-reduced-motion: reduce) {
  .email-field label { transition: none; }
}
.email-field.has-error input {
  border: 2px solid #b3261e;
  padding: 15px;
}
.email-field.has-error input:focus-visible { outline: none; }
.email-error {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 8px 0 0;
  color: #b3261e;
  font-size: 14px;
  line-height: 1.4;
}
.error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  height: 18px;
  border-radius: 50%;
  background: #b3261e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.show-password-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  min-height: 32px;
  font-size: 14px;
  color: #202124;
  cursor: pointer;
}
.show-password-label input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #0b57d0;
  cursor: pointer;
}

.login-footer a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.login-footer a:hover { text-decoration: underline; }
.login-footer a:focus-visible { outline: 3px solid #9c4c00; outline-offset: 4px; }

/* Square logo image; replace images/logo.svg to customize. */
img.brand-mark {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}