/* Koinon — foglio di stile unico.
   Ordine: colori, base, barra, prima pagina, sondaggio, mi presento,
   pagine dei programmi, piè di pagina, schermi stretti. */

:root{
  --fondo:#0d0f13;
  --fondo-alto:#12151b;
  --superficie:#151a21;
  --filo:#222833;
  --filo-tenue:#1b2028;
  --inchiostro:#e8e4dc;
  --inchiostro-tenue:#8d8579;
  --accento:#d99a63;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  /* Sfondo di tutto il sito: la fotografia sfumata, capovolta perche il buio
     stia in alto — sotto la barra e i titoli il testo deve restare leggibile —
     con sopra un velo leggero che si schiarisce scendendo. */
  background:
    linear-gradient(rgba(10,12,16,.72), rgba(10,12,16,.30)),
    url("/immagini/sfondo.jpg") center top / cover fixed no-repeat,
    var(--fondo);
  color:var(--inchiostro);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit}
h1,h2,h3{font-family:Georgia,"Iowan Old Style",serif;font-weight:400;letter-spacing:-.015em}

/* ---- barra in alto ---- */

/* La barra deve stare sopra al contenuto, se no le tendine dei menu
   finiscono dietro ai riquadri della pagina: il fondo semitrasparente
   con la sfocatura crea un contesto di impilamento tutto suo. */
