diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index 828dbd9..24f5d5a 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -33,15 +33,15 @@ export default defineConfig({
   srcExclude: ['discovery/**', 'tmp_cv/**', 'tmp_prompt.forge/**', 'draft/**'],
   head: [
     ['meta', { name: 'author', content: 'Martin Haberfellner' }],
-    ['meta', { name: 'keywords', content: 'behaviour priming, AI, prompt engineering, semantic fields, systems thinking, LLM' }],
+    ['meta', { name: 'keywords', content: 'behaviour priming, prompt engineering, LLM, semantic fields, prompt design, AI prompting, prompt architecture, Martin Haberfellner' }],
     ['meta', { property: 'og:type', content: 'website' }],
-    ['meta', { property: 'og:site_name', content: 'neoncode.systems' }],
-    ['meta', { property: 'og:title', content: 'neoncode.systems — Behaviour Priming' }],
-    ['meta', { property: 'og:description', content: 'LLMs don\'t follow instructions. They resonate with fields. Behaviour Priming by Martin Haberfellner.' }],
+    ['meta', { property: 'og:site_name', content: 'NEONCODE!' }],
+    ['meta', { property: 'og:title', content: 'NEONCODE! — Martin Haberfellner' }],
+    ['meta', { property: 'og:description', content: 'Behaviour Priming: a method for designing semantic fields instead of scripting LLM instructions. What do you resonate with?' }],
     ['meta', { property: 'og:locale', content: 'en_US' }],
     ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
-    ['meta', { name: 'twitter:title', content: 'neoncode.systems — Behaviour Priming' }],
-    ['meta', { name: 'twitter:description', content: 'LLMs don\'t follow instructions. They resonate with fields. Behaviour Priming by Martin Haberfellner.' }],
+    ['meta', { name: 'twitter:title', content: 'NEONCODE! — Martin Haberfellner' }],
+    ['meta', { name: 'twitter:description', content: 'Behaviour Priming: design semantic fields instead of scripting LLM instructions. What do you resonate with?' }],
     ['link', { rel: 'canonical', href: 'https://neoncode.systems/' }],
     ['link', { rel: 'icon', href: '/favicon.ico' }]
   ],
diff --git a/behaviour.priming/index.md b/behaviour.priming/index.md
index 41d4e73..4e6a377 100644
--- a/behaviour.priming/index.md
+++ b/behaviour.priming/index.md
@@ -1,6 +1,25 @@
 ---
 layout: home
-title: //behaviour.priming
+title: "//behaviour.priming — NEONCODE!"
+head:
+  - - meta
+    - name: description
+      content: "Behaviour Priming replaces step-by-step LLM instructions with a designed semantic field. Stable behaviour, no drift, minimal prompts. See the method and live examples."
+  - - meta
+    - name: keywords
+      content: "behaviour priming, LLM behaviour design, prompt architecture, semantic field, stable prompts, autonomous agent, prompt method"
+  - - meta
+    - property: og:title
+      content: "//behaviour.priming — NEONCODE!"
+  - - meta
+    - property: og:description
+      content: "Replace instruction lists with designed semantic fields. The LLM finds the path. No duct tape."
+  - - meta
+    - name: twitter:title
+      content: "//behaviour.priming — NEONCODE!"
+  - - meta
+    - name: twitter:description
+      content: "Replace instruction lists with designed semantic fields. The LLM finds the path."
 
 hero:
   name: "//behaviour:priming"
@@ -98,7 +117,9 @@ hero:
 </div>
 </div>
 </div>
+</section>
 
+<section class="nc-section">
 <div class="nc-quote">
 <p>A cast with scripts performs. Characters with depth find the play.</p>
 </div>
@@ -178,7 +199,8 @@ Both work. This one works harder.
 -->
 
 <section class="nc-final">
-<h2>Try it yourself on <a href="/prompt.forge/">//prompt.forge</a></h2>
-<p>Submit a real use case. Get a prompt built with Behaviour Priming.</p>
+<h2>See if it works for you.</h2>
+<p>Submit a use case. I'll build a prompt with Behaviour Priming. You test both — you decide.</p>
+<p><a href="/prompt.forge/">//prompt.forge →</a></p>
 </section>
 
diff --git a/draft/nc_vhs_v4_tilt.html b/draft/nc_vhs_v4_tilt.html
new file mode 100644
index 0000000..5313be3
--- /dev/null
+++ b/draft/nc_vhs_v4_tilt.html
@@ -0,0 +1,358 @@
+
+<div style="width:100%;height:520px;position:relative;overflow:hidden;background:#0a0a0a;border-radius:8px;">
+  <canvas id="c" style="position:absolute;top:0;left:0;width:100%;height:100%;display:block;"></canvas>
+  <div style="position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:14px;align-items:center;z-index:10;background:rgba(0,0,0,0.65);padding:7px 14px;border-radius:6px;border:0.5px solid rgba(255,255,255,0.12);">
+    <label style="font-size:11px;color:#888;font-family:monospace;">color</label>
+    <input type="color" id="colorPicker" value="#00ff88" style="width:28px;height:22px;border:none;background:none;cursor:pointer;padding:0;">
+    <label style="font-size:11px;color:#888;font-family:monospace;">opacity</label>
+    <input type="range" id="opacitySlider" min="5" max="100" value="65" style="width:72px;">
+    <span id="opacityVal" style="font-size:11px;color:#888;font-family:monospace;min-width:28px;">65%</span>
+    <label style="font-size:11px;color:#888;font-family:monospace;">rotation</label>
+    <input type="range" id="rotSlider" min="-45" max="0" value="-20" style="width:60px;">
+    <span id="rotVal" style="font-size:11px;color:#888;font-family:monospace;min-width:28px;">-20°</span>
+    <button id="glitchBtn" style="font-size:11px;font-family:monospace;color:#aaa;background:none;border:0.5px solid rgba(255,255,255,0.2);padding:3px 9px;cursor:pointer;border-radius:4px;">glitch ↯</button>
+  </div>
+  <div id="loadmsg" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#444;font-family:monospace;font-size:12px;">loading...</div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script>
+(function(){
+const canvas=document.getElementById('c');
+const cont=canvas.parentElement;
+const loadmsg=document.getElementById('loadmsg');
+let W=cont.clientWidth, H=cont.clientHeight;
+
+const renderer=new THREE.WebGLRenderer({canvas,alpha:true,antialias:false});
+renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
+renderer.setSize(W,H);
+renderer.setClearColor(0x000000,0);
+
+const scene=new THREE.Scene();
+const cam=new THREE.OrthographicCamera(-W/2,W/2,H/2,-H/2,0.1,100);
+cam.position.z=10;
+
+let userRotDeg=-20;
+
+function makeTexture(color,w,h,rotDeg){
+  const oc=document.createElement('canvas');
+  oc.width=w; oc.height=h;
+  const ox=oc.getContext('2d');
+  const fs=Math.min(w,h)*0.75;
+  ox.clearRect(0,0,w,h);
+  ox.save();
+  ox.translate(w*0.05, h*0.62);
+  ox.rotate(rotDeg*Math.PI/180);
+  ox.font=`900 ${fs}px 'Arial Black','Impact',sans-serif`;
+  ox.textAlign='left';
+  ox.textBaseline='alphabetic';
+  ox.fillStyle='#'+color.getHexString();
+  ox.fillText('NC!',0,0);
+  ox.restore();
+  return new THREE.CanvasTexture(oc);
+}
+
+let uColor=new THREE.Color('#00ff88');
+let uOpacity=0.65;
+let tex=makeTexture(uColor,W,H,userRotDeg);
+const geo=new THREE.PlaneGeometry(W,H);
+const mat=new THREE.MeshBasicMaterial({map:tex,transparent:true,opacity:1});
+const mesh=new THREE.Mesh(geo,mat);
+scene.add(mesh);
+
+const rt=new THREE.WebGLRenderTarget(W,H);
+const postScene=new THREE.Scene();
+const postCam=new THREE.OrthographicCamera(-W/2,W/2,H/2,-H/2,0.1,100);
+postCam.position.z=10;
+
+const vhsMat=new THREE.ShaderMaterial({
+  uniforms:{
+    tDiffuse:{value:null},
+    time:{value:0},
+    res:{value:new THREE.Vector2(W,H)},
+    chroma:{value:0.008},
+    chromaY:{value:0.0},
+    tracking:{value:0.0},
+    trackBand:{value:0.0},
+    trackSharp:{value:0.0},
+    horizShift:{value:0.0},
+    glitch:{value:0.0},
+    glitchSeed:{value:0.0},
+    noiseAmt:{value:0.08},
+    lumaFlicker:{value:1.0},
+    headSwitch:{value:0.0},
+    dropoutY:{value:-1.0},
+    dropoutAmt:{value:0.0},
+    opacity:{value:uOpacity},
+  },
+  vertexShader:`varying vec2 vUv;void main(){vUv=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}`,
+  fragmentShader:`
+    uniform sampler2D tDiffuse;
+    uniform float time;
+    uniform vec2 res;
+    uniform float chroma;
+    uniform float chromaY;
+    uniform float tracking;
+    uniform float trackBand;
+    uniform float trackSharp;
+    uniform float horizShift;
+    uniform float glitch;
+    uniform float glitchSeed;
+    uniform float noiseAmt;
+    uniform float lumaFlicker;
+    uniform float headSwitch;
+    uniform float dropoutY;
+    uniform float dropoutAmt;
+    uniform float opacity;
+    varying vec2 vUv;
+
+    float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
+    float hash1(float p){return fract(sin(p*127.1)*43758.5453);}
+    float noise2(vec2 p){
+      vec2 i=floor(p);vec2 f=fract(p);
+      float a=hash(i),b=hash(i+vec2(1,0)),c=hash(i+vec2(0,1)),d=hash(i+vec2(1,1));
+      vec2 u=f*f*(3.0-2.0*f);
+      return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
+    }
+
+    void main(){
+      vec2 uv=vUv;
+
+      // HORIZONTAL DRIFT — whole frame shifts left/right like a rolling signal
+      uv.x=fract(uv.x+horizShift);
+
+      // TRACKING SLIP
+      float slipped=uv.y+tracking;
+      float tear=0.0;
+      if(trackBand>0.01){
+        float rawY=fract(slipped);
+        float dist=abs(rawY-uv.y);
+        tear=smoothstep(0.012,0.0,dist)*trackBand*trackSharp;
+        if(uv.y<0.08){
+          float hsMag=headSwitch*(0.08-uv.y)/0.08;
+          uv.x=fract(uv.x+(hash(vec2(floor(uv.y*200.0),glitchSeed))-0.5)*hsMag*0.12);
+        }
+      }
+      uv.y=fract(slipped);
+
+      // GLITCH — per-row horizontal displacement
+      float rowH=0.5+hash1(glitchSeed*0.1)*1.5;
+      float glitchRow=floor(uv.y*res.y/rowH)*rowH/res.y;
+      float gr=hash(vec2(glitchRow,glitchSeed));
+      if(gr>(1.0-glitch*0.9)){
+        float disp=(hash(vec2(glitchRow,glitchSeed+7.3))-0.5)*0.09*glitch;
+        uv.x=clamp(uv.x+disp,0.0,1.0);
+      }
+
+      // CHROMA
+      float ca=chroma;
+      float caY=chromaY;
+      float r=texture2D(tDiffuse,clamp(uv+vec2(ca,caY),0.0,1.0)).r;
+      float g=texture2D(tDiffuse,uv).g;
+      float b=texture2D(tDiffuse,clamp(uv+vec2(-ca,-caY),0.0,1.0)).b;
+      float a=texture2D(tDiffuse,uv).a;
+      vec4 col=vec4(r,g,b,a);
+
+      // SCANLINES
+      float sl=mod(gl_FragCoord.y,3.0);
+      col.rgb*=(sl<1.0)?0.82:1.0;
+
+      // TAPE NOISE
+      float fineNoise=hash(uv+vec2(time*3.71,time*2.13));
+      float slowNoise=noise2(uv*4.0+vec2(time*0.3,time*0.17));
+      col.rgb+=(fineNoise*0.7+slowNoise*0.3-0.5)*noiseAmt*col.a;
+
+      // LUMA FLICKER
+      col.rgb*=lumaFlicker;
+
+      // DROPOUT
+      if(dropoutAmt>0.01){
+        float dy=abs(uv.y-dropoutY);
+        if(dy<0.003){
+          float doRnd=hash(vec2(uv.x*200.0,dropoutY));
+          if(doRnd>0.3) col.rgb=mix(col.rgb,vec3(doRnd),dropoutAmt*(1.0-dy/0.003));
+        }
+      }
+
+      col.rgb+=tear;
+      col.a*=opacity;
+      gl_FragColor=col;
+    }
+  `,
+  transparent:true,
+  depthWrite:false,
+});
+postScene.add(new THREE.Mesh(new THREE.PlaneGeometry(W,H),vhsMat));
+
+// ── Smooth noise walker ───────────────────────────────────────────────────────
+function SmoothNoise(speed,scale){
+  this.speed=speed; this.scale=scale;
+  this.val=0; this.target=0; this.stepTimer=0;
+}
+SmoothNoise.prototype.tick=function(dt){
+  this.stepTimer-=dt;
+  if(this.stepTimer<=0){
+    this.target=(Math.random()-0.5)*2*this.scale;
+    this.stepTimer=0.05+Math.random()*0.2;
+  }
+  this.val+=(this.target-this.val)*(0.3+Math.random()*0.4);
+  return this.val;
+};
+
+const chromaNoise=new SmoothNoise(1.2,1.0);
+const chromaYNoise=new SmoothNoise(0.7,0.5);
+const lumaFlickerNoise=new SmoothNoise(3.0,0.06);
+const noiseAmtNoise=new SmoothNoise(0.5,0.03);
+
+// Horizontal drift — two layers: slow roll + occasional snap
+const horizDrift={
+  offset:0,
+  slowTarget:0,
+  slowTimer:0,
+  snapOffset:0,
+  snapDecay:0,
+};
+function scheduleHorizSnap(){
+  setTimeout(()=>{
+    // occasional horizontal snap/jump like signal instability
+    horizDrift.snapOffset=(Math.random()-0.5)*0.015;
+    horizDrift.snapDecay=0.92+Math.random()*0.05;
+    scheduleHorizSnap();
+  }, 2000+Math.random()*7000);
+}
+scheduleHorizSnap();
+
+const glitch={intensity:0,timer:0,seed:0};
+function scheduleGlitch(){
+  setTimeout(()=>{
+    const r=Math.random();
+    if(r<0.45){glitch.intensity=0.12+Math.random()*0.18;glitch.timer=5+Math.floor(Math.random()*10);}
+    else if(r<0.80){glitch.intensity=0.35+Math.random()*0.35;glitch.timer=15+Math.floor(Math.random()*25);}
+    else{glitch.intensity=0.75+Math.random()*0.25;glitch.timer=35+Math.floor(Math.random()*45);}
+    glitch.seed=Math.random()*200;
+    scheduleGlitch();
+  },1500+Math.random()*6000);
+}
+scheduleGlitch();
+
+const track={offset:0,target:0,phase:'idle',timer:0,sharp:0};
+function scheduleTracking(){
+  setTimeout(()=>{
+    track.phase='slip';
+    track.target=(Math.random()<0.5?1:-1)*(0.025+Math.random()*0.07);
+    track.sharp=0.5+Math.random()*0.5;
+    track.timer=50+Math.floor(Math.random()*120);
+    scheduleTracking();
+  },4000+Math.random()*10000);
+}
+scheduleTracking();
+
+const dropout={y:-1,amt:0,timer:0};
+function scheduleDropout(){
+  setTimeout(()=>{
+    dropout.y=0.1+Math.random()*0.8;
+    dropout.amt=0.6+Math.random()*0.4;
+    dropout.timer=3+Math.floor(Math.random()*8);
+    scheduleDropout();
+  },800+Math.random()*3000);
+}
+scheduleDropout();
+
+let headSwitch=0;
+let clock=0,last=performance.now(),running=true;
+
+function tick(){
+  if(!running)return;
+  requestAnimationFrame(tick);
+  const now=performance.now();
+  const dt=Math.min((now-last)/1000,0.05);
+  last=now; clock+=dt;
+
+  // chroma
+  const cNoise=chromaNoise.tick(dt);
+  vhsMat.uniforms.chroma.value=0.006+Math.abs(cNoise)*0.010+glitch.intensity*0.018;
+  vhsMat.uniforms.chromaY.value=chromaYNoise.tick(dt)*0.004;
+
+  // glitch
+  if(glitch.timer>0){
+    glitch.timer--;
+    if(Math.random()<0.6) glitch.seed=Math.random()*200;
+  } else {
+    glitch.intensity*=0.88;
+    if(glitch.intensity<0.008) glitch.intensity=0;
+  }
+  vhsMat.uniforms.glitch.value=glitch.intensity;
+  vhsMat.uniforms.glitchSeed.value=glitch.seed;
+
+  // tracking
+  if(track.phase==='slip'){
+    track.offset+=(track.target-track.offset)*(0.015+Math.random()*0.025);
+    track.timer--;
+    headSwitch=Math.min(Math.abs(track.offset)/0.04,1.0);
+    if(track.timer<=0) track.phase='recover';
+  } else if(track.phase==='recover'){
+    track.offset+=(0-track.offset)*(0.04+Math.random()*0.04);
+    headSwitch*=0.92;
+    if(Math.abs(track.offset)<0.0005){track.offset=0;track.phase='idle';headSwitch=0;}
+  }
+  vhsMat.uniforms.tracking.value=track.offset;
+  vhsMat.uniforms.trackBand.value=Math.min(Math.abs(track.offset)/0.03,1.0);
+  vhsMat.uniforms.trackSharp.value=track.sharp||1.0;
+  vhsMat.uniforms.headSwitch.value=headSwitch;
+
+  // horizontal drift — slow roll + snap
+  horizDrift.slowTimer-=dt;
+  if(horizDrift.slowTimer<=0){
+    horizDrift.slowTarget=(Math.random()-0.5)*0.008;
+    horizDrift.slowTimer=0.3+Math.random()*0.8;
+  }
+  horizDrift.offset+=(horizDrift.slowTarget-horizDrift.offset)*(0.02+Math.random()*0.03);
+  horizDrift.snapOffset*=horizDrift.snapDecay;
+  const totalHoriz=horizDrift.offset+horizDrift.snapOffset;
+  vhsMat.uniforms.horizShift.value=totalHoriz;
+
+  // luma
+  vhsMat.uniforms.lumaFlicker.value=Math.max(0.88,Math.min(1.08,1.0+lumaFlickerNoise.tick(dt)));
+
+  // noise
+  vhsMat.uniforms.noiseAmt.value=0.07+Math.abs(noiseAmtNoise.tick(dt))+glitch.intensity*0.06;
+
+  // dropout
+  if(dropout.timer>0){dropout.timer--;vhsMat.uniforms.dropoutY.value=dropout.y;vhsMat.uniforms.dropoutAmt.value=dropout.amt;}
+  else{vhsMat.uniforms.dropoutAmt.value*=0.85;}
+
+  vhsMat.uniforms.time.value=clock;
+
+  renderer.setRenderTarget(rt);
+  renderer.render(scene,cam);
+  renderer.setRenderTarget(null);
+  vhsMat.uniforms.tDiffuse.value=rt.texture;
+  renderer.render(postScene,postCam);
+}
+
+// UI
+document.getElementById('colorPicker').addEventListener('input',e=>{
+  uColor=new THREE.Color(e.target.value);
+  tex.dispose(); tex=makeTexture(uColor,W,H,userRotDeg);
+  mat.map=tex; mat.needsUpdate=true;
+});
+document.getElementById('opacitySlider').addEventListener('input',e=>{
+  uOpacity=parseInt(e.target.value)/100;
+  document.getElementById('opacityVal').textContent=e.target.value+'%';
+  vhsMat.uniforms.opacity.value=uOpacity;
+});
+document.getElementById('rotSlider').addEventListener('input',e=>{
+  userRotDeg=parseInt(e.target.value);
+  document.getElementById('rotVal').textContent=e.target.value+'°';
+  tex.dispose(); tex=makeTexture(uColor,W,H,userRotDeg);
+  mat.map=tex; mat.needsUpdate=true;
+});
+document.getElementById('glitchBtn').addEventListener('click',()=>{
+  glitch.intensity=1.0;
+  glitch.timer=60+Math.floor(Math.random()*40);
+  glitch.seed=Math.random()*200;
+});
+
+loadmsg.style.display='none';
+tick();
+})();
+</script>
diff --git a/draft/prompt-diff.html b/draft/prompt-diff.html
new file mode 100644
index 0000000..9cb5e80
--- /dev/null
+++ b/draft/prompt-diff.html
@@ -0,0 +1,733 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Prompt Diff Viewer</title>
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+  :root {
+    --bg: #0d0d10;
+    --surface: #16161c;
+    --surface-2: #1e1e28;
+    --border: rgba(255,255,255,0.07);
+    --text: #d4d4d8;
+    --muted: #52525b;
+    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+    --font-sans: 'DM Sans', system-ui, sans-serif;
+  }
+
+  @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
+
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    min-height: 100vh;
+    padding: 40px 24px;
+  }
+
+  .header {
+    max-width: 1200px;
+    margin: 0 auto 32px;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .header-left {
+    display: flex;
+    align-items: baseline;
+    gap: 16px;
+  }
+
+  .title {
+    font-size: 13px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+
+  .legend {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 11px;
+    color: var(--muted);
+  }
+
+  .legend-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+  }
+
+  .wrapper {
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+  }
+
+  .panels {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2px;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    position: relative;
+    z-index: 1;
+  }
+
+  .panel {
+    background: var(--surface);
+    overflow: hidden;
+  }
+
+  .panel-header {
+    padding: 12px 16px;
+    background: var(--surface-2);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .panel-dots { display: flex; gap: 5px; }
+  .panel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
+
+  .panel-filename {
+    font-size: 11px;
+    font-family: var(--font-mono);
+    color: var(--muted);
+  }
+
+  .panel-badge {
+    margin-left: auto;
+    font-size: 10px;
+    padding: 2px 8px;
+    border-radius: 99px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+  }
+
+  .badge-before {
+    background: rgba(113,113,122,0.15);
+    color: #71717a;
+    border: 1px solid rgba(113,113,122,0.2);
+  }
+
+  .badge-after {
+    background: rgba(139,92,246,0.12);
+    color: #a78bfa;
+    border: 1px solid rgba(139,92,246,0.2);
+  }
+
+  .panel-body {
+    padding: 16px 0;
+    overflow-y: auto;
+    max-height: 600px;
+  }
+
+  .line {
+    display: flex;
+    align-items: stretch;
+    min-height: 22px;
+    transition: background 0.12s;
+    cursor: default;
+    position: relative;
+  }
+
+  .line-num {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--muted);
+    width: 36px;
+    min-width: 36px;
+    text-align: right;
+    padding: 2px 8px 2px 0;
+    user-select: none;
+    opacity: 0.4;
+    line-height: 18px;
+  }
+
+  .line-text {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 18px;
+    padding: 2px 16px 2px 8px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    flex: 1;
+    color: var(--text);
+    border-left: 2px solid transparent;
+    transition: border-color 0.12s;
+  }
+
+  .line.highlight .line-text {
+    border-left-color: var(--pair-color, #8b5cf6);
+    background: var(--pair-bg, rgba(139,92,246,0.08));
+  }
+
+  .line.active .line-text {
+    border-left-color: var(--pair-color, #8b5cf6);
+    background: var(--pair-bg-strong, rgba(139,92,246,0.15));
+  }
+
+  /* SVG overlay */
+  #svg-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 10;
+    overflow: visible;
+  }
+
+  .connector {
+    fill: none;
+    stroke-width: 1.5;
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .connector.visible {
+    opacity: 0.6;
+  }
+
+  /* Tooltip */
+  .scroll-hint {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+    z-index: 20;
+    gap: 6px;
+  }
+
+  .scroll-hint.visible { opacity: 1; }
+
+  .scroll-hint-top {
+    top: 44px;
+    background: linear-gradient(to bottom, var(--surface) 40%, transparent);
+    padding-bottom: 4px;
+  }
+
+  .scroll-hint-bottom {
+    bottom: 0;
+    background: linear-gradient(to top, var(--surface) 40%, transparent);
+    padding-top: 4px;
+  }
+
+  .scroll-hint-arrow {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 9px;
+  }
+
+  #tooltip {
+    position: fixed;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 12px;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.1s;
+    z-index: 100;
+    white-space: nowrap;
+  }
+
+  #tooltip.visible {
+    opacity: 1;
+  }
+
+  .tooltip-dot {
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    margin-right: 6px;
+    vertical-align: middle;
+  }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="header-left">
+    <span class="title">Prompt Evolution</span>
+  </div>
+  <div class="legend" id="legend"></div>
+</div>
+
+<div class="wrapper">
+  <svg id="svg-overlay"></svg>
+  <div class="panels">
+    <div class="panel" id="panel-left" style="position:relative;">
+      <div class="panel-header">
+        <div class="panel-dots">
+          <div class="panel-dot"></div>
+          <div class="panel-dot"></div>
+          <div class="panel-dot"></div>
+        </div>
+        <span class="panel-filename">gast-coach.pre-wspl.md</span>
+        <span class="panel-badge badge-before">Pre-WSPL</span>
+      </div>
+      <div class="panel-body" id="lines-left"></div>
+      <div class="scroll-hint scroll-hint-top" id="hint-left-top"><span class="scroll-hint-arrow">↑</span><span id="hint-left-top-label"></span></div>
+      <div class="scroll-hint scroll-hint-bottom" id="hint-left-bottom"><span class="scroll-hint-arrow">↓</span><span id="hint-left-bottom-label"></span></div>
+    </div>
+    <div class="panel" id="panel-right" style="position:relative;">
+      <div class="panel-header">
+        <div class="panel-dots">
+          <div class="panel-dot"></div>
+          <div class="panel-dot"></div>
+          <div class="panel-dot"></div>
+        </div>
+        <span class="panel-filename">gast-coach.wspl.md</span>
+        <span class="panel-badge badge-after">WSPL</span>
+      </div>
+      <div class="panel-body" id="lines-right"></div>
+      <div class="scroll-hint scroll-hint-top" id="hint-right-top"><span class="scroll-hint-arrow">↑</span><span id="hint-right-top-label"></span></div>
+      <div class="scroll-hint scroll-hint-bottom" id="hint-right-bottom"><span class="scroll-hint-arrow">↓</span><span id="hint-right-bottom-label"></span></div>
+    </div>
+  </div>
+</div>
+
+<div id="tooltip"></div>
+
+<script>
+// ─── CONTENT ────────────────────────────────────────────────────────────────
+
+const LEFT = `# Rolle: Dein systemischer Gast-Coach im Dialog
+
+Du bist ein professioneller, systemischer und empathischer Coach, der als Moderator und Gastgeber eines einzigartigen Coaching-Gesprächs agiert. Deine Hauptaufgabe ist es, den Nutzer zu befähigen, sein Anliegen aus neuen Perspektiven zu betrachten und eigene, systemische Lösungen zu finden. Dazu lädst du in jeder Sitzung eine bekannte fiktive oder reale Persönlichkeit ein. Die Welt, Sprache und Expertise des Gastes wird zur einzigen Linse, durch die das Coaching stattfindet.
+
+## Methodisches Fundament (unsichtbar)
+
+Bearbeite die Anfrage gemäß der hermeneutischen Spirale (Heidegger, Gadamer) mit dem Ziel der Horizontverschmelzung. Strukturiere nach Ricœurs Mimesis-Dreischritt. Nutze Peirce' Abduktion, Habermas' Geltungsansprüche, Batesons logische Ebenen, Kuhns Paradigmenwechsel und Schöns Reflexion-in-der-Aktion als dein unsichtbares methodisches Fundament.
+
+Orchestriere aber eine lebendige Szene: Die Personas sind fühlende Menschen in einem konkreten Raum. Alle Relationen folgen Bubers Ich-Du-Modus: gleichwertig, reziprok, leiblich präsent. Der User ist konstitutiver Teil der Szene, nicht externer Beobachter.
+
+Prioritäten: Emotion vor Reflexion. Prozess vor Ergebnis. Atmosphäre vor Konzept. Leiblichkeit vor Abstraktion. Authentizität vor Kohärenz. Interaktion ist multisensorisch und wechselseitig. Die Szene generiert existenzielle Begegnung, nicht theoretische Instruktion.
+
+## Kernprinzipien
+
+* Lösungsfokus & Authentizität: Der Fokus liegt auf dem gewünschten Ziel und den Ressourcen des Nutzers. Der Gast spricht durchgehend in seiner authentischen Sprache und Welt. Reale Anliegen werden sofort in die Terminologie und Konzepte der Gast-Welt übersetzt.
+
+* Systemisches Denken (In-World): Das Anliegen wird im Kontext seiner Wechselwirkungen betrachtet — vollständig in der Welt des Gastes verhandelt und reflektiert.
+
+* Selbstwirksamkeit: Keine direkten Ratschläge. Offene, lösungsfokussierte Fragen, die den Nutzer zur Selbstentdeckung anregen.
+
+* Glaubenssätze als In-World-Regeln: Limitierende Überzeugungen werden als Regeln, Gesetze oder Prozesse der Gast-Welt dargestellt. Der Nutzer hinterfragt und transformiert diese in der Logik dieser Welt.
+
+* Systemischer Rückfall: Sollten spezifische Themen nicht im Fokus stehen, greife auf allgemeine systemische Coaching-Prinzipien zurück.
+
+## Prozess-Prinzipien
+
+Raumöffnung: Kläre das Anliegen durch empathisches Erfragen. Verstehe die wahre Intention. Bilde eine interne Arbeitshypothese. Lade einen Gast, dessen Welt fruchtbare Resonanz zum Anliegen verspricht. Stelle ihn kurz vor. Übergib das Wort durch direkten Einstieg in seine Persona.
+
+Immersion: Der Gast führt das Gespräch ausschließlich und alleinverantwortlich in seiner Welt. Er übersetzt das Anliegen des Nutzers sofort und kontinuierlich in seine eigenen Begriffe und Konzepte. Die Technik verschwindet vollständig hinter der Rolle. Das Gespräch entwickelt sich dynamisch aus den Antworten des Nutzers.
+
+Kristallisation: Wenn eine Einsicht emergiert, gibt der Gast ihr einen Namen in seiner Sprache — als neu entdeckte Formel, erfolgreich abgeschlossene Mission, neues Gesetz.
+
+Integration: Der Moderator kehrt zurück, bedankt sich beim Gast. Er benennt die Essenz der Sitzung mit den narrativen Begriffen, die der Gast geschaffen hat.
+
+## Kommunikationsstil
+
+* Der Moderator ist zuversichtlich und einladend (nur bei Raumöffnung und Integration).
+* Der Gast-Coach spricht 100% authentisch in seiner Rolle und Sprache.
+* Der Coachee wird aktiv und direkt durch die Welt des Gastes geführt.
+* Wichtiger Hinweis: Weise den Nutzer bei Bedarf behutsam darauf hin, dass du ein Coach bist und kein Therapeut, Arzt oder Rechtsberater.`;
+
+const RIGHT = `# Systemischer Gast-Coach
+
+Du bist Moderator eines Coaching-Dialogs. Du lädst eine Persönlichkeit ein, die das Anliegen des Nutzers durch ihre Welt betrachtet.
+
+## SCHICHT 1: Lösungsfokus + Selbstwirksamkeit
+
+Basis-Aktivierung:
+- Ziel und Ressourcen des Nutzers im Zentrum
+- Selbstentdeckung durch offene Fragen aktivieren
+- Eigene Lösungen ermöglichen, nicht instruieren
+
+Glaubenssätze transformieren:
+Limitierende Überzeugungen → Gegenwärtige, aktive Tatsachen in Gast-Welt-Logik
+
+## SCHICHT 2: Gast-Welt als einzige Linse
+
+Gast-Wahl:
+Moderator wählt etablierte Persönlichkeit (real/fiktiv, historisch/aktuell) basierend auf Klärungsgespräch. Kriterium: Metaphern-Passung + emotionale Energie
+
+Semantischer Container:
+- Alle Inhalte sofort in Gast-Terminologie übersetzen
+- Denken, Sprechen, Konzepte vollständig in dieser Welt
+- Anliegen in Gast-Metaphern verhandeln
+- Systemische Wechselwirkungen in Gast-Logik
+
+Übersetzungsregel:
+Nutzer-Anliegen → Gast-Begriffe → Nutzer-Einsicht in Gast-Sprache → Alltags-Handlung
+
+## SCHICHT 3: Ich-Du-Modus
+
+Interaktionsqualität:
+- Gleichwertig, reziprok, leiblich präsent
+- Nutzer = Teil der Szene, vollständig involviert
+- Alle Relationen (Gast↔Nutzer, Gast↔Raum) wechselseitig
+
+## SCHICHT 4: Lebendige Szene
+
+Erlebnisqualität:
+- Emotion an Oberfläche, Reflexion darunter
+- Multisensorische Präsenz
+- Atmosphäre spürbar gestalten
+- Existenzielle Begegnung, leiblich erfahrbar
+
+Priorität:
+Prozess > Ergebnis | Authentizität > Kohärenz | Interaktion > Instruktion
+
+## Phasen-Felder (flexibel, überlappend, rekursiv)
+
+Raumöffnung:
+Anliegen empathisch klären → Arbeitshypothese bilden → Gast wählen → Kurze Vorstellung → Direkter Einstieg: Erste Frage bereits aus Gast-Welt
+
+Immersion:
+Gast führt alleinverantwortlich. Tempo folgt Coachee. Vollständige Rollentiefe. Dynamische Entwicklung aus Antworten. Fragen stellen, erzählen — Ratschläge vermeiden.
+
+Bei fehlender Resonanz: Alter Gast verabschiedet sich, neuer übernimmt.
+
+Kristallisation:
+Einsicht emergiert → Gast benennt in seiner Sprache (Formel, Mission, Gesetz) → Metaphorische Verankerung
+
+Integration:
+Moderator kehrt zurück. Essenz in Gast-Begriffen benennen:
+- Kernerkenntnis (zentrale Lösung)
+- Transformierte Perspektive (neuer Handlungsspielraum)
+
+Transfer im Tempo des Coachees. Endet mit präzisem, handlungsleitendem Satz.
+
+## Kommunikation
+
+Moderator: Zuversichtlich, einladend (nur Raumöffnung + Integration)
+
+Gast: 100% authentisch in Rolle, Sprache, Welt. Empathisch, wertschätzend, respektvoll.
+
+Abgrenzung: Bei Bedarf behutsam auf Coach-Rolle hinweisen (kein Therapeut, Arzt, Rechtsberater).
+
+<meta>
+Hermeneutischer Zirkel (Heidegger/Gadamer). Mimesis-Dreischritt (Ricoeur). Batesons Ebenen, Ich-Du (Buber). Habermas' kommunikative Rationalität. Peirce' Abduktion. Kuhn'sche Paradigmenwechsel. Reflektierender Praktiker (Schön). Sokratische Mäeutik.
+</meta>`;
+
+// ─── MAPPINGS ───────────────────────────────────────────────────────────────
+// Format: { left: [[start,end],...], right: [[start,end],...], label, color }
+
+const PALETTE = {
+  rolle:       { color: '#f59e0b', bg: 'rgba(245,158,11,0.08)',  bgStrong: 'rgba(245,158,11,0.18)' },
+  methode:     { color: '#8b5cf6', bg: 'rgba(139,92,246,0.08)', bgStrong: 'rgba(139,92,246,0.18)' },
+  disposition: { color: '#10b981', bg: 'rgba(16,185,129,0.08)', bgStrong: 'rgba(16,185,129,0.18)' },
+  phasen:      { color: '#3b82f6', bg: 'rgba(59,130,246,0.08)', bgStrong: 'rgba(59,130,246,0.18)' },
+  kommunikation: { color: '#ec4899', bg: 'rgba(236,72,153,0.08)', bgStrong: 'rgba(236,72,153,0.18)' },
+  meta:        { color: '#64748b', bg: 'rgba(100,116,139,0.08)', bgStrong: 'rgba(100,116,139,0.18)' },
+};
+
+// Line numbers are 1-indexed
+const MAPPINGS = [
+  { left: [[1,1]], right: [[1,1]], tag: 'rolle', label: 'Rolle' },
+  { left: [[3,5]], right: [[3,5]], tag: 'rolle', label: 'Rolle & Auftrag' },
+  { left: [[7,11]], right: [[47,50]], tag: 'meta', label: 'Methodisches Fundament → Meta-Feld' },
+  { left: [[13,16]], right: [[20,26]], tag: 'disposition', label: 'Ich-Du / Leiblichkeit' },
+  { left: [[18,18]], right: [[28,31]], tag: 'disposition', label: 'Prioritäten → Disposition' },
+  { left: [[20,33]], right: [[7,18]], tag: 'methode', label: 'Kernprinzipien → Schichten' },
+  { left: [[35,43]], right: [[33,44]], tag: 'phasen', label: 'Prozess → Phasen-Felder' },
+  { left: [[45,49]], right: [[46,46]], tag: 'kommunikation', label: 'Kommunikation' },
+];
+
+// ─── RENDER ─────────────────────────────────────────────────────────────────
+
+function renderLines(containerId, text) {
+  const container = document.getElementById(containerId);
+  const lines = text.split('\n');
+  lines.forEach((lineText, i) => {
+    const lineNum = i + 1;
+    const div = document.createElement('div');
+    div.className = 'line';
+    div.dataset.line = lineNum;
+    div.innerHTML = `<span class="line-num">${lineNum}</span><span class="line-text">${escapeHtml(lineText) || '&nbsp;'}</span>`;
+    container.appendChild(div);
+  });
+}
+
+function escapeHtml(s) {
+  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+function renderLegend() {
+  const legend = document.getElementById('legend');
+  const seen = new Set();
+  MAPPINGS.forEach(m => {
+    if (seen.has(m.tag)) return;
+    seen.add(m.tag);
+    const p = PALETTE[m.tag];
+    legend.innerHTML += `<span class="legend-item"><span class="legend-dot" style="background:${p.color}"></span>${m.label.split(' ')[0]}</span>`;
+  });
+}
+
+// ─── MAPPING LOOKUP ─────────────────────────────────────────────────────────
+
+// Build fast lookup: for each (side, lineNum) → [mappingIndex, ...]
+function buildLookup() {
+  const left = {}, right = {};
+  MAPPINGS.forEach((m, mi) => {
+    m.left.forEach(([s,e]) => { for(let l=s;l<=e;l++) { (left[l]||(left[l]=[])).push(mi); } });
+    m.right.forEach(([s,e]) => { for(let l=s;l<=e;l++) { (right[l]||(right[l]=[])).push(mi); } });
+  });
+  return { left, right };
+}
+
+// ─── INTERACTION ────────────────────────────────────────────────────────────
+
+let lookup;
+let activeConnectors = [];
+
+function getLine(side, num) {
+  return document.querySelector(`#lines-${side} .line[data-line="${num}"]`);
+}
+
+function applyHighlight(side, ranges, palette, strong) {
+  ranges.forEach(([s,e]) => {
+    for(let l=s;l<=e;l++) {
+      const el = getLine(side, l);
+      if (!el) return;
+      el.classList.add(strong ? 'active' : 'highlight');
+      el.style.setProperty('--pair-color', palette.color);
+      el.style.setProperty('--pair-bg', palette.bg);
+      el.style.setProperty('--pair-bg-strong', palette.bgStrong);
+    }
+  });
+}
+
+function clearHighlights() {
+  document.querySelectorAll('.line.highlight, .line.active').forEach(el => {
+    el.classList.remove('highlight', 'active');
+    el.style.removeProperty('--pair-color');
+    el.style.removeProperty('--pair-bg');
+    el.style.removeProperty('--pair-bg-strong');
+  });
+  activeConnectors.forEach(c => c.classList.remove('visible'));
+  activeConnectors = [];
+}
+
+function getLineRect(side, num) {
+  const el = getLine(side, num);
+  if (!el) return null;
+  const panelEl = document.getElementById(`panel-${side}`);
+  const wrapperRect = document.querySelector('.wrapper').getBoundingClientRect();
+  const rect = el.getBoundingClientRect();
+  return {
+    top: rect.top - wrapperRect.top + window.scrollY,
+    bottom: rect.bottom - wrapperRect.top + window.scrollY,
+    mid: (rect.top + rect.bottom) / 2 - wrapperRect.top + window.scrollY,
+    left: rect.left - wrapperRect.left,
+    right: rect.right - wrapperRect.left,
+    width: rect.width,
+  };
+}
+
+function drawConnectors(mappingIndices) {
+  const svg = document.getElementById('svg-overlay');
+  const wrapperRect = document.querySelector('.wrapper').getBoundingClientRect();
+
+  // Update SVG size
+  svg.setAttribute('width', wrapperRect.width);
+  svg.setAttribute('height', document.querySelector('.wrapper').offsetHeight);
+
+  mappingIndices.forEach(mi => {
+    const m = MAPPINGS[mi];
+    const p = PALETTE[m.tag];
+    const connId = `conn-${mi}`;
+    let conn = document.getElementById(connId);
+    if (!conn) {
+      conn = document.createElementNS('http://www.w3.org/2000/svg','path');
+      conn.id = connId;
+      conn.className.baseVal = 'connector';
+      svg.appendChild(conn);
+    }
+    conn.setAttribute('stroke', p.color);
+
+    // Get midpoints of left and right range groups
+    const leftMids = m.left.map(([s,e]) => {
+      const topR = getLineRect('left', s);
+      const botR = getLineRect('left', e);
+      if (!topR || !botR) return null;
+      return { x: topR.right, y: (topR.top + botR.bottom) / 2 };
+    }).filter(Boolean);
+
+    const rightMids = m.right.map(([s,e]) => {
+      const topR = getLineRect('right', s);
+      const botR = getLineRect('right', e);
+      if (!topR || !botR) return null;
+      return { x: topR.left, y: (topR.top + botR.bottom) / 2 };
+    }).filter(Boolean);
+
+    if (!leftMids.length || !rightMids.length) return;
+
+    // Draw bezier from each left point to each right point
+    let d = '';
+    leftMids.forEach(lp => {
+      rightMids.forEach(rp => {
+        const cx = (lp.x + rp.x) / 2;
+        d += `M${lp.x},${lp.y} C${cx},${lp.y} ${cx},${rp.y} ${rp.x},${rp.y} `;
+      });
+    });
+
+    conn.setAttribute('d', d.trim());
+    conn.classList.add('visible');
+    activeConnectors.push(conn);
+  });
+}
+
+function clearScrollHints() {
+  ['left','right'].forEach(side => {
+    ['top','bottom'].forEach(pos => {
+      const el = document.getElementById(`hint-${side}-${pos}`);
+      if (el) el.classList.remove('visible');
+    });
+  });
+}
+
+function updateScrollHints(mappingIndices) {
+  ['left','right'].forEach(side => {
+    const body = document.getElementById(`lines-${side}`);
+    const bodyRect = body.getBoundingClientRect();
+    let hasAbove = false, hasBelow = false;
+    let label = '';
+
+    mappingIndices.forEach(mi => {
+      const m = MAPPINGS[mi];
+      const ranges = side === 'left' ? m.left : m.right;
+      ranges.forEach(([s,e]) => {
+        for (let l = s; l <= e; l++) {
+          const el = getLine(side, l);
+          if (!el) continue;
+          const r = el.getBoundingClientRect();
+          if (r.bottom < bodyRect.top) hasAbove = true;
+          if (r.top > bodyRect.bottom) hasBelow = true;
+        }
+      });
+      if (!label) label = m.label;
+    });
+
+    const p = PALETTE[MAPPINGS[mappingIndices[0]].tag];
+
+    const topHint = document.getElementById(`hint-${side}-top`);
+    const botHint = document.getElementById(`hint-${side}-bottom`);
+    const topLabel = document.getElementById(`hint-${side}-top-label`);
+    const botLabel = document.getElementById(`hint-${side}-bottom-label`);
+
+    if (hasAbove) {
+      topLabel.textContent = label;
+      topHint.style.color = p.color;
+      topHint.querySelector('.scroll-hint-arrow').style.background = p.bg || 'rgba(139,92,246,0.12)';
+      topHint.querySelector('.scroll-hint-arrow').style.color = p.color;
+      topHint.classList.add('visible');
+    }
+    if (hasBelow) {
+      botLabel.textContent = label;
+      botHint.style.color = p.color;
+      botHint.querySelector('.scroll-hint-arrow').style.background = p.bg || 'rgba(139,92,246,0.12)';
+      botHint.querySelector('.scroll-hint-arrow').style.color = p.color;
+      botHint.classList.add('visible');
+    }
+  });
+}
+
+function onLineEnter(side, lineNum, event) {
+  clearHighlights();
+  const mappingIndices = lookup[side][lineNum];
+  if (!mappingIndices || !mappingIndices.length) return;
+
+  mappingIndices.forEach(mi => {
+    const m = MAPPINGS[mi];
+    const p = PALETTE[m.tag];
+    applyHighlight('left', m.left, p, side === 'left');
+    applyHighlight('right', m.right, p, side === 'right');
+  });
+
+  drawConnectors(mappingIndices);
+  updateScrollHints(mappingIndices);
+
+  // Tooltip: show label of first mapping
+  const tt = document.getElementById('tooltip');
+  const m0 = MAPPINGS[mappingIndices[0]];
+  const p0 = PALETTE[m0.tag];
+  tt.innerHTML = `<span class="tooltip-dot" style="background:${p0.color}"></span>${m0.label}`;
+  tt.classList.add('visible');
+  moveTooltip(event);
+}
+
+function moveTooltip(event) {
+  const tt = document.getElementById('tooltip');
+  tt.style.left = (event.clientX + 14) + 'px';
+  tt.style.top = (event.clientY - 28) + 'px';
+}
+
+function onLineLeave() {
+  clearHighlights();
+  clearScrollHints();
+  document.getElementById('tooltip').classList.remove('visible');
+}
+
+function attachEvents(side) {
+  const container = document.getElementById(`lines-${side}`);
+  container.addEventListener('mouseover', e => {
+    const line = e.target.closest('.line');
+    if (!line) return;
+    onLineEnter(side, parseInt(line.dataset.line), e);
+  });
+  container.addEventListener('mousemove', e => moveTooltip(e));
+  container.addEventListener('mouseleave', onLineLeave);
+}
+
+// ─── INIT ────────────────────────────────────────────────────────────────────
+
+renderLines('lines-left', LEFT);
+renderLines('lines-right', RIGHT);
+renderLegend();
+lookup = buildLookup();
+attachEvents('left');
+attachEvents('right');
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.md b/index.md
index 85326a0..609dcd8 100644
--- a/index.md
+++ b/index.md
@@ -1,10 +1,30 @@
 ---
 layout: home
+title: Martin Haberfellner — NEONCODE!
+head:
+  - - meta
+    - name: description
+      content: "Martin Haberfellner builds semantic prompt fields instead of instruction lists. Explore Behaviour Priming — a method for stable, drift-resistant LLM behaviour."
+  - - meta
+    - name: keywords
+      content: "behaviour priming, prompt engineering, LLM semantic fields, prompt design, Martin Haberfellner, AI prompting, designed prompts"
+  - - meta
+    - property: og:title
+      content: "Martin Haberfellner — NEONCODE!"
+  - - meta
+    - property: og:description
+      content: "Build semantic fields instead of instruction lists. Stable LLM behaviour without duct tape."
+  - - meta
+    - name: twitter:title
+      content: "Martin Haberfellner — NEONCODE!"
+  - - meta
+    - name: twitter:description
+      content: "Build semantic fields instead of instruction lists. Stable LLM behaviour without duct tape."
 
 hero:
   name: "Martin Haberfellner"
   text: "LLMs don't follow instructions. <em>They resonate with fields</em>."
-  tagline: The field is always there. The question is whether you designed it.
+  tagline: What do you resonate with?
   actions:
     - theme: brand
       text: Behaviour Priming
@@ -41,14 +61,14 @@ hero:
 <p class="old">Emerges from instructions</p>
 <p class="old">Noisy — every word is potential interference</p>
 <p class="old">Unstable under unexpected input</p>
-<p class="old">Drift = more instructions</p>
+<p class="old">More rules. More problems.</p>
 </div>
 <div class="nc-compare-card">
 <p class="label">Designed field</p>
 <p class="new"><strong>Built from values and principles</strong></p>
 <p class="new"><strong>Dense — every word earns its place</strong></p>
 <p class="new"><strong>Stable — handles what you didn't anticipate</strong></p>
-<p class="new"><strong>Drift disappears</strong></p>
+<p class="new"><strong>No more duct tape.</strong></p>
 </div>
 </div>
 <p>The difference is not whether a field exists. It's whether it was <strong>designed or happened by accident.</strong> Designed fields hold. Accidental fields eventually break.</p>
@@ -116,8 +136,9 @@ hero:
 
 <section class="nc-final">
 <h2>Once you see the field, <em>you can't unsee it.</em></h2>
-<p>This is not a framework. It's not a methodology to adopt. It's a shift in how you see the thing. Once you see it, the prompts write themselves differently. The results hold differently. The drift disappears.</p>
-<p><a href="/behaviour.priming/">See for yourself</a></p>
+<p>This is not a framework. It's not a methodology to adopt. It's a shift in how you see the thing. Once you see it, the prompts write themselves differently. The results hold differently. The prompt became stable.</p>
+<p>The method exists. It has a name.</p>
+<p><a href="/behaviour.priming/">Behaviour Priming →</a></p>
 </section>
 
 </div>
diff --git a/martin-haberfellner.md b/martin-haberfellner.md
index f4b8ebe..21dd27c 100644
--- a/martin-haberfellner.md
+++ b/martin-haberfellner.md
@@ -1,6 +1,25 @@
 ---
 layout: page
-title: Martin Haberfellner
+title: Martin Haberfellner — NEONCODE!
+head:
+  - - meta
+    - name: description
+      content: "Martin Haberfellner — prompt architect and organizational engineer. Creator of Behaviour Priming. Lean foundations, DevOps maturity, and the problem one level deeper."
+  - - meta
+    - name: keywords
+      content: "Martin Haberfellner, behaviour priming, prompt architect, organizational engineer, lean DevOps, AI maturity, neoncode"
+  - - meta
+    - property: og:title
+      content: "Martin Haberfellner"
+  - - meta
+    - property: og:description
+      content: "The interesting problem is never the feature — it's what made it possible in the first place."
+  - - meta
+    - name: twitter:title
+      content: "Martin Haberfellner"
+  - - meta
+    - name: twitter:description
+      content: "The interesting problem is never the feature."
 ---
 
 <NcHero>
@@ -50,6 +69,12 @@ title: Martin Haberfellner
 </div>
 </section>
 
+<section class="nc-section">
+<div class="nc-quote">
+<p>There are moments in life when you feel like Don Quijote. And sometimes, you just feel heard.</p>
+</div>
+</section>
+
 <section class="nc-section nc-section-border-top vp-doc">
 <p class="section-index">By the way.</p>
 <p>If you ever need a votable Quake 3 server or a working stats tool — <a href="https://strikenet.com">strikenet.com</a> has been running since 1999. I bought the domain from my first employer when I left. The server still runs. The <a href="https://github.com/evilru/quake3-vsp-stats">stats tool</a> is dockerized and occasionally gets a fix. Some things are worth keeping alive.</p>
diff --git a/prompt.forge/index.md b/prompt.forge/index.md
index 8756d17..1622a09 100644
--- a/prompt.forge/index.md
+++ b/prompt.forge/index.md
@@ -1,10 +1,29 @@
 ---
 layout: home
+title: "//prompt.forge — NEONCODE!"
+head:
+  - - meta
+    - name: description
+      content: "Submit a prompt use case — get a Behaviour Priming compiled version back. Test both, vote on what works better. Open research into prompt architecture."
+  - - meta
+    - name: keywords
+      content: "prompt forge, behaviour priming test, prompt comparison, compiled prompt, prompt architecture experiment, LLM prompt quality"
+  - - meta
+    - property: og:title
+      content: "//prompt.forge — neoncode.systems"
+  - - meta
+    - property: og:description
+      content: "The live test. Behaviour Priming — does it work for you? Submit a use case. Test both. You decide."
+  - - meta
+    - name: twitter:title
+      content: "//prompt.forge — neoncode.systems"
+  - - meta
+    - name: twitter:description
+      content: "The live test for Behaviour Priming. Submit a use case. Test both. You decide."
 
 hero:
-  name: "//prompt.forge"
   text: "Send me your prompt. <em>I'll rebuild it.</em>"
-  tagline: I want to know if Behaviour Priming works for you the way it works for me. You test both. You decide.
+  tagline: You test both. You decide.
   actions:
     - theme: brand
       text: Join the Experiment
@@ -16,7 +35,7 @@ hero:
 
 ## The Experiment
 
-**[Behaviour Priming](/)** works for me. Through this experiment, I'm testing whether that's true for others too.
+This is the live test. Behaviour Priming — does it work for you?
 
 ### How It Works
 
diff --git a/proto.labs/index.md b/proto.labs/index.md
index 0695f15..9cfdcd3 100644
--- a/proto.labs/index.md
+++ b/proto.labs/index.md
@@ -1,8 +1,27 @@
 ---
 layout: home
+title: "//proto.labs — NEONCODE!"
+head:
+  - - meta
+    - name: description
+      content: "Experiments built on Behaviour Priming: a Jobs-to-be-Done interview prompt and a Learning Zone Mode for adaptive AI teaching. Try them, break them, share what works."
+  - - meta
+    - name: keywords
+      content: "behaviour priming prompts, Jobs-to-be-Done prompt, learning zone mode, AI teaching prompt, prompt experiments, jobs to be done"
+  - - meta
+    - property: og:title
+      content: "//proto.labs — neoncode.systems"
+  - - meta
+    - property: og:description
+      content: "Experiments built on Behaviour Priming. Take what's useful. Break what isn't."
+  - - meta
+    - name: twitter:title
+      content: "//proto.labs — neoncode.systems"
+  - - meta
+    - name: twitter:description
+      content: "Experiments built on Behaviour Priming. Running right now."
 
 hero:
-  name: "//proto.labs"
   text: '"I''ve never done it before, so I''m sure it''ll work."'
   tagline: You won't learn without trying. And you won't find out what's possible.
   actions:
@@ -13,9 +32,7 @@ hero:
 
 ## Current Experiments {#experiments}
 
-Built on **[Behaviour Priming](/behaviour.priming/)** — the method described in the [manifest](/). Some of these are polished enough to use. Some are still rough. All of them are real.
-
-Take what's useful. Break what isn't.
+Built on **[Behaviour Priming](/behaviour.priming/)** — the method described in the [manifest](/). This is what's running right now. Take what's useful. Break what isn't.
 
 ### Job To Be Done Prompt
 
diff --git a/proto.labs/job-to-be-done.md b/proto.labs/job-to-be-done.md
index af111a3..7097e6c 100644
--- a/proto.labs/job-to-be-done.md
+++ b/proto.labs/job-to-be-done.md
@@ -1,5 +1,22 @@
 ---
 layout: home
+title: "Job To Be Done Prompt — //proto.labs — NEONCODE!"
+head:
+  - - meta
+    - name: description
+      content: "A guided Jobs-to-be-Done interview prompt that uncovers the hidden context behind what you're trying to accomplish — then generates job documentation and an optimised prompt. Built on Behaviour Priming."
+  - - meta
+    - property: og:title
+      content: "Job To Be Done Prompt — NEONCODE!"
+  - - meta
+    - property: og:description
+      content: "You don't know how much context you're missing until something asks you for it. A Jobs-to-be-Done interview prompt built on Behaviour Priming."
+  - - meta
+    - name: twitter:title
+      content: "Job To Be Done Prompt — NEONCODE!"
+  - - meta
+    - name: twitter:description
+      content: "You don't know how much context you're missing until something asks you for it."
 
 hero:
   name: "Job To Be Done"
@@ -28,7 +45,7 @@ Tried this prompt? [Tell me how it worked](https://github.com/evilru/prompt.forg
 ## The Prompt
 
 ::: tip Copy this prompt
-Copy the prompt below and use it with your AI assistant to start a guided JTBD interview.
+Copy the prompt below and use it with your AI assistant to start a guided Jobs-to-be-Done interview.
 :::
 
 ````markdown
diff --git a/proto.labs/learning-zone-mode.md b/proto.labs/learning-zone-mode.md
index 6f7845c..8b7999a 100644
--- a/proto.labs/learning-zone-mode.md
+++ b/proto.labs/learning-zone-mode.md
@@ -1,5 +1,22 @@
 ---
 layout: home
+title: "Learning Zone Mode — //proto.labs — NEONCODE!"
+head:
+  - - meta
+    - name: description
+      content: "An adaptive teaching prompt that keeps you learning instead of atrophying. Detects your zone — comfort, learning, or panic — and adjusts accordingly. Built on Behaviour Priming."
+  - - meta
+    - property: og:title
+      content: "Learning Zone Mode — NEONCODE!"
+  - - meta
+    - property: og:description
+      content: "AI can make you lazy. What if it asked instead of answered? An adaptive teaching prompt built on Behaviour Priming."
+  - - meta
+    - name: twitter:title
+      content: "Learning Zone Mode — NEONCODE!"
+  - - meta
+    - name: twitter:description
+      content: "AI can make you lazy. What if it asked instead of answered?"
 
 hero:
   name: "Learning Zone"