layout-style-css 2.1.0 → 3.0.0

package/dist/layout-style-css.css

@@ -1,11 +1,11 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
+@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
 
-/* layout-style-css bundle. Generated from focused styles/ modules by scripts/build.mjs. */
+/* layout-style-css v3 bundle. Generated from focused styles/ modules. */
 
-/* wrappers.css */
+/* foundation.css */
 /*
-  Shared structural tokens and wrapper geometry. Theme, type, borders, shadows,
-  and interactive states remain outside Layout Style's ownership boundary.
+  Foundation owns only shared spatial tokens, containment, and defensive
+  sizing. Theme and interaction libraries remain responsible for paint.
 */
 
 @layer ly.tokens {
@@ -25,57 +25,116 @@
     --ly-wrapper-prose: 68ch;
     --ly-wrapper-content: 72rem;
     --ly-wrapper-wide: 112rem;
-    --ly-wrapper-max: var(--ly-wrapper-content);
     --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
     --ly-safe-area-inline: max(
       env(safe-area-inset-left, 0px),
       env(safe-area-inset-right, 0px)
     );
+    --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
+    --ly-safe-area-block-end: env(safe-area-inset-bottom, 0px);
     --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
 
-    --ly-section-padding-block: clamp(3rem, 7vw, 6rem);
-    --ly-gap: var(--ly-space-5);
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-gap: var(--ly-profile-gap);
     --ly-grid-gap: var(--ly-gap);
     --ly-stack-gap: var(--ly-space-4);
     --ly-cluster-gap: var(--ly-space-3);
-    --ly-cover-min: 100svh;
+    --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
+    --ly-header-height: 4.5rem;
+    --ly-sticky-position: sticky;
+    --ly-cover-min: 100vh;
+    --ly-shell-min: 100vh;
+    --ly-scroll-max: min(70vh, 50rem);
+
     --ly-switcher-threshold: 42rem;
     --ly-sidebar-size: 18rem;
     --ly-sidebar-content-min: 50%;
     --ly-grid-columns: 12;
     --ly-grid-min: 16rem;
+    --ly-split-min: 20rem;
+    --ly-pane-min: 18rem;
     --ly-pane-size: 22rem;
+    --ly-media-min: 18rem;
     --ly-media-size: 14rem;
     --ly-reel-item-min: 16rem;
     --ly-reel-item-max: 28rem;
-    --ly-scroll-max: 70svh;
     --ly-frame-ratio: 16 / 9;
+    --ly-split-primary: 1fr;
+    --ly-split-secondary: 1fr;
 
     --ly-recipe-rail: 18rem;
     --ly-recipe-aside: 22rem;
-    --ly-card-grid-min: 16rem;
     --ly-gallery-min: 12rem;
-    --ly-card-size-sm: 10rem;
-    --ly-card-size-md: 14rem;
-    --ly-card-size-lg: 18rem;
-    --ly-header-height: 4.5rem;
-    --ly-z-header: 20;
-
-    /* V1 token aliases remain available so legacy selectors can preserve sizing. */
-    --ly-container-sm: var(--ly-wrapper-compact);
-    --ly-container-md: 56rem;
-    --ly-container-lg: var(--ly-wrapper-content);
-    --ly-container-xl: 88rem;
-    --ly-container-wide: var(--ly-wrapper-wide);
-    --ly-container-max: var(--ly-container-lg);
-    --ly-content-readable: var(--ly-wrapper-prose);
-    --ly-carousel-item-min: var(--ly-reel-item-min);
-    --ly-carousel-item-max: var(--ly-reel-item-max);
-    --ly-sidebar-min: 14rem;
-    --ly-sidebar-width: var(--ly-recipe-rail);
-    --ly-sidebar-max: var(--ly-recipe-aside);
-    --ly-pane-fixed: var(--ly-pane-size);
-    --ly-z-sidebar: 10;
+    --ly-card-grid-min: 16rem;
+
+    --ly-app-shell-medium-areas:
+      "header header"
+      "sidebar main"
+      "aside main"
+      "footer footer";
+    --ly-app-shell-medium-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), auto)
+      minmax(0, 1fr);
+    --ly-app-shell-wide-areas:
+      "sidebar header header"
+      "sidebar main aside"
+      "sidebar footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), auto)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+
+    --ly-dashboard-medium-areas:
+      "header header"
+      "nav nav"
+      "main aside"
+      "footer footer";
+    --ly-dashboard-medium-columns:
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+    --ly-dashboard-wide-areas:
+      "nav header header"
+      "nav main aside"
+      "nav footer footer";
+    --ly-dashboard-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), auto)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+
+    --ly-docs-wide-areas:
+      "header header"
+      "nav main"
+      "nav aside"
+      "footer footer";
+    --ly-docs-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), auto)
+      minmax(0, 1fr);
+    --ly-list-detail-wide-areas:
+      "primary secondary"
+      "actions actions";
+    --ly-list-detail-wide-columns:
+      minmax(min(100%, var(--ly-pane-size)), 0.7fr)
+      minmax(0, 1fr);
+    --ly-split-hero-wide-areas:
+      "content media"
+      "actions media";
+    --ly-split-hero-wide-columns:
+      minmax(0, var(--ly-split-primary, 1fr))
+      minmax(0, var(--ly-split-secondary, 1fr));
+
+    container-name: ly-scope;
+    container-type: inline-size;
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+
+  /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
+  @supports (height: 100dvh) {
+    :where(.ly-root) {
+      --ly-cover-min: 100dvh;
+      --ly-shell-min: 100dvh;
+      --ly-scroll-max: min(70dvh, 50rem);
+    }
   }
 }
 
@@ -86,45 +145,98 @@
   }
 
   :where(.ly-root) {
-    min-inline-size: 0;
     margin: 0;
   }
 
   :where(.ly-root img),
   :where(.ly-root svg),
   :where(.ly-root video),
-  :where(.ly-root canvas) {
+  :where(.ly-root canvas),
+  :where(.ly-root iframe) {
     max-inline-size: 100%;
   }
 }
 
