/* The present as a chain. Every rule is scoped under the doubled root class .rbv5.rbv5.
   Colour carries one meaning each: cyan the three classes of the four motions, ink the 64-line class, mid grey the 44-line class
   (hatching means neutral weight elsewhere on the page, so none here), faint outline the lines the present leaves, magenta the
   present itself, ink strokes and arrows the stationary current. */
.rbv5.rbv5 {
  --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)); /* outlines of empty, pressable cells: at least 3:1 */
  --rbv-mid: color-mix(in srgb, var(--rbv-ink) 45%, var(--rbv-paper));
  --rbv-grey: color-mix(in srgb, var(--rbv-ink) 12%, 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) {
  .rbv5.rbv5 { --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-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); }
}
.rbv5.rbv5 *, .rbv5.rbv5 *::before, .rbv5.rbv5 *::after { box-sizing: border-box; }
.rbv5.rbv5 :is(p, span, b, i, button, table) { margin: 0; }
.rbv5.rbv5 i { font-style: normal; }
.rbv5.rbv5 .rbv5-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; }
.rbv5.rbv5 .rbv5-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); }
.rbv5.rbv5 .rbv5-sub { color: var(--rbv-soft); }
.rbv5.rbv5 .rbv5-lede { padding: 1rem 1.1rem 0; max-width: 40rem; }
.rbv5.rbv5 .rbv5-glabel { font: 700 .66rem/1.4 var(--rbv-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--rbv-soft); }
.rbv5.rbv5 :is(button):focus-visible { outline: 3px solid var(--rbv-ink); outline-offset: 2px; }
.rbv5.rbv5 .rbv5-body { display: grid; grid-template-columns: min-content minmax(0, 1fr); grid-template-areas: "g p" "c c"; gap: 1.2rem 2rem; padding: 1rem 1.1rem 1.1rem; align-items: start; }
.rbv5.rbv5 .rbv5-body > .rbv5-col:nth-child(1) { grid-area: g; }
.rbv5.rbv5 .rbv5-body > .rbv5-col:nth-child(2) { grid-area: p; }
.rbv5.rbv5 .rbv5-body > .rbv5-circ { grid-area: c; border-top: 1px solid var(--rbv-rule); padding-top: .9rem; }
.rbv5.rbv5.rbv5-stack .rbv5-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "g" "p" "c"; }
.rbv5.rbv5 .rbv5-col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.rbv5.rbv5 .rbv5-row { display: flex; flex-wrap: wrap; gap: .35rem .4rem; align-items: center; }
.rbv5.rbv5 .rbv5-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) { .rbv5.rbv5 .rbv5-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in srgb, var(--rbv-ink) 7%, transparent); } }
.rbv5.rbv5 :is(.rbv5-btn:disabled, .rbv5-btn[aria-disabled="true"]) { color: var(--rbv-hair); border-color: var(--rbv-faint); cursor: default; }
.rbv5.rbv5 .rbv5-go:not(:disabled):not([aria-disabled="true"]) { border-width: 2px; font-weight: 750; padding: calc(.45rem - 1px) calc(.65rem - 1px); }
/* the 256 lines */
.rbv5.rbv5 .rbv5-grid { display: grid; grid-template-columns: auto auto; gap: 10px 12px; }
.rbv5.rbv5 .rbv5-blab { display: block; font: 700 .86rem/18px var(--rbv-mono); letter-spacing: .12em; color: var(--rbv-ink); }
.rbv5.rbv5 .rbv5-g8 { display: grid; grid-template-columns: repeat(8, 24px); gap: 2px; }
.rbv5.rbv5 .rbv5-sq { width: 24px; height: 24px; padding: 0; border: 1px solid var(--rbv-cellb); border-radius: 0; background: transparent; cursor: pointer; position: relative; touch-action: manipulation; }
.rbv5.rbv5 .rbv5-sq.rbv5-mo { background: var(--rbv-cyan); border-color: var(--rbv-cyan); }
.rbv5.rbv5 .rbv5-sq.rbv5-c64 { background: var(--rbv-ink); border-color: var(--rbv-ink); }
.rbv5.rbv5 .rbv5-sq.rbv5-c44 { background: radial-gradient(circle, var(--rbv-ink) 1.3px, transparent 1.8px) 0 0 / 5px 5px, var(--rbv-paper); border-color: var(--rbv-mid); }
.rbv5.rbv5 .rbv5-sq.rbv5-trail::after { content: ""; position: absolute; inset: 4px; background: var(--rbv-paper); border: 2px solid var(--rbv-soft); border-radius: 50%; }
.rbv5.rbv5 .rbv5-sq.rbv5-cur { box-shadow: 0 0 0 2px var(--rbv-paper), 0 0 0 5px var(--rbv-magenta); z-index: 2; }
.rbv5.rbv5 .rbv5-key { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--rbv-soft); }
.rbv5.rbv5 .rbv5-key b { font: 700 .64rem/1.4 var(--rbv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbv-ink); }
.rbv5.rbv5 .rbv5-sw { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: .45rem; border: 1px solid var(--rbv-faint); }
.rbv5.rbv5 .rbv5-sw.rbv5-mo { background: var(--rbv-cyan); border-color: var(--rbv-cyan); }
.rbv5.rbv5 .rbv5-sw.rbv5-c64 { background: var(--rbv-ink); border-color: var(--rbv-ink); }
.rbv5.rbv5 .rbv5-sw.rbv5-c44 { background: radial-gradient(circle, var(--rbv-ink) 1.1px, transparent 1.6px) 0 0 / 4px 4px, var(--rbv-paper); border-color: var(--rbv-mid); }
.rbv5.rbv5 .rbv5-small { font-size: .8rem; line-height: 1.35; color: var(--rbv-soft); max-width: 40rem; }
/* the present */
.rbv5.rbv5 .rbv5-now { font-size: .92rem; min-height: 2.6em; }
.rbv5.rbv5 .rbv5-now b { font: 700 .66rem/1.4 var(--rbv-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--rbv-magenta-text); }
.rbv5.rbv5 .rbv5-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: .6rem 1rem; }
.rbv5.rbv5 .rbv5-n { display: flex; flex-direction: column; gap: .25rem; }
.rbv5.rbv5 .rbv5-big { font: 860 1.9rem/.9 var(--rbv-display); letter-spacing: -.04em; color: var(--rbv-ink); font-variant-numeric: tabular-nums lining-nums; }
.rbv5.rbv5 .rbv5-cap { font-size: .8rem; line-height: 1.3; color: var(--rbv-soft); }
.rbv5.rbv5 .rbv5-tchart { width: 100%; max-width: 420px; height: auto; }
.rbv5.rbv5 .rbv5-ax { stroke: var(--rbv-faint); stroke-width: 1; }
.rbv5.rbv5 .rbv5-tk { font: 400 10px var(--rbv-mono); fill: var(--rbv-soft); }
.rbv5.rbv5 .rbv5-tline { fill: none; stroke: var(--rbv-ink); stroke-width: 2; }
.rbv5.rbv5 .rbv5-bound { fill: none; stroke: var(--rbv-soft); stroke-width: 1.2; stroke-dasharray: 4 3; }
/* the circulations */
.rbv5.rbv5 .rbv5-walks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem 2rem; }
.rbv5.rbv5 .rbv5-walk { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.rbv5.rbv5 .rbv5-wt { font-size: .84rem; color: var(--rbv-body); }
.rbv5.rbv5 .rbv5-wsvg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.rbv5.rbv5 .rbv5-loop { fill: none; stroke: var(--rbv-faint); stroke-width: 6; }
.rbv5.rbv5 .rbv5-flow { fill: none; stroke: var(--rbv-ink); stroke-width: 2.5; }
@media (prefers-reduced-motion: no-preference) { .rbv5.rbv5.rbv5-flowon .rbv5-flow { stroke-dasharray: 0 12; stroke-linecap: round; stroke-width: 4; animation: rbv5-flow 6s linear infinite; } } /* only after Play the flow */ /* moving dots while it moves (dashed means a bound); solid otherwise */
@keyframes rbv5-flow { to { stroke-dashoffset: -72; } }
.rbv5.rbv5 .rbv5-arrow { fill: var(--rbv-ink); }
.rbv5.rbv5 .rbv5-node { fill: var(--rbv-paper); stroke: var(--rbv-ink); stroke-width: 1.4; }
.rbv5.rbv5 .rbv5-nl { font: 700 12px var(--rbv-mono); fill: var(--rbv-ink); }
.rbv5.rbv5 .rbv5-tbl { border-collapse: collapse; font: 400 .74rem/1.3 var(--rbv-mono); color: var(--rbv-body); }
.rbv5.rbv5 .rbv5-tbl th { font: 700 .62rem/1.3 var(--rbv-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rbv-soft); text-align: left; padding: .15rem .6rem .15rem 0; }
.rbv5.rbv5 .rbv5-tbl td { padding: .12rem .6rem .12rem 0; border-top: 1px solid var(--rbv-rule); font-variant-numeric: tabular-nums; }
.rbv5.rbv5 .rbv5-caption { padding: .9rem 1.1rem 1rem; border-top: 1px solid var(--rbv-rule); font-size: .9rem; line-height: 1.45; }
.rbv5.rbv5 .rbv5-caption p { max-width: 40rem; }
.rbv5.rbv5 .rbv5-caption p + p { margin-top: .5rem; }
.rbv5.rbv5 .rbv5-fine { font: 400 .7rem/1.4 var(--rbv-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rbv-soft); }
.rbv5.rbv5.rbv5-narrow .rbv5-head, .rbv5.rbv5.rbv5-narrow .rbv5-lede, .rbv5.rbv5.rbv5-narrow .rbv5-body, .rbv5.rbv5.rbv5-narrow .rbv5-caption { padding-left: .8rem; padding-right: .8rem; }
.rbv5.rbv5.rbv5-narrow .rbv5-g8 { grid-template-columns: repeat(8, 15px); }
.rbv5.rbv5.rbv5-narrow .rbv5-sq { width: 15px; height: 15px; }
.rbv5.rbv5.rbv5-narrow .rbv5-grid { display: flex; flex-wrap: wrap; gap: 8px 8px; }
@media (forced-colors: active) {
  .rbv5.rbv5 { --rbv-paper: Canvas; --rbv-ink: CanvasText; --rbv-body: CanvasText; --rbv-soft: CanvasText; --rbv-hair: GrayText; --rbv-rule: CanvasText; --rbv-faint: GrayText;
    --rbv-cyan: Highlight; --rbv-cyan-text: CanvasText; --rbv-magenta: Highlight; --rbv-magenta-text: CanvasText; }
  .rbv5.rbv5 :is(.rbv5-sq, .rbv5-sw) { forced-color-adjust: none; }
  .rbv5.rbv5 .rbv5-sq { background: Canvas; border-color: GrayText; }
  .rbv5.rbv5 :is(.rbv5-sq, .rbv5-sw).rbv5-mo { background: Highlight; border-color: Highlight; }
  .rbv5.rbv5 :is(.rbv5-sq, .rbv5-sw).rbv5-c64 { background: CanvasText; border-color: CanvasText; }
  .rbv5.rbv5 :is(.rbv5-sq, .rbv5-sw).rbv5-c44 { background: radial-gradient(circle, CanvasText 1.2px, Canvas 1.6px) 0 0 / 4px 4px; border-color: CanvasText; }
  .rbv5.rbv5 .rbv5-sq.rbv5-cur { box-shadow: 0 0 0 2px Canvas, 0 0 0 5px Highlight; }
}
@media print { .rbv5.rbv5 { --rbv-paper: #fff; --rbv-ink: #000; --rbv-body: #000; break-inside: avoid; } .rbv5.rbv5 .rbv5-flow { animation: none; stroke-dasharray: none; } }
/* narrow: overview grid plus one large block */
.rbv5.rbv5 .rbv5-zoom { display: none; }
.rbv5.rbv5.rbv5-narrow .rbv5-zoom { display: flex; flex-direction: column; gap: .5rem; }
.rbv5.rbv5.rbv5-narrow .rbv5-grid { pointer-events: none; }
.rbv5.rbv5 .rbv5-zg { display: grid; grid-template-columns: 20px repeat(8, minmax(24px, 32px)); gap: 6px; align-items: center; }
.rbv5.rbv5 .rbv5-zl { font: 400 .58rem/1 var(--rbv-mono); color: var(--rbv-soft); text-align: center; }
.rbv5.rbv5 .rbv5-zr { text-align: right; padding-right: 2px; }
.rbv5.rbv5 .rbv5-zg .rbv5-sq { width: 100%; height: auto; aspect-ratio: 1; }
.rbv5.rbv5 .rbv5-ztab { min-width: 3rem; font-family: var(--rbv-mono); letter-spacing: .1em; }
.rbv5.rbv5 .rbv5-ztab[aria-pressed="true"] { background: var(--rbv-ink); color: var(--rbv-paper); }
@media (forced-colors: active) { .rbv5.rbv5 .rbv5-ztab[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; } }

/* inactive controls keep focus; screen-reader-only titles are not read in capitals */
.rbv5.rbv5 .rbv5-sr, .rbv5.rbv5 .rbv5-sr * { text-transform: none; }
.rbv5.rbv5 .rbv5-flowbtn { align-self: flex-start; }
.rbv5.rbv5 .rbv5-flowbtn[aria-pressed="true"] { background: var(--rbv-ink); color: var(--rbv-paper); }
.rbv5.rbv5 .rbv5-walk { overflow-x: auto; }
.rbv5.rbv5 .rbv5-small sup { font-size: .82em; line-height: 0; vertical-align: .45em; }
.rbv5.rbv5 .rbv5-irrd summary { cursor: pointer; font-size: .8rem; color: var(--rbv-ink); min-height: 24px; display: flex; align-items: center; gap: .35rem; list-style: none; }
.rbv5.rbv5 .rbv5-irrd summary::-webkit-details-marker { display: none; }
.rbv5.rbv5 .rbv5-irrd summary::before { content: '▸'; content: '▸' / ''; font-size: .8em; }
.rbv5.rbv5 .rbv5-irrd[open] summary::before { content: '▾'; content: '▾' / ''; }
.rbv5.rbv5 .rbv5-irrd summary:focus-visible { outline: 2px solid var(--rbv-ink); outline-offset: 2px; }
.rbv5.rbv5 .rbv5-sw.rbv5-ring { background: transparent; border: 0; box-shadow: inset 0 0 0 2.5px var(--rbv-magenta); }
@media (forced-colors: active) { .rbv5.rbv5 .rbv5-sw.rbv5-ring { box-shadow: inset 0 0 0 2.5px Highlight; } }
/* phones: the trail of the present reads on dark and light squares alike */
.rbv5.rbv5.rbv5-narrow .rbv5-grid .rbv5-sq.rbv5-trail::after { inset: 2px; border: 2px solid var(--rbv-ink); }