Hugging Face's logo

Spaces:
WebashalarForML
/
AI-GUIDE
Running

App Files Community
WebashalarForML commited on
Commit
2ebbd27
·
verified ·
1 Parent(s): 85f8c23

Upload 28 files

Browse files
Files changed (4) hide show
  1. icon_assets/deepseek-color.svg +1 -0
  2. index.html +164 -53
  3. main.js +4 -2
  4. style.css +89 -13
icon_assets/deepseek-color.svg ADDED
index.html CHANGED
@@ -52,18 +52,28 @@
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>
@@ -243,14 +253,26 @@
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>
@@ -260,44 +282,56 @@
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>
@@ -308,7 +342,7 @@
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>
@@ -388,17 +422,17 @@
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>
@@ -409,12 +443,64 @@
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>
@@ -425,37 +511,63 @@
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">
@@ -464,18 +576,17 @@
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>
 
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
+ <!-- LLM Icons -->
56
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI"
57
+ class="logo-icon" title="OpenAI / ChatGPT"></div>
58
  <div class="logo-wrapper"><img src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Gemini"
59
+ class="logo-icon" title="Google Gemini"></div>
60
  <div class="logo-wrapper light-bg"><img src="../icon_assets/Anthropic Symbol SVG.svg"
61
  alt="Claude" class="logo-icon" title="Claude"></div>
62
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/X Symbol SVG.svg" alt="Grok"
63
+ class="logo-icon" title="Grok"></div>
64
+ <div class="logo-wrapper"><img src="../icon_assets/mistral-color.svg" alt="Mistral"
65
+ class="logo-icon" title="Mistral"></div>
66
+ <div class="logo-wrapper"><img src="../icon_assets/kimi.svg" alt="Kimi" class="logo-icon"
67
+ title="Kimi K2"></div>
68
+ <div class="logo-wrapper"><img src="../icon_assets/meta-color.svg" alt="Meta" class="logo-icon"
69
+ title="Meta Llama"></div>
70
+ <!-- Editor Icons -->
71
  <div class="logo-wrapper"><img src="../icon_assets/Vscode.svg" alt="VS Code" class="logo-icon"
72
  title="VS Code"></div>
73
  <div class="logo-wrapper light-bg"><img src="../icon_assets/cursor.svg" alt="Cursor"
74
  class="logo-icon" title="Cursor"></div>
75
+ <div class="logo-wrapper"><img src="../icon_assets/antigravity.png" alt="Antigravity"
76
+ class="logo-icon" title="Antigravity"></div>
77
  </div>
78
  </div>
79
  </section>
 
253
  <h2 class="slide-title">LLM Platforms & Your Preference</h2>
254
  <p class="slide-subtitle">Click to vote for your preferred LLM!</p>
255
 
256
+ <div class="llm-platforms-grid compact">
257
+ <div class="llm-card voting-card" data-llm="anthropic">
258
+ <div class="llm-header">
259
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/Anthropic Symbol SVG.svg"
260
+ alt="Anthropic" class="llm-icon"></div>
261
+ <h3>Claude (Anthropic)</h3>
262
+ </div>
263
+ <p>Best agentic reasoning</p>
264
+ <div class="vote-bar">
265
+ <div class="vote-fill" data-votes="0"></div>
266
+ </div>
267
+ <span class="vote-count">0 votes</span>
268
+ </div>
269
  <div class="llm-card voting-card" data-llm="openai">
270
  <div class="llm-header">
271
  <div class="logo-wrapper light-bg"><img src="../icon_assets/OpenAI Symbol SVG.svg"
272
  alt="OpenAI" class="llm-icon"></div>
273
+ <h3>GPT (OpenAI)</h3>
274
  </div>
275
+ <p>Reliable, wide ecosystem</p>
276
  <div class="vote-bar">
277
  <div class="vote-fill" data-votes="0"></div>
278
  </div>
 
282
  <div class="llm-header">
283
  <div class="logo-wrapper"><img src="../icon_assets/Google_Gemini_icon_2025.svg"
284
  alt="Gemini" class="llm-icon"></div>
285
+ <h3>Gemini (Google)</h3>
286
  </div>
287
+ <p>All-around champion</p>
288
  <div class="vote-bar">
289
  <div class="vote-fill" data-votes="0"></div>
290
  </div>
291
  <span class="vote-count">0 votes</span>
292
  </div>
293
+ <div class="llm-card voting-card" data-llm="grok">
294
  <div class="llm-header">
