/* PowderedPurple how-to animations: styles (draft, 14 Oct 2026). Colours follow the site tokens with fallbacks.
   State is never carried by colour alone: bars carry numbers and words, the short bar is hatched, zones are labelled. */
figure.pp-anim{--pa-ink:var(--pp-ink,#211631);--pa-violet:var(--pp-violet,#6f3fb0);--pa-plum:var(--pp-plum,#4b246f);--pa-line:var(--pp-line,#e3dcf0);--pa-soft:#f1ebfa;--pa-amber:#d79a37;
  margin:1.6rem 0;padding:14px 14px 10px;border:1.5px solid var(--pa-amber);border-radius:12px;background:#fff}
figure.pp-anim svg{display:block;width:100%;height:auto;max-height:420px}
figure.pp-anim:not(.is-ready) svg{min-height:120px;background:var(--pa-soft);border-radius:8px}
figure.pp-anim figcaption{margin-top:.6rem;font-size:.92rem;line-height:1.5;color:var(--pp-ink-2,#4a3a63)}
figure.pp-anim figcaption strong{color:var(--pa-ink)}
.pp-anim-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:.5rem}
.pp-anim-controls button{font:600 .85rem/1 inherit;font-family:inherit;padding:.55rem .95rem;min-height:40px;border-radius:999px;border:1.5px solid var(--pa-violet);background:#fff;color:var(--pa-plum);cursor:pointer}
.pp-anim-controls button:hover,.pp-anim-controls button:focus-visible{background:var(--pa-violet);color:#fff;outline:none}
.pp-anim-controls button:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pa-violet)}

.pp-anim text{font-family:inherit;fill:var(--pa-ink)}
.pp-anim .pa-label{font-size:15px;font-weight:600}
.pp-anim .pa-small{font-size:12.5px;fill:#5b4a73}
.pp-anim .pa-note{font-size:13px;fill:#5b4a73;font-style:italic}
.pp-anim .pa-note-left{font-size:14px;font-weight:600}
.pp-anim .pa-readout{font-size:22px;font-weight:700;fill:var(--pa-plum)}
.pp-anim .pa-barnum{font-size:15px;font-weight:700;fill:#fff}
.pp-anim .pa-barnum-dark{fill:var(--pa-ink);paint-order:stroke;stroke:#fff;stroke-width:5px;stroke-linejoin:round}
.pp-anim .pa-zonelabel{font-size:13.5px;font-weight:700}
.pp-anim .pa-step{font-size:15px;font-weight:600}

.pp-anim .pa-hair{stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pp-anim .pa-hair-0{stroke:#4b246f}.pp-anim .pa-hair-1{stroke:#2b1b45}.pp-anim .pa-hair-2{stroke:#6f3fb0}
.pp-anim .pa-weft{fill:var(--pa-plum)}
.pp-anim .pa-ruler{fill:#f6e3b4;stroke:var(--pa-amber);stroke-width:1.5}
.pp-anim .pa-tick{stroke:#5b4a73;stroke-width:1.5}
.pp-anim .pa-guide{stroke:#8d7aa9;stroke-width:1.5;stroke-dasharray:5 5}
.pp-anim .pa-guide-end{stroke:var(--pa-violet);stroke-width:2.5}
.pp-anim .pa-guide-need{stroke:var(--pa-plum);stroke-width:2.5}
.pp-anim .pa-track{fill:var(--pa-soft)}
.pp-anim .pa-fill-ok{fill:var(--pa-violet)}
.pp-anim .pa-fill-short{stroke:var(--pa-plum);stroke-width:2}
.pp-anim .pa-comb{fill:var(--pa-amber);stroke:#8a5a0a;stroke-width:1}
.pp-anim .pa-knot{fill:#e9d8f7;stroke:var(--pa-plum);stroke-width:2.5}
.pp-anim .pa-zone-ok{fill:#d9c9f1}
.pp-anim .pa-zone-mid{fill:#f6e3b4}
.pp-anim .pa-zone-hot{stroke:var(--pa-plum);stroke-width:1.5}
.pp-anim .pa-needle{fill:var(--pa-plum)}
.pp-anim .pa-needle-line{stroke:var(--pa-plum);stroke-width:3}
.pp-anim .pa-step-ring{fill:#fff;stroke:#b9a6d9;stroke-width:3}
.pp-anim .pa-ico{fill:#cdbbe8;stroke:var(--pa-plum);stroke-width:2.5;stroke-linejoin:round}
.pp-anim .pa-ico-line{fill:none;stroke:var(--pa-plum);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pp-anim .pa-step-g{opacity:.42;transition:opacity .35s}
.pp-anim .pa-step-g.is-on{opacity:1}
.pp-anim .pa-step-g.is-on .pa-step-ring{stroke:var(--pa-violet)}
.pp-anim .pa-progress{stroke:var(--pa-violet);stroke-width:5;stroke-linecap:round}

@media (prefers-reduced-motion:reduce){.pp-anim .pa-step-g{transition:none}}
/* compact layout (figure narrower than 520 px): drawn in 400 units, so text is sized up to stay near 12 px on a phone */
figure.pp-anim.is-compact .pa-label{font-size:16.5px}figure.pp-anim.is-compact .pa-small{font-size:14px}figure.pp-anim.is-compact .pa-note{font-size:14px}figure.pp-anim.is-compact .pa-note-left{font-size:15.5px}figure.pp-anim.is-compact .pa-readout{font-size:23px}figure.pp-anim.is-compact .pa-barnum{font-size:16px}figure.pp-anim.is-compact .pa-step{font-size:15px}

.prose .guide-table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:1rem;line-height:1.5}
.prose .guide-table th,.prose .guide-table td{padding:.6rem .8rem;border:1px solid var(--pp-line,#e3dcf0);text-align:left}
.prose .guide-table thead th{background:#f1ebfa;color:#211631}
.prose .callout li strong{display:inline;margin:0;font-family:inherit;font-size:inherit;color:inherit}