.barra{position:relative;z-index:50;
  background:rgba(10,12,16,.55);backdrop-filter:blur(6px);
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  max-width:1440px;margin:0 auto;padding:26px 40px;
}
.logo{display:flex;align-items:center;gap:7px;text-decoration:none}
.logo svg{flex:none}
.logo img{display:block;height:25px;width:auto}
.marchio-testo{display:block}
.marchio-testo small{
  display:block;margin-top:6px;margin-left:2px;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#635c51;
}
.menu{display:flex;align-items:center;gap:9px}
.tenda{position:relative}
.tenda summary{
  list-style:none;cursor:pointer;
  padding:7px 12px;border:1px solid var(--filo);border-radius:999px;
  background:#12161c;font-size:14px;color:var(--inchiostro);
}
.tenda summary::-webkit-details-marker{display:none}
.tenda summary:after{content:"▾";margin-left:8px;color:var(--inchiostro-tenue);font-size:11px}
.tenda[open] summary{border-color:#39414f}
.tenda ul{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;min-width:230px;
  list-style:none;background:var(--superficie);border:1px solid var(--filo);
  border-radius:10px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.tenda ul a{
  display:block;padding:9px 12px;border-radius:7px;text-decoration:none;font-size:14.5px;
}
.tenda ul a:hover{background:#1b212a}
.tenda ul small{
  display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:#6d6559;margin-top:2px;
}
.lavori{color:var(--accento);font-size:13px}
.tenda .pannello{
  position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:330px;
  background:var(--superficie);border:1px solid var(--filo);border-radius:10px;
  padding:18px 20px 16px;box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.tenda .pannello p{color:#b6afa3;font-size:14px;margin-bottom:9px}
.tenda .pannello .riga-posta{margin-top:12px;margin-bottom:0}
.tenda .pannello a{color:var(--accento)}
.pannello-contatti{width:290px}
.etichetta-contatto{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6d6559;margin-bottom:8px;
}
.indirizzo-posta{
  display:block;font-family:Consolas,"SFMono-Regular",monospace;font-size:15.5px;
  color:var(--accento);text-decoration:none;padding:10px 12px;
  background:#11151b;border:1px solid var(--filo);border-radius:8px;
}
.indirizzo-posta:hover{border-color:var(--accento)}
.copia{
  margin-top:10px;width:100%;cursor:pointer;font-family:inherit;font-size:14px;
  padding:9px 12px;border:1px solid #313742;border-radius:8px;
  background:transparent;color:var(--inchiostro);
}
.copia:hover{border-color:#4a5260}
.nota-contatto{font-size:12.5px;color:#6d6559;margin-top:12px;margin-bottom:0;line-height:1.5}
.menu .voce{font-size:14px;color:var(--inchiostro-tenue);text-decoration:none}
.menu .voce.pillola{
  padding:7px 12px;border:1px solid var(--filo);border-radius:999px;
  background:#12161c;color:var(--inchiostro);
}
.menu .voce.pillola:hover{border-color:#39414f}
.menu .voce:hover{color:var(--inchiostro)}

/* ---- prima pagina: parola a sinistra, sondaggio a destra ---- */

.hero{
  background:radial-gradient(1100px 520px at 78% 18%,rgba(217,154,99,.16),transparent 62%);
  padding-bottom:70px;
}
.apertura-corpo{
  max-width:1440px;margin:0 auto;padding:52px 60px 80px;
  display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:36px;align-items:stretch;
}
.parola{display:flex}
h1{font-size:60px;line-height:1.06}
h1 em{font-style:normal;color:var(--accento)}
.claim{margin-top:24px;font-size:19px;color:var(--inchiostro-tenue);max-width:32em}
.azioni{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* nella riga delle azioni il tasto delle domande sta in linea con gli altri */
.azioni .verso-github.domande{margin-top:0}
.btn{
  display:inline-block;padding:14px 28px;border-radius:6px;
  background:var(--accento);color:#17130e;font-size:15px;font-weight:600;text-decoration:none;
}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;color:var(--inchiostro);border:1px solid #313742;font-weight:400}

/* ---- il sondaggio ---- */

.sondaggio-corpo{
  background:linear-gradient(180deg,#151a21,#12161c);
  border:1px solid #2c3440;border-radius:14px;
  padding:32px 34px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.sondaggio .etichetta{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accento);margin-bottom:14px;
}
.sondaggio h2{font-size:25px;line-height:1.3;margin-bottom:20px}
.risposte{list-style:none;display:grid;gap:10px}
.risposte li{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border:1px solid var(--filo);border-radius:8px;
  background:#11151b;font-size:15px;color:#c8c1b5;cursor:pointer;
}
.risposte li:hover{border-color:#39414f}
.cerchio{width:15px;height:15px;border-radius:50%;border:1px solid #4a5260;flex:none}
.sondaggio .nota{margin-top:16px;font-size:13px;color:#6d6559}

/* ---- mi presento ---- */

.presento{max-width:1440px;margin:0 auto;padding:0 60px 80px}
.presento-corpo{
  background:var(--superficie);border:1px solid var(--filo);border-radius:14px;
  padding:38px 44px 40px;max-width:56em;
}
.presento h2{font-size:29px;margin-bottom:18px}
.presento p{color:#b6afa3;margin-bottom:14px;font-size:16.5px}
.presento .firma-riga{margin-top:20px}
.presento a{color:var(--accento)}

/* ---- pagina di un programma ---- */

.dentro{max-width:1080px;margin:0 auto;padding:0 60px}
.torna{display:inline-block;margin-top:34px;font-size:14px;color:var(--inchiostro-tenue);text-decoration:none}
.torna:hover{color:var(--inchiostro)}
.scheda-testata{padding:30px 0 34px;border-bottom:1px solid var(--filo-tenue)}
.scheda-testata h1{font-size:52px}
.sommario{margin-top:16px;font-size:20px;color:var(--accento)}
.stato-lavori{
  display:inline-block;margin-left:14px;padding:4px 12px;
  border:1px solid var(--filo);border-radius:999px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--inchiostro-tenue);vertical-align:middle;
}
.colonne{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
/* Su Vetrina la scheda dei dati e' salita in testata, quindi qui la colonna di
   destra non serve piu' e la guida usa tutta la larghezza. */
.colonne.una-colonna{grid-template-columns:1fr}
.sezione{padding:34px 0;border-top:1px solid var(--filo-tenue)}
.sezione:first-child{border-top:none;padding-top:30px}
.sezione h2{font-size:27px;margin-bottom:16px}
.sezione p{color:#b6afa3;margin-bottom:14px;max-width:40em}
.lato{
  position:sticky;top:30px;margin-top:30px;
  background:var(--superficie);border:1px solid var(--filo);border-radius:12px;
  padding:22px 22px 8px;
}
.lato h2{font-size:20px;margin-bottom:16px}
.fatti{list-style:none}
.fatti li{padding:12px 0;border-bottom:1px solid var(--filo-tenue)}
.fatti li:last-child{border-bottom:none}
.fatti b{
  display:block;font-weight:400;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:#6d6559;margin-bottom:5px;
}
.versioni{list-style:none}
.versioni li{
  display:flex;gap:18px;padding:12px 0;
  border-bottom:1px solid var(--filo-tenue);color:#b6afa3;font-size:15px;
}
.versioni b{font-weight:600;color:var(--inchiostro);min-width:5.5em}

/* ---- piè di pagina ---- */

.fondo{border-top:1px solid var(--filo-tenue);background:#0a0c10}
.fondo-corpo{max-width:1440px;margin:0 auto;padding:54px 60px 60px}
.fondo p{color:var(--inchiostro-tenue);font-size:15px;margin-bottom:14px;max-width:38em}
.fondo strong{color:var(--inchiostro);font-weight:400}
.fondo a{color:var(--accento)}
.piccolo{margin-top:26px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5a5348}

/* ---- schermi stretti ---- */

@media (max-width:1100px){
  .barra{background:rgba(10,12,16,.55);backdrop-filter:blur(6px);padding:18px 28px;flex-wrap:wrap}
  .menu{flex-wrap:wrap;gap:8px}
  .menu .voce{display:none}
  .chip small{display:none}
  .apertura-corpo{grid-template-columns:1fr;gap:32px;padding:34px 28px 0}
  .nome-grande{width:min(300px,80%)}
  .definizione p{font-size:16px}
  .sondaggio{padding:32px 28px 0}
  .parola{padding-top:0}
  h1{font-size:40px}
  .sondaggio-corpo{padding:26px 22px 28px}
  .sondaggio h2{font-size:22px}
  .presento{padding:0 28px 60px}
  .presento-corpo{padding:26px 24px 28px}
  .dentro{padding:0 28px}
  .scheda-testata h1{font-size:38px}
  .colonne{grid-template-columns:1fr;gap:8px}
  .lato{position:static;margin-top:8px}
  .fondo-corpo{padding:40px 28px 48px}
}

/* ---- il nome grande e la definizione ---- */

.nome-grande{display:block;width:min(420px,100%);height:auto;margin-bottom:8px}
.definizione{margin-top:30px;max-width:38em}
.definizione p{color:#b6afa3;font-size:17px;margin-bottom:14px;text-align:justify;hyphens:auto}
.definizione strong{font-weight:600;color:var(--inchiostro)}
.definizione em{font-style:italic;color:var(--inchiostro)}

/* ---- sondaggio: due punti piu grande, col grafico dopo il voto ---- */

.sondaggio{margin-top:44px}

.sondaggio h2{font-size:27px}
.risposte li{position:relative;overflow:hidden;font-size:17px;padding:14px 18px}
.risposte li .testo{position:relative;z-index:2}
.risposte li:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(217,154,99,.16);transition:width .5s ease;
}
.votato li:before{width:var(--quota)}
.votato li{cursor:default}
.votato li:hover{border-color:var(--filo)}
.votato .cerchio{border-color:#5c6675}
.votato .scelta .cerchio{border-color:var(--accento);background:var(--accento);box-shadow:inset 0 0 0 3px #11151b}
.per-cento{
  position:relative;z-index:2;margin-left:auto;font-size:15px;font-weight:600;
  color:var(--inchiostro);
}
.votato .scelta .per-cento{color:var(--accento)}

/* ---- pagina di testo (mi presento) ---- */
.pagina-testo{max-width:760px}
.pagina-testo .sezione{border-top:none;padding-top:24px}
.pagina-testo p{color:#b6afa3;font-size:17px;margin-bottom:16px;max-width:38em}
.pagina-testo a{color:var(--accento)}

/* ---- riquadro GitHub ---- */

.riquadro-idea{
  background:linear-gradient(180deg,#151a21,#12161c);
  border:1px solid #2c3440;border-radius:14px;
  padding:32px 34px 30px;box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.riquadro-idea h2{font-size:26px;margin-bottom:14px}
.riquadro-idea p{color:#b6afa3;font-size:16px;margin-bottom:12px}
.riquadro-idea strong{font-weight:600;color:var(--inchiostro)}
.riquadro-idea .azioni{margin-top:20px}
.riquadro-github-corpo{
  display:block;overflow:hidden;
  background:linear-gradient(180deg,#151a21,#12161c);
  border:1px solid #2c3440;border-radius:14px;
  padding:32px 34px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.marchio-github{
  width:74px;height:74px;flex:none;display:flex;align-items:center;justify-content:center;
  background:#0f1319;border:1px solid var(--filo);border-radius:12px;
}
.testo-github h2{font-size:26px;margin-bottom:14px}
.testo-github p{color:#b6afa3;font-size:16px;margin-bottom:12px;max-width:62em}
.testo-github strong{font-weight:600;color:var(--inchiostro)}
.testo-github .azioni{margin-top:18px}
.testo-github .btn{padding:11px 20px;font-size:14.5px}

@media (max-width:1100px){

  .riquadro-github-corpo{grid-template-columns:1fr;gap:18px;padding:24px 22px 22px}
}

/* ---- le due tab della prima pagina, uguali ---- */

.parola-corpo,
.apertura .sondaggio-corpo{
  width:100%;
  background:linear-gradient(180deg,#151a21,#12161c);
  border:1px solid #2c3440;border-radius:14px;
  padding:32px 34px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.parola-corpo, .apertura .sondaggio-corpo{padding:0;overflow:hidden}
.foto-blu{
  display:block;width:100%;height:190px;object-fit:cover;
  border-bottom:1px solid #2c3440;opacity:.85;
}
.parola-testo, .sondaggio-testo{padding:26px 34px 30px}
.foto-sondaggio{
  display:block;width:100%;height:190px;object-fit:cover;object-position:center 40%;
  border-bottom:1px solid #2c3440;opacity:.8;
}
.apertura .sondaggio{display:flex;margin-top:0}
.parola-corpo .nome-grande{width:min(340px,100%)}
.parola-corpo .definizione{margin-top:20px}
.parola-corpo .definizione p{font-size:16px}

/* ---- modulo dell'idea ---- */

.modulo-idea{margin-top:18px;display:grid;gap:14px}
.modulo-idea label{display:block}
.modulo-idea label span{
  display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#6d6559;margin-bottom:6px;
}
.modulo-idea input[type=text],
.modulo-idea textarea,
.modulo-idea select{
  width:100%;background:#11151b;color:var(--inchiostro);
  border:1px solid var(--filo);border-radius:8px;padding:11px 14px;
  font-family:inherit;font-size:15px;
}
.modulo-idea textarea{resize:vertical}
.modulo-idea input:focus,.modulo-idea textarea:focus,.modulo-idea select:focus{
  outline:none;border-color:var(--accento);
}
.modulo-idea input::placeholder,.modulo-idea textarea::placeholder{color:#5a5348}
.modulo-idea button{justify-self:start;border:none;cursor:pointer;font-family:inherit}
.modulo-idea .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nota-modulo{font-size:13px;color:#6d6559;margin:0}
.nota-modulo a{color:var(--accento)}
.pagina-testo .in-attesa{color:#6d6559;font-style:italic}
/* La data dell'ultimo aggiornamento deve leggersi: e' un'informazione,
   non una nota di servizio. */
.quando{color:var(--inchiostro-tenue);font-size:14.5px;margin-top:22px}

/* ---- schede dei repo dentro il riquadro GitHub ---- */

.repo-elenco{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.repo{
  display:block;background:#11151b;border:1px solid var(--filo);border-radius:10px;
  padding:14px 16px 12px;text-decoration:none;
}
.repo:hover{border-color:#39414f}
.repo-nome{display:block;font-size:14.5px;color:var(--inchiostro-tenue)}
.repo-nome strong{color:var(--accento);font-weight:600}
.repo-desc{display:block;margin-top:7px;font-size:14px;color:#b6afa3;line-height:1.5}
.repo-piede{
  display:flex;align-items:center;gap:7px;margin-top:11px;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#6d6559;
}
.repo-piede i{width:8px;height:8px;border-radius:50%;display:inline-block}

@media (max-width:1100px){ .repo-elenco{grid-template-columns:1fr} }

/* ---- foto nel riquadro GitHub ---- */

.riquadro-github-corpo{
  background:linear-gradient(180deg,#151a21,#12161c);
  border:1px solid #2c3440;border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  padding:0;
}
.foto-codice{
  display:block;width:100%;height:190px;object-fit:cover;
  border-bottom:1px solid #2c3440;opacity:.85;
}
.riquadro-github-corpo .testo-github{padding:26px 34px 30px}
.titolo-github{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.titolo-github h2{margin:0}

/* ---- ora e data nella barra ---- */

.orologio{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 18px;border-left:1px solid var(--filo-tenue);border-right:1px solid var(--filo-tenue);
  margin-right:auto;margin-left:34px;
}
.orologio .ora{
  font-family:Consolas,"SFMono-Regular",monospace;font-size:20px;color:var(--inchiostro);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.orologio .data{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#6d6559}

@media (max-width:1100px){ .orologio{display:none} }

/* ---- scheda di un programma ---- */

.scheda-prog{max-width:1080px}
/* La testata del programma su due colonne: a sinistra nome, descrizione,
   schermate e installatori; a destra la scheda dei dati, in alto. */
.testata-prog{padding:26px 0 30px;border-bottom:1px solid var(--filo-tenue)}

/* La scheda dei dati sta sotto i due installatori, nella stessa colonna:
   piu' bassa e piu' fitta di quella di lato, perche' li' e' un riepilogo,
   non il protagonista. */
/* Adesso la scheda sta in cima alla colonna, sopra gli installatori. */
.lato-stretto{
  position:static;margin-top:0;padding:16px 18px 6px;
}
.lato-stretto h2{font-size:16px;margin-bottom:10px}
.lato-stretto .fatti li{padding:7px 0;font-size:14px}
.lato-stretto .fatti b{font-size:10.5px;margin-bottom:2px}
.testata-prog h1{font-size:52px}
.testata-prog .sommario{margin-top:14px;font-size:19px;color:var(--accento);max-width:38em}
.dati-scarico{margin-top:16px;font-size:13.5px;color:#6d6559}

.figura-grande{margin:34px 0 6px}
.finta-finestra{
  background:#12161c;border:1px solid var(--filo);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45);max-width:640px;
}
.finta-finestra .capo{
  display:flex;align-items:center;gap:7px;padding:10px 14px;background:#171c24;
  border-bottom:1px solid var(--filo);
}
.finta-finestra .capo i{width:9px;height:9px;border-radius:50%;background:#2f3846;display:block}
.finta-finestra .capo span{margin-left:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6d6559}
.dentro-finestra{padding:22px 24px 24px}
.riga-alta{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.orario{font-family:Georgia,serif;font-size:44px;line-height:1;color:var(--inchiostro)}
.luogo{margin-top:6px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#6d6559}
.santo{font-family:Georgia,serif;font-size:16px;color:var(--accento);text-align:right;max-width:12em}
.striscia-foto{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.striscia-foto i{display:block;height:56px;border-radius:6px}
.striscia-foto i:nth-child(1){background:linear-gradient(150deg,#c98b5e,#7a4a2b)}
.striscia-foto i:nth-child(2){background:linear-gradient(150deg,#7f8ea3,#3f4a5a)}
.striscia-foto i:nth-child(3){background:linear-gradient(150deg,#8a9a72,#4c5741)}
.striscia-foto i:nth-child(4){background:linear-gradient(150deg,#b8a versione,#8a7a5c)}
.striscia-foto i:nth-child(4){background:linear-gradient(150deg,#b8a37e,#8a7a5c)}
.dentro-finestra .frase{margin-top:18px;font-family:Georgia,serif;font-size:15px;color:#b6afa3;line-height:1.55}
.didascalia{margin-top:12px;font-size:13px;color:#5a5348;font-style:italic}

/* I due titoli di sezione — Recap e Guida all'Installazione — hanno il colore
   dell'accento e una lineetta sopra: si vede a colpo d'occhio che li' comincia
   una parte nuova, e non sono un titolo qualunque in mezzo al testo. */
.titolo-recap, .scheda-prog .sezione > h2:first-child{
  color:var(--accento);
  font-size:26px;letter-spacing:.01em;
  padding-top:14px;border-top:2px solid rgba(217,154,99,.35);
}
.titolo-recap{margin:38px 0 4px}
.blocchi{display:grid;gap:20px;margin:18px 0 10px}
.blocco{
  display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:center;
  background:var(--superficie);border:1px solid var(--filo);border-radius:12px;padding:20px 22px;
}
.blocco h3{font-family:Georgia,serif;font-weight:400;font-size:22px;margin-bottom:8px}
.blocco p{color:#b6afa3;font-size:15.5px;margin:0}
/* Le miniature adesso sono schermate vere: si rimpiccioliscono per stare nei
   190 punti della colonna, e non si stirano mai oltre la loro grandezza. */
.mini{
  display:block;width:100%;max-width:190px;height:auto;
  border-radius:9px;border:1px solid var(--filo);
}
/* Le schermate di un cruscotto sono piene di numeri e di scritte: dentro 190
   punti non si legge niente. Qui vanno grandi in cima, e la descrizione sotto. */
.blocco.largo{grid-template-columns:1fr;gap:18px;padding:20px 22px 22px}
.blocco.largo .mini{max-width:100%}
.blocco.largo h3{margin-bottom:10px}

.passi{margin:0;padding-left:22px;color:#b6afa3;font-size:16px}
.passi li{margin-bottom:12px;max-width:44em}
.passi strong{color:var(--inchiostro);font-weight:600}
.versioni span{color:#b6afa3}

@media (max-width:900px){
  .blocco{grid-template-columns:1fr}
  .testata-prog h1{font-size:38px}
}

/* ---- galleria delle schermate ---- */

.galleria{border-top:1px solid var(--filo-tenue);padding-top:34px;margin-top:16px}
.intro-galleria{color:#b6afa3;font-size:16px;margin-bottom:20px}
/* Il segno del programma accanto al suo nome. */
.titolo-prog{display:flex;align-items:center;gap:18px}
.logo-prog{display:block;width:62px;height:62px;flex:none;border-radius:14px}
/* La versione accanto al nome: piccola e smorzata, si legge ma non pesa. */
.versione-titolo{font-size:20px;color:var(--inchiostro-tenue);letter-spacing:0}
@media (max-width:760px){ .logo-prog{width:46px;height:46px} }

/* ---- guida all'installazione, un passo per schermata ---- */

.intro-guida{color:#b6afa3;font-size:16px;margin-bottom:24px}
/* In riga da tre, poi si va a capo: la guida si abbraccia con un'occhiata
   sola invece di scorrere per due schermate. */
.guida{
  list-style:none;counter-reset:passo;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px;align-items:start;
}
/* Il numero sta accanto al testo, non sopra; la schermata sotto, larga
   quanto il riquadro. Con `subgrid` le due righe — testo e immagine — sono
   le stesse per tutti, cosi' le schermate partono tutte alla stessa altezza
   anche dove il testo e' di una riga e dove e' di tre. */
.guida li{
  counter-increment:passo;margin:0;
  display:grid;grid-template-columns:32px 1fr;column-gap:12px;row-gap:12px;
  grid-template-rows:auto auto;
}
.guida li:before{
  content:counter(passo);grid-column:1;grid-row:1;
  width:32px;height:32px;border-radius:50%;
  border:1px solid var(--filo);background:var(--superficie);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--accento);
}
.guida li p{grid-column:2;grid-row:1;margin:0;font-size:15.5px;min-height:75px}
.guida li img{grid-column:1 / -1;grid-row:2}
@supports (grid-template-rows: subgrid){
  .guida{grid-auto-rows:auto}
  .guida li{grid-row:span 2;grid-template-rows:subgrid}
  .guida li p{min-height:0}
}
/* MAI ingrandire una schermata: sono catturate a dimensione vera e stirarle
   le sfoca e le sbianca. Niente `width:100%` — solo un tetto per gli schermi
   stretti, dove semmai rimpiccioliscono. */
.guida li img{
  display:block;margin-top:0;max-width:100%;height:auto;
  border:1px solid var(--filo);border-radius:10px;
}
@media (max-width:1000px){ .guida{grid-template-columns:repeat(2,1fr)} }
@media (max-width:700px){ .guida{grid-template-columns:1fr} }

/* Il riquadro che spiega il cartello di Windows: sta in fondo alla guida,
   staccato dai passi perche' non e' un passo — e' il perche'. */
/* Senza riquadro: e' testo, sta sotto il titolo della guida e si legge di
   seguito, non e' una scatola a parte. */
/* Larga quanto i riquadri qui sopra, e giustificata. */
.spiegone{margin:0 0 30px;padding:0;background:none;border:none;max-width:none}
.spiegone p{max-width:none;text-align:justify;text-justify:inter-word;hyphens:auto}
.spiegone h3{font-size:20px;margin-bottom:12px}
.spiegone p{color:#b6afa3;font-size:15.5px;margin-bottom:11px;line-height:1.65}
.spiegone p:last-child{margin-bottom:0}
.spiegone strong{color:var(--inchiostro);font-weight:600}
.spiegone a{color:var(--accento)}

.scatti{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Le tre schermate stanno in cima, fra la descrizione e i due installatori:
   si vede subito com'e' fatto il programma, prima di decidere se scaricarlo. */
.scatti.su{margin-top:24px;max-width:960px}
/* quando la schermata e' una sola non serve la griglia a tre */
.scatti.su.una{display:block}

/* La finestra intera a sinistra e i due installatori accanto: si vede cosa si
   sta per scaricare mentre si sceglie quale prendere. */
.riga-scarico{
  display:grid;grid-template-columns:auto 1fr;gap:34px;
  align-items:start;margin-top:24px;
}
.riga-scarico .scatto{margin:0}
/* la finestra intera sta a grandezza vera: non si rimpicciolisce */
.riga-scarico .scatto img{max-width:none}

/* La scheda dei dati e' scesa sotto gli installatori, quindi la pagina torna
   della larghezza normale: la schermata da 458 e la colonna dei tasti ci
   stanno dentro i 1080. La colonna dei tasti ha un tetto, se no si stira. */
.colonna-scarico{max-width:460px}
.scheda-prog .guida li p{max-width:44em}
.intro-guida{max-width:none;text-align:justify}
.riga-scarico .scarichi{grid-template-columns:1fr;margin-top:22px}
.riga-scarico .dati-scarico{margin-top:14px}
/* Quando la schermata e' larga invece che alta — il cruscotto di Alcor, non la
   finestrella di Vetrina — si rimpicciolisce per lasciare spazio alla colonna
   di fianco, invece di schiacciarla. */
.riga-scarico.larga{grid-template-columns:minmax(0,1fr) 300px}
.riga-scarico.larga .scatto img{width:100%;max-width:100%;height:auto}
@media (max-width:900px){ .riga-scarico, .riga-scarico.larga{grid-template-columns:1fr;gap:22px} }
.scatto{margin:0}
.scatto img{display:block;width:100%;border:1px solid var(--filo);border-radius:10px}
/* La finestra di Vetrina ha gli angoli arrotondati: nella cattura, in quei
   quattro angolini, resta un pezzetto di scrivania. Arrotondando qui li si
   taglia via. */
.riga-scarico .scatto img{border-radius:15px}
.scatto figcaption{margin-top:9px;font-size:13.5px;color:#6d6559;line-height:1.5}
.scatto.manca .cornice{
  aspect-ratio:16/10;border:1px dashed #39414f;border-radius:10px;background:#11151b;
  display:flex;align-items:center;justify-content:center;
}
.scatto.manca .cornice span{
  font-family:Consolas,"SFMono-Regular",monospace;font-size:13px;color:#5a5348;
}

@media (max-width:900px){ .scatti{grid-template-columns:1fr} }

/* ---- i due scaricamenti ---- */

.scarichi{display:grid;grid-template-columns:repeat(2,minmax(0,320px));gap:16px;margin-top:26px}
.scarico{
  display:block;text-decoration:none;padding:16px 18px 15px;border-radius:10px;
  background:var(--accento);color:#17130e;border:1px solid var(--accento);
}
.scarico:hover{filter:brightness(1.06)}
/* Il secondo installatore e' pieno come il primo, ma verde: due tasti dello
   stesso peso, uno ambra e uno verde, e si distinguono a colpo d'occhio. */
.scarico.secondo{background:#86a065;color:#12160e;border-color:#86a065}
.scarico.secondo:hover{filter:brightness(1.06)}
.scarico .quale{display:inline-block;font-size:17px;font-weight:600}
.scarico .peso{
  float:right;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  opacity:.75;padding-top:5px;
}
.scarico .spiega{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;opacity:.85}
.dati-scarico a{color:var(--accento)}

@media (max-width:760px){ .scarichi{grid-template-columns:1fr} }

/* ---- collegamento a GitHub sotto gli scaricamenti ---- */

.verso-github{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  padding:9px 16px 9px 13px;border:1px solid var(--filo);border-radius:999px;
  background:#12161c;color:var(--inchiostro);text-decoration:none;font-size:14.5px;
}
.verso-github:hover{border-color:#39414f}
.verso-github svg{flex:none}


/* ---- l'avviso della prima visita ---- */

.avviso-cookie{
  position:fixed;left:24px;bottom:24px;z-index:60;width:min(420px,calc(100vw - 48px));
  background:var(--superficie);border:1px solid var(--filo);
  border-left:3px solid var(--accento);border-radius:12px;
  padding:20px 22px 18px;box-shadow:0 22px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .25s ease;
}
.avviso-cookie.dentro{opacity:1;transform:none}
.avviso-cookie p{color:#b6afa3;font-size:14.5px;line-height:1.6;margin-bottom:10px}
.avviso-cookie strong{color:var(--inchiostro);font-weight:600}
.avviso-cookie .minuta-cookie{font-size:13px;color:#6d6559;margin-bottom:14px}
.avviso-cookie a{color:var(--accento)}
.avviso-cookie button{
  cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;
  padding:9px 22px;border:none;border-radius:6px;
  background:var(--accento);color:#17130e;
}
.avviso-cookie button:hover{filter:brightness(1.06)}
@media (max-width:600px){ .avviso-cookie{left:12px;bottom:12px;width:calc(100vw - 24px)} }


/* ---- la voce Home, col simbolo della casa ---- */

/* Ogni voce del menu ha il suo segno a sinistra, come la casa su Home. */
/* Le voci non vanno mai a capo dentro alla pastiglia: coi segni erano
   diventate piu' larghe e «Siti web» si spezzava in due righe. */
.menu{flex-wrap:wrap}
/* Sotto ai 1300 punti l'orologio se ne va: e' un vezzo, e il suo posto serve
   alle voci del menu, che altrimenti vanno a capo su due righe. */
@media (max-width:1300px){ .orologio{display:none} }
.menu .voce, .tenda summary{white-space:nowrap}
.menu .voce{display:inline-flex;align-items:center;gap:7px}
.menu .voce svg{flex:none}
.tenda summary{display:inline-flex;align-items:center;gap:7px}
.tenda summary svg{flex:none}

/* ---- il tasto e la finestrella «Domande & Suggerimenti» ---- */

.verso-github.domande{
  margin-top:10px;cursor:pointer;font-family:inherit;
}
.finestrella{
  /* `margin:auto` la mette in mezzo allo schermo: senza, il browser la
     appoggia in alto a sinistra. */
  margin:auto;
  width:min(560px,calc(100vw - 40px));padding:26px 28px 24px;
  background:var(--superficie);color:var(--inchiostro);
  border:1px solid var(--filo);border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.finestrella::backdrop{background:rgba(6,8,11,.72)}
.finestrella-testa{display:flex;align-items:center;justify-content:space-between;gap:16px}
.finestrella-testa h2{font-size:24px;margin:0}
.finestrella .tondo{
  cursor:pointer;font-family:inherit;font-size:20px;line-height:1;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--filo);background:transparent;color:var(--inchiostro-tenue);
}
.finestrella .tondo:hover{border-color:#4a5260;color:var(--inchiostro)}
.finestrella-intro{color:#b6afa3;font-size:15px;margin:12px 0 18px;line-height:1.6}
.finestrella label{display:block;margin-bottom:14px}
.finestrella label span{
  display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#6d6559;margin-bottom:6px;
}
.finestrella input[type=text], .finestrella textarea{
  width:100%;background:#11151b;color:var(--inchiostro);
  border:1px solid var(--filo);border-radius:8px;padding:11px 14px;
  font-family:inherit;font-size:15px;
}
.finestrella textarea{resize:vertical}
.finestrella input:focus, .finestrella textarea:focus{outline:none;border-color:var(--accento)}
.finestrella ::placeholder{color:#5a5348}
.finestrella .trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.finestrella-fondo{display:flex;align-items:center;gap:16px;margin-top:4px}
.finestrella .btn{border:none;cursor:pointer;font-family:inherit}
.finestrella .esito{margin:0;font-size:14px;color:#6d6559}
.finestrella .esito.bene{color:#86a065}
.finestrella .esito.male{color:#d99a63}
.finestrella .nota-modulo{margin-top:16px}


/* ---- guida all'installazione a passi, con i comandi ---- */

.guida-passi{list-style:none;counter-reset:passo;padding:0;margin:0}
.guida-passi > li{
  counter-increment:passo;position:relative;
  padding-left:56px;margin-bottom:34px;
}
.guida-passi > li:before{
  content:counter(passo);
  position:absolute;left:0;top:2px;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--filo);background:var(--superficie);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--accento);
}
.guida-passi h3{font-size:21px;margin:4px 0 12px}
.guida-passi p{color:#b6afa3;font-size:15.5px;margin-bottom:12px;max-width:46em}
.guida-passi strong{color:var(--inchiostro);font-weight:600}
.guida-passi code{
  font-family:Consolas,"SFMono-Regular",monospace;font-size:14px;
  background:#11151b;border:1px solid var(--filo-tenue);border-radius:5px;padding:1px 6px;
}
/* Il riquadro dei comandi: si distingue subito da quello che e' spiegazione. */
.comando{
  margin:0 0 14px;padding:14px 18px;overflow-x:auto;
  background:#0c1015;border:1px solid var(--filo);
  border-left:3px solid var(--accento);border-radius:8px;
}
.comando code{
  background:none;border:none;padding:0;
  font-size:14px;line-height:1.7;color:#d9d3c8;white-space:pre;
}

/* L'esito del modulo delle idee, sotto al tasto. */
.esito-idea{margin:10px 0 0;font-size:14px;color:#6d6559}
.esito-idea.bene{color:#86a065}
.esito-idea.male{color:#d99a63}