@memelabui/ui 0.1.1 → 0.3.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,41 @@ 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
+ }
841
+ .mx-2 {
842
+ margin-left: 0.5rem;
843
+ margin-right: 0.5rem;
844
+ }
845
+ .mx-3 {
846
+ margin-left: 0.75rem;
847
+ margin-right: 0.75rem;
848
+ }
827
849
  .mx-auto {
828
850
  margin-left: auto;
829
851
  margin-right: auto;
830
852
  }
853
+ .my-1 {
854
+ margin-top: 0.25rem;
855
+ margin-bottom: 0.25rem;
856
+ }
857
+ .my-3 {
858
+ margin-top: 0.75rem;
859
+ margin-bottom: 0.75rem;
860
+ }
861
+ .-mb-px {
862
+ margin-bottom: -1px;
863
+ }
864
+ .mb-0\.5 {
865
+ margin-bottom: 0.125rem;
866
+ }
867
+ .mb-1 {
868
+ margin-bottom: 0.25rem;
869
+ }
831
870
  .mb-1\.5 {
832
871
  margin-bottom: 0.375rem;
833
872
  }
@@ -843,27 +882,57 @@ a {
843
882
  .mb-6 {
844
883
  margin-bottom: 1.5rem;
845
884
  }
885
+ .ml-7 {
886
+ margin-left: 1.75rem;
887
+ }
888
+ .ml-auto {
889
+ margin-left: auto;
890
+ }
891
+ .mt-0\.5 {
892
+ margin-top: 0.125rem;
893
+ }
846
894
  .mt-1 {
847
895
  margin-top: 0.25rem;
848
896
  }
897
+ .mt-1\.5 {
898
+ margin-top: 0.375rem;
899
+ }
900
+ .mt-2 {
901
+ margin-top: 0.5rem;
902
+ }
903
+ .mt-4 {
904
+ margin-top: 1rem;
905
+ }
849
906
  .block {
850
907
  display: block;
851
908
  }
852
909
  .inline-block {
853
910
  display: inline-block;
854
911
  }
912
+ .inline {
913
+ display: inline;
914
+ }
855
915
  .flex {
856
916
  display: flex;
857
917
  }
858
918
  .inline-flex {
859
919
  display: inline-flex;
860
920
  }
921
+ .table {
922
+ display: table;
923
+ }
861
924
  .grid {
862
925
  display: grid;
863
926
  }
864
927
  .hidden {
865
928
  display: none;
866
929
  }
930
+ .h-0\.5 {
931
+ height: 0.125rem;
932
+ }
933
+ .h-1 {
934
+ height: 0.25rem;
935
+ }
867
936
  .h-10 {
868
937
  height: 2.5rem;
869
938
  }
@@ -879,6 +948,12 @@ a {
879
948
  .h-16 {
880
949
  height: 4rem;
881
950
  }
951
+ .h-2 {
952
+ height: 0.5rem;
953
+ }
954
+ .h-2\.5 {
955
+ height: 0.625rem;
956
+ }
882
957
  .h-20 {
883
958
  height: 5rem;
884
959
  }
@@ -906,6 +981,9 @@ a {
906
981
  .h-9 {
907
982
  height: 2.25rem;
908
983
  }
984
+ .h-\[2px\] {
985
+ height: 2px;
986
+ }
909
987
  .h-\[300px\] {
910
988
  height: 300px;
911
989
  }
@@ -921,6 +999,9 @@ a {
921
999
  .h-full {
922
1000
  height: 100%;
923
1001
  }
1002
+ .min-h-\[42px\] {
1003
+ min-height: 42px;
1004
+ }
924
1005
  .min-h-full {
925
1006
  min-height: 100%;
926
1007
  }
@@ -942,6 +1023,9 @@ a {
942
1023
  .w-16 {
943
1024
  width: 4rem;
944
1025
  }
1026
+ .w-2\.5 {
1027
+ width: 0.625rem;
1028
+ }
945
1029
  .w-20 {
946
1030
  width: 5rem;
947
1031
  }
@@ -981,12 +1065,18 @@ a {
981
1065
  .w-8 {
982
1066
  width: 2rem;
983
1067
  }
1068
+ .w-80 {
1069
+ width: 20rem;
1070
+ }
984
1071
  .w-9 {
985
1072
  width: 2.25rem;
986
1073
  }
987
1074
  .w-\[300px\] {
988
1075
  width: 300px;
989
1076
  }
1077
+ .w-\[3px\] {
1078
+ width: 3px;
1079
+ }
990
1080
  .w-\[400px\] {
991
1081
  width: 400px;
992
1082
  }
@@ -996,12 +1086,22 @@ a {
996
1086
  .w-\[600px\] {
997
1087
  width: 600px;
998
1088
  }
1089
+ .w-fit {
1090
+ width: -moz-fit-content;
1091
+ width: fit-content;
1092
+ }
999
1093
  .w-full {
1000
1094
  width: 100%;
1001
1095
  }
1002
1096
  .min-w-0 {
1003
1097
  min-width: 0px;
1004
1098
  }
1099
+ .min-w-\[10rem\] {
1100
+ min-width: 10rem;
1101
+ }
1102
+ .min-w-\[120px\] {
1103
+ min-width: 120px;
1104
+ }
1005
1105
  .max-w-2xl {
1006
1106
  max-width: 42rem;
1007
1107
  }
@@ -1017,9 +1117,15 @@ a {
1017
1117
  .max-w-\[320px\] {
1018
1118
  max-width: 320px;
1019
1119
  }
1120
+ .max-w-\[6rem\] {
1121
+ max-width: 6rem;
1122
+ }
1020
1123
  .max-w-\[92rem\] {
1021
1124
  max-width: 92rem;
1022
1125
  }
1126
+ .max-w-\[calc\(100vw-2rem\)\] {
1127
+ max-width: calc(100vw - 2rem);
1128
+ }
1023
1129
  .max-w-full {
1024
1130
  max-width: 100%;
1025
1131
  }
@@ -1029,10 +1135,24 @@ a {
1029
1135
  .flex-1 {
1030
1136
  flex: 1 1 0%;
1031
1137
  }
1138
+ .flex-shrink-0 {
1139
+ flex-shrink: 0;
1140
+ }
1141
+ .shrink-0 {
1142
+ flex-shrink: 0;
1143
+ }
1032
1144
  .-translate-x-1\/2 {
1033
1145
  --tw-translate-x: -50%;
1034
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));
1035
1147
  }
1148
+ .-translate-y-1 {
1149
+ --tw-translate-y: -0.25rem;
1150
+ 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));
1151
+ }
1152
+ .-translate-y-1\/2 {
1153
+ --tw-translate-y: -50%;
1154
+ 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));
1155
+ }
1036
1156
  .translate-x-0 {
1037
1157
  --tw-translate-x: 0px;
1038
1158
  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 +1165,14 @@ a {
1045
1165
  --tw-translate-x: 1.25rem;
1046
1166
  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
1167
  }
1168
+ .translate-x-8 {
1169
+ --tw-translate-x: 2rem;
1170
+ 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));
1171
+ }
1172
+ .translate-y-0 {
1173
+ --tw-translate-y: 0px;
1174
+ 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));
1175
+ }
1048
1176
  .rotate-180 {
1049
1177
  --tw-rotate: 180deg;
1050
1178
  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 +1181,29 @@ a {
1053
1181
  --tw-rotate: 90deg;
1054
1182
  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
1183
  }
1184
+ .skew-x-\[-20deg\] {
1185
+ --tw-skew-x: -20deg;
1186
+ 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));
1187
+ }
1188
+ .scale-95 {
1189
+ --tw-scale-x: .95;
1190
+ --tw-scale-y: .95;
1191
+ 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));
1192
+ }
1056
1193
  .transform {
1057
1194
  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
1195
  }
