:root { --m: clamp(16px, 4vw, 40px); --fondo: #f5c518; --ink: #0d1114; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
body[data-s=si]  { --fondo: #e0102f; --ink: #fff; }
body[data-s=no]  { --fondo: #00afed; --ink: #0d1114; }
body[data-s=boh] { --fondo: #f5c518; --ink: #0d1114; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--fondo); }
body { position: relative; min-height: 100vh; /* taste-skill-ignore: ripiego per i browser senza svh */ min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; overflow-x: hidden;
  background: var(--fondo); color: var(--ink); font: 400 18px/1.4 Archivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: var(--ink); color: var(--fondo); }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#neve { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .16; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }

.testa { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: var(--m) var(--m) 0; }
.testa h1 { font: 800 clamp(30px, 4.4vw, 60px)/1 Archivo, sans-serif; font-stretch: 80%; letter-spacing: -.02em; }
.testa a { font-weight: 700; font-size: 16px; padding: 8px 0; }
@media (hover: hover) and (pointer: fine) { .testa a:hover { text-decoration-thickness: 4px; } }

.scena { position: relative; z-index: 2; display: grid; place-items: center; min-height: 0; padding: 8px var(--m); }
.risposta { font: 900 min(40vw, 54svh)/.8 Archivo, sans-serif; font-stretch: 62%; letter-spacing: -.04em; padding-top: .06em; text-align: center;
  animation: r-arriva 520ms var(--ease-out) both; }
@keyframes r-arriva { from { opacity: 0; transform: translateY(24px) scale(.97); } }

.piede { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 0 var(--m) var(--m); max-width: 40ch; }
.nota { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.25; font-weight: 600; text-wrap: balance; }
.agg { font-size: 16px; }

.porta { position: absolute; z-index: 1; right: var(--m); bottom: 0; width: clamp(84px, 10vw, 130px); height: auto; }

.germi { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.germi .germe { pointer-events: auto; }
.germi .fumetto { font-size: 16px; }
body[data-s=si] .germe.galleggia .g-corpo { animation-name: g-festa; }
@keyframes g-festa { 0% { transform: translateY(0) rotate(-8deg); } 100% { transform: translateY(-14px) rotate(8deg); } }
.germe.entra { animation: g-entra 480ms var(--ease-out) both; animation-delay: var(--entrata, 0ms); }
@keyframes g-entra { from { opacity: 0; transform: translateY(20px) scale(.9); } }

@media (max-width: 640px) {
  .testa { padding-top: 20px; }
  .risposta { font-size: min(56vw, 46svh); }
  .piede { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .risposta, .germe.entra { animation: none; }
}