Update index.html

index.html

@@ -14,35 +14,43 @@
       --border: rgba(255,255,255,.08);
       --text: rgba(255,255,255,.92);
       --muted: rgba(255,255,255,.70);
-      --link: #7aa2ff;     /* calm blue link */
-      --accent: #ffd21e;   /* HF-ish yellow accent */
+      --link: #7aa2ff;
+      --accent: #ffd21e;
     }
+
     * { box-sizing: border-box; }
+
     body {
       margin: 0;
       padding: 28px 18px;
-      background: radial-gradient(1200px 600px at 50% -120px, rgba(255,210,30,.10), transparent 60%),
-                  var(--bg);
+      background:
+        radial-gradient(1200px 600px at 50% -120px, rgba(255,210,30,.10), transparent 60%),
+        var(--bg);
       color: var(--text);
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     }
+
     .container {
       max-width: 980px;
       margin: 0 auto;
     }
+
     .card {
-      background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
-                  var(--panel);
+      background:
+        linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%),
+        var(--panel);
       border: 1px solid var(--border);
       border-radius: 16px;
       padding: 22px;
       box-shadow: 0 10px 30px rgba(0,0,0,.35);
     }
+
     h1 {
       margin: 0 0 8px;
       font-size: 38px;
       letter-spacing: -0.5px;
     }
+
     .pill {
       display: inline-block;
       padding: 6px 10px;
@@ -53,24 +61,29 @@
       font-size: 13px;
       margin-bottom: 14px;
     }
+
     .meta {
       margin: 0 0 18px;
       color: var(--muted);
       font-size: 15px;
       line-height: 1.45;
     }
+
     .meta b {
       color: var(--text);
       font-weight: 600;
     }
+
     .section {
       margin-top: 18px;
     }
+
     .subtitle {
       margin: 0 0 12px;
       color: var(--muted);
       font-size: 16px;
     }
+
     .video-wrap {
       position: relative;
       padding-top: 56.25%;
@@ -79,6 +92,7 @@
       background: #000;
       border: 1px solid var(--border);
     }
+
     .video-wrap iframe {
       position: absolute;
       inset: 0;
@@ -86,17 +100,22 @@
       height: 100%;
       border: 0;
     }
+
     .divider {
       margin: 22px 0;
       height: 1px;
       background: var(--border);
     }
+
     a {
       color: var(--link);
       text-decoration: none;
       word-break: break-word;
     }
-    a:hover { text-decoration: underline; }
+
+    a:hover {
+      text-decoration: underline;
+    }
   </style>
 </head>
 
@@ -107,7 +126,6 @@
 
       <h1>Nulla — Demo</h1>
 
-      <!-- GitHub moved to the top (right under the title) -->
       <p class="meta">
         <b>GitHub (download) Nulla v0.0.9:</b>
         <a href="https://github.com/Tsoxer/nulla" target="_blank" rel="noopener noreferrer">
@@ -115,7 +133,20 @@
         </a>
       </p>
 
-      <!-- v0.0.8 first -->
+      <div class="section">
+        <p class="subtitle">v0.0.9</p>
+        <div class="video-wrap">
+          <iframe
+            src="https://www.youtube-nocookie.com/embed/n8MNbeL-WNQ"
+            title="Nulla demo v0.0.9"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen>
+          </iframe>
+        </div>
+      </div>
+
+      <div class="divider"></div>
+
       <div class="section">
         <p class="subtitle">v0.0.8</p>
         <div class="video-wrap">
@@ -130,7 +161,6 @@
 
       <div class="divider"></div>
 
-      <!-- v0.0.7 below -->
       <div class="section">
         <p class="subtitle">v0.0.7</p>
         <div class="video-wrap">