diff --git a/images/diagrams/css/at-rules/layer-cascade.drawio b/images/diagrams/css/at-rules/layer-cascade.drawio
index 34d5fd2..cab9f29 100644
--- a/images/diagrams/css/at-rules/layer-cascade.drawio
+++ b/images/diagrams/css/at-rules/layer-cascade.drawio
@@ -1,74 +1,80 @@
-<mxfile host="app.diagrams.net" modified="2024-06-24T16:11:05.055Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:128.0) Gecko/20100101 Firefox/128.0" etag="Ei5N7cXomdrr08GCpOc3" scale="1" border="0" version="24.6.2" type="device">
+<mxfile host="Electron" scale="1" border="0" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.17 Chrome/128.0.6613.36 Electron/32.0.1 Safari/537.36" version="24.7.17">
   <diagram name="Page-1" id="efa7a0a1-bf9b-a30e-e6df-94a7791c09e9">
-    <mxGraphModel dx="1132" dy="964" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="826" pageHeight="1169" background="#FFFFFF" math="0" shadow="0">
+    <mxGraphModel dx="1434" dy="835" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="826" pageHeight="1169" background="#FFFFFF" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
-        <mxCell id="urXJzweC5eLhULexqn9Z-19" value="" style="whiteSpace=wrap;html=1;fillColor=#FFFED9;strokeColor=#d6b656;" vertex="1" parent="1">
-          <mxGeometry x="180" y="10" width="420" height="740" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-19" value="" style="whiteSpace=wrap;html=1;fillColor=#FFFED9;strokeColor=#d6b656;" parent="1" vertex="1">
+          <mxGeometry x="180" y="10" width="420" height="820" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-10" value="" style="whiteSpace=wrap;html=1;fillColor=none;" vertex="1" parent="1">
-          <mxGeometry x="190" y="170" width="400" height="210" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-10" value="" style="whiteSpace=wrap;html=1;fillColor=none;" parent="1" vertex="1">
+          <mxGeometry x="190" y="170" width="400" height="240" as="geometry" />
         </mxCell>
         <mxCell id="oMBeN4IvPGKr6_LYo95F-5" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Transition declarations&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
           <mxGeometry x="190" y="20" width="400" height="40" as="geometry" />
         </mxCell>
         <mxCell id="itvtTAMVvJ-Au7iy1GT8-35" value="&lt;font style=&quot;font-size: 18px;&quot;&gt;Highest priority&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;" parent="1" vertex="1">
-          <mxGeometry x="10" y="25" width="140" height="30" as="geometry" />
+          <mxGeometry x="10" y="11" width="140" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-20" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=3;" edge="1" parent="1" source="urXJzweC5eLhULexqn9Z-1" target="itvtTAMVvJ-Au7iy1GT8-35">
+        <mxCell id="urXJzweC5eLhULexqn9Z-20" style="rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;strokeWidth=3;" parent="1" source="urXJzweC5eLhULexqn9Z-1" target="itvtTAMVvJ-Au7iy1GT8-35" edge="1">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-1" value="&lt;font style=&quot;font-size: 18px;&quot;&gt;Lowest priority&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;" vertex="1" parent="1">
-          <mxGeometry y="730" width="160" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-1" value="&lt;font style=&quot;font-size: 18px;&quot;&gt;Lowest priority&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontFamily=Helvetica;fontSize=12;fontColor=default;labelBackgroundColor=none;strokeWidth=1;dashed=1;" parent="1" vertex="1">
+          <mxGeometry y="801" width="160" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-2" value="&lt;font face=&quot;sans-serif&quot;&gt;Important user agent declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
+        <mxCell id="urXJzweC5eLhULexqn9Z-2" value="&lt;font face=&quot;sans-serif&quot;&gt;Important user agent declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
           <mxGeometry x="190" y="70" width="400" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-3" value="&lt;font face=&quot;sans-serif&quot;&gt;Important user declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
