/* gate.css — passcode gateway only. No site branding, no imagery. */
:root{
  --g-bg:#2a1428;
  --g-bg-2:#3b1f38;
  --g-ink:#f7f2e8;
  --g-muted:rgba(247,242,232,.55);
  --g-line:rgba(247,242,232,.2);
  --g-accent:#d9a289;
  --g-error:#e9a89a;
  --g-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --g-sans:"Figtree","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --g-ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 20px;
  background:var(--g-bg);
  color:var(--g-ink);
  font-family:var(--g-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* calm geometry — pure CSS, no imagery */
body::before{
  content:"";
  position:fixed;
  left:50%;
  top:50%;
  width:min(150vmin,1100px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(111,140,161,.16),rgba(111,140,161,0) 62%);
  pointer-events:none;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(to right,var(--g-line) 1px,transparent 1px) 50% 0/33.33% 100%,
    linear-gradient(to bottom,var(--g-line) 1px,transparent 1px) 0 50%/100% 33.33%;
  opacity:.16;
  pointer-events:none;
}
main{position:relative;z-index:1;width:100%;max-width:420px;min-width:0;flex:0 1 420px}
.gate{
  min-width:0;
  background:var(--g-bg-2);
  border:1px solid var(--g-line);
  padding:clamp(28px,6vw,44px);
  box-shadow:0 40px 90px -60px rgba(0,0,0,.9);
}
.gate__mark{
  width:34px;height:34px;border:1px solid var(--g-accent);border-radius:50%;
  display:grid;place-items:center;margin-bottom:clamp(22px,4vw,30px);
}
.gate__mark::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g-accent)}
.gate__label{
  font-family:var(--g-mono);
  font-size:.66rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--g-muted);
  margin:0 0 1.6rem;
}
.gate__field{display:block;margin-bottom:1.15rem}
.gate__field > span{
  display:block;
  font-family:var(--g-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--g-muted);
  margin-bottom:.7rem;
}
.gate__input{
  width:100%;
  min-width:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--g-line);
  color:var(--g-ink);
  font-family:var(--g-mono);
  font-size:1.02rem;
  letter-spacing:.24em;
  padding:.75rem 0;
  border-radius:0;
  transition:border-color .3s var(--g-ease);
  -webkit-appearance:none;
  appearance:none;
}
.gate__input::placeholder{color:rgba(247,242,232,.28);letter-spacing:.24em}
.gate__input:focus{outline:none;border-color:var(--g-accent)}
.gate__input:focus-visible{outline:1px solid var(--g-accent);outline-offset:4px}
.gate[data-state="error"] .gate__input{border-color:var(--g-error)}
.gate__button{
  width:100%;
  margin-top:1.5rem;
  background:var(--g-ink);
  color:var(--g-bg);
  border:1px solid var(--g-ink);
  font-family:var(--g-sans);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1.05rem 1.4rem;
  cursor:pointer;
  border-radius:2px;
  transition:background .3s var(--g-ease),border-color .3s var(--g-ease),color .3s var(--g-ease);
}
.gate__button:hover{background:var(--g-accent);border-color:var(--g-accent);color:var(--g-bg)}
.gate__button:focus-visible{outline:2px solid var(--g-accent);outline-offset:4px}
.gate__error{
  margin:1.1rem 0 0;
  font-family:var(--g-mono);
  font-size:.7rem;
  line-height:1.6;
  letter-spacing:.06em;
  color:var(--g-error);
}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}