fix(editor): put checkerboard behind color swatch, not on top

The checkerboard pattern was rendered as background-image on the same
element as the inline background-color, which meant it painted over the
color. Move the checkerboard to a ::before pseudo-element with z-index
-1 so it only shows through transparent/semi-transparent colors.

https://claude.ai/code/session_01G7EiAdwAzdi7qzeYditnic

Author: claude

packages/ui/src/components/editor/editor-styles.css

@@ -165,13 +165,23 @@
 /* Color swatch for inline code containing CSS color values */
 .cept-color-swatch {
   display: inline-block;
+  position: relative;
   width: 0.8em;
   height: 0.8em;
   border-radius: 2px;
   margin-right: 0.25em;
   vertical-align: -0.05em;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  /* Checkerboard pattern to reveal transparency in alpha colors */
+  /* background-color is set via inline style in the widget */
+}
+
+/* Checkerboard behind the color — only visible through transparent/semi-transparent colors */
+.cept-color-swatch::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: -1;
   background-image:
     linear-gradient(45deg, #ccc 25%, transparent 25%),
     linear-gradient(-45deg, #ccc 25%, transparent 25%),