Replace oversized hero with compact app header

frontend/app.css

@@ -51,7 +51,7 @@ a { color: inherit; }
 
 .site-header {
   width: min(1460px, calc(100% - 64px));
-  height: 78px;
+  height: 62px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
@@ -61,64 +61,50 @@ a { color: inherit; }
   position: relative;
   z-index: 10;
 }
-.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
+.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; }
 .brand > span:last-child { display: flex; flex-direction: column; gap: 1px; }
-.brand b { font-size: 17px; letter-spacing: -0.04em; }
-.brand small { font: 8px/1.2 var(--mono); letter-spacing: 0.17em; color: var(--muted); }
-.brand-mark { width: 33px; height: 33px; display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; transform: skew(-6deg); }
+.brand b { font-size: 15px; letter-spacing: -0.04em; }
+.brand small { font: 7px/1.2 var(--mono); letter-spacing: 0.15em; color: var(--muted); }
+.brand-mark { width: 27px; height: 27px; display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; transform: skew(-6deg); }
 .brand-mark i { display: block; background: var(--acid); }
 .brand-mark i:nth-child(1) { height: 55%; align-self: end; }
 .brand-mark i:nth-child(2) { height: 78%; align-self: end; opacity: 0.78; }
 .brand-mark i:nth-child(3) { height: 100%; opacity: 0.48; }
-.mode-nav { display: flex; padding: 4px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 99px; }
-.nav-pill { border: 0; background: transparent; color: #7e817c; cursor: pointer; padding: 9px 16px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .02em; transition: .25s ease; }
+.mode-nav { display: flex; padding: 3px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 99px; }
+.nav-pill { border: 0; background: transparent; color: #7e817c; cursor: pointer; padding: 7px 13px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .02em; transition: .25s ease; }
 .nav-pill.active { background: var(--paper); color: #101210; box-shadow: 0 3px 14px rgba(0,0,0,.3); }
 .header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
-.model-status { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
+.model-status { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: 8px var(--mono); letter-spacing: .08em; }
 .model-status i { width: 6px; height: 6px; background: #b9a64d; border-radius: 50%; box-shadow: 0 0 9px #b9a64d; }
 .model-status.ready i { background: var(--acid); box-shadow: 0 0 10px var(--acid); }
 .model-status.error i { background: #ff766e; box-shadow: 0 0 9px #ff766e; }
-.icon-link { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: #b5b6b0; font: 9px var(--mono); transition: .2s; }
+.icon-link { min-width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: #b5b6b0; font: 8px var(--mono); transition: .2s; }
 .icon-link:hover { border-color: var(--acid); color: var(--acid); }
 .arrow-link { font: 15px var(--sans); }
 
 main { width: min(1460px, calc(100% - 64px)); margin: 0 auto; position: relative; z-index: 1; }
-.hero { min-height: 660px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 60px; padding: 72px 3vw 76px; border-bottom: 1px solid var(--line); }
-.overline { display: flex; align-items: center; gap: 17px; font: 9px var(--mono); letter-spacing: .17em; color: var(--acid); }
+.hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 55px; padding: 34px 4px 36px; border-bottom: 1px solid var(--line); }
+.overline { display: flex; align-items: center; gap: 14px; font: 8px var(--mono); letter-spacing: .15em; color: var(--acid); }
 .overline span { display: flex; align-items: center; gap: 12px; }
-.overline span::before { content: ""; width: 28px; height: 1px; background: var(--acid); box-shadow: 0 0 9px rgba(217,255,99,.45); }
+.overline span::before { content: ""; width: 22px; height: 1px; background: var(--acid); box-shadow: 0 0 9px rgba(217,255,99,.45); }
 .overline b { color: #656961; font-weight: 500; border-left: 1px solid var(--line); padding-left: 17px; }
-.hero h1 { font-size: clamp(68px, 7.7vw, 124px); line-height: .83; letter-spacing: -.075em; font-weight: 620; margin: 30px 0 35px; max-width: 920px; }
+.hero h1 { font-size: clamp(42px, 4.5vw, 68px); line-height: .92; letter-spacing: -.065em; font-weight: 620; margin: 15px 0 13px; max-width: 900px; }
 .hero h1 em { font-family: var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(241,239,231,.58); font-weight: 400; }
-.hero-copy > p { max-width: 650px; color: #a5a69f; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.55; letter-spacing: -.015em; }
-.hero-meta { display: flex; gap: 0; margin-top: 47px; }
-.hero-meta div { padding: 0 30px; border-right: 1px solid var(--line); }
+.hero-copy > p { max-width: 760px; margin: 0; color: #8f928c; font-size: 13px; line-height: 1.55; letter-spacing: -.01em; }
+.hero-meta { display: flex; gap: 0; margin: 0 0 2px; }
+.hero-meta div { min-width: 112px; padding: 0 20px; border-right: 1px solid var(--line); }
 .hero-meta div:first-child { padding-left: 0; }
 .hero-meta div:last-child { border: 0; }
-.hero-meta b { display: block; font-size: 25px; letter-spacing: -.05em; }
-.hero-meta span { display: block; color: #6d706a; font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
+.hero-meta b { display: block; font-size: 19px; letter-spacing: -.045em; }
+.hero-meta span { display: block; color: #666962; font: 6px var(--mono); letter-spacing: .09em; text-transform: uppercase; margin-top: 5px; }
 
-.semantic-orbit { width: min(100%, 550px); aspect-ratio: 1; justify-self: center; position: relative; }
-.semantic-orbit::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(217,255,99,.1), transparent 66%); filter: blur(8px); }
-.orbit-ring { position: absolute; border: 1px solid rgba(217,255,99,.12); border-radius: 50%; animation: orbit-spin 34s linear infinite; }
-.ring-one { inset: 10%; border-style: dashed; }
-.ring-two { inset: 22%; animation-direction: reverse; animation-duration: 21s; }
-.ring-three { inset: 35%; border-color: rgba(102,227,207,.16); }
-.orbit-ring::before { content: ""; width: 6px; height: 6px; position: absolute; top: 11%; left: 18%; border-radius: 50%; background: var(--acid); box-shadow: 0 0 15px var(--acid); }
-.orbit-core { position: absolute; inset: 39%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: linear-gradient(145deg,#e8ff9c,#b9da55); color: #11130e; box-shadow: 0 0 80px rgba(217,255,99,.15); z-index: 2; }
-.orbit-core span { font: 700 45px/.9 var(--serif); }
-.orbit-core small { margin-top: 7px; font: 7px var(--mono); letter-spacing: .13em; }
-.semantic-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
-.semantic-orbit path { stroke: rgba(241,239,231,.14); fill: none; stroke-dasharray: 2 5; }
-.orbit-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #747871; font: 7px var(--mono); letter-spacing: .12em; z-index: 3; }
-.orbit-node i { width: 46px; height: 46px; border: 1px solid rgba(241,239,231,.17); border-radius: 50%; background: rgba(13,15,13,.92); display: grid; place-items: center; color: #c7c9c0; font-style: normal; font-size: 12px; box-shadow: 0 13px 40px rgba(0,0,0,.3); }
-.node-text { left: 11%; top: 31%; }.node-image { right: 7%; top: 25%; }.node-video { right: 8%; bottom: 19%; }.node-doc { left: 10%; bottom: 18%; }
 @keyframes orbit-spin { to { transform: rotate(360deg); } }
 
-.studio { padding: 108px 0 112px; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
-.section-heading { display: grid; grid-template-columns: 1fr 430px; align-items: end; gap: 60px; margin-bottom: 47px; }
+.studio { padding: 48px 0 76px; border-bottom: 1px solid var(--line); scroll-margin-top: 20px; }
+.section-heading { display: grid; grid-template-columns: 1fr 390px; align-items: end; gap: 45px; margin-bottom: 30px; }
 .section-heading > div > span, .story-copy > span { color: var(--acid); font: 9px var(--mono); letter-spacing: .17em; }
-.section-heading h2, .story-copy h2 { margin: 14px 0 0; font-size: clamp(43px,5vw,76px); line-height: .92; letter-spacing: -.06em; font-weight: 570; }
+.section-heading h2 { margin: 10px 0 0; font-size: clamp(36px,3.8vw,56px); line-height: .94; letter-spacing: -.055em; font-weight: 570; }
+.story-copy h2 { margin: 14px 0 0; font-size: clamp(43px,5vw,76px); line-height: .92; letter-spacing: -.06em; font-weight: 570; }
 .section-heading > p { color: #8b8e88; line-height: 1.65; font-size: 13px; margin: 0 0 7px; }
 .studio-grid { display: grid; grid-template-columns: minmax(370px, .8fr) minmax(520px, 1.2fr); border: 1px solid var(--line); background: rgba(9,11,9,.54); min-height: 790px; }
 .control-deck { padding: 30px; border-right: 1px solid var(--line); background: rgba(20,22,19,.56); }
@@ -240,13 +226,14 @@ footer { width: min(1460px,calc(100% - 64px)); min-height: 145px; margin: 0 auto
 }
 @media (max-width: 1100px) {
   .site-header, main, footer { width: min(100% - 36px,1460px); }
-  .hero { min-height: 590px; gap: 20px; padding-inline: 0; }.semantic-orbit { width: 440px; }
+  .hero { gap: 28px; padding-inline: 0; }
+  .hero-meta div { min-width: 98px; padding-inline: 14px; }
   .studio-grid { grid-template-columns: 400px 1fr; }.result-deck,.control-deck { padding: 24px; }
   .section-heading { grid-template-columns: 1fr 350px; }
 }
 @media (max-width: 900px) {
   .site-header { grid-template-columns: 1fr auto; }.mode-nav { position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(22,24,21,.96); box-shadow: 0 9px 35px rgba(0,0,0,.5); }.model-status { display: none; }
-  .hero { grid-template-columns: 1fr; padding-top: 70px; }.semantic-orbit { width: min(80vw,490px); margin-top: -40px; }.hero-copy { position: relative; z-index: 4; }.hero h1 { font-size: clamp(69px,13vw,108px); }
+  .hero { grid-template-columns: 1fr; gap: 23px; padding: 31px 0 29px; }.hero-copy { position: relative; z-index: 4; }.hero h1 { font-size: clamp(43px,7vw,60px); }
   .section-heading { grid-template-columns: 1fr; gap: 20px; }.section-heading > p { max-width: 590px; }
   .studio-grid { grid-template-columns: 1fr; }.control-deck { border-right: 0; border-bottom: 1px solid var(--line); }.result-deck { min-height: 650px; }
   .compare-inputs { grid-template-columns: 1fr; gap: 9px; }.versus { min-height: 45px; }.versus small { writing-mode: initial; }.compare-controls { grid-template-columns: 1fr; }
@@ -254,9 +241,9 @@ footer { width: min(1460px,calc(100% - 64px)); min-height: 145px; margin: 0 auto
   footer { margin-bottom: 75px; grid-template-columns: 1fr 1fr; }.footer-brand + p { grid-column: 1/3; grid-row: 2; text-align: left; }.footer-brand ~ div { grid-column: 2; grid-row: 1; }
 }
 @media (max-width: 620px) {
-  .site-header, main, footer { width: calc(100% - 24px); }.site-header { height: 65px; }.brand small { display:none; }.header-actions .icon-link:first-of-type { display:none; }
-  .hero { min-height: 640px; padding-top: 58px; }.hero h1 { font-size: clamp(57px,17vw,88px); margin-top: 23px; }.overline b { display:none; }.hero-copy > p { font-size: 15px; }.hero-meta { margin-top: 35px; }.hero-meta div { padding-inline: 16px; }.hero-meta b { font-size: 20px; }.hero-meta span { font-size: 6px; }.semantic-orbit { width: 105vw; margin-left: -10vw; margin-top: -70px; opacity: .8; }
-  .studio { padding-block: 75px; }.section-heading h2,.story-copy h2 { font-size: 46px; }.studio-grid { border-left: 0; border-right: 0; margin-inline: -12px; }.control-deck,.result-deck { padding: 20px 15px; }.visual-query-grid { grid-template-columns: 1fr 1fr; }.drop-field { min-height: 92px; }
+  .site-header, main, footer { width: calc(100% - 24px); }.site-header { height: 56px; }.brand small { display:none; }.header-actions .icon-link:first-of-type { display:none; }
+  .hero { padding: 25px 0 23px; gap: 20px; }.hero h1 { font-size: clamp(38px,11.5vw,52px); margin: 12px 0 10px; }.overline b { display:none; }.hero-copy > p { font-size: 12px; }.hero-meta { width: 100%; }.hero-meta div { flex: 1; min-width: 0; padding-inline: 12px; }.hero-meta b { font-size: 18px; }.hero-meta span { font-size: 5px; }
+  .studio { padding-block: 36px 64px; }.section-heading h2 { font-size: 38px; }.story-copy h2 { font-size: 46px; }.studio-grid { border-left: 0; border-right: 0; margin-inline: -12px; }.control-deck,.result-deck { padding: 20px 15px; }.visual-query-grid { grid-template-columns: 1fr 1fr; }.drop-field { min-height: 92px; }
   .result-topbar small { display:none; }.empty-universe { min-height: 580px; }.media-preview-rail { height: 70px; }
   .ranking-card { grid-template-columns: 28px 48px minmax(0,1fr) 53px; gap: 8px; padding-right: 8px; }.rank-media { width: 48px; height: 48px; }.rank-title b { font-size: 9px; }.kind-tag { display:none; }.rank-copy p { display:none; }.score-line { margin-top: 9px; }.rank-value { font-size: 11px; }
   .summary-card { grid-template-columns: 1fr auto; }.summary-card h3 { font-size: 24px; }.top-score b { font-size: 34px; }

frontend/index.html

@@ -9,7 +9,7 @@
       content="Explore WeMM-Embedding-9B across text, images, video, figures, and visual documents."
     />
     <title>WeMM — Semantic Universe</title>
-    <link rel="stylesheet" href="/ui/app.css?v=3" />
+    <link rel="stylesheet" href="/ui/app.css?v=4" />
     <script type="module" src="/ui/app.js?v=2"></script>
   </head>
   <body>
@@ -37,7 +37,7 @@
       <section class="hero" aria-labelledby="hero-title">
         <div class="hero-copy">
           <div class="overline"><span>UNIVERSAL MULTIMODAL EMBEDDING</span><b>QWEN3.5 · 9B</b></div>
-          <h1 id="hero-title">Meaning has<br /><em>no file type.</em></h1>
+          <h1 id="hero-title">Meaning has <em>no file type.</em></h1>
           <p>
             Project language, imagery, video, charts, and visual documents into one shared
             geometry—then watch meaning arrange itself.
@@ -48,22 +48,6 @@
             <div><b>190</b><span>MMEB-v3 tasks</span></div>
           </div>
         </div>
-        <div class="semantic-orbit" aria-hidden="true">
-          <div class="orbit-ring ring-one"></div>
-          <div class="orbit-ring ring-two"></div>
-          <div class="orbit-ring ring-three"></div>
-          <div class="orbit-core"><span>W</span><small>4096D</small></div>
-          <span class="orbit-node node-text"><i>Tx</i>TEXT</span>
-          <span class="orbit-node node-image"><i>Im</i>IMAGE</span>
-          <span class="orbit-node node-video"><i>Vd</i>VIDEO</span>
-          <span class="orbit-node node-doc"><i>Dc</i>DOCUMENT</span>
-          <svg viewBox="0 0 500 500">
-            <path d="M110 190 C190 220 204 235 250 250" />
-            <path d="M390 154 C335 192 302 220 250 250" />
-            <path d="M390 355 C328 317 302 283 250 250" />
-            <path d="M110 355 C164 315 198 285 250 250" />
-          </svg>
-        </div>
       </section>
 
       <section class="studio" data-panel="search">