/* First-run language gate. Full screen, in front of everything, in the product's own palette:
   the monochrome ground, hairlines, and one round flag per choice.
   Every selector carries .study-page because mono.css sets `body.study-page > *` to
   position:relative; z-index:1, which is one class heavier than a bare .langgate and would
   otherwise pull the layer back into the page flow. */
.study-page .langgate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--mc-ground, #0c0c0d);
  color: var(--mc-ink, #fdfdfd);
  padding: 24px;
}
.study-page .langgate[hidden] { display: none !important; }
body.study-page.langgate-open { overflow: hidden !important; }

.study-page .langgate-card {
  width: min(420px, 100%);
  text-align: center;
}
.study-page .langgate-title {
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mc-muted, #9c9ca4);
}
.study-page .langgate-title span { margin-left: 8px; letter-spacing: .06em; }

.study-page .langgate-opts { display: grid; gap: 14px; }
.study-page .langgate-opt {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 12px 20px;
  border: var(--mc-hair, 1px) solid var(--mc-line, #2c2c2e);
  border-radius: 14px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.study-page .langgate-opt:hover { border-color: var(--mc-accent, #f0cf6a); }
.study-page .langgate-opt:focus-visible { outline: 2px solid var(--mc-accent, #f0cf6a); outline-offset: 3px; }
.study-page .langgate-flag { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; }
.study-page .langgate-flag svg { width: 100%; height: 100%; display: block; }
.study-page .langgate-name { text-align: left; }