@kinqs/brainrouter-mcp-server 0.3.4

package/skills/design/concept-diagrams/examples/smart-city-infrastructure.md

@@ -0,0 +1,173 @@
+# Smart City Infrastructure
+
+A multi-system integration diagram showing interconnected city infrastructure (power, water, transport) connected through a central IoT platform with a citizen dashboard on top. Demonstrates hub-spoke layout, diverse physical shapes, and UI mockups.
+
+## Key Patterns Used
+
+- **Hub-spoke layout**: Central IoT platform with radiating data connections to subsystems
+- **Connection dots**: Visual indicators where data lines attach to the central hub
+- **Dashboard/UI mockup**: Screen with mini-charts, gauges, and status indicators
+- **Multi-system integration**: Three independent systems unified by central platform
+- **Semantic line styles**: Different stroke styles for data (dashed), power, water, roads
+- **Physical infrastructure shapes**: Solar panels, wind turbines, dams, pipes, roads, vehicles
+
+## New Shape Techniques
+
+### Solar Panels (angled polygons with grid lines)
+```xml
+<polygon class="solar-panel" points="0,25 35,8 38,12 3,29"/>
+<line class="solar-frame" x1="12" y1="22" x2="24" y2="13"/>
+<line x1="19" y1="29" x2="19" y2="40" stroke="#5F5E5A" stroke-width="2"/>
+```
+
+### Wind Turbine (tower + nacelle + blades)
+```xml
+<!-- Tapered tower -->
+<polygon class="wind-tower" points="20,70 30,70 28,25 22,25"/>
+<!-- Nacelle -->
+<rect class="wind-hub" x="18" y="20" width="14" height="8" rx="2"/>
+<!-- Hub -->
+<circle class="wind-hub" cx="25" cy="18" r="5"/>
+<!-- Blades (rotated ellipses) -->
+<ellipse class="wind-blade" cx="25" cy="5" rx="3" ry="13"/>
+<ellipse class="wind-blade" cx="14" cy="26" rx="3" ry="13" transform="rotate(-120, 25, 18)"/>
+<ellipse class="wind-blade" cx="36" cy="26" rx="3" ry="13" transform="rotate(120, 25, 18)"/>
+```
+
+### Battery with Charge Level
+```xml
+<rect class="battery" x="0" y="0" width="45" height="65" rx="5"/>
+<!-- Terminals -->
+<rect x="10" y="-6" width="10" height="8" rx="2" fill="#27500A"/>
+<rect x="25" y="-6" width="10" height="8" rx="2" fill="#27500A"/>
+<!-- Charge level fill -->
+<rect class="battery-level" x="5" y="12" width="35" height="48" rx="3"/>
+<text x="22" y="42" text-anchor="middle" fill="#173404" style="font-size:10px">85%</text>
+```
+
+### Dam/Reservoir with Water Waves
+```xml
+<!-- Dam wall -->
+<polygon class="reservoir-wall" points="0,60 10,0 70,0 80,60"/>
+<!-- Water behind dam -->
+<polygon class="water" points="12,10 68,10 68,55 75,55 75,58 5,58 5,55 12,55"/>
+<!-- Wave effect -->
+<path d="M 15 25 Q 25 22 35 25 Q 45 28 55 25" fill="none" stroke="#378ADD" stroke-width="1" opacity="0.5"/>
+```
+
+### Pipe Network with Joints and Valves
+```xml
+<path class="pipe" d="M 80 85 L 110 85"/>
+<circle class="pipe-joint" cx="10" cy="30" r="8"/>
+<circle class="valve" cx="190" cy="85" r="6"/>
+<!-- Distribution branches -->
+<path class="pipe-thin" d="M 18 30 L 50 30"/>
+<path class="pipe-thin" d="M 10 22 L 10 5 L 50 5"/>
+```
+
+### Road Intersection with Lane Markings
+```xml
+<!-- Road surface -->
+<line class="road" x1="0" y1="50" x2="170" y2="50"/>
+<line class="road-mark" x1="10" y1="50" x2="160" y2="50"/>
+<!-- Cross road -->
+<line class="road" x1="85" y1="0" x2="85" y2="100"/>
+<line class="road-mark" x1="85" y1="10" x2="85" y2="90"/>
+<!-- Embedded sensors -->
+<circle class="sensor" cx="40" cy="50" r="5"/>
+```
+
+### Traffic Light with Signal States
+```xml
+<rect class="traffic-light" x="0" y="0" width="14" height="32" rx="3"/>
+<circle class="light-red" cx="7" cy="8" r="4"/>
+<circle class="light-off" cx="7" cy="16" r="4"/>
+<circle class="light-off" cx="7" cy="24" r="4"/>
+```
+
+### Bus with Windows and Wheels
+```xml
+<rect class="bus" x="0" y="0" width="55" height="28" rx="6"/>
+<!-- Windows -->
+<rect class="bus-window" x="5" y="5" width="12" height="12" rx="2"/>
+<rect class="bus-window" x="20" y="5" width="12" height="12" rx="2"/>
+<!-- Wheels with hubcaps -->
+<circle cx="14" cy="30" r="6" fill="#2C2C2A"/>
+<circle cx="14" cy="30" r="3" fill="#5F5E5A"/>
+```
+
+### Dashboard UI Mockup
+```xml
+<!-- Monitor frame -->
+<rect class="dashboard" x="0" y="0" width="200" height="120" rx="8"/>
+<!-- Screen -->
+<rect class="screen" x="10" y="10" width="180" height="85" rx="4"/>
+<!-- Mini bar chart -->
+<rect class="screen-content" x="18" y="18" width="50" height="35" rx="2"/>
+<rect class="screen-chart" x="22" y="38" width="8" height="12"/>
+<rect class="screen-chart" x="33" y="32" width="8" height="18"/>
+<!-- Gauge -->
+<circle class="screen-bar" cx="100" cy="35" r="12"/>
+<text x="100" y="39" text-anchor="middle" fill="#E8E6DE" style="font-size:8px">78%</text>
+<!-- Status indicators -->
+<circle cx="35" cy="74" r="6" fill="#97C459"/>
+<circle cx="75" cy="74" r="6" fill="#97C459"/>
+<circle cx="115" cy="74" r="6" fill="#EF9F27"/>
+```
+
+### Hexagonal IoT Hub with Connection Points
+```xml
+<!-- Outer hexagon -->
+<polygon class="iot-hex" points="0,-45 39,-22 39,22 0,45 -39,22 -39,-22"/>
+<!-- Inner hexagon -->
+<polygon class="iot-inner" points="0,-20 17,-10 17,10 0,20 -17,10 -17,-10"/>
+<!-- Connection dots on data lines -->
+<circle cx="321" cy="248" r="4" fill="#7F77DD"/>
+```
+
+## CSS Classes for Infrastructure
+
+```css
+/* Power system */
+.solar-panel { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
+.solar-frame { fill: none; stroke: #EEEDFE; stroke-width: 0.5; }
+.wind-tower { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
+.wind-blade { fill: #F1EFE8; stroke: #888780; stroke-width: 0.5; }
+.battery { fill: #27500A; stroke: #3B6D11; stroke-width: 1.5; }
+.battery-level { fill: #97C459; }
+.power-line { stroke: #EF9F27; stroke-width: 2; fill: none; }
+
+/* Water system */
+.reservoir-wall { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
+.water { fill: #85B7EB; stroke: #378ADD; stroke-width: 0.5; }
+.pipe { fill: none; stroke: #378ADD; stroke-width: 4; stroke-linecap: round; }
+.pipe-joint { fill: #185FA5; stroke: #0C447C; stroke-width: 1; }
+.valve { fill: #0C447C; stroke: #185FA5; stroke-width: 1; }
+
+/* Transport */
+.road { stroke: #888780; stroke-width: 8; fill: none; stroke-linecap: round; }
+.road-mark { stroke: #F1EFE8; stroke-width: 1; fill: none; stroke-dasharray: 6 4; }
+.traffic-light { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
+.light-red { fill: #E24B4A; }
+.light-green { fill: #97C459; }
+.light-off { fill: #2C2C2A; }
+.bus { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1.5; }
+
+/* Data/IoT */
+.data-line { stroke: #7F77DD; stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
+.iot-hex { fill: #EEEDFE; stroke: #534AB7; stroke-width: 2; }
+
+/* Dashboard */
+.dashboard { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1.5; }
+.screen { fill: #1a1a18; }
+.screen-chart { fill: #5DCAA5; }
+```
+
+## Layout Notes
+
+- **ViewBox**: 720×620 (wider for three-column system layout)
+- **Hub position**: Central IoT at (360, 270) - geometric center
+- **Data lines**: Use quadratic curves or L-shaped paths, add connection dots at hub attachment points
+- **System spacing**: ~200px width per system section
+- **Vertical layers**: Dashboard (top) → IoT Hub (middle) → Systems (bottom)
+- **Component grouping**: Use `<g transform="translate(x,y)">` for each major component for easy positioning

