Align HACo project page with final paper

Author: Naisheng

app/globals.css

@@ -74,7 +74,10 @@ img, video { display: block; max-width: 100%; }
 .title-block h1 .title-c { color: var(--title-green); }
 .title-block h1 .title-o { color: var(--title-green-light); }
 .article-shell .authors { margin: 48px auto 7px; font-size: 18px; }
-.affiliation { margin: 0; color: var(--muted); font: 13px/1.5 var(--font-paper); }
+.article-shell .authors sup { margin-left: 2px; font-size: .62em; }
+.article-shell .affiliation { margin: 0; color: var(--muted); font: 14px/1.55 var(--font-paper); }
+.article-shell .affiliation sup { margin-right: 2px; font-size: .72em; }
+.article-shell .affiliation-note { margin-top: 4px; font-size: 13px; font-style: italic; }
 .article-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
 .article-link { display: inline-flex; align-items: center; gap: 7px; min-height: 37px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 7px; text-decoration: none; font: 600 12px/1 var(--font-paper); }
 .article-link:hover { border-color: var(--accent); background: var(--accent-soft); }
@@ -94,6 +97,7 @@ img, video { display: block; max-width: 100%; }
 .abstract-language--zh p { line-height: 1.78; }
 
 .paper-figure { width: 100%; margin: 42px 0 0; }
+.paper-figure--compact { width: 84%; margin-right: auto; margin-left: auto; }
 .paper-figure img, .paper-figure video { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: white; }
 .paper-figure video { background: #000; }
 .paper-figure figcaption { margin-top: 14px; color: var(--muted); font: 14px/1.55 var(--font-paper); }
@@ -140,12 +144,11 @@ img, video { display: block; max-width: 100%; }
 .benchmark-taxonomy div.active,
 .benchmark-taxonomy div[aria-current='true'] { padding-top: 10px; border-top: 5px solid #3e9879; color: #2f7d65; background: rgba(74,157,130,.1); font-weight: 800; }
 
-.result-intro { padding: 17px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
-.result-intro p { margin: 0; font: 14px/1.6 var(--font-paper); }
-.experiment-group { margin-top: 48px; }
+.article-shell .results-overview { margin: 0; color: var(--body-ink); font: 17px/1.68 var(--font-paper); }
+.experiment-group { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--line); }
 .experiment-group h3 { margin-bottom: 8px; }
-.experiment-group > p { color: var(--muted); font: 14px/1.6 var(--font-paper); }
-.table-wrap { overflow-x: auto; margin-top: 22px; }
+.article-shell .experiment-group > p { margin: 0; color: var(--body-ink); font: 17px/1.68 var(--font-paper); }
+.table-wrap { overflow-x: auto; margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.62); }
 .result-table { width: 100%; min-width: 760px; border-collapse: collapse; font-family: var(--font-paper); }
 .result-table th, .result-table td { padding: 12px 9px; border-bottom: 1px solid var(--line); text-align: center; font-size: 12px; }
 .result-table thead th { border-top: 2px solid var(--line-strong); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.3; text-transform: uppercase; }
@@ -154,10 +157,10 @@ img, video { display: block; max-width: 100%; }
 .result-table thead th:nth-child(4) { border-top: 3px solid var(--task-balloon); }
 .result-table thead th:nth-child(5) { border-top: 3px solid var(--task-cap); }
 .result-table thead th:nth-child(6) { border-top: 3px solid var(--task-paste); }
-.result-table th:first-child { min-width: 190px; padding-left: 0; text-align: left; }
+.result-table th:first-child { width: 160px; min-width: 160px; padding-right: 10px; padding-left: 14px; text-align: left; }
 .result-table td { color: rgba(26,23,20,.74); font-family: var(--font-paper); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
 .result-table--components { min-width: 850px; }
-.result-table--components th:first-child { min-width: 130px; }
+.result-table--components th:first-child { width: 150px; min-width: 150px; }
 .result-table--components thead th.component-head { width: 70px; min-width: 70px; padding-right: 5px; padding-left: 5px; color: rgba(26,27,24,.46); font-size: 10px; font-weight: 700; letter-spacing: normal; background: transparent; border-top: 2px solid var(--line-strong); }
 .result-table--components thead th:nth-child(4) { border-top: 3px solid var(--task-poker); }
 .result-table--components thead th:nth-child(5) { border-top: 3px solid var(--task-book); }
@@ -170,12 +173,15 @@ img, video { display: block; max-width: 100%; }
 .result-table tbody tr.ours th { color: #367e68; }
 .result-table tbody tr.ours th::after { content: 'OURS'; margin-left: 8px; padding: 2px 5px; border-radius: 3px; color: white; background: var(--accent); font: 700 8px/1 var(--font-paper); }
 .table-caption { margin-top: 11px !important; color: var(--muted) !important; font: 13px/1.5 var(--font-paper) !important; }
+.experiment-analysis { margin-top: 24px; padding: 16px 18px 17px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
+.experiment-analysis span { display: block; margin-bottom: 7px; color: var(--accent); font: 700 10px/1 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; }
+.article-shell .experiment-analysis p { margin: 0; color: var(--body-ink); font: 15px/1.65 var(--font-paper); }
 .placeholder-warning { margin: 24px 0 0; padding: 11px 13px; border: 1px solid rgba(195,94,50,.3); border-radius: 7px; color: #774126; background: var(--warm-soft); font: 12px/1.5 var(--font-paper); }
 
 .result-figure { margin: 30px 0 30px; }
-.result-figure__frame { position: relative; overflow-x: auto; }
+.result-figure__frame { position: relative; overflow-x: auto; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.56); }
 .result-figure__note { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 18px; color: var(--muted); font: 10px/1.4 var(--font-paper); letter-spacing: .04em; text-transform: uppercase; }
-.result-figure figcaption { margin-top: 11px; color: var(--muted); font: 13px/1.5 var(--font-paper); }
+.result-figure figcaption { margin-top: 12px; color: var(--muted); font: 14px/1.55 var(--font-paper); }
 .horizontal-bars { width: 100%; display: grid; gap: 11px; }
 .horizontal-bar { display: grid; grid-template-columns: 148px 1fr 42px; gap: 10px; align-items: center; border-radius: 6px; transition: background .18s ease; }
 .horizontal-bar__label { color: rgba(26,23,20,.82); font: 600 12px/1.25 var(--font-paper); text-align: left; }
@@ -270,6 +276,7 @@ img, video { display: block; max-width: 100%; }
   .title-block h1 { font-size: 38px; }
   .article-shell h2 { margin-top: 58px; font-size: 30px; }
   .article-shell p, .article-shell li { font-size: 16px; }
+  .paper-figure--compact { width: 100%; }
   .signal-key { grid-template-columns: 1fr; }
   .demo-caption__head { gap: 10px; }
   .demo-caption b { font-size: 15px; }