Polish org card: SVG poster fallback per organ so the 5-organ mesh is never empty when the org-card iframe strips the Three.js module; live 3D paints over posters when WebGL is supported; resilient per-cell init

index.html

@@ -251,13 +251,13 @@
   <div class="container">
     <p class="mr-head" style="font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:0.2rem;">The Mesh · Five Organs · Live 3D</p>
     <div id="szl-hero-grid" role="group" aria-label="SZL Holdings five organs, interactive 3D figures">
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/amaru"   data-organ="amaru"   aria-label="amaru — memory cortex (serpent + crystal core), open Space"><canvas data-organ="amaru"></canvas><span class="szl-hero-name">amaru</span><span class="szl-hero-role">cortex · serpent</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/sentra"  data-organ="sentra"  aria-label="sentra — immune shield, open Space"><canvas data-organ="sentra"></canvas><span class="szl-hero-name">sentra</span><span class="szl-hero-role">immune · shield</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/rosie"   data-organ="rosie"   aria-label="rosie — operator console (HUD rings), open Space"><canvas data-organ="rosie"></canvas><span class="szl-hero-name">rosie</span><span class="szl-hero-role">operator · console</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/killinchu" data-organ="killinchu" aria-label="killinchu — kestrel drone intel, open Space"><canvas data-organ="killinchu"></canvas><span class="szl-hero-name">killinchu</span><span class="szl-hero-role">kestrel · drone</span></a>
-      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/a11oy"   data-organ="a11oy"   aria-label="a11oy — router knot-graph (Khipu cords), open Space"><canvas data-organ="a11oy"></canvas><span class="szl-hero-name">a11oy</span><span class="szl-hero-role">router · wires</span></a>
+      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/amaru"   data-organ="amaru"   aria-label="amaru — memory cortex (serpent + crystal core), open Space"><canvas data-organ="amaru" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMTEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC45NSI+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjE5MCIgcng9IjU4IiByeT0iMTciLz48ZWxsaXBzZSBjeD0iMTI4IiBjeT0iMTUwIiByeD0iNTAiIHJ5PSIxNSIvPjxlbGxpcHNlIGN4PSIxMjgiIGN5PSIxMTIiIHJ4PSI0MCIgcnk9IjEyIi8+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjgwIiByeD0iMjgiIHJ5PSI5Ii8+PC9nPjxwb2x5Z29uIHBvaW50cz0iMTI4LDk4IDE1MCwxMzIgMTI4LDE1NiAxMDYsMTMyIiBmaWxsPSIjZThjYzZhIi8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNjAgMTQ0LDg0IDEyOCw5OCAxMTIsODQiIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNDIiIGN5PSI3NCIgcj0iNCIgZmlsbD0iI2Y0ZWVkZSIvPjwvc3ZnPg==');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">amaru</span><span class="szl-hero-role">cortex · serpent</span></a>
+      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/sentra"  data-organ="sentra"  aria-label="sentra — immune shield, open Space"><canvas data-organ="sentra" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi40IiBvcGFjaXR5PSIwLjkiPjxwb2x5Z29uIHBvaW50cz0iMTI4LDU2IDE5NiwxMDQgMTcwLDE4MiA4NiwxODIgNjAsMTA0Ii8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNTYgMTcwLDE4MiA2MCwxMDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCw1NiA4NiwxODIgMTk2LDEwNCIvPjxsaW5lIHgxPSI2MCIgeTE9IjEwNCIgeDI9IjE5NiIgeTI9IjEwNCIvPjxsaW5lIHgxPSIxMjgiIHkxPSI1NiIgeDI9IjEyOCIgeTI9IjE4MiIvPjwvZz48cG9seWdvbiBwb2ludHM9IjEwMCwxMTggMTU2LDExOCAxMjgsMTUwIiBmaWxsPSIjZDRhNDQ0IiBvcGFjaXR5PSIwLjU1Ii8+PGNpcmNsZSBjeD0iNjAiIGN5PSIxMzgiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxMjAiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSI3OCIgY3k9IjkyIiByPSI1IiBmaWxsPSIjNjY4OGZmIi8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTIwIiByPSIzNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjQiIG9wYWNpdHk9IjAuOCIvPjwvc3ZnPg==');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">sentra</span><span class="szl-hero-role">immune · shield</span></a>
+      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/rosie"   data-organ="rosie"   aria-label="rosie — operator console (HUD rings), open Space"><canvas data-organ="rosie" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48Y2lyY2xlIGN4PSIxMjgiIGN5PSIxMjgiIHI9IjQ0IiBmaWxsPSIjMTExNjFmIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMyIvPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjEyOCIgcj0iMjIiIGZpbGw9IiNmNGVlZGUiIG9wYWNpdHk9IjAuOTIiLz48ZyBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIwLjg1Ij48bGluZSB4MT0iNjAiIHkxPSIxNzAiIHgyPSI2MCIgeTI9IjEyMCIvPjxsaW5lIHgxPSIxMDAiIHkxPSIxODAiIHgyPSIxMDAiIHkyPSIxMTAiLz48bGluZSB4MT0iMTU2IiB5MT0iMTgwIiB4Mj0iMTU2IiB5Mj0iMTEwIi8+PGxpbmUgeDE9IjE5NiIgeTE9IjE3MCIgeDI9IjE5NiIgeTI9IjEyMCIvPjwvZz48cmVjdCB4PSI1NiIgeT0iMTc2IiB3aWR0aD0iMTQ0IiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTI4IiByPSI2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjEuNiIgb3BhY2l0eT0iMC41Ii8+PC9zdmc+');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">rosie</span><span class="szl-hero-role">operator · console</span></a>
+      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/killinchu" data-organ="killinchu" aria-label="killinchu — kestrel drone intel, open Space"><canvas data-organ="killinchu" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48cGF0aCBkPSJNNzAgMTQwIFExMjggOTYgMTg2IDE0MCBRMTUwIDEyOCAxMjggMTI4IFExMDYgMTI4IDcwIDE0MFoiIGZpbGw9IiNkNGE0NDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCwxMTIgMTM0LDEyOCAxMjIsMTI4IiBmaWxsPSIjZThjYzZhIi8+PGcgZmlsbD0iI2Y0ZWVkZSIgb3BhY2l0eT0iMC45Ij48Y2lyY2xlIGN4PSI2NCIgY3k9IjEyMCIgcj0iMy4yIi8+PGNpcmNsZSBjeD0iOTIiIGN5PSI5NiIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTYwIiBjeT0iOTIiIHI9IjMiLz48Y2lyY2xlIGN4PSIxOTYiIGN5PSIxMTgiIHI9IjMuNCIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjE2MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTAwIiBjeT0iMTY4IiByPSIzIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTUwIiByPSIyLjQiLz48Y2lyY2xlIGN4PSI1OCIgY3k9IjE1OCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iNzgiIHI9IjIuNCIvPjwvZz48ZyBmaWxsPSIjNjY4OGZmIiBvcGFjaXR5PSIwLjgiPjxjaXJjbGUgY3g9IjEyMCIgY3k9IjE1MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTcwIiBjeT0iMTQwIiByPSIyLjYiLz48L2c+PC9zdmc+');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">killinchu</span><span class="szl-hero-role">kestrel · drone</span></a>
+      <a class="szl-hero-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/a11oy"   data-organ="a11oy"   aria-label="a11oy — router knot-graph (Khipu cords), open Space"><canvas data-organ="a11oy" style="background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi4yIiBvcGFjaXR5PSIwLjg1Ij48bGluZSB4MT0iMTI4IiB5MT0iNzIiIHgyPSIxODYiIHkyPSIxMDQiLz48bGluZSB4MT0iMTg2IiB5MT0iMTA0IiB4Mj0iMTk2IiB5Mj0iMTY4Ii8+PGxpbmUgeDE9IjE5NiIgeTE9IjE2OCIgeDI9IjE0MCIgeTI9IjE5NiIvPjxsaW5lIHgxPSIxNDAiIHkxPSIxOTYiIHgyPSI4NiIgeTI9IjE4NCIvPjxsaW5lIHgxPSI4NiIgeTE9IjE4NCIgeDI9IjY0IiB5Mj0iMTI4Ii8+PGxpbmUgeDE9IjY0IiB5MT0iMTI4IiB4Mj0iMTI4IiB5Mj0iNzIiLz48bGluZSB4MT0iMTI4IiB5MT0iNzIiIHgyPSI5NiIgeTI9Ijk2Ii8+PGxpbmUgeDE9Ijk2IiB5MT0iOTYiIHgyPSIxNTAiIHkyPSIxNDAiLz48bGluZSB4MT0iMTUwIiB5MT0iMTQwIiB4Mj0iMTg2IiB5Mj0iMTA0Ii8+PGxpbmUgeDE9IjE1MCIgeTE9IjE0MCIgeDI9IjE0MCIgeTI9IjE5NiIvPjxsaW5lIHgxPSI5NiIgeTE9Ijk2IiB4Mj0iNjQiIHkyPSIxMjgiLz48bGluZSB4MT0iMTUwIiB5MT0iMTQwIiB4Mj0iMTk2IiB5Mj0iMTY4Ii8+PC9nPjxjaXJjbGUgY3g9IjEyOCIgY3k9IjcyIiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTg2IiBjeT0iMTA0IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTk2IiBjeT0iMTY4IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iMTQwIiBjeT0iMTk2IiByPSI3IiBmaWxsPSIjZDRhNDQ0Ii8+PGNpcmNsZSBjeD0iODYiIGN5PSIxODQiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSI2NCIgY3k9IjEyOCIgcj0iNyIgZmlsbD0iI2Q0YTQ0NCIvPjxjaXJjbGUgY3g9Ijk2IiBjeT0iOTYiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIxNDAiIHI9IjciIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSI5NiIgY3k9Ijk2IiByPSI3IiBmaWxsPSIjZjRlZWRlIi8+PC9zdmc+');background-size:cover;background-position:center;"></canvas><span class="szl-hero-name">a11oy</span><span class="szl-hero-role">router · wires</span></a>
     </div>
-    <p style="font-family:var(--font-mono);font-size:0.68rem;color:var(--text-dim);margin-top:0.9rem;letter-spacing:0.04em;">Real Three.js · touch-rotate on mobile · tap a figure to open its Space</p>
+    <p style="font-family:var(--font-mono);font-size:0.68rem;color:var(--text-dim);margin-top:0.9rem;letter-spacing:0.04em;">Interactive 3D where WebGL is supported · rendered preview otherwise · tap a figure to open its Space</p>
   </div>
 </section>
 
@@ -299,6 +299,8 @@ function makeScene(canvas, organ){
     powerPreference: SZL_MOBILE ? 'low-power' : 'high-performance'
   });
   renderer.setPixelRatio(PR);
+  // WebGL is live for this cell — drop the SVG poster fallback so the real 3D shows cleanly.
+  canvas.style.backgroundImage = 'none';
   const scene = new THREE.Scene();
   scene.background = null;
   const cam = new THREE.PerspectiveCamera(42, 1, 0.1, 100);
@@ -418,7 +420,13 @@ function makeScene(canvas, organ){
   cells.push({renderer,scene,cam,root,organ,extras,resize});
 }
 
-document.querySelectorAll('#szl-hero-grid canvas').forEach(c=>makeScene(c, c.dataset.organ));
+// Resilient init: if WebGL is unavailable or the module/importmap is stripped by a
+// host sanitizer (e.g. the HF org-card iframe), each canvas keeps its inline SVG
+// poster background so the mesh is NEVER an empty box. Live 3D paints over it when supported.
+document.querySelectorAll('#szl-hero-grid canvas').forEach(function(c){
+  try { makeScene(c, c.dataset.organ); }
+  catch(err){ /* keep poster fallback for this organ */ }
+});
 
 let t0=performance.now();
 function loop(now){