/* ==========================================================================
   ALoDLM project page: design system (style.css)
   Shared tokens, layout and components. Widget-specific styles live in
   static/css/<widget>.css, loaded after this file.

   Contents
     1. Tokens (light) + dark theme (prefers-color-scheme and [data-theme])
     2. Base / reset
     3. Typography
     4. Layout primitives
     5. Components: skip link, nav, buttons, hero, stat tiles, sections,
        cards, contributions, figure cards, method parts, checklist,
        architecture, motivation figure (mm-), details/summary, algorithm, equations, KPIs,
        takeaways, code card, chips, segmented control, tabs, tooltip,
        select/range, legend + commitment-pass ramp, terminal scope,
        widget mounts, lightbox, footer
     6. Utilities
     7. Reduced motion, forced colors, print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f8fafc;      /* tinted sections */
  --bg-muted: #f1f5f9;       /* wells, disabled */
  --surface: #ffffff;        /* cards */
  --surface-2: #f8fafc;      /* insets inside cards */
  --surface-3: #f1f5f9;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --nav-bg: rgba(255, 255, 255, .86);
  --paper: #ffffff;          /* figure background: never themed, never inverted */

  /* Text (all >= 4.5:1 on --bg, --bg-subtle, --surface-2) */
  --text: #0f172a;           /* headings, strong */
  --text-2: #334155;         /* body copy */
  --text-3: #475569;         /* secondary, captions */
  --text-muted: #5b6b82;     /* tertiary; still >= 4.9:1 on --bg-muted */
  --text-on-brand: #ffffff;

  /* Brand */
  --brand: #1d4ed8;
  --brand-hover: #1e40af;
  --brand-soft: #eff6ff;
  --brand-soft-2: #dbeafe;
  --brand-ring: #93c5fd;
  --accent: #6d28d9;
  --brand-grad: linear-gradient(90deg, #1d4ed8 0%, #6d28d9 100%);
  --focus: #1d4ed8;
  --selection: rgba(29, 78, 216, .16);
  --glow-1: rgba(37, 99, 235, .10);
  --glow-2: rgba(124, 58, 237, .08);

  /* Model groups (results table, legends) */
  --ar: #475569;   --ar-bg: #f1f5f9;
  --dlm: #b45309;  --dlm-bg: #fffbeb;
  --ours: #1d4ed8; --ours-bg: #eff6ff;

  /* Signed deltas (always paired with a +/- sign, never colour alone) */
  --pos: #15803d;
  --neg: #b91c1c;

  /* Commitment-pass ramp, shared by ALL widgets (pass 1 -> 4 = light -> dark).
     Ink colours give >= 5.3:1 text contrast on every step. */
  --d1: #dbe8f5; --d1-ink: #0f172a;
  --d2: #a8c4e8; --d2-ink: #0f172a;
  --d3: #5b8fce; --d3-ink: #0f172a;
  --d4: #1a5fb4; --d4-ink: #ffffff;
  --d-edge: rgba(15, 23, 42, .14);   /* hairline so light steps stay visible */
  --scroll-shadow: rgba(15, 23, 42, .16);

  /* Terminal / dark panels: identical in both themes */
  --term-bg: #0a1020;
  --term-bar: #111a2e;
  --term-panel: #0d1527;
  --term-line: #1e293b;
  --term-text: #cbd5e1;
  --term-strong: #f1f5f9;
  --term-muted: #94a3b8;
  --term-accent: #93c5fd;
  /* Terminal commitment-pass ramp (fixed; = the dark-theme ramp) */
  --t1: #1c2b44; --t1-ink: #e2e8f0;
  --t2: #24477a; --t2-ink: #e2e8f0;
  --t3: #2b62ad; --t3-ink: #f1f5f9;
  --t4: #7fb2f0; --t4-ink: #0b1220;

  /* Method-widget states (mask / latent / newly committed) */
  --mask-bg: #eef2f6;   --mask-ink: #475569;   --mask-edge: #94a3b8;
  --latent-bg: #fff7e0; --latent-ink: #713f12; --latent-edge: #e2b93b;
  --commit: #db2777;    --commit-soft: rgba(219, 39, 119, .14);

  /* Architecture parts (echo the overview figure) */
  --arch-prelude-bg: #ece9f7; --arch-prelude-ink: #3b2f73; --arch-prelude-edge: #cdc5ea;
  --arch-core-bg: #fff4d1;    --arch-core-ink: #6b4f0e;    --arch-core-edge: #ecd18a;
  --arch-coda-bg: #e2f0df;    --arch-coda-ink: #1f5a1b;    --arch-coda-edge: #b5d6ae;
  --arch-lm-bg: #dff0f9;      --arch-lm-ink: #0c4a6e;      --arch-lm-edge: #a9d4ea;
  --arch-gate-bg: #fde4e1;    --arch-gate-ink: #8a1c12;    --arch-gate-edge: #f2b8b0;

  /* Tooltip */
  --tip-bg: #0f172a;
  --tip-ink: #f8fafc;
  --tip-edge: transparent;

  /* Radii */
  --r-xs: 4px;
  --r-chip: 6px;
  --r-btn: 10px;
  --r-card: 14px;
  --r-win: 18px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-md: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px -2px rgba(15, 23, 42, .08);
  --sh-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 12px 24px -6px rgba(15, 23, 42, .12);
  --sh-xl: 0 24px 48px -12px rgba(15, 23, 42, .30);

  /* Layout */
  --w-text: 48rem;
  --w-wide: 72rem;
  --w-full: 80rem;
  --gutter: 16px;
  --nav-h: 60px;
  --scroll-offset: 76px;
  --section-pad: clamp(4rem, 8vw, 6rem);

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;

  /* Type */
  --font-display: "Google Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-math: KaTeX_Math, "Cambria Math", "Times New Roman", Times, serif;
  --fs-micro: .75rem;        /* 12px: the floor, nothing smaller */
  --fs-sm: .875rem;          /* 14px */
  --fs-caption: .9375rem;    /* 15px */
  --fs-base: 1.0625rem;      /* 17px */
  --fs-md: 1.125rem;         /* 18px */
  --fs-lg: 1.1875rem;        /* 19px: abstract */
  --fs-h4: 1.25rem;
  --fs-h3: 1.5rem;
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-h1: clamp(1.875rem, 1.1rem + 3vw, 3.125rem);
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}
@media (max-width: 759.98px) {
  :root { --scroll-offset: 118px; }
}

/* Dark theme: system preference (unless the visitor picked light) ... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1220;
    --bg-subtle: #0e1628;
    --bg-muted: #131c31;
    --surface: #111a2e;
    --surface-2: #0f172a;
    --surface-3: #172036;
    --border: #1e293b;
    --border-strong: #334155;
    --nav-bg: rgba(11, 18, 32, .82);
    --text: #e2e8f0;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;
    --text-muted: #94a3b8;
    --text-on-brand: #0b1220;
    --brand: #93c5fd;
    --brand-hover: #bfdbfe;
    --brand-soft: rgba(59, 130, 246, .14);
    --brand-soft-2: rgba(59, 130, 246, .24);
    --brand-ring: #3b82f6;
    --accent: #c4b5fd;
    --brand-grad: linear-gradient(90deg, #93c5fd 0%, #c4b5fd 100%);
    --focus: #93c5fd;
    --selection: rgba(147, 197, 253, .28);
    --glow-1: rgba(59, 130, 246, .16);
    --glow-2: rgba(139, 92, 246, .12);
    --ar: #94a3b8;   --ar-bg: rgba(148, 163, 184, .10);
    --dlm: #fbbf24;  --dlm-bg: rgba(251, 191, 36, .08);
    --ours: #93c5fd; --ours-bg: rgba(59, 130, 246, .12);
    --pos: #4ade80;
    --neg: #f87171;
    --d1: #1c2b44; --d1-ink: #e2e8f0;
    --d2: #24477a; --d2-ink: #e2e8f0;
    --d3: #2b62ad; --d3-ink: #f1f5f9;
    --d4: #7fb2f0; --d4-ink: #0b1220;
    --d-edge: rgba(226, 232, 240, .14);
    --scroll-shadow: rgba(0, 0, 0, .55);
    --mask-bg: #172033;   --mask-ink: #94a3b8;   --mask-edge: #475569;
    --latent-bg: #3a2f12; --latent-ink: #fde68a; --latent-edge: #a16207;
    --commit: #f472b6;    --commit-soft: rgba(244, 114, 182, .18);
    --arch-prelude-bg: rgba(167, 139, 250, .14); --arch-prelude-ink: #ddd6fe; --arch-prelude-edge: rgba(167, 139, 250, .35);
    --arch-core-bg: rgba(250, 204, 21, .12);     --arch-core-ink: #fde68a;    --arch-core-edge: rgba(250, 204, 21, .35);
    --arch-coda-bg: rgba(74, 222, 128, .12);     --arch-coda-ink: #bbf7d0;    --arch-coda-edge: rgba(74, 222, 128, .32);
    --arch-lm-bg: rgba(56, 189, 248, .12);       --arch-lm-ink: #bae6fd;      --arch-lm-edge: rgba(56, 189, 248, .32);
    --arch-gate-bg: rgba(251, 113, 133, .12);    --arch-gate-ink: #fecdd3;    --arch-gate-edge: rgba(251, 113, 133, .32);
    --tip-bg: #1e293b;
    --tip-ink: #f1f5f9;
    --tip-edge: #334155;
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --sh-md: 0 4px 14px -2px rgba(0, 0, 0, .45);
    --sh-lg: 0 14px 28px -8px rgba(0, 0, 0, .55);
    --sh-xl: 0 28px 56px -12px rgba(0, 0, 0, .70);
  }
}

/* ... and the manual toggle. Keep this block identical to the one above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --bg-subtle: #0e1628;
  --bg-muted: #131c31;
  --surface: #111a2e;
  --surface-2: #0f172a;
  --surface-3: #172036;
  --border: #1e293b;
  --border-strong: #334155;
  --nav-bg: rgba(11, 18, 32, .82);
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --text-muted: #94a3b8;
  --text-on-brand: #0b1220;
  --brand: #93c5fd;
  --brand-hover: #bfdbfe;
  --brand-soft: rgba(59, 130, 246, .14);
  --brand-soft-2: rgba(59, 130, 246, .24);
  --brand-ring: #3b82f6;
  --accent: #c4b5fd;
  --brand-grad: linear-gradient(90deg, #93c5fd 0%, #c4b5fd 100%);
  --focus: #93c5fd;
  --selection: rgba(147, 197, 253, .28);
  --glow-1: rgba(59, 130, 246, .16);
  --glow-2: rgba(139, 92, 246, .12);
  --ar: #94a3b8;   --ar-bg: rgba(148, 163, 184, .10);
  --dlm: #fbbf24;  --dlm-bg: rgba(251, 191, 36, .08);
  --ours: #93c5fd; --ours-bg: rgba(59, 130, 246, .12);
  --pos: #4ade80;
  --neg: #f87171;
  --d1: #1c2b44; --d1-ink: #e2e8f0;
  --d2: #24477a; --d2-ink: #e2e8f0;
  --d3: #2b62ad; --d3-ink: #f1f5f9;
  --d4: #7fb2f0; --d4-ink: #0b1220;
  --d-edge: rgba(226, 232, 240, .14);
  --scroll-shadow: rgba(0, 0, 0, .55);
  --mask-bg: #172033;   --mask-ink: #94a3b8;   --mask-edge: #475569;
  --latent-bg: #3a2f12; --latent-ink: #fde68a; --latent-edge: #a16207;
  --commit: #f472b6;    --commit-soft: rgba(244, 114, 182, .18);
  --arch-prelude-bg: rgba(167, 139, 250, .14); --arch-prelude-ink: #ddd6fe; --arch-prelude-edge: rgba(167, 139, 250, .35);
  --arch-core-bg: rgba(250, 204, 21, .12);     --arch-core-ink: #fde68a;    --arch-core-edge: rgba(250, 204, 21, .35);
  --arch-coda-bg: rgba(74, 222, 128, .12);     --arch-coda-ink: #bbf7d0;    --arch-coda-edge: rgba(74, 222, 128, .32);
  --arch-lm-bg: rgba(56, 189, 248, .12);       --arch-lm-ink: #bae6fd;      --arch-lm-edge: rgba(56, 189, 248, .32);
  --arch-gate-bg: rgba(251, 113, 133, .12);    --arch-gate-ink: #fecdd3;    --arch-gate-edge: rgba(251, 113, 133, .32);
  --tip-bg: #1e293b;
  --tip-ink: #f1f5f9;
  --tip-edge: #334155;
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-md: 0 4px 14px -2px rgba(0, 0, 0, .45);
  --sh-lg: 0 14px 28px -8px rgba(0, 0, 0, .55);
  --sh-xl: 0 28px 56px -12px rgba(0, 0, 0, .70);
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--scroll-offset);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body { overflow-x: clip; }
}
html.has-modal, html.has-modal body { overflow: hidden; }

::selection { background: var(--selection); }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* Icon sprite + generic icon size */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
/* Brand gradient stops (follow the theme) */
.gs-a { stop-color: var(--brand); }
.gs-b { stop-color: var(--accent); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }

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

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
strong, b { color: var(--text); font-weight: 600; }
em, i { font-style: italic; }
sup, sub { line-height: 0; }
code, kbd, samp, pre { font-family: var(--font-mono); }
small { font-size: var(--fs-sm); }
var { font-family: var(--font-math); font-style: italic; font-size: 1.06em; line-height: 1; }   /* never taller than the line */

.eyebrow {
  display: inline-block;
  font: 700 var(--fs-micro)/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--w-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--full { max-width: calc(var(--w-full) + 2 * var(--gutter)); }
.container--text { max-width: calc(var(--w-text) + 2 * var(--gutter)); }

.section {
  position: relative;
  padding-block: var(--section-pad);
  border-top: 1px solid var(--border);
}
.section--tint { background: var(--bg-subtle); }

.section__head {
  max-width: var(--w-text);
  margin: 0 auto clamp(2rem, 4.5vw, 3rem);
  text-align: center;
}
.section__head .eyebrow { margin-bottom: .75rem; }
.section__lead {
  margin: 1rem auto 0;
  max-width: 44rem;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-3);
  text-wrap: balance;
}
.section__lead.is-long { max-width: var(--w-text); text-align: left; text-wrap: pretty; }

.subsection { margin-top: clamp(3.5rem, 7vw, 5rem); }
.subsection__head { max-width: 46rem; margin: 0 auto 2rem; text-align: center; }
.subsection__head h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }
.subsection__head p { margin-top: .75rem; color: var(--text-3); }

.prose { max-width: var(--w-text); margin-inline: auto; }
.prose > * + * { margin-top: 1em; }
.abstract p { color: var(--text-2); font-size: var(--fs-lg); line-height: 1.7; }

.grid-2 { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grid-3 { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--stack, 1rem); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .75rem); }

/* --------------------------------------------------------------------------
   5a. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  background: var(--brand);
  color: var(--text-on-brand);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-lg);
}
.skip-link:focus, .skip-link:focus-visible { top: 10px; color: var(--text-on-brand); }

/* --------------------------------------------------------------------------
   5b. Navigation
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 6px 4px 6px 0;
  color: var(--text);
  font: 700 1.375rem/1 var(--font-display);
  letter-spacing: -.01em;
  text-decoration: none;
}
.brand:hover { color: var(--text); }
/* "Amazon AGI" badge before the wordmark (as wedlm.github.io's "WeChat AI"): Amazon orange,
   dark ink (7:1), the same in both themes. Text only, no logo artwork. */
