html,body{height:100%;margin:0}
 /* alone caldo dietro la sfera, come nella vetrina della home */
 body{background:radial-gradient(120% 85% at 50% 44%,rgba(255,250,235,.95),rgba(238,246,236,.5) 55%,var(--bg) 82%);color:var(--text);font-family:var(--font);overflow:hidden}
 /* il fondo si ferma sopra la barra di coaching (solo la mappa personale ce l'ha):
    `--piede` lo misura il JS, come `--capo` fa con la testata. Vedi misuraPiede. */
 .g-wrap{position:fixed;top:0;left:0;right:0;bottom:var(--piede,0px)}
 /* cursori di SISTEMA (default/pointer/move): l'OS li disegna come overlay hardware e
    non spariscono mai. 'grab'/'grabbing' sono immagini custom del browser e su un canvas
    che si ridisegna di continuo possono sfarfallare fino a sparire. */
 /* Un canvas flex conserva la propria altezza INTRINSECA quando `cv.height` cambia col DPR.
    Su Safari mobile, ritraendo la barra indirizzi, il riquadro misurava 744px ma il canvas
    restava alto 781px: il ridisegno finiva fuori dalla parte visibile. Assoluto = la misura
    viene solo dal contenitore, mai dal bitmap interno. */
 #cv{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:none;cursor:default}
 /* LA BARRA STA SOTTO LA NAV, e `--capo` dice DOVE finisce la nav davvero.
    Prima c'era scritto 66px a mano, e dava per scontata una cosa falsa: che la nav
    cominciasse da zero e fosse alta 66. Col banner promo sopra (53px su desktop, 105 sul
    telefono) la nav scende, e la barra della mappa finiva DENTRO la sua fascia — misurato il
    04/08/2026: su telefono la nav sta a 105-175px e la barra veniva disegnata a 58-118,
    cioe' completamente nascosta. Non si vedeva ne' il titolo ne' la ricerca, e siccome
    `.g-top` prende i clic (`pointer-events:auto`) quella striscia invisibile si mangiava
    anche i tocchi sul menu a tendina della nav.
    `--capo` la misura il JS sull'elemento vero e la riaggiorna quando cambia (il banner si
    chiude, il menu si apre, si ruota il telefono). Il fondo, 66px, serve solo al primo
    fotogramma prima che la misura arrivi. */
 .g-over{position:absolute;left:0;right:0;top:var(--capo,66px);pointer-events:none;z-index:5}
 /* UNA riga sola, MAI a capo. Con flex-wrap:wrap la barra si spezzava in due o tre strisce
    che coprivano un terzo della mappa sul telefono — ed e' la ragione per cui la legenda e
    il suggerimento erano gia' stati nascosti sotto i 600px: si stava rincorrendo il sintomo.
    Ora quello che non ci sta si accorcia (il sottotitolo sparisce, le etichette dei bottoni
    di vista diventano icone), la barra non cresce mai in altezza. */
 .g-top{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 18px;flex-wrap:nowrap}
 /* IL TITOLO, e sopra la mappa non c'e' altro che la ricerca. I due selettori che stavano
    qui — «la conoscenza / il mio grafo» e «sfera / rete» — sono usciti il 04/08/2026: il
    primo perche' la navigazione del sito fa gia' quel salto (menu in alto = la conoscenza,
    barra in basso e menu dell'app = la tua), il secondo perche' la sfera e' l'ingresso di
    tutti. Vedi grafo.titolo(). */
 .g-h1{margin:0;font-weight:800;font-size:16px;letter-spacing:-.01em;line-height:1.25;
  min-width:0;display:flex;flex-direction:column}
 .g-sub{color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
 .g-ctrl{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
 .g-search{position:relative}
 #gq{background:rgba(255,255,255,.92);border:1px solid var(--border-hi);border-radius:11px;padding:9px 14px 9px 34px;
  font-family:var(--font);font-size:13.5px;color:var(--text);width:230px;max-width:46vw;outline:none;box-shadow:0 4px 16px rgba(33,50,20,.08)}
 #gq:focus{border-color:var(--leo)}
 .g-search::before{content:"🔎";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.6}
 /* DUE COLONNE: le famiglie da spiegare sono undici (erano sei, e cinque colori restavano
    senza nome sullo schermo). In colonna sola la legenda diventava una striscia da 260px che
    su un portatile arrivava a meta' mappa. */
 /* NIENTE backdrop-filter qui: sotto c'e' un canvas che si ridisegna a ogni fotogramma,
    quindi il browser dovrebbe ricomporre la sfocatura ogni volta. E' lo stesso motivo per
    cui il blur e' gia' stato tolto da testata e barra su mobile. Il fondo e' al 90%: la
    sfocatura non si vedeva comunque. */
 .legend{position:absolute;left:14px;bottom:14px;z-index:5;background:rgba(255,255,255,.96);
  border:1px solid var(--border);border-radius:13px;padding:11px 13px;display:grid;
  grid-template-columns:auto auto;gap:6px 16px;box-shadow:0 6px 22px rgba(33,50,20,.1)}
 .legend b{grid-column:1/-1;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
 .lg-row{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600}
 .lg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
 /* il legame secondario si spiega con un TRATTEGGIO, non con un pallino: non e' una famiglia
    di nodi, e' una qualita' dell'arco. Occupa tutta la riga, in fondo. */
 .lg-arco{grid-column:1/-1;font-weight:500;color:var(--muted);font-size:11.5px}
 .lg-dash{width:22px;height:0;border-top:2px dashed #7a8fa6;flex-shrink:0}
 .g-hint{position:absolute;right:14px;bottom:14px;z-index:5;font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.8);
  border:1px solid var(--border);border-radius:10px;padding:7px 11px;max-width:230px;line-height:1.5}
 .tip{position:fixed;z-index:9;pointer-events:none;background:#1a2114;color:#fff;font-size:12px;font-weight:600;
  padding:7px 11px;border-radius:9px;max-width:280px;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transition:opacity .12s;transform:translate(-50%,-140%)}
 .tip .k{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.6;margin-bottom:1px}
 /* come si accorcia la barra: prima va via il sottotitolo (e' un di piu'), poi si stringe la
    ricerca. La barra resta SEMPRE su una riga sola — con flex-wrap si spezzava in strisce
    che coprivano un terzo della mappa. */
 .g-altra{margin-left:auto;flex-shrink:0;font-size:12.5px;font-weight:700;text-decoration:none;
  color:var(--primary,#3c502d);border:1px solid var(--border-hi,rgba(37,60,20,.28));
  border-radius:999px;padding:6px 12px;white-space:nowrap;transition:background .15s}
 .g-altra:hover{background:rgba(60,80,45,.08)}
 @media(max-width:760px){.g-sub{display:none}}
 /* Sotto i 600px la LEGENDA resta fuori — undici famiglie in due colonne si mangerebbero
    mezza mappa — ma il SUGGERIMENTO no: era l'unica cosa che diceva come si usa, e su
    telefono era proprio quello a sparire. Torna, compatto, largo quanto lo schermo meno i
    margini, e sopra la barra di coaching (`--piede`). */
 @media(max-width:600px){.legend{display:none}#gq{width:130px}.g-h1{font-size:14.5px}
  .g-hint{left:10px;right:10px;max-width:none;bottom:10px;
   font-size:11px;padding:7px 10px;text-align:center}}
 /* SCHERMI PICCOLI SUL SERIO (un 320x568, che e' il pavimento). Li' si accatastano quattro
    strisce sopra la mappa — testata, barra, cartello «e' un esempio», suggerimento — e la
    sfera finiva coperta quasi del tutto: 152 pixel disegnati, misurati. Su quel formato il
    suggerimento sparisce: e' la cosa meno essenziale delle quattro (spiega un gesto che si
    scopre anche provando), ed e' l'unica che si puo' togliere senza togliere informazione.
    In CSS e non in JavaScript di proposito: nasconderlo misurando, e poi rimisurare, vuol
    dire farlo comparire e sparire a ogni giro. */
 @media(max-width:400px) and (max-height:640px){.g-hint{display:none}
  .g-top{padding:8px 12px}}

/* 14/09/2026, passo H.1-bis: cio' che prima stava negli attributi style="".
   La CSP servita non li applica piu' (style-src-attr 'none'). */
.lg-dot.c-3f8ede{background:#3f8ede!important}
.lg-dot.c-6f63c2{background:#6f63c2!important}
.lg-dot.c-a8842f{background:#a8842f!important}
.lg-dot.c-c2557a{background:#c2557a!important}
.lg-dot.c-0f9b8e{background:#0f9b8e!important}
.lg-dot.c-5c4b9e{background:#5c4b9e!important}
.lg-dot.c-a78bfa{background:#a78bfa!important}
.lg-dot.c-5bb24a{background:#5bb24a!important}
.lg-dot.c-2f8f4e{background:#2f8f4e!important}
.lg-dot.c-d9822b{background:#d9822b!important}
.lg-dot.c-b3611f{background:#b3611f!important}
.lg-dot.c-c98a3a{background:#c98a3a!important}
.lg-dot.c-d1594a{background:#d1594a!important}
.lg-dot.c-3c9a2c{background:#3c9a2c!important}
.lg-dot.c-b3362a{background:#b3362a!important}
#g-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;pointer-events:none}
#g-loader[hidden]{display:none}