Spaces:

droov
/

safeChoicesSimulation

Sleeping

App Files Files Community

dhruv575 commited on Jan 16

Commit

febf196

1 Parent(s): 426fb3b

Frontend updates

Browse files

Files changed (4) hide show

__pycache__/simulation_utils.cpython-314.pyc +0 -0
static/index.html +423 -310
static/script.js +263 -647
static/styles.css +717 -464

__pycache__/simulation_utils.cpython-314.pyc ADDED Viewed

Binary file (44.7 kB). View file

static/index.html CHANGED Viewed

@@ -4,369 +4,482 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Safe Choices - Prediction Market Simulation</title>
-    <link rel="stylesheet" href="/static/styles.css?v=8">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-    <!-- Top Navigation Bar -->
-    <header class="top-bar">
-        <div class="nav-container">
-            <div class="logo-section">
-                <h1 class="app-title">Safe Choices</h1>
             </div>
-            <div class="nav-info">
-                <span class="dataset-info">Polymarket 2025 Dataset</span>
             </div>
         </div>
     </header>
-    <!-- Main Container -->
-    <div class="main-container">
-        <!-- Left Sidebar - Navigation -->
         <aside class="sidebar">
-            <div class="sidebar-label">View</div>
-            <div class="view-tabs">
-                <button class="view-tab active" data-view="simulation" onclick="selectView('simulation')">
-                    <div class="tab-title">Simulation</div>
-                </button>
-                <button class="view-tab" data-view="methodology" onclick="selectView('methodology')">
-                    <div class="tab-title">Methodology</div>
-                </button>
             </div>
-            <div class="sidebar-label simulation-view-only">Simulation Type</div>
-            <div class="simulation-tabs simulation-view-only">
-                <button class="sim-tab active" data-sim="single" onclick="selectSimulation('single')">
-                    <div class="tab-title">Single Fund</div>
-                    <div class="tab-subtitle">All capital in one fund</div>
-                </button>
-                <button class="sim-tab" data-sim="threshold" onclick="selectSimulation('threshold')">
-                    <div class="tab-title">Single Fund Threshold</div>
-                    <div class="tab-subtitle">Stop at target return</div>
-                </button>
-                <button class="sim-tab" data-sim="multi" onclick="selectSimulation('multi')">
-                    <div class="tab-title">Multi Fund</div>
-                    <div class="tab-subtitle">Diversified portfolio</div>
-                </button>
             </div>
-        </aside>
-        <!-- Right Content Area -->
-        <div class="content-area">
-            <!-- Simulation Controls -->
-            <section class="controls-section">
-                <div class="controls-header">
-                    <h2>Parameters</h2>
                 </div>
-                <!-- Hidden default values -->
-                <input type="hidden" id="startingCapital" value="10000">
-                <input type="hidden" id="startDate" value="2025-01-01">
-                <input type="hidden" id="maxDuration" value="365">
-                <div class="controls-grid">
-                    <!-- Base Parameters -->
-                    <div class="control-group">
-                        <label class="control-label">Number of Simulations</label>
-                        <input type="number" id="numSimulations" class="control-input" value="100" min="10" max="100" step="10">
-                        <div class="control-subtitle">Monte Carlo runs (max 100)</div>
                     </div>
-                    <!-- Probability Thresholds -->
-                    <div class="control-group">
-                        <label class="control-label">Min Probability 7d</label>
-                        <input type="number" id="minProb7d" class="control-input" value="90" min="50" max="99" step="1">
-                        <div class="control-subtitle">Minimum probability 7 days before</div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label">Min Probability Current</label>
-                        <input type="number" id="minProbCurrent" class="control-input" value="90" min="50" max="99" step="1">
-                        <div class="control-subtitle">Minimum probability at investment</div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label">Days Before Resolution</label>
-                        <input type="number" id="daysBefore" class="control-input" value="1" min="1" max="7" step="1">
-                        <div class="control-subtitle">Investment timing before market closes</div>
-                    </div>
-                    <div class="control-group">
-                        <label class="control-label">Trading Frequency</label>
-                        <select id="investmentProbability" class="control-input">
-                            <option value="0.02">Low</option>
-                            <option value="0.04" selected>Medium</option>
-                            <option value="0.06">High</option>
-                        </select>
-                        <div class="control-subtitle">How often to invest when markets are available</div>
-                    </div>
-                    <!-- Threshold-specific controls -->
-                    <div class="control-group threshold-only">
-                        <label class="control-label">Target Return</label>
-                        <select id="targetReturn" class="control-input">
-                            <option value="4.14">4.14% (Treasury Rate)</option>
-                            <option value="10.56">10.56% (NASDAQ Average)</option>
-                            <option value="custom">Custom</option>
-                        </select>
-                        <input type="number" id="customTarget" class="control-input" style="display: none; margin-top: 8px;" min="1" max="50" step="0.1">
-                        <div class="control-subtitle">Stop when target reached</div>
-                    </div>
-                    <!-- Multi-fund specific controls -->
-                    <div class="control-group multi-only">
-                        <label class="control-label">Number of Funds</label>
-                        <input type="number" id="numFunds" class="control-input" value="5" min="2" max="10" step="1">
-                        <div class="control-subtitle">Independent funds (max 10)</div>
-                    </div>
-                </div>
-                <!-- Run Button -->
-                <div class="run-section">
-                    <button class="run-button" onclick="runSimulation()" id="runBtn">
-                        <span class="run-text">Run Simulation</span>
-                        <div class="run-spinner" style="display: none;"></div>
-                    </button>
-                    <div class="run-info">
-                        <span id="estimatedTime">Estimated: ~5-10 seconds</span>
                     </div>
-                </div>
-            </section>
-            <!-- Progress Bar -->
-            <section class="progress-section" style="display: none;">
-                <div class="progress-container">
-                    <div class="progress-label">
-                        <span id="progressText">Running simulation...</span>
-                        <span id="progressPercent">0%</span>
                     </div>
-                    <div class="progress-bar">
-                        <div class="progress-fill" id="progressFill"></div>
                     </div>
-                </div>
-            </section>
-            <!-- Results Section - Hidden until simulation runs -->
-            <section class="results-section" id="resultsSection" style="display: none;">
-                <div class="results-header">
-                    <h2>Results</h2>
-                    <button class="export-button" onclick="exportResults()" id="exportBtn">Export</button>
-                </div>
-                <!-- Summary Statistics -->
-                <div class="stats-grid">
-                    <div class="stat-card">
-                        <div class="stat-header">
-                            <h3>Performance</h3>
                         </div>
-                        <div class="stat-content">
-                            <div class="stat-item">
-                                <span class="stat-label">Average Return:</span>
-                                <span class="stat-value" id="avgReturn">--</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Median Return:</span>
-                                <span class="stat-value" id="medianReturn">--</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Success Rate:</span>
-                                <span class="stat-value" id="successRate">--</span>
-                            </div>
                         </div>
                     </div>
-                    <div class="stat-card">
-                        <div class="stat-header">
-                            <h3>Risk Metrics</h3>
-                        </div>
-                        <div class="stat-content">
-                            <div class="stat-item">
-                                <span class="stat-label">Bust Rate:</span>
-                                <span class="stat-value" id="bustRate">--</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Volatility:</span>
-                                <span class="stat-value" id="volatility">--</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Max Drawdown:</span>
-                                <span class="stat-value" id="maxDrawdown">--</span>
                             </div>
                         </div>
-                    </div>
-                    <div class="stat-card multi-stats">
-                        <div class="stat-header">
                             <h3>Portfolio Stats</h3>
-                        </div>
-                        <div class="stat-content">
-                            <div class="stat-item">
-                                <span class="stat-label">Avg Surviving Funds:</span>
-                                <span class="stat-value" id="avgSurvivingFunds">--</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Survivorship Rate:</span>
-                                <span class="stat-value" id="survivorshipRate">--</span>
                             </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Diversification Benefit:</span>
-                                <span class="stat-value" id="diversificationBenefit">--</span>
                             </div>
                         </div>
                     </div>
-                    <div class="stat-card threshold-stats">
-                        <div class="stat-header">
-                            <h3>Target Achievement</h3>
-                        </div>
-                        <div class="stat-content">
-                            <div class="stat-item">
-                                <span class="stat-label">Target Reached:</span>
-                                <span class="stat-value" id="targetReached">--</span>
                             </div>
-                            <div class="stat-item">
-                                <span class="stat-label">Avg Time to Target:</span>
-                                <span class="stat-value" id="avgTimeToTarget">--</span>
-                            </div>
-                            <div class="stat-item">
-                                <span class="stat-label">vs Never Stop:</span>
-                                <span class="stat-value" id="vsNeverStop">--</span>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <!-- Charts - Always Visible -->
-                <div class="charts-grid">
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Return Distribution</h3>
                         </div>
-                        <div class="chart-container">
-                            <canvas id="returnChart" width="400" height="200"></canvas>
                         </div>
                     </div>
-                    <div class="chart-card">
-                        <div class="chart-header">
-                            <h3>Capital Evolution</h3>
                         </div>
-                        <div class="chart-container">
-                            <canvas id="capitalChart" width="400" height="200"></canvas>
                         </div>
-                    </div>
-                    <div class="chart-card multi-chart">
-                        <div class="chart-header">
-                            <h3>Fund Survivorship</h3>
                         </div>
-                        <div class="chart-container">
-                            <canvas id="survivorshipChart" width="400" height="200"></canvas>
                         </div>
