/* The Moral Framework. Screen style: warm paper and ink, Inter display headlines, mono instrument labels.
   One meaning per colour across the page: green is balance, magenta is strain and its cost,
   cyan is a record on an end's own books, red is forbidden. */
body.mf-body[data-rpi-page] {
  --mf-paper: #faf8f3; --mf-ink: #1d1d1b; --mf-body: #2a2926; --mf-soft: #3c3a36; --mf-hair: #8a8a8a;
  --mf-rule: #d9d5cb; --mf-panel: #f3f0e8;
  --mf-balance: #0b7a3e; --mf-cost: #e6007e; --mf-record: #009fe3; --mf-forbid: #c8401f;
  --mf-display: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mf-text: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mf-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--mf-paper); color: var(--mf-body); font-optical-sizing: auto;
}
@media (prefers-color-scheme: dark) {
  body.mf-body[data-rpi-page] {
    --mf-paper: #141413; --mf-ink: #faf8f3; --mf-body: #e9e6df; --mf-soft: #c9c5bc; --mf-hair: #8a8a8a;
    --mf-rule: #3a3833; --mf-panel: #1c1b19;
    --mf-balance: #3fc07a; --mf-cost: #ff3d9e; --mf-record: #2bb3f0; --mf-forbid: #ff6a3d;
    color-scheme: dark;
  }
}

.mf-page { padding-bottom: 5rem; font: 420 1.0625rem/1.5 var(--mf-text); color: var(--mf-body); }
.mf-page *, .mf-page *::before, .mf-page *::after { box-sizing: border-box; }
.mf-wrap { width: min(calc(100% - 4rem), 75rem); margin-inline: auto; }
.mf-page p { margin: 0 0 1.1rem; }
.mf-page a { color: var(--mf-ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.mf-page a:hover { text-decoration-thickness: 2px; }
.mf-page var { font-style: italic; font-family: var(--mf-text); }
.mf-page strong { font-weight: 650; color: var(--mf-ink); }
.mf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-body .skip { position: absolute; left: 1rem; top: -10rem; z-index: 50; padding: .8rem 1rem; background: var(--mf-paper); color: var(--mf-ink); border: 1px solid var(--mf-ink); }
.mf-body .skip:focus { top: 1rem; }

/* Type */
.mf-body .mf-label {
  display: block; margin: 0 0 1rem; font: 700 .72rem/1.3 var(--mf-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mf-soft);
}
.mf-body .mf-title {
  margin: 0 0 1.3rem; max-width: 11ch; font: 820 clamp(2.9rem, 4.2vw, 4.1rem)/.94 var(--mf-display);
  letter-spacing: -.038em; color: var(--mf-ink);
  text-shadow: 0 0 .5px color-mix(in srgb, var(--mf-ink) 55%, transparent);
}
.mf-body .mf-h2 {
  margin: 0 0 1.4rem; max-width: 22ch; font: 780 clamp(1.9rem, 3vw, 2.6rem)/1.05 var(--mf-display);
  letter-spacing: -.02em; color: var(--mf-ink);
}
.mf-body .mf-h3, .mf-body .mf-page h3 {
  margin: 0 0 .6rem; font: 780 1.2rem/1.15 var(--mf-display); letter-spacing: -.015em; color: var(--mf-ink);
}
.mf-lede, .mf-section-lede { font-weight: 450; font-size: clamp(1.12rem, 1.4vw, 1.25rem); line-height: 1.32; letter-spacing: -.008em; color: var(--mf-ink); }
.mf-section-lede { max-width: 44rem; }
.mf-num { font: 860 clamp(2.6rem, 4vw, 3.6rem)/.86 var(--mf-display); letter-spacing: -.05em; color: var(--mf-ink); font-variant-numeric: tabular-nums lining-nums; }
.mf-caption { font-size: .9rem; line-height: 1.5; color: var(--mf-soft); }
.mf-balance-ink { color: var(--mf-balance); fill: var(--mf-balance); }
.mf-cost-ink { color: var(--mf-cost); fill: var(--mf-cost); }
.mf-forbidden-ink { color: var(--mf-forbid) !important; }

/* Opening: the claim beside the code itself */
.mf-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3.5rem; align-items: start; padding: 2.3rem 0 3.2rem; }
.mf-hero-copy { padding-top: .4rem; min-width: 0; }
.mf-hero .mf-lede { max-width: 30rem; margin-bottom: 0; }

/* The relation at the top: the subject itself, working */
.mf-pair { margin: 1.3rem 0 0; border: 1px solid var(--mf-ink); padding: .9rem 1.2rem .8rem; min-width: 0; }
.mf-body .mf-pair .mf-instrument-head { margin-bottom: .1rem; }
.mf-pair-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mf-pair-svg .mf-rel-text { font-size: 18px; }
.mf-pair-svg .mf-node-name { font-size: 21px; }
.mf-pair-read { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: .8rem; padding: .6rem 0 .65rem; margin-top: .4rem; border-top: 1px solid var(--mf-rule); border-bottom: 1px solid var(--mf-rule); }
.mf-end-read { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.mf-end-b { align-items: flex-end; text-align: right; }
.mf-rec { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }
.mf-end-b .mf-rec { align-items: flex-end; }
.mf-rec-name { white-space: nowrap; font: 700 .7rem/1.3 var(--mf-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mf-record); }
.mf-end-x { font: 500 1.02rem/1.3 var(--mf-text); color: var(--mf-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-end-x output { font: inherit; color: inherit; }
.mf-end-jlabel { margin: .45rem 0 .3rem; font: 700 .66rem/1.2 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-cost); }
.mf-body .mf-page :is(.mf-label, .mf-end-jlabel) var { text-transform: none; font-family: var(--mf-text); font-weight: 600; letter-spacing: 0; font-size: 1.12em; }
.mf-end-j, .mf-pair-eq { font: 860 clamp(2.2rem, 2.9vw, 2.7rem)/.86 var(--mf-display); letter-spacing: -.05em; color: var(--mf-ink); font-variant-numeric: tabular-nums lining-nums; }
.mf-pair-eq { padding: 0 .2rem; }
.mf-pair.is-balanced .mf-end-j, .mf-pair.is-balanced .mf-pair-eq { color: var(--mf-balance); }
.mf-body .mf-pair-control { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin: .5rem 0 0; align-items: start; }
.mf-body .mf-pair-control > .mf-label { padding-top: .85rem; }
.mf-range { min-width: 0; }
.mf-range input { display: block; }
.mf-range-ticks { position: relative; height: .9rem; margin: -.3rem 8px 0; font: 400 .7rem/1 var(--mf-mono); color: var(--mf-soft); }
.mf-range-ticks span { position: absolute; top: 0; left: calc(var(--at) / 16 * 100%); transform: translateX(-50%); }
.mf-range-ticks .mf-balance-ink { font-weight: 700; }
.mf-body .mf-pair .mf-caption { margin: .6rem 0 0; font-size: .84rem; line-height: 1.4; }

/* Contents strip under the opening */
.mf-jumps { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.4rem; padding: .2rem 0; border-top: 1.5px solid var(--mf-ink); font-size: .92rem; }
.mf-jumps a { display: inline-flex; align-items: center; min-height: 44px; }
.mf-body .mf-jumps .mf-label { margin: 0 .4rem 0 0; color: var(--mf-ink); }
.mf-jumps + .mf-section { border-top: 0; }

/* Why this is physics: seven steps on one wire, from the record to the code.
   Each step has a line drawing in the page's colours: cyan a record, magenta strain and its cost, green balance,
   red forbidden, ink a participant or a permitted change. */
.mf-physics { padding: 3.6rem 0 3.8rem; }
.mf-body .mf-physics .mf-section-head { margin-bottom: 1.6rem; }
.mf-chain { list-style: none; margin: 0; padding: 0; }
.mf-step { position: relative; display: grid; grid-template-columns: 6rem minmax(0, 23rem) minmax(0, 38rem); gap: 0 2.2rem; align-items: start; }
.mf-step::before { content: ""; position: absolute; left: 3rem; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--mf-ink); }
.mf-step:first-child::before { top: 2.9rem; }
.mf-step:last-child::before { bottom: auto; height: 2.9rem; }
.mf-step::after { content: ""; position: absolute; top: 0; left: 8.2rem; right: 0; border-top: 1px solid var(--mf-rule); }
.mf-step:first-child::after { border-top: 1.5px solid var(--mf-ink); }
.mf-step-g { position: relative; z-index: 1; width: 6rem; height: 4rem; margin: .9rem 0; border: 1px solid var(--mf-ink); background: var(--mf-paper); }
.mf-step-g svg { display: block; width: 100%; height: 100%; }
.mf-step-claim, .mf-step-body { min-width: 0; padding: 1rem 0 1.15rem; }
.mf-body .mf-step-claim .mf-label { margin: 0 0 .45rem; color: var(--mf-ink); }
.mf-body .mf-page .mf-step h3 { margin: 0; font: 780 1.3rem/1.14 var(--mf-display); letter-spacing: -.018em; }
.mf-step-body p { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.5; }
.mf-step-body { padding-top: 1.55rem; }
.mf-step-body p:last-child { margin-bottom: 0; }
.mf-step-body strong { font-weight: 780; }
.mf-step-body .mf-step-cite { font-size: .86rem; line-height: 1.45; color: var(--mf-soft); }
.mf-g-ink { fill: none; stroke: var(--mf-ink); stroke-width: 2; }
.mf-g-thin { stroke-width: 1.2; }
.mf-g-head { stroke-linejoin: miter; }
.mf-g-rec { stroke: var(--mf-record); stroke-width: 2.5; }
.mf-g-rec-thin { stroke-width: 1.5; }
.mf-g-new { stroke-width: 3.5; }
.mf-g-recdot { fill: var(--mf-record); }
.mf-g-node { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 2; }
.mf-g-you { fill: var(--mf-ink); }
.mf-g-x { font: italic 500 15px var(--mf-text); fill: var(--mf-ink); text-anchor: middle; }
.mf-g-cost { fill: none; stroke: var(--mf-cost); stroke-width: 2.5; }
.mf-g-thick { stroke-width: 6; }
.mf-g-mid { stroke-width: 2.5; }
.mf-g-bal { fill: var(--mf-balance); }
.mf-g-forbid { stroke: var(--mf-forbid); stroke-width: 2; }
.mf-g-box { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-g-shadow { fill: var(--mf-ink); }

.mf-code { border: 1.5px solid var(--mf-ink); background: var(--mf-paper); box-shadow: 6px 6px 0 var(--mf-ink); padding: 1.3rem 1.6rem 1.2rem; }
.mf-code-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1.5px solid var(--mf-ink); padding-bottom: .9rem; margin: 0 0 .2rem !important; }
.mf-code-head .mf-label { margin: 0; color: var(--mf-ink); }
.mf-code-head .mf-code-parts { color: var(--mf-soft); font-weight: 400; }
.mf-code-part { display: grid; grid-template-columns: 8.2rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--mf-rule); }
.mf-code-part h2.mf-label { margin: .3rem 0 0; color: var(--mf-ink); }
.mf-code-part p { font-size: 1rem; line-height: 1.45; margin-bottom: .55rem; }
.mf-code-part p:last-child { margin-bottom: 0; }
.mf-eq { font-size: 1.35rem !important; line-height: 1.3 !important; color: var(--mf-ink); margin: .5rem 0 .7rem !important; white-space: nowrap; }
.mf-clauses { list-style: none; margin: .1rem 0 0; padding: 0; counter-reset: clause; }
.mf-clauses li { counter-increment: clause; position: relative; font-size: 1rem; line-height: 1.45; padding: .15rem 0 .15rem 1.7rem; color: var(--mf-ink); }
.mf-clauses li::before { content: counter(clause); position: absolute; left: 0; top: .15rem; font: 700 .9rem/1.6 var(--mf-mono); color: var(--mf-ink); }
.mf-code-foot { margin: .9rem 0 0 !important; font-size: .95rem; color: var(--mf-soft); }

/* Sections */
.mf-section { border-top: 1px solid var(--mf-rule); padding: 4rem 0; scroll-margin-top: 4.5rem; }
.mf-section-head { max-width: 46rem; margin-bottom: 2.2rem; }
.mf-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: start; }
.mf-split-second { margin-top: 3.2rem; padding-top: 2.6rem; border-top: 1px solid var(--mf-rule); }
.mf-copy { max-width: 36rem; min-width: 0; }

