2D animated cutaway of a two-stroke engine

GOAL: Build a 2D animated cutaway of a two-stroke engine called "TWO STROKE" — a clean technical loop that shows the full cycle in one crankshaft revolution. MOTION: STYLE (strict) Flat 2D technical cross-section on a deep navy background (#0b1220 or similar), like a premium engineering explainer. Clean shapes with soft shading, thin light outlines, a subtle hatched pattern on cut metal walls. Palette: light steel-grey metal; fresh fuel-air mixture in blue; burning gas in orange to white; exhaust in smoky grey. One square composition (1:1), the engine centred and filling ~75% of the square. NO on-screen UI, no title, no labels by default. THE ENGINE (must be mechanically correct) Side cross-section of a single-cylinder crankcase-scavenged two-stroke:cylinder with cooling fins; cylinder head with a spark plug; piston with rings; connecting rod, crankshaft with a counterweight, sealed crankcase; intake port with a reed valve (petals that flex open and closed); a transfer port connecting the crankcase to the cylinder; an exhaust port leading into the start of an expansion pipe. The piston itself opens and closes the ports by covering and uncovering them, so the port timing comes from piston position. One power stroke per crankshaft revolution. THE CYCLE (driven by one crank angle, all motion synchronized) Upstroke: the piston compresses the mixture above it. Below it, crankcase pressure drops, the reed valve petals open and fresh blue mixture flows into the crankcase. Near top dead centre: the spark plug fires and an orange flame front spreads from the plug. Downstroke: hot gas pushes the piston down and the reed valve closes. The crankcase mixture gets compressed. The piston uncovers the exhaust port FIRST and grey exhaust blows out. Then it uncovers the transfer port: compressed blue mixture rushes up into the cylinder, loops over and pushes the remaining exhaust out (scavenging), with a little fresh mixture escaping into the exhaust. Gases are animated as flowing particles or smooth fluid shapes that follow the passages, never crossing through solid walls. ANIMATION (starts on load) Seamless loop of ~10–12 s: the engine spins slowly enough to read the whole cycle (about one revolution every 2.5–3 s), with a brief 0.5× slow-down around the moment the ports open. Subtle heat glow on the cylinder head after each ignition, a small vibration of the engine. KEYBOARD (optional, nothing visible on screen) Space pauses, S toggles slow motion, L toggles small labels (piston, reed valve, transfer port, exhaust port, spark plug), arrow keys change speed. TECHNICAL Canvas or SVG, any libraries you like (loaded from a CDN). Everything works by opening index.html directly in the browser: no build step, no local server. Starts automatically on load, no Start button. Smooth 60 fps. The square stays centred and as large as possible at any window size, including phones. Original content only. When finished, open the page, check the port timing (exhaust opens befor