/* Universe formation, live figure: the start is balance. Every rule is scoped under the doubled root class .ufb.ufb.
   Colour carries one meaning each, after the page's key: green balance at cost zero, red the end with no bound (the
   "nothing" a ratio cannot reach), ink the cost curve and the reader's ratio. Tokens come from the page's --uf-*
   custom properties on any ancestor, with the design-stack values as fallbacks. */
.ufb.ufb {
  --ufb-paper: var(--uf-paper, #faf8f3); --ufb-ink: var(--uf-ink, #1d1d1b); --ufb-body: var(--uf-body, #2a2926);
  --ufb-soft: var(--uf-soft, #3c3a36); --ufb-grey: #6b6a66;
  --ufb-rule: color-mix(in srgb, var(--ufb-ink) 16%, var(--ufb-paper));
  --ufb-faint: color-mix(in srgb, var(--ufb-ink) 9%, var(--ufb-paper));
  --ufb-ok: var(--uf-ok, #0b7a3e); --ufb-ok-text: var(--uf-ok, #0b7a3e);
  --ufb-open: var(--uf-open, #c8401f); --ufb-open-text: #ad371a;
  --ufb-text: "Inter", "InterVariable", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ufb-display: var(--uf-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --ufb-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(--ufb-body); font: 420 16px/1.42 var(--ufb-text); font-optical-sizing: auto;
  border: 1px solid var(--ufb-rule); background: transparent; box-sizing: border-box; text-align: left;
}
@media screen and (prefers-color-scheme: dark) {
  .ufb.ufb {
    --ufb-paper: var(--uf-paper, #141413); --ufb-ink: var(--uf-ink, #faf8f3); --ufb-body: var(--uf-body, #e9e6df);
    --ufb-soft: var(--uf-soft, #c9c5bc); --ufb-grey: #a5a29b;
    --ufb-ok: var(--uf-ok, #3fb37a); --ufb-ok-text: var(--uf-ok, #3fb37a);
    --ufb-open: var(--uf-open, #ff6a3d); --ufb-open-text: #ff8a63;
  }
}
.ufb.ufb *, .ufb.ufb *::before, .ufb.ufb *::after { box-sizing: border-box; }
.ufb.ufb :is(p, span, div, label, output, button) { margin: 0; }
.ufb.ufb .ufb-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; }
.ufb.ufb .ufb-nw { white-space: nowrap; }
.ufb.ufb .ufb-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--ufb-rule); font: 700 .7rem/1.5 var(--ufb-mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ufb-ink); }
.ufb.ufb .ufb-sub { color: var(--ufb-soft); font-weight: 400; }
.ufb.ufb .ufb-glabel { font: 700 .68rem/1.4 var(--ufb-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ufb-soft); margin-bottom: .4rem; }
.ufb.ufb .ufb-sym { text-transform: none; letter-spacing: 0; font-family: var(--ufb-text); font-weight: 600; }
.ufb.ufb .ufb-glabel .ufb-sym { font-size: .82rem; color: var(--ufb-ink); }

/* layout. Wide (720 px and up): controls left of the chart. Narrow (the hero column, phones): one compact column. */
.ufb.ufb .ufb-grid { display: grid; grid-template-columns: minmax(0, 17.5rem) minmax(0, 1fr);
  grid-template-areas: "modes plot" "read plot" "bench plot" "bench slider"; grid-template-rows: auto auto 1fr auto;
  gap: 1.1rem 1.6rem; padding: 1.1rem 1.1rem .4rem; }
.ufb.ufb .ufb-plot { grid-area: plot; min-width: 0; align-self: start; }
.ufb.ufb .ufb-slider { grid-area: slider; min-width: 0; }
.ufb.ufb .ufb-read { grid-area: read; min-width: 0; }
.ufb.ufb .ufb-bench { grid-area: bench; min-width: 0; }
.ufb.ufb .ufb-modes { grid-area: modes; min-width: 0; }
.ufb.ufb.ufb-narrow .ufb-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "plot plot" "slider slider" "read bench" "modes modes"; grid-template-rows: auto;
  gap: .6rem .9rem; padding: .6rem .75rem .15rem; }

.ufb.ufb .ufb-svg, .ufb.ufb .ufb-bsvg { display: block; max-width: 100%; overflow: visible; }
.ufb.ufb .ufb-svg { touch-action: pan-y; user-select: none; -webkit-user-select: none; }

/* chart marks */
.ufb.ufb .ufb-gridl { stroke: var(--ufb-faint); stroke-width: 1; }
.ufb.ufb .ufb-axis { stroke: var(--ufb-ink); stroke-width: 1.2; }
.ufb.ufb .ufb-xt { stroke: var(--ufb-ink); stroke-width: 1; }
.ufb.ufb .ufb-tick { fill: var(--ufb-soft); font: 400 12px var(--ufb-mono); }
.ufb.ufb .ufb-alab { fill: var(--ufb-soft); font: 700 11px var(--ufb-mono); letter-spacing: .12em; }
.ufb.ufb .ufb-curve { fill: none; stroke: var(--ufb-ink); stroke-width: 2.4; stroke-linejoin: round; }
.ufb.ufb .ufb-lost { stroke: var(--ufb-open); stroke-width: 2; stroke-dasharray: 3 3; }
.ufb.ufb .ufb-lostf { fill: var(--ufb-open); }
.ufb.ufb .ufb-lostt { fill: var(--ufb-open-text); font: 700 11px var(--ufb-mono); letter-spacing: .1em;
  paint-order: stroke; stroke: var(--ufb-paper); stroke-width: 4px; stroke-linejoin: round; }
.ufb.ufb .ufb-bal { fill: var(--ufb-ok); stroke: var(--ufb-paper); stroke-width: 2; }
.ufb.ufb .ufb-baltick { stroke: var(--ufb-ok); stroke-width: 1.2; stroke-dasharray: 2 3; }
.ufb.ufb .ufb-balt { fill: var(--ufb-ok-text); font: 700 11px var(--ufb-mono); letter-spacing: .1em;
  paint-order: stroke; stroke: var(--ufb-paper); stroke-width: 4px; stroke-linejoin: round; }
.ufb.ufb .ufb-handle { fill: var(--ufb-paper); stroke: var(--ufb-ink); stroke-width: 3; }
.ufb.ufb.ufb-is-bal .ufb-handle { fill: var(--ufb-ok); stroke: var(--ufb-paper); stroke-width: 2.5; }
.ufb.ufb .ufb-drop { stroke: var(--ufb-ink); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ufb.ufb .ufb-htick { stroke: var(--ufb-ink); stroke-width: 3; }
.ufb.ufb .ufb-off { fill: var(--ufb-open); stroke: var(--ufb-paper); stroke-width: 1.5; }
.ufb.ufb .ufb-hit { fill: transparent; cursor: ew-resize; }
.ufb.ufb.ufb-is-gone .ufb-curve { stroke-dasharray: 6 5; }
.ufb.ufb.ufb-is-gone .ufb-bal, .ufb.ufb.ufb-is-gone .ufb-baltick, .ufb.ufb.ufb-is-gone .ufb-balt { visibility: hidden; }

/* slider: its label above, the range under the plot (margins set in fig_balance.js to the plot's) */
.ufb.ufb .ufb-stop { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; }
.ufb.ufb .ufb-rwrap { flex: 1 1 auto; min-width: 0; }
.ufb.ufb .ufb-stop .ufb-glabel { margin: 0; white-space: nowrap; flex: none; }
.ufb.ufb .ufb-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; margin: 0; height: 1.8rem;
  background: transparent; cursor: pointer; }
.ufb.ufb .ufb-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ufb-ink) 55%, var(--ufb-paper)); }
.ufb.ufb .ufb-range::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ufb-ink) 55%, var(--ufb-paper)); }
.ufb.ufb .ufb-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(--ufb-ink); border: 3px solid var(--ufb-paper); box-shadow: 0 0 0 1.5px var(--ufb-ink); }
.ufb.ufb .ufb-range::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; background: var(--ufb-ink);
  border: 3px solid var(--ufb-paper); box-shadow: 0 0 0 1.5px var(--ufb-ink); }
