layout-style-css 2.1.0 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +5 -5
  3. package/demo/index.html +1 -1
  4. package/demo/sitemap.xml +1 -1
  5. package/dist/layout-style-css.css +147 -104
  6. package/dist/layout-style-css.min.css +1 -1
  7. package/dist/legacy.css +137 -102
  8. package/dist/personalities/bauhaus.css +10 -7
  9. package/dist/personalities/bento.css +15 -12
  10. package/dist/personalities/brutalism.css +8 -5
  11. package/dist/personalities/cyberpunk.css +8 -5
  12. package/dist/personalities/f-pattern.css +14 -11
  13. package/dist/personalities/maximalist.css +17 -14
  14. package/dist/personalities/minimal-saas.css +8 -6
  15. package/dist/personalities/mondrian.css +10 -7
  16. package/dist/personalities/neumorphism.css +2 -2
  17. package/dist/personalities/retro-glass.css +10 -7
  18. package/dist/personalities/retrofuturism.css +8 -5
  19. package/dist/personalities/split-screen.css +1 -1
  20. package/dist/personalities/synthwave.css +2 -2
  21. package/dist/personalities/tactile.css +1 -1
  22. package/dist/personalities/y2k.css +8 -5
  23. package/dist/personalities/z-pattern.css +15 -12
  24. package/dist/recipes.css +10 -2
  25. package/docs/wiki/Getting-Started.md +1 -1
  26. package/docs/wiki/Home.md +2 -2
  27. package/docs/wiki/Installation-And-CDN.md +3 -3
  28. package/docs/wiki/Layout-Recipes.md +1 -1
  29. package/docs/wiki/Layout-Styles.md +1 -1
  30. package/docs/wiki/Migrating-To-2.0.md +1 -1
  31. package/docs/wiki/Release-And-Publishing.md +8 -8
  32. package/docs/wiki/UI-Style-Kit-Compatibility.md +1 -1
  33. package/package.json +1 -1
  34. package/styles/personalities/bauhaus.css +10 -7
  35. package/styles/personalities/bento.css +15 -12
  36. package/styles/personalities/brutalism.css +8 -5
  37. package/styles/personalities/cyberpunk.css +8 -5
  38. package/styles/personalities/f-pattern.css +14 -11
  39. package/styles/personalities/maximalist.css +17 -14
  40. package/styles/personalities/minimal-saas.css +8 -6
  41. package/styles/personalities/mondrian.css +10 -7
  42. package/styles/personalities/neumorphism.css +2 -2
  43. package/styles/personalities/retro-glass.css +10 -7
  44. package/styles/personalities/retrofuturism.css +8 -5
  45. package/styles/personalities/split-screen.css +1 -1
  46. package/styles/personalities/synthwave.css +2 -2
  47. package/styles/personalities/tactile.css +1 -1
  48. package/styles/personalities/y2k.css +8 -5
  49. package/styles/personalities/z-pattern.css +15 -12
  50. package/styles/recipes.css +10 -2
