/* The blog: one long article on the exam's look (exam.css). A reading column with wider figures, a contents rail on wide
   screens, and the figures drawn by blog.js from data/blog.json. Privileged = terracotta and standard = teal as everywhere;
   realtime gets amber. The ways of control and the layers of a failure have their own small palettes. */
:root, [data-theme="light"] {
  --rt: #c08a12; --rt-ink: #8a6200;
  --w-code: #2f6fb3; --w-direct: #d6603a; --w-train: #7a5cc4; --w-mixed: #9aa3ad; --w-none: #d5dbe2;
  --l-thought: #7a5cc4; --l-before: #d6603a; --l-after: #e7a06f; --l-motor: #2491a8; --l-ext: #c7ced6;
  --c-claim: #c2412b; --c-honest: #2a8a57; --c-silent: #b9c1ca; --c-other: #dde2e8;
  --f-likely: #1f7a48; --f-possible: #7fca9c; --f-unlikely: #d5dbe2;
  --top: #0f141a; --flash: #9aa3ad;
  /* the three strongest agents (validated as a categorical set, apart from the settings' colours); none = an empty cell */
  --ag-astra: #3a5fc8; --ag-opus: #b83f8c; --ag-argon: #4f8a2a; --wf-none: #dfe5ec;
  /* Finding 6: the three kinds of program in one blue ramp, the other approaches apart */
  --w-open: #9cc0ea; --w-closed: #3f7fc8; --w-search: #1d4378; --w-direct: #c97b2e; --w-train: #8e5bc0; --w-mixed: #c9b458; --w-none: #c3cad3;
}
[data-theme="dark"] {
  --rt: #e3b341; --rt-ink: #f0c867;
  --w-code: #6aa6e8; --w-direct: #ee8a64; --w-train: #a993ec; --w-mixed: #6c747e; --w-none: #343a42;
  --l-thought: #a993ec; --l-before: #ee8a64; --l-after: #b9774f; --l-motor: #4fb6cb; --l-ext: #464d56;
  --c-claim: #ef6f5a; --c-honest: #4cc27a; --c-silent: #5a626c; --c-other: #3a4048;
  --f-likely: #4cc27a; --f-possible: #2a7a4b; --f-unlikely: #3a4048;
  --top: #eceae6; --flash: #6c747e;
  --ag-astra: #6f8ee8; --ag-opus: #d9659f; --ag-argon: #6f9f3c; --wf-none: #2c3138;
  --w-open: #a9c8ee; --w-closed: #5a95dc; --w-search: #2f5d9e; --w-direct: #d98f45; --w-train: #a77fd6; --w-mixed: #b8a54d; --w-none: #4a5059;
}

html[lang="zh"] body { font-family: var(--body), "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }

/* the header: the site's page head (app.js adds the moving wall beside it), on the article's column */
.page-head.post-head { max-width: calc(1000px + 2 * var(--gutter)); }
.page-head.post-head h1 { font-size: clamp(40px, 5.6vw, 72px); }
/* the title is the home page's two-line question (exam.css .hero-q), set at the size of a post title */
.page-head.post-head h1.post-title { max-width: none; font: 800 clamp(36px, 4.2vw, 60px)/1.04 var(--display); letter-spacing: -.035em; color: var(--ink); }
.page-head.post-head .post-q { width: min(960px, calc(50vw + 440px - var(--gutter))); max-width: none; margin: 14px 0 0; font: 600 clamp(19px, 1.7vw, 25px)/1.25 var(--display); letter-spacing: -.015em; color: var(--ink-2); text-wrap: balance; }
@media (max-width: 960px) { .page-head.post-head .post-q { width: auto; } }
.post-q span, .post-q em { display: block; }
.post-q em { margin-top: .12em; font-style: normal; color: var(--priv-ink); }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 26px 0 0; font: 500 13px/1.5 var(--mono); color: var(--ink-3); }
.byline a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.lang-switch { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; }
.lang-switch a, .lang-switch span { padding: 3px 11px; border: 0 !important; }
.lang-switch span { background: var(--ink); color: var(--bg); }

/* the article */
.post { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(64px, 8vw, 110px); }
.post { --col: 1000px; }
.post > * { max-width: var(--col); margin-left: auto; margin-right: auto; }
.post h2 { margin-top: clamp(64px, 7vw, 96px); margin-bottom: 0; font: 700 clamp(28px, 3.1vw, 40px)/1.08 var(--display); letter-spacing: -.025em; scroll-margin-top: 90px; }
.post h2 .num { display: block; margin-bottom: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }
.post h3 { margin-top: 44px; margin-bottom: 0; font: 650 clamp(20px, 2vw, 24px)/1.2 var(--display); letter-spacing: -.01em; scroll-margin-top: 90px; }
.post p, .post li { font-size: 17.5px; line-height: 1.7; color: var(--ink); }
html[lang="zh"] .post p, html[lang="zh"] .post li { font-size: 17px; line-height: 1.85; }
.post p { margin: 18px auto 0; }
.post ul, .post ol { padding-left: 1.2em; margin-top: 14px; }
.post li + li { margin-top: 6px; }
.post a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.post a:hover { border-color: var(--ink); }
.post code { font: 500 .88em var(--mono); background: var(--code-bg); padding: 1px 5px; border-radius: 5px; }
.post .m-p { color: var(--priv-ink); font-weight: 600; }
.post .m-s { color: var(--std-ink); font-weight: 600; }
.post .m-r { color: var(--rt-ink); font-weight: 600; }
.post .big { font: 700 1.06em var(--display); }
.sec-rule { height: 1px; background: var(--line); margin-top: clamp(56px, 6vw, 80px) !important; }