.ufb.ufb .ufb-sscale { position: relative; height: 1.05rem; }
.ufb.ufb .ufb-sscale span { position: absolute; top: 0; transform: translateX(-50%); font: 600 .72rem/1 var(--ufb-text); color: var(--ufb-soft); white-space: nowrap; }
.ufb.ufb .ufb-sscale span.is-one { color: var(--ufb-ink); font-weight: 800; }
.ufb.ufb .ufb-ends { display: flex; justify-content: space-between; font: 400 .72rem/1.3 var(--ufb-mono); color: var(--ufb-soft); }

/* readout */
.ufb.ufb .ufb-big { display: block; font: 860 3.1rem/.92 var(--ufb-display); letter-spacing: -.045em;
  color: var(--ufb-ink); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; min-height: 1em; }
.ufb.ufb .ufb-big[data-len="m"] { font-size: 2.3rem; }
.ufb.ufb .ufb-big[data-len="l"] { font-size: 1.75rem; letter-spacing: -.03em; }
.ufb.ufb.ufb-is-bal .ufb-big { color: var(--ufb-ok-text); }
.ufb.ufb.ufb-is-far .ufb-big { color: var(--ufb-open-text); }
.ufb.ufb .ufb-xline { margin-top: .5rem; font-size: .92rem; color: var(--ufb-ink); }
.ufb.ufb .ufb-tag { display: inline-block; margin: .15rem 0 0 .45rem; font: 700 .62rem/1 var(--ufb-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ufb-soft); border: 1px solid var(--ufb-rule); padding: .14rem .3rem; white-space: nowrap; }
.ufb.ufb .ufb-tag-off { color: var(--ufb-open-text); border-color: var(--ufb-open); }
.ufb.ufb .ufb-formula { margin-top: .35rem; font-size: .88rem; color: var(--ufb-soft); }
.ufb.ufb .ufb-formula .ufb-sym { font-weight: 500; }

/* bench */
.ufb.ufb .ufb-blab { fill: var(--ufb-ink); font: 700 13px var(--ufb-mono); }
.ufb.ufb .ufb-bar-a { fill: var(--ufb-ink); }
.ufb.ufb .ufb-bar-b { fill: var(--ufb-grey); }
.ufb.ufb .ufb-bar-one { fill: var(--ufb-paper); stroke: var(--ufb-ink); stroke-width: 1.5; }
.ufb.ufb .ufb-onet { fill: var(--ufb-ink); font: 700 11px var(--ufb-mono); letter-spacing: .12em; }
.ufb.ufb .ufb-none { fill: none; stroke: var(--ufb-grey); stroke-width: 1.2; stroke-dasharray: 5 4; }
.ufb.ufb .ufb-nonet { fill: var(--ufb-grey); font: 700 11px var(--ufb-mono); letter-spacing: .14em; }
.ufb.ufb .ufb-bnote { font-size: .86rem; color: var(--ufb-soft); margin-top: .2rem; }

/* buttons */
.ufb.ufb .ufb-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.ufb.ufb .ufb-btn { font: 600 .84rem/1.2 var(--ufb-text); color: var(--ufb-ink); background: transparent; text-align: left;
  border: 1px solid var(--ufb-ink); border-radius: 0; padding: .5rem .6rem; cursor: pointer; min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent; }
.ufb.ufb .ufb-btn:hover { background: var(--ufb-faint); }
.ufb.ufb .ufb-btn[aria-pressed="true"] { background: var(--ufb-ink); color: var(--ufb-paper); }
.ufb.ufb .ufb-btn:focus-visible, .ufb.ufb .ufb-range:focus-visible { outline: 2px solid var(--ufb-ink); outline-offset: 3px; }

.ufb.ufb .ufb-verdict { padding: .7rem 1.1rem .9rem; font-size: 1rem; color: var(--ufb-ink); min-height: 3.3em; max-width: 52em; }
.ufb.ufb .ufb-cap { padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--ufb-rule); }
.ufb.ufb .ufb-cap p { font-size: .92rem; color: var(--ufb-soft); max-width: 60em; }