+@layer ly.tokens {
+  @media (max-height: 44rem) {
+    :where(.ly-root) {
+      --ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
+      --ly-grid-gap: var(--ly-gap);
+      --ly-stack-gap: min(var(--ly-space-4), 3vh);
+      --ly-cluster-gap: min(var(--ly-space-3), 2vh);
+      --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
+      --ly-header-height: 3.5rem;
+      --ly-scroll-max: min(62vh, 34rem);
+    }
+
+    @supports (height: 100dvh) {
+      :where(.ly-root) {
+        --ly-stack-gap: min(var(--ly-space-4), 3dvh);
+        --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
+        --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
+        --ly-scroll-max: min(62dvh, 34rem);
+      }
+    }
+  }
+
+  @media (max-height: 30rem) {
+    :where(.ly-root) {
+      --ly-cover-min: auto;
+      --ly-shell-min: auto;
+      --ly-sticky-position: static;
+      --ly-section-padding-block: var(--ly-space-5);
+      --ly-scroll-max: max(12rem, calc(100vh - 8rem));
+    }
+
+    @supports (height: 100dvh) {
+      :where(.ly-root) {
+        --ly-scroll-max: max(12rem, calc(100dvh - 8rem));
+      }
+    }
+  }
+}
+
+/* wrappers.css */
+/* Wrappers provide fluid measures and become the nearest responsive scope. */
+
 @layer ly.wrappers {
   .ly-wrapper {
-    /* Personalities provide only the plain-wrapper default; explicit variants stay authoritative. */
     --ly-wrapper-max: var(--ly-personality-wrapper-max, var(--ly-wrapper-content));
+    --ly-wrapper-fluid-gutter: clamp(1rem, 3vw, 3rem);
+    --ly-wrapper-local-gutter: max(
+      var(--ly-wrapper-fluid-gutter),
+      var(--ly-safe-area-inline)
+    );
 
-    /* Symmetric safe-area compensation keeps logical gutters stable in either direction. */
-    container-name: ly-wrapper;
+    container-name: ly-scope;
     container-type: inline-size;
-    inline-size: min(100%, calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));
+    inline-size: min(100%, calc(var(--ly-wrapper-max) + (var(--ly-wrapper-local-gutter) * 2)));
+    max-inline-size: 100%;
     margin-inline: auto;
-    padding-inline: var(--ly-wrapper-gutter);
+    padding-inline: var(--ly-wrapper-local-gutter);
+  }
+
+  /* Container-relative gutters enhance the universally valid viewport fallback. */
+  @supports (width: 1cqi) {
+    .ly-wrapper {
+      --ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
+    }
   }
 
   .ly-wrapper--compact {
-    --ly-wrapper-max: 40rem;
+    --ly-wrapper-max: var(--ly-wrapper-compact);
   }
 
   .ly-wrapper--prose {
-    --ly-wrapper-max: 68ch;
+    --ly-wrapper-max: var(--ly-wrapper-prose);
   }
 
   .ly-wrapper--content {
-    --ly-wrapper-max: 72rem;
+    --ly-wrapper-max: var(--ly-wrapper-content);
   }
 
   .ly-wrapper--wide {
-    --ly-wrapper-max: 112rem;
+    --ly-wrapper-max: var(--ly-wrapper-wide);
   }
 
   .ly-wrapper--full {
@@ -132,18 +244,19 @@
   }
 
   .ly-wrapper--breakout {
+    --ly-wrapper-max: 100%;
     --ly-breakout-content-size: min(
       var(--ly-wrapper-content),
-      calc(100% - (var(--ly-wrapper-gutter) * 2))
+      calc(100% - (var(--ly-wrapper-local-gutter) * 2))
     );
     --ly-breakout-feature-size: min(
       var(--ly-wrapper-wide),
-      calc(100% - (var(--ly-wrapper-gutter) * 2))
+      calc(100% - (var(--ly-wrapper-local-gutter) * 2))
     );
 
     display: grid;
     grid-template-columns:
-      [full-start] minmax(min(100%, var(--ly-wrapper-gutter)), 1fr)
+      [full-start] minmax(min(100%, var(--ly-wrapper-local-gutter)), 1fr)
       [feature-start] minmax(
         0,
         calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2)
@@ -153,7 +266,7 @@
         0,
         calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2)
       )
-      [feature-end] minmax(min(100%, var(--ly-wrapper-gutter)), 1fr) [full-end];
+      [feature-end] minmax(min(100%, var(--ly-wrapper-local-gutter)), 1fr) [full-end];
     inline-size: 100%;
     padding-inline: 0;
   }
@@ -161,6 +274,7 @@
   .ly-wrapper--breakout > * {
     grid-column: content;
     min-inline-size: 0;
+    max-inline-size: 100%;
   }
 
   .ly-wrapper--breakout > :where(.ly-lane--content, [data-ly-lane="content"]) {
@@ -177,11 +291,14 @@
 }
 
 /* primitives.css */
-/* Reusable composition primitives own flow and sizing only. */
+/* Composition primitives use intrinsic sizing so their content chooses reflow points. */
 
 @layer ly.primitives {
   .ly-page {
-    min-block-size: 100svh;
+    min-block-size: 100vh;
+    min-block-size: 100dvh;
+    padding-block-start: var(--ly-safe-area-block-start);
+    padding-block-end: var(--ly-safe-area-block-end);
   }
 
   .ly-header,
@@ -198,9 +315,9 @@
   }
 
   .ly-header--sticky {
-    position: sticky;
+    position: var(--ly-sticky-position, sticky);
     inset-block-start: 0;
-    z-index: var(--ly-z-header);
+    z-index: var(--ly-z-header, 20);
   }
 
   .ly-section {
@@ -240,6 +357,7 @@
   .ly-cover {
     display: flex;
     flex-direction: column;
+    min-block-size: 100vh;
     min-block-size: var(--ly-cover-min);
     padding-block: var(--ly-cover-padding, var(--ly-space-5));
   }
@@ -269,6 +387,7 @@
   .ly-sidebar > :where(.ly-sidebar__side, [data-ly-sidebar="side"]) {
     flex-basis: var(--ly-sidebar-size);
     flex-grow: 1;
+    min-inline-size: min(100%, var(--ly-sidebar-size));
   }
 
   .ly-sidebar > :where(.ly-sidebar__content, [data-ly-sidebar="content"]) {
@@ -279,55 +398,44 @@
 
   .ly-grid {
     display: grid;
-    grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
-    gap: var(--ly-grid-gap);
-  }
-
-  .ly-grid--auto {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-grid-min)), 1fr));
+    gap: var(--ly-grid-gap);
   }
 
-  .ly-grid > *,
-  .ly-split > *,
-  .ly-panes > *,
-  .ly-media > * {
-    min-inline-size: 0;
+  .ly-grid--fixed {
+    grid-template-columns: repeat(var(--ly-grid-columns), minmax(0, 1fr));
   }
 
   .ly-split {
     display: grid;
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-split-min)), 1fr));
     gap: var(--ly-gap);
     align-items: var(--ly-split-align, center);
   }
 
   .ly-panes {
     display: grid;
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-pane-min)), 1fr));
     gap: var(--ly-gap);
   }
 
   .ly-media {
     display: grid;
-    grid-template-areas:
-      "media"
-      "content"
-      "actions";
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-media-min)), 1fr));
     gap: var(--ly-gap);
     align-items: var(--ly-media-align, start);
   }
 
