/* Workshop A.I. con Federico Vitiello · l'esperienza «Mentre dormi»
   Regole: stato di default = stato finale; il movimento sta dentro @supports e prefers-reduced-motion. */
@font-face{font-family:"Tstar-Pro";src:url(font/Tstar-Pro-Light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Tstar-Pro";src:url(font/Tstar-Pro-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Tstar-Pro";src:url(font/Tstar-Pro-Medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"Tstar-Pro";src:url(font/Tstar-Pro-Bold.woff) format("woff");font-weight:700;font-display:swap}

:root{
  --notte:#00141B;--navy:#002633;--blu:#00506A;--blu80:#006A8A;--blu60:#4FB3CC;--blu40:#9AD3E0;--lav:#E0F1F5;
  --ardesia:#234652;--ard60:#5A7A85;--linea:#C6D7DC;--carta:#F1F7F9;--giallo:#E8C766;--ambra:#F0A43A;
  --testo:"Tstar-Pro","Helvetica Neue",Arial,sans-serif;--motto:"Archivo Black","Tstar-Pro",sans-serif;
  --esce:cubic-bezier(.16,1,.3,1);--reg:340px;--dx:0px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--notte);color:var(--lav);font-family:var(--testo);font-size:18px;line-height:1.55;font-weight:300;overflow-x:hidden}
::selection{background:var(--blu);color:#fff}
input,button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--giallo);outline-offset:3px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blu40);text-underline-offset:4px}
strong,b{font-weight:500;color:#fff}
html{scrollbar-color:var(--blu) var(--notte)}
.salta{position:absolute;left:16px;top:-80px;z-index:100;background:var(--giallo);color:var(--notte);padding:12px 18px;font-weight:500}
.salta:focus{top:16px}

/* il cielo */
.cielo{position:fixed;inset:0;z-index:-1;background:var(--notte);pointer-events:none}
.cielo-giorno{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 120%,rgba(0,80,106,.55),transparent 60%),linear-gradient(to top,#0A3C4C,var(--notte) 75%);opacity:.35}
.stelle{position:absolute;inset:0;width:100%;height:100%}

/* barra */
.barra{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px max(16px,4vw);pointer-events:none}
.barra>*{pointer-events:auto}
.barra::before{content:"";position:absolute;inset:0 0 -24px;z-index:-1;background:linear-gradient(var(--notte) 35%,rgba(0,20,27,0));opacity:0;transition:opacity .3s}
.scorsa .barra::before{opacity:1}
.su-chiaro .barra::before{background:linear-gradient(var(--lav) 35%,rgba(224,241,245,0))}
.radiografia .barra::before{opacity:0}
.marchio{display:block;width:96px;color:#fff}
.marchio svg{width:100%;height:auto;display:block;overflow:visible}
.barra-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(224,241,245,.45);color:#fff;text-decoration:none;font-size:15px;font-weight:400;background:rgba(0,20,27,.55);backdrop-filter:blur(6px);transition:background .25s,border-color .25s}

/* il registro dell'agente */
.registro{position:fixed;z-index:30;right:max(16px,2vw);top:110px;width:var(--reg);max-height:calc(100vh - 140px);background:rgba(0,20,27,.86);border:1px solid rgba(79,179,204,.35);backdrop-filter:blur(8px);font-size:14px;line-height:1.45;display:flex;flex-direction:column}
.registro-testa{display:flex;align-items:center;gap:10px;padding:0 4px 0 16px;border-bottom:1px solid rgba(79,179,204,.25);min-height:46px;color:var(--blu40);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.registro-testa span:nth-child(2){flex:1}
.punto{width:8px;height:8px;border-radius:50%;background:var(--giallo);flex:none}
.registro-piega{width:44px;height:44px;border:0;background:none;color:var(--lav);cursor:pointer;display:grid;place-items:center}
.registro-piega svg{width:16px;height:16px;transition:transform .3s var(--esce)}
.registro.piegato .registro-piega svg{transform:rotate(180deg)}
.registro.piegato .registro-righe{display:none}
.registro-righe{list-style:none;margin:0;padding:10px 16px 14px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.registro-righe li{display:grid;grid-template-columns:44px 1fr;gap:8px;color:var(--lav)}
.registro-righe time{color:var(--blu60);font-variant-numeric:tabular-nums}
.registro-righe li.speciale{color:var(--giallo)}
.registro-righe li.speciale time{color:var(--giallo)}
@media (min-width:1180px){:root{--dx:calc(var(--reg) + 3vw)}}
@media (max-width:1179px){
  .registro{left:0;right:0;top:auto;bottom:0;width:auto;max-height:42vh;border-width:1px 0 0}
  .registro.piegato{max-height:46px}
  .registro-righe{flex-direction:column-reverse}
  body{padding-bottom:150px}
}

/* struttura */
.giro{width:min(860px,calc(100% - max(16px,6vw) - 16px - var(--dx)));margin-left:max(16px,6vw);margin-right:auto}
.capitolo{position:relative;padding:clamp(64px,10vh,120px) 0}
.titolo-grande{font-family:var(--testo);font-weight:700;color:#fff;font-size:clamp(36px,5.6vw,76px);line-height:.98;letter-spacing:-.035em;margin:0 0 .45em;text-wrap:balance}
.grande{font-size:clamp(21px,2.3vw,28px);line-height:1.38;color:#fff;font-weight:300;max-width:34em}
.guida{max-width:36em;margin:0 0 24px;color:var(--lav)}
.due{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.due p{margin:0}
.nota-piccola{font-size:14px;color:var(--blu40);max-width:40em}
mark.dc{background:var(--giallo);color:var(--notte);padding:0 6px;font-weight:500;font-size:.85em}

/* bottoni */
.bottone{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;background:var(--blu);color:#fff;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:.04em;border:0;cursor:pointer;transition:background .25s,transform .35s var(--esce),box-shadow .25s;transform:translate(var(--bx,0px),var(--by,0px))}
.bottone:active{transform:translate(var(--bx,0px),var(--by,0px)) scale(.97)}
.bottone.secondario{background:transparent;border:1px solid currentColor;color:inherit}
.grande-b{min-height:64px;font-size:21px;padding:0 40px}
.link-freccia{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:#fff;font-weight:500}
.link-freccia svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .bottone:hover{background:var(--blu80);transform:translate(var(--bx,0px),calc(var(--by,0px) - 2px));box-shadow:0 12px 30px rgba(0,80,106,.35)}
  .bottone.secondario:hover{background:rgba(0,80,106,.12)}
  .barra-cta:hover{background:var(--blu);border-color:var(--blu)}
  .link-freccia:hover svg{transform:translate(2px,-2px)}
}

/* apertura */
.apertura{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px 0 56px;overflow:hidden}
.apertura-video{position:absolute;inset:0;z-index:-1}
.video-sfondo{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.velo{position:absolute;inset:0;background:linear-gradient(to top,var(--notte) 8%,rgba(0,20,27,.72) 45%,rgba(0,20,27,.55)),rgba(0,80,106,.12)}
.apertura-testo{width:min(1180px,calc(100% - max(16px,6vw) - 16px - var(--dx)));margin-left:max(16px,6vw)}
.ospiti{margin:0 0 18px;font-size:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--giallo)}
.motto{font-family:var(--motto);font-weight:400;text-transform:uppercase;color:#fff;font-size:clamp(50px,min(9.4vw,15.5vh),150px);line-height:.86;letter-spacing:-.04em;margin:0 0 28px;position:relative}
.motto .riga{display:block}
.motto .r2{color:var(--blu60)}
.sottotitolo{font-size:clamp(19px,2vw,24px);line-height:1.4;max-width:30em;color:#fff;margin:0 0 30px}
.quando{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;margin:0 0 34px}
.data{border:0;background:none;padding:0;cursor:pointer;text-align:left;color:#fff;display:grid;min-height:44px}
.data-num{font-family:var(--testo);font-weight:700;font-size:clamp(46px,6vw,80px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.data-num i{font-style:normal;color:var(--giallo);margin:0 .06em}
.data-mese{font-size:16px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--blu40);margin-top:6px}
.data-conto{font-size:15px;color:var(--giallo);min-height:1.4em;font-variant-numeric:tabular-nums}
.dati{list-style:none;margin:0;padding:0 0 0 24px;border-left:1px solid rgba(224,241,245,.35);font-size:17px;line-height:1.7}
.scorri{position:absolute;right:max(16px,4vw);bottom:28px;margin:0;font-size:14px;letter-spacing:.1em;color:var(--blu40)}
@media (min-width:1180px){.scorri{right:calc(var(--reg) + 4vw)}}

/* calcolo */
.lavori{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.lavoro{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:1px solid rgba(224,241,245,.4);background:rgba(0,20,27,.5);cursor:pointer;font-size:17px;transition:background .2s,border-color .2s,transform .2s var(--esce)}
.lavoro svg{width:22px;height:22px;flex:none}
.lavoro[aria-pressed=true]{background:var(--blu);border-color:var(--blu);color:#fff}
.lavoro:active{transform:scale(.97)}
.ore-regolo{margin:0 0 26px;max-width:560px}
.ore-regolo label{display:block;margin-bottom:10px;font-size:17px}
.ore-regolo output{font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:44px;accent-color:var(--blu);cursor:pointer}
.risultato{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:0 0 10px}
.risultato-num{font-weight:700;color:#fff;font-size:clamp(72px,12vw,150px);line-height:.9;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.risultato-testo{max-width:18em;font-size:clamp(19px,2vw,24px);color:#fff;line-height:1.3}

/* le due giornate: nastro */
.giornate{padding-bottom:0}
.nastro{list-style:none;margin:20px 0 0;padding:0 max(16px,6vw) 40px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.tappa{flex:0 0 min(78vw,340px);scroll-snap-align:start;border-top:2px solid var(--blu);padding:18px 4px 0;background:linear-gradient(to bottom,rgba(0,80,106,.08),transparent 70%)}
.tappa.notte{border-color:var(--giallo)}
.tappa .ora{display:block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--blu40);font-weight:500;margin-bottom:10px}
.tappa.notte .ora{color:var(--giallo)}
.tappa h3{font-size:clamp(24px,2.4vw,32px);line-height:1.08;color:#fff;font-weight:700;margin:0 0 10px;letter-spacing:-.02em}
.tappa p{margin:0;font-size:17px}

/* video */
.video-muro{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.vid{position:relative;grid-column:span 2;background:#000;aspect-ratio:16/9;overflow:hidden}
.vid.verticale{aspect-ratio:9/16}
.vid.primo{grid-column:span 6}
.vid button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer;color:#fff;text-align:left}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--esce),filter .4s}
.vid .vid-velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,20,27,.96) 18%,rgba(0,20,27,.55) 55%,rgba(0,20,27,.15))}
.vid .vid-play{position:absolute;left:18px;top:18px;width:56px;height:56px;border-radius:50%;background:var(--blu);display:grid;place-items:center;transition:transform .3s var(--esce)}
.vid .vid-play svg{width:20px;height:20px;margin-left:3px}
.vid .vid-tit{position:absolute;left:18px;right:18px;bottom:16px;font-size:17px;line-height:1.3;font-weight:500}
.vid .vid-tit small{display:block;font-size:14px;color:var(--blu40);font-weight:400;margin-top:4px}
.vid.primo .vid-tit{font-size:clamp(20px,2.4vw,30px)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
@media (hover:hover) and (pointer:fine){.vid:hover img{transform:scale(1.04);filter:brightness(1.1)}.vid:hover .vid-play{transform:scale(1.1)}}
@media (max-width:760px){.video-muro{grid-template-columns:1fr 1fr}.vid,.vid.primo{grid-column:span 2}.vid.verticale{grid-column:span 1}}

/* Federico e Tore */
.due-foto{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:end}
.ritratto{margin:0;position:relative;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--esce)}
.ritratto img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.ritratto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,80,106,.35),transparent 50%);mix-blend-mode:screen}
.testimone{margin:0;padding:0}
.testimone p{font-size:clamp(24px,3vw,38px);line-height:1.2;color:#fff;font-weight:300;letter-spacing:-.015em;margin:0 0 .6em;max-width:22em}
.testimone em{font-style:normal;color:var(--giallo)}
.testimone .dc-blocco{font-size:18px}
.testimone footer{display:flex;align-items:center;gap:16px;margin-top:28px;font-size:16px}
.testimone footer img{width:64px;height:64px;border-radius:50%;object-fit:cover}

/* ottobre: tre reel girati al tavolo, come telefoni appoggiati a ventaglio */
.occhiello{margin:0 0 18px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--giallo)}
.tenue{color:var(--blu40);font-weight:300}
.reel-fila{list-style:none;margin:clamp(28px,5vh,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);align-items:start}
.reel{margin:0;min-width:0}
.reel-schermo{position:relative;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;border:1px solid rgba(154,211,224,.35);box-shadow:0 24px 60px rgba(0,0,0,.45);transition:transform .5s var(--esce),box-shadow .5s}
.reel:nth-child(1) .reel-schermo{transform:rotate(-2.5deg) translateY(10px)}
.reel:nth-child(3) .reel-schermo{transform:rotate(2.5deg) translateY(10px)}
.reel-schermo.in-onda,.reel-schermo:focus-within{transform:none}
.reel-schermo.in-onda{box-shadow:0 0 0 2px var(--giallo),0 24px 60px rgba(0,0,0,.5)}
.reel-schermo button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer;color:#fff}
.reel-schermo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--esce),filter .4s;filter:saturate(.9)}
.reel-schermo button::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,20,27,.55),transparent 40%)}
.reel-play{position:absolute;left:50%;top:50%;z-index:1;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--blu);display:grid;place-items:center;box-shadow:0 0 0 8px rgba(0,80,106,.25);transition:transform .3s var(--esce),box-shadow .3s}
.reel-play svg{width:22px;height:22px;margin-left:3px}
.reel-durata{position:absolute;right:14px;bottom:12px;z-index:1;font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;color:#fff}
.reel-schermo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.reel-testo{padding:22px 4px 0}
.reel-testo p{margin:0 0 10px;font-size:16px;line-height:1.5}
.reel-testo .reel-frase{font-size:clamp(19px,1.8vw,23px);line-height:1.25;color:#fff;font-weight:500;letter-spacing:-.01em;margin-bottom:12px}
.reel-testo .reel-chi{font-size:14px;color:var(--blu40);margin:0}
.reel-chi a{display:inline-flex;align-items:center;min-height:44px;color:var(--lav)}
@media (hover:hover) and (pointer:fine){.reel-schermo:hover{transform:none}.reel-schermo:hover img{transform:scale(1.03);filter:saturate(1.05)}.reel-schermo:hover .reel-play{transform:scale(1.1);box-shadow:0 0 0 12px rgba(0,80,106,.3)}}
@media (max-width:760px){
  .reel-fila{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-right:-16px;padding:12px 16px 8px 0;scrollbar-width:none}
  .reel-fila::-webkit-scrollbar{display:none}
  .reel{flex:0 0 78%;scroll-snap-align:start}
  .reel:nth-child(n) .reel-schermo{transform:none}
}
@media (prefers-reduced-motion:reduce){.reel-schermo,.reel-schermo img,.reel-play{transition:none}}

/* le voci di chi c'era: citazioni grandi, una dopo l'altra, che si alternano */
.voci .titolo-grande{margin-bottom:.7em}
.voci-elenco{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(20px,3vw,32px);align-items:start}
.voce{margin:0;padding:26px 26px 22px;border:1px solid rgba(154,211,224,.28);background:linear-gradient(160deg,rgba(0,80,106,.12),rgba(0,20,27,.35) 60%);transition:border-color .3s,transform .4s var(--esce)}
.voce blockquote{margin:0}
.voce blockquote p{font-size:clamp(19px,1.7vw,22px);line-height:1.38;color:#fff;font-weight:300;letter-spacing:-.005em;margin:0 0 14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
.voce.aperta blockquote p{-webkit-line-clamp:unset;display:block}
.voce-tutto{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-6px 0 8px;padding:0;border:0;background:none;color:var(--giallo);font-size:15px;font-weight:500;cursor:pointer}
.voce-tutto svg{width:14px;height:14px;transition:transform .3s var(--esce)}
.voce.aperta .voce-tutto svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.voce:hover{border-color:rgba(232,199,102,.55);transform:translateY(-4px)}}
.voce blockquote p::before{content:"«";color:var(--giallo)}
.voce blockquote p::after{content:"»";color:var(--giallo)}
.voce figcaption{display:flex;align-items:center;gap:14px;font-size:16px;line-height:1.35;color:var(--lav)}
.voce figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1);flex:none}
.voce figcaption .iniziali{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ardesia);color:#fff;font-weight:700;font-size:18px;letter-spacing:.02em}
.voce figcaption b{display:block;color:#fff;font-weight:500}
.voce-correggi{display:inline-flex;align-items:center;min-height:44px;margin:10px 0 -10px;color:var(--giallo);font-size:15px;font-weight:500;text-underline-offset:4px}
.voce-correggi:hover{color:#fff}
.voci-invito{margin:clamp(28px,4vh,44px) 0 0}
.guarda-ottobre{margin:28px 0 0}
.posto .nota-piccola{margin-top:20px;max-width:40em;color:var(--ardesia)}

/* il posto: è mattina */
.posto{background:var(--lav);color:var(--notte)}
.posto .titolo-grande,.posto strong,.posto b{color:var(--notte)}
.posto .guida{color:var(--ardesia)}
.tavolo-giro{margin:6px 0 26px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 40px}
.tavolo-lato{flex:1 1 240px;max-width:22em}
.tavolo-modi{display:flex;flex-wrap:wrap;gap:10px}
.tavolo-modi .bottone{min-height:48px;font-size:16px;padding:0 22px}
.tavolo{position:relative;width:min(400px,100%);aspect-ratio:1;margin:0;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.piano{position:absolute;inset:21%;border-radius:50%;text-align:center;background:var(--notte);display:grid;place-items:center;box-shadow:0 18px 40px rgba(0,20,27,.25);transition:box-shadow .3s}
.piano-logo{display:block;width:64%}
.piano-logo svg{display:block;width:100%;height:auto}
.giostra{position:absolute;inset:0}
.tavolo-segno{position:absolute;left:50%;top:-14px;margin-left:-9px;border:9px solid transparent;border-top:13px solid var(--blu);opacity:0;transition:opacity .25s}
.tavolo.in-giostra{cursor:crosshair}
.tavolo.in-giostra .tavolo-segno{opacity:1}
.tavolo.in-giostra .sedia{cursor:crosshair}
.tavolo.ora .piano{box-shadow:0 0 0 6px var(--giallo),0 18px 40px rgba(0,20,27,.25)}
.sedia.luce{background:var(--giallo)}
.sedia{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:2px solid var(--notte);background:var(--carta);color:var(--notte);font-weight:700;font-size:15px;cursor:pointer;display:grid;place-items:center;font-variant-numeric:tabular-nums;transition:background .2s,color .2s,transform .25s var(--esce)}
.sedia[aria-pressed=true]{background:var(--blu);border-color:var(--blu);color:#fff;transform:scale(1.15);box-shadow:0 0 0 6px rgba(0,80,106,.22)}
@media (hover:hover) and (pointer:fine){.sedia:not([aria-pressed=true]):hover{transform:scale(1.12);background:var(--lav)}}
.sedia.undici{border-style:dashed;border-color:var(--blu);color:var(--blu);background:transparent}
.sedia-scelta{margin:14px 0 0;font-size:17px;color:var(--ardesia);min-height:3.2em}
.sedia-scelta b{color:var(--notte)}
.sedia-copia{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0 14px;border:1px solid var(--notte);background:transparent;color:var(--notte);font-size:15px;font-weight:700;cursor:pointer}
/* il box: questo è il tuo posto */
.tuo-posto{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:24px 22px 0;border:1px solid var(--giallo);background:var(--notte);color:var(--lav);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.tuo-posto::backdrop{background:rgba(0,20,27,.6)}
.tp-testa{display:grid;grid-template-columns:clamp(96px,26vw,150px) 1fr;gap:18px;align-items:center}
.tp-anteprima{display:grid;place-items:center;aspect-ratio:1;background:radial-gradient(circle at 50% 40%,rgba(0,80,106,.35),transparent 70%)}
.tp-anteprima svg{display:block;width:100%;height:100%}
.tp-sopra{margin:0;color:var(--giallo);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.tp-numero{margin:0 0 8px;font-family:var(--motto);font-size:clamp(56px,14vw,84px);line-height:1;color:#fff}
.tp-etichetta{display:block;margin:0 0 8px;font-size:17px}
.tuo-posto input[type=text]{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--blu40);background:rgba(255,255,255,.06);color:#fff;font-size:19px}
.tuo-posto input[type=text]:focus-visible{outline:2px solid var(--giallo);outline-offset:2px}
.tp-avatar{margin:20px 0 0;padding:16px 0 0;border:0;border-top:1px solid rgba(154,211,224,.25);min-width:0}
.tp-avatar legend{float:left;width:100%;padding:0}
.tp-galleria{clear:both;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (min-width:520px){.tp-galleria{grid-template-columns:repeat(6,1fr)}}
.tp-av{position:relative;display:block;padding:0;border:0;background:none;color:inherit;cursor:pointer}
.tp-av input{position:absolute;opacity:0;width:1px;height:1px}
.tp-av-img{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--lav);transition:transform .15s,box-shadow .15s}
.tp-av-img img{display:block;width:100%;height:100%;object-fit:cover}
.tp-av input:checked+.tp-av-img,.tp-av.scelto .tp-av-img{transform:scale(1.06);box-shadow:0 0 0 3px var(--notte),0 0 0 6px var(--giallo)}
.tp-av input:focus-visible+.tp-av-img,.tp-av:focus-visible .tp-av-img{outline:2px solid var(--giallo);outline-offset:5px}
.tp-foto .tp-av-img{display:grid;place-items:center;padding:6px;background:transparent;border:1.5px dashed var(--blu40);color:var(--lav);font-size:14px;font-weight:700;line-height:1.1;text-align:center}
.tp-foto.con-foto .tp-av-img{padding:0;border:0}
@media (hover:hover) and (pointer:fine){.tp-av:hover .tp-av-img{transform:scale(1.04)}}
.tp-social{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:16px}
@media (max-width:519px){.tp-social{grid-template-columns:1fr}}
.tp-campo span{display:block;margin:0 0 6px;font-size:15px}
.tp-campo i{font-style:normal;color:var(--blu40);font-size:14px}
.tuo-posto .tp-campo input{min-height:48px;font-size:17px}
.tp-prendi{grid-column:1/-1;justify-self:start;min-height:44px;padding:0 16px;border:1px solid var(--giallo);background:transparent;color:var(--giallo);font-size:15px;font-weight:700;cursor:pointer}
.tp-prendi:disabled{opacity:.6;cursor:wait}
.tp-nota-foto{margin:12px 0 0;font-size:14px;color:var(--blu40)}
.tp-anteprima img{display:block;width:100%;height:100%;object-fit:contain}
.tp-anteprima.foto img{object-fit:cover;border-radius:50%;aspect-ratio:1;height:auto}
.nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sedia.con-viso{padding:0;overflow:visible;background:#fff}
.sedia.con-viso img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
/* il nome sopra la sedia assegnata, col mouse o col fuoco della tastiera */
.sedia[data-nome]::after{content:attr(data-nome);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);padding:6px 10px;background:var(--notte);color:#fff;font-size:14px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s,transform .15s}
.sedia[data-nome]:hover::after,.sedia[data-nome]:focus-visible::after{opacity:1;transform:translateX(-50%)}
.sedia[data-ruolo]::after{content:attr(data-nome) "\A" attr(data-ruolo);white-space:pre;text-align:center;line-height:1.35}
.sedia:hover,.sedia:focus-visible{z-index:2}
/* le sedie già prese (dal 5 nov 2026): non si scelgono, la giostra le salta; tratteggiata = tenuta, in attesa del pagamento */
.sedia.presa{--fondo:var(--notte);background:var(--fondo);border-color:var(--notte);color:var(--lav);cursor:default}
.sedia.presa.con-viso{--fondo:#fff;box-shadow:0 0 0 3px var(--lav),0 0 0 5px var(--notte)}
/* il ruolo non c'è ancora (Tore, 6 nov 2026): al posto dell'anello pieno un cerchio blu tratteggiato che gira intorno alla foto */
.sedia.presa.con-viso.senza-ruolo{box-shadow:none}
.sedia.presa.con-viso.senza-ruolo::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px dashed var(--blu);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.sedia.presa.con-viso.senza-ruolo::before{animation:sedia-gira 9s linear infinite}}
@keyframes sedia-gira{to{transform:rotate(360deg)}}
/* quando selezioni la foto (Tore, 6 nov 2026): la foto si colora, e il cerchio, pieno, si accende come un neon (sfarfalla e poi resta),
   gira e alterna l'azzurro e il giallo GereBros. Uguale per tutte le sedie: non dice chi ha pagato */
.sedia.presa.con-viso.guarda{box-shadow:none}
.sedia.presa.con-viso.guarda::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #6FC3D8;pointer-events:none;box-shadow:0 0 6px #6FC3D8,0 0 16px #00506A,inset 0 0 6px #6FC3D8}
@media (prefers-reduced-motion:no-preference){.sedia.presa.con-viso.guarda::before{animation:sedia-accendi .9s linear,sedia-gira 3s linear infinite,sedia-neon 2.4s ease-in-out infinite}}
@keyframes sedia-accendi{0%{opacity:0}12%{opacity:.9}18%{opacity:.1}30%{opacity:1}36%{opacity:.3}46%{opacity:1}100%{opacity:1}}
@keyframes sedia-neon{
  0%,100%{border-color:#6FC3D8;box-shadow:0 0 6px #6FC3D8,0 0 16px #00506A,inset 0 0 6px #6FC3D8}
  50%{border-color:#E8C766;box-shadow:0 0 6px #E8C766,0 0 14px #E8C766,inset 0 0 6px #E8C766}}
/* il viso di chi ha preso la sedia (6 nov 2026, Tore): in bianco e nero, col mouse, col fuoco o col tocco si colora e si ingrandisce, e compaiono nome e ruolo */
.sedia.presa.con-viso img{filter:grayscale(1) contrast(1.05);transition:filter .3s}
.sedia.presa.con-viso:hover img,.sedia.presa.con-viso:focus-visible img,.sedia.presa.con-viso.guarda img{filter:none}
.sedia.presa.con-viso.guarda{z-index:2}
.sedia.presa.con-viso.guarda[data-nome]::after{opacity:1;transform:translateX(-50%)}
@media (hover:hover) and (pointer:fine){.sedia.presa:not([aria-pressed=true]):hover{transform:scale(1.06);background:var(--fondo)}}
@media (prefers-reduced-motion:no-preference){
  .sedia.presa.con-viso:not([aria-pressed=true]):hover,.sedia.presa.con-viso:focus-visible,.sedia.presa.con-viso.guarda{transform:scale(1.6)}
  .sedia.presa.con-viso[data-nome]::after{bottom:calc(100% + 4px);font-size:10px;padding:4px 7px}
}
.tp-ruolo{grid-column:1/-1}
.sedia.presa.con-iniziali{--fondo:var(--blu);border-color:var(--notte);color:#fff;font-size:14px;letter-spacing:.02em}
.sedia-viso{display:inline-block;width:32px;height:32px;margin-right:8px;vertical-align:-10px;border-radius:50%;overflow:hidden;background:#fff}
.sedia-viso img{display:block;width:100%;height:100%;object-fit:cover}
.tp-azioni{position:sticky;bottom:0;display:flex;justify-content:center;gap:10px;margin:18px -22px 0;padding:14px 22px 18px;background:var(--notte);border-top:1px solid rgba(154,211,224,.18)}
.tp-azioni .bottone{flex:1 1 0;min-width:0;min-height:52px;font-size:17px;padding:0 12px;letter-spacing:.02em}
.tuo-posto .tp-azioni .bottone.secondario{color:var(--lav)}
.scheda{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin:0 0 8px;border-top:1px solid rgba(0,20,27,.2)}
.scheda>div{padding:16px 16px 16px 0;border-bottom:1px solid rgba(0,20,27,.2)}
.scheda dt{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ardesia);margin-bottom:4px}
.scheda dd{margin:0;font-size:19px;font-weight:400;color:var(--notte)}
.azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.scheda-altro{margin:6px 0 0}
.posto .bottone.secondario{color:var(--notte)}
.posto ::selection{background:var(--notte);color:#fff}

/* la rivelazione */
.rivela{background:var(--notte);text-align:left}
.rivela-tasto{min-height:56px;padding:0 4px;border:0;border-bottom:2px solid var(--giallo);background:none;color:#fff;font-size:clamp(24px,3vw,34px);font-weight:300;cursor:pointer}
.rivela-testo{margin-top:12px}
.rivela-testo q{color:var(--giallo)}
.rivela-testo .bottone{margin-top:20px}
/* radiografia: la pagina mostra la sua impalcatura */
.radiografia .cielo{background:#00202B}
.radiografia .cielo-giorno{opacity:1;background:linear-gradient(rgba(79,179,204,.12) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,rgba(79,179,204,.12) 1px,transparent 1px) 0 0/32px 32px}
.radiografia .stelle,.radiografia .apertura-video{visibility:hidden}
.radiografia main section,.radiografia .piede{outline:1px dashed rgba(154,211,224,.55);outline-offset:-10px;background:transparent}
.radiografia main section::before{content:"<section id=\"" attr(id) "\">";position:absolute;left:14px;top:14px;font-size:14px;color:var(--blu40);letter-spacing:.04em}
.radiografia main h1,.radiografia main h2,.radiografia main p,.radiografia .bottone,.radiografia .vid,.radiografia .tavolo{outline:1px solid rgba(154,211,224,.4)}
.radiografia .posto,.radiografia .posto .titolo-grande,.radiografia .posto .guida,.radiografia .posto dd,.radiografia .posto dt,.radiografia .posto .sedia-scelta,.radiografia .posto .bottone.secondario{color:var(--lav)}
.radiografia .posto .titolo-grande{color:#fff}

/* piede, uova, avvisi */
.piede{padding:40px 0 60px;font-size:15px;color:var(--blu40)}
.piede-riga{display:flex;justify-content:space-between;align-items:center;gap:16px}
.piede a{color:var(--lav);display:inline-flex;align-items:center;min-height:44px}
.luce{width:44px;height:44px;border:0;background:none;color:var(--ard60);cursor:pointer;display:grid;place-items:center}
.luce svg{width:22px;height:22px}
.luce-leva{transition:transform .2s var(--esce)}
.luce:hover{color:var(--blu40)}
.uova{position:fixed;left:16px;bottom:16px;z-index:35}
@media (max-width:1179px){.uova{bottom:auto;top:76px}}
.uova-tasto{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid rgba(232,199,102,.6);background:rgba(0,20,27,.85);color:var(--giallo);cursor:pointer;font-weight:500;font-variant-numeric:tabular-nums}
.uova-tasto svg{width:16px;height:20px}
.uova-tot{color:var(--blu40)}
.avviso{position:fixed;left:50%;top:84px;z-index:60;transform:translateX(-50%);width:max-content;max-width:min(560px,calc(100vw - 32px));background:var(--giallo);color:var(--notte);padding:14px 20px;font-size:17px;font-weight:500;line-height:1.35;pointer-events:none;visibility:hidden}
.avviso.su{visibility:visible}
.uova-elenco{position:fixed;left:16px;bottom:72px;z-index:36;width:min(340px,calc(100vw - 32px));background:var(--notte);border:1px solid rgba(232,199,102,.6);padding:16px 18px;font-size:15px}
@media (max-width:1179px){.uova-elenco{bottom:auto;top:128px}}
.uova-elenco ol{margin:8px 0 0;padding-left:20px}
.uova-elenco li{margin:0 0 6px}
.uova-elenco li.no{color:var(--ard60)}

/* sopra la sezione chiara il logotipo passa allo schema «colore» del kit (navy) */
.su-chiaro .marchio svg g{fill:#002633}
.su-chiaro .marchio svg g path{fill:#002633}

/* uovo: suda */
.goccia{position:fixed;width:10px;height:14px;z-index:50;pointer-events:none;background:var(--blu60);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
/* uovo: neon */
.neon .marchio svg path{filter:drop-shadow(0 0 3px #4FB3CC) drop-shadow(0 0 10px #00506A)}
.neon .marchio svg g path{fill:#fff;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #4FB3CC)}
/* uovo: il cursore dell'agente */
.fantasma{position:fixed;z-index:70;width:22px;height:22px;pointer-events:none;color:var(--giallo);left:0;top:0}
.riassunto{position:fixed;z-index:65;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));background:var(--notte);border:1px solid var(--giallo);padding:26px 26px 20px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.riassunto h3{margin:0 0 12px;color:var(--giallo);font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.riassunto ol{margin:0 0 16px;padding-left:22px;color:#fff;font-size:18px}
.riassunto li{margin:0 0 8px}
.riassunto .chiudi{position:absolute;top:6px;right:6px;width:44px;height:44px;border:0;background:none;color:var(--lav);cursor:pointer;font-size:0;display:grid;place-items:center}
.riassunto .chiudi svg{width:18px;height:18px}
/* uovo: selezione */
.sussurro{position:absolute;z-index:55;background:var(--notte);color:var(--giallo);border:1px solid var(--giallo);font-size:14px;padding:6px 10px;pointer-events:none;white-space:nowrap}

@media (max-width:760px){
  body{font-size:17px}
  .due,.due-foto{grid-template-columns:1fr}
  .marchio{width:76px}
  .barra-cta{font-size:14px;padding:0 14px}
  .apertura{padding-top:110px}
  .dati{border-left:0;padding-left:0}
  .sedia{width:44px;height:44px;margin:-22px 0 0 -22px;font-size:14px}
  .piano{inset:22%;font-size:14px;letter-spacing:.1em}
  .tavolo{width:min(320px,100%)}
  .ritratto{max-width:240px}
  .voci-elenco{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:-16px;padding:4px 16px 10px 0;scrollbar-width:none}
  .voci-elenco::-webkit-scrollbar{display:none}
  .voci-elenco li{flex:0 0 86%;scroll-snap-align:start}
  .voce{padding:22px 20px 18px}
}

/* ===== approfondimenti a richiesta: «scopri di più» ===== */
.scopri{margin:18px 0 0}
.scopri summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;color:#fff;font-size:16px;font-weight:500;letter-spacing:.02em;border-bottom:1px solid rgba(232,199,102,.7);-webkit-user-select:none;user-select:none}
.scopri summary::-webkit-details-marker{display:none}
.scopri summary svg{width:14px;height:14px;color:var(--giallo);transition:transform .35s var(--esce)}
.scopri[open] summary svg{transform:rotate(180deg)}
.scopri-chiudi,.scopri[open] .scopri-apri{display:none}
.scopri[open] .scopri-chiudi{display:inline}
.scopri-corpo{padding:14px 0 2px}
.scopri-corpo>p{margin:0;max-width:36em}
.posto .scopri summary{color:var(--notte);border-bottom-color:var(--blu)}
.posto .scopri summary svg{color:var(--blu)}
.reel .scopri{margin:4px 0 6px}
.reel .scopri summary{font-size:15px}
@media (hover:hover) and (pointer:fine){.scopri summary:hover{color:var(--giallo)}.posto .scopri summary:hover{color:var(--blu)}}

/* ===== altri video, a richiesta ===== */
.vid[hidden]{display:none}
.video-altri{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.video-altri .bottone{min-height:52px;font-size:17px;gap:12px}
.video-altri .bottone svg{width:16px;height:16px}
.video-anteprime{display:flex;gap:0}
.video-anteprime img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--notte);margin-left:-10px;filter:grayscale(.4)}
.video-anteprime img:first-child{margin-left:0}

/* ===== l'orologio della notte, nella barra ===== */
.orologio{display:none;align-items:center;gap:10px;margin-left:auto;margin-right:18px;color:var(--lav);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.orologio-luna{width:14px;height:14px;border-radius:50%;background:var(--lav);box-shadow:inset -4px -2px 0 0 var(--notte);transition:box-shadow .6s,background .6s}
.orologio.alba .orologio-luna{background:var(--giallo);box-shadow:0 0 12px rgba(232,199,102,.7)}
.su-chiaro .orologio{color:var(--notte)}
@media (min-width:600px){.orologio{display:inline-flex}}

/* ===== la torcia nell'apertura ===== */
.torcia{position:absolute;inset:0;opacity:0;transition:opacity .6s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(79,179,204,.28),rgba(0,80,106,.08) 40%,transparent 70%);mix-blend-mode:screen}
.apertura.accesa .torcia{opacity:1}
.motto .riga{transform:translate(var(--px,0px),var(--py,0px))}

/* ===== il binario dei lavori dell'agente ===== */
.corre{overflow:hidden;border-block:1px solid rgba(79,179,204,.22);background:rgba(0,20,27,.55);padding:16px 0;white-space:nowrap}
.corre-binario{display:inline-flex;gap:0;will-change:transform}
.corre span{display:inline-flex;align-items:center;font-size:clamp(17px,1.6vw,21px);color:var(--lav);font-weight:300;padding:0 22px}
.corre span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--giallo);margin-left:44px}
.corre span:nth-child(3n+1){color:#fff;font-weight:500}

/* ===== il calcolo: l'anno in giornate ===== */
.anno{display:grid;grid-template-columns:repeat(46,1fr);gap:3px;max-width:760px;margin:14px 0 14px}
.anno i{aspect-ratio:1;background:rgba(154,211,224,.16);transition:background .3s,transform .35s var(--esce)}
.anno i.tua{background:var(--giallo)}
@media (max-width:760px){.anno{grid-template-columns:repeat(23,1fr);gap:3px}}

/* ===== la corsa del sole sotto il nastro (solo nella scena agganciata) ===== */
.corsa{display:none}

/* ===== sedia scelta: il bottone di prenotazione si accorge ===== */
.bottone.pronta{position:relative;overflow:hidden}
.bottone.pronta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%)}

/* ===== FedeAI: l'omino che passa a salutare ===== */
.fedeai{position:fixed;z-index:33;right:12px;bottom:46px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.fedeai>*{pointer-events:auto}
.fedeai[hidden]{display:none}
@media (min-width:1180px){.fedeai{right:calc(var(--reg) + 3vw);bottom:0}}
.fedeai-omino{width:80px;height:100px;padding:0;border:0;background:none;cursor:pointer;display:block}
.fedeai-omino canvas{width:80px;height:100px;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.fedeai-fumetto{position:relative;width:min(270px,calc(100vw - 32px));margin:0 0 6px;padding:16px 18px 12px;background:var(--lav);color:var(--notte);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.fedeai-fumetto::after{content:"";position:absolute;right:30px;bottom:-9px;width:18px;height:18px;background:var(--lav);transform:rotate(45deg)}
.fedeai-fumetto[hidden]{display:none}
.fedeai-ciao{margin:0 0 4px;font-family:var(--motto);font-size:20px;line-height:1.15;letter-spacing:.01em}
.fedeai-ciao[hidden]{display:none}
.fedeai-frase{margin:0 0 10px;font-size:18px;line-height:1.3;font-weight:500}
.fedeai-scelte{display:flex;gap:8px;flex-wrap:wrap}
.fedeai-scelte button{min-height:44px;padding:0 16px;border:0;cursor:pointer;font-size:16px;font-weight:700}
.fedeai-si{background:var(--blu);color:#fff}
.fedeai-no{background:transparent;color:var(--notte);box-shadow:inset 0 0 0 1px var(--notte)}
@media (hover:hover) and (pointer:fine){.fedeai-si:hover{background:var(--navy)}.fedeai-no:hover{background:rgba(0,20,27,.08)}}

/* ===== la torre di FedeAI: il gioco ===== */
.torre{position:fixed;inset:0;z-index:90;background:var(--notte);color:var(--lav);touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
.torre-tela{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.torre-hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:flex-start;gap:12px;padding:max(12px,env(safe-area-inset-top)) 12px 0 14px;pointer-events:none}
.torre-hud>*{pointer-events:auto}
.torre-stato{display:flex;flex-direction:column;gap:6px}
.torre-cuori{display:flex;gap:4px}
.torre-cuori svg{width:26px;height:26px}
.torre-cuori .pieno{color:#ff5a6e;filter:drop-shadow(0 0 6px rgba(255,90,110,.5))}
.torre-cuori .vuoto{color:rgba(154,211,224,.3)}
.torre-idee{display:inline-flex;align-items:center;gap:8px;color:var(--giallo);font-family:"Press Start 2P",var(--testo);font-size:14px;line-height:1}
.torre-idee i{font-style:normal;color:#fff}
.torre-idee svg{width:22px;height:22px}
.torre-poteri{list-style:none;margin:0 auto;padding:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.torre-poteri li{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid rgba(154,211,224,.3);background:rgba(0,20,27,.6);color:rgba(154,211,224,.55);font-size:14px;transition:all .3s var(--esce)}
.torre-poteri li svg{width:18px;height:18px}
.torre-poteri li.preso{border-color:var(--giallo);color:var(--giallo);background:rgba(0,20,27,.8)}
@media (max-width:640px){.torre-poteri li span{display:none}.torre-poteri li{padding:0 8px}}
.torre-esci{width:48px;height:48px;border:1px solid rgba(154,211,224,.45);background:rgba(0,20,27,.7);color:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.torre-esci svg{width:20px;height:20px}
.torre-quota{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;color:var(--blu40);pointer-events:none}
.torre-quota i{position:relative;width:4px;height:min(40vh,300px);background:linear-gradient(var(--giallo),var(--blu) 50%,var(--navy));border-radius:2px}
.torre-quota b{position:absolute;left:-5px;top:-7px;width:14px;height:100%;display:block}
.torre-quota b::after{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--blu)}
@media (max-width:640px){.torre-quota{top:auto;bottom:130px;transform:none}.torre-quota i{height:18vh}}
.torre-voce{position:absolute;left:50%;top:84px;transform:translate(-50%,-10px);width:max-content;max-width:min(520px,calc(100vw - 32px));margin:0;padding:12px 18px;background:var(--lav);color:var(--notte);font-size:17px;font-weight:500;line-height:1.35;opacity:0;transition:opacity .3s,transform .4s var(--esce);pointer-events:none}
.torre-voce.su{opacity:1;transform:translate(-50%,0)}
.torre-comandi{display:none}
@media (pointer:coarse){
  .torre-comandi{display:flex;position:absolute;left:0;right:0;bottom:0;justify-content:space-between;align-items:flex-end;padding:0 14px max(16px,env(safe-area-inset-bottom));pointer-events:none}
  .torre-comandi>div{display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
  .tc-dx{flex-direction:column}
}
.torre-comandi button{width:64px;height:64px;border-radius:50%;border:1px solid rgba(224,241,245,.4);background:rgba(0,20,27,.55);color:#fff;display:grid;place-items:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.torre-comandi button svg{width:28px;height:28px}
.torre-comandi button[hidden]{display:none}
.torre-comandi .tc-salto{width:84px;height:84px;background:rgba(0,80,106,.75);border-color:var(--blu60)}
.torre-comandi button.premuto{background:var(--giallo);color:var(--notte);transform:scale(.94)}
.torre-carta{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(0,20,27,.72);backdrop-filter:blur(3px)}
.torre-carta[hidden]{display:none}
.torre-carta-dentro{width:min(520px,100%);max-height:calc(100svh - 32px);overflow:auto;background:#00080B;border:4px solid #F0A43A;padding:22px 24px 24px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.torre-ritratto{width:80px;height:100px;display:block;margin:0 0 4px}
.torre-carta h2{margin:0 0 16px;color:var(--giallo);font-family:"Press Start 2P",var(--testo);font-weight:400;font-size:clamp(20px,3.4vw,30px);line-height:1.35;letter-spacing:0;text-shadow:3px 3px 0 #b5179e}
.torre-carta p{margin:0 0 12px;font-size:17px;line-height:1.45}
.torre-carta p:empty{display:none}
.torre-tasti{color:var(--blu40);font-size:15px!important}
.torre-azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.torre-carta .bottone.secondario{color:#fff}
@media (prefers-reduced-motion:no-preference){
  .fedeai-fumetto:not([hidden]){animation:fumetto .45s var(--esce)}
  @keyframes fumetto{from{opacity:0;transform:translateY(10px) scale(.94);transform-origin:85% 100%}}
  .torre{animation:torre-entra .45s var(--esce)}
  @keyframes torre-entra{from{opacity:0;clip-path:circle(10% at 85% 90%)}to{opacity:1;clip-path:circle(150% at 85% 90%)}}
  .torre-poteri li.preso{animation:potere .7s var(--esce)}
  @keyframes potere{40%{transform:scale(1.25)}}
}

/* ===== movimento: solo con supporto e senza richiesta di meno movimento ===== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .motto .riga{animation:sale 1.1s var(--esce) both}
  .motto .r2{animation-delay:.12s}.motto .r3{animation-delay:.24s}
  @keyframes sale{from{transform:translateY(.32em) skewY(4deg)}to{transform:none}}
  .punto{animation:battito 1.6s ease-in-out infinite}
  @keyframes battito{50%{transform:scale(.6);background:var(--blu60)}}
  .avviso.su{animation:avviso .5s var(--esce)}
  @keyframes avviso{from{transform:translate(-50%,-14px)}to{transform:translate(-50%,0)}}
  .neon .marchio svg{animation:sfarfalla 2.4s steps(1) 1}
  @keyframes sfarfalla{0%,8%,14%,30%{opacity:1}5%,11%,22%{opacity:.25}}
  .suda .motto{animation:trema .5s ease-in-out 3}
  /* approfondimenti: si aprono scorrendo, non a scatto */
  .scopri[open] .scopri-corpo{animation:apri .5s var(--esce)}
  @keyframes apri{from{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
  @supports (interpolate-size:allow-keywords){
    :root{interpolate-size:allow-keywords}
    .scopri::details-content{height:0;overflow:clip;transition:height .5s var(--esce),content-visibility .5s allow-discrete}
    .scopri[open]::details-content{height:auto}
  }
  .vid.arriva{animation:arriva .7s var(--esce) both}
  @keyframes arriva{from{opacity:0;transform:translateY(40px) scale(.94);filter:blur(6px)}}
  .anno i.tua{transform:scale(1.18)}
  .anno i.tua.fermo{transform:none}
  .bottone.pronta::after{animation:lampo 1.1s var(--esce) .15s}
  @keyframes lampo{to{transform:translateX(120%)}}
  .sedia[aria-pressed=true]{animation:sedia-su .6s var(--esce)}
  @keyframes sedia-su{40%{transform:scale(1.35)}}

  @keyframes trema{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

  @supports (animation-timeline:scroll()){
    .cielo-giorno{animation:alba linear both;animation-timeline:scroll(root)}
    @keyframes alba{from{opacity:.15}to{opacity:1}}
    .stelle{animation:spegni linear both;animation-timeline:scroll(root);animation-range:0 60%}
    @keyframes spegni{to{opacity:.15}}
    .titolo-grande{animation:scrive linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
    @keyframes scrive{from{clip-path:inset(-.2em 100% -.3em -.2em);transform:translateX(-24px)}to{clip-path:inset(-.2em -.2em -.3em -.2em);transform:none}}
    @keyframes entra{from{transform:translateY(60px)}to{transform:none}}
    .voci-elenco li{animation:voce linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .voci-elenco li:nth-child(even){animation-range:entry 15% entry 85%}
    @keyframes voce{from{transform:translateY(70px) rotate(-1.5deg);opacity:.3}to{transform:none;opacity:1}}
    /* i reel di ottobre: arrivano chiusi, si aprono a ventaglio */
    @media (min-width:761px){
      .reel{animation:ventaglio-c linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
      .reel:nth-child(1){animation-name:ventaglio-s}
      .reel:nth-child(3){animation-name:ventaglio-d}
      @keyframes ventaglio-s{from{transform:translateX(70%) rotate(5deg) scale(.9)}}
      @keyframes ventaglio-c{from{transform:translateY(50px) scale(.94)}}
      @keyframes ventaglio-d{from{transform:translateX(-70%) rotate(-5deg) scale(.9)}}
    }
    .corre{animation:corre-entra linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes corre-entra{from{clip-path:inset(0 50%)}to{clip-path:inset(0 0)}}
    .risultato-num{animation:entra linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
    .vid{animation:sale-vid linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
    @keyframes sale-vid{from{transform:translateY(80px) scale(.96);clip-path:inset(8% 4% 0 4%)}to{transform:none;clip-path:inset(0)}}
    .ritratto img{animation:ritratto linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
    @keyframes ritratto{from{clip-path:inset(0 0 40% 0);transform:scale(1.15)}to{clip-path:inset(0);transform:none}}
    .apertura-testo{animation:allontana linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    @keyframes allontana{to{transform:translateY(-14vh) scale(.94)}}
  }
  /* il nastro agganciato: la sezione è alta, il palco sta fermo, le tappe scorrono */
  @supports (animation-timeline:view()) and (view-timeline-name:--x){
    @media (min-width:700px){
      .giornate{height:220vh;padding:0;view-timeline:--giornate block}
      .giornate-palco{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
      .nastro{overflow:visible;width:max-content;scroll-snap-type:none;padding-right:20vw;animation:corre linear both;animation-timeline:--giornate;animation-range:contain 0% contain 100%}
      @keyframes corre{to{transform:translateX(calc(-100% + 100vw - var(--dx)))}}
      .tappa{flex-basis:360px}
      .corsa{display:block;position:relative;height:2px;margin:0 max(16px,6vw);margin-right:calc(max(16px,6vw) + var(--dx));background:rgba(154,211,224,.2);overflow-x:clip}
      .corsa-riempi{position:absolute;inset:0;background:linear-gradient(90deg,var(--blu),var(--giallo));transform-origin:left;animation:riempi linear both;animation-timeline:--giornate;animation-range:contain 0% contain 100%}
      .corsa-sole{position:absolute;inset:0;animation:sole linear both;animation-timeline:--giornate;animation-range:contain 0% contain 100%}
      .corsa-sole::after{content:"";position:absolute;right:-9px;top:-8px;width:18px;height:18px;border-radius:50%;background:var(--giallo);box-shadow:0 0 18px 4px rgba(232,199,102,.55)}
      @keyframes riempi{from{transform:scaleX(0)}to{transform:scaleX(1)}}
      @keyframes sole{from{transform:translateX(-100%)}to{transform:none}}
    }
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:0s!important}}

/* Finance & Legal: il nome dell'edizione nella riga degli ospiti, e per chi è (7/11/2026) */
.ospiti .edizione{color:var(--giallo);font-weight:500}
.per-chi-box{margin-top:clamp(28px,5vw,48px)}
.per-chi-tit{margin:0 0 16px;font-size:clamp(20px,2vw,24px);font-weight:500;color:#fff}
.per-chi{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
@media (max-width:760px){.per-chi{grid-template-columns:minmax(0,1fr)}}
.per-chi-nota{max-width:40em;margin:0}
.per-chi li{padding-left:14px;border-left:2px solid var(--giallo)}
.per-chi b{display:block;color:#fff;font-weight:500;margin-bottom:4px}
/* la scelta del colore in testa alla pagina (Tore, 7/11/2026): compare solo con JavaScript */
.tinte{display:flex;align-items:center;gap:4px;margin:0 0 14px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--lav)}
.tinte[hidden]{display:none}
.tinte-et{margin-right:6px}
.tinte button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.tinte button::before{content:"";width:24px;height:24px;border-radius:50%;background:var(--t);box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.tinte button[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--notte),0 0 0 4px var(--giallo)}
.tinte button:focus-visible{outline:2px solid var(--giallo);outline-offset:-2px}