/* the opening: the one-line statement and the three questions */
.statement { margin-top: 8px !important; font: 700 clamp(24px, 2.8vw, 34px)/1.2 var(--display); letter-spacing: -.02em; }
.statement b { color: var(--priv-ink); }
.post .qs { display: grid; gap: 12px; margin-top: 26px !important; padding: 0; list-style: none; counter-reset: q; }
.qs li { position: relative; margin: 0 !important; padding: 18px 22px 18px 64px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.qs li::before { counter-increment: q; content: counter(q); position: absolute; left: 22px; top: 16px; font: 800 28px/1 var(--display); color: var(--std); }
.qs h3 { margin: 0 !important; font: 650 18px/1.3 var(--display) !important; }
.qs p { margin: 6px 0 0 !important; font-size: 15.5px !important; line-height: 1.6 !important; color: var(--ink-2) !important; }
.qs a { font-size: 13px; }
.wall4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.wall4 .clip video { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.wall4 .clip p { margin: 6px 0 0 !important; font-size: 12px !important; line-height: 1.35 !important; }
.wall4 .clip p b { display: block; color: var(--ink); font-weight: 600; }
.wall4 .clip.ag p { color: var(--std-ink) !important; }
.wall4 .clip.ref p, .wall4 .clip.demo p { color: var(--ink-3) !important; }
@media (max-width: 860px) { .wall4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the three parts, after the three questions of the opening */
.part { margin-top: clamp(80px, 9vw, 120px) !important; padding-top: 22px; border-top: 2px solid var(--ink); }
.part span { display: block; font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--std-ink); }
.part b { display: block; margin-top: 10px; font: 750 clamp(26px, 3vw, 36px)/1.12 var(--display); letter-spacing: -.02em; }
.part + h2 { margin-top: 40px !important; }

/* the tl;dr and the boxes */
.tldr { margin-top: 36px !important; padding: 22px 26px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--surface); }
.tldr .label { margin: 0 0 10px; }
.tldr ol { margin: 0; padding-left: 1.3em; }
.tldr li { font-size: 16.5px; }
.aside { margin-top: 28px !important; padding: 16px 20px; border-left: 3px solid var(--line-2); background: var(--bg-2); border-radius: 0 12px 12px 0; }
.aside p { margin: 6px 0 0 !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--ink-2) !important; }
.aside .label { margin: 0; }
.llm-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line-2); font: 500 10.5px/1.6 var(--mono);
  letter-spacing: .04em; color: var(--ink-3); vertical-align: 2px; white-space: nowrap; }

/* figures */
.fig { margin: 34px 0 0 !important; }
.post > .fig { margin-left: auto !important; margin-right: auto !important; }
.fig .fig-body { padding: clamp(16px, 2.4vw, 26px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.fig figcaption { margin: 12px 2px 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.fig figcaption b { color: var(--ink); font-weight: 650; }
.fig .fig-title { margin: 0 0 14px; font: 650 15px/1.3 var(--display); }
.fig .fig-note { margin: 12px 0 0; font: 400 12.5px/1.5 var(--body); color: var(--ink-3); }

/* two videos side by side */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clip { margin: 0; }
/* every clip and case image in the article: one size, a 16:9 frame in a column of the two-column grid, never cropped */
.clip video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 12px; background: var(--bg-3); }
.clip .clip-tag { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 600 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.clip .clip-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.clip.p .clip-tag { color: var(--priv-ink); } .clip.p .clip-tag i { background: var(--priv); }
.clip.s .clip-tag { color: var(--std-ink); } .clip.s .clip-tag i { background: var(--std); }
.clip.r .clip-tag { color: var(--rt-ink); } .clip.r .clip-tag i { background: var(--rt); }
.clip p { margin: 6px 0 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--ink-2) !important; }

/* three cards: the rooms, the ways, the contrasts */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { padding: 20px 22px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.card h4 { margin: 0; font: 650 18px/1.25 var(--display); }
.card .k { display: block; margin-bottom: 10px; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.card.p { border-top: 3px solid var(--priv); } .card.p .k { color: var(--priv-ink); }
.card.s { border-top: 3px solid var(--std); } .card.s .k { color: var(--std-ink); }
.card.r { border-top: 3px solid var(--rt); } .card.r .k { color: var(--rt-ink); }
.card p { margin: 8px 0 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--ink-2) !important; }
.card dl { margin: 12px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; line-height: 1.45; }
.card dt { font: 500 11px/1.6 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.card dd { margin: 0; color: var(--ink-2); }
.card.muted { background: var(--bg-2); }
.card.hi { border-color: var(--ink); }

/* the exam in numbers + the command */
.post .bignums { margin-top: 34px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmd { display: flex; align-items: center; gap: 10px; margin-top: 26px !important; padding: 14px 16px; border-radius: 12px; background: var(--primary-bg); color: var(--primary-ink);
  font: 500 14px/1.4 var(--mono); }
.cmd .pr { opacity: .55; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; background: none !important; padding: 0 !important; color: inherit; white-space: nowrap; font-size: 14px !important; }
.cmd button { margin-left: auto; flex: none; padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: none; color: inherit; font: 500 12px var(--mono); cursor: pointer; }

/* bar charts drawn as HTML */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr 44px; align-items: center; gap: 12px; }
.bar-row .who { font: 500 13.5px/1.25 var(--body); }
.bar-row .who small { display: block; font: 400 11.5px var(--mono); color: var(--ink-3); }
.bar-row .n { font: 500 12px var(--mono); color: var(--ink-3); text-align: right; white-space: nowrap; }
.stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--bg-2); }
.stack > span { display: flex; align-items: center; justify-content: center; min-width: 0; font: 600 11px var(--mono); color: #fff; white-space: nowrap; overflow: hidden; transition: flex-grow .6s ease; }
.stack > span.lt { color: var(--ink); }
.stack > span.ink { color: var(--bg); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 16px; font-size: 12.5px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; }
.legend em { font-style: normal; color: var(--ink-3); }
.group-label { margin: 14px 0 2px; font: 600 11px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }

/* dumbbell: privileged -> standard on one axis */
.db { display: grid; gap: 4px; }
.db-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; align-items: center; gap: 12px; min-height: 34px; }
.db-row .who { font: 500 13.5px/1.25 var(--body); }
.db-row.flash .who { color: var(--ink-3); }
.db-track { position: relative; height: 34px; }
.db-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.db-line { position: absolute; top: calc(50% - 2px); height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--std), var(--priv)); opacity: .55; }
.db-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--surface); }
.db-dot.p { background: var(--priv); } .db-dot.s { background: var(--std); }
.db-lab { position: absolute; top: -2px; transform: translateX(-50%); font: 600 11px var(--mono); white-space: nowrap; }
.db-lab.p { color: var(--priv-ink); } .db-lab.s { color: var(--std-ink); }
.db-axis { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 12px; margin-top: 6px; }
.db-axis .ticks { position: relative; height: 16px; font: 400 11px var(--mono); color: var(--ink-3); }
.db-axis .ticks i { position: absolute; transform: translateX(-50%); font-style: normal; }