-  .ly-media > :where(.ly-media__asset, [data-ly-media="asset"]) {
-    grid-area: media;
-  }
-
-  .ly-media > :where(.ly-media__content, [data-ly-media="content"]) {
-    grid-area: content;
+  .ly-media > :where(.ly-media__actions, [data-ly-media="actions"]) {
+    min-inline-size: min(100%, var(--ly-media-size));
   }
 
-  .ly-media > :where(.ly-media__actions, [data-ly-media="actions"]) {
-    grid-area: actions;
+  .ly-grid > *,
+  .ly-split > *,
+  .ly-panes > *,
+  .ly-media > * {
+    min-inline-size: 0;
+    min-block-size: 0;
   }
 
   .ly-reel {
@@ -336,7 +444,6 @@
     grid-auto-columns: minmax(min(100%, var(--ly-reel-item-min)), var(--ly-reel-item-max));
     gap: var(--ly-grid-gap);
     overflow-x: auto;
-    overflow-inline: auto;
     overscroll-behavior-inline: contain;
     scroll-snap-type: inline proximity;
   }
@@ -360,72 +467,49 @@
   .ly-scroll {
     min-block-size: 0;
     max-block-size: var(--ly-scroll-max);
-    overflow: auto;
-    overscroll-behavior: contain;
-  }
-
-  /* Unsupported container-query browsers retain this safe DOM-order stack. */
-}
-
-@layer ly.primitives {
-  @container (min-width: 48rem) {
-    .ly-split {
-      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
-    }
-
-    .ly-panes--2 {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-pane-size)), 0.7fr);
-    }
-
-    .ly-media {
-      grid-template-areas:
-        "media content"
-        "media actions";
-      grid-template-columns: minmax(min(100%, var(--ly-media-size)), auto) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 64rem) {
-    .ly-panes--3 {
-      grid-template-columns:
-        minmax(min(100%, var(--ly-pane-rail, 14rem)), 0.35fr)
-        minmax(0, 1fr)
-        minmax(min(100%, var(--ly-pane-rail, 14rem)), 0.35fr);
-    }
+    overflow-x: clip;
+    overflow-y: auto;
+    overscroll-behavior-block: contain;
   }
 }
 
 /* recipes.css */
 /*
-  Built-in recipes follow semantic mobile DOM order. Wider arrangements use
-  named areas so visual placement never changes keyboard or reading order.
+  Recipes preserve the narrow-screen DOM order. Automatic topology queries
+  consume inherited profile tokens and can be disabled per recipe.
 */
 
 @layer ly.recipes {
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"]),
-  :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
-  :where(.ly-docs, [data-ly-recipe="docs"]),
-  :where(.ly-list-detail, [data-ly-recipe="list-detail"]),
-  :where(.ly-split-hero, [data-ly-recipe="split-hero"]),
-  :where(.ly-gallery, [data-ly-recipe="gallery"]),
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-    container-name: ly-recipe;
+  :where(
+    [data-ly-recipe="app-shell"],
+    [data-ly-recipe="dashboard"],
+    [data-ly-recipe="docs"],
+    [data-ly-recipe="list-detail"],
+    [data-ly-recipe="split-hero"],
+    [data-ly-recipe="gallery"],
+    [data-ly-recipe="card-grid"]
+  ) {
+    container-name: ly-scope;
     container-type: inline-size;
     min-inline-size: 0;
+    min-block-size: 0;
   }
 
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"]),
-  :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
-  :where(.ly-docs, [data-ly-recipe="docs"]),
-  :where(.ly-list-detail, [data-ly-recipe="list-detail"]),
-  :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+  :where(
+    [data-ly-recipe="app-shell"],
+    [data-ly-recipe="dashboard"],
+    [data-ly-recipe="docs"],
+    [data-ly-recipe="list-detail"],
+    [data-ly-recipe="split-hero"]
+  ) {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: var(--ly-gap);
   }
 
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-    min-block-size: 100svh;
+  [data-ly-recipe="app-shell"] {
+    min-block-size: 100vh;
+    min-block-size: var(--ly-shell-min);
     grid-template-areas:
       "header"
       "sidebar"
@@ -435,16 +519,8 @@
     grid-template-rows: auto auto minmax(0, 1fr) auto auto;
   }
 
-  :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
-    grid-template-areas:
-      "header"
-      "nav"
-      "main"
-      "aside"
-      "footer";
-  }
-
-  :where(.ly-docs, [data-ly-recipe="docs"]) {
+  [data-ly-recipe="dashboard"],
+  [data-ly-recipe="docs"] {
     grid-template-areas:
       "header"
       "nav"
@@ -453,14 +529,14 @@
       "footer";
   }
 
-  :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
+  [data-ly-recipe="list-detail"] {
     grid-template-areas:
       "primary"
       "secondary"
       "actions";
   }
 
-  :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
+  [data-ly-recipe="split-hero"] {
     grid-template-areas:
       "content"
       "media"
@@ -468,271 +544,192 @@
     align-items: var(--ly-split-hero-align, center);
   }
 
-  :where(.ly-gallery, [data-ly-recipe="gallery"]),
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+  [data-ly-recipe="gallery"],
+  [data-ly-recipe="card-grid"] {
     display: grid;
     gap: var(--ly-grid-gap);
   }
 
-  :where(.ly-gallery, [data-ly-recipe="gallery"]) {
+  [data-ly-recipe="gallery"] {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-gallery-min)), 1fr));
   }
 
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
+  [data-ly-recipe="card-grid"] {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ly-card-grid-min)), 1fr));
   }
 
