/* Le regole di stile del radar MIAT (ticket 043). Una fonte sola: la pagina del brief le carica da qui
   (/stile/radar.css, servito dal Worker senza password), e mail/genera.py legge i valori di :root per la mail.
   Nate dal design approvato il 2026-09-26: specifications/preheat/043-design/mix/stili_mix.py (con BASE e RALEWAY
   di ../varianti/stili.py). Ogni colore viene da pagina/stile-miat.md; nessuno è inventato. Un colore con
   trasparenza è uno di questi, scritto rgba() con gli stessi tre numeri.
   Telefono: sotto i 760 pixel. Senza movimento: il blocco prefers-reduced-motion in fondo. */

:root {
  --viola: #3E3586;        /* Viola MIAT, linee guida §2 */
  --fucsia: #B4078D;       /* Fucsia MIAT, linee guida §2 */
  --viola-mezzo: #6C2389;  /* il colore di mezzo del gradiente, linee guida §2 */
  --bianco: #FFFFFF;       /* linee guida §2 */
  --nero: #000000;         /* linee guida §2 */
  --grigio: #595959;       /* grigio corpo, linee guida §2 */
  --verde: #17744A;        /* Useful e Saved: aggiunto da Alessandro il 24/09 per il radar, fuori dal marchio */
  --rosso: #B3261E;        /* Not useful e gli errori: aggiunto da Alessandro il 24/09, fuori dal marchio */
  --carattere: Raleway, "Avenir Next", Helvetica, Arial, sans-serif; /* Raleway, poi Avenir Next (24/09), scelta 15 */
  --sfumata: linear-gradient(135deg, var(--fucsia), var(--viola));   /* il gradiente, stile-miat.md */
  --entra: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

@font-face { font-family: Raleway; src: url(/stile/Raleway-VariableFont_wght.ttf) format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: Raleway; src: url(/stile/Raleway-Italic-VariableFont_wght.ttf) format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---- la base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { position: relative; margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--viola); color: var(--bianco); font: 16px/1.5 var(--carattere); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
h1, h2, h3, p, dl, dd, blockquote, figure { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, textarea { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fucsia); outline-offset: 3px; }
.nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pagina[hidden] { display: none; }
.pagina > h1:focus, .pagina :focus:not(:focus-visible) { outline: none; }

/* le immagini del marchio: sfondi serviti da /stile/, mai <img> nella pagina del brief */
.img-marchio { display: block; aspect-ratio: 547 / 536; background: url(/stile/MARCHIO_MIAT_NEG.png) center / contain no-repeat; }
.img-logo { display: block; aspect-ratio: 1000 / 699; background: url(/stile/Logo_MIAT_NEG_lands.png) center / contain no-repeat; }

/* le parole del marchio: titolo sottile maiuscolo, sottotitolo forte maiuscolo, il filo */
.t-luce { display: block; font-weight: 300; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.t-forte { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.filo { display: block; width: 120px; height: 2px; background: currentColor; margin: 22px 0; }
.etich-m { font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: 13.5px; }

/* ---- le animazioni ---- */
@keyframes entra { from { opacity: 0; filter: blur(12px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 50px) scale(1.12); } 100% { transform: translate(-50px, 80px) scale(.94); } }
@keyframes bordo { to { --a: 360deg; } }
@keyframes foglio { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes anello { from { stroke-dashoffset: 264; } }
@keyframes gira { to { transform: rotate(1turn); } }
@keyframes ping { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes ping-marchio { 0% { transform: scale(.66); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes corona { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes traccia { to { stroke-dashoffset: 0; } }
@keyframes onda-clic { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes logo-entra { from { opacity: 0; filter: blur(16px); transform: scale(.82); } to { opacity: 1; filter: none; transform: none; } }
@keyframes esce { to { opacity: 0; visibility: hidden; } }
@keyframes chiudi-1 { from { opacity: 0; transform: rotate(-150deg) scale(2); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes chiudi-2 { from { opacity: 0; transform: rotate(150deg) scale(2); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes chiudi-3 { from { opacity: 0; transform: rotate(-110deg) scale(2.3); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }

/* ---- la notte: l'aurora, il vetro, il radar, il bordo che si accende ---- */
.aurora { position: absolute; left: 0; right: 0; top: 0; height: 760px; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .55; animation: deriva 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 720px; height: 500px; background: var(--fucsia); left: -260px; top: -270px; }
.aurora i:nth-child(2) { width: 580px; height: 580px; background: var(--viola-mezzo); right: -220px; top: -20px; animation-duration: 23s; }
.aurora i:nth-child(3) { width: 500px; height: 380px; background: var(--fucsia); left: 42%; top: 400px; opacity: .26; animation-duration: 27s; }
.vetro { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.radar { position: absolute; left: 50%; top: 50%; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, rgba(255, 255, 255, .24) 0 1px, transparent 1.5px 55px), repeating-conic-gradient(rgba(255, 255, 255, .13) 0 .5deg, transparent .8deg 30deg); -webkit-mask: radial-gradient(circle, #000 45%, transparent 70%); mask: radial-gradient(circle, #000 45%, transparent 70%); }
.radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(180, 7, 141, 0) 0deg, rgba(180, 7, 141, 0) 250deg, rgba(180, 7, 141, .7) 345deg, rgba(255, 255, 255, .9) 359deg, rgba(180, 7, 141, 0) 360deg); animation: gira 6s linear infinite; }
.radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65); animation: ping 3s ease-out infinite; }
.bagliore::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--a), transparent 0 55%, #fff 72%, var(--fucsia) 84%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; animation: bordo 4s linear infinite; pointer-events: none; }
.bagliore:hover::before { opacity: 1; }
.voce.bagliore::before { padding: 2px; background: conic-gradient(from var(--a), transparent 0 55%, var(--fucsia) 74%, var(--viola) 88%, transparent 100%); }

/* ---- i bottoni ---- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; }
.bottone.pieno { background: var(--sfumata); color: var(--bianco); box-shadow: 0 8px 24px rgba(180, 7, 141, .28); }
.bottone.pieno:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(180, 7, 141, .38); }
.bottone.linea { background: var(--bianco); color: var(--viola); box-shadow: inset 0 0 0 2px var(--viola); }
.bottone.linea:hover { background: rgba(62, 53, 134, .06); }
.bottone:disabled { cursor: progress; opacity: .7; }

/* ---- la cornice sul computer: la colonna dei fronti ---- */
.guscio { position: relative; z-index: 1; display: grid; grid-template-columns: 248px minmax(0, 1fr); animation: entra .9s 2.05s var(--entra) both; }
.binario { position: sticky; top: 0; z-index: 3; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 26px 14px 26px 18px; }
.bin-logo { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 8px 24px; text-decoration: none; color: var(--bianco); }
.bin-logo .img-marchio { width: 54px; filter: drop-shadow(0 6px 18px rgba(180, 7, 141, .5)); }
.bin-logo span:last-child { font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: 14px; line-height: 1.25; }
.bin-voce { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px 0 14px; border-radius: 14px; text-decoration: none; color: var(--bianco); font-weight: 600; transition: transform .2s, color .3s; }
.bin-voce::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .1); opacity: 0; transition: opacity .25s; }
.bin-voce:hover::before { opacity: 1; }
.bin-voce:hover { transform: translateX(3px); }
.bin-voce .ico { color: rgba(255, 255, 255, .85); }
.bin-voce b { margin-left: auto; min-width: 26px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); text-align: center; font-size: 12.5px; font-weight: 800; }
.bin-voce[aria-current="page"] { background: var(--bianco); color: var(--viola); box-shadow: 0 10px 26px rgba(180, 7, 141, .4); }
.bin-voce[aria-current="page"]::before { display: none; }
.bin-voce[aria-current="page"] .ico { color: var(--fucsia); }
.bin-voce[aria-current="page"] b { background: rgba(62, 53, 134, .1); }
.bin-sep { height: 1px; background: rgba(255, 255, 255, .16); margin: 10px 8px; }
.binario :focus-visible, .dock :focus-visible, .barra :focus-visible, .conto:focus-visible, .mancato :focus-visible, .accesso :focus-visible, .piede :focus-visible { outline-color: var(--bianco); }

/* ---- il foglio bianco, dove sta il contenuto ---- */
.lato { position: relative; min-width: 0; }
.testata, .eroe, .conti, .piede { position: relative; z-index: 1; }
.foglio-bianco { position: relative; z-index: 1; background: var(--bianco); color: var(--nero); border-radius: 36px 0 0 36px; padding: 8px 0 72px; box-shadow: 0 -24px 60px rgba(0, 0, 0, .28); animation: foglio .9s .1s var(--entra) both; }
.foglio-bianco h1, .foglio-bianco h2, .foglio-bianco h3 { color: var(--viola); }
.piede { overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 40px 56px 44px; }
.piede .img-logo { position: relative; width: 190px; }
.piede .etich-m { position: relative; }

/* ---- il riassunto: il radar con il marchio, i conti nel vetro ---- */
.eroe { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: center; padding: 40px 56px 8px; overflow-x: clip; }  /* il fascio del radar gira: i suoi angoli, già trasparenti, non allargano la pagina */
.eroe-testo { animation: entra .9s 2.1s var(--entra) both; }
.eroe .t-luce { font-size: 72px; }
.eroe .t-luce b { font-weight: 800; }
.eroe .t-forte { font-size: 18px; margin-top: 14px; }
.eroe .filo { margin: 20px 0; }
.saluto { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .94); max-width: 34em; }
.radar-box { position: relative; height: 300px; }
.radar-box .radar { width: 300px; height: 300px; margin: -150px 0 0 -150px; }
.radar-box .img-marchio { position: absolute; left: 50%; top: 50%; width: 112px; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 30px rgba(180, 7, 141, .65)); }
.conti { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 28px 56px 40px; }
.conto { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 150px; padding: 18px 14px; border-radius: 22px; text-decoration: none; color: var(--bianco); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .3s; animation: entra .8s 2.2s var(--entra) both; }
.conto:nth-child(2) { animation-delay: 2.25s; } .conto:nth-child(3) { animation-delay: 2.3s; } .conto:nth-child(4) { animation-delay: 2.35s; } .conto:nth-child(5) { animation-delay: 2.4s; } .conto:nth-child(6) { animation-delay: 2.45s; }
.conto:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .14); }
.conto .num { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.conto .etich-m { margin-top: 8px; font-size: 12px; letter-spacing: .06em; }
.conto .nota { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .92); }

/* ---- i blocchi dei fronti, sul bianco ---- */
.blocchi { display: flex; flex-direction: column; gap: 56px; padding: 56px 56px 0; }
.blocco { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.blocco > * { grid-column: 1 / -1; }
.blocco > .blocco-testa { grid-column: 1; grid-row: 1; }
.blocco > .bottone { grid-column: 2; grid-row: 1; }
.blocco-testa { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.blocco-testa h2 { font-size: 34px; font-weight: 300; text-transform: uppercase; letter-spacing: .03em; line-height: 1; }
.blocco-riga { font-size: 15px; color: var(--grigio); }
.blocco .filo { color: var(--viola); margin: 16px 0 6px; }
.righe li { border-bottom: 1px solid rgba(62, 53, 134, .12); }
.riga { display: grid; grid-template-columns: 170px minmax(0, 1fr) 24px; gap: 20px; align-items: start; padding: 18px 14px; margin: 0 -14px; border-radius: 16px; text-decoration: none; color: var(--nero); transition: background .2s; }
.riga:hover { background: rgba(62, 53, 134, .05); }
.riga .id { font-size: 13px; font-weight: 600; color: var(--grigio); padding-top: 4px; overflow-wrap: anywhere; }
.riga .t { display: block; font-weight: 700; font-size: 18px; line-height: 1.35; }
.riga .f { display: block; font-size: 15.5px; line-height: 1.5; color: var(--grigio); margin-top: 4px; }
.riga .ico { color: var(--fucsia); margin-top: 3px; transition: transform .2s; }
.riga:hover .ico { transform: translateX(5px); }
.prossima { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 18px; padding: 24px 28px; border-radius: 24px; background: rgba(62, 53, 134, .06); }
.prossima .t { font-weight: 700; font-size: 18px; line-height: 1.35; }
.prossima .riga-chip { margin-top: 8px; }

/* l'anello dei giorni: pieno a 90 */
.anello { position: relative; width: 120px; height: 120px; flex: none; border-radius: 50%; background: var(--bianco); }
.anello svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anello circle { fill: none; stroke-width: 9; }
.anello .fondo-a { stroke: rgba(62, 53, 134, .12); }
.anello .pieno-a { stroke: var(--fucsia); stroke-linecap: round; stroke-dasharray: 264; animation: anello 1.4s .3s cubic-bezier(.2, .8, .2, 1) both; }
.anello .dentro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--viola); }
.anello .dentro b { font-size: 36px; font-weight: 800; line-height: 1; }
.anello .dentro span { margin-top: 4px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }

/* ---- la testata di una pagina ---- */
.testata { overflow: hidden; padding: 52px 56px 60px; }
.testata h1 { position: relative; animation: entra .9s var(--entra) both; }
.testata .t-luce { font-size: 64px; }
.testata .t-forte { font-size: 15px; margin-top: 14px; }

/* ---- le voci ---- */
.voci { display: flex; flex-direction: column; gap: 26px; padding: 48px 56px 0; max-width: 1000px; }
.voce { position: relative; padding: 32px 36px 28px; border-radius: 26px; background: var(--bianco); box-shadow: 0 0 0 1px rgba(62, 53, 134, .14), 0 14px 34px rgba(62, 53, 134, .08); animation: entra .8s var(--entra) both; scroll-margin-top: 24px; }
.voce:nth-child(2) { animation-delay: .08s; } .voce:nth-child(3) { animation-delay: .16s; }
.voce:target { box-shadow: 0 0 0 3px var(--fucsia), 0 14px 34px rgba(62, 53, 134, .08); }
.voce-sopra { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(62, 53, 134, .08); color: var(--viola); font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.chip.giorni { background: var(--sfumata); color: var(--bianco); }
.soglia, .scad-voce strong, .riga-chip strong, .linea-tempo td strong { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(179, 38, 30, .1); color: var(--rosso); font-weight: 700; font-size: 13px; }
.voce h2 { font-size: 28px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.voce-titolo .chip { display: flex; width: max-content; max-width: 100%; margin-bottom: 14px; }
.voce-titolo .tit { display: block; }
.lab { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--viola); }
.accaduto { font-size: 18px; line-height: 1.6; margin-top: 16px; overflow-wrap: anywhere; }
.accaduto .lab, .cit .lab { display: block; margin-bottom: 4px; }
.cit { position: relative; margin-top: 22px; padding: 6px 0 0 66px; font-size: 18px; line-height: 1.6; font-style: italic; color: var(--viola); overflow-wrap: anywhere; }
.cit .lab { font-style: normal; }
.cit::before { content: "\201C"; position: absolute; left: 0; top: -20px; font-size: 100px; font-weight: 800; font-style: normal; line-height: 1; background: var(--sfumata); -webkit-background-clip: text; background-clip: text; color: transparent; }
.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; margin-top: 28px; }
.campi dt { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--viola); margin-bottom: 4px; }
.campi dd { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.segno { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--bianco); }
.segno.minaccia { background: var(--rosso); } .segno.opportunita { background: var(--verde); }
.url { color: var(--fucsia); font-weight: 600; overflow-wrap: anywhere; }
.nota { margin-top: 16px; font-size: 15px; color: var(--grigio); overflow-wrap: anywhere; }
.nota strong { color: var(--nero); }
.scad-voce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--grigio); }
.prima-dopo { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 12px; margin-top: 22px; }
.pd { padding: 18px 20px; border-radius: 18px; background: rgba(62, 53, 134, .05); font-size: 17px; line-height: 1.5; font-style: italic; color: var(--grigio); overflow-wrap: anywhere; }
.pd.prima { order: 1; }
.pd-freccia { order: 2; display: flex; align-items: center; justify-content: center; color: var(--fucsia); }
.pd.ora { order: 3; background: var(--bianco); box-shadow: inset 0 0 0 2px var(--fucsia); color: var(--viola); }
.pd::before { display: block; margin-bottom: 6px; font-style: normal; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--viola); }
.pd.prima::before { content: "Before"; }
.pd.ora::before { content: "Now"; color: var(--fucsia); }
.pd.vuoto { font-style: normal; }
.prima-dopo > .lab { grid-column: 1 / -1; order: 0; }
.dettagli { margin-top: 18px; border-radius: 18px; background: rgba(62, 53, 134, .05); }
.dettagli summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; cursor: pointer; font-weight: 700; color: var(--viola); list-style: none; }
.dettagli summary::-webkit-details-marker { display: none; }
.dettagli summary .ico { transition: transform .25s; }
.dettagli[open] summary .ico { transform: rotate(180deg); }
.dettagli pre { margin: 0; padding: 4px 20px 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14.5px; line-height: 1.6; color: var(--nero); }
.gruppo { display: flex; align-items: center; gap: 16px; margin-top: 12px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--viola); }
.gruppo::after { content: ""; flex: 1; height: 1px; background: rgba(62, 53, 134, .2); }
.altre > summary { list-style: none; width: max-content; max-width: 100%; }
.altre > summary::-webkit-details-marker { display: none; }
.altre[open] > summary .ico { transform: rotate(180deg); }
.voci-altre { display: flex; flex-direction: column; gap: 26px; margin-top: 26px; }

