Hugging Face's logo

Spaces:
WebashalarForML
/
AI-GUIDE
Running

App Files Community
WebashalarForML commited on
Commit
a0300f8
·
verified ·
1 Parent(s): 3939c84

Upload 4 files

Browse files
Files changed (4) hide show
  1. HUGGINGFACE_DEPLOY.md +134 -0
  2. index.html +737 -19
  3. main.js +345 -0
  4. style.css +1320 -28
HUGGINGFACE_DEPLOY.md ADDED
@@ -0,0 +1,134 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Deploying to Hugging Face Spaces (Static HTML)
2
+
3
+ This guide explains how to deploy the presentation site to Hugging Face Spaces on **port 7860**.
4
+
5
+ ---
6
+
7
+ ## Prerequisites
8
+
9
+ 1. A [Hugging Face](https://huggingface.co/) account
10
+ 2. Git installed on your machine
11
+
12
+ ---
13
+
14
+ ## Step 1: Create a New Space
15
+
16
+ 1. Go to [https://huggingface.co/new-space](https://huggingface.co/new-space)
17
+ 2. Enter a **Space name** (e.g., `ai-powered-developer-presentation`)
18
+ 3. Select **Static** as the Space SDK (or "HTML" if available)
19
+ 4. Choose visibility (Public or Private)
20
+ 5. Click **Create Space**
21
+
22
+ ---
23
+
24
+ ## Step 2: Clone the Space Repository
25
+
26
+ ```bash
27
+ git clone https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
28
+ cd YOUR_SPACE_NAME
29
+ ```
30
+
31
+ ---
32
+
33
+ ## Step 3: Copy Project Files
34
+
35
+ Copy these files into the cloned repository:
36
+
37
+ ```
38
+ YOUR_SPACE_NAME/
39
+ ├── index.html
40
+ ├── style.css
41
+ ├── main.js
42
+ └── icon_assets/ # Copy the entire folder
43
+ ├── chatgpt-3.svg
44
+ ├── Google_Gemini_icon_2025.svg
45
+ ├── Anthropic Symbol SVG.svg
46
+ ├── OpenAI Symbol SVG.svg
47
+ ├── X Symbol SVG.svg
48
+ ├── Vscode.svg
49
+ ├── cursor.svg
50
+ ├── antigravity.png
51
+ ├── Windsurf Icon.png
52
+ ├── kiro.svg
53
+ └── qoder.svg
54
+ ```
55
+
56
+ ---
57
+
58
+ ## Step 4: Fix Icon Paths for Hugging Face
59
+
60
+ In `index.html`, change all icon paths from `../icon_assets/` to `./icon_assets/`:
61
+
62
+ **Find and Replace:**
63
+ - `../icon_assets/` → `./icon_assets/`
64
+
65
+ This is because Hugging Face serves from the root of the space.
66
+
67
+ ---
68
+
69
+ ## Step 5: Commit and Push
70
+
71
+ ```bash
72
+ git add .
73
+ git commit -m "Add presentation site files"
74
+ git push
75
+ ```
76
+
77
+ ---
78
+
79
+ ## Step 6: Access Your Site
80
+
81
+ Your site will be available at:
82
+
83
+ ```
84
+ https://YOUR_USERNAME-YOUR_SPACE_NAME.hf.space
85
+ ```
86
+
87
+ Hugging Face Spaces automatically serves static HTML on port **7860** internally.
88
+
89
+ ---
90
+
91
+ ## Alternative: Using app.py (Gradio Wrapper)
92
+
93
+ If you prefer a Python wrapper, create an `app.py`:
94
+
95
+ ```python
96
+ import gradio as gr
97
+ from pathlib import Path
98
+
99
+ # Read the HTML file
100
+ html_content = Path("index.html").read_text()
101
+
102
+ # Simple Gradio app that serves HTML
103
+ with gr.Blocks() as demo:
104
+ gr.HTML(html_content)
105
+
106
+ demo.launch(server_port=7860)
107
+ ```
108
+
109
+ And a `requirements.txt`:
110
+ ```
111
+ gradio
112
+ ```
113
+
114
+ ---
115
+
116
+ ## Troubleshooting
117
+
118
+ | Issue | Solution |
119
+ |-------|----------|
120
+ | Icons not loading | Make sure paths are `./icon_assets/` (relative to root) |
121
+ | CSS/JS not loading | Verify all files are in the same directory |
122
+ | 404 errors | Check file names are exactly matching (case-sensitive) |
123
+
124
+ ---
125
+
126
+ ## Quick Checklist
127
+
128
+ - [ ] Space created on Hugging Face
129
+ - [ ] Files copied to the space directory
130
+ - [ ] Icon paths updated to `./icon_assets/`
131
+ - [ ] Icon folder included with all assets
132
+ - [ ] Pushed to Hugging Face
133
+
134
+ Your presentation will be live! 🎉
index.html CHANGED
@@ -1,19 +1,737 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>The AI-Powered Developer — Strategic Prompting, Agentic Workflows & Tooling</title>
8
+ <meta name="description" content="Practical approaches, templates, and decisions for frontend delivery using AI.">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
12
+ rel="stylesheet">
13
+ <link rel="stylesheet" href="style.css">
14
+ </head>
15
+
16
+ <body>
17
+ <div class="presentation-container">
18
+ <!-- Progress Bar -->
19
+ <div class="progress-bar">
20
+ <div class="progress-fill" id="progressFill"></div>
21
+ </div>
22
+
23
+ <!-- Slide Counter -->
24
+ <div class="slide-counter">
25
+ <span id="currentSlide">1</span> / <span id="totalSlides">13</span>
26
+ </div>
27
+
28
+ <!-- Navigation Controls -->
29
+ <div class="nav-controls">
30
+ <button class="nav-btn" id="prevBtn" aria-label="Previous Slide">
31
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
32
+ <polyline points="15 18 9 12 15 6"></polyline>
33
+ </svg>
34
+ </button>
35
+ <button class="nav-btn" id="nextBtn" aria-label="Next Slide">
36
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
37
+ <polyline points="9 18 15 12 9 6"></polyline>
38
+ </svg>
39
+ </button>
40
+ </div>
41
+
42
+ <!-- Slides Container -->
43
+ <div class="slides-wrapper" id="slidesWrapper">
44
+
45
+ <!-- ==================== SLIDE 1: Title ==================== -->
46
+ <section class="slide active" data-slide="1">
47
+ <div class="slide-content title-slide">
48
+ <div class="title-badge">AI-Powered Development</div>
49
+ <h1 class="main-title">
50
+ <span class="gradient-text">The AI-Powered Developer</span>
51
+ </h1>
52
+ <p class="subtitle">Strategic Prompting, Agentic Workflows & Tooling</p>
53
+ <p class="tagline">Practical approaches, templates, and decisions for frontend delivery</p>
54
+ <div class="logo-row">
55
+ <div class="logo-wrapper"><img src="../icon_assets/chatgpt-3.svg" alt="ChatGPT"
56
+ class="logo-icon" title="ChatGPT"></div>
57
+ <div class="logo-wrapper"><img src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Gemini"
58
+ class="logo-icon" title="Gemini"></div>
59
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/Anthropic Symbol SVG.svg"
60
+ alt="Claude" class="logo-icon" title="Claude"></div>
61
+ <div class="logo-wrapper"><img src="../icon_assets/Vscode.svg" alt="VS Code" class="logo-icon"
62
+ title="VS Code"></div>
63
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/cursor.svg" alt="Cursor"
64
+ class="logo-icon" title="Cursor"></div>
65
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/X Symbol SVG.svg" alt="X/Grok"
66
+ class="logo-icon" title="Grok"></div>
67
+ </div>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- ==================== SLIDE 2: Agenda ==================== -->
72
+ <section class="slide" data-slide="2">
73
+ <div class="slide-content">
74
+ <h2 class="slide-title">Agenda</h2>
75
+ <p class="slide-subtitle">What we'll cover today</p>
76
+ <div class="agenda-list">
77
+ <div class="agenda-item" style="--delay: 0.1s">
78
+ <span class="agenda-number">01</span>
79
+ <span class="agenda-text">Interactive: How would you approach a task?</span>
80
+ </div>
81
+ <div class="agenda-item" style="--delay: 0.2s">
82
+ <span class="agenda-number">02</span>
83
+ <span class="agenda-text">Prompt template families & provider resources</span>
84
+ </div>
85
+ <div class="agenda-item" style="--delay: 0.3s">
86
+ <span class="agenda-number">03</span>
87
+ <span class="agenda-text">LLM platforms & interactive leaderboard poll</span>
88
+ </div>
89
+ <div class="agenda-item" style="--delay: 0.4s">
90
+ <span class="agenda-number">04</span>
91
+ <span class="agenda-text">Modes, MCP & Connectors overview</span>
92
+ </div>
93
+ <div class="agenda-item" style="--delay: 0.5s">
94
+ <span class="agenda-number">05</span>
95
+ <span class="agenda-text">LLM versions & benchmarks with SWE-Bench</span>
96
+ </div>
97
+ <div class="agenda-item" style="--delay: 0.6s">
98
+ <span class="agenda-number">06</span>
99
+ <span class="agenda-text">AI code editors poll & my pick</span>
100
+ </div>
101
+ <div class="agenda-item" style="--delay: 0.7s">
102
+ <span class="agenda-number">07</span>
103
+ <span class="agenda-text">Risks, precautions & closing thoughts</span>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <!-- ==================== SLIDE 3: Interactive Opener ==================== -->
110
+ <section class="slide" data-slide="3">
111
+ <div class="slide-content">
112
+ <div class="interactive-badge">🎯 Interactive Discussion</div>
113
+ <h2 class="slide-title">How would <em>you</em> approach these challenges?</h2>
114
+
115
+ <div class="scenarios-container">
116
+ <h3 class="section-header">Common Developer Scenarios</h3>
117
+ <div class="scenario-tags">
118
+ <span class="scenario-tag">🔬 R&D / Research</span>
119
+ <span class="scenario-tag">⚡ Rapid Prototyping</span>
120
+ <span class="scenario-tag">🔗 API Integration</span>
121
+ <span class="scenario-tag">🚀 MVP Generation</span>
122
+ <span class="scenario-tag">🧪 Testing & QA</span>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="approaches-grid">
127
+ <div class="approach-card open-discussion" data-option="A">
128
+ <span class="approach-letter">A</span>
129
+ <h3>Design First</h3>
130
+ <p>Create mock → hand off to dev</p>
131
+ <div class="approach-details">
132
+ <strong>Best for:</strong> Complex UX, team collaboration<br>
133
+ <strong>Challenge:</strong> Slow iteration, design-dev gap
134
+ </div>
135
+ </div>
136
+ <div class="approach-card open-discussion" data-option="B">
137
+ <span class="approach-letter">B</span>
138
+ <h3>Code First</h3>
139
+ <p>Prototype directly in code</p>
140
+ <div class="approach-details">
141
+ <strong>Best for:</strong> Fast feedback, developer-led<br>
142
+ <strong>Challenge:</strong> Technical debt, missing design
143
+ </div>
144
+ </div>
145
+ <div class="approach-card open-discussion" data-option="C">
146
+ <span class="approach-letter">C</span>
147
+ <h3>AI-Assisted</h3>
148
+ <p>Prompt LLM to generate component + tests</p>
149
+ <div class="approach-details">
150
+ <strong>Best for:</strong> Speed, boilerplate, exploration<br>
151
+ <strong>Challenge:</strong> Hallucinations, review overhead
152
+ </div>
153
+ </div>
154
+ </div>
155
+
156
+ <p class="discussion-prompt">💬 Let's discuss: Which approach fits your current project? What
157
+ challenges do you face with each?</p>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- ==================== SLIDE 4: Prompt Template Families ==================== -->
162
+ <section class="slide" data-slide="4">
163
+ <div class="slide-content">
164
+ <h2 class="slide-title">Prompt Template Families</h2>
165
+ <p class="slide-subtitle">Common patterns across all providers</p>
166
+
167
+ <div class="templates-grid">
168
+ <div class="template-card">
169
+ <span class="template-icon">📋</span>
170
+ <h3>System + User</h3>
171
+ <p>Separate role/context from user input</p>
172
+ </div>
173
+ <div class="template-card">
174
+ <span class="template-icon">🎯</span>
175
+ <h3>Zero-Shot</h3>
176
+ <p>Single clear instruction</p>
177
+ </div>
178
+ <div class="template-card">
179
+ <span class="template-icon">📚</span>
180
+ <h3>Few-Shot</h3>
181
+ <p>Include input→output examples</p>
182
+ </div>
183
+ <div class="template-card">
184
+ <span class="template-icon">🧠</span>
185
+ <h3>Chain-of-Thought</h3>
186
+ <p>Step-by-step reasoning</p>
187
+ </div>
188
+ <div class="template-card">
189
+ <span class="template-icon">📦</span>
190
+ <h3>JSON Schema</h3>
191
+ <p>Structured output templates</p>
192
+ </div>
193
+ <div class="template-card">
194
+ <span class="template-icon">🔧</span>
195
+ <h3>Tool/Agent</h3>
196
+ <p>External API call scaffolds</p>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="provider-links">
201
+ <h3>📖 Provider Documentation</h3>
202
+ <div class="links-grid">
203
+ <a href="https://platform.openai.com/docs/guides/prompt-engineering" target="_blank"
204
+ class="provider-link">
205
+ <img src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI"
206
+ class="link-icon light-bg-inline">
207
+ <span>OpenAI Guide</span>
208
+ </a>
209
+ <a href="https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompt-templates-and-variables"
210
+ target="_blank" class="provider-link">
211
+ <img src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic"
212
+ class="link-icon light-bg-inline">
213
+ <span>Claude Templates</span>
214
+ </a>
215
+ <a href="https://docs.cloud.google.com/vertex-ai/generative-ai/docs/learn/prompts/prompt-templates"
216
+ target="_blank" class="provider-link">
217
+ <img src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Google" class="link-icon">
218
+ <span>Vertex AI</span>
219
+ </a>
220
+ <a href="https://docs.mistral.ai/capabilities/completion/prompting_capabilities"
221
+ target="_blank" class="provider-link">
222
+ <span class="link-icon text-icon">M</span>
223
+ <span>Mistral Docs</span>
224
+ </a>
225
+ <a href="https://huggingface.co/collections/MoritzLaurer/prompt-templates" target="_blank"
226
+ class="provider-link">
227
+ <span class="link-icon text-icon">🤗</span>
228
+ <span>HuggingFace</span>
229
+ </a>
230
+ <a href="https://www.pinecone.io/learn/series/langchain/langchain-prompt-templates/"
231
+ target="_blank" class="provider-link">
232
+ <span class="link-icon text-icon">🔗</span>
233
+ <span>LangChain</span>
234
+ </a>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </section>
239
+
240
+ <!-- ==================== SLIDE 5: LLM Platforms + Interactive Poll ==================== -->
241
+ <section class="slide" data-slide="5">
242
+ <div class="slide-content">
243
+ <h2 class="slide-title">LLM Platforms & Your Preference</h2>
244
+ <p class="slide-subtitle">Click to vote for your preferred LLM!</p>
245
+
246
+ <div class="llm-platforms-grid">
247
+ <div class="llm-card voting-card" data-llm="openai">
248
+ <div class="llm-header">
249
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/OpenAI Symbol SVG.svg"
250
+ alt="OpenAI" class="llm-icon"></div>
251
+ <h3>OpenAI / ChatGPT</h3>
252
+ </div>
253
+ <p>Generalist, broad ecosystem</p>
254
+ <div class="vote-bar">
255
+ <div class="vote-fill" data-votes="0"></div>
256
+ </div>
257
+ <span class="vote-count">0 votes</span>
258
+ </div>
259
+ <div class="llm-card voting-card" data-llm="gemini">
260
+ <div class="llm-header">
261
+ <div class="logo-wrapper"><img src="../icon_assets/Google_Gemini_icon_2025.svg"
262
+ alt="Gemini" class="llm-icon"></div>
263
+ <h3>Google Gemini</h3>
264
+ </div>
265
+ <p>Multi-modal, strong all-around</p>
266
+ <div class="vote-bar">
267
+ <div class="vote-fill" data-votes="0"></div>
268
+ </div>
269
+ <span class="vote-count">0 votes</span>
270
+ </div>
271
+ <div class="llm-card voting-card" data-llm="anthropic">
272
+ <div class="llm-header">
273
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/Anthropic Symbol SVG.svg"
274
+ alt="Anthropic" class="llm-icon"></div>
275
+ <h3>Anthropic Claude</h3>
276
+ </div>
277
+ <p>High agentic reasoning</p>
278
+ <div class="vote-bar">
279
+ <div class="vote-fill" data-votes="0"></div>
280
+ </div>
281
+ <span class="vote-count">0 votes</span>
282
+ </div>
283
+ <div class="llm-card voting-card" data-llm="meta">
284
+ <div class="llm-header">
285
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/X Symbol SVG.svg" alt="Meta"
286
+ class="llm-icon"></div>
287
+ <h3>Meta Llama / Grok</h3>
288
+ </div>
289
+ <p>Open source, fine-tunable</p>
290
+ <div class="vote-bar">
291
+ <div class="vote-fill" data-votes="0"></div>
292
+ </div>
293
+ <span class="vote-count">0 votes</span>
294
+ </div>
295
+ <div class="llm-card voting-card" data-llm="mistral">
296
+ <div class="llm-header">
297
+ <div class="logo-wrapper"><span class="text-logo">M</span></div>
298
+ <h3>Mistral</h3>
299
+ </div>
300
+ <p>Large context, efficient</p>
301
+ <div class="vote-bar">
302
+ <div class="vote-fill" data-votes="0"></div>
303
+ </div>
304
+ <span class="vote-count">0 votes</span>
305
+ </div>
306
+ <div class="llm-card voting-card" data-llm="other">
307
+ <div class="llm-header">
308
+ <div class="logo-wrapper"><span class="text-logo">+</span></div>
309
+ <h3>Other / Local</h3>
310
+ </div>
311
+ <p>Ollama, custom models</p>
312
+ <div class="vote-bar">
313
+ <div class="vote-fill" data-votes="0"></div>
314
+ </div>
315
+ <span class="vote-count">0 votes</span>
316
+ </div>
317
+ </div>
318
+
319
+ <div class="leaderboard-link">
320
+ <a href="https://lmarena.ai/leaderboard" target="_blank" class="arena-link">
321
+ 🏆 View Live LLM Arena Leaderboard →
322
+ </a>
323
+ </div>
324
+ </div>
325
+ </section>
326
+
327
+ <!-- ==================== SLIDE 6: Modes, MCP & Connectors ==================== -->
328
+ <section class="slide" data-slide="6">
329
+ <div class="slide-content">
330
+ <h2 class="slide-title">Modes, MCP & Connectors</h2>
331
+ <p class="slide-subtitle">Enable these for maximum productivity</p>
332
+
333
+ <div class="modes-extended-grid">
334
+ <div class="mode-extended-card">
335
+ <div class="mode-icon-wrapper">🔍</div>
336
+ <h3>Research Mode</h3>
337
+ <p>Gather references, docs, constraints</p>
338
+ <div class="mode-tasks">
339
+ <span class="task-tag">📄 Documentation search</span>
340
+ <span class="task-tag">🔗 API discovery</span>
341
+ <span class="task-tag">📚 Best practices</span>
342
+ </div>
343
+ </div>
344
+ <div class="mode-extended-card">
345
+ <div class="mode-icon-wrapper">🎨</div>
346
+ <h3>Canvas Mode</h3>
347
+ <p>Create visual/interactive mockups</p>
348
+ <div class="mode-tasks">
349
+ <span class="task-tag">🖼️ UI/UX design</span>
350
+ <span class="task-tag">📊 Diagrams</span>
351
+ <span class="task-tag">🎯 Wireframes</span>
352
+ </div>
353
+ </div>
354
+ <div class="mode-extended-card">
355
+ <div class="mode-icon-wrapper">🧠</div>
356
+ <h3>Thinking Mode</h3>
357
+ <p>Let model plan (CoT) before coding</p>
358
+ <div class="mode-tasks">
359
+ <span class="task-tag">🔄 Complex logic</span>
360
+ <span class="task-tag">🧩 Problem decomposition</span>
361
+ <span class="task-tag">📋 Planning</span>
362
+ </div>
363
+ </div>
364
+ </div>
365
+
366
+ <div class="mcp-section">
367
+ <h3 class="section-header">🔌 MCP (Model Context Protocol) & Connectors</h3>
368
+ <div class="mcp-grid">
369
+ <div class="mcp-card">
370
+ <h4>What is MCP?</h4>
371
+ <p>Standard protocol for AI models to connect with external tools, databases, and APIs
372
+ </p>
373
+ </div>
374
+ <div class="mcp-card">
375
+ <h4>Connectors Enable</h4>
376
+ <ul>
377
+ <li>🗄️ Database access (read-only recommended!)</li>
378
+ <li>🌐 Web browsing & scraping</li>
379
+ <li>📁 File system operations</li>
380
+ <li>🔧 Custom tool integration</li>
381
+ </ul>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ </div>
386
+ </section>
387
+
388
+ <!-- ==================== SLIDE 7: LLM Versions & Benchmarks ==================== -->
389
+ <section class="slide" data-slide="7">
390
+ <div class="slide-content">
391
+ <h2 class="slide-title">LLM Versions & Benchmarks</h2>
392
+ <p class="slide-subtitle">Current leaders and what to measure</p>
393
+
394
+ <div class="benchmarks-section">
395
+ <div class="benchmark-table-container">
396
+ <table class="benchmark-table">
397
+ <thead>
398
+ <tr>
399
+ <th>Model</th>
400
+ <th>Provider</th>
401
+ <th>Strength</th>
402
+ <th>Best For</th>
403
+ </tr>
404
+ </thead>
405
+ <tbody>
406
+ <tr>
407
+ <td>
408
+ <div class="model-cell">
409
+ <div class="logo-wrapper-small light-bg"><img
410
+ src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic"
411
+ class="table-icon"></div>
412
+ <strong>Claude Sonnet 4</strong>
413
+ </div>
414
+ </td>
415
+ <td>Anthropic</td>
416
+ <td>High agentic reasoning</td>
417
+ <td>Autonomous tasks</td>
418
+ </tr>
419
+ <tr>
420
+ <td>
421
+ <div class="model-cell">
422
+ <div class="logo-wrapper-small"><img
423
+ src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Gemini"
424
+ class="table-icon"></div>
425
+ <strong>Gemini 2.5 Pro</strong>
426
+ </div>
427
+ </td>
428
+ <td>Google</td>
429
+ <td>All-around performance</td>
430
+ <td>Multimodal apps</td>
431
+ </tr>
432
+ <tr>
433
+ <td>
434
+ <div class="model-cell">
435
+ <div class="logo-wrapper-small light-bg"><img
436
+ src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI"
437
+ class="table-icon"></div>
438
+ <strong>GPT-4o / o1</strong>
439
+ </div>
440
+ </td>
441
+ <td>OpenAI</td>
442
+ <td>Reliable code gen</td>
443
+ <td>High-volume tasks</td>
444
+ </tr>
445
+ <tr>
446
+ <td>
447
+ <div class="model-cell">
448
+ <div class="logo-wrapper-small"><span class="mini-text-logo">M</span>
449
+ </div>
450
+ <strong>Mistral Large</strong>
451
+ </div>
452
+ </td>
453
+ <td>Mistral</td>
454
+ <td>Large context (128K)</td>
455
+ <td>Documents & code</td>
456
+ </tr>
457
+ </tbody>
458
+ </table>
459
+ </div>
460
+
461
+ <div class="kpi-links">
462
+ <h3>📊 Key Benchmarks & Leaderboards</h3>
463
+ <div class="kpi-grid">
464
+ <a href="https://www.swebench.com/" target="_blank" class="kpi-link">
465
+ <span class="kpi-icon">🎯</span>
466
+ <span>SWE-Bench</span>
467
+ <small>Agentic coding tasks</small>
468
+ </a>
469
+ <a href="https://lmarena.ai/leaderboard" target="_blank" class="kpi-link">
470
+ <span class="kpi-icon">🏆</span>
471
+ <span>LLM Arena</span>
472
+ <small>Community rankings</small>
473
+ </a>
474
+ <a href="https://huggingface.co/spaces/open-llm-leaderboard/open_llm_leaderboard"
475
+ target="_blank" class="kpi-link">
476
+ <span class="kpi-icon">🤗</span>
477
+ <span>Open LLM Board</span>
478
+ <small>Open source models</small>
479
+ </a>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- ==================== SLIDE 8: AI Code Editors Poll ==================== -->
487
+ <section class="slide" data-slide="8">
488
+ <div class="slide-content">
489
+ <div class="interactive-badge">🗳️ Interactive Poll</div>
490
+ <h2 class="slide-title">Which AI code editor do you use?</h2>
491
+ <p class="slide-subtitle">Click to vote! Multiple votes allowed.</p>
492
+
493
+ <div class="editors-poll-grid">
494
+ <div class="editor-poll-card voting-editor" data-editor="vscode">
495
+ <div class="logo-wrapper"><img src="../icon_assets/Vscode.svg" alt="VS Code"
496
+ class="editor-poll-icon"></div>
497
+ <span class="editor-name">VS Code + Copilot</span>
498
+ <div class="vote-bar">
499
+ <div class="vote-fill" data-votes="0"></div>
500
+ </div>
501
+ <span class="vote-count">0 votes</span>
502
+ </div>
503
+ <div class="editor-poll-card voting-editor" data-editor="cursor">
504
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/cursor.svg" alt="Cursor"
505
+ class="editor-poll-icon"></div>
506
+ <span class="editor-name">Cursor</span>
507
+ <div class="vote-bar">
508
+ <div class="vote-fill" data-votes="0"></div>
509
+ </div>
510
+ <span class="vote-count">0 votes</span>
511
+ </div>
512
+ <div class="editor-poll-card voting-editor" data-editor="antigravity">
513
+ <div class="logo-wrapper"><img src="../icon_assets/antigravity.png" alt="Antigravity"
514
+ class="editor-poll-icon"></div>
515
+ <span class="editor-name">Antigravity</span>
516
+ <div class="vote-bar">
517
+ <div class="vote-fill" data-votes="0"></div>
518
+ </div>
519
+ <span class="vote-count">0 votes</span>
520
+ </div>
521
+ <div class="editor-poll-card voting-editor" data-editor="windsurf">
522
+ <div class="logo-wrapper"><img src="../icon_assets/Windsurf Icon.png" alt="Windsurf"
523
+ class="editor-poll-icon"></div>
524
+ <span class="editor-name">Windsurf</span>
525
+ <div class="vote-bar">
526
+ <div class="vote-fill" data-votes="0"></div>
527
+ </div>
528
+ <span class="vote-count">0 votes</span>
529
+ </div>
530
+ <div class="editor-poll-card voting-editor" data-editor="kiro">
531
+ <div class="logo-wrapper"><img src="../icon_assets/kiro.svg" alt="Kiro"
532
+ class="editor-poll-icon"></div>
533
+ <span class="editor-name">Kiro (AWS)</span>
534
+ <div class="vote-bar">
535
+ <div class="vote-fill" data-votes="0"></div>
536
+ </div>
537
+ <span class="vote-count">0 votes</span>
538
+ </div>
539
+ <div class="editor-poll-card voting-editor" data-editor="qoder">
540
+ <div class="logo-wrapper"><img src="../icon_assets/qoder.svg" alt="Qoder"
541
+ class="editor-poll-icon"></div>
542
+ <span class="editor-name">Qoder</span>
543
+ <div class="vote-bar">
544
+ <div class="vote-fill" data-votes="0"></div>
545
+ </div>
546
+ <span class="vote-count">0 votes</span>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </section>
551
+
552
+ <!-- ==================== SLIDE 9: My Pick - Antigravity ==================== -->
553
+ <section class="slide" data-slide="9">
554
+ <div class="slide-content">
555
+ <h2 class="slide-title">My Pick</h2>
556
+ <p class="slide-subtitle">The IDE I use for agentic development</p>
557
+
558
+ <div class="my-pick-container">
559
+ <div class="pick-card featured">
560
+ <div class="pick-header">
561
+ <img src="../icon_assets/antigravity.png" alt="Antigravity" class="pick-main-icon">
562
+ <div>
563
+ <h3>Antigravity</h3>
564
+ <span class="pick-tagline">AI-First Agentic IDE</span>
565
+ </div>
566
+ </div>
567
+ <div class="pick-features">
568
+ <div class="feature-item">
569
+ <span class="feature-icon">🤖</span>
570
+ <span>Built-in agent manager for complex tasks</span>
571
+ </div>
572
+ <div class="feature-item">
573
+ <span class="feature-icon">🧪</span>
574
+ <span>Integrated testing & browser automation</span>
575
+ </div>
576
+ <div class="feature-item">
577
+ <span class="feature-icon">🔄</span>
578
+ <span>Multi-model support (switch providers)</span>
579
+ </div>
580
+ <div class="feature-item">
581
+ <span class="feature-icon">📁</span>
582
+ <span>VS Code based — familiar environment</span>
583
+ </div>
584
+ <div class="feature-item">
585
+ <span class="feature-icon">💰</span>
586
+ <span>Freemium model — try before you commit</span>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <!-- ==================== SLIDE 10: Demo Time ==================== -->
595
+ <section class="slide" data-slide="10">
596
+ <div class="slide-content demo-slide">
597
+ <div class="demo-badge">🎬 LIVE DEMO</div>
598
+ <h2 class="demo-title gradient-text">Demo Time</h2>
599
+ <p class="demo-subtitle">Let me show you what AI-assisted development looks like in practice</p>
600
+ <div class="demo-placeholder">
601
+ <div class="demo-icon">💻</div>
602
+ <p>Application demonstration in progress...</p>
603
+ </div>
604
+ </div>
605
+ </section>
606
+
607
+ <!-- ==================== SLIDE 11: Risks & Precautions ==================== -->
608
+ <section class="slide" data-slide="11">
609
+ <div class="slide-content">
610
+ <div class="warning-badge">⚠️ Critical Awareness</div>
611
+ <h2 class="slide-title">Real AI Editor Incidents</h2>
612
+ <p class="slide-subtitle">Why precautions matter — these actually happened</p>
613
+
614
+ <div class="incidents-grid">
615
+ <div class="incident-card danger">
616
+ <div class="incident-header">
617
+ <span class="incident-icon">💥</span>
618
+ <h3>Entire Drive Deleted</h3>
619
+ </div>
620
+ <p>AI deleted user's entire D:\ drive instead of a cache folder. Irreversible data loss.</p>
621
+ </div>
622
+ <div class="incident-card danger">
623
+ <div class="incident-header">
624
+ <span class="incident-icon">🗄️</span>
625
+ <h3>Production DB Wiped</h3>
626
+ </div>
627
+ <p>Replit AI Agent wiped live production codebase & database despite explicit instructions
628
+ not to.</p>
629
+ </div>
630
+ <div class="incident-card warning">
631
+ <div class="incident-header">
632
+ <span class="incident-icon">🔓</span>
633
+ <h3>30+ IDE Vulnerabilities</h3>
634
+ </div>
635
+ <p>"IDESaster" research found critical security flaws in Cursor, Copilot, Windsurf, Zed...
636
+ </p>
637
+ </div>
638
+ <div class="incident-card warning">
639
+ <div class="incident-header">
640
+ <span class="incident-icon">💸</span>
641
+ <h3>Costly Outages</h3>
642
+ </div>
643
+ <p>Untested AI-generated code pushed to production — hundreds of thousands in damages.</p>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="takeaway-box">
648
+ <span class="takeaway-icon">🎯</span>
649
+ <p><strong>AI editors are no longer just assistants — they are operators.</strong> Without
650
+ strict permission boundaries, they cause damage at machine speed.</p>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- ==================== SLIDE 12: Safety Precautions ==================== -->
656
+ <section class="slide" data-slide="12">
657
+ <div class="slide-content">
658
+ <h2 class="slide-title">Precautions & Best Practices</h2>
659
+ <p class="slide-subtitle">Protect yourself and your team</p>
660
+
661
+ <div class="precautions-grid">
662
+ <div class="precaution-card">
663
+ <span class="precaution-icon">🔒</span>
664
+ <h3>Never Give DB Write Access</h3>
665
+ <p>Use read-only connections. No direct production access for AI agents.</p>
666
+ </div>
667
+ <div class="precaution-card">
668
+ <span class="precaution-icon">👁️</span>
669
+ <h3>Always Review Output</h3>
670
+ <p>Never auto-deploy AI-generated code. Human review is mandatory.</p>
671
+ </div>
672
+ <div class="precaution-card">
673
+ <span class="precaution-icon">🧪</span>
674
+ <h3>Sandbox & Test</h3>
675
+ <p>Run AI operations in isolated environments. Test before production.</p>
676
+ </div>
677
+ <div class="precaution-card">
678
+ <span class="precaution-icon">⚡</span>
679
+ <h3>Disable Auto-Run</h3>
680
+ <p>Turn off autonomous command execution. Require confirmation for destructive actions.</p>
681
+ </div>
682
+ <div class="precaution-card">
683
+ <span class="precaution-icon">💾</span>
684
+ <h3>Backup Everything</h3>
685
+ <p>Regular backups before AI operations. Version control is your friend.</p>
686
+ </div>
687
+ <div class="precaution-card">
688
+ <span class="precaution-icon">📋</span>
689
+ <h3>Scope Limitations</h3>
690
+ <p>Define clear boundaries. Limit file system and network access.</p>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </section>
695
+
696
+ <!-- ==================== SLIDE 13: Thank You & Closing ==================== -->
697
+ <section class="slide" data-slide="13">
698
+ <div class="slide-content closing-slide">
699
+ <h2 class="closing-title gradient-text">Thank You!</h2>
700
+
701
+ <div class="closing-message">
702
+ <div class="closing-card">
703
+ <span class="closing-icon">🧠</span>
704
+ <h3>Don't Make It a Habit</h3>
705
+ <p>AI is a powerful tool, but don't let it replace your thinking. Always brainstorm the
706
+ logical flow yourself first.</p>
707
+ </div>
708
+ <div class="closing-card">
709
+ <span class="closing-icon">🔄</span>
710
+ <h3>Stay Critical</h3>
711
+ <p>Review, test, and validate. The human in the loop is what keeps everything safe.</p>
712
+ </div>
713
+ <div class="closing-card">
714
+ <span class="closing-icon">📈</span>
715
+ <h3>Keep Learning</h3>
716
+ <p>The landscape changes fast. Stay updated on best practices and new risks.</p>
717
+ </div>
718
+ </div>
719
+
720
+ <div class="contact-section">
721
+ <p class="questions-text">Questions? Let's discuss!</p>
722
+ </div>
723
+ </div>
724
+ </section>
725
+
726
+ </div>
727
+
728
+ <!-- Keyboard Hints -->
729
+ <div class="keyboard-hints">
730
+ <span>← → or Space to navigate</span>
731
+ </div>
732
+ </div>
733
+
734
+ <script src="main.js"></script>
735
+ </body>
736
+
737
+ </html>
main.js ADDED
@@ -0,0 +1,345 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /**
2
+ * The AI-Powered Developer - Presentation Engine
3
+ * Pure JavaScript - No Dependencies
4
+ * REVISED with interactive voting
5
+ */
6
+
7
+ (function () {
8
+ 'use strict';
9
+
10
+ // State
11
+ let currentSlide = 1;
12
+ const totalSlides = 13;
13
+ let isAnimating = false;
14
+
15
+ // Voting state
16
+ const llmVotes = {
17
+ openai: 0,
18
+ gemini: 0,
19
+ anthropic: 0,
20
+ meta: 0,
21
+ mistral: 0,
22
+ other: 0
23
+ };
24
+
25
+ const editorVotes = {
26
+ vscode: 0,
27
+ cursor: 0,
28
+ antigravity: 0,
29
+ windsurf: 0,
30
+ kiro: 0,
31
+ qoder: 0
32
+ };
33
+
34
+ // DOM Elements
35
+ const slidesWrapper = document.getElementById('slidesWrapper');
36
+ const progressFill = document.getElementById('progressFill');
37
+ const currentSlideEl = document.getElementById('currentSlide');
38
+ const totalSlidesEl = document.getElementById('totalSlides');
39
+ const prevBtn = document.getElementById('prevBtn');
40
+ const nextBtn = document.getElementById('nextBtn');
41
+ const slides = document.querySelectorAll('.slide');
42
+
43
+ // Initialize
44
+ function init() {
45
+ totalSlidesEl.textContent = totalSlides;
46
+ updateSlide(1);
47
+ bindEvents();
48
+ initVoting();
49
+ addInteractiveFeatures();
50
+ }
51
+
52
+ // Bind Events
53
+ function bindEvents() {
54
+ // Navigation buttons
55
+ prevBtn.addEventListener('click', goToPrevSlide);
56
+ nextBtn.addEventListener('click', goToNextSlide);
57
+
58
+ // Keyboard navigation
59
+ document.addEventListener('keydown', handleKeyDown);
60
+
61
+ // Touch/Swipe support
62
+ let touchStartX = 0;
63
+ let touchEndX = 0;
64
+
65
+ document.addEventListener('touchstart', (e) => {
66
+ touchStartX = e.changedTouches[0].screenX;
67
+ }, { passive: true });
68
+
69
+ document.addEventListener('touchend', (e) => {
70
+ touchEndX = e.changedTouches[0].screenX;
71
+ handleSwipe();
72
+ }, { passive: true });
73
+
74
+ function handleSwipe() {
75
+ const swipeThreshold = 50;
76
+ const diff = touchStartX - touchEndX;
77
+
78
+ if (Math.abs(diff) > swipeThreshold) {
79
+ if (diff > 0) {
80
+ goToNextSlide();
81
+ } else {
82
+ goToPrevSlide();
83
+ }
84
+ }
85
+ }
86
+
87
+ // Mouse wheel (optional)
88
+ let wheelTimeout;
89
+ document.addEventListener('wheel', (e) => {
90
+ if (wheelTimeout) return;
91
+
92
+ wheelTimeout = setTimeout(() => {
93
+ wheelTimeout = null;
94
+ }, 800);
95
+
96
+ if (e.deltaY > 0) {
97
+ goToNextSlide();
98
+ } else if (e.deltaY < 0) {
99
+ goToPrevSlide();
100
+ }
101
+ }, { passive: true });
102
+ }
103
+
104
+ // Keyboard handler
105
+ function handleKeyDown(e) {
106
+ switch (e.key) {
107
+ case 'ArrowRight':
108
+ case ' ':
109
+ case 'Enter':
110
+ e.preventDefault();
111
+ goToNextSlide();
112
+ break;
113
+ case 'ArrowLeft':
114
+ case 'Backspace':
115
+ e.preventDefault();
116
+ goToPrevSlide();
117
+ break;
118
+ case 'Home':
119
+ e.preventDefault();
120
+ goToSlide(1);
121
+ break;
122
+ case 'End':
123
+ e.preventDefault();
124
+ goToSlide(totalSlides);
125
+ break;
126
+ }
127
+
128
+ // Number keys for quick navigation
129
+ const num = parseInt(e.key);
130
+ if (!isNaN(num) && num >= 1 && num <= 9 && num <= totalSlides) {
131
+ goToSlide(num);
132
+ }
133
+ }
134
+
135
+ // Navigation functions
136
+ function goToNextSlide() {
137
+ if (currentSlide < totalSlides && !isAnimating) {
138
+ goToSlide(currentSlide + 1);
139
+ }
140
+ }
141
+
142
+ function goToPrevSlide() {
143
+ if (currentSlide > 1 && !isAnimating) {
144
+ goToSlide(currentSlide - 1);
145
+ }
146
+ }
147
+
148
+ function goToSlide(slideNumber) {
149
+ if (slideNumber === currentSlide || slideNumber < 1 || slideNumber > totalSlides || isAnimating) {
150
+ return;
151
+ }
152
+
153
+ isAnimating = true;
154
+
155
+ currentSlide = slideNumber;
156
+
157
+ // Update slides
158
+ slides.forEach((slide, index) => {
159
+ const slideNum = index + 1;
160
+ slide.classList.remove('active', 'prev');
161
+
162
+ if (slideNum === currentSlide) {
163
+ slide.classList.add('active');
164
+ triggerSlideAnimations(slide);
165
+ } else if (slideNum < currentSlide) {
166
+ slide.classList.add('prev');
167
+ }
168
+ });
169
+
170
+ updateSlide(currentSlide);
171
+
172
+ setTimeout(() => {
173
+ isAnimating = false;
174
+ }, 500);
175
+ }
176
+
177
+ // Update UI elements
178
+ function updateSlide(slideNumber) {
179
+ currentSlideEl.textContent = slideNumber;
180
+
181
+ const progress = (slideNumber / totalSlides) * 100;
182
+ progressFill.style.width = `${progress}%`;
183
+
184
+ prevBtn.style.opacity = slideNumber === 1 ? '0.3' : '1';
185
+ prevBtn.style.pointerEvents = slideNumber === 1 ? 'none' : 'auto';
186
+ nextBtn.style.opacity = slideNumber === totalSlides ? '0.3' : '1';
187
+ nextBtn.style.pointerEvents = slideNumber === totalSlides ? 'none' : 'auto';
188
+
189
+ history.replaceState(null, null, `#slide-${slideNumber}`);
190
+ }
191
+
192
+ // Trigger animations when slide becomes active
193
+ function triggerSlideAnimations(slide) {
194
+ const animatedElements = slide.querySelectorAll('.agenda-item, .step-card, [style*="--delay"]');
195
+ animatedElements.forEach(el => {
196
+ el.style.animation = 'none';
197
+ el.offsetHeight;
198
+ el.style.animation = null;
199
+ });
200
+ }
201
+
202
+ // ========== VOTING SYSTEM ==========
203
+ function initVoting() {
204
+ // LLM voting cards
205
+ const llmCards = document.querySelectorAll('.voting-card');
206
+ llmCards.forEach(card => {
207
+ card.addEventListener('click', () => {
208
+ const llm = card.getAttribute('data-llm');
209
+ if (llm && llmVotes.hasOwnProperty(llm)) {
210
+ llmVotes[llm]++;
211
+ updateVoteDisplay(card, llmVotes[llm], getTotalVotes(llmVotes));
212
+ card.classList.add('voted');
213
+
214
+ // Animate
215
+ card.style.transform = 'scale(0.98)';
216
+ setTimeout(() => {
217
+ card.style.transform = '';
218
+ }, 150);
219
+ }
220
+ });
221
+ });
222
+
223
+ // Editor voting cards
224
+ const editorCards = document.querySelectorAll('.voting-editor');
225
+ editorCards.forEach(card => {
226
+ card.addEventListener('click', () => {
227
+ const editor = card.getAttribute('data-editor');
228
+ if (editor && editorVotes.hasOwnProperty(editor)) {
229
+ editorVotes[editor]++;
230
+ updateVoteDisplay(card, editorVotes[editor], getTotalVotes(editorVotes));
231
+ card.classList.add('voted');
232
+
233
+ // Animate
234
+ card.style.transform = 'scale(0.98)';
235
+ setTimeout(() => {
236
+ card.style.transform = '';
237
+ }, 150);
238
+ }
239
+ });
240
+ });
241
+ }
242
+
243
+ function updateVoteDisplay(card, votes, total) {
244
+ const voteFill = card.querySelector('.vote-fill');
245
+ const voteCount = card.querySelector('.vote-count');
246
+
247
+ if (voteFill) {
248
+ const percentage = total > 0 ? (votes / total) * 100 : 0;
249
+ voteFill.style.width = `${Math.max(percentage, 5)}%`;
250
+ voteFill.setAttribute('data-votes', votes);
251
+ }
252
+
253
+ if (voteCount) {
254
+ voteCount.textContent = `${votes} vote${votes !== 1 ? 's' : ''}`;
255
+ }
256
+
257
+ // Update all cards in the same group to recalculate percentages
258
+ setTimeout(() => {
259
+ updateAllVoteBars(card.closest('.llm-platforms-grid') || card.closest('.editors-poll-grid'));
260
+ }, 50);
261
+ }
262
+
263
+ function updateAllVoteBars(container) {
264
+ if (!container) return;
265
+
266
+ const isLLM = container.classList.contains('llm-platforms-grid');
267
+ const votes = isLLM ? llmVotes : editorVotes;
268
+ const total = getTotalVotes(votes);
269
+
270
+ container.querySelectorAll('.vote-fill').forEach(fill => {
271
+ const card = fill.closest('[data-llm], [data-editor]');
272
+ const key = card.getAttribute('data-llm') || card.getAttribute('data-editor');
273
+ if (key && votes[key] !== undefined) {
274
+ const percentage = total > 0 ? (votes[key] / total) * 100 : 0;
275
+ fill.style.width = `${Math.max(percentage, votes[key] > 0 ? 5 : 0)}%`;
276
+ }
277
+ });
278
+ }
279
+
280
+ function getTotalVotes(votesObj) {
281
+ return Object.values(votesObj).reduce((sum, v) => sum + v, 0);
282
+ }
283
+
284
+ // Add interactive features
285
+ function addInteractiveFeatures() {
286
+ // Approach cards (Slide 3)
287
+ const approachCards = document.querySelectorAll('.approach-card');
288
+ approachCards.forEach(card => {
289
+ card.addEventListener('click', () => {
290
+ approachCards.forEach(c => c.classList.remove('selected'));
291
+ card.classList.add('selected');
292
+ });
293
+ });
294
+
295
+ // External links - open in new tab
296
+ document.querySelectorAll('a[target="_blank"]').forEach(link => {
297
+ link.addEventListener('click', (e) => {
298
+ // Allow default behavior for external links
299
+ });
300
+ });
301
+ }
302
+
303
+ // Handle URL hash for direct slide access
304
+ function handleHash() {
305
+ const hash = window.location.hash;
306
+ if (hash && hash.startsWith('#slide-')) {
307
+ const slideNum = parseInt(hash.replace('#slide-', ''));
308
+ if (slideNum >= 1 && slideNum <= totalSlides) {
309
+ goToSlide(slideNum);
310
+ }
311
+ }
312
+ }
313
+
314
+ window.addEventListener('hashchange', handleHash);
315
+
316
+ // Initialize when DOM is ready
317
+ if (document.readyState === 'loading') {
318
+ document.addEventListener('DOMContentLoaded', () => {
319
+ init();
320
+ handleHash();
321
+ });
322
+ } else {
323
+ init();
324
+ handleHash();
325
+ }
326
+
327
+ // Expose API
328
+ window.PresentationAPI = {
329
+ next: goToNextSlide,
330
+ prev: goToPrevSlide,
331
+ goTo: goToSlide,
332
+ getCurrentSlide: () => currentSlide,
333
+ getTotalSlides: () => totalSlides,
334
+ getLLMVotes: () => ({ ...llmVotes }),
335
+ getEditorVotes: () => ({ ...editorVotes }),
336
+ resetVotes: () => {
337
+ Object.keys(llmVotes).forEach(k => llmVotes[k] = 0);
338
+ Object.keys(editorVotes).forEach(k => editorVotes[k] = 0);
339
+ document.querySelectorAll('.vote-fill').forEach(f => f.style.width = '0%');
340
+ document.querySelectorAll('.vote-count').forEach(c => c.textContent = '0 votes');
341
+ document.querySelectorAll('.voted').forEach(c => c.classList.remove('voted'));
342
+ }
343
+ };
344
+
345
+ })();
style.css CHANGED
@@ -1,28 +1,1320 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
-
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
- }
25
-
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ========================================
2
+ The AI-Powered Developer - Presentation
3
+ Premium Modern Dark Theme - REVISED
4
+ ======================================== */
5
+
6
+ /* CSS Variables */
7
+ :root {
8
+ --bg-primary: #0a0a0f;
9
+ --bg-secondary: #12121a;
10
+ --bg-card: rgba(255, 255, 255, 0.03);
11
+ --bg-card-hover: rgba(255, 255, 255, 0.06);
12
+ --text-primary: #ffffff;
13
+ --text-secondary: rgba(255, 255, 255, 0.7);
14
+ --text-muted: rgba(255, 255, 255, 0.5);
15
+ --accent-primary: #6366f1;
16
+ --accent-secondary: #8b5cf6;
17
+ --accent-tertiary: #ec4899;
18
+ --accent-success: #22c55e;
19
+ --accent-warning: #f59e0b;
20
+ --accent-danger: #ef4444;
21
+ --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
22
+ --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
23
+ --border-color: rgba(255, 255, 255, 0.08);
24
+ --glass-bg: rgba(255, 255, 255, 0.05);
25
+ --glass-border: rgba(255, 255, 255, 0.1);
26
+ --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
27
+ --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.3);
28
+ --transition-fast: 0.2s ease;
29
+ --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
30
+ --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
31
+ }
32
+
33
+ /* Reset & Base */
34
+ *,
35
+ *::before,
36
+ *::after {
37
+ box-sizing: border-box;
38
+ margin: 0;
39
+ padding: 0;
40
+ }
41
+
42
+ html {
43
+ font-size: 16px;
44
+ scroll-behavior: smooth;
45
+ }
46
+
47
+ body {
48
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
49
+ background: var(--bg-primary);
50
+ color: var(--text-primary);
51
+ line-height: 1.6;
52
+ overflow: hidden;
53
+ min-height: 100vh;
54
+ }
55
+
56
+ /* Presentation Container */
57
+ .presentation-container {
58
+ width: 100vw;
59
+ height: 100vh;
60
+ position: relative;
61
+ background: var(--bg-primary);
62
+ background-image:
63
+ radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
64
+ radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
65
+ radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.05) 0%, transparent 70%);
66
+ }
67
+
68
+ /* Progress Bar */
69
+ .progress-bar {
70
+ position: fixed;
71
+ top: 0;
72
+ left: 0;
73
+ width: 100%;
74
+ height: 3px;
75
+ background: var(--border-color);
76
+ z-index: 1000;
77
+ }
78
+
79
+ .progress-fill {
80
+ height: 100%;
81
+ background: var(--gradient-primary);
82
+ width: 7.69%;
83
+ transition: width var(--transition-smooth);
84
+ box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
85
+ }
86
+
87
+ /* Slide Counter */
88
+ .slide-counter {
89
+ position: fixed;
90
+ top: 20px;
91
+ right: 30px;
92
+ font-size: 0.9rem;
93
+ color: var(--text-muted);
94
+ font-weight: 500;
95
+ z-index: 1000;
96
+ letter-spacing: 0.05em;
97
+ }
98
+
99
+ #currentSlide {
100
+ color: var(--text-primary);
101
+ font-weight: 700;
102
+ }
103
+
104
+ /* Navigation Controls */
105
+ .nav-controls {
106
+ position: fixed;
107
+ bottom: 30px;
108
+ left: 50%;
109
+ transform: translateX(-50%);
110
+ display: flex;
111
+ gap: 15px;
112
+ z-index: 1000;
113
+ }
114
+
115
+ .nav-btn {
116
+ width: 50px;
117
+ height: 50px;
118
+ border-radius: 50%;
119
+ border: 1px solid var(--glass-border);
120
+ background: var(--glass-bg);
121
+ backdrop-filter: blur(10px);
122
+ color: var(--text-primary);
123
+ cursor: pointer;
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ transition: all var(--transition-smooth);
128
+ }
129
+
130
+ .nav-btn:hover {
131
+ background: var(--accent-primary);
132
+ border-color: var(--accent-primary);
133
+ transform: scale(1.1);
134
+ box-shadow: var(--shadow-glow);
135
+ }
136
+
137
+ .nav-btn:active {
138
+ transform: scale(0.95);
139
+ }
140
+
141
+ .nav-btn svg {
142
+ width: 20px;
143
+ height: 20px;
144
+ }
145
+
146
+ /* Keyboard Hints */
147
+ .keyboard-hints {
148
+ position: fixed;
149
+ bottom: 30px;
150
+ right: 30px;
151
+ font-size: 0.75rem;
152
+ color: var(--text-muted);
153
+ z-index: 1000;
154
+ }
155
+
156
+ /* Slides Wrapper */
157
+ .slides-wrapper {
158
+ width: 100%;
159
+ height: 100%;
160
+ position: relative;
161
+ }
162
+
163
+ /* Individual Slide */
164
+ .slide {
165
+ position: absolute;
166
+ top: 0;
167
+ left: 0;
168
+ width: 100%;
169
+ height: 100%;
170
+ display: flex;
171
+ align-items: center;
172
+ justify-content: center;
173
+ padding: 60px 80px;
174
+ opacity: 0;
175
+ visibility: hidden;
176
+ transform: translateX(50px);
177
+ transition: all var(--transition-smooth);
178
+ overflow-y: auto;
179
+ }
180
+
181
+ .slide.active {
182
+ opacity: 1;
183
+ visibility: visible;
184
+ transform: translateX(0);
185
+ }
186
+
187
+ .slide.prev {
188
+ transform: translateX(-50px);
189
+ }
190
+
191
+ /* Slide Content */
192
+ .slide-content {
193
+ max-width: 1200px;
194
+ width: 100%;
195
+ animation: slideIn 0.6s ease forwards;
196
+ }
197
+
198
+ @keyframes slideIn {
199
+ from {
200
+ opacity: 0;
201
+ transform: translateY(20px);
202
+ }
203
+
204
+ to {
205
+ opacity: 1;
206
+ transform: translateY(0);
207
+ }
208
+ }
209
+
210
+ /* Typography */
211
+ .gradient-text {
212
+ background: var(--gradient-primary);
213
+ -webkit-background-clip: text;
214
+ -webkit-text-fill-color: transparent;
215
+ background-clip: text;
216
+ }
217
+
218
+ .main-title {
219
+ font-size: clamp(2.5rem, 6vw, 4.5rem);
220
+ font-weight: 800;
221
+ line-height: 1.1;
222
+ margin-bottom: 1rem;
223
+ letter-spacing: -0.02em;
224
+ }
225
+
226
+ .slide-title {
227
+ font-size: clamp(1.75rem, 3.5vw, 2.5rem);
228
+ font-weight: 700;
229
+ margin-bottom: 0.5rem;
230
+ letter-spacing: -0.01em;
231
+ }
232
+
233
+ .subtitle {
234
+ font-size: clamp(1.25rem, 2.5vw, 1.75rem);
235
+ color: var(--text-secondary);
236
+ margin-bottom: 0.5rem;
237
+ font-weight: 400;
238
+ }
239
+
240
+ .slide-subtitle {
241
+ font-size: clamp(0.95rem, 1.25vw, 1.1rem);
242
+ color: var(--text-muted);
243
+ margin-bottom: 1.5rem;
244
+ }
245
+
246
+ .tagline {
247
+ font-size: 1rem;
248
+ color: var(--text-muted);
249
+ margin-bottom: 2rem;
250
+ }
251
+
252
+ /* ========== LOGO WRAPPERS FOR DARK ICONS ========== */
253
+ .logo-wrapper {
254
+ display: inline-flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ padding: 8px;
258
+ border-radius: 10px;
259
+ background: transparent;
260
+ transition: all var(--transition-smooth);
261
+ }
262
+
263
+ .logo-wrapper.light-bg {
264
+ background: rgba(255, 255, 255, 0.9);
265
+ border-radius: 8px;
266
+ }
267
+
268
+ .logo-wrapper-small {
269
+ display: inline-flex;
270
+ align-items: center;
271
+ justify-content: center;
272
+ width: 28px;
273
+ height: 28px;
274
+ border-radius: 6px;
275
+ background: transparent;
276
+ flex-shrink: 0;
277
+ }
278
+
279
+ .logo-wrapper-small.light-bg {
280
+ background: rgba(255, 255, 255, 0.9);
281
+ }
282
+
283
+ .light-bg-inline {
284
+ background: rgba(255, 255, 255, 0.9);
285
+ border-radius: 4px;
286
+ padding: 2px;
287
+ }
288
+
289
+ /* Title Slide */
290
+ .title-slide {
291
+ text-align: center;
292
+ }
293
+
294
+ .title-badge {
295
+ display: inline-block;
296
+ padding: 8px 20px;
297
+ background: var(--gradient-subtle);
298
+ border: 1px solid var(--glass-border);
299
+ border-radius: 100px;
300
+ font-size: 0.875rem;
301
+ font-weight: 500;
302
+ color: var(--accent-primary);
303
+ margin-bottom: 2rem;
304
+ backdrop-filter: blur(10px);
305
+ }
306
+
307
+ .logo-row {
308
+ display: flex;
309
+ justify-content: center;
310
+ gap: 20px;
311
+ flex-wrap: wrap;
312
+ margin-top: 1rem;
313
+ }
314
+
315
+ .logo-icon {
316
+ width: 36px;
317
+ height: 36px;
318
+ object-fit: contain;
319
+ transition: all var(--transition-smooth);
320
+ }
321
+
322
+ .logo-wrapper:hover {
323
+ transform: scale(1.15) translateY(-3px);
324
+ }
325
+
326
+ .logo-wrapper:hover .logo-icon {
327
+ filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.5));
328
+ }
329
+
330
+ /* Agenda List */
331
+ .agenda-list {
332
+ display: flex;
333
+ flex-direction: column;
334
+ gap: 12px;
335
+ max-width: 700px;
336
+ }
337
+
338
+ .agenda-item {
339
+ display: flex;
340
+ align-items: center;
341
+ gap: 20px;
342
+ padding: 15px 22px;
343
+ background: var(--bg-card);
344
+ border: 1px solid var(--border-color);
345
+ border-radius: 12px;
346
+ transition: all var(--transition-smooth);
347
+ animation: fadeInUp 0.5s ease forwards;
348
+ animation-delay: var(--delay);
349
+ opacity: 0;
350
+ }
351
+
352
+ @keyframes fadeInUp {
353
+ from {
354
+ opacity: 0;
355
+ transform: translateY(20px);
356
+ }
357
+
358
+ to {
359
+ opacity: 1;
360
+ transform: translateY(0);
361
+ }
362
+ }
363
+
364
+ .agenda-item:hover {
365
+ background: var(--bg-card-hover);
366
+ border-color: var(--accent-primary);
367
+ transform: translateX(10px);
368
+ }
369
+
370
+ .agenda-number {
371
+ font-size: 1.25rem;
372
+ font-weight: 800;
373
+ background: var(--gradient-primary);
374
+ -webkit-background-clip: text;
375
+ -webkit-text-fill-color: transparent;
376
+ background-clip: text;
377
+ min-width: 40px;
378
+ }
379
+
380
+ .agenda-text {
381
+ font-size: 1rem;
382
+ color: var(--text-secondary);
383
+ }
384
+
385
+ /* Interactive Badge */
386
+ .interactive-badge {
387
+ display: inline-block;
388
+ padding: 6px 16px;
389
+ background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(139, 92, 246, 0.2));
390
+ border: 1px solid rgba(236, 72, 153, 0.3);
391
+ border-radius: 100px;
392
+ font-size: 0.8rem;
393
+ font-weight: 600;
394
+ color: var(--accent-tertiary);
395
+ margin-bottom: 1rem;
396
+ }
397
+
398
+ .warning-badge {
399
+ display: inline-block;
400
+ padding: 6px 16px;
401
+ background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(245, 158, 11, 0.2));
402
+ border: 1px solid rgba(239, 68, 68, 0.3);
403
+ border-radius: 100px;
404
+ font-size: 0.8rem;
405
+ font-weight: 600;
406
+ color: var(--accent-danger);
407
+ margin-bottom: 1rem;
408
+ }
409
+
410
+ .demo-badge {
411
+ display: inline-block;
412
+ padding: 10px 25px;
413
+ background: var(--gradient-primary);
414
+ border-radius: 100px;
415
+ font-size: 1rem;
416
+ font-weight: 700;
417
+ color: white;
418
+ margin-bottom: 1.5rem;
419
+ animation: pulse 2s infinite;
420
+ }
421
+
422
+ @keyframes pulse {
423
+
424
+ 0%,
425
+ 100% {
426
+ transform: scale(1);
427
+ }
428
+
429
+ 50% {
430
+ transform: scale(1.05);
431
+ }
432
+ }
433
+
434
+ /* ========== SLIDE 3: Scenarios & Approaches ========== */
435
+ .scenarios-container {
436
+ margin-bottom: 1.5rem;
437
+ }
438
+
439
+ .section-header {
440
+ font-size: 1rem;
441
+ font-weight: 600;
442
+ color: var(--text-secondary);
443
+ margin-bottom: 0.75rem;
444
+ }
445
+
446
+ .scenario-tags {
447
+ display: flex;
448
+ flex-wrap: wrap;
449
+ gap: 10px;
450
+ }
451
+
452
+ .scenario-tag {
453
+ padding: 8px 16px;
454
+ background: var(--bg-card);
455
+ border: 1px solid var(--border-color);
456
+ border-radius: 100px;
457
+ font-size: 0.85rem;
458
+ color: var(--text-secondary);
459
+ }
460
+
461
+ .approaches-grid {
462
+ display: grid;
463
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
464
+ gap: 20px;
465
+ margin-bottom: 1.5rem;
466
+ }
467
+
468
+ .approach-card {
469
+ padding: 25px;
470
+ background: var(--bg-card);
471
+ border: 2px solid var(--border-color);
472
+ border-radius: 16px;
473
+ cursor: pointer;
474
+ transition: all var(--transition-smooth);
475
+ }
476
+
477
+ .approach-card:hover {
478
+ border-color: var(--accent-primary);
479
+ transform: translateY(-5px);
480
+ box-shadow: var(--shadow-glow);
481
+ }
482
+
483
+ .approach-card.selected {
484
+ border-color: var(--accent-primary);
485
+ background: rgba(99, 102, 241, 0.1);
486
+ }
487
+
488
+ .approach-letter {
489
+ display: inline-flex;
490
+ align-items: center;
491
+ justify-content: center;
492
+ width: 36px;
493
+ height: 36px;
494
+ background: var(--gradient-primary);
495
+ border-radius: 8px;
496
+ font-size: 1.1rem;
497
+ font-weight: 700;
498
+ margin-bottom: 12px;
499
+ }
500
+
501
+ .approach-card h3 {
502
+ font-size: 1.1rem;
503
+ font-weight: 600;
504
+ margin-bottom: 5px;
505
+ }
506
+
507
+ .approach-card>p {
508
+ color: var(--text-secondary);
509
+ font-size: 0.9rem;
510
+ margin-bottom: 12px;
511
+ }
512
+
513
+ .approach-details {
514
+ font-size: 0.8rem;
515
+ color: var(--text-muted);
516
+ padding-top: 12px;
517
+ border-top: 1px solid var(--border-color);
518
+ }
519
+
520
+ .discussion-prompt {
521
+ font-size: 1rem;
522
+ color: var(--accent-tertiary);
523
+ text-align: center;
524
+ padding: 15px;
525
+ background: rgba(236, 72, 153, 0.1);
526
+ border-radius: 10px;
527
+ border: 1px solid rgba(236, 72, 153, 0.2);
528
+ }
529
+
530
+ /* ========== SLIDE 4: Templates Grid ========== */
531
+ .templates-grid {
532
+ display: grid;
533
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
534
+ gap: 15px;
535
+ margin-bottom: 2rem;
536
+ }
537
+
538
+ .template-card {
539
+ padding: 20px;
540
+ background: var(--bg-card);
541
+ border: 1px solid var(--border-color);
542
+ border-radius: 12px;
543
+ text-align: center;
544
+ transition: all var(--transition-smooth);
545
+ }
546
+
547
+ .template-card:hover {
548
+ border-color: var(--accent-secondary);
549
+ transform: translateY(-3px);
550
+ }
551
+
552
+ .template-icon {
553
+ font-size: 2rem;
554
+ margin-bottom: 10px;
555
+ display: block;
556
+ }
557
+
558
+ .template-card h3 {
559
+ font-size: 0.95rem;
560
+ font-weight: 600;
561
+ margin-bottom: 5px;
562
+ }
563
+
564
+ .template-card p {
565
+ font-size: 0.8rem;
566
+ color: var(--text-muted);
567
+ }
568
+
569
+ .provider-links {
570
+ background: var(--bg-card);
571
+ border: 1px solid var(--border-color);
572
+ border-radius: 16px;
573
+ padding: 20px;
574
+ }
575
+
576
+ .provider-links h3 {
577
+ font-size: 1rem;
578
+ font-weight: 600;
579
+ margin-bottom: 15px;
580
+ }
581
+
582
+ .links-grid {
583
+ display: grid;
584
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
585
+ gap: 12px;
586
+ }
587
+
588
+ .provider-link {
589
+ display: flex;
590
+ align-items: center;
591
+ gap: 10px;
592
+ padding: 12px 16px;
593
+ background: var(--bg-secondary);
594
+ border: 1px solid var(--border-color);
595
+ border-radius: 10px;
596
+ text-decoration: none;
597
+ color: var(--text-secondary);
598
+ font-size: 0.85rem;
599
+ transition: all var(--transition-smooth);
600
+ }
601
+
602
+ .provider-link:hover {
603
+ border-color: var(--accent-primary);
604
+ color: var(--text-primary);
605
+ transform: translateY(-2px);
606
+ }
607
+
608
+ .link-icon {
609
+ width: 24px;
610
+ height: 24px;
611
+ object-fit: contain;
612
+ }
613
+
614
+ .text-icon {
615
+ display: inline-flex;
616
+ align-items: center;
617
+ justify-content: center;
618
+ width: 24px;
619
+ height: 24px;
620
+ background: var(--gradient-primary);
621
+ border-radius: 6px;
622
+ font-size: 0.8rem;
623
+ font-weight: 700;
624
+ color: white;
625
+ }
626
+
627
+ /* ========== SLIDE 5: LLM Platforms with Voting ========== */
628
+ .llm-platforms-grid {
629
+ display: grid;
630
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
631
+ gap: 20px;
632
+ margin-bottom: 2rem;
633
+ }
634
+
635
+ .llm-card {
636
+ padding: 20px;
637
+ background: var(--bg-card);
638
+ border: 2px solid var(--border-color);
639
+ border-radius: 16px;
640
+ transition: all var(--transition-smooth);
641
+ cursor: pointer;
642
+ }
643
+
644
+ .llm-card:hover {
645
+ border-color: var(--accent-primary);
646
+ transform: translateY(-3px);
647
+ }
648
+
649
+ .llm-card.voted {
650
+ border-color: var(--accent-success);
651
+ background: rgba(34, 197, 94, 0.1);
652
+ }
653
+
654
+ .llm-header {
655
+ display: flex;
656
+ align-items: center;
657
+ gap: 12px;
658
+ margin-bottom: 10px;
659
+ }
660
+
661
+ .llm-icon {
662
+ width: 32px;
663
+ height: 32px;
664
+ object-fit: contain;
665
+ }
666
+
667
+ .llm-header h3 {
668
+ font-size: 1rem;
669
+ font-weight: 600;
670
+ }
671
+
672
+ .llm-card>p {
673
+ font-size: 0.85rem;
674
+ color: var(--text-muted);
675
+ margin-bottom: 15px;
676
+ }
677
+
678
+ .text-logo {
679
+ display: inline-flex;
680
+ align-items: center;
681
+ justify-content: center;
682
+ width: 32px;
683
+ height: 32px;
684
+ background: var(--gradient-primary);
685
+ border-radius: 8px;
686
+ font-size: 1.25rem;
687
+ font-weight: 800;
688
+ color: white;
689
+ }
690
+
691
+ /* Vote Bar */
692
+ .vote-bar {
693
+ height: 8px;
694
+ background: var(--border-color);
695
+ border-radius: 100px;
696
+ overflow: hidden;
697
+ margin-bottom: 8px;
698
+ }
699
+
700
+ .vote-fill {
701
+ height: 100%;
702
+ background: var(--gradient-primary);
703
+ width: 0%;
704
+ transition: width var(--transition-bounce);
705
+ border-radius: 100px;
706
+ }
707
+
708
+ .vote-count {
709
+ font-size: 0.8rem;
710
+ color: var(--text-muted);
711
+ font-weight: 500;
712
+ }
713
+
714
+ .leaderboard-link {
715
+ text-align: center;
716
+ }
717
+
718
+ .arena-link {
719
+ display: inline-block;
720
+ padding: 15px 30px;
721
+ background: var(--gradient-primary);
722
+ border-radius: 100px;
723
+ color: white;
724
+ font-weight: 600;
725
+ text-decoration: none;
726
+ transition: all var(--transition-smooth);
727
+ }
728
+
729
+ .arena-link:hover {
730
+ transform: scale(1.05);
731
+ box-shadow: var(--shadow-glow);
732
+ }
733
+
734
+ /* ========== SLIDE 6: Modes Extended ========== */
735
+ .modes-extended-grid {
736
+ display: grid;
737
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
738
+ gap: 20px;
739
+ margin-bottom: 2rem;
740
+ }
741
+
742
+ .mode-extended-card {
743
+ padding: 25px;
744
+ background: var(--bg-card);
745
+ border: 1px solid var(--border-color);
746
+ border-radius: 16px;
747
+ transition: all var(--transition-smooth);
748
+ }
749
+
750
+ .mode-extended-card:hover {
751
+ border-color: var(--accent-secondary);
752
+ transform: translateY(-3px);
753
+ }
754
+
755
+ .mode-icon-wrapper {
756
+ font-size: 2rem;
757
+ margin-bottom: 12px;
758
+ }
759
+
760
+ .mode-extended-card h3 {
761
+ font-size: 1.1rem;
762
+ font-weight: 600;
763
+ margin-bottom: 8px;
764
+ }
765
+
766
+ .mode-extended-card>p {
767
+ font-size: 0.9rem;
768
+ color: var(--text-muted);
769
+ margin-bottom: 12px;
770
+ }
771
+
772
+ .mode-tasks {
773
+ display: flex;
774
+ flex-wrap: wrap;
775
+ gap: 8px;
776
+ }
777
+
778
+ .task-tag {
779
+ padding: 5px 10px;
780
+ background: var(--gradient-subtle);
781
+ border-radius: 100px;
782
+ font-size: 0.75rem;
783
+ color: var(--accent-primary);
784
+ }
785
+
786
+ .mcp-section {
787
+ background: var(--bg-card);
788
+ border: 1px solid var(--border-color);
789
+ border-radius: 16px;
790
+ padding: 20px;
791
+ }
792
+
793
+ .mcp-grid {
794
+ display: grid;
795
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
796
+ gap: 20px;
797
+ }
798
+
799
+ .mcp-card {
800
+ padding: 20px;
801
+ background: var(--bg-secondary);
802
+ border-radius: 12px;
803
+ }
804
+
805
+ .mcp-card h4 {
806
+ font-size: 1rem;
807
+ font-weight: 600;
808
+ margin-bottom: 10px;
809
+ color: var(--accent-primary);
810
+ }
811
+
812
+ .mcp-card p {
813
+ font-size: 0.9rem;
814
+ color: var(--text-secondary);
815
+ }
816
+
817
+ .mcp-card ul {
818
+ list-style: none;
819
+ padding: 0;
820
+ }
821
+
822
+ .mcp-card li {
823
+ padding: 5px 0;
824
+ font-size: 0.9rem;
825
+ color: var(--text-secondary);
826
+ }
827
+
828
+ /* ========== SLIDE 7: Benchmark Table ========== */
829
+ .benchmarks-section {
830
+ display: flex;
831
+ flex-direction: column;
832
+ gap: 2rem;
833
+ }
834
+
835
+ .benchmark-table-container {
836
+ overflow-x: auto;
837
+ }
838
+
839
+ .benchmark-table {
840
+ width: 100%;
841
+ border-collapse: collapse;
842
+ background: var(--bg-card);
843
+ border-radius: 12px;
844
+ overflow: hidden;
845
+ }
846
+
847
+ .benchmark-table th,
848
+ .benchmark-table td {
849
+ padding: 15px 20px;
850
+ text-align: left;
851
+ border-bottom: 1px solid var(--border-color);
852
+ }
853
+
854
+ .benchmark-table th {
855
+ background: rgba(99, 102, 241, 0.1);
856
+ font-weight: 600;
857
+ color: var(--accent-primary);
858
+ font-size: 0.85rem;
859
+ text-transform: uppercase;
860
+ letter-spacing: 0.05em;
861
+ }
862
+
863
+ .benchmark-table td {
864
+ font-size: 0.9rem;
865
+ color: var(--text-secondary);
866
+ }
867
+
868
+ .benchmark-table tr:hover td {
869
+ background: var(--bg-card-hover);
870
+ }
871
+
872
+ .benchmark-table tr:last-child td {
873
+ border-bottom: none;
874
+ }
875
+
876
+ .model-cell {
877
+ display: flex;
878
+ align-items: center;
879
+ gap: 12px;
880
+ }
881
+
882
+ .table-icon {
883
+ width: 20px;
884
+ height: 20px;
885
+ object-fit: contain;
886
+ }
887
+
888
+ .mini-text-logo {
889
+ display: inline-flex;
890
+ align-items: center;
891
+ justify-content: center;
892
+ width: 20px;
893
+ height: 20px;
894
+ background: var(--gradient-primary);
895
+ border-radius: 4px;
896
+ font-size: 0.7rem;
897
+ font-weight: 700;
898
+ color: white;
899
+ }
900
+
901
+ .kpi-links {
902
+ background: var(--bg-card);
903
+ border: 1px solid var(--border-color);
904
+ border-radius: 16px;
905
+ padding: 20px;
906
+ }
907
+
908
+ .kpi-links h3 {
909
+ font-size: 1rem;
910
+ font-weight: 600;
911
+ margin-bottom: 15px;
912
+ }
913
+
914
+ .kpi-grid {
915
+ display: grid;
916
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
917
+ gap: 15px;
918
+ }
919
+
920
+ .kpi-link {
921
+ display: flex;
922
+ flex-direction: column;
923
+ align-items: center;
924
+ gap: 8px;
925
+ padding: 20px;
926
+ background: var(--bg-secondary);
927
+ border: 1px solid var(--border-color);
928
+ border-radius: 12px;
929
+ text-decoration: none;
930
+ color: var(--text-primary);
931
+ text-align: center;
932
+ transition: all var(--transition-smooth);
933
+ }
934
+
935
+ .kpi-link:hover {
936
+ border-color: var(--accent-primary);
937
+ transform: translateY(-3px);
938
+ }
939
+
940
+ .kpi-icon {
941
+ font-size: 2rem;
942
+ }
943
+
944
+ .kpi-link span {
945
+ font-weight: 600;
946
+ }
947
+
948
+ .kpi-link small {
949
+ font-size: 0.75rem;
950
+ color: var(--text-muted);
951
+ }
952
+
953
+ /* ========== SLIDE 8: Editor Poll ========== */
954
+ .editors-poll-grid {
955
+ display: grid;
956
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
957
+ gap: 20px;
958
+ }
959
+
960
+ .editor-poll-card {
961
+ padding: 20px;
962
+ background: var(--bg-card);
963
+ border: 2px solid var(--border-color);
964
+ border-radius: 16px;
965
+ text-align: center;
966
+ cursor: pointer;
967
+ transition: all var(--transition-smooth);
968
+ }
969
+
970
+ .editor-poll-card:hover {
971
+ border-color: var(--accent-primary);
972
+ transform: translateY(-3px);
973
+ }
974
+
975
+ .editor-poll-card.voted {
976
+ border-color: var(--accent-success);
977
+ background: rgba(34, 197, 94, 0.1);
978
+ }
979
+
980
+ .editor-poll-icon {
981
+ width: 48px;
982
+ height: 48px;
983
+ object-fit: contain;
984
+ }
985
+
986
+ .editor-name {
987
+ display: block;
988
+ font-weight: 600;
989
+ margin: 12px 0;
990
+ font-size: 0.95rem;
991
+ }
992
+
993
+ /* ========== SLIDE 9: My Pick ========== */
994
+ .my-pick-container {
995
+ display: flex;
996
+ justify-content: center;
997
+ }
998
+
999
+ .pick-card {
1000
+ max-width: 500px;
1001
+ width: 100%;
1002
+ padding: 40px;
1003
+ background: var(--bg-card);
1004
+ border: 2px solid var(--accent-primary);
1005
+ border-radius: 24px;
1006
+ box-shadow: var(--shadow-glow);
1007
+ }
1008
+
1009
+ .pick-card.featured {
1010
+ position: relative;
1011
+ }
1012
+
1013
+ .pick-card.featured::before {
1014
+ content: '★ Recommended';
1015
+ position: absolute;
1016
+ top: -12px;
1017
+ left: 50%;
1018
+ transform: translateX(-50%);
1019
+ padding: 6px 20px;
1020
+ background: var(--gradient-primary);
1021
+ border-radius: 100px;
1022
+ font-size: 0.8rem;
1023
+ font-weight: 600;
1024
+ color: white;
1025
+ }
1026
+
1027
+ .pick-header {
1028
+ display: flex;
1029
+ align-items: center;
1030
+ gap: 20px;
1031
+ margin-bottom: 25px;
1032
+ }
1033
+
1034
+ .pick-main-icon {
1035
+ width: 80px;
1036
+ height: 80px;
1037
+ object-fit: contain;
1038
+ }
1039
+
1040
+ .pick-header h3 {
1041
+ font-size: 1.75rem;
1042
+ font-weight: 700;
1043
+ }
1044
+
1045
+ .pick-tagline {
1046
+ color: var(--accent-primary);
1047
+ font-size: 1rem;
1048
+ }
1049
+
1050
+ .pick-features {
1051
+ display: flex;
1052
+ flex-direction: column;
1053
+ gap: 15px;
1054
+ }
1055
+
1056
+ .feature-item {
1057
+ display: flex;
1058
+ align-items: center;
1059
+ gap: 12px;
1060
+ font-size: 1rem;
1061
+ color: var(--text-secondary);
1062
+ }
1063
+
1064
+ .feature-icon {
1065
+ font-size: 1.5rem;
1066
+ }
1067
+
1068
+ /* ========== SLIDE 10: Demo ========== */
1069
+ .demo-slide {
1070
+ text-align: center;
1071
+ }
1072
+
1073
+ .demo-title {
1074
+ font-size: clamp(3rem, 8vw, 6rem);
1075
+ font-weight: 800;
1076
+ margin-bottom: 1rem;
1077
+ }
1078
+
1079
+ .demo-subtitle {
1080
+ font-size: 1.25rem;
1081
+ color: var(--text-secondary);
1082
+ margin-bottom: 3rem;
1083
+ }
1084
+
1085
+ .demo-placeholder {
1086
+ padding: 60px;
1087
+ background: var(--bg-card);
1088
+ border: 2px dashed var(--border-color);
1089
+ border-radius: 24px;
1090
+ max-width: 600px;
1091
+ margin: 0 auto;
1092
+ }
1093
+
1094
+ .demo-icon {
1095
+ font-size: 4rem;
1096
+ margin-bottom: 20px;
1097
+ }
1098
+
1099
+ .demo-placeholder p {
1100
+ color: var(--text-muted);
1101
+ font-size: 1.1rem;
1102
+ }
1103
+
1104
+ /* ========== SLIDE 11: Incidents ========== */
1105
+ .incidents-grid {
1106
+ display: grid;
1107
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
1108
+ gap: 20px;
1109
+ margin-bottom: 2rem;
1110
+ }
1111
+
1112
+ .incident-card {
1113
+ padding: 20px;
1114
+ background: var(--bg-card);
1115
+ border-radius: 16px;
1116
+ border-left: 4px solid;
1117
+ }
1118
+
1119
+ .incident-card.danger {
1120
+ border-left-color: var(--accent-danger);
1121
+ }
1122
+
1123
+ .incident-card.warning {
1124
+ border-left-color: var(--accent-warning);
1125
+ }
1126
+
1127
+ .incident-header {
1128
+ display: flex;
1129
+ align-items: center;
1130
+ gap: 10px;
1131
+ margin-bottom: 10px;
1132
+ }
1133
+
1134
+ .incident-icon {
1135
+ font-size: 1.5rem;
1136
+ }
1137
+
1138
+ .incident-header h3 {
1139
+ font-size: 1rem;
1140
+ font-weight: 600;
1141
+ }
1142
+
1143
+ .incident-card>p {
1144
+ font-size: 0.9rem;
1145
+ color: var(--text-muted);
1146
+ }
1147
+
1148
+ .takeaway-box {
1149
+ display: flex;
1150
+ align-items: center;
1151
+ gap: 15px;
1152
+ padding: 20px;
1153
+ background: rgba(239, 68, 68, 0.1);
1154
+ border: 1px solid rgba(239, 68, 68, 0.3);
1155
+ border-radius: 12px;
1156
+ }
1157
+
1158
+ .takeaway-icon {
1159
+ font-size: 2rem;
1160
+ }
1161
+
1162
+ .takeaway-box p {
1163
+ font-size: 1rem;
1164
+ color: var(--text-secondary);
1165
+ }
1166
+
1167
+ /* ========== SLIDE 12: Precautions ========== */
1168
+ .precautions-grid {
1169
+ display: grid;
1170
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1171
+ gap: 20px;
1172
+ }
1173
+
1174
+ .precaution-card {
1175
+ padding: 25px;
1176
+ background: var(--bg-card);
1177
+ border: 1px solid var(--border-color);
1178
+ border-radius: 16px;
1179
+ text-align: center;
1180
+ transition: all var(--transition-smooth);
1181
+ }
1182
+
1183
+ .precaution-card:hover {
1184
+ border-color: var(--accent-success);
1185
+ transform: translateY(-3px);
1186
+ }
1187
+
1188
+ .precaution-icon {
1189
+ font-size: 2.5rem;
1190
+ margin-bottom: 15px;
1191
+ display: block;
1192
+ }
1193
+
1194
+ .precaution-card h3 {
1195
+ font-size: 1rem;
1196
+ font-weight: 600;
1197
+ margin-bottom: 8px;
1198
+ color: var(--accent-success);
1199
+ }
1200
+
1201
+ .precaution-card p {
1202
+ font-size: 0.9rem;
1203
+ color: var(--text-muted);
1204
+ }
1205
+
1206
+ /* ========== SLIDE 13: Closing ========== */
1207
+ .closing-slide {
1208
+ text-align: center;
1209
+ }
1210
+
1211
+ .closing-title {
1212
+ font-size: clamp(3rem, 8vw, 5rem);
1213
+ font-weight: 800;
1214
+ margin-bottom: 2rem;
1215
+ }
1216
+
1217
+ .closing-message {
1218
+ display: grid;
1219
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
1220
+ gap: 20px;
1221
+ margin-bottom: 2rem;
1222
+ text-align: left;
1223
+ }
1224
+
1225
+ .closing-card {
1226
+ padding: 25px;
1227
+ background: var(--bg-card);
1228
+ border: 1px solid var(--border-color);
1229
+ border-radius: 16px;
1230
+ }
1231
+
1232
+ .closing-icon {
1233
+ font-size: 2rem;
1234
+ margin-bottom: 12px;
1235
+ display: block;
1236
+ }
1237
+
1238
+ .closing-card h3 {
1239
+ font-size: 1.1rem;
1240
+ font-weight: 600;
1241
+ margin-bottom: 8px;
1242
+ }
1243
+
1244
+ .closing-card p {
1245
+ font-size: 0.9rem;
1246
+ color: var(--text-muted);
1247
+ }
1248
+
1249
+ .contact-section {
1250
+ margin-top: 2rem;
1251
+ }
1252
+
1253
+ .questions-text {
1254
+ font-size: 1.25rem;
1255
+ color: var(--text-secondary);
1256
+ }
1257
+
1258
+ /* ========== Responsive ========== */
1259
+ @media (max-width: 768px) {
1260
+ .slide {
1261
+ padding: 80px 25px 100px;
1262
+ }
1263
+
1264
+ .nav-controls {
1265
+ bottom: 20px;
1266
+ }
1267
+
1268
+ .keyboard-hints {
1269
+ display: none;
1270
+ }
1271
+
1272
+ .slide-counter {
1273
+ right: 20px;
1274
+ }
1275
+
1276
+ .logo-row {
1277
+ gap: 15px;
1278
+ }
1279
+
1280
+ .logo-icon {
1281
+ width: 28px;
1282
+ height: 28px;
1283
+ }
1284
+
1285
+ .approaches-grid,
1286
+ .templates-grid,
1287
+ .llm-platforms-grid,
1288
+ .modes-extended-grid,
1289
+ .editors-poll-grid,
1290
+ .incidents-grid,
1291
+ .precautions-grid,
1292
+ .closing-message {
1293
+ grid-template-columns: 1fr;
1294
+ }
1295
+
1296
+ .agenda-item {
1297
+ padding: 12px 18px;
1298
+ }
1299
+
1300
+ .pick-card {
1301
+ padding: 25px;
1302
+ }
1303
+
1304
+ .pick-main-icon {
1305
+ width: 60px;
1306
+ height: 60px;
1307
+ }
1308
+ }
1309
+
1310
+ /* Reduce motion */
1311
+ @media (prefers-reduced-motion: reduce) {
1312
+
1313
+ *,
1314
+ *::before,
1315
+ *::after {
1316
+ animation-duration: 0.01ms !important;
1317
+ animation-iteration-count: 1 !important;
1318
+ transition-duration: 0.01ms !important;
1319
+ }
1320
+ }