From 452916fde145f309522848ba837b965c96e6bec4 Mon Sep 17 00:00:00 2001
From: cgutsche <christian.gutsche@tu-dresden.de>
Date: Mon, 10 Aug 2026 12:25:43 +0200
Subject: [PATCH] Smart home example added

---
 viz_submission/index.html | 920 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 920 insertions(+)
 create mode 100644 viz_submission/index.html
diff --git a/viz_submission/index.html b/viz_submission/index.html
new file mode 100644
index 0000000..1222ee6
--- /dev/null
+++ b/viz_submission/index.html
@@ -0,0 +1,920 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="Standalone animated smart-home energy dashboard with PV, battery, grid, and switchable consumers.">
+  <title>Smart Home Energy Dynamics</title>
+  <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      /* mycomponents: sum(lowercase UTF-8 bytes)=1324; 1324 mod 6=4 (teal) */
+      --accent-deep: #094A39;
+      --accent-base: #107A5E;
+      --accent-lift: #179675;
+      --accent-wash: #EAF2F4;
+      --accent-hairline: #C7DFDC;
+      --stage: #F3F2F7;
+      --paper: #FAFBFF;
+      --panel-2: #FDFCFF;
+      --ink: #1A1330;
+      --ink-2: #4A4365;
+      --ink-3: #8580A0;
+      --hairline: #D8D3E8;
+      --hairline-soft: rgba(216, 211, 232, 0.6);
+      --chip: #EFECF8;
+      --status-dq: #C4574B;
+      --series-pv: #107A5E;
+      --series-grid: #1F55C9;
+      --series-battery: #7A34C4;
+      --series-temperature: #B0306E;
+      --series-soc: #1A1330;
+      --shadow: 0 10px 34px rgba(20, 15, 40, 0.13);
+      --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
+      --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
+    }
+    :root[data-theme="dark"] {
+      --stage: #11151B;
+      --paper: #181E26;
+      --panel-2: #1D2530;
+      --ink: #F1F4F8;
+      --ink-2: #C5CED9;
+      --ink-3: #8F9AAA;
+      --hairline: #35404E;
+      --hairline-soft: rgba(76, 89, 105, 0.55);
+      --chip: #242D38;
+      --accent-wash: #17342D;
+      --accent-hairline: #285C50;
+      --series-soc: #E3E7ED;
+      --shadow: 0 10px 34px rgba(0, 0, 0, 0.32);
+    }
+    :root[data-theme="dark"] .control-button.primary,
+    :root[data-theme="dark"] .speed-button.active { color: #FAFBFF; }
+
+
+    * { box-sizing: border-box; }
+    html { background: var(--stage); transition: background 0.7s ease; }
+    body {
+      margin: 0;
+      min-width: 320px;
+      color: var(--ink-2);
+      background: var(--stage);
+      font: 400 13px/1.5 var(--sans);
+      transition: color 0.7s ease, background 0.7s ease;
+    }
+    button { font: inherit; }
+    .mono, .number, .metric-value, .node-value, .time-value, .consumer-power { font-family: var(--mono); }
+
+    .dashboard {
+      width: min(1480px, 100%);
+      min-height: 100vh;
+      margin: 0 auto;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    .dashboard-header {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: 24px;
+      opacity: 0;
+      transform: translateY(10px);
+      animation: reveal 0.62s ease forwards;
+    }
+    .kicker {
+      margin: 0 0 8px;
+      color: var(--accent-base);
+      font: 500 11px/1.2 var(--mono);
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+    }
+    h1 {
+      margin: 0;
+      color: var(--accent-base);
+      font: 500 32px/1.15 var(--sans);
+      letter-spacing: -0.02em;
+    }
+    h1 span { color: var(--ink); }
+    .header-actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .card, .flow-node, .consumer-row, .speed-group, .control-button, .temperature-control { transition-property: color, background, border-color, box-shadow, opacity; transition-duration: 0.7s; transition-timing-function: ease; }
+    .control-button, .speed-button {
+      min-height: 40px;
+      padding: 0 16px;
+      border: 1.2px solid rgba(16, 122, 94, 0.18);
+      border-radius: 7px;
+      color: var(--ink-2);
+      background: var(--paper);
+      font: 500 11px/1 var(--mono);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      cursor: pointer;
+      transition: border-color 0.38s ease, background 0.38s ease, color 0.38s ease;
+    }
+    .control-button:hover, .speed-button:hover { border-color: rgba(16, 122, 94, 0.45); }
+    .control-button.primary, .speed-button.active {
+      color: var(--paper);
+      border-color: var(--accent-base);
+      background: var(--accent-base);
+    }
+    .speed-group {
+      display: flex;
+      padding: 4px;
+      gap: 4px;
+      border: 1px solid var(--hairline);
+      border-radius: 11px;
+      background: var(--paper);
+    }
+    .speed-button { min-height: 30px; padding: 0 10px; border-color: transparent; background: transparent; }
+
+    .day-window {
+      position: relative;
+      width: 184px;
+      height: 72px;
+      overflow: hidden;
+      border: 1.2px solid var(--accent-hairline);
+      border-radius: 11px;
+      background: linear-gradient(180deg, #DDEFFF 0%, #F7EADB 100%);
+      transition: background 0.7s ease, border-color 0.7s ease;
+    }
+    :root[data-theme="dark"] .day-window { background: linear-gradient(180deg, #111827 0%, #26344A 100%); }
+    .day-window::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 16px;
+      background: var(--accent-wash);
+      clip-path: polygon(0 75%, 18% 30%, 33% 65%, 52% 18%, 68% 70%, 84% 34%, 100% 72%, 100% 100%, 0 100%);
+    }
+    .celestial-orbit { position: absolute; inset: 0; transform-origin: 50% 126%; }
+    .celestial-body {
+      position: absolute;
+      left: 50%;
+      top: 7px;
+      width: 22px;
+      height: 22px;
+      transform: translateX(-50%);
+    }
+    .sun-body { border-radius: 50%; background: #F3B62F; box-shadow: 0 0 0 5px rgba(243, 182, 47, 0.18); }
+    .moon-body { border-radius: 50%; background: #E5E9F1; box-shadow: inset -6px -2px 0 #B8C1D1; }
+    .day-window-label {
+      position: absolute;
+      z-index: 2;
+      left: 10px;
+      bottom: 7px;
+      color: var(--ink-3);
+      font: 500 9px/1 var(--mono);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+
+    .top-grid, .lower-grid {
+      display: grid;
+      gap: 24px;
+    }
+    .top-grid { grid-template-columns: minmax(280px, 0.72fr) minmax(620px, 1.75fr); }
+    .lower-grid { grid-template-columns: minmax(600px, 1.7fr) minmax(300px, 0.72fr); }
+
+    .card {
+      position: relative;
+      border: 1px solid rgba(16, 122, 94, 0.14);
+      border-radius: 11px;
+      background: var(--paper);
+      box-shadow: var(--shadow);
+      opacity: 0;
+      transform: translateY(12px);
+      animation: reveal 0.62s ease forwards;
+      overflow: hidden;
+    }
+    .top-grid .card:nth-child(1) { animation-delay: 0.08s; }
+    .top-grid .card:nth-child(2) { animation-delay: 0.16s; }
+    .lower-grid .card:nth-child(1) { animation-delay: 0.24s; }
+    .lower-grid .card:nth-child(2) { animation-delay: 0.32s; }
+    .card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 24px 24px 0;
+    }
+    .data-label {
+      margin: 0;
+      color: var(--ink-3);
+      font: 500 10px/1.2 var(--mono);
+      letter-spacing: 0.15em;
+      text-transform: uppercase;
+    }
+    .card-title {
+      margin: 5px 0 0;
+      color: var(--ink);
+      font: 500 13px/1.45 var(--sans);
+    }
+    .status-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 10px;
+      border-radius: 7px;
+      color: var(--accent-deep);
+      background: var(--accent-wash);
+      font: 500 10px/1 var(--mono);
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-base); }
+    .status-chip.paused { color: var(--ink-3); background: var(--chip); }
+    .status-chip.paused .status-dot { background: var(--ink-3); }
+
+    .soc-card { min-height: 366px; padding-bottom: 24px; }
+    .soc-hero { padding: 24px; }
+    .hero-line { display: flex; align-items: baseline; gap: 8px; }
+    .hero-value {
+      color: var(--accent-base);
+      font: 500 52px/1.05 var(--mono);
+      letter-spacing: -0.02em;
+    }
+    .hero-unit { color: var(--ink-3); font: 500 13px/1 var(--mono); }
+    .soc-description { margin: 8px 0 0; color: var(--ink-2); }
+    .segment-meter {
+      display: flex;
+      gap: 3px;
+      margin-top: 24px;
+      height: 6px;
+    }
+    .segment-meter span {
+      flex: 1;
+      min-width: 0;
+      border-radius: 1.5px;
+      background: rgba(26, 19, 48, 0.16);
+      transition: background 0.38s ease;
+    }
+    .segment-meter span.lit { background: var(--accent-base); }
+    .segment-meter span.lit.high { background: var(--ink); }
+    .soc-stats {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      margin: 0 24px;
+      border-top: 1px solid var(--hairline-soft);
+    }
+    .soc-stat { padding: 16px 0; }
+    .soc-stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--hairline-soft); }
+    .metric-value { display: block; margin-top: 5px; color: var(--ink); font-size: 13px; font-weight: 500; }
+    .metric-unit { color: var(--ink-3); font-size: 10px; }
+
+    .system-card { min-height: 414px; }
+    .time-block { text-align: right; }
+    .time-value { display: block; color: var(--accent-base); font-size: 13px; font-weight: 500; }
+    .flow-map { position: relative; min-height: 340px; margin: 8px 24px 16px; }
+    .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+    .flow-underlay { fill: none; stroke: var(--hairline); stroke-width: 2; }
+    .flow-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 12; opacity: 0.12; }
+    .flow-line.pv { stroke: var(--series-pv); }
+    .flow-line.grid { stroke: var(--series-grid); }
+    .flow-line.battery { stroke: var(--series-battery); }
+    .flow-node {
+      position: absolute;
+      width: 132px;
+      padding: 16px;
+      border: 1.2px solid rgba(16, 122, 94, 0.14);
+      border-radius: 11px;
+      background: var(--panel-2);
+      text-align: center;
+      transition: opacity 0.38s ease, border-color 0.38s ease;
+    }
+    .flow-node.active { border-color: rgba(16, 122, 94, 0.45); }
+    .grid-node.active { border-color: rgba(31, 85, 201, 0.52); }
+    .battery-node.active { border-color: rgba(122, 52, 196, 0.52); }
+    .flow-node.dim { opacity: 0.38; }
+    .node-icon { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--accent-base); }
+    .grid-node .node-icon { color: var(--series-grid); }
+    .battery-node .node-icon { color: var(--series-battery); }
+    .node-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+    .node-label { color: var(--ink-3); font: 500 10px/1.2 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; }
+    .node-value { display: block; margin-top: 5px; color: var(--ink); font-size: 13px; font-weight: 500; }
+    .pv-node { left: 2%; top: 16%; }
+    .home-node { left: 50%; top: 16%; transform: translateX(-50%); }
+    .grid-node { right: 2%; top: 16%; }
+    .battery-node { left: 50%; bottom: 1%; transform: translateX(-50%); }
+
+    .chart-card { min-height: 382px; }
+    .chart-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
+    .legend-item { color: var(--ink-3); font: 500 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
+    .legend-item::before { content: ''; display: inline-block; width: 18px; height: 2px; margin: 0 7px 3px 0; background: var(--legend); }
+    .chart-wrap { padding: 8px 16px 16px; }
+    #powerChart { display: block; width: 100%; height: 282px; }
+    .chart-grid { stroke: var(--hairline); stroke-width: 1; }
+    .axis-text { fill: var(--ink-3); font: 400 10px/1 var(--mono); }
+    .chart-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
+    .chart-line.pv { stroke: var(--series-pv); }
+    .chart-line.grid { stroke: var(--series-grid); }
+    .chart-line.battery { stroke: var(--series-battery); }
+    .chart-line.temperature { stroke: var(--series-temperature); stroke-width: 2.2; stroke-dasharray: 2 5; }
+    .chart-line.soc { stroke: var(--series-soc); stroke-width: 2.2; stroke-dasharray: 7 6; }
+    .chart-endpoint { stroke: var(--paper); stroke-width: 2; }
+
+    .consumers-card { min-height: 382px; }
+    .consumer-list { display: grid; gap: 8px; padding: 16px 24px 24px; }
+    .consumer-row {
+      width: 100%;
+      min-height: 62px;
+      display: grid;
+      grid-template-columns: 36px 1fr auto 36px;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      border: 1.2px solid rgba(16, 122, 94, 0.14);
+      border-radius: 11px;
+      color: var(--ink-2);
+      background: var(--panel-2);
+      text-align: left;
+      cursor: pointer;
+      opacity: 0.42;
+      transition: opacity 0.38s ease, border-color 0.38s ease, background 0.38s ease;
+    }
+    .consumer-row.active { opacity: 1; border-color: rgba(16, 122, 94, 0.45); background: var(--accent-wash); }
+    .consumer-icon { width: 28px; height: 28px; color: var(--accent-base); }
+    .consumer-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
+    .consumer-name { display: block; color: var(--ink); font-weight: 500; }
+    .consumer-detail { display: block; color: var(--ink-3); font-size: 10px; }
+    .consumer-power { color: var(--ink); font-size: 11px; }
+    .toggle {
+      position: relative;
+      width: 34px;
+      height: 20px;
+      border-radius: 10px;
+      background: rgba(26, 19, 48, 0.16);
+      transition: background 0.38s ease;
+    }
+    .toggle::after {
+      content: '';
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      left: 3px;
+      top: 3px;
+      border-radius: 50%;
+      background: var(--paper);
+      transition: transform 0.38s ease;
+    }
+    .consumer-row.active .toggle { background: var(--accent-base); }
+
+    .temperature-control {
+      margin: 0 24px 16px;
+      padding: 16px;
+      border: 1.2px solid rgba(176, 48, 110, 0.22);
+      border-radius: 11px;
+      background: #F5EDF5;
+    }
+    :root[data-theme="dark"] .temperature-control { background: #2B2030; }
+    .temperature-control-head {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 16px;
+      margin-bottom: 12px;
+    }
+    .temperature-reading { color: var(--series-temperature); font: 500 13px/1 var(--mono); }
+    .temperature-slider {
+      width: 100%;
+      height: 6px;
+      margin: 0;
+      accent-color: var(--series-temperature);
+      cursor: pointer;
+    }
+    .temperature-scale {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 7px;
+      color: var(--ink-3);
+      font: 400 10px/1 var(--mono);
+    }
+
+    .consumer-row.active .toggle::after { transform: translateX(14px); }
+    .consumer-note { margin: 0; padding: 0 24px 24px; color: var(--ink-3); font-size: 10px; }
+
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      margin-top: auto;
+      padding-top: 16px;
+      border-top: 1px solid var(--hairline);
+      color: var(--ink-3);
+      font: 400 10px/1.4 var(--mono);
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      opacity: 0;
+      animation: reveal 0.62s 0.4s ease forwards;
+    }
+    .footer-separator { margin: 0 10px; color: rgba(16, 122, 94, 0.55); }
+
+    @keyframes reveal { to { opacity: 1; transform: translateY(0); } }
+    @media (max-width: 1060px) {
+      .top-grid, .lower-grid { grid-template-columns: 1fr; }
+      .dashboard-header { align-items: flex-start; }
+      .day-window { width: 168px; }
+    }
+    @media (max-width: 680px) {
+      .dashboard { padding: 16px; gap: 16px; }
+      .dashboard-header { flex-direction: column; }
+      h1 { font-size: 28px; }
+      .header-actions { justify-content: flex-start; }
+      .day-window { width: min(100%, 220px); }
+      .flow-map { min-height: 480px; margin-inline: 8px; }
+      .flow-svg { display: none; }
+      .flow-node { width: 44%; }
+      .pv-node { left: 2%; top: 4%; }
+      .grid-node { right: 2%; top: 4%; }
+      .home-node { left: 50%; top: 38%; }
+      .battery-node { left: 50%; bottom: 2%; }
+      .chart-legend { justify-content: flex-start; }
+      .consumer-row { grid-template-columns: 32px 1fr auto; }
+      .consumer-power { display: none; }
+      .footer { align-items: flex-start; flex-direction: column; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *, *::before, *::after { animation: none !important; transition: none !important; }
+      .dashboard-header, .card, .footer { opacity: 1; transform: none; }
+      .flow-line { stroke-dasharray: none; }
+    }
+  </style>
+</head>
+<body>
+  <main class="dashboard">
+    <header class="dashboard-header">
+      <div>
+        <p class="kicker">04 · Home energy</p>
+        <h1>Smart home <span>power dynamics</span></h1>
+      </div>
+      <div class="header-actions" aria-label="Simulation controls">
+        <div id="dayWindow" class="day-window" role="img" aria-label="Daytime window showing the sun at 07:00">
+          <div id="sunOrbit" class="celestial-orbit"><span class="celestial-body sun-body"></span></div>
+          <div id="moonOrbit" class="celestial-orbit"><span class="celestial-body moon-body"></span></div>
+          <span id="dayWindowLabel" class="day-window-label">Day · 07:00</span>
+        </div>
+        <div class="speed-group" aria-label="Simulation speed">
+          <button class="speed-button" data-speed="0.083333" type="button">1×</button>
+          <button class="speed-button active" data-speed="0.333333" type="button">4×</button>
+          <button class="speed-button" data-speed="1" type="button">12×</button>
+        </div>
+        <button id="runButton" class="control-button primary" type="button">Pause</button>
+        <button id="resetButton" class="control-button" type="button">Reset</button>
+      </div>
+    </header>
+
+    <section class="top-grid" aria-label="Current smart-home state">
+      <article class="card soc-card">
+        <div class="card-header">
+          <div>
+            <p class="data-label">Battery state</p>
+            <p class="card-title">Stored energy reserve</p>
+          </div>
+          <span id="batteryMode" class="status-chip"><span class="status-dot"></span>Discharging</span>
+        </div>
+        <div class="soc-hero">
+          <div class="hero-line">
+            <span id="socHero" class="hero-value">60.0</span>
+            <span class="hero-unit">%</span>
+          </div>
+          <p class="soc-description">Usable window <span class="mono">10–95%</span> · capacity <span class="mono">15 kWh</span></p>
+          <div id="socMeter" class="segment-meter" role="meter" aria-label="Battery state of charge" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60">
+            <span></span><span></span><span></span><span></span><span></span>
+            <span></span><span></span><span></span><span></span><span></span>
+          </div>
+        </div>
+        <div class="soc-stats">
+          <div class="soc-stat">
+            <p class="data-label">Battery power</p>
+            <span id="batteryMetric" class="metric-value">0.00 <span class="metric-unit">kW</span></span>
+          </div>
+          <div class="soc-stat">
+            <p class="data-label">DC bus</p>
+            <span id="busMetric" class="metric-value">380 <span class="metric-unit">V</span></span>
+          </div>
+          <div class="soc-stat">
+            <p class="data-label">Energy stored</p>
+            <span id="energyMetric" class="metric-value">9.00 <span class="metric-unit">kWh</span></span>
+          </div>
+          <div class="soc-stat">
+            <p class="data-label">Grid share</p>
+            <span id="gridShareMetric" class="metric-value">0.0 <span class="metric-unit">%</span></span>
+          </div>
+        </div>
+      </article>
+
+      <article class="card system-card">
+        <div class="card-header">
+          <div>
+            <p class="data-label">Live energy flow</p>
+            <p class="card-title">PV serves demand first; battery and grid balance the bus</p>
+          </div>
+          <div class="time-block">
+            <span id="simStatus" class="status-chip"><span class="status-dot"></span>Running</span>
+            <span id="timeValue" class="time-value">07:00</span>
+          </div>
+        </div>
+
+        <div class="flow-map" aria-label="Animated power flow diagram">
+          <svg class="flow-svg" viewBox="0 0 800 340" preserveAspectRatio="none" aria-hidden="true">
+            <defs>
+              <marker id="arrowTeal" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L8,4 L0,8 Z" fill="#107A5E"></path></marker>
+              <marker id="arrowLift" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L8,4 L0,8 Z" fill="#1F55C9"></path></marker>
+              <marker id="arrowInk" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L8,4 L0,8 Z" fill="#7A34C4"></path></marker>
+            </defs>
+            <!-- Stop each path in the clear gap before a node so its arrowhead remains visible. -->
+            <path class="flow-underlay" d="M136 92 L332 92"></path>
+            <path class="flow-underlay" d="M664 92 L468 92"></path>
+            <path class="flow-underlay" d="M400 250 L400 160"></path>
+            <path id="pvFlow" class="flow-line pv" d="M136 92 L332 92" marker-end="url(#arrowTeal)"></path>
+            <path id="gridFlow" class="flow-line grid" d="M664 92 L468 92" marker-end="url(#arrowLift)"></path>
+            <path id="batteryDischargeFlow" class="flow-line battery" d="M400 250 L400 160" marker-end="url(#arrowInk)"></path>
+            <path id="batteryChargeFlow" class="flow-line battery" d="M400 160 L400 250" marker-end="url(#arrowInk)"></path>
+          </svg>
+
+          <div id="pvNode" class="flow-node pv-node active">
+            <div class="node-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><circle cx="25" cy="7" r="3"></circle><path d="M25 1v2M25 11v2M19 7h2M29 7h2M21 3l1.5 1.5M28.5 10.5L30 12"></path><path d="M5 13h17l3 12H2zM7 17h16M5 21h19M11 13l-2 12M17 13l2 12M8 29h12"></path></svg></div>
+            <span class="node-label">PV used</span>
+            <span id="pvNodeValue" class="node-value">1.29 kW</span>
+          </div>
+          <div id="homeNode" class="flow-node home-node active">
+            <div class="node-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M3 15L16 4l13 11"></path><path d="M6 13v15h20V13M13 28v-9h6v9"></path></svg></div>
+            <span class="node-label">Home load</span>
+            <span id="homeNodeValue" class="node-value">1.55 kW</span>
+          </div>
+          <div id="gridNode" class="flow-node grid-node dim">
+            <div class="node-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M16 3L7 29M16 3l9 26M10 12h12M8 19h16M5 29h22M12 7h8"></path></svg></div>
+            <span class="node-label">Grid import</span>
+            <span id="gridNodeValue" class="node-value">0.00 kW</span>
+          </div>
+          <div id="batteryNode" class="flow-node battery-node active">
+            <div class="node-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><rect x="5" y="8" width="22" height="18" rx="2"></rect><path d="M12 5h8v3M16 12l-3 6h4l-2 5 5-7h-4z"></path></svg></div>
+            <span class="node-label">Battery</span>
+            <span id="batteryNodeValue" class="node-value">0.26 kW out</span>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <section class="lower-grid" aria-label="History and consumer controls">
+      <article class="card chart-card">
+        <div class="card-header">
+          <div>
+            <p class="data-label">Rolling telemetry</p>
+            <p class="card-title">Power, battery state of charge and indoor temperature</p>
+          </div>
+          <div class="chart-legend" aria-label="Chart legend">
+            <span class="legend-item" style="--legend:#107A5E">PV</span>
+            <span class="legend-item" style="--legend:#1F55C9">Grid</span>
+            <span class="legend-item" style="--legend:#7A34C4">Battery</span>
+            <span class="legend-item" style="--legend:#B0306E">Temperature</span>
+            <span class="legend-item" style="--legend:#1A1330">SoC</span>
+          </div>
+        </div>
+        <div class="chart-wrap">
+          <svg id="powerChart" viewBox="0 0 900 282" role="img" aria-label="Live chart of PV, grid and battery power, battery state of charge, and indoor temperature">
+            <g aria-hidden="true">
+              <line class="chart-grid" x1="58" y1="24" x2="842" y2="24"></line><line class="chart-grid" x1="58" y1="73" x2="842" y2="73"></line><line class="chart-grid" x1="58" y1="122" x2="842" y2="122"></line><line class="chart-grid" x1="58" y1="171" x2="842" y2="171"></line><line class="chart-grid" x1="58" y1="220" x2="842" y2="220"></line>
+              <text class="axis-text" x="50" y="28" text-anchor="end">8</text><text class="axis-text" x="50" y="77" text-anchor="end">6</text><text class="axis-text" x="50" y="126" text-anchor="end">4</text><text class="axis-text" x="50" y="175" text-anchor="end">2</text><text class="axis-text" x="50" y="224" text-anchor="end">0</text>
+              <text class="axis-text" x="18" y="16">kW</text><text class="axis-text" x="850" y="28">100% · 30°C</text><text class="axis-text" x="850" y="126">50% · 20°C</text><text class="axis-text" x="850" y="224">0% · 10°C</text>
+              <text class="axis-text" x="58" y="250">ROLLING WINDOW</text><text class="axis-text" x="842" y="250" text-anchor="end">NOW</text>
+            </g>
+            <path id="pvPath" class="chart-line pv" d=""></path><path id="gridPath" class="chart-line grid" d=""></path><path id="batteryPath" class="chart-line battery" d=""></path><path id="temperaturePath" class="chart-line temperature" d=""></path><path id="socPath" class="chart-line soc" d=""></path>
+            <circle id="pvDot" class="chart-endpoint" r="4" fill="#107A5E" cx="58" cy="220"></circle><circle id="gridDot" class="chart-endpoint" r="4" fill="#1F55C9" cx="58" cy="220"></circle><circle id="batteryDot" class="chart-endpoint" r="4" fill="#7A34C4" cx="58" cy="220"></circle><circle id="temperatureDot" class="chart-endpoint" r="4" fill="#B0306E" cx="58" cy="122"></circle><circle id="socDot" class="chart-endpoint" r="4" fill="#1A1330" cx="58" cy="102"></circle>
+          </svg>
+        </div>
+      </article>
+
+      <aside class="card consumers-card">
+        <div class="card-header">
+          <div><p class="data-label">Runtime control</p><p class="card-title">Activate household consumers</p></div>
+          <span id="activeCount" class="status-chip"><span class="status-dot"></span>2 active</span>
+        </div>
+        <div class="temperature-control">
+          <div class="temperature-control-head">
+            <div>
+              <p class="data-label">Temperature setpoint</p>
+              <span id="indoorTemperature" class="temperature-reading">21.0 °C indoor</span>
+            </div>
+            <span id="temperatureSetpoint" class="temperature-reading">21.0 °C</span>
+          </div>
+          <input id="temperatureSlider" class="temperature-slider" type="range" min="17" max="25" step="0.5" value="21" aria-label="Indoor temperature setpoint">
+          <div class="temperature-scale"><span>17 °C</span><span>25 °C</span></div>
+        </div>
+
+        <div class="consumer-list">
+          <button class="consumer-row active" data-consumer="lighting" type="button" role="switch" aria-checked="true">
+            <span class="consumer-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M10 20c-2-2-3-4-3-7a9 9 0 0118 0c0 3-1 5-3 7-1 1-2 2-2 4h-8c0-2-1-3-2-4zM12 27h8M14 30h4"></path></svg></span>
+            <span><span class="consumer-name">Lighting</span><span class="consumer-detail">Whole home</span></span><span class="consumer-power">0.35 kW</span><span class="toggle" aria-hidden="true"></span>
+          </button>
+          <button class="consumer-row active" data-consumer="hvac" type="button" role="switch" aria-checked="true">
+            <span class="consumer-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="3"></circle><path d="M16 13c-1-8 4-10 6-8 2 3-1 7-6 8zM19 17c8-1 10 4 8 6-3 2-7-1-8-6zM13 18c1 8-4 10-6 8-2-3 1-7 6-8zM14 13C6 14 4 9 6 7c3-2 7 1 8 6z"></path></svg></span>
+            <span><span class="consumer-name">HVAC</span><span id="hvacDetail" class="consumer-detail">Heat pump · standby</span></span><span id="hvacPower" class="consumer-power">0.00 kW</span><span class="toggle" aria-hidden="true"></span>
+          </button>
+          <button class="consumer-row" data-consumer="kitchen" type="button" role="switch" aria-checked="false">
+            <span class="consumer-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M5 12h22v15H5zM8 8h16v4M10 5h12v3M10 17h12M10 22h4M18 22h4"></path></svg></span>
+            <span><span class="consumer-name">Kitchen</span><span class="consumer-detail">Cooking cycle</span></span><span class="consumer-power">1.80 kW</span><span class="toggle" aria-hidden="true"></span>
+          </button>
+          <button class="consumer-row" data-consumer="ev" type="button" role="switch" aria-checked="false">
+            <span class="consumer-icon" aria-hidden="true"><svg viewBox="0 0 32 32"><path d="M5 18l3-7h16l3 7v8H5zM9 26v3M23 26v3M9 20h3M20 20h3M13 15h6M16 5v5M13 7l3-3 3 3"></path></svg></span>
+            <span><span class="consumer-name">EV charger</span><span class="consumer-detail">Garage circuit</span></span><span class="consumer-power">3.30 kW</span><span class="toggle" aria-hidden="true"></span>
+          </button>
+        </div>
+        <p class="consumer-note">Grid import is the residual demand after PV and battery dispatch. Consumer changes are applied immediately, including while paused.</p>
+      </aside>
+    </section>
+
+    <footer class="footer"><span>Competition<span class="footer-separator">|</span>MyComponents</span><span>JuliaCon 2026</span></footer>
+  </main>
+
+  <script>
+    (() => {
+      'use strict';
+
+      const config = {
+        pvRated: 5.0,
+        batteryCapacity: 15.0,
+        batteryPowerLimit: 3.5,
+        chargeEfficiency: 0.95,
+        dischargeEfficiency: 0.95,
+        minSoc: 10,
+        maxSoc: 95,
+        initialSoc: 60,
+        initialHour: 7,
+        initialTemperature: 21,
+        initialSetpoint: 21,
+        ambientTemperature: 12,
+        thermalTimeConstantHours: 5,
+        hvacThermalRatePerHour: 3.2,
+        consumerPower: { lighting: 0.35, hvac: 1.20, kitchen: 1.80, ev: 3.30 }
+      };
+
+      const state = {
+        running: true,
+        speed: 0.333333,
+        hour: config.initialHour,
+        day: 1,
+        soc: config.initialSoc,
+        temperature: config.initialTemperature,
+        temperatureSetpoint: config.initialSetpoint,
+        active: { lighting: true, hvac: true, kitchen: false, ev: false },
+        targets: { pv: 0, pvAvailable: 0, load: 0, grid: 0, battery: 0, bus: 380 },
+        display: { pv: 0, load: 0, grid: 0, battery: 0, soc: config.initialSoc, temperature: config.initialTemperature, bus: 380 },
+        history: [],
+        lastSampleAbsoluteHour: -Infinity,
+        flowPhase: 0,
+        lastFrame: performance.now()
+      };
+
+      const el = {
+        runButton: document.getElementById('runButton'), resetButton: document.getElementById('resetButton'), speedButtons: [...document.querySelectorAll('.speed-button')], consumerRows: [...document.querySelectorAll('.consumer-row')], dayWindow: document.getElementById('dayWindow'), dayWindowLabel: document.getElementById('dayWindowLabel'), sunOrbit: document.getElementById('sunOrbit'), moonOrbit: document.getElementById('moonOrbit'),
+        socHero: document.getElementById('socHero'), socMeter: document.getElementById('socMeter'), meterSegments: [...document.querySelectorAll('#socMeter span')], batteryMode: document.getElementById('batteryMode'), batteryMetric: document.getElementById('batteryMetric'), busMetric: document.getElementById('busMetric'), energyMetric: document.getElementById('energyMetric'), gridShareMetric: document.getElementById('gridShareMetric'), simStatus: document.getElementById('simStatus'), timeValue: document.getElementById('timeValue'), activeCount: document.getElementById('activeCount'), temperatureSlider: document.getElementById('temperatureSlider'), temperatureSetpoint: document.getElementById('temperatureSetpoint'), indoorTemperature: document.getElementById('indoorTemperature'), hvacDetail: document.getElementById('hvacDetail'), hvacPower: document.getElementById('hvacPower'),
+        pvNode: document.getElementById('pvNode'), gridNode: document.getElementById('gridNode'), batteryNode: document.getElementById('batteryNode'), pvNodeValue: document.getElementById('pvNodeValue'), homeNodeValue: document.getElementById('homeNodeValue'), gridNodeValue: document.getElementById('gridNodeValue'), batteryNodeValue: document.getElementById('batteryNodeValue'),
+        pvFlow: document.getElementById('pvFlow'), gridFlow: document.getElementById('gridFlow'), batteryDischargeFlow: document.getElementById('batteryDischargeFlow'), batteryChargeFlow: document.getElementById('batteryChargeFlow'),
+        pvPath: document.getElementById('pvPath'), gridPath: document.getElementById('gridPath'), batteryPath: document.getElementById('batteryPath'), temperaturePath: document.getElementById('temperaturePath'), socPath: document.getElementById('socPath'), pvDot: document.getElementById('pvDot'), gridDot: document.getElementById('gridDot'), batteryDot: document.getElementById('batteryDot'), temperatureDot: document.getElementById('temperatureDot'), socDot: document.getElementById('socDot')
+      };
+
+      const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+      const absoluteHour = () => (state.day - 1) * 24 + state.hour;
+
+      function pvAvailableAt(hour) {
+        if (hour <= 6 || hour >= 18) return 0;
+        return config.pvRated * Math.sin(Math.PI * (hour - 6) / 12);
+      }
+
+      function thermostatDemand() {
+        const error = state.temperatureSetpoint - state.temperature;
+        if (!state.active.hvac || Math.abs(error) <= 0.15) return 0;
+        return clamp(Math.abs(error) / 2, 0.25, 1);
+      }
+
+      function activeLoad() {
+        return Object.entries(state.active).reduce((sum, [id, active]) => {
+          if (!active) return sum;
+          if (id === 'hvac') return sum + config.consumerPower.hvac * thermostatDemand();
+          return sum + config.consumerPower[id];
+        }, 0);
+      }
+
+      function calculateDispatch(dtHours, updateEnergy) {
+        const load = activeLoad();
+        const pvAvailable = Math.max(0, pvAvailableAt(state.hour));
+        const directPv = Math.min(load, pvAvailable);
+        const surplus = Math.max(0, pvAvailable - load);
+        const deficit = Math.max(0, load - pvAvailable);
+        let charge = 0;
+        let discharge = 0;
+
+        if (surplus > 0 && state.soc < config.maxSoc) {
+          charge = Math.min(surplus, config.batteryPowerLimit);
+          if (dtHours > 0) {
+            const roomKWh = (config.maxSoc - state.soc) / 100 * config.batteryCapacity;
+            charge = Math.min(charge, roomKWh / (config.chargeEfficiency * dtHours));
+          }
+        }
+        if (deficit > 0 && state.soc > config.minSoc) {
+          discharge = Math.min(deficit, config.batteryPowerLimit);
+          if (dtHours > 0) {
+            const availableKWh = (state.soc - config.minSoc) / 100 * config.batteryCapacity;
+            discharge = Math.min(discharge, availableKWh * config.dischargeEfficiency / dtHours);
+          }
+        }
+
+        if (updateEnergy && dtHours > 0) {
+          const deltaKWh = charge * config.chargeEfficiency * dtHours - discharge / config.dischargeEfficiency * dtHours;
+          state.soc = clamp(state.soc + deltaKWh / config.batteryCapacity * 100, config.minSoc, config.maxSoc);
+        }
+
+        const grid = Math.max(0, deficit - discharge);
+        const pvUsed = directPv + charge;
+        const battery = discharge - charge;
+        const currentA = battery === 0 ? 0 : Math.abs(battery * 1000 / 380);
+        const openCircuit = 350 + 50 * state.soc / 100;
+        const bus = clamp(openCircuit - Math.sign(battery) * 0.25 * currentA, 330, 430);
+        state.targets = { pv: pvUsed, pvAvailable, load, grid, battery, bus };
+      }
+
+      function advanceSimulation(dtHours) {
+        if (dtHours <= 0) return;
+        calculateDispatch(dtHours, true);
+        const ambientDrift = (config.ambientTemperature - state.temperature) / config.thermalTimeConstantHours;
+        const temperatureError = state.temperatureSetpoint - state.temperature;
+        const hvacDemand = thermostatDemand();
+        const hvacAction = hvacDemand > 0 ? Math.sign(temperatureError) * config.hvacThermalRatePerHour * hvacDemand : 0;
+        state.temperature = clamp(state.temperature + (ambientDrift + hvacAction) * dtHours, 10, 30);
+        state.hour += dtHours;
+        while (state.hour >= 24) { state.hour -= 24; state.day += 1; }
+        calculateDispatch(0, false);
+      }
+
+      function sampleHistory(force = false) {
+        const now = absoluteHour();
+        if (!force && now - state.lastSampleAbsoluteHour < 0.05) return;
+        state.lastSampleAbsoluteHour = now;
+        state.history.push({ pv: state.targets.pv, grid: state.targets.grid, battery: Math.abs(state.targets.battery), temperature: state.temperature, soc: state.soc });
+        if (state.history.length > 120) state.history.shift();
+        drawChart();
+      }
+
+      function pathFor(key, scale) {
+        const left = 58, right = 842, top = 24, bottom = 220, count = state.history.length;
+        if (!count) return '';
+        return state.history.map((point, index) => {
+          const x = count === 1 ? right : left + index / (count - 1) * (right - left);
+          const y = bottom - clamp(point[key] / scale, 0, 1) * (bottom - top);
+          return `${index ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`;
+        }).join(' ');
+      }
+
+      function setEndpoint(circle, key, scale) {
+        const point = state.history[state.history.length - 1];
+        if (!point) return;
+        const y = 220 - clamp(point[key] / scale, 0, 1) * 196;
+        circle.setAttribute('cx', '842'); circle.setAttribute('cy', y.toFixed(1));
+      }
+
+      function temperaturePath() {
+        const left = 58, right = 842, top = 24, bottom = 220, count = state.history.length;
+        if (!count) return '';
+        return state.history.map((point, index) => {
+          const x = count === 1 ? right : left + index / (count - 1) * (right - left);
+          const y = bottom - clamp((point.temperature - 10) / 20, 0, 1) * (bottom - top);
+          return `${index ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`;
+        }).join(' ');
+      }
+
+      function setTemperatureEndpoint() {
+        const point = state.history[state.history.length - 1];
+        if (!point) return;
+        const y = 220 - clamp((point.temperature - 10) / 20, 0, 1) * 196;
+        el.temperatureDot.setAttribute('cx', '842'); el.temperatureDot.setAttribute('cy', y.toFixed(1));
+      }
+
+      function drawChart() {
+        el.pvPath.setAttribute('d', pathFor('pv', 8)); el.gridPath.setAttribute('d', pathFor('grid', 8)); el.batteryPath.setAttribute('d', pathFor('battery', 8)); el.temperaturePath.setAttribute('d', temperaturePath()); el.socPath.setAttribute('d', pathFor('soc', 100));
+        setEndpoint(el.pvDot, 'pv', 8); setEndpoint(el.gridDot, 'grid', 8); setEndpoint(el.batteryDot, 'battery', 8); setTemperatureEndpoint(); setEndpoint(el.socDot, 'soc', 100);
+      }
+
+      function formatTime(hour) {
+        const roundedMinutes = Math.floor(hour * 60) % (24 * 60);
+        return `${Math.floor(roundedMinutes / 60).toString().padStart(2, '0')}:${(roundedMinutes % 60).toString().padStart(2, '0')}`;
+      }
+
+      function smoothDisplays() {
+        const damping = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 1 : 0.16;
+        ['pv', 'load', 'grid', 'battery', 'bus'].forEach(key => { state.display[key] += (state.targets[key] - state.display[key]) * damping; });
+        state.display.soc += (state.soc - state.display.soc) * damping;
+        state.display.temperature += (state.temperature - state.display.temperature) * damping;
+      }
+
+      function setFlow(path, power, phase, direction = 1) {
+        const magnitude = Math.abs(power);
+        path.style.opacity = magnitude < 0.015 ? '0.12' : String(0.28 + Math.min(1, magnitude / 5) * 0.72);
+        path.style.strokeDashoffset = `${direction * phase}`;
+      }
+
+      function updateFlowAnimation(dtSeconds) {
+        const totalFlow = state.display.pv + state.display.grid + Math.abs(state.display.battery);
+        if (state.running && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) state.flowPhase = (state.flowPhase - dtSeconds * (18 + 5 * totalFlow)) % 1000;
+        setFlow(el.pvFlow, state.display.pv, state.flowPhase); setFlow(el.gridFlow, state.display.grid, state.flowPhase);
+        const discharging = Math.max(0, state.display.battery), charging = Math.max(0, -state.display.battery);
+        setFlow(el.batteryDischargeFlow, discharging, state.flowPhase); setFlow(el.batteryChargeFlow, charging, state.flowPhase);
+        el.batteryDischargeFlow.style.display = discharging >= charging ? '' : 'none'; el.batteryChargeFlow.style.display = charging > discharging ? '' : 'none';
+      }
+
+      function updateDayCycle() {
+        const hour = state.hour;
+        const isDay = hour >= 6 && hour < 18;
+        document.documentElement.dataset.theme = isDay ? 'light' : 'dark';
+        const sunAngle = ((hour - 6) / 12) * 180 - 90;
+        const moonHour = hour < 6 ? hour + 24 : hour;
+        const moonAngle = ((moonHour - 18) / 12) * 180 - 90;
+        el.sunOrbit.style.transform = `rotate(${sunAngle}deg)`;
+        el.moonOrbit.style.transform = `rotate(${moonAngle}deg)`;
+        el.dayWindowLabel.textContent = `${isDay ? 'Day' : 'Night'} · ${formatTime(hour)}`;
+        el.dayWindow.setAttribute('aria-label', `${isDay ? 'Daytime' : 'Nighttime'} window at ${formatTime(hour)}`);
+      }
+
+      function updateMeter() {
+        const litCount = Math.round(state.display.soc / 10);
+        el.meterSegments.forEach((segment, index) => { const lit = index < litCount; segment.classList.toggle('lit', lit); segment.classList.toggle('high', lit && index >= 7); });
+        el.socMeter.setAttribute('aria-valuenow', state.display.soc.toFixed(1));
+      }
+
+      function updateUI() {
+        const d = state.display;
+        const batteryDirection = d.battery > 0.02 ? 'Discharging' : d.battery < -0.02 ? 'Charging' : 'Standby';
+        const batterySuffix = d.battery > 0.02 ? 'out' : d.battery < -0.02 ? 'in' : 'idle';
+        const gridShare = d.load > 0.01 ? d.grid / d.load * 100 : 0;
+        const activeCount = Object.values(state.active).filter(Boolean).length;
+
+        el.socHero.textContent = d.soc.toFixed(1);
+        el.batteryMetric.innerHTML = `${Math.abs(d.battery).toFixed(2)} <span class="metric-unit">kW ${batterySuffix}</span>`;
+        el.busMetric.innerHTML = `${d.bus.toFixed(0)} <span class="metric-unit">V</span>`;
+        el.energyMetric.innerHTML = `${(d.soc / 100 * config.batteryCapacity).toFixed(2)} <span class="metric-unit">kWh</span>`;
+        el.gridShareMetric.innerHTML = `${gridShare.toFixed(1)} <span class="metric-unit">%</span>`;
+        el.batteryMode.innerHTML = `<span class="status-dot"></span>${batteryDirection}`;
+        el.timeValue.textContent = `D${state.day} · ${formatTime(state.hour)}`;
+        el.pvNodeValue.textContent = `${d.pv.toFixed(2)} kW`; el.homeNodeValue.textContent = `${d.load.toFixed(2)} kW`; el.gridNodeValue.textContent = `${d.grid.toFixed(2)} kW`; el.batteryNodeValue.textContent = `${Math.abs(d.battery).toFixed(2)} kW ${batterySuffix}`;
+        el.activeCount.innerHTML = `<span class="status-dot"></span>${activeCount} active`;
+        el.temperatureSetpoint.textContent = `${state.temperatureSetpoint.toFixed(1)} °C`;
+        el.indoorTemperature.textContent = `${d.temperature.toFixed(1)} °C indoor`;
+        const hvacDemand = thermostatDemand();
+        const hvacMode = !state.active.hvac ? 'off' : hvacDemand === 0 ? 'standby' : state.temperatureSetpoint > state.temperature ? 'heating' : 'cooling';
+        el.hvacDetail.textContent = `Heat pump · ${hvacMode}`;
+        el.hvacPower.textContent = `${(config.consumerPower.hvac * hvacDemand).toFixed(2)} kW`;
+
+        el.pvNode.classList.toggle('dim', d.pv < 0.02); el.gridNode.classList.toggle('dim', d.grid < 0.02); el.batteryNode.classList.toggle('dim', Math.abs(d.battery) < 0.02);
+        el.pvNode.classList.toggle('active', d.pv >= 0.02); el.gridNode.classList.toggle('active', d.grid >= 0.02); el.batteryNode.classList.toggle('active', Math.abs(d.battery) >= 0.02);
+        updateMeter();
+        updateDayCycle();
+      }
+
+      function setRunning(running) {
+        state.running = running;
+        el.runButton.textContent = running ? 'Pause' : 'Run'; el.runButton.classList.toggle('primary', running); el.simStatus.classList.toggle('paused', !running);
+        el.simStatus.innerHTML = `<span class="status-dot"></span>${running ? 'Running' : 'Paused'}`;
+      }
+
+      function resetSimulation() {
+        state.hour = config.initialHour; state.day = 1; state.soc = config.initialSoc; state.temperature = config.initialTemperature; state.temperatureSetpoint = config.initialSetpoint; state.display.soc = config.initialSoc; state.display.temperature = config.initialTemperature; state.history = []; state.lastSampleAbsoluteHour = -Infinity; state.flowPhase = 0;
+        el.temperatureSlider.value = String(config.initialSetpoint);
+        calculateDispatch(0, false); Object.assign(state.display, state.targets); state.display.soc = state.soc; state.display.temperature = state.temperature; sampleHistory(true); updateUI();
+      }
+
+      el.runButton.addEventListener('click', () => setRunning(!state.running));
+      el.resetButton.addEventListener('click', resetSimulation);
+      el.temperatureSlider.addEventListener('input', () => {
+        state.temperatureSetpoint = Number(el.temperatureSlider.value);
+        sampleHistory(true);
+        updateUI();
+      });
+
+      el.speedButtons.forEach(button => button.addEventListener('click', () => { state.speed = Number(button.dataset.speed); el.speedButtons.forEach(item => item.classList.toggle('active', item === button)); }));
+      el.consumerRows.forEach(row => row.addEventListener('click', () => {
+        const id = row.dataset.consumer; state.active[id] = !state.active[id]; row.classList.toggle('active', state.active[id]); row.setAttribute('aria-checked', String(state.active[id]));
+        calculateDispatch(0, false); sampleHistory(true); updateUI();
+      }));
+
+      function frame(now) {
+        const dtSeconds = Math.min(0.1, Math.max(0, (now - state.lastFrame) / 1000)); state.lastFrame = now;
+        if (state.running) { advanceSimulation(dtSeconds * state.speed); sampleHistory(false); } else calculateDispatch(0, false);
+        smoothDisplays(); updateFlowAnimation(dtSeconds); updateUI(); requestAnimationFrame(frame);
+      }
+
+      calculateDispatch(0, false); Object.assign(state.display, state.targets); state.display.soc = state.soc; state.display.temperature = state.temperature; sampleHistory(true); updateUI(); requestAnimationFrame(frame);
+    })();
+  </script>
+</body>
+</html>
