fix(website): animation error and gallery code snippet readability

Fix animation demo crashing with "Data is not set":
- Transit.animate() requires (data, duration, isReverse, callback) — was
  called with no arguments, causing validate() to throw on undefined data
- Add animateTargetData to demoData.ts (planets shifted ~30–90° from the
  initial transit so movement is clearly visible)
- Pass animateTargetData via define:vars to the inline script
- Button now toggles forward/back between transitData and animateTargetData
- Duration passed as 2 (seconds, the library multiplies by 1000 internally)

Fix gallery/guide code snippet hard to read in dark mode:
- Replace light #f5f5f5 pre background with dark #1e1e2e (Catppuccin Mocha)
- Set explicit code color #cdd6f4 (light lavender) for contrast on both
  light and dark mode
- Add a subtle border so the block has definition on any background

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca <git@eca.dev>

Author: afucher

website/src/components/ChartDemo.astro

@@ -16,7 +16,7 @@ export interface Props {
   showCode?: boolean
 }
 
-import { defaultRadixData, defaultTransitData } from '../data/demoData'
+import { defaultRadixData, defaultTransitData, animateTargetData } from '../data/demoData'
 
 const {
   id,
@@ -84,6 +84,7 @@ const codeSnippet = getCodeSnippet()
     chartHeight: height,
     radixData: defaultRadixData,
     transitData: defaultTransitData,
+    animateTargetData: animateTargetData,
     baseUrl: import.meta.env.BASE_URL
   }}
 >
@@ -104,11 +105,15 @@ const codeSnippet = getCodeSnippet()
           chart.radix(radixData).aspects()
         } else if (chartMode === 'animate') {
           const transit = chart.radix(radixData).transit(transitData)
+          var isForward = true
 
           const animateBtn = document.getElementById(chartId + '-animate-btn')
           if (animateBtn) {
             animateBtn.addEventListener('click', function () {
-              transit.animate()
+              var target = isForward ? animateTargetData : transitData
+              transit.animate(target, 2, false, function () {
+                isForward = !isForward
+              })
             })
           }
         }
@@ -190,16 +195,18 @@ const codeSnippet = getCodeSnippet()
   }
 
   .code-snippet pre {
-    background: #f5f5f5;
+    background: #1e1e2e;
     padding: 1rem;
     border-radius: 0.5rem;
     overflow-x: auto;
     margin-top: 0.5rem;
     font-size: 0.875rem;
     line-height: 1.5;
+    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 
   .code-snippet code {
     font-family: 'Courier New', monospace;
+    color: #cdd6f4;
   }
 </style>

website/src/data/demoData.ts

@@ -94,3 +94,41 @@ export const animationData = {
   radix: defaultRadixData,
   transit: defaultTransitData
 }
+
+/**
+ * Target transit data for animation demo.
+ * Planets are shifted ~30–90° from defaultTransitData so the animation is visible.
+ */
+export const animateTargetData: AstroData = {
+  planets: {
+    Sun: [55.34, 0],        // moved ~30°
+    Moon: [242.45, 0],      // Moon moves fast
+    Mercury: [82.67, 0],
+    Venus: [98.12, 0],
+    Mars: [228.34, 0],
+    Jupiter: [358.56, 0],
+    Saturn: [318.78, 0],
+    Uranus: [328.90, 0],
+    Neptune: [355.12, 0],
+    Pluto: [330.34, 0],
+    Chiron: [198.67, 0],
+    NNode: [92.45, 0],
+    SNode: [272.45, 0],
+    Lilith: [245.23, 0],
+    Fortune: [75.67, 0]
+  },
+  cusps: [
+    345.45,
+    65.67,
+    95.23,
+    122.45,
+    155.67,
+    185.89,
+    165.45,
+    245.67,
+    275.23,
+    302.45,
+    335.67,
+    5.89
+  ]
+}