Add A2 worlds and fix hero dark mode

- Add worlds/A2-Animation.html and worlds/A2-Freeroam.html (SuperSplat 3DGS viewers)
- Add cards for both on worlds.html (cinematic fly-through + free-roam)
- Fix drone vision SVG in dark mode: white bg on wrapper + invert(1) on container

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

worlds.html

@@ -132,6 +132,70 @@
           </div>
         </a>
 
+        <a href="worlds/A2-Animation.html" class="world-card">
+          <div class="world-card-preview">
+            <svg viewBox="0 0 400 240" fill="none" style="position:absolute;inset:0;width:100%;height:100%;" aria-hidden="true">
+              <rect width="400" height="240" fill="#0A0F1A"/>
+              <path d="M0 160 Q100 130 200 145 Q300 120 400 135 L400 240 L0 240Z" fill="#111827" opacity="0.9"/>
+              <path d="M0 190 Q80 172 200 178 Q320 165 400 172 L400 240 L0 240Z" fill="#162033" opacity="0.95"/>
+              <!-- gaussian splat dots - warm tones -->
+              <circle cx="80" cy="110" r="28" fill="#8B6914" opacity="0.18"/>
+              <circle cx="80" cy="110" r="16" fill="#C4922A" opacity="0.22"/>
+              <circle cx="150" cy="90" r="36" fill="#6B4F10" opacity="0.15"/>
+              <circle cx="150" cy="90" r="20" fill="#A87828" opacity="0.2"/>
+              <circle cx="240" cy="100" r="30" fill="#7A5A18" opacity="0.16"/>
+              <circle cx="240" cy="100" r="17" fill="#B8851E" opacity="0.21"/>
+              <circle cx="320" cy="95" r="24" fill="#5C4410" opacity="0.14"/>
+              <circle cx="320" cy="95" r="13" fill="#9A7020" opacity="0.19"/>
+              <!-- camera path line -->
+              <path d="M30 180 Q100 140 200 130 Q300 120 370 115" stroke="#C4922A" stroke-width="1.2" stroke-dasharray="4 3" opacity="0.5"/>
+              <circle cx="30" cy="180" r="3.5" fill="#C4922A" opacity="0.7"/>
+              <polygon points="370,112 375,118 365,118" fill="#C4922A" opacity="0.7"/>
+            </svg>
+            <div class="world-enter">Watch ↗</div>
+          </div>
+          <div class="world-card-title">A2 — Animation</div>
+          <div class="world-card-desc">A cinematic fly-through of the A2 scene captured in 3D Gaussian Splatting. Sit back and let the camera guide you through the reconstructed environment.</div>
+          <div class="chip-row">
+            <span class="chip">Cinematic</span>
+            <span class="chip">Guided tour</span>
+            <span class="chip">3DGS</span>
+          </div>
+        </a>
+
+        <a href="worlds/A2-Freeroam.html" class="world-card">
+          <div class="world-card-preview">
+            <svg viewBox="0 0 400 240" fill="none" style="position:absolute;inset:0;width:100%;height:100%;" aria-hidden="true">
+              <rect width="400" height="240" fill="#0A0F1A"/>
+              <path d="M0 160 Q100 130 200 145 Q300 120 400 135 L400 240 L0 240Z" fill="#111827" opacity="0.9"/>
+              <path d="M0 190 Q80 172 200 178 Q320 165 400 172 L400 240 L0 240Z" fill="#162033" opacity="0.95"/>
+              <!-- gaussian splat dots - warm tones (same scene) -->
+              <circle cx="80" cy="110" r="28" fill="#8B6914" opacity="0.18"/>
+              <circle cx="80" cy="110" r="16" fill="#C4922A" opacity="0.22"/>
+              <circle cx="150" cy="90" r="36" fill="#6B4F10" opacity="0.15"/>
+              <circle cx="150" cy="90" r="20" fill="#A87828" opacity="0.2"/>
+              <circle cx="240" cy="100" r="30" fill="#7A5A18" opacity="0.16"/>
+              <circle cx="240" cy="100" r="17" fill="#B8851E" opacity="0.21"/>
+              <circle cx="320" cy="95" r="24" fill="#5C4410" cy="0.14"/>
+              <circle cx="320" cy="95" r="13" fill="#9A7020" opacity="0.19"/>
+              <!-- free-roam crosshair -->
+              <circle cx="200" cy="120" r="14" fill="none" stroke="#C4922A" stroke-width="1.2" opacity="0.6"/>
+              <line x1="200" y1="106" x2="200" y2="100" stroke="#C4922A" stroke-width="1.2" opacity="0.6"/>
+              <line x1="200" y1="134" x2="200" y2="140" stroke="#C4922A" stroke-width="1.2" opacity="0.6"/>
+              <line x1="186" y1="120" x2="180" y2="120" stroke="#C4922A" stroke-width="1.2" opacity="0.6"/>
+              <line x1="214" y1="120" x2="220" y2="120" stroke="#C4922A" stroke-width="1.2" opacity="0.6"/>
+            </svg>
+            <div class="world-enter">Explore ↗</div>
+          </div>
+          <div class="world-card-title">A2 — Freeroam</div>
+          <div class="world-card-desc">Freely navigate the A2 Gaussian Splat scene at your own pace. Move through the reconstructed space in any direction using your mouse or touch controls.</div>
+          <div class="chip-row">
+            <span class="chip">Interactive</span>
+            <span class="chip">Free navigation</span>
+            <span class="chip">3DGS</span>
+          </div>
+        </a>
+
       </div>
     </div>
   </section>