diff --git a/resources/css/showcase.css b/resources/css/showcase.css
new file mode 100644
index 00000000..e5c4af89
--- /dev/null
+++ b/resources/css/showcase.css
@@ -0,0 +1,117 @@
+/*
+ * The showcase's own chrome: what its frame needs beyond the layout components, the text classes
+ * and the shared interaction classes (plan step 38) — a brand wordmark, the search box's own
+ * geometry, a small icon avatar, an example's card and its code sample. Everything else the frame
+ * draws is a layout component with its props, or a `md-*` text class; this file is only what those
+ * two do not cover.
+ *
+ * In `material.components`: the showcase is one more thing drawn over the foundation and the
+ * layout components, exactly where `components/error-page.css` sits for the same reason (a whole
+ * page's own chrome, not a reusable package component, but still something an application's own
+ * unlayered CSS should outrank without a specificity fight). Keyed on `data-md-showcase-*` hooks,
+ * never a bare element selector, since this file is always bundled together with `all.css`
+ * (`ShowcaseAssetController`) and must not restyle anything outside the showcase's own pages.
+ *
+ * No imports: batch 1 (the frame — layout, index, section, shell, the example component) uses no
+ * selector this file needs to draw over, only tokens already in `all.css`, which the bundle always
+ * carries ahead of this file. A later batch that needs a component's own hook imports its
+ * stylesheet here, as every other package file does.
+ */
+
+@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
+
+@layer material.components {
+    [data-md-showcase] {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    /* The rail's wordmark: `md-type-title-lg md-truncate md-focus-ring` cover the type, the
+       ellipsis and the ring; `display: block` gives the truncated text a width to ellipsize
+       within, and the corner rounds the ring to match the state layer every other rail control
+       draws (foundation/interaction.css's `md-focus-ring` takes its shape from the element). */
+    [data-md-showcase-brand] {
+        display: block;
+        border-radius: var(--md-sys-shape-corner-xs);
+    }
+
+    /* The search bar fills the app bar's search slot. */
+    [data-md-showcase-search] {
+        width: 100%;
+    }
+
+    [data-md-showcase-search-hint] {
+        padding: var(--md-sys-measurement-space125) var(--md-sys-measurement-space200);
+    }
+
+    /* A kbd in running text: the search hint's "/", and the intro paragraph's own. */
+    [data-md-showcase-kbd] {
+        display: inline-block;
+        border-radius: var(--md-sys-shape-corner-xs);
+        background-color: var(--md-sys-color-surface-container-highest);
+        padding: 0 var(--md-sys-measurement-space75);
+    }
+
+    /* One search result: title over kind and context, centred in a 56px row (space700, M3's list
+       row) the way a menu item is. */
+    [data-md-showcase-search-result] {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: var(--md-sys-measurement-space700);
+        padding: var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
+    }
+
+    /* The bottom breathing room under a showcase page's content, inside the pane's own margins. */
+    [data-md-showcase-page] {
+        padding-block-end: var(--md-sys-measurement-space600);
+    }
+
+    /* Each section's group of components on the overview: a tonal box behind its icon, the way a
+       list's leading icon sits in a container (M3's small tonal container). */
+    [data-md-showcase-section-icon] {
+        display: grid;
+        place-items: center;
+        width: var(--md-sys-measurement-space600);
+        height: var(--md-sys-measurement-space600);
+        border-radius: var(--md-sys-shape-corner-lg);
+        background-color: var(--md-sys-color-secondary-container);
+        color: var(--md-sys-color-on-secondary-container);
+    }
+
+    /* Each `<section>`'s own `<h2>`, inside a still-Tailwind sections/*.blade.php partial this
+       batch does not rewrite: the page's own `<h1>` already names the section, so the heading
+       inside it is for assistive technology only — the same declarations as `md-visually-hidden`
+       (text.css), applied by structure because a class cannot reach into an @include'd partial. */
+    [data-md-showcase-sections] > section > h2 {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+        border-width: 0;
+    }
+
+    /* An example: scroll-margin so a hash link (the search result, the "next section" nav) lands
+       clear of the sticky app bar above it. */
+    [data-md-showcase-example] {
+        scroll-margin-top: var(--md-sys-measurement-space900);
+    }
+
+    [data-md-showcase-code-summary] {
+        display: inline-block;
+        cursor: pointer;
+        border-radius: var(--md-sys-shape-corner-xs);
+    }
+
+    [data-md-showcase-code] {
+        margin-top: var(--md-sys-measurement-space100);
+        overflow-x: auto;
+        border-radius: var(--md-sys-shape-corner-sm);
+        background-color: var(--md-sys-color-surface-container-highest);
+        padding: var(--md-sys-measurement-space125);
+    }
+}