-  :where(.ly-gallery, [data-ly-recipe="gallery"]) > *,
-  :where(.ly-card-grid, [data-ly-recipe="card-grid"]) > * {
+  :where(
+    [data-ly-recipe="gallery"],
+    [data-ly-recipe="card-grid"]
+  )[data-ly-responsive="manual"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  :where(
+    [data-ly-recipe="app-shell"],
+    [data-ly-recipe="dashboard"],
+    [data-ly-recipe="docs"],
+    [data-ly-recipe="list-detail"],
+    [data-ly-recipe="split-hero"],
+    [data-ly-recipe="gallery"],
+    [data-ly-recipe="card-grid"]
+  ) > * {
     min-inline-size: 0;
+    min-block-size: 0;
   }
 
-  :where(.ly-area--header, [data-ly-area="header"]) {
+  [data-ly-area="header"] {
     grid-area: header;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--nav, [data-ly-area="nav"]) {
+  [data-ly-area="nav"] {
     grid-area: nav;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--main, [data-ly-area="main"]) {
+  [data-ly-area="sidebar"] {
+    grid-area: sidebar;
+  }
+
+  [data-ly-area="main"] {
     grid-area: main;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--aside, [data-ly-area="aside"]) {
+  [data-ly-area="aside"] {
     grid-area: aside;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--footer, [data-ly-area="footer"]) {
+  [data-ly-area="footer"] {
     grid-area: footer;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--content, [data-ly-area="content"]) {
+  [data-ly-area="content"] {
     grid-area: content;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--media, [data-ly-area="media"]) {
+  [data-ly-area="media"] {
     grid-area: media;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--actions, [data-ly-area="actions"]) {
+  [data-ly-area="actions"] {
     grid-area: actions;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--primary, [data-ly-area="primary"]) {
+  [data-ly-area="primary"] {
     grid-area: primary;
-    min-inline-size: 0;
   }
 
-  :where(.ly-area--secondary, [data-ly-area="secondary"]) {
+  [data-ly-area="secondary"] {
     grid-area: secondary;
-    min-inline-size: 0;
-  }
-
-  .ly-app-header {
-    grid-area: header;
-    min-inline-size: 0;
-  }
-
-  .ly-app-sidebar {
-    grid-area: sidebar;
-    min-inline-size: 0;
-  }
-
-  .ly-app-main {
-    grid-area: main;
-    min-inline-size: 0;
-  }
-
-  .ly-app-aside {
-    grid-area: aside;
-    min-inline-size: 0;
-  }
-
-  .ly-app-footer {
-    grid-area: footer;
-    min-inline-size: 0;
-  }
-
-  :where(.ly-app-shell, [data-ly-recipe="app-shell"])
-    > :where(.ly-area--nav, [data-ly-area="nav"]) {
-    grid-area: sidebar;
   }
 
-  /*
-    A recipe responds to its nearest ancestor container and then becomes the
-    containment scope for nested compositions. Standalone roots keep the safe
-    mobile template when no ancestor container is present.
-  */
-  @container (min-width: 48rem) {
-    :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header"
-        "sidebar main"
-        "aside main"
-        "footer footer";
-      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
-    }
-
-    :where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
-      grid-template-areas:
-        "header header"
-        "nav nav"
-        "main aside"
-        "footer footer";
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
-    }
-
-    :where(.ly-docs, [data-ly-recipe="docs"]) {
-      grid-template-areas:
-        "header header"
-        "nav main"
-        "nav aside"
-        "footer footer";
-      grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
-    }
-
-    :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-areas:
-        "primary secondary"
-        "actions actions";
-      grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.7fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-areas:
-        "content media"
-        "actions media";
-      grid-template-columns: minmax(0, var(--ly-split-primary, 1fr)) minmax(0, var(--ly-split-secondary, 1fr));
-    }
-
-    :where(.ly-gallery, [data-ly-recipe="gallery"]) {
-      --ly-gallery-min: 14rem;
-    }
-
-    :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-      --ly-card-grid-min: 18rem;
+  @container ly-scope (min-width: 42rem) {
+    [data-ly-recipe="split-hero"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-split-hero-wide-areas);
+      grid-template-columns: var(--ly-split-hero-wide-columns);
     }
   }
 
-  @container (min-width: 64rem) {
-    :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header header"
-        "sidebar main aside"
-        "sidebar footer footer";
-      grid-template-columns:
-        minmax(min(100%, var(--ly-recipe-rail)), auto)
-        minmax(0, 1fr)
-        minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+  @container ly-scope (min-width: 44rem) {
+    [data-ly-recipe="list-detail"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-list-detail-wide-areas);
+      grid-template-columns: var(--ly-list-detail-wide-columns);
     }
+  }
 
-    :where(.ly-dashboard, [data-ly-recipe="dashboard"]),
-    :where(.ly-docs, [data-ly-recipe="docs"]) {
-      grid-template-areas:
-        "nav header header"
-        "nav main aside"
-        "nav footer footer";
-      grid-template-columns:
-        minmax(min(100%, var(--ly-recipe-rail)), auto)
-        minmax(0, 1fr)
-        minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
+  @container ly-scope (min-width: 48rem) {
+    [data-ly-recipe="docs"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-docs-wide-areas);
+      grid-template-columns: var(--ly-docs-wide-columns);
     }
+  }
 
-    :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr);
+  @container ly-scope (min-width: 52rem) {
+    [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-app-shell-medium-areas);
+      grid-template-columns: var(--ly-app-shell-medium-columns);
     }
 
-    :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+    [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-dashboard-medium-areas);
+      grid-template-columns: var(--ly-dashboard-medium-columns);
     }
+  }
 
-    :where(.ly-gallery, [data-ly-recipe="gallery"]) {
-      --ly-gallery-min: 16rem;
+  @container ly-scope (min-width: 72rem) {
+    [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-app-shell-wide-areas);
+      grid-template-columns: var(--ly-app-shell-wide-columns);
     }
 
-    :where(.ly-card-grid, [data-ly-recipe="card-grid"]) {
-      --ly-card-grid-min: 20rem;
+    [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
+      grid-template-areas: var(--ly-dashboard-wide-areas);
+      grid-template-columns: var(--ly-dashboard-wide-columns);
     }
   }
 }
 
 /* utilities.css */
+/* Optional structural utilities expose direct token overrides without breakpoint tiers. */
+
 @layer ly.utilities {
   .ly-cols-1 { --ly-grid-columns: 1; }
   .ly-cols-2 { --ly-grid-columns: 2; }
   .ly-cols-3 { --ly-grid-columns: 3; }
   .ly-cols-4 { --ly-grid-columns: 4; }
-  .ly-cols-5 { --ly-grid-columns: 5; }
   .ly-cols-6 { --ly-grid-columns: 6; }
-  .ly-cols-7 { --ly-grid-columns: 7; }
-  .ly-cols-8 { --ly-grid-columns: 8; }
-  .ly-cols-9 { --ly-grid-columns: 9; }
-  .ly-cols-10 { --ly-grid-columns: 10; }
-  .ly-cols-11 { --ly-grid-columns: 11; }
   .ly-cols-12 { --ly-grid-columns: 12; }
-  .ly-cols-16 { --ly-grid-columns: 16; }
 
   .ly-span-1 { grid-column: span 1; }
   .ly-span-2 { grid-column: span 2; }
   .ly-span-3 { grid-column: span 3; }
   .ly-span-4 { grid-column: span 4; }
-  .ly-span-5 { grid-column: span 5; }
-  .ly-span-6 { grid-column: span 6; }
-  .ly-span-7 { grid-column: span 7; }
-  .ly-span-8 { grid-column: span 8; }
-  .ly-span-9 { grid-column: span 9; }
-  .ly-span-10 { grid-column: span 10; }
-  .ly-span-11 { grid-column: span 11; }
-  .ly-span-12 { grid-column: span 12; }
-  .ly-span-13 { grid-column: span 13; }
-  .ly-span-14 { grid-column: span 14; }
-  .ly-span-15 { grid-column: span 15; }
-  .ly-span-16 { grid-column: span 16; }
   .ly-span-full { grid-column: 1 / -1; }
 
-  .ly-gap-0 { --ly-gap: var(--ly-space-0); --ly-grid-gap: var(--ly-space-0); --ly-stack-gap: var(--ly-space-0); --ly-cluster-gap: var(--ly-space-0); }
-  .ly-gap-1 { --ly-gap: var(--ly-space-1); --ly-grid-gap: var(--ly-space-1); --ly-stack-gap: var(--ly-space-1); --ly-cluster-gap: var(--ly-space-1); }
-  .ly-gap-2 { --ly-gap: var(--ly-space-2); --ly-grid-gap: var(--ly-space-2); --ly-stack-gap: var(--ly-space-2); --ly-cluster-gap: var(--ly-space-2); }
-  .ly-gap-3 { --ly-gap: var(--ly-space-3); --ly-grid-gap: var(--ly-space-3); --ly-stack-gap: var(--ly-space-3); --ly-cluster-gap: var(--ly-space-3); }
-  .ly-gap-4 { --ly-gap: var(--ly-space-4); --ly-grid-gap: var(--ly-space-4); --ly-stack-gap: var(--ly-space-4); --ly-cluster-gap: var(--ly-space-4); }
-  .ly-gap-5 { --ly-gap: var(--ly-space-5); --ly-grid-gap: var(--ly-space-5); --ly-stack-gap: var(--ly-space-5); --ly-cluster-gap: var(--ly-space-5); }
-  .ly-gap-6 { --ly-gap: var(--ly-space-6); --ly-grid-gap: var(--ly-space-6); --ly-stack-gap: var(--ly-space-6); --ly-cluster-gap: var(--ly-space-6); }
-  .ly-gap-7 { --ly-gap: var(--ly-space-7); --ly-grid-gap: var(--ly-space-7); --ly-stack-gap: var(--ly-space-7); --ly-cluster-gap: var(--ly-space-7); }
-  .ly-gap-8 { --ly-gap: var(--ly-space-8); --ly-grid-gap: var(--ly-space-8); --ly-stack-gap: var(--ly-space-8); --ly-cluster-gap: var(--ly-space-8); }
-  .ly-gap-9 { --ly-gap: var(--ly-space-9); --ly-grid-gap: var(--ly-space-9); --ly-stack-gap: var(--ly-space-9); --ly-cluster-gap: var(--ly-space-9); }
+  .ly-gap-0 {
+    --ly-gap: var(--ly-space-0);
+    --ly-grid-gap: var(--ly-space-0);
+    --ly-stack-gap: var(--ly-space-0);
+    --ly-cluster-gap: var(--ly-space-0);
+  }
+
+  .ly-gap-2 {
+    --ly-gap: var(--ly-space-2);
+    --ly-grid-gap: var(--ly-space-2);
+    --ly-stack-gap: var(--ly-space-2);
+    --ly-cluster-gap: var(--ly-space-2);
+  }
+
+  .ly-gap-4 {
+    --ly-gap: var(--ly-space-4);
+    --ly-grid-gap: var(--ly-space-4);
+    --ly-stack-gap: var(--ly-space-4);
+    --ly-cluster-gap: var(--ly-space-4);
+  }
+
+  .ly-gap-6 {
+    --ly-gap: var(--ly-space-6);
+    --ly-grid-gap: var(--ly-space-6);
+    --ly-stack-gap: var(--ly-space-6);
+    --ly-cluster-gap: var(--ly-space-6);
+  }
+
+  .ly-gap-8 {
+    --ly-gap: var(--ly-space-8);
+    --ly-grid-gap: var(--ly-space-8);
+    --ly-stack-gap: var(--ly-space-8);
+    --ly-cluster-gap: var(--ly-space-8);
+  }
 
   .ly-pad-0 { padding: var(--ly-space-0); }
-  .ly-pad-1 { padding: var(--ly-space-1); }
   .ly-pad-2 { padding: var(--ly-space-2); }
-  .ly-pad-3 { padding: var(--ly-space-3); }
   .ly-pad-4 { padding: var(--ly-space-4); }
-  .ly-pad-5 { padding: var(--ly-space-5); }
   .ly-pad-6 { padding: var(--ly-space-6); }
-  .ly-pad-7 { padding: var(--ly-space-7); }
   .ly-pad-8 { padding: var(--ly-space-8); }
-  .ly-pad-9 { padding: var(--ly-space-9); }
-
-  .ly-px-4 { padding-inline: var(--ly-space-4); }
-  .ly-px-6 { padding-inline: var(--ly-space-6); }
-  .ly-px-8 { padding-inline: var(--ly-space-8); }
-  .ly-py-4 { padding-block: var(--ly-space-4); }
-  .ly-py-6 { padding-block: var(--ly-space-6); }
-  .ly-py-8 { padding-block: var(--ly-space-8); }
 
   .ly-mx-auto { margin-inline: auto; }
   .ly-w-full { inline-size: 100%; }
   .ly-h-full { block-size: 100%; }
-  .ly-min-h-screen { min-block-size: 100svh; }
-  .ly-bleed { inline-size: 100vw; margin-inline: calc(50% - 50vw); }
+  .ly-min-h-screen { min-block-size: 100vh; min-block-size: 100dvh; }
   .ly-overflow-auto { overflow: auto; }
   .ly-overflow-hidden { overflow: hidden; }
 
@@ -746,16 +743,12 @@
   .ly-justify-between { justify-content: space-between; }
 
   .ly-frame-1x1 { --ly-frame-ratio: 1 / 1; }
-  .ly-frame-2x1 { --ly-frame-ratio: 2 / 1; }
   .ly-frame-3x2 { --ly-frame-ratio: 3 / 2; }
   .ly-frame-4x3 { --ly-frame-ratio: 4 / 3; }
   .ly-frame-16x9 { --ly-frame-ratio: 16 / 9; }
   .ly-frame-21x9 { --ly-frame-ratio: 21 / 9; }
 
-  .ly-hidden { display: none !important; }
-
-  .ly-show-md-up,
-  .ly-show-lg-up {
+  .ly-hidden {
     display: none !important;
   }
 
@@ -770,739 +763,332 @@
     clip-path: inset(50%) !important;
     white-space: nowrap !important;
   }
-
-  /* Explicit escape hatches require consumers to verify focus and reading order. */
-  .ly-order-first { order: -1; }
-  .ly-order-normal { order: 0; }
-  .ly-order-last { order: 999; }
-  .ly-order-1 { order: 1; }
-  .ly-order-2 { order: 2; }
-  .ly-order-3 { order: 3; }
-  .ly-order-4 { order: 4; }
-  .ly-order-5 { order: 5; }
-  .ly-order-6 { order: 6; }
-
-  @container (min-width: 48rem) {
-    .ly-md-cols-1 { --ly-grid-columns: 1; }
-    .ly-md-cols-2 { --ly-grid-columns: 2; }
-    .ly-md-cols-3 { --ly-grid-columns: 3; }
-    .ly-md-cols-4 { --ly-grid-columns: 4; }
-    .ly-md-cols-6 { --ly-grid-columns: 6; }
-    .ly-md-cols-8 { --ly-grid-columns: 8; }
-    .ly-md-cols-12 { --ly-grid-columns: 12; }
-    .ly-md-cols-16 { --ly-grid-columns: 16; }
-    .ly-show-md-up { display: revert !important; }
-
-    .ly-md-order-first { order: -1; }
-    .ly-md-order-normal { order: 0; }
-    .ly-md-order-last { order: 999; }
-    .ly-md-order-1 { order: 1; }
-    .ly-md-order-2 { order: 2; }
-    .ly-md-order-3 { order: 3; }
-    .ly-md-order-4 { order: 4; }
-    .ly-md-order-5 { order: 5; }
-    .ly-md-order-6 { order: 6; }
-  }
-
-  @container (min-width: 64rem) {
-    .ly-lg-cols-1 { --ly-grid-columns: 1; }
-    .ly-lg-cols-2 { --ly-grid-columns: 2; }
-    .ly-lg-cols-3 { --ly-grid-columns: 3; }
-    .ly-lg-cols-4 { --ly-grid-columns: 4; }
-    .ly-lg-cols-6 { --ly-grid-columns: 6; }
-    .ly-lg-cols-8 { --ly-grid-columns: 8; }
-    .ly-lg-cols-12 { --ly-grid-columns: 12; }
-    .ly-lg-cols-16 { --ly-grid-columns: 16; }
-    .ly-show-lg-up { display: revert !important; }
-
-    .ly-lg-order-first { order: -1; }
-    .ly-lg-order-normal { order: 0; }
-    .ly-lg-order-last { order: 999; }
-    .ly-lg-order-1 { order: 1; }
-    .ly-lg-order-2 { order: 2; }
-    .ly-lg-order-3 { order: 3; }
-    .ly-lg-order-4 { order: 4; }
-    .ly-lg-order-5 { order: 5; }
-    .ly-lg-order-6 { order: 6; }
-  }
 }
 
 /* personalities/minimal-saas.css */
-/* Layout style: minimal-saas. A measured left rail keeps work areas predictable. */
-
-@layer ly.personalities.minimal_saas {
+@layer ly.personalities.minimal-saas {
   :where(.ly-root[data-ly-layout="minimal-saas"]) {
+    --ly-personality-wrapper-max: 88rem;
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 16rem;
     --ly-recipe-rail: 15rem;
     --ly-recipe-aside: 16rem;
-    --ly-grid-columns: 4;
-    --ly-grid-min: 16rem;
-    --ly-personality-wrapper-max: 88rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  /* Named areas rearrange the shell without changing its mobile DOM or focus order. */
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="minimal-saas"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header header"
-        "sidebar main aside"
-        "sidebar footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 15rem), 0.24fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 16rem), 0.28fr);
-    }
-
-    :where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 2;
-    }
+    --ly-split-primary: 1.05fr;
+    --ly-split-secondary: 0.95fr;
   }
 }
 
 /* personalities/bento.css */
-/* Layout style: bento. A full-width shell and staggered spans form modular tiles. */
-
 @layer ly.personalities.bento {
   :where(.ly-root[data-ly-layout="bento"]) {
-    --ly-grid-columns: 6;
-    --ly-grid-min: 12rem;
-    --ly-card-grid-min: 13rem;
     --ly-personality-wrapper-max: 112rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="bento"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header header"
-        "sidebar main main"
-        "aside main main"
-        "footer footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns:
-        minmax(min(100%, 14rem), 0.3fr)
-        minmax(0, 1fr)
-        minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="bento"])
-      :where(.ly-card-grid, [data-ly-recipe="card-grid"])
-      > :nth-child(6n + 1) {
-      grid-column: span 2;
-    }
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 12rem;
+    --ly-card-grid-min: 14rem;
+    --ly-gallery-min: 11rem;
+    --ly-recipe-rail: 14rem;
+    --ly-recipe-aside: 18rem;
+    --ly-app-shell-wide-areas:
+      "header header header"
+      "sidebar main main"
+      "aside main main"
+      "footer footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.3fr)
+      minmax(0, 1fr)
+      minmax(0, 1fr);
   }
 }
 
 /* personalities/maximalist.css */
-/* Layout style: maximalist. A full-bleed four-track mosaic favors dramatic spans. */
-
 @layer ly.personalities.maximalist {
   :where(.ly-root[data-ly-layout="maximalist"]) {
-    --ly-grid-columns: 12;
-    --ly-grid-min: 10rem;
     --ly-personality-wrapper-max: 100%;
-    --ly-card-grid-min: 12rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="maximalist"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 56rem) {
-    :where(.ly-root[data-ly-layout="maximalist"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header header header"
-        "main main sidebar aside"
-        "main main footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(0, 1.4fr)
-        minmax(0, 0.6fr)
-        minmax(min(100%, 15rem), 0.32fr)
-        minmax(min(100%, 18rem), 0.38fr);
-    }
-
-    :where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) {
-      grid-column: span 3;
-      grid-row: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="maximalist"])
-      :where(.ly-gallery, [data-ly-recipe="gallery"])
-      > :nth-child(5n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
+    --ly-profile-gap: var(--ly-space-7);
+    --ly-grid-min: 10rem;
+    --ly-card-grid-min: 13rem;
+    --ly-gallery-min: 10rem;
+    --ly-recipe-rail: 15rem;
+    --ly-recipe-aside: 18rem;
+    --ly-app-shell-wide-areas:
+      "header header header header"
+      "main main sidebar aside"
+      "main main footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1.4fr)
+      minmax(0, 0.6fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.32fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.38fr);
   }
 }
 
 /* personalities/bauhaus.css */
-/* Layout style: bauhaus. A left rail anchors an intentionally asymmetric grid. */
-
 @layer ly.personalities.bauhaus {
   :where(.ly-root[data-ly-layout="bauhaus"]) {
+    --ly-personality-wrapper-max: 96rem;
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 13rem;
     --ly-recipe-rail: 14rem;
     --ly-recipe-aside: 18rem;
-    --ly-grid-columns: 6;
-    --ly-grid-min: 13rem;
-    --ly-personality-wrapper-max: 96rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  /* Cap the fallback rail until the wider personality template is eligible. */
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="bauhaus"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 52rem) {
-    :where(.ly-root[data-ly-layout="bauhaus"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header header aside"
-        "sidebar main main aside"
-        "sidebar footer footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 14rem), 0.24fr)
-        minmax(0, 0.7fr)
-        minmax(0, 1.3fr)
-        minmax(min(100%, 18rem), 0.3fr);
-    }
-
-    :where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
+    --ly-app-shell-wide-areas:
+      "header header header header"
+      "sidebar main main aside"
+      "sidebar footer footer aside";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.24fr)
+      minmax(0, 0.7fr)
+      minmax(0, 1.3fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.3fr);
   }
 }
 
 /* personalities/tactile.css */
-/* Layout style: tactile. A compact left rail leaves a broad, steady work lane. */
-
 @layer ly.personalities.tactile {
   :where(.ly-root[data-ly-layout="tactile"]) {
+    --ly-personality-wrapper-max: 82rem;
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 15rem;
     --ly-recipe-rail: 17rem;
     --ly-recipe-aside: 20rem;
-    --ly-grid-columns: 5;
-    --ly-grid-min: 15rem;
-    --ly-personality-wrapper-max: 82rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="tactile"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header"
-        "sidebar main"
-        "sidebar aside"
-        "sidebar footer";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns: minmax(min(100%, 17rem), 0.28fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-ly-layout="tactile"]) .ly-grid > :nth-child(5n + 2) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="tactile"])
-      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(min(100%, 20rem), 0.42fr) minmax(0, 0.58fr);
-    }
+    --ly-app-shell-wide-areas:
+      "header header"
+      "sidebar main"
+      "aside main"
+      "footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
+      minmax(0, 1fr);
+    --ly-list-detail-wide-columns:
+      minmax(min(100%, var(--ly-pane-size)), 0.5fr)
+      minmax(0, 0.9fr);
   }
 }
 
 /* personalities/neumorphism.css */
