/* Gedankenexperiment — a printed page that happens to be on a screen.

   Twelve columns and rules that are structural rather than decorative. The accent is
   spent on one thing at a time: whatever you are pointing at right now. */

:root{
  --paper:#f4f3f0;
  --ink:#111110;
  --ink-2:#55534e;
  --ink-3:#8b8983;
  --rule:#d8d6d0;
  --accent:#d4321c;
  /* The accent with the lights turned down, for a pressed or hovered state that has to
     stay red rather than change colour to acknowledge the cursor. */
  --accent-deep:#a8240f;
  --gutter:16px;
  --measure:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The paper is set here as well as on body deliberately. A background on body with none
   on html propagates to the canvas — body then has nothing of its own left to blend
   against, and the circle would invert empty space instead of the page. */
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;background:var(--paper)}
body{
  background:var(--paper);
  /* Makes body the group the wave layers blend into, so the inversion sees the
     paper and the type and stops there rather than reaching the canvas. */
  isolation:isolate;
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  font-feature-settings:"ss01","cv05","tnum";
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(212,50,28,.14)}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- shell ---------- */
/* The AI slider's doing — or rather the output's. Anchored to the right edge and half
   off it, so it arrives from outside rather than appearing in the middle. Size comes
   from --blob, which the hero script sets; 0 until then, so a reader without JavaScript
   never sees a stray circle.
 *
 * The circle, as two blend layers instead of a red disc.
 *
 * A disc behind the text meant the ink underneath it had to survive being sat on, and
 * every attempt at that — inverting the palette at a threshold, haloing the glyphs,
 * filling a highlight box behind each fragment — was a workaround for the same thing:
 * the page has one ink colour and the circle needs two. So do not paint red. Invert.
 *
 *   wave-flip   difference against white  -> a true photographic negative
 *   wave-tint   screen against the accent -> black becomes red, white stays white
 *   wave-hue    hue against the accent    -> pulls the one cold result back warm
 *
 * The third layer earns its place. Inverting the accent sends #d4321c to cyan, and
 * screening that gives a pale periwinkle — so the AI in the formula and the slider
 * thumbs, the two things most obviously the site's, came out cold on a warm page and
 * read as a bug. `hue` takes the hue of the source and keeps the backdrop's saturation
 * and lightness, so it warms that periwinkle without touching the near-greys: white
 * type has no saturation to reassign, and the red is already red.
 *
 * Composed, the three map paper to #d63c29 and ink to #fcf1f1: the red page with warm
 * white type, arrived at per pixel. Nothing is thresholded and nothing is duplicated —
 * the accent, the rules, the slider track and anything added to this page later all
 * invert, because the inversion happens to the rendered picture rather than to a list
 * of components someone has to remember to update.
 *
 * All three are fixed and inset:0 so each paints exactly one viewport however large the
 * radius grows; the stop is doubled so the edge stays hard. Outside the circle the
 * gradient is transparent, and a transparent source leaves its backdrop untouched,
 * which is what keeps the rest of the page ordinary.
 */
