layout-style-css 2.0.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +79 -50
- package/CONTRIBUTING.md +43 -43
- package/LICENSE +21 -21
- package/README.md +19 -14
- package/SECURITY.md +39 -39
- package/demo/assets/apple-touch-icon.svg +7 -7
- package/demo/assets/favicon.svg +7 -7
- package/demo/browserconfig.xml +9 -9
- package/demo/demo.js +128 -43
- package/demo/index.html +20 -18
- package/demo/robots.txt +4 -4
- package/demo/site.webmanifest +23 -23
- package/demo/sitemap.xml +9 -9
- package/dist/integrations/ui-style-kit.css +162 -162
- package/dist/layout-style-css.css +147 -104
- package/dist/layout-style-css.min.css +1 -1
- package/dist/legacy.css +137 -102
- package/dist/personalities/bauhaus.css +10 -7
- package/dist/personalities/bento.css +15 -12
- package/dist/personalities/brutalism.css +8 -5
- package/dist/personalities/cyberpunk.css +8 -5
- package/dist/personalities/f-pattern.css +14 -11
- package/dist/personalities/maximalist.css +17 -14
- package/dist/personalities/minimal-saas.css +8 -6
- package/dist/personalities/mondrian.css +10 -7
- package/dist/personalities/neumorphism.css +2 -2
- package/dist/personalities/retro-glass.css +10 -7
- package/dist/personalities/retrofuturism.css +8 -5
- package/dist/personalities/split-screen.css +1 -1
- package/dist/personalities/synthwave.css +2 -2
- package/dist/personalities/tactile.css +1 -1
- package/dist/personalities/y2k.css +8 -5
- package/dist/personalities/z-pattern.css +15 -12
- package/dist/recipes.css +10 -2
- package/docs/wiki/Demo-And-GitHub-Pages.md +1 -1
- package/docs/wiki/Getting-Started.md +1 -1
- package/docs/wiki/Home.md +4 -4
- package/docs/wiki/Installation-And-CDN.md +8 -9
- package/docs/wiki/Layout-Recipes.md +1 -1
- package/docs/wiki/Layout-Styles.md +1 -1
- package/docs/wiki/Migrating-To-2.0.md +7 -7
- package/docs/wiki/Release-And-Publishing.md +10 -8
- package/docs/wiki/UI-Style-Kit-Compatibility.md +8 -9
- package/package.json +78 -78
- package/styles/integrations/ui-style-kit.css +162 -162
- package/styles/personalities/bauhaus.css +10 -7
- package/styles/personalities/bento.css +15 -12
- package/styles/personalities/brutalism.css +8 -5
- package/styles/personalities/cyberpunk.css +8 -5
- package/styles/personalities/f-pattern.css +14 -11
- package/styles/personalities/maximalist.css +17 -14
- package/styles/personalities/minimal-saas.css +8 -6
- package/styles/personalities/mondrian.css +10 -7
- package/styles/personalities/neumorphism.css +2 -2
- package/styles/personalities/retro-glass.css +10 -7
- package/styles/personalities/retrofuturism.css +8 -5
- package/styles/personalities/split-screen.css +1 -1
- package/styles/personalities/synthwave.css +2 -2
- package/styles/personalities/tactile.css +1 -1
- package/styles/personalities/y2k.css +8 -5
- package/styles/personalities/z-pattern.css +15 -12
- package/styles/recipes.css +10 -2
|
@@ -635,8 +635,7 @@
|
|
|
635
635
|
minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
|
|
636
636
|
}
|
|
637
637
|
|
|
638
|
-
:where(.ly-dashboard, [data-ly-recipe="dashboard"])
|
|
639
|
-
:where(.ly-docs, [data-ly-recipe="docs"]) {
|
|
638
|
+
:where(.ly-dashboard, [data-ly-recipe="dashboard"]) {
|
|
640
639
|
grid-template-areas:
|
|
641
640
|
"nav header header"
|
|
642
641
|
"nav main aside"
|
|
@@ -647,6 +646,15 @@
|
|
|
647
646
|
minmax(min(100%, var(--ly-recipe-aside)), 0.35fr);
|
|
648
647
|
}
|
|
649
648
|
|
|
649
|
+
:where(.ly-docs, [data-ly-recipe="docs"]) {
|
|
650
|
+
grid-template-areas:
|
|
651
|
+
"nav header"
|
|
652
|
+
"nav main"
|
|
653
|
+
"nav aside"
|
|
654
|
+
"nav footer";
|
|
655
|
+
grid-template-columns: minmax(min(100%, var(--ly-recipe-rail)), auto) minmax(0, 1fr);
|
|
656
|
+
}
|
|
657
|
+
|
|
650
658
|
:where(.ly-list-detail, [data-ly-recipe="list-detail"]) {
|
|
651
659
|
grid-template-columns: minmax(min(100%, var(--ly-pane-size)), 0.45fr) minmax(0, 1fr);
|
|
652
660
|
}
|
|
@@ -843,8 +851,14 @@
|
|
|
843
851
|
min-inline-size: 0;
|
|
844
852
|
}
|
|
845
853
|
|
|
846
|
-
|
|
847
|
-
|
|
854
|
+
@container (min-width: 48rem) {
|
|
855
|
+
:where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) {
|
|
856
|
+
grid-column: span 2;
|
|
857
|
+
}
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
861
|
+
@container (min-width: 64rem) {
|
|
848
862
|
:where(.ly-root[data-ly-layout="minimal-saas"])
|
|
849
863
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
850
864
|
grid-template-areas:
|
|
@@ -857,10 +871,6 @@
|
|
|
857
871
|
minmax(0, 1fr)
|
|
858
872
|
minmax(min(100%, 16rem), 0.28fr);
|
|
859
873
|
}
|
|
860
|
-
|
|
861
|
-
:where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid > :nth-child(4n + 1) {
|
|
862
|
-
grid-column: span 2;
|
|
863
|
-
}
|
|
864
874
|
}
|
|
865
875
|
}
|
|
866
876
|
|
|
@@ -879,7 +889,21 @@
|
|
|
879
889
|
min-inline-size: 0;
|
|
880
890
|
}
|
|
881
891
|
|
|
882
|
-
@container
|
|
892
|
+
@container (min-width: 48rem) {
|
|
893
|
+
:where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) {
|
|
894
|
+
grid-column: span 2;
|
|
895
|
+
grid-row: span 2;
|
|
896
|
+
}
|
|
897
|
+
|
|
898
|
+
:where(.ly-root[data-ly-layout="bento"])
|
|
899
|
+
:where(.ly-card-grid, [data-ly-recipe="card-grid"])
|
|
900
|
+
> :nth-child(6n + 1) {
|
|
901
|
+
grid-column: span 2;
|
|
902
|
+
}
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
906
|
+
@container (min-width: 64rem) {
|
|
883
907
|
:where(.ly-root[data-ly-layout="bento"])
|
|
884
908
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
885
909
|
grid-template-areas:
|
|
@@ -893,17 +917,6 @@
|
|
|
893
917
|
minmax(0, 1fr)
|
|
894
918
|
minmax(0, 1fr);
|
|
895
919
|
}
|
|
896
|
-
|
|
897
|
-
:where(.ly-root[data-ly-layout="bento"]) .ly-grid > :nth-child(6n + 1) {
|
|
898
|
-
grid-column: span 2;
|
|
899
|
-
grid-row: span 2;
|
|
900
|
-
}
|
|
901
|
-
|
|
902
|
-
:where(.ly-root[data-ly-layout="bento"])
|
|
903
|
-
:where(.ly-card-grid, [data-ly-recipe="card-grid"])
|
|
904
|
-
> :nth-child(6n + 1) {
|
|
905
|
-
grid-column: span 2;
|
|
906
|
-
}
|
|
907
920
|
}
|
|
908
921
|
}
|
|
909
922
|
|
|
@@ -922,14 +935,29 @@
|
|
|
922
935
|
min-inline-size: 0;
|
|
923
936
|
}
|
|
924
937
|
|
|
925
|
-
@container
|
|
938
|
+
@container (min-width: 48rem) {
|
|
926
939
|
:where(.ly-root[data-ly-layout="maximalist"])
|
|
927
940
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
928
941
|
grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
|
|
929
942
|
}
|
|
930
943
|
}
|
|
931
944
|
|
|
932
|
-
@container
|
|
945
|
+
@container (min-width: 56rem) {
|
|
946
|
+
:where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) {
|
|
947
|
+
grid-column: span 3;
|
|
948
|
+
grid-row: span 2;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
:where(.ly-root[data-ly-layout="maximalist"])
|
|
952
|
+
:where(.ly-gallery, [data-ly-recipe="gallery"])
|
|
953
|
+
> :nth-child(5n + 1) {
|
|
954
|
+
grid-column: span 2;
|
|
955
|
+
grid-row: span 2;
|
|
956
|
+
}
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
/* The four-track shell waits for a locally feasible allocation. */
|
|
960
|
+
@container (min-width: 64rem) {
|
|
933
961
|
:where(.ly-root[data-ly-layout="maximalist"])
|
|
934
962
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
935
963
|
grid-template-areas:
|
|
@@ -943,18 +971,6 @@
|
|
|
943
971
|
minmax(min(100%, 15rem), 0.32fr)
|
|
944
972
|
minmax(min(100%, 18rem), 0.38fr);
|
|
945
973
|
}
|
|
946
|
-
|
|
947
|
-
:where(.ly-root[data-ly-layout="maximalist"]) .ly-grid > :nth-child(7n + 1) {
|
|
948
|
-
grid-column: span 3;
|
|
949
|
-
grid-row: span 2;
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
:where(.ly-root[data-ly-layout="maximalist"])
|
|
953
|
-
:where(.ly-gallery, [data-ly-recipe="gallery"])
|
|
954
|
-
> :nth-child(5n + 1) {
|
|
955
|
-
grid-column: span 2;
|
|
956
|
-
grid-row: span 2;
|
|
957
|
-
}
|
|
958
974
|
}
|
|
959
975
|
}
|
|
960
976
|
|
|
@@ -975,14 +991,22 @@
|
|
|
975
991
|
}
|
|
976
992
|
|
|
977
993
|
/* Cap the fallback rail until the wider personality template is eligible. */
|
|
978
|
-
@container
|
|
994
|
+
@container (min-width: 48rem) {
|
|
979
995
|
:where(.ly-root[data-ly-layout="bauhaus"])
|
|
980
996
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
981
997
|
grid-template-columns: minmax(min(100%, 14rem), 0.3fr) minmax(0, 1fr);
|
|
982
998
|
}
|
|
983
999
|
}
|
|
984
1000
|
|
|
985
|
-
@container
|
|
1001
|
+
@container (min-width: 52rem) {
|
|
1002
|
+
:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) {
|
|
1003
|
+
grid-column: span 2;
|
|
1004
|
+
grid-row: span 2;
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
/* The four-track shell waits for a locally feasible allocation. */
|
|
1009
|
+
@container (min-width: 64rem) {
|
|
986
1010
|
:where(.ly-root[data-ly-layout="bauhaus"])
|
|
987
1011
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
988
1012
|
grid-template-areas:
|
|
@@ -996,11 +1020,6 @@
|
|
|
996
1020
|
minmax(0, 1.3fr)
|
|
997
1021
|
minmax(min(100%, 18rem), 0.3fr);
|
|
998
1022
|
}
|
|
999
|
-
|
|
1000
|
-
:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid > :nth-child(3n + 1) {
|
|
1001
|
-
grid-column: span 2;
|
|
1002
|
-
grid-row: span 2;
|
|
1003
|
-
}
|
|
1004
1023
|
}
|
|
1005
1024
|
}
|
|
1006
1025
|
|
|
@@ -1020,7 +1039,7 @@
|
|
|
1020
1039
|
min-inline-size: 0;
|
|
1021
1040
|
}
|
|
1022
1041
|
|
|
1023
|
-
@container
|
|
1042
|
+
@container (min-width: 48rem) {
|
|
1024
1043
|
:where(.ly-root[data-ly-layout="tactile"])
|
|
1025
1044
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1026
1045
|
grid-template-areas:
|
|
@@ -1059,14 +1078,14 @@
|
|
|
1059
1078
|
min-inline-size: 0;
|
|
1060
1079
|
}
|
|
1061
1080
|
|
|
1062
|
-
@container
|
|
1081
|
+
@container (min-width: 48rem) {
|
|
1063
1082
|
:where(.ly-root[data-ly-layout="neumorphism"])
|
|
1064
1083
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1065
1084
|
grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
|
|
1066
1085
|
}
|
|
1067
1086
|
}
|
|
1068
1087
|
|
|
1069
|
-
@container
|
|
1088
|
+
@container (min-width: 52rem) {
|
|
1070
1089
|
:where(.ly-root[data-ly-layout="neumorphism"])
|
|
1071
1090
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1072
1091
|
grid-template-areas:
|
|
@@ -1105,7 +1124,14 @@
|
|
|
1105
1124
|
min-inline-size: 0;
|
|
1106
1125
|
}
|
|
1107
1126
|
|
|
1108
|
-
@container
|
|
1127
|
+
@container (min-width: 48rem) {
|
|
1128
|
+
:where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) {
|
|
1129
|
+
grid-column: span 2;
|
|
1130
|
+
}
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1134
|
+
@container (min-width: 64rem) {
|
|
1109
1135
|
:where(.ly-root[data-ly-layout="retrofuturism"])
|
|
1110
1136
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1111
1137
|
grid-template-areas:
|
|
@@ -1118,10 +1144,6 @@
|
|
|
1118
1144
|
minmax(0, 1fr)
|
|
1119
1145
|
minmax(min(100%, 17rem), 0.3fr);
|
|
1120
1146
|
}
|
|
1121
|
-
|
|
1122
|
-
:where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid > :nth-child(6n + 1) {
|
|
1123
|
-
grid-column: span 2;
|
|
1124
|
-
}
|
|
1125
1147
|
}
|
|
1126
1148
|
}
|
|
1127
1149
|
|
|
@@ -1141,7 +1163,14 @@
|
|
|
1141
1163
|
min-inline-size: 0;
|
|
1142
1164
|
}
|
|
1143
1165
|
|
|
1144
|
-
@container
|
|
1166
|
+
@container (min-width: 48rem) {
|
|
1167
|
+
:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) {
|
|
1168
|
+
grid-column: span 2;
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1173
|
+
@container (min-width: 64rem) {
|
|
1145
1174
|
:where(.ly-root[data-ly-layout="brutalism"])
|
|
1146
1175
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1147
1176
|
grid-template-areas:
|
|
@@ -1154,10 +1183,6 @@
|
|
|
1154
1183
|
minmax(min(100%, 16rem), 0.7fr)
|
|
1155
1184
|
minmax(min(100%, 18rem), 0.34fr);
|
|
1156
1185
|
}
|
|
1157
|
-
|
|
1158
|
-
:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid > :nth-child(3n) {
|
|
1159
|
-
grid-column: span 2;
|
|
1160
|
-
}
|
|
1161
1186
|
}
|
|
1162
1187
|
}
|
|
1163
1188
|
|
|
@@ -1177,7 +1202,14 @@
|
|
|
1177
1202
|
min-inline-size: 0;
|
|
1178
1203
|
}
|
|
1179
1204
|
|
|
1180
|
-
@container
|
|
1205
|
+
@container (min-width: 44rem) {
|
|
1206
|
+
:where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) {
|
|
1207
|
+
grid-column: span 3;
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1212
|
+
@container (min-width: 64rem) {
|
|
1181
1213
|
:where(.ly-root[data-ly-layout="cyberpunk"])
|
|
1182
1214
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1183
1215
|
grid-template-areas:
|
|
@@ -1190,10 +1222,6 @@
|
|
|
1190
1222
|
minmax(0, 1fr)
|
|
1191
1223
|
minmax(min(100%, 19rem), 0.32fr);
|
|
1192
1224
|
}
|
|
1193
|
-
|
|
1194
|
-
:where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid > :nth-child(4n + 2) {
|
|
1195
|
-
grid-column: span 3;
|
|
1196
|
-
}
|
|
1197
1225
|
}
|
|
1198
1226
|
}
|
|
1199
1227
|
|
|
@@ -1213,7 +1241,14 @@
|
|
|
1213
1241
|
min-inline-size: 0;
|
|
1214
1242
|
}
|
|
1215
1243
|
|
|
1216
|
-
@container
|
|
1244
|
+
@container (min-width: 48rem) {
|
|
1245
|
+
:where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
|
|
1246
|
+
grid-column: span 3;
|
|
1247
|
+
}
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1250
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1251
|
+
@container (min-width: 64rem) {
|
|
1217
1252
|
:where(.ly-root[data-ly-layout="y2k"])
|
|
1218
1253
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1219
1254
|
grid-template-areas:
|
|
@@ -1226,10 +1261,6 @@
|
|
|
1226
1261
|
minmax(0, 1fr)
|
|
1227
1262
|
minmax(min(100%, 16rem), 0.28fr);
|
|
1228
1263
|
}
|
|
1229
|
-
|
|
1230
|
-
:where(.ly-root[data-ly-layout="y2k"]) .ly-grid > :nth-child(5n + 1) {
|
|
1231
|
-
grid-column: span 3;
|
|
1232
|
-
}
|
|
1233
1264
|
}
|
|
1234
1265
|
}
|
|
1235
1266
|
|
|
@@ -1249,14 +1280,22 @@
|
|
|
1249
1280
|
min-inline-size: 0;
|
|
1250
1281
|
}
|
|
1251
1282
|
|
|
1252
|
-
@container
|
|
1283
|
+
@container (min-width: 48rem) {
|
|
1253
1284
|
:where(.ly-root[data-ly-layout="retro-glass"])
|
|
1254
1285
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1255
1286
|
grid-template-columns: minmax(min(100%, 18rem), 0.3fr) minmax(0, 1fr);
|
|
1256
1287
|
}
|
|
1257
1288
|
}
|
|
1258
1289
|
|
|
1259
|
-
@container
|
|
1290
|
+
@container (min-width: 56rem) {
|
|
1291
|
+
:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) {
|
|
1292
|
+
grid-column: span 2;
|
|
1293
|
+
grid-row: span 2;
|
|
1294
|
+
}
|
|
1295
|
+
}
|
|
1296
|
+
|
|
1297
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1298
|
+
@container (min-width: 64rem) {
|
|
1260
1299
|
:where(.ly-root[data-ly-layout="retro-glass"])
|
|
1261
1300
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1262
1301
|
grid-template-areas:
|
|
@@ -1269,11 +1308,6 @@
|
|
|
1269
1308
|
minmax(0, 0.75fr)
|
|
1270
1309
|
minmax(min(100%, 18rem), 0.32fr);
|
|
1271
1310
|
}
|
|
1272
|
-
|
|
1273
|
-
:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid > :nth-child(4n) {
|
|
1274
|
-
grid-column: span 2;
|
|
1275
|
-
grid-row: span 2;
|
|
1276
|
-
}
|
|
1277
1311
|
}
|
|
1278
1312
|
}
|
|
1279
1313
|
|
|
@@ -1293,14 +1327,26 @@
|
|
|
1293
1327
|
min-inline-size: 0;
|
|
1294
1328
|
}
|
|
1295
1329
|
|
|
1296
|
-
@container
|
|
1330
|
+
@container (min-width: 48rem) {
|
|
1297
1331
|
:where(.ly-root[data-ly-layout="f-pattern"])
|
|
1298
1332
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1299
1333
|
grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
|
|
1300
1334
|
}
|
|
1301
1335
|
}
|
|
1302
1336
|
|
|
1303
|
-
@container
|
|
1337
|
+
@container (min-width: 56rem) {
|
|
1338
|
+
:where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) {
|
|
1339
|
+
grid-column: span 2;
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
:where(.ly-root[data-ly-layout="f-pattern"])
|
|
1343
|
+
:where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
|
|
1344
|
+
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1349
|
+
@container (min-width: 64rem) {
|
|
1304
1350
|
:where(.ly-root[data-ly-layout="f-pattern"])
|
|
1305
1351
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1306
1352
|
grid-template-areas:
|
|
@@ -1313,15 +1359,6 @@
|
|
|
1313
1359
|
minmax(0, 1.35fr)
|
|
1314
1360
|
minmax(min(100%, 18rem), 0.65fr);
|
|
1315
1361
|
}
|
|
1316
|
-
|
|
1317
|
-
:where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid > :nth-child(3n + 1) {
|
|
1318
|
-
grid-column: span 2;
|
|
1319
|
-
}
|
|
1320
|
-
|
|
1321
|
-
:where(.ly-root[data-ly-layout="f-pattern"])
|
|
1322
|
-
:where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
|
|
1323
|
-
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
|
|
1324
|
-
}
|
|
1325
1362
|
}
|
|
1326
1363
|
}
|
|
1327
1364
|
|
|
@@ -1341,14 +1378,27 @@
|
|
|
1341
1378
|
min-inline-size: 0;
|
|
1342
1379
|
}
|
|
1343
1380
|
|
|
1344
|
-
@container
|
|
1381
|
+
@container (min-width: 48rem) {
|
|
1345
1382
|
:where(.ly-root[data-ly-layout="z-pattern"])
|
|
1346
1383
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1347
1384
|
grid-template-columns: minmax(min(100%, 17rem), 0.3fr) minmax(0, 1fr);
|
|
1348
1385
|
}
|
|
1349
1386
|
}
|
|
1350
1387
|
|
|
1351
|
-
@container
|
|
1388
|
+
@container (min-width: 60rem) {
|
|
1389
|
+
:where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
|
|
1390
|
+
grid-column: span 2;
|
|
1391
|
+
align-self: end;
|
|
1392
|
+
}
|
|
1393
|
+
|
|
1394
|
+
:where(.ly-root[data-ly-layout="z-pattern"])
|
|
1395
|
+
:where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
|
|
1396
|
+
grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
|
|
1397
|
+
}
|
|
1398
|
+
}
|
|
1399
|
+
|
|
1400
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1401
|
+
@container (min-width: 64rem) {
|
|
1352
1402
|
:where(.ly-root[data-ly-layout="z-pattern"])
|
|
1353
1403
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1354
1404
|
grid-template-areas:
|
|
@@ -1361,16 +1411,6 @@
|
|
|
1361
1411
|
minmax(min(100%, 19rem), 0.55fr)
|
|
1362
1412
|
minmax(min(100%, 17rem), 0.3fr);
|
|
1363
1413
|
}
|
|
1364
|
-
|
|
1365
|
-
:where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid > :nth-child(4n + 2) {
|
|
1366
|
-
grid-column: span 2;
|
|
1367
|
-
align-self: end;
|
|
1368
|
-
}
|
|
1369
|
-
|
|
1370
|
-
:where(.ly-root[data-ly-layout="z-pattern"])
|
|
1371
|
-
:where(.ly-split-hero, [data-ly-recipe="split-hero"]) {
|
|
1372
|
-
grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
|
|
1373
|
-
}
|
|
1374
1414
|
}
|
|
1375
1415
|
}
|
|
1376
1416
|
|
|
@@ -1390,7 +1430,7 @@
|
|
|
1390
1430
|
min-inline-size: 0;
|
|
1391
1431
|
}
|
|
1392
1432
|
|
|
1393
|
-
@container
|
|
1433
|
+
@container (min-width: 48rem) {
|
|
1394
1434
|
:where(.ly-root[data-ly-layout="split-screen"])
|
|
1395
1435
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1396
1436
|
grid-template-areas:
|
|
@@ -1431,14 +1471,22 @@
|
|
|
1431
1471
|
min-inline-size: 0;
|
|
1432
1472
|
}
|
|
1433
1473
|
|
|
1434
|
-
@container
|
|
1474
|
+
@container (min-width: 48rem) {
|
|
1435
1475
|
:where(.ly-root[data-ly-layout="mondrian"])
|
|
1436
1476
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1437
1477
|
grid-template-columns: minmax(min(100%, 13rem), 0.3fr) minmax(0, 1fr);
|
|
1438
1478
|
}
|
|
1439
1479
|
}
|
|
1440
1480
|
|
|
1441
|
-
@container
|
|
1481
|
+
@container (min-width: 52rem) {
|
|
1482
|
+
:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) {
|
|
1483
|
+
grid-column: span 2;
|
|
1484
|
+
grid-row: span 2;
|
|
1485
|
+
}
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
/* The three-track shell waits for a locally feasible allocation. */
|
|
1489
|
+
@container (min-width: 64rem) {
|
|
1442
1490
|
:where(.ly-root[data-ly-layout="mondrian"])
|
|
1443
1491
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1444
1492
|
grid-template-areas:
|
|
@@ -1451,11 +1499,6 @@
|
|
|
1451
1499
|
minmax(0, 1.45fr)
|
|
1452
1500
|
minmax(min(100%, 18rem), 0.55fr);
|
|
1453
1501
|
}
|
|
1454
|
-
|
|
1455
|
-
:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid > :nth-child(5n + 1) {
|
|
1456
|
-
grid-column: span 2;
|
|
1457
|
-
grid-row: span 2;
|
|
1458
|
-
}
|
|
1459
1502
|
}
|
|
1460
1503
|
}
|
|
1461
1504
|
|
|
@@ -1476,14 +1519,14 @@
|
|
|
1476
1519
|
min-inline-size: 0;
|
|
1477
1520
|
}
|
|
1478
1521
|
|
|
1479
|
-
@container
|
|
1522
|
+
@container (min-width: 48rem) {
|
|
1480
1523
|
:where(.ly-root[data-ly-layout="synthwave"])
|
|
1481
1524
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1482
1525
|
grid-template-columns: minmax(min(100%, 16rem), 0.3fr) minmax(0, 1fr);
|
|
1483
1526
|
}
|
|
1484
1527
|
}
|
|
1485
1528
|
|
|
1486
|
-
@container
|
|
1529
|
+
@container (min-width: 64rem) {
|
|
1487
1530
|
:where(.ly-root[data-ly-layout="synthwave"])
|
|
1488
1531
|
:where(.ly-app-shell, [data-ly-recipe="app-shell"]) {
|
|
1489
1532
|
grid-template-areas:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities,ly.integrations,ly.legacy;@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-wrapper-compact:40rem;--ly-wrapper-prose:68ch;--ly-wrapper-content:72rem;--ly-wrapper-wide:112rem;--ly-wrapper-max:var(--ly-wrapper-content);--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-wrapper-gutter:max(var(--ly-page-padding-inline),var(--ly-safe-area-inline));--ly-section-padding-block:clamp(3rem,7vw,6rem);--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-cover-min:100svh;--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-pane-size:22rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-scroll-max:70svh;--ly-frame-ratio:16 / 9;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-card-grid-min:16rem;--ly-gallery-min:12rem;--ly-card-size-sm:10rem;--ly-card-size-md:14rem;--ly-card-size-lg:18rem;--ly-header-height:4.5rem;--ly-z-header:20;--ly-container-sm:var(--ly-wrapper-compact);--ly-container-md:56rem;--ly-container-lg:var(--ly-wrapper-content);--ly-container-xl:88rem;--ly-container-wide:var(--ly-wrapper-wide);--ly-container-max:var(--ly-container-lg);--ly-content-readable:var(--ly-wrapper-prose);--ly-carousel-item-min:var(--ly-reel-item-min);--ly-carousel-item-max:var(--ly-reel-item-max);--ly-sidebar-min:14rem;--ly-sidebar-width:var(--ly-recipe-rail);--ly-sidebar-max:var(--ly-recipe-aside);--ly-pane-fixed:var(--ly-pane-size);--ly-z-sidebar:10}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){min-inline-size:0;margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas){max-inline-size:100%}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));container-name:ly-wrapper;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));margin-inline:auto;padding-inline:var(--ly-wrapper-gutter)}.ly-wrapper--compact{--ly-wrapper-max:40rem}.ly-wrapper--prose{--ly-wrapper-max:68ch}.ly-wrapper--content{--ly-wrapper-max:72rem}.ly-wrapper--wide{--ly-wrapper-max:112rem}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [content-start] minmax(0,var(--ly-breakout-content-size)) [content-end] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [feature-end] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){grid-column:content}.ly-wrapper--breakout>:where(.ly-lane--feature,[data-ly-lane="feature"]){grid-column:feature}.ly-wrapper--breakout>:where(.ly-lane--full,[data-ly-lane="full"]){grid-column:full}}@layer ly.primitives{.ly-page{min-block-size:100svh}.ly-header,.ly-footer,.ly-main,.ly-section,.ly-surface{min-inline-size:0;min-block-size:0}.ly-header{min-block-size:var(--ly-header-height)}.ly-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ly-z-header)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-readable{max-inline-size:var(--ly-wrapper-prose)}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-center{inline-size:min(100%,var(--ly-center-max,var(--ly-wrapper-content)));margin-inline:auto}.ly-cover{display:flex;flex-direction:column;min-block-size:var(--ly-cover-min);padding-block:var(--ly-cover-padding,var(--ly-space-5))}.ly-cover>:where(.ly-cover__center,[data-ly-cover-center]){margin-block:auto}.ly-switcher{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-switcher>*{flex-basis:calc((var(--ly-switcher-threshold) - 100%) * 999);flex-grow:1;min-inline-size:0}.ly-sidebar{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-sidebar>:where(.ly-sidebar__side,[data-ly-sidebar="side"]){flex-basis:var(--ly-sidebar-size);flex-grow:1}.ly-sidebar>:where(.ly-sidebar__content,[data-ly-sidebar="content"]){flex-basis:0;flex-grow:999;min-inline-size:min(100%,var(--ly-sidebar-content-min))}.ly-grid{display:grid;grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr));gap:var(--ly-grid-gap)}.ly-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0}.ly-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}.ly-media{display:grid;grid-template-areas:"media" "content" "actions";grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__asset,[data-ly-media="asset"]){grid-area:media}.ly-media>:where(.ly-media__content,[data-ly-media="content"]){grid-area:content}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){grid-area:actions}.ly-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-reel-item-min)),var(--ly-reel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overflow-inline:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity}.ly-reel>*{min-inline-size:0;scroll-snap-align:start}.ly-frame{aspect-ratio:var(--ly-frame-ratio);overflow:hidden}.ly-frame>*{inline-size:100%;block-size:100%;object-fit:cover}.ly-scroll{min-block-size:0;max-block-size:var(--ly-scroll-max);overflow:auto;overscroll-behavior:contain}}@layer ly.primitives{@container (min-width:48rem){.ly-split{grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}.ly-panes--2{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}.ly-media{grid-template-areas:"media content" "media actions";grid-template-columns:minmax(min(100%,var(--ly-media-size)),auto) minmax(0,1fr)}}@container (min-width:64rem){.ly-panes--3{grid-template-columns:minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr) minmax(0,1fr) minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr)}}}@layer ly.recipes{:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]),:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){container-name:ly-recipe;container-type:inline-size;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}:where(.ly-app-shell,[data-ly-recipe="app-shell"]){min-block-size:100svh;grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:auto auto minmax(0,1fr) auto auto}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary" "secondary" "actions"}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){display:grid;gap:var(--ly-grid-gap)}:where(.ly-gallery,[data-ly-recipe="gallery"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"])>*,:where(.ly-card-grid,[data-ly-recipe="card-grid"])>*{min-inline-size:0}:where(.ly-area--header,[data-ly-area="header"]){grid-area:header;min-inline-size:0}:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:nav;min-inline-size:0}:where(.ly-area--main,[data-ly-area="main"]){grid-area:main;min-inline-size:0}:where(.ly-area--aside,[data-ly-area="aside"]){grid-area:aside;min-inline-size:0}:where(.ly-area--footer,[data-ly-area="footer"]){grid-area:footer;min-inline-size:0}:where(.ly-area--content,[data-ly-area="content"]){grid-area:content;min-inline-size:0}:where(.ly-area--media,[data-ly-area="media"]){grid-area:media;min-inline-size:0}:where(.ly-area--actions,[data-ly-area="actions"]){grid-area:actions;min-inline-size:0}:where(.ly-area--primary,[data-ly-area="primary"]){grid-area:primary;min-inline-size:0}:where(.ly-area--secondary,[data-ly-area="secondary"]){grid-area:secondary;min-inline-size:0}.ly-app-header{grid-area:header;min-inline-size:0}.ly-app-sidebar{grid-area:sidebar;min-inline-size:0}.ly-app-main{grid-area:main;min-inline-size:0}.ly-app-aside{grid-area:aside;min-inline-size:0}.ly-app-footer{grid-area:footer;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"])>:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:sidebar}@container (min-width:48rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "sidebar main" "aside main" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header header" "nav nav" "main aside" "footer footer";grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header header" "nav main" "nav aside" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary secondary" "actions actions";grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content media" "actions media";grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:14rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:18rem}}@container (min-width:64rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"nav header header" "nav main aside" "nav footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.45fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:16rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:20rem}}}@layer ly.utilities{.ly-cols-1{--ly-grid-columns:1}.ly-cols-2{--ly-grid-columns:2}.ly-cols-3{--ly-grid-columns:3}.ly-cols-4{--ly-grid-columns:4}.ly-cols-5{--ly-grid-columns:5}.ly-cols-6{--ly-grid-columns:6}.ly-cols-7{--ly-grid-columns:7}.ly-cols-8{--ly-grid-columns:8}.ly-cols-9{--ly-grid-columns:9}.ly-cols-10{--ly-grid-columns:10}.ly-cols-11{--ly-grid-columns:11}.ly-cols-12{--ly-grid-columns:12}.ly-cols-16{--ly-grid-columns:16}.ly-span-1{grid-column:span 1}.ly-span-2{grid-column:span 2}.ly-span-3{grid-column:span 3}.ly-span-4{grid-column:span 4}.ly-span-5{grid-column:span 5}.ly-span-6{grid-column:span 6}.ly-span-7{grid-column:span 7}.ly-span-8{grid-column:span 8}.ly-span-9{grid-column:span 9}.ly-span-10{grid-column:span 10}.ly-span-11{grid-column:span 11}.ly-span-12{grid-column:span 12}.ly-span-13{grid-column:span 13}.ly-span-14{grid-column:span 14}.ly-span-15{grid-column:span 15}.ly-span-16{grid-column:span 16}.ly-span-full{grid-column:1 / -1}.ly-gap-0{--ly-gap:var(--ly-space-0);--ly-grid-gap:var(--ly-space-0);--ly-stack-gap:var(--ly-space-0);--ly-cluster-gap:var(--ly-space-0)}.ly-gap-1{--ly-gap:var(--ly-space-1);--ly-grid-gap:var(--ly-space-1);--ly-stack-gap:var(--ly-space-1);--ly-cluster-gap:var(--ly-space-1)}.ly-gap-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-3{--ly-gap:var(--ly-space-3);--ly-grid-gap:var(--ly-space-3);--ly-stack-gap:var(--ly-space-3);--ly-cluster-gap:var(--ly-space-3)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-5{--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-5)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-7{--ly-gap:var(--ly-space-7);--ly-grid-gap:var(--ly-space-7);--ly-stack-gap:var(--ly-space-7);--ly-cluster-gap:var(--ly-space-7)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-gap-9{--ly-gap:var(--ly-space-9);--ly-grid-gap:var(--ly-space-9);--ly-stack-gap:var(--ly-space-9);--ly-cluster-gap:var(--ly-space-9)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-1{padding:var(--ly-space-1)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-3{padding:var(--ly-space-3)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-5{padding:var(--ly-space-5)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-7{padding:var(--ly-space-7)}.ly-pad-8{padding:var(--ly-space-8)}.ly-pad-9{padding:var(--ly-space-9)}.ly-px-4{padding-inline:var(--ly-space-4)}.ly-px-6{padding-inline:var(--ly-space-6)}.ly-px-8{padding-inline:var(--ly-space-8)}.ly-py-4{padding-block:var(--ly-space-4)}.ly-py-6{padding-block:var(--ly-space-6)}.ly-py-8{padding-block:var(--ly-space-8)}.ly-mx-auto{margin-inline:auto}.ly-w-full{inline-size:100%}.ly-h-full{block-size:100%}.ly-min-h-screen{min-block-size:100svh}.ly-bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}.ly-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.ly-justify-between{justify-content:space-between}.ly-frame-1x1{--ly-frame-ratio:1 / 1}.ly-frame-2x1{--ly-frame-ratio:2 / 1}.ly-frame-3x2{--ly-frame-ratio:3 / 2}.ly-frame-4x3{--ly-frame-ratio:4 / 3}.ly-frame-16x9{--ly-frame-ratio:16 / 9}.ly-frame-21x9{--ly-frame-ratio:21 / 9}.ly-hidden{display:none !important}.ly-show-md-up,.ly-show-lg-up{display:none !important}.ly-visually-hidden{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}.ly-order-first{order:-1}.ly-order-normal{order:0}.ly-order-last{order:999}.ly-order-1{order:1}.ly-order-2{order:2}.ly-order-3{order:3}.ly-order-4{order:4}.ly-order-5{order:5}.ly-order-6{order:6}@container (min-width:48rem){.ly-md-cols-1{--ly-grid-columns:1}.ly-md-cols-2{--ly-grid-columns:2}.ly-md-cols-3{--ly-grid-columns:3}.ly-md-cols-4{--ly-grid-columns:4}.ly-md-cols-6{--ly-grid-columns:6}.ly-md-cols-8{--ly-grid-columns:8}.ly-md-cols-12{--ly-grid-columns:12}.ly-md-cols-16{--ly-grid-columns:16}.ly-show-md-up{display:revert !important}.ly-md-order-first{order:-1}.ly-md-order-normal{order:0}.ly-md-order-last{order:999}.ly-md-order-1{order:1}.ly-md-order-2{order:2}.ly-md-order-3{order:3}.ly-md-order-4{order:4}.ly-md-order-5{order:5}.ly-md-order-6{order:6}}@container (min-width:64rem){.ly-lg-cols-1{--ly-grid-columns:1}.ly-lg-cols-2{--ly-grid-columns:2}.ly-lg-cols-3{--ly-grid-columns:3}.ly-lg-cols-4{--ly-grid-columns:4}.ly-lg-cols-6{--ly-grid-columns:6}.ly-lg-cols-8{--ly-grid-columns:8}.ly-lg-cols-12{--ly-grid-columns:12}.ly-lg-cols-16{--ly-grid-columns:16}.ly-show-lg-up{display:revert !important}.ly-lg-order-first{order:-1}.ly-lg-order-normal{order:0}.ly-lg-order-last{order:999}.ly-lg-order-1{order:1}.ly-lg-order-2{order:2}.ly-lg-order-3{order:3}.ly-lg-order-4{order:4}.ly-lg-order-5{order:5}.ly-lg-order-6{order:6}}}@layer ly.personalities.minimal_saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-grid-columns:4;--ly-grid-min:16rem;--ly-personality-wrapper-max:88rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="minimal-saas"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,15rem),0.24fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}:where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-grid-columns:6;--ly-grid-min:12rem;--ly-card-grid-min:13rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="bento"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="bento"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2;grid-row:span 2}:where(.ly-root[data-ly-layout="bento"]):where(.ly-card-grid,[data-ly-recipe="card-grid"])>:nth-child(6n + 1){grid-column:span 2}}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-grid-columns:12;--ly-grid-min:10rem;--ly-personality-wrapper-max:100%;--ly-card-grid-min:12rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:56rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header header" "main main sidebar aside" "main main footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,15rem),0.32fr) minmax(min(100%,18rem),0.38fr)}:where(.ly-root[data-ly-layout="maximalist"]) .ly-grid>:nth-child(7n + 1){grid-column:span 3;grid-row:span 2}:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-gallery,[data-ly-recipe="gallery"])>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:13rem;--ly-personality-wrapper-max:96rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:52rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header aside" "sidebar main main aside" "sidebar footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,18rem),0.3fr)}:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-grid-columns:5;--ly-grid-min:15rem;--ly-personality-wrapper-max:82rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="tactile"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header" "sidebar main" "sidebar aside" "sidebar footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,17rem),0.28fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="tactile"]) .ly-grid>:nth-child(5n + 2){grid-column:span 2}:where(.ly-root[data-ly-layout="tactile"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,20rem),0.42fr) minmax(0,0.58fr)}}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:4;--ly-grid-min:17rem;--ly-personality-wrapper-max:84rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:52rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="neumorphism"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(0,0.58fr) minmax(min(100%,19rem),0.42fr)}}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:106rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="retrofuturism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2}}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:100rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="brutalism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.3fr) minmax(min(100%,16rem),0.7fr) minmax(min(100%,18rem),0.34fr)}:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid>:nth-child(3n){grid-column:span 2}}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:12rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:44rem){:where(.ly-root[data-ly-layout="cyberpunk"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.2fr) minmax(0,1fr) minmax(min(100%,19rem),0.32fr)}:where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid>:nth-child(4n + 2){grid-column:span 3}}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:5;--ly-grid-min:13rem;--ly-personality-wrapper-max:90rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="y2k"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,18rem),0.34fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}:where(.ly-root[data-ly-layout="y2k"]) .ly-grid>:nth-child(5n + 1){grid-column:span 3}}}@layer ly.personalities.retro_glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-recipe-rail:18rem;--ly-recipe-aside:20rem;--ly-grid-columns:8;--ly-grid-min:15rem;--ly-personality-wrapper-max:104rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:56rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main main sidebar" "aside footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,18rem),0.32fr)}:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid>:nth-child(4n){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.f_pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:92rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:56rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.26fr) minmax(0,1.35fr) minmax(min(100%,18rem),0.65fr)}:where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr)}}}@layer ly.personalities.z_pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:14rem;--ly-personality-wrapper-max:108rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:60rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.45fr) minmax(min(100%,19rem),0.55fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid>:nth-child(4n + 2){grid-column:span 2;align-self:end}:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}}@layer ly.personalities.split_screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-grid-columns:2;--ly-grid-min:20rem;--ly-personality-wrapper-max:100%;--ly-split-primary:1fr;--ly-split-secondary:1fr;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="split-screen"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "main sidebar" "aside sidebar" "footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="split-screen"]):where( .ly-split,.ly-split-hero,[data-ly-recipe="split-hero"],.ly-list-detail,[data-ly-recipe="list-detail"] ){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-grid-columns:10;--ly-grid-min:11rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,13rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:52rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "footer footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.22fr) minmax(0,1.45fr) minmax(min(100%,18rem),0.55fr)}:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-grid-columns:12;--ly-grid-min:14rem;--ly-reel-item-max:34rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container ly-personality (min-width:48rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container ly-personality (min-width:64rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main aside" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.28fr) minmax(0,1fr) minmax(min(100%,20rem),0.34fr)}:where(.ly-root[data-ly-layout="synthwave"]) .ly-grid>:nth-child(4n + 1){grid-column:span 3}:where(.ly-root[data-ly-layout="synthwave"]) .ly-reel{grid-auto-columns:minmax(min(100%,20rem),var(--ly-reel-item-max))}}}
|
|
1
|
+
@layer ly.reset,ly.tokens,ly.wrappers,ly.primitives,ly.recipes,ly.utilities,ly.personalities,ly.integrations,ly.legacy;@layer ly.tokens{:where(.ly-root){--ly-space-0:0;--ly-space-1:0.25rem;--ly-space-2:0.5rem;--ly-space-3:0.75rem;--ly-space-4:1rem;--ly-space-5:1.5rem;--ly-space-6:2rem;--ly-space-7:3rem;--ly-space-8:4rem;--ly-space-9:6rem;--ly-wrapper-compact:40rem;--ly-wrapper-prose:68ch;--ly-wrapper-content:72rem;--ly-wrapper-wide:112rem;--ly-wrapper-max:var(--ly-wrapper-content);--ly-page-padding-inline:clamp(1rem,4vw,3rem);--ly-safe-area-inline:max( env(safe-area-inset-left,0px),env(safe-area-inset-right,0px) );--ly-wrapper-gutter:max(var(--ly-page-padding-inline),var(--ly-safe-area-inline));--ly-section-padding-block:clamp(3rem,7vw,6rem);--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-gap);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-3);--ly-cover-min:100svh;--ly-switcher-threshold:42rem;--ly-sidebar-size:18rem;--ly-sidebar-content-min:50%;--ly-grid-columns:12;--ly-grid-min:16rem;--ly-pane-size:22rem;--ly-media-size:14rem;--ly-reel-item-min:16rem;--ly-reel-item-max:28rem;--ly-scroll-max:70svh;--ly-frame-ratio:16 / 9;--ly-recipe-rail:18rem;--ly-recipe-aside:22rem;--ly-card-grid-min:16rem;--ly-gallery-min:12rem;--ly-card-size-sm:10rem;--ly-card-size-md:14rem;--ly-card-size-lg:18rem;--ly-header-height:4.5rem;--ly-z-header:20;--ly-container-sm:var(--ly-wrapper-compact);--ly-container-md:56rem;--ly-container-lg:var(--ly-wrapper-content);--ly-container-xl:88rem;--ly-container-wide:var(--ly-wrapper-wide);--ly-container-max:var(--ly-container-lg);--ly-content-readable:var(--ly-wrapper-prose);--ly-carousel-item-min:var(--ly-reel-item-min);--ly-carousel-item-max:var(--ly-reel-item-max);--ly-sidebar-min:14rem;--ly-sidebar-width:var(--ly-recipe-rail);--ly-sidebar-max:var(--ly-recipe-aside);--ly-pane-fixed:var(--ly-pane-size);--ly-z-sidebar:10}}@layer ly.reset{:where(.ly-root),:where(.ly-root *){box-sizing:border-box}:where(.ly-root){min-inline-size:0;margin:0}:where(.ly-root img),:where(.ly-root svg),:where(.ly-root video),:where(.ly-root canvas){max-inline-size:100%}}@layer ly.wrappers{.ly-wrapper{--ly-wrapper-max:var(--ly-personality-wrapper-max,var(--ly-wrapper-content));container-name:ly-wrapper;container-type:inline-size;inline-size:min(100%,calc(var(--ly-wrapper-max) + (var(--ly-wrapper-gutter) * 2)));margin-inline:auto;padding-inline:var(--ly-wrapper-gutter)}.ly-wrapper--compact{--ly-wrapper-max:40rem}.ly-wrapper--prose{--ly-wrapper-max:68ch}.ly-wrapper--content{--ly-wrapper-max:72rem}.ly-wrapper--wide{--ly-wrapper-max:112rem}.ly-wrapper--full{--ly-wrapper-max:100%}.ly-wrapper--breakout{--ly-breakout-content-size:min( var(--ly-wrapper-content),calc(100% - (var(--ly-wrapper-gutter) * 2)) );--ly-breakout-feature-size:min( var(--ly-wrapper-wide),calc(100% - (var(--ly-wrapper-gutter) * 2)) );display:grid;grid-template-columns:[full-start] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [feature-start] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [content-start] minmax(0,var(--ly-breakout-content-size)) [content-end] minmax( 0,calc((var(--ly-breakout-feature-size) - var(--ly-breakout-content-size)) / 2) ) [feature-end] minmax(min(100%,var(--ly-wrapper-gutter)),1fr) [full-end];inline-size:100%;padding-inline:0}.ly-wrapper--breakout>*{grid-column:content;min-inline-size:0}.ly-wrapper--breakout>:where(.ly-lane--content,[data-ly-lane="content"]){grid-column:content}.ly-wrapper--breakout>:where(.ly-lane--feature,[data-ly-lane="feature"]){grid-column:feature}.ly-wrapper--breakout>:where(.ly-lane--full,[data-ly-lane="full"]){grid-column:full}}@layer ly.primitives{.ly-page{min-block-size:100svh}.ly-header,.ly-footer,.ly-main,.ly-section,.ly-surface{min-inline-size:0;min-block-size:0}.ly-header{min-block-size:var(--ly-header-height)}.ly-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ly-z-header)}.ly-section{padding-block:var(--ly-section-padding-block)}.ly-section--compact{--ly-section-padding-block:var(--ly-space-7)}.ly-section--flush{--ly-section-padding-block:0}.ly-readable{max-inline-size:var(--ly-wrapper-prose)}.ly-stack{display:flex;flex-direction:column;gap:var(--ly-stack-gap)}.ly-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ly-cluster-gap)}.ly-center{inline-size:min(100%,var(--ly-center-max,var(--ly-wrapper-content)));margin-inline:auto}.ly-cover{display:flex;flex-direction:column;min-block-size:var(--ly-cover-min);padding-block:var(--ly-cover-padding,var(--ly-space-5))}.ly-cover>:where(.ly-cover__center,[data-ly-cover-center]){margin-block:auto}.ly-switcher{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-switcher>*{flex-basis:calc((var(--ly-switcher-threshold) - 100%) * 999);flex-grow:1;min-inline-size:0}.ly-sidebar{display:flex;flex-wrap:wrap;gap:var(--ly-gap)}.ly-sidebar>:where(.ly-sidebar__side,[data-ly-sidebar="side"]){flex-basis:var(--ly-sidebar-size);flex-grow:1}.ly-sidebar>:where(.ly-sidebar__content,[data-ly-sidebar="content"]){flex-basis:0;flex-grow:999;min-inline-size:min(100%,var(--ly-sidebar-content-min))}.ly-grid{display:grid;grid-template-columns:repeat(var(--ly-grid-columns),minmax(0,1fr));gap:var(--ly-grid-gap)}.ly-grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-grid-min)),1fr))}.ly-grid>*,.ly-split>*,.ly-panes>*,.ly-media>*{min-inline-size:0}.ly-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-split-align,center)}.ly-panes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}.ly-media{display:grid;grid-template-areas:"media" "content" "actions";grid-template-columns:minmax(0,1fr);gap:var(--ly-gap);align-items:var(--ly-media-align,start)}.ly-media>:where(.ly-media__asset,[data-ly-media="asset"]){grid-area:media}.ly-media>:where(.ly-media__content,[data-ly-media="content"]){grid-area:content}.ly-media>:where(.ly-media__actions,[data-ly-media="actions"]){grid-area:actions}.ly-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(100%,var(--ly-reel-item-min)),var(--ly-reel-item-max));gap:var(--ly-grid-gap);overflow-x:auto;overflow-inline:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity}.ly-reel>*{min-inline-size:0;scroll-snap-align:start}.ly-frame{aspect-ratio:var(--ly-frame-ratio);overflow:hidden}.ly-frame>*{inline-size:100%;block-size:100%;object-fit:cover}.ly-scroll{min-block-size:0;max-block-size:var(--ly-scroll-max);overflow:auto;overscroll-behavior:contain}}@layer ly.primitives{@container (min-width:48rem){.ly-split{grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}.ly-panes--2{grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-pane-size)),0.7fr)}.ly-media{grid-template-areas:"media content" "media actions";grid-template-columns:minmax(min(100%,var(--ly-media-size)),auto) minmax(0,1fr)}}@container (min-width:64rem){.ly-panes--3{grid-template-columns:minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr) minmax(0,1fr) minmax(min(100%,var(--ly-pane-rail,14rem)),0.35fr)}}}@layer ly.recipes{:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]),:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){container-name:ly-recipe;container-type:inline-size;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"]),:where(.ly-dashboard,[data-ly-recipe="dashboard"]),:where(.ly-docs,[data-ly-recipe="docs"]),:where(.ly-list-detail,[data-ly-recipe="list-detail"]),:where(.ly-split-hero,[data-ly-recipe="split-hero"]){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ly-gap)}:where(.ly-app-shell,[data-ly-recipe="app-shell"]){min-block-size:100svh;grid-template-areas:"header" "sidebar" "main" "aside" "footer";grid-template-rows:auto auto minmax(0,1fr) auto auto}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header" "nav" "main" "aside" "footer"}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary" "secondary" "actions"}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content" "media" "actions";align-items:var(--ly-split-hero-align,center)}:where(.ly-gallery,[data-ly-recipe="gallery"]),:where(.ly-card-grid,[data-ly-recipe="card-grid"]){display:grid;gap:var(--ly-grid-gap)}:where(.ly-gallery,[data-ly-recipe="gallery"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-gallery-min)),1fr))}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--ly-card-grid-min)),1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"])>*,:where(.ly-card-grid,[data-ly-recipe="card-grid"])>*{min-inline-size:0}:where(.ly-area--header,[data-ly-area="header"]){grid-area:header;min-inline-size:0}:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:nav;min-inline-size:0}:where(.ly-area--main,[data-ly-area="main"]){grid-area:main;min-inline-size:0}:where(.ly-area--aside,[data-ly-area="aside"]){grid-area:aside;min-inline-size:0}:where(.ly-area--footer,[data-ly-area="footer"]){grid-area:footer;min-inline-size:0}:where(.ly-area--content,[data-ly-area="content"]){grid-area:content;min-inline-size:0}:where(.ly-area--media,[data-ly-area="media"]){grid-area:media;min-inline-size:0}:where(.ly-area--actions,[data-ly-area="actions"]){grid-area:actions;min-inline-size:0}:where(.ly-area--primary,[data-ly-area="primary"]){grid-area:primary;min-inline-size:0}:where(.ly-area--secondary,[data-ly-area="secondary"]){grid-area:secondary;min-inline-size:0}.ly-app-header{grid-area:header;min-inline-size:0}.ly-app-sidebar{grid-area:sidebar;min-inline-size:0}.ly-app-main{grid-area:main;min-inline-size:0}.ly-app-aside{grid-area:aside;min-inline-size:0}.ly-app-footer{grid-area:footer;min-inline-size:0}:where(.ly-app-shell,[data-ly-recipe="app-shell"])>:where(.ly-area--nav,[data-ly-area="nav"]){grid-area:sidebar}@container (min-width:48rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "sidebar main" "aside main" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"header header" "nav nav" "main aside" "footer footer";grid-template-columns:minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"header header" "nav main" "nav aside" "footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-areas:"primary secondary" "actions actions";grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.7fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-areas:"content media" "actions media";grid-template-columns:minmax(0,var(--ly-split-primary,1fr)) minmax(0,var(--ly-split-secondary,1fr))}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:14rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:18rem}}@container (min-width:64rem){:where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-dashboard,[data-ly-recipe="dashboard"]){grid-template-areas:"nav header header" "nav main aside" "nav footer footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr) minmax(min(100%,var(--ly-recipe-aside)),0.35fr)}:where(.ly-docs,[data-ly-recipe="docs"]){grid-template-areas:"nav header" "nav main" "nav aside" "nav footer";grid-template-columns:minmax(min(100%,var(--ly-recipe-rail)),auto) minmax(0,1fr)}:where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,var(--ly-pane-size)),0.45fr) minmax(0,1fr)}:where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}:where(.ly-gallery,[data-ly-recipe="gallery"]){--ly-gallery-min:16rem}:where(.ly-card-grid,[data-ly-recipe="card-grid"]){--ly-card-grid-min:20rem}}}@layer ly.utilities{.ly-cols-1{--ly-grid-columns:1}.ly-cols-2{--ly-grid-columns:2}.ly-cols-3{--ly-grid-columns:3}.ly-cols-4{--ly-grid-columns:4}.ly-cols-5{--ly-grid-columns:5}.ly-cols-6{--ly-grid-columns:6}.ly-cols-7{--ly-grid-columns:7}.ly-cols-8{--ly-grid-columns:8}.ly-cols-9{--ly-grid-columns:9}.ly-cols-10{--ly-grid-columns:10}.ly-cols-11{--ly-grid-columns:11}.ly-cols-12{--ly-grid-columns:12}.ly-cols-16{--ly-grid-columns:16}.ly-span-1{grid-column:span 1}.ly-span-2{grid-column:span 2}.ly-span-3{grid-column:span 3}.ly-span-4{grid-column:span 4}.ly-span-5{grid-column:span 5}.ly-span-6{grid-column:span 6}.ly-span-7{grid-column:span 7}.ly-span-8{grid-column:span 8}.ly-span-9{grid-column:span 9}.ly-span-10{grid-column:span 10}.ly-span-11{grid-column:span 11}.ly-span-12{grid-column:span 12}.ly-span-13{grid-column:span 13}.ly-span-14{grid-column:span 14}.ly-span-15{grid-column:span 15}.ly-span-16{grid-column:span 16}.ly-span-full{grid-column:1 / -1}.ly-gap-0{--ly-gap:var(--ly-space-0);--ly-grid-gap:var(--ly-space-0);--ly-stack-gap:var(--ly-space-0);--ly-cluster-gap:var(--ly-space-0)}.ly-gap-1{--ly-gap:var(--ly-space-1);--ly-grid-gap:var(--ly-space-1);--ly-stack-gap:var(--ly-space-1);--ly-cluster-gap:var(--ly-space-1)}.ly-gap-2{--ly-gap:var(--ly-space-2);--ly-grid-gap:var(--ly-space-2);--ly-stack-gap:var(--ly-space-2);--ly-cluster-gap:var(--ly-space-2)}.ly-gap-3{--ly-gap:var(--ly-space-3);--ly-grid-gap:var(--ly-space-3);--ly-stack-gap:var(--ly-space-3);--ly-cluster-gap:var(--ly-space-3)}.ly-gap-4{--ly-gap:var(--ly-space-4);--ly-grid-gap:var(--ly-space-4);--ly-stack-gap:var(--ly-space-4);--ly-cluster-gap:var(--ly-space-4)}.ly-gap-5{--ly-gap:var(--ly-space-5);--ly-grid-gap:var(--ly-space-5);--ly-stack-gap:var(--ly-space-5);--ly-cluster-gap:var(--ly-space-5)}.ly-gap-6{--ly-gap:var(--ly-space-6);--ly-grid-gap:var(--ly-space-6);--ly-stack-gap:var(--ly-space-6);--ly-cluster-gap:var(--ly-space-6)}.ly-gap-7{--ly-gap:var(--ly-space-7);--ly-grid-gap:var(--ly-space-7);--ly-stack-gap:var(--ly-space-7);--ly-cluster-gap:var(--ly-space-7)}.ly-gap-8{--ly-gap:var(--ly-space-8);--ly-grid-gap:var(--ly-space-8);--ly-stack-gap:var(--ly-space-8);--ly-cluster-gap:var(--ly-space-8)}.ly-gap-9{--ly-gap:var(--ly-space-9);--ly-grid-gap:var(--ly-space-9);--ly-stack-gap:var(--ly-space-9);--ly-cluster-gap:var(--ly-space-9)}.ly-pad-0{padding:var(--ly-space-0)}.ly-pad-1{padding:var(--ly-space-1)}.ly-pad-2{padding:var(--ly-space-2)}.ly-pad-3{padding:var(--ly-space-3)}.ly-pad-4{padding:var(--ly-space-4)}.ly-pad-5{padding:var(--ly-space-5)}.ly-pad-6{padding:var(--ly-space-6)}.ly-pad-7{padding:var(--ly-space-7)}.ly-pad-8{padding:var(--ly-space-8)}.ly-pad-9{padding:var(--ly-space-9)}.ly-px-4{padding-inline:var(--ly-space-4)}.ly-px-6{padding-inline:var(--ly-space-6)}.ly-px-8{padding-inline:var(--ly-space-8)}.ly-py-4{padding-block:var(--ly-space-4)}.ly-py-6{padding-block:var(--ly-space-6)}.ly-py-8{padding-block:var(--ly-space-8)}.ly-mx-auto{margin-inline:auto}.ly-w-full{inline-size:100%}.ly-h-full{block-size:100%}.ly-min-h-screen{min-block-size:100svh}.ly-bleed{inline-size:100vw;margin-inline:calc(50% - 50vw)}.ly-overflow-auto{overflow:auto}.ly-overflow-hidden{overflow:hidden}.ly-items-start{align-items:flex-start}.ly-items-center{align-items:center}.ly-items-end{align-items:flex-end}.ly-items-stretch{align-items:stretch}.ly-justify-start{justify-content:flex-start}.ly-justify-center{justify-content:center}.ly-justify-end{justify-content:flex-end}.ly-justify-between{justify-content:space-between}.ly-frame-1x1{--ly-frame-ratio:1 / 1}.ly-frame-2x1{--ly-frame-ratio:2 / 1}.ly-frame-3x2{--ly-frame-ratio:3 / 2}.ly-frame-4x3{--ly-frame-ratio:4 / 3}.ly-frame-16x9{--ly-frame-ratio:16 / 9}.ly-frame-21x9{--ly-frame-ratio:21 / 9}.ly-hidden{display:none !important}.ly-show-md-up,.ly-show-lg-up{display:none !important}.ly-visually-hidden{position:absolute !important;inline-size:1px !important;block-size:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;clip-path:inset(50%) !important;white-space:nowrap !important}.ly-order-first{order:-1}.ly-order-normal{order:0}.ly-order-last{order:999}.ly-order-1{order:1}.ly-order-2{order:2}.ly-order-3{order:3}.ly-order-4{order:4}.ly-order-5{order:5}.ly-order-6{order:6}@container (min-width:48rem){.ly-md-cols-1{--ly-grid-columns:1}.ly-md-cols-2{--ly-grid-columns:2}.ly-md-cols-3{--ly-grid-columns:3}.ly-md-cols-4{--ly-grid-columns:4}.ly-md-cols-6{--ly-grid-columns:6}.ly-md-cols-8{--ly-grid-columns:8}.ly-md-cols-12{--ly-grid-columns:12}.ly-md-cols-16{--ly-grid-columns:16}.ly-show-md-up{display:revert !important}.ly-md-order-first{order:-1}.ly-md-order-normal{order:0}.ly-md-order-last{order:999}.ly-md-order-1{order:1}.ly-md-order-2{order:2}.ly-md-order-3{order:3}.ly-md-order-4{order:4}.ly-md-order-5{order:5}.ly-md-order-6{order:6}}@container (min-width:64rem){.ly-lg-cols-1{--ly-grid-columns:1}.ly-lg-cols-2{--ly-grid-columns:2}.ly-lg-cols-3{--ly-grid-columns:3}.ly-lg-cols-4{--ly-grid-columns:4}.ly-lg-cols-6{--ly-grid-columns:6}.ly-lg-cols-8{--ly-grid-columns:8}.ly-lg-cols-12{--ly-grid-columns:12}.ly-lg-cols-16{--ly-grid-columns:16}.ly-show-lg-up{display:revert !important}.ly-lg-order-first{order:-1}.ly-lg-order-normal{order:0}.ly-lg-order-last{order:999}.ly-lg-order-1{order:1}.ly-lg-order-2{order:2}.ly-lg-order-3{order:3}.ly-lg-order-4{order:4}.ly-lg-order-5{order:5}.ly-lg-order-6{order:6}}}@layer ly.personalities.minimal_saas{:where(.ly-root[data-ly-layout="minimal-saas"]){--ly-recipe-rail:15rem;--ly-recipe-aside:16rem;--ly-grid-columns:4;--ly-grid-min:16rem;--ly-personality-wrapper-max:88rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="minimal-saas"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="minimal-saas"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,15rem),0.24fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}}}@layer ly.personalities.bento{:where(.ly-root[data-ly-layout="bento"]){--ly-grid-columns:6;--ly-grid-min:12rem;--ly-card-grid-min:13rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="bento"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2;grid-row:span 2}:where(.ly-root[data-ly-layout="bento"]):where(.ly-card-grid,[data-ly-recipe="card-grid"])>:nth-child(6n + 1){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="bento"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main main" "aside main main" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr) minmax(0,1fr)}}}@layer ly.personalities.maximalist{:where(.ly-root[data-ly-layout="maximalist"]){--ly-grid-columns:12;--ly-grid-min:10rem;--ly-personality-wrapper-max:100%;--ly-card-grid-min:12rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container (min-width:56rem){:where(.ly-root[data-ly-layout="maximalist"]) .ly-grid>:nth-child(7n + 1){grid-column:span 3;grid-row:span 2}:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-gallery,[data-ly-recipe="gallery"])>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="maximalist"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header header" "main main sidebar aside" "main main footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr) minmax(min(100%,15rem),0.32fr) minmax(min(100%,18rem),0.38fr)}}}@layer ly.personalities.bauhaus{:where(.ly-root[data-ly-layout="bauhaus"]){--ly-recipe-rail:14rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:13rem;--ly-personality-wrapper-max:96rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,14rem),0.3fr) minmax(0,1fr)}}@container (min-width:52rem){:where(.ly-root[data-ly-layout="bauhaus"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="bauhaus"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header aside" "sidebar main main aside" "sidebar footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,0.7fr) minmax(0,1.3fr) minmax(min(100%,18rem),0.3fr)}}}@layer ly.personalities.tactile{:where(.ly-root[data-ly-layout="tactile"]){--ly-recipe-rail:17rem;--ly-recipe-aside:20rem;--ly-grid-columns:5;--ly-grid-min:15rem;--ly-personality-wrapper-max:82rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="tactile"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header" "sidebar main" "sidebar aside" "sidebar footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(min(100%,17rem),0.28fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="tactile"]) .ly-grid>:nth-child(5n + 2){grid-column:span 2}:where(.ly-root[data-ly-layout="tactile"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(min(100%,20rem),0.42fr) minmax(0,0.58fr)}}}@layer ly.personalities.neumorphism{:where(.ly-root[data-ly-layout="neumorphism"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:4;--ly-grid-min:17rem;--ly-personality-wrapper-max:84rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container (min-width:52rem){:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header sidebar" "main sidebar" "aside sidebar" "footer sidebar";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}:where(.ly-root[data-ly-layout="neumorphism"]) .ly-grid>:nth-child(4n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="neumorphism"]):where(.ly-list-detail,[data-ly-recipe="list-detail"]){grid-template-columns:minmax(0,0.58fr) minmax(min(100%,19rem),0.42fr)}}}@layer ly.personalities.retrofuturism{:where(.ly-root[data-ly-layout="retrofuturism"]){--ly-recipe-rail:14rem;--ly-recipe-aside:17rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:106rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="retrofuturism"]) .ly-grid>:nth-child(6n + 1){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="retrofuturism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,14rem),0.24fr) minmax(0,1fr) minmax(min(100%,17rem),0.3fr)}}}@layer ly.personalities.brutalism{:where(.ly-root[data-ly-layout="brutalism"]){--ly-recipe-rail:18rem;--ly-recipe-aside:16rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:100rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="brutalism"]) .ly-grid>:nth-child(3n){grid-column:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="brutalism"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.3fr) minmax(min(100%,16rem),0.7fr) minmax(min(100%,18rem),0.34fr)}}}@layer ly.personalities.cyberpunk{:where(.ly-root[data-ly-layout="cyberpunk"]){--ly-recipe-rail:13rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:12rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:44rem){:where(.ly-root[data-ly-layout="cyberpunk"]) .ly-grid>:nth-child(4n + 2){grid-column:span 3}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="cyberpunk"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header aside" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.2fr) minmax(0,1fr) minmax(min(100%,19rem),0.32fr)}}}@layer ly.personalities.y2k{:where(.ly-root[data-ly-layout="y2k"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:5;--ly-grid-min:13rem;--ly-personality-wrapper-max:90rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="y2k"]) .ly-grid>:nth-child(5n + 1){grid-column:span 3}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="y2k"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "aside main sidebar" "footer footer sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,18rem),0.34fr) minmax(0,1fr) minmax(min(100%,16rem),0.28fr)}}}@layer ly.personalities.retro_glass{:where(.ly-root[data-ly-layout="retro-glass"]){--ly-recipe-rail:18rem;--ly-recipe-aside:20rem;--ly-grid-columns:8;--ly-grid-min:15rem;--ly-personality-wrapper-max:104rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,18rem),0.3fr) minmax(0,1fr)}}@container (min-width:56rem){:where(.ly-root[data-ly-layout="retro-glass"]) .ly-grid>:nth-child(4n){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="retro-glass"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main main sidebar" "aside footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr) minmax(min(100%,18rem),0.32fr)}}}@layer ly.personalities.f_pattern{:where(.ly-root[data-ly-layout="f-pattern"]){--ly-recipe-rail:16rem;--ly-recipe-aside:18rem;--ly-grid-columns:6;--ly-grid-min:14rem;--ly-personality-wrapper-max:92rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container (min-width:56rem){:where(.ly-root[data-ly-layout="f-pattern"]) .ly-grid>:nth-child(3n + 1){grid-column:span 2}:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.35fr) minmax(0,0.65fr)}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="f-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "sidebar footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.26fr) minmax(0,1.35fr) minmax(min(100%,18rem),0.65fr)}}}@layer ly.personalities.z_pattern{:where(.ly-root[data-ly-layout="z-pattern"]){--ly-recipe-rail:17rem;--ly-recipe-aside:19rem;--ly-grid-columns:8;--ly-grid-min:14rem;--ly-personality-wrapper-max:108rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,17rem),0.3fr) minmax(0,1fr)}}@container (min-width:60rem){:where(.ly-root[data-ly-layout="z-pattern"]) .ly-grid>:nth-child(4n + 2){grid-column:span 2;align-self:end}:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-split-hero,[data-ly-recipe="split-hero"]){grid-template-columns:minmax(0,1.5fr) minmax(0,0.5fr)}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="z-pattern"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header sidebar" "main aside sidebar" "footer aside sidebar";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1.45fr) minmax(min(100%,19rem),0.55fr) minmax(min(100%,17rem),0.3fr)}}}@layer ly.personalities.split_screen{:where(.ly-root[data-ly-layout="split-screen"]){--ly-grid-columns:2;--ly-grid-min:20rem;--ly-personality-wrapper-max:100%;--ly-split-primary:1fr;--ly-split-secondary:1fr;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="split-screen"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header" "main sidebar" "aside sidebar" "footer footer";grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}:where(.ly-root[data-ly-layout="split-screen"]):where( .ly-split,.ly-split-hero,[data-ly-recipe="split-hero"],.ly-list-detail,[data-ly-recipe="list-detail"] ){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}}@layer ly.personalities.mondrian{:where(.ly-root[data-ly-layout="mondrian"]){--ly-recipe-rail:13rem;--ly-recipe-aside:18rem;--ly-grid-columns:10;--ly-grid-min:11rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,13rem),0.3fr) minmax(0,1fr)}}@container (min-width:52rem){:where(.ly-root[data-ly-layout="mondrian"]) .ly-grid>:nth-child(5n + 1){grid-column:span 2;grid-row:span 2}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="mondrian"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"sidebar header header" "sidebar main aside" "footer footer aside";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,13rem),0.22fr) minmax(0,1.45fr) minmax(min(100%,18rem),0.55fr)}}}@layer ly.personalities.synthwave{:where(.ly-root[data-ly-layout="synthwave"]){--ly-recipe-rail:16rem;--ly-recipe-aside:20rem;--ly-grid-columns:12;--ly-grid-min:14rem;--ly-reel-item-max:34rem;--ly-personality-wrapper-max:112rem;container-name:ly-personality;container-type:inline-size;min-inline-size:0}@container (min-width:48rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-columns:minmax(min(100%,16rem),0.3fr) minmax(0,1fr)}}@container (min-width:64rem){:where(.ly-root[data-ly-layout="synthwave"]):where(.ly-app-shell,[data-ly-recipe="app-shell"]){grid-template-areas:"header header header" "sidebar main aside" "footer footer footer";grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(min(100%,16rem),0.28fr) minmax(0,1fr) minmax(min(100%,20rem),0.34fr)}:where(.ly-root[data-ly-layout="synthwave"]) .ly-grid>:nth-child(4n + 1){grid-column:span 3}:where(.ly-root[data-ly-layout="synthwave"]) .ly-reel{grid-auto-columns:minmax(min(100%,20rem),var(--ly-reel-item-max))}}}
|