layout-style-css 3.0.1 → 3.1.0

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 (39) hide show
  1. package/CHANGELOG.md +32 -0
  2. package/README.md +31 -8
  3. package/dist/core.css +1 -1
  4. package/dist/foundation.css +168 -13
  5. package/dist/layout-style-css.css +200 -59
  6. package/dist/layout-style-css.min.css +1 -1
  7. package/dist/personalities/bauhaus.css +1 -1
  8. package/dist/personalities/bento.css +2 -1
  9. package/dist/personalities/brutalism.css +1 -1
  10. package/dist/personalities/cyberpunk.css +1 -1
  11. package/dist/personalities/f-pattern.css +1 -1
  12. package/dist/personalities/maximalist.css +1 -1
  13. package/dist/personalities/minimal-saas.css +1 -1
  14. package/dist/personalities/mondrian.css +1 -1
  15. package/dist/personalities/neumorphism.css +2 -1
  16. package/dist/personalities/retro-glass.css +1 -1
  17. package/dist/personalities/retrofuturism.css +1 -1
  18. package/dist/personalities/split-screen.css +2 -1
  19. package/dist/personalities/synthwave.css +1 -1
  20. package/dist/personalities/tactile.css +2 -1
  21. package/dist/personalities/y2k.css +1 -1
  22. package/dist/personalities/z-pattern.css +1 -1
  23. package/dist/personalities.css +1 -1
  24. package/dist/primitives.css +11 -4
  25. package/dist/recipes.css +4 -2
  26. package/dist/utilities.css +11 -35
  27. package/dist/wrappers.css +6 -9
  28. package/docs/wiki/Getting-Started.md +9 -4
  29. package/docs/wiki/Home.md +3 -1
  30. package/docs/wiki/Installation-And-CDN.md +6 -5
  31. package/docs/wiki/Layout-Primitives.md +16 -3
  32. package/docs/wiki/Layout-Recipes.md +4 -0
  33. package/docs/wiki/Layout-Styles.md +7 -1
  34. package/docs/wiki/Migrating-To-3.1.md +62 -0
  35. package/docs/wiki/Release-And-Publishing.md +5 -5
  36. package/docs/wiki/_Sidebar.md +1 -0
  37. package/manifest.json +18 -7
  38. package/package.json +2 -2
  39. package/personalities.json +1 -0
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  /* layout-style-css v3 bundle. Generated from focused styles/ modules. */
4
4
 
@@ -24,27 +24,30 @@
24
24
  --ly-wrapper-compact: 40rem;
25
25
  --ly-wrapper-prose: 68ch;
26
26
  --ly-wrapper-content: 72rem;
27
+ --ly-wrapper-workspace: 96rem;
27
28
  --ly-wrapper-wide: 112rem;
28
- --ly-page-padding-inline: clamp(1rem, 4vw, 3rem);
29
+ --ly-page-padding-inline: clamp(1rem, 3vw, 3rem);
29
30
  --ly-safe-area-inline: max(
30
31
  env(safe-area-inset-left, 0px),
31
32
  env(safe-area-inset-right, 0px)
32
33
  );
33
34
  --ly-safe-area-block-start: env(safe-area-inset-top, 0px);
34
35
  --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));
36
+ --ly-wrapper-gutter: var(--ly-page-padding-inline);
36
37
 
37
38
  --ly-profile-gap: var(--ly-space-5);
38
39
  --ly-gap: var(--ly-profile-gap);
39
40
  --ly-grid-gap: var(--ly-gap);
40
41
  --ly-stack-gap: var(--ly-space-4);
41
42
  --ly-cluster-gap: var(--ly-space-3);
42
- --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
43
+ --ly-section-padding-block: clamp(2rem, 4vh, 4rem);
44
+ --ly-section-padding-block-compact: clamp(1rem, 2.5vh, 2rem);
43
45
  --ly-header-height: 4.5rem;
44
46
  --ly-sticky-position: sticky;
45
47
  --ly-cover-min: 100vh;
46
48
  --ly-shell-min: 100vh;
47
- --ly-scroll-max: min(70vh, 50rem);
49
+ --ly-scroll-max: 50rem;
50
+ --ly-scroll-viewport-max: min(70vh, 50rem);
48
51
 
