/* Componenti condivisi delle sottopagine: barra in alto, footer, dialog della privacy.
   Gli stessi valori della home (assets/build/site.*.css: .top, .foot, dialog.tro). Non si ridefiniscono altrove. */
/* Tema: solo scuro, su ogni pagina e nella home (Fabio, 22 ottobre 2026: niente più chiaro, niente selettore).
   Gli stessi valori di brand/tokens.css. Le pagine non ridefiniscono questi colori.
   .palco: un riquadro scuro con i colori del tema (demo del Lab, slide social, illustrazioni delle regole). */
/* font del sito (tokens.css): una pagina li riceve da qui, i file si dichiarano con @font-face nella sua build */
: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}
/* misure, spazi, raggi, ombre e tempi: copiati da brand/tokens.css (componenti.py controlla che restino uguali) */
: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}
.palco{color:var(--ink)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skiplink{position:absolute;left:-999px;top:8px;z-index:var(--z-skip);background:var(--ink);color:var(--paper);padding:10px 14px}
.skiplink:focus{left:8px}

.sitebar{box-sizing:border-box;min-height:calc(env(safe-area-inset-top,0px) + 57.6875px);position:sticky;top: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)}
.sitebar .brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:28px;position:relative}
/* aree da 44 px senza alzare la barra: la zona cliccabile si allunga sopra e sotto */
.sitebar .brand::after{content:"";position:absolute;inset:-8px 0}
.sitebar .brand-logo{width:26px;height:28px;flex:none;overflow:visible;color:var(--ink)}
.sitebar .brand-name svg{display:block;width:auto;height:auto}
/* percorso a briciole dopo il nome: stesso mono del selettore di lingua; i passaggi sono link, l'ultima voce è la pagina */
.sitebar .path{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.sitebar .crumbs{min-width:0}
.sitebar .crumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:10px;min-width:0}
.sitebar .crumbs li{display:flex;align-items:center;gap:10px;min-width:0}
/* le voci prima dell'ultima non si stringono: se manca spazio si accorcia solo la pagina corrente, coi puntini */
.sitebar .crumbs li:not(:last-child){flex:none}
/* su telefono restano la prima voce e la pagina corrente: quelle in mezzo (es. Exploded UI in una scheda) lasciano spazio */
@media (max-width:480px){.sitebar .crumbs li:not(:first-child):not(:last-child){display:none}}
.sitebar .sep{font-family:var(--f-mono);font-size:var(--fs-note);color:var(--muted)}
.sitebar .sect{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;min-height:28px;display:inline-flex;align-items:center;padding:var(--s-1) 0;white-space:nowrap}
.sitebar a.sect:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.sitebar .sect[aria-current="page"]{color:var(--ink);display:block;line-height:20px;overflow:hidden;text-overflow:ellipsis}
/* targhetta accanto alla voce (Beta): pillola come i tag delle schede, ma col colore del testo */
.sitebar .crumbs .chip{flex:none;font-family:var(--f-mono);font-size:var(--fs-label);line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1px solid var(--muted);padding:var(--s-1) var(--s-2);border-radius:var(--r-pill)}
@media (max-width:420px){.sitebar .crumbs li:has(.chip){gap:6px}.sitebar .crumbs .chip{padding:3px 6px;letter-spacing:.04em}}
.sitebar :focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (max-width:560px){.sitebar .brand-name{display:none}}

.sitefoot{padding:clamp(56px,8vw,96px) 0 28px;border-top:1px solid var(--line);color:var(--ink);font-family:var(--f-body);font-size:var(--fs-ui);line-height:1.5}
.sitefoot .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* la porta in cima al footer: stessi valori della home (.door-row in site.*.css) */
.door-row{display:flex;align-items:flex-end;gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-bottom:clamp(56px,8vw,96px)}
.door-line{display:grid;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 > 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}
.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:var(--yellow);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)}}
@media (prefers-reduced-motion:reduce){.door i,.door-light{transition:none !important}.door.thud,.door.creak i{animation:none}}
.sitefoot .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)}
.sitefoot .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)}
.sitefoot .foot-k2{margin-top:28px}
.sitefoot .foot-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sitefoot .foot-links a,.sitefoot .mail a{color:var(--ink);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0}
.sitefoot .foot-links a:hover,.sitefoot .mail a:hover{color:var(--link);text-decoration:underline;text-underline-offset:4px}
.sitefoot .mail{display:flex;align-items:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;margin:0}
.sitefoot .mail a{font-family:var(--f-mono);font-weight:500;font-size:var(--fs-note);overflow-wrap:anywhere}
.sitefoot .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}
.sitefoot .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)}
.sitefoot .linkish{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;margin:0;padding:0;min-height:var(--tap);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sitefoot a.linkish{display:inline-flex;align-items:center}
.sitefoot :focus-visible{outline:2px solid var(--link);outline-offset:2px}
@media (max-width:760px){.sitefoot .foot-grid{grid-template-columns:minmax(0,1fr);gap:28px}}

.sitedlg{border:0;padding:0;width:min(620px,calc(100vw - 32px));max-height:min(84svh,760px);background:var(--wash);color:var(--ink);outline:1px solid var(--line);box-shadow:var(--shadow-dialog);overscroll-behavior:contain;font-family:var(--f-body);font-size:var(--fs-ui);line-height:1.5}
.sitedlg::backdrop{background:rgba(0,0,0,.72)}
.sitedlg-in{position:relative;padding:clamp(22px,4vw,36px)}
.sitedlg 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}
.sitedlg-x{position:sticky;top:12px;float:right;z-index:1;width:44px;min-height:var(--tap);margin:-8px -8px 0 12px;padding:0;background:var(--paper);border:1.5px solid var(--line);color:var(--ink);font-size:var(--fs-title-s);line-height:1;cursor:pointer}
.sitedlg .pv-body{max-width:60ch}
.sitedlg .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}
.sitedlg .pv-body p{margin:0 0 10px}
.sitedlg .pv-body a{color:var(--link)}
.sitedlg .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)}

/* 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}}

/* fabiostaiano.it/lab · stessi token del design system. Colori del tema, .palco, .dotgrid, classi dei disegni (f-* s-* t-*)
   e schede animate (.anim, a-*) arrivano da componenti.css, incluso nella build: qui non si ridefiniscono.
   Interfaccia squadrata (raggio 0): arrotondati solo tessere, chip e i bottoni disegnati dall'AI nella demo. */
/* Font: l'unica dichiarazione del Lab (componenti.css non ne ha). */
@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');}
@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');}
@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');}

: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;
  --gutter:clamp(16px,4vw,56px);
  --max:1120px; --tap:44px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--paper); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:var(--fs-text); line-height:1.5; overflow-x:hidden; }
a{ color:var(--link); text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }

.label{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.tag{ display:inline-block; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:var(--r-pill); }

/* stesso contenitore di Tools: 1120 px, margine var(--gutter) */
main{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

/* bottoni come nel design system: squadrati, Instrument Sans 600 16 px, 14×24 */
.btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); min-height:var(--tap); padding:14px 24px; font:600 var(--fs-ui)/1.25 var(--f-body); color:var(--paper); background:var(--ink); border:1.5px solid var(--ink); border-radius:var(--r-ui); cursor:pointer; text-decoration:none; }
.btn:hover{ opacity:.86; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--muted); }
.btn.ghost:hover{ border-color:var(--ink); }
.btn:disabled{ opacity:.5; cursor:default; }

/* indice */
.hero{ padding:clamp(48px,10vw,120px) 0 clamp(32px,6vw,64px); }
.hero h1{ margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 140; font-size:clamp(72px,18vw,220px); line-height:.86; letter-spacing:-.03em; }
.hero p{ max-width:36rem; margin:var(--s-5) 0 0; font-size:clamp(18px,2.2vw,22px); color:var(--muted); }
.hero p strong{ color:var(--ink); font-weight:600; }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:20px; padding-bottom:var(--s-8); }
.card{ display:flex; flex-direction:column; background:var(--wash); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:border-color .2s; }
.card:hover{ border-color:var(--muted); }
/* disegno della scheda: palco scuro con i puntini (.palco .dotgrid), 12:7, numero mono in alto a sinistra */
.card .thumb{ position:relative; aspect-ratio:12/7; border-bottom:1px solid var(--line); overflow:hidden; }
.card .thumb svg{ position:absolute; inset:0; width:100%; height:100%; }
.card .thumb i{ position:absolute; left:12px; top:10px; font-style:normal; font-family:var(--f-mono); font-size:var(--fs-label); color:var(--muted); }
.card .thumb use.f-paper{ color:var(--paper); }
.card .body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:var(--s-2); }
.card .num{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--muted); }
.card h2{ margin:0; font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 112; font-size:var(--fs-card); line-height:1.1; }
.card p{ margin:0; color:var(--muted); font-size:var(--fs-ui); }
.card .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* pagina esperimento */
.exp-head{ padding:clamp(40px,8vw,96px) 0 28px; max-width:46rem; }
.exp-head .num{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--muted); }
.exp-head h1{ margin:10px 0 0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 125; font-size:clamp(44px,8vw,96px); line-height:.95; letter-spacing:-.02em; }
.exp-head p{ margin:20px 0 0; font-size:clamp(18px,2.2vw,22px); color:var(--muted); }
.exp-head .tags{ display:flex; gap:6px; margin-top:18px; flex-wrap:wrap; }

.demo{ background:var(--wash); border:1px solid var(--line); padding:clamp(16px,3vw,32px); margin:var(--s-2) 0 var(--s-7); }
.demo-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); flex-wrap:wrap; margin-bottom:20px; }

.notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:28px; padding:8px 0 56px; border-top:1px solid var(--line); }
.notes section{ padding-top:var(--s-5); }
.notes h2{ margin:0 0 var(--s-2); font-family:var(--f-mono); font-weight:500; font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.notes p{ margin:0; }

pre{ margin:0 0 56px; padding:20px; background:var(--wash); border:1px solid var(--line); overflow-x:auto; font-family:var(--f-mono); font-size:var(--fs-label); line-height:1.7; color:var(--ink); }
pre .c{ color:var(--muted); }

.pager{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-2) var(--s-4); padding:var(--s-5) 0 var(--s-8); border-top:1px solid var(--line); font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; }
.pager a{ display:inline-flex; align-items:center; min-height:var(--tap); text-decoration:none; }
.pager a:hover{ text-decoration:underline; text-underline-offset:4px; }

/* tessere con un colore delle parti visive (verde, corallo, giallo): prendono anche .palco, così var(--paper) è sempre il nero del palco */

/* 01 · dieci varianti */
.prompt{ display:flex; gap:var(--s-3); align-items:flex-start; background:var(--paper); border:1px solid var(--line); padding:14px 16px; margin-bottom:20px; font-size:var(--fs-ui); }
.prompt b{ font-family:var(--f-mono); font-weight:500; font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:3px; white-space:nowrap; }
.variants{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); gap:var(--s-3); }
.variant{ position:relative; display:flex; align-items:center; justify-content:center; min-height:120px; padding:16px 10px 34px; font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r-ui); cursor:pointer; }
.variant:hover{ border-color:var(--muted); }
.variant[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
/* il bottone disegnato dall'AI: è materiale mostrato, tiene i suoi colori e i suoi angoli */
.variant .fake{ display:inline-flex; align-items:center; justify-content:center; padding:0 18px; border-radius:10px; font-weight:600; font-size:15px; line-height:1.1; pointer-events:none; text-align:center; transition:opacity .35s; }
.variant .n{ position:absolute; left:10px; bottom:8px; font-family:var(--f-mono); font-size:var(--fs-label); color:var(--muted); }
/* esito: testo grigio, il colore sta solo nel segno accanto */
.variant .v{ position:absolute; right:10px; bottom:8px; display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
.variant .v:empty{ display:none; }
.variant .v::before{ content:""; width:8px; height:8px; background:var(--green); }
.variant.ko .v{ color:var(--muted); }
.variant.ko .v::before{ background:var(--coral); }
.variant.ko .fake{ opacity:.4; }
.verdict{ margin-top:20px; display:grid; gap:10px; }
.verdict:empty{ display:none; }
.check{ display:grid; grid-template-columns:28px 1fr; gap:10px; align-items:start; padding:12px 14px; background:var(--paper); border:1px solid var(--line); font-size:var(--fs-ui); }
.check .dot{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-note); font-weight:700; color:var(--paper); }
.check.ok .dot{ background:var(--green); } .check.ko .dot{ background:var(--coral); }
.check small{ display:block; color:var(--muted); font-size:var(--fs-note); }
.summary{ margin:20px 0 0; font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 112; font-size:clamp(24px,3.4vw,34px); line-height:1.15; }
.summary span{ color:var(--muted); }

/* 02 · video fatto di codice: la scena è un palco (.palco .dotgrid, puntini ogni 12 px) */
.film{ display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:28px; align-items:center; }
@media (max-width:760px){ .film{ grid-template-columns:1fr; } }
.scene{ position:relative; aspect-ratio:4/5; border:1px solid var(--line); overflow:hidden; container-type:inline-size; }
.scene .hello{ position:absolute; left:8%; top:12%; right:8%; margin:0; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 120; font-size:11cqw; line-height:1; min-height:1em; }
.scene .caret{ display:inline-block; width:.08em; height:.9em; background:var(--ink); vertical-align:-.08em; margin-left:.04em; }
.scene .cards{ position:absolute; left:8%; right:8%; top:34%; display:grid; gap:3cqw; }
/* le tre schede della scena sono tessere: possono essere arrotondate */
.scene .role{ display:flex; align-items:center; gap:3cqw; padding:3.4cqw 4cqw; border-radius:3cqw; font-weight:700; font-size:5.2cqw; color:var(--paper); }
.scene .role i{ width:4cqw; height:4cqw; border-radius:50%; background:currentColor; opacity:.25; flex:none; }
.scene .r1{ background:var(--lilac); } .scene .r2{ background:var(--yellow); } .scene .r3{ background:var(--coral); }
.scene .cursor{ position:absolute; width:7cqw; height:7cqw; left:0; top:0; overflow:visible; }
/* il toast del trofeo, come sul sito: squadrato, fondo --ink, ombra dura blu */
.scene .toast{ position:absolute; left:50%; bottom:7%; display:flex; align-items:center; gap:2.6cqw; padding:1.8cqw 4cqw 1.8cqw 1.8cqw; background:var(--ink); color:var(--paper); box-shadow:1.4cqw 1.4cqw 0 var(--brand); font-weight:700; font-size:4cqw; white-space:nowrap; }
.scene .toast .ico{ width:7cqw; height:7cqw; display:grid; place-items:center; background:var(--yellow); color:var(--paper); }
.scene .toast svg{ width:4.4cqw; height:4.4cqw; }
.controls{ display:grid; gap:14px; justify-items:start; }
.controls input[type=range]{ width:100%; accent-color:var(--ink); min-height:var(--tap); margin:0; }
.controls p{ margin:0; }
.readout{ display:flex; gap:8px 20px; flex-wrap:wrap; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.readout b{ color:var(--ink); font-weight:500; }

/* 03 · trofei nascosti */
.mini{ background:var(--paper); border:1px solid var(--line); }
.mini-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-1) var(--s-4); border-bottom:1px solid var(--line); }
.mini-logo{ appearance:none; background:none; border:0; padding:0 var(--s-2); margin:0 -8px; min-height:var(--tap); color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:var(--s-2); font-family:var(--f-display); font-weight:700; font-size:var(--fs-ui); text-align:left; }
.mini-logo svg{ width:22px; height:24px; flex:none; }
.mini-count{ display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:var(--fs-label); color:var(--muted); white-space:nowrap; }
.mini-count svg{ width:16px; height:16px; }
.mini-body{ padding:clamp(20px,4vw,36px) 16px; }
.mini-body .mini-h{ margin:0 0 10px; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 120; font-size:clamp(28px,4vw,40px); line-height:1; color:var(--ink); max-width:none; }
.mini-body p{ margin:0; color:var(--muted); max-width:34rem; }
.board{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--s-3); margin-top:20px; }
.tro{ display:grid; grid-template-columns:44px 1fr; gap:var(--s-3); align-items:center; padding:var(--s-3); background:var(--paper); border:1px solid var(--line); }
/* il trofeo è una tessera (angoli al 20%): vuota e tratteggiata, gialla con la coppa scura quando si sblocca */
.tro .ic{ width:44px; height:44px; border-radius:var(--r-tile); border:1.5px dashed var(--line2); display:grid; place-items:center; color:var(--muted); font-family:var(--f-mono); }
.tro .ic svg{ width:22px; height:22px; }
.tro.on .ic{ border:0; background:var(--yellow); color:var(--paper); }
.tro b{ display:block; font-size:var(--fs-ui); }
.tro small{ display:block; color:var(--muted); font-size:var(--fs-note); }
.tro .hint{ appearance:none; background:none; border:0; padding:0; font:inherit; font-size:var(--fs-note); color:var(--link); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:var(--tap); display:inline-flex; align-items:center; }
/* toast del trofeo, come sul sito: fondo --ink, ombra dura 6 px blu, coppa a sinistra ed etichetta mono sopra il titolo */
.toasts{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; display:grid; gap:14px; width:max-content; max-width:calc(100vw - 40px); pointer-events:none; }
.toast-tro{ display:flex; align-items:center; gap:var(--s-3); padding:10px 16px 10px 10px; background:var(--ink); color:var(--paper); box-shadow:var(--shadow-hard); animation:pop .3s ease-out; }
.toast-tro .ico{ width:36px; height:36px; flex:none; display:grid; place-items:center; background:var(--yellow); color:var(--paper); }
.toast-tro .ico svg{ width:20px; height:20px; }
.toast-tro small{ display:block; font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.toast-tro b{ display:block; font-size:var(--fs-ui); line-height:1.3; }
@keyframes pop{ from{ transform:translateY(12px); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .toast-tro{ animation:none; } .card,.variant .fake{ transition:none; } }

.lab-note{ margin:0; padding:8px 0 56px; color:var(--muted); font-size:var(--fs-ui); }