layout-style-css 3.0.1 → 3.0.2

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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +10 -4
  3. package/dist/foundation.css +16 -2
  4. package/dist/layout-style-css.css +26 -13
  5. package/dist/layout-style-css.min.css +1 -1
  6. package/dist/personalities/bento.css +1 -0
  7. package/dist/personalities/neumorphism.css +1 -0
  8. package/dist/personalities/split-screen.css +1 -0
  9. package/dist/personalities/tactile.css +1 -0
  10. package/dist/primitives.css +2 -2
  11. package/dist/recipes.css +3 -1
  12. package/dist/wrappers.css +1 -8
  13. package/docs/wiki/Getting-Started.md +2 -2
  14. package/docs/wiki/Home.md +1 -1
  15. package/docs/wiki/Installation-And-CDN.md +3 -3
  16. package/docs/wiki/Layout-Primitives.md +4 -0
  17. package/docs/wiki/Layout-Recipes.md +2 -0
  18. package/docs/wiki/Layout-Styles.md +2 -0
  19. package/docs/wiki/Release-And-Publishing.md +5 -5
  20. package/manifest.json +3 -2
  21. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  All notable changes to `layout-style-css` are documented here. This project follows semantic versioning.
4
4
 
5
+ ## [3.0.2] - 2026-08-25
6
+
7
+ ### Fixed
8
+
9
+ - Matched App Shell row tracks to base, medium, wide, and personality-specific area topologies so primary content receives flexible height while headers and footers remain intrinsic.
10
+ - Separated compact section spacing from normal section spacing and preserved the compact-smaller-than-normal invariant across regular, short, and shallow viewport heights.
11
+ - Connected the documented page-padding and Wrapper-gutter tokens to rendered Wrapper padding while retaining safe-area handling.
12
+
13
+ ### Tests
14
+
15
+ - Added static and rendered regression coverage for App Shell row counts, flexible workspace allocation, compact section ordering, public gutter overrides, generated CSS parity, package metadata, and Pages artifacts.
16
+
5
17
  ## [3.0.1] - 2026-08-09
6
18
 
7
19
  ### Changed
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Zero-configuration, dependency-free structural CSS that responds to the width and height a layout actually receives.
4
4
 
5
- `layout-style-css@3.0.1` is the current v3 patch release and preserves the clean-break structural contract introduced in 3.0.0. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
5
+ `layout-style-css@3.0.2` is the current v3 patch release and preserves the clean-break structural contract introduced in 3.0.0. It provides intrinsic wrappers, composition primitives, seven semantic recipes, and sixteen spatial personalities. Layout owns structure; UI Style Kit owns paint; Interactive Surface owns interaction styling.
6
6
 
7
7
  ## Requirements
8
8
 
@@ -13,7 +13,7 @@ Zero-configuration, dependency-free structural CSS that responds to the width an
13
13
  ## Install
14
14
 
15
15
  ```bash
16
- npm install layout-style-css@3.0.1
16
+ npm install layout-style-css@3.0.2
17
17
  ```
18
18
 
19
19
  Most applications need one import:
@@ -68,6 +68,8 @@ Wrappers are optional measure and nesting controls. Every wrapper uses logical p
68
68
 
69
69
  All lanes clamp to the available inline size, including allocations from 320px through ultrawide screens.
70
70
 
71
+ `--ly-page-padding-inline` supplies the default `--ly-wrapper-gutter` value. Override `--ly-wrapper-gutter` on `.ly-root` or a narrower scope to control rendered Wrapper padding; safe-area compensation is still applied once at the Wrapper edge.
72
+
71
73
  ## Composition Primitives
72
74
 
73
75
  The core includes:
@@ -93,6 +95,8 @@ Recipes use attributes only. The stacked semantic source order is always safe, a
93
95
  | `data-ly-recipe="gallery"` | Intrinsic tracks; no topology breakpoint |
94
96
  | `data-ly-recipe="card-grid"` | Intrinsic tracks; no topology breakpoint |
95
97
 
98
+ App Shell base, medium, and wide topologies own matching row definitions. This keeps the primary workspace flexible while header and footer tracks remain intrinsic, including personality-specific four-row topologies.
99
+
96
100
  Canonical regions use `data-ly-area`, including `header`, `sidebar`, `nav`, `main`, `aside`, `footer`, `content`, `media`, `actions`, `primary`, and `secondary`.
97
101
 
98
102
  Recipe class aliases such as `.ly-dashboard` no longer exist. Use:
@@ -129,6 +133,8 @@ The system responds to available block size without orientation queries:
129
133
  - At viewport heights of `30rem` or less, recipe-owned sticky behavior becomes normal flow, and cover/shell minimums stop forcing full-height regions.
130
134
  - Safe-area block insets remain available, and required regions are never hidden solely because the viewport is short.
131
135
 
136
+ `--ly-section-padding-block` controls normal sections. `--ly-section-padding-block-compact` independently controls `.ly-section--compact`, preserving a smaller rhythm through the regular, short, and shallow height tiers.
137
+
132
138
  Use the public height, gap, measure, ratio, rail, media, card, and grid-minimum custom properties for advanced tuning. Defaults use `100vh` fallbacks followed by `100dvh`.
133
139
 
134
140
  ## Personalities
@@ -176,8 +182,8 @@ This order lets UI Style Kit establish paint and theme roles, Interactive Surfac
176
182
  ## CDN
177
183
 
178
184
  ```html
179
- <link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.1/dist/layout-style-css.min.css">
180
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.1/dist/layout-style-css.min.css">
185
+ <link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.2/dist/layout-style-css.min.css">
186
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.2/dist/layout-style-css.min.css">
181
187
  ```
182
188
 
183
189
  ## Clean-Break Migration
package/dist/foundation.css CHANGED
@@ -22,14 +22,14 @@
22
22
  --ly-wrapper-prose: 68ch;
23
23
  --ly-wrapper-content: 72rem;
24
24
  --ly-wrapper-wide: 112rem;
25
- --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
25
+ --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
26
26
  --ly-safe-area-inline: max(
27
27
  env(safe-area-inset-left, 0px),
28
28
  env(safe-area-inset-right, 0px)
29
29
  );
30
30
  --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
31
31
  --ly-safe-area-block-end: env(safe-area-inset-bottom, 0px);
32
- --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
32
+ --ly-wrapper-gutter: var(--ly-page-padding-inline);
33
33
 
