:root{
  --blue:#0a5cff;--blue-d:#0049d6;--blue-l:#e6efff;
  --ink:#06142b;--paper:#eef3f9;--field:#cfd9e7;
  --text:#0d1b33;--muted:#52607a;--danger:#d92d4b;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--blue)}
body{min-height:100vh;min-height:100dvh;background:#fff;color:var(--text);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.side :focus-visible{outline-color:#fff}
@media(max-width:959px){.back:focus-visible,.panel-head :focus-visible{outline-color:#fff}}

/* BRAND */
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:none}
.mark{width:32px;height:32px;fill:currentColor;flex:none}
.word{font:800 1.3rem/1 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.word b{font-weight:600;color:#cfe2ff}

/* LAYOUT: on phones the blue side is just the top bar */
.shell{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.side{display:flex;align-items:center;height:64px;padding:0 24px;background:var(--blue);color:#fff}
.side-art{display:none}
.main{flex:1;display:flex;flex-direction:column}
.back{position:absolute;top:0;right:24px;display:flex;align-items:center;gap:8px;height:64px;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.88);transition:color .2s}
.back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.back:hover{color:#fff}

/* PANEL */
.panel{width:100%}
.panel-head{position:relative;padding:14px 24px 52px;background:var(--blue);color:#fff}
.panel-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:repeating-linear-gradient(90deg,#fff 0 22px,transparent 22px 40px) center/100% 3px no-repeat,var(--ink)}
.tab{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:2px solid rgba(255,255,255,.9);border-radius:8px;font:500 .72rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tab::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(255,255,255,.22)}
h1{margin:18px 0 8px;font:800 3.3rem/.92 var(--display);text-transform:uppercase;text-wrap:balance}
.sub{max-width:30em;font-size:1.02rem;color:rgba(255,255,255,.9)}
.panel-body{padding:30px 24px 8px}

/* FORM */
form{display:grid;gap:18px}
fieldset{display:grid;gap:18px;min-width:0;border:0}
fieldset:disabled{opacity:.5}
.field{display:grid;gap:8px}
label{font:500 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
input{width:100%;height:54px;padding:0 16px;border:2px solid var(--field);border-radius:10px;background:#fff;color:var(--ink);font:500 1rem var(--sans);transition:border-color .2s,box-shadow .2s}
input:hover:not(:disabled){border-color:#aebdd3}
input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,92,255,.16)}
input[aria-invalid="true"]{border-color:var(--danger)}
.pw{position:relative}
.pw input{padding-right:86px}
.toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);height:40px;padding:0 13px;border:0;border-radius:7px;background:var(--paper);color:var(--blue);font:700 .95rem/1 var(--display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background-color .2s}
.toggle:hover{background:var(--blue-l)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;cursor:pointer;transition:background-color .2s,transform .2s,opacity .2s}
.btn-main{height:58px;margin-top:4px;border-radius:10px;background:var(--blue);color:#fff;font:700 1.3rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.btn-main:hover:not(:disabled){background:var(--blue-d);transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.alert{margin-bottom:20px;padding:13px 16px;border-left:4px solid;border-radius:4px 10px 10px 4px;font-size:.93rem;line-height:1.55}
.alert.error{color:#7d1428;background:#fdecef;border-color:var(--danger)}
.alert.info{color:var(--ink);background:var(--blue-l);border-color:var(--blue)}
.alert a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.alt{margin-top:24px;font-size:.95rem;color:var(--muted)}
.alt a{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.alt a:hover{color:var(--blue-d)}
.foot{margin-top:auto;padding:28px 24px;font:500 .74rem/1.4 var(--mono);letter-spacing:.06em;color:var(--muted)}

@media(min-width:640px){
  .panel-head,.panel-body,.side,.foot{padding-left:40px;padding-right:40px}
  .back{right:40px}
  h1{font-size:4rem}
}
@media(min-width:960px){
  .shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .side{position:sticky;top:0;height:100vh;flex-direction:column;align-items:flex-start;padding:30px 0 0;overflow:hidden}
  .side .brand{padding:0 56px}
  .mark{width:40px;height:40px}
  .word{font-size:1.6rem}
  .side-art{display:flex;flex:1;flex-direction:column;width:100%;margin-top:7vh}
  .side-tag{padding:0 56px;margin-bottom:auto;font:800 clamp(3.6rem,5.6vw,5.6rem)/.92 var(--display);text-transform:uppercase}
  .side-tag span{display:block;color:var(--ink)}
  .side-photo{position:relative;flex:1;min-height:220px;max-height:62vh;margin-top:24px}
  .side-photo::before{content:"";position:absolute;inset:0 0 auto;height:35%;background:linear-gradient(var(--blue),rgba(10,92,255,0))}
  .side-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 62%}
  .road{position:relative;height:56px;background:var(--ink)}
  .road::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,#fff 0 30px,transparent 30px 54px)}
  .road::after{content:"";position:absolute;inset:7px 0;border-top:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5)}
  .main{min-height:100vh;padding:30px 56px 0}
  .back{position:static;align-self:flex-end;height:40px;color:var(--muted)}
  .back:hover{color:var(--blue)}
  .panel{max-width:440px;margin:auto;padding:40px 0}
  .panel-head{padding:0;background:none;color:var(--ink);margin-bottom:30px}
  .panel-head::after{display:none}
  .tab{color:var(--blue);border-color:var(--blue)}
  .tab::before{box-shadow:0 0 0 4px rgba(10,92,255,.16)}
  h1{font-size:4.4rem}
  .sub{color:var(--muted)}
  .panel-body{padding:0}
  .foot{margin-top:0;padding:24px 0;text-align:center}
}
@media(max-width:380px){
  .word{font-size:1.12rem}
  .mark{width:28px;height:28px}
  .back{font-size:.85rem;gap:6px}
  h1{font-size:2.9rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* "Forgot password?" under the password, and the forgot and reset pages (forgot.js) */
.field-link{display:block;width:max-content;margin:9px 0 0 auto;color:var(--blue);font-size:.88rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.field-link:hover{color:var(--blue-d)}
.alert.ok{color:#0f5132;background:#e8f6ee;border-color:#1f9d55}
.hint{margin-top:7px;font-size:.85rem;color:var(--muted)}
[hidden]{display:none!important}
/* Try the demo (demo.html) */
.demo-list{display:grid;gap:9px;margin:0 0 14px;padding:0;list-style:none}
.demo-list li{position:relative;padding-left:26px;line-height:1.45}
.demo-list li::before{content:"";position:absolute;left:2px;top:.32em;width:14px;height:8px;border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)}
#demo-form{margin-top:18px}