+        <mxCell id="urXJzweC5eLhULexqn9Z-3" value="&lt;font face=&quot;sans-serif&quot;&gt;Important user declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
           <mxGeometry x="190" y="120" width="400" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-4" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer 1 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#dae8fc;strokeColor=#6c8ebf;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="180" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-4" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer 1 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#dae8fc;strokeColor=#6c8ebf;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="209" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-5" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer 2 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#d5e8d4;strokeColor=#82b366;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="220" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-5" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer 2 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#d5e8d4;strokeColor=#82b366;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="248" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-6" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer ... { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#ffe6cc;strokeColor=#d79b00;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="260" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-6" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer ... { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#ffe6cc;strokeColor=#d79b00;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="288" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-7" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer N { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#e1d5e7;strokeColor=#9673a6;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="300" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-7" value="&lt;font face=&quot;sans-serif&quot;&gt;Important @layer N { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#e1d5e7;strokeColor=#9673a6;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="328" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-8" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Important Unlayered&lt;br&gt;&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#647687;strokeColor=#314354;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;fontColor=#ffffff;" vertex="1" parent="1">
-          <mxGeometry x="200" y="340" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-8" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Important Unlayered&lt;br&gt;&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#647687;strokeColor=#314354;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;fontColor=#ffffff;" parent="1" vertex="1">
+          <mxGeometry x="200" y="368" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-9" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Animation declarations&lt;br&gt;&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="190" y="390" width="400" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-9" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Animation declarations&lt;br&gt;&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="190" y="421" width="400" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-11" value="" style="whiteSpace=wrap;html=1;fillColor=none;" vertex="1" parent="1">
-          <mxGeometry x="190" y="430" width="400" height="210" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-11" value="" style="whiteSpace=wrap;html=1;fillColor=none;" parent="1" vertex="1">
+          <mxGeometry x="190" y="460" width="400" height="250" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-12" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer 1 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#dae8fc;strokeColor=#6c8ebf;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="600" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-12" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer 1 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#dae8fc;strokeColor=#6c8ebf;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="665" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-13" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer 2 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#d5e8d4;strokeColor=#82b366;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="560" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-13" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer 2 { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#d5e8d4;strokeColor=#82b366;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="625" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-14" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer ... { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#ffe6cc;strokeColor=#d79b00;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="520" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-14" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer ... { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#ffe6cc;strokeColor=#d79b00;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="585" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-15" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer N { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#e1d5e7;strokeColor=#9673a6;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="200" y="480" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-15" value="&lt;font face=&quot;sans-serif&quot;&gt;@layer N { ... }&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#e1d5e7;strokeColor=#9673a6;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="545" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-16" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Unlayered&lt;br&gt;&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#647687;strokeColor=#314354;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;fontColor=#ffffff;" vertex="1" parent="1">
-          <mxGeometry x="200" y="440" width="380" height="30" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-16" value="&lt;i&gt;&lt;font face=&quot;sans-serif&quot;&gt;Unlayered&lt;br&gt;&lt;/font&gt;&lt;/i&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#647687;strokeColor=#314354;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;fontColor=#ffffff;" parent="1" vertex="1">
+          <mxGeometry x="200" y="505" width="380" height="30" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-17" value="&lt;font face=&quot;sans-serif&quot;&gt;Normal user declarations&lt;br&gt;&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="190" y="650" width="400" height="40" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-17" value="&lt;font face=&quot;sans-serif&quot;&gt;Normal u&lt;/font&gt;&lt;span style=&quot;font-family: sans-serif; background-color: initial;&quot;&gt;ser declarations&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="190" y="724" width="400" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="urXJzweC5eLhULexqn9Z-18" value="&lt;font face=&quot;sans-serif&quot;&gt;Normal user agent declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" vertex="1" parent="1">
-          <mxGeometry x="190" y="700" width="400" height="40" as="geometry" />
+        <mxCell id="urXJzweC5eLhULexqn9Z-18" value="&lt;font face=&quot;sans-serif&quot;&gt;Normal user agent declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;fillColor=#fff2cc;strokeColor=#d6b656;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="190" y="774" width="400" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="xQSERh4WUOrSDZgWRBxG-2" value="&lt;font face=&quot;sans-serif&quot;&gt;Important author declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="200" y="170" width="380" height="40" as="geometry" />
+        </mxCell>
+        <mxCell id="xQSERh4WUOrSDZgWRBxG-3" value="&lt;font face=&quot;sans-serif&quot;&gt;Normal author declarations&lt;/font&gt;" style="text;html=1;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=1;fontFamily=Monospace;labelBackgroundColor=none;spacing=4;spacingLeft=0;spacingTop=0;arcSize=0;fontSize=16;fontStyle=0;shadow=0;shadowOffsetX=2;shadowOffsetY=2;shadowBlur=1;strokeWidth=1;perimeterSpacing=0;" parent="1" vertex="1">
+          <mxGeometry x="201" y="466" width="380" height="40" as="geometry" />
         </mxCell>
       </root>
     </mxGraphModel>
