[css-nesting-1] add @scope and @layer examples

Author: argyleink

css-nesting-1/Overview.bs

@@ -427,6 +427,81 @@ Syntax {#syntax}
 			figure > figcaption { background: hsl(0 0% 0% / 50%); }
 			figure > figcaption > p { font-size: .9rem; }
 		*/
+		
+		<b>/* Example usage with Cascade Layers */</b>
+		@layer base {
+		  html {
+				block-size: 100%;
+
+				& body {
+					min-block-size: 100%;
+				}
+			}
+		}
+		/* equivalent to
+			@layer base {
+				html { block-size: 100%; }
+				html body { min-block-size: 100%; }
+			}
+		*/
+
+		<b>/* Example nesting Cascade Layers */</b>
+		@layer base {
+		  html {
+				block-size: 100%;
+
+				@layer base.support {
+					& body {
+						min-block-size: 100%;
+					}
+				}
+			}
+		}
+		/* equivalent to
+			@layer base {
+				html { block-size: 100%; }
+			}
+			@layer base.support {
+				html body { min-block-size: 100%; }
+			}
+		*/
+		
+		<b>/* Example usage with Scoping */</b>
+		@scope (.card) to (> header) { {
+		  :scope {
+				inline-size: 40ch;
+				aspect-ratio: 3/4;
+				
+				> header {
+					border-block-end: 1px solid white;
+				}
+			}
+		}
+		/* equivalent to
+			@scope (.card) to (> header) {
+				:scope { inline-size: 40ch; aspect-ratio: 3/4; }
+				:scope > header { border-block-end: 1px solid white; }
+			}
+		*/
+
+		<b>/* Example nesting Scoping */</b>
+		.card {
+			inline-size: 40ch;
+			aspect-ratio: 3/4;
+
+			@scope (&) to (> header > *) {
+				:scope > header {
+					border-block-end: 1px solid white;
+				}
+			}
+		}
+
+		/* equivalent to
+			.card { inline-size: 40ch; aspect-ratio: 3/4; }
+			@scope (.card) to (> header > *) {
+				:scope > header { border-block-end: 1px solid white; }
+			}
+		*/
 		</pre>
 
 		But these are not valid: