diff --git a/resources/views/showcase/sections/layout.blade.php b/resources/views/showcase/sections/layout.blade.php
new file mode 100644
index 00000000..ae42928b
--- /dev/null
+++ b/resources/views/showcase/sections/layout.blade.php
@@ -0,0 +1,105 @@
+{{-- M3's window size classes, live: the one this window is in, what each one changes, and the
+     variants that key on them. The five cards light up through the variants themselves, so the
+     page proves the compiled breakpoints rather than describing them. --}}
+
+<section id="layout" class="scroll-mt-24 space-y-6">
+    <h2 class="type-headline-md">Layout</h2>
+
+    <p class="max-w-3xl type-body-md text-on-surface-variant">
+        Widths are M3's window size classes and nothing else: compact below 600px, then <code>medium:</code> 600,
+        <code>expanded:</code> 840, <code>large:</code> 1200 and <code>extra-large:</code> 1600, with
+        <code>max-medium:</code> and friends for "below". Tailwind's <code>sm:</code>…<code>2xl:</code> compile to
+        nothing. Scripts read the same numbers from <code>resources/js/breakpoints.js</code>.
+    </p>
+
+    <div
+        x-data="{ width: window.innerWidth }"
+        x-on:resize.window="width = window.innerWidth"
+        class="flex flex-wrap items-baseline gap-x-4 gap-y-1 rounded-corner-lg bg-surface-container-low p-6"
+        data-test="window-class"
+    >
+        <span class="type-label-lg text-on-surface-variant">This window</span>
+        <span class="type-emphasized-headline-sm tabular-nums" x-text="width + 'px'"></span>
+        <span class="type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
+    </div>
+
+    <div class="grid gap-3 medium:grid-cols-5">
+        <div class="rounded-corner-md bg-surface-container p-4 max-medium:bg-primary-container max-medium:text-on-primary-container">
+            <p class="type-title-sm">Compact</p>
+            <p class="type-body-sm">below 600px</p>
+        </div>
+        <div class="rounded-corner-md bg-surface-container p-4 medium:max-expanded:bg-primary-container medium:max-expanded:text-on-primary-container">
+            <p class="type-title-sm">Medium</p>
+            <p class="type-body-sm">600–839px</p>
+        </div>
+        <div class="rounded-corner-md bg-surface-container p-4 expanded:max-large:bg-primary-container expanded:max-large:text-on-primary-container">
+            <p class="type-title-sm">Expanded</p>
+            <p class="type-body-sm">840–1199px</p>
+        </div>
+        <div class="rounded-corner-md bg-surface-container p-4 large:max-extra-large:bg-primary-container large:max-extra-large:text-on-primary-container">
+            <p class="type-title-sm">Large</p>
+            <p class="type-body-sm">1200–1599px</p>
+        </div>
+        <div class="rounded-corner-md bg-surface-container p-4 extra-large:bg-primary-container extra-large:text-on-primary-container">
+            <p class="type-title-sm">Extra-large</p>
+            <p class="type-body-sm">from 1600px</p>
+        </div>
+    </div>
+
+    <div class="overflow-x-auto rounded-corner-lg border border-structure">
+        <table class="w-full type-body-md" data-table>
+            <thead>
+                <tr>
+                    <th class="text-start">Class</th>
+                    <th class="text-start">Navigation</th>
+                    <th class="text-start">Panes</th>
+                    <th class="text-start">Dialogs and sheets</th>
+                    <th class="text-start">Margin</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Compact</td>
+                    <td>Navigation bar; the rail opens as a modal</td>
+                    <td>One</td>
+                    <td>Full-screen dialogs, bottom sheets for choices, date pickers as dialogs</td>
+                    <td>16px</td>
+                </tr>
+                <tr>
+                    <td>Medium</td>
+                    <td>Collapsed navigation rail</td>
+                    <td>One</td>
+                    <td>Basic dialogs, docked search and pickers</td>
+                    <td>24px</td>
+                </tr>
+                <tr>
+                    <td>Expanded</td>
+                    <td>Navigation rail, collapsible; starts collapsed</td>
+                    <td>Two: list-detail (<code>&lt;x-drawer pane&gt;</code>) or a 360px supporting pane</td>
+                    <td>Basic dialogs, side sheets</td>
+                    <td>24px</td>
+                </tr>
+                <tr>
+                    <td>Large</td>
+                    <td>Navigation rail, expanded by default</td>
+                    <td>Two; a fixed pane is 412px</td>
+                    <td>Basic dialogs, side sheets</td>
+                    <td>24px</td>
+                </tr>
+                <tr>
+                    <td>Extra-large</td>
+                    <td>Navigation rail, expanded</td>
+                    <td>Two, a third as a side sheet</td>
+                    <td>Basic dialogs, side sheets</td>
+                    <td>24px</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <p class="max-w-3xl type-body-md text-on-surface-variant">
+        <code>&lt;x-app-shell&gt;</code> does all of this: resize this showcase and watch the bar, the rail and the
+        content margin (<code>--material-margin</code>) change at 600, 840 and 1200px. A visitor who has chosen a rail
+        width keeps it; until then the rail follows the class.
+    </p>
+</section>
diff --git a/src/Showcase/Sections.php b/src/Showcase/Sections.php
index 19a3c47c..ece59f34 100644
--- a/src/Showcase/Sections.php
+++ b/src/Showcase/Sections.php
@@ -87,6 +87,7 @@ class Sections
             'shape' => ['title' => 'Shape', 'icon' => 'interests', 'group' => 'Foundations', 'description' => 'Corner radii and the 35 M3 Expressive shapes.'],
             'elevation' => ['title' => 'Elevation', 'icon' => 'layers', 'group' => 'Foundations', 'description' => 'Shadows for what floats over content.'],
             'motion' => ['title' => 'Motion', 'icon' => 'animation', 'group' => 'Foundations', 'description' => 'Spatial springs and effects easings.'],
+            'layout' => ['title' => 'Layout', 'icon' => 'devices', 'group' => 'Foundations', 'description' => 'M3\'s window size classes, what changes at each, and the app shell\'s response.'],
             'icons' => ['title' => 'Icons', 'icon' => 'emoji_symbols', 'group' => 'Foundations', 'description' => 'Every Material Symbol, searchable, outlined and filled.'],
             'buttons' => ['title' => 'Buttons', 'icon' => 'smart_button', 'group' => 'Actions', 'description' => 'Buttons, icon buttons, groups, split buttons and FABs.'],
             'menus' => ['title' => 'Menus', 'icon' => 'menu_open', 'group' => 'Actions', 'description' => 'Menus with items, groups, choices and shortcuts.'],