.wave-flip,.wave-tint,.wave-hue{position:fixed;inset:0;pointer-events:none}
.wave-flip{z-index:5;mix-blend-mode:difference;
  background:radial-gradient(circle at 100% 50%,
    #fff 0 var(--blob,0), transparent var(--blob,0))}
.wave-tint{z-index:6;mix-blend-mode:screen;
  background:radial-gradient(circle at 100% 50%,
    #d4321c 0 var(--blob,0), transparent var(--blob,0))}
.wave-hue{z-index:7;mix-blend-mode:hue;
  background:radial-gradient(circle at 100% 50%,
    #d4321c 0 var(--blob,0), transparent var(--blob,0))}
/* Blending only reaches what is painted below it inside the same stacking context, and
   a background set on body normally propagates to the canvas and stops being body's to
   blend with. Giving html the paper keeps body's own background on body, and isolate
   makes body the group the wave layers blend into. */
@media (prefers-reduced-motion:no-preference){
  .wave-flip,.wave-tint,.wave-hue{will-change:background}
}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 32px;position:relative;z-index:1}

/* ---------- masthead ---------- */
/* Pinned, so the mark and the way back to the index stay reachable down a long page.
   Paper background because content scrolls underneath it, not behind a blur. */
header.mast{position:sticky;top:0;z-index:20;background:var(--paper);
  display:flex;align-items:baseline;justify-content:space-between;
  padding:22px 0 14px;gap:24px}
/* The hairline appears only once something has actually gone under the header. At the
   top of the page there is nothing to separate, and a rule there would just be a rule. */
header.mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);opacity:0;transition:opacity .18s ease}
header.mast.stuck::after{opacity:1}
/* Anchor targets have to clear the pinned header, or `#contact` lands underneath it. */
section[id]{scroll-margin-top:76px}
.mark{font-weight:600;font-size:13px;letter-spacing:-.01em}
.mark em{font-style:normal;color:var(--ink-3);font-weight:400}
/* The running mark. Sized in CSS as well as by the script so the masthead does not
   reflow when the canvas is measured — and so the space is held even if JS never runs. */
.life-mark{display:inline-block;vertical-align:-7px;width:22px;height:22px;margin-right:8px}
/* The colophon twin, at rest. `currentColor` so it greys with the line it sits on. */
.glider-static{display:block;width:30px;height:30px;color:var(--accent);flex:none}
.controls{display:flex;gap:20px;align-items:baseline}
.ctl{color:var(--ink-3);cursor:pointer;background:none;border:none;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:0;transition:color .15s}
.ctl:hover{color:var(--accent)}
/* Signed-in state. A filled marker rather than a word: the address is in the title
   attribute for when you need it, and on the page it would only be noise. */
.who-in{cursor:default}
.who-in::before{content:"● ";color:var(--accent)}
.who-in:hover{color:var(--ink-3)}

/* ---------- hero: compressed, formula-led ---------- */
.hero{padding:52px 0 72px}
h1{font-size:clamp(38px,6.6vw,92px);line-height:.95;letter-spacing:-.045em;
  font-weight:600;text-transform:lowercase;white-space:nowrap}
h1 .op{color:var(--ink-3);font-weight:300;font-size:.72em;letter-spacing:normal;
  padding:0 .14em;position:relative;top:-.06em}
h1 .exp{font-size:.40em;vertical-align:super;line-height:0;color:var(--accent);
  letter-spacing:-.02em;text-transform:uppercase;font-weight:600;
  position:relative;top:-.06em}
/* A label, so it takes the label treatment the rest of the page uses — the same mono
   grey as WHO, TERMS and TRY IT below it. "What if" earned display type by being part
   of the sentence; "Thesis" names the thing rather than starting it. */
.eyebrow{color:var(--ink-3);margin-bottom:16px}

/* three columns under the rule: who is saying it, what the terms mean, and the thing
   itself to push on */
.hero-lower{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  margin-top:40px;padding-top:14px;border-top:1px solid var(--ink);align-items:start}
.col .k{color:var(--ink-3);margin-bottom:14px}
.who{grid-column:1 / span 5}
.who p{font-size:16.5px;color:var(--ink-2);line-height:1.5}
.who b{color:var(--ink);font-weight:500}
.defs{grid-column:6 / span 3}
.defs dl{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-content:start}
.defs dt{color:var(--accent)}
.defs dd{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.try{grid-column:9 / span 4}

.sl{display:grid;grid-template-columns:50px 1fr 34px;gap:10px;align-items:center;
  margin-bottom:20px}
.sl label{color:var(--ink-3)}
/* The tick is the whole point of the log scale: it marks where the base is 1, the one
   value at which the exponent does nothing at all. */
.track{position:relative;display:flex;align-items:center}
.tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:1px;height:8px;
  background:var(--ink-3);pointer-events:none}
.tick i{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-style:normal;
  font-size:9px;color:var(--ink-3);letter-spacing:0}
.sl output{text-align:right;color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;
  background:var(--ink);outline:none;cursor:ew-resize}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;
  background:var(--accent);border-radius:0;cursor:ew-resize}
input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--accent);
  border:none;border-radius:0;cursor:ew-resize}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.readout{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid var(--ink);margin-top:16px;padding-top:10px}
.readout .v{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:26px;
  font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* Red is for output below the input — the case the whole page is arguing about. */
.readout .v.zero{color:var(--accent)}
.readout .note{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:10px;
  letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase;text-align:right;
  max-width:15em;line-height:1.35;
  /* Two lines' worth, always. The verdicts are one line or two and the readout was
     jumping as they swapped — reserving the taller of the two costs one line of space
     and stops the whole column moving while you drag. */
  min-height:2.7em}

/* ---------- streams ---------- */
.cat + .cat{margin-top:64px}
.section-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  align-items:baseline;border-bottom:1px solid var(--ink);padding-bottom:8px}
.section-head .l{grid-column:1 / span 6;font-weight:600;font-size:13px;letter-spacing:.02em}
.section-head .r{grid-column:7 / span 6;text-align:right;color:var(--ink-3)}

