v0.7.0

- The logo comes alive: it winks, blinks, looks around, dozes off, squints and even puts on glasses
- The winking head becomes the logo everywhere, at every size, with an HD version for releases
- Community apps get real store cards: emoji, description, tags and thumbnail
- Update settings fit on one line, with a clear green 'Everything is up to date'
- The mic waveform moves right on page load and stays flat in a silent room
- The dashboard remembers your robot's address and reconnects faster

Source: d2ec4fb35b96f37b4adf7b89702a49857a877201
Auto-sync: reachy_web

VERSION

@@ -1 +1 @@
-0.6.0
+0.7.0

changelog.json

@@ -1,4 +1,74 @@
 [
+  {
+    "version": "0.7.0",
+    "date": "2026-07-17",
+    "changes": {
+      "en": [
+        "The logo comes alive: it winks, blinks, looks around, dozes off, squints and even puts on glasses",
+        "The winking head becomes the logo everywhere, at every size, with an HD version for releases",
+        "Community apps get real store cards: emoji, description, tags and thumbnail",
+        "Update settings fit on one line, with a clear green 'Everything is up to date'",
+        "The mic waveform moves right on page load and stays flat in a silent room",
+        "The dashboard remembers your robot's address and reconnects faster"
+      ],
+      "fr": [
+        "Le logo prend vie : clin d'œil, clignements, regards, somnolence, il louche et met même ses lunettes",
+        "La tête qui cligne devient le logo partout, à toutes les tailles, avec une version HD pour les releases",
+        "Les apps communautaires ont de vraies fiches : emoji, description, tags et vignette",
+        "Les réglages de mise à jour tiennent sur une ligne, avec un vrai 'Tout est à jour' en vert",
+        "L'onde du micro bouge dès le chargement de la page et reste plate dans une pièce silencieuse",
+        "Le dashboard retient l'adresse du robot et se reconnecte plus vite"
+      ],
+      "es": [
+        "El logo cobra vida: guiña, parpadea, mira alrededor, se adormece, bizquea y hasta se pone gafas",
+        "La cabeza que guiña es ahora el logo en todas partes y en todos los tamaños, con versión HD para releases",
+        "Las apps de la comunidad tienen fichas completas: emoji, descripción, etiquetas y miniatura",
+        "Los ajustes de actualización caben en una línea, con un claro 'Todo está actualizado' en verde",
+        "La onda del micrófono se mueve al cargar la página y queda plana en una sala en silencio",
+        "El panel recuerda la dirección del robot y se reconecta más rápido"
+      ],
+      "de": [
+        "Das Logo wird lebendig: es zwinkert, blinzelt, schaut sich um, döst ein, schielt und setzt sogar eine Brille auf",
+        "Der zwinkernde Kopf ist jetzt überall das Logo, in jeder Größe, mit einer HD-Version für Releases",
+        "Community-Apps bekommen echte Karten: Emoji, Beschreibung, Tags und Vorschaubild",
+        "Die Update-Einstellungen passen in eine Zeile, mit einem klaren grünen 'Alles ist aktuell'",
+        "Die Mikrofon-Welle bewegt sich direkt beim Laden und bleibt in einem stillen Raum flach",
+        "Das Dashboard merkt sich die Adresse des Roboters und verbindet sich schneller"
+      ],
+      "it": [
+        "Il logo prende vita: strizza l'occhio, sbatte le palpebre, si guarda intorno, si assopisce, incrocia gli occhi e mette persino gli occhiali",
+        "La testa che strizza l'occhio è ora il logo ovunque, in ogni dimensione, con una versione HD per le release",
+        "Le app della community hanno schede complete: emoji, descrizione, tag e miniatura",
+        "Le impostazioni di aggiornamento stanno su una riga, con un chiaro 'Tutto è aggiornato' in verde",
+        "L'onda del microfono si muove già al caricamento e resta piatta in una stanza silenziosa",
+        "La dashboard ricorda l'indirizzo del robot e si riconnette più in fretta"
+      ],
+      "pt": [
+        "O logo ganha vida: pisca o olho, pestaneja, olha em volta, cochila, fica vesgo e até põe óculos",
+        "A cabeça que pisca é agora o logo em todo lado e em todos os tamanhos, com versão HD para releases",
+        "As apps da comunidade têm fichas completas: emoji, descrição, tags e miniatura",
+        "As definições de atualização cabem numa linha, com um claro 'Tudo está atualizado' em verde",
+        "A onda do microfone mexe logo ao carregar a página e fica plana numa sala em silêncio",
+        "O painel lembra o endereço do robô e reconecta-se mais depressa"
+      ],
+      "ja": [
+        "ロゴが生きています。ウインク、まばたき、よそ見、居眠り、寄り目、メガネまでかけます",
+        "ウインクする顔があらゆる場所・あらゆるサイズでロゴになり、リリース用の HD 版も用意",
+        "コミュニティアプリに絵文字・説明・タグ・サムネイル付きの完全なカード",
+        "アップデート設定を 1 行に整理し、緑の「すべて最新です」を表示",
+        "マイク波形はページ読み込み直後から動き、静かな部屋では平らなまま",
+        "ダッシュボードがロボットのアドレスを記憶し、再接続が速くなりました"
+      ],
+      "ar": [
+        "الشعار ينبض بالحياة: يغمز ويرمش وينظر حوله ويغفو ويحوّل عينيه بل ويرتدي نظارة",
+        "الرأس الغامز أصبح الشعار في كل مكان وبكل الأحجام، مع نسخة HD للإصدارات",
+        "تطبيقات المجتمع صارت لها بطاقات كاملة: إيموجي ووصف ووسوم وصورة مصغّرة",
+        "إعدادات التحديث في سطر واحد، مع عبارة خضراء واضحة: كل شيء محدّث",
+        "موجة الميكروفون تتحرك فور تحميل الصفحة وتبقى مستقيمة في غرفة هادئة",
+        "لوحة التحكم تتذكر عنوان الروبوت وتعيد الاتصال أسرع"
+      ]
+    }
+  },
   {
     "version": "0.6.0",
     "date": "2026-07-16",

index.html

@@ -17,13 +17,13 @@
 	<meta property="og:title" content="Reachy Web: the dashboard is back">
 	<meta property="og:description" content="Control your Reachy Mini from any browser again. The removed web dashboard, back as an installable app.">
 	<meta property="og:url" content="https://domotick-reachy-web.static.hf.space/">
-	<meta property="og:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png">
+	<meta property="og:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=2">
 	<meta property="og:image:width" content="512">
 	<meta property="og:image:height" content="512">
 	<meta name="twitter:card" content="summary">
 	<meta name="twitter:title" content="Reachy Web: the dashboard is back">
 	<meta name="twitter:description" content="Control your Reachy Mini from any browser again. The removed web dashboard, back as an installable app.">
-	<meta name="twitter:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png">
+	<meta name="twitter:image" content="https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=2">
 	<script type="application/ld+json">
 	{
 		"@context": "https://schema.org",
@@ -33,7 +33,7 @@
 		"operatingSystem": "Any (web browser)",
 		"description": "The Reachy Mini web dashboard, back as an installable app. Control your Reachy Mini Lite or Wireless from any browser: live camera, 3D digital twin, moves, app store, volume, no desktop app needed.",
 		"url": "https://domotick-reachy-web.static.hf.space/",
-		"image": "https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png",
+		"image": "https://domotick-reachy-web.static.hf.space/reachy_web/static/assets/og.png?v=2",
 		"author": { "@type": "Organization", "name": "Domotick", "url": "https://huggingface.co/Domotick" },
 		"keywords": "Reachy Mini, Reachy Mini Lite, Reachy Mini Wireless, dashboard, web dashboard, 3D digital twin, Reachy Mirror, Reachy Eyes, Domotick, Pollen Robotics",
 		"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
@@ -49,7 +49,7 @@
 			<div class="flex items-center justify-center gap-2.5 whitespace-nowrap font-display text-lg font-semibold md:justify-start">
 				<img src="reachy_web/static/assets/logo.png" alt="Reachy Web logo" class="h-9 w-9 rounded-xl">
 				<span>Reachy Web</span>
-				<span class="version-pill" id="version-pill">v0.6.0</span>
+				<span class="version-pill" id="version-pill">v0.7.0</span>
 			</div>
 			<div class="flex flex-wrap items-center justify-center gap-3.5 md:justify-end">
 				<div class="flex flex-wrap items-center gap-1.5" id="palettes" title="Palette"></div>

pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "reachy_web"
-version = "0.6.0"
+version = "0.7.0"
 description = "The web dashboard for your Reachy Mini, in any browser"
 readme = "README.md"
 requires-python = ">=3.10"

reachy_web/static/css/app.css

@@ -198,6 +198,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -564,8 +567,8 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
-  .justify-self-start {
-    justify-self: flex-start;
+  .justify-self-end {
+    justify-self: flex-end;
   }
   .truncate {
     overflow: hidden;
@@ -852,6 +855,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .font-mono {
     font-family: var(--font-mono);
   }
@@ -1695,6 +1701,9 @@
 :root[data-palette][data-theme=light] body {
   background: radial-gradient(1200px 600px at 50% -10%, #fff, var(--bg)) fixed;
 }
+.hidden {
+  display: none !important;
+}
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -1744,10 +1753,11 @@ body {
   flex-wrap: wrap;
 }
 .palettes {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(7, auto);
+  justify-items: center;
   align-items: center;
   gap: 6px;
-  flex-wrap: wrap;
 }
 .pdot {
   width: 16px;

reachy_web/static/css/logo.css

@@ -0,0 +1,155 @@
+/* Topbar logo animations.
+   The SVG is INLINE in base.html (not an <img>: that runs in the browser's secure
+   static mode, no scripts, so its timing could only ever be a fixed CSS loop).
+   logo_anim.js adds one v-* class at a time, waits out its duration, removes it —
+   so every keyframe set here runs ONCE and lands back on the resting pose.
+   Y axis only on the eyes (never X); each antenna pivots where it leaves the head. */
+
+.lg-ant-l { transform-box: fill-box; transform-origin: 100% 100%; }
+.lg-ant-r { transform-box: fill-box; transform-origin: 0% 100%; }
+.lg-eye, .lg-wink { transform-box: fill-box; transform-origin: center; }
+.lg-wink { opacity: 0; }   /* the wink curve only shows while an eye is shut */
+
+/* ===== the antennas never go still =====
+   A permanent, tiny breath on the PARENT group of each antenna. It has to be the
+   parent: a move (lg-ant-*) animates `transform` too, and two animations on one
+   element fight — nested, the two rotations simply compose. Both pivot on the
+   same point (where the antenna leaves the head), and their periods share no
+   factor (7.3s / 11.9s), so the pair never falls into a metronome beat. */
+.lg-sway-l {
+  transform-box: fill-box; transform-origin: 100% 100%;
+  animation: lgSwayL 7.3s ease-in-out infinite;
+}
+.lg-sway-r {
+  transform-box: fill-box; transform-origin: 0% 100%;
+  animation: lgSwayR 11.9s ease-in-out infinite;
+}
+@keyframes lgSwayL { 0%, 100% { transform: rotate(-5deg) } 50% { transform: rotate(5deg) } }
+@keyframes lgSwayR { 0%, 100% { transform: rotate(4deg) } 50% { transform: rotate(-4deg) } }
+
+/* ================= 1. WINK — the signature (1.1s) ================= */
+.v-wink .lg-eye-r { animation: lgWinkEye 1.1s ease-in-out 1 both; }
+.v-wink .lg-wink  { animation: lgWinkCurve 1.1s ease-in-out 1 both; }
+.v-wink .lg-ant-r { animation: lgWinkAnt 1.1s ease-in-out 1 both; }
+@keyframes lgWinkEye {
+  0%   { transform: scaleY(1);    opacity: 1 }
+  9%   { transform: scaleY(.12);  opacity: 0 }   /* snaps shut, 100ms */
+  64%  { transform: scaleY(.12);  opacity: 0 }   /* held 600ms as the curve */
+  77%  { transform: scaleY(1.25); opacity: 1 }   /* springs past rest */
+  86%  { transform: scaleY(.8);   opacity: 1 }   /* bounces under it */
+  100% { transform: scaleY(1);    opacity: 1 }   /* settles */
+}
+@keyframes lgWinkCurve { 0%, 8% { opacity: 0 } 9%, 64% { opacity: 1 } 70%, 100% { opacity: 0 } }
+@keyframes lgWinkAnt { 0% { transform: rotate(0) } 20% { transform: rotate(-6deg) } 60% { transform: rotate(3deg) } 100% { transform: rotate(0) } }
+
+/* ================= 2. LOOK — follows someone across the room (2.6s) ================= */
+.v-look .lg-eye-l, .v-look .lg-eye-r { animation: lgLookEye 2.6s ease-in-out 1 both; }
+.v-look .lg-ant-l { animation: lgLookAntL 2.6s ease-in-out 1 both; }
+.v-look .lg-ant-r { animation: lgLookAntR 2.6s ease-in-out 1 both; }
+@keyframes lgLookEye {
+  0%, 8%    { transform: translateX(0) }
+  24%, 38%  { transform: translateX(3.2px) }
+  56%, 72%  { transform: translateX(-3.2px) }
+  92%, 100% { transform: translateX(0) }
+}
+@keyframes lgLookAntL { 0%, 20% { transform: rotate(0) } 40% { transform: rotate(-5deg) } 70% { transform: rotate(2deg) } 100% { transform: rotate(0) } }
+@keyframes lgLookAntR { 0%, 30% { transform: rotate(0) } 55% { transform: rotate(5deg) } 80% { transform: rotate(-2deg) } 100% { transform: rotate(0) } }
+
+/* ================= 3. DOUBLE BLINK — both eyes, twice (0.9s) ================= */
+.v-blink .lg-eye-l, .v-blink .lg-eye-r { animation: lgBlinkEye .9s ease-in-out 1 both; }
+.v-blink .lg-ant-l { animation: lgBlinkAnt .9s ease-in-out 1 both; }
+@keyframes lgBlinkEye {
+  0%   { transform: scaleY(1) }
+  12%  { transform: scaleY(.08) }
+  24%  { transform: scaleY(1) }
+  40%  { transform: scaleY(.08) }
+  55%  { transform: scaleY(1.15) }
+  72%, 100% { transform: scaleY(1) }
+}
+@keyframes lgBlinkAnt { 0% { transform: rotate(0) } 30% { transform: rotate(-4deg) } 60% { transform: rotate(3deg) } 100% { transform: rotate(0) } }
+
+/* ================= 5. SLEEPY — lids droop, then a startle (2.4s) ================= */
+.v-sleepy .lg-eye-l, .v-sleepy .lg-eye-r { animation: lgSleepEye 2.4s ease-in 1 both; }
+.v-sleepy .lg-ant-l { animation: lgSleepAntL 2.4s ease-in-out 1 both; }
+.v-sleepy .lg-ant-r { animation: lgSleepAntR 2.4s ease-in-out 1 both; }
+@keyframes lgSleepEye {
+  0%   { transform: scaleY(1) }
+  45%  { transform: scaleY(.45) }    /* the lids slide down… */
+  62%  { transform: scaleY(.1) }
+  68%  { transform: scaleY(1.3) }    /* …startle! */
+  76%  { transform: scaleY(.9) }
+  86%, 100% { transform: scaleY(1) }
+}
+@keyframes lgSleepAntL { 0% { transform: rotate(0) } 55% { transform: rotate(9deg) } 68% { transform: rotate(-6deg) } 100% { transform: rotate(0) } }
+@keyframes lgSleepAntR { 0% { transform: rotate(0) } 55% { transform: rotate(-9deg) } 68% { transform: rotate(6deg) } 100% { transform: rotate(0) } }
+
+/* ================= 6. EXCITED — antennas buzz, eyes go wide (1.8s) ================= */
+.v-excited .lg-ant-l { animation: lgExAntL 1.8s ease-in-out 1 both; }
+.v-excited .lg-ant-r { animation: lgExAntR 1.8s ease-in-out 1 both; }
+.v-excited .lg-eye-l, .v-excited .lg-eye-r { animation: lgExEye 1.8s ease-in-out 1 both; }
+@keyframes lgExAntL {
+  0% { transform: rotate(0) }
+  8% { transform: rotate(-7deg) }  16% { transform: rotate(7deg) }
+  24% { transform: rotate(-6deg) } 32% { transform: rotate(6deg) }
+  40% { transform: rotate(-5deg) } 48% { transform: rotate(5deg) }
+  56% { transform: rotate(-4deg) } 64% { transform: rotate(4deg) }
+  72% { transform: rotate(-2deg) } 80% { transform: rotate(2deg) }
+  90%, 100% { transform: rotate(0) }
+}
+@keyframes lgExAntR {
+  0% { transform: rotate(0) }
+  8% { transform: rotate(7deg) }   16% { transform: rotate(-7deg) }
+  24% { transform: rotate(6deg) }  32% { transform: rotate(-6deg) }
+  40% { transform: rotate(5deg) }  48% { transform: rotate(-5deg) }
+  56% { transform: rotate(4deg) }  64% { transform: rotate(-4deg) }
+  72% { transform: rotate(2deg) }  80% { transform: rotate(-2deg) }
+  90%, 100% { transform: rotate(0) }
+}
+@keyframes lgExEye { 0% { transform: scale(1) } 18% { transform: scale(1.28) } 70% { transform: scale(1.28) } 100% { transform: scale(1) } }
+
+/* ================= 9. BOOT — the eyes flicker on, CRT style (1.6s) ================= */
+.v-boot .lg-eye-l { animation: lgBootL 1.6s steps(1) 1 both; }
+.v-boot .lg-eye-r { animation: lgBootR 1.6s steps(1) 1 both; }
+.v-boot .lg-ant-l { animation: lgBootAnt 1.6s ease-out 1 both; }
+@keyframes lgBootL {
+  0%, 10% { opacity: 0 }
+  14% { opacity: 1 } 18% { opacity: 0 } 24% { opacity: 1 } 28% { opacity: 0 }
+  34%, 100% { opacity: 1 }
+}
+@keyframes lgBootR {
+  0%, 22% { opacity: 0 }
+  26% { opacity: 1 } 30% { opacity: 0 } 38% { opacity: 1 } 42% { opacity: 0 }
+  48%, 100% { opacity: 1 }
+}
+@keyframes lgBootAnt { 0%, 40% { transform: rotate(0) } 52% { transform: rotate(-11deg) } 70% { transform: rotate(4deg) } 100% { transform: rotate(0) } }
+
+@media (prefers-reduced-motion: reduce) {
+  .topbar-logo * { animation: none !important; }
+}
+
+/* ================= 10. SQUINT — goes cross-eyed a moment (2s) ================= */
+.v-squint .lg-eye-l { animation: lgSquintL 2s ease-in-out 1 both; }
+.v-squint .lg-eye-r { animation: lgSquintR 2s ease-in-out 1 both; }
+@keyframes lgSquintL {
+  0%, 8%    { transform: translateX(0) }
+  20%, 72%  { transform: translateX(4.5px) }   /* both eyes dive toward the nose */
+  88%, 100% { transform: translateX(0) }
+}
+@keyframes lgSquintR {
+  0%, 8%    { transform: translateX(0) }
+  20%, 72%  { transform: translateX(-4.5px) }
+  88%, 100% { transform: translateX(0) }
+}
+
+/* ================= 11. GLASSES — puts its glasses on (2.8s) ================= */
+/* the .lg-glasses group sits in the SVG, invisible at rest; the move drops it
+   onto the eyes with a tiny overshoot, wears it a moment, lifts it away */
+.lg-glasses { transform-box: fill-box; transform-origin: center; opacity: 0; }
+.v-glasses .lg-glasses { animation: lgGlasses 2.8s ease-in-out 1 both; }
+@keyframes lgGlasses {
+  0%        { opacity: 0; transform: translateY(-28px) }
+  10%       { opacity: 1; transform: translateY(2.5px) }   /* lands, slight overshoot */
+  16%       { transform: translateY(0) }
+  72%       { opacity: 1; transform: translateY(0) }       /* worn ~1.6s */
+  86%, 100% { opacity: 0; transform: translateY(-28px) }   /* lifted off */
+}

reachy_web/static/js/locales.js

@@ -276,7 +276,7 @@ window.LOCALES = {
     "update.ref_placeholder": "e.g. v1.2.7 or develop",
     "update.start": "Update",
     "update.title": "Update",
-    "update.up_to_date": "Up to date.",
+    "update.up_to_date": "Everything is up to date",
     "update.updating": "Updating...",
     "update.version_unknown": "Version unknown",
     "volume.microphone": "Microphone level",
@@ -678,7 +678,7 @@ window.LOCALES = {
     "update.ref_placeholder": "ex. v1.2.7 ou develop",
     "update.start": "Mettre à jour",
     "update.title": "Mise à jour",
-    "update.up_to_date": "À jour.",
+    "update.up_to_date": "Tout est à jour",
     "update.updating": "Mise à jour...",
     "update.version_unknown": "Version inconnue",
     "volume.microphone": "Niveau du micro",
@@ -1080,7 +1080,7 @@ window.LOCALES = {
     "update.ref_placeholder": "p. ej. v1.2.7 o develop",
     "update.start": "Actualizar",
     "update.title": "Actualización",
-    "update.up_to_date": "Actualizado.",
+    "update.up_to_date": "Todo está actualizado",
     "update.updating": "Actualizando...",
     "update.version_unknown": "Versión desconocida",
     "volume.microphone": "Nivel del micrófono",
@@ -1482,7 +1482,7 @@ window.LOCALES = {
     "update.ref_placeholder": "z. B. v1.2.7 oder develop",
     "update.start": "Aktualisieren",
     "update.title": "Update",
-    "update.up_to_date": "Auf dem neuesten Stand.",
+    "update.up_to_date": "Alles ist aktuell",
     "update.updating": "Aktualisiere…",
     "update.version_unknown": "Version unbekannt",
     "volume.microphone": "Mikrofonpegel",
@@ -1884,7 +1884,7 @@ window.LOCALES = {
     "update.ref_placeholder": "es. v1.2.7 o develop",
     "update.start": "Aggiorna",
     "update.title": "Aggiornamento",
-    "update.up_to_date": "Aggiornato.",
+    "update.up_to_date": "Tutto è aggiornato",
     "update.updating": "Aggiornamento...",
     "update.version_unknown": "Versione sconosciuta",
     "volume.microphone": "Livello del microfono",
@@ -2286,7 +2286,7 @@ window.LOCALES = {
     "update.ref_placeholder": "ex.: v1.2.7 ou develop",
     "update.start": "Atualizar",
     "update.title": "Atualização",
-    "update.up_to_date": "Atualizado.",
+    "update.up_to_date": "Tudo está atualizado",
     "update.updating": "A atualizar...",
     "update.version_unknown": "Versão desconhecida",
     "volume.microphone": "Nível do microfone",
@@ -2688,7 +2688,7 @@ window.LOCALES = {
     "update.ref_placeholder": "例: v1.2.7 または develop",
     "update.start": "アップデート",
     "update.title": "アップデート",
-    "update.up_to_date": "最新の状態です。",
+    "update.up_to_date": "すべて最新です",
     "update.updating": "更新中...",
     "update.version_unknown": "バージョン不明",
     "volume.microphone": "マイクレベル",
@@ -3090,7 +3090,7 @@ window.LOCALES = {
     "update.ref_placeholder": "مثلاً v1.2.7 أو develop",
     "update.start": "تحديث",
     "update.title": "تحديث",
-    "update.up_to_date": "محدّث.",
+    "update.up_to_date": "كل شيء محدّث",
     "update.updating": "جارٍ التحديث...",
     "update.version_unknown": "الإصدار غير معروف",
     "volume.microphone": "مستوى الميكروفون",

reachy_web/static/js/logo_anim.js

@@ -0,0 +1,64 @@
+// The topbar logo, alive.
+//
+// WHY the SVG is inline in base.html rather than <img src="logo.svg">: an SVG
+// loaded through <img> runs in the browser's secure static mode — scripts never
+// execute — so its timing could only ever be a fixed CSS loop, and every visit
+// would replay the exact same beat. Inline, we pick the next move here, at random.
+//
+// One move at a time: add its v-* class, let the (one-shot) CSS play out, remove
+// the class, wait a random pause, pick again. The WINK opens the show on load and
+// keeps the heaviest weight afterwards — it is the logo's signature; the rest is
+// seasoning that should surprise, not compete.
+const logoAnim = {
+  // w = how often a move comes up (relative). The wink stays the most frequent
+  // single move (~1 round in 3) without drowning the others out. It is played at
+  // load regardless of weight — see init().
+  MOVES: [
+    { cls: 'v-wink',    ms: 1100, w: 5 },
+    { cls: 'v-look',    ms: 2600, w: 3 },
+    { cls: 'v-blink',   ms: 900,  w: 3 },
+    { cls: 'v-sleepy',  ms: 2400, w: 2 },
+    { cls: 'v-squint',  ms: 2000, w: 2 },
+    { cls: 'v-excited', ms: 1800, w: 1 },
+    { cls: 'v-boot',    ms: 1600, w: 1 },
+    { cls: 'v-glasses', ms: 2800, w: 1 },
+  ],
+  PAUSE_MIN: 4000,
+  PAUSE_MAX: 11000,
+
+  el: null,
+  timer: null,
+
+  init: () => {
+    logoAnim.el = document.querySelector('.topbar-logo');
+    if (!logoAnim.el) return;
+    // the whole point of the animation is delight; someone who asked the OS for
+    // less motion is not asking for delight
+    if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    logoAnim.play(logoAnim.MOVES[0]);   // the wink opens the show, always
+  },
+
+  // weighted pick: walk the moves subtracting weights until the dart lands
+  pick: () => {
+    const total = logoAnim.MOVES.reduce((s, m) => s + m.w, 0);
+    let r = Math.random() * total;
+    for (const m of logoAnim.MOVES) {
+      if ((r -= m.w) < 0) return m;
+    }
+    return logoAnim.MOVES[0];
+  },
+
+  play: (move) => {
+    const el = logoAnim.el;
+    if (!el) return;
+    el.classList.add(move.cls);
+    clearTimeout(logoAnim.timer);
+    logoAnim.timer = setTimeout(() => {
+      el.classList.remove(move.cls);          // back to the resting pose
+      const pause = logoAnim.PAUSE_MIN + Math.random() * (logoAnim.PAUSE_MAX - logoAnim.PAUSE_MIN);
+      logoAnim.timer = setTimeout(() => logoAnim.play(logoAnim.pick()), pause);
+    }, move.ms);
+  },
+};
+
+document.addEventListener('DOMContentLoaded', logoAnim.init);

reachy_web/static/js/skins.js

@@ -301,24 +301,34 @@ const skins = {
     spiderman: (c, p) => {
       const ink = p.line || '#0a0a0a', white = p.white || '#f2f2f0';
       skins.paint.spiderWeb(c, p);   // red suit + black web
-      const eye = (X, m) => {
-        // shrunk (esp. vertically) so the panel covers the lens but does NOT spill
-        // below the head onto the body
-        c.save(); c.translate(X, 96); c.scale(m * 1.0, 0.56);
+      // The mask's eye panel, drawn the way the suit actually reads: a POINT at the
+      // inner corner (towards the nose, sitting low), sweeping up and out over the top
+      // to a wide ROUNDED outer end that rides high, then back along the bottom. Thick
+      // black border, white fill, and the thin inner outline the mask always has.
+      //
+      // Reachy's two lenses are NOT the same size (88 px and 66 px across, see the
+      // landmarks), so each panel is scaled to its own lens. Drawn UNSQUASHED (uniform
+      // scale) so the border stays even, and centred at y=88 with a ±55 reach, which
+      // keeps the whole panel on the head (the body starts around y=150).
+      const eye = (X, m, size) => {
+        c.save();
+        c.translate(X, 88);
+        c.scale(m * size, size);
         const outline = (k) => {
           c.beginPath();
-          c.moveTo(52 * k, 30 * k);
-          c.bezierCurveTo(20 * k, -63 * k, -29 * k, -90 * k, -47 * k, -48 * k);
-          c.bezierCurveTo(-65 * k, -6 * k, -56 * k, 54 * k, -29 * k, 75 * k);
-          c.bezierCurveTo(-5 * k, 93 * k, 32 * k, 69 * k, 52 * k, 30 * k);
+          c.moveTo(56 * k, 24 * k);                                        // inner point, low, at the nose
+          c.bezierCurveTo(24 * k, -38 * k, -26 * k, -54 * k, -46 * k, -28 * k);  // up and out over the top
+          c.bezierCurveTo(-62 * k, -4 * k, -54 * k, 32 * k, -28 * k, 46 * k);    // the wide rounded outer end
+          c.bezierCurveTo(-4 * k, 56 * k, 34 * k, 44 * k, 56 * k, 24 * k);       // back along the bottom
           c.closePath();
         };
-        outline(1); c.lineJoin = 'round'; c.lineWidth = 15; c.strokeStyle = ink; c.stroke();
+        outline(1); c.lineJoin = 'round'; c.lineWidth = 13; c.strokeStyle = ink; c.stroke();
         c.fillStyle = white; c.fill();
-        outline(0.76); c.lineWidth = 5; c.strokeStyle = ink; c.stroke();
+        outline(0.72); c.lineWidth = 4; c.strokeStyle = ink; c.stroke();
         c.restore();
       };
-      eye(185, 1); eye(327, -1);
+      eye(185, 1, 1.0);     // the BIG lens (88 px across)
+      eye(327, -1, 0.78);   // the smaller lens (66 px across)
       const bx = 256, by = 300, s = 1.7;   // on the chest/torso, above the web centre
       c.fillStyle = ink;
       c.beginPath(); c.ellipse(bx, by - 13 * s, 7 * s, 11 * s, 0, 0, Math.PI * 2); c.fill();

reachy_web/static/js/update.js

@@ -46,6 +46,18 @@ const updateManager = {
         }
     },
 
+    // "Everything is up to date" with a green check — the clean, positive verdict
+    // when there is nothing to install.
+    sayUpToDate: (statusElem) => {
+        if (!statusElem) return;
+        statusElem.textContent = '';
+        const ico = document.createElement('span');
+        ico.className = 'ic i-check text-ok';
+        const txt = document.createElement('span');
+        txt.textContent = t('update.up_to_date');
+        statusElem.append(ico, txt);
+    },
+
     // Never leave "Checking for updates…" spinning forever: the daemon can be
     // away (502) or the request can fail. Say so plainly, so the line resolves.
     checkFailed: () => {
@@ -113,38 +125,39 @@ const updateManager = {
         }
     },
 
+    // The OTA update streams into the SAME slide-in drawer as an app install —
+    // not a mini popin floating inside the settings panel. installPanel.open()
+    // closes the settings drawer itself (they share the right edge) and gives us
+    // the classified log lines + a completion footer for free.
     connectLogsWebSocket: (jobId) => {
-        const updateModal = document.getElementById('update-modal');
-        const updateModalTitle = document.getElementById('update-modal-title');
-        const logsDiv = document.getElementById('update-logs');
-        const closeButton = document.getElementById('update-modal-close-button');
-
-        updateModalTitle.textContent = t('update.updating');
-
-        closeButton.onclick = () => {
-            updateModal.classList.add('hidden');
-        };
-
-        updateModal.classList.remove('hidden');
+        installPanel.open(t('update.updating'));
 
         const ws = new WebSocket(`ws://${location.host}/update/ws/logs?job_id=${jobId}`);
-
-        ws.onmessage = (event) => {
-            // console.log('Update log:', event);
-            logsDiv.innerHTML += event.data + '<br>';
-            logsDiv.scrollTop = logsDiv.scrollHeight;
-        };
+        ws.onmessage = (event) => installPanel.line(event.data);
         ws.onclose = async () => {
-            console.log('Update logs WebSocket closed');
-            closeButton.classList.remove('hidden');
-            closeButton.textContent = t('common.close');
-            updateModalTitle.textContent = t('update.completed');
+            installPanel.done(true, t('update.completed'));
             updateManager.busy = false;
-            await updateManager.loadInstallSource();
-            await updateManager.checkForUpdate();
+            // The app has just been reinstalled, so it may need a beat before it can
+            // answer again. Asking once landed on "Version unknown" + a still-armed
+            // Update button — a lie. Retry until it answers, then the line settles
+            // on the real state ("Up to date").
+            await updateManager.refreshAfterUpdate();
         };
     },
 
+    // re-read the version and re-check, retrying while the app comes back up
+    refreshAfterUpdate: async (tries = 6) => {
+        for (let i = 0; i < tries; i++) {
+            try {
+                const r = await fetch('/update/install-source');
+                if (r.ok) break;
+            } catch (e) { /* not back yet */ }
+            await new Promise((res) => setTimeout(res, 1500));
+        }
+        await updateManager.loadInstallSource();
+        await updateManager.checkForUpdate();
+    },
+
     updateUI: async (update) => {
         // updateManager.updateMainPage(isUpdateAvailable);
         updateManager.updateUpdatePage(update);
@@ -174,13 +187,14 @@ const updateManager = {
 
         const updateInfo = data.update.reachy_mini;
         if (updateInfo.is_available) {
-            // the newer version, as its own accent pill (just the number)
+            // the newer version, as its own accent pill (just the number). The pill
+            // and the button say it all — no sentence.
             if (availableVersionElem) availableVersionElem.textContent = updateInfo.available_version || '';
-            statusElem.textContent = t('update.available');
+            statusElem.textContent = '';
             startUpdateBtn.classList.remove('hidden');
         } else {
             if (availableVersionElem) availableVersionElem.textContent = '';   // up to date → no second pill
-            statusElem.textContent = t('update.up_to_date');
+            updateManager.sayUpToDate(statusElem);
             startUpdateBtn.classList.add('hidden');
         }
     }

reachy_web/static/js/waveform.js

@@ -11,7 +11,20 @@
 // The speaker is a plain slider now: no waveform.
 const waveform = {
   BARS: 48,
-  MIC_GAIN: 4,     // a raw mic peak is tiny (~0.05); lift it so it visibly MOVES
+  MIC_GAIN: 4,       // a raw mic peak is tiny (~0.05); lift it so it visibly MOVES
+  NOISE_FLOOR: 0.03, // at or under this, it is the room's hiss — not sound
+
+  // raw level (0..1) → bar factor (0..1). A noise GATE comes FIRST: a silent room
+  // still feeds the mic a constant low hiss, and since the drawing curve lifts
+  // small values hard (to keep quiet speech visible), that hiss was drawn as a
+  // permanent wave — "sound" in a silent room. Anything at or under the floor is
+  // flat silence; what is above is rescaled from zero, THEN gained, so real sound
+  // still stands out.
+  shape: (raw) => {
+    const f = waveform.NOISE_FLOOR;
+    const v = raw <= f ? 0 : (raw - f) / (1 - f);
+    return Math.min(1, v * waveform.MIC_GAIN);
+  },
 
   mic: { el: null, bars: [], ctx: null, analyser: null, data: null, raf: null, session: null, retryTimer: null, gestureHooked: false },
 
@@ -78,7 +91,7 @@ const waveform = {
     s.ws.onmessage = (ev) => {
       let peaks; try { peaks = JSON.parse(ev.data); } catch { return; }
       if (!Array.isArray(peaks)) return;
-      waveform.mic.bars = waveform.mic.bars.concat(peaks).slice(-waveform.BARS);
+      waveform.mic.bars = waveform.mic.bars.concat(peaks.map(waveform.shape)).slice(-waveform.BARS);
       waveform.draw(waveform.mic.el, waveform.mic.bars);
     };
     s.ws.onclose = () => {
@@ -278,7 +291,7 @@ const waveform = {
         });
         if (level == null) return;   // no audioLevel in this browser → analyser stays
         m.statsDriving = true;
-        const peak = Math.min(1, level * waveform.MIC_GAIN);
+        const peak = waveform.shape(level);
         m.bars = m.bars.concat(peak).slice(-waveform.BARS);
         waveform.draw(m.el, m.bars);
       }).catch(() => {});
@@ -300,7 +313,7 @@ const waveform = {
     for (let i = 0; i < m.data.length; i++) {
       raw = Math.max(raw, Math.abs(m.data[i] - 128) / 128);
     }
-    const peak = Math.min(1, raw * waveform.MIC_GAIN);
+    const peak = waveform.shape(raw);
     m.bars = m.bars.concat(peak).slice(-waveform.BARS);   // scroll left
     waveform.draw(m.el, m.bars);
   },

reachy_web/templates/base.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="/static/css/icons.css">
     <link rel="stylesheet" href="/static/css/logs.css">
     <link rel="stylesheet" href="/static/css/audio_eq.css">
+    <link rel="stylesheet" href="/static/css/logo.css">
 
     <!-- where the robot actually is: the page may be served from a laptop -->
     <script>window.REACHY_DAEMON_NAME = "{{ daemon_name }}";</script>
@@ -25,6 +26,8 @@
     <script src="/static/js/locales.js"></script>
     <script src="/static/js/i18n.js"></script>
     <script src="/static/js/loader.js"></script>
+    <!-- the topbar logo lives on every page, and so must the thing that animates it -->
+    <script src="/static/js/logo_anim.js"></script>
     <!-- the controller button lives in the topbar, so it must exist on every page -->
     <script src="/static/js/controller.js"></script>
     <script src="/static/js/robot_name.js"></script>
@@ -49,7 +52,42 @@
         <div class="topbar-inner container px-4 sm:px-8 md:px-8 lg:px-8 xl:px-8 mx-auto w-full md:w-2/3">
             <!-- the logo spans the three rows; it and the title go home -->
             <a href="/" class="topbar-home" title="Home" data-i18n-title="topbar.home">
-                <img class="topbar-logo" src="/static/assets/logo.svg" alt="Reachy Web">
+                <!-- INLINE, not <img src="logo.svg">: an <img>-loaded SVG runs in
+                     the browser's secure static mode (no scripts), so its timing
+                     could only ever be a fixed CSS loop. Inline, logo_anim.js picks
+                     each move at random. Asymmetric on purpose: the right eye and
+                     the right antenna are smaller than their left twin. -->
+                <svg class="topbar-logo" viewBox="24 13 72 72" role="img" aria-label="Reachy Web">
+                    <!-- two nested groups per antenna: the outer one never stops
+                         breathing (lg-sway), the inner one carries whatever move
+                         logo_anim.js is playing. Same property on two elements =
+                         the rotations compose instead of fighting. -->
+                    <g class="lg-sway lg-sway-l">
+                        <g class="lg-ant lg-ant-l">
+                            <path d="M45 46 L37 22" fill="none" stroke="#1b2330" stroke-width="3" stroke-linecap="round"/>
+                            <circle class="lg-ball lg-ball-l" cx="37" cy="22" r="4" fill="#1b2330"/>
+                        </g>
+                    </g>
+                    <g class="lg-sway lg-sway-r">
+                        <g class="lg-ant lg-ant-r">
+                            <path d="M75 46 L81.4 26.4" fill="none" stroke="#1b2330" stroke-width="3" stroke-linecap="round"/>
+                            <circle class="lg-ball lg-ball-r" cx="81.4" cy="26.4" r="3.4" fill="#1b2330"/>
+                        </g>
+                    </g>
+                    <rect x="34" y="44" width="52" height="36" rx="13" fill="#fff" stroke="#1b2330" stroke-width="3"/>
+                    <circle class="lg-eye lg-eye-l" cx="48.98" cy="62.21" r="8.14" fill="#1b2330"/>
+                    <circle class="lg-eye lg-eye-r" cx="71.02" cy="62.21" r="7" fill="#1b2330"/>
+                    <path class="lg-wink" d="M63.9 61.5 Q71 68.5 78.1 61.5" fill="none" stroke="#1b2330" stroke-width="3.6" stroke-linecap="round"/>
+                    <!-- the glasses, invisible at rest — the v-glasses move drops
+                         them on. Two round lenses that touch at the bridge, and
+                         two little temples running to the head's edges. -->
+                    <g class="lg-glasses" fill="none" stroke="#1b2330" stroke-width="3" stroke-linecap="round">
+                        <circle cx="48.98" cy="62.21" r="11.5"/>
+                        <circle cx="71.02" cy="62.21" r="10.5"/>
+                        <path d="M37.48 62.21 L34 59.5"/>
+                        <path d="M81.52 62.21 L86 59.5"/>
+                    </g>
+                </svg>
             </a>
             <button class="burger topbar-iconbtn" id="burgerBtn" aria-label="Menu" data-i18n-title="topbar.menu" onclick="topbar.toggleMenu()">
                 <span class="ic i-menu"></span>
@@ -64,8 +102,8 @@
                 <nav class="navmenu-list">
                     <button onclick="nav.show('reachy')">
                         <svg class="tab-bot" viewBox="0 0 120 124" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                            <path d="M45 46 L37 24"/><circle cx="37" cy="22" r="4.2" fill="currentColor" stroke="none"/>
-                            <path d="M75 46 L83 24"/><circle cx="83" cy="22" r="4.2" fill="currentColor" stroke="none"/>
+                            <path d="M45 46 L37 22"/><circle cx="37" cy="22" r="4.2" fill="currentColor" stroke="none"/>
+                            <path d="M75 46 L83 22"/><circle cx="83" cy="22" r="4.2" fill="currentColor" stroke="none"/>
                             <rect x="34" y="44" width="52" height="36" rx="13"/>
                             <circle cx="48.98" cy="62.21" r="8.14" fill="currentColor" stroke="none"/>
                             <circle cx="72.67" cy="62.5" r="6.98" fill="currentColor" stroke="none"/>

reachy_web/templates/index.html

@@ -11,7 +11,7 @@
              base — its face traced from the assets, only monochrome and still here -->
         <svg class="tab-bot" viewBox="0 0 120 124" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <path d="M45 46 L37 24"/><circle cx="37" cy="22" r="4.2" fill="currentColor" stroke="none"/>
-            <path d="M75 46 L83 24"/><circle cx="83" cy="22" r="4.2" fill="currentColor" stroke="none"/>
+            <path d="M75 46 L83 22"/><circle cx="83" cy="22" r="4.2" fill="currentColor" stroke="none"/>
             <rect x="34" y="44" width="52" height="36" rx="13"/>
             <circle cx="48.98" cy="62.21" r="8.14" fill="currentColor" stroke="none"/>
             <circle cx="72.67" cy="62.5" r="6.98" fill="currentColor" stroke="none"/>

reachy_web/templates/sections/appearance.html

@@ -1,10 +1,11 @@
 <div class="app-section">
     <div class="app-section-title"><span class="ic i-palette"></span> <span data-i18n="settings.appearance">Appearance</span></div>
-    <!-- a 2-column grid: labels in one column (aligned left), controls in the next
-         (all starting at the same x) — so every row shares the same left/right gap -->
+    <!-- a 2-column grid: labels in one column (aligned left), controls in the next,
+         all flushed RIGHT — so every switch lands on the same right edge. Where a
+         row carries a hint, the hint sits before the switch to keep it rightmost. -->
     <div class="grid grid-cols-[max-content_1fr] items-center gap-x-6 gap-y-4 p-4">
         <span class="text-sm font-medium" data-i18n="settings.theme">Theme</span>
-        <div class="theme-ctl justify-self-start">
+        <div class="theme-ctl justify-self-end">
             <span class="ic i-weather-night"></span>
             <button class="ios" id="themeSw" data-theme-switch role="switch" aria-label="Light theme" data-i18n-aria="settings.light_theme"
                 data-i18n-title="settings.light_theme"></button>
@@ -12,20 +13,20 @@
         </div>
 
         <span class="text-sm font-medium" data-i18n="settings.palette">Palette</span>
-        <div class="palettes justify-self-start" id="palettes" title="Palette" data-i18n-title="settings.palette"></div>
+        <div class="palettes justify-self-end" id="palettes" title="Palette" data-i18n-title="settings.palette"></div>
 
         <span class="text-sm font-medium" data-i18n="settings.random_skin">Random skin</span>
-        <div class="flex items-center gap-2 justify-self-start">
-            <button class="ios" id="skinRandomSw" role="switch"
+        <div class="flex items-center gap-2 justify-self-end min-w-0">
+            <span class="text-xs text-mut text-right" data-i18n="settings.random_skin_hint">A different skin on every start</span>
+            <button class="ios flex-none" id="skinRandomSw" role="switch"
                 data-i18n-aria="settings.random_skin_hint" data-i18n-title="settings.random_skin_hint"></button>
-            <span class="text-xs text-mut" data-i18n="settings.random_skin_hint">A different skin on every start</span>
         </div>
 
         <span class="text-sm font-medium" data-i18n="settings.debug">Debug mode</span>
-        <div class="flex items-center gap-2 justify-self-start">
-            <button class="ios" id="debugSw" role="switch"
+        <div class="flex items-center gap-2 justify-self-end min-w-0">
+            <span class="text-xs text-mut text-right" data-i18n="settings.debug_hint">Mirror the browser console into the logs panel</span>
+            <button class="ios flex-none" id="debugSw" role="switch"
                 data-i18n-aria="settings.debug_hint" data-i18n-title="settings.debug_hint"></button>
-            <span class="text-xs text-mut" data-i18n="settings.debug_hint">Mirror the browser console into the logs panel</span>
         </div>
     </div>
 </div>

reachy_web/templates/sections/update.html

@@ -17,21 +17,22 @@
         <span id="available-version"
             class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-acc text-bg text-sm font-semibold tabular-nums empty:hidden"></span>
 
-        <label class="flex items-center gap-2 text-sm text-mut cursor-pointer">
+        <!-- the verdict, on the left: a green check + "Everything is up to date"
+             when there is nothing to do; emptied when an update IS available (the
+             pill and the button already say it) -->
+        <span id="update-status" class="flex items-center gap-1.5 text-sm text-mut"></span>
+
+        <label class="flex items-center gap-2 text-sm text-mut cursor-pointer ml-auto">
             <button type="button" class="ios" id="pre-release-switch" role="switch" aria-checked="false"
                 data-i18n-title="update.pre_release"></button>
             <span data-i18n="update.pre_release">pre-release</span>
         </label>
 
         <button id="start-update-btn" onclick="updateManager.startUpdate()"
-            class="hidden ml-auto inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg shadow bg-green-400 hover:bg-green-500 text-white text-sm font-semibold"
+            class="hidden inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg shadow bg-green-400 hover:bg-green-500 text-white text-sm font-semibold"
             data-i18n-title="update.start">
             <span class="ic i-arrow-up-bold"></span> <span data-i18n="update.start">Update</span>
         </button>
-
-        <!-- kept for update.js (it returns early if this is missing) but never
-             shown: the "update available" sentence was redundant with the pill -->
-        <span id="update-status" class="hidden"></span>
     </div>
 </div>
 

tailwindcss/styles/app.css

@@ -63,6 +63,12 @@
 /* in light mode every palette fades from white (the font stays the palette's) */
 :root[data-palette][data-theme=light] body { background: radial-gradient(1200px 600px at 50% -10%, #fff, var(--bg)) fixed; }
 
+/* Tailwind emits the display utilities in a fixed order, and .flex / .inline-flex
+   land AFTER .hidden — same specificity, so the later one wins and any element
+   carrying BOTH (every toggled button, pill or disclosure in this app) simply
+   never hid. Make .hidden win outright, whatever it is combined with. */
+.hidden { display: none !important; }
+
 /* ================= utilities → tokens ================= */
 /* The recovered UI is written in white/gray/blue/green utilities. Remapping the
    scales onto the tokens makes every existing class — templates AND markup
@@ -165,7 +171,15 @@ body {
     flex-wrap: wrap;
 }
 
-.palettes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+/* the 13 palettes on two balanced rows (7 + 6) rather than one long wrapping
+   line — a grid, so the dots line up in columns instead of drifting */
+.palettes {
+    display: grid;
+    grid-template-columns: repeat(7, auto);
+    justify-items: center;
+    align-items: center;
+    gap: 6px;
+}
 
 .pdot {
     width: 16px;