diff --git a/app.py b/app.py
index fb3bb8c..d7519a5 100644
--- a/app.py
+++ b/app.py
@@ -1,197 +1,263 @@
+"""
+Flask web interface for the toroidal transformer designer + simulator.
+
+Routes
+------
+GET  /                 → main page
+POST /api/design       → run design_transformer(), return winding info + drawing PNG (base64)
+POST /api/sweep        → run sweep_operating_points(), return JSON dataset
+"""
+
+import base64
+import math
+import os
+import tempfile
+
 from flask import Flask, render_template, request, jsonify
-from model import TransformerModel
-from optimizer import TransformerOptimizer
+
+from designer import ToroidCore, WindingSpec, design_transformer
+from sim_toroid import (
+    ToroidSimulator, SimConstraints,
+    sweep_operating_points, SweepEntry,
+)
+from draw_toroid import draw_toroid
 
 app = Flask(__name__)
 
-# Default transformer configuration
-# You can modify this to match your actual transformer
-def get_default_transformer():
 
-    primary_taps = [0, 75, 75]
-    secondary_taps = [0, 100, 150, 150, 150]
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
 
-    # Resistance per turn for each segment (example values in ohms/turn)
-    # These would be calculated based on wire gauge, length per turn, etc.
-    primary_Rp_per_turn = [
-        0.01,
-        0.01,
-    ]
-
-    secondary_Rs_per_turn = [
-        0.004,  
-        0.024,  
-        0.024,  
-        0.024,
-    ]
-
-
-
-    tf = TransformerModel(
-        Ae_mm2=354.0,
-        Ve_mm3=43900.0,
-        use_core_loss_model=True,
-        Np_total=150,
-        Ns_total=250,
-        primary_taps=primary_taps,
-        secondary_taps=secondary_taps,
-        primary_Rp_per_turn=primary_Rp_per_turn,
-        secondary_Rs_per_turn=secondary_Rs_per_turn,
+def _parse_core(data: dict) -> ToroidCore:
+    """Build ToroidCore from request dict."""
+    Ae = data.get("Ae_mm2")
+    Ve = data.get("Ve_mm3")
+    return ToroidCore(
+        ID_mm=float(data["ID_mm"]),
+        OD_mm=float(data["OD_mm"]),
+        height_mm=float(data["height_mm"]),
+        Ae_mm2=float(Ae) if Ae not in (None, "") else None,
+        Ve_mm3=float(Ve) if Ve not in (None, "") else None,
+        Pv_func=None,   # not editable in the UI; uses built-in fallback
     )
-    return tf
 
 
-@app.route('/')
-def index():
-    return render_template('index.html')
+def _parse_windings(data: dict) -> list[WindingSpec]:
+    """
+    Parse winding list from request dict.
+
+    Expected format:
+      windings: [
+        { name: "primary",   taps: [0, 25, 50],    awg: [22, 22] },
+        { name: "secondary", taps: [0, 100, 50, 50, 50], awg: [22, 22, 22, 26] },
+      ]
+    """
+    specs = []
+    for w in data["windings"]:
+        taps = [int(t) for t in w["taps"]]
+        awg  = [int(a) for a in w["awg"]]
+        specs.append(WindingSpec(awg=awg, taps=taps, name=str(w.get("name", "winding"))))
+    return specs
 
 
-@app.route('/manual')
-def manual():
-    return render_template('manual.html')
-
-
-@app.route('/api/simulate', methods=['POST'])
-def simulate():
-    """Run manual simulation with specified tap and voltage"""
+def _drawing_b64(core: ToroidCore, results) -> str:
+    """Render the toroid PNG and return it as a base64 data-URI string."""
+    with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as f:
+        tmp_path = f.name
     try:
-        data = request.json
+        draw_toroid(core, results, output_path=tmp_path, dpi=150, fig_size_mm=160)
+        with open(tmp_path, "rb") as f:
+            png_bytes = f.read()
+    finally:
+        try:
+            os.unlink(tmp_path)
+        except OSError:
+            pass
+    return "data:image/png;base64," + base64.b64encode(png_bytes).decode()
 
-        # Extract parameters
-        primary_tap = int(data.get('primary_tap', 1))
-        secondary_tap = int(data.get('secondary_tap', 1))
-        Vp_rms = float(data.get('Vp_rms', 12))
-        freq_hz = float(data.get('freq_hz', 2000))
-        load_ohms = float(data.get('load_ohms', 100))
 
-        # Create transformer
-        tf = get_default_transformer()
+def _winding_result_to_dict(wr) -> dict:
+    """Serialise a WindingResult for JSON."""
+    segs = []
+    for seg in wr.segments:
+        segs.append({
+            "segment_index": seg.segment_index,
+            "tap_number": seg.segment_index + 1,
+            "awg": seg.awg,
+            "turns": seg.turns,
+            "wire_length_m": round(seg.wire_length_m, 4),
+            "resistance_mohm": round(seg.resistance_ohm * 1000, 3),
+            "weight_g": round(seg.weight_g, 3),
+            "fits": seg.fits,
+            "layers": [
+                {
+                    "layer_index": lr.layer_index,
+                    "turns_capacity": lr.turns_capacity,
+                    "turns_used": lr.turns_used,
+                    "L_turn_mm": round(lr.L_turn_mm, 2),
+                }
+                for lr in seg.layers
+            ],
+        })
+    return {
+        "name": wr.spec.name,
+        "total_turns": wr.spec.total_turns,
+        "feasible": wr.feasible,
+        "total_wire_length_m": round(wr.total_wire_length_m, 4),
+        "total_resistance_mohm": round(wr.total_resistance_ohm * 1000, 3),
+        "total_weight_g": round(wr.total_weight_g, 3),
+        "segments": segs,
+        "n_taps": len(wr.spec.taps) - 1,
+    }
 
-        # Run simulation (core loss is calculated automatically)
-        result = tf.simulate(
-            primary_tap=primary_tap,
-            secondary_tap=secondary_tap,
-            Vp_rms=Vp_rms,
-            freq_hz=freq_hz,
-            load_ohms=load_ohms,
-            core_loss_W=0.0,  # Will be calculated by model
-        )
+
+def _sweep_entry_to_dict(e: SweepEntry) -> dict:
+    """Convert SweepEntry to a plain dict suitable for JSON."""
+    d = e.as_dict()
+    # Replace NaN (not JSON-serialisable) with None
+    for k, v in d.items():
+        if isinstance(v, float) and math.isnan(v):
+            d[k] = None
+    return d
+
+
+# ---------------------------------------------------------------------------
+# Routes
+# ---------------------------------------------------------------------------
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/api/design", methods=["POST"])
+def api_design():
+    """
+    Run design_transformer() and return winding info + PNG drawing.
+
+    Request body (JSON):
+    {
+      "ID_mm": 21.5,  "OD_mm": 46.5,  "height_mm": 22.8,
+      "Ae_mm2": 142.5,   // optional
+      "Ve_mm3": 15219,   // optional
+      "fill_factor": 0.35,
+      "windings": [
+        { "name": "primary",   "taps": [0, 25, 50],         "awg": [22, 22] },
+        { "name": "secondary", "taps": [0, 100, 50, 50, 50],"awg": [22, 22, 22, 26] }
+      ]
+    }
+    """
+    try:
+        data = request.get_json(force=True)
+        core = _parse_core(data)
+        specs = _parse_windings(data)
+        fill_factor = float(data.get("fill_factor", 0.35))
+
+        results = design_transformer(core, specs, fill_factor=fill_factor)
+
+        drawing_b64 = _drawing_b64(core, results)
+        windings_info = [_winding_result_to_dict(wr) for wr in results]
 
         return jsonify({
-            'success': True,
-            'result': {
-                'primary_tap': result['primary_tap'],
-                'secondary_tap': result['secondary_tap'],
-                'Np_eff': result['Np_eff'],
-                'Ns_eff': result['Ns_eff'],
-                'Vp_rms': round(result['Vp_rms'], 2),
-                'Vs_rms': round(result['Vs_rms'], 2),
-                'Ip_rms': round(result['Ip_rms'], 3),
-                'Is_rms': round(result['Is_rms'], 3),
-                'turns_ratio': round(result['turns_ratio'], 3),
-                'P_out_W': round(result['P_out_W'], 2),
-                'P_in_W': round(result['P_in_W'], 2),
-                'P_cu_W': round(result['P_cu_W'], 2),
-                'P_cu_primary_W': round(result['P_cu_primary_W'], 3),
-                'P_cu_secondary_W': round(result['P_cu_secondary_W'], 3),
-                'P_core_W': round(result['P_core_W'], 2),
-                'efficiency': round(result['efficiency'] * 100, 2),
-                'B_peak_T': round(result['B_peak_T'], 4),
-            }
+            "success": True,
+            "windings": windings_info,
+            "drawing": drawing_b64,
         })
 
-    except Exception as e:
-        return jsonify({
-            'success': False,
-            'error': str(e)
-        }), 400
+    except Exception as exc:
+        return jsonify({"success": False, "error": str(exc)}), 400
 
 
-@app.route('/api/optimize', methods=['POST'])
-def optimize():
+@app.route("/api/sweep", methods=["POST"])
+def api_sweep():
+    """
+    Run sweep_operating_points() over a grid of frequencies × loads.
+
+    Request body (JSON):
+    {
+      // Same core + windings as /api/design ...
+      "fill_factor": 0.35,
+      "frequencies": [256, 870, 3140],
+      "loads": [[10, 0], [50, 0], [100, 0]],   // [R, X] pairs
+      "target_power_W": 25.0,
+      "Vp_min": 1.0,
+      "Vp_max": 50.0,
+      "Vp_steps": 100,
+      "power_tol_pct": 2.0,
+      "constraints": {
+        "B_max_T": 0.3,
+        "Vp_max": 50.0,
+        "Vs_max": 120.0,
+        "Ip_max": 3.0,
+        "Is_max": 2.0,
+        "P_out_max_W": 100.0
+      }
+    }
+    """
     try:
-        data = request.json
+        data = request.get_json(force=True)
+        core = _parse_core(data)
+        specs = _parse_windings(data)
+        fill_factor = float(data.get("fill_factor", 0.35))
 
-        # Extract parameters
-        load_ohms = float(data.get('load_ohms', 100))
-        target_power_W = float(data.get('target_power_W', 10))
-        freq_hz = float(data.get('freq_hz', 2000))
-        Vp_min = float(data.get('Vp_min', 5))
-        Vp_max = float(data.get('Vp_max', 36))
-        Vp_step = float(data.get('Vp_step', 0.5))
-        B_max_T = float(data.get('B_max_T', 0.3))
-        Vs_max = float(data.get('Vs_max', 200))
-        Is_max = float(data.get('Is_max', 1.5))
-        power_tolerance_percent = float(data.get('power_tolerance_percent', 2.0))
+        results = design_transformer(core, specs, fill_factor=fill_factor)
 
-        # Create transformer and optimizer
-        tf = get_default_transformer()
-        opt = TransformerOptimizer(tf)
+        # Expect exactly 2 windings: primary and secondary
+        if len(results) < 2:
+            return jsonify({"success": False, "error": "Need at least 2 windings"}), 400
 
-        # Run optimization (core loss is calculated automatically)
-        result = opt.optimize(
-            load_ohms=load_ohms,
-            target_power_W=target_power_W,
-            freq_hz=freq_hz,
-            Vp_min=Vp_min,
-            Vp_max=Vp_max,
-            Vp_step=Vp_step,
-            B_max_T=B_max_T,
-            Vs_max=Vs_max,
-            Is_max=Is_max,
-            core_loss_W=0.0,  # Will be calculated by model
-            power_tolerance_percent=power_tolerance_percent,
+        # Use first winding as primary, second as secondary
+        primary_result = results[0]
+        secondary_result = results[1]
+
+        sim = ToroidSimulator(core=core, primary=primary_result, secondary=secondary_result)
+
+        # Constraints
+        cdata = data.get("constraints", {})
+        constraints = SimConstraints(
+            B_max_T=float(cdata.get("B_max_T", 0.3)),
+            Vp_max=float(cdata.get("Vp_max", float("inf"))),
+            Vs_max=float(cdata.get("Vs_max", float("inf"))),
+            Ip_max=float(cdata.get("Ip_max", float("inf"))),
+            Is_max=float(cdata.get("Is_max", float("inf"))),
+            P_out_max_W=float(cdata.get("P_out_max_W", float("inf"))),
         )
 
-        if result:
-            return jsonify({
-                'success': True,
-                'result': {
-                    'primary_tap': result.primary_tap,
-                    'secondary_tap': result.secondary_tap,
-                    'Np_eff': result.Np_eff,
-                    'Ns_eff': result.Ns_eff,
-                    'Vp_rms': round(result.Vp_rms, 2),
-                    'Vs_rms': round(result.Vs_rms, 2),
-                    'Ip_rms': round(result.Ip_rms, 3),
-                    'Is_rms': round(result.Is_rms, 3),
-                    'turns_ratio': round(result.turns_ratio, 3),
-                    'P_out_W': round(result.P_out_W, 2),
-                    'P_in_W': round(result.P_in_W, 2),
-                    'P_cu_W': round(result.P_cu_W, 2),
-                    'P_cu_primary_W': round(result.P_cu_primary_W, 3),
-                    'P_cu_secondary_W': round(result.P_cu_secondary_W, 3),
-                    'P_core_W': round(result.P_core_W, 2),
-                    'efficiency': round(result.efficiency * 100, 2),
-                    'B_peak_T': round(result.B_peak_T, 4),
-                    'power_error_percent': round(result.power_error_percent, 2),
-                }
-            })
-        else:
-            return jsonify({
-                'success': False,
-                'error': 'No valid configuration found within constraints'
-            })
+        frequencies = [float(f) for f in data.get("frequencies", [256.0])]
+        loads = [(float(p[0]), float(p[1])) for p in data.get("loads", [[10.0, 0.0]])]
+        target_power_W = float(data.get("target_power_W", 10.0))
+        Vp_min = float(data.get("Vp_min", 1.0))
+        Vp_max_sweep = float(data.get("Vp_max", 50.0))
+        Vp_steps = int(data.get("Vp_steps", 100))
+        power_tol_pct = float(data.get("power_tol_pct", 2.0))
+
+        entries = sweep_operating_points(
+            sim=sim,
+            frequencies=frequencies,
+            loads=loads,
+            target_power_W=target_power_W,
+            constraints=constraints,
+            Vp_min=Vp_min,
+            Vp_max=Vp_max_sweep,
+            Vp_steps=Vp_steps,
+            power_tol_pct=power_tol_pct,
+        )
+
+        rows = [_sweep_entry_to_dict(e) for e in entries]
 
-    except Exception as e:
         return jsonify({
-            'success': False,
-            'error': str(e)
-        }), 400
+            "success": True,
+            "rows": rows,
+            "frequencies": frequencies,
+            "loads": [[r, x] for r, x in loads],
+        })
+
+    except Exception as exc:
+        import traceback
+        return jsonify({"success": False, "error": str(exc),
+                        "traceback": traceback.format_exc()}), 400
 
 
-@app.route('/api/transformer_info', methods=['GET'])
-def transformer_info():
-    """Return transformer configuration information"""
-    tf = get_default_transformer()
-    return jsonify({
-        'primary_taps': tf.primary_taps,
-        'secondary_taps': tf.secondary_taps,
-        'Ae_mm2': tf.Ae_mm2,
-        'Np_total': tf.Np_total,
-        'Ns_total': tf.Ns_total,
-    })
-
-
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=5000)
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5000)
diff --git a/designer.py b/designer.py
index 9cdb2de..4b09d35 100644
--- a/designer.py
+++ b/designer.py
@@ -169,6 +169,9 @@ class ToroidCore:
     @property
     def cross_section_area_mm2(self) -> float:
         """Rectangular cross-section area of the core material."""
