/* ==========================================================================
   GlossMath
   Two material worlds on one page:
     - the paper      -> serif, journal measure, hanging section numbers
     - the index      -> monospace identifiers, editor chrome, outline rail
   Accent (ink teal) means "navigable". Amber means "this is the occurrence
   you were looking for" and is used for nothing else.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Math glyph coverage
   TeX Gyre Pagella Math, subset to Mathematical Alphanumeric Symbols
   (U+1D400-1D7FF) plus the letterlike script/fraktur/double-struck forms.
   158KB, built by scripts/build_math_webfont.py. `unicode-range` means it is
   only ever fetched by a reader who actually meets one of these characters.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "GlossMath Math";
  src: url("/static/gm-math.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1D400-1D7FF, U+2100-214F, U+23DC-23E1;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --font-body: ui-serif, Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif 4", Palatino, Georgia, "Times New Roman", serif;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Roboto Mono", monospace;

  /* Symbol keys are set in the mono face, but a symbol is not code: papers use
     the Mathematical Alphanumeric Symbols block (U+1D400-U+1D7FF) freely, and
     no monospace family covers it. `y` (U+1D49A, bold italic small y) rendered
     as a tofu box in the glossary of 2502.08773 while the body showed it fine,
     because the body is set in a serif/math face and the rail is not. Math
     families first, then DejaVu, which covers a good part of that block and is
     the most likely last resort to actually be installed. Code keeps
     --font-mono; only the glyph-bearing chrome uses this. */
  /* GlossMath Math leads deliberately. The rest of this stack names fonts the
     READER might have, and almost nobody has a math font installed -- which is
     why U+1D49A drew a missing-glyph box on the owner's paper even though the
     server had full coverage. Server-side fonts cannot fix a client-side glyph,
     so we ship the coverage ourselves and let the local monospace handle the
     ASCII it is better at. */
  --font-sym: "GlossMath Math", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
              Consolas, "Liberation Mono", "Roboto Mono", "Latin Modern Math",
              "STIX Two Math", "XITS Math", "Cambria Math", "DejaVu Serif",
              "DejaVu Sans", monospace, serif;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 0.9375rem;
  --step-1: 1.0625rem;
  --step-2: 1.3125rem;
  --step-3: 1.6875rem;
  --step-4: 2.375rem;
  --step-5: 3.125rem;

  --rail-w: 21.5rem;
  --topbar-h: 3.375rem;
  --measure: 68ch;
  --radius: 6px;
  --radius-lg: 12px;

  /* Light: neutrals carry a slight teal bias so they read as chosen, not default. */
  --bg: #fbfcfc;
  --bg-sunk: #f3f6f5;
  --surface: #f1f5f4;
  --surface-2: #ffffff;
  --border: #dce4e2;
  --border-strong: #bfcdc9;
  --ink: #121a19;
  --ink-2: #4e5b58;
  --ink-3: #66736f;

  --accent: #0b6b60;
  --accent-hover: #085249;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 107, 96, 0.09);

  --mark: rgba(214, 152, 26, 0.30);
  --mark-strong: rgba(214, 152, 26, 0.58);
  --mark-block: rgba(214, 152, 26, 0.13);
  --warn: #8a5100;

  --sym-link: #0b6b60;
  --sym-soft: #8d9b97;
  --sym-neutral: rgba(18, 26, 25, 0.20);
  --sym-faint: rgba(18, 26, 25, 0.10);

  --shadow-1: 0 1px 2px rgba(14, 32, 30, 0.06), 0 1px 1px rgba(14, 32, 30, 0.04);
  --shadow-2: 0 12px 34px rgba(14, 32, 30, 0.14), 0 2px 6px rgba(14, 32, 30, 0.08);
  --focus: #0b6b60;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e1413;
    --bg-sunk: #0a100f;
    --surface: #151e1c;
    --surface-2: #1a2422;
    --border: #26312f;
    --border-strong: #3a4845;
    --ink: #e8eeec;
    --ink-2: #a6b4b0;
    --ink-3: #8b9995;

    --accent: #4fd1c0;
    --accent-hover: #7be0d2;
    --accent-ink: #08120f;
    --accent-soft: rgba(79, 209, 192, 0.13);

    --mark: rgba(230, 178, 68, 0.26);
    --mark-strong: rgba(230, 178, 68, 0.48);
    --mark-block: rgba(230, 178, 68, 0.11);
    --warn: #e6b244;

    --sym-link: #4fd1c0;
    --sym-soft: #74827e;
    --sym-neutral: rgba(232, 238, 236, 0.22);
    --sym-faint: rgba(232, 238, 236, 0.11);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 14px 38px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.44);
    --focus: #4fd1c0;
  }
}

/* The toggle must beat the media query in BOTH directions. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbfcfc;
  --bg-sunk: #f3f6f5;
  --surface: #f1f5f4;
  --surface-2: #ffffff;
  --border: #dce4e2;
  --border-strong: #bfcdc9;
  --ink: #121a19;
  --ink-2: #4e5b58;
  --ink-3: #66736f;
  --accent: #0b6b60;
  --accent-hover: #085249;
  --accent-ink: #ffffff;
  --accent-soft: rgba(11, 107, 96, 0.09);
  --mark: rgba(214, 152, 26, 0.30);
  --mark-strong: rgba(214, 152, 26, 0.58);
  --mark-block: rgba(214, 152, 26, 0.13);
  --warn: #8a5100;
  --sym-link: #0b6b60;
  --sym-soft: #8d9b97;
  --sym-neutral: rgba(18, 26, 25, 0.20);
  --sym-faint: rgba(18, 26, 25, 0.10);
  --shadow-1: 0 1px 2px rgba(14, 32, 30, 0.06), 0 1px 1px rgba(14, 32, 30, 0.04);
  --shadow-2: 0 12px 34px rgba(14, 32, 30, 0.14), 0 2px 6px rgba(14, 32, 30, 0.08);
  --focus: #0b6b60;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1413;
  --bg-sunk: #0a100f;
  --surface: #151e1c;
  --surface-2: #1a2422;
  --border: #26312f;
  --border-strong: #3a4845;
  --ink: #e8eeec;
  --ink-2: #a6b4b0;
  --ink-3: #8b9995;
  --accent: #4fd1c0;
  --accent-hover: #7be0d2;
  --accent-ink: #08120f;
  --accent-soft: rgba(79, 209, 192, 0.13);
  --mark: rgba(230, 178, 68, 0.26);
  --mark-strong: rgba(230, 178, 68, 0.48);
  --mark-block: rgba(230, 178, 68, 0.11);
  --warn: #e6b244;
  --sym-link: #4fd1c0;
  --sym-soft: #74827e;
  --sym-neutral: rgba(232, 238, 236, 0.22);
  --sym-faint: rgba(232, 238, 236, 0.11);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 14px 38px rgba(0, 0, 0, 0.62), 0 2px 8px rgba(0, 0, 0, 0.44);
  --focus: #4fd1c0;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

button { font: inherit; color: inherit; }
img, svg { max-width: 100%; height: auto; }

/* Several components below set display:flex/grid, which would otherwise beat
   the UA rule for [hidden]. JS toggles this attribute constantly, so it wins. */
[hidden] { display: none !important; }

.gm-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gm-skip {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 200;
  padding: 0.6rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  text-decoration: none;
  box-shadow: var(--shadow-2);
  transition: top 0.15s ease;
}
.gm-skip:focus { top: 0.5rem; }

/* --------------------------------------------------------------------------
   3. Small shared pieces
   -------------------------------------------------------------------------- */