-/* Layout style: neumorphism. A calm right rail preserves a compact workspace. */
-
 @layer ly.personalities.neumorphism {
   :where(.ly-root[data-ly-layout="neumorphism"]) {
+    --ly-personality-wrapper-max: 84rem;
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 17rem;
     --ly-recipe-rail: 17rem;
     --ly-recipe-aside: 19rem;
-    --ly-grid-columns: 4;
-    --ly-grid-min: 17rem;
-    --ly-personality-wrapper-max: 84rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="neumorphism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 52rem) {
-    :where(.ly-root[data-ly-layout="neumorphism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header sidebar"
-        "main sidebar"
-        "aside sidebar"
-        "footer sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, 17rem), 0.3fr);
-    }
-
-    :where(.ly-root[data-ly-layout="neumorphism"]) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="neumorphism"])
-      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(0, 0.58fr) minmax(min(100%, 19rem), 0.42fr);
-    }
+    --ly-app-shell-wide-areas:
+      "header sidebar"
+      "main sidebar"
+      "aside sidebar"
+      "footer sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
+    --ly-list-detail-wide-columns:
+      minmax(0, 1.1fr)
+      minmax(min(100%, var(--ly-pane-size)), 0.7fr);
   }
 }
 
 /* personalities/retrofuturism.css */
