:root {
  --access-ink: #14151d;
  --access-paper: #eae8e8;
  --access-line: rgba(234,232,232,.24);
}

html.access-pending {
  min-height: 100%;
  background: var(--access-ink);
}

html.access-pending body {
  min-height: 100%;
  overflow: hidden !important;
}

html.access-pending body > *:not(.access-gate) {
  visibility: hidden !important;
}

.access-gate {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: clamp(22px,3vw,46px);
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 22%,rgba(117,126,125,.16),transparent 30%),
    radial-gradient(circle at 20% 82%,rgba(190,173,156,.11),transparent 34%),
    var(--access-ink);
  color: var(--access-paper);
  font-family: Arial,Helvetica,sans-serif;
  visibility: visible !important;
  opacity: 1;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1);
}

.access-gate::before,
.access-gate::after {
  content: "";
  position: absolute;
  width: min(62vw,820px);
  aspect-ratio: 1;
  border: 1px solid var(--access-line);
  border-radius: 50%;
  pointer-events: none;
}
.access-gate::before { left:-31vw; top:-38vw; }
.access-gate::after { right:-34vw; bottom:-43vw; }

.access-gate__panel {
  position: relative;
  z-index: 1;
  width: min(680px,100%);
  text-align: center;
}

.access-gate h1 {
  margin: 0;
  font: 400 clamp(3.7rem,7.4vw,8.5rem)/.82 Georgia,"Times New Roman",serif;
  letter-spacing: -.055em;
}

.access-gate form {
  width: min(470px,100%);
  margin: 38px auto 0;
}

.access-gate__field {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  border: 1px solid var(--access-line);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
  transition: border-color .4s ease,background-color .4s ease,transform .4s ease;
}

.access-gate__field:focus-within {
  border-color: rgba(234,232,232,.7);
  background: rgba(255,255,255,.035);
}

.access-gate input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--access-paper);
  font: inherit;
}
.access-gate input::placeholder { color: rgba(234,232,232,.4); }

.access-gate .sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.access-gate button {
  min-width: 118px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--access-paper);
  color: var(--access-ink);
  cursor: pointer;
  font: 600 11px/1 Arial,Helvetica,sans-serif;
  transition: transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
}
.access-gate button:hover { transform: scale(.96); }
.access-gate button:disabled { cursor: wait; opacity:.55; }

.access-gate__status {
  min-height: 20px;
  margin: 13px 0 0;
  color: #d5a9a0;
  font-size: 11px;
}

.access-gate.is-invalid .access-gate__field {
  border-color: rgba(215,119,102,.8);
  animation: access-gate-shake .34s ease;
}

html.access-unlocking .access-gate {
  opacity: 0;
  transform: translateY(-22px) scale(1.015);
  pointer-events: none;
}

@keyframes access-gate-shake {
  25% { transform:translateX(-7px); }
  50% { transform:translateX(6px); }
  75% { transform:translateX(-3px); }
}

@media(max-width:600px) {
  .access-gate { padding:20px; }
  .access-gate__field { grid-template-columns:1fr; gap:10px; padding:10px; border-radius:24px; }
  .access-gate input { min-height:42px; padding:0 10px; text-align:center; }
  .access-gate button { width:100%; }
}

@media(prefers-reduced-motion:reduce) {
  .access-gate,.access-gate button,.access-gate__field { transition-duration:.01ms !important; }
  .access-gate.is-invalid .access-gate__field { animation:none; }
}