/* ══════════════════════════════════════════════════════════════════
   VESEMEN · LE FONDAMENTA
   I gettoni del colore, la tipografia e i quattro pezzi che compaiono su
   ogni pagina: la barra in cima, i due bottoni, il segno del token.

   NOTA ONESTA: il portale (mint.html) tiene ancora le sue copie di queste
   regole dentro il suo <style>. Non le ho tolte di proposito: quella pagina
   e' delicata e riscriverne il CSS per un guadagno di pulizia non vale il
   rischio di storcerla. Se un giorno si porta anche il portale qui dentro,
   basta togliere il blocco :root e i primitivi dal suo <style>: questo foglio
   viene caricato prima, quindi tutto quello che resta inline vince comunque.
   Fino ad allora: se cambi un colore qui, cambialo anche li'.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --void:#07080B; --deep:#0C0E14; --panel:#11141C; --raised:#161A24;
  --line:rgba(243,241,236,.08); --line2:rgba(243,241,236,.17);
  --ink:#F3F1EC; --dim:rgba(243,241,236,.58); --faint:rgba(243,241,236,.30);
  --lime:#B4F04A; --pink:#FF5CA8; --cyan:#5CD8FF; --amber:#FFC24A; --violet:#A78BFF;
  --l1:#8A94A6; --l2:#5FB37A; --l3:#5CD8FF; --l4:#A78BFF; --l5:#FFC24A;
  --bar:76px;   /* l'altezza della barra in cima */
}

*{box-sizing:border-box}
/* `manipulation` toglie il doppio tocco che ingrandisce, e col resto delle
 * regole in js/fermo.js la pagina non si ingrandisce piu' in nessun modo */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* UNO SFONDO SOLO, E LO DIPINGE LA RADICE.
   Lo dipingevano tutti e due, html e body, con lo stesso colore. Finche' il
   colore e' lo stesso non si vede niente, ma sono due strati sovrapposti: basta
   che una pagina ne cambi uno, o che il corpo finisca prima della finestra,
   e compare una giuntura orizzontale con due neri diversi.

   Adesso il colore sta solo sulla radice, che copre sempre tutta la tela
   qualunque sia l'altezza del contenuto, e il corpo e' trasparente. Uno strato,
   un colore, nessuna giuntura possibile. */
html{margin:0;background:var(--void);color:var(--ink);min-height:100%;
  /* Anche qui, oltre che nel `<head>`: quello che sta fuori dal documento -
     l'overscroll, l'area sotto una pagina corta, la barra di scorrimento - lo
     dipinge il browser, e senza questa riga lo dipinge chiaro. */
  color-scheme:dark}
/* LO SCHERMO E' DI UN COLORE SOLO, ANCHE DOVE NON C'E' NIENTE. Il fondo lo
   dipingeva solo `html`, e `body` era trasparente: quando una pagina e' piu'
   corta della finestra, o quando un contenitore in mezzo dipinge il suo, sotto
   il contenuto compariva un'altra tonalita'. Adesso `body` dipinge lo stesso
   colore su tutta la sua altezza minima, che e' l'intera finestra: qualunque
   cosa ci sia o non ci sia dentro, il resto e' `--void` e basta. */
body{margin:0;background:transparent;color:var(--ink);min-height:100vh;min-height:100dvh}
/* IL FONDO E' UNO STRATO FISSO, NON IL COLORE DEL BODY.
   Chrome su Mac con schermo P3 rendeva il fondo in due modi: il colore del
   body (disegnato dalla CPU) e gli elementi composti dalla GPU (barra fissa,
   intestazione sticky, righe) con un nero leggermente diverso. Il confine
   cadeva esattamente dove finiva il contenuto: "meta' nero, meta' grigio".
   Con html e body a `--void` e nessuna differenza nel CSS calcolato, in
   headless non si vedeva; sullo schermo vero si'. Misurato il 07/09/2026.
   Rimedio: un solo strato fisso a schermo intero, composto dalla GPU come il
   resto, che dipinge `--void` sotto tutto. Il body resta trasparente sopra di
   lui; `html` tiene `--void` come rete di sicurezza. `100vh` prima di `100dvh`
   per i browser incorporati vecchi (Sync2 e' un Electron datato) dove `dvh`
   non esiste. */
body::before{content:'';position:fixed;inset:0;z-index:-1;background:var(--void);pointer-events:none}
body{font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Archivo Black',sans-serif;margin:0;text-wrap:balance;letter-spacing:-.02em}
a{color:inherit}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
     text-transform:uppercase;color:var(--faint)}
[hidden]{display:none!important}

/* ── LA BARRA IN CIMA ─────────────────────────────────────────────
 * Marchio a sinistra, i numeri in mezzo, la navigazione a destra. Niente
 * backdrop-filter: sfocare quello che sta sotto costa un giro di composizione
 * a ogni fotogramma. Una sfumatura piena costa zero e si legge uguale. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:7;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:22px 28px;
  background:linear-gradient(rgba(7,8,11,.97) 40%,rgba(7,8,11,.72) 76%,rgba(7,8,11,0))}
/* LE COLONNE SONO TRE ANCHE QUANDO I FIGLI SONO DUE.
   La barra e' `1fr auto 1fr`: marchio, numeri, menu. Tolti i numeri da tutte le
   pagine tranne il portale, il menu scivolava nella colonna di mezzo e finiva
   al centro invece che a destra. Dicendo a ciascuno in quale colonna sta, la
   barra regge sia con tre figli sia con due. */
