:root { --bg:#fff; --fg:#1b1b1b; --muted:#666; --line:#ddd; --card:#f6f6f4; --accent:#1f5fa8; --bar:#7ba7d7;
  --r-uses-tool-or-method:#2a7f62; --r-uses-data:#6a9f3a; --r-background-claim:#8a7cc2; --r-compares-against:#d08a2e;
  --r-extends-or-modifies:#2e86c1; --r-critiques-or-contradicts:#c0392b; --r-incidental:#999; }
@media (prefers-color-scheme: dark) { :root { --bg:#151618; --fg:#e6e6e6; --muted:#9a9a9a; --line:#333; --card:#1f2124; --accent:#7fb2ff; --bar:#4a6f9c; } }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif }
a { color:var(--accent) }
header { position:sticky; top:0; z-index:1; display:flex; gap:1rem; align-items:baseline; padding:.75rem 1rem; background:var(--bg); border-bottom:1px solid var(--line) }
header .brand { font-weight:700; text-decoration:none; color:var(--fg) }
header .tag { color:var(--muted); font-size:.9rem }
header .right { font-size:.9rem }
header select.jump { margin-left:auto } header form.jump { display:flex; gap:.25rem }
header .jump input { width:14rem; max-width:30vw } header select.jump { width:7rem }
header .jump input, select.jump { font:inherit; font-size:.9rem; padding:.25rem .5rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg) } header .jump button { font:inherit; font-size:.9rem; padding:.25rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer }
main { max-width:960px; margin:0 auto; padding:1rem }
[id] { scroll-margin-top:3.5rem }  /* anchor jumps land below the sticky header */
h1 { font-size:1.5rem; line-height:1.3 } h2 { font-size:1.2rem; margin-top:2rem; border-bottom:1px solid var(--line); padding-bottom:.25rem } h3 { font-size:1rem; margin:1.25rem 0 .5rem }
.muted { color:var(--muted) } .small { font-size:.85rem }
.rowhead { display:flex; align-items:baseline; gap:1rem; margin-top:2rem; border-bottom:1px solid var(--line); padding-bottom:.25rem }
.rowhead h2 { flex:1; margin-top:0; border-bottom:none; padding-bottom:0 }
.card { background:var(--card); border-radius:8px; padding:1rem; margin:.75rem 0 }
.card a.title { font-weight:600; text-decoration:none; display:block }
.nums { display:flex; gap:1.5rem; flex-wrap:wrap; margin:.5rem 0 } .nums b { display:block; font-size:1.3rem } .nums span { color:var(--muted); font-size:.85rem }
form.live { display:flex; gap:.5rem; flex-wrap:wrap } form.live input { flex:1; min-width:16rem; padding:.5rem; font:inherit; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg) } form.live button { padding:.5rem 1rem; font:inherit; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer }
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-top:1rem } .tabs button { font:inherit; padding:.5rem .9rem; border:1px solid transparent; border-bottom:none; background:none; color:var(--muted); cursor:pointer; border-radius:6px 6px 0 0 } .tabs button.on { color:var(--fg); border-color:var(--line); background:var(--card) } .tabs.top { margin-top:1.5rem } .tabs.top button { font-weight:600 }
.strip { display:flex; height:.5rem; border-radius:3px; overflow:hidden; margin:.1rem 0 .4rem } .strip i { min-width:2px }
.bars { display:grid; grid-template-columns:max-content 1fr max-content; gap:.25rem .6rem; align-items:center; font-size:.9rem } .bars .bar { height:1rem; background:var(--bar); border-radius:2px; min-width:1px } .bars .n { color:var(--muted); font-variant-numeric:tabular-nums }
.years { display:flex; align-items:flex-end; gap:2px; height:90px; margin:.5rem 0 } .years div { flex:1; background:var(--bar); border-radius:2px 2px 0 0; position:relative } .years div:hover::after { content:attr(data-l); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:.75rem; background:var(--fg); color:var(--bg); padding:1px 4px; border-radius:3px; white-space:nowrap }
.yl { display:flex; justify-content:space-between; font-size:.75rem; color:var(--muted) }
ol.claims li { margin:.6rem 0 } .chip { display:inline-block; font-size:.75rem; padding:0 .4rem; border:1px solid var(--line); border-radius:10px; margin-left:.2rem; cursor:pointer; color:var(--accent); background:var(--bg) } .chip:hover { border-color:var(--accent) }
.role { display:inline-block; font-size:.75rem; padding:0 .45rem; border-radius:10px; color:#fff; background:var(--muted) }
details { margin:.4rem 0 } summary { cursor:pointer } details .pass { border-left:3px solid var(--line); padding:.25rem .75rem; margin:.5rem 0; font-size:.92rem } .pass .src { color:var(--muted); font-size:.8rem }
table { width:100%; border-collapse:collapse; font-size:.9rem } td, th { text-align:left; padding:.35rem .5rem; border-bottom:1px solid var(--line); vertical-align:top } th { color:var(--muted); font-weight:600 }
.struct h3 { margin-top:1.5rem } .struct section h3 { border-bottom:1px solid var(--line); padding-bottom:.2rem }
/* The lede: Question and Conclusions, full width above the two columns and outside every filter, because they are what
   the paper is rather than how it got there. Everything else sits in the body column under the floating TOC. */
.struct .lede { grid-column:1/-1; background:var(--card); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:.1rem 1.25rem 1rem; margin:1rem 0 .5rem }
.struct .lede h2 { margin-top:1.25rem; border-bottom:none; padding-bottom:0; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted) }
.struct .lede .q { font-size:1.25rem; line-height:1.4; font-weight:500; margin:.15rem 0 0 }
.struct .lede p.small { margin:.15rem 0 .5rem }
.struct .lede ul.items li { border-bottom:none; color:var(--fg) }
.struct ul.items { list-style:none; padding:0; margin:0 } .struct ul.items li { position:relative; padding:.35rem 0 .35rem 2.6rem; border-bottom:1px dotted var(--line); color:color-mix(in srgb, var(--fg) 70%, var(--muted)) } .struct ul.items li:target { background:var(--card) }
.struct ul.items li b { font-weight:inherit; color:var(--fg); background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:3px; padding:0 .2em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
.struct .k { display:inline-block; width:1.2rem; text-align:center } .struct ul.items .k { position:absolute; left:0 } .struct ul.items .n { position:absolute; left:1.3rem; color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; top:.6rem }
.k-fact { color:var(--r-background-claim) } .k-method { color:var(--r-uses-tool-or-method) } .k-finding { color:var(--r-extends-or-modifies) } .k-claim { color:var(--r-compares-against) } .k-gap { color:var(--r-critiques-or-contradicts) }
.struct .toc .back { margin:0 0 .5rem } .struct .toc .back a { text-decoration:none }
.struct .toc { font-size:.85rem; margin:.5rem 0 } .struct .toc ul { list-style:none; padding:0; margin:0 0 .5rem; display:flex; flex-wrap:wrap; gap:.25rem .75rem } .struct .toc a { text-decoration:none } .struct .toc ul ul { margin:0 0 0 1rem } .struct .toc label { display:block; cursor:pointer } .struct .toc h4 { margin:.75rem 0 .25rem; font-size:.85rem; color:var(--muted) } .struct .legend .k { width:auto; text-align:left; margin:.15rem .75rem .15rem 0 }
@media (max-width:899px) { .struct .legend .k { display:inline-block } }
@media (min-width:900px) { .struct { display:grid; grid-template-columns:1fr 13rem; gap:0 1.5rem; align-items:start } .struct .toc { order:2; position:sticky; top:3.5rem; margin:1.5rem 0 0; padding:.75rem; background:var(--card); border-radius:8px } .struct .toc ul { display:block } .struct .toc li { margin:.15rem 0 } }
/* ponytail: the toggles are pure CSS via :has(); add JS if a browser without it matters */
.ev { display:none; color:var(--muted); font-size:.85rem; font-style:italic; border-left:2px solid var(--line); padding-left:.6rem; margin-top:.25rem } .struct:has(#ev-on:checked) .ev { display:block }
.ev .sec { font-style:normal; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; margin-right:.3rem } .ev .sec a { color:var(--muted) }
/* Kind filter: ticking any kind in the legend shows only those kinds. The highlights rule comes last so it also applies to a filtered list. */
.struct:has(.legend input:checked) ul.items:not(.lede-items) li { display:none }
.struct:has(#kind-fact:checked) ul.items li[data-kind=fact], .struct:has(#kind-method:checked) ul.items li[data-kind=method], .struct:has(#kind-finding:checked) ul.items li[data-kind=finding],
.struct:has(#kind-claim:checked) ul.items li[data-kind=claim], .struct:has(#kind-gap:checked) ul.items li[data-kind=gap] { display:list-item }
.struct:has(#hi-only:checked) ul.items:not(.lede-items) li:not(.hi) { display:none }
/* Backscatter synthesis claims carry the same key-phrase markup and highlight flag as Anatomy items. */
ol.claims li b { font-weight:inherit; background:color-mix(in srgb, var(--accent) 14%, transparent); border-radius:3px; padding:0 .2em; box-decoration-break:clone; -webkit-box-decoration-break:clone }
.struct:has(#bs-hi:checked) ol.claims li:not(.hi) { display:none }
/* Outgoing: two role charts side by side, the section × role matrix, and a role filter over the reference list. */
.twin { display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem } .twin h4, .struct .body h4 { margin:1rem 0 .25rem; font-size:.85rem; color:var(--muted) }
table.matrix td { text-align:center; font-variant-numeric:tabular-nums } table.matrix th .role { font-size:.65rem }
.struct .rf label { display:block; cursor:pointer; margin:.15rem 0 }
.struct:has(.rf input:checked) details.ref { display:none }
.struct:has(#or-uses-tool-or-method:checked) details.ref[data-role=uses-tool-or-method], .struct:has(#or-uses-data:checked) details.ref[data-role=uses-data],
.struct:has(#or-background-claim:checked) details.ref[data-role=background-claim], .struct:has(#or-compares-against:checked) details.ref[data-role=compares-against],
.struct:has(#or-extends-or-modifies:checked) details.ref[data-role=extends-or-modifies], .struct:has(#or-critiques-or-contradicts:checked) details.ref[data-role=critiques-or-contradicts],
.struct:has(#or-incidental:checked) details.ref[data-role=incidental] { display:block }
@media (max-width:700px) { .twin { grid-template-columns:1fr } }
.kind { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.02em; margin-right:.4rem } .kind.a { color:var(--r-uses-tool-or-method) } .kind.b { color:var(--r-compares-against) } .kind.c { color:var(--r-critiques-or-contradicts) }
.flash { border-left:3px solid var(--r-compares-against); padding:.5rem .75rem; background:var(--card); font-size:.9rem }
@media (max-width:600px) { header .tag { display:none } .nums { gap:1rem } }