fix(roster): static SVG grid visible by default for org-card / no-JS

HF org cards inline the static Space index.html but strip <script> tags, so
the 3D canvas + JS fallback toggle never run there. Make the 5-tile SVG grid
the default-visible state (progressive enhancement): JS+WebGL hide it and
reveal the 3D scene on the live Space; the org card + no-JS browsers always
see the 5 clickable character tiles. Removes the frozen INITIALIZING text.

Author: Yachay <yachay@szlholdings.dev>
Co-Authored-By: Perplexity Computer Agent <agent@perplexity.ai>
Signed-off-by: Yachay <yachay@szlholdings.dev>
ADDITIVE. Doctrine v11 LOCKED 749/14/163 unchanged. Lambda Conjecture 1. SLSA L1 honest.

css/style.css

@@ -29,6 +29,10 @@ body{
 /* The 3D stage */
 #stage{position:relative;width:100%;height:min(70vh,640px);min-height:420px;}
 #roster{display:block;width:100%;height:100%;}
+#roster[hidden]{display:none;}
+/* When the static grid is the visible child (no JS / no WebGL / org card),
+   let the stage size to content instead of the fixed canvas height. */
+#stage:has(#fallback:not([hidden])){height:auto;min-height:0;}
 #loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
   font-family:var(--font-mono);color:var(--text-dim);font-size:.8rem;letter-spacing:.1em;}
 

index.html

@@ -23,13 +23,15 @@
   <!-- 3D character-select stage. Replaces both the old flat 5-tile grid and the
        static AI-illustration hero banner. -->
   <main id="stage" aria-label="SZL Holdings five-organ 3D character roster">
-    <canvas id="roster" aria-hidden="true"></canvas>
-    <div id="loading">INITIALIZING ROSTER…</div>
+    <canvas id="roster" aria-hidden="true" hidden></canvas>
     <!-- Hidden focusable proxies for keyboard nav (Tab cycles, Enter opens Space) -->
     <div id="a11y-heroes" class="a11y-heroes" aria-label="Hero select"></div>
 
-    <!-- WebGL fallback: the existing 5-tile SVG grid (graceful degradation) -->
-    <section id="fallback" hidden aria-label="SZL Holdings five organs (static)">
+    <!-- Static SVG 5-tile grid: shown by DEFAULT (no-JS / org-card sanitized
+         context where scripts are stripped, and as the WebGL fallback). When
+         JS + WebGL boot on the live Space, main.js hides this and shows the
+         3D character-select scene. Progressive enhancement / graceful degrade. -->
+    <section id="fallback" aria-label="SZL Holdings five organs">
       <div class="fb-grid">
       <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/amaru" aria-label="AMARU — cortex · serpent. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMTEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgb3BhY2l0eT0iMC45NSI+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjE5MCIgcng9IjU4IiByeT0iMTciLz48ZWxsaXBzZSBjeD0iMTI4IiBjeT0iMTUwIiByeD0iNTAiIHJ5PSIxNSIvPjxlbGxpcHNlIGN4PSIxMjgiIGN5PSIxMTIiIHJ4PSI0MCIgcnk9IjEyIi8+PGVsbGlwc2UgY3g9IjEyOCIgY3k9IjgwIiByeD0iMjgiIHJ5PSI5Ii8+PC9nPjxwb2x5Z29uIHBvaW50cz0iMTI4LDk4IDE1MCwxMzIgMTI4LDE1NiAxMDYsMTMyIiBmaWxsPSIjZThjYzZhIi8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNjAgMTQ0LDg0IDEyOCw5OCAxMTIsODQiIGZpbGw9IiNkNGE0NDQiLz48Y2lyY2xlIGN4PSIxNDIiIGN5PSI3NCIgcj0iNCIgZmlsbD0iI2Y0ZWVkZSIvPjwvc3ZnPg==" alt="amaru emblem"/><span class="fb-name">AMARU</span><span class="fb-role">cortex · serpent</span></a>
       <a class="fb-cell" href="https://huggingface.co/spaces/SZLHOLDINGS/sentra" aria-label="SENTRA — immune · shield. Open Space."><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJiZyIgY3g9IjUwJSIgY3k9IjQyJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTAxNTFmIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDYwOTBmIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3Qgd2lkdGg9IjI1NiIgaGVpZ2h0PSIyNTYiIHJ4PSIxMiIgZmlsbD0idXJsKCNiZykiLz48ZyBmaWxsPSJub25lIiBzdHJva2U9IiNkNGE0NDQiIHN0cm9rZS13aWR0aD0iMi40IiBvcGFjaXR5PSIwLjkiPjxwb2x5Z29uIHBvaW50cz0iMTI4LDU2IDE5NiwxMDQgMTcwLDE4MiA4NiwxODIgNjAsMTA0Ii8+PHBvbHlnb24gcG9pbnRzPSIxMjgsNTYgMTcwLDE4MiA2MCwxMDQiLz48cG9seWdvbiBwb2ludHM9IjEyOCw1NiA4NiwxODIgMTk2LDEwNCIvPjxsaW5lIHgxPSI2MCIgeTE9IjEwNCIgeDI9IjE5NiIgeTI9IjEwNCIvPjxsaW5lIHgxPSIxMjgiIHkxPSI1NiIgeDI9IjEyOCIgeTI9IjE4MiIvPjwvZz48cG9seWdvbiBwb2ludHM9IjEwMCwxMTggMTU2LDExOCAxMjgsMTUwIiBmaWxsPSIjZDRhNDQ0IiBvcGFjaXR5PSIwLjU1Ii8+PGNpcmNsZSBjeD0iNjAiIGN5PSIxMzgiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxMjAiIHI9IjYiIGZpbGw9IiNmZjVhNDQiLz48Y2lyY2xlIGN4PSI3OCIgY3k9IjkyIiByPSI1IiBmaWxsPSIjNjY4OGZmIi8+PGNpcmNsZSBjeD0iMTI4IiBjeT0iMTIwIiByPSIzNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZThjYzZhIiBzdHJva2Utd2lkdGg9IjQiIG9wYWNpdHk9IjAuOCIvPjwvc3ZnPg==" alt="sentra emblem"/><span class="fb-name">SENTRA</span><span class="fb-role">immune · shield</span></a>

js/main.js

@@ -22,13 +22,16 @@ const stage = document.getElementById('stage');
 const canvas = document.getElementById('roster');
 const fallback = document.getElementById('fallback');
 
+// The static SVG grid (#fallback) is shown by DEFAULT in the markup so the
+// org-card context (scripts stripped) and no-WebGL browsers always render the
+// 5 tiles. Only when WebGL boots do we hide it and reveal the 3D canvas.
 if (!webglOK()) {
-  // Show the static SVG 5-tile grid fallback, hide the 3D canvas.
-  canvas.style.display = 'none';
-  if (fallback) fallback.hidden = false;
-  document.getElementById('loading')?.remove();
+  canvas.hidden = true;
+  if (fallback) fallback.hidden = false; // keep visible
 } else {
-  if (fallback) fallback.hidden = true;
+  if (fallback) fallback.hidden = true;  // hide static grid
+  canvas.hidden = false;
+  canvas.style.display = 'block';
   init();
 }