diff --git a/compose.yaml b/compose.yaml
new file mode 100644
index 0000000..18d7e03
--- /dev/null
+++ b/compose.yaml
@@ -0,0 +1,8 @@
+services:
+  web:
+    build: .
+    ports:
+      - "8080:80"
+    volumes:
+      - .:/usr/share/nginx/html:delegated,Z
+    restart: unless-stopped
diff --git a/css/style.css b/css/style.css
index 991e790..669cfa1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -795,3 +795,452 @@ footer {
 [data-theme="dark"] .send-btn:hover:not(:disabled) {
   background: linear-gradient(135deg, var(--pink-500), #1a1a3e);
 }
+
+/* LLM interactive elements */
+.llm-btn {
+  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
+  color: var(--white);
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: background 0.2s, transform 0.1s, opacity 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.llm-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
+  transform: translateY(-1px);
+}
+
+.llm-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.llm-btn .icon {
+  font-size: 1rem;
+}
+
+.llm-response-area {
+  background: var(--pink-100);
+  border: 2px solid var(--pink-300);
+  border-radius: 12px;
+  padding: 1rem 1.2rem;
+  margin-top: 0.8rem;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  max-height: 400px;
+  overflow-y: auto;
+  display: none;
+}
+
+.llm-response-area.visible {
+  display: block;
+  animation: llmFadeIn 0.3s ease-out;
+}
+
+@keyframes llmFadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.llm-loading {
+  color: var(--pink-500);
+  font-style: italic;
+}
+
+.llm-error {
+  color: var(--pink-700);
+  font-weight: 600;
+}
+
+.llm-inline-code {
+  background: var(--white);
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.85em;
+  border: 1px solid var(--pink-300);
+}
+
+.llm-code-block {
+  background: var(--pink-50);
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 0.85rem;
+  border: 1px solid var(--pink-200);
+  margin: 0.5rem 0;
+}
+
+.llm-code-block code {
+  font-family: 'Courier New', monospace;
+  white-space: pre-wrap;
+}
+
+.llm-mini-chat {
+  display: none;
+  background: var(--white);
+  border: 2px solid var(--pink-300);
+  border-radius: 16px;
+  padding: 1.2rem;
+  margin-top: 1rem;
+  box-shadow: var(--shadow-lg);
+}
+
+.llm-mini-chat.visible {
+  display: block;
+  animation: llmFadeIn 0.3s ease-out;
+}
+
+.llm-mini-chat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.8rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--pink-200);
+}
+
+.llm-mini-chat-header h4 {
+  color: var(--pink-600);
+  font-size: 0.95rem;
+  margin: 0;
+}
+
+.llm-close-btn {
+  background: none;
+  border: none;
+  color: var(--pink-500);
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0.2rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.llm-close-btn:hover {
+  color: var(--pink-700);
+}
+
+.llm-mini-chat-output {
+  background: var(--pink-50);
+  border: 1px solid var(--pink-200);
+  border-radius: 10px;
+  padding: 0.8rem 1rem;
+  margin-bottom: 0.8rem;
+  min-height: 40px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+.llm-mini-chat-input-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.llm-mini-chat-input {
+  flex: 1;
+  padding: 0.5rem 0.8rem;
+  border: 2px solid var(--pink-200);
+  border-radius: 10px;
+  font-size: 0.88rem;
+  color: var(--pink-900);
+  background: var(--pink-50);
+  font-family: inherit;
+  resize: none;
+  outline: none;
+}
+
+.llm-mini-chat-input:focus {
+  border-color: var(--pink-400);
+  background: var(--white);
+}
+
+.llm-mini-chat-send {
+  background: linear-gradient(135deg, var(--pink-400), var(--pink-500));
+  color: var(--white);
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 10px;
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 700;
+  white-space: nowrap;
+  transition: background 0.2s;
+}
+
+.llm-mini-chat-send:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
+}
+
+.llm-mini-chat-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Dark mode LLM styles */
+[data-theme="dark"] .llm-btn {
+  background: linear-gradient(135deg, var(--pink-600), #0f3460);
+}
+
+[data-theme="dark"] .llm-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--pink-500), #1a1a3e);
+}
+
+[data-theme="dark"] .llm-response-area {
+  background: var(--bg-primary);
+  border-color: var(--border-secondary);
+}
+
+[data-theme="dark"] .llm-loading {
+  color: var(--pink-400);
+}
+
+[data-theme="dark"] .llm-error {
+  color: var(--pink-300);
+}
+
+[data-theme="dark"] .llm-inline-code {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .llm-code-block {
+  background: var(--bg-table);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .llm-mini-chat {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .llm-mini-chat-header {
+  border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .llm-mini-chat-header h4 {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .llm-close-btn {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .llm-close-btn:hover {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .llm-mini-chat-output {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .llm-mini-chat-input {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .llm-mini-chat-input:focus {
+  border-color: var(--border-accent);
+  background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .llm-mini-chat-send {
+  background: linear-gradient(135deg, var(--pink-600), #0f3460);
+}
+
+[data-theme="dark"] .llm-mini-chat-send:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--pink-500), #1a1a3e);
+}
+
+/* Ask a question section on home page */
+.ask-question-section {
+  margin-top: 2.5rem;
+}
+
+.ask-question-box {
+  background: var(--white);
+  border-radius: 16px;
+  padding: 2rem;
+  box-shadow: var(--shadow-lg);
+  border: 2px solid var(--pink-200);
+}
+
+.ask-question-box h3 {
+  color: var(--pink-700);
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+}
+
+.ask-question-input-row {
+  display: flex;
+  gap: 0.8rem;
+  margin-bottom: 1rem;
+}
+
+.ask-question-input {
+  flex: 1;
+  padding: 0.8rem 1rem;
+  border: 2px solid var(--pink-200);
+  border-radius: 12px;
+  font-size: 0.95rem;
+  color: var(--pink-900);
+  background: var(--pink-50);
+  font-family: inherit;
+  resize: none;
+  outline: none;
+}
+
+.ask-question-input:focus {
+  border-color: var(--pink-400);
+  background: var(--white);
+}
+
+.ask-question-answer {
+  background: var(--pink-50);
+  border: 1px solid var(--pink-200);
+  border-radius: 10px;
+  padding: 1rem 1.2rem;
+  font-size: 0.95rem;
+  line-height: 1.6;
+  min-height: 40px;
+  white-space: pre-wrap;
+  display: none;
+}
+
+.ask-question-answer.visible {
+  display: block;
+  animation: llmFadeIn 0.3s ease-out;
+}
+
+[data-theme="dark"] .ask-question-box {
+  background: var(--bg-card);
+  border-color: var(--border-primary);
+}
+
+[data-theme="dark"] .ask-question-box h3 {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .ask-question-input {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .ask-question-input:focus {
+  border-color: var(--border-accent);
+  background: var(--bg-secondary);
+}
+
+[data-theme="dark"] .ask-question-answer {
+  background: var(--bg-primary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+/* Modal dialog */
+.llm-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+}
+
+.llm-modal-container {
+  background: var(--white);
+  border-radius: 20px;
+  max-width: 700px;
+  width: 100%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.llm-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.2rem 1.5rem;
+  border-bottom: 2px solid var(--pink-200);
+}
+
+.llm-modal-title {
+  color: var(--pink-600);
+  font-size: 1.1rem;
+  margin: 0;
+}
+
+.llm-modal-close {
+  background: none;
+  border: none;
+  color: var(--pink-500);
+  font-size: 1.5rem;
+  cursor: pointer;
+  padding: 0.2rem 0.5rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.llm-modal-close:hover {
+  color: var(--pink-700);
+}
+
+.llm-modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: var(--pink-900);
+  white-space: pre-wrap;
+}
+
+[data-theme="dark"] .llm-modal-container {
+  background: var(--bg-card);
+}
+
+[data-theme="dark"] .llm-modal-header {
+  border-bottom-color: var(--border-primary);
+}
+
+[data-theme="dark"] .llm-modal-title {
+  color: var(--text-heading);
+}
+
+[data-theme="dark"] .llm-modal-close {
+  color: var(--text-secondary);
+}
+
+[data-theme="dark"] .llm-modal-close:hover {
+  color: var(--text-primary);
+}
+
+[data-theme="dark"] .llm-modal-body {
+  color: var(--text-primary);
+}
+
diff --git a/index.html b/index.html
index 99488d3..c49ec5f 100644
--- a/index.html
+++ b/index.html
@@ -106,9 +106,20 @@
   </div>
 
   <h2 class="section-title">Interactive</h2>
-  <a href="/pages/chat.html" class="card-link">
+  <div class="ask-question-section">
+    <div class="ask-question-box">
+      <h3>💬 Ask a Question</h3>
+      <p style="color: var(--pink-700); font-size: 0.95rem; margin-bottom: 1rem;">Ask anything about AI — terminology, concepts, techniques, or real-world applications. Powered by your configured LLM.</p>
+      <div class="ask-question-input-row">
+        <input class="ask-question-input" id="askInput" placeholder="Ask me anything about AI..." />
+        <button class="llm-btn" onclick="askQuestion()" style="padding: 0.6rem 1.5rem;"><span class="icon">Send</span></button>
+      </div>
+      <div class="ask-question-answer" id="askAnswer"></div>
+    </div>
+  </div>
+  <a href="/pages/chat.html" class="card-link" style="margin-top: 1.5rem; display: block;">
     <div class="card">
-      <h3>💬 Chat</h3>
+      <h3>💬 Full Chat</h3>
       <p>Try AI right now — ask questions, brainstorm ideas, get explanations, or just experiment. Powered by a real LLM API.</p>
     </div>
   </a>
@@ -116,5 +127,57 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="lib/llm.js"></script>
+<script>
+(function(){
+  function askQuestion() {
+    var input = document.getElementById('askInput');
+    var answer = document.getElementById('askAnswer');
+    var text = input.value.trim();
+    if (!text) return;
+
+    answer.classList.add('visible');
+    answer.innerHTML = '<span class="llm-loading">Thinking...</span>';
+
+    var cheatSheetContext = `You are an AI educator answering questions based on this cheat sheet content:
+
+TERMINOLOGY: Machine Learning (ML), Supervised Learning, Unsupervised Learning, Reinforcement Learning, Overfitting, Underfitting, NLP, Token, Embedding, Context Window, Paraphrasing, Sentiment Analysis, LLM, Pre-trained Model, Fine-tuning, Parameters, Inference, Weights. Acronyms: AI, ML, DL, NLP, LLM, RLHF, RAG, API, SFT, PoC, GAN, CNN, AGI, STT/ASR, TTS.
+
+TECHNIQUES: Backpropagation, Epoch, Batch Size, Learning Rate, Transfer Learning, Data Augmentation, RLHF, SFT, Prompt Tuning, LoRA, Quantization, Distillation, Speculative Decoding, RAG, Agent/Tool Use, Chain-of-Thought.
+
+USE CASES: Content Generation, Image Generation, Video & Audio, Summarization, Code Generation, Debugging & Review, Documentation, Code Translation, Chatbots & Assistants, Data Analysis, Research & Search, Translation, Email & Meeting Assistants, Document Processing, Healthcare, Finance, Automotive, Education, Manufacturing, Legal.
+
+MODEL TYPES: LLMs (GPT-4, Claude, Gemini, Llama, Mistral), Encoder-Only (BERT, RoBERTa), Decoder-Only (GPT, Claude, Llama), Encoder-Decoder (T5, BART), CNN (ResNet, EfficientNet), ViT (CLIP, DINOv2), Diffusion (Stable Diffusion, DALL-E), GAN (StyleGAN), VQ-VAE, Flow Models, RNN/LSTM, MoE, Retrieval Models, SLMs (Phi-3, Gemma).
+
+PROMPT ENGINEERING: Zero-Shot, Few-Shot, Chain-of-Thought, Role Prompting, Structured Output, Self-Consistency, ReAct. Tips: Be specific, use delimiters, provide context, iterate.
+
+MATH & CONCEPTS: Attention, Self-Attention, Multi-Head Attention, Positional Encoding, FFN, Layer Norm, Loss Function, Gradient Descent, Adam, Gradient, Regularization, Batch Norm, Temperature, Top-K, Top-P, Greedy Decoding, Beam Search, Logits, Perplexity, Accuracy, Precision & Recall, F1 Score, BLEU/ROUGE, TPS. Formulas: Attention=softmax(QKᵀ/√dₖ)V, Cross-Entropy=-Σyᵢlog(pᵢ), Softmax=eˣⁱ/Σeˣʲ, ReLU=max(0,x), LayerNorm=(x-μ)/σ×γ+β, F1=2×(P×R)/(P+R), Perplexity=2^(cross-entropy).`;
+
+    var messages = [
+      { role: 'system', content: 'You are a helpful AI educator answering questions based on an AI cheat sheet. Use the context below to provide accurate, concise answers. If a question is outside the cheat sheet scope, say so but try to help anyway. Keep answers to 2-4 short paragraphs. Use formatting like bold text and code blocks where helpful.' },
+      { role: 'user', content: cheatSheetContext + '\n\nQuestion: ' + text }
+    ];
+
+    LLM.chatWithHistory('askAnswer', messages)
+      .then(function() {
+        answer.innerHTML = answer.innerHTML.replace('<span class="llm-loading">Thinking...</span>', '');
+      })
+      .catch(function() {});
+  }
+
+  var askInput = document.getElementById('askInput');
+  if (askInput) {
+    askInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        askQuestion();
+      }
+    });
+  }
+
+  window.askQuestion = askQuestion;
+})();
+</script>
+
 </body>
 </html>
diff --git a/lib/llm.js b/lib/llm.js
new file mode 100644
index 0000000..cceba66
--- /dev/null
+++ b/lib/llm.js
@@ -0,0 +1,180 @@
+// Shared LLM module - provides streaming chat to any page
+var LLM = (function() {
+  var defaultApiUrl = 'https://llama-instruct.reeselink.com/v1';
+  var defaultModel = 'instruct';
+
+  function getConfig() {
+    return {
+      apiUrl: localStorage.getItem('apiUrl') || defaultApiUrl,
+      token: localStorage.getItem('apiToken') || '',
+      model: localStorage.getItem('modelName') || defaultModel
+    };
+  }
+
+  function callAPI(messages, onChunk, onComplete, onError) {
+    var config = getConfig();
+    var apiUrl = config.apiUrl.replace(/\/+$/, '');
+    var headers = { 'Content-Type': 'application/json' };
+    if (config.token) {
+      headers['Authorization'] = 'Bearer ' + config.token;
+    }
+
+    fetch(apiUrl + '/chat/completions', {
+      method: 'POST',
+      headers: headers,
+      body: JSON.stringify({
+        messages: messages,
+        model: config.model,
+        stream: true
+      })
+    })
+    .then(function(response) {
+      if (!response.ok) {
+        throw new Error('API error: ' + response.status + ' ' + response.statusText);
+      }
+      var reader = response.body.getReader();
+      var decoder = new TextDecoder();
+      var buffer = '';
+
+      function read() {
+        return reader.read().then(function(result) {
+          var done = result.done;
+          var value = result.value;
+          if (done) {
+            onComplete();
+            return;
+          }
+          buffer += decoder.decode(value, { stream: true });
+          var lines = buffer.split('\n');
+          buffer = lines.pop();
+
+          for (var i = 0; i < lines.length; i++) {
+            var line = lines[i].trim();
+            if (line.startsWith('data: ')) {
+              var data = line.slice(6);
+              if (data === '[DONE]') {
+                onComplete();
+                return;
+              }
+              try {
+                var json = JSON.parse(data);
+                var delta = json.choices && json.choices[0] && json.choices[0].delta;
+                if (delta && delta.content) {
+                  onChunk(delta.content);
+                }
+              } catch (e) {
+                // skip malformed JSON
+              }
+            }
+          }
+          return read();
+        });
+      }
+      return read();
+    })
+    .catch(function(err) {
+      onError(err.message);
+    });
+  }
+
+  function chat(elementId, systemPrompt, userMessage) {
+    var messages = [];
+    if (systemPrompt) {
+      messages.push({ role: 'system', content: systemPrompt });
+    }
+    messages.push({ role: 'user', content: userMessage });
+
+    return new Promise(function(resolve, reject) {
+      var outputEl = document.getElementById(elementId);
+      if (!outputEl) { reject(new Error('Output element not found')); return; }
+
+      outputEl.innerHTML = '<span class="llm-loading">Thinking...</span>';
+
+      var fullText = '';
+      var history = systemPrompt ? messages : [];
+
+      callAPI(
+        history,
+        function(chunk) {
+          fullText += chunk;
+          outputEl.innerHTML = formatMarkdown(fullText);
+          outputEl.style.whiteSpace = 'pre-wrap';
+        },
+        function() {
+          resolve(fullText);
+        },
+        function(err) {
+          outputEl.innerHTML = '<span class="llm-error">Error: ' + escapeHTML(err) + '</span>';
+          reject(err);
+        }
+      );
+    });
+  }
+
+  function chatWithHistory(elementId, history, onDone) {
+    return new Promise(function(resolve, reject) {
+      var outputEl = document.getElementById(elementId);
+      if (!outputEl) { reject(new Error('Output element not found')); return; }
+
+      outputEl.innerHTML = '<span class="llm-loading">Thinking...</span>';
+
+      var fullText = '';
+
+      callAPI(
+        history,
+        function(chunk) {
+          fullText += chunk;
+          outputEl.innerHTML = formatMarkdown(fullText);
+          outputEl.style.whiteSpace = 'pre-wrap';
+        },
+        function() {
+          if (onDone) onDone();
+          resolve(fullText);
+        },
+        function(err) {
+          outputEl.innerHTML = '<span class="llm-error">Error: ' + escapeHTML(err) + '</span>';
+          reject(err);
+        }
+      );
+    });
+  }
+
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function formatMarkdown(text) {
+    // Extract code blocks first to protect them from escaping
+    var codeBlocks = [];
+    text = text.replace(/```([\s\S]*?)```/g, function(match, code) {
+      var placeholder = '%%CODEBLOCK' + codeBlocks.length + '%%';
+      codeBlocks.push('<pre class="llm-code-block"><code>' + escapeHTML(code) + '</code></pre>');
+      return placeholder;
+    });
+
+    // Escape remaining HTML
+    text = escapeHTML(text);
+
+    // Restore code blocks
+    for (var i = 0; i < codeBlocks.length; i++) {
+      text = text.replace('%%CODEBLOCK' + i + '%%', codeBlocks[i]);
+    }
+
+    // Inline code
+    text = text.replace(/`([^`]+)`/g, '<code class="llm-inline-code">$1</code>');
+    // Bold
+    text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // Line breaks
+    text = text.replace(/\n/g, '<br>');
+    return text;
+  }
+
+  return {
+    getConfig: getConfig,
+    callAPI: callAPI,
+    chat: chat,
+    chatWithHistory: chatWithHistory
+  };
+})();
diff --git a/lib/modal.js b/lib/modal.js
new file mode 100644
index 0000000..f77027b
--- /dev/null
+++ b/lib/modal.js
@@ -0,0 +1,117 @@
+// Shared modal for LLM explanations
+var LLMModal = (function() {
+  var modalEl = null;
+  var contentEl = null;
+  var isOpen = false;
+
+  function createModal() {
+    if (modalEl) return;
+    modalEl = document.createElement('div');
+    modalEl.className = 'llm-modal-backdrop';
+    modalEl.style.cssText = 'display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(0,0,0,0.5); justify-content:center; align-items:center; padding:2rem;';
+
+    var container = document.createElement('div');
+    container.className = 'llm-modal-container';
+    container.style.cssText = 'background:var(--white); border-radius:20px; max-width:700px; width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden;';
+
+    var header = document.createElement('div');
+    header.className = 'llm-modal-header';
+    header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.5rem; border-bottom:2px solid var(--pink-200);';
+
+    var title = document.createElement('h3');
+    title.className = 'llm-modal-title';
+    title.style.cssText = 'color:var(--pink-600); font-size:1.1rem; margin:0;';
+
+    var closeBtn = document.createElement('button');
+    closeBtn.className = 'llm-modal-close';
+    closeBtn.innerHTML = '&#x2715;';
+    closeBtn.style.cssText = 'background:none; border:none; color:var(--pink-500); font-size:1.5rem; cursor:pointer; padding:0.2rem 0.5rem; line-height:1; transition:color 0.2s;';
+    closeBtn.addEventListener('mouseenter', function() { this.style.color = 'var(--pink-700)'; });
+    closeBtn.addEventListener('mouseleave', function() { this.style.color = 'var(--pink-500)'; });
+    closeBtn.addEventListener('click', close);
+
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+
+    var body = document.createElement('div');
+    body.className = 'llm-modal-body';
+    body.id = 'llm-modal-content';
+    body.style.cssText = 'padding:1.5rem; overflow-y:auto; flex:1; font-size:0.95rem; line-height:1.7; color:var(--pink-900); white-space:pre-wrap;';
+
+    container.appendChild(header);
+    container.appendChild(body);
+    modalEl.appendChild(container);
+    document.body.appendChild(modalEl);
+
+    modalEl.addEventListener('click', function(e) {
+      if (e.target === modalEl) close();
+    });
+
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape' && isOpen) close();
+    });
+
+    modalEl.style.display = 'flex';
+  }
+
+  function open(titleText) {
+    if (!modalEl) createModal();
+    var title = modalEl.querySelector('.llm-modal-title');
+    title.textContent = titleText;
+    contentEl = document.getElementById('llm-modal-content');
+    contentEl.innerHTML = '<span class="llm-loading">Thinking...</span>';
+    modalEl.style.display = 'flex';
+    isOpen = true;
+  }
+
+  function update(text) {
+    if (contentEl) {
+      contentEl.innerHTML = formatMarkdown(text);
+    }
+  }
+
+  function done() {
+    // nothing to do, modal stays open
+  }
+
+  function error(msg) {
+    if (contentEl) {
+      contentEl.innerHTML = '<span class="llm-error">Error: ' + escapeHTML(msg) + '</span>';
+    }
+  }
+
+  function close() {
+    if (modalEl) {
+      modalEl.style.display = 'none';
+      isOpen = false;
+    }
+  }
+
+  function escapeHTML(str) {
+    var div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  function formatMarkdown(text) {
+    // Escape HTML first
+    text = escapeHTML(text);
+    // Code blocks (must be before inline code)
+    text = text.replace(/```([\s\S]*?)```/g, '<pre class="llm-code-block"><code>$1</code></pre>');
+    // Inline code
+    text = text.replace(/`([^`]+)`/g, '<code class="llm-inline-code">$1</code>');
+    // Bold
+    text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // Line breaks
+    text = text.replace(/\n/g, '<br>');
+    return text;
+  }
+
+  return {
+    open: open,
+    update: update,
+    done: done,
+    error: error,
+    close: close
+  };
+})();
diff --git a/pages/math.html b/pages/math.html
index 6f10dbb..b985d8f 100644
--- a/pages/math.html
+++ b/pages/math.html
@@ -60,32 +60,38 @@
     <h3>Attention Mechanism</h3>
     <p>A way for the model to weigh the importance of different parts of the input when processing each token. "Attention is all you need" — the 2017 paper that launched the transformer revolution.</p>
     <div class="example"><strong>Analogy:</strong> When reading a sentence, you naturally pay more attention to certain words. "The cat that chased the mouse hid" — you attend to "cat" when processing "hid".</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Attention Mechanism', 'Walk through attention with a concrete numerical example. If we have tokens [A, B, C] with embeddings [1,0,0], [0,1,0], [0,0,1], show how Q, K, V are computed and how attention weights are calculated step by step.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Self-Attention</h3>
     <p>Each token in a sequence attends to every other token, creating rich contextual representations. The core of the transformer architecture.</p>
     <div class="example"><strong>Math:</strong> Attention(Q, K, V) = softmax(QKᵀ / √dₖ) V</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Self-Attention', 'Walk through the self-attention formula step by step with a simple example. Show how Q, K, V matrices are computed, how the dot product creates attention scores, how softmax normalizes them, and how the final output is a weighted sum of V.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Multi-Head Attention</h3>
     <p>Running multiple self-attention operations in parallel, each learning different types of relationships. Like having multiple "lenses" to view the input.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Multi-Head Attention', 'Walk through multi-head attention. If we have 4 heads with d_model=128, show how the model splits into 4 heads of dimension 32, runs self-attention on each, concatenates them, and projects back to dimension 128.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Positional Encoding</h3>
     <p>Since transformers process all tokens simultaneously (unlike RNNs), position information must be added explicitly so the model knows word order.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Positional Encoding', 'Walk through positional encoding. Show how sinusoidal positional encodings work with a concrete example. If we have positions 0, 1, 2, 3 and dimension 4, show the actual encoding vectors and explain why sin/cos are used.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Feed-Forward Network (FFN)</h3>
     <p>After attention, each token passes through a small neural network that transforms its representation. Usually two linear layers with a non-linearity in between.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Feed-Forward Network (FFN)', 'Walk through the FFN in a transformer. Show the dimensions: if d_model=512 and d_ff=2048, show how each token goes through Linear(512, 2048) → ReLU → Linear(2048, 512). Give a concrete numerical example.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Layer Normalization</h3>
     <p>A technique to stabilize training by normalizing the activations of each layer. Helps gradients flow more smoothly through deep networks.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Layer Normalization', 'Walk through layer normalization step by step. If a layer outputs [2, -1, 3, 0] for a single token, show how to compute the mean, variance, normalize, and then apply the learnable parameters γ and β.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Training Concepts</h2>
@@ -94,31 +100,37 @@
     <h3>Loss Function</h3>
     <p>A mathematical measure of how far the model's predictions are from the correct answers. Training = minimizing this value. For language models, cross-entropy loss is standard.</p>
     <div class="example"><strong>Example:</strong> If the correct next word is "cat" but the model assigns it 10% probability, the loss is high. If it assigns 90%, the loss is low.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Loss Function (Cross-Entropy)', 'Walk through cross-entropy loss with a concrete example. If the true class is "cat" and the model outputs probabilities [dog: 0.5, cat: 0.3, bird: 0.2], show the exact calculation of -log(0.3) and explain what this number means.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Gradient Descent</h3>
     <p>The optimization algorithm that adjusts model weights in the direction that reduces loss. "Descent" because you're moving down the loss surface toward a minimum.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Gradient Descent', 'Walk through gradient descent with a concrete example. If loss(w) = (w - 3)², compute the gradient, show a weight update with learning rate 0.1 starting from w=0. Do 3 iterations and show how w approaches 3.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Adam Optimizer</h3>
     <p>The most popular optimizer for training deep learning models. Combines momentum (acceleration) with adaptive learning rates (per-parameter tuning).</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Adam Optimizer', 'Walk through Adam optimizer step by step. Starting from gradient g=2 at step t=1, show how m (momentum) and v (variance) are computed with β1=0.9, β2=0.999, then show bias correction and the parameter update with lr=0.001.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Gradient</h3>
     <p>A vector of partial derivatives showing the direction and rate of steepest increase of the loss. We move in the opposite direction to minimize loss.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Gradient', 'Walk through what a gradient is with a concrete example. If loss = w1² + 2w2², compute ∂loss/∂w1 and ∂loss/∂w2 at the point (w1=1, w2=2). Show what the gradient vector looks like and what direction we move in.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Regularization</h3>
     <p>Techniques to prevent overfitting: dropout (randomly deactivating neurons), weight decay (penalizing large weights), and early stopping.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Regularization', 'Walk through L2 regularization (weight decay) with a concrete example. If loss = MSE + λ·Σw², show how the gradient changes with λ=0.01 vs λ=0. What happens to the weights over training?')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Batch Normalization</h3>
     <p>Normalizing layer inputs across each mini-batch. Reduces internal covariate shift and allows higher learning rates.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Batch Normalization', 'Walk through batch normalization step by step. If a mini-batch has activations [1, 3, 5, 7], show how to compute the batch mean and variance, normalize, and apply γ=1.5, β=0.5. Show the final output.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Generation & Sampling</h2>
@@ -128,32 +140,38 @@
     <p>Controls randomness in text generation. Low (0.2) = focused and deterministic. High (0.9) = creative and varied. 1.0 = standard sampling.</p>
     <div class="example"><strong>Low temp:</strong> Technical documentation, code generation<br>
       <strong>High temp:</strong> Creative writing, brainstorming</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Temperature in Sampling', 'Walk through temperature with a concrete example. If a model outputs logits [2.0, 1.0, 0.0] for tokens [cat, dog, bird], show the probabilities at temperature=0.1, temperature=1.0, and temperature=2.0. Show the softmax math step by step.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Top-K Sampling</h3>
     <p>At each step, only consider the K most likely next tokens. Reduces weird or irrelevant outputs.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Top-K Sampling', 'Walk through Top-K sampling with an example. If a model outputs probabilities [cat: 0.4, dog: 0.25, bird: 0.15, fish: 0.1, car: 0.05, house: 0.03, tree: 0.02], show what happens with K=3 vs K=10. Show the renormalization.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Top-P (Nucleus) Sampling</h3>
     <p>Only consider tokens whose cumulative probability reaches P. More adaptive than Top-K — automatically adjusts the number of candidates.</p>
     <div class="example"><strong>Top-P = 0.9:</strong> Include the smallest set of tokens that together cover 90% probability mass.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Top-P (Nucleus) Sampling', 'Walk through Top-P sampling with the same example: [cat: 0.4, dog: 0.25, bird: 0.15, fish: 0.1, car: 0.05, house: 0.03, tree: 0.02]. Show which tokens are included at P=0.9 and P=0.95, and how the probabilities are renormalized.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Greedy Decoding</h3>
     <p>Always pick the most likely next token. Fastest but can get stuck in repetitive loops. Often produces the most coherent output for factual tasks.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Greedy Decoding', 'Walk through greedy decoding vs beam search with a concrete example. If at step 1 the model outputs [the: 0.5, a: 0.3, I: 0.2], show what greedy picks. At step 2, if the continuation probabilities depend on the first token, show how greedy might get stuck vs beam search.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Beam Search</h3>
     <p>Instead of picking the single best token at each step, keep the top B sequences and pick the best overall. Better quality but slower.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Beam Search', 'Walk through beam search with beam size 2. Show how at each step, B sequences are expanded, pruned, and scored. Use a simple example with 3 possible tokens at each step. Show how beam search might find a better overall sequence than greedy.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Sampling</span>
     <h3>Logits</h3>
     <p>The raw, unnormalized scores the model outputs for each token before softmax. Can be adjusted for bias correction, repetition penalties, and custom sampling.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Logits', 'Walk through logits step by step. If the model outputs logits [2.0, 1.0, 0.0] for [cat, dog, bird], show: 1) softmax to get probabilities, 2) log to get log-probabilities, 3) how temperature scales logits, 4) how top-k filtering modifies them.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Evaluation Metrics</h2>
@@ -162,32 +180,32 @@
     <h3>Perplexity</h3>
     <p>Measures how "surprised" the model is by test data. Lower is better. A perplexity of 100 means the model is as confused as choosing uniformly from 100 options.</p>
     <div class="example"><strong>Example:</strong> Perplexity 5 on a language model means, on average, it's as uncertain as picking from 5 equally likely options at each step.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Perplexity', 'Walk through perplexity calculation step by step. If a model assigns probabilities [0.9, 0.8, 0.7, 0.6] to 4 correct tokens, show: 1) cross-entropy loss calculation, 2) how perplexity = 2^cross-entropy, 3) the final perplexity value and what it means.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>Accuracy</h3>
     <p>Percentage of correct predictions. Simple but can be misleading for imbalanced datasets.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 Accuracy', 'Walk through accuracy with a concrete example. If you have 1000 examples where 950 are class A and 50 are class B, and your model predicts everything as class A, what is the accuracy? Why is this misleading? Show a better metric.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>Precision & Recall</h3>
     <p>Precision = of all positive predictions, how many were correct? Recall = of all actual positives, how many did we find?</p>
     <div class="example"><strong>Spam filter:</strong> High precision = few legitimate emails flagged. High recall = few spam emails missed.</div>
+    <button class="llm-btn" onclick="walkThrough('📐 Precision & Recall', 'Walk through precision and recall with a spam filter example. If the filter flags 100 emails as spam, and 80 are actually spam (20 are legitimate), and there are 10 total spam emails in the inbox, compute precision, recall, and F1.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>F1 Score</h3>
     <p>The harmonic mean of precision and recall. A single metric that balances both.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 F1 Score', 'Walk through F1 score calculation. If precision = 0.8 and recall = 0.6, show: 1) the harmonic mean formula, 2) the step-by-step calculation, 3) why harmonic mean is used instead of arithmetic mean, 4) what F1 = 0.7 means.')"><span class="icon">📐</span> Walk me through</button>
   </div>
   <div class="def-card">
     <span class="category">Metrics</span>
     <h3>BLEU / ROUGE</h3>
     <p>Metrics for evaluating text generation quality by comparing model output to reference text. BLEU counts n-gram overlap (used for translation). ROUGE is similar but common for summarization.</p>
-  </div>
-  <div class="def-card">
-    <span class="category">Metrics</span>
-    <h3>Tokens per Second (TPS)</h3>
-    <p>How many tokens the model generates per second. Measures inference speed. Typical range: 20-100+ TPS depending on model size and hardware.</p>
+    <button class="llm-btn" onclick="walkThrough('📐 BLEU Score', 'Walk through BLEU score calculation. If the model outputs "the cat sat on the mat" and the reference is "the cat sat on the mat", compute 1-gram, 2-gram, 3-gram, and 4-gram precision. Show the final BLEU score with the brevity penalty.')"><span class="icon">📐</span> Walk me through</button>
   </div>
 
   <h2 class="section-title">Key Formulas</h2>
@@ -210,5 +228,34 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script>
+(function(){
+  function walkThrough(title, prompt) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI math tutor. Walk through the requested concept step by step with concrete numerical examples. Show every calculation explicitly. Use code blocks for math. Explain each step in plain language. Make it feel like a patient teacher working through a problem.' },
+      { role: 'user', content: prompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.walkThrough = walkThrough;
+})();
+</script>
+
 </body>
 </html>
diff --git a/pages/model-types.html b/pages/model-types.html
index 6d37816..05bb269 100644
--- a/pages/model-types.html
+++ b/pages/model-types.html
@@ -60,24 +60,28 @@
     <h3>LLM (Large Language Model)</h3>
     <p>Neural networks based on the transformer architecture, trained on massive text corpora. They predict the next token given a sequence, enabling fluency in language tasks.</p>
     <div class="example"><strong>Examples:</strong> GPT-4, Claude, Gemini, Llama 3, Mistral, Qwen</div>
+    <button class="llm-btn" onclick="explainModel('💬 LLM (Large Language Model)', 'Neural networks based on the transformer architecture, trained on massive text corpora. They predict the next token given a sequence.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Transformer</span>
     <h3>Encoder-Only Models</h3>
     <p>Transformers designed to understand input (not generate text). Used for classification, sentiment analysis, and embedding generation.</p>
     <div class="example"><strong>Examples:</strong> BERT, RoBERTa, DeBERTa</div>
+    <button class="llm-btn" onclick="explainModel('💬 Encoder-Only Models', 'Transformers designed to understand input (not generate text). Used for classification, sentiment analysis, and embedding generation.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Transformer</span>
     <h3>Decoder-Only Models</h3>
     <p>Transformers designed to generate text autoregressively — the dominant architecture for modern LLMs.</p>
     <div class="example"><strong>Examples:</strong> GPT series, Claude, Llama, Mistral</div>
+    <button class="llm-btn" onclick="explainModel('💬 Decoder-Only Models', 'Transformers designed to generate text autoregressively — the dominant architecture for modern LLMs.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Transformer</span>
     <h3>Encoder-Decoder Models</h3>
     <p>Transformers with both encoder and decoder, used for tasks that transform input to output (translation, summarization).</p>
     <div class="example"><strong>Examples:</strong> T5, BART, Flan-T5</div>
+    <button class="llm-btn" onclick="explainModel('💬 Encoder-Decoder Models', 'Transformers with both encoder and decoder, used for tasks that transform input to output.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Vision Models</h2>
@@ -86,24 +90,28 @@
     <h3>CNN (Convolutional Neural Network)</h3>
     <p>Neural networks with layers that scan images with small filters, detecting edges, textures, and patterns hierarchically. The backbone of computer vision for years.</p>
     <div class="example"><strong>Examples:</strong> ResNet, EfficientNet, VGG</div>
+    <button class="llm-btn" onclick="explainModel('💬 CNN', 'Neural networks with layers that scan images with small filters, detecting edges, textures, and patterns hierarchically.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Vision</span>
     <h3>ViT (Vision Transformer)</h3>
     <p>Applying the transformer architecture to images by treating image patches as tokens. Often outperforms CNNs at scale.</p>
     <div class="example"><strong>Examples:</strong> CLIP, DINOv2, ViT-Base</div>
+    <button class="llm-btn" onclick="explainModel('💬 ViT', 'Applying the transformer architecture to images by treating image patches as tokens.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Vision</span>
     <h3>Diffusion Models</h3>
     <p>Models that generate images by iteratively denoising random noise. The architecture behind most state-of-the-art image generators.</p>
     <div class="example"><strong>Examples:</strong> Stable Diffusion, DALL-E 3, Midjourney</div>
+    <button class="llm-btn" onclick="explainModel('💬 Diffusion Models', 'Models that generate images by iteratively denoising random noise.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Vision</span>
     <h3>Multimodal Models</h3>
     <p>Models that process multiple input types — text, images, audio — and can generate outputs across modalities.</p>
     <div class="example"><strong>Examples:</strong> GPT-4V (vision), Claude 3, Gemini, Qwen-VL</div>
+    <button class="llm-btn" onclick="explainModel('💬 Multimodal Models', 'Models that process multiple input types — text, images, audio — and can generate outputs across modalities.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Generative Models</h2>
@@ -112,18 +120,21 @@
     <h3>GAN (Generative Adversarial Network)</h3>
     <p>Two networks compete: a generator creates fake data, and a discriminator tries to detect fakes. Over time, both improve until the generator is indistinguishable from real data.</p>
     <div class="example"><strong>Example:</strong> Creating photorealistic faces that don't exist (StyleGAN).</div>
+    <button class="llm-btn" onclick="explainModel('💬 GAN', 'Two networks compete: a generator creates fake data, and a discriminator tries to detect fakes.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Generative</span>
     <h3>VQ-VAE (Vector Quantized VAE)</h3>
     <p>Combines autoencoders with discrete codebooks to learn compressed representations. Used as a foundation for autoregressive generation.</p>
     <div class="example"><strong>Example:</strong> MusicGen (music generation), SoundStream (audio compression)</div>
+    <button class="llm-btn" onclick="explainModel('💬 VQ-VAE', 'Combines autoencoders with discrete codebooks to learn compressed representations.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Generative</span>
     <h3>Flow Models</h3>
     <p>Models that learn a reversible transformation between data and noise, enabling exact likelihood computation and fast generation.</p>
     <div class="example"><strong>Examples:</strong> Glow, RealNVP, Rectified Flow</div>
+    <button class="llm-btn" onclick="explainModel('💬 Flow Models', 'Models that learn a reversible transformation between data and noise.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Other Architectures</h2>
@@ -132,24 +143,28 @@
     <h3>RNN / LSTM</h3>
     <p>Recurrent networks that process sequences step-by-step, maintaining a hidden state. Largely replaced by transformers but still used in some applications.</p>
     <div class="example"><strong>Use case:</strong> Time series prediction, speech recognition</div>
+    <button class="llm-btn" onclick="explainModel('💬 RNN/LSTM', 'Recurrent networks that process sequences step-by-step, maintaining a hidden state.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Mixture of Experts (MoE)</h3>
     <p>A model with multiple "expert" subnetworks. A routing mechanism selects which experts to use for each input, enabling large models that are computationally efficient at inference.</p>
     <div class="example"><strong>Examples:</strong> Mixtral 8x7B, Google's Switch Transformer, Grok-1</div>
+    <button class="llm-btn" onclick="explainModel('💬 Mixture of Experts (MoE)', 'A model with multiple expert subnetworks. A routing mechanism selects which experts to use for each input.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Retrieval Models</h3>
     <p>Models designed specifically for semantic search — finding the most relevant documents for a query from a large corpus.</p>
     <div class="example"><strong>Examples:</strong> BGE, E5, Cohere embed models</div>
+    <button class="llm-btn" onclick="explainModel('💬 Retrieval Models', 'Models designed specifically for semantic search — finding the most relevant documents for a query.')"><span class="icon">💬</span> Explain</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Small Language Models (SLMs)</h3>
     <p>Compact language models (under 7B parameters) optimized for edge devices and low-latency applications. Getting remarkably capable.</p>
     <div class="example"><strong>Examples:</strong> Phi-3, Gemma 2B, Qwen 1.5B, MicroLlama</div>
+    <button class="llm-btn" onclick="explainModel('💬 Small Language Models (SLMs)', 'Compact language models (under 7B parameters) optimized for edge devices and low-latency applications.')"><span class="icon">💬</span> Explain</button>
   </div>
 
   <h2 class="section-title">Model Comparison</h2>
@@ -171,9 +186,93 @@
     </tbody>
   </table>
 
+  <h2 class="section-title">AI Assistant</h2>
+  <div class="def-card">
+    <span class="category">Interactive</span>
+    <h3>🤖 Which Model Should I Use?</h3>
+    <p>Describe your task, constraints, and goals — the AI will recommend the best model architecture and specific model from the comparison table.</p>
+    <div class="llm-mini-chat" id="model-chat">
+      <div class="llm-mini-chat-header"><h4>🤖 Model Advisor</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
+      <div class="llm-mini-chat-input-row">
+        <input class="llm-mini-chat-input" id="model-input" placeholder="e.g., I need to classify customer reviews by sentiment, processing 10,000 per day..." />
+        <button class="llm-mini-chat-send" onclick="askModelAdvisor()">Ask</button>
+      </div>
+      <div class="llm-mini-chat-output" id="model-output" style="margin-top: 0.8rem;"></div>
+    </div>
+  </div>
+
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script>
+(function(){
+  function explainModel(title, definition) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI educator explaining model architectures. Explain how this model type works, what makes it unique, when to use it vs alternatives, and concrete examples. Use analogies and keep it practical.' },
+      { role: 'user', content: 'Explain this AI model architecture: ' + title + '. ' + definition + '. Compare it to similar architectures and explain when you would choose this one over alternatives.' }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  function askModelAdvisor() {
+    var input = document.getElementById('model-input');
+    var output = document.getElementById('model-output');
+    var text = input.value.trim();
+    if (!text) return;
+
+    output.innerHTML = '<span class="llm-loading">Analyzing...</span>';
+
+    var comparisonTable = `
+Model Comparison:
+- GPT-4 / GPT-4o: Decoder LLM - General-purpose reasoning, coding, multimodal
+- Claude 3.5: Decoder LLM - Long-context analysis, coding, writing
+- Gemini 1.5 Pro: Decoder LLM - Massive context windows, multimodal
+- Llama 3: Decoder LLM - Open-source, self-hosting, fine-tuning
+- Mistral Large: Dense LLM - High-quality reasoning, multilingual
+- Stable Diffusion: Diffusion - Image generation, open-source
+- CLIP: Encoder (Vision+Text) - Image-text matching, embeddings
+- BERT: Encoder - Text classification, search, NLU
+- Whisper: Encoder-Decoder - Speech recognition, transcription
+- TTS models: Decoder - Text-to-speech, voice synthesis`;
+
+    var messages = [
+      { role: 'system', content: 'You are an AI model advisor. Help users choose the right AI model for their task. Consider: 1) The task type (text, image, audio, structured data), 2) Scale/volume requirements, 3) Latency needs, 4) Budget constraints, 5) Open-source vs proprietary, 6) Deployment environment. Recommend specific models from the comparison table and explain why.' },
+      { role: 'user', content: 'I need help choosing an AI model for my task: ' + text + '. Here are the available model options:\n' + comparisonTable + '\nWhich model should I use and why?' }
+    ];
+
+    LLM.chatWithHistory('model-output', messages).catch(function() {});
+  }
+
+  var modelInput = document.getElementById('model-input');
+  if (modelInput) {
+    modelInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        askModelAdvisor();
+      }
+    });
+  }
+
+  window.explainModel = explainModel;
+  window.askModelAdvisor = askModelAdvisor;
+})();
+</script>
+
 </body>
 </html>
