Upload 5 files

app.js

@@ -92,8 +92,8 @@ function renderMeta() {
 
   applyLink("project-link", meta.links.project, "Project page", "Coming soon");
   applyLink("code-link", meta.links.code, "Code repository", "Coming soon");
-  applyLink("paper-link", meta.links.paper, "Read paper", "Paper coming soon");
-  applyLink("dataset-link", meta.links.dataset, "Open dataset", "Dataset coming soon");
+  applyLink("paper-link", meta.links.paper, "Read paper", "Coming soon");
+  applyLink("dataset-link", meta.links.dataset, "Open dataset", "Coming soon");
 }
 
 function renderTrackTabs() {

index.html

@@ -21,7 +21,7 @@
 
     <header class="site-header">
       <div class="shell header-inner">
-        <a class="brand" id="project-link" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
+        <a class="brand" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
           <svg class="brand-mark" viewBox="0 0 42 42" role="img" aria-label="StreamAV-Bench">
             <rect x="1" y="1" width="40" height="40" rx="11" fill="currentColor"/>
             <path d="M9 23h4l2.6-7 4.2 14L24 11l3.4 12H33" fill="none" stroke="#fffdf7" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>
@@ -36,9 +36,6 @@
         <nav aria-label="Primary navigation">
           <a href="#leaderboard">Results</a>
           <a href="#metrics">Metrics</a>
-          <a class="nav-project" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
-            Project <span aria-hidden="true">↗</span>
-          </a>
         </nav>
       </div>
     </header>
@@ -60,6 +57,24 @@
                 Explore results <span aria-hidden="true">↓</span>
               </a>
             </div>
+            <nav class="hero-resources" aria-label="Project resources">
+              <a id="paper-link" class="hero-resource is-disabled" aria-disabled="true">
+                <span class="hero-resource-icon">▤</span>
+                <span><strong>Paper</strong><small data-link-status>Coming soon</small></span>
+              </a>
+              <a id="project-link" class="hero-resource" href="https://liukqchoco.github.io/StreamAVBench/" target="_blank" rel="noopener noreferrer">
+                <span class="hero-resource-icon">↗</span>
+                <span><strong>Project</strong><small data-link-status>Project page</small></span>
+              </a>
+              <a id="code-link" class="hero-resource" href="https://github.com/liukqchoco/StreamAVBench-Code" target="_blank" rel="noopener noreferrer">
+                <span class="hero-resource-icon">&lt;/&gt;</span>
+                <span><strong>Code</strong><small data-link-status>Code repository</small></span>
+              </a>
+              <a id="dataset-link" class="hero-resource is-disabled" aria-disabled="true">
+                <span class="hero-resource-icon">≋</span>
+                <span><strong>Dataset</strong><small data-link-status>Coming soon</small></span>
+              </a>
+            </nav>
           </div>
 
           <div class="stream-card">
@@ -222,51 +237,6 @@
         </div>
       </section>
 
-      <section class="section protocol-section">
-        <div class="shell">
-          <div class="section-heading">
-            <p class="kicker">How to read StreamAV-Bench</p>
-            <h2>Performance is a profile, not a single number.</h2>
-          </div>
-          <div class="protocol-grid">
-            <article>
-              <span>01</span>
-              <h3>Start with the regime</h3>
-              <p>Use Progressive for fixed-prompt long-horizon behavior and Interactive for runtime response, retention, and reuse.</p>
-            </article>
-            <article>
-              <span>02</span>
-              <h3>Pair level with change</h3>
-              <p>High quality or fulfillment can coexist with temporal drift. Read absolute scores alongside their drift counterparts.</p>
-            </article>
-            <article>
-              <span>03</span>
-              <h3>Pair success with speed</h3>
-              <p>Low conditional latency does not guarantee reliable updates. Read response latency together with achievement rate.</p>
-            </article>
-          </div>
-        </div>
-      </section>
-
-      <section class="resource-band" aria-label="Project resources">
-        <div class="shell resources">
-          <a id="paper-link" class="resource-link is-disabled" aria-disabled="true">
-            <span class="resource-symbol">▤</span>
-            <span><strong>Paper</strong><small data-link-status>Paper coming soon</small></span>
-            <b aria-hidden="true">—</b>
-          </a>
-          <a id="code-link" class="resource-link" href="https://github.com/liukqchoco/StreamAVBench-Code" target="_blank" rel="noopener noreferrer">
-            <span class="resource-symbol">&lt;/&gt;</span>
-            <span><strong>Code</strong><small data-link-status>Code repository</small></span>
-            <b aria-hidden="true">↗</b>
-          </a>
-          <a id="dataset-link" class="resource-link is-disabled" aria-disabled="true">
-            <span class="resource-symbol">≋</span>
-            <span><strong>Dataset</strong><small data-link-status>Dataset coming soon</small></span>
-            <b aria-hidden="true">—</b>
-          </a>
-        </div>
-      </section>
     </main>
 
     <footer>

styles.css

@@ -177,13 +177,6 @@ p {
   color: var(--ink);
 }
 
-.site-header .nav-project {
-  padding: 9px 15px;
-  color: var(--ink);
-  border: 1px solid var(--line-strong);
-  border-radius: 999px;
-}
-
 .hero {
   position: relative;
   padding: 70px 0 64px;
@@ -279,6 +272,67 @@ p {
   gap: 10px;
 }
 
+.hero-resources {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+  max-width: 680px;
+  margin-top: 20px;
+}
+
+.hero-resource {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  min-height: 58px;
+  padding: 8px 10px;
+  text-align: left;
+  background: rgba(255, 254, 249, 0.72);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
+}
+
+.hero-resource:hover:not(.is-disabled) {
+  background: var(--white);
+  border-color: var(--line-strong);
+  transform: translateY(-2px);
+}
+
+.hero-resource-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  color: var(--blue);
+  background: var(--blue-soft);
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.hero-resource > span:last-child {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.hero-resource strong {
+  font-size: 13px;
+  line-height: 1.2;
+}
+
+.hero-resource small {
+  margin-top: 2px;
+  overflow: hidden;
+  color: var(--ink-soft);
+  font-size: 11px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -1367,121 +1421,12 @@ thead .model-heading {
   text-align: right;
 }
 
-.protocol-section {
-  background: var(--paper-deep);
-}
-
-.protocol-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-
-.protocol-grid article {
-  min-height: 280px;
-  padding: 28px;
-  background: var(--white);
-  border: 1px solid var(--line);
-  border-radius: 20px;
-}
-
-.protocol-grid article:nth-child(2) {
-  background: var(--green-soft);
-}
-
-.protocol-grid article:nth-child(3) {
-  background: var(--blue-soft);
-}
-
-.protocol-grid article > span {
-  display: block;
-  margin-bottom: 70px;
-  color: var(--coral);
-  font-family: var(--serif);
-  font-size: 24px;
-}
-
-.protocol-grid h3 {
-  margin-bottom: 10px;
-  font-size: 22px;
-  letter-spacing: -0.03em;
-}
-
-.protocol-grid p {
-  margin: 0;
-  color: var(--ink-soft);
-  font-size: 15px;
-}
-
 .is-disabled {
   cursor: default;
   opacity: 0.56;
   pointer-events: none;
 }
 
-.resource-band {
-  padding: 24px 0;
-  color: var(--paper);
-  background: var(--ink);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
-}
-
-.resources {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
-}
-
-.resource-link {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 13px;
-  min-height: 70px;
-  padding: 12px 15px;
-  background: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(255, 255, 255, 0.11);
-  border-radius: 13px;
-  transition: background 150ms ease, transform 150ms ease;
-}
-
-.resource-link:hover:not(.is-disabled) {
-  background: rgba(255, 255, 255, 0.09);
-  transform: translateY(-2px);
-}
-
-.resource-symbol {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  color: var(--ink);
-  background: var(--paper);
-  border-radius: 9px;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.resource-link > span:nth-child(2) {
-  display: flex;
-  flex-direction: column;
-}
-
-.resource-link strong {
-  font-size: 14px;
-}
-
-.resource-link small {
-  margin-top: 2px;
-  color: rgba(255, 255, 255, 0.48);
-  font-size: 11px;
-}
-
-.resource-link > b {
-  color: rgba(255, 255, 255, 0.46);
-  font-size: 13px;
-}
-
 footer {
   padding: 34px 0;
   color: var(--paper);
@@ -1551,7 +1496,7 @@ footer {
     width: min(100% - 36px, 1320px);
   }
 
-  .site-header nav > a:not(.nav-project) {
+  .site-header nav {
     display: none;
   }
 
@@ -1583,6 +1528,11 @@ footer {
     justify-content: center;
   }
 
+  .hero-resources {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
   .stream-card {
     width: min(100%, 600px);
     min-height: auto;
@@ -1624,22 +1574,6 @@ footer {
     grid-column: 1 / -1;
   }
 
-  .protocol-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .protocol-grid article {
-    min-height: 220px;
-  }
-
-  .protocol-grid article > span {
-    margin-bottom: 45px;
-  }
-
-  .resources {
-    grid-template-columns: 1fr;
-  }
-
   .footer-inner {
     grid-template-columns: 1fr;
     justify-items: center;
@@ -1660,11 +1594,6 @@ footer {
     height: 32px;
   }
 
-  .site-header .nav-project {
-    padding: 7px 11px;
-    font-size: 12px;
-  }
-
   .hero {
     padding: 48px 0 52px;
   }
@@ -1685,6 +1614,10 @@ footer {
     display: grid;
   }
 
+  .hero-resources {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .stream-card {
     padding: 17px;
     border-radius: 20px;
@@ -1825,11 +1758,6 @@ footer {
     min-height: auto;
   }
 
-  .protocol-grid article {
-    min-height: 200px;
-    padding: 23px;
-  }
-
 }
 
 @media (prefers-reduced-motion: reduce) {