.tb-brand{font-family:'Archivo Black',sans-serif;font-size:24px;letter-spacing:-.03em;
  grid-column:1;justify-self:start;text-decoration:none}
.tb-brand em{font-style:normal;color:var(--lime)}

/* ── LA DESTRA DELLA BARRA ────────────────────────────────────────
 * Tre oggetti al massimo, e devono sembrare una cosa sola: stessa altezza,
 * stessa forma, stesso carattere. Prima erano tre misure diverse, con PORTAL
 * grande e illuminato come un'insegna e l'indirizzo che andava a capo su due
 * righe: una fila di cose che gridano non e' una barra, e' un disordine.
 *
 * L'altezza la fissa una variabile perche' devono restare uguali per sempre,
 * anche quando se ne aggiungera' una quarta. */
.tb-nav{grid-column:3;justify-self:end;display:flex;gap:8px;align-items:center}
.tb-nav,.wslot{--h:38px}

.navlink,.wpin{
  display:inline-flex;align-items:center;gap:8px;
  height:var(--h);padding:0 15px;border-radius:999px;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;
  white-space:nowrap;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s}
.navlink:hover,.wpin:hover{border-color:var(--lime);color:var(--lime)}

/* la pagina in cui SEI si segna, non si accende: e' un'informazione, non un
 * invito, e un invito a restare dove sei non vuol dire niente */
.navlink.on{color:var(--lime);border-color:rgba(180,240,74,.4);
  background:rgba(180,240,74,.05)}

/* PORTFOLIO SI VEDE SOLO DA COLLEGATI. Senza un indirizzo quella pagina non ha
 * niente da mostrare, e un link che porta a un invito a collegarsi e' un giro
 * in piu' per arrivare dove ti porta gia' ACCESS PORTAL. PORTAL invece resta
 * sempre: e' la porta d'ingresso. */
.tb-nav .navlink[href="/portfolio"]{display:none}
html.collegato .tb-nav .navlink[href="/portfolio"]{display:inline-flex}

/* La spia e la freccia su PORTAL sono un INVITO, quindi si vedono solo quando
 * il portale e' altrove. Se ci sei gia' dentro sparirebbe il senso: resta la
 * voce segnata, e basta. */
.navlink .led{display:none;flex:0 0 6px;width:6px;height:6px;border-radius:99px;
  background:var(--lime);box-shadow:0 0 8px var(--lime);
  animation:led 1.6s ease-in-out infinite}
.navlink .arw{display:none;flex:0 0 12px;width:12px;height:12px;color:var(--lime);
  transition:transform .15s cubic-bezier(.2,1,.3,1)}
.navlink.azione:not(.on) .led,.navlink.azione:not(.on) .arw{display:block}
.navlink.azione:not(.on):hover{color:var(--ink);border-color:var(--lime)}
.navlink.azione:not(.on):hover .arw{transform:translateX(3px)}

/* sulla casa il MINT non e' una voce di menu, e' LA cosa da fare */
.navlink.lit{background:var(--lime);border-color:var(--lime);color:#0A1004;
  font-weight:700}
