a:not(:is(:hover, :focus)) {
  text-decoration-color: 
    color-mix(in srgb, currentColor, transparent 75%);
}

Eval scoped into a function has a default global scope: wtf.

and a lot of things

:where() apply styles with 0 specificity. It's a great way to provide defaults to css classes.

Another modern solution is to use @layer.

Wow! mix-blend-mode: multiply; and the linear-gradient effect are awesome.

Avoid layered text-shadows for text outlines.

Use paint-order: stroke fill instead!

Long form options are much more self-explanatory for the reader.

I totally agree

How to customize gaps between elements?

We don't have a great way to do it currently.

• Adjust the vertical margin of the title or description.
  Wrap title and description in a new container and re-apply flexbox with a smaller spacing.
  Use the default flow layout with margins.

Show elements in an input?

✨ Chrome: DevTools Settings > Preferences > Elements > ✅Show user agent shadow DOM

✨ Firefox: about:config > set devtools.inspector.showAllAnonymousContent to true

Use inset: -8px to make the element overflows in its container.

Naming conventions for CSS

Focus by demotion or the focus stands out because all other elements are hidden.

A compile time macro similar to Zig

Validating helps technical understanding as it contributes to awareness of the underlying specifications, and writing valid code is a sign of professionalism

Encoding the malware as an array of UUIDs

A switch input with an Astronaut