/* narrow: smaller readout, four buttons in one row, group label for screen readers only */
.ufb.ufb.ufb-narrow .ufb-big { font-size: 2.4rem; }
.ufb.ufb.ufb-narrow .ufb-big[data-len="m"] { font-size: 1.6rem; }
.ufb.ufb.ufb-narrow .ufb-big[data-len="l"] { font-size: 1.12rem; letter-spacing: -.02em; }
.ufb.ufb.ufb-narrow .ufb-xline { font-size: .86rem; margin-top: .35rem; }
.ufb.ufb.ufb-narrow .ufb-formula { font-size: .8rem; margin-top: .2rem; }
.ufb.ufb.ufb-narrow .ufb-bench .ufb-glabel, .ufb.ufb.ufb-narrow .ufb-read .ufb-glabel { margin-bottom: .25rem; }
.ufb.ufb.ufb-narrow .ufb-bnote { font-size: .78rem; line-height: 1.3; }
.ufb.ufb.ufb-narrow .ufb-mlab { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.ufb.ufb.ufb-narrow .ufb-mrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.ufb.ufb.ufb-narrow .ufb-btn { font-size: .78rem; padding: .4rem .45rem; }
.ufb.ufb.ufb-narrow .ufb-verdict { padding: .45rem .75rem .6rem; font-size: .9rem; line-height: 1.38; min-height: 0; }
.ufb.ufb.ufb-narrow .ufb-cap { padding: .6rem .75rem .8rem; }
.ufb.ufb.ufb-narrow .ufb-head { padding: .55rem .75rem; }
.ufb.ufb.ufb-narrow .ufb-stop { gap: .6rem; }
.ufb.ufb.ufb-tiny .ufb-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plot" "slider" "read" "bench" "modes"; }
.ufb.ufb.ufb-tiny .ufb-mrow { grid-template-columns: 1fr 1fr; }
.ufb.ufb.ufb-tiny .ufb-big[data-len="l"] { font-size: 1.5rem; }

@media (forced-colors: active) {
  .ufb.ufb { forced-color-adjust: none; --ufb-ink: CanvasText; --ufb-body: CanvasText; --ufb-soft: CanvasText; --ufb-grey: GrayText;
    --ufb-paper: Canvas; --ufb-ok: Highlight; --ufb-ok-text: CanvasText; --ufb-open: CanvasText; --ufb-open-text: CanvasText;
    --ufb-rule: CanvasText; --ufb-faint: Canvas; background: Canvas; color: CanvasText; }
  .ufb.ufb .ufb-gridl { stroke: GrayText; }
  .ufb.ufb .ufb-btn[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
  .ufb.ufb .ufb-lost { stroke-dasharray: 2 4; }
}
@media print {
  /* print on white paper whatever the screen theme: the light values, not the page tokens; break between blocks, not inside them */
  .ufb.ufb { print-color-adjust: exact; -webkit-print-color-adjust: exact;
    --ufb-paper: #faf8f3; --ufb-ink: #1d1d1b; --ufb-body: #2a2926; --ufb-soft: #3c3a36; --ufb-grey: #6b6a66; --ufb-rule: color-mix(in srgb, var(--ufb-ink) 16%, var(--ufb-paper)); --ufb-faint: color-mix(in srgb, var(--ufb-ink) 9%, var(--ufb-paper)); --ufb-ok: #0b7a3e; --ufb-ok-text: #0b7a3e; --ufb-open: #c8401f; --ufb-open-text: #ad371a; }
  /* keep drawings, table rows and short blocks whole; let the big wrappers break (whole-wrapper 'avoid' left near-blank pages) */
  .ufb.ufb svg, .ufb.ufb tr, .ufb.ufb li, .ufb.ufb p, .ufb.ufb dt, .ufb.ufb dd, .ufb.ufb button { break-inside: avoid; }
  .ufb.ufb .ufb-head, .ufb.ufb .ufb-glabel { break-after: avoid; }   /* a header or label stays with what it heads */
  .ufb.ufb .ufb-range, .ufb.ufb .ufb-sscale { display: none; }
}

/* a visually hidden header keeps its spans inside its 1 px box (their nowrap text otherwise ran past narrow screens, though clipped) */
.ufb.ufb .ufb-sr > span { display: block; width: 1px; overflow: hidden; }