/* Exact numbers */
.mf-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 2rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--mf-rule); }
.mf-numbers div { min-width: 0; }
.mf-numbers dt { margin-bottom: .55rem; }
.mf-numbers dd { margin: 0; font-size: .88rem; line-height: 1.4; color: var(--mf-soft); }

/* The live relation */
.mf-instrument { margin: 0; min-width: 0; border: 1px solid var(--mf-ink); padding: 1.3rem 1.4rem 1.2rem; }
.mf-body .mf-instrument-head { display: flex; align-items: flex-start; gap: .7rem; }
.mf-instrument-head > span:last-child { padding-top: .15rem; text-wrap: balance; }
.mf-live { flex: none; display: inline-block; padding: .15rem .45rem; background: var(--mf-ink); color: var(--mf-paper); letter-spacing: .14em; }
.mf-instrument svg { display: block; width: 100%; height: auto; overflow: visible; }
.mf-node { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 2; }
.mf-node-name { font: 700 20px var(--mf-mono); fill: var(--mf-ink); text-anchor: middle; }
.mf-end { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-rel-line { stroke: var(--mf-cost); stroke-width: 6; stroke-linecap: butt; transition: stroke-width .15s; }
.mf-rel-line.is-balanced { stroke: var(--mf-balance); stroke-width: 2.5; }
.mf-rel-text { font: 700 15px var(--mf-mono); letter-spacing: .06em; text-anchor: middle; fill: var(--mf-cost); }
.mf-rel-text.is-balanced { fill: var(--mf-balance); }
.mf-curve-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.6rem; margin: .2rem 0 0 !important; padding: .7rem 0; border-top: 1px solid var(--mf-rule); border-bottom: 1px solid var(--mf-rule); font: 500 1.05rem/1.3 var(--mf-text); color: var(--mf-ink); font-variant-numeric: tabular-nums; }
.mf-curve-read output { font: inherit; color: inherit; }
.mf-curve-j { margin-left: auto; font-weight: 780; }
.mf-curve-from { font: 700 .66rem/1 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-record); margin-left: .4rem; }
.mf-instrument.is-balanced .mf-curve-j { color: var(--mf-balance); }
.mf-curve { margin: 1rem 0 .6rem; }
.mf-axis { stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-ticks line { stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-tick-text text, .mf-tick-text { font: 400 15px var(--mf-mono); fill: var(--mf-soft); text-anchor: middle; }
text.mf-tick-text.mf-balance-ink { fill: var(--mf-balance); font-weight: 700; letter-spacing: .08em; }
.mf-axis-name { font: 400 13px var(--mf-mono); fill: var(--mf-soft); text-anchor: middle; letter-spacing: .08em; }
.mf-axis-name.mf-cost-ink { fill: var(--mf-cost); }
.mf-balance { stroke: var(--mf-balance); stroke-width: 1.5; stroke-dasharray: 5 5; }
.mf-curve-line { fill: none; stroke: var(--mf-cost); stroke-width: 3; }
.mf-same { stroke: var(--mf-record); stroke-width: 1.5; stroke-dasharray: 6 5; }
.mf-dot { fill: var(--mf-record); stroke: var(--mf-paper); stroke-width: 2.5; }
.mf-dot.is-balanced { fill: var(--mf-balance); }
.mf-dot-text { font: 700 16px var(--mf-mono); fill: var(--mf-record); text-anchor: middle; }
.mf-control { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; margin: .4rem 0 .8rem; }
.mf-control .mf-label { margin: 0; color: var(--mf-ink); }
.mf-control input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--mf-ink); cursor: pointer; }
.mf-key { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: .8rem 0 0 !important; font: 700 .68rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; }
.mf-key span { display: inline-flex; align-items: center; gap: .5rem; }
.mf-key span::before { content: ""; width: 1.2rem; height: 3px; }
.mf-key-balance { color: var(--mf-balance); } .mf-key-balance::before { background: var(--mf-balance); }
.mf-key-cost { color: var(--mf-cost); } .mf-key-cost::before { background: var(--mf-cost); }
.mf-key-record { color: var(--mf-record); } .mf-key-record::before { background: var(--mf-record); }

/* Five consequences */
.mf-five { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--mf-ink); counter-reset: five; }
.mf-five li { counter-increment: five; padding: 1.2rem 1.2rem 0 0; min-width: 0; }
.mf-five li + li { border-left: 1px solid var(--mf-rule); padding-left: 1.2rem; }
.mf-five li::before { content: "0" counter(five); display: block; margin-bottom: .9rem; font: 700 .72rem/1.3 var(--mf-mono); letter-spacing: .14em; color: var(--mf-soft); }
.mf-body .mf-five h3 { font-size: 1.12rem; line-height: 1.18; }
.mf-five p { font-size: .95rem; line-height: 1.5; margin: 0; }

/* One code */
.mf-facts, .mf-reqs { margin: 0 0 1.3rem; padding: 0; list-style: none; counter-reset: item; }
.mf-facts li, .mf-reqs li { counter-increment: item; position: relative; padding: .55rem 0 .55rem 2rem; border-top: 1px solid var(--mf-rule); line-height: 1.45; }
.mf-facts li:last-child, .mf-reqs li:last-child { border-bottom: 1px solid var(--mf-rule); }
.mf-facts li::before, .mf-reqs li::before { content: counter(item); position: absolute; left: 0; top: .55rem; font: 700 .85rem/1.7 var(--mf-mono); color: var(--mf-soft); }
.mf-facts li { color: var(--mf-ink); }
.mf-reqs { margin: .2rem 0 0; }
.mf-reqs-tight { margin: .6rem 0 1rem; }
.mf-reqs-tight li { font-size: .98rem; }
.mf-panel { min-width: 0; border: 1px solid var(--mf-ink); padding: 1.3rem 1.4rem; background: var(--mf-panel); }
.mf-panel .mf-label { color: var(--mf-ink); }
.mf-panel-note { margin: 1rem 0 0 !important; font-size: .95rem; }
.mf-table { width: 100%; border-collapse: collapse; font-size: .96rem; line-height: 1.4; }
.mf-table th { text-align: left; font: 700 .68rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); padding: 0 1rem .6rem 0; border-bottom: 1.5px solid var(--mf-ink); }
.mf-table td { vertical-align: top; padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--mf-rule); }
.mf-table td:first-child { width: 42%; color: var(--mf-ink); font-weight: 560; }
.mf-table td:last-child, .mf-table th:last-child { padding-right: 0; }
.mf-ought { color: var(--mf-ink); }
.mf-tag { display: inline-block; margin-left: .4rem; padding: .1rem .4rem; border: 1px solid var(--mf-ink); font: 700 .62rem/1.4 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; vertical-align: .15em; }
.mf-fixed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 3.2rem 0 0; border-top: 1.5px solid var(--mf-ink); }
.mf-fixed div { padding: 1.1rem 1.2rem 0 0; min-width: 0; }
.mf-fixed div + div { border-left: 1px solid var(--mf-rule); padding-left: 1.2rem; }
.mf-fixed dt { color: var(--mf-ink); margin-bottom: .7rem; }
.mf-fixed dd { margin: 0; font-size: .95rem; line-height: 1.5; }

/* One code: the three marks of forced, each beside the result that establishes it */
.mf-forced { list-style: none; margin: 0; padding: 0; }
.mf-mark-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 27rem); gap: 1.4rem 2.6rem; align-items: start; padding: 1.5rem 0 2.1rem; border-top: 1.5px solid var(--mf-ink); }
.mf-mark, .mf-mark-copy { min-width: 0; }
.mf-body .mf-mark-tag { display: flex; align-items: center; gap: .7rem; margin: 0 0 .9rem; }
.mf-mark-n { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--mf-ink); font: 860 1.45rem/1 var(--mf-display); letter-spacing: -.04em; color: var(--mf-ink); font-variant-numeric: lining-nums; }
.mf-body .mf-mark-tag .mf-label { margin: 0; color: var(--mf-ink); }
.mf-body .mf-page .mf-mark-h { margin: 0 0 .55rem; font: 780 1.36rem/1.12 var(--mf-display); letter-spacing: -.018em; }
.mf-body .mf-mark-s { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--mf-soft); }
.mf-mark-copy p:last-child { margin-bottom: 0; }
.mf-mark-panel .mf-facts { margin: 0; }
.mf-menus { margin: 0; }
.mf-menus div { padding: .65rem 0; border-top: 1px solid var(--mf-rule); }
.mf-menus div:last-child { border-bottom: 1px solid var(--mf-rule); }
.mf-menus dt { font: 700 .66rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-ink); }
.mf-menus dd { margin: .35rem 0 0; font-size: .96rem; line-height: 1.45; }
.mf-forced + .mf-rq { margin-top: .4rem; }

/* One code: the form of a judgment. Five comparisons on one menu. Ink arrows run from an act to an act it beats;
   magenta is cost, green balance, red a forbidden act or a fact that fails. */
