/* 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/tools · stessi token del design system, un tema solo, scuro (colori in componenti.css), interfaccia squadrata */
@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);
  --top-h:60px; --tap:44px; --max:1120px;
  --shadow-hard:6px 6px 0 var(--brand);
  --panel:380px;
}
*,*::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; }
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; }
[hidden]{ display:none !important; }
.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); }

.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 var(--f-body); color:var(--paper); background:var(--ink); border:0; border-radius:var(--r-ui); cursor:pointer; text-decoration:none; }
.btn:hover{ opacity:.86; }
.btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--muted); }
.btn.ghost:hover{ border-color:var(--ink); }
.btn.small{ min-height:var(--tap); padding:8px 14px; font-size:var(--fs-note); }

/* indice */
.page{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.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 sul palco (DESIGN.md, Illustrazioni): .palco .dotgrid da componenti.css, 12:7, numero mono in alto a sinistra */
.card .thumb{ position:relative; display:block; aspect-ratio:12/7; border-bottom:1px solid var(--line); overflow:hidden; }
.card .thumb i{ position:absolute; left:12px; top:10px; font-style:normal; font-family:var(--f-mono); font-size:var(--fs-label); line-height:1.2; color:var(--muted); }
.card .thumb svg{ position:absolute; inset:0; width:100%; height:100%; }
.card .body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:var(--s-2); }
.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; }
.card.soon{ border-style:dashed; background:transparent; }
.card.soon .thumb{ border-bottom-style:dashed; }
.card .go{ margin-top:10px; font-weight:600; font-size:var(--fs-ui); color:var(--ink); }
.card:hover .go{ text-decoration:underline; text-underline-offset:4px; }
.hero .label{ display:block; margin-bottom:var(--s-4); }
/* tre colonne di testo; i titoli hanno la misura dei titoli delle schede */
.cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px clamp(24px,4vw,56px); }
.cols section{ min-width:0; }
.cols h2{ margin:0 0 10px; font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 112; font-size:var(--fs-card); line-height:1.1; color:var(--ink); }
.cols p{ margin:0; color:var(--muted); }
@media (max-width:760px){ .cols{ grid-template-columns:minmax(0,1fr); } }
/* divisore fra le schede e i tre blocchi, come fra le sezioni del design system */
.why{ border-top:1px solid var(--line); padding-block:clamp(40px,6vw,64px) clamp(48px,7vw,80px); }
/* newsletter: l'unico blocco blu della pagina, come sulla home */
.nl{ display:grid; gap:14px; justify-items:start; padding:clamp(28px,5vw,56px); margin-bottom:clamp(48px,8vw,96px); background:var(--brand); color:var(--on-brand); }
.nl .label{ color:rgba(255,255,255,.8); }
.nl p{ margin:0; max-width:24ch; font-family:var(--f-display); font-weight:800; font-variation-settings:"wdth" 110; font-size:clamp(26px,4vw,44px); line-height:1.02; letter-spacing:-.01em; }
.btn.onblue{ background:#fff; color:var(--brand); }
.btn.onblue:hover{ background:#0F1015; color:#fff; opacity:1; }
.crumb{ color:var(--muted); text-decoration:none; }
.crumb:hover{ color:var(--ink); }


/* strumento: scena a sinistra, pannello a destra */
.app{ display:grid; grid-template-columns:minmax(0,1fr) var(--panel); height:calc(100vh - var(--top-h)); height:calc(100dvh - var(--top-h)); min-height:560px; border-bottom:1px solid var(--line); }
.viewport{ position:relative; overflow:hidden; background:var(--paper); touch-action:none; }
body[data-transparent="true"] .viewport{ background:repeating-conic-gradient(var(--wash) 0 25%, var(--paper) 0 50%) 0 0/20px 20px; }
#bg, #scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#scene{ cursor:grab; }
#scene.pick{ cursor:pointer; }
body.dragging .viewport{ outline:2px dashed var(--ink); outline-offset:-8px; }
#scene:active{ cursor:grabbing; }
#scene:focus-visible{ outline-offset:-3px; }
.passe{ position:absolute; pointer-events:none; box-shadow:0 0 0 100vmax rgba(5,5,8,.55); outline:1px dashed rgba(236,237,242,.35); }
#gizmo{ position:absolute; top:12px; right:12px; width:96px; height:96px; cursor:pointer; border-radius:50%; }
#gizmo:hover{ background:color-mix(in srgb,var(--ink) 8%,transparent); }
.views{ position:absolute; left:12px; bottom:12px; right:12px; display:flex; flex-wrap:wrap; gap:6px; pointer-events:none; }
.views button{ pointer-events:auto; appearance:none; min-height:var(--tap); padding:6px 12px; font:500 var(--fs-label)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); background:color-mix(in srgb,var(--paper) 80%,transparent); border:1px solid var(--line); border-radius:var(--r-ui); cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.views button:hover{ border-color:var(--muted); }
.views{ align-items:center; justify-content:space-between; }
.vbtns{ display:flex; flex-wrap:wrap; gap:6px; }
.hint{ margin:0; font:500 var(--fs-label)/1.5 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--paper); padding:var(--s-1) var(--s-2); pointer-events:none; }

.panel{ display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line); background:var(--paper); }
.opts{ flex:1; overflow-y:auto; overscroll-behavior:contain; }
/* gruppi a fisarmonica: se ne aprono quanti si vuole, all'inizio solo Schermata */
.grp{ border-bottom:1px solid var(--line); }
.grp summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); min-height:64px; padding:0 20px; cursor:pointer; list-style:none; }
.grp summary::-webkit-details-marker{ display:none; }
.grp summary::after{ content:"+"; font:400 22px/1 var(--f-mono); color:var(--muted); }
.grp[open] summary::after{ content:"–"; }
.grp summary:hover h2, .grp[open] summary h2{ color:var(--ink); }
.grp summary:focus-visible{ outline-offset:-2px; }
.grp h2{ display:flex; align-items:baseline; gap:10px; margin:0; font-family:var(--f-display); font-weight:700; font-variation-settings:"wdth" 112; font-size:var(--fs-card); line-height:1.1; color:var(--muted); }
.grp .sec{ display:grid; gap:18px; padding:0 20px 26px; }
.lbl{ font-size:var(--fs-note); line-height:1.3; color:var(--muted); }
.row{ display:grid; gap:var(--s-1); }
.row > .lbl{ display:flex; justify-content:space-between; align-items:baseline; }
.row output, .colorrow output{ font-family:var(--f-mono); font-size:var(--fs-label); color:var(--ink); }
.note{ margin:0; font-size:var(--fs-note); color:var(--muted); line-height:1.45; }

/* cursori squadrati */
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:28px; margin:0; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:2px; background:var(--line); }
input[type=range]::-moz-range-track{ height:2px; background:var(--line); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; margin-top:-7px; background:var(--ink); border:0; border-radius:var(--r-ui); }
input[type=range]::-moz-range-thumb{ width:16px; height:16px; background:var(--ink); border:0; border-radius:var(--r-ui); }
input[type=range]:focus-visible{ outline-offset:0; }

/* gruppi di scelta: radio vere, disegnate come bottoni */
.seg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); border:1px solid var(--line); }
.seg.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.seg.three label:nth-child(n+4){ box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line); }
.seg.three label:nth-child(4){ box-shadow:0 -1px 0 var(--line); }
.seg.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.seg.two label:nth-child(n+3){ box-shadow:-1px 0 0 var(--line), 0 -1px 0 var(--line); }
.seg.two label:nth-child(odd):nth-child(n+3){ box-shadow:0 -1px 0 var(--line); }
.seg label{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-1); min-height:var(--tap); padding:6px 4px; font-size:var(--fs-note); color:var(--muted); cursor:pointer; text-align:center; line-height:1.15; }
.seg label + label{ box-shadow:-1px 0 0 var(--line); }
.seg input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg label:has(input:checked){ background:var(--ink); color:var(--paper); }
.seg label:has(input:focus-visible){ outline:2px solid var(--link); outline-offset:-2px; }
.seg svg{ width:30px; height:22px; }
.seg small{ font:500 var(--fs-label)/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.seg label:has(input:checked) small{ color:inherit; }
.fs{ border:0; margin:0; padding:0; min-width:0; display:grid; gap:6px; }
.fs legend{ padding:0; margin-bottom:var(--s-2); }

.swatches{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center; }
.swatches label{ position:relative; width:var(--tap); height:var(--tap); display:grid; place-items:center; cursor:pointer; }
.swatches label i{ width:28px; height:28px; border-radius:50%; border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); }
.swatches input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.swatches label:has(input:checked) i{ outline:2px solid var(--ink); outline-offset:3px; }
.swatches label:has(input:focus-visible){ outline:2px solid var(--link); }
input[type=text]{ box-sizing:border-box; width:100%; height:var(--tap); padding:0 var(--s-3); font:inherit; font-size:var(--fs-ui); color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:var(--r-ui); }
input[type=text]::placeholder{ color:var(--muted); }
input[type=text]:focus-visible{ border-color:var(--ink); outline-offset:0; }
input[type=color]{ width:var(--tap); height:var(--tap); padding:6px; background:transparent; border:1px solid var(--line); border-radius:var(--r-ui); cursor:pointer; }
.colorrow{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:var(--s-3); }
/* magia: quattro campioni di gradiente presi dalla schermata */
.magic{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-2); }
.magic label{ position:relative; display:grid; gap:6px; cursor:pointer; }
.magic canvas{ display:block; width:100%; aspect-ratio:4/5; height:auto; outline:1px solid var(--line); }
.magic input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.magic small{ font-size:var(--fs-label); line-height:1.2; color:var(--muted); }
.magic label:has(input:checked) canvas{ outline:2px solid var(--ink); outline-offset:2px; }
.magic label:has(input:checked) small{ color:var(--ink); }
.magic label:has(input:focus-visible) canvas{ outline:2px solid var(--link); outline-offset:2px; }
#magic-more{ justify-self:start; margin-top:var(--s-3); }

.check{ display:flex; align-items:center; gap:10px; min-height:var(--tap); font-size:var(--fs-ui); cursor:pointer; }
.check input{ width:18px; height:18px; margin:0; accent-color:var(--ink); }

.drop{ position:relative; display:grid; gap:var(--s-1); padding:var(--s-4); border:1.5px dashed var(--muted); cursor:pointer; }
.drop:hover, body.dragging .drop{ border-color:var(--ink); background:var(--wash); }
.drop b{ font-weight:600; font-size:var(--fs-ui); }
.drop span{ font-size:var(--fs-note); color:var(--muted); }
.drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.drop:has(input:focus-visible){ outline:2px solid var(--link); outline-offset:2px; }
.file{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-2); }
.file .lbl{ font-size:var(--fs-note); }
.btns{ display:flex; flex-wrap:wrap; gap:var(--s-2); }

.exportbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:14px 16px; border-top:1px solid var(--line); background:var(--paper); }
.exportbar .btns{ flex-wrap:nowrap; }
.exportbar .btn{ flex:none; padding:var(--s-3) var(--s-4); }
.exportbar .lbl{ white-space:nowrap; }
@media (max-width:400px){
  .exportbar{ flex-wrap:wrap; row-gap:10px; }
  .exportbar .lbl{ flex-basis:100%; }
  .exportbar .btns{ flex:1; }
  .exportbar .btn{ flex:1 1 auto; }
}

/* Foto o Video: due schede in cima al pannello */
.modesw{ border:0; margin:0; padding:16px 20px; border-bottom:1px solid var(--line); min-width:0; }
.modesw .seg{ grid-template-columns:1fr 1fr; }
.modesw .seg label{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.08em; text-transform:uppercase; }
/* in video, al posto delle viste: play, tempo, barra per scorrere il movimento */
.player{ position:absolute; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:var(--s-3); padding:6px 12px 6px 6px; background:color-mix(in srgb,var(--paper) 80%,transparent); border:1px solid var(--line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.pbtn{ flex:none; display:grid; place-items:center; width:var(--tap); height:var(--tap); padding:0; color:var(--paper); background:var(--ink); border:0; border-radius:var(--r-ui); cursor:pointer; }
.pbtn svg{ width:16px; height:16px; }
.pbtn .i-pause, .pbtn.playing .i-play{ display:none; }
.pbtn.playing .i-pause{ display:block; }
.player input[type=range]{ flex:1; min-width:0; }
.player output{ flex:none; font:500 var(--fs-label)/1 var(--f-mono); letter-spacing:.04em; color:var(--ink); white-space:nowrap; }
.exportbar .btn:disabled{ opacity:.7; cursor:progress; }

/* anteprima dei movimenti: una sagoma che fa il movimento al passaggio del mouse, una volta sola al tocco */
.pv{ position:relative; display:grid; place-items:center; width:44px; height:34px; perspective:90px; pointer-events:none; }
.pv i{ position:relative; display:block; width:16px; height:26px; border:1.5px solid currentColor; border-radius:3px; transform-style:preserve-3d; }
.pv i::after{ content:""; position:absolute; left:2px; right:2px; top:3px; height:5px; background:currentColor; opacity:.55; border-radius:1px; }
.pv i::before{ content:""; position:absolute; left:2px; right:5px; top:10px; height:2px; background:currentColor; opacity:.4; }
.pv-zoom, .pv-salita{ overflow:hidden; }
/* statico: la sagoma resta ferma, scorre solo la pagina sullo schermo */
.pv-statico i{ overflow:hidden; }
.pv-statico.run i::after, .pv-statico.run i::before{ animation:pv-statico 1.8s ease-in-out both; }
.anims.rev .pv-statico i::after, .anims.rev .pv-statico i::before{ animation-direction:reverse; }
.anims.rev .pv i{ animation-direction:reverse; }
.pv.run i{ animation-iteration-count:1; }
.pv-entrata.run i{ animation-name:pv-entrata; } .pv-giro.run i{ animation-name:pv-giro; } .pv-passaggio.run i{ animation-name:pv-passaggio; }
.pv-iso.run i{ animation-name:pv-iso; } .pv-salita.run i{ animation-name:pv-salita; } .pv-zoom.run i{ animation-name:pv-zoom; } .pv-alto.run i{ animation-name:pv-alto; } .pv-carrellata.run i{ animation-name:pv-carrellata; } .pv-fluttua.run i{ animation-name:pv-fluttua; }
.pv i{ animation-duration:1.8s; animation-timing-function:cubic-bezier(.2,.8,.2,1); animation-fill-mode:both; }
.pv-giro i{ animation-timing-function:linear; } .pv-carrellata i{ animation-duration:2.4s; animation-timing-function:ease-in-out; } .pv-fluttua i{ animation-duration:2.4s; animation-timing-function:ease-in-out; }
@media (hover:hover){
  .anims label:hover .pv i{ animation-iteration-count:infinite; }
  .anims label:hover .pv-statico i::after, .anims label:hover .pv-statico i::before{ animation:pv-statico 1.8s ease-in-out infinite both; }
  .anims.rev label:hover .pv-statico i::after, .anims.rev label:hover .pv-statico i::before{ animation-direction:reverse; }
  .anims label:hover .pv-entrata i{ animation-name:pv-entrata; } .anims label:hover .pv-giro i{ animation-name:pv-giro; }
  .anims label:hover .pv-passaggio i{ animation-name:pv-passaggio; } .anims label:hover .pv-iso i{ animation-name:pv-iso; }
  .anims label:hover .pv-salita i{ animation-name:pv-salita; } .anims label:hover .pv-zoom i{ animation-name:pv-zoom; }
  .anims label:hover .pv-alto i{ animation-name:pv-alto; } .anims label:hover .pv-carrellata i{ animation-name:pv-carrellata; } .anims label:hover .pv-fluttua i{ animation-name:pv-fluttua; }
}
@keyframes pv-statico{ 0%,15%{ transform:none; } 85%,100%{ transform:translateY(-9px); } }
@keyframes pv-entrata{ 0%{ transform:translateY(-7px) rotateX(38deg) rotateY(-38deg); opacity:.35; } 65%,100%{ transform:none; opacity:1; } }
@keyframes pv-giro{ from{ transform:rotateY(0); } to{ transform:rotateY(360deg); } }
@keyframes pv-passaggio{ 0%{ transform:translateX(12px) rotateY(80deg) scale(1.35); } 70%,100%{ transform:none; } }
@keyframes pv-iso{ 0%,15%{ transform:rotateX(55deg) rotateZ(-45deg); } 75%,100%{ transform:none; } }
@keyframes pv-salita{ 0%{ transform:translateY(34px); } 65%,100%{ transform:none; } }
@keyframes pv-zoom{ 0%,10%{ transform:none; } 55%,100%{ transform:scale(2.6) translateY(4px); } }
@keyframes pv-alto{ 0%,10%{ transform:translateY(-4px) rotateX(-70deg); } 75%,100%{ transform:none; } }
@keyframes pv-fluttua{ 0%,100%{ transform:translateY(-2px) rotateY(0); } 25%{ transform:translateY(-5px) rotateY(14deg); } 75%{ transform:translateY(1px) rotateY(-14deg); } }
@keyframes pv-carrellata{ 0%{ transform:translateX(-6px) rotateY(-50deg) rotateX(14deg) scale(.75); } 100%{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .pv i, .pv i::after, .pv i::before{ animation:none !important; } }
.anims label{ padding-block:10px 8px; }

/* scorciatoie: solo dove c'è una tastiera e un mouse */
.help{ position:absolute; top:12px; left:12px; width:36px; height:36px; display:grid; place-items:center; padding:0; font:500 var(--fs-note)/1 var(--f-mono); color:var(--ink); background:color-mix(in srgb,var(--paper) 80%,transparent); border:1px solid var(--line); border-radius:var(--r-ui); cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.help:hover, .help[aria-expanded="true"]{ border-color:var(--muted); }
.keys{ position:absolute; top:56px; left:12px; z-index:3; width:min(300px, calc(100% - 24px)); padding:14px 16px; background:color-mix(in srgb,var(--paper) 92%,transparent); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.keys .lbl{ margin:0 0 10px; }
.keys ul{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2); font-size:var(--fs-note); }
.keys li{ display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
kbd{ display:inline-block; min-width:22px; padding:1px 5px; font:500 var(--fs-label)/1.5 var(--f-mono); color:var(--ink); border:1px solid var(--line); text-align:center; }
.keys .toguida{ display:block; width:100%; margin:var(--s-3) 0 0; padding:10px 0 0; border:0; border-top:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:var(--fs-note); font-weight:600; text-align:left; cursor:pointer; }
.keys .toguida:hover{ text-decoration:underline; text-underline-offset:3px; }
.app{ position:relative; }
@media (hover:none), (max-width:860px){ .help, .keys{ display:none !important; } }

/* Guida: l'ultimo cassetto del pannello, chiuso, uguale in ogni strumento (build_tools.py guida()) */
.guida .sec{ display:grid; gap:var(--s-3); }
.guida h3{ margin:var(--s-3) 0 0; font:800 var(--fs-title-s)/1.15 var(--f-display); }
.guida h3:first-child{ margin-top:0; }
.guida p{ margin:0; font-size:var(--fs-note); line-height:1.5; color:var(--muted); }
.voci{ list-style:none; margin:0; padding:0; display:grid; border:1px solid var(--line); counter-reset:r; }
.voci li{ display:grid; gap:6px; padding:14px 16px; counter-increment:r; }
.voci li + li{ border-top:1px solid var(--line); }
.voci li::before{ content:counter(r, decimal-leading-zero); font:500 var(--fs-label)/1 var(--f-mono); letter-spacing:.06em; color:var(--muted); }
.voci h4{ margin:0; font-weight:600; font-size:var(--fs-ui); line-height:1.3; color:var(--ink); }
.guida .steps{ margin:0; padding-left:1.4em; display:grid; gap:var(--s-2); font-size:var(--fs-note); line-height:1.5; }
.guida .faq{ margin:0; display:grid; gap:var(--s-3); }
.guida .faq dt{ font-weight:600; font-size:var(--fs-note); }
.guida .faq dd{ margin:2px 0 0; font-size:var(--fs-note); line-height:1.5; color:var(--muted); }

/* toast con l'ombra dura del marchio */
.toast{ position:fixed; left:50%; bottom:28px; z-index:var(--z-toast); transform:translateX(-50%); display:grid; gap:2px; padding:12px 18px; background:var(--ink); color:var(--paper); box-shadow:var(--shadow-hard); max-width:calc(100vw - 32px); }
/* il messaggio non prende mai i tocchi: sul telefono stava sopra Copia e lo rendeva muto; lì sale sopra la barra dei pulsanti */
.toast{ pointer-events:none; }
@media (max-width:860px){ .toast{ bottom:calc(96px + env(safe-area-inset-bottom)); } }
.toast b{ font-family:var(--f-display); font-weight:800; font-size:var(--fs-text); }
.toast span{ font-size:var(--fs-note); }
.toast.in{ animation:pop .3s ease-out; }
@keyframes pop{ from{ transform:translate(-50%,12px); opacity:0; } }

@media (max-width:860px){
  .app{ grid-template-columns:1fr; height:auto; min-height:0; }
  .viewport{ height:min(62vh,560px); }
  .panel{ border-left:0; border-top:1px solid var(--line); }
  .opts{ overflow:visible; }
  .exportbar{ position:sticky; bottom:0; z-index:5; }
  .hint{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .toast.in{ animation:none; } .card{ transition:none; } }
.grp .sub{ display:grid; gap:18px; }
.drop .rec{ font-family:var(--f-mono); font-size:var(--fs-label); letter-spacing:.06em; color:var(--ink); }
/* senza footer (Mockup, Squint) la riga per i lettori di schermo non deve allungare la pagina */
#live{ top:0; left:0; margin:0; }

.sw-argento{background:#D9DBDF;}
.sw-siderale{background:#3A3D44;}
.sw-mezzanotte{background:#1E2230;}
.sw-bianco{background:#F4F4F2;}
.sw-0f1015{background:#0F1015;}
.sw-1b1d25{background:#1B1D25;}
.sw-2b2bea{background:#2B2BEA;}
.sw-f1f2f4{background:#F1F2F4;}
.sw-ffffff{background:#FFFFFF;}