Produce ONE self-contained HTML document (embedded CSS + inline SVG, no JavaScript, no external images; Google Fonts link is allowed). It must render correctly when opened directly in a browser.
Visual design system
- Background
#020617with a subtle 40px grid pattern. - Font: JetBrains Mono (monospace) via Google Fonts.
- Component boxes: rounded rects (
rx="6"), 1.5px stroke, semi-transparent fills. Colour components by role:- facade / developer surface: fill
rgba(8,51,68,0.4), stroke#22d3ee - core contracts: fill
rgba(6,78,59,0.4), stroke#34d399 - plugins / providers: fill
rgba(120,53,15,0.3), stroke#fbbf24 - execution environment / capabilities: fill
rgba(76,29,149,0.4), stroke#a78bfa - observation / event bus: fill
rgba(251,146,60,0.3), stroke#fb923c - external / generic: fill
rgba(30,41,59,0.5), stroke#94a3b8
- facade / developer surface: fill
- Component name at 11px white bold; sublabel at 8-9px
#94a3b8. - Arrows via an SVG
markerarrowhead; draw connecting arrows before boxes so they sit behind them.
Layout rules
- Lay the system out as labelled horizontal bands stacked top-to-bottom, one band per architectural layer, with each layer's components inside its band.
- Keep ≥40px vertical gaps between stacked rows; never overlap boxes.
- Add a short header (title + subtitle) and a small legend mapping each colour to a layer. Place the legend outside every band.
Output
Return the complete HTML document as a single string. Do not include commentary outside the HTML.