.gm-chip {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
  text-decoration: none;
}
.gm-chip-link { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.gm-chip-link:hover { background: var(--accent-soft); }
.gm-chip-quiet { color: var(--ink-3); background: var(--surface); border-color: var(--border); }
.gm-chip-kind { color: var(--ink-3); background: var(--surface); border-color: var(--border); }

.gm-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gm-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.gm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-size: var(--step--1);
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gm-btn:hover { background: var(--surface); border-color: var(--ink-3); }
.gm-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.gm-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.gm-btn-quiet {
  margin-left: auto;
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--step--2);
}
.gm-btn-quiet:hover { background: var(--surface); color: var(--ink-2); border-color: var(--border); }

.gm-toast {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  z-index: 90;
  transform: translateX(-50%);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: var(--step--1);
  box-shadow: var(--shadow-2);
}
.gm-toast[hidden] { display: none; }

.gm-na {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink-3);
  border-bottom: 1px dotted var(--border-strong);
  cursor: help;
}

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */

.gm-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--border);
}
.gm-topbar-in {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 0 1rem;
}
.gm-topbar-site .gm-topbar-in { max-width: 74rem; margin-inline: auto; }

.gm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.gm-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 1.4rem; height: 1.4rem;
  border-radius: 5px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.95rem;
}

.gm-topbar-title {
  min-width: 0;
  flex: 1 1 auto;
  border-left: 1px solid var(--border);
  padding-left: 1rem;
}
.gm-paper-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-paper-authors {
  margin: 0;
  font-size: var(--step--2);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  margin-left: auto;
}
.gm-toplink {
  font-size: var(--step--1);
  color: var(--ink-2);
  text-decoration: none;
}
.gm-toplink:hover { color: var(--accent); }
.gm-toplink-on { color: var(--accent); }

/* Signed-in surface. Present only when there IS an account, so it never has to
   explain an empty state. Quiet on purpose: it is orientation ("this is who you
   are here"), not a call to action, and no page depends on it. */
.gm-acct {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}
.gm-acct-who {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
}
/* The email is a link to /account. It keeps the quiet chip look until hover,
   because a permanently underlined address in the top bar reads as an error
   message rather than a way in. */
a.gm-acct-who { text-decoration: none; }
a.gm-acct-who:hover,
a.gm-acct-who:focus-visible { color: var(--ink); text-decoration: underline; }
.gm-acct-form { display: flex; margin: 0; }
.gm-acct-out {
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  color: var(--ink-2);
  cursor: pointer;
}
.gm-acct-out:hover { border-color: var(--ink-3); color: var(--ink); }

.gm-icon-btn {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
}
.gm-icon-btn:hover { border-color: var(--ink-3); }

/* Sun in light, moon in dark. Pure CSS marks, no icon font and no mask image:
   if a mask fails to load the button becomes a solid ink square, which is the
   exact "dark blob" failure this toggle already shipped once. Gradients cannot
   fail that way -- an unsupported gradient paints nothing, not a block.
   The sun was a ring around a filled dot, which reads as a record button, so it
   now has the eight rays that make it read as a sun at 16px. */
.gm-theme-ico { display: none; position: relative; width: 1rem; height: 1rem; }
.gm-theme-ico-sun {
  background: radial-gradient(circle at 50% 50%,
              var(--ink-2) 0 0.22rem, transparent 0.23rem);
}
/* Four rays each; the second copy is turned 45deg to make eight. */
.gm-theme-ico-sun::before,
.gm-theme-ico-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) 50% 0    / 1.5px 0.16rem no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 50% 100% / 1.5px 0.16rem no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 0    50% / 0.16rem 1.5px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) 100% 50% / 0.16rem 1.5px no-repeat;
}
.gm-theme-ico-sun::after { transform: rotate(45deg); }
.gm-theme-ico-moon {
  border-radius: 50%;
  box-shadow: inset -0.28rem -0.12rem 0 0 var(--ink-2);
  transform: rotate(-28deg);
}
.gm-theme-ico-sun { display: block; }
@media (prefers-color-scheme: dark) {
  .gm-theme-ico-sun { display: none; }
  .gm-theme-ico-moon { display: block; }
}
:root[data-theme="light"] .gm-theme-ico-sun { display: block; }
:root[data-theme="light"] .gm-theme-ico-moon { display: none; }
:root[data-theme="dark"] .gm-theme-ico-sun { display: none; }
:root[data-theme="dark"] .gm-theme-ico-moon { display: block; }

/* --------------------------------------------------------------------------
   5. Reader layout
   -------------------------------------------------------------------------- */

.gm-reader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  align-items: start;
}
.gm-main { min-width: 0; }

