/* mindset.xin, quarta versione (7 ottobre 2026). Il fondatore: «moderno e pieno di effetti:
   eleganti, ma comunque pieno di effetti e haptic», con le linee guida di iOS e HarmonyOS 7 (Tencent
   fuori, per il sito). Regole lette sulle fonti, docs/16-design.md §23:
   - il colore sta nel contenuto, il vetro solo sui controlli che galleggiano sopra (WWDC26 251:
     «move color into the content area»; HIG Materials; WWDC25 219: niente vetro su vetro);
   - a riposo è quieto e prende vita al tocco e allo scorrimento («the resting state stay visually
     quiet, while it comes to life on touch», WWDC25 219): niente si muove da solo per più di
     qualche secondo (WCAG 2.2.2);
   - l'energia sale lungo la pagina come nell'app: apertura in quiete, il metodo in passo, l'invito
     in slancio (design/tokens.yaml, energie; i campi si mescolano in OKLab nel generatore);
   - il bordo di scorrimento sfocato al posto dei divisori (WWDC25 356), angoli concentrici;
   - le molle dei token (ArkUI di HarmonyOS), il bagliore che parte dal dito e la luce sul bordo
     che guida lo sguardo (沉浸光感, 边缘流光: docs/16 §22).
   Ogni valore viene dai token: tests/una_fonte.rs fallisce su colori, testi, raggi, curve, spazi,
   larghezze, durate, ombre, sfocature, spaziature e punti di rottura scritti a mano. */

/* Le parole dei campi si possono animare: registrate come colori, sfumano da un livello all'altro. */
@property --challenge-field { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --challenge-field-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --choice-field { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --choice-field-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --change-field { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --change-field-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chance-field { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chance-field-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --angolo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --lr { syntax: '<length>'; inherits: false; initial-value: 0px; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--root-size); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-blocco); }
:root[data-motion="pieno"] { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-family); font-size: var(--type-corpo); line-height: var(--line-height);
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ol, ul, figure, blockquote, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: var(--focus-ring); }
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: absolute; left: var(--space-m); top: var(--space-m); z-index: 100; padding: var(--space-s) var(--space-m); border-radius: var(--radius-pillola); background: var(--text); color: var(--bg); translate: 0 -200%; }
.salta:focus { translate: 0 0; }

/* Le parti di testo che ritornano */
.occhiello { font-size: var(--type-micro); font-weight: 800; letter-spacing: var(--tracking-occhiello); text-transform: uppercase; color: var(--muted); }
.titolo { font-size: var(--type-palco); font-weight: 800; line-height: 1.04; letter-spacing: var(--tracking-titolo); text-wrap: balance; }
.titolo-grande { font-size: var(--type-enorme); font-weight: 800; line-height: .98; letter-spacing: var(--tracking-gigante); text-wrap: balance; }
.voce { font-size: var(--type-frase); line-height: 1.45; color: var(--muted); text-wrap: pretty; max-width: var(--width-testo); }
.nota, .piccolo { font-size: var(--type-nota); color: var(--muted); }
.testa { display: grid; gap: var(--space-m); max-width: var(--width-stretta); margin-inline: auto; text-align: center; justify-items: center; }
.testa .voce { margin-inline: auto; }

/* ---------- Tasti ---------- */
.tasto {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-tasto); padding: 0 var(--space-xl); border-radius: var(--radius-pillola); border: 0;
  font: inherit; font-size: var(--type-enfasi); font-weight: 800; text-decoration: none; cursor: pointer;
  transition: scale var(--spring-dito-d) var(--spring-dito), background-color var(--duration-breve) var(--ease-uscita), color var(--duration-breve) var(--ease-uscita), box-shadow var(--duration-media) var(--ease-uscita);
}
.tasto-pieno { background: var(--tint); color: var(--on-tint); box-shadow: var(--shadow-leggera); }
.tasto-chiaro { background: color-mix(in oklab, var(--surface) var(--glass-alpha), transparent); color: var(--text); box-shadow: var(--shadow-bordo-chiaro); -webkit-backdrop-filter: blur(var(--blur-vetro)); backdrop-filter: blur(var(--blur-vetro)); }
.tasto-pericolo { background: var(--danger); color: var(--on-danger); }
.tasto-crema { background: var(--tasto-crema, var(--surface)); color: var(--on-crema, var(--text)); box-shadow: var(--shadow-vetro); }
.tasto-sul-campo { background: color-mix(in oklab, var(--on-field) 14%, transparent); color: var(--on-field); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--on-field) 38%, transparent); }
.premuto, .tasto:active { scale: .96; }
/* Il bagliore che parte dal dito (WWDC25 219: «the material illuminates from within»). */
.premi::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), color-mix(in oklab, currentColor var(--energia-bagliore, 20%), transparent), transparent var(--lr)); }
.premi.acceso::after { animation: bagliore var(--duration-bagliore) var(--ease-bagliore) forwards; }
@keyframes bagliore { from { --lr: 0px; opacity: 1; } to { --lr: 18em; opacity: 0; } }
.azioni { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; align-items: center; }
.azioni-sinistra { justify-content: flex-start; }

/* ---------- La barra: una capsula di vetro che galleggia, il bordo di scorrimento sotto ---------- */
.barra { position: fixed; z-index: 50; inset: var(--space-s) var(--space-margine) auto; display: flex; justify-content: center; pointer-events: none; }
.capsula {
  pointer-events: auto; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  width: min(100%, var(--width-pagina)); min-height: var(--control-tasto); padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-m);
  border-radius: var(--radius-pillola); color: var(--text);
  transition: background-color var(--duration-lenta) var(--ease-uscita), box-shadow var(--duration-lenta) var(--ease-uscita);
}
.vetro {
  background: color-mix(in oklab, color-mix(in oklab, var(--surface) 88%, var(--tinta-sezione, var(--surface))) var(--glass-alpha), transparent);
  -webkit-backdrop-filter: blur(var(--blur-vetro)) saturate(1.8); backdrop-filter: blur(var(--blur-vetro)) saturate(1.8);
  box-shadow: var(--shadow-vetro), var(--shadow-bordo-chiaro);
}
/* La luce speculare segue il puntatore sul vetro, e si accende al tocco. */
.vetro::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklab, var(--surface) 70%, transparent), transparent 40%);
  transition: opacity var(--duration-media) var(--ease-uscita); }
.vetro:hover::before, .vetro.toccato::before { opacity: 1; }
.marchio { display: inline-flex; align-items: center; color: var(--text); text-decoration: none; min-height: var(--target-min); }
.marchio .logo { height: 1em; width: auto; }
.capsula-azioni { display: flex; align-items: center; gap: var(--space-xxs); }
.tasto-vetro, .tasto-capsula, .tasto-aiuto {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--target-min); min-height: var(--target-min); padding: 0 var(--space-s); border: 0; border-radius: var(--radius-pillola);
  font: inherit; font-weight: 800; font-size: var(--type-nota); text-decoration: none; cursor: pointer; color: var(--text); background: transparent;
  transition: scale var(--spring-dito-d) var(--spring-dito), background-color var(--duration-breve) var(--ease-uscita);
}
.tasto-vetro:hover, .tasto-voce:hover { background: color-mix(in oklab, var(--text) 8%, transparent); }
.tasto-voce { position: relative; isolation: isolate; overflow: hidden; align-items: center; justify-content: center; min-height: var(--target-min); padding: 0 var(--space-m); border-radius: var(--radius-pillola); font-weight: 700; font-size: var(--type-nota); text-decoration: none; color: var(--text); }
.solo-largo { display: none; }
@media (width >= 60rem) { .tasto-voce.solo-largo { display: inline-flex; } }
.tasto-capsula { background: var(--tint); color: var(--on-tint); }
.tasto-aiuto { color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, transparent); }
.bordo-scorrimento {
  position: fixed; z-index: 40; inset: 0 0 auto; height: calc(var(--control-tasto) + var(--space-s) + var(--space-xl)); pointer-events: none;
  -webkit-backdrop-filter: blur(var(--blur-bordo)); backdrop-filter: blur(var(--blur-bordo));
  background: linear-gradient(var(--bg), color-mix(in oklab, var(--bg) 0%, transparent));
  -webkit-mask-image: linear-gradient(black 45%, transparent); mask-image: linear-gradient(black 45%, transparent);
  opacity: 0; transition: opacity var(--duration-media) var(--ease-uscita);
}
.scorsa .bordo-scorrimento { opacity: 1; }
/* Il vetro si adatta a quello che ha sotto (HIG Materials): sopra una sezione scura diventa scuro. */
.capsula.su-scuro { --text: var(--on-night); background: color-mix(in oklab, var(--night) var(--glass-alpha), transparent); box-shadow: var(--shadow-vetro-notte), var(--shadow-bordo-scuro); }
.capsula.su-scuro .tasto-vetro:hover { background: color-mix(in oklab, var(--on-night) 12%, transparent); }
.capsula.su-scuro .tasto-aiuto { color: var(--on-night); background: color-mix(in oklab, var(--danger) 55%, transparent); }
.barra-su-scuro .bordo-scorrimento { background: linear-gradient(var(--night), color-mix(in oklab, var(--night) 0%, transparent)); }
/* Sopra il campo dell'invito la capsula scende di tono, sopra i campi chiari resta chiara. */
@media (width >= 40rem) { .capsula { padding-left: var(--space-l); } .marchio .logo { height: 1.25em; } .tasto-vetro, .tasto-capsula, .tasto-aiuto { padding: 0 var(--space-l); } }

/* ---------- Le sezioni ---------- */
main > section { position: relative; padding: var(--space-sezione) var(--space-margine); }
.rivela { opacity: 1; }
:root.js[data-motion="pieno"] .rivela { opacity: 0; translate: 0 1.2em; transition: opacity var(--spring-energia-d, var(--spring-sistema-d)) var(--ease-uscita) var(--ritardo, 0s), translate var(--spring-sistema-d) var(--spring-sistema) var(--ritardo, 0s); }
:root.js[data-motion="pieno"] .rivela.dentro { opacity: 1; translate: 0 0; }
:root.js[data-motion="ridotto"] .rivela { opacity: 0; transition: opacity var(--duration-media) var(--ease-uscita); }
:root.js[data-motion="ridotto"] .rivela.dentro { opacity: 1; }

