/* Font self-hosted (Fontsource, licenza OFL) */
@font-face{font-family:'Anybody';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(/fonts/anybody-latin-ext-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Anybody';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 150%;src:url(/fonts/anybody-latin-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;src:url(/fonts/instrument-sans-latin-ext-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;src:url(/fonts/instrument-sans-latin-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Martian Mono';font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(/fonts/martian-mono-latin-ext-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Martian Mono';font-style:normal;font-display:swap;font-weight:100 800;font-stretch:75% 112.5%;src:url(/fonts/martian-mono-latin-wdth-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Lato';font-style:normal;font-display:swap;font-weight:100;src:url(/fonts/lato-latin-100-normal.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-display:swap;font-weight:300;src:url(/fonts/lato-latin-300-normal.woff2) format('woff2');}
@font-face{font-family:'Comic Neue';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/comic-neue-latin-700-normal.woff2) format('woff2');}


:root{
  /* Layout: un palco fisso. Si apre con il logo da solo al centro, poi il nome con i ruoli, poi una cornice che cambia epoca mentre il narratore parla da fuori. Dopo la storia, un sito calmo a una colonna. */
  /* Colori, font e misure arrivano da componenti.css, in fondo a questo foglio (blocco anim). Qui non si ridefiniscono. */
}
/* Solo tema scuro: dialog su --wash, sezione newsletter blu */
:root dialog.tro{ --dlg:var(--wash); outline:1px solid var(--line); }
:root dialog.tro::backdrop{ background:rgba(0,0,0,.72); }
:root .nl-sec{ --link:#2B2BEA; --on-link:#FFFFFF; background:#2B2BEA; color:#fff; }
html{ background:var(--paper); }
body{ background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--fs-ui); line-height:1.55; margin:0; overflow-x:clip; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--link); outline-offset:3px; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0; }
.mono{ font-family:var(--f-mono); }
.skiplink{ position:fixed; left:var(--gutter); top:-80px; z-index:var(--z-skip); background:var(--ink); color:var(--paper); padding:10px 14px; font-weight:600; text-decoration:none; }
.skiplink:focus{ top:calc(env(safe-area-inset-top,0px) + 10px); }
html{ scroll-padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 12px); }

/* ---------- barra in alto ---------- */
.top{ position:fixed; top:0; left:0; right:0; z-index:var(--z-bar); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:calc(env(safe-area-inset-top,0px) + 12px) var(--gutter) 12px;
  background:color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.brand{ display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 108; font-size:18px; letter-spacing:-.01em; white-space:nowrap; min-height:28px; position:relative; }
.brand::after,#skip::after,.tro-btn::after,.lang button::after{ content:""; position:absolute; inset:-8px 0; }
.brand-logo{ width:26px; height:28px; flex:none; overflow:visible; }
.band{ display:none; }
.ninja .band{ display:inline; }
.tag{ font-family:var(--f-mono); font-weight:500; font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:3px var(--s-2); border-radius:var(--r-pill); }
.nav{ display:flex; align-items:center; gap:clamp(10px,2.2vw,24px); font-size:var(--fs-note); }
#skip{ position:relative; font:inherit; color:var(--ink); background:none; border:0; padding:6px 0; min-height:28px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.tro-btn{ position:relative; display:inline-flex; align-items:center; gap:6px; font:500 var(--fs-label)/1 var(--f-mono); color:var(--ink); background:none; border:1px solid var(--line); border-radius:99px; padding:6px 10px; min-height:28px; box-sizing:border-box; cursor:pointer; font-variant-numeric:tabular-nums; }
.tro-btn svg{ width:14px; height:14px; color:var(--link); }
.tro-btn.bump{ border-color:var(--link); }
.lang{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.06em; display:flex; align-items:center; gap:2px; }
.lang button{ font:inherit; letter-spacing:inherit; color:var(--muted); background:none; border:0; padding:4px 3px; min-width:var(--tap); min-height:28px; cursor:pointer; position:relative; }
.lang button[aria-pressed="true"]{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
@media (max-width:560px){ .tag{ display:none; } .skip-long{ display:none; } .brand-name{ display:none; } }
@media (min-width:561px){ .skip-short{ display:none; } }

/* ---------- il palco ---------- */
.story{ position:relative; height:100vh; height:100svh; }
.txt .story{ height:auto; }
/* nella storia lo scorrimento lo guido io; lo zoom con due dita resta */
.story.gest{ touch-action:pinch-zoom; }
html.hold{ overflow:hidden; }
.txt .stage{ display:none; }
.txt .brand{ visibility:visible !important; opacity:1 !important; }
.txt .story > .vh{ position:static !important; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:normal; max-width:68ch; margin:0 auto; padding:calc(var(--top-h) + 32px) var(--gutter) 56px; }
.txt .story > .vh h1{ font-family:var(--f-display); font-weight:900; font-variation-settings:"wdth" 92; font-size:clamp(40px,7vw,72px); line-height:.95; letter-spacing:-.01em; margin:0 0 20px; }
.txt .story > .vh ul{ list-style:none; padding:0; margin:0; display:grid; gap:var(--s-2); }
.txt .story > .vh li > span:first-child{ font-weight:600; }
.txt .story > .vh h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(22px,3vw,30px); line-height:1.05; margin:var(--s-6) 0 var(--s-2); }
.txt .story > .vh p{ margin:0; line-height:1.55; }
.stage{ position:relative; height:100%; box-sizing:border-box; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:clamp(28px,5vw,88px);
  padding-inline:var(--gutter); padding-block:calc(var(--top-h) + env(safe-area-inset-top,0px) + 8px) 78px; }
.boot .stage > :not(.intro):not(.hint),.boot .brand{ opacity:0; }  /* opacità, non visibility: dentro la scena .e1 ha visibility:visible e scavalcherebbe il genitore */
.narr{ min-width:0; max-width:36rem; }
.caps{ display:grid; }
.cap{ grid-area:1/1; align-self:center; }
.cap .eyebrow{ margin:0 0 18px; }
.cap h2{ font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 88; line-height:.95; letter-spacing:-.012em; margin:0 0 .32em; text-wrap:balance; font-size:clamp(40px,5vw,84px); }
.cap .word{ white-space:nowrap; }
.cap .hl{ white-space:nowrap; }
.cap .char{ font-variation-settings:"wdth" var(--w,88); }
.cap p{ font-size:clamp(16px,1.3vw,20px); line-height:1.5; margin:0; max-width:34ch; text-wrap:pretty; }
.cap q{ quotes:"“" "”"; }
.eyebrow{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* il logo da solo, come nel sito vecchio */
.intro{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none; }
.intro{ --lw:min(32svh, 44vw, 260px); }
.intro-logo{ width:var(--lw); height:auto; aspect-ratio:920/1000; color:var(--ink); overflow:visible; pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hint{ position:absolute; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:var(--s-2);
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:none; border:0; padding:var(--s-2) var(--s-3); min-height:var(--tap); cursor:pointer; }
.hint i{ display:block; width:1px; height:26px; background:var(--ink); transform-origin:top; animation:drip 1.6s ease-in-out 3; }
@keyframes drip{ 0%{ transform:translateY(0) scaleY(0); } 50%{ transform:translateY(0) scaleY(1); } 100%{ transform:translateY(26px) scaleY(0); } }

/* nome e ruoli */
.hero{ position:absolute; inset:0; z-index:2; pointer-events:none; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; visibility:hidden;
  padding:calc(var(--top-h) + env(safe-area-inset-top,0px) + 20px) var(--gutter) 96px; box-sizing:border-box; }
.hero-name{ display:block; font-family:var(--f-display); font-weight:900; font-variation-settings:"wdth" 92; font-size:var(--hs,12vw); line-height:.86; letter-spacing:-.02em; margin:0; white-space:nowrap; }
.hero-l{ display:inline-block; overflow:clip; padding-block:.06em; vertical-align:top; white-space:nowrap; }
.hero-name .char{ font-variation-settings:"wdth" var(--w,92); }
.roles{ list-style:none; margin:clamp(24px,5vh,56px) 0 0; padding:0; width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,44px); }
.roles li{ position:relative; display:grid; align-content:start; gap:6px; padding-top:var(--s-4); }
.roles li::before{ content:""; position:absolute; left:0; right:0; top:0; height:1.5px; background:var(--ink); transform-origin:left; transform:scaleX(var(--lx,1)); }
.role-n{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--muted); }
.role{ font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 96; font-size:clamp(22px,2.4vw,32px); line-height:1.05; }
.role-d{ font-size:clamp(14px,1.1vw,17px); line-height:1.45; color:var(--muted); max-width:34ch; }

.fw{ position:relative; width:min(56vw, calc((100svh - var(--top-h) - 128px) * 4 / 3), 880px); aspect-ratio:4/3; }
.crop{ position:absolute; width:18px; height:18px; border:0 solid var(--ink); pointer-events:none; }
.crop.tl{ left:-15px; top:-15px; border-left-width:1.5px; border-top-width:1.5px; }
.crop.tr{ right:-15px; top:-15px; border-right-width:1.5px; border-top-width:1.5px; }
.crop.bl{ left:-15px; bottom:-15px; border-left-width:1.5px; border-bottom-width:1.5px; }
.crop.br{ right:-15px; bottom:-15px; border-right-width:1.5px; border-bottom-width:1.5px; }
.frame{ position:absolute; inset:0; container-type:size; overflow:hidden; transition:border-radius .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
.frame[data-era="1"]{ border-radius:var(--r-ui); box-shadow:5px 5px 0 rgba(0,0,0,.28); }
.frame[data-era="2"]{ border-radius:10px 10px 6px 6px; box-shadow:0 22px 50px -10px rgba(0,0,0,.42), 0 0 0 1px rgba(0,0,0,.22); }
.frame[data-era="3"]{ border-radius:var(--r-ui); box-shadow:none; }
.frame[data-era="4"]{ border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.1); }
.frame[data-era="5"]{ border-radius:22px; box-shadow:0 30px 70px -24px rgba(20,22,40,.5), 0 0 0 1px rgba(0,0,0,.08); }
.frame.broken{ overflow:visible; }
.era{ position:absolute; inset:0; display:flex; flex-direction:column; visibility:hidden; overflow:hidden; }
.frame > .e1{ visibility:visible; }
.scan{ position:absolute; left:-2%; right:-2%; top:0; height:3px; z-index:4; visibility:hidden; pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent); box-shadow:0 0 18px 4px rgba(143,143,255,.75); }
.cursor{ position:absolute; left:0; top:0; z-index:6; display:flex; align-items:flex-start; gap:1px; pointer-events:none; visibility:hidden; transform-origin:2px 2px; }
.cursor svg{ width:20px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.cursor span{ margin-top:17px; background:#2B2BEA; color:#fff; font:600 11px/1 var(--f-body); padding:4px 7px; border-radius:6px 6px 6px 2px; white-space:nowrap; }
/* punti cliccabili dentro le epoche: gli easter egg */
.hots{ position:absolute; inset:0; z-index:7; pointer-events:none; }
.hot{ position:absolute; pointer-events:auto; margin:0; padding:0; border:0; background:transparent; border-radius:4px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hot:focus-visible{ outline:2px solid #2B2BEA; outline-offset:1px; box-shadow:0 0 0 4px rgba(255,255,255,.9); }
/* un trofeo ancora da trovare si fa notare, piano, dopo qualche secondo */

.tc{ position:absolute; left:var(--gutter); right:var(--gutter); bottom:calc(18px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
/* larghezza fissa sul titolo più lungo ("Frame 01/08 · Fabio Staiano", 27 caratteri mono): i trattini non si spostano quando cambia la scena */
.tc-now{ color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums; min-width:calc(27 * (1ch + .08em)); }
.tc-ticks{ display:flex; gap:2px; }
.tc-ticks button{ width:24px; height:44px; padding:0; border:0; background:none; position:relative; cursor:pointer; }
.tc-ticks button::before{ content:""; position:absolute; left:3px; right:3px; top:20px; height:4px; border-radius:2px; background:var(--line); transition:background .3s; }
.tc-ticks button[aria-current="step"]::before{ background:var(--link); }
.tc-ticks button:hover::before{ background:var(--muted); }

.ff{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; visibility:hidden; pointer-events:none;
  padding:calc(var(--top-h) + 16px) var(--gutter) 84px; }
.ff.on{ pointer-events:auto; }
.ff-title{ display:inline-block; font-family:var(--f-display); font-weight:900; font-variation-settings:"wdth" 125; font-size:var(--ffs,15vw); line-height:.86; letter-spacing:-.02em; margin:0; white-space:nowrap; }
.ff-l{ display:inline-block; overflow:clip; padding-block:.06em; vertical-align:top; white-space:nowrap; }
.hero-l .char,.ff-l .char{ display:inline-block; }
.ff-title .char{ font-variation-settings:"wdth" var(--w,125); }
.ff-sub{ max-width:36ch; font-size:clamp(16px,1.35vw,20px); line-height:1.5; margin:1.1em auto 1.3em; text-wrap:balance; }
.ff-cta{ font:600 var(--fs-ui) var(--f-body); background:var(--link); color:var(--on-link); border:0; padding:14px 24px; cursor:pointer; }
.ff-crop{ position:absolute; width:28px; height:28px; border:0 solid var(--ink); }
.ff-crop.tl{ left:7%; top:calc(var(--top-h) + 4%); border-left-width:1.5px; border-top-width:1.5px; }
.ff-crop.tr{ right:7%; top:calc(var(--top-h) + 4%); border-right-width:1.5px; border-top-width:1.5px; }
.ff-crop.bl{ left:7%; bottom:12%; border-left-width:1.5px; border-bottom-width:1.5px; }
.ff-crop.br{ right:7%; bottom:12%; border-right-width:1.5px; border-bottom-width:1.5px; }

@media (max-width:760px), (orientation:portrait) and (max-width:1100px){
  .stage{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); align-content:start; row-gap:var(--s-5); padding-bottom:var(--s-8); }
  .fw{ order:-1; justify-self:center; width:min(100%, 44svh); aspect-ratio:1/1; margin-top:14px; margin-bottom:18px; }
  .narr{ align-self:start; }
  .cap{ align-self:start; }
  .cap .eyebrow{ margin-bottom:10px; font-size:var(--fs-label); }
  .cap h2{ font-size:clamp(34px,11vw,56px); }
  .cap p{ font-size:var(--fs-ui); }
  .hero{ justify-content:flex-start; padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 7svh); }
  .hero-l,.ff-l{ display:block; width:max-content; }
  .hero-name,.ff-title{ white-space:normal; }
  .roles{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:28px; }
  .roles li{ padding-top:10px; gap:2px; }
  .role{ font-size:var(--fs-card); }
  .role-d{ font-size:var(--fs-note); }
  .tc{ gap:var(--s-2); }
  .crop.tl,.crop.bl{ left:-9px; } .crop.tr,.crop.br{ right:-9px; }
  .crop.tl,.crop.tr{ top:-9px; } .crop.bl,.crop.br{ bottom:-9px; }
}
/* tablet in verticale: la stessa colonna del telefono, più grande */
@media (orientation:portrait) and (min-width:761px) and (max-width:1100px){
  .fw{ width:min(100%, 50svh); }
  .cap h2{ font-size:clamp(44px,7vw,76px); }
  .cap p{ font-size:var(--fs-text); max-width:40ch; }
  .roles{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-5); }
  .role{ font-size:clamp(24px,3.2vw,32px); }
  .role-d{ font-size:var(--fs-ui); }
}
/* telefoni bassi: il testo non deve finire sotto il contatore */
@media (max-width:760px) and (max-height:700px){
  .fw{ width:min(100%, 36svh); }
  .stage{ row-gap:14px; }
  .cap h2{ font-size:clamp(28px,9vw,42px); }
  .cap p{ font-size:var(--fs-note); line-height:1.42; }
  .hero{ padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 3svh); }
  .roles{ margin-top:18px; gap:10px; }
}
@media (max-width:760px) and (max-height:600px){ .role-d{ display:none; } }
@media (min-width:1600px){ .stage{ grid-template-columns:minmax(0,36rem) auto; justify-content:center; } }

/* modalità 1999 (codice Konami) */
.pu, .pu *{ cursor:none !important; }
.pu{ -webkit-user-select:none; user-select:none; }
.pu-scan *{ pointer-events:auto !important; }
.pu-scan .pu-ui{ visibility:hidden !important; }
.pu-gone{ visibility:hidden !important; }
.pu-ui{ pointer-events:none; }
.pu-ship{ position:fixed; left:0; top:0; z-index:calc(var(--z-game) + 2); filter:drop-shadow(0 0 6px rgba(43,43,234,.55)); }
.pu-ship svg{ display:block; }
.pu-fl{ animation:pu-fl .12s steps(2) infinite; }
@keyframes pu-fl{ 50%{ opacity:.25; } }
.pu-laser{ position:fixed; z-index:calc(var(--z-game) + 1); width:3px; height:22px; background:var(--yellow); box-shadow:0 0 8px 2px var(--yellow), 0 0 2px 1px #fff; }
.pu-layer{ position:fixed; inset:0; z-index:var(--z-game); overflow:hidden; }
.pu-ch{ position:absolute; white-space:pre; will-change:transform; }
.pu-px{ position:absolute; width:8px; height:8px; color:var(--ink); will-change:transform; }
.pu-plus{ position:absolute; font:700 18px/1 var(--f-mono); color:var(--yellow); text-shadow:2px 2px 0 #2B2BEA; transform:translateX(-50%); }
.pu-hud{ position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-game) + 3); pointer-events:auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:#000; color:#33FF33; font:700 14px/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; }
.pu-hud i{ font-style:normal; color:#9CFF9C; }
.pu-hud .pu-help{ color:#9CFF9C; font-weight:500; text-transform:none; letter-spacing:0; }
.pu-hud button{ margin-left:auto; font:inherit; color:#000; background:#33FF33; border:0; padding:6px 10px; cursor:pointer !important; }
.pu-banner{ position:fixed; inset:0; z-index:calc(var(--z-game) + 4); display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; }
.pu-banner b{ font:900 clamp(56px,11vw,160px)/.9 var(--f-display); font-variation-settings:"wdth" 125; color:var(--yellow); text-shadow:6px 6px 0 #2B2BEA, 12px 12px 0 #000; letter-spacing:-.01em; }
.pu-banner span{ font:700 clamp(18px,2.2vw,28px)/1 var(--f-mono); letter-spacing:.3em; color:#fff; background:#000; padding:8px 14px; }
.pu-flash{ position:fixed; inset:0; z-index:calc(var(--z-game) + 5); background:#fff; visibility:hidden; }

/* trofei */
.toasts{ position:fixed; z-index:var(--z-toast); right:var(--gutter); top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 10px); display:grid; gap:var(--s-2); justify-items:end; pointer-events:none; width:min(360px, calc(100vw - 2 * var(--gutter))); }
/* sul telefono il trofeo appare in alto, sopra la barra, e non copre didascalie e contatore */
@media (max-width:560px){ .toasts{ top:calc(env(safe-area-inset-top,0px) + var(--top-h) + 8px); } .toast{ box-shadow:4px 4px 0 #2B2BEA; } }
.toast{ display:flex; align-items:center; gap:var(--s-3); background:var(--ink); color:var(--paper); padding:10px 16px 10px 10px; box-shadow:var(--shadow-hard); }
.toast-ico{ width:36px; height:36px; flex:none; display:grid; place-items:center; background:var(--link); color:var(--on-link); }
.toast-ico svg{ width:20px; height:20px; }
.toast small{ display:block; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.toast b{ display:block; font-weight:600; font-size:var(--fs-ui); line-height:1.3; }
dialog.tro{ --dlg:var(--paper); border:0; padding:0; width:min(620px, calc(100vw - 32px)); max-height:min(84svh, 760px); background:var(--dlg); color:var(--ink); box-shadow:var(--shadow-dialog); }
dialog.tro::backdrop{ background:rgba(15,16,21,.6); }
dialog.tro{ overscroll-behavior:contain; }
html:has(dialog.tro[open]){ overflow:hidden; scrollbar-gutter:stable; }
.tro-in{ position:relative; padding:clamp(22px,4vw,36px); }
.tro h2{ font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 88; font-size:clamp(34px,4.4vw,52px); line-height:1; margin:0 0 .3em 0; }
.tro-intro{ margin:0; max-width:46ch; }
.tro-list{ list-style:none; margin:20px 0 22px; padding:0; border-top:1px solid var(--line); }
.tro-list li{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.tro-ico{ width:40px; height:40px; display:grid; place-items:center; box-sizing:border-box; border:1.5px dashed var(--line); color:var(--muted); font:600 var(--fs-note) var(--f-mono); }
.tro-ico svg{ width:20px; height:20px; }
.tro-list li.on .tro-ico{ border:0; background:var(--link); color:var(--on-link); }
.tro-list b{ display:block; font-weight:600; line-height:1.3; }
.tro-list span.d{ display:block; font-size:var(--fs-note); line-height:1.4; color:var(--muted); }
.tro-list span.d i{ font-style:normal; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; }
.tro-list li:not(.on) b{ color:var(--muted); }
.tro-foot{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; }
.tro-note{ margin:0; font-size:var(--fs-note); color:var(--muted); }
.tro-foot button,.tro-x{ font:600 var(--fs-ui) var(--f-body); cursor:pointer; min-height:var(--tap); }
.tro-reset{ background:none; color:var(--ink); border:1.5px solid var(--line); padding:8px 14px; }
.tro-x{ position:sticky; top:12px; float:right; z-index:1; width:44px; margin:-8px -8px 0 12px; padding:0; background:var(--dlg); border:1.5px solid var(--line); color:var(--ink); font-size:var(--fs-title-s); line-height:1; }
.ok-eye{ font:600 var(--fs-label)/1.2 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--link); margin:0 0 var(--s-3); }
.ok-text{ margin:0 0 var(--s-5); max-width:40ch; }
.ok-go{ font:600 var(--fs-ui) var(--f-body); background:var(--link); color:var(--on-link); border:0; padding:14px 24px; min-height:48px; cursor:pointer; }
dialog.tro.ok{ width:min(480px, calc(100vw - 32px)); }
.cv{ margin-top:22px; }
.cv a{ font-weight:600; color:var(--link); text-underline-offset:4px; }
.cv-ic{ display:inline-block; margin-left:6px; vertical-align:-3px; }
.tro-replay{ background:none; color:var(--link); border:1.5px solid var(--link); padding:8px 14px; }
.tro-foot:has(.tro-replay:not([hidden])) .tro-note{ flex:1 0 100%; }
.tro-replay + .tro-reset{ margin-left:0; }
.tro-replay[hidden]{ display:none; }
.tro-list li.on.plat .tro-ico{ background:linear-gradient(135deg,#FFFFFF,#C9CFD9 45%,#8F97A6 55%,#EEF1F6); color:#0B0C10; box-shadow:3px 3px 0 #2B2BEA; }
.tro-btn.plat{ border-color:#AEB5C2; background:linear-gradient(115deg, rgba(174,181,194,0) 35%, rgba(174,181,194,.35) 50%, rgba(174,181,194,0) 65%) no-repeat; background-size:250% 100%; animation:tro-shine 5s ease-in-out infinite; }
.tro-btn.plat svg{ color:#9AA2B1; }
@keyframes tro-shine{ 0%,55%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }

/* trofeo di platino: la festa */
html:has(dialog.plat[open]){ overflow:hidden; }
dialog.plat{ position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; box-sizing:border-box;
  background:#0B0C10; color:#F4F6FA; overflow:auto; overscroll-behavior:contain; color-scheme:dark; }
dialog.plat::backdrop{ background:transparent; }
.plat-bg{ position:fixed; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(55% 45% at var(--cx,50%) var(--cy,30%), rgba(43,43,234,.5), rgba(43,43,234,0) 70%); }
.plat-rays{ position:absolute; left:var(--cx,50%); top:var(--cy,30%); width:120vmax; height:120vmax; margin:-60vmax 0 0 -60vmax; border-radius:50%;
  background:repeating-conic-gradient(rgba(255,255,255,.08) 0 7deg, rgba(255,255,255,0) 7deg 20deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 12%, rgba(0,0,0,0) 100%); mask-image:radial-gradient(closest-side, #000 12%, rgba(0,0,0,0) 100%); animation:plat-spin 60s linear infinite; }
@keyframes plat-spin{ to{ transform:rotate(1turn); } }
.plat-in{ position:relative; z-index:1; min-height:100%; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:max(28px, env(safe-area-inset-top,0px)) var(--gutter) max(28px, env(safe-area-inset-bottom,0px)); }
.plat-cup{ width:clamp(84px, 16svh, 150px); aspect-ratio:1/1; margin-bottom:clamp(10px,2svh,22px); filter:drop-shadow(6px 6px 0 #2B2BEA); }
.plat-cup svg{ display:block; width:100%; height:100%; }
.plat-eye{ font:600 12px/1.2 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--yellow); margin:0 0 var(--s-3); }
.plat-t{ font-family:var(--f-display); font-weight:900; font-variation-settings:"wdth" 125; font-size:clamp(46px, min(15vw, 17svh), 168px); line-height:.86; letter-spacing:-.02em; margin:0; white-space:nowrap; filter:drop-shadow(5px 5px 0 #2B2BEA); }
.plat-tl{ display:inline-block; overflow:clip; padding-block:.06em; white-space:nowrap; }
.plat-tl .char{ display:inline-block; font-variation-settings:"wdth" var(--w,125); }
.plat-tl:not(.sp), .plat-tl .char{ background:linear-gradient(180deg,#FFFFFF 0%,#E6E9EF 40%,#8F97A6 52%,#D9DEE6 70%,#FFFFFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plat-p{ max-width:38ch; font-size:clamp(16px,1.4vw,19px); line-height:1.5; color:#C9CED8; margin:clamp(12px,2.4svh,22px) auto 0; text-wrap:balance; }
.plat-row{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:clamp(14px,2.6svh,26px) 0; padding:0; max-width:520px; }
.plat-row li{ width:26px; height:26px; display:grid; place-items:center; background:#2B2BEA; color:#fff; }
.plat-row svg{ width:14px; height:14px; }
.plat-ok{ font:600 16px var(--f-body); background:#F4F6FA; color:#0B0C10; border:0; padding:14px 26px; min-height:48px; box-shadow:5px 5px 0 #2B2BEA; cursor:pointer; }
.plat-ok:hover{ background:#fff; }
.plat-ok:focus-visible{ outline:3px solid var(--yellow); outline-offset:4px; }
.plat-acts{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 18px; }
.plat-go{ font:600 16px var(--f-body); background:var(--yellow); color:#0B0C10; border:0; padding:14px 26px; min-height:48px; box-shadow:5px 5px 0 #2B2BEA; cursor:pointer; }
.plat-go:hover{ background:#FFF06A; }
.plat-go:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.fl-layer{ position:fixed; inset:0; z-index:var(--z-game); overflow:hidden; touch-action:none; cursor:grab; outline:none; -webkit-user-select:none; user-select:none; }
.fl-layer:active{ cursor:grabbing; }
.fl-ch{ position:absolute; left:0; top:0; display:block; text-align:center; white-space:pre; letter-spacing:0; will-change:transform; pointer-events:none; }
.fl-hide{ color:transparent !important; -webkit-text-fill-color:transparent !important; text-shadow:none !important; }
.fl-ring{ position:absolute; width:24px; height:24px; margin:-12px 0 0 -12px; border:3px solid var(--yellow); border-radius:50%; pointer-events:none; }
.fl-ban{ pointer-events:none; }
.fl-hud{ position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-game) + 3); display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:#0B0C10; color:#F4F6FA; font:600 13px/1.35 var(--f-mono); }
.fl-hud b{ color:var(--yellow); letter-spacing:.14em; }
.fl-hud .fl-help{ color:#C9CED8; font-weight:400; flex:1 1 220px; }
.fl-hud button{ margin-left:auto; font:600 15px var(--f-body); background:#F4F6FA; color:#0B0C10; border:0; padding:10px 18px; min-height:var(--tap); box-shadow:4px 4px 0 #2B2BEA; cursor:pointer; }
.fl-hud button:focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
.ml-funds{ position:fixed; left:var(--gutter); bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:calc(var(--z-game) + 2); display:flex; align-items:baseline; gap:var(--s-3); padding:12px 18px;
  background:#0B0C10; color:#F4F6FA; box-shadow:var(--shadow-hard); opacity:0; transform:translateY(24px); transition:opacity .3s, transform .3s; pointer-events:none; }
.ml-funds.on{ opacity:1; transform:none; }
.ml-ic{ align-self:center; width:34px; height:20px; display:grid; place-items:center; background:#2FB45A; color:#0B3D1C; font:800 12px/1 var(--f-display); box-shadow:inset 0 0 0 2px #5AD383; }
.ml-funds b{ font:700 clamp(20px,3vw,28px)/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.ml-funds i{ font:600 14px/1 var(--f-mono); font-style:normal; color:#C9CED8; }
.ml-bill{ position:fixed; top:-70px; z-index:calc(var(--z-game) + 1); width:58px; height:30px; display:grid; place-items:center; background:#2FB45A; color:#0B3D1C; font:800 17px/1 var(--f-display);
  border:2px solid #1E7A3C; box-shadow:inset 0 0 0 3px #5AD383; pointer-events:none; font-style:normal; }
.ml-coin{ width:28px; height:28px; border-radius:50%; background:#FFC53D; color:#6B4A00; border-color:#C98A00; box-shadow:inset 0 0 0 3px #FFDA7A; font-size:13px; }
.plat-cred{ margin-top:clamp(18px,3svh,30px); height:5.6em; width:min(100%,440px); overflow:hidden; font-size:var(--fs-note); line-height:1.35;
  -webkit-mask-image:linear-gradient(rgba(0,0,0,0), #000 30%, #000 70%, rgba(0,0,0,0)); mask-image:linear-gradient(rgba(0,0,0,0), #000 30%, #000 70%, rgba(0,0,0,0)); }
.plat-cred p{ margin:0 0 1em; }
.plat-cred span{ display:block; font:500 10px/1.5 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:#9AA2B1; }
.plat-cred b{ font-weight:600; color:#F4F6FA; }
.plat-cred.still{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
.plat-conf{ position:fixed; left:var(--cx,50%); top:var(--cy,30%); z-index:2; pointer-events:none; }
.plat-conf i{ position:absolute; left:0; top:0; width:10px; height:6px; }
.plat-conf i.sq{ width:7px; height:7px; }
.plat-flash{ position:fixed; inset:0; z-index:3; background:#fff; opacity:0; pointer-events:none; }
.pu dialog[open], .pu dialog[open] *{ cursor:auto !important; }
.pu dialog[open] :is(button, a){ cursor:pointer !important; }


/* ---------- epoca 1: le tabelle ---------- */
.e1{ background:#C0C0C0; border:2px solid; border-color:#DFDFDF #404040 #404040 #DFDFDF; box-sizing:border-box; color:#000; font-family:Tahoma,"MS Sans Serif",Verdana,sans-serif; font-size:max(7px,1.65cqw); line-height:1.25; }
.w98-title{ display:flex; align-items:center; gap:.5em; padding:.3em .4em .3em .5em; background:linear-gradient(90deg,#000080,#1084D0); color:#fff; font-weight:700; white-space:nowrap; }
.w98-ico{ font-family:"Times New Roman",serif; font-style:italic; color:#7FD3FF; font-size:1.25em; line-height:1; }
.w98-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.w98-btns{ display:flex; gap:2px; }
.w98-btns i{ font-style:normal; width:1.45em; height:1.25em; display:grid; place-items:center; background:#C0C0C0; color:#000; border:1px solid; border-color:#fff #404040 #404040 #fff; line-height:1; font-size:.9em; }
.w98-menu{ display:flex; gap:1.1em; padding:.3em .7em; white-space:nowrap; overflow:hidden; }
.w98-addr{ display:flex; align-items:center; gap:.6em; padding:.15em .6em .4em; white-space:nowrap; }
.w98-field{ flex:1; min-width:0; background:#fff; border:2px solid; border-color:#808080 #fff #fff #808080; padding:.12em .4em; overflow:hidden; text-overflow:ellipsis; }
.w98-go{ border:1px solid; border-color:#fff #404040 #404040 #fff; padding:0 .6em; }
.w98-page{ flex:1; min-height:0; margin:0 .45em; border:2px solid; border-color:#808080 #fff #fff #808080; overflow:hidden; display:grid; grid-template-columns:24% minmax(0,1fr);
  font-family:"Times New Roman",Times,serif; background:radial-gradient(circle at 30% 30%, #fff 0 9%, transparent 10%) 0 0/3.2cqw 3.2cqw, #CFE6FF; }
.old-nav{ background:#003399; color:#FFFF66; display:flex; flex-direction:column; gap:.7em; padding:1em .8em; font-size:max(7px,1.9cqw); }
.old-nav b{ color:#fff; letter-spacing:.1em; }
.old-nav u{ text-underline-offset:2px; }
.old-main{ min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4cqh; padding:3cqh 2.4cqw; text-align:center; }
.old-new{ align-self:stretch; display:flex; gap:.6em; align-items:flex-start; text-align:left; background:#FFFFE1; border:1px dashed #D40000; padding:.45em .6em; font-family:Arial,sans-serif; font-size:max(7px,1.45cqw); color:#222; }
.old-new b{ flex:none; color:#fff; background:#D40000; padding:0 .35em; font-size:.9em; }
.old-ring{ font-family:Arial,sans-serif; font-size:max(7px,1.4cqw); color:#000080; }
.old-ring u{ text-underline-offset:2px; }
.w98-status{ display:flex; gap:2px; padding:.25em .3em .3em; font-size:.92em; white-space:nowrap; }
.w98-status span{ border:1px solid; border-color:#808080 #fff #fff #808080; padding:.05em .5em; }
.w98-status span:first-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.w98-status span:last-child{ width:22%; }
.old-h1{ font-family:"Comic Sans MS","Chalkboard SE",cursive; font-weight:700; color:#D40000; font-size:4.6cqw; line-height:1.05; text-shadow:2px 2px 0 #FFE600; }
.old-mq{ align-self:stretch; overflow:hidden; white-space:nowrap; background:#000; color:#33FF33; font-family:"Courier New",monospace; font-size:max(7px,1.7cqw); padding:.25em 0; }
.old-mq span{ display:inline-block; }
@keyframes mq{ to{ transform:translateX(-100%); } }
.old-wip{ align-self:stretch; padding:.5cqw; background:repeating-linear-gradient(45deg,#FFD400 0 1.3cqw,#111 1.3cqw 2.6cqw); }
.old-wip span{ display:inline-block; background:#111; color:#FFD400; font-family:Impact,"Arial Black",sans-serif; letter-spacing:.06em; font-size:max(8px,2.2cqw); padding:.15em .7em; }
.old-ctr{ font-size:max(7px,1.9cqw); }
.ctr-n{ display:inline-flex; gap:1px; vertical-align:middle; }
.ctr-n b{ background:#000; color:#4CFF4C; font-family:"Courier New",monospace; padding:0 .22em; font-weight:700; }
.old-opt{ font-size:max(7px,1.55cqw); font-style:italic; color:#333; }
.old-kw{ position:relative; font-family:Arial,sans-serif; font-size:max(7px,1.5cqw); color:#7A8CA5; padding:.1em .3em; }
.kw-mark{ position:absolute; inset:0; background:rgba(43,43,234,.28); transform-origin:left; transform:scaleX(0); }

/* ---------- epoca 2: il gel ---------- */
.e2{ background:#ECECEC; color:#222; font-family:"Lucida Grande","Trebuchet MS",Verdana,sans-serif; font-size:max(7px,1.65cqw); }
.aq-title{ position:relative; display:flex; align-items:center; padding:.55em .8em; background:linear-gradient(#F4F4F4,#CDCDCD); border-bottom:1px solid #999; }
.aq-dots{ display:flex; gap:.45em; position:relative; z-index:1; }
.aq-dots i{ width:1.1em; height:1.1em; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), inset 0 -2px 3px rgba(255,255,255,.5);
  background:radial-gradient(ellipse 60% 40% at 50% 22%, rgba(255,255,255,.95), transparent 70%), radial-gradient(circle at 50% 75%, #FF8C80, #D30000); }
.aq-dots i:nth-child(2){ background:radial-gradient(ellipse 60% 40% at 50% 22%, rgba(255,255,255,.95), transparent 70%), radial-gradient(circle at 50% 75%, #FFE27A, #D99A00); }
.aq-dots i:nth-child(3){ background:radial-gradient(ellipse 60% 40% at 50% 22%, rgba(255,255,255,.95), transparent 70%), radial-gradient(circle at 50% 75%, #9BEA7A, #2E9E14); }
.aq-t{ position:absolute; left:0; right:0; text-align:center; font-weight:700; color:#333; text-shadow:0 1px 0 #fff; }
.aq-tabs{ display:flex; gap:.3em; padding:.6em 1em 0; background:linear-gradient(#DADADA,#C9C9C9); border-bottom:1px solid #999; }
.aq-tabs span{ padding:.35em 1.1em; border-radius:.7em .7em 0 0; background:linear-gradient(#F2F2F2,#D6D6D6); border:1px solid #A5A5A5; border-bottom:0; color:#444; }
.aq-tabs .on{ background:linear-gradient(#8FD0FF,#2B8EF0); color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.25); border-color:#1D6EC2; }
.aq-body{ flex:1; min-height:0; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.2cqh; padding:3cqw;
  background:repeating-linear-gradient(#F7F7F7 0 2px,#EAEAEA 2px 4px); }
.aq-logo-wrap{ display:flex; flex-direction:column; align-items:center; }
.aq-logo{ font-family:"Trebuchet MS","Lucida Grande",Verdana,sans-serif; font-weight:700; font-size:8.6cqw; letter-spacing:-.045em; line-height:1;
  background:linear-gradient(#8ED2FF 0%,#2A86E8 52%,#0B5BC0 53%,#1F78DA 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.aq-logo sup{ font-size:.42em; letter-spacing:0; margin-left:.12em; }
.aq-refl{ transform:scaleY(-1); opacity:.3; -webkit-mask-image:linear-gradient(to top, #000, transparent 65%); mask-image:linear-gradient(to top, #000, transparent 65%); margin-top:-.08em; height:.6em; overflow:hidden; display:flex; align-items:flex-end; }
.aq-star{ position:absolute; top:9%; right:8%; width:14cqw; aspect-ratio:1; display:grid; place-items:center; transform:rotate(-12deg);
  background:radial-gradient(circle,#FFE95C,#FF9A00 62%,#FF5A00); }
.aq-star span{ color:#fff; font-weight:900; font-size:3.1cqw; letter-spacing:.02em; text-shadow:0 1px 1px rgba(150,40,0,.6); transform:rotate(-4deg); }
.aq-tag{ margin:0; color:#555; font-size:max(7px,1.9cqw); }
.aq-btn{ position:relative; overflow:hidden; display:inline-block; color:#fff; font-weight:700; font-size:max(8px,2.4cqw); padding:.65em 1.7em; border-radius:var(--r-pill);
  background:linear-gradient(#9AD6FF 0%,#3A9BF5 50%,#1576DC 51%,#45A6FF 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 .25cqw .8cqw rgba(0,60,140,.45); text-shadow:0 -1px 0 rgba(0,0,0,.3); }
.aq-shine{ position:absolute; top:0; bottom:0; left:0; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent); transform:translateX(-120%); }
.aq-cloud{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.15em .7em; max-width:72cqw; color:#1B6FD8; }
.aq-cloud span{ font-size:calc(max(7px,1.6cqw) * var(--s,1)); text-decoration:underline; text-decoration-color:rgba(27,111,216,.35); }

/* ---------- epoca 3: il piatto ---------- */
.e3{ background:#ECF0F1; color:#2C3E50; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
/* i font delle ere arrivano dopo il caricamento (.fx la mette lo script del sito) */
.fx .old-h1{ font-family:"Comic Sans MS","Comic Neue","Chalkboard SE",cursive; }
.fx .e3{ font-family:"Helvetica Neue","Lato",Helvetica,Arial,sans-serif; }
.fl-bar{ display:flex; align-items:center; gap:2.2cqw; padding:2.2cqw 3cqw; background:#2C3E50; color:#fff; font-weight:300; font-size:max(8px,2.1cqw); letter-spacing:.24em; }
.fl-burger{ display:grid; gap:.65cqw; }
.fl-burger i{ display:block; width:3.4cqw; height:.45cqw; background:#fff; }
.fl-dot{ margin-left:auto; width:1.6cqw; height:1.6cqw; border-radius:50%; background:#E74C3C; }
.fl-body{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.6cqh; padding:3cqw; text-align:center; }
.fl-hello{ font-weight:100; font-size:15cqw; line-height:.9; letter-spacing:-.02em; }
.fl-sub{ font-weight:300; font-size:max(8px,2.5cqw); }
.fl-icons{ display:flex; gap:2.4cqw; }
.fl-ico{ width:10cqw; height:10cqw; display:block; }
.fl-btn{ font-size:max(7px,2cqw); letter-spacing:.28em; padding:.95em 2.6em; background:#1ABC9C; color:#fff; }

/* ---------- epoca 4: i sistemi ---------- */
.e4{ background-color:#E8E9ED; background-image:radial-gradient(#BFC3CC 1px, transparent 1.3px); background-size:2.4cqw 2.4cqw; color:#1D1F24; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.ab-label{ position:absolute; left:7%; top:3.4%; font-size:max(7px,1.6cqw); color:#3B5BDB; font-weight:600; }
.ab-label em{ font-style:normal; color:#7A7F8A; font-weight:400; }
.ab-board{ position:absolute; left:7%; top:9.5%; right:7%; bottom:7%; background:#fff; outline:1.5px solid #3B5BDB; }
.ab-grid{ position:absolute; inset:0 4%; display:grid; grid-template-columns:repeat(12,1fr); gap:1.1cqw; pointer-events:none; }
.ab-grid i{ background:rgba(255,64,129,.06); }
.ab-card{ position:absolute; left:8%; top:9%; width:41%; box-sizing:border-box; padding:1.8cqw; border:1px solid #E3E5EA; border-radius:1.2cqw; background:#fff; box-shadow:0 .6cqw 1.8cqw rgba(16,24,40,.08); display:flex; flex-direction:column; }
.ab-comp{ position:absolute; left:0; top:-2.6cqw; font-size:max(7px,1.35cqw); color:#7B3FE4; font-weight:600; display:flex; align-items:center; gap:.4em; white-space:nowrap; }
.ab-comp::before{ content:""; width:.75em; height:.75em; border:1.5px solid #7B3FE4; transform:rotate(45deg); }
.ab-media{ aspect-ratio:16/9; border-radius:.8cqw; background:linear-gradient(135deg,#DCE3FF,#EFE6FF); }
.ab-gap{ --g:16; position:relative; height:calc(var(--g) * .13cqw); }
.ab-gap::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:#FF2D6F; }
.ab-gap::after{ content:""; position:absolute; left:calc(50% - .7cqw); width:1.4cqw; top:0; bottom:0; border-top:1px solid #FF2D6F; border-bottom:1px solid #FF2D6F; }
.ab-gap b{ position:absolute; left:calc(50% + 1.2cqw); top:50%; transform:translateY(-50%); background:#FF2D6F; color:#fff; font-size:max(7px,1.3cqw); padding:.1em .45em; border-radius:.3em; font-weight:600; line-height:1.3; font-variant-numeric:tabular-nums; }
.ab-title{ font-weight:650; font-size:max(8px,2.2cqw); }
.ab-lines i{ display:block; height:.9cqw; margin-top:1cqw; border-radius:1cqw; background:#ECEEF2; }
.ab-btn{ margin-top:2cqw; align-self:flex-start; background:#1D1F24; color:#fff; font-size:max(7px,1.6cqw); padding:.7em 1.3em; border-radius:.6em; }
.ab-comment{ position:absolute; z-index:3; left:22%; top:calc(100% + 2.2cqw); display:flex; align-items:center; gap:1cqw; width:max-content; max-width:36cqw; background:#fff; color:#1D1F24;
  border-radius:.2cqw 1.4cqw 1.4cqw 1.4cqw; box-shadow:0 .8cqw 2.4cqw rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.05); padding:1.1cqw 1.5cqw; font-size:max(8px,1.8cqw); line-height:1.3; }
.ab-av{ flex:none; width:3.6cqw; height:3.6cqw; border-radius:50%; background:#FFE24D; display:grid; place-items:center; color:#15161B; }
.ab-av svg{ width:70%; height:70%; }
.ab-side{ position:absolute; right:7%; top:9%; width:33%; display:flex; flex-direction:column; gap:1.3cqw; font-size:max(7px,1.45cqw); }
.ab-h{ font-weight:650; color:#7A7F8A; text-transform:uppercase; letter-spacing:.08em; font-size:max(6px,1.2cqw); margin-top:.8cqw; }
.tok{ display:flex; align-items:center; gap:.9cqw; font-family:var(--f-mono); white-space:nowrap; }
.tok i{ flex:none; width:2.4cqw; height:2.4cqw; border-radius:.5cqw; }
.tok .sp{ background:repeating-linear-gradient(90deg,#FF2D6F 0 1px,transparent 1px 100%) , #FFE3EC; }
.tok .rd{ border:1.5px solid #1D1F24; border-radius:1cqw 0 0 0; box-sizing:border-box; }
.ab-stat{ color:#3A3E47; }
.hd{ position:absolute; width:1.3cqw; height:1.3cqw; background:#fff; border:1.5px solid #3B5BDB; transform:translate(-50%,-50%); box-sizing:border-box; }

/* ---------- epoca 5: le macchine ---------- */
.e5{ background:#FBFBFD; color:#17181C; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.ch-head{ display:flex; align-items:center; gap:1.2cqw; padding:2cqw 2.6cqw; border-bottom:1px solid #ECECF1; font-weight:600; font-size:max(8px,1.9cqw); background:#FBFBFD; }
.ch-spark{ width:2.6cqw; height:2.6cqw; fill:#7B3FE4; }
.ch-model{ margin-left:auto; font-family:var(--f-mono); font-weight:400; color:#8A8D96; font-size:max(7px,1.35cqw); }
.ch-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:2cqw; padding:2.6cqw; }
.ch-msg{ font-size:max(8px,2cqw); line-height:1.35; }
.ch-user{ align-self:flex-end; max-width:78%; background:#1D1F24; color:#fff; padding:1.2cqw 1.8cqw; border-radius:2cqw 2cqw .4cqw 2cqw; }
.ch-ai{ display:flex; flex-direction:column; gap:1.6cqw; }
.ch-ai-text{ align-self:flex-start; min-height:1.35em; }
.ch-thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6cqw; }
.thumb{ position:relative; aspect-ratio:4/3; container-type:size; overflow:hidden; border-radius:1cqw; box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 .5cqw 1.4cqw rgba(0,0,0,.08); }
.th-scale{ position:absolute; left:0; top:0; width:640px; height:480px; container-type:size; transform-origin:0 0; pointer-events:none; }
.th-scale > .era{ visibility:visible; }
.strike{ position:absolute; z-index:2; left:-6%; right:-6%; top:47%; height:max(2px,2.2cqw); background:#E5172F; border-radius:1cqw; transform:rotate(-24deg) scaleX(0); transform-origin:left center; }
.no{ position:absolute; z-index:3; right:6%; bottom:7%; background:#E5172F; color:#fff; font-family:var(--f-mono); font-weight:700; font-size:max(7px,9cqw); padding:.2em .5em; border-radius:.3em; transform:rotate(-8deg) scale(0); }
.ch-input{ display:flex; align-items:center; gap:.8cqw; margin:0 2.6cqw 2.6cqw; padding:1.3cqw 1.3cqw 1.3cqw 2cqw; border:1px solid #E1E2E8; border-radius:2.2cqw; background:#fff; font-size:max(8px,2cqw); }
.ch-ph{ color:#6A6E78; }
.ch-caret{ width:2px; height:1.2em; background:#17181C; animation:blink 1s steps(1) 4; }
@keyframes blink{ 50%{ opacity:0; } }
.ch-send{ margin-left:auto; flex:none; width:4.4cqw; height:4.4cqw; border-radius:50%; background:#1D1F24; color:#fff; display:grid; place-items:center; font-size:max(8px,2cqw); }

@media (max-width:760px){
  .ch-ai{ flex:1; min-height:0; }
  .ch-thumbs{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); flex:1; min-height:0; }
  .thumb{ aspect-ratio:auto; min-height:0; }
}

/* ---------- apertura: lo stesso progetto, strumenti diversi ---------- */
.e6{ background:radial-gradient(circle, rgba(21,22,27,.14) 1px, transparent 1.5px) 0 0/16px 16px, #FAF8F2; color:#15161B; font-family:var(--f-body); }
.frame[data-era="6"]{ border-radius:4px; box-shadow:0 26px 54px -26px rgba(20,22,40,.38), 0 0 0 1px rgba(0,0,0,.08); }
.tl-bar{ display:flex; align-items:baseline; gap:.9em; padding:3.4cqh 4.4cqw 0; }
.tl-k{ font-family:var(--f-mono); font-size:max(8px,1.35cqw); letter-spacing:.08em; text-transform:uppercase; color:#6A6E78; }
.tl-name{ display:inline-block; overflow:hidden; padding-block:.06em; }
.tl-n{ display:inline-block; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 96; font-size:max(17px,4.4cqw); line-height:1.05; }
.tl-svg{ flex:1; min-height:0; width:100%; display:block; padding:1.4cqh 3.4cqw; box-sizing:border-box; overflow:visible; }
.wf{ color:#15161B; transition:color .3s; }
.wf .d{ stroke-dasharray:1 2; stroke-dashoffset:0; }
.wf .thick{ stroke-width:7; }
.wf.sketch{ color:#3E3F49; }
.ov{ visibility:hidden; }
.ov-ps .ants{ animation:ants .7s linear infinite; }
@keyframes ants{ to{ stroke-dashoffset:-8; } }
.tl-strip{ display:flex; flex-wrap:wrap; gap:.35em 1.1em; padding:0 4.4cqw 3.2cqh; font-family:var(--f-mono); font-size:max(7px,1.2cqw); letter-spacing:.06em; text-transform:uppercase; color:#6A6E78; }
.tl-strip span{ transition:color .25s; }
.tl-strip span.on{ color:#2B2BEA; text-decoration:underline; text-underline-offset:.35em; }
@media (prefers-reduced-motion: reduce){ .ov-ps .ants{ animation:none; } }


/* aggiunte alle epoche */
.w98-alert{ position:absolute; z-index:3; left:50%; top:44%; width:60%; transform:translate(-50%,-50%); display:none; background:#C0C0C0; color:#000; border:2px solid; border-color:#DFDFDF #404040 #404040 #DFDFDF; box-shadow:2px 2px 0 rgba(0,0,0,.6); font-family:Tahoma,"MS Sans Serif",Verdana,sans-serif; font-size:max(7px,1.65cqw); }
.w98-alert.on{ display:block; }
.w98-alert-b{ display:flex; gap:1em; align-items:center; padding:1.1em 1.1em .6em; }
.w98-alert-b i{ flex:none; width:2.2em; height:2.2em; border-radius:50%; background:#1F5FD6; color:#fff; display:grid; place-items:center; font:700 1.3em/1 "Times New Roman",serif; font-style:italic; }
.w98-alert-ok{ display:block; width:max-content; margin:.2em auto .9em; padding:.25em 2em; border:1px solid; border-color:#fff #404040 #404040 #fff; outline:1px dotted #000; outline-offset:-4px; }
.old-gb{ cursor:pointer; }


/* ---------- dopo la storia ---------- */
.sec{ padding-block:clamp(80px,12vw,168px); border-top:1px solid var(--line); }
.sec:focus{ outline:none; }
.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.h2{ font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 88; font-size:clamp(38px,5.4vw,82px); line-height:.98; letter-spacing:-.012em; margin:0 0 .4em; text-wrap:balance; }
.lead{ font-size:clamp(17px,1.4vw,21px); line-height:1.5; max-width:var(--measure-lead); margin:0 0 1.8em; text-wrap:pretty; }
.boxed{ position:relative; }
.boxed > .crop{ border-color:var(--ink); }

/* la newsletter ha un fondo tutto suo */
.nl-sec{ background:var(--link); color:var(--on-link); border-top:0; }
.nl-sec .eyebrow{ color:color-mix(in srgb, var(--on-link) 80%, var(--link)); }
.nl-sec .boxed > .crop{ border-color:var(--on-link); }
.nl-sec :focus-visible{ outline-color:var(--on-link); }
.nl{ display:flex; flex-wrap:wrap; gap:10px; max-width:600px; padding:var(--s-5) 0; box-sizing:border-box; }
.nl label{ flex-basis:100%; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; }
.nl input{ flex:1 1 220px; min-width:0; font:inherit; font-size:var(--fs-ui); padding:14px 16px; border:1.5px solid var(--on-link); border-radius:var(--r-ui); background:var(--paper); color:var(--ink); }
.nl input[aria-invalid="true"]{ outline:3px solid var(--on-link); outline-offset:2px; }
.nl input::placeholder{ color:var(--muted); opacity:1; }
.nl button[type="submit"]{ flex:none; font:600 var(--fs-ui) var(--f-body); padding:14px 24px; background:var(--on-link); color:var(--link); border:1.5px solid var(--on-link); border-radius:var(--r-ui); cursor:pointer; }
.nl-note{ flex-basis:100%; margin:6px 0 0; font-size:var(--fs-note); font-weight:600; }
.nl-note:empty{ margin:0; }
.nl-small{ flex-basis:100%; margin:2px 0 0; font-size:var(--fs-note); opacity:.9; }
/* iscrizione riuscita: il campo sparisce e al suo posto c'è la conferma, con cosa succede dopo (Kit gratuito non manda il benvenuto) */
.nl.done > label,.nl.done > input,.nl.done > button[type="submit"],.nl.done > .nl-note{ display:none; }
.nl-done{ flex-basis:100%; }
.nl-done[hidden]{ display:none; }
.nl-done:focus{ outline:none; }
.nl-done-h{ margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 88; font-size:clamp(34px,4.4vw,52px); line-height:1; letter-spacing:-.012em; }
.nl-done-p{ max-width:36rem; margin:14px 0 0; font-size:var(--fs-text); line-height:1.5; }
.nl-done-p strong{ font-weight:700; overflow-wrap:anywhere; }
.nl-done-act{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; margin-top:20px; }
.nl-go{ display:inline-flex; align-items:center; min-height:48px; padding:14px 24px; box-sizing:border-box; font:600 var(--fs-ui) var(--f-body); background:var(--on-link); color:var(--link); text-decoration:none; }
.nl-go:hover{ opacity:.86; }
.nl-done-act .linkish{ min-height:var(--tap); font-size:var(--fs-ui); }
@media (prefers-reduced-motion: no-preference){ .nl-done:not([hidden]){ animation:nl-in .4s cubic-bezier(.2,.7,.2,1); } }
@keyframes nl-in{ from{ opacity:0; transform:translateY(8px); } }

.rows{ margin-top:var(--s-7); border-top:1px solid var(--ink); }
.row{ display:grid; grid-template-columns:220px minmax(0,1fr) auto; gap:clamp(20px,3vw,40px); align-items:center; padding-block:28px; border-bottom:1px solid var(--line); }
.row .art{ display:block; position:relative; aspect-ratio:12/7; background-color:var(--paper); background-image:radial-gradient(var(--dot) 1px,transparent 1.2px); background-size:12px 12px; border:1px solid var(--line); transition:transform .2s,box-shadow .2s,opacity .35s; }
.row .art.palco{ color:var(--ink); }
.row .art i{ position:absolute; left:10px; top:8px; font-style:normal; font-family:var(--f-mono); font-size:10px; color:var(--muted); }
.row .art svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
@media (hover:hover){ .row:hover .art{ transform:translate(-3px,-3px); box-shadow:var(--shadow-hard); } }
@media (prefers-reduced-motion:reduce){ .row .art{ transition:none; } }
.row .k{ display:block; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.row h3{ font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 96; font-size:clamp(22px,2.3vw,32px); line-height:1.1; margin:0 0 .35em; }
.row p{ margin:0; max-width:58ch; }
.row a{ color:var(--link); font-weight:600; text-decoration:none; white-space:nowrap; display:inline-block; padding:var(--s-1) 0; }
.row a:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (hover:none){ .rows.has-on>:not(.on) .art{ opacity:.4; } }
@media (max-width:760px){ .row{ grid-template-columns:minmax(0,1fr); gap:18px; padding-block:24px 28px; } .row .art{ max-width:420px; } }
.book-link{ color:var(--link); font-weight:600; text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:6px 0; }
.book-link:hover{ text-decoration-thickness:2px; }

.books{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(36px,6vw,104px); align-items:center; }
.covers{ display:flex; gap:clamp(10px,1.8vw,18px); align-items:flex-end; flex-wrap:wrap; padding:var(--s-5); }
.cov{ position:relative; width:clamp(80px,10vw,136px); aspect-ratio:.8; font-size:9px; line-height:1.25; box-shadow:6px 6px 0 var(--line); perspective:640px; view-timeline:--bk block; }
.cov .fc{ position:absolute; inset:0; z-index:1; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; padding:10px;
  background:var(--ink); color:var(--paper); transform-origin:0 50%; transition:transform .6s cubic-bezier(.3,0,.3,1); }
.cov b{ font-family:var(--f-display); font-weight:900; font-variation-settings:"wdth" 70; font-size:clamp(34px,4.4vw,62px); line-height:.9; }
.cov.c2 .fc{ background:var(--link); color:var(--on-link); }
.cov.c3 .fc{ background:var(--wash); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
/* dentro la copertina: la pagina con la griglia a punti e un disegno per edizione, un solo blu */
.cov .pg{ position:absolute; inset:0; overflow:hidden; background-color:var(--paper); background-image:radial-gradient(var(--dot) 1px,transparent 1.2px); background-size:8px 8px; box-shadow:inset 0 0 0 1px var(--line); }
.cov .pg svg{ display:block; width:100%; height:100%; overflow:visible; }
.pg .k-scr{ fill:var(--paper); stroke:var(--ink); stroke-width:1.5; }
.pg .k-ink{ fill:var(--ink); } .pg .k-mut{ fill:var(--line2); } .pg .k-blu{ fill:#2B2BEA; }
.pg .k-lin{ fill:none; stroke:#2B2BEA; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; }
.pg .k-cur{ fill:var(--ink); stroke:var(--paper); stroke-width:1.2; stroke-linejoin:round; }
.pg .k-pop{ transform-box:fill-box; transform-origin:50% 50%; }
@keyframes bk-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes bk-pop{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes bk-in{ from{ transform:translateY(var(--dy)); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes bk-cur{ from{ transform:translate(-20px,22px); } to{ transform:none; } }
@keyframes bk-open{ 0%,100%{ transform:none; } 28%,72%{ transform:rotateY(-72deg); } }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cov:hover .fc{ transform:rotateY(-72deg); }
  .cov:hover .k-lin{ animation:bk-draw .5s ease-out .3s both; }
  .cov:hover .k-pop{ animation:bk-pop .45s cubic-bezier(.3,1.8,.5,1) .75s both; }
  .cov:hover .k-in{ animation:bk-in .45s cubic-bezier(.3,1.5,.5,1) .3s both; }
  .cov:hover .k-in.k-d2{ animation-delay:.48s; }
  .cov:hover .k-cur{ animation:bk-cur .7s cubic-bezier(.5,0,.3,1) .25s both; }
}
/* touch: la copertina si apre mentre passa a metà schermo e si richiude dopo */
@supports (animation-timeline:view()){
  @media (hover:none) and (prefers-reduced-motion:no-preference){
    .cov .fc{ transition:none; animation:bk-open linear both; animation-timeline:--bk; animation-range:cover 18% cover 86%; }
    .cov .k-lin{ animation:bk-draw linear both; animation-timeline:--bk; animation-range:cover 34% cover 44%; }
    .cov .k-pop{ animation:bk-pop linear both; animation-timeline:--bk; animation-range:cover 42% cover 48%; }
    .cov .k-in{ animation:bk-in linear both; animation-timeline:--bk; animation-range:cover 34% cover 41%; }
    .cov .k-in.k-d2{ animation-range:cover 38% cover 45%; }
    .cov .k-cur{ animation:bk-cur linear both; animation-timeline:--bk; animation-range:cover 32% cover 44%; }
    .cov.c2 .fc{ animation-range:cover 21% cover 89%; }
    .cov.c3 .fc{ animation-range:cover 24% cover 92%; }
  }
}
.year{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.04em; }

.about{ display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:clamp(36px,6vw,104px); align-items:center; }
.pic{ position:relative; display:block; width:100%; max-width:360px; aspect-ratio:1; margin:0; padding:0; border:0; background:var(--wash); color:inherit; cursor:pointer; font:inherit; }
.pic img,.pic .av{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pic img{ object-fit:cover; }
.pic .av{ box-sizing:border-box; padding:15%; background:var(--wash); color:var(--ink); opacity:0; transition:opacity .35s ease; }
.pic .av svg{ width:100%; height:100%; display:block; overflow:visible; }
@media (hover:hover){ .pic:hover .av{ opacity:1; } }
.pic.show-av .av{ opacity:1; }
.pic:focus-visible{ outline-offset:6px; }
.about p{ max-width:52ch; margin:0 0 1em; }

.foot{ padding-block:clamp(80px,12vw,160px) 28px; border-top:1px solid var(--line); }
.door-row{ display:flex; align-items:flex-end; gap:clamp(18px,3vw,40px); flex-wrap:wrap; margin-bottom:clamp(56px,8vw,96px); }
.door-line{ font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 78; font-size:clamp(34px,6vw,94px); line-height:.98; margin:0; max-width:16ch; text-wrap:balance; }
.door-line{ display:grid; }
.door-line > span{ grid-area:1/1; align-self:end; }
.door-line .dl-b, .door-line.shut .dl-a{ visibility:hidden; }
.door-line.shut .dl-b{ visibility:visible; }
/* la porta: socchiusa, con la luce accesa dentro. Si chiude con un clic */
.door{ position:relative; flex:none; width:clamp(64px,6.6vw,92px); aspect-ratio:.62; box-sizing:border-box; margin:0; padding:0; border:2px solid var(--ink); border-bottom:0; background:none; color:inherit; perspective:320px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.door:focus-visible{ outline-offset:6px; }
.door-light{ position:absolute; inset:3px 3px 0; background:#FFC53D; box-shadow:0 0 22px 2px rgba(255,197,61,.45); transition:opacity .35s ease .25s, box-shadow .35s ease .25s; }
.door i{ position:absolute; inset:3px 3px 0; background:var(--link); transform-origin:left center; transform:rotateY(-58deg); transition:transform 1.1s cubic-bezier(.2,.8,.2,1); }
.door i::after{ content:""; position:absolute; right:14%; top:52%; width:12%; aspect-ratio:1; border-radius:50%; background:var(--paper); }
@media (hover:hover){ .door:not(.shut):hover i{ transform:rotateY(-46deg); transition-duration:.6s; } }
.door.shut i{ transform:rotateY(0deg); transition:transform .42s cubic-bezier(.6,0,.95,.45); }
.door.shut .door-light{ opacity:0; box-shadow:none; }
.door.thud{ animation:thud .38s ease-out; }
.door.creak i{ animation:creak 1.6s ease-in-out; }
@keyframes thud{ 0%{ transform:none; } 25%{ transform:translateX(-2px) rotate(-.8deg); } 50%{ transform:translateX(2px) rotate(.6deg); } 75%{ transform:translateX(-1px); } 100%{ transform:none; } }
@keyframes creak{ 0%,100%{ transform:rotateY(-58deg); } 35%{ transform:rotateY(-68deg); } 70%{ transform:rotateY(-52deg); } }
.foot-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px clamp(24px,4vw,64px); padding-block:28px 40px; border-top:1px solid var(--ink); }
.foot-k{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s-3); }
.foot-k2{ margin-top:28px; }
.foot-links{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.foot-links a,.mail a{ color:var(--ink); font-weight:600; text-decoration:none; display:inline-flex; align-items:center; min-height:var(--tap); padding:0; }
.foot-links a:hover,.mail a:hover{ color:var(--link); text-decoration:underline; text-underline-offset:4px; }
.mail{ display:flex; align-items:center; gap:var(--s-2) var(--s-3); flex-wrap:wrap; margin:0; }
.mail a{ font-family:var(--f-mono); font-weight:500; font-size:var(--fs-note); overflow-wrap:anywhere; }
.mail button{ font:600 var(--fs-note) var(--f-body); color:var(--ink); background:none; border:1px solid var(--line); padding:6px 12px; min-height:var(--tap); cursor:pointer; }
.foot-legal{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); align-items:center; justify-content:space-between; padding-top:var(--s-4); border-top:1px solid var(--line); font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.linkish{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; background:none; border:0; margin:0; padding:6px 0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.linkish:hover{ color:var(--ink); }
.foot-legal .linkish{ padding:0; min-height:var(--tap); }
.foot-legal a.linkish{ display:inline-flex; align-items:center; }
.nl-small .linkish{ padding:2px 0; font-weight:600; }
.nl-small .linkish:hover{ color:inherit; text-decoration-thickness:2px; }
.pv-body{ max-width:60ch; }
.pv-body h3{ font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 96; font-size:var(--fs-title-s); line-height:1.2; margin:26px 0 6px; }
.pv-body p{ margin:0 0 10px; }
.pv-body .pv-date{ margin-top:22px; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

@media (max-width:760px){
  .books,.about{ grid-template-columns:minmax(0,1fr); }
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
  /* telefono: i libri al centro della cornice, la newsletter con più aria */
  .covers{ justify-content:center; }
  .nl{ padding:32px 20px; gap:14px; }
  .nl input,.nl button[type="submit"]{ flex:1 1 100%; }
  .nl-note{ margin-top:10px; line-height:1.4; }
  .nl-small{ margin-top:var(--s-2); line-height:1.55; }
}
@media (prefers-reduced-motion: reduce){
  .old-mq span,.ch-caret,.hint i,.pu-fl,.plat-rays,.tro-btn.plat{ animation:none; }
  .old-mq span{ padding-left:0; }
  .frame,.pic .av,.door i,.door-light{ transition:none !important; }
  .door.thud,.door.creak i{ animation:none; }
}
/* anim:inizio, scritto da componenti/aggiorna_home.py */
:root{--f-display:"Anybody","Arial Narrow",system-ui,sans-serif;--f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;--f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
:root{--max:1120px;--gutter:clamp(16px,4vw,56px);--top-h:58px;--measure:64ch;--measure-lead:42ch;--tap:44px;--s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;--s-10:128px;--r-ui:0;--r-pill:999px;--r-tile:20%;--r-window:18px;--shadow-hard:6px 6px 0 var(--brand);--shadow-dialog:10px 10px 0 var(--brand);--t-fast:.2s;--t-fade:.35s;--t-move:.5s;--ease:cubic-bezier(.2,.8,.2,1);--fs-label:12px;--fs-note:14px;--fs-ui:16px;--fs-text:18px;--fs-title-s:20px;--fs-card:26px;--z-bar:50;--z-toast:80;--z-game:94;--z-skip:120}
:root,.palco{color-scheme:dark;--paper:#0F1015;--wash:#1B1D25;--wash2:#23252F;--line:#2C2F39;--line2:#4A4E5C;--muted:#A0A4B0;--ink:#ECEDF2;--link:#8F8FFF;--on-link:#0F1015;--brand:#2B2BEA;--on-brand:#FFFFFF;--yellow:#FFC53D;--lilac:#8F8FFF;--coral:#FF7A66;--green:#2DD4A7;--pink:#FF6EB4;--on-yellow:#15161B;--dot:#22242C}
/* Disegni delle schede (DESIGN.md, Illustrazioni). Il riquadro prende .palco .dotgrid: scuro in ogni tema, puntini ogni 12 px.
   SVG con viewBox 240×140; i colori arrivano solo da queste classi, mai scritti nel disegno. */
.dotgrid{background-color:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:12px 12px}
.f-blue{fill:var(--brand)} .f-white{fill:#fff;color:#fff} .f-ink{fill:var(--ink)} .f-dim{fill:var(--muted)} .f-muted{fill:var(--line2)}
.f-line{fill:var(--line)} .f-wash{fill:var(--wash)} .f-wash2{fill:var(--wash2)} .f-paper{fill:var(--paper)}
.f-yellow{fill:var(--yellow)} .f-lilac{fill:var(--lilac)} .f-coral{fill:var(--coral)} .f-green{fill:var(--green)} .f-pink{fill:var(--pink)}
.s-line{stroke:var(--line2);stroke-width:1} .s-paper{stroke:var(--paper);stroke-width:1.5;stroke-linejoin:round}
.s-dash{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 4} .s-guide{fill:none;stroke:var(--pink);stroke-width:1.5;stroke-dasharray:3 4}
.s-blue{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round} .s-handle{stroke:var(--muted);stroke-width:1}
.t-lab{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em} .t-chip{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.04em}
.t-glyph{font-family:var(--f-display);font-weight:800}

/* Preferenze di accessibilità del sistema (DESIGN.md, regola 1 e Tema): cambiano il sito solo per chi le ha attivate.
   «Aumenta contrasto» (macOS, iOS, Windows): testo secondario più chiaro e bordi da 3:1, gli stessi valori di brand/tokens.css.
   Contrasto elevato di Windows (forced-colors): i colori li sceglie il sistema e le ombre spariscono. I disegni sul palco
   restano com'erano; bottoni, campi, tag e dialog prendono un bordo; il focus usa Highlight; le icone il colore del testo.
   Sta dentro il blocco che aggiorna_home.py copia nel foglio della home, così vale anche lì; gli !important battono i fogli
   delle pagine, che arrivano dopo, ma solo con il contrasto elevato attivo. */
@media (prefers-contrast:more){:root,.palco{--muted:#C4C7D0}:root{--line:#6B7080}}
@media (forced-colors:active){
  .palco{forced-color-adjust:none}
  svg:not(.palco svg){color:inherit !important}
  :is(.btn,.sp-btn,.tag,.chip,input,select,textarea,dialog):not(.palco *){border:1.5px solid CanvasText !important}
  :is(.btn,.sp-btn):not(.palco *){border-color:ButtonText !important}
  :focus-visible{outline:2px solid Highlight !important}
  .mn-btn i,.mn-btn i::before,.door i{forced-color-adjust:none;background:ButtonText !important}
  .door i::after{background:ButtonFace !important}
  .door-light{forced-color-adjust:none;background:Highlight !important;box-shadow:none !important}
}

/* Menu della barra (DESIGN.md, Componenti), ultimo a destra su ogni pagina: Gratis per te, Lingua.
   Bottone vuoto quadrato (bordo --line, poi --ink), pannello squadrato come i dialog con l'ombra dura 6 px in --brand.
   Sta qui, dentro il blocco che aggiorna_home.py copia nel foglio della home: --brand ha il valore di riserva perché la home non lo definisce. */
.mn{position:relative;flex:none}
.mn-btn{position:relative;width:32px;height:32px;box-sizing:border-box;margin:0;padding:0;display:grid;place-items:center;background:none;border:1.5px solid var(--line);border-radius:var(--r-ui);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mn-btn::after{content:"";position:absolute;inset:-7px}
.mn-btn:hover,.mn-btn[aria-expanded="true"]{border-color:var(--ink)}
.mn-btn i,.mn-btn i::before{display:block;width:12px;height:1.5px;background:currentColor}
.mn-btn i{position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.mn-btn i::before{content:"";position:absolute;inset:0;transform:rotate(90deg)}
.mn-btn[aria-expanded="true"] i{transform:rotate(45deg)}
.mn-panel{position:absolute;right:0;top:calc(100% + 14px);z-index:1;width:min(280px,calc(100vw - 32px));box-sizing:border-box;padding:18px 20px 4px;background:var(--wash);color:var(--ink);outline:1px solid var(--line);box-shadow:var(--shadow-hard);font-family:var(--f-body);font-size:var(--fs-ui);line-height:1.5;text-align:left}
.mn-panel[hidden]{display:none}
.mn-k{margin:0;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mn-links{list-style:none;margin:6px 0 10px;padding:0}
.mn-links a{display:flex;align-items:center;min-height:var(--tap);color:var(--ink);font-weight:600;text-decoration:none}
.mn-links a:hover{color:var(--link);text-decoration:underline;text-underline-offset:4px}
/* Lingua: una riga alta 52 px, scelte in mono, quella attiva in --ink e sottolineata */
.mn-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:52px;box-sizing:border-box;border-top:1px solid var(--line)}
.mn .lang{display:flex;align-items:center;gap:2px;min-height:var(--tap);font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--muted)}
.mn .lang :is(a,button){font:inherit;letter-spacing:inherit;color:var(--muted);background:none;border:0;margin:0;padding:0 var(--s-1);min-width:var(--tap);min-height:var(--tap);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.mn .lang :is(a,button)::after{content:none}
.mn .lang :is(a,button):hover{color:var(--ink)}
.mn .lang :is(a[aria-current="page"],button[aria-pressed="true"]){color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:default}
.mn :focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mn-btn i{transition:none}}

/* Schede animate: le stesse regole delle otto card del design system (DESIGN.md, Movimento).
   Il contenitore ha la classe .anim, ogni figlio è una scheda con il disegno (.thumb) e il testo (.body).
   Il disegno si muove al passaggio del mouse, al focus da tastiera o, su touch, quando la scheda arriva a metà schermo
   (classe .on da componenti.js; la lista prende .has-on). Su touch le altre schede si attenuano: disegno a .4, testo a .8. */
.anim svg *{transform-box:fill-box;transform-origin:center}
.anim :is(.a-grow,.a-shrink,.a-dim,.a-tilt,.a-big,.a-back,.a-away,.a-press,.a-fill){transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.anim .a-big{transform-origin:left bottom}
.anim .a-fill{transform-origin:left center}
@media (hover:none){.anim>* .thumb,.anim>* .body{transition:opacity .35s} .anim.has-on>:not(.on) .thumb{opacity:.4} .anim.has-on>:not(.on) .body{opacity:.8}}
.anim>:is(:hover,:focus-visible,.on) .a-grow{transform:scale(1.18)}
.anim>:is(:hover,:focus-visible,.on) .a-shrink{transform:scale(.45);opacity:.35}
.anim>:is(:hover,:focus-visible,.on) .a-dim{opacity:.45}
.anim>:is(:hover,:focus-visible,.on) .a-pulse{animation:ds-pulse 1.2s ease-in-out infinite}
.anim>:is(:hover,:focus-visible,.on) .a-tilt{transform:rotate(-7deg) scale(1.06)}
.anim>:is(:hover,:focus-visible,.on) .a-hop{animation:ds-hop .6s cubic-bezier(.3,0,.3,1) .1s}
.anim>:is(:hover,:focus-visible,.on) .a-big{transform:scale(1.12)}
.anim>:is(:hover,:focus-visible,.on) .a-back{transform:translateX(8px);opacity:.55}
.anim>:is(:hover,:focus-visible,.on) .a-nod{animation:ds-nod .9s ease-in-out}
.anim>:is(:hover,:focus-visible,.on) .a-away{transform:translateX(-14px) scale(.85);opacity:.25}
.anim>:is(:hover,:focus-visible,.on) .a-ants{animation:ds-ants .9s linear infinite}
.anim>:is(:hover,:focus-visible,.on) .a-press{transform:scale(.86)}
.anim>:is(:hover,:focus-visible,.on) .a-settle{animation:ds-settle .8s cubic-bezier(.3,1.6,.5,1)}
.anim>:is(:hover,:focus-visible,.on) .a-pop{animation:ds-pop .5s cubic-bezier(.3,1.8,.5,1) .55s backwards}
.anim>:is(:hover,:focus-visible,.on) .a-fill{transform:scaleX(1.72)}
.anim>:is(:hover,:focus-visible,.on) .a-late{animation-delay:.7s}
.anim>:is(:hover,:focus-visible,.on) .a-d1{animation-delay:.08s}
.anim>:is(:hover,:focus-visible,.on) .a-d2{animation-delay:.16s}
.anim>:is(:hover,:focus-visible,.on) .a-d3{animation-delay:.24s}
.anim>:is(:hover,:focus-visible,.on) .a-d4{animation-delay:.32s}
@keyframes ds-pulse{50%{transform:scale(1.35)}}
@keyframes ds-hop{40%{transform:translateY(-6px)}}
@keyframes ds-nod{25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
@keyframes ds-ants{to{stroke-dashoffset:-8}}
@keyframes ds-settle{0%{transform:translateY(-14px)}}
@keyframes ds-pop{from{transform:scale(0)}}
@media (prefers-reduced-motion:reduce){.anim *{animation:none !important;transition:none !important}}
/* anim:fine */