/* str0ng.dev — stile del sito. Da stile.css e stile-storia.css del mockup scelto (str0ng-dev-hq/ricerche/2026-10-22-reference-grafiche/mockup/);
   build.py aggiunge in coda il CSS del modulo e delle scene (scene/*.py). Font ospitati nel sito (assets/f/, @fontsource 5.3.0, licenza OFL in assets/f/). */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(/f/it-400.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(/f/it-500.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(/f/it-600.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(/f/it-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/f/jb-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/f/jb-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/f/jb-600.woff2) format("woff2")}
:root,[data-tema="scuro"]{--fondo:#121314;--fondo2:#1A1C1E;--fondo3:#232528;--testo:#ECEAE5;--testo2:#AEB5BD;--testo3:#7E868F;--filetto:#2C2F33;--accento:#F2B544;--accento-testo:#121314;--campo:#2A2D31;--campo-vivo:#5E6670;--forma:#ECEAE5;--ok:#F2B544}
[data-tema="chiaro"]{--fondo:#FFFFFF;--fondo2:#F7F7F7;--fondo3:#EDEDED;--testo:#171717;--testo2:#55575A;--testo3:#6F6F71;--filetto:#E4E4E2;--accento:#8A5F00;--accento-testo:#FFFFFF;--campo:#ECECEA;--campo-vivo:#BDBCB7;--forma:#171717;--ok:#8A5F00}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{margin:0;background:var(--fondo);color:var(--testo);font:400 18px/1.6 "Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background .25s,color .25s}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
a{color:inherit}
.w{max-width:1040px;margin:0 auto;padding:0 16px}
header.testa{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--filetto)}
header.testa .w{display:flex;align-items:center;gap:10px;height:58px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo svg{height:19px;width:auto;display:block}
[data-tema="scuro"] .logo .chiaro,[data-tema="chiaro"] .logo .scuro{display:none}
nav.menu{display:none;gap:22px;margin-left:24px;font-size:15px}
nav.menu a{text-decoration:none;color:var(--testo2)}
.spazio{flex:1}
.comando{font:500 12px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--testo);background:transparent;border:1px solid var(--filetto);border-radius:2px;height:36px;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.comando:focus-visible,.cta:focus-visible,summary:focus-visible{outline:2px solid var(--accento);outline-offset:2px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background:var(--accento);color:var(--accento-testo);font:600 16px/1 "Inter Tight",system-ui,sans-serif;border-radius:2px;text-decoration:none;border:0}
.cta.piccola{min-height:36px;font-size:14px;padding:0 12px;display:none}
@media(min-width:760px){nav.menu{display:flex}.cta.piccola{display:inline-flex}}
.kicker{font:500 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--testo3);margin:0 0 10px}
h1{font-weight:700;font-size:clamp(38px,9.5vw,76px);line-height:1;letter-spacing:-.03em;margin:0 0 18px}
h1 em,h2 em{font-style:normal;color:var(--testo3)}
h2{font-weight:700;font-size:clamp(28px,6.4vw,46px);line-height:1.06;letter-spacing:-.02em;margin:0 0 14px}
h3{font-weight:600;font-size:21px;line-height:1.25;margin:0 0 8px}
p{margin:0 0 14px}
.sub{font-size:19px;color:var(--testo2);max-width:34em}
.lettura{max-width:36em}
.sez{padding:72px 0;border-top:1px solid var(--filetto)}
.sez.alt{background:var(--fondo2)}
.prove{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:6px;font:400 13.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--testo2)}
.prove li::before{content:"› ";color:var(--accento)}
.nota-cta{font:400 13px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);margin-left:12px}
.eroe{padding:48px 0 0}
.eroe .griglia{display:grid;gap:28px}
@media(min-width:900px){.eroe .griglia{grid-template-columns:1.05fr 1fr;align-items:center}.eroe{padding:72px 0 24px}}
.scena{position:relative;border:1px solid var(--filetto);border-radius:12px;overflow:hidden;background:var(--fondo2)}
.scena canvas{display:block;width:100%}
.etichetta{position:absolute;left:12px;top:10px;z-index:2;font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--testo3);background:var(--fondo);border:1px solid var(--filetto);padding:5px 7px;border-radius:2px}
.didascalia{font:400 12.5px/1.45 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);padding:10px 12px;border-top:1px solid var(--filetto);margin:0}
/* contatori */
.contatori{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--filetto)}
.contatori div{padding:14px 12px;border-right:1px solid var(--filetto)}
.contatori div:last-child{border-right:0}
.contatori b{display:block;font:600 clamp(24px,6.5vw,34px)/1.1 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);font-variant-numeric:tabular-nums}
.contatori span{display:block;font:400 11.5px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);margin-top:4px}
/* fasi */
.fasi{display:grid;gap:14px;margin-top:28px}
@media(min-width:900px){.fasi{grid-template-columns:repeat(3,1fr)}}
.fase{border:1px solid var(--filetto);border-radius:12px;padding:22px 20px;background:var(--fondo)}
.fase .num{font:600 13px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);margin-bottom:12px;display:block}
.fase dl{margin:14px 0 0;display:grid;gap:10px}
.fase dt{font:600 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--testo3)}
.fase dd{margin:2px 0 0;font-size:16.5px;line-height:1.5}
.dafissare{font:500 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);border:1px dashed var(--testo3);padding:2px 6px;border-radius:2px;white-space:nowrap}
/* tabella */
.tab{width:100%;border-collapse:collapse;margin-top:22px;font-size:16.5px}
.tab th,.tab td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--filetto);vertical-align:top}
.tab th{font:600 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--testo3)}
.tab td:last-child{font:500 13.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);white-space:nowrap}
.due{display:grid;gap:18px;margin-top:22px}
@media(min-width:760px){.due{grid-template-columns:1fr 1fr}}
.colonna{border:1px solid var(--filetto);border-radius:12px;padding:18px}
.colonna ul{margin:8px 0 0;padding-left:20px}
.colonna li{margin-bottom:6px;font-size:16.5px}
/* faq */
details{border-bottom:1px solid var(--filetto);padding:4px 0}
summary{cursor:pointer;list-style:none;font-weight:600;font-size:19px;padding:16px 36px 16px 0;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font:400 24px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--accento)}
details[open] summary::after{content:"−"}
details p{color:var(--testo2);font-size:17px}
/* modulo */
form{display:grid;gap:14px;margin-top:22px;max-width:560px}
label{display:grid;gap:6px;font:500 13px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--testo2)}
input,select,textarea{font:400 17px/1.4 "Inter Tight",system-ui,sans-serif;color:var(--testo);background:var(--fondo);border:1px solid var(--filetto);border-radius:2px;padding:12px;min-height:48px}
textarea{min-height:110px}
footer{padding:36px 0 56px;border-top:1px solid var(--filetto);font-size:14px;color:var(--testo3)}
footer .w{display:grid;gap:12px}
footer a{color:var(--testo2)}
/* registro */
.registro{font:400 13px/1.75 "JetBrains Mono",ui-monospace,monospace}
.separatore{font:400 12px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--campo-vivo);white-space:nowrap;overflow:hidden;padding:18px 0;letter-spacing:.2em;user-select:none}
.fase-fissa{position:sticky;top:58px;z-index:10;background:var(--fondo);border-bottom:1px solid var(--filetto);font:500 12.5px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.fase-fissa .w{display:flex;gap:16px;height:40px;align-items:center;overflow:hidden}
.fase-fissa span.attiva{color:var(--accento)}
.decodifica{display:inline-block}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
.pannello{border:1px solid var(--filetto);border-radius:12px;overflow:hidden;background:var(--fondo2)}
.pannello .capo{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--filetto);font:500 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.registro ol{list-style:none;margin:0;padding:10px 12px 12px;min-height:calc(1.75em * 7 + 22px);overflow:hidden}
@media(min-width:500px){.registro ol{min-height:calc(1.75em * 9 + 22px)}}
.registro li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:entra .3s ease-out}
.registro li .k{color:var(--testo)}
.registro li .v{color:var(--testo2)}
.registro li .s{color:var(--ok);float:right;padding-left:8px}
.registro li .s.aperto{color:var(--testo3)}
.registro li.codice{color:var(--testo3)}
.registro li.codice .n{color:var(--campo-vivo)}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.registro li{animation:none}}
.legenda{font:400 12px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);padding:10px 12px;border-top:1px solid var(--filetto);margin:0}
.eroe .griglia>div{min-width:0}
/* Aggiunte per i mockup con la storia */
.oggi{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--filetto)}
.oggi div{padding:12px;border-right:1px solid var(--filetto)}
.oggi div:last-child{border-right:0}
.oggi b{display:block;font:600 14px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);font-variant-numeric:tabular-nums}
.oggi span{display:block;font:400 11.5px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);margin-top:4px}
.oggi-capo{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--filetto);font:500 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.oggi-capo em{font-style:normal;color:var(--testo)}
.esempio{font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--testo3);border:1px solid var(--testo3);padding:4px 6px;border-radius:2px;white-space:nowrap}
.cap{display:grid;gap:22px;padding:56px 0;border-top:1px solid var(--filetto)}
@media(min-width:900px){.cap{grid-template-columns:1fr 1fr;align-items:center}.cap.dx .cap-scena{order:2}}
.cap-scena{border:1px solid var(--filetto);border-radius:12px;background:var(--fondo2);overflow:hidden}
.cap-scena canvas{display:block;width:100%;height:380px}
.cap-n{font:600 12.5px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;display:block}
.cap p{max-width:34em}
.filo{font:400 13px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);margin-top:8px}
.barre{display:grid;gap:18px;margin-top:22px;max-width:640px}
.barre div{display:grid;gap:6px}
.barre span{font-size:16px}
.barre .riga{display:flex;align-items:center;gap:12px}
.barre i{display:block;height:14px;background:var(--accento);transform-origin:left;transform:scaleX(0);border-radius:2px}
.barre b{font:600 18px/1 "JetBrains Mono",ui-monospace,monospace;color:var(--testo);min-width:4.5ch}
.ricerca{margin-top:22px;border:1px dashed var(--testo3);border-radius:12px;padding:16px;font-size:15.5px;color:var(--testo2);max-width:640px}
.ricerca b{font:600 12px/1.4 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--testo)}
/* Aggiunte del sito */
.salta{position:absolute;left:-9999px;top:8px;z-index:30;background:var(--accento);color:var(--accento-testo);padding:10px 14px;border-radius:2px;font-weight:600}
.salta:focus{left:16px}
.logo img{height:19px;width:auto;display:block}
@media(max-width:759px){.logo img{height:16px}}
[data-tema="scuro"] .logo .chiaro,[data-tema="chiaro"] .logo .scuro,[data-tema="scuro"] .marchio .chiaro,[data-tema="chiaro"] .marchio .scuro{display:none}
@media(max-width:420px){header.testa .w{gap:6px}.comando{padding:0 8px;font-size:11.5px}}
.fonte{font:400 12.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);margin-top:14px;max-width:640px}
footer .piede{display:grid;gap:22px}
@media(min-width:760px){footer .piede{grid-template-columns:1.2fr 1fr 1fr}}
footer .marchio img{height:16px;width:auto;display:block;margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer .k{font:500 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--testo3);margin:0 0 8px}
footer .legale{font:400 12.5px/1.5 "JetBrains Mono",ui-monospace,monospace;margin:8px 0 0}
footer .prova{color:var(--accento)}
.mod .esito{font:400 13px/1.5 "JetBrains Mono",ui-monospace,monospace;color:#E5484D;margin:0}
.mod .esito a{color:var(--testo)}
.mod .fuga{font:400 13px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);margin:16px 0 0}
.mod .fuga a{color:var(--testo2)}
.fatto p{color:var(--testo2);font-size:16px}
.fatto:focus{outline:none}
.legali{padding:56px 0 72px}
.legali .w{max-width:760px}
.legali h1{font-size:clamp(34px,7vw,56px)}
.legali h2{font-size:22px;letter-spacing:-.01em;margin:34px 0 10px}
.legali p,.legali li{color:var(--testo2);font-size:17px}
.legali .agg{font:400 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.legali .tbl{display:block;overflow-x:auto;margin:14px 0}
.legali table{border-collapse:collapse;min-width:620px;font-size:15px}
.legali th,.legali td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--filetto)}
.legali th{font:600 11.5px/1.3 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--testo3)}
.legali td{color:var(--testo2)}
.legali code{font:400 14px "JetBrains Mono",ui-monospace,monospace}
.nf{padding:96px 0}


.mod{border:1px solid var(--filetto);border-radius:16px;background:var(--fondo2);padding:22px 18px;max-width:640px;margin-top:22px}
.mod form{display:grid;gap:18px;margin:0;max-width:none}
.mod .due-c{display:grid;gap:18px}
@media(min-width:640px){.mod .due-c{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:7px}
.campo>span{font:500 12px/1.3 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--testo2)}
.campo>span i{font-style:normal;color:var(--testo3);text-transform:none;letter-spacing:0}
.campo input,.campo textarea{font:400 17px/1.45 "Inter Tight",system-ui,sans-serif;color:var(--testo);background:var(--fondo);border:1px solid var(--filetto);border-radius:10px;padding:13px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--accento);box-shadow:0 0 0 3px color-mix(in srgb,var(--accento) 22%,transparent)}
.campo.err input,.campo.err textarea{border-color:#E5484D}
.campo .msg{font:400 12.5px/1.3 "JetBrains Mono",ui-monospace,monospace;color:#E5484D;font-style:normal}
.chip{display:flex;flex-wrap:wrap;gap:8px}
.chip label{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1px solid var(--filetto);border-radius:999px;font:500 15px/1 "Inter Tight",system-ui,sans-serif;color:var(--testo2);cursor:pointer;background:var(--fondo);transition:background .2s,color .2s,border-color .2s}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip input:checked+label{background:var(--testo);color:var(--fondo);border-color:var(--testo)}
.chip input:focus-visible+label{outline:2px solid var(--accento);outline-offset:2px}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--testo2)}
.consenso input{width:20px;height:20px;min-height:0;margin-top:2px;accent-color:var(--accento)}
.invio{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.invio .cta{min-height:52px;padding:0 24px;font-size:16.5px;border-radius:999px}
.invio small{font:400 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.fatto{display:none}
.fatto.on{display:block}
.fatto b{font:600 13px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);text-transform:uppercase;letter-spacing:.06em}
.tasselli{display:grid;gap:8px;margin-bottom:6px}
.tasselli .fila{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tasselli .t{height:10px;border-radius:3px;background:var(--campo);position:relative;overflow:hidden;transition:background .35s}
.tasselli .t::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accento) 55%,transparent),transparent);transform:translateX(-100%);animation:riflesso 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .18s)}
.tasselli .t.on{background:var(--accento)}
.tasselli .t.on::after{animation:none;opacity:0}
.tasselli .stato{display:flex;justify-content:space-between;font:400 12px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.tasselli .stato b{font-weight:600;color:var(--testo2)}
@keyframes riflesso{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.fermo .tasselli .t::after{animation:none;opacity:0}
@media (prefers-reduced-motion: reduce){.tasselli .t::after{animation:none;opacity:0}.tasselli .t{transition:none}}


.scena-a svg{display:block;width:100%;height:auto;max-height:520px}
.scena-ab{display:grid;grid-template-columns:1fr;gap:0;position:relative}
@media(min-width:640px){.scena-ab{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:4px}}
.scena-ab .media{position:relative;aspect-ratio:3/4;overflow:hidden}
.scena-ab .inquadra{position:absolute;inset:0;transform:scale(1.25);transform-origin:50% 48%}
.scena-ab .tema{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1/1;transform:translateX(-50%)}
.scena-ab picture,.scena-ab video{position:absolute;inset:0;width:100%;height:100%;display:block}
.scena-ab img{width:100%;height:100%;display:block}
.scena-ab video{opacity:0;transition:opacity .4s}
.scena-ab video.on{opacity:1}
[data-tema="scuro"] .scena-ab .chiaro,[data-tema="chiaro"] .scena-ab .scuro{display:none}
.scena-ab svg{display:block;width:100%;height:auto}
.scena-ab svg.sotto{display:block}.scena-ab svg.destra{display:none}
@media(min-width:640px){.scena-ab svg.sotto{display:none}.scena-ab svg.destra{display:block}}
.scena-ab .es{position:absolute;right:10px;top:8px;font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--testo3);z-index:3}
/* schermo in codice: --u = 1/300 della larghezza dello schermo (disegno a 300 px); le misure sono multipli di --u */
.scena-ab .schermo{position:absolute;overflow:hidden;container-type:inline-size;border-radius:9.2% / 4.3%;background:var(--app-fondo)}
.scena-ab .app{--u:calc(100cqw / 300);position:absolute;inset:0;font-family:"Inter Tight",system-ui,sans-serif;color:var(--app-testo);line-height:1.25;font-size:calc(12 * var(--u))}
.scena-ab .scuro .schermo{--app-fondo:#141618;--app-carta:#1E2124;--app-testo:#ECEAE5;--app-testo2:#9AA2AB;--app-filetto:#2C3034;--app-accento:#F2B544;--app-accento-testo:#141618;--app-blu:#6EA8FF}
.scena-ab .chiaro .schermo{--app-fondo:#F4F4F2;--app-carta:#FFFFFF;--app-testo:#171717;--app-testo2:#66686B;--app-filetto:#E3E3E0;--app-accento:#8A5F00;--app-accento-testo:#FFFFFF;--app-blu:#1F5FC4}
.app .vista{position:absolute;inset:0;padding:calc(36 * var(--u)) calc(16 * var(--u)) 0;background:var(--app-fondo);will-change:transform}
.app .barra{display:flex;justify-content:space-between;position:absolute;left:calc(22 * var(--u));right:calc(22 * var(--u));top:calc(12 * var(--u));z-index:2;font-weight:600;font-size:calc(11 * var(--u))}
.app .barra i{font-style:normal}
.app h4{font-weight:700;font-size:calc(25 * var(--u));line-height:1.1;letter-spacing:-.01em;margin:0}
.app .sub{font-size:calc(12 * var(--u));color:var(--app-testo2);margin:calc(4 * var(--u)) 0 0}
.app .esem{font:600 calc(9 * var(--u))/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--app-testo2);border:1px solid var(--app-filetto);border-radius:calc(4 * var(--u));padding:calc(3 * var(--u)) calc(5 * var(--u));display:inline-block;margin-top:calc(8 * var(--u))}
.app .schede{display:flex;gap:calc(6 * var(--u));margin:calc(14 * var(--u)) 0 calc(12 * var(--u))}
.app .schede span{font-weight:600;font-size:calc(11 * var(--u));line-height:1;padding:calc(7 * var(--u)) calc(10 * var(--u));border-radius:999px;background:var(--app-carta);color:var(--app-testo2);border:1px solid var(--app-filetto);white-space:nowrap}
.app .schede span.on{background:var(--app-testo);color:var(--app-fondo);border-color:var(--app-testo)}
.app .elenco{position:relative}
.app .riga{position:absolute;left:0;right:0;height:calc(62 * var(--u));box-sizing:border-box;background:var(--app-carta);border:1px solid var(--app-filetto);border-radius:calc(12 * var(--u));padding:0 calc(12 * var(--u));display:grid;grid-template-columns:1fr auto;align-content:center;gap:calc(5 * var(--u)) calc(8 * var(--u))}
.app .riga b{font-size:calc(14 * var(--u));font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .riga small{font-size:calc(11.5 * var(--u));color:var(--app-testo2);white-space:nowrap}
.app .riga .imp{font-size:calc(14 * var(--u));font-weight:600;text-align:right;white-space:nowrap}
.app .stato{font-weight:600;font-size:calc(10 * var(--u));line-height:1;padding:calc(4 * var(--u)) calc(7 * var(--u));border-radius:999px;justify-self:end;white-space:nowrap}
.app .s-nuovo{background:var(--app-accento);color:var(--app-accento-testo)}
.app .s-prep{background:color-mix(in srgb,var(--app-accento) 18%,transparent);color:var(--app-accento)}
.app .s-cons{background:color-mix(in srgb,var(--app-blu) 18%,transparent);color:var(--app-blu)}
.app .s-fatto{background:var(--app-filetto);color:var(--app-testo2)}
.app .avviso-app{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));top:calc(32 * var(--u));background:var(--app-carta);border:1px solid var(--app-filetto);border-radius:calc(14 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.25);z-index:3}
.app .avviso-app b{display:block;font-size:calc(12.5 * var(--u))}.app .avviso-app small{font-size:calc(11.5 * var(--u));color:var(--app-testo2)}
.app .tocco{position:absolute;width:calc(34 * var(--u));height:calc(34 * var(--u));margin:calc(-17 * var(--u)) 0 0 calc(-17 * var(--u));border-radius:50%;background:var(--app-accento);opacity:0;z-index:4;pointer-events:none}
.app .dettaglio .indietro{font-size:calc(12.5 * var(--u));color:var(--app-accento);font-weight:600}
.app .dettaglio h4{margin-top:calc(10 * var(--u))}
.app .blocco{background:var(--app-carta);border:1px solid var(--app-filetto);border-radius:calc(12 * var(--u));padding:calc(8 * var(--u)) calc(12 * var(--u));margin-top:calc(10 * var(--u))}
.app .blocco p{display:flex;justify-content:space-between;gap:calc(8 * var(--u));margin:0;padding:calc(4 * var(--u)) 0;font-size:calc(12 * var(--u));white-space:nowrap}
.app .blocco p em{font-style:normal;color:var(--app-testo2)}
.app .blocco p.tot{font-weight:700;font-size:calc(13.5 * var(--u));border-top:1px solid var(--app-filetto);margin-top:calc(4 * var(--u));padding-top:calc(7 * var(--u))}
.app .passi{display:grid;gap:calc(8 * var(--u))}
.app .passi div{display:flex;align-items:center;gap:calc(8 * var(--u))}
.app .passi i{width:calc(14 * var(--u));height:calc(14 * var(--u));border-radius:50%;border:1.5px solid var(--app-filetto);flex:none;box-sizing:border-box;transition:background .3s,border-color .3s}
.app .passi div.fatto i{background:var(--app-accento);border-color:var(--app-accento)}
.app .passi div span{font-size:calc(12.5 * var(--u));color:var(--app-testo2)}
.app .passi div.fatto span{color:var(--app-testo);font-weight:600}
.app .pulsante{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(22 * var(--u));height:calc(42 * var(--u));border-radius:999px;background:var(--app-testo);color:var(--app-fondo);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:calc(13.5 * var(--u))}


.scena-p .funzioni{list-style:none;margin:0;padding:14px 16px 16px;display:grid;gap:6px;align-content:center}
@media(max-width:639px){.scena-p .funzioni{grid-template-columns:1fr 1fr;gap:6px 10px;padding:12px 14px 16px}}
.scena-p .funzioni li{display:grid;grid-template-columns:18px 1fr;gap:0 8px;padding:7px 9px;border:1px solid transparent;border-radius:9px;transition:background .3s,border-color .3s,opacity .3s}
.scena-p .funzioni li i{font-style:normal;font:600 13px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);grid-row:span 2}
.scena-p .funzioni li b{font:600 14px/1.3 "Inter Tight",system-ui,sans-serif;color:var(--testo)}
.scena-p .funzioni li small{font:400 12px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.scena-p .funzioni li.att{background:var(--fondo3);border-color:var(--filetto)}
.scena-p .funzioni li.si i{color:var(--accento)}
.scena-p .funzioni li.no b{text-decoration:line-through;text-decoration-color:var(--testo3);color:var(--testo3)}
.scena-p .funzioni li.no{opacity:.75}
.scena-p .funzioni .somma{grid-template-columns:1fr;font:600 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);padding-top:10px}
@media(max-width:639px){.scena-p .funzioni .somma{grid-column:1/-1}}
/* schizzo dell'app sullo schermo: misure in --u (1/300 della larghezza dello schermo) */
.schizzo{position:absolute;inset:0;--u:calc(100cqw / 300);background:var(--app-fondo);color:var(--app-testo);font-family:"Inter Tight",system-ui,sans-serif}
.schizzo .barra{display:flex;justify-content:space-between;position:absolute;left:calc(22 * var(--u));right:calc(22 * var(--u));top:calc(12 * var(--u));font-weight:600;font-size:calc(11 * var(--u))}
.schizzo .barra i{font-style:normal}
.schizzo h4{position:absolute;left:calc(16 * var(--u));top:calc(36 * var(--u));margin:0;font-weight:700;font-size:calc(25 * var(--u));line-height:1.1}
.schizzo .ver{position:absolute;left:calc(16 * var(--u));top:calc(68 * var(--u));font:500 calc(10 * var(--u))/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.05em;color:var(--app-testo2)}
.schizzo .pz{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));border:1.5px dashed var(--app-accento);border-radius:calc(12 * var(--u));box-sizing:border-box;opacity:0}
.schizzo .pz em{position:absolute;right:calc(8 * var(--u));top:calc(-8 * var(--u));background:var(--app-fondo);padding:0 calc(4 * var(--u));font:500 calc(9 * var(--u))/1.2 "JetBrains Mono",ui-monospace,monospace;font-style:normal;color:var(--app-accento)}
.schizzo .avviso{top:calc(92 * var(--u));height:calc(44 * var(--u))}
.schizzo .riga{height:calc(58 * var(--u))}
.schizzo .lin{position:absolute;left:calc(12 * var(--u));height:calc(7 * var(--u));border-radius:calc(4 * var(--u));background:var(--app-filetto)}
.schizzo .chip{position:absolute;right:calc(10 * var(--u));bottom:calc(10 * var(--u));width:calc(58 * var(--u));height:calc(15 * var(--u));border:1.5px dashed var(--app-accento);border-radius:999px;box-sizing:border-box;opacity:0}
.schizzo .puls{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(22 * var(--u));height:calc(42 * var(--u));border:1.5px dashed var(--app-filetto);border-radius:999px;box-sizing:border-box}


.scena-x .foglio{margin:0;padding:34px 16px 16px;display:grid;gap:8px;align-content:center;min-width:0}
.scena-x .foglio p.tit{margin:0 0 2px;font:600 12px/1.3 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--testo3)}
.scena-x .foglio ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--filetto)}
.scena-x .foglio li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 6px;border-bottom:1px dashed var(--filetto);font:400 12.5px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo2);transition:background .3s}
.scena-x .foglio li b{font-weight:600;color:var(--testo)}
.scena-x .foglio li em{grid-column:1/-1;font-style:normal;color:var(--accento)}
.scena-x .foglio li.cerca{background:var(--fondo3)}
.scena-x .foglio .somma{margin:4px 0 0;font:600 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--accento)}
/* chat d'esempio sullo schermo: misure in --u (1/300 della larghezza dello schermo) */
.chat{position:absolute;inset:0;--u:calc(100cqw / 300);background:var(--app-fondo);color:var(--app-testo);font-family:"Inter Tight",system-ui,sans-serif}
.chat .barra{display:flex;justify-content:space-between;position:absolute;left:calc(22 * var(--u));right:calc(22 * var(--u));top:calc(12 * var(--u));font-weight:600;font-size:calc(11 * var(--u))}
.chat .barra i{font-style:normal}
.chat .capo{position:absolute;left:0;right:0;top:calc(32 * var(--u));padding:0 calc(16 * var(--u)) calc(10 * var(--u));border-bottom:1px solid var(--app-filetto);display:flex;align-items:center;gap:calc(10 * var(--u))}
.chat .capo i{width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:50%;background:var(--app-filetto);flex:none}
.chat .capo span{display:grid;gap:calc(2 * var(--u))}
.chat .capo b{font-size:calc(15 * var(--u));font-weight:600;line-height:1.2}
.chat .capo small{font-size:calc(11 * var(--u));line-height:1.2;color:var(--app-testo2)}
.chat .fili{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));top:calc(92 * var(--u));bottom:calc(64 * var(--u));display:flex;flex-direction:column;justify-content:flex-end;gap:calc(8 * var(--u));overflow:hidden}
.chat .msg{max-width:78%;padding:calc(8 * var(--u)) calc(11 * var(--u));border-radius:calc(14 * var(--u));font-size:calc(13 * var(--u));line-height:1.3;background:var(--app-carta);border:1px solid var(--app-filetto);align-self:flex-start}
.chat .msg.out{align-self:flex-end;background:var(--app-filetto);border-color:transparent}
.chat .msg small{display:block;text-align:right;font-size:calc(9.5 * var(--u));color:var(--app-testo2);margin-top:calc(3 * var(--u))}
.chat .scrivi{position:absolute;left:calc(12 * var(--u));right:calc(12 * var(--u));bottom:calc(18 * var(--u));height:calc(36 * var(--u));border:1px solid var(--app-filetto);border-radius:999px;box-sizing:border-box;padding:0 calc(14 * var(--u));display:flex;align-items:center;font-size:calc(12 * var(--u));color:var(--app-testo2)}
.chat .persa{position:absolute;left:calc(10 * var(--u));right:calc(10 * var(--u));top:calc(30 * var(--u));background:var(--app-carta);border:1px solid var(--app-filetto);border-radius:calc(14 * var(--u));padding:calc(9 * var(--u)) calc(12 * var(--u));box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.25);z-index:3;opacity:0}
.chat .persa b{display:block;font-size:calc(12.5 * var(--u));line-height:1.3}.chat .persa small{line-height:1.3;font-size:calc(11 * var(--u));color:var(--app-testo2)}


.scena-g .versioni{list-style:none;margin:0;padding:16px;display:grid;gap:6px;align-content:center}
@media(max-width:639px){.scena-g .versioni{grid-template-columns:1fr 1fr;gap:6px 10px;padding:12px 14px 16px}}
.scena-g .versioni li{display:grid;grid-template-columns:18px 1fr;gap:0 8px;padding:7px 9px;border:1px solid transparent;border-radius:9px;transition:background .3s,border-color .3s}
.scena-g .versioni li i{font-style:normal;font:600 13px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3);grid-row:span 2}
.scena-g .versioni li b{font:600 14px/1.3 "JetBrains Mono",ui-monospace,monospace;color:var(--testo)}
.scena-g .versioni li small{font:400 12px/1.35 "JetBrains Mono",ui-monospace,monospace;color:var(--testo3)}
.scena-g .versioni li.fatta i{color:var(--accento)}
.scena-g .versioni li.att{background:var(--fondo3);border-color:var(--filetto)}
.scena-g .versioni li.dopo b,.scena-g .versioni li.dopo small{color:var(--testo3)}
.scena-g .versioni .somma{grid-template-columns:1fr;font:600 12.5px/1.4 "JetBrains Mono",ui-monospace,monospace;color:var(--accento);padding-top:10px}
@media(max-width:639px){.scena-g .versioni .somma{grid-column:1/-1}}
/* schermo: app "Ordini" pubblicata; riusa i colori --app-* e le righe .riga di scena_costruzione */
.gest .vista{padding-top:calc(36 * var(--u))}
.gest .riepilogo{position:absolute;left:0;right:0;height:calc(78 * var(--u));box-sizing:border-box;border-radius:calc(12 * var(--u));padding:calc(10 * var(--u)) calc(12 * var(--u));background:var(--app-accento);color:var(--app-accento-testo);opacity:0}
.gest .riepilogo small{display:block;font-size:calc(11 * var(--u));opacity:.85}
.gest .riepilogo b{display:block;font-size:calc(19 * var(--u));font-weight:700;margin-top:calc(3 * var(--u))}
.gest .riepilogo em{font-style:normal;font-size:calc(11 * var(--u))}
.gest .avviso-app b{font-size:calc(12.5 * var(--u))}
.gest .foglio-n{position:absolute;left:0;right:0;bottom:0;height:62%;background:var(--app-carta);border-top:1px solid var(--app-filetto);border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;padding:calc(20 * var(--u)) calc(18 * var(--u));box-sizing:border-box;z-index:3;box-shadow:0 calc(-8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.25)}
.gest .foglio-n h5{margin:0;font-size:calc(19 * var(--u));font-weight:700}
.gest .foglio-n p{margin:calc(4 * var(--u)) 0 calc(12 * var(--u));font-size:calc(11.5 * var(--u));color:var(--app-testo2)}
.gest .foglio-n ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(9 * var(--u))}
.gest .foglio-n li{font-size:calc(13 * var(--u));display:flex;gap:calc(8 * var(--u));align-items:baseline}
.gest .foglio-n li i{font-style:normal;color:var(--app-accento);font-weight:700}
.gest .foglio-n .chiudi{position:absolute;left:calc(18 * var(--u));right:calc(18 * var(--u));bottom:calc(22 * var(--u));height:calc(40 * var(--u));border-radius:999px;background:var(--app-testo);color:var(--app-fondo);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:calc(13 * var(--u))}

/* Ritocchi del sito sopra il CSS del modulo e delle scene (build.py li aggiunge in coda a s.css) */
.mod fieldset{border:0;padding:0;margin:0;min-width:0}
.mod legend{padding:0;margin:0 0 7px}
.mod legend>span{font:500 12px/1.3 "JetBrains Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--testo2)}
.consenso a{color:var(--testo)}
.cta-riga{display:flex;align-items:center;flex-wrap:wrap;gap:8px 0}