*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

/* Pequeñas utilidades */
.helper{ color:#f3f2f2; font-size:1rem; margin:.5rem 0 1rem; }
.section{ padding: 32px 16px; max-width: 1100px; margin: 0 auto; }

@keyframes bigger{
  from{ font-size: 1rem; }
  to  { font-size: 1.8rem; }
}
.grow{ font-size: 1rem; display:inline-block; }
.grow:hover{
  animation: bigger .7s ease forwards;
  /* forwards = mantiene el font-size final después de la animación */
}
@keyframes smaller {
    from{ font-size: 2rem; }
  to  { font-size: 0.8rem; }    
}
.grow-s{ font-size: 2rem; display:inline-block; }
.grow-s:hover{
  animation: smaller .9s ease forwards;
}