package/dist/layout-style-css.min.css CHANGED
@@ -1 +1 @@
1
- @layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities,ly.integrations,ly.legacy;@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-wrapper-compact:40rem;--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-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-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-cover-min:100svh;--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-pane-size:22rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-scroll-max:70svh;--ly-frame-ratio:16 / 9;--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;--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}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}: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){max-inline-size:100%}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));container-name:ly-wrapper;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));margin-inline:auto;padding-inline:var(--ly-wrapper-gutter)}.ly-wrapper--compact{--ly-wrapper-max:40rem}.ly-wrapper--prose{--ly-wrapper-max:68ch}.ly-wrapper--content{--ly-wrapper-max:72rem}.ly-wrapper--wide{--ly-wrapper-max:112rem}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [content-start] minmax(0,var(--ly-breakout-content-size)) [content-end] minmax( 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];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){grid-column:content}.ly-wrapper--breakout>:where(.ly-lane--feature,[data-ly-lane="feature"]){grid-column:feature}.ly-wrapper--breakout>:where(.ly-lane--full,[data-ly-lane="full"]){grid-column:full}}@layer ly.primitives{.ly-page{min-block-size:100svh}.ly-header,.ly-footer,.ly-main,.ly-section,.ly-surface{min-inline-size:0;min-block-size:0}.ly-header{min-block-size:var(--ly-header-height)}.ly-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ly-z-header)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-readable{max-inline-size:var(--ly-wrapper-prose)}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-center{inline-size:min(100%,var(--ly-center-max,var(--ly-wrapper-content)));margin-inline:auto}.ly-cover{display:flex;flex-direction:column;min-block-size:var(--ly-cover-min);padding-block:var(--ly-cover-padding,var(--ly-space-5))}.ly-cover>:where(.ly-cover__center,[data-ly-cover-center]){margin-block:auto}.ly-switcher{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-switcher>*{flex-basis:calc((var(--ly-switcher-threshold) - 100%) * 999);flex-grow:1;min-inline-size:0}.ly-sidebar{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-sidebar>:where(.ly-sidebar__side,[data-ly-sidebar="side"]){flex-basis:var(--ly-sidebar-size);flex-grow:1}.ly-sidebar>:where(.ly-sidebar__content,[data-ly-sidebar="content"]){flex-basis:0;flex-grow:999;min-inline-size:min(100%,var(--ly-sidebar-content-min))}.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))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0}.ly-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}.ly-media{display:grid;grid-template-areas:"media" "content" "actions";grid-template-columns:minmax(0,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"]){grid-area:actions}.ly-reel{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-reel>*{min-inline-size:0;scroll-snap-align:start}.ly-frame{aspect-ratio:var(--ly-frame-ratio);overflow:hidden}.ly-frame>*{inline-size:100%;block-size:100%;object-fit:cover}.ly-scroll{min-block-size:0;max-block-size:var(--ly-scroll-max);overflow:auto;overscroll-behavior:contain}}@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)}}}@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;container-type:inline-size;min-inline-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"]){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;grid-template-areas:"header" "sidebar" "main" "aside" "footer";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"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary" "secondary" "actions"}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){display:grid;gap:var(--ly-grid-gap)}:where(.ly-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"]){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"])>*{min-inline-size:0}:where(.ly-area--header,[data-ly-area="header"]){grid-area:header;min-inline-size:0}:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:nav;min-inline-size:0}:where(.ly-area--main,[data-ly-area="main"]){grid-area:main;min-inline-size:0}:where(.ly-area--aside,[data-ly-area="aside"]){grid-area:aside;min-inline-size:0}:where(.ly-area--footer,[data-ly-area="footer"]){grid-area:footer;min-inline-size:0}:where(.ly-area--content,[data-ly-area="content"]){grid-area:content;min-inline-size:0}:where(.ly-area--media,[data-ly-area="media"]){grid-area:media;min-inline-size:0}:where(.ly-area--actions,[data-ly-area="actions"]){grid-area:actions;min-inline-size:0}:where(.ly-area--primary,[data-ly-area="primary"]){grid-area:primary;min-inline-size:0}:where(.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}@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 (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)}: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)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.45fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:16rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:20rem}}}@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-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-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.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{display:none !important}.ly-visually-hidden{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}.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}}}@layer ly.personalities.minimal_saas{:where(.ly-root[data-ly-layout="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 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}}}@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}}}@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}}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="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}@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}}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="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 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)}}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="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 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)}}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="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 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}}}@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}}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="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 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}}}@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}}}@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}}}@layer ly.personalities.f_pattern{:where(.ly-root[data-ly-layout="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 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)}}}@layer ly.personalities.z_pattern{:where(.ly-root[data-ly-layout="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 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)}}}@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)}}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="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 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}}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="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 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))}}}
1
+ @layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities,ly.integrations,ly.legacy;@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-wrapper-compact:40rem;--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-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-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-cover-min:100svh;--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-pane-size:22rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-scroll-max:70svh;--ly-frame-ratio:16 / 9;--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;--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}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}: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){max-inline-size:100%}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));container-name:ly-wrapper;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));margin-inline:auto;padding-inline:var(--ly-wrapper-gutter)}.ly-wrapper--compact{--ly-wrapper-max:40rem}.ly-wrapper--prose{--ly-wrapper-max:68ch}.ly-wrapper--content{--ly-wrapper-max:72rem}.ly-wrapper--wide{--ly-wrapper-max:112rem}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [content-start] minmax(0,var(--ly-breakout-content-size)) [content-end] minmax( 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];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){grid-column:content}.ly-wrapper--breakout>:where(.ly-lane--feature,[data-ly-lane="feature"]){grid-column:feature}.ly-wrapper--breakout>:where(.ly-lane--full,[data-ly-lane="full"]){grid-column:full}}@layer ly.primitives{.ly-page{min-block-size:100svh}.ly-header,.ly-footer,.ly-main,.ly-section,.ly-surface{min-inline-size:0;min-block-size:0}.ly-header{min-block-size:var(--ly-header-height)}.ly-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ly-z-header)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-readable{max-inline-size:var(--ly-wrapper-prose)}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-center{inline-size:min(100%,var(--ly-center-max,var(--ly-wrapper-content)));margin-inline:auto}.ly-cover{display:flex;flex-direction:column;min-block-size:var(--ly-cover-min);padding-block:var(--ly-cover-padding,var(--ly-space-5))}.ly-cover>:where(.ly-cover__center,[data-ly-cover-center]){margin-block:auto}.ly-switcher{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-switcher>*{flex-basis:calc((var(--ly-switcher-threshold) - 100%) * 999);flex-grow:1;min-inline-size:0}.ly-sidebar{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-sidebar>:where(.ly-sidebar__side,[data-ly-sidebar="side"]){flex-basis:var(--ly-sidebar-size);flex-grow:1}.ly-sidebar>:where(.ly-sidebar__content,[data-ly-sidebar="content"]){flex-basis:0;flex-grow:999;min-inline-size:min(100%,var(--ly-sidebar-content-min))}.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))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0}.ly-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}.ly-media{display:grid;grid-template-areas:"media" "content" "actions";grid-template-columns:minmax(0,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"]){grid-area:actions}.ly-reel{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-reel>*{min-inline-size:0;scroll-snap-align:start}.ly-frame{aspect-ratio:var(--ly-frame-ratio);overflow:hidden}.ly-frame>*{inline-size:100%;block-size:100%;object-fit:cover}.ly-scroll{min-block-size:0;max-block-size:var(--ly-scroll-max);overflow:auto;overscroll-behavior:contain}}@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)}}}@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;container-type:inline-size;min-inline-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"]){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;grid-template-areas:"header" "sidebar" "main" "aside" "footer";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"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary" "secondary" "actions"}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){display:grid;gap:var(--ly-grid-gap)}:where(.ly-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"]){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"])>*{min-inline-size:0}:where(.ly-area--header,[data-ly-area="header"]){grid-area:header;min-inline-size:0}:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:nav;min-inline-size:0}:where(.ly-area--main,[data-ly-area="main"]){grid-area:main;min-inline-size:0}:where(.ly-area--aside,[data-ly-area="aside"]){grid-area:aside;min-inline-size:0}:where(.ly-area--footer,[data-ly-area="footer"]){grid-area:footer;min-inline-size:0}:where(.ly-area--content,[data-ly-area="content"]){grid-area:content;min-inline-size:0}:where(.ly-area--media,[data-ly-area="media"]){grid-area:media;min-inline-size:0}:where(.ly-area--actions,[data-ly-area="actions"]){grid-area:actions;min-inline-size:0}:where(.ly-area--primary,[data-ly-area="primary"]){grid-area:primary;min-inline-size:0}:where(.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}@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 (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)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){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)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"nav header" "nav main" "nav aside" "nav 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-columns:minmax(min(100%,var(--ly-pane-size)),0.45fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:16rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:20rem}}}@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-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-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.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{display:none !important}.ly-visually-hidden{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}.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}}}@layer ly.personalities.minimal_saas{:where(.ly-root[data-ly-layout="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-ly-layout="minimal-saas"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}}@container (min-width:64rem){: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)}}}@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 (min-width:48rem){: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}}@container (min-width:64rem){: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)}}}@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 (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 (min-width:56rem){: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}}@container (min-width:64rem){: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)}}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="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}@container (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 (min-width:52rem){:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){: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)}}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="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-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)}}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="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-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 (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)}}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="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-ly-layout="retrofuturism"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2}}@container (min-width:64rem){: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)}}}@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 (min-width:48rem){:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid>:nth-child(3n){grid-column:span 2}}@container (min-width:64rem){: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)}}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="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-ly-layout="cyberpunk"]) .ly-grid>:nth-child(4n + 2){grid-column:span 3}}@container (min-width:64rem){: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)}}}@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 (min-width:48rem){:where(.ly-root[data-ly-layout="y2k"]) .ly-grid>:nth-child(5n + 1){grid-column:span 3}}@container (min-width:64rem){: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)}}}@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 (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 (min-width:56rem){:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid>:nth-child(4n){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){: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)}}}@layer ly.personalities.f_pattern{:where(.ly-root[data-ly-layout="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-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 (min-width:56rem){: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)}}@container (min-width:64rem){: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)}}}@layer ly.personalities.z_pattern{:where(.ly-root[data-ly-layout="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-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 (min-width:60rem){: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)}}@container (min-width:64rem){: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)}}}@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 (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)}}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="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-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 (min-width:52rem){:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){: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)}}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="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-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 (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))}}}
package/dist/legacy.css CHANGED
@@ -158,8 +158,14 @@
158
158
  min-inline-size: 0;
159
159
  }
160
160
 
161
- /* Named areas rearrange the shell without changing its mobile DOM or focus order. */
162
- @container ly-personality (min-width: 48rem) {
161
+ @container (min-width: 48rem) {
162
+ :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) {
163
+ grid-column: span 2;
164
+ }
165
+ }
166
+
167
+ /* The three-track shell waits for a locally feasible allocation. */
168
+ @container (min-width: 64rem) {
163
169
  :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)
164
170
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
165
171
  grid-template-areas:
@@ -172,10 +178,6 @@
172
178
  minmax(0, 1fr)
173
179
  minmax(min(100%, 16rem), 0.28fr);
174
180
  }
175
-
176
- :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) {
177
- grid-column: span 2;
178
- }
179
181
  }
180
182
 
181
183
  /* V1 personality aliases for bento; generated from the canonical v2 source. */
@@ -190,7 +192,21 @@
190
192
  min-inline-size: 0;
191
193
  }
192
194
 
193
- @container ly-personality (min-width: 48rem) {
195
+ @container (min-width: 48rem) {
196
+ :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) {
197
+ grid-column: span 2;
198
+ grid-row: span 2;
199
+ }
200
+
201
+ :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento)
202
+ :where(.ly-card-grid, [data-ly-recipe="card-grid"])
203
+ > :nth-child(6n + 1) {
204
+ grid-column: span 2;
205
+ }
206
+ }
207
+
208
+ /* The three-track shell waits for a locally feasible allocation. */
209
+ @container (min-width: 64rem) {
194
210
  :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento)
