update v1 with LFS for images

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/*.png filter=lfs diff=lfs merge=lfs -text

charts.js

@@ -1,35 +1,34 @@
 // DDR-Bench Interactive Charts with Smooth Animations
 // Using Plotly.js with animate for smooth transitions
 
-// Common Plotly layout settings for dark theme
-// Common Plotly layout settings for Apple Minimalist theme
+// Common Plotly layout settings for DDR-Bench design system
 const darkLayout = {
     paper_bgcolor: 'rgba(0,0,0,0)',
     plot_bgcolor: 'rgba(0,0,0,0)',
     font: {
-        family: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif',
-        color: '#000000', // Pure black for max contrast
-        size: 12 // Base font size increased
+        family: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif",
+        color: '#1d1d1f',
+        size: 15
     },
     xaxis: {
-        gridcolor: '#d1d1d6', // Darker grid lines
-        linecolor: '#d1d1d6',
-        tickfont: { color: '#515154', size: 11 }, // Larger and darker ticks
-        title: { font: { color: '#000000', size: 12, weight: 600 } },
-        zerolinecolor: '#d1d1d6'
+        gridcolor: '#d2d2d7',
+        linecolor: '#d2d2d7',
+        tickfont: { color: '#424245', size: 14 },
+        title: { font: { color: '#1d1d1f', size: 15, weight: 600 } },
+        zerolinecolor: '#d2d2d7'
     },
     yaxis: {
-        gridcolor: '#d1d1d6',
-        linecolor: '#d1d1d6',
-        tickfont: { color: '#515154', size: 11 },
-        title: { font: { color: '#000000', size: 12, weight: 600 } },
-        zerolinecolor: '#d1d1d6'
+        gridcolor: '#d2d2d7',
+        linecolor: '#d2d2d7',
+        tickfont: { color: '#424245', size: 14 },
+        title: { font: { color: '#1d1d1f', size: 15, weight: 600 } },
+        zerolinecolor: '#d2d2d7'
     },
     legend: {
         bgcolor: 'rgba(0,0,0,0)',
         bordercolor: 'rgba(0,0,0,0)',
         borderwidth: 0,
-        font: { color: '#000000', size: 11 },
+        font: { color: '#1d1d1f', size: 14 },
         orientation: 'h',
         y: 0.99,
         x: 0.5,
@@ -38,12 +37,12 @@ const darkLayout = {
     },
     hoverlabel: {
         bgcolor: '#ffffff',
-        bordercolor: 'rgba(0,0,0,0.1)',
-        font: { color: '#000000', size: 12 },
+        bordercolor: '#d2d2d7',
+        font: { color: '#1d1d1f', size: 14 },
         namelength: -1
     },
-    hovermode: 'closest',  // Highlight closest point/element on hover
-    margin: { t: 30, r: 20, b: 60, l: 60 } // Increased margins
+    hovermode: 'closest',
+    margin: { t: 20, r: 10, b: 40, l: 50 }, // Reduced margins specifically for compact cards
 };
 
 const plotlyConfig = {
@@ -267,11 +266,14 @@ function initScalingCharts() {
 
         const yRange = SCALING_Y_RANGES[scenario] || [0, 100];
 
+        // Sparse ticks for 10k scenario
+        const dtickVal = scenario === '10k' ? 10 : 5;
+
         const layout = {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Number of Interaction Turns', font: { size: 11, color: '#1d1d1f' } },
+                title: { text: 'Number of Interaction Turns', font: { size: 15, color: '#1d1d1f' } }, // Explicit larger font
                 type: 'linear', // ALWAYS LINEAR
                 range: [-0.05, 1.05], // FIXED RANGE
                 tickmode: 'array',
@@ -281,8 +283,8 @@ function initScalingCharts() {
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                title: { text: 'Accuracy (%)', font: { size: 11, color: '#1d1d1f' } },
-                dtick: 5,
+                title: { text: 'Accuracy (%)', font: { size: 15, color: '#1d1d1f' } }, // Explicit larger font
+                dtick: dtickVal,
                 range: yRange
             },
             showlegend: false  // Use shared legend instead
@@ -724,11 +726,11 @@ document.addEventListener('DOMContentLoaded', () => {
 // ============================================================================
 const TURN_DISPLAY_NAMES = {
     'run_api_deepseek_deepseek-chat': 'DeepSeek-V3.2',
-    'qwen3-next-80b-a3b-instruct': 'Qwen3-Next-80BA3B',
-    'qwen3-next-80b-a3b-instruct-note': 'Qwen3-Next-80BA3B-Note',
-    'qwen3-next-80b-a3b-instruct-noreasoning': 'Qwen3-Next-80BA3B-NoR',
-    'qwen3-next-80b-a3b-instruct-longreasoning': 'Qwen3-Next-80BA3B-LR',
-    'qwen3-next-80b-a3b-instruct-shortreasoning': 'Qwen3-Next-80BA3B-SR',
+    'qwen3-next-80b-a3b-instruct': 'Qwen3-Next-80A3B',
+    'qwen3-next-80b-a3b-instruct-note': 'Qwen3-Next-80A3B-Note',
+    'qwen3-next-80b-a3b-instruct-noreasoning': 'Qwen3-Next-80A3B-NoR',
+    'qwen3-next-80b-a3b-instruct-longreasoning': 'Qwen3-Next-80A3B-LR',
+    'qwen3-next-80b-a3b-instruct-shortreasoning': 'Qwen3-Next-80A3B-SR',
     'qwen2.5-14B-Instruct-1M': 'Qwen2.5-14B-1M',
     'qwen2.5-7B-Instruct-1M': 'Qwen2.5-7B-1M',
     'qwen2.5-14B-Instruct': 'Qwen2.5-14B',
@@ -851,8 +853,8 @@ function initTurnCharts() {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Number of Turns', font: { size: 12, color: '#1d1d1f' } },
-                range: [0, 100],
+                title: { text: 'Number of Turns', font: { size: 14, color: '#1d1d1f' } }, // Larger axis title
+                range: scenario === 'globem' ? [0, 40] : [0, 80],
                 dtick: 20
             },
             yaxis: {
@@ -860,12 +862,13 @@ function initTurnCharts() {
                 tickmode: 'array',
                 tickvals: displayData.map((_, i) => i + 0.35),
                 ticktext: displayData.map(m => getTurnDisplayName(m.model)),
+                tickfont: { size: 10, color: '#424245' }, // Small font for model names as requested
                 automargin: true,
                 range: [-0.5, displayData.length],
                 showgrid: false,
                 zeroline: false
             },
-            margin: { ...darkLayout.margin, l: 140 },
+            margin: { ...darkLayout.margin, l: 85 }, // Reduced left margin for turn chart (was 140)
             showlegend: false
         };
 
@@ -1022,7 +1025,7 @@ function initErrorChart() {
         },
         text: data.map(d => `${d.percentage}%`),
         textposition: 'outside',
-        textfont: { size: 11, color: '#1d1d1f' },
+        textfont: { size: 14, color: '#1d1d1f' }, // Larger bar text
         hovertemplate: '<b>%{x}</b><br>%{y:.1f}%<br>Count: %{customdata}<extra></extra>',
         customdata: data.map(d => d.count),
         showlegend: false
@@ -1039,7 +1042,7 @@ function initErrorChart() {
             y: maxPct * 1.15,
             text: `<b>${catName}</b>`,
             showarrow: false,
-            font: { size: 10, color: '#1d1d1f' },
+            font: { size: 13, color: '#1d1d1f' }, // Larger category labels
             xanchor: 'center',
             yanchor: 'bottom'
         });
@@ -1049,12 +1052,12 @@ function initErrorChart() {
         ...darkLayout,
         xaxis: {
             ...darkLayout.xaxis,
-            tickangle: -30,
-            tickfont: { size: 10, color: '#515154' }
+            tickangle: 0,
+            tickfont: { size: 14, color: '#515154' } // Larger ticks
         },
         yaxis: {
             ...darkLayout.yaxis,
-            title: { text: 'Percentage (%)', font: { size: 11, color: '#1d1d1f' } },
+            title: { text: 'Percentage (%)', font: { size: 15, color: '#1d1d1f' } }, // Larger axis title
             range: [0, maxPct * 1.25]
         },
         annotations: annotations,
@@ -1184,13 +1187,13 @@ function renderEntropyCharts(scenario) {
             ...darkLayout,
             xaxis: {
                 ...darkLayout.xaxis,
-                title: { text: 'Entropy', font: { size: 10, color: '#1d1d1f' } },
+                title: { text: 'Entropy', font: { size: 16, color: '#1d1d1f' } }, // Larger
                 range: [0.6, 1.05],
                 dtick: 0.1
             },
             yaxis: {
                 ...darkLayout.yaxis,
-                title: { text: 'Coverage', font: { size: 10, color: '#1d1d1f' } },
+                title: { text: 'Coverage', font: { size: 16, color: '#1d1d1f' } }, // Larger
                 range: [-0.05, yMax]
             },
             margin: { t: 20, r: 20, b: 50, l: 50 }

index.html

@@ -8,10 +8,16 @@
     <title>DDR-Bench | Deep Data Research Benchmark</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://unpkg.com/sql-formatter@4.0.2/dist/sql-formatter.min.js"></script>
     <script src="data.js" defer></script>
     <script src="entropy_data.js" defer></script>
+    <script src="trajectory_data.js" defer></script>
+    <script src="trajectory.js" defer></script>
     <script src="charts.js" defer></script>
     <link rel="stylesheet" href="styles.css">
     <style>
@@ -21,7 +27,7 @@
             align-items: center;
             justify-content: center;
             min-height: 300px;
-            color: #86868b;
+            color: var(--color-text-muted, #64748B);
             font-size: 14px;
         }
 
@@ -45,28 +51,25 @@
 </head>
 
 <body>
-    <!-- Hero Section -->
     <header class="hero">
         <div class="hero-content">
-            <div class="badge">🔬 Research Benchmark</div>
-            <h1>DDR-Bench</h1>
-            <p class="subtitle">Deep Data Research Agent Benchmark for Large Language Models</p>
+            <h1>DDR-Bench: Hunt Instead of Wait: Evaluating Deep Data Research on Large Language Models</h1>
             <p class="description">
-                A comprehensive evaluation framework measuring AI agents' ability to conduct deep, iterative data
-                exploration across medical records (MIMIC), financial filings (10-K), and behavioral data (GLOBEM).
+                An open-ended task requiring LLMs to delve into databases, proactively exploring data and
+                identifying insights without predefined questions or objectives. Evaluating investigatory intelligence
+                across medical records (MIMIC), financial filings (10-K), and behavioral data (GLOBEM).
             </p>
-            <div class="stats-row">
-                <div class="stat-item">
-                    <span class="stat-value">22+</span>
-                    <span class="stat-label">Models Evaluated</span>
+            <div class="meta-info">
+                <div class="meta-row authors">
+                    <span class="meta-item">Wei Liu, Peijie Yu, Michele Orini, Yali Du, Yulan He</span>
                 </div>
-                <div class="stat-item">
-                    <span class="stat-value">3</span>
-                    <span class="stat-label">Diverse Datasets</span>
+                <div class="meta-row affiliations">
+                    <span class="meta-item">King's College London · Tencent · The Alan Turing Institute</span>
                 </div>
-                <div class="stat-item">
-                    <span class="stat-value">5</span>
-                    <span class="stat-label">Analysis Dimensions</span>
+                <div class="meta-row links">
+                    <span class="meta-item"><a href="https://huggingface.co/spaces/DDR-Bench">🤗 Data</a></span>
+                    <span class="meta-item"><a href="https://github.com/DDR-Bench">💻 Code</a></span>
+                    <span class="meta-item"><a href="https://arxiv.org/abs/xxx">📄 Paper</a></span>
                 </div>
             </div>
         </div>
@@ -75,16 +78,179 @@
     <!-- Main Content - All sections visible -->
     <main class="content">
 
-        <!-- 1. Scaling Analysis Section -->
+        <!-- 1. Framework Overview Section -->
+        <section id="framework" class="section visible framework-section">
+            <div class="section-header">
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+                        <line x1="3" x2="21" y1="9" y2="9" />
+                        <line x1="9" x2="9" y1="21" y2="9" />
+                    </svg>
+                    Framework Overview
+                </h2>
+                <p>System architecture and evaluation pipeline of DDR-Bench.</p>
+            </div>
+            <div class="framework-grid">
+                <div class="framework-card">
+                    <img src="assets/framework_task.png" alt="Task Formulation Framework"
+                        style="border-radius: var(--radius-md);">
+                    <h3>Task Formulation</h3>
+                </div>
+                <div class="framework-card">
+                    <img src="assets/framework_pipeline.png" alt="Evaluation Pipeline Framework"
+                        style="border-radius: var(--radius-md);">
+                    <h3>Evaluation Pipeline</h3>
+                </div>
+            </div>
+        </section>
+
+
+
+        <!-- 1.5. Agent Trajectory Section -->
+        <section id="trajectory" class="section visible trajectory-section">
+            <div class="section-header">
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
+                    </svg>
+                    Agent Trajectory
+                </h2>
+                <p>Observe the autonomous decision-making process of the agent across different scenarios.</p>
+            </div>
+
+            <div class="dimension-toggle">
+                <button class="dim-btn active" data-traj-scenario="mimic">MIMIC</button>
+                <button class="dim-btn" data-traj-scenario="10k">10-K</button>
+                <button class="dim-btn" data-traj-scenario="globem">GLOBEM</button>
+            </div>
+
+            <div class="trajectory-container">
+                <div id="chat-window" class="chat-window">
+                    <!-- Messages will be injected here via JS -->
+                    <div class="loading-message">Loading trajectory data...</div>
+                </div>
+            </div>
+        </section>
+
+        <!-- 2. Experiment Results Section -->
+        <section id="results" class="section visible results-section">
+            <div class="section-header">
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 3v18h18" />
+                        <path d="m19 9-5 5-4-4-3 3" />
+                    </svg>
+                    Experiment Results
+                </h2>
+                <p>Main benchmark results and in-depth analysis of agent capabilities.</p>
+            </div>
+
+            <!-- Carousel Container -->
+            <div class="carousel-wrapper">
+                <button class="carousel-btn carousel-prev" aria-label="Previous">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m15 18-6-6 6-6" />
+                    </svg>
+                </button>
+
+                <div class="carousel-track" id="results-carousel">
+                    <!-- 1. Overall -->
+                    <div class="carousel-card">
+                        <img src="assets/overall.png" alt="Overall Performance">
+                        <h4>Overall Performance</h4>
+                        <p class="card-caption">Systematic evaluation of mainstream LLMs across MIMIC, 10-K, and GLOBEM
+                            datasets reveals persistent limitations in frontier models.</p>
+                    </div>
+
+                    <!-- 2. Qwen Family -->
+                    <div class="carousel-card">
+                        <img src="assets/qwenfamily.png" alt="Qwen Family Performance">
+                        <h4>Qwen Family Analysis</h4>
+                        <p class="card-caption">Performance scaling and behavioral differences within the Qwen model
+                            series (Qwen3-Next-80B vs 30B).</p>
+                    </div>
+
+                    <!-- 3. Reasoning -->
+                    <div class="carousel-card">
+                        <img src="assets/reasoning.png" alt="Reasoning Budget">
+                        <h4>Reasoning Budget</h4>
+                        <p class="card-caption">Increasing the reasoning budget reduces interaction rounds but
+                            illustrates
+                            a
+                            trade-off between reasoning depth and exploration efficiency.</p>
+                    </div>
+
+                    <!-- 4. Memory -->
+                    <div class="carousel-card">
+                        <img src="assets/memory.png" alt="Memory Mechanism">
+                        <h4>Memory Mechanism</h4>
+                        <p class="card-caption">Long-short-term memory can create unpredictable behavior, often
+                            increasing
+                            tool usage without consistently improving final accuracy.</p>
+                    </div>
+
+                    <!-- 5. Agency -->
+                    <div class="carousel-card">
+                        <img src="assets/agency.png" alt="Proactive vs Reactive">
+                        <h4>Proactive vs Reactive</h4>
+                        <p class="card-caption">Models perform significantly better with explicit queries (Reactive),
+                            highlighting the difficulty of true proactive goal formulation.</p>
+                    </div>
+
+                    <!-- 6. Hallucination -->
+                    <div class="carousel-card">
+                        <img src="assets/hallucination.png" alt="Hallucination Analysis">
+                        <h4>Hallucination Analysis</h4>
+                        <p class="card-caption">Hallucination rates show almost no correlation with final accuracy,
+                            indicating
+                            robustness against metric inflation via memorization.</p>
+                    </div>
+
+                    <!-- 7. Trustworthiness -->
+                    <div class="carousel-card">
+                        <img src="assets/trustworthiness.png" alt="Trustworthiness">
+                        <h4>Trustworthiness</h4>
+                        <p class="card-caption">Verification of the LLM-as-a-Checker pipeline demonstrating high
+                            alignment
+                            with human expert judgments.</p>
+                    </div>
+                </div>
+
+                <button class="carousel-btn carousel-next" aria-label="Next">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m9 18 6-6-6-6" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- Carousel Dots -->
+            <div class="carousel-dots" id="results-dots"></div>
+        </section>
+
+        <!-- 3. Scaling Analysis Section -->
         <section id="scaling" class="section visible">
             <div class="section-header">
-                <h2>📈 Scaling Analysis</h2>
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="12" x2="12" y1="20" y2="10" />
+                        <line x1="18" x2="18" y1="20" y2="4" />
+                        <line x1="6" x2="6" y1="20" y2="16" />
+                    </svg>
+                    Scaling Analysis
+                </h2>
                 <p>Explore how model performance scales with interaction turns, token usage, and inference cost.</p>
             </div>
             <div class="dimension-toggle">
-                <button class="dim-btn active" data-dim="turn">🔄 Turns</button>
-                <button class="dim-btn" data-dim="token">📊 Tokens</button>
-                <button class="dim-btn" data-dim="cost">💰 Cost</button>
+                <button class="dim-btn active" data-dim="turn">Turns</button>
+                <button class="dim-btn" data-dim="token">Tokens</button>
+                <button class="dim-btn" data-dim="cost">Cost</button>
             </div>
             <div id="scaling-legend" class="shared-legend"></div>
             <div class="charts-grid three-col">
@@ -106,13 +272,30 @@
         <!-- 2. Ranking Comparison Section -->
         <section id="ranking" class="section visible">
             <div class="section-header">
-                <h2>🏆 Ranking Comparison</h2>
-                <p>Novelty (Bradley-Terry) vs Accuracy ranking. ● = Novelty, ◇ = Accuracy. Purple = Proprietary, Green =
-                    Open-source.</p>
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
+                        <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
+                        <path d="M4 22h16" />
+                        <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+                        <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+                        <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+                    </svg>
+                    Ranking Comparison
+                </h2>
+                <p>
+                    Novelty (Bradley-Terry) vs Accuracy ranking
+                    <br>
+                    ● = Novelty, ◇ = Accuracy.
+                    <br>
+                    <span class="model-badge proprietary">Purple = Proprietary</span>
+                    <span class="model-badge opensource">Green = Open-source</span>
+                </p>
             </div>
             <div class="dimension-toggle">
-                <button class="dim-btn ranking-dim active" data-mode="novelty">🎯 Sort by Novelty</button>
-                <button class="dim-btn ranking-dim" data-mode="accuracy">📊 Sort by Accuracy</button>
+                <button class="dim-btn ranking-dim active" data-mode="novelty">Sort by Novelty</button>
+                <button class="dim-btn ranking-dim" data-mode="accuracy">Sort by Accuracy</button>
             </div>
             <div class="charts-grid three-col">
 
@@ -135,7 +318,14 @@
         <!-- 3. Turn Distribution Section -->
         <section id="turn" class="section visible">
             <div class="section-header">
-                <h2>🔄 Turn Distribution</h2>
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" />
+                        <path d="M21 3v5h-5" />
+                    </svg>
+                    Turn Distribution
+                </h2>
                 <p>Analyze the distribution of interaction turns across different models and datasets.</p>
             </div>
             <div class="charts-grid three-col">
@@ -157,7 +347,17 @@
         <!-- 4. Entropy Analysis Section -->
         <section id="entropy" class="section visible">
             <div class="section-header">
-                <h2>🔬 Entropy Analysis</h2>
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="7.5" cy="7.5" r="1.5" />
+                        <circle cx="18.5" cy="5.5" r="1.5" />
+                        <circle cx="11.5" cy="11.5" r="1.5" />
+                        <circle cx="7.5" cy="16.5" r="1.5" />
+                        <circle cx="17.5" cy="14.5" r="1.5" />
+                    </svg>
+                    Entropy Analysis
+                </h2>
                 <p>Scatter plot showing Access Entropy vs Coverage by model. Opacity represents accuracy. Higher entropy
                     = more uniform access; Higher coverage = more fields explored.</p>
             </div>
@@ -196,7 +396,15 @@
         <!-- 5. Error Analysis Section -->
         <section id="error" class="section visible">
             <div class="section-header">
-                <h2>⚠️ Error Analysis</h2>
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" />
+                        <line x1="12" x2="12" y1="9" y2="13" />
+                        <line x1="12" x2="12.01" y1="17" y2="17" />
+                    </svg>
+                    Error Analysis
+                </h2>
                 <p>Breakdown of error types encountered during agent interactions, grouped by main categories.</p>
             </div>
             <div class="charts-grid single">
@@ -209,7 +417,14 @@
         <!-- 6. Probing Results Section -->
         <section id="probing" class="section visible">
             <div class="section-header">
-                <h2>🔍 Probing Results</h2>
+                <h2>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="11" cy="11" r="8" />
+                        <path d="m21 21-4.3-4.3" />
+                    </svg>
+                    Probing Results
+                </h2>
                 <p>Analyze the average log probability of FINISH messages across conversation turns and progress.</p>
             </div>
             <div id="probing-legend" class="shared-legend"></div>
@@ -232,10 +447,122 @@
 
     <!-- Footer -->
     <footer class="footer">
-        <p>DDR-Bench © 2026 | Deep Data Research Agent Benchmark</p>
+        <p>DDR-Bench © 2026 | King's College London · Tencent · The Alan Turing Institute</p>
     </footer>
 
-    <!-- Scripts loaded via defer in head for better parallelization -->
+    <!-- Carousel Script -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const track = document.getElementById('results-carousel');
+            const dotsContainer = document.getElementById('results-dots');
+            const prevBtn = document.querySelector('.carousel-prev');
+            const nextBtn = document.querySelector('.carousel-next');
+
+            if (!track) return;
+
+            const cards = Array.from(track.querySelectorAll('.carousel-card'));
+            const cardCount = cards.length;
+            let currentIndex = 0;
+
+            // Create dots
+            for (let i = 0; i < cardCount; i++) {
+                const dot = document.createElement('button');
+                dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
+                dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
+                dot.addEventListener('click', () => goToSlide(i));
+                dotsContainer.appendChild(dot);
+            }
+
+            const dots = dotsContainer.querySelectorAll('.carousel-dot');
+
+            function updateCarousel() {
+                // Card is 66.666% width, calculate offset to center current card
+                const cardWidth = track.offsetWidth * 0.66666;
+                const gap = 32; // --space-lg
+                const offset = (track.offsetWidth - cardWidth) / 2 - currentIndex * (cardWidth + gap);
+
+                track.style.transform = `translateX(${offset}px)`;
+
+                // Update card states
+                cards.forEach((card, i) => {
+                    card.classList.remove('active', 'side');
+                    if (i === currentIndex) {
+                        card.classList.add('active');
+                    } else {
+                        card.classList.add('side');
+                    }
+                });
+
+                // Update dots
+                dots.forEach((dot, i) => {
+                    dot.classList.toggle('active', i === currentIndex);
+                });
+            }
+
+            function goToSlide(index) {
+                // Infinite loop
+                if (index < 0) {
+                    currentIndex = cardCount - 1;
+                } else if (index >= cardCount) {
+                    currentIndex = 0;
+                } else {
+                    currentIndex = index;
+                }
+                updateCarousel();
+            }
+
+            function nextSlide() { goToSlide(currentIndex + 1); }
+            function prevSlide() { goToSlide(currentIndex - 1); }
+
+            // Navigation buttons
+            prevBtn.addEventListener('click', prevSlide);
+            nextBtn.addEventListener('click', nextSlide);
+
+            // Keyboard navigation
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowLeft') prevSlide();
+                if (e.key === 'ArrowRight') nextSlide();
+            });
+
+            // Touch/swipe support
+            let touchStartX = 0;
+            track.addEventListener('touchstart', (e) => {
+                touchStartX = e.changedTouches[0].screenX;
+            }, { passive: true });
+
+            track.addEventListener('touchend', (e) => {
+                const diff = touchStartX - e.changedTouches[0].screenX;
+                if (Math.abs(diff) > 50) {
+                    if (diff > 0) nextSlide();
+                    else prevSlide();
+                }
+            }, { passive: true });
+
+            // Auto Play Logic
+            let autoPlayInterval;
+            const AUTO_PLAY_DELAY = 5000;
+
+            function startAutoPlay() {
+                stopAutoPlay(); // Clear existing to specify
+                autoPlayInterval = setInterval(nextSlide, AUTO_PLAY_DELAY);
+            }
+
+            function stopAutoPlay() {
+                if (autoPlayInterval) clearInterval(autoPlayInterval);
+            }
+
+            // Pause on hover
+            const carouselWrapper = document.querySelector('.carousel-wrapper');
+            if (carouselWrapper) {
+                carouselWrapper.addEventListener('mouseenter', stopAutoPlay);
+                carouselWrapper.addEventListener('mouseleave', startAutoPlay);
+            }
+
+            // Initialize
+            updateCarousel();
+            startAutoPlay();
+        });
+    </script>
 </body>
 
 </html>

styles.css

@@ -1,48 +1,91 @@
-/* Apple Style Minimalist Theme */
+/* DDR-Bench Dashboard - Apple-Inspired Design System */
+/* Full-width layout with landscape charts */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* ========================= */
+/*     DESIGN TOKENS         */
+/* ========================= */
 :root {
-    --primary: #0071e3;
-    /* Apple Blue */
-    --primary-hover: #0077ed;
-    --bg-body: #f5f5f7;
-    /* Light grey background */
-    --bg-card: #ffffff;
-    --text-primary: #1d1d1f;
-    /* Apple Black */
-    --text-secondary: #515154;
-    /* Darker grey */
-    --border: #d2d2d7;
-    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08);
-    /* Stronger shadow */
-    --radius-card: 20px;
-    --radius-btn: 980px;
-    /* Capsule */
-    --font-stack: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-}
-
-/* Reset & Base */
-*,
-*::before,
-*::after {
-    box-sizing: border-box;
+    /* Color Palette - Apple Inspired */
+    --color-text: #1d1d1f;
+    --color-text-secondary: #424245;
+    --color-text-muted: #6e6e73;
+    --color-background: #f5f5f7;
+    /* Reverted to original light gray */
+    --color-surface: #ffffff;
+    /* Reverted to pure white cards */
+    --color-border: #d2d2d7;
+    /* Reverted border color */
+
+    /* Accent Colors */
+    --color-primary: #0071e3;
+    --color-primary-hover: #0077ed;
+
+    /* Model Type Colors */
+    --color-proprietary: #7c3aed;
+    --color-proprietary-bg: rgba(124, 58, 237, 0.08);
+    --color-opensource: #059669;
+    --color-opensource-bg: rgba(5, 150, 105, 0.08);
+
+    /* Shadows - Soft and premium */
+    /* Shadows - Flat & Light */
+    --shadow-sm: none;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.02);
+    /* Very subtle shadow */
+    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.05);
+    /* Gentle hover lift */
+
+    /* Spacing */
+    --space-xs: 0.5rem;
+    --space-sm: 1rem;
+    --space-md: 1.5rem;
+    --space-lg: 2rem;
+    --space-xl: 3rem;
+    --space-2xl: 4rem;
+
+    /* Border Radius */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-pill: 980px;
+
+    /* Typography */
+    --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
+    --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
+}
+
+/* ========================= */
+/*     BASE STYLES           */
+/* ========================= */
+* {
     margin: 0;
     padding: 0;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 17px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-    font-family: var(--font-stack);
-    background-color: var(--bg-body);
-    color: var(--text-primary);
+    font-family: var(--font-system);
+    background: var(--color-background);
+    color: var(--color-text);
     line-height: 1.47059;
     letter-spacing: -0.022em;
     min-height: 100vh;
-    -webkit-font-smoothing: antialiased;
 }
 
-/* Hero Section */
+/* ========================= */
+/*     HERO SECTION          */
+/* ========================= */
 .hero {
-    padding: 4rem 2rem 2rem;
+    background: linear-gradient(180deg, #ffffff 0%, var(--color-background) 100%);
+    padding: var(--space-2xl) var(--space-lg);
     text-align: center;
-    background: var(--bg-body);
 }
 
 .hero-content {
@@ -51,163 +94,218 @@ body {
 }
 
 .badge {
-    display: inline-block;
-    color: var(--primary);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     font-size: 12px;
     font-weight: 600;
-    margin-bottom: 0.8rem;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.02em;
     text-transform: uppercase;
+    color: var(--color-primary);
+    margin-bottom: var(--space-md);
+}
+
+.badge svg {
+    width: 16px;
+    height: 16px;
 }
 
 .hero h1 {
-    font-size: 48px;
-    line-height: 1.08349;
+    font-size: 56px;
     font-weight: 700;
-    letter-spacing: -0.003em;
-    margin-bottom: 0.5rem;
-    color: var(--text-primary);
+    letter-spacing: -0.035em;
+    line-height: 1.05;
+    margin-bottom: var(--space-sm);
+    color: var(--color-text);
 }
 
-.subtitle {
+.hero .subtitle {
     font-size: 24px;
-    line-height: 1.16667;
-    font-weight: 400;
-    letter-spacing: 0.009em;
-    color: var(--text-primary);
-    margin-bottom: 1rem;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    letter-spacing: -0.02em;
+    margin-bottom: var(--space-md);
 }
 
-.description {
+.hero .description {
     font-size: 17px;
-    line-height: 1.47059;
-    font-weight: 400;
-    letter-spacing: -0.022em;
-    color: var(--text-secondary);
-    max-width: 700px;
-    margin: 0 auto 2rem;
+    line-height: 1.5;
+    color: var(--color-text-muted);
+    max-width: 720px;
+    margin: 0 auto var(--space-lg);
 }
 
-.stats-row {
+/* Meta Information */
+/* Meta Information */
+.meta-info {
     display: flex;
+    flex-direction: column;
+    /* Stack vertically as requested */
+    align-items: center;
+    gap: var(--space-sm);
+    margin-top: var(--space-md);
+    padding-top: var(--space-md);
+    border-top: 1px solid var(--color-border);
+}
+
+.meta-row {
+    display: flex;
+    flex-wrap: wrap;
     justify-content: center;
-    gap: 3rem;
-    margin-top: 2rem;
+    gap: var(--space-md);
 }
 
-.stat-item {
-    text-align: center;
+.meta-row.authors {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--color-text);
 }
 
-.stat-value {
-    display: block;
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--text-primary);
+.meta-row.affiliations {
+    font-size: 15px;
+    color: var(--color-text-secondary);
 }
 
-.stat-label {
-    font-size: 13px;
-    color: var(--text-secondary);
-    font-weight: 500;
+.meta-row.links {
+    margin-top: var(--space-xs);
+}
+
+.meta-item {
+    font-size: inherit;
+    /* Inherit from row */
+    color: inherit;
+}
+
+.meta-item a {
+    color: var(--color-primary);
+    text-decoration: none;
+}
+
+.meta-item a:hover {
+    text-decoration: underline;
 }
 
-/* Main Content */
+/* ========================= */
+/*     MAIN CONTENT          */
+/* ========================= */
 .content {
-    max-width: 1800px;
-    /* Maximize width for charts */
+    max-width: 1600px;
+    width: 95%;
     margin: 0 auto;
-    padding: 2rem;
+    padding: 0 var(--space-md) var(--space-2xl);
 }
 
-/* Sections */
+/* ========================= */
+/*     SECTION STYLES        */
+/* ========================= */
 .section {
-    margin-bottom: 4rem;
+    margin-bottom: var(--space-2xl);
+    padding-top: var(--space-lg);
 }
 
 .section-header {
-    margin-bottom: 2rem;
     text-align: center;
+    margin-bottom: var(--space-md);
 }
 
 .section-header h2 {
-    font-size: 32px;
-    line-height: 1.125;
-    font-weight: 700;
-    letter-spacing: 0.004em;
-    margin-bottom: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    font-size: 36px;
+    font-weight: 600;
+    letter-spacing: -0.025em;
+    line-height: 1.1;
+    margin-bottom: var(--space-xs);
+    color: var(--color-text);
+}
+
+.section-header h2 svg {
+    width: 36px;
+    height: 36px;
+    color: var(--color-text-secondary);
 }
 
 .section-header p {
     font-size: 17px;
-    color: var(--text-secondary);
+    color: var(--color-text-muted);
+    max-width: 680px;
+    margin: 0 auto;
+    line-height: 1.5;
 }
 
-/* Toggle Buttons */
-.dimension-toggle {
-    display: flex;
-    justify-content: center;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
+/* Color-coded model type badges */
+.section-header .model-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 10px;
+    border-radius: var(--radius-pill);
+    font-size: 14px;
+    font-weight: 600;
 }
 
-.dim-btn {
-    padding: 8px 16px;
-    background: rgba(0, 0, 0, 0.05);
-    border: none;
-    border-radius: var(--radius-btn);
-    color: var(--text-primary);
-    font-size: 14px;
-    font-weight: 400;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-family: inherit;
+.section-header .model-badge.proprietary {
+    background: var(--color-proprietary-bg);
+    color: var(--color-proprietary);
 }
 
-.dim-btn:hover {
-    background: rgba(0, 0, 0, 0.1);
+.section-header .model-badge.opensource {
+    background: var(--color-opensource-bg);
+    color: var(--color-opensource);
 }
 
-.dim-btn.active {
-    background: var(--text-primary);
-    /* Black active state like Apple */
-    color: white;
+/* ========================= */
+/*     DIMENSION TOGGLE      */
+/* ========================= */
+.dimension-toggle {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: var(--space-md);
 }
 
+.dim-btn,
 .toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     padding: 10px 20px;
-    background: rgba(0, 0, 0, 0.05);
-    border: none;
-    border-radius: var(--radius-btn);
-    color: var(--text-primary);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-pill);
+    color: var(--color-text);
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: inherit;
+    transition: all 0.2s ease;
+    font-family: var(--font-system);
 }
 
+.dim-btn:hover,
 .toggle-btn:hover {
-    background: rgba(0, 0, 0, 0.12);
+    background: var(--color-background);
+    border-color: var(--color-text-muted);
 }
 
+.dim-btn.active,
 .toggle-btn.active {
-    background: var(--text-primary);
-    color: white;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    background: var(--color-text);
+    border-color: var(--color-text);
+    color: #ffffff;
 }
 
-/* Shared Legend for Scaling and Probing */
+/* ========================= */
+/*     SHARED LEGEND         */
+/* ========================= */
 .shared-legend {
     display: flex;
     justify-content: center;
-    flex-wrap: wrap;
-    gap: 1.5rem;
-    margin-bottom: 1.5rem;
-    padding: 1rem;
-    background: var(--bg-card);
-    border-radius: 12px;
-    box-shadow: var(--shadow-card);
+    gap: var(--space-md);
+    margin-bottom: var(--space-sm);
+    padding: var(--space-xs) var(--space-md);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
 }
 
 .legend-item {
@@ -215,120 +313,625 @@ body {
     align-items: center;
     gap: 0.5rem;
     font-size: 13px;
-    color: var(--text-primary);
+    color: var(--color-text-secondary);
 }
 
 .legend-color {
-    width: 24px;
+    width: 12px;
     height: 3px;
     border-radius: 2px;
 }
 
-/* Charts Grid */
+/* ========================= */
+/*     CHARTS GRID           */
+/* ========================= */
 .charts-grid {
     display: grid;
-    gap: 16px;
-    /* Tighter gap */
+    gap: var(--space-md);
 }
 
 .charts-grid.three-col {
     grid-template-columns: repeat(3, 1fr);
 }
 
+.charts-grid.two-col {
+    grid-template-columns: repeat(2, 1fr);
+}
+
 .charts-grid.single {
     grid-template-columns: 1fr;
-    max-width: 1000px;
-    margin: 0 auto;
 }
 
-/* Chart Card */
+/* ========================= */
+/*     CHART CARD            */
+/* ========================= */
 .chart-card {
-    background: var(--bg-card);
-    border-radius: var(--radius-card);
-    padding: 24px;
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    padding: 1rem;
+    /* Keeping compact padding */
+    border: 1px solid rgba(0, 0, 0, 0.03);
+    /* Extremely subtle border */
     box-shadow: var(--shadow-card);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    transition: all 0.2s ease;
 }
 
 .chart-card:hover {
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--shadow-card-hover);
+    transform: translateY(-2px);
 }
 
 .chart-card h3 {
-    font-size: 14px;
+    font-family: var(--font-mono);
+    font-size: 12px;
     font-weight: 600;
-    color: var(--text-secondary);
-    margin-bottom: 1rem;
+    color: var(--color-text-secondary);
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.08em;
+    margin-bottom: var(--space-xs);
 }
 
 .chart-card.wide {
-    padding: 32px;
+    padding: var(--space-md);
 }
 
-/* Chart Containers */
+/* ========================= */
+/*     CHART CONTAINERS      */
+/* ========================= */
 .chart-container {
-    height: 300px;
-    /* Reduced height */
+    height: 280px;
     width: 100%;
-    transition: opacity 0.3s ease;
 }
 
 .chart-container-tall {
-    height: 450px;
-    /* Reduced height */
-    transition: opacity 0.3s ease;
+    height: 380px;
     width: 100%;
 }
 
 .chart-container-double {
-    height: 600px;
-    /* Double height for error analysis */
+    height: 450px;
     width: 100%;
 }
 
-/* Footer */
-.footer {
+/* ========================= */
+/*     FRAMEWORK SECTION     */
+/* ========================= */
+.framework-section {
+    margin-bottom: var(--space-2xl);
+}
+
+.framework-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--space-xl);
+    justify-items: center;
+}
+
+.framework-card {
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    padding: var(--space-md);
+    box-shadow: var(--shadow-card);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    max-width: 1000px;
+}
+
+.framework-card .placeholder {
+    width: 100%;
+    height: 640px;
+    background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ed 100%);
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    font-size: 14px;
+    font-weight: 500;
+    border: 2px dashed var(--color-border);
+}
+
+.framework-card h3 {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text);
+    margin-top: var(--space-sm);
     text-align: center;
-    padding: 3rem 1rem;
-    color: var(--text-secondary);
-    font-size: 12px;
-    background: var(--bg-body);
-    border-top: 1px solid var(--border);
 }
 
-/* Responsive */
-@media (max-width: 1024px) {
+.framework-card img,
+.framework-card object {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--radius-md);
+}
+
+/* ========================= */
+/*     CAROUSEL / RESULTS    */
+/* ========================= */
+.carousel-wrapper {
+    position: relative;
+    overflow: hidden;
+}
+
+/* Gradient fade overlays */
+.carousel-wrapper::before,
+.carousel-wrapper::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 120px;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.carousel-wrapper::before {
+    left: 0;
+    background: linear-gradient(to right, var(--color-background) 0%, transparent 100%);
+}
+
+.carousel-wrapper::after {
+    right: 0;
+    background: linear-gradient(to left, var(--color-background) 0%, transparent 100%);
+}
+
+.carousel-track {
+    display: flex;
+    gap: var(--space-lg);
+    padding: var(--space-sm) 0;
+    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+    will-change: transform;
+}
+
+.carousel-card {
+    flex: 0 0 66.666%;
+    min-width: 0;
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    padding: var(--space-md);
+    box-shadow: var(--shadow-card);
+    transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
+}
+
+.carousel-card.active {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.carousel-card.side {
+    transform: scale(0.92);
+    opacity: 0.6;
+}
+
+.carousel-card .placeholder {
+    width: 100%;
+    height: 420px;
+    background: linear-gradient(135deg, #f0f0f2 0%, #e8e8ed 100%);
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-muted);
+    font-size: 14px;
+    font-weight: 500;
+    border: 2px dashed var(--color-border);
+}
+
+.carousel-card h4 {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--color-text);
+    margin-top: var(--space-sm);
+    text-align: center;
+}
+
+.carousel-card img {
+    width: 100%;
+    height: 420px;
+    object-fit: contain;
+    border-radius: var(--radius-md);
+}
+
+/* Carousel Navigation Buttons */
+.carousel-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 3;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.9);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--color-border);
+    color: var(--color-text);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-prev {
+    left: 20px;
+}
+
+.carousel-next {
+    right: 20px;
+}
+
+.carousel-btn:hover {
+    background: var(--color-text);
+    color: #ffffff;
+    border-color: var(--color-text);
+}
+
+.carousel-btn svg {
+    width: 22px;
+    height: 22px;
+}
+
+/* Carousel Dots */
+.carousel-dots {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-top: var(--space-md);
+}
+
+.carousel-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--color-border);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.carousel-dot:hover {
+    background: var(--color-text-muted);
+}
+
+.carousel-dot.active {
+    background: var(--color-text);
+    width: 24px;
+    border-radius: 4px;
+}
+
+/* ========================= */
+/*     FOOTER                */
+/* ========================= */
+footer {
+    text-align: center;
+    padding: var(--space-xl) var(--space-lg);
+    background: var(--color-background);
+    border-top: 1px solid var(--color-border);
+}
+
+footer p {
+    font-size: 13px;
+    color: var(--color-text-muted);
+}
+
+footer a {
+    color: var(--color-primary);
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+/* ========================= */
+/*     RESPONSIVE            */
+/* ========================= */
+@media (max-width: 1200px) {
     .charts-grid.three-col {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 900px) {
+
+    .charts-grid.three-col,
+    .charts-grid.two-col {
+        grid-template-columns: 1fr;
+    }
+
+    .framework-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .hero h1 {
+        font-size: 44px;
+    }
+
+    .section-header h2 {
+        font-size: 28px;
+    }
+
+    .content {
+        width: 100%;
+        padding: 0 var(--space-sm) var(--space-2xl);
+    }
+}
+
+@media (max-width: 600px) {
+    html {
+        font-size: 16px;
+    }
+
     .hero h1 {
         font-size: 36px;
     }
 
-    .subtitle {
+    .hero .subtitle {
         font-size: 20px;
     }
 
-    .charts-grid.three-col {
-        grid-template-columns: 1fr;
+    .section-header h2 {
+        font-size: 24px;
     }
 
-    .chart-container {
-        height: 300px;
+    .dimension-toggle {
+        flex-wrap: wrap;
     }
 
-    .chart-container-tall {
-        height: 400px;
+    .dim-btn,
+    .toggle-btn {
+        padding: 8px 16px;
+        font-size: 13px;
     }
 }
 
-/* Plotly Overrides */
-.js-plotly-plot .plotly .modebar {
-    display: none !important;
+/* ========================= */
+/*     TRAJECTORY / CHAT     */
+/* ========================= */
+.trajectory-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-card);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    /* Subtle border */
+    overflow: hidden;
+    /* Ensure rounded corners */
+}
+
+.chat-window {
+    height: 600px;
+    /* Fixed height for scrolling */
+    overflow-y: auto;
+    /* Enable vertical scroll */
+    padding: var(--space-md);
+    background: #f5f5f7;
+    /* Chat background */
+    font-size: 14px;
+}
+
+.chat-message {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--space-md);
+    max-width: 85%;
+    /* Limit width */
+    animation: fadeIn 0.3s ease;
+}
+
+.chat-message.role-agent {
+    align-self: flex-end;
+    /* Align right */
+    align-items: flex-end;
+    /* Align content inside to right */
+    margin-left: auto;
+}
+
+.chat-message.role-environment {
+    align-self: flex-start;
+    /* Align left */
+    align-items: flex-start;
+    margin-right: auto;
+}
+
+.message-role-label {
+    font-size: 11px;
+    color: var(--color-text-muted);
+    margin-bottom: 4px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0 4px;
+}
+
+.message-bubble {
+    padding: 12px 16px;
+    border-radius: 12px;
+    line-height: 1.5;
+    position: relative;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.role-agent .message-bubble {
+    background: #0071e3;
+    /* Apple Blue */
+    color: white;
+    border-bottom-right-radius: 2px;
+    /* Chat bubble effect */
+}
+
+/* Fix links/code in agent bubble to be readable on blue */
+.role-agent .message-bubble a {
+    color: white;
+    text-decoration: underline;
+}
+
+.role-agent .message-bubble code {
+    background: rgba(255, 255, 255, 0.2);
+    color: white;
+}
+
+.role-agent .message-bubble pre {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.role-agent .message-bubble pre code {
+    background: transparent;
+    color: white;
+}
+
+.role-environment .message-bubble {
+    background: white;
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+    border-bottom-left-radius: 2px;
+    /* Chat bubble effect */
+    font-family: var(--font-mono);
+    /* Monospace for data */
+    font-size: 13px;
+}
+
+.role-environment .message-bubble pre {
+    margin: 0;
+    white-space: pre-wrap;
+    /* Wrap long lines */
+    background: transparent;
+    border: none;
+    padding: 0;
+}
+
+/* Tool Call Styling */
+.tool-call-block {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+/* Force NO Wrap on Code and Allow Scroll */
+.message-bubble pre,
+.message-bubble code {
+    white-space: pre !important;
+    /* No wrapping */
+    word-break: normal !important;
+    overflow-x: auto;
+    /* Allow scroll */
+}
+
+/* Markdown Content Styling */
+.message-bubble table {
+    display: block;
+    /* Enable scroll behavior */
+    overflow-x: auto;
+    width: 100%;
+    border-collapse: collapse;
+    margin: 12px 0;
+    font-size: 13px;
+    font-family: var(--font-sans);
+    white-space: nowrap;
+    /* Force wide tables to scroll */
+}
+
+.message-bubble th,
+.message-bubble td {
+    padding: 8px 12px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    text-align: left;
+}
+
+.message-bubble th {
+    background: rgba(0, 0, 0, 0.03);
+    font-weight: 600;
+}
+
+.message-bubble tr:nth-child(even) {
+    background: rgba(0, 0, 0, 0.01);
+}
+
+.message-bubble p {
+    margin-bottom: 0.5em;
+}
+
+.message-bubble p:last-child {
+    margin-bottom: 0;
+}
+
+/* Terminal / Code Block Styling - Mac Shell Style */
+.message-bubble pre {
+    background: #282c34 !important;
+    /* Atom One Dark BG */
+    border-radius: 8px;
+    margin: 12px 0;
+    position: relative;
+    padding-top: 32px;
+    /* Space for header */
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.message-bubble pre::before {
+    content: "";
+    /* Or maybe "Terminal" or content from attribute? */
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 30px;
+    background: #21252b;
+    /* Darker header */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+    z-index: 10;
+    /* Removed Traffic lights */
+}
+
+.message-bubble pre code {
+    display: block;
+    padding: 12px 16px;
+    /* Removed manual color to let highlight.js work */
+    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
+    font-size: 13px;
+    line-height: 1.6;
+    background: transparent !important;
+}
+
+/* Scrollbar styling */
+.chat-window::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chat-window::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.chat-window::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+}
+
+.chat-window::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

trajectory.js

@@ -0,0 +1,142 @@
+
+// ============================================================================
+// AGENT TRAJECTORY - Chat Interface
+// ============================================================================
+
+let currentTrajScenario = 'mimic';
+
+function initTrajectory() {
+    if (typeof TRAJECTORY_DATA === 'undefined') {
+        setTimeout(initTrajectory, 500); // Wait for data load
+        return;
+    }
+
+    // Configure marked with highlight.js
+    if (typeof marked !== 'undefined') {
+        marked.setOptions({
+            highlight: function (code, lang) {
+                // Auto Format SQL
+                if (lang === 'sql' && typeof sqlFormatter !== 'undefined') {
+                    try {
+                        code = sqlFormatter.format(code, { language: 'sql', indent: '  ' });
+                    } catch (e) {
+                        console.warn('SQL Formatting failed:', e);
+                    }
+                }
+
+                // Highlight
+                if (lang && hljs.getLanguage(lang)) {
+                    return hljs.highlight(code, { language: lang }).value;
+                }
+                return hljs.highlightAuto(code).value;
+            },
+            breaks: true,
+            langPrefix: 'hljs language-' // Ensure .hljs class is added for themes
+        });
+    }
+
+    // Setup toggle buttons
+    document.querySelectorAll('[data-traj-scenario]').forEach(btn => {
+        btn.addEventListener('click', () => {
+            document.querySelectorAll('[data-traj-scenario]').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            currentTrajScenario = btn.dataset.trajScenario;
+            renderTrajectory(currentTrajScenario);
+        });
+    });
+
+    // Initial Render
+    renderTrajectory('mimic');
+}
+
+function renderTrajectory(scenario) {
+    const container = document.getElementById('chat-window');
+    const messages = TRAJECTORY_DATA[scenario];
+
+    if (!container || !messages) return;
+
+    container.innerHTML = '';
+
+    messages.forEach(msg => {
+        const msgDiv = document.createElement('div');
+        msgDiv.className = `chat-message role-${msg.role}`;
+
+        // Role Label
+        const roleLabel = document.createElement('div');
+        roleLabel.className = 'message-role-label';
+        // Capitalize 
+        roleLabel.textContent = msg.role.charAt(0).toUpperCase() + msg.role.slice(1);
+        if (msg.role === 'user') roleLabel.textContent = 'User Prompt';
+        msgDiv.appendChild(roleLabel);
+
+        // Bubble
+        const bubble = document.createElement('div');
+        bubble.className = 'message-bubble';
+
+        // Parse Markdown
+        let htmlContent = '';
+        if (typeof marked !== 'undefined') {
+            htmlContent = marked.parse(msg.content);
+        } else {
+            // Fallback
+            htmlContent = escapeHtml(msg.content).replace(/\n/g, '<br>');
+        }
+
+        const contentDiv = document.createElement('div');
+        contentDiv.innerHTML = htmlContent;
+        bubble.appendChild(contentDiv);
+        msgDiv.appendChild(bubble);
+        container.appendChild(msgDiv); // Append to DOM to calculate height
+
+        // Height Check (Post-render)
+        // 3 lines is approx 80-100px.
+        const COLLAPSE_HEIGHT = 200;
+
+        if (contentDiv.scrollHeight > COLLAPSE_HEIGHT + 20) {
+            contentDiv.style.cssText = `max-height: ${COLLAPSE_HEIGHT}px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, black 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);`;
+
+            const btn = document.createElement('button');
+            btn.textContent = 'Show More';
+            btn.style.cssText = 'display:block; margin: 8px auto 0; border:none; background: rgba(0,0,0,0.05); color: #0071e3; border-radius: 12px; padding: 4px 12px; cursor:pointer; font-size:12px; font-weight:500; transition: all 0.2s;';
+
+            if (msg.role === 'agent') {
+                btn.style.background = 'rgba(255,255,255,0.2)';
+                btn.style.color = 'white';
+            }
+
+            btn.onclick = () => {
+                if (contentDiv.style.maxHeight !== 'none') {
+                    // Expand
+                    contentDiv.style.maxHeight = 'none';
+                    contentDiv.style.maskImage = 'none';
+                    contentDiv.style.webkitMaskImage = 'none';
+                    btn.textContent = 'Show Less';
+                } else {
+                    // Collapse
+                    contentDiv.style.maxHeight = `${COLLAPSE_HEIGHT}px`;
+                    contentDiv.style.maskImage = 'linear-gradient(to bottom, black 60%, transparent 100%)';
+                    contentDiv.style.webkitMaskImage = 'linear-gradient(to bottom, black 60%, transparent 100%)';
+                    btn.textContent = 'Show More';
+                }
+            };
+
+            bubble.appendChild(btn);
+        }
+    });
+
+    container.scrollTop = 0;
+}
+
+function escapeHtml(text) {
+    if (!text) return '';
+    return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    initTrajectory();
+});