{"title":"Portfolio Calculation","description":"\u003cbody\u003e\n\n\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003ctitle\u003ePSX Portfolio Projection\u003c\/title\u003e\n\u003cstyle\u003e\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700\u0026family=JetBrains+Mono:wght@400;600\u0026display=swap');\n\n  :root {\n    --bg: #0f1117;\n    --surface: #181c27;\n    --surface2: #1e2333;\n    --border: #2a2f42;\n    --green: #00c87a;\n    --green-dim: #00c87a22;\n    --blue: #4f8ef7;\n    --blue-dim: #4f8ef722;\n    --orange: #f5a623;\n    --orange-dim: #f5a62322;\n    --text: #e8eaf0;\n    --text-muted: #7a80a0;\n    --text-dim: #4a5070;\n    --accent: #6c63ff;\n  }\n\n  * { box-sizing: border-box; margin: 0; padding: 0; }\n\n  body {\n    background: var(--bg);\n    color: var(--text);\n    font-family: 'Inter', sans-serif;\n    min-height: 100vh;\n    padding: 24px 16px;\n  }\n\n  .header {\n    text-align: center;\n    margin-bottom: 32px;\n  }\n\n  .header h1 {\n    font-size: 26px;\n    font-weight: 700;\n    letter-spacing: -0.5px;\n    background: linear-gradient(135deg, #fff 0%, var(--blue) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n  }\n\n  .header p {\n    color: var(--text-muted);\n    font-size: 13px;\n    margin-top: 6px;\n  }\n\n  .controls {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    gap: 12px;\n    margin-bottom: 24px;\n    max-width: 700px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .control-card {\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 12px;\n    padding: 14px 16px;\n  }\n\n  .control-card label {\n    display: block;\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-bottom: 6px;\n  }\n\n  .control-card .val {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text);\n  }\n\n  .control-card input[type=range] {\n    width: 100%;\n    margin-top: 8px;\n    accent-color: var(--accent);\n    cursor: pointer;\n  }\n\n  \/* Big result cards *\/\n  .results-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 12px;\n    max-width: 700px;\n    margin: 0 auto 24px;\n  }\n\n  .result-card {\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 14px;\n    padding: 18px 20px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .result-card::before {\n    content: '';\n    position: absolute;\n    top: 0; left: 0; right: 0;\n    height: 3px;\n  }\n\n  .result-card.green::before { background: var(--green); }\n  .result-card.blue::before { background: var(--blue); }\n  .result-card.orange::before { background: var(--orange); }\n  .result-card.accent::before { background: var(--accent); }\n\n  .result-card .label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    margin-bottom: 8px;\n  }\n\n  .result-card .value {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 22px;\n    font-weight: 600;\n  }\n\n  .result-card.green .value { color: var(--green); }\n  .result-card.blue .value { color: var(--blue); }\n  .result-card.orange .value { color: var(--orange); }\n  .result-card.accent .value { color: var(--accent); }\n\n  .result-card .sub {\n    font-size: 11px;\n    color: var(--text-dim);\n    margin-top: 4px;\n  }\n\n  \/* Year timeline *\/\n  .timeline {\n    max-width: 700px;\n    margin: 0 auto 24px;\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 14px;\n    overflow: hidden;\n  }\n\n  .timeline-header {\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .timeline-row {\n    display: grid;\n    grid-template-columns: 60px 1fr 1fr 1fr 1fr;\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border);\n    font-size: 13px;\n    align-items: center;\n    transition: background 0.15s;\n  }\n\n  .timeline-row:last-child { border-bottom: none; }\n  .timeline-row:hover { background: var(--surface2); }\n\n  .timeline-row.header-row {\n    font-size: 11px;\n    color: var(--text-dim);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n  }\n\n  .timeline-row .year-badge {\n    background: var(--surface2);\n    border: 1px solid var(--border);\n    border-radius: 6px;\n    padding: 2px 8px;\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n    font-weight: 600;\n    display: inline-block;\n    text-align: center;\n  }\n\n  .timeline-row .mono {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 12px;\n    font-weight: 500;\n  }\n\n  .timeline-row .green { color: var(--green); }\n  .timeline-row .blue { color: var(--blue); }\n  .timeline-row .orange { color: var(--orange); }\n\n  \/* Progress bar *\/\n  .bar-wrap {\n    background: var(--surface2);\n    border-radius: 4px;\n    height: 6px;\n    overflow: hidden;\n    margin-top: 6px;\n    width: 100%;\n  }\n\n  .bar-fill {\n    height: 100%;\n    border-radius: 4px;\n    background: linear-gradient(90deg, var(--green), var(--blue));\n    transition: width 0.4s ease;\n  }\n\n  \/* Holdings *\/\n  .holdings {\n    max-width: 700px;\n    margin: 0 auto 24px;\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 14px;\n    overflow: hidden;\n  }\n\n  .holdings-header {\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border);\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .holding-row {\n    display: grid;\n    grid-template-columns: 80px 60px 1fr 90px 90px;\n    padding: 10px 20px;\n    border-bottom: 1px solid var(--border);\n    font-size: 12px;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .holding-row:last-child { border-bottom: none; }\n  .holding-row:hover { background: var(--surface2); }\n\n  .holding-row.h-header {\n    font-size: 10px;\n    color: var(--text-dim);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .stock-tag {\n    font-family: 'JetBrains Mono', monospace;\n    font-weight: 600;\n    font-size: 12px;\n  }\n\n  .role-dot {\n    width: 8px; height: 8px;\n    border-radius: 50%;\n    display: inline-block;\n    margin-right: 5px;\n    flex-shrink: 0;\n  }\n\n  .role-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    display: flex;\n    align-items: center;\n  }\n\n  .freedom-meter {\n    max-width: 700px;\n    margin: 0 auto 8px;\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: 14px;\n    padding: 20px;\n  }\n\n  .freedom-meter h3 {\n    font-size: 13px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin-bottom: 16px;\n  }\n\n  .freedom-input {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n  }\n\n  .freedom-input label {\n    font-size: 12px;\n    color: var(--text-muted);\n    white-space: nowrap;\n  }\n\n  .freedom-input input[type=number] {\n    background: var(--surface2);\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    color: var(--text);\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 14px;\n    padding: 8px 12px;\n    width: 160px;\n    outline: none;\n  }\n\n  .freedom-input input:focus {\n    border-color: var(--accent);\n  }\n\n  .freedom-result {\n    background: var(--green-dim);\n    border: 1px solid var(--green);\n    border-radius: 10px;\n    padding: 14px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .freedom-result .label { font-size: 12px; color: var(--green); }\n  .freedom-result .val {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--green);\n  }\n\n  .disclaimer {\n    max-width: 700px;\n    margin: 16px auto 0;\n    font-size: 11px;\n    color: var(--text-dim);\n    text-align: center;\n    line-height: 1.6;\n  }\n\n  @media (max-width: 500px) {\n    .controls { grid-template-columns: 1fr; }\n    .results-grid { grid-template-columns: 1fr; }\n    .timeline-row { grid-template-columns: 50px 1fr 1fr 1fr; font-size: 11px; }\n    .timeline-row \u003e *:nth-child(4) { display: none; }\n    .holding-row { grid-template-columns: 70px 50px 1fr 80px; }\n    .holding-row \u003e *:nth-child(5) { display: none; }\n  }\n\u003c\/style\u003e\n\n\n\n\u003cdiv class=\"header\"\u003e\n  \u003ch1\u003ePSX Portfolio Projector\u003c\/h1\u003e\n  \u003cp\u003eYour path to financial freedom — 5 to 10 years\u003c\/p\u003e\n\u003c\/div\u003e\n\n\u003c!-- Controls --\u003e\n\u003cdiv class=\"controls\"\u003e\n  \u003cdiv class=\"control-card\"\u003e\n    \u003clabel\u003eStarting Value (PKR)\u003c\/label\u003e\n    \u003cdiv class=\"val\" id=\"startVal\"\u003e309,000\u003c\/div\u003e\n    \u003cinput type=\"range\" id=\"startSlider\" min=\"100000\" max=\"1000000\" step=\"10000\" value=\"309000\"\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"control-card\"\u003e\n    \u003clabel\u003eMonthly Addition (PKR)\u003c\/label\u003e\n    \u003cdiv class=\"val\" id=\"monthlyVal\"\u003e30,000\u003c\/div\u003e\n    \u003cinput type=\"range\" id=\"monthlySlider\" min=\"5000\" max=\"100000\" step=\"5000\" value=\"30000\"\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"control-card\"\u003e\n    \u003clabel\u003eAnnual Growth Rate\u003c\/label\u003e\n    \u003cdiv class=\"val\" id=\"growthVal\"\u003e15%\u003c\/div\u003e\n    \u003cinput type=\"range\" id=\"growthSlider\" min=\"8\" max=\"25\" step=\"1\" value=\"15\"\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- Summary Cards --\u003e\n\u003cdiv class=\"results-grid\"\u003e\n  \u003cdiv class=\"result-card green\"\u003e\n    \u003cdiv class=\"label\"\u003ePortfolio @ Year 5\u003c\/div\u003e\n    \u003cdiv class=\"value\" id=\"y5value\"\u003e—\u003c\/div\u003e\n    \u003cdiv class=\"sub\" id=\"y5invested\"\u003eTotal invested: —\u003c\/div\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"result-card blue\"\u003e\n    \u003cdiv class=\"label\"\u003ePortfolio @ Year 10\u003c\/div\u003e\n    \u003cdiv class=\"value\" id=\"y10value\"\u003e—\u003c\/div\u003e\n    \u003cdiv class=\"sub\" id=\"y10invested\"\u003eTotal invested: —\u003c\/div\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"result-card orange\"\u003e\n    \u003cdiv class=\"label\"\u003eMonthly Dividends @ Y5\u003c\/div\u003e\n    \u003cdiv class=\"value\" id=\"y5div\"\u003e—\u003c\/div\u003e\n    \u003cdiv class=\"sub\"\u003e~7% avg yield on portfolio\u003c\/div\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"result-card accent\"\u003e\n    \u003cdiv class=\"label\"\u003eMonthly Dividends @ Y10\u003c\/div\u003e\n    \u003cdiv class=\"value\" id=\"y10div\"\u003e—\u003c\/div\u003e\n    \u003cdiv class=\"sub\"\u003e~7% avg yield on portfolio\u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- Year by Year Timeline --\u003e\n\u003cdiv class=\"timeline\"\u003e\n  \u003cdiv class=\"timeline-header\"\u003eYear-by-Year Projection\u003c\/div\u003e\n  \u003cdiv class=\"timeline-row header-row\"\u003e\n    \u003cdiv\u003eYear\u003c\/div\u003e\n    \u003cdiv\u003ePortfolio Value\u003c\/div\u003e\n    \u003cdiv\u003eTotal Invested\u003c\/div\u003e\n    \u003cdiv\u003eGrowth\u003c\/div\u003e\n    \u003cdiv\u003eMonthly Income\u003c\/div\u003e\n  \u003c\/div\u003e\n  \u003cdiv id=\"timelineRows\"\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- Holdings Breakdown --\u003e\n\u003cdiv class=\"holdings\"\u003e\n  \u003cdiv class=\"holdings-header\"\u003eHoldings at Year 10 (Target Allocation)\u003c\/div\u003e\n  \u003cdiv class=\"holding-row h-header\"\u003e\n    \u003cdiv\u003eStock\u003c\/div\u003e\n    \u003cdiv\u003eAlloc\u003c\/div\u003e\n    \u003cdiv\u003eRole\u003c\/div\u003e\n    \u003cdiv\u003eValue @Y10\u003c\/div\u003e\n    \u003cdiv\u003eAnn. Dividend\u003c\/div\u003e\n  \u003c\/div\u003e\n  \u003cdiv id=\"holdingRows\"\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003c!-- Financial Freedom Meter --\u003e\n\u003cdiv class=\"freedom-meter\"\u003e\n  \u003ch3\u003eFinancial Freedom Calculator\u003c\/h3\u003e\n  \u003cdiv class=\"freedom-input\"\u003e\n    \u003clabel\u003eMonthly income I need (PKR):\u003c\/label\u003e\n    \u003cinput type=\"number\" id=\"freedomTarget\" value=\"100000\" step=\"10000\"\u003e\n  \u003c\/div\u003e\n  \u003cdiv class=\"freedom-result\"\u003e\n    \u003cdiv\u003e\n      \u003cdiv class=\"label\"\u003eYou reach financial freedom in:\u003c\/div\u003e\n      \u003cdiv style=\"font-size:11px; color: var(--text-dim); margin-top:3px;\"\u003eBased on 7% dividend yield on portfolio\u003c\/div\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"val\" id=\"freedomYear\"\u003e—\u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cdiv class=\"disclaimer\"\u003e\n  ⚠️ Projections are illustrative only. PSX returns, dividend yields, and currency values fluctuate. Past performance does not guarantee future results. Consult a financial advisor before making investment decisions.\n\u003c\/div\u003e\n\n\u003cscript\u003e\n  const stocks = [\n    { ticker: 'FFC',     alloc: 0.15, role: '🟢 Dividend\/core',      divYield: 0.09, color: '#00c87a' },\n    { ticker: 'ENGROH',  alloc: 0.10, role: '🟢 Core\/compounder',     divYield: 0.06, color: '#00c87a' },\n    { ticker: 'MEBL',    alloc: 0.12, role: '🟢 Growth + dividend',   divYield: 0.05, color: '#00c87a' },\n    { ticker: 'MARI',    alloc: 0.10, role: '🟢 Energy\/growth',       divYield: 0.07, color: '#00c87a' },\n    { ticker: 'HUBC',    alloc: 0.10, role: '🟢 Income',              divYield: 0.10, color: '#00c87a' },\n    { ticker: 'OGDC',    alloc: 0.10, role: '🟢 Income\/energy',       divYield: 0.08, color: '#00c87a' },\n    { ticker: 'EFERT',   alloc: 0.08, role: '🟢 Dividend',            divYield: 0.10, color: '#00c87a' },\n    { ticker: 'PPL',     alloc: 0.08, role: '🟢 Income\/energy',       divYield: 0.08, color: '#00c87a' },\n    { ticker: 'LUCK',    alloc: 0.07, role: '🟢 Growth\/industrial',   divYield: 0.04, color: '#00c87a' },\n    { ticker: 'SYS',     alloc: 0.05, role: '🔵 Growth',              divYield: 0.02, color: '#4f8ef7' },\n    { ticker: 'AIRLINK', alloc: 0.03, role: '🔵 Aggressive growth',   divYield: 0.00, color: '#4f8ef7' },\n    { ticker: 'ATRL',    alloc: 0.02, role: '🟠 Cyclical',            divYield: 0.05, color: '#f5a623' },\n  ];\n\n  const AVG_DIV_YIELD = 0.07;\n\n  function fmt(n) {\n    if (n \u003e= 1e7) return (n\/1e7).toFixed(2) + ' Cr';\n    if (n \u003e= 1e5) return (n\/1e5).toFixed(2) + ' L';\n    return Math.round(n).toLocaleString();\n  }\n\n  function fmtFull(n) {\n    return 'PKR ' + Math.round(n).toLocaleString();\n  }\n\n  function project(start, monthly, rate, years) {\n    const monthlyRate = rate \/ 12;\n    let value = start;\n    const results = [];\n    for (let y = 1; y \u003c= years; y++) {\n      for (let m = 0; m \u003c 12; m++) {\n        value = value * (1 + monthlyRate) + monthly;\n      }\n      const totalInvested = start + (monthly * 12 * y);\n      const growth = value - totalInvested;\n      results.push({ year: y, value, totalInvested, growth });\n    }\n    return results;\n  }\n\n  function freedomYear(target, start, monthly, rate) {\n    const monthlyRate = rate \/ 12;\n    let value = start;\n    for (let m = 1; m \u003c= 360; m++) {\n      value = value * (1 + monthlyRate) + monthly;\n      const monthlyDiv = (value * AVG_DIV_YIELD) \/ 12;\n      if (monthlyDiv \u003e= target) {\n        const yrs = Math.floor(m \/ 12);\n        const mos = m % 12;\n        if (mos === 0) return `Year ${yrs}`;\n        return `Year ${yrs}, Month ${mos}`;\n      }\n    }\n    return '\u003e 30 years';\n  }\n\n  function render() {\n    const start = +document.getElementById('startSlider').value;\n    const monthly = +document.getElementById('monthlySlider').value;\n    const rate = +document.getElementById('growthSlider').value \/ 100;\n    const freedomTargetVal = +document.getElementById('freedomTarget').value;\n\n    document.getElementById('startVal').textContent = start.toLocaleString();\n    document.getElementById('monthlyVal').textContent = monthly.toLocaleString();\n    document.getElementById('growthVal').textContent = (rate * 100).toFixed(0) + '%';\n\n    const proj = project(start, monthly, rate, 10);\n\n    const y5 = proj[4];\n    const y10 = proj[9];\n\n    document.getElementById('y5value').textContent = fmtFull(y5.value);\n    document.getElementById('y10value').textContent = fmtFull(y10.value);\n    document.getElementById('y5invested').textContent = 'Total invested: ' + fmtFull(y5.totalInvested);\n    document.getElementById('y10invested').textContent = 'Total invested: ' + fmtFull(y10.totalInvested);\n    document.getElementById('y5div').textContent = fmtFull((y5.value * AVG_DIV_YIELD) \/ 12) + '\/mo';\n    document.getElementById('y10div').textContent = fmtFull((y10.value * AVG_DIV_YIELD) \/ 12) + '\/mo';\n\n    \/\/ Timeline\n    const tbody = document.getElementById('timelineRows');\n    tbody.innerHTML = '';\n    const maxVal = y10.value;\n    proj.forEach(row =\u003e {\n      const monthlyIncome = (row.value * AVG_DIV_YIELD) \/ 12;\n      const pct = (row.value \/ maxVal * 100).toFixed(1);\n      const isKey = row.year === 5 || row.year === 10;\n      const div = document.createElement('div');\n      div.className = 'timeline-row';\n      if (isKey) div.style.background = 'rgba(108,99,255,0.06)';\n      div.innerHTML = `\n        \u003cdiv\u003e\u003cspan class=\"year-badge\" style=\"${isKey ? 'border-color:var(--accent);color:var(--accent)' : ''}\"\u003e${row.year}\u003c\/span\u003e\u003c\/div\u003e\n        \u003cdiv\u003e\n          \u003cdiv class=\"mono green\"\u003ePKR ${fmt(row.value)}\u003c\/div\u003e\n          \u003cdiv class=\"bar-wrap\"\u003e\u003cdiv class=\"bar-fill\" style=\"width:${pct}%\"\u003e\u003c\/div\u003e\u003c\/div\u003e\n        \u003c\/div\u003e\n        \u003cdiv class=\"mono\" style=\"color:var(--text-muted)\"\u003ePKR ${fmt(row.totalInvested)}\u003c\/div\u003e\n        \u003cdiv class=\"mono\" style=\"color:var(--text-dim)\"\u003e+PKR ${fmt(row.growth)}\u003c\/div\u003e\n        \u003cdiv class=\"mono orange\"\u003ePKR ${fmt(monthlyIncome)}\/mo\u003c\/div\u003e\n      `;\n      tbody.appendChild(div);\n    });\n\n    \/\/ Holdings at Y10\n    const hrows = document.getElementById('holdingRows');\n    hrows.innerHTML = '';\n    stocks.forEach(s =\u003e {\n      const holdingVal = y10.value * s.alloc;\n      const annualDiv = holdingVal * s.divYield;\n      const dot = s.color;\n      const div = document.createElement('div');\n      div.className = 'holding-row';\n      div.innerHTML = `\n        \u003cdiv class=\"stock-tag\" style=\"color:${dot}\"\u003e${s.ticker}\u003c\/div\u003e\n        \u003cdiv style=\"color:var(--text-muted);font-family:'JetBrains Mono',monospace\"\u003e${(s.alloc*100).toFixed(0)}%\u003c\/div\u003e\n        \u003cdiv class=\"role-label\"\u003e\u003cspan class=\"role-dot\" style=\"background:${dot}\"\u003e\u003c\/span\u003e${s.role.replace(\/🟢|🔵|🟠\/,'').trim()}\u003c\/div\u003e\n        \u003cdiv class=\"mono\" style=\"color:var(--text)\"\u003ePKR ${fmt(holdingVal)}\u003c\/div\u003e\n        \u003cdiv class=\"mono\" style=\"color:var(--green)\"\u003e${s.divYield \u003e 0 ? 'PKR '+fmt(annualDiv)+'\/yr' : '—'}\u003c\/div\u003e\n      `;\n      hrows.appendChild(div);\n    });\n\n    \/\/ Freedom year\n    document.getElementById('freedomYear').textContent = freedomYear(freedomTargetVal, start, monthly, rate);\n  }\n\n  document.getElementById('startSlider').addEventListener('input', render);\n  document.getElementById('monthlySlider').addEventListener('input', render);\n  document.getElementById('growthSlider').addEventListener('input', render);\n  document.getElementById('freedomTarget').addEventListener('input', render);\n\n  render();\n\u003c\/script\u003e\n\n\u003c\/body\u003e","products":[],"url":"https:\/\/zzalab.com\/collections\/portfolio-calculation.oembed","provider":"ZZ\u0026A","version":"1.0","type":"link"}