Enhance styling and typography in index.html

- Update font to 'IBM Plex Sans' for improved readability
- Adjust line height, font sizes, and letter spacing for better visual hierarchy
- Increase maximum width of main content area and logo size
- Refine button styles and spacing for a more polished appearance
- Modify table padding and font sizes for consistency
- Update image sizes for Colab button and logo

index.html

@@ -4,36 +4,45 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>RapidFire AI — LLM Fine-Tuning Workbench</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     body {
-      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
-      line-height: 1.6;
+      font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.7;
       color: #ffffff;
       background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 100%);
       min-height: 100vh;
       margin: 0;
       padding: 2rem 1rem;
       transition: background 0.3s, color 0.3s;
+      font-size: 18px;
+      letter-spacing: 0.01em;
     }
     main {
-      max-width: 900px;
+      max-width: 1000px;
       margin: 0 auto;
       padding: 2rem;
     }
     h1 {
-      font-size: 2rem;
-      margin-bottom: 1rem;
+      font-size: 2.5rem;
+      margin-bottom: 1.5rem;
       color: #ffffff;
+      font-weight: 700;
+      letter-spacing: -0.02em;
     }
     h3 {
-      font-size: 1.3rem;
+      font-size: 1.75rem;
       font-weight: 700;
-      margin-top: 1.5rem;
-      margin-bottom: 0.75rem;
+      margin-top: 2rem;
+      margin-bottom: 1rem;
       color: #ffffff;
+      letter-spacing: -0.01em;
     }
     p {
-      margin-bottom: 1rem;
+      margin-bottom: 1.25rem;
+      font-size: 1.1rem;
     }
     a {
       color: #a0d8ff;
@@ -48,28 +57,29 @@
       padding-left: 2rem;
     }
     ul li {
-      margin-bottom: 0.5rem;
+      margin-bottom: 0.75rem;
+      font-size: 1.05rem;
     }
     strong {
       font-weight: 600;
     }
     .logo {
       display: block;
-      max-width: 300px;
+      max-width: 400px;
       height: auto;
-      margin: 0 auto 2rem auto;
+      margin: 0 auto 3rem auto;
     }
     .github-button {
       display: inline-flex;
       align-items: center;
-      padding: 0.25rem 0.5rem;
+      padding: 0.35rem 0.7rem;
       background-color: rgba(255, 255, 255, 0.2);
       color: #ffffff;
       text-decoration: none;
       border-radius: 4px;
       border: 1px solid rgba(255, 255, 255, 0.3);
-      font-weight: 400;
-      font-size: 0.875rem;
+      font-weight: 500;
+      font-size: 1rem;
       transition: background-color 0.2s, border-color 0.2s;
     }
     .github-button:hover {
@@ -79,15 +89,17 @@
       color: #ffffff;
     }
     .github-button svg {
-      margin-right: 0.35rem;
+      margin-right: 0.4rem;
+      width: 18px;
+      height: 18px;
     }
     .github-button .repo-name {
       background-color: #0969da;
       color: #ffffff;
-      padding: 0.15rem 0.4rem;
+      padding: 0.2rem 0.5rem;
       border-radius: 3px;
-      margin-left: 0.35rem;
-      font-size: 0.875rem;
+      margin-left: 0.4rem;
+      font-size: 0.95rem;
     }
     .colab-section {
       margin: 2rem 0;
@@ -108,7 +120,7 @@
       text-decoration: none;
     }
     .colab-button img {
-      height: 40px;
+      height: 48px;
       display: block;
     }
     .notebooks-table {
@@ -122,15 +134,16 @@
     .notebooks-table th {
       background-color: rgba(0, 0, 0, 0.3);
       color: #ffffff;
-      padding: 1rem;
+      padding: 1.25rem;
       text-align: left;
       font-weight: 600;
-      font-size: 1rem;
+      font-size: 1.15rem;
       border-bottom: 2px solid rgba(255, 255, 255, 0.1);
     }
     .notebooks-table td {
-      padding: 1rem;
+      padding: 1.25rem;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      font-size: 1.05rem;
     }
     .notebooks-table tr:last-child td {
       border-bottom: none;
@@ -139,7 +152,7 @@
       background-color: rgba(255, 255, 255, 0.05);
     }
     .notebooks-table .colab-button img {
-      height: 32px;
+      height: 38px;
     }
 
     @media (prefers-color-scheme: dark) {
@@ -190,7 +203,7 @@
 
     <div class="colab-section">
       <h3>📓 Try it now:</h3>
-      <p style="margin-bottom: 1.5rem; font-size: 1rem;">
+      <p style="margin-bottom: 1.5rem;">
         Try RapidFire AI in the Google Colab Notebook with no local installation—get started in under 3 minutes!
       </p>