@kinqs/brainrouter-mcp-server 0.3.4

package/skills/design/concept-diagrams/examples/autonomous-llm-research-agent-flow.md

@@ -0,0 +1,240 @@
+# Autonomous LLM Research Agent Flow
+
+A multi-section flowchart showing Karpathy's autoresearch framework: human-agent handoff, the autonomous experiment loop with keep/discard decision branching, and the modifiable training pipeline. Demonstrates loop-back arrows, convergent decision paths, and semantic color coding for outcomes.
+
+## Key Patterns Used
+
+- **Three-section layout**: Setup row, main loop container, and detail container — each visually distinct
+- **Neutral dashed containers**: Loop and training pipeline use `var(--bg-secondary)` fill with dashed borders to recede behind colored content nodes
+- **Decision branching with convergence**: "val_bpb improved?" splits into Keep (green) and Discard (red), then both converge back to "Log to results.tsv"
+- **Loop-back arrow**: Dashed path with rounded corners on the right side of the container showing infinite repetition
+- **Semantic color for outcomes**: Green = improvement (keep), Red = no improvement (discard) — not arbitrary decoration
+- **Highlighted key step**: "Run training" uses `c-coral` to visually distinguish the most important step from other `c-teal` actions
+- **Horizontal pipeline flow**: Training details section uses left-to-right arrow-connected nodes (GPT → MuonAdamW → Evaluation)
+- **Footer metadata**: Fixed constraints shown as subtle centered text below the pipeline nodes
+- **Legend row**: Color key at the bottom explaining what each color means
+
+## Diagram
+
+```xml
+<svg width="100%" viewBox="0 0 680 920" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
+            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </marker>
+  </defs>
+
+  <!-- ========================================== -->
+  <!-- SECTION 1: SETUP (Human → program.md → AI) -->
+  <!-- ========================================== -->
+
+  <text class="ts" x="40" y="30" text-anchor="start" opacity=".5">One-time setup</text>
+
+  <!-- Human -->
+  <g class="node c-gray">
+    <rect x="60" y="42" width="140" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="130" y="62" text-anchor="middle" dominant-baseline="central">Human</text>
+    <text class="ts" x="130" y="82" text-anchor="middle" dominant-baseline="central">Researcher</text>
+  </g>
+
+  <!-- Arrow: Human → program.md -->
+  <line x1="200" y1="70" x2="250" y2="70" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- program.md -->
+  <g class="node c-gray">
+    <rect x="250" y="42" width="180" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="340" y="62" text-anchor="middle" dominant-baseline="central">program.md</text>
+    <text class="ts" x="340" y="82" text-anchor="middle" dominant-baseline="central">Agent instructions</text>
+  </g>
+
+  <!-- Arrow: program.md → AI Agent -->
+  <line x1="430" y1="70" x2="470" y2="70" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- AI Agent -->
+  <g class="node c-purple">
+    <rect x="470" y="42" width="160" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="550" y="62" text-anchor="middle" dominant-baseline="central">AI agent</text>
+    <text class="ts" x="550" y="82" text-anchor="middle" dominant-baseline="central">Claude / Codex</text>
+  </g>
+
+  <!-- Arrow: Setup row → Loop (from program.md center down) -->
+  <line x1="340" y1="98" x2="340" y2="142" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- ========================================== -->
+  <!-- SECTION 2: AUTONOMOUS EXPERIMENT LOOP      -->
+  <!-- ========================================== -->
+
+  <!-- Loop container (neutral dashed) -->
+  <g>
+    <rect x="40" y="142" width="600" height="528" rx="16"
+          stroke-width="1" stroke-dasharray="6 4"
+          fill="var(--bg-secondary)" stroke="var(--border)"/>
+    <text class="th" x="66" y="170">Autonomous experiment loop</text>
+    <text class="ts" x="66" y="188">~12 experiments/hour — runs until manually stopped</text>
+  </g>
+
+  <!-- Step 1: Read code + past results -->
+  <g class="node c-teal">
+    <rect x="170" y="208" width="280" height="44" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="230" text-anchor="middle" dominant-baseline="central">Read code + past results</text>
+  </g>
+
+  <!-- Arrow: S1 → S2 -->
+  <line x1="310" y1="252" x2="310" y2="274" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 2: Propose + edit train.py -->
+  <g class="node c-teal">
+    <rect x="170" y="274" width="280" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="294" text-anchor="middle" dominant-baseline="central">Propose + edit train.py</text>
+    <text class="ts" x="310" y="314" text-anchor="middle" dominant-baseline="central">Arch, optimizer, hyperparameters</text>
+  </g>
+
+  <!-- Arrow: S2 → S3 -->
+  <line x1="310" y1="330" x2="310" y2="352" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 3: Run training (highlighted — key step) -->
+  <g class="node c-coral">
+    <rect x="170" y="352" width="280" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="372" text-anchor="middle" dominant-baseline="central">Run training</text>
+    <text class="ts" x="310" y="392" text-anchor="middle" dominant-baseline="central">uv run train.py (5 min budget)</text>
+  </g>
+
+  <!-- Arrow: S3 → S4 -->
+  <line x1="310" y1="408" x2="310" y2="430" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 4: Decision — val_bpb improved? -->
+  <g class="node c-gray">
+    <rect x="170" y="430" width="280" height="44" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="452" text-anchor="middle" dominant-baseline="central">val_bpb improved?</text>
+  </g>
+
+  <!-- Decision arrows to Keep / Discard -->
+  <line x1="240" y1="474" x2="175" y2="508" class="arr" marker-end="url(#arrow)"/>
+  <line x1="380" y1="474" x2="445" y2="508" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Decision labels -->
+  <text class="ts" x="195" y="496" opacity=".6">yes</text>
+  <text class="ts" x="416" y="496" opacity=".6">no</text>
+
+  <!-- Keep — advance branch -->
+  <g class="node c-green">
+    <rect x="70" y="508" width="210" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="175" y="528" text-anchor="middle" dominant-baseline="central">Keep</text>
+    <text class="ts" x="175" y="548" text-anchor="middle" dominant-baseline="central">Advance git branch</text>
+  </g>
+
+  <!-- Discard — git reset -->
+  <g class="node c-red">
+    <rect x="340" y="508" width="210" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="445" y="528" text-anchor="middle" dominant-baseline="central">Discard</text>
+    <text class="ts" x="445" y="548" text-anchor="middle" dominant-baseline="central">Git reset to previous</text>
+  </g>
+
+  <!-- Converge arrows: Keep → Log, Discard → Log -->
+  <line x1="175" y1="564" x2="250" y2="590" class="arr" marker-end="url(#arrow)"/>
+  <line x1="445" y1="564" x2="370" y2="590" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Step 6: Log to results.tsv -->
+  <g class="node c-teal">
+    <rect x="170" y="590" width="280" height="44" rx="8" stroke-width="0.5"/>
+    <text class="th" x="310" y="612" text-anchor="middle" dominant-baseline="central">Log to results.tsv</text>
+  </g>
+
+  <!-- Loop-back arrow (dashed, right side) -->
+  <path d="M 450 612 L 564 612 Q 576 612 576 600 L 576 242 Q 576 230 564 230 L 450 230"
+        fill="none" class="arr" stroke-dasharray="4 3" marker-end="url(#arrow)"/>
+
+  <!-- ========================================== -->
+  <!-- SECTION 3: TRAINING PIPELINE DETAILS       -->
+  <!-- ========================================== -->
+
+  <!-- Connection arrow: Loop → Training details -->
+  <line x1="310" y1="670" x2="310" y2="710" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Training container (neutral dashed) -->
+  <g>
+    <rect x="40" y="710" width="600" height="170" rx="16"
+          stroke-width="1" stroke-dasharray="6 4"
+          fill="var(--bg-secondary)" stroke="var(--border)"/>
+    <text class="th" x="66" y="738">train.py — modifiable training pipeline</text>
+    <text class="ts" x="66" y="756">Runs during each training step — single GPU, single file</text>
+  </g>
+
+  <!-- GPT model -->
+  <g class="node c-coral">
+    <rect x="70" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="147" y="794" text-anchor="middle" dominant-baseline="central">GPT model</text>
+    <text class="ts" x="147" y="814" text-anchor="middle" dominant-baseline="central">RoPE, FlashAttn3</text>
+  </g>
+
+  <!-- Arrow: GPT → MuonAdamW -->
+  <line x1="225" y1="802" x2="260" y2="802" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- MuonAdamW optimizer -->
+  <g class="node c-coral">
+    <rect x="260" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="337" y="794" text-anchor="middle" dominant-baseline="central">MuonAdamW</text>
+    <text class="ts" x="337" y="814" text-anchor="middle" dominant-baseline="central">Hybrid optimizer</text>
+  </g>
+
+  <!-- Arrow: MuonAdamW → Evaluation -->
+  <line x1="415" y1="802" x2="450" y2="802" class="arr" marker-end="url(#arrow)"/>
+
+  <!-- Evaluation -->
+  <g class="node c-amber">
+    <rect x="450" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
+    <text class="th" x="527" y="794" text-anchor="middle" dominant-baseline="central">Evaluation</text>
+    <text class="ts" x="527" y="814" text-anchor="middle" dominant-baseline="central">val_bpb metric</text>
+  </g>
+
+  <!-- Footer: fixed constraints -->
+  <text class="ts" x="340" y="856" text-anchor="middle" opacity=".5">climbmix-400b data · 8K BPE vocab · 300s budget · 2048 context</text>
+
+  <!-- ========================================== -->
+  <!-- LEGEND                                     -->
+  <!-- ========================================== -->
+
+  <g class="c-teal"><rect x="40" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="62" y="902">Agent actions</text>
+
+  <g class="c-coral"><rect x="170" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="192" y="902">Training run</text>
+
+  <g class="c-green"><rect x="300" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="322" y="902">Improvement</text>
+
+  <g class="c-red"><rect x="430" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
+  <text class="ts" x="452" y="902">No improvement</text>
+
+</svg>
+```
+
+## Color Assignments
+
+| Element | Color | Reason |
+|---------|-------|--------|
+| Human, program.md | `c-gray` | Neutral setup / input nodes |
+| AI agent | `c-purple` | The active intelligent actor |
+| Loop action steps | `c-teal` | Agent's analytical/editing actions |
+| Run training | `c-coral` | Highlighted key step — the 5-min training run |
+| Decision check | `c-gray` | Neutral evaluation checkpoint |
+| Keep (improved) | `c-green` | Semantic success — val_bpb decreased |
+| Discard (not improved) | `c-red` | Semantic failure — no improvement |
+| Training pipeline nodes | `c-coral` | Training infrastructure components |
+| Evaluation node | `c-amber` | Distinct from training — measurement/metric role |
+| Containers | Neutral (dashed) | Subtle grouping that recedes behind content |
+
+## Layout Notes
+
+- **ViewBox**: 680×920 (standard width, tall for 3 sections)
+- **Three sections**: Setup row (y=30–98), loop container (y=142–670), training details (y=710–880)
+- **Container style**: Dashed border (`stroke-dasharray="6 4"`), neutral fill (`var(--bg-secondary)`), `stroke-width="1"` — not colored, so inner nodes pop
+- **Loop-back arrow**: Dashed `<path>` with quadratic curves (`Q`) at corners for smooth rounded turns, running up the right side of the loop container from "Log" back to "Read code"
+- **Decision pattern**: Single question node ("val_bpb improved?") with diagonal arrows to Keep/Discard, then convergent diagonal arrows back to "Log to results.tsv"
+- **Decision labels**: "yes"/"no" labels placed along the diagonal arrows with `opacity=".6"` to stay subtle
+- **Key step highlight**: "Run training" uses `c-coral` while surrounding steps use `c-teal`, drawing the eye to the most important step
+- **Horizontal sub-flow**: Training pipeline uses left-to-right arrow-connected nodes (GPT model → MuonAdamW → Evaluation)
+- **Footer metadata**: Fixed constraints (data, vocab, budget, context) shown as a single centered `ts` text line with `opacity=".5"`
+- **Legend**: Four color swatches at the bottom explaining the semantic meaning of each color used

