/* Rosie 1400 taught-program hero (Schools). The static drawing (.live-still, see styles.css) keeps the footprint; the
   canvas stage is laid exactly over the img box and fades in once the first frame is drawn. */
.hero-figure.rp { position: relative; }
.rp .rp-stage { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.rp .rp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--ink); }
.rp.is-live .rp-stage { opacity: 1; }

/* HUD: the page's micro-label style, quiet, in the figure corner */
.rp .rp-hud { position: absolute; left: 0; top: 0; display: grid; gap: .3rem; pointer-events: none; opacity: 0; transition: opacity .7s ease .2s; }
.rp .rp-hud .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rp.is-live .rp-hud { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rp .rp-stage, .rp .rp-hud { transition: none; }
}