-/* Layout style: retrofuturism. Twin rails frame a focused central work zone. */
-
 @layer ly.personalities.retrofuturism {
   :where(.ly-root[data-ly-layout="retrofuturism"]) {
+    --ly-personality-wrapper-max: 106rem;
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 14rem;
     --ly-recipe-aside: 17rem;
-    --ly-grid-columns: 6;
-    --ly-grid-min: 14rem;
-    --ly-personality-wrapper-max: 106rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="retrofuturism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header aside"
-        "sidebar main aside"
-        "sidebar footer aside";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 14rem), 0.24fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 17rem), 0.3fr);
-    }
-
-    :where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) {
-      grid-column: span 2;
-    }
+    --ly-app-shell-wide-areas:
+      "sidebar header aside"
+      "sidebar main aside"
+      "sidebar footer aside";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.24fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.3fr);
   }
 }
 
 /* personalities/brutalism.css */
-/* Layout style: brutalism. A blunt right rail counters a broad primary plane. */
-
 @layer ly.personalities.brutalism {
   :where(.ly-root[data-ly-layout="brutalism"]) {
-    --ly-recipe-rail: 18rem;
-    --ly-recipe-aside: 16rem;
-    --ly-grid-columns: 6;
-    --ly-grid-min: 14rem;
     --ly-personality-wrapper-max: 100rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="brutalism"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "main aside sidebar"
-        "footer footer sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(0, 1.3fr)
-        minmax(min(100%, 16rem), 0.7fr)
-        minmax(min(100%, 18rem), 0.34fr);
-    }
-
-    :where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) {
-      grid-column: span 2;
-    }
+    --ly-profile-gap: var(--ly-space-3);
+    --ly-grid-min: 14rem;
+    --ly-recipe-rail: 16rem;
+    --ly-recipe-aside: 18rem;
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "main aside sidebar"
+      "footer footer sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1.3fr)
+      minmax(0, 0.7fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.34fr);
   }
 }
 
 /* personalities/cyberpunk.css */
-/* Layout style: cyberpunk. A narrow command rail fronts a dense three-lane shell. */
-
 @layer ly.personalities.cyberpunk {
   :where(.ly-root[data-ly-layout="cyberpunk"]) {
+    --ly-personality-wrapper-max: 112rem;
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 12rem;
     --ly-recipe-rail: 13rem;
     --ly-recipe-aside: 19rem;
-    --ly-grid-columns: 8;
-    --ly-grid-min: 12rem;
-    --ly-personality-wrapper-max: 112rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 44rem) {
-    :where(.ly-root[data-ly-layout="cyberpunk"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header aside"
-        "sidebar main aside"
-        "sidebar footer aside";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 13rem), 0.2fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 19rem), 0.32fr);
-    }
-
-    :where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) {
-      grid-column: span 3;
-    }
+    --ly-app-shell-wide-areas:
+      "sidebar header header"
+      "sidebar main aside"
+      "sidebar footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.2fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.32fr);
   }
 }
 
 /* personalities/y2k.css */
-/* Layout style: y2k. A tall right rail frames a reversed supporting workspace. */
-
 @layer ly.personalities.y2k {
   :where(.ly-root[data-ly-layout="y2k"]) {
-    --ly-recipe-rail: 16rem;
-    --ly-recipe-aside: 18rem;
-    --ly-grid-columns: 5;
-    --ly-grid-min: 13rem;
     --ly-personality-wrapper-max: 90rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="y2k"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "aside main sidebar"
-        "footer footer sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 18rem), 0.34fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 16rem), 0.28fr);
-    }
-
-    :where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
-      grid-column: span 3;
-    }
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 13rem;
+    --ly-recipe-rail: 18rem;
+    --ly-recipe-aside: 16rem;
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "aside main sidebar"
+      "footer footer sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-aside)), 0.34fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.28fr);
   }
 }
 
 /* personalities/retro-glass.css */
-/* Layout style: retro-glass. A stepped right rail floats beside a wide stage. */
-
-@layer ly.personalities.retro_glass {
+@layer ly.personalities.retro-glass {
   :where(.ly-root[data-ly-layout="retro-glass"]) {
-    --ly-recipe-rail: 18rem;
-    --ly-recipe-aside: 20rem;
-    --ly-grid-columns: 8;
-    --ly-grid-min: 15rem;
     --ly-personality-wrapper-max: 104rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="retro-glass"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 56rem) {
-    :where(.ly-root[data-ly-layout="retro-glass"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "main main sidebar"
-        "aside footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(0, 1.25fr)
-        minmax(0, 0.75fr)
-        minmax(min(100%, 18rem), 0.32fr);
-    }
-
-    :where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 15rem;
+    --ly-recipe-rail: 18rem;
+    --ly-recipe-aside: 18rem;
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "main main sidebar"
+      "aside footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1.25fr)
+      minmax(0, 0.75fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.32fr);
   }
 }
 
 /* personalities/f-pattern.css */
-/* Layout style: f-pattern. A left rail supports a wide first-reading column. */
-
-@layer ly.personalities.f_pattern {
+@layer ly.personalities.f-pattern {
   :where(.ly-root[data-ly-layout="f-pattern"]) {
+    --ly-personality-wrapper-max: 92rem;
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 16rem;
     --ly-recipe-aside: 18rem;
-    --ly-grid-columns: 6;
-    --ly-grid-min: 14rem;
-    --ly-personality-wrapper-max: 92rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="f-pattern"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 56rem) {
-    :where(.ly-root[data-ly-layout="f-pattern"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header header"
-        "sidebar main aside"
-        "sidebar footer aside";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 16rem), 0.26fr)
-        minmax(0, 1.35fr)
-        minmax(min(100%, 18rem), 0.65fr);
-    }
-
-    :where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-ly-layout="f-pattern"])
-      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
-    }
+    --ly-app-shell-wide-areas:
+      "sidebar header header"
+      "sidebar main aside"
+      "sidebar footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.26fr)
+      minmax(0, 1.35fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.65fr);
+    --ly-split-hero-wide-columns:
+      minmax(0, 1.8fr)
+      minmax(0, 0.8fr);
   }
 }
 
 /* personalities/z-pattern.css */