34
34
  --ly-profile-gap: var(--ly-space-5);
35
35
  --ly-gap: var(--ly-profile-gap);
@@ -37,6 +37,7 @@
37
37
  --ly-stack-gap: var(--ly-space-4);
38
38
  --ly-cluster-gap: var(--ly-space-3);
39
39
  --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
40
+ --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
40
41
  --ly-header-height: 4.5rem;
41
42
  --ly-sticky-position: sticky;
42
43
  --ly-cover-min: 100vh;
@@ -64,11 +65,13 @@
64
65
  --ly-gallery-min: 12rem;
65
66
  --ly-card-grid-min: 16rem;
66
67
 
68
+ --ly-app-shell-base-rows: auto auto minmax(0, 1fr) auto auto;
67
69
  --ly-app-shell-medium-areas:
68
70
  "header header"
69
71
  "sidebar main"
70
72
  "aside main"
71
73
  "footer footer";
74
+ --ly-app-shell-medium-rows: auto auto minmax(0, 1fr) auto;
72
75
  --ly-app-shell-medium-columns:
73
76
  minmax(min(100%, var(--ly-recipe-rail)), auto)
74
77
  minmax(0, 1fr);
@@ -76,6 +79,7 @@
76
79
  "sidebar header header"
77
80
  "sidebar main aside"
78
81
  "sidebar footer footer";
82
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto;
79
83
  --ly-app-shell-wide-columns:
80
84
  minmax(min(100%, var(--ly-recipe-rail)), auto)
81
85
  minmax(0, 1fr)
@@ -125,6 +129,13 @@
125
129
  min-block-size: 0;
126
130
  }
127
131
 
132
+ /* Prefer the nearest layout scope for gutters when container units parse. */
133
+ @supports (width: 1cqi) {
134
+ :where(.ly-root) {
135
+ --ly-page-padding-inline: clamp(1rem, 3cqi, 3rem);
136
+ }
137
+ }
138
+
128
139
  /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
129
140
  @supports (height: 100dvh) {
130
141
  :where(.ly-root) {
@@ -162,6 +173,7 @@
162
173
  --ly-stack-gap: min(var(--ly-space-4), 3vh);
163
174
  --ly-cluster-gap: min(var(--ly-space-3), 2vh);
164
175
  --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
176
+ --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
165
177
  --ly-header-height: 3.5rem;
166
178
  --ly-scroll-max: min(62vh, 34rem);
167
179
  }
@@ -171,6 +183,7 @@
171
183
  --ly-stack-gap: min(var(--ly-space-4), 3dvh);
172
184
  --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
173
185
  --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
186
+ --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
174
187
  --ly-scroll-max: min(62dvh, 34rem);
175
188
  }
176
189
  }
@@ -182,6 +195,7 @@
182
195
  --ly-shell-min: auto;
183
196
  --ly-sticky-position: static;
184
197
  --ly-section-padding-block: var(--ly-space-5);
198
+ --ly-section-padding-block-compact: var(--ly-space-3);
185
199
  --ly-scroll-max: max(12rem, calc(100vh - 8rem));
186
200
  }
187
201
 
package/dist/layout-style-css.css CHANGED
@@ -25,14 +25,14 @@
25
25
  --ly-wrapper-prose: 68ch;
26
26
  --ly-wrapper-content: 72rem;
27
27
  --ly-wrapper-wide: 112rem;
28
- --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
28
+ --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
29
29
  --ly-safe-area-inline: max(
30
30
  env(safe-area-inset-left, 0px),
31
31
  env(safe-area-inset-right, 0px)
32
32
  );
33
33
  --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
34
34
  --ly-safe-area-block-end: env(safe-area-inset-bottom, 0px);
35
- --ly-wrapper-gutter: max(var(--ly-page-padding-inline), var(--ly-safe-area-inline));
35
+ --ly-wrapper-gutter: var(--ly-page-padding-inline);
36
36
 
37
37
  --ly-profile-gap: var(--ly-space-5);
38
38
  --ly-gap: var(--ly-profile-gap);
@@ -40,6 +40,7 @@
40
40
  --ly-stack-gap: var(--ly-space-4);
41
41
  --ly-cluster-gap: var(--ly-space-3);
42
42
  --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
43
+ --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
43
44
  --ly-header-height: 4.5rem;
44
45
  --ly-sticky-position: sticky;
45
46
  --ly-cover-min: 100vh;
@@ -67,11 +68,13 @@
67
68
  --ly-gallery-min: 12rem;
68
69
  --ly-card-grid-min: 16rem;
69
70
 
71
+ --ly-app-shell-base-rows: auto auto minmax(0, 1fr) auto auto;
70
72
  --ly-app-shell-medium-areas:
71
73
  "header header"
72
74
  "sidebar main"
73
75
  "aside main"
74
76
  "footer footer";
77
+ --ly-app-shell-medium-rows: auto auto minmax(0, 1fr) auto;
75
78
  --ly-app-shell-medium-columns:
76
79
  minmax(min(100%, var(--ly-recipe-rail)), auto)
77
80
  minmax(0, 1fr);
@@ -79,6 +82,7 @@
79
82
  "sidebar header header"
80
83
  "sidebar main aside"
81
84
  "sidebar footer footer";
85
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto;
82
86
  --ly-app-shell-wide-columns:
83
87
  minmax(min(100%, var(--ly-recipe-rail)), auto)
84
88
  minmax(0, 1fr)
@@ -128,6 +132,13 @@
128
132
  min-block-size: 0;
129
133
  }
130
134
 
135
+ /* Prefer the nearest layout scope for gutters when container units parse. */
136
+ @supports (width: 1cqi) {
137
+ :where(.ly-root) {
138
+ --ly-page-padding-inline: clamp(1rem, 3cqi, 3rem);
139
+ }
140
+ }
141
+
131
142
  /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
132
143
  @supports (height: 100dvh) {
133
144
  :where(.ly-root) {
@@ -165,6 +176,7 @@
165
176
  --ly-stack-gap: min(var(--ly-space-4), 3vh);
166
177
  --ly-cluster-gap: min(var(--ly-space-3), 2vh);
167
178
  --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
179
+ --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
168
180
  --ly-header-height: 3.5rem;
169
181
  --ly-scroll-max: min(62vh, 34rem);
170
182
  }
@@ -174,6 +186,7 @@
174
186
  --ly-stack-gap: min(var(--ly-space-4), 3dvh);
175
187
  --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
176
188
  --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
189
+ --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
177
190
  --ly-scroll-max: min(62dvh, 34rem);
178
191
  }