/* le marcature: il contorno quando sono spente, pieno quando sono premute */
.marcature { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(62, 53, 134, .12); }
.marcature button { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: 999px; background: var(--bianco); font-weight: 700; font-size: 16px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s, transform .15s; }
.marcature [data-mark="useful"] { color: var(--verde); box-shadow: inset 0 0 0 2px var(--verde); }
.marcature [data-mark="not-useful"] { color: var(--rosso); box-shadow: inset 0 0 0 2px var(--rosso); }
.marcature button:hover { transform: translateY(-1px); }
.marcature button:active { transform: scale(.96); }
.marcature button:disabled { cursor: progress; }
.marcature [data-mark="useful"][aria-pressed="true"] { background: var(--verde); color: var(--bianco); box-shadow: 0 8px 22px rgba(23, 116, 74, .4); }
.marcature [data-mark="not-useful"][aria-pressed="true"] { background: var(--rosso); color: var(--bianco); box-shadow: 0 8px 22px rgba(179, 38, 30, .4); }
.segna path { stroke-dasharray: 40; stroke-dashoffset: 0; }
[aria-pressed="true"] .segna path { stroke-dashoffset: 40; animation: traccia .5s .05s ease-out forwards; }
.marcature [aria-pressed="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: onda-clic .6s ease-out forwards; }
.marcature [data-mark="useful"][aria-pressed="true"]::after { box-shadow: 0 0 0 2px var(--verde); }
.marcature [data-mark="not-useful"][aria-pressed="true"]::after { box-shadow: 0 0 0 2px var(--rosso); }
.esito { flex-basis: 100%; display: flex; align-items: center; gap: 8px; color: var(--rosso); font-weight: 700; animation: entra .4s both; }

/* «Did the radar miss»: un'isola di notte dentro il foglio bianco */
.mancato { position: relative; overflow: hidden; margin: 44px 56px 0; max-width: 888px; padding: 32px 36px; border-radius: 26px; background: var(--viola); color: var(--bianco); }
.mancato::before { content: ""; position: absolute; right: -120px; top: -170px; width: 440px; height: 330px; border-radius: 50%; background: var(--fucsia); filter: blur(80px); opacity: .55; pointer-events: none; }
.mancato > * { position: relative; }
.foglio-bianco .mancato h2 { color: var(--bianco); font-size: 22px; font-weight: 700; }
.mancato .suggerimento { margin: 6px 0 18px; color: rgba(255, 255, 255, .92); }
.mancato-campo { display: flex; gap: 12px; flex-wrap: wrap; }
.mancato textarea { flex: 1 1 240px; min-height: 52px; height: 52px; padding: 14px 18px; border: 0; border-radius: 14px; resize: none; overflow: hidden; white-space: nowrap; font-size: 16px; line-height: 24px; background: rgba(0, 0, 0, .2); color: var(--bianco); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); transition: box-shadow .2s; }
.mancato textarea::placeholder { color: rgba(255, 255, 255, .8); }
.mancato textarea:focus { box-shadow: inset 0 0 0 2px var(--bianco), 0 0 0 5px rgba(180, 7, 141, .55); }
.mancato .bottone.pieno { background: var(--bianco); color: var(--viola); box-shadow: 0 10px 30px rgba(180, 7, 141, .35); }
.mancato .risposta:empty { display: none; }
.mancato .risposta { display: inline-flex; align-items: center; min-height: 36px; margin-top: 14px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--bianco); background: var(--rosso); animation: entra .4s both; }
.mancato .risposta.salvato { background: var(--verde); }
.dopo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 40px 56px 0; max-width: 1000px; }

/* ---- le scadenze: la tabella del brief, letta come una linea del tempo ---- */
.scad-intro { padding: 44px 56px 0; max-width: 1000px; font-size: 17px; line-height: 1.65; color: var(--grigio); }
.linea-tempo { padding: 36px 56px 0; max-width: 1000px; }
.linea-tempo table, .linea-tempo tbody { display: block; }
.linea-tempo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linea-tempo tr { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 32px; align-items: start; padding-bottom: 26px; animation: entra .8s var(--entra) both; }
.linea-tempo tr:nth-child(2) { animation-delay: .08s; } .linea-tempo tr:nth-child(3) { animation-delay: .16s; } .linea-tempo tr:nth-child(4) { animation-delay: .24s; }
.linea-tempo tr:not(:last-child)::before { content: ""; position: absolute; left: 58.5px; top: 120px; bottom: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--fucsia), var(--viola)); }
.linea-tempo td { display: block; grid-column: 2; padding: 0 28px; background: var(--bianco); box-shadow: -1px 0 0 rgba(62, 53, 134, .14), 1px 0 0 rgba(62, 53, 134, .14); font-size: 15.5px; color: var(--grigio); overflow-wrap: anywhere; }
.linea-tempo td.c-days-left { grid-column: 1; grid-row: 1 / span 8; padding: 0; background: none; box-shadow: none; }
.linea-tempo td.c-deadline { grid-row: 1; padding-top: 24px; border-radius: 22px 22px 0 0; box-shadow: -1px 0 0 rgba(62, 53, 134, .14), 1px 0 0 rgba(62, 53, 134, .14), 0 -1px 0 rgba(62, 53, 134, .14); }
.linea-tempo td.c-as-the-source-says-it { padding-bottom: 24px; border-radius: 0 0 22px 22px; box-shadow: -1px 0 0 rgba(62, 53, 134, .14), 1px 0 0 rgba(62, 53, 134, .14), 0 1px 0 rgba(62, 53, 134, .14), 0 12px 30px rgba(62, 53, 134, .08); }
.linea-tempo td.c-deadline, .linea-tempo td.c-start-by, .linea-tempo td.c-front { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.linea-tempo td.c-deadline { grid-row: 1; }
.linea-tempo td.c-start-by, .linea-tempo td.c-front { padding-top: 8px; }
.linea-tempo td.c-title { padding-top: 12px; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--viola); }
.linea-tempo td.c-link, .linea-tempo td.c-key { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0; padding-top: 6px; }
.linea-tempo td.c-as-the-source-says-it { padding-top: 6px; }
.linea-tempo td[data-lab]::before { content: attr(data-lab); margin-right: 8px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--viola); }
.linea-tempo a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fucsia); font-weight: 600; overflow-wrap: anywhere; }
.scad-voce .dice { flex-basis: 100%; overflow-wrap: anywhere; }
.tabella { overflow-x: auto; }
.tabella table { border-collapse: collapse; font-size: 14px; }
.tabella th, .tabella td { border: 1px solid rgba(62, 53, 134, .2); padding: 6px 8px; text-align: left; vertical-align: top; }
.nota p, .nota ul, .scad-intro p, .scad-intro ul { margin: 0 0 8px; }
.scad-intro pre, .nota pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 14.5px; }
.linea-tempo td.c-deadline .valore { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--sfumata); color: var(--bianco); font-weight: 700; font-size: 13px; }
.riga-chip { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- l'accesso e le pagine dei messaggi: notte, il radar che parte dal marchio, i petali dal bordo ---- */
.accesso { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 48px 0; }
.accesso .aurora { height: 100%; }
.deco { position: absolute; pointer-events: none; }
.deco.corona { z-index: 3; width: 420px; aspect-ratio: 1; left: 50%; margin-left: -210px; top: -92px; background: url(/stile/Petali_top.png) center / contain no-repeat; animation: corona 1.1s cubic-bezier(.2, .8, .2, 1) both; }
.accesso-centro { position: relative; z-index: 2; width: 100%; max-width: 420px; padding: 0 20px; display: flex; flex-direction: column; align-items: center; text-align: center; animation: entra .9s var(--entra) both; }
.logo-box { position: relative; isolation: isolate; display: flex; justify-content: center; }
.logo-box .img-marchio { position: relative; z-index: 1; width: 150px; filter: drop-shadow(0 8px 30px rgba(180, 7, 141, .6)); }
.logo-box .radar { z-index: -1; width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: .55; }
.logo-box .radar::before { animation-duration: 9s; }
.ping { position: absolute; left: 50%; top: 50%; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); opacity: 0; pointer-events: none; }
.logo-box .ping { width: 230px; height: 230px; margin: -115px 0 0 -115px; animation: ping-marchio 4s ease-out infinite; }
.logo-box .ping.due { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); animation-delay: 2s; }
.accesso-centro h1 { margin-top: 26px; color: var(--bianco); }
.accesso-centro .t-forte { font-size: 14px; }
.accesso-centro .filo { margin: 18px auto 24px; width: 72px; color: var(--bianco); }
.carta { width: 100%; padding: 26px 26px 24px; border-radius: 28px; background: var(--bianco); color: var(--nero); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.carta form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.carta label { font-weight: 700; font-size: 15px; color: var(--viola); }
.carta input { width: 100%; min-height: 56px; padding: 0 18px; border-radius: 14px; border: 2px solid var(--viola); background: var(--bianco); color: var(--nero); font: inherit; font-size: 18px; transition: box-shadow .2s; }
.carta input:focus { box-shadow: 0 0 0 4px rgba(180, 7, 141, .25); }
.carta .bottone { width: 100%; min-height: 56px; font-size: 17px; margin-top: 6px; }
.carta :focus-visible { outline-color: var(--fucsia); }
.errore { display: flex; align-items: center; gap: 8px; color: var(--rosso); font-weight: 700; font-size: 15px; animation: entra .4s both; }
.messaggio { font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--bianco); }
.messaggio-sotto { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .92); margin-top: 10px; }

/* ---- la pagina impostazioni (030): la tavola Settings del mix, senza la colonna dei fronti ----
   Dalla tavola approvata (specifications/preheat/043-design/mix/stili_mix.py, «le impostazioni»), con i colori
   scritti come variabili di :root. */
.solo { position: relative; z-index: 1; }
.solo .testata { padding-left: 96px; }
.solo .foglio-bianco { margin: 0 40px; border-radius: 36px 36px 0 0; }
.imp { padding: 40px 56px 0; max-width: 1080px; }
.imp .scad-intro { padding: 0 0 12px; }
.imp .errore { margin: 8px 0 4px; }
.cadenza { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 28px; align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(62, 53, 134, .12); }
.cadenza .etich-m { color: var(--viola); font-size: 15px; }
.cadenza .aiuto { grid-column: 2; font-size: 14px; color: var(--grigio); }
.scelte { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(62, 53, 134, .07); width: max-content; max-width: 100%; }
.scelte label { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background .25s, color .25s; }
.scelte input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scelte label:has(input:checked) { background: var(--sfumata); color: var(--bianco); box-shadow: 0 6px 16px rgba(62, 53, 134, .25); }
.scelte label:has(input:focus-visible) { outline: 3px solid var(--fucsia); outline-offset: 2px; }
.salva { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }
.fatto-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--verde); font-weight: 700; animation: entra .4s both; }

/* ---- le categorie del fronte news (031), sotto le cadenze: gli stessi pezzi della pagina, nessun colore nuovo ---- */
.imp h2 { font-size: 24px; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.categorie { padding-top: 64px; }
.categorie .errore, .categorie .fatto-ok { margin: 8px 0 4px; }
.elenco-cat { margin-top: 10px; border-top: 1px solid rgba(62, 53, 134, .12); }
.categoria { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(62, 53, 134, .12); }
.cat-n { align-self: start; padding-top: 1px; font-weight: 800; font-size: 15px; color: var(--viola); }
.cat-nome { display: block; font-size: 16.5px; color: var(--viola); overflow-wrap: anywhere; }
.cat-cosa { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--grigio); overflow-wrap: anywhere; }
.categoria .bottone { min-height: 44px; padding: 0 20px; font-size: 15px; }
.aggiungi { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-top: 34px; }
.aggiungi h3 { font-size: 19px; font-weight: 800; }
.aggiungi label { font-weight: 700; font-size: 15px; color: var(--viola); }
.aggiungi input, .aggiungi textarea { width: 100%; min-height: 56px; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--viola); background: var(--bianco); color: var(--nero); font: inherit; font-size: 17px; line-height: 1.45; }
.aggiungi textarea { min-height: 120px; resize: vertical; }
.aggiungi input:focus, .aggiungi textarea:focus { box-shadow: 0 0 0 4px rgba(180, 7, 141, .25); }
.aggiungi .bottone { align-self: flex-start; margin-top: 8px; }

/* ---- il registro competitor (032), sotto le categorie: gli stessi pezzi, nessun colore nuovo ---- */
.competitor { padding-top: 64px; }
.competitor .errore, .competitor .fatto-ok { margin: 8px 0 4px; }
.competitor h3 { font-size: 19px; font-weight: 800; margin-top: 30px; }
.conta-comp { margin: 6px 0 4px; font-size: 17px; font-weight: 800; color: var(--viola); }
.sopra-comp { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 10px 0 4px; padding: 10px 18px; border-radius: 18px; background: rgba(62, 53, 134, .07); font-weight: 700; color: var(--viola); }
.elenco-comp { margin-top: 10px; border-top: 1px solid rgba(62, 53, 134, .12); }
.comp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(62, 53, 134, .12); }
.comp-nome { display: block; font-size: 16.5px; color: var(--viola); overflow-wrap: anywhere; }
.comp-info { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--grigio); overflow-wrap: anywhere; }
.comp .bottone { min-height: 44px; padding: 0 20px; font-size: 15px; }
.nota-comp { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--grigio); overflow-wrap: anywhere; }
.aggiungi .casella { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.aggiungi .casella input { width: 24px; height: 24px; min-height: 0; padding: 0; flex: none; accent-color: var(--viola); }
/* il campo data ha più fermate del Tab dentro di sé: dopo giorno, mese e anno ce n'è una in cui il campo resta l'elemento
   attivo ma non è più :focus, solo :focus-within (misurato in Chrome il 29/09). Senza questa riga lì non c'è contorno */
.aggiungi input[type="date"]:focus-within { outline: 3px solid var(--fucsia); outline-offset: 3px; }

/* ---- i due secondi dopo la password: il radar fa un giro, i petali si chiudono intorno al marchio ---- */
.splash { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--viola); animation: esce .8s 2s ease both; }
.splash .aurora { height: 100%; }
.splash > .radar { width: 820px; height: 820px; margin: -410px 0 0 -410px; }
.splash > .radar::before { animation: gira 2s cubic-bezier(.45, 0, .25, 1) both; }
.splash > .radar::after { animation: ping 1.1s .2s ease-out 2 both; }
.orbita { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; pointer-events: none; }
.orbita i { position: absolute; inset: 0; opacity: 0; background: center / contain no-repeat; }
.orbita i:nth-child(1) { background-image: url(/stile/Petali_top.png); animation: chiudi-1 1.6s cubic-bezier(.2, .8, .2, 1) both; }
.orbita i:nth-child(2) { background-image: url(/stile/Petali_left.png); animation: chiudi-2 1.6s .08s cubic-bezier(.2, .8, .2, 1) both; }
.orbita i:nth-child(3) { background-image: url(/stile/Petali_down.png); animation: chiudi-3 1.6s .16s cubic-bezier(.2, .8, .2, 1) both; }
.splash .img-marchio { position: relative; width: 190px; filter: drop-shadow(0 8px 30px rgba(180, 7, 141, .6)); animation: logo-entra 1s .55s var(--entra) both; }
.splash-data { position: absolute; left: 0; right: 0; top: calc(50% + 150px); text-align: center; font-size: 15px; }
.parola { display: inline-block; animation: entra .7s 1s var(--entra) both; }
.parola:nth-child(2) { animation-delay: 1.09s; } .parola:nth-child(3) { animation-delay: 1.18s; } .parola:nth-child(4) { animation-delay: 1.27s; }

/* ---- la barra e il dock: solo sul telefono ---- */
.barra, .dock { display: none; }
/* La barra non ha un fondo suo: le luci passano dietro e barra e testata sono un pezzo solo (Alessandro, 26/09).
   Scorre via con la pagina: sopra il foglio bianco il marchio bianco non si leggerebbe. Per spostarsi c'è il dock. */
.barra { position: relative; z-index: 2; align-items: center; padding: 6px 16px; }
.barra-marca { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; color: var(--bianco); }
.barra .img-marchio { width: 38px; }
.barra-nome { font-weight: 800; text-transform: uppercase; letter-spacing: .09em; font-size: 12.5px; line-height: 1.25; }
.barra-nome small { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .9); font-size: 13px; }
.dock { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 20; justify-content: space-between; padding: 6px; border-radius: 24px; background: rgba(62, 53, 134, .84); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 18px 40px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); animation: entra .9s 2.05s var(--entra) both; }
.dock a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 16px; color: var(--bianco); transition: transform .2s, background .2s; }
.dock a:hover { transform: translateY(-4px) scale(1.12); background: rgba(255, 255, 255, .12); }
.dock a[aria-current="page"] { background: var(--bianco); color: var(--fucsia); }

/* ---- fra il telefono e il computer ---- */
@media (max-width: 1100px) {
  .conti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eroe { grid-template-columns: minmax(0, 1fr) 220px; }
  .radar-box { height: 220px; }
  .radar-box .radar { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .campi { grid-template-columns: 1fr; }
}

/* ---- il telefono ---- */
@media (max-width: 760px) {
  .guscio { display: block; }
  .binario { display: none; }
  .barra { display: flex; }
  .dock { display: flex; }
  .piede { padding-bottom: 112px; }
  .aurora i:nth-child(1) { width: 400px; height: 300px; left: -170px; top: -150px; }
  .aurora i:nth-child(2) { width: 340px; height: 340px; right: -180px; top: 120px; }
  .aurora i:nth-child(3) { width: 300px; height: 240px; left: 10%; top: 420px; }
  .eroe { grid-template-columns: 1fr; gap: 0; padding: 8px 20px 0; }
  .radar-box { order: -1; height: 196px; }
  .radar-box .radar { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
  .radar-box .img-marchio { width: 84px; }
  .eroe .t-luce { font-size: 44px; }
  .eroe .t-forte { font-size: 14px; }
  .saluto { font-size: 16px; }
  .conti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px 28px; }
  .conto { min-height: 124px; padding: 14px; }
  .conto .num { font-size: 44px; }
  .foglio-bianco { border-radius: 28px 28px 0 0; padding-bottom: 40px; }
  .blocchi { padding: 36px 20px 0; gap: 44px; }
  .blocco { display: flex; flex-direction: column; align-items: stretch; }
  .blocco > .bottone { order: 9; }
  .blocco-testa h2 { font-size: 28px; }
  .blocco > .bottone { width: 100%; margin-top: 18px; }
  .riga { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 12px; padding: 16px 10px; margin: 0 -10px; }
  .riga .id { grid-column: 1 / -1; padding: 0; }
  .prossima { grid-template-columns: 1fr; justify-items: start; gap: 14px; padding: 22px; }
  .piede { flex-direction: column; align-items: flex-start; padding: 32px 20px 112px; }
  .piede .img-logo { width: 170px; }
  .testata { padding: 28px 20px 36px; }
  .testata .t-luce { font-size: 40px; overflow-wrap: anywhere; }
  .testata .t-forte { font-size: 13.5px; max-width: 250px; }
  .voci { padding: 20px 12px 0; gap: 16px; }
  .voce { padding: 24px 20px; border-radius: 22px; }
  .voce h2 { font-size: 22px; }
  .accaduto, .cit { font-size: 16.5px; }
  .cit { padding-left: 46px; }
  .cit::before { font-size: 76px; top: -14px; }
  .campi { grid-template-columns: 1fr; gap: 16px; }
  .marcature button { flex: 1 1 0; justify-content: center; padding: 0 12px; }
  .prima-dopo { grid-template-columns: 1fr; gap: 6px; }
  .pd-freccia { transform: rotate(90deg); height: 28px; }
  .dettagli pre { padding: 4px 16px 16px; font-size: 14px; }
  .mancato { margin: 24px 12px 0; padding: 24px 20px; }
  .mancato .bottone { width: 100%; }
  .dopo { padding: 28px 12px 0; flex-direction: column; }
  .dopo .bottone { width: 100%; }
  .scad-intro { padding: 28px 20px 0; font-size: 16px; }
  .linea-tempo { padding: 24px 12px 0; }
  .linea-tempo tr { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; padding-bottom: 18px; }
  .linea-tempo tr:not(:last-child)::before { left: 40.5px; top: 84px; }
  .linea-tempo td { padding: 0 18px; }
  .linea-tempo td.c-deadline { padding-top: 18px; }
  .linea-tempo td.c-as-the-source-says-it { padding-bottom: 18px; }
  .linea-tempo td.c-title { font-size: 18px; }
  .anello { width: 84px; height: 84px; }
  .anello .dentro b { font-size: 26px; }
  .anello .dentro span { font-size: 10px; letter-spacing: .08em; }
  .accesso-centro { padding: 0 26px; }
  .logo-box .img-marchio { width: 118px; }
  .logo-box .radar { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
  .logo-box .ping { width: 180px; height: 180px; margin: -90px 0 0 -90px; }
  .deco.corona { width: 320px; margin-left: -160px; top: -70px; }
  .carta { padding: 22px 20px 20px; }
  .solo .testata { padding-left: 20px; }
  .solo .foglio-bianco { margin: 0; border-radius: 28px 28px 0 0; }
  .solo .piede { padding-bottom: 44px; }
  .imp { padding: 28px 20px 0; }
  .cadenza { grid-template-columns: 1fr; }
  .cadenza .aiuto { grid-column: 1; }
  .scelte { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; width: 100%; }
  .scelte label { padding: 0 12px; }
  .salva .bottone { width: 100%; }
  .categorie { padding-top: 48px; }
  .categoria { grid-template-columns: 28px minmax(0, 1fr); }
  .categoria form { grid-column: 2; }
  .aggiungi .bottone { align-self: stretch; }
  .competitor { padding-top: 48px; }
  .comp { grid-template-columns: 1fr; }
  .splash > .radar { width: 560px; height: 560px; margin: -280px 0 0 -280px; }
  .orbita { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .splash .img-marchio { width: 140px; }
  .splash-data { top: calc(50% + 116px); }
}

/* ---- meno movimento: nessuna animazione, e tutto si vede subito ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .aurora i, .radar::before, .radar::after, .ping { animation: none !important; }
}