:root {
  color-scheme: light dark;
  --ink: #001f33;
  --quiet: #5c7180;
  --rule: #a3a3a3;
  --faint: #e4e8ea;
  --bg: #fff;
  --ev-obs-bg: #e8edf0; --ev-obs-fg: #47606d;
  --ev-cor-bg: #f4ecd4; --ev-cor-fg: #6f5713;
  --ev-int-bg: #e0eee3; --ev-int-fg: #1e6a3c;
  --ex-man-bg: #e8e5f6; --ex-man-fg: #4b3fa0;
  --ex-aut-bg: #dbeff0; --ex-aut-fg: #0f646c;
  --wip-bg: #fbf4e2; --wip-fg: #7a5f16; --wip-line: #e0d0a2;
  --chart-bar: #7b527f;
  --ev-1: #c699ca; --ev-2: #a075a3; --ev-3: #7b527f;
  --sans: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ink: #d9e2e9;
    --quiet: #8ea1ae;
    --rule: #526270;
    --faint: #202c34;
    --bg: #0f171d;
    --ev-obs-bg: #243039; --ev-obs-fg: #a3b7c2;
    --ev-cor-bg: #362e10; --ev-cor-fg: #d6b55b;
    --ev-int-bg: #163020; --ev-int-fg: #7fc89d;
    --ex-man-bg: #282344; --ex-man-fg: #b5aaed;
    --ex-aut-bg: #0f3135; --ex-aut-fg: #72c5cd;
    --wip-bg: #332a10; --wip-fg: #d9bb66; --wip-line: #4f4119;
    --chart-bar: #a67aaa;
    --ev-1: #845a88; --ev-2: #a67aaa; --ev-3: #c99ccd;
  }
}
:root[data-theme="dark"] {
  --ink: #d9e2e9;
  --quiet: #8ea1ae;
  --rule: #526270;
  --faint: #202c34;
  --bg: #0f171d;
  --ev-obs-bg: #243039; --ev-obs-fg: #a3b7c2;
  --ev-cor-bg: #362e10; --ev-cor-fg: #d6b55b;
  --ev-int-bg: #163020; --ev-int-fg: #7fc89d;
  --ex-man-bg: #282344; --ex-man-fg: #b5aaed;
  --ex-aut-bg: #0f3135; --ex-aut-fg: #72c5cd;
  --wip-bg: #332a10; --wip-fg: #d9bb66; --wip-line: #4f4119;
  --chart-bar: #a67aaa;
  --ev-1: #845a88; --ev-2: #a67aaa; --ev-3: #c99ccd;
}
* { box-sizing: border-box; }
body { margin: 0 auto; padding: 3rem 1.5rem 5rem; max-width: 50rem; background: var(--bg);
  color: var(--ink); font: 300 1rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-bottom-color: transparent; }
a[rel~="external"]::after { content: "\2197\fe0e"; font-size: .72em; margin-left: .12em;
  color: var(--quiet); }
header { padding-bottom: 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--ink); }
h1 { margin: 0; font-size: 2.1rem; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
body.home h1 { font-size: 2.6rem; letter-spacing: -.035em; }
.tagline { margin: .7rem 0 0; font-family: var(--mono); font-size: .7rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em; color: var(--quiet); }
nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem;
  flex-wrap: wrap; margin-bottom: 2.2rem; font-family: var(--mono); font-size: .7rem;
  font-weight: 400; text-transform: uppercase; letter-spacing: .14em; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
nav a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
nav a:hover, nav a[aria-current] { border-bottom-color: var(--ink); }
.theme-toggle { font: inherit; line-height: 1; cursor: pointer; color: var(--quiet);
  background: none; border: 1px solid var(--rule); border-radius: 2px; padding: .32rem .55rem;
  letter-spacing: inherit; }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-toggle .on-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .on-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .on-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .on-dark { display: inline; }
  :root:not([data-theme]) .theme-toggle .on-light { display: none; }
}
.wip { display: inline-block; margin-left: .6rem; font-family: var(--mono); font-size: .58rem;
  font-weight: 500; text-transform: uppercase; letter-spacing: .12em; line-height: 1.4;
  padding: .16rem .45rem .12rem; border: 1px solid var(--wip-line); border-radius: 2px;
  background: var(--wip-bg); color: var(--wip-fg); white-space: nowrap;
  vertical-align: middle; }
h1 .wip { font-size: .68rem; margin-left: .85rem; vertical-align: .45em; }
h2 { margin: 3rem 0 0; padding-bottom: .5rem; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: .7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .18em; }
p { margin: 0 0 .6rem; }
p:last-child { margin-bottom: 0; }
.ident { display: block; margin-bottom: .35rem; font-family: var(--mono); font-size: .68rem;
  font-weight: 500; letter-spacing: .16em; color: var(--quiet); }