-                    </div>
-                </div>
-            </section>
-        </div>
-        <!-- Methodology Content -->
-        <div class="methodology-area" style="display: none;">
-            <section class="methodology-section">
-                <div class="methodology-content">
-                    <h1>Safe Choices</h1>
-                    <h2>An effort to assess the safety of "safe choices" on prediction markets</h2>
-                    <div class="methodology-intro">
-                        <p>Let's conduct an experiment. 50 hedge funds swindle investors into inundating their coffers with $100 in deployable assets each, operating something they call the <em>State Earthquake Trade</em>. Each chooses a different state and in our fictional setting, the probability that each state is hit by an earthquake over the course of a year is 10%. The hedge funds deploy all of their capital every year on a contract that will return a 1.11x multiple if their associated state is not hit by an earthquake.</p>
-                        <p>Over 100,000 simulations of 50 funds, the average, minimum, and maximum number of surviving hedge funds after 10 years were <strong>17.42, 4, and 32</strong> respectively.</p>
-                        <p>These 17 hedge funds will have produced 11% returns year on year for 10 years, an excellent outcome by all standards. In this fictional realm where market probabilities are strictly equivalent to the odds they trade at (i.e. a world where the strong form of Fama's Efficient Market Hypothesis holds true), luck becomes the differentiating factor between visionaries of the investing world and going bust.</p>
-                    </div>
-                    <h3>Research Questions</h3>
-                    <p>We aim to explore the efficiency of "safe choices" (markets trading at ≥90 cents 24 hours before resolution) and "very safe choices" (≥95 cents). Key questions include:</p>
-                    <ul>
-                        <li>How often will traders making random walks across these markets end up with nothing?</li>
-                        <li>How often will they beat the market?</li>
-                        <li>If they stop at a certain return threshold (e.g., 12%), how often will they make it there?</li>
-                        <li>Were they to deploy capital amongst several smaller funds, would they have a higher survivorship rate?</li>
-                    </ul>
-                    <div class="hypothesis-box">
-                        <strong>Hypothesis:</strong> Inefficiencies in "safe" markets provide opportunities for positive expected value trades and ROI greater than investing in traditional benchmarks such as the risk-free rate.
-                    </div>
-                    <h3>Dataset Collection</h3>
-                    <p>We collect data through the Polymarket Gamma API (filtering markets by end date) and the CLOB API (fetching price history via CLOB token id).</p>
-                    <p>Markets are filtered to exclude those with inherent variability:</p>
-                    <ul>
-                        <li><strong>Sports:</strong> NFL, NBA, MLB, NHL, UFC, Soccer, etc.</li>
-                        <li><strong>Esports:</strong> LoL, Dota, CS:GO, Valorant, etc.</li>
-                        <li><strong>Crypto:</strong> Bitcoin, Ethereum, price predictions, etc.</li>
-                        <li><strong>Weather:</strong> Temperature, rain, storms, etc.</li>
-                    </ul>
-                    <p>For remaining markets, we log price history every 24 hours from 7 days before to 1 day before resolution. The dataset covers 2024-2025 and is available on <a href="https://www.kaggle.com/datasets/dhruvgup/polymarket-closed-2025-markets-7-day-price-history/data" target="_blank">Kaggle</a>.</p>
-                    <h3>Dataset Exploration</h3>
-                    <p><strong>Key Questions Addressed:</strong></p>
-                    <ol>
-                        <li><strong>Probability Calibration:</strong> What percentage of markets at different probability thresholds (90-95%, 95-98%, 98-99%, 99-100%) actually resolve to the expected outcome?</li>
-                        <li><strong>Confidence Intervals:</strong> Win rate and 95% confidence intervals for each probability band</li>
-                        <li><strong>Time Horizon Analysis:</strong> Comparison of outcomes at 48 hours vs. 7 days before resolution</li>
-                        <li><strong>Distribution Analysis:</strong> Volume-weighted vs. unweighted win rates</li>
-                        <li><strong>Expected Value Calculation:</strong> Expected return for each probability band</li>
-                    </ol>
-                    <h3>Simulation Model</h3>
-                    <div class="sim-type-box">
-                        <p>The simulation uses a <strong>day-by-day investment decision model</strong>:</p>
-                        <ol>
-                            <li>Each day, if not invested, decide to invest with probability <strong>α</strong> (investment_probability)</li>
-                            <li>If investing, select uniformly at random from markets that resolve exactly `days_before` days from now and meet thresholds</li>
-                            <li>Remain "locked in" until market resolves, then free to invest again</li>
-                            <li>Continue until: bust, reach target return, or simulation period ends</li>
-                        </ol>
-                        <p><strong>α controls trading frequency:</strong> Low (0.1) = cautious, High (0.2) = aggressive</p>
-                    </div>
-                    <h3>Simulation Types</h3>
-                    <div class="sim-type-box">
-                        <h4>1. Single Fund Simulation</h4>
-                        <p>A single trader deploys all capital sequentially across safe markets, reinvesting all winnings.</p>
-                        <p><strong>Parameters:</strong> starting_capital ($10,000), days_before (1-7), min_prob_7d (0.90), min_prob_current (0.90), investment_probability (α), max_duration_days (365)</p>
-                    </div>
-                    <div class="sim-type-box">
-                        <h4>2. Single Fund Threshold Simulation</h4>
-                        <p>Identical to Single Fund but with target return thresholds—trading stops when target is reached.</p>
-                        <p><strong>Benchmarks:</strong> Treasury Rate (4.14%) or NASDAQ Average (10.56%)</p>
-                    </div>
-                    <div class="sim-type-box">
-                        <h4>3. Multi-Fund Simulation</h4>
-                        <p>Capital is divided into multiple independent funds, each operating as separate single funds. Tests diversification benefits.</p>
-                        <p><strong>Parameters:</strong> n_funds (1, 3, 5, or 10 funds), capital divided equally, same α for all funds</p>
-                    </div>
-                    <h3>Technical Implementation</h3>
-                    <ul>
-                        <li>Uses actual Polymarket data filtered for 2025+ resolution dates</li>
-                        <li>Vectorized operations for performance (1000 simulations in ~10-20 seconds)</li>
-                        <li>Left-skewed exponential market selection using skew_factor</li>
-                        <li>Binary outcomes: win = 1/probability return, loss = total loss</li>
-                        <li>Reproducible results via random seeds</li>
-                    </ul>
-                    <h3>Limitations</h3>
-                    <p>Volume and market movement: If we count the starting capital as $10,000 distributed over 5 funds, we may not need to worry about available liquidity. However, were we to scale this experiment up, this becomes a real concern.</p>
-                </div>
-            </section>
         </div>
-    </div>
-    <script src="/static/script.js?v=8"></script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Safe Choices - Prediction Market Simulation</title>
+    <link rel="stylesheet" href="/static/styles.css?v=10">
+    <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@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <div class="brand">
+                <div class="brand-icon">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                        <path d="M2 17l10 5 10-5"/>
+                        <path d="M2 12l10 5 10-5"/>
+                    </svg>
+                </div>
+                <div class="brand-text">
+                    <h1>Safe Choices</h1>
+                    <span class="brand-tagline">Prediction Market Simulator</span>
+                </div>
             </div>
+            <div class="header-meta">
+                <div class="data-badge">
+                    <span class="badge-dot"></span>
+                    Polymarket 2025
+                </div>
             </div>
         </div>
     </header>
+    <!-- Main Layout -->
+    <main class="main">
+        <!-- Sidebar -->
         <aside class="sidebar">
+            <!-- View Toggle -->
+            <div class="sidebar-section">
+                <div class="section-label">View</div>
+                <div class="toggle-group">
+                    <button class="toggle-btn active" data-view="simulation" onclick="selectView('simulation')">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="3" width="18" height="18" rx="2"/>
+                            <path d="M3 9h18"/>
+                            <path d="M9 21V9"/>
+                        </svg>
+                        Simulator
+                    </button>
+                    <button class="toggle-btn" data-view="methodology" onclick="selectView('methodology')">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                            <path d="M14 2v6h6"/>
+                            <path d="M16 13H8"/>
+                            <path d="M16 17H8"/>
+                            <path d="M10 9H8"/>
+                        </svg>
+                        Methodology
+                    </button>
+                </div>
             </div>
+            <!-- Simulation Type -->
+            <div class="sidebar-section simulation-view-only">
+                <div class="section-label">Strategy</div>
+                <div class="strategy-cards">
+                    <button class="strategy-card active" data-sim="single" onclick="selectSimulation('single')">
+                        <div class="strategy-icon">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/>
+                                <path d="M12 6v6l4 2"/>
+                            </svg>
+                        </div>
+                        <div class="strategy-info">
+                            <span class="strategy-name">Single Fund</span>
+                            <span class="strategy-desc">All-in sequential betting</span>
+                        </div>
+                    </button>
+                    <button class="strategy-card" data-sim="threshold" onclick="selectSimulation('threshold')">
+                        <div class="strategy-icon">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                                <polyline points="22 4 12 14.01 9 11.01"/>
+                            </svg>
+                        </div>
+                        <div class="strategy-info">
+                            <span class="strategy-name">Target Return</span>
+                            <span class="strategy-desc">Stop at profit goal</span>
+                        </div>
+                    </button>
+                    <button class="strategy-card" data-sim="multi" onclick="selectSimulation('multi')">
+                        <div class="strategy-icon">
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="3" width="7" height="7"/>
+                                <rect x="14" y="3" width="7" height="7"/>
+                                <rect x="14" y="14" width="7" height="7"/>
+                                <rect x="3" y="14" width="7" height="7"/>
+                            </svg>
+                        </div>
+                        <div class="strategy-info">
+                            <span class="strategy-name">Multi Fund</span>
+                            <span class="strategy-desc">Diversified portfolio</span>
+                        </div>
+                    </button>
+                </div>
             </div>
+            <!-- Quick Info -->
+            <div class="sidebar-section simulation-view-only">
+                <div class="quick-stats">
+                    <div class="quick-stat">
+                        <span class="quick-stat-value" id="marketCount">4,265</span>
+                        <span class="quick-stat-label">Markets</span>
+                    </div>
+                    <div class="quick-stat">
+                        <span class="quick-stat-value">2025</span>
+                        <span class="quick-stat-label">Dataset</span>
+                    </div>
                 </div>
+            </div>
+        </aside>
+        <!-- Content -->
+        <div class="content">
+            <!-- Simulation View -->
+            <div class="simulation-content" id="simulationContent">
+                <!-- Parameters Panel -->
+                <section class="panel parameters-panel">
+                    <div class="panel-header">
+                        <h2>
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="3"/>
+                                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+                            </svg>
+                            Parameters
+                        </h2>
                     </div>
+                    <!-- Hidden defaults -->
+                    <input type="hidden" id="startingCapital" value="10000">
+                    <input type="hidden" id="startDate" value="2025-01-01">
+                    <input type="hidden" id="maxDuration" value="365">
+                    <div class="params-grid">
+                        <!-- Core Parameters -->
+                        <div class="param-group">
+                            <label class="param-label">
+                                Simulations
+                                <span class="param-hint" title="Number of Monte Carlo runs">?</span>
+                            </label>
+                            <div class="param-input-wrap">
+                                <input type="number" id="numSimulations" class="param-input" value="100" min="10" max="100" step="10">
+                                <span class="param-unit">runs</span>
+                            </div>
+                        </div>
+                        <div class="param-group">
+                            <label class="param-label">
+                                Days Before
+                                <span class="param-hint" title="Days before market closes to invest">?</span>
+                            </label>
+                            <div class="param-input-wrap">
+                                <input type="number" id="daysBefore" class="param-input" value="1" min="1" max="7" step="1">
+                                <span class="param-unit">days</span>
+                            </div>
+                        </div>
+                        <div class="param-group">
+                            <label class="param-label">
+                                Min Prob @ 7d
+                                <span class="param-hint" title="Minimum probability 7 days before resolution">?</span>
+                            </label>
+                            <div class="param-input-wrap">
+                                <input type="number" id="minProb7d" class="param-input" value="90" min="50" max="99" step="1">
+                                <span class="param-unit">%</span>
+                            </div>
+                        </div>
+                        <div class="param-group">
+                            <label class="param-label">
+                                Min Prob @ Entry
+                                <span class="param-hint" title="Minimum probability at investment time">?</span>
+                            </label>
+                            <div class="param-input-wrap">
+                                <input type="number" id="minProbCurrent" class="param-input" value="90" min="50" max="99" step="1">
+                                <span class="param-unit">%</span>
+                            </div>
+                        </div>
+                        <div class="param-group">
+                            <label class="param-label">
+                                Trading Frequency
+                                <span class="param-hint" title="How often to trade when opportunities exist">?</span>
+                            </label>
+                            <select id="investmentProbability" class="param-input param-select">
+                                <option value="0.02">Conservative</option>
+                                <option value="0.04" selected>Moderate</option>
+                                <option value="0.06">Aggressive</option>
+                            </select>
+                        </div>
+                        <!-- Threshold-specific -->
+                        <div class="param-group threshold-only">
+                            <label class="param-label">
+                                Target Return
+                                <span class="param-hint" title="Stop trading when this return is reached">?</span>
+                            </label>
+                            <select id="targetReturn" class="param-input param-select">
+                                <option value="4.14">4.14% (Treasury)</option>
+                                <option value="10.56">10.56% (NASDAQ)</option>
+                                <option value="custom">Custom...</option>
+                            </select>
+                            <input type="number" id="customTarget" class="param-input custom-target-input" min="1" max="100" step="0.1" placeholder="Enter %">
+                        </div>
+                        <!-- Multi-fund specific -->
+                        <div class="param-group multi-only">
+                            <label class="param-label">
+                                Number of Funds
+                                <span class="param-hint" title="Split capital across independent funds">?</span>
+                            </label>
+                            <div class="param-input-wrap">
+                                <input type="number" id="numFunds" class="param-input" value="5" min="2" max="10" step="1">
+                                <span class="param-unit">funds</span>
+                            </div>
+                        </div>
                     </div>
+                    <!-- Run Button -->
+                    <div class="run-container">
+                        <button class="run-btn" onclick="runSimulation()" id="runBtn">
+                            <svg class="run-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="5 3 19 12 5 21 5 3"/>
+                            </svg>
+                            <span class="run-text">Run Simulation</span>
+                            <div class="run-spinner"></div>
+                        </button>
+                        <span class="run-estimate" id="estimatedTime">~5-10 seconds</span>
                     </div>
+                </section>
+                <!-- Progress Bar -->
+                <section class="panel progress-panel" id="progressPanel">
+                    <div class="progress-content">
+                        <div class="progress-header">
+                            <span id="progressText">Initializing...</span>
+                            <span id="progressPercent">0%</span>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-fill" id="progressFill"></div>
+                        </div>
                     </div>
+                </section>
+                <!-- Results Section -->
+                <section class="results" id="resultsSection">
+                    <!-- Key Metrics -->
+                    <div class="metrics-row">
+                        <div class="metric-card metric-primary">
+                            <div class="metric-label">Average Return</div>
+                            <div class="metric-value" id="avgReturn">--</div>
                         </div>
+                        <div class="metric-card">
+                            <div class="metric-label">Median Return</div>
+                            <div class="metric-value" id="medianReturn">--</div>
+                        </div>
+                        <div class="metric-card">
+                            <div class="metric-label">Success Rate</div>
+                            <div class="metric-value" id="successRate">--</div>
+                        </div>
+                        <div class="metric-card metric-risk">
+                            <div class="metric-label">Bust Rate</div>
+                            <div class="metric-value" id="bustRate">--</div>
                         </div>
                     </div>
+                    <!-- Secondary Stats -->
+                    <div class="stats-row">
+                        <div class="stat-panel">
+                            <h3>Risk Analysis</h3>
+                            <div class="stat-list">
+                                <div class="stat-item">
+                                    <span class="stat-label">Volatility</span>
+                                    <span class="stat-value" id="volatility">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Max Drawdown</span>
+                                    <span class="stat-value" id="maxDrawdown">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">5th Percentile</span>
+                                    <span class="stat-value" id="percentile5">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">95th Percentile</span>
+                                    <span class="stat-value" id="percentile95">--</span>
+                                </div>
                             </div>
                         </div>
+                        <div class="stat-panel multi-stats">
                             <h3>Portfolio Stats</h3>
+                            <div class="stat-list">
+                                <div class="stat-item">
+                                    <span class="stat-label">Surviving Funds</span>
+                                    <span class="stat-value" id="avgSurvivingFunds">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Survivorship Rate</span>
+                                    <span class="stat-value" id="survivorshipRate">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Diversification</span>
+                                    <span class="stat-value" id="diversificationBenefit">--</span>
+                                </div>
                             </div>
+                        </div>
+                        <div class="stat-panel threshold-stats">
+                            <h3>Target Performance</h3>
+                            <div class="stat-list">
+                                <div class="stat-item">
+                                    <span class="stat-label">Target Reached</span>
+                                    <span class="stat-value" id="targetReached">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">Avg Time to Target</span>
+                                    <span class="stat-value" id="avgTimeToTarget">--</span>
+                                </div>
+                                <div class="stat-item">
+                                    <span class="stat-label">vs Never Stop</span>
+                                    <span class="stat-value" id="vsNeverStop">--</span>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Charts -->
+                    <div class="charts-row">
+                        <div class="chart-panel">
+                            <div class="chart-header">
+                                <h3>Return Distribution</h3>
+                                <button class="export-btn" onclick="exportResults()" id="exportBtn">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                        <polyline points="7 10 12 15 17 10"/>
+                                        <line x1="12" y1="15" x2="12" y2="3"/>
+                                    </svg>
+                                    Export
+                                </button>
                             </div>
+                            <div class="chart-container">
+                                <canvas id="returnChart"></canvas>
                             </div>
                         </div>
+                        <div class="chart-panel">
+                            <div class="chart-header">
+                                <h3>Capital Evolution</h3>
+                            </div>
+                            <div class="chart-container">
+                                <canvas id="capitalChart"></canvas>
+                            </div>
                         </div>
+                        <div class="chart-panel multi-chart">
+                            <div class="chart-header">
+                                <h3>Fund Survivorship</h3>
+                            </div>
+                            <div class="chart-container">
+                                <canvas id="survivorshipChart"></canvas>
+                            </div>
                         </div>
                     </div>
+                </section>
+            </div>
+            <!-- Methodology View -->
+            <div class="methodology-content" id="methodologyContent">
+                <article class="article">
+                    <header class="article-header">
+                        <h1>Safe Choices</h1>
+                        <p class="article-subtitle">Assessing the efficiency of "safe bets" on prediction markets</p>
+                    </header>
+                    <section class="article-section">
+                        <div class="callout callout-intro">
+                            <p>Imagine 50 hedge funds, each deploying $100 on a "State Earthquake Trade." Each fund bets on their state NOT being hit by an earthquake (10% annual probability), earning 1.11x if correct.</p>
+                            <p>After 10 years across 100,000 simulations: <strong>17.42 funds survive on average</strong> (range: 4-32). These survivors produced 11% annual returns for a decade. In an efficient market, luck becomes the differentiating factor between investment legends and bankruptcy.</p>
                         </div>
+                    </section>
+                    <section class="article-section">
+                        <h2>Research Questions</h2>
+                        <p>We explore the efficiency of "safe choices" (markets trading at 90+ cents before resolution):</p>
+                        <ul class="article-list">
+                            <li>How often will traders making random walks across these markets go bust?</li>
+                            <li>How often will they beat traditional benchmarks?</li>
+                            <li>Does stopping at a return threshold (e.g., 12%) improve outcomes?</li>
+                            <li>Does splitting capital across multiple funds improve survivorship?</li>
+                        </ul>
+                        <div class="callout callout-hypothesis">
+                            <strong>Hypothesis:</strong> Inefficiencies in "safe" markets provide opportunities for positive expected value trades exceeding traditional benchmarks like the risk-free rate.
                         </div>
+                    </section>
+                    <section class="article-section">
+                        <h2>Dataset</h2>
+                        <p>Data collected via Polymarket's Gamma API and CLOB API, filtering out high-variability categories:</p>
+                        <div class="tag-group">
+                            <span class="tag tag-excluded">Sports</span>
+                            <span class="tag tag-excluded">Esports</span>
+                            <span class="tag tag-excluded">Crypto Prices</span>
+                            <span class="tag tag-excluded">Weather</span>
                         </div>
+                        <p>For remaining markets, we log probability snapshots from 7 days to 1 day before resolution. The dataset covers 2024-2025 and is available on <a href="https://www.kaggle.com/datasets/dhruvgup/polymarket-closed-2025-markets-7-day-price-history/data" target="_blank" rel="noopener">Kaggle</a>.</p>
+                    </section>
+                    <section class="article-section">
+                        <h2>Simulation Model</h2>
+                        <div class="model-steps">
+                            <div class="model-step">
+                                <span class="step-num">1</span>
+                                <span class="step-text">Each day, decide to invest with probability <strong>alpha</strong> (trading frequency)</span>
+                            </div>
+                            <div class="model-step">
+                                <span class="step-num">2</span>
+                                <span class="step-text">Select uniformly at random from eligible markets meeting thresholds</span>
+                            </div>
+                            <div class="model-step">
+                                <span class="step-num">3</span>
+                                <span class="step-text">Remain locked until resolution, then reinvest winnings</span>
+                            </div>
+                            <div class="model-step">
+                                <span class="step-num">4</span>
+                                <span class="step-text">Continue until: bust, target reached, or simulation ends</span>
+                            </div>
                         </div>
+                    </section>
+                    <section class="article-section">
+                        <h2>Strategies</h2>
+                        <div class="strategy-explainer">
+                            <div class="strategy-box">
+                                <h3>Single Fund</h3>
+                                <p>Deploy all capital sequentially across safe markets, reinvesting all winnings. High risk, high reward.</p>
+                            </div>
+                            <div class="strategy-box">
+                                <h3>Target Return</h3>
+                                <p>Same as Single Fund but stop trading once a target return (e.g., Treasury rate or NASDAQ average) is reached.</p>
+                            </div>
+                            <div class="strategy-box">
+                                <h3>Multi Fund</h3>
+                                <p>Split capital into N independent funds. Tests whether diversification improves survivorship rates.</p>
+                            </div>
+                        </div>
+                    </section>
+                    <section class="article-section">
+                        <h2>Technical Notes</h2>
+                        <ul class="article-list">
+                            <li>Uses actual Polymarket data filtered for 2025+ resolution</li>
+                            <li>Vectorized operations for performance (~1000 sims in 10-20s)</li>
+                            <li>Binary outcomes: win = 1/probability return, loss = total loss</li>
+                            <li>Reproducible results via random seeds</li>
+                        </ul>
+                    </section>
+                    <section class="article-section">
+                        <h2>Limitations</h2>
+                        <p>At $10,000 scale distributed across funds, liquidity isn't a concern. However, scaling this strategy significantly would face real liquidity constraints and potential market impact.</p>
+                    </section>
+                </article>
+            </div>
         </div>
+    </main>
+    <script src="/static/script.js?v=10"></script>
 </body>
 </html>

static/script.js CHANGED Viewed

@@ -1,213 +1,199 @@
-// Global variables
 let currentSimType = 'single';
 let simulationResults = null;
 let charts = {};
-// Initialize the application
-document.addEventListener('DOMContentLoaded', function() {
-    initializeDefaults();
     setupEventListeners();
     updateEstimatedTime();
     initializeEmptyCharts();
-});
-// Initialize default values and constraints
-function initializeDefaults() {
-    // Set minimum start date and default to 2025-01-01
-    const startDateInput = document.getElementById('startDate');
-    const defaultDate = new Date('2025-01-01');
-    startDateInput.value = defaultDate.toISOString().split('T')[0];
-    startDateInput.min = '2025-01-01';
-    // Initialize target return dropdown handler
-    document.getElementById('targetReturn').addEventListener('change', function() {
-        const customInput = document.getElementById('customTarget');
-        if (this.value === 'custom') {
-            customInput.style.display = 'block';
-            customInput.value = '12.0';
-        } else {
-            customInput.style.display = 'none';
-        }
-    });
 }
-// Setup event listeners
 function setupEventListeners() {
-    // Input validation
-    document.getElementById('numSimulations').addEventListener('input', function() {
-        this.value = Math.min(Math.max(parseInt(this.value) || 10, 10), 100);
         updateEstimatedTime();
     });
-    document.getElementById('numFunds').addEventListener('input', function() {
-        this.value = Math.min(Math.max(parseInt(this.value) || 2, 2), 10);
     });
-    // Update estimated time when parameters change
-    const timeInputs = ['numSimulations', 'maxDuration', 'numFunds'];
-    timeInputs.forEach(id => {
-        document.getElementById(id).addEventListener('input', updateEstimatedTime);
     });
-    // Real-time validation
-    const inputs = document.querySelectorAll('.control-input');
-    inputs.forEach(input => {
         input.addEventListener('input', validateInputs);
     });
 }
-// Current view state
-let currentView = 'simulation';
-// Select view (simulation or methodology)
 function selectView(view) {
     currentView = view;
-    // Update view tab appearance
-    document.querySelectorAll('.view-tab').forEach(tab => {
-        tab.classList.remove('active');
     });
-    document.querySelector(`[data-view="${view}"]`).classList.add('active');
-    // Show/hide content areas
-    const contentArea = document.querySelector('.content-area');
-    const methodologyArea = document.querySelector('.methodology-area');
     if (view === 'simulation') {
-        contentArea.style.display = 'flex';
-        methodologyArea.style.display = 'none';
         document.querySelectorAll('.simulation-view-only').forEach(el => {
             el.classList.remove('hidden');
         });
     } else {
-        contentArea.style.display = 'none';
-        methodologyArea.style.display = 'block';
         document.querySelectorAll('.simulation-view-only').forEach(el => {
             el.classList.add('hidden');
         });
     }
 }
-// Select simulation type
 function selectSimulation(type) {
     currentSimType = type;
-    // Update tab appearance
-    document.querySelectorAll('.sim-tab').forEach(tab => {
-        tab.classList.remove('active');
     });
-    document.querySelector(`[data-sim="${type}"]`).classList.add('active');
-    // Show/hide conditional controls using classes
     document.querySelectorAll('.threshold-only').forEach(el => {
         el.classList.toggle('visible', type === 'threshold');
     });
     document.querySelectorAll('.multi-only').forEach(el => {
         el.classList.toggle('visible', type === 'multi');
     });
-    updateEstimatedTime();
-}
-// Update estimated execution time
-function updateEstimatedTime() {
-    const numSims = parseInt(document.getElementById('numSimulations').value) || 100;
-    const maxDuration = parseInt(document.getElementById('maxDuration').value) || 365;
-    const numFunds = currentSimType === 'multi' ? (parseInt(document.getElementById('numFunds').value) || 5) : 1;
-    // Rough estimation based on complexity
-    let baseTime = numSims * 0.05; // ~50ms per simulation
-    baseTime *= (maxDuration / 365); // Scale by duration
-    if (currentSimType === 'multi') {
-        baseTime *= Math.sqrt(numFunds); // Multi-fund overhead
-    }
-    const estimatedSeconds = Math.max(2, Math.ceil(baseTime));
-    let timeText = '';
-    if (estimatedSeconds < 60) {
-        timeText = `~${estimatedSeconds} seconds`;
-    } else {
-        const minutes = Math.ceil(estimatedSeconds / 60);
-        timeText = `~${minutes} minute${minutes > 1 ? 's' : ''}`;
-    }
-    document.getElementById('estimatedTime').textContent = `Estimated time: ${timeText}`;
 }
-// Validate all inputs
 function validateInputs() {
     const errors = [];
-    // Check required fields
-    const startingCapital = parseFloat(document.getElementById('startingCapital').value);
-    if (!startingCapital || startingCapital < 1000) {
-        errors.push('Starting capital must be at least $1,000');
-    }
-    const startDate = new Date(document.getElementById('startDate').value);
-    const minDate = new Date('2025-01-01');
-    if (startDate < minDate) {
-        errors.push('Start date must be 2025-01-01 or later');
-    }
     const minProb7d = parseFloat(document.getElementById('minProb7d').value);
     const minProbCurrent = parseFloat(document.getElementById('minProbCurrent').value);
     if (minProb7d < 50 || minProb7d > 99) {
         errors.push('7-day probability must be between 50% and 99%');
     }
     if (minProbCurrent < 50 || minProbCurrent > 99) {
         errors.push('Current probability must be between 50% and 99%');
     }
-    // Update run button state
     const runBtn = document.getElementById('runBtn');
     runBtn.disabled = errors.length > 0;
     return errors.length === 0;
 }
-// Main simulation runner
 async function runSimulation() {
     if (!validateInputs()) return;
-    // Get parameters
     const params = getSimulationParameters();
-    // Update UI for running state
     showProgress();
     disableControls();
     try {
-        // Call the backend API
         const results = await callSimulationAPI(params);
-        // Store results and display
         simulationResults = results;
         displayResults(results);
     } catch (error) {
         console.error('Simulation error:', error);
-        alert('An error occurred during simulation: ' + (error.message || 'Unknown error'));
     } finally {
         hideProgress();
         enableControls();
     }
 }
-// Call the backend API for real simulations
 async function callSimulationAPI(params) {
     const progressFill = document.getElementById('progressFill');
     const progressPercent = document.getElementById('progressPercent');
     const progressText = document.getElementById('progressText');
-    progressText.textContent = 'Sending request to backend...';
     progressFill.style.width = '10%';
     progressPercent.textContent = '10%';
-    // Prepare request body
     const requestBody = {
         simType: params.simType,
         startingCapital: params.startingCapital,
@@ -219,362 +205,161 @@ async function callSimulationAPI(params) {
         daysBefore: params.daysBefore,
         investmentProbability: params.investmentProbability
     };
-    if (params.simType === 'threshold' && params.targetReturn !== undefined) {
         requestBody.targetReturn = params.targetReturn;
     }
-    if (params.simType === 'multi' && params.numFunds !== undefined) {
         requestBody.numFunds = params.numFunds;
     }
-    // Make API call
     const response = await fetch('/api/simulate', {
         method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-        },
         body: JSON.stringify(requestBody)
     });
     if (!response.ok) {
         const errorData = await response.json().catch(() => ({ detail: response.statusText }));
-        throw new Error(errorData.detail || `HTTP ${response.status}: ${response.statusText}`);
     }
     progressText.textContent = 'Processing results...';
-    progressFill.style.width = '90%';
-    progressPercent.textContent = '90%';
     const results = await response.json();
     progressFill.style.width = '100%';
     progressPercent.textContent = '100%';
     progressText.textContent = 'Complete!';
-    return results;
-}
-// Get simulation parameters from UI
-function getSimulationParameters() {
-    const params = {
-        simType: currentSimType,
-        startingCapital: parseFloat(document.getElementById('startingCapital').value),
-        numSimulations: parseInt(document.getElementById('numSimulations').value),
-        startDate: document.getElementById('startDate').value,
-        maxDuration: parseInt(document.getElementById('maxDuration').value),
-        minProb7d: parseFloat(document.getElementById('minProb7d').value) / 100,
-        minProbCurrent: parseFloat(document.getElementById('minProbCurrent').value) / 100,
-        daysBefore: parseInt(document.getElementById('daysBefore').value),
-        investmentProbability: parseFloat(document.getElementById('investmentProbability').value)
-    };
-    // Type-specific parameters
-    if (currentSimType === 'threshold') {
-        const targetSelect = document.getElementById('targetReturn').value;
-        if (targetSelect === 'custom') {
-            params.targetReturn = parseFloat(document.getElementById('customTarget').value) / 100;
-        } else {
-            params.targetReturn = parseFloat(targetSelect) / 100;
-        }
-    }
-    if (currentSimType === 'multi') {
-        params.numFunds = parseInt(document.getElementById('numFunds').value);
-    }
-    return params;
-}
-// Legacy function - kept for reference but not used when API is available
-async function simulateComputation(params) {
-    // This function is replaced by callSimulationAPI
-    // Kept for fallback if needed
-    return await callSimulationAPI(params);
 }
-// Generate a realistic simulation run
-function generateSimulationRun(params, seed) {
-    const rng = new SimpleRNG(seed + 12345);
-    const run = {
-        finalCapital: 0,
-        totalReturn: 0,
-        numTrades: 0,
-        wentBust: false,
-        reachedTarget: false,
-        simulationDays: 0
-    };
-    if (params.simType === 'multi') {
-        run.survivingFunds = 0;
-        run.fundResults = [];
-        for (let f = 0; f < params.numFunds; f++) {
-            const fundRun = generateSingleFundRun(params, rng.next());
-            run.fundResults.push(fundRun);
-            if (!fundRun.wentBust) run.survivingFunds++;
-        }
-        run.finalCapital = run.fundResults.reduce((sum, fund) => sum + fund.finalCapital, 0);
-        run.totalReturn = (run.finalCapital - params.startingCapital) / params.startingCapital;
-        run.numTrades = run.fundResults.reduce((sum, fund) => sum + fund.numTrades, 0);
-        run.wentBust = run.survivingFunds === 0;
-    } else {
-        const singleRun = generateSingleFundRun(params, seed);
-        Object.assign(run, singleRun);
-    }
-    return run;
-}
-// Generate a single fund run with realistic market behavior
-function generateSingleFundRun(params, seed) {
-    const rng = new SimpleRNG(seed);
-    let capital = params.simType === 'multi' ? params.startingCapital / params.numFunds : params.startingCapital;
-    const run = {
-        finalCapital: capital,
-        totalReturn: 0,
-        numTrades: 0,
-        wentBust: false,
-        reachedTarget: false,
-        simulationDays: 0,
-        capitalHistory: [capital]
-    };
-    const maxTrades = Math.floor(params.maxDuration / 7) + rng.nextInt(5, 20);
-    let day = 0;
-    for (let trade = 0; trade < maxTrades && capital > 0 && day < params.maxDuration; trade++) {
-        // Check target return for threshold simulations
-        if (params.simType === 'threshold' && params.targetReturn) {
-            const currentReturn = (capital - (params.startingCapital / (params.numFunds || 1))) / (params.startingCapital / (params.numFunds || 1));
-            if (currentReturn >= params.targetReturn) {
-                run.reachedTarget = true;
-                break;
-            }
-        }
-        // Market probability based on thresholds (realistic distribution)
-        const marketProb = Math.max(params.minProbCurrent,
-            params.minProbCurrent + rng.nextGaussian() * 0.05);
-        // Win probability (slightly higher than market prob to simulate edge)
-        const winProb = Math.min(0.99, marketProb + 0.01 + rng.nextGaussian() * 0.02);
-        const won = rng.nextFloat() < winProb;
-        if (won) {
-            capital = capital / marketProb; // Return = 1/probability
-        } else {
-            capital = 0; // Total loss
-            run.wentBust = true;
-            break;
-        }
-        run.numTrades++;
-        run.capitalHistory.push(capital);
-        // Advance time (realistic trading frequency)
-        day += rng.nextInt(1, 14);
-        // Ending factor check
-        const endingFactor = 0.05 + (day * 0.001);
-        if (rng.nextFloat() < endingFactor) break;
-    }
-    run.finalCapital = capital;
-    run.simulationDays = day;
-    const initialCapital = params.simType === 'multi' ? params.startingCapital / params.numFunds : params.startingCapital;
-    run.totalReturn = (capital - initialCapital) / initialCapital;
-    return run;
-}
-// Calculate summary statistics
-function calculateSummaryStats(runs, params) {
-    const returns = runs.map(r => r.totalReturn);
-    const capitals = runs.map(r => r.finalCapital);
-    const trades = runs.map(r => r.numTrades);
-    const summary = {
-        avgReturn: mean(returns),
-        medianReturn: median(returns),
-        returnVolatility: standardDeviation(returns),
-        avgFinalCapital: mean(capitals),
-        medianFinalCapital: median(capitals),
-        bustRate: runs.filter(r => r.wentBust).length / runs.length,
-        positiveReturnRate: returns.filter(r => r > 0).length / returns.length,
-        avgTrades: mean(trades),
-        // Percentiles
-        return5th: percentile(returns, 5),
-        return95th: percentile(returns, 95),
-        // Max drawdown approximation
-        maxDrawdown: Math.abs(Math.min(...returns))
-    };
-    // Type-specific stats
-    if (params.simType === 'threshold' && params.targetReturn) {
-        const reachedTarget = runs.filter(r => r.reachedTarget).length;
-        summary.targetReachedRate = reachedTarget / runs.length;
-        summary.avgTimeToTarget = mean(runs.filter(r => r.reachedTarget).map(r => r.simulationDays)) || 0;
-    }
-    if (params.simType === 'multi') {
-        const survivingFunds = runs.map(r => r.survivingFunds);
-        summary.avgSurvivingFunds = mean(survivingFunds);
-        summary.survivorshipRate = mean(survivingFunds) / params.numFunds;
-        summary.portfolioBustRate = runs.filter(r => r.survivingFunds === 0).length / runs.length;
-    }
-    return summary;
-}
-// Display results in UI
-function displayResults(results) {
-    const { summary, parameters } = results;
-    // Show results section (always visible, just update content)
-    document.getElementById('resultsSection').style.display = 'block';
-    document.getElementById('resultsSection').scrollIntoView({ behavior: 'smooth' });
-    // Update basic statistics
-    document.getElementById('avgReturn').textContent = formatPercentage(summary.avgReturn);
-    document.getElementById('avgReturn').className = `stat-value ${getReturnClass(summary.avgReturn)}`;
-    document.getElementById('medianReturn').textContent = formatPercentage(summary.medianReturn);
-    document.getElementById('medianReturn').className = `stat-value ${getReturnClass(summary.medianReturn)}`;
-    document.getElementById('successRate').textContent = formatPercentage(summary.positiveReturnRate);
-    document.getElementById('bustRate').textContent = formatPercentage(summary.bustRate);
-    document.getElementById('bustRate').className = `stat-value ${summary.bustRate > 0.1 ? 'negative' : 'positive'}`;
     document.getElementById('volatility').textContent = formatPercentage(summary.returnVolatility);
     document.getElementById('maxDrawdown').textContent = formatPercentage(summary.maxDrawdown);
-    // Type-specific statistics
     if (parameters.simType === 'multi') {
         document.querySelectorAll('.multi-stats, .multi-chart').forEach(el => {
             el.classList.add('visible');
         });
-        document.getElementById('avgSurvivingFunds').textContent =
-            `${summary.avgSurvivingFunds.toFixed(1)} / ${parameters.numFunds}`;
-        document.getElementById('survivorshipRate').textContent = formatPercentage(summary.survivorshipRate);
-        // Simple diversification benefit calculation
-        const diversificationBenefit = summary.returnVolatility < 0.3 ? 'Positive' : 'Limited';
-        document.getElementById('diversificationBenefit').textContent = diversificationBenefit;
     } else {
         document.querySelectorAll('.multi-stats, .multi-chart').forEach(el => {
             el.classList.remove('visible');
         });
     }
     if (parameters.simType === 'threshold') {
         document.querySelectorAll('.threshold-stats').forEach(el => {
             el.classList.add('visible');
         });
         document.getElementById('targetReached').textContent = formatPercentage(summary.targetReachedRate || 0);
-        document.getElementById('avgTimeToTarget').textContent =
             summary.avgTimeToTarget ? `${Math.round(summary.avgTimeToTarget)} days` : 'N/A';
-        document.getElementById('vsNeverStop').textContent =
-            summary.targetReachedRate > 0.5 ? 'Better' : 'Similar';
     } else {
         document.querySelectorAll('.threshold-stats').forEach(el => {
             el.classList.remove('visible');
         });
     }
     // Generate charts
     generateCharts(results);
 }
-// Initialize empty charts on page load
 function initializeEmptyCharts() {
-    // Return distribution chart
-    charts.return = createEmptyReturnChart();
-    // Capital evolution chart
-    charts.capital = createEmptyCapitalChart();
-    // Survivorship chart (hidden initially)
-    charts.survivorship = createEmptySurvivorshipChart();
 }
-// Generate all charts
 function generateCharts(results) {
-    const { runs, summary, parameters } = results;
     // Destroy existing charts
-    Object.values(charts).forEach(chart => {
-        if (chart) chart.destroy();
-    });
     charts = {};
-    // Return distribution histogram
     charts.return = createReturnDistributionChart(runs);
-    // Capital evolution (sample of runs)
     charts.capital = createCapitalEvolutionChart(runs);
-    // Multi-fund specific chart
     if (parameters.simType === 'multi') {
         charts.survivorship = createSurvivorshipChart(runs, parameters.numFunds);
     } else {
-        charts.survivorship = createEmptySurvivorshipChart();
     }
 }
-// Create empty return chart with default range
-function createEmptyReturnChart() {
-    const ctx = document.getElementById('returnChart').getContext('2d');
-    const defaultBins = [];
-    for (let i = -100; i <= 100; i += 2) {
-        defaultBins.push(i);
-    }
-    return new Chart(ctx, {
-        type: 'bar',
-        data: {
-            labels: defaultBins.map(b => `${b}%`),
-            datasets: [{
-                label: 'Frequency',
-                data: new Array(defaultBins.length).fill(0),
-                backgroundColor: 'rgba(86, 175, 226, 0.3)',
-                borderColor: '#56AFE2',
-                borderWidth: 1
-            }]
-        },
-        options: getChartOptions('Return (%)', 'Frequency')
-    });
-}
-// Create return distribution chart with smart 2% bins
 function createReturnDistributionChart(runs) {
     const ctx = document.getElementById('returnChart').getContext('2d');
     const returns = runs.map(r => r.totalReturn * 100);
-    // Calculate smart range based on data
     const minReturn = Math.min(...returns);
     const maxReturn = Math.max(...returns);
-    // Round to nearest 10% for cleaner bounds, with padding
     const binStart = Math.floor(minReturn / 10) * 10;
-    const binEnd = Math.min(Math.ceil(maxReturn / 10) * 10, 200); // Cap at 200%
-    // Generate 2% bins within the smart range
     const bins = [];
-    for (let i = binStart; i <= binEnd; i += 2) {
-        bins.push(i);
-    }
-    // Count returns in bins
     const binCounts = new Array(bins.length).fill(0);
     returns.forEach(ret => {
         for (let i = 0; i < bins.length - 1; i++) {
@@ -583,12 +368,9 @@ function createReturnDistributionChart(runs) {
                 break;
             }
         }
-        // Handle values at or above the last bin
-        if (ret >= bins[bins.length - 1]) {
-            binCounts[bins.length - 1]++;
-        }
     });
     return new Chart(ctx, {
         type: 'bar',
         data: {
@@ -596,112 +378,69 @@ function createReturnDistributionChart(runs) {
             datasets: [{
                 label: 'Frequency',
                 data: binCounts,
-                backgroundColor: 'rgba(86, 175, 226, 0.3)',
-                borderColor: '#56AFE2',
-                borderWidth: 1
             }]
         },
-        options: getChartOptions('Return (%)', 'Frequency')
-    });
-}
-// Create empty capital evolution chart
-function createEmptyCapitalChart() {
-    const ctx = document.getElementById('capitalChart').getContext('2d');
-    return new Chart(ctx, {
-        type: 'line',
-        data: {
-            labels: [],
-            datasets: []
-        },
-        options: getLineChartOptions('Trade Number', 'Capital ($)')
     });
 }
-// Create capital evolution chart
 function createCapitalEvolutionChart(runs) {
     const ctx = document.getElementById('capitalChart').getContext('2d');
-    // Distinct color palette for capital evolution
     const colors = [
-        { border: '#56AFE2', bg: 'rgba(86, 175, 226, 0.15)' },   // Cyan blue
-        { border: '#10B981', bg: 'rgba(16, 185, 129, 0.15)' },   // Green
-        { border: '#F59E0B', bg: 'rgba(245, 158, 11, 0.15)' },   // Amber
-        { border: '#EF4444', bg: 'rgba(239, 68, 68, 0.15)' },    // Red
-        { border: '#A855F7', bg: 'rgba(168, 85, 247, 0.15)' }    // Purple
     ];
-    // Sample up to 5 runs
     const sampleRuns = runs.slice(0, 5);
     const datasets = sampleRuns.map((run, i) => {
-        // Use capitalHistory if available
         let data = [];
-        if (run.capitalHistory && run.capitalHistory.length > 0) {
-            // Handle both array of numbers and array of objects
-            data = run.capitalHistory.map((item, idx) => {
-                const capital = typeof item === 'object' ? item.capital : item;
-                const day = typeof item === 'object' ? item.day : idx;
-                return { x: day, y: capital };
-            });
         } else {
-            // Fallback: just show final capital with start and end
-            data = [
-                { x: 0, y: 10000 }, // Starting capital
-                { x: 1, y: run.finalCapital }
-            ];
         }
         return {
             label: `Run ${i + 1}`,
             data: data,
-            borderColor: colors[i % colors.length].border,
-            backgroundColor: colors[i % colors.length].bg,
             borderWidth: 2,
             fill: false,
-            tension: 0.3, // Smooth curves
-            pointRadius: 0 // Hide points for cleaner look
         };
     });
     return new Chart(ctx, {
         type: 'line',
         data: { datasets },
-        options: getLineChartOptions('Trade Number', 'Capital ($)')
-    });
-}
-// Create empty survivorship chart
-function createEmptySurvivorshipChart() {
-    const ctx = document.getElementById('survivorshipChart').getContext('2d');
-    return new Chart(ctx, {
-        type: 'bar',
-        data: {
-            labels: [],
-            datasets: [{
-                label: 'Frequency',
-                data: [],
-                backgroundColor: 'rgba(135, 191, 255, 0.15)',
-                borderColor: '#87BFFF',
-                borderWidth: 1
-            }]
-        },
-        options: getChartOptions('Surviving Funds', 'Frequency')
     });
 }
-// Create survivorship chart for multi-fund
 function createSurvivorshipChart(runs, numFunds) {
     const ctx = document.getElementById('survivorshipChart').getContext('2d');
     const survivingCounts = runs.map(r => r.survivingFunds);
-    // Preset bins: 0 to numFunds
     const labels = [];
     const data = [];
     for (let i = 0; i <= numFunds; i++) {
         labels.push(i.toString());
         data.push(survivingCounts.filter(c => c === i).length);
     }
     return new Chart(ctx, {
         type: 'bar',
         data: {
@@ -709,178 +448,105 @@ function createSurvivorshipChart(runs, numFunds) {
             datasets: [{
                 label: 'Frequency',
                 data: data,
-                backgroundColor: 'rgba(135, 191, 255, 0.15)',
-                borderColor: '#87BFFF',
-                borderWidth: 1
             }]
         },
-        options: getChartOptions('Surviving Funds', 'Frequency')
     });
 }
-// Helper function for chart options (bar charts)
-function getChartOptions(xLabel, yLabel) {
-    return {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: { display: false }
-        },
-        scales: {
-            x: {
-                title: {
-                    display: true,
-                    text: xLabel,
-                    color: '#87BFFF',
-                    font: { size: 12 }
-                },
-                grid: {
-                    color: 'rgba(135, 191, 255, 0.1)',
-                    drawBorder: false
-                },
-                ticks: {
-                    color: '#87BFFF',
-                    font: { size: 11 }
-                }
-            },
-            y: {
-                title: {
-                    display: true,
-                    text: yLabel,
-                    color: '#87BFFF',
-                    font: { size: 12 }
-                },
-                grid: {
-                    color: 'rgba(135, 191, 255, 0.1)',
-                    drawBorder: false
-                },
-                ticks: {
-                    color: '#87BFFF',
-                    font: { size: 11 }
-                }
-            }
-        }
-    };
-}
-// Helper function for line chart options
-function getLineChartOptions(xLabel, yLabel) {
-    return {
         responsive: true,
         maintainAspectRatio: false,
         plugins: {
-            legend: {
-                display: true,
                 labels: {
-                    color: '#87BFFF',
                     font: { size: 11 },
                     usePointStyle: true,
-                    padding: 12
                 }
             }
         },
         scales: {
             x: {
-                type: 'linear',
-                title: {
-                    display: true,
-                    text: xLabel,
-                    color: '#87BFFF',
-                    font: { size: 12 }
-                },
-                grid: {
-                    color: 'rgba(135, 191, 255, 0.1)',
-                    drawBorder: false
-                },
-                ticks: {
-                    color: '#87BFFF',
-                    font: { size: 11 }
-                }
             },
             y: {
-                title: {
-                    display: true,
-                    text: yLabel,
-                    color: '#87BFFF',
-                    font: { size: 12 }
-                },
-                grid: {
-                    color: 'rgba(135, 191, 255, 0.1)',
-                    drawBorder: false
-                },
-                ticks: {
-                    color: '#87BFFF',
-                    font: { size: 11 }
-                }
             }
         }
     };
 }
-// Export results
 function exportResults() {
     if (!simulationResults) return;
     const data = {
         timestamp: new Date().toISOString(),
         parameters: simulationResults.parameters,
         summary: simulationResults.summary,
         runs: simulationResults.runs
     };
     const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `safe_choices_simulation_${Date.now()}.json`;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
 }
-// UI control functions
 function showProgress() {
-    document.querySelector('.progress-section').style.display = 'block';
     document.getElementById('progressFill').style.width = '0%';
 }
 function hideProgress() {
     setTimeout(() => {
-        document.querySelector('.progress-section').style.display = 'none';
     }, 500);
 }
 function disableControls() {
     const runBtn = document.getElementById('runBtn');
     runBtn.disabled = true;
     document.querySelector('.run-text').textContent = 'Running...';
-    document.querySelector('.run-spinner').style.display = 'inline-block';
 }
 function enableControls() {
     const runBtn = document.getElementById('runBtn');
     runBtn.disabled = false;
     document.querySelector('.run-text').textContent = 'Run Simulation';
-    document.querySelector('.run-spinner').style.display = 'none';
-}
-// Utility functions
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
 }
 function formatPercentage(value) {
     return `${(value * 100).toFixed(1)}%`;
 }
-function getReturnClass(value) {
-    if (value > 0.02) return 'positive';
-    if (value < -0.02) return 'negative';
-    return 'neutral';
-}
 function mean(arr) {
     return arr.reduce((a, b) => a + b, 0) / arr.length;
 }
@@ -893,8 +559,7 @@ function median(arr) {
 function standardDeviation(arr) {
     const avg = mean(arr);
-    const squareDiffs = arr.map(value => Math.pow(value - avg, 2));
-    return Math.sqrt(mean(squareDiffs));
 }
 function percentile(arr, p) {
@@ -905,52 +570,3 @@ function percentile(arr, p) {
     const weight = index % 1;
     return sorted[lower] * (1 - weight) + sorted[upper] * weight;
 }
-function createHistogram(data, bins) {
-    const min = Math.min(...data);
-    const max = Math.max(...data);
-    const binWidth = (max - min) / bins;
-    const histogram = new Array(bins).fill(0);
-    const labels = [];
-    for (let i = 0; i < bins; i++) {
-        const binStart = min + i * binWidth;
-        const binEnd = min + (i + 1) * binWidth;
-        labels.push(`${binStart.toFixed(1)}`);
-        for (const value of data) {
-            if (value >= binStart && (value < binEnd || i === bins - 1)) {
-                histogram[i]++;
-            }
-        }
-    }
-    return { labels, data: histogram };
-}
-// Simple RNG for reproducible results
-class SimpleRNG {
-    constructor(seed) {
-        this.seed = seed % 2147483647;
-        if (this.seed <= 0) this.seed += 2147483646;
-    }
-    next() {
-        return this.seed = this.seed * 16807 % 2147483647;
-    }
-    nextFloat() {
-        return (this.next() - 1) / 2147483646;
-    }
-    nextGaussian() {
-        const u = 0.5 - this.nextFloat();
-        const v = this.nextFloat();
-        return Math.sqrt(-2.0 * Math.log(v)) * Math.cos(2.0 * Math.PI * u);
-    }
-    nextInt(min, max) {
-        return Math.floor(this.nextFloat() * (max - min + 1)) + min;
-    }
-}

+// Safe Choices - Simulation Controller
+// ===== STATE =====
 let currentSimType = 'single';
+let currentView = 'simulation';
 let simulationResults = null;
 let charts = {};
+// ===== INITIALIZATION =====
+document.addEventListener('DOMContentLoaded', () => {
+    initializeApp();
+});
+function initializeApp() {
     setupEventListeners();
     updateEstimatedTime();
     initializeEmptyCharts();
 }
 function setupEventListeners() {
+    // Number input constraints
+    const numSimulations = document.getElementById('numSimulations');
+    numSimulations.addEventListener('input', () => {
+        numSimulations.value = Math.min(Math.max(parseInt(numSimulations.value) || 10, 10), 100);
         updateEstimatedTime();
     });
+    const numFunds = document.getElementById('numFunds');
+    numFunds.addEventListener('input', () => {
+        numFunds.value = Math.min(Math.max(parseInt(numFunds.value) || 2, 2), 10);
+        updateEstimatedTime();
     });
+    // Target return custom input toggle
+    const targetReturn = document.getElementById('targetReturn');
+    const customTarget = document.getElementById('customTarget');
+    targetReturn.addEventListener('change', () => {
+        if (targetReturn.value === 'custom') {
+            customTarget.classList.add('visible');
+            customTarget.value = '15';
+        } else {
+            customTarget.classList.remove('visible');
+        }
     });
+    // Validate inputs on change
+    document.querySelectorAll('.param-input').forEach(input => {
         input.addEventListener('input', validateInputs);
     });
 }
+// ===== VIEW SWITCHING =====
 function selectView(view) {
     currentView = view;
+    // Update toggle buttons
+    document.querySelectorAll('.toggle-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.view === view);
     });
+    // Show/hide content
+    const simContent = document.getElementById('simulationContent');
+    const methContent = document.getElementById('methodologyContent');
     if (view === 'simulation') {
+        simContent.style.display = 'flex';
+        methContent.style.display = 'none';
         document.querySelectorAll('.simulation-view-only').forEach(el => {
             el.classList.remove('hidden');
         });
     } else {
+        simContent.style.display = 'none';
+        methContent.style.display = 'block';
         document.querySelectorAll('.simulation-view-only').forEach(el => {
             el.classList.add('hidden');
         });
     }
 }
+// ===== SIMULATION TYPE SWITCHING =====
 function selectSimulation(type) {
     currentSimType = type;
+    // Update strategy cards
+    document.querySelectorAll('.strategy-card').forEach(card => {
+        card.classList.toggle('active', card.dataset.sim === type);
     });
+    // Show/hide conditional parameters
     document.querySelectorAll('.threshold-only').forEach(el => {
         el.classList.toggle('visible', type === 'threshold');
     });
     document.querySelectorAll('.multi-only').forEach(el => {
         el.classList.toggle('visible', type === 'multi');
     });
+    updateEstimatedTime();
 }
+// ===== VALIDATION =====
 function validateInputs() {
     const errors = [];
     const minProb7d = parseFloat(document.getElementById('minProb7d').value);
     const minProbCurrent = parseFloat(document.getElementById('minProbCurrent').value);
     if (minProb7d < 50 || minProb7d > 99) {
         errors.push('7-day probability must be between 50% and 99%');
     }
     if (minProbCurrent < 50 || minProbCurrent > 99) {
         errors.push('Current probability must be between 50% and 99%');
     }
     const runBtn = document.getElementById('runBtn');
     runBtn.disabled = errors.length > 0;
     return errors.length === 0;
 }
+// ===== TIME ESTIMATION =====
+function updateEstimatedTime() {
+    const numSims = parseInt(document.getElementById('numSimulations').value) || 100;
+    const numFunds = currentSimType === 'multi' ? (parseInt(document.getElementById('numFunds').value) || 5) : 1;
+    let baseTime = numSims * 0.05;
+    if (currentSimType === 'multi') {
+        baseTime *= Math.sqrt(numFunds);
+    }
+    const seconds = Math.max(2, Math.ceil(baseTime));
+    const timeText = seconds < 60 ? `~${seconds}s` : `~${Math.ceil(seconds / 60)}min`;
+    document.getElementById('estimatedTime').textContent = timeText;
+}
+// ===== SIMULATION EXECUTION =====
 async function runSimulation() {
     if (!validateInputs()) return;
     const params = getSimulationParameters();
     showProgress();
     disableControls();
     try {
         const results = await callSimulationAPI(params);
         simulationResults = results;
         displayResults(results);
     } catch (error) {
         console.error('Simulation error:', error);
+        alert('Simulation failed: ' + (error.message || 'Unknown error'));
     } finally {
         hideProgress();
         enableControls();
     }
 }
+function getSimulationParameters() {
+    const params = {
+        simType: currentSimType,
+        startingCapital: parseFloat(document.getElementById('startingCapital').value),
+        numSimulations: parseInt(document.getElementById('numSimulations').value),
+        startDate: document.getElementById('startDate').value,
+        maxDuration: parseInt(document.getElementById('maxDuration').value),
+        minProb7d: parseFloat(document.getElementById('minProb7d').value) / 100,
+        minProbCurrent: parseFloat(document.getElementById('minProbCurrent').value) / 100,
+        daysBefore: parseInt(document.getElementById('daysBefore').value),
+        investmentProbability: parseFloat(document.getElementById('investmentProbability').value)
+    };
+    if (currentSimType === 'threshold') {
+        const targetSelect = document.getElementById('targetReturn').value;
+        if (targetSelect === 'custom') {
+            params.targetReturn = parseFloat(document.getElementById('customTarget').value) / 100;
+        } else {
+            params.targetReturn = parseFloat(targetSelect) / 100;
+        }
+    }
+    if (currentSimType === 'multi') {
+        params.numFunds = parseInt(document.getElementById('numFunds').value);
+    }
+    return params;
+}
 async function callSimulationAPI(params) {
     const progressFill = document.getElementById('progressFill');
     const progressPercent = document.getElementById('progressPercent');
     const progressText = document.getElementById('progressText');
+    progressText.textContent = 'Connecting to server...';
     progressFill.style.width = '10%';
     progressPercent.textContent = '10%';
     const requestBody = {
         simType: params.simType,
         startingCapital: params.startingCapital,
         daysBefore: params.daysBefore,
         investmentProbability: params.investmentProbability
     };
+    if (params.targetReturn !== undefined) {
         requestBody.targetReturn = params.targetReturn;
     }
+    if (params.numFunds !== undefined) {
         requestBody.numFunds = params.numFunds;
     }
+    progressText.textContent = 'Running simulation...';
+    progressFill.style.width = '30%';
+    progressPercent.textContent = '30%';
     const response = await fetch('/api/simulate', {
         method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(requestBody)
     });
     if (!response.ok) {
         const errorData = await response.json().catch(() => ({ detail: response.statusText }));
+        throw new Error(errorData.detail || `HTTP ${response.status}`);
     }
     progressText.textContent = 'Processing results...';
+    progressFill.style.width = '80%';
+    progressPercent.textContent = '80%';
     const results = await response.json();
     progressFill.style.width = '100%';
     progressPercent.textContent = '100%';
     progressText.textContent = 'Complete!';
+    return results;
 }
+// ===== RESULTS DISPLAY =====
+function displayResults(results) {
+    const { summary, parameters } = results;
+    // Show results section
+    const resultsSection = document.getElementById('resultsSection');
+    resultsSection.classList.add('visible');
+    resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    // Primary metrics
+    updateMetric('avgReturn', summary.avgReturn, true);
+    updateMetric('medianReturn', summary.medianReturn, true);
+    updateMetric('successRate', summary.positiveReturnRate);
+    updateMetric('bustRate', summary.bustRate, false, true);
+    // Risk metrics
     document.getElementById('volatility').textContent = formatPercentage(summary.returnVolatility);
     document.getElementById('maxDrawdown').textContent = formatPercentage(summary.maxDrawdown);
+    document.getElementById('percentile5').textContent = formatPercentage(summary.return5th || -1);
+    document.getElementById('percentile95').textContent = formatPercentage(summary.return95th || 0);
+    // Type-specific stats
     if (parameters.simType === 'multi') {
         document.querySelectorAll('.multi-stats, .multi-chart').forEach(el => {
             el.classList.add('visible');
         });
+        document.getElementById('avgSurvivingFunds').textContent =
+            `${summary.avgSurvivingFunds?.toFixed(1) || '--'} / ${parameters.numFunds}`;
+        document.getElementById('survivorshipRate').textContent = formatPercentage(summary.survivorshipRate || 0);
+        document.getElementById('diversificationBenefit').textContent =
+            summary.returnVolatility < 0.3 ? 'Positive' : 'Limited';
     } else {
         document.querySelectorAll('.multi-stats, .multi-chart').forEach(el => {
             el.classList.remove('visible');
         });
     }
     if (parameters.simType === 'threshold') {
         document.querySelectorAll('.threshold-stats').forEach(el => {
             el.classList.add('visible');
         });
         document.getElementById('targetReached').textContent = formatPercentage(summary.targetReachedRate || 0);
+        document.getElementById('avgTimeToTarget').textContent =
             summary.avgTimeToTarget ? `${Math.round(summary.avgTimeToTarget)} days` : 'N/A';
+        document.getElementById('vsNeverStop').textContent =
+            (summary.targetReachedRate || 0) > 0.5 ? 'Better' : 'Similar';
     } else {
         document.querySelectorAll('.threshold-stats').forEach(el => {
             el.classList.remove('visible');
         });
     }
     // Generate charts
     generateCharts(results);
 }
+function updateMetric(id, value, showSign = false, isRisk = false) {
+    const el = document.getElementById(id);
+    el.textContent = formatPercentage(value);
+    // Add color classes
+    el.classList.remove('positive', 'negative', 'high-risk');
+    if (isRisk) {
+        if (value > 0.1) el.classList.add('high-risk');
+    } else if (showSign) {
+        if (value > 0.02) el.classList.add('positive');
+        else if (value < -0.02) el.classList.add('negative');
+    }
+}
+// ===== CHARTS =====
 function initializeEmptyCharts() {
+    charts.return = createEmptyChart('returnChart', 'bar');
+    charts.capital = createEmptyChart('capitalChart', 'line');
+    charts.survivorship = createEmptyChart('survivorshipChart', 'bar');
+}
+function createEmptyChart(canvasId, type) {
+    const ctx = document.getElementById(canvasId).getContext('2d');
+    return new Chart(ctx, {
+        type: type,
+        data: { labels: [], datasets: [] },
+        options: getChartOptions(type)
+    });
 }
 function generateCharts(results) {
+    const { runs, parameters } = results;
     // Destroy existing charts
+    Object.values(charts).forEach(chart => chart?.destroy());
     charts = {};
+    // Return distribution
     charts.return = createReturnDistributionChart(runs);
+    // Capital evolution
     charts.capital = createCapitalEvolutionChart(runs);
+    // Survivorship (multi-fund only)
     if (parameters.simType === 'multi') {
         charts.survivorship = createSurvivorshipChart(runs, parameters.numFunds);
     } else {
+        charts.survivorship = createEmptyChart('survivorshipChart', 'bar');
     }
 }
 function createReturnDistributionChart(runs) {
     const ctx = document.getElementById('returnChart').getContext('2d');
     const returns = runs.map(r => r.totalReturn * 100);
     const minReturn = Math.min(...returns);
     const maxReturn = Math.max(...returns);
     const binStart = Math.floor(minReturn / 10) * 10;
+    const binEnd = Math.min(Math.ceil(maxReturn / 10) * 10, 200);
     const bins = [];
+    for (let i = binStart; i <= binEnd; i += 5) bins.push(i);
     const binCounts = new Array(bins.length).fill(0);
     returns.forEach(ret => {
         for (let i = 0; i < bins.length - 1; i++) {
                 break;
             }
         }
+        if (ret >= bins[bins.length - 1]) binCounts[bins.length - 1]++;
     });
     return new Chart(ctx, {
         type: 'bar',
         data: {
             datasets: [{
                 label: 'Frequency',
                 data: binCounts,
+                backgroundColor: 'rgba(59, 130, 246, 0.6)',
+                borderColor: 'rgba(59, 130, 246, 1)',
+                borderWidth: 1,
+                borderRadius: 4
             }]
         },
+        options: getChartOptions('bar')
     });
 }
 function createCapitalEvolutionChart(runs) {
     const ctx = document.getElementById('capitalChart').getContext('2d');
     const colors = [
+        { border: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)' },
+        { border: '#10b981', bg: 'rgba(16, 185, 129, 0.1)' },
+        { border: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)' },
+        { border: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)' },
+        { border: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)' }
     ];
     const sampleRuns = runs.slice(0, 5);
     const datasets = sampleRuns.map((run, i) => {
         let data = [];
+        if (run.capitalHistory?.length > 0) {
+            data = run.capitalHistory.map((item, idx) => ({
+                x: typeof item === 'object' ? item.day : idx,
+                y: typeof item === 'object' ? item.capital : item
+            }));
         } else {
+            data = [{ x: 0, y: 10000 }, { x: 1, y: run.finalCapital }];
         }
         return {
             label: `Run ${i + 1}`,
             data: data,
+            borderColor: colors[i].border,
+            backgroundColor: colors[i].bg,
             borderWidth: 2,
             fill: false,
+            tension: 0.3,
+            pointRadius: 0
         };
     });
     return new Chart(ctx, {
         type: 'line',
         data: { datasets },
+        options: getChartOptions('line')
     });
 }
 function createSurvivorshipChart(runs, numFunds) {
     const ctx = document.getElementById('survivorshipChart').getContext('2d');
     const survivingCounts = runs.map(r => r.survivingFunds);
     const labels = [];
     const data = [];
     for (let i = 0; i <= numFunds; i++) {
         labels.push(i.toString());
         data.push(survivingCounts.filter(c => c === i).length);
     }
     return new Chart(ctx, {
         type: 'bar',
         data: {
             datasets: [{
                 label: 'Frequency',
                 data: data,
+                backgroundColor: 'rgba(139, 92, 246, 0.6)',
+                borderColor: 'rgba(139, 92, 246, 1)',
+                borderWidth: 1,
+                borderRadius: 4
             }]
         },
+        options: getChartOptions('bar')
     });
 }
+function getChartOptions(type) {
+    const baseOptions = {
         responsive: true,
         maintainAspectRatio: false,
         plugins: {
+            legend: {
+                display: type === 'line',
                 labels: {
+                    color: '#9ca3af',
                     font: { size: 11 },
                     usePointStyle: true,
+                    padding: 16
                 }
             }
         },
         scales: {
             x: {
+                grid: { color: 'rgba(255, 255, 255, 0.05)' },
+                ticks: { color: '#6b7280', font: { size: 10 } }
             },
             y: {
+                grid: { color: 'rgba(255, 255, 255, 0.05)' },
+                ticks: { color: '#6b7280', font: { size: 10 } }
             }
         }
     };
+    if (type === 'line') {
+        baseOptions.scales.x.type = 'linear';
+    }
+    return baseOptions;
 }
+// ===== EXPORT =====
 function exportResults() {
     if (!simulationResults) return;
     const data = {
         timestamp: new Date().toISOString(),
         parameters: simulationResults.parameters,
         summary: simulationResults.summary,
         runs: simulationResults.runs
     };
     const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
+    a.download = `safe_choices_${currentSimType}_${Date.now()}.json`;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
 }
+// ===== UI HELPERS =====
 function showProgress() {
+    document.getElementById('progressPanel').classList.add('visible');
     document.getElementById('progressFill').style.width = '0%';
 }
 function hideProgress() {
     setTimeout(() => {
+        document.getElementById('progressPanel').classList.remove('visible');
     }, 500);
 }
 function disableControls() {
     const runBtn = document.getElementById('runBtn');
     runBtn.disabled = true;
+    runBtn.classList.add('running');
     document.querySelector('.run-text').textContent = 'Running...';
 }
 function enableControls() {
     const runBtn = document.getElementById('runBtn');
     runBtn.disabled = false;
+    runBtn.classList.remove('running');
     document.querySelector('.run-text').textContent = 'Run Simulation';
 }
 function formatPercentage(value) {
+    if (value === null || value === undefined || isNaN(value)) return '--';
     return `${(value * 100).toFixed(1)}%`;
 }
+// ===== UTILITY FUNCTIONS =====
 function mean(arr) {
     return arr.reduce((a, b) => a + b, 0) / arr.length;
 }
 function standardDeviation(arr) {
     const avg = mean(arr);
+    return Math.sqrt(arr.reduce((sum, val) => sum + Math.pow(val - avg, 2), 0) / arr.length);
 }
 function percentile(arr, p) {
     const weight = index % 1;
     return sorted[lower] * (1 - weight) + sorted[upper] * weight;
 }

static/styles.css CHANGED Viewed

@@ -1,431 +1,655 @@
-/* Polymarket Macro Dashboard - Dark Mode Style */
 :root {
-    /* Dark Mode Colors */
-    --bg-primary: #1D2B3A;
-    --bg-secondary: #253547;
-    --bg-tertiary: #2a3d52;
-    --text-primary: #ffffff;
-    --text-secondary: #87BFFF;
-    --accent: #87BFFF;
-    --accent-dark: #56AFE2;
-    --accent-hover: #a8d0ff;
-    --accent-light: rgba(135, 191, 255, 0.1);
-    /* Borders */
-    --border-color: rgba(135, 191, 255, 0.15);
-    --border-hover: rgba(135, 191, 255, 0.3);
-    /* Status Colors (minimal use) */
     --success: #10b981;
-    --error: #ef4444;
     --warning: #f59e0b;
-    /* Design Tokens */
-    --radius-card: 8px;
-    --spacing-unit: 16px;
-    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
-/* Reset and base styles */
-* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 body {
-    font-family: var(--font-body);
-    background-color: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
-/* Top Navigation Bar */
-.top-bar {
-    background-color: var(--bg-primary);
-    border-bottom: 1px solid var(--border-color);
     position: sticky;
     top: 0;
     z-index: 100;
 }
-.nav-container {
-    max-width: 1400px;
     margin: 0 auto;
-    padding: 0 calc(var(--spacing-unit) * 2);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 64px;
 }
-.logo-section {
     display: flex;
     align-items: center;
     gap: 12px;
 }
-.logo {
-    height: 28px;
-    width: auto;
 }
-.app-title {
     font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-    letter-spacing: -0.01em;
 }
-.subtitle {
-    font-size: 13px;
-    color: var(--text-secondary);
     font-weight: 400;
 }
-.nav-info {
     display: flex;
     align-items: center;
 }
-.dataset-info {
-    font-size: 13px;
-    color: var(--text-secondary);
-    background: var(--bg-secondary);
-    padding: 6px 12px;
-    border-radius: 6px;
-    border: 1px solid var(--border-color);
 }
-/* Main Container */
-.main-container {
-    max-width: 1400px;
     margin: 0 auto;
-    padding: calc(var(--spacing-unit) * 2);
     display: grid;
-    grid-template-columns: 280px 1fr;
-    gap: calc(var(--spacing-unit) * 2);
 }
-/* Left Sidebar - Simulation Type Selection */
 .sidebar {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--spacing-unit) * 0.5);
 }
-.sidebar-label {
     font-size: 11px;
     font-weight: 600;
-    color: var(--text-secondary);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: calc(var(--spacing-unit) * 0.5);
-    padding: 0;
 }
-.simulation-tabs {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--spacing-unit) * 0.5);
 }
-.sim-tab {
-    width: 100%;
-    padding: calc(var(--spacing-unit) * 1);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-card);
-    background: var(--bg-primary);
     cursor: pointer;
-    transition: all 0.15s ease;
     text-align: left;
-    margin: 0;
 }
-.sim-tab:hover {
-    border-color: var(--border-hover);
-    background: var(--bg-secondary);
 }
-.sim-tab.active {
-    border-color: var(--accent-dark);
-    background: var(--bg-secondary);
-    border-left: 3px solid var(--accent-dark);
 }
-.tab-title {
-    font-size: 14px;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 3px;
 }
-.tab-subtitle {
-    font-size: 12px;
-    color: var(--text-secondary);
-    font-weight: 400;
 }
-/* Right Content Area */
-.content-area {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--spacing-unit) * 2);
-    grid-column: 2;
 }
-/* Controls Section */
-.controls-section {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-card);
-    padding: calc(var(--spacing-unit) * 2);
-    border: 1px solid var(--border-color);
 }
-.controls-header {
-    margin-bottom: calc(var(--spacing-unit) * 2);
 }
-.controls-header h2 {
-    font-size: 22px;
     font-weight: 600;
-    margin-bottom: 6px;
     color: var(--text-primary);
-    letter-spacing: -0.01em;
 }
