@24vlh/vds 0.1.0 → 0.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.
@@ -1,3434 +1 @@
1
- /************************************************************
2
- * VLAH DESIGN SYSTEM (VDS) - Utility Layer
3
- *
4
- * Responsibilities:
5
- * - Provide atomic, token-driven utilities for layout,
6
- * spacing, typography, grid, flexbox, sizing, surfaces,
7
- * borders, overflow, interaction, and z-index layers
8
- * - Enable rapid composition in prototypes, docs, and
9
- * production UIs without introducing component logic
10
- * - Maintain strict namespace discipline: all utilities
11
- * are single-purpose, predictable, and stable
12
- *
13
- * System Notes:
14
- * - Fully token-aligned: spacing, radii, typography,
15
- * surfaces, borders, shadows, breakpoints, z-index
16
- * - Mobile-first responsive variants (sm:, md:, lg:, xl:)
17
- * reflect global breakpoint tokens
18
- * - Safe across all layers (components, authoring,
19
- * content-blocks, documentation, marketing)
20
- ************************************************************/
21
-
22
- /* ---------------------------------------------------------
23
- 1. DISPLAY & VISIBILITY
24
- --------------------------------------------------------- */
25
-
26
- .block {
27
- display: block !important;
28
- }
29
-
30
- .inline {
31
- display: inline !important;
32
- }
33
-
34
- .inline-block {
35
- display: inline-block !important;
36
- }
37
-
38
- .flex {
39
- display: flex !important;
40
- }
41
-
42
- .inline-flex {
43
- display: inline-flex !important;
44
- }
45
-
46
- .grid {
47
- display: grid !important;
48
- }
49
-
50
- .inline-grid {
51
- display: inline-grid !important;
52
- }
53
-
54
- .hidden {
55
- display: none !important;
56
- }
57
-
58
- @media (max-width: 640px) {
59
- .hide-mobile {
60
- display: none !important;
61
- }
62
-
63
- .show-mobile {
64
- display: block !important;
65
- }
66
- }
67
-
68
- @media (min-width: calc(640px + 1px)) and (max-width: 768px) {
69
- .hide-tablet {
70
- display: none !important;
71
- }
72
-
73
- .show-tablet {
74
- display: block !important;
75
- }
76
- }
77
-
78
- @media (min-width: 1024px) {
79
- .hide-desktop {
80
- display: none !important;
81
- }
82
-
83
- .show-desktop {
84
- display: block !important;
85
- }
86
- }
87
-
88
- /* ---------------------------------------------------------
89
- 2. FLEXBOX
90
- --------------------------------------------------------- */
91
-
92
- .flex-row {
93
- flex-direction: row !important;
94
- }
95
-
96
- .flex-column {
97
- flex-direction: column !important;
98
- }
99
-
100
- .flex-wrap {
101
- flex-wrap: wrap !important;
102
- }
103
-
104
- .flex-nowrap {
105
- flex-wrap: nowrap !important;
106
- }
107
-
108
- .justify-start {
109
- justify-content: flex-start !important;
110
- }
111
-
112
- .justify-center {
113
- justify-content: center !important;
114
- }
115
-
116
- .justify-end {
117
- justify-content: flex-end !important;
118
- }
119
-
120
- .justify-between {
121
- justify-content: space-between !important;
122
- }
123
-
124
- .justify-around {
125
- justify-content: space-around !important;
126
- }
127
-
128
- .justify-evenly {
129
- justify-content: space-evenly !important;
130
- }
131
-
132
- .items-start {
133
- align-items: flex-start !important;
134
- }
135
-
136
- .items-center {
137
- align-items: center !important;
138
- }
139
-
140
- .items-end {
141
- align-items: flex-end !important;
142
- }
143
-
144
- .items-stretch {
145
- align-items: stretch !important;
146
- }
147
-
148
- .self-start {
149
- align-self: flex-start !important;
150
- }
151
-
152
- .self-center {
153
- align-self: center !important;
154
- }
155
-
156
- .self-end {
157
- align-self: flex-end !important;
158
- }
159
-
160
- .flex-1 {
161
- flex: 1 1 0 !important;
162
- }
163
-
164
- .flex-auto {
165
- flex: 0 0 auto !important;
166
- }
167
-
168
- /* ---------------------------------------------------------
169
- 3. GRID (ATOMIC)
170
- --------------------------------------------------------- */
171
-
172
- .grid-cols-1 {
173
- grid-template-columns: repeat(1, minmax(0, 1fr));
174
- }
175
-
176
- .grid-cols-2 {
177
- grid-template-columns: repeat(2, minmax(0, 1fr));
178
- }
179
-
180
- .grid-cols-3 {
181
- grid-template-columns: repeat(3, minmax(0, 1fr));
182
- }
183
-
184
- .grid-cols-4 {
185
- grid-template-columns: repeat(4, minmax(0, 1fr));
186
- }
187
-
188
- .grid-cols-5 {
189
- grid-template-columns: repeat(5, minmax(0, 1fr));
190
- }
191
-
192
- .grid-cols-6 {
193
- grid-template-columns: repeat(6, minmax(0, 1fr));
194
- }
195
-
196
- .grid-cols-12 {
197
- grid-template-columns: repeat(12, minmax(0, 1fr));
198
- }
199
-
200
- .grid-auto-fit-200 {
201
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
202
- }
203
-
204
- .grid-auto-fit-250 {
205
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
206
- }
207
-
208
- .grid-auto-fit-300 {
209
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
210
- }
211
-
212
- .grid-auto-fit-400 {
213
- grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
214
- }
215
-
216
- .col-span-1 {
217
- grid-column: span 1 / span 1;
218
- }
219
-
220
- .col-span-2 {
221
- grid-column: span 2 / span 2;
222
- }
223
-
224
- .col-span-3 {
225
- grid-column: span 3 / span 3;
226
- }
227
-
228
- .col-span-4 {
229
- grid-column: span 4 / span 4;
230
- }
231
-
232
- .col-span-5 {
233
- grid-column: span 5 / span 5;
234
- }
235
-
236
- .col-span-6 {
237
- grid-column: span 6 / span 6;
238
- }
239
-
240
- .col-span-7 {
241
- grid-column: span 7 / span 7;
242
- }
243
-
244
- .col-span-8 {
245
- grid-column: span 8 / span 8;
246
- }
247
-
248
- .col-span-9 {
249
- grid-column: span 9 / span 9;
250
- }
251
-
252
- .col-span-10 {
253
- grid-column: span 10 / span 10;
254
- }
255
-
256
- .col-span-11 {
257
- grid-column: span 11 / span 11;
258
- }
259
-
260
- .col-span-12 {
261
- grid-column: span 12 / span 12;
262
- }
263
-
264
- .col-span-full {
265
- grid-column: 1 / -1;
266
- }
267
-
268
- .row-span-1 {
269
- grid-row: span 1 / span 1;
270
- }
271
-
272
- .row-span-2 {
273
- grid-row: span 2 / span 2;
274
- }
275
-
276
- .row-span-3 {
277
- grid-row: span 3 / span 3;
278
- }
279
-
280
- /* ---------------------------------------------------------
281
- 4. SPACING - MARGIN & PADDING (+ NEGATIVE)
282
- ---------------------------------------------------------
283
- Scale (mapped to --space-* tokens):
284
- 0,1,2,3,4,5,6,7,8,10,12,14,16,20,24,32,40,48,64
285
- --------------------------------------------------------- */
286
-
287
- .m-0 {
288
- margin: 0 !important;
289
- }
290
-
291
- .m-1 {
292
- margin: var(--space-1) !important;
293
- }
294
-
295
- .m-2 {
296
- margin: var(--space-2) !important;
297
- }
298
-
299
- .m-3 {
300
- margin: var(--space-3) !important;
301
- }
302
-
303
- .m-4 {
304
- margin: var(--space-4) !important;
305
- }
306
-
307
- .m-5 {
308
- margin: var(--space-5) !important;
309
- }
310
-
311
- .m-6 {
312
- margin: var(--space-6) !important;
313
- }
314
-
315
- .m-7 {
316
- margin: var(--space-7) !important;
317
- }
318
-
319
- .m-8 {
320
- margin: var(--space-8) !important;
321
- }
322
-
323
- .m-10 {
324
- margin: var(--space-10) !important;
325
- }
326
-
327
- .m-12 {
328
- margin: var(--space-12) !important;
329
- }
330
-
331
- .m-14 {
332
- margin: var(--space-14) !important;
333
- }
334
-
335
- .m-16 {
336
- margin: var(--space-16) !important;
337
- }
338
-
339
- .m-20 {
340
- margin: var(--space-20) !important;
341
- }
342
-
343
- .m-24 {
344
- margin: var(--space-24) !important;
345
- }
346
-
347
- .m-32 {
348
- margin: var(--space-32) !important;
349
- }
350
-
351
- .m-40 {
352
- margin: var(--space-40) !important;
353
- }
354
-
355
- .m-48 {
356
- margin: var(--space-48) !important;
357
- }
358
-
359
- .m-64 {
360
- margin: var(--space-64) !important;
361
- }
362
-
363
- .mx-auto {
364
- margin-left: auto !important;
365
- margin-right: auto !important;
366
- }
367
-
368
- .mx-0 {
369
- margin-left: 0 !important;
370
- margin-right: 0 !important;
371
- }
372
-
373
- .mx-1 {
374
- margin-left: var(--space-1) !important;
375
- margin-right: var(--space-1) !important;
376
- }
377
-
378
- .mx-2 {
379
- margin-left: var(--space-2) !important;
380
- margin-right: var(--space-2) !important;
381
- }
382
-
383
- .mx-3 {
384
- margin-left: var(--space-3) !important;
385
- margin-right: var(--space-3) !important;
386
- }
387
-
388
- .mx-4 {
389
- margin-left: var(--space-4) !important;
390
- margin-right: var(--space-4) !important;
391
- }
392
-
393
- .mx-5 {
394
- margin-left: var(--space-5) !important;
395
- margin-right: var(--space-5) !important;
396
- }
397
-
398
- .mx-6 {
399
- margin-left: var(--space-6) !important;
400
- margin-right: var(--space-6) !important;
401
- }
402
-
403
- .mx-7 {
404
- margin-left: var(--space-7) !important;
405
- margin-right: var(--space-7) !important;
406
- }
407
-
408
- .mx-8 {
409
- margin-left: var(--space-8) !important;
410
- margin-right: var(--space-8) !important;
411
- }
412
-
413
- .mx-10 {
414
- margin-left: var(--space-10) !important;
415
- margin-right: var(--space-10) !important;
416
- }
417
-
418
- .mx-12 {
419
- margin-left: var(--space-12) !important;
420
- margin-right: var(--space-12) !important;
421
- }
422
-
423
- .mx-14 {
424
- margin-left: var(--space-14) !important;
425
- margin-right: var(--space-14) !important;
426
- }
427
-
428
- .mx-16 {
429
- margin-left: var(--space-16) !important;
430
- margin-right: var(--space-16) !important;
431
- }
432
-
433
- .mx-20 {
434
- margin-left: var(--space-20) !important;
435
- margin-right: var(--space-20) !important;
436
- }
437
-
438
- .mx-24 {
439
- margin-left: var(--space-24) !important;
440
- margin-right: var(--space-24) !important;
441
- }
442
-
443
- .mx-32 {
444
- margin-left: var(--space-32) !important;
445
- margin-right: var(--space-32) !important;
446
- }
447
-
448
- .mx-40 {
449
- margin-left: var(--space-40) !important;
450
- margin-right: var(--space-40) !important;
451
- }
452
-
453
- .mx-48 {
454
- margin-left: var(--space-48) !important;
455
- margin-right: var(--space-48) !important;
456
- }
457
-
458
- .mx-64 {
459
- margin-left: var(--space-64) !important;
460
- margin-right: var(--space-64) !important;
461
- }
462
-
463
- .my-0 {
464
- margin-top: 0 !important;
465
- margin-bottom: 0 !important;
466
- }
467
-
468
- .my-1 {
469
- margin-top: var(--space-1) !important;
470
- margin-bottom: var(--space-1) !important;
471
- }
472
-
473
- .my-2 {
474
- margin-top: var(--space-2) !important;
475
- margin-bottom: var(--space-2) !important;
476
- }
477
-
478
- .my-3 {
479
- margin-top: var(--space-3) !important;
480
- margin-bottom: var(--space-3) !important;
481
- }
482
-
483
- .my-4 {
484
- margin-top: var(--space-4) !important;
485
- margin-bottom: var(--space-4) !important;
486
- }
487
-
488
- .my-5 {
489
- margin-top: var(--space-5) !important;
490
- margin-bottom: var(--space-5) !important;
491
- }
492
-
493
- .my-6 {
494
- margin-top: var(--space-6) !important;
495
- margin-bottom: var(--space-6) !important;
496
- }
497
-
498
- .my-7 {
499
- margin-top: var(--space-7) !important;
500
- margin-bottom: var(--space-7) !important;
501
- }
502
-
503
- .my-8 {
504
- margin-top: var(--space-8) !important;
505
- margin-bottom: var(--space-8) !important;
506
- }
507
-
508
- .my-10 {
509
- margin-top: var(--space-10) !important;
510
- margin-bottom: var(--space-10) !important;
511
- }
512
-
513
- .my-12 {
514
- margin-top: var(--space-12) !important;
515
- margin-bottom: var(--space-12) !important;
516
- }
517
-
518
- .my-14 {
519
- margin-top: var(--space-14) !important;
520
- margin-bottom: var(--space-14) !important;
521
- }
522
-
523
- .my-16 {
524
- margin-top: var(--space-16) !important;
525
- margin-bottom: var(--space-16) !important;
526
- }
527
-
528
- .my-20 {
529
- margin-top: var(--space-20) !important;
530
- margin-bottom: var(--space-20) !important;
531
- }
532
-
533
- .my-24 {
534
- margin-top: var(--space-24) !important;
535
- margin-bottom: var(--space-24) !important;
536
- }
537
-
538
- .my-32 {
539
- margin-top: var(--space-32) !important;
540
- margin-bottom: var(--space-32) !important;
541
- }
542
-
543
- .my-40 {
544
- margin-top: var(--space-40) !important;
545
- margin-bottom: var(--space-40) !important;
546
- }
547
-
548
- .my-48 {
549
- margin-top: var(--space-48) !important;
550
- margin-bottom: var(--space-48) !important;
551
- }
552
-
553
- .my-64 {
554
- margin-top: var(--space-64) !important;
555
- margin-bottom: var(--space-64) !important;
556
- }
557
-
558
- .mt-0 {
559
- margin-top: 0 !important;
560
- }
561
-
562
- .mt-1 {
563
- margin-top: var(--space-1) !important;
564
- }
565
-
566
- .mt-2 {
567
- margin-top: var(--space-2) !important;
568
- }
569
-
570
- .mt-3 {
571
- margin-top: var(--space-3) !important;
572
- }
573
-
574
- .mt-4 {
575
- margin-top: var(--space-4) !important;
576
- }
577
-
578
- .mt-5 {
579
- margin-top: var(--space-5) !important;
580
- }
581
-
582
- .mt-6 {
583
- margin-top: var(--space-6) !important;
584
- }
585
-
586
- .mt-7 {
587
- margin-top: var(--space-7) !important;
588
- }
589
-
590
- .mt-8 {
591
- margin-top: var(--space-8) !important;
592
- }
593
-
594
- .mt-10 {
595
- margin-top: var(--space-10) !important;
596
- }
597
-
598
- .mt-12 {
599
- margin-top: var(--space-12) !important;
600
- }
601
-
602
- .mt-14 {
603
- margin-top: var(--space-14) !important;
604
- }
605
-
606
- .mt-16 {
607
- margin-top: var(--space-16) !important;
608
- }
609
-
610
- .mt-20 {
611
- margin-top: var(--space-20) !important;
612
- }
613
-
614
- .mt-24 {
615
- margin-top: var(--space-24) !important;
616
- }
617
-
618
- .mt-32 {
619
- margin-top: var(--space-32) !important;
620
- }
621
-
622
- .mt-40 {
623
- margin-top: var(--space-40) !important;
624
- }
625
-
626
- .mt-48 {
627
- margin-top: var(--space-48) !important;
628
- }
629
-
630
- .mt-64 {
631
- margin-top: var(--space-64) !important;
632
- }
633
-
634
- .mb-0 {
635
- margin-bottom: 0 !important;
636
- }
637
-
638
- .mb-1 {
639
- margin-bottom: var(--space-1) !important;
640
- }
641
-
642
- .mb-2 {
643
- margin-bottom: var(--space-2) !important;
644
- }
645
-
646
- .mb-3 {
647
- margin-bottom: var(--space-3) !important;
648
- }
649
-
650
- .mb-4 {
651
- margin-bottom: var(--space-4) !important;
652
- }
653
-
654
- .mb-5 {
655
- margin-bottom: var(--space-5) !important;
656
- }
657
-
658
- .mb-6 {
659
- margin-bottom: var(--space-6) !important;
660
- }
661
-
662
- .mb-7 {
663
- margin-bottom: var(--space-7) !important;
664
- }
665
-
666
- .mb-8 {
667
- margin-bottom: var(--space-8) !important;
668
- }
669
-
670
- .mb-10 {
671
- margin-bottom: var(--space-10) !important;
672
- }
673
-
674
- .mb-12 {
675
- margin-bottom: var(--space-12) !important;
676
- }
677
-
678
- .mb-14 {
679
- margin-bottom: var(--space-14) !important;
680
- }
681
-
682
- .mb-16 {
683
- margin-bottom: var(--space-16) !important;
684
- }
685
-
686
- .mb-20 {
687
- margin-bottom: var(--space-20) !important;
688
- }
689
-
690
- .mb-24 {
691
- margin-bottom: var(--space-24) !important;
692
- }
693
-
694
- .mb-32 {
695
- margin-bottom: var(--space-32) !important;
696
- }
697
-
698
- .mb-40 {
699
- margin-bottom: var(--space-40) !important;
700
- }
701
-
702
- .mb-48 {
703
- margin-bottom: var(--space-48) !important;
704
- }
705
-
706
- .mb-64 {
707
- margin-bottom: var(--space-64) !important;
708
- }
709
-
710
- .ml-0 {
711
- margin-left: 0 !important;
712
- }
713
-
714
- .ml-1 {
715
- margin-left: var(--space-1) !important;
716
- }
717
-
718
- .ml-2 {
719
- margin-left: var(--space-2) !important;
720
- }
721
-
722
- .ml-3 {
723
- margin-left: var(--space-3) !important;
724
- }
725
-
726
- .ml-4 {
727
- margin-left: var(--space-4) !important;
728
- }
729
-
730
- .ml-5 {
731
- margin-left: var(--space-5) !important;
732
- }
733
-
734
- .ml-6 {
735
- margin-left: var(--space-6) !important;
736
- }
737
-
738
- .ml-7 {
739
- margin-left: var(--space-7) !important;
740
- }
741
-
742
- .ml-8 {
743
- margin-left: var(--space-8) !important;
744
- }
745
-
746
- .ml-10 {
747
- margin-left: var(--space-10) !important;
748
- }
749
-
750
- .ml-12 {
751
- margin-left: var(--space-12) !important;
752
- }
753
-
754
- .ml-14 {
755
- margin-left: var(--space-14) !important;
756
- }
757
-
758
- .ml-16 {
759
- margin-left: var(--space-16) !important;
760
- }
761
-
762
- .ml-20 {
763
- margin-left: var(--space-20) !important;
764
- }
765
-
766
- .ml-24 {
767
- margin-left: var(--space-24) !important;
768
- }
769
-
770
- .ml-32 {
771
- margin-left: var(--space-32) !important;
772
- }
773
-
774
- .ml-40 {
775
- margin-left: var(--space-40) !important;
776
- }
777
-
778
- .ml-48 {
779
- margin-left: var(--space-48) !important;
780
- }
781
-
782
- .ml-64 {
783
- margin-left: var(--space-64) !important;
784
- }
785
-
786
- .mr-0 {
787
- margin-right: 0 !important;
788
- }
789
-
790
- .mr-1 {
791
- margin-right: var(--space-1) !important;
792
- }
793
-
794
- .mr-2 {
795
- margin-right: var(--space-2) !important;
796
- }
797
-
798
- .mr-3 {
799
- margin-right: var(--space-3) !important;
800
- }
801
-
802
- .mr-4 {
803
- margin-right: var(--space-4) !important;
804
- }
805
-
806
- .mr-5 {
807
- margin-right: var(--space-5) !important;
808
- }
809
-
810
- .mr-6 {
811
- margin-right: var(--space-6) !important;
812
- }
813
-
814
- .mr-7 {
815
- margin-right: var(--space-7) !important;
816
- }
817
-
818
- .mr-8 {
819
- margin-right: var(--space-8) !important;
820
- }
821
-
822
- .mr-10 {
823
- margin-right: var(--space-10) !important;
824
- }
825
-
826
- .mr-12 {
827
- margin-right: var(--space-12) !important;
828
- }
829
-
830
- .mr-14 {
831
- margin-right: var(--space-14) !important;
832
- }
833
-
834
- .mr-16 {
835
- margin-right: var(--space-16) !important;
836
- }
837
-
838
- .mr-20 {
839
- margin-right: var(--space-20) !important;
840
- }
841
-
842
- .mr-24 {
843
- margin-right: var(--space-24) !important;
844
- }
845
-
846
- .mr-32 {
847
- margin-right: var(--space-32) !important;
848
- }
849
-
850
- .mr-40 {
851
- margin-right: var(--space-40) !important;
852
- }
853
-
854
- .mr-48 {
855
- margin-right: var(--space-48) !important;
856
- }
857
-
858
- .mr-64 {
859
- margin-right: var(--space-64) !important;
860
- }
861
-
862
- .ml-auto {
863
- margin-left: auto !important;
864
- }
865
-
866
- .mr-auto {
867
- margin-right: auto !important;
868
- }
869
-
870
- .-m-1 {
871
- margin: calc(var(--space-1) * -1) !important;
872
- }
873
-
874
- .-m-2 {
875
- margin: calc(var(--space-2) * -1) !important;
876
- }
877
-
878
- .-m-3 {
879
- margin: calc(var(--space-3) * -1) !important;
880
- }
881
-
882
- .-m-4 {
883
- margin: calc(var(--space-4) * -1) !important;
884
- }
885
-
886
- .-m-6 {
887
- margin: calc(var(--space-6) * -1) !important;
888
- }
889
-
890
- .-m-8 {
891
- margin: calc(var(--space-8) * -1) !important;
892
- }
893
-
894
- .-m-10 {
895
- margin: calc(var(--space-10) * -1) !important;
896
- }
897
-
898
- .-mt-1 {
899
- margin-top: calc(var(--space-1) * -1) !important;
900
- }
901
-
902
- .-mt-2 {
903
- margin-top: calc(var(--space-2) * -1) !important;
904
- }
905
-
906
- .-mt-3 {
907
- margin-top: calc(var(--space-3) * -1) !important;
908
- }
909
-
910
- .-mt-4 {
911
- margin-top: calc(var(--space-4) * -1) !important;
912
- }
913
-
914
- .-mt-6 {
915
- margin-top: calc(var(--space-6) * -1) !important;
916
- }
917
-
918
- .-mt-8 {
919
- margin-top: calc(var(--space-8) * -1) !important;
920
- }
921
-
922
- .-mt-10 {
923
- margin-top: calc(var(--space-10) * -1) !important;
924
- }
925
-
926
- .-mb-1 {
927
- margin-bottom: calc(var(--space-1) * -1) !important;
928
- }
929
-
930
- .-mb-2 {
931
- margin-bottom: calc(var(--space-2) * -1) !important;
932
- }
933
-
934
- .-mb-3 {
935
- margin-bottom: calc(var(--space-3) * -1) !important;
936
- }
937
-
938
- .-mb-4 {
939
- margin-bottom: calc(var(--space-4) * -1) !important;
940
- }
941
-
942
- .-mb-6 {
943
- margin-bottom: calc(var(--space-6) * -1) !important;
944
- }
945
-
946
- .-mb-8 {
947
- margin-bottom: calc(var(--space-8) * -1) !important;
948
- }
949
-
950
- .-mb-10 {
951
- margin-bottom: calc(var(--space-10) * -1) !important;
952
- }
953
-
954
- .-mx-1 {
955
- margin-left: calc(var(--space-1) * -1) !important;
956
- margin-right: calc(var(--space-1) * -1) !important;
957
- }
958
-
959
- .-mx-2 {
960
- margin-left: calc(var(--space-2) * -1) !important;
961
- margin-right: calc(var(--space-2) * -1) !important;
962
- }
963
-
964
- .-mx-3 {
965
- margin-left: calc(var(--space-3) * -1) !important;
966
- margin-right: calc(var(--space-3) * -1) !important;
967
- }
968
-
969
- .-mx-4 {
970
- margin-left: calc(var(--space-4) * -1) !important;
971
- margin-right: calc(var(--space-4) * -1) !important;
972
- }
973
-
974
- .-mx-6 {
975
- margin-left: calc(var(--space-6) * -1) !important;
976
- margin-right: calc(var(--space-6) * -1) !important;
977
- }
978
-
979
- .-mx-8 {
980
- margin-left: calc(var(--space-8) * -1) !important;
981
- margin-right: calc(var(--space-8) * -1) !important;
982
- }
983
-
984
- .-mx-10 {
985
- margin-left: calc(var(--space-10) * -1) !important;
986
- margin-right: calc(var(--space-10) * -1) !important;
987
- }
988
-
989
- .-my-1 {
990
- margin-top: calc(var(--space-1) * -1) !important;
991
- margin-bottom: calc(var(--space-1) * -1) !important;
992
- }
993
-
994
- .-my-2 {
995
- margin-top: calc(var(--space-2) * -1) !important;
996
- margin-bottom: calc(var(--space-2) * -1) !important;
997
- }
998
-
999
- .-my-3 {
1000
- margin-top: calc(var(--space-3) * -1) !important;
1001
- margin-bottom: calc(var(--space-3) * -1) !important;
1002
- }
1003
-
1004
- .-my-4 {
1005
- margin-top: calc(var(--space-4) * -1) !important;
1006
- margin-bottom: calc(var(--space-4) * -1) !important;
1007
- }
1008
-
1009
- .-my-6 {
1010
- margin-top: calc(var(--space-6) * -1) !important;
1011
- margin-bottom: calc(var(--space-6) * -1) !important;
1012
- }
1013
-
1014
- .-my-8 {
1015
- margin-top: calc(var(--space-8) * -1) !important;
1016
- margin-bottom: calc(var(--space-8) * -1) !important;
1017
- }
1018
-
1019
- .-my-10 {
1020
- margin-top: calc(var(--space-10) * -1) !important;
1021
- margin-bottom: calc(var(--space-10) * -1) !important;
1022
- }
1023
-
1024
- .p-0 {
1025
- padding: 0 !important;
1026
- }
1027
-
1028
- .p-1 {
1029
- padding: var(--space-1) !important;
1030
- }
1031
-
1032
- .p-2 {
1033
- padding: var(--space-2) !important;
1034
- }
1035
-
1036
- .p-3 {
1037
- padding: var(--space-3) !important;
1038
- }
1039
-
1040
- .p-4 {
1041
- padding: var(--space-4) !important;
1042
- }
1043
-
1044
- .p-5 {
1045
- padding: var(--space-5) !important;
1046
- }
1047
-
1048
- .p-6 {
1049
- padding: var(--space-6) !important;
1050
- }
1051
-
1052
- .p-7 {
1053
- padding: var(--space-7) !important;
1054
- }
1055
-
1056
- .p-8 {
1057
- padding: var(--space-8) !important;
1058
- }
1059
-
1060
- .p-10 {
1061
- padding: var(--space-10) !important;
1062
- }
1063
-
1064
- .p-12 {
1065
- padding: var(--space-12) !important;
1066
- }
1067
-
1068
- .p-14 {
1069
- padding: var(--space-14) !important;
1070
- }
1071
-
1072
- .p-16 {
1073
- padding: var(--space-16) !important;
1074
- }
1075
-
1076
- .p-20 {
1077
- padding: var(--space-20) !important;
1078
- }
1079
-
1080
- .p-24 {
1081
- padding: var(--space-24) !important;
1082
- }
1083
-
1084
- .p-32 {
1085
- padding: var(--space-32) !important;
1086
- }
1087
-
1088
- .p-40 {
1089
- padding: var(--space-40) !important;
1090
- }
1091
-
1092
- .p-48 {
1093
- padding: var(--space-48) !important;
1094
- }
1095
-
1096
- .p-64 {
1097
- padding: var(--space-64) !important;
1098
- }
1099
-
1100
- .px-0 {
1101
- padding-left: 0 !important;
1102
- padding-right: 0 !important;
1103
- }
1104
-
1105
- .px-1 {
1106
- padding-left: var(--space-1) !important;
1107
- padding-right: var(--space-1) !important;
1108
- }
1109
-
1110
- .px-2 {
1111
- padding-left: var(--space-2) !important;
1112
- padding-right: var(--space-2) !important;
1113
- }
1114
-
1115
- .px-3 {
1116
- padding-left: var(--space-3) !important;
1117
- padding-right: var(--space-3) !important;
1118
- }
1119
-
1120
- .px-4 {
1121
- padding-left: var(--space-4) !important;
1122
- padding-right: var(--space-4) !important;
1123
- }
1124
-
1125
- .px-5 {
1126
- padding-left: var(--space-5) !important;
1127
- padding-right: var(--space-5) !important;
1128
- }
1129
-
1130
- .px-6 {
1131
- padding-left: var(--space-6) !important;
1132
- padding-right: var(--space-6) !important;
1133
- }
1134
-
1135
- .px-7 {
1136
- padding-left: var(--space-7) !important;
1137
- padding-right: var(--space-7) !important;
1138
- }
1139
-
1140
- .px-8 {
1141
- padding-left: var(--space-8) !important;
1142
- padding-right: var(--space-8) !important;
1143
- }
1144
-
1145
- .px-10 {
1146
- padding-left: var(--space-10) !important;
1147
- padding-right: var(--space-10) !important;
1148
- }
1149
-
1150
- .px-12 {
1151
- padding-left: var(--space-12) !important;
1152
- padding-right: var(--space-12) !important;
1153
- }
1154
-
1155
- .px-14 {
1156
- padding-left: var(--space-14) !important;
1157
- padding-right: var(--space-14) !important;
1158
- }
1159
-
1160
- .px-16 {
1161
- padding-left: var(--space-16) !important;
1162
- padding-right: var(--space-16) !important;
1163
- }
1164
-
1165
- .px-20 {
1166
- padding-left: var(--space-20) !important;
1167
- padding-right: var(--space-20) !important;
1168
- }
1169
-
1170
- .px-24 {
1171
- padding-left: var(--space-24) !important;
1172
- padding-right: var(--space-24) !important;
1173
- }
1174
-
1175
- .px-32 {
1176
- padding-left: var(--space-32) !important;
1177
- padding-right: var(--space-32) !important;
1178
- }
1179
-
1180
- .px-40 {
1181
- padding-left: var(--space-40) !important;
1182
- padding-right: var(--space-40) !important;
1183
- }
1184
-
1185
- .px-48 {
1186
- padding-left: var(--space-48) !important;
1187
- padding-right: var(--space-48) !important;
1188
- }
1189
-
1190
- .px-64 {
1191
- padding-left: var(--space-64) !important;
1192
- padding-right: var(--space-64) !important;
1193
- }
1194
-
1195
- .py-0 {
1196
- padding-top: 0 !important;
1197
- padding-bottom: 0 !important;
1198
- }
1199
-
1200
- .py-1 {
1201
- padding-top: var(--space-1) !important;
1202
- padding-bottom: var(--space-1) !important;
1203
- }
1204
-
1205
- .py-2 {
1206
- padding-top: var(--space-2) !important;
1207
- padding-bottom: var(--space-2) !important;
1208
- }
1209
-
1210
- .py-3 {
1211
- padding-top: var(--space-3) !important;
1212
- padding-bottom: var(--space-3) !important;
1213
- }
1214
-
1215
- .py-4 {
1216
- padding-top: var(--space-4) !important;
1217
- padding-bottom: var(--space-4) !important;
1218
- }
1219
-
1220
- .py-5 {
1221
- padding-top: var(--space-5) !important;
1222
- padding-bottom: var(--space-5) !important;
1223
- }
1224
-
1225
- .py-6 {
1226
- padding-top: var(--space-6) !important;
1227
- padding-bottom: var(--space-6) !important;
1228
- }
1229
-
1230
- .py-7 {
1231
- padding-top: var(--space-7) !important;
1232
- padding-bottom: var(--space-7) !important;
1233
- }
1234
-
1235
- .py-8 {
1236
- padding-top: var(--space-8) !important;
1237
- padding-bottom: var(--space-8) !important;
1238
- }
1239
-
1240
- .py-10 {
1241
- padding-top: var(--space-10) !important;
1242
- padding-bottom: var(--space-10) !important;
1243
- }
1244
-
1245
- .py-12 {
1246
- padding-top: var(--space-12) !important;
1247
- padding-bottom: var(--space-12) !important;
1248
- }
1249
-
1250
- .py-14 {
1251
- padding-top: var(--space-14) !important;
1252
- padding-bottom: var(--space-14) !important;
1253
- }
1254
-
1255
- .py-16 {
1256
- padding-top: var(--space-16) !important;
1257
- padding-bottom: var(--space-16) !important;
1258
- }
1259
-
1260
- .py-20 {
1261
- padding-top: var(--space-20) !important;
1262
- padding-bottom: var(--space-20) !important;
1263
- }
1264
-
1265
- .py-24 {
1266
- padding-top: var(--space-24) !important;
1267
- padding-bottom: var(--space-24) !important;
1268
- }
1269
-
1270
- .py-32 {
1271
- padding-top: var(--space-32) !important;
1272
- padding-bottom: var(--space-32) !important;
1273
- }
1274
-
1275
- .py-40 {
1276
- padding-top: var(--space-40) !important;
1277
- padding-bottom: var(--space-40) !important;
1278
- }
1279
-
1280
- .py-48 {
1281
- padding-top: var(--space-48) !important;
1282
- padding-bottom: var(--space-48) !important;
1283
- }
1284
-
1285
- .py-64 {
1286
- padding-top: var(--space-64) !important;
1287
- padding-bottom: var(--space-64) !important;
1288
- }
1289
-
1290
- .pt-0 {
1291
- padding-top: 0 !important;
1292
- }
1293
-
1294
- .pt-1 {
1295
- padding-top: var(--space-1) !important;
1296
- }
1297
-
1298
- .pt-2 {
1299
- padding-top: var(--space-2) !important;
1300
- }
1301
-
1302
- .pt-3 {
1303
- padding-top: var(--space-3) !important;
1304
- }
1305
-
1306
- .pt-4 {
1307
- padding-top: var(--space-4) !important;
1308
- }
1309
-
1310
- .pt-5 {
1311
- padding-top: var(--space-5) !important;
1312
- }
1313
-
1314
- .pt-6 {
1315
- padding-top: var(--space-6) !important;
1316
- }
1317
-
1318
- .pt-7 {
1319
- padding-top: var(--space-7) !important;
1320
- }
1321
-
1322
- .pt-8 {
1323
- padding-top: var(--space-8) !important;
1324
- }
1325
-
1326
- .pt-10 {
1327
- padding-top: var(--space-10) !important;
1328
- }
1329
-
1330
- .pt-12 {
1331
- padding-top: var(--space-12) !important;
1332
- }
1333
-
1334
- .pt-14 {
1335
- padding-top: var(--space-14) !important;
1336
- }
1337
-
1338
- .pt-16 {
1339
- padding-top: var(--space-16) !important;
1340
- }
1341
-
1342
- .pt-20 {
1343
- padding-top: var(--space-20) !important;
1344
- }
1345
-
1346
- .pt-24 {
1347
- padding-top: var(--space-24) !important;
1348
- }
1349
-
1350
- .pt-32 {
1351
- padding-top: var(--space-32) !important;
1352
- }
1353
-
1354
- .pt-40 {
1355
- padding-top: var(--space-40) !important;
1356
- }
1357
-
1358
- .pt-48 {
1359
- padding-top: var(--space-48) !important;
1360
- }
1361
-
1362
- .pt-64 {
1363
- padding-top: var(--space-64) !important;
1364
- }
1365
-
1366
- .pr-0 {
1367
- padding-right: 0 !important;
1368
- }
1369
-
1370
- .pr-1 {
1371
- padding-right: var(--space-1) !important;
1372
- }
1373
-
1374
- .pr-2 {
1375
- padding-right: var(--space-2) !important;
1376
- }
1377
-
1378
- .pr-3 {
1379
- padding-right: var(--space-3) !important;
1380
- }
1381
-
1382
- .pr-4 {
1383
- padding-right: var(--space-4) !important;
1384
- }
1385
-
1386
- .pr-5 {
1387
- padding-right: var(--space-5) !important;
1388
- }
1389
-
1390
- .pr-6 {
1391
- padding-right: var(--space-6) !important;
1392
- }
1393
-
1394
- .pr-7 {
1395
- padding-right: var(--space-7) !important;
1396
- }
1397
-
1398
- .pr-8 {
1399
- padding-right: var(--space-8) !important;
1400
- }
1401
-
1402
- .pr-10 {
1403
- padding-right: var(--space-10) !important;
1404
- }
1405
-
1406
- .pr-12 {
1407
- padding-right: var(--space-12) !important;
1408
- }
1409
-
1410
- .pr-14 {
1411
- padding-right: var(--space-14) !important;
1412
- }
1413
-
1414
- .pr-16 {
1415
- padding-right: var(--space-16) !important;
1416
- }
1417
-
1418
- .pr-20 {
1419
- padding-right: var(--space-20) !important;
1420
- }
1421
-
1422
- .pr-24 {
1423
- padding-right: var(--space-24) !important;
1424
- }
1425
-
1426
- .pr-32 {
1427
- padding-right: var(--space-32) !important;
1428
- }
1429
-
1430
- .pr-40 {
1431
- padding-right: var(--space-40) !important;
1432
- }
1433
-
1434
- .pr-48 {
1435
- padding-right: var(--space-48) !important;
1436
- }
1437
-
1438
- .pr-64 {
1439
- padding-right: var(--space-64) !important;
1440
- }
1441
-
1442
- .pb-0 {
1443
- padding-bottom: 0 !important;
1444
- }
1445
-
1446
- .pb-1 {
1447
- padding-bottom: var(--space-1) !important;
1448
- }
1449
-
1450
- .pb-2 {
1451
- padding-bottom: var(--space-2) !important;
1452
- }
1453
-
1454
- .pb-3 {
1455
- padding-bottom: var(--space-3) !important;
1456
- }
1457
-
1458
- .pb-4 {
1459
- padding-bottom: var(--space-4) !important;
1460
- }
1461
-
1462
- .pb-5 {
1463
- padding-bottom: var(--space-5) !important;
1464
- }
1465
-
1466
- .pb-6 {
1467
- padding-bottom: var(--space-6) !important;
1468
- }
1469
-
1470
- .pb-7 {
1471
- padding-bottom: var(--space-7) !important;
1472
- }
1473
-
1474
- .pb-8 {
1475
- padding-bottom: var(--space-8) !important;
1476
- }
1477
-
1478
- .pb-10 {
1479
- padding-bottom: var(--space-10) !important;
1480
- }
1481
-
1482
- .pb-12 {
1483
- padding-bottom: var(--space-12) !important;
1484
- }
1485
-
1486
- .pb-14 {
1487
- padding-bottom: var(--space-14) !important;
1488
- }
1489
-
1490
- .pb-16 {
1491
- padding-bottom: var(--space-16) !important;
1492
- }
1493
-
1494
- .pb-20 {
1495
- padding-bottom: var(--space-20) !important;
1496
- }
1497
-
1498
- .pb-24 {
1499
- padding-bottom: var(--space-24) !important;
1500
- }
1501
-
1502
- .pb-32 {
1503
- padding-bottom: var(--space-32) !important;
1504
- }
1505
-
1506
- .pb-40 {
1507
- padding-bottom: var(--space-40) !important;
1508
- }
1509
-
1510
- .pb-48 {
1511
- padding-bottom: var(--space-48) !important;
1512
- }
1513
-
1514
- .pb-64 {
1515
- padding-bottom: var(--space-64) !important;
1516
- }
1517
-
1518
- .pl-0 {
1519
- padding-left: 0 !important;
1520
- }
1521
-
1522
- .pl-1 {
1523
- padding-left: var(--space-1) !important;
1524
- }
1525
-
1526
- .pl-2 {
1527
- padding-left: var(--space-2) !important;
1528
- }
1529
-
1530
- .pl-3 {
1531
- padding-left: var(--space-3) !important;
1532
- }
1533
-
1534
- .pl-4 {
1535
- padding-left: var(--space-4) !important;
1536
- }
1537
-
1538
- .pl-5 {
1539
- padding-left: var(--space-5) !important;
1540
- }
1541
-
1542
- .pl-6 {
1543
- padding-left: var(--space-6) !important;
1544
- }
1545
-
1546
- .pl-7 {
1547
- padding-left: var(--space-7) !important;
1548
- }
1549
-
1550
- .pl-8 {
1551
- padding-left: var(--space-8) !important;
1552
- }
1553
-
1554
- .pl-10 {
1555
- padding-left: var(--space-10) !important;
1556
- }
1557
-
1558
- .pl-12 {
1559
- padding-left: var(--space-12) !important;
1560
- }
1561
-
1562
- .pl-14 {
1563
- padding-left: var(--space-14) !important;
1564
- }
1565
-
1566
- .pl-16 {
1567
- padding-left: var(--space-16) !important;
1568
- }
1569
-
1570
- .pl-20 {
1571
- padding-left: var(--space-20) !important;
1572
- }
1573
-
1574
- .pl-24 {
1575
- padding-left: var(--space-24) !important;
1576
- }
1577
-
1578
- .pl-32 {
1579
- padding-left: var(--space-32) !important;
1580
- }
1581
-
1582
- .pl-40 {
1583
- padding-left: var(--space-40) !important;
1584
- }
1585
-
1586
- .pl-48 {
1587
- padding-left: var(--space-48) !important;
1588
- }
1589
-
1590
- .pl-64 {
1591
- padding-left: var(--space-64) !important;
1592
- }
1593
-
1594
- /* ---------------------------------------------------------
1595
- 5. GAP UTILITIES - FULL SPACE SCALE
1596
- --------------------------------------------------------- */
1597
-
1598
- .gap-0 {
1599
- gap: 0;
1600
- }
1601
-
1602
- .gap-1 {
1603
- gap: var(--space-1);
1604
- }
1605
-
1606
- .gap-2 {
1607
- gap: var(--space-2);
1608
- }
1609
-
1610
- .gap-3 {
1611
- gap: var(--space-3);
1612
- }
1613
-
1614
- .gap-4 {
1615
- gap: var(--space-4);
1616
- }
1617
-
1618
- .gap-5 {
1619
- gap: var(--space-5);
1620
- }
1621
-
1622
- .gap-6 {
1623
- gap: var(--space-6);
1624
- }
1625
-
1626
- .gap-7 {
1627
- gap: var(--space-7);
1628
- }
1629
-
1630
- .gap-8 {
1631
- gap: var(--space-8);
1632
- }
1633
-
1634
- .gap-10 {
1635
- gap: var(--space-10);
1636
- }
1637
-
1638
- .gap-12 {
1639
- gap: var(--space-12);
1640
- }
1641
-
1642
- .gap-14 {
1643
- gap: var(--space-14);
1644
- }
1645
-
1646
- .gap-16 {
1647
- gap: var(--space-16);
1648
- }
1649
-
1650
- .gap-20 {
1651
- gap: var(--space-20);
1652
- }
1653
-
1654
- .gap-24 {
1655
- gap: var(--space-24);
1656
- }
1657
-
1658
- .gap-32 {
1659
- gap: var(--space-32);
1660
- }
1661
-
1662
- .gap-40 {
1663
- gap: var(--space-40);
1664
- }
1665
-
1666
- .gap-48 {
1667
- gap: var(--space-48);
1668
- }
1669
-
1670
- .gap-64 {
1671
- gap: var(--space-64);
1672
- }
1673
-
1674
- .gap-x-0 {
1675
- -moz-column-gap: 0;
1676
- column-gap: 0;
1677
- }
1678
-
1679
- .gap-x-1 {
1680
- -moz-column-gap: var(--space-1);
1681
- column-gap: var(--space-1);
1682
- }
1683
-
1684
- .gap-x-2 {
1685
- -moz-column-gap: var(--space-2);
1686
- column-gap: var(--space-2);
1687
- }
1688
-
1689
- .gap-x-3 {
1690
- -moz-column-gap: var(--space-3);
1691
- column-gap: var(--space-3);
1692
- }
1693
-
1694
- .gap-x-4 {
1695
- -moz-column-gap: var(--space-4);
1696
- column-gap: var(--space-4);
1697
- }
1698
-
1699
- .gap-x-5 {
1700
- -moz-column-gap: var(--space-5);
1701
- column-gap: var(--space-5);
1702
- }
1703
-
1704
- .gap-x-6 {
1705
- -moz-column-gap: var(--space-6);
1706
- column-gap: var(--space-6);
1707
- }
1708
-
1709
- .gap-x-7 {
1710
- -moz-column-gap: var(--space-7);
1711
- column-gap: var(--space-7);
1712
- }
1713
-
1714
- .gap-x-8 {
1715
- -moz-column-gap: var(--space-8);
1716
- column-gap: var(--space-8);
1717
- }
1718
-
1719
- .gap-x-10 {
1720
- -moz-column-gap: var(--space-10);
1721
- column-gap: var(--space-10);
1722
- }
1723
-
1724
- .gap-x-12 {
1725
- -moz-column-gap: var(--space-12);
1726
- column-gap: var(--space-12);
1727
- }
1728
-
1729
- .gap-x-14 {
1730
- -moz-column-gap: var(--space-14);
1731
- column-gap: var(--space-14);
1732
- }
1733
-
1734
- .gap-x-16 {
1735
- -moz-column-gap: var(--space-16);
1736
- column-gap: var(--space-16);
1737
- }
1738
-
1739
- .gap-x-20 {
1740
- -moz-column-gap: var(--space-20);
1741
- column-gap: var(--space-20);
1742
- }
1743
-
1744
- .gap-x-24 {
1745
- -moz-column-gap: var(--space-24);
1746
- column-gap: var(--space-24);
1747
- }
1748
-
1749
- .gap-x-32 {
1750
- -moz-column-gap: var(--space-32);
1751
- column-gap: var(--space-32);
1752
- }
1753
-
1754
- .gap-x-40 {
1755
- -moz-column-gap: var(--space-40);
1756
- column-gap: var(--space-40);
1757
- }
1758
-
1759
- .gap-x-48 {
1760
- -moz-column-gap: var(--space-48);
1761
- column-gap: var(--space-48);
1762
- }
1763
-
1764
- .gap-x-64 {
1765
- -moz-column-gap: var(--space-64);
1766
- column-gap: var(--space-64);
1767
- }
1768
-
1769
- .gap-y-0 {
1770
- row-gap: 0;
1771
- }
1772
-
1773
- .gap-y-1 {
1774
- row-gap: var(--space-1);
1775
- }
1776
-
1777
- .gap-y-2 {
1778
- row-gap: var(--space-2);
1779
- }
1780
-
1781
- .gap-y-3 {
1782
- row-gap: var(--space-3);
1783
- }
1784
-
1785
- .gap-y-4 {
1786
- row-gap: var(--space-4);
1787
- }
1788
-
1789
- .gap-y-5 {
1790
- row-gap: var(--space-5);
1791
- }
1792
-
1793
- .gap-y-6 {
1794
- row-gap: var(--space-6);
1795
- }
1796
-
1797
- .gap-y-7 {
1798
- row-gap: var(--space-7);
1799
- }
1800
-
1801
- .gap-y-8 {
1802
- row-gap: var(--space-8);
1803
- }
1804
-
1805
- .gap-y-10 {
1806
- row-gap: var(--space-10);
1807
- }
1808
-
1809
- .gap-y-12 {
1810
- row-gap: var(--space-12);
1811
- }
1812
-
1813
- .gap-y-14 {
1814
- row-gap: var(--space-14);
1815
- }
1816
-
1817
- .gap-y-16 {
1818
- row-gap: var(--space-16);
1819
- }
1820
-
1821
- .gap-y-20 {
1822
- row-gap: var(--space-20);
1823
- }
1824
-
1825
- .gap-y-24 {
1826
- row-gap: var(--space-24);
1827
- }
1828
-
1829
- .gap-y-32 {
1830
- row-gap: var(--space-32);
1831
- }
1832
-
1833
- .gap-y-40 {
1834
- row-gap: var(--space-40);
1835
- }
1836
-
1837
- .gap-y-48 {
1838
- row-gap: var(--space-48);
1839
- }
1840
-
1841
- .gap-y-64 {
1842
- row-gap: var(--space-64);
1843
- }
1844
-
1845
- /* ---------------------------------------------------------
1846
- 6. TYPOGRAPHY & TEXT DECORATION
1847
- --------------------------------------------------------- */
1848
-
1849
- .text-left {
1850
- text-align: left !important;
1851
- }
1852
-
1853
- .text-center {
1854
- text-align: center !important;
1855
- }
1856
-
1857
- .text-right {
1858
- text-align: right !important;
1859
- }
1860
-
1861
- .text-nowrap {
1862
- white-space: nowrap !important;
1863
- }
1864
-
1865
- .text-wrap {
1866
- white-space: normal !important;
1867
- }
1868
-
1869
- .whitespace-normal {
1870
- white-space: normal !important;
1871
- }
1872
-
1873
- .whitespace-nowrap {
1874
- white-space: nowrap !important;
1875
- }
1876
-
1877
- .whitespace-pre {
1878
- white-space: pre !important;
1879
- }
1880
-
1881
- .whitespace-pre-line {
1882
- white-space: pre-line !important;
1883
- }
1884
-
1885
- .text-xxxs {
1886
- font-size: var(--text-xxxs);
1887
- }
1888
-
1889
- .text-xxs {
1890
- font-size: var(--text-xxs);
1891
- }
1892
-
1893
- .text-xs {
1894
- font-size: var(--text-xs);
1895
- }
1896
-
1897
- .text-sm {
1898
- font-size: var(--text-sm);
1899
- }
1900
-
1901
- .text-base {
1902
- font-size: var(--text-base);
1903
- }
1904
-
1905
- .text-md {
1906
- font-size: var(--text-md);
1907
- }
1908
-
1909
- .text-lg {
1910
- font-size: var(--text-lg);
1911
- }
1912
-
1913
- .text-xl {
1914
- font-size: var(--text-xl);
1915
- }
1916
-
1917
- .text-2xl {
1918
- font-size: var(--text-2xl);
1919
- }
1920
-
1921
- .text-3xl {
1922
- font-size: var(--text-3xl);
1923
- }
1924
-
1925
- .text-4xl {
1926
- font-size: var(--text-4xl);
1927
- }
1928
-
1929
- .leading-tight {
1930
- line-height: var(--line-height-tight);
1931
- }
1932
-
1933
- .leading-snug {
1934
- line-height: var(--line-height-snug);
1935
- }
1936
-
1937
- .leading-normal {
1938
- line-height: var(--line-height-normal);
1939
- }
1940
-
1941
- .leading-relaxed {
1942
- line-height: var(--line-height-relaxed);
1943
- }
1944
-
1945
- .font-normal {
1946
- font-weight: 400 !important;
1947
- }
1948
-
1949
- .font-medium {
1950
- font-weight: 500 !important;
1951
- }
1952
-
1953
- .font-semibold {
1954
- font-weight: 600 !important;
1955
- }
1956
-
1957
- .font-bold {
1958
- font-weight: 700 !important;
1959
- }
1960
-
1961
- .tracking-tight {
1962
- letter-spacing: -0.02em;
1963
- }
1964
-
1965
- .tracking-normal {
1966
- letter-spacing: 0;
1967
- }
1968
-
1969
- .tracking-wide {
1970
- letter-spacing: 0.08em;
1971
- }
1972
-
1973
- .uppercase {
1974
- text-transform: uppercase;
1975
- }
1976
-
1977
- .lowercase {
1978
- text-transform: lowercase;
1979
- }
1980
-
1981
- .capitalize {
1982
- text-transform: capitalize;
1983
- }
1984
-
1985
- .underline {
1986
- -webkit-text-decoration: underline;
1987
- text-decoration: underline;
1988
- }
1989
-
1990
- .line-through {
1991
- -webkit-text-decoration: line-through;
1992
- text-decoration: line-through;
1993
- }
1994
-
1995
- .no-underline {
1996
- -webkit-text-decoration: none;
1997
- text-decoration: none;
1998
- }
1999
-
2000
- .text-muted {
2001
- color: var(--color-text-muted) !important;
2002
- }
2003
-
2004
- .text-soft {
2005
- color: var(--color-text-soft) !important;
2006
- }
2007
-
2008
- .text-strong {
2009
- color: var(--color-text) !important;
2010
- }
2011
-
2012
- .text-on-soft {
2013
- color: var(--color-text-on-soft) !important;
2014
- }
2015
-
2016
- .text-on-strong {
2017
- color: var(--color-text-on-strong) !important;
2018
- }
2019
-
2020
- .text-body {
2021
- font-family: var(--font-family-sans), sans-serif;
2022
- font-size: var(--text-base);
2023
- line-height: var(--line-height-normal);
2024
- color: var(--color-text);
2025
- }
2026
-
2027
- .text-body-soft {
2028
- font-family: var(--font-family-sans), sans-serif;
2029
- font-size: var(--text-base);
2030
- line-height: var(--line-height-normal);
2031
- color: var(--color-text-soft);
2032
- }
2033
-
2034
- .text-body-muted {
2035
- font-family: var(--font-family-sans), sans-serif;
2036
- font-size: var(--text-base);
2037
- line-height: var(--line-height-normal);
2038
- color: var(--color-text-muted);
2039
- }
2040
-
2041
- .text-body-strong {
2042
- font-family: var(--font-family-sans), sans-serif;
2043
- font-size: var(--text-base);
2044
- font-weight: 600;
2045
- line-height: var(--line-height-normal);
2046
- color: var(--color-text);
2047
- }
2048
-
2049
- .text-body-sm {
2050
- font-family: var(--font-family-sans), sans-serif;
2051
- font-size: var(--text-sm);
2052
- line-height: var(--line-height-normal);
2053
- color: var(--color-text);
2054
- }
2055
-
2056
- .text-body-sm-muted {
2057
- font-family: var(--font-family-sans), sans-serif;
2058
- font-size: var(--text-sm);
2059
- line-height: var(--line-height-normal);
2060
- color: var(--color-text-muted);
2061
- }
2062
-
2063
- .text-body-sm-soft {
2064
- font-family: var(--font-family-sans), sans-serif;
2065
- font-size: var(--text-sm);
2066
- line-height: var(--line-height-normal);
2067
- color: var(--color-text-soft);
2068
- }
2069
-
2070
- .text-body-sm-strong {
2071
- font-family: var(--font-family-sans), sans-serif;
2072
- font-size: var(--text-sm);
2073
- font-weight: 600;
2074
- line-height: var(--line-height-normal);
2075
- color: var(--color-text);
2076
- }
2077
-
2078
- .text-mono {
2079
- font-family: var(--font-family-mono), monospace;
2080
- font-size: var(--text-sm);
2081
- line-height: var(--line-height-normal);
2082
- color: var(--color-text);
2083
- }
2084
-
2085
- .text-mono-soft {
2086
- font-family: var(--font-family-mono), monospace;
2087
- font-size: var(--text-sm);
2088
- line-height: var(--line-height-normal);
2089
- color: var(--color-text-soft);
2090
- }
2091
-
2092
- .text-mono-muted {
2093
- font-family: var(--font-family-mono), monospace;
2094
- font-size: var(--text-sm);
2095
- line-height: var(--line-height-normal);
2096
- color: var(--color-text-muted);
2097
- }
2098
-
2099
- .text-mono-strong {
2100
- font-family: var(--font-family-mono), monospace;
2101
- font-size: var(--text-sm);
2102
- font-weight: 600;
2103
- line-height: var(--line-height-normal);
2104
- color: var(--color-text);
2105
- }
2106
-
2107
- /* ---------------------------------------------------------
2108
- 7. WIDTH / HEIGHT / ASPECT RATIO / OBJECT-FIT
2109
- --------------------------------------------------------- */
2110
-
2111
- .w-auto {
2112
- width: auto !important;
2113
- }
2114
-
2115
- .w-full {
2116
- width: 100% !important;
2117
- }
2118
-
2119
- .w-half {
2120
- width: 50% !important;
2121
- }
2122
-
2123
- .w-min {
2124
- width: -moz-min-content !important;
2125
- width: min-content !important;
2126
- }
2127
-
2128
- .w-max {
2129
- width: -moz-max-content !important;
2130
- width: max-content !important;
2131
- }
2132
-
2133
- .w-fit {
2134
- width: -moz-fit-content !important;
2135
- width: fit-content !important;
2136
- }
2137
-
2138
- .max-w-xs {
2139
- max-width: 20rem;
2140
- }
2141
-
2142
- .max-w-sm {
2143
- max-width: 28rem;
2144
- }
2145
-
2146
- .max-w-md {
2147
- max-width: 36rem;
2148
- }
2149
-
2150
- .max-w-lg {
2151
- max-width: 48rem;
2152
- }
2153
-
2154
- .max-w-xl {
2155
- max-width: 64rem;
2156
- }
2157
-
2158
- .max-w-full {
2159
- max-width: 100%;
2160
- }
2161
-
2162
- .max-content-sm {
2163
- max-width: var(--content-width-sm);
2164
- }
2165
-
2166
- .max-content-md {
2167
- max-width: var(--content-width-md);
2168
- }
2169
-
2170
- .max-content-lg {
2171
- max-width: var(--content-width-lg);
2172
- }
2173
-
2174
- .max-content-xl {
2175
- max-width: var(--content-width-xl);
2176
- }
2177
-
2178
- .max-content-2xl {
2179
- max-width: var(--content-width-2xl);
2180
- }
2181
-
2182
- .h-auto {
2183
- height: auto !important;
2184
- }
2185
-
2186
- .h-full {
2187
- height: 100% !important;
2188
- }
2189
-
2190
- .h-screen {
2191
- height: 100vh !important;
2192
- }
2193
-
2194
- .h-fit {
2195
- height: -moz-fit-content !important;
2196
- height: fit-content !important;
2197
- }
2198
-
2199
- .min-h-0 {
2200
- min-height: 0 !important;
2201
- }
2202
-
2203
- .min-h-full {
2204
- min-height: 100% !important;
2205
- }
2206
-
2207
- .min-h-screen {
2208
- min-height: 100vh !important;
2209
- }
2210
-
2211
- .aspect-square {
2212
- aspect-ratio: 1 / 1;
2213
- }
2214
-
2215
- .aspect-video {
2216
- aspect-ratio: 16 / 9;
2217
- }
2218
-
2219
- .aspect-landscape {
2220
- aspect-ratio: 4 / 3;
2221
- }
2222
-
2223
- .aspect-portrait {
2224
- aspect-ratio: 3 / 4;
2225
- }
2226
-
2227
- .object-contain {
2228
- -o-object-fit: contain;
2229
- object-fit: contain;
2230
- }
2231
-
2232
- .object-cover {
2233
- -o-object-fit: cover;
2234
- object-fit: cover;
2235
- }
2236
-
2237
- .object-fill {
2238
- -o-object-fit: fill;
2239
- object-fit: fill;
2240
- }
2241
-
2242
- .object-none {
2243
- -o-object-fit: none;
2244
- object-fit: none;
2245
- }
2246
-
2247
- .object-scale-down {
2248
- -o-object-fit: scale-down;
2249
- object-fit: scale-down;
2250
- }
2251
-
2252
- /* ---------------------------------------------------------
2253
- 8. BORDER / RADIUS / SHADOW
2254
- --------------------------------------------------------- */
2255
-
2256
- .border {
2257
- border: 1px solid var(--color-border-subtle) !important;
2258
- }
2259
-
2260
- .border-strong {
2261
- border: 1px solid var(--color-border-strong) !important;
2262
- }
2263
-
2264
- .border-muted {
2265
- border: 1px solid var(--color-muted-border) !important;
2266
- }
2267
-
2268
- .border-top {
2269
- border-top: 1px solid var(--color-border-subtle) !important;
2270
- }
2271
-
2272
- .border-bottom {
2273
- border-bottom: 1px solid var(--color-border-subtle) !important;
2274
- }
2275
-
2276
- .border-left {
2277
- border-left: 1px solid var(--color-border-subtle) !important;
2278
- }
2279
-
2280
- .border-right {
2281
- border-right: 1px solid var(--color-border-subtle) !important;
2282
- }
2283
-
2284
- .radius-none {
2285
- border-radius: var(--radius-none) !important;
2286
- }
2287
-
2288
- .radius-xs {
2289
- border-radius: var(--radius-xs) !important;
2290
- }
2291
-
2292
- .radius-sm {
2293
- border-radius: var(--radius-sm) !important;
2294
- }
2295
-
2296
- .radius-md {
2297
- border-radius: var(--radius-md) !important;
2298
- }
2299
-
2300
- .radius-lg {
2301
- border-radius: var(--radius-lg) !important;
2302
- }
2303
-
2304
- .radius-xl {
2305
- border-radius: var(--radius-xl) !important;
2306
- }
2307
-
2308
- .radius-full {
2309
- border-radius: var(--radius-full) !important;
2310
- }
2311
-
2312
- .shadow-1 {
2313
- box-shadow: var(--shadow-1) !important;
2314
- }
2315
-
2316
- .shadow-2 {
2317
- box-shadow: var(--shadow-2) !important;
2318
- }
2319
-
2320
- .shadow-3 {
2321
- box-shadow: var(--shadow-3) !important;
2322
- }
2323
-
2324
- .shadow-none {
2325
- box-shadow: none !important;
2326
- }
2327
-
2328
- /* ---------------------------------------------------------
2329
- 9. BACKGROUND / SURFACE
2330
- --------------------------------------------------------- */
2331
-
2332
- .bg-surface {
2333
- background-color: var(--color-surface) !important;
2334
- }
2335
-
2336
- .bg-surface-soft {
2337
- background-color: var(--color-surface-subtle) !important;
2338
- }
2339
-
2340
- .bg-muted {
2341
- background-color: var(--color-muted-bg) !important;
2342
- }
2343
-
2344
- .bg-soft {
2345
- background-color: var(--color-bg-soft) !important;
2346
- }
2347
-
2348
- .bg-accent-soft {
2349
- background-color: var(--color-accent-soft) !important;
2350
- }
2351
-
2352
- .bg-success-soft {
2353
- background-color: var(--color-success-soft) !important;
2354
- }
2355
-
2356
- .bg-warning-soft {
2357
- background-color: var(--color-warning-soft) !important;
2358
- }
2359
-
2360
- .bg-danger-soft {
2361
- background-color: var(--color-danger-soft) !important;
2362
- }
2363
-
2364
- .bg-info-soft {
2365
- background-color: var(--color-info-soft) !important;
2366
- }
2367
-
2368
- .bg-brand {
2369
- background-color: var(--color-brand-ink) !important;
2370
- }
2371
-
2372
- /* ---------------------------------------------------------
2373
- 10. OPACITY, CURSOR, POINTER-EVENTS
2374
- --------------------------------------------------------- */
2375
-
2376
- .opacity-0 {
2377
- opacity: 0;
2378
- }
2379
-
2380
- .opacity-25 {
2381
- opacity: 0.25;
2382
- }
2383
-
2384
- .opacity-50 {
2385
- opacity: 0.5;
2386
- }
2387
-
2388
- .opacity-75 {
2389
- opacity: 0.75;
2390
- }
2391
-
2392
- .opacity-100 {
2393
- opacity: 1;
2394
- }
2395
-
2396
- .cursor-default {
2397
- cursor: default;
2398
- }
2399
-
2400
- .cursor-pointer {
2401
- cursor: pointer;
2402
- }
2403
-
2404
- .cursor-not-allowed {
2405
- cursor: not-allowed;
2406
- }
2407
-
2408
- .cursor-wait {
2409
- cursor: wait;
2410
- }
2411
-
2412
- .cursor-text {
2413
- cursor: text;
2414
- }
2415
-
2416
- .pointer-events-none {
2417
- pointer-events: none;
2418
- }
2419
-
2420
- .pointer-events-auto {
2421
- pointer-events: auto;
2422
- }
2423
-
2424
- /* ---------------------------------------------------------
2425
- 11. OVERFLOW / SCROLL
2426
- --------------------------------------------------------- */
2427
-
2428
- .overflow-hidden {
2429
- overflow: hidden !important;
2430
- }
2431
-
2432
- .overflow-auto {
2433
- overflow: auto !important;
2434
- }
2435
-
2436
- .overflow-x-auto {
2437
- overflow-x: auto !important;
2438
- }
2439
-
2440
- .overflow-y-auto {
2441
- overflow-y: auto !important;
2442
- }
2443
-
2444
- .scroll-x {
2445
- overflow-x: auto;
2446
- -webkit-overflow-scrolling: touch;
2447
- }
2448
-
2449
- .scroll-y {
2450
- overflow-y: auto;
2451
- -webkit-overflow-scrolling: touch;
2452
- }
2453
-
2454
- .scroll-smooth {
2455
- scroll-behavior: smooth;
2456
- }
2457
-
2458
- /* ---------------------------------------------------------
2459
- 12. POSITION / Z-INDEX
2460
- --------------------------------------------------------- */
2461
-
2462
- .relative {
2463
- position: relative !important;
2464
- }
2465
-
2466
- .absolute {
2467
- position: absolute !important;
2468
- }
2469
-
2470
- .fixed {
2471
- position: fixed !important;
2472
- }
2473
-
2474
- .sticky {
2475
- position: sticky !important;
2476
- }
2477
-
2478
- .top-0 {
2479
- top: 0;
2480
- }
2481
-
2482
- .right-0 {
2483
- right: 0;
2484
- }
2485
-
2486
- .bottom-0 {
2487
- bottom: 0;
2488
- }
2489
-
2490
- .left-0 {
2491
- left: 0;
2492
- }
2493
-
2494
- .inset-0 {
2495
- top: 0;
2496
- right: 0;
2497
- bottom: 0;
2498
- left: 0;
2499
- }
2500
-
2501
- .z-10 {
2502
- z-index: 10;
2503
- }
2504
-
2505
- .z-20 {
2506
- z-index: 20;
2507
- }
2508
-
2509
- .z-30 {
2510
- z-index: 30;
2511
- }
2512
-
2513
- .z-40 {
2514
- z-index: 40;
2515
- }
2516
-
2517
- .z-50 {
2518
- z-index: 50;
2519
- }
2520
-
2521
- .z-negative {
2522
- z-index: var(--z-negative);
2523
- }
2524
-
2525
- .z-base {
2526
- z-index: var(--z-base);
2527
- }
2528
-
2529
- .z-header {
2530
- z-index: var(--z-header);
2531
- }
2532
-
2533
- .z-backdrop {
2534
- z-index: var(--z-backdrop);
2535
- }
2536
-
2537
- .z-modal {
2538
- z-index: var(--z-modal);
2539
- }
2540
-
2541
- .z-drawer {
2542
- z-index: var(--z-drawer);
2543
- }
2544
-
2545
- .z-toast {
2546
- z-index: var(--z-toast);
2547
- }
2548
-
2549
- .z-tooltip {
2550
- z-index: var(--z-tooltip);
2551
- }
2552
-
2553
- /* ---------------------------------------------------------
2554
- 13. STACK / CLUSTER / BUTTON ROW / GUTTERS
2555
- --------------------------------------------------------- */
2556
-
2557
- .stack {
2558
- display: flex;
2559
- flex-direction: column;
2560
- gap: var(--space-3);
2561
- }
2562
-
2563
- .stack-tight {
2564
- display: flex;
2565
- flex-direction: column;
2566
- gap: var(--space-2);
2567
- }
2568
-
2569
- .stack-loose {
2570
- display: flex;
2571
- flex-direction: column;
2572
- gap: var(--space-4);
2573
- }
2574
-
2575
- .stack-sm {
2576
- display: flex;
2577
- flex-direction: column;
2578
- gap: var(--space-2);
2579
- }
2580
-
2581
- .stack-md {
2582
- display: flex;
2583
- flex-direction: column;
2584
- gap: var(--space-3);
2585
- }
2586
-
2587
- .stack-lg {
2588
- display: flex;
2589
- flex-direction: column;
2590
- gap: var(--space-4);
2591
- }
2592
-
2593
- .stack-xl {
2594
- display: flex;
2595
- flex-direction: column;
2596
- gap: var(--space-6);
2597
- }
2598
-
2599
- .inline-stack {
2600
- display: inline-flex;
2601
- flex-wrap: wrap;
2602
- gap: var(--space-2);
2603
- }
2604
-
2605
- .cluster {
2606
- display: flex;
2607
- flex-wrap: wrap;
2608
- align-items: center;
2609
- gap: var(--space-2);
2610
- }
2611
-
2612
- .button-row {
2613
- display: flex;
2614
- flex-wrap: wrap;
2615
- gap: var(--space-2);
2616
- }
2617
-
2618
- .gutter-none {
2619
- gap: 0;
2620
- }
2621
-
2622
- .gutter-sm {
2623
- gap: var(--space-2);
2624
- }
2625
-
2626
- .gutter-md {
2627
- gap: var(--space-3);
2628
- }
2629
-
2630
- .gutter-lg {
2631
- gap: var(--space-4);
2632
- }
2633
-
2634
- .gutter-xl {
2635
- gap: var(--space-6);
2636
- }
2637
-
2638
- /* ---------------------------------------------------------
2639
- 14. TEXT HELPERS (TRUNCATE / MULTILINE / MISC)
2640
- --------------------------------------------------------- */
2641
-
2642
- .truncate {
2643
- overflow: hidden;
2644
- text-overflow: ellipsis;
2645
- white-space: nowrap;
2646
- }
2647
-
2648
- .truncate-2,
2649
- .truncate-3,
2650
- .truncate-4 {
2651
- display: -webkit-box;
2652
- -webkit-box-orient: vertical;
2653
- overflow: hidden;
2654
- }
2655
-
2656
- .truncate-2 {
2657
- -webkit-line-clamp: 2;
2658
- }
2659
-
2660
- .truncate-3 {
2661
- -webkit-line-clamp: 3;
2662
- }
2663
-
2664
- .truncate-4 {
2665
- -webkit-line-clamp: 4;
2666
- }
2667
-
2668
- /* ---------------------------------------------------------
2669
- 15. INLINE SEMANTIC TEXT COLOURS
2670
- (For short inline phrases, labels, micro-copy)
2671
-
2672
- <p>
2673
- Build completed <span class="text-success">successfully</span>,
2674
- but with <span class="text-warning">2 warnings</span>.
2675
- </p>
2676
-
2677
- --------------------------------------------------------- */
2678
-
2679
- .text-info {
2680
- color: var(--semantic-info-text) !important;
2681
- }
2682
-
2683
- .text-success {
2684
- color: var(--semantic-success-text) !important;
2685
- }
2686
-
2687
- .text-warning {
2688
- color: var(--semantic-warning-text) !important;
2689
- }
2690
-
2691
- .text-danger {
2692
- color: var(--semantic-danger-text) !important;
2693
- }
2694
-
2695
- .text-info code,
2696
- .text-success code,
2697
- .text-warning code,
2698
- .text-danger code {
2699
- color: var(--color-text) !important;
2700
- }
2701
-
2702
- /* ---------------------------------------------------------
2703
- 16. GLOBAL INLINE CODE RESET
2704
- Safe baseline for all inline <code> elements.
2705
- Does not apply to <pre><code> blocks.
2706
- --------------------------------------------------------- */
2707
-
2708
- code:not(pre code) {
2709
- font-family: var(--font-family-mono), monospace;
2710
- font-size: 0.875em;
2711
- line-height: 1.2;
2712
-
2713
- padding: 0.15em 0.35em;
2714
- border-radius: var(--radius-sm);
2715
-
2716
- background-color: var(--code-inline-bg, var(--color-surface-subtle));
2717
- border: 1px solid var(--code-inline-border, var(--color-border-subtle));
2718
-
2719
- color: var(--color-text);
2720
- white-space: nowrap;
2721
- }
2722
-
2723
- /* ---------------------------------------------------------
2724
- 17. Layout Utilities (stack / flow / inline / cluster / grid)
2725
- These are local, composable layout patterns that complement
2726
- the structural layouts in layout.css (sidebar, split, layout-grid-*)
2727
- --------------------------------------------------------- */
2728
-
2729
- .layout-stack {
2730
- display: flex;
2731
- flex-direction: column;
2732
- gap: var(--component-gap-md);
2733
- }
2734
-
2735
- .layout-stack-sm {
2736
- display: flex;
2737
- flex-direction: column;
2738
- gap: var(--component-gap-xs);
2739
- }
2740
-
2741
- .layout-stack-lg {
2742
- display: flex;
2743
- flex-direction: column;
2744
- gap: var(--component-gap-lg);
2745
- }
2746
-
2747
- .layout-flow > * + * {
2748
- margin-top: var(--component-gap-md);
2749
- }
2750
-
2751
- .layout-flow-sm > * + * {
2752
- margin-top: var(--component-gap-xs);
2753
- }
2754
-
2755
- .layout-flow-lg > * + * {
2756
- margin-top: var(--component-gap-lg);
2757
- }
2758
-
2759
- .layout-inline {
2760
- display: flex;
2761
- flex-wrap: wrap;
2762
- gap: var(--component-gap-md);
2763
- align-items: center;
2764
- }
2765
-
2766
- .layout-inline-start {
2767
- display: flex;
2768
- flex-wrap: wrap;
2769
- gap: var(--component-gap-md);
2770
- align-items: flex-start;
2771
- }
2772
-
2773
- .layout-inline-end {
2774
- display: flex;
2775
- flex-wrap: wrap;
2776
- gap: var(--component-gap-md);
2777
- align-items: flex-end;
2778
- }
2779
-
2780
- .layout-cluster {
2781
- display: flex;
2782
- flex-wrap: wrap;
2783
- gap: var(--space-2);
2784
- align-items: center;
2785
- justify-content: flex-start;
2786
- }
2787
-
2788
- .layout-cluster-center {
2789
- display: flex;
2790
- flex-wrap: wrap;
2791
- gap: var(--space-2);
2792
- align-items: center;
2793
- justify-content: center;
2794
- }
2795
-
2796
- .layout-grid-inner {
2797
- display: grid;
2798
- grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
2799
- grid-gap: var(--gap-md);
2800
- gap: var(--gap-md);
2801
- }
2802
-
2803
- .layout-grid-inner-2 {
2804
- display: grid;
2805
- grid-template-columns: repeat(2, 1fr);
2806
- grid-gap: var(--gap-md);
2807
- gap: var(--gap-md);
2808
- }
2809
-
2810
- .layout-grid-inner-3 {
2811
- display: grid;
2812
- grid-template-columns: repeat(3, 1fr);
2813
- grid-gap: var(--gap-md);
2814
- gap: var(--gap-md);
2815
- }
2816
-
2817
- @media (max-width: 768px) {
2818
- .layout-grid-inner-2,
2819
- .layout-grid-inner-3 {
2820
- grid-template-columns: 1fr;
2821
- }
2822
- }
2823
-
2824
- /* ---------------------------------------------------------
2825
- 18. GRID ALIGNMENT UTILITIES
2826
- --------------------------------------------------------- */
2827
-
2828
- .grid-items-start {
2829
- align-items: start;
2830
- }
2831
-
2832
- .grid-items-center {
2833
- align-items: center;
2834
- }
2835
-
2836
- .grid-items-end {
2837
- align-items: end;
2838
- }
2839
-
2840
- .grid-items-stretch {
2841
- align-items: stretch;
2842
- }
2843
-
2844
- .grid-justify-start {
2845
- justify-items: start;
2846
- }
2847
-
2848
- .grid-justify-center {
2849
- justify-items: center;
2850
- }
2851
-
2852
- .grid-justify-end {
2853
- justify-items: end;
2854
- }
2855
-
2856
- .grid-justify-stretch {
2857
- justify-items: stretch;
2858
- }
2859
-
2860
- .grid-place-items-center {
2861
- align-items: center;
2862
- justify-items: center;
2863
- place-items: center;
2864
- }
2865
-
2866
- .grid-place-items-start {
2867
- align-items: start;
2868
- justify-items: start;
2869
- place-items: start;
2870
- }
2871
-
2872
- .grid-place-items-end {
2873
- align-items: end;
2874
- justify-items: end;
2875
- place-items: end;
2876
- }
2877
-
2878
- .grid-place-items-stretch {
2879
- align-items: stretch;
2880
- justify-items: stretch;
2881
- place-items: stretch;
2882
- }
2883
-
2884
- .justify-self-start {
2885
- justify-self: start;
2886
- }
2887
-
2888
- .justify-self-center {
2889
- justify-self: center;
2890
- }
2891
-
2892
- .justify-self-end {
2893
- justify-self: end;
2894
- }
2895
-
2896
- .justify-self-stretch {
2897
- justify-self: stretch;
2898
- }
2899
-
2900
- /* ---------------------------------------------------------
2901
- 19. RESPONSIVE GRID COLUMN UTILITIES
2902
- --------------------------------------------------------- */
2903
-
2904
- @media (max-width: 640px) {
2905
- .sm\:grid-cols-1 {
2906
- grid-template-columns: repeat(1, minmax(0, 1fr));
2907
- }
2908
-
2909
- .sm\:grid-cols-2 {
2910
- grid-template-columns: repeat(2, minmax(0, 1fr));
2911
- }
2912
-
2913
- .sm\:grid-cols-3 {
2914
- grid-template-columns: repeat(3, minmax(0, 1fr));
2915
- }
2916
-
2917
- .sm\:grid-cols-4 {
2918
- grid-template-columns: repeat(4, minmax(0, 1fr));
2919
- }
2920
-
2921
- .sm\:grid-cols-5 {
2922
- grid-template-columns: repeat(5, minmax(0, 1fr));
2923
- }
2924
-
2925
- .sm\:grid-cols-6 {
2926
- grid-template-columns: repeat(6, minmax(0, 1fr));
2927
- }
2928
-
2929
- .sm\:grid-cols-12 {
2930
- grid-template-columns: repeat(12, minmax(0, 1fr));
2931
- }
2932
- }
2933
-
2934
- @media (max-width: 768px) {
2935
- .md\:grid-cols-1 {
2936
- grid-template-columns: repeat(1, minmax(0, 1fr));
2937
- }
2938
-
2939
- .md\:grid-cols-2 {
2940
- grid-template-columns: repeat(2, minmax(0, 1fr));
2941
- }
2942
-
2943
- .md\:grid-cols-3 {
2944
- grid-template-columns: repeat(3, minmax(0, 1fr));
2945
- }
2946
-
2947
- .md\:grid-cols-4 {
2948
- grid-template-columns: repeat(4, minmax(0, 1fr));
2949
- }
2950
-
2951
- .md\:grid-cols-5 {
2952
- grid-template-columns: repeat(5, minmax(0, 1fr));
2953
- }
2954
-
2955
- .md\:grid-cols-6 {
2956
- grid-template-columns: repeat(6, minmax(0, 1fr));
2957
- }
2958
-
2959
- .md\:grid-cols-12 {
2960
- grid-template-columns: repeat(12, minmax(0, 1fr));
2961
- }
2962
- }
2963
-
2964
- @media (max-width: 1024px) {
2965
- .lg\:grid-cols-1 {
2966
- grid-template-columns: repeat(1, minmax(0, 1fr));
2967
- }
2968
-
2969
- .lg\:grid-cols-2 {
2970
- grid-template-columns: repeat(2, minmax(0, 1fr));
2971
- }
2972
-
2973
- .lg\:grid-cols-3 {
2974
- grid-template-columns: repeat(3, minmax(0, 1fr));
2975
- }
2976
-
2977
- .lg\:grid-cols-4 {
2978
- grid-template-columns: repeat(4, minmax(0, 1fr));
2979
- }
2980
-
2981
- .lg\:grid-cols-5 {
2982
- grid-template-columns: repeat(5, minmax(0, 1fr));
2983
- }
2984
-
2985
- .lg\:grid-cols-6 {
2986
- grid-template-columns: repeat(6, minmax(0, 1fr));
2987
- }
2988
-
2989
- .lg\:grid-cols-12 {
2990
- grid-template-columns: repeat(12, minmax(0, 1fr));
2991
- }
2992
- }
2993
-
2994
- @media (max-width: 1280px) {
2995
- .xl\:grid-cols-1 {
2996
- grid-template-columns: repeat(1, minmax(0, 1fr));
2997
- }
2998
-
2999
- .xl\:grid-cols-2 {
3000
- grid-template-columns: repeat(2, minmax(0, 1fr));
3001
- }
3002
-
3003
- .xl\:grid-cols-3 {
3004
- grid-template-columns: repeat(3, minmax(0, 1fr));
3005
- }
3006
-
3007
- .xl\:grid-cols-4 {
3008
- grid-template-columns: repeat(4, minmax(0, 1fr));
3009
- }
3010
-
3011
- .xl\:grid-cols-5 {
3012
- grid-template-columns: repeat(5, minmax(0, 1fr));
3013
- }
3014
-
3015
- .xl\:grid-cols-6 {
3016
- grid-template-columns: repeat(6, minmax(0, 1fr));
3017
- }
3018
-
3019
- .xl\:grid-cols-12 {
3020
- grid-template-columns: repeat(12, minmax(0, 1fr));
3021
- }
3022
- }
3023
-
3024
- /* ---------------------------------------------------------
3025
- 20. FLEX - BASE UTILITIES
3026
- --------------------------------------------------------- */
3027
-
3028
- .flex-row-reverse {
3029
- flex-direction: row-reverse;
3030
- }
3031
-
3032
- .flex-col {
3033
- flex-direction: column;
3034
- }
3035
-
3036
- .flex-col-reverse {
3037
- flex-direction: column-reverse;
3038
- }
3039
-
3040
- .flex-wrap-reverse {
3041
- flex-wrap: wrap-reverse;
3042
- }
3043
-
3044
- .content-start {
3045
- align-content: flex-start;
3046
- }
3047
-
3048
- .content-center {
3049
- align-content: center;
3050
- }
3051
-
3052
- .content-end {
3053
- align-content: flex-end;
3054
- }
3055
-
3056
- .content-between {
3057
- align-content: space-between;
3058
- }
3059
-
3060
- .content-around {
3061
- align-content: space-around;
3062
- }
3063
-
3064
- .content-evenly {
3065
- align-content: space-evenly;
3066
- }
3067
-
3068
- .self-auto {
3069
- align-self: auto;
3070
- }
3071
-
3072
- .self-stretch {
3073
- align-self: stretch;
3074
- }
3075
-
3076
- .flex-initial {
3077
- flex: 0 1 auto;
3078
- }
3079
-
3080
- .flex-none {
3081
- flex: none;
3082
- }
3083
-
3084
- /* ---------------------------------------------------------
3085
- 21. RESPONSIVE GRID COLUMN UTILITIES
3086
- --------------------------------------------------------- */
3087
-
3088
- @media (max-width: 640px) {
3089
-
3090
- .sm\:flex {
3091
- display: flex;
3092
- }
3093
-
3094
- .sm\:inline-flex {
3095
- display: inline-flex;
3096
- }
3097
-
3098
- .sm\:flex-row {
3099
- flex-direction: row;
3100
- }
3101
-
3102
- .sm\:flex-row-reverse {
3103
- flex-direction: row-reverse;
3104
- }
3105
-
3106
- .sm\:flex-col {
3107
- flex-direction: column;
3108
- }
3109
-
3110
- .sm\:flex-col-reverse {
3111
- flex-direction: column-reverse;
3112
- }
3113
-
3114
- .sm\:flex-wrap {
3115
- flex-wrap: wrap;
3116
- }
3117
-
3118
- .sm\:flex-nowrap {
3119
- flex-wrap: nowrap;
3120
- }
3121
-
3122
- .sm\:flex-wrap-reverse {
3123
- flex-wrap: wrap-reverse;
3124
- }
3125
-
3126
- .sm\:justify-start {
3127
- justify-content: flex-start;
3128
- }
3129
-
3130
- .sm\:justify-center {
3131
- justify-content: center;
3132
- }
3133
-
3134
- .sm\:justify-end {
3135
- justify-content: flex-end;
3136
- }
3137
-
3138
- .sm\:justify-between {
3139
- justify-content: space-between;
3140
- }
3141
-
3142
- .sm\:justify-around {
3143
- justify-content: space-around;
3144
- }
3145
-
3146
- .sm\:justify-evenly {
3147
- justify-content: space-evenly;
3148
- }
3149
-
3150
- .sm\:items-start {
3151
- align-items: flex-start;
3152
- }
3153
-
3154
- .sm\:items-center {
3155
- align-items: center;
3156
- }
3157
-
3158
- .sm\:items-end {
3159
- align-items: flex-end;
3160
- }
3161
-
3162
- .sm\:items-stretch {
3163
- align-items: stretch;
3164
- }
3165
-
3166
- .sm\:flex-1 {
3167
- flex: 1 1 0%;
3168
- }
3169
-
3170
- .sm\:flex-none {
3171
- flex: none;
3172
- }
3173
- }
3174
-
3175
- @media (max-width: 768px) {
3176
-
3177
- .md\:flex {
3178
- display: flex;
3179
- }
3180
-
3181
- .md\:inline-flex {
3182
- display: inline-flex;
3183
- }
3184
-
3185
- .md\:flex-row {
3186
- flex-direction: row;
3187
- }
3188
-
3189
- .md\:flex-row-reverse {
3190
- flex-direction: row-reverse;
3191
- }
3192
-
3193
- .md\:flex-col {
3194
- flex-direction: column;
3195
- }
3196
-
3197
- .md\:flex-col-reverse {
3198
- flex-direction: column-reverse;
3199
- }
3200
-
3201
- .md\:flex-wrap {
3202
- flex-wrap: wrap;
3203
- }
3204
-
3205
- .md\:flex-nowrap {
3206
- flex-wrap: nowrap;
3207
- }
3208
-
3209
- .md\:flex-wrap-reverse {
3210
- flex-wrap: wrap-reverse;
3211
- }
3212
-
3213
- .md\:justify-start {
3214
- justify-content: flex-start;
3215
- }
3216
-
3217
- .md\:justify-center {
3218
- justify-content: center;
3219
- }
3220
-
3221
- .md\:justify-end {
3222
- justify-content: flex-end;
3223
- }
3224
-
3225
- .md\:justify-between {
3226
- justify-content: space-between;
3227
- }
3228
-
3229
- .md\:justify-around {
3230
- justify-content: space-around;
3231
- }
3232
-
3233
- .md\:justify-evenly {
3234
- justify-content: space-evenly;
3235
- }
3236
-
3237
- .md\:items-start {
3238
- align-items: flex-start;
3239
- }
3240
-
3241
- .md\:items-center {
3242
- align-items: center;
3243
- }
3244
-
3245
- .md\:items-end {
3246
- align-items: flex-end;
3247
- }
3248
-
3249
- .md\:items-stretch {
3250
- align-items: stretch;
3251
- }
3252
-
3253
- .md\:flex-1 {
3254
- flex: 1 1 0;
3255
- }
3256
-
3257
- .md\:flex-none {
3258
- flex: none;
3259
- }
3260
- }
3261
-
3262
- @media (max-width: 1024px) {
3263
-
3264
- .lg\:flex {
3265
- display: flex;
3266
- }
3267
-
3268
- .lg\:inline-flex {
3269
- display: inline-flex;
3270
- }
3271
-
3272
- .lg\:flex-row {
3273
- flex-direction: row;
3274
- }
3275
-
3276
- .lg\:flex-row-reverse {
3277
- flex-direction: row-reverse;
3278
- }
3279
-
3280
- .lg\:flex-col {
3281
- flex-direction: column;
3282
- }
3283
-
3284
- .lg\:flex-col-reverse {
3285
- flex-direction: column-reverse;
3286
- }
3287
-
3288
- .lg\:flex-wrap {
3289
- flex-wrap: wrap;
3290
- }
3291
-
3292
- .lg\:flex-nowrap {
3293
- flex-wrap: nowrap;
3294
- }
3295
-
3296
- .lg\:flex-wrap-reverse {
3297
- flex-wrap: wrap-reverse;
3298
- }
3299
-
3300
- .lg\:justify-start {
3301
- justify-content: flex-start;
3302
- }
3303
-
3304
- .lg\:justify-center {
3305
- justify-content: center;
3306
- }
3307
-
3308
- .lg\:justify-end {
3309
- justify-content: flex-end;
3310
- }
3311
-
3312
- .lg\:justify-between {
3313
- justify-content: space-between;
3314
- }
3315
-
3316
- .lg\:justify-around {
3317
- justify-content: space-around;
3318
- }
3319
-
3320
- .lg\:justify-evenly {
3321
- justify-content: space-evenly;
3322
- }
3323
-
3324
- .lg\:items-start {
3325
- align-items: flex-start;
3326
- }
3327
-
3328
- .lg\:items-center {
3329
- align-items: center;
3330
- }
3331
-
3332
- .lg\:items-end {
3333
- align-items: flex-end;
3334
- }
3335
-
3336
- .lg\:items-stretch {
3337
- align-items: stretch;
3338
- }
3339
-
3340
- .lg\:flex-1 {
3341
- flex: 1 1 0;
3342
- }
3343
-
3344
- .lg\:flex-none {
3345
- flex: none;
3346
- }
3347
- }
3348
-
3349
- @media (max-width: 1280px) {
3350
-
3351
- .xl\:flex {
3352
- display: flex;
3353
- }
3354
-
3355
- .xl\:inline-flex {
3356
- display: inline-flex;
3357
- }
3358
-
3359
- .xl\:flex-row {
3360
- flex-direction: row;
3361
- }
3362
-
3363
- .xl\:flex-row-reverse {
3364
- flex-direction: row-reverse;
3365
- }
3366
-
3367
- .xl\:flex-col {
3368
- flex-direction: column;
3369
- }
3370
-
3371
- .xl\:flex-col-reverse {
3372
- flex-direction: column-reverse;
3373
- }
3374
-
3375
- .xl\:flex-wrap {
3376
- flex-wrap: wrap;
3377
- }
3378
-
3379
- .xl\:flex-nowrap {
3380
- flex-wrap: nowrap;
3381
- }
3382
-
3383
- .xl\:flex-wrap-reverse {
3384
- flex-wrap: wrap-reverse;
3385
- }
3386
-
3387
- .xl\:justify-start {
3388
- justify-content: flex-start;
3389
- }
3390
-
3391
- .xl\:justify-center {
3392
- justify-content: center;
3393
- }
3394
-
3395
- .xl\:justify-end {
3396
- justify-content: flex-end;
3397
- }
3398
-
3399
- .xl\:justify-between {
3400
- justify-content: space-between;
3401
- }
3402
-
3403
- .xl\:justify-around {
3404
- justify-content: space-around;
3405
- }
3406
-
3407
- .xl\:justify-evenly {
3408
- justify-content: space-evenly;
3409
- }
3410
-
3411
- .xl\:items-start {
3412
- align-items: flex-start;
3413
- }
3414
-
3415
- .xl\:items-center {
3416
- align-items: center;
3417
- }
3418
-
3419
- .xl\:items-end {
3420
- align-items: flex-end;
3421
- }
3422
-
3423
- .xl\:items-stretch {
3424
- align-items: stretch;
3425
- }
3426
-
3427
- .xl\:flex-1 {
3428
- flex: 1 1 0;
3429
- }
3430
-
3431
- .xl\:flex-none {
3432
- flex: none;
3433
- }
3434
- }
1
+ .block{display:block!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.flex{display:flex!important}.inline-flex{display:inline-flex!important}.grid{display:grid!important}.inline-grid{display:inline-grid!important}.hidden{display:none!important}@media (max-width:640px){.hide-mobile{display:none!important}.show-mobile{display:block!important}}@media (min-width:calc(640px + 1px)) and (max-width:768px){.hide-tablet{display:none!important}.show-tablet{display:block!important}}@media (min-width:1024px){.hide-desktop{display:none!important}.show-desktop{display:block!important}}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.flex-nowrap{flex-wrap:nowrap!important}.justify-start{justify-content:flex-start!important}.justify-center{justify-content:center!important}.justify-end{justify-content:flex-end!important}.justify-between{justify-content:space-between!important}.justify-around{justify-content:space-around!important}.justify-evenly{justify-content:space-evenly!important}.items-start{align-items:flex-start!important}.items-center{align-items:center!important}.items-end{align-items:flex-end!important}.items-stretch{align-items:stretch!important}.self-start{align-self:flex-start!important}.self-center{align-self:center!important}.self-end{align-self:flex-end!important}.flex-1{flex:1 1 0!important}.flex-auto{flex:0 0 auto!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-auto-fit-200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.grid-auto-fit-250{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.grid-auto-fit-300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid-auto-fit-400{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.col-span-full{grid-column:1/-1}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.row-span-3{grid-row:span 3/span 3}.m-0{margin:0!important}.m-1{margin:var(--space-1)!important}.m-2{margin:var(--space-2)!important}.m-3{margin:var(--space-3)!important}.m-4{margin:var(--space-4)!important}.m-5{margin:var(--space-5)!important}.m-6{margin:var(--space-6)!important}.m-7{margin:var(--space-7)!important}.m-8{margin:var(--space-8)!important}.m-10{margin:var(--space-10)!important}.m-12{margin:var(--space-12)!important}.m-14{margin:var(--space-14)!important}.m-16{margin:var(--space-16)!important}.m-20{margin:var(--space-20)!important}.m-24{margin:var(--space-24)!important}.m-32{margin:var(--space-32)!important}.m-40{margin:var(--space-40)!important}.m-48{margin:var(--space-48)!important}.m-64{margin:var(--space-64)!important}.mx-auto{margin-left:auto!important;margin-right:auto!important}.mx-0{margin-left:0!important;margin-right:0!important}.mx-1{margin-left:var(--space-1)!important;margin-right:var(--space-1)!important}.mx-2{margin-left:var(--space-2)!important;margin-right:var(--space-2)!important}.mx-3{margin-left:var(--space-3)!important;margin-right:var(--space-3)!important}.mx-4{margin-left:var(--space-4)!important;margin-right:var(--space-4)!important}.mx-5{margin-left:var(--space-5)!important;margin-right:var(--space-5)!important}.mx-6{margin-left:var(--space-6)!important;margin-right:var(--space-6)!important}.mx-7{margin-left:var(--space-7)!important;margin-right:var(--space-7)!important}.mx-8{margin-left:var(--space-8)!important;margin-right:var(--space-8)!important}.mx-10{margin-left:var(--space-10)!important;margin-right:var(--space-10)!important}.mx-12{margin-left:var(--space-12)!important;margin-right:var(--space-12)!important}.mx-14{margin-left:var(--space-14)!important;margin-right:var(--space-14)!important}.mx-16{margin-left:var(--space-16)!important;margin-right:var(--space-16)!important}.mx-20{margin-left:var(--space-20)!important;margin-right:var(--space-20)!important}.mx-24{margin-left:var(--space-24)!important;margin-right:var(--space-24)!important}.mx-32{margin-left:var(--space-32)!important;margin-right:var(--space-32)!important}.mx-40{margin-left:var(--space-40)!important;margin-right:var(--space-40)!important}.mx-48{margin-left:var(--space-48)!important;margin-right:var(--space-48)!important}.mx-64{margin-left:var(--space-64)!important;margin-right:var(--space-64)!important}.my-0{margin-bottom:0!important;margin-top:0!important}.my-1{margin-bottom:var(--space-1)!important;margin-top:var(--space-1)!important}.my-2{margin-bottom:var(--space-2)!important;margin-top:var(--space-2)!important}.my-3{margin-bottom:var(--space-3)!important;margin-top:var(--space-3)!important}.my-4{margin-bottom:var(--space-4)!important;margin-top:var(--space-4)!important}.my-5{margin-bottom:var(--space-5)!important;margin-top:var(--space-5)!important}.my-6{margin-bottom:var(--space-6)!important;margin-top:var(--space-6)!important}.my-7{margin-bottom:var(--space-7)!important;margin-top:var(--space-7)!important}.my-8{margin-bottom:var(--space-8)!important;margin-top:var(--space-8)!important}.my-10{margin-bottom:var(--space-10)!important;margin-top:var(--space-10)!important}.my-12{margin-bottom:var(--space-12)!important;margin-top:var(--space-12)!important}.my-14{margin-bottom:var(--space-14)!important;margin-top:var(--space-14)!important}.my-16{margin-bottom:var(--space-16)!important;margin-top:var(--space-16)!important}.my-20{margin-bottom:var(--space-20)!important;margin-top:var(--space-20)!important}.my-24{margin-bottom:var(--space-24)!important;margin-top:var(--space-24)!important}.my-32{margin-bottom:var(--space-32)!important;margin-top:var(--space-32)!important}.my-40{margin-bottom:var(--space-40)!important;margin-top:var(--space-40)!important}.my-48{margin-bottom:var(--space-48)!important;margin-top:var(--space-48)!important}.my-64{margin-bottom:var(--space-64)!important;margin-top:var(--space-64)!important}.mt-0{margin-top:0!important}.mt-1{margin-top:var(--space-1)!important}.mt-2{margin-top:var(--space-2)!important}.mt-3{margin-top:var(--space-3)!important}.mt-4{margin-top:var(--space-4)!important}.mt-5{margin-top:var(--space-5)!important}.mt-6{margin-top:var(--space-6)!important}.mt-7{margin-top:var(--space-7)!important}.mt-8{margin-top:var(--space-8)!important}.mt-10{margin-top:var(--space-10)!important}.mt-12{margin-top:var(--space-12)!important}.mt-14{margin-top:var(--space-14)!important}.mt-16{margin-top:var(--space-16)!important}.mt-20{margin-top:var(--space-20)!important}.mt-24{margin-top:var(--space-24)!important}.mt-32{margin-top:var(--space-32)!important}.mt-40{margin-top:var(--space-40)!important}.mt-48{margin-top:var(--space-48)!important}.mt-64{margin-top:var(--space-64)!important}.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:var(--space-1)!important}.mb-2{margin-bottom:var(--space-2)!important}.mb-3{margin-bottom:var(--space-3)!important}.mb-4{margin-bottom:var(--space-4)!important}.mb-5{margin-bottom:var(--space-5)!important}.mb-6{margin-bottom:var(--space-6)!important}.mb-7{margin-bottom:var(--space-7)!important}.mb-8{margin-bottom:var(--space-8)!important}.mb-10{margin-bottom:var(--space-10)!important}.mb-12{margin-bottom:var(--space-12)!important}.mb-14{margin-bottom:var(--space-14)!important}.mb-16{margin-bottom:var(--space-16)!important}.mb-20{margin-bottom:var(--space-20)!important}.mb-24{margin-bottom:var(--space-24)!important}.mb-32{margin-bottom:var(--space-32)!important}.mb-40{margin-bottom:var(--space-40)!important}.mb-48{margin-bottom:var(--space-48)!important}.mb-64{margin-bottom:var(--space-64)!important}.ml-0{margin-left:0!important}.ml-1{margin-left:var(--space-1)!important}.ml-2{margin-left:var(--space-2)!important}.ml-3{margin-left:var(--space-3)!important}.ml-4{margin-left:var(--space-4)!important}.ml-5{margin-left:var(--space-5)!important}.ml-6{margin-left:var(--space-6)!important}.ml-7{margin-left:var(--space-7)!important}.ml-8{margin-left:var(--space-8)!important}.ml-10{margin-left:var(--space-10)!important}.ml-12{margin-left:var(--space-12)!important}.ml-14{margin-left:var(--space-14)!important}.ml-16{margin-left:var(--space-16)!important}.ml-20{margin-left:var(--space-20)!important}.ml-24{margin-left:var(--space-24)!important}.ml-32{margin-left:var(--space-32)!important}.ml-40{margin-left:var(--space-40)!important}.ml-48{margin-left:var(--space-48)!important}.ml-64{margin-left:var(--space-64)!important}.mr-0{margin-right:0!important}.mr-1{margin-right:var(--space-1)!important}.mr-2{margin-right:var(--space-2)!important}.mr-3{margin-right:var(--space-3)!important}.mr-4{margin-right:var(--space-4)!important}.mr-5{margin-right:var(--space-5)!important}.mr-6{margin-right:var(--space-6)!important}.mr-7{margin-right:var(--space-7)!important}.mr-8{margin-right:var(--space-8)!important}.mr-10{margin-right:var(--space-10)!important}.mr-12{margin-right:var(--space-12)!important}.mr-14{margin-right:var(--space-14)!important}.mr-16{margin-right:var(--space-16)!important}.mr-20{margin-right:var(--space-20)!important}.mr-24{margin-right:var(--space-24)!important}.mr-32{margin-right:var(--space-32)!important}.mr-40{margin-right:var(--space-40)!important}.mr-48{margin-right:var(--space-48)!important}.mr-64{margin-right:var(--space-64)!important}.ml-auto{margin-left:auto!important}.mr-auto{margin-right:auto!important}.-m-1{margin:calc(var(--space-1)*-1)!important}.-m-2{margin:calc(var(--space-2)*-1)!important}.-m-3{margin:calc(var(--space-3)*-1)!important}.-m-4{margin:calc(var(--space-4)*-1)!important}.-m-6{margin:calc(var(--space-6)*-1)!important}.-m-8{margin:calc(var(--space-8)*-1)!important}.-m-10{margin:calc(var(--space-10)*-1)!important}.-mt-1{margin-top:calc(var(--space-1)*-1)!important}.-mt-2{margin-top:calc(var(--space-2)*-1)!important}.-mt-3{margin-top:calc(var(--space-3)*-1)!important}.-mt-4{margin-top:calc(var(--space-4)*-1)!important}.-mt-6{margin-top:calc(var(--space-6)*-1)!important}.-mt-8{margin-top:calc(var(--space-8)*-1)!important}.-mt-10{margin-top:calc(var(--space-10)*-1)!important}.-mb-1{margin-bottom:calc(var(--space-1)*-1)!important}.-mb-2{margin-bottom:calc(var(--space-2)*-1)!important}.-mb-3{margin-bottom:calc(var(--space-3)*-1)!important}.-mb-4{margin-bottom:calc(var(--space-4)*-1)!important}.-mb-6{margin-bottom:calc(var(--space-6)*-1)!important}.-mb-8{margin-bottom:calc(var(--space-8)*-1)!important}.-mb-10{margin-bottom:calc(var(--space-10)*-1)!important}.-mx-1{margin-left:calc(var(--space-1)*-1)!important;margin-right:calc(var(--space-1)*-1)!important}.-mx-2{margin-left:calc(var(--space-2)*-1)!important;margin-right:calc(var(--space-2)*-1)!important}.-mx-3{margin-left:calc(var(--space-3)*-1)!important;margin-right:calc(var(--space-3)*-1)!important}.-mx-4{margin-left:calc(var(--space-4)*-1)!important;margin-right:calc(var(--space-4)*-1)!important}.-mx-6{margin-left:calc(var(--space-6)*-1)!important;margin-right:calc(var(--space-6)*-1)!important}.-mx-8{margin-left:calc(var(--space-8)*-1)!important;margin-right:calc(var(--space-8)*-1)!important}.-mx-10{margin-left:calc(var(--space-10)*-1)!important;margin-right:calc(var(--space-10)*-1)!important}.-my-1{margin-bottom:calc(var(--space-1)*-1)!important;margin-top:calc(var(--space-1)*-1)!important}.-my-2{margin-bottom:calc(var(--space-2)*-1)!important;margin-top:calc(var(--space-2)*-1)!important}.-my-3{margin-bottom:calc(var(--space-3)*-1)!important;margin-top:calc(var(--space-3)*-1)!important}.-my-4{margin-bottom:calc(var(--space-4)*-1)!important;margin-top:calc(var(--space-4)*-1)!important}.-my-6{margin-bottom:calc(var(--space-6)*-1)!important;margin-top:calc(var(--space-6)*-1)!important}.-my-8{margin-bottom:calc(var(--space-8)*-1)!important;margin-top:calc(var(--space-8)*-1)!important}.-my-10{margin-bottom:calc(var(--space-10)*-1)!important;margin-top:calc(var(--space-10)*-1)!important}.p-0{padding:0!important}.p-1{padding:var(--space-1)!important}.p-2{padding:var(--space-2)!important}.p-3{padding:var(--space-3)!important}.p-4{padding:var(--space-4)!important}.p-5{padding:var(--space-5)!important}.p-6{padding:var(--space-6)!important}.p-7{padding:var(--space-7)!important}.p-8{padding:var(--space-8)!important}.p-10{padding:var(--space-10)!important}.p-12{padding:var(--space-12)!important}.p-14{padding:var(--space-14)!important}.p-16{padding:var(--space-16)!important}.p-20{padding:var(--space-20)!important}.p-24{padding:var(--space-24)!important}.p-32{padding:var(--space-32)!important}.p-40{padding:var(--space-40)!important}.p-48{padding:var(--space-48)!important}.p-64{padding:var(--space-64)!important}.px-0{padding-left:0!important;padding-right:0!important}.px-1{padding-left:var(--space-1)!important;padding-right:var(--space-1)!important}.px-2{padding-left:var(--space-2)!important;padding-right:var(--space-2)!important}.px-3{padding-left:var(--space-3)!important;padding-right:var(--space-3)!important}.px-4{padding-left:var(--space-4)!important;padding-right:var(--space-4)!important}.px-5{padding-left:var(--space-5)!important;padding-right:var(--space-5)!important}.px-6{padding-left:var(--space-6)!important;padding-right:var(--space-6)!important}.px-7{padding-left:var(--space-7)!important;padding-right:var(--space-7)!important}.px-8{padding-left:var(--space-8)!important;padding-right:var(--space-8)!important}.px-10{padding-left:var(--space-10)!important;padding-right:var(--space-10)!important}.px-12{padding-left:var(--space-12)!important;padding-right:var(--space-12)!important}.px-14{padding-left:var(--space-14)!important;padding-right:var(--space-14)!important}.px-16{padding-left:var(--space-16)!important;padding-right:var(--space-16)!important}.px-20{padding-left:var(--space-20)!important;padding-right:var(--space-20)!important}.px-24{padding-left:var(--space-24)!important;padding-right:var(--space-24)!important}.px-32{padding-left:var(--space-32)!important;padding-right:var(--space-32)!important}.px-40{padding-left:var(--space-40)!important;padding-right:var(--space-40)!important}.px-48{padding-left:var(--space-48)!important;padding-right:var(--space-48)!important}.px-64{padding-left:var(--space-64)!important;padding-right:var(--space-64)!important}.py-0{padding-bottom:0!important;padding-top:0!important}.py-1{padding-bottom:var(--space-1)!important;padding-top:var(--space-1)!important}.py-2{padding-bottom:var(--space-2)!important;padding-top:var(--space-2)!important}.py-3{padding-bottom:var(--space-3)!important;padding-top:var(--space-3)!important}.py-4{padding-bottom:var(--space-4)!important;padding-top:var(--space-4)!important}.py-5{padding-bottom:var(--space-5)!important;padding-top:var(--space-5)!important}.py-6{padding-bottom:var(--space-6)!important;padding-top:var(--space-6)!important}.py-7{padding-bottom:var(--space-7)!important;padding-top:var(--space-7)!important}.py-8{padding-bottom:var(--space-8)!important;padding-top:var(--space-8)!important}.py-10{padding-bottom:var(--space-10)!important;padding-top:var(--space-10)!important}.py-12{padding-bottom:var(--space-12)!important;padding-top:var(--space-12)!important}.py-14{padding-bottom:var(--space-14)!important;padding-top:var(--space-14)!important}.py-16{padding-bottom:var(--space-16)!important;padding-top:var(--space-16)!important}.py-20{padding-bottom:var(--space-20)!important;padding-top:var(--space-20)!important}.py-24{padding-bottom:var(--space-24)!important;padding-top:var(--space-24)!important}.py-32{padding-bottom:var(--space-32)!important;padding-top:var(--space-32)!important}.py-40{padding-bottom:var(--space-40)!important;padding-top:var(--space-40)!important}.py-48{padding-bottom:var(--space-48)!important;padding-top:var(--space-48)!important}.py-64{padding-bottom:var(--space-64)!important;padding-top:var(--space-64)!important}.pt-0{padding-top:0!important}.pt-1{padding-top:var(--space-1)!important}.pt-2{padding-top:var(--space-2)!important}.pt-3{padding-top:var(--space-3)!important}.pt-4{padding-top:var(--space-4)!important}.pt-5{padding-top:var(--space-5)!important}.pt-6{padding-top:var(--space-6)!important}.pt-7{padding-top:var(--space-7)!important}.pt-8{padding-top:var(--space-8)!important}.pt-10{padding-top:var(--space-10)!important}.pt-12{padding-top:var(--space-12)!important}.pt-14{padding-top:var(--space-14)!important}.pt-16{padding-top:var(--space-16)!important}.pt-20{padding-top:var(--space-20)!important}.pt-24{padding-top:var(--space-24)!important}.pt-32{padding-top:var(--space-32)!important}.pt-40{padding-top:var(--space-40)!important}.pt-48{padding-top:var(--space-48)!important}.pt-64{padding-top:var(--space-64)!important}.pr-0{padding-right:0!important}.pr-1{padding-right:var(--space-1)!important}.pr-2{padding-right:var(--space-2)!important}.pr-3{padding-right:var(--space-3)!important}.pr-4{padding-right:var(--space-4)!important}.pr-5{padding-right:var(--space-5)!important}.pr-6{padding-right:var(--space-6)!important}.pr-7{padding-right:var(--space-7)!important}.pr-8{padding-right:var(--space-8)!important}.pr-10{padding-right:var(--space-10)!important}.pr-12{padding-right:var(--space-12)!important}.pr-14{padding-right:var(--space-14)!important}.pr-16{padding-right:var(--space-16)!important}.pr-20{padding-right:var(--space-20)!important}.pr-24{padding-right:var(--space-24)!important}.pr-32{padding-right:var(--space-32)!important}.pr-40{padding-right:var(--space-40)!important}.pr-48{padding-right:var(--space-48)!important}.pr-64{padding-right:var(--space-64)!important}.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:var(--space-1)!important}.pb-2{padding-bottom:var(--space-2)!important}.pb-3{padding-bottom:var(--space-3)!important}.pb-4{padding-bottom:var(--space-4)!important}.pb-5{padding-bottom:var(--space-5)!important}.pb-6{padding-bottom:var(--space-6)!important}.pb-7{padding-bottom:var(--space-7)!important}.pb-8{padding-bottom:var(--space-8)!important}.pb-10{padding-bottom:var(--space-10)!important}.pb-12{padding-bottom:var(--space-12)!important}.pb-14{padding-bottom:var(--space-14)!important}.pb-16{padding-bottom:var(--space-16)!important}.pb-20{padding-bottom:var(--space-20)!important}.pb-24{padding-bottom:var(--space-24)!important}.pb-32{padding-bottom:var(--space-32)!important}.pb-40{padding-bottom:var(--space-40)!important}.pb-48{padding-bottom:var(--space-48)!important}.pb-64{padding-bottom:var(--space-64)!important}.pl-0{padding-left:0!important}.pl-1{padding-left:var(--space-1)!important}.pl-2{padding-left:var(--space-2)!important}.pl-3{padding-left:var(--space-3)!important}.pl-4{padding-left:var(--space-4)!important}.pl-5{padding-left:var(--space-5)!important}.pl-6{padding-left:var(--space-6)!important}.pl-7{padding-left:var(--space-7)!important}.pl-8{padding-left:var(--space-8)!important}.pl-10{padding-left:var(--space-10)!important}.pl-12{padding-left:var(--space-12)!important}.pl-14{padding-left:var(--space-14)!important}.pl-16{padding-left:var(--space-16)!important}.pl-20{padding-left:var(--space-20)!important}.pl-24{padding-left:var(--space-24)!important}.pl-32{padding-left:var(--space-32)!important}.pl-40{padding-left:var(--space-40)!important}.pl-48{padding-left:var(--space-48)!important}.pl-64{padding-left:var(--space-64)!important}.gap-0{gap:0}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}.gap-7{gap:var(--space-7)}.gap-8{gap:var(--space-8)}.gap-10{gap:var(--space-10)}.gap-12{gap:var(--space-12)}.gap-14{gap:var(--space-14)}.gap-16{gap:var(--space-16)}.gap-20{gap:var(--space-20)}.gap-24{gap:var(--space-24)}.gap-32{gap:var(--space-32)}.gap-40{gap:var(--space-40)}.gap-48{gap:var(--space-48)}.gap-64{gap:var(--space-64)}.gap-x-0{-moz-column-gap:0;column-gap:0}.gap-x-1{-moz-column-gap:var(--space-1);column-gap:var(--space-1)}.gap-x-2{-moz-column-gap:var(--space-2);column-gap:var(--space-2)}.gap-x-3{-moz-column-gap:var(--space-3);column-gap:var(--space-3)}.gap-x-4{-moz-column-gap:var(--space-4);column-gap:var(--space-4)}.gap-x-5{-moz-column-gap:var(--space-5);column-gap:var(--space-5)}.gap-x-6{-moz-column-gap:var(--space-6);column-gap:var(--space-6)}.gap-x-7{-moz-column-gap:var(--space-7);column-gap:var(--space-7)}.gap-x-8{-moz-column-gap:var(--space-8);column-gap:var(--space-8)}.gap-x-10{-moz-column-gap:var(--space-10);column-gap:var(--space-10)}.gap-x-12{-moz-column-gap:var(--space-12);column-gap:var(--space-12)}.gap-x-14{-moz-column-gap:var(--space-14);column-gap:var(--space-14)}.gap-x-16{-moz-column-gap:var(--space-16);column-gap:var(--space-16)}.gap-x-20{-moz-column-gap:var(--space-20);column-gap:var(--space-20)}.gap-x-24{-moz-column-gap:var(--space-24);column-gap:var(--space-24)}.gap-x-32{-moz-column-gap:var(--space-32);column-gap:var(--space-32)}.gap-x-40{-moz-column-gap:var(--space-40);column-gap:var(--space-40)}.gap-x-48{-moz-column-gap:var(--space-48);column-gap:var(--space-48)}.gap-x-64{-moz-column-gap:var(--space-64);column-gap:var(--space-64)}.gap-y-0{row-gap:0}.gap-y-1{row-gap:var(--space-1)}.gap-y-2{row-gap:var(--space-2)}.gap-y-3{row-gap:var(--space-3)}.gap-y-4{row-gap:var(--space-4)}.gap-y-5{row-gap:var(--space-5)}.gap-y-6{row-gap:var(--space-6)}.gap-y-7{row-gap:var(--space-7)}.gap-y-8{row-gap:var(--space-8)}.gap-y-10{row-gap:var(--space-10)}.gap-y-12{row-gap:var(--space-12)}.gap-y-14{row-gap:var(--space-14)}.gap-y-16{row-gap:var(--space-16)}.gap-y-20{row-gap:var(--space-20)}.gap-y-24{row-gap:var(--space-24)}.gap-y-32{row-gap:var(--space-32)}.gap-y-40{row-gap:var(--space-40)}.gap-y-48{row-gap:var(--space-48)}.gap-y-64{row-gap:var(--space-64)}.text-left{text-align:left!important}.text-center{text-align:center!important}.text-right{text-align:right!important}.text-nowrap{white-space:nowrap!important}.text-wrap,.whitespace-normal{white-space:normal!important}.whitespace-nowrap{white-space:nowrap!important}.whitespace-pre{white-space:pre!important}.whitespace-pre-line{white-space:pre-line!important}.text-xxxs{font-size:var(--text-xxxs)}.text-xxs{font-size:var(--text-xxs)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-md{font-size:var(--text-md)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.leading-tight{line-height:var(--line-height-tight)}.leading-snug{line-height:var(--line-height-snug)}.leading-normal{line-height:var(--line-height-normal)}.leading-relaxed{line-height:var(--line-height-relaxed)}.font-normal{font-weight:400!important}.font-medium{font-weight:500!important}.font-semibold{font-weight:600!important}.font-bold{font-weight:700!important}.tracking-tight{letter-spacing:-.02em}.tracking-normal{letter-spacing:0}.tracking-wide{letter-spacing:.08em}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.underline{-webkit-text-decoration:underline;text-decoration:underline}.line-through{-webkit-text-decoration:line-through;text-decoration:line-through}.no-underline{-webkit-text-decoration:none;text-decoration:none}.text-muted{color:var(--color-text-muted)!important}.text-soft{color:var(--color-text-soft)!important}.text-strong{color:var(--color-text)!important}.text-on-soft{color:var(--color-text-on-soft)!important}.text-on-strong{color:var(--color-text-on-strong)!important}.text-body{color:var(--color-text)}.text-body,.text-body-soft{font-family:var(--font-family-sans),sans-serif;font-size:var(--text-base);line-height:var(--line-height-normal)}.text-body-soft{color:var(--color-text-soft)}.text-body-muted{color:var(--color-text-muted)}.text-body-muted,.text-body-strong{font-family:var(--font-family-sans),sans-serif;font-size:var(--text-base);line-height:var(--line-height-normal)}.text-body-strong{color:var(--color-text);font-weight:600}.text-body-sm{color:var(--color-text)}.text-body-sm,.text-body-sm-muted{font-family:var(--font-family-sans),sans-serif;font-size:var(--text-sm);line-height:var(--line-height-normal)}.text-body-sm-muted{color:var(--color-text-muted)}.text-body-sm-soft{color:var(--color-text-soft)}.text-body-sm-soft,.text-body-sm-strong{font-family:var(--font-family-sans),sans-serif;font-size:var(--text-sm);line-height:var(--line-height-normal)}.text-body-sm-strong{color:var(--color-text);font-weight:600}.text-mono{color:var(--color-text)}.text-mono,.text-mono-soft{font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);line-height:var(--line-height-normal)}.text-mono-soft{color:var(--color-text-soft)}.text-mono-muted{color:var(--color-text-muted)}.text-mono-muted,.text-mono-strong{font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);line-height:var(--line-height-normal)}.text-mono-strong{color:var(--color-text);font-weight:600}.w-auto{width:auto!important}.w-full{width:100%!important}.w-half{width:50%!important}.w-min{width:-moz-min-content!important;width:min-content!important}.w-max{width:-moz-max-content!important;width:max-content!important}.w-fit{width:-moz-fit-content!important;width:fit-content!important}.max-w-xs{max-width:20rem}.max-w-sm{max-width:28rem}.max-w-md{max-width:36rem}.max-w-lg{max-width:48rem}.max-w-xl{max-width:64rem}.max-w-full{max-width:100%}.max-content-sm{max-width:var(--content-width-sm)}.max-content-md{max-width:var(--content-width-md)}.max-content-lg{max-width:var(--content-width-lg)}.max-content-xl{max-width:var(--content-width-xl)}.max-content-2xl{max-width:var(--content-width-2xl)}.h-auto{height:auto!important}.h-full{height:100%!important}.h-screen{height:100vh!important}.h-fit{height:-moz-fit-content!important;height:fit-content!important}.min-h-0{min-height:0!important}.min-h-full{min-height:100%!important}.min-h-screen{min-height:100vh!important}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.aspect-landscape{aspect-ratio:4/3}.aspect-portrait{aspect-ratio:3/4}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-fill{-o-object-fit:fill;object-fit:fill}.object-none{-o-object-fit:none;object-fit:none}.object-scale-down{-o-object-fit:scale-down;object-fit:scale-down}.border{border:1px solid var(--color-border-subtle)!important}.border-strong{border:1px solid var(--color-border-strong)!important}.border-muted{border:1px solid var(--color-muted-border)!important}.border-top{border-top:1px solid var(--color-border-subtle)!important}.border-bottom{border-bottom:1px solid var(--color-border-subtle)!important}.border-left{border-left:1px solid var(--color-border-subtle)!important}.border-right{border-right:1px solid var(--color-border-subtle)!important}.radius-none{border-radius:var(--radius-none)!important}.radius-xs{border-radius:var(--radius-xs)!important}.radius-sm{border-radius:var(--radius-sm)!important}.radius-md{border-radius:var(--radius-md)!important}.radius-lg{border-radius:var(--radius-lg)!important}.radius-xl{border-radius:var(--radius-xl)!important}.radius-full{border-radius:var(--radius-full)!important}.shadow-1{box-shadow:var(--shadow-1)!important}.shadow-2{box-shadow:var(--shadow-2)!important}.shadow-3{box-shadow:var(--shadow-3)!important}.shadow-none{box-shadow:none!important}.bg-surface{background-color:var(--color-surface)!important}.bg-surface-soft{background-color:var(--color-surface-subtle)!important}.bg-muted{background-color:var(--color-muted-bg)!important}.bg-soft{background-color:var(--color-bg-soft)!important}.bg-accent-soft{background-color:var(--color-accent-soft)!important}.bg-success-soft{background-color:var(--color-success-soft)!important}.bg-warning-soft{background-color:var(--color-warning-soft)!important}.bg-danger-soft{background-color:var(--color-danger-soft)!important}.bg-info-soft{background-color:var(--color-info-soft)!important}.bg-brand{background-color:var(--color-brand-ink)!important}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-wait{cursor:wait}.cursor-text{cursor:text}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.overflow-hidden{overflow:hidden!important}.overflow-auto{overflow:auto!important}.overflow-x-auto{overflow-x:auto!important}.overflow-y-auto{overflow-y:auto!important}.scroll-x{overflow-x:auto}.scroll-x,.scroll-y{-webkit-overflow-scrolling:touch}.scroll-y{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.relative{position:relative!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.sticky{position:sticky!important}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.inset-0{bottom:0;left:0;right:0;top:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.z-negative{z-index:var(--z-negative)}.z-base{z-index:var(--z-base)}.z-header{z-index:var(--z-header)}.z-backdrop{z-index:var(--z-backdrop)}.z-modal{z-index:var(--z-modal)}.z-drawer{z-index:var(--z-drawer)}.z-toast{z-index:var(--z-toast)}.z-tooltip{z-index:var(--z-tooltip)}.stack{gap:var(--space-3)}.stack,.stack-tight{display:flex;flex-direction:column}.stack-tight{gap:var(--space-2)}.stack-loose{gap:var(--space-4)}.stack-loose,.stack-sm{display:flex;flex-direction:column}.stack-sm{gap:var(--space-2)}.stack-md{gap:var(--space-3)}.stack-lg,.stack-md{display:flex;flex-direction:column}.stack-lg{gap:var(--space-4)}.stack-xl{display:flex;flex-direction:column;gap:var(--space-6)}.inline-stack{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}.cluster{align-items:center}.button-row,.cluster{display:flex;flex-wrap:wrap;gap:var(--space-2)}.gutter-none{gap:0}.gutter-sm{gap:var(--space-2)}.gutter-md{gap:var(--space-3)}.gutter-lg{gap:var(--space-4)}.gutter-xl{gap:var(--space-6)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.truncate-2,.truncate-3,.truncate-4{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.truncate-2{-webkit-line-clamp:2}.truncate-3{-webkit-line-clamp:3}.truncate-4{-webkit-line-clamp:4}.text-info{color:var(--semantic-info-text)!important}.text-success{color:var(--semantic-success-text)!important}.text-warning{color:var(--semantic-warning-text)!important}.text-danger{color:var(--semantic-danger-text)!important}.text-danger code,.text-info code,.text-success code,.text-warning code{color:var(--color-text)!important}code:not(pre code){background-color:var(--code-inline-bg,var(--color-surface-subtle));border:1px solid var(--code-inline-border,var(--color-border-subtle));border-radius:var(--radius-sm);color:var(--color-text);font-family:var(--font-family-mono),monospace;font-size:.875em;line-height:1.2;padding:.15em .35em;white-space:nowrap}.layout-stack{gap:var(--component-gap-md)}.layout-stack,.layout-stack-sm{display:flex;flex-direction:column}.layout-stack-sm{gap:var(--component-gap-xs)}.layout-stack-lg{display:flex;flex-direction:column;gap:var(--component-gap-lg)}.layout-flow>*+*{margin-top:var(--component-gap-md)}.layout-flow-sm>*+*{margin-top:var(--component-gap-xs)}.layout-flow-lg>*+*{margin-top:var(--component-gap-lg)}.layout-inline{align-items:center}.layout-inline,.layout-inline-start{display:flex;flex-wrap:wrap;gap:var(--component-gap-md)}.layout-inline-start{align-items:flex-start}.layout-inline-end{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--component-gap-md)}.layout-cluster{justify-content:flex-start}.layout-cluster,.layout-cluster-center{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.layout-cluster-center{justify-content:center}.layout-grid-inner{grid-gap:var(--gap-md);display:grid;gap:var(--gap-md);grid-template-columns:repeat(auto-fit,minmax(var(--grid-min),1fr))}.layout-grid-inner-2{grid-gap:var(--gap-md);display:grid;gap:var(--gap-md);grid-template-columns:repeat(2,1fr)}.layout-grid-inner-3{grid-gap:var(--gap-md);display:grid;gap:var(--gap-md);grid-template-columns:repeat(3,1fr)}@media (max-width:768px){.layout-grid-inner-2,.layout-grid-inner-3{grid-template-columns:1fr}}.grid-items-start{align-items:start}.grid-items-center{align-items:center}.grid-items-end{align-items:end}.grid-items-stretch{align-items:stretch}.grid-justify-start{justify-items:start}.grid-justify-center{justify-items:center}.grid-justify-end{justify-items:end}.grid-justify-stretch{justify-items:stretch}.grid-place-items-center{align-items:center;justify-items:center;place-items:center}.grid-place-items-start{align-items:start;justify-items:start;place-items:start}.grid-place-items-end{align-items:end;justify-items:end;place-items:end}.grid-place-items-stretch{align-items:stretch;justify-items:stretch;place-items:stretch}.justify-self-start{justify-self:start}.justify-self-center{justify-self:center}.justify-self-end{justify-self:end}.justify-self-stretch{justify-self:stretch}@media (max-width:640px){.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@media (max-width:768px){.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@media (max-width:1024px){.lg\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}@media (max-width:1280px){.xl\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap-reverse{flex-wrap:wrap-reverse}.content-start{align-content:flex-start}.content-center{align-content:center}.content-end{align-content:flex-end}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-evenly{align-content:space-evenly}.self-auto{align-self:auto}.self-stretch{align-self:stretch}.flex-initial{flex:0 1 auto}.flex-none{flex:none}@media (max-width:640px){.sm\:flex{display:flex}.sm\:inline-flex{display:inline-flex}.sm\:flex-row{flex-direction:row}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:flex-col{flex-direction:column}.sm\:flex-col-reverse{flex-direction:column-reverse}.sm\:flex-wrap{flex-wrap:wrap}.sm\:flex-nowrap{flex-wrap:nowrap}.sm\:flex-wrap-reverse{flex-wrap:wrap-reverse}.sm\:justify-start{justify-content:flex-start}.sm\:justify-center{justify-content:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-around{justify-content:space-around}.sm\:justify-evenly{justify-content:space-evenly}.sm\:items-start{align-items:flex-start}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:items-stretch{align-items:stretch}.sm\:flex-1{flex:1 1 0%}.sm\:flex-none{flex:none}}@media (max-width:768px){.md\:flex{display:flex}.md\:inline-flex{display:inline-flex}.md\:flex-row{flex-direction:row}.md\:flex-row-reverse{flex-direction:row-reverse}.md\:flex-col{flex-direction:column}.md\:flex-col-reverse{flex-direction:column-reverse}.md\:flex-wrap{flex-wrap:wrap}.md\:flex-nowrap{flex-wrap:nowrap}.md\:flex-wrap-reverse{flex-wrap:wrap-reverse}.md\:justify-start{justify-content:flex-start}.md\:justify-center{justify-content:center}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:justify-evenly{justify-content:space-evenly}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:items-stretch{align-items:stretch}.md\:flex-1{flex:1 1 0}.md\:flex-none{flex:none}}@media (max-width:1024px){.lg\:flex{display:flex}.lg\:inline-flex{display:inline-flex}.lg\:flex-row{flex-direction:row}.lg\:flex-row-reverse{flex-direction:row-reverse}.lg\:flex-col{flex-direction:column}.lg\:flex-col-reverse{flex-direction:column-reverse}.lg\:flex-wrap{flex-wrap:wrap}.lg\:flex-nowrap{flex-wrap:nowrap}.lg\:flex-wrap-reverse{flex-wrap:wrap-reverse}.lg\:justify-start{justify-content:flex-start}.lg\:justify-center{justify-content:center}.lg\:justify-end{justify-content:flex-end}.lg\:justify-between{justify-content:space-between}.lg\:justify-around{justify-content:space-around}.lg\:justify-evenly{justify-content:space-evenly}.lg\:items-start{align-items:flex-start}.lg\:items-center{align-items:center}.lg\:items-end{align-items:flex-end}.lg\:items-stretch{align-items:stretch}.lg\:flex-1{flex:1 1 0}.lg\:flex-none{flex:none}}@media (max-width:1280px){.xl\:flex{display:flex}.xl\:inline-flex{display:inline-flex}.xl\:flex-row{flex-direction:row}.xl\:flex-row-reverse{flex-direction:row-reverse}.xl\:flex-col{flex-direction:column}.xl\:flex-col-reverse{flex-direction:column-reverse}.xl\:flex-wrap{flex-wrap:wrap}.xl\:flex-nowrap{flex-wrap:nowrap}.xl\:flex-wrap-reverse{flex-wrap:wrap-reverse}.xl\:justify-start{justify-content:flex-start}.xl\:justify-center{justify-content:center}.xl\:justify-end{justify-content:flex-end}.xl\:justify-between{justify-content:space-between}.xl\:justify-around{justify-content:space-around}.xl\:justify-evenly{justify-content:space-evenly}.xl\:items-start{align-items:flex-start}.xl\:items-center{align-items:center}.xl\:items-end{align-items:flex-end}.xl\:items-stretch{align-items:stretch}.xl\:flex-1{flex:1 1 0}.xl\:flex-none{flex:none}}