/* Ворота: тот же зелёный фон и та же фигура, что в герое сайта. */
body{min-height:100svh;margin:0;overflow-x:hidden}
canvas.ascii{position:fixed;inset:0;width:100vw;height:100svh;opacity:.30;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,#000 50%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,#000 50%,#000 100%)}

.gate{position:relative;z-index:1;min-height:100svh;display:grid;align-items:center;
  padding:clamp(24px,5vw,64px);max-width:1280px;margin:0 auto}
.door{width:min(560px,100%);display:grid;gap:18px}

.gate-mark{display:inline-flex;align-items:center;gap:10px;color:var(--fog);text-decoration:none;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.gate-mark__logo{width:30px;height:30px;display:inline-block;line-height:0;
  filter:drop-shadow(0 0 10px rgba(158,250,226,.35))}
.gate-mark__logo svg{width:100%;height:100%;display:block}

.door .eyebrow{margin:0}
.door h1{margin:0;font-size:clamp(2rem,5vw,3.2rem);line-height:1.04;font-weight:300}
.door__lead{margin:0;color:var(--fg-muted);max-width:44ch}

.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.input{flex:1 1 220px;min-width:0;background:rgba(243,245,244,.04);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  font-family:var(--mono);font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.input::placeholder{color:rgba(243,245,244,.35);letter-spacing:.14em}
.input:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(158,250,226,.16)}
.btn{flex:0 0 auto;background:var(--mint);color:var(--ink);border:0;border-radius:var(--radius);
  padding:14px 26px;font:600 15px/1 var(--sans);cursor:pointer}
.btn:hover{background:#b6ffee}
.btn:disabled{opacity:.6;cursor:default}

.msg{margin:0;min-height:1.4em;font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:var(--fg-muted)}
.msg[data-kind="bad"]{color:var(--ember)}

@media(max-width:900px){
  canvas.ascii{opacity:.13;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.35) 72%,#000 100%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 30%,rgba(0,0,0,.35) 72%,#000 100%)}
}