scope styles to #content (#1217)

Author: claviska

packages/webawesome/docs/docs/resources/visual-tests.md

@@ -6,27 +6,34 @@ wide: true
 ---
 
 <style>
-  p {
-    max-width: 90ch;
-  }
-  tbody {
-    & .wa-grid {
-      --min-column-size: 5ch;
-    }
-    & tr th:first-of-type {
-      width: 20ch;
+  #content {
+    p {
+      max-width: 90ch;
     }
-    & th {
-      vertical-align: middle;
+
+    tbody {
+      & .wa-grid {
+        --min-column-size: 5ch;
+      }
+
+      & tr th:first-of-type {
+        width: 20ch;
+      }
+
+      & th {
+        vertical-align: middle;
+      }
+
+      & tr:hover {
+        background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
+      }
     }
-    & tr:hover {
-      background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
+
+    wa-divider {
+      --width: var(--wa-border-width-m);
+      --spacing: var(--wa-space-3xl);
     }
   }
-  wa-divider {
-    --width: var(--wa-border-width-m);
-    --spacing: var(--wa-space-3xl);
-  }
 </style>
 
 With so many ways to build with and use Web Awesome components, visual tests help ensure consistency and prevent broken styles from leaking into production.