diff --git a/images/diagrams/css/at-rules/layer-cascade.svg b/images/diagrams/css/at-rules/layer-cascade.svg
index 8133f36..f7c4d90 100644
--- a/images/diagrams/css/at-rules/layer-cascade.svg
+++ b/images/diagrams/css/at-rules/layer-cascade.svg
@@ -1,352 +1,73 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" viewBox="-.5 -.5 601 751">
-  <rect width="100%" height="100%" fill="#FFF"/>
-  <g data-cell-id="0">
-    <g data-cell-id="1">
-      <path fill="#fffed9" stroke="#d6b656" d="M180 0h420v740H180z" data-cell-id="urXJzweC5eLhULexqn9Z-19" pointer-events="all"/>
-      <path fill="none" stroke="#000" d="M190 160h400v210H190z" data-cell-id="urXJzweC5eLhULexqn9Z-10" pointer-events="all"/>
-      <g data-cell-id="oMBeN4IvPGKr6_LYo95F-5">
-        <path fill="#fff2cc" stroke="#d6b656" d="M190 10h400v40H190z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:394px;height:1px;padding-top:30px;margin-left:193px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <i>
-                    <font face="sans-serif">
-                      Transition declarations
-                    </font>
-                  </i>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="35" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Transition declarations</text>
-        </switch>
-      </g>
-      <g data-cell-id="itvtTAMVvJ-Au7iy1GT8-35">
-        <path fill="none" d="M10 15h140v30H10z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:138px;height:1px;padding-top:30px;margin-left:11px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:12px;font-family:&quot;Helvetica&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font style="font-size:18px">
-                    Highest priority
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="80" y="34" font-family="&quot;Helvetica&quot;" font-size="12" text-anchor="middle">Highest priority</text>
-        </switch>
-      </g>
-      <g stroke="#000" stroke-miterlimit="10" stroke-width="3" data-cell-id="urXJzweC5eLhULexqn9Z-20">
-        <path fill="none" d="M80 720V55.1" pointer-events="stroke"/>
-        <path d="m80 48.35 4.5 9L80 55.1l-4.5 2.25Z" pointer-events="all"/>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-1">
-        <path fill="none" d="M0 720h160v30H0z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:158px;height:1px;padding-top:735px;margin-left:1px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:12px;font-family:&quot;Helvetica&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font style="font-size:18px">
-                    Lowest priority
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="80" y="739" font-family="&quot;Helvetica&quot;" font-size="12" text-anchor="middle">Lowest priority</text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-2">
-        <path fill="#fff2cc" stroke="#d6b656" d="M190 60h400v40H190z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:394px;height:1px;padding-top:80px;margin-left:193px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Important user agent declarations
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="85" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important user agent declarations</text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-3">
-        <path fill="#fff2cc" stroke="#d6b656" d="M190 110h400v40H190z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:394px;height:1px;padding-top:130px;margin-left:193px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Important user declarations
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="135" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important user declarations</text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-4">
-        <path fill="#dae8fc" stroke="#6c8ebf" d="M200 170h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:185px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Important @layer 1 { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="190" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important @layer 1 { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-5">
-        <path fill="#d5e8d4" stroke="#82b366" d="M200 210h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:225px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Important @layer 2 { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="230" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important @layer 2 { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-6">
-        <path fill="#ffe6cc" stroke="#d79b00" d="M200 250h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:265px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Important @layer ... { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="270" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important @layer ... { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-7">
-        <path fill="#e1d5e7" stroke="#9673a6" d="M200 290h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:305px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Important @layer N { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="310" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important @layer N { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-8">
-        <path fill="#647687" stroke="#314354" d="M200 330h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:345px;margin-left:203px">
-              <div data-drawio-colors="color: #ffffff;" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <i>
-                    <font face="sans-serif">
-                      Important Unlayered
-                      <br/>
-                    </font>
-                  </i>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="350" fill="#fff" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Important Unlayered
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-9">
-        <path fill="#fff2cc" stroke="#d6b656" d="M190 380h400v30H190z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:394px;height:1px;padding-top:395px;margin-left:193px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <i>
-                    <font face="sans-serif">
-                      Animation declarations
-                      <br/>
-                    </font>
-                  </i>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="400" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Animation declarations
-          </text>
-        </switch>
-      </g>
-      <path fill="none" stroke="#000" d="M190 420h400v210H190z" data-cell-id="urXJzweC5eLhULexqn9Z-11" pointer-events="all"/>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-12">
-        <path fill="#dae8fc" stroke="#6c8ebf" d="M200 590h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:605px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    @layer 1 { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="610" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">@layer 1 { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-13">
-        <path fill="#d5e8d4" stroke="#82b366" d="M200 550h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:565px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    @layer 2 { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="570" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">@layer 2 { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-14">
-        <path fill="#ffe6cc" stroke="#d79b00" d="M200 510h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:525px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    @layer ... { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="530" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">@layer ... { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-15">
-        <path fill="#e1d5e7" stroke="#9673a6" d="M200 470h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:485px;margin-left:203px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    @layer N { ... }
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="490" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">@layer N { ... }
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-16">
-        <path fill="#647687" stroke="#314354" d="M200 430h380v30H200z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:374px;height:1px;padding-top:445px;margin-left:203px">
-              <div data-drawio-colors="color: #ffffff;" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <i>
-                    <font face="sans-serif">
-                      Unlayered
-                      <br/>
-                    </font>
-                  </i>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="450" fill="#fff" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Unlayered
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-17">
-        <path fill="#fff2cc" stroke="#d6b656" d="M190 640h400v40H190z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:394px;height:1px;padding-top:660px;margin-left:193px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Normal user declarations
-                    <br/>
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="665" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Normal user declarations
-          </text>
-        </switch>
-      </g>
-      <g data-cell-id="urXJzweC5eLhULexqn9Z-18">
-        <path fill="#fff2cc" stroke="#d6b656" d="M190 690h400v40H190z" pointer-events="all"/>
-        <switch transform="translate(-.5 -.5)">
-          <foreignObject width="100%" height="100%" pointer-events="none" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow:visible;text-align:left">
-            <div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:394px;height:1px;padding-top:710px;margin-left:193px">
-              <div data-drawio-colors="color: rgb(0, 0, 0);" style="box-sizing:border-box;font-size:0;text-align:center">
-                <div style="display:inline-block;font-size:16px;font-family:&quot;Monospace&quot;;color:#000;line-height:1.2;pointer-events:all;white-space:normal;overflow-wrap:normal">
-                  <font face="sans-serif">
-                    Normal user agent declarations
-                  </font>
-                </div>
-              </div>
-            </div>
-          </foreignObject>
-          <text x="390" y="715" font-family="&quot;Monospace&quot;" font-size="16" text-anchor="middle">Normal user agent declarations</text>
-        </switch>
-      </g>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 820">
+    <title>Style origins and layers in order of precedence, from highest to lowest</title>
+<style>
+ text {
+   color: black;
+   font-family: sans-serif;
+   font-size: 1rem;
+   text-anchor: middle;
+ }
+[fill="#fff"],
+.css {
+   font-style: italic;
+}
+</style>
+
+<path fill="#fffed9" stroke="#d6b656" d="M180 0h420v820H180z"/>
+
+<text x="80" y="20" >Highest priority</text>
+<g stroke="#000" stroke-miterlimit="10" stroke-width="3" id="arrow">
+  <path fill="none" d="M80 771V41.1" />
+  <path d="m80 34.35 4.5 9L80 41.1l-4.5 2.25Z"/>
+</g>
+
+<path fill="#fff2cc" stroke="#d6b656" d="M190 10h400v40H190z"/>
+<text x="390" y="35" class="css">Transition declarations</text>
+
+<g id="all_important">
+    <path fill="#fff2cc" stroke="#d6b656" d="M190 60h400v40H190z"/>
+    <text x="390" y="85">Important user agent declarations</text>
+    <path fill="#fff2cc" stroke="#d6b656" d="M190 110h400v40H190z"/>
+    <text x="390" y="135">Important user declarations</text>
+    <g id="important-author">
+        <path fill="none" stroke="#000" d="M190 160h400v240H190z"/>
+        <text x="390" y="185">Important author declarations</text>
+        <path fill="#dae8fc" stroke="#6c8ebf" d="M200 199h380v30H200z"/>
+        <text x="390" y="219">Important @layer 1 { ... }</text>
+        <path fill="#d5e8d4" stroke="#82b366" d="M200 238h380v30H200z"/>
+        <text x="390" y="258">Important @layer 2 { ... }</text>
+        <path fill="#ffe6cc" stroke="#d79b00" d="M200 278h380v30H200z"/>
+        <text x="390" y="298">Important @layer ... { ... }</text>
+        <path fill="#e1d5e7" stroke="#9673a6" d="M200 318h380v30H200z"/>
+        <text x="390" y="338">Important @layer N { ... }</text>
+        <path fill="#647687" stroke="#314354" d="M200 358h380v30H200z"/>
+        <text x="390" y="378" fill="#fff">Important Unlayered</text>
     </g>
-  </g>
+</g>
+
+<path fill="#fff2cc" stroke="#d6b656" d="M190 411h400v30H190z"/>
+<text x="390" y="431" class="css">Animation declarations</text>
+
+<g id="all_normal">
+    <g id="author_normal">
+        <path fill="none" stroke="#000" d="M190 450h400v250H190z"/>
+        <text x="391" y="481">Normal author declarations</text>
+        <path fill="#dae8fc" stroke="#6c8ebf" d="M200 655h380v30H200z"/>
+        <text x="390" y="675">@layer 1 { ... }</text>
+        <path fill="#d5e8d4" stroke="#82b366" d="M200 615h380v30H200z"/>
+        <text x="390" y="635">@layer 2 { ... }</text>
+        <path fill="#ffe6cc" stroke="#d79b00" d="M200 575h380v30H200z"/>
+        <text x="390" y="595">@layer ... { ... }</text>
+        <path fill="#e1d5e7" stroke="#9673a6" d="M200 535h380v30H200z"/>
+        <text x="390" y="555">@layer N { ... }</text>
+        <path fill="#647687" stroke="#314354" d="M200 495h380v30H200z"/>
+        <text x="390" y="515" fill="#fff">Unlayered</text>
+    </g>
+    <path fill="#fff2cc" stroke="#d6b656" d="M190 714h400v40H190z"/>
+    <text x="390" y="739">Normal user declarations</text>
+    <path fill="#fff2cc" stroke="#d6b656" d="M190 764h400v40H190z"/>
+    <text x="390" y="789">Normal user agent declarations</text>
+</g>
+<text x="80" y="800" >Lowest priority</text>
 </svg>