/* Universe formation, live figure: the ledger bench (modes beginning and arrow). Every rule is scoped under the doubled root
   class .ufl.ufl. Colour carries one meaning each, after the page's key: cyan the record (its length), magenta an entry (the add
   buttons), green a balance back to zero and the PROVED tag, red a difference the shift makes. Tokens come from the page's --uf-*
   custom properties on any ancestor, with the design-stack values as fallbacks. */
.ufl.ufl {
  --ufl-paper: var(--uf-paper, #faf8f3); --ufl-ink: var(--uf-ink, #1d1d1b); --ufl-body: var(--uf-body, #2a2926);
  --ufl-soft: var(--uf-soft, #3c3a36); --ufl-grey: #6b6a66;
  --ufl-rule: color-mix(in srgb, var(--ufl-ink) 16%, var(--ufl-paper));
  --ufl-faint: color-mix(in srgb, var(--ufl-ink) 9%, var(--ufl-paper));
  --ufl-rec: var(--uf-record, #009fe3); --ufl-rec-text: var(--uf-record-text, #0072b5);
  --ufl-event: var(--uf-event, #e6007e);
  --ufl-ok: var(--uf-ok, #0b7a3e); --ufl-open: var(--uf-open, #c8401f); --ufl-open-text: #ad371a;
  --ufl-text: "Inter", "InterVariable", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ufl-display: var(--uf-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --ufl-mono: var(--uf-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  display: block; position: relative; margin: 0; padding: 0; min-width: 0; max-width: 100%;
  color: var(--ufl-body); font: 420 16px/1.42 var(--ufl-text); font-optical-sizing: auto;
  border: 1px solid var(--ufl-rule); background: transparent; box-sizing: border-box; text-align: left;
}
@media screen and (prefers-color-scheme: dark) {
  .ufl.ufl {
    --ufl-paper: var(--uf-paper, #141413); --ufl-ink: var(--uf-ink, #faf8f3); --ufl-body: var(--uf-body, #e9e6df);
    --ufl-soft: var(--uf-soft, #c9c5bc); --ufl-grey: #a5a29b;
    --ufl-rec: var(--uf-record, #2bb3f0); --ufl-rec-text: var(--uf-record-text, #2bb3f0); --ufl-event: var(--uf-event, #ff3d9e);
    --ufl-ok: var(--uf-ok, #3fb37a); --ufl-open: var(--uf-open, #ff6a3d); --ufl-open-text: #ff8a63;
  }
}
.ufl.ufl *, .ufl.ufl *::before, .ufl.ufl *::after { box-sizing: border-box; }
.ufl.ufl :is(p, span, div, label, button, ul, li, dl, dt, dd, table) { margin: 0; padding: 0; }
.ufl.ufl .ufl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ufl.ufl .ufl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--ufl-rule); font: 700 .7rem/1.5 var(--ufl-mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ufl-ink); }
.ufl.ufl .ufl-sub { color: var(--ufl-soft); font-weight: 400; }
.ufl.ufl .ufl-glabel { font: 700 .68rem/1.4 var(--ufl-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ufl-soft); margin-bottom: .4rem; }
.ufl.ufl .ufl-sym { text-transform: none; letter-spacing: 0; font-family: var(--ufl-text); font-weight: 600; color: var(--ufl-ink); font-size: .82rem; }
.ufl.ufl .ufl-body { padding: 1rem 1.1rem .3rem; display: flex; flex-direction: column; gap: 1rem; }
.ufl.ufl.ufl-narrow .ufl-body { padding: .75rem .75rem .2rem; gap: .85rem; }

/* switch and shift */
.ufl.ufl .ufl-top { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.ufl.ufl .ufl-switch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; background: transparent; border: 1px solid var(--ufl-ink);
  border-radius: 0; padding: .45rem .7rem; min-height: 2.75rem; cursor: pointer; color: var(--ufl-ink); font: 600 .86rem/1.25 var(--ufl-text); text-align: left; }
.ufl.ufl .ufl-knob { flex: none; width: 2.3rem; height: 1.2rem; border: 1.5px solid var(--ufl-ink); position: relative; }
.ufl.ufl .ufl-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.2rem - 7px); height: calc(1.2rem - 7px); background: transparent; border: 1.5px solid var(--ufl-ink); box-sizing: border-box; }   /* hollow when off */
.ufl.ufl .ufl-switch.is-on .ufl-knob { background: var(--ufl-ok); border-color: var(--ufl-ok); }
.ufl.ufl .ufl-plaw { margin: .35rem 0 0; font-size: .84rem; color: var(--ufl-soft); max-width: 60em; }
.ufl.ufl .ufl-swst { flex: none; min-width: 2.2em; font: 700 .72rem/1 var(--ufl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ufl-ink); }
.ufl.ufl .ufl-switch.is-on .ufl-knob::after { left: auto; right: 2px; background: var(--ufl-paper); border-color: var(--ufl-paper); }
.ufl.ufl .ufl-shift { display: flex; align-items: center; gap: .7rem; flex: 1 1 100%; }
.ufl.ufl .ufl-shift .ufl-glabel { margin: 0; flex: none; }
/* the shift slider is drawn here so its thumb has a known width (20 px): the scale under it (−3 to +3, zero in bold) lines up with the thumb */
.ufl.ufl .ufl-rwrap { position: relative; flex: 1 1 8rem; min-width: 0; padding-bottom: 1.15rem; }
.ufl.ufl .ufl-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 1.8rem; margin: 0; background: transparent; cursor: pointer; }
.ufl.ufl .ufl-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ufl-ink) 55%, var(--ufl-paper)); }
.ufl.ufl .ufl-range::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ufl-ink) 55%, var(--ufl-paper)); }
.ufl.ufl .ufl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: var(--ufl-ink); border: 3px solid var(--ufl-paper); box-shadow: 0 0 0 1.5px var(--ufl-ink); }
.ufl.ufl .ufl-range::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: var(--ufl-ink);
  border: 3px solid var(--ufl-paper); box-shadow: 0 0 0 1.5px var(--ufl-ink); }
