/* veiora.it — stile del portale: notte (fondo scuro, luce neon) e carta (bianco caldo, inchiostro), scelti da tema.js
   (html[data-tema]). Nessuna risorsa esterna. */
@font-face { font-family: "Unbounded"; src: url("/static/fonts/unbounded-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/static/fonts/unbounded-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/static/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* carattere di sistema allargato come Space Grotesk: quando arriva quello vero i testi non vanno a capo diversamente */
@font-face { font-family: "Space Grotesk ripiego"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 109.4%; }

:root {
  --nero: #04050a; --fondo: #070912; --vetro: rgba(14, 17, 32, 0.62); --vetro-forte: rgba(12, 14, 28, 0.86);
  --testo: #e9ecff; --tenue: #a3abcf; --spento: #6f779c; --linea: rgba(150, 170, 255, 0.16);
  --ciano: #5ef2ff; --viola: #8b5cf6; --magenta: #ff5fd2; --oro: #ffcf7a; --rosso: #ff6b7d;
  --grad: linear-gradient(115deg, var(--ciano), var(--viola) 50%, var(--magenta));
  --display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --corpo: "Space Grotesk", "Space Grotesk ripiego", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* tinte da cui il foglio ricava veli, ombre e linee (color-mix con trasparenza): nella notte il buio e la luce,
     sulla carta la carta e l'inchiostro (vedi "carta", in fondo). I colori fissi del foglio stanno solo qui */
  --chiaro: #fff; --ombra: #000; --linea-tinta: #96aaff; --vetro-tinta: #0e1120; --su-colore: #05060c; --orb-fondo: #1a1040;
  --testo-2: #c6cced; --testo-3: #b4bbe0; --testo-4: #dfe3fb; --testo-sotto: #c3c9ea; --piede-link: #8a93b8;
  --menu: rgba(10, 12, 24, 0.95); --pannello-a: rgba(22, 26, 52, 0.92); --pannello-b: rgba(8, 9, 20, 0.96);
  --verde: #47cd89; --avviso-testo: #ffe7b8; --rischio-a: #ff6b7d; --rischio-b: #ff3d7f; --rischio-ombra: rgba(255, 70, 110, 0.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* niente barra di scorrimento del browser: al suo posto il filo (piu' sotto) */
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }
body {
  margin: 0; min-height: 100vh; background: var(--nero); color: var(--testo);
  font: 17px/1.65 var(--corpo); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--ciano); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--chiaro); }
::selection { background: color-mix(in srgb, var(--viola) 45%, transparent); color: var(--chiaro); }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ sfondo: scena, nebbia, righe, grana */
/* Livelli fissi alti quanto lo schermo con la barra del browser nascosta (100lvh; 100vh dove manca): sul telefono
   non cambiano misura quando la barra compare o sparisce, quindi niente sobbalzi durante lo scorrimento. */
#scena, .fondale, .righe, .vignetta, #alone { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; pointer-events: none; }
#scena { z-index: 0; display: block; }
.fondale { z-index: -1;
  background:
    radial-gradient(60vmax 45vmax at 78% 12%, color-mix(in srgb, var(--viola) 20%, transparent), transparent 60%),
    radial-gradient(55vmax 40vmax at 10% 85%, color-mix(in srgb, var(--ciano) 12%, transparent), transparent 60%),
    radial-gradient(40vmax 30vmax at 50% 50%, color-mix(in srgb, var(--magenta) 7%, transparent), transparent 70%),
    var(--nero); }
.righe { z-index: 1; opacity: 0.35; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--chiaro) 5%, transparent) 0 1px, transparent 1px 3px); }
.vignetta { z-index: 1;
  background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--ombra) 65%, transparent) 100%); }
#alone { z-index: 1;
  background: radial-gradient(260px circle at var(--x, -999px) var(--y, -999px), color-mix(in srgb, var(--ciano) 7%, transparent), transparent 70%); }

/* ------------------------------------------------------------------ intestazione */
.testata { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px clamp(16px, 4vw, 44px) 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nero) 94%, transparent), color-mix(in srgb, var(--nero) 80%, transparent) 62%, color-mix(in srgb, var(--nero) 0%, transparent)); }
.marchio { font: 700 1.05rem/1 var(--display); letter-spacing: 0.08em; color: var(--testo); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.marchio i { width: 10px; height: 10px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 12px var(--ciano), 0 0 30px var(--viola); }
.voci { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 16px); }
.utente-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 500 0.95rem var(--corpo); color: var(--testo);
  padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--linea); background: var(--vetro); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); text-decoration: none; transition: border-color .3s, box-shadow .3s; }
.utente-btn:hover { border-color: color-mix(in srgb, var(--ciano) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--ciano) 25%, transparent); color: var(--chiaro); }
.utente-btn .orb, .menu-chi .orb { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 0.8rem var(--display);
  background: radial-gradient(circle at 30% 30%, #fff, var(--ciano) 30%, var(--viola) 70%, var(--orb-fondo)); color: var(--su-colore); box-shadow: 0 0 16px color-mix(in srgb, var(--ciano) 55%, transparent); }
/* richieste di accesso da valutare (chi gestisce un'app): un punto sulla sfera, il numero e' nel menu */
.utente-btn .avvisi { position: absolute; left: 29px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--magenta);
  box-shadow: 0 0 0 2px var(--nero), 0 0 10px var(--magenta); }
/* menu dell'account, sotto il nome: chi e' collegato, le voci (icona e nome), l'uscita in fondo dopo un filo */
.menu-lista { position: absolute; right: clamp(16px, 4vw, 44px); top: 64px; width: min(280px, calc(100vw - 32px)); padding: 6px; border-radius: 18px;
  border: 1px solid var(--linea); background: var(--menu); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--ombra) 50%, transparent); transform-origin: calc(100% - 40px) 0; }
.menu-lista::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; background: var(--grad); opacity: 0.7; }
.menu-lista:not([hidden]) { animation: entraMenu .24s cubic-bezier(.2, .8, .2, 1); }
@keyframes entraMenu { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.menu-chi { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--linea); }
.menu-chi .orb { width: 36px; height: 36px; font-size: 0.95rem; }
.chi-testo { display: grid; min-width: 0; line-height: 1.35; }
.chi-nome, .chi-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chi-nome { font-weight: 600; }
.chi-email { color: var(--tenue); font-size: 0.82rem; }
.menu-lista a, .menu-lista button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px;
  border: 0; background: none; color: var(--testo); font: 500 0.95rem var(--corpo); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.menu-lista svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  color: var(--tenue); transition: color .2s, filter .2s; }
.menu-lista a:hover, .menu-lista button:hover { background: color-mix(in srgb, var(--ciano) 8%, transparent); color: var(--chiaro); }
.menu-lista a:hover svg, .menu-lista button:hover svg { color: var(--ciano); }
/* la pagina in cui sei (ui.js) */
.menu-lista a[aria-current="page"] { background: color-mix(in srgb, var(--ciano) 6%, transparent); }
.menu-lista a[aria-current="page"] svg { color: var(--ciano); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ciano) 70%, transparent)); }
.menu-sep { height: 1px; margin: 6px 12px; background: var(--linea); }
.menu-lista form { margin: 0; }
.menu-lista form button { color: var(--tenue); }
/* lingua di veiora (vale per il sito, le pagine di accesso e le app). In testata la bandiera della lingua in uso, tonda
   come le perle di veiora e cerchiata di luce, con la sigla (sui telefoni la sola bandiera, in un tasto tondo); al clic il menu delle
   lingue, ognuna con bandiera e nome, quella in uso col segno di spunta. E' un <details>: si apre e si sceglie anche
   senza JavaScript (lo script lo chiude con un clic fuori, con Esc e quando la tastiera ne esce) */
