diff --git a/public/calculator.html b/public/calculator.html
index fd7efb2..641912f 100644
--- a/public/calculator.html
+++ b/public/calculator.html
@@ -1,638 +1,1148 @@
 {% extends "base.html" %}
 
 {% block title %}Graphing Calculator{% endblock %}
+{% block meta_description %}Graphing Calculator – visualize and explore mathematical functions interactively on Alpha One Labs.{% endblock %}
+
+{% block head %}
+  <meta name="keywords" content="graphing calculator, math, functions, equations, Alpha One Labs">
+
+  <style>
+    /* Canvas */
+    #graph-canvas { cursor: grab; display: block; width: 100%; height: 100%; touch-action: none; }
+    #graph-canvas:active { cursor: grabbing; }
+
+    /* Equation rows */
+    .eq-row          { transition: opacity 0.18s; }
+    .eq-row.dimmed   { opacity: 0.38; }
+
+    /* Color dot */
+    .color-dot {
+      width: 14px; height: 14px; border-radius: 50%;
+      border: 2px solid rgba(255,255,255,0.7);
+      cursor: pointer; flex-shrink: 0;
+      box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
+      transition: transform 0.12s;
+    }
+    .color-dot:hover { transform: scale(1.25); }
+
+    /* Panel section headers */
+    .panel-section-header {
+      font-size: 0.78rem;
+      font-weight: 600;
+      color: #4b5563;
+      padding: 0.75rem 1rem 0.35rem;
+      border-top: 1px solid #f3f4f6;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .dark .panel-section-header {
+      color: #9ca3af;
+      border-color: #1f2937;
+    }
+
+    /* Control grid buttons */
+    .ctrl-btn {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 3px;
+      height: 50px;
+      border-radius: 10px;
+      font-size: 0.6rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.13s, border-color 0.13s, color 0.13s, transform 0.1s;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      color: #4b5563;
+      user-select: none;
+      letter-spacing: 0.01em;
+    }
+    .dark .ctrl-btn {
+      background: #1f2937;
+      border-color: #374151;
+      color: #9ca3af;
+    }
+    .ctrl-btn:hover {
+      background: #f0fdfa;
+      border-color: #99f6e4;
+      color: #0f766e;
+    }
+    .dark .ctrl-btn:hover {
+      background: #0d3330;
+      border-color: #2dd4bf;
+      color: #5eead4;
+    }
+    .ctrl-btn:active { transform: scale(0.91); }
+    .ctrl-btn i { font-size: 0.85rem; }
+
+    /* Reset button gets a subtle accent */
+    .ctrl-btn.reset-btn {
+      background: #f0fdfa;
+      border-color: #ccfbf1;
+      color: #0f766e;
+    }
+    .dark .ctrl-btn.reset-btn {
+      background: #0d3330;
+      border-color: #115e59;
+      color: #5eead4;
+    }
+    .ctrl-btn.reset-btn:hover {
+      background: #ccfbf1;
+      border-color: #5eead4;
+    }
+    .dark .ctrl-btn.reset-btn:hover {
+      background: #134e4a;
+      border-color: #2dd4bf;
+    }
+
+    /* Direction pad subtle background */
+    .dpad-wrap {
+      background: #f9fafb;
+      border: 1px solid #f3f4f6;
+      border-radius: 12px;
+      padding: 6px;
+    }
+    .dark .dpad-wrap {
+      background: #111827;
+      border-color: #1f2937;
+    }
+
+    /* Left panel — full-height sticky sidebar */
+    #left-panel {
+      width: 300px;
+      min-width: 280px;
+      flex-shrink: 0;
+      position: sticky;
+      top: 70px;                       /* sit flush below the 70px navbar */
+      height: calc(100vh - 70px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      border-right: 1px solid #e5e7eb;
+      border-radius: 0;
+    }
+    .dark #left-panel { border-right-color: #1f2937; }
+
+    /* Thin scrollbar on the sidebar itself */
+    #left-panel::-webkit-scrollbar       { width: 4px; }
+    #left-panel::-webkit-scrollbar-track { background: transparent; }
+    #left-panel::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
+    .dark #left-panel::-webkit-scrollbar-thumb { background: #374151; }
+
+    /* Functions list — no max-height, sidebar handles scroll */
+    #functions-list { overflow: visible; }
+
+    @media (max-width: 1023px) {
+      #left-panel {
+        position: static;
+        width: 100%;
+        min-width: 0;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid #e5e7eb;
+      }
+      .dark #left-panel { border-bottom-color: #1f2937; }
+    }
+
+    /* Examples 3×3 grid — clean, no colour */
+    .ex-btn {
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      gap: 3px;
+      padding: 12px 6px;
+      border-radius: 10px;
+      border: 1px solid #e5e7eb;
+      background: #f9fafb;
+      color: #111827;
+      font-size: 0.78rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background 0.12s, border-color 0.12s;
+      text-align: center;
+      line-height: 1.2;
+    }
+    .ex-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
+    .ex-btn:active { transform: scale(0.96); }
+    .dark .ex-btn {
+      background: #1f2937; border-color: #374151; color: #f9fafb;
+    }
+    .dark .ex-btn:hover { background: #111827; border-color: #4b5563; }
+    .ex-btn .ex-math {
+      font-family: 'Georgia', serif;
+      font-size: 0.68rem;
+      color: #6b7280;
+      font-weight: 400;
+    }
+    .dark .ex-btn .ex-math { color: #9ca3af; }
+
+    /* Hero fade */
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+    .fade-up { animation: fadeUp 0.3s ease both; }
+
+    /* Fullscreen overlay */
+    #fs-overlay {
+      position: fixed; inset: 0; z-index: 9999;
+      display: flex; flex-direction: column;
+      background: #fff;
+    }
+    .dark #fs-overlay { background: #111827; }
+    #fs-overlay.hidden { display: none; }
+    #fs-canvas { cursor: grab; display: block; flex: 1; width: 100%; touch-action: none; }
+    #fs-canvas:active { cursor: grabbing; }
+
+    /* Tooltip */
+    [title] { position: relative; }
+  </style>
+{% endblock %}
+
 {% block content %}
-  <div class="flex flex-col md:flex-row h-screen bg-gray-100 dark:bg-gray-900">
-    <!-- Sidebar -->
-    <div class="w-full md:w-80 bg-white dark:bg-gray-800 shadow-lg p-4 overflow-y-auto">
-      <h1 class="text-2xl font-bold mb-6 text-center text-gray-800 dark:text-white">Graphing Calculator</h1>
-      <!-- Input and Add Function -->
-      <div class="mb-6">
-        <label for="equationInput"
-               class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Enter Equation</label>
-        <div class="flex space-x-2">
-          <input type="text"
-                 id="equationInput"
-                 placeholder="e.g., y = sin(x)"
-                 class="flex-grow p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-700 dark:text-white text-sm" />
-          <button onclick="addEquation()"
-                  class="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none">Add</button>
+
+<!-- Hero -->
+<section class="bg-gradient-to-br from-teal-600 via-teal-500 to-cyan-500 dark:from-teal-900 dark:via-teal-800 dark:to-cyan-900 relative overflow-hidden py-12 md:py-14">
+  <div class="absolute inset-0 pointer-events-none select-none opacity-10" aria-hidden="true">
+    <i class="fas fa-chart-line absolute top-6 left-10 text-8xl"></i>
+    <i class="fas fa-infinity    absolute bottom-4 right-10 text-8xl"></i>
+    <i class="fas fa-square-root-variable absolute top-1/2 right-1/4 -translate-y-1/2 text-6xl"></i>
+  </div>
+  <div class="relative max-w-[90rem] mx-auto px-4 md:px-6 fade-up">
+    <p class="text-teal-100 text-xs font-semibold tracking-widest uppercase mb-2">
+      <i class="fas fa-calculator mr-2"></i>LEARN › Tools
+    </p>
+    <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-2">
+      Graphing Calculator
+    </h1>
+    <p class="text-base text-teal-100 max-w-xl">
+      Visualize mathematical functions, explore equations, and learn through interactive graphing.
+    </p>
+  </div>
+</section>
+
+<main class="flex-1 w-full">
+  <div class="max-w-[90rem] mx-auto">
+
+    <div class="flex flex-col lg:flex-row items-stretch">
+
+      <aside id="left-panel" class="flex flex-col bg-white dark:bg-gray-800 flex-shrink-0">
+
+        <div class="px-4 pt-4 pb-3">
+          <p class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Enter Equation</p>
+          <div class="flex gap-2">
+            <input
+              id="eq-input"
+              type="text"
+              placeholder="e.g., y = sin(x)"
+              class="flex-1 min-w-0 text-sm rounded-lg px-3 py-2.5 bg-gray-50 dark:bg-gray-700/80 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-400 transition-colors"
+              autocomplete="off" spellcheck="false"
+              aria-label="Enter equation expression"
+              onkeydown="if(event.key==='Enter') addFromInput()"
+            />
+            <button type="button"
+              onclick="addFromInput()"
+              class="px-4 py-2.5 text-sm font-semibold rounded-lg bg-teal-500 hover:bg-teal-600 active:bg-teal-700 text-white transition-colors flex-shrink-0 shadow-sm"
+              aria-label="Add equation"
+            >Add</button>
+          </div>
         </div>
-      </div>
-      <!-- Function List -->
-      <div class="mb-6">
-        <h2 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">Functions</h2>
-        <div id="functionList" class="space-y-2 max-h-40 overflow-y-auto">
-          <!-- Functions will be added here dynamically -->
+
+        <div class="panel-section-header">
+          <span class="text-gray-600 dark:text-gray-300">Functions</span>
+          <button type="button"
+            id="clear-all-btn"
+            onclick="askClearAll()"
+            class="text-xs text-red-400 hover:text-red-500 dark:hover:text-red-300 transition-colors flex items-center gap-1 font-medium"
+            aria-label="Clear all equations"
+          ><i class="fas fa-trash-alt text-xs"></i> Clear All</button>
+          <span id="clear-confirm" class="hidden items-center gap-1.5">
+            <span class="text-xs text-gray-500 dark:text-gray-400">Sure?</span>
+            <button type="button"
+              onclick="confirmClearAll()"
+              class="text-xs font-semibold px-2 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-800/40 transition-colors"
+            >Yes</button>
+            <button type="button"
+              onclick="cancelClearAll()"
+              class="text-xs font-semibold px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
+            >No</button>
+          </span>
         </div>
-        <button onclick="clearAll()"
-                class="mt-2 w-full px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700 focus:outline-none text-sm">
-          Clear All
-        </button>
-      </div>
-      <!-- Quick Examples -->
-      <div class="mb-6">
-        <h2 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">Examples</h2>
-        <div class="grid grid-cols-2 gap-2">
-          <button onclick="addExample('y = x^2')"
-                  class="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">
-            Parabola
-          </button>
-          <button onclick="addExample('y = sin(x)')"
-                  class="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">
-            Sine Wave
-          </button>
-          <button onclick="addExample('x^2 + y^2 = 25')"
-                  class="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">
-            Circle
-          </button>
-          <button onclick="addExample('y = tan(x)')"
-                  class="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">
-            Tangent
-          </button>
-          <button onclick="addExample('y = log(x)')"
-                  class="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">
-            Logarithm
-          </button>
-          <button onclick="addExample('y = e^x')"
-                  class="p-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm">
-            Exponential
-          </button>
+        <div id="functions-list" class="divide-y divide-gray-100 dark:divide-gray-700/40" role="list" aria-label="Active equations">
+          <!-- populated by JS -->
         </div>
-      </div>
-      <!-- Zoom and Navigation Controls -->
-      <div class="mb-6">
-        <h2 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">Controls</h2>
-        <div class="grid grid-cols-3 gap-2 mb-2">
-          <button onclick="zoomIn()"
-                  class="p-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none text-sm">
-            Zoom In
-          </button>
-          <button onclick="resetView()"
-                  class="p-2 bg-gray-500 text-white rounded hover:bg-gray-600 focus:outline-none text-sm">
-            Reset
-          </button>
-          <button onclick="zoomOut()"
-                  class="p-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none text-sm">
-            Zoom Out
-          </button>
+
+        <div class="panel-section-header">
+          <span class="text-gray-600 dark:text-gray-300">Examples</span>
         </div>
-        <div class="grid grid-cols-3 gap-2">
-          <button onclick="panLeft()"
-                  class="p-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-600 text-sm">
-            ← Pan
-          </button>
-          <button onclick="panUp()"
-                  class="p-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-600 text-sm">
-            ↑ Pan
-          </button>
-          <button onclick="panRight()"
-                  class="p-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-600 text-sm">
-            Pan →
-          </button>
-          <button onclick="toggleGridLines()"
-                  class="p-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-600 text-sm">
-            Toggle Grid
-          </button>
-          <button onclick="panDown()"
-                  class="p-2 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-white rounded hover:bg-gray-400 dark:hover:bg-gray-600 text-sm">
-            ↓ Pan
-          </button>
-          <button onclick="exportImage()"
-                  class="p-2 bg-green-500 text-white rounded hover:bg-green-600 text-sm">Export</button>
+        <div class="px-4 pb-3 pt-1">
+          <div class="grid grid-cols-3 gap-2">
+            <button type="button" onclick="loadExample(['x^2'],'Parabola')" class="ex-btn">
+              Parabola<span class="ex-math">x²</span>
+            </button>
+            <button type="button" onclick="loadExample(['sin(x)'],'Sine Wave')" class="ex-btn">
+              Sine<span class="ex-math">sin(x)</span>
+            </button>
+            <button type="button" onclick="loadExample(['sqrt(9-x^2)','-sqrt(9-x^2)'],'Circle')" class="ex-btn">
+              Circle<span class="ex-math">x²+y²=9</span>
+            </button>
+            <button type="button" onclick="loadExample(['tan(x)'],'Tangent')" class="ex-btn">
+              Tangent<span class="ex-math">tan(x)</span>
+            </button>
+            <button type="button" onclick="loadExample(['log10(x)'],'Logarithm')" class="ex-btn">
+              Log<span class="ex-math">log(x)</span>
+            </button>
+            <button type="button" onclick="loadExample(['exp(x)'],'Exponential')" class="ex-btn">
+              Exp<span class="ex-math">eˣ</span>
+            </button>
+          </div>
         </div>
-      </div>
-      <!-- Settings -->
-      <div>
-        <h2 class="text-lg font-semibold mb-2 text-gray-800 dark:text-white">Settings</h2>
-        <div class="space-y-2">
+
+        <div class="panel-section-header">
+          <span class="text-gray-600 dark:text-gray-300">Controls</span>
+        </div>
+        <div class="px-4 py-3 space-y-2">
+          <div class="grid grid-cols-3 gap-2">
+            <button type="button" class="ctrl-btn" onclick="zoomIn()"    title="Zoom In">  <i class="fas fa-magnifying-glass-plus"></i>Zoom In</button>
+            <button type="button" class="ctrl-btn reset-btn" onclick="resetView()" title="Reset View"><i class="fas fa-expand-arrows-alt"></i>Reset</button>
+            <button type="button" class="ctrl-btn" onclick="zoomOut()"   title="Zoom Out"> <i class="fas fa-magnifying-glass-minus"></i>Zoom Out</button>
+          </div>
+          <div class="dpad-wrap">
+            <div class="grid grid-cols-3 gap-1.5">
+              <button type="button" class="ctrl-btn" onclick="panLeft()"  title="Pan Left"> <i class="fas fa-arrow-left"></i>Left</button>
+              <button type="button" class="ctrl-btn" onclick="panUp()"    title="Pan Up">   <i class="fas fa-arrow-up"></i>Up</button>
+              <button type="button" class="ctrl-btn" onclick="panRight()" title="Pan Right"><i class="fas fa-arrow-right"></i>Right</button>
+              <button type="button" class="ctrl-btn" id="grid-toggle-btn" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i>Grid</button>
+              <button type="button" class="ctrl-btn" onclick="panDown()"  title="Pan Down"> <i class="fas fa-arrow-down"></i>Down</button>
+              <button type="button" class="ctrl-btn" onclick="exportPNG()" title="Export PNG"><i class="fas fa-download"></i>Export</button>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-section-header">
+          <span class="text-gray-600 dark:text-gray-300">Settings</span>
+        </div>
+        <div class="px-4 pb-4 pt-1 space-y-4">
           <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Grid Size</label>
-            <input type="range"
-                   id="gridSize"
-                   min="20"
-                   max="80"
-                   value="40"
-                   class="w-full"
-                   oninput="updateGridSize(this.value)" />
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-sm text-gray-600 dark:text-gray-400">Grid Size</span>
+              <span id="grid-size-label" class="text-sm font-semibold text-teal-600 dark:text-teal-400">Normal</span>
+            </div>
+            <input
+              id="grid-size-range"
+              type="range" min="1" max="3" step="1" value="2"
+              class="w-full accent-teal-500 cursor-pointer h-1.5"
+              oninput="onGridSizeChange(this.value)"
+              aria-label="Grid size"
+            />
+            <div class="flex justify-between text-xs text-gray-400 dark:text-gray-600 mt-1.5">
+              <span>Fine</span><span>Normal</span><span>Coarse</span>
+            </div>
+          </div>
+          <div>
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-sm text-gray-600 dark:text-gray-400">Line Width</span>
+              <span id="line-width-label" class="text-sm font-semibold text-teal-600 dark:text-teal-400">2px</span>
+            </div>
+            <input
+              id="line-width-range"
+              type="range" min="1" max="4" step="0.5" value="2"
+              class="w-full accent-teal-500 cursor-pointer h-1.5"
+              oninput="onLineWidthChange(this.value)"
+              aria-label="Line width"
+            />
           </div>
         </div>
-      </div>
-    </div>
-    <!-- Main Graph Area -->
-    <div class="flex-grow p-4 flex items-center justify-center">
-      <div class="relative w-full h-full max-w-4xl max-h-3xl">
-        <canvas id="graphCanvas"
-                class="border rounded-lg shadow bg-white dark:bg-gray-700 w-full h-full"></canvas>
-        <div id="coordinates"
-             class="absolute bottom-2 right-2 bg-white dark:bg-gray-800 px-2 py-1 rounded text-sm text-gray-700 dark:text-gray-300">
+
+      </aside>
+
+      <div class="flex-1 min-w-0 flex flex-col gap-2 p-4 md:p-6">
+
+        <div id="error-banner" class="hidden rounded-xl px-3 py-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-sm text-red-700 dark:text-red-300 flex items-start gap-2" role="alert" aria-live="polite">
+          <i class="fas fa-circle-exclamation mt-0.5 flex-shrink-0"></i>
+          <span id="error-text"></span>
         </div>
+
+        <div class="rounded-2xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-md overflow-hidden flex-1" style="min-height:460px; height: calc(100vh - 70px - 120px);">
+          <canvas id="graph-canvas"
+            role="img"
+            aria-label="Interactive graph of mathematical functions. Use mouse wheel to zoom, drag to pan."
+            tabindex="0"
+          ></canvas>
+        </div>
+
+        <div class="flex items-center justify-between text-xs text-gray-400 dark:text-gray-500 px-1">
+          <span id="coords-display">Hover or touch the graph to see coordinates</span>
+          <span id="view-range" class="font-mono"></span>
+        </div>
+
+        <p class="text-xs text-gray-400 dark:text-gray-500 px-1">
+          <i class="fas fa-keyboard mr-1"></i>Arrow keys to pan · <kbd class="px-1 py-0.5 rounded bg-gray-100 dark:bg-gray-700 font-mono">+</kbd>/<kbd class="px-1 py-0.5 rounded bg-gray-100 dark:bg-gray-700 font-mono">−</kbd> to zoom · Scroll wheel or pinch to zoom
+        </p>
       </div>
     </div>
   </div>
-  <!-- Include math.js library -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.min.js"></script>
-  <script>
-      // Canvas setup
-      const canvas = document.getElementById('graphCanvas');
-      const ctx = canvas.getContext('2d');
-      let equations = [];
-      let colors = ["#3B82F6", "#EF4444", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899"];
-
-      // Resize canvas to match container size
-      function resizeCanvas() {
-          const container = canvas.parentElement;
-          canvas.width = container.clientWidth;
-          canvas.height = container.clientHeight;
-          // Reset origin to center if not already set
-          if (!origin.x || !origin.y) {
-              origin.x = canvas.width / 2;
-              origin.y = canvas.height / 2;
-          }
-          redraw();
-      }
+</main>
 
-      window.addEventListener('load', resizeCanvas);
-      window.addEventListener('resize', resizeCanvas);
+<!-- Fullscreen overlay -->
+<div id="fs-overlay" class="hidden">
+  <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 flex-shrink-0">
+    <span class="font-bold text-sm text-gray-700 dark:text-gray-200 flex items-center gap-2">
+      <i class="fas fa-calculator text-teal-500"></i>Graphing Calculator — Fullscreen
+    </span>
+    <div class="flex gap-2">
+      <button type="button" onclick="exportPNG(true)" class="px-3 py-1.5 text-xs rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors">
+        <i class="fas fa-download mr-1"></i>Export
+      </button>
+      <button type="button" onclick="toggleFullscreen()" class="px-3 py-1.5 text-xs rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-200 transition-colors">
+        <i class="fas fa-compress mr-1"></i>Exit Fullscreen
+      </button>
+    </div>
+  </div>
+  <canvas id="fs-canvas" role="img" aria-label="Fullscreen graph"></canvas>
+</div>
 
-      // Coordinate system settings
-      let scale = 40; // pixels per unit
-      let origin = {
-          x: canvas.width / 2,
-          y: canvas.height / 2
-      };
-      let showGrid = true;
+{% endblock %}
 
-      // Function to check if dark mode is currently active
-      function isDarkModeActive() {
-          return document.documentElement.classList.contains('dark');
-      }
+{% block scripts %}
+<!-- math.js -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/13.0.0/math.min.js"></script>
+<script>
+'use strict';
 
-      // Mouse interaction for dragging (panning)
-      let isDragging = false;
-      let lastMousePos = {
-          x: 0,
-          y: 0
-      };
-
-      canvas.addEventListener('mousedown', (e) => {
-          isDragging = true;
-          lastMousePos = {
-              x: e.clientX,
-              y: e.clientY
-          };
-      });
-
-      canvas.addEventListener('mousemove', (e) => {
-          const rect = canvas.getBoundingClientRect();
-          const x = e.clientX - rect.left;
-          const y = e.clientY - rect.top;
-          const mathCoords = toMathCoords(x, y);
-          document.getElementById('coordinates').textContent = `x: ${mathCoords.x.toFixed(2)}, y: ${mathCoords.y.toFixed(2)}`;
-
-          if (isDragging) {
-              const dx = e.clientX - lastMousePos.x;
-              const dy = e.clientY - lastMousePos.y;
-              origin.x += dx;
-              origin.y += dy;
-              lastMousePos = {
-                  x: e.clientX,
-                  y: e.clientY
-              };
-              redraw();
-          }
-      });
-
-      canvas.addEventListener('mouseup', () => {
-          isDragging = false;
-      });
-      canvas.addEventListener('mouseleave', () => {
-          isDragging = false;
-      });
-
-      // Zoom with mouse wheel
-      canvas.addEventListener('wheel', (e) => {
-          e.preventDefault();
-          const rect = canvas.getBoundingClientRect();
-          const mouseX = e.clientX - rect.left;
-          const mouseY = e.clientY - rect.top;
-          const mousePos = toMathCoords(mouseX, mouseY);
-          const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
-          const newScale = scale * zoomFactor;
-          origin.x = mouseX - mousePos.x * newScale;
-          origin.y = mouseY + mousePos.y * newScale;
-          scale = newScale;
-          redraw();
-      });
-
-      // Draw grid, axes, and labels
-      function drawGrid() {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-          const darkMode = isDarkModeActive();
-          const backgroundColor = darkMode ? "#1F2937" : "#FFFFFF";
-          const gridColor = darkMode ? "#4B5563" : "#E5E7EB";
-          const axisColor = darkMode ? "#D1D5DB" : "#000000";
-          const textColor = darkMode ? "#D1D5DB" : "#000000";
-          ctx.fillStyle = backgroundColor;
-          ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-          const xStart = Math.floor((0 - origin.x) / scale);
-          const xEnd = Math.ceil((canvas.width - origin.x) / scale);
-          const yStart = Math.floor((0 - origin.y) / scale);
-          const yEnd = Math.ceil((canvas.height - origin.y) / scale);
-
-          if (showGrid) {
-              ctx.strokeStyle = gridColor;
-              ctx.lineWidth = 1;
-              for (let x = xStart; x <= xEnd; x++) {
-                  const canvasX = origin.x + x * scale;
-                  ctx.beginPath();
-                  ctx.moveTo(canvasX, 0);
-                  ctx.lineTo(canvasX, canvas.height);
-                  ctx.stroke();
-              }
-              for (let y = yStart; y <= yEnd; y++) {
-                  const canvasY = origin.y - y * scale;
-                  ctx.beginPath();
-                  ctx.moveTo(0, canvasY);
-                  ctx.lineTo(canvas.width, canvasY);
-                  ctx.stroke();
-              }
-          }
-
-          // Draw axes
-          ctx.strokeStyle = axisColor;
-          ctx.lineWidth = 2;
-          ctx.beginPath();
-          ctx.moveTo(0, origin.y);
-          ctx.lineTo(canvas.width, origin.y);
-          ctx.stroke();
-          ctx.beginPath();
-          ctx.moveTo(origin.x, 0);
-          ctx.lineTo(origin.x, canvas.height);
-          ctx.stroke();
-
-          // Draw labels on axes
-          ctx.fillStyle = textColor;
-          ctx.font = '12px Arial';
-          ctx.textAlign = 'center';
-          for (let x = xStart; x <= xEnd; x++) {
-              if (x === 0) continue;
-              const canvasX = origin.x + x * scale;
-              ctx.beginPath();
-              ctx.moveTo(canvasX, origin.y - 5);
-              ctx.lineTo(canvasX, origin.y + 5);
-              ctx.stroke();
-              ctx.fillText(x.toString(), canvasX, origin.y + 20);
-          }
-          ctx.textAlign = 'right';
-          for (let y = yStart; y <= yEnd; y++) {
-              if (y === 0) continue;
-              const canvasY = origin.y - y * scale;
-              ctx.beginPath();
-              ctx.moveTo(origin.x - 5, canvasY);
-              ctx.lineTo(origin.x + 5, canvasY);
-              ctx.stroke();
-              ctx.fillText(y.toString(), origin.x - 10, canvasY + 4);
-          }
-          ctx.fillText("0", origin.x - 10, origin.y + 20);
-      }
+// state
 
-      // Coordinate conversion functions
-      function toCanvasCoords(x, y) {
-          return {
-              x: origin.x + x * scale,
-              y: origin.y - y * scale
-          };
-      }
+const PALETTE = [
+  '#0d9488','#7c3aed','#dc2626','#2563eb',
+  '#d97706','#db2777','#059669','#9333ea',
+  '#0891b2','#ea580c','#65a30d','#c026d3',
+];
 
-      function toMathCoords(cx, cy) {
-          return {
-              x: (cx - origin.x) / scale,
-              y: (origin.y - cy) / scale
-          };
-      }
+let equations    = [];   // { id, raw, exprs[], color, enabled, fns[], errors[] }
+let nextId       = 0;
+let nextColorIdx = 0;
+let debounceTimer= null;
 
-      // Plot explicit functions: y = f(x)
-      function plotExplicit(equation, color) {
-          let exprStr = equation.trim();
-          if (exprStr.startsWith("y=")) {
-              exprStr = exprStr.substring(2);
-          }
-          let compiled;
-          try {
-              compiled = math.compile(exprStr);
-          } catch (err) {
-              alert("Error in equation: " + err);
-              return;
-          }
-          ctx.strokeStyle = color;
-          ctx.lineWidth = 2;
-          ctx.beginPath();
-          let firstPoint = true;
-          const xMin = toMathCoords(0, 0).x;
-          const xMax = toMathCoords(canvas.width, 0).x;
-          const step = (xMax - xMin) / canvas.width;
-          for (let x = xMin; x <= xMax; x += step) {
-              let y;
-              try {
-                  y = compiled.evaluate({
-                      x
-                  });
-                  if (!isFinite(y)) {
-                      firstPoint = true;
-                      continue;
-                  }
-              } catch (err) {
-                  firstPoint = true;
-                  continue;
-              }
-              const {
-                  x: cx,
-                  y: cy
-              } = toCanvasCoords(x, y);
-              if (firstPoint) {
-                  ctx.moveTo(cx, cy);
-                  firstPoint = false;
-              } else {
-                  ctx.lineTo(cx, cy);
-              }
-          }
-          ctx.stroke();
-      }
+// View
+let V = { xMin:-10, xMax:10, yMin:-7, yMax:7 };
 
-      // Linear interpolation helper for marching squares
-      function interpolate(p1, p2, v1, v2) {
-          let t = (0 - v1) / (v2 - v1);
-          return {
-              x: p1.x + t * (p2.x - p1.x),
-              y: p1.y + t * (p2.y - p1.y)
-          };
-      }
+// Settings
+let showGrid    = true;
+let gridSizeMul = 1;    // 0.5 = fine, 1 = normal, 2 = coarse
+let lineWidth   = 2;
 
-      // Plot implicit functions using marching squares: f(x,y)=0
-      function plotImplicit(equation, color) {
-          const parts = equation.split("=");
-          if (parts.length !== 2) {
-              alert("Invalid implicit equation format.");
-              return;
-          }
-          const lhs = parts[0].trim();
-          const rhs = parts[1].trim();
-          const lhsCompiled = math.compile(lhs);
-          const rhsCompiled = math.compile(rhs);
-
-          function f(x, y) {
-              try {
-                  return lhsCompiled.evaluate({
-                      x,
-                      y
-                  }) - rhsCompiled.evaluate({
-                      x,
-                      y
-                  });
-              } catch (e) {
-                  return NaN;
-              }
-          }
-          const gridStep = 10;
-          ctx.strokeStyle = color;
-          ctx.lineWidth = 2;
-          ctx.beginPath();
-          for (let j = 0; j < canvas.height - gridStep; j += gridStep) {
-              for (let i = 0; i < canvas.width - gridStep; i += gridStep) {
-                  const topLeft = toMathCoords(i, j);
-                  const topRight = toMathCoords(i + gridStep, j);
-                  const bottomRight = toMathCoords(i + gridStep, j + gridStep);
-                  const bottomLeft = toMathCoords(i, j + gridStep);
-                  const v1 = f(topLeft.x, topLeft.y);
-                  const v2 = f(topRight.x, topRight.y);
-                  const v3 = f(bottomRight.x, bottomRight.y);
-                  const v4 = f(bottomLeft.x, bottomLeft.y);
-                  let index = 0;
-                  if (v1 > 0) index |= 1;
-                  if (v2 > 0) index |= 2;
-                  if (v3 > 0) index |= 4;
-                  if (v4 > 0) index |= 8;
-                  if (index === 0 || index === 15) continue;
-                  let points = [];
-                  if ((index & 1) !== (index & 2)) {
-                      points.push(interpolate({
-                          x: i,
-                          y: j
-                      }, {
-                          x: i + gridStep,
-                          y: j
-                      }, v1, v2));
-                  }
-                  if ((index & 2) !== (index & 4)) {
-                      points.push(interpolate({
-                          x: i + gridStep,
-                          y: j
-                      }, {
-                          x: i + gridStep,
-                          y: j + gridStep
-                      }, v2, v3));
-                  }
-                  if ((index & 8) !== (index & 4)) {
-                      points.push(interpolate({
-                          x: i,
-                          y: j + gridStep
-                      }, {
-                          x: i + gridStep,
-                          y: j + gridStep
-                      }, v4, v3));
-                  }
-                  if ((index & 1) !== (index & 8)) {
-                      points.push(interpolate({
-                          x: i,
-                          y: j
-                      }, {
-                          x: i,
-                          y: j + gridStep
-                      }, v1, v4));
-                  }
-                  if (points.length === 2) {
-                      ctx.moveTo(points[0].x, points[0].y);
-                      ctx.lineTo(points[1].x, points[1].y);
-                  } else if (points.length === 4) {
-                      ctx.moveTo(points[0].x, points[0].y);
-                      ctx.lineTo(points[1].x, points[1].y);
-                      ctx.moveTo(points[2].x, points[2].y);
-                      ctx.lineTo(points[3].x, points[3].y);
-                  }
-              }
-          }
-          ctx.stroke();
-      }
 
-      // Determine whether to plot explicit or implicit based on input format
-      function plotEquation(equation, color) {
-          if (equation.trim().startsWith("y=")) {
-              plotExplicit(equation, color);
-          } else if (equation.includes("=")) {
-              plotImplicit(equation, color);
-          } else {
-              plotExplicit("y=" + equation, color);
-          }
-      }
+function normalizeExpr(raw) {
+  let e = raw.trim();
+  // Strip leading "y =", "f(x) =", "y=" etc.
+  e = e.replace(/^[yfg]\s*\(?\s*x\s*\)?\s*=\s*/i, '').replace(/^y\s*=\s*/i, '');
+  return e;
+}
 
-      // Equation list manipulation
-      function addEquation() {
-          const eqInput = document.getElementById('equationInput');
-          let equation = eqInput.value.trim();
-          if (equation) {
-              const colorIndex = equations.length % colors.length;
-              equations.push({
-                  text: equation,
-                  color: colors[colorIndex],
-                  visible: true
-              });
-              updateFunctionList();
-              redraw();
-              eqInput.value = '';
-          }
-      }
+function compileFn(exprStr) {
+  const e = normalizeExpr(exprStr);
+  if (!e) return null;
+  const compiled = math.compile(e);
+  return function(x) {
+    const scope = { x, pi: Math.PI, e: Math.E, tau: 2 * Math.PI };
+    const result = compiled.evaluate(scope);
+    if (typeof result !== 'number') return NaN;
+    return result;
+  };
+}
 
-      function removeEquation(index) {
-          equations.splice(index, 1);
-          updateFunctionList();
-          redraw();
-      }
+// canvas setup
 
-      function toggleEquationVisibility(index) {
-          equations[index].visible = !equations[index].visible;
-          updateFunctionList();
-          redraw();
-      }
+const canvas = document.getElementById('graph-canvas');
+const ctx    = canvas.getContext('2d');
+let dpr      = window.devicePixelRatio || 1;
 
-      function clearAll() {
-          equations = [];
-          updateFunctionList();
-          redraw();
-      }
+function resizeCanvas() {
+  const c = canvas.parentElement;
+  dpr = window.devicePixelRatio || 1;
+  canvas.width  = c.clientWidth  * dpr;
+  canvas.height = c.clientHeight * dpr;
+  canvas.style.width  = c.clientWidth  + 'px';
+  canvas.style.height = c.clientHeight + 'px';
+  ctx.setTransform(1,0,0,1,0,0);
+  ctx.scale(dpr, dpr);
+  fitAspect(c.clientWidth, c.clientHeight);
+  draw();
+}
 
-      function addExample(equation) {
-          document.getElementById('equationInput').value = equation;
-          addEquation();
-      }
+function fitAspect(w, h) {
+  const cx = (V.xMin + V.xMax) / 2;
+  const cy = (V.yMin + V.yMax) / 2;
+  const rx = (V.xMax - V.xMin) / 2;
+  const ratio = h / w;
+  V.yMin = cy - rx * ratio;
+  V.yMax = cy + rx * ratio;
+}
 
-      function updateFunctionList() {
-          const listContainer = document.getElementById('functionList');
-          listContainer.innerHTML = '';
-          equations.forEach((eq, index) => {
-              const item = document.createElement('div');
-              item.className = 'flex items-center justify-between p-2 bg-gray-100 dark:bg-gray-700 rounded';
-              const leftSection = document.createElement('div');
-              leftSection.className = 'flex items-center space-x-2';
-              const colorIndicator = document.createElement('div');
-              colorIndicator.className = 'w-3 h-3 rounded-full';
-              colorIndicator.style.backgroundColor = eq.color;
-              const checkbox = document.createElement('input');
-              checkbox.type = 'checkbox';
-              checkbox.checked = eq.visible;
-              checkbox.className = 'rounded text-blue-600';
-              checkbox.onclick = () => toggleEquationVisibility(index);
-              const text = document.createElement('span');
-              text.className = 'text-sm text-gray-800 dark:text-gray-200';
-              text.textContent = eq.text;
-              leftSection.appendChild(colorIndicator);
-              leftSection.appendChild(checkbox);
-              leftSection.appendChild(text);
-              const deleteBtn = document.createElement('button');
-              deleteBtn.innerHTML = '&times;';
-              deleteBtn.className = 'text-red-500 hover:text-red-700 font-bold';
-              deleteBtn.onclick = () => removeEquation(index);
-              item.appendChild(leftSection);
-              item.appendChild(deleteBtn);
-              listContainer.appendChild(item);
-          });
-      }
+const LW = () => canvas.clientWidth;
+const LH = () => canvas.clientHeight;
 
-      // Redraw everything
-      function redraw() {
-          drawGrid();
-          equations.forEach(eq => {
-              if (eq.visible) {
-                  plotEquation(eq.text, eq.color);
-              }
-          });
-      }
+function toPixel(x, y) {
+  const w = LW(), h = LH();
+  return {
+    px: ((x - V.xMin) / (V.xMax - V.xMin)) * w,
+    py: h - ((y - V.yMin) / (V.yMax - V.yMin)) * h,
+  };
+}
+function toMath(px, py) {
+  const w = LW(), h = LH();
+  return {
+    x: V.xMin + (px / w) * (V.xMax - V.xMin),
+    y: V.yMin + ((h - py) / h) * (V.yMax - V.yMin),
+  };
+}
 
-      // Pan/Zoom and Control functions
-      function zoomIn() {
-          scale *= 1.2;
-          redraw();
-      }
+// drawing
 
-      function zoomOut() {
-          scale *= 0.8;
-          redraw();
-      }
+function isDark() { return document.documentElement.classList.contains('dark'); }
 
-      function resetView() {
-          scale = 40;
-          origin.x = canvas.width / 2;
-          origin.y = canvas.height / 2;
-          redraw();
-      }
+function draw() {
+  const w = LW(), h = LH(), dark = isDark();
+  ctx.clearRect(0, 0, w, h);
 
-      function panLeft() {
-          origin.x += 50;
-          redraw();
-      }
+  // Background
+  ctx.fillStyle = dark ? '#1f2937' : '#ffffff';
+  ctx.fillRect(0, 0, w, h);
 
-      function panRight() {
-          origin.x -= 50;
-          redraw();
-      }
+  if (showGrid) drawGrid(w, h, dark);
+  drawAxes(w, h, dark);
+  drawCurves(w, h);
+  updateInfoBar();
+}
 
-      function panUp() {
-          origin.y += 50;
-          redraw();
-      }
+function niceStep(range, maxTicks) {
+  const raw = range / maxTicks;
+  const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+  const r   = raw / mag;
+  const step = r < 1.5 ? 1 : r < 3.5 ? 2 : r < 7.5 ? 5 : 10;
+  return step * mag * gridSizeMul;
+}
 
-      function panDown() {
-          origin.y -= 50;
-          redraw();
-      }
+function drawGrid(w, h, dark) {
+  const xStep  = niceStep(V.xMax - V.xMin, 10);
+  const yStep  = niceStep(V.yMax - V.yMin, 8);
 
-      function toggleGridLines() {
-          showGrid = !showGrid;
-          redraw();
-      }
+  ctx.strokeStyle = dark ? 'rgba(255,255,255,0.055)' : 'rgba(0,0,0,0.065)';
+  ctx.lineWidth   = 1;
+
+  const x0 = Math.ceil(V.xMin / xStep) * xStep;
+  for (let x = x0; x <= V.xMax + xStep * 0.01; x += xStep) {
+    const { px } = toPixel(x, 0);
+    ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, h); ctx.stroke();
+  }
+  const y0 = Math.ceil(V.yMin / yStep) * yStep;
+  for (let y = y0; y <= V.yMax + yStep * 0.01; y += yStep) {
+    const { py } = toPixel(0, y);
+    ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(w, py); ctx.stroke();
+  }
+
+  // Tick labels
+  const origin = toPixel(0, 0);
+  const lx = Math.min(Math.max(origin.px + 5, 5), w - 36);
+  const ly = Math.min(Math.max(origin.py + 4, 4), h - 14);
+
+  ctx.fillStyle = dark ? 'rgba(156,163,175,0.85)' : 'rgba(100,116,139,0.85)';
+  ctx.font = '10.5px system-ui,sans-serif';
+
+  ctx.textAlign = 'center'; ctx.textBaseline = 'top';
+  for (let x = x0; x <= V.xMax + xStep * 0.01; x += xStep) {
+    if (Math.abs(x) < xStep * 0.01) continue;
+    const { px } = toPixel(x, 0);
+    ctx.fillText(fmtNum(x), px, ly);
+  }
+  ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
+  for (let y = y0; y <= V.yMax + yStep * 0.01; y += yStep) {
+    if (Math.abs(y) < yStep * 0.01) continue;
+    const { py } = toPixel(0, y);
+    ctx.fillText(fmtNum(y), lx, py);
+  }
+}
+
+function fmtNum(n) {
+  const s = parseFloat(n.toPrecision(5)).toString();
+  return s.length > 8 ? n.toExponential(1) : s;
+}
+
+function drawAxes(w, h, dark) {
+  const o = toPixel(0, 0);
+  ctx.strokeStyle = dark ? 'rgba(255,255,255,0.28)' : 'rgba(15,23,42,0.32)';
+  ctx.lineWidth   = 1.5;
+
+  ctx.beginPath(); ctx.moveTo(0, o.py); ctx.lineTo(w, o.py); ctx.stroke();
+  ctx.beginPath(); ctx.moveTo(o.px, 0); ctx.lineTo(o.px, h); ctx.stroke();
 
-      function updateGridSize(value) {
-          scale = parseInt(value);
-          redraw();
+  // Axis arrows
+  const s = 5;
+  ctx.fillStyle = ctx.strokeStyle;
+  // X arrow
+  ctx.beginPath();
+  ctx.moveTo(w - 1, o.py); ctx.lineTo(w - s * 2, o.py - s); ctx.lineTo(w - s * 2, o.py + s); ctx.closePath(); ctx.fill();
+  // Y arrow
+  ctx.beginPath();
+  ctx.moveTo(o.px, 1); ctx.lineTo(o.px - s, s * 2); ctx.lineTo(o.px + s, s * 2); ctx.closePath(); ctx.fill();
+
+  // Axis labels
+  ctx.fillStyle = dark ? 'rgba(148,163,184,0.9)' : 'rgba(71,85,105,0.9)';
+  ctx.font = 'bold 12px system-ui,sans-serif';
+  ctx.textAlign = 'left';  ctx.textBaseline = 'middle'; ctx.fillText('x', w - 14, o.py - 8);
+  ctx.textAlign = 'left';  ctx.textBaseline = 'top';    ctx.fillText('y', o.px + 6, 4);
+}
+
+function drawCurves(w, h) {
+  const steps = Math.ceil(w * 2.5);
+  const dx    = (V.xMax - V.xMin) / steps;
+  const yRange = V.yMax - V.yMin;
+
+  for (const eq of equations) {
+    if (!eq.enabled) continue;
+
+    for (const fn of eq.fns) {
+      ctx.strokeStyle = eq.color;
+      ctx.lineWidth   = lineWidth;
+      ctx.lineJoin    = 'round';
+      ctx.lineCap     = 'round';
+      ctx.beginPath();
+
+      let penDown = false;
+      let prevY   = null;
+
+      for (let i = 0; i <= steps; i++) {
+        const x = V.xMin + i * dx;
+        let y;
+        try { y = fn(x); } catch (_) { penDown = false; prevY = null; continue; }
+
+        if (!isFinite(y) || isNaN(y)) { penDown = false; prevY = null; continue; }
+
+        // Discontinuity guard (asymptotes)
+        if (prevY !== null && Math.abs(y - prevY) > yRange * 2.5) { penDown = false; }
+        prevY = y;
+
+        const { px, py } = toPixel(x, y);
+        if (!penDown) { ctx.moveTo(px, py); penDown = true; }
+        else           { ctx.lineTo(px, py); }
       }
+      ctx.stroke();
+    }
+  }
+}
+
+function updateInfoBar() {
+  const el = document.getElementById('view-range');
+  if (el) {
+    const f = v => parseFloat(v.toPrecision(4));
+    el.textContent = `x [${f(V.xMin)}, ${f(V.xMax)}]  y [${f(V.yMin)}, ${f(V.yMax)}]`;
+  }
+}
+
+// zoom and pan
+
+function zoomAround(cx, cy, factor) {
+  V.xMin = cx + (V.xMin - cx) * factor;
+  V.xMax = cx + (V.xMax - cx) * factor;
+  V.yMin = cy + (V.yMin - cy) * factor;
+  V.yMax = cy + (V.yMax - cy) * factor;
+  draw();
+}
+
+function zoomIn()  { const c = viewCenter(); zoomAround(c.x, c.y, 0.72); }
+function zoomOut() { const c = viewCenter(); zoomAround(c.x, c.y, 1.39); }
+
+function viewCenter() {
+  return { x: (V.xMin + V.xMax) / 2, y: (V.yMin + V.yMax) / 2 };
+}
+
+function panBy(fx, fy) {
+  const rx = V.xMax - V.xMin, ry = V.yMax - V.yMin;
+  V.xMin += rx * fx; V.xMax += rx * fx;
+  V.yMin += ry * fy; V.yMax += ry * fy;
+  draw();
+}
+
+function panLeft()  { panBy(-0.18,  0); }
+function panRight() { panBy( 0.18,  0); }
+function panUp()    { panBy( 0,  0.18); }
+function panDown()  { panBy( 0, -0.18); }
+
+function resetView() {
+  const w = LW(), h = LH();
+  const ratio = h / w;
+  V = { xMin:-10, xMax:10, yMin:-10 * ratio, yMax:10 * ratio };
+  draw();
+}
+
+// mouse wheel zoom
+canvas.addEventListener('wheel', e => {
+  e.preventDefault();
+  const rect  = canvas.getBoundingClientRect();
+  const { x, y } = toMath(e.clientX - rect.left, e.clientY - rect.top);
+  zoomAround(x, y, e.deltaY > 0 ? 1.14 : 0.88);
+}, { passive: false });
+
+// mouse drag pan
+let drag = { on: false, sx: 0, sy: 0, V0: null };
+
+canvas.addEventListener('mousedown', e => {
+  drag = { on: true, sx: e.clientX, sy: e.clientY, V0: { ...V } };
+});
+window.addEventListener('mousemove', e => {
+  const rect = canvas.getBoundingClientRect();
+  const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+  if (mx >= 0 && mx <= LW() && my >= 0 && my <= LH()) {
+    const { x, y } = toMath(mx, my);
+    const el = document.getElementById('coords-display');
+    if (el) el.textContent = `x = ${x.toFixed(3)},  y = ${y.toFixed(3)}`;
+  }
+  if (!drag.on) return;
+  const rx = drag.V0.xMax - drag.V0.xMin, ry = drag.V0.yMax - drag.V0.yMin;
+  const shx = -((e.clientX - drag.sx) / LW()) * rx;
+  const shy =  ((e.clientY - drag.sy) / LH()) * ry;
+  V.xMin = drag.V0.xMin + shx; V.xMax = drag.V0.xMax + shx;
+  V.yMin = drag.V0.yMin + shy; V.yMax = drag.V0.yMax + shy;
+  draw();
+});
+window.addEventListener('mouseup', () => { drag.on = false; });
+
+// touch events
+let touch = { dist: null, cx: null, cy: null };
+
+canvas.addEventListener('touchstart', e => {
+  if (e.touches.length === 1) {
+    drag = { on: true, sx: e.touches[0].clientX, sy: e.touches[0].clientY, V0: { ...V } };
+    touch.dist = null;
+  } else if (e.touches.length === 2) {
+    drag.on = false;
+    const [t1, t2] = [e.touches[0], e.touches[1]];
+    touch.dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+    const rect  = canvas.getBoundingClientRect();
+    touch.cx = ((t1.clientX + t2.clientX) / 2) - rect.left;
+    touch.cy = ((t1.clientY + t2.clientY) / 2) - rect.top;
+  }
+  e.preventDefault();
+}, { passive: false });
+
+canvas.addEventListener('touchmove', e => {
+  if (e.touches.length === 1 && drag.on) {
+    const rx = drag.V0.xMax - drag.V0.xMin, ry = drag.V0.yMax - drag.V0.yMin;
+    V.xMin = drag.V0.xMin - ((e.touches[0].clientX - drag.sx) / LW()) * rx;
+    V.xMax = drag.V0.xMax - ((e.touches[0].clientX - drag.sx) / LW()) * rx;
+    V.yMin = drag.V0.yMin + ((e.touches[0].clientY - drag.sy) / LH()) * ry;
+    V.yMax = drag.V0.yMax + ((e.touches[0].clientY - drag.sy) / LH()) * ry;
+    draw();
+  } else if (e.touches.length === 2 && touch.dist !== null) {
+    const [t1, t2] = [e.touches[0], e.touches[1]];
+    const d2 = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+    const { x, y } = toMath(touch.cx, touch.cy);
+    zoomAround(x, y, touch.dist / d2);
+    touch.dist = d2;
+  }
+  e.preventDefault();
+}, { passive: false });
+
+canvas.addEventListener('touchend', () => { drag.on = false; touch.dist = null; });
+
+// keyboard navigation
+canvas.addEventListener('keydown', e => {
+  switch (e.key) {
+    case 'ArrowLeft':  panLeft();  break;
+    case 'ArrowRight': panRight(); break;
+    case 'ArrowUp':    panUp();    break;
+    case 'ArrowDown':  panDown();  break;
+    case '+': case '=': zoomIn();  break;
+    case '-': case '_': zoomOut(); break;
+    default: return;
+  }
+  e.preventDefault();
+});
+
+// equation management
+
+function addFromInput() {
+  const inp = document.getElementById('eq-input');
+  const val = inp.value.trim();
+  if (!val) { inp.focus(); return; }
+  addEquation(val);
+  inp.value = '';
+  inp.focus();
+}
+
+function addEquation(raw, color) {
+  const id = nextId++;
+  const c  = color || PALETTE[nextColorIdx % PALETTE.length];
+  nextColorIdx++;
+  const eq = { id, raw, color: c, enabled: true, fns: [], errors: [] };
+  compileEq(eq);
+  equations.push(eq);
+  renderFunctionList();
+  draw();
+  showErrors();
+}
+
+function compileEq(eq) {
+  // An equation might represent multiple curves (e.g., circle = two exprs)
+  eq.fns    = [];
+  eq.errors = [];
+  for (const expr of (Array.isArray(eq.raw) ? eq.raw : [eq.raw])) {
+    try {
+      const fn = compileFn(expr);
+      if (fn) { fn(0); eq.fns.push(fn); } // test-call to catch syntax errors
+    } catch (err) {
+      eq.errors.push(friendlyErr(err.message, expr));
+    }
+  }
+}
 
-      function exportImage() {
-          const link = document.createElement('a');
-          link.download = 'graph.png';
-          link.href = canvas.toDataURL('image/png');
-          link.click();
+function removeEquation(id) {
+  equations = equations.filter(e => e.id !== id);
+  renderFunctionList();
+  draw();
+  showErrors();
+}
+
+function toggleEquation(id) {
+  const eq = equations.find(e => e.id === id);
+  if (eq) eq.enabled = !eq.enabled;
+  renderFunctionList();
+  draw();
+}
+
+function cycleColor(id) {
+  const eq = equations.find(e => e.id === id);
+  if (!eq) return;
+  const i = PALETTE.indexOf(eq.color);
+  eq.color = PALETTE[(i + 1) % PALETTE.length];
+  renderFunctionList();
+  draw();
+}
+
+function splitTopLevel(str) {
+  const parts = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < str.length; i++) {
+    const c = str[i];
+    if (c === '(' || c === '[') depth++;
+    else if (c === ')' || c === ']') depth--;
+    else if (c === ',' && depth === 0) {
+      parts.push(str.slice(start, i));
+      start = i + 1;
+    }
+  }
+  parts.push(str.slice(start));
+  return parts;
+}
+
+function updateEqRowState(eq) {
+  const input = document.getElementById(`eq-raw-${eq.id}`);
+  if (!input) return;
+  const hasErr = eq.errors.length > 0;
+  input.classList.toggle('border-red-400', hasErr);
+  input.classList.toggle('dark:border-red-600', hasErr);
+  input.classList.toggle('border-gray-200', !hasErr);
+  input.classList.toggle('dark:border-gray-600', !hasErr);
+  input.classList.toggle('focus:ring-red-400', hasErr);
+  input.classList.toggle('focus:ring-teal-400', !hasErr);
+}
+
+function onRawInput(id, val) {
+  const eq = equations.find(e => e.id === id);
+  if (!eq) return;
+  // Capture whether this was a multi-part equation before overwriting
+  const wasArray = Array.isArray(eq.raw);
+  eq.raw = wasArray ? splitTopLevel(val).map(s => s.trim()).filter(Boolean) : val;
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    compileEq(eq);
+    // Update just this row's error styling in place — renderFunctionList()
+    // rebuilds all inputs via innerHTML and would steal focus mid-edit.
+    updateEqRowState(eq);
+    draw();
+    showErrors();
+  }, 280);
+}
+
+function askClearAll() {
+  if (!equations.length) return;
+  document.getElementById('clear-all-btn').classList.add('hidden');
+  document.getElementById('clear-confirm').classList.remove('hidden');
+  document.getElementById('clear-confirm').classList.add('flex');
+}
+
+function confirmClearAll() {
+  equations = []; nextColorIdx = 0;
+  renderFunctionList();
+  draw();
+  document.getElementById('error-banner').classList.add('hidden');
+  cancelClearAll();
+}
+
+function cancelClearAll() {
+  document.getElementById('clear-all-btn').classList.remove('hidden');
+  document.getElementById('clear-confirm').classList.add('hidden');
+  document.getElementById('clear-confirm').classList.remove('flex');
+}
+
+function friendlyErr(msg, expr) {
+  if (/unexpected token|syntax|Unexpected/i.test(msg)) return `"${expr}" — invalid syntax`;
+  if (/undefined symbol|Undefined/i.test(msg)) return `"${expr}" — unknown function or variable`;
+  if (/complex/i.test(msg)) return `"${expr}" — result is complex (domain error)`;
+  return `"${expr}" — ${msg.split('\n')[0]}`;
+}
+
+function showErrors() {
+  const banner = document.getElementById('error-banner');
+  const text   = document.getElementById('error-text');
+  const errs   = equations.flatMap(e => e.errors);
+  if (errs.length) {
+    text.textContent = errs.join(' | ');
+    banner.classList.remove('hidden');
+  } else {
+    banner.classList.add('hidden');
+  }
+}
+
+// render function list
+
+function renderFunctionList() {
+  const el = document.getElementById('functions-list');
+  if (!el) return;
+
+  if (!equations.length) {
+    el.innerHTML = `
+      <div class="px-4 py-6 text-center text-sm text-gray-400 dark:text-gray-500">
+        <i class="fas fa-chart-line text-2xl mb-2 block opacity-20"></i>
+        No functions added yet
+      </div>`;
+    return;
+  }
+
+  el.innerHTML = equations.map((eq, idx) => {
+    const rawStr = Array.isArray(eq.raw) ? eq.raw.join(', ') : (eq.raw || '');
+    const hasErr = eq.errors.length > 0;
+    return `
+    <div class="eq-row flex items-center gap-2.5 px-4 py-3 ${eq.enabled ? '' : 'dimmed'}" role="listitem">
+      <button type="button"
+        class="color-dot flex-shrink-0"
+        style="background:${eq.color}"
+        onclick="cycleColor(${eq.id})"
+        title="Click to change colour"
+        aria-label="Equation colour"
+      ></button>
+      <input
+        id="eq-raw-${eq.id}"
+        type="text"
+        value="${esc(rawStr)}"
+        placeholder="e.g. sin(x)"
+        class="flex-1 min-w-0 text-sm rounded-lg px-2.5 py-2 bg-gray-50 dark:bg-gray-700/60
+               border ${hasErr ? 'border-red-400 dark:border-red-600' : 'border-gray-200 dark:border-gray-600'}
+               text-gray-800 dark:text-gray-100 placeholder-gray-400
+               focus:outline-none focus:ring-2 ${hasErr ? 'focus:ring-red-400' : 'focus:ring-teal-400'}
+               transition-colors"
+        oninput="onRawInput(${eq.id}, this.value)"
+        onkeydown="if(event.key==='Enter'){compileEq(equations.find(e=>e.id===${eq.id}));renderFunctionList();draw();showErrors();}"
+        aria-label="Equation ${idx + 1}"
+        autocomplete="off" spellcheck="false"
+      />
+      <button type="button"
+        onclick="toggleEquation(${eq.id})"
+        class="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-lg
+               ${eq.enabled ? 'text-teal-500 hover:bg-teal-50 dark:hover:bg-teal-900/20' : 'text-gray-300 dark:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'}
+               transition-colors"
+        title="${eq.enabled ? 'Hide' : 'Show'}"
+        aria-pressed="${eq.enabled}"
+        aria-label="${eq.enabled ? 'Hide' : 'Show'} equation ${idx + 1}"
+      ><i class="fas ${eq.enabled ? 'fa-eye' : 'fa-eye-slash'} text-xs"></i></button>
+      <button type="button"
+        onclick="removeEquation(${eq.id})"
+        class="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-lg
+               text-gray-300 dark:text-gray-600 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+        title="Remove"
+        aria-label="Remove equation ${idx + 1}"
+      ><i class="fas fa-times text-xs"></i></button>
+    </div>`;
+  }).join('');
+}
+
+function esc(s) {
+  return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}
+
+// examples
+
+function loadExample(exprs, label) {
+  // For multi-part examples like circles, add all parts sharing one color slot
+  const c = PALETTE[nextColorIdx % PALETTE.length];
+  nextColorIdx++;
+  const id = nextId++;
+  const eq = { id, raw: exprs, color: c, enabled: true, fns: [], errors: [] };
+  compileEq(eq);
+  equations.push(eq);
+  renderFunctionList();
+  draw();
+  showErrors();
+}
+
+// settings
+
+function toggleGrid() {
+  showGrid = !showGrid;
+  const btn = document.getElementById('grid-toggle-btn');
+  if (btn) {
+    btn.style.background   = showGrid ? '' : (isDark() ? '#134e4a' : '#f0fdfa');
+    btn.style.borderColor  = showGrid ? '' : '#5eead4';
+    btn.style.color        = showGrid ? '' : '#0f766e';
+  }
+  draw();
+}
+
+const GRID_LABELS = { '1':'Fine', '2':'Normal', '3':'Coarse' };
+const GRID_MULS   = { '1': 0.5,   '2': 1,       '3': 2 };
+
+function onGridSizeChange(val) {
+  gridSizeMul = GRID_MULS[val] || 1;
+  document.getElementById('grid-size-label').textContent = GRID_LABELS[val] || 'Normal';
+  draw();
+}
+
+function onLineWidthChange(val) {
+  lineWidth = parseFloat(val);
+  document.getElementById('line-width-label').textContent = lineWidth + 'px';
+  draw();
+}
+
+// export
+
+function exportPNG(fromFs) {
+  const src   = fromFs ? fsCanvas : canvas;
+  const link  = document.createElement('a');
+  link.download = 'graph.png';
+  link.href     = src.toDataURL('image/png');
+  link.click();
+}
+
+// fullscreen
+
+const fsOverlay = document.getElementById('fs-overlay');
+const fsCanvas  = document.getElementById('fs-canvas');
+const fsCtx     = fsCanvas.getContext('2d');
+let fsDpr       = 1;
+let fsOn        = false;
+
+function toggleFullscreen() {
+  fsOn = !fsOn;
+  if (fsOn) {
+    fsOverlay.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+    setupFs();
+  } else {
+    fsOverlay.classList.add('hidden');
+    document.body.style.overflow = '';
+  }
+}
+
+function setupFs() {
+  fsDpr = window.devicePixelRatio || 1;
+  const w = window.innerWidth, h = window.innerHeight - 44;
+  fsCanvas.width  = w * fsDpr; fsCanvas.height = h * fsDpr;
+  fsCanvas.style.width = w + 'px'; fsCanvas.style.height = h + 'px';
+  fsCtx.setTransform(1,0,0,1,0,0); fsCtx.scale(fsDpr, fsDpr);
+  drawFs(w, h);
+}
+
+function drawFs(w, h) {
+  const dark = isDark();
+  fsCtx.clearRect(0,0,w,h);
+  fsCtx.fillStyle = dark ? '#1f2937' : '#fff';
+  fsCtx.fillRect(0,0,w,h);
+
+  function fsPx(x, y) {
+    return {
+      px: ((x - V.xMin) / (V.xMax - V.xMin)) * w,
+      py: h - ((y - V.yMin) / (V.yMax - V.yMin)) * h,
+    };
+  }
+
+  if (showGrid) {
+    const xStep = niceStep(V.xMax - V.xMin, 12), yStep = niceStep(V.yMax - V.yMin, 9);
+    fsCtx.strokeStyle = dark ? 'rgba(255,255,255,0.055)' : 'rgba(0,0,0,0.065)';
+    fsCtx.lineWidth = 1;
+    for (let x = Math.ceil(V.xMin/xStep)*xStep; x <= V.xMax; x += xStep) {
+      const { px } = fsPx(x, 0);
+      fsCtx.beginPath(); fsCtx.moveTo(px,0); fsCtx.lineTo(px,h); fsCtx.stroke();
+    }
+    for (let y = Math.ceil(V.yMin/yStep)*yStep; y <= V.yMax; y += yStep) {
+      const { py } = fsPx(0, y);
+      fsCtx.beginPath(); fsCtx.moveTo(0,py); fsCtx.lineTo(w,py); fsCtx.stroke();
+    }
+  }
+
+  const o = fsPx(0, 0);
+  fsCtx.strokeStyle = dark ? 'rgba(255,255,255,0.28)' : 'rgba(15,23,42,0.32)';
+  fsCtx.lineWidth = 1.5;
+  fsCtx.beginPath(); fsCtx.moveTo(0,o.py); fsCtx.lineTo(w,o.py); fsCtx.stroke();
+  fsCtx.beginPath(); fsCtx.moveTo(o.px,0); fsCtx.lineTo(o.px,h); fsCtx.stroke();
+
+  const steps = Math.ceil(w * 2.5), dx = (V.xMax - V.xMin) / steps;
+  for (const eq of equations) {
+    if (!eq.enabled) continue;
+    for (const fn of eq.fns) {
+      fsCtx.strokeStyle = eq.color; fsCtx.lineWidth = lineWidth + 0.5;
+      fsCtx.beginPath();
+      let penDown = false, prevY = null;
+      for (let i = 0; i <= steps; i++) {
+        const x = V.xMin + i * dx;
+        let y; try { y = fn(x); } catch(_) { penDown=false; prevY=null; continue; }
+        if (!isFinite(y)||isNaN(y)) { penDown=false; prevY=null; continue; }
+        if (prevY!==null && Math.abs(y-prevY) > (V.yMax-V.yMin)*2.5) penDown=false;
+        prevY=y;
+        const { px, py } = fsPx(x, y);
+        if (!penDown) { fsCtx.moveTo(px,py); penDown=true; } else fsCtx.lineTo(px,py);
       }
+      fsCtx.stroke();
+    }
+  }
+}
+
+// Fullscreen drag
+let fsDrag = { on:false, sx:0, sy:0, V0:null };
+fsCanvas.addEventListener('mousedown', e => { fsDrag={on:true,sx:e.clientX,sy:e.clientY,V0:{...V}}; });
+window.addEventListener('mousemove', e => {
+  if (!fsDrag.on) return;
+  const w=fsCanvas.clientWidth, h=fsCanvas.clientHeight;
+  const rx=fsDrag.V0.xMax-fsDrag.V0.xMin, ry=fsDrag.V0.yMax-fsDrag.V0.yMin;
+  V.xMin=fsDrag.V0.xMin-((e.clientX-fsDrag.sx)/w)*rx;
+  V.xMax=fsDrag.V0.xMax-((e.clientX-fsDrag.sx)/w)*rx;
+  V.yMin=fsDrag.V0.yMin+((e.clientY-fsDrag.sy)/h)*ry;
+  V.yMax=fsDrag.V0.yMax+((e.clientY-fsDrag.sy)/h)*ry;
+  drawFs(w, h);
+});
+window.addEventListener('mouseup', () => { fsDrag.on=false; });
+fsCanvas.addEventListener('wheel', e => {
+  e.preventDefault();
+  const w=fsCanvas.clientWidth, h=fsCanvas.clientHeight;
+  const rect=fsCanvas.getBoundingClientRect();
+  const mx=e.clientX-rect.left, my=e.clientY-rect.top;
+  const x=V.xMin+(mx/w)*(V.xMax-V.xMin), y=V.yMin+((h-my)/h)*(V.yMax-V.yMin);
+  const f=e.deltaY>0?1.14:0.88;
+  V.xMin=x+(V.xMin-x)*f; V.xMax=x+(V.xMax-x)*f;
+  V.yMin=y+(V.yMin-y)*f; V.yMax=y+(V.yMax-y)*f;
+  drawFs(w, h);
+}, { passive: false });
+
+// redraw on dark mode toggle
+
+new MutationObserver(() => {
+  draw();
+  if (fsOn) drawFs(fsCanvas.clientWidth, fsCanvas.clientHeight);
+}).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+
+// init
+
+window.addEventListener('resize', () => {
+  resizeCanvas();
+  if (fsOn) setupFs();
+});
 
-      // Initialize on page load
-      window.addEventListener('load', () => {
-          resetView();
-      });
-
-      // Listen for changes to the document's dark mode class
-      const observer = new MutationObserver((mutations) => {
-          mutations.forEach((mutation) => {
-              if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                  // Redraw when dark mode class changes
-                  redraw();
-              }
-          });
-      });
-
-      // Start observing the document element for class changes
-      observer.observe(document.documentElement, {
-          attributes: true,
-          attributeFilter: ['class']
-      });
-  </script>
+document.addEventListener('DOMContentLoaded', () => {
+  resizeCanvas();
+  draw();
+});
+</script>
 {% endblock %}