:root{--paper:#F3F2F0;--ink:#141311;--muted:#6B665F;--line:#CFCBC4;--accent:#D33F1F;color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.45;-webkit-text-size-adjust:100%}
.gate{min-height:100%;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top,0px)) 20px max(24px,env(safe-area-inset-bottom,0px));position:relative}
.gate-back{position:absolute;top:max(20px,env(safe-area-inset-top,0px));left:20px;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;color:var(--muted);text-decoration:none}
.gate-back:hover,.gate-back:focus-visible{color:var(--accent)}
.gate-card{width:100%;max-width:400px}
.gate-icon{width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;margin-bottom:26px}
.gate-icon svg{width:20px;height:20px;fill:var(--ink);transform:rotate(45deg)}
.gate-label{margin:0 0 8px;font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.gate h1{margin:0 0 28px;font-family:'Bodoni Moda',Georgia,serif;font-weight:900;font-size:clamp(2.2rem,9vw,3rem);line-height:1;letter-spacing:-.01em}
.gate label{display:block;margin:18px 0 6px;font:500 12px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.04em;color:var(--muted)}
.gate input{width:100%;height:50px;padding:0 14px;border:1px solid var(--line);border-radius:0;background:#fff;color:var(--ink);font:400 18px 'Newsreader',Georgia,serif;-webkit-appearance:none;appearance:none}
.gate input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.gate-err{min-height:1.5em;margin:14px 0 0;font:500 13px/1.4 'IBM Plex Mono',ui-monospace,monospace;color:var(--accent)}
.gate button{width:100%;height:52px;margin-top:6px;border:0;border-radius:0;background:var(--ink);color:var(--paper);font:500 13px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.gate button:hover,.gate button:focus-visible{background:var(--accent)}
.gate button[disabled]{opacity:.6;cursor:progress}
.gate-card.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.gate-card.shake{animation:none}}