.lingua { position: relative; }
.lingua > summary { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1px solid var(--linea); background: color-mix(in srgb, var(--vetro-tinta) 62%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.14em;
  color: var(--testo); transition: border-color .3s, box-shadow .3s, color .2s; }
.lingua > summary::-webkit-details-marker { display: none; }
.lingua > summary::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 1px; border: solid var(--tenue); border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg); transition: transform .25s, margin .25s, border-color .2s; }
.lingua > summary:hover, .lingua[open] > summary { border-color: color-mix(in srgb, var(--ciano) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--ciano) 25%, transparent); color: var(--chiaro); }
.lingua > summary:hover::after, .lingua[open] > summary::after { border-color: var(--ciano); }
.lingua[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.lingua > summary:focus-visible { border-radius: 999px; }
.lingua .sigla { text-box: trim-both cap alphabetic; margin-right: -0.14em; }
.bandiera { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: center / cover no-repeat; }
.bandiera::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle, color-mix(in srgb, var(--nero) 0%, transparent) 55%, color-mix(in srgb, var(--nero) 40%, transparent)); }
.bandiera[data-lingua="it"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='%23009246' d='M0 0h10v30H0z'/%3E%3Cpath fill='%23f4f5f0' d='M10 0h10v30H10z'/%3E%3Cpath fill='%23ce2b37' d='M20 0h10v30H20z'/%3E%3C/svg%3E"); }
.bandiera[data-lingua="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23012169' d='M0 0h20v20H0z'/%3E%3Cpath stroke='%23fff' stroke-width='4.2' d='M0 0l20 20M20 0L0 20'/%3E%3Cpath stroke='%23c8102e' stroke-width='1.5' d='M0 0l20 20M20 0L0 20'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M10 0v20M0 10h20'/%3E%3Cpath stroke='%23c8102e' stroke-width='3.4' d='M10 0v20M0 10h20'/%3E%3C/svg%3E"); }
.lingua > summary .bandiera { width: 22px; height: 22px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ciano) 85%, transparent), 0 0 12px color-mix(in srgb, var(--ciano) 50%, transparent); }
.lingua-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; display: grid; gap: 2px; min-width: 184px; padding: 6px;
  border-radius: 18px; border: 1px solid var(--linea); background: var(--menu); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 60px color-mix(in srgb, var(--ombra) 50%, transparent); transform-origin: calc(100% - 30px) 0;
  animation: entraLingua .24s cubic-bezier(.2, .8, .2, 1); }
.lingua-menu::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; opacity: 0.7;
  background: var(--grad); }
@keyframes entraLingua { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.lingua-menu a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px;
  background: none; cursor: pointer; text-align: left; text-decoration: none; font: 500 0.95rem var(--corpo); letter-spacing: 0;
  color: var(--testo); transition: background-color .2s, color .2s; }
.lingua-menu a:hover { background: color-mix(in srgb, var(--ciano) 8%, transparent); color: var(--chiaro); }
.lingua-menu a:focus-visible { border-radius: 12px; outline-offset: -2px; }
.lingua-menu a[aria-current="true"] { background: color-mix(in srgb, var(--ciano) 6%, transparent); cursor: default; }
.lingua-menu a[aria-current="true"] .bandiera { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ciano) 85%, transparent), 0 0 10px color-mix(in srgb, var(--ciano) 45%, transparent); }
.lingua-menu a[aria-current="true"]::after { content: ""; width: 10px; height: 5px; margin: -3px 3px 0 auto; border: solid var(--ciano);
  border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ciano) 70%, transparent)); }
@media (max-width: 480px) {   /* sui telefoni un tasto tondo con la sola bandiera, come la sfera dell'account */
  .lingua > summary { width: 46px; padding: 0; justify-content: center; }
  .lingua > summary::after, .lingua .sigla { display: none; }
  .lingua > summary .bandiera { width: 24px; height: 24px; }
}
@media (max-width: 480px) {   /* il menu sotto la testata, a filo del suo bordo destro (come quello dell'account) */
  .lingua { position: static; }
  .lingua-menu { right: clamp(16px, 4vw, 44px); top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .lingua-menu { animation: none; } }
.utente-btn .nome { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .utente-btn .nome { max-width: 24vw; } }

/* ------------------------------------------------------------------ pulsanti */
.btn { --mx: 0px; --my: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 600 1rem var(--corpo);
  color: var(--su-colore); background: var(--grad); background-size: 160% 100%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--chiaro) 12%, transparent) inset, 0 10px 40px color-mix(in srgb, var(--viola) 35%, transparent);
  transform: translate(var(--mx), var(--my)); transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-position .6s, box-shadow .3s; }
.btn:hover { background-position: 100% 0; box-shadow: 0 0 0 1px color-mix(in srgb, var(--chiaro) 25%, transparent) inset, 0 12px 50px color-mix(in srgb, var(--ciano) 45%, transparent); color: var(--su-colore); }
.btn.fantasma { background: color-mix(in srgb, var(--chiaro) 3%, transparent); color: var(--testo); box-shadow: 0 0 0 1px var(--linea) inset; }
.btn.fantasma:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ciano) 60%, transparent) inset, 0 0 30px color-mix(in srgb, var(--ciano) 20%, transparent); color: var(--chiaro); }
.btn.pieno { width: 100%; }
.btn.danger { background: linear-gradient(115deg, var(--rischio-a), var(--rischio-b)); color: #fff; box-shadow: 0 10px 40px var(--rischio-ombra); }
.btn.secondary { background: color-mix(in srgb, var(--chiaro) 3%, transparent); color: var(--testo); box-shadow: 0 0 0 1px var(--linea) inset; margin: 10px 8px 0 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--tenue); font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--chiaro); }

/* ------------------------------------------------------------------ pagina pubblica */
.scorrevole { position: relative; z-index: 5; }
main.scorrevole:not(.pagina) { overflow-x: hidden; overflow-x: clip; }   /* nulla deve allargare la pagina sul telefono */
/* sonda invisibile: la scena legge da qui l'altezza visibile con la barra del browser presente */
.sonda-svh { position: fixed; top: 0; left: 0; width: 1px; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }
.eroe { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 90px 20px 7vh; }
.eroe noscript .avviso { margin: 24px auto 0; max-width: 520px; }
.eroe noscript [id] { scroll-margin-top: 100px; }   /* i pulsanti Accedi / Registrati portano qui, sotto la testata */
/* spazio libero dove le particelle compongono la scritta (la scena ne legge posizione e misure) */
.posto-scritta { flex: 1 1 auto; min-height: 24vh; width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: center;
  position: relative; }
.sopratitolo { font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.35em; text-transform: uppercase; color: var(--ciano);
  text-shadow: 0 0 18px color-mix(in srgb, var(--ciano) 60%, transparent); }