179
192
  }
@@ -185,6 +198,7 @@
185
198
  --ly-shell-min: auto;
186
199
  --ly-sticky-position: static;
187
200
  --ly-section-padding-block: var(--ly-space-5);
201
+ --ly-section-padding-block-compact: var(--ly-space-3);
188
202
  --ly-scroll-max: max(12rem, calc(100vh - 8rem));
189
203
  }
190
204
 
@@ -202,7 +216,7 @@
202
216
  @layer ly.wrappers {
203
217
  .ly-wrapper {
204
218
  --ly-wrapper-max: var(--ly-personality-wrapper-max, var(--ly-wrapper-content));
205
- --ly-wrapper-fluid-gutter: clamp(1rem, 3vw, 3rem);
219
+ --ly-wrapper-fluid-gutter: var(--ly-wrapper-gutter);
206
220
  --ly-wrapper-local-gutter: max(
207
221
  var(--ly-wrapper-fluid-gutter),
208
222
  var(--ly-safe-area-inline)
@@ -216,13 +230,6 @@
216
230
  padding-inline: var(--ly-wrapper-local-gutter);
217
231
  }
218
232
 
219
- /* Container-relative gutters enhance the universally valid viewport fallback. */
220
- @supports (width: 1cqi) {
221
- .ly-wrapper {
222
- --ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
223
- }
224
- }
225
-
226
233
  .ly-wrapper--compact {
227
234
  --ly-wrapper-max: var(--ly-wrapper-compact);
228
235
  }
@@ -325,11 +332,11 @@
325
332
  }
326
333
 
327
334
  .ly-section--compact {
328
- --ly-section-padding-block: var(--ly-space-7);
335
+ padding-block: var(--ly-section-padding-block-compact);
329
336
  }
330
337
 
331
338
  .ly-section--flush {
332
- --ly-section-padding-block: 0;
339
+ padding-block: 0;
333
340
  }
334
341
 
335
342
  .ly-readable {
@@ -516,7 +523,7 @@
516
523
  "main"
517
524
  "aside"
518
525
  "footer";
519
- grid-template-rows: auto auto minmax(0, 1fr) auto auto;
526
+ grid-template-rows: var(--ly-app-shell-base-rows);
520
527
  }
521
528
 
522
529
  [data-ly-recipe="dashboard"],
@@ -647,6 +654,7 @@
647
654
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
648
655
  grid-template-areas: var(--ly-app-shell-medium-areas);
649
656
  grid-template-columns: var(--ly-app-shell-medium-columns);
657
+ grid-template-rows: var(--ly-app-shell-medium-rows);
650
658
  }
651
659
 
652
660
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -659,6 +667,7 @@
659
667
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
660
668
  grid-template-areas: var(--ly-app-shell-wide-areas);
661
669
  grid-template-columns: var(--ly-app-shell-wide-columns);
670
+ grid-template-rows: var(--ly-app-shell-wide-rows);
662
671
  }
663
672
 
664
673
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -793,6 +802,7 @@
793
802
  "sidebar main main"
794
803
  "aside main main"
795
804
  "footer footer footer";
805
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
796
806
  --ly-app-shell-wide-columns:
797
807
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr)
798
808
  minmax(0, 1fr)
@@ -855,6 +865,7 @@
855
865
  "sidebar main"
856
866
  "aside main"
857
867
  "footer footer";
868
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
858
869
  --ly-app-shell-wide-columns:
859
870
  minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
860
871
  minmax(0, 1fr);
@@ -877,6 +888,7 @@
877
888
  "main sidebar"
878
889
  "aside sidebar"
879
890
  "footer sidebar";
891
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
880
892
  --ly-app-shell-wide-columns:
881
893
  minmax(0, 1fr)
882
894
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
@@ -1042,6 +1054,7 @@
1042
1054
  "main sidebar"
1043
1055
  "aside sidebar"
1044
1056
  "footer footer";
1057
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
1045
1058
  --ly-app-shell-wide-columns:
1046
1059
  minmax(0, 1fr)