.navlink.lit:hover{background:#C6FF5E;color:#0A1004;border-color:#C6FF5E}

/* ── LA BARRA DA SCHERMO GRANDE ───────────────────────────────────
 *
 * LE VOCI NON SONO PASTIGLIE. Tre bottoni bordati in fila in cima alla pagina
 * sembrano tre comandi da premere, tutti della stessa importanza: ma navigare
 * non e' agire, e una barra che grida quanto il bottone del mint toglie peso
 * al mint. Qui sono parole in fila, divise da un tratto sottile.
 *
 * IL SEGNO SOTTO. Una riga di lime che si apre da meta' verso i due lati: dice
 * due cose con la stessa forma, dove SEI (resta acceso) e dove stai per andare
 * (si accende sotto il dito). Nasce sotto il cursore invece di entrare
 * scorrendo da un bordo, cosi' segue la mano invece di inseguirla.
 *
 * Tutto dentro `min-width:760px`. Sotto quella soglia comanda mobile.css, che
 * queste voci le nasconde e mette la navigazione nella barra in basso: cosi'
 * il telefono non puo' vedere niente di quello che c'e' qui dentro. */
@media (min-width:760px){
  .tb-nav{gap:0}

  .tb-nav .navlink:not(.lit){
    position:relative;height:var(--h);padding:0 17px;
    border:0;border-radius:0;background:none;
    color:var(--faint);font-size:11px;letter-spacing:.15em}

  /* Il tratto sta sulla voce DOPO, mai sulla prima: un divisorio davanti alla
   * prima voce dividerebbe la voce dal nulla. */
  .tb-nav .navlink + .navlink::before{content:'';position:absolute;left:0;top:50%;
    transform:translateY(-50%);width:1px;height:11px;background:var(--line2)}

  .tb-nav .navlink::after{content:'';position:absolute;left:17px;right:17px;bottom:6px;
    height:1.5px;border-radius:2px;background:var(--lime);
    box-shadow:0 0 10px rgba(180,240,74,.5);
    transform:scaleX(0);transform-origin:50% 50%;
    transition:transform .22s cubic-bezier(.2,.9,.3,1)}

  .tb-nav .navlink:hover{color:var(--ink)}
  .tb-nav .navlink:hover::after{transform:scaleX(1)}

  /* dove sei: acceso e basta, senza sfondo e senza cornice */
  .tb-nav .navlink.on{color:var(--lime);background:none;border-color:transparent}
  .tb-nav .navlink.on::after{transform:scaleX(1)}

  /* La spia che pulsa e la freccia erano gli ornamenti della pastiglia. In una
   * fila di parole una voce con la lucina non e' piu' una voce: e' un'insegna,
   * e le altre due sembrano spente per contrasto. */
  .tb-nav .navlink.azione:not(.on) .led,
  .tb-nav .navlink.azione:not(.on) .arw{display:none}

  /* ── LA PASTIGLIA DEL PROFILO ───────────────────────────────────
   * In una barra fatta di sole parole e' rimasta l'unica cosa con una forma, e
   * va bene cosi': e' anche l'unica che si apre. Un filo di vetro sopra il
   * nero, il punto verde che dice che sei dentro, e una freccina che si gira
   * quando il menu e' sceso. Prima era la stessa identica cornice delle voci:
   * sembrava una quarta pagina dove andare. */
  /* IL TRATTO PRIMA DELLA PASTIGLIA STA ALLA STESSA DISTANZA DEGLI ALTRI.
   * Le voci hanno 17 px di imbottitura per lato, quindi ogni tratto si trova a
   * 17 px dalla parola che ha a sinistra e a 17 da quella a destra. Qui c'erano
   * anche 18 px di margine sullo slot: PORTFOLIO aveva 17 px a sinistra e 35 a
   * destra, e si vedeva che il tratto di destra era piu' lontano. */
  .tb-nav > #wallet{margin-left:0}
  .tb-nav > #wallet.on::before{content:'';flex:0 0 1px;width:1px;height:11px;
    background:var(--line2);margin-right:17px}
  .wslot{gap:0}

  .tb-nav .wpin{
    gap:9px;padding:0 12px 0 14px;color:var(--dim);
    border-color:rgba(243,241,236,.10);
    background:linear-gradient(180deg,rgba(243,241,236,.07),rgba(243,241,236,.02));
    box-shadow:inset 0 1px 0 rgba(243,241,236,.07),0 10px 24px -18px #000;
    transition:color .18s,border-color .18s,background .18s,box-shadow .18s}
  .tb-nav .wpin:hover{color:var(--ink);border-color:rgba(180,240,74,.40);
    background:linear-gradient(180deg,rgba(180,240,74,.12),rgba(180,240,74,.03));
    box-shadow:inset 0 1px 0 rgba(243,241,236,.10),0 12px 26px -16px rgba(180,240,74,.45)}

  /* due lati di un quadratino girato di 45 gradi: una freccina senza immagine */
  .tb-nav .wpin::after{content:'';flex:0 0 5px;width:5px;height:5px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    opacity:.5;transform:translateY(-2px) rotate(45deg);
    transition:transform .2s ease,opacity .2s ease}
  .tb-nav .wpin:hover::after{opacity:.85}
  .wslot:has(.wmenu:not([hidden])) .wpin{color:var(--ink);border-color:rgba(180,240,74,.40)}
  .wslot:has(.wmenu:not([hidden])) .wpin::after{transform:translateY(1px) rotate(225deg);opacity:1}

  .tb-nav .wmenu{border-radius:12px;padding:5px}
}

/* ── PASSARE DA UNA PAGINA ALL'ALTRA ──────────────────────────────
 *
 * Sono quattro documenti veri, non una pagina sola che si riscrive: a ogni
 * voce del menu il browser butta via tutto e ricostruisce, e per un istante lo
 * schermo resta vuoto. La barra in cima sparisce e ricompare identica a se
 * stessa, che e' il modo piu' rapido per far sembrare lenta una cosa che ci
 * mette cinquanta millesimi.
 *
 * `navigation:auto` gli dice di fotografare la pagina che stai lasciando e di
 * sfumarla su quella che arriva, invece di lasciare il buco.
 *
 * E I DUE PEZZI CHE NON CAMBIANO SI CHIAMANO PER NOME. Un elemento che ha lo
 * stesso `view-transition-name` di qua e di la' il browser lo tratta come LO
 * STESSO elemento: non lo rifa', lo lascia dov'e'. Cosi' la barra in cima e
 * quella in basso restano ferme mentre sotto cambia il contenuto, ed e'
 * esattamente quello che uno si aspetta premendo una voce di menu.
 *
 * Chi ha un browser che non la conosce naviga come prima: non si rompe niente,
 * semplicemente non c'e' la sfumatura. */
@view-transition{ navigation:auto }
.topbar{view-transition-name:barra}
.dock{view-transition-name:piede}

/* Corta. Una sfumatura che si nota e' peggio del lampo che doveva togliere. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* E LA BARRA NON SI SFUMA NEMMENO. Con la sfumatura, per due decimi di secondo
 * si vedono sovrapposte la barra di prima e quella dopo: se cambia la voce
 * accesa, il segno di lime respira. Qui si passa da uno stato all'altro senza
 * animazione, cosi' sta ferma davvero. */
