@charset "UTF-8";
:root {
  --paper:#fcfcfa;
  --ink:#17212f;
  --body:#344054;
  --muted:#586273;
  --line:#ccd2dc;
  --grid:#e3e7ed;
  --accent:#17212f;
  --control:#9b4138;
  --reference:#334f85;
  --comparison:#6f536d;
  --issue:#9b4138;
  --finding:#45634c;
  --focus:#805b19;
  --focus-wash:#f4ead3;
  --control-paper:#f3f0e8;
  --control-rule:#b9b1a2;
  /* 利休白茶 rikyū-shiracha — inputs: a quiet tea-grey, deliberately the
     least assertive thing in the figure */
  --pig-shiracha-fill:#efede7;
  --pig-shiracha-deep:#e3dfd5;
  --pig-shiracha-line:#8b8375;
  /* 藍白 aijiro wash under a 勝色 kachi-iro line — the trained encoders */
  --pig-ai-fill:#e7ebea;
  --pig-ai-deep:#d3dcda;
  --pig-ai-line:#4e6463;
  /* 二藍 futaai — indigo over safflower; the predictor, kin to the encoders
     but its own hue */
  --pig-futaai-fill:#ebe8e9;
  --pig-futaai-deep:#ddd5d8;
  --pig-futaai-line:#6d6269;
  /* 白緑 byakuroku — finely ground malachite; the projector */
  --pig-byakuroku-fill:#eaebe5;
  --pig-byakuroku-deep:#dadfd3;
  --pig-byakuroku-line:#73806a;
  /* 緑青 rokushō — the same malachite, coarser; SIGReg itself */
  --pig-rokusho-fill:#e7eae4;
  --pig-rokusho-deep:#d3dbcf;
  --pig-rokusho-line:#607461;
  /* 弁柄 bengara — red iron oxide; the objectives, and anything the
     gradient touches */
  --pig-bengara-fill:#eee8e4;
  --pig-bengara-deep:#e0d5ce;
  --pig-bengara-line:#86695a;

  /* Flow colours for the animated dashes. 朱 shu, the vermilion of seal ink,
     carries gradient; 黄土 ōdo is reserved for the EMA weight copy, which is
     a different kind of movement from either data or gradient. */
  --flow-forward:#4e6463;
  --flow-grad:#98624b;
  --flow-reg:#607461;
  --flow-ema:#87734f;

  /* 鈍色 nibiiro — connectors, in place of the page's cooler --muted so the
     whole figure sits in one light. */
  --wire:#74706a;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--focus);
  outline-offset:4px
}
button,select {
  font:inherit
}
.select-shell {
  position:relative;
  display:inline-flex;
  vertical-align:middle;
  width:164px;
  max-width:100%;
  flex-shrink:0
}
.select-shell::before {
  content:"";
  position:absolute;
  top:11px;
  bottom:11px;
  right:38px;
  border-left:1px solid var(--control-rule);
  pointer-events:none
}
.select-shell::after {
  content:"";
  position:absolute;
  top:50%;
  right:16px;
  width:7px;
  height:7px;
  border-right:1.5px solid var(--focus);
  border-bottom:1.5px solid var(--focus);
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none
}
select:hover { border-color:var(--focus) }
select:focus-visible { border-color:var(--focus) }
p {
  line-height:1.65;
  margin:0 0 1em
}
main,.masthead {
  width:min(1480px,calc(100% - 112px));
  margin:auto
}
.masthead {
  height:86px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-size:14px;
  font-weight:700;
  letter-spacing:-.02em
}
.wordmark span {
  font-weight:400;
  color:var(--muted)
}
nav {
  display:flex;
  gap:30px;
  font-size:12px
}
.skip {
  position:fixed;
  left:20px;
  top:-80px;
  padding:16px;
  background:var(--paper);
  z-index:30
}
.skip:focus {
  top:12px
}
.eyebrow,.chapter-label,.metric-label,.figure-heading,.metric-foot {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:12px;
  letter-spacing:.04em
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  text-transform:uppercase
}
.edition {
  margin-left:auto;
  color:var(--muted)
}
.signal {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent)
}
.hero {
  padding-top:62px
}
h1 {
  font-size:clamp(42px,5.4vw,72px);
  line-height:1.06;
  letter-spacing:-.05em;
  font-weight:500;
  max-width:1000px;
  margin:35px 0 36px
}
h2 {
  font-size:clamp(32px,3.6vw,49px);
  line-height:1.08;
  letter-spacing:-.045em;
  font-weight:500;
  margin:0
}
h3 {
  font-size:27px;
  font-weight:500;
  letter-spacing:-.03em;
  line-height:1.2;
  margin:18px 0
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px
}
.hero-bottom p {
  font-size:16px;
  color:var(--body);
  max-width:69ch
}
.project-summary {
  margin:34px 0 0;
  border-top:1px solid var(--ink)
}
.project-summary>div {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:30px;
  border-bottom:1px solid var(--line);
  padding:17px 0
}
.project-summary dt {
  font:600 12px ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  color:var(--ink);
  padding-top:4px
}
.project-summary dd {
  margin:0;
  font-size:15px;
  line-height:1.55;
  max-width:85ch
}

.problem-flow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:25px 0;
  margin-bottom:32px;
  font:13px ui-monospace,monospace
}
.report-prose {
  max-width:79ch;
  margin-bottom:30px
}
.report-prose p {
  color:var(--body);
  font-size:16px
}
.report-prose h3 {
  font-size:20px;
  margin:25px 0 12px
}
.report-prose .research-question {
  font-size:27px;
  line-height:1.5;
  color:var(--focus);
  border-left:3px solid var(--focus);
  padding-left:24px;
  margin:20px 0 28px;
  max-width:52ch
}
.focus-label,.report-prose .focus-label {
  color:var(--focus)
}
.focus-line {
  border-left:3px solid var(--focus);
  padding-left:20px
}
.project-summary .summary-finding dt {
  color:var(--focus)
}
.summary-finding dd strong {
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--focus);
  text-decoration-thickness:2px;
  text-underline-offset:4px
}
.method-definitions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px 55px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin:30px 0
}
.method-definitions dt {
  font-weight:600;
  font-size:14px;
  margin-bottom:8px
}
.method-definitions dd {
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:var(--body);
  max-width:55ch
}
.technical-method {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  margin:25px 0
}
.technical-method summary {
  cursor:pointer;
  font-size:13px
}
.architecture .pipeline {
  margin-top:30px
}
.dataset-description {
  max-width:85ch;
  border-top:1px solid var(--ink);
  padding-top:25px
}
.dataset-description h3 {
  margin-top:12px
}
.dataset-description p {
  color:var(--body);
  font-size:14px;
  max-width:85ch
}
.dataset-description .small {
  font-size:12px
}
.evaluation-heading {
  font-size:22px;
  margin-top:40px;
  margin-bottom:20px
}
.evaluation-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-bottom:20px
}
.evaluation-grid h3,.result-findings h3,.next-grid h3 {
  font-size:20px;
  line-height:1.25;
  margin:14px 0 12px
}
.evaluation-grid p {
  color:var(--body);
  font-size:13px
}
.result-findings {
  list-style:none;
  counter-reset:finding;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
  margin:0 0 25px
}
.result-findings li {
  border-top:2px solid var(--ink);
  padding-top:18px;
  counter-increment:finding
}
.result-findings li::before {
  content:"0" counter(finding);
  font:11px ui-monospace,monospace;
  color:var(--accent)
}
.result-findings p {
  font-size:14px;
  color:var(--body)
}
.result-findings strong {
  color:var(--ink)
}
.result-interpretation {
  font-size:18px;
  max-width:80ch;
  line-height:1.6
}
.result-interpretation .takeaway {
  color:var(--focus);
  font-weight:500
}
.figure-guide {
  font-size:13px;
  color:var(--muted);
  max-width:95ch;
  margin-bottom:24px
}
.rank-detail .chapter-label {
  margin-top:30px
}
.text-link {
  font-size:13px;
  display:inline-flex;
  gap:28px;
  align-items:center;
  border-bottom:1px solid var(--ink);
  padding:8px 0;
  white-space:nowrap
}
.opening-figure {
  margin:56px 0 0;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line);
  padding:19px 0 24px
}
.figure-heading {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  gap:20px
}
.opening-grid {
  display:grid;
  grid-template-columns:1fr 1fr .85fr;
  gap:40px;
  padding:42px 0 28px
}
.opening-grid>div {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.metric-label {
  text-transform:uppercase;
  color:var(--muted)
}
.opening-grid strong {
  font-size:clamp(28px,4vw,54px);
  font-weight:400;
  letter-spacing:-.06em;
  margin:14px 0 12px
}
.opening-grid small {
  font-size:.5em;
  letter-spacing:0
}
.accent {
  color:var(--accent)
}
.metric-foot {
  font-size:10px;
  color:var(--muted);
  letter-spacing:0
}
.figure-thought {
  font-size:22px;
  line-height:1.45;
  letter-spacing:-.02em;
  align-self:center;
  margin:0
}
.claim,.interpretation-label {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;
  color:var(--accent);
  letter-spacing:0;
  white-space:nowrap
}
.figure-thought .claim {
  display:block;
  margin-bottom:12px
}
figcaption,.small {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  max-width:1000px
}
figcaption {
  margin-top:15px
}
.mini-spectrum,.mini-probe {
  width:100%;
  height:2px;
  background:var(--line);
  margin-top:24px
}
.mini-spectrum span {
  display:block;
  width:2px;
  height:8px;
  transform:translateY(-3px);
  background:var(--control)
}
.mini-probe span {
  display:block;
  width:91.37%;
  height:2px;
  background:var(--accent)
}
.chapter {
  border-top:1px solid var(--line);
  padding-top:58px;
  margin-top:72px
}
.chapter-label {
  color:var(--ink);
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:25px
}
.section-intro {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:75px;
  align-items:start;
  margin-bottom:42px
}
.section-intro>p {
  color:var(--body);
  font-size:16px;
  max-width:48ch;
  margin-top:5px
}
.architecture {
  margin:32px 0;
  padding-top:24px;
  border-top:1px solid var(--line)
}
.pipeline {
  margin:0 0 35px
}
.wires {
  fill:none;
  stroke:var(--muted);
  stroke-width:1.5
}
.diagram-text {
  text-anchor:middle;
  font:14px Arial,sans-serif;
  fill:var(--ink)
}
.diagram-accent {
  fill:var(--accent)
}
.table-scroll {
  overflow:auto;
  max-width:100%
}
table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  min-width:650px
}
caption {
  text-align:left;
  color:var(--muted);
  font-family:ui-monospace,monospace;
  font-size:11px;
  padding:0 0 17px
}
th,td {
  padding:13px 14px;
  text-align:right;
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums
}
thead th {
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  text-transform:uppercase;
  white-space:nowrap
}
th:first-child {
  text-align:left;
  padding-left:0
}
tbody th {
  font-weight:400
}
tbody td {
  font-family:ui-monospace,monospace
}
.metric-extreme {
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:6px 8px;
  color:var(--ink);
  border:1px solid var(--focus);
  font-weight:600
}
.metric-high {
  background:var(--focus-wash)
}
.metric-low {
  border-style:dashed
}
.extreme-label {
  font:600 9px ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  color:var(--focus)
}
.table-key {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  font-size:12px;
  color:var(--muted);
  margin:25px 0 15px
}
.table-key .metric-extreme {
  font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace;
  color:var(--focus)
}
.control-row {
  color:var(--control)
}
.protocol-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);
  margin:40px 0 18px;
  padding-top:22px;
  gap:30px
}
.protocol-strip strong {
  font-size:33px;
  letter-spacing:-.03em;
  font-weight:400;
  display:block;
  margin-bottom:8px
}
.protocol-strip span {
  font-family:ui-monospace,monospace;
  font-size:10px;
  color:var(--muted)
}
.evidence-controls {
  display:flex;
  justify-content:space-between;
  gap:25px;
  align-items:center;
  margin-bottom:24px
}
.legend {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  font-size:12px
}
.legend span {
  display:flex;
  gap:7px;
  align-items:center
}
.legend i {
  width:9px;
  height:9px;
  border-radius:50%;
  display:block
}
.reference {
  background:var(--reference)
}
.comparison {
  background:var(--comparison)
}
.legend .comparison {
  border-radius:0;
  transform:rotate(45deg);
  width:8px;
  height:8px
}
.contracted {
  background:var(--control)
}
.legend .contracted {
  border-radius:0
}
.condition-symbol {
  display:inline-block;
  margin-right:8px;
  font-size:13px
}
.condition-reference { color:var(--reference) }
.condition-comparison { color:var(--comparison) }
.condition-control { color:var(--control) }
.citation {
  font:12px ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:3px
}
.reference-list {
  max-width:85ch;
  padding-left:26px;
  color:var(--body);
  font-size:14px;
  line-height:1.7
}
.reference-list li {
  padding:14px 0 14px 8px;
  border-bottom:1px solid var(--line);
  scroll-margin-top:30px
}
.reference-list li::marker {
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace
}
.reference-list a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px
}
.evidence-controls label {
  font-size:11px;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center
}
select {
  -webkit-appearance:none;
  appearance:none;
  background:var(--control-paper);
  border:1px solid var(--control-rule);
  color:var(--ink);
  border-radius:4px;
  box-shadow:none;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:44px;
  padding:10px 48px 10px 14px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.35;
  cursor:pointer
}
.measured-charts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px 35px;
  margin-bottom:20px
}
.metric-chart {
  border-top:1px solid var(--line);
  padding-top:15px;
  margin:0
}
.metric-chart h3 {
  font-size:15px;
  margin:0 0 5px;
  letter-spacing:-.01em
}
.metric-chart svg {
  display:block;
  width:100%;
  height:auto
}
.metric-chart figcaption {
  margin:0;
  font-size:10px
}
.chart-dot {
  stroke:var(--paper);
  stroke-width:1
}
.chart-mean {
  stroke-width:3
}
.results {
  margin:38px 0 24px
}
.intervals {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 0;
  font-size:12px
}
.intervals summary {
  cursor:pointer;
  font-size:14px
}
.intervals>p {
  max-width:80ch;
  margin-top:20px;
  color:var(--muted)
}
.caveat {
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:35px;
  margin-top:30px
}
.caveat p {
  font-size:12px;
  color:var(--muted)
}
.rank-comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  border-top:1px solid var(--line);
  padding:30px 0 10px
}
.rank-comparison p:not(.formula) {
  font-size:14px;
  color:var(--muted);
  max-width:45ch
}
.formula {
  font-family:Georgia,serif;
  font-size:36px;
  margin:20px 0
}
.next-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:42px;
  border-top:1px solid var(--ink);
  padding:25px 0
}
.next-grid p {
  font-size:13px;
  color:var(--body);
  margin-top:15px
}
footer {
  border-top:1px solid var(--line);
  padding:35px 0 55px;
  margin-top:70px;
  display:flex;
  justify-content:space-between;
  gap:30px
}
footer p {
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}
.footer-links {
  display:flex;
  gap:25px;
  font-size:11px
}
@media(min-width:1600px) {
  h1 {
    font-size:76px
  }
}
@media(max-width:1000px) {
  main,.masthead {
    width:calc(100% - 64px)
  }
  .opening-grid {
    gap:25px
  }
  .figure-thought {
    font-size:18px
  }
  .section-intro {
    gap:40px
  }
  .edition {
    font-size:9px
  }
  .footer-links {
    flex-wrap:wrap
  }
}
@media(max-width:700px) {
  main,.masthead {
    width:calc(100% - 40px)
  }
  .masthead {
    height:68px
  }
  nav {
    gap:15px
  }
  .wordmark span {
    display:none
  }
  .hero {
    padding-top:38px
  }
  .eyebrow {
    font-size:9px
  }
  .edition {
    display:none
  }
  h1 {
    font-size:clamp(40px,10vw,52px);
    margin:28px 0;
    line-height:1.04
  }
  .hero-bottom {
    display:block
  }
  .hero-bottom p {
    font-size:14px
  }
  .project-summary>div {
    grid-template-columns:1fr;
    gap:8px;
    padding:17px 0
  }
  .project-summary dd {
    font-size:13px
  }

  .problem-flow {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    font-size:12px
  }
  .problem-flow span:nth-child(even) {
    transform:rotate(90deg)
  }
  .method-definitions,.dataset-description,.evaluation-grid,.result-findings {
    grid-template-columns:1fr;
    gap:25px
  }
  .dataset-description article+article {
    border-top:1px solid var(--line);
    padding-top:25px
  }
  .report-prose p {
    font-size:14px
  }
  .report-prose .research-question {
    font-size:19px
  }
  .result-interpretation {
    font-size:16px
  }
  .hero-bottom .text-link {
    margin-top:8px
  }
  .opening-figure {
    margin-top:38px
  }
  .figure-heading {
    font-size:9px;
    display:block
  }
  .figure-heading span {
    display:block;
    margin-bottom:8px
  }
  .opening-grid {
    grid-template-columns:1fr 1fr;
    padding:24px 0;
    gap:30px 20px
  }
  .opening-grid strong {
    font-size:29px;
    letter-spacing:-.04em
  }
  .metric-label {
    font-size:9px
  }
  .metric-foot {
    font-size:9px
  }
  .figure-thought {
    grid-column:1/-1;
    font-size:19px;
    max-width:28ch
  }
  .chapter {
    padding-top:65px
  }
  .section-intro {
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:28px
  }
  h2 {
    font-size:34px
  }
  .section-intro>p {
    font-size:14px;
    max-width:none
  }
  .pipeline {
    overflow:auto
  }
  .pipeline svg {
    min-width:650px
  }
  .protocol-strip {
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .evidence-controls {
    display:block
  }
  .evidence-controls label {
    margin-top:20px
  }
  .legend {
    gap:12px
  }
  .measured-charts {
    grid-template-columns:1fr;
    gap:25px
  }
  .caveat {
    grid-template-columns:1fr;
    gap:0
  }
  .caveat .chapter-label {
    margin-bottom:10px
  }
  .rank-comparison {
    gap:30px
  }
  .formula {
    font-size:27px
  }
  .rank-comparison p:not(.formula) {
    font-size:12px
  }
  .next-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  footer {
    display:block;
    margin-top:40px
  }
  .footer-links {
    margin-top:25px;
    gap:20px
  }
  figcaption,.small {
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}
@media print {
  nav,.evidence-controls,.skip {
    display:none
  }
  .chapter {
    padding-top:30px
  }
  main,.masthead {
    width:100%
  }
  details {
    display:block
  }
}




/* --- controls ---
   Hidden until the controller script marks the figure interactive, so a
   no-JavaScript reader sees the static schematic and no dead buttons. */
.pipeline-controls {
  display:none
}
.pipeline[data-interactive=true] .pipeline-controls {
  display:flex;
  flex-wrap:wrap;
  gap:18px 28px;
  align-items:center;
  margin-bottom:22px;
  font-size:12px
}
.pipeline-controls label {
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted)
}
.pipeline-controls .select-shell { width:304px }
.pipeline-phases {
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid var(--control-rule);
  border-radius:4px;
  background:var(--control-paper)
}
.pipeline-phases button {
  -webkit-appearance:none;
  appearance:none;
  border:0;
  border-bottom:2px solid transparent;
  border-radius:2px;
  box-shadow:none;
  background:transparent;
  color:var(--body);
  min-height:44px;
  padding:10px 11px 8px;
  cursor:pointer;
  font:12px ui-monospace,SFMono-Regular,Consolas,monospace
}
.pipeline-phases button:hover { color:var(--focus) }
.pipeline-phases button[aria-pressed=true] {
  background:var(--focus-wash);
  border-bottom-color:var(--focus);
  color:var(--focus)
}
.pipeline-play {
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--control-rule);
  border-radius:4px;
  box-shadow:none;
  background:var(--control-paper);
  color:var(--ink);
  min-height:44px;
  padding:10px 15px;
  cursor:pointer;
  font:12px ui-monospace,SFMono-Regular,Consolas,monospace
}
.pipeline-play::before {
  content:"";
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid var(--focus)
}
.pipeline-play:hover { border-color:var(--focus) }
.pipeline-play[aria-pressed=true] {
  border-color:var(--focus);
  color:var(--focus)
}
.pipeline-play[aria-pressed=true]::before {
  width:7px;
  height:10px;
  border:0;
  border-left:2px solid var(--focus);
  border-right:2px solid var(--focus)
}