.ufl.ufl .ufl-rscale span { position: absolute; bottom: 0; transform: translateX(-50%); font: 600 .72rem/1 var(--ufl-text); color: var(--ufl-soft);
  font-variant-numeric: tabular-nums; }
.ufl.ufl .ufl-rscale span.is-zero { color: var(--ufl-ink); font-weight: 800; }
.ufl.ufl.ufl-narrow .ufl-shift { flex-wrap: wrap; }
.ufl.ufl.ufl-narrow .ufl-rwrap { flex-basis: 100%; }
/* the six counts drawn (beginning mode) */
.ufl.ufl .ufl-chart { margin: .2rem 0 .5rem; }
.ufl.ufl .ufl-csvg { display: block; max-width: 100%; overflow: visible; }
.ufl.ufl .ufl-bgrid { stroke: var(--ufl-rule); stroke-width: 1; }
.ufl.ufl .ufl-czero { stroke: var(--ufl-ink); stroke-width: 1.6; }
.ufl.ufl .ufl-ctick { fill: var(--ufl-soft); font: 600 11px var(--ufl-text); }
.ufl.ufl .ufl-cbar-d { fill: var(--ufl-ink); }
.ufl.ufl .ufl-cbar-c { fill: var(--ufl-paper); stroke: var(--ufl-ink); stroke-width: 1.6; }
.ufl.ufl .ufl-cbar-d.is-bad { fill: var(--ufl-open); }
.ufl.ufl .ufl-cbar-c.is-bad { stroke: var(--ufl-open); }
.ufl.ufl .ufl-cghosth { fill: none; stroke: var(--ufl-paper); stroke-width: 3.2; }
.ufl.ufl .ufl-cghost { fill: none; stroke: var(--ufl-grey); stroke-width: 1.6; stroke-dasharray: 3 2.5; }
.ufl.ufl .ufl-carrow { fill: none; stroke: var(--ufl-grey); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ufl.ufl .ufl-bval { fill: var(--ufl-ink); font: 700 12.5px var(--ufl-text); }
.ufl.ufl .ufl-cbr { fill: none; stroke: var(--ufl-ok); stroke-width: 2; }
.ufl.ufl .ufl-cbrt { fill: var(--ufl-ok); font: 800 11.5px var(--ufl-text); }
.ufl.ufl .ufl-cacc { fill: var(--ufl-ink); font: 700 12px var(--ufl-mono); }
.ufl.ufl .ufl-hatch { stroke: var(--ufl-open); stroke-width: 1.4; opacity: .5; }
.ufl.ufl .ufl-cfloort { fill: var(--ufl-open-text); font: 700 9.5px var(--ufl-mono); letter-spacing: .08em; paint-order: stroke; stroke: var(--ufl-paper); stroke-width: 3px; stroke-linejoin: round; }
.ufl.ufl .ufl-ckey { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; font-size: .78rem; color: var(--ufl-soft); }
.ufl.ufl .ufl-cmpnote { margin: 0 0 .45rem; font-size: .86rem; color: var(--ufl-soft); max-width: 60em; }
.ufl.ufl .ufl-ckey > span { display: inline-flex; align-items: center; gap: .35rem; }
.ufl.ufl .ufl-ck { flex: none; display: inline-block; width: .8rem; height: .8rem; box-sizing: border-box; }
.ufl.ufl .ufl-ck-d { background: var(--ufl-ink); }
.ufl.ufl .ufl-ck-c { border: 1.6px solid var(--ufl-ink); }
.ufl.ufl .ufl-ck-b { width: .45rem; border: 2px solid var(--ufl-ok); border-left: none; }
.ufl.ufl .ufl-ck-g { height: 0; border-top: 1.6px dashed var(--ufl-grey); }
.ufl.ufl .ufl-ck-f { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ufl-open) 55%, transparent) 0 1.5px, transparent 1.5px 4.5px); }
.ufl.ufl .ufl-ckey:not(.is-shift) .ufl-ck-gw, .ufl.ufl .ufl-ckey:not(.is-premise) .ufl-ck-pw { display: none; }

/* books */
.ufl.ufl .ufl-twin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem 1.4rem; }
.ufl.ufl.ufl-narrow .ufl-twin { grid-template-columns: minmax(0, 1fr); }
.ufl.ufl .ufl-book { min-width: 0; }
.ufl.ufl .ufl-book .ufl-note { display: none; font-size: .86rem; color: var(--ufl-soft); }
.ufl.ufl.ufl-narrow .ufl-book.is-same > :not(.ufl-glabel):not(.ufl-note) { display: none; }
.ufl.ufl.ufl-narrow .ufl-book.is-same .ufl-note { display: block; }
.ufl.ufl .ufl-tab { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .92rem; }
.ufl.ufl .ufl-tab th, .ufl.ufl .ufl-tab td { padding: .28rem .5rem; border-bottom: 1px solid var(--ufl-rule); text-align: right; }
.ufl.ufl .ufl-tab th[scope="row"] { text-align: left; font: 700 .8rem/1.3 var(--ufl-mono); color: var(--ufl-ink); }
.ufl.ufl .ufl-tab thead th { font: 700 .64rem/1.3 var(--ufl-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ufl-soft); }
.ufl.ufl .ufl-tab td { color: var(--ufl-ink); font-weight: 600; }
.ufl.ufl .ufl-dl { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .25rem .8rem; margin-top: .55rem; font-size: .86rem; }
.ufl.ufl .ufl-dl dt { color: var(--ufl-soft); }
.ufl.ufl .ufl-dl dd { color: var(--ufl-ink); font-weight: 600; overflow-wrap: anywhere; }
.ufl.ufl .ufl-dl dd.is-ok { color: var(--ufl-ok); }

/* buttons */
.ufl.ufl .ufl-brow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; margin-bottom: .6rem; }
.ufl.ufl .ufl-brow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ufl.ufl.ufl-narrow .ufl-brow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ufl.ufl .ufl-btn { font: 600 .82rem/1.2 var(--ufl-text); color: var(--ufl-ink); background: transparent; text-align: left;
  border: 1px solid var(--ufl-ink); border-radius: 0; padding: .45rem .5rem; cursor: pointer; min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent; }
.ufl.ufl .ufl-add { border-left: 4px solid var(--ufl-event); }
.ufl.ufl .ufl-small { text-align: center; min-width: 2.75rem; padding: .45rem .7rem; }
.ufl.ufl .ufl-erow { display: flex; flex-wrap: wrap; gap: .4rem; }
.ufl.ufl .ufl-btn:hover:not(:disabled), .ufl.ufl .ufl-switch:hover { background: var(--ufl-faint); }
.ufl.ufl .ufl-btn:disabled { color: var(--ufl-grey); border-color: var(--ufl-grey); cursor: default; }
.ufl.ufl :is(.ufl-btn, .ufl-switch, .ufl-range):focus-visible { outline: 2px solid var(--ufl-ink); outline-offset: 3px; }

