/* Gradiente IA — sito (GitHub Pages). Nessun build: CSS a mano, variabili in :root. */

/* Space Grotesk ospitato qui (SIL OFL, assets/font/OFL.txt): nessuna richiesta a Google Fonts */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('font/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('font/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --carta: #fbfaf7;
  --carta-2: #f1eee8;
  --inchiostro: #1c1d21;
  --tenue: #5d6069;
  --filo: #d9d5cc;
  --accento: #2f5d8a;
  --f: 'Space Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --larghezza: 700px;   /* colonna del testo; il padding laterale si aggiunge fuori */
  --raggio: 10px;
  --pad-fascia: 1.5rem;        /* spazio sopra e sotto uguale in tutte le fasce richiudibili (profilo, personalizza, condividi) */
  --sfondo-prova: transparent;   /* sfondo dell'anteprima dei badge: solo per provarli, non entra nei file */
  --h-testata: 3.5rem;       /* altezza della testata sticky: il menu dei livelli si aggancia sotto */
  --ok: #2a8c82;
}
/* pagine in cinese: Space Grotesk per lettere e cifre, Noto Sans SC (Google Fonts) per i caratteri cinesi, poi quelli di sistema */
:root:lang(zh) {
  --f: 'Space Grotesk', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
}
:root:lang(zh) body { line-height: 1.75; }
:root:lang(zh) em { font-style: normal; }
/* tema scuro: scelto dallo switch (data-theme, vedi assets/theme-toggle.js) o, senza JS, dal sistema */
:root[data-theme="dark"] {
  --carta: #15161a;
  --carta-2: #1f2026;
  --inchiostro: #ecebe7;
  --tenue: #a4a6ad;
  --filo: #34363d;
  --accento: #8fb5dc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --carta: #15161a;
    --carta-2: #1f2026;
    --inchiostro: #ecebe7;
    --tenue: #a4a6ad;
    --filo: #34363d;
    --accento: #8fb5dc;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7.5rem; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.6 var(--f);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accento); text-underline-offset: 0.18em; }
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; margin: 0 0 0.5em; }
h2 { font-size: 2rem; letter-spacing: -0.01em; }
/* filetto sopra ogni titolo h2: nero sul tema chiaro, bianco sullo scuro (tranne i titoli delle fasce, che hanno già il loro) */
main h2:not(.titolo-fascia) { border-top: 1px solid var(--inchiostro); padding-top: 0.45em; }
h3 { font-size: 1.3rem; margin-top: 1.8em; }
h4 { font-size: 1.05rem; margin-top: 1.4em; }
.etichetta { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tenue); margin-top: 1.8em; }
code, pre { font-family: var(--mono); font-size: 0.85em; }
:not(pre) > code { background: var(--carta-2); padding: 0.05em 0.35em; border-radius: 4px; }
pre { background: var(--carta-2); border: 1px solid var(--filo); border-radius: var(--raggio); padding: 1rem; overflow-x: auto; line-height: 1.5; }

.riga { max-width: calc(var(--larghezza) + 2rem); margin: 0 auto; padding: 0 1rem; }
/* spazio sopra ogni sezione con h2: lo stesso che separa due schede dei livelli (fine scheda + inizio scheda) */
:root { --spazio-sezione: 7rem; }
main > section, main > section.riga { padding-top: var(--spazio-sezione); }   /* .riga azzerava il padding superiore */
main > .intro { padding-top: 4rem; }
/* «Salta le configurazioni: Genera subito» sotto il menu e sotto i profili: porta alla pagina ridotta */
.salta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-block: 0; font-size: 0.9rem; color: var(--tenue); }
main > .salta { padding-top: 1.5rem; }
main > .salta + .intro { padding-top: 2.5rem; }
.fascia-profili .salta { margin-top: 1rem; }
a.bottone { text-decoration: none; }
.badge-nome { overflow-wrap: anywhere; }
.torna { margin-top: 2rem; }
main > #livelli { padding-top: 2rem; }   /* la galleria segue subito le fasce: le schede hanno già il loro spazio */

/* testata */
.testata { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--filo); background: var(--carta); }
.briciole { display: none; position: relative; min-width: 0; }
body.scorsa .menu-sezioni { display: none; }
.testata .riga { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; min-height: var(--h-testata); flex-wrap: wrap; }
/* briciola a tendina (come l'indice di madeprogram): «Gradiente IA» è un link semplice,
   il capitolo corrente è un pulsante a pillola sempre visibile che apre l'elenco degli h2 */
.briciole { align-items: center; gap: 0.6rem; }
body.scorsa .briciole { display: flex; }
.titolo-pagina { font-weight: 700; white-space: nowrap; color: var(--inchiostro); text-decoration: none; }
.titolo-pagina:hover { color: var(--accento); }
.sep { color: var(--tenue); }
/* separatore della briciola: un pallino pieno, ben visibile (al posto del trattino) */
.sep { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; font-size: 0; flex: none; }
.briciole-btn {
  display: flex; align-items: center; gap: 0.45rem; min-width: 0;
  font: inherit; font-size: 0.95rem; color: var(--inchiostro); background: none;
  border: 1px solid var(--filo); border-radius: 999px; padding: 0.35rem 0.75rem 0.35rem 0.95rem; cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.briciole-btn:hover, .briciole-btn[aria-expanded="true"] { border-color: var(--inchiostro); }
.capitolo-corrente { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.briciole-btn .freccia { flex: none; width: 16px; height: 16px; color: var(--tenue); transition: transform 0.2s; }
.briciole-btn[aria-expanded="true"] .freccia { transform: rotate(180deg); }
.indice-tendina {
  position: absolute; left: 0; top: calc(100% + 0.5rem); z-index: 40;
  min-width: 16rem; max-height: 70vh; overflow-y: auto; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--carta); border: 1px solid var(--filo); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.indice-tendina[hidden] { display: none; }
.indice-tendina a { display: block; padding: 0.5rem 0.8rem; border-radius: 9px; color: var(--tenue); text-decoration: none; font-size: 0.92rem; }
.indice-tendina a:hover { background: var(--carta-2); color: var(--inchiostro); }
.indice-tendina li.corrente a { color: var(--inchiostro); font-weight: 600; }
.indice-tendina li.livello-voce a { padding-left: 1.6rem; }
.testata nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.95rem; justify-content: flex-start; }
.testata nav a { color: inherit; text-decoration: none; }
.testata nav a:hover { color: var(--accento); }
/* selettore lingua: globo (Lucide globe) che apre un menu a tendina */
.testata .riga { gap: 0.8rem 1.2rem; }
.header-lang { position: relative; display: flex; align-items: center; margin-left: auto; }
.lang-toggle {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0;
  color: var(--tenue); background: none; border: 1px solid var(--filo); border-radius: 50%; cursor: pointer;   /* cerchietto leggero anche a riposo */
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang-toggle svg { width: 20px; height: 20px; }
.lang-toggle:hover, .header-lang.is-open .lang-toggle { color: var(--inchiostro); border-color: var(--inchiostro); }   /* come il tondino delle fasce */
.lang-panel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 40;
  min-width: 12rem; background: var(--carta);
  border: 1px solid var(--filo); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.header-lang.is-open .lang-panel { opacity: 1; visibility: visible; transform: none; }
.lang-panel.a-destra { right: auto; left: 0; }
.lang-panel-inner { padding: 0.35rem; }
.lang-panel ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lang-panel a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 9px;
  color: var(--tenue); text-decoration: none; font-size: 0.92rem; white-space: nowrap;
}
.lang-panel a::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.lang-panel a:hover { background: var(--carta-2); color: var(--inchiostro); }
.lang-panel a.is-active { color: var(--inchiostro); font-weight: 600; }
.lang-panel a.is-active::before { background: var(--accento); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* intro */
.intro h1 { font-size: clamp(2.6rem, 8vw, 5.5rem); letter-spacing: -0.03em; margin: 0; }
.sottotitolo { font-size: clamp(1.1rem, 2.6vw, 1.6rem); margin: 0.2rem 0 1.4rem; color: var(--tenue); }
.lead { font-size: 1.2rem; max-width: 44rem; }
/* avviso «Simple English»: in evidenza con lo stesso filetto su tutti i lati, angoli tutti stondati */
.avviso-lingua { margin: 1.5rem 0 1rem; padding: 1rem 1.2rem; border: 2px solid var(--accento); border-radius: var(--raggio); background: var(--carta-2); font-size: 0.95rem; }
.avviso-lingua p { margin: 0 0 0.6rem; }
.avviso-lingua p:last-child { margin-bottom: 0; }
.occhiello-profilo { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tenue); }
/* profili: testo del profilo sopra i pulsanti, fascia con filetti al vivo come il pannello */
.fascia-profili { margin-top: 2rem; border-top: 1px solid var(--filo); padding: var(--pad-fascia) 0; }
.fascia-profili .occhiello-profilo { margin: 0; }
.profili { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fascia-profili + .pannello { margin-top: 0; }   /* un solo filetto fra le due fasce */
/* «Genera subito»: le schede seguono subito la fascia dei profili, che si chiude col suo filetto come «Condividi» in homepage */
.fascia-profili:has(+ #livelli) { border-bottom: 1px solid var(--filo); }
.fascia-profili + #livelli > .livello:first-child { border-top: none; padding-top: 1rem; }
/* striscia sotto il pannello: condividere la configurazione o tornare a quella di partenza */
.pannello:has(+ .fascia-condividi) { margin-bottom: 0; }
.fascia-condividi { border-bottom: 1px solid var(--filo); padding: var(--pad-fascia) 0; margin-bottom: 2rem; }
.fascia-condividi .corpo-fascia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.2rem; }
.fascia-condividi p { margin: 0; font-size: 0.85rem; color: var(--tenue); }
.fascia-condividi .azioni { margin: 0; }
/* «Introduzione»: titolo di sezione per il menu, sotto il sottotitolo */
.intro .titolo-intro { margin: 1.6rem 0 0.6rem; }
.profili a { font-size: 0.9rem; color: var(--inchiostro); text-decoration: none; border: 1px solid var(--filo); border-radius: 999px; padding: 0.35rem 0.9rem; }
.profili a:hover { border-color: var(--inchiostro); }
.profili a[aria-current="page"] { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.nota-fonte { font-size: 0.9rem; color: var(--tenue); }

/* pannello di personalizzazione */
.pannello {
  margin-bottom: 2rem;   /* respiro fra i comandi e i badge; non è sticky */
  border-block: 1px solid var(--filo);
  margin-top: 1rem; padding: var(--pad-fascia) 0 !important;
}
/* pannello: stile masterismi.dev — tutto a pillola */
.comandi { display: flex; flex-direction: column; align-items: stretch; gap: 0.8rem; font-size: 0.85rem; }
/* quattro righe: forma · colore · peso, traccia/pieno, sfondo · licenza */
.linea { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center; }
/* gruppi a scelta singola, a pillola */
.gruppo { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--filo); border-radius: 999px; }
.scelta {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 32px;
  padding: 0.3rem 0.95rem; border-radius: 999px; cursor: pointer; color: var(--tenue); user-select: none;
}
.scelta:hover { color: var(--inchiostro); }
.scelta[aria-checked="true"] { background: var(--inchiostro); color: var(--carta); }
.scelta:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.scelta input[type=color] {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--filo); border-radius: 50%; background: none; cursor: pointer; overflow: hidden;
}
.scelta input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.scelta input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
.scelta input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }
/* licenza: cursore largo quanto la colonna */
.linea-licenza label { flex: 1; }
.linea-licenza input[type=range] { flex: 1; width: auto; }
.comandi label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tenue); }
.comandi input[type=range] { appearance: none; -webkit-appearance: none; width: 110px; height: 4px; border-radius: 999px; background: var(--filo); cursor: pointer; }
.comandi input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--inchiostro); border: none; }
.comandi input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--inchiostro); border: none; }
.comandi output { min-width: 2.2em; color: var(--inchiostro); font-variant-numeric: tabular-nums; }
/* "Pieno": checkbox resa come interruttore, come lo switch chiaro/scuro */
.spunta input[type=checkbox] {
  appearance: none; -webkit-appearance: none; position: relative; margin: 0;
  width: 40px; height: 22px; border: 1px solid var(--filo); border-radius: 999px; cursor: pointer; background: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.spunta input[type=checkbox]::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--tenue); transition: transform 0.2s ease, background 0.2s ease;
}
.spunta input[type=checkbox]:checked { background: var(--inchiostro); border-color: var(--inchiostro); }
.spunta input[type=checkbox]:checked::after { transform: translateX(18px); background: var(--carta); }
.sfondo-prova { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--tenue); }
.sfondo-etichetta { margin-right: 0.1rem; }
.campione, .sfondo-prova input[type=color] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--filo); background: var(--campione);
  transition: transform 0.15s, box-shadow 0.15s;
}
/* trasparente: scacchiera, come nei programmi di grafica */
.campione[data-sfondo="transparent"] { background: repeating-conic-gradient(#c9c9c9 0 25%, #ffffff 0 50%) 50% / 10px 10px; }
.campione:hover, .sfondo-prova input[type=color]:hover { transform: scale(1.1); }
.campione[aria-pressed="true"], .sfondo-prova input[type=color].scelto { box-shadow: 0 0 0 2px var(--carta), 0 0 0 4px var(--inchiostro); }
.sfondo-prova input[type=color] { overflow: hidden; background: conic-gradient(#e63946, #f2c14e, #2a9d8f, #457b9d, #9b5de5, #e63946); }
.sfondo-prova input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.sfondo-prova input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; opacity: 0; }
.sfondo-prova input[type=color]::-moz-color-swatch { border: none; opacity: 0; }
.sfondo-prova input[type=color].scelto::-webkit-color-swatch { opacity: 1; }
.sfondo-prova input[type=color].scelto::-moz-color-swatch { opacity: 1; }
.comandi :focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

/* galleria */
.galleria { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.galleria a { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid var(--filo); border-radius: var(--raggio); padding: 0.8rem; background: var(--sfondo-prova); transition: transform 0.15s, border-color 0.15s; }
.galleria a:hover { transform: translateY(-2px); border-color: var(--tenue); }
.galleria img { display: block; width: 100%; height: auto; max-height: 100%; }
/* etichette: una sotto l'altra, a bandiera a sinistra (larghezze diverse, stessa altezza) */
body[data-variant="label"] .galleria { grid-template-columns: 1fr; justify-items: start; gap: 0.6rem; }
body[data-variant="label"] .galleria a { aspect-ratio: auto; display: block; }
/* etichette: stessa altezza per tutti i livelli, la larghezza segue il nome */
body[data-variant="label"] .galleria img { width: auto; height: 3rem; max-width: none; }

/* menu dei livelli: sticky sotto la testata, con traccia di avanzamento */
.nav-livelli {
  position: sticky; top: var(--h-testata); z-index: 20;
  margin: 0 -1rem; padding: 0.55rem 1rem 0;
  background: color-mix(in srgb, var(--carta) 94%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filo);
}
/* voci a larghezza naturale, distribuite sulla riga (flex, non colonne fisse): i nomi lunghi si accorciano per ultimi */
.nav-livelli ol { display: flex; justify-content: space-between; gap: 0.3rem 1rem; margin: 0; padding: 0; list-style: none; }
.nav-livelli li { flex: 0 1 auto; min-width: 0; }
.nav-livelli a { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.2rem 0.5rem; color: var(--tenue); text-decoration: none; font-size: 0.8rem; white-space: nowrap; overflow: hidden; }
.nav-num {
  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid currentColor; font-size: 0.75rem; font-weight: 700;
}
.nav-nome { overflow: hidden; text-overflow: ellipsis; }
.nav-livelli a:hover { color: var(--inchiostro); }
.nav-livelli a.attivo { color: var(--inchiostro); font-weight: 700; }
.nav-livelli a.attivo .nav-num { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.traccia { height: 3px; margin: 0 -1rem; background: var(--filo); }
.traccia-barra { height: 100%; width: 0; background: var(--inchiostro); transition: width 0.1s linear; }

/* scheda livello: testo, poi le uscite (badge, pulsanti, testo con link, Markdown, indicazione) */
.livello { padding: 3rem 0; border-top: 1px solid var(--filo); }
.nav-livelli + .livello { border-top: none; }
.livello:last-child { padding-bottom: 0; }   /* dopo l'ultima scheda lo spazio lo dà la sezione successiva */
.uscite {
  /* curvature concentriche: disegno, riquadro del timbro e scheda hanno lo stesso centro nell'angolo in alto a sinistra.
     Ogni raggio = raggio interno + spazio fra i due bordi (padding + 1px di bordo) */
  --p-u: 1.5rem;                                            /* padding della scheda */
  --p-t: 1rem;                                              /* padding del riquadro del timbro */
  --r-img: calc((13rem - 2 * var(--p-t) - 2px) / 2);        /* timbro e pittogramma sono cerchi: metà del lato */
  --r-t: calc(var(--r-img) + var(--p-t) + 1px);             /* riquadro del timbro */
  --r-u: calc(var(--r-t) + var(--p-u) + 1px);               /* scheda */
  margin-top: 2rem; padding: var(--p-u); border: 1px solid var(--filo);
  border-radius: 18px;                                      /* la scheda torna con i quattro angoli uguali (--r-u resta per chi volesse l'angolo concentrico) */
}
body[data-variant="label"] .uscite { --r-img: 2rem; }      /* etichetta a pillola alta 4rem: metà altezza */
.uscite-timbro { display: block; width: 13rem; max-width: 100%; background: var(--sfondo-prova); border: 1px solid var(--filo); border-radius: var(--r-t); padding: var(--p-t); transition: background 0.2s; }
body[data-variant="label"] .uscite-timbro { width: fit-content; }
.uscite-timbro img { display: block; width: 100%; height: auto; }
body[data-variant="label"] .uscite-timbro img { width: auto; height: 4rem; }
.uscite > .azioni:first-of-type { margin-top: 1rem; }
.badge-nome { margin: 1.5rem 0 0; font-weight: 500; }
.badge-md { display: block; margin-top: 1.2rem; font-size: 0.8rem; line-height: 1.5; color: var(--tenue); background: var(--carta-2); border-radius: 10px; padding: 0.6rem 0.8rem; overflow-wrap: anywhere; }
.uscite .etichetta { margin-top: 1.8rem; }
/* dopo l'etichetta: il profilo in uso e il link per cambiarlo (riporta alla fascia dei profili) */
.etichetta-profilo { font-weight: 400; text-transform: none; letter-spacing: 0; }
.etichetta-profilo a { color: inherit; }
.occhiello { display: flex; align-items: center; gap: 0.55rem; margin: 0; color: var(--tenue); font-size: 0.95rem; }
/* «Gradiente 1 ● AUTONOMIA»: lo stesso pallino della briciola, in grigio */
.occhiello .pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tenue); flex: none; }
.occhiello-nome { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85em; font-weight: 600; }
.livello h2 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 0.1em; }
/* box di testo da copiare: bordi arrotondati, pulsante «Copia» dentro */
.box-copia { border: 1px solid var(--filo); border-radius: 16px; background: var(--carta-2); padding: 1rem 1.2rem; }
.box-copia p { margin: 0; }
.box-copia .azioni { margin-top: 0.9rem; }
/* elenchi: pallino appeso fuori dal blocco, testo allineato a sinistra col resto */
main ul { padding-left: 0; list-style: none; }
main ul > li { position: relative; }
/* pallino dell'elenco: 9 px come quello della briciola, appeso fuori dal testo e centrato sulla prima riga */
main ul > li::before {
  content: ''; position: absolute; left: -1.15em; top: calc(0.8em - 4.5px);   /* 0,8em = metà della prima riga (interlinea 1,6) */
  width: 9px; height: 9px; border-radius: 50%; background: var(--tenue);
}
/* dentro un box in evidenza il pallino resta nel box: il testo dell'elenco rientra della stessa misura */
:is(.copia-fissa, .box-copia, .avviso-lingua) ul { padding-left: 1.15em; }
.esempi { margin: 0; }
.esempi li { margin-bottom: 0.3rem; }
.esempi li::before { background: var(--c, var(--accento)); }
.azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }

.bottone {
  display: inline-flex; align-items: center; gap: 0;
  font: 500 0.85rem var(--f); color: var(--inchiostro);
  background: none; border: 1px solid var(--filo); border-radius: 999px;
  padding: 0.55rem 1.1rem; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s, gap 0.15s;
}
.bottone:hover { border-color: var(--inchiostro); }
/* spunta (Lucide check) mostrata dopo ogni azione riuscita */
.bottone .i-fatto { width: 0; height: 15px; opacity: 0; transition: width 0.15s, opacity 0.15s; }
.bottone.fatto { gap: 0.4rem; border-color: var(--ok); color: var(--ok); }
.bottone.fatto .i-fatto { width: 15px; opacity: 1; }

/* usare, licenza, fonti */
.tecnica { margin-top: 2rem; }
.cc { font-size: 0.9rem; color: var(--tenue); }
.cc img { display: block; margin: 0 0 0.6rem; }

.bibliografia li { margin-bottom: 0.5rem; }
/* come il progetto ha usato l'IA: sottotitolo, badge come contenuto, testo.
   Badge contornato in currentColor: nero sul tema chiaro, bianco sul tema scuro */
.gradiente-progetto h4 { margin-bottom: 0.6rem; }
.badge-progetto { margin: 0 0 0.6rem; color: #000; }
.badge-progetto svg { display: block; width: 220px; height: auto; }
:root[data-theme="dark"] .badge-progetto { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .badge-progetto { color: #fff; } }
.piccolo { font-size: 0.9rem; color: var(--tenue); }
.piede { border-top: 1px solid var(--filo); margin-top: 4rem; padding-block: 2rem 3rem; font-size: 0.85rem; line-height: 1.55; color: var(--tenue); }
.piede p { margin: 0 0 0.9rem; }
.piede .titolo-piede { color: var(--inchiostro); font-weight: 700; font-size: 0.95rem; }
.piede nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--filo); }
.piede a { color: inherit; }
.piede-comandi { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }
.lingue-piede { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; padding: 0; list-style: none; }
.lingue-piede a { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
.lingue-piede a::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.lingue-piede a.is-active { color: var(--inchiostro); font-weight: 600; }
.lingue-piede a.is-active::before { background: var(--accento); }
.lingue-piede a:hover { color: var(--inchiostro); }

/* switch chiaro/scuro — da masterismi.dev (assets/style.css) */
.theme-switch {
  width: 50px; height: 28px;
  border: 1px solid var(--filo);
  border-radius: 999px;
  position: relative;
  background: none;
  cursor: pointer;
  padding: 0;
  color: var(--tenue);
}
.theme-switch .icon-sun, .theme-switch .icon-moon {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px;
}
.theme-switch .icon-sun { left: 6px; }
.theme-switch .icon-moon { right: 6px; }
.theme-switch svg { display: block; width: 12px; height: 12px; }
.theme-switch .knob {
  position: absolute; top: 4px; left: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--inchiostro);
  transition: transform 0.2s ease;
}

/* banner cookie (CookieConsent 3) — stessi valori di masterismi.dev */
#cc-main {
  --cc-font-family: inherit;
  --cc-btn-border-radius: 999px;
  --cc-modal-border-radius: 16px;
  --cc-pm-toggle-border-radius: 999px;
  --cc-bg: var(--carta);
  --cc-primary-color: var(--inchiostro);
  --cc-secondary-color: var(--inchiostro);
  --cc-btn-primary-bg: var(--inchiostro);
  --cc-btn-primary-color: var(--carta);
  --cc-btn-primary-border-color: var(--inchiostro);
  --cc-btn-primary-hover-bg: var(--inchiostro);
  --cc-btn-primary-hover-color: var(--carta);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--inchiostro);
  --cc-btn-secondary-border-color: var(--filo);
  --cc-btn-secondary-hover-bg: var(--filo);
  --cc-btn-secondary-hover-color: var(--inchiostro);
  --cc-separator-border-color: var(--filo);
  --cc-cookie-category-block-bg: transparent;
  --cc-cookie-category-block-border: var(--filo);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-section-category-border: var(--filo);
  --cc-overlay-bg: rgba(0,0,0,.35);
}
#cc-main .cm, #cc-main .pm { box-shadow: 0 .625em 1.875em rgba(0,0,0,.3); }
:root[data-theme="dark"] #cc-main .cm, :root[data-theme="dark"] #cc-main .pm { box-shadow: 0 .625em 1.875em rgba(255,255,255,.15); }
/* preferenze cookie: niente traccia attorno alle sezioni (con i bottoni a pillola il bordo diventava una pillola enorme) */
#cc-main .pm__section, #cc-main .pm__section:not(:first-child):hover { border: none; background: none; padding: 0.5em 0; }
/* categoria aperta: il titolo resta una pillola intera, la descrizione sotto senza traccia */
#cc-main .pm__section-title, #cc-main .pm__section--expandable .pm__section-arrow ~ * { border-radius: var(--cc-btn-border-radius) !important; }
#cc-main .pm__section-desc-wrapper { border: none; border-radius: 0; }
#cc-main .pm__section-desc { padding: 0.8em 1em 0; }