diff --git a/pages/prompts.html b/pages/prompts.html
index abd86f2..8b669f6 100644
--- a/pages/prompts.html
+++ b/pages/prompts.html
@@ -174,9 +174,102 @@
       Then rewrite it incorporating your feedback."</div>
   </div>
 
+  <h2 class="section-title">Playground</h2>
+  <div class="def-card">
+    <span class="category">Interactive</span>
+    <h3>🧪 Test Your Prompts Live</h3>
+    <p>Try any prompt technique with your configured model. Paste a prompt template, fill in the variables, and see the result.</p>
+    <div class="llm-mini-chat visible" id="prompt-playground">
+      <div class="llm-mini-chat-header"><h4>🧪 Prompt Playground</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Choose a technique</label>
+        <select id="prompt-technique" style="width: 100%; padding: 0.5rem 0.8rem; border: 2px solid var(--pink-200); border-radius: 10px; font-size: 0.88rem; color: var(--pink-900); background: var(--pink-50);">
+          <option value="zero-shot">Zero-Shot</option>
+          <option value="few-shot">Few-Shot</option>
+          <option value="chain-of-thought">Chain-of-Thought</option>
+          <option value="role">Role Prompting</option>
+          <option value="structured">Structured Output</option>
+        </select>
+      </div>
+      <div style="margin-bottom: 0.8rem;">
+        <label style="font-size: 0.8rem; font-weight: 700; color: var(--pink-600); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.3rem;">Your prompt</label>
+        <textarea class="llm-mini-chat-input" id="prompt-input" rows="4" placeholder="Enter your prompt here..."></textarea>
+      </div>
+      <button class="llm-mini-chat-send" onclick="testPrompt()" style="width: 100%; padding: 0.7rem;">Send to LLM</button>
+      <div class="llm-mini-chat-output" id="prompt-output" style="margin-top: 0.8rem;"></div>
+    </div>
+  </div>
+
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script>
+(function(){
+  var techniquePrompts = {
+    'zero-shot': 'Perform the task I describe. Do not add examples. Just answer directly.',
+    'few-shot': 'Classify the sentiment of the following text. Here are examples:\n\n"I love this!" → Positive\n"This is terrible." → Negative\n"It\'s okay, I guess." → ?\n\n{text}\n→',
+    'chain-of-thought': 'Solve this step by step. Think through each step carefully before giving your final answer.\n\n{task}',
+    'role': 'You are an expert in {domain}. {task}',
+    'structured': 'Analyze the following text and return results as JSON with these keys: summary, sentiment, key_topics, action_items.\n\n{text}'
+  };
+
+  function applyTechnique() {
+    var technique = document.getElementById('prompt-technique').value;
+    var basePrompt = techniquePrompts[technique];
+    var userPrompt = document.getElementById('prompt-input').value.trim();
+
+    if (!userPrompt) return basePrompt;
+
+    return basePrompt.replace('{text}', userPrompt).replace('{task}', userPrompt).replace('{domain}', 'general');
+  }
+
+  function testPrompt() {
+    var userPrompt = document.getElementById('prompt-input').value.trim();
+    var technique = document.getElementById('prompt-technique').value;
+
+    if (!userPrompt) {
+      LLMModal.open('🧪 Prompt Playground');
+      LLMModal.error('Please enter a prompt to test.');
+      return;
+    }
+
+    var techniqueNames = {
+      'zero-shot': 'Zero-Shot',
+      'few-shot': 'Few-Shot',
+      'chain-of-thought': 'Chain-of-Thought',
+      'role': 'Role Prompting',
+      'structured': 'Structured Output'
+    };
+
+    LLMModal.open('🧪 Testing: ' + techniqueNames[technique]);
+    var finalPrompt = applyTechnique();
+    var systemPrompt = 'You are a helpful AI assistant. Respond to the prompt below using the specified technique.';
+
+    var messages = [
+      { role: 'system', content: systemPrompt },
+      { role: 'user', content: finalPrompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.testPrompt = testPrompt;
+})();
+</script>
+
 </body>
 </html>
diff --git a/pages/techniques.html b/pages/techniques.html
index 5b0d925..e18957e 100644
--- a/pages/techniques.html
+++ b/pages/techniques.html
@@ -60,32 +60,38 @@
     <h3>Backpropagation</h3>
     <p>The core algorithm for training neural networks. It calculates the gradient of the loss function with respect to each weight by chain rule, then adjusts weights to minimize error.</p>
     <div class="example"><strong>Analogy:</strong> Like adjusting a radio dial — you turn it slightly, check if the signal is clearer, and keep adjusting in the right direction.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Backpropagation', 'Explain backpropagation in neural networks using a simple analogy. Walk through a numerical example: if the loss is 0.5 and the gradient is -0.03, what happens to the weight? Show the math.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Epoch</h3>
     <p>One complete pass through the entire training dataset. Models typically train for many epochs.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Epochs', 'Explain what an epoch is in training. Walk through a concrete example: if you have 10,000 training examples and a batch size of 32, how many steps per epoch? How many total steps for 10 epochs?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Batch Size</h3>
     <p>The number of training examples processed before the model's weights are updated. Larger batches are more stable but use more memory.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Batch Size', 'Explain batch size in training. Compare batch sizes of 1, 32, and 256 — what are the tradeoffs for each in terms of training speed, memory, and convergence quality?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Learning Rate</h3>
     <p>A hyperparameter that controls how much to adjust weights during each update. Too high → unstable training; too low → slow convergence.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Learning Rate', 'Explain learning rate with a visual analogy. Show what happens numerically: if the learning rate is 0.1 vs 0.001, and the gradient is 5, what is the weight update in each case?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Transfer Learning</h3>
     <p>Using a model trained on one task as the starting point for a model on a second task. Saves time and data.</p>
     <div class="example"><strong>Example:</strong> A model trained on Wikipedia text is fine-tuned for legal document analysis.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Transfer Learning', 'Explain transfer learning with a concrete example. If someone wanted to build a sentiment analysis model for restaurant reviews using transfer learning, walk through the steps from pre-trained model to final fine-tuned model.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Training</span>
     <h3>Data Augmentation</h3>
     <p>Artificially expanding a training dataset by applying transformations (e.g., rotation, flipping, synonym replacement) to create new training examples.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Data Augmentation', 'Explain data augmentation. Give me 5 concrete examples of how you would augment a dataset of 100 product reviews to create 500 training examples. Include both text and non-text techniques.')"><span class="icon">🧪</span> Try it</button>
   </div>
 
   <h2 class="section-title">Alignment & Improvement</h2>
@@ -94,22 +100,26 @@
     <h3>RLHF (Reinforcement Learning from Human Feedback)</h3>
     <p>A technique to align model outputs with human preferences. Humans rank model responses, and a reward model is trained on those rankings. The main model is then fine-tuned to maximize the reward.</p>
     <div class="example"><strong>Used by:</strong> ChatGPT, Claude, and other conversational AI systems to make them more helpful and harmless.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 RLHF', 'Walk me through RLHF step by step with a concrete example. Start with a raw model that gives bad answers, show how human feedback improves it, and explain the reward model training process.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Alignment</span>
     <h3>SFT (Supervised Fine-Tuning)</h3>
     <p>Fine-tuning a model on a dataset of input-output pairs to teach it a specific format or style of response.</p>
     <div class="example"><strong>Example:</strong> Training a model to respond in JSON format for API integration.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 SFT', 'Show me an example of SFT (Supervised Fine-Tuning). Give me 5 example input-output pairs for fine-tuning a model to act as a customer support agent, then explain what the model learns from these.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Alignment</span>
     <h3>Prompt Tuning</h3>
     <p>Instead of changing model weights, carefully crafting prompts to guide the model's behavior. Zero-cost and reversible.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Prompt Tuning', 'Compare prompt tuning vs fine-tuning. Show 3 examples where the same task (e.g., sentiment analysis) is handled with just a prompt vs with fine-tuning — what are the pros and cons of each?')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Alignment</span>
     <h3>LoRA (Low-Rank Adaptation)</h3>
     <p>An efficient fine-tuning technique that adds small trainable matrices to a frozen pre-trained model, drastically reducing compute and memory needs.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 LoRA', 'Explain LoRA (Low-Rank Adaptation) simply. If a model has 7 billion parameters, how many parameters does LoRA actually train? Walk through the math and explain why this is so much more efficient than full fine-tuning.')"><span class="icon">🧪</span> Try it</button>
   </div>
 
   <h2 class="section-title">Deployment & Optimization</h2>
@@ -118,39 +128,74 @@
     <h3>Quantization</h3>
     <p>Reducing the precision of model weights (e.g., from 32-bit to 8-bit) to shrink model size and speed up inference with minimal accuracy loss.</p>
     <div class="example"><strong>Example:</strong> A 13GB model quantized to 4-bit becomes ~3.5GB, fitting on consumer GPUs.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Quantization', 'Explain quantization with concrete numbers. If a model has 7 billion parameters stored as 32-bit floats, what is the total size? What happens at 16-bit, 8-bit, and 4-bit? Show the accuracy tradeoffs.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Optimization</span>
     <h3>Distillation</h3>
     <p>Training a smaller "student" model to mimic the behavior of a larger "teacher" model, capturing its knowledge in a more compact form.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Knowledge Distillation', 'Explain knowledge distillation with a concrete example. If GPT-4 is the teacher and a 350M parameter model is the student, how does the student learn? Show a specific example of soft vs hard labels.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Optimization</span>
     <h3>Speculative Decoding</h3>
     <p>Using a small model to draft multiple tokens, then having the large model verify them in parallel — speeding up generation.</p>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Speculative Decoding', 'Explain speculative decoding with a step-by-step example. If the small model drafts ["the", "cat"] and the large model verifies both, how many forward passes does this save? Walk through a full sequence.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>RAG (Retrieval-Augmented Generation)</h3>
     <p>Augmenting a language model with an external knowledge retrieval step. The model first searches a knowledge base, then generates a response using both the retrieved info and its own training.</p>
     <div class="example"><strong>Example:</strong> A customer support bot that searches your product docs before answering questions — no fine-tuning needed.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 RAG', 'Walk through a complete RAG pipeline step by step: given a user question "How do I reset my password?", show how the retrieval system works, what gets retrieved, and how the LLM generates the final answer using the retrieved docs.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Agent / Tool Use</h3>
     <p>Giving an LLM the ability to call external tools (search, calculators, APIs) to accomplish multi-step tasks.</p>
     <div class="example"><strong>Example:</strong> An AI that searches the web, summarizes results, and writes a report — all autonomously.</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Agent / Tool Use', 'Show me a concrete example of an AI agent with tool use. Walk through how an agent plans and executes the task "Find today'"'"'s weather in Tokyo and suggest what to wear" — show each tool call, observation, and thought step.')"><span class="icon">🧪</span> Try it</button>
   </div>
   <div class="def-card">
     <span class="category">Architecture</span>
     <h3>Chain-of-Thought</h3>
     <p>Asking a model to show its reasoning step-by-step before giving an answer. Dramatically improves performance on reasoning tasks.</p>
-    <div class="example"><strong>Prompt:</strong> "Let's think step by step. First, ..."</div>
+    <div class="example"><strong>Prompt:</strong> "Let'"'"'s think step by step. First, ..."</div>
+    <button class="llm-btn" onclick="demoTechnique('🧪 Chain-of-Thought', 'Demonstrate chain-of-thought prompting. Give me a math word problem, then show: 1) the answer without CoT, 2) the answer with CoT showing each reasoning step. Explain why CoT improves accuracy.')"><span class="icon">🧪</span> Try it</button>
   </div>
 
 </div>
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script>
+(function(){
+  function demoTechnique(title, prompt) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI educator running a live demo. Walk through the concept step by step with concrete numerical examples, analogies, and clear explanations. Use formatting like bold text and code blocks where helpful.' },
+      { role: 'user', content: prompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.demoTechnique = demoTechnique;
+})();
+</script>
+
 </body>
 </html>
diff --git a/pages/terminology.html b/pages/terminology.html
index 0433fdd..963d97f 100644
--- a/pages/terminology.html
+++ b/pages/terminology.html
@@ -59,34 +59,40 @@
     <span class="category">ML</span>
     <h3>Machine Learning (ML)</h3>
     <p>A subset of AI where systems learn patterns from data to make decisions or predictions without being explicitly programmed for each task.</p>
+    <button class="llm-btn" onclick="explainTerm('Machine Learning (ML)', 'A subset of AI where systems learn patterns from data to make decisions or predictions without being explicitly programmed for each task.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Supervised Learning</h3>
     <p>Training a model on labeled data — each example has an input and a known correct output. The model learns to map inputs to outputs.</p>
     <div class="example"><strong>Example:</strong> Training on emails labeled "spam" or "not spam" to build a spam filter.</div>
+    <button class="llm-btn" onclick="explainTerm('Supervised Learning', 'Training a model on labeled data — each example has an input and a known correct output. The model learns to map inputs to outputs.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Unsupervised Learning</h3>
     <p>Training on unlabeled data — the model finds hidden patterns or groupings on its own.</p>
     <div class="example"><strong>Example:</strong> Grouping customers by purchasing behavior without pre-defined categories.</div>
+    <button class="llm-btn" onclick="explainTerm('Unsupervised Learning', 'Training on unlabeled data — the model finds hidden patterns or groupings on its own.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Reinforcement Learning</h3>
     <p>An agent learns by interacting with an environment, receiving rewards for good actions and penalties for bad ones, optimizing for maximum cumulative reward.</p>
     <div class="example"><strong>Example:</strong> An AI learning to play chess by playing millions of games against itself.</div>
+    <button class="llm-btn" onclick="explainTerm('Reinforcement Learning', 'An agent learns by interacting with an environment, receiving rewards for good actions and penalties for bad ones, optimizing for maximum cumulative reward.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Overfitting</h3>
     <p>When a model learns the training data too well — including noise and outliers — and performs poorly on new, unseen data.</p>
+    <button class="llm-btn" onclick="explainTerm('Overfitting', 'When a model learns the training data too well — including noise and outliers — and performs poorly on new, unseen data.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">ML</span>
     <h3>Underfitting</h3>
     <p>When a model is too simple to capture the patterns in the data, performing poorly on both training and test data.</p>
+    <button class="llm-btn" onclick="explainTerm('Underfitting', 'When a model is too simple to capture the patterns in the data, performing poorly on both training and test data.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
 
   <h2 class="section-title">Natural Language Processing</h2>
@@ -94,35 +100,41 @@
     <span class="category">NLP</span>
     <h3>NLP (Natural Language Processing)</h3>
     <p>A field of AI focused on enabling computers to understand, interpret, and generate human language.</p>
+    <button class="llm-btn" onclick="explainTerm('NLP - Natural Language Processing', 'A field of AI focused on enabling computers to understand, interpret, and generate human language.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Token</h3>
     <p>The smallest unit of text a model processes. Tokens can be words, subwords, or characters. A single word may be split into multiple tokens.</p>
     <div class="example"><strong>Example:</strong> "unhappiness" might become ["un", "happiness"] — 2 tokens.</div>
+    <button class="llm-btn" onclick="explainTerm('Token', 'The smallest unit of text a model processes. Tokens can be words, subwords, or characters. A single word may be split into multiple tokens.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Embedding</h3>
     <p>A numerical representation of text (or other data) in a continuous vector space, where similar items are closer together.</p>
     <div class="example"><strong>Example:</strong> "king", "queen", "man", "woman" are embedded so that queen - woman + man ≈ king.</div>
+    <button class="llm-btn" onclick="explainTerm('Embedding', 'A numerical representation of text (or other data) in a continuous vector space, where similar items are closer together.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Context Window</h3>
     <p>The maximum number of tokens a model can process at once — both input and output combined.</p>
     <div class="example"><strong>Example:</strong> A 128K context window means the model can read ~100,000 words in a single prompt.</div>
+    <button class="llm-btn" onclick="explainTerm('Context Window', 'The maximum number of tokens a model can process at once — both input and output combined.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Paraphrasing</h3>
     <p>Restating text in different words while preserving the original meaning. LLMs excel at this task.</p>
+    <button class="llm-btn" onclick="explainTerm('Paraphrasing', 'Restating text in different words while preserving the original meaning. LLMs excel at this task.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">NLP</span>
     <h3>Sentiment Analysis</h3>
     <p>Determining the emotional tone behind text — positive, negative, or neutral.</p>
     <div class="example"><strong>Example:</strong> "This product is amazing!" → Positive</div>
+    <button class="llm-btn" onclick="explainTerm('Sentiment Analysis', 'Determining the emotional tone behind text — positive, negative, or neutral.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
 
   <h2 class="section-title">Model Concepts</h2>
@@ -130,33 +142,39 @@
     <span class="category">Model</span>
     <h3>LLM (Large Language Model)</h3>
     <p>A neural network with billions of parameters trained on massive text corpora to understand and generate human language. Examples: GPT-4, Claude, Gemini, Llama.</p>
+    <button class="llm-btn" onclick="explainTerm('LLM - Large Language Model', 'A neural network with billions of parameters trained on massive text corpora to understand and generate human language.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Pre-trained Model</h3>
     <p>A model that has already been trained on a large dataset and can be used as-is or fine-tuned for specific tasks.</p>
+    <button class="llm-btn" onclick="explainTerm('Pre-trained Model', 'A model that has already been trained on a large dataset and can be used as-is or fine-tuned for specific tasks.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Fine-tuning</h3>
     <p>Taking a pre-trained model and continuing to train it on a smaller, task-specific dataset to adapt its behavior.</p>
     <div class="example"><strong>Example:</strong> Fine-tuning GPT-4 on medical texts so it answers healthcare questions more accurately.</div>
+    <button class="llm-btn" onclick="explainTerm('Fine-tuning', 'Taking a pre-trained model and continuing to train it on a smaller, task-specific dataset to adapt its behavior.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Parameters</h3>
     <p>The internal variables of a model that are adjusted during training. More parameters generally mean greater capacity to learn complex patterns.</p>
     <div class="example"><strong>Example:</strong> GPT-4 is estimated to have trillions of parameters.</div>
+    <button class="llm-btn" onclick="explainTerm('Parameters', 'The internal variables of a model that are adjusted during training. More parameters generally mean greater capacity to learn complex patterns.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Inference</h3>
     <p>The process of using a trained model to generate outputs for new inputs (as opposed to training the model).</p>
+    <button class="llm-btn" onclick="explainTerm('Inference', 'The process of using a trained model to generate outputs for new inputs (as opposed to training the model).')"><span class="icon">💬</span> Explain deeper</button>
   </div>
   <div class="def-card">
     <span class="category">Model</span>
     <h3>Weights</h3>
     <p>The numerical values learned during training that determine how input signals are transformed as they pass through the network.</p>
+    <button class="llm-btn" onclick="explainTerm('Weights', 'The numerical values learned during training that determine how input signals are transformed as they pass through the network.')"><span class="icon">💬</span> Explain deeper</button>
   </div>
 
   <h2 class="section-title">Common Acronyms</h2>
@@ -187,5 +205,34 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script>
+(function(){
+  function explainTerm(title, definition) {
+    LLMModal.open('💬 ' + title);
+    var messages = [
+      { role: 'system', content: 'You are an AI educator explaining technical terms simply. Keep explanations to 2-3 short paragraphs with a practical example. Use the definition provided as your starting point.' },
+      { role: 'user', content: 'Explain this AI term in simple, practical terms: ' + title + '. Definition: ' + definition + '.' }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  window.explainTerm = explainTerm;
+})();
+</script>
+
 </body>
 </html>
diff --git a/pages/use-cases.html b/pages/use-cases.html
index a0e7faf..126d409 100644
--- a/pages/use-cases.html
+++ b/pages/use-cases.html
@@ -147,31 +147,52 @@
       <div class="icon">🏥</div>
       <h3>Healthcare</h3>
       <p>Medical image analysis, drug discovery, clinical note generation, symptom triage, and personalized treatment plans.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Healthcare AI Use Cases', 'Give me 5 specific, actionable AI use cases for a mid-size hospital system. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">💰</div>
       <h3>Finance</h3>
       <p>Fraud detection, algorithmic trading, risk assessment, credit scoring, and compliance monitoring.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Finance AI Use Cases', 'Give me 5 specific, actionable AI use cases for a fintech startup. For each, describe the AI technique, expected impact, and key data needed.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">🚗</div>
       <h3>Automotive</h3>
       <p>Autonomous driving, predictive maintenance, route optimization, and in-car voice assistants.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Automotive AI Use Cases', 'Give me 5 specific, actionable AI use cases for an automotive company. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">🎓</div>
       <h3>Education</h3>
       <p>Personalized tutoring, automated grading, curriculum design, and interactive learning experiences.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Education AI Use Cases', 'Give me 5 specific, actionable AI use cases for an online education platform. For each, describe the AI technique, expected impact, and key data needed.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">🏭</div>
       <h3>Manufacturing</h3>
       <p>Quality inspection via computer vision, supply chain optimization, predictive maintenance, and digital twins.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Manufacturing AI Use Cases', 'Give me 5 specific, actionable AI use cases for a manufacturing company. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
     </div>
     <div class="use-card">
       <div class="icon">⚖️</div>
       <h3>Legal</h3>
       <p>Contract review, legal research, case prediction, document drafting, and compliance analysis.</p>
+      <button class="llm-btn" onclick="brainstormUseCase('💡 Legal AI Use Cases', 'Give me 5 specific, actionable AI use cases for a law firm. For each, describe the AI technique, expected impact, and key considerations.')"><span class="icon">💡</span> Brainstorm</button>
+    </div>
+  </div>
+
+  <h2 class="section-title">AI Assistant</h2>
+  <div class="def-card">
+    <span class="category">Interactive</span>
+    <h3>🤖 Brainstorm AI Use Cases</h3>
+    <p>Describe your industry, project, or problem — and the AI will suggest specific, actionable use cases with implementation details.</p>
+    <div class="llm-mini-chat" id="brainstorm-chat">
+      <div class="llm-mini-chat-header"><h4>💡 Brainstorm Assistant</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
+      <div class="llm-mini-chat-input-row">
+        <input class="llm-mini-chat-input" id="brainstorm-input" placeholder="Describe your industry, project, or problem..." />
+        <button class="llm-mini-chat-send" onclick="doBrainstorm()">Go</button>
+      </div>
+      <div class="llm-mini-chat-output" id="brainstorm-output" style="margin-top: 0.8rem;"></div>
     </div>
   </div>
 
@@ -179,5 +200,61 @@
 
 <footer>AI Cheat Sheet &mdash; A learning reference for artificial intelligence</footer>
 
+<script src="../lib/modal.js"></script>
+<script src="../lib/llm.js"></script>
+<script>
+(function(){
+  function brainstormUseCase(title, prompt) {
+    LLMModal.open(title);
+    var messages = [
+      { role: 'system', content: 'You are an AI consultant helping professionals brainstorm practical AI use cases. For each use case, describe: 1) The specific problem it solves, 2) The AI technique/model needed, 3) Expected impact (quantified if possible), 4) Implementation complexity (Easy/Medium/Hard), 5) Key data or resources needed. Be concrete and actionable.' },
+      { role: 'user', content: prompt }
+    ];
+
+    var fullText = '';
+    LLM.callAPI(
+      messages,
+      function(chunk) {
+        fullText += chunk;
+        LLMModal.update(fullText);
+      },
+      function() {},
+      function(err) {
+        LLMModal.error(err);
+      }
+    );
+  }
+
+  function doBrainstorm() {
+    var input = document.getElementById('brainstorm-input');
+    var output = document.getElementById('brainstorm-output');
+    var text = input.value.trim();
+    if (!text) return;
+
+    output.innerHTML = '<span class="llm-loading">Brainstorming...</span>';
+
+    var messages = [
+      { role: 'system', content: 'You are an AI consultant helping professionals brainstorm practical AI use cases. For each use case, describe: 1) The specific problem it solves, 2) The AI technique or model needed, 3) Expected impact, 4) Implementation complexity (Easy/Medium/Hard), 5) Key data or resources needed. Be concrete and actionable. Give 5-7 use cases.' },
+      { role: 'user', content: 'I work in ' + text + '. Brainstorm specific, actionable AI use cases for my context. Tailor each one to my industry, company size, and available resources. For each use case, describe the problem it solves, the AI technique needed, expected impact, implementation complexity, and key data or resources needed.' }
+    ];
+
+    LLM.chatWithHistory('brainstorm-output', messages).catch(function() {});
+  }
+
+  var brainstormInput = document.getElementById('brainstorm-input');
+  if (brainstormInput) {
+    brainstormInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        doBrainstorm();
+      }
+    });
+  }
+
+  window.brainstormUseCase = brainstormUseCase;
+  window.doBrainstorm = doBrainstorm;
+})();
+</script>
+
 </body>
 </html>