.eroe .sottotitolo { max-width: 620px; margin: 16px auto 28px; color: var(--testo-sotto); font-size: clamp(1rem, 1.6vw, 1.2rem); }
.azioni { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.scorri { margin-top: 5vh; font: 500 0.72rem var(--mono); letter-spacing: 0.3em; color: var(--spento); text-transform: uppercase; }
.scorri::after { content: ""; display: block; width: 1px; height: 42px; margin: 10px auto 0; background: linear-gradient(var(--ciano), transparent);
  animation: goccia 2.2s ease-in-out infinite; }
@keyframes goccia { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
/* Titolo di riserva: solo quando la scena 3D non puo' partire (niente WebGL, contesto grafico perso) o senza
   JavaScript (copia in <noscript>). Non occupa spazio: lo spazio e' della scritta di particelle. */
.titolo-riserva { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center;
  visibility: hidden;
  font: 700 clamp(3.2rem, 14vw, 10rem)/0.9 var(--display); letter-spacing: 0; margin: 0;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.senza-3d .eroe .titolo-riserva, .eroe noscript .titolo-riserva { visibility: visible; }

.capitolo { min-height: 110vh; display: flex; align-items: center; padding: 18vh clamp(20px, 7vw, 110px); }
.capitolo.destra { justify-content: flex-end; }
/* Testi trasparenti: nessun vetro o sfocatura sopra la scena. Solo un velo scuro morbido e senza bordi dietro le
   parole (le particelle restano visibili) e due angoli luminosi da mirino al posto della cornice. */
.pannello-testo { max-width: min(520px, 46vw); padding: 34px 34px 30px; position: relative; isolation: isolate; }   /* lascia libero almeno il 47% */
.pannello-testo::after { content: ""; position: absolute; inset: -16% -12%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--nero) 52%, transparent), color-mix(in srgb, var(--nero) 30%, transparent) 58%, transparent); }
.pannello-testo::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background:
    linear-gradient(var(--ciano), var(--ciano)) left top / 26px 1px no-repeat,
    linear-gradient(var(--ciano), var(--ciano)) left top / 1px 26px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) right bottom / 26px 1px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) right bottom / 1px 26px no-repeat;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ciano) 70%, transparent)); }
/* Telefoni e tablet in verticale: forma 3D al centro dello schermo, testi centrati che le scorrono sopra. La scena
   ricava la stessa scelta dalla posizione dei pannelli, quindi CSS e scena non possono discordare. */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .capitolo, .capitolo.destra { justify-content: center; min-height: 135vh; padding: 22vh 16px; }
  .pannello-testo { max-width: 520px; }
}
@media (max-width: 720px) {
  .pannello-testo { padding: 26px 22px 24px; }
  .pannello-testo::after { inset: -14% -16px; }
}
.numero { font: 500 0.75rem var(--mono); letter-spacing: 0.3em; color: var(--ciano); text-shadow: 0 0 10px color-mix(in srgb, var(--nero) 95%, transparent); }
.capitolo h2, .vetrina h2, .entra h2 { font: 700 clamp(1.9rem, 4.2vw, 3.3rem)/1.08 var(--display); letter-spacing: -0.01em; margin: 10px 0 16px; }
.capitolo p { color: var(--testo-2); font-size: 1.08rem; margin: 0; }
/* leggibilita' sopra le particelle: alone scuro stretto attorno alle lettere */
.capitolo h2, .vetrina .intro h2, .eroe .sopratitolo, .scheda h3 { text-shadow: 0 2px 6px color-mix(in srgb, var(--nero) 85%, transparent), 0 0 28px color-mix(in srgb, var(--nero) 90%, transparent); }
.capitolo p, .vetrina .intro p, .eroe .sottotitolo, .scheda p { text-shadow: 0 1px 2px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 14px color-mix(in srgb, var(--nero) 90%, transparent); }
.capitolo .dettagli { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.etichetta { font: 500 0.72rem var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--testo); padding: 6px 11px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--linea-tinta) 30%, transparent); background: color-mix(in srgb, var(--nero) 45%, transparent); }

html.js .appare { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(6px); transition: opacity 1s ease, transform 1s cubic-bezier(.2, .8, .2, 1), filter 1s ease; }
html.js .appare.visibile { opacity: 1; transform: none; filter: none; }

/* Vetrina delle app (e "Le mie app"): niente riquadri. Ogni app e' una stella della costellazione (scena.js), con
   sotto il nome, lo stato e una riga di descrizione; avvicinandosi la stella si apre nella figura dell'app (la sua
   lettera, poi il suo lavoro). .simbolo e' il posto della figura: la scena ne legge centro e misure. Le tinte di ogni
   app (--a1/2/3) sono le sue, come nella scena. */
.vetrina { padding: 18vh clamp(20px, 6vw, 90px) 12vh; }
.vetrina .intro { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.vetrina .intro p { color: var(--testo-2); }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px 28px; max-width: 1120px; margin: 0 auto; }
.scheda { --a1: var(--ciano); --a2: var(--viola); --a3: var(--magenta); position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; padding: 0 4px 6px; color: var(--testo); text-decoration: none; border-radius: 18px; }
.scheda[data-app="mnemosyn"] { --a1: #5fffd7; --a2: #38bdf8; --a3: #b388ff; }
.scheda[data-app="sibilla"] { --a1: #7c9cff; --a2: #ff6fae; --a3: #ffcf7a; }
.scheda[data-app="vizora"] { --a1: #5ef2ff; --a2: #ff5fd2; --a3: #ffcf7a; }
.scheda[data-app="statistiche"] { --a1: #38bdf8; --a2: #7c9cff; --a3: #b388ff; }
.scheda .simbolo { display: block; position: relative; width: 100%; height: 196px; margin-bottom: 4px; pointer-events: none; }
.scheda .testi { display: flex; flex-direction: column; align-items: center; }
.scheda h3 { position: relative; margin: 0 0 12px; font: 700 1.42rem/1.15 var(--display); letter-spacing: 0.01em; color: var(--testo);
  transition: color .5s ease, text-shadow .5s ease; }
/* il filo sotto il nome: corto e tenue, si allunga nelle tinte dell'app quando la sua stella si apre */
.scheda h3::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 64px; height: 1px; transform: translateX(-50%) scaleX(0.3);
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); opacity: 0.55; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s; }
.scheda .stato { margin: 6px 0 8px; font: 500 0.66rem/1.4 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--a1); opacity: 0.8;
  transition: opacity .5s; }
.scheda .descrizione { margin: 0; max-width: 31ch; color: var(--testo-3); font-size: 0.97rem; line-height: 1.55; transition: color .5s; }
.scheda .apri { margin-top: 12px; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--tenue);
  transition: color .4s, letter-spacing .5s; }
