From 390c974a5f5f7db2b1c72a3f216360304806fdf0 Mon Sep 17 00:00:00 2001
From: Me Here <me@here>
Date: Tue, 2 Jun 2026 08:25:59 -0500
Subject: [PATCH] editor: move VARASYS logo into the device top-left (out of
 the site header)

Add the brand lockup to the device .appheader (before the PM_E-1 title) and hide it in
.site-head, leaving the header with just nav (pushed right). Device logo sized to 30px.
Applies to editor.html + editor-beta.html.
---
 editor-beta.html | 9 +++++++++
 editor.html      | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/editor-beta.html b/editor-beta.html
index 9c433ae..c72fb26 100644
--- a/editor-beta.html
+++ b/editor-beta.html
@@ -76,6 +76,11 @@
      up with the editor's left edge. */
   #app { display:flex; gap:18px; max-width:none; margin:0 auto; align-items:flex-start; justify-content:center; }
   .site-head, .site-foot { max-width:none; }
+  /* Logo lives in the device's top-left corner (not the header) on the editor; header keeps just nav. */
+  .site-head .brand { display:none; }
+  .site-head { justify-content:flex-end; }
+  .devbrand { line-height:0; }
+  .devbrand .brand-logo { height:30px; }
   .device { flex:1 1 auto; min-width:0; max-width:none; background:linear-gradient(180deg, var(--panel), var(--bg));
     border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
   .row { display:flex; gap:18px; flex-wrap:wrap; }
@@ -261,6 +266,10 @@
 <div id="app">
 <div class="device">
   <div class="row appheader" style="align-items:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px">
+    <a class="brand devbrand" href="/" title="VARASYS — Simplifying Complexity" style="flex:0 0 auto">
+      <img class="brand-logo brand-dark"  src="data:image/png;base64,@BUILD:logo-dark@"  alt="VARASYS — Simplifying Complexity" />
+      <img class="brand-logo brand-light" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS — Simplifying Complexity" />
+    </a>
     <h1 style="margin:0">PM_E‑1 <span style="font-weight:400; opacity:.75">PolyMeter Editor</span> <span style="font-size:11px; font-weight:600; letter-spacing:.5px; color:#fff; background:#7b3fb8; border-radius:6px; padding:2px 7px; vertical-align:middle">LIVE SYNC β</span></h1>
     <div class="appheader-ctrls" style="display:flex; align-items:center; gap:10px">
       <button id="helpBtn" title="keyboard shortcuts (?)">?</button>
diff --git a/editor.html b/editor.html
index c7adc9d..99e297f 100644
--- a/editor.html
+++ b/editor.html
@@ -76,6 +76,11 @@
      up with the editor's left edge. */
   #app { display:flex; gap:18px; max-width:none; margin:0 auto; align-items:flex-start; justify-content:center; }
   .site-head, .site-foot { max-width:none; }
+  /* Logo lives in the device's top-left corner (not the header) on the editor; header keeps just nav. */
+  .site-head .brand { display:none; }
+  .site-head { justify-content:flex-end; }
+  .devbrand { line-height:0; }
+  .devbrand .brand-logo { height:30px; }
   .device { flex:1 1 auto; min-width:0; max-width:none; background:linear-gradient(180deg, var(--panel), var(--bg));
     border:1px solid var(--edge); border-radius:16px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
   .row { display:flex; gap:18px; flex-wrap:wrap; }
@@ -261,6 +266,10 @@
 <div id="app">
 <div class="device">
   <div class="row appheader" style="align-items:center; flex-wrap:wrap; gap:6px 14px; margin-bottom:8px">
+    <a class="brand devbrand" href="/" title="VARASYS — Simplifying Complexity" style="flex:0 0 auto">
+      <img class="brand-logo brand-dark"  src="data:image/png;base64,@BUILD:logo-dark@"  alt="VARASYS — Simplifying Complexity" />
+      <img class="brand-logo brand-light" src="data:image/png;base64,@BUILD:logo-light@" alt="VARASYS — Simplifying Complexity" />
+    </a>
     <h1 style="margin:0">PM_E‑1 <span style="font-weight:400; opacity:.75">PolyMeter Editor</span></h1>
     <div class="appheader-ctrls" style="display:flex; align-items:center; gap:10px">
       <span id="devBadge" title="USB-MIDI link to a PM_K-1 / PM_X-1 (Chrome/Edge/Firefox). Click to connect." style="cursor:pointer; font-size:12px; padding:3px 9px; border-radius:7px; border:1px solid var(--edge); color:var(--muted); white-space:nowrap">◎ connect device</span>