Upload 32 files

App.tsx

@@ -4,9 +4,18 @@ import Background from './components/Background';
 import BentoCard from './components/BentoCard';
 import ChatBot from './components/ChatBot';
 import BlogView from './components/BlogView';
-import { BentoCardData, BlogSection, ChatMessage, AppSettings, ProcessingStatus, ViewMode, PaperStructure, GeminiModel } from './types';
+import { BentoCardData, BlogSection, ChatMessage, AppSettings, ProcessingStatus, ViewMode, PaperStructure, GeminiModel, ReadingPreferences } from './types';
 import { generateBentoCards, expandBentoCard, chatWithDocument, analyzePaperStructure, generateAndValidateSection, MODEL_INFO } from './services/aiService';
 
+// Default reading preferences for ADHD-friendly features
+const defaultReadingPreferences: ReadingPreferences = {
+  bionicReading: false,
+  eli5Mode: false,
+  highlightKeyTerms: true,
+  ttsEnabled: false,
+  ttsSpeed: 1.0
+};
+
 const App: React.FC = () => {
   // Settings
   const [settings, setSettings] = useState<AppSettings>({
@@ -14,7 +23,8 @@ const App: React.FC = () => {
     model: 'gemini-2.5-flash',
     theme: 'light',
     layoutMode: 'auto',
-    useThinking: false
+    useThinking: false,
+    readingPreferences: defaultReadingPreferences
   });
 
   // Inputs
@@ -735,6 +745,8 @@ const App: React.FC = () => {
                 onRetrySection={handleRetrySection}
                 retryingSectionIndex={retryingSectionIndex}
                 contentRef={blogRef}
+                readingPreferences={settings.readingPreferences}
+                onReadingPreferencesChange={(prefs) => setSettings(prev => ({ ...prev, readingPreferences: prefs }))}
               />
             )}
 

components/Background.tsx

@@ -1,6 +1,26 @@
-
 import React, { useEffect, useRef } from 'react';
 
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface ShapeDefinition {
+  points: Point[];
+  type: 'doc' | 'brain' | 'code' | 'graph';
+}
+
+interface DocumentEntity {
+  id: number;
+  gridX: number;
+  gridY: number;
+  life: number;
+  state: 'forming' | 'flipping' | 'fading';
+  flipProgress: number;
+  opacity: number;
+  shape: ShapeDefinition;
+}
+
 const Background: React.FC<{ theme: 'light' | 'dark' }> = ({ theme }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
@@ -11,7 +31,69 @@ const Background: React.FC<{ theme: 'light' | 'dark' }> = ({ theme }) => {
     if (!ctx) return;
 
     let animationFrameId: number;
-    let time = 0;
+    let mouseX = -1000;
+    let mouseY = -1000;
+
+    // Grid configuration
+    const DOT_SPACING = 25; // Denser grid
+    const DOT_RADIUS = 1.2;
+
+    // Shape Definitions
+    const DOC_SHAPE: ShapeDefinition = {
+      type: 'doc',
+      points: [
+        { x: 0, y: 0 }, { x: 1, y: 0 }, { x: 2, y: 0 }, /* corner fold */ { x: 4, y: 1 },
+        { x: 0, y: 1 }, { x: 0, y: 2 }, { x: 0, y: 3 }, { x: 0, y: 4 }, { x: 0, y: 5 },
+        { x: 4, y: 2 }, { x: 4, y: 3 }, { x: 4, y: 4 }, { x: 4, y: 5 },
+        { x: 1, y: 5 }, { x: 2, y: 5 }, { x: 3, y: 5 },
+        { x: 3, y: 0 }, { x: 4, y: 1 },
+        { x: 1, y: 2 }, { x: 2, y: 2 }, { x: 3, y: 2 },
+        { x: 1, y: 4 }, { x: 2, y: 4 }, { x: 3, y: 4 },
+      ]
+    };
+
+    const CODE_SHAPE: ShapeDefinition = {
+      type: 'code',
+      points: [
+        // <
+        { x: 2, y: 0 }, { x: 1, y: 1 }, { x: 0, y: 2 }, { x: 1, y: 3 }, { x: 2, y: 4 },
+        // /
+        { x: 3, y: 0 }, { x: 3, y: 4 }, // Slash approximation
+        // >
+        { x: 4, y: 0 }, { x: 5, y: 1 }, { x: 6, y: 2 }, { x: 5, y: 3 }, { x: 4, y: 4 },
+      ]
+    };
+
+    const BRAIN_SHAPE: ShapeDefinition = {
+      type: 'brain',
+      points: [
+        { x: 2, y: 0 }, { x: 3, y: 0 },
+        { x: 1, y: 1 }, { x: 4, y: 1 },
+        { x: 0, y: 2 }, { x: 5, y: 2 },
+        { x: 0, y: 3 }, { x: 5, y: 3 },
+        { x: 1, y: 4 }, { x: 4, y: 4 },
+        { x: 2, y: 5 }, { x: 3, y: 5 },
+        // Internal connections
+        { x: 2, y: 2 }, { x: 3, y: 2 },
+        { x: 2, y: 3 }, { x: 3, y: 3 },
+      ]
+    };
+
+    const GRAPH_SHAPE: ShapeDefinition = {
+      type: 'graph',
+      points: [
+        { x: 0, y: 4 }, { x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 2 }, { x: 4, y: 3 }, { x: 5, y: 0 },
+        // Nodes
+        { x: 0, y: 4 }, { x: 2, y: 4 }, { x: 3, y: 2 }, { x: 5, y: 0 }
+      ]
+    };
+
+    const SHAPES = [DOC_SHAPE, CODE_SHAPE, BRAIN_SHAPE, GRAPH_SHAPE];
+
+    let documents: DocumentEntity[] = [];
+    let nextDocId = 0;
+    let lastSpawnTime = 0;
+    let pulseTime = 0;
 
     const resize = () => {
       canvas.width = window.innerWidth;
@@ -20,90 +102,183 @@ const Background: React.FC<{ theme: 'light' | 'dark' }> = ({ theme }) => {
     window.addEventListener('resize', resize);
     resize();
 
-    const points: { x: number; y: number; z: number }[] = [];
-    const numPoints = 50; // Reduced count slightly
-    const size = 300;
+    const handleMouseMove = (e: MouseEvent) => {
+      mouseX = e.clientX;
+      mouseY = e.clientY;
+    };
+    window.addEventListener('mousemove', handleMouseMove);
 
-    // Create a cube of dots
-    for (let i = 0; i < numPoints; i++) {
-      points.push({
-        x: (Math.random() - 0.5) * size,
-        y: (Math.random() - 0.5) * size,
-        z: (Math.random() - 0.5) * size,
-      });
-    }
+    const spawnDocument = () => {
+      const cols = Math.ceil(canvas.width / DOT_SPACING);
+      const rows = Math.ceil(canvas.height / DOT_SPACING);
 
-    const draw = () => {
-      // Varied, slower speed
-      time += 0.001 + Math.sin(Date.now() * 0.0005) * 0.0005; 
+      // Spawn shapes only in the edge regions (left 15% or right 15%)
+      // to avoid cluttering the content area
+      const leftZoneCols = Math.floor(cols * 0.12);
+      const rightZoneStart = Math.floor(cols * 0.88);
       
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // Randomly pick left or right edge zone
+      const useLeftZone = Math.random() < 0.5;
+      const gridX = useLeftZone 
+        ? Math.floor(Math.random() * Math.max(1, leftZoneCols - 8))
+        : rightZoneStart + Math.floor(Math.random() * Math.max(1, cols - rightZoneStart - 8));
       
-      const cx = canvas.width / 2;
-      const cy = canvas.height / 2;
-
-      // Much lower opacity for better contrast with content
-      const color = theme === 'dark' ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.05)';
-      const connectionColor = theme === 'dark' ? 'rgba(255, 255, 255, 0.02)' : 'rgba(0, 0, 0, 0.02)';
-
-      ctx.fillStyle = color;
-      ctx.strokeStyle = connectionColor;
-
-      // Rotate points
-      const rotatedPoints = points.map(p => {
-        // Rotate Y
-        let x = p.x * Math.cos(time) - p.z * Math.sin(time);
-        let z = p.x * Math.sin(time) + p.z * Math.cos(time);
-        // Rotate X
-        let y = p.y * Math.cos(time * 0.5) - z * Math.sin(time * 0.5);
-        z = p.y * Math.sin(time * 0.5) + z * Math.cos(time * 0.5);
-
-        // Perspective projection
-        const scale = 800 / (800 + z);
-        return {
-          x: cx + x * scale,
-          y: cy + y * scale,
-          scale
-        };
+      const gridY = Math.floor(Math.random() * (rows - 8));
+      const shape = SHAPES[Math.floor(Math.random() * SHAPES.length)];
+
+      documents.push({
+        id: nextDocId++,
+        gridX,
+        gridY,
+        life: 0,
+        state: 'forming',
+        flipProgress: 0,
+        opacity: 0,
+        shape
       });
+    };
+
+    const draw = (timestamp: number) => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const cols = Math.ceil(canvas.width / DOT_SPACING);
+      const rows = Math.ceil(canvas.height / DOT_SPACING);
+
+      const baseDotColor = theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)';
+      const activeDotColor = theme === 'dark' ? 'rgba(99, 102, 241, 0.9)' : 'rgba(79, 70, 229, 0.9)';
 
-      // Draw connections
-      ctx.beginPath();
-      for (let i = 0; i < rotatedPoints.length; i++) {
-        for (let j = i + 1; j < rotatedPoints.length; j++) {
-          const dx = rotatedPoints[i].x - rotatedPoints[j].x;
-          const dy = rotatedPoints[i].y - rotatedPoints[j].y;
+      // Pulse wave
+      pulseTime += 0.05;
+
+      // Define content-safe zone (center area where text is displayed)
+      // Dots will fade out as they approach this zone
+      const contentLeft = canvas.width * 0.15;  // Left 15% is safe for dots
+      const contentRight = canvas.width * 0.85; // Right 15% is safe for dots
+      const contentTop = canvas.height * 0.08;  // Top 8% is safe for dots
+      const fadeWidth = 100; // Pixels over which dots fade out
+
+      // Draw background grid with interaction
+      ctx.fillStyle = baseDotColor;
+      for (let i = 0; i < cols; i++) {
+        for (let j = 0; j < rows; j++) {
+          const x = i * DOT_SPACING + (DOT_SPACING / 2);
+          const y = j * DOT_SPACING + (DOT_SPACING / 2);
+
+          // Calculate opacity based on distance from content zone
+          let zoneOpacity = 1;
+          
+          // Fade out dots as they enter the content area
+          if (x > contentLeft && x < contentRight && y > contentTop) {
+            // Inside content zone - calculate fade based on distance from edges
+            const distFromLeft = x - contentLeft;
+            const distFromRight = contentRight - x;
+            const distFromTop = y - contentTop;
+            
+            const minDistX = Math.min(distFromLeft, distFromRight);
+            const minDist = Math.min(minDistX, distFromTop);
+            
+            // Fade out completely within fadeWidth pixels of entering content zone
+            zoneOpacity = Math.max(0, 1 - (minDist / fadeWidth));
+            
+            // Skip drawing dots that are fully transparent
+            if (zoneOpacity < 0.01) continue;
+          }
+
+          // Mouse interaction
+          const dx = x - mouseX;
+          const dy = y - mouseY;
           const dist = Math.sqrt(dx * dx + dy * dy);
-          if (dist < 120) {
-            ctx.moveTo(rotatedPoints[i].x, rotatedPoints[i].y);
-            ctx.lineTo(rotatedPoints[j].x, rotatedPoints[j].y);
+
+          let scale = 1;
+          let alpha = 1;
+
+          // Mouse ripple
+          if (dist < 150) {
+            scale = 1 + (150 - dist) / 150; // Scale up to 2x
+            alpha = 1 + (150 - dist) / 100;
+          }
+
+          // Global pulse wave
+          const wave = Math.sin(x * 0.01 + y * 0.01 + pulseTime) * 0.5 + 0.5;
+          if (wave > 0.8) {
+            scale += 0.2;
+            alpha += 0.2;
           }
+
+          ctx.globalAlpha = Math.min(alpha, 0.5) * zoneOpacity; // Apply zone fade
+          ctx.beginPath();
+          ctx.arc(x, y, DOT_RADIUS * scale, 0, Math.PI * 2);
+          ctx.fill();
         }
       }
-      ctx.stroke();
+      ctx.globalAlpha = 1;
+
+      // Update and draw entities
+      if (timestamp - lastSpawnTime > 1500) { // Slightly faster spawn
+        spawnDocument();
+        lastSpawnTime = timestamp;
+      }
+
+      documents = documents.filter(doc => doc.state !== 'fading' || doc.opacity > 0.01);
+
+      documents.forEach(doc => {
+        if (doc.state === 'forming') {
+          doc.opacity += 0.03;
+          if (doc.opacity >= 1) {
+            doc.opacity = 1;
+            doc.state = 'flipping';
+          }
+        } else if (doc.state === 'flipping') {
+          doc.flipProgress += 0.03;
+          if (doc.flipProgress >= Math.PI) {
+            doc.state = 'fading';
+          }
+        } else if (doc.state === 'fading') {
+          doc.opacity -= 0.03;
+        }
+
+        const centerX = doc.gridX + 3; // Approx center
+
+        ctx.fillStyle = activeDotColor;
+
+        doc.shape.points.forEach(pt => {
+          const gx = doc.gridX + pt.x;
+          const gy = doc.gridY + pt.y;
+
+          let screenX = gx * DOT_SPACING + (DOT_SPACING / 2);
+          const screenY = gy * DOT_SPACING + (DOT_SPACING / 2);
+
+          if (doc.state === 'flipping' || doc.state === 'fading') {
+            const docCenterScreenX = centerX * DOT_SPACING + (DOT_SPACING / 2);
+            const relativeX = screenX - docCenterScreenX;
+            const scaleX = Math.cos(doc.flipProgress);
+            screenX = docCenterScreenX + (relativeX * scaleX);
+          }
 
-      // Draw points
-      rotatedPoints.forEach(p => {
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, 2 * p.scale, 0, Math.PI * 2);
-        ctx.fill();
+          ctx.globalAlpha = doc.opacity;
+          ctx.beginPath();
+          ctx.arc(screenX, screenY, DOT_RADIUS * 2.8, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.globalAlpha = 1.0;
+        });
       });
 
       animationFrameId = requestAnimationFrame(draw);
     };
 
-    draw();
+    animationFrameId = requestAnimationFrame(draw);
 
     return () => {
       window.removeEventListener('resize', resize);
+      window.removeEventListener('mousemove', handleMouseMove);
       cancelAnimationFrame(animationFrameId);
     };
   }, [theme]);
 
   return (
-    <canvas 
-      ref={canvasRef} 
-      className="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none transition-opacity duration-1000 opacity-20" 
+    <canvas
+      ref={canvasRef}
+      className="fixed top-0 left-0 w-full h-full -z-10 pointer-events-none"
     />
   );
 };

components/BionicText.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo, ReactElement } from 'react';
+import { TechnicalTerm } from '../types';
+
+interface Props {
+  text: string;
+  bionicEnabled?: boolean;
+  highlightTerms?: TechnicalTerm[];
+  currentTTSWord?: number; // Index of word being spoken for TTS highlighting
+}
+
+// Color palette for consistent term highlighting
+const TERM_COLORS = [
+  'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-200',
+  'bg-purple-100 dark:bg-purple-900/40 text-purple-800 dark:text-purple-200',
+  'bg-emerald-100 dark:bg-emerald-900/40 text-emerald-800 dark:text-emerald-200',
+  'bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-200',
+  'bg-rose-100 dark:bg-rose-900/40 text-rose-800 dark:text-rose-200',
+  'bg-cyan-100 dark:bg-cyan-900/40 text-cyan-800 dark:text-cyan-200',
+  'bg-indigo-100 dark:bg-indigo-900/40 text-indigo-800 dark:text-indigo-200',
+  'bg-teal-100 dark:bg-teal-900/40 text-teal-800 dark:text-teal-200',
+];
+
+/**
+ * Apply Bionic Reading formatting to a word
+ * Bold the first portion of each word based on length
+ */
+const applyBionicReading = (word: string): ReactElement => {
+  if (word.length <= 1) return <>{word}</>;
+  
+  // Calculate how many letters to bold
+  // Short words (1-3): 1 letter
+  // Medium words (4-6): 2 letters
+  // Longer words (7+): ~40% of the word
+  let boldCount: number;
+  if (word.length <= 3) {
+    boldCount = 1;
+  } else if (word.length <= 6) {
+    boldCount = 2;
+  } else {
+    boldCount = Math.ceil(word.length * 0.4);
+  }
+  
+  const boldPart = word.slice(0, boldCount);
+  const normalPart = word.slice(boldCount);
+  
+  return (
+    <>
+      <span className="font-bold">{boldPart}</span>
+      <span className="font-normal opacity-80">{normalPart}</span>
+    </>
+  );
+};
+
+/**
+ * Check if a word matches a technical term (case-insensitive)
+ */
+const findMatchingTerm = (
+  word: string, 
+  terms: TechnicalTerm[]
+): { term: TechnicalTerm; colorClass: string } | null => {
+  const cleanWord = word.toLowerCase().replace(/[^a-z0-9]/g, '');
+  
+  for (let i = 0; i < terms.length; i++) {
+    const termLower = terms[i].term.toLowerCase();
+    if (cleanWord === termLower || cleanWord.includes(termLower)) {
+      return {
+        term: terms[i],
+        colorClass: terms[i].highlightColor || TERM_COLORS[i % TERM_COLORS.length]
+      };
+    }
+  }
+  return null;
+};
+
+const BionicText: React.FC<Props> = ({ 
+  text, 
+  bionicEnabled = false, 
+  highlightTerms = [],
+  currentTTSWord 
+}) => {
+  const processedContent = useMemo(() => {
+    // Split text into words while preserving whitespace and punctuation
+    const words = text.split(/(\s+)/);
+    let wordIndex = 0;
+    
+    return words.map((segment, idx) => {
+      // If it's whitespace, just return it
+      if (/^\s+$/.test(segment)) {
+        return <span key={idx}>{segment}</span>;
+      }
+      
+      const currentWordIdx = wordIndex;
+      wordIndex++;
+      
+      // Check if this word is currently being spoken (TTS)
+      const isTTSActive = currentTTSWord !== undefined && currentWordIdx === currentTTSWord;
+      
+      // Check if this word matches a technical term
+      const matchingTerm = highlightTerms.length > 0 
+        ? findMatchingTerm(segment, highlightTerms) 
+        : null;
+      
+      // Base styling
+      let className = '';
+      let content: ReactElement | string = segment;
+      
+      // Apply TTS highlighting (karaoke style)
+      if (isTTSActive) {
+        className = 'bg-brand-200 dark:bg-brand-700 px-1 rounded transition-colors duration-150';
+      }
+      
+      // Apply term highlighting
+      if (matchingTerm) {
+        className = `${matchingTerm.colorClass} px-1 py-0.5 rounded cursor-help transition-colors`;
+      }
+      
+      // Apply bionic reading
+      if (bionicEnabled) {
+        content = applyBionicReading(segment);
+      }
+      
+      // If it's a technical term, wrap with tooltip
+      if (matchingTerm) {
+        return (
+          <span 
+            key={idx}
+            className={`inline-block ${className} group relative`}
+            title={matchingTerm.term.definition}
+          >
+            {content}
+            {/* Inline tooltip on hover */}
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap max-w-xs z-50 shadow-lg">
+              <span className="font-bold">{matchingTerm.term.term}:</span>{' '}
+              {matchingTerm.term.definition}
+            </span>
+          </span>
+        );
+      }
+      
+      return (
+        <span key={idx} className={className}>
+          {content}
+        </span>
+      );
+    });
+  }, [text, bionicEnabled, highlightTerms, currentTTSWord]);
+
+  return <span className="bionic-text">{processedContent}</span>;
+};
+
+/**
+ * Hook for processing markdown content with bionic reading
+ */
+export const useBionicMarkdown = (content: string, enabled: boolean): string => {
+  return useMemo(() => {
+    if (!enabled) return content;
+    
+    // Process markdown while preserving syntax
+    // We'll bold the first letters of words that aren't part of markdown syntax
+    return content.replace(
+      /(?<![#*_`\[\]])(\b\w{2,}\b)(?![#*_`\[\]])/g,
+      (match) => {
+        const boldCount = match.length <= 3 ? 1 : match.length <= 6 ? 2 : Math.ceil(match.length * 0.4);
+        return `**${match.slice(0, boldCount)}**${match.slice(boldCount)}`;
+      }
+    );
+  }, [content, enabled]);
+};
+
+export default BionicText;

components/BlogSection.tsx

@@ -1,17 +1,21 @@
 import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
-import { BlogSection as BlogSectionType } from '../types';
+import { BlogSection as BlogSectionType, ReadingPreferences } from '../types';
 import MermaidDiagram from './MermaidDiagram';
-import InteractiveChart from './InteractiveChart';
+import InteractiveChartPlayable from './InteractiveChartPlayable';
 import EquationBlock from './EquationBlock';
 import Collapsible from './Collapsible';
 import Tooltip from './Tooltip';
-import { Info, Lightbulb, AlertTriangle, BookOpen, CheckCircle, XCircle, Shield, ChevronDown, Wrench } from 'lucide-react';
+import ProgressiveContent from './ProgressiveContent';
+import TextToSpeech from './TextToSpeech';
+import BionicText from './BionicText';
+import { Info, Lightbulb, AlertTriangle, BookOpen, CheckCircle, XCircle, Shield, ChevronDown, Wrench, Volume2, Zap, Layers } from 'lucide-react';
 
 interface Props {
   section: BlogSectionType;
   theme: 'light' | 'dark';
   index: number;
+  readingPreferences?: ReadingPreferences;
 }
 
 // Validation Badge Component
@@ -116,7 +120,10 @@ const ValidationBadge: React.FC<{ section: BlogSectionType }> = ({ section }) =>
   );
 };
 
-const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
+const BlogSectionComponent: React.FC<Props> = ({ section, theme, index, readingPreferences }) => {
+  const [ttsWordIndex, setTtsWordIndex] = useState<number | undefined>(undefined);
+  const [isTtsPlaying, setIsTtsPlaying] = useState(false);
+  
   const getMarginNoteIcon = (icon?: 'info' | 'warning' | 'tip' | 'note') => {
     switch (icon) {
       case 'warning':
@@ -132,18 +139,73 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
 
   // Apply tooltips to content
   const renderContent = () => {
+    // Get the content to display based on ELI5 mode
+    const displayContent = readingPreferences?.eli5Mode && section.layers?.eli5Content 
+      ? section.layers.eli5Content 
+      : section.content;
+
+    // Apply bionic reading if enabled
+    const processText = (text: string) => {
+      if (!readingPreferences?.bionicReading) return text;
+      
+      // Apply bionic reading: bold first portion of each word
+      return text.replace(/\b(\w{2,})\b/g, (match) => {
+        const boldCount = match.length <= 3 ? 1 : match.length <= 6 ? 2 : Math.ceil(match.length * 0.4);
+        return `**${match.slice(0, boldCount)}**${match.slice(boldCount)}`;
+      });
+    };
+
+    const processedContent = processText(displayContent);
+
+    // If we have progressive disclosure layers, show them first
+    if (section.layers) {
+      return (
+        <div className="space-y-8">
+          <ProgressiveContent 
+            layers={section.layers}
+            eli5Mode={readingPreferences?.eli5Mode}
+            showConfidenceBadges={true}
+          />
+          
+          {/* Technical Terms Legend */}
+          {section.technicalTerms && section.technicalTerms.length > 0 && readingPreferences?.highlightKeyTerms && (
+            <div className="mt-8 p-6 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800/50 dark:to-gray-900/30 rounded-2xl border border-gray-200 dark:border-gray-700">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="w-1 h-4 bg-brand-500 rounded-full"></div>
+                <h5 className="text-sm font-bold uppercase tracking-wider text-gray-600 dark:text-gray-400">
+                  Key Terms
+                </h5>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {section.technicalTerms.map((term, idx) => (
+                  <Tooltip key={idx} term={term.term} definition={term.definition}>
+                    <span className={`inline-flex items-center px-2.5 py-1 rounded-lg text-sm font-medium cursor-help transition-colors ${
+                      term.highlightColor || 'bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
+                    }`}>
+                      {term.term}
+                    </span>
+                  </Tooltip>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    // Fallback to regular markdown rendering
     if (!section.technicalTerms || section.technicalTerms.length === 0) {
-      return <ReactMarkdown>{section.content}</ReactMarkdown>;
+      return <ReactMarkdown>{processedContent}</ReactMarkdown>;
     }
 
     // For complex tooltip integration, we'll render ReactMarkdown
     // and let users hover on specially marked terms
     return (
       <div className="relative">
-        <ReactMarkdown>{section.content}</ReactMarkdown>
+        <ReactMarkdown>{processedContent}</ReactMarkdown>
         
         {/* Technical Terms Legend */}
-        {section.technicalTerms.length > 0 && (
+        {section.technicalTerms.length > 0 && readingPreferences?.highlightKeyTerms && (
           <div className="mt-8 p-6 bg-gradient-to-br from-gray-50 to-white dark:from-gray-800/50 dark:to-gray-900/30 rounded-2xl border border-gray-200 dark:border-gray-700">
             <div className="flex items-center gap-2 mb-4">
               <div className="w-1 h-4 bg-brand-500 rounded-full"></div>
@@ -186,8 +248,36 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
                   {section.title}
                 </h2>
                 <div className="h-1 w-24 bg-gradient-to-r from-brand-500 to-purple-500 rounded-full opacity-80" />
+                
+                {/* Quick info badges */}
+                <div className="flex flex-wrap items-center gap-2 mt-4">
+                  {section.layers && (
+                    <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 text-xs font-medium">
+                      <Layers size={12} />
+                      3-Layer View
+                    </span>
+                  )}
+                  {section.visualizationType && section.visualizationType !== 'none' && (
+                    <span className="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 text-xs font-medium">
+                      <Zap size={12} />
+                      Interactive
+                    </span>
+                  )}
+                </div>
               </div>
             </div>
+            
+            {/* Text-to-Speech Controls */}
+            {readingPreferences?.ttsEnabled && (
+              <div className="mt-6 pl-0 md:pl-[4.5rem]">
+                <TextToSpeech 
+                  text={section.content}
+                  sectionId={section.id}
+                  onWordChange={setTtsWordIndex}
+                  onPlayingChange={setIsTtsPlaying}
+                />
+              </div>
+            )}
           </header>
 
           {/* Content */}
@@ -233,7 +323,7 @@ const BlogSectionComponent: React.FC<Props> = ({ section, theme, index }) => {
                 )}
                 
                 {section.visualizationType === 'chart' && section.chartData && (
-                  <InteractiveChart data={section.chartData} theme={theme} />
+                  <InteractiveChartPlayable data={section.chartData} theme={theme} />
                 )}
                 
                 {section.visualizationType === 'equation' && section.visualizationData && (

components/BlogView.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { BlogSection as BlogSectionType, PaperStructure } from '../types';
+import { BlogSection as BlogSectionType, PaperStructure, ReadingPreferences } from '../types';
 import BlogSectionComponent from './BlogSection';
 import Sidebar from './Sidebar';
-import { Clock, BookOpen, FileText, Share2, Download, Sparkles, CheckCircle2, Loader2, AlertCircle, RefreshCw, RotateCcw } from 'lucide-react';
+import ReadingToolbar from './ReadingToolbar';
+import { Clock, BookOpen, FileText, Share2, Download, Sparkles, CheckCircle2, Loader2, AlertCircle, RefreshCw, RotateCcw, Zap, GraduationCap, Lightbulb } from 'lucide-react';
 
 // Loading placeholder for sections being generated
 const SectionLoadingPlaceholder: React.FC<{ 
@@ -164,8 +165,19 @@ interface Props {
   onRetrySection?: (sectionIndex: number) => Promise<void>;
   retryingSectionIndex?: number;
   contentRef?: React.RefObject<HTMLDivElement>;
+  readingPreferences?: ReadingPreferences;
+  onReadingPreferencesChange?: (prefs: ReadingPreferences) => void;
 }
 
+// Default reading preferences
+const defaultReadingPreferences: ReadingPreferences = {
+  bionicReading: false,
+  eli5Mode: false,
+  highlightKeyTerms: true,
+  ttsEnabled: false,
+  ttsSpeed: 1.0
+};
+
 const BlogView: React.FC<Props> = ({ 
   sections, 
   paperTitle, 
@@ -179,13 +191,20 @@ const BlogView: React.FC<Props> = ({
   sectionStatus = '',
   onRetrySection,
   retryingSectionIndex = -1,
-  contentRef
+  contentRef,
+  readingPreferences: externalPreferences,
+  onReadingPreferencesChange
 }) => {
   const [activeSection, setActiveSection] = useState<string>(sections[0]?.id || '');
   const [readProgress, setReadProgress] = useState(0);
+  const [internalPreferences, setInternalPreferences] = useState<ReadingPreferences>(defaultReadingPreferences);
   const internalContentRef = useRef<HTMLDivElement>(null);
   const effectiveContentRef = contentRef || internalContentRef;
 
+  // Use external or internal preferences
+  const readingPreferences = externalPreferences || internalPreferences;
+  const handlePreferencesChange = onReadingPreferencesChange || setInternalPreferences;
+
   // Calculate reading time (rough estimate: 200 words per minute)
   const completedSections = sections.filter(s => !s.isLoading && s.content);
   const totalWords = completedSections.reduce((acc, section) => {
@@ -399,6 +418,20 @@ const BlogView: React.FC<Props> = ({
                   </button>
                 </div>
               </div>
+
+              {/* ADHD-Friendly Reading Toolbar */}
+              <div className="mt-8 pt-6 border-t border-gray-100 dark:border-gray-800">
+                <div className="flex items-center gap-2 mb-3">
+                  <Sparkles size={14} className="text-brand-500" />
+                  <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                    Reading Mode
+                  </span>
+                </div>
+                <ReadingToolbar 
+                  preferences={readingPreferences}
+                  onPreferencesChange={handlePreferencesChange}
+                />
+              </div>
             </header>
           )}
 
@@ -446,6 +479,7 @@ const BlogView: React.FC<Props> = ({
                     section={section}
                     theme={theme}
                     index={index}
+                    readingPreferences={readingPreferences}
                   />
                 )}
               </div>

components/Collapsible.tsx

@@ -86,3 +86,4 @@ const Collapsible: React.FC<Props> = ({
 
 export default Collapsible;
 
+

components/EquationBlock.tsx

@@ -105,3 +105,4 @@ const EquationBlock: React.FC<Props> = ({ equation, label, inline = false }) =>
 
 export default EquationBlock;
 
+

components/InteractiveChart.tsx

@@ -333,3 +333,4 @@ const InteractiveChart: React.FC<Props> = ({ data, theme }) => {
 
 export default InteractiveChart;
 
+

components/InteractiveChartPlayable.tsx

@@ -0,0 +1,516 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { ChartData, SliderConfig } from '../types';
+import { Play, Pause, RotateCcw, Eye, EyeOff, Sliders, Info } from 'lucide-react';
+
+interface Props {
+  data: ChartData;
+  theme: 'light' | 'dark';
+}
+
+// Default colors palette
+const DEFAULT_COLORS = [
+  '#0ea5e9', // brand blue
+  '#8b5cf6', // purple
+  '#10b981', // emerald
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#84cc16', // lime
+];
+
+const InteractiveChartPlayable: React.FC<Props> = ({ data, theme }) => {
+  const isDark = theme === 'dark';
+  const colors = data.colors || DEFAULT_COLORS;
+  
+  // State for interactive features
+  const [sliderValues, setSliderValues] = useState<Record<string, number>>(() => {
+    const initial: Record<string, number> = {};
+    data.interactive?.sliderConfig?.forEach(config => {
+      initial[config.id] = config.defaultValue;
+    });
+    return initial;
+  });
+  
+  const [visibleDatasets, setVisibleDatasets] = useState<Set<string>>(() => {
+    return new Set(data.data.map(d => d.label));
+  });
+  
+  const [hoveredItem, setHoveredItem] = useState<number | null>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [showControls, setShowControls] = useState(true);
+
+  // Apply slider transformations to data
+  const transformedData = useMemo(() => {
+    if (!data.interactive?.enableSliders || !data.interactive.sliderConfig) {
+      return data.data;
+    }
+
+    return data.data.map(item => {
+      let newValue = item.value;
+      
+      data.interactive?.sliderConfig?.forEach(config => {
+        const sliderValue = sliderValues[config.id] || config.defaultValue;
+        
+        // Apply transformation based on the affected variable
+        if (config.affectsVariable === 'multiplier') {
+          newValue = item.value * sliderValue;
+        } else if (config.affectsVariable === 'offset') {
+          newValue = item.value + sliderValue;
+        } else if (config.affectsVariable === 'power') {
+          newValue = Math.pow(item.value, sliderValue);
+        }
+      });
+      
+      return { ...item, value: newValue };
+    });
+  }, [data.data, sliderValues, data.interactive]);
+
+  // Filter by visible datasets
+  const visibleData = useMemo(() => {
+    return transformedData.filter(item => visibleDatasets.has(item.label));
+  }, [transformedData, visibleDatasets]);
+
+  const maxValue = useMemo(() => {
+    return Math.max(...visibleData.map(d => d.value), 1);
+  }, [visibleData]);
+
+  const handleSliderChange = useCallback((sliderId: string, value: number) => {
+    setSliderValues(prev => ({ ...prev, [sliderId]: value }));
+  }, []);
+
+  const handleToggleDataset = useCallback((label: string) => {
+    setVisibleDatasets(prev => {
+      const next = new Set(prev);
+      if (next.has(label)) {
+        if (next.size > 1) next.delete(label);
+      } else {
+        next.add(label);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleReset = useCallback(() => {
+    setSliderValues(() => {
+      const initial: Record<string, number> = {};
+      data.interactive?.sliderConfig?.forEach(config => {
+        initial[config.id] = config.defaultValue;
+      });
+      return initial;
+    });
+    setVisibleDatasets(new Set(data.data.map(d => d.label)));
+  }, [data]);
+
+  const handleAnimate = useCallback(() => {
+    if (!data.interactive?.sliderConfig?.[0]) return;
+    
+    setIsAnimating(true);
+    const config = data.interactive.sliderConfig[0];
+    const steps = 20;
+    const stepSize = (config.max - config.min) / steps;
+    let currentStep = 0;
+    
+    const interval = setInterval(() => {
+      setSliderValues(prev => ({
+        ...prev,
+        [config.id]: config.min + (stepSize * currentStep)
+      }));
+      currentStep++;
+      
+      if (currentStep > steps) {
+        clearInterval(interval);
+        setIsAnimating(false);
+      }
+    }, 100);
+  }, [data.interactive]);
+
+  // Chart dimensions
+  const chartWidth = 400;
+  const chartHeight = 200;
+  const barWidth = Math.min(50, (chartWidth - 80) / Math.max(visibleData.length, 1) - 10);
+
+  const renderBarChart = () => (
+    <svg viewBox={`0 0 ${chartWidth} ${chartHeight + 60}`} className="w-full h-auto">
+      {/* Grid lines */}
+      {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => (
+        <g key={i}>
+          <text
+            x="30"
+            y={chartHeight - (ratio * chartHeight) + 5}
+            className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-500'}`}
+            textAnchor="end"
+          >
+            {Math.round(maxValue * ratio)}
+          </text>
+          <line
+            x1="40"
+            y1={chartHeight - (ratio * chartHeight)}
+            x2={chartWidth - 10}
+            y2={chartHeight - (ratio * chartHeight)}
+            className={isDark ? 'stroke-gray-700' : 'stroke-gray-200'}
+            strokeDasharray="4,4"
+          />
+        </g>
+      ))}
+      
+      {/* Bars with animation */}
+      {visibleData.map((item, index) => {
+        const barHeight = (item.value / maxValue) * chartHeight;
+        const x = 50 + index * ((chartWidth - 60) / Math.max(visibleData.length, 1));
+        const y = chartHeight - barHeight;
+        const isHovered = hoveredItem === index;
+        const originalIndex = data.data.findIndex(d => d.label === item.label);
+        
+        return (
+          <g 
+            key={item.label} 
+            className="cursor-pointer"
+            onMouseEnter={() => setHoveredItem(index)}
+            onMouseLeave={() => setHoveredItem(null)}
+          >
+            {/* Bar */}
+            <rect
+              x={x}
+              y={y}
+              width={barWidth}
+              height={barHeight}
+              fill={colors[originalIndex % colors.length]}
+              rx="4"
+              className={`
+                transition-all duration-300 ease-out
+                ${isHovered ? 'opacity-100' : 'opacity-85'}
+              `}
+              style={{
+                transform: isHovered ? 'scale(1.02)' : 'scale(1)',
+                transformOrigin: `${x + barWidth/2}px ${chartHeight}px`
+              }}
+            />
+            
+            {/* Highlight glow on hover */}
+            {isHovered && (
+              <rect
+                x={x - 2}
+                y={y - 2}
+                width={barWidth + 4}
+                height={barHeight + 4}
+                fill="none"
+                stroke={colors[originalIndex % colors.length]}
+                strokeWidth="2"
+                rx="6"
+                opacity="0.3"
+              />
+            )}
+            
+            {/* Value tooltip on hover */}
+            {isHovered && (
+              <g>
+                <rect
+                  x={x + barWidth/2 - 25}
+                  y={y - 35}
+                  width="50"
+                  height="24"
+                  rx="4"
+                  className={isDark ? 'fill-gray-800' : 'fill-gray-900'}
+                />
+                <text
+                  x={x + barWidth / 2}
+                  y={y - 18}
+                  textAnchor="middle"
+                  className="text-[12px] font-bold fill-white"
+                >
+                  {item.value.toFixed(1)}
+                </text>
+              </g>
+            )}
+            
+            {/* Label */}
+            <text
+              x={x + barWidth / 2}
+              y={chartHeight + 18}
+              textAnchor="middle"
+              className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-600'} ${isHovered ? 'font-bold' : ''}`}
+            >
+              {item.label.length > 10 ? item.label.substring(0, 10) + '...' : item.label}
+            </text>
+          </g>
+        );
+      })}
+    </svg>
+  );
+
+  const renderLineChart = () => {
+    const points = visibleData.map((item, index) => {
+      const x = 50 + index * ((chartWidth - 80) / (Math.max(visibleData.length, 1) - 1 || 1));
+      const y = chartHeight - (item.value / maxValue) * chartHeight;
+      return { x, y, ...item };
+    });
+
+    const pathD = points
+      .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`)
+      .join(' ');
+
+    const areaD = `${pathD} L ${points[points.length - 1]?.x || 0} ${chartHeight} L ${points[0]?.x || 0} ${chartHeight} Z`;
+
+    return (
+      <svg viewBox={`0 0 ${chartWidth} ${chartHeight + 60}`} className="w-full h-auto">
+        {/* Grid */}
+        {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => (
+          <g key={i}>
+            <text
+              x="30"
+              y={chartHeight - (ratio * chartHeight) + 5}
+              className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-500'}`}
+              textAnchor="end"
+            >
+              {Math.round(maxValue * ratio)}
+            </text>
+            <line
+              x1="40"
+              y1={chartHeight - (ratio * chartHeight)}
+              x2={chartWidth - 10}
+              y2={chartHeight - (ratio * chartHeight)}
+              className={isDark ? 'stroke-gray-700' : 'stroke-gray-200'}
+              strokeDasharray="4,4"
+            />
+          </g>
+        ))}
+
+        {/* Area fill */}
+        <path
+          d={areaD}
+          fill={colors[0]}
+          fillOpacity="0.15"
+          className="transition-all duration-300"
+        />
+
+        {/* Line */}
+        <path
+          d={pathD}
+          fill="none"
+          stroke={colors[0]}
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="transition-all duration-300"
+        />
+
+        {/* Interactive points */}
+        {points.map((point, index) => (
+          <g 
+            key={index}
+            className="cursor-pointer"
+            onMouseEnter={() => setHoveredItem(index)}
+            onMouseLeave={() => setHoveredItem(null)}
+          >
+            {/* Larger hit area */}
+            <circle
+              cx={point.x}
+              cy={point.y}
+              r="15"
+              fill="transparent"
+            />
+            
+            {/* Visible point */}
+            <circle
+              cx={point.x}
+              cy={point.y}
+              r={hoveredItem === index ? 8 : 5}
+              fill={colors[0]}
+              className="transition-all duration-200"
+            />
+            <circle
+              cx={point.x}
+              cy={point.y}
+              r={hoveredItem === index ? 4 : 2}
+              fill={isDark ? '#1e293b' : 'white'}
+            />
+            
+            {/* Tooltip */}
+            {hoveredItem === index && (
+              <g>
+                <rect
+                  x={point.x - 30}
+                  y={point.y - 40}
+                  width="60"
+                  height="28"
+                  rx="4"
+                  className={isDark ? 'fill-gray-800' : 'fill-gray-900'}
+                />
+                <text
+                  x={point.x}
+                  y={point.y - 22}
+                  textAnchor="middle"
+                  className="text-[11px] font-bold fill-white"
+                >
+                  {point.value.toFixed(1)}
+                </text>
+              </g>
+            )}
+            
+            {/* X-axis label */}
+            <text
+              x={point.x}
+              y={chartHeight + 18}
+              textAnchor="middle"
+              className={`text-[10px] ${isDark ? 'fill-gray-400' : 'fill-gray-600'}`}
+            >
+              {point.label.length > 8 ? point.label.substring(0, 8) + '..' : point.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Interactive Controls Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Sliders size={16} className="text-brand-500" />
+          <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            Interactive Chart
+          </span>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          {data.interactive?.enableSliders && (
+            <button
+              onClick={handleAnimate}
+              disabled={isAnimating}
+              className={`
+                flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-colors
+                ${isAnimating 
+                  ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400' 
+                  : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }
+              `}
+            >
+              {isAnimating ? <Pause size={12} /> : <Play size={12} />}
+              {isAnimating ? 'Playing' : 'Animate'}
+            </button>
+          )}
+          
+          <button
+            onClick={handleReset}
+            className="flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+          >
+            <RotateCcw size={12} />
+            Reset
+          </button>
+          
+          <button
+            onClick={() => setShowControls(!showControls)}
+            className={`
+              p-1.5 rounded-lg transition-colors
+              ${showControls 
+                ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400' 
+                : 'bg-gray-100 dark:bg-gray-800 text-gray-500'
+              }
+            `}
+          >
+            {showControls ? <Eye size={14} /> : <EyeOff size={14} />}
+          </button>
+        </div>
+      </div>
+
+      {/* Title */}
+      {data.title && (
+        <h4 className="text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
+          {data.title}
+        </h4>
+      )}
+
+      {/* Chart */}
+      <div className="relative bg-white dark:bg-gray-900 rounded-xl p-4">
+        {data.type === 'line' || data.type === 'area' ? renderLineChart() : renderBarChart()}
+      </div>
+
+      {/* Interactive Controls */}
+      {showControls && (
+        <div className="space-y-4 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-gray-200 dark:border-gray-700">
+          
+          {/* Sliders */}
+          {data.interactive?.enableSliders && data.interactive.sliderConfig?.map((config) => (
+            <div key={config.id} className="space-y-2">
+              <div className="flex items-center justify-between">
+                <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+                  {config.label}
+                </label>
+                <span className="text-sm font-mono font-bold text-brand-600 dark:text-brand-400">
+                  {sliderValues[config.id]?.toFixed(2) || config.defaultValue.toFixed(2)}
+                </span>
+              </div>
+              <input
+                type="range"
+                min={config.min}
+                max={config.max}
+                step={config.step}
+                value={sliderValues[config.id] || config.defaultValue}
+                onChange={(e) => handleSliderChange(config.id, parseFloat(e.target.value))}
+                className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-brand-500"
+              />
+              <div className="flex justify-between text-[10px] text-gray-400">
+                <span>{config.min}</span>
+                <span>{config.max}</span>
+              </div>
+            </div>
+          ))}
+
+          {/* Dataset Toggles */}
+          {data.interactive?.enableToggles && (
+            <div className="space-y-2">
+              <label className="text-xs font-medium text-gray-700 dark:text-gray-300">
+                Toggle Datasets
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {data.data.map((item, idx) => (
+                  <button
+                    key={item.label}
+                    onClick={() => handleToggleDataset(item.label)}
+                    className={`
+                      flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-medium transition-all
+                      ${visibleDatasets.has(item.label)
+                        ? 'bg-white dark:bg-gray-700 shadow-sm border border-gray-200 dark:border-gray-600'
+                        : 'bg-gray-100 dark:bg-gray-800 opacity-50'
+                      }
+                    `}
+                  >
+                    <span
+                      className="w-3 h-3 rounded-full"
+                      style={{ backgroundColor: colors[idx % colors.length] }}
+                    />
+                    <span className={visibleDatasets.has(item.label) ? '' : 'line-through'}>
+                      {item.label}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Info tooltip */}
+          <div className="flex items-start gap-2 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300">
+            <Info size={14} className="flex-shrink-0 mt-0.5" />
+            <p className="text-xs">
+              <span className="font-medium">Tip:</span> Hover over data points for details. 
+              {data.interactive?.enableSliders && ' Use the slider to see how changes affect the visualization.'}
+              {data.interactive?.enableToggles && ' Toggle datasets on/off to compare.'}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* Axis Labels */}
+      {(data.xAxis || data.yAxis) && (
+        <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400 italic">
+          {data.yAxis && <span>↑ {data.yAxis}</span>}
+          {data.xAxis && <span>{data.xAxis} →</span>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InteractiveChartPlayable;

components/ProgressiveContent.tsx

@@ -0,0 +1,289 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { ChevronDown, ChevronUp, Layers, Zap, List, FileText, Quote, Sparkles } from 'lucide-react';
+import { ContentLayers, ConfidenceLevel } from '../types';
+
+interface Props {
+  layers: ContentLayers;
+  eli5Mode?: boolean;
+  showConfidenceBadges?: boolean;
+}
+
+type LayerLevel = 1 | 2 | 3;
+
+const layerInfo = {
+  1: { 
+    name: 'TL;DR', 
+    icon: Zap, 
+    description: 'Core thesis in one sentence',
+    color: 'brand'
+  },
+  2: { 
+    name: 'Key Takeaways', 
+    icon: List, 
+    description: '3-5 essential points',
+    color: 'purple'
+  },
+  3: { 
+    name: 'Full Details', 
+    icon: FileText, 
+    description: 'Complete explanation',
+    color: 'emerald'
+  }
+};
+
+const ProgressiveContent: React.FC<Props> = ({ 
+  layers, 
+  eli5Mode = false,
+  showConfidenceBadges = true 
+}) => {
+  const [expandedLayer, setExpandedLayer] = useState<LayerLevel>(1);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const handleLayerChange = (level: LayerLevel) => {
+    if (level === expandedLayer) return;
+    setIsAnimating(true);
+    setTimeout(() => {
+      setExpandedLayer(level);
+      setIsAnimating(false);
+    }, 150);
+  };
+
+  const content = eli5Mode && layers.eli5Content ? layers.eli5Content : layers.detailed;
+
+  return (
+    <div className="space-y-4">
+      {/* Layer Selector Pills */}
+      <div className="flex flex-wrap items-center gap-2 mb-6">
+        <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mr-2">
+          Depth:
+        </span>
+        {([1, 2, 3] as LayerLevel[]).map((level) => {
+          const info = layerInfo[level];
+          const Icon = info.icon;
+          const isActive = expandedLayer === level;
+          
+          return (
+            <button
+              key={level}
+              onClick={() => handleLayerChange(level)}
+              className={`
+                flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-300
+                ${isActive 
+                  ? `bg-${info.color}-100 dark:bg-${info.color}-900/30 text-${info.color}-700 dark:text-${info.color}-300 ring-2 ring-${info.color}-500/30 shadow-sm` 
+                  : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+                }
+              `}
+              title={info.description}
+            >
+              <Icon size={14} />
+              <span>{info.name}</span>
+              {isActive && level < 3 && (
+                <span className="text-[10px] opacity-60 ml-1">
+                  Click {level + 1} for more
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content Display */}
+      <div className={`transition-all duration-300 ${isAnimating ? 'opacity-0 scale-98' : 'opacity-100 scale-100'}`}>
+        
+        {/* Layer 1: Thesis */}
+        {expandedLayer >= 1 && (
+          <div className="mb-6">
+            <div className={`
+              relative p-6 rounded-2xl border-2 transition-all duration-500
+              ${expandedLayer === 1 
+                ? 'bg-brand-50 dark:bg-brand-900/20 border-brand-200 dark:border-brand-800 shadow-lg shadow-brand-500/10' 
+                : 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
+              }
+            `}>
+              <div className="flex items-start gap-4">
+                <div className={`
+                  flex-shrink-0 p-2 rounded-xl
+                  ${expandedLayer === 1 
+                    ? 'bg-brand-500 text-white' 
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
+                  }
+                `}>
+                  <Zap size={20} />
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-2">
+                    <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Core Thesis
+                    </span>
+                    {showConfidenceBadges && (
+                      <ConfidenceBadge level="synthesis" />
+                    )}
+                  </div>
+                  <p className={`
+                    text-lg md:text-xl font-medium leading-relaxed
+                    ${expandedLayer === 1 
+                      ? 'text-gray-900 dark:text-white' 
+                      : 'text-gray-600 dark:text-gray-400'
+                    }
+                  `}>
+                    {layers.thesis}
+                  </p>
+                </div>
+              </div>
+              
+              {expandedLayer === 1 && (
+                <button
+                  onClick={() => handleLayerChange(2)}
+                  className="absolute -bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1 px-3 py-1 rounded-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm"
+                >
+                  <span>Want more detail?</span>
+                  <ChevronDown size={14} />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Layer 2: Key Takeaways */}
+        {expandedLayer >= 2 && (
+          <div className={`mb-6 transition-all duration-500 ${expandedLayer >= 2 ? 'animate-in fade-in slide-in-from-top-4' : ''}`}>
+            <div className={`
+              relative p-6 rounded-2xl border-2 transition-all duration-500
+              ${expandedLayer === 2 
+                ? 'bg-purple-50 dark:bg-purple-900/20 border-purple-200 dark:border-purple-800 shadow-lg shadow-purple-500/10' 
+                : 'bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700'
+              }
+            `}>
+              <div className="flex items-start gap-4">
+                <div className={`
+                  flex-shrink-0 p-2 rounded-xl
+                  ${expandedLayer === 2 
+                    ? 'bg-purple-500 text-white' 
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
+                  }
+                `}>
+                  <List size={20} />
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-3">
+                    <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                      Key Takeaways
+                    </span>
+                  </div>
+                  <ul className="space-y-3">
+                    {layers.takeaways.map((takeaway, idx) => (
+                      <li 
+                        key={idx}
+                        className={`
+                          flex items-start gap-3 animate-in fade-in slide-in-from-left-2
+                          ${expandedLayer === 2 
+                            ? 'text-gray-800 dark:text-gray-200' 
+                            : 'text-gray-600 dark:text-gray-400'
+                          }
+                        `}
+                        style={{ animationDelay: `${idx * 100}ms` }}
+                      >
+                        <span className={`
+                          flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold mt-0.5
+                          ${expandedLayer === 2 
+                            ? 'bg-purple-200 dark:bg-purple-800 text-purple-700 dark:text-purple-300' 
+                            : 'bg-gray-200 dark:bg-gray-700 text-gray-500'
+                          }
+                        `}>
+                          {idx + 1}
+                        </span>
+                        <span className="font-medium">{takeaway}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+              
+              {expandedLayer === 2 && (
+                <button
+                  onClick={() => handleLayerChange(3)}
+                  className="absolute -bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1 px-3 py-1 rounded-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm"
+                >
+                  <span>Read full details</span>
+                  <ChevronDown size={14} />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Layer 3: Full Details */}
+        {expandedLayer === 3 && (
+          <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+            <div className="relative p-6 rounded-2xl bg-emerald-50 dark:bg-emerald-900/20 border-2 border-emerald-200 dark:border-emerald-800">
+              <div className="flex items-center gap-2 mb-4">
+                <div className="p-2 rounded-xl bg-emerald-500 text-white">
+                  <FileText size={20} />
+                </div>
+                <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+                  Full Explanation
+                </span>
+                {eli5Mode && layers.eli5Content && (
+                  <span className="ml-2 px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 text-xs font-medium">
+                    Simple Mode
+                  </span>
+                )}
+              </div>
+              
+              <div className="prose prose-lg dark:prose-invert max-w-none">
+                <ReactMarkdown>{content}</ReactMarkdown>
+              </div>
+              
+              <button
+                onClick={() => handleLayerChange(1)}
+                className="mt-6 flex items-center gap-1 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+              >
+                <ChevronUp size={14} />
+                <span>Collapse to summary</span>
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// Confidence Badge Component
+const ConfidenceBadge: React.FC<{ level: ConfidenceLevel }> = ({ level }) => {
+  const config = {
+    'direct-quote': {
+      label: 'Direct Quote',
+      color: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300 border-green-200 dark:border-green-800',
+      icon: Quote
+    },
+    'paraphrase': {
+      label: 'Paraphrased',
+      color: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800',
+      icon: Sparkles
+    },
+    'synthesis': {
+      label: 'Synthesized',
+      color: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800',
+      icon: Layers
+    },
+    'interpretation': {
+      label: 'AI Interpretation',
+      color: 'bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800',
+      icon: Sparkles
+    }
+  };
+
+  const { label, color, icon: Icon } = config[level];
+
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium border ${color}`}>
+      <Icon size={10} />
+      {label}
+    </span>
+  );
+};
+
+export { ConfidenceBadge };
+export default ProgressiveContent;

components/ReadingToolbar.tsx

@@ -0,0 +1,364 @@
+import React, { useState } from 'react';
+import { 
+  BookOpen, 
+  Sparkles, 
+  Type, 
+  Volume2, 
+  VolumeX, 
+  Settings, 
+  X,
+  Zap,
+  GraduationCap,
+  Eye,
+  Lightbulb
+} from 'lucide-react';
+import { ReadingPreferences } from '../types';
+
+interface Props {
+  preferences: ReadingPreferences;
+  onPreferencesChange: (preferences: ReadingPreferences) => void;
+  compact?: boolean;
+}
+
+const ReadingToolbar: React.FC<Props> = ({ 
+  preferences, 
+  onPreferencesChange,
+  compact = false 
+}) => {
+  const [showPanel, setShowPanel] = useState(false);
+
+  const togglePreference = (key: keyof ReadingPreferences) => {
+    if (typeof preferences[key] === 'boolean') {
+      onPreferencesChange({
+        ...preferences,
+        [key]: !preferences[key]
+      });
+    }
+  };
+
+  const handleSpeedChange = (speed: number) => {
+    onPreferencesChange({
+      ...preferences,
+      ttsSpeed: speed
+    });
+  };
+
+  if (compact) {
+    return (
+      <div className="flex items-center gap-1">
+        {/* ELI5 Toggle */}
+        <button
+          onClick={() => togglePreference('eli5Mode')}
+          className={`
+            p-2 rounded-lg transition-all duration-200
+            ${preferences.eli5Mode 
+              ? 'bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 ring-2 ring-amber-500/30' 
+              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }
+          `}
+          title={preferences.eli5Mode ? 'Switch to Academic mode' : 'Switch to Simple mode'}
+        >
+          {preferences.eli5Mode ? <Lightbulb size={18} /> : <GraduationCap size={18} />}
+        </button>
+
+        {/* Bionic Reading Toggle */}
+        <button
+          onClick={() => togglePreference('bionicReading')}
+          className={`
+            p-2 rounded-lg transition-all duration-200
+            ${preferences.bionicReading 
+              ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 ring-2 ring-emerald-500/30' 
+              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }
+          `}
+          title={preferences.bionicReading ? 'Disable Bionic Reading' : 'Enable Bionic Reading'}
+        >
+          <Type size={18} />
+        </button>
+
+        {/* TTS Toggle */}
+        <button
+          onClick={() => togglePreference('ttsEnabled')}
+          className={`
+            p-2 rounded-lg transition-all duration-200
+            ${preferences.ttsEnabled 
+              ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400 ring-2 ring-brand-500/30' 
+              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }
+          `}
+          title={preferences.ttsEnabled ? 'Hide audio controls' : 'Show audio controls'}
+        >
+          {preferences.ttsEnabled ? <Volume2 size={18} /> : <VolumeX size={18} />}
+        </button>
+
+        {/* Settings */}
+        <button
+          onClick={() => setShowPanel(!showPanel)}
+          className={`
+            p-2 rounded-lg transition-all duration-200
+            ${showPanel 
+              ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400' 
+              : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }
+          `}
+        >
+          <Settings size={18} />
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative">
+      {/* Main Toolbar */}
+      <div className="flex items-center gap-3 p-3 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg">
+        <div className="flex items-center gap-2 pr-3 border-r border-gray-200 dark:border-gray-700">
+          <Eye size={16} className="text-gray-400" />
+          <span className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            Reading Mode
+          </span>
+        </div>
+
+        {/* ELI5 Toggle Button */}
+        <button
+          onClick={() => togglePreference('eli5Mode')}
+          className={`
+            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
+            ${preferences.eli5Mode 
+              ? 'bg-gradient-to-r from-amber-500 to-orange-500 text-white shadow-lg shadow-amber-500/30' 
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+            }
+          `}
+        >
+          {preferences.eli5Mode ? (
+            <>
+              <Lightbulb size={16} />
+              <span>Simple</span>
+            </>
+          ) : (
+            <>
+              <GraduationCap size={16} />
+              <span>Academic</span>
+            </>
+          )}
+        </button>
+
+        {/* Bionic Reading Toggle */}
+        <button
+          onClick={() => togglePreference('bionicReading')}
+          className={`
+            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
+            ${preferences.bionicReading 
+              ? 'bg-gradient-to-r from-emerald-500 to-teal-500 text-white shadow-lg shadow-emerald-500/30' 
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+            }
+          `}
+        >
+          <Type size={16} />
+          <span className={preferences.bionicReading ? '' : 'hidden sm:inline'}>
+            {preferences.bionicReading ? 'Bio**nic** On' : 'Bionic'}
+          </span>
+        </button>
+
+        {/* Key Terms Highlight Toggle */}
+        <button
+          onClick={() => togglePreference('highlightKeyTerms')}
+          className={`
+            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
+            ${preferences.highlightKeyTerms 
+              ? 'bg-gradient-to-r from-purple-500 to-indigo-500 text-white shadow-lg shadow-purple-500/30' 
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+            }
+          `}
+        >
+          <Sparkles size={16} />
+          <span className="hidden sm:inline">Highlight</span>
+        </button>
+
+        {/* TTS Toggle */}
+        <button
+          onClick={() => togglePreference('ttsEnabled')}
+          className={`
+            flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-300
+            ${preferences.ttsEnabled 
+              ? 'bg-gradient-to-r from-brand-500 to-blue-500 text-white shadow-lg shadow-brand-500/30' 
+              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
+            }
+          `}
+        >
+          {preferences.ttsEnabled ? <Volume2 size={16} /> : <VolumeX size={16} />}
+          <span className="hidden sm:inline">Audio</span>
+        </button>
+
+        {/* Settings */}
+        <button
+          onClick={() => setShowPanel(!showPanel)}
+          className={`
+            p-2 rounded-xl transition-all duration-200 ml-auto
+            ${showPanel 
+              ? 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200' 
+              : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+            }
+          `}
+        >
+          <Settings size={18} />
+        </button>
+      </div>
+
+      {/* Settings Panel */}
+      {showPanel && (
+        <div className="absolute top-full left-0 right-0 mt-2 p-4 rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+          <div className="flex items-center justify-between mb-4">
+            <h4 className="text-sm font-bold text-gray-900 dark:text-white">Reading Preferences</h4>
+            <button
+              onClick={() => setShowPanel(false)}
+              className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <X size={14} />
+            </button>
+          </div>
+
+          <div className="space-y-6">
+            {/* Language Mode Section */}
+            <div>
+              <label className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 block">
+                Language Complexity
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                <button
+                  onClick={() => onPreferencesChange({ ...preferences, eli5Mode: true })}
+                  className={`
+                    p-3 rounded-xl border-2 transition-all
+                    ${preferences.eli5Mode 
+                      ? 'border-amber-500 bg-amber-50 dark:bg-amber-900/20' 
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                    }
+                  `}
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <Lightbulb size={16} className={preferences.eli5Mode ? 'text-amber-500' : 'text-gray-400'} />
+                    <span className={`font-medium text-sm ${preferences.eli5Mode ? 'text-amber-700 dark:text-amber-300' : 'text-gray-600 dark:text-gray-400'}`}>
+                      Simple
+                    </span>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    Everyday language with analogies
+                  </p>
+                </button>
+                <button
+                  onClick={() => onPreferencesChange({ ...preferences, eli5Mode: false })}
+                  className={`
+                    p-3 rounded-xl border-2 transition-all
+                    ${!preferences.eli5Mode 
+                      ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20' 
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
+                    }
+                  `}
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <GraduationCap size={16} className={!preferences.eli5Mode ? 'text-brand-500' : 'text-gray-400'} />
+                    <span className={`font-medium text-sm ${!preferences.eli5Mode ? 'text-brand-700 dark:text-brand-300' : 'text-gray-600 dark:text-gray-400'}`}>
+                      Academic
+                    </span>
+                  </div>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    Technical terminology
+                  </p>
+                </button>
+              </div>
+            </div>
+
+            {/* Typography Section */}
+            <div>
+              <label className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 block">
+                Typography Aids
+              </label>
+              <div className="space-y-2">
+                <label className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-gray-700/50 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <div className="flex items-center gap-3">
+                    <Type size={18} className={preferences.bionicReading ? 'text-emerald-500' : 'text-gray-400'} />
+                    <div>
+                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">Bionic Reading</span>
+                      <p className="text-xs text-gray-500">Bo**ld** fi**rst** le**tters**</p>
+                    </div>
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={preferences.bionicReading}
+                    onChange={() => togglePreference('bionicReading')}
+                    className="w-5 h-5 rounded border-gray-300 text-emerald-500 focus:ring-emerald-500"
+                  />
+                </label>
+                
+                <label className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-gray-700/50 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <div className="flex items-center gap-3">
+                    <Sparkles size={18} className={preferences.highlightKeyTerms ? 'text-purple-500' : 'text-gray-400'} />
+                    <div>
+                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">Highlight Key Terms</span>
+                      <p className="text-xs text-gray-500">Color-code technical terms</p>
+                    </div>
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={preferences.highlightKeyTerms}
+                    onChange={() => togglePreference('highlightKeyTerms')}
+                    className="w-5 h-5 rounded border-gray-300 text-purple-500 focus:ring-purple-500"
+                  />
+                </label>
+              </div>
+            </div>
+
+            {/* Audio Section */}
+            <div>
+              <label className="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3 block">
+                Audio Playback
+              </label>
+              <div className="space-y-3">
+                <label className="flex items-center justify-between p-3 rounded-xl bg-gray-50 dark:bg-gray-700/50 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
+                  <div className="flex items-center gap-3">
+                    <Volume2 size={18} className={preferences.ttsEnabled ? 'text-brand-500' : 'text-gray-400'} />
+                    <div>
+                      <span className="font-medium text-sm text-gray-700 dark:text-gray-300">Text-to-Speech</span>
+                      <p className="text-xs text-gray-500">Listen while reading</p>
+                    </div>
+                  </div>
+                  <input
+                    type="checkbox"
+                    checked={preferences.ttsEnabled}
+                    onChange={() => togglePreference('ttsEnabled')}
+                    className="w-5 h-5 rounded border-gray-300 text-brand-500 focus:ring-brand-500"
+                  />
+                </label>
+
+                {preferences.ttsEnabled && (
+                  <div className="px-3">
+                    <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
+                      <span>Speech Speed</span>
+                      <span className="font-mono">{preferences.ttsSpeed.toFixed(1)}x</span>
+                    </div>
+                    <input
+                      type="range"
+                      min="0.5"
+                      max="2"
+                      step="0.1"
+                      value={preferences.ttsSpeed}
+                      onChange={(e) => handleSpeedChange(parseFloat(e.target.value))}
+                      className="w-full h-2 bg-gray-200 dark:bg-gray-600 rounded-lg appearance-none cursor-pointer accent-brand-500"
+                    />
+                    <div className="flex justify-between text-[10px] text-gray-400 mt-1">
+                      <span>Slow</span>
+                      <span>Normal</span>
+                      <span>Fast</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ReadingToolbar;

components/Sidebar.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { BookOpen, ChevronRight, Loader2, CheckCircle } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
+import { BookOpen, ChevronRight, Loader2, CheckCircle, Map, Clock, Eye, Target } from 'lucide-react';
 import { BlogSection } from '../types';
 
 interface Props {
@@ -10,6 +10,24 @@ interface Props {
 
 const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
+  const [showMinimap, setShowMinimap] = useState(true);
+
+  // Calculate reading progress
+  const readingStats = useMemo(() => {
+    const activeIndex = sections.findIndex(s => s.id === activeSection);
+    const completedCount = sections.filter(s => !s.isLoading && !s.error && s.content).length;
+    const totalWords = sections.reduce((acc, s) => acc + (s.content?.split(/\s+/).length || 0), 0);
+    const readingTimeMin = Math.max(1, Math.ceil(totalWords / 200));
+    const progressPercent = activeIndex >= 0 ? ((activeIndex + 1) / sections.length) * 100 : 0;
+    
+    return {
+      activeIndex,
+      completedCount,
+      totalWords,
+      readingTimeMin,
+      progressPercent
+    };
+  }, [sections, activeSection]);
 
   const handleClick = (id: string) => {
     onSectionClick(id);
@@ -167,39 +185,110 @@ const Sidebar: React.FC<Props> = ({ sections, activeSection, onSectionClick }) =
                   </span>
                 </div>
                 <div className="h-1.5 bg-brand-100 dark:bg-brand-900/30 rounded-full overflow-hidden">
-                  <div 
-                    className="h-full bg-gradient-to-r from-brand-500 to-purple-500 rounded-full transition-all duration-500"
-                    style={{ 
-                      width: `${(sections.filter(s => !s.isLoading).length / sections.length) * 100}%` 
-                    }}
-                  />
-                </div>
-              </div>
-            )}
-            
-            {/* Reading Progress */}
-            <div>
-              <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
-                <span>Reading</span>
-                <span>
-                  {sections.findIndex(s => s.id === activeSection) + 1}/{sections.length}
-                </span>
-              </div>
-              <div className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
                 <div 
-                  className="h-full bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-500 rounded-full transition-all duration-500"
+                  className="h-full bg-gradient-to-r from-brand-500 to-purple-500 rounded-full transition-all duration-500"
                   style={{ 
-                    width: `${((sections.findIndex(s => s.id === activeSection) + 1) / sections.length) * 100}%` 
+                    width: `${(sections.filter(s => !s.isLoading).length / sections.length) * 100}%` 
                   }}
                 />
               </div>
             </div>
+          )}
+          
+          {/* Reading Progress */}
+          <div>
+            <div className="flex items-center justify-between text-xs text-gray-500 mb-2">
+              <span className="flex items-center gap-1">
+                <Eye size={10} />
+                Reading
+              </span>
+              <span>
+                {sections.findIndex(s => s.id === activeSection) + 1}/{sections.length}
+              </span>
+            </div>
+            <div className="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden">
+              <div 
+                className="h-full bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-600 dark:to-gray-500 rounded-full transition-all duration-500"
+                style={{ 
+                  width: `${((sections.findIndex(s => s.id === activeSection) + 1) / sections.length) * 100}%` 
+                }}
+              />
+            </div>
           </div>
-        )}
-      </div>
-    </nav>
-  );
-};
 
-export default Sidebar;
+          {/* Mini-map Toggle */}
+          <button
+            onClick={() => setShowMinimap(!showMinimap)}
+            className={`
+              w-full flex items-center justify-between px-2 py-1.5 rounded-lg text-xs font-medium transition-colors
+              ${showMinimap 
+                ? 'bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-400' 
+                : 'bg-gray-100 dark:bg-gray-800 text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700'
+              }
+            `}
+          >
+            <span className="flex items-center gap-1.5">
+              <Map size={12} />
+              Mini-map
+            </span>
+            <span className="text-[10px] opacity-60">
+              {showMinimap ? 'On' : 'Off'}
+            </span>
+          </button>
+
+          {/* Visual Mini-map */}
+          {showMinimap && (
+            <div className="p-2 rounded-lg bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800">
+              <div className="flex gap-1 flex-wrap">
+                {sections.map((section, index) => {
+                  const isActive = activeSection === section.id;
+                  const isPast = sections.findIndex(s => s.id === activeSection) > index;
+                  const isLoading = section.isLoading;
+                  const hasError = section.error;
+                  
+                  return (
+                    <button
+                      key={section.id}
+                      onClick={() => handleClick(section.id)}
+                      disabled={isLoading}
+                      className={`
+                        w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold transition-all
+                        ${isActive 
+                          ? 'bg-brand-500 text-white ring-2 ring-brand-500/30 scale-110' 
+                          : isPast 
+                          ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400' 
+                          : isLoading
+                          ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 animate-pulse'
+                          : hasError
+                          ? 'bg-red-100 dark:bg-red-900/30 text-red-500'
+                          : 'bg-gray-100 dark:bg-gray-800 text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700'
+                        }
+                      `}
+                      title={section.title}
+                    >
+                      {isActive ? <Target size={10} /> : index + 1}
+                    </button>
+                  );
+                })}
+              </div>
+              <p className="text-[10px] text-gray-400 text-center mt-2">
+                You are here: Section {readingStats.activeIndex + 1}
+              </p>
+            </div>
+          )}
+
+          {/* Estimated Time Remaining */}
+          <div className="flex items-center justify-center gap-2 text-[10px] text-gray-400 py-1">
+            <Clock size={10} />
+            <span>
+              ~{Math.max(1, readingStats.readingTimeMin - Math.ceil(readingStats.readingTimeMin * (readingStats.progressPercent / 100)))} min remaining
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  </nav>
+);
+};
 
+export default Sidebar;

components/SourceAnchor.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { ExternalLink, Quote, X, CheckCircle, AlertTriangle, HelpCircle, FileText } from 'lucide-react';
+import { SourceAnchor as SourceAnchorType, ConfidenceLevel } from '../types';
+
+interface Props {
+  anchor: SourceAnchorType;
+  children: React.ReactNode;
+}
+
+const confidenceConfig: Record<ConfidenceLevel, {
+  label: string;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  icon: React.ReactNode;
+  description: string;
+}> = {
+  'direct-quote': {
+    label: 'Direct Quote',
+    color: 'text-green-700 dark:text-green-300',
+    bgColor: 'bg-green-50 dark:bg-green-900/30',
+    borderColor: 'border-green-200 dark:border-green-800',
+    icon: <Quote size={12} />,
+    description: 'This is a direct quote from the paper'
+  },
+  'paraphrase': {
+    label: 'Paraphrased',
+    color: 'text-blue-700 dark:text-blue-300',
+    bgColor: 'bg-blue-50 dark:bg-blue-900/30',
+    borderColor: 'border-blue-200 dark:border-blue-800',
+    icon: <FileText size={12} />,
+    description: 'Closely paraphrased from source text'
+  },
+  'synthesis': {
+    label: 'Synthesized',
+    color: 'text-purple-700 dark:text-purple-300',
+    bgColor: 'bg-purple-50 dark:bg-purple-900/30',
+    borderColor: 'border-purple-200 dark:border-purple-800',
+    icon: <CheckCircle size={12} />,
+    description: 'Combined from multiple parts of the paper'
+  },
+  'interpretation': {
+    label: 'AI Analysis',
+    color: 'text-amber-700 dark:text-amber-300',
+    bgColor: 'bg-amber-50 dark:bg-amber-900/30',
+    borderColor: 'border-amber-200 dark:border-amber-800',
+    icon: <AlertTriangle size={12} />,
+    description: 'AI interpretation - verify with source'
+  }
+};
+
+const SourceAnchorComponent: React.FC<Props> = ({ anchor, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const config = confidenceConfig[anchor.confidence];
+
+  return (
+    <span className="relative inline">
+      {/* Anchor trigger - the highlighted claim text */}
+      <span
+        onClick={() => setIsOpen(!isOpen)}
+        className={`
+          inline cursor-pointer border-b-2 border-dashed transition-all
+          hover:border-solid
+          ${config.borderColor}
+        `}
+        style={{
+          borderBottomColor: anchor.highlightColor || undefined,
+          backgroundColor: isOpen ? `${anchor.highlightColor}15` : undefined
+        }}
+      >
+        {children}
+        <sup 
+          className={`
+            ml-0.5 text-[10px] font-bold px-1 py-0.5 rounded 
+            ${config.bgColor} ${config.color}
+          `}
+        >
+          {anchor.pageNumber ? `p.${anchor.pageNumber}` : '↗'}
+        </sup>
+      </span>
+
+      {/* Popup with source text */}
+      {isOpen && (
+        <>
+          {/* Backdrop */}
+          <div 
+            className="fixed inset-0 z-40"
+            onClick={() => setIsOpen(false)}
+          />
+          
+          {/* Popup */}
+          <div className={`
+            absolute z-50 left-0 top-full mt-2 
+            w-80 sm:w-96 
+            rounded-xl shadow-2xl border-2
+            ${config.bgColor} ${config.borderColor}
+            animate-in fade-in zoom-in-95 slide-in-from-top-2 duration-200
+          `}>
+            {/* Header */}
+            <div className={`
+              flex items-center justify-between px-4 py-3 border-b ${config.borderColor}
+            `}>
+              <div className="flex items-center gap-2">
+                <span className={config.color}>{config.icon}</span>
+                <span className={`text-sm font-bold ${config.color}`}>
+                  {config.label}
+                </span>
+                {anchor.pageNumber && (
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
+                    Page {anchor.pageNumber}
+                  </span>
+                )}
+              </div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="p-1 rounded-lg hover:bg-white/50 dark:hover:bg-black/20 transition-colors"
+              >
+                <X size={14} className="text-gray-500" />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-4 space-y-3">
+              {/* Original source text */}
+              <div>
+                <label className="text-[10px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1 block">
+                  Original Text
+                </label>
+                <blockquote className="text-sm text-gray-700 dark:text-gray-300 bg-white/50 dark:bg-black/20 p-3 rounded-lg border-l-4 border-gray-300 dark:border-gray-600 italic">
+                  "{anchor.sourceText}"
+                </blockquote>
+              </div>
+
+              {/* Confidence explanation */}
+              <div className={`
+                flex items-start gap-2 p-2 rounded-lg 
+                ${anchor.confidence === 'interpretation' 
+                  ? 'bg-amber-100/50 dark:bg-amber-900/20' 
+                  : 'bg-white/30 dark:bg-black/10'
+                }
+              `}>
+                <HelpCircle size={14} className="flex-shrink-0 mt-0.5 text-gray-400" />
+                <p className="text-xs text-gray-600 dark:text-gray-400">
+                  {config.description}
+                </p>
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="px-4 py-3 border-t border-gray-200/50 dark:border-gray-700/50 flex items-center justify-between">
+              <span className="text-[10px] text-gray-400">
+                Click outside to close
+              </span>
+              <button
+                onClick={() => {
+                  // In a real implementation, this would scroll to the PDF location
+                  console.log('Navigate to source:', anchor);
+                }}
+                className="flex items-center gap-1 text-xs font-medium text-brand-600 dark:text-brand-400 hover:underline"
+              >
+                <ExternalLink size={12} />
+                View in PDF
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </span>
+  );
+};
+
+// Inline confidence badge (for use in content)
+export const ConfidenceBadge: React.FC<{ level: ConfidenceLevel; compact?: boolean }> = ({ 
+  level, 
+  compact = false 
+}) => {
+  const config = confidenceConfig[level];
+  
+  if (compact) {
+    return (
+      <span 
+        className={`inline-flex items-center justify-center w-4 h-4 rounded-full ${config.bgColor} ${config.color}`}
+        title={config.label}
+      >
+        {config.icon}
+      </span>
+    );
+  }
+
+  return (
+    <span className={`
+      inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-medium
+      ${config.bgColor} ${config.color}
+    `}>
+      {config.icon}
+      <span>{config.label}</span>
+    </span>
+  );
+};
+
+export default SourceAnchorComponent;

components/TextToSpeech.tsx

@@ -0,0 +1,321 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { Play, Pause, SkipBack, SkipForward, Volume2, VolumeX, Settings, X } from 'lucide-react';
+
+interface Props {
+  text: string;
+  sectionId: string;
+  onWordChange?: (wordIndex: number) => void;
+  onPlayingChange?: (isPlaying: boolean) => void;
+}
+
+interface TTSSettings {
+  rate: number;
+  pitch: number;
+  voice: SpeechSynthesisVoice | null;
+}
+
+const TextToSpeech: React.FC<Props> = ({ 
+  text, 
+  sectionId, 
+  onWordChange,
+  onPlayingChange 
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
+  const [currentWordIndex, setCurrentWordIndex] = useState(0);
+  const [showSettings, setShowSettings] = useState(false);
+  const [settings, setSettings] = useState<TTSSettings>({
+    rate: 1.0,
+    pitch: 1.0,
+    voice: null
+  });
+  const [availableVoices, setAvailableVoices] = useState<SpeechSynthesisVoice[]>([]);
+  const [progress, setProgress] = useState(0);
+  
+  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
+  const wordsRef = useRef<string[]>([]);
+
+  // Parse text into words
+  useEffect(() => {
+    // Strip markdown and split into words
+    const cleanText = text
+      .replace(/[#*_`\[\]()]/g, '')
+      .replace(/\n+/g, ' ')
+      .trim();
+    wordsRef.current = cleanText.split(/\s+/).filter(w => w.length > 0);
+  }, [text]);
+
+  // Load available voices
+  useEffect(() => {
+    const loadVoices = () => {
+      const voices = window.speechSynthesis.getVoices();
+      const englishVoices = voices.filter(v => v.lang.startsWith('en'));
+      setAvailableVoices(englishVoices);
+      
+      // Set default voice (prefer a natural-sounding one)
+      if (!settings.voice && englishVoices.length > 0) {
+        const preferredVoice = englishVoices.find(v => 
+          v.name.includes('Samantha') || 
+          v.name.includes('Alex') || 
+          v.name.includes('Google') ||
+          v.name.includes('Natural')
+        ) || englishVoices[0];
+        setSettings(prev => ({ ...prev, voice: preferredVoice }));
+      }
+    };
+
+    loadVoices();
+    window.speechSynthesis.onvoiceschanged = loadVoices;
+    
+    return () => {
+      window.speechSynthesis.cancel();
+    };
+  }, []);
+
+  // Notify parent of word changes
+  useEffect(() => {
+    onWordChange?.(currentWordIndex);
+  }, [currentWordIndex, onWordChange]);
+
+  // Notify parent of playing state changes
+  useEffect(() => {
+    onPlayingChange?.(isPlaying);
+  }, [isPlaying, onPlayingChange]);
+
+  const handlePlay = useCallback(() => {
+    if (isPaused) {
+      window.speechSynthesis.resume();
+      setIsPaused(false);
+      setIsPlaying(true);
+      return;
+    }
+
+    // Cancel any existing speech
+    window.speechSynthesis.cancel();
+    
+    // Clean text for speech
+    const cleanText = text
+      .replace(/[#*_`\[\]()]/g, '')
+      .replace(/\n+/g, '. ')
+      .trim();
+
+    const utterance = new SpeechSynthesisUtterance(cleanText);
+    utterance.rate = settings.rate;
+    utterance.pitch = settings.pitch;
+    if (settings.voice) {
+      utterance.voice = settings.voice;
+    }
+
+    // Track word boundaries
+    let charIndex = 0;
+    utterance.onboundary = (event) => {
+      if (event.name === 'word') {
+        charIndex = event.charIndex;
+        // Estimate word index based on character position
+        const spokenText = cleanText.substring(0, charIndex);
+        const wordIndex = spokenText.split(/\s+/).length - 1;
+        setCurrentWordIndex(Math.max(0, wordIndex));
+        setProgress((charIndex / cleanText.length) * 100);
+      }
+    };
+
+    utterance.onend = () => {
+      setIsPlaying(false);
+      setIsPaused(false);
+      setCurrentWordIndex(0);
+      setProgress(0);
+    };
+
+    utterance.onerror = () => {
+      setIsPlaying(false);
+      setIsPaused(false);
+    };
+
+    utteranceRef.current = utterance;
+    window.speechSynthesis.speak(utterance);
+    setIsPlaying(true);
+    setIsPaused(false);
+  }, [text, settings, isPaused]);
+
+  const handlePause = useCallback(() => {
+    if (isPlaying) {
+      window.speechSynthesis.pause();
+      setIsPaused(true);
+      setIsPlaying(false);
+    }
+  }, [isPlaying]);
+
+  const handleStop = useCallback(() => {
+    window.speechSynthesis.cancel();
+    setIsPlaying(false);
+    setIsPaused(false);
+    setCurrentWordIndex(0);
+    setProgress(0);
+  }, []);
+
+  const handleSkipBack = useCallback(() => {
+    // Restart from beginning
+    handleStop();
+    setTimeout(handlePlay, 100);
+  }, [handleStop, handlePlay]);
+
+  const handleSkipForward = useCallback(() => {
+    // Skip to next section (stop current)
+    handleStop();
+  }, [handleStop]);
+
+  return (
+    <div className="relative">
+      {/* Main TTS Control Bar */}
+      <div className="flex items-center gap-3 p-3 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+        {/* Play/Pause Button */}
+        <button
+          onClick={isPlaying ? handlePause : handlePlay}
+          className={`
+            p-3 rounded-full transition-all duration-200
+            ${isPlaying 
+              ? 'bg-brand-500 text-white shadow-lg shadow-brand-500/30 hover:bg-brand-600' 
+              : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-600 shadow-sm'
+            }
+          `}
+          title={isPlaying ? 'Pause' : 'Play'}
+        >
+          {isPlaying ? <Pause size={20} /> : <Play size={20} className="ml-0.5" />}
+        </button>
+
+        {/* Skip Controls */}
+        <div className="flex items-center gap-1">
+          <button
+            onClick={handleSkipBack}
+            className="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            title="Restart"
+          >
+            <SkipBack size={16} />
+          </button>
+          <button
+            onClick={handleSkipForward}
+            className="p-2 rounded-lg text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+            title="Stop"
+          >
+            <SkipForward size={16} />
+          </button>
+        </div>
+
+        {/* Progress Bar */}
+        <div className="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+          <div 
+            className="h-full bg-gradient-to-r from-brand-500 to-purple-500 transition-all duration-150"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+
+        {/* Speed Indicator */}
+        <span className="text-xs font-mono text-gray-500 dark:text-gray-400 min-w-[3rem] text-center">
+          {settings.rate.toFixed(1)}x
+        </span>
+
+        {/* Settings Button */}
+        <button
+          onClick={() => setShowSettings(!showSettings)}
+          className={`
+            p-2 rounded-lg transition-colors
+            ${showSettings 
+              ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400' 
+              : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
+            }
+          `}
+          title="Settings"
+        >
+          <Settings size={16} />
+        </button>
+      </div>
+
+      {/* Settings Panel */}
+      {showSettings && (
+        <div className="absolute top-full left-0 right-0 mt-2 p-4 rounded-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+          <div className="flex items-center justify-between mb-4">
+            <h4 className="text-sm font-bold text-gray-900 dark:text-white">Audio Settings</h4>
+            <button
+              onClick={() => setShowSettings(false)}
+              className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+            >
+              <X size={14} />
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            {/* Speed Control */}
+            <div>
+              <label className="flex items-center justify-between text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">
+                <span>Speed</span>
+                <span className="font-mono">{settings.rate.toFixed(1)}x</span>
+              </label>
+              <input
+                type="range"
+                min="0.5"
+                max="2"
+                step="0.1"
+                value={settings.rate}
+                onChange={(e) => setSettings(prev => ({ ...prev, rate: parseFloat(e.target.value) }))}
+                className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-brand-500"
+              />
+              <div className="flex justify-between text-[10px] text-gray-400 mt-1">
+                <span>0.5x</span>
+                <span>1x</span>
+                <span>1.5x</span>
+                <span>2x</span>
+              </div>
+            </div>
+
+            {/* Pitch Control */}
+            <div>
+              <label className="flex items-center justify-between text-xs font-medium text-gray-600 dark:text-gray-400 mb-2">
+                <span>Pitch</span>
+                <span className="font-mono">{settings.pitch.toFixed(1)}</span>
+              </label>
+              <input
+                type="range"
+                min="0.5"
+                max="1.5"
+                step="0.1"
+                value={settings.pitch}
+                onChange={(e) => setSettings(prev => ({ ...prev, pitch: parseFloat(e.target.value) }))}
+                className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-brand-500"
+              />
+            </div>
+
+            {/* Voice Selection */}
+            {availableVoices.length > 0 && (
+              <div>
+                <label className="text-xs font-medium text-gray-600 dark:text-gray-400 mb-2 block">
+                  Voice
+                </label>
+                <select
+                  value={settings.voice?.name || ''}
+                  onChange={(e) => {
+                    const voice = availableVoices.find(v => v.name === e.target.value) || null;
+                    setSettings(prev => ({ ...prev, voice }));
+                  }}
+                  className="w-full px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-500 outline-none"
+                >
+                  {availableVoices.map((voice) => (
+                    <option key={voice.name} value={voice.name}>
+                      {voice.name} ({voice.lang})
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Current word indicator (for debugging, usually hidden) */}
+      {/* <div className="mt-2 text-xs text-gray-400">
+        Word {currentWordIndex + 1} of {wordsRef.current.length}
+      </div> */}
+    </div>
+  );
+};
+
+export default TextToSpeech;

services/geminiService.ts

@@ -369,10 +369,34 @@ const PAPER_STRUCTURE_SCHEMA = {
   required: ['paperTitle', 'paperAbstract', 'mainContribution', 'sections', 'keyTerms']
 };
 
-// Single Blog Section Schema
+// Single Blog Section Schema with Progressive Disclosure Layers
 const SINGLE_SECTION_SCHEMA = {
   type: Type.OBJECT,
   properties: {
+    // Progressive Disclosure Layers (ADHD-Friendly)
+    layers: {
+      type: Type.OBJECT,
+      properties: {
+        thesis: { 
+          type: Type.STRING, 
+          description: "Tweet-length core thesis of this section (< 280 characters). The one key insight." 
+        },
+        takeaways: {
+          type: Type.ARRAY,
+          items: { type: Type.STRING },
+          description: "3-5 key bullet points that summarize this section"
+        },
+        detailed: { 
+          type: Type.STRING, 
+          description: "Full detailed content in rich Markdown (300-500 words)" 
+        },
+        eli5Content: {
+          type: Type.STRING,
+          description: "Same content but explained using simple everyday language and analogies, avoiding jargon"
+        }
+      },
+      required: ['thesis', 'takeaways', 'detailed']
+    },
     content: { type: Type.STRING, description: "Rich Markdown content (300-500 words). Use **bold**, *italics*, bullet points, numbered lists, and ### subheadings." },
     visualizationType: { 
       type: Type.STRING, 
@@ -608,6 +632,25 @@ export const generateSingleBlogSection = async (
     WRITING INSTRUCTIONS:
     ${sectionTypeGuide[sectionPlan.sectionType]}
     
+    ===== CRITICAL: PROGRESSIVE DISCLOSURE LAYERS (ADHD-FRIENDLY) =====
+    You MUST generate content in THREE LAYERS for this section:
+    
+    LAYER 1 - THESIS (Tweet-Length < 280 chars):
+    Write the ONE key insight of this section that a reader absolutely must know.
+    Example: "Attention mechanisms let models focus on relevant parts of input, like a spotlight on important words."
+    
+    LAYER 2 - TAKEAWAYS (3-5 Bullet Points):
+    Write 3-5 key bullet points that expand on the thesis.
+    Each bullet should be one actionable/memorable piece of information.
+    
+    LAYER 3 - DETAILED (Full Markdown Content):
+    The full explanation with all the context, examples, and depth.
+    
+    BONUS - ELI5 CONTENT (Simple Language Version):
+    Rewrite the detailed content using everyday language, analogies, and no jargon.
+    Imagine explaining to a smart 12-year-old.
+    =================================================================
+    
     CONTENT REQUIREMENTS:
     - Write in distill.pub style: accessible yet technically accurate
     - Use Markdown formatting: **bold** for emphasis, bullet points for lists, ### for subheadings
@@ -627,6 +670,7 @@ export const generateSingleBlogSection = async (
     - Use real numbers from tables/figures
     - Choose the right chart type (bar for comparisons, line for trends)
     - Include axis labels
+    - Make it interactive: if appropriate, add slider config for "what-if" exploration
     ` : ''}
     ${sectionPlan.suggestedVisualization === 'equation' ? `
     Write the key equation in LaTeX-style notation:
@@ -672,7 +716,13 @@ export const generateSingleBlogSection = async (
     return {
       id: sectionPlan.id,
       title: sectionPlan.title,
-      content: parsed.content,
+      content: parsed.content || parsed.layers?.detailed || '',
+      layers: parsed.layers ? {
+        thesis: parsed.layers.thesis || '',
+        takeaways: parsed.layers.takeaways || [],
+        detailed: parsed.layers.detailed || parsed.content || '',
+        eli5Content: parsed.layers.eli5Content
+      } : undefined,
       visualizationType: parsed.visualizationType,
       visualizationData: parsed.visualizationData,
       chartData: parsed.chartData,

style.css

@@ -20,3 +20,115 @@ body {
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
 }
+
+/* ADHD-Friendly Features */
+
+/* Bionic Reading Support */
+.bionic-text {
+  font-feature-settings: 'kern' 1;
+  letter-spacing: 0.01em;
+  word-spacing: 0.05em;
+}
+
+/* TTS Karaoke Highlight */
+.tts-highlight {
+  background: linear-gradient(120deg, rgba(14, 165, 233, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: all 150ms ease;
+}
+
+/* Progressive Disclosure Animations */
+@keyframes layer-expand {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.layer-content {
+  animation: layer-expand 0.3s ease-out forwards;
+}
+
+/* Focus Indicators for Accessibility */
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid #0ea5e9;
+  outline-offset: 2px;
+}
+
+/* Reduce motion for users who prefer it */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Custom scrollbar for the sidebar */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.3);
+  border-radius: 3px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(156, 163, 175, 0.5);
+}
+
+/* Source anchor highlight */
+.source-anchor-highlight {
+  background: linear-gradient(
+    to bottom,
+    transparent 60%,
+    rgba(14, 165, 233, 0.3) 60%
+  );
+}
+
+/* Interactive chart hover effects */
+.chart-interactive:hover {
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+}
+
+/* Reading progress gradient */
+.reading-progress-bar {
+  background: linear-gradient(
+    90deg,
+    #0ea5e9 0%,
+    #8b5cf6 50%,
+    #ec4899 100%
+  );
+}
+
+/* Mini-map active indicator pulse */
+@keyframes minimap-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.4);
+  }
+  50% {
+    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0);
+  }
+}
+
+.minimap-active {
+  animation: minimap-pulse 2s ease-in-out infinite;
+}

types.ts

@@ -24,12 +24,35 @@ export interface ChatMessage {
 // Model types
 export type GeminiModel = 'gemini-2.5-flash' | 'gemini-3-pro-preview';
 
+// ADHD-Friendly Reading Preferences
+export interface ReadingPreferences {
+  bionicReading: boolean;
+  eli5Mode: boolean; // Simple language mode
+  highlightKeyTerms: boolean;
+  ttsEnabled: boolean;
+  ttsSpeed: number; // 0.5 to 2.0
+}
+
 export interface AppSettings {
   apiKey: string;
   model: GeminiModel;
   theme: 'light' | 'dark';
   layoutMode: 'auto' | 'grid' | 'list';
   useThinking: boolean;
+  readingPreferences: ReadingPreferences;
+}
+
+// Confidence level for AI-generated content
+export type ConfidenceLevel = 'direct-quote' | 'paraphrase' | 'synthesis' | 'interpretation';
+
+// Source anchor for zero-latency verification
+export interface SourceAnchor {
+  id: string;
+  claimText: string;
+  sourceText: string;
+  pageNumber?: number;
+  confidence: ConfidenceLevel;
+  highlightColor: string;
 }
 
 export interface ProcessingStatus {
@@ -37,11 +60,25 @@ export interface ProcessingStatus {
   message?: string;
 }
 
+// Progressive Disclosure Layers (ADHD-Friendly)
+export interface ContentLayers {
+  // Layer 1: Tweet-length core thesis (< 280 chars)
+  thesis: string;
+  // Layer 2: Key takeaways (3-5 bullet points)
+  takeaways: string[];
+  // Layer 3: Full detailed content (markdown)
+  detailed: string;
+  // ELI5 version for simple language mode
+  eli5Content?: string;
+}
+
 // Blog View Types
 export interface BlogSection {
   id: string;
   title: string;
-  content: string; // Markdown
+  content: string; // Markdown (Layer 3 - detailed)
+  // Progressive disclosure layers
+  layers?: ContentLayers;
   visualizationType?: 'mermaid' | 'chart' | 'equation' | 'none';
   visualizationData?: string;
   chartData?: ChartData;
@@ -52,6 +89,24 @@ export interface BlogSection {
   error?: string;
   // Validation status
   validationStatus?: ValidationStatus;
+  // Source anchors for verification
+  sourceAnchors?: SourceAnchor[];
+}
+
+export interface ValidationStatus {
+  isValidated: boolean;
+  contentRelevance: ValidationResult;
+  visualizationValidity: ValidationResult;
+  overallScore: number; // 0-100
+  wasRepaired?: boolean;
+  repairAttempts?: number;
+}
+
+export interface ValidationResult {
+  passed: boolean;
+  score: number; // 0-100
+  issues: string[];
+  suggestions?: string[];
 }
 
 export interface ValidationStatus {
@@ -98,6 +153,7 @@ export interface MarginNote {
 export interface TechnicalTerm {
   term: string;
   definition: string;
+  highlightColor?: string; // Consistent color for this term throughout
 }
 
 export interface CollapsibleContent {
@@ -106,7 +162,7 @@ export interface CollapsibleContent {
   content: string;
 }
 
-// Chart Types
+// Interactive Chart Types (Playable Visualizations)
 export interface ChartData {
   type: 'bar' | 'line' | 'pie' | 'scatter' | 'area';
   title: string;
@@ -114,6 +170,39 @@ export interface ChartData {
   xAxis?: string;
   yAxis?: string;
   colors?: string[];
+  // Interactive features
+  interactive?: {
+    enableSliders?: boolean;
+    sliderConfig?: SliderConfig[];
+    enableToggles?: boolean;
+    toggleableDatasets?: string[];
+  };
+}
+
+// Slider configuration for interactive charts
+export interface SliderConfig {
+  id: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  defaultValue: number;
+  affectsVariable: string; // Which variable this slider modifies
 }
 
 export type ViewMode = 'grid' | 'blog';
+
+// Text-to-Speech state
+export interface TTSState {
+  isPlaying: boolean;
+  currentSectionId: string | null;
+  currentWordIndex: number;
+  speed: number;
+}
+
+// Wayfinding / Progress tracking
+export interface ReadingProgress {
+  sectionId: string;
+  percentComplete: number;
+  timeSpent: number; // in seconds
+}