Collapsible quick guide inside the Mappatura tab

A details/summary walkthrough: what mapping is, the three steps
(activate, create zones, drag corners on the output), every per-zone
option with a multi-panel Porzione example, and the persistence/
recording notes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/control.html

@@ -216,10 +216,34 @@
           <button id="map-add-img">➕ Zona Immagine…</button>
           <input type="file" id="map-img-input" accept="image/*" hidden />
         </div>
-        <div class="hint-mini">Ogni zona è un quadrilatero proiettato: con “Modifica zone” trascini i
+        <details class="map-guide">
-          4 angoli (o l'intera zona) direttamente sull'output guardando la superficie reale.
+          <summary>📖 Guida rapida alla mappatura</summary>
-          Le zone <b>Visual</b> mostrano l'effetto live (anche solo una porzione, per wall multi-pannello);
+          <div class="mg-body">
-          le zone <b>Immagine</b> fanno corner-pin di un'immagine su un oggetto. Fuori dalle zone: nero.</div>
+            <p><b>Cos'è</b> — proietti i visual (o immagini) solo su <b>zone</b> dello schermo:
+            quadrilateri deformabili con prospettiva corretta, per mappare pannelli LED,
+            oggetti e superfici inclinate. Fuori dalle zone: nero.</p>
+            <p><b>1. Attiva</b> — l'output passa in modalità mappatura.</p>
+            <p><b>2. Crea le zone</b> — <b>➕ Zona Visual</b> mostra l'effetto live in corso
+            (qualsiasi famiglia, anche il ballerino 3D); <b>➕ Zona Immagine</b> incolla
+            un'immagine fissa su una superficie (corner-pin).</p>
+            <p><b>3. Posiziona</b> — spunta <b>Modifica zone</b>: sull'output compaiono le
+            maniglie. Trascina i <b>4 angoli</b> per adattare la zona alla superficie reale
+            (guardando la proiezione!), oppure clicca <b>dentro</b> la zona per spostarla
+            intera. La zona selezionata ha le maniglie azzurre. Finito? Togli la spunta.</p>
+            <p><b>Opzioni per zona</b>:</p>
+            <p>· <b>Nome</b> — etichetta libera ("Pannello SX", "Cubo"…)<br/>
+            · <b>Porzione</b> (solo Visual) — quale ritaglio del visual mostrare:
+            X%, Y% di origine + Larghezza%×Altezza%. Es. due pannelli affiancati:
+            zona A <i>0, 0, 50×100</i> e zona B <i>50, 0, 50×100</i> → il visual
+            continua da un pannello all'altro<br/>
+            · <b>Slider</b> — opacità della zona (le zone più in basso nella lista
+            coprono quelle sopra dove si sovrappongono)<br/>
+            · <b>✕</b> — elimina la zona</p>
+            <p><b>Note</b> — tutto è salvato automaticamente e rientra nelle registrazioni
+            MP4. Le zone Visual seguono l'effetto attivo: cambi preset e cambia il
+            contenuto di tutte le zone.</p>
+          </div>
+        </details>
       </section>
     </div>
 

src/style.css

@@ -895,6 +895,27 @@ kbd {
 }
 .glb-models .hint-mini { grid-column: 1 / -1; }
 
+/* Projection-mapping guide */
+.map-guide { margin-top: 10px; font-size: 11.5px; }
+.map-guide summary {
+  cursor: pointer;
+  opacity: 0.8;
+  padding: 6px 8px;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 9px;
+}
+.map-guide summary:hover { background: rgba(255,255,255,0.07); }
+.map-guide[open] summary { border-radius: 9px 9px 0 0; background: rgba(255,255,255,0.05); }
+.map-guide .mg-body {
+  border: 1px solid rgba(255,255,255,0.1);
+  border-top: none;
+  border-radius: 0 0 9px 9px;
+  padding: 4px 12px;
+  line-height: 1.55;
+  opacity: 0.85;
+}
+.map-guide .mg-body p { margin: 7px 0; }
+
 /* Projection-mapping zone list */
 .map-zone {
   display: flex;