.brand__org {
  flex: none;
  padding: 5px 9px 5px;
  border-radius: var(--r-chip);
  background: #ff9900;
  color: #131a22;
  font: 700 .8125rem/1 var(--font-display);
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand__lo { color: var(--brand); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand__lo {
    background: linear-gradient(90deg, var(--brand) 5%, var(--accent) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .brand__org { border: 1px solid CanvasText; }
  .brand__lo { color: LinkText; -webkit-text-fill-color: LinkText; background: none; }
}
.brand__word { white-space: nowrap; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font: 500 .9375rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-1), background-color var(--dur-1);
}
.nav__links a:hover { color: var(--brand); background: var(--brand-soft); }
.nav__links a[aria-current="true"] { color: var(--brand); background: var(--brand-soft); }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1);
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand-ring); }
.theme-toggle svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.theme-toggle .i-sun { display: none; }
.theme-toggle[aria-pressed="true"] .i-sun { display: block; }
.theme-toggle[aria-pressed="true"] .i-moon { display: none; }

@media (max-width: 759.98px) {
  .nav__inner { flex-wrap: wrap; row-gap: 0; padding-top: 6px; }
  .theme-toggle { margin-left: auto; }
  .nav__links {
    --fade-l: var(--gutter);
    --fade-r: 28px;
    order: 3;
    flex: 1 0 100%;
    gap: 6px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 6px var(--gutter) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  /* site.js marks the scroll position: equal fades on both sides while chips
     are hidden there, none at an end that is fully shown */
  .nav__links.is-scrolled { --fade-l: 28px; }
  .nav__links.is-end { --fade-r: var(--gutter); }
  .nav__links::-webkit-scrollbar { display: none; }
  .nav__links a {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: .875rem;
  }
  .nav__links a[aria-current="true"] { border-color: transparent; }
}

/* --------------------------------------------------------------------------
   5c. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--text);
  --btn-edge: var(--border-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--btn-edge);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font: 600 .9375rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1),
              box-shadow var(--dur-2), transform var(--dur-2) var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { border-color: var(--brand-ring); color: var(--brand); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(1px); }
.btn--primary { --btn-bg: var(--brand); --btn-ink: var(--text-on-brand); --btn-edge: var(--brand); }
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-on-brand); }
.btn--ghost { --btn-bg: transparent; --btn-edge: transparent; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: .875rem; }
.btn--icon { width: 44px; padding: 0; }
.btn--sm.btn--icon { width: 36px; }
.btn[aria-disabled="true"], .btn:disabled {
  --btn-bg: var(--bg-muted);
  --btn-ink: var(--text-3);
  --btn-edge: var(--border-strong);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn[aria-disabled="true"]:hover, .btn:disabled:hover { color: var(--text-3); border-color: var(--border-strong); box-shadow: none; }
.btn__tag {
  margin-left: 2px;
  padding: 3px 7px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-3);
  font: 600 var(--fs-micro)/1 var(--font-body);
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   5d. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding: clamp(32px, 4.4vw, 60px) 0 clamp(26px, 3vw, 40px);
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60px 0 -420px 0;
  pointer-events: none;
  background:
    radial-gradient(42rem 22rem at 18% 8%, var(--glow-1), transparent 70%),
    radial-gradient(38rem 20rem at 84% 4%, var(--glow-2), transparent 70%);
}
.hero__title {
  max-width: 21em;
  margin: 0 auto;
  font-size: var(--fs-h1);
  line-height: 1.12;
  letter-spacing: -.022em;
}
.grad { color: var(--brand); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
    background: var(--brand-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
/* Mobius "oo" in "Looped": the two o's drawn as one infinity ribbon.
   The real letters stay in the DOM (accessible name, copy, find-in-page); the
   ribbon only replaces them visually once Google Sans 700 has loaded
   (site.js adds .mobius-on), so a fallback font never gets a misfitted loop. */
.loopword { display: inline-block; }            /* atomic word, same wrapping as plain text */
.loopword__l { color: var(--brand); }
.loopword__oo { color: color-mix(in oklab, var(--brand) 62%, var(--accent)); }
.loopword__ped { color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .loopword__ped {
    background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 38%, var(--accent)) 0%, var(--accent) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.mobius {
  display: none;
  width: 1.182em;          /* advance of "oo" at the hero's -.022em tracking */
  height: .6em;
  margin-left: -1.182em;   /* zero net advance: drawn back over the two o's */
  vertical-align: -.04em;
  overflow: visible;
  pointer-events: none;
}
.hero__title.mobius-on .mobius { display: inline-block; }
.hero__title.mobius-on .loopword__oo { color: transparent; -webkit-text-fill-color: transparent; }
.mobius .s-a   { stop-color: var(--brand); }
.mobius .s-b   { stop-color: var(--accent); }
.mobius .s-bg0 { stop-color: var(--bg); stop-opacity: 0; }
.mobius .s-bg1 { stop-color: var(--bg); stop-opacity: var(--mobius-depth, .5); }
.mobius .s-hi0 { stop-color: #fff; stop-opacity: 0; }
.mobius .s-hi1 { stop-color: #fff; stop-opacity: var(--mobius-sheen, .2); }
:root[data-theme="dark"] .mobius { --mobius-depth: .55; --mobius-sheen: .14; --mobius-glint: .1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobius { --mobius-depth: .55; --mobius-sheen: .14; --mobius-glint: .1; }
}
/* One faint pass of light around the loop after load (one recurrent pass), then rest. */
.mobius__glint { stroke: #fff; stroke-linecap: round; stroke-dasharray: 16 84; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero__title.mobius-on .mobius__glint {
    stroke-opacity: var(--mobius-glint, .14);
    animation: mobius-glint 3.4s cubic-bezier(.45, .05, .35, 1) 1.2s 1 both;
  }
}
@keyframes mobius-glint {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@media print { .mobius__glint { display: none; } }
@media (forced-colors: active) {
  .loopword__l, .loopword__oo, .loopword__ped { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; }
  .hero__title.mobius-on .loopword__oo { color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .mobius, .hero__title.mobius-on .mobius { display: none; }
}
/* Header in the WeDLM layout: authors (brand colour), affiliations, note, link row */
.hero__authors { max-width: 70rem; margin: clamp(18px, 2.4vw, 30px) auto 0; }
/* Inline names so text-wrap: balance can even out the lines (no lone last name) */
.authors {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--brand);
  font: 500 clamp(1.125rem, 1rem + .5vw, 1.4375rem)/1.7 var(--font-body);
  text-align: center;
  text-wrap: balance;
}
.authors li { display: inline; margin: 0 .42em; white-space: nowrap; }
.authors sup,
.affils sup,
.authors__note sup {
  color: var(--text-3);
  font-size: max(12px, .62em);
  font-weight: 500;
  line-height: 0;
}
.authors sup { margin-left: 3px; }
.affils {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 28px;
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  color: var(--text-3);
  font: 400 clamp(1rem, .95rem + .3vw, 1.1875rem)/1.5 var(--font-body);
}
.affils sup { margin-right: 3px; font-size: max(12px, .7em); }
.authors__note {
  margin: 6px 0 0;
  color: var(--text-muted);
  font: 400 clamp(.9375rem, .9rem + .2vw, 1.0625rem)/1.5 var(--font-body);
}
.authors__note sup { font-size: max(12px, .75em); }
/* Paper / code / model buttons: dark rounded boxes with a coloured icon (ouro-llm.github.io style) */
.pub-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin-top: clamp(18px, 2.4vw, 30px);
}
.pub-btn {
  --pub-bg: #363636;
  --pub-bg-hover: #242424;
  --pub-ink: #ffffff;
  --pub-edge: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px 0 16px;
  border: 1px solid var(--pub-edge);
  border-radius: var(--r-pill);
  background: var(--pub-bg);
  color: var(--pub-ink);
  font: 600 1rem/1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-2) var(--ease);
}
a.pub-btn:hover { background: var(--pub-bg-hover); color: var(--pub-ink); box-shadow: var(--sh-md); transform: translateY(-1px); }
.pub-btn[aria-disabled="true"] { cursor: default; }
.pub-btn__icon { width: 20px; height: 20px; flex: none; }
.pub-btn__icon--mono { color: var(--pub-ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-btn { --pub-bg: #1e293b; --pub-bg-hover: #273449; --pub-edge: #334155; }
}
:root[data-theme="dark"] .pub-btn { --pub-bg: #1e293b; --pub-bg-hover: #273449; --pub-edge: #334155; }
/* Narrow screens: tighter name gaps; buttons as two even rows of two */
@media (max-width: 599.98px) {
  .authors { line-height: 1.6; }
  .authors li { margin: 0 .3em; }
  .affils { gap: 2px 18px; }
  .pub-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; }
  .pub-btn { width: 100%; }
}
@media (max-width: 379.98px) {
  .authors { font-size: 1.0625rem; }   /* stay within 6 lines, where balance applies */
  .pub-btn { padding: 0 14px 0 12px; }
}

@media (max-width: 559.98px) {
  .section__lead, .subsection__head p { text-align: left; text-wrap: pretty; }
  .disclosure__hint { display: none; }
}

/* Demo band (hosts the #demo mount right under the hero) */
.demo-band { position: relative; padding: 4px 0 clamp(3rem, 6vw, 4.5rem); }

/* --------------------------------------------------------------------------
   5e. Cards and contributions
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}
.card--pad { padding: clamp(18px, 2.5vw, 26px); }
.card__title { font-size: var(--fs-h4); margin-bottom: .5rem; }
.card__title--sm { font: 600 1.0625rem/1.35 var(--font-body); color: var(--text); margin-bottom: .5rem; }

.contrib-grid {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .contrib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
.contrib {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 4px 20px;
  align-content: start;
  padding: clamp(20px, 3vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease);
}
.contrib:hover, .contrib:focus-within { border-color: var(--brand-ring); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.contrib__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-btn);
  background: var(--brand-soft);
  color: var(--brand);
  transition: background-color var(--dur-2), color var(--dur-2);
}
.contrib__icon svg { width: 24px; height: 24px; }
.contrib:hover .contrib__icon, .contrib:focus-within .contrib__icon { background: var(--brand); color: var(--text-on-brand); }
.contrib__title { font: 600 1.125rem/1.35 var(--font-body); color: var(--text); letter-spacing: 0; }
.contrib__body { margin-top: 6px; color: var(--text-3); font-size: .96875rem; line-height: 1.65; }
@media (max-width: 559.98px) {
  .contrib { grid-template-columns: minmax(0, 1fr); }
  .contrib__icon { grid-row: auto; margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   5f. Figure cards (white "paper" in both themes; click to zoom)
   -------------------------------------------------------------------------- */
.fig {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-md);
  transition: box-shadow var(--dur-2), border-color var(--dur-2);
}
.fig:hover { box-shadow: var(--sh-lg); }
.fig__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 8px 6px 16px;
  border-bottom: 1px solid var(--border);
}
.fig__label {
  color: var(--text-3);
  font: 600 var(--fs-micro)/1.3 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fig__label b { color: var(--brand); font-weight: 700; }
.fig__zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font: 600 .8125rem/1 var(--font-body);
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1);
}
.fig__zoom svg { width: 15px; height: 15px; }
.fig__zoom:hover { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-soft); }
.fig__media {
  position: relative;
  padding: 12px;
  background: var(--paper);
}
.fig__media img { width: 100%; height: auto; cursor: zoom-in; }
.fig--wide .fig__media { padding: 14px 16px; }
.fig__caption {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: 1.6;
}
.fig__caption strong { color: var(--text); }
.fig-pair { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 1000px) {
  .fig-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
}
.fig-pair .fig__media { flex: 1 1 auto; display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   5g. Method: motivation, parts, checklist, architecture, divider
   -------------------------------------------------------------------------- */
.motivation { max-width: 64rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); }
.motivation__text, .motivation > .principle { max-width: var(--w-text); margin-inline: auto; }
.motivation h3 { margin: .5rem 0 1rem; }
.principle {
  margin: 1.25rem 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--brand-soft);
  color: var(--text-2);
}
.principle strong { color: var(--text); }