::view-transition-old(barra),::view-transition-old(piede){display:none}
::view-transition-new(barra),::view-transition-new(piede){animation:none}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none!important}
}



/* ── LA CARTOLINA DA CONDIVIDERE ──────────────────────────────────
 * Sta dentro la stessa finestra dei metadati (`.meta`), che e' gia' fatta e
 * gia' si chiude come si deve. Dentro c'e' quello che esce: la cartolina, la
 * chiamata, e i due modi di rispondere.
 *
 * TRE COSE E BASTA (10/09/2026, suo). Prima c'erano un titolo, una scritta
 * grigia e le miniature da spuntare: decisioni in un momento in cui uno vuole
 * solo far vedere quello che gli e' uscito. Adesso l'immagine si prende tutta
 * la larghezza, sotto c'e' la chiamata nel carattere della casa - bianco e lime
 * come il marchio - e in fondo due tasti, Not now a sinistra e quello vero a
 * destra. */
.share .meta-box{width:min(520px,100%);border-radius:22px;overflow:hidden}
/* l'immagine e' la cosa: in cima, a tutta larghezza, senza cornice */
.sh-card{display:block;width:100%;height:auto;aspect-ratio:1200/628;
  border-bottom:1px solid var(--line);background:var(--void)}
.sh-titolo{margin:0;padding:20px 22px 2px;text-align:center;
  font-family:'Archivo Black',sans-serif;font-size:27px;line-height:1.1;
  letter-spacing:-.02em;color:var(--ink)}