.meta { font-family: var(--mono); font-size: .74rem; font-weight: 400; color: var(--quiet);
  margin: 0 0 .9rem; }
.meta a { border-bottom-color: var(--faint); }
.nowrap { white-space: nowrap; }
.byline { font-family: var(--mono); font-size: .72rem; font-weight: 400; color: var(--quiet);
  margin-bottom: .3rem; }
.source { margin: 0 0 1.2rem; display: flex; gap: .7rem; align-items: baseline;
  flex-wrap: wrap; }
.source-label { font-family: var(--mono); font-size: .62rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--quiet); flex: 0 0 auto; }
.source a { border-bottom-color: var(--rule); }
.source a:hover { border-bottom-color: var(--ink); }
.role { font-family: var(--mono); font-size: .72em; font-weight: 400; color: var(--quiet); }
.badge { display: inline-block; font-family: var(--mono); font-size: .66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.4;
  padding: .16rem .5rem .12rem; border-radius: 2px;
  background: var(--badge-bg, var(--faint)); color: var(--badge-fg, var(--quiet)); }
.badge.observational { --badge-bg: var(--ev-obs-bg); --badge-fg: var(--ev-obs-fg); }
.badge.correlational { --badge-bg: var(--ev-cor-bg); --badge-fg: var(--ev-cor-fg); }
.badge.interventional { --badge-bg: var(--ev-int-bg); --badge-fg: var(--ev-int-fg); }
.badge.manual-extraction { --badge-bg: var(--ex-man-bg); --badge-fg: var(--ex-man-fg); }
.badge.automatic-extraction { --badge-bg: var(--ex-aut-bg); --badge-fg: var(--ex-aut-fg); }
.lede { margin: 1.2rem 0 0; }
ul.entries { list-style: none; margin: 1.1rem 0 0; padding: 0; }
ul.entries li { padding: .7rem 0; border-bottom: 1px solid var(--faint); display: flex;
  gap: 1rem; align-items: baseline; }
ul.entries li:last-child { border-bottom: none; }
.tag { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em;
  color: var(--quiet); flex: 0 0 5rem; }
.entry-body { flex: 1 1 auto; min-width: 0; }
.entry-note { display: block; font-family: var(--mono); font-size: .7rem; color: var(--quiet);
  margin-top: .15rem; }
.count { font-family: var(--mono); font-size: .7rem; color: var(--quiet); flex: 0 0 auto;
  white-space: nowrap; }
dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem 1.5rem; margin: 1.4rem 0 0; }
dt { font-family: var(--mono); font-size: .64rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: .14em; color: var(--quiet); padding-top: .34rem; }
dd { margin: 0; }
dt, dd, h1, .entry-body { min-width: 0; overflow-wrap: anywhere; }
.tabs { margin: 1.6rem 0 0; }
.tabs > .tab-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tab-strip { display: flex; flex-wrap: wrap; gap: 1.4rem;
  border-bottom: 1px solid var(--rule); }
.tab { cursor: pointer; padding-bottom: .5rem; margin-bottom: -1px;
  border-bottom: 1px solid transparent; font-family: var(--mono); font-size: .68rem;
  font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--quiet); }
.tab:hover { color: var(--ink); }
.panels > .panel { display: none; margin-top: 1.5rem; }
.tab-input:nth-of-type(1):checked ~ .panels > .panel:nth-child(1),
.tab-input:nth-of-type(2):checked ~ .panels > .panel:nth-child(2),
.tab-input:nth-of-type(3):checked ~ .panels > .panel:nth-child(3),
.tab-input:nth-of-type(4):checked ~ .panels > .panel:nth-child(4),
.tab-input:nth-of-type(5):checked ~ .panels > .panel:nth-child(5),
.tab-input:nth-of-type(6):checked ~ .panels > .panel:nth-child(6) { display: block; }
.tab-input:nth-of-type(1):checked ~ .tab-strip > .tab:nth-child(1),
.tab-input:nth-of-type(2):checked ~ .tab-strip > .tab:nth-child(2),
.tab-input:nth-of-type(3):checked ~ .tab-strip > .tab:nth-child(3),
.tab-input:nth-of-type(4):checked ~ .tab-strip > .tab:nth-child(4),
.tab-input:nth-of-type(5):checked ~ .tab-strip > .tab:nth-child(5),
.tab-input:nth-of-type(6):checked ~ .tab-strip > .tab:nth-child(6) {
  color: var(--ink); border-bottom-color: var(--ink); }
