/* Monitoraggio ufficio — foglio di stile unico.
   Veste rifatta l'11/08/2026 sul modello «3D Creator» scelto da Antonio:
   fondo nero #0C0C0C, carattere Kanit, titoli enormi in maiuscolo con la
   sfumatura grigio → azzurrino, angoli molto tondi, pulsante con la sfumatura
   viola/arancio. Il tasto chiaro/scuro resta: al chiaro il mondo si ribalta
   (fondo bianco, testo nero) tenendo lo stesso linguaggio.

   Il carattere sta qui dentro (public/statico) e non su un sito di terzi: così la
   pagina si apre uguale anche se Google è lento, e non chiede niente a nessuno.
   In coda resta l'indirizzo originale, per sicurezza. */
@font-face{font-family:'Kanit';font-weight:300;font-style:normal;font-display:swap;
  src:url('/statico/kanit-300.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4-ORWnVaE.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-weight:500;font-style:normal;font-display:swap;
  src:url('/statico/kanit-500.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOBWnVaE.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-weight:700;font-style:normal;font-display:swap;
  src:url('/statico/kanit-700.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4uPhWnVaE.woff2') format('woff2')}
@font-face{font-family:'Kanit';font-weight:900;font-style:normal;font-display:swap;
  src:url('/statico/kanit-900.woff2') format('woff2'),
      url('https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr4WPBWnVaE.woff2') format('woff2')}

/* ============================================================== colori === */
:root{
  --sf:#0C0C0C; --sf2:#161616; --carta:#141414; --carta2:#1c1c1c;
  --bordo:#242424; --bordo2:#343a3f;
  --testo:#D7E2EA; --testo2:#98a3ad; --testo3:#79838c;
  --acc:#5cbcff; --acc2:#ca45ff; --acc3:#fe881b; --accSf:#12233a;
  --ok:#3ddc84; --att:#ffb443; --no:#ff6b6b;
  --ombra:0 2px 10px #00000059, 0 1px 34px #0000003d;
  --ombra2:0 10px 34px #00000073, 0 2px 60px #00000059;
  /* la sfumatura dei titoli, come nel modello */
  --sfumatura:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);
  /* quella colorata: pulsante pieno, numeri importanti, stellina */
  --viva:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  --viva2:linear-gradient(100deg,#2ba7ff 0%,#ca45ff 48%,#fe881b 100%);
  /* la sezione che si ribalta (bianca al buio, nera alla luce) */
  --sezSf:#FFFFFF; --sezTesto:#0C0C0C; --sezBordo:rgba(12,12,12,.15); --sezCarta:#F2F3F4;
  --r:28px; --rG:clamp(28px,3.4vw,56px); --lato:264px;
  color-scheme:dark;
}
:root[data-tema="chiaro"]{
  --sf:#FFFFFF; --sf2:#F2F3F5; --carta:#F5F6F7; --carta2:#EAECEF;
  --bordo:rgba(12,12,12,.12); --bordo2:rgba(12,12,12,.24);
  --testo:#0C0C0C; --testo2:#4a5158; --testo3:#6c757d;
  --acc:#1478d4; --acc2:#a327d8; --acc3:#d96b00; --accSf:#eaf3ff;
  --ok:#12a150; --att:#c77700; --no:#e5484d;
  --ombra:0 3px 9.1px #3f4a7e0d, 0 1px 29px #3f4a7e1a;
  --ombra2:0 6px 18px #3f4a7e14, 0 2px 48px #3f4a7e24;
  --sfumatura:linear-gradient(180deg,#0C0C0C 0%,#5a646e 100%);
  --sezSf:#0C0C0C; --sezTesto:#D7E2EA; --sezBordo:rgba(215,226,234,.18); --sezCarta:#161616;
  color-scheme:light;
}

/* ============================================================== base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:var(--sf)}
html,body,input,select,textarea,button{font-family:'Kanit','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
body{
  color:var(--testo); font-size:15px; font-weight:300; line-height:1.55;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; overflow-x:clip;
}
h1,h2,h3{margin:0 0 .35em;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(30px,4vw,58px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
h2{font-size:clamp(19px,1.8vw,27px);font-weight:500}
h3{font-size:clamp(15px,1.25vw,19px);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
a{color:var(--acc)}
b,strong{font-weight:500}
.mono,td,th,.val{font-variant-numeric:tabular-nums}
.mut{color:var(--testo3)}
.ok{color:var(--ok)} .no{color:var(--no)} .att{color:var(--att)}
.nascosto{display:none!important}

/* i titoli in sfumatura, come nel modello */
.sfumato,.testata h1{
  background-image:var(--sfumatura);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.testata h1 .sfumato{background-image:var(--viva2)}

/* la pillola con la stellina */
.pillola{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--carta2); color:var(--testo);
  border:1px solid var(--bordo); border-radius:999px;
  padding:7px 18px; font-size:.74rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
}
.pillola::before{
  content:""; width:17px; height:16px; flex:0 0 auto;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.50037 3.66955C7.53221 2.82462 6.41758 2.275 5.333 2.07887C4.11096 1.85888 2.84987 2.0826 1.96658 2.95885C1.10056 3.81944 0.866218 5.04172 1.06751 6.23193C1.24778 7.29835 1.7803 8.39907 2.60501 9.35959C2.41536 10.1071 2.46371 10.8946 2.7434 11.6137C3.02308 12.3327 3.52035 12.9481 4.16678 13.375C4.81321 13.802 5.57702 14.0195 6.35308 13.9976C7.12915 13.9758 7.87933 13.7157 8.50037 13.2531C9.12146 13.7161 9.87183 13.9765 10.6482 13.9985C11.4245 14.0205 12.1886 13.8029 12.8352 13.3758C13.4819 12.9487 13.9792 12.3331 14.2588 11.6137C14.5384 10.8943 14.5865 10.1065 14.3965 9.35884C15.2204 8.39832 15.753 7.29835 15.9325 6.23119C16.1338 5.04098 15.8994 3.81944 15.0334 2.9596C14.1501 2.0826 12.889 1.85888 11.667 2.07962C10.5824 2.275 9.46854 2.82537 8.50037 3.66955Z' fill='%23ca45ff'/%3E%3C/svg%3E");
}

/* la testata di ogni pagina */
.testata{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;margin:0 auto 40px;max-width:64rem}
.testata h1{margin:0;font-size:clamp(34px,6.4vw,96px);line-height:.95}
.testata .sottotitolo{margin:0;color:var(--testo2);font-weight:300;
  font-size:clamp(13px,1.05vw,16.5px);max-width:70ch}
.testata + .riga{justify-content:center}

/* comparsa dolce (la fa animazioni.js) */
.fade{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.25,.1,.25,1),transform .7s cubic-bezier(.25,.1,.25,1)}
.fade.dax{transform:translateX(-80px)}     /* arriva da sinistra */
.fade.dadx{transform:translateX(80px)}     /* arriva da destra */
.fade.dentro{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}

/* ============================================================ impianto === */
/* minmax(0,…) e non 1fr: altrimenti una tabella larga allarga tutta la pagina
   e sul telefono si scorre di lato. Vale anche per il figlio della griglia. */
#tutto{display:grid;grid-template-columns:var(--lato) minmax(0,1fr);min-height:100%}
#tutto > div{min-width:0;overflow-x:clip}

aside{
  background:var(--sf); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; padding:26px 18px;
  border-right:1px solid var(--bordo);
}
.marchio{display:flex;gap:12px;align-items:center;padding:2px 8px 26px}
.marchio .sigla{
  width:44px;height:44px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--viva);color:#fff;font-weight:700;font-size:17px;
}
.marchio b{display:block;font-size:.86rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.marchio small{display:block;color:var(--testo3);font-size:.78rem;font-weight:300}

nav.menu{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1}
nav.menu button{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;color:var(--testo2);padding:11px 16px;border-radius:999px;
  cursor:pointer;font-size:.82rem;font-weight:500;text-transform:uppercase;letter-spacing:.09em;
  transition:opacity .2s,color .2s;
}
nav.menu button:hover{opacity:.7}
nav.menu button.on{background:var(--carta2);color:var(--testo)}
nav.menu button i{font-style:normal;font-size:1.05rem;width:20px;text-align:center;letter-spacing:0}
nav.menu .gruppo{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--testo3);
  padding:18px 16px 7px;font-weight:500}

.fondo{padding-top:12px;margin-top:10px;border-top:1px solid var(--bordo)}

/* barra in alto */
header.barra{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--sf) 88%,transparent);
  backdrop-filter:blur(10px);
  display:flex;gap:10px;align-items:center;padding:16px clamp(16px,3vw,40px);flex-wrap:wrap;
  border-bottom:1px solid var(--bordo);
}
header.barra .titolo{font-weight:500;font-size:.85rem;text-transform:uppercase;letter-spacing:.16em}
header.barra .spazio{flex:1}
main{--padX:clamp(16px,3vw,40px);
  padding:clamp(18px,2vw,30px) var(--padX) 90px;max-width:1480px;margin:0 auto;width:100%}