package/skills/design/concept-diagrams/examples/smartphone-layer-anatomy.md

@@ -0,0 +1,154 @@
+# Smartphone Layer Anatomy
+
+An exploded view diagram showing all internal layers of a smartphone from front glass to back, with alternating left/right labels to avoid overlap. Demonstrates layered product teardown visualization and component detail.
+
+## Key Patterns Used
+
+- **Exploded vertical stack**: Layers separated vertically to show internal structure
+- **Alternating labels**: Left/right label placement prevents text overlap
+- **Component detail**: Chips, coils, lenses rendered with realistic shapes
+- **Thickness scale**: Measurement indicator on the side
+- **Progressive depth**: Each layer slightly offset to create 3D stack effect
+
+## New Shape Techniques
+
+### Capacitive Touch Grid
+```xml
+<rect class="digitizer" x="0" y="0" width="140" height="90" rx="14"/>
+<g transform="translate(8, 8)">
+  <!-- Horizontal lines -->
+  <line class="digitizer-grid" x1="0" y1="15" x2="124" y2="15"/>
+  <line class="digitizer-grid" x1="0" y1="37" x2="124" y2="37"/>
+  <!-- Vertical lines -->
+  <line class="digitizer-grid" x1="20" y1="0" x2="20" y2="74"/>
+  <line class="digitizer-grid" x1="50" y1="0" x2="50" y2="74"/>
+</g>
+<!-- Touch point indicator -->
+<circle cx="70" cy="45" r="12" fill="none" stroke="#7F77DD" stroke-width="2" opacity="0.6"/>
+<circle cx="70" cy="45" r="5" fill="#7F77DD" opacity="0.4"/>
+```
+
+### OLED RGB Subpixels
+```xml
+<rect class="oled-panel" x="0" y="0" width="140" height="90" rx="12"/>
+<g transform="translate(10, 10)">
+  <!-- RGB pixel group -->
+  <rect class="oled-subpixel-r" x="0" y="0" width="2" height="6"/>
+  <rect class="oled-subpixel-g" x="3" y="0" width="2" height="6"/>
+  <rect class="oled-subpixel-b" x="6" y="0" width="2" height="6"/>
+  <!-- Repeat pattern -->
+  <rect class="oled-subpixel-r" x="11" y="0" width="2" height="6"/>
+  <rect class="oled-subpixel-g" x="14" y="0" width="2" height="6"/>
+  <rect class="oled-subpixel-b" x="17" y="0" width="2" height="6"/>
+</g>
+```
+
+### Logic Board with Chips
+```xml
+<rect class="pcb" x="0" y="0" width="116" height="106" rx="3"/>
+<!-- PCB traces -->
+<path class="pcb-trace" d="M 8 50 L 30 50 L 30 35"/>
+
+<!-- CPU chip -->
+<rect class="chip-cpu" x="30" y="20" width="55" height="35" rx="3"/>
+<text class="chip-label" x="57" y="35" text-anchor="middle">A17 Pro</text>
+
+<!-- RAM chip -->
+<rect class="chip-ram" x="30" y="62" width="35" height="18" rx="2"/>
+<text class="chip-label" x="47" y="74" text-anchor="middle">8GB RAM</text>
+
+<!-- Storage chip -->
+<rect class="chip-storage" x="30" y="85" width="55" height="16" rx="2"/>
+<text class="chip-label" x="57" y="96" text-anchor="middle">256GB NAND</text>
+```
+
+### Camera Lens Array
+```xml
+<!-- Main camera -->
+<circle class="camera-lens" cx="20" cy="20" r="18"/>
+<circle class="camera-lens-inner" cx="20" cy="20" r="13"/>
+<circle class="camera-sensor" cx="20" cy="20" r="8"/>
+<circle cx="20" cy="20" r="3" fill="#1a1a18"/>
+
+<!-- Secondary camera (smaller) -->
+<circle class="camera-lens" cx="15" cy="15" r="13"/>
+<circle class="camera-lens-inner" cx="15" cy="15" r="9"/>
+<circle class="camera-sensor" cx="15" cy="15" r="5"/>
+```
+
+### Wireless Charging Coil with Magnets
+```xml
+<!-- Concentric coil rings -->
+<circle class="charging-coil-outer" cx="0" cy="0" r="30"/>
+<circle class="charging-coil" cx="0" cy="0" r="23"/>
+<circle class="charging-coil" cx="0" cy="0" r="16"/>
+<circle class="charging-coil" cx="0" cy="0" r="9"/>
+
+<!-- MagSafe magnet ring -->
+<circle class="magnet" cx="0" cy="-35" r="3"/>
+<circle class="magnet" cx="25" cy="-25" r="3"/>
+<circle class="magnet" cx="35" cy="0" r="3"/>
+<circle class="magnet" cx="25" cy="25" r="3"/>
+<!-- ... continue around circle -->
+```
+
+### Battery Cell
+```xml
+<rect class="battery" x="0" y="0" width="140" height="90" rx="10"/>
+<rect class="battery-cell" x="10" y="12" width="120" height="60" rx="6"/>
+
+<text x="70" y="38" text-anchor="middle" fill="#27500A" style="font-size:9px">Li-Ion Polymer</text>
+<text x="70" y="52" text-anchor="middle" fill="#27500A" style="font-size:12px; font-weight:bold">4422 mAh</text>
+
+<rect class="battery-connector" x="55" y="75" width="30" height="10" rx="2"/>
+```
+
+## CSS Classes
+
+```css
+/* Glass */
+.front-glass { fill: #E8E6DE; stroke: #888780; stroke-width: 1; opacity: 0.9; }
+.back-glass { fill: #2C2C2A; stroke: #444441; stroke-width: 1; }
+
+/* Touch digitizer */
+.digitizer { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
+.digitizer-grid { stroke: #AFA9EC; stroke-width: 0.3; fill: none; }
+
+/* OLED */
+.oled-panel { fill: #1a1a18; stroke: #444441; stroke-width: 1; }
+.oled-subpixel-r { fill: #E24B4A; }
+.oled-subpixel-g { fill: #97C459; }
+.oled-subpixel-b { fill: #378ADD; }
+
+/* Midframe */
+.midframe { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1.5; }
+
+/* Logic board */
+.pcb { fill: #0F6E56; stroke: #085041; stroke-width: 1; }
+.pcb-trace { stroke: #5DCAA5; stroke-width: 0.3; fill: none; }
+.chip-cpu { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
+.chip-ram { fill: #185FA5; stroke: #378ADD; stroke-width: 0.5; }
+.chip-storage { fill: #27500A; stroke: #3B6D11; stroke-width: 0.5; }
+
+/* Battery */
+.battery { fill: #EAF3DE; stroke: #3B6D11; stroke-width: 1.5; }
+.battery-cell { fill: #97C459; stroke: #639922; stroke-width: 0.5; }
+
+/* Camera */
+.camera-lens { fill: #0C447C; stroke: #185FA5; stroke-width: 0.5; }
+.camera-lens-inner { fill: #1a1a18; stroke: #378ADD; stroke-width: 0.3; }
+.camera-sensor { fill: #3C3489; stroke: #534AB7; stroke-width: 0.3; }
+
+/* Wireless charging */
+.charging-coil { fill: none; stroke: #EF9F27; stroke-width: 1.5; }
+.magnet { fill: #5F5E5A; stroke: #444441; stroke-width: 0.5; }
+```
+
+## Layout Notes
+
+- **ViewBox**: 900×780 (tall for vertical stack)
+- **Layer offset**: Each layer offset 10px right and down for depth effect
+- **Label alternation**: Odd layers → RIGHT labels, Even layers → LEFT labels
+- **Thickness scale**: Vertical measurement bar on left side
+- **Front/Back markers**: Text labels at top and bottom
+- **Chip labels**: Use small white text (6px) directly on chip shapes

package/skills/design/concept-diagrams/examples/sn2-reaction-mechanism.md

@@ -0,0 +1,247 @@
+# SN2 Reaction Mechanism
+
+A chemistry diagram showing the bimolecular nucleophilic substitution (SN2) mechanism between hydroxide ion and methyl bromide. Demonstrates molecular structure rendering, electron movement arrows, transition state notation, and reaction energy profiles.
+
+## Key Patterns Used
+
+- **Molecular structures**: Ball-and-stick style atoms with bonds
+- **Electron movement**: Curved arrows showing nucleophilic attack
+- **Transition state**: Bracketed pentacoordinate intermediate with partial charges
+- **Stereochemistry**: Wedge/dash bonds showing 3D configuration
+- **Energy profile**: Potential energy vs reaction coordinate plot
+- **Annotation boxes**: Key features and mechanistic notes
+
+## Diagram Type
+
+This is a **chemistry mechanism diagram** with:
+- **Molecular rendering**: Atoms as colored circles with element symbols
+- **Bond notation**: Solid, wedge, dash, and partial (dashed) bonds
+- **Reaction arrows**: Curved for electron movement, straight for reaction progress
+- **Energy landscape**: Quantitative energy profile below mechanism
+
+## Molecular Structure Elements
+
+### Atom Rendering
+
+```xml
+<!-- Carbon atom (dark) -->
+<circle cx="0" cy="0" r="14" class="carbon"/>
+<text class="chem" x="0" y="5" text-anchor="middle" fill="white" font-weight="500">C</text>
+
+<!-- Oxygen atom (red) -->
+<circle cx="0" cy="0" r="14" class="oxygen"/>
+<text class="chem" x="0" y="5" text-anchor="middle" fill="white" font-weight="500">O</text>
+
+<!-- Hydrogen atom (light with border) -->
+<circle cx="38" cy="0" r="8" class="hydrogen"/>
+<text class="chem-sm" x="38" y="4" text-anchor="middle">H</text>
+
+<!-- Bromine atom (brown) -->
+<circle cx="52" cy="0" r="16" class="bromine"/>
+<text class="chem" x="52" y="5" text-anchor="middle" fill="white" font-weight="500">Br</text>
+```
+
+```css
+.carbon { fill: #2C2C2A; }
+.hydrogen { fill: #F1EFE8; stroke: #888780; stroke-width: 1; }
+.oxygen { fill: #E24B4A; }
+.bromine { fill: #993C1D; }
+.nitrogen { fill: #378ADD; }  /* for other reactions */
+```
+
+### Bond Types
+
+```xml
+<!-- Single bond (solid) -->
+<line x1="14" y1="0" x2="38" y2="0" class="bond"/>
+
+<!-- Wedge bond (coming toward viewer) -->
+<polygon class="bond-wedge" points="0,-14 -6,-35 6,-35"/>
+
+<!-- Dash bond (going away from viewer) -->
+<line x1="-10" y1="10" x2="-28" y2="28" class="bond-dash"/>
+
+<!-- Partial bond (forming/breaking) -->
+<line x1="-40" y1="0" x2="-14" y2="0" class="bond-partial"/>
+```
+
+```css
+.bond { stroke: var(--text-primary); stroke-width: 2.5; fill: none; stroke-linecap: round; }
+.bond-thin { stroke: var(--text-primary); stroke-width: 1.5; fill: none; }
+.bond-partial { stroke: var(--text-primary); stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
+.bond-wedge { fill: var(--text-primary); stroke: none; }
+.bond-dash { stroke: var(--text-primary); stroke-width: 2; fill: none; stroke-dasharray: 2 2; }
+```
+
+### Lone Pairs and Charges
+
+```xml
+<!-- Lone pair electrons (dots) -->
+<circle cx="-8" cy="-18" r="2" fill="var(--text-primary)"/>
+<circle cx="0" cy="-18" r="2" fill="var(--text-primary)"/>
+
+<!-- Formal negative charge -->
+<text class="charge" x="12" y="-12" fill="#A32D2D" font-weight="bold">⊖</text>
+
+<!-- Partial charges (delta notation) -->
+<text class="partial" x="0" y="-18" text-anchor="middle" fill="#A32D2D">δ⁻</text>
+<text class="partial" x="0" y="-22" text-anchor="middle" fill="#3B6D11">δ⁺</text>
+```
+
+```css
+.charge { font-family: "Times New Roman", Georgia, serif; font-size: 12px; }
+.partial { font-family: "Times New Roman", Georgia, serif; font-size: 11px; font-style: italic; }
+```
+
+### Curved Arrow (Electron Movement)
+
+```xml
+<defs>
+  <marker id="curved-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
+    <path d="M0,0 L10,5 L0,10 L3,5 Z" class="arrow-fill"/>
+  </marker>
+</defs>
+
+<!-- Nucleophilic attack arrow -->
+<path d="M -5,15 Q 30,60 70,25" class="arrow-curved" marker-end="url(#curved-arrow)"/>
+```
+
+```css
+.arrow-curved { stroke: #534AB7; stroke-width: 2; fill: none; }
+.arrow-fill { fill: #534AB7; }
+```
+
+### Transition State Brackets
+
+```xml
+<!-- Left bracket -->
+<path d="M -75,-70 L -85,-70 L -85,75 L -75,75" class="ts-bracket"/>
+
+<!-- Right bracket -->
+<path d="M 95,-70 L 105,-70 L 105,75 L 95,75" class="ts-bracket"/>
+
+<!-- Double dagger symbol -->
+<text class="chem" x="115" y="-60" fill="var(--text-primary)">‡</text>
+```
+
+```css
+.ts-bracket { stroke: var(--text-primary); stroke-width: 1.5; fill: none; }
+```
+
+## Energy Profile Diagram
+
+### Axes
+
+```xml
+<!-- Y-axis (Energy) -->
+<line x1="0" y1="280" x2="0" y2="0" class="axis" marker-end="url(#straight-arrow)"/>
+<text class="t" x="-15" y="-10" text-anchor="middle" transform="rotate(-90 -15 140)">Potential Energy</text>
+
+<!-- X-axis (Reaction Coordinate) -->
+<line x1="0" y1="280" x2="600" y2="280" class="axis" marker-end="url(#straight-arrow)"/>
+<text class="t" x="580" y="305" text-anchor="middle">Reaction Coordinate</text>
+```
+
+### Energy Curve
+
+```xml
+<!-- Filled area under curve -->
+<path class="energy-fill" d="
+  M 40,200 
+  Q 150,200 250,50 
+  Q 350,200 500,220 
+  L 500,280 L 40,280 Z
+"/>
+
+<!-- Curve line -->
+<path class="energy-curve" d="
+  M 40,200 
+  Q 100,200 150,150
+  Q 200,80 250,50 
+  Q 300,80 350,150
+  Q 400,210 500,220
+"/>
+```
+
+```css
+.energy-curve { stroke: #534AB7; stroke-width: 2.5; fill: none; }
+.energy-fill { fill: rgba(83, 74, 183, 0.1); }
+```
+
+### Energy Levels and Annotations
+
+```xml
+<!-- Reactants level -->
+<line x1="20" y1="200" x2="80" y2="200" stroke="#3B6D11" stroke-width="2"/>
+<text class="ts" x="50" y="218" text-anchor="middle">Reactants</text>
+
+<!-- Transition state peak -->
+<circle cx="250" cy="50" r="5" fill="#534AB7"/>
+<line x1="250" y1="50" x2="250" y2="280" class="energy-level"/>
+<text class="ts" x="250" y="30" text-anchor="middle" fill="#534AB7" font-weight="500">Transition State [‡]</text>
+
+<!-- Products level (lower = exergonic) -->
+<line x1="470" y1="220" x2="530" y2="220" stroke="#3B6D11" stroke-width="2"/>
+
+<!-- Activation energy arrow -->
+<line x1="100" y1="200" x2="100" y2="55" class="delta-arrow" marker-end="url(#delta-arrow)"/>
+<text class="ts" x="85" y="125" text-anchor="end" fill="#3B6D11">E<tspan baseline-shift="sub" font-size="8">a</tspan></text>
+```
+
+```css
+.energy-level { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 4 2; fill: none; }
+.delta-arrow { stroke: #3B6D11; stroke-width: 1.5; fill: none; }
+.delta-fill { fill: #3B6D11; }
+```
+
+## Chemistry Text Styles
+
+```css
+/* Chemistry notation (serif font for formulas) */
+.chem { font-family: "Times New Roman", Georgia, serif; font-size: 16px; fill: var(--text-primary); }
+.chem-sm { font-family: "Times New Roman", Georgia, serif; font-size: 12px; fill: var(--text-primary); }
+.chem-lg { font-family: "Times New Roman", Georgia, serif; font-size: 18px; fill: var(--text-primary); }
+```
+
+## Subscript/Superscript in SVG
+
+```xml
+<!-- Subscript using tspan -->
+<text class="ts">E<tspan baseline-shift="sub" font-size="8">a</tspan></text>
+
+<!-- Superscript for charges -->
+<text class="chem-sm">OH⁻</text>  <!-- Using Unicode superscript minus -->
+<text class="chem-sm">CH₃Br</text>  <!-- Using Unicode subscript 3 -->
+```
+
+## Color Coding
+
+| Element | Color | Hex |
+|---------|-------|-----|
+| Carbon | Dark gray | #2C2C2A |
+| Hydrogen | Light cream | #F1EFE8 |
+| Oxygen | Red | #E24B4A |
+| Bromine | Brown | #993C1D |
+| Nitrogen | Blue | #378ADD |
+| Electron arrows | Purple | #534AB7 |
+| Positive charge | Green | #3B6D11 |
+| Negative charge | Red | #A32D2D |
+
+## Layout Notes
+
+- **ViewBox**: 800×680 (landscape for mechanism + energy profile)
+- **Mechanism section**: y=60-300, showing reactants → TS → products
+- **Energy profile**: y=320-630, with axes and curve
+- **Atom sizes**: C/O/Br ~12-16px radius, H ~7-8px radius
+- **Bond lengths**: ~25-40px between atom centers
+- **Spacing**: ~140px between mechanism stages
+
+## When to Use This Pattern
+
+Use this diagram style for:
+- Organic reaction mechanisms (SN1, SN2, E1, E2, additions, eliminations)
+- Reaction energy profiles and kinetics
+- Stereochemistry illustrations
+- Enzyme mechanism diagrams
+- Transition state theory visualization
+- Any chemistry concept requiring molecular structures