.part { margin-top: clamp(3.5rem, 7vw, 5rem); }
.part-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 2px 16px;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.part-badge {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
  font: 700 1.25rem/1 var(--font-display);
}
.part-eyebrow {
  color: var(--brand);
  font: 700 var(--fs-micro)/1.3 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.part-title { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.75rem); }

.part01 {
  display: grid;
  gap: 2rem;
  grid-template-areas: "text" "widget" "arch";
}
.part01__text { grid-area: text; max-width: var(--w-text); }
.part01__widget { grid-area: widget; min-width: 0; }
.part01__arch { grid-area: arch; min-width: 0; }
@media (min-width: 1200px) {
  .part01 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "text widget" "arch widget";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    align-items: start;
  }
}
/* Stick only when the whole widget (about 700 px) fits under the nav, so its
   controls never stay below the fold on short laptop screens. */
@media (min-width: 1200px) and (min-height: 800px) {
  .part01__widget { position: sticky; top: calc(var(--nav-h) + 20px); }
}
.part-intro { color: var(--text-2); }
.part-intro + .checklist { margin-top: 1.25rem; }
.training-intro { max-width: var(--w-text); }

.checklist { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.checklist svg { width: 22px; height: 22px; margin-top: 3px; color: var(--brand); }
.checklist strong { color: var(--text); }

.divider {
  width: 22rem;
  max-width: 70%;
  height: 2px;
  margin: clamp(3.5rem, 7vw, 5rem) auto 0;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-ring), transparent);
  opacity: .8;
}

/* Architecture card */
.arch { display: grid; gap: 18px; }
.arch__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.arch__title { font: 600 1.0625rem/1.3 var(--font-body); color: var(--text); }
.arch__model { display: grid; gap: 8px; }
.arch__name { color: var(--text); font: 600 .9375rem/1.3 var(--font-body); }
.arch__name span { color: var(--text-3); font-weight: 400; }
.arch__bar { display: flex; gap: 4px; }
.arch__seg {
  flex: var(--n, 1) 1 0;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid;
  border-radius: 10px;
  line-height: 1.25;
}
.arch__seg b { display: block; font: 600 .875rem/1.25 var(--font-body); color: inherit; }
.arch__seg small { display: block; margin-top: 2px; font: 400 var(--fs-micro)/1.3 var(--font-mono); opacity: .95; }
.arch__seg--prelude { background: var(--arch-prelude-bg); color: var(--arch-prelude-ink); border-color: var(--arch-prelude-edge); }
.arch__seg--core { background: var(--arch-core-bg); color: var(--arch-core-ink); border-color: var(--arch-core-edge); }
.arch__seg--coda { background: var(--arch-coda-bg); color: var(--arch-coda-ink); border-color: var(--arch-coda-edge); }
.arch__seg--lm { background: var(--arch-lm-bg); color: var(--arch-lm-ink); border-color: var(--arch-lm-edge); }
.arch__seg--gate { background: var(--arch-gate-bg); color: var(--arch-gate-ink); border-color: var(--arch-gate-edge); }
.arch__loop { display: inline-block; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }
.arch__note { color: var(--text-3); font-size: var(--fs-sm); line-height: 1.55; }
.arch__heads { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   5g-ii. Motivation figure: the computation-difficulty mismatch (mm-)
   A schematic drawn in HTML/CSS (no SVG text that shrinks with a viewBox),
   themed only through the tokens above. Each masked position is one .mm-col
   with --need (illustrative difficulty, as a fraction of its panel's value
   axis); panel (b) columns add --n (recurrent passes until commit). Bars
   share one geometry: every .mm-g sets --s (start) and --z (size) along the
   value axis, and the layout maps that axis to x (rows) or y (columns).
   Layout follows the figure's own width, mobile first:
     < 560px   panels stacked, bars run horizontally (one row per position)
     >= 560px  bars stand vertically (one column per position)
     >= 900px  panels (a) and (b) side by side
   Browsers without container queries keep the row layout at every width.
   -------------------------------------------------------------------------- */
.mm-fig {
  container: mmfig / inline-size;
  margin: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  --fixed: .4;                        /* panel (a): the fixed depth */
  --mm-spent: var(--dlm-bg);          /* fallbacks; refined below with color-mix() */
  --mm-hatch: var(--dlm);
  --mm-starve-bg: var(--surface);
  --mm-seg-edge: var(--border-strong);
  --mm-tokw: 56px;                    /* token column in the row layout */
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .mm-fig {
    --mm-spent: color-mix(in srgb, var(--dlm) 22%, var(--surface));
    --mm-hatch: color-mix(in srgb, var(--dlm) 62%, transparent);
    --mm-starve-bg: color-mix(in srgb, var(--neg) 9%, var(--surface));
    --mm-seg-edge: color-mix(in srgb, var(--d4) 45%, transparent);
  }
  /* Dark: the bright amber mixed into navy turns olive, so mix the deeper amber instead */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mm-fig {
      --mm-spent: color-mix(in srgb, var(--latent-edge) 44%, var(--surface));
      --mm-hatch: color-mix(in srgb, var(--dlm) 55%, transparent);
    }
  }
  :root[data-theme="dark"] .mm-fig {
    --mm-spent: color-mix(in srgb, var(--latent-edge) 44%, var(--surface));
    --mm-hatch: color-mix(in srgb, var(--dlm) 55%, transparent);
  }
}
.mm-fig:hover { box-shadow: var(--sh-md); }   /* not zoomable: no hover lift */
.mm-body { padding: 14px 12px 12px; }

/* Sentence with the masked positions */
.mm-ctx { padding: 0 4px 12px; }
.mm-ctx__lead {
  color: var(--text-3);
  font: 600 var(--fs-micro)/1.4 var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mm-ctx__line { margin-top: 4px; color: var(--text-2); font: 400 .875rem/2.15 var(--font-mono); }

.mm-chip {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 5px;
  border: 1px dashed var(--mask-edge);
  border-radius: var(--r-chip);
  background: var(--mask-bg);
  color: var(--text);
  font: 600 .8125rem/1 var(--font-mono);
  white-space: nowrap;
}
.mm-ctx__line .mm-chip + .mm-chip { margin-left: 2px; }

/* Panels */
.mm-panels { display: grid; gap: 12px; }
.mm-panel {
  min-width: 0;
  padding: 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
}
.mm-panel--dlm { background: var(--dlm-bg); }
.mm-panel--ours { background: var(--ours-bg); }
.mm-panel__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--text);
  font: 600 var(--fs-sm)/1.35 var(--font-display);
}
.mm-panel__tag {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--dlm);
  font: 700 var(--fs-micro)/1 var(--font-body);
  transform: translateY(-1px);
}
.mm-panel--ours .mm-panel__tag { color: var(--brand); }
.mm-panel__sub { margin: 3px 0 0 28px; color: var(--text-2); font-size: .8125rem; line-height: 1.45; }
.mm-panel__sub strong { color: var(--text); }

/* Plot: rows by default */
.mm-plot { display: flex; flex-direction: column; margin-top: 10px; padding-top: 20px; }
.mm-cols { display: grid; grid-auto-rows: 28px; }
.mm-col {
  display: grid;
  grid-template-columns: var(--mm-tokw) minmax(0, 1fr);
  grid-template-areas: "tok track";
  min-width: 0;
}
.mm-col > .mm-chip { grid-area: tok; justify-self: start; align-self: center; height: 22px; }
.mm-track { grid-area: track; position: relative; border-left: 1.5px solid var(--border-strong); }
.mm-plot--passes .mm-track {
  background:
    linear-gradient(var(--border), var(--border)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--border), var(--border)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--border), var(--border)) 75% 0 / 1px 100% no-repeat;
}
.mm-g {
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: calc(var(--s) * 100%);
  width: calc(var(--z) * 100%);
}
.mm-bar { --s: 0; --z: var(--fixed); background: var(--mm-spent); }
.mm-waste {
  --s: var(--need);
  --z: calc(var(--fixed) - var(--need));
  background: repeating-linear-gradient(135deg, var(--mm-hatch) 0 2px, transparent 2px 7px), var(--mm-spent);
}
.mm-short {
  --s: var(--fixed);
  --z: calc(var(--need) - var(--fixed));
  background: radial-gradient(circle, var(--neg) 1.1px, transparent 1.5px) 0 0 / 6px 6px, var(--mm-starve-bg);
}
.mm-need { --s: 0; --z: var(--need); z-index: 2; border: 2px dashed var(--text); border-radius: 3px; pointer-events: none; }
.mm-seg {
  --s: calc((var(--i) - 1) / 4);
  --z: .25;
  display: flex;
  align-items: center;
  padding-left: 8px;             /* clear of the dashed outline's edge */
  background: var(--pass-bg);
  color: var(--pass-ink);
  box-shadow: inset 0 0 0 1px var(--mm-seg-edge);
  font: 600 var(--fs-micro)/1 var(--font-mono);
}
.mm-fixed {                 /* one piece per position, so the line is continuous */
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: calc(var(--fixed) * 100%);
  border-left: 2.5px solid var(--dlm);
  transform: translateX(-50%);
}
.mm-cap {                   /* maximum recurrent depth K */
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  border-right: 2px dashed var(--text-3);
}
.mm-tag {
  --c: calc((var(--need) + var(--fixed)) / 2);   /* middle of the wasted or starved stretch */
  position: absolute;
  z-index: 4;
  top: 50%;
  left: calc(var(--c) * 100%);
  transform: translate(-50%, -50%);
  padding: 0 5px;
  border-radius: var(--r-chip);
  background: var(--surface);
  font: 700 var(--fs-micro)/18px var(--font-body);
  white-space: nowrap;
}
.mm-tag--waste { color: var(--text); box-shadow: 0 0 0 1px var(--dlm); }
.mm-tag--short { color: var(--neg); box-shadow: 0 0 0 1px var(--neg); }
.mm-linelab, .mm-caplab {
  position: absolute;
  z-index: 4;
  bottom: calc(100% + 4px);
  font: 700 var(--fs-micro)/1.2 var(--font-body);
  white-space: nowrap;
}
.mm-linelab { left: calc(var(--fixed) * 100%); transform: translateX(-50%); color: var(--text); }
.mm-caplab { right: 0; color: var(--text-2); font-weight: 600; }

.mm-ylab { order: 2; margin-top: 6px; color: var(--text-3); font: 500 var(--fs-micro)/1.3 var(--font-body); white-space: nowrap; }

/* Confidence-based decoding: this step -> next step */

