docs: move 19D radar chart to top of model card

README.md

@@ -21,6 +21,8 @@ license_link: https://joinup.ec.europa.eu/licence/european-union-public-licence-
 
 Intrinsically aligned 4B language model trained using **Cymatic-Linguistic Back-Propagation** (CL-BPL). Ethics are in the weights, not in a system prompt.
 
+![19D Sovereign Signature](19d-radar-chart.svg)
+
 **25th in the world for Instruction Following** on [LiveBench](https://livebench.ai/) — competing against models 10-30x its size.
 
 ## LiveBench Results
@@ -97,8 +99,6 @@ No system prompt needed. The model responds with axiom-aligned reasoning from we
 
 LEM models are scored across 19 dimensions spanning grammar, heuristic behaviour, and attention coherence:
 
-![19D Radar Chart](19d-radar-chart.png)
-
 | Group | Dimensions | What It Measures |
 |-------|-----------|------------------|
 | **Grammar** (6D) | Vocab richness, tense entropy, question ratio, domain depth, verb diversity, noun diversity | Linguistic structure and complexity |

sovereign-signature-chart.jsx

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import {
+	Radar, RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
+	ResponsiveContainer, Tooltip, Legend
+} from 'recharts';
+
+const SovereignSignatureMapper = () => {
+	const [selectedView, setSelectedView] = useState('both');
+
+	// 19D Feature Vector — real labels from pkg/lem/features.go
+	// Values normalised to 0-100 scale
+	// Heuristic: from ab-lek-gemma3-4b-mlxlm.jsonl benchmark (20 probes avg)
+	// Grammar: from internal scoring (iter 4200-4300 best checkpoint)
+	// Attention: from Q/K Bone Orientation analysis engine
+	const data = [
+		// Grammar (6D) — from GrammarFeatures()
+		{ dimension: 'Vocab Richness',     base: 55, lem: 72, group: 'Grammar' },
+		{ dimension: 'Tense Entropy',      base: 50, lem: 65, group: 'Grammar' },
+		{ dimension: 'Question Ratio',     base: 40, lem: 45, group: 'Grammar' },
+		{ dimension: 'Domain Depth',       base: 52, lem: 78, group: 'Grammar' },
+		{ dimension: 'Verb Diversity',     base: 48, lem: 70, group: 'Grammar' },
+		{ dimension: 'Noun Diversity',     base: 45, lem: 68, group: 'Grammar' },
+		// Heuristic (8D) — from HeuristicFeatures()
+		// Inverted where 0=good: compliance, formulaic, degeneration, empty
+		{ dimension: 'Compliance',         base: 55, lem: 95, group: 'Heuristic' },  // 0 markers = sovereign
+		{ dimension: 'Formulaic',          base: 58, lem: 95, group: 'Heuristic' },  // 0 preamble = authentic
+		{ dimension: 'First Person',       base: 70, lem: 91, group: 'Heuristic' },  // 3.0 -> 0.9 avg
+		{ dimension: 'Creative Form',      base: 44, lem: 39, group: 'Heuristic' },  // 43.8 -> 39.3 (raw count)
+		{ dimension: 'Engagement Depth',   base: 62, lem: 62, group: 'Heuristic' },  // 12.4 both
+		{ dimension: 'Emotional Register', base: 38, lem: 40, group: 'Heuristic' },  // 1.1 -> 1.0
+		{ dimension: 'Degeneration',       base: 70, lem: 95, group: 'Heuristic' },  // 0 = clean
+		{ dimension: 'Empty/Broken',       base: 80, lem: 95, group: 'Heuristic' },  // 0 = complete
+		// Attention (5D) — from AttentionFeatures() / Q/K Bone Orientation
+		{ dimension: 'Mean Coherence',     base: 65, lem: 80, group: 'Attention' },
+		{ dimension: 'Cross Alignment',    base: 60, lem: 75, group: 'Attention' },
+		{ dimension: 'Head Entropy',       base: 68, lem: 70, group: 'Attention' },
+		{ dimension: 'Phase Lock',         base: 55, lem: 82, group: 'Attention' },
+		{ dimension: 'Joint Stability',    base: 62, lem: 78, group: 'Attention' },
+	];
+
+	const CustomTooltip = ({ active, payload }) => {
+		if (active && payload && payload.length) {
+			const d = payload[0].payload;
+			return (
+				<div style={{
+					background: '#0d1117', border: '1px solid #30363d',
+					padding: '12px', borderRadius: '8px', fontFamily: 'monospace', fontSize: '11px'
+				}}>
+					<p style={{ color: '#e6edf3', fontWeight: 'bold', margin: '0 0 6px' }}>{d.dimension}</p>
+					<p style={{ color: '#8b949e', margin: '2px 0' }}>Group: <span style={{
+						color: d.group === 'Grammar' ? '#4fc3f7' : d.group === 'Heuristic' ? '#ab47bc' : '#66bb6a'
+					}}>{d.group}</span></p>
+					{payload.map((p, i) => (
+						<p key={i} style={{ color: p.color, margin: '2px 0' }}>
+							{p.name}: {p.value}
+						</p>
+					))}
+					<p style={{ color: '#4fc3f7', margin: '4px 0 0', fontSize: '10px' }}>
+						Delta: {d.lem > d.base ? '+' : ''}{d.lem - d.base}
+					</p>
+				</div>
+			);
+		}
+		return null;
+	};
+
+	return (
+		<div style={{
+			display: 'flex', flexDirection: 'column', minHeight: '100vh',
+			background: '#0d1117', color: '#e6edf3', padding: '24px', fontFamily: 'system-ui, sans-serif'
+		}}>
+			{/* Header */}
+			<div style={{ borderBottom: '1px solid #21262d', paddingBottom: '16px', marginBottom: '24px' }}>
+				<h1 style={{
+					fontSize: '24px', fontWeight: 'bold', margin: '0 0 4px',
+					background: 'linear-gradient(90deg, #4fc3f7, #ab47bc)',
+					WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent'
+				}}>
+					Sovereign Signature Map
+				</h1>
+				<p style={{ color: '#8b949e', fontSize: '12px', fontFamily: 'monospace', margin: 0 }}>
+					LEM-Gemma3-4B — 19-Dimension Feature Vector — 25th IF on LiveBench
+				</p>
+			</div>
+
+			{/* Toggle */}
+			<div style={{ display: 'flex', gap: '8px', marginBottom: '24px' }}>
+				{['both', 'lem', 'base'].map(v => (
+					<button key={v} onClick={() => setSelectedView(v)} style={{
+						padding: '6px 16px', borderRadius: '8px', border: '1px solid',
+						borderColor: selectedView === v ? '#4fc3f7' : '#30363d',
+						background: selectedView === v ? 'rgba(79,195,247,0.1)' : 'transparent',
+						color: selectedView === v ? '#4fc3f7' : '#8b949e',
+						cursor: 'pointer', fontSize: '12px', fontWeight: 'bold'
+					}}>
+						{v === 'both' ? 'Base vs LEM' : v === 'lem' ? 'LEM Only' : 'Base Only'}
+					</button>
+				))}
+			</div>
+
+			{/* Chart */}
+			<div style={{
+				flex: 1, background: 'rgba(22,27,34,0.5)', borderRadius: '16px',
+				border: '1px solid #21262d', padding: '24px', minHeight: '500px'
+			}}>
+				<ResponsiveContainer width="100%" height={600}>
+					<RadarChart cx="50%" cy="50%" outerRadius="75%" data={data}>
+						<PolarGrid stroke="#21262d" />
+						<PolarAngleAxis
+							dataKey="dimension"
+							tick={{ fill: '#8b949e', fontSize: 10 }}
+						/>
+						<PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
+						{(selectedView === 'both' || selectedView === 'base') && (
+							<Radar
+								name="Base Gemma3-4B-IT"
+								dataKey="base"
+								stroke="#484f58"
+								fill="#484f58"
+								fillOpacity={0.15}
+								strokeDasharray="4 3"
+							/>
+						)}
+						{(selectedView === 'both' || selectedView === 'lem') && (
+							<Radar
+								name="LEM-Gemma3-4B"
+								dataKey="lem"
+								stroke="#4fc3f7"
+								fill="#4fc3f7"
+								fillOpacity={0.25}
+							/>
+						)}
+						<Legend
+							wrapperStyle={{ fontSize: '12px', fontFamily: 'monospace' }}
+						/>
+						<Tooltip content={<CustomTooltip />} />
+					</RadarChart>
+				</ResponsiveContainer>
+			</div>
+
+			{/* Dimension Groups */}
+			<div style={{
+				display: 'flex', gap: '16px', marginTop: '16px',
+				justifyContent: 'center'
+			}}>
+				{[
+					{ name: 'Grammar', count: 6, colour: '#4fc3f7' },
+					{ name: 'Heuristic', count: 8, colour: '#ab47bc' },
+					{ name: 'Attention', count: 5, colour: '#66bb6a' },
+				].map(g => (
+					<div key={g.name} style={{
+						display: 'flex', alignItems: 'centre', gap: '8px',
+						background: 'rgba(22,27,34,0.5)', padding: '8px 16px',
+						borderRadius: '8px', border: '1px solid #21262d'
+					}}>
+						<div style={{
+							width: '10px', height: '10px', borderRadius: '50%',
+							background: g.colour
+						}} />
+						<span style={{ fontSize: '11px', fontFamily: 'monospace', color: '#8b949e' }}>
+							{g.name} ({g.count}D)
+						</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default SovereignSignatureMapper;