Root cause of the broken diagrams found and fixed: CSS transform
animations were overriding the SVG positioning transform on the same
element, throwing animated elements (beans, flames) to the canvas
origin — the bean/flame helpers now split position (outer group) from
animation (inner group).
Every scene was then rendered in headless Chromium and screenshot-
inspected, with fixes applied and re-verified: drying-scene label
collision, RoR ideal-line label overlap, first-crack dot off the curve,
composition bar stagger orphaning its labels, moka flame hidden behind
the base.
New opening slide (user request): 'The whole journey, in one bean' — a
large bean on a 14-second loop living the full roast (heat in, drying
steam out, green→yellow→brown, pressure swell, crack) synced to a
stage timeline with a riding marker; narrated like the rest.
Co-Authored-By: Claude Fable 5 <[email protected]>