/* barra in basso, solo telefono */
nav.basso{display:none}
@media(max-width:900px){
  #tutto{grid-template-columns:minmax(0,1fr)}
  aside{display:none}
  main{--padX:15px;padding:14px 15px 96px}
  header.barra{padding:12px 15px}
  nav.basso{
    display:grid;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:color-mix(in srgb,var(--sf) 92%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--bordo);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  }
  nav.basso button{
    background:none;border:0;color:var(--testo3);display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:7px 2px;font-size:.6rem;font-weight:500;cursor:pointer;border-radius:14px;
    text-transform:uppercase;letter-spacing:.06em;
  }
  nav.basso button i{font-style:normal;font-size:1.25rem;letter-spacing:0}
  nav.basso button.on{color:var(--testo);background:var(--carta2)}
}

/* ========================================================= L'INGRESSO ==== */
/* Il saluto grande: «CIAO ANTONIO». Il carattere si stringe da solo secondo la
   lunghezza del nome (--lung, il numero di lettere), così sta sempre su una riga. */
.eroe{
  position:relative; display:flex; flex-direction:column;
  min-height:min(84vh,780px); margin:0 0 30px; overflow:clip;
}
/* con una faccia quadra al posto della figura intera l'ingresso è più basso:
   se no resterebbe un buco fra il saluto e la foto */
.eroe.bassa{min-height:min(68vh,620px)}
.eroe .saluto{overflow:hidden;padding-top:clamp(4px,2vw,26px)}
.eroe h1{
  margin:0; font-weight:900; text-transform:uppercase; letter-spacing:-.03em;
  line-height:.86; white-space:nowrap; width:100%;
  font-size:min(17.5vw, calc((100vw - var(--lato) - 2*var(--padX)) / (var(--lung,10) * .56)));
}
@media(max-width:900px){.eroe h1{font-size:min(17vw, calc((100vw - 30px) / (var(--lung,10) * .56)))}}
.eroe .sotto{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-top:auto;padding-bottom:clamp(18px,3vw,42px);position:relative;z-index:12;
}
.eroe .sotto p{
  margin:0;color:var(--testo2);font-weight:300;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.35;font-size:clamp(.75rem,1.4vw,1.2rem);
  max-width:clamp(170px,22vw,300px);
}
.eroe .sotto p b{color:var(--testo);font-weight:500}
.eroe .figura{
  position:absolute;left:50%;transform:translateX(-50%);bottom:0;z-index:5;
  width:clamp(250px,32vw,440px);pointer-events:none;
}
/* height:auto o l'altezza scritta nell'attributo allunga la figura */
.eroe .figura img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* le facce quadrate (foto, sticker) stanno più basse e più piccole della
   figura intera della mascotte, e hanno gli angoli tondi come le schede */
.eroe .figura.quadra{width:clamp(190px,24vw,330px);bottom:clamp(10px,3vw,40px)}
.eroe .figura.quadra img{border-radius:var(--rG)}
.magnete{will-change:transform;transition:transform .6s ease-in-out}
@media(max-width:640px){
  .eroe,.eroe.bassa{min-height:auto}
  .eroe .figura{position:relative;left:auto;transform:none;margin:18px auto -6px;width:min(260px,62vw)}
  .eroe .figura.quadra{bottom:auto;width:min(230px,58vw)}
  .eroe .sotto{margin-top:14px;flex-direction:column;align-items:flex-start}
}

/* ================================================== LA STRISCIA CHE SCORRE */
.striscia{margin:clamp(30px,5vw,70px) calc(-1 * var(--padX));padding:0;overflow:clip}
.striscia .fila{display:flex;gap:12px;margin-bottom:12px;width:max-content;will-change:transform}
.piastrella{
  width:clamp(210px,20vw,300px);flex:0 0 auto;border-radius:var(--r);
  background:var(--carta);border:1px solid var(--bordo);padding:18px 20px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:132px;
}
.piastrella .p-eti{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--testo3);font-weight:500}
.piastrella .p-val{font-size:clamp(20px,2vw,30px);font-weight:900;letter-spacing:-.02em;line-height:1}
.piastrella .p-sotto{font-size:.76rem;color:var(--testo2);font-weight:300}
.piastrella.viva{background:var(--viva);border-color:transparent;color:#fff}
.piastrella.viva .p-eti,.piastrella.viva .p-sotto{color:#ffffffbb}

/* ============================================== IL RACCONTO (a lettere) === */
.racconto{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:clamp(28px,4vw,54px);
  padding:clamp(50px,7vw,110px) clamp(0px,11vw,200px);overflow:clip}
.racconto h2{font-size:clamp(2.4rem,9vw,120px);font-weight:900;text-transform:uppercase;
  letter-spacing:-.03em;line-height:.9;margin:0;position:relative;z-index:2;
  background-image:var(--sfumatura);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
/* pre-wrap: il testo è spezzato lettera per lettera e gli spazi vanno tenuti,
   ma la frase deve poter andare a capo lo stesso */
.racconto .testo{max-width:620px;font-size:clamp(1rem,2vw,1.3rem);font-weight:500;line-height:1.65;
  color:var(--testo);margin:0;position:relative;z-index:2;white-space:pre-wrap}
.racconto .testo .c{opacity:.2;transition:opacity .12s linear}
.racconto .deco{position:absolute;pointer-events:none;user-select:none;display:block;height:auto}
.racconto .d1{top:2%;left:0;width:clamp(84px,12vw,180px)}
.racconto .d2{bottom:6%;left:4%;width:clamp(70px,10vw,150px)}
.racconto .d3{top:2%;right:0;width:clamp(84px,12vw,180px)}
.racconto .d4{bottom:6%;right:4%;width:clamp(78px,11vw,165px)}
/* sul telefono non c'è spazio: gli oggetti finirebbero sopra le parole */
@media(max-width:820px){.racconto .deco{display:none}}

/* ======================================== LA SEZIONE CHE SI RIBALTA ======= */
.ribalta{
  background:var(--sezSf);color:var(--sezTesto);
  margin:clamp(30px,5vw,60px) calc(-1 * var(--padX)) 0;
  border-radius:var(--rG) var(--rG) 0 0;
  padding:clamp(44px,6vw,96px) var(--padX);
}
.ribalta h2{font-size:clamp(2.4rem,9vw,120px);font-weight:900;text-transform:uppercase;
  text-align:center;letter-spacing:-.03em;line-height:.9;margin:0 0 clamp(34px,5vw,72px);color:var(--sezTesto)}
.voci{max-width:66rem;margin:0 auto}
.voce{display:flex;gap:clamp(14px,2.5vw,36px);align-items:flex-start;
  padding:clamp(20px,2.6vw,40px) 0;border-top:1px solid var(--sezBordo);width:100%;
  background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit;
  font-family:inherit;cursor:pointer}
.voce:last-child{border-bottom:1px solid var(--sezBordo)}
.voce .n{font-size:clamp(2.4rem,7vw,110px);font-weight:900;line-height:.8;letter-spacing:-.04em;
  flex:0 0 auto;opacity:.92}
.voce .d{display:flex;flex-direction:column;gap:8px;padding-top:.25em;min-width:0}
.voce .d b{font-size:clamp(1rem,2.2vw,1.9rem);font-weight:500;text-transform:uppercase;letter-spacing:.02em}
.voce .d span{font-size:clamp(.85rem,1.5vw,1.1rem);font-weight:300;line-height:1.6;opacity:.62;max-width:52rem}
.voce:hover .d b{opacity:.7}

/* =================================== LE SCHEDE CHE SI IMPILANO =========== */
.impila{background:var(--sf);border-radius:var(--rG) var(--rG) 0 0;
  margin:calc(-1 * clamp(30px,4vw,56px)) calc(-1 * var(--padX)) 0;
  padding:clamp(40px,5vw,80px) var(--padX) 0;position:relative;z-index:10}
.impila h2{font-size:clamp(2.4rem,9vw,120px);font-weight:900;text-transform:uppercase;text-align:center;
  letter-spacing:-.03em;line-height:.9;margin:0 0 clamp(20px,3vw,40px);
  background-image:var(--sfumatura);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.pila{height:76vh;min-height:440px;position:relative}
@media(max-width:900px){.pila{height:auto;min-height:0;margin-bottom:20px}}
.pcarta{
  position:sticky;top:96px;border:2px solid var(--bordo2);border-radius:var(--rG);
  background:var(--carta);padding:clamp(16px,2vw,30px);will-change:transform;
}
@media(max-width:900px){.pcarta{position:static;transform:none!important}}
.pcarta .alto{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin-bottom:clamp(14px,2vw,26px)}
.pcarta .alto .n{font-size:clamp(2.4rem,6vw,96px);font-weight:900;line-height:.8;letter-spacing:-.04em}
.pcarta .alto .t{flex:1;min-width:180px;display:flex;flex-direction:column;gap:6px;padding-top:.3em}
.pcarta .alto .t small{font-size:.64rem;text-transform:uppercase;letter-spacing:.18em;color:var(--testo3);font-weight:500}
.pcarta .alto .t b{font-size:clamp(1.05rem,2.2vw,1.9rem);font-weight:500;text-transform:uppercase}
.pcarta .basso{display:grid;grid-template-columns:40fr 60fr;gap:clamp(10px,1.4vw,18px)}
@media(max-width:700px){.pcarta .basso{grid-template-columns:minmax(0,1fr)}}
.pcarta .col{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px)}
.pcarta .cella{background:var(--carta2);border-radius:var(--rG);padding:clamp(16px,2vw,28px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0}
.pcarta .cella .eti{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--testo3);font-weight:500}
.pcarta .cella .val{font-size:clamp(22px,3vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1}
.pcarta .cella .sotto{font-size:.8rem;color:var(--testo2);font-weight:300}
.pcarta .cella.alta{min-height:clamp(160px,22vw,340px)}
.pcarta .cella.bassa{min-height:clamp(120px,15vw,220px)}
.pcarta .col > .cella:only-child{flex:1}

/* ============================================================ elementi === */
.scheda{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r);
  padding:clamp(16px,1.7vw,28px);margin-bottom:18px}
.scheda > h2,.scheda > h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aiuto{font-size:clamp(12.5px,1vw,15px);color:var(--testo3);margin:2px 0 16px;max-width:90ch;font-weight:300}
.griglia{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}

.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:22px}
@media(max-width:640px){.numeri{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.numero{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r);
  padding:18px 20px;min-width:0}
.numero .eti{font-size:.64rem;text-transform:uppercase;letter-spacing:.15em;color:var(--testo3);
  margin-bottom:8px;font-weight:500}
.numero .val{font-size:clamp(21px,2.1vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.05}
.numero .sotto{font-size:.8rem;color:var(--testo2);margin-top:6px;font-weight:300}
/* il numero forte va in sfumatura, ma solo se non ha già un colore suo
   (verde/rosso del margine): altrimenti la sfumatura coprirebbe il segnale */
.numero.forte .val:not([style]){background-image:var(--viva2);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@media(max-width:640px){.numero{padding:14px 15px}.numero .eti{font-size:.58rem}}
.asta{height:5px;border-radius:999px;background:var(--sf2);margin-top:12px;overflow:hidden}
.asta i{display:block;height:100%;border-radius:999px}

.bollo{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:500;
  white-space:nowrap;letter-spacing:.03em}
.bollo.b-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.bollo.b-att{background:color-mix(in srgb,var(--att) 18%,transparent);color:var(--att)}
.bollo.b-no{background:color-mix(in srgb,var(--no) 16%,transparent);color:var(--no)}
.bollo.b-neutro{background:var(--carta2);color:var(--testo2)}

button.b,.b{
  background:transparent;border:2px solid var(--bordo2);color:var(--testo);
  padding:10px 24px;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:500;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  text-transform:uppercase;letter-spacing:.14em;transition:background .2s,opacity .2s;
  font-family:inherit;
}
button.b:hover,.b:hover{background:color-mix(in srgb,var(--testo) 10%,transparent)}
button.b.pieno{
  background:var(--viva);border-color:transparent;color:#fff;
  outline:2px solid #fff;outline-offset:-3px;
  box-shadow:0 4px 4px rgba(181,1,167,.25), 4px 4px 12px #7721B1 inset;
  padding:12px 30px;
}
button.b.pieno:hover{opacity:.88;background:var(--viva)}
button.b.piano{border-color:transparent;background:transparent;color:var(--testo2)}
button.b.piccolo{padding:7px 15px;font-size:.7rem;border-width:1px}
button.b.rosso{color:var(--no);border-color:color-mix(in srgb,var(--no) 45%,transparent)}
button.b[disabled]{opacity:.4;cursor:not-allowed}
button.b:focus-visible,.b:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

input,select,textarea{
  background:var(--carta2);border:1px solid var(--bordo2);color:var(--testo);
  border-radius:14px;padding:10px 14px;font-size:.9rem;font-weight:300;outline:none;max-width:100%;
  font-family:inherit;
}
input:focus,select:focus,textarea:focus{border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc2);cursor:pointer}
input[type=color]{padding:2px;width:46px;height:36px}
option{background:var(--carta)}
label.campo{display:flex;flex-direction:column;gap:6px;font-size:.64rem;color:var(--testo3);
  text-transform:uppercase;letter-spacing:.14em;font-weight:500}
.riga{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.nota{background:var(--carta2);border:1px solid var(--bordo);border-radius:18px;padding:14px 18px;
  font-size:.87rem;color:var(--testo2);margin:12px 0;font-weight:300}
.nota.avviso{background:color-mix(in srgb,var(--att) 14%,transparent);color:var(--testo);border-color:transparent}
.vuoto{text-align:center;color:var(--testo3);padding:40px 18px;font-weight:300}

/* elenchi con la spunta e la croce */
.elenco{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.elenco li{display:flex;align-items:flex-start;gap:12px;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--r);
  padding:clamp(12px,.97vw,16px) clamp(14px,1.25vw,20px);font-weight:300}
.elenco li::before{content:"";width:clamp(16px,1.25vw,20px);height:clamp(16px,1.25vw,20px);
  flex:0 0 auto;margin-top:3px;background:no-repeat center/contain}
.elenco.si li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233ddc84'/%3E%3Cpath d='M5.6 10.3l2.9 2.9 5.9-6.1' fill='none' stroke='%230C0C0C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.elenco.no li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ff6b6b'/%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' fill='none' stroke='%230C0C0C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.elenco.no li{color:var(--testo3)}

/* tabelle */
.tab{overflow-x:auto;border-radius:20px;background:var(--carta2)}
table{border-collapse:collapse;width:100%;font-size:.86rem;font-weight:300}
th,td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--bordo);white-space:nowrap}
th{background:var(--carta);color:var(--testo3);font-size:.62rem;text-transform:uppercase;
  letter-spacing:.14em;font-weight:500;position:sticky;top:0;z-index:2}
th.sx,td.sx{text-align:left}
tbody tr:last-child td{border-bottom:0}
tr.tot td{font-weight:500;background:var(--carta);border-top:1px solid var(--bordo2)}
tr.sep td{background:var(--carta);font-weight:500;color:var(--testo2);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.12em}
tr.mia td{background:color-mix(in srgb,var(--acc) 10%,transparent)}
td input{width:106px;text-align:right;padding:7px 11px;font-size:.85rem;border-radius:11px}
td input.largo{width:100%;min-width:150px;text-align:left}
td input.mini{width:80px}
.punto{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}

/* grafici */
.tela{position:relative;width:100%}
canvas{width:100%;display:block}
.suggerimento{position:absolute;pointer-events:none;background:var(--carta2);border:1px solid var(--bordo2);
  border-radius:14px;padding:10px 14px;font-size:.78rem;box-shadow:var(--ombra2);opacity:0;
  transition:opacity .12s;z-index:20;white-space:nowrap;color:var(--testo);font-weight:300}
.suggerimento b{display:block;margin-bottom:4px;color:var(--acc);font-size:.76rem;font-weight:500}
.suggerimento i.q{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}
.legenda{display:flex;gap:16px;flex-wrap:wrap;font-size:.72rem;color:var(--testo2);margin-top:12px;
  justify-content:center;text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.legenda i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:middle}

/* ============================================================== accesso == */
#accesso{display:flex;flex-direction:column;justify-content:center;align-items:center;
  min-height:100vh;padding:clamp(16px,3vw,40px);background:var(--sf);overflow:clip}
#accesso .titolone{
  font-size:min(16vw,120px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.86;text-align:center;margin:0 0 clamp(18px,3vw,34px);white-space:nowrap;
  background-image:var(--sfumatura);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
#accesso .riquadro{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--rG);
  text-align:center;padding:clamp(26px,3vw,42px) clamp(20px,2.5vw,36px);width:100%;max-width:440px}
#accesso .sigla{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;margin:0 auto 20px;
  background:var(--viva);color:#fff;font-size:26px}
#accesso h1{margin-bottom:10px;font-size:clamp(19px,2vw,26px);letter-spacing:.04em}
#accesso p{color:var(--testo3);font-size:.9rem;margin:0 0 24px;font-weight:300}
#accesso input{width:100%;font-size:1.35rem;text-align:center;letter-spacing:.24em;font-weight:500;
  padding:15px 10px;text-transform:uppercase;border-radius:18px}
#accesso button{width:100%;margin-top:16px;padding:15px;font-size:.82rem;justify-content:center}
#accesso .msg{min-height:1.3em;margin-top:14px;text-align:center;font-size:.85rem;font-weight:300}
#accesso .coda{margin-top:22px;text-align:center;color:var(--testo3);font-size:.74rem;line-height:1.8;font-weight:300}

/* messaggini in basso a destra */
#avvisi{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:9px}
@media(max-width:900px){#avvisi{bottom:88px;left:15px;right:15px}}
/* il colore del testo segue la carta, non è fisso bianco: al chiaro il fondo
   diventa scuro e un bianco fisso sparirebbe */
.avviso{background:var(--testo);color:var(--sf);padding:13px 20px;border-radius:999px;font-size:.8rem;
  font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  box-shadow:var(--ombra2);animation:su .18s ease-out}
.avviso.male{background:var(--no);color:#0C0C0C}
.avviso.bene{background:var(--ok);color:#0C0C0C}
@keyframes su{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* finestrella */
#velo{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:150;display:grid;place-items:center;padding:18px;
  backdrop-filter:blur(4px)}
#velo .finestra{background:var(--carta);border:1px solid var(--bordo2);border-radius:var(--rG);
  padding:clamp(20px,2.2vw,32px);width:100%;max-width:580px;max-height:86vh;overflow:auto;box-shadow:var(--ombra2)}

.caricamento{padding:70px 20px;text-align:center;color:var(--testo3);font-weight:300;
  text-transform:uppercase;letter-spacing:.16em;font-size:.78rem}
.caricamento::after{content:"";display:block;width:26px;height:26px;margin:18px auto 0;
  border:3px solid var(--bordo);border-top-color:var(--acc2);border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

@media print{
  aside,header.barra,nav.basso,.nostampa,.eroe .figura,.striscia,.racconto .deco{display:none!important}
  body{background:#fff;color:#000}
  main{padding:0;max-width:none}
  .scheda,.numero,.pcarta{box-shadow:none;break-inside:avoid;position:static}
  .ribalta,.impila{margin:0;padding:0;background:#fff;color:#000}
}