/* Paper block: the pipeline figure (version B, Myron 14 Oct) and its quiet motion. Load after style.css; no requests.
   Commented source: pipeline-v2/cv-calm-paper-block.src.css in the site tools (kept out of here for page weight). */
.pb {
  container: pb / inline-size;
  margin-top: clamp(36px, 4vw, 48px);
  --link: var(--accent);
  --lw: 1px;
  --r: 8px;
  --d: 11px;
  --fill: color-mix(in oklch, var(--paper-2) 72%, var(--paper));
  --edge: color-mix(in oklch, var(--rule-2) 70%, var(--rule));
  --edge-f: color-mix(in oklch, var(--ink) 46%, var(--paper));
  --ah-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0 7 3.5 0 7z'/%3E%3C/svg%3E");
  --ah-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0 7 0 3.5 7z'/%3E%3C/svg%3E");
}
.pb-flow {
  counter-reset: pbs;
  display: grid;
  font-size: 0.875rem;
  line-height: 1.45;
  font-variant-numeric: lining-nums proportional-nums;
  --gv: 30px;
  --Gv: 64px;
  --cg: 8px;
  --x1: calc((100% - 2 * var(--cg)) / 6);
  row-gap: var(--gv);
}
.pb-flow > li { counter-increment: pbs; position: relative; min-width: 0; }
.pb-three > li { position: relative; min-width: 0; display: flex; flex-direction: column; }
.pb-c {
  position: relative; flex: 1 1 auto;
  padding: 12px 14px 14px;
  background: var(--fill);
  border: 1px solid var(--edge);
  border-radius: 10px;
  hyphens: manual; overflow-wrap: normal;
}
.pb-three .pb-c { background: var(--paper); border-color: var(--edge-f); border-radius: 8px; padding: 10px 12px 12px; }
.pb-c::before {
  content: counter(pbs, decimal-leading-zero);
  content: counter(pbs, decimal-leading-zero) / "";
  display: block; margin-bottom: 9px;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; color: var(--muted);
}
.pb-h { font-size: 1rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.004em; color: var(--ink); text-wrap: balance; }
.pb-three .pb-h { font-weight: 600; }
.pb-id {
  margin-top: 6px;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.pb-d { margin-top: 6px; color: var(--ink-2); text-wrap: pretty; }
.pb-d + .pb-d { margin-top: 2px; }
.pb-o { margin-top: 3px; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.pb-note {
  margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--rule);
  font-size: 0.8125rem; line-height: 1.45; font-style: italic; color: var(--muted); text-wrap: pretty;
}
.pb-n {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.pb-k, .pb-ah, .pb-w { position: absolute; display: block; pointer-events: none; }
.pb-k { background: var(--link); }
.pb-a1, .pb-a2, .pb-b1, .pb-b2 { background: none; border: 0 solid var(--link); }
.pb-ah {
  --tip: d;
  width: 7px; height: 7px;
  background: var(--link);
  -webkit-mask: var(--ah-d) center / 100% 100% no-repeat;
          mask: var(--ah-d) center / 100% 100% no-repeat;
}
.pb-w { overflow: hidden; }
.pb-wi { position: absolute; inset: 0; display: block; }
.pb-in { left: calc(50% - var(--lw) / 2); width: var(--lw); top: calc(-1 * var(--gv)); height: var(--gv); }
.pb-st > .pb-ah { left: calc(50% - 3.5px); top: -7px; }
.pb-fam {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg);
  margin-block: calc(var(--Gv) - var(--gv));
}
.pb-three { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.pb-fork, .pb-join { left: 0; right: 0; height: var(--Gv); }
.pb-fork { top: calc(-1 * var(--Gv)); }
.pb-join { top: 100%; }
.pb-m { left: calc(50% - var(--lw) / 2); width: var(--lw); top: 0; bottom: 0; }
.pb-fork .pb-a1 { left: calc(50% - var(--d) - var(--r)); width: calc(var(--r) + var(--lw) / 2); top: 0; height: calc(var(--Gv) / 2 + var(--lw) / 2);
  border-width: 0 var(--lw) var(--lw) 0; border-bottom-right-radius: var(--r); }
.pb-fork .pb-a2 { left: calc(var(--x1) - var(--lw) / 2); right: calc(50% + var(--d) + var(--r)); top: calc(var(--Gv) / 2 - var(--lw) / 2); bottom: 0;
  border-width: var(--lw) 0 0 var(--lw); border-top-left-radius: var(--r); }
.pb-fork .pb-b1 { left: calc(50% + var(--d) - var(--lw) / 2); width: calc(var(--r) + var(--lw) / 2); top: 0; height: calc(var(--Gv) / 2 + var(--lw) / 2);
  border-width: 0 0 var(--lw) var(--lw); border-bottom-left-radius: var(--r); }
.pb-fork .pb-b2 { left: calc(50% + var(--d) + var(--r)); right: calc(var(--x1) - var(--lw) / 2); top: calc(var(--Gv) / 2 - var(--lw) / 2); bottom: 0;
  border-width: var(--lw) var(--lw) 0 0; border-top-right-radius: var(--r); }
.pb-fork .pb-t1 { left: calc(var(--x1) - 3.5px); bottom: 0; }
.pb-fork .pb-t2 { left: calc(50% - 3.5px); bottom: 0; }
.pb-fork .pb-t3 { left: calc(100% - var(--x1) - 3.5px); bottom: 0; }
.pb-join .pb-a1 { left: calc(var(--x1) - var(--lw) / 2); right: calc(50% + var(--d) + var(--r)); top: 0; height: calc(var(--Gv) / 2 + var(--lw) / 2);
  border-width: 0 0 var(--lw) var(--lw); border-bottom-left-radius: var(--r); }
.pb-join .pb-a2 { left: calc(50% - var(--d) - var(--r)); width: calc(var(--r) + var(--lw) / 2); top: calc(var(--Gv) / 2 - var(--lw) / 2); bottom: 0;
  border-width: var(--lw) var(--lw) 0 0; border-top-right-radius: var(--r); }
.pb-join .pb-b1 { left: calc(50% + var(--d) + var(--r)); right: calc(var(--x1) - var(--lw) / 2); top: 0; height: calc(var(--Gv) / 2 + var(--lw) / 2);
  border-width: 0 var(--lw) var(--lw) 0; border-bottom-right-radius: var(--r); }
.pb-join .pb-b2 { left: calc(50% + var(--d) - var(--lw) / 2); width: calc(var(--r) + var(--lw) / 2); top: calc(var(--Gv) / 2 - var(--lw) / 2); bottom: 0;
  border-width: var(--lw) 0 0 var(--lw); border-top-left-radius: var(--r); }
.pb-join .pb-t1 { left: calc(50% - var(--d) - 3.5px); bottom: 0; }
.pb-join .pb-t2 { left: calc(50% - 3.5px); bottom: 0; }
.pb-join .pb-t3 { left: calc(50% + var(--d) - 3.5px); bottom: 0; }
@container pb (min-width: 500px) and (max-width: 799.98px) {
  .pb-flow > .pb-st > .pb-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; align-items: start; }
  .pb-flow > .pb-st > .pb-c::before, .pb-flow > .pb-st .pb-note { grid-column: 1 / -1; }
  .pb-r > :first-child { margin-top: 0; }
  .pb-three .pb-c { padding: 12px 14px 14px; }
}
@container pb (min-width: 800px) {
  .pb-flow {
    --g: clamp(18px, 2.8cqi, 30px);
    --G: clamp(46px, 6.2cqi, 62px);
    --rg: clamp(10px, 1.4cqi, 14px);
    grid-template-columns:
      minmax(0, 1fr) var(--g) minmax(0, 1fr) var(--G) minmax(0, 1.12fr) var(--G) minmax(0, 1fr) var(--g) minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }
  .pb-flow > .pb-st { grid-row: 1 / 4; align-self: center; }
  .pb-s1 { grid-column: 1; }
  .pb-s2 { grid-column: 3; }
  .pb-s4 { grid-column: 7; }
  .pb-s5 { grid-column: 9; }
  .pb-fam { grid-column: 5; grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; column-gap: 0; margin: 0; }
  .pb-three { grid-column: 1; grid-row: 1 / 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  .pb-three > li { padding-block: calc(var(--rg) / 2); }
  .pb-f1 { grid-row: 1; }
  .pb-f2 { grid-row: 2; }
  .pb-f3 { grid-row: 3; }
  .pb-in { left: calc(-1 * var(--g)); width: var(--g); top: calc(50% - var(--lw) / 2); height: var(--lw); }
  .pb-ah { --tip: r; -webkit-mask-image: var(--ah-r); mask-image: var(--ah-r); }
  .pb-st > .pb-ah { left: -7px; top: calc(50% - 3.5px); }
  .pb-fork, .pb-join { grid-row: 1 / 4; grid-column: 1; top: 0; bottom: 0; height: auto; width: var(--G); }
  .pb-fork { left: auto; right: 100%; }
  .pb-join { left: 100%; right: auto; }
  .pb-m { left: 0; right: 0; width: auto; top: calc(50% - var(--lw) / 2); bottom: auto; height: var(--lw); }
  .pb-fork .pb-a1 { left: 0; right: auto; width: calc(50% + var(--lw) / 2); top: calc(50% - var(--d) - var(--r)); bottom: auto; height: calc(var(--r) + var(--lw) / 2);
    border-width: 0 var(--lw) var(--lw) 0; border-radius: 0 0 var(--r) 0; }
  .pb-fork .pb-a2 { left: calc(50% - var(--lw) / 2); right: 0; width: auto; top: calc(100% / 6 - var(--lw) / 2); bottom: calc(50% + var(--d) + var(--r)); height: auto;
    border-width: var(--lw) 0 0 var(--lw); border-radius: var(--r) 0 0 0; }
  .pb-fork .pb-b1 { left: 0; right: auto; width: calc(50% + var(--lw) / 2); top: calc(50% + var(--d) - var(--lw) / 2); bottom: auto; height: calc(var(--r) + var(--lw) / 2);
    border-width: var(--lw) var(--lw) 0 0; border-radius: 0 var(--r) 0 0; }
  .pb-fork .pb-b2 { left: calc(50% - var(--lw) / 2); right: 0; width: auto; top: calc(50% + var(--d) + var(--r)); bottom: calc(100% / 6 - var(--lw) / 2); height: auto;
    border-width: 0 0 var(--lw) var(--lw); border-radius: 0 0 0 var(--r); }
  .pb-fork .pb-t1, .pb-fork .pb-t2, .pb-fork .pb-t3 { left: auto; right: 0; bottom: auto; }
  .pb-fork .pb-t1 { top: calc(100% / 6 - 3.5px); }
  .pb-fork .pb-t2 { top: calc(50% - 3.5px); }
  .pb-fork .pb-t3 { top: calc(500% / 6 - 3.5px); }
  .pb-join .pb-a1 { left: 0; right: auto; width: calc(50% + var(--lw) / 2); top: calc(100% / 6 - var(--lw) / 2); bottom: calc(50% + var(--d) + var(--r)); height: auto;
    border-width: var(--lw) var(--lw) 0 0; border-radius: 0 var(--r) 0 0; }
  .pb-join .pb-a2 { left: calc(50% - var(--lw) / 2); right: 0; width: auto; top: calc(50% - var(--d) - var(--r)); bottom: auto; height: calc(var(--r) + var(--lw) / 2);
    border-width: 0 0 var(--lw) var(--lw); border-radius: 0 0 0 var(--r); }
  .pb-join .pb-b1 { left: 0; right: auto; width: calc(50% + var(--lw) / 2); top: calc(50% + var(--d) + var(--r)); bottom: calc(100% / 6 - var(--lw) / 2); height: auto;
    border-width: 0 var(--lw) var(--lw) 0; border-radius: 0 0 var(--r) 0; }
  .pb-join .pb-b2 { left: calc(50% - var(--lw) / 2); right: 0; width: auto; top: calc(50% + var(--d) - var(--lw) / 2); bottom: auto; height: calc(var(--r) + var(--lw) / 2);
    border-width: var(--lw) 0 0 var(--lw); border-radius: var(--r) 0 0 0; }
  .pb-join .pb-t1, .pb-join .pb-t2, .pb-join .pb-t3 { left: auto; right: 0; bottom: auto; }
  .pb-join .pb-t1 { top: calc(50% - var(--d) - 3.5px); }
  .pb-join .pb-t2 { top: calc(50% - 3.5px); }
  .pb-join .pb-t3 { top: calc(50% + var(--d) - 3.5px); }
}
@container pb (min-width: 860px) {
  .pb-flow { font-size: 0.9375rem; }
  .pb-h { font-size: 1.0625rem; }
}
.pb-s2 { --k: 0; }
.pb-fork { --k: 1; }
.pb-join { --k: 2; }
.pb-s5 { --k: 3; }
.pb-flow { --g0: scaleY(0); --w0: translateY(-100%); --w1: translateY(100%); --pb-ease: cubic-bezier(0.33, 1, 0.68, 1); }
.pb-in { transform-origin: 50% 0; }
@container pb (min-width: 800px) {
  .pb-flow { --g0: scaleX(0); --w0: translateX(-100%); --w1: translateX(100%); }
  .pb-in { transform-origin: 0 50%; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  html.fx:not(.lowfx) .pb:not(.drawn) .pb-in { transform: var(--g0); }
  html.fx:not(.lowfx) .pb:not(.drawn) .pb-st > .pb-ah { opacity: 0; }
  html.fx:not(.lowfx) .pb:not(.drawn) .pb-w { transform: var(--w0); }
  html.fx:not(.lowfx) .pb:not(.drawn) .pb-wi { transform: var(--w1); }
  html.fx .pb.drawn .pb-in, html.fx .pb.drawn .pb-w, html.fx .pb.drawn .pb-wi { transition: transform 240ms var(--pb-ease) calc(var(--k) * 120ms); }
  html.fx .pb.drawn .pb-st > .pb-ah { transition: opacity 90ms linear calc(var(--k) * 120ms + 150ms); }
}
html.lowfx .pb * { transition: none !important; }
@media (forced-colors: active) {
  .pb-k, .pb-ah { forced-color-adjust: none; background-color: CanvasText; }
  .pb-a1, .pb-a2, .pb-b1, .pb-b2 { forced-color-adjust: none; background: none; border-color: CanvasText; }
}
@media print {
  .pb-c, .pb-fam { break-inside: avoid; }
}