1047
1060
  minmax(0, 1fr);
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;@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-page-padding-inline:clamp(1rem,4vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-safe-area-block-start:env(safe-area-inset-top,0px);--ly-safe-area-block-end:env(safe-area-inset-bottom,0px);--ly-wrapper-gutter:max(var(--ly-page-padding-inline),var(--ly-safe-area-inline));--ly-profile-gap:var(--ly-space-5);--ly-gap:var(--ly-profile-gap);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-section-padding-block:clamp(3rem,7vh,6rem);--ly-header-height:4.5rem;--ly-sticky-position:sticky;--ly-cover-min:100vh;--ly-shell-min:100vh;--ly-scroll-max:min(70vh,50rem);--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-split-min:20rem;--ly-pane-min:18rem;--ly-pane-size:22rem;--ly-media-min:18rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-frame-ratio:16 / 9;--ly-split-primary:1fr;--ly-split-secondary:1fr;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-gallery-min:12rem;--ly-card-grid-min:16rem;--ly-app-shell-medium-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-medium-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-medium-areas:"header header" "nav nav" "main aside" "footer footer";--ly-dashboard-medium-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-wide-areas:"nav header header" "nav main aside" "nav footer footer";--ly-dashboard-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-docs-wide-areas:"header header" "nav main" "nav aside" "footer footer";--ly-docs-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-list-detail-wide-areas:"primary secondary" "actions actions";--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr);--ly-split-hero-wide-areas:"content media" "actions media";--ly-split-hero-wide-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr));container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}@supports (height:100dvh){:where(.ly-root){--ly-cover-min:100dvh;--ly-shell-min:100dvh;--ly-scroll-max:min(70dvh,50rem)}}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas),:where(.ly-root iframe){max-inline-size:100%}}@layer ly.tokens{@media (max-height:44rem){:where(.ly-root){--ly-gap:min(var(--ly-profile-gap),var(--ly-space-4));--ly-grid-gap:var(--ly-gap);--ly-stack-gap:min(var(--ly-space-4),3vh);--ly-cluster-gap:min(var(--ly-space-3),2vh);--ly-section-padding-block:clamp(1.5rem,6vh,3rem);--ly-header-height:3.5rem;--ly-scroll-max:min(62vh,34rem)}@supports (height:100dvh){:where(.ly-root){--ly-stack-gap:min(var(--ly-space-4),3dvh);--ly-cluster-gap:min(var(--ly-space-3),2dvh);--ly-section-padding-block:clamp(1.5rem,6dvh,3rem);--ly-scroll-max:min(62dvh,34rem)}}}@media (max-height:30rem){:where(.ly-root){--ly-cover-min:auto;--ly-shell-min:auto;--ly-sticky-position:static;--ly-section-padding-block:var(--ly-space-5);--ly-scroll-max:max(12rem,calc(100vh - 8rem))}@supports (height:100dvh){:where(.ly-root){--ly-scroll-max:max(12rem,calc(100dvh - 8rem))}}}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));--ly-wrapper-fluid-gutter:clamp(1rem,3vw,3rem);--ly-wrapper-local-gutter:max( var(--ly-wrapper-fluid-gutter),var(--ly-safe-area-inline) );container-name:ly-scope;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-local-gutter) * 2)));max-inline-size:100%;margin-inline:auto;padding-inline:var(--ly-wrapper-local-gutter)}@supports (width:1cqi){.ly-wrapper{--ly-wrapper-fluid-gutter:clamp(1rem,3cqi,3rem)}}.ly-wrapper--compact{--ly-wrapper-max:var(--ly-wrapper-compact)}.ly-wrapper--prose{--ly-wrapper-max:var(--ly-wrapper-prose)}.ly-wrapper--content{--ly-wrapper-max:var(--ly-wrapper-content)}.ly-wrapper--wide{--ly-wrapper-max:var(--ly-wrapper-wide)}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-wrapper-max:100%;--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-local-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [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-local-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0;max-inline-size:100%}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){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:100vh;min-block-size:100dvh;padding-block-start:var(--ly-safe-area-block-start);padding-block-end:var(--ly-safe-area-block-end)}.ly-header,.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:var(--ly-sticky-position,sticky);inset-block-start:0;z-index:var(--ly-z-header,20)}.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:100vh;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;min-inline-size:min(100%,var(--ly-sidebar-size))}.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(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr));gap:var(--ly-grid-gap)}.ly-grid--fixed{grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr))}.ly-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-split-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-pane-min)),1fr));gap:var(--ly-gap)}.ly-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-media-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){min-inline-size:min(100%,var(--ly-media-size))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0;min-block-size:0}.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;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-x:clip;overflow-y:auto;overscroll-behavior-block:contain}}@layer ly.recipes{:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] ){container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"] ){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}[data-ly-recipe="app-shell"]{min-block-size:100vh;min-block-size:var(--ly-shell-min);grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:auto auto minmax(0,1fr) auto auto}[data-ly-recipe="dashboard"],[data-ly-recipe="docs"]{grid-template-areas:"header" "nav" "main" "aside" "footer"}[data-ly-recipe="list-detail"]{grid-template-areas:"primary" "secondary" "actions"}[data-ly-recipe="split-hero"]{grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"]{display:grid;gap:var(--ly-grid-gap)}[data-ly-recipe="gallery"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}[data-ly-recipe="card-grid"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where( [data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )[data-ly-responsive="manual"]{grid-template-columns:minmax(0,1fr)}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )>*{min-inline-size:0;min-block-size:0}[data-ly-area="header"]{grid-area:header}[data-ly-area="nav"]{grid-area:nav}[data-ly-area="sidebar"]{grid-area:sidebar}[data-ly-area="main"]{grid-area:main}[data-ly-area="aside"]{grid-area:aside}[data-ly-area="footer"]{grid-area:footer}[data-ly-area="content"]{grid-area:content}[data-ly-area="media"]{grid-area:media}[data-ly-area="actions"]{grid-area:actions}[data-ly-area="primary"]{grid-area:primary}[data-ly-area="secondary"]{grid-area:secondary}@container ly-scope (min-width:42rem){[data-ly-recipe="split-hero"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-split-hero-wide-areas);grid-template-columns:var(--ly-split-hero-wide-columns)}}@container ly-scope (min-width:44rem){[data-ly-recipe="list-detail"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-list-detail-wide-areas);grid-template-columns:var(--ly-list-detail-wide-columns)}}@container ly-scope (min-width:48rem){[data-ly-recipe="docs"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-docs-wide-areas);grid-template-columns:var(--ly-docs-wide-columns)}}@container ly-scope (min-width:52rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-medium-areas);grid-template-columns:var(--ly-app-shell-medium-columns)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-medium-areas);grid-template-columns:var(--ly-dashboard-medium-columns)}}@container ly-scope (min-width:72rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-wide-areas);grid-template-columns:var(--ly-app-shell-wide-columns)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-wide-areas);grid-template-columns:var(--ly-dashboard-wide-columns)}}}@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-6{--ly-grid-columns:6}.ly-cols-12{--ly-grid-columns:12}.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-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-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-8{padding: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:100vh;min-block-size:100dvh}.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-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-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}}@layer ly.personalities.minimal-saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-personality-wrapper-max:88rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:16rem;--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-split-primary:1.05fr;--ly-split-secondary:0.95fr}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-card-grid-min:14rem;--ly-gallery-min:11rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.3fr) minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-7);--ly-grid-min:10rem;--ly-card-grid-min:13rem;--ly-gallery-min:10rem;--ly-recipe-rail:15rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "main main sidebar aside" "main main footer footer";--ly-app-shell-wide-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr) minmax(min(100%,var(--ly-recipe-aside)),0.38fr)}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-personality-wrapper-max:96rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "sidebar main main aside" "sidebar footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-personality-wrapper-max:82rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:15rem;--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.5fr) minmax(0,0.9fr)}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-personality-wrapper-max:84rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:17rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";--ly-app-shell-wide-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-list-detail-wide-columns:minmax(0,1.1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-personality-wrapper-max:106rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-app-shell-wide-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-personality-wrapper-max:100rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(0,1.3fr) minmax(0,0.7fr) minmax(min(100%,var(--ly-recipe-rail)),0.34fr)}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.2fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.32fr)}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-personality-wrapper-max:90rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-app-shell-wide-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-aside)),0.34fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.28fr)}}@layer ly.personalities.retro-glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-personality-wrapper-max:104rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:15rem;--ly-recipe-rail:18rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main main sidebar" "aside footer footer";--ly-app-shell-wide-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr)}}@layer ly.personalities.f-pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-personality-wrapper-max:92rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.26fr) minmax(0,1.35fr) minmax(min(100%,var(--ly-recipe-aside)),0.65fr);--ly-split-hero-wide-columns:minmax(0,1.8fr) minmax(0,0.8fr)}}@layer ly.personalities.z-pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-personality-wrapper-max:108rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";--ly-app-shell-wide-columns:minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-split-hero-wide-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}@layer ly.personalities.split-screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:20rem;--ly-recipe-rail:24rem;--ly-recipe-aside:24rem;--ly-app-shell-wide-areas:"header header" "main sidebar" "aside sidebar" "footer footer";--ly-app-shell-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-split-hero-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:11rem;--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.22fr) minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr)}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header header" "sidebar main aside" "footer footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.34fr);--ly-reel-item-min:20rem}}
1
+ @layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities;@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-page-padding-inline:clamp(1rem,3vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-safe-area-block-start:env(safe-area-inset-top,0px);--ly-safe-area-block-end:env(safe-area-inset-bottom,0px);--ly-wrapper-gutter:var(--ly-page-padding-inline);--ly-profile-gap:var(--ly-space-5);--ly-gap:var(--ly-profile-gap);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-section-padding-block:clamp(3rem,7vh,6rem);--ly-section-padding-block-compact:clamp(1.5rem,3.5vh,3rem);--ly-header-height:4.5rem;--ly-sticky-position:sticky;--ly-cover-min:100vh;--ly-shell-min:100vh;--ly-scroll-max:min(70vh,50rem);--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-split-min:20rem;--ly-pane-min:18rem;--ly-pane-size:22rem;--ly-media-min:18rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-frame-ratio:16 / 9;--ly-split-primary:1fr;--ly-split-secondary:1fr;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-gallery-min:12rem;--ly-card-grid-min:16rem;--ly-app-shell-base-rows:auto auto minmax(0,1fr) auto auto;--ly-app-shell-medium-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-medium-rows:auto auto minmax(0,1fr) auto;--ly-app-shell-medium-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-rows:auto minmax(0,1fr) auto;--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-medium-areas:"header header" "nav nav" "main aside" "footer footer";--ly-dashboard-medium-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-dashboard-wide-areas:"nav header header" "nav main aside" "nav footer footer";--ly-dashboard-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr);--ly-docs-wide-areas:"header header" "nav main" "nav aside" "footer footer";--ly-docs-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr);--ly-list-detail-wide-areas:"primary secondary" "actions actions";--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr);--ly-split-hero-wide-areas:"content media" "actions media";--ly-split-hero-wide-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr));container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}@supports (width:1cqi){:where(.ly-root){--ly-page-padding-inline:clamp(1rem,3cqi,3rem)}}@supports (height:100dvh){:where(.ly-root){--ly-cover-min:100dvh;--ly-shell-min:100dvh;--ly-scroll-max:min(70dvh,50rem)}}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas),:where(.ly-root iframe){max-inline-size:100%}}@layer ly.tokens{@media (max-height:44rem){:where(.ly-root){--ly-gap:min(var(--ly-profile-gap),var(--ly-space-4));--ly-grid-gap:var(--ly-gap);--ly-stack-gap:min(var(--ly-space-4),3vh);--ly-cluster-gap:min(var(--ly-space-3),2vh);--ly-section-padding-block:clamp(1.5rem,6vh,3rem);--ly-section-padding-block-compact:clamp(0.75rem,3vh,1.25rem);--ly-header-height:3.5rem;--ly-scroll-max:min(62vh,34rem)}@supports (height:100dvh){:where(.ly-root){--ly-stack-gap:min(var(--ly-space-4),3dvh);--ly-cluster-gap:min(var(--ly-space-3),2dvh);--ly-section-padding-block:clamp(1.5rem,6dvh,3rem);--ly-section-padding-block-compact:clamp(0.75rem,3dvh,1.25rem);--ly-scroll-max:min(62dvh,34rem)}}}@media (max-height:30rem){:where(.ly-root){--ly-cover-min:auto;--ly-shell-min:auto;--ly-sticky-position:static;--ly-section-padding-block:var(--ly-space-5);--ly-section-padding-block-compact:var(--ly-space-3);--ly-scroll-max:max(12rem,calc(100vh - 8rem))}@supports (height:100dvh){:where(.ly-root){--ly-scroll-max:max(12rem,calc(100dvh - 8rem))}}}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));--ly-wrapper-fluid-gutter:var(--ly-wrapper-gutter);--ly-wrapper-local-gutter:max( var(--ly-wrapper-fluid-gutter),var(--ly-safe-area-inline) );container-name:ly-scope;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-local-gutter) * 2)));max-inline-size:100%;margin-inline:auto;padding-inline:var(--ly-wrapper-local-gutter)}.ly-wrapper--compact{--ly-wrapper-max:var(--ly-wrapper-compact)}.ly-wrapper--prose{--ly-wrapper-max:var(--ly-wrapper-prose)}.ly-wrapper--content{--ly-wrapper-max:var(--ly-wrapper-content)}.ly-wrapper--wide{--ly-wrapper-max:var(--ly-wrapper-wide)}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-wrapper-max:100%;--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-local-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-local-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [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-local-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0;max-inline-size:100%}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){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:100vh;min-block-size:100dvh;padding-block-start:var(--ly-safe-area-block-start);padding-block-end:var(--ly-safe-area-block-end)}.ly-header,.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:var(--ly-sticky-position,sticky);inset-block-start:0;z-index:var(--ly-z-header,20)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{padding-block:var(--ly-section-padding-block-compact)}.ly-section--flush{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:100vh;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;min-inline-size:min(100%,var(--ly-sidebar-size))}.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(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr));gap:var(--ly-grid-gap)}.ly-grid--fixed{grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr))}.ly-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-split-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-pane-min)),1fr));gap:var(--ly-gap)}.ly-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-media-min)),1fr));gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){min-inline-size:min(100%,var(--ly-media-size))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0;min-block-size:0}.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;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-x:clip;overflow-y:auto;overscroll-behavior-block:contain}}@layer ly.recipes{:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] ){container-name:ly-scope;container-type:inline-size;min-inline-size:0;min-block-size:0}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"] ){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}[data-ly-recipe="app-shell"]{min-block-size:100vh;min-block-size:var(--ly-shell-min);grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:var(--ly-app-shell-base-rows)}[data-ly-recipe="dashboard"],[data-ly-recipe="docs"]{grid-template-areas:"header" "nav" "main" "aside" "footer"}[data-ly-recipe="list-detail"]{grid-template-areas:"primary" "secondary" "actions"}[data-ly-recipe="split-hero"]{grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"]{display:grid;gap:var(--ly-grid-gap)}[data-ly-recipe="gallery"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}[data-ly-recipe="card-grid"]{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where( [data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )[data-ly-responsive="manual"]{grid-template-columns:minmax(0,1fr)}:where( [data-ly-recipe="app-shell"],[data-ly-recipe="dashboard"],[data-ly-recipe="docs"],[data-ly-recipe="list-detail"],[data-ly-recipe="split-hero"],[data-ly-recipe="gallery"],[data-ly-recipe="card-grid"] )>*{min-inline-size:0;min-block-size:0}[data-ly-area="header"]{grid-area:header}[data-ly-area="nav"]{grid-area:nav}[data-ly-area="sidebar"]{grid-area:sidebar}[data-ly-area="main"]{grid-area:main}[data-ly-area="aside"]{grid-area:aside}[data-ly-area="footer"]{grid-area:footer}[data-ly-area="content"]{grid-area:content}[data-ly-area="media"]{grid-area:media}[data-ly-area="actions"]{grid-area:actions}[data-ly-area="primary"]{grid-area:primary}[data-ly-area="secondary"]{grid-area:secondary}@container ly-scope (min-width:42rem){[data-ly-recipe="split-hero"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-split-hero-wide-areas);grid-template-columns:var(--ly-split-hero-wide-columns)}}@container ly-scope (min-width:44rem){[data-ly-recipe="list-detail"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-list-detail-wide-areas);grid-template-columns:var(--ly-list-detail-wide-columns)}}@container ly-scope (min-width:48rem){[data-ly-recipe="docs"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-docs-wide-areas);grid-template-columns:var(--ly-docs-wide-columns)}}@container ly-scope (min-width:52rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-medium-areas);grid-template-columns:var(--ly-app-shell-medium-columns);grid-template-rows:var(--ly-app-shell-medium-rows)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-medium-areas);grid-template-columns:var(--ly-dashboard-medium-columns)}}@container ly-scope (min-width:72rem){[data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-app-shell-wide-areas);grid-template-columns:var(--ly-app-shell-wide-columns);grid-template-rows:var(--ly-app-shell-wide-rows)}[data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]){grid-template-areas:var(--ly-dashboard-wide-areas);grid-template-columns:var(--ly-dashboard-wide-columns)}}}@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-6{--ly-grid-columns:6}.ly-cols-12{--ly-grid-columns:12}.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-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-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-8{padding: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:100vh;min-block-size:100dvh}.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-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-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}}@layer ly.personalities.minimal-saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-personality-wrapper-max:88rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:16rem;--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-split-primary:1.05fr;--ly-split-secondary:0.95fr}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-card-grid-min:14rem;--ly-gallery-min:11rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";--ly-app-shell-wide-rows:auto auto minmax(0,1fr) auto;--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.3fr) minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-7);--ly-grid-min:10rem;--ly-card-grid-min:13rem;--ly-gallery-min:10rem;--ly-recipe-rail:15rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "main main sidebar aside" "main main footer footer";--ly-app-shell-wide-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr) minmax(min(100%,var(--ly-recipe-aside)),0.38fr)}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-personality-wrapper-max:96rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header header header" "sidebar main main aside" "sidebar footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-personality-wrapper-max:82rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:15rem;--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header" "sidebar main" "aside main" "footer footer";--ly-app-shell-wide-rows:auto auto minmax(0,1fr) auto;--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(min(100%,var(--ly-pane-size)),0.5fr) minmax(0,0.9fr)}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-personality-wrapper-max:84rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:17rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";--ly-app-shell-wide-rows:auto minmax(0,1fr) auto auto;--ly-app-shell-wide-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-list-detail-wide-columns:minmax(0,1.1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-personality-wrapper-max:106rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-app-shell-wide-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.24fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.3fr)}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-personality-wrapper-max:100rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(0,1.3fr) minmax(0,0.7fr) minmax(min(100%,var(--ly-recipe-rail)),0.34fr)}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:12rem;--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.2fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.32fr)}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-personality-wrapper-max:90rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:13rem;--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-app-shell-wide-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-aside)),0.34fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-rail)),0.28fr)}}@layer ly.personalities.retro-glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-personality-wrapper-max:104rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:15rem;--ly-recipe-rail:18rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"header header sidebar" "main main sidebar" "aside footer footer";--ly-app-shell-wide-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,var(--ly-recipe-rail)),0.32fr)}}@layer ly.personalities.f-pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-personality-wrapper-max:92rem;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.26fr) minmax(0,1.35fr) minmax(min(100%,var(--ly-recipe-aside)),0.65fr);--ly-split-hero-wide-columns:minmax(0,1.8fr) minmax(0,0.8fr)}}@layer ly.personalities.z-pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-personality-wrapper-max:108rem;--ly-profile-gap:var(--ly-space-5);--ly-grid-min:14rem;--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-app-shell-wide-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";--ly-app-shell-wide-columns:minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr) minmax(min(100%,var(--ly-recipe-rail)),0.3fr);--ly-split-hero-wide-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}@layer ly.personalities.split-screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-personality-wrapper-max:100%;--ly-profile-gap:var(--ly-space-4);--ly-grid-min:20rem;--ly-recipe-rail:24rem;--ly-recipe-aside:24rem;--ly-app-shell-wide-areas:"header header" "main sidebar" "aside sidebar" "footer footer";--ly-app-shell-wide-rows:auto minmax(0,1fr) auto auto;--ly-app-shell-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-split-hero-wide-columns:minmax(0,1fr) minmax(0,1fr);--ly-list-detail-wide-columns:minmax(0,1fr) minmax(0,1fr)}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-3);--ly-grid-min:11rem;--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-app-shell-wide-areas:"sidebar header header" "sidebar main aside" "footer footer aside";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.22fr) minmax(0,1.45fr) minmax(min(100%,var(--ly-recipe-aside)),0.55fr)}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-personality-wrapper-max:112rem;--ly-profile-gap:var(--ly-space-6);--ly-grid-min:14rem;--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-app-shell-wide-areas:"header header header" "sidebar main aside" "footer footer footer";--ly-app-shell-wide-columns:minmax(min(100%,var(--ly-recipe-rail)),0.28fr) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.34fr);--ly-reel-item-min:20rem}}
package/dist/personalities/bento.css CHANGED
@@ -14,6 +14,7 @@
14
14
  "sidebar main main"
15
15
  "aside main main"
16
16
  "footer footer footer";
17
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
17
18
  --ly-app-shell-wide-columns:
18
19
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr)
19
20
  minmax(0, 1fr)
package/dist/personalities/neumorphism.css CHANGED
@@ -12,6 +12,7 @@
12
12
  "main sidebar"
13
13
  "aside sidebar"
14
14
  "footer sidebar";
15
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
15
16
  --ly-app-shell-wide-columns:
16
17
  minmax(0, 1fr)
17
18
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
package/dist/personalities/split-screen.css CHANGED
@@ -16,6 +16,7 @@
16
16
  "main sidebar"
17
17
  "aside sidebar"
18
18
  "footer footer";
19
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
19
20
  --ly-app-shell-wide-columns:
20
21
  minmax(0, 1fr)
21
22
  minmax(0, 1fr);
package/dist/personalities/tactile.css CHANGED
@@ -12,6 +12,7 @@
12
12
  "sidebar main"
13
13
  "aside main"
14
14
  "footer footer";
15
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
15
16
  --ly-app-shell-wide-columns:
16
17
  minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
17
18
  minmax(0, 1fr);
package/dist/primitives.css CHANGED
@@ -34,11 +34,11 @@
34
34
  }
35
35
 
36
36
  .ly-section--compact {
37
- --ly-section-padding-block: var(--ly-space-7);
37
+ padding-block: var(--ly-section-padding-block-compact);
38
38
  }
39
39
 
40
40
  .ly-section--flush {
41
- --ly-section-padding-block: 0;
41
+ padding-block: 0;
42
42
  }
43
43
 
44
44
  .ly-readable {
package/dist/recipes.css CHANGED
@@ -42,7 +42,7 @@
42
42
  "main"
43
43
  "aside"
44
44
  "footer";
45
- grid-template-rows: auto auto minmax(0, 1fr) auto auto;
45
+ grid-template-rows: var(--ly-app-shell-base-rows);
46
46
  }
47
47
 
48
48
  [data-ly-recipe="dashboard"],
@@ -173,6 +173,7 @@
173
173
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
174
174
  grid-template-areas: var(--ly-app-shell-medium-areas);
175
175
  grid-template-columns: var(--ly-app-shell-medium-columns);
176
+ grid-template-rows: var(--ly-app-shell-medium-rows);
176
177
  }
177
178
 
178
179
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -185,6 +186,7 @@
185
186
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
186
187
  grid-template-areas: var(--ly-app-shell-wide-areas);
187
188
  grid-template-columns: var(--ly-app-shell-wide-columns);
189
+ grid-template-rows: var(--ly-app-shell-wide-rows);
188
190
  }
189
191
 
190
192
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
package/dist/wrappers.css CHANGED
@@ -5,7 +5,7 @@
5
5
  @layer ly.wrappers {
6
6
  .ly-wrapper {
7
7
  --ly-wrapper-max: var(--ly-personality-wrapper-max, var(--ly-wrapper-content));
8
- --ly-wrapper-fluid-gutter: clamp(1rem, 3vw, 3rem);
8
+ --ly-wrapper-fluid-gutter: var(--ly-wrapper-gutter);
9
9
  --ly-wrapper-local-gutter: max(
10
10
  var(--ly-wrapper-fluid-gutter),
11
11
  var(--ly-safe-area-inline)
@@ -19,13 +19,6 @@
19
19
  padding-inline: var(--ly-wrapper-local-gutter);
20
20
  }
21
21
 
22
- /* Container-relative gutters enhance the universally valid viewport fallback. */
23
- @supports (width: 1cqi) {
24
- .ly-wrapper {
25
- --ly-wrapper-fluid-gutter: clamp(1rem, 3cqi, 3rem);
26
- }
27
- }
28
-
29
22
  .ly-wrapper--compact {
30
23
  --ly-wrapper-max: var(--ly-wrapper-compact);
31
24
  }
package/docs/wiki/Getting-Started.md CHANGED
@@ -1,9 +1,9 @@
1
1
  # Getting Started
2
2
 
3
- Install `layout-style-css@3.0.1` and import the root bundle:
3
+ Install `layout-style-css@3.0.2` and import the root bundle:
4
4
 
5
5
  ```bash
6
- npm install layout-style-css@3.0.1
6
+ npm install layout-style-css@3.0.2
7
7
  ```
8
8
 
9
9
  ```js
package/docs/wiki/Home.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Layout Style CSS v3
2
2
 
3
- `layout-style-css@3.0.1` is a dependency-free, CSS-only structural system for layouts that adapt to available width and height.
3
+ `layout-style-css@3.0.2` is a dependency-free, CSS-only structural system for layouts that adapt to available width and height.
4
4
 
5
5
  ## Contract
6
6
 
package/docs/wiki/Installation-And-CDN.md CHANGED
@@ -9,7 +9,7 @@
9
9
  ## Package
10
10
 
11
11
  ```bash
12
- npm install layout-style-css@3.0.1
12
+ npm install layout-style-css@3.0.2
13
13
  ```
14
14
 
15
15
  ```js
@@ -36,11 +36,11 @@ Package and bundler defaults (`main`, `style`, and the root export) use the read
36
36
  ## CDN
37
37
 
38
38
  ```html
39
- <link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.1/dist/layout-style-css.min.css">
39
+ <link rel="stylesheet" href="https://unpkg.com/layout-style-css@3.0.2/dist/layout-style-css.min.css">
40
40
  ```
41
41
 
42
42
  ```html
43
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.1/dist/layout-style-css.min.css">
43
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.2/dist/layout-style-css.min.css">
44
44
  ```
45
45
 
46
46
  The CDN paths include `/dist/` because CDN clients address files in the published tarball, while package import maps use the public exports.
package/docs/wiki/Layout-Primitives.md CHANGED
@@ -19,6 +19,8 @@ Wrappers are optional local responsive scopes:
19
19
 
20
20
  Breakout children select clamped lanes with `data-ly-lane="content"`, `data-ly-lane="feature"`, or `data-ly-lane="full"`.
21
21
 
22
+ `--ly-page-padding-inline` supplies the default `--ly-wrapper-gutter` value. `--ly-wrapper-gutter` controls rendered Wrapper padding at the scope where it is overridden, while the Wrapper applies safe-area compensation once at its outer edge.
23
+
22
24
  ## Flow
23
25
 
24
26
  - `.ly-stack` creates vertical flow.
@@ -49,6 +51,8 @@ Page, cover, and bounded scroll behaviors use `vh` fallbacks followed by dynamic
49
51
 
50
52
  At `44rem` viewport height or less, gaps and scroll maxima tighten. At `30rem` or less, forced cover/shell minimums and recipe-owned sticky positioning are removed. Required regions remain in normal document flow.
51
53
 
54
+ `--ly-section-padding-block` controls normal `.ly-section` spacing. `--ly-section-padding-block-compact` controls `.ly-section--compact` independently and remains smaller than the normal value across regular, short, and shallow viewport heights.
55
+
52
56
  ## Public Tuning
53
57
 
54
58
  Advanced consumers can override stable custom properties for:
package/docs/wiki/Layout-Recipes.md CHANGED
@@ -16,6 +16,8 @@ Recipes are attribute-only semantic layouts. The mobile DOM order is authoritati
16
16
 
17
17
  Recipe roots also establish `ly-scope`, so child compositions can respond without extra setup.
18
18
 
19
+ App Shell base, medium, and wide topologies own matching row definitions. Header and footer tracks remain intrinsic while the main workspace receives the flexible row, including personality-specific four-row topologies.
20
+
19
21
  ## Areas
20
22
 
21
23
  Canonical `data-ly-area` values are:
package/docs/wiki/Layout-Styles.md CHANGED
@@ -23,6 +23,8 @@ Every profile feeds the same wrapper, primitive, and recipe engine. Profiles tun
23
23
 
24
24
  A profile must remain visibly distinct through at least two spatial characteristics. Personality files may not declare their own `@container`, viewport, or orientation breakpoint systems.
25
25
 
26
+ When a profile supplies an App Shell area template, its matching row definition must contain the same number of rows and keep the main workspace on the flexible track.
27
+
26
28
  ## Ownership
27
29
 
28
30
  Layout owns structure. UI Style Kit owns paint. Interactive Surface owns interaction styling.
package/docs/wiki/Release-And-Publishing.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Release And Publishing
2
2
 
3
- This guide describes the release gate for `layout-style-css@3.0.1`. Running verification does not publish, tag, push, create a GitHub Release, or change the npm registry.
3
+ This guide describes the release gate for `layout-style-css@3.0.2`. Running verification does not publish, tag, push, create a GitHub Release, or change the npm registry.
4
4
 
5
5
  ## Local Candidate Gate
6
6
 
@@ -23,7 +23,7 @@ The package's `prepublishOnly` script runs `npm run release:verify`, so a direct
23
23
 
24
24
  The immutable cross-repository pins require this exact remote sequence:
25
25
 
26
- 1. Push a stable UI bootstrap ref containing `bdbb6a7e432f30b92de206cac6a00fe85394190c`.
26
+ 1. Push a stable UI bootstrap ref containing `33e3c834aec62b85650dd14aea9d7d388abef191`.
27
27
  2. Push and merge Interactive Surface CSS and Layout Style CSS with merge commits so their reviewed commit SHAs remain reachable.
28
28
  3. Update and verify the final UI companion pins against those merged companion commits.
29
29
  4. Push the final UI branch, rerun its ecosystem preflight, and merge UI with a merge commit.
@@ -35,8 +35,8 @@ The bootstrap SHA is deliberately stable: companion workflows use it to load the
35
35
 
36
36
  Confirm:
37
37
 
38
- - package version is `3.0.1`
39
- - intended tag would be `v3.0.1`
38
+ - package version is `3.0.2`
39
+ - intended tag would be `v3.0.2`
40
40
  - runtime and peer dependencies are empty
41
41
  - exact exports and tarball files match the v3 contract
42
42
  - generated CSS matches authored sources
@@ -50,7 +50,7 @@ Only after explicit approval:
50
50
  1. Commit the verified candidate.
51
51
  2. Push the intended branch.
52
52
  3. Merge through the repository's normal review policy.
53
- 4. Create the exact `v3.0.1` tag from the protected release commit.
53
+ 4. Create the exact `v3.0.2` tag from the protected release commit.
54
54
  5. Publish the GitHub Release.
55
55
  6. Let the protected npm workflow verify the tag and publish with provenance.
56
56
  7. Confirm the GitHub Release, tag, and npm registry state independently.
package/manifest.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
6
6
  },
7
7
  "name": "layout-style-css",
8
- "version": "3.0.1",
8
+ "version": "3.0.2",
9
9
  "entrypoints": {
10
10
  "default": "./dist/layout-style-css.css",
11
11
  "minified": "./dist/layout-style-css.min.css",
@@ -76,7 +76,8 @@
76
76
  "--ly-page-padding-inline", "--ly-safe-area-inline", "--ly-safe-area-block-start",
77
77
  "--ly-safe-area-block-end", "--ly-wrapper-gutter", "--ly-wrapper-max", "--ly-profile-gap",
78
78
  "--ly-gap", "--ly-grid-gap", "--ly-stack-gap", "--ly-cluster-gap",
79
- "--ly-section-padding-block", "--ly-header-height", "--ly-sticky-position", "--ly-cover-min",
79
+ "--ly-section-padding-block", "--ly-section-padding-block-compact", "--ly-header-height",
80
+ "--ly-sticky-position", "--ly-cover-min",
80
81
  "--ly-shell-min", "--ly-scroll-max", "--ly-switcher-threshold", "--ly-sidebar-size",
81
82
  "--ly-sidebar-content-min", "--ly-grid-columns", "--ly-grid-min", "--ly-split-min",
82
83
  "--ly-pane-min", "--ly-pane-size", "--ly-media-min", "--ly-media-size", "--ly-reel-item-min",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "layout-style-css",
3
- "version": "3.0.1",
3
+ "version": "3.0.2",
4
4
  "description": "Dependency-free structural CSS for responsive wrappers, composition primitives, recipes, utilities, and layout personalities.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -64,7 +64,7 @@
64
64
  "overrides": {
65
65
  "fast-uri": "3.1.5",
66
66
  "js-yaml": "4.3.1",
67
- "nanoid": "3.3.17",
67
+ "nanoid": "3.3.18",
68
68
  "postcss": "8.5.23"
69
69
  },
70
70
  "exports": {