@memelabui/ui 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -136,14 +136,23 @@
136
136
  transform: rotate(360deg);
137
137
  }
138
138
  }
139
- /* Reduced motion */
139
+ /* Reduced motion — scoped to library classes only, no global !important */
140
140
  @media (prefers-reduced-motion: reduce) {
141
- *,
142
- *::before,
143
- *::after {
144
- animation-duration: 0.01ms !important;
145
- animation-iteration-count: 1 !important;
146
- transition-duration: 0.01ms !important;
141
+ .glass,
142
+ .surface,
143
+ .surface-hover,
144
+ .animated-gradient,
145
+ [class*='animate-float'],
146
+ [class*='animate-gradient'],
147
+ [class*='animate-pulse-glow'],
148
+ [class*='animate-fade-up'],
149
+ [class*='animate-modal'],
150
+ [class*='animate-shimmer'],
151
+ [class*='animate-spin'],
152
+ [class*='animate-pulse'] {
153
+ animation-duration: 0.01ms;
154
+ animation-iteration-count: 1;
155
+ transition-duration: 0.01ms;
147
156
  }
148
157
  }
149
158
  *, ::before, ::after {
@@ -645,37 +654,6 @@ a {
645
654
  max-width: 1536px;
646
655
  }
647
656
  }
648
- .glass {
649
- border-radius: var(--ml-radius-md, 0.75rem);
650
- background: var(--ml-glass-bg, rgba(255, 255, 255, 0.05));
651
- backdrop-filter: blur(var(--ml-glass-blur, 16px));
652
- -webkit-backdrop-filter: blur(var(--ml-glass-blur, 16px));
653
- box-shadow: 0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px var(--ml-glass-border, rgba(255,255,255,0.1));
654
- }
655
- .surface {
656
- border-radius: var(--ml-radius-md, 0.75rem);
657
- background: rgba(255, 255, 255, 0.06);
658
- backdrop-filter: blur(12px);
659
- -webkit-backdrop-filter: blur(12px);
660
- box-shadow: var(--ml-shadow-surface, 0 1px 3px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08));
661
- }
662
- .surface-hover {
663
- transition: box-shadow var(--ml-transition-fast, 150ms ease);
664
- }
665
- .surface-hover:hover {
666
- box-shadow: var(--ml-shadow-surface-hover, 0 10px 25px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.09));
667
- }
668
- .text-gradient {
669
- background: linear-gradient(135deg, var(--ml-accent,#667eea) 0%, var(--ml-glow-purple,#764ba2) 50%, var(--ml-glow-pink,#f093fb) 100%);
670
- -webkit-background-clip: text;
671
- -webkit-text-fill-color: transparent;
672
- background-clip: text;
673
- }
674
- .animated-gradient {
675
- background: linear-gradient(270deg, var(--ml-accent,#667eea), var(--ml-glow-purple,#764ba2), var(--ml-glow-pink,#f093fb));
676
- background-size: 400% 400%;
677
- animation: ml-gradient 15s ease infinite;
678
- }
679
657
  /* Glass morphism */
680
658
  .glass {
681
659
  border-radius: var(--ml-radius-md, 0.75rem);
@@ -709,17 +687,6 @@ a {
709
687
  );
710
688
  }
711
689
  /* Gradient text */
712
- .text-gradient {
713
- background: linear-gradient(
714
- 135deg,
715
- var(--ml-accent, #667eea) 0%,
716
- var(--ml-glow-purple, #764ba2) 50%,
717
- var(--ml-glow-pink, #f093fb) 100%
718
- );
719
- -webkit-background-clip: text;
720
- -webkit-text-fill-color: transparent;
721
- background-clip: text;
722
- }
723
690
  /* Animated gradient background */
724
691
  .animated-gradient {
725
692
  background: linear-gradient(
@@ -752,9 +719,23 @@ a {
752
719
  }
753
720
  /* Hide scrollbar */
754
721
  /* Soft link */
722
+ .sr-only {
723
+ position: absolute;
724
+ width: 1px;
725
+ height: 1px;
726
+ padding: 0;
727
+ margin: -1px;
728
+ overflow: hidden;
729
+ clip: rect(0, 0, 0, 0);
730
+ white-space: nowrap;
731
+ border-width: 0;
732
+ }
755
733
  .pointer-events-none {
756
734
  pointer-events: none;
757
735
  }
736
+ .pointer-events-auto {
737
+ pointer-events: auto;
738
+ }
758
739
  .visible {
759
740
  visibility: visible;
760
741
  }
@@ -797,21 +778,48 @@ a {
797
778
  .bottom-0 {
798
779
  bottom: 0px;
799
780
  }
781
+ .bottom-4 {
782
+ bottom: 1rem;
783
+ }
784
+ .left-0 {
785
+ left: 0px;
786
+ }
800
787
  .left-0\.5 {
801
788
  left: 0.125rem;
802
789
  }
803
790
  .left-1\/2 {
804
791
  left: 50%;
805
792
  }
793
+ .left-3 {
794
+ left: 0.75rem;
795
+ }
796
+ .right-2 {
797
+ right: 0.5rem;
798
+ }
799
+ .right-3 {
800
+ right: 0.75rem;
801
+ }
802
+ .right-4 {
803
+ right: 1rem;
804
+ }
806
805
  .top-0 {
807
806
  top: 0px;
808
807
  }
809
808
  .top-0\.5 {
810
809
  top: 0.125rem;
811
810
  }
811
+ .top-1\/2 {
812
+ top: 50%;
813
+ }
814
+ .top-2 {
815
+ top: 0.5rem;
816
+ }
812
817
  .top-20 {
813
818
  top: 5rem;
814
819
  }
820
+ .top-4 {
821
+ top: 1rem;
822
+ }
815
823
  .top-\[60\%\] {
816
824
  top: 60%;
817
825
  }
@@ -824,10 +832,23 @@ a {
824
832
  .z-\[9999\] {
825
833
  z-index: 9999;
826
834
  }
835
+ .float-none {
836
+ float: none;
837
+ }
838
+ .m-0 {
839
+ margin: 0px;
840
+ }
827
841
  .mx-auto {
828
842
  margin-left: auto;
829
843
  margin-right: auto;
830
844
  }
845
+ .my-1 {
846
+ margin-top: 0.25rem;
847
+ margin-bottom: 0.25rem;
848
+ }
849
+ .-mb-px {
850
+ margin-bottom: -1px;
851
+ }
831
852
  .mb-1\.5 {
832
853
  margin-bottom: 0.375rem;
833
854
  }
@@ -843,9 +864,21 @@ a {
843
864
  .mb-6 {
844
865
  margin-bottom: 1.5rem;
845
866
  }
867
+ .ml-7 {
868
+ margin-left: 1.75rem;
869
+ }
870
+ .mt-0\.5 {
871
+ margin-top: 0.125rem;
872
+ }
846
873
  .mt-1 {
847
874
  margin-top: 0.25rem;
848
875
  }
876
+ .mt-1\.5 {
877
+ margin-top: 0.375rem;
878
+ }
879
+ .mt-4 {
880
+ margin-top: 1rem;
881
+ }
849
882
  .block {
850
883
  display: block;
851
884
  }
@@ -864,6 +897,9 @@ a {
864
897
  .hidden {
865
898
  display: none;
866
899
  }
900
+ .h-0\.5 {
901
+ height: 0.125rem;
902
+ }
867
903
  .h-10 {
868
904
  height: 2.5rem;
869
905
  }
@@ -879,6 +915,9 @@ a {
879
915
  .h-16 {
880
916
  height: 4rem;
881
917
  }
918
+ .h-2\.5 {
919
+ height: 0.625rem;
920
+ }
882
921
  .h-20 {
883
922
  height: 5rem;
884
923
  }
@@ -906,6 +945,9 @@ a {
906
945
  .h-9 {
907
946
  height: 2.25rem;
908
947
  }
948
+ .h-\[2px\] {
949
+ height: 2px;
950
+ }
909
951
  .h-\[300px\] {
910
952
  height: 300px;
911
953
  }
@@ -942,6 +984,9 @@ a {
942
984
  .w-16 {
943
985
  width: 4rem;
944
986
  }
987
+ .w-2\.5 {
988
+ width: 0.625rem;
989
+ }
945
990
  .w-20 {
946
991
  width: 5rem;
947
992
  }
@@ -981,12 +1026,18 @@ a {
981
1026
  .w-8 {
982
1027
  width: 2rem;
983
1028
  }
1029
+ .w-80 {
1030
+ width: 20rem;
1031
+ }
984
1032
  .w-9 {
985
1033
  width: 2.25rem;
986
1034
  }
987
1035
  .w-\[300px\] {
988
1036
  width: 300px;
989
1037
  }
1038
+ .w-\[3px\] {
1039
+ width: 3px;
1040
+ }
990
1041
  .w-\[400px\] {
991
1042
  width: 400px;
992
1043
  }
@@ -996,12 +1047,19 @@ a {
996
1047
  .w-\[600px\] {
997
1048
  width: 600px;
998
1049
  }
1050
+ .w-fit {
1051
+ width: -moz-fit-content;
1052
+ width: fit-content;
1053
+ }
999
1054
  .w-full {
1000
1055
  width: 100%;
1001
1056
  }
1002
1057
  .min-w-0 {
1003
1058
  min-width: 0px;
1004
1059
  }
1060
+ .min-w-\[10rem\] {
1061
+ min-width: 10rem;
1062
+ }
1005
1063
  .max-w-2xl {
1006
1064
  max-width: 42rem;
1007
1065
  }
@@ -1020,6 +1078,9 @@ a {
1020
1078
  .max-w-\[92rem\] {
1021
1079
  max-width: 92rem;
1022
1080
  }
1081
+ .max-w-\[calc\(100vw-2rem\)\] {
1082
+ max-width: calc(100vw - 2rem);
1083
+ }
1023
1084
  .max-w-full {
1024
1085
  max-width: 100%;
1025
1086
  }
@@ -1029,10 +1090,21 @@ a {
1029
1090
  .flex-1 {
1030
1091
  flex: 1 1 0%;
1031
1092
  }
1093
+ .shrink-0 {
1094
+ flex-shrink: 0;
1095
+ }
1032
1096
  .-translate-x-1\/2 {
1033
1097
  --tw-translate-x: -50%;
1034
1098
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1035
1099
  }
1100
+ .-translate-y-1 {
1101
+ --tw-translate-y: -0.25rem;
1102
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1103
+ }
1104
+ .-translate-y-1\/2 {
1105
+ --tw-translate-y: -50%;
1106
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1107
+ }
1036
1108
  .translate-x-0 {
1037
1109
  --tw-translate-x: 0px;
1038
1110
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1045,6 +1117,14 @@ a {
1045
1117
  --tw-translate-x: 1.25rem;
1046
1118
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1047
1119
  }
1120
+ .translate-x-8 {
1121
+ --tw-translate-x: 2rem;
1122
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1123
+ }
1124
+ .translate-y-0 {
1125
+ --tw-translate-y: 0px;
1126
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1127
+ }
1048
1128
  .rotate-180 {
1049
1129
  --tw-rotate: 180deg;
1050
1130
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1053,9 +1133,29 @@ a {
1053
1133
  --tw-rotate: 90deg;
1054
1134
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1055
1135
  }
1136
+ .skew-x-\[-20deg\] {
1137
+ --tw-skew-x: -20deg;
1138
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1139
+ }
1140
+ .scale-95 {
1141
+ --tw-scale-x: .95;
1142
+ --tw-scale-y: .95;
1143
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1144
+ }
1056
1145
  .transform {
1057
1146
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1058
1147
  }
1148
+ @keyframes ml-shimmer {
1149
+ 0% {
1150
+ transform: translateX(-200%);
1151
+ }
1152
+ 100% {
1153
+ transform: translateX(200%);
1154
+ }
1155
+ }
1156
+ .animate-\[ml-shimmer_2s_ease-in-out_infinite\] {
1157
+ animation: ml-shimmer 2s ease-in-out infinite;
1158
+ }
1059
1159
  @keyframes ml-modal-backdrop {
1060
1160
  from {
1061
1161
  opacity: 0;
@@ -1088,13 +1188,16 @@ a {
1088
1188
  .animate-pulse {
1089
1189
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1090
1190
  }
1091
- @keyframes spin {
1191
+ @keyframes ml-spin {
1192
+ from {
1193
+ transform: rotate(0deg);
1194
+ }
1092
1195
  to {
1093
1196
  transform: rotate(360deg);
1094
1197
  }
1095
1198
  }
1096
1199
  .animate-spin {
1097
- animation: spin 1s linear infinite;
1200
+ animation: ml-spin 1s linear infinite;
1098
1201
  }
1099
1202
  .cursor-not-allowed {
1100
1203
  cursor: not-allowed;
@@ -1122,6 +1225,9 @@ a {
1122
1225
  .grid-rows-\[1fr\] {
1123
1226
  grid-template-rows: 1fr;
1124
1227
  }
1228
+ .flex-row {
1229
+ flex-direction: row;
1230
+ }
1125
1231
  .flex-col {
1126
1232
  flex-direction: column;
1127
1233
  }
@@ -1131,6 +1237,9 @@ a {
1131
1237
  .flex-wrap {
1132
1238
  flex-wrap: wrap;
1133
1239
  }
1240
+ .items-start {
1241
+ align-items: flex-start;
1242
+ }
1134
1243
  .items-end {
1135
1244
  align-items: flex-end;
1136
1245
  }
@@ -1152,6 +1261,9 @@ a {
1152
1261
  .gap-2 {
1153
1262
  gap: 0.5rem;
1154
1263
  }
1264
+ .gap-2\.5 {
1265
+ gap: 0.625rem;
1266
+ }
1155
1267
  .gap-3 {
1156
1268
  gap: 0.75rem;
1157
1269
  }
@@ -1183,18 +1295,27 @@ a {
1183
1295
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
1184
1296
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
1185
1297
  }
1298
+ .self-stretch {
1299
+ align-self: stretch;
1300
+ }
1186
1301
  .overflow-hidden {
1187
1302
  overflow: hidden;
1188
1303
  }
1189
1304
  .overflow-y-auto {
1190
1305
  overflow-y: auto;
1191
1306
  }
1307
+ .rounded-2xl {
1308
+ border-radius: 1rem;
1309
+ }
1192
1310
  .rounded-full {
1193
1311
  border-radius: 9999px;
1194
1312
  }
1195
1313
  .rounded-lg {
1196
1314
  border-radius: 0.5rem;
1197
1315
  }
1316
+ .rounded-md {
1317
+ border-radius: 0.375rem;
1318
+ }
1198
1319
  .rounded-xl {
1199
1320
  border-radius: 0.75rem;
1200
1321
  }
@@ -1211,12 +1332,33 @@ a {
1211
1332
  .border-b {
1212
1333
  border-bottom-width: 1px;
1213
1334
  }
1335
+ .border-b-2 {
1336
+ border-bottom-width: 2px;
1337
+ }
1338
+ .border-t {
1339
+ border-top-width: 1px;
1340
+ }
1341
+ .border-dashed {
1342
+ border-style: dashed;
1343
+ }
1344
+ .border-none {
1345
+ border-style: none;
1346
+ }
1347
+ .border-primary {
1348
+ border-color: var(--ml-primary);
1349
+ }
1350
+ .border-transparent {
1351
+ border-color: transparent;
1352
+ }
1214
1353
  .border-white\/10 {
1215
1354
  border-color: rgb(255 255 255 / 0.1);
1216
1355
  }
1217
1356
  .border-white\/15 {
1218
1357
  border-color: rgb(255 255 255 / 0.15);
1219
1358
  }
1359
+ .border-white\/20 {
1360
+ border-color: rgb(255 255 255 / 0.2);
1361
+ }
1220
1362
  .border-white\/30 {
1221
1363
  border-color: rgb(255 255 255 / 0.3);
1222
1364
  }
@@ -1227,8 +1369,9 @@ a {
1227
1369
  --tw-border-opacity: 1;
1228
1370
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
1229
1371
  }
1230
- .bg-\[\#0f0f18\]\/80 {
1231
- background-color: rgb(15 15 24 / 0.8);
1372
+ .bg-amber-500 {
1373
+ --tw-bg-opacity: 1;
1374
+ background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
1232
1375
  }
1233
1376
  .bg-amber-500\/15 {
1234
1377
  background-color: rgb(245 158 11 / 0.15);
@@ -1240,6 +1383,10 @@ a {
1240
1383
  .bg-black\/25 {
1241
1384
  background-color: rgb(0 0 0 / 0.25);
1242
1385
  }
1386
+ .bg-emerald-500 {
1387
+ --tw-bg-opacity: 1;
1388
+ background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
1389
+ }
1243
1390
  .bg-emerald-500\/15 {
1244
1391
  background-color: rgb(16 185 129 / 0.15);
1245
1392
  }
@@ -1247,19 +1394,16 @@ a {
1247
1394
  --tw-bg-opacity: 1;
1248
1395
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
1249
1396
  }
1250
- .bg-gray-900 {
1251
- --tw-bg-opacity: 1;
1252
- background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
1253
- }
1254
- .bg-indigo-500\/\[0\.10\] {
1255
- background-color: rgb(99 102 241 / 0.10);
1256
- }
1257
1397
  .bg-primary {
1258
1398
  background-color: var(--ml-primary);
1259
1399
  }
1260
1400
  .bg-purple-500\/\[0\.12\] {
1261
1401
  background-color: rgb(168 85 247 / 0.12);
1262
1402
  }
1403
+ .bg-rose-500 {
1404
+ --tw-bg-opacity: 1;
1405
+ background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
1406
+ }
1263
1407
  .bg-rose-500\/15 {
1264
1408
  background-color: rgb(244 63 94 / 0.15);
1265
1409
  }
@@ -1270,6 +1414,9 @@ a {
1270
1414
  .bg-surface {
1271
1415
  background-color: var(--ml-bg);
1272
1416
  }
1417
+ .bg-surface-100 {
1418
+ background-color: var(--ml-surface-100);
1419
+ }
1273
1420
  .bg-surface-300 {
1274
1421
  background-color: var(--ml-surface-300);
1275
1422
  }
@@ -1287,6 +1434,9 @@ a {
1287
1434
  .bg-white\/10 {
1288
1435
  background-color: rgb(255 255 255 / 0.1);
1289
1436
  }
1437
+ .bg-white\/20 {
1438
+ background-color: rgb(255 255 255 / 0.2);
1439
+ }
1290
1440
  .bg-white\/5 {
1291
1441
  background-color: rgb(255 255 255 / 0.05);
1292
1442
  }
@@ -1301,6 +1451,12 @@ a {
1301
1451
  .to-purple-600 {
1302
1452
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
1303
1453
  }
1454
+ .p-0 {
1455
+ padding: 0px;
1456
+ }
1457
+ .p-1 {
1458
+ padding: 0.25rem;
1459
+ }
1304
1460
  .p-1\.5 {
1305
1461
  padding: 0.375rem;
1306
1462
  }
@@ -1352,6 +1508,10 @@ a {
1352
1508
  padding-top: 0.375rem;
1353
1509
  padding-bottom: 0.375rem;
1354
1510
  }
1511
+ .py-10 {
1512
+ padding-top: 2.5rem;
1513
+ padding-bottom: 2.5rem;
1514
+ }
1355
1515
  .py-12 {
1356
1516
  padding-top: 3rem;
1357
1517
  padding-bottom: 3rem;
@@ -1375,6 +1535,15 @@ a {
1375
1535
  .pb-3 {
1376
1536
  padding-bottom: 0.75rem;
1377
1537
  }
1538
+ .pl-10 {
1539
+ padding-left: 2.5rem;
1540
+ }
1541
+ .pr-3 {
1542
+ padding-right: 0.75rem;
1543
+ }
1544
+ .pr-9 {
1545
+ padding-right: 2.25rem;
1546
+ }
1378
1547
  .pt-16 {
1379
1548
  padding-top: 4rem;
1380
1549
  }
@@ -1384,6 +1553,9 @@ a {
1384
1553
  .text-center {
1385
1554
  text-align: center;
1386
1555
  }
1556
+ .font-mono {
1557
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1558
+ }
1387
1559
  .text-2xl {
1388
1560
  font-size: 1.5rem;
1389
1561
  line-height: 2rem;
@@ -1392,6 +1564,9 @@ a {
1392
1564
  font-size: 1.875rem;
1393
1565
  line-height: 2.25rem;
1394
1566
  }
1567
+ .text-\[11px\] {
1568
+ font-size: 11px;
1569
+ }
1395
1570
  .text-base {
1396
1571
  font-size: 1rem;
1397
1572
  line-height: 1.5rem;
@@ -1424,12 +1599,12 @@ a {
1424
1599
  .leading-none {
1425
1600
  line-height: 1;
1426
1601
  }
1602
+ .leading-relaxed {
1603
+ line-height: 1.625;
1604
+ }
1427
1605
  .leading-snug {
1428
1606
  line-height: 1.375;
1429
1607
  }
1430
- .tracking-tight {
1431
- letter-spacing: -0.025em;
1432
- }
1433
1608
  .text-accent-light {
1434
1609
  color: var(--ml-accent-light);
1435
1610
  }
@@ -1448,6 +1623,10 @@ a {
1448
1623
  --tw-text-opacity: 1;
1449
1624
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
1450
1625
  }
1626
+ .text-violet-400 {
1627
+ --tw-text-opacity: 1;
1628
+ color: rgb(167 139 250 / var(--tw-text-opacity, 1));
1629
+ }
1451
1630
  .text-white {
1452
1631
  --tw-text-opacity: 1;
1453
1632
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1464,54 +1643,57 @@ a {
1464
1643
  .text-white\/70 {
1465
1644
  color: rgb(255 255 255 / 0.7);
1466
1645
  }
1646
+ .text-white\/80 {
1647
+ color: rgb(255 255 255 / 0.8);
1648
+ }
1467
1649
  .text-white\/90 {
1468
1650
  color: rgb(255 255 255 / 0.9);
1469
1651
  }
1652
+ .underline {
1653
+ text-decoration-line: underline;
1654
+ }
1470
1655
  .placeholder-white\/30::-moz-placeholder {
1471
1656
  color: rgb(255 255 255 / 0.3);
1472
1657
  }
1473
1658
  .placeholder-white\/30::placeholder {
1474
1659
  color: rgb(255 255 255 / 0.3);
1475
1660
  }
1661
+ .opacity-0 {
1662
+ opacity: 0;
1663
+ }
1476
1664
  .opacity-10 {
1477
1665
  opacity: 0.1;
1478
1666
  }
1667
+ .opacity-100 {
1668
+ opacity: 1;
1669
+ }
1479
1670
  .opacity-15 {
1480
1671
  opacity: 0.15;
1481
1672
  }
1673
+ .opacity-40 {
1674
+ opacity: 0.4;
1675
+ }
1482
1676
  .opacity-50 {
1483
1677
  opacity: 0.5;
1484
1678
  }
1679
+ .opacity-60 {
1680
+ opacity: 0.6;
1681
+ }
1485
1682
  .shadow {
1486
1683
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1487
1684
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1488
1685
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1489
1686
  }
1490
- .shadow-\[0_0_25px_rgba\(139\2c 92\2c 246\2c 0\.35\)\] {
1491
- --tw-shadow: 0 0 25px rgba(139,92,246,0.35);
1492
- --tw-shadow-colored: 0 0 25px var(--tw-shadow-color);
1493
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1494
- }
1495
- .shadow-\[0_10px_18px_rgba\(16\2c 185\2c 129\2c 0\.22\)\] {
1496
- --tw-shadow: 0 10px 18px rgba(16,185,129,0.22);
1497
- --tw-shadow-colored: 0 10px 18px var(--tw-shadow-color);
1498
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1499
- }
1500
- .shadow-\[0_10px_18px_rgba\(244\2c 63\2c 94\2c 0\.22\)\] {
1501
- --tw-shadow: 0 10px 18px rgba(244,63,94,0.22);
1502
- --tw-shadow-colored: 0 10px 18px var(--tw-shadow-color);
1503
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1504
- }
1505
- .shadow-\[0_10px_18px_rgba\(245\2c 158\2c 11\2c 0\.22\)\] {
1506
- --tw-shadow: 0 10px 18px rgba(245,158,11,0.22);
1507
- --tw-shadow-colored: 0 10px 18px var(--tw-shadow-color);
1508
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1509
- }
1510
1687
  .shadow-glow {
1511
1688
  --tw-shadow: var(--ml-shadow-glow);
1512
1689
  --tw-shadow-colored: var(--ml-shadow-glow);
1513
1690
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1514
1691
  }
1692
+ .shadow-lg {
1693
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1694
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1695
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1696
+ }
1515
1697
  .shadow-sm {
1516
1698
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1517
1699
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1522,6 +1704,18 @@ a {
1522
1704
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1523
1705
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1524
1706
  }
1707
+ .shadow-amber-600\/20 {
1708
+ --tw-shadow-color: rgb(217 119 6 / 0.2);
1709
+ --tw-shadow: var(--tw-shadow-colored);
1710
+ }
1711
+ .shadow-emerald-600\/20 {
1712
+ --tw-shadow-color: rgb(5 150 105 / 0.2);
1713
+ --tw-shadow: var(--tw-shadow-colored);
1714
+ }
1715
+ .shadow-rose-600\/20 {
1716
+ --tw-shadow-color: rgb(225 29 72 / 0.2);
1717
+ --tw-shadow: var(--tw-shadow-colored);
1718
+ }
1525
1719
  .outline-none {
1526
1720
  outline: 2px solid transparent;
1527
1721
  outline-offset: 2px;
@@ -1594,6 +1788,11 @@ a {
1594
1788
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1595
1789
  transition-duration: 150ms;
1596
1790
  }
1791
+ .transition-\[opacity\2c transform\] {
1792
+ transition-property: opacity,transform;
1793
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1794
+ transition-duration: 150ms;
1795
+ }
1597
1796
  .transition-\[transform\2c background-color\2c box-shadow\2c opacity\] {
1598
1797
  transition-property: transform,background-color,box-shadow,opacity;
1599
1798
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1604,6 +1803,11 @@ a {
1604
1803
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1605
1804
  transition-duration: 150ms;
1606
1805
  }
1806
+ .transition-all {
1807
+ transition-property: all;
1808
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1809
+ transition-duration: 150ms;
1810
+ }
1607
1811
  .transition-colors {
1608
1812
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1609
1813
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1619,12 +1823,24 @@ a {
1619
1823
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1620
1824
  transition-duration: 150ms;
1621
1825
  }
1826
+ .duration-100 {
1827
+ transition-duration: 100ms;
1828
+ }
1829
+ .duration-150 {
1830
+ transition-duration: 150ms;
1831
+ }
1622
1832
  .duration-200 {
1623
1833
  transition-duration: 200ms;
1624
1834
  }
1835
+ .duration-300 {
1836
+ transition-duration: 300ms;
1837
+ }
1625
1838
  .ease-in-out {
1626
1839
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1627
1840
  }
1841
+ .ease-linear {
1842
+ transition-timing-function: linear;
1843
+ }
1628
1844
  .ease-out {
1629
1845
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1630
1846
  }
@@ -1636,6 +1852,12 @@ a {
1636
1852
  --tw-scale-y: 1.02;
1637
1853
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1638
1854
  }
1855
+ .hover\:border-transparent:hover {
1856
+ border-color: transparent;
1857
+ }
1858
+ .hover\:border-white\/20:hover {
1859
+ border-color: rgb(255 255 255 / 0.2);
1860
+ }
1639
1861
  .hover\:bg-amber-700:hover {
1640
1862
  --tw-bg-opacity: 1;
1641
1863
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
@@ -1648,6 +1870,9 @@ a {
1648
1870
  --tw-bg-opacity: 1;
1649
1871
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
1650
1872
  }
1873
+ .hover\:bg-transparent:hover {
1874
+ background-color: transparent;
1875
+ }
1651
1876
  .hover\:bg-white\/10:hover {
1652
1877
  background-color: rgb(255 255 255 / 0.1);
1653
1878
  }
@@ -1660,13 +1885,28 @@ a {
1660
1885
  .hover\:bg-white\/\[0\.03\]:hover {
1661
1886
  background-color: rgb(255 255 255 / 0.03);
1662
1887
  }
1888
+ .hover\:bg-white\/\[0\.08\]:hover {
1889
+ background-color: rgb(255 255 255 / 0.08);
1890
+ }
1663
1891
  .hover\:text-white:hover {
1664
1892
  --tw-text-opacity: 1;
1665
1893
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1666
1894
  }
1667
- .hover\:shadow-\[0_0_35px_rgba\(139\2c 92\2c 246\2c 0\.5\)\]:hover {
1668
- --tw-shadow: 0 0 35px rgba(139,92,246,0.5);
1669
- --tw-shadow-colored: 0 0 35px var(--tw-shadow-color);
1895
+ .hover\:text-white\/40:hover {
1896
+ color: rgb(255 255 255 / 0.4);
1897
+ }
1898
+ .hover\:text-white\/50:hover {
1899
+ color: rgb(255 255 255 / 0.5);
1900
+ }
1901
+ .hover\:text-white\/70:hover {
1902
+ color: rgb(255 255 255 / 0.7);
1903
+ }
1904
+ .hover\:text-white\/80:hover {
1905
+ color: rgb(255 255 255 / 0.8);
1906
+ }
1907
+ .hover\:shadow-glow-lg:hover {
1908
+ --tw-shadow: var(--ml-shadow-glow-lg);
1909
+ --tw-shadow-colored: var(--ml-shadow-glow-lg);
1670
1910
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1671
1911
  }
1672
1912
  .hover\:ring-white\/20:hover {
@@ -1680,14 +1920,20 @@ a {
1680
1920
  outline: 2px solid transparent;
1681
1921
  outline-offset: 2px;
1682
1922
  }
1683
- .focus\:ring-2:focus {
1684
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1685
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1686
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1687
- }
1688
1923
  .focus\:ring-rose-500\/40:focus {
1689
1924
  --tw-ring-color: rgb(244 63 94 / 0.4);
1690
1925
  }
1926
+ .focus-visible\:bg-white\/10:focus-visible {
1927
+ background-color: rgb(255 255 255 / 0.1);
1928
+ }
1929
+ .focus-visible\:text-white:focus-visible {
1930
+ --tw-text-opacity: 1;
1931
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1932
+ }
1933
+ .focus-visible\:outline-none:focus-visible {
1934
+ outline: 2px solid transparent;
1935
+ outline-offset: 2px;
1936
+ }
1691
1937
  .focus-visible\:ring-2:focus-visible {
1692
1938
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1693
1939
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1696,6 +1942,9 @@ a {
1696
1942
  .focus-visible\:ring-primary:focus-visible {
1697
1943
  --tw-ring-color: var(--ml-primary);
1698
1944
  }
1945
+ .focus-visible\:ring-offset-1:focus-visible {
1946
+ --tw-ring-offset-width: 1px;
1947
+ }
1699
1948
  .focus-visible\:ring-offset-2:focus-visible {
1700
1949
  --tw-ring-offset-width: 2px;
1701
1950
  }
@@ -1715,6 +1964,17 @@ a {
1715
1964
  .disabled\:opacity-60:disabled {
1716
1965
  opacity: 0.6;
1717
1966
  }
1967
+ .peer:focus-visible ~ .peer-focus-visible\:ring-2 {
1968
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1969
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1970
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1971
+ }
1972
+ .peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
1973
+ --tw-ring-offset-width: 1px;
1974
+ }
1975
+ .peer:focus-visible ~ .peer-focus-visible\:ring-offset-transparent {
1976
+ --tw-ring-offset-color: transparent;
1977
+ }
1718
1978
  @media (min-width: 640px) {
1719
1979
  .sm\:mb-4 {
1720
1980
  margin-bottom: 1rem;