/* Whitepaper page: numbered sections, figures and their controls.
   Every selector is scoped to .wp-* so the stylesheet is inert on other docs pages.
   Figure colours are measured against the figure stage (#1d1d23 dark, #ededf0 light):
   text tokens are at least 4.5:1, graphic strokes at least 3:1; hairlines and the
   dot ground are decoration only. */

[data-md-color-scheme="slate"] {
  --wp-stage: #1d1d23;
  --wp-current: #26262e;
  --wp-ink: #e2dfd6;
  --wp-text: #b8bac4;
  --wp-muted: #9a9aaa;
  --wp-line: #8b8b98;
  --wp-hair: #32323b;
  --wp-dot: #2c2c35;
  --wp-gold: #ffc048;
  --wp-blue: #7f98fb;
  --wp-green: #35d07f;
  --wp-pink: #f06bae;
  --wp-red: #f47a88;
  --wp-accent: #7fd4ff;
}

[data-md-color-scheme="default"] {
  --wp-stage: #ededf0;
  --wp-current: #e2e2e8;
  --wp-ink: #22222a;
  --wp-text: #44444f;
  --wp-muted: #5c5c68;
  --wp-line: #656572;
  --wp-hair: #d2d2da;
  --wp-dot: #d7d7de;
  --wp-gold: #a34400;
  --wp-blue: #3f59c4;
  --wp-green: #1b7849;
  --wp-pink: #a63d73;
  --wp-red: #b8303f;
  --wp-accent: #003a5c;
}

:root { --wp-step: 320ms; }

/* ---------- Page ---------- */

.md-typeset .wp-doc { counter-reset: wp-section wp-figure wp-invariant; }

/* The page is a size container so the page buttons can sit on the eyebrow line under the full-width header:
   the header's height is its width × 222 / 1789 (its viewBox), i.e. 100cqw scaled. */
.md-typeset .wp-doc { position: relative; container: wp-doc / inline-size; }
.wp-hero { margin: .4rem 0 1.4rem; }
@media (min-width: 60em) {
  .md-typeset .wp-doc > .docs-page-context {
    position: absolute;
    inset-block-start: calc(.4rem + 100cqw * 222 / 1789 + 1.2rem + .55rem);
    inset-inline-end: 0;
    margin: 0;
    translate: 0 -50%;
  }
}
/* The header drawing spans the content column; one path per colour, set from the theme. */
.wp-hero__mark { width: 100%; }
.wp-hero__mark svg { display: block; width: 100%; height: auto; }
.wp-hero__dots { fill: var(--sqk-logo-gold); }
.wp-hero__tiles { fill: var(--sqk-logo-blue); }
.wp-hero__cells { fill: var(--wp-green); }
.md-typeset .wp-hero__eyebrow {
  margin: 1.2rem 0 0;
  font-family: var(--md-code-font);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.md-typeset .wp-doc > h1 { font-size: 1.6rem; line-height: 1.2; margin-top: .4rem; }
.md-typeset .wp-doc .wp-lede { font-size: 1.05rem; line-height: 1.55; color: var(--sqk-heading-color); max-width: none; }

.md-typeset .wp-doc > :is(p, ul, ol, blockquote) { max-width: 66ch; }
.md-typeset .wp-doc > :is(p, ul, ol) { font-size: .9rem; line-height: 1.65; }

/* Section numbers: shown above each H2 and before each contents entry. */
.md-typeset .wp-doc > h2 { counter-increment: wp-section; margin-top: 3.2rem; }
.md-typeset .wp-doc > h2::before {
  content: counter(wp-section, decimal-leading-zero);
  display: block;
  margin-bottom: .35rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--md-default-fg-color--light);
}
body:has(.wp-doc) .md-nav--secondary > .md-nav__list { counter-reset: wp-toc; }
body:has(.wp-doc) .md-nav--secondary > .md-nav__list > .md-nav__item { counter-increment: wp-toc; }
body:has(.wp-doc) .md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link::before {
  content: counter(wp-toc, decimal-leading-zero);
  flex: none;
  min-width: 1.6rem;
  font-family: var(--md-code-font);
  font-size: .65rem;
  color: var(--md-default-fg-color--light);
}
/* Unnumbered entries (sub-sections such as "Exact rule") keep an empty number column, so their text lines up
   with the numbered entries'. A sub-section drops the nested list's own indent: the empty column already sets
   it in. */