.mf-form { margin: 3.2rem 0 0; padding-top: 2.6rem; border-top: 1px solid var(--mf-rule); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 3.5rem; align-items: start; }
.mf-form-copy { min-width: 0; }
.mf-form-copy .mf-h3 { text-wrap: balance; }
.mf-form-copy p:last-child { margin-bottom: 0; }
.mf-f-facts { margin: 0 0 1.2rem; border-top: 1.5px solid var(--mf-ink); }
.mf-f-facts div { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .8rem; padding: .6rem 0; border-bottom: 1px solid var(--mf-rule); }
.mf-f-facts dt { padding-top: .2rem; font: 700 .68rem/1.4 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-ink); }
.mf-f-facts dd { margin: 0; font-size: .97rem; line-height: 1.45; }
.mf-cmp .mf-f-set { margin: .9rem 0 0; }
.mf-cmp .mf-f-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mf-f-opts .mf-a-opt small { display: inline-block; margin-left: .45rem; padding: .1rem .35rem; border: 1px solid var(--mf-ink); font: 700 .58rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; vertical-align: .1em; }
.mf-f-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; text-align: center; }
.mf-f-acts { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--mf-rule); }
.mf-f-acts { grid-template-rows: repeat(3, auto); grid-auto-flow: column; align-items: end; row-gap: .2rem; }
.mf-f-acts div { display: contents; }
.mf-f-acts div > * { min-width: 0; padding: 0 .3rem; }
.mf-f-name { font-weight: 600; line-height: 1.2; color: var(--mf-ink); }
.mf-f-acts small { align-self: start; font: 400 .74rem/1.3 var(--mf-mono); color: var(--mf-soft); }
.mf-f-cost { margin-top: .35rem; font: 820 1.7rem/.9 var(--mf-display); letter-spacing: -.04em; color: var(--mf-cost); font-variant-numeric: tabular-nums lining-nums; }
.mf-f-cost.mf-balance-ink { color: var(--mf-balance); }
.mf-f-svg { margin: .3rem 0 .1rem; }
.mf-f-arc { fill: none; stroke: var(--mf-ink); stroke-width: 2; }
.mf-f-arc.is-nowin { stroke: var(--mf-hair); stroke-width: 1.5; stroke-dasharray: 5 5; }
.mf-f-head { fill: var(--mf-ink); transform-box: fill-box; transform-origin: 50% 100%; }
.mf-f-gap { font: 700 14px var(--mf-mono); fill: var(--mf-ink); text-anchor: middle; letter-spacing: .04em; paint-order: stroke; stroke: var(--mf-paper); stroke-width: 5px; stroke-linejoin: round; }
.mf-f-gap.is-nowin { font-weight: 400; fill: var(--mf-soft); }
.mf-f-node { fill: var(--mf-cost); stroke: var(--mf-paper); stroke-width: 2.5; }
.mf-f-node.is-balanced { fill: var(--mf-balance); }
.mf-f-verdicts { padding-bottom: .9rem; border-bottom: 1px solid var(--mf-rule); }
.mf-f-verdicts li { min-width: 0; }
.mf-f-check { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.mf-f-check li { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .45rem .55rem .5rem; border-top: 3px solid var(--mf-ink); background: var(--mf-panel); }
.mf-f-fname { font: 700 .64rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-ink); }
.mf-f-state { font: 780 1.05rem/1.1 var(--mf-display); letter-spacing: -.01em; color: var(--mf-ink); }
.mf-f-check li.is-fail { border-top-color: var(--mf-forbid); }
.mf-f-check li.is-fail .mf-f-fname, .mf-f-check li.is-fail .mf-f-state { color: var(--mf-forbid); }
.mf-f-why { margin: .9rem 0 0; }
.mf-f-why p { margin: 0 0 .7rem; font-size: .98rem; line-height: 1.45; color: var(--mf-ink); }
.mf-f-why > div > p:last-child { margin-bottom: 0; }
.mf-f-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--mf-rule); padding-top: .7rem; }
.mf-f-grid > div { min-width: 0; padding: 0 1rem 0 0; }
.mf-f-grid > div + div { border-left: 1px solid var(--mf-rule); padding-left: 1rem; }
.mf-f-grid p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--mf-body); }
.mf-body .mf-page .mf-f-grid .mf-frame-h { font-size: .98rem; }
.mf-body .mf-cmp .mf-caption { margin: .8rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 1000px) {
  .mf-form { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .mf-cmp { max-width: 40rem; }
}
@media (max-width: 760px) {
  .mf-f-facts div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .mf-cmp .mf-f-opts { grid-template-columns: minmax(0, 1fr); }
  .mf-f-acts div > * { padding: 0 .15rem; }
  .mf-f-name { font-size: .88rem; }
  .mf-f-acts small { font-size: .66rem; }
  .mf-f-cost { font-size: 1.45rem; }
  .mf-f-arc { stroke-width: 3.5; }
  .mf-f-arc.is-nowin { stroke-width: 2.5; stroke-dasharray: 8 7; }
  .mf-f-gap { font-size: 25px; stroke-width: 8px; }
  .mf-f-gap.is-inner, .mf-f-gap.is-nowin { transform: translateY(9px); }
  .mf-f-head { transform: scale(1.6); }
  .mf-f-node { r: 15px; stroke-width: 4; }
  .mf-f-verdicts .mf-v-no, .mf-f-verdicts .mf-v-yes { padding: .32rem .3rem; font-size: .58rem; letter-spacing: .06em; }
  .mf-f-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-f-grid { grid-template-columns: minmax(0, 1fr); }
  .mf-f-grid > div, .mf-f-grid > div + div { border-left: 0; padding: .6rem 0; }
  .mf-f-grid > div + div { border-top: 1px solid var(--mf-rule); }
  .mf-f-grid > div:first-child { padding-top: 0; }
}

/* One code: each requirement is needed. Five judgments on one relation at 2; each row is a judgment, each column a
   requirement on a judgment's form. Red is a requirement that fails (and a forbidden act); magenta cost, green balance.
   A shaded act is one the chosen judgment answers differently from the code. */
.mf-rq { margin: 0; padding-top: 2.6rem; border-top: 1px solid var(--mf-rule); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 3.5rem; align-items: start; }
.mf-rq-copy { min-width: 0; }
.mf-rq-copy .mf-h3 { text-wrap: balance; }
.mf-rq-copy .mf-reqs { margin: .2rem 0 1.2rem; }
.mf-rq-copy p:last-child { margin-bottom: 0; }
.mf-rq-set { border: 0; margin: .9rem 0 0; padding: 0; min-width: 0; }
.mf-rq-set legend { margin: 0 0 .45rem; padding: 0; color: var(--mf-ink); }
.mf-rq-head, .mf-rq-row { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: .9rem; align-items: center; }
.mf-rq-head { align-items: end; padding: 0 .55rem; border-bottom: 1.5px solid var(--mf-ink); }
.mf-rq-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; min-width: 0; }
.mf-rq-head .mf-rq-cols > span { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding-bottom: .45rem; }
.mf-rq-head b { font: 700 .82rem/1 var(--mf-mono); color: var(--mf-ink); }
.mf-rq-head i { font: 700 .56rem/1.25 var(--mf-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-soft); }
.mf-rq-row { position: relative; min-height: 44px; padding: .5rem .55rem; border: 1px solid transparent; border-bottom-color: var(--mf-rule); cursor: pointer; }
.mf-rq-row input { position: absolute; left: .55rem; top: .7rem; width: 1rem; height: 1rem; margin: 0; opacity: 0; }
.mf-rq-row:has(input:focus-visible) { outline: 2px solid var(--mf-ink); outline-offset: 2px; }
.mf-rq-row.is-on, .mf-rq-row:has(input:checked) { border-color: var(--mf-ink); background: var(--mf-panel); }
.mf-rq-name { position: relative; min-width: 0; padding-left: 1.6rem; font: 600 .92rem/1.25 var(--mf-text); color: var(--mf-ink); }
.mf-rq-name::before { content: ""; position: absolute; left: 0; top: .12rem; width: 1rem; height: 1rem; box-sizing: border-box; border: 1.5px solid var(--mf-ink); background: var(--mf-paper); }
.mf-rq-row.is-on .mf-rq-name::before, .mf-rq-row:has(input:checked) .mf-rq-name::before { background: var(--mf-ink); box-shadow: inset 0 0 0 3px var(--mf-paper); }
.mf-rq-name em { display: block; margin-top: .2rem; font: 400 .72rem/1.3 var(--mf-mono); font-style: normal; color: var(--mf-soft); }
.mf-rq-code { display: inline-block; margin-left: .4rem; padding: .1rem .35rem; border: 1px solid var(--mf-ink); font: 700 .58rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; vertical-align: .1em; }
.mf-rq-cell { display: flex; align-items: center; justify-content: center; min-width: 0; height: 2.1rem; box-sizing: border-box; border: 1px solid var(--mf-rule); border-top: 3px solid var(--mf-ink); background: var(--mf-paper); font: 700 .62rem/1 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mf-soft); }
.mf-rq-cell.is-fail { border-color: var(--mf-forbid); background: var(--mf-forbid); color: var(--mf-paper); }
.mf-rq-acthead { display: grid; grid-template-columns: minmax(0, 1fr) 4.8rem 11rem; gap: .9rem; margin: 1.3rem 0 0; padding: 0 .55rem .4rem; font: 700 .62rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); }
.mf-rq-acthead span:not(:first-child) { text-align: right; }
.mf-rq-acts { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--mf-ink); }
.mf-rq-acts li { display: grid; grid-template-columns: minmax(0, 1fr) 4.8rem 11rem; gap: .9rem; align-items: center; padding: .55rem .55rem; border-bottom: 1px solid var(--mf-rule); }
.mf-rq-acts li.is-diff { background: var(--mf-panel); box-shadow: inset 3px 0 0 var(--mf-ink); }
.mf-rq-acts li.mf-rq-own { margin-top: .5rem; border-top: 1px solid var(--mf-rule); }
.mf-rq-act { min-width: 0; font-weight: 600; line-height: 1.25; color: var(--mf-ink); }
.mf-rq-act small { display: block; margin-top: .2rem; font: 400 .72rem/1.3 var(--mf-mono); color: var(--mf-soft); }
.mf-rq-act small.mf-rq-bad { color: var(--mf-forbid); }
.mf-rq-cost { font: 820 1.5rem/.9 var(--mf-display); letter-spacing: -.04em; color: var(--mf-cost); text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.mf-rq-cost.mf-balance-ink { color: var(--mf-balance); }
.mf-rq-v { min-width: 0; text-align: right; }
.mf-body .mf-rq-inst .mf-caption { margin: .8rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 1000px) {
  .mf-rq { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .mf-rq-inst { max-width: 40rem; }
}
@media (max-width: 760px) {
  .mf-rq-head, .mf-rq-row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .mf-rq-head > span:first-child { display: none; }
  .mf-rq-head { padding-top: .2rem; }
  .mf-rq-cell { height: 1.8rem; font-size: .58rem; letter-spacing: .06em; }
  .mf-rq-acthead { grid-template-columns: minmax(0, 1fr) auto; padding: 0 .4rem .4rem; }
  .mf-rq-acthead span:nth-child(2) { display: none; }
  .mf-rq-acts li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "act act" "cost v"; gap: .35rem .8rem; padding: .55rem .4rem; }
  .mf-rq-act { grid-area: act; }
  .mf-rq-cost { grid-area: cost; text-align: left; font-size: 1.3rem; }
  .mf-rq-v { grid-area: v; }
  .mf-rq-acts .mf-v-no, .mf-rq-acts .mf-v-yes { padding: .32rem .4rem; font-size: .6rem; }
}

/* Why it binds: the burden is not the measure. Two participants, three relations; a loop is a participant's own
   relation, with that participant at both ends. The count picks which relations are summed: real cost reads each
   relation once, a burden reads the relations its participant is an end of. A faded relation is outside the count. */
.mf-burden { margin: 3.4rem 0 0; padding-top: 2.6rem; border-top: 1px solid var(--mf-rule); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 3.5rem; align-items: start; }
.mf-burden-copy p:last-child { margin-bottom: 0; }
.mf-bd-counts { margin-top: .9rem; }
.mf-bd-counts .mf-a-opt span { white-space: nowrap; }
.mf-bd-states { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 1.1rem 0 0; }
.mf-bd-state { min-width: 0; border-top: 1.5px solid var(--mf-ink); padding-top: .7rem; }
.mf-bd-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin: 0 !important; }
.mf-bd-act { font: 780 1.05rem/1.2 var(--mf-display); letter-spacing: -.01em; color: var(--mf-ink); }
.mf-bd-sub { margin: .35rem 0 .3rem !important; font: 400 .74rem/1.3 var(--mf-mono); color: var(--mf-soft); }
.mf-bd-line { fill: none; stroke: var(--mf-cost); stroke-width: 6; }
.mf-bd-line.is-balanced { stroke: var(--mf-balance); stroke-width: 2.5; }
.mf-bd-x { font: 700 18px var(--mf-mono); text-anchor: middle; }
.mf-bd-tag { font: 700 11px var(--mf-mono); letter-spacing: .1em; text-anchor: middle; fill: var(--mf-soft); }
.mf-bd-cost, .mf-bd-plus { font: 700 16px var(--mf-mono); text-anchor: middle; }
.mf-bd-plus { fill: var(--mf-soft); }
.mf-bd-rel, .mf-bd-plus { transition: opacity .2s; }
.mf-bd-rel.is-out { opacity: .16; }
.mf-bd-plus.is-out { opacity: 0; }
.mf-bd-who.is-who .mf-node { fill: var(--mf-ink); }
.mf-bd-who.is-who .mf-node-name { fill: var(--mf-paper); }
.mf-bd-sum { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: .4rem 0 0 !important; padding-top: .6rem; border-top: 1px solid var(--mf-rule); }
.mf-bd-sum-name { font: 700 .66rem/1.2 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); }
.mf-bd-sum b { font: 860 2.3rem/.86 var(--mf-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums lining-nums; }
.mf-body .mf-bd .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .mf-bd-rel, .mf-bd-plus { transition: none; } }

