A CSS layer (written as @layer) is a way to group CSS rules into explicitly ordered priority tiers. Layers were introduced to give developers a structured way to manage the cascade without relying on specificity tricks or !important.
Rules inside a lower-priority layer lose to rules inside a higher-priority layer, regardless of their individual specificity scores. This means a very specific rule in a low-priority layer can be overridden by a less specific rule in a high-priority layer. It inverts the normal specificity logic for rules in different layers.
In practice, you're most likely to encounter layers on sites using modern CSS frameworks or design systems that use them to separate base styles, component styles, and utility styles into distinct priority tiers. If Loupely Lens identifies that a rule is inside a @layer, it flags it with a badge in Fight View so you can see that layer priority, not just specificity, is part of why that rule won or lost.