:root{--brand:#286DA4}
/* Colori e caratteri. Il colore del marchio (--brand) arriva da sito.toml.
   --barra: altezza fissa della barra in alto (l'indice laterale si aggancia subito sotto). */
:root{--barra:64px}
:root{--paper:#F5F6F2;--panel:#FFFFFF;--ink:#17212C;--quiet:#5B6670;--rule:#D9DDD5;--accent:#1D5E98;--warn:#C2930F;--good:#2F8455;--rail:#C0662B;--axis:#98A19A;--grid:#DDE1DA;--tint:#EDF0EA;--orange:#E8641C;--blue:#1C6FD8;--softorange:#FDF0E7;--navy:#12305A;--soft:#EAF2FB;--softer:#D6E6F7;--sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Newsreader',Georgia,'Times New Roman',serif;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#121A22;--panel:#18222C;--ink:#E7ECEF;--quiet:#9AA6B0;--rule:#2A3640;--accent:#6FA8DC;--warn:#E0B83A;--good:#5DBA82;--rail:#E08A52;--axis:#6E7A82;--grid:#2A3640;--tint:#1F2B35;--orange:#F08A4B;--blue:#5AA2F0;--softorange:#2E2219;--navy:#1B3A66;--soft:#17293A;--softer:#1F3a54}}
:root[data-theme="dark"]{--paper:#121A22;--panel:#18222C;--ink:#E7ECEF;--quiet:#9AA6B0;--rule:#2A3640;--accent:#6FA8DC;--warn:#E0B83A;--good:#5DBA82;--rail:#E08A52;--axis:#6E7A82;--grid:#2A3640;--tint:#1F2B35;--orange:#F08A4B;--blue:#5AA2F0;--softorange:#2E2219;--navy:#1B3A66;--soft:#17293A;--softer:#1F3a54}

/* Regole di base della pagina. */
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(var(--barra) + 12px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.62}
a:focus-visible,.reset:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Barra in alto: logo, al centro il titolo (home) o il selettore dei profili, a destra le lingue. */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--barra);padding:0 clamp(16px,4vw,40px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);font-family:var(--sans)}
.brand{font-weight:700;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.switch{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:3px;background:var(--panel)}
.switch a{position:relative;isolation:isolate;display:inline-block;font:500 .9rem var(--sans);color:var(--quiet);text-decoration:none;border-radius:999px;padding:6px 14px}
.switch a:hover{color:var(--ink)}
.switch a[aria-current]{color:var(--paper)}
/* La pillola scura è un elemento a sé dietro al testo: nei passaggi scivola lei, i testi restano fermi */
.switch .pillola{position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--ink)}
.brand{white-space:nowrap}.switch .s{display:none}@media (max-width:480px){.switch .l{display:none}.switch .s{display:inline}.switch a{padding:6px 12px}}
.bar{gap:12px}.roles{margin-right:auto;margin-left:12px}@media (max-width:760px){.roles .l{display:none}.roles .s{display:inline}.roles{margin-left:4px}.brand{font-size:.95rem}}
.brand-logo{display:block;height:36px;width:auto}
@media (max-width:760px){.brand-logo{height:30px}}
.bar-title{margin:0 auto 0 4px;padding-left:16px;border-left:1px solid var(--rule);font:700 1.15rem/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
@media (max-width:480px){.bar-title{font-size:1rem;padding-left:12px}}

/* Aspetto dei testi dei profili: titoli, elenchi, diagrammi, check list (dal file originale). */
.doc{min-width:0;max-width:760px;padding-top:40px;padding-bottom:96px}
.hero{padding:24px 0 8px}
.kicker{font-family:var(--sans);font-weight:600;color:var(--accent);margin:0 0 6px;font-size:.95rem}
.hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(2.6rem,7vw,4.6rem);line-height:.98;letter-spacing:-.025em;margin:0}
.hero .sub{font-family:var(--sans);font-size:1.15rem;color:var(--quiet);margin:10px 0 28px}
.states{display:flex;flex-wrap:wrap;gap:0;list-style:none;padding:0;margin:0 0 28px;font-family:var(--sans);font-weight:600;font-size:.82rem}
.states li{position:relative;padding:8px 18px 8px 26px;background:var(--panel);border:1px solid var(--rule);margin-right:-1px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%,12px 50%)}
.states li:first-child{padding-left:16px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.states li.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.states li.end{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lead{font-size:1.3rem;line-height:1.55;margin:0 0 16px}
.meta{font-family:var(--sans);font-size:.85rem;color:var(--quiet);margin:0}
.doc h2{font-family:var(--sans);font-weight:700;font-size:1.75rem;line-height:1.2;letter-spacing:-.01em;margin:64px 0 16px;padding-top:20px;border-top:3px solid var(--ink)}
.doc h3{font-family:var(--sans);font-weight:700;font-size:1.25rem;line-height:1.3;margin:44px 0 12px}
.doc p,.doc li{max-width:68ch}
.doc p{margin:0 0 1em}
.doc ul,.doc ol{padding-left:1.25em;margin:0 0 1.2em}
.doc li{margin:0 0 .55em}
.doc li::marker{color:var(--quiet)}
.doc strong{font-weight:600}
.doc p.sub-h{font-family:var(--sans);font-size:1rem;margin-top:28px}
.doc blockquote{margin:16px 0 24px;padding:20px 24px;background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--accent);font-family:var(--sans);font-size:.98rem;line-height:1.55}
.doc blockquote p{margin:0 0 .75em}.doc blockquote p:last-child{margin:0}
figure.dia{margin:28px 0 32px;padding:16px;background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow-x:auto}
figure.dia svg{display:block;width:100%;min-width:560px;height:auto;font-family:var(--sans)}
ul.checks{list-style:none;padding:0;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
ul.checks li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:12px 16px;border-bottom:1px solid var(--rule);max-width:none}
ul.checks li:last-child{border-bottom:0}
ul.checks input{flex:none;width:20px;height:20px;margin-top:4px;accent-color:var(--accent);cursor:pointer}
ul.checks li:has(input:checked){color:var(--quiet)}
.reset{font:500 .9rem var(--sans);color:var(--accent);background:none;border:1px solid var(--rule);border-radius:999px;padding:6px 14px;cursor:pointer;margin:-4px 0 24px}
.doc a{color:var(--accent)}

/* Impaginazione: colonna con l'indice laterale + colonna del testo. */
/* La colonna occupa almeno tutta l'altezza sotto la barra: così l'indice laterale resta agganciato
   sotto la barra anche in fondo alle pagine corte, e non si sposta passando da un argomento all'altro */
.page{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;min-height:calc(100vh - var(--barra) - env(safe-area-inset-top,0px))}
.page-index{display:block}
.toc{position:sticky;top:calc(var(--barra) + env(safe-area-inset-top,0px));align-self:start;max-height:calc(100vh - var(--barra) - env(safe-area-inset-top,0px));overflow:auto;padding:40px 0 24px;font-family:var(--sans);font-size:.94rem;line-height:1.4}
.toc-h{font-weight:800;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 14px;padding-bottom:8px;border-bottom:2px solid var(--accent);color:var(--accent);cursor:pointer;list-style:none}.toc-h::-webkit-details-marker{display:none}@media (min-width:901px){.toc-h{pointer-events:none}}
.toc .toc-role{margin:0 0 10px;font-size:1.05rem;font-weight:800}
.toc .toc-role a{padding:0;border:0;color:var(--ink)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:6px 8px 6px 12px;border-left:2px solid var(--rule);color:var(--quiet);text-decoration:none}
.toc li.l3 a{padding-left:20px;font-size:.9rem}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{position:relative;isolation:isolate;color:var(--ink);font-weight:600}
/* L'evidenziatore è un elemento a sé, dietro al testo: nei passaggi tra argomenti scivola solo lui */
.toc .evidenziatore{position:absolute;inset:0 0 0 -2px;z-index:-1;background:var(--soft);border-left:2px solid var(--accent)}
.toc li.g{margin:18px 0 4px;padding:8px 10px;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;background:var(--soft);color:var(--accent);font-weight:800;font-size:.98rem;line-height:1.25}
.toc li.l3 + li.l2{margin-top:16px}

/* Home di ogni lingua: schede verticali dei profili (una icona per profilo). */
.landing{max-width:960px;padding:48px 0 96px}
.landing h1{font-family:var(--sans);font-weight:800;font-size:clamp(2.6rem,7vw,4.6rem);line-height:.98;letter-spacing:-.025em;margin:24px 0 12px}
.role-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,calc(50% - 8px)),1fr));gap:16px}
.role-cards a{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--panel);border:1px solid var(--rule);border-radius:14px;color:var(--ink);text-decoration:none;font-family:var(--sans);transition:border-color .15s,transform .15s,box-shadow .15s}
.role-cards a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--ink) 45%,transparent)}
.role-cards .ico{aspect-ratio:4/3;display:grid;place-items:center;background:var(--soft);color:var(--accent);border-bottom:1px solid var(--rule);transition:background .15s}
.role-cards a:hover .ico{background:var(--softer)}
.role-cards .ico svg{width:40%;max-width:112px;height:auto;stroke-width:2}
.role-cards .ico-sigla{font-weight:800;font-size:clamp(2rem,6vw,3rem);letter-spacing:-.02em}
.role-cards .r{display:block;padding:clamp(14px,2.4vw,20px) clamp(14px,2.4vw,22px) 6px;font-weight:800;font-size:clamp(1.15rem,2.4vw,1.45rem);line-height:1.1}
.role-cards .m{padding:0 clamp(14px,2.4vw,22px) clamp(14px,2.4vw,20px);margin-top:auto;color:var(--quiet);font-size:.9rem;line-height:1.3}
@media (prefers-reduced-motion:reduce){.role-cards a{transition:none}.role-cards a:hover{transform:none}}