295
+ <div class="logo-wrapper light-bg"><img src="../icon_assets/X Symbol SVG.svg" alt="Grok"
296
+ class="llm-icon"></div>
297
+ <h3>Grok (xAI)</h3>
298
  </div>
299
+ <p>Strong reasoning</p>
300
  <div class="vote-bar">
301
  <div class="vote-fill" data-votes="0"></div>
302
  </div>
303
  <span class="vote-count">0 votes</span>
304
  </div>
305
+ <div class="llm-card voting-card" data-llm="mistral">
306
  <div class="llm-header">
307
+ <div class="logo-wrapper"><img src="../icon_assets/mistral-color.svg" alt="Mistral"
308
  class="llm-icon"></div>
309
+ <h3>Mistral</h3>
310
  </div>
311
+ <p>Large context, efficient</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 class="llm-card voting-card" data-llm="kimi">
318
  <div class="llm-header">
319
+ <div class="logo-wrapper"><img src="../icon_assets/kimi.svg" alt="Kimi"
320
+ class="llm-icon"></div>
321
+ <h3>Kimi K2</h3>
322
  </div>
323
+ <p>99.1% non-agentic coding</p>
324
+ <div class="vote-bar">
325
+ <div class="vote-fill" data-votes="0"></div>
326
+ </div>
327
+ <span class="vote-count">0 votes</span>
328
+ </div>
329
+ <div class="llm-card voting-card" data-llm="deepseek">
330
+ <div class="llm-header">
331
+ <div class="logo-wrapper"><span class="text-logo">DS</span></div>
332
+ <h3>DeepSeek V3</h3>
333
+ </div>
334
+ <p>Open-source, popular</p>
335
  <div class="vote-bar">
336
  <div class="vote-fill" data-votes="0"></div>
337
  </div>
 
342
  <div class="logo-wrapper"><span class="text-logo">+</span></div>
343
  <h3>Other / Local</h3>
344
  </div>
345
+ <p>Ollama, Llama, custom</p>
346
  <div class="vote-bar">
347
  <div class="vote-fill" data-votes="0"></div>
348
  </div>
 
422
  <!-- ==================== SLIDE 7: LLM Versions & Benchmarks ==================== -->
423
  <section class="slide" data-slide="7">
424
  <div class="slide-content">
425
+ <h2 class="slide-title">LLM Benchmark Comparison (2025)</h2>
426
+ <p class="slide-subtitle">SWE-Bench Agentic Scores & Recommended Use Cases</p>
427
 
428
  <div class="benchmarks-section">
429
  <div class="benchmark-table-container">
430
+ <table class="benchmark-table compact-table">
431
  <thead>
432
  <tr>
433
  <th>Model</th>
434
+ <th>Key Strength</th>
435
+ <th>Score</th>
436
  <th>Best For</th>
437
  </tr>
438
  </thead>
 
443
  <div class="logo-wrapper-small light-bg"><img
444
  src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic"
445
  class="table-icon"></div>
446
+ <strong>Claude Sonnet 4.5</strong>
447
+ </div>
448
+ </td>
449
+ <td>Best for real-world agents, 30hr+ autonomous tasks</td>
450
+ <td class="score-cell"><span class="score-badge high">82%</span></td>
451
+ <td>Autonomous bug resolution, agent orchestration</td>
452
+ </tr>
453
+ <tr>
454
+ <td>
455
+ <div class="model-cell">
456
+ <div class="logo-wrapper-small light-bg"><img
457
+ src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic"
458
+ class="table-icon"></div>
459
+ <strong>Claude Opus 4.5</strong>
460
  </div>
461
  </td>
462
+ <td>Complex reasoning, 200K context</td>
463
+ <td class="score-cell"><span class="score-badge high">80.9%</span></td>
464
+ <td>Architectural planning, deep code review</td>
465
+ </tr>
466
+ <tr>
467
+ <td>
468
+ <div class="model-cell">
469
+ <div class="logo-wrapper-small light-bg"><img
470
+ src="../icon_assets/OpenAI Symbol SVG.svg" alt="OpenAI"
471
+ class="table-icon"></div>
472
+ <strong>GPT 5.1</strong>
473
+ </div>
474
+ </td>
475
+ <td>Reliable code gen, wide ecosystem</td>
476
+ <td class="score-cell"><span class="score-badge medium">76.3%</span></td>
477
+ <td>API gen, high-volume code completion</td>
478
+ </tr>
479
+ <tr>
480
+ <td>
481
+ <div class="model-cell">
482
+ <div class="logo-wrapper-small"><img
483
+ src="../icon_assets/Google_Gemini_icon_2025.svg" alt="Gemini"
484
+ class="table-icon"></div>
485
+ <strong>Gemini 3 Pro</strong>
486
+ </div>
487
+ </td>
488
+ <td>Highest overall, Z-Score 1.38</td>
489
+ <td class="score-cell"><span class="score-badge medium">76.2%</span></td>
490
+ <td>General dev, multimodal apps</td>
491
+ </tr>
492
+ <tr>
493
+ <td>
494
+ <div class="model-cell">
495
+ <div class="logo-wrapper-small light-bg"><img
496
+ src="../icon_assets/X Symbol SVG.svg" alt="Grok"
497
+ class="table-icon"></div>
498
+ <strong>Grok 4</strong>
499
+ </div>
500
+ </td>
501
+ <td>Strong reasoning, complex problem-solving</td>
502
+ <td class="score-cell"><span class="score-badge medium">75%</span></td>
503
+ <td>Code planning, robustness-critical tasks</td>
504
  </tr>