.stream{border-bottom:1px solid var(--ink)}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  padding:22px 0;border-bottom:1px solid var(--rule);position:relative;
  transition:background .18s ease}
.row:last-child{border-bottom:none}
.row::before{content:"";position:absolute;left:-32px;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
a.row:hover::before,a.row:focus-visible::before{transform:scaleY(1)}
a.row:hover{background:rgba(212,50,28,.035)}
a.row:focus-visible{outline:none;background:rgba(212,50,28,.06)}
.row .idx{grid-column:1 / span 1;color:var(--ink-3);transition:color .18s}
a.row:hover .idx{color:var(--accent)}
.row .body{grid-column:2 / span 7}
.row h3{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.15;
  margin-bottom:5px}
.row h3 .arrow{display:inline-block;opacity:0;transform:translateX(-4px);
  transition:all .2s;color:var(--accent);font-weight:400}
a.row:hover h3 .arrow,a.row:focus-visible h3 .arrow{opacity:1;transform:translateX(3px)}
.row p{color:var(--ink-2);font-size:15px;max-width:40em}
.row .side{grid-column:10 / span 3;text-align:right;color:var(--ink-3);padding-top:5px}
.row .side .tag{display:block;color:var(--ink-2);transition:color .18s}
.row .side .st{display:block;margin-top:3px}
a.row:hover .side .tag{color:var(--accent)}
/* An entry with no page behind it yet: present, plainly not a link. */
.row.soon h3{color:var(--ink-2)}
.empty{padding:22px 0;color:var(--ink-3)}

/* archive fold */
.fold{border-bottom:1px solid var(--ink)}
.fold summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:repeat(12,1fr);gap:var(--gutter);padding:16px 0;
  color:var(--ink-3);transition:color .15s}
.fold summary::-webkit-details-marker{display:none}
.fold summary:hover{color:var(--accent)}
.fold summary .a{grid-column:2 / span 7}
.fold summary .b{grid-column:10 / span 3;text-align:right}
.fold[open] summary{border-bottom:1px solid var(--rule)}
.fold .row h3{font-size:17px}
.fold .row{padding:16px 0}

/* ---------- subscribe ---------- */
.sub{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  padding:56px 0 0;align-items:start}
.sub .k{grid-column:1 / span 1;color:var(--ink-3)}
.sub .c{grid-column:2 / span 7}
.sub-form{display:flex;gap:12px;align-items:stretch;max-width:30em}
.sub-form input[type=email]{flex:1;min-width:0;background:none;border:0;
  border-bottom:1px solid var(--ink);padding:6px 2px;font:inherit;font-size:16px;
  color:var(--ink);border-radius:0}
.sub-form input[type=email]::placeholder{color:var(--ink-3)}
.sub-form input[type=email]:focus{outline:none;border-bottom-color:var(--accent)}
.sub-form button{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--paper);
  background:var(--ink);border:0;padding:8px 18px;cursor:pointer;
  transition:background .15s}
.sub-form button:hover{background:var(--accent)}
.sub-note{margin-top:12px;color:var(--ink-3)}
.sub-note.ok{color:var(--accent)}
.see-list{border-bottom:1px solid var(--rule);transition:border-color .15s,color .15s}
.see-list:hover{color:var(--accent);border-color:var(--accent)}
.sub-note.bad{color:var(--accent)}
/* The honeypot, and the visually-hidden label. Both present for machines and
   assistive tech respectively, neither on screen. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A table, for the one page that has tabular data. Scrolls in its own box on narrow
   screens rather than pushing the page sideways. */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:520px}
.tbl th{text-align:left;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  font-weight:400;padding:0 16px 8px 0;border-bottom:1px solid var(--ink)}
.tbl td{padding:10px 16px 10px 0;border-bottom:1px solid var(--rule);
  color:var(--ink-2);font-size:15px;vertical-align:top}
.tbl td.mono{font-size:11px;color:var(--ink-3)}
.tbl tr.gone td{color:var(--ink-3);text-decoration:line-through}

/* ---------- contact ---------- */
.foot{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);
  padding:64px 0 32px;align-items:start}
.foot .k{grid-column:1 / span 1;color:var(--ink-3)}
.foot .c{grid-column:2 / span 7}
.foot .c p{font-size:19px;letter-spacing:-.01em;line-height:1.4}
.foot .c a{border-bottom:1px solid var(--rule);transition:border-color .15s,color .15s}
.foot .c a:hover{color:var(--accent);border-color:var(--accent)}

.colophon{border-top:1px solid var(--rule);padding:14px 0 48px;
  display:flex;justify-content:space-between;color:var(--ink-3);gap:16px;flex-wrap:wrap}

/* ---------------------------------------------------------------- entry pages
   One page per experiment. Same grid, same rules, narrower measure — a page you
   read rather than scan, so the twelve columns collapse to a text column. */
.entry{padding:44px 0 0}
.narrow{max-width:660px}
.entry section{padding:28px 0;border-top:1px solid var(--rule)}
.entry-head{border-top:none!important;padding-top:0!important}
.crumb{color:var(--ink-3);margin-bottom:22px;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 .5em;color:var(--rule)}
.entry h1{font-size:clamp(30px,4.6vw,52px);line-height:1.02;letter-spacing:-.035em;
  font-weight:600;text-transform:none;white-space:normal}
.entry .lead{font-size:18px;color:var(--ink-2);margin-top:12px;line-height:1.45}
.entry h2{font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:10px}
.entry h3{font-size:15px;font-weight:600;margin:22px 0 4px}
.entry h3:first-of-type{margin-top:6px}
.entry p{color:var(--ink-2);font-size:16px}
.entry p + p{margin-top:14px}
.entry em{font-style:italic;color:var(--ink)}
.entry .m{color:var(--ink-3);font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.entry-head .m{margin-top:16px;display:block}
.open{margin-top:20px}
.open-link{font-weight:600;color:var(--accent);
  border-bottom:1px solid rgba(212,50,28,.35);transition:border-color .15s}
.open-link:hover{border-color:var(--accent)}
/* A button, in the site's one button idiom: a mono label in a box, square like
   everything else here. Outlined rather than filled — the subscribe button is filled
   because it completes a form and should be the loudest thing in its band, while this
   one sits under a dek and inside a figure, where it has to be obviously pressable
   without outranking the sentence it followed from. */
.btn{display:inline-block;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper);background:var(--accent);border:1px solid var(--accent);
  padding:6px 11px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
/* Set into the dek rather than parked under it, so the answer arrives in the same
   breath as the claim rather than as a footnote to it. Baseline alignment is the
   default and the right one here: an inline-block aligns on its own label, so the
   button's type sits on the dek's baseline however much padding the box carries. */
.entry .lead .btn{margin-left:.45em;vertical-align:baseline}
/* The same button, drawn inside a figure. It cannot inherit .btn — that styles a box
   model this has none of — so the two are kept in step by hand: same border, same fill
   on hover, same reversal of the label. */
.fit-svg .svg-btn{cursor:pointer}
.fit-svg .svg-btn rect{transition:fill .15s,stroke .15s}
.fit-svg .svg-btn:hover rect{fill:var(--accent-deep);stroke:var(--accent-deep)}
.open .m{margin-left:12px}
.entry-foot p + p{margin-top:14px}
.tree{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;
  line-height:1.8;color:var(--ink-2);margin:14px 0;padding:16px 18px;overflow-x:auto;
  background:rgba(255,255,255,.6);border:1px solid var(--rule)}

/* A figure that outgrows the text column. The measure is set for reading; a diagram
   with three panels of detail needs the whole grid or it becomes a picture of itself. */
.entry .wide{max-width:none}
/* Below about 720px the panels stop being legible, so the figure scrolls inside its own
   box rather than shrinking — and the page itself never scrolls sideways. */
.fit-fig{margin:0;overflow-x:auto}
.fit-svg{display:block;width:100%;min-width:700px;height:auto}
/* A figure whose smallest type is 7.5px in its own coordinates. At the 700px floor it
   would render around 4px and be decoration; this one has to stay readable or it is
   not making its argument. It scrolls on a phone instead. */
.fit-svg--dense{min-width:1020px}
.fit-fig figcaption{margin-top:14px;color:var(--ink-3);text-align:center;
  font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}

/* The one line the piece turns on, given room and taken out of the column. */
.entry .statement{margin:32px 0;padding:24px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:19px;line-height:1.42;letter-spacing:-.008em;color:var(--ink);text-align:center}
.entry .statement span{display:block;color:var(--accent);margin-top:6px}

/* A page that is one image and nothing else. Centred in the viewport rather than
   stacked under the masthead, so there is nothing to read before you see it. */
.only-gif{min-height:60vh;display:flex;align-items:center;justify-content:center;
  padding:48px 0}
.only-gif img{display:block;max-width:100%;height:auto}

/* the loop diagram — strokes not fills, so it reads as a drawing and not a chart */
.diagram{margin:18px 0 4px}
.diagram svg{width:100%;height:auto;display:block;overflow:visible}
.diagram .box rect{fill:rgba(255,255,255,.7);stroke:var(--ink-3);stroke-width:1.3}
.diagram .box.inner rect{fill:rgba(255,255,255,.9)}
.diagram .hull rect{fill:rgba(212,50,28,.04);stroke:var(--accent);stroke-width:1.4;
  stroke-dasharray:5 4}
.diagram .hull-label{fill:var(--accent);font-size:10.5px;letter-spacing:.01em}
.diagram .edges path{fill:none;stroke:var(--ink-3);stroke-width:1.3;stroke-linecap:round}
/* The marker lives in <defs>, outside .edges — scoping it under .edges matched
   nothing and every arrow silently lost its head. */
.diagram marker path{stroke:var(--ink-3)}
.diagram .label text{fill:var(--ink);font-size:11.5px;text-anchor:middle}
.diagram figcaption{color:var(--ink-3);font-size:13px;margin-top:10px}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .wrap{padding:0 20px}
  .hero{padding:32px 0 28px}
  h1{font-size:clamp(34px,11.4vw,68px)}
  /* Narrow order: define the terms, hand over the widget, then say who is talking.
     The argument has to land before it matters who is making it. */
  .hero-lower{display:flex;flex-direction:column;align-items:stretch;margin-top:26px}
  .col{grid-column:auto}
  .defs{order:1}
  .try{order:2}
  .who{order:3}
  .who p{font-size:16px}
  .try,.who{margin-top:28px;border-top:1px solid var(--rule);padding-top:14px}
  .sl{grid-template-columns:56px 1fr 36px}
  /* Only contact goes. It is a section further down the same page, so scrolling finds
     it; sign in is the one control with nowhere else to be reached from, and most of
     the people who need it are on a phone. */
  .ctl-contact{display:none}
  .controls{gap:12px}
  .mark{font-size:11px}
  .life-mark{width:18px;height:18px;margin-right:7px;vertical-align:-5px}
  .colophon{align-items:center}
  .section-head{display:flex;justify-content:space-between}
  .row{display:block;padding:20px 0}
  .row::before{left:-20px}
  .row .idx{display:inline;margin-right:10px}
  .row .side{text-align:left;display:inline;padding:0}
  .row .side .tag,.row .side .st{display:inline}
  .row .side .st{margin-left:8px}
  .row h3{font-size:20px}
  .fold summary{display:flex;justify-content:space-between}
  .sub{display:block;padding:40px 0 0}
  .sub .k{margin-bottom:8px}
  .sub-form{flex-wrap:wrap}
  .foot{display:block;padding:48px 0 24px}
  .foot .k{margin-bottom:8px}
  .entry h1{font-size:clamp(28px,8vw,40px)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* A shell command or a request body, quoted verbatim. Scrolls rather than wraps: a
   wrapped command line is one a reader cannot copy and trust. */
.code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:12px;
  line-height:1.6;color:var(--ink);background:#eceae5;border:1px solid var(--rule);
  padding:14px 16px;margin:14px 0;overflow-x:auto;white-space:pre}
.entry code{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;font-size:.88em;
  background:#eceae5;padding:1px 4px}
/* An h2 that opens a section already has the section's rule and padding above it. One
   that interrupts running prose has nothing, and butts straight into the paragraph it
   follows. */
.entry p + h2,.entry .code + h2{margin-top:28px}
/* A README reads as a list of facts, so its lists have to look deliberate rather than
   like prose that gave up. Hanging indent, mono marker, no bullet glyph. */
.rm-list{list-style:none;margin:12px 0}
.rm-list li{color:var(--ink-2);font-size:16px;padding:7px 0 7px 20px;position:relative;
  border-bottom:1px solid var(--rule)}
.rm-list li:last-child{border-bottom:none}
.rm-list li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}