fix: Improve tutorial UI - larger labels, better positioning

- Increase annotation distanceFactor from 6 to 25 for readable labels
- Bump annotation font from text-base to text-lg
- Move ch2-alignment camera closer (192→53 units) to see action
- Center top-down alignment indicator (was hiding under left sidebar)
- Show sun force vectors at ch3-complex step
- Move Replay Tutorial button up to avoid overlapping About/Shortcuts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: cjw6k

tidal-harmonics/src/components/canvas/ForceField.tsx

@@ -24,8 +24,8 @@ export function ForceField() {
   const currentStep = getCurrentStep();
   const showExplanation = !tutorialActive || currentStep?.step.id === 'ch1-differential';
 
-  // Show Sun forces in chapter 2 (spring/neap) or outside tutorial
-  const showSunForces = !tutorialActive || currentStep?.chapter.id === 'ch2-sun';
+  // Show Sun forces in chapter 2 (spring/neap), ch3-complex, or outside tutorial
+  const showSunForces = !tutorialActive || currentStep?.chapter.id === 'ch2-sun' || currentStep?.step.id === 'ch3-complex';
 
   const { moonArrows, sunArrows, sunMoonAngle } = useMemo(() => {
     const earthR = scale.EARTH_RADIUS;
@@ -205,7 +205,8 @@ export function ForceField() {
           style={{
             position: 'fixed',
             top: '80px',
-            right: '380px',
+            left: '50%',
+            transform: 'translateX(-50%)',
             pointerEvents: 'none',
           }}
           zIndexRange={[1, 10]}

tidal-harmonics/src/components/tutorial/AnnotationLayer.tsx

@@ -17,15 +17,15 @@ export function AnnotationLayer() {
           key={annotation.id}
           position={annotation.position}
           center
-          distanceFactor={6}
+          distanceFactor={25}
           occlude={false}
           style={{
             pointerEvents: 'none',
             userSelect: 'none',
           }}
         >
           <div
-            className={`px-3 py-2 rounded-lg text-base whitespace-nowrap
+            className={`px-3 py-2 rounded-lg text-lg whitespace-nowrap
               ${
                 annotation.style === 'highlight'
                   ? 'bg-blue-600 text-white font-medium'

tidal-harmonics/src/components/tutorial/TutorialButton.tsx

@@ -29,7 +29,7 @@ export function TutorialButton() {
   return (
     <button
       onClick={startTutorial}
-      className="fixed bottom-4 left-4 z-40 px-3 py-1.5
+      className="fixed bottom-12 left-4 z-40 px-3 py-1.5
         bg-slate-700/80 text-slate-300 rounded-lg
         hover:bg-slate-600 hover:text-white
         shadow-md transition-all text-xs font-medium

tidal-harmonics/src/data/tutorialContent.ts

@@ -100,7 +100,7 @@ export const TUTORIAL_CHAPTERS: TutorialChapter[] = [
         title: 'When They Align',
         content: "At new and full Moon, Sun and Moon pull together. Their forces ADD up.",
         duration: 7,
-        camera: { position: [0, 150, 120], target: [0, 0, 0], duration: 2 },
+        camera: { position: [0, 40, 35], target: [0, 0, 0], duration: 2 },
         showTidalBulge: true,
         tidalExaggeration: 90000,
         highlightSun: true,