@media (max-width: 52rem) {
  .galleria { grid-template-columns: repeat(3, 1fr); }
  .nav-nome { display: none; }
}
@media (max-width: 30rem) {
  .galleria { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .galleria a { padding: 0.4rem; }
  .uscite { --p-u: 1rem; }
}

/* ---- telefono e tablet stretto (fino a 48rem, ~768 px) ---- */
@media (max-width: 48rem) {
  body { font-size: 1rem; }
  h2 { font-size: 1.6rem; }
  .intro h1 { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .lead { font-size: 1.05rem; }
  main > .intro { padding-top: 2.2rem; }
  :root { --spazio-sezione: 5rem; }

  /* testata su una riga: il menu scorre in orizzontale invece di andare a capo, il globo resta a destra */
  .testata .riga { flex-wrap: nowrap; gap: 0.6rem; }
  .testata .menu-sezioni {
    flex-wrap: nowrap; overflow-x: auto; min-width: 0; gap: 1rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 0.2rem 0;
  }
  /* dissolvenza a destra solo quando il menu non ci sta e scorre (classe messa da sito.js) */
  .testata .menu-sezioni.scorre {
    mask-image: linear-gradient(90deg, #000 85%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .testata .menu-sezioni::-webkit-scrollbar { display: none; }
  .testata .menu-sezioni a { flex: none; white-space: nowrap; }
  .header-lang { flex: none; }
  /* briciola: il nome del progetto resta, il capitolo si accorcia con i puntini */
  .briciole { min-width: 0; flex: 1; }
  .briciole-btn { font-size: 0.9rem; padding: 0.3rem 0.6rem 0.3rem 0.8rem; }
  .indice-tendina { min-width: 0; width: min(18rem, calc(100vw - 2rem)); }

  /* pulsanti un po' più compatti: i tre del badge stanno su una riga */
  .bottone { font-size: 0.8rem; padding: 0.5rem 0.85rem; }
  .uscite .azioni { gap: 0.4rem; }
  .uscite .bottone { padding: 0.5rem 0.7rem; }
  .livello { padding: 2.2rem 0; }
  .livello h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }

  /* codice: scorre dentro il suo riquadro, corpo più piccolo */
  pre { font-size: 0.78em; padding: 0.8rem; }
}
@media print {
  .piede-comandi, .pannello, .fascia-condividi, .fascia-profili, .testata, .nav-livelli, .azioni, #usare, .galleria { display: none; }
  .livello { break-inside: avoid; }
}


/* fasce richiudibili (profilo, personalizza, condividi): titolo a sinistra, tondino +/× a destra; all'inizio aperte */
.testa-fascia { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.testa-fascia + .corpo-fascia { margin-top: 0.8rem; }
.corpo-fascia[hidden] { display: none !important; }
.titolo-fascia { margin: 0; font-size: 0.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tenue); }
.apri-chiudi {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0;
  color: var(--tenue); background: none; border: 1px solid var(--filo); border-radius: 50%; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.apri-chiudi:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
.apri-chiudi svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.apri-chiudi[aria-expanded="true"] svg { transform: rotate(45deg); }   /* aperta: il + diventa × */

/* il titolo della fascia si clicca come il tondino */
.titolo-fascia { cursor: pointer; user-select: none; }
.testa-fascia:hover .apri-chiudi { border-color: var(--inchiostro); color: var(--inchiostro); }

/* «Copia fissa o sempre aggiornata?» in cima a Usare i timbri */
.copia-fissa { margin: 1.5rem 0 0.5rem; padding: 1rem 1.2rem; border: 1px solid var(--filo); border-radius: 16px; background: var(--carta-2); }
.copia-fissa h3 { margin-top: 0; }
.copia-fissa ul { margin: 0 0 0.6rem; }
.copia-fissa p { margin: 0; }


/* informativa privacy: pagina di solo testo */
.pagina-testo .testata .riga { display: flex; align-items: center; justify-content: space-between; }
.pagina-testo main { padding: 4rem 0 6rem; }
.pagina-testo h1 { font-size: 2.6rem; margin-bottom: 0.3em; }
.pagina-testo h2 { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--filo); font-size: 1.4rem; }

/* Come collaborare: i tre passi */
.passi { padding-left: 1.4rem; }
.passi li { margin: 0.4rem 0; }