@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap");

:root { --paper:#F3F4F6; --card:#FFF; --ink:#14161A; --faint:#878E9C; --line:#D8DCE3; --true:#1F3FE0; --false:#A3372B; --on:#FFF; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#0E1013; --card:#15181C; --ink:#E6E8EC; --faint:#6B7382; --line:#262B33; --true:#7E93FF; --false:#E08573; --on:#0B0D10; }
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:var(--paper); color:var(--ink);
       font-family:Archivo, system-ui, sans-serif; }
.gate { width:min(340px, 88vw); display:flex; flex-direction:column; gap:22px; padding:32px 28px;
        background:var(--card); border:1px solid var(--line); border-radius:4px; }
h1 { margin:0; font-family:"JetBrains Mono", ui-monospace, monospace; font-weight:500; font-size:20px;
     letter-spacing:.26em; text-indent:.26em; text-align:center; }
.gate-form { display:flex; flex-direction:column; gap:9px; }
label { font:500 10px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
input { padding:11px 12px; background:var(--paper); border:1px solid var(--line); border-radius:3px; color:var(--ink);
        font:400 15px/1.2 "JetBrains Mono", ui-monospace, monospace; }
input:focus-visible { outline:2px solid var(--true); outline-offset:-1px; }
button { margin-top:5px; padding:12px; background:var(--true); border:1px solid var(--true); border-radius:3px;
         color:var(--on); font:500 13px/1 Archivo, system-ui, sans-serif; cursor:pointer; }
button:hover { filter:brightness(1.08); }
.gate-message { margin:0; min-height:1.2em; text-align:center; font-size:12.5px; color:var(--false); }