+        if self.Ae_mm2 != None:
+            return self.Ae_mm2
+        
         return ((self.OD_mm - self.ID_mm) / 2.0) * self.height_mm
 
     @property
diff --git a/sim_toroid.py b/sim_toroid.py
index 44e62dd..6e0f13c 100644
--- a/sim_toroid.py
+++ b/sim_toroid.py
@@ -329,43 +329,34 @@ class ToroidSimulator:
 
         turns_ratio = Ns / Np           # a = Ns/Np
 
-        # --- Flux density ---------------------------------------------------
-        # The primary voltage applied to the winding minus the resistive drop
-        # sets the flux. We iterate once: compute ideal Ip, correct Vp seen by
-        # core, then recompute.
-        #
-        # Iteration:
-        #   Pass 0 (ideal): B from full Vp
-        #   Pass 1: B from (Vp - Ip_0 * Rp)  where Ip_0 is ideal primary current
-        #
+        # --- Circuit solution (exact voltage divider) -----------------------
         Ae_m2 = self._effective_Ae_mm2() * 1e-6
 
-        def _compute_op(Vp_core: float):
-            """Compute operating point given effective core voltage."""
-            B = Vp_core / (4.44 * Np * Ae_m2 * freq_hz)
-            # Ideal open-circuit secondary voltage
-            Vs_oc = complex(Vp_core * turns_ratio, 0.0)
-            # Secondary loop: Vs_oc = Is * (Rs + Z_load)
-            Z_sec_total = complex(Rs, 0.0) + Z_load_complex
-            Is_phasor = Vs_oc / Z_sec_total
-            # Voltage across load
-            Vs_phasor = Is_phasor * Z_load_complex
-            # Reflect secondary current to primary (ideal transformer)
-            Ip_reflected = Is_phasor / turns_ratio   # phasor, Amperes
-            return B, Is_phasor, Vs_phasor, Ip_reflected
+        # Exact voltage divider: solve for Vp_core analytically.
+        #
+        # Circuit: Vp --[Rp]-- Vp_core --[ideal xfmr]-- [Rs + Z_load]
+        #
+        # Secondary impedance reflected to primary:
+        #   Z_sec_ref = (Rs + Z_load) / turns_ratio²
+        # Voltage divider:
+        #   Vp_core = Vp * Z_sec_ref / (Rp + Z_sec_ref)
+        # Then:
+        #   Is = Vp_core * turns_ratio / (Rs + Z_load)
+        #   Ip = Is * turns_ratio  (= Vp_core / Z_sec_ref / turns_ratio ... simplified)
 