.sh-titolo em{font-style:normal;color:var(--lime)}
.sh-acts{display:flex;gap:10px;padding:18px 20px 20px}
.sh-acts button{height:50px;border-radius:13px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  letter-spacing:.07em;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.sh-no{flex:0 0 auto;padding:0 20px;border:1px solid var(--line2);background:transparent;
  color:var(--dim);font-weight:400;letter-spacing:.04em}
.sh-no:hover{color:var(--ink);background:rgba(243,241,236,.05)}
.sh-x{flex:1;border:0;background:var(--lime);color:#0A0C10;
  box-shadow:0 8px 26px -10px rgba(180,240,74,.75)}
.sh-x:hover{filter:brightness(1.07)}
.sh-acts button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sh-x svg{width:15px;height:15px;flex:0 0 15px}


/* ── LA FINESTRA DI STATO ─────────────────────────────────────────
 * Sta al centro e copre tutto, perche' nel momento in cui il portafoglio
 * aspetta una firma non c'e' nient'altro da guardare. Prima era una pastiglia
 * in un angolo e la pagina sotto restava viva: uno confermava, si ritrovava
 * davanti la stessa consolle di prima, e premeva di nuovo.
 *
 * `.ferma` e' l'attesa: niente crocetta, il fondo non si preme, Escape non fa
 * niente. Non e' pignoleria - e' l'unico momento del sito in cui una distrazione
 * costa soldi. */
.mdl{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:22px;
  background:rgba(4,5,7,.82);backdrop-filter:blur(10px);
  animation:mdlIn .18s ease-out}
.mdl[hidden]{display:none}
.mbox{width:min(390px,100%);border-radius:20px;padding:30px 26px 24px;text-align:center;
  border:1px solid var(--line2);background:rgba(14,17,24,.97);
  box-shadow:0 34px 80px -30px #000;animation:mboxIn .22s cubic-bezier(.2,1,.3,1)}
@keyframes mdlIn{from{opacity:0}}
@keyframes mboxIn{from{opacity:0;transform:translateY(10px) scale(.985)}}

/* IL SEGNO. In attesa e' un anello che gira, a cose fatte e' un simbolo fermo.
   L'anello e' una sola trasformazione CSS: gira sulla scheda video e non tocca
   il thread che sta gia' facendo girare il portale. */
.mseg{position:relative;width:46px;height:46px;margin:0 auto 18px;display:grid;place-items:center}
.manello{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(243,241,236,.10);border-top-color:currentColor;
  color:var(--dim);opacity:0}
.msimbolo{font-family:'Archivo Black',sans-serif;font-size:22px;line-height:1;opacity:0}
/* LA ROTELLA GIRA SOLO SE STA DAVVERO ASPETTANDO, cioe' solo su `.ferma`.
   Una finestra che ti sta raccontando com'e' andata non aspetta piu' niente, e
   una rotella addosso a un esito e' un invito a restare li' a guardarla. */
.mdl.attesa.ferma .manello,
.mdl.inviata.ferma .manello{opacity:1;animation:mgira .9s linear infinite}
.mdl.attesa .manello{color:var(--amber)}
.mdl.inviata .manello{color:var(--cyan)}
.mdl.fatto .msimbolo,
.mdl.male .msimbolo,
.mdl.nulla .msimbolo,
.mdl.inviata:not(.ferma) .msimbolo{opacity:1}
.mdl.inviata:not(.ferma) .msimbolo::before{content:'\2713';color:var(--cyan)}
.mdl.inviata:not(.ferma) .mseg{box-shadow:0 0 42px -10px var(--cyan) inset}
.mdl.inviata .mbtn.primario{background:var(--cyan);border-color:var(--cyan);color:#06131A}
.mdl.inviata .mbtn.primario:hover{background:var(--cyan)}
.mdl.fatto .msimbolo::before{content:'✓';color:var(--lime)}
.mdl.male .msimbolo::before{content:'!';color:var(--pink)}
.mdl.nulla .msimbolo::before{content:'×';color:var(--amber)}
/* l'alone dietro il simbolo lo stacca dal fondo senza aggiungere un riquadro */
.mdl.fatto .mseg,.mdl.male .mseg,.mdl.nulla .mseg{border-radius:50%}
.mdl.fatto .mseg{box-shadow:0 0 42px -10px var(--lime) inset}
.mdl.male .mseg{box-shadow:0 0 42px -10px var(--pink) inset}
.mdl.nulla .mseg{box-shadow:0 0 42px -10px var(--amber) inset}
@keyframes mgira{to{transform:rotate(360deg)}}

.mtit{font-family:'Archivo Black',sans-serif;font-size:19px;letter-spacing:-.025em;
  margin:0;line-height:1.25;text-wrap:balance}
.mdet{font-size:13.5px;color:var(--dim);line-height:1.6;margin:9px 0 0;text-wrap:pretty}
.mdet[hidden]{display:none}
.mlink{display:inline-block;margin-top:12px;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--cyan);text-decoration:none;letter-spacing:.03em}
.mlink:hover{text-decoration:underline}
.mlink[hidden]{display:none}

.mazi{display:flex;gap:9px;margin-top:22px}
.mazi[hidden]{display:none}
.mbtn{flex:1;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.08em;height:46px;padding:0 16px;border-radius:11px;cursor:pointer;
  border:1px solid var(--line2);background:transparent;color:var(--ink);transition:.14s}
.mbtn:hover{background:rgba(243,241,236,.05)}
.mbtn.primario{background:var(--lime);border-color:var(--lime);color:#07080B}
.mdl.male .mbtn.primario{background:var(--pink);border-color:var(--pink);color:#0A0C10}
.mdl.nulla .mbtn.primario{background:var(--amber);border-color:var(--amber);color:#0A0C10}
.mbtn.primario:hover{filter:brightness(1.08);background:var(--lime)}
.mdl.male .mbtn.primario:hover{background:var(--pink)}
.mdl.nulla .mbtn.primario:hover{background:var(--amber)}
.mbtn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .mdl,.mbox{animation:none}
  .manello{animation:none!important;border-top-color:currentColor;opacity:.6}
}


/* ── IL LOG-IN IN ALTO A DESTRA ───────────────────────────────────
 * Un posto solo, tre stati: CONNECT, in attesa, collegato. Il puntino a
 * sinistra dice qual e' senza bisogno di leggere: spento, ambra che pulsa,
 * lime fisso. */
.wslot{position:relative;display:flex;align-items:center;gap:9px}
.wpin{cursor:pointer}
/* L'INDIRIZZO NON VA MAI A CAPO. E' gia' abbreviato in mezzo, e spezzarlo su
 * due righe faceva crescere in altezza tutta la barra intorno. */
/* Quindici caratteri tagliavano "bruti.veworld.vet" a meta'. Un nome di dominio
   e' il nome di uno: mostrarne un pezzo coi puntini e' peggio che mostrare
   l'indirizzo. L'indirizzo abbreviato ne occupa tredici e non se ne accorge. */
.waddr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.wdot{width:7px;height:7px;border-radius:99px;background:var(--lime);
  box-shadow:0 0 9px var(--lime);flex:0 0 7px}
.wdot.wait{background:var(--amber);box-shadow:0 0 9px var(--amber);
  animation:led 1.1s ease-in-out infinite}
.wmsg{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--faint);
  letter-spacing:.06em;white-space:nowrap}
.wmsg a{color:var(--lime)}
.wmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:180px;padding:6px;
  background:rgba(13,16,22,.98);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 26px 50px -26px #000}
.wmenu a,.wmenu button{display:block;width:100%;text-align:left;cursor:pointer;border:0;
  background:none;color:var(--dim);padding:11px 13px;border-radius:9px;
  font-family:Archivo,sans-serif;font-size:13px;text-decoration:none}
.wmenu a:hover,.wmenu button:hover{background:rgba(180,240,74,.09);color:var(--lime)}


/* ── I DUE BOTTONI ────────────────────────────────────────────────
 * Uno pieno di lime per l'azione vera, uno di contorno per tutto il resto. */
.run{position:relative;overflow:hidden;cursor:pointer;border:0;border-radius:999px;
  padding:15px 36px;background:var(--lime);color:#0A1004;
  font-family:'Archivo Black',sans-serif;font-size:16px;letter-spacing:.03em;
  text-decoration:none;display:inline-block;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7), 0 0 46px -14px rgba(180,240,74,.85);
  transition:transform .16s cubic-bezier(.2,1,.3,1), box-shadow .22s, background .22s}
.run:hover{background:#C6FF5E;transform:translateY(-2px);
  box-shadow:0 16px 38px -12px rgba(0,0,0,.75), 0 0 72px -12px rgba(180,240,74,1)}
.run:active{transform:translateY(0) scale(.985)}
.btn2{cursor:pointer;border:1px solid var(--line2);background:transparent;color:var(--ink);
  border-radius:12px;padding:13px 20px;font-family:'JetBrains Mono',monospace;font-size:12px;
  letter-spacing:.1em;text-decoration:none;display:inline-block;transition:.15s}
.btn2:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 0 26px -10px var(--lime)}

/* ── IL SEGNO DEL TOKEN ───────────────────────────────────────────
 * Al posto della parola: scritto "WoV" sembra un refuso, e il logo si
 * riconosce prima ancora di leggerlo. Ribassato di un filo, se no galleggia
 * sopra le cifre. */
.wov{display:inline-block;vertical-align:-.14em;width:1em;height:1em;margin-left:.34em;
  background:url(/wov.png) center/contain no-repeat}
.wov.small{width:.95em;height:.95em;vertical-align:-.17em;margin-left:.3em;opacity:.9}
/* Il VET si paga, il WoV si brucia: due segni diversi perche' sono due momenti
 * diversi. L'icona ufficiale e' un quadrato pieno senza trasparenza, per cui
 * gli arrotondo gli angoli: accanto a una cifra un quadrato netto sembra un
 * riquadro di errore, non una moneta. */
/* IL SEGNO DEL VET E' UNA %3Csvg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%20500.9%20456.3"%3E%3Cpath%20d="M500.9%2C0h-44.7c-10.9%2C0-20.9%2C6.3-25.6%2C16.1L313%2C260.8l-0.1-0.3l-31.3%2C65.2l0.1%2C0.3l-31.3%2C65.2L94%2C65.3h44.6c10.9%2C0%2C20.9%2C6.3%2C25.6%2C16.1l102.1%2C211.4l31.3-65.2L215.2%2C57c-16.7-34.8-51.9-57-90.5-57H0l31.2%2C65.3h0.1l187.7%2C391h62.6L500.9%2C0z"/%3E%3C/svg%3E, NON UN'IMMAGINE.
 *
 * Era un PNG viola dentro un quadrato arrotondato: accanto a una cifra sembrava
 * un francobollo, e il colore era quello e basta. Adesso e' la sagoma della V
 * ritagliata, e quello che si vede attraverso e' un colore che decidiamo noi.
 * Verde di suo, perche' e' il colore dei numeri di questo sito; con `eredita`
 * prende il colore del testo che gli sta intorno.
 *
 * E non chiede piu' un file: la sagoma sta qui dentro, quindi non puo' rispondere
 * 404 come faceva /vet.png, che online non veniva nemmeno pubblicato. */
.vet{display:inline-block;vertical-align:-.14em;width:1em;height:1em;margin-left:.34em;
  background:var(--lime);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500.9%20456.3'%3E%3Cpath%20d='M500.9%2C0h-44.7c-10.9%2C0-20.9%2C6.3-25.6%2C16.1L313%2C260.8l-0.1-0.3l-31.3%2C65.2l0.1%2C0.3l-31.3%2C65.2L94%2C65.3h44.6c10.9%2C0%2C20.9%2C6.3%2C25.6%2C16.1l102.1%2C211.4l31.3-65.2L215.2%2C57c-16.7-34.8-51.9-57-90.5-57H0l31.2%2C65.3h0.1l187.7%2C391h62.6L500.9%2C0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20500.9%20456.3'%3E%3Cpath%20d='M500.9%2C0h-44.7c-10.9%2C0-20.9%2C6.3-25.6%2C16.1L313%2C260.8l-0.1-0.3l-31.3%2C65.2l0.1%2C0.3l-31.3%2C65.2L94%2C65.3h44.6c10.9%2C0%2C20.9%2C6.3%2C25.6%2C16.1l102.1%2C211.4l31.3-65.2L215.2%2C57c-16.7-34.8-51.9-57-90.5-57H0l31.2%2C65.3h0.1l187.7%2C391h62.6L500.9%2C0z'/%3E%3C/svg%3E") center/contain no-repeat}
.vet.eredita{background:currentColor}
.vet.small{width:.88em;height:.88em;vertical-align:-.13em;margin-left:.3em}

/* ── IL PIEDE DELLA SCHEDA E LA FINESTRA DEI METADATI ─────────────
 * Sulla scheda ci stanno tre cose e basta: l'immagine, il numero del token e
 * il grado. I tratti si aprono con l'occhio. Vale sia per il portale sia per
 * il portfolio, quindi le regole stanno qui. */
.pfoot{display:flex;align-items:center;gap:8px;padding:11px 12px;
  border-top:1px solid var(--line)}
.pfoot .tok{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);
  letter-spacing:.04em}
/* IL NUMERO SULL'IMMAGINE, IL GRADO NEL PIEDE.
 *
 * Nel piede ci stavano tutti e tre - numero, grado, tasto - e il grado era una
 * pastiglia alta trentadue che si prendeva quasi tutta la riga: su una scheda
 * stretta "LEGENDARY" veniva troncato. Il numero e' l'unico che puo' stare
 * sopra il disegno senza coprirne niente, perche' e' corto e sta in un angolo.
 * Il piede resta a due cose, una per lato. */
.shot{position:relative}
.shot .tok{position:absolute;top:7px;left:7px;z-index:2;
  padding:3px 7px;border-radius:7px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.04em;
  color:var(--ink);white-space:nowrap;
  background:rgba(6,8,12,.5);backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(243,241,236,.13)}

/* I PUNTI DEL PEZZO, in alto a destra, col numero del token dall'altra parte.
 * I due si leggono insieme in una riga sola e l'immagine sotto resta libera:
 * il grado e i tratti restano nella striscia scura, che e' dove si va a
 * cercarli.
 *
 * Il colore non segue il livello. Lo dice gia' la parola sotto la scheda, e
 * ripeterlo col colore farebbe sembrare che i punti siano un'altra faccia del
 * grado - mentre sono la somma di TUTTI i tratti, compresi quelli comuni. */
.shot .pts{position:absolute;right:7px;top:7px;z-index:2;
  display:flex;align-items:center;gap:5px;
  padding:3px 8px 3px 6px;border-radius:7px;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--lime);white-space:nowrap;
  background:rgba(6,8,12,.5);backdrop-filter:blur(10px) saturate(1.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(180,240,74,.3)}
.shot .pts svg{width:12px;height:12px;flex:none;fill:currentColor}

/* IL GRADO: minuscolo e senza cornice piena. Era un bottone che gridava piu'
   del disegno; qui e' una riga di testo col suo colore e un accenno di fondo,
   che a questa misura basta e avanza per riconoscerlo da lontano. */
.pfoot .rk{min-width:0;display:inline-flex;align-items:center;
  height:22px;padding:0 8px;border-radius:7px;
  border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  background:color-mix(in srgb, currentColor 9%, transparent);
  font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eye{flex:0 0 auto;margin-left:auto;display:grid;place-items:center;width:28px;height:28px;
  padding:0;cursor:pointer;border-radius:9px;border:1px solid var(--line2);
  background:transparent;color:var(--dim);transition:.15s}
.eye:hover{border-color:var(--lime);color:var(--lime)}
.eye svg{width:14px;height:14px}

/* L'ALONE AL PASSAGGIO DEL MOUSE. Un anello di lime intorno alla scheda, non
 * un'ombra grigia: le schede sono la cosa che si guarda e devono rispondere
 * quando le sfiori. Solo dove c'e' un mouse vero: sul telefono il :hover
 * resta appiccicato dopo il tocco e la scheda ci rimane accesa. */
@media (hover:hover){
  .piece{transition:border-color .18s, box-shadow .22s, transform .18s cubic-bezier(.2,1,.3,1)}
  .piece:hover{transform:translateY(-3px);border-color:rgba(180,240,74,.55);
    box-shadow:0 0 0 1px rgba(180,240,74,.28),
               0 0 34px -6px rgba(180,240,74,.45),
               0 26px 50px -30px #000}
}

body.bloccato{overflow:hidden}
.meta{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;
  background:rgba(4,5,8,.82)}
.meta-box{position:relative;width:min(420px,100%);max-height:92vh;overflow:auto;
  border-radius:22px;background:var(--deep);border:1px solid var(--line2);
  box-shadow:0 40px 90px -30px #000;
  scrollbar-width:none}
.meta-box::-webkit-scrollbar{display:none}
.meta-x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;
  width:36px;height:36px;padding:0;cursor:pointer;border-radius:999px;
  border:1px solid var(--line2);background:rgba(7,8,11,.72);color:var(--ink)}
.meta-x:hover{border-color:var(--lime);color:var(--lime)}
.meta-x svg{width:16px;height:16px}
/* A FILO, SENZA BANDE. `contain` teneva le proporzioni ma quando il tetto in
   altezza mordeva lasciava due strisce vuote ai lati, e il disegno galleggiava
   in mezzo a due margini scuri. L'immagine e' quadrata come il riquadro, quindi
   `cover` la fa combaciare esattamente: niente spazio sopra, niente a sinistra. */
.meta-img{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  background:radial-gradient(circle at 50% 40%,#161B24,#0A0C11)}
.meta-head{display:flex;align-items:center;gap:10px;padding:15px 18px 12px;
  border-bottom:1px solid var(--line)}
.meta-id{font-family:'Archivo Black',sans-serif;font-size:19px;letter-spacing:-.01em}
/* IL GRADO ALTO QUANTO L'OCCHIO, e non piu' una pastiglia sottile che sembrava
   una nota. Il colore lo porta gia' `currentColor` da chi lo disegna: qui si
   aggiunge un fondo velato dello stesso colore e un alone, cosi' un leggendario
   si vede che e' un leggendario prima di leggerlo. */
.meta-tier{margin-left:auto;display:inline-flex;align-items:center;height:32px;
  padding:0 14px;border-radius:999px;border:1px solid;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  background:currentColor;box-shadow:0 0 18px -6px currentColor}
/* il testo dentro non puo' essere del colore del fondo: si scrive sopra un velo */
.meta-tier{position:relative;isolation:isolate}
.meta-tier::before{content:'';position:absolute;inset:0;border-radius:inherit;
  background:#0B0E14;opacity:.86;z-index:-1}
/* ── I TRATTI, UNO PER RIQUADRO ────────────────────────────────────
   Righe separate da una linea sono una tabella: si legge in verticale, una dopo
   l'altra. Un tratto invece e' una cosa a se', e in due colonne di riquadri se
   ne abbracciano sei con un'occhiata. E' il modo in cui li mostrano i
   marketplace, ed e' il modo in cui la gente e' abituata a guardarli. */
.meta-rows{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
/* i punti si prendono tutte e due le colonne: sono un dato del pezzo come gli
   altri, ma uno solo, e mezza riga vuota accanto sarebbe un buco */
.meta-rows .r.larga{grid-column:1/-1}
.meta-rows .r{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:9px 11px;border:1px solid var(--line);border-radius:12px;
  background:rgba(243,241,236,.025);min-width:0}
.meta-rows .r .k{font-family:'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.meta-rows .r b{width:100%;min-width:0;font-weight:500;color:var(--ink);font-size:13px;
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta-rows .r b.none{color:var(--faint);font-style:italic;font-weight:400}
.meta-rows .r .l{font-family:'JetBrains Mono',monospace;font-size:9.5px}

/* LA BARRA IN BASSO NON ESISTE SUL DESKTOP. Sta spenta qui, in un foglio che
 * caricano tutte e due le pagine, e si accende solo dentro mobile.css. E' il
 * modo piu' semplice per essere certi che una cosa pensata per il telefono non
 * finisca mai su uno schermo grande. */
.dock{display:none}

@media (max-width:700px){
  :root{--bar:88px}          /* sul telefono la barra va a due righe */
  .topbar{grid-template-columns:1fr;justify-items:center;gap:8px;padding:13px 14px}
  .tb-brand{display:none}
  .tb-nav{position:fixed;top:13px;right:14px}
  .navlink{padding:7px 11px;font-size:10px;letter-spacing:.08em}
}

/* chi ha chiesto meno movimento lo ottiene: qui non c'e' niente di
 * indispensabile che si muova */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* AREE DI TOCCO. La "i" delle note, l'occhio dei tratti, le frecce del round,
   copia e chiudi restano piccoli a vedersi (13-28px) ma si devono prendere con
   un dito: un'area invisibile intorno li porta a ~40px, senza spostare niente.
   Vale per tutte le pagine, che li disegnano ognuna coi suoi stili. */
/* `.meta-x` NON VA IN QUESTO ELENCO: e' gia' `position:absolute` in alto a
   destra della finestra (riga 525), e questo `relative` - scritto dopo, stesso
   peso - glielo cancellava. Risultato: la X tornava nel flusso e finiva in alto
   a SINISTRA, in tutte le finestre `.meta`. Per l'area di tocco piu' grande
   basta lo `::after` qui sotto, che funziona uguale con `absolute`. */
.ics,.eye,.frec,.copia,.chiudi{position:relative}
.ics::after,.eye::after,.frec::after,.copia::after,.chiudi::after,.meta-x::after{
  content:'';position:absolute;inset:-6px}
.ics::after{inset:-13px}

/* La scheda intera apre i tratti (portfolio e portale): lo dice il cursore. */
.piece{cursor:pointer}

/* ── LA STRISCIA DEI PRESERVATIVI ─────────────────────────────────
   Compare solo a chi ha un pacchetto sull'indirizzo. Chi non ne ha non vede
   niente e la consolle resta quella di sempre: una quarta porta l'avrebbero
   vista tutti per una cosa che riguarda pochi, e da telefono la fila delle tab
   e' gia' piena. */
.condomina{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px;margin:0 0 22px;border-radius:14px;
  background:linear-gradient(100deg,rgba(255,92,168,.20),rgba(167,139,255,.12) 48%,rgba(92,216,255,.10));
  border:1px solid rgba(255,92,168,.5);box-shadow:0 0 0 1px rgba(255,92,168,.10),0 10px 30px -20px #000}
.condomina[hidden]{display:none}
.condomina .busta{flex:0 0 42px;width:42px;height:42px;border-radius:10px;object-fit:cover;display:block;
  border:1px solid rgba(243,241,236,.25)}
.condomina .dice{flex:1;min-width:0;font:400 10.5px 'JetBrains Mono',monospace;color:var(--dim);
  letter-spacing:.03em;line-height:1.5}
.condomina .dice b{display:block;font-family:'Archivo Black',sans-serif;font-size:14px;
  color:var(--ink);font-weight:400;letter-spacing:-.01em;margin-bottom:2px}
.condomina .dice em{font-style:normal;color:var(--pink);font-weight:700}
/* Nel portale e' un tasto, nel profilo e' un collegamento al portale: stessa
   faccia, cosi' e' la stessa cosa anche a guardarla. */
.condomina a.apri{display:flex;align-items:center;text-decoration:none}
.condomina .apri{flex:0 0 auto;border:0;border-radius:11px;height:38px;padding:0 20px;cursor:pointer;
  font:700 11.5px 'JetBrains Mono',monospace;letter-spacing:.12em;background:var(--pink);color:#0A0C10;
  box-shadow:0 8px 22px -10px rgba(255,92,168,.9)}
.condomina .apri:hover{filter:brightness(1.08)}
.condomina .apri:disabled{opacity:.45;pointer-events:none}
.condomina .apri:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media (max-width:560px){
  /* niente a capo: il portale qui sotto e' gia' alto, e tre righe in cima sono
     tre righe di macchina in meno */
  .condomina{gap:9px;padding:8px;margin-bottom:16px}
  .condomina .busta{flex:0 0 36px;width:36px;height:36px}
  .condomina .dice{font-size:9.5px}
  .condomina .dice b{font-size:12.5px}
  .condomina .apri{height:34px;padding:0 14px;font-size:10.5px;letter-spacing:.08em}
}