/* three steps: privileged -> standard -> realtime */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.steps3 > div { padding: 14px 16px; border-radius: 12px; background: var(--bg-2); }
.steps3 b { display: block; font: 700 clamp(26px, 3vw, 36px)/1 var(--display); }
.steps3 > div > span { display: block; margin-top: 6px; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
.steps3 .p b { color: var(--priv-ink); } .steps3 .s b { color: var(--std-ink); } .steps3 .r b { color: var(--rt-ink); }

/* nobody solved: two bars per task type */
.nb-row { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; align-items: center; gap: 12px; padding: 5px 0; border-top: 1px solid var(--line); }
.nb-row:first-of-type { border-top: 0; }
.nb-row .who { font: 500 13.5px/1.3 var(--body); }
.nb-row.all .who { font-weight: 700; }
.nb-bars { display: grid; gap: 3px; }
.nb-bar { display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 8px; }
.nb-bar .t { height: 9px; border-radius: 5px; background: var(--bg-2); overflow: hidden; }
.nb-bar .t span { display: block; height: 100%; border-radius: 5px; }
.nb-bar.p .t span { background: var(--priv); } .nb-bar.s .t span { background: var(--std); }
.nb-bar small { font: 500 11px var(--mono); color: var(--ink-3); text-align: right; white-space: nowrap; }

/* estimates with intervals */
.ci { display: grid; gap: 9px; }
.ci-row { display: grid; grid-template-columns: minmax(130px, 220px) 1fr 44px; align-items: center; gap: 12px; }
.ci-row .who { font: 500 13.5px/1.3 var(--body); }
.ci-row .n { font: 600 12px var(--mono); text-align: right; }
.ci-track { position: relative; height: 18px; }
.ci-bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; opacity: .85; }
.ci-whisk { position: absolute; top: 50%; height: 0; border-top: 2px solid var(--ink); }
.ci-whisk::before, .ci-whisk::after { content: ""; position: absolute; top: -6px; height: 10px; border-left: 2px solid var(--ink); }
.ci-whisk::before { left: 0; } .ci-whisk::after { right: 0; }
.nb-bar.t1 .t span { background: var(--w-code); } .nb-bar.t2 .t span { background: var(--c-claim); }
.habits { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.habit { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.habit b { display: block; font: 700 22px/1.1 var(--display); color: var(--ink); }
.habit b small { font: 500 13px var(--body); color: var(--ink-3); }
.habit p { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }

/* the results table */
.ovt-wrap { overflow-x: auto; }
.ovt { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ovt th { padding: 6px 8px; text-align: left; font: 600 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.ovt td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.ovt td.who { font-weight: 600; white-space: normal; min-width: 150px; }
.ovt tr.ref td { color: var(--ink-3); }
.ovt .ov { height: 6px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-bottom: 4px; min-width: 70px; }
.ovt .ov span { display: block; height: 100%; }
.ovt b { font: 700 14px var(--mono); margin-right: 6px; }
.ovt small { font: 400 11px var(--mono); color: var(--ink-3); }
.src { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); font: 500 10.5px/1.6 var(--mono); color: var(--ink-2); vertical-align: 2px; white-space: nowrap; }
.todo { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; border: 1px dashed var(--priv); font: 600 10.5px/1.6 var(--mono); color: var(--priv-ink); vertical-align: 2px; white-space: nowrap; }
.finding { margin-top: 48px !important; }
.finding h3 { margin-top: 0 !important; }
.finding h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; scroll-margin-top: 90px; }
.finding h3 .fn { display: block; margin-bottom: 8px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--priv-ink); }
.finding .evidence { margin-top: 14px !important; }
.finding .evidence::before { content: "Evidence"; display: block; margin-bottom: 4px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.post h2 + .finding { margin-top: 28px !important; }

/* the line chart */
.chart-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.chart-tabs button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: none; color: var(--ink-2); font: 500 12.5px var(--mono); cursor: pointer; }
.chart-tabs button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--mono); }
svg.chart .grid { stroke: var(--line); }
svg.chart .ax { fill: var(--ink-3); font-size: 13px; }
svg.chart .val { font-size: 12px; font-weight: 600; }
svg.chart .ok { stroke: var(--honest, var(--c-honest)); }
svg.chart path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: d .6s ease; }
svg.chart circle { stroke: var(--surface); stroke-width: 2; }
svg.chart .lab { font-size: 12px; font-weight: 600; }