/* --- readout --- */
.pipeline-readout {
  font-size:13px;
  color:var(--body);
  margin:18px 0 0;
  min-height:3.4em;
  max-width:70ch
}
.pipeline-readout strong {
  color:var(--ink)
}

/* --- base diagram state --- */
.pipeline svg {
  width:100%;
  height:auto;
  display:block
}
.pipeline .wires {
  stroke:var(--wire)
}
.unit-note {
  font-size:11px;
  fill:var(--muted)
}
.ema-caption {
  font-size:11px;
  fill:var(--flow-ema);
  text-anchor:end;
  opacity:0
}
/* Each role class only names its pigment; the one rule below paints with it.
   Qualified with .pipeline so it beats the original
   `.diagram-block rect { fill:none }` whatever the source order. */
.role-input     { --block:var(--pig-shiracha-fill);   --block-deep:var(--pig-shiracha-deep);   --block-line:var(--pig-shiracha-line) }
.role-encoder   { --block:var(--pig-ai-fill);         --block-deep:var(--pig-ai-deep);         --block-line:var(--pig-ai-line) }
.role-predictor { --block:var(--pig-futaai-fill);     --block-deep:var(--pig-futaai-deep);     --block-line:var(--pig-futaai-line) }
.role-projector { --block:var(--pig-byakuroku-fill);  --block-deep:var(--pig-byakuroku-deep);  --block-line:var(--pig-byakuroku-line) }
.role-sigreg    { --block:var(--pig-rokusho-fill);    --block-deep:var(--pig-rokusho-deep);    --block-line:var(--pig-rokusho-line) }
.role-loss      { --block:var(--pig-bengara-fill);    --block-deep:var(--pig-bengara-deep);    --block-line:var(--pig-bengara-line) }

.pipeline .diagram-block rect {
  fill:var(--block);
  stroke:var(--block-line);
  stroke-width:1.6;
  transition:fill .3s, stroke-width .25s
}

/* Elements switched off by the selected condition. Dimmed, never removed:
   the figure must still read as one shared apparatus. */
.pipeline[data-sigreg=off] .w-reg,
.pipeline[data-sigreg=off] .b-reg,
.pipeline[data-sigreg=off] #projector-label,
.pipeline[data-sigreg=off] .diagram-accent {
  opacity:.18
}
.pipeline[data-projector=off] [data-unit=projector] {
  stroke-dasharray:4 4
}
.pipeline[data-ema=on] .ema-caption {
  opacity:1
}
.wire-ema path {
  fill:none;
  stroke:var(--flow-ema);
  stroke-width:1.5;
  stroke-dasharray:5 4;
  opacity:0
}
.pipeline[data-ema=on] .wire-ema path {
  opacity:.55
}
.pipeline[data-ema=off] .wire-ema,
.pipeline[data-ema=off] [marker-end="url(#arrow-ema)"] {
  opacity:0
}

/* Stop-gradient barrier */
.stopgrad-mark {
  opacity:0;
  transition:opacity .25s
}
.stopgrad-mark line {
  stroke:var(--flow-grad);
  stroke-width:2.5
}
.stopgrad-mark text {
  font-size:10px;
  fill:var(--flow-grad);
  text-anchor:start
}
.pipeline[data-stopgrad=on][data-phase=backward] .stopgrad-mark {
  opacity:1
}
/* With stop-gradient the target wire carries no gradient at all. */
.pipeline[data-stopgrad=on] .w-grad-target {
  display:none
}

/* --- flow overlays --- */
.flow path {
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:14 86;
  stroke-dashoffset:100;
  opacity:0
}
.flow-forward path {
  stroke:var(--flow-forward)
}
.flow-forward path.w-reg {
  stroke:var(--flow-reg)
}
.flow-grad path {
  stroke:var(--flow-grad)
}

/* A path only animates when its phase is the active one. Without
   .motion-ready (reduced motion, small screens, no JS) nothing moves and the
   static schematic is what remains. */
.motion-ready .pipeline[data-phase=forward] .flow path[data-phase=forward],
.motion-ready .pipeline[data-phase=loss] .flow path[data-phase=loss],
.motion-ready .pipeline[data-phase=backward] .flow path[data-phase=backward] {
  opacity:1;
  animation:pipeline-flow 1.45s linear infinite
}
.motion-ready .pipeline[data-sigreg=off] .flow path.w-reg {
  animation:none;
  opacity:0
}
@keyframes pipeline-flow {
  from { stroke-dashoffset:100 }
  to   { stroke-dashoffset:0 }
}

/* Phase 4: the parameters that this step actually updates. */
.motion-ready .pipeline[data-phase=update] [data-unit=context],
.motion-ready .pipeline[data-phase=update] [data-unit=predictor],
.motion-ready .pipeline[data-phase=update][data-projector=on] [data-unit=projector] {
  fill:var(--block-deep);
  stroke:var(--flow-grad);
  stroke-width:3;
  animation:pipeline-pulse 1.3s ease-in-out infinite
}
.motion-ready .pipeline[data-phase=update][data-ema=on] .wire-ema path {
  opacity:1;
  animation:pipeline-flow 1.3s linear infinite
}
@keyframes pipeline-pulse {
  0%,100% { stroke-opacity:.35 }
  50%     { stroke-opacity:1 }
}
.pipeline[data-playing=false] .flow path,
.pipeline[data-playing=false] .wire-ema path,
.pipeline[data-playing=false] .diagram-block rect {
  animation-play-state:paused
}
:root:not(.motion-ready) .pipeline-play {
  display:none
}
.pipeline[data-phase=update] [data-unit=context],
.pipeline[data-phase=update] [data-unit=predictor],
.pipeline[data-phase=update][data-projector=on] [data-unit=projector],
.pipeline[data-phase=backward][data-projector=on] [data-unit=projector] {
  fill:var(--block-deep);
  stroke:var(--flow-grad);
  stroke-width:3
}

/* Non-animated emphasis: which blocks are involved in the current phase.
   This applies with or without motion, so the stepper stays useful under
   prefers-reduced-motion. */
/* Emphasis keeps each block's own pigment — a second wash of the same colour
   plus a heavier line, rather than repainting everything one colour or
   running a saturate() filter, which turns earth tones garish. */
.pipeline[data-phase=forward] [data-unit=context],
.pipeline[data-phase=forward] [data-unit=target],
.pipeline[data-phase=forward] [data-unit=predictor],
.pipeline[data-phase=loss] [data-unit=loss],
.pipeline[data-phase=backward] [data-unit=predictor],
.pipeline[data-phase=backward] [data-unit=context],
.pipeline[data-phase=loss][data-sigreg=on] [data-unit=sigreg],
.pipeline[data-phase=forward][data-projector=on] [data-unit=projector] {
  fill:var(--block-deep);
  stroke-width:3
}
/* No stop-gradient: the gradient reaches the target branch too, which is the
   pathway the control condition leaves open. */
.pipeline[data-phase=backward][data-stopgrad=off] [data-unit=target] {
  fill:var(--block-deep);
  stroke:var(--flow-grad);
  stroke-width:3
}

@media(max-width:700px) {
  .pipeline-controls {
    gap:12px 16px
  }
  .pipeline-readout {
    min-height:0
  }
}
@media(prefers-reduced-motion:reduce) {
  .flow path { opacity:0 }
  .wire-ema path { animation:none }
}

/* Contents stays beside the publication on wide screens. */
.reading-layout {
  width:min(1480px,calc(100% - 112px));
  margin:auto;
  display:grid;
  grid-template-columns:180px minmax(0,1fr);
  gap:40px;
  align-items:start
}
.reading-layout main {
  width:100%;
  margin:0;
  min-width:0
}
.contents {
  position:sticky;
  top:32px;
  padding-top:62px;
  max-height:calc(100vh - 64px);
  overflow:auto
}
.contents-heading {
  font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin:0 0 16px
}
.contents nav { display:block }
.contents ol {
  list-style:none;
  margin:0;
  padding:0
}
.contents li { margin:0 0 3px }
.contents a {
  display:block;
  padding:9px 10px;
  border-left:2px solid transparent;
  color:var(--muted);
  font-size:12px;
  line-height:1.4
}
.contents li ol {
  margin:0 0 10px 14px
}
.contents li ol a {
  font-size:11px;
  padding:6px 10px
}
.contents a[aria-current=location] {
  color:var(--focus);
  border-left-color:var(--focus);
  font-weight:600
}
.contents-toggle { display:none }
@media(max-width:1199px) {
  .reading-layout {
    display:block;
    width:calc(100% - 64px)
  }
  .contents {
    position:static;
    max-height:none;
    padding:20px 0;
    border-bottom:1px solid var(--line)
  }
  .contents[data-interactive=true] {
    position:sticky;
    top:0;
    z-index:20;
    padding:0;
    background:var(--paper)
  }
  .contents[data-interactive=true] .contents-heading { display:none }
  .contents[data-interactive=true] .contents-toggle {
    display:flex;
    width:100%;
    align-items:center;
    gap:14px;
    min-height:56px;
    padding:12px 0;
    border:0;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    text-align:left;
    font:12px ui-monospace,SFMono-Regular,Consolas,monospace
  }
  .contents-current {
    margin-left:auto;
    color:var(--focus);
    text-align:right
  }
  .contents-chevron { font-size:18px }
  .contents[data-open=false] nav { display:none }
  .contents[data-open=true] nav {
    max-height:calc(100vh - 100px);
    overflow:auto;
    padding-bottom:16px
  }
  .contents[data-open=true] .contents-chevron { transform:rotate(180deg) }
}
@media(max-width:700px) {
  .reading-layout { width:calc(100% - 40px) }
}
@media print {
  .contents { display:none }
  .reading-layout { display:block; width:100% }
}

.table-reading { margin:28px 0 20px; max-width:85ch }
@media(max-width:1199px) {
  .measured-charts { grid-template-columns:1fr }
}

.legend .regularized { background:var(--ink) }

/* Iron-oxide warnings and muted malachite findings highlight the narrative. */
.project-summary .summary-problem dt,
#motivation>.chapter-label,
.issue-label,
.report-prose .issue-label,
#motivation .focus-label { color:var(--issue) }
#motivation .research-question {
  color:var(--issue);
  border-left-color:var(--issue)
}
.project-summary .summary-finding dt,
#evidence>.chapter-label,
.table-reading .focus-label,
.result-interpretation .takeaway { color:var(--finding) }
.summary-finding dd strong {
  color:var(--finding);
  text-decoration-color:var(--finding)
}
.finding-issue { --finding-tone:var(--issue) }
.finding-result { --finding-tone:var(--finding) }
.result-findings li {
  border-top-color:var(--finding-tone)
}
.result-findings li h3,
.result-findings li::before { color:var(--finding-tone) }
.caveat .chapter-label { color:var(--issue) }

/* Paired forest plots are neutral: colour does not encode a verdict. */
.uncertainty-intro { margin:26px 0 }
.uncertainty-controls { margin:20px 0 32px }
.uncertainty-controls label { font-size:13px }
.uncertainty-controls .select-shell { margin-left:12px }
.uncertainty-group[hidden] { display:none }
.uncertainty-figure {
  margin:28px 0 36px;
  border-top:1px solid var(--line);
  padding-top:18px
}
.uncertainty-figure h3 { font-size:20px; margin:0 0 16px }
.uncertainty-figure svg { width:100%; height:auto; display:block }
.uncertainty-figure .interval-compact { display:none }
.interval-grid { stroke:var(--grid); stroke-width:1 }
.interval-zero { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:5 4 }
.interval-bar,.interval-cap { stroke:var(--ink); stroke-width:2 }
.interval-seed { fill:var(--muted); opacity:.7 }
.interval-mean { fill:var(--ink); stroke:var(--paper); stroke-width:1 }
.interval-label { fill:var(--ink); font:600 14px Arial,Helvetica,sans-serif }
.interval-arm { fill:var(--body); font:13px Arial,Helvetica,sans-serif }
.interval-tick { fill:var(--muted); font:12px ui-monospace,monospace }
.interval-direction { fill:var(--muted); font:13px Arial,Helvetica,sans-serif }
.uncertainty-figure figcaption {
  font-size:12px;
  color:var(--muted);
  max-width:80ch;
  margin:12px 0 0
}
.uncertainty-method { margin:28px 0 }
.intervals .report-prose { font-size:16px; max-width:85ch }
.intervals .report-prose p { font-size:15px }

/* Define the quantities before the equations, then work an explicit example. */
.rank-start { margin:24px 0 32px; max-width:85ch }
.rank-comparison { gap:40px }
.rank-comparison article { min-width:0 }
.rank-comparison h3 { font-size:22px; line-height:1.3; margin:14px 0 18px }
.rank-comparison p:not(.formula) { color:var(--body); line-height:1.65; max-width:none }
.rank-comparison math { font-size:27px; margin:25px 0; text-align:left; overflow-x:auto; max-width:100% }
.rank-example,.rank-limits { max-width:85ch; margin:30px 0 }
.rank-example { border-top:1px solid var(--line); padding-top:12px }
.rank-example li { margin:16px 0; color:var(--body); font-size:15px; line-height:1.65 }
.rank-limits .small { font-size:12px }
.rank-limits h3 { color:var(--issue) }
@media(max-width:1199px) {
  .rank-comparison { grid-template-columns:1fr }
}
@media(max-width:900px) {
  .uncertainty-figure .interval-wide { display:none }
  .uncertainty-figure .interval-compact { display:block; max-width:540px }
}
@media(max-width:700px) {
  .rank-comparison math { font-size:24px }
  .rank-example ol { padding-left:22px }
}

/* Expandable editorial rows use the same ochre chevron as the selectors. */
.technical-method summary,.intervals summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:48px;
  padding:10px 2px;
  list-style:none;
  color:var(--ink);
  font-size:15px;
  line-height:1.45;
  cursor:pointer
}
summary::-webkit-details-marker { display:none }
.technical-method summary::marker,.intervals summary::marker { content:"" }
.technical-method summary::after,.intervals summary::after {
  content:"";
  flex:0 0 8px;
  width:8px;
  height:8px;
  margin-right:8px;
  border-right:1.5px solid var(--focus);
  border-bottom:1.5px solid var(--focus);
  transform:rotate(45deg)
}
.technical-method[open]>summary::after,.intervals[open]>summary::after {
  transform:rotate(225deg)
}
.technical-method summary:hover,.intervals summary:hover { color:var(--focus) }
.technical-method[open]>summary,.intervals[open]>summary { font-weight:600 }
.evidence-controls label,.pipeline-controls label,.uncertainty-controls label {
  font:12px ui-monospace,SFMono-Regular,Consolas,monospace;
  line-height:1.5;
  color:var(--muted)
}
.contents-chevron {
  font-size:0;
  width:8px;
  height:8px;
  margin:0 2px 4px 4px;
  border-right:1.5px solid var(--focus);
  border-bottom:1.5px solid var(--focus);
  transform:rotate(45deg)
}
.contents[data-open=true] .contents-chevron { transform:rotate(225deg) }
@media(max-width:700px) {
  .pipeline-controls label {
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    width:100%
  }
  .pipeline-controls .select-shell { width:100% }
}
@media(max-width:480px) {
  .pipeline-controls select { padding-left:12px; padding-right:44px }
  .pipeline-phases {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%
  }
  .evidence-controls label { flex-wrap:wrap }
}
@media(forced-colors:active) {
  .select-shell::after,.contents-chevron,
  .technical-method summary::after,.intervals summary::after {
    border-color:ButtonText
  }
  .pipeline-phases button[aria-pressed=true] { border-bottom-color:Highlight }
}

/* Final synthesis: retain the paper/pigment palette and readable native tables. */
.paired-summary svg { width: 100%; height: auto; font: 12px Arial, sans-serif; fill: var(--ink); }
.paired-summary { margin: 2rem 0; }
.evidence-document { max-width: 78rem; margin: 3rem auto; padding: 1.5rem; }
.evidence-document pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .9rem/1.7 monospace; }
.evidence-document p { overflow-wrap: anywhere; }
.table-scroll:focus-visible { outline: 2px solid var(--reference); outline-offset: 4px; }
@media (max-width: 600px) { .paired-summary { overflow-x: auto; } .paired-summary svg { min-width: 650px; } }

/* Integrated case study: the figure owns the space; the interface stays quiet. */
.instrument-figure,.compression-method,.margin-illustration,.caption-illustration {
  margin:44px 0 30px;
  border-top:1px solid var(--line);
  padding-top:20px
}
.instrument-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; margin:30px 0 }
.instrument-grid svg { display:block; width:100%; height:auto; max-height:125px; fill:var(--ink) }
.instrument-grid h3 { font-size:19px; line-height:1.25; font-weight:500; margin:12px 0 }
.instrument-grid p { font-size:13px; color:var(--body); margin:0 }
.concept-rule { fill:none; stroke:var(--line); stroke-width:1.5 }
.concept-line { fill:none; stroke:var(--ink); stroke-width:1.5 }
.concept-ring { fill:none; stroke:var(--muted); stroke-width:1.5 }
.concept-alt { fill:var(--focus) }
.concept-positive { fill:none; stroke:var(--finding); stroke-width:5 }
.study-designs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; margin:36px 0 }
.study-designs>article { border-top:1px solid var(--line); padding-top:20px; min-width:0 }
.study-designs h3 { font-size:25px; font-weight:500; letter-spacing:-.03em; line-height:1.25; margin:12px 0 20px }
.study-designs p { font-size:15px; color:var(--body); max-width:68ch }
.study-designs p a,.evaluation-grid p a,.section-links a { text-decoration:underline; text-underline-offset:4px }
.frozen-path { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:12px/1.5 ui-monospace,monospace }
.frozen-path>span:nth-child(even) { color:var(--focus) }
.section-intro h2 { max-width:none }
.plot-grid { display:grid; gap:34px; margin:36px 0 30px }
.plot-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.plot-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.research-plot { min-width:0; margin:0; padding-top:18px; border-top:1px solid var(--line) }
.research-plot h3 { font-size:18px; line-height:1.35; font-weight:500; margin:0 0 20px; min-height:2.7em }
.research-plot svg { display:block; width:100%; height:auto; font:16px Arial,sans-serif; fill:var(--ink); overflow:visible }
.research-plot .plot-tick { font:14px ui-monospace,monospace; fill:var(--muted) }
.research-plot .plot-value { font:16px ui-monospace,monospace }
.plot-gridline,.plot-track { stroke:var(--grid); stroke-width:1; fill:none }
.plot-floor { stroke:var(--muted); stroke-width:1.3; stroke-dasharray:4 4; fill:none }
.paired-zero { stroke:var(--muted); stroke-width:1.4; stroke-dasharray:4 4; fill:none }
.paired-ci-line { stroke:var(--ink); stroke-width:2; fill:none }
.research-plot figcaption { font-size:12px; line-height:1.65; margin-top:18px; max-width:65ch }
.finding-line { font-size:clamp(20px,2vw,25px); line-height:1.5; max-width:85ch; padding-top:20px; margin:30px 0; border-top:1px solid var(--line); color:var(--body) }
.finding-line strong { color:var(--finding); font-weight:500 }
.section-links { display:flex; flex-wrap:wrap; gap:16px 28px; margin:30px 0; font:12px/1.7 ui-monospace,monospace }
.transform-key { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:32px 0 44px }
.transform-key>div { border-top:1px solid var(--line); padding-top:16px }
.transform-key strong { display:block; font-size:15px; line-height:1.4; font-weight:400; margin-top:10px }
.measurement-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:30px 0 38px }
.measurement-strip>div { border-top:1px solid var(--line); padding-top:18px }
.measurement-strip dt { font:12px/1.5 ui-monospace,monospace; color:var(--muted); margin-bottom:16px }
.measurement-strip dd { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; font:17px/1.5 ui-monospace,monospace }
.measurement-strip dd>span:nth-child(2) { color:var(--focus) }
.measurement-strip strong { font-weight:500 }
.dimension-bars { display:grid; gap:12px; margin:30px 0; padding-right:45px }
.dimension-bars>div { position:relative; height:13px; width:var(--fraction); background:var(--comparison) }
.dimension-bars>div:first-child { background:var(--reference) }
.dimension-bars span { position:absolute; left:calc(100% + 12px); top:-2px; font:13px ui-monospace,monospace }
.pca-schematic { display:grid; gap:10px; margin-top:26px; font:13px/1.5 ui-monospace,monospace }
.pca-schematic>span:nth-child(even) { color:var(--focus) }
.plot-legend { display:flex; flex-wrap:wrap; gap:18px 30px; font:12px/1.5 ui-monospace,monospace; margin:30px 0 }
.plot-legend span { display:flex; align-items:center; gap:8px }
.legend-circle,.legend-square { display:inline-block; width:9px; height:9px; background:var(--ink) }
.legend-circle { border-radius:50% }
.plot-legend .native { background:var(--reference) }
.plot-legend .mrl,.plot-legend .prefix128 { background:var(--comparison) }
.plot-legend .pca,.plot-legend .prefix256 { background:var(--focus) }
.boundary-example { display:grid; grid-template-columns:1fr .7fr 1fr; align-items:center; gap:30px; margin:36px 0 }
.boundary-example p { font-size:16px; margin:18px 0 0; padding-bottom:12px; border-bottom:1px solid var(--line) }
.boundary-example b { font:12px ui-monospace,monospace; color:var(--muted); margin-right:12px }
.boundary-example p>span { display:block; margin:6px 0 0 32px; font:11px ui-monospace,monospace; color:var(--muted) }
.boundary-gap { font:12px/1.5 ui-monospace,monospace; color:var(--muted); text-align:center }
.boundary-gap svg { display:block; width:100%; margin:12px 0; fill:var(--ink) }
.caption-demo { display:grid; grid-template-columns:.85fr 1.4fr 1.15fr; align-items:center; gap:40px; margin:36px 0 }
.caption-target svg { width:100%; max-width:200px; display:block; margin:18px 0 }
.caption-target p { font:13px/1.7 ui-monospace,monospace; margin:0 }
.caption-ranking ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 25px; padding:0; list-style:none; counter-reset:rank; margin:20px 0 0 }
.caption-ranking li { counter-increment:rank; border-bottom:1px solid var(--line); padding:10px 0; font:13px ui-monospace,monospace }
.caption-ranking li::before { content:counter(rank,decimal-leading-zero); color:var(--muted); margin-right:12px; font-size:11px }
.caption-ranking li.positive { color:var(--finding); font-weight:700; border-bottom-color:var(--finding) }
.caption-reading p { font-size:14px; margin:20px 0 }
.caption-reading strong { display:block; color:var(--finding); font-weight:500 }
.caption-reading span { display:block; font-size:12px; line-height:1.6; color:var(--muted); margin-top:6px }
.paired-uncertainty-layout { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin:50px 0 }
.interval-explanation h3 { font-size:30px; line-height:1.2; font-weight:500; letter-spacing:-.025em; margin:14px 0 24px }
.interval-explanation p { font-size:15px; color:var(--body) }
.conclusion-list { list-style:none; padding:0; counter-reset:insight; margin:45px 0 }
.conclusion-list li { display:grid; grid-template-columns:.85fr 1.2fr; gap:36px; border-top:1px solid var(--line); padding:22px 0 }
.conclusion-list h3 { margin:0; font-size:22px; line-height:1.4; font-weight:500; color:var(--finding) }
.conclusion-list p { margin:0; font-size:15px; color:var(--body) }
.limits-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:24px 0 32px }
.limits-grid h4 { margin:0 0 12px; font:12px ui-monospace,monospace; color:var(--issue) }
.limits-grid p { font-size:14px; color:var(--body) }
.technical-method>h3 { margin-top:35px; font-size:22px; font-weight:500 }
.technical-method .plot-grid { margin-bottom:40px }
@media(min-width:1200px) {
  .contents nav>ol { gap:10px }
  .contents nav ol ol { gap:5px }
}
@media(max-width:1000px) {
  .plot-grid.three { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .instrument-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .limits-grid { grid-template-columns:1fr }
  .caption-demo { gap:24px; grid-template-columns:1fr 1.5fr }
  .caption-reading { grid-column:1 / -1; display:flex; gap:26px }
}
@media(max-width:700px) {
  .study-designs,.plot-grid.two,.plot-grid.three,.measurement-strip,.paired-uncertainty-layout,.conclusion-list li { grid-template-columns:1fr }
  .study-designs { gap:28px }
  .transform-key { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .research-plot h3 { min-height:0 }
  .plot-grid { gap:35px }
  .measurement-strip { gap:20px }
  .frozen-path { flex-wrap:wrap; justify-content:flex-start; font-size:11px }
  .boundary-example { grid-template-columns:1fr 1fr; gap:20px }
  .boundary-gap { grid-column:1 / -1; grid-row:2; display:flex; align-items:center; gap:20px; text-align:left }
  .boundary-gap svg { max-width:90px }
  .caption-demo { grid-template-columns:1fr; gap:28px }
  .caption-target { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:15px }
  .caption-target .metric-label { grid-column:1 / -1 }
  .caption-target svg { margin:0 }
  .caption-ranking ol { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .caption-reading { display:block }
  .caption-reading p { margin:14px 0 }
  .paired-uncertainty-layout { gap:35px }
  .conclusion-list li { gap:14px }
  .instrument-grid { gap:20px }
  .instrument-grid h3 { font-size:17px }
  .figure-heading { font-size:10px; flex-wrap:wrap }
}

/* Compact measured panels use body-scale labels rather than enlarging SVG type. */
.compact-plots { max-width:840px; gap:28px }
.compact-plots .research-plot svg { max-width:400px }
.paired-uncertainty-layout { grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:40px; max-width:900px }
.caption-source-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:32px; margin:24px 0 }
.caption-photo img { display:block; width:100%; height:auto; max-width:320px }
.caption-photo p { font-size:11px; line-height:1.6; color:var(--muted); max-width:48ch }
.caption-photo a { text-decoration:underline; text-underline-offset:3px }
.recorded-captions ol { list-style:none; padding:0; margin:14px 0 0 }
.recorded-captions li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; padding:9px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.55 }
.recorded-captions li>span { color:var(--finding); font:13px/1.7 ui-monospace,monospace }
.recorded-captions q { quotes:none }
.real-caption-demo { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) }
@media(max-width:700px) {
  .paired-uncertainty-layout,.caption-source-grid,.real-caption-demo { grid-template-columns:1fr }
  .caption-photo img { max-width:360px }
  .compact-plots { gap:30px }
}