.gm-paper-end {
  max-width: var(--measure);
  margin: 0 auto 5rem;
  padding: 1.25rem 1.25rem 0;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* The scroller is now only a NO-JS fallback and a safety net. When JS has
   measured a block and shrunk it to fit, `.is-fitted` takes the scrollbar away
   for good. Ordering matters: if the fitting code ever throws, the block keeps
   its scrollbar rather than silently losing its right-hand side. */
.gm-scrollx {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.gm-fit.is-fitted { overflow-x: clip; overflow-y: visible; }

/* Shrunk past reading size. Marked, not hidden: the reader should be able to
   tell that this one was squeezed, and get it back at full size. */
.gm-fit.is-tiny {
  position: relative;
  cursor: zoom-in;
  border-radius: var(--radius);
  outline-offset: 2px;
}
.gm-fit.is-tiny:hover, .gm-fit.is-tiny:focus-visible { background: var(--bg-sunk); }
.gm-fit.is-tiny::after {
  content: "tap to enlarge";
  position: absolute;
  right: 0.35rem;
  bottom: 0.1rem;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  color: var(--ink-3);
  opacity: 0.75;
}

.gm-zoom {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: none;
  place-items: center;
  padding: 3.5rem 1rem 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
}
.gm-zoom.is-open { display: grid; }
.gm-zoom-in {
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
.gm-zoom-in .ltx_equation, .gm-zoom-in .ltx_equationgroup { margin: 0; width: auto; }
.gm-zoom-x {
  position: absolute;
  top: 1rem; right: 1rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-2);
  cursor: pointer;
}
.gm-zoom-x:hover { border-color: var(--ink-3); color: var(--ink); }

/* --------------------------------------------------------------------------
   6. The paper. LaTeXML output, set like a reading page.
      Selectors use :where() so component classes always win the cascade.
   -------------------------------------------------------------------------- */

.gm-paper {
  width: min(100%, 62rem);
  margin-inline: auto;
  padding: 3rem 1.25rem 4rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.72;
  color: var(--ink);
}

/* Text blocks share one measure and one left edge. Wide things do not. */
.gm-paper :where(p, .ltx_p, li, dd, dt, blockquote, h1, h2, h3, h4, h5, h6,
                 .ltx_abstract, .ltx_caption, .ltx_bibitem, .ltx_theorem, .ltx_proof, .ltx_listingline) {
  max-width: var(--measure);
  margin-inline: auto;
}

.gm-paper :where(p, .ltx_p) { margin: 0 0 1.05em; }
.gm-paper :where(.ltx_para) { margin: 0 0 0.4rem; }

/* Chrome LaTeXML emits that a reader does not need. */
.gm-paper :where(.ltx_page_navbar, .ltx_page_footer, .ltx_page_logo, .ltx_rdf, .ltx_role_refnum + .ltx_ERROR) {
  display: none;
}
.gm-paper :where(.ltx_page_main, .ltx_page_content, .ltx_document) { margin: 0; padding: 0; }

/* Title block */
.gm-paper :where(.ltx_title_document) {
  margin: 0 auto 1.25rem;
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.gm-paper :where(.ltx_authors) {
  max-width: var(--measure);
  margin: 0 auto 2rem;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  color: var(--ink-2);
  line-height: 1.5;
}
.gm-paper :where(.ltx_creator) { display: inline; }
.gm-paper :where(.ltx_personname) { font-weight: 600; color: var(--ink); }
.gm-paper :where(.ltx_author_notes, .ltx_contact) {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* Abstract reads as a distinct register: slightly inset, own rule. */
.gm-paper :where(.ltx_abstract) {
  margin: 0 auto 2.75rem;
  padding: 1.25rem 0 1.25rem 1.25rem;
  border-left: 2px solid var(--accent);
  background: linear-gradient(to right, var(--accent-soft), transparent 70%);
  font-size: 1.02em;
}
.gm-paper :where(.ltx_abstract > h6, .ltx_abstract > .ltx_title_abstract) {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.gm-paper :where(.ltx_abstract p:last-child) { margin-bottom: 0; }

/* Headings */
.gm-paper :where(.ltx_title_section) {
  margin: 3rem auto 0.9rem;
  font-size: var(--step-2);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.gm-paper :where(.ltx_title_subsection) {
  margin: 2.1rem auto 0.7rem;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
}
.gm-paper :where(.ltx_title_subsubsection, .ltx_title_paragraph) {
  margin: 1.6rem auto 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}

/* Section numbers are real information, so they get the margin, not the line. */
.gm-paper :where(.ltx_title) .ltx_tag {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  color: var(--accent);
}
@media (min-width: 72rem) {
  .gm-paper :where(.ltx_title_section, .ltx_title_subsection) { position: relative; }
  .gm-paper :where(.ltx_title_section, .ltx_title_subsection) > .ltx_tag {
    position: absolute;
    right: calc(100% + 1rem);
    top: 0.28em;
    text-align: right;
    white-space: nowrap;
  }
}

/* Links inside the paper: citations and refs read as quiet, math links do not. */
.gm-paper :where(.ltx_ref, .ltx_cite, .ltx_url) {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.gm-paper :where(.ltx_ref:hover, .ltx_cite:hover, .ltx_url:hover) {
  border-bottom-color: var(--accent);
  background: var(--accent-soft);
}
.gm-paper :where(.ltx_ref_self) { color: inherit; border: 0; }

/* Nothing in the paper may be wider than what contains it. Without this a wide
   equation does not just get its own scrollbar, it drags the whole document
   sideways, which at 390px is the symptom a reader actually notices. This is
   the structural half of the no-scrollbar rule; reader.js then shrinks the
   content until it fits inside the box this clamps. */
.gm-paper :where(.ltx_equation, .ltx_equationgroup, .ltx_eqn_table,
                 table.ltx_tabular, math, .ltx_Math, mjx-container,
                 .ltx_transformed_outer, .ltx_transformed_inner,
                 .ltx_markedasmath, .ltx_inline-block,
                 /* Figures carry their own widths from the source: a
                    \begin{minipage}{0.48\textwidth} becomes an inline px width
                    that assumed a 600px column. On 2502.08773 at 390px a figure
                    panel was 567px wide and took the document with it. */
                 .ltx_figure, .ltx_figure_panel, .ltx_minipage, .ltx_picture,
                 .ltx_graphics, .ltx_flex_cell, svg) {
  max-width: 100%;
}
/* Inside a display equation the clamp has to come OFF the individual cell.
   Clamping the math too made the browser answer by compressing that table
   column below its content, so every cell reported an 11px overflow that no
   amount of shrinking could close: the column allocation tracked the content
   down. The table as a whole is still clamped, and reader.js sizes it from its
   natural width, so the cells never need compressing in the first place. */
.gm-paper :where(.ltx_equation, .ltx_equationgroup, .ltx_eqn_table)
          :where(math, .ltx_Math) {
  max-width: none;
}

/* Equations. JS wraps these in .gm-scrollx; noscript makes them scroll themselves. */
.gm-paper :where(.ltx_equation) {
  width: 100%;
  margin: 1.6rem 0;
  border-spacing: 0;
  font-size: 1em;
}
.gm-paper :where(.ltx_equationgroup) { margin: 1.6rem 0; }
.gm-paper :where(.ltx_eqn_cell) { padding: 0.15rem 0; }
.gm-paper :where(.ltx_eqn_center_padleft, .ltx_eqn_center_padright) { width: 50%; }
.gm-paper :where(.ltx_eqn_eqno) {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-3);
  padding-left: 1rem;
  white-space: nowrap;
  vertical-align: middle;
}
.gm-paper .gm-scrollx {
  margin: 1.6rem 0;
  padding: 0.35rem 0.25rem;
  border-radius: var(--radius);
}
.gm-paper .gm-scrollx > .ltx_equation { margin: 0; }
.gm-paper .gm-scrollx:hover { background: var(--bg-sunk); }

/* Math itself */

/* The body needs the shipped math font too, and this is the line whose absence
   the owner kept reading as "the text is still messed up".

   The webfont was added for the glossary rail on the belief that "the body
   showed it fine". It did -- on a machine whose system fallback happened to
   cover U+1D400-U+1D7FF. The paper body inherits --font-body, which is
   ui-serif/Charter/Georgia/Times: not one of them carries the Mathematical
   Alphanumeric Symbols block, so on everyone else's machine every script and
   double-struck letter in the prose drew a missing-glyph box. On 2502.08773
   that is most of the notation: "a finite, non-empty vocabulary of tokens []".
   One reader's fallback coverage cannot certify another's, which is the same
   lesson as "server-side fonts cannot fix a client-side glyph", one step later.

   Naming it FIRST costs nothing elsewhere: the @font-face carries a
   `unicode-range`, so the browser reaches for it only for the codepoints in
   that range and every other character still comes from --font-body. The rest
   of the page is byte-for-byte the same as before. */
.gm-paper math,
.gm-paper .ltx_Math { font-family: "GlossMath Math", var(--font-body); }
.gm-paper math { font-size: 1.03em; }
.gm-paper math[display="block"] { margin: 0 auto; }

/* Theorems */
.gm-paper :where(.ltx_theorem, .ltx_proof) {
  margin: 1.6rem auto;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--border-strong);
  background: var(--bg-sunk);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.gm-paper :where(.ltx_theorem .ltx_title, .ltx_proof .ltx_title) {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 650;
  margin: 0 0 0.4rem;
}

/* Lists */
.gm-paper :where(ul, ol) { padding-left: 1.4rem; margin: 0 auto 1.05em; max-width: var(--measure); }
.gm-paper :where(li) { margin-bottom: 0.35em; }
.gm-paper :where(.ltx_itemize, .ltx_enumerate) { list-style-position: outside; }
.gm-paper :where(.ltx_item) > .ltx_tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-3);
  margin-right: 0.4rem;
}

/* Figures and tables get the full column and their own scroller. */
.gm-paper :where(figure, .ltx_figure, .ltx_table, .ltx_float) {
  margin: 2.25rem auto;
  padding: 0;
}
.gm-paper :where(.ltx_caption) {
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}
.gm-paper :where(.ltx_caption .ltx_tag) {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}
.gm-paper :where(.ltx_graphics, .ltx_figure img) {
  display: block;
  margin-inline: auto;
  border-radius: var(--radius);
}

.gm-paper :where(table.ltx_tabular) {
  border-collapse: collapse;
  margin-inline: auto;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.gm-paper :where(table.ltx_tabular td, table.ltx_tabular th) {
  padding: 0.45rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.gm-paper :where(table.ltx_tabular th, .ltx_th) { font-weight: 650; }
.gm-paper :where(.ltx_border_t, .ltx_border_tt) { border-top: 1px solid var(--border-strong); }
.gm-paper :where(.ltx_border_b, .ltx_border_bb) { border-bottom: 1px solid var(--border-strong); }
.gm-paper :where(.ltx_border_r) { border-right: 1px solid var(--border); }
.gm-paper :where(.ltx_border_l) { border-left: 1px solid var(--border); }
.gm-paper :where(table.ltx_tabular tr:hover) { background: var(--bg-sunk); }

/* Code and verbatim */
.gm-paper :where(.ltx_verbatim, .ltx_listing, pre) {
  max-width: 100%;
  overflow-x: auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunk);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.55;
}
.gm-paper :where(code, .ltx_font_typewriter) { font-family: var(--font-mono); font-size: 0.9em; }

/* Footnotes: a hover aside instead of a jump to the bottom. */
.gm-paper :where(.ltx_note) { position: relative; }
.gm-paper :where(.ltx_note_mark) {
  font-family: var(--font-ui);
  font-size: 0.7em;
  vertical-align: super;
  color: var(--accent);
  cursor: help;
}
.gm-paper :where(.ltx_note_content) {
  position: absolute;
  left: 0; top: 1.4em;
  z-index: 30;
  display: none;
  width: min(26rem, 80vw);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}
.gm-paper :where(.ltx_note:hover, .ltx_note:focus-within) .ltx_note_content { display: block; }

/* Bibliography */
.gm-paper :where(.ltx_bibliography) { margin-top: 3rem; }
.gm-paper :where(.ltx_biblist) { list-style: none; padding: 0; margin: 0; }
.gm-paper :where(.ltx_bibitem) {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 0.75rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--border);
  font-size: var(--step-0);
  line-height: 1.5;
}
.gm-paper :where(.ltx_bibitem) > .ltx_tag {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.gm-paper :where(.ltx_bibblock) { grid-column: 2; color: var(--ink-2); }
.gm-paper :where(.ltx_bibblock:first-of-type) { color: var(--ink); }
.gm-paper :where(.ltx_bib_title) { font-style: italic; }

/* LaTeXML font roles */
.gm-paper :where(.ltx_font_bold) { font-weight: 650; }
.gm-paper :where(.ltx_font_italic) { font-style: italic; }
.gm-paper :where(.ltx_font_smallcaps) { font-variant: small-caps; }
.gm-paper :where(.ltx_text_ltx_font_mathcaligraphic) { font-style: italic; }

/* --------------------------------------------------------------------------
   7. Symbols. The whole product, expressed in two properties:
        box-shadow  -> the link affordance (is this navigable?)
        background  -> state (is this the occurrence you are looking at?)
      They never collide, so a lit symbol keeps its underline.
   -------------------------------------------------------------------------- */

.gm-sym {
  border-radius: 2px;
  box-shadow: inset 0 -1px 0 var(--sym-neutral);
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* States are only asserted once JS knows which symbols are actually resolved. */
.gm-js .gm-sym { box-shadow: none; }

.gm-js .gm-sym[data-gm-state="linked"] {
  box-shadow: inset 0 -1.5px 0 var(--sym-link);
  cursor: pointer;
}
.gm-js .gm-sym[data-gm-state="linked"]:hover { box-shadow: inset 0 -2px 0 var(--sym-link); }

/* Abstained: dashed and grey. Deliberately not the link colour. */
.gm-js .gm-sym[data-gm-state="soft"] {
  background-image: repeating-linear-gradient(to right, var(--sym-soft) 0 2px, transparent 2px 5px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  cursor: help;
}

.gm-js .gm-sym[data-gm-state="minor"] {
  box-shadow: inset 0 -1px 0 var(--sym-faint);
  cursor: help;
}

/* --------------------------------------------------------------------------
   Per-symbol colour. Four slots, and four is still a measured ceiling.

   The colour is now on the GLYPH, not behind it. The owner asked for it in
   those words -- "the color doesn't really stand out maybe font color instead
   of highlight" -- and a 9% wash behind ink-coloured text was indeed a whisper.

   That move changes what the palette has to clear. A tint is a non-text mark
   and answers to 3:1; a coloured glyph IS the text and answers to 4.5:1. Three
   of the four light steps and one dark step failed that, so all four are
   re-stepped, and the light column is measured against --bg-sunk rather than
   --bg because the lit state sits on the sunk surface and is the worst case:

     rest (hue on --bg)          worst 4.87:1 light / 4.66:1 dark
     lit  (hue on --bg-sunk)     worst 4.61:1 light / 4.81:1 dark
     active (--bg on hue fill)   worst 4.87:1 light / 4.66:1 dark

   All-pairs dE2000, the four slots AND the ink (so a coloured symbol never
   reads as ordinary text): worst 33.5 light / 36.6 dark against a floor of 15.
   Four of four slots survive the re-step.

   Colour is still never the only channel: the underline stays, and the rail
   carries a swatch beside the key.
   -------------------------------------------------------------------------- */
:root {
  --hue-1: #156fcc;
  --hue-2: #9a6200;
  --hue-3: #ae4e74;
  --hue-4: #008200;
}
@media (prefers-color-scheme: dark) {
  :root { --hue-1: #3987e5; --hue-2: #c98500; --hue-3: #d55181; --hue-4: #249319; }
}
:root[data-theme="light"] {
  --hue-1: #156fcc; --hue-2: #9a6200; --hue-3: #ae4e74; --hue-4: #008200;
}
:root[data-theme="dark"] {
  --hue-1: #3987e5; --hue-2: #c98500; --hue-3: #d55181; --hue-4: #249319;
}

[data-gm-hue="1"] { --hue: var(--hue-1); }
[data-gm-hue="2"] { --hue: var(--hue-2); }
[data-gm-hue="3"] { --hue: var(--hue-3); }
[data-gm-hue="4"] { --hue: var(--hue-4); }

/* The glyph wears the colour. No wash at rest: a tint of the SAME hue behind
   hue-coloured text is the one background that cannot work -- measured, every
   alpha from 9% to 40% drops the glyph under 4.5:1, and so does the neutral
   amber mark (3.57:1 light, 2.70:1 dark). So the coloured states are carried by
   the surface instead of by a translucent wash. */
.gm-js.gm-color .gm-sym[data-gm-hue] {
  color: var(--hue);
  box-shadow: inset 0 -1.5px 0 var(--hue);
  background-color: transparent;
}
.gm-js.gm-color .gm-sym[data-gm-hue]:hover {
  box-shadow: inset 0 -2.5px 0 var(--hue);
}
/* Hovering the rail entry lights every other use. A coloured symbol lights on
   the sunk surface and keeps its own hue: the generic amber wash would
   otherwise beat these rules on specificity and repaint the thing whose colour
   you were following. */
.gm-js.gm-color .gm-sym[data-gm-hue].gm-lit {
  background-color: var(--bg-sunk);
  box-shadow: inset 0 -2.5px 0 var(--hue);
}
/* The occurrence you are actually on inverts into a solid chip. Same colour
   pair as the resting state, so the contrast is identical in both directions,
   and it is the one state that has to be findable from across the page. */
.gm-js.gm-color .gm-sym[data-gm-hue].is-active {
  background-color: var(--hue);
  color: var(--bg);
  box-shadow: none;
}

/* The swatch is the second channel: it sits against the key, so identity never
   rests on hue alone. It is only rendered for a symbol that has a slot. */
.gm-swatch {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.4rem;
  border-radius: 2px;
  background: var(--hue, transparent);
}
.gm-color .gm-entry[data-gm-hue] .gm-entry-key { box-shadow: inset 0 -2px 0 var(--hue); }
:root:not(.gm-color) .gm-swatch { display: none; }

/* The toggle's own mark: four quadrants in the four slot colours, so the
   button shows what it controls rather than naming it. */
.gm-color-ico {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  background:
    linear-gradient(to bottom right,
      var(--hue-1) 0 25%, var(--hue-2) 25% 50%,
      var(--hue-3) 50% 75%, var(--hue-4) 75% 100%);
}
:root:not(.gm-color) .gm-color-ico { filter: grayscale(1); opacity: 0.5; }

/* Co-occurrence wash: every other use of the same symbol, at once. */
.gm-lit { background-color: var(--mark); }
.gm-sym.is-active {
  background-color: var(--mark-strong);
  box-shadow: inset 0 -2px 0 var(--sym-link);
}

@keyframes gm-flash-kf {
  from { background-color: var(--mark-strong); }
  to { background-color: transparent; }
}
@keyframes gm-flash-block-kf {
  from { background-color: var(--mark-block); }
  to { background-color: transparent; }
}
.gm-flash { border-radius: 3px; animation: gm-flash-kf 1.2s ease-out; }
.gm-flash-block { border-radius: var(--radius); animation: gm-flash-block-kf 1.2s ease-out; }

/* --------------------------------------------------------------------------
   8. The symbol card
   -------------------------------------------------------------------------- */

.gm-card {
  position: fixed;
  z-index: 80;
  width: min(23.5rem, calc(100vw - 1.5rem));
  padding: 0.85rem 0.95rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  line-height: 1.5;
}
.gm-card[hidden] { display: none; }
.gm-card.is-pinned { border-color: var(--accent); }

.gm-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.gm-card-sym {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 2.9rem;
  min-height: 2.9rem;
  padding: 0 0.4rem;
  border-radius: var(--radius);
  background: var(--bg-sunk);
  /* Math families FIRST here, not appended: --font-body already ends in the
     generic `serif`, and nothing after a generic family is ever reached.
     The one we SHIP leads, for the same reason it leads in --font-sym: the
     other three are fonts the reader may simply not have. */
  font-family: "GlossMath Math", "Latin Modern Math", "STIX Two Math",
               "Cambria Math", var(--font-body);
  font-size: 1.45rem;
  color: var(--ink);
}
.gm-card-sym math { font-size: 1.45rem; }
/* Multi-character keys (every juxtaposition) at glyph size wrap the head onto
   three rows. They get body size and the slot stops being a square. */
.gm-card-sym.is-long {
  min-width: 0;
  max-width: 9.5rem;
  padding: 0.35rem 0.5rem;
  font-size: var(--step-0);
  overflow-wrap: anywhere;
}
.gm-card-sym.is-long math { font-size: var(--step-0); }
.gm-card-ident { min-width: 0; }
.gm-card-key {
  display: block;
  font-family: var(--font-sym);
  font-size: var(--step--1);
  color: var(--ink);
  overflow-wrap: break-word;
}
.gm-card-key sub, .gm-card-key sup { font-size: 0.72em; }
.gm-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
  flex-wrap: wrap;
}
.gm-card-count { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

/* The gloss is about the paper, so it is set in the paper's face. */
.gm-card-gloss {
  margin: 0.7rem 0 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
}

/* The category note is OURS, not the paper's, so it stays in the UI face and a
   step quieter than a gloss. It is not boxed and not padded: it is one line of
   filing information, and dressing it up would imply we know more than we do. */
.gm-card-note {
  margin: 0.7rem 0 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}
.gm-card-note[hidden] { display: none; }

.gm-card-shape { margin: 0.5rem 0 0; display: flex; gap: 0.4rem; align-items: baseline; }
.gm-card-shapeval { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-2); }

.gm-card-quote {
  margin: 0.7rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--accent);
}
.gm-card-quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
}
.gm-card-quote figcaption { margin-top: 0.35rem; display: flex; gap: 0.35rem; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

.gm-card-abstain {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: var(--step--1);
}
.gm-abstain-tag { display: block; font-weight: 650; color: var(--ink); }

.gm-card-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.gm-card-foot .gm-btn[hidden] { display: none; }
/* `wrong?` is pushed right to sit away from the primary actions. When it is the
   only action left -- every non-glossary kind -- `margin-left:auto` strands it
   in the far corner and it reads as a broken link, so it goes back to the flow.
   `:only-child` cannot do this: the hidden buttons are still DOM children. */
.gm-card.is-lone-action .gm-card-foot .gm-btn-quiet { margin-left: 0; }

.gm-flagmenu {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 0.5rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunk);
}
.gm-flagmenu[hidden] { display: none; }
.gm-flagmenu button {
  padding: 0.35rem 0.5rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  text-align: left;
  font-size: var(--step--1);
  color: var(--ink-2);
  cursor: pointer;
}
.gm-flagmenu button:hover { background: var(--surface); color: var(--ink); }

.gm-card-thanks { margin: 0.6rem 0 0; color: var(--accent); font-size: var(--step--1); }
.gm-card-thanks[hidden] { display: none; }

/* --------------------------------------------------------------------------
   9. Glossary rail
   -------------------------------------------------------------------------- */

.gm-rail {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  border-left: 1px solid var(--border);
  background: var(--surface);
}
.gm-rail-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gm-rail-head {
  flex: none;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border);
}
.gm-rail-count {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.gm-rail-sub {
  margin: 0.15rem 0 0.75rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
}
.gm-filter {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.gm-filter::placeholder { color: var(--ink-3); }
.gm-rail-close { display: none; }

.gm-rail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 1rem;
}

.gm-group { border-bottom: 1px solid var(--border); }
.gm-group[hidden] { display: none; }
.gm-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.8rem 1rem 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gm-group-n {
  padding: 0.05em 0.4em;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink-2);
}
summary.gm-group-head { cursor: pointer; list-style: none; }
summary.gm-group-head::-webkit-details-marker { display: none; }
summary.gm-group-head::after {
  content: "";
  width: 0.4rem; height: 0.4rem;
  margin-left: auto;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}
.gm-group-abstain[open] > summary.gm-group-head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gm-group-note {
  margin: 0 1rem 0.5rem;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--ink-3);
}

.gm-entries { list-style: none; margin: 0; padding: 0 0.5rem 0.6rem; }
.gm-entry { border-radius: var(--radius); }
.gm-entry[hidden] { display: none; }
.gm-entry-a {
  display: block;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
a.gm-entry-a:hover, .gm-entry.is-lit > .gm-entry-a { background: var(--surface-2); }
.gm-entry.is-lit > .gm-entry-a { box-shadow: inset 2px 0 0 var(--accent); }

.gm-entry-top { display: flex; align-items: baseline; gap: 0.5rem; }
/* An identifier is one token. It never breaks across lines. */
.gm-entry-key {
  flex: none;
  font-family: var(--font-sym);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow-wrap: normal;
}
.gm-entry-key sub, .gm-entry-key sup { font-size: 0.72em; }
.gm-entry-count {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.gm-entry-gloss {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.1rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-2);
}
.gm-entry-where {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
}

/* An operator entry reads as an expansion: LN = LayerNorm */
.gm-entry-def { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; }
.gm-eq { color: var(--ink-3); font-family: var(--font-mono); }
.gm-entry-expansion {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-2);
}

.gm-entry-abstain .gm-entry-key { color: var(--ink-2); font-weight: 500; }
.gm-entry-reason {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--ink-3);
}

.gm-rail-empty, .gm-rail-nomatch { margin: 1rem; font-size: var(--step--1); color: var(--ink-3); }
.gm-rail-nomatch[hidden] { display: none; }

.gm-rail-foot {
  flex: none;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--2);
  line-height: 1.45;
  color: var(--ink-3);
}
.gm-rail-foot p { margin: 0 0 0.25rem; }
.gm-rail-foot p:last-child { margin: 0; }

/* --------------------------------------------------------------------------
   10. Drawer under 1000px
   -------------------------------------------------------------------------- */

.gm-drawer-toggle { display: none; }
.gm-scrim { display: none; }

@media (max-width: 1000px) {
  .gm-reader { grid-template-columns: minmax(0, 1fr); }
  .gm-topbar-title { border-left: 0; padding-left: 0; }
  .gm-paper-authors { display: none; }

  /* On the reader the paper title has first claim on this bar, so the address
     goes and only the control stays. On the site pages there is room for both. */
  .gm-page-reader .gm-acct-who { display: none; }
  .gm-page-reader .gm-acct { padding-left: 0.5rem; }

  .gm-rail {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    z-index: 70;
    height: min(78vh, 34rem);
    height: min(78dvh, 34rem);
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-2);
    transform: translateY(101%);
    transition: transform 0.22s ease;
    visibility: hidden;
  }
  .gm-rail.is-open { transform: translateY(0); visibility: visible; }

  .gm-rail-head { position: relative; padding-top: 1.15rem; }
  .gm-rail-head::before {
    content: "";
    position: absolute;
    left: 50%; top: 0.45rem;
    width: 2.25rem; height: 0.25rem;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--border-strong);
  }
  .gm-rail-close {
    display: block;
    position: absolute;
    right: 0.75rem; top: 0.9rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    font-size: var(--step--2);
    color: var(--ink-2);
    cursor: pointer;
  }

  .gm-drawer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    position: fixed;
    right: 1rem; bottom: 1rem;
    z-index: 65;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--accent);
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: var(--step--1);
    font-weight: 600;
    box-shadow: var(--shadow-2);
    cursor: pointer;
  }
  .gm-drawer-n {
    padding: 0.05em 0.45em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-ink) 22%, transparent);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .gm-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 68;
    background: rgba(4, 12, 11, 0.42);
  }
  .gm-scrim[hidden] { display: none; }

  .gm-paper { padding-top: 2rem; }
  :root { --measure: 100%; }
}

@media (max-width: 640px) {
  :root { --step-4: 1.9rem; --step-1: 1.0625rem; }
  .gm-paper { padding-inline: 1rem; }
  .gm-topbar-in { padding-inline: 0.75rem; gap: 0.6rem; }
  /* Drop the wordmark, not the render-source chip. How the page was built
     is information the reader is owed; our own name is not. */
  .gm-brand { font-size: 0; gap: 0; }
  .gm-paste, .gm-signin { grid-template-columns: minmax(0, 1fr); }
  .gm-paste-go { grid-column: 1; }
  /* The index drops its date column before it drops the title. */
  .gm-index-row { grid-template-columns: minmax(0, 1fr) auto; }
  .gm-index-when { display: none; }
  /* Same trade as the wordmark: the control still works, the address is a
     nicety. Sign-out survives at every width. */
  .gm-acct-who { display: none; }
  .gm-acct { padding-left: 0; border-left: 0; }
}

@media (min-width: 1500px) {
  :root { --rail-w: 24rem; }
}

/* --------------------------------------------------------------------------
   11. Home
   -------------------------------------------------------------------------- */

.gm-home {
  max-width: 74rem;
  margin-inline: auto;
  padding: 0 1.25rem 5rem;
}

.gm-hero { max-width: 46rem; padding: 4.5rem 0 3rem; }
.gm-hero-h {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.gm-hero-sub {
  margin: 0 0 2rem;
  max-width: 40rem;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
}

.gm-paste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  max-width: 38rem;
}
.gm-paste-in {
  grid-column: 1;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step-0);
}
.gm-paste-in::placeholder { color: var(--ink-3); }
.gm-paste-in:focus-visible { border-color: var(--accent); }
.gm-paste-go {
  grid-column: 2;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
}
.gm-paste-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.gm-paste-hint {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-3);
}
.gm-paste-hint code { font-family: var(--font-mono); font-size: 0.92em; color: var(--ink-2); }
.gm-paste-hint.is-ok { color: var(--accent); }

/* Server-side messages: the 400/401/429/502 responses all carry an explanation
   and the page has to show it. Bordered, not tinted red -- a rejected paste is
   information, not an emergency. */
.gm-msg {
  max-width: 38rem;
  margin: 0.9rem 0 0;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
}
.gm-msg-bad { border-left-color: var(--accent); }

/* Reuses the paste form's controls so the two never drift apart. */
.gm-signin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  max-width: 38rem;
  margin-top: 0.9rem;
}
.gm-signin-l {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-2);
}

.gm-quota { max-width: 38rem; margin-top: 1.75rem; }
.gm-quota-line { margin: 0 0 0.4rem; font-size: var(--step--1); color: var(--ink-2); }
.gm-quota-line strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.gm-meter {
  height: 0.3rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.gm-meter-fill { display: block; height: 100%; background: var(--accent); }
.gm-quota-note { margin: 0.4rem 0 0; font-size: var(--step--2); color: var(--ink-3); }

/* The demo strip: the actual mechanism, in static HTML. */
.gm-demo {
  margin: 2rem 0 4rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.gm-demo-h {
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gm-demo-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 60rem) {
  .gm-demo-stage { grid-template-columns: minmax(0, 1.35fr) 21rem; gap: 2rem; }
}
.gm-demo-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink);
}
.gm-demo-sym {
  background-color: var(--mark-strong);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 var(--sym-link);
}
.gm-demo-card {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}
.gm-demo-card-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}
.gm-demo-card-sym {
  display: grid;
  place-items: center;
  min-width: 2.9rem; min-height: 2.9rem;
  border-radius: var(--radius);
  background: var(--bg-sunk);
  font-size: 1.4rem;
}
.gm-demo-card-key { font-family: var(--font-sym); font-size: var(--step--1); }
.gm-demo-card-meta { display: flex; gap: 0.4rem; align-items: center; margin: 0.3rem 0 0; }
.gm-demo-card-count { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.gm-demo-card-gloss {
  margin: 0.7rem 0 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
}
.gm-demo-card-quote {
  margin: 0.7rem 0 0;
  padding-left: 0.7rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.gm-demo-card-where { display: block; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.gm-demo-card-foot { display: flex; gap: 0.4rem; margin: 0.85rem 0 0; }
.gm-demo-btn {
  padding: 0.38rem 0.7rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
}
.gm-demo-btn-q {
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  color: var(--ink-2);
}
.gm-demo-note {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-3);
}

.gm-showcase { margin-bottom: 4rem; }
.gm-showcase-top { margin-bottom: 1.25rem; }
.gm-showcase-h { margin: 0 0 0.25rem; font-size: var(--step-2); font-family: var(--font-body); font-weight: 600; }
.gm-showcase-sub { margin: 0; font-size: var(--step--1); color: var(--ink-3); }
.gm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 0; padding: 0;
}
.gm-card-paper { display: flex; }
.gm-card-paper-a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0.95rem 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.gm-card-paper-a:hover { border-color: var(--accent); transform: translateY(-1px); }
.gm-card-paper-id { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.gm-card-paper-t {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}
.gm-card-paper-n { margin: auto 0 0; padding-top: 0.5rem; font-size: var(--step--1); color: var(--ink-2); }
.gm-card-paper-n strong { font-family: var(--font-mono); color: var(--accent); }

/* The full index. Deliberately a list, not more cards: this grows without
   bound and five cards of chrome per paper would bury the page. */
.gm-index { margin-bottom: 4rem; }
.gm-index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.gm-index-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  padding: 0.6rem 0.15rem;
  border-bottom: 1px solid var(--border);
}
.gm-index-row:hover { background: var(--surface-2); }
.gm-index-a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.gm-index-t { font-family: var(--font-body); font-size: var(--step-0); }
.gm-index-a:hover .gm-index-t { color: var(--accent); text-decoration: underline; }
.gm-index-id { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.gm-index-n {
  font-size: var(--step--1);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gm-index-n strong { font-family: var(--font-mono); color: var(--accent); }
.gm-index-when {
  min-width: 5.5rem;
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
  white-space: nowrap;
}

.gm-how { max-width: 52rem; }
.gm-how-h { margin: 0 0 1.25rem; font-family: var(--font-body); font-size: var(--step-2); font-weight: 600; }
.gm-steps {
  list-style: none;
  counter-reset: gmstep;
  margin: 0; padding: 0;
  display: grid;
  gap: 1.25rem;
}
.gm-steps li {
  counter-increment: gmstep;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.9rem;
}
.gm-steps li::before {
  content: counter(gmstep);
  display: grid;
  place-items: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-3);
}
/* Both must be pinned to the content column. The ::before marker is grid item 1
   and the <h3> is item 2, so an unpinned <p> flows to item 3 -- which is column
   1, row 2: the 2rem marker column. The paragraph then wrapped three characters
   wide. Invisible above the fold, which is why only a full-height screenshot
   caught it. */
.gm-steps h3 { grid-column: 2; margin: 0 0 0.2rem; font-size: var(--step-0); font-weight: 650; }
.gm-steps p { grid-column: 2; margin: 0; font-size: var(--step--1); line-height: 1.6; color: var(--ink-2); }
.gm-how-note { margin-top: 1.75rem; font-size: var(--step--1); color: var(--ink-3); }

.gm-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  max-width: 74rem;
  margin-inline: auto;
  padding: 1.5rem 1.25rem 2.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  color: var(--ink-3);
}
.gm-foot p { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.gm-foot p:last-child { margin-left: auto; }

/* --------------------------------------------------------------------------
   12. Accuracy
   -------------------------------------------------------------------------- */

.gm-acc { max-width: 62rem; margin-inline: auto; padding: 3rem 1.25rem 4rem; }
.gm-acc-head { max-width: 42rem; margin-bottom: 2.5rem; }
.gm-acc-h {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gm-acc-lede { margin: 0 0 0.9rem; font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
.gm-acc-updated { margin: 0; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

.gm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 3rem;
}
.gm-tile {
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.gm-tile-key { border-color: var(--accent); background: linear-gradient(to bottom, var(--accent-soft), transparent); }
.gm-tile-l {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gm-tile-v {
  margin: 0;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.gm-tile-v .gm-na { font-size: 0.62em; font-weight: 400; }
.gm-tile-n { margin: 0.4rem 0 0; font-size: var(--step--2); line-height: 1.45; color: var(--ink-3); }
.gm-pct { font-variant-numeric: tabular-nums; }
.gm-nd {
  font-family: var(--font-mono);
  font-size: 0.58em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.gm-tile-n .gm-nd { font-size: 1em; color: var(--ink-2); }

.gm-acc-sec { max-width: 44rem; margin-bottom: 3rem; }
.gm-acc-sec h2 {
  margin: 2rem 0 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}
.gm-acc-sec h2:first-child { margin-top: 0; }
.gm-acc-sec p {
  margin: 0 0 1rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--ink-2);
}

.gm-tablewrap {
  max-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.gm-acc-sec:has(.gm-tablewrap) { max-width: none; }
.gm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.gm-table th, .gm-table td { padding: 0.6rem 0.85rem; text-align: left; }
.gm-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.gm-table tbody tr { border-bottom: 1px solid var(--border); }
.gm-table tbody tr:hover { background: var(--bg-sunk); }
.gm-table .gm-t-n { text-align: right; white-space: nowrap; }
.gm-table .gm-t-paper { font-weight: 400; min-width: 16rem; }
.gm-table .gm-t-paper a { font-family: var(--font-body); font-size: var(--step-0); }
.gm-t-id { display: block; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }
.gm-table tfoot th, .gm-table tfoot td {
  border-top: 1px solid var(--border-strong);
  font-weight: 650;
  background: var(--surface);
}
.gm-flagcount {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
  font-weight: 650;
}
.gm-acc-note { margin-top: 1rem; font-size: var(--step--1) !important; line-height: 1.6; color: var(--ink-3) !important; font-family: var(--font-ui) !important; }
.gm-acc-empty { font-style: italic; color: var(--ink-3); }

.gm-acc-unknown { border-top: 1px solid var(--border); padding-top: 2rem; }
.gm-unknown { margin: 0 0 1rem; padding-left: 1.1rem; }
.gm-unknown li {
  margin-bottom: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
}
.gm-unknown li::marker { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   13. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .gm-flash { animation: none; background-color: var(--mark-strong); }
  .gm-flash-block { animation: none; background-color: var(--mark-block); }
  .gm-rail { transition: none; }
}

@media print {
  .gm-topbar, .gm-rail, .gm-card, .gm-toast, .gm-drawer-toggle, .gm-scrim, .gm-skip, .gm-paper-end { display: none !important; }
  .gm-reader { display: block; }
  .gm-paper { width: auto; max-width: none; padding: 0; }
  .gm-sym { box-shadow: none !important; background: none !important; }
}

/* --------------------------------------------------------------------------
   14. Blind labelling task (eval_task.html)

   A phone screen, 400 times. Two rules shape everything below.

   ONE: the page must never leak what we think. There is no confidence, no
   grade, no verdict of ours and no running accuracy on it, and the styling has
   to hold that line too. The two substantive answers are drawn IDENTICALLY --
   neither one is the primary button -- because an accent on "Yes" is a hint,
   and a hint repeated 400 times is a measurement of our own suggestion rather
   than of the paper. Only "Not sure" is quieter, and only because it is an
   escape hatch and not a competing verdict.

   TWO: the question and the answers stay in the thumb zone at every viewport
   height. The page is an app shell -- fixed bar, scrolling middle, fixed
   actions -- rather than a document with a magic bottom padding, because the
   action bar is three stacked buttons on a phone and one row on a laptop and
   no constant is right for both.
   -------------------------------------------------------------------------- */

/* The page never scrolls; the middle column does. `dvh` first fails to the
   `vh` above it, which is only wrong while a mobile URL bar is animating. */
body.gm-page-eval {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior-y: contain;
}

.gm-eval {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* The form wraps BOTH the scrolling middle and the action bar, because a button
   has to be inside the form it submits. That makes the form the flex child, not
   them, so it has to pass the column through: without this rule the middle
   never shrinks and the buttons sit below the fold, which is the one thing this
   layout exists to prevent. Measured at 390x844: action bar bottom 1121px
   before, 844px after. */
.gm-eval-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

/* -------------------------------------------------- bar, count, progress -- */

/* Sticky buys nothing in a column that does not scroll, and the translucent
   reader bar has nothing to sit over here. Relative, opaque, done. */
.gm-eval-bar {
  position: relative;
  flex: none;
  background: var(--bg);
  backdrop-filter: none;
}

/* Progress is the only number this page is allowed to show, because it is a
   fact about the queue and not about any answer. */
.gm-eval-count {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-3);
}
.gm-eval-count-n { font-weight: 650; color: var(--ink); }
/* `.gm-topbar-actions` also carries `margin-left:auto`; two auto margins would
   split the slack and leave the counter marooned mid-bar. */
.gm-eval-bar .gm-topbar-actions { margin-left: 0.75rem; }

.gm-eval-prog {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--surface);
}
.gm-eval-prog-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}

/* ------------------------------------------------------ scrolling middle -- */

.gm-eval-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.gm-eval-col {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.15rem 1.1rem 2rem;
}

.gm-eval-paper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  margin: 0 0 0.6rem;
}
.gm-eval-paper-t { font-family: var(--font-body); font-size: var(--step--1); color: var(--ink-2); }
.gm-eval-paper-id { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-3); }

/* Read once on screen 1, in the way on the other 399. */
.gm-eval-help { margin: 0 0 1.1rem; }
.gm-eval-help > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-size: var(--step--1);
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}
.gm-eval-help > summary::-webkit-details-marker { display: none; }
.gm-eval-help > summary::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 1.25rem; height: 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: var(--step--2);
}
.gm-eval-help[open] > summary { color: var(--ink-2); }
.gm-eval-help-body {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-sunk);
}
.gm-eval-help-body p {
  margin: 0 0 0.65rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
}
.gm-eval-help-body p:last-child { margin-bottom: 0; }
.gm-eval-help-body strong { color: var(--ink); }

/* --------------------------------------------------------------- symbol -- */

/* Math markup is routinely wider than a phone. It scrolls in here and the page
   itself never gains a horizontal scrollbar. `min-width:100%` on the inner
   block is what keeps a narrow symbol centred while a wide one still starts at
   the left edge: centring the overflow directly would put its first character
   off-screen with no way to reach it. */
.gm-eval-symwrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 1rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  text-align: center;
}
.gm-eval-sym {
  display: inline-block;
  min-width: 100%;
  white-space: nowrap;
  /* Same reasoning as the symbol card: the family we ship leads, because the
     reader almost certainly has no math font installed. */
  font-family: "GlossMath Math", "Latin Modern Math", "STIX Two Math",
               "Cambria Math", var(--font-body);
  font-size: clamp(2.1rem, 11vw, 3rem);
  line-height: 1.3;
  color: var(--ink);
}
.gm-eval-sym math { font-size: 1em; }
.gm-eval-sym sub, .gm-eval-sym sup { font-size: 0.6em; }

/* The plain-text key, kept because rendered math can be ambiguous at a glance
   and the labeller has to know which symbol is being asked about. */
.gm-eval-keyline { margin: 0.5rem 0 0; text-align: center; }
.gm-eval-key {
  font-family: var(--font-sym);
  font-size: var(--step--1);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------ gloss, passage -- */

.gm-eval-lab { display: block; margin: 1.4rem 0 0.35rem; }

.gm-eval-gloss {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}

/* A long passage scrolls inside its own box rather than pushing the paper link
   and the question off the bottom of a phone. */
.gm-eval-quote {
  margin: 0;
  max-height: 42vh;
  max-height: 42dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.7rem 0.9rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-sunk);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
}

.gm-eval-note {
  margin: 1.2rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  background: var(--bg-sunk);
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink);
}

/* Sized as a touch target, not as `.gm-btn`: that one is 0.38rem of padding and
   lands well under 44px on a phone. */
.gm-eval-open {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 1.1rem;
  padding: 0.6rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
.gm-eval-open:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.gm-eval-open-n {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 400;
  color: var(--ink-3);
}
/* On an abstain row there is nothing on the screen to judge, so opening the
   paper IS the task and the link is the solid one. */
.gm-eval-open-lead {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.gm-eval-open-lead:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.gm-eval-open-lead .gm-eval-open-n { color: color-mix(in srgb, var(--accent-ink) 65%, transparent); }

/* ----------------------------------------------- question and the answers -- */

.gm-eval-actions {
  position: relative;
  flex: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, 0.28);
  padding-bottom: env(safe-area-inset-bottom);
}
/* On a phone the passage almost always runs under this bar, and a passage that
   is cut off by an opaque edge reads as a passage that ENDED. The fade says the
   text continues, and so does the link below it. */
.gm-eval-actions::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1.5rem;
  height: 1.5rem;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent);
}
.gm-eval-actions-in {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: 0.8rem 1.1rem 0.95rem;
}

