/* Universe formation, live figure: the price of the first event. Every rule is scoped under the doubled root class
   .ufp.ufp. Colour carries one meaning each, after the page's key: magenta the post and its flux (the first event),
   gold the golden price √5 − 2, ink the bonds of the carrier, grey dashes the bonds that could be added. Tokens come from
   the page's --uf-* custom properties on any ancestor, with the design-stack values as fallbacks. */
.ufp.ufp {
  --ufp-paper: var(--uf-paper, #faf8f3); --ufp-ink: var(--uf-ink, #1d1d1b); --ufp-body: var(--uf-body, #2a2926);
  --ufp-soft: var(--uf-soft, #3c3a36); --ufp-grey: #6b6a66;
  --ufp-rule: color-mix(in srgb, var(--ufp-ink) 16%, var(--ufp-paper));
  --ufp-faint: color-mix(in srgb, var(--ufp-ink) 9%, var(--ufp-paper));
  --ufp-event: var(--uf-event, #e6007e); --ufp-event-text: #c0006a;
  --ufp-gold: var(--uf-gold, #ffc328); --ufp-gold-text: var(--uf-gold-text, #8a6100);
  --ufp-ok: var(--uf-ok, #0b7a3e);
  --ufp-text: "Inter", "InterVariable", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ufp-display: var(--uf-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --ufp-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(--ufp-body); font: 420 16px/1.42 var(--ufp-text); font-optical-sizing: auto;
  border: 1px solid var(--ufp-rule); background: transparent; box-sizing: border-box; text-align: left;
}
@media screen and (prefers-color-scheme: dark) {
  .ufp.ufp {
    --ufp-paper: var(--uf-paper, #141413); --ufp-ink: var(--uf-ink, #faf8f3); --ufp-body: var(--uf-body, #e9e6df);
    --ufp-soft: var(--uf-soft, #c9c5bc); --ufp-grey: #a5a29b;
    --ufp-event: var(--uf-event, #ff3d9e); --ufp-event-text: #ff6fb6;
    --ufp-gold: var(--uf-gold, #ffc328); --ufp-gold-text: var(--uf-gold-text, #ffc328); --ufp-ok: var(--uf-ok, #3fb37a);
  }
}
.ufp.ufp *, .ufp.ufp *::before, .ufp.ufp *::after { box-sizing: border-box; }
.ufp.ufp :is(p, span, div, output, button) { margin: 0; }
.ufp.ufp .ufp-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; }
.ufp.ufp .ufp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--ufp-rule); font: 700 .7rem/1.5 var(--ufp-mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--ufp-ink); }
.ufp.ufp .ufp-sub { color: var(--ufp-soft); font-weight: 400; }
.ufp.ufp .ufp-glabel { font: 700 .68rem/1.4 var(--ufp-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ufp-soft); margin-bottom: .4rem; }
.ufp.ufp .ufp-sym { text-transform: none; letter-spacing: 0; font-family: var(--ufp-text); font-weight: 600; color: var(--ufp-ink); }
.ufp.ufp .ufp-glabel .ufp-sym { font-size: .82rem; }
.ufp.ufp sup { font-size: .7em; line-height: 0; vertical-align: .45em; }

/* presets */
.ufp.ufp .ufp-pre { padding: 1rem 1.1rem 0; }
.ufp.ufp .ufp-prow { display: flex; flex-wrap: wrap; gap: .45rem; }
.ufp.ufp .ufp-pre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1.6rem; }
.ufp.ufp .ufp-pgroup { min-width: 0; }
.ufp.ufp .ufp-btn { font: 600 .84rem/1.2 var(--ufp-text); color: var(--ufp-ink); background: transparent; text-align: left;
  border: 1px solid var(--ufp-ink); border-radius: 0; padding: .5rem .7rem; cursor: pointer; min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent; }
.ufp.ufp .ufp-btn:hover { background: var(--ufp-faint); }
.ufp.ufp .ufp-btn[aria-pressed="true"] { background: var(--ufp-ink); color: var(--ufp-paper); }
.ufp.ufp .ufp-btn:focus-visible { outline: 2px solid var(--ufp-ink); outline-offset: 3px; }

/* layout */
.ufp.ufp .ufp-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.2rem 1.8rem; padding: .9rem 1.1rem .3rem; }
.ufp.ufp.ufp-narrow .ufp-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: .7rem .75rem .2rem; }
.ufp.ufp.ufp-narrow .ufp-pre { padding: .8rem .75rem 0; }
.ufp.ufp .ufp-draw, .ufp.ufp .ufp-read { min-width: 0; }
.ufp.ufp .ufp-hint { font: 400 .78rem/1.3 var(--ufp-mono); color: var(--ufp-soft); margin-bottom: .2rem; min-height: 1.3em; }
.ufp.ufp .ufp-svg, .ufp.ufp .ufp-msvg, .ufp.ufp .ufp-rsvg { display: block; max-width: 100%; overflow: visible; }
.ufp.ufp .ufp-svg { touch-action: manipulation; }

/* carrier marks */
.ufp.ufp .ufp-slot { stroke: var(--ufp-grey); stroke-width: 1.4; stroke-dasharray: 5 5; }
.ufp.ufp .ufp-bline { stroke: var(--ufp-ink); stroke-linecap: round; }
.ufp.ufp .ufp-own { stroke: var(--ufp-event); }
.ufp.ufp .ufp-hit { stroke: transparent; stroke-width: 24; cursor: pointer; pointer-events: stroke; }
.ufp.ufp .ufp-bond.is-locked .ufp-hit { cursor: default; }
.ufp.ufp .ufp-focus { stroke: transparent; stroke-width: 2; fill: none; }
.ufp.ufp .ufp-bond { outline: none; }
.ufp.ufp .ufp-bond:focus-visible .ufp-focus { stroke: var(--ufp-ink); }
.ufp.ufp .ufp-bond:hover .ufp-slot { stroke: var(--ufp-ink); }
.ufp.ufp .ufp-flux { stroke: color-mix(in srgb, var(--ufp-event) 32%, var(--ufp-paper)); stroke-linecap: round; pointer-events: none; }
.ufp.ufp .ufp-dart { fill: var(--ufp-event); stroke: var(--ufp-paper); stroke-width: 1; pointer-events: none; }
.ufp.ufp .ufp-site { fill: var(--ufp-paper); stroke: var(--ufp-ink); stroke-width: 2; }
.ufp.ufp .ufp-end { stroke: var(--ufp-event); stroke-width: 2.6; }
.ufp.ufp .ufp-sl { fill: var(--ufp-soft); font: 700 12px var(--ufp-mono); paint-order: stroke; stroke: var(--ufp-paper);
  stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.ufp.ufp .ufp-sl-end { fill: var(--ufp-event-text); font-size: 13px; stroke: none; }
.ufp.ufp .ufp-postt { fill: var(--ufp-event-text); font: 700 11px var(--ufp-mono); letter-spacing: .1em; pointer-events: none; }

/* readout */
.ufp.ufp .ufp-lead { margin: 0; padding: .75rem 1.1rem 0; font-size: .95rem; color: var(--ufp-body); max-width: 60em; }
.ufp.ufp.ufp-narrow .ufp-lead { padding: .6rem .75rem 0; font-size: .92rem; }
.ufp.ufp .ufp-rsub { font-size: .82rem; color: var(--ufp-soft); margin: .15rem 0 .2rem; }
.ufp.ufp .ufp-big { display: block; font: 860 2.9rem/.95 var(--ufp-display); letter-spacing: -.045em; color: var(--ufp-ink);
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.ufp.ufp .ufp-big.is-gold { color: var(--ufp-gold-text); }
.ufp.ufp .ufp-tag { display: inline-block; margin-left: .6rem; font: 700 .62rem/1 var(--ufp-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ufp-soft); border: 1px solid var(--ufp-rule); padding: .14rem .3rem; vertical-align: .6em; }
.ufp.ufp .ufp-rline { margin-top: .45rem; font-size: .92rem; color: var(--ufp-body); }
.ufp.ufp .ufp-meter { margin-top: .9rem; }
.ufp.ufp .ufp-mback { fill: var(--ufp-faint); }
.ufp.ufp .ufp-mbar { fill: var(--ufp-grey); }
.ufp.ufp .ufp-mbar.is-cur { fill: var(--ufp-ink); }
.ufp.ufp .ufp-mbar.is-gold { fill: var(--ufp-gold); }
.ufp.ufp .ufp-mgold { stroke: var(--ufp-gold-text); stroke-width: 2; }
.ufp.ufp .ufp-mgt, .ufp.ufp .ufp-rgoldt { fill: var(--ufp-gold-text); font: 700 10.5px var(--ufp-mono); letter-spacing: .08em; }
.ufp.ufp .ufp-mt { fill: var(--ufp-soft); font: 700 10.5px var(--ufp-mono); letter-spacing: .08em; }
.ufp.ufp .ufp-mv { fill: var(--ufp-ink); font: 700 12px var(--ufp-mono); }
.ufp.ufp .ufp-ring { margin-top: 1rem; }
.ufp.ufp .ufp-rgrid { stroke: var(--ufp-faint); }
.ufp.ufp .ufp-rtick { fill: var(--ufp-soft); font: 400 11px var(--ufp-mono); }
.ufp.ufp .ufp-rgold { stroke: var(--ufp-gold-text); stroke-width: 1.6; stroke-dasharray: 5 4; }
.ufp.ufp .ufp-rdot { fill: var(--ufp-ink); }
.ufp.ufp .ufp-rdot.is-cur { fill: var(--ufp-event); stroke: var(--ufp-paper); stroke-width: 2; r: 6px; }

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

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

/* a visually hidden header keeps its spans inside its 1 px box (their nowrap text otherwise ran past narrow screens, though clipped) */
.ufp.ufp .ufp-sr > span { display: block; width: 1px; overflow: hidden; }
.ufp.ufp .ufp-mval { fill: var(--ufp-ink); font: 700 11px var(--ufp-text); }
.ufp.ufp .ufp-mval.is-in { fill: var(--ufp-paper); }
.ufp.ufp .ufp-mval.is-in.on-gold { fill: var(--ufp-ink); }