Spaces:

engineportf
/

portfolio_opt

Running

App Files Files Community

portfolio_opt / static /index.html

engineportf

Upload static/index.html with huggingface_hub

82c203d verified 1 day ago

Raw

History Blame Contribute Delete

132 kB

	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="utf-8" />
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<title>Wealth Engine \| Institutional Quant Platform</title>
	<!-- SESSION GUARD: runs synchronously before anything renders -->
	<script>
	// Safe storage wrappers to prevent cross-origin iframe crashes
	window.safeLocalGet = function(k) { try { return localStorage.getItem(k); } catch(e) { return window['__ls_'+k] \|\| null; } };
	window.safeLocalSet = function(k, v) { try { localStorage.setItem(k, v); } catch(e) { window['__ls_'+k] = v; } };
	window.safeLocalRem = function(k) { try { localStorage.removeItem(k); } catch(e) { delete window['__ls_'+k]; } };
	window.safeSessionGet = function(k) { try { return sessionStorage.getItem(k); } catch(e) { return window['__ss_'+k] \|\| null; } };
	window.safeSessionSet = function(k, v) { try { sessionStorage.setItem(k, v); } catch(e) { window['__ss_'+k] = v; } };
	window.safeSessionRem = function(k) { try { sessionStorage.removeItem(k); } catch(e) { delete window['__ss_'+k]; } };

	(function () {
	var key = window.safeSessionGet('accessKey') \|\| window.safeLocalGet('accessKey');
	var path = window.location.pathname;
	if ((!key \|\| key.trim() === '') && path !== '/' && path !== '/login.html') {
	window.location.replace('/');
	}
	})();
	</script>
	<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
	<link href="/static/style.css?v=4" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
	<!-- MathJax for rendering quantitative equations -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
	<!-- Chart.js for Live Visuals -->
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<!-- html2pdf for zero-footprint client-side PDF rendering -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
	<!-- MathJax for rendering LaTeX equations beautifully -->
	<script>


	MathJax = {


	tex: {


	inlineMath: [['$', '$'], ['\$', '\$']],


	displayMath: [['$$', '$$'], ['\\[', '\\]']]


	}


	};


	</script>
	<script async id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
	</head>
	<body>
	<!-- 1. Top Bar Ticker -->
	<div class="market-ticker-bar">
	<div class="ticker-content" id="liveTickerContent">
	<span>Loading live market data...</span>
	</div>
	</div>
	<!-- Ambient Network Background (Vanta JS) -->
	<div id="vanta-bg"
	style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none;"></div>
	<div class="noise-overlay"></div>
	<!-- Navigation Bar (Top) -->
	<nav class="top-nav">
	<div class="nav-container">
	<div class="nav-logo">
	<div class="hamburger-menu" onclick="toggleSidebar()"
	style="cursor: pointer; padding: 5px; margin-right: 10px;">
	<svg fill="none" height="24" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
	stroke-width="2" viewbox="0 0 24 24" width="24">
	<line x1="3" x2="21" y1="12" y2="12"></line>
	<line x1="3" x2="21" y1="6" y2="6"></line>
	<line x1="3" x2="21" y1="18" y2="18"></line>
	</svg>
	</div>
	<div onclick="switchView('hero')"
	style="display: flex; align-items: center; gap: 0.8rem; cursor: pointer;">
	<svg class="logo-svg" fill="none" height="24" stroke="url(#primary-gradient)" stroke-linecap="round"
	stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24">
	<defs>
	<lineargradient id="primary-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
	<stop offset="0%" stop-color="#60a5fa"></stop>
	<stop offset="100%" stop-color="#818cf8"></stop>
	</lineargradient>
	</defs>
	<polygon points="12 2 22 8 22 19 12 23 2 19 2 8"></polygon>
	</svg>
	<span class="logo-text">WEALTH ENGINE</span>
	<!-- ARG Progress Ring -->
	<div id="arg-progress-container" style="position:relative; width:24px; height:24px; margin-left:8px; cursor:help;" title="13th Egg Hover">
	<svg width="24" height="24" viewBox="0 0 24 24">
	<circle cx="12" cy="12" r="10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2" />
	<circle id="arg-progress-ring" cx="12" cy="12" r="10" fill="none" stroke="#fbbf24" stroke-width="2" stroke-dasharray="62.8" stroke-dashoffset="62.8" style="transition: stroke-dashoffset 0.5s ease; transform: rotate(-90deg); transform-origin: 50% 50%;" />
	</svg>
	</div>
	</div>
	</div>
	<button aria-label="Open menu" class="hamburger-btn" id="hamburgerBtn" onclick="toggleMobileNav()">
	<span></span><span></span><span></span>
	</button>
	<div class="nav-links" id="navLinks">
	<span class="nav-link" onclick="switchView('hero')">Home</span>
	<span class="nav-link" onclick="switchView('sandbox')">Engine</span>
	<span class="nav-link" onclick="switchView('modelzoo')">Alpha Models</span>
	<span class="nav-link" onclick="switchView('hft')">Speed Trading Demo</span>
	<span class="nav-link" onclick="window.location.href='/options'">Options Explorer</span>
	<span class="nav-link" onclick="switchView('statarb')">Pairs Trading</span>
	<span class="nav-link" onclick="switchView('cryptoarb')">Crypto Arbitrage</span>
	<span class="nav-link" onclick="switchView('benchmarks')">Engine Speed</span>
	<span class="nav-link" onclick="switchView('docs')">Docs</span>
	<span class="nav-link" id="phantom-portfolio-tab" onclick="switchView('phantom')" style="display: none;">Phantom Portfolio</span>
	<!-- Only Top-level global actions stay here -->
	<span class="nav-link" onclick="logout()"
	style="color: #ef4444; display: flex; align-items: center; gap: 0.25rem;">
	<svg fill="none" height="16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
	stroke-width="2" viewbox="0 0 24 24" width="16">
	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
	<polyline points="16 17 21 12 16 7"></polyline>
	<line x1="21" x2="9" y1="12" y2="12"></line>
	</svg>


	Logout


	</span>
	</div>
	</div>
	</nav>
	<div class="mobile-nav-overlay" id="mobileNavOverlay" onclick="toggleMobileNav()"></div>
	<!-- App Layout Container -->
	<div class="app-layout">
	<!-- Left Sidebar Dashboard -->
	<aside class="sidebar" id="appSidebar">
	<div class="sidebar-menu">
	<div class="sidebar-divider"></div>
	<div class="sidebar-label">Dashboards</div>
	<span class="sidebar-link" data-target="saved-portfolios" onclick="switchView('saved-portfolios')">Saved
	Portfolios</span>
	<span class="sidebar-link" data-target="backtest-history"
	onclick="switchView('backtest-history')">Backtest History</span>
	<span class="sidebar-link" data-target="risk-dashboards" onclick="switchView('risk-dashboards')">Risk
	Dashboards</span>
	<span class="sidebar-link" data-target="api-webhooks" onclick="switchView('api-webhooks')">API &
	Webhooks</span>

	<div class="sidebar-divider"></div>
	<div class="sidebar-label">Resources</div>
	<span class="sidebar-link" data-target="howitworks" onclick="switchView('howitworks')">How It


	Works</span>
	<span class="sidebar-link" data-target="terms" onclick="switchView('terms')">Terms of Service</span>
	<div class="sidebar-divider"></div>
	<span class="sidebar-link" data-target="feedback" onclick="switchView('feedback')">Submit
	Feedback</span>
	</div>
	</aside>
	<!-- Main Content Container -->
	<main class="main-content">

	<!-- VIEW: HERO (The Hook) -->
	<div class="view-section active" id="view-hero">
	<div class="hero-layout">
	<div class="hero-left">
	<h1 class="hero-title">Predictive Investing.<br />Zero Stochastic Noise.</h1>
	<p class="hero-subtitle">Next-generation quantitative engine combining Deep Learning, Markov


	Chain Regime detection, and Differentiable Optimization.</p>
	<div class="hero-ctas">
	<button class="btn-primary" onclick="switchView('sandbox')">


	Enter Engine Room


	<svg fill="none" height="18" stroke="currentColor" stroke-linecap="round"
	stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="18">
	<line x1="5" x2="19" y1="12" y2="12"></line>
	<polyline points="12 5 19 12 12 19"></polyline>
	</svg>
	</button>
	<button class="btn-secondary"
	onclick="document.getElementById('wizardOverlay').style.display='flex'">


	Run Guided Wizard


	</button>
	</div>
	</div>
	<div class="hero-right">
	<div class="glass-panel pro-variant hook-panel"
	style="padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; height: 100%;">
	<h3 style="font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem;">
	<svg fill="none" height="18" stroke="#60a5fa" stroke-width="2" viewbox="0 0 24 24"
	width="18">
	<path
	d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9.5a2.5 2.5 0 0 0-2.5-2.5H15">
	</path>
	</svg>


	Live Financial News


	</h3>
	<p class="text-xs text-muted">Real-time market intelligence and global financial updates.


	</p>
	<div
	style="height: 350px; width: 100%; position: relative; overflow: hidden; border-radius: 8px;">
	<!-- Google Finance News Mock BEGIN -->
	<div
	style="background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; height: 100%; padding: 1rem; overflow-y: auto; color: #f8fafc; font-family: 'Segoe UI', Arial, sans-serif;">
	<div
	style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 0.5rem;">
	<div style="display: flex; align-items: center; gap: 5px;">
	<svg height="24" viewbox="0 0 24 24" width="24">
	<path
	d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
	fill="#4285F4"></path>
	<path
	d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
	fill="#34A853"></path>
	<path
	d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
	fill="#FBBC05"></path>
	<path
	d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
	fill="#EA4335"></path>
	</svg>
	<span style="font-size: 1.1rem; font-weight: 500; color: #e2e8f0;">Finance


	News</span>
	</div>
	</div>
	<div id="financeNewsContent"
	style="display: flex; flex-direction: column; gap: 1rem;">
	<div style="padding: 1rem; text-align: center; color: #94a3b8;">Loading latest


	market news...</div>
	</div>
	</div>
	<!-- Google Finance News Mock END -->
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- VIEW: FEEDBACK -->
	<div class="view-section" id="view-feedback">

	<div class="page-header" style="text-align: center; margin-bottom: 2rem;">
	<h1 style="background: linear-gradient(90deg, #60a5fa, #c084fc); -webkit-background-clip: text; color: transparent;">Submit Feedback</h1>
	<p class="subtitle">We build for you. Let us know what you need.</p>
	</div>
	<div class="glass-panel pro-variant feedback-panel" style="max-width: 600px; margin: 0 auto; padding: 2.5rem; border-radius: 16px; border: 1px solid rgba(96, 165, 250, 0.2); box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
	<form id="feedbackForm" style="display: flex; flex-direction: column; gap: 1.5rem;">
	<input type="hidden" name="_captcha" value="false">

	<div class="form-group" style="margin-bottom: 0;">
	<label for="feedbackEmail" style="display: block; margin-bottom: 0.5rem; color: #94a3b8; font-size: 0.95rem;">Email Address <span style="color: #475569;">(optional)</span></label>
	<input type="email" name="email" id="feedbackEmail" class="pro-input" placeholder="quant@example.com" style="width: 100%; box-sizing: border-box; padding: 1rem; border-radius: 8px;" />
	</div>

	<div class="form-group" style="margin-bottom: 0;">
	<label for="feedbackType" style="display: block; margin-bottom: 0.5rem; color: #94a3b8; font-size: 0.95rem;">Feedback Category</label>
	<select name="type" id="feedbackType" class="pro-input" style="width: 100%; box-sizing: border-box; padding: 1rem; border-radius: 8px; appearance: none; background-color: rgba(15, 23, 42, 0.8);">
	<option value="bug">π› Bug Report</option>
	<option value="feature">β¨ Feature Request</option>
	<option value="general">π’¬ General Feedback</option>
	</select>
	</div>

	<div class="form-group" style="margin-bottom: 0;">
	<label for="feedbackMessage" style="display: block; margin-bottom: 0.5rem; color: #94a3b8; font-size: 0.95rem;">Your Message</label>
	<textarea name="message" id="feedbackMessage" class="pro-input" rows="6" required placeholder="Tell us what's on your mind..." style="width: 100%; box-sizing: border-box; padding: 1rem; border-radius: 8px; resize: vertical;"></textarea>
	</div>

	<button type="submit" id="feedbackBtn" class="btn-primary" style="margin-top: 1rem; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; font-size: 1rem; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);">
	Securely Transmit
	</button>
	</form>
	<div id="feedbackStatus" style="margin-top: 15px; font-weight: bold; display: none;"></div>

	<script>
	document.getElementById('feedbackForm').addEventListener('submit', function(e) {
	e.preventDefault();
	const btn = document.getElementById('feedbackBtn');
	const statusDiv = document.getElementById('feedbackStatus');
	btn.textContent = 'Sending...';
	btn.disabled = true;

	fetch('https://formsubmit.co/ajax/mkoustis05@gmail.com', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
	body: JSON.stringify({
	email: document.getElementById('feedbackEmail').value,
	type: document.getElementById('feedbackType').value,
	message: document.getElementById('feedbackMessage').value
	})
	})
	.then(r => r.json())
	.then(data => {
	statusDiv.style.display = 'block';
	statusDiv.style.color = '#10b981';
	statusDiv.textContent = 'Feedback sent successfully! Thank you.';
	btn.textContent = 'Sent';
	})
	.catch(err => {
	statusDiv.style.display = 'block';
	statusDiv.style.color = '#ef4444';
	statusDiv.textContent = 'Error sending feedback. Please try again.';
	btn.textContent = 'Send Feedback';
	btn.disabled = false;
	});
	});
	</script>
	</div>
	</div>

	<!-- VIEW: SANDBOX (The Engine Room) -->
	<div class="view-section" id="view-sandbox">
	<div class="page-header" style="text-align: center; margin-bottom: 2rem;">
	<h1>The Engine Room</h1>
	<p class="subtitle">Configure your matrix parameters and launch the optimization engine.</p>
	</div>
	<!-- Single Centered Form Layout -->
	<div class="sandbox-container" style="max-width: 900px; margin: 0 auto;">
	<div class="glass-panel pro-variant">
	<div
	style="background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem;">
	<h4 style="margin-top: 0; display: flex; align-items: center; gap: 8px; color: #10b981;">
	<svg fill="none" height="20" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"
	width="20">
	<rect height="16" rx="2" ry="2" width="16" x="4" y="4"></rect>
	<rect height="6" width="6" x="9" y="9"></rect>
	<line x1="9" x2="9" y1="1" y2="4"></line>
	<line x1="15" x2="15" y1="1" y2="4"></line>
	<line x1="9" x2="9" y1="20" y2="23"></line>
	<line x1="15" x2="15" y1="20" y2="23"></line>
	<line x1="20" x2="23" y1="9" y2="9"></line>
	<line x1="20" x2="23" y1="14" y2="14"></line>
	<line x1="1" x2="4" y1="9" y2="9"></line>
	<line x1="1" x2="4" y1="14" y2="14"></line>
	</svg>
	Quantitative Engine
	</h4>
	<div
	style="background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; padding: 20px; margin-bottom: 2rem;">
	<h4
	style="color: #a78bfa; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 8px;">
	<i class="fas fa-robot"></i> Ask NOVA to Build Your Portfolio


	</h4>
	<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">Describe
	your


	ideal portfolio in plain English, and NOVA will automatically configure the matrix
	parameters below.


	</p>
	<div style="display: flex; gap: 10px;">
	<input id="ai-strategy-input"
	placeholder="e.g. 'NOVA, build me a high-growth tech portfolio with gold futures and low risk'"
	style="flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 12px 15px; color: white; outline: none; font-size: 0.95rem;"
	type="text" />
	<button class="btn-primary" id="ai-strategy-btn" onclick="generateAIStrategy()"
	style="white-space: nowrap;">


	Ask NOVA


	</button>
	</div>
	</div>
	<h3 class="panel-title" style="margin-bottom: 2rem;">Matrix Configuration</h3>
	<form id="portfolioForm">
	<div class="form-group">
	<div
	style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
	<label for="tickers" style="margin-bottom: 0;">Asset Universe (Tickers)</label>
	</div>
	<input id="tickers" placeholder="SPY, TLT, GLD, AAPL" required="" type="text"
	value="SPY, TLT, GLD, AAPL, MSFT" />
	</div>
	<div class="split-form-row">
	<div class="form-group" style="margin-bottom: 0;">
	<label for="currency" style="color: #3b82f6; font-weight: bold;">Base
	Currency</label>
	<div class="select-wrapper">
	<select id="currency"
	style="padding: 1rem 0.5rem; text-align: center; font-size: 1.1rem; border: 2px solid #3b82f6; border-radius: 8px; font-weight: bold;">
	<option value="$">USD ($)</option>
	<option value="β‚¬">EUR (β‚¬)</option>
	<option value="Β£">GBP (Β£)</option>
	<option value="Β¥">JPY (Β¥)</option>
	<option value="CHF">CHF (β‚£)</option>
	</select>
	</div>
	</div>
	<div class="form-group" style="margin-bottom: 0;">
	<label for="capital">Capital Allocation</label>
	<div class="input-wrapper">
	<input id="capital" required="" style="padding-left: 1.2rem !important;"
	type="number" value="100000" />
	</div>
	</div>
	</div>
	<div class="form-group" style="margin-bottom: 0;">
	<label for="risk">Risk Aversion (1 = Risk Lover, 10 = Risk Averse)</label>
	<div class="range-container">
	<input id="risk" max="10" min="1" type="range" value="5" />
	<div class="range-val" id="riskVal">5</div>
	</div>
	</div>
	</div>
	<div class="form-group">
	<label for="model">Expected Return Vector (Alpha Engine)</label>
	<select id="model">
	<option value="1">CAPM (Capital Asset Pricing Model Prior)</option>
	<option value="2">Black-Litterman (Market Equilibrium Prior)</option>
	<option value="3">Bayesian Shrinkage (James-Stein Estimator)</option>
	<option value="4">Multifactor Regression (Fama-French + Momentum)</option>
	<option selected="" value="5">Global Pooled Panel Machine Learning (XGBoost & Lasso)


	</option>
	<option value="6">End-to-End Differentiable Optimization (SPO+)</option>
	<option value="7">Regime-Adaptive Hidden Markov Model (HMM)</option>
	</select>
	</div>
	<div class="form-group">
	<div class="form-group">
	<label for="rebalance_freq_months">Rebalance Window (Months)</label>
	<select id="rebalance_freq_months">
	<option value="1">1 Month (Monthly)</option>
	<option value="2">2 Months (Bi-Monthly)</option>
	<option selected value="3">3 Months (Quarterly)</option>
	<option value="6">6 Months (Semi-Annually)</option>
	<option value="12">12 Months (Annually)</option>
	</select>
	</div>
	<div class="form-group">
	<label for="allocation_engine">Constraint Matrix Layer</label>
	<select id="allocation_engine">
	<option value="1">Minimize Tail Risk (CVaR)</option>
	<option value="2">Hierarchical Risk Parity (HRP)</option>
	<option value="3">Exact True Risk Parity (ERC)</option>
	</select>
	</div>
	<div class="toggles-container"
	style="margin-bottom: 2.5rem; justify-content: center; align-items: center;">
	<label class="toggle-label"><input checked="" id="allow_shorting"
	type="checkbox" /><span class="toggle-switch"></span>Allow Shorts</label>
	<label class="toggle-label tooltip-anchor"><input id="tax_enabled"
	type="checkbox" /><span class="toggle-switch"></span>Tax Optimized


	<div class="tooltip-box">Injects an L1-Norm penalty vector scaling with asset


	turnover.</div>
	</label>
	<label class="toggle-label tooltip-anchor"><input checked="" id="garch_enabled"
	type="checkbox" /><span class="toggle-switch"></span>GARCH Volatility


	<div class="tooltip-box">Dynamically scales risk constraints using autoregressive


	volatility clustering.</div>
	</label>
	</div>
	<div class="form-group"
	style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; margin-top: 1rem;">
	<label
	onclick="document.getElementById('advConstraints').style.display = document.getElementById('advConstraints').style.display === 'none' ? 'block' : 'none'"
	style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
	<span>Advanced Constraints (Optional)</span>
	<svg fill="none" height="16" stroke="currentColor" stroke-width="2"
	viewbox="0 0 24 24" width="16">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg>
	</label>
	<div id="advConstraints" style="display: none; margin-top: 1rem;">
	<div class="form-group">
	<label>Custom Limits (Format: Asset/Sector, Direction, Limit%)</label>
	<p class="text-xs text-muted" style="margin-bottom: 0.5rem;">Examples: "AAPL,


	max, 5", "Sector:Tech, min, 10"</p>
	<textarea id="custom_constraints_input" placeholder="AAPL, max, 5
	Sector:Tech, min, 10" rows="3" style="width: 100%; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0.8rem; border-radius: 4px; font-family: monospace;"></textarea>
	</div>
	</div>
	</div>
	<button class="btn-primary" id="generateBtn"
	style="width: 100%; justify-content: center; padding: 1.2rem; font-size: 1.1rem; box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3);"
	type="submit">
	<span>Execute Institutional Optimization</span>
	<svg fill="none" height="24" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"
	width="24">
	<polyline points="9 18 15 12 9 6"></polyline>
	</svg>
	</button>
	<button class="btn-secondary" onclick="viewHistory()"
	style="width: 100%; justify-content: center; margin-top: 10px; padding: 1rem; border-color: rgba(255,255,255,0.1);"
	type="button">
	<svg fill="none" height="18" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"
	width="18">
	<path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
	</svg>
	<span>View Backtest History</span>
	</button>
	</form>
	</div>
	<!-- Math Panel: Under the Hood -->
	<div class="glass-panel" style="margin-top: 2rem;">
	<div
	style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid var(--panel-border); padding-bottom: 0.5rem;">
	<h3
	style="font-family: var(--font-heading); color: #8b5cf6; display: flex; align-items: center; gap: 8px; margin:0;">
	<svg fill="none" height="20" stroke="currentColor" stroke-width="2"
	viewbox="0 0 24 24" width="20">
	<path d="M4 22h14a2 2 0 0 0 2-2V7.5L14.5 2H6a2 2 0 0 0-2 2v4"></path>
	<polyline points="14 2 14 8 20 8"></polyline>
	<path d="M2 15h10"></path>
	<path d="M9 18l3-3-3-3"></path>
	</svg>


	Under the Hood: Active Mathematics


	</h3>
	</div>
	<div id="active-math-formula"
	style="font-size: 1.1rem; overflow-x: auto; padding: 1rem; background: rgba(0,0,0,0.3); border-radius: 8px; font-family: monospace; color: var(--text-muted); text-align: center;">
	<!-- Initial formula for Global Pooled Panel Machine Learning -->


	$$ \hat{y} = \sum_{k=1}^{K} f_k(X) + \lambda \\|\beta\\|_1 $$


	</div>
	<p id="active-math-desc"
	style="font-size: 0.85rem; color: var(--text-muted); margin-top: 1rem; text-align: center;">


	Currently modeling predictive alpha via Gradient Boosted Decision Trees with L1-Norm
	feature


	selection penalization.


	</p>
	</div>
	</div>
	<!-- THE ANALYTICS & STRESS-TESTING SUITE (Only shown after generation) -->
	<div class="analytics-suite" id="analyticsSuite" style="display:none;">
	<div class="suite-tabs">
	<button class="suite-tab active" data-tab="backtest">Backtest Engine</button>
	<button class="suite-tab" data-tab="stress">Macro Stress-Testing</button>
	<button class="suite-tab" data-tab="risk">Structural Risk</button>
	<button class="suite-tab" data-tab="code">Code & Math</button>
	</div>
	<div class="suite-content-container glass-panel">
	<!-- The actual heavy report will load here via iframe, or we inject specific sections -->
	<p class="text-center text-muted">Full optimization requires generating the deterministic


	report.</p>
	<div
	style="display: flex; gap: 1rem; justify-content: center; margin: 2rem auto; flex-wrap: wrap;">
	<button class="btn-primary" onclick="openReportFrame()">View Comprehensive
	Report</button>
	<button class="btn-primary"
	style="background: #10b981; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);"
	onclick="saveCurrentPortfolio()">Save Configuration</button>
	<button class="btn-primary" onclick="exportToPDF()" style="padding: 0.5rem 1rem; font-size: 0.9rem; margin-left: 1rem; background: #3b82f6; border: none;">
	<svg fill="none" height="16" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;" viewbox="0 0 24 24" width="16">
	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
	<polyline points="14 2 14 8 20 8"></polyline>
	<line x1="12" y1="18" x2="12" y2="12"></line>
	<line x1="9" y1="15" x2="15" y2="15"></line>
	</svg>
	Export to PDF
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- VIEW: SAVED PORTFOLIOS -->
	<div class="view-section" id="view-saved-portfolios">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>Saved Portfolios</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Access and manage your historically
	optimized portfolio configurations.</p>
	</div>
	<div class="static-glass-panel">
	<h3 style="color: #3b82f6; margin-bottom: 0.5rem;">π“– How to Use</h3>
	<p style="color: var(--text-muted); font-size: 0.95rem; line-height: 1.5;">This section stores your
	favorite portfolio configurations. Once you run an optimization in the main engine, simply click
	the green <strong>Save Configuration</strong> button above the report. Your asset weights,
	selected engine, and risk profile will be permanently stored here so you can deploy them later
	with a single click.</p>
	</div>
	<div id="portfolio-grid"
	style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;">
	<!-- Dynamically populated by loadSavedPortfolios() -->
	</div>
	</div>
	<!-- VIEW: BACKTEST HISTORY -->
	<div class="view-section" id="view-backtest-history">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>Backtest History</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Review the historical out-of-sample
	performance of your past strategies.</p>
	</div>
	<div class="static-glass-panel">
	<h3 style="color: #3b82f6; margin-bottom: 0.5rem;">π“– How to Use</h3>
	<p style="color: var(--text-muted); font-size: 0.95rem; line-height: 1.5;">Every time you execute
	the engine with Backtesting enabled, the full simulation history is recorded here. Use this
	dashboard to compare how different model configurations (like HMM vs Black-Litterman) performed
	on out-of-sample data over time. You can export these curves as CSV files for external analysis.
	</p>
	</div>
	<div class="static-glass-panel" style="padding: 1.5rem;">
	<table style="width: 100%; text-align: left; border-collapse: collapse; margin-top: 1rem;">
	<thead>
	<tr
	style="border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); font-size: 0.9rem;">
	<th style="padding: 1rem;">Execution Time</th>
	<th style="padding: 1rem;">Model</th>
	<th style="padding: 1rem;">Annualized Return</th>
	<th style="padding: 1rem;">Sharpe Ratio</th>
	<th style="padding: 1rem; text-align: right;">Action</th>
	</tr>
	</thead>
	<tbody id="backtest-table-body">
	<!-- Dynamically injected by app.js -->
	</tbody>
	</table>
	</div>
	</div>
	<!-- VIEW: RISK DASHBOARDS -->
	<div class="view-section" id="view-risk-dashboards">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>Risk Dashboards</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Advanced structural and
	macroeconomic risk analysis.</p>
	</div>
	<div class="static-glass-panel">
	<h3 style="color: #3b82f6; margin-bottom: 0.5rem;">π“– How to Use</h3>
	<p style="color: var(--text-muted); font-size: 0.95rem; line-height: 1.5;">The Risk Dashboard
	automatically populates after you run a portfolio optimization. It provides deep diagnostic
	insights into the tail risks of your allocated weights, projecting expected Value at Risk (VaR)
	and applying historical stress scenarios (like the 2008 Financial Crisis) directly to your
	active configuration.</p>
	</div>
	<div class="cards-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
	<div class="static-glass-panel" style="grid-column: 1 / -1; padding: 1.5rem;">
	<h3 style="margin-top: 0; color: #f472b6;">Tail Risk Breakdown (VaR & CVaR)</h3>
	<div id="var-container" style="color: var(--text-muted); font-size: 0.9rem; margin-top: 10px;">
	Run an optimization to view 95% and 99% VaR/CVaR metrics.</div>
	</div>
	<div class="static-glass-panel" style="grid-column: 1 / -1; padding: 1.5rem;">
	<h3 style="margin-top: 0; color: #fbbf24;">Macro Stress Scenarios</h3>
	<div id="stress-container"
	style="color: var(--text-muted); font-size: 0.9rem; margin-top: 10px;">Run an optimization
	to view historical stress tests.</div>
	</div>
	</div>
	</div>
	<!-- VIEW: API & WEBHOOKS -->
	<div class="view-section" id="view-api-webhooks">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>API & Webhooks</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Integrate the Portfolio Engine
	directly into your automated trading systems.</p>
	</div>
	<div class="static-glass-panel">
	<h3 style="color: #3b82f6; margin-bottom: 0.5rem;">π“– How to Use</h3>
	<p style="color: var(--text-muted); font-size: 0.95rem; line-height: 1.5;">This section is for
	developers running algorithmic trading pipelines. You can use the provided REST API endpoints to
	trigger portfolio rebalancing asynchronously. Configure a Webhook URL below, and the engine will
	automatically POST the final JSON allocation weights to your execution server the moment an
	optimization finishes.</p>
	</div>
	<div class="static-glass-panel" style="padding: 2rem;">
	<h3>REST API Access</h3>
	<p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">Use your session token
	to access the engine programmatically.</p>
	<div class="math-box" style="text-align: left;">POST /api/generate<br />Headers: X-Access-Key</div>
	<h3 style="margin-top: 2rem;">Webhook Integration</h3>
	<p style="color: var(--text-muted); font-size: 0.9rem;">Register a callback URL to receive
	asynchronous optimization results.</p>
	<div style="display: flex; gap: 10px; margin-top: 1rem; max-width: 500px;">
	<input type="text" id="webhook-url-input" placeholder="https://your-server.com/webhook"
	style="flex: 1; padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); color: white; outline: none; font-size: 0.9rem;" />
	<button class="btn-secondary" onclick="configureWebhook()"
	style="width: auto; padding: 0.5rem 1.5rem;">Save Webhook</button>
	</div>
	<div id="webhook-status"
	style="margin-top: 1rem; color: #10b981; font-size: 0.9rem; display: none;"></div>
	</div>
	</div>
	<!-- VIEW: THE MODEL ZOO -->
	<div class="view-section" id="view-modelzoo">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>Quantitative Alpha Models</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Our predictive engines represent


	the bleeding edge of quantitative finance. We deploy both deterministic mathematical equilibrium


	models and robust machine learning ensembles to forecast expected returns. Below is the strict


	architectural breakdown of every engine available to you.</p>
	</div>
	<div class="cards-grid zoo-grid" style="grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));">


	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>1. CAPM (Capital Asset Pricing Model Prior)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>Established by William Sharpe in 1964, CAPM posits that investors should only be


	compensated for "systematic risk"β€”risk that cannot be diversified away. Expected


	returns are purely a function of an asset's covariance with the broader market


	baseline (its Beta).</p>
	<div class="math-box">$$ \mathbb{E}[R_i] = R_f + \beta_i(\mathbb{E}[R_m] - R_f) $$</div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ Exceptional in stable, highly correlated macro environments


	where Beta is a reliable, stationary predictor of upside.</p>
	<p class="negative-text">β— Breaks down structurally when idiosyncratic shocks occur


	(e.g. a specific sector collapsing while the index rallies) because it completely


	ignores individual asset momentum.</p>
	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>2. Global Pooled Panel Machine Learning (XGBoost & Lasso)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>Financial markets are deeply non-linear. This engine stacks gradient-boosted decision


	trees (XGBoost) to capture non-linear market regimes and anomalies, layered with a


	strictly penalized Lasso (L1 regularization) model to filter out extreme statistical


	noise. A Ridge Meta-Learner aggregates their predictions to ensure out-of-sample


	robustness.</p>
	<div class="math-box">$$ \hat{y} = \alpha \cdot \text{XGB}(x) + (1-\alpha) \cdot


	\text{Lasso}(x) $$ $$ \mathcal{L} = \text{MSE} + \lambda_1 \\|w\\|_1 $$</div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ Dominates in highly complex, multi-factor datasets where


	linear assumptions (like CAPM) fail to capture hidden Alpha.</p>
	<p class="negative-text">β— Machine Learning inherently risks overfitting; it can


	misallocate capital if the market shifts into an unprecedented, structurally


	unobserved macroeconomic regime (e.g. Black Swan events).</p>
	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>3. Black-Litterman (Market Equilibrium Prior)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>Pure historical optimization (Markowitz) leads to wildly concentrated portfolios that


	change radically day-to-day. Black-Litterman solves this using Bayesian shrinkage:


	it calculates the global market equilibrium (implied returns) as the mathematical


	"Prior", and updates it only if there is statistical evidence to deviate.</p>
	<div class="math-box">$$ \mathbb{E}[R] = \left[ (\tau \Sigma)^{-1} + P^T \Omega^{-1} P


	\right]^{-1} \left[ (\tau \Sigma)^{-1} \Pi + P^T \Omega^{-1} Q \right] $$</div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ The undisputed gold standard for generating robust, highly


	diversified portfolios that do not whip-saw across rebalancing periods.</p>
	<p class="negative-text">β— Inherently conservative. By anchoring to the market


	equilibrium, it may under-allocate to early-stage, explosive breakout trends


	compared to a pure momentum model.</p>
	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>4. Multifactor Regression (Fama-French + Momentum)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>An expansion of CAPM. Eugene Fama and Kenneth French proved that returns are not just


	driven by market Beta, but structurally driven by Small-Cap outperformance (SMB) and


	Value outperformance (HML). We append the Momentum factor (MOM) to ride prevailing


	trends.</p>
	<div class="math-box">$$ R_{i,t} - R_{f,t} = \alpha_i + \beta_1(R_{m,t} - R_{f,t}) +


	\beta_2 \text{SMB}_t + \beta_3 \text{HML}_t + \beta_4 \text{MOM}_t + \epsilon_{i,t}


	$$</div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ Extremely effective over long-term multi-year horizons,


	capitalizing on fundamental economic realities (value and size premiums).</p>
	<p class="negative-text">β— Vulnerable to "Factor Winter" where growth stocks dominate


	value for a decade (e.g. 2010-2020 Tech boom).</p>
	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>5. Bayesian Shrinkage (James-Stein Estimator)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>Historically estimated returns are riddled with estimation error. James-Stein


	shrinkage mathematically "shrinks" extreme individual asset estimates toward the


	grand mean of the portfolio. This is a statistical guarantee against trusting


	outlier data.</p>
	<div class="math-box">$$ \hat{\mu}_{\text{JS}} = w \cdot \mu_i + (1 - w) \cdot


	\mu_{\text{global}} $$<span
	style="font-size:0.9em; opacity:0.8; margin-top:5px; display:block;">where \( w


	\) is derived from variance of estimates.</span></div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ Reduces the impact of "noise" in the data, preventing the


	optimizer from chasing an asset just because it had a lucky 30-day run.</p>
	<p class="negative-text">β— Can shrink truly exceptional, paradigm-shifting assets back


	down to the average, muting potential asymmetric upside.</p>
	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>6. End-to-End Differentiable Optimization (SPO+)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>Traditional finance separates the prediction of returns from the optimization of


	weights. Predict-then-Optimize (SPO+) fuses them using a custom differentiable loss


	function. The machine learning model is trained to minimize the <em>regret of the


	portfolio's actual performance</em>, not just mean squared error of predictions.


	</p>
	<div class="math-box">$$ \mathcal{L}_{\text{SPO}+}(\hat{c}, c) = \max_{w \in


	\mathcal{S}} \left\{ (2\hat{c} - c)^T w \right\} - 2\hat{c}^T w^(c) + c^T w^(c) $$


	</div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ Maximizes true financial utility by directly penalizing bad


	allocations rather than just inaccurate forecasts.</p>
	<p class="negative-text">β— Computationally expensive. Requires calculating optimization


	gradients through a convex solver at every training step.</p>
	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>7. Regime-Adaptive Hidden Markov Model (HMM)</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<div class="zoo-section">
	<h4>The Core Mathematical Hypothesis</h4>
	<p>Markets do not behave uniformly over time; they transition between hidden


	probabilistic states (Bull, Bear, Stagflation). The HMM assigns a probability that


	the market is in a specific latent state today, and dynamically adjusts the


	covariance and return expectations based strictly on the parameters of the detected


	regime.</p>
	<div class="math-box">$$ P(Z_t \mid X_{1:t}) \propto P(X_t \mid Z_t) \sum_{Z_{t-1}}


	P(Z_t \mid Z_{t-1}) P(Z_{t-1} \mid X_{1:t-1}) $$</div>
	</div>
	<div class="zoo-section">
	<h4>When It Shines vs. Fails</h4>
	<p class="positive-text">β“ Instantly reallocates defensive assets when shifting from a


	high-growth to a high-volatility regime.</p>
	<p class="negative-text">β— "Whip-saw" risk. If the market falsely signals a crash regime


	but instantly rebounds, the model may trap the portfolio in cash.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<!-- VIEW: ENGINE DOCS -->
	<div class="view-section" id="view-docs">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>Engine Documentation & Architecture</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">The complete pipeline architecture
	from web orchestration to stochastic optimization and execution. Below is the strict
	mathematical specification of our constraint matrices and data flow.</p>
	</div>

	<div class="cards-grid zoo-grid"
	style="grid-template-columns: 1fr; max-width: 900px; margin: 0 auto; margin-bottom: 2rem;">



	<!-- EXISTING MATHEMATICAL DEEP DIVES -->

	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>1. Dynamic GARCH(1,1) Volatility Modeling</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">Standard historical


	volatility treats risk as a flat, static number. This is mathematically flawed.


	Financial markets exhibit "volatility clustering"β€”large changes are followed by large


	changes. Our GARCH (Generalized Autoregressive Conditional Heteroskedasticity) overlay


	dynamically detects expanding volatility regimes and proactively shrinks risk exposures


	<em>before</em> tail events crush the portfolio.
	</p>
	<div class="math-box">$$ \sigma^2_t = \omega + \alpha r^2_{t-1} + \beta \sigma^2_{t-1} $$


	</div>
	<p class="text-muted" style="margin-top: 1rem;">This equation updates today's volatility


	(ΟƒΒ²_t) using yesterday's shock (Ξ± * rΒ²_{t-1}) and yesterday's variance (Ξ² * ΟƒΒ²_{t-1}),


	creating a memory effect that standard deviation lacks.</p>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>2. L1-Norm Tax Optimization Penalty</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">High turnover strategies


	look great on paper but bleed capital to short-term capital gains taxes in the real


	world. When the Tax Optimization flag is toggled, we inject a strict L1-norm penalty


	vector directly into the convex solver. This forces the engine to mathematically weigh


	the theoretical alpha of a trade against the concrete tax drag of selling an existing


	position.</p>
	<div class="math-box">$$ \min_{w} \left( w^T \Sigma w + \lambda \\| w - w_{\text{prev}} \\|_1


	\right) $$</div>
	<p class="text-muted" style="margin-top: 1rem;">The absolute difference penalty (L1) forces


	the optimizer to prefer zero-turnover unless the marginal return strictly exceeds the


	tax boundary Ξ».</p>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>3. Allocation Engine: CVaR vs. Risk Parity</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">
	<strong>CVaR (Conditional Value at Risk):</strong> Unlike Variance (which penalizes


	upside growth), CVaR explicitly isolates and minimizes only the worst 5% of historical


	tail crashes.<br /><br />
	<strong>Hierarchical Risk Parity (HRP):</strong> Uses unsupervised machine learning


	(agglomerative clustering) to group correlated assets into sub-clusters, assigning


	capital purely based on risk distribution rather than unreliable return


	forecasts.<br /><br />
	<strong>Exact Risk Parity (ERC):</strong> A non-linear root-finding algorithm that


	guarantees every single asset contributes the exact same marginal risk to the total


	portfolio variance, ensuring true diversification.


	</p>
	<div class="math-box">$$ \text{Risk Contribution}_i = \frac{w_i (\Sigma w)_i}{w^T \Sigma w}


	= \frac{1}{N} $$</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>4. HMM Macro Regime Detection</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">Financial markets


	operate in distinct probabilistic states (e.g., Bull, Bear, High-Inflation, Low-Growth).


	The engine uses a Hidden Markov Model (HMM) to classify the current state of the global


	economy in real-time. It then strictly filters historical covariances, ensuring the


	optimizer only trains on data from the <em>current</em> macro regime.</p>
	<div class="math-box">$$ A_{ij} = P(\text{Regime}_{t}=j \mid \text{Regime}_{t-1}=i) $$</div>
	</div>
	</div>
	</div>
	</div>
	<!-- VIEW: HOW IT WORKS -->
	<div class="view-section" id="view-howitworks">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>How It Works: The Institutional Pipeline</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Wealth Engine is not a simple


	calculator. It is a full-stack algorithmic trading pipeline. Below is the analytical breakdown


	of exactly how it transforms raw data into a strictly optimized portfolio.</p>
	</div>
	<div class="cards-grid zoo-grid" style="grid-template-columns: 1fr; max-width: 900px; margin: 0 auto;">
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>Phase 1: Understanding the Current Economy</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">The engine first


	connects to live market data to pull historical prices and interest rates. However,


	assuming the market behaves the same way all the time is dangerous. Our engine uses an


	algorithm to classify the current "Regime" of the global economy (e.g., Bull Market vs.


	High Volatility Selloff). By understanding the current environment, the engine only


	focus on data that is relevant to today's reality, ignoring irrelevant past events.


	Whether analyzing standard equities, bond yields, or extreme crypto volatility, the


	regime-detection algorithms automatically adapt to structurally different asset classes.


	</p>
	<div class="math-box">$$ \text{Regime} = \arg\max_k P(Z_t = k \mid \text{Market Data}_{1:t})


	$$</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>Phase 2: Forecasting Future Returns</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">Next, the engine needs


	to predict how much return each asset will generate. Instead of simple guessing, you


	choose a <strong>Quantitative Alpha Model</strong>. For example, if you choose our


	advanced ensemble, the engine calculates momentum, volatility, and market correlation


	for every asset. It then uses statistical learning to find patterns between these


	metrics and future returns, creating a precise mathematical forecast for your portfolio.


	</p>
	<div class="math-box">$$ \mathbb{E}[R_{t+1}] = f(\text{Features}_t, \text{Parameters}) $$


	</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>Phase 3: Risk Management & Allocation</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">With the forecasts in


	hand, the engine enters the Convex Solver. This is where it calculates the exact


	percentage weighting of each asset to maximize your returns while capping your downside


	risk. It does this by measuring how assets move together (Covariance) and explicitly


	minimizing the damage of the worst 5% of historical market crashes. If you enable Tax


	Optimization, it will actively avoid proposing trades that trigger short-term capital


	gains taxes.</p>
	<div class="math-box">$$ w^* = \arg\max_w \left( w^T \mathbb{E}[R] - \frac{\lambda}{2} w^T


	\Sigma w \right) $$</div>
	</div>
	</div>
	<div class="native-glass-accordion static-glass-panel" onclick="openAlphaModal(this)" style="cursor:pointer;">
	<div class="card-header-flex">
	<h3>Phase 4: Stress Testing the Portfolio</h3>
	<div class="card-expand-btn"><svg fill="none" height="20" stroke="currentColor"
	stroke-width="2" viewbox="0 0 24 24" width="20">
	<polyline points="6 9 12 15 18 9"></polyline>
	</svg></div>
	</div>
	<div class="card-body">
	<p class="text-muted" style="font-size: 1.05rem; line-height: 1.7;">Before delivering the


	final allocation, the engine attempts to "break" the portfolio. It runs thousands of


	randomized future simulations (Monte Carlo) to see how the portfolio handles


	uncertainty. It also tests the portfolio against a simulated 2008 Financial Crisis,
	the 2020 COVID-19 shock, and the 2022 Inflation/Rate shock. Only if the portfolio
	survives these rigorous thresholds does the engine finalize the output report.</p>
	<div class="math-box">$$ S_{k, t+1} = S_{k, t} \exp\left( \left(\mu -


	\frac{\sigma^2}{2}\right)\Delta t + \sigma \sqrt{\Delta t} Z \right) $$</div>
	</div>
	</div>
	</div>
	</div>
	<!-- VIEW: TERMS OF USE -->
	<div class="view-section" id="view-terms">
	<div class="page-header" style="max-width: 800px; margin: 0 auto 3rem auto; text-align: center;">
	<h1>Terms of Service</h1>
	<p class="subtitle" style="font-size: 1.1rem; line-height: 1.6;">Please read these terms carefully


	before utilizing the Wealth Engine platform.</p>
	</div>
	<div class="static-glass-panel"
	style="max-width: 800px; margin: 0 auto; padding: 2.5rem; text-align: left; line-height: 1.8;">
	<h3 style="margin-top: 0;">1. Not Financial Advice</h3>
	<p class="text-muted">This platform is an experimental mathematical research tool, not a registered


	financial advisor. The outputs, forecasts, and allocations provided by the engine are for


	informational and algorithmic research purposes only. Do not blindly risk personal capital
	based on the outputs of this engine without consulting a registered financial professional.</p>
	<h3>2. Historical Illusion</h3>
	<p class="text-muted">All optimizations and predictive models rely heavily on historical data


	backtesting. Past performance is definitively not indicative of future results. Market dynamics


	backtesting. Past performance is definitively not indicative of future results. Market dynamics
	can shift rapidly into unobserved regimes, rendering historical patterns obsolete. This is
	especially true for Cryptocurrencies, which exhibit extreme, non-stationary volatility.</p>
	<h3>3. Machine Learning Limitations</h3>
	<p class="text-muted">You are interacting with advanced predictive systems (NOVA, AETHELRED,
	VANGUARD).
	While these engines use state-of-the-art Deep Learning and Convex Optimization, financial
	markets
	are fundamentally chaotic systems. The engine is a sophisticated co-pilot, not a crystal ball.
	It is highly susceptible to "Black Swan" events and structural regime shifts.</p>
	<h3>4. No Liability</h3>
	<p class="text-muted">You are solely responsible for your own investment decisions. The creators,


	operators, and affiliates of Wealth Engine accept absolutely no liability for any financial


	losses, capital destruction, or damages resulting directly or indirectly from the use of this


	platform.</p>
	<h3>5. Institutional Access Key</h3>
	<p class="text-muted">Access to this platform is strictly limited to authorized users holding a


	valid institutional access key. You agree not to share, distribute, or otherwise compromise your
	access key or associated username. We reserve the right to revoke access at any time without
	notice.</p>
	</div>
	</div>

	<!-- VIEW: HFT SIMULATOR -->
	<div class="view-section" id="view-hft">
	<div class="page-header" style="text-align: center; margin-bottom: 2rem;">
	<h1>Speed Trading Demo</h1>
	<p class="subtitle">Experience microsecond-level market simulation.</p>
	</div>
	<div class="sandbox-container" style="max-width: 1000px; margin: 0 auto;">
	<div class="glass-panel info-card"
	style="margin-bottom: 2rem; background: linear-gradient(145deg, rgba(59, 130, 246, 0.1), rgba(147, 51, 234, 0.05)); border: 1px solid rgba(147, 51, 234, 0.2); border-left: 4px solid #8b5cf6; padding: 1.5rem;">
	<h3
	style="margin-top: 0; color: #a78bfa; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600;">
	<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
	viewBox="0 0 24 24">
	<path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
	</svg>
	Why use this?
	</h3>
	<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0;">This tool
	simulates extremely fast trading conditions (High-Frequency Trading) allowing you to see how
	quickly market orders interact. It helps you understand how tiny price differences are
	captured in milliseconds before the rest of the market reacts. It's a risk-free way to watch
	high-speed algorithms in action.</p>
	</div>
	<div class="glass-panel pro-variant" style="padding: 1.5rem;">
	<div style="display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
	<div class="form-group" style="flex: 1; min-width: 150px;">
	<label>Tickers (comma separated)</label>
	<input type="text" id="hft-tickers" value="SPY"
	style="width: 100%; padding: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 4px;">
	</div>
	<div class="form-group" style="flex: 1; min-width: 150px;">
	<label>Strategy</label>
	<select id="hft-strategy"
	style="width: 100%; padding: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 4px;"
	onchange="document.getElementById('hft-order-type-container').style.display = this.value === 'execution' ? 'block' : 'none';">
	<option value="none">None (Background Flow Only)</option>
	<option value="market_making">Avellaneda-Stoikov Market Maker</option>
	<option value="momentum">Order Book Imbalance Momentum</option>
	<option value="mean_reversion">EWMA Mean Reversion</option>
	<option value="execution">Execution Bridge</option>
	</select>
	</div>
	<div class="form-group" id="hft-order-type-container"
	style="flex: 1; min-width: 120px; display: none;">
	<label>Order Type</label>
	<select id="hft-order-type"
	style="width: 100%; padding: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 4px;">
	<option value="twap">TWAP</option>
	<option value="iceberg">Iceberg</option>
	<option value="pov">POV (Percentage of Volume)</option>
	</select>
	</div>
	<div class="form-group" style="flex: 1; min-width: 100px;">
	<label>Duration (ms)</label>
	<input type="number" id="hft-duration" value="1000"
	style="width: 100%; padding: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: white; border-radius: 4px;">
	</div>
	</div>
	<div
	style="display: flex; gap: 2rem; margin-bottom: 2rem; align-items: center; background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05);">
	<div style="flex: 1;">
	<label style="display: flex; justify-content: space-between;"><span>Network Latency
	Simulation</span> <span id="hft-latency-val" style="color: #4ade80;">5
	ms</span></label>
	<input type="range" id="hft-latency" min="0" max="200" value="5"
	style="width: 100%; accent-color: #3b82f6;"
	oninput="document.getElementById('hft-latency-val').innerText = this.value + ' ms'">
	</div>
	<button class="btn-primary" onclick="runHFTSimulation()" id="btn-run-hft"
	style="height: 38px;">Run Simulation</button>
	</div>

	<div class="hft-grid">
	<div
	style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 1rem; position: relative; height: 100%;">
	<h3 style="margin-top: 0; font-size: 1.1rem; color: #60a5fa;">Price & PnL</h3>
	<div style="position: relative; height: calc(100% - 30px); width: 100%;">
	<canvas id="hft-chart"></canvas>
	</div>
	</div>
	<div
	style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 1rem; height: 100%; overflow-y: auto;">
	<h3 style="margin-top: 0; font-size: 1.1rem; color: #60a5fa;">Simulation Metrics</h3>
	<div id="hft-metrics"
	style="color: #cbd5e1; font-family: monospace; font-size: 0.95rem; line-height: 1.8;">
	Run a simulation to view metrics.
	</div>
	</div>
	</div>
	<div
	style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 1rem; height: 300px; position: relative;">
	<h3 style="margin-top: 0; font-size: 1.1rem; color: #a78bfa;">Limit Order Book (LOB)
	Dynamics</h3>
	<div style="position: relative; height: calc(100% - 30px); width: 100%;">
	<canvas id="hft-lob-chart"></canvas>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="view-section" id="view-statarb">
	<div class="page-header" style="text-align: center; margin-bottom: 2rem;">
	<h1>Pairs Trading</h1>
	<p class="subtitle">Discover mathematically linked assets to trade market neutrality.</p>
	</div>
	<div class="sandbox-container" style="max-width: 1000px; margin: 0 auto;">
	<div class="glass-panel info-card"
	style="margin-bottom: 2rem; background: linear-gradient(145deg, rgba(236, 72, 153, 0.1), rgba(244, 63, 94, 0.05)); border: 1px solid rgba(236, 72, 153, 0.2); border-left: 4px solid #f472b6; padding: 1.5rem;">
	<h3
	style="margin-top: 0; color: #f9a8d4; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600;">
	<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
	viewBox="0 0 24 24">
	<path d="M16 3h5v5"></path>
	<path d="M4 20L21 3"></path>
	<path d="M21 16v5h-5"></path>
	<path d="M15 15l6 6"></path>
	<path d="M4 4l5 5"></path>
	</svg>
	What is Pairs Trading?
	</h3>
	<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0;">Pairs trading
	identifies two assets that historically move together. When their prices temporarily split
	apart, you can buy the underperforming one and sell the outperforming one, profiting when
	they inevitably snap back into alignment. This strategy is immune to overall market crashes!
	</p>
	</div>
	<div class="glass-panel pro-variant" style="padding: 1.5rem;">
	<div style="display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
	<div>
	<label
	style="display: block; margin-bottom: 0.5rem; color: #cbd5e1; font-size: 0.9rem;">Universe
	(Comma-separated Tickers)</label>
	<input type="text" id="statarb-tickers" class="pro-input"
	value="QQQ,XLK,SPY,AAPL,MSFT,NVDA" style="width: 100%; box-sizing: border-box;" />
	</div>
	<div style="display: flex; align-items: flex-end;">
	<button class="btn-primary" onclick="runStatArbScan()" id="btn-run-statarb"
	style="height: 38px; width: 100%;">Scan Pairs</button>
	</div>
	</div>

	<div id="statarb-results-container" style="display: none;">
	<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; margin-top: 1rem;">
	<div>
	<h3
	style="margin-top: 0; color: #60a5fa; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Cointegrated Pairs</h3>
	<div style="max-height: 400px; overflow-y: auto;">
	<table class="report-table" id="pairs-table">
	<thead>
	<tr>
	<th>Pair</th>
	<th>p-value</th>
	<th>Half-Life</th>
	<th>Hedge Ratio</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>
	</div>

	<div>
	<h3
	style="margin-top: 0; color: #60a5fa; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Top Pair Backtest (<span id="statarb-top-pair"></span>)</h3>
	<div
	style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; text-align: center;">
	<div style="background: rgba(0,0,0,0.2); padding: 0.5rem; border-radius: 4px;">
	<div style="font-size: 0.8rem; color: #94a3b8;">Total Return</div>
	<div id="statarb-ret"
	style="font-size: 1.1rem; font-weight: bold; color: #4ade80;">-</div>
	</div>
	<div style="background: rgba(0,0,0,0.2); padding: 0.5rem; border-radius: 4px;">
	<div style="font-size: 0.8rem; color: #94a3b8;">Ann. Volatility</div>
	<div id="statarb-vol"
	style="font-size: 1.1rem; font-weight: bold; color: #f472b6;">-</div>
	</div>
	<div style="background: rgba(0,0,0,0.2); padding: 0.5rem; border-radius: 4px;">
	<div style="font-size: 0.8rem; color: #94a3b8;">Sharpe</div>
	<div id="statarb-sharpe"
	style="font-size: 1.1rem; font-weight: bold; color: #60a5fa;">-</div>
	</div>
	</div>
	<div style="height: 250px; position: relative; margin-bottom: 1rem;">
	<canvas id="statarb-chart"></canvas>
	</div>
	<div class="glass-panel" id="statarb-analysis" style="background: rgba(15, 23, 42, 0.6); padding: 1rem; border-left: 3px solid #c084fc; font-size: 0.9rem; color: #e2e8f0; display: none;">
	<!-- Analysis gets injected here -->
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- VIEW: CRYPTO ARB -->
	<div class="view-section" id="view-cryptoarb">
	<div class="page-header" style="text-align: center; margin-bottom: 2rem;">
	<h1>Digital Asset Arbitrage</h1>
	<p class="subtitle">Automatically find price differences across crypto exchanges.</p>
	</div>
	<div class="sandbox-container" style="max-width: 1000px; margin: 0 auto;">
	<div class="glass-panel info-card"
	style="margin-bottom: 2rem; background: linear-gradient(145deg, rgba(245, 158, 11, 0.1), rgba(234, 88, 12, 0.05)); border: 1px solid rgba(245, 158, 11, 0.2); border-left: 4px solid #fbbf24; padding: 1.5rem;">
	<h3
	style="margin-top: 0; color: #fcd34d; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600;">
	<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
	viewBox="0 0 24 24">
	<path d="M12 2v20"></path>
	<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
	</svg>
	How to use this scanner
	</h3>
	<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0;">Crypto prices
	vary slightly between different exchanges like Binance and Kraken. This bot scans multiple
	global exchanges simultaneously to find instant, risk-free profit opportunities by buying
	low on one exchange and selling high on another, automatically factoring in all trading
	fees.</p>
	</div>
	<div class="glass-panel pro-variant" style="padding: 1.5rem;">
	<div
	style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
	<div>
	<label
	style="display: block; margin-bottom: 0.5rem; color: #cbd5e1; font-size: 0.9rem;">Symbol</label>
	<input type="text" id="cryptoarb-symbol" class="pro-input" value="BTC/USDT"
	style="width: 100%; box-sizing: border-box;" />
	</div>
	<div>
	<label
	style="display: block; margin-bottom: 0.5rem; color: #cbd5e1; font-size: 0.9rem;">Capital
	($)</label>
	<input type="number" id="cryptoarb-capital" class="pro-input" value="10000"
	style="width: 100%; box-sizing: border-box;" />
	</div>
	<div style="display: flex; align-items: flex-end;">
	<button class="btn-primary" onclick="runCryptoArbScan()" id="btn-run-cryptoarb"
	style="height: 38px; width: 100%;">Scan Order Books</button>
	</div>
	</div>

	<div id="cryptoarb-results-container" style="display: none;">
	<h3
	style="margin-top: 1rem; color: #60a5fa; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Live Exchange Prices</h3>
	<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;"
	id="cryptoarb-prices">
	<!-- Populated via JS -->
	</div>

	<div
	style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
	<div
	style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; position: relative; height: 300px;">
	<h3
	style="margin-top: 0; color: #60a5fa; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Order Book Depth (Simulated)</h3>
	<div style="position: relative; height: calc(100% - 40px); width: 100%;">
	<canvas id="cryptoarb-depth-chart"></canvas>
	</div>
	</div>
	<div
	style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; position: relative; height: 300px;">
	<h3
	style="margin-top: 0; color: #4ade80; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Net Spread Tracking (%)</h3>
	<div style="position: relative; height: calc(100% - 40px); width: 100%;">
	<canvas id="cryptoarb-spread-chart"></canvas>
	</div>
	</div>
	</div>

	<h3
	style="margin-top: 1rem; color: #4ade80; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Arbitrage Opportunities (Net Fees)</h3>
	<div style="max-height: 250px; overflow-y: auto; margin-bottom: 2rem;">
	<table class="report-table" id="cryptoarb-opps-table">
	<thead>
	<tr>
	<th>Path</th>
	<th>Buy Px</th>
	<th>Sell Px</th>
	<th>Gross Spread</th>
	<th>Net Spread</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	</div>

	<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1rem;">
	<div>
	<h3
	style="margin-top: 1rem; color: #f472b6; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Execution Simulation (Best Path)</h3>
	<div id="cryptoarb-execution"
	style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); padding: 1rem; border-radius: 4px; font-family: monospace; color: #94a3b8; white-space: pre-wrap; height: 120px;">
	No opportunities found or simulated.
	</div>
	</div>
	<div>
	<h3
	style="margin-top: 1rem; color: #fbbf24; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Execution Cost Breakdown</h3>
	<div id="cryptoarb-cost-breakdown"
	style="background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.05); padding: 1rem; border-radius: 4px; font-family: monospace; color: #94a3b8; font-size: 0.85rem; height: 120px;">
	<!-- Populated by JS -->
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- VIEW: BENCHMARKS -->
	<div class="view-section" id="view-benchmarks">
	<div class="page-header" style="text-align: center; margin-bottom: 2rem;">
	<h1>Engine Speed Test</h1>
	<p class="subtitle">Compare our core algorithms in Python vs compiled C++.</p>
	</div>
	<div class="sandbox-container" style="max-width: 800px; margin: 0 auto;">
	<div class="glass-panel info-card"
	style="margin-bottom: 2rem; background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(79, 70, 229, 0.05)); border: 1px solid rgba(99, 102, 241, 0.2); border-left: 4px solid #818cf8; padding: 1.5rem;">
	<h3
	style="margin-top: 0; color: #a5b4fc; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 600;">
	<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"
	viewBox="0 0 24 24">
	<circle cx="12" cy="12" r="10"></circle>
	<polyline points="12 6 12 12 16 14"></polyline>
	</svg>
	Why speed matters
	</h3>
	<p style="color: #cbd5e1; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0;">In finance,
	complex calculations like Monte Carlo simulations can take hours. We wrote our core math
	engines in highly optimized C++ to run thousands of times faster than standard Python,
	delivering institutional-grade analytics to your browser almost instantly.</p>
	</div>
	<div class="glass-panel pro-variant" style="padding: 1.5rem;">
	<div style="color: #94a3b8; margin-bottom: 2rem;">Run real-time benchmarks comparing the
	pure-Python implementation against the pybind11/Eigen C++ extensions.</div>
	<button class="btn-primary" onclick="runBenchmarks()" id="btn-run-benchmarks"
	style="margin-bottom: 2rem;">Run Benchmarks Suite</button>

	<div id="benchmark-results" style="display: none; text-align: left;">
	<div class="benchmark-grid" style="margin-bottom: 1.5rem;">
	<div
	style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; position: relative; height: 300px;">
	<h3
	style="color: #60a5fa; margin-top: 0; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Execution Speed (ms) - Lower is Better</h3>
	<div style="position: relative; height: calc(100% - 40px); width: 100%;">
	<canvas id="benchmark-chart"></canvas>
	</div>
	</div>

	<div
	style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem;">
	<h3
	style="color: #4ade80; margin-top: 0; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Hardware Telemetry</h3>
	<div style="font-family: monospace; font-size: 0.9rem; color: #cbd5e1; line-height: 1.8;"
	id="benchmark-telemetry">
	<!-- Populated by JS -->
	<div>CPU Cores Utilized: <span style="color:#fbbf24;">Loading...</span></div>
	<div>C++ Compilation: <span style="color:#fbbf24;">Checking...</span></div>
	<div>OpenMP Status: <span style="color:#fbbf24;">Checking...</span></div>
	</div>
	<div style="margin-top: 1.5rem; font-size: 0.8rem; color: #64748b;">
	The C++ core utilizes OpenMP for parallelizing mathematical loops and PyBind11
	to zero-copy memory arrays from Numpy.
	</div>
	</div>
	</div>

	<div
	style="background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 1rem; font-family: monospace;">
	<h3
	style="color: #f472b6; margin-top: 0; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem;">
	Raw Output Log</h3>
	<pre id="benchmark-log"
	style="color: #cbd5e1; white-space: pre-wrap; margin: 0; max-height: 150px; overflow-y: auto;"></pre>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- VIEW: INNER CIRCLE / THE MAP -->
	<div class="view-section" id="view-innercircle">
	<!-- Content will be injected by app.js -->
	</div>
	<!-- The Matrix Terminal Loading Overlay -->
	<div class="loading-overlay" id="terminalOverlay" style="display: none;">
	<div class="matrix-terminal">
	<div class="terminal-header">
	<span>Wealth Engine Compiler v4.2</span>
	<span>STATUS: EXECUTING</span>
	</div>
	<div class="terminal-body" id="terminalBody">
	<div class="loading-text">Initializing convex optimizer...</div>
	</div>
	</div>
	</div>
	<!-- Iframe to show the generated report -->
	<div class="report-container" id="reportContainer">
	<div class="report-header">
	<div>
	<button class="btn-primary" onclick="saveCurrentPortfolio()"
	style="padding: 0.5rem 1rem; font-size: 0.9rem; margin-right: 1rem; background: #10b981; border: none;">
	<svg fill="none" height="16" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;"
	viewbox="0 0 24 24" width="16">
	<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
	<polyline points="17 21 17 13 7 13 7 21"></polyline>
	<polyline points="7 3 7 8 15 8"></polyline>
	</svg>


	Save Configuration


	</button>
	<button class="btn-primary" onclick="exportToPDF()" style="padding: 0.5rem 1rem; font-size: 0.9rem; margin-right: 1rem; background: #3b82f6; border: none;">
	<svg fill="none" height="16" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;" viewbox="0 0 24 24" width="16">
	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
	<polyline points="14 2 14 8 20 8"></polyline>
	<line x1="12" y1="18" x2="12" y2="12"></line>
	<line x1="9" y1="15" x2="15" y2="15"></line>
	</svg>
	Export to PDF
	</button>
	</div>
	<button class="back-btn" onclick="closeReport()">
	<svg fill="none" height="20" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" width="20">
	<line x1="19" x2="5" y1="12" y2="12"></line>
	<polyline points="12 19 5 12 12 5"></polyline>
	</svg>


	Exit Report


	</button>
	</div>
	<iframe id="report-view" src="about:blank"></iframe>
	</div>
	<!-- WIZARD MODAL -->
	<div class="loading-overlay" id="wizardOverlay"
	style="display:none; z-index: 2000; align-items: center; justify-content: center; padding: 2rem;">
	<div class="glass-panel" style="max-width: 500px; width: 100%; position: relative;">
	<button onclick="document.getElementById('wizardOverlay').style.display='none'"
	style="position: absolute; right: 1rem; top: 1rem; background: none; border: none; color: #fff; cursor: pointer; font-size: 1.2rem;">β•</button>
	<h2 style="color: #fff; margin-bottom: 0.5rem;">Advanced Wizard Builder</h2>
	<p class="text-muted" style="margin-bottom: 2rem;">Let the engine auto-configure your portfolio parameters.


	</p>
	<div class="wizard-step active" id="wizardStep1">
	<div class="form-group">
	<label>1. What is your primary macroeconomic view for the next 12 months?</label>
	<select id="wizardMacro">
	<option value="growth">Strong Economic Growth & Tech Dominance</option>
	<option value="inflation">Sticky Inflation & High Rates</option>
	<option value="recession">Impending Recession & Defensive Pivot</option>
	<option value="uncertain">Highly Uncertain / Neutral</option>
	</select>
	</div>
	<button class="btn-primary" onclick="nextWizardStep(2)"
	style="width: 100%; justify-content: center; margin-top: 1rem;">Next: Risk Tolerance</button>
	</div>
	<div class="wizard-step" id="wizardStep2" style="display: none;">
	<div class="form-group">
	<label>2. If the market drops 20%, what is your immediate reaction?</label>
	<select id="wizardReaction">
	<option value="buy">Buy more! (Risk Lover)</option>
	<option value="hold">Hold steady. (Moderate)</option>
	<option value="sell">Sell to avoid further losses. (Risk Averse)</option>
	</select>
	</div>
	<div style="display: flex; gap: 1rem; margin-top: 1rem;">
	<button class="btn-secondary" onclick="nextWizardStep(1)" style="flex: 1;">Back</button>
	<button class="btn-primary" onclick="nextWizardStep(3)"
	style="flex: 1; justify-content: center;">Next: Final Setup</button>
	</div>
	</div>
	<div class="wizard-step" id="wizardStep3" style="display: none;">
	<div class="form-group">
	<label>3. Select Investment Universe</label>
	<select id="wizardBasket">
	<option value="SPY, TLT, GLD, VNQ">All-Weather (Stocks, Bonds, Gold, Real Estate)</option>
	<option value="QQQ, AAPL, MSFT, NVDA">Tech-Heavy Growth</option>
	<option value="VYM, LQD, TLT, JNJ, PG">Safe Dividend Income</option>
	<option value="SPY, QQQ, IWM, EFA, EEM">Global Equities Core</option>
	</select>
	</div>
	<div style="display: flex; gap: 1rem; margin-top: 1rem;">
	<button class="btn-secondary" onclick="nextWizardStep(2)" style="flex: 1;">Back</button>
	<button class="btn-primary" onclick="document.getElementById('wizardOverlay').style.display='none'"
	style="flex: 1; justify-content: center;">Apply to Engine</button>
	</div>
	</div>
	</div>
	</div>
	<footer
	style="position: relative; z-index: 100; text-align: center; padding: 2rem 0; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,0.05); color: var(--text-muted); font-size: 0.9rem;">
	<div>Β© 2026 All Rights Reserved. Wealth Engine.</div>
	<div style="margin-top: 0.5rem;">
	<a href="/admin" onmouseout="this.style.opacity=0.8" onmouseover="this.style.opacity=1"
	style="color: #3b82f6; text-decoration: none; font-size: 0.85rem; opacity: 0.8; transition: opacity 0.2s;">Admin
	Control Center</a>
	</div>
	</footer>
	<!-- AI Chat Widget -->
	<div id="ai-chat-widget" style="position: fixed; bottom: 30px; right: 30px; z-index: 9999;">
	<!-- Chat Button -->
	<button id="chat-toggle-btn" style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #8b5cf6); border: none; color: white; cursor: pointer; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4); display: flex; align-items: center; justify-content: center; transition: transform 0.2s;">
	<svg fill="none" height="28" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="28">
	<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
	</svg>
	</button>
	<!-- Chat Window -->
	<div class="glass-panel" id="chat-window" style="display: none; position: fixed; bottom: 100px; right: 30px; width: 380px; height: 500px; min-width: 320px; min-height: 400px; padding: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.5); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);">
	<div style="background: rgba(15, 23, 42, 0.9); padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center;">
	<h3 id="chat-drag-handle" style="margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px;">
	<span style="display: inline-block; width: 8px; height: 8px; background: #10b981; border-radius: 50%; box-shadow: 0 0 8px #10b981;"></span>
	NOVA Engine (Drag to move)
	</h3>
	<div id="chat-resize-handle" style="position: absolute; left: 0; top: 0; width: 15px; height: 15px; cursor: nwse-resize; z-index: 10;"></div>
	<div>
	<button id="chat-expand-btn" onclick="toggleChatExpand()" style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1.2rem; margin-right: 10px;">β›¶</button>
	<button id="chat-close-btn" style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1.2rem;">β•</button>
	</div>
	</div>
	<div id="chat-messages" style="flex: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; font-size: 0.95rem;">
	<div style="background: rgba(59, 130, 246, 0.1); padding: 12px 16px; border-radius: 12px; border-top-left-radius: 4px; align-self: flex-start; max-width: 85%; color: #e2e8f0;">


	Hello. I am your quantitative AI analyst. Run an optimization, and then ask me to explain the


	mathematics behind your portfolio's specific asset allocation.


	</div>
	</div>
	<div style="padding: 15px; border-top: 1px solid rgba(255, 255, 255, 0.05); background: rgba(15, 23, 42, 0.6); display: flex; flex-direction: column; gap: 8px;">
	<div id="chat-image-preview-container" style="display: none; align-items: center; gap: 10px;">
	<img id="chat-image-preview" src="" style="max-height: 60px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2);">
	<button id="chat-image-remove" style="background: none; border: none; color: #ef4444; cursor: pointer; font-size: 0.9rem;">β• Remove</button>
	</div>
	<form id="chat-form" style="display: flex; gap: 10px; align-items: center;">
	<input type="file" id="chat-image-upload" accept="image/*" style="display: none;">
	<button type="button" id="chat-upload-btn" onclick="document.getElementById('chat-image-upload').click()" style="background: rgba(255,255,255,0.1); border: none; border-radius: 8px; width: 40px; height: 40px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s;" title="Upload Image">
	<svg fill="none" height="16" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" width="16">
	<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
	</svg>
	</button>
	<input autocomplete="off" id="chat-input" placeholder="Ask about your portfolio... (Drop image here)" style="flex: 1; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 10px 15px; color: white; outline: none; font-size: 0.95rem; height: 40px;" type="text"/>
	<button id="chat-submit-btn" style="background: #3b82f6; border: none; border-radius: 8px; width: 40px; height: 40px; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s;" type="submit">
	<svg fill="none" height="16" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" width="16">
	<line x1="22" x2="11" y1="2" y2="13"></line>
	<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
	</svg>
	</button>
	</form>
	</div>
	</div>
	</div>

	<script>

	// β”€β”€ Mobile Navigation β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€

	function toggleMobileNav() {

	const btn = document.getElementById('hamburgerBtn');

	const links = document.getElementById('navLinks');

	const overlay = document.getElementById('mobileNavOverlay');

	const isOpen = links.classList.contains('mobile-open');

	if (isOpen) {

	btn.classList.remove('open');

	links.classList.remove('mobile-open');

	overlay.classList.remove('active');

	document.body.style.overflow = '';

	} else {

	btn.classList.add('open');

	links.classList.add('mobile-open');

	overlay.classList.add('active');

	document.body.style.overflow = 'hidden';

	}

	}

	// Close mobile nav on link click

	document.querySelectorAll('.nav-link').forEach(el => {

	el.addEventListener('click', () => {

	const links = document.getElementById('navLinks');

	if (links && links.classList.contains('mobile-open')) {

	toggleMobileNav();

	}

	});

	});

	</script>
	<!-- ADD OPTION MODAL -->


	<!-- GLOBAL MODAL FOR CARDS -->
	<div class="modal-overlay" id="globalModal" onclick="if(event.target===this) closeModal()">
	<div class="modal-window" style="max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto;">
	<div
	style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 1rem; margin-bottom: 1rem;">
	<h2 id="modalTitle" style="color: #60a5fa; margin: 0;"></h2>
	<button onclick="closeModal()"
	style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 1.5rem;">×</button>
	</div>
	<div id="modalBody" style="line-height: 1.6;"></div>
	</div>
	</div>

	<script src="/static/statarb.js?v=5"></script>
	<script src="/static/cryptoarb.js?v=6"></script>
	<script src="/static/eggs.js?v=6"></script>
	<script src="/static/app.js?v=6"></script>

	<script>
	function closeModal() {
	const m = document.getElementById('globalModal');
	if (m) m.style.display = 'none';
	}

	function openAlphaModal(el) {
	const title = el.querySelector('h3').innerText;
	const bodyHtml = el.querySelector('.card-body').innerHTML;
	document.getElementById('modalTitle').innerText = title;
	document.getElementById('modalBody').innerHTML = bodyHtml;
	document.getElementById('globalModal').style.display = 'flex';
	}
	</script>

	<!-- Cinematic Matrix Loader -->
	<div id="matrix-loader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.95); z-index: 9999; flex-direction: column; align-items: center; justify-content: center; backdrop-filter: blur(10px);">
	<svg class="logo-svg" fill="none" height="64" stroke="url(#matrix-gradient)" stroke-linecap="round"
	stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="64" style="margin-bottom: 2rem; cursor: pointer;">
	<defs>
	<lineargradient id="matrix-gradient" x1="0%" x2="100%" y1="0%" y2="100%">
	<stop offset="0%" stop-color="#60a5fa"></stop>
	<stop offset="100%" stop-color="#818cf8"></stop>
	</lineargradient>
	</defs>
	<polygon points="12 2 22 8 22 19 12 23 2 19 2 8"></polygon>
	</svg>
	<div style="width: 80%; max-width: 600px; text-align: left; font-family: monospace; color: #3b82f6;">
	<div style="font-size: 1.5rem; margin-bottom: 1rem; color: #f8fafc; font-weight: 700;">Optimization Engine Initializing...</div>
	<div id="matrix-logs" style="height: 150px; overflow-y: hidden; margin-bottom: 1rem; font-size: 0.9rem; color: #94a3b8; display: flex; flex-direction: column; justify-content: flex-end;"></div>
	<div style="width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; position: relative;">
	<div id="matrix-progress" style="width: 0%; height: 100%; background: #3b82f6; box-shadow: 0 0 10px #3b82f6; transition: width 0.2s ease;"></div>
	</div>
	<div id="matrix-progress-text" style="text-align: right; margin-top: 0.5rem; color: #3b82f6; font-size: 0.9rem;">0%</div>
	</div>
	</div>
	</body>

	</html>