*,*::before,*::after{box-sizing:border-box;}
html,body{min-height:100%;}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% 16%,rgba(255,255,255,0.048),transparent 24%),
    radial-gradient(circle at 18% 78%,rgba(122,26,0,0.08),transparent 28%),
    radial-gradient(circle at 82% 24%,rgba(255,255,255,0.026),transparent 26%),
    linear-gradient(180deg,#1b1a18 0%,#161513 100%);
  color:#f1e9db;
  font-family:'IBM Plex Mono','Courier Prime','Courier New',monospace;
}
.vault-page{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:42px 24px 86px;
  overflow:hidden;
  isolation:isolate;
}
.vault-exit{
  position:absolute;
  top:30px;
  left:30px;
  z-index:3;
  color:rgba(241,233,219,0.54);
  text-decoration:none;
  font-size:10px;
  font-weight:400;
  letter-spacing:2.2px;
  text-transform:uppercase;
  transition:color 0.18s ease,opacity 0.18s ease;
}
.vault-exit:hover{
  color:rgba(241,233,219,0.82);
}
.vault-page::before,
.vault-page::after{
  content:'';
  position:absolute;
  inset:18px;
  pointer-events:none;
}
.vault-page::before{
  border:1px solid rgba(255,255,255,0.055);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.18);
}
.vault-page::after{
  inset:auto 18px 18px;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.08) 18%,rgba(255,255,255,0.03) 82%,transparent 100%);
}
.vault-room{
  position:relative;
  z-index:2;
  width:min(100%,560px);
  display:grid;
  justify-items:center;
  gap:18px;
  text-align:center;
}
.vault-logo{
  width:min(124px,30vw);
  max-width:124px;
  height:auto;
  filter:invert(1) brightness(1.02) drop-shadow(0 0 24px rgba(255,255,255,0.045));
  user-select:none;
  pointer-events:none;
}
.vault-line{
  margin:0;
  font-size:11px;
  font-weight:400;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:rgba(241,233,219,0.68);
}
.vault-form{
  width:100%;
  display:grid;
  justify-items:center;
  gap:14px;
  margin-top:8px;
}
.vault-input{
  width:min(100%,420px);
  height:54px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(7,7,6,0.14);
  color:#f6efe2;
  font-family:'IBM Plex Mono','Courier Prime','Courier New',monospace;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.34em;
  text-transform:uppercase;
  text-align:center;
  outline:none;
  caret-color:#f6efe2;
  transition:border-color 0.18s ease,background-color 0.18s ease,box-shadow 0.18s ease;
}
.vault-input:focus{
  border-color:rgba(255,255,255,0.28);
  background:rgba(10,10,9,0.24);
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
}
.vault-submit{
  min-width:128px;
  min-height:40px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.02);
  color:#efe7da;
  font-family:'IBM Plex Mono','Courier Prime','Courier New',monospace;
  font-size:10px;
  font-weight:500;
  letter-spacing:2.8px;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color 0.18s ease,background-color 0.18s ease,color 0.18s ease,transform 0.18s ease;
}
.vault-submit:hover{
  border-color:rgba(255,255,255,0.28);
  background:rgba(255,255,255,0.05);
  transform:translateY(-1px);
}
.vault-response{
  min-height:22px;
  margin:2px 0 0;
  font-size:10px;
  font-weight:400;
  letter-spacing:2px;
  line-height:1.7;
  color:rgba(241,233,219,0.76);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 0.24s ease,transform 0.24s ease,color 0.24s ease;
}
.vault-response.is-visible{
  opacity:1;
  transform:none;
}
.vault-response.is-accepted{
  color:#f6efe2;
}
.vault-response.is-denied,
.vault-response.is-empty{
  color:rgba(227,212,195,0.82);
}
.vault-session-note{
  position:absolute;
  left:24px;
  right:24px;
  bottom:22px;
  z-index:2;
  margin:0;
  text-align:center;
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(241,233,219,0.17);
  pointer-events:none;
}
.vault-watermark{
  position:absolute;
  right:28px;
  bottom:24px;
  z-index:1;
  width:min(68px,16vw);
  height:auto;
  filter:invert(1) brightness(1.02);
  opacity:0.06;
  pointer-events:none;
  user-select:none;
}
@media (max-width: 640px){
  .vault-page{
    padding:34px 18px 92px;
  }
  .vault-exit{
    top:20px;
    left:20px;
    font-size:9px;
    letter-spacing:1.8px;
  }
  .vault-page::before{
    inset:12px;
  }
  .vault-page::after{
    left:12px;
    right:12px;
    bottom:12px;
  }
  .vault-room{
    gap:16px;
  }
  .vault-logo{
    width:min(108px,32vw);
  }
  .vault-line{
    font-size:10px;
    letter-spacing:2px;
    line-height:1.6;
  }
  .vault-input{
    width:100%;
    font-size:15px;
    letter-spacing:0.22em;
  }
  .vault-response{
    font-size:9px;
    line-height:1.8;
  }
  .vault-session-note{
    font-size:8px;
    letter-spacing:1.6px;
  }
  .vault-watermark{
    right:18px;
    bottom:16px;
    width:52px;
  }
}