-.controls-header p {
-    font-size: 14px;
-    color: var(--text-secondary);
-    font-weight: 400;
 }
-.controls-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: calc(var(--spacing-unit) * 1.5);
-    margin-bottom: calc(var(--spacing-unit) * 2);
 }
-.control-group {
     display: flex;
     flex-direction: column;
 }
-.control-group.full-width {
-    grid-column: 1 / -1;
 }
-.control-label {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--text-primary);
-    margin-bottom: 8px;
 }
-.control-input {
-    padding: 10px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 14px;
-    background: var(--bg-primary);
     color: var(--text-primary);
-    transition: border-color 0.15s ease;
-    outline: none;
-    font-family: var(--font-body);
 }
-.control-input:focus {
     border-color: var(--accent);
-    outline: 2px solid var(--accent-light);
-    outline-offset: 0;
 }
-.control-subtitle {
     font-size: 12px;
-    color: var(--text-secondary);
-    margin-top: 6px;
-    font-weight: 400;
 }
-/* Run Section */
-.run-section {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--spacing-unit);
-    padding-top: calc(var(--spacing-unit) * 2);
-    border-top: 1px solid var(--border-color);
-    margin-top: calc(var(--spacing-unit) * 0.5);
 }
-.run-button {
-    background: var(--accent-dark);
-    color: var(--bg-primary);
-    border: none;
     padding: 12px 28px;
-    border-radius: 6px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
-    transition: background-color 0.15s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-family: var(--font-body);
 }
-.run-button:hover:not(:disabled) {
-    background: var(--accent);
 }
-.run-button:disabled {
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
     cursor: not-allowed;
-    opacity: 0.6;
 }
 .run-spinner {
     width: 18px;
     height: 18px;
-    border: 2px solid transparent;
-    border-top: 2px solid var(--bg-primary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
 @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
 }
-.run-info {
-    font-size: 13px;
-    color: var(--text-secondary);
 }
-/* Progress Section */
-.progress-section {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-card);
-    padding: calc(var(--spacing-unit) * 2);
-    border: 1px solid var(--border-color);
 }
-.progress-container {
-    max-width: 600px;
     margin: 0 auto;
 }
-.progress-label {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
-    font-size: 14px;
     color: var(--text-primary);
 }
-.progress-bar {
-    width: 100%;
     height: 6px;
-    background: var(--bg-primary);
     border-radius: 3px;
     overflow: hidden;
 }
 .progress-fill {
     height: 100%;
-    background: var(--accent);
-    border-radius: 3px;
-    transition: width 0.2s ease;
     width: 0%;
 }
-/* Results Section */
-.results-section {
-    display: flex;
     flex-direction: column;
-    gap: calc(var(--spacing-unit) * 2);
 }
-.results-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: var(--bg-secondary);
-    padding: calc(var(--spacing-unit) * 1.75) calc(var(--spacing-unit) * 2);
-    border-radius: var(--radius-card);
-    border: 1px solid var(--border-color);
 }
-.results-header h2 {
-    font-size: 22px;
-    font-weight: 600;
-    color: var(--text-primary);
-    letter-spacing: -0.01em;
 }
-.export-button {
-    background: var(--bg-primary);
-    color: var(--accent);
-    border: 1px solid var(--border-color);
-    padding: 8px 16px;
-    border-radius: 6px;
-    font-size: 13px;
     font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-family: var(--font-body);
 }
-.export-button:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--accent);
 }
-/* Statistics Grid - fixed spacing */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: calc(var(--spacing-unit) * 2);
-    margin-bottom: calc(var(--spacing-unit) * 1.5);
 }
-@media (max-width: 900px) {
-    .stats-grid {
-        grid-template-columns: 1fr;
-    }
 }
-.stat-card {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-card);
-    padding: calc(var(--spacing-unit) * 1.5);
-    border: 1px solid var(--border-color);
-    min-height: 150px;
 }
-.stat-header {
-    margin-bottom: calc(var(--spacing-unit) * 1.5);
 }
-.stat-header h3 {
-    font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
-    letter-spacing: -0.01em;
 }
-.stat-content {
     display: flex;
     flex-direction: column;
-    gap: calc(var(--spacing-unit) * 1.5);
 }
 .stat-item {
@@ -434,329 +658,358 @@ body {
     align-items: center;
 }
-.stat-label {
     font-size: 13px;
     color: var(--text-secondary);
-    font-weight: 400;
 }
-.stat-value {
-    font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
-    letter-spacing: -0.01em;
 }
-.stat-value.positive {
-    color: var(--success);
-}
-.stat-value.negative {
-    color: var(--error);
 }
-.stat-value.neutral {
-    color: var(--accent-dark);
 }
-/* Charts Grid - fixed layout */
-.charts-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: calc(var(--spacing-unit) * 2);
-    margin-top: calc(var(--spacing-unit) * 2);
 }
-@media (max-width: 1100px) {
-    .charts-grid {
-        grid-template-columns: 1fr;
-    }
-}
-.chart-card {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-card);
-    padding: calc(var(--spacing-unit) * 1.5);
-    border: 1px solid var(--border-color);
 }
 .chart-header {
-    margin-bottom: calc(var(--spacing-unit) * 1.5);
 }
 .chart-header h3 {
-    font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
-    letter-spacing: -0.01em;
 }
 .chart-container {
     position: relative;
-    height: 300px;
-    width: 100%;
-    padding: 8px 0;
 }
-/* Responsive Design */
-@media (max-width: 1024px) {
-    .main-container {
-        grid-template-columns: 1fr;
-        gap: calc(var(--spacing-unit) * 1.5);
-    }
-    .sidebar {
-        order: 2;
-    }
-    .content-area {
-        order: 1;
-    }
-    .simulation-tabs {
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-    .sim-tab {
-        flex: 1;
-        min-width: 200px;
-    }
 }
-@media (max-width: 768px) {
-    .nav-container {
-        padding: 0 var(--spacing-unit);
-        height: 56px;
-    }
-    .app-title {
-        font-size: 16px;
-    }
-    .subtitle {
-        font-size: 12px;
-    }
-    .main-container {
-        padding: var(--spacing-unit);
-        gap: var(--spacing-unit);
-    }
-    .controls-section {
-        padding: calc(var(--spacing-unit) * 1.5);
-    }
-    .controls-grid {
-        grid-template-columns: 1fr;
-        gap: var(--spacing-unit);
-    }
-    .charts-grid {
-        grid-template-columns: 1fr;
-        gap: calc(var(--spacing-unit) * 1.5);
-    }
-    .chart-card,
-    .stat-card {
-        padding: calc(var(--spacing-unit) * 1.5);
-    }
-    .results-header {
-        flex-direction: column;
-        gap: var(--spacing-unit);
-        align-items: stretch;
-        padding: calc(var(--spacing-unit) * 1.5);
-    }
 }
-/* Utility classes */
-.hidden {
-    display: none !important;
 }
-.loading {
-    opacity: 0.6;
-    pointer-events: none;
 }
-/* Conditional visibility classes */
-.threshold-only, .multi-only {
-    display: none;
 }
-.threshold-only.visible, .multi-only.visible {
-    display: flex;
 }
-.multi-stats, .threshold-stats, .multi-chart {
-    display: none;
 }
-.multi-stats.visible, .threshold-stats.visible, .multi-chart.visible {
-    display: block;
 }
-/* View tabs */
-.view-tabs {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing-unit) * 0.5);
-    margin-bottom: calc(var(--spacing-unit) * 1.5);
 }
-.view-tab {
-    width: 100%;
-    padding: calc(var(--spacing-unit) * 0.75) calc(var(--spacing-unit) * 1);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-card);
-    background: var(--bg-primary);
-    cursor: pointer;
-    transition: all 0.15s ease;
-    text-align: left;
 }
-.view-tab:hover {
-    border-color: var(--border-hover);
-    background: var(--bg-secondary);
 }
-.view-tab.active {
-    border-color: var(--accent-dark);
-    background: var(--bg-secondary);
-    border-left: 3px solid var(--accent-dark);
 }
-.view-tab .tab-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-primary);
 }
-/* Simulation view only visibility */
-.simulation-view-only {
-    display: block;
 }
-.simulation-view-only.hidden {
-    display: none;
 }
-/* Methodology Section */
-.methodology-area {
-    grid-column: 2;
 }
-.methodology-section {
-    background: var(--bg-secondary);
-    border-radius: var(--radius-card);
-    padding: calc(var(--spacing-unit) * 2);
-    border: 1px solid var(--border-color);
 }
-.methodology-content {
-    max-width: 900px;
-    margin: 0 auto;
-    color: var(--text-primary);
-    line-height: 1.7;
 }
-.methodology-content h1 {
-    font-size: 28px;
-    font-weight: 700;
-    color: var(--accent);
-    margin-bottom: 8px;
 }
-.methodology-content h2 {
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--text-secondary);
-    margin-bottom: calc(var(--spacing-unit) * 2);
-    font-style: italic;
 }
-.methodology-content h3 {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin-top: calc(var(--spacing-unit) * 2);
-    margin-bottom: calc(var(--spacing-unit) * 1);
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--border-color);
 }
-.methodology-content h4 {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--accent-dark);
-    margin-bottom: 8px;
 }
-.methodology-content p {
-    font-size: 14px;
-    margin-bottom: calc(var(--spacing-unit) * 1);
-    color: var(--text-primary);
 }
-.methodology-content ul, .methodology-content ol {
-    margin-left: calc(var(--spacing-unit) * 1.5);
-    margin-bottom: calc(var(--spacing-unit) * 1);
 }
-.methodology-content li {
     font-size: 14px;
-    margin-bottom: 6px;
     color: var(--text-primary);
 }
-.methodology-content a {
-    color: var(--accent);
-    text-decoration: none;
 }
-.methodology-content a:hover {
-    text-decoration: underline;
 }
-.methodology-content strong {
-    color: var(--text-primary);
     font-weight: 600;
 }
-.methodology-content em {
-    font-style: italic;
     color: var(--text-secondary);
 }
-.methodology-intro {
-    background: var(--bg-tertiary);
-    padding: calc(var(--spacing-unit) * 1.5);
-    border-radius: var(--radius-card);
-    margin-bottom: calc(var(--spacing-unit) * 2);
-    border-left: 3px solid var(--accent-dark);
-}
-.methodology-intro p:last-child {
-    margin-bottom: 0;
-}
-.hypothesis-box {
-    background: var(--bg-primary);
-    padding: calc(var(--spacing-unit) * 1.5);
-    border-radius: var(--radius-card);
-    margin: calc(var(--spacing-unit) * 1.5) 0;
-    border: 1px solid var(--accent-dark);
-    font-size: 14px;
 }
-.sim-type-box {
-    background: var(--bg-tertiary);
-    padding: calc(var(--spacing-unit) * 1.5);
-    border-radius: var(--radius-card);
-    margin-bottom: calc(var(--spacing-unit) * 1);
 }
-.sim-type-box p:last-child {
-    margin-bottom: 0;
 }

+/* Safe Choices - Modern Dark Theme */
 :root {
+    /* Color Palette */
+    --bg-base: #0a0f1a;
+    --bg-surface: #111827;
+    --bg-elevated: #1f2937;
+    --bg-hover: #374151;
+    --text-primary: #f9fafb;
+    --text-secondary: #9ca3af;
+    --text-muted: #6b7280;
+    --accent: #3b82f6;
+    --accent-light: #60a5fa;
+    --accent-dark: #2563eb;
+    --accent-glow: rgba(59, 130, 246, 0.15);
     --success: #10b981;
+    --success-bg: rgba(16, 185, 129, 0.1);
+    --danger: #ef4444;
+    --danger-bg: rgba(239, 68, 68, 0.1);
     --warning: #f59e0b;
+    --border: rgba(255, 255, 255, 0.08);
+    --border-accent: rgba(59, 130, 246, 0.3);
+    /* Sizing */
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    /* Typography */
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
+/* Reset */
+*, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
+html {
+    font-size: 14px;
+    scroll-behavior: smooth;
+}
 body {
+    font-family: var(--font);
+    background: var(--bg-base);
     color: var(--text-primary);
     line-height: 1.6;
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
 }
+/* ===== HEADER ===== */
+.header {
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border);
     position: sticky;
     top: 0;
     z-index: 100;
+    backdrop-filter: blur(12px);
 }
+.header-content {
+    max-width: 1440px;
     margin: 0 auto;
+    padding: 0 24px;
+    height: 64px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
+.brand {
     display: flex;
     align-items: center;
     gap: 12px;
 }
+.brand-icon {
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
+    border-radius: var(--radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
 }
+.brand-text h1 {
     font-size: 18px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
 }
+.brand-tagline {
+    font-size: 12px;
+    color: var(--text-muted);
     font-weight: 400;
 }
+.data-badge {
     display: flex;
     align-items: center;
+    gap: 8px;
+    padding: 6px 12px;
+    background: var(--bg-elevated);
+    border-radius: var(--radius-sm);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
 }
+.badge-dot {
+    width: 6px;
+    height: 6px;
+    background: var(--success);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
 }
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+/* ===== MAIN LAYOUT ===== */
+.main {
+    max-width: 1440px;
     margin: 0 auto;
+    padding: 24px;
     display: grid;
+    grid-template-columns: 260px 1fr;
+    gap: 24px;
+    min-height: calc(100vh - 64px);
 }
+/* ===== SIDEBAR ===== */
 .sidebar {
     display: flex;
     flex-direction: column;
+    gap: 24px;
+    position: sticky;
+    top: 88px;
+    height: fit-content;
 }
+.sidebar-section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+.section-label {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+    padding-left: 4px;
 }
+/* Toggle Buttons */
+.toggle-group {
     display: flex;
     flex-direction: column;
+    gap: 6px;
 }
+.toggle-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: transparent;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    color: var(--text-secondary);
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.toggle-btn:hover {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-color: var(--border);
+}
+.toggle-btn.active {
+    background: var(--accent-glow);
+    border-color: var(--border-accent);
+    color: var(--accent-light);
+}
+.toggle-btn svg {
+    flex-shrink: 0;
+    opacity: 0.7;
+}
+.toggle-btn.active svg {
+    opacity: 1;
+}
+/* Strategy Cards */
+.strategy-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.strategy-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 14px;
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
     cursor: pointer;
+    transition: all 0.2s;
     text-align: left;
 }
+.strategy-card:hover {
+    background: var(--bg-elevated);
+    border-color: rgba(255, 255, 255, 0.12);
+    transform: translateX(2px);
 }
+.strategy-card.active {
+    background: var(--accent-glow);
+    border-color: var(--border-accent);
 }
+.strategy-icon {
+    width: 36px;
+    height: 36px;
+    background: var(--bg-elevated);
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+.strategy-card.active .strategy-icon {
+    background: var(--accent);
+    color: white;
+}
+.strategy-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.strategy-name {
+    font-size: 13px;
     font-weight: 600;
     color: var(--text-primary);
 }
+.strategy-desc {
+    font-size: 11px;
+    color: var(--text-muted);
+}
+/* Quick Stats */
+.quick-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+.quick-stat {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    padding: 12px;
+    text-align: center;
+}
+.quick-stat-value {
+    display: block;
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--accent-light);
 }
+.quick-stat-label {
+    font-size: 10px;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+/* ===== CONTENT ===== */
+.content {
+    min-width: 0;
+}
+.simulation-content {
     display: flex;
     flex-direction: column;
+    gap: 20px;
+}
+.methodology-content {
+    display: none;
 }
+/* ===== PANELS ===== */
+.panel {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 24px;
 }
+.panel-header {
+    margin-bottom: 20px;
 }
+.panel-header h2 {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 16px;
     font-weight: 600;
     color: var(--text-primary);
 }
+.panel-header h2 svg {
+    color: var(--accent);
 }
+/* ===== PARAMETERS ===== */
+.params-grid {
     display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
+    margin-bottom: 24px;
 }
+.param-group {
     display: flex;
     flex-direction: column;
+    gap: 8px;
 }
+.param-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
 }
+.param-hint {
+    width: 14px;
+    height: 14px;
+    background: var(--bg-elevated);
+    border-radius: 50%;
+    font-size: 9px;
+    font-weight: 600;
+    color: var(--text-muted);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: help;
 }
+.param-input-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.param-input {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--bg-base);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
     color: var(--text-primary);
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font);
+    transition: all 0.2s;
 }
+.param-input:focus {
+    outline: none;
     border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-glow);
 }
+.param-input-wrap .param-input {
+    padding-right: 44px;
+}
+.param-unit {
+    position: absolute;
+    right: 12px;
     font-size: 12px;
+    color: var(--text-muted);
+    pointer-events: none;
+}
+.param-select {
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    padding-right: 36px;
+}
+.custom-target-input {
+    display: none;
+    margin-top: 8px;
+}
+.custom-target-input.visible {
+    display: block;
+}
+/* Conditional visibility */
+.threshold-only,
+.multi-only {
+    display: none;
+}
+.threshold-only.visible,
+.multi-only.visible {
+    display: flex;
 }
+/* ===== RUN BUTTON ===== */
+.run-container {
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 16px;
+    padding-top: 20px;
+    border-top: 1px solid var(--border);
 }
+.run-btn {
+    display: flex;
+    align-items: center;
+    gap: 10px;
     padding: 12px 28px;
+    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
+    border: none;
+    border-radius: var(--radius-md);
+    color: white;
     font-size: 14px;
     font-weight: 600;
+    font-family: var(--font);
     cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
 }
+.run-btn:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
 }
+.run-btn:disabled {
+    opacity: 0.5;
     cursor: not-allowed;
+    transform: none;
+}
+.run-btn.running .run-icon {
+    display: none;
+}
+.run-btn.running .run-spinner {
+    display: block;
 }
 .run-spinner {
+    display: none;
     width: 18px;
     height: 18px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }
 @keyframes spin {
+    to { transform: rotate(360deg); }
 }
+.run-estimate {
+    font-size: 12px;
+    color: var(--text-muted);
 }
+/* ===== PROGRESS ===== */
+.progress-panel {
+    display: none;
+    padding: 20px 24px;
 }
+.progress-panel.visible {
+    display: block;
+}
+.progress-content {
+    max-width: 500px;
     margin: 0 auto;
 }
+.progress-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
+    font-size: 13px;
+}
+#progressText {
     color: var(--text-primary);
+    font-weight: 500;
 }
+#progressPercent {
+    color: var(--accent-light);
+    font-weight: 600;
+}
+.progress-track {
     height: 6px;
+    background: var(--bg-elevated);
     border-radius: 3px;
     overflow: hidden;
 }
 .progress-fill {
     height: 100%;
     width: 0%;
+    background: linear-gradient(90deg, var(--accent), var(--accent-light));
+    border-radius: 3px;
+    transition: width 0.3s ease;
 }
+/* ===== RESULTS ===== */
+.results {
+    display: none;
     flex-direction: column;
+    gap: 20px;
 }
+.results.visible {
     display: flex;
 }
+/* Key Metrics */
+.metrics-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
 }
+.metric-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+    text-align: center;
+    transition: all 0.2s;
+}
+.metric-card:hover {
+    border-color: rgba(255, 255, 255, 0.12);
+}
+.metric-card.metric-primary {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
+    border-color: var(--border-accent);
+}
+.metric-card.metric-risk .metric-value.high-risk {
+    color: var(--danger);
+}
+.metric-label {
+    font-size: 11px;
     font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-muted);
+    margin-bottom: 8px;
 }
+.metric-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: -0.02em;
 }
+.metric-value.positive {
+    color: var(--success);
 }
+.metric-value.negative {
+    color: var(--danger);
 }
+/* Stats Panels */
+.stats-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 16px;
 }
+.stat-panel {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
 }
+.stat-panel h3 {
+    font-size: 13px;
     font-weight: 600;
     color: var(--text-primary);
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--border);
 }
+.stat-list {
     display: flex;
     flex-direction: column;
+    gap: 12px;
 }
 .stat-item {
     align-items: center;
 }
+.stat-item .stat-label {
     font-size: 13px;
     color: var(--text-secondary);
 }
+.stat-item .stat-value {
+    font-size: 14px;
     font-weight: 600;
     color: var(--text-primary);
 }
+.multi-stats,
+.threshold-stats {
+    display: none;
 }
+.multi-stats.visible,
+.threshold-stats.visible {
+    display: block;
 }
+/* Charts */
+.charts-row {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
 }
+.chart-panel {
+    background: var(--bg-surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 20px;
 }
 .chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
 }
 .chart-header h3 {
+    font-size: 14px;
     font-weight: 600;
     color: var(--text-primary);
+}
+.export-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 500;
+    font-family: var(--font);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+.export-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
 }
 .chart-container {
+    height: 280px;
     position: relative;
 }
+.multi-chart {
+    display: none;
+    grid-column: span 2;
 }
+.multi-chart.visible {
+    display: block;
 }
+/* ===== METHODOLOGY ===== */
+.article {
+    max-width: 800px;
+    margin: 0 auto;
 }
+.article-header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding-bottom: 32px;
+    border-bottom: 1px solid var(--border);
 }
+.article-header h1 {
+    font-size: 36px;
+    font-weight: 700;
+    color: var(--accent-light);
+    margin-bottom: 8px;
+    letter-spacing: -0.02em;
 }
+.article-subtitle {
+    font-size: 16px;
+    color: var(--text-secondary);
 }
+.article-section {
+    margin-bottom: 36px;
 }
+.article-section h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--border);
 }
+.article-section p {
+    font-size: 15px;
+    color: var(--text-secondary);
+    margin-bottom: 16px;
+    line-height: 1.7;
 }
+.article-list {
+    margin-left: 20px;
+    margin-bottom: 16px;
 }
+.article-list li {
+    font-size: 15px;
+    color: var(--text-secondary);
+    margin-bottom: 8px;
+    line-height: 1.6;
 }
+.article-section a {
+    color: var(--accent-light);
+    text-decoration: none;
 }
+.article-section a:hover {
+    text-decoration: underline;
 }
+/* Callouts */
+.callout {
+    padding: 20px 24px;
+    border-radius: var(--radius-lg);
+    margin-bottom: 20px;
 }
+.callout-intro {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
+    border-left: 3px solid var(--accent);
+}
+.callout-intro p {
+    color: var(--text-primary);
 }
+.callout-intro p:last-child {
+    margin-bottom: 0;
 }
+.callout-hypothesis {
+    background: var(--bg-elevated);
+    border: 1px solid var(--accent);
 }
+.callout-hypothesis strong {
+    color: var(--accent-light);
 }
+/* Tags */
+.tag-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 16px 0;
 }
+.tag {
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
 }
+.tag-excluded {
+    background: var(--danger-bg);
+    color: var(--danger);
 }
+/* Model Steps */
+.model-steps {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
 }
+.model-step {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    background: var(--bg-elevated);
+    border-radius: var(--radius-md);
 }
+.step-num {
+    width: 28px;
+    height: 28px;
+    background: var(--accent);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 700;
+    color: white;
+    flex-shrink: 0;
 }
+.step-text {
     font-size: 14px;
     color: var(--text-primary);
 }
+.step-text strong {
+    color: var(--accent-light);
 }
+/* Strategy Explainer */
+.strategy-explainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
 }
+.strategy-box {
+    background: var(--bg-elevated);
+    border-radius: var(--radius-lg);
+    padding: 20px;
+}
+.strategy-box h3 {
+    font-size: 15px;
     font-weight: 600;
+    color: var(--accent-light);
+    margin-bottom: 8px;
 }
+.strategy-box p {
+    font-size: 13px;
     color: var(--text-secondary);
+    margin-bottom: 0;
+    line-height: 1.6;
 }
+/* ===== RESPONSIVE ===== */
+@media (max-width: 1024px) {
+    .main {
+        grid-template-columns: 1fr;
+        padding: 16px;
+    }
+    .sidebar {
+        position: static;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px;
+    }
+    .sidebar-section {
+        flex: 1;
+        min-width: 200px;
+    }
+    .toggle-group {
+        flex-direction: row;
+    }
+    .strategy-cards {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+    .strategy-card {
+        flex: 1;
+        min-width: 180px;
+    }
+    .metrics-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .charts-row {
+        grid-template-columns: 1fr;
+    }
+    .multi-chart {
+        grid-column: span 1;
+    }
 }
+@media (max-width: 640px) {
+    .header-content {
+        padding: 0 16px;
+    }
+    .brand-tagline {
+        display: none;
+    }
+    .params-grid {
+        grid-template-columns: 1fr 1fr;
+    }
+    .metrics-row {
+        grid-template-columns: 1fr;
+    }
+    .metric-value {
+        font-size: 24px;
+    }
+    .stats-row {
+        grid-template-columns: 1fr;
+    }
+    .strategy-explainer {
+        grid-template-columns: 1fr;
+    }
+    .run-container {
+        flex-direction: column;
+        gap: 12px;
+    }
+    .run-btn {
+        width: 100%;
+        justify-content: center;
+    }
 }
+/* Hidden utility */
+.simulation-view-only.hidden {
+    display: none !important;
 }