195
211
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
196
212
  grid-template-areas:
@@ -204,17 +220,6 @@
204
220
  minmax(0, 1fr)
205
221
  minmax(0, 1fr);
206
222
  }
207
-
208
- :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) {
209
- grid-column: span 2;
210
- grid-row: span 2;
211
- }
212
-
213
- :where(.ly-root[data-layout="bento"], .ly-root[layout-style="bento"], .ly-root.ly-layout-bento, .ly-root.ly-style-bento)
214
- :where(.ly-card-grid, [data-ly-recipe="card-grid"])
215
- > :nth-child(6n + 1) {
216
- grid-column: span 2;
217
- }
218
223
  }
219
224
 
220
225
  /* V1 personality aliases for maximalist; generated from the canonical v2 source. */
@@ -229,14 +234,29 @@
229
234
  min-inline-size: 0;
230
235
  }
231
236
 
232
- @container ly-personality (min-width: 48rem) {
237
+ @container (min-width: 48rem) {
233
238
  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist)
234
239
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
235
240
  grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
236
241
  }
237
242
  }
238
243
 
239
- @container ly-personality (min-width: 56rem) {
244
+ @container (min-width: 56rem) {
245
+ :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) {
246
+ grid-column: span 3;
247
+ grid-row: span 2;
248
+ }
249
+
250
+ :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist)
251
+ :where(.ly-gallery, [data-ly-recipe="gallery"])
252
+ > :nth-child(5n + 1) {
253
+ grid-column: span 2;
254
+ grid-row: span 2;
255
+ }
256
+ }
257
+
258
+ /* The four-track shell waits for a locally feasible allocation. */
259
+ @container (min-width: 64rem) {
240
260
  :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist)
241
261
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
242
262
  grid-template-areas:
@@ -250,18 +270,6 @@
250
270
  minmax(min(100%, 15rem), 0.32fr)
251
271
  minmax(min(100%, 18rem), 0.38fr);
252
272
  }
