Legg til tre nye kalkulatorer: sparing, bolig og arv

Nye interaktive kalkulatorer som utforsker hvordan tilsynelatende
små forskjeller vokser eksponentielt over tid:

- sparing: rentes rente med ulik avkastning (månedlig compounding)
- bolig: belåningseffekt forsterker egenkapitalgap ~6.7×
- arv: arvet formue vokser uavhengig av innsats, gapet lukkes aldri

Landingsside oppdatert med nye kort. Dokumentasjon oppdatert.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/bolig/app.js

@@ -0,0 +1,171 @@
+// Formateringshjelpere — norsk locale
+function fmtKr(n) {
+  return Math.round(n).toLocaleString('nb-NO') + '\u202fkr';
+}
+
+function fmtShort(n) {
+  if (n >= 1e6) return (n / 1e6).toFixed(1).replace('.', ',') + '\u202fM';
+  if (n >= 1e3) return Math.round(n / 1e3) + '\u202fk';
+  return Math.round(n);
+}
+
+function getData() {
+  const pA = +document.getElementById('priceA').value;
+  const pB = +document.getElementById('priceB').value;
+  const g = +document.getElementById('growth').value / 100;
+  const Y = +document.getElementById('yrs').value;
+
+  // Lån = 85 % av kjøpspris (forenklet avdragsfritt)
+  const loanA = pA * 0.85;
+  const loanB = pB * 0.85;
+
+  const labels = [], valA = [], valB = [], valGaps = [];
+  const eqA = [], eqB = [], eqGaps = [];
+
+  for (let y = 0; y <= Y; y++) {
+    labels.push(y === 0 ? 'I dag' : (y % 5 === 0 || Y <= 10 || y === Y) ? 'År ' + y : '');
+    const a = pA * Math.pow(1 + g, y);
+    const b = pB * Math.pow(1 + g, y);
+    valA.push(a);
+    valB.push(b);
+    valGaps.push(b - a);
+    eqA.push(a - loanA);
+    eqB.push(b - loanB);
+    eqGaps.push((b - loanB) - (a - loanA));
+  }
+
+  return { pA, pB, g, Y, loanA, loanB, labels, valA, valB, valGaps, eqA, eqB, eqGaps };
+}
+
+const GRID_COLOR = 'rgba(0,0,0,0.06)';
+const TICK_COLOR = '#8a857e';
+
+function baseOpts() {
+  return {
+    responsive: true, maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false },
+      tooltip: {
+        callbacks: { label: c => ' ' + fmtKr(c.parsed.y) },
+        backgroundColor: '#1a1714',
+        titleColor: '#f5f2eb',
+        bodyColor: 'rgba(245,242,235,0.7)',
+        padding: 10,
+        cornerRadius: 4,
+        titleFont: { family: 'DM Sans', size: 12 },
+        bodyFont: { family: 'DM Sans', size: 12 }
+      }
+    },
+    scales: {
+      x: {
+        ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, autoSkip: false, maxRotation: 0 },
+        grid: { display: false },
+        border: { color: 'rgba(0,0,0,0.1)' }
+      },
+      y: {
+        ticks: { color: TICK_COLOR, font: { size: 11, family: 'DM Sans' }, callback: v => fmtShort(v) },
+        grid: { color: GRID_COLOR },
+        border: { dash: [3, 3], color: 'transparent' }
+      }
+    }
+  };
+}
+
+// Diagram 1: Boligverdi over tid
+const chart1 = new Chart(document.getElementById('chart1'), {
+  type: 'line',
+  data: { labels: [], datasets: [
+    { data: [], borderColor: '#1a4a8a', backgroundColor: 'rgba(26,74,138,0.07)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2 },
+    { data: [], borderColor: '#c0392b', backgroundColor: 'rgba(192,57,43,0.07)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2 }
+  ]},
+  options: baseOpts()
+});
+
+// Diagram 2: Verdidifferanse
+const chart2 = new Chart(document.getElementById('chart2'), {
+  type: 'line',
+  data: { labels: [], datasets: [
+    { data: [], borderColor: '#4a3a8a', backgroundColor: 'rgba(74,58,138,0.1)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2 }
+  ]},
+  options: baseOpts()
+});
+
+// Diagram 3: Egenkapitalvekst (A, B, gap)
+const chart3 = new Chart(document.getElementById('chart3'), {
+  type: 'line',
+  data: { labels: [], datasets: [
+    { data: [], borderColor: '#1a4a8a', backgroundColor: 'rgba(26,74,138,0.07)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2 },
+    { data: [], borderColor: '#c0392b', backgroundColor: 'rgba(192,57,43,0.07)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2 },
+    { data: [], borderColor: '#4a3a8a', backgroundColor: 'rgba(74,58,138,0.1)', fill: true, tension: 0.35, pointRadius: 0, borderWidth: 2, borderDash: [6, 4] }
+  ]},
+  options: baseOpts()
+});
+
+// SIKKERHETSNOTAT: Alle verdier er beregnet fra numeriske slider-verdier.
+// Ingen bruker-tekstinput brukes i DOM-oppdateringer.
+function update() {
+  const { pA, pB, g, Y, loanA, loanB, labels, valA, valB, valGaps, eqA, eqB, eqGaps } = getData();
+
+  // Slider-visning
+  document.querySelectorAll('.yr-lbl').forEach(el => el.textContent = Y);
+  document.getElementById('priceA-out').textContent = Math.round(pA).toLocaleString('nb-NO') + '\u202fkr';
+  document.getElementById('priceB-out').textContent = Math.round(pB).toLocaleString('nb-NO') + '\u202fkr';
+  document.getElementById('growth-out').textContent = (g * 100).toLocaleString('nb-NO', { minimumFractionDigits: 1 }) + '\u202f%';
+  document.getElementById('yrs-out').textContent = Y + '\u202får';
+
+  // Statistikkort
+  document.getElementById('st-valA').textContent = fmtKr(valA[Y]);
+  document.getElementById('st-subA').textContent = 'EK: ' + fmtKr(eqA[Y]);
+  document.getElementById('st-valB').textContent = fmtKr(valB[Y]);
+  document.getElementById('st-subB').textContent = 'EK: ' + fmtKr(eqB[Y]);
+  document.getElementById('st-valdiff').textContent = fmtKr(valGaps[Y]);
+  document.getElementById('st-valdiff-sub').textContent = 'var ' + fmtKr(pB - pA) + ' ved start';
+  document.getElementById('st-eqdiff').textContent = fmtKr(eqGaps[Y]);
+  const startEqGap = (pB * 0.15) - (pA * 0.15);
+  document.getElementById('st-eqdiff-sub').textContent = 'var ' + fmtKr(startEqGap) + ' ved start';
+
+  // Banner
+  document.getElementById('banner-gap').textContent = fmtKr(eqGaps[Y]);
+
+  // Innsikt — bruker DOM-metoder for sikkerhet
+  const insightEl = document.getElementById('insight');
+  insightEl.textContent = '';
+  const growthPct = (g * 100).toLocaleString('nb-NO', { minimumFractionDigits: 1 });
+  const parts = [
+    { text: 'Begge boligene steg ' + growthPct + ' % i året. Men B-eieren har ' },
+    { text: fmtKr(eqGaps[Y]), bold: true },
+    { text: ' mer i egenkapital — fordi gjeldsgraden forsterker forskjellen.' }
+  ];
+  parts.forEach(p => {
+    if (p.bold) {
+      const strong = document.createElement('strong');
+      strong.textContent = p.text;
+      insightEl.appendChild(strong);
+    } else {
+      insightEl.appendChild(document.createTextNode(p.text));
+    }
+  });
+
+  // Diagram 1: Boligverdi
+  chart1.data.labels = labels;
+  chart1.data.datasets[0].data = valA;
+  chart1.data.datasets[1].data = valB;
+  chart1.update('none');
+
+  // Diagram 2: Verdidifferanse
+  chart2.data.labels = labels;
+  chart2.data.datasets[0].data = valGaps;
+  chart2.update('none');
+
+  // Diagram 3: Egenkapital
+  chart3.data.labels = labels;
+  chart3.data.datasets[0].data = eqA;
+  chart3.data.datasets[1].data = eqB;
+  chart3.data.datasets[2].data = eqGaps;
+  chart3.update('none');
+}
+
+['priceA', 'priceB', 'growth', 'yrs'].forEach(id =>
+  document.getElementById(id).addEventListener('input', update)
+);
+update();

public/bolig/index.html

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="nb">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Boligforskjellen vokser — interaktiv kalkulator</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,600;1,9..144,300&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="style.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+</head>
+<body>
+
+<header>
+  <p class="eyebrow">Samme prisvekst. Ikke det samme resultatet.</p>
+  <h1>Boligforskjellen<br><em>forsterkes</em></h1>
+  <p class="lead">To boliger med ulik pris stiger like mye i prosent — men belåningen forsterker gapet i egenkapital dramatisk.</p>
+  <div class="stamp">Belåningseffekten</div>
+</header>
+
+<div class="small-diff-banner">
+  <span class="sd-icon">↗</span>
+  <span>Med <strong>1 million</strong> i prisforskjell og 4 % årlig vekst: egenkapitalgapet vokser til over <strong id="banner-gap">—</strong> på 15 år.</span>
+</div>
+
+<main>
+
+  <div class="controls-card">
+    <h2>Sjekk selv</h2>
+    <div class="controls-grid">
+      <div class="control-group">
+        <label>Boligpris A</label>
+        <div class="val-row">
+          <input type="range" id="priceA" min="2000000" max="8000000" step="100000" value="3000000">
+          <span class="val-display" id="priceA-out">3 000 000 kr</span>
+        </div>
+      </div>
+      <div class="control-group">
+        <label>Boligpris B</label>
+        <div class="val-row">
+          <input type="range" id="priceB" min="2000000" max="8000000" step="100000" value="4000000">
+          <span class="val-display" id="priceB-out">4 000 000 kr</span>
+        </div>
+      </div>
+      <div class="control-group">
+        <label>Årlig prisvekst (% — lik for begge)</label>
+        <div class="val-row">
+          <input type="range" id="growth" min="1" max="10" step="0.5" value="4">
+          <span class="val-display" id="growth-out">4,0 %</span>
+        </div>
+      </div>
+      <div class="control-group">
+        <label>Antall år</label>
+        <div class="val-row">
+          <input type="range" id="yrs" min="5" max="30" step="1" value="15">
+          <span class="val-display" id="yrs-out">15 år</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="stat-strip">
+    <div class="stat">
+      <div class="stat-label">Bolig A verdi etter <span class="yr-lbl">15</span> år</div>
+      <div class="stat-value" id="st-valA">—</div>
+      <div class="stat-sub" id="st-subA">—</div>
+    </div>
+    <div class="stat">
+      <div class="stat-label">Bolig B verdi etter <span class="yr-lbl">15</span> år</div>
+      <div class="stat-value" id="st-valB">—</div>
+      <div class="stat-sub" id="st-subB">—</div>
+    </div>
+    <div class="stat stat-diff">
+      <div class="stat-label">Verdidifferanse</div>
+      <div class="stat-value" id="st-valdiff" style="color:var(--accent);">—</div>
+      <div class="stat-sub" id="st-valdiff-sub">—</div>
+    </div>
+    <div class="stat">
+      <div class="stat-label">Egenkapital-differanse</div>
+      <div class="stat-value" id="st-eqdiff" style="color:var(--purple);">—</div>
+      <div class="stat-sub" id="st-eqdiff-sub">—</div>
+    </div>
+  </div>
+
+  <!-- Diagram 1: Boligverdi over tid -->
+  <div class="chart-section">
+    <div class="chart-header">
+      <div>
+        <div class="chart-title">Boligverdi over tid</div>
+        <div class="chart-desc">Begge boliger stiger med samme prosentsats</div>
+      </div>
+      <div class="legend">
+        <span><span class="swatch" style="background:#1a4a8a;"></span>Bolig A</span>
+        <span><span class="swatch" style="background:#c0392b;"></span>Bolig B</span>
+      </div>
+    </div>
+    <div class="chart-wrap h-240"><canvas id="chart1"></canvas></div>
+  </div>
+
+  <!-- Diagram 2: Absolutt verdidifferanse -->
+  <div class="chart-section">
+    <div class="chart-header">
+      <div>
+        <div class="chart-title">Absolutt verdidifferanse</div>
+        <div class="chart-desc">Kronedifferansen mellom boligene — vokser hvert år</div>
+      </div>
+      <div class="legend">
+        <span><span class="swatch" style="background:#4a3a8a;"></span>Verdidifferanse</span>
+      </div>
+    </div>
+    <div class="chart-wrap h-200"><canvas id="chart2"></canvas></div>
+  </div>
+
+  <div class="insight" id="insight"></div>
+
+  <!-- Diagram 3: Egenkapitalvekst -->
+  <div class="chart-section">
+    <div class="chart-header">
+      <div>
+        <div class="chart-title">Egenkapitalvekst</div>
+        <div class="chart-desc">Belåningen forsterker forskjellen — egenkapitalgapet vokser raskere enn verdigapet</div>
+      </div>
+      <div class="legend">
+        <span><span class="swatch" style="background:#1a4a8a;"></span>EK Bolig A</span>
+        <span><span class="swatch" style="background:#c0392b;"></span>EK Bolig B</span>
+        <span><span class="swatch" style="background:#4a3a8a;"></span>EK-gap</span>
+      </div>
+    </div>
+    <div class="chart-wrap h-240"><canvas id="chart3"></canvas></div>
+  </div>
+
+  <!-- Forklaring -->
+  <div class="explainer">
+    <h3>Belåningseffekten</h3>
+    <p>Med 15 % egenkapital finansierer du boligen med 85 % gjeld. Det betyr at hele prisveksten tilfaller bare 15 % av kapitalen — en forsterkning på omtrent <strong>6,7 ganger</strong>.</p>
+    <div class="formula-box">
+      Egenkapital = <span>Pris × (1 + vekst)ⁿ − Lån</span><br>
+      Lån = <span>85 % av kjøpspris</span> (forenklet avdragsfritt)
+    </div>
+    <p>Verdidifferansen mellom boligene vokser eksponentielt — men egenkapitaldifferansen vokser <strong>enda raskere</strong> fordi begge eierne har like stor gjeldsandel. Jo dyrere bolig, desto mer egenkapital skapes av samme prosentvise prisvekst.</p>
+  </div>
+
+</main>
+
+<footer>
+  <a href="../">← Alle kalkulatorer</a> · Laget med Chart.js · Tallene er illustrative og ikke finansiell rådgivning · <a href="https://kode.naiv.no/olemd/forskjeller.naiv.no">Kildekode</a>
+</footer>
+
+<script src="app.js"></script>
+</body>
+</html>

public/bolig/style.css

@@ -0,0 +1,370 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #f5f2eb;
+  --bg2: #ede9e0;
+  --bg3: #e4dfd3;
+  --ink: #1a1714;
+  --ink2: #5a5650;
+  --ink3: #8a857e;
+  --accent: #c0392b;
+  --accent2: #2c6e49;
+  --blue: #1a4a8a;
+  --amber: #b5620a;
+  --purple: #4a3a8a;
+  --border: rgba(26,23,20,0.12);
+  --radius: 4px;
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: 'DM Sans', sans-serif;
+  background: var(--bg);
+  color: var(--ink);
+  font-size: 16px;
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+/* HEADER */
+header {
+  background: var(--ink);
+  color: var(--bg);
+  padding: 3.5rem 2rem 3rem;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 40px,
+    rgba(255,255,255,0.02) 40px,
+    rgba(255,255,255,0.02) 41px
+  );
+}
+header .eyebrow {
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(245,242,235,0.5);
+  margin-bottom: 1rem;
+  font-weight: 400;
+}
+header h1 {
+  font-family: 'Fraunces', serif;
+  font-size: clamp(2.2rem, 6vw, 4rem);
+  font-weight: 600;
+  line-height: 1.1;
+  margin-bottom: 1rem;
+  position: relative;
+}
+header h1 em {
+  font-style: italic;
+  color: #e8b4a0;
+}
+header p.lead {
+  font-size: clamp(0.95rem, 2vw, 1.1rem);
+  color: rgba(245,242,235,0.65);
+  max-width: 560px;
+  margin: 0 auto;
+  font-weight: 300;
+  line-height: 1.7;
+}
+
+/* MAIN LAYOUT */
+main {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem 4rem;
+}
+
+/* CONTROLS CARD */
+.controls-card {
+  background: var(--ink);
+  color: var(--bg);
+  border-radius: 8px;
+  padding: 2rem;
+  margin-bottom: 2.5rem;
+}
+.controls-card h2 {
+  font-family: 'Fraunces', serif;
+  font-size: 1rem;
+  font-weight: 300;
+  font-style: italic;
+  color: rgba(245,242,235,0.5);
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.03em;
+}
+.controls-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem 2rem;
+}
+@media (max-width: 560px) {
+  .controls-grid { grid-template-columns: 1fr; gap: 1rem; }
+}
+
+.control-group label {
+  display: block;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(245,242,235,0.45);
+  margin-bottom: 0.5rem;
+  font-weight: 400;
+}
+.control-group .val-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.control-group input[type=range] {
+  flex: 1;
+  -webkit-appearance: none;
+  height: 3px;
+  background: rgba(245,242,235,0.15);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+.control-group input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--bg);
+  cursor: pointer;
+  transition: transform 0.1s;
+}
+.control-group input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+.control-group input[type=range]::-moz-range-thumb {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--bg);
+  cursor: pointer;
+  border: none;
+}
+.control-group .val-display {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--bg);
+  min-width: 80px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* STAT STRIP */
+.stat-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  margin-bottom: 2.5rem;
+}
+@media (max-width: 600px) {
+  .stat-strip { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 360px) {
+  .stat-strip { grid-template-columns: 1fr; }
+}
+.stat {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1rem 1.1rem;
+}
+.stat-label {
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--ink3);
+  margin-bottom: 0.35rem;
+}
+.stat-value {
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+}
+.stat-sub {
+  font-size: 12px;
+  color: var(--ink3);
+  margin-top: 0.2rem;
+}
+
+/* CHART SECTIONS */
+.chart-section {
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+.chart-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.chart-title {
+  font-family: 'Fraunces', serif;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--ink);
+}
+.chart-desc {
+  font-size: 13px;
+  color: var(--ink3);
+  margin-top: 2px;
+}
+.legend {
+  display: flex;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--ink2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.legend span { display: flex; align-items: center; gap: 5px; }
+.swatch {
+  width: 10px; height: 10px;
+  border-radius: 2px;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.swatch.dashed {
+  background: linear-gradient(90deg, var(--sw-color) 50%, transparent 50%);
+  background-size: 6px 2px;
+  background-repeat: repeat-x;
+  background-position: center;
+  background-color: transparent;
+  height: 2px;
+  width: 18px;
+  border-radius: 0;
+}
+.chart-wrap {
+  position: relative;
+  width: 100%;
+}
+
+/* INSIGHT BOX */
+.insight {
+  background: var(--bg2);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 6px 6px 0;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.95rem;
+  color: var(--ink2);
+  line-height: 1.65;
+}
+.insight strong { color: var(--ink); font-weight: 500; }
+
+/* EXPLAINER */
+.explainer {
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1.75rem 2rem;
+  margin-top: 2rem;
+}
+.explainer h3 {
+  font-family: 'Fraunces', serif;
+  font-size: 1.2rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+.explainer p {
+  font-size: 0.95rem;
+  color: var(--ink2);
+  margin-bottom: 0.75rem;
+  line-height: 1.7;
+}
+.explainer p:last-child { margin-bottom: 0; }
+.explainer strong { color: var(--ink); font-weight: 500; }
+
+/* FORMULA */
+.formula-box {
+  background: var(--ink);
+  color: var(--bg);
+  border-radius: 6px;
+  padding: 1rem 1.25rem;
+  font-family: 'DM Sans', monospace;
+  font-size: 0.9rem;
+  margin: 1rem 0;
+  letter-spacing: 0.02em;
+  line-height: 1.8;
+}
+.formula-box span { color: #e8b4a0; }
+
+/* STAMP */
+.stamp {
+  display: inline-block;
+  position: relative;
+  margin-top: 2rem;
+  padding: 0.55rem 1.1rem;
+  border: 3px solid #e8b4a0;
+  border-radius: 4px;
+  font-family: 'Fraunces', serif;
+  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #e8b4a0;
+  opacity: 0.72;
+  transform: rotate(-4deg);
+  box-shadow: inset 0 0 0 2px rgba(232,180,160,0.18);
+  user-select: none;
+}
+.stamp::before {
+  content: '';
+  position: absolute;
+  inset: 3px;
+  border: 1px solid rgba(232,180,160,0.3);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* SMALL DIFF BANNER */
+.small-diff-banner {
+  background: var(--accent);
+  color: #fff;
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  font-size: clamp(0.88rem, 2vw, 1rem);
+  line-height: 1.6;
+}
+.small-diff-banner strong { font-weight: 500; }
+.sd-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
+
+/* FOOTER */
+footer {
+  text-align: center;
+  padding: 2rem 1rem;
+  font-size: 12px;
+  color: var(--ink3);
+  border-top: 1px solid var(--border);
+  margin-top: 3rem;
+}
+footer a { color: var(--ink3); }
+
+/* RESPONSIVE CHART HEIGHTS */
+.h-240 { height: 240px; }
+.h-200 { height: 200px; }
+@media (max-width: 480px) {
+  .h-240 { height: 200px; }
+  .h-200 { height: 170px; }
+  .chart-section { padding: 1rem; }
+  main { padding: 1.5rem 1rem 3rem; }
+  .controls-card { padding: 1.25rem; }
+  .explainer { padding: 1.25rem; }
+}