layout-style-css 2.1.1 → 3.0.0

package/dist/legacy.css

@@ -1,822 +0,0 @@
-@layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.integrations, ly.legacy;
-
-@import url("./layout-style-css.css");
-
-@layer ly.legacy {
-  /* Preserve v1 wrapper measures while applications migrate to semantic v2 names. */
-  .ly-container {
-    container-name: ly-wrapper;
-    container-type: inline-size;
-    width: min(100% - (var(--ly-page-padding-inline) * 2), var(--ly-container-max));
-    margin-inline: auto;
-  }
-
-  .ly-container--sm,
-  .ly-wrapper--sm {
-    --ly-container-max: var(--ly-container-sm);
-    --ly-wrapper-max: 40rem;
-  }
-
-  .ly-container--md,
-  .ly-wrapper--md {
-    --ly-container-max: var(--ly-container-md);
-    --ly-wrapper-max: 56rem;
-  }
-
-  .ly-container--lg,
-  .ly-wrapper--lg {
-    --ly-container-max: var(--ly-container-lg);
-    --ly-wrapper-max: 72rem;
-  }
-
-  .ly-container--xl,
-  .ly-wrapper--xl {
-    --ly-container-max: var(--ly-container-xl);
-    --ly-wrapper-max: 88rem;
-  }
-
-  .ly-container--wide {
-    --ly-container-max: var(--ly-container-wide);
-  }
-
-  .ly-container--fluid {
-    width: 100%;
-    max-width: none;
-    padding-inline: var(--ly-wrapper-gutter);
-  }
-
-  .ly-wrapper--fluid {
-    --ly-wrapper-max: 100%;
-  }
-
-  .ly-wrapper--readable {
-    --ly-wrapper-max: 68ch;
-  }
-
-  .ly-row {
-    display: flex;
-    flex-wrap: wrap;
-    /* Outer compensation preserves exact percentage tracks while columns own gutters. */
-    margin-inline: calc(var(--ly-gutter, var(--ly-gap)) * -0.5);
-  }
-
-  .ly-col {
-    flex: 1 1 0;
-    min-inline-size: 0;
-    padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5);
-  }
-
-  .ly-col-1 { flex: 0 0 auto; width: 8.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-2 { flex: 0 0 auto; width: 16.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-3 { flex: 0 0 auto; width: 25%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-4 { flex: 0 0 auto; width: 33.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-5 { flex: 0 0 auto; width: 41.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-6 { flex: 0 0 auto; width: 50%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-7 { flex: 0 0 auto; width: 58.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-8 { flex: 0 0 auto; width: 66.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-9 { flex: 0 0 auto; width: 75%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-10 { flex: 0 0 auto; width: 83.333333%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-11 { flex: 0 0 auto; width: 91.666667%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-  .ly-col-12 { flex: 0 0 auto; width: 100%; padding-inline: calc(var(--ly-gutter, var(--ly-gap)) * 0.5); }
-
-  .ly-carousel {
-    display: grid;
-    grid-auto-flow: column;
-    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;
-  }
-
-  .ly-carousel > * {
-    min-inline-size: 0;
-    scroll-snap-align: start;
-  }
-
-  .ly-button-group {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--ly-cluster-gap);
-  }
-
-  .ly-button-group > * {
-    flex: 0 1 auto;
-    min-inline-size: min(100%, var(--ly-button-min, 8rem));
-  }
-
-  .ly-sidebar-layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--ly-gap);
-  }
-
-  .ly-sidebar-layout > * {
-    min-inline-size: 0;
-  }
-
-  .ly-content {
-    min-inline-size: 0;
-  }
-
-  .ly-divider {
-    /* V2 preserves separator geometry here; themes remain responsible for visible paint. */
-    min-block-size: 1px;
-    margin-block: var(--ly-space-5);
-  }
-
-  .ly-card-sm { min-block-size: var(--ly-card-size-sm); }
-  .ly-card-md { min-block-size: var(--ly-card-size-md); }
-  .ly-card-lg { min-block-size: var(--ly-card-size-lg); }
-
-  .ly-scroll-area {
-    min-block-size: 0;
-    max-block-size: var(--ly-scroll-max);
-    overflow: auto;
-    overscroll-behavior: contain;
-  }
-
-  .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; }
-
-  /* The build expands canonical personality rules into functional v1 aliases here. */
-  /* V1 personality aliases for minimal-saas; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) {
-    --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;
-  }
-
-  @container (min-width: 48rem) {
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-minimal-saas) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="minimal-saas"], .ly-root[layout-style="minimal-saas"], .ly-root.ly-layout-minimal-saas, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for bento; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento) .ly-grid > :nth-child(6n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento)
-      :where(.ly-card-grid, [data-ly-recipe="card-grid"])
-      > :nth-child(6n + 1) {
-      grid-column: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for maximalist; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 56rem) {
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist) .ly-grid > :nth-child(7n + 1) {
-      grid-column: span 3;
-      grid-row: span 2;
-    }
-
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist)
-      :where(.ly-gallery, [data-ly-recipe="gallery"])
-      > :nth-child(5n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-  }
-
-  /* The four-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for bauhaus; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 52rem) {
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus) .ly-grid > :nth-child(3n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-  }
-
-  /* The four-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for tactile; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-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-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile) .ly-grid > :nth-child(5n + 2) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile)
-      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(min(100%, 20rem), 0.42fr) minmax(0, 0.58fr);
-    }
-  }
-
-/* V1 personality aliases for neumorphism; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 52rem) {
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-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-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism)
-      :where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
-      grid-template-columns: minmax(0, 0.58fr) minmax(min(100%, 19rem), 0.42fr);
-    }
-  }
-
-/* V1 personality aliases for retrofuturism; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism) .ly-grid > :nth-child(6n + 1) {
-      grid-column: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for brutalism; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism) .ly-grid > :nth-child(3n) {
-      grid-column: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for cyberpunk; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) {
-    --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 (min-width: 44rem) {
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk) .ly-grid > :nth-child(4n + 2) {
-      grid-column: span 3;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for y2k; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k) .ly-grid > :nth-child(5n + 1) {
-      grid-column: span 3;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for retro-glass; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 56rem) {
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-retro-glass) .ly-grid > :nth-child(4n) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="retro-glass"], .ly-root[layout-style="retro-glass"], .ly-root.ly-layout-retro-glass, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for f-pattern; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 56rem) {
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern) .ly-grid > :nth-child(3n + 1) {
-      grid-column: span 2;
-    }
-
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-f-pattern)
-      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="f-pattern"], .ly-root[layout-style="f-pattern"], .ly-root.ly-layout-f-pattern, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for z-pattern; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 60rem) {
-    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern) .ly-grid > :nth-child(4n + 2) {
-      grid-column: span 2;
-      align-self: end;
-    }
-
-    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-z-pattern)
-      :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
-      grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="z-pattern"], .ly-root[layout-style="z-pattern"], .ly-root.ly-layout-z-pattern, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for split-screen; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-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-layout="split-screen"], .ly-root[layout-style="split-screen"], .ly-root.ly-layout-split-screen, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for mondrian; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 52rem) {
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian) .ly-grid > :nth-child(5n + 1) {
-      grid-column: span 2;
-      grid-row: span 2;
-    }
-  }
-
-  /* The three-track shell waits for a locally feasible allocation. */
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-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);
-    }
-  }
-
-/* V1 personality aliases for synthwave; generated from the canonical v2 source. */
-:where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) {
-    --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 (min-width: 48rem) {
-    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave)
-      :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
-      grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
-    }
-  }
-
-  @container (min-width: 64rem) {
-    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-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-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-grid > :nth-child(4n + 1) {
-      grid-column: span 3;
-    }
-
-    :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave) .ly-reel {
-      grid-auto-columns: minmax(min(100%, 20rem), var(--ly-reel-item-max));
-    }
-  }
-
-  @container (min-width: 48rem) {
-    .ly-sidebar-layout {
-      grid-template-columns: minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-max)) minmax(0, 1fr);
-      align-items: start;
-    }
-
-    .ly-sidebar-layout--right {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-sidebar-min)), var(--ly-sidebar-max));
-    }
-
-    .ly-panes--two {
-      grid-template-columns: minmax(0, 1fr) minmax(min(100%, var(--ly-pane-size)), 0.7fr);
-    }
-  }
-
-  @container (min-width: 64rem) {
-    .ly-panes--three {
-      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);
-    }
-  }
-}