253
-
254
- :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) {
255
- grid-column: span 3;
256
- grid-row: span 2;
257
- }
258
-
259
- :where(.ly-root[data-layout="maximalist"], .ly-root[layout-style="maximalist"], .ly-root.ly-layout-maximalist, .ly-root.ly-style-maximalist)
260
- :where(.ly-gallery, [data-ly-recipe="gallery"])
261
- > :nth-child(5n + 1) {
262
- grid-column: span 2;
263
- grid-row: span 2;
264
- }
265
273
  }
266
274
 
267
275
  /* V1 personality aliases for bauhaus; generated from the canonical v2 source. */
@@ -278,14 +286,22 @@
278
286
  }
279
287
 
280
288
  /* Cap the fallback rail until the wider personality template is eligible. */
281
- @container ly-personality (min-width: 48rem) {
289
+ @container (min-width: 48rem) {
282
290
  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus)
283
291
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
284
292
  grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr);
285
293
  }
286
294
  }
287
295
 
288
- @container ly-personality (min-width: 52rem) {
296
+ @container (min-width: 52rem) {
297
+ :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) {
298
+ grid-column: span 2;
299
+ grid-row: span 2;
300
+ }
301
+ }
302
+
303
+ /* The four-track shell waits for a locally feasible allocation. */
304
+ @container (min-width: 64rem) {
289
305
  :where(.ly-root[data-layout="bauhaus"], .ly-root[layout-style="bauhaus"], .ly-root.ly-layout-bauhaus, .ly-root.ly-style-bauhaus)
290
306
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
291
307
  grid-template-areas:
@@ -299,11 +315,6 @@
299
315
  minmax(0, 1.3fr)
300
316
  minmax(min(100%, 18rem), 0.3fr);
301
317
  }
302
-
303
- :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) {
304
- grid-column: span 2;
305
- grid-row: span 2;
306
- }
307
318
  }
308
319
 
309
320
  /* V1 personality aliases for tactile; generated from the canonical v2 source. */
@@ -319,7 +330,7 @@
319
330
  min-inline-size: 0;
320
331
  }
321
332
 
322
- @container ly-personality (min-width: 48rem) {
333
+ @container (min-width: 48rem) {
323
334
  :where(.ly-root[data-layout="tactile"], .ly-root[layout-style="tactile"], .ly-root.ly-layout-tactile, .ly-root.ly-style-tactile)
324
335
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
325
336
  grid-template-areas:
@@ -354,14 +365,14 @@
354
365
  min-inline-size: 0;
355
366
  }
356
367
 
357
- @container ly-personality (min-width: 48rem) {
368
+ @container (min-width: 48rem) {
358
369
  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism)
359
370
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
360
371
  grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
361
372
  }
362
373
  }
363
374
 
364
- @container ly-personality (min-width: 52rem) {
375
+ @container (min-width: 52rem) {
365
376
  :where(.ly-root[data-layout="neumorphism"], .ly-root[layout-style="neumorphism"], .ly-root.ly-layout-neumorphism, .ly-root.ly-style-neumorphism)
366
377
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
367
378
  grid-template-areas:
@@ -396,7 +407,14 @@
396
407
  min-inline-size: 0;
397
408
  }
398
409
 
399
- @container ly-personality (min-width: 48rem) {
410
+ @container (min-width: 48rem) {
411
+ :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) {
412
+ grid-column: span 2;
413
+ }
414
+ }
415
+
416
+ /* The three-track shell waits for a locally feasible allocation. */
417
+ @container (min-width: 64rem) {
400
418
  :where(.ly-root[data-layout="retrofuturism"], .ly-root[layout-style="retrofuturism"], .ly-root.ly-layout-retrofuturism, .ly-root.ly-style-retrofuturism)
401
419
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
402
420
  grid-template-areas:
@@ -409,10 +427,6 @@
409
427
  minmax(0, 1fr)
410
428
  minmax(min(100%, 17rem), 0.3fr);
411
429
  }
412
-
413
- :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) {
414
- grid-column: span 2;
415
- }
416
430
  }
417
431
 
418
432
  /* V1 personality aliases for brutalism; generated from the canonical v2 source. */
@@ -428,7 +442,14 @@
428
442
  min-inline-size: 0;
429
443
  }
430
444
 
