/* Universe formation, live figure: the eight-tick pass. Every rule is scoped under the doubled root class .uft.uft.
   Colour carries one meaning each, after the page's key: cyan the record of ticks (the path and its tick numbers),
   magenta the newest post, gold a complete eight-tick pass, green the PROVED tag, ink the cube and the corners. Tokens come
   from the page's --uf-* custom properties on any ancestor, with the design-stack values as fallbacks. */
.uft.uft {
  --uft-paper: var(--uf-paper, #faf8f3); --uft-ink: var(--uf-ink, #1d1d1b); --uft-body: var(--uf-body, #2a2926);
  --uft-soft: var(--uf-soft, #3c3a36); --uft-grey: #6b6a66;
  --uft-rule: color-mix(in srgb, var(--uft-ink) 16%, var(--uft-paper));
  --uft-faint: color-mix(in srgb, var(--uft-ink) 9%, var(--uft-paper));
  --uft-rec: var(--uf-record, #009fe3); --uft-rec-text: var(--uf-record-text, #0072b5);
  --uft-event: var(--uf-event, #e6007e);
  --uft-gold: var(--uf-gold, #ffc328); --uft-gold-text: var(--uf-gold-text, #8a6100);
  --uft-ok: var(--uf-ok, #0b7a3e);
  --uft-text: "Inter", "InterVariable", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --uft-display: var(--uf-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --uft-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(--uft-body); font: 420 16px/1.42 var(--uft-text); font-optical-sizing: auto;
  border: 1px solid var(--uft-rule); background: transparent; box-sizing: border-box; text-align: left;
}
@media screen and (prefers-color-scheme: dark) {
  .uft.uft {
    --uft-paper: var(--uf-paper, #141413); --uft-ink: var(--uf-ink, #faf8f3); --uft-body: var(--uf-body, #e9e6df);
    --uft-soft: var(--uf-soft, #c9c5bc); --uft-grey: #a5a29b;
    --uft-rec: var(--uf-record, #2bb3f0); --uft-rec-text: var(--uf-record-text, #2bb3f0); --uft-event: var(--uf-event, #ff3d9e);
    --uft-gold: var(--uf-gold, #ffc328); --uft-gold-text: var(--uf-gold-text, #ffc328); --uft-ok: var(--uf-ok, #3fb37a);
  }
}
.uft.uft *, .uft.uft *::before, .uft.uft *::after { box-sizing: border-box; }
.uft.uft :is(p, span, div, label, button, ul, li, dl, dt, dd) { margin: 0; padding: 0; }
.uft.uft .uft-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; }
.uft.uft .uft-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--uft-rule); font: 700 .7rem/1.5 var(--uft-mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--uft-ink); }
.uft.uft .uft-sub { color: var(--uft-soft); font-weight: 400; }
.uft.uft .uft-glabel { font: 700 .68rem/1.4 var(--uft-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--uft-soft); margin-bottom: .4rem; }
.uft.uft .uft-sym { text-transform: none; letter-spacing: 0; font-family: var(--uft-text); font-weight: 600; color: var(--uft-ink); }
.uft.uft .uft-glabel .uft-sym { font-size: .82rem; }

/* layout */
.uft.uft .uft-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem 1.4rem; padding: 1rem 1.1rem .4rem; }
.uft.uft.uft-narrow .uft-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: .7rem .75rem .3rem; }
.uft.uft .uft-cube, .uft.uft .uft-side { min-width: 0; }
.uft.uft .uft-side { display: flex; flex-direction: column; gap: .9rem; }
.uft.uft .uft-svg { display: block; max-width: 100%; overflow: visible; }

/* cube */
.uft.uft .uft-edge { stroke: var(--uft-ink); stroke-width: 1.4; }
.uft.uft .uft-hid { stroke-dasharray: 4 4; stroke: var(--uft-grey); }
.uft.uft .uft-path { stroke: var(--uft-rec); stroke-width: 5; stroke-linecap: round; }
.uft.uft .uft-path.is-new { stroke: var(--uft-event); }
.uft.uft .uft-tick { fill: var(--uft-rec-text); font: 700 12px var(--uft-mono); paint-order: stroke; stroke: var(--uft-paper);
  stroke-width: 4px; stroke-linejoin: round; }
.uft.uft .uft-dot { fill: var(--uft-paper); stroke: var(--uft-ink); stroke-width: 2; }
.uft.uft .uft-dot.is-seen { fill: var(--uft-rec); stroke: var(--uft-ink); }
.uft.uft .uft-dot.is-done { fill: var(--uft-gold); }
.uft.uft .uft-ring { fill: none; stroke: var(--uft-event); stroke-width: 3; }
.uft.uft .uft-cl { fill: var(--uft-ink); font: 700 13px var(--uft-mono); letter-spacing: .04em; paint-order: stroke;
  stroke: var(--uft-paper); stroke-width: 4px; stroke-linejoin: round; }
.uft.uft .uft-key { font-size: .82rem; color: var(--uft-soft); margin-top: .3rem; }
.uft.uft .uft-hint { font-size: .8rem; color: var(--uft-soft); margin-top: .35rem; }
.uft.uft sup { font-size: .7em; line-height: 0; vertical-align: .45em; }

/* controls */
.uft.uft .uft-prow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.uft.uft .uft-erow, .uft.uft .uft-trow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }
.uft.uft .uft-btn { font: 600 .84rem/1.2 var(--uft-text); color: var(--uft-ink); background: transparent; text-align: left;
  border: 1px solid var(--uft-ink); border-radius: 0; padding: .5rem .65rem; cursor: pointer; min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent; }
.uft.uft .uft-post { border-left: 4px solid var(--uft-event); }
.uft.uft .uft-small { min-height: 2.75rem; min-width: 2.75rem; text-align: center; }
.uft.uft .uft-btn:hover { background: var(--uft-faint); }
.uft.uft .uft-btn:disabled { color: var(--uft-grey); border-color: var(--uft-grey); cursor: default; background: transparent; }
.uft.uft .uft-btn:focus-visible, .uft.uft .uft-range:focus-visible { outline: 2px solid var(--uft-ink); outline-offset: 3px; }
.uft.uft .uft-tname { font: 700 .78rem/1.3 var(--uft-mono); letter-spacing: .06em; color: var(--uft-ink); flex: 1 1 10rem; }

/* readouts */
.uft.uft .uft-rrow { display: flex; gap: 1.6rem; align-items: flex-end; }
.uft.uft .uft-big { font: 860 2.9rem/.9 var(--uft-display); letter-spacing: -.045em; color: var(--uft-ink); font-variant-numeric: tabular-nums; }
.uft.uft .uft-mid { font: 780 1.35rem/1.05 var(--uft-display); letter-spacing: -.02em; color: var(--uft-ink); }
.uft.uft.uft-done .uft-mid { color: var(--uft-gold-text); }
.uft.uft .uft-sqs { display: flex; gap: 3px; margin-top: .35rem; }
.uft.uft .uft-sq { width: 13px; height: 13px; border: 1.5px solid var(--uft-ink); }
.uft.uft .uft-sq.is-seen { background: var(--uft-rec); }
.uft.uft .uft-sq.is-done { background: var(--uft-gold); }
.uft.uft .uft-dl { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: .3rem .9rem; margin-top: .8rem; font-size: .9rem; }
.uft.uft .uft-dl dt { color: var(--uft-soft); }
.uft.uft .uft-dl dd { color: var(--uft-ink); font-weight: 600; }
.uft.uft .uft-dl dd.is-done { color: var(--uft-gold-text); }
.uft.uft .uft-note { margin-top: .5rem; font-size: .84rem; color: var(--uft-soft); }

/* counts */
.uft.uft .uft-counts { margin: .6rem 1.1rem 0; padding-top: .8rem; border-top: 1px solid var(--uft-rule); }
.uft.uft .uft-ctop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.uft.uft .uft-ctop .uft-glabel { margin: 0; flex: 0 1 auto; min-width: 0; }
.uft.uft .uft-range { flex: 1 1 12rem; min-width: 0; accent-color: var(--uft-ink); height: 1.8rem; cursor: pointer; }
.uft.uft .uft-cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem 1.2rem; margin-top: .6rem; }
.uft.uft .uft-cval { font: 820 1.25rem/1.1 var(--uft-display); letter-spacing: -.02em; color: var(--uft-ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.uft.uft .uft-cval.is-gold { color: var(--uft-gold-text); }
.uft.uft .uft-clab { font-size: .8rem; color: var(--uft-soft); margin-top: .2rem; line-height: 1.3; }
.uft.uft .uft-t8 { margin-top: .9rem; }
.uft.uft .uft-t8 summary { cursor: pointer; list-style: revert; margin-bottom: .45rem; min-height: 1.6rem; }
.uft.uft .uft-t8 summary:focus-visible { outline: 2px solid var(--uft-ink); outline-offset: 3px; }
.uft.uft .uft-t8 ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .3rem 1.2rem; font-size: .88rem; }
.uft.uft .uft-t8 b { font-weight: 780; color: var(--uft-ink); font-variant-numeric: tabular-nums; }

.uft.uft .uft-verdict { padding: .8rem 1.1rem .4rem; font-size: 1rem; color: var(--uft-ink); min-height: 3.2em; max-width: 54em; }
.uft.uft .uft-status { padding: .2rem 1.1rem .9rem; font-size: .86rem; color: var(--uft-soft); max-width: 60em; }
.uft.uft .uft-tagp { font: 700 .66rem/1 var(--uft-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--uft-ok);
  border: 1px solid var(--uft-ok); padding: .14rem .3rem; margin-right: .3rem; vertical-align: .1em; }
.uft.uft .uft-cap { padding: .8rem 1.1rem 1rem; border-top: 1px solid var(--uft-rule); }
.uft.uft .uft-cap p { font-size: .92rem; color: var(--uft-soft); max-width: 60em; }
.uft.uft.uft-narrow .uft-cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uft.uft.uft-narrow .uft-counts { margin: .5rem .75rem 0; }
.uft.uft.uft-narrow .uft-verdict { padding: .6rem .75rem .3rem; font-size: .94rem; }
.uft.uft.uft-narrow .uft-status { padding: .2rem .75rem .8rem; }
.uft.uft.uft-narrow .uft-cap { padding: .6rem .75rem .8rem; }
.uft.uft.uft-narrow .uft-head { padding: .55rem .75rem; }
.uft.uft.uft-narrow .uft-prow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uft.uft.uft-narrow .uft-big { font-size: 2.4rem; }

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

/* a visually hidden header keeps its spans inside its 1 px box (their nowrap text otherwise ran past narrow screens, though clipped) */
.uft.uft .uft-sr > span { display: block; width: 1px; overflow: hidden; }
/* the counts say their point first; the two counts not about the cube are set smaller */
.uft.uft .uft-clead { margin: .5rem 0 0; font-size: .95rem; line-height: 1.4; color: var(--uft-ink); max-width: 56em; }
.uft.uft .uft-cell.is-minor .uft-cval { font-size: 1rem; color: var(--uft-soft); }
.uft.uft .uft-cell.is-minor .uft-clab { font-size: .75rem; }