-        # Pass 0: ideal (ignore primary drop for now)
-        _, Is0, _, Ip0 = _compute_op(Vp_rms)
-        Ip0_mag = abs(Ip0)
+        Z_sec_total = complex(Rs, 0.0) + Z_load_complex
+        Z_sec_ref = Z_sec_total / (turns_ratio ** 2)   # reflected to primary
+        Z_total_primary = complex(Rp, 0.0) + Z_sec_ref
 
-        # Pass 1: correct for primary winding voltage drop
-        # Primary drop is Ip * Rp (in phase with current; Rp is real)
-        # Vp_core ≈ Vp_rms - Ip0 * Rp  (phasor subtraction)
-        # For simplicity treat Ip0 as real-valued magnitude for the correction
-        # (conservative: subtracts in phase with voltage)
-        Vp_core = max(Vp_rms - Ip0_mag * Rp, 0.0)
+        Vp_core_phasor = complex(Vp_rms, 0.0) * Z_sec_ref / Z_total_primary
+        Vp_core = abs(Vp_core_phasor)
 
-        B_peak_T, Is_phasor, Vs_phasor, Ip_phasor = _compute_op(Vp_core)
+        B_peak_T = Vp_core / (4.44 * Np * Ae_m2 * freq_hz)
+
+        Vs_oc = Vp_core_phasor * turns_ratio
+        Is_phasor = Vs_oc / Z_sec_total
+        Vs_phasor = Is_phasor * Z_load_complex
+        Ip_phasor = Is_phasor * turns_ratio
 
         Is_rms = abs(Is_phasor)
         Vs_rms_out = abs(Vs_phasor)
@@ -876,69 +867,69 @@ if __name__ == "__main__":
     constraints = SimConstraints(
         B_max_T=1.0,
         Vp_max=50.0,
-        Vs_max=90.0,
-        Ip_max=5.0,
+        Vs_max=120.0,
+        Ip_max=3.0,
         Is_max=2.0,
         P_out_max_W=25.0,
     )
 
-    print("=== Single operating point (10 ohm resistive load) ===")
-    result = sim.simulate(
-        Vp_rms=12.0,
-        freq_hz=256.0,
-        primary_tap=2,
-        secondary_tap=1,
-        Z_load=(100.0, 0.0),
-        constraints=constraints,
-    )
-    print(result)
-    print()
+    # print("=== Single operating point (10 ohm resistive load) ===")
+    # result = sim.simulate(
+    #     Vp_rms=12.0,
+    #     freq_hz=256.0,
+    #     primary_tap=2,
+    #     secondary_tap=1,
+    #     Z_load=(100.0, 0.0),
+    #     constraints=constraints,
+    # )
+    # print(result)
+    # print()
 
-    print("=== Complex load (8 ohm + 1 mH at 50 kHz -> X ~= 314 ohm) ===")
-    X = 2 * math.pi * 50_000.0 * 1e-3
-    result2 = sim.simulate(
-        Vp_rms=24.0,
-        freq_hz=50_000.0,
-        primary_tap=2,
-        secondary_tap=1,
-        Z_load=(8.0, X),
-        constraints=constraints,
-    )
-    print(result2)
-    print()
+    # print("=== Complex load (8 ohm + 1 mH at 50 kHz -> X ~= 314 ohm) ===")
+    # X = 2 * math.pi * 50_000.0 * 1e-3
+    # result2 = sim.simulate(
+    #     Vp_rms=24.0,
+    #     freq_hz=50_000.0,
+    #     primary_tap=2,
+    #     secondary_tap=1,
+    #     Z_load=(8.0, X),
+    #     constraints=constraints,
+    # )
+    # print(result2)
+    # print()
 
-    print("=== Tap sweep ===")
-    all_results = sweep_taps(sim, 24.0, 50_000.0, (10.0, 0.0), constraints)
-    for r in all_results:
-        feasible = "OK" if r.feasible else "VIOL"
-        print(
-            f"  P{r.primary_tap}/S{r.secondary_tap}  "
-            f"Np={r.Np_eff:3d} Ns={r.Ns_eff:3d}  "
-            f"Vs={r.Vs_rms:.3f}V  Is={r.Is_rms:.4f}A  "
-            f"P_out={r.P_out_W:.3f}W  eff={r.efficiency*100:.2f}%  [{feasible}]"
-        )
+    # print("=== Tap sweep ===")
+    # all_results = sweep_taps(sim, 24.0, 50_000.0, (10.0, 0.0), constraints)
+    # for r in all_results:
+    #     feasible = "OK" if r.feasible else "VIOL"
+    #     print(
+    #         f"  P{r.primary_tap}/S{r.secondary_tap}  "
+    #         f"Np={r.Np_eff:3d} Ns={r.Ns_eff:3d}  "
+    #         f"Vs={r.Vs_rms:.3f}V  Is={r.Is_rms:.4f}A  "
+    #         f"P_out={r.P_out_W:.3f}W  eff={r.efficiency*100:.2f}%  [{feasible}]"
+    #     )
 
-    print()
-    print("=== Optimize: find best taps + Vp to deliver ~10 W at 256 Hz ===")
-    opt = sim.optimize(
-        freq_hz=256.0,
-        Z_load=(10.0, 0.0),
-        target_power_W=25.0,
-        constraints=constraints,
-        Vp_min=1.0,
-        Vp_max=50.0,
-        Vp_steps=200,
-        power_tol_pct=2.0,
-    )
-    if opt is None:
-        print("  No feasible solution found.")
-    else:
-        print(opt)
+    # print()
+    # print("=== Optimize: find best taps + Vp to deliver ~10 W at 256 Hz ===")
+    # opt = sim.optimize(
+    #     freq_hz=256.0,
+    #     Z_load=(10.0, 0.0),
+    #     target_power_W=25.0,
+    #     constraints=constraints,
+    #     Vp_min=1.0,
+    #     Vp_max=50.0,
+    #     Vp_steps=200,
+    #     power_tol_pct=2.0,
+    # )
+    # if opt is None:
+    #     print("  No feasible solution found.")
+    # else:
+    #     print(opt)
 
     print()
     print("=== Operating-point sweep (3 freqs x 3 loads) ===")
     freqs = [256.0, 870.0, 3140.0, 8900.0]