431
- @container ly-personality (min-width: 48rem) {
445
+ @container (min-width: 48rem) {
446
+ :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) {
447
+ grid-column: span 2;
448
+ }
449
+ }
450
+
451
+ /* The three-track shell waits for a locally feasible allocation. */
452
+ @container (min-width: 64rem) {
432
453
  :where(.ly-root[data-layout="brutalism"], .ly-root[layout-style="brutalism"], .ly-root.ly-layout-brutalism, .ly-root.ly-style-brutalism)
433
454
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
434
455
  grid-template-areas:
@@ -441,10 +462,6 @@
441
462
  minmax(min(100%, 16rem), 0.7fr)
442
463
  minmax(min(100%, 18rem), 0.34fr);
443
464
  }
444
-
445
- :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) {
446
- grid-column: span 2;
447
- }
448
465
  }
449
466
 
450
467
  /* V1 personality aliases for cyberpunk; generated from the canonical v2 source. */
@@ -460,7 +477,14 @@
460
477
  min-inline-size: 0;
461
478
  }
462
479
 
463
- @container ly-personality (min-width: 44rem) {
480
+ @container (min-width: 44rem) {
481
+ :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) {
482
+ grid-column: span 3;
483
+ }
484
+ }
485
+
486
+ /* The three-track shell waits for a locally feasible allocation. */
487
+ @container (min-width: 64rem) {
464
488
  :where(.ly-root[data-layout="cyberpunk"], .ly-root[layout-style="cyberpunk"], .ly-root.ly-layout-cyberpunk, .ly-root.ly-style-cyberpunk)
465
489
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
466
490
  grid-template-areas:
@@ -473,10 +497,6 @@
473
497
  minmax(0, 1fr)
474
498
  minmax(min(100%, 19rem), 0.32fr);
475
499
  }
476
-
477
- :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) {
478
- grid-column: span 3;
479
- }
480
500
  }
481
501
 
482
502
  /* V1 personality aliases for y2k; generated from the canonical v2 source. */
@@ -492,7 +512,14 @@
492
512
  min-inline-size: 0;
493
513
  }
494
514
 
495
- @container ly-personality (min-width: 48rem) {
515
+ @container (min-width: 48rem) {
516
+ :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) {
517
+ grid-column: span 3;
518
+ }
519
+ }
520
+
521
+ /* The three-track shell waits for a locally feasible allocation. */
522
+ @container (min-width: 64rem) {
496
523
  :where(.ly-root[data-layout="y2k"], .ly-root[layout-style="y2k"], .ly-root.ly-layout-y2k, .ly-root.ly-style-y2k)
497
524
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
498
525
  grid-template-areas:
@@ -505,10 +532,6 @@
505
532
  minmax(0, 1fr)
506
533
  minmax(min(100%, 16rem), 0.28fr);
507
534
  }
508
-
509
- :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) {
510
- grid-column: span 3;
511
- }
512
535
  }
513
536
 
514
537
  /* V1 personality aliases for retro-glass; generated from the canonical v2 source. */
@@ -524,14 +547,22 @@
524
547
  min-inline-size: 0;
525
548
  }
526
549
 
527
- @container ly-personality (min-width: 48rem) {
550
+ @container (min-width: 48rem) {
528
551
  :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)
529
552
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
530
553
  grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
531
554
  }
532
555
  }
533
556
 
534
- @container ly-personality (min-width: 56rem) {
557
+ @container (min-width: 56rem) {
558
+ :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) {
559
+ grid-column: span 2;
560
+ grid-row: span 2;
561
+ }
562
+ }
563
+
564
+ /* The three-track shell waits for a locally feasible allocation. */
565
+ @container (min-width: 64rem) {
535
566
  :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)
536
567
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
537
568
  grid-template-areas:
@@ -544,11 +575,6 @@
544
575
  minmax(0, 0.75fr)
545
576
  minmax(min(100%, 18rem), 0.32fr);
546
577
  }
547
-
548
- :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) {
549
- grid-column: span 2;
550
- grid-row: span 2;
551
- }
552
578
  }
553
579
 
554
580
  /* V1 personality aliases for f-pattern; generated from the canonical v2 source. */
@@ -564,14 +590,26 @@
564
590
  min-inline-size: 0;
565
591
  }
566
592
 
567
- @container ly-personality (min-width: 48rem) {
593
+ @container (min-width: 48rem) {
568
594
  :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)
569
595
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
570
596
  grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
571
597
  }
572
598
  }
573
599
 
