/* Interview study surface */
.study-body {
  --study-ink: #18222d;
  --study-muted: #68717b;
  --study-line: #dfe4e8;
  --study-panel: #f5f7f8;
  --study-card: #ffffff;
  --study-code-bg: #f4f7fb;
  --study-code-ink: #24324a;
  --study-accent: #0f766e;
  --study-accent-soft: #dff4ef;
  --study-warm: #b45309;
  background: #fbfcfc;
  color: var(--study-ink);
}

[data-theme="dark"] .study-body {
  --study-ink: #e6edf3;
  --study-muted: #9aa6b2;
  --study-line: #293640;
  --study-panel: #151d23;
  --study-card: #11181e;
  --study-code-bg: #0f172a;
  --study-code-ink: #e7eef2;
  --study-accent: #5eead4;
  --study-accent-soft: #163a38;
  --study-warm: #f4b267;
  background: #0d1117;
}

.study-body nav { border-color: var(--study-line); }
.study-body nav .nav-inner { max-width: 1180px; }
.study-body .nav-links a.active { color: var(--study-accent); }

.study-index,
.study-topic {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

.study-hero {
  max-width: 850px;
  padding: 6.5rem 0 4.5rem;
}

.study-kicker,
.sidebar-label {
  color: var(--study-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.study-hero h1 {
  max-width: 780px;
  margin: 0.75rem 0 1.25rem;
  color: var(--study-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.8rem, 7vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.study-lede {
  max-width: 690px;
  color: var(--study-muted);
  font-size: 1.1rem;
  line-height: 1.8;
}

.study-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.study-hero-meta span,
.topic-status {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--study-line);
  border-radius: 999px;
  color: var(--study-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.7rem;
}

.study-map {
  border: 1px solid var(--study-line);
  border-radius: 18px;
  background: var(--study-panel);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.study-map-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.4rem;
}

.study-map-heading h2 {
  margin-top: 0.35rem;
  color: var(--study-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 500;
}

.study-map-heading > p {
  max-width: 260px;
  color: var(--study-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: right;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.topic-card {
  position: relative;
  display: block;
  min-height: 205px;
  border: 1px solid var(--study-line);
  border-radius: 12px;
  background: var(--study-card);
  color: var(--study-ink);
  padding: 1.15rem 1.15rem 1.25rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.topic-card:hover {
  border-color: var(--study-accent);
  box-shadow: 0 10px 25px rgba(24, 34, 45, 0.08);
  text-decoration: none;
  transform: translateY(-3px);
}

.topic-card-live { border-color: color-mix(in srgb, var(--study-accent) 55%, var(--study-line)); }
.topic-status { float: right; color: var(--study-accent); font-size: 0.64rem; padding: 0.22rem 0.5rem; }
.topic-card h3 { max-width: 230px; margin: 1.2rem 0 0.8rem; font-size: 1.05rem; line-height: 1.3; }
.topic-card ul { margin: 0; padding-left: 1rem; color: var(--study-muted); font-size: 0.83rem; line-height: 1.65; }
.topic-card li::marker { color: var(--study-accent); }

.study-note {
  display: flex;
  gap: 0.8rem;
  max-width: 700px;
  margin: 2rem 0 0 1rem;
  color: var(--study-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.study-note-mark { color: var(--study-accent); font-size: 1.4rem; line-height: 1.2; }
.study-note strong { color: var(--study-ink); }

/* Topic pages */
.topic-topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.4rem;
  color: var(--study-muted);
  font: 0.72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topic-topline a { color: var(--study-accent); text-transform: none; }
.topic-header { max-width: 850px; padding: 4rem 0 4.5rem; }
.topic-header h1 { margin: 0.7rem 0 0.9rem; color: var(--study-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 6vw, 4.7rem); font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.topic-header > p:not(.study-kicker) { max-width: 700px; color: var(--study-muted); font-size: 1.08rem; line-height: 1.7; }
.source-note { margin-top: 1.4rem; color: var(--study-muted); font-size: 0.78rem; }
.source-note a { color: var(--study-accent); }

.study-layout { display: grid; grid-template-columns: minmax(170px, 220px) minmax(0, 760px); align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.study-sidebar { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; padding-bottom: 1rem; }
.sidebar-label { margin-bottom: 0.8rem; font-size: 0.66rem; }
.topic-toc { border-left: 1px solid var(--study-line); }
.topic-toc a { display: block; border-left: 2px solid transparent; margin-left: -1px; padding: 0.35rem 0.75rem; color: var(--study-muted); font-size: 0.79rem; line-height: 1.35; transition: color 0.15s, border-color 0.15s; }
.topic-toc a:hover, .topic-toc a.is-active { border-color: var(--study-accent); color: var(--study-accent); text-decoration: none; }
.topic-toc a.toc-depth-3 { padding-left: 1.35rem; font-size: 0.72rem; }

.study-article { min-width: 0; padding-bottom: 3rem; }
.study-article h1, .study-article h2, .study-article h3, .study-article h4 { scroll-margin-top: 6rem; color: var(--study-ink); font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.15; }
.study-article h1 { margin: 0 0 1.25rem; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -0.035em; }
.study-article h2 { margin: 3.2rem 0 1rem; border-top: 1px solid var(--study-line); padding-top: 1.2rem; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.025em; }
.study-article h3 { margin: 2.1rem 0 0.7rem; font-size: 1.35rem; }
.study-article h4 { margin: 1.5rem 0 0.5rem; font-size: 1.08rem; }
.study-article p { margin: 0.8rem 0; color: var(--study-ink); font-size: 0.98rem; line-height: 1.8; }
.study-article em { color: var(--study-muted); }
.study-article strong { font-weight: 750; }
.study-article a { color: var(--study-accent); }
.study-article ul, .study-article ol { margin: 0.7rem 0 1rem; padding-left: 1.4rem; }
.study-article li { margin: 0.35rem 0; color: var(--study-ink); font-size: 0.94rem; line-height: 1.7; }
.study-article li::marker { color: var(--study-accent); }
.study-article blockquote { margin: 1.3rem 0; border-left: 3px solid var(--study-accent); background: var(--study-accent-soft); padding: 0.8rem 1.1rem; }
.study-article blockquote p { margin: 0.2rem 0; color: var(--study-ink); }
.study-article hr { border: 0; border-top: 1px solid var(--study-line); margin: 2rem 0; }
.study-article code { border: 1px solid var(--study-line); border-radius: 4px; background: var(--study-panel); padding: 0.12rem 0.3rem; color: var(--study-ink); font: 0.86em/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.study-article pre { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-code-bg); padding: 1rem 1.1rem; color: var(--study-code-ink); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.study-article pre code { border: 0; background: transparent; padding: 0; color: inherit; font-size: 0.8rem; line-height: 1.65; }
.study-table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.study-article table { width: 100%; border-collapse: collapse; font-size: 0.88rem; line-height: 1.55; }
.study-article th, .study-article td { border: 1px solid var(--study-line); padding: 0.65rem 0.75rem; text-align: left; vertical-align: top; }
.study-article th { background: var(--study-panel); color: var(--study-ink); font-weight: 750; }
.study-article td { color: var(--study-ink); }
.study-article .formula { display: block; overflow-x: auto; margin: 0.8rem 0; border-left: 3px solid var(--study-warm); background: var(--study-panel); padding: 0.7rem 0.9rem; color: var(--study-ink); font: 0.9rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.study-article .math-display { overflow-x: auto; margin: 1.35rem 0; padding: 0.35rem 0.25rem; color: var(--study-ink); text-align: center; }
.study-article .math-display .mjx-container { max-width: 100%; }
.study-article .math-inline .mjx-container { margin: 0 0.08em; }
.study-article .visual-translation { margin: 1.4rem 0; border: 1px solid color-mix(in srgb, var(--study-accent) 35%, var(--study-line)); border-radius: 12px; background: var(--study-accent-soft); padding: 1rem 1.1rem; }
.visual-translation h4 { margin: 0 0 0.35rem; color: var(--study-accent); font: 700 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.visual-translation p { margin: 0.35rem 0; font-size: 0.88rem; }
.visual-translation .formula { margin: 0.6rem 0 0; background: color-mix(in srgb, var(--study-card) 65%, transparent); }
.bpe-visual { margin: 1.5rem 0; border: 1px solid color-mix(in srgb, var(--study-accent) 45%, var(--study-line)); border-radius: 16px; background: linear-gradient(135deg, var(--study-card), var(--study-accent-soft)); padding: clamp(1rem, 3vw, 1.5rem); }
.bpe-visual figcaption { margin-bottom: 1rem; color: var(--study-accent); font: 800 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.bpe-flow { display: grid; align-items: stretch; gap: 0.55rem; }
.bpe-flow-input { grid-template-columns: minmax(0, 0.7fr) auto minmax(0, 1.3fr); }
.bpe-flow-round { grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 0.9fr) auto minmax(0, 1.2fr); }
.bpe-step { display: flex; min-width: 0; min-height: 150px; flex-direction: column; justify-content: center; gap: 0.55rem; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-card); padding: 0.9rem; text-align: center; }
.bpe-step > span { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; align-self: center; border-radius: 50%; background: var(--study-panel); color: var(--study-muted); font: 800 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.bpe-step strong { color: var(--study-ink); font: 500 1.25rem/1.1 Georgia, "Times New Roman", serif; }
.bpe-step code { overflow-wrap: anywhere; border: 0; background: transparent; padding: 0; color: var(--study-muted); font-size: 0.7rem; }
.bpe-step-accent { border-color: var(--study-accent); background: var(--study-accent-soft); }
.bpe-step-accent > span { background: var(--study-accent); color: var(--study-card); }
.bpe-step-bytes code, .bpe-step-result code { font-size: 0.75rem; line-height: 1.55; }
.bpe-arrow { display: grid; place-items: center; color: var(--study-accent); font-size: 1.5rem; }
.bpe-round-label { margin: 1.05rem 0 0.6rem; color: var(--study-muted); font: 750 0.66rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; }
.bpe-visual > p { margin: 1rem 0 0; color: var(--study-muted); font-size: 0.82rem; text-align: center; }
.study-article .tokenizer-references { margin-top: 3rem; border-top: 1px solid var(--study-line); padding-top: 0.9rem; color: var(--study-muted); font-size: 0.76rem; line-height: 1.55; }
.study-article .tokenizer-references ul { margin: 0.45rem 0 0; padding-left: 1.2rem; }
.study-article .tokenizer-references li { margin: 0.2rem 0; color: var(--study-muted); font-size: 0.76rem; line-height: 1.55; }

/* Consolidated interview bank: questions scan quickly, answers stay concise. */
.interview-bank .study-article h2 { margin-top: 3rem; }
.interview-bank .study-article > p:has(> strong:only-child) { margin: 1.35rem 0 0; border: 1px solid var(--study-line); border-radius: 10px 10px 0 0; background: var(--study-panel); padding: 0.75rem 0.9rem; color: var(--study-ink); }
.interview-bank .study-article > p:has(> strong:only-child) > strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; line-height: 1.5; }
.interview-bank .answer-disclosure { margin: 0; border: 1px solid var(--study-line); border-top: 0; border-left: 3px solid var(--study-accent); border-radius: 0 0 10px 10px; background: var(--study-card); }
.interview-bank .answer-disclosure summary { display: flex; min-height: 44px; align-items: center; gap: 0.55rem; cursor: pointer; list-style: none; padding: 0.7rem 0.9rem; color: var(--study-accent); font: 750 0.76rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.interview-bank .answer-disclosure summary::-webkit-details-marker { display: none; }
.interview-bank .answer-disclosure summary::before { color: var(--study-accent); content: '▶'; font-size: 0.65rem; transition: transform 160ms ease; }
.interview-bank .answer-disclosure[open] summary::before { transform: rotate(90deg); }
.interview-bank .answer-disclosure[open] summary { border-bottom: 1px solid var(--study-line); background: var(--study-accent-soft); }
.interview-bank .answer-disclosure-body { padding: 0.85rem 0.95rem 0.9rem; }
.interview-bank .answer-disclosure-body p { margin: 0; color: var(--study-muted); }
.interview-bank .answer-disclosure summary:focus-visible { outline: 2px solid var(--study-accent); outline-offset: 3px; }
.interview-bank .source-coverage { margin: 1.4rem 0 2rem; border: 1px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line)); border-radius: 11px; background: var(--study-card); }
.interview-bank .source-coverage > summary { display: flex; min-height: 46px; align-items: center; gap: .55rem; cursor: pointer; list-style: none; padding: .75rem .9rem; color: var(--study-accent); font: 750 .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.interview-bank .source-coverage > summary::-webkit-details-marker { display: none; }
.interview-bank .source-coverage > summary::before { content: '▶'; font-size: .65rem; transition: transform 160ms ease; }
.interview-bank .source-coverage[open] > summary::before { transform: rotate(90deg); }
.interview-bank .source-coverage[open] > summary { border-bottom: 1px solid var(--study-line); background: var(--study-accent-soft); }
.interview-bank .source-coverage-body { padding: .8rem .9rem 1rem; }
.interview-bank .source-coverage-body > p { margin: 0 0 .75rem; color: var(--study-muted); font-size: .78rem; }
.interview-bank .source-coverage table { min-width: 620px; font-size: .72rem; }
.interview-bank .source-coverage th, .interview-bank .source-coverage td { padding: .42rem .5rem; }
.coverage-status { display: inline-block; border-radius: 999px; padding: .12rem .42rem; font: 800 .58rem/1.3 ui-monospace, monospace; text-transform: uppercase; }
.coverage-status.is-existing { background: color-mix(in srgb, #16a34a 14%, var(--study-card)); color: #15803d; }
.coverage-status.is-new { background: var(--study-accent-soft); color: var(--study-accent); }
.coverage-status.is-merged { background: color-mix(in srgb, var(--study-warm) 16%, var(--study-card)); color: var(--study-warm); }

/* Transformer interview diagrams: HTML/CSS so they remain crisp, themed, and responsive. */
.compact-topic.transformer-topic .study-layout { grid-template-columns: minmax(165px, 195px) minmax(0, 900px); gap: clamp(2rem, 5vw, 4rem); }
.transformer-topic .study-article mjx-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.tx-visual { margin: 1.5rem 0 2rem; border: 1px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line)); border-radius: 16px; background: linear-gradient(145deg, var(--study-card), color-mix(in srgb, var(--study-accent-soft) 48%, var(--study-card))); padding: clamp(1rem, 3vw, 1.5rem); box-shadow: 0 18px 45px rgba(24, 34, 45, 0.06); }
.tx-visual figcaption { margin-bottom: 1rem; color: var(--study-accent); font: 800 0.7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.tx-two-up { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tx-architecture .tx-two-up { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.tx-canvas { min-width: 0; border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb, var(--study-card) 90%, transparent); padding: 1rem; }
.tx-canvas h4, .tx-layout h4 { margin: 0 0 0.9rem; color: var(--study-muted); font: 800 0.68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.tx-stack { display: flex; position: relative; align-items: center; flex-direction: column; }
.tx-node { display: grid; min-height: 34px; place-items: center; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: 0.42rem 0.7rem; color: var(--study-ink); font: 750 0.72rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.tx-stack > .tx-node { width: min(82%, 245px); }
.tx-node.tx-accent { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); }
.tx-node.tx-warm { border-color: color-mix(in srgb, var(--study-warm) 62%, var(--study-line)); background: color-mix(in srgb, var(--study-warm) 10%, var(--study-card)); color: var(--study-warm); }
.tx-node.tx-io { border-color: var(--study-ink); background: var(--study-ink); color: var(--study-card); }
.tx-node small { display: block; margin-top: .24rem; color: var(--study-muted); font: 650 .56rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.tx-node.tx-io small { color: color-mix(in srgb, var(--study-card) 78%, transparent); }
.tx-arrow { min-height: 22px; color: var(--study-muted); font: 700 0.74rem/22px ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.tx-add { display: flex; align-items: center; gap: 0.45rem; }
.tx-add > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--study-accent); border-radius: 50%; background: var(--study-card); color: var(--study-accent); font: 800 1rem/1 ui-monospace, monospace; }
.tx-add small { color: var(--study-muted); font: 650 0.62rem/1.2 ui-monospace, monospace; }
.tx-block-stack { padding: 0 1.2rem; }
.tx-skip { position: absolute; left: 0; width: 16px; border: solid var(--study-accent); border-width: 1px 0 1px 1px; color: transparent; }
.tx-skip::after { position: absolute; right: -5px; bottom: -4px; color: var(--study-accent); content: '›'; font: 900 1rem/1 sans-serif; transform: rotate(28deg); }
.tx-skip-attn { top: 17px; height: 142px; }
.tx-skip-ffn { top: 166px; height: 142px; }
.tx-residual-block { display: grid; gap: .2rem; }
.tx-residual-stage { display: grid; grid-template-columns: minmax(0, 1fr) 98px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--study-accent) 45%, var(--study-line)); border-radius: 12px; background: var(--study-card); }
.tx-residual-main { display: flex; min-width: 0; align-items: center; flex-direction: column; padding: .8rem; }
.tx-residual-main .tx-node { width: 100%; }
.tx-residual-bypass { display: flex; position: relative; align-items: center; justify-content: center; flex-direction: column; gap: .25rem; border-left: 2px solid var(--study-accent); background: var(--study-accent-soft); padding: .65rem .4rem; color: var(--study-accent); text-align: center; }
.tx-residual-bypass::after { position: absolute; bottom: -1px; left: -7px; border-width: 6px 6px 0; border-style: solid; border-color: var(--study-accent) transparent transparent; content: ''; transform: rotate(45deg); }
.tx-residual-bypass span { font: 850 .76rem/1.2 ui-monospace, monospace; }
.tx-residual-bypass i { color: var(--study-muted); font: 650 .56rem/1.4 ui-monospace, monospace; font-style: normal; }
.tx-residual-add { display: grid; grid-column: 1 / -1; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: .55rem; border-top: 1px solid var(--study-line); background: color-mix(in srgb, var(--study-accent-soft) 55%, var(--study-card)); padding: .65rem .75rem; }
.tx-residual-add > b { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--study-accent); color: var(--study-card); font: 850 1rem/1 ui-monospace, monospace; }
.tx-residual-add > span { color: var(--study-ink); font: 750 .62rem/1.4 ui-monospace, monospace; }
.tx-residual-add small { display: block; color: var(--study-accent); font-size: .58rem; }
.tx-stage-arrow { min-height: 26px; line-height: 26px; }
.tx-parallel { display: grid; width: 100%; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.35rem; }
.tx-parallel > span { color: var(--study-accent); font-weight: 800; }
.tx-ellipsis { height: 28px; color: var(--study-muted); font-size: 1.3rem; line-height: 24px; }
.tx-takeaway { margin: 1rem 0 0 !important; color: var(--study-muted) !important; font-size: 0.82rem !important; line-height: 1.55 !important; text-align: center; }

.tx-qkv-input { display: grid; grid-template-columns: minmax(90px, 0.65fr) auto minmax(160px, 1.35fr); align-items: center; gap: 0.75rem; }
.tx-matrix { display: grid; min-width: 68px; min-height: 64px; place-items: center; align-content: center; gap: 0.2rem; border: 1px solid currentColor; border-radius: 9px; background-image: linear-gradient(rgba(127,127,127,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(127,127,127,.09) 1px, transparent 1px); background-size: 14px 14px; padding: 0.6rem; color: var(--study-muted); text-align: center; }
.tx-matrix strong { font: 700 1.2rem/1 Georgia, "Times New Roman", serif; }
.tx-matrix span { font: 650 0.62rem/1.3 ui-monospace, monospace; }
.tx-matrix-x, .tx-matrix-out { color: var(--study-ink); }
.tx-matrix.tx-q { color: #7c3aed; }
.tx-matrix.tx-k { color: #c2410c; }
.tx-matrix.tx-v { color: #0369a1; }
[data-theme="dark"] .tx-matrix.tx-q { color: #c4b5fd; }
[data-theme="dark"] .tx-matrix.tx-k { color: #fdba74; }
[data-theme="dark"] .tx-matrix.tx-v { color: #7dd3fc; }
.tx-projection, .tx-qkv-output { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.42rem; }
.tx-projection span { color: var(--study-muted); font: 700 0.67rem/1.3 ui-monospace, monospace; }
.tx-equation-flow { display: grid; grid-template-columns: repeat(11, auto); align-items: center; justify-content: center; gap: 0.45rem; margin-top: 1.2rem; border-top: 1px solid var(--study-line); padding-top: 1.2rem; }
.tx-equation-flow .tx-matrix { min-width: 72px; }
.tx-op { color: var(--study-muted); font: 800 0.9rem/1 ui-monospace, monospace; }
.tx-score { color: var(--study-warm); }
.tx-softmax { color: var(--study-accent); }
.tx-attn-note { margin-top: 1rem; color: var(--study-muted); font: 650 0.72rem/1.5 ui-monospace, monospace; text-align: center; }
.tx-attn-note span { color: var(--study-accent); }

/* Worked attention example: actual numbers and actual matrix dimensions. */
.tx-attention-example { padding: clamp(1.1rem, 3vw, 1.8rem); }
.tx-example-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin: -0.25rem 0 1.25rem; }
.tx-example-key > * { border: 1px solid var(--study-line); border-radius: 999px; background: var(--study-card); padding: 0.32rem 0.62rem; color: var(--study-muted); font: 700 0.64rem/1.25 ui-monospace, monospace; }
.tx-example-key strong { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); }
.tx-example-section { border-top: 1px solid var(--study-line); padding-top: 1rem; }
.tx-example-section + .tx-example-section { margin-top: 1.25rem; }
.tx-example-section h4, .tx-swiglu-example h4 { margin: 0 0 1rem; color: var(--study-ink); font: 800 0.72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.tx-projection-example { display: grid; grid-template-columns: auto 42px minmax(0, 1fr); align-items: center; gap: 0.7rem; }
.tx-branch-mark { color: var(--study-accent); font: 800 1.1rem/4.6 ui-monospace, monospace; text-align: center; }
.tx-projection-branches { display: grid; gap: 0.75rem; }
.tx-matrix-equation { display: grid; grid-template-columns: auto auto auto minmax(108px, 1fr); align-items: center; gap: 0.7rem; }
.tx-matrix-equation > b, .tx-attention-calculation > b { color: var(--study-accent); font: 800 0.72rem/1.3 ui-monospace, monospace; text-align: center; }
.tx-matrix-equation > small { color: var(--study-muted); font: 650 0.63rem/1.4 ui-monospace, monospace; }
.tx-number-matrix { min-width: 0; }
.tx-matrix-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
.tx-matrix-heading strong { color: var(--study-ink); font: 800 0.74rem/1.2 ui-monospace, monospace; }
.tx-matrix-heading span { color: var(--study-muted); font: 650 0.56rem/1.2 ui-monospace, monospace; white-space: nowrap; }
.tx-number-grid { display: grid; grid-template-columns: repeat(var(--matrix-cols), minmax(28px, 1fr)); overflow: hidden; border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-card); }
.tx-number-grid span { display: grid; min-width: 28px; height: 27px; place-items: center; border-right: 1px solid var(--study-line); border-bottom: 1px solid var(--study-line); color: var(--study-ink); font: 700 0.64rem/1 ui-monospace, monospace; }
.tx-number-grid span:nth-child(n) { background: color-mix(in srgb, currentColor 5%, var(--study-card)); }
.tx-number-matrix.tx-q { color: #7c3aed; }
.tx-number-matrix.tx-k { color: #c2410c; }
.tx-number-matrix.tx-v { color: #0369a1; }
.tx-number-matrix.tx-score { color: var(--study-warm); }
.tx-number-matrix.tx-softmax { color: var(--study-accent); }
.tx-number-matrix.tx-matrix-out { color: var(--study-ink); }
.tx-number-matrix.tx-q .tx-matrix-heading strong, .tx-number-matrix.tx-k .tx-matrix-heading strong, .tx-number-matrix.tx-v .tx-matrix-heading strong, .tx-number-matrix.tx-score .tx-matrix-heading strong, .tx-number-matrix.tx-softmax .tx-matrix-heading strong { color: currentColor; }
.tx-attention-scroll { overflow-x: auto; padding: 0.3rem 0 0.75rem; }
.tx-attention-calculation { display: grid; min-width: 1080px; grid-template-columns: 110px auto 120px auto 152px auto 152px auto 110px auto 110px; align-items: center; gap: 0.65rem; }
.tx-row-story { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
.tx-row-story span { border-left: 3px solid var(--study-accent); background: var(--study-card); padding: 0.55rem 0.65rem; color: var(--study-muted); font: 650 0.63rem/1.45 ui-monospace, monospace; }
.tx-row-story strong { display: block; color: var(--study-ink); }

.tx-layout-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 0.9fr); align-items: center; gap: 0.7rem; }
.tx-layout-stage > div:not(.tx-layout-arrow) { min-width: 0; }
.tx-layout-stage code { display: block; border: 0; background: transparent; padding: 0; color: var(--study-muted); font-size: 0.63rem; text-align: center; }
.tx-layout-arrow { color: var(--study-accent); font: 750 0.64rem/1.4 ui-monospace, monospace; text-align: center; }
.tx-token-row, .tx-head-row { display: grid; gap: 0.35rem; margin-top: 0.6rem; }
.tx-token-row span, .tx-head-row span { overflow: hidden; border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-card); padding: 0.4rem; color: var(--study-muted); font: 650 0.58rem/1.35 ui-monospace, monospace; white-space: nowrap; }
.tx-token-row i, .tx-head-row i { color: #7c3aed; font-style: normal; }
.tx-token-row b, .tx-head-row b { color: #0369a1; }
.tx-head-row span { min-height: 48px; white-space: normal; }
.tx-layout-return { display: grid; grid-template-columns: repeat(4, auto); align-items: center; gap: 0.45rem; margin-top: 1.1rem; border-top: 1px solid var(--study-line); padding-top: 1rem; }
.tx-layout-return > * { border: 1px solid var(--study-line); border-radius: 999px; background: var(--study-card); padding: 0.42rem 0.65rem; color: var(--study-muted); font: 650 0.62rem/1.3 ui-monospace, monospace; text-align: center; }
.tx-layout-return > * + *::before { margin-right: 0.45rem; color: var(--study-accent); content: '→'; }

.tx-clock-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tx-clock-card { display: grid; place-items: center; gap: 0.35rem; color: var(--study-ink); }
.tx-clock-card strong { font: 700 0.72rem/1.2 ui-monospace, monospace; }
.tx-clock-card small { color: var(--study-muted); font: 600 0.63rem/1.2 ui-monospace, monospace; }
.tx-clock { display: grid; position: relative; width: clamp(72px, 10vw, 102px); aspect-ratio: 1; place-items: center; border: 8px solid color-mix(in srgb, var(--study-accent) 20%, var(--study-line)); border-radius: 50%; background: var(--study-card); }
.tx-clock::before { width: 7px; height: 7px; border-radius: 50%; background: var(--study-accent); content: ''; }
.tx-clock span { position: absolute; bottom: 50%; width: 3px; height: 36%; border-radius: 3px; background: var(--study-accent); transform: rotate(40deg); transform-origin: bottom; }
.tx-clock-medium span { height: 39%; transform: rotate(125deg); }
.tx-clock-slow span { height: 42%; transform: rotate(230deg); }
.tx-clock-medium { border-color: color-mix(in srgb, var(--study-warm) 30%, var(--study-line)); }
.tx-clock-medium span { background: var(--study-warm); }
.tx-clock-slow { border-color: color-mix(in srgb, #7c3aed 28%, var(--study-line)); }
.tx-clock-slow span { background: #7c3aed; }
.tx-rope-rule { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem; margin-top: 1.2rem; color: var(--study-muted); font: 650 0.66rem/1.4 ui-monospace, monospace; text-align: center; }
.tx-rope-rule strong { border-radius: 999px; background: var(--study-accent); padding: 0.45rem 0.7rem; color: var(--study-card); }

.tx-glu-variants { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; }
.tx-glu-variants > div { border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: 0.65rem 0.45rem; text-align: center; }
.tx-glu-variants > div.is-active { border-color: var(--study-accent); background: var(--study-accent-soft); }
.tx-glu-variants strong { display: block; margin-bottom: 0.3rem; color: var(--study-ink); font: 750 0.7rem/1.2 ui-monospace, monospace; }
.tx-glu-variants code { display: block; overflow-wrap: anywhere; border: 0; background: transparent; padding: 0; color: var(--study-muted); font-size: 0.55rem; }
.tx-swiglu-flow { display: flex; width: min(430px, 100%); align-items: center; flex-direction: column; margin: 1.25rem auto 0; }
.tx-swiglu-flow > .tx-node { width: min(220px, 70%); }
.tx-fork { width: 66%; color: var(--study-accent); font: 800 1.1rem/1.7 ui-monospace, monospace; text-align: center; }
.tx-fork span { color: var(--study-muted); font-size: 0.6rem; }
.tx-swiglu-branches { display: grid; width: 82%; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.tx-swiglu-branches > div { display: flex; align-items: stretch; flex-direction: column; }

/* GLU activation curves and numeric gating example. */
.tx-gate-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 0.65rem; margin-bottom: 1rem; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: 0.75rem; text-align: center; }
.tx-gate-equation span { color: var(--study-muted); font: 650 0.65rem/1.4 ui-monospace, monospace; }
.tx-gate-equation strong { display: block; color: var(--study-ink); }
.tx-gate-equation > b { color: var(--study-accent); font: 800 0.68rem/1.3 ui-monospace, monospace; }
.tx-curves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.tx-curve-card { border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: 0.8rem; }
.tx-curve-card.is-active { border: 2px solid var(--study-accent); background: color-mix(in srgb, var(--study-accent-soft) 48%, var(--study-card)); }
.tx-curve-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.tx-curve-title strong { color: var(--study-ink); font: 800 0.76rem/1.2 ui-monospace, monospace; }
.tx-curve-title code { border: 0; background: transparent; padding: 0; color: var(--study-muted); font-size: 0.61rem; }
.tx-curve-chart { position: relative; height: 145px; margin-top: 0.45rem; background-image: linear-gradient(rgba(127,127,127,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(127,127,127,.08) 1px, transparent 1px); background-size: 25% 25%; }
.tx-axis-x, .tx-axis-y { position: absolute; background: var(--study-muted); opacity: 0.65; }
.tx-axis-x { top: 70%; right: 0; left: 0; height: 1px; }
.tx-axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.tx-axis-x::after { position: absolute; right: -1px; top: -4px; border-width: 4px 0 4px 6px; border-style: solid; border-color: transparent transparent transparent var(--study-muted); content: ''; }
.tx-axis-y::after { position: absolute; top: -1px; left: -4px; border-width: 0 4px 6px; border-style: solid; border-color: transparent transparent var(--study-muted); content: ''; }
.tx-curve-line { position: absolute; inset: 6px 5px; background: var(--study-accent); }
.tx-curve-sigmoid { clip-path: polygon(0 74%, 14% 71%, 28% 66%, 42% 57%, 50% 48%, 58% 38%, 72% 28%, 86% 22%, 100% 19%, 100% 23%, 86% 26%, 72% 32%, 58% 42%, 50% 52%, 42% 61%, 28% 70%, 14% 75%, 0 78%); }
.tx-curve-relu { clip-path: polygon(0 70%, 50% 70%, 100% 8%, 100% 13%, 52% 73%, 0 73%); }
.tx-curve-gelu { clip-path: polygon(0 70%, 15% 72%, 30% 76%, 42% 75%, 50% 70%, 62% 52%, 76% 32%, 100% 7%, 100% 12%, 76% 37%, 62% 57%, 50% 74%, 42% 79%, 30% 80%, 15% 76%, 0 74%); }
.tx-curve-silu { clip-path: polygon(0 70%, 15% 73%, 30% 78%, 42% 78%, 50% 70%, 62% 54%, 76% 35%, 100% 10%, 100% 15%, 76% 40%, 62% 59%, 50% 74%, 42% 82%, 30% 82%, 15% 77%, 0 74%); }
.tx-origin, .tx-x-negative, .tx-x-positive { position: absolute; color: var(--study-muted); font: 650 0.55rem/1 ui-monospace, monospace; font-style: normal; }
.tx-origin { top: calc(70% + 5px); left: calc(50% + 5px); }
.tx-x-negative { top: calc(70% + 5px); left: 2px; }
.tx-x-positive { top: calc(70% + 5px); right: 2px; }
.tx-curve-values { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; }
.tx-curve-values span { color: var(--study-muted); font: 650 0.58rem/1.3 ui-monospace, monospace; }
.tx-curve-values b { color: var(--study-accent); }
.tx-curve-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.tx-curve-legend span { border-left: 2px solid var(--study-line); padding-left: 0.5rem; color: var(--study-muted); font: 620 0.61rem/1.45 ui-monospace, monospace; }
.tx-curve-legend b { color: var(--study-ink); }
.tx-swiglu-example { margin-top: 1.2rem; border-top: 1px solid var(--study-line); padding-top: 1rem; }
.tx-swiglu-numeric { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0.65rem; }
.tx-swiglu-numeric > div { display: grid; place-items: center; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: 0.7rem; text-align: center; }
.tx-swiglu-numeric > b { align-self: center; color: var(--study-accent); font-size: 1.25rem; }
.tx-swiglu-numeric small, .tx-swiglu-numeric span { color: var(--study-muted); font: 650 0.58rem/1.35 ui-monospace, monospace; }
.tx-swiglu-numeric strong { color: var(--study-ink); font: 800 1rem/1.4 ui-monospace, monospace; }
.tx-swiglu-numeric .tx-numeric-result { border-color: var(--study-accent); background: var(--study-accent-soft); }
.tx-swiglu-numeric .tx-numeric-result strong { color: var(--study-accent); }
.tx-swiglu-example > p { margin: 0.7rem 0 0; color: var(--study-muted); font-size: 0.76rem; text-align: center; }

/* Expanded multi-head walkthrough: vertical so every tensor operation stays legible. */
.tx-layout-tall { padding: clamp(1.15rem, 3.5vw, 2rem); }
.tx-layout-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 1.1rem; }
.tx-layout-legend span { border: 1px solid var(--study-line); border-radius: 999px; background: var(--study-card); padding: 0.35rem 0.65rem; color: var(--study-muted); font: 700 0.63rem/1.25 ui-monospace, monospace; }
.tx-head0 { color: #7c3aed !important; }
.tx-head1 { color: #0369a1 !important; }
[data-theme="dark"] .tx-head0 { color: #c4b5fd !important; }
[data-theme="dark"] .tx-head1 { color: #7dd3fc !important; }
.tx-layout-step { display: grid; grid-template-columns: 38px minmax(190px, .8fr) minmax(320px, 1.35fr); align-items: center; gap: 1rem; border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb, var(--study-card) 92%, transparent); padding: 1rem; }
.tx-step-index { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--study-accent); color: var(--study-card); font: 850 0.8rem/1 ui-monospace, monospace; }
.tx-step-copy h4 { margin: 0 0 .4rem; color: var(--study-ink); font: 800 0.7rem/1.4 ui-monospace, monospace; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.tx-step-copy code { display: inline-block; border: 0; background: var(--study-accent-soft); padding: .25rem .4rem; color: var(--study-accent); font-size: .66rem; }
.tx-step-copy p { margin: .55rem 0 0; color: var(--study-muted); font-size: .7rem; line-height: 1.5; }
.tx-layout-down { display: grid; justify-items: center; gap: .22rem; padding: .75rem 0; color: var(--study-accent); text-align: center; }
.tx-layout-down code { border: 1px solid color-mix(in srgb, var(--study-accent) 40%, var(--study-line)); border-radius: 999px; background: var(--study-card); padding: .35rem .65rem; color: var(--study-accent); font-size: .66rem; }
.tx-layout-down span { color: var(--study-muted); font: 650 .6rem/1.4 ui-monospace, monospace; }
.tx-layout-vectors { display: grid; gap: .38rem; }
.tx-layout-vector { display: grid; grid-template-columns: 38px repeat(4, 1fr); overflow: hidden; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); }
.tx-layout-vector > * { display: grid; min-height: 34px; place-items: center; border-right: 1px solid var(--study-line); font: 750 .68rem/1 ui-monospace, monospace; }
.tx-layout-vector > *:last-child { border-right: 0; }
.tx-layout-vector strong { background: var(--study-panel); color: var(--study-muted); }
.tx-layout-vector span { background: color-mix(in srgb, currentColor 6%, var(--study-card)); }
.tx-split-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.tx-split-token { display: grid; overflow: hidden; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); }
.tx-split-token > * { padding: .48rem; border-bottom: 1px solid var(--study-line); font: 720 .63rem/1.3 ui-monospace, monospace; text-align: center; }
.tx-split-token > *:last-child { border-bottom: 0; }
.tx-split-token strong { color: var(--study-muted); }
.tx-layout-attend { grid-template-columns: 38px minmax(180px, .64fr) minmax(430px, 1.7fr); }
.tx-head-lanes { display: grid; gap: .7rem; }
.tx-head-lane { border-left: 4px solid currentColor; border-radius: 9px; background: var(--study-card); padding: .75rem; }
.tx-head-lane h5 { margin: 0 0 .55rem; color: currentColor; font: 800 .68rem/1.2 ui-monospace, monospace; text-transform: uppercase; }
.tx-head-lane > div { display: grid; grid-template-columns: minmax(112px, .8fr) auto minmax(155px, 1fr); align-items: center; gap: .65rem; }
.tx-head-lane > div > b { color: var(--study-muted); font: 750 .61rem/1.4 ui-monospace, monospace; text-align: center; }
.tx-head-lane > small { display: block; margin-top: .45rem; color: var(--study-muted); font: 630 .59rem/1.4 ui-monospace, monospace; text-align: center; }
.tx-head-lane .tx-number-grid span { min-width: 25px; height: 24px; }
.tx-implementation-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; margin-top: 1rem; }
.tx-implementation-pair > div { border-top: 3px solid var(--study-accent); border-radius: 8px; background: var(--study-card); padding: .75rem; text-align: center; }
.tx-implementation-pair strong, .tx-implementation-pair span { display: block; }
.tx-implementation-pair strong { color: var(--study-ink); font: 800 .68rem/1.3 ui-monospace, monospace; }
.tx-implementation-pair code { display: block; margin: .4rem 0; border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .61rem; }
.tx-implementation-pair span { color: var(--study-muted); font-size: .65rem; }
.tx-layout-final { display: grid; min-height: 96px; place-items: center; align-content: center; gap: .25rem; border: 2px solid var(--study-accent); border-radius: 10px; background: var(--study-accent-soft); text-align: center; }
.tx-layout-final strong { color: var(--study-accent); font: 850 .9rem/1.25 ui-monospace, monospace; }
.tx-layout-final span { color: var(--study-ink); font: 800 .72rem/1.3 ui-monospace, monospace; }
.tx-layout-final small { color: var(--study-muted); font-size: .62rem; }

/* RoPE worked example: directions and relative angle are visible, not implied. */
.tx-rope-givens { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1rem; }
.tx-rope-givens > * { border: 1px solid var(--study-line); border-radius: 999px; background: var(--study-card); padding: .34rem .62rem; color: var(--study-muted); font: 700 .62rem/1.3 ui-monospace, monospace; }
.tx-rope-givens strong { border-color: var(--study-accent); color: var(--study-accent); }
.tx-rope-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .7rem; }
.tx-rope-card { display: grid; place-items: center; gap: .42rem; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-card); padding: .8rem; text-align: center; }
.tx-rope-card > strong { color: var(--study-ink); font: 800 .67rem/1.3 ui-monospace, monospace; text-transform: uppercase; }
.tx-rope-card > code { border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .72rem; }
.tx-rope-card > small { color: var(--study-muted); font: 650 .59rem/1.3 ui-monospace, monospace; }
.tx-rope-op { color: var(--study-accent); font: 800 .66rem/1.45 ui-monospace, monospace; text-align: center; }
.tx-rope-plane { position: relative; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle, var(--study-panel) 0 4px, transparent 5px), var(--study-card); }
.tx-plane-x, .tx-plane-y { position: absolute; background: var(--study-line); }
.tx-plane-x { top: 50%; right: 6px; left: 6px; height: 1px; }
.tx-plane-y { top: 6px; bottom: 6px; left: 50%; width: 1px; }
.tx-plane-x::after, .tx-plane-y::after { position: absolute; border-style: solid; content: ''; }
.tx-plane-x::after { right: -1px; top: -4px; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--study-muted); }
.tx-plane-y::after { top: -1px; left: -4px; border-width: 0 4px 6px; border-color: transparent transparent var(--study-muted); }
.tx-rope-arrow { position: absolute; bottom: 50%; left: calc(50% - 2px); width: 4px; height: 43%; border-radius: 4px; background: var(--study-accent); transform-origin: 50% 100%; }
.tx-rope-arrow::after { position: absolute; top: -2px; left: -4px; border-width: 0 6px 9px; border-style: solid; border-color: transparent transparent var(--study-accent); content: ''; }
.tx-angle-0 { transform: rotate(90deg); }
.tx-angle-90 { transform: rotate(0deg); }
.tx-angle-270 { transform: rotate(180deg); }
.tx-rope-result { display: grid; grid-template-columns: .8fr 1.25fr 1fr; align-items: center; gap: .55rem; margin-top: .8rem; border-radius: 10px; background: var(--study-accent-soft); padding: .75rem; text-align: center; }
.tx-rope-result span { color: var(--study-muted); font: 680 .63rem/1.4 ui-monospace, monospace; }
.tx-rope-result strong { color: var(--study-accent); font: 850 .78rem/1.3 ui-monospace, monospace; }
.tx-rope-identity { margin-top: .75rem; border: 1px dashed var(--study-accent); border-radius: 10px; padding: .75rem; text-align: center; }
.tx-rope-identity code { border: 0; background: transparent; color: var(--study-ink); font-size: .78rem; }
.tx-rope-identity p { margin: .35rem 0 0; color: var(--study-muted); font-size: .7rem; }
.tx-rope-many { margin-top: .9rem; border-top: 1px solid var(--study-line); padding-top: .9rem; }
.tx-rope-many h4 { margin: 0 0 .7rem; color: var(--study-ink); font: 800 .68rem/1.3 ui-monospace, monospace; text-align: center; text-transform: uppercase; }
.tx-rope-many > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.tx-rope-many > div > span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .25rem .5rem; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: .55rem; }
.tx-rope-many b, .tx-rope-many small { font: 680 .61rem/1.3 ui-monospace, monospace; }
.tx-rope-many b { color: var(--study-ink); }
.tx-rope-many small { grid-column: 1 / -1; color: var(--study-muted); }
.tx-rope-many i { display: block; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--study-accent) 0 5px, transparent 5px 8px); }
.tx-rope-many .tx-frequency-mid { background-size: 16px 4px; opacity: .72; }
.tx-rope-many .tx-frequency-slow { background-size: 28px 4px; opacity: .5; }
.tx-rope-many > p { margin: .65rem 0 0; color: var(--study-muted); font-size: .7rem; text-align: center; }

/* Worked normalization arithmetic: one matrix, two normalization axes. */
.tx-norm-examples { padding: clamp(1.2rem, 3.5vw, 2rem); }
.tx-norm-intro { max-width: 690px; margin: -.25rem auto 1rem; color: var(--study-muted); font: 650 .7rem/1.55 ui-monospace, monospace; text-align: center; }
.tx-norm-axis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: stretch; }
.tx-norm-axis-card { border: 1px solid var(--study-line); border-radius: 14px; background: var(--study-card); padding: clamp(.8rem, 2.3vw, 1.15rem); overflow: hidden; }
.tx-norm-axis-card header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .2rem .7rem; margin: -.1rem 0 .8rem; border-bottom: 1px solid var(--study-line); padding-bottom: .65rem; }
.tx-norm-axis-card header span { color: var(--study-warm); font: 850 .58rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.tx-norm-axis-card header h4 { grid-column: 1; margin: 0; color: var(--study-ink); font: 900 .9rem/1.2 ui-monospace, monospace; }
.tx-norm-axis-card header code { grid-column: 2; grid-row: 1 / 3; border: 0; background: var(--study-accent-soft); padding: .38rem .48rem; color: var(--study-accent); font-size: .56rem; text-align: center; }
.tx-norm-matrix-wrap { margin: .65rem 0; }
.tx-norm-matrix-wrap > small { display: block; margin-bottom: .3rem; color: var(--study-muted); font: 720 .57rem/1.25 ui-monospace, monospace; text-transform: uppercase; }
.tx-norm-matrix { display: grid; grid-template-columns: minmax(42px, .8fr) repeat(3, 1fr); gap: 4px; }
.tx-norm-matrix > b { align-self: end; padding: .15rem .05rem; color: var(--study-muted); font: 680 .49rem/1.15 ui-monospace, monospace; text-align: center; }
.tx-norm-matrix .tx-norm-row-label { display: grid; min-height: 36px; place-items: center end; padding-right: .3rem; text-transform: none; }
.tx-norm-cell { display: grid; min-height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--study-line) 82%, transparent); border-radius: 6px; color: var(--study-ink); font: 800 .67rem/1 ui-monospace, monospace; font-style: normal; }
.tx-norm-column-0 { background: color-mix(in srgb, #8b5cf6 17%, var(--study-card)); }
.tx-norm-column-1 { background: color-mix(in srgb, #0ea5e9 16%, var(--study-card)); }
.tx-norm-column-2 { background: color-mix(in srgb, #14b8a6 17%, var(--study-card)); }
.tx-norm-row-0 { background: color-mix(in srgb, #f59e0b 18%, var(--study-card)); }
.tx-norm-row-1 { background: color-mix(in srgb, #ec4899 15%, var(--study-card)); }
.tx-norm-matrix-wrap.is-output { border: 1px solid color-mix(in srgb, var(--study-accent) 35%, var(--study-line)); border-radius: 10px; background: var(--study-accent-soft); padding: .55rem; }
.tx-norm-stats { display: flex; min-height: 48px; align-items: stretch; justify-content: center; gap: .35rem; margin: .55rem 0; }
.tx-norm-stats span { display: grid; flex: 1; place-items: center; border-top: 3px solid var(--study-accent); border-radius: 5px; background: var(--study-panel); padding: .32rem .18rem; color: var(--study-muted); font: 650 .5rem/1.3 ui-monospace, monospace; text-align: center; }
.tx-norm-stats b { color: var(--study-ink); }
.tx-norm-axis-card.is-layer .tx-norm-stats span:first-child { border-top-color: #f59e0b; }
.tx-norm-axis-card.is-layer .tx-norm-stats span:last-child { border-top-color: #ec4899; }
.tx-norm-equation { border-left: 3px solid var(--study-accent); border-radius: 6px; background: var(--study-accent-soft); padding: .52rem .6rem; color: var(--study-ink); font: 780 .63rem/1.35 ui-monospace, monospace; text-align: center; }
.tx-norm-arrow { display: block; padding: .45rem 0 .15rem; color: var(--study-accent); font: 780 .55rem/1.3 ui-monospace, monospace; text-align: center; }
.tx-norm-axis-card > p { margin: .45rem 0 0; color: var(--study-muted); font: 650 .58rem/1.45 ui-monospace, monospace; }
.tx-norm-mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: .85rem; }
.tx-norm-mini-grid section { border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .85rem; }
.tx-norm-mini-grid h4 { min-height: 32px; margin: 0 0 .5rem; color: var(--study-ink); font: 800 .64rem/1.35 ui-monospace, monospace; text-transform: uppercase; }
.tx-norm-mini-grid code { display: inline-block; margin-bottom: .35rem; border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .57rem; }
.tx-norm-mini-grid p { min-height: 35px; margin: .35rem 0; color: var(--study-muted); font: 650 .56rem/1.45 ui-monospace, monospace; }
.tx-norm-mini-grid p b { color: var(--study-ink); }
.tx-norm-mini-grid > section > strong { display: block; border-left: 3px solid var(--study-accent); background: var(--study-accent-soft); padding: .42rem; color: var(--study-accent); font: 800 .59rem/1.4 ui-monospace, monospace; }
.tx-norm-mini-grid small { display: block; margin-top: .4rem; color: var(--study-muted); font-size: .55rem; }
.tx-norm-formula { min-height: 62px; margin-bottom: .5rem; border-left: 3px solid var(--study-accent); border-radius: 6px; background: var(--study-accent-soft); padding: .5rem .55rem; color: var(--study-ink); font: 740 .55rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }

/* SwiGLU's actual two-branch computation before the activation comparisons. */
.tx-swiglu-process { display: flex; align-items: center; flex-direction: column; margin-bottom: 1rem; border: 1px solid var(--study-line); border-radius: 12px; background: color-mix(in srgb, var(--study-card) 90%, transparent); padding: 1rem; }
.tx-process-input, .tx-process-hidden, .tx-process-output { display: grid; min-width: 165px; place-items: center; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: .55rem .75rem; text-align: center; }
.tx-process-input strong, .tx-process-hidden strong, .tx-process-output strong { color: var(--study-ink); font: 800 .75rem/1.3 ui-monospace, monospace; }
.tx-process-input span, .tx-process-hidden span, .tx-process-output span { color: var(--study-muted); font: 620 .59rem/1.3 ui-monospace, monospace; }
.tx-process-fork, .tx-process-merge, .tx-process-down { padding: .5rem 0; color: var(--study-accent); font: 760 .62rem/1.35 ui-monospace, monospace; text-align: center; }
.tx-process-paths { display: grid; width: min(620px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tx-process-paths > div { display: grid; place-items: center; gap: .25rem; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .75rem; text-align: center; }
.tx-process-paths small { color: var(--study-muted); font: 680 .58rem/1.3 ui-monospace, monospace; text-transform: uppercase; }
.tx-process-paths strong { color: var(--study-ink); font: 850 .76rem/1.3 ui-monospace, monospace; }
.tx-process-paths span, .tx-process-paths em { color: var(--study-muted); font: 680 .65rem/1.35 ui-monospace, monospace; font-style: normal; }
.tx-process-paths b { color: var(--study-accent); font: 750 .62rem/1.3 ui-monospace, monospace; }
.tx-process-gate { border-color: var(--study-accent) !important; }
.tx-process-up { border-color: #0369a1 !important; }
.tx-process-hidden { border-color: var(--study-accent); background: var(--study-accent-soft); }
.tx-process-hidden strong { color: var(--study-accent); }
.tx-process-output { border-color: var(--study-ink); background: var(--study-ink); }
.tx-process-output strong, .tx-process-output span { color: var(--study-card); }

/* Syntax-highlighted study code: pale in light mode, near-black only in dark mode. */
.study-article pre.code-block { position: relative; border-color: #d8e1ec; background: #f4f7fb; padding-top: 2.35rem; color: #24324a; box-shadow: inset 0 1px rgba(255,255,255,.75); }
.study-article pre.code-block::before { position: absolute; top: 0.62rem; left: 1rem; color: #7b8798; content: attr(data-language); font: 800 0.58rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.study-article pre.code-block::after { position: absolute; top: 0.67rem; right: 1rem; width: 7px; height: 7px; border-radius: 50%; background: #c8d2df; box-shadow: -13px 0 #c8d2df, -26px 0 #c8d2df; content: ''; }
.study-article pre.code-block code { color: #24324a; }
.py-comment { color: #64748b; font-style: italic; }
.py-keyword { color: #7c3aed; font-weight: 700; }
.py-string { color: #18794e; }
.py-number { color: #b45309; }
.py-builtin { color: #0369a1; }
.py-function, .py-call { color: #1d4ed8; }
.py-class { color: #a16207; font-weight: 700; }
.py-operator { color: #0f766e; }
[data-theme="dark"] .study-article pre.code-block { border-color: #26334a; background: #0f172a; color: #d8e1ef; box-shadow: inset 0 1px rgba(255,255,255,.035); }
[data-theme="dark"] .study-article pre.code-block::before { color: #64748b; }
[data-theme="dark"] .study-article pre.code-block::after { background: #334155; box-shadow: -13px 0 #334155, -26px 0 #334155; }
[data-theme="dark"] .study-article pre.code-block code { color: #d8e1ef; }
[data-theme="dark"] .py-comment { color: #7d94ad; }
[data-theme="dark"] .py-keyword { color: #c792ea; }
[data-theme="dark"] .py-string { color: #a8d78f; }
[data-theme="dark"] .py-number { color: #f6bd75; }
[data-theme="dark"] .py-builtin { color: #82d2f5; }
[data-theme="dark"] .py-function, [data-theme="dark"] .py-call { color: #82aaff; }
[data-theme="dark"] .py-class { color: #ffd580; }
[data-theme="dark"] .py-operator { color: #89ddff; }

/* Scaling-law IsoFLOP artifact */
.scaling-laws-topic .study-layout { grid-template-columns: minmax(165px,195px) minmax(0,900px); gap: clamp(2rem,5vw,4rem); }
.scaling-visual { margin: 1.5rem 0 2rem; border: 1px solid color-mix(in srgb,var(--study-accent) 45%,var(--study-line)); border-radius: 17px; background: linear-gradient(155deg,var(--study-card),color-mix(in srgb,var(--study-accent-soft) 52%,var(--study-card))); padding: clamp(1rem,3vw,1.5rem); box-shadow: 0 20px 48px rgba(24,34,45,.07); }
.scaling-visual figcaption { margin-bottom: 1.1rem; color: var(--study-accent); font: 800 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .11em; text-transform: uppercase; }
.scaling-visual h4 { margin: 0 0 .35rem; color: var(--study-ink); font: 800 .76rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; }
.scaling-visual p { margin: .35rem 0 0; color: var(--study-muted); font-size: .63rem; }
.scale-stage { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .7rem; align-items: center; border: 1px solid var(--study-line); border-left: 4px solid var(--study-accent); border-radius: 12px; background: var(--study-card); padding: .9rem; }
.scale-stage.scale-budget, .scale-stage.scale-target { border-left-color: var(--study-warm); }
.scale-step { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: var(--study-accent); color: #fff; font: 850 .62rem/1 ui-monospace,monospace; }
.scale-stage code { display: inline-block; margin-top: .35rem; border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-panel); padding: .3rem .48rem; color: var(--study-ink); font-size: .57rem; }
.scale-arrow { padding: .35rem 0; color: var(--study-accent); font: 800 .58rem/1.3 ui-monospace,monospace; text-align: center; }
.scale-budget-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .4rem; }
.scale-budget-row i { border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-panel); padding: .45rem; color: var(--study-ink); font: 750 .58rem/1.2 ui-monospace,monospace; font-style: normal; text-align: center; }
.scale-budget-row b { color: var(--study-warm); }
.scale-profile { border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb,var(--study-card) 94%,transparent); padding: .9rem; }
.scale-profile header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .65rem; border-bottom: 1px solid var(--study-line); padding-bottom: .45rem; }
.scale-profile header span { color: var(--study-accent); font: 800 .61rem/1.3 ui-monospace,monospace; letter-spacing: .08em; }
.scale-profile header strong { color: var(--study-ink); font: 750 .61rem/1.3 ui-monospace,monospace; }
.scale-candidates { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; align-items: stretch; }
.scale-candidate { display: flex; align-items: center; flex-direction: column; justify-content: center; min-height: 105px; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-panel); padding: .55rem; opacity: .72; text-align: center; }
.scale-candidate.is-best { border: 2px solid var(--study-accent); background: var(--study-accent-soft); opacity: 1; box-shadow: 0 7px 20px color-mix(in srgb,var(--study-accent) 13%,transparent); }
.scale-candidate small { color: var(--study-muted); font: 650 .5rem/1.2 ui-monospace,monospace; text-transform: uppercase; }
.scale-candidate b { margin: .3rem 0 .2rem; color: var(--study-ink); font: 800 .67rem/1.2 ui-monospace,monospace; }
.scale-candidate code { border: 0; background: transparent; padding: 0; color: var(--study-accent); font-size: .59rem; }
.scale-candidate i { margin-top: .35rem; color: var(--study-muted); font: 650 .49rem/1.2 ui-monospace,monospace; font-style: normal; }
.scale-candidate.is-best i { border-radius: 999px; background: var(--study-accent); padding: .15rem .38rem; color: #fff; }
.scale-profile > p { text-align: center; }
.scale-profile > p code { border: 0; background: transparent; padding: 0; color: var(--study-accent); }
.scale-optima, .scale-target-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem; margin: .45rem 0; }
.scale-optima code, .scale-target-flow code, .scale-target-flow strong { border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-panel); padding: .38rem .5rem; color: var(--study-ink); font: 700 .56rem/1.3 ui-monospace,monospace; }
.scale-optima b, .scale-target-flow b { color: var(--study-warm); }
.scale-fit-equations { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: .55rem auto; max-width: 420px; }
.scale-fit-equations span { border-top: 2px solid var(--study-accent); padding-top: .35rem; color: var(--study-accent); font: 800 .62rem/1.3 ui-monospace,monospace; text-align: center; }
.scale-fit small { display: block; color: var(--study-muted); font-size: .54rem; text-align: center; }
.scale-target-flow strong { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); }

/* Optimizations study artifacts */
.optimizations-topic .study-layout { grid-template-columns: minmax(165px, 195px) minmax(0, 900px); gap: clamp(2rem, 5vw, 4rem); }
.opt-visual { margin: 1.45rem 0 2rem; border: 1px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line)); border-radius: 16px; background: linear-gradient(145deg, var(--study-card), color-mix(in srgb, var(--study-accent-soft) 48%, var(--study-card))); padding: clamp(.9rem, 2.5vw, 1.35rem); box-shadow: 0 18px 45px rgba(24,34,45,.06); }
.opt-visual figcaption { margin-bottom: 1rem; color: var(--study-accent); font: 800 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.opt-visual h4 { margin: 0 0 .65rem; color: var(--study-ink); font: 800 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.opt-visual code { border: 0; background: transparent; padding: 0; color: var(--study-ink); font-size: .62rem; }
.opt-visual small { color: var(--study-muted); font: 650 .55rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.opt-flow { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; }
.opt-flow b, .opt-down { color: var(--study-accent); font: 850 .74rem/1 ui-monospace, monospace; }
.opt-note { margin: .8rem 0 0; color: var(--study-muted); font-size: .72rem; text-align: center; }
.opt-token-row { display: flex; justify-content: center; gap: .3rem; }
.opt-token-row i { border: 1px solid color-mix(in srgb, var(--study-accent) 55%, var(--study-line)); border-radius: 6px; background: var(--study-accent-soft); padding: .32rem .42rem; color: var(--study-ink); font: 750 .6rem/1 ui-monospace, monospace; font-style: normal; }
.opt-matrix { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .35rem; width: min(290px, 100%); border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .55rem; color: var(--study-ink); font: 700 .59rem/1.4 ui-monospace, monospace; }
.opt-matrix strong { grid-column: 1 / -1; color: var(--study-accent); font-size: .64rem; text-align: center; }
.opt-matrix em { color: var(--study-warm); font-style: normal; }

.opt-collective-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.opt-collective-grid section { border: 1px solid var(--study-line); border-radius: 10px; background: color-mix(in srgb, var(--study-card) 94%, transparent); padding: .72rem; text-align: center; }
.opt-collective-grid section:nth-child(4n+2) { border-top-color: var(--study-warm); }
.opt-collective-grid section:nth-child(4n+3) { border-top-color: #2563eb; }
.opt-collective-grid h4 { margin-bottom: .35rem; }
.opt-collective-wide { grid-column: 1 / -1; }
.opt-a2a { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .7rem; }
.opt-a2a code { border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-panel); padding: .4rem; line-height: 1.5; }
.opt-a2a b { color: var(--study-accent); font: 750 .62rem/1.4 ui-monospace, monospace; }
.opt-rs-flow { display: grid; grid-template-columns: 1.2fr auto .8fr auto 1.2fr; align-items: center; gap: .55rem; }
.opt-rs-flow code { border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-panel); padding: .45rem; line-height: 1.45; }
.opt-rs-flow code.is-sum { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); font-weight: 800; }
.opt-rs-flow b { color: var(--study-warm); font: 760 .58rem/1.35 ui-monospace, monospace; text-align: center; }
.opt-collective-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: -1rem 0 2rem; }
.opt-collective-details section { border: 1px solid var(--study-line); border-left: 3px solid var(--study-accent); border-radius: 10px; background: var(--study-card); padding: .8rem; }
.opt-collective-details section:nth-child(even) { border-left-color: var(--study-warm); }
.opt-collective-details h4 { margin: 0 0 .45rem; color: var(--study-ink); font: 820 .68rem/1.3 ui-monospace, monospace; }
.opt-collective-details ul { margin: 0; padding-left: 1.05rem; }
.opt-collective-details li { margin: .28rem 0; color: var(--study-muted); font-size: .66rem; }
.opt-collective-details li b { display: inline-block; min-width: 75px; color: var(--study-accent); font: 780 .58rem/1.35 ui-monospace, monospace; }
.opt-collective-details li span { line-height: 1.45; }

.opt-phase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.opt-phase { display: flex; align-items: center; flex-direction: column; border: 1px solid var(--study-line); border-radius: 12px; background: color-mix(in srgb, var(--study-card) 94%, transparent); padding: .9rem; text-align: center; }
.opt-prefill { border-top: 3px solid #2563eb; }
.opt-decode { border-top: 3px solid var(--study-warm); }
.opt-phase > header { width: 100%; margin-bottom: .75rem; border-bottom: 1px solid var(--study-line); padding-bottom: .55rem; }
.opt-phase > header h4 { margin-bottom: .22rem; }
.opt-phase > header span { color: var(--study-accent); font: 720 .56rem/1.3 ui-monospace, monospace; }
.opt-phase .opt-down { margin: .5rem 0; }
.opt-cache-box { border: 1px dashed var(--study-accent); border-radius: 7px; background: var(--study-accent-soft); padding: .38rem .65rem; color: var(--study-ink); font: 700 .59rem/1.3 ui-monospace, monospace; }
.opt-phase p { margin: .6rem 0 .25rem; color: var(--study-muted); font-size: .66rem; }
.opt-phase > span { color: var(--study-accent); font: 750 .57rem/1.35 ui-monospace, monospace; }
.opt-phase-equation { display: grid; width: 100%; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .45rem; margin-top: .7rem; }
.opt-phase-equation > b, .opt-kv-stage-arrow, .opt-kv-stage-plus { color: var(--study-warm); font: 780 .57rem/1.35 ui-monospace, monospace; text-align: center; }
.opt-phase-cache-pair { display: grid; width: 100%; grid-template-columns: 1fr 1fr; gap: .5rem; }
.opt-score-matrix { border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-panel); padding: .5rem; }
.opt-score-matrix strong { display: block; margin-bottom: .35rem; color: var(--study-ink); font: 780 .59rem/1.25 ui-monospace, monospace; }
.opt-score-matrix > span { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.opt-score-matrix i { display: grid; min-height: 26px; place-items: center; border-radius: 4px; background: var(--study-accent-soft); color: var(--study-accent); font: 800 .58rem/1 ui-monospace, monospace; font-style: normal; }
.opt-score-matrix i:nth-child(2), .opt-score-matrix i:nth-child(3), .opt-score-matrix i:nth-child(6) { background: color-mix(in srgb, #ef4444 9%, var(--study-card)); color: var(--study-muted); }
.opt-score-matrix small { display: block; margin-top: .35rem; }
.opt-append-source { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .65rem 0; }
.opt-append-source code { border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-panel); padding: .35rem .48rem; }
.opt-append-source b { color: var(--study-warm); font: 760 .56rem/1.3 ui-monospace, monospace; }
.opt-decode-equation { display: grid; width: 100%; grid-template-columns: .75fr auto 1.25fr; align-items: center; gap: .4rem; margin-top: .7rem; border-radius: 9px; background: var(--study-panel); padding: .55rem; }
.opt-decode-equation > code { border-radius: 6px; background: var(--study-card); padding: .4rem; }
.opt-decode-equation > b { color: var(--study-warm); font: 760 .55rem/1.3 ui-monospace, monospace; }
.opt-metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .75rem; }
.opt-metric-strip span { border-top: 2px solid var(--study-accent); padding-top: .42rem; color: var(--study-muted); font-size: .56rem; text-align: center; }
.opt-metric-strip b { display: block; color: var(--study-ink); font: 800 .59rem/1.35 ui-monospace, monospace; }

.opt-memory-matrix { border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: .5rem; }
.opt-memory-matrix > strong { display: block; color: var(--study-ink); font: 800 .59rem/1.3 ui-monospace, monospace; }
.opt-memory-matrix > small { display: block; margin: .12rem 0 .38rem; }
.opt-memory-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: .25rem; margin-top: 3px; }
.opt-memory-row > b { color: var(--study-muted); font: 760 .55rem/1 ui-monospace, monospace; }
.opt-memory-row > span { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border: 1px solid var(--study-line); border-radius: 4px; background: var(--study-panel); padding: 3px; }
.opt-memory-row i { display: block; min-height: 18px; border-radius: 2px; background: color-mix(in srgb, var(--study-line) 45%, var(--study-card)); }
.opt-memory-row.is-cached > span { border-color: color-mix(in srgb, var(--study-accent) 58%, var(--study-line)); background: color-mix(in srgb, var(--study-accent-soft) 72%, var(--study-card)); }
.opt-memory-row.is-cached i { background: color-mix(in srgb, var(--study-accent) 23%, var(--study-card)); }
.opt-memory-row.is-new > span { border-color: var(--study-warm); background: color-mix(in srgb, var(--study-warm) 13%, var(--study-card)); }
.opt-memory-row.is-new i { background: color-mix(in srgb, var(--study-warm) 24%, var(--study-card)); }
.opt-memory-row.is-new > b { color: var(--study-warm); }
.opt-score-row strong { display: block; margin-bottom: .28rem; color: var(--study-ink); font: 780 .57rem/1.3 ui-monospace, monospace; }
.opt-score-row > span, .opt-attn-weights > span { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.opt-score-row i, .opt-attn-weights i { display: grid; min-height: 28px; place-items: center; border-radius: 4px; font: 780 .54rem/1 ui-monospace, monospace; font-style: normal; }
.opt-score-row i.is-cached, .opt-attn-weights i.is-cached { background: var(--study-accent-soft); color: var(--study-accent); }
.opt-score-row i.is-new, .opt-attn-weights i.is-new { background: color-mix(in srgb, var(--study-warm) 16%, var(--study-card)); color: var(--study-warm); }

.opt-parallel-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.opt-parallel-card { min-width: 0; border: 1px solid var(--study-line); border-left: 4px solid var(--study-accent); border-radius: 12px; background: var(--study-card); padding: 1rem; }
.opt-parallel-card:nth-child(even) { border-left-color: var(--study-warm); }
.opt-parallel-card header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .7rem; text-align: left; }
.opt-parallel-card header h4 { margin: 0; font-size: .82rem; }
.opt-parallel-card header span { color: var(--study-accent); font: 750 .58rem/1.35 ui-monospace, monospace; text-align: right; }
.opt-parallel-card:nth-child(even) header span { color: var(--study-warm); }
.opt-terminal-diagram { max-width: 100%; overflow-x: auto; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-code-bg); box-shadow: inset 0 1px rgba(255,255,255,.75); scrollbar-color: #aab6c5 #e8edf4; transition: background .2s, border-color .2s, box-shadow .2s; }
.opt-terminal-diagram pre { width: max-content; min-width: 100%; margin: 0; padding: .9rem 1rem; background: transparent; color: var(--study-code-ink); font: 600 .57rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; tab-size: 2; }
.opt-terminal-diagram code { display: block; min-width: 760px; border: 0; background: transparent; padding: 0; color: inherit; font: inherit; white-space: pre; }
.study-article .opt-terminal-diagram pre.code-block { margin: 0; border: 0; border-radius: 0; background: transparent; padding: .9rem 1rem; color: var(--study-code-ink); box-shadow: none; }
.study-article .opt-terminal-diagram pre.code-block::before, .study-article .opt-terminal-diagram pre.code-block::after { display: none; content: none; }
.study-article .opt-terminal-diagram pre.code-block code { color: inherit; font: inherit; }
.optimizations-topic[data-theme="dark"] .opt-terminal-diagram, [data-theme="dark"] .optimizations-topic .opt-terminal-diagram { border-color: #2e353c; background: #151719; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); scrollbar-color: #59636d #202428; }
.optimizations-topic[data-theme="dark"] .opt-terminal-diagram pre, [data-theme="dark"] .optimizations-topic .opt-terminal-diagram pre, .optimizations-topic[data-theme="dark"] .study-article .opt-terminal-diagram pre.code-block, [data-theme="dark"] .optimizations-topic .study-article .opt-terminal-diagram pre.code-block { color: #f4f4f1; }
.opt-parallel-card.is-fsdp .opt-terminal-diagram code { min-width: 930px; }
.opt-parallel-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.opt-parallel-details li { display: grid; grid-template-columns: 115px minmax(0,1fr); gap: .5rem; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-panel); padding: .6rem; color: var(--study-muted); font-size: .62rem; line-height: 1.5; }
.opt-parallel-details b { color: var(--study-ink); font: 780 .57rem/1.45 ui-monospace, monospace; }
.opt-parallel-details span { min-width: 0; }
.opt-dimensions { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .75rem; border-radius: 999px; background: var(--study-panel); padding: .55rem; }
.opt-dimensions span { color: var(--study-muted); font: 650 .58rem/1.3 ui-monospace, monospace; }
.opt-dimensions span b { color: var(--study-accent); }
.opt-dimensions > strong { color: var(--study-warm); }

.opt-kv-givens { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin-bottom: .8rem; }
.opt-kv-givens > div { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: .35rem; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .55rem; }
.opt-kv-givens strong { color: var(--study-accent); font: 850 .72rem/1 ui-monospace, monospace; }
.opt-kv-givens small { grid-column: 1 / -1; text-align: center; }
.opt-kv-assumption { margin: -.2rem 0 .8rem; color: var(--study-muted); font-size: .61rem; text-align: center; }
.opt-bracketed { position: relative; display: grid; gap: .14rem; border-right: 2px solid var(--study-muted); border-left: 2px solid var(--study-muted); padding: .16rem .28rem; }
.opt-bracketed i { border-radius: 3px; background: var(--study-panel); padding: .2rem .26rem; color: var(--study-ink); font: 700 .56rem/1.1 ui-monospace, monospace; font-style: normal; text-align: center; }
.opt-grid-3x2 { grid-template-columns: repeat(2,1fr); }
.opt-grid-2x3, .opt-grid-3x3 { grid-template-columns: repeat(3,1fr); }
.opt-kv-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.opt-kv-grid > section { display: flex; align-items: center; flex-direction: column; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-card); padding: .9rem; text-align: center; }
.opt-no-cache { border-top: 3px solid #c2410c !important; }
.opt-with-cache { border-top: 3px solid var(--study-accent) !important; }
.opt-row-labels { display: grid; width: 100%; gap: .2rem; margin: .55rem 0 .1rem; }
.opt-row-labels code { border-radius: 5px; background: var(--study-panel); padding: .23rem; }
.opt-kv-grid .opt-down { margin: .42rem 0; }
.opt-kv-grid p { max-width: 700px; margin: .7rem 0 0; color: var(--study-muted); font-size: .66rem; }
.opt-matrix-equation-large { display: grid; grid-template-columns: 1fr auto 1fr auto 1.35fr; align-items: center; gap: .55rem; width: min(650px,100%); border-radius: 10px; background: var(--study-panel); padding: .75rem; }
.opt-matrix-equation-large > div { min-width: 0; }
.opt-matrix-equation-large small { display: block; margin-bottom: .35rem; }
.opt-matrix-equation-large > b { color: var(--study-warm); }
.opt-bracketed i.is-masked { background: color-mix(in srgb, #ef4444 10%, var(--study-card)); color: var(--study-muted); }
.opt-bracketed i.is-current { background: var(--study-accent-soft); color: var(--study-accent); font-weight: 850; }
.opt-cache-ledger { display: grid; width: min(560px,100%); gap: .25rem; }
.opt-cache-ledger span, .opt-cache-ledger strong { display: grid; grid-template-columns: 110px 1fr; border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-panel); padding: .38rem .55rem; color: var(--study-muted); font: 650 .57rem/1.35 ui-monospace, monospace; text-align: left; }
.opt-cache-ledger strong { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-ink); }
.opt-cache-ledger b { color: var(--study-accent); }
.opt-kv-calculation { display: grid; width: min(680px,100%); gap: .55rem; border-radius: 10px; background: var(--study-panel); padding: .75rem; }
.opt-kv-calculation > div { display: grid; grid-template-columns: 1fr auto 1.7fr auto 1fr; align-items: center; gap: .35rem; }
.opt-kv-calculation code { border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-card); padding: .42rem; }
.opt-kv-calculation b { color: var(--study-warm); }
.opt-kv-calculation > strong { color: var(--study-accent); font: 800 .64rem/1.4 ui-monospace, monospace; }
.opt-kv-calculation code.is-current { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); }
.opt-kv-calculation code.is-output { border-color: var(--study-warm); background: color-mix(in srgb,var(--study-warm) 12%,var(--study-card)); color: var(--study-warm); }
.opt-cache-stack { display: grid; width: min(220px, 100%); gap: .2rem; }
.opt-cache-stack span, .opt-cache-stack strong { border: 1px solid var(--study-line); border-radius: 5px; background: var(--study-panel); padding: .25rem; color: var(--study-muted); font: 650 .55rem/1.2 ui-monospace, monospace; }
.opt-cache-stack strong { border-color: var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); }
.opt-kv-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .7rem; }
.opt-kv-summary span { border-top: 2px solid var(--study-accent); padding-top: .45rem; color: var(--study-muted); font-size: .62rem; text-align: center; }
.opt-kv-summary b { color: var(--study-ink); }
.opt-kv-chart-key { display: flex; justify-content: center; flex-wrap: wrap; gap: .45rem 1rem; margin: -.2rem 0 .9rem; }
.opt-kv-chart-key span { color: var(--study-muted); font: 650 .58rem/1.3 ui-monospace, monospace; }
.opt-kv-chart-key i { display: inline-block; width: 12px; height: 12px; margin-right: .3rem; border-radius: 3px; vertical-align: -2px; }
.opt-kv-chart-key i.is-cached { background: color-mix(in srgb, var(--study-accent) 32%, var(--study-card)); }
.opt-kv-chart-key i.is-new { background: color-mix(in srgb, var(--study-warm) 34%, var(--study-card)); }
.opt-kv-matrix-stage { display: grid; grid-template-columns: minmax(150px,.8fr) auto minmax(175px,1fr) auto minmax(175px,1fr); align-items: center; gap: .55rem; border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb, var(--study-card) 94%, transparent); padding: 1rem; }
.opt-kv-matrix-stage .is-query { align-self: start; margin-top: 2.35rem; }
.opt-kv-stage-arrow, .opt-kv-stage-plus { max-width: 80px; }
.opt-kv-growth { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .55rem; margin: .75rem 0; border-radius: 10px; background: var(--study-panel); padding: .65rem; text-align: center; }
.opt-kv-growth code { border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-card); padding: .38rem; }
.opt-kv-growth b { color: var(--study-warm); font: 780 .57rem/1.3 ui-monospace, monospace; }
.opt-kv-growth span { grid-column: 1 / -1; color: var(--study-muted); font-size: .59rem; }
.opt-kv-math-band { margin-top: .7rem; border: 1px solid var(--study-line); border-left: 4px solid var(--study-accent); border-radius: 11px; background: var(--study-card); padding: .85rem; }
.opt-kv-math-band.is-values { border-left-color: var(--study-warm); }
.opt-kv-math-band h4 { text-align: left; }
.opt-kv-math-band p { margin: .6rem 0 0; color: var(--study-muted); font-size: .63rem; text-align: center; }
.opt-kv-shape-equation { display: grid; grid-template-columns: minmax(90px,.65fr) auto minmax(110px,.8fr) auto minmax(180px,1.5fr); align-items: center; gap: .5rem; border-radius: 9px; background: var(--study-panel); padding: .7rem; text-align: center; }
.opt-kv-shape-equation > code, .opt-attn-weights { border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-card); padding: .48rem; }
.opt-kv-shape-equation > code b, .opt-attn-weights > b { color: var(--study-accent); }
.opt-kv-shape-equation > strong { color: var(--study-warm); }
.opt-attn-weights small { display: block; margin-bottom: .28rem; }
.opt-attn-weights > b { display: block; margin-top: .28rem; font: 780 .56rem/1.2 ui-monospace, monospace; }
.opt-kv-size-strip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .7rem; margin-top: .75rem; border-radius: 10px; background: var(--study-ink); padding: .7rem .85rem; }
.opt-kv-size-strip strong { color: var(--study-card); font: 800 .58rem/1.3 ui-monospace, monospace; text-transform: uppercase; }
.opt-kv-size-strip code { color: #fff; font-size: .68rem; font-weight: 800; text-align: right; }
.opt-kv-size-strip span { grid-column: 1 / -1; color: color-mix(in srgb, var(--study-card) 75%, transparent); font-size: .56rem; text-align: center; }

.opt-attention-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.opt-q-definition { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .45rem .8rem; align-items: center; margin-bottom: .8rem; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-panel); padding: .65rem .75rem; }
.opt-q-definition b { color: var(--study-accent); font: 800 .62rem/1.4 ui-monospace, monospace; }
.opt-q-definition span { color: var(--study-muted); font-size: .62rem; line-height: 1.5; }
.opt-attention-grid > section { min-width: 0; border: 1px solid var(--study-line); border-left: 4px solid var(--study-accent); border-radius: 11px; background: var(--study-card); padding: 1rem; }
.opt-attention-grid > section:nth-child(2) { border-left-color: #2563eb; }
.opt-attention-grid > section:nth-child(3) { border-left-color: var(--study-warm); }
.opt-attention-grid header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .7rem; border-bottom: 1px solid var(--study-line); padding-bottom: .45rem; text-align: left; }
.opt-attention-grid header h4 { margin: 0; font-size: .76rem; }
.opt-attention-grid header span { color: var(--study-accent); font: 750 .58rem/1.3 ui-monospace, monospace; }
.opt-attention-grid > section:nth-child(2) header span { color: #2563eb; }
.opt-attention-grid > section:nth-child(3) header span { color: var(--study-warm); }
.opt-attention-body { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.opt-attention-terminal code { min-width: 640px; }
.opt-attention-side { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.opt-attention-mapping { margin: 0; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-panel); padding: .7rem; color: var(--study-muted); font-size: .62rem; line-height: 1.55; text-align: left; }
.opt-attention-mapping strong { display: block; margin-bottom: .28rem; color: var(--study-ink); font: 780 .57rem/1.4 ui-monospace, monospace; }
.opt-attention-detail { display: flex; align-items: stretch; justify-content: center; flex-direction: column; border: 1px dashed var(--study-line); border-radius: 9px; background: color-mix(in srgb,var(--study-panel) 80%,var(--study-card)); padding: .75rem; }
.opt-attention-detail code { line-height: 1.5; }
.opt-attention-detail > strong { margin: .45rem 0 .15rem; color: var(--study-accent); font: 850 .7rem/1.3 ui-monospace, monospace; }
.opt-cache-meter { position: relative; height: 24px; margin: .62rem 0 .25rem; border-radius: 999px; background: var(--study-panel); overflow: hidden; }
.opt-cache-meter b { display: block; height: 100%; min-width: 12.5%; border-radius: inherit; background: var(--study-accent); }
.opt-cache-meter span { position: absolute; inset: 0; color: var(--study-ink); font: 800 .55rem/24px ui-monospace, monospace; }
.opt-attention-notes { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .8rem; }
.opt-attention-notes p { margin: 0; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-panel); padding: .68rem; color: var(--study-muted); font-size: .62rem; line-height: 1.5; text-align: left; }
.opt-attention-notes strong { display: block; margin-bottom: .25rem; color: var(--study-ink); font: 780 .58rem/1.4 ui-monospace, monospace; }
.opt-attention-notes code { font-size: inherit; }

.opt-flash-memory-key { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .75rem; }
.opt-flash-memory-key span { border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-panel); padding: .65rem; color: var(--study-muted); font-size: .61rem; line-height: 1.5; }
.opt-flash-memory-key b { display: block; margin-bottom: .22rem; color: var(--study-ink); font: 800 .59rem/1.4 ui-monospace, monospace; }
.opt-flash-memory-key span:last-child { border-color: color-mix(in srgb, var(--study-accent) 55%, var(--study-line)); background: var(--study-accent-soft); }
.opt-flash-compare { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.opt-flash-compare > section { min-width: 0; border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .75rem; }
.opt-flash-compare > section:first-child { border-top: 4px solid var(--study-warm); }
.opt-flash-compare > section:last-child { border-top: 4px solid var(--study-accent); }
.opt-flash-compare h4 { margin: 0 0 .55rem; font-size: .66rem; line-height: 1.35; text-align: center; }
.opt-flash-trace code { min-width: 0; }
.study-article .opt-flash-trace pre.code-block { font-size: .52rem; line-height: 1.55; }
.opt-flash-notation { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .75rem; }
.opt-flash-notation span { border-left: 3px solid var(--study-accent); border-radius: 6px; background: var(--study-panel); padding: .5rem .6rem; color: var(--study-muted); font-size: .58rem; line-height: 1.45; }
.opt-flash-notation span:nth-child(even) { border-left-color: var(--study-warm); }
.opt-flash-notation b { display: block; margin-bottom: .16rem; color: var(--study-ink); font: 800 .58rem/1.3 ui-monospace, monospace; }
.opt-flash-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .4rem; margin-top: .75rem; }
.opt-flash-steps section { position: relative; min-width: 0; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .65rem .5rem .55rem; text-align: center; }
.opt-flash-steps section + section::before { position: absolute; top: 50%; left: -.37rem; color: var(--study-accent); content: '→'; font: 900 .58rem/1 ui-monospace, monospace; transform: translate(-50%,-50%); }
.opt-flash-steps i { display: grid; width: 22px; height: 22px; margin: 0 auto .3rem; place-items: center; border-radius: 50%; background: var(--study-accent); color: #fff; font: 850 .58rem/1 ui-monospace, monospace; font-style: normal; }
.opt-flash-steps b { display: block; margin-bottom: .28rem; color: var(--study-ink); font: 780 .56rem/1.35 ui-monospace, monospace; }
.opt-flash-steps small { display: block; color: var(--study-muted); font-size: .5rem; line-height: 1.45; }

/* MoE study artifact */
.moe-topic .study-layout { grid-template-columns: minmax(165px, 195px) minmax(0, 900px); gap: clamp(2rem, 5vw, 4rem); }
.moe-visual { margin: 1.5rem 0 2rem; border: 1px solid color-mix(in srgb, var(--study-accent) 45%, var(--study-line)); border-radius: 16px; background: linear-gradient(145deg, var(--study-card), color-mix(in srgb, var(--study-accent-soft) 52%, var(--study-card))); padding: clamp(1rem, 3vw, 1.5rem); box-shadow: 0 18px 45px rgba(24, 34, 45, 0.06); }
.moe-visual figcaption { margin-bottom: 1rem; color: var(--study-accent); font: 800 0.7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.moe-architecture { display: grid; grid-template-columns: minmax(235px, 0.8fr) minmax(400px, 1.4fr); gap: 0.9rem; }
.moe-panel { border: 1px solid var(--study-line); border-radius: 12px; background: color-mix(in srgb, var(--study-card) 92%, transparent); padding: 1rem; }
.moe-panel h4 { margin: 0 0 0.9rem; color: var(--study-ink); font: 750 0.78rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.moe-stack, .moe-router-flow { display: flex; align-items: center; flex-direction: column; }
.moe-node { width: min(240px, 92%); border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: 0.48rem 0.6rem; color: var(--study-ink); font: 700 0.66rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.moe-node span { float: right; color: var(--study-accent); font-size: 0.58rem; }
.moe-node.moe-io { border-color: var(--study-accent); background: var(--study-accent-soft); }
.moe-node.moe-soft { color: var(--study-muted); }
.moe-node.moe-attn { border-color: color-mix(in srgb, #2563eb 45%, var(--study-line)); background: color-mix(in srgb, #dbeafe 48%, var(--study-card)); }
.moe-node.moe-focus { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.moe-arrow { color: var(--study-accent); font: 800 0.78rem/1.25 ui-monospace, monospace; }
.moe-add { width: min(200px, 80%); margin: 0.12rem 0; color: var(--study-accent); font: 850 1rem/1.1 ui-monospace, monospace; text-align: center; }
.moe-add small { color: var(--study-muted); font-size: 0.55rem; font-weight: 650; }
.moe-repeat { border-radius: 999px; background: color-mix(in srgb, var(--study-warm) 18%, var(--study-card)); padding: 0.28rem 0.65rem; color: var(--study-warm); font: 750 0.58rem/1.2 ui-monospace, monospace; }
.moe-token, .moe-combine, .moe-router { min-width: 185px; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: 0.6rem 0.85rem; text-align: center; }
.moe-token strong { display: block; color: var(--study-accent); font: 850 0.9rem/1.2 ui-monospace, monospace; }
.moe-token span, .moe-router span { display: block; color: var(--study-muted); font: 650 0.58rem/1.4 ui-monospace, monospace; }
.moe-router { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.moe-router strong { display: block; color: var(--study-ink); font: 800 0.72rem/1.25 ui-monospace, monospace; }
.moe-router code, .moe-combine code { display: block; margin-top: 0.35rem; border: 0; background: transparent; padding: 0; color: var(--study-accent); font-size: 0.62rem; }
.moe-fanout { width: 78%; color: var(--study-accent); font: 800 1.08rem/1.55 ui-monospace, monospace; letter-spacing: 0.12em; text-align: center; }
.moe-experts { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; }
.moe-expert { position: relative; min-width: 0; border: 1px dashed var(--study-line); border-radius: 9px; background: color-mix(in srgb, var(--study-panel) 80%, var(--study-card)); padding: 0.65rem 0.35rem; opacity: 0.48; text-align: center; }
.moe-expert.is-selected { border: 2px solid var(--study-accent); background: var(--study-accent-soft); opacity: 1; }
.moe-expert.is-selected.moe-expert-warm { border-color: var(--study-warm); background: color-mix(in srgb, var(--study-warm) 13%, var(--study-card)); }
.moe-expert > span { position: absolute; top: -0.48rem; right: 0.3rem; border-radius: 999px; background: var(--study-card); padding: 0.12rem 0.3rem; color: var(--study-accent); font: 800 0.52rem/1.2 ui-monospace, monospace; }
.moe-expert strong, .moe-expert small { display: block; }
.moe-expert strong { color: var(--study-ink); font: 750 0.62rem/1.3 ui-monospace, monospace; }
.moe-expert small { margin-top: 0.25rem; color: var(--study-muted); font: 600 0.5rem/1.2 ui-monospace, monospace; }
.moe-combine { border-color: color-mix(in srgb, var(--study-warm) 50%, var(--study-line)); }
.moe-combine strong { display: block; color: var(--study-warm); font: 800 0.66rem/1.25 ui-monospace, monospace; }
.moe-output { border-color: var(--study-warm); }
.moe-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-top: 0.9rem; }
.moe-summary > div { border-top: 2px solid var(--study-accent); padding: 0.55rem 0.25rem 0; text-align: center; }
.moe-summary strong, .moe-summary span { display: block; }
.moe-summary strong { color: var(--study-ink); font: 750 0.65rem/1.3 ui-monospace, monospace; }
.moe-summary span { margin-top: 0.15rem; color: var(--study-muted); font-size: 0.6rem; }
.moe-router-example { margin: 1.2rem 0 1.6rem; border: 1px solid var(--study-line); border-radius: 14px; background: color-mix(in srgb, var(--study-panel) 70%, var(--study-card)); padding: clamp(.85rem, 2vw, 1.2rem); }
.moe-router-example figcaption { margin-bottom: .8rem; color: var(--study-accent); font: 800 .66rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.moe-matrix-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .7rem; }
.moe-matrix-card { min-width: 0; overflow: hidden; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); }
.moe-matrix-card header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; border-bottom: 1px solid var(--study-line); padding: .55rem .65rem; }
.moe-matrix-card header strong { color: var(--study-ink); font: 800 .68rem/1.3 ui-monospace, monospace; }
.moe-matrix-card header span { color: var(--study-muted); font: 650 .52rem/1.3 ui-monospace, monospace; text-align: right; }
.moe-matrix-scroll { overflow-x: auto; }
.moe-matrix-card table { width: 100%; min-width: 330px; border-collapse: collapse; margin: 0; font: 650 .58rem/1.3 ui-monospace, monospace; }
.moe-matrix-card th, .moe-matrix-card td { border: 0; border-right: 1px solid var(--study-line); border-bottom: 1px solid var(--study-line); padding: .42rem .38rem; text-align: center; }
.moe-matrix-card tr:last-child > * { border-bottom: 0; }
.moe-matrix-card tr > *:last-child { border-right: 0; }
.moe-matrix-card thead th { background: color-mix(in srgb, var(--study-panel) 75%, var(--study-card)); color: var(--study-muted); font-size: .5rem; }
.moe-matrix-card tbody th { color: var(--study-ink); text-align: left; }
.moe-matrix-card tbody tr.is-focus > * { background: var(--study-accent-soft); color: var(--study-ink); font-weight: 850; }
.moe-matrix-card td.is-top { box-shadow: inset 0 0 0 2px var(--study-accent); color: var(--study-accent) !important; }
.moe-matrix-arrow { color: var(--study-accent); font: 750 .56rem/1.35 ui-monospace, monospace; text-align: center; }
.moe-matrix-arrow strong, .moe-matrix-arrow span { display: block; }
.moe-route-result { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .8rem; border-left: 3px solid var(--study-accent); background: var(--study-accent-soft); padding: .65rem .75rem; }
.moe-route-result strong { color: var(--study-ink); font-size: .72rem; }
.moe-route-result span { color: var(--study-muted); font-size: .65rem; }
.moe-route-result code { border: 0; background: transparent; padding: 0; color: var(--study-accent); font-size: .62rem; }

@media (max-width: 820px) {
  .compact-topic.transformer-topic .study-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 2rem; }
  .tx-two-up { grid-template-columns: 1fr; }
  .tx-equation-flow { grid-template-columns: repeat(4, auto); }
  .tx-layout-stage { grid-template-columns: 1fr; }
  .tx-layout-arrow { transform: rotate(90deg); }
  .tx-layout-return { grid-template-columns: 1fr; }
  .tx-layout-return > * + *::before { content: '↓'; }
  .tx-glu-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-projection-example { grid-template-columns: 1fr; justify-items: center; }
  .tx-branch-mark { line-height: 1; transform: rotate(90deg); }
  .tx-projection-branches { width: 100%; }
  .tx-row-story, .tx-curve-legend { grid-template-columns: 1fr; }
  .tx-layout-step, .tx-layout-attend { grid-template-columns: 34px minmax(0, 1fr); }
  .tx-layout-step > :last-child { grid-column: 1 / -1; }
  .tx-rope-steps { grid-template-columns: 1fr; }
  .tx-rope-op { transform: rotate(90deg); }
  .moe-topic .study-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 2rem; }
  .moe-architecture { grid-template-columns: 1fr; }
  .moe-matrix-flow { grid-template-columns: 1fr; }
  .moe-matrix-arrow span { display: none; }
  .moe-matrix-arrow::after { content: 'within each row ↓'; }
  .scaling-laws-topic .study-layout { grid-template-columns: 175px minmax(0,1fr); gap: 2rem; }
  .optimizations-topic .study-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 2rem; }
  .opt-collective-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-collective-wide { grid-column: 1 / -1; }
  .opt-collective-details, .opt-phase-grid { grid-template-columns: 1fr; }
  .opt-kv-matrix-stage { grid-template-columns: 1fr; }
  .opt-kv-matrix-stage .is-query { width: min(260px, 100%); margin: 0 auto; }
  .opt-kv-stage-arrow, .opt-kv-stage-plus { max-width: none; transform: none; text-align: center; }
  .opt-kv-stage-arrow::after, .opt-kv-stage-plus::after { display: block; content: '↓'; margin-top: .15rem; }
  .opt-parallel-card header { align-items: flex-start; flex-direction: column; }
  .opt-parallel-card header span { text-align: left; }
  .opt-attention-body { grid-template-columns: 1fr; }
}
.study-placeholder { border: 1px dashed var(--study-line); border-radius: 14px; background: var(--study-panel); padding: 1.25rem; }
.study-placeholder h2 { margin: 0 0 0.7rem; border: 0; padding: 0; font-size: 1.6rem; }
.study-placeholder p { color: var(--study-muted); }

@media (max-width: 900px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 2rem; }
}

@media (max-width: 680px) {
  .study-index, .study-topic { padding-right: 1rem; padding-left: 1rem; }
  .study-hero { padding-top: 4rem; }
  .study-map-heading { display: block; }
  .study-map-heading > p { margin-top: 0.8rem; text-align: left; }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card { min-height: 0; }
  .study-layout { display: block; }
  .study-sidebar { position: sticky; top: 3.8rem; z-index: 2; max-height: none; margin-bottom: 2rem; border: 1px solid var(--study-line); border-radius: 10px; background: color-mix(in srgb, var(--study-card) 95%, transparent); padding: 0.8rem; }
  .topic-toc { display: flex; overflow-x: auto; gap: 0.2rem; border: 0; padding-bottom: 0.2rem; }
  .topic-toc a, .topic-toc a.toc-depth-3 { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; margin: 0; padding: 0.4rem 0.55rem; font-size: 0.72rem; }
  .topic-toc a.is-active { border-color: var(--study-accent); }
  .sidebar-label { margin-bottom: 0.35rem; }
  .topic-topline { padding-top: 1.6rem; }
  .topic-header { padding: 3rem 0 3.2rem; }
  .bpe-flow-input, .bpe-flow-round { grid-template-columns: 1fr; }
  .bpe-step { min-height: 112px; }
  .bpe-arrow { transform: rotate(90deg); }
  .transformer-topic .study-layout { display: block; }
  .moe-topic .study-layout { display: block; }
  .scaling-laws-topic .study-layout { display: block; }
  .optimizations-topic .study-layout { display: block; }
  .transformer-topic .study-article mjx-container { display: inline-block !important; max-width: calc(100vw - 5rem) !important; }
  .tx-two-up, .tx-architecture .tx-two-up { grid-template-columns: 1fr; }
  .tx-qkv-input { grid-template-columns: 1fr; }
  .tx-projection { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; text-align: center; }
  .tx-equation-flow { grid-template-columns: repeat(3, auto); justify-content: stretch; }
  .tx-equation-flow .tx-matrix { min-width: 0; }
  .tx-glu-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx-curves { grid-template-columns: 1fr; }
  .tx-matrix-equation { grid-template-columns: auto auto auto; }
  .tx-matrix-equation > small { grid-column: 1 / -1; text-align: center; }
  .tx-gate-equation { grid-template-columns: 1fr; }
  .tx-swiglu-numeric { grid-template-columns: 1fr; }
  .tx-swiglu-numeric > b { transform: rotate(90deg); }
  .tx-layout-step, .tx-layout-attend { display: block; }
  .tx-step-index { margin-bottom: .7rem; }
  .tx-layout-vectors, .tx-split-grid, .tx-head-lanes { margin-top: .8rem; }
  .tx-split-grid, .tx-implementation-pair, .tx-norm-axis-grid, .tx-norm-mini-grid, .tx-rope-many > div, .tx-process-paths { grid-template-columns: 1fr; }
  .tx-head-lane > div { grid-template-columns: 1fr; }
  .tx-rope-result { grid-template-columns: 1fr; }
  .tx-norm-axis-card header { grid-template-columns: 1fr; }
  .tx-norm-axis-card header code { grid-column: 1; grid-row: auto; justify-self: start; }
  .moe-experts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moe-summary { grid-template-columns: 1fr; }
  .scale-stage { grid-template-columns: 1fr; text-align: center; }
  .scale-step { margin: 0 auto; }
  .scale-budget-row, .scale-candidates, .scale-fit-equations { grid-template-columns: 1fr; }
  .scale-budget-row b { transform: rotate(90deg); }
  .scale-profile header { display: block; text-align: center; }
  .scale-profile header strong { display: block; margin-top: .25rem; }
  .scale-candidate { min-height: 90px; }
  .scale-optima, .scale-target-flow { flex-direction: column; }
  .scale-optima b, .scale-target-flow b { transform: rotate(90deg); }
  .opt-collective-grid, .opt-phase-grid, .opt-kv-grid, .opt-kv-givens, .opt-flash-compare { grid-template-columns: 1fr; }
  .opt-flash-memory-key, .opt-flash-notation, .opt-flash-steps { grid-template-columns: 1fr; }
  .opt-flash-steps section + section::before { top: -.2rem; left: 50%; content: '↓'; }
  .study-article .opt-flash-trace pre.code-block { padding: .75rem .55rem; font-size: .49rem; }
  .opt-collective-wide { grid-column: auto; }
  .opt-a2a, .opt-rs-flow, .opt-online-softmax > div { grid-template-columns: 1fr; }
  .opt-a2a b, .opt-rs-flow b { transform: rotate(90deg); }
  .opt-phase-equation, .opt-phase-cache-pair, .opt-decode-equation { grid-template-columns: 1fr; }
  .opt-phase-equation > b, .opt-decode-equation > b { transform: rotate(90deg); }
  .opt-append-source { align-items: stretch; flex-direction: column; }
  .opt-kv-growth { grid-template-columns: 1fr; }
  .opt-kv-growth span { grid-column: auto; }
  .opt-kv-shape-equation { grid-template-columns: 1fr; }
  .opt-kv-shape-equation > strong { transform: rotate(90deg); }
  .opt-kv-size-strip { grid-template-columns: 1fr; text-align: center; }
  .opt-kv-size-strip code { text-align: center; }
  .opt-kv-size-strip span { grid-column: auto; }
  .opt-metric-strip, .opt-fa2 { grid-template-columns: repeat(2, 1fr); }
  .opt-fa2 h4 { grid-column: 1 / -1; }
  .opt-parallel-grid { grid-template-columns: 1fr; }
  .opt-parallel-card { padding: .8rem; }
  .opt-parallel-details { grid-template-columns: 1fr; }
  .opt-parallel-details li { grid-template-columns: 1fr; gap: .22rem; }
  .opt-terminal-diagram pre { padding: .75rem; font-size: .54rem; }
  .opt-matrix-equation-large { grid-template-columns: 1fr; }
  .opt-matrix-equation-large > b { transform: rotate(90deg); }
  .opt-kv-calculation > div { grid-template-columns: 1fr; }
  .opt-kv-calculation > div > b { transform: rotate(90deg); }
  .opt-cache-ledger span, .opt-cache-ledger strong { grid-template-columns: 1fr; text-align: center; }
  .opt-q-definition { grid-template-columns: 1fr; }
  .opt-attention-side { grid-template-columns: 1fr; }
  .opt-attention-notes { grid-template-columns: 1fr; }
  .opt-attention-grid header { display: block; text-align: center; }
  .opt-attention-grid header span { display: block; margin-top: .25rem; }
  .opt-dimensions { align-items: stretch; flex-direction: column; border-radius: 10px; text-align: center; }
  .opt-dimensions > strong { transform: rotate(90deg); }
  .opt-kv-summary { grid-template-columns: 1fr; }
}

/* SFT revamp · implementation, case studies, and LoRA */
.sft-visual { margin: 1.7rem 0 2.2rem; border: 1px solid var(--study-line); border-radius: 18px; background: linear-gradient(155deg, var(--study-panel), var(--study-card)); padding: 1.15rem; box-shadow: 0 18px 45px color-mix(in srgb, var(--study-ink) 8%, transparent); }
.sft-visual figcaption { margin-bottom: 1rem; color: var(--study-ink); font: 850 .86rem/1.35 ui-monospace, monospace; letter-spacing: -.02em; }
.sft-arrow { padding: .35rem 0; color: var(--study-accent); font: 900 .7rem/1 ui-monospace, monospace; text-align: center; }
.sft-pipeline-stage, .sft-case-stage, .qlora-stage { display: grid; grid-template-columns: 52px minmax(0,1fr) 170px; gap: .85rem; align-items: center; border: 1px solid var(--study-line); border-left: 5px solid var(--study-accent); border-radius: 13px; background: var(--study-card); padding: .82rem; }
.sft-pipeline-stage > span, .sft-case-stage > span, .qlora-stage > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: var(--study-ink); color: var(--study-card); font: 850 .62rem/1 ui-monospace, monospace; }
.sft-pipeline-stage h4, .sft-case-stage h4, .qlora-stage h4 { margin: 0; color: var(--study-ink); font-size: .74rem; }
.sft-pipeline-stage p, .sft-case-stage p, .qlora-stage p { margin: .28rem 0 0; color: var(--study-muted); font-size: .62rem; line-height: 1.45; }
.sft-pipeline-stage code, .sft-case-stage code, .qlora-stage code { display: inline-block; margin-top: .28rem; font-size: .59rem; }
.sft-pipeline-stage aside, .sft-case-stage aside, .qlora-stage aside { border-left: 1px dashed var(--study-line); padding-left: .75rem; color: var(--study-muted); font-size: .56rem; line-height: 1.55; }
.sft-pipeline-stage aside b, .sft-case-stage aside b, .qlora-stage aside b { color: var(--study-accent); font: 800 .53rem/1.3 ui-monospace, monospace; text-transform: uppercase; }
.sft-stage-data { border-left-color: #7c3aed; }
.sft-stage-mask { border-left-color: #0891b2; }
.sft-stage-loss { border-left-color: #dc6b32; }
.sft-stage-update, .qlora-stage.is-train { border-left-color: #16a34a; }
.sft-token-row { display: flex; flex-wrap: wrap; gap: .28rem; margin: .38rem 0; }
.sft-token-row i { border-radius: 6px; padding: .32rem .45rem; font: 750 .52rem/1 ui-monospace, monospace; font-style: normal; }
.sft-token-row .is-read { background: var(--study-panel); color: var(--study-muted); }
.sft-token-row .is-target { background: var(--study-accent-soft); color: var(--study-accent); outline: 1px solid var(--study-accent); }
.sft-token-row .is-pad { background: color-mix(in srgb, var(--study-muted) 12%, transparent); color: var(--study-muted); }
.sft-teacher-grid { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; }
.sft-teacher-grid i { border-radius: 7px; background: var(--study-panel); padding: .42rem; color: var(--study-ink); font: 720 .54rem/1.3 ui-monospace, monospace; font-style: normal; }
.sft-teacher-grid b { color: var(--study-accent); font-size: .58rem; }
.sft-prob { display: flex; gap: .35rem; margin-top: .45rem; }
.sft-prob i { width: var(--p); min-width: 55px; border-radius: 6px; background: var(--study-accent-soft); padding: .32rem; color: var(--study-accent); font: 750 .5rem/1 ui-monospace, monospace; font-style: normal; text-align: center; }
.sft-pipeline-summary, .qlora-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .9rem; }
.sft-pipeline-summary div, .qlora-summary span { display: flex; flex-direction: column; border-radius: 10px; background: var(--study-ink); padding: .7rem; text-align: center; }
.sft-pipeline-summary b, .qlora-summary b { color: var(--study-card); font: 800 .58rem/1.3 ui-monospace, monospace; }
.sft-pipeline-summary span, .qlora-summary span { color: color-mix(in srgb, var(--study-card) 70%, var(--study-muted)); font-size: .53rem; line-height: 1.4; }

.sft-case-stage.is-human { border-left-color: #7c3aed; }
.sft-case-stage.is-train { border-left-color: #dc6b32; }
.sft-case-stage.is-model { border-left-color: #16a34a; }
.sft-case-branches { display: grid; grid-template-columns: repeat(3,1fr auto) 1fr; align-items: center; gap: .35rem; margin-top: .85rem; }
.sft-case-branches section { display: flex; flex-direction: column; border-top: 4px solid #7c3aed; border-radius: 9px; background: var(--study-card); padding: .62rem; text-align: center; }
.sft-case-branches b, .sft-case-branches span { font-size: .52rem; line-height: 1.35; }
.sft-case-branches b { color: var(--study-ink); }
.sft-case-branches span { margin-top: .22rem; color: var(--study-muted); }
.sft-case-branches i { color: var(--study-accent); font-style: normal; font-weight: 900; }
.sft-lima-scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .65rem; }
.sft-lima-scale section, .sft-case-output { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-card); padding: .85rem; text-align: center; }
.sft-lima-scale section.is-highlight { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.sft-lima-scale strong, .sft-case-output strong { color: var(--study-ink); font: 820 .66rem/1.3 ui-monospace, monospace; }
.sft-lima-scale span, .sft-case-output span, .sft-case-output small { margin-top: .25rem; color: var(--study-muted); font-size: .55rem; line-height: 1.4; }
.sft-lima-scale > i { align-self: center; color: var(--study-accent); font-style: normal; font-weight: 900; }
.sft-quality-funnel, .sft-filter-grid, .sft-mixture-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .45rem; }
.sft-quality-funnel div, .sft-filter-grid section, .sft-mixture-grid section { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--study-line); border-top: 4px solid var(--study-accent); border-radius: 9px; background: var(--study-card); padding: .65rem; text-align: center; }
.sft-quality-funnel b, .sft-filter-grid b, .sft-mixture-grid b { color: var(--study-ink); font: 800 .55rem/1.3 ui-monospace, monospace; }
.sft-quality-funnel span, .sft-filter-grid span, .sft-mixture-grid span { margin-top: .24rem; color: var(--study-muted); font-size: .51rem; line-height: 1.4; }
.sft-generation { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.sft-generation i { border-radius: 999px; background: var(--study-accent-soft); padding: .34rem .52rem; color: var(--study-accent); font: 730 .51rem/1 ui-monospace, monospace; font-style: normal; }
.sft-mixture-grid { grid-template-columns: repeat(3,1fr); }
.sft-mixture-grid section:nth-child(2n) { border-top-color: #7c3aed; }
.sft-mixture-grid section:nth-child(3n) { border-top-color: #dc6b32; }
.sft-eval-split { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .6rem; }
.sft-eval-split section { display: flex; flex-direction: column; border: 2px solid var(--study-accent); border-radius: 11px; background: var(--study-accent-soft); padding: .75rem; text-align: center; }
.sft-eval-split b { color: var(--study-ink); font: 800 .6rem/1.3 ui-monospace, monospace; }
.sft-eval-split span { margin-top: .2rem; color: var(--study-muted); font-size: .53rem; }
.sft-eval-split > i { align-self: center; color: var(--study-accent); font-style: normal; font-weight: 900; }
.sft-loop-back { margin-top: .65rem; border: 1px dashed #7c3aed; border-radius: 9px; padding: .58rem; color: #7c3aed; font: 780 .54rem/1.35 ui-monospace, monospace; text-align: center; }

.lora-input { width: min(100%, 300px); margin: 0 auto; border-radius: 12px; background: var(--study-ink); padding: .72rem; text-align: center; }
.lora-input strong, .lora-input code, .lora-input span { display: block; }
.lora-input strong { color: var(--study-card); font-size: .8rem; }
.lora-input code, .lora-input span { margin-top: .2rem; color: color-mix(in srgb, var(--study-card) 75%, var(--study-muted)); font-size: .54rem; }
.lora-fork { padding: .55rem 0; color: var(--study-accent); font: 800 .58rem/1.3 ui-monospace, monospace; text-align: center; }
.lora-paths { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.lora-paths section { display: flex; flex-direction: column; border: 1px solid var(--study-line); border-top: 5px solid var(--study-muted); border-radius: 12px; background: var(--study-card); padding: .8rem; text-align: center; }
.lora-paths section.is-adapter { border-top-color: var(--study-accent); }
.lora-paths header { display: flex; justify-content: space-between; gap: .5rem; color: var(--study-ink); font: 750 .56rem/1.3 ui-monospace, monospace; }
.lora-paths header span { color: var(--study-muted); }
.lora-paths code { margin: .55rem auto; font-size: .64rem; line-height: 1.5; }
.lora-paths strong { color: var(--study-accent); font: 820 .62rem/1.3 ui-monospace, monospace; }
.lora-paths i { margin: .35rem 0; color: var(--study-accent); font-style: normal; font-weight: 900; }
.lora-merge { display: flex; flex-direction: column; margin-top: .75rem; border: 2px solid var(--study-accent); border-radius: 12px; background: var(--study-accent-soft); padding: .8rem; text-align: center; }
.lora-merge code, .lora-merge span, .lora-merge strong { margin-top: .2rem; }
.lora-merge strong { color: var(--study-accent); font: 850 .68rem/1.3 ui-monospace, monospace; }
.lora-param-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .45rem; margin-top: .7rem; }
.lora-param-strip span { display: flex; flex-direction: column; border-radius: 9px; background: var(--study-card); padding: .55rem; color: var(--study-muted); font-size: .51rem; text-align: center; }
.lora-param-strip b { color: var(--study-ink); font: 800 .55rem/1.3 ui-monospace, monospace; }
.lora-param-strip > i { color: var(--study-accent); font-style: normal; font-weight: 850; }
.lora-param-strip small { grid-column: 1/-1; color: var(--study-muted); font-size: .5rem; text-align: center; }

.qlora-stage.is-4bit { border-left-color: #7c3aed; }
.qlora-bits { display: flex; gap: .3rem; margin: .35rem 0; }
.qlora-bits i { border-radius: 5px; background: #7c3aed; padding: .3rem .4rem; color: white; font: 750 .51rem/1 ui-monospace, monospace; font-style: normal; }
.qlora-adapter-join { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .4rem; margin: .75rem 0; }
.qlora-adapter-join section { display: flex; flex-direction: column; border: 2px solid var(--study-accent); border-radius: 10px; background: var(--study-accent-soft); padding: .65rem; text-align: center; }
.qlora-adapter-join b { color: var(--study-ink); font: 800 .56rem/1.3 ui-monospace, monospace; }
.qlora-adapter-join span { margin-top: .2rem; color: var(--study-muted); font-size: .5rem; }
.qlora-adapter-join > i { color: var(--study-accent); font-style: normal; font-weight: 900; }

@media (max-width: 760px) {
  .sft-pipeline-stage, .sft-case-stage, .qlora-stage { grid-template-columns: 44px minmax(0,1fr); }
  .sft-pipeline-stage aside, .sft-case-stage aside, .qlora-stage aside { grid-column: 2; border-left: 0; border-top: 1px dashed var(--study-line); padding: .5rem 0 0; }
  .sft-case-branches { grid-template-columns: 1fr; }
  .sft-case-branches i { transform: rotate(90deg); text-align: center; }
  .sft-quality-funnel, .sft-filter-grid, .sft-mixture-grid { grid-template-columns: repeat(2,1fr); }
  .lora-paths { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .sft-visual { padding: .75rem; }
  .sft-pipeline-summary, .qlora-summary, .sft-lima-scale, .sft-eval-split { grid-template-columns: 1fr; }
  .sft-lima-scale > i, .sft-eval-split > i { transform: rotate(90deg); text-align: center; }
  .sft-quality-funnel, .sft-filter-grid, .sft-mixture-grid { grid-template-columns: 1fr; }
  .sft-teacher-grid, .sft-prob { flex-wrap: wrap; }
  .qlora-adapter-join { grid-template-columns: 1fr; }
  .qlora-adapter-join > i { transform: rotate(90deg); text-align: center; }
}

/* Pre-training data-pipeline study artifacts */
.compact-topic.data-pipeline-topic .study-layout { grid-template-columns: minmax(165px, 195px) minmax(0, 960px); gap: clamp(2rem, 5vw, 4rem); }
.dp-visual { margin: 1.6rem 0 2.35rem; border: 1px solid color-mix(in srgb, var(--study-accent) 38%, var(--study-line)); border-radius: 17px; background: linear-gradient(145deg, var(--study-card), color-mix(in srgb, var(--study-accent-soft) 38%, var(--study-card))); padding: clamp(.95rem, 2.5vw, 1.5rem); box-shadow: 0 18px 48px rgba(24,34,45,.06); }
.dp-visual figcaption { margin-bottom: 1rem; color: var(--study-accent); font: 800 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .105em; text-transform: uppercase; }
.dp-stage, .dp-ft-stage, .dp-fw-stage, .dp-edu > section { display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(150px,210px); align-items: center; gap: .85rem; border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb, var(--study-card) 95%, transparent); padding: .9rem 1rem; }
.dp-index, .dp-ft-stage > span, .dp-fw-stage > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--study-accent-soft); color: var(--study-accent); font: 900 .66rem/1 ui-monospace, monospace; }
.dp-stage h4, .dp-ft-stage h4, .dp-fw-stage h4, .dp-edu h4, .dp-attention-compare h4 { margin: 0; color: var(--study-ink); font: 850 .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dp-stage p, .dp-ft-stage p, .dp-fw-stage p, .dp-edu p { margin: .3rem 0 0; color: var(--study-muted); font-size: .7rem; line-height: 1.55; }
.dp-stage code, .dp-ft-stage code, .dp-fw-stage code, .dp-edu code { display: block; width: fit-content; max-width: 100%; margin-top: .4rem; overflow-wrap: anywhere; border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-code-bg); padding: .25rem .4rem; color: var(--study-code-ink); font: 650 .6rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dp-stage aside, .dp-ft-stage aside, .dp-fw-stage > strong, .dp-edu aside { color: var(--study-muted); font: 650 .6rem/1.5 ui-monospace, monospace; }
.dp-stage aside b, .dp-ft-stage aside b, .dp-edu aside b { display: block; margin-bottom: .15rem; color: var(--study-accent); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.dp-arrow { height: 24px; color: var(--study-accent); font: 900 1rem/24px ui-monospace, monospace; text-align: center; }
.dp-stage-source, .dp-fw-source { border-color: var(--study-accent); }
.dp-stage-filter { border-left: 4px solid #2563eb; }
.dp-stage-protect { border-left: 4px solid #7c3aed; }
.dp-stage-mix { border-left: 4px solid #d97706; }
.dp-stage-validate, .dp-fw-output, .dp-edu-scale { border: 2px solid var(--study-accent) !important; background: color-mix(in srgb, var(--study-accent-soft) 48%, var(--study-card)) !important; }
.dp-mini-flow { display: flex; align-items: center; gap: .38rem; margin-top: .5rem; }
.dp-mini-flow i, .dp-fw-gates i, .dp-chip-row i { border-radius: 999px; background: var(--study-accent-soft); padding: .24rem .48rem; color: var(--study-accent); font: 750 .57rem/1.3 ui-monospace, monospace; font-style: normal; }
.dp-mini-flow b { color: var(--study-muted); font-size: .65rem; }
.dp-mixture { display: flex; overflow: hidden; height: 33px; margin-top: .45rem; border-radius: 7px; }
.dp-mixture i { display: grid; min-width: 55px; flex-basis: var(--w); place-items: center; border-right: 1px solid color-mix(in srgb, var(--study-card) 70%, transparent); background: color-mix(in srgb, var(--study-accent) 18%, var(--study-card)); color: var(--study-ink); font: 750 .55rem/1 ui-monospace, monospace; font-style: normal; }
.dp-mixture i:nth-child(2) { background: color-mix(in srgb, #2563eb 18%, var(--study-card)); }
.dp-mixture i:nth-child(3) { background: color-mix(in srgb, #d97706 20%, var(--study-card)); }
.dp-mixture i:nth-child(4) { background: color-mix(in srgb, #7c3aed 18%, var(--study-card)); }
.dp-ft-stage { grid-template-columns: 48px minmax(0,1fr) minmax(150px,220px); }
.dp-ft-stage code + code { margin-top: .3rem; }
.dp-chip-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.dp-ft-infer { border: 2px solid var(--study-accent); background: color-mix(in srgb, var(--study-accent-soft) 42%, var(--study-card)); }
.dp-note { margin: 1rem 0 0 !important; border-top: 1px solid var(--study-line); padding-top: .8rem; color: var(--study-muted); font-size: .72rem !important; line-height: 1.65 !important; }
.dp-note strong { color: var(--study-ink); }
.dp-fw-stage { grid-template-columns: 52px minmax(0,1fr) minmax(115px,150px); }
.dp-fw-stage > strong { border-left: 1px solid var(--study-line); padding-left: .7rem; color: var(--study-accent); text-align: center; }
.dp-fw-gates { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.dp-fw-dedup { border: 2px solid #7c3aed; background: color-mix(in srgb, #ede9fe 42%, var(--study-card)); }
.dp-dedup-choice { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .45rem; margin-top: .5rem; }
.dp-dedup-choice i { border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: .45rem; color: var(--study-muted); font: 650 .58rem/1.45 ui-monospace, monospace; font-style: normal; text-align: center; }
.dp-dedup-choice i.is-bad { border-color: #dc6b32; }
.dp-dedup-choice i.is-good { border-color: var(--study-accent); }
.dp-dedup-choice i b { color: var(--study-ink); }
.dp-dedup-choice em { color: var(--study-muted); font: 800 .55rem/1 ui-monospace, monospace; font-style: normal; }
.dp-thresholds { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; margin-top: .45rem; }
.dp-thresholds code { width: auto; margin: 0; text-align: center; }
.dp-edu > section { grid-template-columns: 48px minmax(0,1fr) minmax(145px,185px); }
.dp-prompt-result { display: flex; align-items: center; gap: .55rem; margin-top: .55rem; }
.dp-prompt-result i { color: var(--study-muted); font: 650 .58rem/1.4 ui-monospace, monospace; font-style: normal; }
.dp-prompt-result b { color: var(--study-accent); }
.dp-prompt-result strong { border-radius: 7px; background: var(--study-accent-soft); padding: .35rem .55rem; color: var(--study-accent); font: 800 .64rem/1.3 ui-monospace, monospace; }
.dp-edu-train { border: 2px solid #2563eb !important; background: color-mix(in srgb, #dbeafe 35%, var(--study-card)) !important; }
.dp-encoder-stack { display: grid; justify-items: center; margin-top: .5rem; }
.dp-encoder-stack code { width: min(100%,330px); margin: 0; text-align: center; }
.dp-encoder-stack b { color: var(--study-muted); font: 750 .55rem/1.6 ui-monospace, monospace; }
.dp-score-row { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: .4rem; margin-top: .5rem; }
.dp-score-row code { margin: 0; }
.dp-score-row b, .dp-score-row strong { border-radius: 6px; padding: .3rem .4rem; font: 800 .59rem/1.3 ui-monospace, monospace; text-align: center; }
.dp-score-row b { background: color-mix(in srgb, #dc6b32 14%, var(--study-card)); color: #b45309; }
.dp-score-row strong { background: var(--study-accent-soft); color: var(--study-accent); }
.dp-attention-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-top: .9rem; }
.dp-attention-compare > div { border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .8rem; }
.dp-attention-compare code { white-space: pre; }
.dp-attention-compare p { margin: .45rem 0 0; color: var(--study-muted); font-size: .65rem; }

@media (max-width: 820px) {
  .compact-topic.data-pipeline-topic .study-layout { grid-template-columns: 175px minmax(0,1fr); gap: 2rem; }
  .dp-stage, .dp-ft-stage, .dp-fw-stage, .dp-edu > section { grid-template-columns: 42px minmax(0,1fr); }
  .dp-stage aside, .dp-ft-stage aside, .dp-fw-stage > strong, .dp-edu aside { grid-column: 2; border-top: 1px solid var(--study-line); padding-top: .45rem; text-align: left; }
  .dp-fw-stage > strong { border-left: 0; padding-left: 0; }
  .dp-thresholds { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .compact-topic.data-pipeline-topic .study-layout { display: block; }
  .dp-visual { padding: .75rem; }
  .dp-stage, .dp-ft-stage, .dp-fw-stage, .dp-edu > section { grid-template-columns: 34px minmax(0,1fr); gap: .55rem; padding: .75rem; }
  .dp-index, .dp-ft-stage > span, .dp-fw-stage > span { width: 30px; height: 30px; font-size: .56rem; }
  .dp-mini-flow, .dp-prompt-result { align-items: stretch; flex-direction: column; }
  .dp-mini-flow b { transform: rotate(90deg); text-align: center; }
  .dp-mixture { height: auto; flex-direction: column; }
  .dp-mixture i { min-height: 28px; flex-basis: auto !important; }
  .dp-dedup-choice, .dp-score-row, .dp-attention-compare { grid-template-columns: 1fr; }
  .dp-dedup-choice em { text-align: center; }
}

/* Data-pipeline v2: single-column stages, architecture-first flows, and model-family comparison. */
.compact-topic.data-pipeline-topic .study-layout { grid-template-columns: minmax(165px,195px) minmax(0,1080px); }
.data-pipeline-topic .dp-visual { padding: clamp(1rem,2.6vw,1.8rem); }
.data-pipeline-topic .dp-stage,
.data-pipeline-topic .dp-ft-stage,
.data-pipeline-topic .dp-fw-stage,
.data-pipeline-topic .dp-edu > section { grid-template-columns: 48px minmax(0,1fr); align-items: start; padding: 1rem 1.1rem; }
.data-pipeline-topic .dp-stage h4,
.data-pipeline-topic .dp-ft-stage h4,
.data-pipeline-topic .dp-fw-stage h4,
.data-pipeline-topic .dp-edu h4 { font-size: .82rem; }
.data-pipeline-topic .dp-stage p,
.data-pipeline-topic .dp-ft-stage p,
.data-pipeline-topic .dp-fw-stage p,
.data-pipeline-topic .dp-edu p { font-size: .72rem; }
.data-pipeline-topic .study-article h3:first-of-type + ul > li:nth-child(even) { margin: -.15rem 0 .55rem 1.15rem; color: var(--study-muted); font-size: .86rem; }
.data-pipeline-topic .study-article h3:first-of-type + ul > li:nth-child(even)::marker { content: '↳  '; }
.dp-tech { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .35rem .65rem; margin-top: .62rem; border-top: 1px dashed var(--study-line); padding-top: .55rem; color: var(--study-muted); font: 650 .61rem/1.5 ui-monospace,monospace; }
.dp-tech b { color: var(--study-accent); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.dp-tech code { grid-column: 1 / -1; width: auto; margin: 0; }
.dp-callout, .dp-proof { margin-top: .55rem; border-left: 3px solid var(--study-accent); border-radius: 0 7px 7px 0; background: color-mix(in srgb,var(--study-accent-soft) 58%,transparent); padding: .42rem .55rem; color: var(--study-muted); font: 650 .61rem/1.5 ui-monospace,monospace; }
.dp-callout b { margin-right: .45rem; color: var(--study-accent); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.dp-proof b { color: var(--study-ink); }
.dp-terminal { display: flex; align-items: center; gap: .8rem; border: 2px solid var(--study-accent); border-radius: 12px; background: color-mix(in srgb,var(--study-accent-soft) 48%,var(--study-card)); padding: .8rem 1rem; }
.dp-terminal > b { flex: 0 0 auto; border-radius: 999px; background: var(--study-accent); padding: .32rem .58rem; color: var(--study-card); font: 850 .58rem/1 ui-monospace,monospace; letter-spacing: .08em; }
.dp-terminal > div { min-width: 0; }
.dp-terminal strong { display: block; color: var(--study-ink); font: 800 .68rem/1.5 ui-monospace,monospace; }
.dp-ft-input > div > span { display: block; margin-top: .38rem; color: var(--study-muted); font: 650 .6rem/1.5 ui-monospace,monospace; }
.dp-ft-input > div > span strong { display: inline; color: var(--study-accent); font-size: inherit; }
.data-pipeline-topic .dp-terminal code { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; border: 1px solid var(--study-line); border-radius: 6px; background: var(--study-code-bg); padding: .28rem .45rem; color: var(--study-code-ink); font: 650 .62rem/1.45 ui-monospace,monospace; }
.dp-ft-stage { border-left: 3px solid color-mix(in srgb,var(--study-accent) 55%,var(--study-line)); }
.dp-example-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; margin-top: .5rem; }
.dp-example-grid code { width: auto; margin: 0; }
.dp-formula { width: fit-content; max-width: 100%; margin-top: .55rem; border: 1px solid color-mix(in srgb,var(--study-accent) 45%,var(--study-line)); border-radius: 8px; background: color-mix(in srgb,var(--study-accent-soft) 55%,var(--study-card)); padding: .48rem .65rem; color: var(--study-ink); font: 750 .7rem/1.5 ui-monospace,monospace; }
.dp-numeric-projection { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: .4rem; margin-top: .55rem; }
.data-pipeline-topic .dp-numeric-projection code { width: auto; height: 100%; margin: 0; }
.dp-numeric-projection > strong { color: var(--study-accent); font: 900 .8rem/1 ui-monospace,monospace; }
.dp-fw-stage { border-left: 3px solid color-mix(in srgb,var(--study-accent) 45%,var(--study-line)); }
.dp-ablation-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: .6rem; }
.dp-ablation-pair i { border: 1px solid #dc6b32; border-radius: 9px; background: var(--study-card); padding: .5rem; color: var(--study-muted); font: 650 .6rem/1.45 ui-monospace,monospace; font-style: normal; text-align: center; }
.dp-ablation-pair i.is-good { border-color: var(--study-accent); background: color-mix(in srgb,var(--study-accent-soft) 35%,var(--study-card)); }
.dp-ablation-pair i b { color: var(--study-ink); }
.dp-ablation-pair em { color: var(--study-muted); font: 850 .55rem/1 ui-monospace,monospace; font-style: normal; }
.dp-edu > section { border-left: 3px solid color-mix(in srgb,#2563eb 45%,var(--study-line)); }
.dp-token-sequence, .dp-context-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: .3rem; margin-top: .55rem; }
.dp-token-sequence > *, .dp-context-row > * { display: grid; min-width: 56px; place-items: center; border: 1px solid var(--study-line); border-radius: 7px; background: var(--study-card); padding: .36rem .45rem; color: var(--study-muted); font: 750 .59rem/1.25 ui-monospace,monospace; font-style: normal; text-align: center; }
.dp-token-sequence > b, .dp-context-row > b { border: 2px solid var(--study-accent); background: var(--study-accent-soft); color: var(--study-accent); }
.dp-token-sequence small, .dp-context-row small { display: block; margin-top: .14rem; color: var(--study-muted); font-size: .47rem; }
.dp-freeze-tag, .dp-update-tag { display: inline-block; margin-top: .48rem; border-radius: 999px; padding: .25rem .48rem; font: 800 .56rem/1 ui-monospace,monospace; }
.dp-freeze-tag { background: color-mix(in srgb,#2563eb 13%,var(--study-card)); color: #2563eb; }
.dp-update-tag { background: var(--study-accent-soft); color: var(--study-accent); }
.dp-attention-mini { display: flex; align-items: center; gap: .65rem; margin-top: .55rem; }
.dp-attention-mini span { color: #2563eb; font: 800 .58rem/1.4 ui-monospace,monospace; }
.data-pipeline-topic .dp-attention-mini code { margin: 0; white-space: pre; }
.dp-cls-stage { border: 2px solid var(--study-accent) !important; background: color-mix(in srgb,var(--study-accent-soft) 38%,var(--study-card)) !important; }
.dp-backprop-flow { display: grid; justify-items: center; width: min(100%,390px); margin-top: .55rem; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: .65rem; font: 750 .62rem/1.4 ui-monospace,monospace; }
.dp-backprop-flow > b { color: var(--study-accent); }
.dp-backprop-flow span { display: grid; grid-template-columns: 1fr auto; width: min(100%,260px); gap: 1rem; border-top: 1px dashed var(--study-line); padding: .35rem 0; color: var(--study-ink); }
.dp-backprop-flow em { color: var(--study-accent); font-style: normal; }
.dp-backprop-flow i { color: var(--study-muted); font-style: normal; }
.dp-family-tree { border: 2px solid var(--study-accent); border-radius: 13px; background: color-mix(in srgb,var(--study-accent-soft) 40%,var(--study-card)); padding: .85rem; text-align: center; }
.dp-family-tree > strong { color: var(--study-ink); font: 850 .75rem/1.4 ui-monospace,monospace; }
.dp-family-tree > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: .7rem; }
.dp-family-tree span { display: grid; gap: .22rem; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .52rem; color: var(--study-muted); font: 700 .58rem/1.35 ui-monospace,monospace; }
.dp-family-tree span::before { color: var(--study-accent); content: '↓'; font-weight: 900; }
.dp-family-tree span b { color: var(--study-ink); }
.dp-family-tree small { color: var(--study-muted); font-size: .52rem; }
.dp-family-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin-top: .8rem; }
.dp-family-card { min-width: 0; border: 1px solid var(--study-line); border-radius: 13px; background: var(--study-card); padding: .8rem; }
.dp-family-card.is-transformer { border-top: 4px solid #7c3aed; }
.dp-family-card.is-bert { border-top: 4px solid #2563eb; }
.dp-family-card.is-gpt { border-top: 4px solid var(--study-accent); }
.dp-family-card header { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--study-line); padding-bottom: .55rem; }
.dp-family-card header b { color: var(--study-ink); font: 850 .63rem/1.3 ui-monospace,monospace; }
.dp-family-card header span { color: var(--study-muted); font: 700 .55rem/1.3 ui-monospace,monospace; }
.dp-arch-flow { display: grid; justify-items: stretch; gap: .28rem; margin-top: .65rem; text-align: center; }
.data-pipeline-topic .dp-arch-flow code { display: block; width: auto; margin: 0; padding: .38rem; }
.dp-arch-flow > b { color: var(--study-muted); font: 750 .55rem/1.4 ui-monospace,monospace; }
.dp-family-facts { display: grid; gap: .28rem; margin-top: .65rem; color: var(--study-muted); font: 650 .56rem/1.4 ui-monospace,monospace; }
.dp-family-facts span { border-left: 2px solid #7c3aed; padding-left: .38rem; }
.dp-bert-heads { display: grid; gap: .35rem; }
.dp-bert-heads span { display: grid; gap: .2rem; border: 1px solid var(--study-line); border-radius: 7px; padding: .42rem; color: var(--study-muted); font: 650 .55rem/1.35 ui-monospace,monospace; }
.dp-bert-heads span b { color: #2563eb; }
.dp-mask-grid { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .55rem; margin-top: .65rem; }
.data-pipeline-topic .dp-mask-grid code { margin: 0; white-space: pre; }
.dp-mask-grid span { color: var(--study-muted); font: 650 .56rem/1.45 ui-monospace,monospace; }

@media (max-width: 940px) {
  .compact-topic.data-pipeline-topic .study-layout { grid-template-columns: 175px minmax(0,1fr); }
  .dp-family-cards { grid-template-columns: 1fr; }
  .dp-family-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 .8rem; }
  .dp-family-card header { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .data-pipeline-topic .dp-stage,
  .data-pipeline-topic .dp-ft-stage,
  .data-pipeline-topic .dp-fw-stage,
  .data-pipeline-topic .dp-edu > section { grid-template-columns: 34px minmax(0,1fr); }
  .dp-tech, .dp-family-tree > div, .dp-family-card { grid-template-columns: 1fr; }
  .dp-tech code { grid-column: auto; }
  .dp-example-grid, .dp-ablation-pair, .dp-numeric-projection { grid-template-columns: 1fr; }
  .dp-numeric-projection > strong { transform: rotate(90deg); text-align: center; }
  .dp-ablation-pair em { text-align: center; }
  .dp-terminal { align-items: stretch; flex-direction: column; }
  .dp-terminal > b { width: fit-content; }
  .dp-family-card header { grid-column: auto; }
  .dp-mask-grid { grid-template-columns: 1fr; }
}

/* Minimal study navigation and compact, Silvia-style reading pages. */
.study-index { padding-top: 2.8rem; }
.study-index-heading { max-width: 760px; padding: 0 0 2.2rem; }
.study-index-heading h1 { margin: 0.35rem 0 0.45rem; color: var(--study-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -0.04em; }
.study-index-heading p:last-child { margin: 0; color: var(--study-muted); font-size: 0.95rem; }
.study-map { border-radius: 8px; padding: 1.2rem; }
.study-map-heading { display: block; margin-bottom: 1rem; }
.study-map-heading h2 { margin: 0.2rem 0 0; font-size: 1.45rem; }
.study-map-heading > p { max-width: none; font-size: 0.8rem; text-align: right; }
.study-map-heading > p.study-kicker { color: var(--study-accent); text-align: left; }
.topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.topic-card { min-height: 0; border-radius: 7px; padding: 0.95rem 1rem 1rem; transition: border-color 0.15s ease; }
.topic-card:hover { border-color: var(--study-accent); box-shadow: none; transform: none; }
.topic-card h3 { margin: 0 0 0.55rem; font-size: 1rem; }
.topic-card-live { border-color: color-mix(in srgb, var(--study-accent) 55%, var(--study-line)); }
.topic-subtopics { margin: 0; padding-left: 1rem; color: var(--study-muted); font-size: 0.83rem; line-height: 1.55; }
.topic-subtopics li { margin: 0.18rem 0; }
.topic-subtopics a { color: var(--study-accent); }
.topic-subtopics a:hover { text-decoration: underline; }
.topic-card-wide { grid-column: span 2; }
.topic-subtopics-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
.reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.reading-slot { display: block; min-height: 130px; border: 1px dashed var(--study-line); border-radius: 8px; background: var(--study-card); padding: 1rem; color: var(--study-ink); transition: border-color 0.15s ease; }
.reading-slot:hover { border-color: var(--study-accent); text-decoration: none; }
.reading-slot h2 { margin: 0 0 0.5rem; color: var(--study-ink); font: 500 1.15rem/1.2 Georgia, "Times New Roman", serif; }
.reading-slot p { margin: 0; color: var(--study-muted); font-size: 0.85rem; line-height: 1.6; }
.compact-topic { padding-top: 2.2rem; }
.compact-topic .study-layout { grid-template-columns: minmax(155px, 205px) minmax(0, 760px); }
.compact-topic .study-article { padding-top: 0; }
.topic-index-copy > p:not(.study-kicker) { max-width: 690px; color: var(--study-muted); }
.topic-index-copy h1 { margin-top: 0.25rem; }
.index-link-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.index-link-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; margin: 0; border-top: 1px solid var(--study-line); padding: 0.75rem 0; }
.index-link-list a { min-width: 210px; font-weight: 700; }
.index-link-list span { color: var(--study-muted); font-size: 0.88rem; }
.topic-subtopic-nav { border-left: 0; }
.topic-subtopic-nav a { border-left: 0; margin: 0; padding: 0.35rem 0; }

/* LR and annealing study artifacts */
.lr-annealing-topic .study-layout { grid-template-columns: minmax(165px, 195px) minmax(0, 960px); gap: clamp(2rem, 5vw, 4rem); }
.lr-visual { margin: 1.6rem 0 2.2rem; border: 1px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line)); border-radius: 16px; background: linear-gradient(145deg, var(--study-card), color-mix(in srgb, var(--study-accent-soft) 45%, var(--study-card))); padding: clamp(1rem, 2.7vw, 1.55rem); box-shadow: 0 18px 45px rgba(24, 34, 45, .06); }
.lr-visual figcaption { margin-bottom: 1rem; color: var(--study-accent); font: 800 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.lr-schedule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.lr-schedule-card { min-width: 0; border: 1px solid var(--study-line); border-radius: 12px; background: color-mix(in srgb, var(--study-card) 94%, transparent); padding: .85rem; }
.lr-schedule-card header { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.lr-schedule-card h4 { margin: 0; color: var(--study-ink); font: 800 .78rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
.lr-schedule-card header span { color: var(--study-muted); font: 650 .58rem/1.3 ui-monospace, monospace; text-align: right; }
.lr-wsd-card { grid-column: 1 / -1; border: 2px solid var(--study-accent); background: color-mix(in srgb, var(--study-accent-soft) 42%, var(--study-card)); }
.lr-chart { position: relative; height: 220px; overflow: hidden; border-radius: 9px; background: color-mix(in srgb, var(--study-panel) 78%, var(--study-card)); }
.lr-chart::before, .lr-chart::after { position: absolute; z-index: 1; content: ''; background: var(--study-muted); opacity: .5; }
.lr-chart::before { left: 7%; bottom: 18%; width: 88%; height: 1px; }
.lr-chart::after { left: 7%; top: 12%; bottom: 18%; width: 1px; }
.lr-grid { position: absolute; inset: 12% 5% 18% 7%; background-image: linear-gradient(to right, color-mix(in srgb, var(--study-line) 55%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--study-line) 55%, transparent) 1px, transparent 1px); background-size: 25% 100%, 100% 25%; }
.lr-segment { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); height: 4px; border-radius: 999px; background: var(--study-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--study-accent) 18%, transparent); transform: rotate(var(--a)); transform-origin: 0 50%; }
.lr-segment.lr-warm { background: var(--study-warm); }
.lr-segment.lr-decay { background: #7c3aed; }
.lr-segment.lr-tail { background: #dc6b32; }
.lr-chart small { position: absolute; z-index: 3; left: var(--x); top: var(--y); max-width: 130px; border-radius: 4px; background: color-mix(in srgb, var(--study-card) 88%, transparent); padding: .08rem .22rem; color: var(--study-muted); font: 700 .55rem/1.25 ui-monospace, monospace; }
.lr-y-label, .lr-x-label { position: absolute; z-index: 4; color: var(--study-muted); font: 700 .55rem/1 ui-monospace, monospace; }
.lr-y-label { top: 4%; left: 2%; }
.lr-x-label { right: 5%; bottom: 5%; }
.lr-visual-note { margin: 1rem 0 0; border-top: 1px solid var(--study-line); padding-top: .8rem; color: var(--study-muted); font-size: .78rem; line-height: 1.6; }
.lr-visual-note strong { color: var(--study-ink); }
.lr-use-case { border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb, var(--study-card) 94%, transparent); padding: 1rem; }
.lr-use-case + .lr-use-case { margin-top: .9rem; }
.lr-use-case header { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .65rem; margin-bottom: .9rem; }
.lr-use-case header span { border-radius: 999px; background: var(--study-accent-soft); padding: .2rem .45rem; color: var(--study-accent); font: 800 .55rem/1.2 ui-monospace, monospace; }
.lr-use-case header h4 { margin: 0; color: var(--study-ink); font: 800 .8rem/1.3 ui-monospace, monospace; }
.lr-use-case header strong { color: var(--study-muted); font: 700 .58rem/1.3 ui-monospace, monospace; }
.lr-pipeline, .lr-fork { display: flex; align-items: stretch; gap: .45rem; }
.lr-pipeline > i, .lr-fork > i, .lr-kimi-data > i, .lr-case-timeline > i, .lr-case-callout > i { align-self: center; color: var(--study-accent); font: 900 1rem/1 ui-monospace, monospace; }
.lr-stage { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .68rem; text-align: center; }
.lr-stage b { color: var(--study-ink); font: 800 .64rem/1.3 ui-monospace, monospace; }
.lr-stage small { margin-top: .28rem; color: var(--study-muted); font-size: .55rem; line-height: 1.45; }
.lr-stage.is-tail, .lr-kimi-data .is-tail { border: 2px solid #7c3aed; background: color-mix(in srgb, #ede9fe 50%, var(--study-card)); }
.lr-stage.is-output { border-color: var(--study-accent); background: var(--study-accent-soft); }
.lr-data-strip { display: flex; overflow: hidden; height: 30px; margin-top: .65rem; border-radius: 7px; }
.lr-data-strip span { display: grid; flex-basis: var(--share); place-items: center; background: color-mix(in srgb, var(--study-accent) 18%, var(--study-card)); color: var(--study-ink); font: 750 .54rem/1 ui-monospace, monospace; }
.lr-data-strip span + span { background: color-mix(in srgb, #7c3aed 24%, var(--study-card)); }
.lr-fork { align-items: center; }
.lr-branches { display: grid; min-width: 280px; gap: .45rem; }
.lr-branches > div { display: grid; grid-template-columns: 92px 1fr 1fr; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); padding: .55rem; }
.lr-branches .is-candidate { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.lr-branches b, .lr-branches span, .lr-branches small { font: 700 .55rem/1.35 ui-monospace, monospace; }
.lr-branches b { color: var(--study-ink); }
.lr-branches span { color: var(--study-accent); }
.lr-branches small { color: var(--study-muted); }
.lr-metric-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-top: .65rem; }
.lr-metric-row span { border-top: 2px solid var(--study-accent); padding-top: .35rem; color: var(--study-muted); font: 700 .55rem/1.3 ui-monospace, monospace; text-align: center; }
.lr-case-timeline { display: flex; align-items: stretch; gap: .45rem; }
.lr-case-timeline section { display: flex; min-width: 0; flex: var(--basis) 1 1; flex-direction: column; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: .85rem; }
.lr-case-timeline section.is-context, .lr-kimi-data .is-context { border-color: var(--study-accent); background: var(--study-accent-soft); }
.lr-case-timeline section.is-tail { border: 2px solid #7c3aed; background: color-mix(in srgb, #ede9fe 45%, var(--study-card)); }
.lr-case-timeline b, .lr-case-timeline strong, .lr-case-timeline small { display: block; }
.lr-case-timeline b { color: var(--study-muted); font: 750 .58rem/1.3 ui-monospace, monospace; }
.lr-case-timeline strong { margin: .35rem 0; color: var(--study-ink); font: 850 .8rem/1.25 ui-monospace, monospace; }
.lr-case-timeline small { color: var(--study-muted); font-size: .57rem; line-height: 1.55; }
.lr-case-callout { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .75rem; border: 1px dashed var(--study-accent); border-radius: 9px; background: color-mix(in srgb, var(--study-accent-soft) 38%, var(--study-card)); padding: .7rem; color: var(--study-muted); font: 700 .56rem/1.4 ui-monospace, monospace; text-align: center; }
.lr-case-callout b, .lr-case-callout strong { color: var(--study-ink); }
.lr-kimi-curve .lr-chart { height: 280px; }
.lr-kimi-data { display: flex; align-items: stretch; gap: .45rem; margin-top: .8rem; }
.lr-kimi-data section { display: flex; min-width: 0; flex: 1; flex-direction: column; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .75rem; text-align: center; }
.lr-kimi-data b, .lr-kimi-data span, .lr-kimi-data small { display: block; }
.lr-kimi-data b { color: var(--study-ink); font: 800 .65rem/1.3 ui-monospace, monospace; }
.lr-kimi-data span { margin-top: .28rem; color: var(--study-accent); font: 700 .56rem/1.4 ui-monospace, monospace; }
.lr-kimi-data small { margin-top: .25rem; color: var(--study-muted); font-size: .53rem; line-height: 1.45; }

@media (max-width: 820px) {
  .lr-annealing-topic .study-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 2rem; }
  .lr-schedule-grid { grid-template-columns: 1fr; }
  .lr-wsd-card { grid-column: auto; }
  .lr-pipeline, .lr-fork, .lr-case-timeline, .lr-kimi-data { flex-direction: column; }
  .lr-pipeline > i, .lr-fork > i, .lr-kimi-data > i, .lr-case-timeline > i { transform: rotate(90deg); }
  .lr-branches { width: 100%; min-width: 0; }
  .lr-case-callout { flex-wrap: wrap; }
}

@media (max-width: 680px) {
  .study-index { padding-top: 1.8rem; }
  .topic-grid { grid-template-columns: 1fr; }
  .topic-card-wide { grid-column: span 1; }
  .topic-subtopics-columns { grid-template-columns: 1fr; }
  .reading-grid { grid-template-columns: 1fr; }
  .study-map { padding: 0.9rem; }
  .study-map-heading > p { text-align: left; }
  .compact-topic { padding-top: 1.4rem; }
  .index-link-list a { min-width: 170px; }
  .lr-annealing-topic .study-layout { display: block; }
  .lr-chart { height: 200px; }
  .lr-use-case header { grid-template-columns: auto 1fr; }
  .lr-use-case header strong { grid-column: 1 / -1; }
  .lr-branches > div { grid-template-columns: 1fr; gap: .2rem; text-align: center; }
  .lr-metric-row { grid-template-columns: repeat(2, 1fr); }
  .lr-kimi-curve .lr-chart { height: 240px; }
}

/* Distillation: large vertical teaching artifacts with expandable data contracts. */
.compact-topic.distillation-topic .study-layout { grid-template-columns: minmax(170px, 205px) minmax(0, 980px); gap: clamp(2rem, 5vw, 4rem); }
.distill-visual { margin: 1.7rem 0 2.4rem; border: 1px solid color-mix(in srgb, var(--study-accent) 48%, var(--study-line)); border-radius: 20px; background: linear-gradient(155deg, color-mix(in srgb, var(--study-panel) 82%, var(--study-card)), var(--study-card)); padding: clamp(1rem, 3vw, 1.8rem); box-shadow: 0 20px 48px rgba(24,34,45,.08); }
.distill-visual figcaption { margin-bottom: 1.15rem; color: var(--study-ink); font: 850 clamp(.95rem, 1.8vw, 1.16rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; }
.distill-visual h4, .distill-visual p { margin: 0; }
.distill-visual h4 { color: var(--study-ink); font: 850 clamp(.9rem, 1.5vw, 1.08rem)/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.distill-visual p, .distill-visual span, .distill-visual small { color: var(--study-muted); font-size: clamp(.76rem, 1.2vw, .9rem); line-height: 1.55; }
.distill-visual code { display: block; margin: .38rem 0; border: 0; border-radius: 7px; background: color-mix(in srgb, var(--study-panel) 72%, transparent); padding: .5rem .65rem; color: var(--study-ink); font-size: clamp(.75rem, 1.2vw, .9rem); line-height: 1.5; }
.distill-axis { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-bottom: .75rem; border-radius: 999px; background: color-mix(in srgb, var(--study-accent-soft) 58%, var(--study-card)); padding: .45rem .8rem; }
.distill-axis span { color: var(--study-accent); font: 850 .7rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-align: center; }
.distill-stage { display: grid; grid-template-columns: 56px minmax(0,1fr); align-items: center; gap: 1rem; border: 1px solid var(--study-line); border-left: 5px solid var(--study-accent); border-radius: 15px; background: color-mix(in srgb, var(--study-card) 96%, transparent); padding: 1rem 1.15rem; }
.distill-stage > b { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: var(--study-accent-soft); color: var(--study-accent); font: 900 .82rem/1 ui-monospace, monospace; }
.distill-stage p { margin-top: .3rem; }
.distill-stage.is-student, .distill-stage.is-opd { border-left-color: #7c3aed; }
.distill-stage.is-student > b, .distill-stage.is-opd > b { background: color-mix(in srgb, #ede9fe 68%, var(--study-card)); color: #6d28d9; }
.distill-stage.is-update, .distill-stage.is-general { border-left-color: #059669; }
.distill-stage.is-update > b, .distill-stage.is-general > b { background: color-mix(in srgb, #d1fae5 65%, var(--study-card)); color: #047857; }
.distill-arrow { margin: .45rem 0; color: var(--study-accent); font: 850 .78rem/1.4 ui-monospace, monospace; text-align: center; }
.distill-model-pair { display: grid; grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr); align-items: stretch; gap: .8rem; }
.distill-model-card { display: flex; min-width: 0; flex-direction: column; border: 2px solid var(--study-line); border-radius: 15px; background: var(--study-card); padding: 1rem; }
.distill-model-card small { color: var(--study-accent); font: 900 .64rem/1.2 ui-monospace, monospace; letter-spacing: .1em; }
.distill-model-card h4 { margin-top: .3rem; }
.distill-model-card.is-student { border-color: #7c3aed; }
.distill-model-card.is-teacher { border-color: #059669; }
.distill-same-state { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--study-accent); border-radius: 15px; background: var(--study-accent-soft); padding: .8rem; text-align: center; }
.distill-same-state strong { color: var(--study-ink); font: 900 .9rem/1.25 ui-monospace, monospace; }
.distill-signal-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.distill-signal-card { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--study-line); border-top: 5px solid var(--study-accent); border-radius: 14px; background: var(--study-card); padding: 1rem; }
.distill-signal-card > b { align-self: flex-start; margin-bottom: .55rem; border-radius: 9px; background: var(--study-accent-soft); padding: .4rem .65rem; color: var(--study-accent); font: 950 1.1rem/1 ui-monospace, monospace; }
.distill-signal-card.is-topk { border-top-color: #7c3aed; }
.distill-signal-card.is-one { border-top-color: #dc6b32; }
.distill-loop { margin-top: .75rem; border: 1px dashed color-mix(in srgb, #7c3aed 65%, var(--study-line)); border-radius: 12px; background: color-mix(in srgb, #ede9fe 42%, var(--study-card)); padding: .75rem; color: var(--study-ink); font: 800 .8rem/1.4 ui-monospace, monospace; text-align: center; }
.distill-lane-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1rem 0 .75rem; border-bottom: 2px solid var(--study-accent); padding: 0 .2rem .55rem; }
.distill-lane-label strong { color: var(--study-accent); font: 900 .74rem/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.distill-lane-label.is-student { margin-top: 1.5rem; border-color: #7c3aed; }
.distill-lane-label.is-student strong { color: #6d28d9; }
.qwen-stage.is-cold { border-left-color: #0ea5e9; }
.qwen-stage.is-rl { border-left-color: #dc6b32; }
.qwen-stage.is-fusion { border-left-color: #7c3aed; }
.qwen-stage.is-offpolicy { border-left-color: #2563eb; }
.distill-teacher-badge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; margin: .8rem auto 0; border: 2px solid #059669; border-radius: 14px; background: color-mix(in srgb, #d1fae5 52%, var(--study-card)); padding: .8rem 1rem; }
.distill-teacher-badge span { color: #047857; font: 900 .68rem/1.2 ui-monospace, monospace; letter-spacing: .1em; }
.distill-teacher-badge strong { color: var(--study-ink); font: 900 .95rem/1.3 ui-monospace, monospace; }
.distill-qwen-result { margin-top: .85rem; border: 2px solid var(--study-accent); border-radius: 16px; background: var(--study-accent-soft); padding: 1rem; text-align: center; }
.distill-qwen-result strong, .distill-qwen-result span { display: block; }
.distill-qwen-result strong { color: var(--study-ink); font: 900 1.05rem/1.35 ui-monospace, monospace; }

@media (max-width: 760px) {
  .compact-topic.distillation-topic .study-layout { display: block; }
  .distill-axis { display: none; }
  .distill-model-pair, .distill-signal-grid { grid-template-columns: 1fr; }
  .distill-same-state { min-height: 84px; }
  .distill-teacher-badge { grid-template-columns: 1fr; text-align: center; }
  .distill-lane-label { align-items: flex-start; flex-direction: column; gap: .25rem; }
}

@media (max-width: 480px) {
  .distill-visual { padding: .8rem; }
  .distill-stage { grid-template-columns: 44px minmax(0,1fr); gap: .7rem; padding: .8rem; }
  .distill-stage > b { width: 40px; height: 40px; }
}

/* Eval & Benchmarks: large HTML/CSS teaching illustrations. */
.compact-topic.eval-topic .study-layout { grid-template-columns: minmax(165px, 195px) minmax(0, 900px); gap: clamp(2rem, 5vw, 4rem); }
.eval-visual { margin: 1.5rem 0 2rem; border: 1px solid var(--study-line); border-radius: 18px; background: color-mix(in srgb, var(--study-panel) 74%, var(--study-card)); padding: clamp(1rem, 2.5vw, 1.6rem); box-shadow: 0 16px 38px rgba(24,34,45,.07); }
.eval-visual figcaption { margin-bottom: 1.2rem; color: var(--study-ink); font: 800 clamp(.78rem, 1.5vw, .96rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; }
.eval-visual h4, .eval-visual p { margin: 0; }
.eval-visual code { display: block; border: 0; background: color-mix(in srgb, var(--study-panel) 65%, transparent); padding: .4rem .55rem; color: var(--study-ink); font-size: .68rem; line-height: 1.45; }
.eval-arrow { display: block; margin: .28rem 0; color: var(--study-accent); font: 850 .72rem/1.2 ui-monospace, monospace; text-align: center; }
.eval-note { margin: 1rem 0 0 !important; border-top: 1px solid var(--study-line); padding-top: .9rem; color: var(--study-muted) !important; font-size: .78rem !important; line-height: 1.6 !important; }
.eval-design-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; align-items: start; gap: 1rem; }
.eval-stage { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .75rem; border: 1px solid var(--study-line); border-radius: 12px; background: var(--study-card); padding: .8rem; }
.eval-stage.is-claim { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.eval-stage.is-decision { border: 2px solid #7c3aed; background: color-mix(in srgb, #ede9fe 45%, var(--study-card)); }
.eval-stage-index { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: var(--study-ink); color: var(--study-card); font: 850 .66rem/1 ui-monospace, monospace; }
.eval-stage h4 { color: var(--study-ink); font: 820 .8rem/1.25 ui-monospace, monospace; }
.eval-stage p { margin: .22rem 0 .4rem; color: var(--study-muted); font-size: .7rem; line-height: 1.5; }
.eval-design-questions { position: sticky; top: 6rem; border: 1px solid var(--study-line); border-radius: 13px; background: var(--study-card); padding: .9rem; }
.eval-design-questions h4 { color: var(--study-accent); font: 850 .75rem/1.3 ui-monospace, monospace; }
.eval-design-questions ol { margin: .7rem 0 0; padding: 0; list-style: none; }
.eval-design-questions li { display: flex; flex-direction: column; margin: 0 !important; border-top: 1px solid var(--study-line); padding: .55rem 0; font-size: .68rem !important; }
.eval-design-questions li b { color: var(--study-ink); font: 800 .66rem/1.3 ui-monospace, monospace; }
.eval-design-questions li span { margin-top: .18rem; color: var(--study-muted); line-height: 1.45; }

.mmlu-map { display: grid; grid-template-columns: 1.05fr auto 1fr auto 1.15fr auto 1fr auto 1fr; align-items: stretch; gap: .35rem; }
.mmlu-map > i { align-self: center; color: var(--study-accent); font-style: normal; font-weight: 900; }
.mmlu-map section { display: flex; min-width: 0; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .65rem; text-align: center; }
.mmlu-map section > span, .video-axis header b { color: var(--study-accent); font: 850 .53rem/1.2 ui-monospace, monospace; letter-spacing: .08em; }
.mmlu-map section b { margin: .35rem 0; color: var(--study-ink); font: 800 .66rem/1.3 ui-monospace, monospace; }
.mmlu-map section small { color: var(--study-muted); font-size: .54rem; line-height: 1.4; }
.mmlu-map .is-question { border: 2px solid var(--study-accent); }
.mmlu-question { display: grid; grid-template-columns: repeat(4, 1fr); gap: .18rem; margin-bottom: .35rem; }
.mmlu-question code { padding: .25rem; text-align: center; }
.mmlu-question .is-picked { background: var(--study-accent); color: #fff; }
.mmlu-map .is-score { background: var(--study-accent-soft); }
.mm-report { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .7rem; }
.mm-report b { border-top: 3px solid var(--study-accent); background: var(--study-card); padding: .5rem; color: var(--study-muted); font: 750 .57rem/1.4 ui-monospace, monospace; text-align: center; }

.judge-input, .agent-task, .rb-prompt { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .8rem; border: 2px solid var(--study-accent); border-radius: 12px; background: var(--study-accent-soft); padding: .8rem; }
.judge-input > span, .agent-task > span, .rb-prompt > span { display: grid; place-items: center; border-radius: 8px; background: var(--study-accent); color: #fff; font: 850 .62rem/1.2 ui-monospace, monospace; text-align: center; }
.judge-input h4, .agent-task b, .rb-prompt b { color: var(--study-ink); font: 800 .76rem/1.35 ui-monospace, monospace; }
.judge-input code { margin-top: .35rem; }
.judge-answers, .judge-branches, .agent-graders, .rb-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.judge-answers section, .rb-pair section { border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .75rem; }
.judge-answers span, .rb-pair span { color: var(--study-accent); font: 850 .56rem/1.3 ui-monospace, monospace; }
.judge-answers p { margin-top: .35rem; color: var(--study-muted); font-size: .68rem; line-height: 1.5; }
.judge-branches > section { display: flex; flex-direction: column; border: 1px solid var(--study-line); border-radius: 14px; background: var(--study-card); padding: .9rem; }
.judge-branches header { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
.judge-branches header b { color: var(--study-ink); font: 850 .72rem/1.3 ui-monospace, monospace; }
.judge-branches header small { color: var(--study-muted); font: 700 .54rem/1.3 ui-monospace, monospace; }
.judge-turn, .judge-rubric { border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-panel); padding: .62rem; color: var(--study-ink); font: 750 .62rem/1.4 ui-monospace, monospace; text-align: center; }
.judge-branches section > i { padding: .35rem; color: var(--study-accent); font: 800 .56rem/1 ui-monospace, monospace; text-align: center; }
.judge-branches section > strong { margin-top: .55rem; border-radius: 8px; background: var(--study-accent-soft); padding: .5rem; color: var(--study-accent); font: 820 .6rem/1.3 ui-monospace, monospace; text-align: center; }
.judge-votes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; }
.judge-votes code { text-align: center; }
.judge-calibration { border: 2px solid #7c3aed; border-radius: 12px; background: color-mix(in srgb, #ede9fe 42%, var(--study-card)); padding: .8rem; }
.judge-calibration > span { color: #7c3aed; font: 850 .57rem/1.2 ui-monospace, monospace; }
.judge-calibration > div { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .5rem; color: var(--study-ink); font: 750 .62rem/1.3 ui-monospace, monospace; }
.judge-calibration i { color: #7c3aed; font-style: normal; }
.judge-bias-lab { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; border: 1px dashed var(--study-accent); border-radius: 12px; padding: .75rem; }
.judge-bias-lab h4 { grid-column: 1/-1; color: var(--study-ink); font: 820 .7rem/1.3 ui-monospace, monospace; }
.judge-bias-lab div { display: flex; flex-direction: column; background: var(--study-card); padding: .55rem; text-align: center; }
.judge-bias-lab b { color: var(--study-accent); font: 780 .56rem/1.3 ui-monospace, monospace; }
.judge-bias-lab small { margin-top: .2rem; color: var(--study-muted); font-size: .52rem; }

.agent-task small { display: block; margin-top: .3rem; color: var(--study-muted); font-size: .6rem; line-height: 1.4; }
.agent-trials { display: grid; gap: .55rem; }
.agent-trials section { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: .6rem; border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .65rem; }
.agent-trials section > span { display: grid; place-items: center; border-radius: 7px; background: var(--study-panel); color: var(--study-accent); font: 850 .55rem/1.2 ui-monospace, monospace; }
.agent-loop { display: flex; align-items: center; gap: .35rem; overflow-x: auto; }
.agent-loop b, .agent-loop i { white-space: nowrap; font: 750 .57rem/1.3 ui-monospace, monospace; }
.agent-loop i { color: var(--study-muted); font-style: normal; }
.agent-loop code { flex: 0 0 auto; }
.agent-graders { grid-template-columns: repeat(3, 1fr); }
.agent-graders section { display: flex; flex-direction: column; border: 1px solid var(--study-line); border-top: 4px solid var(--study-accent); border-radius: 10px; background: var(--study-card); padding: .7rem; text-align: center; }
.agent-graders .is-model { border-top-color: #7c3aed; }
.agent-graders .is-human { border-top-color: #dc6b32; }
.agent-graders b, .agent-graders strong { font: 800 .6rem/1.3 ui-monospace, monospace; }
.agent-graders b { color: var(--study-muted); }
.agent-graders strong { margin-top: .25rem; color: var(--study-ink); }
.agent-graders small { margin-top: .25rem; color: var(--study-muted); font-size: .54rem; line-height: 1.4; }
.agent-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.agent-metrics div { display: flex; flex-direction: column; border-radius: 9px; background: var(--study-ink); padding: .65rem; text-align: center; }
.agent-metrics b { color: color-mix(in srgb, var(--study-card) 72%, var(--study-muted)); font: 700 .54rem/1.3 ui-monospace, monospace; }
.agent-metrics strong { margin-top: .2rem; color: var(--study-card); font: 820 .65rem/1.3 ui-monospace, monospace; }

.mm-original { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: .5rem; }
.mm-frame { display: flex; min-height: 116px; flex-direction: column; justify-content: space-between; border: 1px solid var(--study-line); border-radius: 10px; background: linear-gradient(145deg, #bed8e6, #708ea2); padding: .65rem; color: #10222d; }
.mm-frame.is-key { outline: 4px solid color-mix(in srgb, var(--study-accent) 68%, transparent); }
.mm-frame span { font: 850 .55rem/1.2 ui-monospace, monospace; }
.mm-frame b { align-self: center; font: 800 .66rem/1.3 ui-monospace, monospace; }
.mm-original > section { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: .75rem; }
.mm-original section b { color: var(--study-muted); font: 750 .56rem/1.2 ui-monospace, monospace; }
.mm-original section p { margin: .4rem 0; color: var(--study-ink); font-size: .7rem; line-height: 1.45; }
.mm-original section strong { color: var(--study-accent); font: 820 .66rem/1.3 ui-monospace, monospace; }
.mm-controls { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.mm-controls section { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .6rem; text-align: center; }
.mm-controls b, .mm-controls strong { font: 800 .54rem/1.3 ui-monospace, monospace; }
.mm-controls b { color: var(--study-ink); }
.mm-controls small { margin: .28rem 0; color: var(--study-muted); font-size: .5rem; line-height: 1.35; }
.mm-controls strong { color: var(--study-accent); }

.video-mme-numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.video-mme-numbers section { display: flex; flex-direction: column; border-radius: 12px; background: var(--study-ink); padding: .8rem; text-align: center; }
.video-mme-numbers strong { color: var(--study-card); font: 850 1rem/1.2 ui-monospace, monospace; }
.video-mme-numbers span { margin-top: .2rem; color: color-mix(in srgb, var(--study-card) 70%, var(--study-muted)); font: 700 .54rem/1.3 ui-monospace, monospace; }
.video-axis { display: grid; grid-template-columns: 130px minmax(0,1fr); align-items: center; gap: .75rem; margin-top: .55rem; border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .75rem; }
.video-axis header { display: flex; flex-direction: column; }
.video-axis header small { margin-top: .25rem; color: var(--study-muted); font-size: .5rem; line-height: 1.3; }
.video-axis > div { display: flex; align-items: center; gap: .35rem; }
.video-axis > div > span, .video-axis > div > strong { flex: 1; border-radius: 7px; background: var(--study-panel); padding: .5rem; color: var(--study-ink); font: 720 .54rem/1.35 ui-monospace, monospace; text-align: center; }
.video-axis > div > strong { background: var(--study-accent-soft); color: var(--study-accent); }
.video-axis > div > i { color: var(--study-accent); font-style: normal; font-weight: 900; }
.duration-line { position: relative; justify-content: space-between; padding-top: 1.2rem; }
.duration-line i { position: absolute; top: .4rem; left: 4%; width: 92%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--study-accent), #7c3aed, #dc6b32); }

.rb-pair .is-chosen { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.rb-pair .is-rejected { border: 2px solid #dc6b32; background: color-mix(in srgb, #ffedd5 45%, var(--study-card)); }
.rb-pair code { margin: .5rem 0; font-size: .8rem; text-align: center; }
.rb-pair small { display: block; color: var(--study-muted); font-size: .58rem; line-height: 1.4; text-align: center; }
.rb-score { display: flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid var(--study-line); border-radius: 11px; background: var(--study-card); padding: .8rem; }
.rb-score code { font-size: .72rem; }
.rb-score strong { color: var(--study-accent); font-size: 1rem; }
.rb-score b { color: var(--study-accent); font: 820 .65rem/1.3 ui-monospace, monospace; }
.rb-slices { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; margin-top: .7rem; }
.rb-slices section { display: flex; flex-direction: column; border-top: 4px solid var(--study-accent); background: var(--study-card); padding: .6rem; text-align: center; }
.rb-slices b { color: var(--study-ink); font: 820 .56rem/1.3 ui-monospace, monospace; }
.rb-slices span { margin-top: .25rem; color: var(--study-muted); font-size: .51rem; line-height: 1.4; }

.judge-gold { display: flex; align-items: stretch; gap: .45rem; }
.judge-gold section { display: flex; min-width: 0; flex: 1; flex-direction: column; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: .7rem; text-align: center; }
.judge-gold .is-judge { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.judge-gold > i { align-self: center; color: var(--study-accent); font-style: normal; font-weight: 900; }
.judge-gold span { color: var(--study-muted); font: 760 .53rem/1.3 ui-monospace, monospace; }
.judge-gold b { margin-top: .25rem; color: var(--study-ink); font: 800 .61rem/1.35 ui-monospace, monospace; }
.confusion { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: .25rem; width: min(100%, 520px); margin: .9rem auto; }
.confusion header, .confusion > div { display: contents; }
.confusion span, .confusion b, .confusion strong { display: grid; min-height: 42px; place-items: center; border-radius: 6px; background: var(--study-card); color: var(--study-muted); font: 750 .58rem/1.3 ui-monospace, monospace; }
.confusion header b, .confusion > div > b { background: var(--study-panel); color: var(--study-ink); }
.confusion strong { background: var(--study-accent-soft); color: var(--study-accent); }
.confusion .is-risk { background: color-mix(in srgb, #ffedd5 55%, var(--study-card)); color: #c2410c; }
.judge-stress { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
.judge-stress section { display: flex; flex-direction: column; border-top: 4px solid #7c3aed; background: var(--study-card); padding: .6rem; }
.judge-stress b { color: var(--study-ink); font: 800 .54rem/1.3 ui-monospace, monospace; }
.judge-stress code { margin-top: .3rem; font-size: .54rem; }

@media (max-width: 900px) {
  .compact-topic.eval-topic .study-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 2rem; }
  .eval-design-grid { grid-template-columns: 1fr; }
  .eval-design-questions { position: static; }
  .mmlu-map { grid-template-columns: 1fr; }
  .mmlu-map > i { transform: rotate(90deg); text-align: center; }
  .mm-controls { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .compact-topic.eval-topic .study-layout { display: block; }
  .eval-visual { border-radius: 12px; padding: .8rem; }
  .judge-answers, .judge-branches, .rb-pair { grid-template-columns: 1fr; }
  .judge-bias-lab, .mm-report, .agent-metrics, .video-mme-numbers, .rb-slices, .judge-stress { grid-template-columns: repeat(2, 1fr); }
  .agent-graders { grid-template-columns: 1fr; }
  .mm-original { grid-template-columns: repeat(3, 1fr); }
  .mm-original > section { grid-column: 1 / -1; }
  .mm-controls { grid-template-columns: 1fr; }
  .video-axis { grid-template-columns: 1fr; }
  .video-axis > div { flex-wrap: wrap; }
  .judge-gold { flex-direction: column; }
  .judge-gold > i { transform: rotate(90deg); }
  .judge-calibration > div, .rb-score { flex-wrap: wrap; }
}

/* Vision-language models: large worked diagrams + original CS336 lecture visuals. */
.compact-topic.vlm-topic .study-layout { grid-template-columns: minmax(175px, 205px) minmax(0, 1040px); gap: clamp(2rem, 4.5vw, 4.5rem); }
.vlm-visual, .vlm-source-figure { margin: 1.65rem 0 2.35rem; border: 1px solid color-mix(in srgb, var(--study-accent) 38%, var(--study-line)); border-radius: 18px; background: linear-gradient(145deg, var(--study-card), color-mix(in srgb, var(--study-accent-soft) 36%, var(--study-card))); padding: clamp(1rem, 2.6vw, 1.6rem); box-shadow: 0 18px 46px rgba(24,34,45,.07); }
.vlm-visual figcaption, .vlm-source-figure figcaption { margin-bottom: 1.15rem; color: var(--study-ink); font: 820 clamp(.76rem, 1.45vw, .98rem)/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.vlm-source-figure { overflow: hidden; background: var(--study-card); }
.vlm-source-figure figcaption a { color: var(--study-accent); }
.vlm-source-figure > a { display: block; overflow: auto; border-radius: 12px; background: #fff; }
.vlm-source-figure img { display: block; width: 100%; min-width: min(100%, 720px); height: auto; max-height: 960px; margin: 0 auto; object-fit: contain; }
.vlm-example-banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .42rem; margin-bottom: 1rem; border-radius: 10px; background: var(--study-ink); padding: .65rem; }
.vlm-example-banner b { color: var(--study-card); font: 850 .57rem/1.2 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
.vlm-example-banner span { border-radius: 999px; background: color-mix(in srgb, var(--study-card) 13%, transparent); padding: .28rem .55rem; color: color-mix(in srgb, var(--study-card) 80%, var(--study-muted)); font: 720 .54rem/1.2 ui-monospace, monospace; }
.vlm-flow-column { display: flex; align-items: center; flex-direction: column; }
.vlm-flow-column > i, .vlm-two-streams section > i, .vlm-generation-row > i, .vlm-format-replacement > i { padding: .38rem; color: var(--study-accent); font: 850 .58rem/1.2 ui-monospace, monospace; font-style: normal; text-align: center; }
.vlm-stage { display: grid; width: min(100%, 680px); grid-template-columns: 48px minmax(0,1fr); gap: .8rem; align-items: center; border: 1px solid var(--study-line); border-left: 5px solid var(--study-accent); border-radius: 12px; background: var(--study-card); padding: .78rem .9rem; }
.vlm-stage > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; background: var(--study-ink); color: var(--study-card); font: 850 .58rem/1 ui-monospace, monospace; }
.vlm-stage > div { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(150px, .8fr) minmax(170px, 1.4fr); align-items: center; gap: .7rem; }
.vlm-stage strong { color: var(--study-ink); font: 820 .68rem/1.3 ui-monospace, monospace; }
.vlm-stage code { border: 0; background: var(--study-panel); padding: .38rem; color: var(--study-accent); font-size: .61rem; text-align: center; }
.vlm-stage small { color: var(--study-muted); font-size: .56rem; line-height: 1.45; }
.vlm-stage.is-input { border-left-color: #dc6b32; }
.vlm-stage.is-vision { border-left-color: #2563eb; background: color-mix(in srgb, #dbeafe 28%, var(--study-card)); }
.vlm-stage.is-transformer { border-left-color: #7c3aed; background: color-mix(in srgb, #ede9fe 28%, var(--study-card)); }
.vlm-stage.is-projector { border-left-color: #059669; background: color-mix(in srgb, #d1fae5 28%, var(--study-card)); }
.vlm-stage.is-text { border-left-color: #d97706; }
.vlm-branch-label { margin: .8rem 0 .45rem; color: var(--study-accent); font: 850 .57rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.vlm-output-branches, .vlm-loss-nodes, .vlm-loss-compare, .vlm-training-stages { display: flex; align-items: stretch; justify-content: center; gap: .7rem; width: 100%; }
.vlm-output-branches section, .vlm-loss-node, .vlm-loss-compare section, .vlm-training-stages section { display: flex; min-width: 0; flex: 1; flex-direction: column; border: 1px solid var(--study-line); border-top: 4px solid var(--study-accent); border-radius: 10px; background: var(--study-card); padding: .7rem; text-align: center; }
.vlm-output-branches b, .vlm-loss-node b, .vlm-loss-compare b, .vlm-training-stages b { color: var(--study-ink); font: 820 .61rem/1.3 ui-monospace, monospace; }
.vlm-output-branches code, .vlm-loss-node code, .vlm-loss-compare code { margin: .35rem 0; border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .58rem; }
.vlm-output-branches span, .vlm-loss-node span, .vlm-loss-compare span, .vlm-training-stages span { color: var(--study-muted); font-size: .54rem; line-height: 1.4; }
.vlm-visual-note { margin: 1rem 0 0 !important; border-top: 1px solid var(--study-line); padding-top: .85rem; color: var(--study-muted) !important; font-size: .72rem !important; line-height: 1.55 !important; text-align: center; }
.vlm-patch-worked { display: grid; grid-template-columns: minmax(220px,.9fr) auto minmax(170px,.7fr) auto minmax(170px,.7fr); align-items: center; gap: .7rem; }
.vlm-patch-worked > section { text-align: center; }
.vlm-patch-worked > i { color: var(--study-accent); font: 850 .56rem/1.4 ui-monospace, monospace; font-style: normal; text-align: center; }
.vlm-image-grid { display: grid; aspect-ratio: 1; grid-template-columns: repeat(4,1fr); overflow: hidden; border: 5px solid var(--study-ink); border-radius: 12px; background: linear-gradient(135deg,#bfd6e8,#f4c7a1); }
.vlm-patch { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.9); padding: .28rem; color: #13232d; text-align: left; }
.vlm-patch b { font: 850 .55rem/1 ui-monospace, monospace; }
.vlm-patch small { align-self: flex-end; font: 750 .47rem/1 ui-monospace, monospace; }
.vlm-patch.is-focus { z-index: 1; outline: 5px solid #dc6b32; outline-offset: -5px; background: rgba(255,255,255,.42); }
.vlm-patch-vector, .vlm-patch-token { display: flex; min-height: 135px; flex-direction: column; justify-content: center; border: 2px solid #dc6b32; border-radius: 12px; background: var(--study-card); padding: .75rem; }
.vlm-patch-token { border-color: var(--study-accent); }
.vlm-patch-vector b, .vlm-patch-token b { color: var(--study-ink); font: 850 .7rem/1.3 ui-monospace, monospace; }
.vlm-patch-vector code, .vlm-patch-token code { margin: .45rem 0; border: 0; color: var(--study-accent); font-size: .58rem; }
.vlm-patch-vector span, .vlm-patch-token span { color: var(--study-muted); font-size: .53rem; }
.vlm-patch-tradeoff { display: grid; grid-template-columns: repeat(4,1fr); gap: .45rem; margin-top: .8rem; }
.vlm-patch-tradeoff span { border-top: 4px solid var(--study-accent); background: var(--study-card); padding: .55rem; color: var(--study-muted); font: 700 .54rem/1.4 ui-monospace, monospace; text-align: center; }
.vlm-patch-tradeoff b { display: block; color: var(--study-ink); }
.vlm-clip-towers { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; }
.vlm-clip-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.vlm-tower { display: flex; min-width: 0; min-height: 98px; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-top: 4px solid #2563eb; border-radius: 10px; background: var(--study-card); padding: .55rem; text-align: center; }
.vlm-tower.is-text { border-top-color: #dc6b32; }
.vlm-tower b { color: var(--study-ink); font: 830 .62rem/1.3 ui-monospace, monospace; }
.vlm-tower span { margin: .25rem 0; color: var(--study-muted); font-size: .5rem; line-height: 1.35; }
.vlm-tower code { border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .52rem; }
.vlm-arrow-text { margin: .7rem 0; color: var(--study-accent); font: 850 .58rem/1.3 ui-monospace, monospace; text-align: center; }
.vlm-shape-row { display: flex; align-items: center; justify-content: center; gap: .45rem; }
.vlm-shape-row span { border-radius: 7px; background: var(--study-card); padding: .45rem .65rem; color: var(--study-muted); font: 750 .58rem/1.2 ui-monospace, monospace; }
.vlm-shape-row b { color: var(--study-ink); }
.vlm-sim-matrix { display: grid; width: min(100%, 520px); grid-template-columns: repeat(3,1fr); gap: .3rem; margin: .8rem auto; }
.vlm-sim-cell { display: flex; min-height: 62px; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-radius: 8px; background: var(--study-card); text-align: center; }
.vlm-sim-cell b { color: var(--study-muted); font: 850 .66rem/1.2 ui-monospace, monospace; }
.vlm-sim-cell small { margin-top: .2rem; color: var(--study-muted); font: 680 .47rem/1.2 ui-monospace, monospace; }
.vlm-sim-cell.is-positive { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.vlm-sim-cell.is-positive b { color: var(--study-accent); }
.vlm-loss-node.is-output, .vlm-loss-compare .is-siglip { border-top-color: #7c3aed; background: color-mix(in srgb,#ede9fe 32%,var(--study-card)); }
.vlm-pair-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; width: min(100%,650px); margin: 0 auto; }
.vlm-pair-card { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid var(--study-line); border-left: 5px solid #dc6b32; border-radius: 9px; background: var(--study-card); padding: .65rem; }
.vlm-pair-card.is-positive { border-left-color: var(--study-accent); background: var(--study-accent-soft); }
.vlm-pair-card b { color: var(--study-ink); font: 820 .62rem/1.3 ui-monospace, monospace; }
.vlm-pair-card code { border: 0; background: transparent; color: var(--study-accent); font-size: .57rem; }
.vlm-pair-card span { grid-column: 1/-1; color: var(--study-muted); font-size: .51rem; }
.vlm-sigmoid-axis { display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: .4rem; width: min(100%,650px); margin: .85rem auto; }
.vlm-sigmoid-axis i { height: 4px; border-radius: 999px; background: linear-gradient(90deg,#dc6b32,var(--study-panel),var(--study-accent)); }
.vlm-sigmoid-axis b { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--study-ink); color: var(--study-card); font: 850 .58rem/1 ui-monospace, monospace; }
.vlm-sigmoid-axis span { color: var(--study-muted); font: 700 .52rem/1.2 ui-monospace, monospace; }
.vlm-two-streams { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 1rem; }
.vlm-two-streams > section { display: flex; align-items: center; flex-direction: column; border: 1px solid var(--study-line); border-radius: 13px; background: color-mix(in srgb,var(--study-panel) 68%,var(--study-card)); padding: .8rem; }
.vlm-two-streams h4 { margin: 0 0 .7rem; color: var(--study-accent); font: 850 .64rem/1.3 ui-monospace, monospace; text-transform: uppercase; }
.vlm-two-streams .vlm-stage { width: 100%; }
.vlm-two-streams .vlm-stage > div { grid-template-columns: 1fr; gap: .22rem; }
.vlm-sequence-merge { margin-top: .85rem; border: 2px solid var(--study-accent); border-radius: 12px; background: var(--study-accent-soft); padding: .8rem; text-align: center; }
.vlm-sequence-merge > b { color: var(--study-ink); font: 850 .64rem/1.3 ui-monospace, monospace; }
.vlm-sequence-merge > div { display: flex; margin: .55rem auto; border-radius: 8px; overflow: hidden; }
.vlm-sequence-merge span { flex: 1; background: color-mix(in srgb,#2563eb 20%,var(--study-card)); padding: .55rem; color: #1d4ed8; font: 750 .56rem/1.2 ui-monospace, monospace; }
.vlm-sequence-merge span + span { background: color-mix(in srgb,#d97706 20%,var(--study-card)); color: #b45309; }
.vlm-sequence-merge code { border: 0; background: var(--study-card); color: var(--study-accent); font-size: .6rem; }
.vlm-training-stages { align-items: center; margin-top: .75rem; }
.vlm-training-stages > i { color: var(--study-accent); font-style: normal; font-weight: 900; }
.vlm-training-stages strong { margin-top: .35rem; color: var(--study-accent); font: 820 .57rem/1.3 ui-monospace, monospace; }
.vlm-format-sequence { display: flex; align-items: stretch; gap: .28rem; overflow-x: auto; padding-bottom: .35rem; }
.vlm-format-sequence > i { align-self: center; color: var(--study-accent); font-style: normal; font-weight: 900; }
.vlm-format-token { display: flex; min-width: 130px; flex: 1; flex-direction: column; justify-content: center; border: 1px solid var(--study-line); border-top: 4px solid var(--study-muted); border-radius: 9px; background: var(--study-card); padding: .6rem; text-align: center; }
.vlm-format-token.is-vision { border-top-color: #2563eb; background: color-mix(in srgb,#dbeafe 30%,var(--study-card)); }
.vlm-format-token.is-target { border-top-color: var(--study-accent); background: var(--study-accent-soft); }
.vlm-format-token b { color: var(--study-ink); font: 800 .53rem/1.35 ui-monospace, monospace; }
.vlm-format-token small { margin-top: .25rem; color: var(--study-muted); font-size: .48rem; }
.vlm-format-replacement { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: .5rem; margin-top: .8rem; }
.vlm-format-replacement section { display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--study-line); border-radius: 10px; background: var(--study-card); padding: .65rem; text-align: center; }
.vlm-format-replacement b { color: var(--study-ink); font: 820 .58rem/1.3 ui-monospace, monospace; }
.vlm-format-replacement code { margin-top: .3rem; border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .53rem; }
.vlm-format-replacement span { margin-top: .3rem; color: var(--study-muted); font-size: .5rem; }
.vlm-loss-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; margin-top: .7rem; }
.vlm-loss-row span { display: flex; flex-direction: column; border: 1px solid var(--study-line); border-radius: 9px; background: var(--study-card); padding: .58rem; text-align: center; }
.vlm-loss-row b { color: var(--study-muted); font: 760 .54rem/1.3 ui-monospace, monospace; }
.vlm-loss-row code { border: 0; background: transparent; color: #dc6b32; font-size: .55rem; }
.vlm-loss-row .is-target { border: 2px solid var(--study-accent); background: var(--study-accent-soft); }
.vlm-loss-row .is-target code { color: var(--study-accent); }
.vlm-generation-row { display: flex; align-items: stretch; gap: .55rem; }
.vlm-generation { display: flex; min-width: 0; flex: 1; flex-direction: column; border: 1px solid var(--study-line); border-top: 5px solid var(--study-muted); border-radius: 12px; background: var(--study-card); padding: .75rem; text-align: center; }
.vlm-generation.is-g1 { border-top-color: #2563eb; }
.vlm-generation.is-g2 { border-top-color: var(--study-accent); background: var(--study-accent-soft); }
.vlm-generation header { display: flex; align-items: center; gap: .4rem; }
.vlm-generation header span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: var(--study-ink); color: var(--study-card); font: 850 .5rem/1 ui-monospace, monospace; }
.vlm-generation header b { color: var(--study-ink); font: 820 .59rem/1.3 ui-monospace, monospace; text-align: left; }
.vlm-generation code { margin: .55rem 0; border: 0; background: var(--study-panel); color: var(--study-accent); font-size: .52rem; }
.vlm-generation strong { color: var(--study-ink); font: 800 .56rem/1.35 ui-monospace, monospace; }
.vlm-generation small { margin-top: .35rem; color: var(--study-muted); font-size: .5rem; line-height: 1.45; }
.vlm-mixed-tokens { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; margin: .9rem 0; }
.vlm-mixed-tokens span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 7px; background: color-mix(in srgb,#d97706 26%,var(--study-card)); color: #b45309; font: 850 .58rem/1 ui-monospace, monospace; }
.vlm-mixed-tokens span.is-image { background: color-mix(in srgb,#2563eb 24%,var(--study-card)); color: #1d4ed8; }
.vlm-two-streams section > code { border: 0; background: var(--study-card); color: var(--study-accent); font-size: .57rem; }
.vlm-two-streams section > small { margin-top: .5rem; color: var(--study-muted); font-size: .53rem; line-height: 1.5; text-align: center; }
.vlm-chameleon-objective { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin-top: .75rem; border: 2px solid #7c3aed; border-radius: 11px; background: color-mix(in srgb,#ede9fe 32%,var(--study-card)); padding: .7rem; text-align: center; }
.vlm-chameleon-objective b, .vlm-chameleon-objective strong { color: var(--study-ink); font: 820 .56rem/1.4 ui-monospace, monospace; }
.vlm-chameleon-objective span { color: var(--study-muted); font-size: .54rem; line-height: 1.4; }

@media (max-width: 900px) {
  .compact-topic.vlm-topic .study-layout { grid-template-columns: 175px minmax(0,1fr); gap: 2rem; }
  .vlm-patch-worked { grid-template-columns: 1fr; }
  .vlm-patch-worked > i { transform: rotate(90deg); }
  .vlm-clip-towers { grid-template-columns: 1fr; }
  .vlm-format-replacement { grid-template-columns: 1fr; }
  .vlm-format-replacement > i { transform: rotate(90deg); }
  .vlm-generation-row { flex-direction: column; }
  .vlm-generation-row > i { transform: rotate(90deg); }
}

@media (max-width: 680px) {
  .compact-topic.vlm-topic .study-layout { display: block; }
  .vlm-visual, .vlm-source-figure { border-radius: 12px; padding: .8rem; }
  .vlm-stage > div { grid-template-columns: 1fr; gap: .2rem; }
  .vlm-output-branches, .vlm-loss-nodes, .vlm-loss-compare, .vlm-training-stages { flex-direction: column; }
  .vlm-training-stages > i { transform: rotate(90deg); }
  .vlm-patch-tradeoff, .vlm-pair-grid, .vlm-loss-row, .vlm-chameleon-objective { grid-template-columns: repeat(2,1fr); }
  .vlm-two-streams { grid-template-columns: 1fr; }
  .vlm-shape-row { flex-wrap: wrap; }
  .vlm-source-figure img { min-width: 620px; }
}

/* Chart legibility standard · applies to every study visual artifact. */
.study-article figure {
  line-height: 1.5;
}
.study-article figure figcaption {
  font-size: clamp(.98rem, 1.55vw, 1.16rem) !important;
  line-height: 1.4 !important;
}
.study-article figure h4,
.study-article figure h5 {
  font-size: clamp(.82rem, 1.25vw, .96rem) !important;
  line-height: 1.4 !important;
}
.study-article figure p,
.study-article figure aside {
  font-size: clamp(.7rem, 1.05vw, .8rem) !important;
  line-height: 1.55 !important;
}
.study-article figure code {
  font-size: clamp(.68rem, 1vw, .78rem) !important;
  line-height: 1.5 !important;
}
.study-article figure span,
.study-article figure i {
  font-size: clamp(.67rem, .98vw, .77rem) !important;
  line-height: 1.45 !important;
}
.study-article figure b,
.study-article figure strong {
  font-size: clamp(.7rem, 1.05vw, .82rem) !important;
  line-height: 1.4 !important;
}
.study-article figure small {
  font-size: clamp(.63rem, .92vw, .72rem) !important;
  line-height: 1.5 !important;
}
.study-article figure .formula,
.study-article figure .math-display {
  font-size: clamp(.74rem, 1.1vw, .86rem) !important;
}
.sft-pipeline .sft-pipeline-stage,
.sft-case-instruct .sft-case-stage {
  grid-template-columns: 52px minmax(0, 1fr);
  width: min(100%, 780px);
  margin-inline: auto;
  padding: .9rem 1rem;
}

@media (max-width: 620px) {
  .sft-pipeline .sft-pipeline-stage,
  .sft-case-instruct .sft-case-stage { grid-template-columns: 44px minmax(0, 1fr); padding: .8rem; }
}

/* RLHF / RLVR: large, vertically traceable numerical process diagrams. */
.rl-topic .study-layout {
  grid-template-columns: minmax(175px, 210px) minmax(0, 1040px);
  gap: clamp(2rem, 4vw, 4.5rem);
}
.rl-topic .study-article { max-width: 1040px; }
.rl-visual {
  width: 100%;
  margin: 1.8rem 0 2.6rem;
  border: 1px solid color-mix(in srgb, var(--study-accent) 48%, var(--study-line));
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 5%, color-mix(in srgb, var(--study-accent-soft) 76%, transparent), transparent 28%),
    linear-gradient(155deg, var(--study-card), color-mix(in srgb, var(--study-panel) 84%, var(--study-card)));
  padding: clamp(1rem, 3.2vw, 2rem);
  box-shadow: 0 24px 60px rgba(20, 32, 52, .09);
}
.rl-visual figcaption {
  margin-bottom: 1.15rem;
  color: var(--study-ink) !important;
  font: 850 clamp(1.12rem, 2.2vw, 1.48rem)/1.35 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  letter-spacing: -.025em;
  text-transform: none;
}
.rl-example-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--study-accent-soft) 58%, var(--study-card));
  padding: .8rem .9rem;
}
.rl-example-banner b,
.rl-example-banner span {
  border-radius: 999px;
  background: var(--study-card);
  padding: .35rem .62rem;
  color: var(--study-ink) !important;
  font: 760 clamp(.82rem, 1.35vw, .96rem)/1.35 ui-monospace, monospace !important;
}
.rl-example-banner b {
  background: var(--study-accent);
  color: #fff !important;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rl-flow { display: grid; justify-items: center; }
.rl-step {
  display: grid;
  width: min(100%, 880px);
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  border: 1px solid var(--study-line);
  border-left: 6px solid var(--study-accent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--study-card) 96%, transparent);
  padding: clamp(.95rem, 2.4vw, 1.35rem);
  box-shadow: 0 9px 26px rgba(22, 34, 55, .055);
}
.rl-step.is-actor { border-left-color: #7c3aed; }
.rl-step.is-reference { border-left-color: #64748b; }
.rl-step.is-reward, .rl-step.is-score { border-left-color: #c2410c; }
.rl-step.is-critic { border-left-color: #0369a1; }
.rl-step.is-gae, .rl-step.is-target { border-left-color: #0f766e; }
.rl-step.is-loss { border-left-color: #be123c; }
.rl-step.is-update { border-left-color: #15803d; }
.rl-step-number {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: var(--study-ink);
  color: var(--study-card) !important;
  font: 900 1rem/1 ui-monospace, monospace !important;
}
.rl-step header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
}
.rl-step header strong {
  color: var(--study-ink) !important;
  font: 850 clamp(1rem, 1.8vw, 1.23rem)/1.35 ui-monospace, monospace !important;
}
.rl-step header small {
  color: var(--study-muted) !important;
  font: 720 clamp(.76rem, 1.22vw, .9rem)/1.35 ui-monospace, monospace !important;
  text-align: right;
}
.rl-formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}
.rl-formula code {
  display: inline-block;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--study-accent) 35%, var(--study-line));
  border-radius: 9px;
  background: var(--study-panel);
  padding: .52rem .68rem;
  color: var(--study-ink) !important;
  font: 720 clamp(.9rem, 1.5vw, 1.08rem)/1.55 ui-monospace, SFMono-Regular, Menlo, monospace !important;
  overflow-wrap: anywhere;
}
.rl-arrow {
  display: grid;
  min-height: 68px;
  place-items: center;
  align-content: center;
  color: var(--study-accent);
}
.rl-arrow span { font: 900 1.4rem/1 sans-serif !important; }
.rl-arrow small {
  max-width: 680px;
  color: var(--study-muted) !important;
  font: 720 clamp(.74rem, 1.15vw, .86rem)/1.35 ui-monospace, monospace !important;
  text-align: center;
}
.rl-group-grid {
  display: grid;
  width: min(100%, 920px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: 1rem 0 .25rem;
}
.rl-group-card {
  border: 1px solid var(--study-line);
  border-top: 5px solid var(--study-accent);
  border-radius: 14px;
  background: var(--study-card);
  padding: 1rem;
}
.rl-group-card.is-best { border-top-color: #15803d; }
.rl-group-card.is-good { border-top-color: #0f766e; }
.rl-group-card.is-bad { border-top-color: #be123c; }
.rl-group-card header {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .5rem;
}
.rl-group-card header strong,
.rl-group-card header b,
.rl-group-card header code {
  color: var(--study-ink) !important;
  font: 800 clamp(.86rem, 1.4vw, 1rem)/1.35 ui-monospace, monospace !important;
}
.rl-group-card header b { margin-left: auto; color: var(--study-accent) !important; }
.rl-group-card > span {
  color: var(--study-muted) !important;
  font: 680 clamp(.82rem, 1.3vw, .94rem)/1.5 ui-monospace, monospace !important;
}
.rl-visual-note {
  width: min(100%, 880px);
  margin: 1.2rem auto 0 !important;
  border-radius: 11px;
  background: color-mix(in srgb, var(--study-accent-soft) 55%, var(--study-card));
  padding: .8rem .9rem;
  color: var(--study-muted) !important;
  font-size: clamp(.86rem, 1.35vw, 1rem) !important;
  line-height: 1.6 !important;
}
@media (max-width: 860px) {
  .rl-topic .study-layout { grid-template-columns: 1fr; }
  .rl-step header { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .rl-step header small { text-align: left; }
}

@media (max-width: 620px) {
  .rl-visual { border-radius: 15px; padding: .8rem; }
  .rl-step { grid-template-columns: 42px minmax(0, 1fr); gap: .65rem; border-left-width: 4px; padding: .8rem; }
  .rl-step-number { width: 38px; height: 38px; font-size: .8rem !important; }
  .rl-group-grid { grid-template-columns: 1fr; }
  .rl-formula code { width: 100%; }
}

/* RLVR and reward/verifier artifacts */
.rl-source-equation {
  display: block;
  width: min(100%, 980px);
  margin: .6rem auto 1.25rem;
  border: 1px solid var(--study-line);
  border-radius: 14px;
  background: #fff;
  padding: clamp(.8rem, 2.5vw, 1.7rem);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--study-ink) 8%, transparent);
}
.rl-source-equation img {
  display: block;
  width: 100%;
  height: auto;
}
.rl-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  width: min(100%, 1080px);
  margin: 0 auto;
}
.rl-method-card,
.rl-reward-column,
.rl-rubric-item,
.rl-aggregate-card {
  border: 1px solid var(--study-line);
  border-radius: 14px;
  background: var(--study-card);
}
.rl-method-card { padding: 1rem; border-top: 5px solid var(--study-accent); }
.rl-method-card.is-m1 { border-top-color: #7c3aed; }
.rl-method-card.is-m2 { border-top-color: #0f766e; }
.rl-method-card header {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.rl-method-card header span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--study-accent-soft);
  color: var(--study-accent) !important;
  font: 850 .72rem/1 ui-monospace, monospace !important;
}
.rl-method-card header strong {
  color: var(--study-ink) !important;
  font-size: clamp(.96rem, 1.6vw, 1.13rem) !important;
}
.rl-method-card > code {
  display: block;
  min-height: 4.8em;
  padding: .7rem;
  border-radius: 9px;
  background: var(--study-panel);
  color: var(--study-ink) !important;
  font: 720 clamp(.8rem, 1.25vw, .93rem)/1.55 ui-monospace, monospace !important;
  white-space: normal;
}
.rl-reward-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: min(100%, 1080px);
  margin: .5rem auto 0;
}
.rl-reward-column { padding: clamp(.9rem, 2vw, 1.3rem); border-top: 6px solid #d97706; }
.rl-reward-column.is-prm { border-top-color: #0f766e; }
.rl-reward-column header strong,
.rl-reward-column header code {
  display: block;
}
.rl-reward-column header strong {
  margin-bottom: .35rem;
  color: var(--study-ink) !important;
  font-size: clamp(1.05rem, 1.8vw, 1.28rem) !important;
}
.rl-reward-column header code {
  color: var(--study-muted) !important;
  font: 680 clamp(.77rem, 1.25vw, .9rem)/1.5 ui-monospace, monospace !important;
  white-space: normal;
}
.rl-mini-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  margin: 1rem 0;
}
.rl-mini-steps span {
  display: grid;
  min-height: 55px;
  place-items: center;
  border: 1px solid var(--study-line);
  border-radius: 9px;
  background: var(--study-panel);
  color: var(--study-ink) !important;
  font: 800 clamp(.7rem, 1.1vw, .83rem)/1.25 ui-monospace, monospace !important;
  text-align: center;
}
.rl-mini-steps span.is-risk { border-color: #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--study-card)); }
.rl-score-node {
  border: 2px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--study-accent-soft) 55%, var(--study-card));
  padding: .9rem;
  text-align: center;
}
.rl-score-node b,
.rl-score-node code,
.rl-score-node small { display: block; }
.rl-score-node b { color: var(--study-muted) !important; font-size: .75rem !important; text-transform: uppercase; letter-spacing: .06em; }
.rl-score-node code { margin: .35rem 0; color: var(--study-ink) !important; font: 850 clamp(.95rem, 1.7vw, 1.18rem)/1.4 ui-monospace, monospace !important; white-space: normal; }
.rl-score-node small { color: var(--study-muted) !important; font-size: .78rem !important; }
.rl-reward-column > p { margin: .9rem 0 0 !important; color: var(--study-muted) !important; font-size: clamp(.82rem, 1.25vw, .94rem) !important; line-height: 1.55 !important; }
.rl-rubric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  width: min(100%, 980px);
  margin: .7rem auto 1.1rem;
}
.rl-rubric-item { padding: .75rem; border-left: 4px solid var(--study-accent); }
.rl-rubric-item strong,
.rl-rubric-item span,
.rl-rubric-item code { display: block; }
.rl-rubric-item strong { color: var(--study-accent) !important; font-size: .76rem !important; text-transform: uppercase; letter-spacing: .05em; }
.rl-rubric-item span { min-height: 2.8em; margin: .35rem 0; color: var(--study-ink) !important; font-size: clamp(.78rem, 1.2vw, .9rem) !important; line-height: 1.4 !important; }
.rl-rubric-item code { color: var(--study-muted) !important; font: 720 .76rem/1.4 ui-monospace, monospace !important; white-space: normal; }
.rl-aggregate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  width: min(100%, 920px);
  margin: .8rem auto 1rem;
}
.rl-aggregate-card { padding: 1rem; }
.rl-aggregate-card strong,
.rl-aggregate-card code,
.rl-aggregate-card span { display: block; }
.rl-aggregate-card strong { color: var(--study-ink) !important; font-size: clamp(.93rem, 1.5vw, 1.05rem) !important; }
.rl-aggregate-card code { margin: .45rem 0; color: var(--study-accent) !important; font: 800 clamp(.82rem, 1.3vw, .96rem)/1.5 ui-monospace, monospace !important; white-space: normal; }
.rl-aggregate-card span { color: var(--study-muted) !important; font-size: clamp(.78rem, 1.2vw, .9rem) !important; line-height: 1.5 !important; }
.rl-mm-record {
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(260px, 1.5fr);
  gap: .8rem;
  width: min(100%, 920px);
  margin: .4rem auto 0;
}
.rl-mm-image,
.rl-mm-prompt {
  display: grid;
  align-content: center;
  min-height: 145px;
  border: 1px solid var(--study-line);
  border-radius: 14px;
  padding: 1rem;
}
.rl-mm-image {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, #0f766e 18%, var(--study-card)), color-mix(in srgb, #2563eb 12%, var(--study-card)));
}
.rl-mm-image::after {
  content: '';
  position: absolute;
  inset: 18% 10%;
  border: 1px dashed color-mix(in srgb, var(--study-accent) 55%, transparent);
  background: repeating-linear-gradient(0deg, transparent 0 16px, color-mix(in srgb, var(--study-accent) 16%, transparent) 16px 17px);
}
.rl-mm-image span,
.rl-mm-image strong,
.rl-mm-image small { position: relative; z-index: 1; display: block; }
.rl-mm-image span { color: var(--study-accent) !important; font: 850 .7rem/1 ui-monospace, monospace !important; letter-spacing: .1em; }
.rl-mm-image strong { margin: .5rem 0; color: var(--study-ink) !important; font-size: clamp(.95rem, 1.5vw, 1.12rem) !important; }
.rl-mm-image small { color: var(--study-muted) !important; font-size: .76rem !important; }
.rl-mm-prompt { background: var(--study-card); }
.rl-mm-prompt small,
.rl-mm-prompt strong,
.rl-mm-prompt code { display: block; }
.rl-mm-prompt small { color: var(--study-muted) !important; font-size: .75rem !important; text-transform: uppercase; letter-spacing: .06em; }
.rl-mm-prompt strong { margin: .55rem 0; color: var(--study-ink) !important; font-size: clamp(.92rem, 1.6vw, 1.15rem) !important; }
.rl-mm-prompt code { color: var(--study-accent) !important; font: 730 clamp(.76rem, 1.15vw, .88rem)/1.45 ui-monospace, monospace !important; white-space: normal; }
.rl-mm-split {
  margin: .65rem auto;
  color: var(--study-accent) !important;
  font: 800 clamp(.78rem, 1.25vw, .92rem)/1.4 ui-monospace, monospace !important;
  text-align: center;
}
.rl-mm-answers,
.rl-memory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
  width: min(100%, 1000px);
  margin: 0 auto;
}
.rl-mm-answer,
.rl-memory-card {
  border: 1px solid var(--study-line);
  border-radius: 14px;
  background: var(--study-card);
}
.rl-mm-answer { padding: 1rem; border-top: 6px solid #15803d; }
.rl-mm-answer.is-rejected { border-top-color: #be123c; }
.rl-mm-answer header,
.rl-memory-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.rl-mm-answer header strong { color: var(--study-ink) !important; font-size: .85rem !important; letter-spacing: .05em; }
.rl-mm-answer header span { color: var(--study-muted) !important; font-size: .78rem !important; }
.rl-mm-answer p { margin: .7rem 0 0 !important; color: var(--study-ink) !important; font-size: clamp(.86rem, 1.35vw, 1rem) !important; line-height: 1.55 !important; }
.rl-mm-objective {
  display: grid;
  gap: .45rem;
  width: min(100%, 1040px);
  margin: 1rem auto 1.35rem;
  text-align: center;
}
.rl-mm-objective code {
  display: block;
  border: 1px solid color-mix(in srgb, var(--study-accent) 38%, var(--study-line));
  border-radius: 11px;
  background: var(--study-panel);
  padding: .85rem;
  color: var(--study-ink) !important;
  font: 740 clamp(.76rem, 1.3vw, .96rem)/1.6 ui-monospace, monospace !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
.rl-mm-objective span { color: var(--study-muted) !important; font: 700 clamp(.75rem, 1.15vw, .86rem)/1.4 ui-monospace, monospace !important; }
.rl-memory-title { margin: 1.2rem 0 .75rem !important; color: var(--study-ink) !important; font-size: clamp(1rem, 1.7vw, 1.24rem) !important; text-align: center; }
.rl-memory-card { overflow: hidden; }
.rl-memory-card header { padding: 1rem; background: color-mix(in srgb, #be123c 10%, var(--study-card)); }
.rl-memory-card.is-lora header { background: color-mix(in srgb, #15803d 11%, var(--study-card)); }
.rl-memory-card header strong { color: var(--study-ink) !important; font-size: clamp(.9rem, 1.5vw, 1.08rem) !important; }
.rl-memory-card header b { color: #be123c !important; font: 880 clamp(1.08rem, 2vw, 1.4rem)/1 ui-monospace, monospace !important; }
.rl-memory-card.is-lora header b { color: #15803d !important; }
.rl-memory-rows span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, .9fr) 62px;
  gap: .5rem;
  align-items: center;
  border-top: 1px solid var(--study-line);
  padding: .7rem .85rem;
}
.rl-memory-rows em { color: var(--study-ink) !important; font-size: clamp(.75rem, 1.12vw, .86rem) !important; font-style: normal; }
.rl-memory-rows code { color: var(--study-muted) !important; font: 680 clamp(.68rem, 1vw, .78rem)/1.35 ui-monospace, monospace !important; white-space: normal; }
.rl-memory-rows b { color: var(--study-ink) !important; font: 800 clamp(.72rem, 1.1vw, .84rem)/1.2 ui-monospace, monospace !important; text-align: right; }
.rl-memory-foot {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .4rem .7rem;
  width: min(100%, 1000px);
  margin: .9rem auto 0;
  border-radius: 11px;
  background: color-mix(in srgb, var(--study-accent-soft) 55%, var(--study-card));
  padding: .85rem;
}
.rl-memory-foot strong { color: var(--study-ink) !important; font-size: clamp(.78rem, 1.15vw, .88rem) !important; }
.rl-memory-foot span { color: var(--study-muted) !important; font-size: clamp(.76rem, 1.12vw, .86rem) !important; line-height: 1.45 !important; }
.rl-memory-foot code { grid-column: 1 / -1; color: var(--study-accent) !important; font: 740 clamp(.73rem, 1.08vw, .84rem)/1.45 ui-monospace, monospace !important; white-space: normal; }

@media (max-width: 820px) {
  .rl-method-grid,
  .rl-rubric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .rl-method-grid,
  .rl-reward-compare,
  .rl-rubric-grid,
  .rl-aggregate-grid,
  .rl-mm-record,
  .rl-mm-answers,
  .rl-memory-grid { grid-template-columns: 1fr; }
  .rl-method-card > code { min-height: 0; }
  .rl-memory-rows span { grid-template-columns: minmax(0, 1fr) 90px 54px; }
}

/* Basic Math: one large visual linking the unit circle, 2D rotation, and RoPE. */
.compact-topic.basic-math-topic .study-layout {
  grid-template-columns: minmax(170px, 205px) minmax(0, 980px);
  gap: clamp(2rem, 5vw, 4rem);
}
.math-foundation-visual {
  margin: 1.6rem 0 2.4rem;
  border: 1px solid color-mix(in srgb, var(--study-accent) 42%, var(--study-line));
  border-radius: 22px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--study-panel) 78%, var(--study-card)), var(--study-card));
  padding: clamp(.8rem, 2.4vw, 1.55rem);
  box-shadow: 0 20px 52px rgba(24, 34, 45, .09);
}
.math-foundation-visual figcaption {
  margin: .15rem .2rem 1.1rem;
  color: var(--study-ink);
  font: 850 clamp(1rem, 1.8vw, 1.22rem)/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.math-unit-circle-image {
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--study-line) 82%, #fff);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}
.math-unit-circle-image img {
  display: block;
  width: 100%;
  max-height: 820px;
  object-fit: contain;
}
.math-rotation-chain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .65rem;
  align-items: stretch;
  margin: 1rem 0;
}
.math-rotation-chain section {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  min-height: 145px;
  border: 1px solid var(--study-line);
  border-radius: 14px;
  background: var(--study-card);
  padding: clamp(.75rem, 1.7vw, 1rem);
}
.math-rotation-chain section.is-rope {
  border-color: color-mix(in srgb, var(--study-accent) 58%, var(--study-line));
  background: color-mix(in srgb, var(--study-accent-soft) 62%, var(--study-card));
}
.math-rotation-chain small,
.math-rotation-chain strong,
.math-rotation-chain code,
.math-rotation-chain p { grid-column: 1 / -1; }
.math-rotation-chain small {
  color: var(--study-accent);
  font: 850 .7rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.math-rotation-chain strong {
  margin: .55rem 0 .22rem;
  color: var(--study-ink);
  font: 850 clamp(1rem, 1.8vw, 1.22rem)/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.math-rotation-chain section > span {
  display: none;
}
.math-rotation-chain code {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--study-ink);
  font: 780 clamp(.9rem, 1.55vw, 1.08rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: normal;
}
.math-rotation-chain p {
  margin: .48rem 0 0 !important;
  color: var(--study-muted) !important;
  font-size: clamp(.76rem, 1.15vw, .88rem) !important;
  line-height: 1.45 !important;
}
.math-rotation-chain > i {
  align-self: center;
  color: var(--study-accent);
  font: 900 clamp(1.25rem, 2.6vw, 1.8rem)/1 ui-monospace, monospace;
  font-style: normal;
}
.math-foundation-note {
  margin: .4rem .2rem 0 !important;
  border-left: 4px solid var(--study-accent);
  padding: .5rem 0 .5rem .85rem;
  color: var(--study-muted) !important;
  font-size: clamp(.82rem, 1.2vw, .94rem) !important;
  line-height: 1.6 !important;
}
.math-foundation-note strong { color: var(--study-ink); }
.math-derivative-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.math-derivative-cards section,
.math-lse-panel,
.math-probability-grid > section,
.math-training-flow section,
.math-gradient-example section {
  border: 1px solid var(--study-line);
  border-radius: 14px;
  background: var(--study-card);
  padding: clamp(.75rem, 1.7vw, 1.05rem);
}
.math-derivative-cards small,
.math-lse-panel small,
.math-probability-grid small,
.math-training-flow small,
.math-gradient-example small {
  display: block;
  color: var(--study-accent);
  font: 850 .7rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}
.math-derivative-cards strong {
  display: block;
  margin: .55rem 0 .35rem;
  color: var(--study-ink);
  font: 850 clamp(1.05rem, 1.9vw, 1.3rem)/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.math-derivative-cards code,
.math-log-trick code,
.math-lse-panel code,
.math-probability-grid code,
.math-training-flow code,
.math-gradient-example code {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--study-ink);
  font: 760 clamp(.78rem, 1.3vw, .94rem)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: normal;
}
.math-derivative-cards p,
.math-log-trick p,
.math-probability-grid p,
.math-gradient-example p {
  margin: .48rem 0 0 !important;
  color: var(--study-muted) !important;
  font-size: clamp(.76rem, 1.15vw, .88rem) !important;
  line-height: 1.5 !important;
}
.math-log-trick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .5rem .8rem;
  align-items: center;
  margin: .8rem 0;
  border: 1px solid color-mix(in srgb, var(--study-accent) 52%, var(--study-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--study-accent-soft) 56%, var(--study-card));
  padding: 1rem;
}
.math-log-trick > span {
  color: var(--study-accent);
  font: 850 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.math-log-trick > i { color: var(--study-accent); font: 900 1.15rem/1 monospace; font-style: normal; }
.math-log-trick > p { grid-column: 2 / -1; }
.math-lse-panel header {
  display: grid;
  gap: .28rem;
}
.math-lse-panel header strong {
  color: var(--study-ink);
  font: 850 clamp(.95rem, 1.7vw, 1.15rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.math-number-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  margin-top: .8rem;
}
.math-number-strip span {
  border-radius: 10px;
  background: var(--study-panel);
  padding: .75rem;
  text-align: center;
}
.math-number-strip b,
.math-number-strip code { display: block; }
.math-number-strip b { margin-bottom: .25rem; color: var(--study-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.math-number-strip i { color: var(--study-accent); font-size: .78rem; font-style: normal; text-align: center; }
.math-probability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: .8rem;
}
.math-ar-path div {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: .7rem 0;
}
.math-ar-path b { color: var(--study-ink); font-size: .82rem; }
.math-ar-path em { border-radius: 999px; background: var(--study-accent-soft); padding: .2rem .42rem; color: var(--study-accent); font: 750 .72rem/1 monospace; font-style: normal; }
.math-ar-path i { color: var(--study-muted); font-style: normal; }
.math-ar-path code { display: block; margin-top: .32rem; }
.math-mc-path > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .3rem;
  margin: .7rem 0;
}
.math-mc-path > div span { border-radius: 8px; background: var(--study-panel); padding: .45rem .2rem; color: var(--study-muted); font-size: .64rem; line-height: 1.35; text-align: center; }
.math-mc-path > div b { color: var(--study-ink); font: 850 .86rem/1.2 monospace; }
.math-mc-path > code { display: block; color: var(--study-accent); }
.math-training-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: .4rem;
  align-items: stretch;
}
.math-training-flow section { display: grid; align-content: center; min-height: 128px; text-align: center; }
.math-training-flow section.is-loss { border-color: color-mix(in srgb, #dc2626 46%, var(--study-line)); background: color-mix(in srgb, #dc2626 7%, var(--study-card)); }
.math-training-flow strong { display: block; margin: .5rem 0 .35rem; color: var(--study-ink); font: 850 clamp(.9rem, 1.55vw, 1.08rem)/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; }
.math-training-flow > i { align-self: center; color: var(--study-accent); font: 900 1.2rem/1 monospace; font-style: normal; }
.math-backprop-band {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  align-items: center;
  justify-content: center;
  margin: .8rem 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--study-accent-soft) 62%, var(--study-card));
  padding: .85rem;
}
.math-backprop-band strong { color: var(--study-accent); font: 850 .72rem/1.3 ui-monospace, monospace; letter-spacing: .08em; }
.math-backprop-band span { color: var(--study-ink); font: 760 clamp(.78rem, 1.25vw, .9rem)/1.4 ui-monospace, monospace; }
.math-backprop-band i { color: var(--study-accent); font-style: normal; }
.math-gradient-example {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.math-gradient-example section { min-height: 128px; }
.math-gradient-example code { display: block; margin-top: .5rem; }
.math-gradient-example section.is-result { border-color: color-mix(in srgb, #15803d 48%, var(--study-line)); background: color-mix(in srgb, #15803d 8%, var(--study-card)); }
.math-gradient-example section.is-result small { color: #15803d; }

@media (max-width: 900px) {
  .compact-topic.basic-math-topic .study-layout {
    grid-template-columns: 175px minmax(0, 1fr);
    gap: 2rem;
  }
  .math-rotation-chain { grid-template-columns: 1fr; }
  .math-rotation-chain > i { transform: rotate(90deg); justify-self: center; }
  .math-rotation-chain section { min-height: 0; }
  .math-training-flow { grid-template-columns: 1fr; }
  .math-training-flow > i { transform: rotate(90deg); justify-self: center; }
  .math-training-flow section { min-height: 0; }
  .math-gradient-example { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .compact-topic.basic-math-topic .study-layout { display: block; }
  .math-foundation-visual { padding: .7rem; }
  .math-foundation-visual figcaption { margin: .2rem .2rem .8rem; }
  .math-derivative-cards,
  .math-probability-grid,
  .math-gradient-example { grid-template-columns: 1fr; }
  .math-log-trick { grid-template-columns: 1fr; }
  .math-log-trick > p { grid-column: 1; }
  .math-log-trick > i { transform: rotate(90deg); justify-self: center; }
  .math-number-strip { grid-template-columns: 1fr; }
  .math-number-strip i { transform: rotate(90deg); }
}

/* Consolidated notation reference. */
.compact-topic.notation-topic .study-layout {
  grid-template-columns: minmax(175px, 210px) minmax(0, 1020px);
  gap: clamp(2rem, 4.5vw, 4.2rem);
}
.notation-scope-visual {
  margin: 1.5rem 0 2.2rem;
  border: 1px solid color-mix(in srgb, var(--study-accent) 45%, var(--study-line));
  border-radius: 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--study-panel) 78%, var(--study-card)), var(--study-card));
  padding: clamp(.85rem, 2.4vw, 1.55rem);
  box-shadow: 0 20px 48px rgba(24, 34, 45, .08);
}
.notation-scope-visual figcaption {
  margin: .1rem .15rem 1rem;
  color: var(--study-ink);
  font: 850 clamp(1rem, 1.8vw, 1.22rem)/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.notation-scope-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .62rem;
}
.notation-scope-grid section {
  overflow: hidden;
  border: 1px solid var(--study-line);
  border-radius: 14px;
  background: var(--study-card);
}
.notation-scope-grid section > strong {
  display: grid;
  place-items: center;
  min-height: 68px;
  background: color-mix(in srgb, var(--study-accent-soft) 68%, var(--study-card));
  color: var(--study-accent);
  font: 900 clamp(1.8rem, 3.6vw, 2.6rem)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.notation-scope-grid section > span {
  display: block;
  border-top: 1px solid var(--study-line);
  padding: .62rem .7rem;
  color: var(--study-muted);
  font-size: clamp(.71rem, 1vw, .82rem);
  line-height: 1.35;
}
.notation-scope-grid section > span b {
  display: block;
  margin-bottom: .12rem;
  color: var(--study-ink);
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.notation-reading-rule {
  display: grid;
  grid-template-columns: repeat(7, auto);
  gap: .45rem;
  align-items: center;
  justify-content: center;
  margin-top: .85rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--study-accent-soft) 54%, var(--study-card));
  padding: .8rem;
}
.notation-reading-rule span,
.notation-reading-rule strong {
  color: var(--study-ink);
  font: 760 clamp(.68rem, 1.05vw, .8rem)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.notation-reading-rule strong { color: var(--study-accent); }
.notation-reading-rule i { color: var(--study-accent); font-style: normal; }

@media (max-width: 980px) {
  .compact-topic.notation-topic .study-layout { grid-template-columns: 175px minmax(0, 1fr); gap: 2rem; }
  .notation-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notation-scope-grid section:last-child { grid-column: 1 / -1; }
  .notation-reading-rule { grid-template-columns: 1fr; text-align: center; }
  .notation-reading-rule i { transform: rotate(90deg); }
}

@media (max-width: 700px) {
  .compact-topic.notation-topic .study-layout { display: block; }
  .notation-scope-grid { grid-template-columns: 1fr; }
  .notation-scope-grid section:last-child { grid-column: auto; }
}