Proper VARASYS logo (wordmark + tagline) everywhere; embed defaults to the set lists

Logos: the brand is now a consistent lockup — wordmark image + a crisp CSS
"Simplifying Complexity" tagline — in the shared header, device silkscreens
(teacher/stage/micro), the player (was a CSS text box) and the showcase canvas
(was drawn text; now the real logo image + tagline). Cropped the baked tagline
out of logo-light.b64 so both themes render the tagline once. Renamed device
silk logos to .dev-logo so they no longer shrink the shared header logo.

Embeds: every form factor now loads its default set lists when embedded with no
config — and the Concepts landing embeds them that way (viewport loads
<device>?embed=1 with no forced #p=; the program box reflects what the device
reports and only overrides on explicit Load).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

index.html

@@ -158,8 +158,8 @@ function renderPanes() {
     </div>`).join("");
   $("panes").querySelectorAll(".pane").forEach((el) => {
     const k = el.dataset.key;
-    el.addEventListener("click", () => loadVersion(k, (box.value || "").trim() || DEFAULT_PROG));
+    el.addEventListener("click", () => loadVersion(k));
-    el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); loadVersion(k, (box.value || "").trim() || DEFAULT_PROG); } });
+    el.addEventListener("keydown", (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); loadVersion(k); } });
   });
 }
 function loadVersion(key, prog) {
@@ -211,8 +211,8 @@ addEventListener("message", (e) => {
 });
 
 renderPanes();
-box.value = DEFAULT_PROG;
+// default = each device's built-in set lists (no forced program); the box fills from what the device reports
-loadVersion("editor", DEFAULT_PROG);
+loadVersion("editor");
 /*@BUILD:include:src/chrome.js@*/
 </script>
 </body>

micro.html

@@ -82,7 +82,7 @@
       linear-gradient(180deg, #2b2d33, #161719);                                        /* matte anodised graphite */
     box-shadow:0 24px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -2px 8px rgba(0,0,0,.5) }
   .brandrow{ display:flex; align-items:center; justify-content:space-between; margin:0 }
-  .brand-logo{ height:13px; width:auto; display:block }
+  .dev-logo{ height:13px }
   .silk{ display:flex; align-items:center; gap:7px; color:var(--silk) }
   .silk .model{ font-size:8.5px; text-transform:uppercase; letter-spacing:.16em; opacity:.85 }
   .meta{ display:flex; align-items:center; gap:12px }
@@ -140,7 +140,7 @@
   <!-- TOP FACE: display + roller + speaker -->
   <div class="face">
     <div class="brandrow">
-      <div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM_P‑1 Practice</span></div>
+      <div class="silk"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_P‑1 Practice</span></div>
       <div class="meta">
         <div class="pwr" title="Powered over USB‑C — wall adapter or power bank"><span class="dot"></span>USB‑C&nbsp;PWR</div>
       </div>

player.html

@@ -83,9 +83,9 @@
   .screw.bl{ bottom:11px; left:11px } .screw.br{ bottom:11px; right:11px }
 
   .brandrow{ display:flex; align-items:center; justify-content:space-between; margin:2px 6px 16px; }
-  .logo{ display:flex; align-items:baseline; gap:9px }
+  .logo{ display:flex; align-items:center; gap:11px }
-  .logo .vk{ font-weight:800; letter-spacing:.22em; color:#fff; font-size:17px;
+  .logo .dev-logo{ height:19px }
-    background:var(--cyan); padding:2px 8px; border-radius:4px; box-shadow:0 0 10px rgba(10,179,247,.5) }
+  .logo .dev-tag{ color:var(--dmuted) }
   .logo .model{ color:var(--dmuted); font-size:12px; letter-spacing:.04em }
   .pwr{ display:flex; align-items:center; gap:7px; font-size:10px; color:var(--dmuted); text-transform:uppercase; letter-spacing:.12em }
   .pwr .dot{ width:8px; height:8px; border-radius:50%; background:#2fe07a; box-shadow:0 0 8px #2fe07a }
@@ -222,7 +222,7 @@
   <span class="screw bl"></span><span class="screw br"></span>
 
   <div class="brandrow">
-    <div class="logo"><span class="vk">VARASYS</span><span class="model">PM_C‑1 · Concept</span></div>
+    <div class="logo"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_C‑1 · Concept</span></div>
     <div class="pwr"><span class="dot"></span>PWR</div>
   </div>
 

showcase.html

@@ -214,6 +214,7 @@ const F_FAST=0.30, F_SLOW=0.94;                     // weight fraction along rod
 let beatCount=-1, lastBeatTime=0, pend=0, flash=0, flashAccent=false;
 function audioLatency(){ return audioCtx ? (audioCtx.outputLatency || audioCtx.baseLatency || 0) : 0; }
 const LEVELCOL = { 2:[255,155,46], 1:[51,208,255], 3:[155,123,255], 0:[70,80,95] };  // accent / normal / ghost / mute (rgb)
+const LOGO = new Image(); let logoReady=false; LOGO.onload=function(){ logoReady=true; }; LOGO.src = "data:image/png;base64,@BUILD:logo-dark@";
 
 function bpmToFrac(b){ return F_SLOW - (Math.max(40,Math.min(240,b))-40)/200*(F_SLOW-F_FAST); }
 function fracToBpm(f){ return Math.round(240 - (Math.max(F_FAST,Math.min(F_SLOW,f))-F_FAST)/(F_SLOW-F_FAST)*200); }
@@ -225,9 +226,15 @@ function drawBody(){
   g.beginPath(); g.moveTo(tlx,topY); g.lineTo(trx,topY); g.lineTo(brx,botY); g.lineTo(blx,botY); g.closePath();
   g.fillStyle=grd; g.fill(); g.lineWidth=1.5; g.strokeStyle="rgba(255,255,255,.06)"; g.stroke();
   g.beginPath(); g.moveTo(tlx,topY); g.lineTo(blx,botY); g.lineWidth=2; g.strokeStyle="rgba(255,255,255,.05)"; g.stroke();
-  g.textAlign="center"; g.fillStyle="#aab2bc";
+  // proper VARASYS logo (wordmark image) + tagline + model
-  g.font="700 9px 'Segoe UI',Roboto,Arial,sans-serif"; g.fillText("V A R A S Y S", CW/2, 33);
+  const lw=60, lh=Math.round(lw*82/304), lx=CW/2-lw/2, ly=15;
-  g.globalAlpha=.8; g.font="600 7.5px 'Segoe UI',Roboto,Arial,sans-serif"; g.fillText("PM_D‑1  DISPLAY", CW/2, 44); g.globalAlpha=1;
+  if(logoReady) g.drawImage(LOGO, lx, ly, lw, lh);
+  g.textAlign="center";
+  g.fillStyle="#8f9aa6"; g.font="600 5px 'Segoe UI',Roboto,Arial,sans-serif"; g.globalAlpha=.85;
+  try{ g.letterSpacing="1.4px"; }catch(e){}
+  g.fillText("SIMPLIFYING COMPLEXITY", CW/2, ly+lh+7);
+  try{ g.letterSpacing="0px"; }catch(e){} g.globalAlpha=1;
+  g.fillStyle="#aab2bc"; g.font="600 7px 'Segoe UI',Roboto,Arial,sans-serif"; g.fillText("PM_D‑1 DISPLAY", CW/2, ly+lh+17);
 }
 
 function drawPendulum(){

src/base.css

@@ -11,12 +11,18 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-/* ---- VARASYS site header (shared across every page) ---- */
+/* ---- VARASYS brand lockup: wordmark + "Simplifying Complexity" tagline beneath ---- */
-.brand { display:inline-flex; align-items:center; flex:0 0 auto; }
+.brand { display:inline-flex; flex-direction:column; align-items:stretch; flex:0 0 auto; gap:2px; text-decoration:none; }
-.brand-logo { height:30px; width:auto; display:block; }
+.brand-logo { height:28px; width:auto; display:block; }
 .brand-light { display:none; }
 :root[data-theme="light"] .brand-dark  { display:none; }
 :root[data-theme="light"] .brand-light { display:block; }
+.brand-tag { font-size:7px; line-height:1; letter-spacing:.26em; text-transform:uppercase; text-align:center;
+  color:var(--muted,#7f8b9a); white-space:nowrap; }
+/* on-device silkscreen brand lockup (wordmark image + tagline) — used in device brandrows */
+.dev-lock { display:inline-flex; flex-direction:column; align-items:stretch; gap:1px; }
+.dev-logo { display:block; width:auto; height:14px; }
+.dev-tag { font-size:5px; line-height:1; letter-spacing:.16em; text-transform:uppercase; text-align:center; opacity:.8; white-space:nowrap; }
 .site-head { width:100%; max-width:980px; margin:0 auto; display:flex; align-items:center;
   justify-content:space-between; gap:10px 16px; flex-wrap:wrap; }
 .head-left { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

src/header.html

@@ -1,9 +1,10 @@
 <!-- Shared site header — assembled into every page by build.sh.
      Brand goes to Concepts (the landing); nav: Concepts / Editor / Embed / Theme. -->
 <header class="site-head">
-  <a class="brand" href="/" title="VARASYS PolyMeter — Concepts (home)">
+  <a class="brand" href="/" title="VARASYS — Simplifying Complexity">
     <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" />
+    <span class="brand-tag">Simplifying Complexity</span>
   </a>
   <nav class="site-nav">
     <a href="/">Concepts</a>

stage.html

@@ -59,7 +59,7 @@
   .jk b{ font-size:6.5px; font-weight:700; color:var(--silk); letter-spacing:.03em; text-transform:uppercase; opacity:.9; text-align:center; line-height:1.2 }
 
   .brandrow{ display:flex; align-items:center; justify-content:space-between; margin:13px 16px 10px }
-  .brand-logo{ height:13px; width:auto; display:block }
+  .dev-logo{ height:13px }
   .silk{ display:flex; align-items:center; gap:7px; color:var(--silk) }
   .silk .model{ font-size:8.5px; text-transform:uppercase; letter-spacing:.16em; opacity:.85 }
   .pwr{ display:flex; align-items:center; gap:5px; font-size:7.5px; color:var(--silk); text-transform:uppercase; letter-spacing:.12em; opacity:.85 }
@@ -126,7 +126,7 @@
   </div>
 
   <div class="brandrow">
-    <div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM_S‑1 Stage</span></div>
+    <div class="silk"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_S‑1 Stage</span></div>
     <div class="pwr"><span class="dot"></span>USB‑C&nbsp;PWR</div>
   </div>
 

teacher.html

@@ -89,7 +89,7 @@
   }
   .brandrow{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 2px 12px; }
   .silk{ display:flex; align-items:center; gap:8px; color:var(--silk); letter-spacing:.04em }
-  .brand-logo{ height:16px; width:auto; display:block }
+  .dev-logo{ height:16px }
   .silk .model{ font-size:10px; text-transform:uppercase; letter-spacing:.18em; opacity:.8 }
   .pwr{ display:flex; align-items:center; gap:6px; font-size:9px; color:var(--silk); text-transform:uppercase; letter-spacing:.14em; opacity:.85 }
   .pwr .dot{ width:7px; height:7px; border-radius:50%; background:#2fe07a; box-shadow:0 0 7px #2fe07a }
@@ -231,7 +231,7 @@
   <div class="device">
 
   <div class="brandrow">
-    <div class="silk"><img class="brand-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="model">PM_T‑1 Teacher</span></div>
+    <div class="silk"><span class="dev-lock"><img class="dev-logo" src="data:image/png;base64,@BUILD:logo-dark@" alt="VARASYS" /><span class="dev-tag">Simplifying Complexity</span></span><span class="model">PM_T‑1 Teacher</span></div>
     <div class="pwr"><span class="dot"></span>PWR</div>
   </div>