574
- @container ly-personality (min-width: 56rem) {
600
+ @container (min-width: 56rem) {
601
+ :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) {
602
+ grid-column: span 2;
603
+ }
604
+
605
+ :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)
606
+ :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
607
+ grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
608
+ }
609
+ }
610
+
611
+ /* The three-track shell waits for a locally feasible allocation. */
612
+ @container (min-width: 64rem) {
575
613
  :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)
576
614
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
577
615
  grid-template-areas:
@@ -584,15 +622,6 @@
584
622
  minmax(0, 1.35fr)
585
623
  minmax(min(100%, 18rem), 0.65fr);
586
624
  }
587
-
588
- :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) {
589
- grid-column: span 2;
590
- }
591
-
592
- :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)
593
- :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
594
- grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
595
- }
596
625
  }
597
626
 
598
627
  /* V1 personality aliases for z-pattern; generated from the canonical v2 source. */
@@ -608,14 +637,27 @@
608
637
  min-inline-size: 0;
609
638
  }
610
639
 
611
- @container ly-personality (min-width: 48rem) {
640
+ @container (min-width: 48rem) {
612
641
  :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)
613
642
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
614
643
  grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
615
644
  }
616
645
  }
617
646
 
618
- @container ly-personality (min-width: 60rem) {
647
+ @container (min-width: 60rem) {
648
+ :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) {
649
+ grid-column: span 2;
650
+ align-self: end;
651
+ }
652
+
653
+ :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)
654
+ :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
655
+ grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
656
+ }
657
+ }
658
+
659
+ /* The three-track shell waits for a locally feasible allocation. */
660
+ @container (min-width: 64rem) {
619
661
  :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)
620
662
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
621
663
  grid-template-areas:
@@ -628,16 +670,6 @@
628
670
  minmax(min(100%, 19rem), 0.55fr)
629
671
  minmax(min(100%, 17rem), 0.3fr);
630
672
  }
631
-
632
- :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) {
633
- grid-column: span 2;
634
- align-self: end;
635
- }
636
-
637
- :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)
638
- :where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
639
- grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
640
- }
641
673
  }
642
674
 
643
675
  /* V1 personality aliases for split-screen; generated from the canonical v2 source. */
@@ -653,7 +685,7 @@
653
685
  min-inline-size: 0;
654
686
  }
655
687
 
656
- @container ly-personality (min-width: 48rem) {
688
+ @container (min-width: 48rem) {
657
689
  :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)
658
690
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
659
691
  grid-template-areas:
@@ -690,14 +722,22 @@
690
722
  min-inline-size: 0;
691
723
  }
692
724
 
693
- @container ly-personality (min-width: 48rem) {
725
+ @container (min-width: 48rem) {
694
726
  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian)
695
727
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
696
728
  grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
697
729
  }
698
730
  }
699
731
 
700
- @container ly-personality (min-width: 52rem) {
732
+ @container (min-width: 52rem) {
733
+ :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) {
734
+ grid-column: span 2;
735
+ grid-row: span 2;
736
+ }
737
+ }
738
+
739
+ /* The three-track shell waits for a locally feasible allocation. */
740
+ @container (min-width: 64rem) {
701
741
  :where(.ly-root[data-layout="mondrian"], .ly-root[layout-style="mondrian"], .ly-root.ly-layout-mondrian, .ly-root.ly-style-mondrian)
702
742
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
703
743
  grid-template-areas:
@@ -710,11 +750,6 @@
710
750
  minmax(0, 1.45fr)
711
751
  minmax(min(100%, 18rem), 0.55fr);
712
752
  }
713
-
714
- :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) {
715
- grid-column: span 2;
716
- grid-row: span 2;
717
- }
718
753
  }
719
754
 
720
755
  /* V1 personality aliases for synthwave; generated from the canonical v2 source. */
@@ -731,14 +766,14 @@
731
766
  min-inline-size: 0;
732
767
  }
733
768
 
734
- @container ly-personality (min-width: 48rem) {
769
+ @container (min-width: 48rem) {
735
770
  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave)
736
771
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
737
772
  grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
738
773
  }
739
774
  }
740
775
 
741
- @container ly-personality (min-width: 64rem) {
776
+ @container (min-width: 64rem) {
742
777
  :where(.ly-root[data-layout="synthwave"], .ly-root[layout-style="synthwave"], .ly-root.ly-layout-synthwave, .ly-root.ly-style-synthwave)
743
778
  :where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
744
779
  grid-template-areas: