Dark Architecture Diagram

Create standalone HTML files containing SVG architecture diagrams in a dark, technical aesthetic. The style is "cyberpunk-engineering" — dark slate backgrounds, colored layer boundaries, monospace typography, and glowing accents. Every diagram produced with this skill should look like it belongs in the same design system.

When to Use

This skill applies when creating technical architecture diagrams that need:

• Multi-layer system visualization (e.g., presentation → logic → data)
• Component relationship mapping with flow arrows
• Numbered execution step sequences
• Dark theme with high contrast and color-coded layers

Core Design Philosophy

The design language communicates hierarchy through color temperature and opacity rather than size alone. Each architectural layer gets a unique hue. Cards within layers use the layer's color at low opacity for fills and full saturation for strokes. Text hierarchy is maintained through a strict 5-level grayscale system. The overall feeling should be "a well-lit control room at night" — dark but highly readable.

File Structure

Always produce a single standalone HTML file with embedded