:root {
  --ground:#0B0F14; --panel:#131A22; --line:#22303C;
  --text:#DCE6EF; --muted:#7C8FA3; --amber:#F0A24B; --flare:#E4574C;
}
* { box-sizing: border-box; }
body {
  margin:0; min-height:100dvh; display:grid; place-items:center;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16202B 0%, transparent 60%),
    var(--ground);
  color:var(--text); font-family:'IBM Plex Mono', ui-monospace, monospace;
}
.gate { width:min(360px, 88vw); text-align:center; }
.gate__mark {
  display:block; width:44px; height:44px; margin:0 auto 22px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); position:relative;
}
.gate__mark::before, .gate__mark::after {
  content:''; position:absolute; left:10px; height:3px; background:var(--amber);
}
.gate__mark::before { top:16px; width:24px; }
.gate__mark::after  { top:24px; width:14px; background:#6EC6E8; }
h1 {
  font-family:Archivo, system-ui, sans-serif; font-weight:900; font-size:15px;
  letter-spacing:.34em; text-transform:uppercase; margin:0 0 4px;
}
.gate__sub { margin:0 0 26px; color:var(--muted); font-size:12px; }
form { display:flex; flex-direction:column; gap:8px; }
input, button {
  font:inherit; font-size:14px; padding:11px 13px; border-radius:8px;
  border:1px solid var(--line); background:var(--panel); color:var(--text);
}
input:focus-visible, button:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
button {
  background:var(--amber); color:#12161B; border-color:transparent; font-weight:600;
  cursor:pointer; letter-spacing:.06em;
}
button:disabled { opacity:.6; cursor:default; }
.gate__err { min-height:18px; margin:14px 0 0; color:var(--flare); font-size:12px; }