:focus: is useful for consistently highlighting elements like buttons and input fields when interacted with by mouse or keyboard to show they are active.
:focus-visible: is ideal for enhancing accessibility by only showing focus styles during keyboard navigation, keeping the interface clean for mouse users.

It’s still a touch early to truly adopt these two features (only Chrome and Edge have full support today), but it can’t hurt to explore both Anchor positioning and scroll-driven animations to get an overview of just what could be done in the near future – it's a nifty effect!

Just drop in the base stylesheet, then use the provided CSS variables that provide built-in “shades” for each color.