/* The record decides. Every rule is scoped under the doubled root class .rbv4.rbv4.
   Colour carries one meaning each: cyan only the weight on the four motions (the squares' fill); ink outlines and the thick ink
   line the records that have written only the loop current's label; grey the records that wrote another label (weight 0 from
   then on); magenta the record you chose; dashed lines only the proved bound; a thin solid line the starting weight w. */
.rbv4.rbv4 {
  --rbv-paper: var(--rbt-paper, #faf8f3); --rbv-ink: var(--rbt-ink, #1d1d1b); --rbv-body: var(--rbt-body, #2a2926);
  --rbv-soft: var(--rbt-soft, #3c3a36); --rbv-hair: var(--rbt-hair, #8a8a8a);
  --rbv-rule: color-mix(in srgb, var(--rbv-ink) 16%, var(--rbv-paper));
  --rbv-faint: color-mix(in srgb, var(--rbv-ink) 26%, var(--rbv-paper));
  --rbv-cellb: color-mix(in srgb, var(--rbv-ink) 52%, var(--rbv-paper));
  --rbv-grey: color-mix(in srgb, var(--rbv-ink) 12%, var(--rbv-paper));
  --rbv-off: color-mix(in srgb, var(--rbv-ink) 40%, var(--rbv-paper));
  --rbv-cyan: var(--rbt-kept, #009fe3); --rbv-cyan-text: var(--rbt-kept-text, #00739f);
  --rbv-magenta: var(--rbt-rec, #e6007e); --rbv-magenta-text: var(--rbt-rec-text, #c0006a);
  --rbv-text: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rbv-display: "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --rbv-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0; padding: 0; color: var(--rbv-body); font: 420 16px/1.42 var(--rbv-text); font-optical-sizing: auto;
  border: 1px solid var(--rbv-rule); background: transparent; box-sizing: border-box; min-width: 0;
}
@media (prefers-color-scheme: dark) {
  .rbv4.rbv4 { --rbv-paper: var(--rbt-paper, #141413); --rbv-ink: var(--rbt-ink, #faf8f3); --rbv-body: var(--rbt-body, #e9e6df); --rbv-soft: var(--rbt-soft, #c9c5bc);
    --rbv-grey: color-mix(in srgb, var(--rbv-ink) 15%, var(--rbv-paper)); --rbv-faint: color-mix(in srgb, var(--rbv-ink) 30%, var(--rbv-paper));
    --rbv-off: color-mix(in srgb, var(--rbv-ink) 42%, var(--rbv-paper));
    --rbv-cyan: var(--rbt-kept, #2bb3f0); --rbv-cyan-text: var(--rbt-kept-text, #2bb3f0); --rbv-magenta: var(--rbt-rec, #ff3d9e); --rbv-magenta-text: var(--rbt-rec-text, #ff6fb6); }
}
.rbv4.rbv4 *, .rbv4.rbv4 *::before, .rbv4.rbv4 *::after { box-sizing: border-box; }
.rbv4.rbv4 :is(p, span, b, i, button, ol, li, label) { margin: 0; }
.rbv4.rbv4 i { font-style: normal; }
.rbv4.rbv4 .rbv4-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; }
.rbv4.rbv4 .rbv4-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .75rem 1.1rem; border-bottom: 1px solid var(--rbv-rule);
  font: 700 .7rem/1.5 var(--rbv-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--rbv-ink); }
.rbv4.rbv4 .rbv4-sub { color: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-lede { padding: 1rem 1.1rem 0; max-width: 40rem; }
.rbv4.rbv4 .rbv4-glabel { font: 700 .66rem/1.4 var(--rbv-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--rbv-soft); }
.rbv4.rbv4 :is(button, input):focus-visible { outline: 3px solid var(--rbv-ink); outline-offset: 2px; }
/* controls */
.rbv4.rbv4 .rbv4-ctl { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem .9rem; border-bottom: 1px solid var(--rbv-rule); }
.rbv4.rbv4 .rbv4-row { display: flex; flex-wrap: wrap; gap: .35rem .4rem; align-items: center; }
.rbv4.rbv4 .rbv4-btn { font: 600 .82rem/1.2 var(--rbv-text); color: var(--rbv-ink); background: transparent; border: 1px solid var(--rbv-ink); border-radius: 0;
  padding: .45rem .65rem; min-height: 40px; cursor: pointer; touch-action: manipulation; }
@media (hover: hover) { .rbv4.rbv4 .rbv4-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--rbv-ink) 7%, transparent); } }
.rbv4.rbv4 :is(.rbv4-btn:disabled, .rbv4-btn[aria-disabled="true"]) { color: var(--rbv-hair); border-color: var(--rbv-faint); cursor: default; }
.rbv4.rbv4 .rbv4-go:not(:disabled):not([aria-disabled="true"]) { border-width: 2px; font-weight: 750; padding: calc(.45rem - 1px) calc(.65rem - 1px); }
.rbv4.rbv4 .rbv4-pre { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; }
.rbv4.rbv4 .rbv4-pre span { font: 400 .72rem/1.3 var(--rbv-mono); color: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-rb b { font: 700 .8rem/1.2 var(--rbv-mono); letter-spacing: .06em; }
.rbv4.rbv4 .rbv4-rb span { font-weight: 420; color: var(--rbv-soft); }
.rbv4.rbv4 :is(.rbv4-pre, .rbv4-rb)[aria-pressed="true"] { background: var(--rbv-ink); color: var(--rbv-paper); }
.rbv4.rbv4 :is(.rbv4-pre, .rbv4-rb)[aria-pressed="true"] span { color: var(--rbv-paper); }
.rbv4.rbv4 .rbv4-rl { font: 700 .66rem/1.4 var(--rbv-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--rbv-soft); margin-right: .3rem; }
.rbv4.rbv4 .rbv4-wrow { gap: .3rem 1rem; }
.rbv4.rbv4 .rbv4-wl { font-size: .9rem; color: var(--rbv-ink); font-variant-numeric: tabular-nums; min-width: 22rem; }
.rbv4.rbv4 .rbv4-range { width: min(22rem, 100%); height: 40px; accent-color: var(--rbv-cyan); margin: 0; touch-action: pan-y; }
.rbv4.rbv4 .rbv4-small { font-size: .8rem; line-height: 1.35; color: var(--rbv-soft); max-width: 40rem; }
/* body */
.rbv4.rbv4 .rbv4-body { display: grid; grid-template-columns: min-content minmax(0, 1fr); gap: 1.2rem 2rem; padding: 1rem 1.1rem 1.1rem; align-items: start; }
.rbv4.rbv4.rbv4-stack .rbv4-body { grid-template-columns: minmax(0, 1fr); }
.rbv4.rbv4 .rbv4-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.rbv4.rbv4 .rbv4-col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.rbv4.rbv4 .rbv4-now { font-size: .92rem; min-height: 1.5em; font-variant-numeric: tabular-nums; }
.rbv4.rbv4 .rbv4-now b { font: 700 .66rem/1.4 var(--rbv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbv-ink); }
/* the 100 records */
.rbv4.rbv4 .rbv4-grid { display: grid; grid-template-columns: repeat(10, 30px); gap: 3px; width: max-content; }
.rbv4.rbv4 .rbv4-sq { width: 30px; height: 30px; padding: 0; border-radius: 0; cursor: pointer; position: relative; overflow: hidden; touch-action: manipulation;
  border: 2px solid var(--rbv-ink); background: var(--rbv-paper); }
.rbv4.rbv4 .rbv4-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--rbv-cyan); }
.rbv4.rbv4 .rbv4-sq.rbv4-off { border: 1px solid var(--rbv-cellb); background: var(--rbv-grey); }
.rbv4.rbv4 .rbv4-sq.rbv4-cur { box-shadow: 0 0 0 2px var(--rbv-paper), 0 0 0 5px var(--rbv-magenta); z-index: 2; overflow: visible; }
.rbv4.rbv4 .rbv4-key { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-key b { font: 700 .64rem/1.4 var(--rbv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbv-ink); }
.rbv4.rbv4 .rbv4-sw { display: inline-block; position: relative; overflow: hidden; width: 14px; height: 14px; vertical-align: -2px; margin-right: .45rem; border: 2px solid var(--rbv-ink); background: var(--rbv-paper); }
.rbv4.rbv4 .rbv4-sw .rbv4-fill { height: 55%; }
.rbv4.rbv4 .rbv4-sw.rbv4-off { border: 1px solid var(--rbv-off); background: var(--rbv-grey); }
/* the chosen record */
.rbv4.rbv4 .rbv4-one { display: flex; flex-direction: column; gap: .35rem; max-width: 22rem; border-top: 1px solid var(--rbv-rule); padding-top: .55rem; }
.rbv4.rbv4 .rbv4-oneh { font-size: .9rem; }
.rbv4.rbv4 .rbv4-oneh b { font: 700 .66rem/1.4 var(--rbv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbv-magenta-text); }
.rbv4.rbv4 .rbv4-labs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem .55rem; font: 400 .74rem/1.45 var(--rbv-mono); color: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-labs li { white-space: nowrap; }
.rbv4.rbv4 .rbv4-labs li.rbv4-lon { color: var(--rbv-ink); font-weight: 700; }
.rbv4.rbv4 .rbv4-onew { font-size: .9rem; }
.rbv4.rbv4 .rbv4-onew b { font-weight: 750; color: var(--rbv-ink); font-variant-numeric: tabular-nums; }
/* charts */
.rbv4.rbv4 .rbv4-chart { width: 100%; max-width: 560px; height: auto; overflow: visible; }
.rbv4.rbv4 .rbv4-ax { stroke: var(--rbv-faint); stroke-width: 1; }
.rbv4.rbv4 .rbv4-tk { font: 400 10px var(--rbv-mono); fill: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-tw { font-weight: 700; fill: var(--rbv-ink); }
.rbv4.rbv4 .rbv4-wline { stroke: var(--rbv-soft); stroke-width: .8; }
.rbv4.rbv4 .rbv4-drop { fill: none; stroke: var(--rbv-off); stroke-linejoin: round; }
.rbv4.rbv4 .rbv4-trunk { fill: none; stroke: var(--rbv-ink); stroke-linejoin: round; stroke-linecap: round; }
.rbv4.rbv4 .rbv4-selp { fill: none; stroke: var(--rbv-magenta); stroke-width: 1.6; stroke-linejoin: round; }
.rbv4.rbv4 .rbv4-seld { fill: var(--rbv-magenta); stroke: var(--rbv-paper); stroke-width: 1.5; }
.rbv4.rbv4 .rbv4-bound { fill: none; stroke: var(--rbv-soft); stroke-width: 1.4; stroke-dasharray: 5 3; }
.rbv4.rbv4 .rbv4-over { fill: none; stroke: var(--rbv-ink); stroke-width: 2; }
.rbv4.rbv4 .rbv4-overd { fill: var(--rbv-ink); }
.rbv4.rbv4 .rbv4-overn { stroke: var(--rbv-paper); stroke-width: 1.5; }
.rbv4.rbv4 .rbv4-tz { font: 400 11px var(--rbv-text); fill: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-ncur { stroke: var(--rbv-faint); stroke-width: 1; }
.rbv4.rbv4 .rbv4-nums { display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.rbv4.rbv4 .rbv4-nums > * { flex: 1 1 11rem; min-width: 0; }
.rbv4.rbv4 .rbv4-n { display: flex; flex-direction: column; gap: .25rem; }
.rbv4.rbv4 .rbv4-big { font: 860 1.7rem/.95 var(--rbv-display); letter-spacing: -.03em; color: var(--rbv-ink); font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.rbv4.rbv4 .rbv4-cap { font-size: .8rem; line-height: 1.3; color: var(--rbv-soft); }
.rbv4.rbv4 .rbv4-caption { padding: .9rem 1.1rem 1rem; border-top: 1px solid var(--rbv-rule); font-size: .9rem; line-height: 1.45; }
.rbv4.rbv4 .rbv4-caption p { max-width: 40rem; }
.rbv4.rbv4 .rbv4-caption p + p { margin-top: .5rem; }
.rbv4.rbv4 .rbv4-fine { font: 400 .7rem/1.4 var(--rbv-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rbv-soft); }
/* narrow */
.rbv4.rbv4.rbv4-narrow :is(.rbv4-head, .rbv4-lede, .rbv4-ctl, .rbv4-body, .rbv4-caption) { padding-left: .8rem; padding-right: .8rem; }
.rbv4.rbv4.rbv4-narrow .rbv4-grid { grid-template-columns: repeat(10, minmax(24px, 27px)); gap: 2px; width: auto; }
.rbv4.rbv4.rbv4-narrow .rbv4-sq { width: 100%; height: auto; aspect-ratio: 1; }
.rbv4.rbv4.rbv4-narrow .rbv4-wl { min-width: 0; }
@media (forced-colors: active) {
  .rbv4.rbv4 { --rbv-paper: Canvas; --rbv-ink: CanvasText; --rbv-body: CanvasText; --rbv-soft: CanvasText; --rbv-hair: GrayText; --rbv-rule: CanvasText; --rbv-faint: GrayText;
    --rbv-off: GrayText; --rbv-grey: Canvas; --rbv-cyan: Highlight; --rbv-cyan-text: CanvasText; --rbv-magenta: Highlight; --rbv-magenta-text: CanvasText; }
  .rbv4.rbv4 :is(.rbv4-sq, .rbv4-sw, .rbv4-fill) { forced-color-adjust: none; }
  .rbv4.rbv4 :is(.rbv4-sq, .rbv4-sw) { background: Canvas; border-color: CanvasText; }
  .rbv4.rbv4 .rbv4-fill { background: Highlight; }
  .rbv4.rbv4 :is(.rbv4-sq, .rbv4-sw).rbv4-off { background: Canvas; border: 1px dotted GrayText; }
  .rbv4.rbv4 .rbv4-sq.rbv4-cur { box-shadow: 0 0 0 2px Canvas, 0 0 0 5px CanvasText; }
  .rbv4.rbv4 :is(.rbv4-pre, .rbv4-rb)[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .rbv4.rbv4 :is(.rbv4-pre, .rbv4-rb)[aria-pressed="true"] span { color: HighlightText; }
  .rbv4.rbv4 :is(.rbv4-trunk) { stroke: CanvasText; }
  .rbv4.rbv4 :is(.rbv4-selp) { stroke: CanvasText; stroke-width: 2; }
  .rbv4.rbv4 .rbv4-seld { fill: CanvasText; }
}
@media print { .rbv4.rbv4 { --rbv-paper: #fff; --rbv-ink: #000; --rbv-body: #000; break-inside: avoid; } }

/* inactive controls keep focus; screen-reader-only titles are not read in capitals */
.rbv4.rbv4 .rbv4-sr, .rbv4.rbv4 .rbv4-sr * { text-transform: none; }
.rbv4.rbv4 .rbv4-small sup { font-size: .82em; line-height: 0; vertical-align: .45em; }
.rbv4.rbv4 .rbv4-approx { font: 400 .8rem/1.2 var(--rbv-mono); color: var(--rbv-soft); font-variant-numeric: tabular-nums; }
.rbv4.rbv4 .rbv4-labsd summary { cursor: pointer; font-size: .85rem; color: var(--rbv-ink); min-height: 24px; display: flex; align-items: center; gap: .35rem; }
.rbv4.rbv4 .rbv4-labsd summary::-webkit-details-marker { display: none; }
.rbv4.rbv4 .rbv4-labsd summary::before { content: '▸'; content: '▸' / ''; font-size: .8em; }
.rbv4.rbv4 .rbv4-labsd[open] summary::before { content: '▾'; content: '▾' / ''; }
.rbv4.rbv4 .rbv4-labsd summary { list-style: none; }
.rbv4.rbv4 .rbv4-labsd summary:focus-visible { outline: 2px solid var(--rbv-ink); outline-offset: 2px; }
.rbv4.rbv4 .rbv4-big sup { font-size: .5em; line-height: 0; vertical-align: .9em; }