/* A blog post: the navy banner of the site's other pages, holding the post's title and its
   series as a ladder (the step this post takes lit in orange), then a white page set for
   reading: a contents rail, one serif column of about seventy characters, and figures that
   may run wider than the column. Builds on plate.css; the series accent is --ece-deep. */
body.post-page { background: var(--rd-bg); transition: background .3s; }

/* ---------- Banner ---------- */
/* The title on the left; on the right the specks of heroes/instruct.js act out the post, drawn on
   one canvas behind the whole banner into the box .post-figure keeps; the series runs along the foot. */
.post-hero { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; min-height: min(100vh, 64rem); min-height: min(100svh, 64rem);
  background: radial-gradient(60rem 40rem at 78% 42%, rgba(46,78,190,.35), transparent 70%),
              linear-gradient(104deg, var(--ece-navy) 0%, var(--ece-deep) 86%); }
.post-hero .stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.post-hero > .wrap { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.post-hero a, .post-hero button { pointer-events: auto; }
.hero-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: 3rem; align-items: center;
  padding-block: calc(var(--sh-h) + 1.5rem) 1.5rem; }
.hero-main { grid-template-columns: minmax(0, 1fr) minmax(0, 38rem); }
/* The banner's figure: a slot the article's interactive image fills (its figure.js, in banner mode), its card here and
   its drawing on the stage behind the whole banner. */
.post-figure { position: relative; min-height: min(32rem, 62vh); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.post-head { max-width: 36rem; }
.post-head h1 { margin: 0; font: 600 clamp(2.6rem, 5.4vw, 4.5rem)/1.02 var(--serif); letter-spacing: -.022em; }
.post-head h1 .sub { display: block; margin-top: .9rem; font: 400 clamp(1.3rem, 2.3vw, 1.75rem)/1.25 var(--serif);
  letter-spacing: -.004em; color: var(--on-navy); }
.post-head h1::after { content: ""; display: block; width: 5rem; height: 4px; background: var(--ece-orange); margin-top: 1.6rem; }
.post-head .standfirst { margin: 1.6rem 0 0; font: 400 1.2rem/1.6 var(--serif); color: var(--on-navy); }
.post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.75rem 0 0; padding: 0; list-style: none;
  font: 400 .92rem/1.4 var(--sans); color: #AEB7D6; }
.post-meta strong { color: #fff; font-weight: 500; }
.post-meta .draft { color: #F7B48C; }
@media (max-width: 600px) { .post-meta { gap: .3rem 1rem; } }

/* The series along the foot of the banner (heroes/series.js): a glyph of light for each part, each a
   small scene of its idea, on one line; the part being read alive and ringed in orange, the others at rest.
   Pointing at a part brings it to life, lights the line up to it and opens its card. */
.series { position: relative; padding: 1rem 0 1.4rem; border-top: 1px solid rgba(214,220,240,.16); }
.sr-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin: 0 0 .4rem; font: 400 .85rem/1.45 var(--sans); color: #AEB7D6; }
.sr-name strong { color: #fff; font-weight: 600; font-size: .95rem; }
.sr-scroll { flex: 1; min-width: 0; }
.sr-row { position: relative; }
.sr-cv { position: absolute; left: 0; top: 0; width: 100%; height: 108px; pointer-events: none; }
.sr-row ol { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sr-part { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 0 .3rem .25rem;
  border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.sr-part:focus-visible { outline: 2px solid #9DB6FF; outline-offset: 2px; }
.sr-glyph { display: block; width: 92px; height: 108px; }
.sr-t { font: 500 .84rem/1.25 var(--sans); color: #C9D2EE; transition: color .2s; }
.sr-n { margin-right: .35rem; color: #7F8BB8; font-variant-numeric: tabular-nums; }
.sr-s { margin-top: .2rem; font: 400 .74rem/1.3 var(--sans); color: #8590BD; transition: color .2s; }
.sr-part[aria-current] .sr-t, .sr-part.on .sr-t { color: #fff; }
.sr-part[aria-current] .sr-t { font-weight: 600; }
.sr-part[aria-current] .sr-n { color: var(--ece-orange); }
.sr-part.on .sr-s { color: #AEB7D6; }
.sr-card { position: absolute; z-index: 5; top: 0; left: 0; width: 17rem; padding: .8rem .95rem .9rem; border-radius: 14px; box-sizing: border-box;
  border: 1px solid rgba(157,182,255,.28); background: rgba(12,18,52,.94); box-shadow: 0 18px 40px -16px rgba(0,0,0,.75);
  color: #E6E9F5; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.sr-card.on { opacity: 1; transform: none; }
/* The card's pointer, under the glyph it belongs to. */
.sr-card::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  border: solid rgba(157,182,255,.28); border-width: 0 1px 1px 0; background: rgb(12,18,52); }
.sr-c-h { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font: 600 .72rem/1.3 var(--sans); color: #9DB6FF; }
.sr-c-s { padding: .12rem .5rem; border-radius: 999px; background: rgba(157,182,255,.14); color: #C9D6FF; font-weight: 500; }
.sr-c-t { display: block; margin-top: .3rem; font: 600 1rem/1.3 var(--sans); color: #fff; }
.sr-c-q { display: block; margin-top: .3rem; font: 400 .85rem/1.45 var(--sans); color: #C9D2EE; }
@media (max-width: 960px) {
  .hero-main { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-height: 0; padding-bottom: 1rem; }
  .post-figure { min-height: 0; }
  .sr-scroll { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sr-row { min-width: 60rem; }
  .sr-row li { scroll-snap-align: start; }
}
@media (max-width: 600px) { .hero-main { padding-top: calc(var(--sh-h) + 1.75rem); } }

/* ---------- Reading page ---------- */
/* The reader's settings (post.js): the line length, set as the column's width (every figure follows it), and a
   light or dark page. Widths measured for this type: 55, 66 (the ideal, by default) and 80 characters a line. */
html { --measure: 41.8rem; }
html[data-measure="55"] { --measure: 34.8rem; }
html[data-measure="80"] { --measure: 50.7rem; }
body.post-page { --lol-track: #DCE1EE; --lol-lit: #3C5FB8; --lol-glow: rgba(60,95,184,.35); --lol-hot: #E97132; --lol-hot-soft: rgba(233,113,50,.16);
  --lol-hot-glow: rgba(233,113,50,.5); --lol-spark: #E97132;
  --rd-bg: #FFFFFF; --rd-card: #FFFFFF; --rd-soft: #F4F6FB; --rd-chip: #EEF2FB; --rd-link: var(--ece-deep); --rd-muted: #8D94AE;
  --rd-warm: #FFF6EF; --rd-warm2: #FDE6D8; --rd-done: #B4501D; }
html[data-reading="dark"] body.post-page { --lol-track: rgba(214,220,240,.16); --lol-lit: #7D9BFF; --lol-glow: rgba(125,155,255,.5);
  --lol-hot: #F0894F; --lol-hot-soft: rgba(240,137,79,.18); --lol-hot-glow: rgba(255,150,80,.6); --lol-spark: #FFB86B;
  --rd-bg: #0C1130; --rd-card: #121838; --rd-soft: #161D45; --rd-chip: #1F2858; --rd-link: #9DB6FF; --rd-muted: #7F89AD;
  --rd-warm: rgba(233,113,50,.12); --rd-warm2: rgba(233,113,50,.22); --rd-done: #F59A6E; color-scheme: dark; }
html[data-reading="dark"] .post { --ink: #E6E9F5; --ink-2: #AAB2D0; --rule: rgba(214,220,240,.16); color: var(--ink); }
html[data-reading="dark"] .article mark.flag { color: #fff; }
html[data-reading="dark"] .findings, html[data-reading="dark"] .next-card { box-shadow: 0 0 0 1px rgba(214,220,240,.12); }

.post { display: grid; grid-template-columns: 12.5rem minmax(0, var(--measure)); justify-content: start; column-gap: 4.5rem;
  padding-block: 4.5rem 5rem; }
.toc { grid-column: 1; }
/* The contents rail: the series' line of light, run by post.js. Each numbered section is a node and each
   figure a mark under its section; the light fills the line with the reading, read nodes stay lit, the
   current one glows orange, and the node the light reaches fires a spark. The back matter sits below. */
.toc .rail { position: sticky; top: calc(var(--sh-hs) + 1.5rem); }
/* Reading progress, at the head of the rail: a dial with the minutes left, filling as the reader goes,
   and the section being read. */
.rail-progress { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.4rem; padding: .85rem .9rem; border-radius: 16px;
  border: 1px solid var(--rule); background: var(--rd-card); box-shadow: 0 10px 26px -18px rgba(21,29,75,.35); }
.rp-dial { position: relative; flex: none; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; }
.rp-dial > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-track { fill: none; stroke: var(--rule); stroke-width: 4; }
.rp-fill { fill: none; stroke: url(#rp-grad); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .35s ease-out; }
.rp-n { position: relative; font: 600 1.45rem/1 var(--serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; transition: opacity .3s; }
.rp-check { position: absolute; width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--ece-orange); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; }
.rail-progress.done .rp-n { opacity: 0; }
.rail-progress.done .rp-check { opacity: 1; transform: none; }
.rp-text { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.rp-l { font: 600 .9rem/1.2 var(--sans); color: var(--ink); }
.rp-where { font: 400 .76rem/1.35 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail-title { margin: 0 0 .9rem; font: 600 .8rem/1.3 var(--sans); color: var(--ink-2); letter-spacing: .01em; }
.toc .rail { --node: 14px; }
.lol { position: relative; }
.lol ol { margin: 0; padding: 0; list-style: none; }
/* The track and the light share one length; the light is scaled down it from the top (post.js), and its head
   moves with it, both by transform. */
.lol::before, .lol-fill { position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--lol-top, 0px); width: 2px; border-radius: 2px;
  height: calc(var(--lol-end, 0px) - var(--lol-top, 0px)); }
.lol::before { content: ""; background: var(--lol-track); }
.lol-fill { transform-origin: top; transform: scaleY(0); background: linear-gradient(to bottom, var(--lol-lit) 70%, var(--lol-hot));
  box-shadow: 0 0 6px var(--lol-glow); transition: transform .18s ease-out; }
.lol-head { position: absolute; left: calc(var(--node) / 2 - 3.5px); top: calc(var(--lol-top, 0px) - 3.5px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--lol-hot); box-shadow: 0 0 9px 2px var(--lol-hot-glow); opacity: 0; transition: transform .18s ease-out, opacity .3s; }
.lol.lit .lol-head { opacity: 1; }
.lol a { text-decoration: none; }
.lol a:focus-visible, .lol-back a:focus-visible { outline: 2px solid var(--rd-link); outline-offset: 3px; border-radius: 4px; }
.lol-sec { padding: 0 0 1.05rem; }
.lol-sec > a { display: grid; grid-template-columns: var(--node) 1.35rem minmax(0, 1fr); column-gap: .6rem; align-items: start;
  font: 400 .84rem/1.3 var(--sans); color: var(--rd-muted); transition: color .3s; }
.lol-node { position: relative; z-index: 1; width: var(--node); height: var(--node); margin-top: 1px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--lol-track); background: var(--rd-bg); transition: border-color .3s, background .3s, box-shadow .3s; }
.lol-n { padding-top: .08rem; font: 600 .72rem/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--rd-muted); transition: color .3s; }
.lol-sec.read > a { color: var(--ink-2); }
.lol-sec.read .lol-node { border-color: var(--lol-lit); background: var(--lol-lit); box-shadow: 0 0 0 3px var(--rd-bg), 0 0 9px var(--lol-glow); }
.lol-sec.current > a { color: var(--ink); font-weight: 600; }
.lol-sec.current .lol-n { color: var(--lol-hot); }
.lol-sec.current .lol-node { border-color: var(--lol-hot); box-shadow: 0 0 0 4px var(--lol-hot-soft), 0 0 14px var(--lol-hot-glow); }
.lol-sec.current .lol-node::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--lol-hot); }
.lol-sec > a:hover { color: var(--ink); }
/* The spark: a ring off the node and a few arcs, as the light reaches it (post.js draws the arcs). */
.lol-node.fire::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--lol-hot); animation: lol-ring .75s ease-out forwards; }
@keyframes lol-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.7); opacity: 0; } }
.lol-spark { position: absolute; z-index: 2; width: 64px; height: 64px; overflow: visible; pointer-events: none; }
.lol-spark path { fill: none; stroke: var(--lol-spark); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 2px var(--lol-hot-glow)); }
.lol .lol-figs { margin-top: .5rem; }
.lol-fig > a { display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: .6rem; align-items: center; padding: .16rem 0;
  font: 400 .74rem/1.3 var(--sans); color: var(--rd-muted); }
.lol-fig > a:hover { color: var(--ink); }
.lol-mark { justify-self: center; position: relative; z-index: 1; width: 8px; height: 8px; box-sizing: border-box; transform: rotate(45deg);
  border: 1.5px solid var(--lol-track); background: var(--rd-bg); transition: border-color .3s, background .3s; }
.lol-fig.passed .lol-mark { border-color: var(--lol-lit); background: var(--lol-lit); }
.lol-ft b { font-weight: 600; color: var(--ink-2); }
.lol-back { margin: .3rem 0 0; padding: .9rem 0 0 calc(var(--node) + .6rem); border-top: 1px solid var(--rule); list-style: none; display: grid; gap: .5rem; }
.lol-back a { font: 400 .8rem/1.3 var(--sans); color: var(--rd-muted); text-decoration: none; transition: color .3s; }
.lol-back li.read a { color: var(--ink-2); }
.lol-back li.current a { color: var(--ink); font-weight: 600; }
.lol-back a:hover { color: var(--ink); }
/* Narrow screens: the rail is hidden, and a thin bar across the top carries the light, a dot per section. */
.lol-bar { display: none; }
.article { grid-column: 2; min-width: 0; font: 400 1.3rem/1.72 var(--serif); color: var(--ink); }
@media (max-width: 1120px) {
  .post { grid-template-columns: minmax(0, var(--measure)); justify-content: center; padding-top: 3.5rem; }
  .toc { display: none; }
  .article { grid-column: 1; }
  .lol-bar { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; background: var(--lol-track); opacity: 0; transition: opacity .3s; }
  .lol-bar.on { opacity: 1; }
  .lol-bar i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(to right, var(--lol-lit), var(--lol-hot));
    box-shadow: 0 0 6px var(--lol-glow); }
  .lol-bar b { position: absolute; top: -2px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid var(--lol-track); background: var(--rd-bg); transition: background .3s, border-color .3s; }
  .lol-bar b.on { border-color: var(--lol-lit); background: var(--lol-lit); }
}
@media (max-width: 600px) { .article { font-size: 1.08rem; line-height: 1.72; } }

/* plate.css spaces and rules every section of a page's main; inside a post, sections are parts of one column. */
.article section { padding-block: 0; border-top: 0; }

.article h2 { font: 600 1.6rem/1.25 var(--serif); letter-spacing: -.008em; margin: 3.4rem 0 1rem; }
.article h3 { font: 600 1.2rem/1.3 var(--serif); margin: 2.2rem 0 .75rem; }
.article p { margin: 0 0 1.3rem; }
.article em { font-style: italic; }
.article a { color: var(--rd-link); }
.article ul { margin: 0 0 1.3rem; padding-left: 1.2rem; }
.article li { margin-bottom: .45rem; }
.article li::marker { color: var(--ink-2); }


/* ---------- Figures ---------- */
.fig { margin: 2.4rem 0 2.6rem; }
.fig figcaption { margin-top: .85rem; font: 400 .95rem/1.55 var(--sans); color: var(--ink-2); }
.fig figcaption b { color: var(--ink); font-weight: 600; }


/* Figure 1: the instruction, each part marked in the margin. */
.listing { margin: 0; padding: .9rem 0; border-radius: 12px; background: var(--ece-navy); color: #E3E8F6; }
.seg { display: grid; grid-template-columns: minmax(0, 1fr) 10.5rem; align-items: stretch; }
.seg + .seg { margin-top: .55rem; }
.seg pre { margin: 0; padding: .3rem 1.4rem; font: 500 .8rem/1.62 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.seg .tag { display: flex; align-items: center; margin-right: 1.2rem; padding: .2rem 0 .2rem .8rem;
  border-left: 2px solid rgba(214,220,240,.38); font: 500 .8rem/1.3 var(--sans); color: #AEB7D6; }
.seg.done .tag { border-left-color: var(--ece-orange); color: #F7B48C; }
.seg.done pre { color: #fff; }
.seg pre .mat { color: #8E99C4; }
@media (max-width: 700px) {
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg .tag { order: -1; margin: .4rem 1.4rem 0; padding: 0 0 .2rem; border-left: 0; }
  .seg pre { padding-inline: 1.1rem; }
}


/* Figure 2: the two answers, measure by measure. */
.compare { width: 100%; border-collapse: collapse; font: 400 .92rem/1.45 var(--sans); }
.compare thead th { padding: 0 .75rem .6rem; text-align: left; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--ink); }
.compare thead th:last-child { color: var(--rd-link); }
.compare tbody th { padding: .65rem .75rem .65rem 0; text-align: left; font-weight: 500; color: var(--ink-2); width: 32%; vertical-align: top; }
.compare td { padding: .65rem .75rem; vertical-align: top; color: var(--ink); font-variant-numeric: tabular-nums; }
.compare td:last-child { background: rgba(140,165,240,.08); }
.compare tbody tr + tr > * { border-top: 1px solid var(--rule); }
@media (max-width: 600px) { .compare { font-size: .84rem; } .compare tbody th { width: 30%; } }




/* ================= The article's sections =================
   The article reports a real experiment, so its parts read like one: findings first, the exchange as
   it happened, the instruction dissected, the measurements charted, the method as a spec sheet. */

/* Numbered section openers: the number hangs in the gutter on wide screens, above the title on narrow ones. */
.article h2.sec { display: flex; flex-direction: column; gap: .5rem; margin: 4.4rem 0 1.2rem; font: 600 2.05rem/1.16 var(--serif); letter-spacing: -.015em; }
/* The number opens the section like a chapter: a large serif numeral, then a rule to the column's edge. */
.sec-n { display: flex; align-items: center; gap: 1rem; font: 400 2.6rem/1 var(--serif); color: var(--ece-orange); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.sec-n::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
@media (max-width: 600px) { .sec-n { font-size: 2rem; } }

/* In brief: three findings, each led by its number. */
.article .findings { margin: 0 0 1rem; padding: 1.7rem 1.8rem 1.6rem; border-radius: 16px; color: #E6EAF7;
  background: radial-gradient(40rem 18rem at 100% 0%, rgba(46,78,190,.45), transparent 70%), linear-gradient(160deg, #151D4B, #0B1340); }
.findings h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.5rem; font: 600 .95rem/1.3 var(--sans); color: #fff; letter-spacing: 0; }
.findings h2::before { content: ""; width: 1.6rem; height: 3px; border-radius: 2px; background: var(--ece-orange); }
.findings ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.findings li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(214,220,240,.14); }
.findings li:first-child { padding-top: 0; border-top: 0; }
.article .f-stat { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.f-n { font: 600 2.4rem/1 var(--serif); color: #fff; letter-spacing: -.02em; }
.findings li:nth-child(2) .f-n { color: #F7B48C; }
.f-l { font: 500 .78rem/1.35 var(--sans); color: #AEB7D6; }
.article .f-t { margin: 0; font: 400 1.12rem/1.6 var(--serif); color: #DCE2F5; }
@media (max-width: 640px) { .article .findings { padding: 1.4rem 1.25rem; } .findings li { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }

/* The section's key statement, in the author's own words: set larger, under the short orange rule the title also carries. Not a quotation. */
.article p.pull { margin: 2.4rem 0 2.6rem; font: 400 1.72rem/1.4 var(--serif); color: var(--ink); letter-spacing: -.008em; }
.article p.pull::before { content: ""; display: block; width: 3rem; height: 3px; margin-bottom: 1.1rem; background: var(--ece-orange); }
@media (max-width: 600px) { .article p.pull { font-size: 1.25rem; } }

/* A source quoted in its own words, with who said it. */
.article blockquote.source { margin: 1.6rem 0 1.9rem; padding: 1.1rem 1.3rem 1.1rem 1.3rem; border-radius: 12px; background: var(--rd-soft); }
.source p { margin: 0 0 .6rem; font: 400 1.3rem/1.5 var(--serif); font-style: italic; color: var(--ink); }
.source cite { display: block; font: 500 .82rem/1.4 var(--sans); font-style: normal; color: var(--ink-2); }

/* The six parts of an instruction, as tiles with the marks Figure 2 uses. */
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.parts-grid { list-style: none; margin: 1.6rem 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.part { position: relative; padding: 1.05rem 1.1rem 1.1rem; border: 1px solid var(--rule); border-radius: 14px; background: var(--rd-card); }
.part-i { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--rd-chip); color: var(--rd-link); }
.part-n { position: absolute; top: 1rem; right: 1.1rem; font: 600 .78rem/1 var(--sans); color: var(--rd-muted); font-variant-numeric: tabular-nums; }
.part h3 { margin: .75rem 0 .15rem; font: 600 1rem/1.3 var(--sans); color: var(--ink); }
/* A tile reads in two layers: what the part is (a short line under its name), then what it was in the example. */
.article .part p { margin: 0; }
.part .part-def { margin-top: .1rem; font: 500 .84rem/1.4 var(--sans); color: var(--ink-2); }
.part .part-ex { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--rule); font: 400 1.04rem/1.55 var(--serif); color: var(--ink); }
.part.done { border-color: rgba(233,113,50,.45); background: var(--rd-warm); }
.part.done .part-i { background: var(--rd-warm2); color: var(--rd-done); }
.part.done h3 { color: var(--rd-done); }
@media (max-width: 640px) { .parts-grid { grid-template-columns: minmax(0, 1fr); } }

/* Inline marks on quoted text: a claim flagged, an emoji ringed (blocks: ==text=={.flag}). */
mark.flag { padding: 0 .1em; border-radius: 3px; background: rgba(233,113,50,.2); color: inherit; box-shadow: inset 0 -2px 0 #E97132; }
mark.emoji { padding: 0 .1em; border-radius: 5px; background: transparent; box-shadow: 0 0 0 1.5px #E97132; color: inherit; }

/* Figure 2's margin marks carry the same icons as the tiles. */
.seg .tag { gap: .5rem; }
.seg .tag .ico { width: 16px; height: 16px; }

.sc-table { margin-top: 1.1rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.sc-table summary { cursor: pointer; font: 500 .84rem/1.4 var(--sans); color: var(--rd-link); }
.sc-table .compare { margin-top: .9rem; }
.compare { width: 100%; border-collapse: collapse; font: 400 .88rem/1.45 var(--sans); }
.compare thead th { padding: 0 .7rem .55rem; text-align: left; font-weight: 600; border-bottom: 2px solid var(--ink); }
.compare tbody th { padding: .55rem .7rem .55rem 0; text-align: left; font-weight: 500; color: var(--ink-2); width: 32%; vertical-align: top; }
.compare td { padding: .55rem .7rem; vertical-align: top; font-variant-numeric: tabular-nums; }
.compare tbody tr + tr > * { border-top: 1px solid var(--rule); }

/* About the experiment: a short note, set apart from the argument. */
.article .method { margin-top: 3.6rem; padding: 1.2rem 1.4rem; border-radius: 14px; background: var(--rd-soft); }
.method h2 { margin: 0 0 .5rem; font: 600 .95rem/1.3 var(--sans); letter-spacing: 0; color: var(--ink); }
.method p { margin: 0; font: 400 .92rem/1.6 var(--sans); color: var(--ink-2); }

/* Next in the series: a node of the series, lit. */
.next-card { display: flex; gap: 1.2rem; margin: 3.4rem 0 0; padding: 1.5rem 1.6rem; border-radius: 16px; color: #E6EAF7;
  background: radial-gradient(30rem 14rem at 0% 0%, rgba(80,120,255,.35), transparent 70%), linear-gradient(160deg, #151D4B, #0B1340); }
.nc-node { flex: none; width: 2.6rem; height: 2.6rem; margin-top: .2rem; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #6F93FF 20% 42%, transparent 44%);
  box-shadow: 0 0 0 1.5px rgba(150,180,255,.6), 0 0 22px rgba(110,150,255,.55); }
.article .nc-k { margin: 0 0 .35rem; font: 500 .8rem/1.3 var(--sans); color: #AFC3FF; }
.article .nc-t { margin: 0 0 .5rem; font: 600 1.35rem/1.3 var(--serif); color: #fff; }
.article .nc-s { margin: 0 0 .9rem; font: 400 .98rem/1.55 var(--serif); color: #C9D1EC; }
.article .nc-w { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; font: 500 .84rem/1.3 var(--sans); }
.article .nc-w span { padding: .3rem .6rem; border-radius: 999px; background: rgba(233,113,50,.2); color: #F7B48C; }
.article .nc-w a { color: #AFC3FF; }

/* Appendix: the two answers, verbatim, folded. */
.appendix h2 { font: 600 1.15rem/1.3 var(--sans); letter-spacing: 0; margin: 3.4rem 0 1rem; }
.appendix > p { font: 400 .92rem/1.6 var(--sans); color: var(--ink-2); }
.appendix details { margin: 0 0 .8rem; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.appendix summary { display: flex; align-items: center; gap: .8rem; cursor: pointer; padding: .9rem 1.1rem; list-style: none; }
.appendix summary::-webkit-details-marker { display: none; }
/* The disclosure chevron, cut from a filled square. */
.appendix summary::before { content: ""; flex: none; width: .6rem; height: .6rem; background: var(--rd-link); transition: transform .2s;
  clip-path: polygon(20% 0, 80% 50%, 20% 100%, 5% 85%, 50% 50%, 5% 15%); }
.appendix details[open] summary::before { transform: rotate(90deg); }
.ap-t { font: 600 .95rem/1.3 var(--sans); color: var(--ink); } .ap-m { margin-left: auto; font: 400 .8rem/1.3 var(--sans); color: var(--ink-2); }
/* Each answer as it reads once rendered, one card per piece (post, newsletter, script), in the
   interface face so the model's words stand apart from the essay's. Shown in full, no inner scroll. */
.appendix .ap-body { display: grid; gap: .9rem; padding: 1rem; border-top: 1px solid var(--rule); background: var(--rd-soft); }
.appendix .ap-piece { min-width: 0; padding: 1rem 1.25rem 1.1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--rd-card);
  font: 400 .95rem/1.62 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.appendix .ap-piece > h3 { margin: 0 0 .85rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule); font: 600 .82rem/1.2 var(--sans); letter-spacing: .01em; color: var(--ink-2); }
.appendix .ap-piece.note { background: transparent; border-style: dashed; }
.article .ap-piece p { margin: 0 0 .75rem; font: inherit; }
.article .ap-piece p:last-child { margin-bottom: 0; }
.article .ap-piece h4 { margin: 1.2rem 0 .4rem; font: 600 1rem/1.35 var(--sans); color: var(--ink); }
.article .ap-piece ul { margin: 0 0 .75rem; padding-left: 1.2rem; font: inherit; }
.article .ap-piece li { margin: 0 0 .25rem; font: inherit; }
.article .ap-piece hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--rule); }
.appendix .ht { color: var(--rd-link); font-weight: 600; }
.appendix .ap-table { margin: 0 0 .75rem; overflow-x: auto; }
.appendix .ap-table table { width: 100%; border-collapse: collapse; font: 400 .86rem/1.5 var(--sans); overflow-wrap: normal; }
.appendix .ap-table th { text-align: left; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--rule); padding: .4rem .6rem .4rem 0; }
.appendix .ap-table td { vertical-align: top; border-bottom: 1px solid var(--rule); padding: .5rem .6rem .5rem 0; }
.appendix .ap-table td:first-child { color: var(--ink-2); }
.appendix .ap-table td:first-child:not(.nw) { min-width: 8rem; }
.appendix .ap-table .nw { white-space: nowrap; }
@media (max-width: 560px) {
  .appendix .stack thead { display: none; }
  .appendix .stack, .appendix .stack tbody, .appendix .stack tr, .appendix .stack td { display: block; }
  .appendix .stack tr { padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  .appendix .stack td { border: 0; padding: .15rem 0; }
  .appendix .stack td:first-child { font-weight: 600; }
  .appendix .stack td + td::before { content: attr(data-label); display: block; font: 600 .74rem/1.4 var(--sans); color: var(--ink-2); margin-top: .3rem; }
}

/* Reading settings: a small round button at the foot of the screen, its panel above it. */
.reading { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .3s; }
.reading.shown { opacity: 1; transform: none; pointer-events: auto; }
.rd-btn { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(214,220,240,.25); cursor: pointer;
  background: #151D4B; color: #fff; font: 600 1.05rem/1 var(--serif); box-shadow: 0 12px 28px -12px rgba(3,6,25,.7); }
.rd-btn:hover { background: #22306F; }
.rd-btn[aria-expanded="true"] { background: var(--ece-orange); border-color: var(--ece-orange); }
.rd-panel { position: absolute; right: 0; bottom: 3.6rem; width: 17.5rem; padding: 1rem 1rem .9rem; border-radius: 16px; background: #121838; color: #E6E9F5;
  border: 1px solid rgba(214,220,240,.16); box-shadow: 0 24px 50px -20px rgba(3,6,25,.8); font-family: var(--sans); }
.rd-panel[hidden] { display: none; }
.rd-panel fieldset { margin: 0; padding: 0; border: 0; }
.rd-panel fieldset + fieldset { margin-top: .9rem; }
.rd-panel legend { margin-bottom: .45rem; padding: 0; font: 600 .78rem/1.3 var(--sans); color: #fff; }
.rd-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.06); }
.rd-seg label { position: relative; cursor: pointer; }
.rd-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rd-seg span { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .55rem .2rem .5rem; border-radius: 8px; color: #C9D1EC; transition: background .2s, color .2s; }
.rd-seg svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rd-seg .ic-edge { stroke-width: 1.2; opacity: .45; }
.rd-seg b { font: 500 .74rem/1 var(--sans); }
.rd-seg small { margin-top: -.15rem; font: 400 .66rem/1 var(--sans); color: #8E99C4; font-variant-numeric: tabular-nums; }
.rd-seg input:checked + span { background: #fff; color: #121838; }
.rd-seg input:checked + span .ic-edge { opacity: .35; }
.rd-seg input:checked + span small { color: #545B77; }
.rd-seg input:focus-visible + span { outline: 2px solid var(--ece-orange); outline-offset: 1px; }
.rd-note { margin: .35rem 0 0; font: 400 .7rem/1.3 var(--sans); color: #8E99C4; }
@media (max-width: 600px) { .reading { right: .9rem; bottom: .9rem; } }
@media (prefers-reduced-motion: reduce) { .reading { transition: none; } }