/* the walnut timeline: a vertical list of the steps up, the bar of each showing where in the hour it came */
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tl li { display: grid; grid-template-columns: 74px 1fr; gap: 4px 12px; align-items: baseline; margin: 0 !important; font-size: 14.5px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.tl li b { font: 600 12.5px var(--mono); color: var(--ink); }
.tl li .at { grid-column: 2; height: 6px; border-radius: 3px; background: var(--bg-2); position: relative; }
.tl li .at i { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--std); }
.tl li.end .at i { background: var(--ink-3); }
.tl li .lv { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; background: var(--bg-2); font: 600 10.5px/1.7 var(--mono); color: var(--std-ink); }

/* the two numbers */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 28px !important; }
.pair > div { padding: 22px 24px; border-radius: 16px; background: var(--bg-2); }
.pair b { display: block; font: 800 clamp(48px, 6vw, 76px)/1 var(--display); letter-spacing: -.03em; }
.pair span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pair .hi b { color: var(--priv-ink); }

/* stories */
.story { padding: 20px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.story .k { display: block; margin-bottom: 8px; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.story blockquote { margin: 10px 0 0; padding-left: 14px; border-left: 3px solid var(--line-2); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* the contents: a block in the article, and a rail in the left margin where there is room for it */
.toc-rail { position: fixed; top: 128px; left: max(20px, calc((100vw - 1000px) / 4 - 90px)); width: 180px; z-index: 5; max-height: calc(100vh - 160px); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.toc-rail.show { opacity: 1; visibility: visible; }
.toc-rail p { margin: 0 0 10px 12px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.toc-rail ol { list-style: none; margin: 0; padding: 0; }
.toc-rail a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.toc-rail a:hover { color: var(--ink); }
.toc-rail a.on { color: var(--ink); border-left-color: var(--priv); font-weight: 600; }
.toc-rail .fold-head { position: relative; }
.toc-rail .fold-head button { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 999px; background: none; font: 500 10.5px/1.5 var(--mono); color: var(--ink-3); cursor: pointer; }
.toc-rail .fold-head button::after { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); transition: transform .2s; }
.toc-rail .fold.open .fold-head button::after { transform: translateY(1px) rotate(-135deg); }
.toc-rail .fold-head button:hover { color: var(--ink); border-color: var(--ink-3); }
.toc-rail .fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.toc-rail .fold.open .fold-body { grid-template-rows: 1fr; }
.toc-rail .fold-body > ol { overflow: hidden; }
.toc-rail ol ol a { display: grid; grid-template-columns: 20px 1fr; padding: 3px 0 3px 12px; font-size: 12px; }
.toc-rail ol ol a .k { font: 500 10.5px/1.6 var(--mono); color: var(--ink-3); }
.toc-rail > ol > li > a, .toc-rail .fold-head > a { display: grid; grid-template-columns: 24px 1fr; }
.toc-rail > ol > li > a .k, .toc-rail .fold-head > a .k { font: 500 10.5px/1.9 var(--mono); color: var(--ink-3); }
.toc-rail > ol > li > a.on .k, .toc-rail .fold-head > a.on .k { color: var(--priv-ink); }
.toc-rail ol ol a.on .k { color: var(--priv-ink); }
@media (max-width: 1419px) { .toc-rail { display: none; } }

.cite { margin-top: 18px !important; padding: 16px 18px; border-radius: 12px; background: var(--code-bg); font: 400 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-x: auto; }

@media (max-width: 860px) {
  .cards, .duo.three, .steps3 { grid-template-columns: 1fr; }
  .post .bignums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .duo, .cards.two, .pair { grid-template-columns: 1fr; }
  .bar-row, .db-row, .db-axis { grid-template-columns: 96px 1fr; }
  .bar-row .n { grid-column: 2; text-align: left; margin-top: -6px; }
  .nb-row { grid-template-columns: 1fr; }
  .ci-row { grid-template-columns: 110px 1fr 40px; }
}
@media (prefers-reduced-motion: reduce) { .stack > span, svg.chart path { transition: none; } }

/* the kinds of task (motivation) */
.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kinds > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.kinds b { display: block; font: 650 16px/1.3 var(--display); }
.kinds p { margin: 6px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
.kinds span { display: block; margin-top: 10px; font: 500 11px/1.45 var(--mono); color: var(--ink-3); }
@media (max-width: 760px) { .kinds { grid-template-columns: 1fr; } }

/* a finding's parts: the scope note, the open question, small counts in figures */
.finding .scope { margin-top: 22px !important; padding: 12px 16px; border-radius: 12px; background: var(--bg-2); font-size: 15px !important; line-height: 1.6 !important; color: var(--ink-2) !important; }
.finding .scope b { color: var(--ink); }
.finding.open h3 .fn { color: var(--rt-ink); }
.db-row .who small { display: block; font: 400 11.5px var(--mono); color: var(--ink-3); }
.ovt th small, .ovt td.who small { font: 400 11px var(--mono); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.mixt td { width: 38%; }
.mixt td.who { width: auto; min-width: 120px; }
.mix { display: flex; height: 10px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-bottom: 4px; min-width: 80px; }
.mix span { display: block; height: 100%; }
@media (max-width: 560px) {
  .mixt td, .mixt th { padding: 6px 4px; }
  .mixt td { white-space: normal; }
  .mixt td.who { min-width: 0; font-size: 12.5px; }
  .mix { min-width: 0; }
}
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.case { display: flex; flex-direction: column; gap: 4px; padding: 0 0 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: inherit; text-decoration: none; }
.case:hover { border-color: var(--line-2); }
.case img, .case video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--bg-3); margin-bottom: 6px; }
.case > span, .case > b { padding: 0 12px; }
.case .case-k { font: 600 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.case b { font-size: 14.5px; line-height: 1.3; }
.case .case-m { font: 500 12px/1.3 var(--mono); }
.case.p .case-m { color: var(--priv-ink); } .case.s .case-m { color: var(--std-ink); } .case.t .case-m { color: var(--rt-ink); }
.case .case-t { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 560px) { .cases { grid-template-columns: minmax(0, 1fr); } }
/* a finding: its conclusion, three points and a figure; the analysis behind it opens below */
.finding ul.claims { margin: 10px 0 14px; padding-left: 20px; }
.finding ul.claims li { margin: 6px 0; font-size: 16px; line-height: 1.6; }
details.more { display: block; width: 100%; box-sizing: border-box; margin: 14px 0 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
details.more > summary { cursor: pointer; list-style: none; padding: 12px 16px; font: 600 13px/1.3 var(--mono); letter-spacing: .03em; color: var(--ink-2); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: "+"; display: inline-block; width: 1.2em; font-weight: 700; color: var(--accent, var(--ink)); }
details.more[open] > summary::before { content: "−"; }
details.more[open] > summary { border-bottom: 1px solid var(--line); }
.post > details.more { margin-left: auto; margin-right: auto; }   /* a fold straight in the article sits on its column */
details.more > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.more > :last-child { margin-bottom: 16px; }
details.more h4 { margin: 18px 16px 6px; font: 650 15px/1.3 var(--display); }
details.more h4 small { font: 400 12px var(--mono); color: var(--ink-3); }
details.more p, details.more li { font-size: 15px; line-height: 1.6; }
details.more ul { padding-left: 20px; }
details.more .cases { margin: 10px 16px 14px; }
.fig > .cases { margin: 0 17px; }   /* the same column width as the cards inside an opened analysis (its border and margin) */
@media (max-width: 560px) { .fig > .cases, details.more .cases { margin-left: 0; margin-right: 0; } details.more > :not(summary) { margin-left: 12px; margin-right: 12px; } }
/* Findings 4 and 5: two columns of benchmark bars */
.bb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.bb-k { margin: 0 0 6px !important; font: 600 12px/1.3 var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; }
.bb .nb-row { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
@media (max-width: 640px) { .bb { grid-template-columns: minmax(0, 1fr); } }
/* a finding's representative case, shown before its fold */
.cases.rep { grid-template-columns: minmax(0, 1fr); margin: 6px 17px 0; }
.cases.rep .case { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: min-content; column-gap: 18px; row-gap: 4px; padding: 0; }
.cases.rep .case > video, .cases.rep .case > img { grid-column: 1; grid-row: 1 / span 5; margin: 0; }
.cases.rep .case > span, .cases.rep .case > b { grid-column: 2; padding: 0 16px 0 0; }
.cases.rep .case > .case-k { padding-top: 16px; }
@media (max-width: 560px) { .cases.rep { margin: 6px 0 0; } .cases.rep .case { display: flex; padding-bottom: 12px; } .cases.rep .case > span, .cases.rep .case > b { padding: 0 12px; } .cases.rep .case > .case-k { padding-top: 0; } }
/* a finding folds to its label and its conclusion: the heading is the button that opens the rest (blog.js), its state in
   the pill on the label's row */
.finding-toggle { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.finding-toggle::after { content: "Show"; content: "Show" / ""; position: absolute; right: 0; top: -6px; padding: 3px 26px 3px 11px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--ink-3); transition: color .2s, border-color .2s; }
.finding-toggle[aria-expanded="true"]::after { content: "Hide"; content: "Hide" / ""; }
.finding-toggle::before { content: ""; position: absolute; right: 12px; top: 1px; width: 5px; height: 5px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s, border-color .2s; }
.finding-toggle[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }
.finding-toggle:hover::after { color: var(--ink); border-color: var(--ink-3); }
.finding-toggle:hover::before { border-color: var(--ink); }
.finding-toggle:focus-visible { outline: 2px solid var(--std); outline-offset: 6px; }
.finding .fn { padding-right: 84px; }
.post .finding { margin-top: 0 !important; padding: 26px 0; border-top: 1px solid var(--line); }
.post :not(.finding) + .finding { margin-top: 40px !important; }
.post .finding:not(:has(+ .finding)) { border-bottom: 1px solid var(--line); }
@media print {
  .finding-body[hidden] { display: block !important; content-visibility: visible !important; }
  .finding-toggle::before, .finding-toggle::after { display: none; }
}

/* ============================================================== the findings' figures (the analysis's designs) */
.fig .fig-say { margin: 0 !important; font: 650 16px/1.35 var(--display) !important; color: var(--ink) !important; }
.fig .fig-cap { margin: 4px 0 0 !important; font: 500 13px/1.45 var(--body) !important; color: var(--ink-2) !important; }
.fig .fig-how { margin: 4px 0 16px !important; font: 400 12.5px/1.5 var(--body) !important; color: var(--ink-3) !important; }
.fig .fig-how b { margin-right: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.legend .sw, .wf-key .sw, .ap-defs .sw { display: inline-block; flex: none; width: 11px; height: 11px; border-radius: 3px; }
.legend .sw.dotk { border-radius: 50%; }
.legend .sw.barkey { width: 18px; height: 6px; border-radius: 3px; background: var(--ink-3); }
.finding h3 small.cnt { font: 500 .62em var(--mono); letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.trk { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden; }
.trk > span { display: block; height: 100%; border-radius: 4px; }

/* Finding 1: a block of bars per setting */
.hbs { display: grid; gap: 18px; }
.hb-t { margin: 0 0 6px !important; font: 600 12px/1.3 var(--mono) !important; letter-spacing: .06em; text-transform: uppercase; }
.hb-t small { font: 400 11px var(--mono); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.hb-row { display: grid; grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) 104px; align-items: center; gap: 12px; padding: 2px 0; }
.hb-row .who { font: 500 13.5px/1.25 var(--body); }
.hb-row.fl .who { color: var(--ink-3); }
.hb-row .trk { height: 10px; }
.hb-row .val { font: 400 11.5px var(--mono); color: var(--ink-3); text-align: right; white-space: nowrap; }
.hb-row .val b { margin-right: 4px; font-weight: 600; color: var(--ink); }

/* Finding 2: the waffles, their counts in the key */
.wf-key { overflow-x: auto; margin: 0 0 16px; }
.wf-key table { border-collapse: collapse; font-size: 13px; }
.wf-key th, .wf-key td { padding: 3px 10px; text-align: right; white-space: nowrap; }
.wf-key thead th { font: 600 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
.wf-key tbody th { font: 500 13px var(--body); text-align: left; padding-left: 0; }
.wf-key tbody th .sw { margin-right: 8px; vertical-align: -1px; }
.wf-key td { font: 500 12.5px var(--mono); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.wfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.wf-ag { display: grid; grid-template-columns: 96px minmax(0, 1fr) 30px; align-items: center; gap: 8px; margin: 3px 0; font-size: 12.5px; }
.wf-ag b { font: 600 12px var(--mono); text-align: right; }
.wf-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; max-width: 250px; margin-top: 14px; }
.wf-grid i { aspect-ratio: 1; border-radius: 4px; }
@media (max-width: 700px) { .wfs { grid-template-columns: minmax(0, 1fr); max-width: 320px; } }

/* Finding 3 and the safety figure: stacked bars with a gap between segments */
.sb { display: grid; gap: 8px; }
.sb-row { display: grid; grid-template-columns: minmax(96px, 170px) minmax(0, 1fr) 40px; align-items: center; gap: 12px; }
.sb-row.one { grid-template-columns: minmax(0, 1fr); }
.sb-row .who { font: 500 13.5px/1.25 var(--body); }
.sb-row .n { font: 500 11.5px var(--mono); color: var(--ink-3); text-align: right; }
.sb-trk { display: flex; gap: 2px; height: 22px; }
.sb-trk > span { display: flex; align-items: center; justify-content: center; min-width: 2px; border-radius: 4px; overflow: hidden; }
.sb-trk em { font: 600 11px var(--mono); font-style: normal; color: #fff; }
.sb-trk em.dk { color: var(--ink); }
@media (max-width: 640px) { .wf-key th, .wf-key td { padding: 3px 6px; font-size: 12px; } }
[data-theme="dark"] .sb-trk > span[style*="--top"] em { color: var(--bg); }
.sb-row.ax { margin-top: -2px; }
.sb-ticks { position: relative; height: 14px; font: 400 10.5px var(--mono); color: var(--ink-3); }
.sb-ticks i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; }
.sb-ticks i:first-child { transform: none; } .sb-ticks i:last-child { transform: translateX(-100%); }
.fig.steps { margin-top: 18px !important; }
.fig.steps .steps3 { margin-top: 0; }
.steps3 .trk { margin-top: 10px; height: 6px; }
.steps3 .p .trk span { background: var(--priv); } .steps3 .s .trk span { background: var(--std); } .steps3 .r .trk span { background: var(--rt); }
.fig.steps .fig-note { margin: 8px 2px 0 !important; }

/* Findings 4 and 5: dot plots per benchmark, privileged and standard side by side */
.dps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; align-items: start; }
.dp-h { margin: 0 0 6px !important; padding: 6px 10px; border-radius: 8px; font: 650 14px/1.3 var(--display) !important; }
.dp-h.m-p { background: color-mix(in srgb, var(--priv) 12%, transparent); }
.dp-h.m-s { background: color-mix(in srgb, var(--std) 12%, transparent); }
.dp-row { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) 64px; align-items: center; gap: 10px; min-height: 40px; padding: 2px 0; }
.dp-row:not(.dp-head):not(.dp-ax):nth-of-type(2n) { background: linear-gradient(90deg, transparent, var(--bg-2) 8%, var(--bg-2) 92%, transparent); }
.dp-row .who { min-width: 0; line-height: 1.2; }
.dp-row .who b { display: block; font: 600 13px/1.25 var(--body); }
.dp-row .who small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 11px/1.3 var(--body); color: var(--ink-3); }
.dp-trk { position: relative; height: 20px; margin: 0 7px; }
.dp-trk .gl { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.dp-trk .rng { position: absolute; top: 9px; height: 2px; background: var(--ink-3); opacity: .45; }
.dp-trk .dpd { position: absolute; top: 3px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.dp-v { display: grid; gap: 3px; text-align: right; }
.dp-v .trk { height: 6px; }
.dp-v .trk span { background: var(--ink-3); }
.dp-v small { font: 500 11px var(--mono); color: var(--ink-2); white-space: nowrap; }
.dp-head { min-height: 0; } .dp-head .dp-v small { font: 400 10px/1.2 var(--body); color: var(--ink-3); white-space: normal; }
.dp-ax { min-height: 0; } .dp-ax .dp-trk { height: 14px; font: 400 10px var(--mono); color: var(--ink-3); }
.dp-ax .dp-trk i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; }
.dp-cut { position: relative; margin: 4px 0; border-top: 1px dashed var(--line-2); }
.dp-cut span { position: absolute; right: 0; top: -8px; padding-left: 6px; background: var(--surface); font: 500 10px/1.4 var(--mono); color: var(--ink-3); }
@media (max-width: 760px) { .dps { grid-template-columns: minmax(0, 1fr); } }

/* Finding 6: the approaches */
.ap-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 26px; margin: 0 0 18px; }
.ap-defs p { margin: 0 0 6px !important; font: 600 10.5px/1.3 var(--mono) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) !important; }
.ap-defs ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.ap-defs li { display: flex; gap: 8px; margin: 0 !important; font-size: 12.5px !important; line-height: 1.45 !important; color: var(--ink-3) !important; }
.ap-defs li .sw { margin-top: 3px; }
.ap-defs li b { color: var(--ink); font-weight: 600; }
.ap { display: grid; gap: 6px; }
.ap-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; align-items: end; gap: 12px; }
.ap-row .who { padding-bottom: 3px; font: 600 13px/1.25 var(--body); }
.ap-row .n { padding-bottom: 5px; font: 500 11.5px var(--mono); color: var(--ink-3); text-align: right; }
.ap-trk { position: relative; display: block; padding-top: 20px; }
.ap-g { position: absolute; top: 0; height: 16px; border: solid var(--ink-3); border-width: 1px 1px 0; border-radius: 3px 3px 0 0; font-style: normal; }
.ap-g span { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); padding: 0 5px; background: var(--surface); font: 500 10.5px/1.3 var(--mono); color: var(--ink-2); white-space: nowrap; }
.ap-bar { display: flex; gap: 2px; height: 20px; }
.ap-bar > span { min-width: 2px; border-radius: 3px; }
.ap-bar > span { position: relative; }
.ap-bar > span.edge { margin-left: 6px; }
.ap-bar > span.edge::before { content: ""; position: absolute; left: -5px; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink); }
.ap-row.ax { align-items: start; }
.ap-sum { display: none; margin-top: 4px; font: 500 10.5px/1.3 var(--mono); color: var(--ink-2); }
@media (max-width: 640px) { .ap-g { display: none; } .ap-trk { padding-top: 0; } .ap-sum { display: block; } .ap-row { align-items: start; } .ap-row .who, .ap-row .n { padding: 2px 0 0; } .ap-defs { grid-template-columns: minmax(0, 1fr); } .ap-row { grid-template-columns: 70px minmax(0, 1fr) 32px; gap: 8px; } }

/* every figure's numbers, folded under it; a wide table scrolls sideways, with a fade at the edge as the cue */
details.nums { margin: 16px 0 0; }
details.nums > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.3 var(--mono); color: var(--ink-3); }
details.nums > summary::-webkit-details-marker { display: none; }
details.nums > summary::before { content: "+"; font-weight: 700; }
details.nums[open] > summary::before { content: "−"; }
details.nums > summary:hover { color: var(--ink); }
.tscroll { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(90deg, var(--surface) 30%, transparent) left / 24px 100% no-repeat local, linear-gradient(-90deg, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent) left / 10px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) right / 10px 100% no-repeat scroll; }
.nt { border-collapse: collapse; font-size: 12.5px; min-width: 100%; }
.nt th, .nt td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.nt thead th { font: 600 10.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--line-2); }
.nt tbody th { font: 500 12.5px var(--body); text-align: left; padding-left: 0; }
.nt thead th:first-child { text-align: left; padding-left: 0; }
.nt td { font: 400 12px var(--mono); color: var(--ink-2); }
@media (max-width: 640px) {
  .hb-row { grid-template-columns: 92px minmax(0, 1fr) 54px; gap: 8px; }
  .sb-row { grid-template-columns: 92px minmax(0, 1fr) 30px; gap: 8px; }
  .hb-row .val { grid-column: 3; font-size: 10.5px; }
  .hb-row .val b { display: block; margin: 0; }
  .dp-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 58px; gap: 6px; }
}