body:has(.wp-doc) .md-nav--secondary .md-nav__list .md-nav__list > .md-nav__item > .md-nav__link::before {
  content: "";
  flex: none;
  min-width: 1.6rem;
}
body:has(.wp-doc) .md-nav--secondary .md-nav__list .md-nav__list { margin-inline-start: 0; }

/* Callouts. Invariant: one factual sentence that restates a registered invariant, numbered in page order.
   Notice: the development status at the top of the page. */
.md-typeset .wp-doc > .wp-invariant {
  counter-increment: wp-invariant;
  max-width: none;
  margin: 2rem 0;
  padding: .8rem 1.1rem .95rem;
  border: 1px solid color-mix(in srgb, var(--wp-gold) 45%, transparent);
  border-radius: var(--sqk-panel-radius);
  background: color-mix(in srgb, var(--wp-gold) 7%, var(--md-default-bg-color));
  font-size: .9rem;
  line-height: 1.65;
  color: var(--sqk-heading-color);
}
.md-typeset .wp-doc > .wp-invariant::before {
  content: "Invariant " counter(wp-invariant, decimal-leading-zero);
  display: block;
  margin-bottom: .45rem;
  padding-inline-start: .9rem;
  background: linear-gradient(var(--wp-gold), var(--wp-gold)) no-repeat left center / .4rem .4rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp-gold);
}
.md-typeset .wp-doc > .wp-notice {
  max-width: none;
  margin: 1.2rem 0 1.6rem;
  padding: .75rem 1rem .8rem;
  border: 1px solid var(--sqk-line);
  border-radius: var(--sqk-panel-radius);
  background: var(--wp-stage);
  font-size: .85rem;
  line-height: 1.55;
}
.md-typeset .wp-notice__label {
  display: block;
  margin-bottom: .3rem;
  padding-inline-start: .9rem;
  background: linear-gradient(var(--wp-accent), var(--wp-accent)) no-repeat left center / .4rem .4rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp-ink);
}

/* Exact rule: normative integer expressions, skippable by heading. */
.md-typeset .wp-rule {
  margin: 1.6rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--sqk-line);
  border-radius: var(--sqk-panel-radius);
  background: var(--wp-stage);
}
.md-typeset .wp-rule > h3 {
  margin: 0 0 .5rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.md-typeset .wp-rule pre { margin: 0; }
.md-typeset .wp-rule pre > code {
  padding: .75rem 3rem .75rem 1rem;
  border-radius: var(--sqk-control-radius);
  background: color-mix(in srgb, var(--wp-ink) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--sqk-line);
  font-size: .75rem;
  color: var(--wp-ink);
}
/* The native copy button: no grey plate, a visible icon, an accent hover and focus. */
.md-typeset .wp-rule .md-code__nav { background: transparent; }
.md-typeset .wp-rule .md-code__button { opacity: 1; color: var(--wp-muted); }
.md-typeset .wp-rule .md-code__button:is(:hover, :focus-visible) { color: var(--md-accent-fg-color); }
.md-typeset .wp-rule > p { margin: .6rem 0 0; font-size: .8rem; }

/* ---------- Figures ---------- */

.md-typeset .wp-figure {
  counter-increment: wp-figure;
  position: relative;
  margin: 2.2rem 0;
  border: 1px solid var(--sqk-line);
  border-radius: var(--sqk-panel-radius);
  /* The dot ground runs under the caption and the stage; the text sections below sit on the plain stage colour. */
  background-color: var(--wp-stage);
  background-image: radial-gradient(circle, var(--wp-dot) 1px, transparent 1.4px);
  background-size: 8px 8px;
  background-position: 4px 4px;
  overflow: clip;
}
.md-typeset .wp-figure > :first-child { margin-top: 0; }
.md-typeset figure.wp-figure { display: block; width: auto; max-width: none; text-align: start; }
.md-typeset .wp-figure__caption { display: block; margin: 0; padding: 1rem 1rem .2rem; font-style: normal; }
.md-typeset .wp-figure__number {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.md-typeset .wp-figure__number::before { content: ""; flex: none; width: .4rem; height: .4rem; background: var(--wp-gold); }
.md-typeset .wp-figure__number::after { content: counter(wp-figure); margin-inline-start: -.15rem; }
.md-typeset .wp-figure__title { display: block; font-size: .9rem; font-weight: 700; line-height: 1.35; color: var(--sqk-heading-color); }

.md-typeset .wp-figure__stage { position: relative; padding: .7rem 1rem .9rem; }
.md-typeset .wp-figure__stage:empty { display: none; }
/* A drawing scales with its stage up to 1.3× its design size, then centres: between phone and desktop
   widths the 300-unit phone layout would otherwise stretch to more than twice its size. */
.md-typeset .wp-figure__stage > svg {
  display: block;
  width: 100%;
  max-width: calc(var(--wp-design-width, 10000) * 1.3px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
/* HTML stages (figures with real text and controls) are size containers for @container queries. */
.md-typeset .wp-figure__html { container-type: inline-size; }
.md-typeset .has-player > .wp-figure__stage { cursor: pointer; }

/* Transport: previous, play/pause, next and one progress dot per step, on the FIGURE label line.
   The buttons are the keyboard way to pause the animation (WCAG 2.2.2); the dots repeat their function
   for pointers and are skipped by Tab. */
.md-typeset .wp-figure__transport {
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-end: .6rem;
  display: flex;
  align-items: center;
  gap: .1rem;
}
.md-typeset .wp-figure__transport button {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  min-height: 1.6rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--sqk-control-radius);
  background: transparent;
  color: var(--wp-muted);
  cursor: pointer;
}
.md-typeset .wp-figure__transport button[hidden] { display: none; }
.md-typeset .wp-figure__transport :is(.wp-figure__skip, .wp-figure__toggle):hover { border-color: var(--wp-line); color: var(--wp-ink); }
.md-typeset .wp-figure__transport button:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 1px; }
.md-typeset .wp-figure__chevron {
  width: .42rem;
  height: .42rem;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
}
.md-typeset .wp-figure__skip--prev .wp-figure__chevron { transform: translateX(15%) rotate(45deg); }
.md-typeset .wp-figure__skip--next .wp-figure__chevron { transform: translateX(-15%) rotate(-135deg); }
.md-typeset .wp-figure__glyph {
  width: .5rem;
  height: .6rem;
  background: currentColor;
  clip-path: polygon(0 0, 36% 0, 36% 100%, 64% 100%, 64% 0, 100% 0, 100% 100%, 0 100%);
}
.md-typeset .wp-figure__transport[data-state="paused"] .wp-figure__glyph { background: var(--wp-gold); }
.md-typeset .wp-figure__transport[data-state="stopped"] .wp-figure__toggle { color: var(--wp-ink); }
.md-typeset .wp-figure__transport[data-state="stopped"] .wp-figure__glyph { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.md-typeset .wp-figure__track { display: flex; align-items: center; margin-inline-start: .25rem; }
.md-typeset .wp-figure__transport .wp-figure__pip { min-width: 0; width: .7rem; min-height: 1.6rem; border: 0; }
.md-typeset .wp-figure__pip::before {
  content: "";
  width: 6px;
  height: 6px;
  box-shadow: inset 0 0 0 1px var(--wp-line);
  transition: transform 120ms ease;
}
.md-typeset .wp-figure__pip.is-done::before { background: var(--wp-line); }
.md-typeset .wp-figure__pip.is-current::before { background: var(--wp-gold); box-shadow: none; }
.md-typeset .wp-figure__pip:hover::before { transform: scale(1.5); box-shadow: inset 0 0 0 1px var(--wp-ink); }
.md-typeset .wp-figure__track.is-bar { width: 3.5rem; height: 4px; margin-inline: .35rem; background: var(--wp-hair); }
.md-typeset .wp-figure__bar { display: block; height: 100%; background: var(--wp-gold); }

.md-typeset .wp-figure__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--sqk-line);
  background-color: var(--wp-stage);
}
.md-typeset .wp-figure__form:empty { display: none; }

/* Native form controls for interactive figures. */
.md-typeset .wp-figure__form fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; border: 0; }
.md-typeset .wp-figure__form legend,
.md-typeset .wp-figure__form .wp-field-label {
  float: left;
  margin-inline-end: .4rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.md-typeset .wp-choice { position: relative; display: inline-flex; }
.md-typeset .wp-choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.md-typeset .wp-choice span {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 .7rem;
  border: 1px solid var(--wp-line);
  border-radius: var(--sqk-control-radius);
  font-size: .75rem;
  color: var(--wp-ink);
}
/* The chosen chip is filled and framed in gold (highlight), 2 px thick without moving its text; no underline. */
.md-typeset .wp-choice input:checked + span { background: var(--wp-current); border-color: var(--wp-gold); box-shadow: inset 0 0 0 1px var(--wp-gold); color: var(--sqk-heading-color); }
.md-typeset .wp-choice input:focus-visible + span { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
/* "≈" marks a rounded value. Figures that update a value live keep the mark's slot and only hide it for exact
   values, so the digits never shift sideways as it comes and goes. */
.md-typeset .wp-approx { margin-inline-end: .2em; }
.md-typeset .wp-approx.is-exact { visibility: hidden; }
.md-typeset .wp-range { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; flex: 1 1 16rem; }
.md-typeset .wp-range input[type="range"] { flex: 1 1 10rem; min-height: 2.2rem; accent-color: var(--wp-gold); }
.md-typeset .wp-output {
  font-family: var(--md-code-font);
  font-size: .75rem;
  color: var(--wp-ink);
  font-variant-numeric: tabular-nums;
}
.md-typeset .wp-figure__readout {
  margin: 0;
  padding: .6rem 1rem;
  border-top: 1px solid var(--sqk-line);
  background-color: var(--wp-stage);
  font-size: .8rem;
  color: var(--wp-ink);
}
/* Stats readout: label/value pairs as a definition list, drawn as a row of instrument cells that continue the
   stage (dot ground, no divider) directly under the drawing. One row on desktop, a wrapping grid on phones;
   columns depend on the width only, so the size never changes as the values do. */
.md-typeset .wp-figure__readout:has(> .wp-stats) { padding: 0 1rem 1rem; border-top: 0; background: transparent; }
.md-typeset dl.wp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .5rem;
  max-width: calc(var(--wp-design-width, 10000) * 1.3px);
  margin: 0 auto;
}
/* Each cell is a size container: its value's face shrinks only when the cell is too narrow for a 13-character
   value such as 2,100,000,000 (mono digits are about 0.6em wide, so 12cqi keeps 13 of them inside the cell).
   The size depends on the cell's width, never on the value, so a row's values always match. */
.md-typeset .wp-stats > div {
  container-type: inline-size;
  min-width: 0;
  padding: .5rem .7rem .55rem;
  border: 1px solid var(--sqk-line);
  border-radius: var(--sqk-control-radius);
  background: var(--wp-stage);
}
.md-typeset .wp-stats dt {
  margin: 0;
  font-family: var(--md-code-font);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.md-typeset .wp-stats dd {
  margin: .2rem 0 0;
  padding: 0;
  font-family: var(--md-code-font);
  font-size: min(1.05rem, 12cqi);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--wp-ink);
}

/* Steps: the text equivalent of a stepped figure, highlighted in sync with the animation. */
.md-typeset ol.wp-figure__steps {
  counter-reset: wp-step;
  margin: 0;
  padding: .55rem .5rem .65rem;
  list-style: none;
  border-top: 1px solid var(--sqk-line);
  background-color: var(--wp-stage);
  font-size: .8rem;
}
.md-typeset ol.wp-figure__steps > li {
  counter-increment: wp-step;
  position: relative;
  margin: 0;
  padding: .4rem .6rem .4rem 2.75rem;
  border-radius: var(--sqk-control-radius);
  transition: background-color var(--wp-step) ease, color var(--wp-step) ease, opacity var(--wp-step) ease;
}
.md-typeset ol.wp-figure__steps > li::before {
  content: counter(wp-step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: .6rem;
  inset-block-start: .5rem;
  width: 1.6rem;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--wp-hair);
  font-family: var(--md-code-font);
  font-size: .7rem;
  line-height: 1.2rem;
  text-align: center;
  color: var(--wp-muted);
  transition: background-color var(--wp-step) ease, color var(--wp-step) ease;
}
.md-typeset ol.wp-figure__steps > li > p { margin: 0; }
.md-typeset ol.wp-figure__steps > li.is-current { background: var(--wp-current); color: var(--sqk-heading-color); }
.md-typeset ol.wp-figure__steps > li.is-current::before { background: var(--wp-gold); box-shadow: none; color: var(--wp-stage); font-weight: 700; }
/* With a player, each step previews on hover and is chosen on click or tap. */
.md-typeset .has-player ol.wp-figure__steps > li { cursor: pointer; }
.md-typeset .has-player ol.wp-figure__steps > li:not(.is-current):hover::before { box-shadow: inset 0 0 0 1px var(--wp-ink); color: var(--wp-ink); }

.md-typeset .wp-figure__takeaway {
  margin: 0;
  padding: .7rem 1rem;
  border-top: 1px solid var(--sqk-line);
  background-color: var(--wp-stage);
  font-size: .8rem;
  color: var(--sqk-heading-color);
}
.md-typeset .wp-figure > details {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--sqk-line);
  border-radius: 0;
  background: var(--wp-stage);
  box-shadow: none;
  font-size: .75rem;
}
.md-typeset .wp-figure > .md-typeset__scrollwrap,
.md-typeset .wp-figure > .md-typeset__table { margin: 0; }
.md-typeset .wp-figure table:not([class]) { margin: 0; border: 0; border-top: 1px solid var(--sqk-line); border-radius: 0; }

.wp-live, .md-typeset .wp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Key numbers: a row of large figures, each with a hairline above and a caption below; keynums.js counts them
   up once. The number is shown abbreviated for the eye (aria-hidden) and spelled out for assistive technology
   (.wp-sr). The caption is the term (dt) and comes first in the markup; the grid draws it under the number. */
.md-typeset dl.wp-keynums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.2rem 1.6rem;
  margin: 1.6rem 0 2rem;
}
.md-typeset .wp-keynums > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--sqk-line);
}
.md-typeset .wp-keynums dd {
  margin: 0 0 .45rem;
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--sqk-heading-color);
}
.md-typeset .wp-keynums dt { margin: 0; font-size: .8rem; font-weight: 400; line-height: 1.45; color: var(--md-default-fg-color--light); }
@media (max-width: 44.9375em) {
  .md-typeset dl.wp-keynums { gap: 1rem 1.2rem; }
  .md-typeset .wp-keynums dd { font-size: 1.75rem; }
}

/* Numbered loops (Flywheels): a hairline-separated list, the number in mono beside a short title and its text. */
.md-typeset ol.wp-loops { counter-reset: wp-loop; margin: 1.4rem 0 2rem; padding: 0; list-style: none; }
.md-typeset ol.wp-loops > li {
  counter-increment: wp-loop;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  margin: 0;
  padding: 1.1rem 0 1.2rem;
  border-top: 1px solid var(--sqk-line);
}
.md-typeset ol.wp-loops > li::before {
  content: counter(wp-loop, decimal-leading-zero);
  padding-top: .2rem;
  font-family: var(--md-code-font);
  font-size: .7rem;
  color: var(--wp-muted);
}
.md-typeset ol.wp-loops > li > * { grid-column: 2; margin: 0; }
.md-typeset ol.wp-loops > li > h3 { margin: 0 0 .4rem; font-size: .95rem; font-weight: 600; }
.md-typeset ol.wp-loops > li > p { max-width: 66ch; font-size: .9rem; line-height: 1.65; }

/* Tables inside figures: the authority matrix and data disclosures. */
.md-typeset .wp-figure__scroll { overflow-x: auto; border-top: 1px solid var(--sqk-line); background-color: var(--wp-stage); }
.md-typeset .wp-figure__scroll:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: -2px; }
.md-typeset table.wp-matrix,
.md-typeset .wp-figure > details table {
  display: table;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: .75rem;
  line-height: 1.45;
}
.md-typeset table.wp-matrix { min-width: 34rem; }
.md-typeset :is(.wp-matrix, .wp-figure > details table) :is(th, td) {
  padding: .55rem .8rem;
  border: 0;
  border-top: 1px solid var(--sqk-line);
  text-align: start;
  vertical-align: top;
}
.md-typeset :is(.wp-matrix, .wp-figure > details table) thead th {
  border-top: 0;
  font-family: var(--md-code-font);
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp-muted);
  background: transparent;
}
.md-typeset .wp-matrix tbody th { font-weight: 400; color: var(--sqk-heading-color); }
.md-typeset .wp-matrix :is(.wp-can, .wp-cannot)::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: .45rem;
  height: .45rem;
  margin-inline-end: .5rem;
  vertical-align: .05rem;
}
.md-typeset .wp-matrix .wp-can { color: var(--wp-ink); }
.md-typeset .wp-matrix .wp-can::before { background: var(--wp-green); }
.md-typeset .wp-matrix .wp-cannot { color: var(--wp-muted); }
.md-typeset .wp-matrix .wp-cannot::before { border: 1.5px solid var(--wp-line); }
/* "View the data": always the last row of a figure, caret before the label. */
.md-typeset .wp-figure > details > summary {
  margin: 0;
  padding: .7rem 1rem .7rem 2.3rem;
  background: transparent;
  font-family: var(--md-code-font);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp-ink);
}
.md-typeset .wp-figure > details > summary::before { display: none; }
.md-typeset .wp-figure > details > summary::after { inset-inline: .85rem auto; top: 50%; translate: 0 -50%; background-color: currentColor; }
.md-typeset .wp-figure > details > summary:hover { color: var(--md-accent-fg-color); }
.md-typeset .wp-figure > details > summary:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: -2px; }
.md-typeset .wp-figure > details > p { padding: 0 1rem; font-size: .75rem; }
.md-typeset .wp-figure__list { margin: 0; padding: .7rem 1rem .8rem 2.4rem; border-top: 1px solid var(--sqk-line); background-color: var(--wp-stage); font-size: .8rem; }
.md-typeset .wp-figure__list > li { margin-bottom: .2rem; }

/* Level ladder: rated power and merge cooldown per level. Bars and pips are decorative scale marks;
   the numbers carry the facts. */
.md-typeset .wp-levels {
  width: fit-content;
  max-width: 100%;
  margin: 1.6rem 0;
  overflow-x: auto;
  border: 1px solid var(--sqk-line);
  border-radius: var(--sqk-panel-radius);
  background: var(--wp-stage);
}
.md-typeset .wp-levels:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
.md-typeset .wp-levels table {
  display: table;
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  font-size: .8rem;
}
.md-typeset .wp-levels :is(th, td) {
  padding: .45rem .9rem;
  border: 0;
  border-top: 1px solid var(--sqk-line);
  text-align: start;
  vertical-align: middle;
  white-space: nowrap;
}
.md-typeset .wp-levels thead th {
  padding-block: .7rem .55rem;
  border-top: 0;
  background: transparent;
  font-family: var(--md-code-font);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--wp-muted);
}
.md-typeset .wp-levels__unit { display: block; margin-top: .15rem; font-family: var(--md-text-font); font-size: .7rem; letter-spacing: 0; text-transform: none; }
.md-typeset .wp-levels tbody th { padding-inline-end: 1.6rem; background: transparent; font-family: var(--md-code-font); font-weight: 400; color: var(--wp-muted); }
.md-typeset .wp-levels__num { display: inline-block; min-width: 9ch; font-family: var(--md-code-font); font-variant-numeric: tabular-nums; text-align: end; color: var(--wp-ink); }
.md-typeset .wp-levels__num--cooldown { min-width: 6ch; }
.md-typeset .wp-levels__bar {
  display: inline-block;
  width: max(2px, calc(var(--w) * 8rem / 100));
  height: .5rem;
  margin-inline-start: .8rem;
  vertical-align: middle;
  background: var(--wp-gold);
}
.md-typeset .wp-levels__bar--cooldown { background: var(--wp-blue); }
.md-typeset .wp-levels__none { color: var(--wp-muted); }
@media (forced-colors: active) {
  .md-typeset .wp-levels__bar { forced-color-adjust: none; background: CanvasText; }
}

/* ---------- SVG vocabulary ---------- */

.wp-arrowheads { position: absolute; width: 0; height: 0; overflow: hidden; }
.wp-svg .wp-arrow { stroke-linecap: butt; stroke-linejoin: round; }
[data-md-color-scheme="slate"] .wp-svg .wp-art-light,
[data-md-color-scheme="default"] .wp-svg .wp-art-dark { display: none; }
.wp-svg .wp-scrub { cursor: ew-resize; }
/* Browsers resolve touch-action on the <svg> box, not on its children: an SVG with a scrubbable part lets
   vertical page scrolling through and hands horizontal drags to the figure. */
.wp-svg:has(.wp-scrub) { touch-action: pan-y; }
.wp-svg [role="slider"]:focus { outline: none; }
.wp-svg [role="slider"]:focus-visible { outline: 2px solid var(--md-accent-fg-color); outline-offset: 2px; }
/* Sonar ping for a draggable handle: the one transform animation, decorative, removed under reduced motion. */
.wp-svg .wp-ping { transform-box: fill-box; transform-origin: center; animation: wp-ping 1.6s ease-out infinite; }
@keyframes wp-ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.8); opacity: 0; } }
.wp-svg { font-family: var(--md-text-font); }
.wp-svg text { fill: var(--wp-text); font-size: 14px; }
.wp-svg .t-ink { fill: var(--wp-ink); }
.wp-svg .t-muted { fill: var(--wp-muted); }
.wp-svg .t-gold { fill: var(--wp-gold); }
.wp-svg .t-blue { fill: var(--wp-blue); }
.wp-svg .t-green { fill: var(--wp-green); }
.wp-svg .t-pink { fill: var(--wp-pink); }
.wp-svg .t-red { fill: var(--wp-red); }
.wp-svg .t-accent { fill: var(--wp-accent); }
.wp-svg .t-mono { font-family: var(--md-code-font); letter-spacing: .04em; }
.wp-svg .t-label { font-family: var(--md-code-font); letter-spacing: .06em; text-transform: uppercase; }
.wp-svg .t-label:not(.t-ink, .t-gold, .t-blue, .t-green, .t-pink, .t-red, .t-accent) { fill: var(--wp-muted); }
.wp-svg .t-strong { font-weight: 700; }
.wp-svg .t-big { font-size: 22px; }
/* Smaller steps of the type scale, for secondary annotations only (14 is the default). */
.wp-svg .t-small { font-size: 12px; }
.wp-svg .t-xs { font-size: 11px; }
.wp-svg .wp-cube__ghost { stroke-opacity: .45; }
.wp-svg .t-num { font-variant-numeric: tabular-nums; }

.wp-svg .s-ink { stroke: var(--wp-ink); }
.wp-svg .s-text { stroke: var(--wp-text); }
.wp-svg .s-line { stroke: var(--wp-line); }
.wp-svg .s-hair { stroke: var(--wp-hair); }
.wp-svg .s-gold { stroke: var(--wp-gold); }
.wp-svg .s-blue { stroke: var(--wp-blue); }
.wp-svg .s-green { stroke: var(--wp-green); }
.wp-svg .s-pink { stroke: var(--wp-pink); }
.wp-svg .s-red { stroke: var(--wp-red); }
.wp-svg .s-accent { stroke: var(--wp-accent); }
.wp-svg :is(.s-ink, .s-text, .s-line, .s-hair, .s-gold, .s-blue, .s-green, .s-pink, .s-red, .s-accent) { fill: none; stroke-width: 1.5; }
.wp-svg .w2 { stroke-width: 2; }
.wp-svg .w3 { stroke-width: 3; }
.wp-svg .seam { stroke: var(--wp-stage); stroke-width: 1; }
.wp-svg .dash { stroke-dasharray: 5 5; }
.wp-svg .dots { stroke-dasharray: 1 6; stroke-linecap: round; }

.wp-svg .f-ink { fill: var(--wp-ink); }
.wp-svg .f-text { fill: var(--wp-text); }
.wp-svg .f-line { fill: var(--wp-line); }
.wp-svg .f-hair { fill: var(--wp-hair); }
.wp-svg .f-gold { fill: var(--wp-gold); }
.wp-svg .f-blue { fill: var(--wp-blue); }
.wp-svg .f-green { fill: var(--wp-green); }
.wp-svg .f-pink { fill: var(--wp-pink); }
.wp-svg .f-red { fill: var(--wp-red); }
.wp-svg .f-accent { fill: var(--wp-accent); }
.wp-svg .f-stage { fill: var(--wp-stage); }
.wp-svg .f-current { fill: var(--wp-current); }
.wp-svg :is(.tint-gold, .tint-blue, .tint-green, .tint-pink, .tint-red, .tint-ink) { fill-opacity: .16; }
.wp-svg .tint-gold { fill: var(--wp-gold); }
.wp-svg .tint-blue { fill: var(--wp-blue); }
.wp-svg .tint-green { fill: var(--wp-green); }
.wp-svg .tint-pink { fill: var(--wp-pink); }
.wp-svg .tint-red { fill: var(--wp-red); }
.wp-svg .tint-ink { fill: var(--wp-ink); }

/* Stepped motion: elements change opacity between steps. The one exception is a travelling token
   (svg.js moveTo): an object the reader follows from station to station slides to its new position. */
.wp-svg [data-show], .wp-svg [data-dim], .wp-svg .wp-anim { transition: opacity var(--wp-step) ease; }
.wp-svg .is-off { opacity: 0; }
.wp-svg .is-dim { opacity: .3; }
.wp-svg .wp-move { transition: transform 640ms cubic-bezier(.3, .7, .2, 1), opacity var(--wp-step) ease; }

/* Spinning parts turn smoothly while the figure plays and freeze where they are when it pauses (no snap back). */
.wp-svg .wp-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: wp-turn 3.2s linear infinite;
  animation-play-state: paused;
}
.wp-figure.is-playing .wp-svg .wp-spin { animation-play-state: running; }
@keyframes wp-turn { to { transform: rotate(360deg); } }

/* A travelled path draws itself along its length in step with a travelling token (pathLength="1").
   Hidden (is-off) means undrawn rather than transparent. */
.wp-svg .wp-draw path { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 640ms cubic-bezier(.3, .7, .2, 1); }
.wp-svg .wp-draw.is-off { opacity: 1; }
.wp-svg .wp-draw.is-off path { stroke-dashoffset: 1; }

/* Instant renders (previews, jumps, first paint): the player sets this while it applies a step. */
.wp-figure.wp-instant .wp-svg,
.wp-figure.wp-instant .wp-svg * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .wp-svg [data-show], .wp-svg [data-dim], .wp-svg .wp-anim, .wp-svg .wp-move { transition: none; }
  .wp-svg .wp-spin { animation: none; }
  .wp-svg .wp-draw path { transition: none; }
  .wp-svg .wp-ping { animation: none; opacity: 0; }
  .md-typeset ol.wp-figure__steps > li, .md-typeset ol.wp-figure__steps > li::before { transition: none; }
}

@media (forced-colors: active) {
  .md-typeset .wp-figure { background-image: none; }
  .wp-svg text { fill: CanvasText; }
  .wp-svg :is(.s-ink, .s-text, .s-line, .s-hair) { stroke: CanvasText; }
  .wp-svg :is(.s-gold, .s-blue, .s-green, .s-accent, .s-pink, .s-red) { stroke: Highlight; }
  .wp-svg :is(.f-ink, .f-text, .f-line, .f-hair, .f-gold, .f-blue, .f-green, .f-pink, .f-red, .f-accent) { fill: CanvasText; }
  .wp-svg :is(.f-stage, .f-current) { fill: Canvas; }
  .wp-svg :is(.tint-gold, .tint-blue, .tint-green, .tint-pink, .tint-red, .tint-ink) { fill: Canvas; }
  .md-typeset ol.wp-figure__steps > li.is-current::before { background: Highlight; color: HighlightText; }
  .md-typeset .wp-figure__number::before,
  .md-typeset .wp-figure__bar { background: CanvasText; }
  .md-typeset .wp-figure__pip.is-current::before { background: CanvasText; }
  .md-typeset .wp-figure__glyph { background: ButtonText; }
  .md-typeset .wp-doc > .wp-invariant::before { background: none; padding-inline-start: 0; }
  .md-typeset .wp-matrix .wp-can::before { background: CanvasText; }
  .md-typeset .wp-choice input:checked + span { background: Highlight; border-color: Highlight; color: HighlightText; }
}

@media (max-width: 44.9375em) {
  .md-typeset .wp-figure { margin-inline: -.8rem; border-radius: 0; border-inline: 0; }
  .md-typeset .wp-figure__stage { padding: .5rem .6rem; }
  .md-typeset .wp-doc > h1 { font-size: 1.3rem; }
  /* The exact rule wraps instead of scrolling sideways on phones. */
  .md-typeset .wp-rule pre > code { white-space: pre-wrap; overflow-wrap: anywhere; }
}