:root { --k: #000; --k2: #141414; --line: #262626; --line2: #3a3a3a; --w: #f4f4f2; --w3: #7b7b78; --bad: #ff5a4d; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: grid; place-items: center; background: var(--k); color: var(--w); font: 400 15px/1.5 Geologica, system-ui, sans-serif; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; background-position: center; }
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at center, transparent 0, #000 75%); pointer-events: none; }
.card { position: relative; width: min(420px, calc(100vw - 32px)); padding: 34px; border: 1px solid var(--w); background: var(--k); box-shadow: 12px 12px 0 rgba(255,255,255,.08); }
.brand { display: flex; align-items: center; gap: 12px; font: 800 16px/1 Geologica, sans-serif; letter-spacing: .14em; margin-bottom: 34px; }
.brand em { font-style: normal; font-weight: 300; }
.tally { width: 10px; height: 10px; background: var(--w); animation: t 2.2s steps(2, jump-none) infinite; }
@keyframes t { 50% { opacity: .25; } }
h1 { margin: 0 0 10px; font: 800 38px/1 Geologica, sans-serif; letter-spacing: -.03em; }
p { margin: 0 0 26px; color: var(--w3); font-size: 13.5px; }
form { display: flex; gap: 8px; }
input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 0; background: var(--k); color: var(--w); font: 15px 'JetBrains Mono', monospace; }
input:focus { outline: 0; border-color: var(--w); }
button { padding: 12px 20px; border: 1px solid var(--w); border-radius: 0; background: var(--w); color: var(--k); font: 600 15px Geologica, sans-serif; cursor: pointer; transition: .15s; }
button:hover { background: var(--k); color: var(--w); }
button:disabled { opacity: .6; cursor: wait; }
.err { min-height: 22px; margin-top: 14px; color: var(--bad); font-size: 13px; }
.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }