I want to improve this figure:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test-Time Scaling Across Modalities</title>
    <style>
        body {
            font-family: 'Times New Roman', serif;
            background-color: white;
            margin: 20px;
            color: #333;
        }
        
        .figure-container {
            max-width: 1200px;
            margin: 0 auto;
            border: 1px solid #ddd;
            padding: 20px;
            background-color: white;
        }
        
        .panels-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .panel {
            border: 1px solid #999;
            border-radius: 4px;
            padding: 15px;
            background-color: #fffcd4;
        }
        
        .panel-title {
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 15px;
            padding: 8px;
            border-radius: 4px;
            background-color: #f8f8f8;
            color: #333;
            border: 1px solid #ddd;
        }
        
        .token-visual {
            display: flex;
            justify-content: center;
            gap: 3px;
            margin: 8px 0;
        }
        
        .token {
            width: 20px;
            height: 15px;
            border: 1px solid #666;
            border-radius: 2px;
            font-size: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .discrete-token {
            background-color: #e9ecef;
            color: #495057;
        }
        
        .image-placeholder {
            width: 25px;
            height: 20px;
            border: 1px solid #666;
            border-radius: 2px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 6px;
            color: #666;
        }
        
        .search-visualization {
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            min-height: 140px;
            margin: 20px 0;
            gap: 20px;
        }
        
        .search-method-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            flex: 1;
        }
        
        .search-method-title {
            font-size: 11px;
            font-weight: bold;
            text-align: center;
        }
        
        .visualization-box {
            width: 100%;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        
        .performance-curve {
            height: 100px;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            position: relative;
            overflow: hidden;
            margin-bottom: 10px;
        }
        
        .curve-svg {
            width: 100%;
            height: 100%;
        }
        
        .grid-line {
            stroke: #f0f0f0;
            stroke-width: 0.5;
        }
        
        .key-insight {
            background-color: #f8f9fa;
            border: 1px solid #6c757d;
            border-radius: 4px;
            padding: 8px;
            font-size: 11px;
            font-weight: bold;
            text-align: center;
            color: #495057;
        }
        
        .continuous-space {
            width: 100px;
            height: 15px;
            background: linear-gradient(90deg, #dee2e6, #adb5bd, #868e96);
            border-radius: 8px;
            margin: 8px auto;
        }
        
        .axes-labels {
            position: absolute;
            bottom: 5px;
            left: 5px;
            font-size: 10px;
            color: #666;
        }
        
        .y-label {
            position: absolute;
            top: 10px;
            left: 5px;
            font-size: 10px;
            color: #666;
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }
        
        .trajectory-label {
            background-color: #f8f9fa;
            border-left: 3px solid #6c757d;
            border-radius: 4px;
            padding: 8px;
            font-size: 11px;
            font-weight: bold;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="figure-container">
        <div class="panels-container">
            <!-- Panel A: Language Models -->
            <div class="panel llm-panel">
                <div class="panel-title">A) Language Models<br>(Discrete, Sequential)</div>
                
                <div class="token-visual">
                    <div class="token discrete-token">T₁</div>
                    <div class="token discrete-token">T₂</div>
                    <div class="token discrete-token">T₃</div>
                    <div class="token discrete-token">...</div>
                </div>
                
                <div class="search-visualization">
                    <div class="search-method-container">
                        <div class="search-method-title">Random Search</div>
                        <div class="visualization-box">
                            <svg width="100" height="120" viewBox="0 0 100 120">
                                <!-- Root node -->
                                <circle cx="50" cy="10" r="5" fill="#2196f3"/>
                                
                                <!-- Branches from root to samples -->
                                <line x1="50" y1="15" x2="20" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="35" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="50" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="65" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="80" y2="30" stroke="#666" stroke-width="1"/>
                                
                                <!-- Sample lines -->
                                <line x1="20" y1="30" x2="20" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="20" cy="100" r="4" fill="#f44336"/>
                                
                                <line x1="35" y1="30" x2="35" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="35" cy="100" r="4" fill="#f44336"/>
                                
                                <line x1="50" y1="30" x2="50" y2="100" stroke="#4caf50" stroke-width="2"/>
                                <circle cx="50" cy="100" r="4" fill="#4caf50"/>
                                
                                <line x1="65" y1="30" x2="65" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="65" cy="100" r="4" fill="#f44336"/>
                                
                                <line x1="80" y1="30" x2="80" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="80" cy="100" r="4" fill="#f44336"/>
                                
                                <text x="50" y="115" font-size="8" text-anchor="middle" fill="#666">Independent samples</text>
                            </svg>
                        </div>
                    </div>
                    
                    <div class="search-method-container">
                        <div class="search-method-title">Tree Search</div>
                        <div class="visualization-box">
                            <svg width="140" height="120" viewBox="0 0 140 120">
                                <!-- Tree structure -->
                                <!-- Root -->
                                <circle cx="70" cy="10" r="5" fill="#2196f3"/>
                                
                                <!-- Level 1 branches -->
                                <line x1="70" y1="15" x2="40" y2="35" stroke="#666" stroke-width="2"/>
                                <line x1="70" y1="15" x2="70" y2="35" stroke="#666" stroke-width="2"/>
                                <line x1="70" y1="15" x2="100" y2="35" stroke="#666" stroke-width="2"/>
                                
                                <!-- Level 1 nodes -->
                                <circle cx="40" cy="35" r="4" fill="#4caf50"/>
                                <circle cx="70" cy="35" r="4" fill="#f44336"/>
                                <circle cx="100" cy="35" r="4" fill="#f44336"/>
                                
                                <!-- Level 2 branches (only from green node) -->
                                <line x1="40" y1="39" x2="25" y2="60" stroke="#666" stroke-width="2"/>
                                <line x1="40" y1="39" x2="55" y2="60" stroke="#666" stroke-width="2"/>
                                
                                <!-- Level 2 nodes -->
                                <circle cx="25" cy="60" r="4" fill="#4caf50"/>
                                <circle cx="55" cy="60" r="4" fill="#4caf50"/>
                                
                                <!-- Level 3 branches -->
                                <line x1="25" y1="64" x2="25" y2="85" stroke="#666" stroke-width="2"/>
                                <line x1="55" y1="64" x2="55" y2="85" stroke="#666" stroke-width="2"/>
                                
                                <!-- Level 3 nodes -->
                                <circle cx="25" cy="85" r="4" fill="#f44336"/>
                                <circle cx="55" cy="85" r="4" fill="#4caf50"/>
                                
                                <!-- Final path -->
                                <line x1="55" y1="89" x2="55" y2="105" stroke="#666" stroke-width="2"/>
                                <circle cx="55" cy="105" r="5" fill="#4caf50"/>
                                
                                <text x="70" y="115" font-size="8" text-anchor="middle" fill="#666">Pruned exploration</text>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <div class="performance-curve">
                    <div class="y-label">Accuracy</div>
                    <div class="axes-labels">Compute Budget →</div>
                    <svg class="curve-svg" viewBox="0 0 200 100">
                        <!-- Grid lines -->
                        <line x1="20" y1="20" x2="20" y2="90" class="grid-line"/>
                        <line x1="60" y1="20" x2="60" y2="90" class="grid-line"/>
                        <line x1="100" y1="20" x2="100" y2="90" class="grid-line"/>
                        <line x1="140" y1="20" x2="140" y2="90" class="grid-line"/>
                        <line x1="180" y1="20" x2="180" y2="90" class="grid-line"/>
                        
                        <!-- Random search curve (slower growth) - dotted -->
                        <path d="M 20 80 Q 60 60 100 50 Q 140 45 180 42" 
                              stroke="#f44336" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
                        <!-- Tree search curve (faster growth) - solid -->
                        <path d="M 20 80 Q 40 35 80 20 Q 120 12 180 10" 
                              stroke="#4caf50" stroke-width="3" fill="none"/>
                        
                        <!-- Labels -->
                        <text x="140" y="50" font-size="8" fill="#f44336">Random</text>
                        <text x="140" y="18" font-size="8" fill="#4caf50">Tree</text>
                    </svg>
                </div>
                
                <div class="key-insight">
                    Discrete tokens → effective tree search
                </div>
            </div>
            
            <!-- Panel B: Diffusion Models -->
            <div class="panel diffusion-panel">
                <div class="panel-title">B) Diffusion Models<br>(Continuous, Parallel)</div>
                
                <div class="continuous-space"></div>
                <div style="text-align: center; font-size: 10px; color: #666;">Continuous Space</div>
                
                <div class="search-visualization">
                    <div class="search-method-container">
                        <div class="search-method-title">Random Search</div>
                        <div class="visualization-box">
                            <svg width="120" height="100" viewBox="0 0 120 100">
                                <!-- Bell curve - proper Gaussian shape -->
                                <path d="M 10 70 Q 10 70 20 68 Q 30 50 40 35 Q 50 20 60 18 Q 70 20 80 35 Q 90 50 100 68 Q 110 70 110 70" 
                                      stroke="#666" stroke-width="2" fill="none"/>
                                
                                <!-- Lines from curve to samples -->
                                <line x1="60" y1="18" x2="60" y2="75" stroke="#666" stroke-width="1"/>
                                <line x1="30" y1="50" x2="30" y2="75" stroke="#666" stroke-width="1" stroke-dasharray="2,2"/>
                                <line x1="80" y1="35" x2="80" y2="75" stroke="#666" stroke-width="1"/>
                                <line x1="20" y1="68" x2="20" y2="75" stroke="#666" stroke-width="1" stroke-dasharray="2,2"/>
                                <line x1="90" y1="50" x2="90" y2="75" stroke="#666" stroke-width="1" stroke-dasharray="2,2"/>
                                <line x1="45" y1="30" x2="45" y2="75" stroke="#666" stroke-width="1" stroke-dasharray="2,2"/>
                                
                                <!-- Samples at bottom -->
                                <circle cx="60" cy="75" r="3" fill="#2196f3"/>
                                <circle cx="30" cy="75" r="3" fill="#f44336"/>
                                <circle cx="80" cy="75" r="3" fill="#4caf50"/>
                                <circle cx="20" cy="75" r="3" fill="#f44336"/>
                                <circle cx="90" cy="75" r="3" fill="#f44336"/>
                                <circle cx="45" cy="75" r="3" fill="#f44336"/>
                                
                                <text x="60" y="90" font-size="8" text-anchor="middle" fill="#666">Random sampling</text>
                            </svg>
                        </div>
                    </div>
                    
                    <div class="search-method-container">
                        <div class="search-method-title">Zero-Order Search</div>
                        <div class="visualization-box">
                            <svg width="120" height="100" viewBox="0 0 120 100">
                                <!-- Bell curve - proper Gaussian shape -->
                                <path d="M 10 70 Q 10 70 20 68 Q 30 50 40 35 Q 50 20 60 18 Q 70 20 80 35 Q 90 50 100 68 Q 110 70 110 70" 
                                      stroke="#666" stroke-width="2" fill="none"/>
                                
                                <!-- Lines from peak area to samples -->
                                <line x1="60" y1="18" x2="60" y2="75" stroke="#666" stroke-width="1"/>
                                <line x1="55" y1="19" x2="55" y2="75" stroke="#666" stroke-width="1"/>
                                <line x1="65" y1="19" x2="65" y2="75" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="20" x2="50" y2="75" stroke="#666" stroke-width="1" stroke-dasharray="2,2"/>
                                <line x1="70" y1="20" x2="70" y2="75" stroke="#666" stroke-width="1" stroke-dasharray="2,2"/>
                                
                                <!-- Samples clustered near peak -->
                                <circle cx="60" cy="75" r="3" fill="#2196f3"/>
                                <circle cx="55" cy="75" r="3" fill="#4caf50"/>
                                <circle cx="65" cy="75" r="3" fill="#4caf50"/>
                                <circle cx="50" cy="75" r="3" fill="#f44336"/>
                                <circle cx="70" cy="75" r="3" fill="#f44336"/>
                                
                                <text x="60" y="90" font-size="8" text-anchor="middle" fill="#666">Local optimization</text>
                            </svg>
                        </div>
                    </div>
                </div>
            
                
                <div class="performance-curve">
                    <div class="y-label">Quality</div>
                    <div class="axes-labels">Compute Budget →</div>
                    <svg class="curve-svg" viewBox="0 0 200 100">
                        <!-- Grid lines -->
                        <line x1="20" y1="20" x2="20" y2="90" class="grid-line"/>
                        <line x1="60" y1="20" x2="60" y2="90" class="grid-line"/>
                        <line x1="100" y1="20" x2="100" y2="90" class="grid-line"/>
                        <line x1="140" y1="20" x2="140" y2="90" class="grid-line"/>
                        <line x1="180" y1="20" x2="180" y2="90" class="grid-line"/>
                        
                        <!-- Random search curve (better performance) - solid -->
                        <path d="M 20 60 Q 60 45 100 35 Q 140 30 180 28" 
                              stroke="#4caf50" stroke-width="3" fill="none"/>
                        <!-- Tree search curve (worse) - dotted -->
                        <path d="M 20 65 Q 60 55 100 50 Q 140 48 180 47" 
                              stroke="#f44336" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
                        
                        <!-- Labels -->
                        <text x="120" y="35" font-size="8" fill="#4caf50">Random</text>
                        <text x="120" y="55" font-size="8" fill="#f44336">Tree</text>
                    </svg>
                </div>
                
                <div class="key-insight">
                    Continuous space → limited tree search<br>
                    <em style="font-size: 10px;">(Ma et al. 2025)</em>
                </div>
            </div>
            
            <!-- Panel C: Autoregressive Images -->
            <div class="panel autoregressive-panel">
                <div class="panel-title">C) Autoregressive Images<br>(Discrete, Sequential)</div>
                
                <div class="token-visual">
                    <div class="image-placeholder">IMG1</div>
                    <div class="image-placeholder">IMG2</div>
                    <div class="image-placeholder">IMG3</div>
                    <div class="image-placeholder">...</div>
                </div>
                
                <div class="search-visualization">
                    <div class="search-method-container">
                        <div class="search-method-title">Random Search</div>
                        <div class="visualization-box">
                            <svg width="100" height="120" viewBox="0 0 100 120">
                                <!-- Root node -->
                                <circle cx="50" cy="10" r="5" fill="#2196f3"/>
                                
                                <!-- Branches from root to samples -->
                                <line x1="50" y1="15" x2="20" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="35" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="50" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="65" y2="30" stroke="#666" stroke-width="1"/>
                                <line x1="50" y1="15" x2="80" y2="30" stroke="#666" stroke-width="1"/>
                                
                                <!-- Sample lines -->
                                <line x1="20" y1="30" x2="20" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="20" cy="100" r="4" fill="#f44336"/>
                                
                                <line x1="35" y1="30" x2="35" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="35" cy="100" r="4" fill="#f44336"/>
                                
                                <line x1="50" y1="30" x2="50" y2="100" stroke="#4caf50" stroke-width="2"/>
                                <circle cx="50" cy="100" r="4" fill="#4caf50"/>
                                
                                <line x1="65" y1="30" x2="65" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="65" cy="100" r="4" fill="#f44336"/>
                                
                                <line x1="80" y1="30" x2="80" y2="100" stroke="#f44336" stroke-width="2"/>
                                <circle cx="80" cy="100" r="4" fill="#f44336"/>
                                
                                <text x="50" y="115" font-size="8" text-anchor="middle" fill="#666">Independent images</text>
                            </svg>
                        </div>
                    </div>
                    
                    <div class="search-method-container">
                        <div class="search-method-title">Tree Search</div>
                        <div class="visualization-box">
                            <svg width="140" height="120" viewBox="0 0 140 120">
                                <!-- Tree structure for image generation -->
                                <!-- Root -->
                                <circle cx="70" cy="10" r="5" fill="#2196f3"/>
                                
                                <!-- Level 1 branches -->
                                <line x1="70" y1="15" x2="40" y2="35" stroke="#666" stroke-width="2"/>
                                <line x1="70" y1="15" x2="70" y2="35" stroke="#666" stroke-width="2"/>
                                <line x1="70" y1="15" x2="100" y2="35" stroke="#666" stroke-width="2"/>
                                
                                <!-- Level 1 nodes -->
                                <circle cx="40" cy="35" r="4" fill="#4caf50"/>
                                <circle cx="70" cy="35" r="4" fill="#f44336"/>
                                <circle cx="100" cy="35" r="4" fill="#f44336"/>
                                
                                <!-- Level 2 branches (only from green node) -->
                                <line x1="40" y1="39" x2="25" y2="60" stroke="#666" stroke-width="2"/>
                                <line x1="40" y1="39" x2="55" y2="60" stroke="#666" stroke-width="2"/>
                                
                                <!-- Level 2 nodes -->
                                <circle cx="25" cy="60" r="4" fill="#4caf50"/>
                                <circle cx="55" cy="60" r="4" fill="#4caf50"/>
                                
                                <!-- Level 3 branches -->
                                <line x1="25" y1="64" x2="25" y2="85" stroke="#666" stroke-width="2"/>
                                <line x1="55" y1="64" x2="55" y2="85" stroke="#666" stroke-width="2"/>
                                
                                <!-- Level 3 nodes -->
                                <circle cx="25" cy="85" r="4" fill="#f44336"/>
                                <circle cx="55" cy="85" r="4" fill="#4caf50"/>
                                
                                <!-- Final path -->
                                <line x1="55" y1="89" x2="55" y2="105" stroke="#666" stroke-width="2"/>
                                <circle cx="55" cy="105" r="5" fill="#4caf50"/>
                                
                                <text x="70" y="120" font-size="8" text-anchor="middle" fill="#666">Guided generation</text>
                            </svg>
                        </div>
                    </div>
                </div>
                
                <div class="performance-curve">
                    <div class="y-label">Quality</div>
                    <div class="axes-labels">Compute Budget →</div>
                    <svg class="curve-svg" viewBox="0 0 200 100">
                        <!-- Grid lines -->
                        <line x1="20" y1="20" x2="20" y2="90" class="grid-line"/>
                        <line x1="60" y1="20" x2="60" y2="90" class="grid-line"/>
                        <line x1="100" y1="20" x2="100" y2="90" class="grid-line"/>
                        <line x1="140" y1="20" x2="140" y2="90" class="grid-line"/>
                        <line x1="180" y1="20" x2="180" y2="90" class="grid-line"/>
                        
                        <!-- Random search curve - dotted -->
                        <path d="M 20 75 Q 60 55 100 45 Q 140 40 180 38" 
                              stroke="#f44336" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
                        <!-- Tree search curve - solid -->
                        <path d="M 20 75 Q 40 35 80 20 Q 120 12 180 8" 
                              stroke="#4caf50" stroke-width="3" fill="none"/>
                        
                        <!-- Labels -->
                        <text x="130" y="45" font-size="8" fill="#f44336">Random</text>
                        <text x="130" y="18" font-size="8" fill="#4caf50">Tree</text>
                    </svg>
                </div>
                
                <div class="key-insight">
                    Discrete visual tokens → tree search works
                </div>
            </div>
        </div>
    </div>
</body>
</html>

The problems are mainly with the diffusion panel, where the bell curve is not aligned and in general the bell curve is really ugly, the lines are off and the so are the coloured dots (none of them should be blue). Additionally stuff is not really aligned. Especially the quality graphs where the diffusion one is below the other two. Try to make general improvements And tell me if you need anything from me or if you think there is a better solution to making this figure perfect