/* same / differs */
.ufl.ufl .ufl-cl { list-style: none; display: grid; gap: .3rem; font-size: .9rem; }
.ufl.ufl .ufl-cl li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); align-items: baseline; }
.ufl.ufl .ufl-cmark { font: 700 1rem/1 var(--ufl-mono); }
.ufl.ufl .ufl-cl li.is-same .ufl-cmark { color: var(--ufl-ok); }
.ufl.ufl .ufl-cl li.is-diff .ufl-cmark { color: var(--ufl-open-text); }
.ufl.ufl .ufl-cl b { font-weight: 650; color: var(--ufl-ink); }

/* arrow */
.ufl.ufl .ufl-agrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem 1.4rem; }
.ufl.ufl.ufl-narrow .ufl-agrid { grid-template-columns: minmax(0, 1fr); }
.ufl.ufl .ufl-aleft, .ufl.ufl .ufl-aright { min-width: 0; }
.ufl.ufl.ufl-arrow .ufl-brow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ufl.ufl.ufl-arrow .ufl-erow { margin-bottom: .9rem; }
.ufl.ufl .ufl-svg { display: block; max-width: 100%; overflow: visible; }
.ufl.ufl .ufl-grid { stroke: var(--ufl-faint); }
.ufl.ufl .ufl-zero { stroke: var(--ufl-rule); stroke-width: 1.2; }   /* faint, so the zero lines past the record do not read as data */
.ufl.ufl .ufl-tick { fill: var(--ufl-soft); font: 400 11px var(--ufl-mono); }
.ufl.ufl .ufl-rowk { fill: var(--ufl-ink); font-weight: 700; }
.ufl.ufl .ufl-blab { fill: var(--ufl-soft); font: 700 10.5px var(--ufl-mono); letter-spacing: .1em; }
.ufl.ufl .ufl-rec { fill: none; stroke: var(--ufl-rec); stroke-width: 2.6; }
.ufl.ufl .ufl-recdot { fill: var(--ufl-rec); }
.ufl.ufl .ufl-bal { fill: none; stroke: var(--ufl-ink); stroke-width: 1.8; }
.ufl.ufl .ufl-bal-b { stroke-dasharray: 6 3; }
.ufl.ufl .ufl-bal-c { stroke-dasharray: 2 3; }
.ufl.ufl .ufl-zmark { fill: var(--ufl-paper); stroke: var(--ufl-ok); stroke-width: 2.4; }
.ufl.ufl .ufl-key { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .78rem; color: var(--ufl-soft); margin-top: .3rem; }
.ufl.ufl .ufl-key span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.ufl.ufl .ufl-k { display: inline-block; width: 1.4rem; height: 0; border-top: 2.4px solid var(--ufl-ink); }
.ufl.ufl .ufl-k-rec { border-top-color: var(--ufl-rec); border-top-width: 3px; }
.ufl.ufl .ufl-k-b { border-top-style: dashed; }
.ufl.ufl .ufl-k-c { border-top-style: dotted; }
.ufl.ufl .ufl-k-z { width: .7rem; height: .7rem; border: 2.4px solid var(--ufl-ok); border-radius: 50%; }
.ufl.ufl .ufl-read { margin-top: .7rem; }
.ufl.ufl .ufl-counts { padding-top: .8rem; border-top: 1px solid var(--ufl-rule); }
.ufl.ufl .ufl-cgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 1.2rem; }
.ufl.ufl.ufl-narrow .ufl-cgrid { grid-template-columns: minmax(0, 1fr); }
.ufl.ufl .ufl-cval { font: 820 1.25rem/1.1 var(--ufl-display); letter-spacing: -.02em; color: var(--ufl-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ufl.ufl .ufl-cval.is-ok { color: var(--ufl-ok); }
.ufl.ufl .ufl-clab { font-size: .8rem; color: var(--ufl-soft); margin-top: .2rem; line-height: 1.3; }

.ufl.ufl .ufl-verdict { padding: .7rem 1.1rem .4rem; font-size: 1rem; color: var(--ufl-ink); min-height: 3.2em; max-width: 54em; }
.ufl.ufl .ufl-status { padding: .2rem 1.1rem .9rem; font-size: .86rem; color: var(--ufl-soft); max-width: 60em; }
.ufl.ufl .ufl-tagp { font: 700 .66rem/1 var(--ufl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ufl-ok);
  border: 1px solid var(--ufl-ok); padding: .14rem .3rem; margin-right: .3rem; vertical-align: .1em; }
.ufl.ufl .ufl-cap { padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--ufl-rule); }
.ufl.ufl .ufl-cap p { font-size: .92rem; color: var(--ufl-soft); max-width: 60em; }
.ufl.ufl.ufl-narrow .ufl-verdict { padding: .6rem .75rem .3rem; font-size: .94rem; }
.ufl.ufl.ufl-narrow .ufl-status { padding: .2rem .75rem .8rem; }
.ufl.ufl.ufl-narrow .ufl-cap { padding: .6rem .75rem .8rem; }
.ufl.ufl.ufl-narrow .ufl-head { padding: .55rem .75rem; }

@media (forced-colors: active) {
  .ufl.ufl { forced-color-adjust: none; --ufl-ink: CanvasText; --ufl-body: CanvasText; --ufl-soft: CanvasText; --ufl-grey: GrayText;
    --ufl-paper: Canvas; --ufl-rec: Highlight; --ufl-rec-text: CanvasText; --ufl-event: Highlight; --ufl-ok: CanvasText; --ufl-open: CanvasText;
    --ufl-open-text: CanvasText; --ufl-rule: CanvasText; --ufl-faint: Canvas; background: Canvas; color: CanvasText; }
  .ufl.ufl .ufl-switch.is-on .ufl-knob { background: Highlight; border-color: Highlight; }
}
@media print {
  /* print on white paper whatever the screen theme: the light values, not the page tokens; break between blocks, not inside them */
  .ufl.ufl { print-color-adjust: exact; -webkit-print-color-adjust: exact;
    --ufl-paper: #faf8f3; --ufl-ink: #1d1d1b; --ufl-body: #2a2926; --ufl-soft: #3c3a36; --ufl-grey: #6b6a66; --ufl-rule: color-mix(in srgb, var(--ufl-ink) 16%, var(--ufl-paper)); --ufl-faint: color-mix(in srgb, var(--ufl-ink) 9%, var(--ufl-paper)); --ufl-rec: #009fe3; --ufl-rec-text: #0072b5; --ufl-event: #e6007e; --ufl-ok: #0b7a3e; --ufl-open: #c8401f; --ufl-open-text: #ad371a; }
  /* keep drawings, table rows and short blocks whole; let the big wrappers break (whole-wrapper 'avoid' left near-blank pages) */
  .ufl.ufl svg, .ufl.ufl tr, .ufl.ufl li, .ufl.ufl p, .ufl.ufl dt, .ufl.ufl dd, .ufl.ufl button { break-inside: avoid; }
  .ufl.ufl .ufl-head, .ufl.ufl .ufl-glabel { break-after: avoid; }   /* a header or label stays with what it heads */
  .ufl.ufl .ufl-range, .ufl.ufl .ufl-rscale { display: none; }
  .ufl.ufl .ufl-rwrap { padding-bottom: 0; }
}

/* phones: the switch's state word stays beside the knob and its label takes the full width below (two lines, not three) */
.ufl.ufl.ufl-narrow .ufl-swlab { flex-basis: 100%; }
/* the steps back (beginning mode): small copies of the books, time running left to right */
.ufl.ufl .ufl-strip { min-width: 0; }
.ufl.ufl .ufl-sgz { stroke: var(--ufl-soft); stroke-width: 1; }
.ufl.ufl .ufl-sgb.ufl-cbar-c { stroke-width: 1.2; }
.ufl.ufl .ufl-stot { fill: var(--ufl-soft); font: 600 11px var(--ufl-text); }
.ufl.ufl .ufl-stot.is-key { fill: var(--ufl-ink); font-weight: 800; }
.ufl.ufl .ufl-schev { fill: var(--ufl-soft); font: 700 14px var(--ufl-text); }
.ufl.ufl .ufl-sell { fill: var(--ufl-soft); font: 600 11px var(--ufl-text); }
.ufl.ufl .ufl-sfade { opacity: .45; }
.ufl.ufl .ufl-swall { stroke: var(--ufl-ok); stroke-width: 3; }
.ufl.ufl .ufl-swallt { fill: var(--ufl-ok); font: 700 9.5px var(--ufl-mono); letter-spacing: .08em; }
.ufl.ufl .ufl-swallt.is-open { fill: var(--ufl-soft); }
.ufl.ufl .ufl-snm { margin: 0; font-size: .86rem; color: var(--ufl-soft); }
.ufl.ufl .ufl-stotk { fill: var(--ufl-soft); font: 600 10.5px var(--ufl-text); font-style: italic; }
.ufl.ufl .ufl-sgb.is-bad.ufl-cbar-d { fill: var(--ufl-open); }
.ufl.ufl .ufl-sgb.is-bad.ufl-cbar-c { stroke: var(--ufl-open); }
.ufl.ufl .ufl-strip { margin-bottom: .2rem; }
/* pass 30: the conclusion first; the two pictures side by side everywhere, summaries below; balance arrows; a closed Try it part; a toggle */
.ufl.ufl .ufl-lead { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--ufl-ink); max-width: 54em; }
.ufl.ufl.ufl-narrow .ufl-twin.ufl-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem .6rem; }
.ufl.ufl .ufl-ts { display: none; }
.ufl.ufl.ufl-narrow .ufl-ts { display: inline; }
.ufl.ufl.ufl-narrow .ufl-tl { display: none; }
.ufl.ufl.ufl-narrow .ufl-csvg.is-tiny .ufl-bval { font-size: 10px; }
.ufl.ufl .ufl-cbr { fill: none; stroke: var(--ufl-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ufl.ufl .ufl-ck-b2 { flex: none; font: 900 .95rem/1 var(--ufl-text); font-style: normal; color: var(--ufl-ok); width: .8rem; text-align: center; }
.ufl.ufl .ufl-try { border-top: 1px solid var(--ufl-rule); padding-top: .5rem; }
.ufl.ufl .ufl-try > summary { cursor: pointer; font: 600 .9rem/1.3 var(--ufl-text); color: var(--ufl-ink); padding: .35rem 0; min-height: 2.75rem; display: flex; align-items: center; gap: .4rem; }
.ufl.ufl .ufl-try > summary:focus-visible { outline: 2px solid var(--ufl-ink); outline-offset: 3px; }
.ufl.ufl .ufl-try[open] > summary { margin-bottom: .5rem; }
.ufl.ufl .ufl-knob { border-radius: 999px; width: 2.5rem; height: 1.4rem; }
.ufl.ufl .ufl-knob::after { border-radius: 50%; top: 2px; left: 2px; width: calc(1.4rem - 7px); height: calc(1.4rem - 7px); }

/* a visually hidden header keeps its spans inside its 1 px box (their nowrap text otherwise ran past narrow screens, though clipped) */
.ufl.ufl .ufl-sr > span { display: block; width: 1px; overflow: hidden; }
/* pass 32: the shifted copy of the empty books; the Try it fold's own marker (display:flex hides the browser's) */
.ufl.ufl .ufl-semp { margin: 0; font-size: .9rem; color: var(--ufl-ink); max-width: 60em; border-left: 3px solid var(--ufl-ok); padding: .1rem 0 .1rem .6rem; }
.ufl.ufl .ufl-try > summary { list-style: none; }
.ufl.ufl .ufl-try > summary::-webkit-details-marker { display: none; }
.ufl.ufl .ufl-try > summary::before { content: "▸"; font-size: 1rem; line-height: 1; width: 1rem; color: var(--ufl-ink); }
.ufl.ufl .ufl-try[open] > summary::before { content: "▾"; }
.ufl.ufl:not(.ufl-narrow) .ufl-stitle { display: none; }   /* wide: the summaries sit right under their pictures' titles */
.ufl.ufl.ufl-narrow .ufl-swallt { font-size: 11px; }
.ufl.ufl.ufl-narrow .ufl-stot { font-size: 12px; }
.ufl.ufl .ufl-carrowh { fill: none; stroke: var(--ufl-paper); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }