Match reference logo treatment

src/App.css

@@ -25,7 +25,7 @@
   position: relative;
   z-index: 5;
   display: grid;
-  grid-template-columns: 150px minmax(220px, 1fr) 150px auto;
+  grid-template-columns: 142px minmax(228px, 1fr) 150px auto;
   gap: 18px;
   align-items: center;
   max-width: 1024px;
@@ -35,22 +35,23 @@
 .reference-brand {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 9px;
   min-width: 0;
 }
 
 .reference-brand img {
-  width: min(146px, 100%);
-  height: auto;
+  width: 36px;
+  height: 36px;
   object-fit: contain;
-  mix-blend-mode: screen;
-  filter: invert(1) saturate(0.72) brightness(1.28) drop-shadow(0 0 12px rgba(100, 210, 255, 0.25));
+  filter: saturate(0.6) hue-rotate(154deg) brightness(1.22) drop-shadow(0 0 12px rgba(100, 210, 255, 0.25));
 }
 
 .reference-brand span {
-  font-size: 31px;
+  color: #f2f8ff;
+  font-size: 28px;
   font-weight: 700;
-  letter-spacing: -0.04em;
+  letter-spacing: -0.03em;
+  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.36);
 }
 
 .temperature-control {
@@ -371,41 +372,6 @@
   text-shadow: 0 2px 8px black;
 }
 
-.demo-status {
-  position: absolute;
-  z-index: 7;
-  left: 50%;
-  bottom: 12px;
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 8px 12px;
-  border: 1px solid rgba(194, 229, 246, 0.2);
-  border-radius: 8px;
-  color: rgba(239, 250, 255, 0.9);
-  background: linear-gradient(135deg, rgba(35, 47, 59, 0.72), rgba(18, 30, 42, 0.64));
-  box-shadow: 0 14px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
-  backdrop-filter: blur(8px);
-  transform: translateX(-50%);
-}
-
-.demo-status span,
-.demo-status b,
-.demo-status em {
-  white-space: nowrap;
-  font-size: 12px;
-  font-style: normal;
-  text-transform: uppercase;
-}
-
-.demo-status b {
-  color: #75e8ff;
-}
-
-.demo-status em {
-  color: #62f19a;
-}
-
 .room-card {
   position: absolute;
   z-index: 7;
@@ -567,10 +533,4 @@
     top: calc(58% + 42px);
   }
 
-  .demo-status {
-    bottom: 74px;
-    max-width: calc(100% - 28px);
-    overflow-x: auto;
-  }
-
 }

src/App.tsx

@@ -12,7 +12,7 @@ import {
 } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import houseBackground from './assets/house-background.jpeg'
-import vynteCompoundLogo from './assets/vynte-compound-logo.png'
+import vynteMark from './assets/vynte-mark.png'
 import './App.css'
 
 type RoomConfig = {
@@ -211,19 +211,13 @@ function HousePlan({
   rooms,
   airflowIntensity,
   speed,
-  mode,
-  efficiency,
   onAdjustRoom,
 }: {
   rooms: RoomState[]
   airflowIntensity: number
   speed: number
-  mode: Mode
-  efficiency: number
   onAdjustRoom: (roomId: string, delta: number) => void
 }) {
-  const airflowPercent = Math.round(airflowIntensity * 100)
-
   return (
     <section className="home-stage" aria-label="Vynte HVAC simulation floorplan">
       <div className="floor-plate">
@@ -238,11 +232,6 @@ function HousePlan({
         <Fan size={33} />
       </div>
       <span className="hvac-label">HVAC</span>
-      <div className="demo-status">
-        <span>{mode}</span>
-        <b>{airflowPercent}% airflow</b>
-        <em>{efficiency}% efficient</em>
-      </div>
       {rooms.map((room) => (
         <article className={`room-card ${room.state}`} key={room.id} style={{ left: `${room.x}%`, top: `${room.y}%` }}>
           <RoomIcon icon={room.icon} />
@@ -312,7 +301,8 @@ function App() {
     <main className="reference-shell">
       <header className="reference-topbar">
         <div className="reference-brand">
-          <img src={vynteCompoundLogo} alt="Vynte" />
+          <img src={vynteMark} alt="" />
+          <span>Vynte</span>
         </div>
         <div className="temperature-control">
           <div className="range-track">
@@ -373,8 +363,6 @@ function App() {
           rooms={rooms}
           airflowIntensity={airflowIntensity}
           speed={speed}
-          mode={mode}
-          efficiency={efficiency}
           onAdjustRoom={adjustRoom}
         />
       </div>