pixelforge-ui 1.0.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.
package/dist/index.css ADDED
@@ -0,0 +1,1431 @@
1
+ @import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
2
+
3
+ /* src/styles/globals.css */
4
+ *,
5
+ ::before,
6
+ ::after {
7
+ --tw-border-spacing-x: 0;
8
+ --tw-border-spacing-y: 0;
9
+ --tw-translate-x: 0;
10
+ --tw-translate-y: 0;
11
+ --tw-rotate: 0;
12
+ --tw-skew-x: 0;
13
+ --tw-skew-y: 0;
14
+ --tw-scale-x: 1;
15
+ --tw-scale-y: 1;
16
+ --tw-pan-x: ;
17
+ --tw-pan-y: ;
18
+ --tw-pinch-zoom: ;
19
+ --tw-scroll-snap-strictness: proximity;
20
+ --tw-gradient-from-position: ;
21
+ --tw-gradient-via-position: ;
22
+ --tw-gradient-to-position: ;
23
+ --tw-ordinal: ;
24
+ --tw-slashed-zero: ;
25
+ --tw-numeric-figure: ;
26
+ --tw-numeric-spacing: ;
27
+ --tw-numeric-fraction: ;
28
+ --tw-ring-inset: ;
29
+ --tw-ring-offset-width: 0px;
30
+ --tw-ring-offset-color: #fff;
31
+ --tw-ring-color: rgb(59 130 246 / 0.5);
32
+ --tw-ring-offset-shadow: 0 0 #0000;
33
+ --tw-ring-shadow: 0 0 #0000;
34
+ --tw-shadow: 0 0 #0000;
35
+ --tw-shadow-colored: 0 0 #0000;
36
+ --tw-blur: ;
37
+ --tw-brightness: ;
38
+ --tw-contrast: ;
39
+ --tw-grayscale: ;
40
+ --tw-hue-rotate: ;
41
+ --tw-invert: ;
42
+ --tw-saturate: ;
43
+ --tw-sepia: ;
44
+ --tw-drop-shadow: ;
45
+ --tw-backdrop-blur: ;
46
+ --tw-backdrop-brightness: ;
47
+ --tw-backdrop-contrast: ;
48
+ --tw-backdrop-grayscale: ;
49
+ --tw-backdrop-hue-rotate: ;
50
+ --tw-backdrop-invert: ;
51
+ --tw-backdrop-opacity: ;
52
+ --tw-backdrop-saturate: ;
53
+ --tw-backdrop-sepia: ;
54
+ --tw-contain-size: ;
55
+ --tw-contain-layout: ;
56
+ --tw-contain-paint: ;
57
+ --tw-contain-style: ;
58
+ }
59
+ ::backdrop {
60
+ --tw-border-spacing-x: 0;
61
+ --tw-border-spacing-y: 0;
62
+ --tw-translate-x: 0;
63
+ --tw-translate-y: 0;
64
+ --tw-rotate: 0;
65
+ --tw-skew-x: 0;
66
+ --tw-skew-y: 0;
67
+ --tw-scale-x: 1;
68
+ --tw-scale-y: 1;
69
+ --tw-pan-x: ;
70
+ --tw-pan-y: ;
71
+ --tw-pinch-zoom: ;
72
+ --tw-scroll-snap-strictness: proximity;
73
+ --tw-gradient-from-position: ;
74
+ --tw-gradient-via-position: ;
75
+ --tw-gradient-to-position: ;
76
+ --tw-ordinal: ;
77
+ --tw-slashed-zero: ;
78
+ --tw-numeric-figure: ;
79
+ --tw-numeric-spacing: ;
80
+ --tw-numeric-fraction: ;
81
+ --tw-ring-inset: ;
82
+ --tw-ring-offset-width: 0px;
83
+ --tw-ring-offset-color: #fff;
84
+ --tw-ring-color: rgb(59 130 246 / 0.5);
85
+ --tw-ring-offset-shadow: 0 0 #0000;
86
+ --tw-ring-shadow: 0 0 #0000;
87
+ --tw-shadow: 0 0 #0000;
88
+ --tw-shadow-colored: 0 0 #0000;
89
+ --tw-blur: ;
90
+ --tw-brightness: ;
91
+ --tw-contrast: ;
92
+ --tw-grayscale: ;
93
+ --tw-hue-rotate: ;
94
+ --tw-invert: ;
95
+ --tw-saturate: ;
96
+ --tw-sepia: ;
97
+ --tw-drop-shadow: ;
98
+ --tw-backdrop-blur: ;
99
+ --tw-backdrop-brightness: ;
100
+ --tw-backdrop-contrast: ;
101
+ --tw-backdrop-grayscale: ;
102
+ --tw-backdrop-hue-rotate: ;
103
+ --tw-backdrop-invert: ;
104
+ --tw-backdrop-opacity: ;
105
+ --tw-backdrop-saturate: ;
106
+ --tw-backdrop-sepia: ;
107
+ --tw-contain-size: ;
108
+ --tw-contain-layout: ;
109
+ --tw-contain-paint: ;
110
+ --tw-contain-style: ;
111
+ }
112
+ *,
113
+ ::before,
114
+ ::after {
115
+ box-sizing: border-box;
116
+ border-width: 0;
117
+ border-style: solid;
118
+ border-color: #e5e7eb;
119
+ }
120
+ ::before,
121
+ ::after {
122
+ --tw-content: "";
123
+ }
124
+ html,
125
+ :host {
126
+ line-height: 1.5;
127
+ -webkit-text-size-adjust: 100%;
128
+ -moz-tab-size: 4;
129
+ -o-tab-size: 4;
130
+ tab-size: 4;
131
+ font-family:
132
+ ui-sans-serif,
133
+ system-ui,
134
+ sans-serif,
135
+ "Apple Color Emoji",
136
+ "Segoe UI Emoji",
137
+ "Segoe UI Symbol",
138
+ "Noto Color Emoji";
139
+ font-feature-settings: normal;
140
+ font-variation-settings: normal;
141
+ -webkit-tap-highlight-color: transparent;
142
+ }
143
+ body {
144
+ margin: 0;
145
+ line-height: inherit;
146
+ }
147
+ hr {
148
+ height: 0;
149
+ color: inherit;
150
+ border-top-width: 1px;
151
+ }
152
+ abbr:where([title]) {
153
+ -webkit-text-decoration: underline dotted;
154
+ text-decoration: underline dotted;
155
+ }
156
+ h1,
157
+ h2,
158
+ h3,
159
+ h4,
160
+ h5,
161
+ h6 {
162
+ font-size: inherit;
163
+ font-weight: inherit;
164
+ }
165
+ a {
166
+ color: inherit;
167
+ text-decoration: inherit;
168
+ }
169
+ b,
170
+ strong {
171
+ font-weight: bolder;
172
+ }
173
+ code,
174
+ kbd,
175
+ samp,
176
+ pre {
177
+ font-family: var(--font-mono), monospace;
178
+ font-feature-settings: normal;
179
+ font-variation-settings: normal;
180
+ font-size: 1em;
181
+ }
182
+ small {
183
+ font-size: 80%;
184
+ }
185
+ sub,
186
+ sup {
187
+ font-size: 75%;
188
+ line-height: 0;
189
+ position: relative;
190
+ vertical-align: baseline;
191
+ }
192
+ sub {
193
+ bottom: -0.25em;
194
+ }
195
+ sup {
196
+ top: -0.5em;
197
+ }
198
+ table {
199
+ text-indent: 0;
200
+ border-color: inherit;
201
+ border-collapse: collapse;
202
+ }
203
+ button,
204
+ input,
205
+ optgroup,
206
+ select,
207
+ textarea {
208
+ font-family: inherit;
209
+ font-feature-settings: inherit;
210
+ font-variation-settings: inherit;
211
+ font-size: 100%;
212
+ font-weight: inherit;
213
+ line-height: inherit;
214
+ letter-spacing: inherit;
215
+ color: inherit;
216
+ margin: 0;
217
+ padding: 0;
218
+ }
219
+ button,
220
+ select {
221
+ text-transform: none;
222
+ }
223
+ button,
224
+ input:where([type=button]),
225
+ input:where([type=reset]),
226
+ input:where([type=submit]) {
227
+ -webkit-appearance: button;
228
+ background-color: transparent;
229
+ background-image: none;
230
+ }
231
+ :-moz-focusring {
232
+ outline: auto;
233
+ }
234
+ :-moz-ui-invalid {
235
+ box-shadow: none;
236
+ }
237
+ progress {
238
+ vertical-align: baseline;
239
+ }
240
+ ::-webkit-inner-spin-button,
241
+ ::-webkit-outer-spin-button {
242
+ height: auto;
243
+ }
244
+ [type=search] {
245
+ -webkit-appearance: textfield;
246
+ outline-offset: -2px;
247
+ }
248
+ ::-webkit-search-decoration {
249
+ -webkit-appearance: none;
250
+ }
251
+ ::-webkit-file-upload-button {
252
+ -webkit-appearance: button;
253
+ font: inherit;
254
+ }
255
+ summary {
256
+ display: list-item;
257
+ }
258
+ blockquote,
259
+ dl,
260
+ dd,
261
+ h1,
262
+ h2,
263
+ h3,
264
+ h4,
265
+ h5,
266
+ h6,
267
+ hr,
268
+ figure,
269
+ p,
270
+ pre {
271
+ margin: 0;
272
+ }
273
+ fieldset {
274
+ margin: 0;
275
+ padding: 0;
276
+ }
277
+ legend {
278
+ padding: 0;
279
+ }
280
+ ol,
281
+ ul,
282
+ menu {
283
+ list-style: none;
284
+ margin: 0;
285
+ padding: 0;
286
+ }
287
+ dialog {
288
+ padding: 0;
289
+ }
290
+ textarea {
291
+ resize: vertical;
292
+ }
293
+ input::-moz-placeholder,
294
+ textarea::-moz-placeholder {
295
+ opacity: 1;
296
+ color: #9ca3af;
297
+ }
298
+ input::placeholder,
299
+ textarea::placeholder {
300
+ opacity: 1;
301
+ color: #9ca3af;
302
+ }
303
+ button,
304
+ [role=button] {
305
+ cursor: pointer;
306
+ }
307
+ :disabled {
308
+ cursor: default;
309
+ }
310
+ img,
311
+ svg,
312
+ video,
313
+ canvas,
314
+ audio,
315
+ iframe,
316
+ embed,
317
+ object {
318
+ display: block;
319
+ vertical-align: middle;
320
+ }
321
+ img,
322
+ video {
323
+ max-width: 100%;
324
+ height: auto;
325
+ }
326
+ [hidden]:where(:not([hidden=until-found])) {
327
+ display: none;
328
+ }
329
+ .container {
330
+ width: 100%;
331
+ }
332
+ @media (min-width: 640px) {
333
+ .container {
334
+ max-width: 640px;
335
+ }
336
+ }
337
+ @media (min-width: 768px) {
338
+ .container {
339
+ max-width: 768px;
340
+ }
341
+ }
342
+ @media (min-width: 1024px) {
343
+ .container {
344
+ max-width: 1024px;
345
+ }
346
+ }
347
+ @media (min-width: 1280px) {
348
+ .container {
349
+ max-width: 1280px;
350
+ }
351
+ }
352
+ @media (min-width: 1536px) {
353
+ .container {
354
+ max-width: 1536px;
355
+ }
356
+ }
357
+ .pointer-events-none {
358
+ pointer-events: none;
359
+ }
360
+ .fixed {
361
+ position: fixed;
362
+ }
363
+ .absolute {
364
+ position: absolute;
365
+ }
366
+ .relative {
367
+ position: relative;
368
+ }
369
+ .sticky {
370
+ position: sticky;
371
+ }
372
+ .inset-0 {
373
+ inset: 0px;
374
+ }
375
+ .bottom-0 {
376
+ bottom: 0px;
377
+ }
378
+ .bottom-full {
379
+ bottom: 100%;
380
+ }
381
+ .left-0 {
382
+ left: 0px;
383
+ }
384
+ .left-1\/2 {
385
+ left: 50%;
386
+ }
387
+ .left-3 {
388
+ left: 12px;
389
+ }
390
+ .left-full {
391
+ left: 100%;
392
+ }
393
+ .right-0 {
394
+ right: 0px;
395
+ }
396
+ .right-3 {
397
+ right: 12px;
398
+ }
399
+ .right-full {
400
+ right: 100%;
401
+ }
402
+ .top-0 {
403
+ top: 0px;
404
+ }
405
+ .top-1\/2 {
406
+ top: 50%;
407
+ }
408
+ .top-full {
409
+ top: 100%;
410
+ }
411
+ .col-span-1 {
412
+ grid-column: span 1 / span 1;
413
+ }
414
+ .my-1 {
415
+ margin-top: 4px;
416
+ margin-bottom: 4px;
417
+ }
418
+ .-mr-2 {
419
+ margin-right: -8px;
420
+ }
421
+ .mb-1 {
422
+ margin-bottom: 4px;
423
+ }
424
+ .mb-2 {
425
+ margin-bottom: 8px;
426
+ }
427
+ .mb-4 {
428
+ margin-bottom: 16px;
429
+ }
430
+ .ml-1 {
431
+ margin-left: 4px;
432
+ }
433
+ .ml-2 {
434
+ margin-left: 8px;
435
+ }
436
+ .mr-2 {
437
+ margin-right: 8px;
438
+ }
439
+ .mt-1 {
440
+ margin-top: 4px;
441
+ }
442
+ .mt-2 {
443
+ margin-top: 8px;
444
+ }
445
+ .block {
446
+ display: block;
447
+ }
448
+ .inline-block {
449
+ display: inline-block;
450
+ }
451
+ .flex {
452
+ display: flex;
453
+ }
454
+ .inline-flex {
455
+ display: inline-flex;
456
+ }
457
+ .grid {
458
+ display: grid;
459
+ }
460
+ .hidden {
461
+ display: none;
462
+ }
463
+ .h-2 {
464
+ height: 8px;
465
+ }
466
+ .h-px {
467
+ height: 1px;
468
+ }
469
+ .h-screen {
470
+ height: 100vh;
471
+ }
472
+ .max-h-\[60vh\] {
473
+ max-height: 60vh;
474
+ }
475
+ .w-11\/12 {
476
+ width: 91.666667%;
477
+ }
478
+ .w-2 {
479
+ width: 8px;
480
+ }
481
+ .w-20 {
482
+ width: 80px;
483
+ }
484
+ .w-64 {
485
+ width: 16rem;
486
+ }
487
+ .w-full {
488
+ width: 100%;
489
+ }
490
+ .min-w-max {
491
+ min-width: -moz-max-content;
492
+ min-width: max-content;
493
+ }
494
+ .max-w-full {
495
+ max-width: 100%;
496
+ }
497
+ .max-w-lg {
498
+ max-width: 32rem;
499
+ }
500
+ .max-w-md {
501
+ max-width: 28rem;
502
+ }
503
+ .max-w-sm {
504
+ max-width: 24rem;
505
+ }
506
+ .flex-1 {
507
+ flex: 1 1 0%;
508
+ }
509
+ .flex-shrink-0 {
510
+ flex-shrink: 0;
511
+ }
512
+ .-translate-x-1\/2 {
513
+ --tw-translate-x: -50%;
514
+ 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));
515
+ }
516
+ .-translate-y-1\/2 {
517
+ --tw-translate-y: -50%;
518
+ 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));
519
+ }
520
+ .translate-x-1\/2 {
521
+ --tw-translate-x: 50%;
522
+ 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));
523
+ }
524
+ .translate-y-1\/2 {
525
+ --tw-translate-y: 50%;
526
+ 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));
527
+ }
528
+ .-rotate-45 {
529
+ --tw-rotate: -45deg;
530
+ 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));
531
+ }
532
+ .-rotate-\[135deg\] {
533
+ --tw-rotate: -135deg;
534
+ 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));
535
+ }
536
+ .rotate-180 {
537
+ --tw-rotate: 180deg;
538
+ 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));
539
+ }
540
+ .rotate-45 {
541
+ --tw-rotate: 45deg;
542
+ 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));
543
+ }
544
+ .rotate-\[135deg\] {
545
+ --tw-rotate: 135deg;
546
+ 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));
547
+ }
548
+ .scale-100 {
549
+ --tw-scale-x: 1;
550
+ --tw-scale-y: 1;
551
+ 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));
552
+ }
553
+ .scale-95 {
554
+ --tw-scale-x: .95;
555
+ --tw-scale-y: .95;
556
+ 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));
557
+ }
558
+ .transform {
559
+ 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));
560
+ }
561
+ @keyframes spin {
562
+ to {
563
+ transform: rotate(360deg);
564
+ }
565
+ }
566
+ .animate-spin {
567
+ animation: spin 1s linear infinite;
568
+ }
569
+ .cursor-default {
570
+ cursor: default;
571
+ }
572
+ .cursor-not-allowed {
573
+ cursor: not-allowed;
574
+ }
575
+ .cursor-pointer {
576
+ cursor: pointer;
577
+ }
578
+ .resize {
579
+ resize: both;
580
+ }
581
+ .grid-cols-1 {
582
+ grid-template-columns: repeat(1, minmax(0, 1fr));
583
+ }
584
+ .flex-col {
585
+ flex-direction: column;
586
+ }
587
+ .items-center {
588
+ align-items: center;
589
+ }
590
+ .justify-center {
591
+ justify-content: center;
592
+ }
593
+ .justify-between {
594
+ justify-content: space-between;
595
+ }
596
+ .gap-1 {
597
+ gap: 4px;
598
+ }
599
+ .gap-2 {
600
+ gap: 8px;
601
+ }
602
+ .gap-3 {
603
+ gap: 12px;
604
+ }
605
+ .gap-4 {
606
+ gap: 16px;
607
+ }
608
+ .gap-8 {
609
+ gap: 32px;
610
+ }
611
+ .space-y-1 > :not([hidden]) ~ :not([hidden]) {
612
+ --tw-space-y-reverse: 0;
613
+ margin-top: calc(4px * calc(1 - var(--tw-space-y-reverse)));
614
+ margin-bottom: calc(4px * var(--tw-space-y-reverse));
615
+ }
616
+ .space-y-3 > :not([hidden]) ~ :not([hidden]) {
617
+ --tw-space-y-reverse: 0;
618
+ margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
619
+ margin-bottom: calc(12px * var(--tw-space-y-reverse));
620
+ }
621
+ .overflow-y-auto {
622
+ overflow-y: auto;
623
+ }
624
+ .truncate {
625
+ overflow: hidden;
626
+ text-overflow: ellipsis;
627
+ white-space: nowrap;
628
+ }
629
+ .whitespace-nowrap {
630
+ white-space: nowrap;
631
+ }
632
+ .rounded-px {
633
+ border-radius: 8px;
634
+ }
635
+ .rounded-px-sm {
636
+ border-radius: 4px;
637
+ }
638
+ .border {
639
+ border-width: 1px;
640
+ }
641
+ .border-2 {
642
+ border-width: 2px;
643
+ }
644
+ .border-b-2 {
645
+ border-bottom-width: 2px;
646
+ }
647
+ .border-r-2 {
648
+ border-right-width: 2px;
649
+ }
650
+ .border-t-2 {
651
+ border-top-width: 2px;
652
+ }
653
+ .border-solid {
654
+ border-style: solid;
655
+ }
656
+ .border-pixelforge-darkLavender {
657
+ --tw-border-opacity: 1;
658
+ border-color: rgb(139 107 168 / var(--tw-border-opacity, 1));
659
+ }
660
+ .border-pixelforge-darkLime {
661
+ --tw-border-opacity: 1;
662
+ border-color: rgb(107 157 119 / var(--tw-border-opacity, 1));
663
+ }
664
+ .border-pixelforge-darkLime\/50 {
665
+ border-color: rgb(107 157 119 / 0.5);
666
+ }
667
+ .border-pixelforge-darkMint {
668
+ --tw-border-opacity: 1;
669
+ border-color: rgb(107 168 159 / var(--tw-border-opacity, 1));
670
+ }
671
+ .border-pixelforge-darkPeach {
672
+ --tw-border-opacity: 1;
673
+ border-color: rgb(200 153 104 / var(--tw-border-opacity, 1));
674
+ }
675
+ .border-pixelforge-darkSky {
676
+ --tw-border-opacity: 1;
677
+ border-color: rgb(107 163 200 / var(--tw-border-opacity, 1));
678
+ }
679
+ .border-pixelforge-error {
680
+ --tw-border-opacity: 1;
681
+ border-color: rgb(255 107 107 / var(--tw-border-opacity, 1));
682
+ }
683
+ .border-pixelforge-lavender {
684
+ --tw-border-opacity: 1;
685
+ border-color: rgb(212 181 232 / var(--tw-border-opacity, 1));
686
+ }
687
+ .border-pixelforge-lime {
688
+ --tw-border-opacity: 1;
689
+ border-color: rgb(196 240 200 / var(--tw-border-opacity, 1));
690
+ }
691
+ .border-pixelforge-mint {
692
+ --tw-border-opacity: 1;
693
+ border-color: rgb(200 240 224 / var(--tw-border-opacity, 1));
694
+ }
695
+ .border-pixelforge-peach {
696
+ --tw-border-opacity: 1;
697
+ border-color: rgb(240 217 200 / var(--tw-border-opacity, 1));
698
+ }
699
+ .border-pixelforge-sky {
700
+ --tw-border-opacity: 1;
701
+ border-color: rgb(184 224 240 / var(--tw-border-opacity, 1));
702
+ }
703
+ .border-pixelforge-success {
704
+ --tw-border-opacity: 1;
705
+ border-color: rgb(127 216 184 / var(--tw-border-opacity, 1));
706
+ }
707
+ .border-pixelforge-warning {
708
+ --tw-border-opacity: 1;
709
+ border-color: rgb(255 179 71 / var(--tw-border-opacity, 1));
710
+ }
711
+ .border-transparent {
712
+ border-color: transparent;
713
+ }
714
+ .bg-black\/40 {
715
+ background-color: rgb(0 0 0 / 0.4);
716
+ }
717
+ .bg-pixelforge-black {
718
+ --tw-bg-opacity: 1;
719
+ background-color: rgb(26 26 36 / var(--tw-bg-opacity, 1));
720
+ }
721
+ .bg-pixelforge-black\/90 {
722
+ background-color: rgb(26 26 36 / 0.9);
723
+ }
724
+ .bg-pixelforge-darkLime\/20 {
725
+ background-color: rgb(107 157 119 / 0.2);
726
+ }
727
+ .bg-pixelforge-error\/20 {
728
+ background-color: rgb(255 107 107 / 0.2);
729
+ }
730
+ .bg-pixelforge-lavender {
731
+ --tw-bg-opacity: 1;
732
+ background-color: rgb(212 181 232 / var(--tw-bg-opacity, 1));
733
+ }
734
+ .bg-pixelforge-lavender\/20 {
735
+ background-color: rgb(212 181 232 / 0.2);
736
+ }
737
+ .bg-pixelforge-light {
738
+ --tw-bg-opacity: 1;
739
+ background-color: rgb(245 245 240 / var(--tw-bg-opacity, 1));
740
+ }
741
+ .bg-pixelforge-light\/50 {
742
+ background-color: rgb(245 245 240 / 0.5);
743
+ }
744
+ .bg-pixelforge-lime {
745
+ --tw-bg-opacity: 1;
746
+ background-color: rgb(196 240 200 / var(--tw-bg-opacity, 1));
747
+ }
748
+ .bg-pixelforge-lime\/20 {
749
+ background-color: rgb(196 240 200 / 0.2);
750
+ }
751
+ .bg-pixelforge-lime\/30 {
752
+ background-color: rgb(196 240 200 / 0.3);
753
+ }
754
+ .bg-pixelforge-mint {
755
+ --tw-bg-opacity: 1;
756
+ background-color: rgb(200 240 224 / var(--tw-bg-opacity, 1));
757
+ }
758
+ .bg-pixelforge-mint\/20 {
759
+ background-color: rgb(200 240 224 / 0.2);
760
+ }
761
+ .bg-pixelforge-peach {
762
+ --tw-bg-opacity: 1;
763
+ background-color: rgb(240 217 200 / var(--tw-bg-opacity, 1));
764
+ }
765
+ .bg-pixelforge-peach\/20 {
766
+ background-color: rgb(240 217 200 / 0.2);
767
+ }
768
+ .bg-pixelforge-sky {
769
+ --tw-bg-opacity: 1;
770
+ background-color: rgb(184 224 240 / var(--tw-bg-opacity, 1));
771
+ }
772
+ .bg-pixelforge-sky\/20 {
773
+ background-color: rgb(184 224 240 / 0.2);
774
+ }
775
+ .bg-pixelforge-success\/20 {
776
+ background-color: rgb(127 216 184 / 0.2);
777
+ }
778
+ .bg-pixelforge-warning\/20 {
779
+ background-color: rgb(255 179 71 / 0.2);
780
+ }
781
+ .bg-pixelforge-white {
782
+ --tw-bg-opacity: 1;
783
+ background-color: rgb(255 251 245 / var(--tw-bg-opacity, 1));
784
+ }
785
+ .bg-transparent {
786
+ background-color: transparent;
787
+ }
788
+ .p-1 {
789
+ padding: 4px;
790
+ }
791
+ .p-2 {
792
+ padding: 8px;
793
+ }
794
+ .p-6 {
795
+ padding: 24px;
796
+ }
797
+ .px-2 {
798
+ padding-left: 8px;
799
+ padding-right: 8px;
800
+ }
801
+ .px-3 {
802
+ padding-left: 12px;
803
+ padding-right: 12px;
804
+ }
805
+ .px-4 {
806
+ padding-left: 16px;
807
+ padding-right: 16px;
808
+ }
809
+ .px-6 {
810
+ padding-left: 24px;
811
+ padding-right: 24px;
812
+ }
813
+ .py-1 {
814
+ padding-top: 4px;
815
+ padding-bottom: 4px;
816
+ }
817
+ .py-1\.5 {
818
+ padding-top: 0.375rem;
819
+ padding-bottom: 0.375rem;
820
+ }
821
+ .py-12 {
822
+ padding-top: 48px;
823
+ padding-bottom: 48px;
824
+ }
825
+ .py-2 {
826
+ padding-top: 8px;
827
+ padding-bottom: 8px;
828
+ }
829
+ .py-2\.5 {
830
+ padding-top: 0.625rem;
831
+ padding-bottom: 0.625rem;
832
+ }
833
+ .py-3 {
834
+ padding-top: 12px;
835
+ padding-bottom: 12px;
836
+ }
837
+ .py-4 {
838
+ padding-top: 16px;
839
+ padding-bottom: 16px;
840
+ }
841
+ .py-6 {
842
+ padding-top: 24px;
843
+ padding-bottom: 24px;
844
+ }
845
+ .pl-10 {
846
+ padding-left: 40px;
847
+ }
848
+ .pr-10 {
849
+ padding-right: 40px;
850
+ }
851
+ .text-left {
852
+ text-align: left;
853
+ }
854
+ .text-center {
855
+ text-align: center;
856
+ }
857
+ .font-mono {
858
+ font-family: var(--font-mono), monospace;
859
+ }
860
+ .font-pixel {
861
+ font-family: var(--font-pixel), system-ui;
862
+ }
863
+ .text-2xl {
864
+ font-size: 32px;
865
+ line-height: 40px;
866
+ }
867
+ .text-base {
868
+ font-size: 16px;
869
+ line-height: 24px;
870
+ }
871
+ .text-lg {
872
+ font-size: 20px;
873
+ line-height: 28px;
874
+ }
875
+ .text-sm {
876
+ font-size: 14px;
877
+ line-height: 20px;
878
+ }
879
+ .text-xs {
880
+ font-size: 12px;
881
+ line-height: 16px;
882
+ }
883
+ .font-bold {
884
+ font-weight: 700;
885
+ }
886
+ .uppercase {
887
+ text-transform: uppercase;
888
+ }
889
+ .tracking-wider {
890
+ letter-spacing: 0.05em;
891
+ }
892
+ .text-pixelforge-black {
893
+ --tw-text-opacity: 1;
894
+ color: rgb(26 26 36 / var(--tw-text-opacity, 1));
895
+ }
896
+ .text-pixelforge-error {
897
+ --tw-text-opacity: 1;
898
+ color: rgb(255 107 107 / var(--tw-text-opacity, 1));
899
+ }
900
+ .text-pixelforge-sky {
901
+ --tw-text-opacity: 1;
902
+ color: rgb(184 224 240 / var(--tw-text-opacity, 1));
903
+ }
904
+ .text-pixelforge-success {
905
+ --tw-text-opacity: 1;
906
+ color: rgb(127 216 184 / var(--tw-text-opacity, 1));
907
+ }
908
+ .text-pixelforge-warning {
909
+ --tw-text-opacity: 1;
910
+ color: rgb(255 179 71 / var(--tw-text-opacity, 1));
911
+ }
912
+ .text-pixelforge-white {
913
+ --tw-text-opacity: 1;
914
+ color: rgb(255 251 245 / var(--tw-text-opacity, 1));
915
+ }
916
+ .opacity-0 {
917
+ opacity: 0;
918
+ }
919
+ .opacity-100 {
920
+ opacity: 1;
921
+ }
922
+ .opacity-50 {
923
+ opacity: 0.5;
924
+ }
925
+ .shadow-lg {
926
+ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
927
+ --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
928
+ box-shadow:
929
+ var(--tw-ring-offset-shadow, 0 0 #0000),
930
+ var(--tw-ring-shadow, 0 0 #0000),
931
+ var(--tw-shadow);
932
+ }
933
+ .shadow-px {
934
+ --tw-shadow: 4px 4px 0px rgba(0,0,0,0.2);
935
+ --tw-shadow-colored: 4px 4px 0px var(--tw-shadow-color);
936
+ box-shadow:
937
+ var(--tw-ring-offset-shadow, 0 0 #0000),
938
+ var(--tw-ring-shadow, 0 0 #0000),
939
+ var(--tw-shadow);
940
+ }
941
+ .shadow-px-lg {
942
+ --tw-shadow: 8px 8px 0px rgba(0,0,0,0.15);
943
+ --tw-shadow-colored: 8px 8px 0px var(--tw-shadow-color);
944
+ box-shadow:
945
+ var(--tw-ring-offset-shadow, 0 0 #0000),
946
+ var(--tw-ring-shadow, 0 0 #0000),
947
+ var(--tw-shadow);
948
+ }
949
+ .outline {
950
+ outline-style: solid;
951
+ }
952
+ .filter {
953
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
954
+ }
955
+ .backdrop-blur-xs {
956
+ --tw-backdrop-blur: blur(2px);
957
+ backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
958
+ }
959
+ .transition {
960
+ transition-property:
961
+ color,
962
+ background-color,
963
+ border-color,
964
+ text-decoration-color,
965
+ fill,
966
+ stroke,
967
+ opacity,
968
+ box-shadow,
969
+ transform,
970
+ filter,
971
+ backdrop-filter;
972
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
973
+ transition-duration: 150ms;
974
+ }
975
+ .transition-all {
976
+ transition-property: all;
977
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
978
+ transition-duration: 150ms;
979
+ }
980
+ .transition-colors {
981
+ transition-property:
982
+ color,
983
+ background-color,
984
+ border-color,
985
+ text-decoration-color,
986
+ fill,
987
+ stroke;
988
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
989
+ transition-duration: 150ms;
990
+ }
991
+ .transition-opacity {
992
+ transition-property: opacity;
993
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
994
+ transition-duration: 150ms;
995
+ }
996
+ .transition-transform {
997
+ transition-property: transform;
998
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
999
+ transition-duration: 150ms;
1000
+ }
1001
+ .duration-150 {
1002
+ transition-duration: 150ms;
1003
+ }
1004
+ .duration-200 {
1005
+ transition-duration: 200ms;
1006
+ }
1007
+ .duration-300 {
1008
+ transition-duration: 300ms;
1009
+ }
1010
+ .ease-in-out {
1011
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1012
+ }
1013
+ :root {
1014
+ --font-pixel: "Press Start 2P", monospace;
1015
+ --font-mono: "Courier New", monospace;
1016
+ --bg-primary: #f5f5f0;
1017
+ --bg-secondary: #fffbf5;
1018
+ --text-primary: #1a1a24;
1019
+ --text-secondary: #666670;
1020
+ --border-color: #2d2d3d;
1021
+ }
1022
+ @media (prefers-color-scheme: dark) {
1023
+ :root {
1024
+ --bg-primary: #1a1a24;
1025
+ --bg-secondary: #2d2d3d;
1026
+ --text-primary: #fffbf5;
1027
+ --text-secondary: #999999;
1028
+ --border-color: #f5f5f0;
1029
+ }
1030
+ }
1031
+ html {
1032
+ scroll-behavior: smooth;
1033
+ -webkit-font-smoothing: antialiased;
1034
+ -moz-osx-font-smoothing: grayscale;
1035
+ }
1036
+ body {
1037
+ --tw-bg-opacity: 1;
1038
+ background-color: rgb(255 251 245 / var(--tw-bg-opacity, 1));
1039
+ --tw-text-opacity: 1;
1040
+ color: rgb(26 26 36 / var(--tw-text-opacity, 1));
1041
+ transition-property:
1042
+ color,
1043
+ background-color,
1044
+ border-color,
1045
+ text-decoration-color,
1046
+ fill,
1047
+ stroke;
1048
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1049
+ transition-duration: 200ms;
1050
+ font-family:
1051
+ -apple-system,
1052
+ BlinkMacSystemFont,
1053
+ "Segoe UI",
1054
+ Roboto,
1055
+ sans-serif;
1056
+ }
1057
+ body.dark {
1058
+ --tw-bg-opacity: 1;
1059
+ background-color: rgb(45 45 61 / var(--tw-bg-opacity, 1));
1060
+ --tw-text-opacity: 1;
1061
+ color: rgb(255 251 245 / var(--tw-text-opacity, 1));
1062
+ }
1063
+ html.dark {
1064
+ color-scheme: dark;
1065
+ }
1066
+ h1,
1067
+ h2,
1068
+ h3,
1069
+ h4,
1070
+ h5,
1071
+ h6 {
1072
+ font-family: var(--font-pixel), system-ui;
1073
+ font-weight: 700;
1074
+ letter-spacing: 0.05em;
1075
+ }
1076
+ h1 {
1077
+ font-size: 32px;
1078
+ line-height: 40px;
1079
+ }
1080
+ @media (min-width: 768px) {
1081
+ h1 {
1082
+ font-size: 1.875rem;
1083
+ line-height: 2.25rem;
1084
+ }
1085
+ }
1086
+ h2 {
1087
+ font-size: 24px;
1088
+ line-height: 32px;
1089
+ }
1090
+ @media (min-width: 768px) {
1091
+ h2 {
1092
+ font-size: 32px;
1093
+ line-height: 40px;
1094
+ }
1095
+ }
1096
+ h3 {
1097
+ font-size: 20px;
1098
+ line-height: 28px;
1099
+ }
1100
+ @media (min-width: 768px) {
1101
+ h3 {
1102
+ font-size: 24px;
1103
+ line-height: 32px;
1104
+ }
1105
+ }
1106
+ button:focus-visible,
1107
+ input:focus-visible,
1108
+ a:focus-visible {
1109
+ outline-width: 2px;
1110
+ outline-offset: 2px;
1111
+ outline-color: #FF6B9D;
1112
+ }
1113
+ button,
1114
+ input,
1115
+ textarea,
1116
+ select,
1117
+ a {
1118
+ transition-property: all;
1119
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1120
+ transition-duration: 200ms;
1121
+ }
1122
+ ::-moz-selection {
1123
+ background-color: rgb(196 240 200 / 0.3);
1124
+ --tw-text-opacity: 1;
1125
+ color: rgb(26 26 36 / var(--tw-text-opacity, 1));
1126
+ }
1127
+ ::selection {
1128
+ background-color: rgb(196 240 200 / 0.3);
1129
+ --tw-text-opacity: 1;
1130
+ color: rgb(26 26 36 / var(--tw-text-opacity, 1));
1131
+ }
1132
+ :is(.dark *)::-moz-selection {
1133
+ --tw-text-opacity: 1;
1134
+ color: rgb(255 251 245 / var(--tw-text-opacity, 1));
1135
+ }
1136
+ :is(.dark *)::selection {
1137
+ --tw-text-opacity: 1;
1138
+ color: rgb(255 251 245 / var(--tw-text-opacity, 1));
1139
+ }
1140
+ ::-webkit-scrollbar {
1141
+ width: 8px;
1142
+ height: 8px;
1143
+ }
1144
+ ::-webkit-scrollbar-track {
1145
+ --tw-bg-opacity: 1;
1146
+ background-color: rgb(245 245 240 / var(--tw-bg-opacity, 1));
1147
+ }
1148
+ :is(.dark *)::-webkit-scrollbar-track {
1149
+ --tw-bg-opacity: 1;
1150
+ background-color: rgb(45 45 61 / var(--tw-bg-opacity, 1));
1151
+ }
1152
+ ::-webkit-scrollbar-thumb {
1153
+ border-radius: 8px;
1154
+ --tw-bg-opacity: 1;
1155
+ background-color: rgb(196 240 200 / var(--tw-bg-opacity, 1));
1156
+ }
1157
+ ::-webkit-scrollbar-thumb:hover {
1158
+ --tw-bg-opacity: 1;
1159
+ background-color: rgb(107 157 119 / var(--tw-bg-opacity, 1));
1160
+ }
1161
+ .truncate {
1162
+ overflow: hidden;
1163
+ text-overflow: ellipsis;
1164
+ white-space: nowrap;
1165
+ }
1166
+ .line-clamp-2 {
1167
+ display: -webkit-box;
1168
+ -webkit-line-clamp: 2;
1169
+ -webkit-box-orient: vertical;
1170
+ overflow: hidden;
1171
+ }
1172
+ .line-clamp-3 {
1173
+ display: -webkit-box;
1174
+ -webkit-line-clamp: 3;
1175
+ -webkit-box-orient: vertical;
1176
+ overflow: hidden;
1177
+ }
1178
+ .after\:ml-1::after {
1179
+ content: var(--tw-content);
1180
+ margin-left: 4px;
1181
+ }
1182
+ .after\:text-pixelforge-error::after {
1183
+ content: var(--tw-content);
1184
+ --tw-text-opacity: 1;
1185
+ color: rgb(255 107 107 / var(--tw-text-opacity, 1));
1186
+ }
1187
+ .after\:content-\[\'\*\'\]::after {
1188
+ --tw-content: "*";
1189
+ content: var(--tw-content);
1190
+ }
1191
+ .hover\:translate-y-\[-2px\]:hover {
1192
+ --tw-translate-y: -2px;
1193
+ 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));
1194
+ }
1195
+ .hover\:bg-pixelforge-lime\/10:hover {
1196
+ background-color: rgb(196 240 200 / 0.1);
1197
+ }
1198
+ .hover\:bg-pixelforge-lime\/20:hover {
1199
+ background-color: rgb(196 240 200 / 0.2);
1200
+ }
1201
+ .hover\:text-pixelforge-accent:hover {
1202
+ --tw-text-opacity: 1;
1203
+ color: rgb(255 107 157 / var(--tw-text-opacity, 1));
1204
+ }
1205
+ .hover\:text-pixelforge-black:hover {
1206
+ --tw-text-opacity: 1;
1207
+ color: rgb(26 26 36 / var(--tw-text-opacity, 1));
1208
+ }
1209
+ .hover\:underline:hover {
1210
+ text-decoration-line: underline;
1211
+ }
1212
+ .hover\:opacity-70:hover {
1213
+ opacity: 0.7;
1214
+ }
1215
+ .hover\:shadow-px-lg:hover {
1216
+ --tw-shadow: 8px 8px 0px rgba(0,0,0,0.15);
1217
+ --tw-shadow-colored: 8px 8px 0px var(--tw-shadow-color);
1218
+ box-shadow:
1219
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1220
+ var(--tw-ring-shadow, 0 0 #0000),
1221
+ var(--tw-shadow);
1222
+ }
1223
+ .focus\:translate-y-\[-2px\]:focus {
1224
+ --tw-translate-y: -2px;
1225
+ 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));
1226
+ }
1227
+ .focus\:border-pixelforge-accent:focus {
1228
+ --tw-border-opacity: 1;
1229
+ border-color: rgb(255 107 157 / var(--tw-border-opacity, 1));
1230
+ }
1231
+ .focus\:border-pixelforge-error:focus {
1232
+ --tw-border-opacity: 1;
1233
+ border-color: rgb(255 107 107 / var(--tw-border-opacity, 1));
1234
+ }
1235
+ .focus\:shadow-px-glow:focus {
1236
+ --tw-shadow: 0 0 20px rgba(196, 240, 200, 0.4);
1237
+ --tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
1238
+ box-shadow:
1239
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1240
+ var(--tw-ring-shadow, 0 0 #0000),
1241
+ var(--tw-shadow);
1242
+ }
1243
+ .focus\:shadow-px-lg:focus {
1244
+ --tw-shadow: 8px 8px 0px rgba(0,0,0,0.15);
1245
+ --tw-shadow-colored: 8px 8px 0px var(--tw-shadow-color);
1246
+ box-shadow:
1247
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1248
+ var(--tw-ring-shadow, 0 0 #0000),
1249
+ var(--tw-shadow);
1250
+ }
1251
+ .focus\:outline-none:focus {
1252
+ outline: 2px solid transparent;
1253
+ outline-offset: 2px;
1254
+ }
1255
+ .focus-visible\:outline-2:focus-visible {
1256
+ outline-width: 2px;
1257
+ }
1258
+ .focus-visible\:outline-offset-2:focus-visible {
1259
+ outline-offset: 2px;
1260
+ }
1261
+ .focus-visible\:outline-pixelforge-accent:focus-visible {
1262
+ outline-color: #FF6B9D;
1263
+ }
1264
+ .active\:translate-y-\[2px\]:active {
1265
+ --tw-translate-y: 2px;
1266
+ 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));
1267
+ }
1268
+ .active\:scale-95:active {
1269
+ --tw-scale-x: .95;
1270
+ --tw-scale-y: .95;
1271
+ 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));
1272
+ }
1273
+ .active\:bg-pixelforge-lime\/20:active {
1274
+ background-color: rgb(196 240 200 / 0.2);
1275
+ }
1276
+ .active\:bg-pixelforge-lime\/30:active {
1277
+ background-color: rgb(196 240 200 / 0.3);
1278
+ }
1279
+ .active\:shadow-px-press:active {
1280
+ --tw-shadow: 2px 2px 0px rgba(0,0,0,0.3);
1281
+ --tw-shadow-colored: 2px 2px 0px var(--tw-shadow-color);
1282
+ box-shadow:
1283
+ var(--tw-ring-offset-shadow, 0 0 #0000),
1284
+ var(--tw-ring-shadow, 0 0 #0000),
1285
+ var(--tw-shadow);
1286
+ }
1287
+ .disabled\:cursor-not-allowed:disabled {
1288
+ cursor: not-allowed;
1289
+ }
1290
+ .disabled\:opacity-50:disabled {
1291
+ opacity: 0.5;
1292
+ }
1293
+ .dark\:border-pixelforge-lavender:is(.dark *) {
1294
+ --tw-border-opacity: 1;
1295
+ border-color: rgb(212 181 232 / var(--tw-border-opacity, 1));
1296
+ }
1297
+ .dark\:border-pixelforge-lime:is(.dark *) {
1298
+ --tw-border-opacity: 1;
1299
+ border-color: rgb(196 240 200 / var(--tw-border-opacity, 1));
1300
+ }
1301
+ .dark\:border-pixelforge-lime\/30:is(.dark *) {
1302
+ border-color: rgb(196 240 200 / 0.3);
1303
+ }
1304
+ .dark\:border-pixelforge-mint:is(.dark *) {
1305
+ --tw-border-opacity: 1;
1306
+ border-color: rgb(200 240 224 / var(--tw-border-opacity, 1));
1307
+ }
1308
+ .dark\:border-pixelforge-peach:is(.dark *) {
1309
+ --tw-border-opacity: 1;
1310
+ border-color: rgb(240 217 200 / var(--tw-border-opacity, 1));
1311
+ }
1312
+ .dark\:border-pixelforge-sky:is(.dark *) {
1313
+ --tw-border-opacity: 1;
1314
+ border-color: rgb(184 224 240 / var(--tw-border-opacity, 1));
1315
+ }
1316
+ .dark\:bg-pixelforge-black\/20:is(.dark *) {
1317
+ background-color: rgb(26 26 36 / 0.2);
1318
+ }
1319
+ .dark\:bg-pixelforge-dark:is(.dark *) {
1320
+ --tw-bg-opacity: 1;
1321
+ background-color: rgb(45 45 61 / var(--tw-bg-opacity, 1));
1322
+ }
1323
+ .dark\:bg-pixelforge-darkLavender:is(.dark *) {
1324
+ --tw-bg-opacity: 1;
1325
+ background-color: rgb(139 107 168 / var(--tw-bg-opacity, 1));
1326
+ }
1327
+ .dark\:bg-pixelforge-darkLavender\/20:is(.dark *) {
1328
+ background-color: rgb(139 107 168 / 0.2);
1329
+ }
1330
+ .dark\:bg-pixelforge-darkLime:is(.dark *) {
1331
+ --tw-bg-opacity: 1;
1332
+ background-color: rgb(107 157 119 / var(--tw-bg-opacity, 1));
1333
+ }
1334
+ .dark\:bg-pixelforge-darkLime\/20:is(.dark *) {
1335
+ background-color: rgb(107 157 119 / 0.2);
1336
+ }
1337
+ .dark\:bg-pixelforge-darkMint:is(.dark *) {
1338
+ --tw-bg-opacity: 1;
1339
+ background-color: rgb(107 168 159 / var(--tw-bg-opacity, 1));
1340
+ }
1341
+ .dark\:bg-pixelforge-darkMint\/20:is(.dark *) {
1342
+ background-color: rgb(107 168 159 / 0.2);
1343
+ }
1344
+ .dark\:bg-pixelforge-darkPeach:is(.dark *) {
1345
+ --tw-bg-opacity: 1;
1346
+ background-color: rgb(200 153 104 / var(--tw-bg-opacity, 1));
1347
+ }
1348
+ .dark\:bg-pixelforge-darkPeach\/20:is(.dark *) {
1349
+ background-color: rgb(200 153 104 / 0.2);
1350
+ }
1351
+ .dark\:bg-pixelforge-darkSky:is(.dark *) {
1352
+ --tw-bg-opacity: 1;
1353
+ background-color: rgb(107 163 200 / var(--tw-bg-opacity, 1));
1354
+ }
1355
+ .dark\:bg-pixelforge-darkSky\/20:is(.dark *) {
1356
+ background-color: rgb(107 163 200 / 0.2);
1357
+ }
1358
+ .dark\:bg-pixelforge-error\/10:is(.dark *) {
1359
+ background-color: rgb(255 107 107 / 0.1);
1360
+ }
1361
+ .dark\:bg-pixelforge-lime\/20:is(.dark *) {
1362
+ background-color: rgb(196 240 200 / 0.2);
1363
+ }
1364
+ .dark\:bg-pixelforge-lime\/50:is(.dark *) {
1365
+ background-color: rgb(196 240 200 / 0.5);
1366
+ }
1367
+ .dark\:bg-pixelforge-sky\/10:is(.dark *) {
1368
+ background-color: rgb(184 224 240 / 0.1);
1369
+ }
1370
+ .dark\:bg-pixelforge-success\/10:is(.dark *) {
1371
+ background-color: rgb(127 216 184 / 0.1);
1372
+ }
1373
+ .dark\:bg-pixelforge-warning\/10:is(.dark *) {
1374
+ background-color: rgb(255 179 71 / 0.1);
1375
+ }
1376
+ .dark\:bg-pixelforge-white:is(.dark *) {
1377
+ --tw-bg-opacity: 1;
1378
+ background-color: rgb(255 251 245 / var(--tw-bg-opacity, 1));
1379
+ }
1380
+ .dark\:bg-pixelforge-white\/90:is(.dark *) {
1381
+ background-color: rgb(255 251 245 / 0.9);
1382
+ }
1383
+ .dark\:text-pixelforge-black:is(.dark *) {
1384
+ --tw-text-opacity: 1;
1385
+ color: rgb(26 26 36 / var(--tw-text-opacity, 1));
1386
+ }
1387
+ .dark\:text-pixelforge-error\/80:is(.dark *) {
1388
+ color: rgb(255 107 107 / 0.8);
1389
+ }
1390
+ .dark\:text-pixelforge-sky\/80:is(.dark *) {
1391
+ color: rgb(184 224 240 / 0.8);
1392
+ }
1393
+ .dark\:text-pixelforge-success\/80:is(.dark *) {
1394
+ color: rgb(127 216 184 / 0.8);
1395
+ }
1396
+ .dark\:text-pixelforge-warning\/80:is(.dark *) {
1397
+ color: rgb(255 179 71 / 0.8);
1398
+ }
1399
+ .dark\:text-pixelforge-white:is(.dark *) {
1400
+ --tw-text-opacity: 1;
1401
+ color: rgb(255 251 245 / var(--tw-text-opacity, 1));
1402
+ }
1403
+ .dark\:hover\:bg-pixelforge-lime\/30:hover:is(.dark *) {
1404
+ background-color: rgb(196 240 200 / 0.3);
1405
+ }
1406
+ .dark\:hover\:bg-pixelforge-lime\/40:hover:is(.dark *) {
1407
+ background-color: rgb(196 240 200 / 0.4);
1408
+ }
1409
+ .dark\:hover\:text-pixelforge-white:hover:is(.dark *) {
1410
+ --tw-text-opacity: 1;
1411
+ color: rgb(255 251 245 / var(--tw-text-opacity, 1));
1412
+ }
1413
+ .dark\:active\:bg-pixelforge-lime\/40:active:is(.dark *) {
1414
+ background-color: rgb(196 240 200 / 0.4);
1415
+ }
1416
+ .dark\:active\:bg-pixelforge-lime\/50:active:is(.dark *) {
1417
+ background-color: rgb(196 240 200 / 0.5);
1418
+ }
1419
+ @media (min-width: 768px) {
1420
+ .md\:flex {
1421
+ display: flex;
1422
+ }
1423
+ .md\:grid-cols-2 {
1424
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1425
+ }
1426
+ }
1427
+ @media (min-width: 1024px) {
1428
+ .lg\:grid-cols-4 {
1429
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1430
+ }
1431
+ }