505
  <tr>
506
  <td>
 
511
  <strong>Gemini 2.5 Pro</strong>
512
  </div>
513
  </td>
514
+ <td>All-around champion, highest Z-score</td>
515
+ <td class="score-cell"><span class="score-badge">Z: 1.38</span></td>
516
+ <td>Reliable general-purpose dev</td>
517
+ </tr>
518
+ <tr>
519
+ <td>
520
+ <div class="model-cell">
521
+ <div class="logo-wrapper-small"><img src="../icon_assets/kimi.svg"
522
+ alt="Kimi" class="table-icon"></div>
523
+ <strong>Kimi K2 Thinking</strong>
524
+ </div>
525
+ </td>
526
+ <td>Non-agentic coding expert</td>
527
+ <td class="score-cell"><span class="score-badge high">99.1%*</span></td>
528
+ <td>Specialized non-agentic tasks</td>
529
+ </tr>
530
+ <tr>
531
+ <td>
532
+ <div class="model-cell">
533
+ <div class="logo-wrapper-small"><img
534
+ src="../icon_assets/mistral-color.svg" alt="Mistral"
535
+ class="table-icon"></div>
536
+ <strong>Mistral Large 3</strong>
537
+ </div>
538
+ </td>
539
+ <td>Top-tier reasoning, 32K context</td>
540
+ <td class="score-cell"><span class="score-badge">Top-Tier</span></td>
541
+ <td>Multilingual, function calling</td>
542
  </tr>
543
  <tr>
544
  <td>
545
  <div class="model-cell">
546
  <div class="logo-wrapper-small light-bg"><img
547
+ src="../icon_assets/Anthropic Symbol SVG.svg" alt="Anthropic"
548
  class="table-icon"></div>
549
+ <strong>Claude 3.5 Sonnet</strong>
550
  </div>
551
  </td>
552
+ <td>Versatile, speed + cost optimized</td>
553
+ <td class="score-cell"><span class="score-badge">High</span></td>
554
+ <td>Enterprise, cost-optimized agents</td>
555
  </tr>
556
  <tr>
557
  <td>
558
  <div class="model-cell">
559
+ <div class="logo-wrapper-small"><span class="mini-text-logo">DS</span>
560
  </div>
561
+ <strong>DeepSeek V3</strong>
562
  </div>
563
  </td>
564
+ <td>Open-source, popular foundation</td>
565
+ <td class="score-cell"><span class="score-badge">N/A</span></td>
566
+ <td>Code gen, fine-tuning</td>
567
  </tr>
568
  </tbody>
569
  </table>
570
+ <p class="table-note">* Non-agentic benchmark score</p>
571
  </div>
572
 
573
  <div class="kpi-links">
 
576
  <a href="https://www.swebench.com/" target="_blank" class="kpi-link">
577
  <span class="kpi-icon">🎯</span>
578
  <span>SWE-Bench</span>
579
+ <small>Agentic coding</small>
580
  </a>
581
  <a href="https://lmarena.ai/leaderboard" target="_blank" class="kpi-link">
582
  <span class="kpi-icon">🏆</span>
583
  <span>LLM Arena</span>
584
+ <small>Community</small>
585
  </a>
586
+ <a href="https://www.vellum.ai/llm-leaderboard" target="_blank" class="kpi-link">
587
+ <span class="kpi-icon">📈</span>
588
+ <span>Vellum AI</span>
589
+ <small>Full comparison</small>
 
590
  </a>
591
  </div>
592
  </div>
main.js CHANGED
@@ -14,11 +14,13 @@
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
 
 
14
 
