:root{--navy:#182436;--ink:#142337;--blue:#1d4688;--blue-dark:#16396f;--brand-light:#98b5e1;--muted:#667383;--line:#dbe2e9;--paper:#fff;--pale:#f7f9fb;--error:#8a2424;--focus:#759bcc}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.55 'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--navy);background-image:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px);background-size:28px 28px;display:grid;place-items:center;padding:24px 16px}
.scene{display:grid;grid-template-columns:300px minmax(0,460px);width:100%;max-width:760px;min-height:560px;box-shadow:0 30px 60px #0006}
.panel{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:34px 30px 28px;background:linear-gradient(160deg,#1c2b42,#111a29);color:#f2f2f2;border-top:3px solid var(--brand-light)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{display:block;width:56px;height:64px;object-fit:contain}
.wordmark{display:block;font-size:24px;line-height:1.1;font-weight:650;letter-spacing:-.8px}
.wordmark small{display:block;color:var(--brand-light);font-size:11px;font-weight:500;letter-spacing:4.5px;margin-top:5px}
.mono{font:12px/1.5 'IBM Plex Mono',monospace;letter-spacing:1.8px;color:#b5c9e5;margin:0}
.panel-copy h2{font-size:30px;line-height:1.12;letter-spacing:-.8px;margin:12px 0 14px}
.panel-copy p:last-child{color:#c9d5e6;font-size:15px;margin:0;max-width:24ch}
.panel-foot{color:#8094b0}
.card{position:relative;background:var(--paper);padding:44px 44px 30px;border-top:3px solid var(--blue);display:flex;flex-direction:column}
.step{flex:1}
.eyebrow{font:12px/1.5 'IBM Plex Mono',monospace;letter-spacing:1.8px;color:var(--blue);margin:0 0 14px}
h1{font-size:32px;line-height:1.12;letter-spacing:-.9px;margin:0 0 12px}
.lead{color:var(--muted);margin:0 0 26px;font-size:15px}
label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
input{display:block;width:100%;padding:14px 15px;border:1px solid #adbdcf;background:var(--pale);color:var(--ink);font:inherit;border-radius:0}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#code{font:600 30px/1 'IBM Plex Mono',monospace;letter-spacing:12px;text-align:center;padding:16px 0 16px 12px}
.button{display:block;width:100%;margin-top:18px;padding:15px;background:var(--blue);color:#fff;border:0;font:inherit;font-weight:600;cursor:pointer;transition:background .15s}
.button:hover{background:var(--blue-dark)}
.button[disabled]{opacity:.6;cursor:progress}
.error{min-height:1.4em;margin:12px 0 0;color:var(--error);font-size:14px}
.links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 0;font-size:14px;color:var(--muted)}
.text-button{background:none;border:0;padding:0;font:inherit;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.text-button[disabled]{color:var(--muted);text-decoration:none;cursor:default}
.note{font-size:13px;color:var(--muted);margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.note a{color:var(--blue)}
.foot{font:11px/1.5 'IBM Plex Mono',monospace;letter-spacing:1.6px;color:#8b98a8;margin:18px 0 0}
@media(max-width:760px){
  body{padding:0;place-items:start stretch}
  .scene{grid-template-columns:1fr;max-width:none;min-height:100%;box-shadow:none}
  .panel{gap:20px;padding:22px 22px 20px}
  .panel-copy h2{font-size:24px;margin:8px 0 8px}
  .panel-copy p:last-child{max-width:none}
  .panel-foot{display:none}
  .card{padding:30px 22px 24px;flex:1}
  h1{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.button{transition:none}}