-    loads = [(50.0, 0.0), (100.0, 0.0), (200.0, 0.0), (600.0, 0.0)]
+    loads = [(10.0, 0.0), (50.0, 0.0), (100.0, 0.0), (200.0, 0.0), (600.0, 0.0), (2000.0, 0.0)]
     entries = sweep_operating_points(
         sim=sim,
         frequencies=freqs,
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..1ba730f
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,1034 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Toroid Transformer Designer</title>
+  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: #f0f2f5;
+      color: #333;
+      font-size: 14px;
+    }
+
+    /* ---- Top bar ---- */
+    .topbar {
+      background: linear-gradient(135deg, #1e3a5f 0%, #2d6a9f 100%);
+      color: white;
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+    }
+    .topbar h1 { font-size: 18px; font-weight: 600; }
+    .topbar .spacer { flex: 1; }
+
+    /* ---- Layout: two-column ---- */
+    .layout {
+      display: grid;
+      grid-template-columns: 380px 1fr;
+      gap: 12px;
+      padding: 12px;
+      min-height: calc(100vh - 44px);
+    }
+
+    /* ---- Left column: panels stacked ---- */
+    .left-col { display: flex; flex-direction: column; gap: 12px; }
+
+    /* ---- Right column: drawing + plots ---- */
+    .right-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+
+    /* ---- Card ---- */
+    .card {
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
+      overflow: hidden;
+    }
+    .card-header {
+      background: #1e3a5f;
+      color: white;
+      padding: 8px 14px;
+      font-weight: 600;
+      font-size: 13px;
+      letter-spacing: 0.5px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .card-body { padding: 14px; }
+
+    /* ---- Form elements ---- */
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .form-row.three { grid-template-columns: 1fr 1fr 1fr; }
+    .form-row.four  { grid-template-columns: 1fr 1fr 1fr 1fr; }
+    .form-row.one   { grid-template-columns: 1fr; }
+
+    label.field {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+      font-size: 12px;
+      color: #555;
+    }
+    label.field span { font-weight: 500; }
+
+    input[type=number], input[type=text], select {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 5px 8px;
+      font-size: 13px;
+      width: 100%;
+      background: white;
+    }
+    input[type=number]:focus, input[type=text]:focus, select:focus {
+      outline: none;
+      border-color: #2d6a9f;
+      box-shadow: 0 0 0 2px rgba(45,106,159,0.2);
+    }
+
+    /* ---- Winding builder ---- */
+    .winding-block {
+      border: 1px solid #dde;
+      border-radius: 6px;
+      padding: 10px;
+      margin-bottom: 10px;
+      background: #fafbff;
+      position: relative;
+    }
+    .winding-block-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .winding-block-header input[type=text] {
+      flex: 1;
+      font-weight: 600;
+      font-size: 13px;
+    }
+    .btn-sm {
+      padding: 3px 10px;
+      font-size: 12px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 500;
+    }
+    .btn-remove { background: #fee2e2; color: #b91c1c; }
+    .btn-remove:hover { background: #fca5a5; }
+    .btn-add-seg { background: #dbeafe; color: #1d4ed8; }
+    .btn-add-seg:hover { background: #bfdbfe; }
+
+    .seg-row {
+      display: grid;
+      grid-template-columns: 60px 1fr 28px;
+      gap: 6px;
+      align-items: end;
+      margin-bottom: 6px;
+    }
+    .seg-row label.field span { white-space: nowrap; }
+
+    .btn-del-seg {
+      background: #fee2e2;
+      color: #b91c1c;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 15px;
+      height: 28px;
+      width: 28px;
+      line-height: 1;
+    }
+    .btn-del-seg:hover { background: #fca5a5; }
+
+    /* ---- Button row ---- */
+    .btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
+    .btn {
+      padding: 8px 20px;
+      border: none;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .btn-primary {
+      background: linear-gradient(135deg, #1e3a5f, #2d6a9f);
+      color: white;
+      box-shadow: 0 2px 8px rgba(29,78,137,0.3);
+    }
+    .btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
+    .btn-secondary {
+      background: #e5e7eb;
+      color: #374151;
+    }
+    .btn-secondary:hover:not(:disabled) { background: #d1d5db; }
+    .btn-add-winding {
+      background: #ecfdf5;
+      color: #065f46;
+      border: 1px solid #6ee7b7;
+    }
+    .btn-add-winding:hover { background: #d1fae5; }
+
+    /* ---- Frequencies / loads textarea ---- */
+    textarea {
+      width: 100%;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      padding: 6px 8px;
+      font-size: 12px;
+      font-family: monospace;
+      resize: vertical;
+      min-height: 60px;
+    }
+    textarea:focus {
+      outline: none;
+      border-color: #2d6a9f;
+      box-shadow: 0 0 0 2px rgba(45,106,159,0.2);
+    }
+
+    /* ---- Status / error messages ---- */
+    .msg {
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      display: none;
+    }
+    .msg.visible { display: block; }
+    .msg-error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
+    .msg-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
+    .msg-ok      { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
+
+    /* ---- Design results table ---- */
+    .design-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+    .design-table th {
+      background: #f1f5f9;
+      padding: 5px 8px;
+      text-align: left;
+      border-bottom: 2px solid #e2e8f0;
+      font-weight: 600;
+      color: #475569;
+    }
+    .design-table td {
+      padding: 5px 8px;
+      border-bottom: 1px solid #f1f5f9;
+    }
+    .design-table tr:last-child td { border-bottom: none; }
+    .badge-ok  { color: #166534; font-weight: 600; }
+    .badge-bad { color: #b91c1c; font-weight: 600; }
+
+    /* ---- Drawing ---- */
+    #drawing-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 200px;
+      background: #f8fafc;
+      border-radius: 6px;
+      color: #94a3b8;
+      font-size: 13px;
+    }
+    #drawing-img { max-width: 100%; border-radius: 4px; display: none; }
+
+    /* ---- Plots ---- */
+    .plot-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 0 14px 8px;
+      flex-wrap: wrap;
+    }
+    .plot-toolbar label { font-size: 12px; font-weight: 500; color: #555; }
+    .plot-toolbar select { width: auto; }
+
+    .plots-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 8px;
+      padding: 0 14px 14px;
+    }
+    .plot-box { min-height: 300px; }
+
+    /* ---- Resizable plots card ---- */
+    #plots-card {
+      resize: vertical;
+      overflow: auto;
+      min-height: 360px;
+    }
+    /* Show a subtle resize hint in the bottom-right corner */
+    #plots-card::after {
+      content: '⠿';
+      position: absolute;
+      bottom: 4px;
+      right: 6px;
+      font-size: 12px;
+      color: #94a3b8;
+      pointer-events: none;
+      line-height: 1;
+    }
+    #plots-card { position: relative; }
+
+    /* ---- Sweep results table ---- */
+    .sweep-table-wrap {
+      overflow-x: auto;
+      padding: 0 14px 14px;
+    }
+    .sweep-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 11px;
+      white-space: nowrap;
+    }
+    .sweep-table th {
+      background: #1e3a5f;
+      color: white;
+      padding: 5px 8px;
+      text-align: right;
+      font-weight: 500;
+      position: sticky;
+      top: 0;
+    }
+    .sweep-table th:first-child { text-align: left; }
+    .sweep-table td {
+      padding: 4px 8px;
+      border-bottom: 1px solid #f1f5f9;
+      text-align: right;
+      color: #374151;
+    }
+    .sweep-table td:first-child { text-align: left; }
+    .sweep-table tr:nth-child(even) td { background: #f8fafc; }
+    .sweep-table tr:hover td { background: #e0f2fe; }
+    .sweep-table .cell-ok  { color: #166534; font-weight: 600; }
+    .sweep-table .cell-bad { color: #b91c1c; }
+    .sweep-table .cell-null { color: #94a3b8; }
+
+    /* ---- Spinner ---- */
+    .spinner {
+      display: inline-block;
+      width: 14px; height: 14px;
+      border: 2px solid rgba(255,255,255,0.3);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.6s linear infinite;
+      vertical-align: middle;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ---- Responsive: collapse to single column on narrow screens ---- */
+    @media (max-width: 860px) {
+      .layout { grid-template-columns: 1fr; }
+      .plots-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+
+<div class="topbar">
+  <h1>Toroid Transformer Designer</h1>
+  <div class="spacer"></div>
+</div>
+
+<div class="layout">
+
+  <!-- ===================== LEFT COLUMN ===================== -->
+  <div class="left-col">
+
+    <!-- Core Parameters -->
+    <div class="card">
+      <div class="card-header">Core Parameters</div>
+      <div class="card-body">
+        <div class="form-row three">
+          <label class="field"><span>ID (mm)</span><input type="number" id="core-ID" value="21.5" min="1" step="0.1"></label>
+          <label class="field"><span>OD (mm)</span><input type="number" id="core-OD" value="46.5" min="2" step="0.1"></label>
+          <label class="field"><span>Height (mm)</span><input type="number" id="core-H" value="22.8" min="1" step="0.1"></label>
+        </div>
+        <div class="form-row two">
+          <label class="field"><span>Ae (mm²) optional</span><input type="number" id="core-Ae" value="142.5" min="0" step="0.1" placeholder="geometric default"></label>
+          <label class="field"><span>Ve (mm³) optional</span><input type="number" id="core-Ve" value="15219" min="0" step="1" placeholder="Ae × Le"></label>
+        </div>
+        <div class="form-row one" style="margin-top:4px">
+          <label class="field"><span>Fill factor</span><input type="number" id="core-fill" value="0.35" min="0.1" max="0.9" step="0.01"></label>
+        </div>
+      </div>
+    </div>
+
+    <!-- Windings -->
+    <div class="card">
+      <div class="card-header">Windings</div>
+      <div class="card-body">
+        <div id="windings-container"></div>
+        <div class="btn-row">
+          <button class="btn btn-add-winding" onclick="addWinding()">+ Add Winding</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Design button + results -->
+    <div class="card">
+      <div class="card-header">Design</div>
+      <div class="card-body">
+        <div class="btn-row" style="margin-bottom:10px">
+          <button class="btn btn-primary" id="btn-design" onclick="runDesign()">Design Transformer</button>
+        </div>
+        <div id="design-msg" class="msg"></div>
+        <div id="design-results-container" style="display:none">
+          <div id="design-results-tables"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Simulation Parameters -->
+    <div class="card">
+      <div class="card-header">Simulation</div>
+      <div class="card-body">
+        <div class="form-row one">
+          <label class="field">
+            <span>Frequencies (Hz) — one per line or comma-separated</span>
+            <textarea id="sim-freqs" rows="3">256
+870
+3140
+8900</textarea>
+          </label>
+        </div>
+        <div class="form-row one">
+          <label class="field">
+            <span>Loads [R, X] (ohms) — one pair per line: R or R,X</span>
+            <textarea id="sim-loads" rows="4">10
+50
+100
+200
+600
+2000</textarea>
+          </label>
+        </div>
+        <div class="form-row">
+          <label class="field"><span>Target power (W)</span><input type="number" id="sim-target" value="25" min="0.1" step="0.1"></label>
+          <label class="field"><span>Power tolerance (%)</span><input type="number" id="sim-tol" value="2" min="0.1" step="0.1"></label>
+        </div>
+        <div class="form-row">
+          <label class="field"><span>Vp min (V)</span><input type="number" id="sim-vpmin" value="1" min="0.1" step="0.5"></label>
+          <label class="field"><span>Vp max (V)</span><input type="number" id="sim-vpmax" value="50" min="1" step="1"></label>
+        </div>
+        <div class="form-row one">
+          <label class="field"><span>Vp steps</span><input type="number" id="sim-vpsteps" value="100" min="10" max="500" step="10"></label>
+        </div>
+
+        <details style="margin: 8px 0">
+          <summary style="cursor:pointer; font-size:12px; color:#2d6a9f; font-weight:500">Constraints (expand)</summary>
+          <div style="margin-top:8px">
+            <div class="form-row">
+              <label class="field"><span>B max (T)</span><input type="number" id="con-B" value="0.3" min="0.01" step="0.01"></label>
+              <label class="field"><span>Vp max (V)</span><input type="number" id="con-Vp" value="50" min="1" step="1"></label>
+            </div>
+            <div class="form-row">
+              <label class="field"><span>Vs max (V)</span><input type="number" id="con-Vs" value="120" min="1" step="1"></label>
+              <label class="field"><span>Ip max (A)</span><input type="number" id="con-Ip" value="3" min="0.01" step="0.1"></label>
+            </div>
+            <div class="form-row">
+              <label class="field"><span>Is max (A)</span><input type="number" id="con-Is" value="2" min="0.01" step="0.1"></label>
+              <label class="field"><span>P out max (W)</span><input type="number" id="con-Pout" value="100" min="0.1" step="1"></label>
+            </div>
+          </div>
+        </details>
+
+        <div class="btn-row">
+          <button class="btn btn-primary" id="btn-sim" onclick="runSweep()">Run Simulation</button>
+        </div>
+        <div id="sim-msg" class="msg" style="margin-top:8px"></div>
+      </div>
+    </div>
+
+  </div><!-- /left-col -->
+
+
+  <!-- ===================== RIGHT COLUMN ===================== -->
+  <div class="right-col">
+
+    <!-- Drawing -->
+    <div class="card">
+      <div class="card-header">Cross-section Drawing</div>
+      <div class="card-body" style="padding:10px">
+        <div id="drawing-container">
+          <span>Run Design to see drawing</span>
+        </div>
+        <img id="drawing-img" alt="Toroid cross-section">
+      </div>
+    </div>
+
+    <!-- Plots -->
+    <div class="card" id="plots-card" style="display:none">
+      <div class="card-header">Simulation Results</div>
+      <div class="plot-toolbar">
+        <label for="freq-select">Frequency:</label>
+        <select id="freq-select" onchange="updatePlots()"></select>
+        <span id="plot-status" style="font-size:12px;color:#64748b;margin-left:8px"></span>
+      </div>
+      <div class="plots-grid">
+        <div class="plot-box" id="plot-voltage"></div>
+        <div class="plot-box" id="plot-current"></div>
+        <div class="plot-box" id="plot-power"></div>
+      </div>
+    </div>
+
+    <!-- Results table -->
+    <div class="card" id="table-card" style="display:none">
+      <div class="card-header" style="justify-content:space-between">
+        <span>Results Table</span>
+        <a id="csv-download" href="#" download="sweep_results.csv"
+           style="color:#93c5fd;font-size:12px;font-weight:500;text-decoration:none"
+           onclick="return triggerCsvDownload()">&#8595; Download CSV</a>
+      </div>
+      <div class="sweep-table-wrap">
+        <table class="sweep-table" id="sweep-table">
+          <thead id="sweep-table-head"></thead>
+          <tbody id="sweep-table-body"></tbody>
+        </table>
+      </div>
+    </div>
+
+  </div><!-- /right-col -->
+
+</div><!-- /layout -->
+
+<script>
+// ============================================================
+// State
+// ============================================================
+let windingCount = 0;
+let sweepData = null;   // last successful sweep result
+
+// ============================================================
+// Winding builder
+// ============================================================
+function addWinding(name, taps, awgs) {
+  const container = document.getElementById('windings-container');
+  const id = windingCount++;
+  name = name || (id === 0 ? 'primary' : id === 1 ? 'secondary' : `winding${id+1}`);
+  taps = taps || [25];
+  awgs = awgs || [22];
+
+  const div = document.createElement('div');
+  div.className = 'winding-block';
+  div.dataset.id = id;
+
+  // Build segment rows HTML
+  let segHtml = '';
+  for (let i = 0; i < taps.length; i++) {
+    segHtml += segRowHtml(id, i, awgs[i] || 22, taps[i]);
+  }
+
+  div.innerHTML = `
+    <div class="winding-block-header">
+      <input type="text" class="winding-name" value="${name}" placeholder="name">
+      <button class="btn-sm btn-remove" onclick="removeWinding(${id})">Remove</button>
+    </div>
+    <div class="seg-list" id="segs-${id}">
+      ${segHtml}
+    </div>
+    <button class="btn-sm btn-add-seg" onclick="addSegment(${id})" style="margin-top:4px">+ Add segment</button>
+  `;
+  container.appendChild(div);
+}
+
+function segRowHtml(wid, segIdx, awg, turns) {
+  const awgOptions = [20,21,22,23,24,25,26,27,28,29,30].map(a =>
+    `<option value="${a}" ${a == awg ? 'selected' : ''}>${a}</option>`
+  ).join('');
+  return `
+    <div class="seg-row" data-seg="${segIdx}">
+      <label class="field"><span>AWG</span>
+        <select class="seg-awg">${awgOptions}</select>
+      </label>
+      <label class="field"><span>Turns (seg ${segIdx+1})</span>
+        <input type="number" class="seg-turns" value="${turns}" min="1" step="1">
+      </label>
+      <button class="btn-del-seg" onclick="removeSegment(this)" title="Remove segment">-</button>
+    </div>`;
+}
+
+function addSegment(wid) {
+  const list = document.getElementById(`segs-${wid}`);
+  const existing = list.querySelectorAll('.seg-row');
+  const newIdx = existing.length;
+  const div = document.createElement('div');
+  div.innerHTML = segRowHtml(wid, newIdx, 22, 50);
+  list.appendChild(div.firstElementChild);
+  renumberSegments(list);
+}
+
+function removeSegment(btn) {
+  const row = btn.closest('.seg-row');
+  const list = row.parentElement;
+  if (list.querySelectorAll('.seg-row').length <= 1) {
+    alert('Each winding must have at least one segment.');
+    return;
+  }
+  row.remove();
+  renumberSegments(list);
+}
+
+function renumberSegments(list) {
+  list.querySelectorAll('.seg-row').forEach((row, i) => {
+    row.dataset.seg = i;
+    const lbl = row.querySelector('.field:nth-child(2) span');
+    if (lbl) lbl.textContent = `Turns (seg ${i+1})`;
+  });
+}
+
+function removeWinding(id) {
+  const container = document.getElementById('windings-container');
+  if (container.querySelectorAll('.winding-block').length <= 1) {
+    alert('Need at least one winding.');
+    return;
+  }
+  container.querySelector(`.winding-block[data-id="${id}"]`).remove();
+}
+
+// ============================================================
+// Build request payload from current UI state
+// ============================================================
+function buildPayload() {
+  const payload = {
+    ID_mm:      parseFloat(document.getElementById('core-ID').value),
+    OD_mm:      parseFloat(document.getElementById('core-OD').value),
+    height_mm:  parseFloat(document.getElementById('core-H').value),
+    fill_factor: parseFloat(document.getElementById('core-fill').value),
+    windings: [],
+  };
+  const aeVal = document.getElementById('core-Ae').value.trim();
+  const veVal = document.getElementById('core-Ve').value.trim();
+  if (aeVal !== '') payload.Ae_mm2 = parseFloat(aeVal);
+  if (veVal !== '') payload.Ve_mm3 = parseFloat(veVal);
+
+  document.querySelectorAll('.winding-block').forEach(block => {
+    const name = block.querySelector('.winding-name').value.trim();
+    const taps = [0];
+    const awg  = [];
+    block.querySelectorAll('.seg-row').forEach(row => {
+      taps.push(parseInt(row.querySelector('.seg-turns').value));
+      awg.push(parseInt(row.querySelector('.seg-awg').value));
+    });
+    payload.windings.push({ name, taps, awg });
+  });
+  return payload;
+}
+
+// ============================================================
+// Design
+// ============================================================
+async function runDesign() {
+  const btn = document.getElementById('btn-design');
+  const msg = document.getElementById('design-msg');
+  const resContainer = document.getElementById('design-results-container');
+
+  setMsg(msg, 'info', 'Designing...');
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner"></span> Designing...';
+  resContainer.style.display = 'none';
+
+  try {
+    const payload = buildPayload();
+    const resp = await fetch('/api/design', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(payload),
+    });
+    const data = await resp.json();
+    if (!data.success) {
+      setMsg(msg, 'error', 'Error: ' + data.error);
+      return;
+    }
+    setMsg(msg, 'ok', 'Design complete.');
+    showDrawing(data.drawing);
+    showDesignResults(data.windings);
+    resContainer.style.display = 'block';
+  } catch(e) {
+    setMsg(msg, 'error', 'Network error: ' + e.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Design Transformer';
+  }
+}
+
+function showDrawing(b64) {
+  const container = document.getElementById('drawing-container');
+  const img = document.getElementById('drawing-img');
+  container.innerHTML = '';
+  container.style.display = 'none';
+  img.src = b64;
+  img.style.display = 'block';
+}
+
+function showDesignResults(windings) {
+  const cont = document.getElementById('design-results-tables');
+  cont.innerHTML = '';
+  windings.forEach(w => {
+    const feasStr = w.feasible
+      ? '<span class="badge-ok">OK</span>'
+      : '<span class="badge-bad">DOES NOT FIT</span>';
+    let html = `
+      <div style="margin-bottom:12px">
+        <strong>${w.name}</strong> — ${w.total_turns} turns total, ${w.total_wire_length_m.toFixed(2)} m,
+        ${w.total_resistance_mohm.toFixed(1)} mΩ, ${w.total_weight_g.toFixed(2)} g — ${feasStr}
+        <table class="design-table" style="margin-top:6px">
+          <thead><tr>
+            <th>Tap</th><th>AWG</th><th>Turns</th>
+            <th>Wire (m)</th><th>R (mΩ)</th><th>Layers</th><th>Fit</th>
+          </tr></thead>
+          <tbody>`;
+    w.segments.forEach(seg => {
+      const layerSummary = seg.layers.map(lr =>
+        `L${lr.layer_index}: ${lr.turns_used}/${lr.turns_capacity}`
+      ).join(', ');
+      const fitStr = seg.fits
+        ? '<span class="badge-ok">OK</span>'
+        : '<span class="badge-bad">OVERFLOW</span>';
+      html += `<tr>
+        <td>${seg.tap_number}</td>
+        <td>${seg.awg}</td>
+        <td>${seg.turns}</td>
+        <td>${seg.wire_length_m.toFixed(3)}</td>
+        <td>${seg.resistance_mohm.toFixed(2)}</td>
+        <td style="font-size:11px">${layerSummary}</td>
+        <td>${fitStr}</td>
+      </tr>`;
+    });
+    html += '</tbody></table></div>';
+    cont.innerHTML += html;
+  });
+}
+
+// ============================================================
+// Sweep (simulate)
+// ============================================================
+function parseFrequencies() {
+  const raw = document.getElementById('sim-freqs').value;
+  return raw.split(/[\n,]+/).map(s => s.trim()).filter(s => s !== '').map(Number).filter(v => v > 0);
+}
+
+function parseLoads() {
+  const raw = document.getElementById('sim-loads').value;
+  return raw.split('\n').map(s => s.trim()).filter(s => s !== '').map(line => {
+    const parts = line.split(',').map(Number);
+    return [parts[0] || 0, parts[1] || 0];
+  }).filter(p => p[0] > 0 || p[1] !== 0);
+}
+
+async function runSweep() {
+  const btn = document.getElementById('btn-sim');
+  const msg = document.getElementById('sim-msg');
+  const plotsCard = document.getElementById('plots-card');
+
+  setMsg(msg, 'info', 'Running simulation...');
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spinner"></span> Simulating...';
+
+  try {
+    const corePayload = buildPayload();
+    const freqs = parseFrequencies();
+    const loads = parseLoads();
+
+    if (freqs.length === 0) { setMsg(msg, 'error', 'No valid frequencies.'); return; }
+    if (loads.length === 0) { setMsg(msg, 'error', 'No valid loads.'); return; }
+
+    const payload = Object.assign({}, corePayload, {
+      frequencies: freqs,
+      loads: loads,
+      target_power_W: parseFloat(document.getElementById('sim-target').value),
+      power_tol_pct:  parseFloat(document.getElementById('sim-tol').value),
+      Vp_min:   parseFloat(document.getElementById('sim-vpmin').value),
+      Vp_max:   parseFloat(document.getElementById('sim-vpmax').value),
+      Vp_steps: parseInt(document.getElementById('sim-vpsteps').value),
+      constraints: {
+        B_max_T:    parseFloat(document.getElementById('con-B').value),
+        Vp_max:     parseFloat(document.getElementById('con-Vp').value),
+        Vs_max:     parseFloat(document.getElementById('con-Vs').value),
+        Ip_max:     parseFloat(document.getElementById('con-Ip').value),
+        Is_max:     parseFloat(document.getElementById('con-Is').value),
+        P_out_max_W: parseFloat(document.getElementById('con-Pout').value),
+      },
+    });
+
+    const resp = await fetch('/api/sweep', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify(payload),
+    });
+    const data = await resp.json();
+
+    if (!data.success) {
+      setMsg(msg, 'error', 'Error: ' + data.error);
+      return;
+    }
+
+    sweepData = data;
+    setMsg(msg, 'ok', `Done — ${data.rows.length} operating points computed.`);
+
+    // Populate frequency dropdown
+    const sel = document.getElementById('freq-select');
+    sel.innerHTML = '';
+    data.frequencies.forEach((f, i) => {
+      const opt = document.createElement('option');
+      opt.value = i;
+      opt.textContent = f >= 1000 ? `${(f/1000).toFixed(1)} kHz` : `${f} Hz`;
+      sel.appendChild(opt);
+    });
+    plotsCard.style.display = 'block';
+    updatePlots();
+
+  } catch(e) {
+    setMsg(msg, 'error', 'Network error: ' + e.message);
+  } finally {
+    btn.disabled = false;
+    btn.textContent = 'Run Simulation';
+  }
+}
+
+// ============================================================
+// Plots
+// ============================================================
+function updatePlots() {
+  if (!sweepData) return;
+
+  const freqIdx = parseInt(document.getElementById('freq-select').value);
+  const freq = sweepData.frequencies[freqIdx];
+
+  // Filter rows for this frequency, sort by load resistance
+  const rows = sweepData.rows
+    .filter(r => r.freq_hz === freq)
+    .sort((a, b) => a.Z_load_R - b.Z_load_R);
+
+  const freqLabel = freq >= 1000 ? `${(freq/1000).toFixed(1)} kHz` : `${freq} Hz`;
+
+  // Build single arrays — one point per load, using the optimizer's chosen taps
+  const x    = rows.map(r => r.Z_load_R);
+  const Vs   = rows.map(r => r.Vs_rms);
+  const Is   = rows.map(r => r.Is_rms);
+  const Ip   = rows.map(r => r.Ip_rms);
+  const Pout = rows.map(r => r.P_out_W);
+  const Pin  = rows.map(r => r.P_in_W);
+  const Pcu  = rows.map(r => r.P_cu_W);
+  const Pcore= rows.map(r => r.P_core_W);
+  const eff  = rows.map(r => r.efficiency != null ? r.efficiency * 100 : null);
+  const Vp   = rows.map(r => r.Vp_rms);
+
+  // Hover text: show the selected tap combination and Vp
+  const hoverTap = rows.map(r =>
+    r.primary_tap != null
+      ? `P${r.primary_tap}/S${r.secondary_tap}<br>Vp=${r.Vp_rms != null ? r.Vp_rms.toFixed(2) : '?'}V`
+      : 'no solution'
+  );
+
+  const plotH = calcPlotHeight();
+
+  // --- Voltage plot ---
+  Plotly.react('plot-voltage', [
+    { x, y: Vp, name: 'Vp', mode: 'lines+markers', type: 'scatter',
+      line: {dash: 'dot'},
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>Vp=%{y:.2f}V<br>%{text}<extra></extra>' },
+    { x, y: Vs, name: 'Vs', mode: 'lines+markers', type: 'scatter',
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>Vs=%{y:.2f}V<br>%{text}<extra></extra>' },
+  ], {
+    title: { text: `Voltage @ ${freqLabel}`, font: {size:13} },
+    xaxis: { title: 'R load (Ω)', type: 'log' },
+    yaxis: { title: 'V rms' },
+    margin: {t:36, b:42, l:54, r:10},
+    legend: {font:{size:11}},
+    height: plotH,
+  }, {responsive: true, displayModeBar: false});
+
+  // --- Current plot ---
+  Plotly.react('plot-current', [
+    { x, y: Is, name: 'Is', mode: 'lines+markers', type: 'scatter',
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>Is=%{y:.4f}A<br>%{text}<extra></extra>' },
+    { x, y: Ip, name: 'Ip', mode: 'lines+markers', type: 'scatter',
+      line: {dash: 'dot'},
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>Ip=%{y:.4f}A<br>%{text}<extra></extra>' },
+  ], {
+    title: { text: `Current @ ${freqLabel}`, font: {size:13} },
+    xaxis: { title: 'R load (Ω)', type: 'log' },
+    yaxis: { title: 'I rms (A)' },
+    margin: {t:36, b:42, l:54, r:10},
+    legend: {font:{size:11}},
+    height: plotH,
+  }, {responsive: true, displayModeBar: false});
+
+  // --- Power plot ---
+  Plotly.react('plot-power', [
+    { x, y: Pout,  name: 'P out',  mode: 'lines+markers', type: 'scatter',
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>P_out=%{y:.3f}W<br>%{text}<extra></extra>' },
+    { x, y: Pin,   name: 'P in',   mode: 'lines+markers', type: 'scatter',
+      line: {dash:'dash'},
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>P_in=%{y:.3f}W<br>%{text}<extra></extra>' },
+    { x, y: Pcu,   name: 'P cu',   mode: 'lines+markers', type: 'scatter',
+      line: {dash:'dot'},
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>P_cu=%{y:.3f}W<br>%{text}<extra></extra>' },
+    { x, y: eff,   name: 'Eff %',  mode: 'lines+markers', type: 'scatter',
+      yaxis: 'y2', line: {dash:'dot'},
+      text: hoverTap, hovertemplate: 'R=%{x}Ω<br>Eff=%{y:.1f}%<br>%{text}<extra></extra>' },
+  ], {
+    title: { text: `Power & Efficiency @ ${freqLabel}`, font: {size:13} },
+    xaxis: { title: 'R load (Ω)', type: 'log' },
+    yaxis:  { title: 'Power (W)' },
+    yaxis2: { title: 'Efficiency (%)', overlaying: 'y', side: 'right', range: [0, 105] },
+    margin: {t:36, b:42, l:54, r:55},
+    legend: {font:{size:11}},
+    height: plotH,
+  }, {responsive: true, displayModeBar: false});
+
+  document.getElementById('plot-status').textContent =
+    `${rows.length} points, ${rows.filter(r => r.met_target).length} met target`;
+
+  updateTable(rows);
+}
+
+// ============================================================
+// Results table (CSV-equivalent, all rows for selected freq)
+// ============================================================
+const _CSV_COLS = [
+  { key: 'freq_hz',           label: 'freq (Hz)'     },
+  { key: 'Z_load_R',          label: 'R (Ω)'         },
+  { key: 'Z_load_X',          label: 'X (Ω)'         },
+  { key: 'target_power_W',    label: 'target (W)'    },
+  { key: 'met_target',        label: 'met'           },
+  { key: 'power_error_pct',   label: 'err (%)'       },
+  { key: 'primary_tap',       label: 'P tap'         },
+  { key: 'secondary_tap',     label: 'S tap'         },
+  { key: 'Vp_rms',            label: 'Vp (V)'        },
+  { key: 'Np_eff',            label: 'Np'            },
+  { key: 'Ns_eff',            label: 'Ns'            },
+  { key: 'turns_ratio',       label: 'ratio'         },
+  { key: 'B_peak_T',          label: 'B (T)'         },
+  { key: 'Vs_rms',            label: 'Vs (V)'        },
+  { key: 'Ip_rms',            label: 'Ip (A)'        },
+  { key: 'Is_rms',            label: 'Is (A)'        },
+  { key: 'load_phase_deg',    label: 'phase (°)'     },
+  { key: 'Rp_ohm',            label: 'Rp (Ω)'        },
+  { key: 'Rs_ohm',            label: 'Rs (Ω)'        },
+  { key: 'P_out_W',           label: 'P_out (W)'     },
+  { key: 'P_cu_W',            label: 'P_cu (W)'      },
+  { key: 'P_cu_primary_W',    label: 'P_cu_p (W)'    },
+  { key: 'P_cu_secondary_W',  label: 'P_cu_s (W)'    },
+  { key: 'P_core_W',          label: 'P_core (W)'    },
+  { key: 'P_in_W',            label: 'P_in (W)'      },
+  { key: 'efficiency',        label: 'eff'           },
+];
+
+function fmtCell(key, val) {
+  if (val === null || val === undefined) return '<span class="cell-null">—</span>';
+  if (key === 'met_target') {
+    return val
+      ? '<span class="cell-ok">YES</span>'
+      : '<span class="cell-bad">NO</span>';
+  }
+  if (key === 'efficiency' && typeof val === 'number') {
+    return (val * 100).toFixed(2) + '%';
+  }
+  if (typeof val === 'number') {
+    // integers: no decimals; floats: 2 decimal places
+    return Number.isInteger(val) ? val : val.toFixed(2);
+  }
+  return val;
+}
+
+function updateTable(rows) {
+  document.getElementById('table-card').style.display = 'block';
+
+  const thead = document.getElementById('sweep-table-head');
+  const tbody = document.getElementById('sweep-table-body');
+
+  thead.innerHTML = '<tr>' + _CSV_COLS.map(c => `<th>${c.label}</th>`).join('') + '</tr>';
+
+  tbody.innerHTML = rows.map(r =>
+    '<tr>' + _CSV_COLS.map(c => `<td>${fmtCell(c.key, r[c.key])}</td>`).join('') + '</tr>'
+  ).join('');
+}
+
+function triggerCsvDownload() {
+  if (!sweepData) return false;
+  const cols = _CSV_COLS.map(c => c.key);
+  const header = _CSV_COLS.map(c => c.label).join(',');
+  const lines = sweepData.rows.map(r =>
+    cols.map(k => {
+      const v = r[k];
+      if (v === null || v === undefined) return '';
+      if (k === 'efficiency' && typeof v === 'number') return (v * 100).toFixed(4);
+      if (typeof v === 'number') return Number.isInteger(v) ? v : v.toFixed(4);
+      return v;
+    }).join(',')
+  );
+  const csv = [header, ...lines].join('\r\n');
+  const blob = new Blob([csv], {type: 'text/csv'});
+  const url = URL.createObjectURL(blob);
+  const a = document.getElementById('csv-download');
+  a.href = url;
+  // Let the browser follow the href naturally for download
+  setTimeout(() => URL.revokeObjectURL(url), 5000);
+  return true;  // allow default href navigation (triggers download)
+}
+
+// ============================================================
+// Helpers
+// ============================================================
+function setMsg(el, type, text) {
+  el.className = 'msg visible msg-' + type;
+  el.textContent = text;
+}
+
+// Calculate per-plot height.
+// Uses an explicit override when set (e.g. from a manual resize), otherwise 300px default.
+let _plotHeightOverride = null;
+
+function calcPlotHeight() {
+  return _plotHeightOverride !== null ? _plotHeightOverride : 300;
+}
+
+// Re-render plots when the user manually drags the card taller.
+// We detect manual resize by watching card.style.height (set by the browser's
+// resize handle), NOT clientHeight (which changes when plot content grows).
+(function setupResizeObserver() {
+  const card = document.getElementById('plots-card');
+  if (!card || typeof ResizeObserver === 'undefined') return;
+  let rafId = null;
+  const ro = new ResizeObserver(() => {
+    // Only act when the inline style height is set (i.e. user dragged the handle)
+    const styleH = parseInt(card.style.height);
+    if (!styleH || isNaN(styleH)) return;
+    // Derive plot height from the dragged card height
+    const newPlotH = Math.max(220, styleH - 84);
+    if (newPlotH === _plotHeightOverride) return;
+    _plotHeightOverride = newPlotH;
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      if (sweepData) updatePlots();
+    });
+  });
+  ro.observe(card);
+})();
+
+// ============================================================
+// Initialise with default windings
+// ============================================================
+addWinding('primary',   [25, 50],        [22, 22]);
+addWinding('secondary', [100, 50, 50, 50], [22, 22, 22, 26]);
+</script>
+
+</body>
+</html>
diff --git a/templates/manual.html b/templates/manual.html
new file mode 100644
index 0000000..a736e1c
--- /dev/null
+++ b/templates/manual.html
@@ -0,0 +1,562 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Manual Simulation - Transformer</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+            min-height: 100vh;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            padding: 30px;
+        }
+
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+
+        h1 {
+            color: #333;
+        }
+
+        .nav-link {
+            color: #667eea;
+            text-decoration: none;
+            padding: 10px 20px;
+            border: 2px solid #667eea;
+            border-radius: 20px;
+            transition: all 0.3s;
+        }
+
+        .nav-link:hover {
+            background: #667eea;
+            color: white;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 30px;
+        }
+
+        .controls {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+
+        .control-group {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 8px;
+            border: 1px solid #e0e0e0;
+        }
+
+        .control-group h3 {
+            color: #555;
+            font-size: 14px;
+            margin-bottom: 15px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+
+        .slider-container, .select-container {
+            margin-bottom: 15px;
+        }
+
+        .slider-container:last-child, .select-container:last-child {
+            margin-bottom: 0;
+        }
+
+        label {
+            display: flex;
+            justify-content: space-between;
+            font-weight: 500;
+            color: #333;
+            margin-bottom: 8px;
+            font-size: 14px;
+        }
+
+        .value-display {
+            color: #667eea;
+            font-weight: bold;
+        }
+
+        input[type="range"] {
+            width: 100%;
+            height: 8px;
+            border-radius: 5px;
+            background: #d3d3d3;
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        input[type="range"]::-webkit-slider-thumb:hover {
+            background: #764ba2;
+            transform: scale(1.1);
+        }
+
+        select {
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #e0e0e0;
+            border-radius: 5px;
+            font-size: 14px;
+            background: white;
+            cursor: pointer;
+            transition: border-color 0.3s;
+        }
+
+        select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        .button-container {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 15px 40px;
+            font-size: 16px;
+            font-weight: bold;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+        }
+
+        button:active {
+            transform: translateY(0);
+        }
+
+        button:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        .results {
+            background: #f8f9fa;
+            border-radius: 10px;
+            padding: 25px;
+            border: 2px solid #667eea;
+        }
+
+        .results h2 {
+            color: #333;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+
+        .results-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 15px;
+        }
+
+        .result-card {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            border-left: 4px solid #667eea;
+        }
+
+        .result-card h4 {
+            color: #555;
+            font-size: 12px;
+            text-transform: uppercase;
+            margin-bottom: 8px;
+            letter-spacing: 1px;
+        }
+
+        .result-value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+
+        .result-unit {
+            font-size: 14px;
+            color: #666;
+            margin-left: 5px;
+        }
+
+        .error {
+            background: #fee;
+            border: 2px solid #f66;
+            color: #c33;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .loading {
+            text-align: center;
+            padding: 20px;
+            color: #667eea;
+            font-weight: bold;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .efficiency-high {
+            border-left-color: #22c55e;
+        }
+
+        .efficiency-medium {
+            border-left-color: #f59e0b;
+        }
+
+        .efficiency-low {
+            border-left-color: #ef4444;
+        }
+
+        .tap-info {
+            font-size: 12px;
+            color: #666;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🔧 Manual Simulation</h1>
+            <a href="/" class="nav-link">⚡ Go to Optimizer</a>
+        </div>
+        <p class="subtitle">Directly specify tap settings and input voltage to simulate transformer performance</p>
+
+        <div class="controls">
+            <div class="control-group">
+                <h3>Tap Selection</h3>
+                <div class="select-container">
+                    <label>
+                        <span>Primary Tap</span>
+                    </label>
+                    <select id="primary-tap">
+                        <option value="1">Tap 1 (50 turns)</option>
+                        <option value="2">Tap 2 (100 turns)</option>
+                    </select>
+                </div>
+                <div class="select-container">
+                    <label>
+                        <span>Secondary Tap</span>
+                    </label>
+                    <select id="secondary-tap">
+                        <option value="1">Tap 1 (100 turns)</option>
+                        <option value="2">Tap 2 (150 turns)</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="control-group">
+                <h3>Input Parameters</h3>
+                <div class="slider-container">
+                    <label>
+                        <span>Input Voltage</span>
+                        <span class="value-display"><span id="vp-value">12</span> V</span>
+                    </label>
+                    <input type="range" id="vp" min="1" max="100" value="12" step="0.5">
+                </div>
+                <div class="slider-container">
+                    <label>
+                        <span>Frequency</span>
+                        <span class="value-display"><span id="freq-value">2000</span> Hz</span>
+                    </label>
+                    <input type="range" id="freq" min="100" max="50000" value="2000" step="100">
+                </div>
+            </div>
+
+            <div class="control-group">
+                <h3>Load Conditions</h3>
+                <div class="slider-container">
+                    <label>
+                        <span>Load Resistance</span>
+                        <span class="value-display"><span id="load-value">100</span> Ω</span>
+                    </label>
+                    <input type="range" id="load" min="5" max="10000" value="100" step="5">
+                </div>
+            </div>
+        </div>
+
+        <div class="button-container">
+            <button id="simulate-btn" onclick="runSimulation()">▶️ Run Simulation</button>
+        </div>
+
+        <div id="loading" class="loading hidden">
+            Running simulation...
+        </div>
+
+        <div id="error" class="error hidden"></div>
+
+        <div id="results" class="results hidden">
+            <h2>Simulation Results</h2>
+            <div class="results-grid">
+                <div class="result-card" id="efficiency-card">
+                    <h4>Efficiency</h4>
+                    <div class="result-value">
+                        <span id="efficiency">-</span><span class="result-unit">%</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Output Power</h4>
+                    <div class="result-value">
+                        <span id="p-out">-</span><span class="result-unit">W</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Input Power</h4>
+                    <div class="result-value">
+                        <span id="p-in">-</span><span class="result-unit">W</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Primary Turns</h4>
+                    <div class="result-value">
+                        <span id="np-eff">-</span><span class="result-unit">turns</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Secondary Turns</h4>
+                    <div class="result-value">
+                        <span id="ns-eff">-</span><span class="result-unit">turns</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Turns Ratio</h4>
+                    <div class="result-value">
+                        <span id="turns-ratio">-</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Input Voltage</h4>
+                    <div class="result-value">
+                        <span id="vp-rms">-</span><span class="result-unit">V</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Output Voltage</h4>
+                    <div class="result-value">
+                        <span id="vs-rms">-</span><span class="result-unit">V</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Input Current</h4>
+                    <div class="result-value">
+                        <span id="ip-rms">-</span><span class="result-unit">A</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Output Current</h4>
+                    <div class="result-value">
+                        <span id="is-rms">-</span><span class="result-unit">A</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Flux Density</h4>
+                    <div class="result-value">
+                        <span id="b-peak">-</span><span class="result-unit">T</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Copper Loss (Primary)</h4>
+                    <div class="result-value">
+                        <span id="p-cu-primary">-</span><span class="result-unit">W</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Copper Loss (Secondary)</h4>
+                    <div class="result-value">
+                        <span id="p-cu-secondary">-</span><span class="result-unit">W</span>
+                    </div>
+                </div>
+                <div class="result-card">
+                    <h4>Core Loss</h4>
+                    <div class="result-value">
+                        <span id="p-core">-</span><span class="result-unit">W</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Update slider value displays
+        const sliders = {
+            'vp': { element: 'vp-value', format: (v) => parseFloat(v).toFixed(1) },
+            'freq': { element: 'freq-value', format: (v) => Math.round(v) },
+            'load': { element: 'load-value', format: (v) => Math.round(v) },
+        };
+
+        for (const [id, config] of Object.entries(sliders)) {
+            const slider = document.getElementById(id);
+            const display = document.getElementById(config.element);
+            slider.addEventListener('input', (e) => {
+                display.textContent = config.format(e.target.value);
+            });
+        }
+
+        async function runSimulation() {
+            const btn = document.getElementById('simulate-btn');
+            const loading = document.getElementById('loading');
+            const results = document.getElementById('results');
+            const error = document.getElementById('error');
+
+            // Hide previous results/errors
+            results.classList.add('hidden');
+            error.classList.add('hidden');
+
+            // Show loading
+            btn.disabled = true;
+            loading.classList.remove('hidden');
+
+            try {
+                const response = await fetch('/api/simulate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        primary_tap: parseInt(document.getElementById('primary-tap').value),
+                        secondary_tap: parseInt(document.getElementById('secondary-tap').value),
+                        Vp_rms: parseFloat(document.getElementById('vp').value),
+                        freq_hz: parseFloat(document.getElementById('freq').value),
+                        load_ohms: parseFloat(document.getElementById('load').value),
+                    }),
+                });
+
+                const data = await response.json();
+
+                if (data.success) {
+                    displayResults(data.result);
+                } else {
+                    showError(data.error);
+                }
+            } catch (err) {
+                showError('Network error: ' + err.message);
+            } finally {
+                btn.disabled = false;
+                loading.classList.add('hidden');
+            }
+        }
+
+        function displayResults(result) {
+            document.getElementById('efficiency').textContent = result.efficiency;
+            document.getElementById('p-out').textContent = result.P_out_W;
+            document.getElementById('p-in').textContent = result.P_in_W;
+            document.getElementById('np-eff').textContent = result.Np_eff;
+            document.getElementById('ns-eff').textContent = result.Ns_eff;
+            document.getElementById('turns-ratio').textContent = result.turns_ratio;
+            document.getElementById('vp-rms').textContent = result.Vp_rms;
+            document.getElementById('vs-rms').textContent = result.Vs_rms;
+            document.getElementById('ip-rms').textContent = result.Ip_rms;
+            document.getElementById('is-rms').textContent = result.Is_rms;
+            document.getElementById('b-peak').textContent = result.B_peak_T;
+            document.getElementById('p-cu-primary').textContent = result.P_cu_primary_W;
+            document.getElementById('p-cu-secondary').textContent = result.P_cu_secondary_W;
+            document.getElementById('p-core').textContent = result.P_core_W;
+
+            // Color code efficiency
+            const effCard = document.getElementById('efficiency-card');
+            effCard.classList.remove('efficiency-high', 'efficiency-medium', 'efficiency-low');
+            if (result.efficiency >= 90) {
+                effCard.classList.add('efficiency-high');
+            } else if (result.efficiency >= 80) {
+                effCard.classList.add('efficiency-medium');
+            } else {
+                effCard.classList.add('efficiency-low');
+            }
+
+            document.getElementById('results').classList.remove('hidden');
+        }
+
+        function showError(message) {
+            const errorDiv = document.getElementById('error');
+            errorDiv.textContent = message;
+            errorDiv.classList.remove('hidden');
+        }
+
+        // Load transformer info on page load
+        async function loadTransformerInfo() {
+            try {
+                const response = await fetch('/api/transformer_info');
+                const data = await response.json();
+
+                // Update tap options based on actual transformer
+                const primarySelect = document.getElementById('primary-tap');
+                const secondarySelect = document.getElementById('secondary-tap');
+
+                primarySelect.innerHTML = '';
+                secondarySelect.innerHTML = '';
+
+                // Primary taps (skip first element which is 0)
+                for (let i = 1; i < data.primary_taps.length; i++) {
+                    const turns = data.primary_taps.slice(1, i + 1).reduce((a, b) => a + b, 0);
+                    const option = document.createElement('option');
+                    option.value = i;
+                    option.textContent = `Tap ${i} (${turns} turns)`;
+                    primarySelect.appendChild(option);
+                }
+
+                // Secondary taps
+                for (let i = 1; i < data.secondary_taps.length; i++) {
+                    const turns = data.secondary_taps.slice(1, i + 1).reduce((a, b) => a + b, 0);
+                    const option = document.createElement('option');
+                    option.value = i;
+                    option.textContent = `Tap ${i} (${turns} turns)`;
+                    secondarySelect.appendChild(option);
+                }
+            } catch (err) {
+                console.error('Failed to load transformer info:', err);
+            }
+        }
+
+        // Load on page load
+        loadTransformerInfo();
+    </script>
+</body>
+</html>