Update index.html

index.html

@@ -25,7 +25,7 @@
     .status{color:var(--muted)}
     .grid{display:grid;gap:1rem;grid-template-columns:1fr}
     @media (min-width:900px){.grid{grid-template-columns:1fr 1fr}}
-    .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
+    .head{display:block;align-items:center;justify-content:space-between;margin-bottom:.25rem}
     .tokens{display:flex;flex-wrap:wrap;gap:.5rem;max-height:360px;overflow:auto;padding:.25rem}
     .chip{border:1px solid var(--chip-border);background:var(--chip);padding:.35rem .5rem;border-radius:10px;font-family:var(--mono);font-size:.9rem;transition:background .12s,border-color .12s}
     .chip:hover{background:var(--chip-hover);border-color:var(--accent)}
@@ -35,7 +35,7 @@
       background: #0b2235;
     }
     pre.ids{font-family:var(--mono);background:#0a1220;border:1px solid var(--border);border-radius:10px;padding:.75rem;max-height:360px;overflow:auto;white-space:pre-wrap}
-    .caption{color:var(--muted);font-size:.9rem;margin-top:.5rem}
+    .caption{color:var(--muted);font-size:.9rem;margin-top:0rem;margin-bottom:.75rem;}
     footer{color:var(--muted);text-align:center;padding:1.25rem 0 2rem}
     a{color:var(--accent)}
   </style>
@@ -71,14 +71,14 @@
     <section class="grid">
       <article class="card">
         <div class="head"><h3>Tokens</h3></div>
-        <div id="tokens" class="tokens"></div>
         <p class="caption">The smallest language units the model works with.</p>
+        <div id="tokens" class="tokens"></div>
       </article>
 
       <article class="card">
         <div class="head"><h3>Token IDs</h3></div>
-        <pre id="ids" class="ids"></pre>
         <p class="caption">Their numeric form inside the model’s computations.</p>
+        <pre id="ids" class="ids"></pre>
       </article>
     </section>
   </main>