/* ---------- Apertura: quieta; i due punti del nome sono due sorgenti di luce ---------- */
.apertura {
  --tinta-sezione: var(--choice-field);
  min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate;
  padding-top: calc(var(--control-tasto) + var(--space-sezione)) !important;
  background:
    radial-gradient(60% 55% at 18% 22%, var(--challenge-field), transparent 70%),
    radial-gradient(55% 50% at 86% 18%, var(--choice-field-2), transparent 70%),
    radial-gradient(65% 60% at 80% 88%, var(--change-field), transparent 72%),
    radial-gradient(55% 55% at 12% 90%, var(--chance-field), transparent 70%),
    var(--bg);
}
.luce { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.apertura-dentro { display: grid; justify-items: center; gap: var(--space-l); width: min(100%, var(--width-pagina)); }
.domanda-nome { font-size: var(--type-sottotitolo); font-weight: 400; color: var(--text); max-width: var(--width-stretta); text-wrap: balance; }
.claim { display: grid; justify-items: center; gap: var(--space-xs); font-size: var(--type-enorme); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-gigante); }
.claim-nome { display: block; width: min(100%, 11em); }
.claim-nome .logo { display: block; width: 100%; height: auto; color: var(--text); overflow: visible; }
.claim-nome .punto { transition: scale var(--spring-micro-d) var(--spring-micro); transform-box: fill-box; transform-origin: center; }
.claim-nome.pulsa .punto { scale: 1.35; }
.claim-completa { display: block; min-height: 1.1em; font-size: .62em; color: var(--text); }
.claim-completa .lettera { display: inline-block; white-space: pre; }
:root[data-motion="pieno"] .claim-completa .lettera { animation: lettera var(--spring-fine-d) var(--spring-fine) both; animation-delay: calc(var(--i) * var(--duration-istante) * .3); }
@keyframes lettera { from { opacity: 0; translate: 0 .5em; filter: blur(var(--blur-bordo)); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.claim-completa[data-parola="challenge"] { color: var(--vivo-challenge); }
.claim-completa[data-parola="choice"] { color: var(--vivo-choice); }
.claim-completa[data-parola="change"] { color: var(--vivo-change); }
.claim-completa[data-parola="chance"] { color: var(--vivo-chance); }
.apertura .voce { font-size: var(--type-frase); margin-inline: auto; text-align: center; }
.apertura .azioni { margin-top: var(--space-xs); }
.scendi { position: absolute; left: 50%; bottom: var(--space-xl); translate: -50% 0; display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border-radius: 50%; color: var(--muted); }
.scendi i { width: .9em; height: .9em; border-right: .16em solid currentColor; border-bottom: .16em solid currentColor; rotate: 45deg; translate: 0 -.2em; }
:root[data-motion="pieno"] .scendi i { animation: scendi var(--duration-distesa) var(--ease-respiro) 3 alternate; }
@keyframes scendi { to { translate: 0 .2em; } }

/* ---------- Il ciclo: un palco fermo, una parola per schermata ---------- */
.ciclo { padding-bottom: 0 !important; }
.palco { margin: var(--space-blocco) calc(-1 * var(--space-margine)) 0; }
.palco-fermo { position: relative; }
.parola {
  --campo-a: var(--challenge-field); --campo-b: var(--challenge-field-2); --vivo: var(--vivo-challenge);
  position: relative; overflow: clip; display: grid; align-content: center; gap: var(--space-l); min-height: 92svh;
  padding: var(--space-sezione) max(var(--space-margine), calc((100% - var(--width-pagina)) / 2)); color: var(--on-field); container-type: inline-size;
  background: linear-gradient(160deg, var(--campo-a), var(--campo-b));
}
.p-choice { --campo-a: var(--choice-field); --campo-b: var(--choice-field-2); --vivo: var(--vivo-choice); }
.p-change { --campo-a: var(--change-field); --campo-b: var(--change-field-2); --vivo: var(--vivo-change); }
.p-chance { --campo-a: var(--chance-field); --campo-b: var(--chance-field-2); --vivo: var(--vivo-chance); }
.p-pause { --campo-a: var(--pause-field); --campo-b: var(--pause-field-2); --vivo: var(--vivo-pause); }
.parola-n { font-size: var(--type-micro); font-weight: 800; letter-spacing: var(--tracking-occhiello); text-transform: uppercase; opacity: .78; }
.parola h3 { display: grid; gap: var(--space-xxs); }
.parola-it { font-size: min(var(--type-gigante), calc(150cqi / var(--lettere, 8))); font-weight: 800; line-height: .9; letter-spacing: var(--tracking-gigante); }
.parola-it .lettera { display: inline-block; }
.parola-en { font-size: var(--type-sottotitolo); font-weight: 400; opacity: .8; }
.parola-domanda { font-size: var(--type-domanda); font-weight: 700; line-height: 1.18; letter-spacing: var(--tracking-frase); max-width: var(--width-stretta); text-wrap: balance; }
.attrezzi { display: flex; flex-wrap: wrap; gap: var(--space-xs); max-width: var(--width-stretta); }
.attrezzi li { padding: var(--space-xxs) var(--space-s); border-radius: var(--radius-pillola); font-size: var(--type-nota); font-weight: 700;
  background: color-mix(in oklab, var(--on-field) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--on-field) 22%, transparent); }
.parola-segno { position: absolute; z-index: 0; right: -12cqi; top: calc(var(--control-tasto) + var(--space-l)); width: 46cqi; opacity: .9; pointer-events: none; }
@media (width >= 60rem) { .parola-segno { right: calc(-.12 * min(60cqi, 44em)); top: 50%; width: min(60cqi, 44em); translate: 0 -50%; } }
.parola-segno path { fill: color-mix(in oklab, var(--on-field) 10%, transparent); }
.parola-segno .acceso { fill: color-mix(in oklab, var(--vivo) 85%, transparent); }
.parola > :not(.parola-segno) { position: relative; z-index: 1; }
.palco-segni { display: none; }

/* Con lo script e il movimento pieno: il palco resta fermo e le parole si danno il cambio. */
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .palco { height: calc(var(--n, 5) * 100svh); }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .palco-fermo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola {
  position: absolute; inset: 0; min-height: 0; clip-path: circle(0% at var(--ox, 85%) var(--oy, 50%));
  transition: clip-path var(--spring-sistema-d) var(--spring-sistema);
}
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola.prima, :root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola.attiva { clip-path: circle(150% at var(--ox, 85%) var(--oy, 50%)); }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola .lettera { opacity: 0; translate: 0 .35em; transition: opacity var(--duration-media) var(--ease-uscita), translate var(--spring-fine-d) var(--spring-fine); transition-delay: calc(var(--i) * var(--duration-istante) * .35); }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola.attiva .lettera { opacity: 1; translate: 0 0; }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola .parola-domanda, :root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola .attrezzi { opacity: 0; translate: 0 1em; transition: opacity var(--duration-lenta) var(--ease-uscita) var(--duration-media), translate var(--spring-sistema-d) var(--spring-sistema) var(--duration-media); }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola.attiva .parola-domanda, :root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola.attiva .attrezzi { opacity: 1; translate: 0 0; }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .parola-segno { rotate: calc(var(--p, 0) * 90deg); transition: rotate var(--spring-sistema-d) var(--spring-sistema); }
:root.js[data-motion="pieno"]:not([data-stile="nitido"]) .palco-segni {
  position: absolute; z-index: 3; left: 50%; bottom: var(--space-xl); translate: -50% 0; display: grid; grid-auto-flow: column; gap: var(--space-xs);
}
.palco-segni li { width: .5em; height: .5em; border-radius: var(--radius-pillola); background: color-mix(in oklab, var(--on-field) 35%, transparent); transition: width var(--spring-fine-d) var(--spring-fine), height var(--spring-fine-d) var(--spring-fine), background-color var(--duration-media) var(--ease-uscita); }
.palco-segni li.attivo { width: 1.8em; background: var(--on-field); }
@media (width >= 60rem) {
  :root.js[data-motion="pieno"]:not([data-stile="nitido"]) .palco-segni { left: auto; right: var(--space-margine); bottom: auto; top: 50%; translate: 0 -50%; grid-auto-flow: row; }
  .palco-segni li.attivo { width: .5em; height: 1.8em; }
}

/* ---------- Un giorno: il telefono resta e le schermate cambiano ---------- */
.giorno-corpo { display: grid; gap: var(--space-blocco); width: min(100%, var(--width-pagina)); margin: var(--space-blocco) auto 0; }
.telefono {
  position: relative; isolation: isolate; aspect-ratio: 390 / 844; width: min(78vw, calc(var(--width-colonna) * .82)); margin-inline: auto;
  padding: var(--space-xs); border-radius: var(--radius-telefono); background: var(--night);
  box-shadow: var(--shadow-foglio), var(--shadow-bordo-scuro);
}
.telefono .schermo {
  position: absolute; inset: var(--space-xs); width: calc(100% - 2 * var(--space-xs)); height: calc(100% - 2 * var(--space-xs)); object-fit: cover;
  /* Angoli concentrici: il raggio dentro è quello fuori meno il bordo (WWDC25 356). */
  border-radius: calc(var(--radius-telefono) - var(--space-xs));
  opacity: 0; scale: .97; transition: opacity var(--duration-lenta) var(--ease-uscita), scale var(--spring-contenitore-d) var(--spring-contenitore);
}
.telefono .schermo.attivo { opacity: 1; scale: 1; }
.vista-scuro { display: none; }
:root[data-theme="dark"] .vista-chiaro { display: none; }
:root[data-theme="dark"] .vista-scuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vista-chiaro { display: none; }
  :root:not([data-theme="light"]) .vista-scuro { display: block; }
}
/* Il riflesso che attraversa il vetro del telefono quando la schermata cambia (边缘流光). */
.riflesso { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; overflow: hidden; }
.riflesso::before { content: ""; position: absolute; inset: -50% -120%; background: linear-gradient(105deg, transparent 42%, color-mix(in oklab, var(--on-night) 22%, transparent) 50%, transparent 58%); translate: -60% 0; opacity: 0; }
:root[data-motion="pieno"]:not([data-stile="nitido"]) .telefono.lampo .riflesso::before { animation: riflesso var(--duration-distesa) var(--ease-uscita); }
@keyframes riflesso { 0% { translate: -60% 0; opacity: 0; } 30% { opacity: 1; } 100% { translate: 60% 0; opacity: 0; } }
.tappe { display: grid; gap: var(--space-blocco); }
.tappa { display: grid; gap: var(--space-xs); max-width: var(--width-testo); }
.tappa-ora { font-size: var(--type-micro); font-weight: 800; letter-spacing: var(--tracking-occhiello); text-transform: uppercase; color: var(--tint); }
.tappa h3 { font-size: var(--type-titolo); font-weight: 800; letter-spacing: var(--tracking-titolo); line-height: 1.1; }
.tappa p:last-child { color: var(--muted); font-size: var(--type-frase); line-height: 1.45; }
:root.js[data-motion="pieno"] .giorno-telefono {
  position: sticky; top: 0; z-index: 2; margin-inline: calc(-1 * var(--space-margine)); padding: calc(var(--control-tasto) + var(--space-l)) var(--space-margine) var(--space-xl);
  background: linear-gradient(var(--bg) 94%, color-mix(in oklab, var(--bg) 0%, transparent));
}
:root.js[data-motion="pieno"] .giorno-telefono .telefono { width: auto; height: min(48svh, calc(var(--width-colonna) * 1.75)); }
:root.js[data-motion="pieno"] .tappa { min-height: 34svh; align-content: start; opacity: .34; transition: opacity var(--duration-lenta) var(--ease-uscita); }
:root.js[data-motion="pieno"] .tappa.attiva { opacity: 1; }
:root.js[data-motion="pieno"] .tappa:last-child { min-height: 40svh; }
@media (width >= 60rem) {
  .giorno-corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .giorno-telefono { order: 2; }
  :root.js[data-motion="pieno"] .giorno-telefono { top: calc(50svh - min(40svh, calc(var(--width-colonna) * 1.4))); margin: 0; padding: 0; background: none; }
  :root.js[data-motion="pieno"] .giorno-telefono .telefono { height: min(80svh, calc(var(--width-colonna) * 2.8)); }
  :root.js[data-motion="pieno"] .tappa { min-height: 90svh; align-content: center; padding-top: 0; }
  :root.js[data-motion="pieno"] .tappa:last-child { min-height: 90svh; }
}

/* ---------- Segue te ---------- */
.segue {
  --tinta-sezione: var(--chance-field);
  display: grid; gap: var(--space-blocco); align-items: center; overflow: hidden; color: var(--on-field);
  background:
    radial-gradient(70% 60% at 0% 0%, var(--challenge-field), transparent 70%),
    radial-gradient(70% 70% at 100% 100%, var(--chance-field-2), transparent 70%),
    linear-gradient(160deg, var(--choice-field), var(--change-field));
  transition: --challenge-field var(--duration-lenta) var(--ease-uscita), --chance-field-2 var(--duration-lenta) var(--ease-uscita), --choice-field var(--duration-lenta) var(--ease-uscita), --change-field var(--duration-lenta) var(--ease-uscita), color var(--duration-istante) var(--ease-uscita) var(--duration-media);
}
.segue-testo { display: grid; gap: var(--space-l); width: min(100%, var(--width-stretta)); margin-inline: auto; }
.segue > :not(.carezza, .scoppio), .segue-prova > * { position: relative; z-index: 1; }
.segue-prova { display: grid; gap: var(--space-l); justify-items: center; width: min(100%, var(--width-stretta)); margin-inline: auto; }
.segue-controlli { display: grid; gap: var(--space-s); width: min(100%, var(--width-colonna)); }
.segue .occhiello, .segue .voce { color: inherit; }
.segue .voce { opacity: .86; }
.segmenti { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-xxs); border: 0; border-radius: var(--radius-pillola); min-width: 0; }
.segmenti legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.segmento { position: relative; z-index: 1; display: grid; place-items: center; min-height: var(--target-min); padding: 0 var(--space-xs); text-align: center; font-weight: 800; font-size: var(--type-nota); line-height: 1.15; color: var(--text); cursor: pointer; border-radius: var(--radius-pillola); }
.segmento input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmento:has(input:focus-visible) { outline: var(--focus-ring) solid var(--focus); outline-offset: calc(-1 * var(--focus-ring)); }
.segmenti-indice { position: absolute; z-index: 0; top: var(--space-xxs); bottom: var(--space-xxs); left: var(--space-xxs); width: calc((100% - 2 * var(--space-xxs)) / 3); border-radius: var(--radius-pillola);
  background: var(--surface); box-shadow: var(--shadow-leggera); translate: calc(var(--scelta, 0) * 100%) 0; transition: translate var(--spring-fine-d) var(--spring-fine); }
.momenti { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.segue .nota { color: inherit; opacity: .9; }
.nota-momento { min-height: 1.5em; text-align: center; }
.nota-momento:empty { display: none; }
.tasto-momento { min-height: var(--target-min); padding: 0 var(--space-l); font-size: var(--type-corpo); background: color-mix(in oklab, var(--on-field) 12%, transparent); color: inherit; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--on-field) 26%, transparent); }
#telefono-energia { width: auto; height: min(46svh, calc(var(--width-colonna) * 1.6)); }
/* Il riscontro di un momento, come nell'app (luce.js): la carezza sale dal basso, la spinta stringe e riparte. */
.carezza { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(150% 75% at 50% 110%, color-mix(in oklab, var(--corallo-vivo) 85%, transparent), color-mix(in oklab, var(--challenge) 45%, transparent) 45%, transparent 82%);
  mix-blend-mode: screen; animation: carezza var(--duration-carezza) var(--ease-respiro) both; }
@keyframes carezza { 0% { opacity: 0; translate: 0 2em; } 40% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -1em; } }
.telefono.spinto { animation: spinta var(--spring-dito-d) var(--spring-dito) both; }
@keyframes spinta { from { scale: .94; translate: 0 .6em; } to { scale: 1; translate: 0 0; } }
.telefono.spinto::after { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)); z-index: 3; border-radius: calc(var(--radius-telefono) + var(--space-xs)); pointer-events: none;
  background: conic-gradient(from var(--angolo), transparent 55%, var(--luce-1), var(--luce-4), var(--luce-2), transparent 98%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  padding: var(--space-xs); animation: lama var(--duration-distesa) var(--ease-uscita) both; }
@keyframes lama { from { --angolo: 0deg; opacity: 1; } to { --angolo: 360deg; opacity: 0; } }
.scoppio { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; }
@media (width >= 60rem) {
  /* Testo e controlli a sinistra, il telefono a destra: si tocca e si vede l'effetto insieme. */
  .segue { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "testo telefono" "controlli telefono"; column-gap: var(--space-blocco); row-gap: var(--space-xl);
    padding-inline: max(var(--space-margine), calc((100% - var(--width-pagina)) / 2)) !important; }
  .segue-prova { display: contents; }
  .segue-testo { grid-area: testo; align-self: end; margin-inline: 0; }
  .segue-controlli { grid-area: controlli; align-self: start; justify-self: start; width: min(100%, var(--width-stretta)); }
  .segue-controlli .momenti { justify-content: flex-start; }
  .nota-momento { text-align: left; }
  #telefono-energia { grid-area: telefono; align-self: center; height: min(72svh, calc(var(--width-colonna) * 2.2)); }
}

/* ---------- La memoria di te ---------- */
.memoria { --tinta-sezione: var(--surface); background: var(--surface); }
.citazione {
  position: relative; isolation: isolate; display: grid; gap: var(--space-m); width: min(100%, var(--width-pagina)); margin: var(--space-blocco) auto;
  padding: var(--space-blocco) var(--space-margine); border-radius: var(--radius-xl); text-align: left; overflow: hidden;
  background: linear-gradient(160deg, var(--challenge-field), var(--chance-field-2)); color: var(--on-field);
}
.citazione[data-energia] { transition: --challenge-field var(--duration-distesa) var(--ease-uscita), --chance-field-2 var(--duration-distesa) var(--ease-uscita); }
.citazione-etichetta { font-size: var(--type-micro); font-weight: 800; letter-spacing: var(--tracking-occhiello); text-transform: uppercase; opacity: .8; }
.citazione-testo { font-size: var(--type-manifesto); font-weight: 800; line-height: 1.04; letter-spacing: var(--tracking-titolo); text-wrap: balance; }
.citazione-testo .parola-c { display: inline-block; white-space: pre; }
:root.js[data-motion="pieno"] .citazione-testo .parola-c { opacity: .12; filter: blur(var(--blur-bordo)); transition: opacity var(--duration-lenta) var(--ease-uscita), filter var(--duration-lenta) var(--ease-uscita); transition-delay: calc(var(--i) * var(--duration-istante) * 1.2); }
:root.js[data-motion="pieno"] .citazione.dentro .citazione-testo .parola-c { opacity: 1; filter: blur(0); }
.citazione figcaption { display: grid; gap: var(--space-xxs); font-size: var(--type-frase); }
.citazione-quando { font-size: var(--type-nota); opacity: .78; }
.memoria-tre { display: grid; gap: var(--space-blocco); width: min(100%, var(--width-pagina)); margin-inline: auto; }
.memoria-voce { display: grid; gap: var(--space-s); align-content: start; }
.memoria-voce h3 { font-size: var(--type-titolo); font-weight: 800; line-height: 1.1; letter-spacing: var(--tracking-titolo); }
.memoria-voce p { color: var(--muted); font-size: var(--type-frase); line-height: 1.45; }
.telefono-piccolo { width: min(70vw, calc(var(--width-colonna) * .7)); margin: 0 auto var(--space-m); }
.telefono-piccolo .schermo { opacity: 1; scale: 1; }
.memoria-lettera { align-content: center; }
.lettera-testo { padding: var(--space-xl); border-radius: var(--radius-l); background: var(--bg); color: var(--text) !important; font-size: var(--type-sottotitolo) !important; font-weight: 700; line-height: 1.25 !important; box-shadow: var(--shadow-leggera); rotate: -1.5deg; }
@media (width >= 60rem) {
  .memoria-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .citazione { padding: var(--space-blocco) calc(var(--space-blocco) * 1.4); }
}

/* ---------- Le prove ---------- */
.perche { display: grid; gap: var(--space-blocco); align-items: center; }
.perche-testo { display: grid; gap: var(--space-l); width: min(100%, var(--width-stretta)); margin-inline: auto; }
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); width: min(100%, var(--width-stretta)); margin-inline: auto; }
.numeri p { display: grid; gap: var(--space-xxs); padding-top: var(--space-s); border-top: 1px solid var(--separator); }
.numeri b { font-size: var(--type-fatto); font-weight: 800; letter-spacing: var(--tracking-titolo); line-height: 1; font-variant-numeric: tabular-nums; }
.numeri span { font-size: var(--type-nota); color: var(--muted); }
@media (width >= 60rem) {
  .perche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: max(var(--space-margine), calc((100% - var(--width-pagina)) / 2)) !important; }
  .perche-testo, .numeri { margin-inline: 0; }
}

/* ---------- Telegram ---------- */
.telegram { display: grid; gap: var(--space-blocco); align-items: center; background: var(--bg); }
.telegram-testo { display: grid; gap: var(--space-l); width: min(100%, var(--width-stretta)); margin-inline: auto; }
.chat {
  display: grid; gap: var(--space-xs); justify-items: start; width: min(100%, var(--width-colonna)); margin-inline: auto; padding: var(--space-xl) var(--space-l);
  border-radius: var(--radius-xl); background: linear-gradient(160deg, var(--choice-field), var(--pause-field)); box-shadow: var(--shadow-foglio);
}
:root:not([data-stile="nitido"]) .chat { --choice-field: var(--lilla); --pause-field: var(--menta); }
.chat-ora { justify-self: center; font-size: var(--type-micro); font-weight: 800; color: var(--on-pastel); padding: var(--space-xxs) var(--space-s); border-radius: var(--radius-pillola); background: color-mix(in oklab, var(--surface) 60%, transparent); }
.bolla { max-width: 92%; padding: var(--space-s) var(--space-m); border-radius: var(--radius-l) var(--radius-l) var(--radius-l) var(--radius-xs); background: var(--surface); color: var(--text); box-shadow: var(--shadow-leggera); line-height: 1.4; }
.bolla-tasto { width: 92%; }
.bolla-tasto span { display: grid; place-items: center; min-height: var(--target-min); border-radius: var(--radius-m); background: color-mix(in oklab, var(--surface) 70%, transparent); color: var(--tint); font-weight: 800; }
:root.js[data-motion="pieno"] .chat .bolla, :root.js[data-motion="pieno"] .chat .bolla-tasto { opacity: 0; scale: .6; transform-origin: 0% 100%; transition: opacity var(--duration-media) var(--ease-uscita), scale var(--spring-fine-d) var(--spring-fine); }
:root.js[data-motion="pieno"] .chat.dentro .bolla, :root.js[data-motion="pieno"] .chat.dentro .bolla-tasto { opacity: 1; scale: 1; }
:root.js[data-motion="pieno"] .chat.dentro .bolla-tasto { transition-delay: var(--duration-lenta); }
@media (width >= 60rem) {
  .telegram { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); padding-inline: max(var(--space-margine), calc((100% - var(--width-pagina)) / 2)) !important; }
  .telegram-testo { margin-inline: 0; }
}

/* ---------- Invito: il momento più acceso ---------- */
.invito {
  --tinta-sezione: var(--choice-field);
  isolation: isolate; overflow: hidden; color: var(--on-field); min-height: 100svh; display: grid; align-items: center;
  background:
    radial-gradient(70% 60% at 10% 10%, var(--challenge-field), transparent 70%),
    radial-gradient(60% 70% at 95% 30%, var(--chance-field), transparent 70%),
    radial-gradient(80% 70% at 60% 110%, var(--change-field), transparent 70%),
    linear-gradient(160deg, var(--choice-field), var(--choice-field-2));
}
.invito-dentro { display: grid; gap: var(--space-xl); width: min(100%, var(--width-pagina)); margin-inline: auto; }
.invito .occhiello { color: inherit; opacity: .85; }
.passi-invito { display: grid; gap: var(--space-l); }
.passi-invito li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xxs) var(--space-m); padding-top: var(--space-m); border-top: 1px solid color-mix(in oklab, var(--on-field) 30%, transparent); }
.passi-invito b { grid-row: span 2; font-size: var(--type-sottotitolo); font-variant-numeric: tabular-nums; }
.passi-invito h3 { font-size: var(--type-sezione); font-weight: 800; }
.passi-invito p { opacity: .88; }
.invito .azioni { justify-content: flex-start; }
.dove { font-size: var(--type-nota); opacity: .85; }
/* La luce che corre sul bordo del tasto principale guida lo sguardo (边缘流光), tre giri e si ferma. */
.tasto-luce::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: .16em; pointer-events: none;
  background: conic-gradient(from var(--angolo), transparent 62%, var(--luce-1), var(--luce-2), var(--luce-3), transparent 96%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor; mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0); opacity: 0; }
:root[data-motion="pieno"]:not([data-stile="nitido"]) .invito.dentro .tasto-luce::before, :root[data-motion="pieno"]:not([data-stile="nitido"]) .tasto-luce:hover::before { opacity: 1; animation: giro var(--duration-distesa) linear 3; }
@keyframes giro { to { --angolo: 360deg; } }
@media (width >= 60rem) {
  .passi-invito { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}

/* ---------- Aiuto: leggibile in ogni stile, nessun movimento ---------- */
.aiuto { display: grid; gap: var(--space-m); justify-items: start; background: var(--surface); }
.aiuto > * { width: min(100%, var(--width-stretta)); margin-inline: auto; }
.aiuto h2 { font-size: var(--type-sezione); font-weight: 800; }
.aiuto .numero { white-space: nowrap; }
.aiuto .tasto { width: auto; }
.aiuto p:has(.tasto) { display: flex; }

/* ---------- Piede ---------- */
.piede { display: grid; gap: var(--space-s); justify-items: center; text-align: center; padding: var(--space-blocco) var(--space-margine) max(var(--space-blocco), env(safe-area-inset-bottom)); color: var(--muted); font-size: var(--type-nota); }
.piede .marchio { color: var(--text); }
.piede .marchio .logo { height: 1.6em; }
.piede-link { display: flex; flex-wrap: wrap; gap: 0 var(--space-l); justify-content: center; }
.piede-link a { display: inline-flex; align-items: center; min-height: var(--target-min); }

/* ---------- Fogli: Aspetto e il «Perché?» (foglio staccato dal bordo, come in iOS) ---------- */
.foglio {
  width: min(calc(100% - 2 * var(--space-xs)), var(--width-stretta)); max-height: calc(100svh - 2 * var(--space-xs)); margin: auto auto var(--space-xs);
  padding: var(--space-l); border: 0; border-radius: var(--radius-foglio); background: var(--surface); color: var(--text); box-shadow: var(--shadow-foglio); overflow: auto;
}
.foglio::backdrop { background: var(--shadow-velo); -webkit-backdrop-filter: blur(var(--blur-bordo)); backdrop-filter: blur(var(--blur-bordo)); }
:root[data-motion="pieno"] .foglio[open] { animation: foglio var(--spring-sistema-d) var(--spring-sistema); }
:root[data-motion="pieno"] .foglio[open]::backdrop { animation: velo var(--duration-media) var(--ease-uscita); }
@keyframes foglio { from { translate: 0 60%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes velo { from { opacity: 0; } }
@media (width >= 40rem) { .foglio { margin: auto; } }
.foglio-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-bottom: var(--space-m); }
.foglio-testa h2 { font-size: var(--type-titolo); font-weight: 800; letter-spacing: var(--tracking-titolo); }
.tasto-tondo { display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border: 0; border-radius: 50%; background: var(--bg); color: var(--text); font: inherit; font-size: var(--type-sezione); cursor: pointer; }
.aspetto fieldset { border: 0; padding: 0; margin: 0 0 var(--space-m); display: grid; gap: var(--space-xxs); }
.aspetto legend { font-weight: 800; margin-bottom: var(--space-xxs); }
.aspetto label { display: flex; align-items: center; gap: var(--space-s); min-height: var(--target-min); cursor: pointer; }
.aspetto input { width: 1.2em; height: 1.2em; accent-color: var(--tint); }
.carta-perche { display: grid; gap: var(--space-s); }
.carta-perche .grado { justify-self: start; padding: var(--space-xxs) var(--space-s); border-radius: var(--radius-pillola); background: color-mix(in oklab, var(--tint) 14%, transparent); color: var(--tint); font-weight: 800; font-size: var(--type-nota); }
.carta-perche h3 { font-size: var(--type-sezione); font-weight: 800; }
.carta-perche h4 { font-size: var(--type-corpo); font-weight: 800; margin: var(--space-xs) 0 0; }
.carta-perche ul { list-style: disc; padding-left: var(--space-l); display: grid; gap: var(--space-xxs); }
.carta-perche .fonte { font-size: var(--type-nota); color: var(--muted); overflow-wrap: anywhere; }

/* ---------- Desktop: le teste delle sezioni respirano ---------- */
@media (width >= 60rem) {
  .ciclo .testa, .giorno .testa, .memoria .testa { margin-bottom: var(--space-blocco); }
}

/* ---------- Trasparenze piene ---------- */
:root[data-vetro="opaco"] .vetro, :root[data-vetro="opaco"] .tasto-chiaro { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-vetro="opaco"] .bordo-scorrimento { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); -webkit-mask-image: none; mask-image: none; height: calc(var(--control-tasto) + var(--space-s) * 2); }

/* ---------- Tema scuro: il vetro scuro e il bordo di iOS 27 ---------- */
:root[data-theme="dark"] .vetro { box-shadow: var(--shadow-vetro-notte), var(--shadow-bordo-scuro); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vetro { box-shadow: var(--shadow-vetro-notte), var(--shadow-bordo-scuro); } }

/* ---------- Nitido: la versione a contrasto alto (WCAG 2.2 AAA come opzione, docs/16 §15) ---------- */
:root[data-stile="nitido"] .apertura, :root[data-stile="nitido"] .segue, :root[data-stile="nitido"] .invito, :root[data-stile="nitido"] .citazione, :root[data-stile="nitido"] .chat, :root[data-stile="nitido"] .parola { background: var(--surface); color: var(--text); }
:root[data-stile="nitido"] .parola, :root[data-stile="nitido"] .citazione, :root[data-stile="nitido"] .chat { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-stile="nitido"] .vetro, :root[data-stile="nitido"] .tasto-chiaro { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-stile="nitido"] .luce, :root[data-stile="nitido"] .riflesso, :root[data-stile="nitido"] .parola-segno, :root[data-stile="nitido"] .premi::after { display: none; }
:root[data-stile="nitido"] .voce, :root[data-stile="nitido"] .nota, :root[data-stile="nitido"] .occhiello, :root[data-stile="nitido"] .memoria-voce p, :root[data-stile="nitido"] .tappa p:last-child { color: var(--text); opacity: 1; }
:root[data-stile="nitido"] .claim-completa[data-parola] { color: var(--text); }
:root[data-stile="nitido"] .tasto-sul-campo, :root[data-stile="nitido"] .tasto-momento, :root[data-stile="nitido"] .attrezzi li { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-stile="nitido"] .tasto-crema { background: var(--tint); color: var(--on-tint); }
:root[data-stile="nitido"] .bordo-scorrimento { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); -webkit-mask-image: none; mask-image: none; border-bottom: 1px solid var(--line); }
:root[data-stile="nitido"] .passi-invito li { border-top-color: var(--line); }
:root[data-stile="nitido"] .citazione-testo .parola-c { opacity: 1 !important; filter: none !important; }
/* In Nitido niente testo attenuato: le tappe restano tutte leggibili (7:1). */
:root[data-stile="nitido"] .tappa { opacity: 1 !important; }

/* ---------- Movimento ridotto: niente spostamenti, solo dissolvenze brevi ---------- */
:root[data-motion="ridotto"] *, :root[data-motion="ridotto"] *::before, :root[data-motion="ridotto"] *::after { animation: none !important; scroll-behavior: auto !important; }
:root[data-motion="ridotto"] .tasto, :root[data-motion="ridotto"] .telefono .schermo { transition-property: opacity, background-color, color !important; }
:root[data-motion="ridotto"] .segmenti-indice { transition: none; }

/* ---------- Stampa ---------- */
@media print { .barra, .bordo-scorrimento, .luce, .scendi, .momenti, .riflesso { display: none !important; } main > section { min-height: 0 !important; break-inside: avoid; } }

/* Generato da design/logo/genera.py: i due punti del logo in linea. Il colore vivo della sfida e
   della scelta (--vivo-…, che nessun livello di energia cambia); chi lo mette sullo scuro imposta
   --logo-punto-alto e --logo-punto-basso sugli accenti. Le lettere sono currentColor. */
.logo .punto-alto { fill: var(--logo-punto-alto, var(--vivo-challenge, var(--challenge-field))); }
.logo .punto-basso { fill: var(--logo-punto-basso, var(--vivo-choice, var(--choice-field))); }