fix: enable preflight styles for component examples (#36035)

Author: mainframev

apps/public-docsite-v9-headless/.storybook/preview-head.html

@@ -1,8 +1,99 @@
 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 <style type="text/tailwindcss">
+  @layer theme, base, utilities;
   @import 'tailwindcss/theme' layer(theme);
   @import 'tailwindcss/utilities' layer(utilities);
   :root {
     interpolate-size: allow-keywords;
   }
 </style>
+<!--
+  Tailwind's Preflight is omitted above because it resets h1/h2/p/a in
+  MDX docs (which rely on typography from react-storybook-addon/src/styles.css).
+  Re-apply the essential resets here inside `@layer base`, scoped to
+  `.docs-story` so rendered Canvas examples get border/box-sizing/form-element
+  normalization without affecting the surrounding MDX page. -->
+<style>
+  @layer base {
+    @scope (.docs-story) {
+      *,
+      ::before,
+      ::after,
+      ::backdrop,
+      ::file-selector-button {
+        box-sizing: border-box;
+        border: 0 solid currentColor;
+      }
+
+      img,
+      svg,
+      video,
+      canvas,
+      audio,
+      iframe,
+      embed,
+      object {
+        display: block;
+        vertical-align: middle;
+      }
+
+      img,
+      video {
+        max-width: 100%;
+        height: auto;
+      }
+
+      button,
+      input,
+      optgroup,
+      select,
+      textarea,
+      ::file-selector-button {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-variation-settings: inherit;
+        font-size: 100%;
+        font-weight: inherit;
+        line-height: inherit;
+        letter-spacing: inherit;
+        color: inherit;
+      }
+
+      button,
+      select {
+        text-transform: none;
+      }
+
+      button,
+      input:where([type='button'], [type='reset'], [type='submit']),
+      ::file-selector-button {
+        appearance: button;
+        background-color: transparent;
+        background-image: none;
+      }
+
+      :-moz-focusring {
+        outline: auto;
+      }
+
+      ::placeholder {
+        opacity: 1;
+        color: color-mix(in oklab, currentColor 50%, transparent);
+      }
+
+      textarea {
+        resize: vertical;
+      }
+
+      ol,
+      ul,
+      menu {
+        list-style: none;
+      }
+
+      [hidden]:where(:not([hidden='until-found'])) {
+        display: none !important;
+      }
+    }
+  }
+</style>