SOIL Interactive HTML Deck

Create an HTML deck as the interactive superset of SOIL Image Deck. Share the same SOIL teaching flow, page architecture, design system, controlled layout router, image briefs, and YAML core. Render live text and interaction with HTML/CSS/JS instead of turning the deck into an image slideshow.

Output Contract

• Produce one browser-openable .html file with inline CSS and JS.
• Embed accepted images as data:image/...;base64,... for a portable final file.
• Keep titles, paragraphs, labels, cards, tables, formulas, charts, decision nodes, and controls as live HTML, SVG, Canvas, or math markup.
• Permit baked text only on intentional cover, section-divider, or closing hero images.
• Use built-in image generation for AI visual assets. Do not replace requested AI visuals with procedural placeholders.
• Preserve keyboard, mouse, and touch navigation; include reduced-motion behavior and a no-interaction fallback.

Shared SOIL Core

Start from the renderer-neutral fields in references/soil-deck-core.md. Extend them with HTML interaction and accessibility fields from assets/interactive-spec-template.yaml.

Use these configuration axes: