.gate {
  position: fixed; inset: 0; z-index: 9999;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 4vh, 26px); padding: 32px 24px;
  background: #6b7078; color: #fff;
  font-family: "SF Pro Display", "Helvetica Neue", Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 400; text-align: center;
}
html.gated .gate { display: flex; }
html.gated, html.gated body { overflow: hidden; }
html.gated body > *:not(.gate) { visibility: hidden; }

.gate-title {
  margin: 0; max-width: 22ch;
  font-size: 15px; line-height: 1.7; letter-spacing: .03em;
}

.gate-enter {
  padding: 10px 22px;
  font: inherit; font-size: 13px; letter-spacing: .06em;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 4px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.gate-enter:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .82); }
.gate-enter:active { background: rgba(255, 255, 255, .24); }
.gate-enter:focus-visible { outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; }

/* The head script picks one language before any stylesheet or bundle runs. */
html[data-gate-lang="zh"] .gate [data-gate-lang="en"],
html[data-gate-lang="en"] .gate [data-gate-lang="zh"] { display: none; }