/* Pagina indice di un profilo: titolo "Contenuti", gruppi e elenco degli argomenti. */
.page-index .doc{margin:0 auto 0 0}
.topics{margin:56px 0 0;font-family:var(--sans)}
.topics-h{font-weight:800;font-size:clamp(1.6rem,3.6vw,2rem);line-height:1.15;letter-spacing:-.015em;color:var(--accent);margin:0 0 6px;padding-bottom:12px;border-bottom:3px solid var(--accent)}
.topic-list{list-style:none;padding:0;margin:0}
.doc .topic-list{padding:0;margin:0}
.doc .topic-list li{margin:0;max-width:none}
.topic-link{display:flex;align-items:baseline;gap:14px;padding:15px 6px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-weight:600;font-size:1.05rem;line-height:1.35}
.doc .topic-link{color:var(--ink)}
.topic-link:hover{background:var(--panel)}
.topic-link .n{flex:none;min-width:2.2ch;color:var(--accent);font-variant-numeric:tabular-nums}
.topic-link::after{content:'\2192';margin-left:auto;padding-left:12px;color:var(--quiet);font-weight:400}
.topic-group{margin-top:8px}
.doc .topic-group h2{font-size:clamp(1.25rem,2.8vw,1.5rem);font-weight:800;line-height:1.2;color:var(--accent);background:var(--soft);margin:36px 0 4px;padding:12px 16px;border:0;border-left:5px solid var(--accent);border-radius:0 10px 10px 0}
.topic-group + .topic-list{margin-top:28px;border-top:3px solid var(--rule)}

/* Pagina di un argomento: percorso, titolo, pulsanti precedente/successivo. */
.crumbs{font-family:var(--sans);font-size:.9rem;color:var(--quiet);margin:24px 0 10px}
.doc .crumbs a{color:var(--quiet)}
.crumbs + h2,.crumbs + h3{font-family:var(--sans);font-weight:800;font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 28px;padding:0;border:0}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:64px 0 0;padding-top:24px;border-top:3px solid var(--ink);font-family:var(--sans)}
.doc .pager a{display:block;padding:16px 18px;border:1px solid var(--rule);border-radius:10px;background:var(--panel);color:var(--ink);text-decoration:none;line-height:1.35}
.pager a:hover{border-color:var(--accent)}
.pager .dir{display:block;font-size:.8rem;color:var(--quiet);margin-bottom:4px}
.pager .next{grid-column:2;text-align:right}
@media (max-width:560px){.pager{grid-template-columns:1fr}.pager .next{grid-column:1}}

/* Adattamenti per tablet e telefono. */
@media (max-width:900px){.page{grid-template-columns:1fr;gap:0}.toc{position:static;max-height:none;padding:16px 0;border-bottom:1px solid var(--rule)}.toc-h{margin:0;padding-bottom:0;border-bottom:0;display:flex;justify-content:space-between;align-items:center}.toc-h::after{content:'+';font-weight:400}details[open]>.toc-h::after{content:'\2212'}details[open]>.toc-h{margin-bottom:12px}.toc ol{columns:2;column-gap:24px}.toc li{break-inside:avoid}.doc{padding-top:8px}}
@media (max-width:560px){body{font-size:1.06rem}.toc ol{columns:1}.lead{font-size:1.15rem}}

/* Stampa. */
@media print{.bar,.toc,.reset,.pager,.crumbs{display:none}.page{display:block}body{background:#fff}figure.dia{break-inside:avoid}}

/* Animazioni. Servono a orientarsi: mostrano in che direzione ci si sposta nel sito
   (più dentro, più fuori, avanti, indietro) e dove si trova ciò che si è appena cliccato.
   Il tipo di spostamento lo decide site.js e lo scrive in <html data-nav="...">:
     entra   home → profilo → argomento        la pagina nuova sale dal basso
     esci    argomento → indice → home         la pagina nuova scende dall'alto
     succ    argomento successivo, profilo dopo   la pagina scorre verso sinistra
     prec    argomento precedente, profilo prima  la pagina scorre verso destra
     lingua  cambio lingua                     dissolvenza sul posto
   Con "riduci movimento" attivo nel sistema operativo le transizioni sono spente. */

:root{--vt-durata:.4s;--vt-curva:cubic-bezier(.2,.75,.25,1)}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}

/* Elementi che restano al loro posto o si spostano da una pagina all'altra */
.bar{view-transition-name:barra}
.roles .pillola{view-transition-name:pillola-profilo}
.langs .pillola{view-transition-name:pillola-lingua}
.switch .testo{view-transition-class:testo-selettore}   /* il nome lo dà il modello: testo-lingua-it, testo-profilo-... */
.toc{view-transition-name:indice-laterale}
.toc .evidenziatore{view-transition-name:evidenziatore}
/* Ciò che si clicca diventa il titolo della pagina nuova (e viceversa tornando indietro).
   Dal lato dell'elenco il nome lo assegna site.js all'elemento cliccato o di arrivo. */
html[data-nav=entra] .hero h1,html[data-nav=esci] .hero h1{view-transition-name:titolo-profilo}
html[data-nav=entra] .crumbs + :is(h2,h3),html[data-nav=esci] .crumbs + :is(h2,h3){view-transition-name:titolo-argomento}

::view-transition-group(*){animation-duration:var(--vt-durata);animation-timing-function:var(--vt-curva)}
::view-transition-old(*),::view-transition-new(*){animation-duration:var(--vt-durata);animation-timing-function:var(--vt-curva)}
/* Dietro alla transizione c'è sempre il colore del sito, mai il bianco del browser */
::view-transition{background:var(--paper)}
::view-transition-group(barra){z-index:10}
/* L'evidenziatore scorre sotto i testi dell'indice, che restano fermi */
::view-transition-group(evidenziatore){z-index:1}
::view-transition-group(indice-laterale){z-index:2}
/* Barra in alto: sfondo e cornici, sopra la pillola che scorre, sopra ancora i testi delle voci (fermi) */
::view-transition-group(pillola-profilo),::view-transition-group(pillola-lingua){z-index:11}
::view-transition-group(*.testo-selettore){z-index:12}
::view-transition-group(titolo-profilo),::view-transition-group(titolo-argomento){z-index:5}

/* Pagina vecchia e nuova sfumano insieme e in modo complementare (la loro somma resta piena:
   nessun istante di vuoto); intanto si spostano nella direzione del passaggio */
html[data-nav]::view-transition-old(root),html[data-nav]::view-transition-new(root){mix-blend-mode:plus-lighter}

html[data-nav=entra]::view-transition-old(root){animation-name:vt-via-su}
html[data-nav=entra]::view-transition-new(root){animation-name:vt-da-sotto}
html[data-nav=esci]::view-transition-old(root){animation-name:vt-via-giu}
html[data-nav=esci]::view-transition-new(root){animation-name:vt-da-sopra}
html[data-nav=succ]::view-transition-old(root){animation-name:vt-via-sinistra}
html[data-nav=succ]::view-transition-new(root){animation-name:vt-da-destra}
html[data-nav=prec]::view-transition-old(root){animation-name:vt-via-destra}
html[data-nav=prec]::view-transition-new(root){animation-name:vt-da-sinistra}
html[data-nav=lingua]::view-transition-old(root),html[data-nav=lingua]::view-transition-new(root){animation-duration:.25s}

/* Il titolo che vola: il testo di partenza sparisce subito, quello d'arrivo compare a metà volo */
::view-transition-old(titolo-profilo),::view-transition-old(titolo-argomento){animation:vt-sparisci calc(var(--vt-durata) * .2) linear both}
::view-transition-new(titolo-profilo),::view-transition-new(titolo-argomento){animation:vt-compari calc(var(--vt-durata) * .6) ease-out calc(var(--vt-durata) * .25) both}

/* L'indice laterale entra ed esce insieme alla pagina; tra argomenti resta fermo e si sposta solo la voce evidenziata */
html[data-nav=entra]::view-transition-new(indice-laterale),html[data-nav=entra]::view-transition-new(evidenziatore){animation-name:vt-da-sotto}
html[data-nav=esci]::view-transition-old(indice-laterale),html[data-nav=esci]::view-transition-old(evidenziatore){animation-name:vt-via-giu}

@keyframes vt-sparisci{to{opacity:0}}
@keyframes vt-compari{from{opacity:0}}
/* La dissolvenza occupa il primo 40%, lo spostamento tutta la durata */
@keyframes vt-via-su{40%{opacity:0}to{opacity:0;transform:translateY(-24px) scale(.985)}}
@keyframes vt-da-sotto{from{opacity:0;transform:translateY(48px)}40%{opacity:1}}
@keyframes vt-via-giu{40%{opacity:0}to{opacity:0;transform:translateY(48px)}}
@keyframes vt-da-sopra{from{opacity:0;transform:translateY(-24px) scale(.985)}40%{opacity:1}}
@keyframes vt-via-sinistra{40%{opacity:0}to{opacity:0;transform:translateX(-64px)}}
@keyframes vt-da-destra{from{opacity:0;transform:translateX(64px)}40%{opacity:1}}
@keyframes vt-via-destra{40%{opacity:0}to{opacity:0;transform:translateX(64px)}}
@keyframes vt-da-sinistra{from{opacity:0;transform:translateX(-64px)}40%{opacity:1}}

/* Dentro le pagine */
@media (prefers-reduced-motion:no-preference){
  /* Schede della home e righe dell'indice entrano una dopo l'altra: l'occhio segue l'ordine */
  html:not([data-nav]) .role-cards li{animation:vt-entra-elemento .5s var(--vt-curva) both;animation-delay:calc(var(--i,0) * 80ms)}
  html:not([data-nav]) .topic-list li,html[data-nav=entra] .topic-list li{animation:vt-entra-elemento .45s var(--vt-curva) both;animation-delay:calc(var(--vt-durata) * .4 + var(--i,0) * 24ms)}

  /* Tornando a un elenco, la voce da cui arrivi si illumina per un momento */
  .topic-link.da-qui{animation:vt-da-qui 2.4s ease-out both}
  .role-cards a.da-qui{animation:vt-da-qui-scheda 2.4s ease-out both}

  /* Al passaggio del mouse: la freccia o la scheda indicano dove porta il link */
  .topic-link::after{transition:transform .2s var(--vt-curva),color .2s}
  .topic-link:hover::after{transform:translateX(5px);color:var(--accent)}
  .switch a{transition:background-color .25s,color .25s}
  .doc .pager a{transition:border-color .2s,transform .2s var(--vt-curva)}
  .doc .pager .prev:hover{transform:translateX(-4px)}
  .doc .pager .next:hover{transform:translateX(4px)}
  .toc a{transition:color .2s,background-color .2s,border-color .2s}
  ul.checks li{transition:color .25s}

  /* Indice a scomparsa su telefono: si apre e si chiude scorrendo */
  @supports (interpolate-size:allow-keywords) and selector(::details-content){
    :root{interpolate-size:allow-keywords}
    .toc details::details-content{height:0;overflow:clip;transition:height .3s var(--vt-curva),content-visibility .3s allow-discrete}
    .toc details[open]::details-content{height:auto}
  }

  /* I diagrammi emergono quando arrivano sullo schermo */
  @supports (animation-timeline:view()){
    figure.dia{animation:vt-rivela linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}

/* Barra di lettura: sotto l'intestazione mostra quanto hai letto dell'argomento */
@supports (animation-timeline:scroll()){
  body:has(.doc.topic) .bar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);animation:vt-avanzamento linear both;animation-timeline:scroll(root block)}
}

@keyframes vt-entra-elemento{from{opacity:0;transform:translateY(14px)}}
@keyframes vt-da-qui{0%,35%{background:var(--soft);box-shadow:inset 4px 0 0 var(--accent)}100%{background:transparent;box-shadow:inset 4px 0 0 transparent}}
@keyframes vt-da-qui-scheda{0%,35%{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}}
@keyframes vt-rivela{from{opacity:.3;transform:translateY(28px) scale(.985)}}
@keyframes vt-avanzamento{to{transform:scaleX(1)}}

@media print{figure.dia,.topic-list li,.role-cards li{animation:none}}