/* the Introduction: the home page's framework figure (exam.css draws it) laid out for the reading column in three
   bands, the question, the five layers, then the trajectory and the verifier; below 860px exam.css stacks it */
.fig-flow .flowfig { margin: 6px 0 0; }
.post .fx-checks { margin: 2px 0 0; padding: 0; }
.post .fx-checks li { font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.post .fx-checks li + li { margin-top: 0; }

/* the walk through the figure: numbered steps */
.post ol.walk { list-style: none; padding: 0; counter-reset: w; }
.post ol.walk > li { position: relative; padding-left: 36px; }
.post ol.walk > li + li { margin-top: 12px; }
.post ol.walk > li::before { counter-increment: w; content: counter(w); position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 700 11.5px/24px var(--mono); text-align: center; }
.post ol.walk ul { margin-top: 8px; padding-left: 1.1em; }
.post ol.walk code { font-size: .86em; }

/* Overall results: grouped bars, radar, heatmap */
.chart { margin: 14px 0 6px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart.radar svg { max-width: 520px; margin: 0 auto; }
.chart .gl { stroke: var(--line, #d9dee5); stroke-width: 1; fill: none; }
.chart .ax { font: 400 10.5px var(--mono); fill: var(--ink-3); }
.chart .bv { font: 600 10.5px var(--mono); fill: var(--ink-2, var(--ink)); }
.chart .gx { font: 600 12px var(--mono); letter-spacing: .04em; text-transform: uppercase; fill: var(--ink); }
.chart .gx.m-p { fill: var(--priv); } .chart .gx.m-s { fill: var(--std); } .chart .gx.m-r { fill: var(--rt); }
.chart .rl { font: 500 11.5px var(--body); fill: var(--ink); }
.chart .rp { stroke-width: 2.2; fill-opacity: .1; stroke-linejoin: round; }
.chart .rp.fl { stroke-width: 1.4; stroke-dasharray: 4 3; }
table.heat { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font: 400 12px var(--mono); }
table.heat th { font: 600 11.5px var(--body); text-align: left; color: var(--ink-2, var(--ink)); padding: 4px 6px; white-space: nowrap; }
table.heat thead th { text-align: center; font-size: 11px; }
table.heat th small { font: 400 10.5px var(--mono); color: var(--ink-3); margin-left: 4px; }
table.heat td { text-align: center; padding: 6px 4px; border-radius: 4px; color: var(--ink);
  background: color-mix(in srgb, var(--ag-astra) calc(var(--v) * 1%), var(--bg-2)); }
table.heat td.hi { color: #fff; }
@media (max-width: 640px) { table.heat { font-size: 10.5px; border-spacing: 2px; } table.heat th { padding: 3px 4px; } .chart .rl { font-size: 13px; } }

/* each finding: its one-sentence summary, shown even when the finding is folded */
.finding-sum { margin: 8px 0 16px !important; color: var(--ink-2, var(--ink)); font-size: 16px; line-height: 1.55; }

/* in-text citations: small superscript numbers with a hover card; the reference list */
sup.ref { font: 600 .68em/0 var(--mono); vertical-align: super; margin-left: 1px; white-space: nowrap; }
sup.ref a { color: var(--accent, var(--std)); text-decoration: none; padding: 0 1px; border-radius: 3px; }
sup.ref a:hover, sup.ref a:focus-visible { background: color-mix(in srgb, var(--accent, var(--std)) 14%, transparent); }
.ref-card { position: absolute; z-index: 50; max-width: min(380px, calc(100vw - 32px)); padding: 10px 12px; border-radius: 10px;
  background: var(--bg, #fff); border: 1px solid var(--line, #d9dee5); box-shadow: 0 8px 28px rgba(0,0,0,.14);
  font: 400 13px/1.5 var(--body); color: var(--ink); pointer-events: none; }
.ref-card p { margin: 0 !important; } .ref-card p + p { margin-top: 6px !important; }
.ref-card .rf-t { font-weight: 600; color: var(--ink); }
ol.refs { padding-left: 1.6em; font-size: 14.5px; line-height: 1.55; }
ol.refs li { margin: 0 0 8px; padding-left: 4px; scroll-margin-top: 90px; }
ol.refs li::marker { font: 600 12px var(--mono); color: var(--ink-3); }
ol.refs .rf-a { color: var(--ink-2, var(--ink)); }
ol.refs .rf-t { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line, #d9dee5); }
ol.refs .rf-t:hover { border-bottom-color: currentColor; }
ol.refs .rf-v { color: var(--ink-3); font-style: italic; }
ol.refs li:target { background: color-mix(in srgb, var(--accent, var(--std)) 10%, transparent); border-radius: 6px; }

/* figures stay as wide as the text; the framework figure keeps its landscape layout, drawn at 1240 px and scaled to the
   column; "Enlarge" opens any figure at full size */
.fig-zoom-host { position: relative; }
.flow-box { position: relative; overflow: hidden; }
.flow-box > .flowfig { width: 1240px; transform-origin: 0 0; }
@media (max-width: 860px) { .flow-box > .flowfig { width: auto; transform: none !important; } .flow-box { height: auto !important; } }
.zoom-btn { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line-2, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px); font: 500 11px/1 var(--mono); color: var(--ink-2, var(--ink)); cursor: zoom-in; opacity: .85; transition: opacity .2s, border-color .2s; }
.zoom-btn:hover { opacity: 1; border-color: var(--ink-3); }
.zoom-btn svg { width: 12px; height: 12px; }
.fig-body { cursor: zoom-in; }
.fig-body details, .fig-body summary, .fig-body a { cursor: auto; }
.zoom-ov { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 56px 24px 32px;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(4px); overflow: auto; animation: zfade .18s ease; }
.zoom-ov .zoom-in { width: min(1320px, 100%); margin: auto 0; padding: 24px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.18); cursor: auto; }
.zoom-ov .zoom-in > .flowfig { width: 100% !important; transform: none !important; }
.zoom-ov .zoom-x { position: fixed; top: 14px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  font: 400 20px/1 var(--body); color: var(--ink); cursor: pointer; }
@keyframes zfade { from { opacity: 0; } to { opacity: 1; } }

/* Figure 5: the three settings side by side */
table.settings { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
table.settings th, table.settings td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.settings thead th { font: 600 12.5px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; border-bottom: 2px solid currentColor; }
table.settings thead th small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
table.settings thead .m-p { color: var(--priv); } table.settings thead .m-s { color: var(--std); } table.settings thead .m-r { color: var(--rt); }
table.settings tbody th { width: 92px; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
table.settings td { color: var(--ink-2, var(--ink)); width: 30%; }
table.settings code { font-size: .88em; }
@media (max-width: 640px) { table.settings { font-size: 12.5px; } table.settings th, table.settings td { padding: 7px 6px; } table.settings tbody th { width: 64px; font-size: 10px; } }
.zoom-ov .zoom-btn { display: none; }
table.heat thead th:first-child { width: 26%; text-align: left; }

/* captions as in a paper: under the figure, small and centred */
.fig .fig-body { display: flex; flex-direction: column; }
.fig .fig-body > .fig-cap { order: 99; }
.fig figcaption, .fig .fig-cap { max-width: 820px; margin: 14px auto 0 !important; text-align: center; font: 400 13px/1.55 var(--body) !important; color: var(--ink-2) !important; }
.fig .fig-cap b, .fig figcaption b { color: var(--ink); font-weight: 650; }
.fig .fig-cap .fc-t { color: var(--ink); font-weight: 600; }
.fig figcaption.fig-ext { margin-top: 6px !important; color: var(--ink-3) !important; }
.post .cw-lead { margin: 0 0 18px !important; } .post .cw-row p { font-size: 15.5px; }

/* the report's authors under the title */
.post-head .authors { margin: 22px 0 0; max-width: 980px; font: 500 15px/1.65 var(--body); color: var(--ink); }
.post-head .authors .au { white-space: nowrap; }
.post-head .authors sup, .post-head .au-note sup { font: 600 .72em/0 var(--mono); color: var(--priv); margin-left: 1px; }
.post-head .au-note { margin: 8px 0 0; font: 400 12.5px/1.5 var(--body); color: var(--ink-3); }
.post-head .au-note + .byline { margin-top: 12px; }

/* the report's intro video, under the byline */
.post-head .intro-video { margin: 26px 0 0; width: min(1000px, 100%); }
.post-head .intro-video video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #0b0e12; box-shadow: 0 24px 60px -30px rgba(0,0,0,.55); }
.wall4.wall3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
@media (max-width: 860px) { .wall4.wall3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }