.avviso {
  width: min(420px, calc(100% - 32px));
  padding: 32px;
  border: 0;
  border-radius: 24px;
  background: var(--carta);
  color: var(--inchiostro);
  box-shadow: 0 24px 64px rgb(0 0 0 / .28);
  text-align: center;
}
.avviso::backdrop { background: rgb(22 25 19 / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.avviso[open] { animation: avviso .35s var(--curva); }

.avviso-segno { width: 48px; height: 48px; margin: 0 auto 12px; display: block; }
.avviso-segno circle { fill: none; stroke: var(--oro-scuro); stroke-width: 2; }
.avviso-segno path { stroke: var(--oro-scuro); stroke-width: 2.6; stroke-linecap: round; }
.avviso-segno .punto { fill: var(--oro-scuro); stroke: none; }

.avviso h3 { font-size: 1.8rem; margin-bottom: 12px; }
.avviso ul { margin-bottom: 24px; color: var(--inchiostro-tenue); }
.avviso form { display: flex; justify-content: center; }

@media (prefers-color-scheme: dark) {
  .avviso-segno circle, .avviso-segno path { stroke: var(--oro); }
  .avviso-segno .punto { fill: var(--oro); }
}

@keyframes avviso { from { opacity: 0; transform: translateY(12px) scale(.97); } }

@media (prefers-reduced-motion: reduce) { .avviso[open] { animation: none; } }