.scheda .apri::after { content: " →"; letter-spacing: 0; }
.scheda:hover, .scheda.accesa { color: var(--testo); }
.scheda:hover h3, .scheda.accesa h3 { color: var(--chiaro); text-shadow: 0 0 24px color-mix(in srgb, var(--a2) 60%, transparent), 0 2px 6px color-mix(in srgb, var(--nero) 85%, transparent); }
.scheda:hover h3::after, .scheda.accesa h3::after { transform: translateX(-50%) scaleX(1); opacity: 1; }
.scheda:hover .stato, .scheda.accesa .stato { opacity: 1; }
.scheda:hover .descrizione, .scheda.accesa .descrizione { color: var(--testo-4); }
.scheda:hover .apri, .scheda.accesa .apri { color: var(--a1); letter-spacing: 0.36em; }
.scheda.prossima { opacity: 0.72; }
.scheda.prossima .stato { color: var(--tenue); }
/* senza scena 3D (niente WebGL): una stella disegnata al posto di quella di particelle */
.senza-3d .scheda .simbolo::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--chiaro); box-shadow: 0 0 10px 3px var(--a1), 0 0 34px 10px color-mix(in srgb, var(--a2) 45%, transparent); }
.vetrina .box { max-width: 560px; margin: 0 auto; text-align: center; color: var(--tenue); }
/* "Le mie app": la stessa costellazione, a tutta pagina */
.vetrina.mie { min-height: 100vh; min-height: 100svh; padding-top: clamp(110px, 16vh, 170px); }
.vetrina.mie .intro h1 { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--display); margin: 12px 0 14px; }
.vetrina .intro h1, .scheda h3 { text-shadow: 0 2px 6px color-mix(in srgb, var(--nero) 85%, transparent), 0 0 28px color-mix(in srgb, var(--nero) 90%, transparent); }
.scheda p { text-shadow: 0 1px 2px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 14px color-mix(in srgb, var(--nero) 90%, transparent); }
@media (max-width: 720px) {
  .griglia { grid-template-columns: 1fr; gap: 26px; }
  .scheda .simbolo { height: 176px; }
}
/* telefono in orizzontale: schermo basso, la riga delle app (figure e testi) deve starci intera */
@media (max-height: 500px) and (orientation: landscape) {
  .scheda .simbolo { height: 150px; }
  .scheda h3 { font-size: 1.25rem; }
}

/* ingresso finale: il portale sta proprio dietro il testo, quindi lo stesso velo morbido dei capitoli */
.entra { min-height: 110vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16vh 20px;
  position: relative; isolation: isolate; }
.entra::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(820px, 100%); height: min(640px, 72%); transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--nero) 58%, transparent), color-mix(in srgb, var(--nero) 32%, transparent) 58%, transparent); }
.entra p { max-width: 560px; color: var(--testo-2); margin: 0 auto 30px; }
.entra .btn.fantasma { background: color-mix(in srgb, var(--nero) 55%, transparent); }

/* Il filo (lo scorrimento senza la barra del browser) e' quello del kit, uguale in tutte le app: /_veiora/v1/filo.js e
   veiora.css, avviato da ui.js con il disegno della forma di ogni sezione nei nodi. Qui solo la sua luce, dal ciano al
   viola come la scena, e il suo piano (sotto la copertura dei passaggi) */
.v-filo { z-index: 12; --v-a3: var(--v-viola); }

/* piede: le informative sempre a schermo, discrete, in basso a sinistra sotto il logo (sui telefoni al centro). Una
   sfumatura scura come quella della testata, rovesciata, le tiene leggibili sopra la scena e sopra il testo che scorre;
   la fascia non prende i clic, solo i link */
.piede { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; pointer-events: none;
  padding: 30px clamp(16px, 4vw, 44px) max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, color-mix(in srgb, var(--nero) 97%, transparent), color-mix(in srgb, var(--nero) 90%, transparent) 50%, color-mix(in srgb, var(--nero) 0%, transparent)); }
.piede nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0 22px; width: max-content; max-width: 100%; pointer-events: auto; }
/* in apertura un filo di luce, come quello dello scorrimento */
.piede nav::before { content: ""; width: 20px; height: 1px; margin-right: -6px; background: linear-gradient(90deg, transparent, var(--ciano)); opacity: 0.6; }
.piede a { position: relative; padding: 7px 0; margin-right: -0.22em; font: 500 0.66rem/1.2 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--piede-link); text-decoration: none; text-shadow: 0 0 8px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 18px color-mix(in srgb, var(--nero) 90%, transparent); transition: color .25s, text-shadow .25s; }
.piede a + a::before { content: ""; position: absolute; left: -12.5px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%;
  background: color-mix(in srgb, var(--linea-tinta) 35%, transparent); }
.piede a:hover { color: var(--testo); text-shadow: 0 0 12px color-mix(in srgb, var(--ciano) 55%, transparent), 0 0 8px color-mix(in srgb, var(--nero) 95%, transparent); }
.piede a[aria-current="page"] { color: var(--ciano); }
@media (max-width: 720px) {
  .piede { padding-top: 36px; }
  .piede nav { margin: 0 auto; justify-content: center; gap: 0 18px; }
  .piede nav::before { display: none; }
  .piede a { font-size: 0.62rem; letter-spacing: 0.18em; margin-right: -0.18em; padding: 9px 0; }
  .piede a + a::before { left: -10.5px; }
}

/* ------------------------------------------------------------------ finestra accesso / registrazione */
dialog.pannello { width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 26px; color: var(--testo);
  background: linear-gradient(165deg, var(--pannello-a), var(--pannello-b)); box-shadow: 0 40px 120px color-mix(in srgb, var(--ombra) 60%, transparent), 0 0 0 1px var(--linea);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
dialog.pannello::backdrop { background: color-mix(in srgb, var(--nero) 60%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.pannello[open] { animation: entraPannello .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes entraPannello { from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.pannello .interno { padding: 26px 26px 24px; position: relative; }
.pannello .interno::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 1px; background: var(--grad); opacity: .8; }
.pannello .chiudi { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--chiaro) 3%, transparent); color: var(--tenue); cursor: pointer; font-size: 1.1rem; }
.pannello .chiudi:hover { color: var(--chiaro); border-color: color-mix(in srgb, var(--ciano) 50%, transparent); }
.pannello h2 { font: 700 1.35rem var(--display); margin: 4px 0 18px; }
.schede { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: color-mix(in srgb, var(--chiaro) 4%, transparent); border: 1px solid var(--linea); margin-bottom: 22px; }
.schede button { flex: 1; padding: 9px 12px; border-radius: 999px; border: 0; background: none; color: var(--tenue); font: 600 0.95rem var(--corpo); cursor: pointer; }
.schede button[aria-selected="true"] { background: var(--grad); color: var(--su-colore); }
.pannello form { margin: 0; }
.pannello .metodi { display: grid; gap: 12px; }
.sep-pannello { display: flex; align-items: center; gap: 12px; margin: 20px 0 16px; color: var(--tenue); font: 500 0.72rem var(--mono); letter-spacing: 0.2em; }
.sep-pannello::before, .sep-pannello::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.sep-pannello::before { content: ""; }
.pannello .nota { font-size: 0.86rem; color: var(--tenue); margin: 16px 0 0; }
.pannello .nota a { color: var(--tenue); }
.consenso { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0 0 16px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ciano) 25%, transparent); background: color-mix(in srgb, var(--ciano) 5%, transparent); font-size: 0.93rem; color: var(--testo); cursor: pointer; }
.consenso input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ciano); flex: none; }
.g { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%); mask: radial-gradient(circle, transparent 38%, #000 40%); }
.avviso { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--oro) 40%, transparent); background: color-mix(in srgb, var(--oro) 7%, transparent); color: var(--avviso-testo); font-size: 0.93rem; }

/* ------------------------------------------------------------------ pagine interne (profilo, consenso, ...) */
.pagina { position: relative; z-index: 5; max-width: 780px; margin: 0 auto; padding: 120px 20px 96px; min-height: 100vh; }
.pagina h1 { font: 700 clamp(1.8rem, 4vw, 2.6rem)/1.15 var(--display); margin: 0 0 20px; }
.pagina h2 { font: 700 1.2rem var(--display); margin: 34px 0 12px; }
.pagina .box { border: 1px solid var(--linea); border-radius: 18px; padding: 20px 22px; background: var(--vetro); margin: 18px 0;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pagina .meta, .meta { color: var(--tenue); font-size: 0.92rem; }
.pagina label.check { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 18px; }
.pagina label.check input { margin-top: 5px; accent-color: var(--ciano); }
.pagina ul.apps { list-style: none; padding: 0; display: grid; gap: 14px; }
.pagina ul.apps a { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 22px; border-radius: 16px;
  border: 1px solid var(--linea); background: var(--vetro); color: var(--testo); font-weight: 600; text-decoration: none; }
.pagina ul.apps a:hover { border-color: color-mix(in srgb, var(--ciano) 50%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--ciano) 15%, transparent); }
.pagina ul.apps span { color: var(--tenue); font-weight: 400; }
.pagina .error { color: var(--rosso); }

/* ------------------------------------------------------------------ richieste di accesso alle app */
/* sopratitolo, non titolo di capitolo: piu' specifico di .vetrina h2 */
.vetrina .griglia-titolo { grid-column: 1 / -1; margin: 40px 0 -8px; text-align: center; font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.35em;
  text-shadow: 0 0 18px color-mix(in srgb, var(--ciano) 60%, transparent), 0 2px 6px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 22px color-mix(in srgb, var(--nero) 90%, transparent); }
.scheda.chiusa { opacity: 0.86; }
.scheda.chiusa:hover, .scheda.chiusa:focus-within { opacity: 1; }
.scheda .chiedi { margin-top: 16px; padding: 10px 20px; font-size: 0.9rem; }
.scheda .nota-stato { margin: 12px 0 0; max-width: 31ch; color: var(--tenue); font-size: 0.88rem; line-height: 1.5;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 14px color-mix(in srgb, var(--nero) 90%, transparent); }
.avviso.ok { border-color: color-mix(in srgb, var(--ciano) 40%, transparent); background: color-mix(in srgb, var(--ciano) 7%, transparent); color: var(--testo); }
.avviso a { color: inherit; font-weight: 600; text-decoration: none; }
.avviso a:hover { color: var(--chiaro); }
.vetrina .intro .avviso { margin: 18px auto 0; max-width: 520px; }
.menu-lista .conteggio { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  border-radius: 999px; background: var(--ciano); color: var(--su-colore); font: 700 0.72rem/1 var(--corpo); }
.pagina .campo { display: block; font-weight: 600; margin: 4px 0 8px; }
.pagina textarea { display: block; width: 100%; min-height: 110px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--nero) 55%, transparent); color: var(--testo); font: 1rem/1.5 var(--corpo); resize: vertical; }
.pagina textarea:focus { outline: none; border-color: color-mix(in srgb, var(--ciano) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ciano) 15%, transparent); }
.pagina textarea::placeholder { color: var(--spento); }
.richieste-app { scroll-margin-top: 100px; }
.pagina .richiesta .chi { margin: 0 0 4px; overflow-wrap: anywhere; }
.pagina .richiesta .meta { margin: 0; }
.pagina .messaggio { margin: 14px 0 0; padding: 10px 14px; border-left: 2px solid var(--viola); border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--viola) 7%, transparent); white-space: pre-line; overflow-wrap: anywhere; }
.pagina .decidi { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.pagina .decidi .btn.secondary { margin: 0; }
.pagina h3 { font: 600 0.95rem var(--display); margin: 26px 0 10px; color: var(--tenue); }
.pagina ul.decise { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pagina ul.decise li { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--vetro-tinta) 40%, transparent);
  overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ la voce degli utenti (/voce, /voci) */
.pagina .voce-intro { color: var(--tenue); max-width: 62ch; margin: -6px 0 20px; }
.pagina .voce-torna { margin: 0 0 6px; }
.pagina .voce-torna a { font-weight: 600; text-decoration: none; }
/* di cosa si tratta: tre schede da scegliere, ognuna col suo colore (anche nelle etichette dei messaggi) */
.voce-errore { --c: var(--rosso); }
.voce-idea { --c: var(--oro); }
.voce-grazie { --c: var(--ciano); }
.pagina .voce-generi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.pagina .voce-generi legend { padding: 0; margin: 4px 0 8px; }
.pagina .voce-genere { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px 14px 13px;
  border-radius: 14px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--nero) 42%, transparent); cursor: pointer;
  transition: border-color .25s, box-shadow .25s, background-color .25s; }
.pagina .voce-genere input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pagina .voce-genere:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.pagina .voce-genere:has(input:checked) { border-color: var(--c); background-color: color-mix(in srgb, var(--c) 9%, color-mix(in srgb, var(--nero) 50%, transparent));
  box-shadow: 0 0 28px color-mix(in srgb, var(--c) 22%, transparent); }
.pagina .voce-genere:has(input:focus-visible) { outline: 2px solid var(--ciano); outline-offset: 3px; }
.voce-segno { grid-row: span 2; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--c);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 80%, transparent), 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); }
.voce-segno svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.voce-segno::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.pagina .voce-nome { font-weight: 600; line-height: 1.3; }
.pagina .voce-aiuto { color: var(--tenue); font-size: 0.84rem; line-height: 1.35; }
.pagina select.voce-scelta { appearance: none; -webkit-appearance: none; display: block; width: 100%; margin: 0 0 16px; padding: 12px 42px 12px 14px;
  border-radius: 14px; border: 1px solid var(--linea); color: var(--testo); font: 1rem/1.4 var(--corpo); cursor: pointer;
  background: color-mix(in srgb, var(--nero) 55%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a3abcf' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.pagina select.voce-scelta:focus { outline: none; border-color: color-mix(in srgb, var(--ciano) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ciano) 15%, transparent); }
.pagina .voce-modulo .btn { margin-top: 6px; }
/* i messaggi: etichetta, app, data, stato; poi il testo e le risposte, come una conversazione */
.pagina .voce { scroll-margin-top: 100px; }
.pagina .voce-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.voce-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c);
  font: 500 0.7rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.voce-stato { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--tenue); font-size: 0.86rem; }
.voce-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--spento); }
.voce-stato-nuova::before { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.voce-stato-in_corso::before { background: var(--oro); box-shadow: 0 0 8px var(--oro); }
.voce-stato-risolta::before { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.pagina .voce-testo { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pagina .voce-risposta { margin: 14px 0 0; padding: 10px 14px; border-left: 2px solid var(--viola); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--viola) 7%, transparent); }
.pagina .voce-risposta.voce-da-autore { border-left-color: var(--linea); background: color-mix(in srgb, var(--chiaro) 2.5%, transparent); }
.pagina .voce-risposta .meta { margin: 0 0 4px; font-size: 0.82rem; }
.pagina .voce details > summary { margin-top: 14px; color: var(--tenue); font-size: 0.9rem; cursor: pointer; }
.pagina .voce details > summary:hover { color: var(--testo); }
.pagina .voce-dettagli dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; font-size: 0.86rem; }
.pagina .voce-dettagli dt { color: var(--tenue); }
.pagina .voce-dettagli dd { margin: 0; overflow-wrap: anywhere; font: 0.8rem/1.5 var(--mono); }
.pagina .voce-azioni form { margin: 12px 0 0; }
.pagina .voce-azioni textarea, .pagina .voce-rispondi textarea { min-height: 84px; }
.pagina .voce-elimina { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.pagina .voce-elimina label.check { margin: 10px 0 0; font-size: 0.9rem; }
.pagina .voce-elimina .btn.secondary, .pagina .voce-azioni .btn.secondary { margin: 10px 0 0; }
.pagina .voce-rispondi { margin: 16px 0 0; }
.pagina .voce-rispondi .decidi { align-items: center; }
.pagina .voce-rispondi select.voce-scelta { width: auto; margin: 0; padding-top: 10px; padding-bottom: 10px; }
/* «Le mie app»: l'invito a scrivere, sotto le schede */
.voce-invito { margin: 48px auto 0; text-align: center; color: var(--tenue); font-size: 0.95rem;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 14px color-mix(in srgb, var(--nero) 90%, transparent); }
.voce-invito a { font-weight: 600; }
@media (max-width: 620px) {
  .pagina .voce-generi { grid-template-columns: 1fr; }
  .voce-stato { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .appare { opacity: 1; transform: none; filter: none; }
}
.entra h2, .entra p, .entra .numero { text-shadow: 0 2px 18px color-mix(in srgb, var(--nero) 95%, transparent), 0 0 42px color-mix(in srgb, var(--nero) 80%, transparent); }

/* titoli che si decodificano: il testo vero tiene l'impaginazione, i simboli scorrono in uno strato sopra */
[data-decodifica].in-decodifica { position: relative; color: transparent; text-shadow: none; }
[data-decodifica].in-decodifica > .glifi { position: absolute; inset: 0; overflow: hidden; color: var(--testo);
  text-shadow: 0 2px 6px color-mix(in srgb, var(--nero) 85%, transparent), 0 0 28px color-mix(in srgb, var(--nero) 90%, transparent); }

/* schermi bassi in orizzontale (telefoni ruotati): testata e testi piu' compatti, pannello su meta' schermo di lato
   e forma sull'altra meta' */
@media (max-height: 500px) and (orientation: landscape) {
  .testata { padding-top: 8px; padding-bottom: 12px; }
  .piede { padding-top: 18px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .piede a { padding: 6px 0; }
  .eroe { padding-top: 68px; }
  .scorri { display: none; }
  .capitolo, .capitolo.destra { min-height: 100vh; padding-top: 72px; padding-bottom: 24px; }
  .pannello-testo { max-width: min(520px, 50vw); padding: 18px 24px; }
  .capitolo h2 { font-size: 1.7rem; }
  .capitolo, .capitolo.destra { padding-left: 24px; padding-right: 24px; }
  .capitolo { justify-content: flex-start; }
  .capitolo.destra { justify-content: flex-end; }
}
/* telefoni molto stretti */
@media (max-width: 360px) {
  .pannello-testo { padding: 20px 14px; }
  .capitolo h2 { font-size: 1.65rem; }
  .capitolo p { font-size: 1rem; }
}

/* partenza verso le pagine di accesso: lo sciame a vortice copre la pagina (sciame.js, stesse misure delle pagine di
   accesso: tela alta 100lvh, testo sotto il vortice) */
/* sotto la testata (z-index 20): il logo resta visibile e fermo durante il passaggio, come nelle pagine di accesso */
.partenza { position: fixed; inset: 0; z-index: 15; background: var(--nero); display: none; opacity: 0; transition: opacity .45s ease; }
.partenza.visibile { display: block; }
.partenza.attiva { opacity: 1; }
/* partenza: i testi svaniscono (il logo resta), la scena diventa l'anello del varco, poi il varco sfuma sopra */
.scorrevole, .piede, .testata .voci, .v-filo { transition: opacity .8s ease; }
/* navigazione morbida tra le pagine (ui.js): il contenuto svanisce e ricompare, la scena resta accesa */
main { transition: opacity .45s ease; }
html.cambio main { opacity: 0; transition: opacity .22s ease; }
html.in-partenza .scorrevole, html.in-partenza .piede, html.in-partenza .testata .voci,
html.in-partenza .v-filo { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
/* arrivo dalle pagine di accesso: il varco c'e' gia' al primo disegno, poi sfuma sull'anello della scena e i testi
   riappaiono mentre le particelle si ricompongono */
html.arrivo .partenza { display: block; opacity: 1; }
html.arrivo .partenza.sfuma { opacity: 0; transition: opacity .55s ease; }
html.arrivo .scorrevole, html.arrivo .piede, html.arrivo .testata .voci, html.arrivo .v-filo { opacity: 0; }
.partenza canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
.partenza-testo { position: absolute; left: 16px; right: 16px; top: calc(44vh + min(40vmin, 33.3vh) + 8px); top: calc(44lvh + min(40vmin, 33.3lvh) + 8px);
  margin: 0; text-align: center; font: 500 0.78rem/1.5 var(--mono); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ciano); text-shadow: 0 0 18px color-mix(in srgb, var(--ciano) 60%, transparent); animation: respiro 2.4s ease-in-out infinite; }
@keyframes respiro { 50% { opacity: 0.55; } }

/* ------------------------------------------------------------------ aspetto: il selettore (carta, notte, automatico)
   In testata accanto alla lingua: un tasto tondo col segno dell'aspetto scelto (sole, luna, meta' e meta'); al clic il
   menu con i tre aspetti, quello in uso con la spunta. Come la lingua e' un <details> con link ?tema=, quindi funziona
   anche senza JavaScript; con JavaScript (tema.js) l'aspetto cambia senza ricaricare la pagina */
.tema { position: relative; }
.tema > summary { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--vetro-tinta) 62%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; color: var(--testo);
  transition: border-color .3s, box-shadow .3s, color .2s; }
.tema > summary::-webkit-details-marker { display: none; }
.tema > summary:hover, .tema[open] > summary { border-color: color-mix(in srgb, var(--ciano) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ciano) 25%, transparent); color: var(--chiaro); }
.tema svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tema svg .pieno { fill: currentColor; stroke: none; }
.tema > summary svg { display: none; }
.tema > summary[data-icona="auto"] .i-auto, .tema > summary[data-icona="carta"] .i-carta, .tema > summary[data-icona="notte"] .i-notte { display: block; }
.tema-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; display: grid; gap: 2px; width: 272px; padding: 6px;
  border-radius: 18px; border: 1px solid var(--linea); background: var(--menu); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--ombra) 50%, transparent); transform-origin: calc(100% - 22px) 0;
  animation: entraLingua .24s cubic-bezier(.2, .8, .2, 1); }
.tema-menu::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; opacity: 0.7; background: var(--grad); }
.tema-menu a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 12px; padding: 9px 12px; border-radius: 12px;
  text-decoration: none; color: var(--testo); font: 500 0.95rem/1.25 var(--corpo); transition: background-color .2s, color .2s; }
.tema-menu a svg { grid-row: span 2; color: var(--tenue); transition: color .2s; }
.tema-menu a small { grid-column: 2; color: var(--tenue); font-size: 0.78rem; font-weight: 400; }
.tema-menu a:hover { background: color-mix(in srgb, var(--ciano) 8%, transparent); color: var(--chiaro); }
.tema-menu a:hover svg, .tema-menu a[aria-current="true"] svg { color: var(--ciano); }
.tema-menu a:focus-visible { border-radius: 12px; outline-offset: -2px; }
.tema-menu a[aria-current="true"] { background: color-mix(in srgb, var(--ciano) 6%, transparent); cursor: default; }
.tema-menu a[aria-current="true"]::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 10px; height: 5px; margin: -3px 3px 0 0;
  border: solid var(--ciano); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
@media (max-width: 480px) {   /* il menu sotto la testata, a filo del suo bordo destro (come quelli della lingua e dell'account) */
  .tema { position: static; }
  .tema-menu { right: clamp(16px, 4vw, 44px); top: 64px; }
}
@media (prefers-reduced-motion: reduce) { .tema-menu { animation: none; } }
/* nel profilo: i tre aspetti come le lingue, quello in uso in evidenza */
.pagina [data-tema-scelta][aria-current="true"] { font-weight: 700; }
/* il cambio di aspetto: la pagina nuova si allarga in un cerchio dal tasto (tema.js), senza dissolvenza */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ================================================================== carta: veiora alla luce del giorno
   Sulla carta la luce di veiora diventa inchiostro. I colori sono pigmenti (turchese di Prussia, violetto, magenta di
   quinacridone, ocra...), scuri quanto basta per leggersi sul bianco caldo: almeno 4,5:1 anche sulla carta della sera.
   La carta e la luce che la illumina seguono l'ora di chi guarda (tema.js: --carta, --sole, --sole-x, --sole-y; senza
   JavaScript quelle di mezzogiorno). Le variabili di veli, ombre e linee sono le stesse della notte: qui si rifanno, e il
   resto del foglio non sa in che aspetto si trova. Anche quelle del kit (--v-*), che colorano il filo. */
html[data-tema="carta"] {
  --carta: rgb(247, 243, 234); --sole: rgba(255, 251, 238, 0.42); --sole-x: 55%; --sole-y: -16%;
  --nero: var(--carta); --vetro: color-mix(in srgb, #fffdf8 72%, transparent); --vetro-forte: color-mix(in srgb, #fffdf8 92%, transparent);
  --testo: #1d1a2e; --tenue: #4d475f; --spento: #6b6478; --linea: color-mix(in srgb, #2c2640 14%, transparent);
  --ciano: #0c6f80; --viola: #5a37c8; --magenta: #a8207a; --oro: #8a5a0a; --rosso: #b3263e;
  --acqua: #0b7560; --cielo: #13689e; --pervinca: #3346b0; --lavanda: #6a45bd; --rosa: #ad2e5b;
  --chiaro: #0f0c1d; --ombra: #4a341e; --linea-tinta: #2c2640; --vetro-tinta: #fffdf8; --su-colore: #fff; --orb-fondo: #2a1f5a;
  --testo-2: #3a354d; --testo-3: #474259; --testo-4: #29243b; --testo-sotto: #3a354d; --piede-link: #625c70;
  --menu: color-mix(in srgb, #fffdf8 96%, transparent); --pannello-a: rgba(255, 254, 250, 0.97); --pannello-b: rgba(249, 244, 235, 0.97);
  --verde: #1d7449; --avviso-testo: #6b4708; --rischio-a: #c22f48; --rischio-b: #a3205e; --rischio-ombra: rgba(163, 32, 70, 0.22);
  --v-nero: var(--carta); --v-testo: var(--testo); --v-tenue: var(--tenue); --v-spento: var(--spento);
  --v-superficie: var(--vetro); --v-linea: color-mix(in srgb, #2c2640 16%, transparent);
  --v-ciano: var(--ciano); --v-acqua: var(--acqua); --v-cielo: var(--cielo); --v-pervinca: var(--pervinca); --v-viola: var(--viola);
  --v-lavanda: var(--lavanda); --v-magenta: var(--magenta); --v-rosa: var(--rosa); --v-ambra: var(--oro);
  color-scheme: light;
}
html[data-tema="carta"] body { background: var(--carta); }
/* sfondo: carta (sotto la scena, che la ridisegna uguale), la luce del giorno che entra da --sole-x/--sole-y e i bordi
   appena piu' scuri, come un foglio sul tavolo; al posto delle righe dello schermo la grana e le fibre della carta */
html[data-tema="carta"] .fondale { background: var(--carta); }
html[data-tema="carta"] .vignetta {
  background:
    radial-gradient(70vmax 58vmax at var(--sole-x) var(--sole-y), var(--sole), transparent 70%),
    radial-gradient(90vmax 70vmax at calc(100% - var(--sole-x)) calc(100% - var(--sole-y)), rgba(70, 60, 110, 0.07), transparent 70%),
    radial-gradient(ellipse at 50% 45%, transparent 60%, color-mix(in srgb, var(--ombra) 11%, transparent) 100%); }
html[data-tema="carta"] .righe { opacity: 0.42; mix-blend-mode: multiply; background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .31 0 0 0 0 .21 0 0 0 1.5 -.62'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); }
html[data-tema="carta"] #alone { mix-blend-mode: multiply; }
/* il logo: una goccia d'inchiostro col suo alone, non una luce */
html[data-tema="carta"] .marchio i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ciano) 16%, transparent), 0 0 0 6px color-mix(in srgb, var(--viola) 7%, transparent); }
/* niente bagliori sulla carta: la luce dei testi e delle icone diventa nitida */
html[data-tema="carta"] .sopratitolo, html[data-tema="carta"] .vetrina .griglia-titolo { text-shadow: 0 0 10px var(--carta), 0 0 2px var(--carta); }
html[data-tema="carta"] .menu-lista a[aria-current="page"] svg, html[data-tema="carta"] .v-filo-nodo.v-qui { filter: none; }
html[data-tema="carta"] .utente-btn:hover, html[data-tema="carta"] .lingua > summary:hover, html[data-tema="carta"] .lingua[open] > summary,
html[data-tema="carta"] .tema > summary:hover, html[data-tema="carta"] .tema[open] > summary {
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ombra) 12%, transparent); }
html[data-tema="carta"] .utente-btn .orb, html[data-tema="carta"] .menu-chi .orb { color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ombra) 12%, transparent), 0 3px 8px color-mix(in srgb, var(--viola) 25%, transparent); }
html[data-tema="carta"] .lingua > summary .bandiera, html[data-tema="carta"] .lingua-menu a[aria-current="true"] .bandiera {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ciano) 70%, transparent); }
html[data-tema="carta"] .lingua-menu a[aria-current="true"]::after { filter: none; }
html[data-tema="carta"] .menu-lista, html[data-tema="carta"] .lingua-menu, html[data-tema="carta"] .tema-menu {
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ombra) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--ombra) 8%, transparent); }
/* pulsanti: inchiostro pieno con la sfumatura dei tre pigmenti, ombra calda */
html[data-tema="carta"] .btn { box-shadow: 0 0 0 1px color-mix(in srgb, #fff 18%, transparent) inset, 0 8px 22px color-mix(in srgb, var(--viola) 24%, transparent); }
html[data-tema="carta"] .btn:hover { box-shadow: 0 0 0 1px color-mix(in srgb, #fff 28%, transparent) inset, 0 12px 30px color-mix(in srgb, var(--ciano) 26%, transparent); color: #fff; }
html[data-tema="carta"] .btn.fantasma, html[data-tema="carta"] .btn.secondary { background: color-mix(in srgb, #fffdf8 55%, transparent); color: var(--testo);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--linea-tinta) 24%, transparent) inset; }
html[data-tema="carta"] .btn.fantasma:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ciano) 60%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--ciano) 14%, transparent); color: var(--chiaro); }
html[data-tema="carta"] .entra .btn.fantasma { background: color-mix(in srgb, #fffdf8 70%, transparent); }
/* l'anello d'inchiostro passa dietro al testo dell'ingresso: la carta sotto le parole e' un po' piu' piena */
html[data-tema="carta"] .entra::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--carta) 78%, transparent),
  color-mix(in srgb, var(--carta) 50%, transparent) 58%, transparent); }
/* capitoli: al posto dei due angoli di luce i segni di taglio della stampa, nei pigmenti della forma della sezione
   (la tavolozza scorre con la pagina, come la scena); il numero del capitolo nel primo pigmento */
html[data-tema="carta"] [data-forma] { --tinta-a: var(--ciano); --tinta-b: var(--magenta); }
html[data-tema="carta"] [data-forma="sfera"] { --tinta-a: var(--cielo); --tinta-b: var(--viola); }
html[data-tema="carta"] [data-forma="rete"] { --tinta-a: var(--acqua); --tinta-b: var(--lavanda); }
html[data-tema="carta"] [data-forma="elica"] { --tinta-a: var(--magenta); --tinta-b: var(--ciano); }
html[data-tema="carta"] [data-forma="galassia"] { --tinta-a: var(--oro); --tinta-b: var(--rosa); }
html[data-tema="carta"] [data-forma="anello"] { --tinta-a: var(--ciano); --tinta-b: var(--lavanda); }
html[data-tema="carta"] [data-forma] .numero { color: var(--tinta-a); }
html[data-tema="carta"] .pannello-testo::before { inset: -22px; opacity: 0.9; filter: none;
  background:
    linear-gradient(var(--tinta-a), var(--tinta-a)) 0 22px / 16px 1px no-repeat,
    linear-gradient(var(--tinta-a), var(--tinta-a)) 22px 0 / 1px 16px no-repeat,
    linear-gradient(var(--tinta-b), var(--tinta-b)) right 0 bottom 22px / 16px 1px no-repeat,
    linear-gradient(var(--tinta-b), var(--tinta-b)) right 22px bottom 0 / 1px 16px no-repeat; }
html[data-tema="carta"] .etichetta { border-color: color-mix(in srgb, var(--tinta-a, var(--ciano)) 30%, transparent); background: color-mix(in srgb, #fffdf8 60%, transparent); }
/* le app: i loro pigmenti; il nome della stella che si apre prende un alone d'acquerello della sua tinta */
html[data-tema="carta"] .scheda[data-app="mnemosyn"] { --a1: var(--acqua); --a2: var(--cielo); --a3: var(--lavanda); }
html[data-tema="carta"] .scheda[data-app="sibilla"] { --a1: var(--pervinca); --a2: var(--rosa); --a3: var(--oro); }
html[data-tema="carta"] .scheda[data-app="vizora"] { --a1: var(--ciano); --a2: var(--magenta); --a3: var(--oro); }
html[data-tema="carta"] .scheda[data-app="statistiche"] { --a1: var(--cielo); --a2: var(--pervinca); --a3: var(--lavanda); }
html[data-tema="carta"] .scheda[data-app="verdestudio"] { --a1: #4f7a31; --a2: #8a6a12; --a3: #a4552a; }
html[data-tema="carta"] .scheda:hover h3, html[data-tema="carta"] .scheda.accesa h3 {
  text-shadow: 0 0 18px color-mix(in srgb, var(--a2) 22%, transparent), 0 0 3px var(--carta); }
html[data-tema="carta"] .senza-3d .scheda .simbolo::before { background: var(--a2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 22%, transparent), 0 0 0 9px color-mix(in srgb, var(--a3) 10%, transparent); }
/* campi: fogli bianchi sulla carta */
html[data-tema="carta"] .pagina textarea, html[data-tema="carta"] .pagina select.voce-scelta { background-color: #fffdf9; }
html[data-tema="carta"] .pagina select.voce-scelta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234d475f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
html[data-tema="carta"] .pagina .voce-genere { background-color: color-mix(in srgb, #fffdf8 70%, transparent); }
html[data-tema="carta"] .voce-segno, html[data-tema="carta"] .voce-stato::before { filter: none; }
html[data-tema="carta"] .voce-segno::before { box-shadow: none; }
/* la finestra di accesso: un foglio sopra la pagina velata */
html[data-tema="carta"] dialog.pannello { box-shadow: 0 30px 90px color-mix(in srgb, var(--ombra) 22%, transparent), 0 0 0 1px var(--linea); }
html[data-tema="carta"] dialog.pannello::backdrop { background: rgba(58, 42, 26, 0.24); }
html[data-tema="carta"] .piede a:hover { text-shadow: 0 0 8px var(--carta); }
/* il filo del kit (veiora.css del kit ha alcuni colori fissi, pensati per la notte) */
html[data-tema="carta"] .v-filo::before { background: linear-gradient(transparent, color-mix(in srgb, var(--linea-tinta) 22%, transparent) 14%,
  color-mix(in srgb, var(--linea-tinta) 22%, transparent) 86%, transparent); }
html[data-tema="carta"] .v-filo-luce { box-shadow: none; }
html[data-tema="carta"] .v-filo-perla { background: radial-gradient(circle, #fffdf8 0 26%, var(--v-a1) 34% 58%, transparent 64%);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--ombra) 30%, transparent); }
html[data-tema="carta"] .v-filo-nodo { color: color-mix(in srgb, var(--testo) 42%, transparent); }
html[data-tema="carta"] .v-filo-nodo:hover { color: var(--chiaro); }
html[data-tema="carta"] .v-filo-nodo em { text-shadow: 0 0 8px var(--carta), 0 0 3px var(--carta); }
/* il passaggio verso le pagine di accesso: anche il varco e' d'inchiostro sulla carta (sciame.js), come quelle pagine.
   Verso le app (e di ritorno da loro), che sono ancora solo notte, il varco resta quello della notte (data-notte) */
html[data-tema="carta"] .partenza { background: var(--carta); }
html[data-tema="carta"] .partenza-testo { color: var(--ciano); text-shadow: 0 0 10px var(--carta), 0 0 3px var(--carta); }
html[data-tema="carta"] .partenza[data-notte] { background: #04050a; }
html[data-tema="carta"] .partenza[data-notte] .partenza-testo { color: #5ef2ff; text-shadow: 0 0 18px rgba(94, 242, 255, 0.6); }
/* durante il passaggio notturno anche la testata (che resta sopra, col logo) e' quella della notte */
html[data-tema="carta"]:has(.partenza[data-notte].visibile) .testata, html[data-tema="carta"].arrivo-notte .testata {
  background: linear-gradient(180deg, rgba(4, 5, 10, 0.94), rgba(4, 5, 10, 0.8) 62%, rgba(4, 5, 10, 0)); }
html[data-tema="carta"]:has(.partenza[data-notte].visibile) .marchio, html[data-tema="carta"].arrivo-notte .marchio { color: #e9ecff; }
html[data-tema="carta"]:has(.partenza[data-notte].visibile) .marchio i, html[data-tema="carta"].arrivo-notte .marchio i {
  background: #5ef2ff; box-shadow: 0 0 12px #5ef2ff, 0 0 30px #8b5cf6; }