diff --git a/docs/echo-chamber.html b/docs/echo-chamber.html
new file mode 100644
index 0000000..7040bf1
--- /dev/null
+++ b/docs/echo-chamber.html
@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+<title>The Echo Chamber — Fractal Periodic Table</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{width:100%;height:100%;overflow:hidden;background:#050510;font-family:Georgia,serif;color:#e0e0d0;touch-action:none}
+canvas{display:block;position:absolute;top:0;left:0}
+#ui{position:fixed;z-index:100;pointer-events:none;width:100%;height:100%}
+#title{position:absolute;top:12px;left:0;right:0;text-align:center;font:italic 20px Garamond,Georgia,serif;color:#ffd700;letter-spacing:3px;text-shadow:0 0 20px rgba(255,215,0,.3);opacity:.8;transition:opacity .4s}
+#subtitle{position:absolute;top:38px;left:0;right:0;text-align:center;font:italic 11px Garamond,Georgia,serif;color:rgba(255,236,139,.4);letter-spacing:2px}
+#depth-indicator{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;pointer-events:auto}
+#depth-indicator .pip{width:8px;height:8px;border-radius:50%;border:1px solid rgba(255,215,0,.3);cursor:pointer;transition:all .3s}
+#depth-indicator .pip.active{background:#ffd700;border-color:#ffd700;box-shadow:0 0 8px rgba(255,215,0,.5)}
+#depth-indicator .pip:hover{border-color:#ffd700}
+#layer-label{position:absolute;right:32px;top:50%;transform:translateY(-50%);font:italic 11px Georgia,serif;color:rgba(255,215,0,.5);text-align:right;width:120px;transition:opacity .3s}
+#tooltip{position:absolute;pointer-events:none;display:none;background:rgba(5,5,16,.95);border:1px solid #ffd700;border-radius:8px;padding:10px 14px;font:13px Georgia,serif;max-width:260px;backdrop-filter:blur(6px)}
+#tooltip .sym{font-size:28px;font-weight:700;color:#ffd700}
+#tooltip .name{font-size:14px;color:#ffec8b;margin:2px 0 6px}
+#tooltip .info{font-size:11px;line-height:1.7;color:#bbb}
+#tooltip .info b{color:#eee}
+#hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:italic 11px Georgia,serif;color:rgba(255,215,0,.25);transition:opacity 1s}
+#legend{position:absolute;bottom:14px;left:14px;pointer-events:auto;font:11px Georgia,serif;color:#999;background:rgba(5,5,16,.85);border:1px solid rgba(255,215,0,.2);border-radius:8px;padding:8px 12px;opacity:.7;transition:opacity .3s}
+#legend:hover{opacity:1}
+#legend .row{display:flex;align-items:center;gap:6px;margin:2px 0}
+#legend .d{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+@media(max-width:600px){
+  #title{font-size:15px;top:8px}
+  #subtitle{font-size:9px;top:28px}
+  #depth-indicator{right:10px}
+  #layer-label{display:none}
+  #legend{font-size:9px;padding:6px 8px}
+  #tooltip{font-size:11px;max-width:200px}
+  #tooltip .sym{font-size:22px}
+}
+</style>
+</head>
+<body>
+<canvas id="c"></canvas>
+<div id="ui">
+  <div id="title">The echo chamber</div>
+  <div id="subtitle">Scroll to descend through the layers</div>
+  <div id="depth-indicator"></div>
+  <div id="layer-label"></div>
+  <div id="tooltip"></div>
+  <div id="hint">Scroll or pinch to explore depth &middot; Hover elements for data</div>
+  <div id="legend">
+    <div class="row"><div class="d" style="background:#00ff88"></div><span style="color:#88ffbb">Stable</span></div>
+    <div class="row"><div class="d" style="background:#ffaa00"></div><span style="color:#ffcc66">Metastable</span></div>
+    <div class="row"><div class="d" style="background:#ff0044"></div><span style="color:#ff6688">Radioactive</span></div>
+    <div class="row"><div class="d" style="background:#00ffff"></div><span style="color:#88ffff">Noble gas</span></div>
+    <div class="row"><div class="d" style="background:#ffd700;width:10px;height:10px"></div><span style="color:#ffe680">Gold — resonance lock</span></div>
+  </div>
+</div>
+<script>
+const ELEMENTS=`1,Hydrogen,H,1,Baseline,Ground,13.2,1,1,1,Stable
+2,Helium,He,2,Baseline,Ground,13.2,0,18,1,Stable
+3,Lithium,Li,3,Baseline,Ground-Primary,13.6,1,1,2,Stable
+4,Beryllium,Be,4,Baseline,Primary,14,2,2,2,Stable
+5,Boron,B,5,Baseline,Primary,14.1,3,13,2,Stable
+6,Carbon,C,6,Baseline,Primary,14.1,4,14,2,Stable
+7,Nitrogen,N,7,Baseline,Primary,14.1,3,15,2,Stable
+8,Oxygen,O,8,Baseline,Primary,14.2,2,16,2,Stable
+9,Fluorine,F,9,Baseline,Primary,14.2,1,17,2,Stable
+10,Neon,Ne,10,Baseline,Primary,14.2,0,18,2,Stable
+11,Sodium,Na,11,Baseline,Primary-Secondary,14.4,1,1,3,Stable
+12,Magnesium,Mg,12,Baseline,Secondary,14.6,2,2,3,Stable
+13,Aluminum,Al,13,Baseline,Secondary,14.7,3,13,3,Stable
+14,Silicon,Si,14,Baseline,Secondary,14.7,4,14,3,Stable
+15,Phosphorus,P,15,Baseline,Secondary,14.7,3,15,3,Stable
+16,Sulfur,S,16,Baseline,Secondary,14.8,2,16,3,Stable
+17,Chlorine,Cl,17,Baseline,Secondary,14.8,1,17,3,Stable
+18,Argon,Ar,18,Baseline,Secondary,14.8,0,18,3,Stable
+19,Potassium,K,19,Baseline,Secondary-PhaseGap,14.9,1,1,4,Stable
+20,Calcium,Ca,20,Baseline,Secondary-PhaseGap,14.9,2,2,4,Stable
+21,Scandium,Sc,21,Baseline,Secondary-PhaseGap,15,3,3,4,Stable
+22,Titanium,Ti,22,Baseline,Secondary-PhaseGap,15,4,4,4,Stable
+23,Vanadium,V,23,Baseline,Secondary-PhaseGap,15,5,5,4,Stable
+24,Chromium,Cr,24,Baseline,Secondary-PhaseGap,15.1,6,6,4,Stable
+25,Manganese,Mn,25,Baseline,Secondary-PhaseGap,15.1,7,7,4,Stable
+26,Iron,Fe,26,Baseline,Secondary-PhaseGap,15.1,6,8,4,Stable
+27,Cobalt,Co,27,Baseline,Secondary-PhaseGap,15.2,5,9,4,Stable
+28,Nickel,Ni,28,Baseline,Secondary-PhaseGap,15.2,4,10,4,Stable
+29,Copper,Cu,29,Baseline,Secondary-PhaseGap,15.2,2,11,4,Stable
+30,Zinc,Zn,30,Baseline,Secondary-PhaseGap,15.3,2,12,4,Stable
+31,Gallium,Ga,31,Baseline,Secondary-PhaseGap,15.3,3,13,4,Stable
+32,Germanium,Ge,32,Baseline,Secondary-PhaseGap,15.3,4,14,4,Stable
+33,Arsenic,As,33,Baseline,Secondary-PhaseGap,15.4,3,15,4,Stable
+34,Selenium,Se,34,Baseline,Secondary-PhaseGap,15.4,2,16,4,Stable
+35,Bromine,Br,35,Baseline,Secondary-PhaseGap,15.4,1,17,4,Stable
+36,Krypton,Kr,36,Baseline,Secondary-PhaseGap,15.5,0,18,4,Stable
+37,Rubidium,Rb,37,Baseline,PhaseGap-Approach,15.5,1,1,5,Stable
+38,Strontium,Sr,38,Baseline,PhaseGap-Approach,15.5,2,2,5,Stable
+39,Yttrium,Y,39,Baseline,PhaseGap-Approach,15.6,3,3,5,Stable
+40,Zirconium,Zr,40,Baseline,PhaseGap-Approach,15.6,4,4,5,Stable
+41,Niobium,Nb,41,Baseline,PhaseGap-Approach,15.6,5,5,5,Stable
+42,Molybdenum,Mo,42,Baseline,PhaseGap-Approach,15.6,6,6,5,Stable
+43,Technetium,Tc,43,Metastable,PhaseGap-Approach,15.7,7,7,5,Radioactive
+44,Ruthenium,Ru,44,Baseline,PhaseGap-Approach,15.7,8,8,5,Stable
+45,Rhodium,Rh,45,Baseline,PhaseGap-Approach,15.7,6,9,5,Stable
+46,Palladium,Pd,46,Baseline,PhaseGap-Approach,15.7,4,10,5,Stable
+47,Silver,Ag,47,Baseline,PhaseGap-Approach,15.7,1,11,5,Stable
+48,Cadmium,Cd,48,Baseline,PhaseGap-Approach,15.7,2,12,5,Stable
+49,Indium,In,49,Baseline,PhaseGap-Approach,15.7,3,13,5,Stable
+50,Tin,Sn,50,Baseline,PhaseGap-Approach,15.8,4,14,5,Stable
+51,Antimony,Sb,51,Baseline,PhaseGap-Approach,15.8,3,15,5,Stable
+52,Tellurium,Te,52,Baseline,PhaseGap-Approach,15.8,2,16,5,Stable
+53,Iodine,I,53,Baseline,PhaseGap-Approach,15.8,1,17,5,Stable
+54,Xenon,Xe,54,Baseline,PhaseGap-Center,15.8,0,18,5,Stable
+55,Cesium,Cs,55,Baseline,PhaseGap-Center,15.8,1,1,6,Stable
+56,Barium,Ba,56,Baseline,PhaseGap-Center,15.8,2,2,6,Stable
+57,Lanthanum,La,57,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+58,Cerium,Ce,58,Baseline,PhaseGap-Center,15.8,4,3,6,Stable
+59,Praseodymium,Pr,59,Baseline,PhaseGap-Center,15.8,4,3,6,Stable
+60,Neodymium,Nd,60,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+61,Promethium,Pm,61,Metastable,PhaseGap-Center,15.8,3,3,6,Radioactive
+62,Samarium,Sm,62,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+63,Europium,Eu,63,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+64,Gadolinium,Gd,64,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+65,Terbium,Tb,65,Baseline,PhaseGap-Center,15.8,4,3,6,Stable
+66,Dysprosium,Dy,66,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+67,Holmium,Ho,67,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+68,Erbium,Er,68,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+69,Thulium,Tm,69,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+70,Ytterbium,Yb,70,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+71,Lutetium,Lu,71,Baseline,PhaseGap-Center,15.8,3,3,6,Stable
+72,Hafnium,Hf,72,Baseline,PhaseGap-Center,15.8,4,4,6,Stable
+73,Tantalum,Ta,73,Baseline,PhaseGap-Center,15.8,5,5,6,Stable
+74,Tungsten,W,74,Baseline,PhaseGap-Center,15.8,6,6,6,Stable
+75,Rhenium,Re,75,Baseline,PhaseGap-Center,15.8,7,7,6,Stable
+76,Osmium,Os,76,Baseline,PhaseGap-Center,15.8,8,8,6,Stable
+77,Iridium,Ir,77,Baseline,PhaseGap-Center,15.8,6,9,6,Stable
+78,Platinum,Pt,78,Baseline,PhaseGap-Center,15.8,4,10,6,Stable
+79,Gold,Au,79,HighOrder,PhaseGap-Center,15.8,1,11,6,Stable
+80,Mercury,Hg,80,Baseline,PhaseGap-Center,15.8,2,12,6,Stable
+81,Thallium,Tl,81,Baseline,PhaseGap-Center,15.8,3,13,6,Stable
+82,Lead,Pb,82,Baseline,PhaseGap-Center,15.8,4,14,6,Stable
+83,Bismuth,Bi,83,Baseline,PhaseGap-Center,15.8,5,15,6,Stable
+84,Polonium,Po,84,Metastable,PhaseGap-Center,15.8,6,16,6,Radioactive
+85,Astatine,At,85,Metastable,PhaseGap-Center,15.8,7,17,6,Radioactive
+86,Radon,Rn,86,Metastable,PhaseGap-Center,15.8,0,18,6,Radioactive
+87,Francium,Fr,87,Metastable,PhaseGap-Tertiary,15.9,1,1,7,Radioactive
+88,Radium,Ra,88,Metastable,PhaseGap-Tertiary,15.9,2,2,7,Radioactive
+89,Actinium,Ac,89,Metastable,PhaseGap-Tertiary,15.9,3,3,7,Radioactive
+90,Thorium,Th,90,Baseline,PhaseGap-Tertiary,15.9,4,3,7,Stable
+91,Protactinium,Pa,91,Metastable,PhaseGap-Tertiary,15.9,5,3,7,Radioactive
+92,Uranium,U,92,Baseline,PhaseGap-Tertiary,15.9,6,3,7,Stable
+93,Neptunium,Np,93,Metastable,PhaseGap-Tertiary,16,7,3,7,Radioactive
+94,Plutonium,Pu,94,Metastable,PhaseGap-Tertiary,16,8,3,7,Radioactive
+95,Americium,Am,95,Metastable,Tertiary,16,6,3,7,Radioactive
+96,Curium,Cm,96,Metastable,Tertiary,16,6,3,7,Radioactive
+97,Berkelium,Bk,97,Metastable,Tertiary,16,6,3,7,Radioactive
+98,Californium,Cf,98,Metastable,Tertiary,16,6,3,7,Radioactive
+99,Einsteinium,Es,99,Metastable,Tertiary,16,6,3,7,Radioactive
+100,Fermium,Fm,100,Metastable,Tertiary,16,6,3,7,Radioactive
+101,Mendelevium,Md,101,Metastable,Tertiary,16,6,3,7,Radioactive
+102,Nobelium,No,102,Metastable,Tertiary,16,6,3,7,Radioactive
+103,Lawrencium,Lr,103,Metastable,Tertiary,16,6,3,7,Radioactive
+104,Rutherfordium,Rf,104,Metastable,Tertiary,16,4,4,7,Radioactive
+105,Dubnium,Db,105,Metastable,Tertiary,16,5,5,7,Radioactive
+106,Seaborgium,Sg,106,Metastable,Tertiary,16,6,6,7,Radioactive
+107,Bohrium,Bh,107,Metastable,Tertiary,16,7,7,7,Radioactive
+108,Hassium,Hs,108,Metastable,Tertiary,16,8,8,7,Radioactive
+109,Meitnerium,Mt,109,Metastable,Tertiary,16.1,6,9,7,Radioactive
+110,Darmstadtium,Ds,110,Metastable,Tertiary,16.1,6,10,7,Radioactive
+111,Roentgenium,Rg,111,Metastable,Tertiary,16.1,5,11,7,Radioactive
+112,Copernicium,Cn,112,Metastable,Tertiary,16.1,2,12,7,Radioactive
+113,Nihonium,Nh,113,Metastable,Tertiary,16.1,3,13,7,Radioactive
+114,Flerovium,Fl,114,Metastable,Tertiary,16.1,4,14,7,Radioactive
+115,Moscovium,Mc,115,Metastable,Tertiary,16.1,5,15,7,Radioactive
+116,Livermorium,Lv,116,Metastable,Tertiary,16.1,6,16,7,Radioactive
+117,Tennessine,Ts,117,Metastable,Tertiary,16.1,7,17,7,Radioactive
+118,Oganesson,Og,118,Metastable,Tertiary,16.2,0,18,7,Radioactive`.trim().split('\n').map(r=>{const c=r.split(',');return{z:+c[0],name:c[1],sym:c[2],hMode:+c[3],phase:c[4],band:c[5],asym:+c[6],val:+c[7],group:+c[8],period:+c[9],stab:c[10]}});
+
+const cn=document.getElementById('c'),x=cn.getContext('2d'),tt=document.getElementById('tooltip');
+const PHI=(1+Math.sqrt(5))/2,GA=2*Math.PI/PHI/PHI;
+let W,H,cx,cy,dpr,t=0,depth=0,targetDepth=0,hovered=null,stars=[];
+const LAYERS=[
+  {name:'The void',sub:'Cosmic web — the plenum before manifestation'},
+  {name:'Khra-Gixx waves',sub:'Dual spirals — 16:1 harmonic ratio'},
+  {name:'The element spiral',sub:'118 standing waves on the golden angle'},
+  {name:'Asymmetry bands',sub:'Ground → Primary → Secondary → Phase gap → Tertiary'},
+  {name:'Valency wave',sub:'The sawtooth — lobes rising and falling each period'},
+  {name:'Platonic shadows',sub:'Tetrahedron, octahedron, cube, icosahedron'},
+  {name:'The numbers',sub:'phi = 1.618... — the vacuum prefers irrational'},
+  {name:'The observer',sub:'You are the pattern observing itself'}
+];
+const MAXDEPTH=LAYERS.length-1;
+
+function resize(){
+  dpr=devicePixelRatio||1;W=innerWidth;H=innerHeight;
+  cn.width=W*dpr;cn.height=H*dpr;cn.style.width=W+'px';cn.style.height=H+'px';
+  x.setTransform(dpr,0,0,dpr,0,0);cx=W/2;cy=H/2;
+  stars=[];for(let i=0;i<(W<600?120:280);i++)stars.push({x:Math.random()*W,y:Math.random()*H,s:Math.random()*1.8+.2,b:Math.random()*6.28,sp:Math.random()*.5+.5});
+  buildDepthUI();
+}
+addEventListener('resize',resize);resize();
+
+function buildDepthUI(){
+  const di=document.getElementById('depth-indicator');di.innerHTML='';
+  LAYERS.forEach((_,i)=>{const d=document.createElement('div');d.className='pip'+(i===Math.round(depth)?' active':'');d.onclick=()=>{targetDepth=i};di.appendChild(d)});
+}
+function updateDepthUI(){
+  const pips=document.querySelectorAll('#depth-indicator .pip');
+  const rd=Math.round(depth);
+  pips.forEach((p,i)=>p.className='pip'+(i===rd?' active':''));
+  document.getElementById('layer-label').textContent=LAYERS[rd].name;
+  document.getElementById('layer-label').style.opacity=1;
+}
+
+addEventListener('wheel',e=>{e.preventDefault();targetDepth=Math.max(0,Math.min(MAXDEPTH,targetDepth+e.deltaY*.003));},{passive:false});
+let lastTouchY=0,pinchDist=0;
+addEventListener('touchstart',e=>{if(e.touches.length===1)lastTouchY=e.touches[0].clientY;if(e.touches.length===2){const dx=e.touches[0].clientX-e.touches[1].clientX,dy=e.touches[0].clientY-e.touches[1].clientY;pinchDist=Math.hypot(dx,dy)}},{passive:true});
+addEventListener('touchmove',e=>{e.preventDefault();if(e.touches.length===1){const dy=lastTouchY-e.touches[0].clientY;targetDepth=Math.max(0,Math.min(MAXDEPTH,targetDepth+dy*.008));lastTouchY=e.touches[0].clientY}if(e.touches.length===2){const dx=e.touches[0].clientX-e.touches[1].clientX,dy=e.touches[0].clientY-e.touches[1].clientY;const d=Math.hypot(dx,dy);targetDepth=Math.max(0,Math.min(MAXDEPTH,targetDepth+(pinchDist-d)*.005));pinchDist=d}},{passive:false});
+
+function color(el){
+  if(el.z===79)return{r:255,g:215,b:0};
+  if(el.group===18)return{r:0,g:255,b:255};
+  if(el.stab==='Radioactive')return{r:255,g:0,b:68};
+  if(el.phase==='Metastable')return{r:255,g:170,b:0};
+  return{r:0,g:255,b:136};
+}
+function labelCol(el){
+  if(el.z===79)return'#ffe680';if(el.group===18)return'#aaffff';
+  if(el.stab==='Radioactive')return'#ff8899';if(el.phase==='Metastable')return'#ffcc77';
+  return'#aaffcc';
+}
+function elRadius(el){
+  const s=Math.min(W,H)/700;
+  return Math.max((el.z===79?10:el.group===18?5:3.5+el.val*.4)*s,2);
+}
+function spiralXY(el){
+  const a=(el.z-1)*GA+t*.0003,maxR=Math.min(W,H)*.42;
+  const r=18+(el.z-1)/117*maxR;
+  return{x:cx+Math.cos(a)*r,y:cy+Math.sin(a)*r};
+}
+
+function layerOpacity(layerIdx){
+  const dist=Math.abs(depth-layerIdx);
+  if(dist<.5)return 1;if(dist<1.5)return Math.max(0,1-(dist-.5));return 0;
+}
+
+function drawVoid(){
+  const op=layerOpacity(0);if(op<.01)return;
+  x.globalAlpha=op;
+  for(const s of stars){
+    const fl=.4+.6*Math.sin(t*.0008*s.sp+s.b);
+    x.fillStyle=`rgba(180,180,220,${(.15+.25*fl)*op})`;
+    x.beginPath();x.arc(s.x,s.y,s.s,0,6.28);x.fill();
+  }
+  const N=12;
+  x.strokeStyle=`rgba(60,50,100,${.08*op})`;x.lineWidth=.5;
+  for(let i=0;i<N;i++){
+    const a1=Math.random()*6.28,a2=a1+Math.random()*2-1;
+    const r1=Math.random()*Math.min(W,H)*.5,r2=r1+Math.random()*100;
+    x.beginPath();
+    x.moveTo(cx+Math.cos(a1)*r1,cy+Math.sin(a1)*r1);
+    x.quadraticCurveTo(cx+Math.cos((a1+a2)/2)*(r1+r2)/2+Math.random()*40,cy+Math.sin((a1+a2)/2)*(r1+r2)/2+Math.random()*40,cx+Math.cos(a2)*r2,cy+Math.sin(a2)*r2);
+    x.stroke();
+  }
+  x.globalAlpha=1;
+}
+
+function drawKhraGixx(){
+  const op=layerOpacity(1);if(op<.01)return;
+  x.globalAlpha=op;
+  const maxR=Math.min(W,H)*.44;
+  for(let s=0;s<2;s++){
+    const amp=s===0?1:.0625,freq=s===0?1:16;
+    x.strokeStyle=s===0?`rgba(255,215,0,${.18*op})`:`rgba(255,236,139,${.12*op})`;
+    x.lineWidth=s===0?2.5:1;
+    x.beginPath();
+    for(let a=0;a<Math.PI*14;a+=.015){
+      const prog=a/(Math.PI*14);
+      const r=(18+prog*maxR)*amp;
+      const w=Math.sin(a*freq+t*.002)*8*amp;
+      const px=cx+Math.cos(a+t*.0002)*(r+w),py=cy+Math.sin(a+t*.0002)*(r+w);
+      a<.02?x.moveTo(px,py):x.lineTo(px,py);
+    }
+    x.stroke();
+  }
+  x.save();x.globalAlpha=op*.4;
+  x.fillStyle='#ffd700';x.font='italic 10px Georgia';x.textAlign='center';
+  x.fillText('Khra (slow, 1x)',cx-maxR*.3,cy-maxR*.45);
+  x.fillStyle='#ffec8b';
+  x.fillText('Gixx (fast, 16x)',cx+maxR*.3,cy+maxR*.35);
+  x.restore();
+  x.globalAlpha=1;
+}
+
+function drawElements(){
+  const op=layerOpacity(2);if(op<.01)return;
+  x.globalAlpha=op;
+  for(const el of ELEMENTS){
+    const p=spiralXY(el),c=color(el),r=elRadius(el);
+    const isH=hovered&&hovered.z===el.z;
+    const isSpec=el.z===79||el.z===43||el.z===61;
+    const pulse=isSpec?1+.12*Math.sin(t*.003+el.z):1;
+    const rr=r*pulse*(isH?1.8:1);
+    const grd=x.createRadialGradient(p.x,p.y,0,p.x,p.y,rr*3.5);
+    grd.addColorStop(0,`rgba(${c.r},${c.g},${c.b},${(isH?.5:.18)*op})`);
+    grd.addColorStop(1,`rgba(${c.r},${c.g},${c.b},0)`);
+    x.fillStyle=grd;x.beginPath();x.arc(p.x,p.y,rr*3.5,0,6.28);x.fill();
+    x.fillStyle=`rgba(${c.r},${c.g},${c.b},${op})`;
+    x.beginPath();x.arc(p.x,p.y,rr,0,6.28);x.fill();
+    if(el.z===79){x.strokeStyle=`rgba(255,215,0,${.7*op})`;x.lineWidth=1.5;x.beginPath();x.arc(p.x,p.y,rr+5+2*Math.sin(t*.004),0,6.28);x.stroke();}
+    if(isH||isSpec||op>.8){
+      x.save();x.shadowColor=`rgba(0,0,0,${.9*op})`;x.shadowBlur=4;
+      x.fillStyle=isH?`rgba(255,255,255,${op})`:labelCol(el);
+      x.font=(isH?'bold ':'')+(isH?12:9)+'px Georgia';x.textAlign='center';x.textBaseline='bottom';
+      x.fillText(el.sym,p.x,p.y-rr-3);x.restore();
+    }
+    el._x=p.x;el._y=p.y;el._r=rr;
+  }
+  x.globalAlpha=1;
+}
+
+function drawBands(){
+  const op=layerOpacity(3);if(op<.01)return;
+  x.globalAlpha=op;
+  const maxR=Math.min(W,H)*.42;
+  const bands=[{z:2,l:'Ground (13.2)',c:false},{z:10,l:'Primary (14.1)',c:false},{z:18,l:'Secondary (14.8)',c:false},{z:54,l:'Phase gap (15.78)',c:true},{z:95,l:'Tertiary (16.0+)',c:false}];
+  const fs=W<600?9:11;
+  for(const b of bands){
+    const r=18+(b.z/117)*maxR;
+    x.strokeStyle=b.c?`rgba(255,68,102,${.35*op})`:`rgba(255,215,0,${.12*op})`;
+    x.lineWidth=b.c?1.5:.5;x.setLineDash(b.c?[6,4]:[]);
+    x.beginPath();x.arc(cx,cy,r,0,6.28);x.stroke();x.setLineDash([]);
+    x.fillStyle=b.c?`rgba(255,150,170,${.7*op})`:`rgba(255,230,150,${.5*op})`;
+    x.font=fs+'px Georgia';x.textAlign='left';
+    x.fillText(b.l,cx+r*.71+6,cy-r*.71-6);
+  }
+  x.save();x.globalAlpha=op*.5;
+  x.fillStyle='rgba(255,215,0,.4)';x.font='italic 10px Georgia';x.textAlign='center';
+  x.fillText('Noble gas gaps: 8, 8, 18, 18, 32, 32 = 2n\u00B2 for n=1,2,3',cx,H-40);
+  x.restore();
+  x.globalAlpha=1;
+}
+
+function drawValencyWave(){
+  const op=layerOpacity(4);if(op<.01)return;
+  x.globalAlpha=op;
+  const maxR=Math.min(W,H)*.42;
+  x.lineWidth=1.5;
+  x.beginPath();
+  let first=true;
+  for(const el of ELEMENTS){
+    const p=spiralXY(el);
+    const vNorm=el.val/8;
+    const outR=12+vNorm*18;
+    const a=Math.atan2(p.y-cy,p.x-cx);
+    const vx=p.x+Math.cos(a)*outR,vy=p.y+Math.sin(a)*outR;
+    if(first){x.moveTo(vx,vy);first=false}else x.lineTo(vx,vy);
+  }
+  x.strokeStyle=`rgba(255,215,0,${.25*op})`;x.stroke();
+  x.beginPath();first=true;
+  for(const el of ELEMENTS){
+    const p=spiralXY(el);
+    const vNorm=el.val/8;
+    const outR=-(12+vNorm*18);
+    const a=Math.atan2(p.y-cy,p.x-cx);
+    const vx=p.x+Math.cos(a)*outR,vy=p.y+Math.sin(a)*outR;
+    if(first){x.moveTo(vx,vy);first=false}else x.lineTo(vx,vy);
+  }
+  x.strokeStyle=`rgba(255,236,139,${.15*op})`;x.stroke();
+  const C=ELEMENTS[5],p=spiralXY(C);
+  for(let i=0;i<4;i++){
+    const a=i*Math.PI/2+t*.001;
+    x.fillStyle=`rgba(0,255,136,${.3*op})`;
+    x.beginPath();x.arc(p.x+Math.cos(a)*16,p.y+Math.sin(a)*16,3,0,6.28);x.fill();
+  }
+  x.save();x.globalAlpha=op*.5;x.fillStyle='#aaffcc';x.font='9px Georgia';x.textAlign='center';
+  x.fillText('C (4 lobes)',p.x,p.y+28);x.restore();
+  x.save();x.globalAlpha=op*.4;x.fillStyle='rgba(255,215,0,.4)';x.font='italic 10px Georgia';x.textAlign='center';
+  x.fillText('Valency sawtooth: 0\u21921\u21922\u21923\u21924\u21923\u21922\u21921\u21920 each period',cx,H-40);
+  x.restore();
+  x.globalAlpha=1;
+}
+
+function drawPlatonics(){
+  const op=layerOpacity(5);if(op<.01)return;
+  x.globalAlpha=op;
+  const solids=[
+    {el:ELEMENTS[5],name:'Tetrahedron',v:4,col:'#00ff88'},
+    {el:ELEMENTS[15],name:'Octahedron',v:6,col:'#ffaa00'},
+    {el:ELEMENTS[17],name:'Cube (void)',v:8,col:'#00ffff'},
+    {el:ELEMENTS[78],name:'Icosahedron',v:12,col:'#ffd700'}
+  ];
+  for(const s of solids){
+    const p=spiralXY(s.el);
+    const sz=s.el.z===79?28:20;
+    x.strokeStyle=`rgba(${parseInt(s.col.slice(1,3),16)},${parseInt(s.col.slice(3,5),16)},${parseInt(s.col.slice(5,7),16)},${.35*op})`;
+    x.lineWidth=1;
+    const pts=[];
+    for(let i=0;i<s.v;i++){
+      const a=i*6.28/s.v+t*.001;
+      pts.push({x:p.x+Math.cos(a)*sz,y:p.y+Math.sin(a)*sz});
+    }
+    for(let i=0;i<pts.length;i++){
+      for(let j=i+1;j<pts.length;j++){
+        if(Math.random()>.5||j===i+1||j===pts.length-1&&i===0){
+          x.beginPath();x.moveTo(pts[i].x,pts[i].y);x.lineTo(pts[j].x,pts[j].y);x.stroke();
+        }
+      }
+    }
+    x.save();x.shadowColor='rgba(0,0,0,.8)';x.shadowBlur=4;
+    x.fillStyle=`rgba(${parseInt(s.col.slice(1,3),16)},${parseInt(s.col.slice(3,5),16)},${parseInt(s.col.slice(5,7),16)},${.6*op})`;
+    x.font='9px Georgia';x.textAlign='center';
+    x.fillText(s.name,p.x,p.y+sz+14);
+    x.fillText(s.el.sym+' ('+s.v+' vertices)',p.x,p.y+sz+25);
+    x.restore();
+  }
+  x.globalAlpha=1;
+}
+
+function drawNumbers(){
+  const op=layerOpacity(6);if(op<.01)return;
+  x.globalAlpha=op;
+  x.save();
+  const fs=W<600?14:22;
+  x.fillStyle=`rgba(255,215,0,${.7*op})`;x.font='italic '+fs+'px Garamond,Georgia,serif';x.textAlign='center';
+  x.fillText('\u03C6 = 1.6180339887...',cx,cy-60);
+  x.fillStyle=`rgba(255,236,139,${.4*op})`;x.font='italic '+(fs*.55)+'px Georgia';
+  x.fillText('The most irrational number',cx,cy-35);
+  x.fillStyle=`rgba(200,200,220,${.35*op})`;x.font=(fs*.5)+'px Georgia';
+  const data=[
+    'Noble gas gaps: 8, 8, 18, 18, 32, 32',
+    'Period sizes: 2n\u00B2 for n = 1, 2, 3',
+    'Bands: 13.2 \u00D7 \u03C6\u207F = 14.1, 14.8, 15.78, 16.0',
+    'Phase gap at \u03C6\u00BD of ground: 13.2 \u00D7 1.272 = 15.78',
+    'Stability cliff: Z = 84 (Polonium)'
+  ];
+  for(let i=0;i<data.length;i++){
+    x.fillText(data[i],cx,cy+10+i*24);
+  }
+  x.restore();
+  x.globalAlpha=1;
+}
+
+function drawObserver(){
+  const op=layerOpacity(7);if(op<.01)return;
+  x.globalAlpha=op;
+  const sX=W<600?cx-40:80,sY=H/2;
+  const headR=W<600?18:25;
+  x.fillStyle=`rgba(30,30,50,${.7*op})`;
+  x.beginPath();x.arc(sX,sY-headR*2.5,headR,0,6.28);x.fill();
+  x.beginPath();
+  x.moveTo(sX-headR*1.2,sY);
+  x.quadraticCurveTo(sX,sY-headR*.8,sX+headR*1.2,sY);
+  x.quadraticCurveTo(sX+headR*.6,sY+headR*3,sX-headR*.6,sY+headR*3);
+  x.quadraticCurveTo(sX-headR*1.5,sY+headR*1.5,sX-headR*1.2,sY);
+  x.fill();
+  x.save();
+  x.beginPath();x.arc(sX,sY-headR*2.5,headR-2,0,6.28);x.clip();
+  for(const el of ELEMENTS.filter((_,i)=>i%8===0)){
+    const c=color(el);
+    x.fillStyle=`rgba(${c.r},${c.g},${c.b},${.15*op})`;
+    const ex=sX+(Math.random()-.5)*headR*1.5,ey=sY-headR*2.5+(Math.random()-.5)*headR*1.5;
+    x.beginPath();x.arc(ex,ey,2,0,6.28);x.fill();
+  }
+  x.restore();
+  x.fillStyle=`rgba(255,236,139,${.5*op})`;x.font='italic '+(W<600?10:13)+'px Garamond,Georgia,serif';
+  x.textAlign=W<600?'center':'left';
+  x.fillText('You are the pattern',W<600?cx:sX+headR*2,W<600?H-50:sY-headR*3);
+  x.fillText('observing itself',W<600?cx:sX+headR*2,W<600?H-35:sY-headR*3+18);
+  x.globalAlpha=1;
+}
+
+function handlePointer(ex,ey){
+  if(layerOpacity(2)<.3){hovered=null;tt.style.display='none';return}
+  hovered=null;let best=null,bestD=Infinity;
+  for(const el of ELEMENTS){
+    if(!el._x)continue;
+    const d=Math.hypot(ex-el._x,ey-el._y);
+    if(d<Math.max(el._r*2.5,14)&&d<bestD){best=el;bestD=d}
+  }
+  hovered=best;
+  if(hovered){
+    const el=hovered,c=color(el);
+    tt.style.display='block';
+    tt.style.left=Math.min(ex+14,W-270)+'px';
+    tt.style.top=Math.min(ey+14,H-220)+'px';
+    tt.style.borderColor=`rgb(${c.r},${c.g},${c.b})`;
+    tt.innerHTML=`<div class="sym">${el.sym}</div><div class="name">${el.z}. ${el.name}</div><div class="info"><b>Band:</b> ${el.band} (${el.asym})<br><b>Harmonic:</b> ${el.hMode}<br><b>Phase:</b> ${el.phase}<br><b>Valency:</b> ${el.val}<br><b>Period:</b> ${el.period} &middot; <b>Group:</b> ${el.group}<br><b>Stability:</b> ${el.stab}</div>`;
+  }else tt.style.display='none';
+}
+cn.addEventListener('mousemove',e=>{const r=cn.getBoundingClientRect();handlePointer(e.clientX-r.left,e.clientY-r.top)});
+cn.addEventListener('touchstart',e=>{e.preventDefault();const tc=e.touches[0],r=cn.getBoundingClientRect();handlePointer(tc.clientX-r.left,tc.clientY-r.top)},{passive:false});
+cn.addEventListener('mouseleave',()=>{hovered=null;tt.style.display='none'});
+
+function frame(){
+  t++;
+  depth+=(targetDepth-depth)*.08;
+  x.fillStyle='#050510';x.fillRect(0,0,W,H);
+  drawVoid();
+  drawKhraGixx();
+  drawElements();
+  drawBands();
+  drawValencyWave();
+  drawPlatonics();
+  drawNumbers();
+  drawObserver();
+  updateDepthUI();
+  const hintEl=document.getElementById('hint');
+  hintEl.style.opacity=t<300?1:0;
+  requestAnimationFrame(frame);
+}
+frame();
+</script>
+</body>
+</html>
diff --git a/docs/fractal-periodic-table-bands.png b/docs/fractal-periodic-table-bands.png
deleted file mode 100644
index 44f05df..0000000
Binary files a/docs/fractal-periodic-table-bands.png and /dev/null differ
diff --git a/docs/fractal-periodic-table-periods.png b/docs/fractal-periodic-table-periods.png
deleted file mode 100644
index 047e465..0000000
Binary files a/docs/fractal-periodic-table-periods.png and /dev/null differ
diff --git a/docs/fractal-periodic-table-spiral.png b/docs/fractal-periodic-table-spiral.png
deleted file mode 100644
index 4751da6..0000000
Binary files a/docs/fractal-periodic-table-spiral.png and /dev/null differ
diff --git a/docs/fractal-periodic-table.html b/docs/fractal-periodic-table.html
deleted file mode 100644
index 1a0ebc8..0000000
--- a/docs/fractal-periodic-table.html
+++ /dev/null
@@ -1,367 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-<title>The Fractal Periodic Table</title>
-<style>
-*{margin:0;padding:0;box-sizing:border-box}
-body,html{overflow:hidden;background:#0a0a1a;width:100%;height:100%;touch-action:none}
-canvas{display:block;cursor:crosshair;width:100%;height:100%}
-#tooltip{position:absolute;pointer-events:none;display:none;background:rgba(10,10,26,.95);border:1px solid #ffd700;border-radius:8px;padding:10px 14px;color:#e8e8d0;font:13px Georgia,serif;max-width:260px;z-index:10;backdrop-filter:blur(4px)}
-#tooltip .sym{font-size:28px;font-weight:700;color:#ffd700;letter-spacing:1px}
-#tooltip .name{font-size:15px;color:#ffec8b;margin:2px 0 6px}
-#tooltip .info{font-size:12px;line-height:1.7;color:#ccc}
-#tooltip .info span{color:#fff;font-weight:600}
-#legend{position:absolute;bottom:12px;left:12px;background:rgba(10,10,26,.9);border:1px solid rgba(255,215,0,.3);border-radius:8px;padding:10px 14px;font:12px Georgia,serif;color:#ccc;z-index:5}
-#legend .row{display:flex;align-items:center;gap:8px;margin:3px 0}
-#legend .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
-#title{position:absolute;top:14px;left:0;right:0;text-align:center;font:italic 22px Garamond,Georgia,serif;color:#ffd700;letter-spacing:3px;text-shadow:0 0 20px rgba(255,215,0,.4);z-index:5;pointer-events:none}
-#subtitle{position:absolute;top:42px;left:0;right:0;text-align:center;font:italic 12px Garamond,Georgia,serif;color:rgba(255,236,139,.6);letter-spacing:2px;z-index:5;pointer-events:none}
-#controls{position:absolute;top:12px;right:12px;z-index:5;display:flex;gap:6px}
-#controls button{background:rgba(10,10,26,.85);border:1px solid rgba(255,215,0,.4);color:#ffd700;font:12px Georgia,serif;padding:5px 10px;border-radius:6px;cursor:pointer;-webkit-tap-highlight-color:transparent}
-#controls button:hover,#controls button:active{background:rgba(255,215,0,.15)}
-#controls button.active{background:rgba(255,215,0,.25);border-color:#ffd700}
-@media(max-width:600px){
- #title{font-size:16px;top:10px;letter-spacing:1px}
- #subtitle{font-size:10px;top:30px}
- #legend{font-size:10px;padding:8px 10px;bottom:8px;left:8px}
- #legend .special{display:none}
- #controls{top:8px;right:8px;gap:4px}
- #controls button{font-size:10px;padding:4px 8px}
- #tooltip{font-size:11px;max-width:200px;padding:8px 10px}
- #tooltip .sym{font-size:22px}
- #tooltip .name{font-size:13px}
- #tooltip .info{font-size:10px}
-}
-</style>
-</head>
-<body>
-<div id="title">The fractal periodic table</div>
-<div id="subtitle">Patterns within patterns within patterns</div>
-<canvas id="c"></canvas>
-<div id="tooltip"></div>
-<div id="legend">
- <div style="color:#ffd700;font-size:13px;margin-bottom:5px;font-style:italic">Stability</div>
- <div class="row"><div class="dot" style="background:#00ff88"></div><span style="color:#88ffbb">Stable</span></div>
- <div class="row"><div class="dot" style="background:#ffaa00"></div><span style="color:#ffcc66">Metastable</span></div>
- <div class="row"><div class="dot" style="background:#ff0044"></div><span style="color:#ff6688">Radioactive</span></div>
- <div class="row"><div class="dot" style="background:#00ffff"></div><span style="color:#88ffff">Noble gas</span></div>
- <div class="special" style="margin-top:6px">
-  <div style="color:#ffd700;font-size:13px;margin-bottom:4px;font-style:italic">Special</div>
-  <div class="row"><div class="dot" style="background:#ffd700;width:14px;height:14px"></div><span style="color:#ffe680">Gold — resonance lock</span></div>
-  <div class="row"><div class="dot" style="background:#ff6600;border:1px dashed #ff4444"></div><span style="color:#ffaa66">Tc, Pm — metastable</span></div>
- </div>
-</div>
-<div id="controls">
- <button id="btn-spiral" class="active" onclick="setView('spiral')">Spiral</button>
- <button id="btn-bands" onclick="setView('bands')">Bands</button>
- <button id="btn-periods" onclick="setView('periods')">Periods</button>
-</div>
-<script>
-const CSV=`1,Hydrogen,H,1,1,Baseline,Ground,13.2,1,1,1,Stable,Single node fundamental frequency one lobe,Protium stable
-2,Helium,He,2,2,Baseline,Ground,13.2,0,18,1,Stable,Closed loop first harmonic,He-4 most stable
-3,Lithium,Li,3,3,Baseline,Ground-Primary,13.6,1,1,2,Stable,First excited state,Li-7 stable
-4,Beryllium,Be,4,4,Baseline,Primary,14,2,2,2,Stable,Second harmonic two lobes,Be-9 stable
-5,Boron,B,5,5,Baseline,Primary,14.1,3,13,2,Stable,Third harmonic three lobes,B-11 stable
-6,Carbon,C,6,6,Baseline,Primary,14.1,4,14,2,Stable,Fourth harmonic tetrahedral,C-12 stable
-7,Nitrogen,N,7,7,Baseline,Primary,14.1,3,15,2,Stable,Fifth harmonic pyramidal,N-14 stable
-8,Oxygen,O,8,8,Baseline,Primary,14.2,2,16,2,Stable,Sixth harmonic octahedral,O-16 stable
-9,Fluorine,F,9,9,Baseline,Primary,14.2,1,17,2,Stable,Seventh harmonic,F-19 only stable
-10,Neon,Ne,10,10,Baseline,Primary,14.2,0,18,2,Stable,Eighth harmonic closed shell,Ne-20 stable
-11,Sodium,Na,11,11,Baseline,Primary-Secondary,14.4,1,1,3,Stable,New harmonic tier,Na-23 only stable
-12,Magnesium,Mg,12,12,Baseline,Secondary,14.6,2,2,3,Stable,Two lobes,Mg-24 stable
-13,Aluminum,Al,13,13,Baseline,Secondary,14.7,3,13,3,Stable,Three lobes,Al-27 only stable
-14,Silicon,Si,14,14,Baseline,Secondary,14.7,4,14,3,Stable,Tetrahedral semiconductor,Si-28 stable
-15,Phosphorus,P,15,15,Baseline,Secondary,14.7,3,15,3,Stable,Variable lobes,P-31 only stable
-16,Sulfur,S,16,16,Baseline,Secondary,14.8,2,16,3,Stable,Variable lobes,S-32 stable
-17,Chlorine,Cl,17,17,Baseline,Secondary,14.8,1,17,3,Stable,Variable lobes,Cl-35 stable
-18,Argon,Ar,18,18,Baseline,Secondary,14.8,0,18,3,Stable,Closed shell inert,Ar-40 stable
-19,Potassium,K,19,19,Baseline,Secondary-PhaseGap,14.9,1,1,4,Stable,Transition region,K-39 stable
-20,Calcium,Ca,20,20,Baseline,Secondary-PhaseGap,14.9,2,2,4,Stable,Transition region,Ca-40 stable
-21,Scandium,Sc,21,21,Baseline,Secondary-PhaseGap,15,3,3,4,Stable,Transition metal,Sc-45 only stable
-22,Titanium,Ti,22,22,Baseline,Secondary-PhaseGap,15,4,4,4,Stable,Transition metal,Ti-48 stable
-23,Vanadium,V,23,23,Baseline,Secondary-PhaseGap,15,5,5,4,Stable,Transition metal,V-51 only stable
-24,Chromium,Cr,24,24,Baseline,Secondary-PhaseGap,15.1,6,6,4,Stable,Transition metal,Cr-52 stable
-25,Manganese,Mn,25,25,Baseline,Secondary-PhaseGap,15.1,7,7,4,Stable,Transition metal,Mn-55 only stable
-26,Iron,Fe,26,26,Baseline,Secondary-PhaseGap,15.1,6,8,4,Stable,Multi-layered wave,Fe-56 stable
-27,Cobalt,Co,27,27,Baseline,Secondary-PhaseGap,15.2,5,9,4,Stable,Transition metal,Co-59 only stable
-28,Nickel,Ni,28,28,Baseline,Secondary-PhaseGap,15.2,4,10,4,Stable,Transition metal,Ni-58 stable
-29,Copper,Cu,29,29,Baseline,Secondary-PhaseGap,15.2,2,11,4,Stable,Transition metal,Cu-63 stable
-30,Zinc,Zn,30,30,Baseline,Secondary-PhaseGap,15.3,2,12,4,Stable,Transition metal,Zn-64 stable
-31,Gallium,Ga,31,31,Baseline,Secondary-PhaseGap,15.3,3,13,4,Stable,Post-transition,Ga-69 stable
-32,Germanium,Ge,32,32,Baseline,Secondary-PhaseGap,15.3,4,14,4,Stable,Metalloid,Ge-74 stable
-33,Arsenic,As,33,33,Baseline,Secondary-PhaseGap,15.4,3,15,4,Stable,Metalloid,As-75 only stable
-34,Selenium,Se,34,34,Baseline,Secondary-PhaseGap,15.4,2,16,4,Stable,Nonmetal,Se-80 stable
-35,Bromine,Br,35,35,Baseline,Secondary-PhaseGap,15.4,1,17,4,Stable,Halogen,Br-79 stable
-36,Krypton,Kr,36,36,Baseline,Secondary-PhaseGap,15.5,0,18,4,Stable,Noble gas,Kr-84 stable
-37,Rubidium,Rb,37,37,Baseline,PhaseGap-Approach,15.5,1,1,5,Stable,Approaching threshold,Rb-85 stable
-38,Strontium,Sr,38,38,Baseline,PhaseGap-Approach,15.5,2,2,5,Stable,Approaching threshold,Sr-88 stable
-39,Yttrium,Y,39,39,Baseline,PhaseGap-Approach,15.6,3,3,5,Stable,Transition metal,Y-89 only stable
-40,Zirconium,Zr,40,40,Baseline,PhaseGap-Approach,15.6,4,4,5,Stable,Transition metal,Zr-90 stable
-41,Niobium,Nb,41,41,Baseline,PhaseGap-Approach,15.6,5,5,5,Stable,Transition metal,Nb-93 only stable
-42,Molybdenum,Mo,42,42,Baseline,PhaseGap-Approach,15.6,6,6,5,Stable,Transition metal,Mo-98 stable
-43,Technetium,Tc,43,43,Metastable,PhaseGap-Approach,15.7,7,7,5,Radioactive,Transient mode,No stable isotope
-44,Ruthenium,Ru,44,44,Baseline,PhaseGap-Approach,15.7,8,8,5,Stable,Transition metal,Ru-102 stable
-45,Rhodium,Rh,45,45,Baseline,PhaseGap-Approach,15.7,6,9,5,Stable,Transition metal,Rh-103 only stable
-46,Palladium,Pd,46,46,Baseline,PhaseGap-Approach,15.7,4,10,5,Stable,Transition metal,Pd-106 stable
-47,Silver,Ag,47,47,Baseline,PhaseGap-Approach,15.7,1,11,5,Stable,Transition metal,Ag-107 stable
-48,Cadmium,Cd,48,48,Baseline,PhaseGap-Approach,15.7,2,12,5,Stable,Transition metal,Cd-114 stable
-49,Indium,In,49,49,Baseline,PhaseGap-Approach,15.7,3,13,5,Stable,Post-transition,In-113 stable
-50,Tin,Sn,50,50,Baseline,PhaseGap-Approach,15.8,4,14,5,Stable,Post-transition,Sn-120 stable
-51,Antimony,Sb,51,51,Baseline,PhaseGap-Approach,15.8,3,15,5,Stable,Metalloid,Sb-121 stable
-52,Tellurium,Te,52,52,Baseline,PhaseGap-Approach,15.8,2,16,5,Stable,Metalloid,Te-130 stable
-53,Iodine,I,53,53,Baseline,PhaseGap-Approach,15.8,1,17,5,Stable,Halogen,I-127 only stable
-54,Xenon,Xe,54,54,Baseline,PhaseGap-Center,15.8,0,18,5,Stable,Noble gas phase gap center,Xe-132 stable
-55,Cesium,Cs,55,55,Baseline,PhaseGap-Center,15.8,1,1,6,Stable,Near critical threshold,Cs-133 only stable
-56,Barium,Ba,56,56,Baseline,PhaseGap-Center,15.8,2,2,6,Stable,Near critical threshold,Ba-138 stable
-57,Lanthanum,La,57,57,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide series,La-139 only stable
-58,Cerium,Ce,58,58,Baseline,PhaseGap-Center,15.8,4,3,6,Stable,Lanthanide f-orbital,Ce-140 stable
-59,Praseodymium,Pr,59,59,Baseline,PhaseGap-Center,15.8,4,3,6,Stable,Lanthanide f-orbital,Pr-141 only stable
-60,Neodymium,Nd,60,60,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Nd-142 stable
-61,Promethium,Pm,61,61,Metastable,PhaseGap-Center,15.8,3,3,6,Radioactive,Transient mode metastable,No stable isotope
-62,Samarium,Sm,62,62,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Sm-152 stable
-63,Europium,Eu,63,63,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Eu-153 stable
-64,Gadolinium,Gd,64,64,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Gd-158 stable
-65,Terbium,Tb,65,65,Baseline,PhaseGap-Center,15.8,4,3,6,Stable,Lanthanide f-orbital,Tb-159 only stable
-66,Dysprosium,Dy,66,66,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Dy-164 stable
-67,Holmium,Ho,67,67,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Ho-165 only stable
-68,Erbium,Er,68,68,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Er-166 stable
-69,Thulium,Tm,69,69,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Tm-169 only stable
-70,Ytterbium,Yb,70,70,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Yb-174 stable
-71,Lutetium,Lu,71,71,Baseline,PhaseGap-Center,15.8,3,3,6,Stable,Lanthanide f-orbital,Lu-175 stable
-72,Hafnium,Hf,72,72,Baseline,PhaseGap-Center,15.8,4,4,6,Stable,Transition metal,Hf-180 stable
-73,Tantalum,Ta,73,73,Baseline,PhaseGap-Center,15.8,5,5,6,Stable,Transition metal,Ta-181 only stable
-74,Tungsten,W,74,74,Baseline,PhaseGap-Center,15.8,6,6,6,Stable,Transition metal,W-184 stable
-75,Rhenium,Re,75,75,Baseline,PhaseGap-Center,15.8,7,7,6,Stable,Transition metal,Re-185 stable
-76,Osmium,Os,76,76,Baseline,PhaseGap-Center,15.8,8,8,6,Stable,Transition metal,Os-192 stable
-77,Iridium,Ir,77,77,Baseline,PhaseGap-Center,15.8,6,9,6,Stable,Transition metal,Ir-191 stable
-78,Platinum,Pt,78,78,Baseline,PhaseGap-Center,15.8,4,10,6,Stable,Transition metal,Pt-195 stable
-79,Gold,Au,79,79,HighOrder,PhaseGap-Center,15.8,1,11,6,Stable,High-order resonance lock,Au-197 only stable
-80,Mercury,Hg,80,80,Baseline,PhaseGap-Center,15.8,2,12,6,Stable,Liquid at STP,Hg-202 stable
-81,Thallium,Tl,81,81,Baseline,PhaseGap-Center,15.8,3,13,6,Stable,Post-transition,Tl-205 stable
-82,Lead,Pb,82,82,Baseline,PhaseGap-Center,15.8,4,14,6,Stable,Post-transition,Pb-208 stable
-83,Bismuth,Bi,83,83,Baseline,PhaseGap-Center,15.8,5,15,6,Stable,Post-transition,Bi-209 stable
-84,Polonium,Po,84,84,Metastable,PhaseGap-Center,15.8,6,16,6,Radioactive,Excess phase density,Po-209
-85,Astatine,At,85,85,Metastable,PhaseGap-Center,15.8,7,17,6,Radioactive,Halogen metastable,At-210
-86,Radon,Rn,86,86,Metastable,PhaseGap-Center,15.8,0,18,6,Radioactive,Noble gas metastable,Rn-222
-87,Francium,Fr,87,87,Metastable,PhaseGap-Tertiary,15.9,1,1,7,Radioactive,Highly radioactive,Fr-223
-88,Radium,Ra,88,88,Metastable,PhaseGap-Tertiary,15.9,2,2,7,Radioactive,Highly radioactive,Ra-226
-89,Actinium,Ac,89,89,Metastable,PhaseGap-Tertiary,15.9,3,3,7,Radioactive,Actinide series,Ac-227
-90,Thorium,Th,90,90,Baseline,PhaseGap-Tertiary,15.9,4,3,7,Stable,Actinide f-orbital,Th-232 stable
-91,Protactinium,Pa,91,91,Metastable,PhaseGap-Tertiary,15.9,5,3,7,Radioactive,Actinide f-orbital,Pa-231
-92,Uranium,U,92,92,Baseline,PhaseGap-Tertiary,15.9,6,3,7,Stable,Actinide f-orbital,U-238 stable
-93,Neptunium,Np,93,93,Metastable,PhaseGap-Tertiary,16,7,3,7,Radioactive,Synthetic,Np-237
-94,Plutonium,Pu,94,94,Metastable,PhaseGap-Tertiary,16,8,3,7,Radioactive,Synthetic,Pu-244
-95,Americium,Am,95,95,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Am-243
-96,Curium,Cm,96,96,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Cm-247
-97,Berkelium,Bk,97,97,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Bk-247
-98,Californium,Cf,98,98,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Cf-251
-99,Einsteinium,Es,99,99,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Es-252
-100,Fermium,Fm,100,100,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Fm-257
-101,Mendelevium,Md,101,101,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Md-258
-102,Nobelium,No,102,102,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,No-259
-103,Lawrencium,Lr,103,103,Metastable,Tertiary,16,6,3,7,Radioactive,Synthetic,Lr-262
-104,Rutherfordium,Rf,104,104,Metastable,Tertiary,16,4,4,7,Radioactive,Superheavy,Rf-267
-105,Dubnium,Db,105,105,Metastable,Tertiary,16,5,5,7,Radioactive,Superheavy,Db-268
-106,Seaborgium,Sg,106,106,Metastable,Tertiary,16,6,6,7,Radioactive,Superheavy,Sg-269
-107,Bohrium,Bh,107,107,Metastable,Tertiary,16,7,7,7,Radioactive,Superheavy,Bh-270
-108,Hassium,Hs,108,108,Metastable,Tertiary,16,8,8,7,Radioactive,Superheavy,Hs-269
-109,Meitnerium,Mt,109,109,Metastable,Tertiary,16.1,6,9,7,Radioactive,Superheavy,Mt-278
-110,Darmstadtium,Ds,110,110,Metastable,Tertiary,16.1,6,10,7,Radioactive,Superheavy,Ds-281
-111,Roentgenium,Rg,111,111,Metastable,Tertiary,16.1,5,11,7,Radioactive,Superheavy,Rg-282
-112,Copernicium,Cn,112,112,Metastable,Tertiary,16.1,2,12,7,Radioactive,Superheavy,Cn-285
-113,Nihonium,Nh,113,113,Metastable,Tertiary,16.1,3,13,7,Radioactive,Superheavy,Nh-286
-114,Flerovium,Fl,114,114,Metastable,Tertiary,16.1,4,14,7,Radioactive,Superheavy,Fl-289
-115,Moscovium,Mc,115,115,Metastable,Tertiary,16.1,5,15,7,Radioactive,Superheavy,Mc-290
-116,Livermorium,Lv,116,116,Metastable,Tertiary,16.1,6,16,7,Radioactive,Superheavy,Lv-293
-117,Tennessine,Ts,117,117,Metastable,Tertiary,16.1,7,17,7,Radioactive,Superheavy,Ts-294
-118,Oganesson,Og,118,118,Metastable,Tertiary,16.2,0,18,7,Radioactive,Edge of stability,Og-294`;
-
-const elements=CSV.trim().split('\n').map(r=>{const c=r.split(',');return{z:+c[0],name:c[1],sym:c[2],hMode:+c[3],nodes:+c[4],phase:c[5],band:c[6],asym:+c[7],valency:+c[8],group:+c[9],period:+c[10],stability:c[11],desc:c[12],isotope:c[13]}});
-
-const cn=document.getElementById('c'),ctx=cn.getContext('2d'),tt=document.getElementById('tooltip');
-let W,H,cx,cy,dpr,view='spiral',hovered=null,time=0,stars=[];
-const PHI=(1+Math.sqrt(5))/2,GA=2*Math.PI/PHI/PHI;
-
-function resize(){
- dpr=window.devicePixelRatio||1;
- W=window.innerWidth;H=window.innerHeight;
- cn.width=W*dpr;cn.height=H*dpr;
- cn.style.width=W+'px';cn.style.height=H+'px';
- ctx.setTransform(dpr,0,0,dpr,0,0);
- cx=W/2;cy=H/2;
- stars=[];
- for(let i=0;i<(W<600?150:300);i++)stars.push({x:Math.random()*W,y:Math.random()*H,s:Math.random()*1.5+.3,b:Math.random()});
-}
-window.onresize=resize;resize();
-
-function getColor(el){
- if(el.z===79)return{r:255,g:215,b:0};
- if(el.group===18)return{r:0,g:255,b:255};
- if(el.stability==='Radioactive')return{r:255,g:0,b:68};
- if(el.phase==='Metastable'||el.z===43||el.z===61)return{r:255,g:170,b:0};
- return{r:0,g:255,b:136};
-}
-function getLabelColor(el){
- if(el.z===79)return'#ffe680';
- if(el.group===18)return'#aaffff';
- if(el.stability==='Radioactive')return'#ff8899';
- if(el.phase==='Metastable'||el.z===43||el.z===61)return'#ffcc77';
- return'#aaffcc';
-}
-function getRadius(el){
- const s=Math.min(W,H)/800;
- let base=el.z===79?9:el.group===18?5.5:(el.stability==='Radioactive'&&el.z>86)?3.5:4.5;
- return Math.max(base*s,2);
-}
-function spiralPos(el,t){
- const i=el.z-1,angle=i*GA+t*.0003;
- const asymNorm=(el.asym-13.2)/(16.2-13.2);
- const r=20+asymNorm*(Math.min(W,H)*.4);
- return{x:cx+Math.cos(angle)*r,y:cy+Math.sin(angle)*r};
-}
-function bandPos(el){
- const asymNorm=(el.asym-13.2)/(16.2-13.2);
- return{x:W*.1+(el.z-1)/117*(W*.8),y:H*.1+asymNorm*(H*.75)};
-}
-function periodPos(el){
- const row=el.period-1,col=(el.z-1)%18;
- const cellW=Math.min((W*.88)/18,40),cellH=Math.min((H*.78)/7,60);
- const gridW=cellW*18,gridH=cellH*7;
- const ox=(W-gridW)/2,oy=(H-gridH)/2+20;
- return{x:ox+col*cellW+cellW/2,y:oy+row*cellH+cellH/2};
-}
-function getPos(el,t){return view==='spiral'?spiralPos(el,t):view==='bands'?bandPos(el):periodPos(el);}
-
-function drawStars(t){
- for(const s of stars){
-  const f=.5+.5*Math.sin(t*.001+s.b*20);
-  ctx.fillStyle=`rgba(200,200,240,${.2+.3*f})`;
-  ctx.beginPath();ctx.arc(s.x,s.y,s.s,0,Math.PI*2);ctx.fill();
- }
-}
-function drawKhraGixx(t){
- for(let s=0;s<2;s++){
-  const amp=s===0?1:.0625,freq=s===0?1:16;
-  ctx.strokeStyle=s===0?'rgba(255,215,0,.15)':'rgba(255,236,139,.1)';
-  ctx.lineWidth=s===0?2.5:1;
-  ctx.beginPath();
-  for(let a=0;a<Math.PI*12;a+=.02){
-   const r=15+a*(Math.min(W,H)*.034)*amp;
-   const w=Math.sin(a*freq+t*.002)*6*amp;
-   const x=cx+Math.cos(a+t*.0002)*(r+w),y=cy+Math.sin(a+t*.0002)*(r+w);
-   a===0?ctx.moveTo(x,y):ctx.lineTo(x,y);
-  }
-  ctx.stroke();
- }
-}
-function drawBandRings(){
- if(view!=='spiral')return;
- const bands=[{v:13.2,l:'Ground'},{v:14.1,l:'Primary'},{v:14.8,l:'Secondary'},{v:15.78,l:'Phase gap'},{v:16,l:'Tertiary'}];
- const fs=W<600?9:11;
- for(const b of bands){
-  const norm=(b.v-13.2)/(16.2-13.2),r=20+norm*(Math.min(W,H)*.4),isGap=b.l==='Phase gap';
-  ctx.strokeStyle=isGap?'rgba(255,68,102,.25)':'rgba(255,215,0,.1)';
-  ctx.lineWidth=isGap?1.5:.5;ctx.setLineDash(isGap?[6,4]:[]);
-  ctx.beginPath();ctx.arc(cx,cy,r,0,Math.PI*2);ctx.stroke();ctx.setLineDash([]);
-  ctx.fillStyle=isGap?'rgba(255,130,150,.6)':'rgba(255,225,130,.55)';
-  ctx.font=fs+'px Georgia';ctx.textAlign='left';
-  ctx.fillText(b.l,cx+r*.707+6,cy-r*.707-6);
- }
-}
-function drawBandLines(){
- if(view!=='bands')return;
- const bands=[{v:13.2,l:'Ground'},{v:14.1,l:'Primary'},{v:14.8,l:'Secondary'},{v:15.78,l:'Phase gap'},{v:16,l:'Tertiary'}];
- const fs=W<600?9:11;
- for(let i=0;i<bands.length;i++){
-  const b=bands[i],norm=(b.v-13.2)/(16.2-13.2),y=H*.1+norm*(H*.75),isGap=i===3;
-  ctx.strokeStyle=isGap?'rgba(255,68,102,.3)':'rgba(255,215,0,.12)';
-  ctx.lineWidth=isGap?1.5:.5;ctx.setLineDash(isGap?[4,4]:[]);
-  ctx.beginPath();ctx.moveTo(W*.08,y);ctx.lineTo(W*.92,y);ctx.stroke();ctx.setLineDash([]);
-  ctx.fillStyle=isGap?'rgba(255,150,170,.75)':'rgba(255,230,150,.55)';
-  ctx.font=fs+'px Georgia';ctx.textAlign='left';
-  ctx.fillText(b.l+' ('+b.v+')',6,y-5);
- }
-}
-
-function drawElement(el,t){
- const p=getPos(el,t),c=getColor(el),r=getRadius(el);
- const isH=hovered&&hovered.z===el.z;
- const isSpecial=el.z===79||el.z===43||el.z===61;
- const pulse=isSpecial?1+.12*Math.sin(t*.003+el.z):1;
- const rr=r*pulse*(isH?1.8:1);
-
- const grd=ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,rr*3.5);
- grd.addColorStop(0,`rgba(${c.r},${c.g},${c.b},${isH?.5:.2})`);
- grd.addColorStop(1,`rgba(${c.r},${c.g},${c.b},0)`);
- ctx.fillStyle=grd;ctx.beginPath();ctx.arc(p.x,p.y,rr*3.5,0,Math.PI*2);ctx.fill();
-
- ctx.fillStyle=`rgb(${c.r},${c.g},${c.b})`;
- ctx.beginPath();ctx.arc(p.x,p.y,rr,0,Math.PI*2);ctx.fill();
-
- if(el.z===79){ctx.strokeStyle='rgba(255,215,0,.7)';ctx.lineWidth=1.5;ctx.beginPath();ctx.arc(p.x,p.y,rr+5+2*Math.sin(t*.004),0,Math.PI*2);ctx.stroke();}
-
- const showLabel=isH||isSpecial||(view!=='spiral');
- if(showLabel){
-  const lc=isH?'#ffffff':getLabelColor(el);
-  const fs=isH?(W<600?11:13):(W<600?8:10);
-  ctx.save();
-  ctx.shadowColor='rgba(0,0,0,.9)';ctx.shadowBlur=4;ctx.shadowOffsetX=0;ctx.shadowOffsetY=1;
-  ctx.fillStyle=lc;ctx.font=(isH?'bold ':'')+fs+'px Georgia';
-  ctx.textAlign='center';ctx.textBaseline='bottom';
-  ctx.fillText(el.sym,p.x,p.y-rr-3);
-  if(view!=='spiral'&&!isH){
-   ctx.fillStyle='rgba(255,255,255,.55)';ctx.font=(W<600?7:8)+'px Georgia';
-   ctx.textBaseline='top';ctx.fillText(el.z,p.x,p.y+rr+2);
-  }
-  ctx.restore();
- }
- el._x=p.x;el._y=p.y;el._r=rr;
-}
-
-function draw(){
- time++;
- ctx.fillStyle='#0a0a1a';ctx.fillRect(0,0,W,H);
- drawStars(time);
- if(view==='spiral'){drawKhraGixx(time);drawBandRings();}
- if(view==='bands')drawBandLines();
- for(const el of elements)drawElement(el,time);
- if(view==='spiral'){
-  ctx.fillStyle='rgba(255,236,139,.4)';
-  ctx.font='italic '+(W<600?10:12)+'px Georgia';
-  ctx.textAlign='center';ctx.textBaseline='alphabetic';
-  ctx.fillText('Matter is frozen memory',cx,H-16);
- }
- requestAnimationFrame(draw);
-}
-
-function handlePointer(ex,ey){
- hovered=null;let closest=null,closestD=Infinity;
- for(const el of elements){
-  if(el._x===undefined)continue;
-  const d=Math.hypot(ex-el._x,ey-el._y);
-  if(d<Math.max(el._r*2.5,14)&&d<closestD){closest=el;closestD=d;}
- }
- hovered=closest;
- if(hovered){
-  const el=hovered,c=getColor(el);
-  tt.style.display='block';
-  tt.style.left=Math.min(ex+14,W-270)+'px';
-  tt.style.top=Math.min(ey+14,H-220)+'px';
-  tt.style.borderColor=`rgb(${c.r},${c.g},${c.b})`;
-  tt.innerHTML=`<div class="sym">${el.sym}</div><div class="name">${el.z}. ${el.name}</div><div class="info"><span>Band:</span> ${el.band} (${el.asym})<br><span>Harmonic:</span> ${el.hMode}<br><span>Phase:</span> ${el.phase}<br><span>Valency:</span> ${el.valency}<br><span>Period:</span> ${el.period} &middot; <span>Group:</span> ${el.group}<br><span>Stability:</span> ${el.stability}<br><span>Isotope:</span> ${el.isotope}<br><em style="color:#aaa;font-size:11px">${el.desc}</em></div>`;
- } else tt.style.display='none';
-}
-
-cn.addEventListener('mousemove',e=>{const r=cn.getBoundingClientRect();handlePointer(e.clientX-r.left,e.clientY-r.top);});
-cn.addEventListener('touchstart',e=>{e.preventDefault();const t=e.touches[0],r=cn.getBoundingClientRect();handlePointer(t.clientX-r.left,t.clientY-r.top);},{passive:false});
-cn.addEventListener('touchmove',e=>{e.preventDefault();const t=e.touches[0],r=cn.getBoundingClientRect();handlePointer(t.clientX-r.left,t.clientY-r.top);},{passive:false});
-cn.addEventListener('touchend',()=>{hovered=null;tt.style.display='none';});
-cn.addEventListener('mouseleave',()=>{hovered=null;tt.style.display='none';});
-
-function setView(v){view=v;document.querySelectorAll('#controls button').forEach(b=>b.classList.remove('active'));document.getElementById('btn-'+v).classList.add('active');}
-draw();
-</script>
-</body>
-</html>
