/* ==========================================================================
   IoGuido — design system v2
   Strumento di studio: preciso, focalizzato, reattivo. Dark, zero dipendenze,
   solo font di sistema (nessun webfont, nessun CDN).
   Palette: grafite #0B0D10 · superficie #12151A · testo #EDF0F3
   Accento unico: rosso #E5232E (azioni, progressi, errori). Niente verde.
   Risposta esatta = bianco + ✓ su pannello neutro; errore = rosso + ✕.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* superfici */
  --bg:#0B0D10;
  --bg-deep:#07090B;
  --surface:#12151A;
  --surface-2:#171B22;
  --surface-3:#1E232B;

  /* linee */
  --line:#1E232B;
  --line-mid:#262C36;
  --line-strong:#333B47;

  /* inchiostro */
  --text:#EDF0F3;
  --text-2:#B7BFC9;
  --text-3:#8A93A0;
  --text-4:#7A8390;   /* alzato da #5C6673: le micro-etichette sono a 10-12px e devono restare AA */

  /* accenti — rosso racing su grafite.
     Il rosso qui è insieme MARCHIO e ERRORE: per non confondere, lo stato
     sbagliato non si affida mai al solo colore, ha sempre una ✕ e il pannello
     tinto (vedi §14). Tre rossi perché uno solo non passa AA su tutti gli usi:
       --accent      riempimenti/bordi: su fondo scuro come TESTO è 4.27, sotto AA
       --accent-text ogni testo rosso su fondo scuro: 6.39 su bg, 5.20 su pannello tinto
       --accent-strong hover e tracciati sottili: 5.20 su superficie
       --accent-on   inchiostro sopra il riempimento rosso: bianco su #E5232E = 4.55 */
  --accent:#E5232E;
  --accent-text:#FF5A64;
  --accent-strong:#FF3B47;
  --accent-soft:#FF8A91;
  --accent-deep:#C4121D;
  --accent-on:#FFFFFF;
  --accent-glow:rgba(229,35,46,.14);
  --accent-line:rgba(229,35,46,.34);

  /* errore: stessa famiglia del marchio, distinta da ✕ + tinta pannello */
  --danger:#E5232E;
  --danger-text:#FF5A64;   /* solo TESTO: #E5232E su pannello tinto si ferma a 3.55, sotto AA */
  --danger-soft:rgba(229,35,46,.13);
  --danger-line:rgba(229,35,46,.34);

  /* risposta esatta: VERDE (ordine Renato 18/08). Contrasto su fondo scuro ~9:1;
     la ✓ continua a portare il significato anche a chi il colore non lo distingue. */
  --ok:#3DD68C;
  --ok-soft:rgba(61,214,140,.10);
  --ok-line:rgba(61,214,140,.5);

  /* tipografia — solo sistema, nessun serif */
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:var(--font-ui);
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --num:"tabular-nums";

  /* ritmo */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:999px;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;

  --ease:cubic-bezier(.2,.8,.3,1);
  --dur:160ms;          /* strumento: reattivo, non cinematico */
  --dur-slow:240ms;

  --shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --shadow-md:0 12px 32px -18px rgba(0,0,0,.85);
  --shadow-lg:0 28px 70px -40px rgba(0,0,0,.95);

  --nav-h:64px;
}

/* numeri sempre allineati: timer, punteggi, contatori */
.tnum,.timer,.stat__value,.qbar__count,.counter__value,.ring__value,
.qmap__cell,.lesson__dur,.player__time{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body::before{ /* luce fredda, appena percettibile: profondità senza calore */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(110% 60% at 50% -12%, rgba(229,35,46,.055), transparent 62%),
    radial-gradient(70% 44% at 92% 4%, rgba(120,150,190,.045), transparent 70%);
}
main{position:relative;z-index:1}

::selection{background:var(--accent);color:var(--bg)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{width:min(1220px,100% - clamp(32px,8vw,120px));margin-inline:auto}
.wrap--narrow{width:min(880px,100% - clamp(32px,8vw,120px));margin-inline:auto}
.section{padding-block:clamp(64px,10vw,var(--sp-10))}
.section--tight{padding-block:clamp(48px,6vw,var(--sp-8))}
.section--edge{border-top:1px solid var(--line)}
.stack>*+*{margin-top:var(--sp-4)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:var(--sp-4);top:-100px;z-index:100;
  background:var(--accent);color:var(--bg);padding:10px 18px;border-radius:var(--r-sm);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  transition:top var(--dur) var(--ease);
}
.skip:focus{top:var(--sp-4)}

/* ---------- 4. Tipografia ------------------------------------------------ */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);
  margin:0 0 var(--sp-3);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:2px;background:currentColor;flex:none;
}
.eyebrow--bare::before{display:none}

.display,h1.display{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.05;letter-spacing:-.028em;
  margin:0;
}
.h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.022em;margin:0;
}
.h3{
  font-family:var(--font-display);font-weight:650;
  font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.25;letter-spacing:-.015em;margin:0;
}
.h4{
  font-family:var(--font-ui);font-weight:650;font-size:1rem;
  letter-spacing:-.005em;margin:0;
}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.7;color:var(--text-2);max-width:62ch}
.muted{color:var(--text-3)}
.small{font-size:.85rem;line-height:1.6}
.tiny{font-size:.75rem;letter-spacing:.06em}
.hl{color:var(--accent-text)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- 5. Bottoni --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--r-sm);
  font-size:14px;font-weight:650;letter-spacing:-.005em;
  border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--accent);color:var(--accent-on);box-shadow:0 6px 20px -12px rgba(229,35,46,.9)}
.btn--accent:hover{background:var(--accent-deep)}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:var(--surface)}
.btn--ghost:hover{border-color:var(--accent-line);color:var(--accent-text);background:var(--surface-2)}
.btn--quiet{color:var(--text-2);padding-inline:0}
.btn--quiet:hover{color:var(--accent-text)}
.btn--sm{padding:9px 16px;font-size:13px}
.btn--lg{padding:16px 32px;font-size:15px}
.btn--full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.btn__arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

.link-more{
  display:inline-flex;align-items:center;gap:7px;color:var(--accent-text);
  font-size:14px;font-weight:650;letter-spacing:-.005em;
  border-bottom:1px solid var(--accent-line);padding-bottom:2px;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.link-more:hover{border-color:var(--accent);color:var(--accent-soft)}

/* ---------- 6. Nav ------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(11,13,16,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);min-height:var(--nav-h)}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand__mark{
  width:34px;height:34px;flex:none;display:grid;place-items:center;
  border:1px solid var(--accent);border-radius:var(--r-pill);
  color:var(--accent-text);font-family:var(--font-display);font-size:13px;letter-spacing:.04em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.brand:hover .brand__mark{background:var(--accent);color:var(--bg)}
.brand__name{font-weight:750;letter-spacing:-.02em;
  font-family:var(--font-display);font-size:1.28rem;letter-spacing:.02em;
}
.brand__name em{font-style:normal;color:var(--accent-text)}

.nav__menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav__menu a:not(.btn){
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);padding-block:8px;position:relative;
  transition:color var(--dur) var(--ease);
}
.nav__menu a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__menu a:not(.btn):hover{color:var(--text)}
.nav__menu a:not(.btn):hover::after{transform:scaleX(1)}
.nav__menu a[aria-current="page"]{color:var(--accent-text)}
.nav__menu a[aria-current="page"]::after{transform:scaleX(1)}

.nav__burger{
  display:none;width:44px;height:44px;place-items:center;gap:5px;
  border:1px solid var(--line-mid);border-radius:var(--r-sm);
}
.nav__burger span{display:block;width:16px;height:1px;background:var(--text);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}

@media (max-width:900px){
  .nav__burger{display:grid}
  .nav__menu{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-deep);border-bottom:1px solid var(--line);
    padding:var(--sp-3) clamp(16px,4vw,60px) var(--sp-5);
    display:none;
  }
  .nav__menu.is-open{display:flex}
  .nav__menu a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
  .nav__menu .btn{margin-top:var(--sp-4)}
}

/* ---------- 7. Banda "Il percorso" (scroll-scrub, NON è più l'apertura) --- */
.hero{
  position:relative;
  --scene-count:5;
  --scene-scroll:88vh;
  height:calc(var(--scene-count) * var(--scene-scroll));
  border-block:1px solid var(--line);
}
.hero__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--bg-deep);
}
.hero__scenes{position:absolute;inset:0}
.scene{
  position:absolute;inset:0;
  opacity:0;will-change:opacity;
  display:grid;align-items:end;
}
.scene__media{
  position:absolute;inset:-4%;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  transform:scale(1.08);will-change:transform;
}
.scene.is-fallback .scene__media{
  background-image:
    radial-gradient(120% 90% at 50% 8%, var(--tint-a,rgba(229,35,46,.14)), transparent 62%),
    radial-gradient(90% 70% at 18% 100%, var(--tint-b,rgba(23,27,34,.95)), transparent 70%),
    linear-gradient(168deg,#141922 0%,#0B0D10 55%,#07090B 100%);
}
.scene__num{
  position:absolute;right:clamp(20px,6vw,90px);top:clamp(72px,12vh,150px);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(3.4rem,11vw,8rem);line-height:1;
  color:rgba(237,240,243,.055);letter-spacing:-.05em;pointer-events:none;
  font-variant-numeric:tabular-nums;
}
.scene.is-fallback .scene__num{color:rgba(229,35,46,.10)}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(7,9,11,.96) 4%,rgba(7,9,11,.66) 34%,rgba(7,9,11,.16) 64%,rgba(7,9,11,.5) 100%),
    radial-gradient(120% 80% at 50% 55%, transparent 32%, rgba(7,9,11,.5) 100%);
}
.hero__grain{display:none} /* niente pellicola: è uno strumento, non un film */
.scene__copy{
  position:relative;z-index:2;
  width:min(1220px,100% - clamp(32px,8vw,120px));margin-inline:auto;
  padding-bottom:clamp(96px,16vh,180px);
  max-width:min(760px,100%);
  will-change:transform,opacity;
}
.scene__copy .h2{margin-bottom:var(--sp-4)}
.scene__copy .lede{max-width:52ch}
.scene__cta{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-3)}

.hero__hud{
  position:absolute;z-index:3;left:0;right:0;bottom:clamp(28px,5vh,48px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:min(1220px,100% - clamp(32px,8vw,120px));margin-inline:auto;
  pointer-events:none;
}
.hero__dots{display:flex;gap:10px;pointer-events:auto}
.hero__dot{
  width:24px;height:3px;background:#333B47;border-radius:var(--r-pill);
  transition:background var(--dur) var(--ease),width var(--dur) var(--ease);
}
.hero__dot[aria-current="true"]{background:var(--accent);width:40px}
.hero__hint{
  display:inline-flex;align-items:center;gap:10px;color:var(--text-3);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.hero__hint span:last-child{
  width:1px;height:26px;background:linear-gradient(to bottom,var(--accent),transparent);
  animation:heroHint 2.4s var(--ease) infinite;
}
@keyframes heroHint{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* no-JS / reduced motion: le scene diventano un racconto verticale leggibile */
.no-js .hero,
.hero.is-static{height:auto;margin-top:0}
.no-js .hero__stage,
.hero.is-static .hero__stage{position:relative;height:auto}
.no-js .hero__scenes,
.hero.is-static .hero__scenes{position:relative;inset:auto}
.no-js .scene,
.hero.is-static .scene{position:relative;inset:auto;opacity:1;min-height:82vh;border-bottom:1px solid var(--line)}
.no-js .hero__hud,
.hero.is-static .hero__hud{display:none}
.no-js .scene__media,
.hero.is-static .scene__media{transform:none;inset:0}

/* ---------- 8. Card / griglie -------------------------------------------- */
.grid{display:grid;gap:var(--sp-5)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid--tight{gap:var(--sp-3)}

.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:clamp(24px,3vw,36px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.card--link:hover{border-color:var(--accent-line);transform:translateY(-3px);background:var(--surface-2)}
.card__index{font-weight:700;
  font-family:var(--font-display);font-size:1.1rem;color:var(--accent-text);
  display:block;margin-bottom:var(--sp-4);
}
.card__title{font-weight:650;letter-spacing:-.018em;font-family:var(--font-display);font-size:1.4rem;line-height:1.25;margin-bottom:var(--sp-3)}
.card__body{color:var(--text-3);font-size:.95rem;line-height:1.7}
.card__foot{margin-top:var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}

.stretched::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* numeri editoriali */
.numbers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:linear-gradient(180deg,rgba(24,33,46,.6),rgba(19,26,36,.3));
}
.numbers__item{padding:clamp(28px,4vw,44px);border-right:1px solid var(--line)}
.numbers__item:last-child{border-right:0}
.numbers__value{font-weight:750;font-family:var(--font-display);font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;letter-spacing:-.03em}
.numbers__value sup{font-size:.42em;vertical-align:super;color:var(--accent-text);margin-left:2px}
.numbers__label{margin-top:var(--sp-3);color:var(--text-3);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:720px){.numbers__item{border-right:0;border-bottom:1px solid var(--line)}.numbers__item:last-child{border-bottom:0}}

/* banda CTA */
.cta-band{
  position:relative;overflow:hidden;border:1px solid var(--line-mid);border-radius:var(--r-md);
  padding:clamp(40px,6vw,80px);text-align:center;
  background:
    radial-gradient(90% 140% at 50% 0%, var(--accent-glow), transparent 60%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
}
.cta-band .h2{margin-bottom:var(--sp-4)}
.cta-band .lede{margin-inline:auto}
.cta-band__actions{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}

/* header di pagina */
.page-head{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(32px,4vw,56px)}
.page-head .display{max-width:16ch}
.page-head .lede{margin-top:var(--sp-5)}

/* ---------- 9. Badge / chip / pill --------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border:1px solid var(--line-mid);border-radius:var(--r-pill);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
button.chip:hover{border-color:var(--accent);color:var(--accent-text)}
.chip--accent{border-color:var(--accent-line);color:var(--accent-text)}
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-mid);color:var(--text-3);
}
.badge--soon{border-color:var(--accent-line);color:var(--accent-text)}
.badge--demo{border-color:rgba(237,240,243,.4);color:var(--accent-deep)}
.badge--ok{border-color:var(--ok-line);color:var(--ok);background:var(--ok-soft)}
.badge--err{border-color:var(--danger-line);color:var(--danger-text);background:var(--danger-soft)}
.dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

/* ---------- 10. Statistiche ---------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
}
.stats__item{padding:var(--sp-5);border-right:1px solid var(--line)}
.stats__item:last-child{border-right:0}
.stats__value{font-weight:750;font-family:var(--font-display);font-size:2rem;line-height:1;letter-spacing:-.02em}
.stats__value small{font-size:.5em;color:var(--text-3);margin-left:3px}
.stats__label{margin-top:10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-4)}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats__item{border-bottom:1px solid var(--line)}
  .stats__item:nth-child(2n){border-right:0}
}

/* ---------- 11. Tabs ----------------------------------------------------- */
.tabs{
  display:flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:11px 24px;border-radius:var(--r-pill);white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-on)}
.tabpanel[hidden]{display:none}

/* ---------- 12. Quiz ----------------------------------------------------- */
.quiz-shell{margin-top:var(--sp-6)}
.qbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0;
  background:var(--surface-2);border-bottom:0;
}
.qbar__meta{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.qbar__label{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-4)}
.qbar__value{font-weight:700;letter-spacing:-.01em;font-family:var(--font-display);font-size:1.3rem;letter-spacing:.01em}
.timer{font-family:var(--font-mono);font-size:1.35rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.timer.is-warn{color:var(--accent-text)}
.timer.is-critical{color:var(--danger-text)}

.progress{height:2px;background:rgba(237,240,243,.05);overflow:hidden}
.progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width 320ms var(--ease)}

.qcard{
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--surface);padding:clamp(24px,4vw,48px);
}
.qcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.qcard__fig{
  margin:0 auto var(--sp-5);padding:var(--sp-4);max-width:340px;
  border:1px solid var(--line-mid);border-radius:var(--r-sm);
  background:radial-gradient(80% 80% at 50% 30%,rgba(237,240,243,.05),transparent 70%);
}
.qcard__fig img{margin-inline:auto;max-height:210px;width:auto;object-fit:contain}
.qcard__fig figcaption{margin-top:var(--sp-3);text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-4)}
.qcard__text{font-weight:600;letter-spacing:-.018em;
  font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.95rem);
  line-height:1.36;letter-spacing:-.01em;max-width:34ch;
}
.qcard__answers{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:clamp(28px,4vw,44px)}
@media (max-width:520px){.qcard__answers{grid-template-columns:1fr}}
.ans{
  padding:22px 20px;border:1px solid var(--line-mid);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text);
  font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.ans:hover{border-color:var(--accent);color:var(--accent-text);transform:translateY(-2px)}
.ans[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
.ans.is-correct{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.ans.is-wrong{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-text)}
.ans[disabled]{pointer-events:none;opacity:1}
.qcard__feedback{margin-top:var(--sp-5);min-height:26px;font-size:.95rem;color:var(--text-2)}
.qcard__feedback b{color:var(--text)}
.qcard__why{display:block;margin-top:10px;padding:10px 14px;border-left:2px solid var(--line-strong);background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--text-2);font-size:.92rem;line-height:1.55}
.qcard__why b{color:var(--text)}
.qcard__feedback.is-ok .qcard__why b::before,
.qcard__feedback.is-err .qcard__why b::before{content:none}
.qcard__feedback.is-ok b{color:var(--ok)}
.qcard__feedback.is-err b{color:var(--danger-text)}
/* l'etichetta del riquadro non è il verdetto: resta neutra anche dentro un
   feedback rosso o verde (stessa logica del ::before annullato qui sopra) */
.qcard__feedback.is-ok .qcard__why b,
.qcard__feedback.is-err .qcard__why b{color:var(--text)}
/* ripiego senza spiegazione curata: gli enunciati VERI dello stesso quesito,
   verbatim dal listato ministeriale — nessuna frase nostra, nessuna invenzione */
.qcard__why--listato{border-left-color:var(--accent-line)}
.why__fatto{display:block;position:relative;margin-top:8px;padding-left:15px;color:var(--text-2)}
.why__fatto::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent);opacity:.75;
}

.qnav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-6);flex-wrap:wrap}
.qmap{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-5)}
.qmap__cell{
  width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-xs);
  border:1px solid var(--line-mid);font-size:11px;color:var(--text-4);
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.qmap__cell:hover{border-color:var(--accent);color:var(--accent-text)}
.qmap__cell.is-answered{background:var(--accent-glow);border-color:var(--accent-line);color:var(--accent-text)}
/* col correttore acceso (prova componibile) la mappa dice anche com'è andata */
.qmap__cell.is-right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.qmap__cell.is-wrong{background:var(--danger-soft);border-color:var(--danger);color:var(--danger-text)}
.qmap__cell.is-current{background:var(--accent);border-color:var(--accent);color:var(--accent-on)}
/* dove sei E com'è andata insieme: l'esito resta il colore, "qui" è l'anello */
.qmap__cell.is-right.is-current{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 2px var(--accent)}
.qmap__cell.is-wrong.is-current{background:var(--danger-soft);color:var(--danger-text);box-shadow:inset 0 0 0 2px var(--accent)}

/* esito esame */
.verdict{
  border:1px solid var(--line-mid);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
}
.verdict__head{
  padding:clamp(36px,6vw,72px);text-align:center;
  background:radial-gradient(100% 140% at 50% 0%,var(--accent-glow),transparent 62%);
  border-bottom:1px solid var(--line);
}
.verdict__head.is-fail{background:radial-gradient(100% 140% at 50% 0%,var(--danger-soft),transparent 62%)}
.verdict__title{font-weight:800;letter-spacing:-.03em;font-family:var(--font-display);font-size:clamp(2.4rem,6vw,4rem);line-height:1;letter-spacing:.01em}
.verdict__title.is-pass{color:var(--ok)}
.verdict__title.is-fail{color:var(--danger-text)}
.verdict__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6);margin-top:var(--sp-6)}
.verdict__stat{min-width:100px}
.verdict__stat b{font-weight:750;letter-spacing:-.02em;display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1}
.verdict__stat span{display:block;margin-top:6px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-4)}
.verdict__body{padding:clamp(24px,4vw,48px)}

/* La correzione dopo la consegna — erede di .err-item, che mostrava i soli
   errori: qui ci sono TUTTE le domande, perché anche una giusta indovinata
   merita di essere riletta. */
.corr{margin-top:var(--sp-2)}
.corr__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);flex-wrap:wrap;padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--line);
}
.corr__item{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--line);
}
.corr__item:last-child{border-bottom:0}
.corr__idx{
  font-weight:700;font-family:var(--font-display);font-size:1.1rem;
  line-height:1.4;color:var(--text-4);font-variant-numeric:tabular-nums;
}
.corr__item.is-err .corr__idx{color:var(--danger-text)}
.corr__item.is-ok .corr__idx{color:var(--ok)}
.corr__q{font-size:1.02rem;line-height:1.6;margin-bottom:var(--sp-3)}
.corr__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.corr__why{margin:0}
.corr__why:empty{display:none}
.corr__item img{max-height:88px;width:auto;margin-top:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-xs);padding:6px;background:rgba(237,240,243,.05)}
/* "solo errori": le giuste escono dalla vista, non dal conteggio */
.corr.is-solo .corr__item.is-ok{display:none}

/* stato vuoto */
.empty{
  text-align:center;padding:clamp(48px,8vw,96px) var(--sp-5);
  border:1px dashed var(--line-mid);border-radius:var(--r-md);color:var(--text-3);
}
.empty .h3{color:var(--text);margin-bottom:var(--sp-3)}

/* ---------- 13. Argomenti ------------------------------------------------ */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--sp-4)}
.topic{
  position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-5);min-height:172px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  text-align:left;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.topic:hover{border-color:var(--accent-line);transform:translateY(-3px);background:var(--surface-2)}
.topic__num{font-weight:700;font-family:var(--font-display);font-size:1.05rem;color:var(--accent-text)}
.topic__name{font-weight:650;letter-spacing:-.015em;font-family:var(--font-display);font-size:1.24rem;line-height:1.24;flex:1}
.topic__meter{height:2px;background:rgba(237,240,243,.05);border-radius:var(--r-pill);overflow:hidden}
.topic__meter i{display:block;height:100%;background:var(--accent);width:0}
.topic__foot{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4)}

.sheet{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.sheet__head{padding:clamp(28px,4vw,52px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(24,33,46,.7),transparent)}
.sheet__body{padding:clamp(28px,4vw,52px)}
.sheet__grid{display:grid;grid-template-columns:1.4fr .9fr;gap:clamp(28px,4vw,56px)}
@media (max-width:900px){.sheet__grid{grid-template-columns:1fr}}
.prose{color:var(--text-2);font-size:1rem;line-height:1.78}
.prose h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.018em;font-size:1.35rem;color:var(--text);margin:var(--sp-6) 0 var(--sp-3)}
.prose p+p{margin-top:var(--sp-4)}
.prose strong{color:var(--text);font-weight:600}
.prose ul{margin:var(--sp-4) 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:22px;margin-bottom:10px}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--accent)}

.sheet__body figure{margin:0}
.sheet__body figure img{
  width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  background:rgba(237,240,243,.05);padding:var(--sp-3);
}

.keylist{list-style:none;padding:0;margin:0}
.keylist li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.6;color:var(--text-2);
}
.keylist li:last-child{border-bottom:0}
.keylist i{font-weight:700;font-style:normal;color:var(--accent-text);font-family:var(--font-display)}
.keylist--trap i{color:var(--danger-text)}

.signs{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:var(--sp-3)}
.sign{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:var(--sp-4) var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.sign:hover{border-color:var(--accent);transform:translateY(-2px)}
.sign img{height:74px;width:auto;object-fit:contain}
.sign__label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-align:center;line-height:1.4}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--sp-5);
  background:rgba(7,9,11,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.lightbox[hidden]{display:none}
.lightbox__inner{
  position:relative;max-width:min(560px,100%);width:100%;
  background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--r-md);
  padding:clamp(28px,4vw,48px);text-align:center;box-shadow:var(--shadow-lg);
}
.lightbox__inner img{margin-inline:auto;max-height:52vh;width:auto}
.lightbox__close{
  position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:var(--r-pill);
  border:1px solid var(--line-mid);color:var(--text-2);display:grid;place-items:center;font-size:18px;
}
.lightbox__close:hover{border-color:var(--accent);color:var(--accent-text)}
.lightbox__caption{font-weight:650;margin-top:var(--sp-4);font-family:var(--font-display);font-size:1.2rem}
.lightbox__sub{margin-top:6px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-4)}

/* ---------- 14. Lezioni -------------------------------------------------- */
.banner{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  padding:var(--sp-5) clamp(20px,3vw,36px);
  border:1px solid var(--accent-line);border-radius:var(--r-md);
  background:linear-gradient(100deg,var(--accent-glow),transparent 62%);
}
.banner__text{font-weight:650;letter-spacing:-.015em;font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.4}

.lesson-group{margin-top:clamp(36px,5vw,64px)}
.lesson-group__head{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.lesson-group__num{font-weight:700;font-family:var(--font-display);color:var(--accent-text)}
.lesson-group__name{font-weight:700;letter-spacing:-.018em;font-family:var(--font-display);font-size:1.3rem}

.lesson{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);margin-bottom:10px;width:100%;text-align:left;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.lesson:hover{border-color:var(--accent-line);background:var(--surface-2)}
.lesson.is-playing{border-color:var(--accent);background:var(--surface-2)}
/* già ascoltata: un segno discreto a sinistra, non un trofeo.
   Il colore non basta da solo (§AA): c'è anche il ✓ prima del titolo. */
.lesson.is-heard{border-left:3px solid var(--accent)}
.lesson.is-heard .lesson__title::before{
  content:"✓ ";color:var(--accent-text);font-weight:700;
}
.lesson__play{
  width:42px;height:42px;flex:none;border-radius:var(--r-pill);border:1px solid var(--line-mid);
  display:grid;place-items:center;color:var(--accent-text);
}
.lesson.is-playing .lesson__play{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.lesson__title{font-size:1rem;line-height:1.45}
.lesson__sub{margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4)}
.lesson__right{display:flex;align-items:center;gap:var(--sp-4)}
.lesson__dur{font-family:var(--font-mono);font-size:.85rem;color:var(--text-3);font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .lesson{grid-template-columns:auto 1fr;gap:var(--sp-3)}
  .lesson__right{grid-column:1 / -1;justify-content:space-between}
}

.script{
  margin-top:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);
}
.script>summary{
  padding:var(--sp-4);cursor:pointer;list-style:none;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);
}
.script>summary::-webkit-details-marker{display:none}
.script__body{padding:0 var(--sp-5) var(--sp-5);color:var(--text-2);line-height:1.8}

.player{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,14,19,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line-mid);
  transform:translateY(110%);transition:transform 320ms var(--ease);
}
.player.is-visible{transform:translateY(0)}
.player__inner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) 0;
}
.player__btn{
  width:46px;height:46px;border-radius:var(--r-pill);border:1px solid var(--accent);
  color:var(--accent-text);display:grid;place-items:center;flex:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.player__btn:hover{background:var(--accent);color:var(--accent-on)}
.player__btn--quiet{border-color:var(--line-mid);color:var(--text-3);width:40px;height:40px}
.player__btn--quiet:hover{background:transparent;border-color:var(--danger);color:var(--danger-text)}
/* il player è fisso: si lascia respiro al fondo pagina quando è aperto */
body:has(.player.is-visible){padding-bottom:132px}
.player__meta{min-width:0}
.player__title{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player__sub{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);margin-top:2px}
.player__seek{display:flex;align-items:center;gap:var(--sp-3);margin-top:8px}
.player__time{font-family:var(--font-mono);font-size:11px;color:var(--text-4);font-variant-numeric:tabular-nums}
.player__actions{display:flex;align-items:center;gap:var(--sp-3)}
.speed{
  min-width:52px;padding:9px 12px;border:1px solid var(--line-mid);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:12px;color:var(--text-2);
}
.speed:hover{border-color:var(--accent);color:var(--accent-text)}
@media (max-width:640px){
  .player__inner{grid-template-columns:auto 1fr;gap:var(--sp-3)}
  .player__actions{grid-column:1 / -1;justify-content:flex-end}
}

input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{height:2px;background:rgba(237,240,243,.10);border-radius:var(--r-pill)}
input[type="range"]::-moz-range-track{height:2px;background:rgba(237,240,243,.10);border-radius:var(--r-pill)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:-5px;
  transition:transform var(--dur) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.2)}
input[type="range"]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}

/* ---------- 15. Tutor ---------------------------------------------------- */
.chat{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;
  min-height:min(640px,72vh);
}
.chat__head{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-4) clamp(20px,3vw,32px);border-bottom:1px solid var(--line);background:var(--surface-2);
}
.avatar{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--accent);color:var(--accent-text);
  font-family:var(--font-display);font-size:14px;letter-spacing:.04em;
  background:radial-gradient(120% 120% at 30% 20%,var(--accent-line),transparent 70%);
}
.avatar--sm{width:32px;height:32px;font-size:11px}
.chat__log{
  flex:1;overflow-y:auto;padding:clamp(20px,3vw,32px);
  display:flex;flex-direction:column;gap:var(--sp-4);scroll-behavior:smooth;
}
.msg{display:flex;gap:var(--sp-3);max-width:min(84%,620px)}
.msg--me{margin-left:auto;flex-direction:row-reverse}
.msg__bubble{
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);line-height:1.7;font-size:.97rem;
}
.msg--me .msg__bubble{background:var(--accent-glow);border-color:var(--accent-line)}
.msg__bubble a{color:var(--accent-text);border-bottom:1px solid var(--accent-line)}
.msg__note{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4)}
.typing{display:inline-flex;gap:5px;align-items:center;height:20px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.4;animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* --- (a)utopia: schede, citazioni, banda di probabilità -------------------
   La risposta di teoria è una CITAZIONE, e si deve vedere che lo è: barra
   rossa a sinistra, corsivo, e sotto la riga della fonte. Chi legge deve
   capire in un colpo d'occhio che quelle parole non le ha scritte il sito. */
.tabs--chat{padding:var(--sp-3) clamp(20px,3vw,32px) 0;border-bottom:1px solid var(--line)}
.chat__head .is-warn{color:var(--accent-text)}

.cita{
  border-left:3px solid var(--accent);padding-left:var(--sp-4);
  font-style:italic;color:var(--text);
}
.msg__fonte{
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--line);
  font-size:13px;color:var(--text-3);line-height:1.6;
}
.msg__extra{margin-top:var(--sp-3);font-size:13px;color:var(--text-3);line-height:1.6}

.banda{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-bottom:var(--sp-3);
}
.banda b{
  font-size:clamp(1.6rem,5vw,2.2rem);font-weight:760;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--accent-text);line-height:1;
}
.banda span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4)}

.metodo{margin-top:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.metodo summary{
  cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);font-weight:700;
}
.metodo summary:hover{color:var(--accent-text)}
.metodo p{font-size:13px;color:var(--text-3);line-height:1.6;margin-top:var(--sp-3)}

.chat__suggest{display:flex;flex-wrap:wrap;gap:8px;padding:0 clamp(20px,3vw,32px) var(--sp-4)}
.chat__form{
  display:flex;gap:var(--sp-3);padding:var(--sp-4) clamp(20px,3vw,32px);
  border-top:1px solid var(--line);background:var(--surface-2);
}
.chat__input{
  flex:1;padding:15px 18px;background:var(--bg);border:1px solid var(--line-mid);
  border-radius:var(--r-sm);color:var(--text);font-size:.97rem;
  transition:border-color var(--dur) var(--ease);
}
.chat__input::placeholder{color:var(--text-4)}
.chat__input:focus{border-color:var(--accent);outline:none}

.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item>summary{
  padding:var(--sp-5) 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-size:1.12rem;display:flex;justify-content:space-between;gap:var(--sp-4);
}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary::after{content:"+";color:var(--accent-text);font-family:var(--font-ui);font-size:1.1rem}
.faq__item[open]>summary::after{content:"–"}
.faq__answer{padding-bottom:var(--sp-5);color:var(--text-2);line-height:1.75;max-width:70ch}

/* ---------- 16. Toast ---------------------------------------------------- */
/* F06: il fondo scuro del tema vecchio col colore testo del tema chiaro dava testo scuro su scuro (sotto 1,5:1), e il
   maiuscolo da 12 px rendeva illeggibili le frasi lunghe: testo chiaro esplicito, frase normale, a capo dentro lo schermo.
   Durante una prova sta in alto, per non coprire Vero/Falso e la barra in basso. */
.toast-host{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
body.autopia-quiz-active .toast-host{bottom:auto;top:calc(14px + env(safe-area-inset-top,0px))}
.toast{
  padding:12px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.16);
  background:rgba(19,26,36,.96);backdrop-filter:blur(10px);
  font-size:14px;line-height:1.4;letter-spacing:0;text-transform:none;color:#eef6fb;text-align:center;max-width:420px;
  box-shadow:var(--shadow-md);animation:toastIn 280ms var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.toast.is-out{opacity:0;transform:translateY(10px);transition:opacity 220ms,transform 220ms}

/* ---------- 17. Footer --------------------------------------------------- */
.footer{border-top:1px solid var(--line);margin-top:clamp(64px,10vw,140px);background:var(--bg-deep);position:relative;z-index:1}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--sp-6);padding-block:clamp(48px,7vw,88px)}
@media (max-width:860px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__top{grid-template-columns:1fr}}
.footer__claim{font-family:var(--font-display);font-size:1.5rem;line-height:1.35;margin-top:var(--sp-4);max-width:22ch}
.footer__col h4{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--text-4);margin-bottom:var(--sp-4)}
.footer__col li{margin-bottom:12px}
.footer__col a{color:var(--text-2);font-size:.93rem;transition:color var(--dur) var(--ease)}
.footer__col a:hover{color:var(--accent-text)}
.footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;
  padding-block:var(--sp-5);border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.06em;color:var(--text-4);
}

/* ---------- 18. Utility -------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--ease),transform 620ms var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
.flow-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.mt-6{margin-top:var(--sp-6)}
.mt-5{margin-top:var(--sp-5)}
.mt-4{margin-top:var(--sp-4)}
.mb-5{margin-bottom:var(--sp-5)}
[hidden]{display:none !important}

/* ==========================================================================
   19. v2 — Componenti "strumento"
   Aggiunti nel redesign: apertura interattiva, contatori, anello progressi,
   modalità concentrazione del quiz, trascrizioni.
   ========================================================================== */

/* ---------- 19.1 Apertura: il mini-quiz è il primo schermo --------------- */
.opening{
  position:relative;
  padding-block:clamp(28px,5vw,56px) clamp(40px,6vw,72px);
  border-bottom:1px solid var(--line);
}
.opening__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
@media (max-width:940px){.opening__grid{grid-template-columns:1fr;gap:var(--sp-6)}}
.opening__claim{
  font-size:clamp(1.02rem,1.4vw,1.15rem);line-height:1.65;color:var(--text-2);max-width:46ch;
}
.opening__meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5);
}

/* pannello del mini-quiz */
.deck{
  position:relative;background:var(--surface);
  border:1px solid var(--line-mid);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
}
.deck__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:14px var(--sp-5);border-bottom:1px solid var(--line);background:var(--surface-2);
}
.deck__label{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  display:inline-flex;align-items:center;gap:8px;
}
.deck__label::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.deck__score{
  font-size:13px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;
}
.deck__score b{color:var(--accent-text)}
.deck__progress{display:flex;gap:5px}
.deck__pip{
  width:22px;height:4px;border-radius:var(--r-pill);background:var(--line-strong);
  transition:background var(--dur) var(--ease);
}
.deck__pip.is-done{background:var(--ok)}
.deck__pip.is-miss{background:var(--danger)}
.deck__body{padding:clamp(20px,3vw,32px) clamp(20px,3vw,34px) clamp(22px,3vw,30px)}
.deck__fig{
  margin:0 0 var(--sp-4);padding:var(--sp-3);border:1px solid var(--line);
  border-radius:var(--r-sm);background:#0E1116;display:grid;place-items:center;
}
.deck__fig img{max-height:150px;width:auto;object-fit:contain}
.deck__topic{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--sp-3);
}
.deck__q{
  font-size:clamp(1.06rem,1.9vw,1.3rem);font-weight:600;line-height:1.42;
  letter-spacing:-.015em;min-height:3.2em;
}
.deck__answers{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-5)}
.deck__feedback{
  margin-top:var(--sp-4);min-height:2.6em;font-size:.92rem;line-height:1.5;color:var(--text-2);
}
.deck__feedback b{color:var(--text)}
.deck__feedback.is-ok b{color:var(--ok)}
.deck__feedback.is-err b{color:var(--danger-text)}
.deck__done{text-align:center;padding:var(--sp-3) 0 0}
.deck__done .h3{margin-bottom:var(--sp-2)}
.deck__result{
  font-size:clamp(2.4rem,6vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}

/* bottoni risposta grandi (usati da apertura e quiz) */
.big-ans{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 16px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text);
  font-size:15px;font-weight:700;letter-spacing:.01em;
  transition:border-color 120ms var(--ease),background 120ms var(--ease),
             color 120ms var(--ease),transform 120ms var(--ease);
}
.big-ans:hover:not([disabled]){border-color:var(--accent);color:var(--accent-text);background:#1E1417}
.big-ans:active:not([disabled]){transform:scale(.985)}
.big-ans kbd{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:2px 6px;border-radius:4px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--text-3);
}
.big-ans.is-correct{border-color:var(--ok-line);background:var(--ok-soft);color:var(--ok)}
.big-ans.is-wrong{border-color:var(--danger);background:var(--danger-soft);color:var(--danger-text)}
.big-ans.is-correct kbd,.big-ans.is-wrong kbd{border-color:currentColor;color:inherit}
.big-ans[disabled]{cursor:default}
/* Icone di stato — il colore da solo non basta (WCAG 1.4.1) e qui il rosso è
   anche il marchio: la ✓ e la ✕ portano il significato anche in bianco e nero
   e per chi il rosso non lo distingue. */
.ans.is-correct::after,.ans.is-wrong::after{margin-left:.5em;font-size:1.05em;line-height:1}
.ans.is-correct::after{content:"\2713"}
.ans.is-wrong::after{content:"\2715"}
.big-ans.is-correct::before,.big-ans.is-wrong::before{font-size:1.05em;line-height:1}
.big-ans.is-correct::before{content:"\2713"}
.big-ans.is-wrong::before{content:"\2715"}
.qcard__feedback.is-ok b::before,.deck__feedback.is-ok b::before{content:"\2713\00a0"}
.qcard__feedback.is-err b::before,.deck__feedback.is-err b::before{content:"\2715\00a0"}
.badge--ok::before{content:"\2713\00a0"}
.badge--err::before{content:"\2715\00a0"}
.verdict__title.is-pass::before{content:"\2713\00a0"}
.verdict__title.is-fail::before{content:"\2715\00a0"}

@media (prefers-reduced-motion:no-preference){
  .big-ans.is-correct{animation:pulseOk 150ms var(--ease)}
  .big-ans.is-wrong{animation:pulseErr 150ms var(--ease)}
}
@keyframes pulseOk{from{transform:scale(.97)}to{transform:scale(1)}}
@keyframes pulseErr{0%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}100%{transform:translateX(0)}}

/* ---------- 19.2 Contatori animati -------------------------------------- */
.counters{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
}
.counter{padding:clamp(22px,3vw,30px);border-right:1px solid var(--line)}
.counter:last-child{border-right:0}
@media (max-width:760px){
  .counter{border-right:0;border-bottom:1px solid var(--line)}
  .counter:last-child{border-bottom:0}
}
.counter__value{
  font-size:clamp(2rem,3.6vw,2.7rem);font-weight:750;letter-spacing:-.03em;line-height:1;
  color:var(--text);
}
.counter__label{
  margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--text-3);
}
.counter--accent .counter__value{color:var(--accent-text)}

/* ---------- 19.3 Bentornato + anello progressi -------------------------- */
.welcome{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(18px,3vw,32px);
  padding:clamp(20px,3vw,28px) clamp(20px,3vw,32px);
  border:1px solid var(--accent-line);border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--accent-glow),transparent 70%),var(--surface);
}
@media (max-width:720px){
  .welcome{grid-template-columns:auto minmax(0,1fr);row-gap:var(--sp-4)}
  .welcome__cta{grid-column:1 / -1}
}
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring__track{stroke:var(--line-strong)}
.ring__bar{
  stroke:var(--accent-strong);stroke-linecap:round;
  transition:stroke-dashoffset 900ms var(--ease);
}
.ring__value{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:19px;font-weight:750;letter-spacing:-.02em;
}
.welcome__title{font-size:1.05rem;font-weight:700;letter-spacing:-.015em}
.welcome__meta{margin-top:5px;font-size:13.5px;color:var(--text-3)}
.welcome__meta b{color:var(--text-2);font-variant-numeric:tabular-nums}
.streak{
  display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);font-weight:700;
}

/* ---------- 19.4 Quiz: modalità concentrazione -------------------------- */
body.is-focus .nav{opacity:.22;transition:opacity var(--dur-slow) var(--ease)}
body.is-focus .nav:hover,
body.is-focus .nav:focus-within{opacity:1}
body.is-focus .footer,
body.is-focus [data-dim-on-focus]{opacity:.14;pointer-events:none;transition:opacity var(--dur-slow) var(--ease)}
body.is-focus .tabs{display:none}

.focusbar{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:70;
  background:var(--line);display:none;
}
body.is-focus .focusbar{display:block}
.focusbar__fill{
  height:100%;width:0;background:var(--accent);
  transition:width 180ms var(--ease);
}

/* la prova: una domanda alla volta, centrata, senza contorno superfluo */
.qrun{max-width:760px;margin-inline:auto}
.qrun__top{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
}
.qrun__pos{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-4);
  font-variant-numeric:tabular-nums;
}
.qrun__pos b{color:var(--text-2);font-weight:700}
.qrun .timer{font-size:1.1rem;color:var(--text-3)}
.qrun .timer.is-warn{color:var(--accent-text)}
.qrun .timer.is-critical{color:var(--danger-text)}
.qcard--focus{
  border:0;background:transparent;padding:clamp(28px,5vw,52px) 0 0;text-align:center;
}
.qcard--focus .qcard__top{justify-content:center}
.qcard--focus .qcard__fig{background:var(--surface);border:1px solid var(--line);padding:var(--sp-5)}
.qcard--focus .qcard__fig img{max-height:min(38vh,300px)}
.qcard--focus .qcard__text{
  font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.34;
  max-width:30ch;margin-inline:auto;
}
/* la mappa resta raggiungibile ma non ruba attenzione */
.qmap-wrap{margin-top:var(--sp-6);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.qmap-wrap > summary{
  cursor:pointer;list-style:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-4);transition:color var(--dur) var(--ease);
}
.qmap-wrap > summary::-webkit-details-marker{display:none}
.qmap-wrap > summary:hover{color:var(--accent-text)}
.qmap-wrap .qmap{justify-content:center}

/* barra risposte: due tasti grandi, ancorati al pollice su mobile */
.answerbar{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  max-width:520px;margin:clamp(24px,4vw,36px) auto 0;
}
@media (max-width:720px){
  .answerbar{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
    max-width:none;margin:0;
    position:fixed;left:0;right:0;bottom:0;z-index:65;
    padding:var(--sp-3) var(--sp-4);
    padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom,0px));
    background:rgba(11,13,16,.94);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line-mid);
  }
  .answerbar .big-ans{padding:16px 12px}
  .answerbar kbd{display:none}
  body.is-focus{padding-bottom:96px}
}

/* suggerimenti tastiera (solo desktop, solo puntatore fine) */
.kbdhint{display:none}
@media (min-width:721px) and (pointer:fine){
  .kbdhint{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
    margin-top:var(--sp-5);font-size:12px;color:var(--text-4);
  }
  .kbdhint span{display:inline-flex;align-items:center;gap:6px}
  .kbdhint kbd{
    font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:4px;
    border:1px solid var(--line-strong);background:var(--surface-2);color:var(--text-3);
  }
}

/* ---------- 19.5 Lezioni: trascrizione + stato disponibile -------------- */
.badge--live{background:var(--accent-glow);border-color:var(--accent-line);color:var(--accent-text)}
.transcript{margin-top:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-3)}
.transcript > summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:650;color:var(--text-3);
  transition:color var(--dur) var(--ease);
}
.transcript > summary::-webkit-details-marker{display:none}
.transcript > summary::before{
  content:"›";display:inline-block;transition:transform var(--dur) var(--ease);
  font-size:15px;line-height:1;
}
.transcript[open] > summary::before{transform:rotate(90deg)}
.transcript > summary:hover{color:var(--accent-text)}
.transcript__body{
  margin-top:var(--sp-3);max-height:340px;overflow-y:auto;
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-sm);
  background:#0E1116;font-size:14px;line-height:1.72;color:var(--text-2);
  overscroll-behavior:contain;
}
.transcript__body p+p{margin-top:.85em}
.transcript__body::-webkit-scrollbar{width:8px}
.transcript__body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.transcript__note{font-size:13px;color:var(--text-4);padding:var(--sp-3) 0}

/* ---------- 20. Marchio ---------------------------------------------------
   Il lockup con la supercar sostituisce il wordmark testuale. width/height
   nell'HTML tengono lo spazio prima che l'SVG arrivi: niente salti. */
.brand__logo{height:32px;width:auto;display:block}
.footer .brand__logo{height:28px}
@media (max-width:520px){.brand__logo{height:28px}}

/* ---------- 21. Avvisi ---------------------------------------------------- */
.notice{
  border:1px solid var(--line-mid);border-left-width:3px;border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);font-size:13.5px;line-height:1.5;color:var(--text-2);
  background:var(--surface);margin:var(--sp-4) 0;
}
.notice--warn{border-left-color:var(--accent);color:var(--text-2)}
.notice--info{border-left-color:var(--line-strong)}

/* ---------- 22. Barra strumenti della domanda ----------------------------
   Ascolta · appunti · Home · esci. Bersagli da 40px: si usano col pollice. */
.tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.iconbtn{
  display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;
  border:1px solid var(--line-mid);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-2);font-size:15px;line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.iconbtn:hover{border-color:var(--accent);color:var(--accent-text);background:var(--surface-3)}
.iconbtn--text{font-size:13px;font-weight:650;letter-spacing:-.005em}

/* ---------- 23. Prova d'esame: modello ministeriale -----------------------
   Mappa delle 30 sempre visibile a lato, tempo in evidenza, consegna a
   portata. Su schermo stretto la mappa scende sotto la domanda. */
.exam{display:block}
.exam__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding:var(--sp-4) 0 var(--sp-4);
  border-bottom:1px solid var(--line);
}
.exam__id{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;min-width:0}
.exam__pos{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums}
.exam__pos b{color:var(--text);font-weight:700}
.exam__bar .timer{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:.02em}

.exam__layout{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:var(--sp-6);margin-top:var(--sp-5);align-items:start}
@media (max-width:900px){.exam__layout{grid-template-columns:1fr;gap:var(--sp-5)}}
.exam__main{min-width:0}
.exam__side{
  position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
}
@media (max-width:900px){.exam__side{position:static}}
.exam__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
.exam__hint{font-size:11.5px;color:var(--text-4);text-align:center;margin:0}

.qmap__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.qmap__tab{
  padding:8px 4px;border:1px solid var(--line-mid);border-radius:var(--r-xs);
  background:var(--surface-2);color:var(--text-3);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.qmap__tab[aria-selected="true"]{background:var(--surface-3);border-color:var(--line-strong);color:var(--text)}
.qmap__tab:hover{color:var(--accent-text);border-color:var(--accent-line)}
.qmap__legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--text-4);margin:0}
.qmap__key{width:12px;height:12px;border-radius:3px;border:1px solid var(--line-mid);display:inline-block;margin-left:6px}
.qmap__key--done{background:var(--accent-glow);border-color:var(--accent-line)}
.qmap__key--now{background:var(--accent);border-color:var(--accent)}
.qmap__key--right{background:var(--ok-soft);border-color:var(--ok)}
.qmap__key--miss{background:var(--danger-soft);border-color:var(--danger)}

/* card domanda in modalità esame: figura a sinistra, testo a destra */
.qcard--esame.qcard--fig{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--sp-5);align-items:start}
@media (max-width:760px){.qcard--esame.qcard--fig{grid-template-columns:1fr}}
.qcard--esame .qcard__fig{margin:0}
.qcard--esame .qcard__fig img{max-height:300px}
.qcard__body{min-width:0;display:flex;flex-direction:column}

/* ---------- 24. Allenamento: striscia trattini + intestazione ------------- */
.run__top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;padding-bottom:var(--sp-4);
}
.run__id{min-width:0}
.run__label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-4)}
.run__title{font-size:1.05rem;font-weight:700;letter-spacing:-.015em;margin-top:2px}
.run__count{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-3)}
.run__count b{color:var(--text)}
.run__pips{display:flex;gap:3px;margin-bottom:var(--sp-5)}
.pip{flex:1;height:4px;border-radius:var(--r-pill);background:var(--line);transition:background var(--dur) var(--ease)}
.pip.is-now{background:var(--accent)}
.pip.is-done{background:var(--ok)}
.pip.is-miss{background:var(--accent-strong)}

/* ---------- 25. Compositore della prova ----------------------------------- */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px}
.pickarg{
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pickarg:hover{border-color:var(--line-strong);background:var(--surface-2)}
.pickarg:has(input:checked){border-color:var(--accent);background:var(--accent-glow)}
.pickarg.is-off{opacity:.4;cursor:not-allowed}
.pickarg input{width:16px;height:16px;accent-color:var(--accent);cursor:inherit}
.pickarg__num{font-family:var(--font-mono);font-size:11px;color:var(--text-4);font-variant-numeric:tabular-nums}
.pickarg__name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickarg__n{font-size:11px;color:var(--text-4);font-variant-numeric:tabular-nums}
.composebar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  padding-top:var(--sp-4);border-top:1px solid var(--line);
}
.composebar__info{font-size:13.5px;color:var(--text-2);font-variant-numeric:tabular-nums;margin:0}

/* argomento nella griglia: allenamento + prova d'esame dedicata */
.topic--pick{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.topic--pick .topic__go{display:block;width:100%;text-align:left;padding:var(--sp-4);background:none;border:0}
.topic--pick .topic__go:hover{background:var(--surface-2)}
.topic__exam{
  padding:10px var(--sp-4);border:0;border-top:1px solid var(--line);
  background:var(--surface-2);color:var(--text-3);text-align:left;
  font-size:12px;font-weight:650;letter-spacing:-.005em;
}
.topic__exam:hover{background:var(--accent-glow);color:var(--accent-text)}
.topic--pick.is-off{opacity:.45}

/* ---------- 26. Statistiche ----------------------------------------------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.kpi{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.kpi__v{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.kpi__v small{font-size:.5em;font-weight:600;color:var(--text-3);margin-left:2px}
.kpi__l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);margin-top:8px}
.kpi__n{font-size:12px;color:var(--text-3);margin-top:6px}

.bars{display:flex;flex-direction:column;gap:2px}
.bar{display:grid;grid-template-columns:26px minmax(0,1fr) 118px;align-items:center;gap:10px;padding:7px 8px;border-radius:var(--r-xs)}
.bar:hover{background:var(--surface)}
.bar__n{font-family:var(--font-mono);font-size:11px;color:var(--text-4);font-variant-numeric:tabular-nums}
.bar__name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__track{grid-column:1/-1;height:4px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bar__fill{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.bar__fill.is-good{background:var(--ok)}
.bar__val{font-size:12px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar__val em{font-style:normal;color:var(--text-4)}

.qtable{width:100%;border-collapse:collapse;font-size:13.5px}
.qtable th,.qtable td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.qtable th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);font-weight:700;white-space:nowrap}
.qtable td.num,.qtable th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qtable tbody tr:hover{background:var(--surface)}
.qtable .q-txt{color:var(--text-2);line-height:1.45}
.qtable .q-arg{font-size:11px;color:var(--text-4);margin-top:3px}
.qtable .q-wrong{color:var(--accent-text);font-weight:700}

.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filters select{
  padding:9px 12px;border:1px solid var(--line-mid);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text);font:inherit;font-size:13px;
}
.filters select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sched{display:flex;flex-direction:column;gap:6px}
.sched__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3);
  width:100%;padding:12px var(--sp-4);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);text-align:left;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.sched__row:hover:not([disabled]){border-color:var(--line-strong);background:var(--surface-2)}
.sched__row[disabled]{opacity:.55;cursor:default}
.sched__esito{font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sched__esito.is-pass{color:var(--ok)}
.sched__esito.is-fail{color:var(--accent-text)}
.sched__meta{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.sched__go{font-size:12px;color:var(--text-4);white-space:nowrap}

.review-q{
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--sp-3);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);
}
.review-q__n{font-family:var(--font-mono);font-size:12px;color:var(--text-4);font-variant-numeric:tabular-nums;padding-top:2px}
.review-q.is-wrong .review-q__n{color:var(--accent-text);font-weight:700}
.review-q__t{font-size:14.5px;line-height:1.5}
.review-q img{margin-top:var(--sp-3);max-height:150px;width:auto;border-radius:var(--r-xs)}
.review-q__meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-3)}

/* ---------- 27. Coach: consiglio e analisi -------------------------------- */
.advice{
  border:1px solid var(--accent-line);border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--accent-glow),transparent 62%),var(--surface);
  padding:clamp(20px,3vw,30px);
}
.advice__tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
.advice__title{font-size:clamp(1.24rem,2.5vw,1.7rem);font-weight:750;letter-spacing:-.025em;line-height:1.22;margin-top:10px}
.advice__text{color:var(--text-2);line-height:1.55;margin-top:10px;max-width:62ch}
.advice__more{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.advice__mini{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.advice__mini b{display:block;font-size:13.5px;letter-spacing:-.01em}
.advice__mini span{display:block;font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.45}
.advice__mini a{display:inline-block;font-size:12px;color:var(--accent-text);margin-top:8px;font-weight:650}

.profile__p{color:var(--text-2);line-height:1.62;margin-top:var(--sp-4);max-width:70ch}
.profile__p:first-of-type{margin-top:0}
.plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--sp-3);margin-top:var(--sp-5)}
.plan__step{padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.plan__day{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
.plan__txt{font-size:13.5px;line-height:1.5;margin-top:8px;color:var(--text-2)}
.plan__step a{display:inline-block;font-size:12px;color:var(--text);border-bottom:1px solid var(--accent-line);margin-top:10px}
.source-note{font-size:11.5px;color:var(--text-4);margin-top:var(--sp-4)}

/* ---------- 28. La mia patente: la strada delle tappe --------------------
   Su tutte le larghezze la strada è verticale: si legge come una lista e
   funziona identica col dito. La macchina è un marcatore che scorre. */
.road{position:relative;padding-left:56px}
@media (max-width:600px){.road{padding-left:44px}}
.road__line{
  position:absolute;left:23px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(to bottom,var(--line-strong) 0 10px,transparent 10px 22px);
}
@media (max-width:600px){.road__line{left:17px}}
.road__car{
  position:absolute;left:0;width:48px;height:30px;
  transform:translateY(-50%);transition:top 220ms var(--ease);
  filter:drop-shadow(0 0 12px rgba(229,35,46,.5));
  will-change:top;
}
@media (max-width:600px){.road__car{left:-4px;width:40px}}
.road__car svg{width:100%;height:auto;display:block}

.stop{position:relative;padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);min-height:76px}
.stop__dot{
  position:absolute;left:-40px;top:26px;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line-strong);background:var(--bg);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
@media (max-width:600px){.stop__dot{left:-34px}}
.stop__label{font-size:1.02rem;font-weight:700;letter-spacing:-.018em;color:var(--text-3)}
.stop__note{font-size:12.5px;color:var(--text-4);margin-top:4px;font-variant-numeric:tabular-nums}
.stop__kind{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-4);margin-top:8px;display:inline-block}

/* fatta: si illumina come un faro */
.stop.is-done .stop__dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),0 0 16px rgba(255,90,100,.55)}
.stop.is-done .stop__label{color:var(--text)}
.stop.is-done .stop__label::after{content:"\2713";color:var(--accent-text);margin-left:8px;font-weight:800}
/* corrente: dove sei adesso */
.stop.is-now .stop__dot{background:var(--bg);border-color:var(--accent-strong);box-shadow:0 0 0 4px var(--accent-glow)}
.stop.is-now .stop__label{color:var(--text)}
@media (prefers-reduced-motion:no-preference){
  .stop.is-now .stop__dot{animation:pulseStop 2.4s var(--ease) infinite}
}
@keyframes pulseStop{
  0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
  50%{box-shadow:0 0 0 9px rgba(229,35,46,.06)}
}

.stop__check{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--text-3);cursor:pointer}
.stop__check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.nextmove{
  border:1px solid var(--accent);border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--accent-glow),transparent 60%),var(--surface);
  padding:clamp(20px,3vw,30px);
}
.nextmove__tag{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
.nextmove__title{font-size:clamp(1.3rem,2.8vw,1.85rem);font-weight:750;letter-spacing:-.028em;margin-top:10px;line-height:1.2}
.nextmove__note{color:var(--text-3);font-size:13.5px;margin-top:8px}
.nextmove__prog{font-size:12px;color:var(--text-4);margin-top:var(--sp-4);font-variant-numeric:tabular-nums}

/* i pannelli-statistiche in mezzo alla strada */
.roadpanel{
  margin:var(--sp-5) 0;padding:clamp(18px,2.4vw,26px);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(18,21,26,.82);backdrop-filter:blur(10px);
}
.roadpanel__t{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);font-weight:700;margin-bottom:var(--sp-4)}

/* ---------- 41. Verifica su un argomento --------------------------------- */
/* Stessa impalcatura dell'esame, senza mappa e senza frecce: al loro posto la
   striscia dei trattini (non cliccabile) e un solo pulsante, "Prossima". */
.exam--verifica .run__pips{margin-top:var(--sp-5)}
.exam__nav--verifica{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  flex-wrap:wrap;margin-top:var(--sp-5);
}
.exam__nav--verifica [data-next]{margin-left:auto}
@media (max-width:520px){
  .exam__nav--verifica .kbdhint{display:none}
  .exam__nav--verifica [data-next]{width:100%;justify-content:center}
}

/* ---------- 42. Illustrazioni IoGuido (domande senza figura) -------------- */
/* Si distinguono a colpo d'occhio dalle figure ministeriali: cornice tratteggiata
   e cartiglio rosso che dice, ogni volta, che all'esame quell'immagine non c'è.
   Senza questo cartiglio l'aiuto diventerebbe una falsa aspettativa il giorno
   della prova. */
.qcard__fig--scena{
  max-width:420px;padding:var(--sp-3);
  border:1px dashed var(--accent-line);
  background:radial-gradient(90% 90% at 50% 20%,var(--accent-glow),transparent 72%);
}
.qcard__fig--scena img{
  display:block;width:100%;height:auto;max-height:260px;
  border-radius:var(--r-xs);
}
.qcard__scena-cap{
  margin-top:var(--sp-3);text-align:center;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--accent-text);line-height:1.45;
}
.qcard--esame .qcard__fig--scena img{max-height:300px}
@media (max-width:760px){
  .qcard__fig--scena{max-width:100%}
  .qcard__fig--scena img{max-height:220px}
}

/* ---------- 43. Ripasso errori: la lista si tocca ------------------------
   Le targhette per argomento erano scritte come decorazione e sembravano tali,
   mentre sono la scorciatoia più utile della schermata: ripassare dove sbagli
   davvero. Ora sono bottoni veri — 44px di altezza minima (sotto quella misura
   il dito sbaglia), stato al passaggio del mouse, stato alla pressione, e il
   numero in evidenza perché è il motivo per cui uno le guarda. */
.argchips{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.argchip{
  display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 10px 8px 18px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:var(--surface);color:var(--text);
  font-family:inherit;font-size:12px;font-weight:650;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.argchip:hover{border-color:var(--accent);background:var(--surface-2);color:var(--accent-text)}
.argchip:active{transform:translateY(1px)}
.argchip:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.argchip__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 8px;border-radius:var(--r-pill);
  background:var(--accent-glow);color:var(--accent-text);
  border:1px solid var(--accent-line);
  font-size:12.5px;font-weight:750;letter-spacing:0;
}
.argchip:hover .argchip__n{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.errlist__hint{color:var(--text-3);font-size:13.5px}
.qnav--start{justify-content:flex-start;gap:var(--sp-4)}
.qnav--fine{justify-content:flex-start;gap:var(--sp-3);flex-wrap:wrap}
/* "Svuota la lista" cancella lavoro: si vede che è un bottone e si vede che
   è quello diverso dagli altri, ma non urla finché non lo si sfiora. */
.btn--danger{color:var(--text-2)}
.btn--danger:hover{border-color:var(--accent);color:var(--accent-text);background:var(--surface-2)}
@media (max-width:520px){
  .argchip{width:100%;justify-content:space-between;padding-left:20px}
  .qnav--start .btn{width:100%;justify-content:center}
}

/* ---------- 44. Lettura ad alta voce (a)utopia ---------------------------
   Due comandi nella barra della domanda: ascolta e lettura automatica.
   Chi li usa legge con fatica, quindi qui il bersaglio è più largo del
   minimo (44px, non 40) e lo stato non è affidato al solo colore: mentre
   legge cambia l'icona (🔊 → ⏹) e `aria-pressed` diventa "true", così la
   stessa informazione arriva al dito, all'occhio e allo screen reader.
   Se il dispositivo non ha una voce italiana questi bottoni non esistono
   nel documento: non c'è niente da nascondere con il CSS. */
.iconbtn--say,.iconbtn--auto{min-width:44px;height:44px}
.iconbtn--say .say__icon{font-size:17px;line-height:1}
/* "auto" in minuscolo e stretto: è un interruttore di servizio, non deve
   competere con la domanda. Acceso, invece, si vede da lontano. */
.iconbtn--auto{
  padding:0 12px;font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);
}
.iconbtn--say.is-on,.iconbtn--auto.is-on{
  border-color:var(--accent);background:var(--accent-glow);color:var(--accent-text);
}
.iconbtn--say:focus-visible,.iconbtn--auto:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
/* Mentre legge il bordo respira piano: è l'unico segnale che si vede con la
   coda dell'occhio mentre si guarda il testo. Chi ha chiesto meno movimento
   al sistema operativo non lo vede — gli restano icona e stato ARIA. */
@media (prefers-reduced-motion:no-preference){
  .iconbtn--say.is-on{animation:sayPulse 1.6s var(--ease) infinite}
}
@keyframes sayPulse{
  0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}
  50%{box-shadow:0 0 0 5px transparent}
}

/* AUTOPIA — nuvole, cielo e superfici traslucide */
:root{--bg:#eef9fe;--bg-deep:#e5f5fc;--surface:#ffffff;--surface-2:#f4fbff;--surface-3:#dfedf4;--line:#cbe3ed;--line-mid:#b4d7e7;--line-strong:#8ebccf;--text:#17384e;--text-2:#44697d;--text-3:#51758a;--text-4:#5b7788;--accent:#1689c1;--accent-text:#0879ae;--accent-strong:#0f80b8;--accent-soft:#94d4ee;--accent-deep:#086f9e;--accent-on:#fff;--accent-glow:rgba(49,163,214,.16);--accent-line:rgba(28,146,197,.35);--danger:#bf4051;--danger-text:#a32939;--danger-soft:rgba(191,64,81,.10);--danger-line:rgba(191,64,81,.36);--ok:#0e815b;--ok-soft:rgba(14,129,91,.10);--ok-line:rgba(14,129,91,.45);--r-md:20px;--r-lg:28px;--shadow-md:0 18px 48px rgba(64,137,170,.13)}
html{scroll-behavior:smooth} body{background:radial-gradient(ellipse at 10% 5%,#fff 0,transparent 38%),radial-gradient(ellipse at 95% 12%,#d1effd 0,transparent 36%),linear-gradient(145deg,#f5fcff,#e7f7ff 52%,#f8fdff);color:var(--text);min-height:100vh}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(360px circle at var(--pointer-x,-1000px) var(--pointer-y,-1000px),rgba(255,255,255,.5),transparent 70%);pointer-events:none;z-index:0} main{position:relative} [hidden]{display:none!important}
.nav{top:12px;margin:12px auto 0;width:min(1450px,calc(100% - 32px));border:1px solid rgba(255,255,255,.92);border-radius:24px;background:rgba(255,255,255,.67);box-shadow:0 8px 35px rgba(71,137,168,.13),inset 0 1px #fff;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.nav__inner{max-width:none;min-height:72px;padding-inline:24px}.autopia-wordmark{white-space:nowrap;color:#166f9b;font-size:20px;font-weight:800;letter-spacing:.08em}.mark-orbit{font-size:23px;color:#45b6e5;margin-right:6px}.nav__menu{gap:clamp(12px,1.6vw,23px)}.nav__menu a:not(.btn){font-size:12px;letter-spacing:0;font-weight:650;color:#315c72;text-transform:none}.nav__menu a.nav-access{padding:11px 16px;border-radius:99px;background:#fff;box-shadow:0 3px 14px #a3d0df55}.nav__burger{border-radius:14px;background:rgba(255,255,255,.7);border-color:#cae4f1}.nav__burger span{background:#236a8d}
.footer{background:rgba(255,255,255,.35);border-color:#d5ebf4}.autopia-footer{padding-block:45px;display:flex;align-items:center;gap:25px;flex-wrap:wrap}.autopia-footer p{color:var(--text-3);margin-right:auto}.autopia-footer>a:not(.autopia-wordmark){font-size:13px;color:var(--text-2)}.footer__bottom{border-color:#cae5f1}.autopia-mascot{position:fixed;z-index:100;right:22px;bottom:24px;display:flex;align-items:center;gap:9px;padding:10px 15px 10px 11px;border:1px solid white;border-radius:99px;background:rgba(255,255,255,.82);box-shadow:0 10px 35px rgba(36,112,151,.22);backdrop-filter:blur(18px);color:#126f9e}.autopia-mascot span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#bce9fb;font-size:22px}.autopia-mascot small{font-weight:800;letter-spacing:.03em}
.autopia-home{overflow:hidden}.autopia-hero{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;min-height:min(740px,calc(100vh - 120px));gap:35px;padding-block:75px}.autopia-kicker{font-size:11px;font-weight:800;letter-spacing:.18em;color:#2381a9}.autopia-kicker span,.hero-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39b3d7;margin-right:8px}.hero-copy h1,.access-hero h1{margin:26px 0 23px;color:#173e59;font-weight:750;letter-spacing:-.065em;line-height:1.01;font-size:clamp(3.5rem,6.7vw,7rem)}.hero-copy h1 em,.access-hero h1 em{font-style:normal;color:#417f9a}.hero-copy>p:not(.autopia-kicker),.access-hero>p:not(.autopia-kicker){font-size:clamp(16px,1.35vw,19px);line-height:1.7;max-width:510px;color:#466170}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.a-button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:15px 20px;border:1px solid #fff;border-radius:15px;font-size:14px;font-weight:750;transition:transform .2s,box-shadow .2s,background .2s}.a-button:hover,.quick-card:hover,.topic-actions a:hover{transform:translateY(-3px);box-shadow:0 12px 27px #8dc9e255}.a-button.primary{color:white;background:#148cc4;border-color:#148cc4;box-shadow:0 8px 25px #5cb6dc55}.a-button.secondary{background:rgba(255,255,255,.7);color:#286889}.hero-small{margin-top:35px;font-size:12px;color:#66869a}.hero-art{min-height:535px;position:relative;display:grid;place-items:center}.hero-art:before{content:"";position:absolute;width:min(100%,510px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0%,#c9edfb 63%,transparent 70%);filter:drop-shadow(0 25px 30px #9dcfe44a)}.hero-car{width:88%;position:relative;z-index:2;filter:drop-shadow(0 25px 16px #488ca138);animation:float-car 6s ease-in-out infinite}.orbit{position:absolute;width:82%;aspect-ratio:1;border:1px solid #ffffffab;border-radius:50%}.orbit-b{transform:scale(1.17);border-color:#fff9}.cloud{position:absolute;z-index:1;width:145px;height:45px;border-radius:60px;background:rgba(255,255,255,.78);filter:blur(7px)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:65px;height:65px;left:22px;bottom:4px}.cloud:after{width:75px;height:75px;left:67px;bottom:0}.cloud-a{top:22%;left:3%}.cloud-b{right:1%;bottom:20%;transform:scale(1.4)}.floating-note{position:absolute;z-index:3;padding:17px 20px;border:1px solid #fff;border-radius:18px;background:#ffffffb8;backdrop-filter:blur(18px);box-shadow:0 14px 38px #6eb1ca25}.floating-note span{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;color:#71a0b7;margin-bottom:8px}.floating-note strong{font-size:14px;line-height:1.25;color:#315f76}.note-one{left:0;top:14%}.note-two{right:0;bottom:14%}.art-caption{position:absolute;bottom:2%;font-size:9px;letter-spacing:.16em;color:#80a5b6;font-weight:700}.quick-section{padding-block:45px 80px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:28px}.section-heading h2,.journey-glass h2{font-size:clamp(2.2rem,3.7vw,3.8rem);line-height:1.1;letter-spacing:-.05em;margin-top:14px}.section-heading>p{color:#6c8fa1}.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.quick-card,.access-card{position:relative;min-height:210px;padding:26px;border-radius:24px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.58);box-shadow:0 10px 35px #9ac7da29;backdrop-filter:blur(18px);transition:transform .2s,box-shadow .2s}.quick-card{display:flex;flex-direction:column}.quick-card.main-card{background:linear-gradient(135deg,#ffffffd9,#c4eefaaf)}.quick-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#e3f6fd;color:#2996c1;font-size:22px;margin-bottom:20px}.quick-label{font-size:9px;letter-spacing:.13em;font-weight:800;color:#668fa5}.quick-card strong{font-size:22px;letter-spacing:-.035em;margin-top:7px}.quick-card p{color:#648495;font-size:14px;line-height:1.55;margin-top:8px}.quick-arrow{position:absolute;right:25px;bottom:25px;color:#1689bd;font-size:20px}.journey-section{padding-bottom:45px}.journey-glass{padding:clamp(30px,5vw,70px);border-radius:30px;background:rgba(255,255,255,.65);border:1px solid #fff;display:flex;justify-content:space-between;align-items:end;gap:25px}.journey-glass p:not(.autopia-kicker){max-width:510px;color:#638597;line-height:1.65;margin-top:20px}.access-page{padding-block:90px}.access-hero h1{font-size:clamp(3rem,6vw,5.5rem)}.access-hero .a-button{margin-top:28px}.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:60px}.access-card span{font-size:25px;color:#2b9ccb}.access-card h2{font-size:23px;margin:15px 0}.access-card p{color:#4b6877;line-height:1.6}.access-card strong,.access-card>a:not(.a-button){display:block;margin-top:18px;color:#146b93;font-size:13px}.calendar-empty{margin-top:45px;min-height:0}.calendar-empty .a-button{margin-top:25px}
.card,.stats,.topic,.sheet,.chat,.empty,.exam__side,.tabs,.access-card{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.95);box-shadow:0 12px 35px #6eafca1c;backdrop-filter:blur(14px)}.card,.stats,.topic,.sheet,.chat,.empty,.exam__side,.tabs{border-radius:20px}.sheet__head{background:rgba(221,245,255,.45)}.topic__meter{background:#d1e8f3}.topic--actions{gap:12px}.topic-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}.topic-actions a{font-size:12px;font-weight:700;border-radius:10px;padding:10px 12px;transition:.2s}.topic-start{background:#1389c0;color:#fff}.topic-read{background:#e5f5fc;color:#216c90}.btn{border-radius:13px;transition:transform .2s,box-shadow .2s,background .2s}.btn:hover{transform:translateY(-2px)}.btn--accent{box-shadow:0 6px 20px #48b3d43d}.tab[aria-selected=true]{background:#1689c1}.qnav a[href*="la-mia-patente"],body[data-page="quiz"] [data-tab="allenamento"],body[data-page="quiz"] [data-tab="errori"]{display:none!important}
@keyframes float-car{50%{transform:translateY(-12px)}}
@media(max-width:1050px){.nav__menu{gap:12px}.nav__menu a:not(.btn){font-size:11px}.nav__inner{padding-inline:15px}.autopia-wordmark{font-size:17px}}
@media(max-width:900px){.nav{width:calc(100% - 24px)}.nav__inner{min-height:64px}.nav__menu{background:rgba(246,252,255,.95)!important;border:1px solid white!important;border-radius:20px!important;box-shadow:0 20px 45px #6baac934!important;backdrop-filter:blur(24px)}.nav__menu a:not(.btn){font-size:14px!important;color:#295973!important}.autopia-hero{grid-template-columns:1fr;padding-block:65px 35px;gap:10px;min-height:0}.hero-copy h1{font-size:clamp(3.6rem,10vw,5.5rem)}.hero-art{min-height:430px}.quick-grid{grid-template-columns:repeat(2,1fr)}.access-grid{grid-template-columns:1fr}.access-page{padding-block:65px}}
@media(max-width:580px){.nav{top:8px;margin-top:8px}.nav__inner{min-height:60px}.nav__menu{padding:14px 20px!important}.hero-copy h1{font-size:clamp(3.2rem,12.3vw,4.5rem);margin:22px 0 18px}.autopia-hero{padding-top:55px}.hero-copy>p:not(.autopia-kicker){font-size:16px}.hero-actions{display:grid}.hero-art{min-height:330px}.hero-car{width:95%}.floating-note{padding:11px 12px}.floating-note strong{font-size:11px}.floating-note span{font-size:8px}.note-one{top:9%}.note-two{bottom:8%}.art-caption{font-size:8px;bottom:0}.quick-section{padding-block:40px 55px}.section-heading{display:block}.section-heading>p{margin-top:10px}.quick-grid{grid-template-columns:1fr 1fr;gap:10px}.quick-card{min-height:190px;padding:18px}.quick-card strong{font-size:18px}.quick-card p{font-size:12px}.quick-arrow{right:16px;bottom:16px}.quick-label{font-size:8px}.journey-glass{display:block}.journey-glass .a-button{margin-top:24px}.autopia-mascot{bottom:16px;right:14px}.autopia-mascot small{font-size:11px}.access-grid{gap:10px}.access-page{padding-block:60px}.page-head{padding-top:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-car{animation:none}.quick-card,.a-button,.btn{transition:none}}
.scroll-story{position:relative;height:190vh;margin-block:30px 50px}.story-sticky{position:sticky;top:100px;height:min(72vh,650px);overflow:hidden;border-radius:30px;border:1px solid white;background:#dff3fc;box-shadow:0 20px 60px #4c9cc72b}.story-video{width:100%;height:100%;object-fit:cover}.story-copy{position:absolute;inset:auto 0 0;padding:clamp(24px,5vw,60px);color:#fff;background:linear-gradient(transparent,rgba(12,64,91,.76))}.story-copy .autopia-kicker{color:#d6f5ff}.story-copy h2{font-size:clamp(2rem,4vw,4rem);line-height:1.05;letter-spacing:-.045em;margin-top:12px}.story-copy p:not(.autopia-kicker){margin-top:12px;max-width:400px;line-height:1.5}.story-copy span{display:block;font-size:9px;letter-spacing:.14em;margin-top:20px;color:#e3f7ff}@media(max-width:580px){.scroll-story{height:165vh;margin-block:10px 20px}.story-sticky{top:90px;height:68vh;max-height:600px}.story-video{object-position:center}.story-copy{padding:24px}}@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-sticky{position:relative;top:auto;height:400px}}
/* Area di studio in anteprima: dati locali, interfacce senza login. */
body.autopia-review .tabs,body.autopia-review main>section[data-dim-on-focus]:not(.page-head){display:none!important}
.kpi,.advice,.advice__mini,.bar,.stop,.sched__row,.chat__head,.msg__bubble,.faq__item,.filters select{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.95);border-radius:18px;box-shadow:0 10px 30px #75acc921;backdrop-filter:blur(14px)}.kpi{padding:22px}.bar{padding:13px;margin-bottom:6px}.chat__head{border-radius:18px 18px 0 0}.chat__input{background:#fff;color:#17384e}.chip{border-radius:99px;background:rgba(255,255,255,.8);border-color:#c6e6f3}.msg--me .msg__bubble{background:#d8f2fc}.faq__item{margin-bottom:10px}.calendar-top{display:flex;justify-content:space-between;align-items:end;gap:20px}.calendar-top h1{font-size:clamp(2.6rem,5vw,4.6rem);letter-spacing:-.055em;line-height:1.05;margin:15px 0}.calendar-top p:not(.autopia-kicker),.calendar-panel p{color:#5d8193;line-height:1.6}.calendar-switch{display:flex;gap:4px;padding:5px;border:1px solid #fff;border-radius:15px;background:#ffffffa3;white-space:nowrap}.calendar-switch button{border:0;padding:11px 14px;border-radius:11px;background:transparent;color:#497183;cursor:pointer;font-size:13px;font-weight:700}.calendar-switch button.is-active{background:#1689c1;color:#fff}.calendar-notice{margin-top:30px;padding:14px 18px;border:1px solid #cce7f4;border-radius:15px;background:#ffffffaa;color:#3b6d85;font-size:13px;line-height:1.55}.calendar-dashboard{display:grid;grid-template-columns:1.2fr .8fr;gap:15px;margin-top:20px}.calendar-panel{padding:28px;border-radius:24px;border:1px solid #fff;background:#ffffffae;box-shadow:0 12px 35px #6aaac322;backdrop-filter:blur(18px)}.calendar-next{min-height:210px;background:linear-gradient(135deg,#ffffffde,#c9efffd9)}.calendar-label{display:block;font-size:10px;letter-spacing:.14em;font-weight:800;color:#448dad}.calendar-panel h2{font-size:25px;letter-spacing:-.03em;margin:16px 0 8px}.calendar-next [data-cal-next] span{display:block;color:#538ca7;margin-top:12px;font-size:13px}.calendar-counts{display:flex;gap:45px;margin:20px 0}.calendar-counts strong{display:block;font-size:34px;color:#167eab}.calendar-counts span{font-size:13px;color:#698b9b}.calendar-history{grid-column:1/-1}.calendar-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.calendar-demo-badge{font-size:11px;font-weight:700;padding:7px 10px;border-radius:99px;background:#e1f4fb;color:#237497}.calendar-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-top:1px solid #d5ebf3}.calendar-row strong,.calendar-row span,.calendar-row small{display:block}.calendar-row strong{font-size:15px}.calendar-row span,.calendar-row small{color:#668b9c;font-size:12px;margin-top:5px}.calendar-row-side{display:flex;flex-direction:column;align-items:end;gap:10px}.calendar-row-side button{border:0;background:none;color:#1689c1;font-weight:700;cursor:pointer;font-size:12px}.calendar-admin{grid-column:1/-1}.calendar-admin form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}.calendar-admin label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#46768b}.calendar-admin label span{font-weight:400}.calendar-admin input{width:100%;padding:12px;border:1px solid #c4e5f1;border-radius:12px;background:#fff;color:#17384e}.calendar-admin button[type=submit]{align-self:end;justify-content:center;cursor:pointer}.calendar-form-status{font-size:13px;margin-top:12px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1689c1;outline-offset:3px}@media(max-width:680px){.calendar-top{display:block}.calendar-switch{margin-top:20px;width:max-content;max-width:100%}.calendar-dashboard{grid-template-columns:1fr}.calendar-history,.calendar-admin{grid-column:auto}.calendar-admin form{grid-template-columns:1fr}.calendar-panel{padding:21px}}
.autopia-mascot{border:1px solid white;cursor:pointer;font:inherit}.autopia-assistant-panel{position:fixed;z-index:99;right:22px;bottom:95px;width:min(420px,calc(100vw - 28px));height:min(650px,calc(100vh - 150px));display:flex;flex-direction:column;border:1px solid white;border-radius:24px;overflow:hidden;background:#eef9fedf;box-shadow:0 20px 70px #376a8955;backdrop-filter:blur(24px)}.assistant-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#ffffffd9}.assistant-bar strong,.assistant-bar small{display:block}.assistant-bar small{color:#628699;font-size:11px}.assistant-bar button{border:0;background:#e6f6fc;border-radius:50%;width:34px;height:34px;color:#26617b;font-size:22px;cursor:pointer}.autopia-assistant-panel iframe{display:block;flex:1;width:100%;border:0;background:#eff9fd;min-height:0}.assistant-full{padding:10px 18px;background:#ffffffd9;color:#167eaa;font-size:12px;font-weight:700}.autopia-embedded .nav,.autopia-embedded .footer,.autopia-embedded .autopia-mascot,.autopia-embedded .page-head,.autopia-embedded #faq,.autopia-embedded main>section:not(.wrap){display:none!important}.autopia-embedded main>section.wrap{width:100%;max-width:none;padding:8px}.autopia-embedded .chat{border-radius:15px}.autopia-embedded .chat__log{min-height:300px}.autopia-embedded .chat__head{padding:14px}.autopia-embedded .tabs--chat{padding:8px}.autopia-embedded .chat__suggest{padding:8px}.autopia-embedded .chat__form{padding:10px}@media(max-width:580px){.autopia-assistant-panel{right:14px;bottom:86px;height:min(620px,calc(100vh - 130px))}}
.story-play{margin-top:16px;padding:10px 15px;border:1px solid #ffffffad;border-radius:11px;background:#ffffffd9;color:#195a79;font-weight:700;cursor:pointer}.story-play:hover{background:#fff}
.calendar-inline-label{display:block;font-size:11px;color:#537e90;margin-top:12px}.calendar-inline-label input{display:block;margin:5px 0 7px;border:1px solid #c4e5f1;border-radius:8px;background:#fff;color:#17384e;padding:8px;max-width:100%}[data-cal-save]{border:0;padding:0;background:none;color:#1689c1;cursor:pointer;font-size:12px;font-weight:700}
.story-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.story-links a{padding:8px 10px;border-radius:9px;border:1px solid #ffffff9c;color:#fff;font-size:12px;font-weight:700;background:#ffffff20}.story-links a:hover{background:#ffffff42}

/* Menu AUTOPIA: auto-personaggio, pulsante accessibile e senza immagine esterna. */
.nav__burger{position:relative;width:76px;height:54px;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;transition:transform .2s ease,filter .2s ease}
.nav__burger span{display:none}
.nav__burger::before{content:"";display:block;width:76px;height:54px;background:center/contain no-repeat url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgNzIiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYm9keSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNhNWRlZjQiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0id2luZCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiNlYWZjZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM3OWM1ZTUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZWxsaXBzZSBjeD0iNjAiIGN5PSI2NSIgcng9IjQ2IiByeT0iNCIgZmlsbD0iIzIzNzM5OCIgb3BhY2l0eT0iLjEzIi8+PHJlY3QgeD0iMTQiIHk9IjQyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTgiIHJ4PSI1IiBmaWxsPSIjMjg1MjY5Ii8+PHJlY3QgeD0iOTQiIHk9IjQyIiB3aWR0aD0iMTIiIGhlaWdodD0iMTgiIHJ4PSI1IiBmaWxsPSIjMjg1MjY5Ii8+PHBhdGggZD0iTTI1IDMxIDMxIDE3IFEzNCA3IDQ3IDYgTDcyIDYgUTg1IDcgODkgMTcgTDk1IDMxIFExMDQgMzMgMTA2IDQzIEwxMDUgNTMgUTEwNCA1OSA5NyA2MCBMMjMgNjAgUTE2IDU5IDE1IDUzIEwxNCA0MyBRMTYgMzMgMjUgMzFaIiBmaWxsPSJ1cmwoI2JvZHkpIiBzdHJva2U9IiM2N2I4ZDgiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0zMiAzMCAzNiAxOSBRMzggMTMgNDggMTIgTDcyIDEyIFE4MSAxMyA4NCAxOSBMODggMzBaIiBmaWxsPSJ1cmwoI3dpbmQpIiBzdHJva2U9IiM3Y2M3ZTIiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTM3IDIwIFE0MyAxNiA1MCAxOCBNNjkgMTggUTc2IDE2IDgyIDIwIiBmaWxsPSJub25lIiBzdHJva2U9IiMzYTdkOWEiIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48ZWxsaXBzZSBjeD0iNDYiIGN5PSIyMy41IiByeD0iNi41IiByeT0iNS41IiBmaWxsPSIjZmZmIi8+PGVsbGlwc2UgY3g9Ijc0IiBjeT0iMjMuNSIgcng9IjYuNSIgcnk9IjUuNSIgZmlsbD0iI2ZmZiIvPjxjaXJjbGUgY3g9IjQ3LjciIGN5PSIyNC4xIiByPSIyLjgiIGZpbGw9IiMyMDU3NzciLz48Y2lyY2xlIGN4PSI3NS43IiBjeT0iMjQuMSIgcj0iMi44IiBmaWxsPSIjMjA1Nzc3Ii8+PGNpcmNsZSBjeD0iNDguNCIgY3k9IjIzLjIiIHI9Ii44IiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iNzYuNCIgY3k9IjIzLjIiIHI9Ii44IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTM4IDQ3IFE2MCA1OCA4MiA0NyBRNzggNTggNjAgNTggUTQyIDU4IDM4IDQ3WiIgZmlsbD0iIzI3NjU4MCIvPjxwYXRoIGQ9Ik00MiA0OCBRNjAgNTQgNzggNDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0yMiAzOCBRMjggMzUgMzQgMzcgTDMzIDQzIFEyNyA0NSAyMSA0MlogTTg2IDM3IFE5MiAzNSA5OCAzOCBMOTkgNDIgUTkzIDQ1IDg3IDQzWiIgZmlsbD0iI2U4ZmJmZiIgc3Ryb2tlPSIjNzVjNWUyIiBzdHJva2Utd2lkdGg9IjEiLz48cGF0aCBkPSJNNDIgMzQgUTYwIDMwIDc4IDM0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgb3BhY2l0eT0iLjgiLz48L3N2Zz4=");filter:drop-shadow(0 3px 4px rgba(50,128,165,.18));transition:transform .2s ease}
.nav__burger:hover::before{transform:translateY(-3px) rotate(-3deg)}
.nav__burger[aria-expanded="true"]::before{transform:translateY(-2px) rotate(3deg);filter:drop-shadow(0 3px 6px rgba(22,137,193,.45))}
.nav__burger[aria-expanded="true"]::after{content:"×";position:absolute;right:0;top:1px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#1689c1;color:white;font-weight:800;font-size:14px;line-height:1}
.nav__burger:focus-visible{outline:3px solid #1689c1;outline-offset:3px;border-radius:12px}
@media(prefers-reduced-motion:reduce){.nav__burger,.nav__burger::before{transition:none}.nav__burger:hover::before,.nav__burger[aria-expanded="true"]::before{transform:none}}

/* AUTOPIA Glass 7. The sky is visible through shared, refractive surfaces.
   Explicit brand brief: glass and blue take priority over generic flat-app rules. */
:root{--text:#153d53;--text-2:#31566a;--text-3:#3f6275;--text-4:#3e6073;--accent:#0878ac;--accent-text:#06638f;--accent-strong:#066898;--accent-deep:#075c84;--glass:rgba(245,252,255,.34);--glass-border:rgba(255,255,255,.9);--glass-shadow:0 20px 55px -24px #346b9a50,inset 0 1px 0 #fff,inset 0 -1px 0 #7abbd83d;--nav-h:76px}
html{scroll-padding-top:110px}
body{background:#c6e8f8;isolation:isolate;overflow-x:clip}
body:before{z-index:-1;background:radial-gradient(ellipse 800px 420px at 5% 12%,#ffffffed 15%,#fff0 70%),radial-gradient(ellipse 500px 330px at 92% 35%,#ffffffed 10%,#fff0 65%),radial-gradient(ellipse 580px 260px at 20% 88%,#ffffffed,#fff0 70%),linear-gradient(135deg,#b4dcf3,#ddf3ff 48%,#a8d4f0);transform:none}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(380px circle at var(--pointer-x,-900px) var(--pointer-y,-900px),#ffffffbd,transparent 75%)}
.sky-environment{position:fixed;inset:-10%;z-index:-1;pointer-events:none;overflow:hidden;opacity:.7}
.sky-cloud{position:absolute;width:65vw;height:25vw;min-height:130px;border-radius:50%;background:radial-gradient(ellipse,#fff 10%,#ffffffaa 35%,#fff0 70%);filter:blur(10px)}
.sky-cloud:nth-child(1){top:17%;left:-20%;transform:rotate(-12deg)}
.sky-cloud:nth-child(2){top:54%;right:-24%;transform:rotate(15deg)}
.sky-cloud:nth-child(3){bottom:-7%;left:5%;width:90vw}
:is(.cockpit,.nav,.quick-card,.journey-glass,.calendar-panel,.calendar-notice,.card,.stats,.topic,.sheet,.chat,.empty,.exam__side,.tabs,.kpi,.advice,.advice__mini,.sched__row,.faq__item,.access-card,.autopia-assistant-panel){background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(26px) saturate(155%);backdrop-filter:blur(26px) saturate(155%)}
:is(.cockpit,.quick-card,.journey-glass,.calendar-panel,.card,.kpi,.topic,.sheet){background-image:linear-gradient(135deg,#ffffff6b,#ffffff0a 48%,#a9dcf41c 75%,#ffffff4a)}
.nav{z-index:1100;width:min(1450px,calc(100% - 32px));border-radius:24px;background:rgba(244,252,255,.55)}
.nav__inner{position:relative;padding-inline:25px;min-height:72px}
.autopia-wordmark{display:inline-flex;align-items:center;gap:9px;letter-spacing:.035em;font-size:20px;font-weight:850;color:#185570}
.mark-orbit{font-size:0;width:25px;height:25px;border:6px solid #1686b8;border-top-color:#fff;border-radius:50%;transform:rotate(-25deg);margin-right:0;box-shadow:0 2px 6px #4e9ac92b}
.nav__menu a:not(.btn){font-size:12px;min-height:44px;display:flex;align-items:center;position:relative}
.nav__menu a[aria-current="page"]{color:#075b82;background:#ffffff70;border-radius:12px;padding-inline:11px}
.nav__menu a.nav-access{background:#ffffff7d;box-shadow:inset 0 1px #fff,0 4px 14px #3c81aa16;border:1px solid #fff}
.cockpit{position:relative;margin-top:28px;border-radius:34px;overflow:hidden;padding:0 40px}
.cockpit-top,.cockpit-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;color:#345e75;padding:20px 0;border-bottom:1px solid #ffffffa1}
.cockpit-top>span:first-child{display:flex;align-items:center;gap:9px;font-weight:650}
.status-light{width:7px;height:7px;background:#087aaa;border-radius:50%;box-shadow:0 0 0 4px #ffffff80}
.cockpit-bottom{padding:17px 0;border:0;border-top:1px solid #ffffff94;font-size:11px}
.cockpit-bottom a{font-weight:650;color:#205975}
.autopia-hero{display:grid;grid-template-columns:1fr 1.06fr;gap:0;min-height:480px;padding:20px 0 24px;align-items:center}
.hero-copy{position:relative;z-index:3;padding-block:14px}
.autopia-kicker{font-size:10px;letter-spacing:.13em;font-weight:750;color:#3b6279}
.hero-copy h1{font-size:clamp(44px,5.2vw,76px);line-height:1.04;letter-spacing:-.06em;margin:24px 0 20px;color:#194b66}
.hero-copy h1 em{color:#187fae}
.hero-copy>p:not(.autopia-kicker){font-size:16px;line-height:1.65;color:#355e74}
.hero-actions{gap:10px;margin-top:26px;flex-direction:column;align-items:flex-start}
.a-button{min-height:48px;cursor:pointer;border-radius:15px;padding:13px 20px;line-height:1.3;font-size:13px;gap:30px;font-family:inherit}
.a-button.primary{background:linear-gradient(145deg,#0e82b6,#096f9f);border:1px solid #ffffffb0;color:#fff;box-shadow:0 7px 18px #146a9b2e,inset 0 1px #ffffff5c}
.a-button.secondary{color:#1c5876;background:#ffffff54;border:1px solid #ffffffed;box-shadow:inset 0 1px #fff,0 5px 14px #468bad0a}
.hero-copy .hero-small{font-size:11px!important;margin-top:24px;color:#41677b!important}
.hero-dot{width:5px;height:5px;background:#2387ac}
.hero-art{height:100%;min-height:420px;position:relative;isolation:isolate}
.hero-art:before{display:none}
.car-halo{position:absolute;inset:10% 2% 12%;border-radius:50%;background:radial-gradient(ellipse,#ffffffd9,#d4f2ff3b 60%,transparent 75%);filter:blur(8px)}
.hero-orbit{position:absolute;inset:19% 0 25%;border:1px solid #ffffffbd;border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 0 24px #ffffff14,0 0 0 25px #ffffff45}
.hero-road{position:absolute;bottom:19%;left:-15%;width:130%;height:70px;border:1px solid #fff7;border-radius:50%;transform:rotate(-12deg);background:linear-gradient(#ffffff28,#ffffffc9);box-shadow:0 12px 22px #569ec41a}
.hero-car{position:relative;width:110%;height:auto;max-width:none;z-index:2;margin-left:-5%;filter:drop-shadow(0 22px 13px #37749a26);animation:none;pointer-events:none}
.floating-note{background:rgba(245,253,255,.5);border:1px solid #fff;border-radius:20px;box-shadow:inset 0 1px #fff,0 12px 30px #528bad22;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:17px 20px}
.note-one{left:auto;right:-8px;top:auto;bottom:3%;width:250px;z-index:3}
.floating-note span{font-size:11px;color:#315a70;margin-bottom:8px}
.floating-note strong{font-size:16px;color:#214e65}
.floating-note p{font-size:12px;color:#3e6479;margin-top:5px}
.floating-note button{padding:8px 0 0;border:0;background:none;color:#076c9a;font-size:12px;font-weight:750;min-height:36px;cursor:pointer;display:flex;align-items:center;gap:20px}
.floating-note button span{font-size:14px;margin:0;color:inherit}
.art-caption{font-size:10px;bottom:2%;left:4%;color:#315a70;letter-spacing:.08em}
.quick-section{padding-block:42px 28px;scroll-margin-top:110px}
.section-heading{margin-bottom:20px;align-items:center}
.section-heading h2{font-size:clamp(25px,3vw,37px);margin-top:8px;letter-spacing:-.045em}
.section-heading>p{font-size:12px;color:#3d6276}
.quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quick-card{border-radius:23px;min-height:160px;padding:22px 24px;overflow:hidden}
.quick-card:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent)}
.quick-card.main-card{background:linear-gradient(135deg,#ffffff85,#8ed4f32b)}
.quick-icon{background:none;border-radius:0;margin-bottom:10px;width:auto;height:23px;display:block;font-size:24px;color:#1577a3}
.quick-label{font-size:11px;color:#3a647a;letter-spacing:.03em}
.quick-card strong{font-size:22px;margin-top:7px;color:#194c65}
.quick-card p{font-size:12px;color:#41657a;margin-top:6px;max-width:85%}
.quick-arrow{font-size:18px;right:21px;bottom:20px;color:#1978a2}
.journey-section{padding-top:32px;padding-bottom:80px}
.journey-glass{padding:40px;border-radius:30px}
.journey-glass h2{font-size:clamp(30px,4vw,48px);margin-top:14px}
.journey-glass p:not(.autopia-kicker){color:#365d73;font-size:14px}
.page-head .display{font-size:clamp(32px,4.3vw,56px);line-height:1.08}
.page-head .lede{max-width:680px;color:#365e74}
.calendar-next{background:linear-gradient(135deg,#ffffff94,#85d2f440)}
.calendar-top p:not(.autopia-kicker),.calendar-panel p,.calendar-next [data-cal-next] span,.calendar-row span,.calendar-row small,.calendar-counts span{color:#3b6277}
.calendar-label{color:#2f6682}
.calendar-switch,.tabs{background:#ffffff42;border:1px solid #fff;box-shadow:inset 0 1px #fff}
.calendar-switch button,.tab,.chip{min-height:44px}
.calendar-switch button.is-active,.tab[aria-selected=true]{background:#0876a7;color:white;box-shadow:inset 0 1px #ffffff55}
.calendar-row-side button,[data-cal-save]{min-height:44px;color:#086992;font-size:13px}
.topic-start{background:#0876a7;min-height:44px;display:inline-flex;align-items:center}
.topic-read{background:#ffffff83;color:#1b5875;border:1px solid #fff;min-height:44px;display:inline-flex;align-items:center}
.chat__head,.msg__bubble,.advice__mini,.bar{background:#ffffff63;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:#fff}
.chat__head{box-shadow:none}
.avatar{background:transparent url('../autopia-ai-v5-264.png') center/contain no-repeat!important;color:transparent!important;border-radius:0;border:0;width:64px;height:48px;flex-shrink:0}
.avatar--sm{width:44px;height:36px}
.chat__input,.filters select,.calendar-admin input{background:#ffffffbf;color:#173f55}
.chat__log{scrollbar-width:thin}
.chat__head .badge{white-space:normal;font-size:10px}
.btn--accent{background:#0876a7;border-color:#ffffffc7;color:#fff}
.chip{color:#285c76;background:#ffffff83;border:1px solid #fff}
.tab[aria-selected=false],.calendar-switch button:not(.is-active){color:#2f5970}
.btn[disabled],button[disabled],button[aria-busy=true]{opacity:.55;cursor:wait;transform:none!important;box-shadow:none}
button[disabled]{cursor:not-allowed}
.a-button:active,.btn:active,.quick-card:active,.chip:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 6px #14577b20}
:is(a,button,input,textarea,select):focus-visible{outline:3px solid #075c89;outline-offset:4px}
.scroll-story{height:250svh;margin-block:35px 0}
.story-sticky{top:105px;height:min(73svh,680px);border-radius:32px;background:#c4e5f5;isolation:isolate}
.story-video{position:absolute;inset:0;z-index:-2;object-position:center 38%;opacity:.78}
.story-sticky:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#dcf4ff80,transparent 75%)}
.story-topline{position:absolute;top:23px;left:28px;right:28px;display:flex;justify-content:space-between;gap:10px;font-size:9px;font-weight:700;color:#18475f}
.story-topline span:last-child{background:#ffffffd9;padding:6px 9px;border-radius:9px;font-size:9px;font-weight:500}
.story-copy{position:absolute;inset:auto auto 30px 30px;width:min(430px,calc(100% - 60px));padding:26px;border:1px solid #fff;border-radius:25px;background:#f0fbff82;color:#153f58;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.story-copy .autopia-kicker{color:#325e78;font-size:10px}
.story-copy h2{font-size:clamp(26px,3.5vw,44px);margin-top:15px}
.story-copy p:not(.autopia-kicker){font-size:14px;color:#31576d}
.story-copy .a-button{margin-top:18px}
.story-copy span{display:inline;margin:0;font-size:14px;letter-spacing:0;color:inherit}
.story-progress{display:flex;gap:6px;margin-top:20px}
.story-progress i{width:28px;height:3px;background:#6196b14a;border-radius:5px}
.story-progress i.is-active{background:#0876a7;width:48px}
.story-play{position:absolute;right:25px;bottom:24px;margin:0;background:#ffffffbd;color:#194f6d;min-height:44px;z-index:5}
.story-video-status{position:absolute;top:70px;left:28px;right:28px;font-size:12px;color:#153e56;background:#ffffffde;border-radius:10px;padding:10px}
.story-video-status:empty{display:none}
.story-car{position:absolute;right:5%;bottom:12%;width:38%;pointer-events:none;transform:translateX(calc(var(--journey-progress,0) * -35px)) rotate(calc(var(--journey-progress,0) * -6deg))}
.story-accessible{display:flex;flex-wrap:wrap;gap:12px;padding-top:18px;font-size:12px;align-items:center}
.story-accessible p{width:100%;color:#3b6177;margin-bottom:0}
.story-accessible a{padding:10px 14px;min-height:44px;background:#ffffff62;border:1px solid #fff;border-radius:12px;color:#205772}
.autopia-mascot{z-index:1000;bottom:max(18px,env(safe-area-inset-bottom));right:20px;width:100px;height:88px;padding:0 0 6px;display:flex;flex-direction:column;gap:0;border-radius:25px;background:#ffffff76;border:1px solid #fff;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.autopia-mascot img{width:96px;height:65px;object-fit:contain;filter:drop-shadow(0 4px 3px #23688f20);transition:transform .2s}
.autopia-mascot small{font-size:9px;color:#195c7c;letter-spacing:.06em}
.autopia-mascot:hover img{transform:translateY(-4px) rotate(-3deg)}
.autopia-assistant-panel{position:fixed;inset:auto 22px 115px auto;margin:0;padding:0;width:min(440px,calc(100vw - 28px));height:min(720px,calc(100dvh - 155px));max-width:none;max-height:none;border-radius:27px;color:var(--text);overflow:hidden}
.autopia-assistant-panel[open]{display:flex;flex-direction:column}
.autopia-assistant-panel::backdrop{background:#4883a431;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.assistant-bar{padding:15px 20px;background:#ffffff6b;border-bottom:1px solid #fff}
.assistant-bar small{color:#3b657a;font-size:11px;margin-top:3px}
.assistant-bar button{width:44px;height:44px;font-size:24px;background:#ffffff75;border:1px solid #fff}
.assistant-full{background:#ffffff70;color:#185d7b;padding:14px 20px;min-height:46px;border-top:1px solid #fff}
.autopia-assistant-panel iframe{background:transparent;min-height:0;flex:1}
body.autopia-embedded{background:transparent;min-height:100vh}
body.autopia-embedded:before,body.autopia-embedded:after,.autopia-embedded .sky-environment{display:none}
.autopia-embedded .chat{border:0;background:transparent;box-shadow:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.autopia-embedded .chat__log{height:clamp(160px,36dvh,380px)}
.autopia-embedded .chat__head{padding:10px 16px}
.autopia-embedded .chat__input{font-size:16px}
.autopia-embedded main>section.wrap{height:100dvh;display:flex;flex-direction:column}
.autopia-embedded .chat{height:100%;display:flex;flex-direction:column;min-height:0}
.autopia-embedded .chat__head,.autopia-embedded .tabs--chat,.autopia-embedded .chat__form{flex-shrink:0}
.autopia-embedded .chat__log{height:auto;min-height:80px;flex:1;overflow-y:auto}
.autopia-embedded .chat__suggest{max-height:82px;overflow-y:auto;flex-shrink:0}
.autopia-embedded main>section.wrap>p{display:none}
.autopia-embedded main>section.wrap:not(:has(.chat)){display:none!important}
.autopia-embedded main{height:100dvh;overflow:hidden}
body.autopia-embedded{overflow:hidden}
.autopia-embedded .chat__log,.autopia-embedded .chat__suggest{overscroll-behavior:contain}
.footer{margin-top:15px;background:#ffffff38;padding-bottom:90px}
.footer__bottom{color:#3d6379}
@media(min-width:1000px){.nav__burger{display:none}.nav__menu{display:flex!important;position:static;padding:0;background:none;border:0}.nav__menu a{white-space:nowrap}.hero-actions .a-button{min-width:245px}}
@media(max-width:999px){.nav__burger{display:block!important}.nav__menu{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;padding:16px!important;gap:4px;max-height:calc(100dvh - 125px);overflow:auto;background:rgba(229,247,255,.88)!important;border:1px solid #fff!important;border-radius:25px!important;box-shadow:0 20px 60px #276a993b,inset 0 1px #fff!important;-webkit-backdrop-filter:blur(32px) saturate(170%);backdrop-filter:blur(32px) saturate(170%)}.nav__menu.is-open{display:flex;flex-direction:column;align-items:stretch}.nav__menu a:not(.btn){font-size:16px!important;padding:12px 16px!important;min-height:50px;border-radius:14px;color:#194f6d!important}.nav__menu a:hover{background:#ffffff73}.nav__inner{justify-content:space-between}.autopia-hero{grid-template-columns:1fr 1fr}.hero-art{min-height:380px}.note-one{width:220px;right:-10px}.hero-copy h1{font-size:48px}.cockpit{padding-inline:27px}.quick-card{padding:20px}.autopia-wordmark{font-size:19px}}
.nav__burger{position:relative;width:100px;height:58px;background:#ffffff3d!important;border:1px solid #ffffffce!important;border-radius:19px;box-shadow:inset 0 1px #fff;flex-shrink:0}
.nav__burger::before{position:absolute;left:0;top:0;width:62px;height:54px;background:center/contain no-repeat url('../autopia-ai-v5-264.png');filter:drop-shadow(0 3px 3px #397a9a20)}
.nav__burger::after{content:"Menu";position:absolute;right:9px;bottom:16px;color:#245972;font-size:11px;font-weight:750}
.nav__burger[aria-expanded=true]::after{content:"×";position:absolute;right:7px;top:18px;width:19px;height:19px;background:#0b76a4;color:#fff;font-size:15px;border-radius:50%;display:grid;place-items:center}
@media(max-width:680px){.wrap{width:calc(100% - 32px)}.nav{top:max(8px,env(safe-area-inset-top));width:calc(100% - 24px)}.nav__inner{padding-inline:18px;min-height:68px}.cockpit{width:calc(100% - 24px);margin-top:18px;border-radius:28px;padding:0 22px}.cockpit-top{padding-block:15px;font-size:10px;gap:8px}.cockpit-top>span:last-child{font-size:9px}.autopia-hero{grid-template-columns:1fr;padding:16px 0 0;gap:0;min-height:0}.hero-copy{padding:8px 0 0}.hero-copy h1{font-size:clamp(42px,11vw,54px);line-height:1.02;margin:18px 0 15px}.hero-copy>p:not(.autopia-kicker){font-size:14px;line-height:1.55}.hero-actions{display:flex;flex-direction:row;gap:9px;margin-top:20px}.hero-actions .a-button{font-size:12px;padding:12px 13px;gap:12px;min-height:46px;flex:1;white-space:nowrap}.hero-copy .hero-small{font-size:11px!important;margin-top:16px}.hero-art{min-height:235px;height:245px;margin-top:4px}.hero-car{width:105%;margin-left:-15%;align-self:start;margin-top:-26px;max-height:270px;object-fit:contain}.hero-orbit{inset:14% 2% 24%;transform:rotate(-14deg)}.hero-road{bottom:21%;height:44px;left:-13%}.car-halo{inset:0}.note-one{right:-7px;bottom:11px;width:auto;max-width:225px;padding:13px 15px;border-radius:17px}.floating-note span{font-size:10px;margin-bottom:5px}.floating-note strong{font-size:13px}.floating-note p{font-size:11px}.floating-note button{font-size:11px;min-height:32px}.art-caption{display:none}.cockpit-bottom{padding-block:13px;font-size:11px;gap:10px}.cockpit-bottom>span{max-width:47%}.cockpit-bottom a{font-size:10px}.quick-section{padding-top:28px}.section-heading h2{font-size:27px}.section-heading>p{font-size:11px;margin-top:7px}.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.quick-card{padding:17px;min-height:184px;border-radius:22px}.quick-card strong{font-size:18px}.quick-card p{font-size:12px;max-width:100%;padding-bottom:14px;line-height:1.5}.quick-label{font-size:11px;letter-spacing:0}.quick-icon{font-size:21px;margin-bottom:8px;height:22px}.quick-arrow{right:14px;bottom:11px;font-size:15px}.autopia-kicker{font-size:11px}.journey-glass{padding:26px}.journey-glass p:not(.autopia-kicker){font-size:13px}.scroll-story{height:230svh;margin-top:20px}.story-sticky{top:96px;height:calc(100svh - 125px);max-height:740px;border-radius:27px}.story-topline{top:20px;left:19px;right:19px;display:block;font-size:9px}.story-topline span:last-child{display:block;margin-top:7px;width:max-content;max-width:100%}.story-video{object-position:center 20%}.story-copy{left:17px;right:17px;bottom:75px;width:auto;padding:22px}.story-copy h2{font-size:30px}.story-copy p:not(.autopia-kicker){font-size:13px}.story-play{right:18px;bottom:18px;font-size:11px;min-height:42px}.story-car{width:58%;right:-3%;bottom:58%;opacity:.97}.story-accessible{gap:8px;font-size:11px}.story-accessible a{padding:10px;flex:1 1 44%;white-space:nowrap}.story-video-status{top:83px;font-size:11px;left:19px;right:19px}.autopia-mascot{right:14px;width:88px;height:76px;border-radius:22px}.autopia-mascot img{width:85px;height:55px}.autopia-mascot small{font-size:8px}.autopia-assistant-panel{right:14px;bottom:calc(98px + env(safe-area-inset-bottom));height:min(700px,calc(100dvh - 124px - env(safe-area-inset-bottom)));width:calc(100vw - 28px);border-radius:25px}.page-head{padding-top:45px}.page-head .display{font-size:39px}.chat__head{gap:8px}.chat__head .badge{font-size:9px;padding:6px}.calendar-top h1{font-size:39px}.calendar-switch button{padding-inline:11px}.calendar-row{align-items:flex-start}.calendar-row-side{min-width:95px}.calendar-admin input{font-size:16px}.footer{padding-bottom:95px}.autopia-footer{gap:18px}.autopia-footer p{width:100%;font-size:12px}.autopia-footer>a:not(.autopia-wordmark){font-size:12px}}
@media(max-width:380px){.cockpit{padding-inline:17px}.hero-copy h1{font-size:41px}.hero-actions{flex-direction:column}.hero-actions .a-button{width:100%;font-size:12px}.cockpit-top>span:last-child{display:none}.floating-note p{display:none}.note-one{max-width:200px}.quick-card{padding:14px}.quick-card strong{font-size:16px}}
@media(hover:hover) and (pointer:fine){.a-button:hover,.btn:hover,.quick-card:hover{transform:translateY(-3px);box-shadow:0 18px 32px -18px #236a9b75,inset 0 1px #fff}.quick-card:hover{background-color:#ffffff78}.nav__menu a:hover{color:#075d88}.cockpit{--glass:rgba(245,252,255,.29)}}
@media(prefers-reduced-motion:no-preference){.sky-cloud{animation:cloud-drift 24s ease-in-out infinite alternate}.sky-cloud:nth-child(2){animation-delay:-12s}.hero-car{animation:autoai-float 7s ease-in-out infinite}.autopia-assistant-panel[open]{animation:glass-arrive .24s ease-out}}
@keyframes cloud-drift{to{translate:5% -10px}}
@keyframes autoai-float{50%{transform:translateY(-8px) rotate(-1deg)}}
@keyframes glass-arrive{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:is(.cockpit,.nav,.quick-card,.journey-glass,.calendar-panel,.calendar-notice,.card,.stats,.topic,.sheet,.chat,.empty,.exam__side,.tabs,.kpi,.advice,.access-card,.floating-note,.story-copy,.autopia-assistant-panel,.nav__menu){background:#f0faff!important}.story-video{opacity:.6}}
@media(prefers-reduced-transparency:reduce){:is(.cockpit,.nav,.quick-card,.journey-glass,.calendar-panel,.card,.topic,.sheet,.chat,.kpi,.floating-note,.story-copy,.autopia-assistant-panel,.nav__menu){background:#f0faff!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.scroll-story{height:auto}.story-sticky{position:relative;top:auto;height:540px}.story-car{transform:none!important}.story-progress{display:none}}
@media(forced-colors:active){:is(.cockpit,.nav,.quick-card,.story-copy,.calendar-panel,.autopia-assistant-panel){background:Canvas;border:1px solid CanvasText;box-shadow:none}.a-button.primary{background:ButtonFace;color:ButtonText}.hero-car{filter:none}}

/* A nested backdrop cannot blur beyond a backdrop-filter ancestor. */
.nav:has(.nav__menu.is-open){-webkit-backdrop-filter:none;backdrop-filter:none;background:#eefaffd9}
@media(prefers-reduced-motion:reduce){body:after{display:none}}
/* Keep portrait footage above the HTML cards; its lower sky blends into the frame. */
@media(max-width:680px){.story-video{height:70%;bottom:auto;object-position:center bottom;opacity:1;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}}
@media(max-width:680px) and (prefers-reduced-motion:reduce){.story-video{height:57%;object-fit:contain;object-position:center;-webkit-mask-image:none;mask-image:none}}

/* Glass9 — one central axis; gentle life at rest without layout shifts. */
.hero-copy{text-align:center}
.hero-copy>p{margin-inline:auto}
.hero-actions{align-items:center;justify-content:center}
.hero-art{display:flex;flex-direction:column;align-items:center;justify-content:center;height:auto;min-height:440px;gap:0;padding:8px 0 18px}
.autoai-portrait{position:relative;flex:none;width:min(100%,560px);aspect-ratio:3/2;isolation:isolate;transform-origin:50% 65%}
.autoai-portrait .hero-car{width:100%;height:auto;max-height:none;margin:0;animation:none;object-fit:contain}
.autoai-portrait::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffffff9e 48%,#fff2 53%,transparent 62%);background-size:300% 100%;background-position:120% 0;-webkit-mask:url('../autopia-ai-v5-264.png') center/contain no-repeat;mask:url('../autopia-ai-v5-264.png') center/contain no-repeat;opacity:0}
.hero-art .note-one{position:relative;inset:auto;width:min(280px,100%);max-width:none;margin:-10px auto 0;text-align:center;align-self:center}
.floating-note button{justify-content:center;width:100%}
.hero-art .art-caption{position:static;inset:auto;text-align:center;margin-top:17px}
.hero-orbit{inset:8% 2% 30%;transform:rotate(-14deg)}
.hero-road{left:0;width:100%;bottom:28%;transform:rotate(-9deg)}
.car-halo{inset:0 1% 24%}
.section-heading{justify-content:center;flex-direction:column;align-items:center;text-align:center;gap:8px}
.section-heading>p{margin:0}
.quick-grid{justify-content:center;align-items:stretch}
.quick-card{align-items:center;text-align:center;min-height:184px}
.quick-icon{margin-inline:auto}
.quick-card .quick-label{min-height:2.3em;display:flex;align-items:center;justify-content:center}
.quick-card p{max-width:31ch;margin-inline:auto}
.quick-arrow{right:17px;bottom:12px}
.journey-glass{align-items:center;text-align:center;justify-content:center;flex-direction:column}
.journey-glass p:not(.autopia-kicker){margin-inline:auto}
.journey-glass .a-button{flex-shrink:0}
.story-copy{left:50%;right:auto;transform:translateX(-50%);width:min(430px,calc(100% - 48px));text-align:center}
.story-copy p:not(.autopia-kicker){margin-inline:auto}
.story-progress{justify-content:center}
.story-accessible{justify-content:center;text-align:center}
.autopia-mascot{align-items:center;justify-content:center}
.autopia-mascot img{display:block;object-position:center;margin:0 auto;transform-origin:center 70%}
.ambient-control{min-height:44px;padding:8px 11px;border:1px solid #ffffffbd;border-radius:13px;background:#ffffff5c;color:#285c74;font-size:11px;font-weight:650;cursor:pointer;white-space:nowrap}
.ambient-control::before{content:"Ⅱ";display:inline-block;margin-right:6px;font-size:12px}
.ambient-control[aria-pressed=true]::before{content:"▷"}
.ambient-control:disabled{opacity:.8;cursor:default}
@media(max-width:680px){
  .hero-copy{text-align:center;padding-top:12px}
  .hero-copy h1{margin-inline:auto;font-size:clamp(40px,10.6vw,52px)}
  .hero-actions{width:100%;align-items:stretch}
  .hero-actions .a-button{white-space:normal;text-align:left}
  .hero-art{height:auto;min-height:0;padding:8px 0 20px;margin:0}
  .autoai-portrait{width:min(100%,420px);margin:0 auto}
  .hero-art .note-one{width:min(270px,100%);margin:-8px auto 0;padding:15px 17px}
  .hero-art .art-caption{display:none}
  .hero-orbit{inset:0 1% 30%}
  .hero-road{left:0;width:100%;bottom:30%}
  .cockpit-top{padding-block:10px}
  .ambient-control{font-size:10px;padding-inline:9px}
  .quick-card{min-height:198px}
  .story-copy{left:50%;right:auto;width:calc(100% - 34px)}
  .story-video{object-position:center center}
  .journey-glass .a-button{margin-top:0}
}
@media(prefers-reduced-motion:no-preference){
  .autoai-portrait{animation:autoai-breathe 4.8s ease-in-out infinite}
  .autoai-portrait::after{animation:autoai-reflection 7.8s ease-in-out infinite}
  .hero-art .note-one{animation:glass-buoy 5.4s ease-in-out -1.6s infinite}
  .quick-card{animation:glass-buoy 6.2s ease-in-out infinite}
  .quick-card:nth-child(2n){animation-delay:-2.4s}
  .quick-card:nth-child(3n){animation-delay:-4.1s;animation-duration:7s}
  .car-halo{animation:sky-breathe 6s ease-in-out infinite}
  .hero-orbit{animation:orbit-drift 12s ease-in-out infinite alternate}
  .autopia-mascot img{animation:copilot-idle 5.8s ease-in-out -1.2s infinite}
  .sky-cloud{animation-duration:16s}
}
@keyframes autoai-breathe{0%,100%{transform:translateY(3px) rotate(-.45deg)}50%{transform:translateY(-11px) rotate(.45deg)}}
@keyframes glass-buoy{0%,100%{translate:0 2px}50%{translate:0 -4px}}
@keyframes autoai-reflection{0%,36%,100%{background-position:120% 0;opacity:0}43%{opacity:.28}61%{background-position:-30% 0;opacity:0}}
@keyframes sky-breathe{0%,100%{opacity:.6;scale:.97}50%{opacity:1;scale:1.04}}
@keyframes orbit-drift{from{rotate:-3deg;translate:0 3px}to{rotate:4deg;translate:0 -5px}}
@keyframes copilot-idle{0%,100%{transform:translateY(1px) rotate(-1deg)}45%,55%{transform:translateY(-4px) rotate(1deg)}}
:is(.motion-paused,.ambient-hidden) :is(.autoai-portrait,.hero-car,.note-one,.quick-card,.car-halo,.hero-orbit,.sky-cloud,.autopia-mascot img),:is(.motion-paused,.ambient-hidden) .autoai-portrait::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.autoai-portrait,.autoai-portrait::after,.hero-art .note-one,.quick-card,.car-halo,.hero-orbit,.autopia-mascot img{animation:none!important}.autoai-portrait::after{display:none}}
.nav__burger{width:112px}
.nav__burger::before{width:64px}
.nav__burger::after{right:11px}
@media(max-width:680px){.cockpit-bottom{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:14px 0}.cockpit-bottom>span{max-width:none}.cockpit-bottom a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;max-width:calc(100% - 80px);font-size:11px;gap:8px}}

/* Glass10 — center the wordmark and use real layout for the menu contents. */
.nav>.nav__inner{width:100%;max-width:none}
.nav .brand{display:flex;align-items:center;justify-content:center;min-width:0;min-height:58px;margin:0;padding:0;text-align:center}
.nav .autopia-wordmark{justify-content:center;align-items:center;gap:8px;line-height:1;letter-spacing:.025em}
.nav .mark-orbit{flex:none;width:24px;height:24px;border-width:5px;margin:0}
.nav__burger::before,.nav__burger::after{content:none!important}
.nav__burger{width:124px;height:58px;padding:6px 10px;gap:8px;align-items:center;justify-content:center}
.nav__burger .nav-menu-car{display:block;flex:0 0 54px;width:54px;height:36px;max-width:none;object-fit:contain;object-position:center;margin:0;filter:drop-shadow(0 2px 2px #397a9a20)}
.nav__burger .nav-menu-label{display:block;flex:0 0 38px;min-width:38px;position:static;margin:0;color:#245972;font-size:12px;font-weight:750;line-height:1;text-align:center;letter-spacing:0;white-space:nowrap}
.nav__burger[aria-expanded=true]{background:#ffffffa8!important;border-color:#fff!important}
@media(max-width:999px){
  .nav>.nav__inner{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:12px;align-items:center;justify-items:center;padding-inline:16px;min-height:72px}
  .nav .autopia-wordmark{font-size:clamp(16px,4.3vw,20px)}
  .nav__inner .nav__burger{display:flex!important;justify-self:center}
}
@media(max-width:380px){.nav>.nav__inner{padding-inline:12px;gap:8px}.nav .autopia-wordmark{gap:6px}.nav .mark-orbit{width:22px;height:22px}}

/* Ice11 — a frozen room shared by every screen, with blue/red AUTO(AI). */
:root{--bg:#c5dce8;--bg-deep:#abcbdc;--surface:#eef8fc;--surface-2:#dcecf5;--glass:rgba(239,249,255,.36);--glass-shadow:0 18px 42px -24px #244c7966,inset 0 1px #fff,inset 0 -1px #668fb544}
body{background:#c5dce8}
body:before{background:radial-gradient(ellipse at 50% 25%,#f4fbff70,transparent 60%),linear-gradient(180deg,#b9d5e6,#e6f3fa 48%,#b9d2e3);transform:none}
.sky-environment,.sky-cloud,.cloud,.hero-road,.hero-orbit{display:none!important}
.ice-environment{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;perspective:900px}
.ice-wall{position:absolute;display:block;border:1px solid #f4fcffb0;background:linear-gradient(135deg,#f4fcff62,#7baac53b 45%,#fff8);box-shadow:inset 0 0 70px #f5fdff69}
.ice-wall--back{inset:7% 12% 38%;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#f9ffffa3 calc(25% - 1px) 25%),repeating-linear-gradient(0deg,#e7f7ff27 0 calc(50% - 1px),#f9ffff69 calc(50% - 1px) 50%),linear-gradient(160deg,#e7f8ff9c,#accddfb0);box-shadow:inset 0 0 80px #f5fdff82,0 22px 80px #6b9bb330}
.ice-wall--left{inset:0 82% 0 -3%;clip-path:polygon(0 0,100% 9%,100% 62%,0 100%);background:repeating-linear-gradient(15deg,#b9d7e848 0 130px,#f8ffff87 131px 132px),linear-gradient(90deg,#75a5c766,#effbff68)}
.ice-wall--right{inset:0 -3% 0 82%;clip-path:polygon(0 9%,100% 0,100% 100%,0 62%);background:repeating-linear-gradient(-15deg,#c5e1ef50 0 130px,#f8ffff87 131px 132px),linear-gradient(270deg,#75a5c766,#effbff68)}
.ice-floor{position:absolute;left:-55%;right:-55%;top:62%;height:110%;transform:rotateX(64deg);transform-origin:50% 0;background:repeating-linear-gradient(90deg,transparent 0 179px,#f3fdff99 180px 182px),repeating-linear-gradient(0deg,#b9d5e42a 0 119px,#f3fdffb0 120px 122px),linear-gradient(#e8f8ff96,#92b8d0aa);border-top:2px solid #f3ffffb8}
.ice-beam{position:absolute;left:27%;top:7%;width:46%;height:2px;background:#f7ffff;box-shadow:0 0 24px 8px #d5f5ffb5}
.car-halo{background:linear-gradient(145deg,#ffffff13,#cef2ffb5 48%,#74b4d54a);border:1px solid #f6feff9c;border-radius:22%;filter:blur(0);clip-path:polygon(15% 70%,85% 70%,100% 90%,0 90%);opacity:.8}
.hero-art:before{display:none}
.hero-copy h1 em{color:#126d9f}
.story-sticky{background:linear-gradient(#a7c8df,#dfedf8 58%,#94b8ce)}
.story-sticky:after{display:none}
.ice-world{position:absolute;inset:0;overflow:hidden;perspective:800px;pointer-events:none}
.ice-world-back{position:absolute;inset:4% 14% 42%;border:2px solid #f2ffffc2;border-radius:5px;background:repeating-linear-gradient(90deg,#d9f3ff69 0 calc(25% - 2px),#ffffffad calc(25% - 2px) 25%),linear-gradient(145deg,#e5f9ffaa,#4b88ad55);box-shadow:inset 0 0 70px #f7ffffa1,0 20px 90px #5595b444}
.ice-world-floor{position:absolute;left:-50%;right:-50%;top:54%;height:100%;transform:rotateX(62deg);transform-origin:50% 0;background:repeating-linear-gradient(90deg,transparent 0 149px,#fff9 150px 152px),repeating-linear-gradient(0deg,#c6e8f35c 0 94px,#fff9 95px 97px),linear-gradient(#d8eff4,#7aaccb)}
.ice-world-pillar{position:absolute;top:8%;width:7%;height:58%;border:1px solid #fff;background:linear-gradient(90deg,#eefeff99,#8bb4d354,#f4ffffb0);box-shadow:0 20px 40px #6292b438;transform:skewY(-5deg)}
.pillar-left{left:8%}.pillar-right{right:8%;transform:skewY(5deg)}
.ice-world-car{position:absolute;left:50%;top:3%;width:min(50%,500px);transform:translateX(calc(-50% + var(--world-shift,0px))) translateY(calc(var(--journey-progress,0) * 14px)) scale(calc(.8 + var(--journey-progress,0) * .22));transform-origin:center 60%;filter:drop-shadow(0 22px 9px #355d8740)}
.ice-world-car img{width:100%;height:auto}
.story-topline{z-index:2}
.story-play{display:none}
.autopia-quiz-active .page-head,.autopia-quiz-active [data-dim-on-focus],.autopia-quiz-active .tabs{display:none!important}
.autopia-quiz-active .section--tight{padding-top:30px}
.autopia-quiz-active .quiz-shell{padding-bottom:110px}
.run,.exam{max-width:1100px;margin-inline:auto}
.run__top,.exam__bar{align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;border:1px solid #fff;border-radius:22px;background:#f1fbff66;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);margin-bottom:18px}
.run__id{flex:1}.run__count{font-size:20px;white-space:nowrap}.run__title{font-size:17px}.run__label{font-size:10px;letter-spacing:.08em}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center}
.tools .iconbtn{min-width:46px;height:46px;border:1px solid #f7ffff;border-radius:15px;background:linear-gradient(145deg,#ffffff9c,#d1e9f45c);color:#20546f;box-shadow:inset 0 1px #fff,0 5px 14px #4b7a9b21;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:14px;letter-spacing:0;transition:background .16s,transform .16s}
.tools .iconbtn:hover{background:#ffffffbb}.tools .iconbtn:active{transform:scale(.95)}
.tools .iconbtn--auto.is-on{background:#146f9d;color:white;border-color:#fff}
.qcard{position:relative;isolation:isolate;overflow:visible;min-height:0;border:1px solid #f7ffff;border-radius:27px;background:transparent;box-shadow:var(--glass-shadow);-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:clamp(22px,4vw,36px)}
.qcard::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(135deg,#f5fcff98,#d4e8f363);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.qcard__body{min-height:0}.qcard__text{min-height:0;font-size:clamp(20px,2.4vw,29px);line-height:1.45;letter-spacing:-.025em;max-width:55ch;margin:24px auto;color:#153d53}
.qcard__top{gap:10px;flex-wrap:wrap}.qcard__top .chip{font-size:11px;letter-spacing:.03em;background:#f8ffff6b}
.qcard__feedback:empty{display:none}.qcard__feedback{line-height:1.65;font-size:14px;margin-top:18px;padding:15px;border-radius:15px;background:#f9ffff61}
.qcard__fig{border-radius:18px;background:#f9ffffb5;padding:14px;border:1px solid #fff}
.drill-nav{justify-content:space-between;gap:10px;margin:18px 0 0;flex-wrap:wrap}
.drill-nav .btn,.exam__nav--verifica .btn{min-height:44px;padding-inline:17px;font-size:13px}
.answerbar{background:#e9f7ff6b;border:1px solid #fff;border-radius:24px;padding:10px;box-shadow:0 12px 36px #3b73933d,inset 0 1px #fff;-webkit-backdrop-filter:blur(25px) saturate(150%);backdrop-filter:blur(25px) saturate(150%)}
.answerbar .big-ans{position:relative;min-height:58px;border:1px solid #fff;border-radius:18px;background:linear-gradient(145deg,#ffffffa3,#d9effe5c);color:#174a68;box-shadow:inset 0 1px #fff,0 5px 16px #477c9f1f;font-size:19px;letter-spacing:0;text-transform:none;transition:background .16s,box-shadow .16s,transform .16s}
.answerbar .big-ans:hover{background:#ffffffc9}.answerbar .big-ans:active{transform:scale(.97)}
.answerbar .big-ans.is-correct{background:#d1f7e5e6;border-color:#27825e;color:#165d42}
.answerbar .big-ans.is-wrong{background:#ffe2e5e6;border-color:#b44155;color:#8e2339}
.answerbar .big-ans[aria-pressed=true]:not(.is-correct):not(.is-wrong){background:#b9e8ffe6;border-color:#1774a4;box-shadow:inset 0 0 0 1px #1774a4}
.answerbar .big-ans:disabled{opacity:1;cursor:default}
.autopia-quiz-active .autopia-mascot{width:72px;height:64px;right:14px;bottom:calc(112px + env(safe-area-inset-bottom))}
.autopia-quiz-active .autopia-mascot img{width:70px;height:46px}.autopia-quiz-active .autopia-mascot small{font-size:7px}
@media(max-width:720px){
  .answerbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:10px;gap:10px}
  .answerbar .big-ans{min-height:58px;padding:14px 10px}
  .autopia-quiz-active .quiz-shell{padding-bottom:158px}
  .run__top,.exam__bar{padding:14px;gap:10px}.tools{width:100%;justify-content:space-between;gap:6px}
  .tools .iconbtn{min-width:44px;height:44px;padding:0 10px}.tools .iconbtn--text{font-size:12px}
  .qcard{padding:22px;border-radius:24px}.qcard__text{font-size:21px;margin-block:20px;line-height:1.45}
  .qcard__top .chip{font-size:10px}.run__title{font-size:16px}.drill-nav{margin-bottom:0}
  .ice-world-car{width:86%;top:7%}.ice-world-back{inset:5% 8% 40%}.ice-world-floor{top:46%}.ice-world-pillar{height:44%;width:6%}
  .pillar-left{left:3%}.pillar-right{right:3%}.story-copy{bottom:24px}.ice-world{height:100%}
}
@media(min-width:721px){.autopia-quiz-active .autopia-mascot{bottom:24px;width:88px;height:76px}.autopia-quiz-active .autopia-mascot img{width:85px;height:55px}}
@media(prefers-reduced-motion:no-preference){.ice-beam{animation:ice-glow 6s ease-in-out infinite}.ice-world-car img{animation:copilot-idle 6s ease-in-out infinite}}
@keyframes ice-glow{50%{opacity:.55;box-shadow:0 0 35px 12px #d5f5ff8c}}
:is(.motion-paused,.ambient-hidden) :is(.ice-beam,.ice-world-car img){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.ice-world-car{transform:translateX(-50%);top:5%}.ice-beam,.ice-world-car img{animation:none!important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.answerbar,.answerbar .big-ans,.qcard,.tools .iconbtn{background:#edf8ff}}

.autopia-quiz-active .autopia-mascot small{display:none}

/* Mobile12 — car wordmark, professional menu and movable, textless AI. */
.brand-car{display:block;width:64px;height:44px;max-width:none;object-fit:contain;flex:none}
.nav .autopia-wordmark{gap:8px;white-space:nowrap;font-size:19px}
.nav__burger{width:96px;height:52px;padding:6px 10px;gap:7px;border-radius:17px}
.nav__burger .nav-menu-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;color:#245972}
.nav__burger .nav-menu-label{flex:0 0 36px;min-width:36px;font-size:12px;font-weight:650}
.autopia-mascot{width:88px;height:72px;padding:2px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:grab}
.autopia-mascot:active{cursor:grabbing}
.autopia-mascot img{width:82px;height:64px;pointer-events:none;-webkit-user-drag:none}
.autopia-mascot small{display:none!important}
.autopia-assistant-panel{inset:auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;width:min(540px,calc(100vw - 24px));height:min(780px,calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));margin:0 auto;border-radius:28px}
.autopia-assistant-panel[open]{animation:chat-sheet-in .22s ease-out}
.assistant-bar{padding:14px 18px;background:linear-gradient(135deg,#ffffffac,#cbe9f670)}
.assistant-bar strong{font-size:18px;letter-spacing:-.025em}.assistant-bar small{font-size:11px;max-width:34ch;line-height:1.45}
.chat{background:linear-gradient(145deg,#f5fcff69,#b9d7ed3b);box-shadow:var(--glass-shadow)}
.chat__head{border-bottom:1px solid #f8ffffb0}.chat__head .badge{background:#ffffff78;color:#225a76;border:1px solid #fff}
.chat__log{gap:16px;padding:22px 18px}
.msg{max-width:96%;align-items:flex-start}.msg--me{max-width:88%}
.msg__bubble{position:relative;min-width:0;padding:16px 18px;border:1px solid #fff;border-radius:22px;background:linear-gradient(135deg,#f7ffffb0,#cee5f573);box-shadow:inset 0 1px #fff,0 7px 22px #527ba61a;overflow-wrap:anywhere}
.msg--me .msg__bubble{background:linear-gradient(135deg,#c7e9f6bd,#a6cce8a6);border-color:#f1fcff}
.msg__speaker{display:block;font-size:10px;font-weight:750;letter-spacing:.06em;margin-bottom:7px;color:#356781}
.msg__bubble p{font-size:14px;line-height:1.65}.msg__fonte,.msg__extra{font-size:12px!important;letter-spacing:0;text-transform:none}
.engine-label{display:inline-block;font-size:10px;font-weight:750;letter-spacing:.04em;color:#286985;margin-bottom:9px;padding:5px 8px;border:1px solid #fff;border-radius:9px;background:#ffffff78}
.ai-source{margin-top:14px;border-top:1px solid #bfd5e4;padding-top:10px}.ai-source summary{font-size:12px;font-weight:650;cursor:pointer;min-height:36px}.ai-source p{margin-block:10px;font-size:12px}
.chat__form{gap:8px;padding:14px;background:#ecf8ff6b;border-top:1px solid #fff}
.chat__input{min-width:0;font-size:16px;border:1px solid #fff;border-radius:16px;background:#f6fdffbd;padding:13px 14px}
.chat__form .btn{min-height:48px;padding:12px 18px;border-radius:16px}
.btn:not(.btn--accent):not(.btn--danger),.a-button.secondary,.chip{background:linear-gradient(145deg,#ffffff9c,#d5eaf36b);border:1px solid #f9ffff;box-shadow:inset 0 1px #fff,0 6px 16px #426c9220;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.btn--accent,.a-button.primary{background:linear-gradient(145deg,#2789b7d9,#086e9be8);border:1px solid #e9fbffdc;box-shadow:inset 0 1px #ffffff94,0 8px 22px #17658b35}
.kpi-grid{gap:12px}.kpi{text-align:left;padding:22px;border-radius:24px;min-height:144px}
.kpi__v{font-size:34px;letter-spacing:-.05em;color:#174e6c}.kpi__l{font-size:12px;letter-spacing:0;text-transform:none;line-height:1.4;font-weight:700}.kpi__n{font-size:11px;line-height:1.5;margin-top:8px;color:#47687d}
.readiness-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.readiness-badge{display:inline-flex;align-items:center;min-height:36px;border-radius:12px;padding:8px 12px;background:#e6f3fab8;border:1px solid #fff;color:#245d7c;font-size:12px;font-weight:750}
.readiness-badge[data-badge-state=ready]{background:#d1f3e7c9;border-color:#7ab6a1;color:#185b43}.readiness-window{font-size:12px;color:#41677f}
.advice__title{font-size:clamp(24px,4vw,36px);line-height:1.15;letter-spacing:-.035em}.advice .btn{margin-top:20px}
.recent-errors{margin-top:24px}.recent-errors h3{font-size:14px;margin-bottom:9px}.recent-errors>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid #ffffff9c;font-size:12px}
.learning-summaries{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.learning-summary{padding:20px;border:1px solid #fff;border-radius:22px;background:#ffffff60}.learning-summary h3{font-size:18px;margin-bottom:10px}.learning-summary>a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;font-size:12px;padding-block:9px;border-top:1px solid #e8f6ff}.learning-summary strong{white-space:nowrap;font-size:11px}.learning-summary p{font-size:13px;line-height:1.65;color:#486b7e}
.bar--errors{grid-template-columns:26px minmax(0,1fr) auto;gap:8px 10px;padding:14px 16px}.bar--errors .bar__name{min-height:44px;display:flex;align-items:center;font-size:13px}.bar--errors .bar__val{font-size:11px;text-align:right}.bar--errors .bar__track{grid-column:2/-1}.bar--errors .bar__fill{background:#bb5468b5}
@keyframes chat-sheet-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(max-width:999px){.nav>.nav__inner{grid-template-columns:minmax(0,1fr) 96px;gap:10px;padding-inline:14px}.nav .brand-car{width:62px;height:44px}.nav .autopia-wordmark{font-size:18px}}
@media(max-width:680px){
  .nav>.nav__inner{min-height:70px}.nav .autopia-wordmark{font-size:17px;gap:5px}.nav .brand-car{width:58px;height:42px}
  .autopia-mascot{width:80px;height:66px;right:12px}.autopia-mascot img{width:76px;height:60px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:17px;min-height:150px}.kpi__v{font-size:31px}.kpi__l{font-size:12px}
  .learning-summaries{grid-template-columns:1fr}.bar--errors{grid-template-columns:22px minmax(0,1fr);gap:6px 10px}.bar--errors .bar__val{grid-column:2;text-align:left}.bar--errors .bar__track{grid-column:2}
  .msg{max-width:100%;gap:8px}.msg .avatar{width:34px;height:32px}.msg__bubble{padding:14px;border-radius:19px}.chat__suggest .chip{font-size:11px;padding:9px 11px;min-height:42px}
  .chat__head .avatar{width:54px}.chat__head .h4{font-size:15px}.chat__head [data-autopia-stato]{font-size:10px}
  .autopia-assistant-panel .assistant-bar small{max-width:28ch}.autopia-assistant-panel iframe{min-height:0}
}
@media(max-width:360px){.nav .autopia-wordmark{font-size:15px}.nav .brand-car{width:52px}.nav>.nav__inner{gap:6px;padding-inline:10px}.chat__form .btn{padding-inline:12px}}
@media(prefers-reduced-motion:reduce){.autopia-assistant-panel[open]{animation:none}}
.metric-details{grid-column:1/-1;border:1px solid #fff;border-radius:22px;background:#ffffff42;padding:18px}
.metric-details>summary{min-height:44px;cursor:pointer;font-size:14px;font-weight:700;color:#285b76}
.extra-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
@media(max-width:680px){.extra-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric-details{padding:14px}body[data-page=statistiche] .page-head .display{font-size:34px}body[data-page=statistiche] .page-head{padding-top:35px}}
.qcard__feedback .msg__extra{display:block;font-size:12px;line-height:1.5;margin-top:10px}
.calendar-row-side button,[data-cal-save],.topic-read{min-height:44px;padding:8px 12px;border:1px solid #fff;border-radius:12px;background:linear-gradient(145deg,#ffffffb3,#d5eaf375);box-shadow:inset 0 1px #fff,0 4px 12px #426c9220}
.topic-start{border:1px solid #ecfbff;background:linear-gradient(145deg,#2789b7dc,#086e9be8);box-shadow:inset 0 1px #ffffff85,0 5px 15px #17658b30}
.qmap__cell:not(.is-current):not(.is-answered):not(.is-right):not(.is-wrong),.qmap__tab[aria-selected=false]{background:linear-gradient(145deg,#ffffffa3,#d9edf46e);border-color:#f3ffff;box-shadow:inset 0 1px #fff}

/* ==========================================================================
   31/10 — Quiz a schermo intero (guscio qi-shell), hub, suggerimenti, mascotte.
   Un solo guscio per ogni prova: esame, componi, argomento, errori, e anche
   risultati e «Rivedi le risposte». Il guscio è fisso a tutto viewport dentro
   la radice della prova; nav, piè di pagina e il resto escono di scena dalla
   classe sul body (la mette studyMode in quiz.js). Gli aggancio data-* e i
   token di classe storici (run, exam, pip…) restano: li usano i test.
   ========================================================================== */
:root{--qi-bar-h:62px;--qi-dock:0px}
@media(max-width:720px){:root{--qi-dock:88px}}

html.qi-lock,body.autopia-quiz-active{overflow:hidden;overscroll-behavior:none}
body.autopia-quiz-active :is(.nav,.footer,.skip,.focusbar,.qs__bar){display:none!important}

/* --- struttura -------------------------------------------------------------- */
.qi-shell{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column;max-width:none;margin:0;
  padding-top:env(safe-area-inset-top);color:#123a52;outline:0;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(236,248,255,.72),rgba(212,234,247,.82))}
.qi-shell:focus{outline:0}
.qi-shell .qi-top{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:12px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))}
.qi-shell .qi-id{min-width:0;flex:1}
.qi-shell .qi-label{margin:0;font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:#3b6a84}
.qi-shell .qi-title{margin:3px 0 0;font-size:15px;font-weight:750;letter-spacing:.015em;text-transform:uppercase;color:#123a52;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi-shell .qi-timer{flex:none;margin:0;padding:5px 11px;border:1px solid #fff;border-radius:12px;font-size:1.2rem;font-weight:700;
  letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#174a68;background:linear-gradient(145deg,#ffffffb8,#d5eaf36b)}
.qi-shell .qi-timer.is-warn{color:#8a5200}
.qi-shell .qi-timer.is-critical{color:#a5233a}

/* puntini di avanzamento: la domanda in corso è più lunga */
.qi-shell .qi-pips{flex:none;display:flex;gap:3px;margin:0;
  padding:6px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.qi-shell .qi-pips .pip{flex:1 1 0;min-width:0;height:5px;border-radius:5px;background:#bad3e3;transition:background .18s,flex-grow .18s}
.qi-shell .qi-pips .pip.is-given{background:#6fa5c6}
.qi-shell .qi-pips .pip.is-done{background:#2f9a72}
.qi-shell .qi-pips .pip.is-miss{background:#c2485c}
.qi-shell .qi-pips .pip.is-now{flex-grow:2.6}
.qi-shell .qi-pips .pip.is-now:not(.is-done):not(.is-miss):not(.is-given){background:#0d5b88}
.qi-shell .qi-pips .pip.is-now.is-given{background:#2a77a3}
.qi-shell .qi-count{flex:none;margin:0;font-size:13px;color:#42677c;font-variant-numeric:tabular-nums;
  padding:5px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
.qi-shell .qi-count b{color:#123a52}

/* il corpo scorre da solo: la pagina dietro è ferma */
.qi-shell .qi-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:6px max(16px,env(safe-area-inset-right)) calc(var(--qi-dock) + 36px) max(16px,env(safe-area-inset-left))}
/* se il testo scorre sotto i tasti V/F, una sfumatura lo dice: l'ultima riga non finisce tagliata di netto */
.qi-shell::after{content:"";position:absolute;left:0;right:0;z-index:2;height:28px;pointer-events:none;
  bottom:calc(var(--qi-bar-h) + env(safe-area-inset-bottom) + var(--qi-dock));
  background:linear-gradient(rgba(225,242,251,0),rgba(225,242,251,.92))}
.qi-shell--result::after{display:none}

/* --- la domanda: figura senza riquadro, testo sotto, audio a destra ---------- */
.qi-shell .qcard{max-width:780px;margin:0 auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.qi-shell .qcard::before{display:none}
.qi-shell .qcard__fig{margin:2px 0 14px;padding:0;border:0;border-radius:0;background:transparent}
.qi-shell .qcard__fig img{display:block;width:100%;height:auto;margin:0 auto;object-fit:contain;max-height:min(32vh,280px);max-height:min(32dvh,280px)}
.qi-shell .qcard__fig figcaption{margin-top:6px;text-align:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5d8398}
.qi-shell .qcard__top{margin:4px 0 10px;gap:8px;justify-content:flex-start}
.qi-shell .qcard__top .chip{min-height:0;padding:4px 9px;font-size:10.5px}
.qi-shell .qcard__line{display:flex;align-items:flex-start;gap:12px}
.qi-shell .qcard__text{flex:1;min-width:0;margin:0;max-width:none;text-align:left;color:#123a52;
  font-size:clamp(19px,5.3vw,26px);line-height:1.4;font-weight:650;letter-spacing:-.022em}
.qi-shell .qcard__line .iconbtn--say{flex:none;min-width:48px;height:48px;border:1px solid #fff;border-radius:50%;color:#174a68;
  background:linear-gradient(145deg,#ffffffb8,#d5eaf36b);box-shadow:inset 0 1px #fff,0 6px 16px #426c9226}
.qi-shell .qi-actions{max-width:780px;margin:12px auto 0;display:flex;flex-wrap:wrap;gap:8px}
.qi-shell .notice{max-width:780px;margin:4px auto 12px;font-size:12.5px}
.qi-shell .kbdhint{max-width:780px;margin:14px auto 0}

/* --- V/F: su telefono inchiodati sopra la barra, sul desktop sotto il testo ---- */
.qi-shell .answerbar{max-width:780px;margin:22px auto 0}
@media(max-width:720px){
  .qi-shell .answerbar{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));
    bottom:calc(var(--qi-bar-h) + env(safe-area-inset-bottom) + 6px);z-index:3;max-width:none;margin:0;gap:10px;padding:8px}
  .qi-shell .answerbar .big-ans{min-height:64px;font-size:21px}
}

/* --- barra in basso: ✕ · [mappa] · impostazioni · libro ........ ‹ › ------------ */
.qi-shell .qi-bar{flex:none;position:relative;z-index:4;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:calc(var(--qi-bar-h) + env(safe-area-inset-bottom));
  padding:0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));
  background:linear-gradient(180deg,#e9f5fb,#d2e5f1);border-top:1px solid #fff;box-shadow:0 -12px 32px #3a6f9120}
.qi-shell .qi-tools{width:auto;flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:6px}
.qi-shell .qi-bar__nav{display:flex;align-items:center;gap:8px}
.qi-shell .qi-bar .iconbtn,.qi-shell .qi-close,.qi-shell .qi-nav{box-sizing:border-box;min-width:46px;height:46px;padding:0 10px;
  display:inline-grid;place-items:center;border:1px solid #fff;border-radius:15px;color:#20546f;font-size:14px;font-weight:700;cursor:pointer;
  background:linear-gradient(145deg,#ffffffb8,#d3e8f470);box-shadow:inset 0 1px #fff,0 5px 14px #4b7a9b21}
.qi-shell .qi-nav--next{color:#fff;border-color:#e9fbffdc;background:linear-gradient(145deg,#2789b7e0,#086e9bf0)}
.qi-shell .qi-nav--next.is-last{min-width:96px;padding:0 18px}
.qi-shell .qi-nav[disabled]{opacity:.38;pointer-events:none}
.qi-shell .qi-bar .iconbtn:active,.qi-shell .qi-nav:active{transform:scale(.95)}
.qi-shell :is(.qi-bar .iconbtn,.qi-close,.qi-nav,.qi-set,.big-ans,.btn):focus-visible{outline:3px solid #0d5b88;outline-offset:2px}

/* --- pannelli: impostazioni e mappa (si aprono sopra la barra) ----------------- */
.qi-shell .qi-sheet{position:absolute;z-index:6;left:max(12px,env(safe-area-inset-left));bottom:calc(100% + 10px);width:min(320px,calc(100vw - 24px));
  display:grid;gap:8px;padding:12px;border:1px solid #fff;border-radius:20px;box-shadow:0 18px 50px #26557a44;
  background:linear-gradient(145deg,#f8fdffef,#d9edf8ef);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.qi-shell .qi-sheet--map{top:auto;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;
  bottom:calc(var(--qi-bar-h) + env(safe-area-inset-bottom) + 10px);max-height:min(66vh,520px);max-height:min(66dvh,520px);overflow:auto;position:absolute}
.qi-shell .qi-set{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:6px 10px;
  border-radius:14px;color:#174a68;font-size:14px;font-weight:650;text-decoration:none}
.qi-shell .qi-set--btn{width:100%;border:1px solid #fff;font-family:inherit;text-align:left;cursor:pointer;
  background:linear-gradient(145deg,#ffffffb8,#d3e8f470);box-shadow:inset 0 1px #fff}
.qi-shell .qi-set .iconbtn--auto{min-width:56px;height:40px}

/* --- schermate di risultato --------------------------------------------------- */
.qi-shell--result .qi-top{align-items:center}
.qi-shell--result .qi-body{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.qi-shell--result .verdict{max-width:780px;margin:0 auto}

/* --- desktop: tutto centrato, figura accanto al testo --------------------------- */
@media(min-width:721px){
  .qi-shell .qi-top,.qi-shell .qi-pips,.qi-shell .qi-count,.qi-shell .qi-body{padding-inline:max(24px,calc((100% - 860px)/2))}
  .qi-shell .qi-bar{padding-inline:max(16px,calc((100% - 860px)/2))}
  /* F07: telefono girato (viewport-fit=cover): l'isola dinamica copriva «Domanda 1 di 30»; sul desktop env() vale 0 e nulla cambia */
  .qi-shell .qi-top,.qi-shell .qi-pips,.qi-shell .qi-count,.qi-shell .qi-body{padding-left:max(24px,calc((100% - 860px)/2),calc(env(safe-area-inset-left) + 8px));padding-right:max(24px,calc((100% - 860px)/2),calc(env(safe-area-inset-right) + 8px))}
  .qi-shell .qi-bar{padding-left:max(16px,calc((100% - 860px)/2),env(safe-area-inset-left));padding-right:max(16px,calc((100% - 860px)/2),env(safe-area-inset-right))}
  .qi-shell .qcard--fig{display:grid;grid-template-columns:minmax(200px,36%) minmax(0,1fr);gap:28px;align-items:start}
  .qi-shell .qcard--fig .qcard__fig{margin:0}
  .qi-shell .qcard__text{font-size:clamp(22px,2.2vw,28px)}
  .qi-shell .qi-sheet--map{left:auto;right:max(16px,calc((100% - 860px)/2));width:min(340px,calc(100vw - 32px))}
}

/* --- l'hub: la schermata d'ingresso dei quiz ------------------------------------ */
.qh{max-width:720px;padding-block:clamp(28px,6vw,64px) 40px}
.qh__head{margin-bottom:18px}
.qh__title{margin:6px 0 0;font-size:clamp(34px,8vw,48px);line-height:1.05;letter-spacing:-.04em;color:#123a52}
.qh__list{display:grid;gap:12px}
.qh__foot{margin-top:22px}
.qh-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:84px;padding:14px 16px;
  border:1px solid #fff;border-radius:24px;color:#123a52;text-decoration:none;
  background:linear-gradient(145deg,#ffffffb0,#d5eaf36b);box-shadow:inset 0 1px #fff,0 10px 28px #426c9226;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:transform .16s,box-shadow .16s}
.qh-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px #fff,0 14px 32px #426c9233}
.qh-card:active{transform:scale(.985)}
.qh-card:focus-visible{outline:3px solid #0d5b88;outline-offset:3px}
.qh-card__ico{display:grid;place-items:center;width:52px;height:52px;border:1px solid #fff;border-radius:16px;background:#ffffff85}
.qh-card--blue .qh-card__ico{color:#1769a8}.qh-card--teal .qh-card__ico{color:#127d86}.qh-card--pink .qh-card__ico{color:#c2479a}
.qh-card--red .qh-card__ico{color:#b4283d}.qh-card--violet .qh-card__ico{color:#7a45c9}
.qh-card__txt{min-width:0}
.qh-card__title{display:block;font-size:20px;font-weight:750;letter-spacing:-.03em}
.qh-card__sub{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:#4b7087}
.qh-ring{position:relative;display:grid;place-items:center;width:52px;height:52px}
.qh-ring svg{position:absolute;inset:0}
.qh-ring b{font-size:12px;font-weight:800;color:#315e78;font-variant-numeric:tabular-nums}
.qh-ring__track{stroke:#cfe3ee}.qh-ring__fill{stroke:#2a8bc2}
.qh-card--pink .qh-ring__track{stroke:#f4d6e8}.qh-card--pink .qh-ring__fill{stroke:#d86bb0}

/* la cornice delle quattro sezioni interne */
.qs{max-width:1100px;padding-top:clamp(18px,4vw,36px)}
.qs__bar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.qs__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border:1px solid #fff;border-radius:15px;
  color:#174a68;font:inherit;font-weight:700;cursor:pointer;background:linear-gradient(145deg,#ffffffb8,#d3e8f470);box-shadow:inset 0 1px #fff,0 5px 14px #4b7a9b21}
.qs__back:focus-visible{outline:3px solid #0d5b88;outline-offset:2px}
.qs__title{margin:0;font-size:clamp(22px,5vw,30px);letter-spacing:-.03em;color:#123a52}

/* --- suggerimenti del primo accesso -------------------------------------------- */
.tour__scudo{position:fixed;inset:0;z-index:1300;background:transparent;touch-action:none}
.tour__luce{position:fixed;z-index:1301;pointer-events:none;border-radius:24px;
  box-shadow:0 0 0 200vmax rgba(8,24,40,.62),inset 0 0 0 2px #ffffffd0;transition:left .25s,top .25s,width .25s,height .25s}
.tour__luce[data-ridotto]{transition:none}
.tour__fumetto{position:fixed;z-index:1302;width:min(340px,calc(100vw - 24px));display:flex;flex-direction:column;gap:12px;outline:0}
.tour__fumetto[data-lato=sopra]{flex-direction:column-reverse}
.tour__carta{position:relative;padding:18px 18px 16px;border-radius:22px;background:#fff;color:#16384d;box-shadow:0 22px 60px #0b243c66}
.tour__punta{position:absolute;top:-7px;width:16px;height:16px;margin-left:-8px;border-radius:3px;background:#fff;transform:rotate(45deg)}
.tour__fumetto[data-lato=sopra] .tour__punta{top:auto;bottom:-7px}
.tour__fumetto[data-lato=fondo] .tour__punta{display:none}
.tour__titolo{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2a78a6}
.tour__testo{margin:0;font-size:17px;line-height:1.45}
.tour__piede{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.tour__puntini{display:flex;gap:7px}
.tour__puntini i{width:8px;height:8px;border-radius:50%;background:#c7dce9}
.tour__puntini i.is-fatto{background:#7fb4d3}
.tour__puntini i.is-on{background:#0d5b88}
.tour__avanti{min-width:96px;min-height:46px;padding:0 20px;border:0;border-radius:23px;color:#fff;font:inherit;font-weight:750;cursor:pointer;background:#0d5b88}
.tour__salta{align-self:flex-end;min-height:44px;padding:0 18px;border:0;border-radius:22px;color:#fff;font:inherit;font-size:14px;font-weight:650;cursor:pointer;background:#15212b}
.tour__avanti:focus-visible,.tour__salta:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #0d5b88}

/* --- la mascotte: sopra la nav, e nel quiz parte sopra la barra V/F --------------- */
.autopia-mascot{z-index:1110}
.autopia-quiz-active .autopia-mascot{right:max(12px,env(safe-area-inset-right));
  bottom:calc(var(--qi-bar-h) + var(--qi-dock) + env(safe-area-inset-bottom) + 12px)}

@media(prefers-reduced-motion:reduce){
  .qi-shell .qi-pips .pip,.qh-card,.tour__luce{transition:none}
  .qh-card:hover{transform:none}
}
@media(forced-colors:active){
  .qi-shell .qi-bar,.qi-shell .qi-sheet,.qh-card,.tour__carta{border:1px solid CanvasText}
  .qi-shell .qi-pips .pip.is-now{outline:2px solid CanvasText}
}

/* rifiniture dopo la prova su telefono (31/10) */
.qi-shell .qcard__top:empty{display:none}
.qh-ring svg{width:100%;height:100%}
@media(max-width:430px){
  .qh-card{gap:12px;padding:12px 14px;min-height:78px}
  .qh-card__ico,.qh-ring{width:46px;height:46px}
  .qh-card__title{font-size:18.5px}
  .qh-card__sub{font-size:12.5px}
}

/* su touch lo stato :hover resta appiccicato dopo il tocco (il tasto toccato restava grigio):
   lo stato di base si dichiara per intero e l'hover vale solo dove esiste un puntatore che passa */
.qi-shell button,.qi-shell a{-webkit-tap-highlight-color:transparent}
.qi-shell .answerbar .big-ans{background:linear-gradient(145deg,#ffffffa3,#d9effe5c);border-color:#fff;color:#174a68}
.qi-shell .answerbar .big-ans[aria-pressed=true]:not(.is-correct):not(.is-wrong){background:#b9e8ffe6;border-color:#1774a4;box-shadow:inset 0 0 0 1px #1774a4}
.qi-shell .answerbar .big-ans.is-correct{background:#d1f7e5e6;border-color:#27825e;color:#165d42}
.qi-shell .answerbar .big-ans.is-wrong{background:#ffe2e5e6;border-color:#b44155;color:#8e2339}
@media(hover:hover){
  .qi-shell .answerbar .big-ans:not([disabled]):not(.is-correct):not(.is-wrong):hover{background:#ffffffd6}
}
.qi-shell .qcard__feedback{scroll-margin-bottom:calc(var(--qi-dock) + 84px)}
body.qi-sheet-open .autopia-mascot{opacity:.16;pointer-events:none;transition:opacity .15s}

/* le schede argomento dentro la cornice delle sezioni: numero e nome in riga, barra vera, conteggi leggibili
   (prima il pulsante era un blocco con figli inline: nome attaccato al numero, barra e conteggi invisibili) */
.qs .topic--pick .topic__go{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:6px 12px;padding:16px 16px 12px}
.qs .topic--pick .topic__num{font-size:15px;letter-spacing:.04em;color:#06638f}
.qs .topic--pick .topic__name{font-size:19px;line-height:1.25;color:#153d53}
.qs .topic--pick .topic__meter{grid-column:1/-1;display:block;height:6px;margin-top:6px;border-radius:6px;background:#cfe3ee;overflow:hidden}
.qs .topic--pick .topic__meter i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2a8bc2,#1769a8)}
.qs .topic--pick .topic__foot{grid-column:1/-1;font-size:11px;letter-spacing:.08em;color:#42677c}
.qs .topic--pick .topic__exam{min-height:44px}

/* --- menu: «Quiz» è un gruppo che si apre (31/10) ----------------------------------------
   Sul telefono si apre dentro il pannello; dal desktop è una tendina sotto la barra. */
.nav-group{display:block}
.nav-group__btn{font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.nav-group__chev{flex:none;transition:transform .2s ease}
.nav-group__btn[aria-expanded="true"] .nav-group__chev{transform:rotate(180deg)}
.nav-group__sub[hidden]{display:none}
.nav__menu .nav-group__sub a::after{display:none}
.nav-group__btn:focus-visible,.nav-group__sub a:focus-visible{outline:3px solid #1689c1;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.nav-group__chev{transition:none}}
@media(max-width:999px){
  .nav__menu .nav-group__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;min-height:50px;padding:12px 16px;margin:0;border:0;border-bottom:1px solid #cbe3ed;border-radius:14px;background:transparent;color:#194f6d;font-size:16px;font-weight:650;line-height:26.4px;text-align:left}
  .nav__menu .nav-group__btn.is-current,.nav__menu .nav-group__btn[aria-expanded="true"]{background:#ffffff70;color:#075b82}
  .nav-group__sub{display:flex;flex-direction:column;gap:2px;margin:4px 0 8px 12px;padding:4px 0 4px 10px;border-left:2px solid #1689c133}
  .nav__menu .nav-group__sub a:not(.btn){min-height:46px;padding:9px 14px!important;font-size:15px!important;font-weight:600;border-bottom:0}
}
@media(max-width:999px) and (hover:hover){.nav__menu .nav-group__btn:hover{background:#ffffff73}}
@media(min-width:1000px){
  .nav-group{position:relative}
  .nav__menu .nav-group__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 0;border:0;background:transparent;color:#315c72;font-size:12px;font-weight:650;line-height:19.8px;white-space:nowrap}
  .nav__menu .nav-group__btn.is-current,.nav__menu .nav-group__btn[aria-expanded="true"]{padding-inline:11px;border-radius:12px;background:#ffffff70;color:#075b82}
  .nav-group__sub{position:absolute;top:calc(100% + 22px);left:-11px;z-index:2;min-width:240px;display:flex;flex-direction:column;gap:2px;padding:8px;border:1px solid #fff;border-radius:20px;background:rgba(229,247,255,.94);box-shadow:0 20px 60px #276a993b,inset 0 1px #fff;-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)}
  .nav__menu .nav-group__sub a:not(.btn){min-height:42px;padding:9px 14px;border-radius:12px;font-size:13px;color:#315c72}
  .nav__menu .nav-group__sub a[aria-current="page"]{padding-inline:14px;color:#075b82;background:#ffffff70}
  .nav__menu .nav-group__sub a:hover{background:#ffffff73;color:#194f6d}
}
/* ===== HOME-SWITCH · 01/11/2026 =====
   Il pulsante «Home» come interruttore 3D. Idea dal reel «Premium 3D Dark/Light Toggle» di @code_x_sg
   (https://www.instagram.com/reel/De11s9jvFSb): scanalatura incassata, pomello cilindrico con il suo lato e la sua ombra,
   scritta che si accende. A riposo è la versione chiara (azzurro ghiaccio); con il mouse, la tastiera o il tocco il pomello
   scorre e il colore si ribalta: scuro, con la scritta arancione come il rosso della macchina.
   Solo CSS: il link resta lo stesso, con lo stesso testo; pomello e icona sono ::before e ::after.
   Colori propri: non usa le variabili del vecchio tema scuro. */
@property --hs-t1{syntax:"<color>";inherits:true;initial-value:#bcdcee}
@property --hs-t2{syntax:"<color>";inherits:true;initial-value:#d9edf8}
@property --hs-t3{syntax:"<color>";inherits:true;initial-value:#eaf6fc}
@property --hs-rim{syntax:"<color>";inherits:true;initial-value:#9fd6ff00}
@property --hs-lip{syntax:"<color>";inherits:true;initial-value:#ffffffe6}
@property --hs-bloom{syntax:"<color>";inherits:true;initial-value:#4aa8ff00}
@property --hs-k1{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --hs-k2{syntax:"<color>";inherits:true;initial-value:#cdd8e8}
@property --hs-wall{syntax:"<color>";inherits:true;initial-value:#a9bbd0}
@property --hs-ink{syntax:"<color>";inherits:true;initial-value:#0a5f8a}
@property --hs-glow{syntax:"<color>";inherits:true;initial-value:#5ac8ffb3}
@property --hs-icon{syntax:"<color>";inherits:true;initial-value:#0f6fa6}
.home-switch{
  --hs-t1:#bcdcee;--hs-t2:#d9edf8;--hs-t3:#eaf6fc;--hs-rim:#9fd6ff00;--hs-lip:#ffffffe6;--hs-bloom:#4aa8ff00;
  --hs-k1:#ffffff;--hs-k2:#cdd8e8;--hs-wall:#a9bbd0;--hs-ink:#0a5f8a;--hs-glow:#5ac8ffb3;--hs-icon:#0f6fa6;
  --hs-h:44px;--hs-w:132px;--hs-k:34px;--hs-p:5px;--hs-go:calc(var(--hs-w) - var(--hs-k) - var(--hs-p) * 2);
  position:relative;display:inline-flex;align-items:center;flex:none;box-sizing:border-box;width:var(--hs-w);height:var(--hs-h);
  padding:0 14px 0 calc(var(--hs-k) + var(--hs-p) + 12px);border-radius:999px;
  font-size:12px;font-weight:800;line-height:1;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--hs-ink);text-shadow:0 1px 0 #ffffffd9,0 0 12px var(--hs-glow);cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,var(--hs-t1) 0%,var(--hs-t2) 55%,var(--hs-t3) 100%);
  box-shadow:inset 0 3px 7px #14547861,inset 0 2px 0 var(--hs-rim),inset 0 -2px 2px var(--hs-lip),0 1px 0 #fffffff2,0 0 0 1px #1d6a9a1f,0 0 22px var(--hs-bloom),0 12px 20px -10px #2a76a459;
  transition:--hs-t1 .5s ease,--hs-t2 .5s ease,--hs-t3 .5s ease,--hs-rim .5s ease,--hs-lip .5s ease,--hs-bloom .5s ease,--hs-k1 .5s ease,--hs-k2 .5s ease,--hs-wall .5s ease,--hs-ink .5s ease,--hs-glow .5s ease,--hs-icon .5s ease,padding .5s cubic-bezier(.4,0,.2,1)
}
.home-switch::before,.home-switch::after{content:"";position:absolute;left:var(--hs-p);top:var(--hs-p);width:var(--hs-k);height:var(--hs-k);border-radius:50%;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.home-switch::before{background:radial-gradient(circle at 34% 26%,var(--hs-k1) 0%,var(--hs-k2) 100%);box-shadow:0 3px 0 var(--hs-wall),0 5px 1px #1432501f,0 11px 14px #18406a52,inset 0 1px 2px #ffffffd9}
.home-switch::after{background:var(--hs-icon);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 3.5l9 7.7V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/17px 17px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.2 12 3.5l9 7.7V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/17px 17px no-repeat}
.home-switch:focus-visible,.home-switch:active{
  --hs-t1:#0d141c;--hs-t2:#18232f;--hs-t3:#26384a;--hs-rim:#9fd6ffb3;--hs-lip:#ffffff14;--hs-bloom:#4aa8ff59;
  --hs-k1:#737e90;--hs-k2:#242b35;--hs-wall:#0b0f14;--hs-ink:#e6f4ff;--hs-glow:#4aa8ff;--hs-icon:#bfe3ff;
  padding:0 calc(var(--hs-k) + var(--hs-p) + 12px) 0 14px
}
.home-switch:focus-visible::before,.home-switch:focus-visible::after,.home-switch:active::before,.home-switch:active::after{transform:translateX(var(--hs-go))}
@media (hover:hover){
  .home-switch:hover{
    --hs-t1:#0d141c;--hs-t2:#18232f;--hs-t3:#26384a;--hs-rim:#9fd6ffb3;--hs-lip:#ffffff14;--hs-bloom:#4aa8ff59;
    --hs-k1:#737e90;--hs-k2:#242b35;--hs-wall:#0b0f14;--hs-ink:#e6f4ff;--hs-glow:#4aa8ff;--hs-icon:#bfe3ff;
    padding:0 calc(var(--hs-k) + var(--hs-p) + 12px) 0 14px
  }
  .home-switch:hover::before,.home-switch:hover::after{transform:translateX(var(--hs-go))}
}
.home-switch:focus-visible{outline:3px solid #1689c1;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.home-switch,.home-switch::before,.home-switch::after{transition:none}}
@media (forced-colors:active){
  .home-switch{border:2px solid ButtonText;background:ButtonFace;color:ButtonText;text-shadow:none;box-shadow:none}
  .home-switch::before{background:ButtonText;box-shadow:none}
  .home-switch::after{background:ButtonFace}
  .home-switch:focus-visible,.home-switch:active{border-color:Highlight}
}
/* ===== /HOME-SWITCH ===== */
/* ===== HEADER-SWITCH · 01/11/2026 =====
   Richiesta di Renato (01/11, con i reel «Premium 3D Dark/Light Toggle» di @code_x_sg e «Glassy Dashboard V5»):
   «AUTOPIA più a sinistra. Il menu mobile è brutto, renderlo bello come i signal mandati».
   L'intestazione parla la lingua dell'interruttore 3D già usata per «Home»:
     · il logo è un PULSANTE HOME rotondo, non un interruttore (01/11: due prove scartate da Renato, una strada che scorre e un
       interruttore che scatta da solo; scelto fra tre proposte: «Tondo con anello neon»): la macchina sta dentro il disco, un solo
       elemento; intorno un anello di luce neon ruota senza fermarsi (blu-bianco e arancio, i due umori del reel «Premium 3D
       Light/Dark Toggle»), dietro un bagliore sfocato respira e la macchina sobbalza appena. SEMPRE attivo, senza bisogno del mouse;
       nessuna animazione cambia una dimensione; «meno movimento» ferma tutto. Premuto, il disco si abbassa. Il nome resta per gli
       screen reader (aria-label + testo sr-only);
     · il bottone «Menu» è un interruttore (01/11: «la scritta deve essere a sinistra dell'icona a 3 lineette, quindi va invertito»):
       a riposo scritta a sinistra e pomello con le tre righe a destra; da aperto il pomello scorre a sinistra, diventa una × e la
       scritta («Chiudi») passa a destra; ha anche un'animazione SEMPRE attiva (01/11: «mettiamo un'animazione sempre attiva anche
       sul pulsante menu, non cambiare lo stile, non cambiare la posizione»): un alone luminoso respira attorno al pomello e il
       bagliore della scritta pulsa, con lo stesso ritmo del logo; l'aspetto a riposo e la posizione non cambiano;
     · il pannello è di vetro, con le voci come scanalature; la pagina in cui si è è «accesa», «Accedi» è un tasto in rilievo.
   Solo CSS (più una seconda icona dentro il bottone). Colori e stati: gli stessi di «Home» (@property --hs-*). */
@media(max-width:999px){
  .nav>.nav__inner{grid-template-columns:minmax(0,1fr) auto;justify-items:start;padding-inline:12px;gap:10px}
  .nav>.nav__inner .brand{justify-self:start}
  .nav__inner .nav__burger{justify-self:end}
}
.nav .nav__burger{
  --hs-t1:#bcdcee;--hs-t2:#d9edf8;--hs-t3:#eaf6fc;--hs-rim:#9fd6ff00;--hs-lip:#ffffffe6;--hs-bloom:#4aa8ff00;
  --hs-k1:#ffffff;--hs-k2:#cdd8e8;--hs-wall:#a9bbd0;--hs-ink:#0a5f8a;--hs-glow:#5ac8ffb3;--hs-icon:#0f6fa6;
  --hs-w:124px;--hs-h:48px;--hs-k:36px;--hs-p:6px;--hs-gap:10px;--hs-go:calc(var(--hs-w) - var(--hs-k) - var(--hs-p) * 2);
  padding:0 calc(var(--hs-k) + var(--hs-p) + var(--hs-gap)) 0 14px;
  position:relative;box-sizing:border-box;flex:none;align-items:center;margin:0;width:var(--hs-w);height:var(--hs-h);min-height:var(--hs-h);
  border-radius:999px;color:var(--hs-ink);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,var(--hs-t1) 0%,var(--hs-t2) 55%,var(--hs-t3) 100%)!important;border:0!important;
  box-shadow:inset 0 3px 7px #14547861,inset 0 2px 0 var(--hs-rim),inset 0 -2px 2px var(--hs-lip),0 1px 0 #fffffff2,0 0 0 1px #1d6a9a1f,0 0 22px var(--hs-bloom),0 12px 20px -10px #2a76a459;
  transition:--hs-t1 .5s ease,--hs-t2 .5s ease,--hs-t3 .5s ease,--hs-rim .5s ease,--hs-lip .5s ease,--hs-bloom .5s ease,--hs-k1 .5s ease,--hs-k2 .5s ease,--hs-wall .5s ease,--hs-ink .5s ease,--hs-glow .5s ease,--hs-icon .5s ease,padding .5s cubic-bezier(.4,0,.2,1)
}
.nav .brand{--hs-d:58px;--hs-p:5px;--hs-pad:2.5px;--hs-face:calc(var(--hs-d) - var(--hs-p) * 2);--hs-k1:#ffffff;--hs-k2:#cdd8e8;--hs-wall:#a9bbd0;position:relative;display:inline-flex;box-sizing:border-box;flex:none;margin:0;padding:0;width:var(--hs-d);height:var(--hs-d);min-height:var(--hs-d);border-radius:50%;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;isolation:isolate;background:none!important;border:0!important}
.nav .brand::before,.nav .brand::after{content:"";position:absolute;border-radius:50%;pointer-events:none;background:conic-gradient(#7fd4ff 0deg,#ffffff 50deg,#4aa8ff 100deg,#c9d6e2 160deg,#ffffff 220deg,#2f7be0 290deg,#7fd4ff 360deg)}
.nav .brand::before{inset:-3px;filter:blur(9px);opacity:.75;animation:autopia-giro 6s linear infinite,autopia-respiro 3.2s ease-in-out infinite}
.nav .brand::after{inset:0;animation:autopia-giro 6s linear infinite}
.nav .brand .brand-car{position:absolute;z-index:1;left:var(--hs-p);top:var(--hs-p);box-sizing:border-box;width:var(--hs-face);height:var(--hs-face);max-width:none;margin:0;padding:var(--hs-pad);border-radius:50%;object-fit:contain;background:radial-gradient(circle at 34% 26%,var(--hs-k1) 0%,var(--hs-k2) 100%);box-shadow:0 3px 0 var(--hs-wall),0 5px 1px #1432501f,0 11px 14px #18406a52,inset 0 1px 2px #ffffffd9;animation:autopia-sobbalzo 1.8s ease-in-out infinite}
.nav .brand:active .brand-car{animation:none;transform:translateY(2px);box-shadow:0 1px 0 var(--hs-wall),0 2px 1px #1432501f,0 5px 8px #18406a52,inset 0 1px 2px #ffffffd9}
@keyframes autopia-giro{to{transform:rotate(360deg)}}
@keyframes autopia-respiro{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes autopia-sobbalzo{0%,100%{transform:translateY(0) rotate(0deg)}35%{transform:translateY(-1.5px) rotate(-1.2deg)}70%{transform:translateY(.5px) rotate(.8deg)}}
@keyframes autopia-respira-icona{0%,100%{box-shadow:0 3px 0 var(--hs-wall),0 5px 1px #1432501f,0 11px 14px #18406a52,inset 0 1px 2px #ffffffd9,0 0 0 0 transparent}50%{box-shadow:0 3px 0 var(--hs-wall),0 5px 1px #1432501f,0 11px 14px #18406a52,inset 0 1px 2px #ffffffd9,0 0 16px 4px var(--hs-glow)}}
@keyframes autopia-respira-testo{0%,100%{text-shadow:0 1px 0 #ffffffd9,0 0 12px var(--hs-glow),0 0 0 transparent}50%{text-shadow:0 1px 0 #ffffffd9,0 0 16px var(--hs-glow),0 0 7px var(--hs-glow)}}
.nav .nav__burger::before,.nav .nav__burger::after{content:none!important;display:none!important}
.nav .nav__burger .nav-menu-icon{position:absolute;left:var(--hs-p);top:calc(50% - var(--hs-k) / 2);display:grid;place-items:center;flex:none;width:var(--hs-k);height:var(--hs-k);border-radius:50%;background:radial-gradient(circle at 34% 26%,var(--hs-k1) 0%,var(--hs-k2) 100%);color:var(--hs-icon);box-shadow:0 3px 0 var(--hs-wall),0 5px 1px #1432501f,0 11px 14px #18406a52,inset 0 1px 2px #ffffffd9,0 0 0 0 transparent;transform:translateX(var(--hs-go));transition:transform .5s cubic-bezier(.4,0,.2,1);animation:autopia-respira-icona 3.2s ease-in-out infinite}
.nav .nav__burger .nav-menu-ico{grid-area:1/1;width:20px;height:20px;transition:opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1)}
.nav .nav__burger .nav-menu-ico--chiudi{opacity:0;transform:rotate(-90deg) scale(.5)}
.nav .nav__burger .nav-menu-label{display:block;flex:none;min-width:0;width:auto;height:auto;margin:0;padding:0;background:none;font-size:11px;font-weight:800;line-height:1;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--hs-ink);text-shadow:0 1px 0 #ffffffd9,0 0 12px var(--hs-glow),0 0 0 transparent;animation:autopia-respira-testo 3.2s ease-in-out infinite}
.nav .nav__burger[aria-expanded="true"]{
  --hs-t1:#0d141c;--hs-t2:#18232f;--hs-t3:#26384a;--hs-rim:#9fd6ffb3;--hs-lip:#ffffff14;--hs-bloom:#4aa8ff59;
  --hs-k1:#737e90;--hs-k2:#242b35;--hs-wall:#0b0f14;--hs-ink:#e6f4ff;--hs-glow:#4aa8ff;--hs-icon:#bfe3ff;
  padding:0 14px 0 calc(var(--hs-k) + var(--hs-p) + var(--hs-gap))
}
.nav .nav__burger[aria-expanded="true"] .nav-menu-icon{transform:none}
.nav .nav__burger[aria-expanded="true"] .nav-menu-ico--apri{opacity:0;transform:rotate(90deg) scale(.5)}
.nav .nav__burger[aria-expanded="true"] .nav-menu-ico--chiudi{opacity:1;transform:none}
.nav .nav__burger[aria-expanded="true"] .nav-menu-label{transform:none}
.nav .brand:focus-visible,.nav .nav__burger:focus-visible{outline:3px solid #1689c1;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .nav .nav__burger,.nav .nav__burger .nav-menu-icon,.nav .nav__burger .nav-menu-ico{transition:none}
  .nav .brand::before,.nav .brand::after,.nav .brand .brand-car,.nav .nav__burger .nav-menu-icon,.nav .nav__burger .nav-menu-label{animation:none}
}
@media (forced-colors:active){
  .nav .brand,.nav .nav__burger{border:2px solid ButtonText!important;background:ButtonFace!important;color:ButtonText;box-shadow:none}
  .nav .brand .brand-car,.nav .nav__burger .nav-menu-icon{background:ButtonText;color:ButtonFace;box-shadow:none;animation:none}
  .nav .nav__burger .nav-menu-label{animation:none}
  .nav .brand::before,.nav .brand::after{display:none}
}
@media(max-width:380px){.nav .brand{--hs-d:48px;--hs-p:4px;--hs-pad:2px}}
@media(max-width:900px){
  .nav .nav__menu{gap:8px;padding:12px!important;border:1px solid #fff!important;border-radius:28px!important;background:linear-gradient(180deg,#fbfeff 0%,#e7f4fb 100%)!important;box-shadow:0 26px 60px -14px #2a77a057,inset 0 1px 0 #fff,inset 0 -2px 8px #8fc4de40!important}
  .nav .nav__menu a:not(.btn),.nav .nav__menu .nav-group__btn{position:relative;display:flex;align-items:center;box-sizing:border-box;width:100%;min-height:52px;margin:0;padding:0 22px;border:0!important;border-radius:999px;color:#0a5f8a!important;font-size:15px!important;font-weight:700;letter-spacing:.01em;background:linear-gradient(180deg,#cfe6f3 0%,#e3f2fa 60%,#eef8fd 100%)!important;box-shadow:inset 0 3px 7px #14547848,inset 0 -2px 2px #ffffffe6,0 1px 0 #fffffff0;transition:color .3s ease,box-shadow .3s ease}
  .nav .nav__menu a:not(.btn)::after{content:none}
  .nav .nav__menu a:not(.btn):active,.nav .nav__menu .nav-group__btn:active,.nav .nav__menu a[aria-current="page"],.nav .nav__menu .nav-group__btn.is-current{color:#e6f4ff!important;text-shadow:0 0 6px #4aa8ff,0 0 14px #4aa8ff99;background:linear-gradient(180deg,#0d141c 0%,#18232f 60%,#26384a 100%)!important;box-shadow:inset 0 2px 0 #9fd6ffb3,inset 0 -2px 2px #ffffff14,0 0 0 1px #9fd6ff33,0 0 18px #4aa8ff40,0 10px 18px -10px #00000066}
  .nav .nav__menu a[aria-current="page"]::after{content:"";display:block;position:absolute;left:auto;right:13px;top:50%;bottom:auto;transition:none;width:26px;height:26px;margin-top:-13px;border-radius:50%;background:radial-gradient(circle at 34% 26%,#737e90 0%,#242b35 100%);box-shadow:0 3px 0 #0b0f14,0 8px 10px #00000066,inset 0 1px 2px #ffffff40;transform:none}
  .nav .nav__menu a.nav-access{justify-content:center;margin-top:4px;color:#fff!important;font-weight:800;letter-spacing:.02em;text-shadow:none;background:linear-gradient(180deg,#2f77a6 0%,#1d5a86 100%)!important;box-shadow:inset 0 1px 0 #ffffff59,0 3px 0 #164a70,0 12px 20px -8px #164a7099}
  .nav .nav__menu a.nav-access:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #ffffff40,0 1px 0 #164a70,0 6px 12px -6px #164a7099}
  .nav .nav__menu .nav-group__sub{gap:6px;margin:6px 0 4px 14px;padding:2px 0 2px 12px}
  .nav .nav__menu .nav-group__sub a:not(.btn){min-height:46px;padding:0 18px!important;font-size:14px!important}
}
/* Logo (03/11/2026, Renato: «DEVE ESSERCI SCRITTO AUTOPIA» e «la strada si illumina/muove come il cerchio, senza arancione»):
   accanto al badge rotondo, fuori dal cerchio ma dentro lo stesso collegamento, c'è la scritta AUTOPIA con la strada sotto. La strada respira con lo
   stesso ritmo del badge (3,2 s) con un alone celeste e bianco; la luce che scorre sull'asfalto e i tratti che si accendono stanno dentro l'SVG. */
.nav .brand .brand-scritta{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);height:34px;width:auto;max-width:none;pointer-events:none;animation:autopia-luce-strada 3.2s ease-in-out infinite}
@media (max-width:520px){.nav .brand .brand-scritta{height:26px;left:calc(100% + 9px)}}
@keyframes autopia-luce-strada{0%,100%{filter:drop-shadow(0 0 0 #7fd4ff00)}50%{filter:drop-shadow(0 0 7px #7fd4ffcc) drop-shadow(0 0 2px #ffffffe6)}}
/* ===== /HEADER-SWITCH ===== */

/* A09 calendario reale: scelta dello studente (stesso aspetto dei campi del pannello) */
.calendar-admin select{width:100%;padding:12px;border:1px solid #c4e5f1;border-radius:12px;background:#fff;color:#17384e}
.calendar-pick{margin-top:16px}
.calendar-admin select{min-height:48px;background-image:linear-gradient(45deg,transparent 50%,#46768b 50%),linear-gradient(135deg,#46768b 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;-webkit-appearance:none;appearance:none;padding-right:40px}
/* F01 contrasto (WCAG 1.4.3): il lettore audio ha fondo scuro, quindi testi chiari solo qui dentro (8,3-12:1 sul suo fondo) */
.player{--text:#e6f0f6;--text-2:#c9dbe6;--text-3:#a9c2d1;--text-4:#9fb8c7;color:var(--text)} /* il colore ereditato dal body è già risolto: va ridichiarato qui */
/* F02 (WCAG 2.2.2): «Ferma le animazioni» ferma anche logo, Menu e le altre animazioni infinite; non le brevi (toast, conferme), che ferme al primo fotogramma sparirebbero */
:is(.motion-paused,.ambient-hidden) :is(.nav .brand .brand-car,.nav .nav__burger .nav-menu-icon,.nav .nav__burger .nav-menu-label,.hero__hint span:last-child,.stop.is-now .stop__dot,.typing i),:is(.motion-paused,.ambient-hidden) .nav .brand::before,:is(.motion-paused,.ambient-hidden) .nav .brand::after{animation-play-state:paused!important} /* gli pseudo-elementi non valgono dentro :is() */
/* F03 (CLS): spazio riservato ai blocchi che gli script riempiono dopo il primo disegno (misurato a 320-1280 px); vale solo finché sono vuoti o in caricamento */
.advice[data-ready]:empty{min-height:450px}.kpi-grid[data-kpi]:empty{min-height:874px}.qh__list[data-hub-root]:has(> .lede:only-child){min-height:438px}
@media (max-width:359px){.advice[data-ready]:empty{min-height:526px}.kpi-grid[data-kpi]:empty{min-height:906px}.qh__list[data-hub-root]:has(> .lede:only-child){min-height:518px}}
@media (min-width:420px){.advice[data-ready]:empty{min-height:379px}.qh__list[data-hub-root]:has(> .lede:only-child){min-height:469px}}
@media (min-width:560px){.advice[data-ready]:empty{min-height:340px}}
@media (min-width:768px){.advice[data-ready]:empty{min-height:350px}.kpi-grid[data-kpi]:empty{min-height:589px}}
@media (min-width:1024px){.advice[data-ready]:empty{min-height:360px}.kpi-grid[data-kpi]:empty{min-height:410px}}

/* F07 — Mobile e tastiera. Sotto i 1024 px (telefoni e tablet) ogni bersaglio toccabile copre almeno 44×44 px.
   Dove il riquadro si vede (pulsanti, chip, campi) cresce di pochi pixel; dove è trasparente o fa parte del design approvato
   (footer, home) si allarga solo l'area di tocco con uno pseudo-elemento invisibile, che non sposta nulla. Lo slider della
   lezione è alto 44 px con un margine negativo che lo compensa: stessa impaginazione. */
.filters select{max-width:100%;min-width:0}
@media (max-width:1023px){
  .btn,.spunta,.speed,.skip,.filters select,.chat__suggest .chip,.stop__check{min-height:44px}
  .player__btn--quiet{width:44px;height:44px}
  input[type="range"]{height:44px;margin-block:-15px}
  /* la casella sta al bordo sinistro dell'etichetta: l'area si estende a sinistra senza spostare nulla */
  .stop__check{padding-left:14px;margin-left:-14px}
  /* accanto al menu (sopra i 720 px) servono 16 px, o l'area della casella finisce sul menu */
  .filters{column-gap:16px}
  /* Safari desktop e iPad ignorano min-height su un select con l'aspetto nativo: lo stesso aspetto del calendario */
  .filters select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,#46768b 50%),linear-gradient(135deg,#46768b 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
  /* a capo, due righe di link a 18 px avevano i centri a 37 px: le aree da 44 px si sovrapponevano */
  .autopia-footer{row-gap:26px}
  :is(.autopia-footer>a,.cockpit-bottom a,.floating-note button,.access-card>a,.link-more,.transcript>summary){position:relative}
  :is(.autopia-footer>a,.cockpit-bottom a,.floating-note button,.access-card>a,.link-more,.transcript>summary)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
}
/* a 320 px un pulsante lungo dentro un pannello stretto sbordava (la mia patente): va a capo invece di uscire */
@media (max-width:479px){.btn{max-width:100%;white-space:normal;text-align:center}}

/* ---------- Ice12 (03/11/2026) — Renato: «il background deve essere più uniforme e senza errore» ----------
   UN solo sfondo fisso, continuo e uguale su tutte le pagine: niente pareti a bande, niente linea d'orizzonte, niente pavimento a griglia
   dietro i contenuti. Quattro gradienti morbidi fra colori vicini (nessun salto), nessun blur a tutto schermo, nessun transform 3D. */
body{background:#c5dce8}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:none;
  background:
    radial-gradient(120% 70% at 50% -10%,#f8fdffd9 0%,#f8fdff00 60%),
    radial-gradient(80% 60% at 8% 105%,#9cc3da99 0%,#9cc3da00 65%),
    radial-gradient(80% 60% at 92% 105%,#a6cbe0a6 0%,#a6cbe000 65%),
    linear-gradient(180deg,#d9edf7 0%,#c5dce8 55%,#b7d2e2 100%)}
/* le vecchie classi restano nel CSS ma spente, così un service worker con l'HTML vecchio non fa riapparire la stanza */
.ice-environment,.ice-wall,.ice-floor,.ice-beam{display:none!important}

/* ---------- Statistiche generali (03/11/2026): grafici SVG e elenco degli argomenti ---------- */
.chartbox{margin:0 0 28px;max-width:640px}.chartbox .h3{margin:0 0 10px}
.chart{display:block;width:100%;max-width:100%;height:auto}.chart rect{fill:#1f78b4}.chart .chart__rosso{fill:#c0392b}
.chart text{font:10px/1 system-ui,-apple-system,sans-serif;fill:#456b80}.chart .chart__soglia{stroke:#c0392b;stroke-width:1;stroke-dasharray:4 3}
.stati{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.stato{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9)}
.stato__n{font-weight:700;color:#0b6a9a}.stato a{color:inherit;text-decoration:none;font-weight:600}.stato strong{font-size:12px;color:#456b80}
.stato--letto-e-quiz strong{color:#0a7a45}.stato--da-iniziare strong{color:#6b7c89}

/* ===== MARCHIO NEL PIÈ DI PAGINA: lo stesso logo dell'intestazione (auto + scritta con la strada), senza la vecchia stellina ===== */
.autopia-footer .autopia-wordmark{gap:10px}
.autopia-footer .autopia-wordmark .brand-car{width:54px;height:37px}
.autopia-footer .autopia-wordmark .brand-scritta{display:block;height:26px;width:auto;max-width:none}

/* Barre senza numero davanti (statistiche generali e ripasso): il nome occupa tutto lo spazio, la barra sta sotto */
.bar--libera{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
.bar--libera .bar__name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.bar--libera .bar__track{grid-column:1/-1}

/* ===== FX — clic glassy (assets/js/fx.js). Solo bianco, celeste, azzurro e argento. Gli elementi li crea e li toglie il modulo. ===== */
.fx-host{position:relative}
.fx-clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;contain:paint}
.fx-wave{position:absolute;left:var(--x,50%);top:var(--y,50%);width:12px;height:12px;margin:-6px 0 0 -6px;box-sizing:border-box;border-radius:50%;pointer-events:none;background:rgba(255,255,255,var(--op,.55));border:1px solid rgba(191,232,255,.7);will-change:transform,opacity;animation:fx-wave var(--dur,520ms) cubic-bezier(.25,.46,.45,.94) forwards}
.fx-wave--liscia{border:0}
@keyframes fx-wave{from{transform:scale(1);opacity:1}to{transform:scale(var(--s,20));opacity:0}}
.fx-shine{position:absolute;top:-10%;bottom:-10%;left:0;width:38%;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0));transform:translateX(-158%) skewX(-18deg)}
.fx-shine.on{animation:fx-shine var(--d,480ms) cubic-bezier(.4,0,.2,1) forwards;will-change:transform,opacity}
@keyframes fx-shine{from{transform:translateX(-158%) skewX(-18deg);opacity:1}to{transform:translateX(421%) skewX(-18deg);opacity:1}}
.fx-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 1px #fff,0 0 12px rgba(94,201,255,.65),0 0 28px rgba(22,137,193,.35)}
.fx-ring.on{animation:fx-ring var(--d,800ms) ease-out forwards}
@keyframes fx-ring{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.fx-pulse{animation:fx-pulse var(--d,220ms) ease-out}
@keyframes fx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(94,201,255,0)}45%{box-shadow:0 0 0 2px #fff,0 0 14px rgba(94,201,255,.65)}}
.fx-layer{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;contain:strict}
.fx-spark{position:absolute;width:var(--sz,3px);height:var(--sz,3px);margin:calc(var(--sz,3px) / -2) 0 0 calc(var(--sz,3px) / -2);border-radius:50%;background:var(--c,#fff);box-shadow:0 0 6px var(--c,#fff);will-change:transform,opacity;animation:fx-spark 420ms ease-out forwards}
@keyframes fx-spark{from{transform:translate(0,0) scale(1);opacity:1}to{transform:translate(var(--dx,0),var(--dy,0)) scale(.2);opacity:0}}
/* pressione: scende subito (90 ms) e risale piano; le risposte del quiz non aspettano mai */
.a-button:active,.btn:active,.chip:active,.quick-card:active{transition-duration:90ms}
.quick-card:active{transform:translateY(1px) scale(.992)}
.ans:active,.big-ans:active{transform:translateY(1px) scale(.985);transition-duration:60ms}
.nav__menu a:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.fx-layer,.fx-wave,.fx-shine,.fx-ring{display:none!important}.fx-pulse{animation:none}}
@media (forced-colors:active){.fx-layer,.fx-wave,.fx-shine,.fx-ring{display:none!important}.fx-pulse{animation:none}}

/* ===== AUTO NEON (assets/js/auto-neon.js): tilt 3D, contorno luminoso, sequenza al tocco. Solo bianco, celeste, azzurro. ===== */
.hero-art.is-3d{perspective:1100px}
.car-neon{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity 280ms ease-out;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px rgba(94,201,255,.9)) drop-shadow(0 0 22px rgba(22,137,193,.55))}
.autoai-portrait.is-neon .car-neon{opacity:1}
.autoai-portrait.is-neon::after{animation:none;background:radial-gradient(170px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);background-size:auto;background-position:0 0;mix-blend-mode:screen;opacity:.85}
.car-fx{position:absolute;inset:0;z-index:3;pointer-events:none}
.car-lamp{position:absolute;aspect-ratio:1;border-radius:50%;opacity:0;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0%,#bfe8ff 45%,rgba(191,232,255,0) 72%)}
.car-fx.on .car-lamp{animation:car-lamp 1300ms ease-out}
@keyframes car-lamp{0%{opacity:0}9%{opacity:1}70%{opacity:1}100%{opacity:0}}
.car-pulse{position:absolute;left:50%;top:55%;width:100%;aspect-ratio:3/2;box-sizing:border-box;border:1px solid #5ec9ff;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.1);box-shadow:0 0 12px rgba(94,201,255,.7)}
.car-fx.on .car-pulse{animation:car-pulse 600ms 120ms cubic-bezier(.16,1,.3,1) forwards}
@keyframes car-pulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
.car-lid{position:absolute;border-radius:50%;opacity:0;transform:scaleY(0);transform-origin:50% 0;background:radial-gradient(#3a8fdc,#1f62b8)}
.car-fx.on .car-lid{animation:car-blink 240ms 500ms ease-in-out}
@keyframes car-blink{0%,100%{opacity:1;transform:scaleY(0)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.car-neon,.car-fx{display:none!important}}
@media (forced-colors:active){.car-neon,.car-fx{display:none!important}}

/* Home: la scheda del minigioco occupa tutta la riga sotto le altre sei (nessuna scheda orfana nella griglia a 3). */
.quick-card--gioco{grid-column:1/-1;min-height:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon label arrow" "icon title arrow" "icon text arrow";align-items:center;column-gap:18px;row-gap:2px;padding-block:18px}
.quick-card--gioco .quick-icon{grid-area:icon;align-self:center}
.quick-card--gioco .quick-label{grid-area:label}
.quick-card--gioco strong{grid-area:title;margin-top:0}
.quick-card--gioco p{grid-area:text;max-width:none;margin-top:0}
.quick-card--gioco .quick-arrow{grid-area:arrow;position:static}
@media(max-width:680px){.quick-card--gioco{grid-template-columns:auto 1fr;grid-template-areas:"icon label" "icon title" "icon text"}.quick-card--gioco .quick-arrow{display:none}}

/* ===== LOGO-RETTANGOLO · 03/11/2026 =====
   Renato (03/11): «il cerchio fallo diventare un rettangolo che prende tutto il logo (la macchina deve far parte del Logo)».
   Prima: disco con la macchina dentro e la scritta FUORI, accanto. Ora: UN rettangolo di vetro con l'anello conico azzurro/bianco/argento che gira
   (un ANGOLO animato con @property, non l'elemento: ruotare un rettangolo lo deformerebbe), dentro la macchina — che sporge appena dal bordo, perché
   «fa parte del logo» — e la scritta AUTOPIA con la strada. La faccia è .autopia-wordmark (già contiene le due immagini): nessuna modifica all'HTML.
   Proporzioni (Fable, brief C D10): alto 58 px desktop / 46 sotto 520 / 40 sotto 380; raggio 18/14/12; anello 3 px; sempre attivo, «meno movimento» lo ferma. */
@property --lg-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes autopia-giro-rett{to{--lg-ang:360deg}}
.nav .brand{--lg-h:58px;--lg-p:3px;--lg-r:18px;--lg-car:66px;--lg-txt:30px;width:auto;max-width:100%;height:var(--lg-h);min-height:var(--lg-h);border-radius:var(--lg-r)}
.nav .brand::before,.nav .brand::after{border-radius:var(--lg-r);background:conic-gradient(from var(--lg-ang),#7fd4ff 0deg,#ffffff 50deg,#4aa8ff 100deg,#c9d6e2 160deg,#ffffff 220deg,#2f7be0 290deg,#7fd4ff 360deg);transform:none}
/* lo strato sfocato NON ridisegna l'angolo a ogni frame (costoso: blur + gradiente): resta fermo e respira solo di opacità; gira soltanto l'anello sottile (dopo) */
.nav .brand::before{animation:autopia-respiro 3.2s ease-in-out infinite}
.nav .brand::after{animation:autopia-giro-rett 6s linear infinite}
.nav .brand .autopia-wordmark{position:relative;z-index:1;display:flex;align-items:center;gap:6px;box-sizing:border-box;flex:none;margin:var(--lg-p);height:calc(var(--lg-h) - var(--lg-p) * 2);padding:0 14px 0 8px;border-radius:calc(var(--lg-r) - var(--lg-p));background:linear-gradient(160deg,var(--hs-k1) 0%,var(--hs-k2) 100%);box-shadow:0 3px 0 var(--hs-wall),0 5px 1px #1432501f,0 11px 14px #18406a52,inset 0 1px 2px #ffffffd9;transition:transform .12s ease,box-shadow .12s ease}
.nav .brand .brand-car{position:relative;left:auto;top:auto;z-index:1;box-sizing:content-box;flex:none;width:var(--lg-car);height:auto;max-width:none;margin:0;padding:0;border-radius:0;background:none;box-shadow:none;object-fit:contain;filter:drop-shadow(0 5px 4px #12385c59) drop-shadow(-1px -1px 1px #ffffffd9);transform:translate(-5px,-4px);animation:autopia-sobbalzo-rett 1.8s ease-in-out infinite}
.nav .brand .brand-scritta{position:static;left:auto;top:auto;transform:none;flex:none;height:var(--lg-txt);width:auto;max-width:none}
.nav .brand:active .autopia-wordmark{transform:translateY(2px);box-shadow:0 1px 0 var(--hs-wall),0 2px 1px #1432501f,0 5px 8px #18406a52,inset 0 1px 2px #ffffffd9}
.nav .brand:active .brand-car{animation:none;box-shadow:none;transform:translate(-5px,-4px)}
@keyframes autopia-sobbalzo-rett{0%,100%{transform:translate(-5px,-4px) rotate(0deg)}35%{transform:translate(-5px,-5.5px) rotate(-1.2deg)}70%{transform:translate(-5px,-3.5px) rotate(.8deg)}}
@media (max-width:520px){.nav .brand{--lg-h:46px;--lg-p:2.5px;--lg-r:14px;--lg-car:54px;--lg-txt:23px}.nav .brand .autopia-wordmark{padding:0 10px 0 6px;gap:4px}}
/* sotto i 380 px il bersaglio resta ≥44 px di altezza (soglia del gate mobile: 44×44) */
@media (max-width:380px){.nav .brand{--lg-h:44px;--lg-p:2px;--lg-r:12px;--lg-car:46px;--lg-txt:21px}.nav .brand .autopia-wordmark{padding:0 8px 0 5px;gap:3px}}
@media (prefers-reduced-motion:reduce){
  .nav .brand::before,.nav .brand::after,.nav .brand .brand-car{animation:none}
  .nav .brand .autopia-wordmark{transition:none}
}
@media (forced-colors:active){
  .nav .brand .autopia-wordmark{border:2px solid ButtonText;background:ButtonFace;box-shadow:none}
  .nav .brand .brand-car{filter:none}
}
/* ===== /LOGO-RETTANGOLO ===== */
.nav .brand .brand-scritta{margin-left:-8px}
@media (max-width:520px){.nav .brand .brand-scritta{margin-left:-7px}}

/* ===== CARD-RETTANGOLARI · 03/11/2026 =====
   Renato (02/11, punto 4): «la card deve avere formato RETTANGOLARE» (era un quadrato con angoli molto arrotondati).
   Renato (03/11): «le card nel testo della home siano rettangolari». Al telefono le sei card erano 174×198 px (più alte che larghe).
   Ora: stesso schema della card del minigioco (icona a sinistra, testo, freccia a destra); al telefono una card per riga. */
.quick-grid .quick-card:not(.quick-card--gioco){display:grid;grid-template-columns:32px 1fr auto;grid-template-areas:"icon label arrow" "icon title arrow" "icon text arrow";align-items:center;text-align:left;column-gap:16px;row-gap:2px;min-height:0;padding:18px 20px}
.quick-grid .quick-card{border-radius:16px}
.quick-grid .quick-card:not(.quick-card--gioco) .quick-icon{grid-area:icon;align-self:center;justify-self:center;margin:0;width:32px}
.quick-grid .quick-card:not(.quick-card--gioco) .quick-label{grid-area:label;min-height:0;justify-content:flex-start}
.quick-grid .quick-card:not(.quick-card--gioco) strong{grid-area:title;margin-top:0}
.quick-grid .quick-card:not(.quick-card--gioco) p{grid-area:text;max-width:none;margin:2px 0 0;padding-bottom:0}
.quick-grid .quick-card:not(.quick-card--gioco) .quick-arrow{grid-area:arrow;position:static}
.quick-grid .quick-card--gioco{text-align:left}
.quick-grid .quick-card--gioco .quick-label{justify-content:flex-start;min-height:0}
.journey-glass{border-radius:18px}
@media(max-width:680px){
  .quick-grid{grid-template-columns:1fr}
  .quick-grid .quick-card:not(.quick-card--gioco){padding:15px 16px;column-gap:14px}
  .journey-glass{padding:24px 22px}
}
/* ===== /CARD-RETTANGOLARI ===== */

/* ===== STRETTO · 03/11/2026 =====
   Renato (03/11, schermata a ~280 px): il logo copriva il MENU, il titolo toccava i bordi, «più.» restava da solo su una riga,
   la mascotte copriva il testo. Righe bilanciate ovunque; sotto i 360 px logo e MENU si stringono, il titolo scende con la larghezza
   e la mascotte rimpicciolisce (resta ≥ 44 px: soglia del gate mobile). */
.hero-copy h1,.hero-copy>p,.autopia-kicker,.cockpit-top>span,.parti-auto__intro h2,.parti-auto__intro>p{text-wrap:balance}
@media(max-width:360px){
  .nav .brand{--lg-car:38px;--lg-txt:18px}
  .nav .brand .autopia-wordmark{padding:0 6px 0 4px;gap:2px}
  .nav .nav__burger .nav-menu-label{display:none}
  .nav .nav__burger{--hs-w:52px;width:52px;min-width:52px}
  .nav .nav__burger .nav-menu-icon{left:calc(50% - var(--hs-k) / 2);transform:none}
  .hero-copy h1{font-size:clamp(30px,11.4vw,41px)}
  .autopia-mascot{width:72px;height:64px;border-radius:20px}
  .autopia-mascot img{width:64px;height:42px}
  .autopia-mascot small{display:none}
}
/* ===== /STRETTO ===== */