feat: complete ANL lab homepage with light/dark theme, responsive layout, and 100% SSG E2E test suite

refer_landing_page/app/_components/HeroComposition.tsx

@@ -46,12 +46,12 @@ export default function HeroComposition({
         width="368"
         height="368"
         fill="none"
-        stroke="#0A0A0A"
+        stroke="var(--ink)"
         strokeWidth="1.5"
       />
 
       {/* ---- QUIC: flowing multiplexed streams (cobalt) ---- */}
-      <g stroke="#1B3A8A" fill="none" strokeWidth="2.5" strokeLinecap="round">
+      <g stroke="var(--cobalt)" fill="none" strokeWidth="2.5" strokeLinecap="round">
         {[0, 1, 2, 3].map((i) => {
           const y = 250 + i * 30;
           return (
@@ -67,7 +67,7 @@ export default function HeroComposition({
       </g>
 
       {/* ---- A2A: interconnected node mesh (vermillion) ---- */}
-      <g stroke="#D9342B" strokeWidth="1.5">
+      <g stroke="var(--vermillion)" strokeWidth="1.5">
         {edges.map(([a, b], i) => (
           <line
             key={i}
@@ -79,7 +79,7 @@ export default function HeroComposition({
           />
         ))}
       </g>
-      <g fill="#D9342B">
+      <g fill="var(--vermillion)">
         {nodes.map((n, i) => (
           <circle
             key={i}
@@ -101,14 +101,14 @@ export default function HeroComposition({
           control points reaching y+40=380). See LAYOUT_AUDIT #3 and
           REVIEW §3 "P1 #3" — keeping them at y=24 (mirror corners) preserves
           a symmetric layout that the original LAYOUT_AUDIT mirror decided on. */}
-      <text x="20" y="24" fill="#0A0A0A" fontSize="11" fontWeight="600" letterSpacing="2">
+      <text x="20" y="24" fill="var(--ink)" fontSize="11" fontWeight="600" letterSpacing="2">
         A2A · MESH
       </text>
       <text
         x="360"
         y="24"
         textAnchor="end"
-        fill="#0A0A0A"
+        fill="var(--ink)"
         fontSize="11"
         fontWeight="600"
         letterSpacing="2"