1196
+ @keyframes ml-shimmer {
1197
+ 0% {
1198
+ transform: translateX(-200%);
1199
+ }
1200
+ 100% {
1201
+ transform: translateX(200%);
1202
+ }
1203
+ }
1204
+ .animate-\[ml-shimmer_2s_ease-in-out_infinite\] {
1205
+ animation: ml-shimmer 2s ease-in-out infinite;
1206
+ }
1059
1207
  @keyframes ml-modal-backdrop {
1060
1208
  from {
1061
1209
  opacity: 0;
@@ -1088,13 +1236,16 @@ a {
1088
1236
  .animate-pulse {
1089
1237
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1090
1238
  }
1091
- @keyframes spin {
1239
+ @keyframes ml-spin {
1240
+ from {
1241
+ transform: rotate(0deg);
1242
+ }
1092
1243
  to {
1093
1244
  transform: rotate(360deg);
1094
1245
  }
1095
1246
  }
1096
1247
  .animate-spin {
1097
- animation: spin 1s linear infinite;
1248
+ animation: ml-spin 1s linear infinite;
1098
1249
  }
1099
1250
  .cursor-not-allowed {
1100
1251
  cursor: not-allowed;
@@ -1107,12 +1258,22 @@ a {
1107
1258
  -moz-user-select: none;
1108
1259
  user-select: none;
1109
1260
  }
1261
+ .select-all {
1262
+ -webkit-user-select: all;
1263
+ -moz-user-select: all;
1264
+ user-select: all;
1265
+ }
1110
1266
  .resize-y {
1111
1267
  resize: vertical;
1112
1268
  }
1113
1269
  .resize {
1114
1270
  resize: both;
1115
1271
  }
1272
+ .appearance-none {
1273
+ -webkit-appearance: none;
1274
+ -moz-appearance: none;
1275
+ appearance: none;
1276
+ }
1116
1277
  .grid-cols-1 {
1117
1278
  grid-template-columns: repeat(1, minmax(0, 1fr));
1118
1279
  }
@@ -1122,6 +1283,9 @@ a {
1122
1283
  .grid-rows-\[1fr\] {
1123
1284
  grid-template-rows: 1fr;
1124
1285
  }
1286
+ .flex-row {
1287
+ flex-direction: row;
1288
+ }
1125
1289
  .flex-col {
1126
1290
  flex-direction: column;
1127
1291
  }
@@ -1131,6 +1295,9 @@ a {
1131
1295
  .flex-wrap {
1132
1296
  flex-wrap: wrap;
1133
1297
  }
1298
+ .items-start {
1299
+ align-items: flex-start;
1300
+ }
1134
1301
  .items-end {
1135
1302
  align-items: flex-end;
1136
1303
  }
@@ -1146,12 +1313,21 @@ a {
1146
1313
  .justify-between {
1147
1314
  justify-content: space-between;
1148
1315
  }
1316
+ .gap-0\.5 {
1317
+ gap: 0.125rem;
1318
+ }
1149
1319
  .gap-1 {
1150
1320
  gap: 0.25rem;
1151
1321
  }
1322
+ .gap-1\.5 {
1323
+ gap: 0.375rem;
1324
+ }
1152
1325
  .gap-2 {
1153
1326
  gap: 0.5rem;
1154
1327
  }
1328
+ .gap-2\.5 {
1329
+ gap: 0.625rem;
1330
+ }
1155
1331
  .gap-3 {
1156
1332
  gap: 0.75rem;
1157
1333
  }
@@ -1163,6 +1339,11 @@ a {
1163
1339
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1164
1340
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1165
1341
  }
1342
+ .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
1343
+ --tw-space-y-reverse: 0;
1344
+ margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
1345
+ margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
1346
+ }
1166
1347
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
1167
1348
  --tw-space-y-reverse: 0;
1168
1349
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1183,18 +1364,43 @@ a {
1183
1364
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
1184
1365
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
1185
1366
  }
1367
+ .divide-y > :not([hidden]) ~ :not([hidden]) {
1368
+ --tw-divide-y-reverse: 0;
1369
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1370
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
1371
+ }
1372
+ .divide-white\/\[0\.06\] > :not([hidden]) ~ :not([hidden]) {
1373
+ border-color: rgb(255 255 255 / 0.06);
1374
+ }
1375
+ .self-start {
1376
+ align-self: flex-start;
1377
+ }
1378
+ .self-stretch {
1379
+ align-self: stretch;
1380
+ }
1186
1381
  .overflow-hidden {
1187
1382
  overflow: hidden;
1188
1383
  }
1189
1384
  .overflow-y-auto {
1190
1385
  overflow-y: auto;
1191
1386
  }
1387
+ .truncate {
1388
+ overflow: hidden;
1389
+ text-overflow: ellipsis;
1390
+ white-space: nowrap;
1391
+ }
1392
+ .rounded-2xl {
1393
+ border-radius: 1rem;
1394
+ }
1192
1395
  .rounded-full {
1193
1396
  border-radius: 9999px;
1194
1397
  }
1195
1398
  .rounded-lg {
1196
1399
  border-radius: 0.5rem;
1197
1400
  }
1401
+ .rounded-md {
1402
+ border-radius: 0.375rem;
1403
+ }
1198
1404
  .rounded-xl {
1199
1405
  border-radius: 0.75rem;
1200
1406
  }
@@ -1211,12 +1417,55 @@ a {
1211
1417
  .border-b {
1212
1418
  border-bottom-width: 1px;
1213
1419
  }
1420
+ .border-b-2 {
1421
+ border-bottom-width: 2px;
1422
+ }
1423
+ .border-l {
1424
+ border-left-width: 1px;
1425
+ }
1426
+ .border-l-4 {
1427
+ border-left-width: 4px;
1428
+ }
1429
+ .border-t {
1430
+ border-top-width: 1px;
1431
+ }
1432
+ .border-dashed {
1433
+ border-style: dashed;
1434
+ }
1435
+ .border-none {
1436
+ border-style: none;
1437
+ }
1438
+ .border-amber-500 {
1439
+ --tw-border-opacity: 1;
1440
+ border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
1441
+ }
1442
+ .border-blue-500 {
1443
+ --tw-border-opacity: 1;
1444
+ border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
1445
+ }
1446
+ .border-emerald-500 {
1447
+ --tw-border-opacity: 1;
1448
+ border-color: rgb(16 185 129 / var(--tw-border-opacity, 1));
1449
+ }
1450
+ .border-primary {
1451
+ border-color: var(--ml-primary);
1452
+ }
1453
+ .border-rose-500 {
1454
+ --tw-border-opacity: 1;
1455
+ border-color: rgb(244 63 94 / var(--tw-border-opacity, 1));
1456
+ }
1457
+ .border-transparent {
1458
+ border-color: transparent;
1459
+ }
1214
1460
  .border-white\/10 {
1215
1461
  border-color: rgb(255 255 255 / 0.1);
1216
1462
  }
1217
1463
  .border-white\/15 {
1218
1464
  border-color: rgb(255 255 255 / 0.15);
1219
1465
  }
1466
+ .border-white\/20 {
1467
+ border-color: rgb(255 255 255 / 0.2);
1468
+ }
1220
1469
  .border-white\/30 {
1221
1470
  border-color: rgb(255 255 255 / 0.3);
1222
1471
  }
@@ -1227,8 +1476,9 @@ a {
1227
1476
  --tw-border-opacity: 1;
1228
1477
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
1229
1478
  }
1230
- .bg-\[\#0f0f18\]\/80 {
1231
- background-color: rgb(15 15 24 / 0.8);
1479
+ .bg-amber-500 {
1480
+ --tw-bg-opacity: 1;
1481
+ background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
1232
1482
  }
1233
1483
  .bg-amber-500\/15 {
1234
1484
  background-color: rgb(245 158 11 / 0.15);
@@ -1240,6 +1490,10 @@ a {
1240
1490
  .bg-black\/25 {
1241
1491
  background-color: rgb(0 0 0 / 0.25);
1242
1492
  }
1493
+ .bg-emerald-500 {
1494
+ --tw-bg-opacity: 1;
1495
+ background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
1496
+ }
1243
1497
  .bg-emerald-500\/15 {
1244
1498
  background-color: rgb(16 185 129 / 0.15);
1245
1499
  }
@@ -1247,19 +1501,16 @@ a {
1247
1501
  --tw-bg-opacity: 1;
1248
1502
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
1249
1503
  }
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
1504
  .bg-primary {
1258
1505
  background-color: var(--ml-primary);
1259
1506
  }
1260
1507
  .bg-purple-500\/\[0\.12\] {
1261
1508
  background-color: rgb(168 85 247 / 0.12);
1262
1509
  }
1510
+ .bg-rose-500 {
1511
+ --tw-bg-opacity: 1;
1512
+ background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
1513
+ }
1263
1514
  .bg-rose-500\/15 {
1264
1515
  background-color: rgb(244 63 94 / 0.15);
1265
1516
  }
@@ -1270,9 +1521,15 @@ a {
1270
1521
  .bg-surface {
1271
1522
  background-color: var(--ml-bg);
1272
1523
  }
1524
+ .bg-surface-100 {
1525
+ background-color: var(--ml-surface-100);
1526
+ }
1273
1527
  .bg-surface-300 {
1274
1528
  background-color: var(--ml-surface-300);
1275
1529
  }
1530
+ .bg-transparent {
1531
+ background-color: transparent;
1532
+ }
1276
1533
  .bg-violet-600 {
1277
1534
  --tw-bg-opacity: 1;
1278
1535
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
@@ -1287,20 +1544,44 @@ a {
1287
1544
  .bg-white\/10 {
1288
1545
  background-color: rgb(255 255 255 / 0.1);
1289
1546
  }
1547
+ .bg-white\/20 {
1548
+ background-color: rgb(255 255 255 / 0.2);
1549
+ }
1290
1550
  .bg-white\/5 {
1291
1551
  background-color: rgb(255 255 255 / 0.05);
1292
1552
  }
1553
+ .bg-gradient-to-br {
1554
+ background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
1555
+ }
1293
1556
  .bg-gradient-to-r {
1294
1557
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
1295
1558
  }
1559
+ .from-primary {
1560
+ --tw-gradient-from: var(--ml-primary) var(--tw-gradient-from-position);
1561
+ --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1562
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1563
+ }
1296
1564
  .from-violet-600 {
1297
1565
  --tw-gradient-from: #7c3aed var(--tw-gradient-from-position);
1298
1566
  --tw-gradient-to: rgb(124 58 237 / 0) var(--tw-gradient-to-position);
1299
1567
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1300
1568
  }
1569
+ .to-accent {
1570
+ --tw-gradient-to: var(--ml-accent) var(--tw-gradient-to-position);
1571
+ }
1301
1572
  .to-purple-600 {
1302
1573
  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
1303
1574
  }
1575
+ .object-cover {
1576
+ -o-object-fit: cover;
1577
+ object-fit: cover;
1578
+ }
1579
+ .p-0 {
1580
+ padding: 0px;
1581
+ }
1582
+ .p-1 {
1583
+ padding: 0.25rem;
1584
+ }
1304
1585
  .p-1\.5 {
1305
1586
  padding: 0.375rem;
1306
1587
  }
@@ -1352,6 +1633,10 @@ a {
1352
1633
  padding-top: 0.375rem;
1353
1634
  padding-bottom: 0.375rem;
1354
1635
  }
1636
+ .py-10 {
1637
+ padding-top: 2.5rem;
1638
+ padding-bottom: 2.5rem;
1639
+ }
1355
1640
  .py-12 {
1356
1641
  padding-top: 3rem;
1357
1642
  padding-bottom: 3rem;
@@ -1375,6 +1660,18 @@ a {
1375
1660
  .pb-3 {
1376
1661
  padding-bottom: 0.75rem;
1377
1662
  }
1663
+ .pl-10 {
1664
+ padding-left: 2.5rem;
1665
+ }
1666
+ .pl-4 {
1667
+ padding-left: 1rem;
1668
+ }
1669
+ .pr-3 {
1670
+ padding-right: 0.75rem;
1671
+ }
1672
+ .pr-9 {
1673
+ padding-right: 2.25rem;
1674
+ }
1378
1675
  .pt-16 {
1379
1676
  padding-top: 4rem;
1380
1677
  }
@@ -1384,6 +1681,12 @@ a {
1384
1681
  .text-center {
1385
1682
  text-align: center;
1386
1683
  }
1684
+ .text-right {
1685
+ text-align: right;
1686
+ }
1687
+ .font-mono {
1688
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1689
+ }
1387
1690
  .text-2xl {
1388
1691
  font-size: 1.5rem;
1389
1692
  line-height: 2rem;
@@ -1392,6 +1695,9 @@ a {
1392
1695
  font-size: 1.875rem;
1393
1696
  line-height: 2.25rem;
1394
1697
  }
1698
+ .text-\[11px\] {
1699
+ font-size: 11px;
1700
+ }
1395
1701
  .text-base {
1396
1702
  font-size: 1rem;
1397
1703
  line-height: 1.5rem;
@@ -1421,14 +1727,24 @@ a {
1421
1727
  .font-semibold {
1422
1728
  font-weight: 600;
1423
1729
  }
1730
+ .uppercase {
1731
+ text-transform: uppercase;
1732
+ }
1733
+ .tabular-nums {
1734
+ --tw-numeric-spacing: tabular-nums;
1735
+ font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
1736
+ }
1424
1737
  .leading-none {
1425
1738
  line-height: 1;
1426
1739
  }
1740
+ .leading-relaxed {
1741
+ line-height: 1.625;
1742
+ }
1427
1743
  .leading-snug {
1428
1744
  line-height: 1.375;
1429
1745
  }
1430
- .tracking-tight {
1431
- letter-spacing: -0.025em;
1746
+ .tracking-wider {
1747
+ letter-spacing: 0.05em;
1432
1748
  }
1433
1749
  .text-accent-light {
1434
1750
  color: var(--ml-accent-light);
@@ -1437,6 +1753,10 @@ a {
1437
1753
  --tw-text-opacity: 1;
1438
1754
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
1439
1755
  }
1756
+ .text-blue-400 {
1757
+ --tw-text-opacity: 1;
1758
+ color: rgb(96 165 250 / var(--tw-text-opacity, 1));
1759
+ }
1440
1760
  .text-emerald-400 {
1441
1761
  --tw-text-opacity: 1;
1442
1762
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
@@ -1448,10 +1768,17 @@ a {
1448
1768
  --tw-text-opacity: 1;
1449
1769
  color: rgb(251 113 133 / var(--tw-text-opacity, 1));
1450
1770
  }
1771
+ .text-violet-400 {
1772
+ --tw-text-opacity: 1;
1773
+ color: rgb(167 139 250 / var(--tw-text-opacity, 1));
1774
+ }
1451
1775
  .text-white {
1452
1776
  --tw-text-opacity: 1;
1453
1777
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1454
1778
  }
1779
+ .text-white\/30 {
1780
+ color: rgb(255 255 255 / 0.3);
1781
+ }
1455
1782
  .text-white\/40 {
1456
1783
  color: rgb(255 255 255 / 0.4);
1457
1784
  }
@@ -1464,54 +1791,57 @@ a {
1464
1791
  .text-white\/70 {
1465
1792
  color: rgb(255 255 255 / 0.7);
1466
1793
  }
1794
+ .text-white\/80 {
1795
+ color: rgb(255 255 255 / 0.8);
1796
+ }
1467
1797
  .text-white\/90 {
1468
1798
  color: rgb(255 255 255 / 0.9);
1469
1799
  }
1800
+ .underline {
1801
+ text-decoration-line: underline;
1802
+ }
1470
1803
  .placeholder-white\/30::-moz-placeholder {
1471
1804
  color: rgb(255 255 255 / 0.3);
1472
1805
  }
1473
1806
  .placeholder-white\/30::placeholder {
1474
1807
  color: rgb(255 255 255 / 0.3);
1475
1808
  }
1809
+ .opacity-0 {
1810
+ opacity: 0;
1811
+ }
1476
1812
  .opacity-10 {
1477
1813
  opacity: 0.1;
1478
1814
  }
1815
+ .opacity-100 {
1816
+ opacity: 1;
1817
+ }
1479
1818
  .opacity-15 {
1480
1819
  opacity: 0.15;
1481
1820
  }
1821
+ .opacity-40 {
1822
+ opacity: 0.4;
1823
+ }
1482
1824
  .opacity-50 {
1483
1825
  opacity: 0.5;
1484
1826
  }
1827
+ .opacity-60 {
1828
+ opacity: 0.6;
1829
+ }
1485
1830
  .shadow {
1486
1831
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
1487
1832
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
1488
1833
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1489
1834
  }
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
1835
  .shadow-glow {
1511
1836
  --tw-shadow: var(--ml-shadow-glow);
1512
1837
  --tw-shadow-colored: var(--ml-shadow-glow);
1513
1838
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1514
1839
  }
1840
+ .shadow-lg {
1841
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1842
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1843
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1844
+ }
1515
1845
  .shadow-sm {
1516
1846
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1517
1847
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -1522,6 +1852,18 @@ a {
1522
1852
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
1523
1853
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1524
1854
  }
1855
+ .shadow-amber-600\/20 {
1856
+ --tw-shadow-color: rgb(217 119 6 / 0.2);
1857
+ --tw-shadow: var(--tw-shadow-colored);
1858
+ }
1859
+ .shadow-emerald-600\/20 {
1860
+ --tw-shadow-color: rgb(5 150 105 / 0.2);
1861
+ --tw-shadow: var(--tw-shadow-colored);
1862
+ }
1863
+ .shadow-rose-600\/20 {
1864
+ --tw-shadow-color: rgb(225 29 72 / 0.2);
1865
+ --tw-shadow: var(--tw-shadow-colored);
1866
+ }
1525
1867
  .outline-none {
1526
1868
  outline: 2px solid transparent;
1527
1869
  outline-offset: 2px;
@@ -1589,11 +1931,21 @@ a {
1589
1931
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1590
1932
  transition-duration: 150ms;
1591
1933
  }
1934
+ .transition-\[background-color\2c opacity\] {
1935
+ transition-property: background-color,opacity;
1936
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1937
+ transition-duration: 150ms;
1938
+ }
1592
1939
  .transition-\[grid-template-rows\] {
1593
1940
  transition-property: grid-template-rows;
1594
1941
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1595
1942
  transition-duration: 150ms;
1596
1943
  }
1944
+ .transition-\[opacity\2c transform\] {
1945
+ transition-property: opacity,transform;
1946
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1947
+ transition-duration: 150ms;
1948
+ }
1597
1949
  .transition-\[transform\2c background-color\2c box-shadow\2c opacity\] {
1598
1950
  transition-property: transform,background-color,box-shadow,opacity;
1599
1951
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1604,6 +1956,11 @@ a {
1604
1956
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1605
1957
  transition-duration: 150ms;
1606
1958
  }
1959
+ .transition-all {
1960
+ transition-property: all;
1961
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1962
+ transition-duration: 150ms;
1963
+ }
1607
1964
  .transition-colors {
1608
1965
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1609
1966
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1619,23 +1976,60 @@ a {
1619
1976
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1620
1977
  transition-duration: 150ms;
1621
1978
  }
1979
+ .duration-100 {
1980
+ transition-duration: 100ms;
1981
+ }
1982
+ .duration-150 {
1983
+ transition-duration: 150ms;
1984
+ }
1622
1985
  .duration-200 {
1623
1986
  transition-duration: 200ms;
1624
1987
  }
1988
+ .duration-300 {
1989
+ transition-duration: 300ms;
1990
+ }
1625
1991
  .ease-in-out {
1626
1992
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1627
1993
  }
1994
+ .ease-linear {
1995
+ transition-timing-function: linear;
1996
+ }
1628
1997
  .ease-out {
1629
1998
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1630
1999
  }
1631
2000
  .\[-webkit-tap-highlight-color\:transparent\] {
1632
2001
  -webkit-tap-highlight-color: transparent;
1633
2002
  }
2003
+ .placeholder\:text-white\/30::-moz-placeholder {
2004
+ color: rgb(255 255 255 / 0.3);
2005
+ }
2006
+ .placeholder\:text-white\/30::placeholder {
2007
+ color: rgb(255 255 255 / 0.3);
2008
+ }
2009
+ .focus-within\:ring-2:focus-within {
2010
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2011
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2012
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2013
+ }
2014
+ .focus-within\:ring-rose-500\/40:focus-within {
2015
+ --tw-ring-color: rgb(244 63 94 / 0.4);
2016
+ }
2017
+ .hover\:scale-105:hover {
2018
+ --tw-scale-x: 1.05;
2019
+ --tw-scale-y: 1.05;
2020
+ 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));
2021
+ }
1634
2022
  .hover\:scale-\[1\.02\]:hover {
1635
2023
  --tw-scale-x: 1.02;
1636
2024
  --tw-scale-y: 1.02;
1637
2025
  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
2026
  }
2027
+ .hover\:border-transparent:hover {
2028
+ border-color: transparent;
2029
+ }
2030
+ .hover\:border-white\/20:hover {
2031
+ border-color: rgb(255 255 255 / 0.2);
2032
+ }
1639
2033
  .hover\:bg-amber-700:hover {
1640
2034
  --tw-bg-opacity: 1;
1641
2035
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
@@ -1648,6 +2042,9 @@ a {
1648
2042
  --tw-bg-opacity: 1;
1649
2043
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
1650
2044
  }
2045
+ .hover\:bg-transparent:hover {
2046
+ background-color: transparent;
2047
+ }
1651
2048
  .hover\:bg-white\/10:hover {
1652
2049
  background-color: rgb(255 255 255 / 0.1);
1653
2050
  }
@@ -1660,13 +2057,35 @@ a {
1660
2057
  .hover\:bg-white\/\[0\.03\]:hover {
1661
2058
  background-color: rgb(255 255 255 / 0.03);
1662
2059
  }
2060
+ .hover\:bg-white\/\[0\.08\]:hover {
2061
+ background-color: rgb(255 255 255 / 0.08);
2062
+ }
2063
+ .hover\:text-emerald-400:hover {
2064
+ --tw-text-opacity: 1;
2065
+ color: rgb(52 211 153 / var(--tw-text-opacity, 1));
2066
+ }
1663
2067
  .hover\:text-white:hover {
1664
2068
  --tw-text-opacity: 1;
1665
2069
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1666
2070
  }
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);
2071
+ .hover\:text-white\/40:hover {
2072
+ color: rgb(255 255 255 / 0.4);
2073
+ }
2074
+ .hover\:text-white\/50:hover {
2075
+ color: rgb(255 255 255 / 0.5);
2076
+ }
2077
+ .hover\:text-white\/70:hover {
2078
+ color: rgb(255 255 255 / 0.7);
2079
+ }
2080
+ .hover\:text-white\/80:hover {
2081
+ color: rgb(255 255 255 / 0.8);
2082
+ }
2083
+ .hover\:text-white\/90:hover {
2084
+ color: rgb(255 255 255 / 0.9);
2085
+ }
2086
+ .hover\:shadow-glow-lg:hover {
2087
+ --tw-shadow: var(--ml-shadow-glow-lg);
2088
+ --tw-shadow-colored: var(--ml-shadow-glow-lg);
1670
2089
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1671
2090
  }
1672
2091
  .hover\:ring-white\/20:hover {
@@ -1680,14 +2099,20 @@ a {
1680
2099
  outline: 2px solid transparent;
1681
2100
  outline-offset: 2px;
1682
2101
  }
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
2102
  .focus\:ring-rose-500\/40:focus {
1689
2103
  --tw-ring-color: rgb(244 63 94 / 0.4);
1690
2104
  }
2105
+ .focus-visible\:bg-white\/10:focus-visible {
2106
+ background-color: rgb(255 255 255 / 0.1);
2107
+ }
2108
+ .focus-visible\:text-white:focus-visible {
2109
+ --tw-text-opacity: 1;
2110
+ color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2111
+ }
2112
+ .focus-visible\:outline-none:focus-visible {
2113
+ outline: 2px solid transparent;
2114
+ outline-offset: 2px;
2115
+ }
1691
2116
  .focus-visible\:ring-2:focus-visible {
1692
2117
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1693
2118
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1696,6 +2121,9 @@ a {
1696
2121
  .focus-visible\:ring-primary:focus-visible {
1697
2122
  --tw-ring-color: var(--ml-primary);
1698
2123
  }
2124
+ .focus-visible\:ring-offset-1:focus-visible {
2125
+ --tw-ring-offset-width: 1px;
2126
+ }
1699
2127
  .focus-visible\:ring-offset-2:focus-visible {
1700
2128
  --tw-ring-offset-width: 2px;
1701
2129
  }
@@ -1709,12 +2137,31 @@ a {
1709
2137
  --tw-translate-y: 0.5px;
1710
2138
  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));
1711
2139
  }
2140
+ .active\:scale-95:active {
2141
+ --tw-scale-x: .95;
2142
+ --tw-scale-y: .95;
2143
+ 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));
2144
+ }
1712
2145
  .disabled\:pointer-events-none:disabled {
1713
2146
  pointer-events: none;
1714
2147
  }
2148
+ .disabled\:cursor-not-allowed:disabled {
2149
+ cursor: not-allowed;
2150
+ }
1715
2151
  .disabled\:opacity-60:disabled {
1716
2152
  opacity: 0.6;
1717
2153
  }
2154
+ .peer:focus-visible ~ .peer-focus-visible\:ring-2 {
2155
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2156
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2157
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2158
+ }
2159
+ .peer:focus-visible ~ .peer-focus-visible\:ring-offset-1 {
2160
+ --tw-ring-offset-width: 1px;
2161
+ }
2162
+ .peer:focus-visible ~ .peer-focus-visible\:ring-offset-transparent {
2163
+ --tw-ring-offset-color: transparent;
2164
+ }
1718
2165
  @media (min-width: 640px) {
1719
2166
  .sm\:mb-4 {
1720
2167
  margin-bottom: 1rem;
@@ -1764,3 +2211,85 @@ a {
1764
2211
  padding-right: 2rem;
1765
2212
  }
1766
2213
  }
2214
+ .\[\&\:\:-moz-range-thumb\]\:h-4::-moz-range-thumb {
2215
+ height: 1rem;
2216
+ }
2217
+ .\[\&\:\:-moz-range-thumb\]\:w-4::-moz-range-thumb {
2218
+ width: 1rem;
2219
+ }
2220
+ .\[\&\:\:-moz-range-thumb\]\:rounded-full::-moz-range-thumb {
2221
+ border-radius: 9999px;
2222
+ }
2223
+ .\[\&\:\:-moz-range-thumb\]\:border-2::-moz-range-thumb {
2224
+ border-width: 2px;
2225
+ }
2226
+ .\[\&\:\:-moz-range-thumb\]\:border-\[var\(--ml-primary\2c \#8b5cf6\)\]::-moz-range-thumb {
2227
+ border-color: var(--ml-primary,#8b5cf6);
2228
+ }
2229
+ .\[\&\:\:-moz-range-thumb\]\:bg-white::-moz-range-thumb {
2230
+ --tw-bg-opacity: 1;
2231
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
2232
+ }
2233
+ .\[\&\:\:-moz-range-thumb\]\:transition-shadow::-moz-range-thumb {
2234
+ -moz-transition-property: box-shadow;
2235
+ transition-property: box-shadow;
2236
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2237
+ transition-duration: 150ms;
2238
+ }
2239
+ .\[\&\:\:-moz-range-thumb\]\:duration-150::-moz-range-thumb {
2240
+ transition-duration: 150ms;
2241
+ }
2242
+ .focus-visible\:\[\&\:\:-moz-range-thumb\]\:ring-2::-moz-range-thumb:focus-visible {
2243
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2244
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2245
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2246
+ }
2247
+ .\[\&\:\:-moz-range-track\]\:rounded-full::-moz-range-track {
2248
+ border-radius: 9999px;
2249
+ }
2250
+ .\[\&\:\:-moz-range-track\]\:bg-transparent::-moz-range-track {
2251
+ background-color: transparent;
2252
+ }
2253
+ .\[\&\:\:-webkit-slider-thumb\]\:h-4::-webkit-slider-thumb {
2254
+ height: 1rem;
2255
+ }
2256
+ .\[\&\:\:-webkit-slider-thumb\]\:w-4::-webkit-slider-thumb {
2257
+ width: 1rem;
2258
+ }
2259
+ .\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb {
2260
+ -webkit-appearance: none;
2261
+ appearance: none;
2262
+ }
2263
+ .\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb {
2264
+ border-radius: 9999px;
2265
+ }
2266
+ .\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb {
2267
+ border-width: 2px;
2268
+ }
2269
+ .\[\&\:\:-webkit-slider-thumb\]\:border-\[var\(--ml-primary\2c \#8b5cf6\)\]::-webkit-slider-thumb {
2270
+ border-color: var(--ml-primary,#8b5cf6);
2271
+ }
2272
+ .\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb {
2273
+ --tw-bg-opacity: 1;
2274
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
2275
+ }
2276
+ .\[\&\:\:-webkit-slider-thumb\]\:transition-shadow::-webkit-slider-thumb {
2277
+ -webkit-transition-property: box-shadow;
2278
+ transition-property: box-shadow;
2279
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2280
+ transition-duration: 150ms;
2281
+ }
2282
+ .\[\&\:\:-webkit-slider-thumb\]\:duration-150::-webkit-slider-thumb {
2283
+ transition-duration: 150ms;
2284
+ }
2285
+ .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-2::-webkit-slider-thumb:focus-visible {
2286
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2287
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2288
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2289
+ }
2290
+ .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-2::-webkit-slider-thumb:focus-visible {
2291
+ --tw-ring-offset-width: 2px;
2292
+ }
2293
+ .focus-visible\:\[\&\:\:-webkit-slider-thumb\]\:ring-offset-surface::-webkit-slider-thumb:focus-visible {
2294
+ --tw-ring-offset-color: var(--ml-bg);
2295
+ }