15
  // Voting state
16
  const llmVotes = {
17
+ anthropic: 0,
18
  openai: 0,
19
  gemini: 0,
20
+ grok: 0,
 
21
  mistral: 0,
22
+ kimi: 0,
23
+ deepseek: 0,
24
  other: 0
25
  };
26
 
style.css CHANGED
@@ -829,11 +829,12 @@ body {
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 {
@@ -898,34 +899,108 @@ body {
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;
@@ -934,19 +1009,20 @@ body {
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
 
 
829
  .benchmarks-section {
830
  display: flex;
831
  flex-direction: column;
832
+ gap: 1rem;
833
  }
834
 
835
  .benchmark-table-container {
836
  overflow-x: auto;
837
+ max-height: 55vh;
838
  }
839
 
840
  .benchmark-table {
 
899
  color: white;
900
  }
901
 
902
+ .rank-cell {
903
+ font-size: 1.1rem;
904
+ text-align: center;
905
+ min-width: 40px;
906
+ }
907
+
908
+ .score-cell {
909
+ text-align: center;
910
+ }
911
+
912
+ .score-badge {
913
+ display: inline-block;
914
+ padding: 4px 12px;
915
+ border-radius: 100px;
916
+ font-weight: 600;
917
+ font-size: 0.85rem;
918
+ background: rgba(255, 255, 255, 0.1);
919
+ color: var(--text-secondary);
920
+ }
921
+
922
+ .score-badge.high {
923
+ background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
924
+ color: var(--accent-success);
925
+ border: 1px solid rgba(34, 197, 94, 0.3);
926
+ }
927
+
928
+ .score-badge.medium {
929
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
930
+ color: var(--accent-primary);
931
+ border: 1px solid rgba(99, 102, 241, 0.3);
932
+ }
933
+
934
+ /* Compact table for more rows */
935
+ .benchmark-table.compact-table th,
936
+ .benchmark-table.compact-table td {
937
+ padding: 6px 10px;
938
+ font-size: 0.8rem;
939
+ }
940
+
941
+ .benchmark-table.compact-table .model-cell {
942
+ gap: 6px;
943
+ }
944
+
945
+ .benchmark-table.compact-table .logo-wrapper-small {
946
+ width: 20px;
947
+ height: 20px;
948
+ }
949
+
950
+ .table-note {
951
+ font-size: 0.7rem;
952
+ color: var(--text-muted);
953
+ margin-top: 5px;
954
+ font-style: italic;
955
+ }
956
+
957
+ /* Compact LLM grid for more cards */
958
+ .llm-platforms-grid.compact {
959
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
960
+ gap: 15px;
961
+ }
962
+
963
+ .llm-platforms-grid.compact .llm-card {
964
+ padding: 15px;
965
+ }
966
+
967
+ .llm-platforms-grid.compact .llm-header h3 {
968
+ font-size: 0.9rem;
969
+ }
970
+
971
+ .llm-platforms-grid.compact .llm-card>p {
972
+ font-size: 0.75rem;
973
+ margin-bottom: 10px;
974
+ }
975
+
976
  .kpi-links {
977
  background: var(--bg-card);
978
  border: 1px solid var(--border-color);
979
+ border-radius: 12px;
980
+ padding: 12px 15px;
981
  }
982
 
983
  .kpi-links h3 {
984
+ font-size: 0.85rem;
985
  font-weight: 600;
986
+ margin-bottom: 10px;
987
  }
988
 
989
  .kpi-grid {
990
  display: grid;
991
+ grid-template-columns: repeat(3, 1fr);
992
+ gap: 10px;
993
  }
994
 
995
  .kpi-link {
996
  display: flex;
997
  flex-direction: column;
998
  align-items: center;
999
+ gap: 4px;
1000
+ padding: 10px 8px;
1001
  background: var(--bg-secondary);
1002
  border: 1px solid var(--border-color);
1003
+ border-radius: 10px;
1004
  text-decoration: none;
1005
  color: var(--text-primary);
1006
  text-align: center;
 
1009
 
1010
  .kpi-link:hover {
1011
  border-color: var(--accent-primary);
1012
+ transform: translateY(-2px);
1013
  }
1014
 
1015
  .kpi-icon {
1016
+ font-size: 1.25rem;
1017
  }
1018
 
1019
  .kpi-link span {
1020
  font-weight: 600;
1021
+ font-size: 0.8rem;
1022
  }
1023
 
1024
  .kpi-link small {
1025
+ font-size: 0.65rem;
1026
  color: var(--text-muted);
1027
  }
1028