Figure issue for Listing 12.7

[404157386]

Chapter 12
12.2.2 Adding new colors to a palette
Listing 12.7 Adding the red color to the palette

In the Elements pane, right-click the tag and select :active
(or active in Firefox) from the context menu (figure 12.12). This will force the
browser to display the element’s active styles.
With the element forced to an active state, you can see how the red color looks.

figure 12.12 html

<ul class="top-nav">
  <li>
    <a href="/pricing">Pricing</a>
  </li>
</ul>

doesn't match figure 12.11 "video calls" link

and doesn't show red color for selector priority

a:active {
  color: var(--red);
}

.top-nav a {
  color: var(--white);
}

figure 12.12 should show this part html

<a href="/features/video-calling">video calls</a>