Rewrite the showcase's Carousel section without Tailwind

Plan step 38 (last batch): every item's colour role pair moves from a
Tailwind bg-*/text-*/bg-linear-to-br utility string to a plain
`background-color`/`color`/`background: linear-gradient(...)` inline
style built from --md-sys-color-* tokens (the same "caller's own
style" mechanism as the foundation pages' colour swatch), and each
<x-shape> takes its px size as a prop instead of a size-* class.
data-md-showcase-carousel-swatch only sizes and centres the shape
inside the item.

Every #carousel id and data-md-carousel-item/multi-aspect selector the
Chromium CarouselTest reads is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/showcase.css

@@ -467,6 +467,15 @@
             align-items: stretch;
         }
     }
+
+    /* Carousel: an item's own colour is the caller's inline `style` (its role pair is chosen per
+       item), the same mechanism as the colour swatch above; this only sizes and centres it. */
+    [data-md-showcase-carousel-swatch] {
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 /* A handful of call sites (<x-input>, <x-datepicker>, <x-slider>) forward only `class` and