.gm-eval-q {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--ink);
}

/* 48px, and identical for both substantive answers. See the note at the top of
   this section: the day one of these becomes the primary button is the day the
   run stops measuring the paper. */
.gm-eval-b {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-1);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gm-eval-b:hover { background: var(--surface); border-color: var(--ink-3); }
.gm-eval-b:active { background: var(--accent-soft); border-color: var(--accent); }
/* Quieter because it is the way out, not a third opinion. Still 44px. */
.gm-eval-b-quiet {
  min-height: 2.75rem;
  border-color: var(--border);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--step-0);
}
.gm-eval-b-quiet:hover { background: var(--surface-2); }

/* Keyboard hints are desktop-only and JS-only: printing "1" next to a button on
   a phone advertises a key that is not there. `.gm-js` is set in <head>. */
.gm-eval-k { display: none; }
@media (hover: hover) and (pointer: fine) {
  .gm-js .gm-eval-k {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.5rem; height: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-sunk);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--ink-3);
  }
}

/* One answer per screen. Pointer-events rather than `disabled`, because a
   disabled submitter is dropped from the POST and the row would land with no
   verdict at all. */
.gm-eval-form.is-sending { pointer-events: none; }
.gm-eval-form.is-sending .gm-eval-actions-in { opacity: 0.55; }

/* ------------------------------------------------------------------ done -- */

.gm-eval-done { padding-top: 3rem; padding-bottom: 3rem; }
.gm-eval-done-h {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.gm-eval-done-p {
  margin: 0 0 0.9rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
}
.gm-eval-done-note {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ viewports -- */

@media (min-width: 760px) {
  .gm-eval-col { padding: 2rem 1.5rem 2.75rem; }
  .gm-eval-actions-in { padding: 1rem 1.5rem 1.25rem; }
}

/* A phone on its side is about 380px tall. The question never hides, so the
   buttons go side by side and everything loses a step instead. */
@media (orientation: landscape) and (max-height: 560px) {
  .gm-eval-actions-in { flex-flow: row wrap; padding-block: 0.55rem 0.7rem; }
  .gm-eval-q { flex: 1 0 100%; margin-bottom: 0.1rem; font-size: var(--step-0); }
  .gm-eval-b { width: auto; flex: 1 1 9rem; min-height: 2.75rem; font-size: var(--step-0); }
  .gm-eval-b-quiet { flex: 0 1 7rem; }
  .gm-eval-symwrap { padding: 0.6rem 0.75rem; }
  .gm-eval-sym { font-size: clamp(1.7rem, 8vh, 2.4rem); }
  .gm-eval-quote { max-height: 30vh; max-height: 30dvh; }
}

@media print {
  body.gm-page-eval { height: auto; overflow: visible; }
  .gm-eval-body { overflow: visible; }
  .gm-eval-quote { max-height: none; overflow: visible; }
  .gm-eval-actions { box-shadow: none; }
}