.access-gate,
.access-gate * { box-sizing: border-box; }
.access-gate[hidden] { display: none !important; }
html.auth-locked,
html.auth-locked body { min-height: 100%; overflow: hidden; }
.access-gate {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  background: #f5f2eb;
  color: #20362e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.access-card {
  width: min(100%, 380px);
  padding: 38px 36px 36px;
  border: 1px solid #ded4c4;
  border-radius: 22px;
  background: #fffdf9;
  box-shadow: 0 20px 56px rgba(21, 52, 42, .12);
  text-align: center;
}
.access-brand {
  display: block;
  width: 190px;
  height: auto;
  margin-right: auto;
  margin-bottom: 22px;
  margin-left: auto;
  color: #173d31;
  font: 500 19px/1 Georgia, serif;
  letter-spacing: .2em;
}
.access-card h1 { margin: 0; color: #173d31; font: 500 26px/1.3 Georgia, "Songti TC", serif; letter-spacing: .04em; }
.access-card h1 small { display: block; margin-bottom: 10px; color: #a38767; font: 400 10px/1.4 Georgia, serif; letter-spacing: .22em; }
.access-card h1 span { display: block; }
.access-card > p { margin: 10px 0 28px; color: #777a75; font-size: 14px; line-height: 1.6; }
.access-card > .access-tagline { margin: 24px auto 0; max-width: 270px; color: #988f84; font-size: 11px; line-height: 1.8; letter-spacing: .04em; }
.access-card form { margin: 0; }
.access-field { display: block; }
.access-field input {
  display: block;
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #d7d0c4;
  border-radius: 13px;
  outline: none;
  background: #fff;
  color: #173d31;
  font: 400 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.access-field input::placeholder { color: #9a9c97; }
.access-field input:focus { border-color: #6d8178; box-shadow: 0 0 0 3px rgba(23, 61, 49, .1); }
.access-field input[aria-invalid="true"] { border-color: #b96565; }
.access-error { min-height: 20px; margin: 8px 2px 10px; color: #a44d4d; font-size: 13px; line-height: 20px; text-align: left; }
.access-card button {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 13px;
  background: #173d31;
  color: #f5ead7;
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, transform 120ms ease;
}
.access-card button:hover { background: #102f26; }
.access-card button:focus-visible { outline: 3px solid rgba(23, 61, 49, .24); outline-offset: 2px; }
.access-card button:active { transform: translateY(1px); }
.access-card button:disabled { cursor: not-allowed; opacity: .55; }
.access-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
html.auth-unlocking #root { animation: prototype-access-reveal 220ms ease-out both; }
@keyframes prototype-access-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 430px) { .access-gate { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); } .access-card { padding: 32px 22px; border-radius: 18px; } }
@media (max-height: 520px) { .access-gate { place-items: start center; } }
@media (prefers-reduced-motion: reduce) { html.auth-unlocking #root { animation: none; } }