More misc changes

src/App.tsx

@@ -38,7 +38,7 @@ function App() {
   const [stats, setStats] = useState<Stats>(createInitialStats());
 
   // Experiment mode configuration
-  const [mode, setMode] = useState<AppMode>('freestyle');
+  const [mode, setMode] = useState<AppMode>('demo');
   const [currentPreset, setCurrentPreset] = useState<ZoomPreset>('A');
   const [presetsCompleted, setPresetsCompleted] = useState<ZoomPreset[]>([]);
   const [targetCount, setTargetCount] = useState(0);
@@ -580,13 +580,13 @@ function App() {
           <div className="break-container">
             <h2>Study Complete!</h2>
             <p>You've completed all presets in the study (100 trials). Thank you for participating!</p>
-            <p>You can now export your data or continue experimenting in freestyle mode.</p>
+            <p>You can now export your data or continue experimenting in demo mode.</p>
             <div className="button-group">
               <button onClick={() => {
                 setStudyComplete(false);
-                setMode('freestyle');
+                setMode('demo');
               }}>
-                Switch to Freestyle Mode
+                Switch to Demo Mode
               </button>
               <button
                 onClick={() => exportToCSV(rounds)}

src/components/Instructions.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { AppMode } from '../types';
+import { AppMode, CONSTANTS } from '../types';
 import './Instructions.css';
 
 interface InstructionsProps {
@@ -13,7 +13,7 @@ export const Instructions: React.FC<InstructionsProps> = ({
   onClose,
   onModeSelect 
 }) => {
-  const [selectedMode, setSelectedMode] = useState<AppMode>('freestyle');
+  const [selectedMode, setSelectedMode] = useState<AppMode>('demo');
 
   const handleStart = () => {
     onModeSelect(selectedMode);
@@ -41,11 +41,11 @@ export const Instructions: React.FC<InstructionsProps> = ({
                 <input
                   type="radio"
                   name="initial-mode"
-                  value="freestyle"
-                  checked={selectedMode === 'freestyle'}
-                  onChange={() => setSelectedMode('freestyle')}
+                  value="demo"
+                  checked={selectedMode === 'demo'}
+                  onChange={() => setSelectedMode('demo')}
                 />
-                <span className="mode-label">Freestyle Mode</span>
+                <span className="mode-label">Demo Mode</span>
                 <p className="mode-description">Test and explore different zoom acceleration settings at your own pace.</p>
               </label>
               <label>
@@ -57,7 +57,7 @@ export const Instructions: React.FC<InstructionsProps> = ({
                   onChange={() => setSelectedMode('study')}
                 />
                 <span className="mode-label">Study Mode</span>
-                <p className="mode-description">Complete 25 targets with each preset curve (A, B, C, D) for structured data collection.</p>
+                <p className="mode-description">Complete {CONSTANTS.STUDY_TARGETS_PER_PRESET} trials with each preset curve (A, B, C, D) for structured data collection.</p>
               </label>
             </div>
           </div>
@@ -96,7 +96,7 @@ export const Instructions: React.FC<InstructionsProps> = ({
 
         <div className="instructions-footer">
           <button className="got-it-button" onClick={handleStart}>
-            Start {selectedMode === 'freestyle' ? 'Freestyle Mode' : 'Study Mode'}
+            Start {selectedMode === 'demo' ? 'Demo Mode' : 'Study Mode'}
           </button>
         </div>
       </div>

src/components/Settings.tsx

@@ -98,11 +98,11 @@ export const Settings: React.FC<SettingsProps> = ({
 						<input
 							type="radio"
 							name="mode"
-							value="freestyle"
-							checked={mode === 'freestyle'}
-							onChange={() => handleModeChange('freestyle')}
+							value="demo"
+							checked={mode === 'demo'}
+							onChange={() => handleModeChange('demo')}
 						/>
-						<span>Freestyle Mode</span>
+						<span>Demo Mode</span>
 					</label>
 					<label>
 						<input

src/types.ts

@@ -22,7 +22,7 @@ export interface ViewportOffset {
 }
 
 export type ZoomPreset = 'A' | 'B' | 'C' | 'D';
-export type AppMode = 'freestyle' | 'study';
+export type AppMode = 'demo' | 'study';
 
 export interface AccelerationSettings {
 	enabled: boolean;
@@ -53,7 +53,7 @@ export const CONSTANTS = {
 	},
 	MOUSE_WHEEL_SAMPLES: 5,
 	NUM_CURVE_POINTS: 5,
-	STUDY_TARGETS_PER_PRESET: 25,
+	STUDY_TARGETS_PER_PRESET: 1,
 	PRESETS: {
 		A: [1, 2, 3, 4, 5],      // Linear increase
 		B: [1, 1.5, 2.5, 4, 6],  // Slow start, fast end