49
52
  --ly-switcher-threshold: 42rem;
50
53
  --ly-sidebar-size: 18rem;
@@ -67,11 +70,13 @@
67
70
  --ly-gallery-min: 12rem;
68
71
  --ly-card-grid-min: 16rem;
69
72
 
73
+ --ly-app-shell-base-rows: auto auto minmax(0, 1fr) auto auto;
70
74
  --ly-app-shell-medium-areas:
71
75
  "header header"
72
76
  "sidebar main"
73
77
  "aside main"
74
78
  "footer footer";
79
+ --ly-app-shell-medium-rows: auto auto minmax(0, 1fr) auto;
75
80
  --ly-app-shell-medium-columns:
76
81
  minmax(min(100%, var(--ly-recipe-rail)), auto)
77
82
  minmax(0, 1fr);
@@ -79,6 +84,7 @@
79
84
  "sidebar header header"
80
85
  "sidebar main aside"
81
86
  "sidebar footer footer";
87
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto;
82
88
  --ly-app-shell-wide-columns:
83
89
  minmax(min(100%, var(--ly-recipe-rail)), auto)
84
90
  minmax(0, 1fr)
@@ -128,12 +134,19 @@
128
134
  min-block-size: 0;
129
135
  }
130
136
 
137
+ /* Prefer the nearest layout scope for gutters when container units parse. */
138
+ @supports (width: 1cqi) {
139
+ :where(.ly-root) {
140
+ --ly-page-padding-inline: clamp(1rem, 3cqi, 3rem);
141
+ }
142
+ }
143
+
131
144
  /* Enhance viewport-bound tokens only when dynamic viewport units parse. */
132
145
  @supports (height: 100dvh) {
133
146
  :where(.ly-root) {
134
147
  --ly-cover-min: 100dvh;
135
148
  --ly-shell-min: 100dvh;
136
- --ly-scroll-max: min(70dvh, 50rem);
149
+ --ly-scroll-viewport-max: min(70dvh, 50rem);
137
150
  }
138
151
  }
139
152
  }
@@ -164,17 +177,19 @@
164
177
  --ly-grid-gap: var(--ly-gap);
165
178
  --ly-stack-gap: min(var(--ly-space-4), 3vh);
166
179
  --ly-cluster-gap: min(var(--ly-space-3), 2vh);
167
- --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
180
+ --ly-section-padding-block: clamp(1.25rem, 4vh, 2rem);
181
+ --ly-section-padding-block-compact: clamp(0.75rem, 2vh, 1.25rem);
168
182
  --ly-header-height: 3.5rem;
169
- --ly-scroll-max: min(62vh, 34rem);
183
+ --ly-scroll-viewport-max: min(62vh, 34rem);
170
184
  }
171
185
 
172
186
  @supports (height: 100dvh) {
173
187
  :where(.ly-root) {
174
188
  --ly-stack-gap: min(var(--ly-space-4), 3dvh);
175
189
  --ly-cluster-gap: min(var(--ly-space-3), 2dvh);
176
- --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
177
- --ly-scroll-max: min(62dvh, 34rem);
190
+ --ly-section-padding-block: clamp(1.25rem, 4dvh, 2rem);
191
+ --ly-section-padding-block-compact: clamp(0.75rem, 2dvh, 1.25rem);
192
+ --ly-scroll-viewport-max: min(62dvh, 34rem);
178
193
  }
179
194
  }
180
195
  }
@@ -184,25 +199,165 @@
184
199
  --ly-cover-min: auto;
185
200
  --ly-shell-min: auto;
186
201
  --ly-sticky-position: static;
187
- --ly-section-padding-block: var(--ly-space-5);
188
- --ly-scroll-max: max(12rem, calc(100vh - 8rem));
202
+ --ly-section-padding-block: var(--ly-space-4);
203
+ --ly-section-padding-block-compact: var(--ly-space-2);
204
+ --ly-scroll-viewport-max: max(12rem, calc(100vh - 8rem));
189
205
  }
190
206
 
191
207
  @supports (height: 100dvh) {
192
208
  :where(.ly-root) {
193
- --ly-scroll-max: max(12rem, calc(100dvh - 8rem));
209
+ --ly-scroll-viewport-max: max(12rem, calc(100dvh - 8rem));
194
210
  }
195
211
  }
196
212
  }
197
213
  }
198
214
 
215
+ @layer ly.context {
216
+ :where(
217
+ .ly-root[data-ly-density="compact"],
218
+ .ly-root [data-ly-density="compact"]
219
+ ) {
220
+ --ly-gap: var(--ly-space-3);
221
+ --ly-grid-gap: var(--ly-space-3);
222
+ --ly-stack-gap: var(--ly-space-3);
223
+ --ly-cluster-gap: var(--ly-space-2);
224
+ --ly-section-padding-block: clamp(1rem, 2.5vh, 2rem);
225
+ --ly-section-padding-block-compact: clamp(0.5rem, 1.5vh, 1rem);
226
+ }
227
+
228
+ :where(
229
+ .ly-root[data-ly-density="normal"],
230
+ .ly-root [data-ly-density="normal"]
231
+ ) {
232
+ --ly-gap: var(--ly-profile-gap);
233
+ --ly-grid-gap: var(--ly-gap);
234
+ --ly-stack-gap: var(--ly-space-4);
235
+ --ly-cluster-gap: var(--ly-space-3);
236
+ --ly-section-padding-block: clamp(2rem, 4vh, 4rem);
237
+ --ly-section-padding-block-compact: clamp(1rem, 2.5vh, 2rem);
238
+ }
239
+
240
+ :where(
241
+ .ly-root[data-ly-density="spacious"],
242
+ .ly-root [data-ly-density="spacious"]
243
+ ) {
244
+ --ly-gap: max(var(--ly-profile-gap), var(--ly-space-6));
245
+ --ly-grid-gap: var(--ly-gap);
246
+ --ly-stack-gap: var(--ly-space-5);
247
+ --ly-cluster-gap: var(--ly-space-4);
248
+ --ly-section-padding-block: clamp(3rem, 7vh, 6rem);
249
+ --ly-section-padding-block-compact: clamp(1.5rem, 3.5vh, 3rem);
250
+ }
251
+
252
+ @media (max-height: 44rem) {
253
+ :where(
254
+ .ly-root[data-ly-density="compact"],
255
+ .ly-root [data-ly-density="compact"]
256
+ ) {
257
+ --ly-gap: var(--ly-space-3);
258
+ --ly-grid-gap: var(--ly-space-3);
259
+ --ly-stack-gap: var(--ly-space-3);
260
+ --ly-cluster-gap: var(--ly-space-2);
261
+ --ly-section-padding-block: clamp(0.75rem, 2vh, 1.25rem);
262
+ --ly-section-padding-block-compact: var(--ly-space-2);
263
+ }
264
+
265
+ :where(
266
+ .ly-root[data-ly-density="normal"],
267
+ .ly-root [data-ly-density="normal"]
268
+ ) {
269
+ --ly-gap: min(var(--ly-profile-gap), var(--ly-space-4));
270
+ --ly-grid-gap: var(--ly-gap);
271
+ --ly-stack-gap: var(--ly-space-4);
272
+ --ly-cluster-gap: var(--ly-space-3);
273
+ --ly-section-padding-block: clamp(1.25rem, 4vh, 2rem);
274
+ --ly-section-padding-block-compact: clamp(0.75rem, 2vh, 1.25rem);
275
+ }
276
+
277
+ :where(
278
+ .ly-root[data-ly-density="spacious"],
279
+ .ly-root [data-ly-density="spacious"]
280
+ ) {
281
+ --ly-gap: var(--ly-space-5);
282
+ --ly-grid-gap: var(--ly-space-5);
283
+ --ly-stack-gap: var(--ly-space-4);
284
+ --ly-cluster-gap: var(--ly-space-3);
285
+ --ly-section-padding-block: clamp(1.5rem, 6vh, 3rem);
286
+ --ly-section-padding-block-compact: clamp(0.75rem, 3vh, 1.25rem);
287
+ }
288
+
289
+ @supports (height: 100dvh) {
290
+ :where(
291
+ .ly-root[data-ly-density="compact"],
292
+ .ly-root [data-ly-density="compact"]
293
+ ) {
294
+ --ly-section-padding-block: clamp(0.75rem, 2dvh, 1.25rem);
295
+ }
296
+
297
+ :where(
298
+ .ly-root[data-ly-density="normal"],
299
+ .ly-root [data-ly-density="normal"]
300
+ ) {
301
+ --ly-section-padding-block: clamp(1.25rem, 4dvh, 2rem);
302
+ --ly-section-padding-block-compact: clamp(0.75rem, 2dvh, 1.25rem);
303
+ }
304
+
305
+ :where(
306
+ .ly-root[data-ly-density="spacious"],
307
+ .ly-root [data-ly-density="spacious"]
308
+ ) {
309
+ --ly-section-padding-block: clamp(1.5rem, 6dvh, 3rem);
310
+ --ly-section-padding-block-compact: clamp(0.75rem, 3dvh, 1.25rem);
311
+ }
312
+ }
313
+ }
314
+
315
+ @media (max-height: 30rem) {
316
+ :where(
317
+ .ly-root[data-ly-density="compact"],
318
+ .ly-root [data-ly-density="compact"]
319
+ ) {
320
+ --ly-gap: var(--ly-space-2);
321
+ --ly-grid-gap: var(--ly-space-2);
322
+ --ly-stack-gap: var(--ly-space-2);
323
+ --ly-cluster-gap: var(--ly-space-1);
324
+ --ly-section-padding-block: var(--ly-space-3);
325
+ --ly-section-padding-block-compact: var(--ly-space-2);
326
+ }
327
+
328
+ :where(
329
+ .ly-root[data-ly-density="normal"],
330
+ .ly-root [data-ly-density="normal"]
331
+ ) {
332
+ --ly-gap: var(--ly-space-3);
333
+ --ly-grid-gap: var(--ly-space-3);
334
+ --ly-stack-gap: var(--ly-space-3);
335
+ --ly-cluster-gap: var(--ly-space-2);
336
+ --ly-section-padding-block: var(--ly-space-4);
337
+ --ly-section-padding-block-compact: var(--ly-space-2);
338
+ }
339
+
340
+ :where(
341
+ .ly-root[data-ly-density="spacious"],
342
+ .ly-root [data-ly-density="spacious"]
343
+ ) {
344
+ --ly-gap: var(--ly-space-4);
345
+ --ly-grid-gap: var(--ly-space-4);
346
+ --ly-stack-gap: var(--ly-space-4);
347
+ --ly-cluster-gap: var(--ly-space-3);
348
+ --ly-section-padding-block: var(--ly-space-5);
349
+ --ly-section-padding-block-compact: var(--ly-space-3);
350
+ }
351
+ }
352
+ }
353
+
199
354
  /* wrappers.css */
200
355
  /* Wrappers provide fluid measures and become the nearest responsive scope. */
201
356
 
202
357
  @layer ly.wrappers {
203
358
  .ly-wrapper {
204
359
  --ly-wrapper-max: var(--ly-personality-wrapper-max, var(--ly-wrapper-content));
205
- --ly-wrapper-fluid-gutter: clamp(1rem, 3vw, 3rem);
360
+ --ly-wrapper-fluid-gutter: var(--ly-wrapper-gutter);
206
361
  --ly-wrapper-local-gutter: max(
207
362
  var(--ly-wrapper-fluid-gutter),
208
363
  var(--ly-safe-area-inline)
@@ -216,13 +371,6 @@
216
371
  padding-inline: var(--ly-wrapper-local-gutter);
217
372
  }
218
373
 
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
374
  .ly-wrapper--compact {
227
375
  --ly-wrapper-max: var(--ly-wrapper-compact);
228
376
  }
@@ -235,6 +383,10 @@
235
383
  --ly-wrapper-max: var(--ly-wrapper-content);
236
384
  }
237
385
 
386
+ .ly-wrapper--workspace {
387
+ --ly-wrapper-max: var(--ly-wrapper-workspace);
388
+ }
389
+
238
390
  .ly-wrapper--wide {
239
391
  --ly-wrapper-max: var(--ly-wrapper-wide);
240
392
  }
@@ -325,11 +477,11 @@
325
477
  }
326
478
 
327
479
  .ly-section--compact {
328
- --ly-section-padding-block: var(--ly-space-7);
480
+ padding-block: var(--ly-section-padding-block-compact);
329
481
  }
330
482
 
331
483
  .ly-section--flush {
332
- --ly-section-padding-block: 0;
484
+ padding-block: 0;
333
485
  }
334
486
 
335
487
  .ly-readable {
@@ -466,11 +618,18 @@
466
618
 
467
619
  .ly-scroll {
468
620
  min-block-size: 0;
469
- max-block-size: var(--ly-scroll-max);
470
621
  overflow-x: clip;
471
622
  overflow-y: auto;
472
623
  overscroll-behavior-block: contain;
473
624
  }
625
+
626
+ .ly-scroll--bounded {
627
+ max-block-size: var(--ly-scroll-max);
628
+ }
629
+
630
+ .ly-scroll--viewport {
631
+ max-block-size: var(--ly-scroll-viewport-max);
632
+ }
474
633
  }
475
634
 
476
635
  /* recipes.css */
@@ -516,7 +675,7 @@
516
675
  "main"
517
676
  "aside"
518
677
  "footer";
519
- grid-template-rows: auto auto minmax(0, 1fr) auto auto;
678
+ grid-template-rows: var(--ly-app-shell-base-rows);
520
679
  }
521
680
 
522
681
  [data-ly-recipe="dashboard"],
@@ -647,6 +806,7 @@
647
806
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
648
807
  grid-template-areas: var(--ly-app-shell-medium-areas);
649
808
  grid-template-columns: var(--ly-app-shell-medium-columns);
809
+ grid-template-rows: var(--ly-app-shell-medium-rows);
650
810
  }
651
811
 
652
812
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -659,6 +819,7 @@
659
819
  [data-ly-recipe="app-shell"]:not([data-ly-responsive="manual"]) {
660
820
  grid-template-areas: var(--ly-app-shell-wide-areas);
661
821
  grid-template-columns: var(--ly-app-shell-wide-columns);
822
+ grid-template-rows: var(--ly-app-shell-wide-rows);
662
823
  }
663
824
 
664
825
  [data-ly-recipe="dashboard"]:not([data-ly-responsive="manual"]) {
@@ -685,40 +846,16 @@
685
846
  .ly-span-4 { grid-column: span 4; }
686
847
  .ly-span-full { grid-column: 1 / -1; }
687
848
 
688
- .ly-gap-0 {
689
- --ly-gap: var(--ly-space-0);
690
- --ly-grid-gap: var(--ly-space-0);
691
- --ly-stack-gap: var(--ly-space-0);
692
- --ly-cluster-gap: var(--ly-space-0);
693
- }
694
-
695
- .ly-gap-2 {
696
- --ly-gap: var(--ly-space-2);
697
- --ly-grid-gap: var(--ly-space-2);
698
- --ly-stack-gap: var(--ly-space-2);
699
- --ly-cluster-gap: var(--ly-space-2);
700
- }
701
-
702
- .ly-gap-4 {
703
- --ly-gap: var(--ly-space-4);
704
- --ly-grid-gap: var(--ly-space-4);
705
- --ly-stack-gap: var(--ly-space-4);
706
- --ly-cluster-gap: var(--ly-space-4);
707
- }
708
-
709
- .ly-gap-6 {
710
- --ly-gap: var(--ly-space-6);
711
- --ly-grid-gap: var(--ly-space-6);
712
- --ly-stack-gap: var(--ly-space-6);
713
- --ly-cluster-gap: var(--ly-space-6);
714
- }
715
-
716
- .ly-gap-8 {
717
- --ly-gap: var(--ly-space-8);
718
- --ly-grid-gap: var(--ly-space-8);
719
- --ly-stack-gap: var(--ly-space-8);
720
- --ly-cluster-gap: var(--ly-space-8);
721
- }
849
+ .ly-gap-0 { gap: var(--ly-space-0); }
850
+ .ly-gap-1 { gap: var(--ly-space-1); }
851
+ .ly-gap-2 { gap: var(--ly-space-2); }
852
+ .ly-gap-3 { gap: var(--ly-space-3); }
853
+ .ly-gap-4 { gap: var(--ly-space-4); }
854
+ .ly-gap-5 { gap: var(--ly-space-5); }
855
+ .ly-gap-6 { gap: var(--ly-space-6); }
856
+ .ly-gap-7 { gap: var(--ly-space-7); }
857
+ .ly-gap-8 { gap: var(--ly-space-8); }
858
+ .ly-gap-9 { gap: var(--ly-space-9); }
722
859
 
723
860
  .ly-pad-0 { padding: var(--ly-space-0); }
724
861
  .ly-pad-2 { padding: var(--ly-space-2); }
@@ -793,6 +930,7 @@
793
930
  "sidebar main main"
794
931
  "aside main main"
795
932
  "footer footer footer";
933
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
796
934
  --ly-app-shell-wide-columns:
797
935
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr)
798
936
  minmax(0, 1fr)