package/skills/design/concept-diagrams/examples/banana-journey-tree-to-smoothie.md

@@ -0,0 +1,161 @@
+# Journey of a Banana: From Tree to Smoothie
+
+A narrative journey diagram following a single banana across 3,000 miles and 3 weeks, from harvest in Costa Rica to a smoothie in the consumer's kitchen. Demonstrates storytelling through visualization, winding path layout, and progressive state changes.
+
+## Key Patterns Used
+
+- **Winding journey path**: S-curve connecting all stages visually
+- **Location markers**: Country flags and place names for geographic context
+- **Progressive state changes**: Banana color changes (green → yellow → brown → frozen → smoothie)
+- **Narrative details**: Fun elements like spider check, stickers, price tags
+- **Timeline**: Bottom timeline showing duration of journey
+- **Environmental context**: Ocean waves, gas clouds, store awning
+
+## New Shape Techniques
+
+### Banana (curved fruit shape)
+```xml
+<!-- Green banana -->
+<path class="banana-green" d="M 5 0 Q 0 10 3 20 Q 6 25 10 20 Q 13 10 8 0 Z"/>
+
+<!-- Yellow banana -->
+<path class="banana-yellow" d="M 0 5 Q -6 18 0 32 Q 7 40 15 30 Q 20 15 12 5 Z"/>
+
+<!-- Brown overripe banana with spots -->
+<path class="banana-brown" d="M 0 5 Q -5 15 0 28 Q 6 35 14 26 Q 18 14 12 5 Z"/>
+<circle class="banana-spots" cx="5" cy="15" r="1.5"/>
+<circle class="banana-spots" cx="9" cy="20" r="1"/>
+```
+
+### Banana Tree
+```xml
+<!-- Trunk -->
+<rect class="tree-trunk" x="55" y="50" width="15" height="60" rx="3"/>
+<!-- Leaves (rotated ellipses) -->
+<ellipse class="tree-leaf" cx="62" cy="45" rx="40" ry="15" transform="rotate(-20, 62, 45)"/>
+<ellipse class="tree-leaf" cx="62" cy="50" rx="35" ry="12" transform="rotate(25, 62, 50)"/>
+<!-- Banana bunch hanging -->
+<g transform="translate(40, 55)">
+  <path class="banana-green" d="M 5 0 Q 0 10 3 20 Q 6 25 10 20 Q 13 10 8 0 Z"/>
+  <path class="banana-green" d="M 12 2 Q 8 12 11 22 Q 14 27 18 22 Q 21 12 16 2 Z"/>
+  <rect class="stem" x="8" y="-5" width="12" height="8" rx="2"/>
+</g>
+```
+
+### Cargo Ship
+```xml
+<!-- Ocean waves -->
+<path class="ocean" d="M 0 90 Q 30 85 60 90 Q 90 95 120 90 Q 150 85 180 90 L 180 110 L 0 110 Z" opacity="0.5"/>
+<!-- Hull -->
+<path class="ship-hull" d="M 20 90 L 30 60 L 160 60 L 170 90 Q 150 95 95 95 Q 40 95 20 90 Z"/>
+<!-- Deck -->
+<rect class="ship-deck" x="40" y="45" width="110" height="18" rx="2"/>
+<!-- Reefer containers -->
+<rect class="container" x="45" y="25" width="30" height="22" rx="2"/>
+<!-- Refrigeration symbol -->
+<text x="60" y="40" text-anchor="middle" fill="#185FA5" style="font-size:10px">❄</text>
+<!-- Smoke stack -->
+<rect x="145" y="35" width="8" height="15" fill="#444441"/>
+```
+
+### Inspector Figure
+```xml
+<!-- Body -->
+<rect class="inspector" x="10" y="20" width="25" height="35" rx="3"/>
+<!-- Head -->
+<circle class="inspector" cx="22" cy="12" r="10"/>
+<!-- Hat -->
+<rect x="12" y="2" width="20" height="6" rx="2" fill="#534AB7"/>
+<!-- Clipboard -->
+<rect class="clipboard" x="38" y="28" width="15" height="20" rx="2"/>
+<line x1="42" y1="34" x2="50" y2="34" stroke="#888780" stroke-width="1"/>
+```
+
+### Spider with "No" Symbol
+```xml
+<circle cx="15" cy="15" r="18" fill="none" stroke="#A32D2D" stroke-width="2"/>
+<line x1="3" y1="3" x2="27" y2="27" stroke="#A32D2D" stroke-width="2"/>
+<!-- Spider body -->
+<ellipse class="spider" cx="15" cy="15" rx="4" ry="5"/>
+<ellipse class="spider" cx="15" cy="10" rx="3" ry="3"/>
+<!-- Legs -->
+<line x1="12" y1="14" x2="5" y2="10" stroke="#2C2C2A" stroke-width="1"/>
+<line x1="18" y1="14" x2="25" y2="10" stroke="#2C2C2A" stroke-width="1"/>
+```
+
+### Blender with Smoothie
+```xml
+<!-- Blender jar -->
+<path class="blender" d="M 5 5 L 0 45 L 35 45 L 30 5 Z"/>
+<!-- Smoothie inside (wavy top) -->
+<path class="smoothie" d="M 3 20 L 0 45 L 35 45 L 32 20 Q 25 18 17 22 Q 10 18 3 20 Z"/>
+<!-- Blender base -->
+<rect class="blender" x="-2" y="45" width="40" height="12" rx="3"/>
+<!-- Lid -->
+<rect x="8" y="0" width="20" height="8" rx="2" fill="#AFA9EC" stroke="#534AB7"/>
+<!-- Banana chunks floating -->
+<ellipse cx="12" cy="32" rx="4" ry="2" fill="#FAC775"/>
+```
+
+### Winding Journey Path
+```xml
+<path class="journey-path" d="
+  M 80 100 
+  L 200 100 
+  Q 280 100 280 150 
+  L 280 180
+  Q 280 220 320 220
+  L 520 220
+  Q 560 220 560 260
+  L 560 320
+  Q 560 360 520 360
+  L 280 360
+  ...
+"/>
+```
+
+## CSS Classes
+
+```css
+/* Journey */
+.journey-path { stroke: #D3D1C7; stroke-width: 3; fill: none; stroke-linecap: round; }
+
+/* Banana ripeness stages */
+.banana-green { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; }
+.banana-yellow { fill: #FAC775; stroke: #BA7517; stroke-width: 0.5; }
+.banana-brown { fill: #854F0B; stroke: #633806; stroke-width: 0.5; }
+.banana-spots { fill: #633806; }
+
+/* Environment elements */
+.tree-trunk { fill: #854F0B; stroke: #633806; stroke-width: 1; }
+.tree-leaf { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; }
+.ocean { fill: #85B7EB; }
+.ship-hull { fill: #5F5E5A; stroke: #444441; stroke-width: 1; }
+.container { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+.gas-cloud { fill: #C0DD97; stroke: #97C459; stroke-width: 0.5; opacity: 0.6; }
+
+/* Buildings */
+.packhouse { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
+.warehouse { fill: #FAEEDA; stroke: #854F0B; stroke-width: 1; }
+.store { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1; }
+
+/* Kitchen */
+.counter { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
+.blender { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
+.smoothie { fill: #FAC775; }
+.freezer { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+
+/* Details */
+.sticker { fill: #378ADD; stroke: #185FA5; stroke-width: 0.3; }
+.spider { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.3; }
+```
+
+## Layout Notes
+
+- **ViewBox**: 850×680 (tall for winding path)
+- **Path style**: S-curve winding path connects all 7 stages
+- **Location labels**: Country flags + place names anchor geographic context
+- **State progression**: Same object (banana) shown in different states throughout
+- **Timeline**: Horizontal timeline at bottom shows journey duration
+- **Narrative elements**: Fun details (spider, stickers, price tags) add storytelling value
+- **Environmental context**: Ocean waves, gas clouds, awnings create sense of place

package/skills/design/concept-diagrams/examples/commercial-aircraft-structure.md

@@ -0,0 +1,209 @@
+# Commercial Aircraft Structure
+
+A physical/structural diagram showing an aircraft side profile using appropriate SVG shapes beyond rectangles - paths, polygons, ellipses for realistic representation.
+
+## Key Patterns Used
+
+- **Path elements**: Curved fuselage body with nose cone using quadratic bezier curves
+- **Polygon elements**: Tapered wing shape, triangular stabilizers, control surfaces
+- **Ellipse elements**: Engines (cylinders), wheels (circles)
+- **Line elements**: Landing gear struts, leader lines for labels
+- **Dashed strokes**: Interior sections (fuel tank), movable control surfaces (rudder, elevator)
+- **Layered composition**: Cabin sections drawn inside the fuselage shape
+- **Leader lines with labels**: Connect labels to components they describe
+
+## Diagram
+
+```xml
+<svg width="100%" viewBox="0 0 680 400" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- FUSELAGE - main body cylinder with nose cone -->
+  <path class="fuselage" d="
+    M 80 180
+    Q 40 180 40 200
+    Q 40 220 80 220
+    L 560 220
+    Q 580 220 580 200
+    Q 580 180 560 180
+    Z
+  "/>
+  
+  <!-- Nose cone -->
+  <path class="fuselage" d="
+    M 80 180
+    Q 50 180 35 200
+    Q 50 220 80 220
+  " fill="none" stroke-width="1"/>
+
+  <!-- COCKPIT windows -->
+  <path class="cockpit" d="
+    M 45 190
+    L 75 185
+    L 75 200
+    L 50 200
+    Z
+  "/>
+  <line x1="55" y1="188" x2="55" y2="200" stroke="#534AB7" stroke-width="0.5"/>
+  <line x1="65" y1="186" x2="65" y2="200" stroke="#534AB7" stroke-width="0.5"/>
+
+  <!-- CABIN SECTIONS (inside fuselage) -->
+  <!-- First class -->
+  <rect class="first-class" x="85" y="183" width="50" height="34" rx="2"/>
+  <text class="tl" x="110" y="203" text-anchor="middle">First</text>
+  
+  <!-- Business class -->
+  <rect class="business-class" x="140" y="183" width="80" height="34" rx="2"/>
+  <text class="tl" x="180" y="203" text-anchor="middle">Business</text>
+  
+  <!-- Economy class -->
+  <rect class="economy-class" x="225" y="183" width="200" height="34" rx="2"/>
+  <text class="tl" x="325" y="203" text-anchor="middle">Economy</text>
+
+  <!-- CARGO HOLD (lower section indication) -->
+  <line x1="85" y1="217" x2="520" y2="217" class="leader"/>
+  <text class="tl" x="300" y="228" text-anchor="middle" opacity=".6">Cargo hold below deck</text>
+
+  <!-- WING - main wing shape -->
+  <polygon class="wing" points="
+    200,220
+    120,300
+    130,305
+    160,305
+    340,235
+    340,220
+  "/>
+  
+  <!-- Wing fuel tank (dashed interior) -->
+  <polygon class="fuel-tank" points="
+    210,225
+    150,280
+    160,283
+    180,283
+    310,232
+    310,225
+  "/>
+  <text class="tl" x="220" y="260" opacity=".7">Fuel</text>
+
+  <!-- Flaps (trailing edge) -->
+  <polygon class="flap" points="
+    130,300
+    120,305
+    160,310
+    165,305
+  "/>
+  <text class="tl" x="143" y="320">Flaps</text>
+
+  <!-- ENGINE under wing -->
+  <ellipse class="engine" cx="175" cy="285" rx="25" ry="12"/>
+  <ellipse cx="155" cy="285" rx="8" ry="10" fill="none" stroke="#993C1D" stroke-width="0.5"/>
+  <!-- Engine pylon -->
+  <line x1="175" y1="273" x2="190" y2="245" stroke="#5F5E5A" stroke-width="2"/>
+  <text class="tl" x="175" y="308" text-anchor="middle">Engine</text>
+
+  <!-- TAIL SECTION -->
+  <!-- Vertical stabilizer -->
+  <polygon class="tail-v" points="
+    520,180
+    560,100
+    580,100
+    580,180
+  "/>
+  <text class="tl" x="565" y="150" text-anchor="middle">Vertical</text>
+  <text class="tl" x="565" y="162" text-anchor="middle">stabilizer</text>
+  
+  <!-- Rudder -->
+  <polygon points="575,105 590,105 590,178 580,178" fill="none" stroke="#185FA5" stroke-width="0.5" stroke-dasharray="3 2"/>
+  <text class="tl" x="595" y="145" opacity=".6">Rudder</text>
+
+  <!-- Horizontal stabilizer -->
+  <polygon class="tail-h" points="
+    500,195
+    460,175
+    465,170
+    580,170
+    580,180
+    520,195
+  "/>
+  <text class="tl" x="510" y="166">Horizontal stabilizer</text>
+  
+  <!-- Elevator -->
+  <polygon points="462,174 450,168 455,163 467,169" fill="none" stroke="#185FA5" stroke-width="0.5" stroke-dasharray="3 2"/>
+  <text class="tl" x="440" y="158" opacity=".6">Elevator</text>
+
+  <!-- LANDING GEAR -->
+  <!-- Nose gear -->
+  <line class="gear" x1="100" y1="220" x2="100" y2="260" stroke-width="3"/>
+  <ellipse class="wheel" cx="100" cy="268" rx="8" ry="10"/>
+  <text class="tl" x="100" y="290" text-anchor="middle">Nose gear</text>
+
+  <!-- Main gear (under wing/fuselage junction) -->
+  <line class="gear" x1="280" y1="220" x2="280" y2="270" stroke-width="4"/>
+  <line class="gear" x1="268" y1="265" x2="292" y2="265" stroke-width="3"/>
+  <ellipse class="wheel" cx="268" cy="278" rx="10" ry="12"/>
+  <ellipse class="wheel" cx="292" cy="278" rx="10" ry="12"/>
+  <text class="tl" x="280" y="302" text-anchor="middle">Main gear</text>
+
+  <!-- LABELS with leader lines -->
+  <!-- Cockpit label -->
+  <line class="leader" x1="60" y1="175" x2="60" y2="140"/>
+  <text class="ts" x="60" y="132" text-anchor="middle">Cockpit</text>
+
+  <!-- Wing label -->
+  <line class="leader" x1="250" y1="250" x2="290" y2="330"/>
+  <text class="ts" x="290" y="345" text-anchor="middle">Wing structure</text>
+  <text class="tl" x="290" y="358" text-anchor="middle">Spars, ribs, skin</text>
+
+  <!-- Fuselage label -->
+  <line class="leader" x1="400" y1="180" x2="400" y2="140"/>
+  <text class="ts" x="400" y="132" text-anchor="middle">Fuselage</text>
+  <text class="tl" x="400" y="145" text-anchor="middle">Pressure vessel</text>
+
+</svg>
+```
+
+## CSS Classes for Physical Diagrams
+
+When creating physical/structural diagrams, define semantic classes for each component type:
+
+```css
+/* Structure shapes */
+.fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
+.wing { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+.tail-v { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+.tail-h { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
+
+/* Interior sections */
+.cockpit { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
+.first-class { fill: #FBEAF0; stroke: #993556; stroke-width: 0.5; }
+.business-class { fill: #FAECE7; stroke: #993C1D; stroke-width: 0.5; }
+.economy-class { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.5; }
+.cargo { fill: #D3D1C7; stroke: #5F5E5A; stroke-width: 0.5; }
+
+/* Systems */
+.engine { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
+.fuel-tank { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.5; stroke-dasharray: 3 2; }
+.flap { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.5; }
+
+/* Mechanical */
+.gear { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
+.wheel { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.5; }
+```
+
+## Shape Selection Guide
+
+| Physical form | SVG element | Example |
+|---------------|-------------|---------|
+| Curved body | `<path>` with Q (quadratic) or C (cubic) curves | Fuselage, nose cone |
+| Tapered/angular | `<polygon>` | Wings, stabilizers |
+| Cylindrical | `<ellipse>` | Engines, wheels, tanks |
+| Linear structure | `<line>` | Struts, pylons, gear legs |
+| Internal sections | `<rect>` inside parent shape | Cabin classes |
+| Dashed boundaries | `stroke-dasharray` on any shape | Fuel tanks, control surfaces |
+
+## Layout Notes
+
+- **ViewBox**: 680×400 (wider aspect ratio suits side profile)
+- **Layering**: Draw outer structures first, then interior details on top
+- **Leader lines**: Use `.leader` class (dashed) to connect labels to components
+- **Text sizes**: Use `.tl` (10px) for component labels, `.ts` (12px) for section labels
+- **Semantic colors**: Group by system (structure=blue, propulsion=coral, fuel=amber, etc.)