/* Why it binds: the record's charge. Magenta is the charge (accrued cost), green love's run at balance,
   cyan one interval written to the record. Line weight and dash tell the three charged runs apart. */
.mf-c-grid line { stroke: var(--mf-rule); stroke-width: 1; }
.mf-c-y text { text-anchor: end; }
.mf-body .mf-charge-svg .mf-c-start { text-anchor: start; }
.mf-body .mf-charge-svg .mf-c-end { text-anchor: end; }
.mf-cell { fill: none; stroke: var(--mf-hair); stroke-width: 1; }
.mf-cell.is-on { fill: var(--mf-record); stroke: var(--mf-record); }
.mf-run { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mf-run-r2 { stroke: var(--mf-cost); stroke-width: 4; }
.mf-run-r32 { stroke: var(--mf-cost); stroke-width: 2; }
.mf-run-dep { stroke: var(--mf-cost); stroke-width: 2.5; stroke-dasharray: 8 6; stroke-linecap: butt; }
.mf-run-love { stroke: var(--mf-balance); stroke-width: 4; }
.mf-c-future .mf-run { opacity: .22; }
@media (prefers-color-scheme: dark) { .mf-c-future .mf-run { opacity: .34; } }
.mf-c-on line { stroke-dasharray: 3 4; stroke-width: 2; stroke-linecap: butt; }
.mf-c-on line.mf-run-r2, .mf-c-on line.mf-run-love { stroke-width: 2.5; }
.mf-c-on polygon { fill: var(--mf-cost); }
.mf-body .mf-page .mf-binds-h3 { margin-top: 1.9rem; }
.mf-charge .mf-c-yname { margin: 1rem 0 .1rem; font: 400 .78rem/1.3 var(--mf-mono); letter-spacing: .08em; color: var(--mf-cost); }
.mf-c-cursor { stroke: var(--mf-ink); stroke-width: 1; stroke-dasharray: 3 4; }
.mf-c-dot { fill: var(--mf-cost); stroke: var(--mf-paper); stroke-width: 2; }
.mf-c-dot-love { fill: var(--mf-balance); }
.mf-charge .mf-control { margin: .2rem 0 .4rem; }
.mf-charge .mf-control output { font: inherit; }
.mf-body .mf-charge .mf-control .mf-label var { text-transform: none; font-family: var(--mf-text); font-weight: 600; letter-spacing: 0; font-size: 1.12em; }
.mf-runs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.mf-runs thead th { padding: 0 0 .45rem 1rem; border-bottom: 1.5px solid var(--mf-ink); font: 700 .64rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); text-align: right; white-space: nowrap; }
.mf-runs thead th:first-child { padding-left: 0; text-align: left; }
.mf-runs thead var { text-transform: none; font-family: var(--mf-text); font-weight: 600; letter-spacing: 0; font-size: 1.12em; }
.mf-runs tbody th, .mf-runs td { padding: .55rem 0; border-bottom: 1px solid var(--mf-rule); vertical-align: middle; }
.mf-runs tbody th { text-align: left; font: 600 .98rem/1.25 var(--mf-text); color: var(--mf-ink); }
.mf-run-name { display: flex; align-items: center; gap: .75rem; }
.mf-runs tbody th small { display: block; margin-top: .1rem; font: 420 .8rem/1.3 var(--mf-text); color: var(--mf-soft); }
.mf-runs tbody th small b { font-weight: 650; }
.mf-instrument svg.mf-swatch { flex: none; width: 1.9rem; height: .64rem; overflow: visible; }
.mf-runs td { padding-left: 1rem; text-align: right; font: 600 1rem/1.2 var(--mf-text); white-space: nowrap; }
.mf-runs td.mf-run-val { font: 820 1.65rem/1 var(--mf-display); letter-spacing: -.03em; color: var(--mf-ink); }
.mf-runs td.mf-run-val.mf-balance-ink { color: var(--mf-balance); }
.mf-charge-read { min-height: 2.9em; margin: .9rem 0 0 !important; font-size: .98rem; line-height: 1.45; color: var(--mf-ink); }
.mf-body .mf-charge .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }

/* Why it binds: the undercut */
.mf-undercut { margin: 3.4rem 0 0; padding-top: 2.6rem; border-top: 1px solid var(--mf-rule); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2rem 3.5rem; align-items: start; }
.mf-undercut-copy p:last-child { margin-bottom: 0; }
.mf-acts .mf-pair-svg { margin: .2rem 0 .3rem; }
.mf-acts-set { border: 0; margin: .3rem 0 0; padding: 0; min-width: 0; }
.mf-acts-head, .mf-act { display: grid; grid-template-columns: minmax(0, 1fr) 5.6rem 6.4rem 6.4rem; gap: .9rem; align-items: center; }
.mf-acts-head { padding: 0 .7rem .5rem 2.6rem; border-bottom: 1.5px solid var(--mf-ink); font: 700 .64rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); }
.mf-act { position: relative; min-height: 44px; padding: .75rem .7rem .75rem 2.6rem; border-bottom: 1px solid var(--mf-rule); cursor: pointer; }
.mf-act input { position: absolute; left: .75rem; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--mf-ink); border-radius: 0; background: var(--mf-paper); cursor: pointer; }
.mf-act input:checked { background: var(--mf-ink); box-shadow: inset 0 0 0 3px var(--mf-paper); }
.mf-act:has(input:checked), .mf-act.is-on { background: var(--mf-panel); box-shadow: inset 3px 0 0 var(--mf-ink); }
.mf-act-name { min-width: 0; font-weight: 600; line-height: 1.25; color: var(--mf-ink); }
.mf-act-name small { display: block; margin-top: .25rem; font: 400 .74rem/1.3 var(--mf-mono); color: var(--mf-soft); }
.mf-act-cost { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.mf-act-cost b { font: 820 1.55rem/.9 var(--mf-display); letter-spacing: -.04em; color: var(--mf-cost); font-variant-numeric: tabular-nums lining-nums; }
.mf-act-cost i { display: block; height: 4px; width: calc(var(--w) * 100%); background: var(--mf-cost); }
.mf-act-cost-bal b { color: var(--mf-balance); }
.mf-act-cost-bal i { width: 4px; height: 10px; margin-top: -3px; background: var(--mf-balance); }
.mf-v { min-width: 0; }
.mf-v-who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mf-v-no, .mf-v-yes { display: inline-block; padding: .38rem .45rem; border: 1px solid; font: 700 .64rem/1 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; }
.mf-v-no { color: var(--mf-forbid); border-color: var(--mf-forbid); }
.mf-v-yes { color: var(--mf-ink); border-color: var(--mf-ink); }
.mf-acts-read { min-height: 2.9em; margin: .9rem 0 0 !important; font-size: .98rem; line-height: 1.45; color: var(--mf-ink); }
.mf-body .mf-acts .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
.mf-frame { grid-column: 1 / -1; border-top: 1.5px solid var(--mf-ink); padding-top: 1.1rem; }
.mf-frame-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mf-frame-cell { min-width: 0; padding: 0 1.4rem 0 0; }
.mf-frame-cell + .mf-frame-cell { border-left: 1px solid var(--mf-rule); padding-left: 1.4rem; }
.mf-body .mf-page .mf-frame-h { margin: 0 0 .5rem; font: 780 1.05rem/1.2 var(--mf-display); letter-spacing: -.01em; color: var(--mf-ink); }
.mf-frame-cell p { margin: 0; font-size: .97rem; line-height: 1.5; }
.mf-frame-n { font-weight: 820; color: var(--mf-cost); }

/* Love: the attractor. Hairline rings join states equally far above love's state; ink is the run and love's state;
   magenta is strain and its cost (the run's present state, the excess bars, strained relations); green is balance. */
.mf-body .mf-page .mf-love-h3 { margin-top: 1.9rem; }
.mf-attractor-svg { margin: .8rem 0 .2rem; }
.mf-a-rings path { fill: none; stroke: var(--mf-hair); stroke-width: 1; }
.mf-a-ringtext text { font: 400 13px var(--mf-mono); fill: var(--mf-soft); letter-spacing: .04em; }
.mf-a-ringtext text, .mf-a-stext, .mf-a-lovetext { paint-order: stroke; stroke: var(--mf-paper); stroke-width: 5px; stroke-linejoin: round; }
.mf-a-others line { stroke: var(--mf-ink); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; }
.mf-a-path { fill: none; stroke: var(--mf-ink); stroke-width: 2.5; stroke-linejoin: round; }
.mf-a-path.is-future, .mf-a-dot.is-future { opacity: .25; }
.mf-a-dot { fill: var(--mf-ink); }
.mf-a-love { fill: var(--mf-ink); }
.mf-a-love-ring { fill: none; stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-a-lovetext { font: 700 14px var(--mf-mono); fill: var(--mf-ink); letter-spacing: .06em; }
.mf-a-lovetext tspan { font-weight: 400; }
.mf-a-start { cursor: pointer; }
.mf-a-hit { fill: transparent; }
.mf-a-sdot { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 2; }
.mf-a-start.is-on .mf-a-sdot { fill: var(--mf-ink); }
.mf-a-stext { font: 700 14px var(--mf-mono); fill: var(--mf-soft); letter-spacing: .04em; }
.mf-a-start.is-on .mf-a-stext { fill: var(--mf-ink); }
.mf-a-narrow { display: none; }
.mf-a-mid { text-anchor: middle; }
.mf-a-left { text-anchor: start; }
.mf-a-right { text-anchor: end; }
.mf-a-now { fill: var(--mf-cost); stroke: var(--mf-paper); stroke-width: 2.5; }
.mf-a-readout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; margin: .6rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--mf-rule); }
.mf-a-rels { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.mf-a-rels thead th { padding: 0 0 .45rem .8rem; border-bottom: 1.5px solid var(--mf-ink); font: 700 .64rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); text-align: right; white-space: nowrap; }
.mf-a-rels thead th:first-child { padding-left: 0; text-align: left; }
.mf-a-rels thead var { text-transform: none; font-family: var(--mf-text); font-weight: 600; letter-spacing: 0; font-size: 1.12em; }
.mf-a-rels tbody th, .mf-a-rels td, .mf-a-rels tfoot th { padding: .5rem 0; border-bottom: 1px solid var(--mf-rule); vertical-align: middle; }
.mf-a-rels tbody th { text-align: left; font: 700 .95rem/1.2 var(--mf-mono); color: var(--mf-ink); }
.mf-a-rels td { padding-left: .8rem; text-align: right; font: 600 .98rem/1.2 var(--mf-text); color: var(--mf-ink); white-space: nowrap; }
.mf-a-rels tfoot th { text-align: left; white-space: nowrap; font: 700 .64rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); border-bottom: 0; }
.mf-a-rels tfoot td { border-bottom: 0; font: 820 1.3rem/1 var(--mf-display); letter-spacing: -.03em; color: var(--mf-cost); }
.mf-a-rels .mf-run-name { display: flex; align-items: center; gap: .7rem; }
.mf-instrument svg.mf-a-sw { flex: none; width: 2.5rem; height: 1rem; overflow: visible; }
.mf-a-rel { stroke: var(--mf-cost); stroke-linecap: butt; }
.mf-a-rel.is-balanced { stroke: var(--mf-balance); }
.mf-a-yname { margin: 0 0 .2rem !important; font: 400 .78rem/1.3 var(--mf-mono); letter-spacing: .08em; color: var(--mf-cost); }
.mf-a-bar { fill: var(--mf-cost); }
.mf-a-bar.is-future { opacity: .22; }
.mf-a-bound { fill: none; stroke: var(--mf-ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mf-a-btext { font: 400 12px var(--mf-mono); fill: var(--mf-ink); letter-spacing: .04em; }
.mf-a-otext { font: 700 12px var(--mf-mono); fill: var(--mf-cost); letter-spacing: .04em; }
.mf-a-set { border: 0; margin: .8rem 0 0; padding: 0; min-width: 0; }
.mf-a-set legend { margin: 0 0 .45rem; padding: 0; color: var(--mf-ink); }
.mf-a-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.mf-a-legend-note { margin-left: .5rem; color: var(--mf-soft); font-weight: 400; }
.mf-a-opt { display: flex; align-items: center; gap: .5rem; min-height: 44px; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--mf-rule); cursor: pointer; font: 600 .86rem/1.2 var(--mf-text); color: var(--mf-ink); }
.mf-a-opt input { flex: none; width: 1rem; height: 1rem; margin: 0; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--mf-ink); border-radius: 0; background: var(--mf-paper); cursor: pointer; }
.mf-a-opt input:checked { background: var(--mf-ink); box-shadow: inset 0 0 0 3px var(--mf-paper); }
.mf-a-opt:has(input:checked), .mf-a-opt.is-on { border-color: var(--mf-ink); background: var(--mf-panel); }
.mf-a-starts-set .mf-a-opt span { font: 700 .82rem/1.2 var(--mf-mono); letter-spacing: .02em; white-space: nowrap; }
.mf-attractor .mf-control { margin: .7rem 0 .2rem; }
.mf-attractor .mf-control output { font: inherit; }
.mf-body .mf-attractor .mf-control .mf-label var { text-transform: none; font-family: var(--mf-text); font-weight: 600; letter-spacing: 0; font-size: 1.12em; }
.mf-a-read { min-height: 4.4em; margin: .7rem 0 0 !important; font-size: .98rem; line-height: 1.45; color: var(--mf-ink); }
.mf-body .mf-attractor .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 760px) {
  .mf-a-readout { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .mf-a-ringtext text { font-size: 22px; }
  .mf-a-stext, .mf-a-lovetext { font-size: 23px; letter-spacing: 0; }
  .mf-a-wide { display: none; }
  .mf-a-narrow { display: inline; }
  .mf-a-bars .mf-tick-text text { font-size: 14px; }
  .mf-a-bars .mf-axis-name { font-size: 13px; letter-spacing: .08em; }
  .mf-a-starts-set .mf-a-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-a-ringtext text, .mf-a-stext, .mf-a-lovetext { stroke-width: 8px; }
  .mf-a-path { stroke-width: 4; }
  .mf-a-others line { stroke-width: 2; stroke-dasharray: 3 7; }
  .mf-a-rings path { stroke-width: 1.6; }
  .mf-a-sdot { stroke-width: 3; }
  .mf-a-menus-set .mf-a-opts { grid-template-columns: minmax(0, 1fr); }
  .mf-a-opt { padding: .4rem .45rem; gap: .4rem; }
  .mf-a-starts-set .mf-a-opt span { font-size: .76rem; letter-spacing: 0; }
  .mf-a-read { min-height: 5.8em; }
}

/* Being derived */
.mf-derived { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2.4rem; counter-reset: derived; }
.mf-derived li { counter-increment: derived; padding: 1.2rem 0 1.4rem; border-top: 1px solid var(--mf-ink); min-width: 0; }
.mf-derived li::before { content: "0" counter(derived); display: block; margin-bottom: .7rem; font: 700 .72rem/1.3 var(--mf-mono); letter-spacing: .14em; color: var(--mf-soft); }
.mf-body .mf-derived h3 { font-size: 1.1rem; }
.mf-derived p { font-size: .96rem; line-height: 1.5; margin: 0; }

/* Read further */
.mf-further { padding-bottom: 1rem; }
.mf-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.mf-links li { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 0; border-top: 1px solid var(--mf-rule); }
.mf-links a { font-weight: 650; font-size: 1.1rem; }
.mf-links span { font-size: .93rem; line-height: 1.5; color: var(--mf-soft); }

.mf-page :is(a, input, button, summary):focus-visible { outline: 3px solid var(--mf-ink) !important; outline-offset: 4px; }

/* Section 02, shown working: one unit of relief split between two relations. Ink dots are permitted acts, red dots
   forbidden ones; the ring marks the chosen act. The curve is the real cost of each way to use the whole relief. */
.mf-body .mf-page :is(.mf-ties-h3, .mf-cl-h3) { max-width: 24ch; margin-bottom: 1.1rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.mf-nw { white-space: nowrap; }
.mf-t-menus .mf-a-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mf-t-yname { margin: 1rem 0 .1rem !important; font: 400 .78rem/1.3 var(--mf-mono); letter-spacing: .08em; color: var(--mf-cost); }
.mf-t-y text { text-anchor: end; }
.mf-t-curve { fill: none; stroke: var(--mf-cost); stroke-width: 3; }
.mf-t-curve.is-off { stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.mf-t-note { font: 400 13px var(--mf-mono); fill: var(--mf-soft); text-anchor: middle; letter-spacing: .06em; }
.mf-t-tie { stroke: var(--mf-ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.mf-t-tietext { font: 700 14px var(--mf-mono); fill: var(--mf-ink); text-anchor: middle; letter-spacing: .06em; }
.mf-t-mark { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-t-arrow { stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-t-head { fill: var(--mf-ink); }
.mf-t-dot { stroke: var(--mf-paper); stroke-width: 2.5; }
.mf-t-dot.is-yes { fill: var(--mf-ink); }
.mf-t-dot.is-no { fill: var(--mf-forbid); }
.mf-t-ring { fill: none; stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-ties .mf-control { margin: .2rem 0 .3rem; }
.mf-t-acts td.mf-run-val { font-size: 1.4rem; }
.mf-t-acts tbody th small b { font-family: var(--mf-mono); font-size: .76rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.mf-t-acts tr.is-off th, .mf-t-acts tr.is-off td.mf-run-val { color: var(--mf-soft); }
.mf-t-acts tr.is-off td.mf-run-val { font-weight: 600; }
.mf-v-off { display: inline-block; padding: .38rem .45rem; border: 1px dashed var(--mf-hair); font: 700 .64rem/1 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mf-soft); }
.mf-t-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 1rem 0 0; border-top: 1.5px solid var(--mf-ink); }
.mf-t-classes div { min-width: 0; padding: .7rem .8rem 0 0; }
.mf-t-classes div + div { padding-left: .8rem; border-left: 1px solid var(--mf-rule); }
.mf-t-classes dt { margin: 0 0 .3rem; }
.mf-t-classes dd { margin: 0; font: 600 .95rem/1.3 var(--mf-text); color: var(--mf-ink); }
.mf-t-read { min-height: 2.9em; margin: .9rem 0 0 !important; font-size: .98rem; line-height: 1.45; color: var(--mf-ink); }
.mf-body .mf-ties .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 760px) {
  .mf-ties-svg .mf-tick-text text { font-size: 27px; }
  .mf-t-note { font-size: 25px; letter-spacing: 0; }
  .mf-t-tietext { font-size: 25px; letter-spacing: .02em; }
  .mf-t-curve { stroke-width: 5; }
  .mf-t-curve.is-off { stroke-width: 3; stroke-dasharray: 1 10; }
  .mf-t-tie, .mf-t-arrow, .mf-t-ring, .mf-t-mark { stroke-width: 2.5; }
  .mf-t-dot { r: 10px; }
  .mf-t-ring { r: 17px; }
  .mf-t-mark { r: 6px; }
  .mf-t-acts tbody th { font-size: .92rem; }
  .mf-t-acts td { padding-left: .5rem; }
  .mf-t-acts td.mf-run-val { font-size: 1.15rem; }
  .mf-t-acts thead th { padding-left: .5rem; }
  .mf-t-acts :is(.mf-v-yes, .mf-v-no, .mf-v-off) { padding: .32rem .3rem; font-size: .56rem; letter-spacing: .06em; }
  .mf-t-classes div { padding-right: .5rem; }
  .mf-t-classes div + div { padding-left: .5rem; }
  .mf-t-classes dd { font-size: .86rem; }
  .mf-t-read { min-height: 5.8em; }
}

/* Section 01, shown working: one relation at 2, recorded twice. Cyan outlines a true record on an end's own books;
   red marks what breaks a clause: a false record, a missing write, a relief on an ended relation, an unwritten ending.
   Ink pens are writes; dashed grey pens are ends that write nothing. */
.mf-cl-state { margin: 1rem 0 .1rem !important; font: 400 .78rem/1.3 var(--mf-mono); letter-spacing: .08em; color: var(--mf-soft); }
.mf-cl-svg { margin: 0 0 .5rem; }
.mf-cl-svg .mf-rel-line.is-ended { stroke-dasharray: 10 7; }
.mf-cl-svg .mf-rel-text.is-break { fill: var(--mf-forbid); }
.mf-cl-tag { font: 700 13px var(--mf-mono); letter-spacing: .12em; text-anchor: middle; fill: var(--mf-soft); }
.mf-cl-tag.is-break { fill: var(--mf-forbid); }
.mf-cl-pen line { stroke: var(--mf-ink); stroke-width: 2; }
.mf-cl-pen polygon { fill: var(--mf-ink); }
.mf-cl-pen text { font: 700 13px var(--mf-mono); letter-spacing: .12em; fill: var(--mf-ink); }
.mf-cl-pen.is-no line { stroke: var(--mf-hair); stroke-dasharray: 4 4; }
.mf-cl-pen.is-no polygon { fill: var(--mf-hair); }
.mf-cl-pen.is-no text { fill: var(--mf-soft); }
.mf-cl-pen.is-break line { stroke: var(--mf-forbid); }
.mf-cl-pen.is-break polygon, .mf-cl-pen.is-break text { fill: var(--mf-forbid); }
.mf-cl-book rect { fill: none; stroke: var(--mf-record); stroke-width: 2; }
.mf-cl-bookname { font: 700 13px var(--mf-mono); letter-spacing: .14em; fill: var(--mf-record); }
.mf-cl-entry { font: 820 34px var(--mf-display); letter-spacing: -.03em; fill: var(--mf-ink); font-variant-numeric: tabular-nums lining-nums; }
.mf-cl-entry .mf-cl-old, .mf-cl-entry .mf-cl-arr { fill: var(--mf-soft); font-weight: 500; }
.mf-cl-truth { font: 700 13px var(--mf-mono); letter-spacing: .14em; fill: var(--mf-record); }
.mf-cl-book.is-false rect { stroke: var(--mf-forbid); stroke-width: 3; }
.mf-cl-book.is-false .mf-cl-new, .mf-cl-book.is-false .mf-cl-truth { fill: var(--mf-forbid); }
.mf-cl-set .mf-acts-head, .mf-cl-set .mf-act { grid-template-columns: minmax(0, 1fr) 4.4rem 6.9rem 5.8rem; gap: .8rem; }
.mf-act-cost.is-would b { color: var(--mf-soft); }
.mf-act-cost.is-would small { font: 400 .62rem/1.2 var(--mf-mono); letter-spacing: .06em; color: var(--mf-soft); white-space: nowrap; }
.mf-cl-set .mf-cl-fixed { cursor: default; border-top: 1.5px solid var(--mf-ink); }
.mf-key-forbid { color: var(--mf-forbid); } .mf-key-forbid::before { background: var(--mf-forbid); }
.mf-body .mf-clauses .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 760px) {
  .mf-cl-svg .mf-node-name { font-size: 27px; }
  .mf-cl-svg .mf-rel-text { font-size: 26px; }
  .mf-cl-tag, .mf-cl-pen text { font-size: 23px; letter-spacing: .06em; }
  .mf-cl-bookname, .mf-cl-truth { font-size: 23px; letter-spacing: .08em; }
  .mf-cl-entry { font-size: 42px; }
  .mf-cl-pen line { stroke-width: 3; }
  .mf-cl-book rect { stroke-width: 3; }
  .mf-cl-book.is-false rect { stroke-width: 4; }
  .mf-cl-set .mf-act { grid-template-columns: 7rem minmax(0, 1fr) auto; grid-template-areas: "name name cost" "adm code code"; }
  .mf-cl-set :is(.mf-v-yes, .mf-v-no) { white-space: nowrap; }
  .mf-cl-set .mf-v-adm { grid-area: adm; }
}
/* Section 02, consent is per relation: three participants in a row and one joint act on their two relations. Cyan
   outlines a true record on an end's own books; red marks what breaks a clause: a missing write on a relation that
   moves, and the false record it leaves. The joint act's row is the one the drawing shows. */
.mf-cs-row { scroll-margin-top: 4.5rem; }
.mf-ties-row, .mf-undercut { scroll-margin-top: 4.5rem; }
.mf-body .mf-page .mf-cs-h3 { max-width: 24ch; margin-bottom: 1.1rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.mf-cs-writes .mf-a-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mf-cs-writes .mf-a-opt span { white-space: nowrap; }
.mf-cs-bname { font: 700 13px var(--mf-mono); letter-spacing: .14em; text-anchor: middle; fill: var(--mf-soft); }
.mf-cs-bval { font: 820 26px var(--mf-display); letter-spacing: -.03em; text-anchor: middle; fill: var(--mf-cost); font-variant-numeric: tabular-nums lining-nums; }
.mf-cs-bval .mf-cs-bold, .mf-cs-bval .mf-cs-barr { font-weight: 500; }
.mf-cs-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin: .9rem 0 1.2rem; }
.mf-body .mf-page .mf-cs-relname { margin: 0 0 .55rem; padding-bottom: .4rem; border-bottom: 1px solid var(--mf-rule); font: 700 .62rem/1.3 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mf-soft); }
.mf-cs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mf-cs-end { min-width: 0; }
.mf-body .mf-page .mf-cs-pen { display: flex; align-items: center; gap: .4rem; height: 1.5rem; margin: 0; font: 700 .6rem/1 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--mf-ink); }
.mf-cs-pen::before { content: ""; flex: none; align-self: stretch; margin-left: .7rem; border-left: 2px solid var(--mf-ink); }
.mf-body .mf-page .mf-cs-pen.is-no { color: var(--mf-forbid); }
.mf-cs-pen.is-no::before { border-left: 2px dashed var(--mf-forbid); }
.mf-cs-book { border: 2px solid var(--mf-record); padding: .5rem .6rem .45rem; }
.mf-cs-book.is-false { border-width: 3px; border-color: var(--mf-forbid); padding: calc(.5rem - 1px) calc(.6rem - 1px) calc(.45rem - 1px); }
.mf-body .mf-page .mf-cs-book p { margin: 0; }
.mf-body .mf-page .mf-cs-bookname, .mf-body .mf-page .mf-cs-truth { font: 700 .6rem/1.2 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--mf-record); }
.mf-body .mf-page .mf-cs-entry { margin: .35rem 0 .3rem; font: 820 1.3rem/1 var(--mf-display); letter-spacing: -.03em; white-space: nowrap; color: var(--mf-ink); font-variant-numeric: tabular-nums lining-nums; }
.mf-cs-entry .mf-cs-old, .mf-cs-entry .mf-cs-arr { font-weight: 500; color: var(--mf-soft); }
.mf-body .mf-page .mf-cs-book.is-false :is(.mf-cs-new, .mf-cs-truth) { color: var(--mf-forbid); }
.mf-cs-set .mf-acts-head, .mf-cs-set .mf-act { grid-template-columns: minmax(0, 1fr) 4.4rem 6.9rem 5.8rem; gap: .8rem; }
.mf-cs-set .mf-acts-head { padding-left: .9rem; }
.mf-cs-set .mf-act { padding-left: .9rem; cursor: default; }
.mf-cs-set .mf-cs-fixed { border-top: 1.5px solid var(--mf-ink); }
.mf-body .mf-consent .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 760px) {
  .mf-cs-svg .mf-node-name { font-size: 27px; }
  .mf-cs-svg .mf-cl-tag { font-size: 20px; letter-spacing: .04em; }
  .mf-cs-bname { font-size: 23px; letter-spacing: .06em; }
  .mf-cs-bval { font-size: 38px; }
  .mf-cs-books { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mf-cs-set .mf-act { grid-template-columns: 7rem minmax(0, 1fr) auto; grid-template-areas: "name name cost" "adm code code"; padding-left: .6rem; }
  .mf-cs-set :is(.mf-v-yes, .mf-v-no) { white-space: nowrap; }
  .mf-cs-set .mf-v-adm { grid-area: adm; }
}
@media (max-width: 1100px) {
  .mf-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-five li, .mf-five li + li { border-left: 0; padding: 1.2rem 1.4rem 1.4rem 0; border-bottom: 1px solid var(--mf-rule); }
  .mf-five li:nth-child(even) { padding-left: 1.4rem; border-left: 1px solid var(--mf-rule); }
  .mf-derived { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mf-five li:last-child { border-bottom: 0; }
}
@media (max-width: 1000px) {
  .mf-hero, .mf-split, .mf-burden, .mf-undercut { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .mf-acts { max-width: 40rem; }
  .mf-hero .mf-lede { max-width: 40rem; }
  .mf-pair { max-width: 36rem; }
  .mf-body .mf-title { max-width: 14ch; }
}
@media (max-width: 760px) {
  .mf-wrap { width: calc(100% - 2rem); }
  .mf-hero { padding: 2.2rem 0 2.8rem; gap: 2rem; }
  .mf-body .mf-title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); margin-bottom: 1.2rem; }
  .mf-lede, .mf-section-lede { font-size: 1.12rem; }
  .mf-jumps { gap: 0 1.1rem; margin-top: 1rem; }
  .mf-code { padding: 1rem 1rem .9rem; box-shadow: 4px 4px 0 var(--mf-ink); margin-right: 4px; }
  .mf-code-part { grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: .85rem 0; }
  .mf-code-part h2.mf-label { margin: 0; }
  .mf-code-head .mf-code-parts { display: none; }
  .mf-eq { font-size: 1.2rem !important; }
  .mf-section { padding: 2.8rem 0; }
  .mf-instrument { padding: 1rem .9rem 1rem; }
  .mf-numbers { gap: .8rem; }
  .mf-num { font-size: 2.3rem; }
  .mf-five, .mf-fixed, .mf-derived, .mf-links { grid-template-columns: minmax(0, 1fr); }
  .mf-five li, .mf-five li + li, .mf-five li:nth-child(even),
  .mf-fixed div, .mf-fixed div + div, .mf-fixed div:nth-child(even) { border-left: 0; padding: 1.1rem 0 1.2rem; }
  .mf-panel { padding: 1rem; }
  .mf-table td:first-child { width: 40%; }
  /* The undercut's act rows: name and cost on one line, the two verdicts under them, each named. */
  .mf-acts-head { display: none; }
  .mf-act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "name name cost" "code rival rival"; gap: .7rem .8rem; padding: .8rem .6rem .85rem 2.4rem; }
  .mf-act input { left: .6rem; top: 1.45rem; margin: 0; }
  .mf-act-name { grid-area: name; }
  .mf-act-cost { grid-area: cost; align-items: flex-end; min-width: 3.6rem; }
  .mf-act-cost i { width: calc(var(--w) * 3.6rem); }
  .mf-v-code { grid-area: code; }
  .mf-v-rival { grid-area: rival; }
  .mf-v-who { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; margin-bottom: .3rem; font: 700 .6rem/1.2 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); }
  .mf-acts-read { min-height: 5.8em; }
  .mf-bd-states { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .mf-bd-svg .mf-node-name { font-size: 20px; }
  .mf-bd-read { min-height: 7.2em; }
  .mf-frame-grid { grid-template-columns: minmax(0, 1fr); }
  .mf-frame-cell, .mf-frame-cell + .mf-frame-cell { border-left: 0; padding: .9rem 0; }
  .mf-frame-cell + .mf-frame-cell { border-top: 1px solid var(--mf-rule); }
  .mf-frame-cell:first-child { padding-top: 0; }
  .mf-control { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .mf-fixed div { border-bottom: 1px solid var(--mf-rule); }
  .mf-five li:last-child, .mf-fixed div:last-child { border-bottom: 0; }
  /* The instruments' drawings scale down by about half on a phone; their lettering is set larger to stay readable. */
  .mf-node-name { font-size: 24px; }
  .mf-rel-text { font-size: 26px; }
  .mf-pair-svg .mf-rel-text { font-size: 21px; }
  .mf-pair-svg .mf-node-name { font-size: 27px; }
  .mf-tick-text text, .mf-tick-text { font-size: 24px; }
  text.mf-tick-text.mf-balance-ink { letter-spacing: .04em; }
  .mf-axis-name { font-size: 22px; letter-spacing: .04em; }
  .mf-dot-text { font-size: 26px; }
  .mf-charge-svg .mf-run-r2 { stroke-width: 6; }
  .mf-charge-svg .mf-run-r32 { stroke-width: 3.5; }
  .mf-charge-svg .mf-run-dep { stroke-width: 4; stroke-dasharray: 12 8; }
  .mf-charge-svg .mf-run-love { stroke-width: 6; }
  .mf-charge-svg .mf-c-bound .mf-run-r2 { stroke-width: 4; }
  .mf-c-dot { r: 8px; }
  .mf-c-cursor { stroke-width: 2; }
  .mf-runs tbody th { font-size: .92rem; }
  .mf-run-name { gap: .6rem; }
  .mf-runs thead th { padding-left: .6rem; }
  .mf-runs td { padding-left: .6rem; font-size: .92rem; }
  .mf-runs td.mf-run-val { font-size: 1.4rem; }
  .mf-c-long { display: none; }
  .mf-charge-read { min-height: 5.8em; }
}
@media (max-width: 1100px) {
  .mf-mark-row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  .mf-mark-panel { grid-column: 2; }
}
@media (max-width: 1000px) {
  .mf-step { grid-template-columns: 5rem minmax(0, 1fr); gap: 0 1.4rem; }
  .mf-step::before { left: 2.5rem; }
  .mf-step:first-child::before { top: 2.57rem; }
  .mf-step:last-child::before { height: 2.57rem; }
  .mf-step::after { left: 6.4rem; }
  .mf-step-g { width: 5rem; height: 3.33rem; }
  .mf-step-claim { padding-bottom: .5rem; }
  .mf-step-body { grid-column: 2; padding-top: 0; }
}
@media (max-width: 760px) {
  .mf-physics { padding: 2.6rem 0 2.8rem; }
  .mf-step { grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0 1rem; }
  .mf-step::before { left: 2.1rem; }
  .mf-step:first-child::before { top: 2.3rem; }
  .mf-step:last-child::before { height: 2.3rem; }
  .mf-step::after { left: 5.2rem; }
  .mf-step-g { width: 4.2rem; height: 2.8rem; }
  .mf-body .mf-page .mf-step h3 { font-size: 1.16rem; }
  .mf-step-body p { font-size: .98rem; }
  .mf-mark-row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: 1.3rem 0 1.7rem; }
  .mf-mark-panel { grid-column: 1; }
}
/* Section 03, completeness in time: two continuations read through time. Magenta is cost: solid for A's history cost
   on the complete record, dashed for B's. Ink is the rival: its dotted count of A and the weight bars it gives each
   interval. Cyan squares are intervals written to the record, all of which the code reads. */
.mf-tm-row { scroll-margin-top: 4.5rem; }
.mf-body .mf-page .mf-tm-h3 { max-width: 24ch; margin-bottom: 1.1rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.mf-tm-rivals .mf-a-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mf-tm-yname { margin: 1rem 0 .1rem !important; font: 400 .78rem/1.3 var(--mf-mono); letter-spacing: .08em; color: var(--mf-cost); }
.mf-tm-yname var { font-family: var(--mf-text); font-weight: 600; }
.mf-tm-svg { margin: 0 0 .2rem; }
.mf-tm-wbase { stroke: var(--mf-hair); stroke-width: 1; }
.mf-tm-weights rect { fill: var(--mf-ink); }
.mf-tm-rowname { font: 400 13px var(--mf-mono); fill: var(--mf-soft); letter-spacing: .06em; }
.mf-tm-rowname.mf-tm-rec { fill: var(--mf-record); }
.mf-tm-asym { stroke: var(--mf-ink); stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; }
.mf-tm-hline { stroke: var(--mf-ink); stroke-width: 1.5; stroke-dasharray: 3 4; }
.mf-tm-htext { font: 400 13px var(--mf-mono); fill: var(--mf-ink); letter-spacing: .04em; }
.mf-tm-htext.is-left { text-anchor: end; }
.mf-tm-svg .mf-tm-off { display: none; }
.mf-tm-on { stroke-dasharray: 3 4; stroke-width: 2; stroke-linecap: butt; }
.mf-tm-head { fill: var(--mf-cost); }
.mf-body .mf-tm-svg .mf-tm-end { text-anchor: end; }
.mf-tm-rival { fill: none; stroke: var(--mf-ink); stroke-width: 2.5; stroke-dasharray: 1 5; stroke-linecap: round; stroke-linejoin: round; }
.mf-tm-rdot { fill: var(--mf-ink); }
.mf-tm-ring { fill: none; stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-tm-lab { font: 700 14px var(--mf-mono); letter-spacing: .06em; }
.mf-tm-rlab { fill: var(--mf-ink); }
.mf-time .mf-control { margin: .2rem 0 .4rem; }
.mf-time .mf-control output { font: inherit; }
.mf-body .mf-time .mf-control .mf-label var { text-transform: none; font-family: var(--mf-text); font-weight: 600; letter-spacing: 0; font-size: 1.12em; }
.mf-body .mf-time .mf-control .mf-label sub { text-transform: none; font: 600 .8em var(--mf-text); letter-spacing: 0; }
.mf-tm-set .mf-acts-head, .mf-tm-set .mf-act { grid-template-columns: minmax(0, 1fr) 8.6rem 8.6rem; gap: .9rem; }
.mf-tm-set .mf-acts-head { padding-left: .9rem; }
.mf-tm-set .mf-act { align-items: start; padding-left: .9rem; cursor: default; }
.mf-tm-set .mf-v { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.mf-tm-count { font: 820 1.55rem/.9 var(--mf-display); letter-spacing: -.04em; color: var(--mf-cost); font-variant-numeric: tabular-nums lining-nums; }
.mf-tm-count.mf-tm-nobound { font: 700 .72rem/1.3 var(--mf-mono); letter-spacing: .08em; text-transform: uppercase; padding: .2rem 0 .1rem; }
.mf-v-rival .mf-tm-count { color: var(--mf-ink); }
.mf-tm-read { min-height: 8.75em; margin: .9rem 0 0 !important; font-size: .98rem; line-height: 1.45; color: var(--mf-ink); }
.mf-body .mf-time .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
.mf-key-dash { color: var(--mf-cost); } .mf-key .mf-key-dash::before { height: 0; border-top: 3px dashed var(--mf-cost); }
.mf-key-rival { color: var(--mf-ink); } .mf-key .mf-key-rival::before { height: 0; border-top: 3px dotted var(--mf-ink); }
@media (max-width: 1100px) {
  .mf-tm-read { min-height: 10.2em; }
  .mf-tm-set .mf-acts-head, .mf-tm-set .mf-act { grid-template-columns: minmax(0, 1fr) 7.2rem 7.2rem; gap: .7rem; }
}
@media (max-width: 760px) {
  .mf-tm-rivals .mf-a-opt span { font-size: .82rem; }
  .mf-tm-rowname, .mf-tm-htext { font-size: 20px; letter-spacing: .02em; }
  .mf-tm-lab { font-size: 22px; letter-spacing: .02em; }
  .mf-tm-svg .mf-run-r2 { stroke-width: 6; }
  .mf-tm-svg .mf-run-dep { stroke-width: 4; stroke-dasharray: 12 8; }
  .mf-tm-svg .mf-tm-on { stroke-width: 3; stroke-dasharray: 4 6; }
  .mf-tm-rival { stroke-width: 4; stroke-dasharray: 1 8; }
  .mf-tm-hline, .mf-tm-ring { stroke-width: 2.5; }
  .mf-tm-asym { stroke-width: 2; stroke-dasharray: 3 6; }
  .mf-tm-svg .mf-c-dot { r: 8px; }
  .mf-tm-rdot { r: 7px; }
  .mf-tm-ring { r: 14px; }
  .mf-tm-set .mf-act { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "code rival"; padding-left: .6rem; }
  .mf-tm-svg { margin-top: .6rem; }
  .mf-time .mf-control { margin-top: .7rem; }
  .mf-tm-read { min-height: 14.6em; }
}
@media (prefers-reduced-motion: reduce) { .mf-rel-line { transition: none; } }
@media print {
  body.mf-body[data-rpi-page] { background: #fff; color: #000; }
  .mf-code { box-shadow: none; }
  .mf-jumps, .mf-control { display: none; }
  .mf-section { break-inside: avoid; }
}
/* Section 05, the code's act is love's act: three participants in a row; the visitor picks who writes. Magenta is
   strain and its cost, and line width follows cost; green is balance. A dashed node is a participant who writes
   nothing. The act row that leaves love's state carries the love's act mark; the verdicts come from clause 3 and cost. */
.mf-la-row { scroll-margin-top: 4.5rem; }
.mf-body .mf-page .mf-la-h3 { max-width: 24ch; margin-bottom: 1.1rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.mf-la-writes .mf-a-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mf-la-writes .mf-a-opt span { white-space: nowrap; }
.mf-la-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 1.1rem 0 .2rem; padding-top: .75rem; border-top: 1px solid var(--mf-rule); }
.mf-body .mf-page .mf-la-head p { margin: 0; }
.mf-la-name { font: 700 .66rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-ink); }
.mf-la-total { font: 400 .76rem/1.3 var(--mf-mono); letter-spacing: .04em; color: var(--mf-soft); white-space: nowrap; }
.mf-la-total b { margin-left: .45rem; font: 820 1.55rem/.9 var(--mf-display); letter-spacing: -.04em; color: var(--mf-cost); font-variant-numeric: tabular-nums lining-nums; }
.mf-la-total.is-zero b { color: var(--mf-balance); }
.mf-la-svg { margin: .3rem 0 .2rem; }
.mf-la-who.is-no .mf-node { stroke: var(--mf-hair); stroke-dasharray: 5 4; }
.mf-la-who.is-no .mf-node-name { fill: var(--mf-soft); }
.mf-la-pen { font: 700 13px var(--mf-mono); letter-spacing: .12em; fill: var(--mf-ink); }
.mf-la-who.is-no .mf-la-pen { fill: var(--mf-soft); font-weight: 400; }
.mf-la-cost, .mf-la-state { font: 700 13px var(--mf-mono); letter-spacing: .12em; text-anchor: middle; fill: var(--mf-cost); }
.mf-la-state { fill: var(--mf-soft); }
.mf-la-state.is-balanced { fill: var(--mf-balance); }
.mf-la-mark { display: inline-block; margin-left: .4rem; padding: .22rem .35rem .2rem; border: 1px solid var(--mf-ink); font: 700 .56rem/1 var(--mf-mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: .18em; color: var(--mf-ink); white-space: nowrap; }
.mf-la-mark[hidden] { display: none; }
.mf-la-set { margin-top: 1rem; }
.mf-la-set .mf-acts-head, .mf-la-set .mf-act { grid-template-columns: minmax(0, 1fr) 4.8rem 6.9rem 5.8rem; gap: .8rem; }
.mf-la-set .mf-acts-head { padding-left: .9rem; }
.mf-la-set .mf-act { padding-left: .9rem; cursor: default; }
.mf-la-set .mf-act-cost i { width: calc(var(--w) * 4.8rem); }
.mf-la-read { min-height: 8.7em; }
.mf-body .mf-loves-act .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
@media (max-width: 760px) {
  .mf-la-svg .mf-node-name { font-size: 27px; }
  .mf-la-svg .mf-rel-text { font-size: 26px; }
  .mf-la-pen, .mf-la-cost, .mf-la-state { font-size: 22px; letter-spacing: .04em; }
  .mf-la-writes .mf-a-opt { padding: .4rem .45rem; gap: .4rem; }
  .mf-la-set .mf-act { grid-template-columns: 7rem minmax(0, 1fr) auto; grid-template-areas: "name name cost" "adm code code"; padding-left: .6rem; }
  .mf-la-set :is(.mf-v-yes, .mf-v-no) { white-space: nowrap; }
  .mf-la-set .mf-v-adm { grid-area: adm; }
  .mf-la-set .mf-act-cost i { width: calc(var(--w) * 3.6rem); }
  .mf-la-read { min-height: 14.5em; }
}

/* Section 01, the record is pairwise: a leader at the centre of twelve of a million relations, each its own line.
   Green is balance (a relation whose other end wrote, moved to 1), magenta strain and its cost (a relation kept at 2).
   An ink-filled person writes; an open one writes nothing. Each person is a toggle button laid over the drawing. */
.mf-pw-row, .mf-wh-row { scroll-margin-top: 4.5rem; }
.mf-body .mf-page :is(.mf-pw-h3, .mf-wh-h3) { max-width: 24ch; margin-bottom: 1.1rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.mf-pw-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; margin: .3rem 0 0; }
.mf-pw-hub { position: relative; min-width: 0; }
.mf-pw-line { stroke: var(--mf-cost); stroke-width: 4; transition: stroke-width .15s; }
.mf-pw-line.is-balanced { stroke: var(--mf-balance); stroke-width: 2; }
.mf-pw-x { font: 700 12px var(--mf-mono); text-anchor: middle; fill: var(--mf-cost); paint-order: stroke; stroke: var(--mf-paper); stroke-width: 5px; stroke-linejoin: round; }
.mf-pw-x.is-balanced { fill: var(--mf-balance); }
.mf-pw-person { fill: var(--mf-paper); stroke: var(--mf-ink); stroke-width: 1.5; }
.mf-pw-person.is-writes { fill: var(--mf-ink); }
.mf-pw-who { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.mf-pw-who:hover { outline: 1px solid var(--mf-hair); outline-offset: -7px; }
.mf-pw-who:focus-visible { outline: 2px solid var(--mf-ink); outline-offset: -5px; }
.mf-pw-read { display: grid; gap: .8rem; margin: 0; min-width: 0; }
.mf-pw-read div { min-width: 0; padding-top: .55rem; border-top: 1px solid var(--mf-rule); }
.mf-pw-read dt { font: 700 .62rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-soft); }
.mf-pw-read dd { margin: 0; font-size: .8rem; line-height: 1.35; color: var(--mf-soft); }
.mf-pw-read dd.mf-pw-n { margin: .3rem 0 .3rem; font: 860 2.4rem/.86 var(--mf-display); letter-spacing: -.05em; color: var(--mf-ink); font-variant-numeric: tabular-nums lining-nums; }
.mf-pw-read dd.mf-pw-n.mf-balance-ink { color: var(--mf-balance); }
.mf-pw-read dd.mf-pw-n.mf-cost-ink { color: var(--mf-cost); }
.mf-pw-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0 !important; }
.mf-pw-quick button { min-height: 40px; padding: .4rem .7rem; border: 1px solid var(--mf-rule); border-radius: 0; background: var(--mf-paper); cursor: pointer; font: 700 .64rem/1.2 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-ink); }
.mf-pw-quick button:hover { border-color: var(--mf-ink); }
.mf-pw-quick button:focus-visible { outline: 2px solid var(--mf-ink); outline-offset: 2px; }
.mf-key-writes, .mf-key-nowrite { color: var(--mf-ink); }
.mf-key span.mf-key-writes::before, .mf-key span.mf-key-nowrite::before { width: .7rem; height: .7rem; border: 1.5px solid var(--mf-ink); border-radius: 50%; box-sizing: border-box; }
.mf-key-writes::before { background: var(--mf-ink); }
.mf-body .mf-pw .mf-caption, .mf-body .mf-wh .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
/* Section 01, the judgment reads the whole: two of the leader's relations on one menu. Each row gives the act's parts,
   judged each on its own relation's menu, and the code's verdict on the whole menu. The shaded row is the drawn act. */
.mf-wh-menu .mf-a-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mf-wh-menu .mf-a-opt span { white-space: nowrap; }
.mf-wh-set .mf-acts-head, .mf-wh-set .mf-act { grid-template-columns: minmax(0, 1fr) 4.4rem 7.4rem 6rem; gap: .8rem; }
.mf-wh-set .mf-acts-head { padding-left: .9rem; }
.mf-wh-set .mf-act { padding-left: .9rem; cursor: default; }
.mf-wh-set .mf-wh-fixed { border-top: 1.5px solid var(--mf-ink); }
.mf-wh-alone { display: flex; flex-direction: column; gap: .3rem; }
.mf-wh-part { font: 700 .6rem/1.2 var(--mf-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--mf-soft); }
.mf-wh-part b { font-weight: 700; color: var(--mf-ink); }
.mf-wh-part b.is-no { color: var(--mf-forbid); }
.mf-wh-act.is-off > :not(.mf-v-code) { opacity: .4; }
.mf-v-off { display: inline-block; padding: .38rem .45rem; border: 1px dashed var(--mf-hair); font: 700 .6rem/1.15 var(--mf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-soft); }
@media (max-width: 760px) {
  .mf-pw-body { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .mf-pw-hub { max-width: 22rem; width: 100%; margin: 0 auto; }
  .mf-pw-x { font-size: 13px; }
  .mf-pw-read { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .mf-pw-read dt { min-height: 2.6em; }
  .mf-pw-read dd.mf-pw-n { font-size: 2rem; }
  .mf-pw-quick button { min-height: 44px; }
  .mf-wh-svg .mf-node-name { font-size: 27px; }
  .mf-wh-svg .mf-cl-tag { font-size: 20px; letter-spacing: .04em; }
  .mf-wh-set .mf-act { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cost" "alone code"; padding-left: .6rem; }
  .mf-wh-set .mf-wh-alone { grid-area: alone; }
  .mf-wh-set :is(.mf-v-yes, .mf-v-no, .mf-v-off) { white-space: nowrap; }
}

/* Section 04, writes are judged: one relation at 2 and its menu, read before anyone writes. Rows say whether A
   writes, columns whether B writes; each cell is the relief to balance with that set of writes, and the quadrant with
   no writes also holds doing nothing. Red marks the row and the column without a write the least act carries. */
.mf-wr-row { scroll-margin-top: 4.5rem; }
.mf-body .mf-page .mf-wr-h3 { max-width: 24ch; margin-bottom: 1.1rem; font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.08; letter-spacing: -.02em; }
.mf-wr-grid { container-type: inline-size; display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: ". c1 c2" "r1 ab a" "r2 b q"; gap: .45rem; min-width: 0; margin: .5rem 0 0; padding: 0; border: 0; }
.mf-body .mf-wr-head { margin: 0; padding: 0 0 .45rem; font: 700 .64rem/1.3 var(--mf-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mf-ink); border-bottom: 1.5px solid var(--mf-ink); align-self: end; }
.mf-wr-head small { display: block; margin-top: .25rem; font: inherit; letter-spacing: .08em; color: var(--mf-forbid); }
.mf-body .mf-wr-head.is-without { border-color: var(--mf-forbid); }
.mf-body :is(.mf-wr-r1, .mf-wr-r2) { align-self: stretch; padding: .7rem .6rem 0 0; border-bottom: 0; border-right: 1.5px solid var(--mf-ink); }
.mf-body .mf-wr-r2.is-without { border-right-color: var(--mf-forbid); }
.mf-wr-c1 { grid-area: c1; } .mf-wr-c2 { grid-area: c2; } .mf-wr-r1 { grid-area: r1; } .mf-wr-r2 { grid-area: r2; }
.mf-wr-ab { grid-area: ab; } .mf-wr-a { grid-area: a; } .mf-wr-b { grid-area: b; align-self: start; }
.mf-wr-quad { grid-area: q; display: grid; gap: .45rem; min-width: 0; }
.mf-wr-cell { position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; min-height: 44px; padding: .65rem .7rem .7rem; border: 1px solid var(--mf-rule); background: var(--mf-paper); cursor: pointer; }
.mf-wr-cell:hover { border-color: var(--mf-hair); }
.mf-wr-cell:has(input:checked), .mf-wr-cell.is-on { border-color: var(--mf-ink); background: var(--mf-panel); box-shadow: inset 3px 0 0 var(--mf-ink); }
.mf-wr-cell:has(input:focus-visible) { outline: 2px solid var(--mf-ink); outline-offset: 2px; }
.mf-wr-cell input { position: absolute; left: .7rem; top: .78rem; width: 1rem; height: 1rem; margin: 0; appearance: none; -webkit-appearance: none; border: 1.5px solid var(--mf-ink); border-radius: 0; background: var(--mf-paper); cursor: pointer; }
.mf-wr-cell input:checked { background: var(--mf-ink); box-shadow: inset 0 0 0 3px var(--mf-paper); }
.mf-wr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding-left: 1.55rem; }
.mf-wr-name { min-width: 0; font-weight: 600; font-size: .95rem; line-height: 1.25; color: var(--mf-ink); white-space: nowrap; }
.mf-wr-cost { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: none; }
.mf-wr-cost b { font: 820 1.45rem/.9 var(--mf-display); letter-spacing: -.04em; color: var(--mf-cost); font-variant-numeric: tabular-nums lining-nums; }
.mf-wr-cost.is-bal b { color: var(--mf-balance); }
.mf-wr-cost.is-would b { color: var(--mf-soft); }
.mf-wr-cost small { font: 400 .6rem/1.2 var(--mf-mono); letter-spacing: .04em; color: var(--mf-soft); white-space: nowrap; }
.mf-wr-who { font: 400 .72rem/1.3 var(--mf-mono); color: var(--mf-soft); }
.mf-wr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .5rem; margin-top: auto; padding-top: .25rem; }
.mf-wr-adm { font: 700 .6rem/1.2 var(--mf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mf-ink); }
.mf-wr-adm.is-no { color: var(--mf-forbid); }
.mf-wr-foot :is(.mf-v-yes, .mf-v-no) { white-space: nowrap; }
.mf-wr .mf-cl-state { margin-top: 1.2rem !important; }
.mf-body .mf-wr .mf-caption { margin: .5rem 0 0; font-size: .84rem; line-height: 1.4; }
/* Where the cells are narrow, the cost moves under the act's name. */
@container (max-width: 32.5rem) {
  .mf-wr-top { flex-direction: column; gap: .35rem; }
  .mf-wr-cost { flex-direction: row; align-items: baseline; gap: .4rem; margin-left: -1.55rem; }
}
@media (max-width: 760px) {
  .mf-wr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "c1 c2" "r1 r1" "ab a" "r2 r2" "b q"; gap: .4rem; }
  .mf-body :is(.mf-wr-r1, .mf-wr-r2) { padding: .55rem 0 .35rem; border-right: 0; border-bottom: 1.5px solid var(--mf-ink); }
  .mf-body .mf-wr-r2.is-without { border-bottom-color: var(--mf-forbid); }
  .mf-wr-r2 small { display: inline; margin-left: .6rem; }
  .mf-wr-cell { padding: .6rem .55rem .65rem; }
  .mf-wr-cell input { left: .55rem; top: .7rem; }
  .mf-wr-top { flex-direction: column; gap: .35rem; padding-left: 1.45rem; }
  .mf-wr-cost { flex-direction: row; align-items: baseline; gap: .4rem; margin-left: -1.45rem; }
  .mf-wr-foot { flex-direction: column; align-items: flex-start; }
}