/* ScuolaGo · PNRR in Chiaro: colori del corso (blu con accento arancione) e simulatore della prova orale (orale.html).
   Caricato DOPO i fogli del motore (app/dc*.css): ridefinisce solo i token di dc.css, non tocca il motore.
   Tema chiaro e scuro, telefono da 360 px senza scorrimento orizzontale, bersagli di almeno 44 px. */
:root{
  --pn-blu:#1B4FA8; --pn-blu-scuro:#123A80; --pn-arancio:#E8892B; --pn-arancio-scuro:#A8520E;
  --dc-acc:#1D4F9E;                 /* link: 7,6:1 sul fondo della pagina */
  --dc-acc-2:#2B6CD4;
  --dc-focus:#E8892B;
  /* i 5 ambiti: blu e arancio alternati, -d >= 5:1 con il bianco, -l per il tema scuro */
  --dc-a1:#2B6CD4; --dc-a1-d:#1E55B3; --dc-a1-l:#8FB6FF;
  --dc-a2:#E07A1F; --dc-a2-d:#A8520E; --dc-a2-l:#FFB27A;
  --dc-a3:#1B3F8F; --dc-a3-d:#15306E; --dc-a3-l:#9DB4F0;
  --dc-a4:#0E8AA8; --dc-a4-d:#0A6680; --dc-a4-l:#6FD3EC;
  --dc-a5:#C25A12; --dc-a5-d:#8F420C; --dc-a5-l:#FFC08A;
  --dc-area-pieno:var(--pn-blu);
}
html[data-theme=dark]{ --dc-acc:#9DBDF5; --dc-acc-2:#5E93E8; --dc-focus:#F2A65A; --dc-area-pieno:#2A5CB0; }
/* il quadratino del logo nella barra del corso: blu con il bordo arancione (al posto del cerchio con i colori delle aree) */
.dc-nav-marchio .dc-nav-logo{background:linear-gradient(140deg,#2B6CD4,#123A80);box-shadow:inset 0 0 0 2px var(--pn-arancio)}
.dc-nav-marchio .dc-nav-logo b{font-size:9.5px}

/* ambiti 7 e 8: il motore ha i colori solo per dc-area-1..6 (dc.css, dc-pagine.css, dc-quiz.css, dc-esame.css);
   qui le stesse regole per gli ambiti 7 (Inglese, digitale e strategia) e 8 (La prova orale) */
:root{--dc-a7:#3D5BC8; --dc-a7-d:#2C46A3; --dc-a7-l:#A9B9F5; --dc-a8:#D2691E; --dc-a8-d:#9C4A0E; --dc-a8-l:#FFB67E}
.dc-area-7{--dc-area:var(--dc-a7);--dc-area-d:var(--dc-a7-d);--dc-area-l:var(--dc-a7-l);--dc-area-t:var(--dc-a7-d);--dc-area-pieno:var(--dc-a7-d)}
html[data-theme=dark] .dc-area-7{--dc-area-t:var(--dc-a7-l)}
.dce-a7,.dce-arte-col i.on.dce-a7{background:var(--dc-a7-d)}
.dcr [data-a="7"]{--c:var(--dc-a7);--cd:var(--dc-a7-d);--ct:var(--dc-a7-d)}
html[data-theme=dark] .dcr [data-a="7"],.dcr--scuro [data-a="7"]{--ct:var(--dc-a7-l)}
.dcr[data-area="7"]{--ca:var(--dc-a7);--cat:var(--dc-a7-d)}
html[data-theme=dark] .dcr[data-area="7"],.dcr--scuro[data-area="7"]{--cat:var(--dc-a7-l)}
.dcp-radar .dcp-r-a7{--r:var(--dc-a7);--rt:var(--dc-a7-d)}
html[data-theme=dark] .dcp-radar .dcp-r-a7{--rt:var(--dc-a7-l)}
.dc-q-rad-badge.dc-q-a7{fill:var(--dc-a7-d)}
.dc-q-ab7{background:var(--dc-a7-d)}
.dc-area-8{--dc-area:var(--dc-a8);--dc-area-d:var(--dc-a8-d);--dc-area-l:var(--dc-a8-l);--dc-area-t:var(--dc-a8-d);--dc-area-pieno:var(--dc-a8-d)}
html[data-theme=dark] .dc-area-8{--dc-area-t:var(--dc-a8-l)}
.dce-a8,.dce-arte-col i.on.dce-a8{background:var(--dc-a8-d)}
.dcr [data-a="8"]{--c:var(--dc-a8);--cd:var(--dc-a8-d);--ct:var(--dc-a8-d)}
html[data-theme=dark] .dcr [data-a="8"],.dcr--scuro [data-a="8"]{--ct:var(--dc-a8-l)}
.dcr[data-area="8"]{--ca:var(--dc-a8);--cat:var(--dc-a8-d)}
html[data-theme=dark] .dcr[data-area="8"],.dcr--scuro[data-area="8"]{--cat:var(--dc-a8-l)}
.dcp-radar .dcp-r-a8{--r:var(--dc-a8);--rt:var(--dc-a8-d)}
html[data-theme=dark] .dcp-radar .dcp-r-a8{--rt:var(--dc-a8-l)}
.dc-q-rad-badge.dc-q-a8{fill:var(--dc-a8-d)}
.dc-q-ab8{background:var(--dc-a8-d)}

/* ---------------------------------------------------------------- simulatore della prova orale */
.or{display:grid;gap:18px}
.or-testa h1{margin:6px 0 0;font-size:clamp(26px,4.4vw,40px);line-height:1.1}
.or-testa p{margin:10px 0 0;max-width:70ch;color:var(--dc-testo-2);line-height:1.55}
.or-barra{height:10px;border-radius:99px;background:var(--dc-sup-3);overflow:hidden}
.or-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--pn-blu),var(--pn-arancio));border-radius:inherit;transition:width .3s}
.or-passi{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.or-passi button{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;border:1px solid var(--dc-bordo-2);background:var(--dc-sup);color:var(--dc-testo);font:600 14px/1.2 var(--dc-sans);cursor:pointer}
.or-passi button[aria-current=step]{border-color:var(--pn-blu);box-shadow:inset 0 0 0 1px var(--pn-blu)}
.or-passi .or-n{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:8px;background:var(--dc-sup-3);font:800 12px/1 var(--dc-sans)}
.or-passi .or-ok .or-n{background:var(--pn-arancio);color:#3a2000}
.or-scheda{padding:20px}
.or-scheda h2{margin:4px 0 6px;font-size:clamp(21px,3vw,27px)}
.or-scheda .or-perche{margin:0 0 16px;color:var(--dc-testo-2);line-height:1.55}
.or-campo{display:grid;gap:6px;margin:0 0 16px}
.or-campo label,.or-campo legend{font-weight:700}
.or-campo small{color:var(--dc-tenue)}
.or-campo textarea,.or-campo input[type=text],.or-campo select{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid var(--dc-bordo-2);background:var(--dc-sup);color:var(--dc-testo);font:16px/1.45 var(--dc-sans)}
.or-campo textarea{min-height:96px;resize:vertical}
.or-campo fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.or-scelta{display:flex;gap:10px;align-items:center;min-height:44px;padding:6px 10px;border-radius:12px;background:var(--dc-sup-2)}
.or-scelta input{width:20px;height:20px;accent-color:var(--pn-blu)}
.or-verifica{margin:8px 0 0;padding:14px 16px;border-radius:16px;border:1px solid var(--dc-bordo);background:var(--dc-sup-2)}
.or-verifica h3{margin:0 0 8px;font-size:16px;display:flex;gap:8px;align-items:center}
.or-verifica ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.or-verifica li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.or-verifica li .or-stato{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font:800 13px/1 var(--dc-sans);background:var(--dc-sup-3)}
.or-verifica li.ok .or-stato{background:var(--dc-ok-bg);color:var(--dc-ok)}
.or-verifica li.no .or-stato{background:var(--dc-avv-bg);color:var(--dc-avv)}
.or-verifica label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;min-height:32px}
.or-verifica input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--pn-arancio)}
.or-azioni{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:18px}
.or-riepilogo{display:grid;gap:12px}
.or-riepilogo section{padding:14px 16px;border-radius:16px;background:var(--dc-sup-2)}
.or-riepilogo h3{margin:0 0 6px;font-size:16px}
.or-riepilogo p{margin:0;white-space:pre-wrap;line-height:1.5}
.or-crono{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.or-crono b{font:800 34px/1 var(--dc-sans);font-variant-numeric:tabular-nums;color:var(--pn-blu)}
html[data-theme=dark] .or-crono b{color:#9DBDF5}
.or-griglia{padding:18px 20px}
.or-griglia h2{margin:0 0 8px;font-size:19px;display:flex;gap:8px;align-items:center}
.or-durata{margin:0 0 10px;line-height:1.5}
.or-gr-tit{margin:8px 0 6px;font-size:14.5px}
.or-ambiti{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.or-ambiti li{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--dc-sup-2);border-left:4px solid var(--pn-arancio)}
.or-ambiti b{font:800 15px/1.2 var(--dc-sans);color:var(--pn-blu)}
html[data-theme=dark] .or-ambiti b{color:#9DBDF5}
.or-ambiti small{color:var(--dc-tenue)}
.or-nota{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:14px;color:var(--dc-testo-2);line-height:1.5}
.or-nota .dc-ico{flex:none;width:18px;height:18px;margin-top:2px}
.or-amb{display:block;color:var(--dc-tenue);font-size:12.5px}
.or-tracce-az{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.or-estratta{display:flex;gap:8px;align-items:flex-start;margin:4px 0 0;font-size:14px;color:var(--dc-testo-2)}
.or-estratta .dc-ico{flex:none;width:18px;height:18px}
.or-fase{flex-basis:100%;color:var(--dc-testo-2);font-size:14.5px}
@media print{.or-griglia,.dc-nav,.or-passi,.or-azioni,.or-barra,.or-crono,.dc-piede-corso{display:none!important}.or-riepilogo section{break-inside:avoid}}
/* simulatore orale, 03/11/2026: esempi dei campi e lista delle discipline */
.or-campo .or-es{margin-top:2px}
.or-campo .or-es .dc-acc-btn{min-height:40px;font-size:14.5px}
.or-esempio{padding:2px 4px 6px}
.or-esempio p{margin:0 0 6px!important;line-height:1.55}
.or-esempio-t{font-size:13px!important;font-weight:700;color:var(--dc-tenue)}
.or-esempio-x{white-space:pre-line;font-size:15px;color:var(--dc-testo-2)}
.or-campo select:disabled{opacity:.6;cursor:not-allowed}
.or-disc{margin:0 0 6px;line-height:1.5}
/* 03/11/2026: home = elenco delle lezioni (lz) e lezione in una pagina sola (cpp) */
.lz-testa{margin:8px 0 22px}
.lz-testa h1{margin:6px 0 10px}
.lz-testa p{max-width:70ch;color:var(--dc-testo-2);line-height:1.6;margin:0 0 8px}
.lz-fatte{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--dc-ok)!important}
.lz-fatte .dc-ico{width:18px;height:18px}
.lz-area{margin:0 0 26px;scroll-margin-top:96px}
.lz-area-h{margin:0 0 4px;font-size:22px}
.lz-area-s{margin:0 0 12px;color:var(--dc-tenue);line-height:1.5}
.lz-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lz-voce{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;border:1px solid var(--dc-bordo);background:var(--dc-sup);color:var(--dc-testo);text-decoration:none!important;transition:border-color .2s,box-shadow .2s}
.lz-voce:hover{border-color:var(--dc-bordo-2);box-shadow:0 6px 18px rgba(20,30,60,.08)}
.lz-voce:focus-visible{outline:3px solid var(--dc-focus,#2f6fed);outline-offset:2px}
.lz-n{min-width:46px;padding:8px 6px;border-radius:12px;text-align:center;font:800 15px/1 var(--dc-sans);color:var(--dc-area-t,var(--dc-testo));background:color-mix(in srgb,var(--dc-area,#2f6fed) 12%,transparent)}
.lz-t{display:grid;gap:3px;min-width:0}
.lz-t b{font-size:16.5px;line-height:1.35}
.lz-t small{color:var(--dc-testo-2);line-height:1.45;font-size:14px}
.lz-t small.lz-info{color:var(--dc-tenue);font-size:13px}
.lz-stato{display:inline-flex;align-items:center;gap:6px;color:var(--dc-tenue);font:700 13px/1 var(--dc-sans)}
.lz-stato .dc-ico{width:18px;height:18px}
.lz-fatta .lz-stato{color:var(--dc-ok)}
@media(max-width:560px){.lz-voce{gap:10px;padding:12px}.lz-stato span{display:none}}
.cpp{display:grid;gap:22px;margin-top:22px}
.cpp-sez{scroll-margin-top:96px;padding:20px;border-radius:22px;background:var(--dc-sup);border:1px solid var(--dc-bordo)}
.cpp-h{display:flex;align-items:center;gap:10px;margin:0 0 14px!important;font-size:22px!important}
.cpp-h .dc-ico{width:22px;height:22px;color:var(--dc-area-t,var(--dc-testo))}
.cpp-obiettivi,.cpp-sintesi{padding:14px 16px;border-radius:16px;background:var(--dc-sup-2,rgba(0,0,0,.03));margin:0 0 16px}
.cpp-obiettivi ul,.cpp-sintesi ul{margin:6px 0 0;padding-left:20px;line-height:1.6}
.cpp-sintesi h3{margin:0 0 4px;font-size:18px}
.cpp-sintesi,.cpp-fine{scroll-margin-top:96px}
.cpp-fine{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:8px}
.cpp-fine small{color:var(--dc-tenue)}
@media(max-width:560px){.cpp-sez{padding:14px;border-radius:18px}}
@media print{.cpp-fine,.cpp-parte-fine{display:none!important}.cpp-parte-corpo[hidden]{display:block!important}.cpp-sez{border:0;padding:0}}
.cpp-parti{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.cpp-parte{border:1px solid var(--dc-bordo);border-radius:16px;background:var(--dc-sup);scroll-margin-top:96px}
.cpp-parte-h{margin:0!important;font-size:inherit!important}
.cpp-parte-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 14px;border:0;background:none;border-radius:16px;color:var(--dc-testo);font:700 16px/1.35 var(--dc-sans);text-align:left;cursor:pointer}
.cpp-parte-btn:hover{background:var(--dc-sup-2,rgba(0,0,0,.03))}
.cpp-parte-btn:focus-visible{outline:3px solid var(--dc-focus,#2f6fed);outline-offset:2px}
.cpp-parte-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font:800 13px/1 var(--dc-sans);color:var(--dc-area-t,var(--dc-testo));background:color-mix(in srgb,var(--dc-area,#2f6fed) 12%,transparent)}
.cpp-parte-n .dc-ico{width:16px;height:16px}
.cpp-letta .cpp-parte-n{background:var(--dc-ok-bg);color:var(--dc-ok)}
.cpp-parte-btn small{font:600 13px/1 var(--dc-sans);color:var(--dc-tenue);white-space:nowrap}
.cpp-parte-freccia{width:18px;height:18px;transition:transform .2s;color:var(--dc-tenue)}
.cpp-aperta .cpp-parte-freccia{transform:rotate(180deg)}
.cpp-aperta{border-color:var(--dc-bordo-2)}
.cpp-parte-corpo{padding:4px 18px 18px}
.cpp-parte-fine{display:flex;justify-content:flex-end;margin-top:14px}
@media(max-width:560px){.cpp-parte-btn{gap:10px;padding:10px 12px;font-size:15px}.cpp-parte-corpo{padding:2px 12px 14px}}
/* 03/11/2026: prova scritta in tre blocchi */
.dcx-blocco{margin-top:18px}
.dcx-blocco .dce-h2{margin:4px 0 8px}
.dcx-campo{display:grid;gap:8px;margin:14px 0}
.dcx-campo label,.dcx-et{font-weight:700}
.dcx-select{width:100%;max-width:520px;min-height:46px;padding:10px 14px;border-radius:12px;border:1px solid var(--dc-bordo-2);background:var(--dc-sup);color:var(--dc-testo);font:600 15.5px/1.3 var(--dc-sans)}
.dcx-campo .dc-segm{flex-wrap:wrap;max-width:100%}
.dcx-campo .dc-segm[hidden]{display:none}
/* 03/11/2026: «Il mio percorso» in tre sezioni */
.mp-sez{margin:0 0 18px}
.mp-sez h2{margin:4px 0 14px}
.mp-tessere{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.mp-tessera{display:grid;gap:6px;align-content:start;padding:14px 16px;border-radius:16px;background:var(--dc-sup-2,rgba(0,0,0,.03))}
.mp-tessera .dc-btn{justify-self:start;margin-top:4px}
.mp-t{font:800 12px/1.2 var(--dc-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--dc-tenue)}
.mp-v{font-size:22px;line-height:1.2}
.mp-s{margin:0;color:var(--dc-testo-2);line-height:1.5;font-size:14.5px}
.mp-ambiti{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:12px}
.mp-amb-r{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:6px}
.mp-amb-r span{color:var(--dc-tenue);font-size:14px}
.mp-barra{height:10px;border-radius:99px;background:var(--dc-sup-3,rgba(0,0,0,.08));overflow:hidden}
.mp-barra i{display:block;height:100%;border-radius:inherit;background:var(--dc-ok)}
/* 03/11/2026: la Guida corta */
.dcp-guida-pag .dcp-guida{grid-template-columns:minmax(0,1fr)!important;gap:18px}
.gd-come{padding:20px;border-radius:22px;background:var(--dc-sup);border:1px solid var(--dc-bordo)}
.gd-come h2{margin:0 0 10px}
.gd-punti{margin:0;padding-left:22px;display:grid;gap:10px;line-height:1.55}
.gd-cap{margin:0 0 10px!important;padding:0!important;border:0!important;background:none!important}
.gd-cap .gd-acc{border-radius:16px}
/* 03/11/2026: la ruota della mappa in cima alle lezioni, con la legenda sotto */
.lz-ruota{margin:0 0 30px}
.lz-ruota-r .dcr-grafico{max-width:460px;margin:0 auto}
.lz-ruota-r .dcr-legenda{justify-content:center;margin-top:14px}
/* 03/11/2026: la barra del corso (extra/barra.js): niente fondo dietro, le voci in una pillola con lo sfondo che scivola */
.dc-nav{background:none!important;backdrop-filter:none!important;box-shadow:none!important;border:0!important}
.dc-nav .dc-nav-lista{flex:0 0 auto!important;position:relative;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(30,50,110,.13),0 0 0 1px rgba(30,50,110,.05);border-radius:999px;padding:5px;margin-left:auto;margin-right:auto}
.dc-nav .dc-nav-lista li{position:relative;z-index:1}
.dc-nav .dc-nav-lista a{border-radius:999px!important;background:none!important;color:#4a5578!important;padding:8px 16px!important;transition:color .3s}
.dc-nav .dc-nav-lista a[aria-current]{color:#fff!important}
.dc-nav .dc-nav-lista a:not([aria-current]):hover{color:#2f5bd3!important}
.dc-nav .dc-nav-lista a svg{transition:transform .25s}
.dc-nav .dc-nav-lista a:hover svg{transform:translateY(-1px) scale(1.08)}
.pb-ind{position:absolute;top:5px;bottom:5px;left:5px;width:0;border-radius:999px;background:linear-gradient(135deg,#2f5bd3,#7b4fd6);box-shadow:0 6px 16px rgba(80,70,210,.35);transition:left .4s cubic-bezier(.3,1.4,.5,1),width .4s cubic-bezier(.3,1.4,.5,1);z-index:0}
@media (prefers-reduced-motion:reduce){.pb-ind{transition:none}}
/* il logo, nella famiglia dei corsi dell'Academy */
.dc-nav .dc-nav-marchio{gap:12px!important}
.dc-nav .dc-nav-logo{width:42px!important;height:42px!important;border-radius:13px!important;display:grid!important;place-items:center!important;position:relative;overflow:visible!important;color:#fff;flex:none;background:linear-gradient(145deg,#5b7cf2 0%,#3d55d8 55%,#5a3fc4 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(61,85,216,.28)!important}
.dc-nav .dc-nav-logo svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dc-nav .pb-em{position:absolute;right:-9px;bottom:-7px;font:800 8.5px/1 var(--dc-sans);letter-spacing:.03em;padding:3px 5px;border-radius:999px;background:#fff;color:#3d55d8;border:1px solid rgba(61,85,216,.28);box-shadow:0 3px 8px rgba(38,52,84,.14)}
.dc-nav .dc-lbl{font:800 15px/1.15 var(--dc-sans)!important;color:var(--dc-testo)!important}
.dc-nav .dc-lbl small{display:block;font:600 11.5px/1.3 var(--dc-sans)!important;color:var(--dc-tenue)!important}
/* telefono: la barra in basso, voce attiva con lo stesso sfondo */
.dcf-tel-v[aria-current]{color:#fff!important;background:linear-gradient(135deg,#2f5bd3,#7b4fd6)!important;border-radius:14px}
@media(min-width:900px){.dc-nav .dc-nav-marchio .dc-lbl{display:block!important}}
/* 03/11/2026: grafica più viva. Elenco lezioni: striscia del colore dell'ambito, sollevamento, cerchio di avanzamento */
.lz-voce{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s!important}
.lz-voce::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dc-area,#2f6fed)}
.lz-voce:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--dc-area,#2f6fed) 18%,transparent)!important;border-color:color-mix(in srgb,var(--dc-area,#2f6fed) 40%,transparent)!important}
.lz-anello{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center}
.lz-anello>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lz-an-f{fill:none;stroke:color-mix(in srgb,var(--dc-area,#2f6fed) 14%,transparent);stroke-width:4}
.lz-an-p{fill:none;stroke:var(--dc-area,#2f6fed);stroke-width:4;stroke-linecap:round;stroke-dasharray:var(--lz-c);stroke-dashoffset:var(--lz-c);animation:lzAnello 1.1s .25s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lzAnello{to{stroke-dashoffset:var(--lz-v)}}
.lz-anello i{position:relative;font:800 11px/1 var(--dc-sans);font-style:normal;color:var(--dc-area-t,var(--dc-testo));display:grid;place-items:center}
.lz-anello i small{font-size:8px}
.lz-anello i .dc-ico{width:16px;height:16px}
.lz-anello--ok i{width:26px;height:26px;border-radius:50%;background:var(--dc-area,#2f6fed);color:#fff}
.lz-anello--ok i .dc-ico{width:14px;height:14px}
@media(max-width:560px){.lz-anello span{display:inline}}
/* «Ho studiato questa lezione»: la spunta scatta */
.pw-scatta{animation:pwScatta .6s cubic-bezier(.3,1.6,.5,1)}
.pw-scatta .dc-ico{animation:pwSpunta .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pwScatta{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes pwSpunta{0%{transform:scale(.2) rotate(-30deg)}60%{transform:scale(1.4) rotate(8deg)}100%{transform:scale(1)}}
/* sfondo con gli stessi colori della barra */
html:not([data-theme=dark]) body{background:radial-gradient(900px 560px at 92% -10%,rgba(123,79,214,.13),transparent 60%),radial-gradient(820px 560px at -10% 0%,rgba(47,91,211,.12),transparent 62%),radial-gradient(700px 500px at 50% 110%,rgba(91,124,242,.08),transparent 60%),#f5f6fb!important;background-attachment:fixed!important}
/* la pagella della simulazione */
.pw-pag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;margin:18px 0 6px;padding:20px;border-radius:20px;background:rgba(255,255,255,.7);border:1px solid rgba(30,50,110,.08)}
html[data-theme=dark] .pw-pag{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.pw-voto{position:relative;width:150px;height:150px;display:grid;place-items:center;text-align:center}
.pw-voto>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pw-voto .pw-f{fill:none;stroke:rgba(30,50,110,.08);stroke-width:11}
.pw-voto .pw-p{fill:none;stroke:url(#pwGrad);stroke-width:11;stroke-linecap:round;stroke-dasharray:var(--pw-c);stroke-dashoffset:var(--pw-c);animation:pwAnello 1.4s .2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pwAnello{to{stroke-dashoffset:var(--pw-v)}}
.pw-voto .pw-soglia{stroke:var(--dc-testo);stroke-width:2.5}
.pw-voto b{display:block;font:800 42px/1 var(--dc-serif,Georgia,serif);color:var(--dc-testo)}
.pw-voto small{display:block;margin-top:4px;font:600 12px/1.2 var(--dc-sans);color:var(--dc-tenue)}
.pw-esito{display:inline-block;margin-top:6px;padding:3px 9px;border-radius:999px;font:800 11px/1.3 var(--dc-sans);background:color-mix(in srgb,var(--dc-avv,#d97706) 16%,transparent);color:var(--dc-avv,#b45309)}
.pw-ok .pw-esito{background:color-mix(in srgb,var(--dc-ok,#16a34a) 16%,transparent);color:var(--dc-ok,#15803d)}
.pw-aree{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pw-aree li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font:600 13.5px/1.3 var(--dc-sans);color:var(--dc-testo)}
.pw-aree li span{color:var(--dc-tenue);font-weight:700}
.pw-barra{grid-column:1/-1;height:9px;border-radius:999px;background:color-mix(in srgb,var(--dc-area,#2f6fed) 13%,transparent);overflow:hidden}
.pw-barra i{display:block;height:100%;width:0;border-radius:inherit;background:var(--dc-area,#2f6fed);animation:pwBarra 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.35s + var(--k,0) * 90ms)}
@keyframes pwBarra{to{width:var(--w)}}
@media(max-width:620px){.pw-pag{grid-template-columns:1fr;justify-items:center}.pw-aree{width:100%}}
@media(prefers-reduced-motion:reduce){.lz-an-p{animation:none;stroke-dashoffset:var(--lz-v)}.pw-voto .pw-p{animation:none;stroke-dashoffset:var(--pw-v)}.pw-barra i{animation:none;width:var(--w)}.pw-scatta,.pw-scatta .dc-ico{animation:none}}
/* 03/11/2026: «Altro» anche nella barra del computer (extra/barra.js) */