[css-cascade-5] Clarify the behavior of nested layer shorthand

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -1245,6 +1245,43 @@ Nested Layers</h5>
 		</pre>
 	</div>
 
+	This syntax is provided as a shorthand for defining nested layers,
+	and has the same effect as declaring each [=layer name=]
+	inside nested ''@layer'' rules.
+
+	<div class="example">
+		That means the shorthand syntax can also be used in defining new layers,
+		and establishing layer order.
+
+		The following example defines <css>framework.theme</css> before <css>framework.default</css>:
+
+		<pre class='lang-css'>
+			@layer framework.theme {
+			  blockquote { color: rebeccapurple; }
+			}
+
+			@layer framework {
+			  @layer default {
+			     p { margin-block: 0.75em; }
+			  }
+
+			  @layer theme {
+			    p { color: #222; }
+			  }
+			}
+		</pre>
+
+		The <css>framework.theme</css> shorthand is purely syntax sugar for the following longhand:
+
+		<pre class='lang-css'>
+			@layer framework {
+			  @layer theme {
+			    blockquote { color: rebeccapurple; }
+			  }
+			}
+		</pre>
+	</div>
+
 	Issue(w3c/csswg-drafts#5791): What is the appropriate syntax for appending to nested layers?
 
 <h5 id="unnamed-layers" class="no-toc">