@@ -855,6 +993,7 @@
855
993
  "sidebar main"
856
994
  "aside main"
857
995
  "footer footer";
996
+ --ly-app-shell-wide-rows: auto auto minmax(0, 1fr) auto;
858
997
  --ly-app-shell-wide-columns:
859
998
  minmax(min(100%, var(--ly-recipe-rail)), 0.28fr)
860
999
  minmax(0, 1fr);
@@ -877,6 +1016,7 @@
877
1016
  "main sidebar"
878
1017
  "aside sidebar"
879
1018
  "footer sidebar";
1019
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
880
1020
  --ly-app-shell-wide-columns:
881
1021
  minmax(0, 1fr)
882
1022
  minmax(min(100%, var(--ly-recipe-rail)), 0.3fr);
@@ -1042,6 +1182,7 @@
1042
1182
  "main sidebar"
1043
1183
  "aside sidebar"
1044
1184
  "footer footer";
1185
+ --ly-app-shell-wide-rows: auto minmax(0, 1fr) auto auto;
1045
1186
  --ly-app-shell-wide-columns:
1046
1187
  minmax(0, 1fr)
1047
1188
  minmax(0, 1fr);
@@ -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,ly.context;@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-workspace:96rem;--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(2rem,4vh,4rem);--ly-section-padding-block-compact:clamp(1rem,2.5vh,2rem);--ly-header-height:4.5rem;--ly-sticky-position:sticky;--ly-cover-min:100vh;--ly-shell-min:100vh;--ly-scroll-max:50rem;--ly-scroll-viewport-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-viewport-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.25rem,4vh,2rem);--ly-section-padding-block-compact:clamp(0.75rem,2vh,1.25rem);--ly-header-height:3.5rem;--ly-scroll-viewport-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.25rem,4dvh,2rem);--ly-section-padding-block-compact:clamp(0.75rem,2dvh,1.25rem);--ly-scroll-viewport-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-4);--ly-section-padding-block-compact:var(--ly-space-2);--ly-scroll-viewport-max:max(12rem,calc(100vh - 8rem))}@supports (height:100dvh){:where(.ly-root){--ly-scroll-viewport-max:max(12rem,calc(100dvh - 8rem))}}}}@layer ly.context{:where( .ly-root[data-ly-density="compact"],.ly-root [data-ly-density="compact"] ){--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-2);--ly-section-padding-block:clamp(1rem,2.5vh,2rem);--ly-section-padding-block-compact:clamp(0.5rem,1.5vh,1rem)}:where( .ly-root[data-ly-density="normal"],.ly-root [data-ly-density="normal"] ){--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(2rem,4vh,4rem);--ly-section-padding-block-compact:clamp(1rem,2.5vh,2rem)}:where( .ly-root[data-ly-density="spacious"],.ly-root [data-ly-density="spacious"] ){--ly-gap:max(var(--ly-profile-gap),var(--ly-space-6));--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-4);--ly-section-padding-block:clamp(3rem,7vh,6rem);--ly-section-padding-block-compact:clamp(1.5rem,3.5vh,3rem)}@media (max-height:44rem){:where( .ly-root[data-ly-density="compact"],.ly-root [data-ly-density="compact"] ){--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-2);--ly-section-padding-block:clamp(0.75rem,2vh,1.25rem);--ly-section-padding-block-compact:var(--ly-space-2)}:where( .ly-root[data-ly-density="normal"],.ly-root [data-ly-density="normal"] ){--ly-gap:min(var(--ly-profile-gap),var(--ly-space-4));--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(1.25rem,4vh,2rem);--ly-section-padding-block-compact:clamp(0.75rem,2vh,1.25rem)}:where( .ly-root[data-ly-density="spacious"],.ly-root [data-ly-density="spacious"] ){--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-section-padding-block:clamp(1.5rem,6vh,3rem);--ly-section-padding-block-compact:clamp(0.75rem,3vh,1.25rem)}@supports (height:100dvh){:where( .ly-root[data-ly-density="compact"],.ly-root [data-ly-density="compact"] ){--ly-section-padding-block:clamp(0.75rem,2dvh,1.25rem)}:where( .ly-root[data-ly-density="normal"],.ly-root [data-ly-density="normal"] ){--ly-section-padding-block:clamp(1.25rem,4dvh,2rem);--ly-section-padding-block-compact:clamp(0.75rem,2dvh,1.25rem)}:where( .ly-root[data-ly-density="spacious"],.ly-root [data-ly-density="spacious"] ){--ly-section-padding-block:clamp(1.5rem,6dvh,3rem);--ly-section-padding-block-compact:clamp(0.75rem,3dvh,1.25rem)}}}@media (max-height:30rem){:where( .ly-root[data-ly-density="compact"],.ly-root [data-ly-density="compact"] ){--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-1);--ly-section-padding-block:var(--ly-space-3);--ly-section-padding-block-compact:var(--ly-space-2)}:where( .ly-root[data-ly-density="normal"],.ly-root [data-ly-density="normal"] ){--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-2);--ly-section-padding-block:var(--ly-space-4);--ly-section-padding-block-compact:var(--ly-space-2)}:where( .ly-root[data-ly-density="spacious"],.ly-root [data-ly-density="spacious"] ){--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-3);--ly-section-padding-block:var(--ly-space-5);--ly-section-padding-block-compact:var(--ly-space-3)}}}@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--workspace{--ly-wrapper-max:var(--ly-wrapper-workspace)}.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;overflow-x:clip;overflow-y:auto;overscroll-behavior-block:contain}.ly-scroll--bounded{max-block-size:var(--ly-scroll-max)}.ly-scroll--viewport{max-block-size:var(--ly-scroll-viewport-max)}}@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{gap:var(--ly-space-0)}.ly-gap-1{gap:var(--ly-space-1)}.ly-gap-2{gap:var(--ly-space-2)}.ly-gap-3{gap:var(--ly-space-3)}.ly-gap-4{gap:var(--ly-space-4)}.ly-gap-5{gap:var(--ly-space-5)}.ly-gap-6{gap:var(--ly-space-6)}.ly-gap-7{gap:var(--ly-space-7)}.ly-gap-8{gap:var(--ly-space-8)}.ly-gap-9{gap:var(--ly-space-9)}.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}}
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.bauhaus {
4
4
  :where(.ly-root[data-ly-layout="bauhaus"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.bento {
4
4
  :where(.ly-root[data-ly-layout="bento"]) {
@@ -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)
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.brutalism {
4
4
  :where(.ly-root[data-ly-layout="brutalism"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.cyberpunk {
4
4
  :where(.ly-root[data-ly-layout="cyberpunk"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.f-pattern {
4
4
  :where(.ly-root[data-ly-layout="f-pattern"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.maximalist {
4
4
  :where(.ly-root[data-ly-layout="maximalist"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.minimal-saas {
4
4
  :where(.ly-root[data-ly-layout="minimal-saas"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.mondrian {
4
4
  :where(.ly-root[data-ly-layout="mondrian"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.neumorphism {
4
4
  :where(.ly-root[data-ly-layout="neumorphism"]) {
@@ -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);
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.retro-glass {
4
4
  :where(.ly-root[data-ly-layout="retro-glass"]) {
@@ -1,4 +1,4 @@
1
- @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities;
1
+ @layer ly.reset, ly.tokens, ly.wrappers, ly.primitives, ly.recipes, ly.utilities, ly.personalities, ly.context;
2
2
 
3
3
  @layer ly.personalities.retrofuturism {
4
4
  :where(.ly-root[data-ly-layout="retrofuturism"]) {