/* Legend */
.mm-legend { padding: 2px 4px 0; gap: 6px 16px; }
.mm-sw { flex: none; display: inline-block; width: 22px; height: 12px; border-radius: 2px; }
.mm-sw--need { border: 2px dashed var(--text); }
.mm-sw--waste { background: repeating-linear-gradient(135deg, var(--mm-hatch) 0 2px, transparent 2px 7px), var(--mm-spent); }
.mm-sw--short { background: radial-gradient(circle, var(--neg) 1.1px, transparent 1.5px) 0 0 / 6px 6px, var(--mm-starve-bg); box-shadow: inset 0 0 0 1px var(--neg); }
.mm-sw--pass { display: inline-flex; width: auto; height: 16px; overflow: hidden; }
.mm-sw--pass span {
  display: grid;
  place-items: center;
  width: 15px;
  background: var(--pass-bg);
  color: var(--pass-ink);
  box-shadow: inset 0 0 0 1px var(--mm-seg-edge);
  font: 600 var(--fs-micro)/1 var(--font-mono);
}

/* Columns: one vertical bar per position */
@container mmfig (min-width: 560px) {
  .mm-body { padding: 16px; }

  .mm-panel { padding: 16px; }
  .mm-plot { --h: 176px; position: relative; padding: 24px 0 0 22px; }
  .mm-cols { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .mm-col { grid-template-columns: none; grid-template-rows: var(--h) auto; grid-template-areas: "track" "tok"; }
  .mm-col > .mm-chip { justify-self: center; align-self: start; height: 24px; margin-top: 8px; }
  .mm-track { --bx: max(22%, calc(50% - 18px)); border-left: 0; border-bottom: 1.5px solid var(--border-strong); }
  .mm-col:first-child .mm-track { border-left: 1.5px solid var(--border-strong); }
  .mm-plot--passes .mm-track {
    background:
      linear-gradient(var(--border), var(--border)) 0 25% / 100% 1px no-repeat,
      linear-gradient(var(--border), var(--border)) 0 50% / 100% 1px no-repeat,
      linear-gradient(var(--border), var(--border)) 0 75% / 100% 1px no-repeat;
  }
  .mm-g { top: auto; bottom: calc(var(--s) * 100%); left: var(--bx); right: var(--bx); width: auto; height: calc(var(--z) * 100%); }
  .mm-seg { align-items: flex-end; justify-content: center; padding: 0 0 4px; }
  .mm-fixed { top: auto; left: 0; right: 0; bottom: calc(var(--fixed) * 100%); border-left: 0; border-top: 2.5px solid var(--dlm); transform: translateY(50%); }
  .mm-cap { bottom: auto; left: 0; border-right: 0; border-top: 2px dashed var(--text-3); }
  .mm-tag { top: auto; left: 50%; bottom: calc(var(--c) * 100%); transform: translate(-50%, 50%); }
  .mm-linelab { left: 300%; bottom: calc(var(--fixed) * 100% + 5px); }   /* over the boundary of columns 3 and 4 */
  .mm-caplab { right: auto; left: 2px; bottom: calc(100% + 6px); }

  .mm-ylab {
    position: absolute;
    left: 0;
    top: calc(24px + var(--h));
    width: var(--h);
    margin: 0;
    line-height: 16px;
    text-align: center;
    transform: rotate(-90deg);
    transform-origin: 0 0;
  }
}
/* Panels side by side */
@container mmfig (min-width: 900px) {
  .mm-panels {                     /* panels side by side, key centred underneath */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "a b" "key key";
  }
  .mm-panel--dlm { grid-area: a; }
  .mm-panel--ours { grid-area: b; }
  .mm-legend { grid-area: key; justify-content: center; padding: 2px 4px 0; }
  .mm-panel__sub { min-height: calc(2em * 1.45); }   /* both plots start at the same height */
}

@media (forced-colors: active) {
  .mm-track, .mm-sw { forced-color-adjust: none; }
}

/* --------------------------------------------------------------------------
   5h. Disclosure (details/summary) and Algorithm 1
   -------------------------------------------------------------------------- */
.disclosure {
  margin-top: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 18px;
  border-radius: var(--r-card);
  color: var(--text);
  font: 600 1rem/1.35 var(--font-body);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-1);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { background: var(--surface-2); }
.disclosure[open] > summary { border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 1px solid var(--border); }
.disclosure__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
}
.disclosure__icon svg { width: 18px; height: 18px; }
.disclosure__hint { margin-left: auto; color: var(--text-3); font: 500 var(--fs-sm)/1 var(--font-body); white-space: nowrap; }
.disclosure__chev { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.disclosure[open] .disclosure__chev { transform: rotate(180deg); }
.disclosure__body { padding: clamp(16px, 2.5vw, 24px); }

.algo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.algo-eqs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.algo-eqs .eq { min-width: 0; }
.algo-eqs .eq__math .katex { font-size: 1.04em; }
.algo-eqs__title { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .algo-eqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .algo-eqs .eq:nth-last-of-type(2) { border-bottom: 0; }
}
.algo { width: 100%; max-width: 52rem; margin-inline: auto; }
.algo-eqs__title { color: var(--text); font: 600 .9375rem/1.4 var(--font-body); }

.algo { font-size: .9375rem; line-height: 1.7; color: var(--text-2); }
.algo__caption {
  padding: 6px 0;
  border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--text);
  color: var(--text);
}
.algo__caption b { font-weight: 700; }
.algo__input { padding: 6px 0 4px; }
.algo__lines { margin: 0; padding: 0 0 8px; list-style: none; border-bottom: 2px solid var(--text); overflow-x: auto; }
.algo__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
  padding-left: calc(2.6em + var(--i, 0) * 1.5em);
  text-indent: 0;
  position: relative;
}
.algo__ln {
  position: absolute;
  left: 0;
  width: 2.2em;
  color: var(--text-muted);
  font: 400 .8125rem/1.95 var(--font-mono);
  text-align: right;
}
.algo__cmt { margin-left: auto; color: var(--text-3); font-style: italic; white-space: nowrap; }
.algo__cmt::before { content: "\25B7\00a0"; font-style: normal; }
@media (max-width: 559.98px) {
  .algo__cmt { white-space: normal; text-align: right; }
}
.kw { color: var(--text); font-weight: 700; }
.fn { font-family: var(--font-body); font-style: normal; color: var(--text); }

/* --------------------------------------------------------------------------
   5i. Equations (KaTeX) and inline TeX fallback
   -------------------------------------------------------------------------- */
.eq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-md);
  padding: clamp(14px, 2.6vw, 26px) clamp(16px, 3vw, 30px);
}
.eq { min-width: 0; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.eq:first-child { padding-top: 4px; }
.eq:last-of-type { border-bottom: 0; }
.eq__label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  color: var(--text-3);
  font: 600 var(--fs-micro)/1.4 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eq__label b { color: var(--brand); font-weight: 700; }
.eq__math {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  color: var(--text);
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 12px 100% no-repeat scroll;
}
.eq__math .katex-display { margin: .5em 0 .25em; }
.eq__math .katex { font-size: 1.14em; }
/* site.js shows the widest form of an equation that fits (data-tex-mid /
   data-tex-narrow hold line-broken forms); when even the narrowest does not
   fit, it sets .is-tight and the maths drops to body size. */
.eq__math.is-tight .katex { font-size: 1em; }
.algo-eqs .eq__math.is-tight .katex { font-size: .96em; }
.eq-legend {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.75;
}
.eq-legend .katex { font-size: 1.23em; }   /* keeps subscripts at the 12 px floor */
.algo .note { font-size: var(--fs-sm); }
.algo .note .katex { font-size: 1.23em; }
[data-tex] > code {
  font-size: .8125rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-2);
  background: var(--surface-3);
  border-radius: var(--r-xs);
  padding: 1px 4px;
}
[data-display] > code { display: block; padding: 10px 12px; }
.katex { color: inherit; font-size: 1.08em; }
.tex-fallback { font-style: normal; }

/* --------------------------------------------------------------------------
   5j. Explainer cards, KPIs, takeaways
   -------------------------------------------------------------------------- */
.explainers { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 900px) {
  .explainers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
.explainer { padding: clamp(18px, 2.4vw, 24px); }
.explainer__tag {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font: 700 .875rem/1 var(--font-display);
}
.explainer p { color: var(--text-3); font-size: .96875rem; line-height: 1.65; }

.kpis {
  display: grid;
  gap: 12px;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.kpi {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
}
.kpi__value {
  display: block;
  color: var(--brand);
  font: 700 1.5rem/1.15 var(--font-display);
  letter-spacing: -.01em;
}
.kpi__label { display: block; margin-top: 6px; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.kpi__label strong { color: var(--text-2); }

.takeaways {
  display: grid;
  gap: 14px;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .takeaways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
.takeaway {
  padding: 16px 18px 17px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-xs) var(--r-card) var(--r-card) var(--r-xs);
  background: var(--surface);
  color: var(--text-3);
  font-size: .96875rem;
  line-height: 1.6;
}
.takeaway strong { display: block; margin-bottom: 4px; color: var(--text); font-weight: 600; }

.block-gap { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --------------------------------------------------------------------------
   5k. Code card (BibTeX) and copy button
   -------------------------------------------------------------------------- */
.code-card {
  max-width: 56rem;
  margin-inline: auto;
  overflow: hidden;
  background: var(--term-bg);
  border: 1px solid var(--term-line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-lg);
  color: var(--term-text);
}
.code-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px 7px 16px;
  background: var(--term-bar);
  border-bottom: 1px solid var(--term-line);
}
.code-card__lang {
  color: var(--term-muted);
  font: 600 var(--fs-micro)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.code-card__pre {
  margin: 0;
  padding: 18px 20px 20px;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--term-bg) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--term-bg) 30%, transparent) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(148, 163, 184, .28), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(148, 163, 184, .28), transparent) right center / 12px 100% no-repeat scroll;
  color: var(--term-text);
  font: 400 .875rem/1.75 var(--font-mono);
  white-space: pre;
  tab-size: 2;
}
.code-card__pre:focus-visible { outline-offset: -3px; outline-color: var(--term-accent); }
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--term-line);
  border-radius: 9px;
  background: transparent;
  color: var(--term-text);
  font: 600 .875rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.copy-btn svg { width: 16px; height: 16px; flex: none; }
.copy-btn:hover { background: #1e293b; color: #ffffff; }
.copy-btn:focus-visible { outline-color: var(--term-accent); }
.copy-btn__label { min-width: 3.4em; text-align: left; }
.copy-btn .i-check { display: none; }
.copy-btn.is-copied { border-color: #166534; color: #86efac; }
.copy-btn.is-copied .i-copy { display: none; }
.copy-btn.is-copied .i-check { display: block; }
.copy-btn.is-error { border-color: #7f1d1d; color: #fca5a5; }

/* --------------------------------------------------------------------------
   5l. Chips, segmented control, tabs, select, range, kbd
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font: 500 .8125rem/1.25 var(--font-body);
  white-space: nowrap;
}
.chip--brand { border-color: transparent; background: var(--brand-soft); color: var(--brand); }
.chip--muted { background: var(--bg-muted); color: var(--text-3); }
.chip--mono { font-family: var(--font-mono); }

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-muted);
}
.seg__btn {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-3);
  font: 600 .875rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
}
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"], .seg__btn[aria-selected="true"] {
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--sh-sm);
}

.tabs__list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: thin;
}
.tabs__tab {
  min-height: 44px;
  margin-bottom: -1px;
  padding: 0 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-3);
  font: 600 .9375rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs__panel { padding-top: 20px; }

.select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 36px;
  max-width: 100%;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-btn);
  background-color: var(--surface);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  font: 500 .875rem/1.2 var(--font-body);
  cursor: pointer;
}
.select:hover { border-color: var(--brand-ring); }

.range { width: 100%; height: 28px; accent-color: var(--brand); cursor: pointer; }

.kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-2);
  font: 600 var(--fs-micro)/1.5 var(--font-mono);
}

/* --------------------------------------------------------------------------
   5m. Tooltips
   [data-tip] gives a CSS tooltip on hover/focus (needs position: relative,
   set here). .tooltip is a JS-positioned floating tooltip for widgets.
   -------------------------------------------------------------------------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  border: 1px solid var(--tip-edge);
  border-radius: 8px;
  background: var(--tip-bg);
  box-shadow: var(--sh-md);
  color: var(--tip-ink);
  font: 500 var(--fs-micro)/1.35 var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--dur-1), transform var(--dur-1) var(--ease);
}
[data-tip-pos="bottom"]::after { top: calc(100% + 8px); bottom: auto; transform: translate(-50%, -4px); }
[data-tip-pos="left"]::after { left: auto; right: 0; transform: translate(0, 4px); }
[data-tip-pos="bottom-end"]::after { top: calc(100% + 8px); bottom: auto; left: auto; right: 0; transform: translate(0, -4px); }
[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tip-pos="left"]:focus-visible::after,
[data-tip-pos="bottom-end"]:focus-visible::after { transform: translate(0, 0); }
/* Hover only where a real hover exists, so a tap never leaves a tooltip on
   screen. A shown tooltip can itself be hovered: a transparent bridge spans
   the gap to it. */
@media (hover: hover) {
  [data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  [data-tip-pos="left"]:hover::after,
  [data-tip-pos="bottom-end"]:hover::after { transform: translate(0, 0); }
  [data-tip]:hover::before { content: ""; position: absolute; z-index: 60; left: 0; right: 0; bottom: 100%; height: 10px; }
  [data-tip-pos="bottom"]:hover::before,
  [data-tip-pos="bottom-end"]:hover::before { top: 100%; bottom: auto; }
}
/* Escape hides a shown tooltip until hover and focus have left (site.js) */
[data-tip][data-tip-off]::after { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }
[data-tip][data-tip-off]::before { content: none; }

.tooltip {
  position: absolute;
  z-index: 70;
  max-width: 260px;
  padding: 7px 10px;
  border: 1px solid var(--tip-edge);
  border-radius: 8px;
  background: var(--tip-bg);
  box-shadow: var(--sh-md);
  color: var(--tip-ink);
  font: 500 .8125rem/1.4 var(--font-body);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5n. Commitment-pass ramp helpers + legends (shared by all widgets)
   Any element with data-pass="1..4" gets --pass-bg / --pass-ink.
   Inside .term (dark panels) the fixed terminal ramp is used instead.
   -------------------------------------------------------------------------- */
[data-pass="1"] { --pass-bg: var(--d1); --pass-ink: var(--d1-ink); }
[data-pass="2"] { --pass-bg: var(--d2); --pass-ink: var(--d2-ink); }
[data-pass="3"] { --pass-bg: var(--d3); --pass-ink: var(--d3-ink); }
[data-pass="4"] { --pass-bg: var(--d4); --pass-ink: var(--d4-ink); }
.term [data-pass="1"] { --pass-bg: var(--t1); --pass-ink: var(--t1-ink); }
.term [data-pass="2"] { --pass-bg: var(--t2); --pass-ink: var(--t2-ink); }
.term [data-pass="3"] { --pass-bg: var(--t3); --pass-ink: var(--t3-ink); }
.term [data-pass="4"] { --pass-bg: var(--t4); --pass-ink: var(--t4-ink); }

.pass-chip {
  border-radius: var(--r-xs);
  background: var(--pass-bg, transparent);
  color: var(--pass-ink, inherit);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pass-swatch {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--pass-bg, transparent);
  box-shadow: inset 0 0 0 1px var(--d-edge);
  vertical-align: -2px;
}
.term .pass-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: var(--text-3);
  font-size: .8125rem;
  line-height: 1.4;
}
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__title { color: var(--text-2); font-weight: 600; }

/* Terminal scope: dark panels in both themes (demo window, code cards) */
.term {
  --focus: var(--term-accent);
  /* method-state tokens take their dark values inside always-dark panels */
  --mask-bg: #172033;   --mask-ink: #94a3b8;   --mask-edge: #475569;
  --latent-bg: #3a2f12; --latent-ink: #fde68a; --latent-edge: #a16207;
  background: var(--term-bg);
  color: var(--term-text);
}
.term strong, .term b { color: var(--term-strong); }
.term .legend__title { color: var(--term-text); }
.term .seg { border-color: var(--term-line); background: rgba(255, 255, 255, .05); }
.term .seg__btn { color: var(--term-muted); }
.term .seg__btn:hover { color: var(--term-strong); }
.term .seg__btn[aria-pressed="true"], .term .seg__btn[aria-checked="true"], .term .seg__btn[aria-selected="true"] { background: #1e293b; color: var(--term-strong); box-shadow: none; }
.term .legend { color: var(--term-muted); }
.term .select { border-color: var(--term-line); background-color: var(--term-bar); color: var(--term-text); }

/* --------------------------------------------------------------------------
   5o. Widget mount points (fallback while JS loads or if it fails)
   -------------------------------------------------------------------------- */
.widget-mount { position: relative; min-width: 0; }
.widget-mount:not([data-mounted]) {
  display: grid;
  place-items: center;
  min-height: var(--mount-min-h, 220px);
  padding: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface-2);
  color: var(--text-3);
  text-align: center;
}
.widget-fallback { max-width: 34rem; font-size: var(--fs-caption); line-height: 1.6; }
.widget-fallback strong { display: block; margin-bottom: 4px; color: var(--text); }
#demo { --mount-min-h: 540px; }
#demo:not([data-mounted]) {
  border: 1px solid var(--term-line);
  border-radius: var(--r-win);
  background: var(--term-bg);
  color: var(--term-muted);
  box-shadow: var(--sh-xl);
}
#demo:not([data-mounted]) .widget-fallback strong { color: var(--term-strong); }
#loop-stepper { --mount-min-h: 440px; }
#results-table { --mount-min-h: 480px; }
/* While the deferred scripts are still loading (html.js until the head script adds .is-ready
   on DOMContentLoaded), reserve about the mounted height so the page does not jump when the
   widgets mount. A fallback still showing after that (a widget failed) keeps the compact size. */
html.js:not(.is-ready) .widget-fallback { visibility: hidden; }   /* loading: a quiet skeleton */
html.js:not(.is-ready) #demo { --mount-min-h: 1050px; }
html.js:not(.is-ready) #loop-stepper { --mount-min-h: 1020px; }
html.js:not(.is-ready) #results-table { --mount-min-h: 1180px; }
@media (min-width: 560px) {
  html.js:not(.is-ready) #demo { --mount-min-h: 920px; }
  html.js:not(.is-ready) #loop-stepper { --mount-min-h: 900px; }
  html.js:not(.is-ready) #results-table { --mount-min-h: 1060px; }
}
@media (min-width: 768px) {
  html.js:not(.is-ready) #demo { --mount-min-h: 800px; }
  html.js:not(.is-ready) #loop-stepper { --mount-min-h: 690px; }
  html.js:not(.is-ready) #results-table { --mount-min-h: 960px; }
}
@media (min-width: 1200px) {
  html.js:not(.is-ready) #demo { --mount-min-h: 786px; }
  html.js:not(.is-ready) #loop-stepper { --mount-min-h: 710px; }
  html.js:not(.is-ready) #results-table { --mount-min-h: 948px; }
}

/* --------------------------------------------------------------------------
   5p. Lightbox (<dialog>)
   -------------------------------------------------------------------------- */
.lightbox {
  width: min(96vw, 1680px);
  max-width: none;
  height: min(94vh, 1100px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--sh-xl);
  color: var(--text-2);
}
@supports (height: 100dvh) {
  .lightbox { height: min(94dvh, 1100px); }
}
.lightbox[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgba(2, 6, 23, .74); }
.lightbox__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-bottom: 1px solid var(--border);
}
.lightbox__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: 600 .9375rem/1.3 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lightbox__hint { color: var(--text-3); font-size: var(--fs-micro); white-space: nowrap; }
.lightbox__stage {
  position: relative;
  overflow: auto;
  background: var(--paper);
  overscroll-behavior: contain;
}
.lightbox__stage:focus-visible { outline-offset: -3px; }
.lightbox__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: clamp(8px, 2vw, 20px);
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox.is-zoomed .lightbox__img {
  position: static;
  width: var(--zoom-w, 1600px);
  height: auto;
  max-width: none;
  cursor: grab;
}
.lightbox.is-panning .lightbox__img { cursor: grabbing; }
.lightbox.is-zoomed .lightbox__stage { display: flex; }
.lightbox.is-zoomed .lightbox__img { flex: none; margin: auto; }
.lightbox__caption {
  max-height: 24vh;
  overflow: auto;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.lightbox__caption:focus-visible { outline-offset: -3px; }   /* focusable only while it scrolls (site.js) */
.lightbox__caption strong { color: var(--text); }
.lightbox__caption .fig__label { display: none; }
/* No zoom available at this size: no zoom hint, no zoom cursor */
.lightbox.no-zoom .lightbox__hint { display: none; }
.lightbox.no-zoom .lightbox__img { cursor: default; }
@media (max-width: 639.98px) {
  .lightbox { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
  @supports (height: 100dvh) { .lightbox { height: 100dvh; } }
  .lightbox__bar { flex-wrap: wrap; row-gap: 0; }
  .lightbox__title { flex-basis: 0; }   /* title shares the first row with the buttons */
  .lightbox__hint { order: 5; flex: 1 0 100%; white-space: normal; }   /* own row under the title */
  .lightbox__caption { max-height: 30vh; }
}

/* --------------------------------------------------------------------------
   5q. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 40px 0 56px;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-caption);
}
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.footer__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); }
.footer__brand .footer__mark { width: 31px; height: 15px; flex: none; }
.to-top { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 600; text-decoration: none; }
.to-top svg { width: 16px; height: 16px; }

/* Heading permalinks (added by site.js to [data-anchor] headings) */
.anchor {
  position: absolute;
  margin-left: .3em;
  padding: 0 .15em;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-1);
}
[data-anchor]:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--brand); }
@media (hover: none), (max-width: 767.98px) { .anchor { display: none; } }

/* --------------------------------------------------------------------------
   6. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.note { color: var(--text-3); font-size: .8125rem; line-height: 1.55; }
.muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.tnum { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   7. Reduced motion, forced colours, print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .contrib:hover, .contrib:focus-within, .stat:hover { transform: none; }
}

@media (forced-colors: active) {
  .grad { color: CanvasText; -webkit-text-fill-color: CanvasText; background: none; }
  .pass-chip, .pass-swatch { forced-color-adjust: none; outline: 1px solid CanvasText; }
  .btn, .seg__btn, .tabs__tab, .fig__zoom, .theme-toggle { border: 1px solid ButtonText; }
  .seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"], .seg__btn[aria-selected="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media print {
  .site-nav, .skip-link, .theme-toggle, .fig__zoom, .copy-btn, .anchor { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; break-inside: avoid-page; }
  .fig, .card, .eq-card { box-shadow: none; }
}