Deploy screen-companion from 5ffc29e

static/companion.js

@@ -202,40 +202,8 @@ function formatMemoriesForPrompt() {
 // ─── Companion SVG (injected into PiP window) ─────────────────────────────
 
 const COMPANION_HTML = `
-<div class="pip-scene" id="pip-scene" data-time="day">
-  <div class="scene-sky"></div>
-  <div class="scene-canopy"></div>
-  <div class="scene-chimney"><div class="chimney-smoke"><span></span></div></div>
-  <div class="scene-roof"></div>
-  <div class="scene-dormer"></div>
-  <div class="scene-house-body"></div>
-  <div class="scene-window scene-window--left"></div>
-  <div class="scene-window scene-window--right"></div>
-  <div class="scene-door"></div>
-  <div class="scene-lantern scene-lantern--left"></div>
-  <div class="scene-lantern scene-lantern--right"></div>
-  <div class="scene-vine"></div>
-  <div class="scene-porch"></div>
-  <div class="scene-flowerbox scene-flowerbox--left"></div>
-  <div class="scene-flowerbox scene-flowerbox--right"></div>
-  <div class="scene-steps"></div>
-  <div class="scene-garden">
-    <div class="scene-path"></div>
-    <div class="scene-flowers-l"></div>
-    <div class="scene-flowers-r"></div>
-    <div class="scene-lamp"></div>
-    <div class="scene-pot scene-pot--1"></div>
-    <div class="scene-pot scene-pot--2"></div>
-    <div class="scene-fence"></div>
-    <div class="scene-gate"></div>
-  </div>
-  <div class="scene-fireflies">
-    <div class="firefly"></div><div class="firefly"></div><div class="firefly"></div>
-    <div class="firefly"></div><div class="firefly"></div><div class="firefly"></div>
-  </div>
-</div>
+<div class="pip-scene" id="pip-scene" data-time="day"></div>
 <div class="pip-container">
-  <div class="house-spacer"></div>
   <div class="companion-wrap">
     <svg viewBox="0 0 64 64" class="companion-svg state-idle" id="pip-companion" xmlns="http://www.w3.org/2000/svg">
       <g class="body-group">
@@ -392,6 +360,9 @@ async function launchCompanion() {
     loadStreak();
     startStreak();
 
+    // Start garden wander (Pip roams the garden, background follows)
+    startWander();
+
     // Immediate greeting (before first VLM call)
     showGreeting();
 
@@ -994,9 +965,61 @@ function reactToTimeChange(from, to) {
   }
 }
 
+// ─── Wander System ────────────────────────────────────────────────────────
+// Pip wanders within the garden zone of the image. The background pans to
+// follow, so Pip is always shown against the correct part of the scene.
+// Garden bounds in the source image (as % of image dimensions):
+//   X: 5% to 95%  (full width minus fence edges)
+//   Y: 55% to 88% (below porch steps, above fence)
+
+const GARDEN_BOUNDS = { xMin: 15, xMax: 85, yMin: 58, yMax: 85 };
+let wanderTimer = null;
+let currentBgX = 50;
+let currentBgY = 80;
+
+function startWander() {
+  if (!pipWindow) return;
+  scheduleWander();
+}
+
+function scheduleWander() {
+  if (!pipWindow) return;
+  const delay = 6000 + Math.floor(Math.random() * 8000);
+  wanderTimer = pipWindow.setTimeout(() => {
+    wanderToRandomSpot();
+    scheduleWander();
+  }, delay);
+}
+
+function wanderToRandomSpot() {
+  if (!pipWindow) return;
+  const scene = pipWindow.document.getElementById('pip-scene');
+  const wrap = pipWindow.document.querySelector('.companion-wrap');
+  if (!scene || !wrap) return;
+
+  const targetX = GARDEN_BOUNDS.xMin + Math.random() * (GARDEN_BOUNDS.xMax - GARDEN_BOUNDS.xMin);
+  const targetY = GARDEN_BOUNDS.yMin + Math.random() * (GARDEN_BOUNDS.yMax - GARDEN_BOUNDS.yMin);
+
+  currentBgX = targetX;
+  currentBgY = targetY;
+  scene.style.backgroundPosition = `${targetX}% ${targetY}%`;
+
+  const pipOffsetX = (targetX - 50) * 0.4;
+  const pipOffsetY = (targetY - 70) * 0.3;
+  wrap.style.transform = `translate(${pipOffsetX}px, ${pipOffsetY}px)`;
+}
+
+function stopWander() {
+  if (wanderTimer && pipWindow) {
+    pipWindow.clearTimeout(wanderTimer);
+    wanderTimer = null;
+  }
+}
+
 // ─── Cleanup ───────────────────────────────────────────────────────────────
 
 function cleanup() {
+  stopWander();
   if (gazeChangeTimer && pipWindow) {
     pipWindow.clearTimeout(gazeChangeTimer);
     gazeChangeTimer = null;

static/style.css

@@ -325,626 +325,23 @@ body {
   image-rendering: pixelated;
 }
 
-/* ─── Cozy House Exterior (pure CSS pixel art, day/night) ─────────── */
+/* ─── Cozy House Exterior (image-based, day/night) ────────────────── */
 
 .pip-scene {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
-  --sky: #87ceeb;
-  --canopy: #2d6b2d;
-  --canopy-cherry: #e88cc8;
-  --roof: #b05a28;
-  --roof-dark: #8a4420;
-  --walls: #2a1a0d;
-  --walls-plank: #1f1408;
-  --window-glow: rgba(255, 180, 50, 0.7);
-  --window-glow-shadow: rgba(255, 180, 50, 0.5);
-  --lantern-glow: rgba(255, 200, 80, 0.4);
-  --porch: #7a5830;
-  --porch-dark: #5a3f20;
-  --grass: #4a8c3f;
-  --grass-dark: #3a7030;
-  --path: #c4a67a;
-  --path-dark: #a88c5e;
-  --flowers-l: #ff69b4;
-  --flowers-r: #ffaa33;
-  --fence: #6b4c2a;
-  --fence-dark: #5a3f20;
-  --lamp-glow: rgba(255, 220, 100, 0);
-  --smoke-color: rgba(180, 180, 180, 0.4);
-  --vine: #3a7a3a;
-  transition:
-    --sky 1.5s, --canopy 1.5s, --canopy-cherry 1.5s,
-    --roof 1.5s, --walls 1.5s, --grass 1.5s,
-    --path 1.5s, --fence 1.5s, --lamp-glow 1.5s,
-    --smoke-color 1.5s, --vine 1.5s;
+  background-image: url('/static/day_house.jpg');
+  background-size: 200% 200%;
+  background-position: 50% 80%;
+  background-repeat: no-repeat;
+  transition: background-position 1.5s ease-in-out;
+  image-rendering: pixelated;
 }
 
 .pip-scene[data-time="night"] {
-  --sky: #1a0f33;
-  --canopy: #1a2a4a;
-  --canopy-cherry: #6644aa;
-  --roof: #8a4420;
-  --roof-dark: #6a3318;
-  --walls: #1a0f08;
-  --walls-plank: #120a04;
-  --window-glow: rgba(255, 160, 40, 0.95);
-  --window-glow-shadow: rgba(255, 140, 30, 0.7);
-  --lantern-glow: rgba(255, 200, 80, 0.8);
-  --porch: #4a3318;
-  --porch-dark: #3a2510;
-  --grass: #1a3a1a;
-  --grass-dark: #122a12;
-  --path: #5a4a3a;
-  --path-dark: #4a3a2a;
-  --flowers-l: #4a2060;
-  --flowers-r: #3a3020;
-  --fence: #3a2818;
-  --fence-dark: #2a1a0d;
-  --lamp-glow: rgba(255, 220, 100, 0.35);
-  --smoke-color: rgba(80, 80, 120, 0.2);
-  --vine: #1a4a2a;
-}
-
-/* Sky / background fill */
-.scene-sky {
-  position: absolute;
-  inset: 0;
-  background: var(--grass);
-  transition: background 1.5s;
-}
-
-/* Dense tree canopy (top band, no sky visible) */
-.scene-canopy {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 9%;
-  background: var(--canopy);
-  transition: background 1.5s;
-}
-.scene-canopy::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50px;
-  height: 100%;
-  background: var(--canopy-cherry);
-  border-radius: 0 0 60% 0;
-  transition: background 1.5s;
-}
-.scene-canopy::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 45px;
-  height: 100%;
-  background: var(--canopy);
-  border-radius: 0 0 0 50%;
-  filter: brightness(0.85);
-  transition: background 1.5s;
-}
-
-/* Chimney */
-.scene-chimney {
-  position: absolute;
-  top: 4%;
-  left: 53%;
-  width: 7px;
-  height: 16px;
-  background: #7a7a7a;
-  border: 1px solid #5a5a5a;
-  z-index: 1;
-}
-.chimney-smoke {
-  position: absolute;
-  top: -4px;
-  left: 1px;
-}
-.chimney-smoke::before,
-.chimney-smoke::after,
-.chimney-smoke span {
-  content: '';
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--smoke-color);
-  animation: smoke 3s ease-out infinite;
-  transition: background 1.5s;
-}
-.chimney-smoke::after {
-  left: 2px;
-  animation-delay: 1s;
-}
-.chimney-smoke span {
-  display: block;
-  left: -1px;
-  animation-delay: 2s;
-}
-
-@keyframes smoke {
-  0% { transform: translateY(0) scale(1); opacity: 0.4; }
-  100% { transform: translateY(-15px) translateX(3px) scale(1.8); opacity: 0; }
-}
-
-/* Roof */
-.scene-roof {
-  position: absolute;
-  top: 9%;
-  left: 14%;
-  width: 72%;
-  height: 14%;
-  overflow: visible;
-}
-.scene-roof::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 0;
-  border-bottom: 40px solid var(--roof);
-  border-left: 79px solid transparent;
-  border-right: 79px solid transparent;
-  transition: border-bottom-color 1.5s;
-}
-.scene-roof::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 40px;
-  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.08) 3px 4px);
-  pointer-events: none;
-}
-
-/* Dormer / attic window */
-.scene-dormer {
-  position: absolute;
-  top: 12%;
-  left: 43%;
-  width: 14px;
-  height: 12px;
-  background: var(--roof-dark);
-  border-radius: 3px 3px 0 0;
-  transition: background 1.5s;
-}
-.scene-dormer::after {
-  content: '';
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 8px;
-  height: 6px;
-  background: var(--window-glow);
-  box-shadow: 0 0 4px var(--window-glow-shadow);
-  border-radius: 1px;
-  transition: background 1.5s, box-shadow 1.5s;
-}
-
-/* House face */
-.scene-house-body {
-  position: absolute;
-  top: 23%;
-  left: 16%;
-  width: 68%;
-  height: 12%;
-  background:
-    repeating-linear-gradient(0deg, var(--walls) 0 5px, var(--walls-plank) 5px 6px);
-  transition: background 1.5s;
-}
-
-/* Windows */
-.scene-window {
-  position: absolute;
-  width: 14px;
-  height: 11px;
-  background: var(--window-glow);
-  border: 2px solid #1a0f08;
-  box-shadow: inset 0 0 6px var(--window-glow-shadow), 0 0 6px var(--window-glow-shadow);
-  transition: background 1.5s, box-shadow 1.5s;
-}
-.scene-window--left {
-  top: 25%;
-  left: 22%;
-}
-.scene-window--right {
-  top: 25%;
-  left: 60%;
-}
-.scene-window::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  width: 1px;
-  height: 100%;
-  background: #1a0f08;
-}
-.scene-window::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: #1a0f08;
-}
-
-/* Front door */
-.scene-door {
-  position: absolute;
-  top: 26%;
-  left: 44%;
-  width: 11px;
-  height: 16px;
-  background: #1a0f08;
-  border-radius: 2px 2px 0 0;
-}
-.scene-door::after {
-  content: '';
-  position: absolute;
-  top: 7px;
-  right: 2px;
-  width: 2px;
-  height: 2px;
-  background: #c0a060;
-  border-radius: 50%;
-}
-
-/* Wall lanterns */
-.scene-lantern {
-  position: absolute;
-  width: 3px;
-  height: 5px;
-  background: #8a6a3a;
-}
-.scene-lantern::after {
-  content: '';
-  position: absolute;
-  top: -4px;
-  left: -5px;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  background: radial-gradient(circle, var(--lantern-glow) 0%, transparent 70%);
-  transition: background 1.5s;
-}
-.scene-lantern--left {
-  top: 24%;
-  left: 19%;
-}
-.scene-lantern--right {
-  top: 24%;
-  left: 66%;
-}
-
-/* Vine */
-.scene-vine {
-  position: absolute;
-  top: 15%;
-  left: 16%;
-  width: 3px;
-  height: 20%;
-  background: var(--vine);
-  border-radius: 1px;
-  transition: background 1.5s;
-}
-.scene-vine::before {
-  content: '';
-  position: absolute;
-  top: 4px;
-  left: -2px;
-  width: 7px;
-  height: 100%;
-  background:
-    radial-gradient(circle 2px at 1px 5px, var(--vine) 50%, transparent 50%),
-    radial-gradient(circle 2px at 5px 14px, var(--vine) 50%, transparent 50%),
-    radial-gradient(circle 2px at 2px 24px, var(--vine) 50%, transparent 50%),
-    radial-gradient(circle 2px at 6px 34px, var(--vine) 50%, transparent 50%);
-}
-
-/* Porch */
-.scene-porch {
-  position: absolute;
-  top: 35%;
-  left: 16%;
-  width: 68%;
-  height: 6%;
-  background: var(--porch);
-  border-top: 2px solid var(--porch-dark);
-  transition: background 1.5s, border-color 1.5s;
-}
-.scene-porch::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: repeating-linear-gradient(90deg, var(--porch-dark) 0 1px, transparent 1px 5px);
-  transition: background 1.5s;
-}
-
-/* Flower boxes on porch */
-.scene-flowerbox {
-  position: absolute;
-  top: 36%;
-  width: 12px;
-  height: 5px;
-  background: #5a4020;
-  border-radius: 1px;
-}
-.scene-flowerbox::after {
-  content: '';
-  position: absolute;
-  top: -3px;
-  left: 1px;
-  width: 10px;
-  height: 3px;
-  background:
-    radial-gradient(circle 2px at 2px 1px, #ff88aa 80%, transparent 80%),
-    radial-gradient(circle 2px at 6px 1px, #ffaacc 80%, transparent 80%),
-    radial-gradient(circle 2px at 9px 2px, #ff88aa 80%, transparent 80%);
-}
-.scene-flowerbox--left { left: 20%; }
-.scene-flowerbox--right { left: 62%; }
-
-/* Steps */
-.scene-steps {
-  position: absolute;
-  top: 41%;
-  left: 34%;
-  width: 32%;
-  height: 4%;
-}
-.scene-steps::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 2px;
-  right: 2px;
-  height: 33%;
-  background: #8a7a6a;
-}
-.scene-steps::after {
-  content: '';
-  position: absolute;
-  top: 33%;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background:
-    linear-gradient(to bottom,
-      #8a7a6a 0%, #8a7a6a 45%,
-      #9a8a7a 50%, #9a8a7a 100%);
-}
-
-/* Garden ground (from 45% to 82%) */
-.scene-garden {
-  position: absolute;
-  top: 45%;
-  left: 0;
-  right: 0;
-  bottom: 11%;
-  background: var(--grass);
-  transition: background 1.5s;
-}
-
-/* Cobblestone path */
-.scene-path {
-  position: absolute;
-  top: 0;
-  left: 36%;
-  width: 22%;
-  height: 90%;
-  background:
-    radial-gradient(ellipse 5px 4px at 30% 8%, var(--path) 80%, transparent 80%),
-    radial-gradient(ellipse 6px 4px at 60% 12%, var(--path-dark) 80%, transparent 80%),
-    radial-gradient(ellipse 5px 5px at 45% 20%, var(--path) 80%, transparent 80%),
-    radial-gradient(ellipse 6px 4px at 35% 28%, var(--path-dark) 80%, transparent 80%),
-    radial-gradient(ellipse 5px 5px at 55% 35%, var(--path) 80%, transparent 80%),
-    radial-gradient(ellipse 6px 4px at 40% 42%, var(--path) 80%, transparent 80%),
-    radial-gradient(ellipse 5px 4px at 60% 50%, var(--path-dark) 80%, transparent 80%),
-    radial-gradient(ellipse 6px 5px at 38% 58%, var(--path) 80%, transparent 80%),
-    radial-gradient(ellipse 5px 4px at 55% 65%, var(--path-dark) 80%, transparent 80%),
-    radial-gradient(ellipse 6px 5px at 42% 72%, var(--path) 80%, transparent 80%),
-    radial-gradient(ellipse 5px 4px at 58% 80%, var(--path-dark) 80%, transparent 80%),
-    radial-gradient(ellipse 6px 5px at 45% 88%, var(--path) 80%, transparent 80%);
-  transition: background 1.5s;
-}
-
-/* Left flower cluster (box-shadow trick) */
-.scene-flowers-l {
-  position: absolute;
-  top: 10%;
-  left: 10%;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--flowers-l);
-  box-shadow:
-    8px 4px 0 0 #ff88cc,
-    16px -2px 0 0 #aa44ff,
-    4px 14px 0 0 #ffaacc,
-    20px 12px 0 0 #ff69b4,
-    12px 22px 0 0 #cc55ee,
-    2px 30px 0 0 #ff88cc,
-    18px 32px 0 0 #aa44ff,
-    8px 40px 0 0 #ffaacc,
-    22px 44px 0 0 #ff69b4,
-    14px 52px 0 0 #cc55ee,
-    4px 58px 0 0 #ff88cc,
-    20px 60px 0 0 #aa44ff;
-  transition: background 1.5s, box-shadow 1.5s;
-}
-
-/* Right flower cluster */
-.scene-flowers-r {
-  position: absolute;
-  top: 10%;
-  right: 10%;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  background: var(--flowers-r);
-  box-shadow:
-    -8px 6px 0 0 #ffcc44,
-    -16px 2px 0 0 #4488ff,
-    -4px 16px 0 0 #ffaa33,
-    -20px 14px 0 0 #44aaff,
-    -12px 24px 0 0 #ffcc44,
-    -2px 32px 0 0 #ff8844,
-    -18px 34px 0 0 #4488ff,
-    -8px 42px 0 0 #ffaa33,
-    -22px 48px 0 0 #ffcc44,
-    -14px 54px 0 0 #44aaff,
-    -4px 60px 0 0 #ff8844;
-  transition: background 1.5s, box-shadow 1.5s;
-}
-
-/* Garden lamp */
-.scene-lamp {
-  position: absolute;
-  top: 65%;
-  left: 48%;
-  width: 3px;
-  height: 20px;
-  background: #5a4020;
-}
-.scene-lamp::before {
-  content: '';
-  position: absolute;
-  top: -3px;
-  left: -3px;
-  width: 9px;
-  height: 5px;
-  background: #8a7a5a;
-  border-radius: 2px 2px 0 0;
-}
-.scene-lamp::after {
-  content: '';
-  position: absolute;
-  bottom: -8px;
-  left: -10px;
-  width: 24px;
-  height: 14px;
-  border-radius: 50%;
-  background: radial-gradient(circle, var(--lamp-glow) 0%, transparent 70%);
-  transition: background 1.5s;
-}
-
-/* Potted plants */
-.scene-pot {
-  position: absolute;
-  width: 7px;
-  height: 6px;
-  background: #6a4a2a;
-  border-radius: 0 0 1px 1px;
-}
-.scene-pot::before {
-  content: '';
-  position: absolute;
-  top: -5px;
-  left: -1px;
-  width: 9px;
-  height: 7px;
-  background: #3a7a3a;
-  border-radius: 50%;
-}
-.scene-pot--1 { top: 8%; left: 28%; }
-.scene-pot--2 { top: 22%; left: 64%; }
-
-/* Fence */
-.scene-fence {
-  position: absolute;
-  bottom: 0;
-  left: 5%;
-  width: 90%;
-  height: 18%;
-  background:
-    repeating-linear-gradient(
-      90deg,
-      var(--fence) 0 3px,
-      var(--fence-dark) 3px 4px,
-      transparent 4px 8px
-    );
-  border-top: 2px solid var(--fence-dark);
-  transition: background 1.5s, border-color 1.5s;
-}
-.scene-fence::before {
-  content: '';
-  position: absolute;
-  top: 35%;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: var(--fence-dark);
-  transition: background 1.5s;
-}
-
-/* Gate opening */
-.scene-gate {
-  position: absolute;
-  bottom: 0;
-  left: 40%;
-  width: 20%;
-  height: 18%;
-  background: var(--grass);
-  border-top: 2px solid var(--fence-dark);
-  border-radius: 6px 6px 0 0;
-  transition: background 1.5s, border-color 1.5s;
-}
-
-/* Fireflies (night only) */
-.scene-fireflies {
-  position: absolute;
-  top: 48%;
-  left: 0;
-  right: 0;
-  bottom: 20%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 1.5s;
-}
-.pip-scene[data-time="night"] .scene-fireflies { opacity: 1; }
-
-.firefly {
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: #ffe066;
-  animation: firefly 3s ease-in-out infinite;
-}
-.firefly:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
-.firefly:nth-child(2) { top: 40%; left: 75%; animation-delay: 0.7s; }
-.firefly:nth-child(3) { top: 60%; left: 30%; animation-delay: 1.4s; }
-.firefly:nth-child(4) { top: 30%; left: 60%; animation-delay: 2.1s; }
-.firefly:nth-child(5) { top: 70%; left: 50%; animation-delay: 0.4s; }
-.firefly:nth-child(6) { top: 50%; left: 85%; animation-delay: 1.8s; }
-
-@keyframes firefly {
-  0%, 100% { opacity: 0; transform: translate(0, 0); }
-  20% { opacity: 1; }
-  50% { opacity: 0.8; transform: translate(5px, -4px); }
-  80% { opacity: 0.2; transform: translate(-2px, -6px); }
-}
-
-/* Night glow pulse on windows */
-.pip-scene[data-time="night"] .scene-window {
-  animation: window-pulse 4s ease-in-out infinite;
-}
-@keyframes window-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.8; }
+  background-image: url('/static/night_house.jpg');
 }
 
 .pip-container {
@@ -953,30 +350,27 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: flex-end;
   height: 100%;
   padding: 0 0.5rem 0.4rem;
 }
 
-.house-spacer {
-  flex: 0 0 45%;
-  width: 100%;
-  pointer-events: none;
-}
-
 .companion-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  transition: transform 1.5s ease-in-out;
 }
 
 .speech-area {
-  flex: 1;
+  flex: 0 0 auto;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 0.25rem;
   min-height: 48px;
+  max-height: 60px;
 }
 
 /* ─── SVG base styles ─────────────────────────────────────────────── */