-/* Layout style: z-pattern. A right rail closes a diagonal reading progression. */
-
-@layer ly.personalities.z_pattern {
+@layer ly.personalities.z-pattern {
   :where(.ly-root[data-ly-layout="z-pattern"]) {
+    --ly-personality-wrapper-max: 108rem;
+    --ly-profile-gap: var(--ly-space-5);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 17rem;
     --ly-recipe-aside: 19rem;
-    --ly-grid-columns: 8;
-    --ly-grid-min: 14rem;
-    --ly-personality-wrapper-max: 108rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="z-pattern"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 60rem) {
-    :where(.ly-root[data-ly-layout="z-pattern"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header sidebar"
-        "main aside sidebar"
-        "footer aside sidebar";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(0, 1.45fr)
-        minmax(min(100%, 19rem), 0.55fr)
-        minmax(min(100%, 17rem), 0.3fr);
-    }
-
-    :where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
-      grid-column: span 2;
-      align-self: end;
-    }
-
-    :where(.ly-root[data-ly-layout="z-pattern"])
-      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
-    }
+    --ly-app-shell-wide-areas:
+      "header header sidebar"
+      "main aside sidebar"
+      "footer aside sidebar";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1.45fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.55fr)
+      minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
+    --ly-split-hero-wide-columns:
+      minmax(0, 1.5fr)
+      minmax(0, 0.5fr);
   }
 }
 
 /* personalities/split-screen.css */
-/* Layout style: split-screen. Equal tracks keep two primary experiences in balance. */
-
-@layer ly.personalities.split_screen {
+@layer ly.personalities.split-screen {
   :where(.ly-root[data-ly-layout="split-screen"]) {
-    --ly-grid-columns: 2;
-    --ly-grid-min: 20rem;
     --ly-personality-wrapper-max: 100%;
-    --ly-split-primary: 1fr;
-    --ly-split-secondary: 1fr;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="split-screen"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header"
-        "main sidebar"
-        "aside sidebar"
-        "footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto auto;
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
-
-    :where(.ly-root[data-ly-layout="split-screen"])
-      :where(
-        .ly-split,
-        .ly-split-hero,
-        [data-ly-recipe="split-hero"],
-        .ly-list-detail,
-        [data-ly-recipe="list-detail"]
-      ) {
-      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    }
+    --ly-profile-gap: var(--ly-space-4);
+    --ly-grid-min: 20rem;
+    /*
+      Fixed preferred halves leave a shrink-safe center track in recipes that
+      retain the shared three-column dashboard topology.
+    */
+    --ly-recipe-rail: 24rem;
+    --ly-recipe-aside: 24rem;
+    --ly-app-shell-wide-areas:
+      "header header"
+      "main sidebar"
+      "aside sidebar"
+      "footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(0, 1fr)
+      minmax(0, 1fr);
+    --ly-split-hero-wide-columns:
+      minmax(0, 1fr)
+      minmax(0, 1fr);
+    --ly-list-detail-wide-columns:
+      minmax(0, 1fr)
+      minmax(0, 1fr);
   }
 }
 
 /* personalities/mondrian.css */
-/* Layout style: mondrian. Unequal zones and spanning blocks create a strict mosaic. */
-
 @layer ly.personalities.mondrian {
   :where(.ly-root[data-ly-layout="mondrian"]) {
+    --ly-personality-wrapper-max: 112rem;
+    --ly-profile-gap: var(--ly-space-3);
+    --ly-grid-min: 11rem;
     --ly-recipe-rail: 13rem;
     --ly-recipe-aside: 18rem;
-    --ly-grid-columns: 10;
-    --ly-grid-min: 11rem;
-    --ly-personality-wrapper-max: 112rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="mondrian"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 52rem) {
-    :where(.ly-root[data-ly-layout="mondrian"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "sidebar header header"
-        "sidebar main aside"
-        "footer footer aside";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 13rem), 0.22fr)
-        minmax(0, 1.45fr)
-        minmax(min(100%, 18rem), 0.55fr);
-    }
-
-    :where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
+    --ly-app-shell-wide-areas:
+      "sidebar header header"
+      "sidebar main aside"
+      "footer footer aside";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.22fr)
+      minmax(0, 1.45fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.55fr);
   }
 }
 
 /* personalities/synthwave.css */
-/* Layout style: synthwave. A cinematic center stage sits between support zones. */
-
 @layer ly.personalities.synthwave {
   :where(.ly-root[data-ly-layout="synthwave"]) {
+    --ly-personality-wrapper-max: 112rem;
+    --ly-profile-gap: var(--ly-space-6);
+    --ly-grid-min: 14rem;
     --ly-recipe-rail: 16rem;
     --ly-recipe-aside: 20rem;
-    --ly-grid-columns: 12;
-    --ly-grid-min: 14rem;
-    --ly-reel-item-max: 34rem;
-    --ly-personality-wrapper-max: 112rem;
-
-    container-name: ly-personality;
-    container-type: inline-size;
-    min-inline-size: 0;
-  }
-
-  @container ly-personality (min-width: 48rem) {
-    :where(.ly-root[data-ly-layout="synthwave"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container ly-personality (min-width: 64rem) {
-    :where(.ly-root[data-ly-layout="synthwave"])
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-areas:
-        "header header header"
-        "sidebar main aside"
-        "footer footer footer";
-      grid-template-rows: auto minmax(0, 1fr) auto;
-      grid-template-columns:
-        minmax(min(100%, 16rem), 0.28fr)
-        minmax(0, 1fr)
-        minmax(min(100%, 20rem), 0.34fr);
-    }
-
-    :where(.ly-root[data-ly-layout="synthwave"]) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 3;
-    }
-
-    :where(.ly-root[data-ly-layout="synthwave"]) .ly-reel {
-      grid-auto-columns: minmax(min(100%, 20rem), var(--ly-reel-item-max));
-    }
+    --ly-app-shell-wide-areas:
+      "header header header"
+      "sidebar main aside"
+      "footer footer footer";
+    --ly-app-shell-wide-columns:
+      minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
+      minmax(0, 1fr)
+      minmax(min(100%, var(--ly-recipe-aside)), 0.34fr);
+    --ly-reel-item-min: 20rem;
   }
 }