.tab-input:nth-of-type(1):focus-visible ~ .tab-strip > .tab:nth-child(1),
.tab-input:nth-of-type(2):focus-visible ~ .tab-strip > .tab:nth-child(2),
.tab-input:nth-of-type(3):focus-visible ~ .tab-strip > .tab:nth-child(3),
.tab-input:nth-of-type(4):focus-visible ~ .tab-strip > .tab:nth-child(4),
.tab-input:nth-of-type(5):focus-visible ~ .tab-strip > .tab:nth-child(5),
.tab-input:nth-of-type(6):focus-visible ~ .tab-strip > .tab:nth-child(6) {
  outline: 2px solid var(--ink); outline-offset: 3px; }
.chart { margin: 2.2rem 0 0; }
.chart figcaption { font-family: var(--mono); font-size: .68rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink); }
.chart-note { display: block; margin-top: .45rem; font-family: var(--sans); font-size: .82rem;
  font-weight: 300; text-transform: none; letter-spacing: 0; line-height: 1.55;
  color: var(--quiet); }
ol.bars { list-style: none; margin: 1rem 0 0; padding: 0; }
ol.bars li { display: grid; grid-template-columns: 11rem 1fr 2.6rem; gap: .9rem;
  align-items: center; padding: .24rem 0; }
.bar-label { font-size: .84rem; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.bar-track { height: .68rem; min-width: 0; background: var(--faint); border-radius: 2px; }
.bar-fill { display: block; height: 100%; width: var(--share); background: var(--chart-bar);
  border-radius: 2px; }
.bar-fill.ev-observational { background: var(--ev-1); }
.bar-fill.ev-correlational { background: var(--ev-2); }
.bar-fill.ev-interventional { background: var(--ev-3); }
.bar-value { font-family: var(--mono); font-size: .74rem; color: var(--quiet); text-align: right;
  font-variant-numeric: tabular-nums; }
.diagram-frame { margin: 1.8rem 0 .4rem; overflow-x: auto; }
.diagram { display: block; width: 100%; min-width: 44rem; height: auto; }
.dg-box { fill: var(--bg); stroke: var(--rule); stroke-width: 1; }
.dg-cap { fill: var(--chart-bar); }
.dg-panel { fill: var(--faint); }
.dg-pill { fill: var(--bg); stroke: var(--rule); stroke-width: 1; }
.dg-stack { fill: var(--faint); stroke: var(--rule); stroke-width: 1; }
.dg-line { stroke: var(--quiet); stroke-width: 1.5; }
.dg-head { fill: var(--quiet); }
.dg-key { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--ink); }
.dg-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; fill: var(--quiet); }
.dg-title { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--ink); }
.dg-note { font-family: var(--sans); font-size: 10.5px; font-style: italic; fill: var(--quiet); }
.dg-panel-title { font-family: var(--sans); font-size: 13px; font-weight: 500;
  fill: var(--quiet); }
.dg-pill-text { font-family: var(--sans); font-size: 10.5px; fill: var(--ink); }
.dg-card-title { font-family: var(--sans); font-size: 11.5px; font-weight: 500; fill: var(--ink); }
.dg-mini-title { font-family: var(--sans); font-size: 9.5px; fill: var(--quiet); }
.dg-mini-tick { font-family: var(--sans); font-size: 8px; fill: var(--quiet); }
.dg-mini.ev-observational { fill: var(--ev-1); }
.dg-mini.ev-correlational { fill: var(--ev-2); }
.dg-mini.ev-interventional { fill: var(--ev-3); }
ol.stages { list-style: none; margin: 1.4rem 0 0; padding: 0; }
ol.stages li { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: .8rem 0;
  border-bottom: 1px solid var(--faint); }
ol.stages li:last-child { border-bottom: none; }
.stage-tag { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--quiet); padding-top: .18rem; }
.stage-body { min-width: 0; }
.stage-body strong { font-weight: 500; }
@media (max-width: 36rem) {
  body { padding: 2rem 1.2rem 4rem; }
  body.home h1 { font-size: 2rem; }
  dl { grid-template-columns: 1fr; gap: .15rem 0; }
  dt { padding-top: .7rem; }
  ul.entries li { flex-direction: column; gap: .1rem; }
  .tag { flex: none; }
  ol.bars li { grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .45rem 0; }
  .bar-label { grid-row: 1; grid-column: 1; }
  .bar-value { grid-row: 1; grid-column: 2; }
  .bar-track { grid-row: 2; grid-column: 1 / -1; }
  ol.stages li { grid-template-columns: 1fr; gap: .2rem; }
}