@nous-research/ui 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,80 +1,1283 @@
1
- @import './fonts.css';
2
- @import './components/fit-text/fit-text.css' layer(components);
3
- @import './components/grid/grid.css' layer(components);
4
- @import './components/modal/modal.css' layer(components);
5
-
1
+ /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
7
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
8
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
9
+ "Courier New", monospace;
10
+ --color-red-500: oklch(63.7% 0.237 25.331);
11
+ --color-black: #000;
12
+ --spacing: 0.25rem;
13
+ --text-xs: 0.75rem;
14
+ --text-xs--line-height: calc(1 / 0.75);
15
+ --text-sm: 0.875rem;
16
+ --text-sm--line-height: calc(1.25 / 0.875);
17
+ --text-lg: 1.125rem;
18
+ --text-lg--line-height: calc(1.75 / 1.125);
19
+ --text-4xl: 2.25rem;
20
+ --text-4xl--line-height: calc(2.5 / 2.25);
21
+ --font-weight-normal: 400;
22
+ --font-weight-bold: 700;
23
+ --tracking-normal: 0em;
24
+ --tracking-widest: 0.1em;
25
+ --leading-tight: 1.25;
26
+ --blur-xs: 4px;
27
+ --default-transition-duration: 150ms;
28
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
29
+ --default-font-family: var(--font-sans);
30
+ --default-mono-font-family: var(--font-mono);
31
+ --color-midground: var(--midground);
32
+ --height-between-header-footer: max(
33
+ 400px,
34
+ calc(
35
+ 100dvh - 5rem -
36
+ (var(--header-height, 3.5rem) + var(--footer-height, 4.35rem))
37
+ )
38
+ );
39
+ }
40
+ }
41
+ @layer base {
42
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
43
+ box-sizing: border-box;
44
+ margin: 0;
45
+ padding: 0;
46
+ border: 0 solid;
47
+ }
48
+ html, :host {
49
+ line-height: 1.5;
50
+ -webkit-text-size-adjust: 100%;
51
+ tab-size: 4;
52
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
53
+ font-feature-settings: var(--default-font-feature-settings, normal);
54
+ font-variation-settings: var(--default-font-variation-settings, normal);
55
+ -webkit-tap-highlight-color: transparent;
56
+ }
57
+ hr {
58
+ height: 0;
59
+ color: inherit;
60
+ border-top-width: 1px;
61
+ }
62
+ abbr:where([title]) {
63
+ -webkit-text-decoration: underline dotted;
64
+ text-decoration: underline dotted;
65
+ }
66
+ h1, h2, h3, h4, h5, h6 {
67
+ font-size: inherit;
68
+ font-weight: inherit;
69
+ }
70
+ a {
71
+ color: inherit;
72
+ -webkit-text-decoration: inherit;
73
+ text-decoration: inherit;
74
+ }
75
+ b, strong {
76
+ font-weight: bolder;
77
+ }
78
+ code, kbd, samp, pre {
79
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
80
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
81
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
82
+ font-size: 1em;
83
+ }
84
+ small {
85
+ font-size: 80%;
86
+ }
87
+ sub, sup {
88
+ font-size: 75%;
89
+ line-height: 0;
90
+ position: relative;
91
+ vertical-align: baseline;
92
+ }
93
+ sub {
94
+ bottom: -0.25em;
95
+ }
96
+ sup {
97
+ top: -0.5em;
98
+ }
99
+ table {
100
+ text-indent: 0;
101
+ border-color: inherit;
102
+ border-collapse: collapse;
103
+ }
104
+ :-moz-focusring {
105
+ outline: auto;
106
+ }
107
+ progress {
108
+ vertical-align: baseline;
109
+ }
110
+ summary {
111
+ display: list-item;
112
+ }
113
+ ol, ul, menu {
114
+ list-style: none;
115
+ }
116
+ img, svg, video, canvas, audio, iframe, embed, object {
117
+ display: block;
118
+ vertical-align: middle;
119
+ }
120
+ img, video {
121
+ max-width: 100%;
122
+ height: auto;
123
+ }
124
+ button, input, select, optgroup, textarea, ::file-selector-button {
125
+ font: inherit;
126
+ font-feature-settings: inherit;
127
+ font-variation-settings: inherit;
128
+ letter-spacing: inherit;
129
+ color: inherit;
130
+ border-radius: 0;
131
+ background-color: transparent;
132
+ opacity: 1;
133
+ }
134
+ :where(select:is([multiple], [size])) optgroup {
135
+ font-weight: bolder;
136
+ }
137
+ :where(select:is([multiple], [size])) optgroup option {
138
+ padding-inline-start: 20px;
139
+ }
140
+ ::file-selector-button {
141
+ margin-inline-end: 4px;
142
+ }
143
+ ::placeholder {
144
+ opacity: 1;
145
+ }
146
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
147
+ ::placeholder {
148
+ color: currentcolor;
149
+ @supports (color: color-mix(in lab, red, red)) {
150
+ color: color-mix(in oklab, currentcolor 50%, transparent);
151
+ }
152
+ }
153
+ }
154
+ textarea {
155
+ resize: vertical;
156
+ }
157
+ ::-webkit-search-decoration {
158
+ -webkit-appearance: none;
159
+ }
160
+ ::-webkit-date-and-time-value {
161
+ min-height: 1lh;
162
+ text-align: inherit;
163
+ }
164
+ ::-webkit-datetime-edit {
165
+ display: inline-flex;
166
+ }
167
+ ::-webkit-datetime-edit-fields-wrapper {
168
+ padding: 0;
169
+ }
170
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
171
+ padding-block: 0;
172
+ }
173
+ ::-webkit-calendar-picker-indicator {
174
+ line-height: 1;
175
+ }
176
+ :-moz-ui-invalid {
177
+ box-shadow: none;
178
+ }
179
+ button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
180
+ appearance: button;
181
+ }
182
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
183
+ height: auto;
184
+ }
185
+ [hidden]:where(:not([hidden="until-found"])) {
186
+ display: none !important;
187
+ }
188
+ }
189
+ @layer utilities {
190
+ .pointer-events-none {
191
+ pointer-events: none;
192
+ }
193
+ .absolute {
194
+ position: absolute;
195
+ }
196
+ .fixed {
197
+ position: fixed;
198
+ }
199
+ .relative {
200
+ position: relative;
201
+ }
202
+ .static {
203
+ position: static;
204
+ }
205
+ .sticky {
206
+ position: sticky;
207
+ }
208
+ .inset-0 {
209
+ inset: calc(var(--spacing) * 0);
210
+ }
211
+ .inset-1 {
212
+ inset: calc(var(--spacing) * 1);
213
+ }
214
+ .start {
215
+ inset-inline-start: var(--spacing);
216
+ }
217
+ .top-0 {
218
+ top: calc(var(--spacing) * 0);
219
+ }
220
+ .top-1\/2 {
221
+ top: calc(1 / 2 * 100%);
222
+ }
223
+ .top-4 {
224
+ top: calc(var(--spacing) * 4);
225
+ }
226
+ .right-3 {
227
+ right: calc(var(--spacing) * 3);
228
+ }
229
+ .left-3 {
230
+ left: calc(var(--spacing) * 3);
231
+ }
232
+ .-z-1 {
233
+ z-index: calc(1 * -1);
234
+ }
235
+ .z-1 {
236
+ z-index: 1;
237
+ }
238
+ .z-2 {
239
+ z-index: 2;
240
+ }
241
+ .z-50 {
242
+ z-index: 50;
243
+ }
244
+ .z-99 {
245
+ z-index: 99;
246
+ }
247
+ .z-100 {
248
+ z-index: 100;
249
+ }
250
+ .z-101 {
251
+ z-index: 101;
252
+ }
253
+ .z-200 {
254
+ z-index: 200;
255
+ }
256
+ .z-201 {
257
+ z-index: 201;
258
+ }
259
+ .-order-1 {
260
+ order: calc(1 * -1);
261
+ }
262
+ .container {
263
+ width: 100%;
264
+ @media (width >= 40rem) {
265
+ max-width: 40rem;
266
+ }
267
+ @media (width >= 48rem) {
268
+ max-width: 48rem;
269
+ }
270
+ @media (width >= 64rem) {
271
+ max-width: 64rem;
272
+ }
273
+ @media (width >= 80rem) {
274
+ max-width: 80rem;
275
+ }
276
+ @media (width >= 96rem) {
277
+ max-width: 96rem;
278
+ }
279
+ }
280
+ .mx-auto {
281
+ margin-inline: auto;
282
+ }
283
+ .mt-2 {
284
+ margin-top: calc(var(--spacing) * 2);
285
+ }
286
+ .mt-3 {
287
+ margin-top: calc(var(--spacing) * 3);
288
+ }
289
+ .-mb-2 {
290
+ margin-bottom: calc(var(--spacing) * -2);
291
+ }
292
+ .-mb-\[0\.1em\] {
293
+ margin-bottom: calc(0.1em * -1);
294
+ }
295
+ .-mb-\[0\.15em\] {
296
+ margin-bottom: calc(0.15em * -1);
297
+ }
298
+ .mb-5 {
299
+ margin-bottom: calc(var(--spacing) * 5);
300
+ }
301
+ .ml-1 {
302
+ margin-left: calc(var(--spacing) * 1);
303
+ }
304
+ .block {
305
+ display: block;
306
+ }
307
+ .flex {
308
+ display: flex;
309
+ }
310
+ .grid {
311
+ display: grid;
312
+ }
313
+ .hidden {
314
+ display: none;
315
+ }
316
+ .inline-block {
317
+ display: inline-block;
318
+ }
319
+ .inline-flex {
320
+ display: inline-flex;
321
+ }
322
+ .aspect-4\/1 {
323
+ aspect-ratio: 4/1;
324
+ }
325
+ .aspect-square {
326
+ aspect-ratio: 1 / 1;
327
+ }
328
+ .size-0 {
329
+ width: calc(var(--spacing) * 0);
330
+ height: calc(var(--spacing) * 0);
331
+ }
332
+ .size-2 {
333
+ width: calc(var(--spacing) * 2);
334
+ height: calc(var(--spacing) * 2);
335
+ }
336
+ .size-3\.5 {
337
+ width: calc(var(--spacing) * 3.5);
338
+ height: calc(var(--spacing) * 3.5);
339
+ }
340
+ .size-4 {
341
+ width: calc(var(--spacing) * 4);
342
+ height: calc(var(--spacing) * 4);
343
+ }
344
+ .size-5 {
345
+ width: calc(var(--spacing) * 5);
346
+ height: calc(var(--spacing) * 5);
347
+ }
348
+ .size-10 {
349
+ width: calc(var(--spacing) * 10);
350
+ height: calc(var(--spacing) * 10);
351
+ }
352
+ .h-20 {
353
+ height: calc(var(--spacing) * 20);
354
+ }
355
+ .h-48 {
356
+ height: calc(var(--spacing) * 48);
357
+ }
358
+ .h-\[1\.1em\] {
359
+ height: 1.1em;
360
+ }
361
+ .h-\[2px\] {
362
+ height: 2px;
363
+ }
364
+ .h-\[150dvh\] {
365
+ height: 150dvh;
366
+ }
367
+ .h-\[calc\(var\(--vsq\)\*50\)\] {
368
+ height: calc(var(--vsq) * 50);
369
+ }
370
+ .h-full {
371
+ height: 100%;
372
+ }
373
+ .min-h-\[2\.3rem\] {
374
+ min-height: 2.3rem;
375
+ }
376
+ .w-5 {
377
+ width: calc(var(--spacing) * 5);
378
+ }
379
+ .w-48 {
380
+ width: calc(var(--spacing) * 48);
381
+ }
382
+ .w-\[1\.2ch\] {
383
+ width: 1.2ch;
384
+ }
385
+ .w-auto {
386
+ width: auto;
387
+ }
388
+ .w-fit {
389
+ width: fit-content;
390
+ }
391
+ .w-full {
392
+ width: 100%;
393
+ }
394
+ .w-px {
395
+ width: 1px;
396
+ }
397
+ .max-w-\[1600px\] {
398
+ max-width: 1600px;
399
+ }
400
+ .min-w-0 {
401
+ min-width: calc(var(--spacing) * 0);
402
+ }
403
+ .min-w-dvw {
404
+ min-width: 100dvw;
405
+ }
406
+ .flex-1 {
407
+ flex: 1;
408
+ }
409
+ .shrink-0 {
410
+ flex-shrink: 0;
411
+ }
412
+ .origin-center {
413
+ transform-origin: center;
414
+ }
415
+ .-translate-x-1\/2 {
416
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
417
+ translate: var(--tw-translate-x) var(--tw-translate-y);
418
+ }
419
+ .-translate-y-1\/2 {
420
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
421
+ translate: var(--tw-translate-x) var(--tw-translate-y);
422
+ }
423
+ .translate-y-0\.5 {
424
+ --tw-translate-y: calc(var(--spacing) * 0.5);
425
+ translate: var(--tw-translate-x) var(--tw-translate-y);
426
+ }
427
+ .-rotate-90 {
428
+ rotate: calc(90deg * -1);
429
+ }
430
+ .rotate-90 {
431
+ rotate: 90deg;
432
+ }
433
+ .rotate-180 {
434
+ rotate: 180deg;
435
+ }
436
+ .transform {
437
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
438
+ }
439
+ .cursor-pointer {
440
+ cursor: pointer;
441
+ }
442
+ .resize {
443
+ resize: both;
444
+ }
445
+ .grid-cols-\[1fr_auto\]\! {
446
+ grid-template-columns: 1fr auto !important;
447
+ }
448
+ .grid-cols-\[auto_1fr_auto\] {
449
+ grid-template-columns: auto 1fr auto;
450
+ }
451
+ .grid-cols-\[auto_1fr_auto\]\! {
452
+ grid-template-columns: auto 1fr auto !important;
453
+ }
454
+ .flex-col {
455
+ flex-direction: column;
456
+ }
457
+ .flex-row {
458
+ flex-direction: row;
459
+ }
460
+ .flex-wrap {
461
+ flex-wrap: wrap;
462
+ }
463
+ .items-center {
464
+ align-items: center;
465
+ }
466
+ .items-start {
467
+ align-items: flex-start;
468
+ }
469
+ .items-stretch {
470
+ align-items: stretch;
471
+ }
472
+ .justify-between {
473
+ justify-content: space-between;
474
+ }
475
+ .justify-center {
476
+ justify-content: center;
477
+ }
478
+ .gap-1 {
479
+ gap: calc(var(--spacing) * 1);
480
+ }
481
+ .gap-2 {
482
+ gap: calc(var(--spacing) * 2);
483
+ }
484
+ .gap-2\.5 {
485
+ gap: calc(var(--spacing) * 2.5);
486
+ }
487
+ .gap-3 {
488
+ gap: calc(var(--spacing) * 3);
489
+ }
490
+ .gap-4 {
491
+ gap: calc(var(--spacing) * 4);
492
+ }
493
+ .gap-5 {
494
+ gap: calc(var(--spacing) * 5);
495
+ }
496
+ .gap-6 {
497
+ gap: calc(var(--spacing) * 6);
498
+ }
499
+ .gap-8 {
500
+ gap: calc(var(--spacing) * 8);
501
+ }
502
+ .truncate {
503
+ overflow: hidden;
504
+ text-overflow: ellipsis;
505
+ white-space: nowrap;
506
+ }
507
+ .overflow-clip {
508
+ overflow: clip;
509
+ }
510
+ .overflow-hidden {
511
+ overflow: hidden;
512
+ }
513
+ .rounded {
514
+ border-radius: 0.25rem;
515
+ }
516
+ .rounded-full {
517
+ border-radius: calc(infinity * 1px);
518
+ }
519
+ .border-4 {
520
+ border-style: var(--tw-border-style);
521
+ border-width: 4px;
522
+ }
523
+ .border-double {
524
+ --tw-border-style: double;
525
+ border-style: double;
526
+ }
527
+ .border-inherit {
528
+ border-color: inherit;
529
+ }
530
+ .bg-background-base {
531
+ background-color: var(--background-base);
532
+ }
533
+ .bg-black {
534
+ background-color: var(--color-black);
535
+ }
536
+ .bg-current\/3 {
537
+ background-color: currentcolor;
538
+ @supports (color: color-mix(in lab, red, red)) {
539
+ background-color: color-mix(in oklab, currentcolor 3%, transparent);
540
+ }
541
+ }
542
+ .bg-midground {
543
+ background-color: var(--midground);
544
+ }
545
+ .bg-midground\/15 {
546
+ background-color: var(--midground);
547
+ @supports (color: color-mix(in lab, red, red)) {
548
+ background-color: color-mix(in oklab, var(--midground) 15%, transparent);
549
+ }
550
+ }
551
+ .bg-midground\/20 {
552
+ background-color: var(--midground);
553
+ @supports (color: color-mix(in lab, red, red)) {
554
+ background-color: color-mix(in oklab, var(--midground) 20%, transparent);
555
+ }
556
+ }
557
+ .bg-transparent {
558
+ background-color: transparent;
559
+ }
560
+ .object-cover {
561
+ object-fit: cover;
562
+ }
563
+ .object-top-left {
564
+ object-position: left top;
565
+ }
566
+ .p-2 {
567
+ padding: calc(var(--spacing) * 2);
568
+ }
569
+ .p-3 {
570
+ padding: calc(var(--spacing) * 3);
571
+ }
572
+ .p-8 {
573
+ padding: calc(var(--spacing) * 8);
574
+ }
575
+ .px-0 {
576
+ padding-inline: calc(var(--spacing) * 0);
577
+ }
578
+ .px-2 {
579
+ padding-inline: calc(var(--spacing) * 2);
580
+ }
581
+ .px-2\.5 {
582
+ padding-inline: calc(var(--spacing) * 2.5);
583
+ }
584
+ .px-6 {
585
+ padding-inline: calc(var(--spacing) * 6);
586
+ }
587
+ .px-\[\.9em_\.75em\] {
588
+ padding-inline: .9em .75em;
589
+ }
590
+ .py-1 {
591
+ padding-block: calc(var(--spacing) * 1);
592
+ }
593
+ .py-1\.5 {
594
+ padding-block: calc(var(--spacing) * 1.5);
595
+ }
596
+ .py-2 {
597
+ padding-block: calc(var(--spacing) * 2);
598
+ }
599
+ .py-3 {
600
+ padding-block: calc(var(--spacing) * 3);
601
+ }
602
+ .py-12 {
603
+ padding-block: calc(var(--spacing) * 12);
604
+ }
605
+ .py-\[1\.25em\] {
606
+ padding-block: 1.25em;
607
+ }
608
+ .pr-10 {
609
+ padding-right: calc(var(--spacing) * 10);
610
+ }
611
+ .pr-12 {
612
+ padding-right: calc(var(--spacing) * 12);
613
+ }
614
+ .pb-10 {
615
+ padding-bottom: calc(var(--spacing) * 10);
616
+ }
617
+ .text-center {
618
+ text-align: center;
619
+ }
620
+ .text-right {
621
+ text-align: right;
622
+ }
623
+ .align-top {
624
+ vertical-align: top;
625
+ }
626
+ .font-compressed {
627
+ font-family: var(--font-rules-compressed);
628
+ }
629
+ .font-courier {
630
+ font-family: 'Courier New', var(--font-mono), monospace;
631
+ }
632
+ .font-expanded {
633
+ font-family: var(--font-rules-expanded);
634
+ }
635
+ .font-mondwest {
636
+ font-family: var(--font-mondwest);
637
+ }
638
+ .font-mono {
639
+ font-family: var(--font-mono);
640
+ }
641
+ .font-sans {
642
+ font-family: var(--font-sans);
643
+ }
644
+ .text-4xl {
645
+ font-size: var(--text-4xl);
646
+ line-height: var(--tw-leading, var(--text-4xl--line-height));
647
+ }
648
+ .text-lg {
649
+ font-size: var(--text-lg);
650
+ line-height: var(--tw-leading, var(--text-lg--line-height));
651
+ }
652
+ .text-sm {
653
+ font-size: var(--text-sm);
654
+ line-height: var(--tw-leading, var(--text-sm--line-height));
655
+ }
656
+ .text-xs {
657
+ font-size: var(--text-xs);
658
+ line-height: var(--tw-leading, var(--text-xs--line-height));
659
+ }
660
+ .text-\[\.9375rem\] {
661
+ font-size: .9375rem;
662
+ }
663
+ .text-\[0\.8125rem\] {
664
+ font-size: 0.8125rem;
665
+ }
666
+ .text-\[1\.575rem\] {
667
+ font-size: 1.575rem;
668
+ }
669
+ .text-\[2\.625rem\] {
670
+ font-size: 2.625rem;
671
+ }
672
+ .text-\[4\.5rem\] {
673
+ font-size: 4.5rem;
674
+ }
675
+ .text-\[10px\] {
676
+ font-size: 10px;
677
+ }
678
+ .text-\[13px\] {
679
+ font-size: 13px;
680
+ }
681
+ .leading-0 {
682
+ --tw-leading: calc(var(--spacing) * 0);
683
+ line-height: calc(var(--spacing) * 0);
684
+ }
685
+ .leading-\[1\.4\] {
686
+ --tw-leading: 1.4;
687
+ line-height: 1.4;
688
+ }
689
+ .leading-\[1\] {
690
+ --tw-leading: 1;
691
+ line-height: 1;
692
+ }
693
+ .leading-none {
694
+ --tw-leading: 1;
695
+ line-height: 1;
696
+ }
697
+ .leading-tight {
698
+ --tw-leading: var(--leading-tight);
699
+ line-height: var(--leading-tight);
700
+ }
701
+ .font-bold {
702
+ --tw-font-weight: var(--font-weight-bold);
703
+ font-weight: var(--font-weight-bold);
704
+ }
705
+ .font-normal {
706
+ --tw-font-weight: var(--font-weight-normal);
707
+ font-weight: var(--font-weight-normal);
708
+ }
709
+ .tracking-\[\.6rem\] {
710
+ --tw-tracking: .6rem;
711
+ letter-spacing: .6rem;
712
+ }
713
+ .tracking-\[0\.2em\] {
714
+ --tw-tracking: 0.2em;
715
+ letter-spacing: 0.2em;
716
+ }
717
+ .tracking-\[0\.4em\] {
718
+ --tw-tracking: 0.4em;
719
+ letter-spacing: 0.4em;
720
+ }
721
+ .tracking-\[0\.35em\] {
722
+ --tw-tracking: 0.35em;
723
+ letter-spacing: 0.35em;
724
+ }
725
+ .tracking-\[0\.135rem\] {
726
+ --tw-tracking: 0.135rem;
727
+ letter-spacing: 0.135rem;
728
+ }
729
+ .tracking-\[0\.0525rem\] {
730
+ --tw-tracking: 0.0525rem;
731
+ letter-spacing: 0.0525rem;
732
+ }
733
+ .tracking-\[0\.1875rem\] {
734
+ --tw-tracking: 0.1875rem;
735
+ letter-spacing: 0.1875rem;
736
+ }
737
+ .tracking-normal {
738
+ --tw-tracking: var(--tracking-normal);
739
+ letter-spacing: var(--tracking-normal);
740
+ }
741
+ .tracking-widest {
742
+ --tw-tracking: var(--tracking-widest);
743
+ letter-spacing: var(--tracking-widest);
744
+ }
745
+ .whitespace-nowrap {
746
+ white-space: nowrap;
747
+ }
748
+ .text-background-base {
749
+ color: var(--background-base);
750
+ }
751
+ .text-current\/20 {
752
+ color: currentcolor;
753
+ @supports (color: color-mix(in lab, red, red)) {
754
+ color: color-mix(in oklab, currentcolor 20%, transparent);
755
+ }
756
+ }
757
+ .text-midground {
758
+ color: var(--midground);
759
+ }
760
+ .text-red-500 {
761
+ color: var(--color-red-500);
762
+ }
763
+ .capitalize {
764
+ text-transform: capitalize;
765
+ }
766
+ .normal-case {
767
+ text-transform: none;
768
+ }
769
+ .uppercase {
770
+ text-transform: uppercase;
771
+ }
772
+ .tabular-nums {
773
+ --tw-numeric-spacing: tabular-nums;
774
+ font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
775
+ }
776
+ .underline {
777
+ text-decoration-line: underline;
778
+ }
779
+ .antialiased {
780
+ -webkit-font-smoothing: antialiased;
781
+ -moz-osx-font-smoothing: grayscale;
782
+ text-rendering: optimizeLegibility;
783
+ }
784
+ .antialiased {
785
+ -webkit-font-smoothing: antialiased;
786
+ -moz-osx-font-smoothing: grayscale;
787
+ }
788
+ .opacity-\(--midground-alpha\) {
789
+ opacity: var(--midground-alpha);
790
+ }
791
+ .opacity-0 {
792
+ opacity: 0%;
793
+ }
794
+ .opacity-5 {
795
+ opacity: 5%;
796
+ }
797
+ .opacity-20 {
798
+ opacity: 20%;
799
+ }
800
+ .opacity-40 {
801
+ opacity: 40%;
802
+ }
803
+ .opacity-50 {
804
+ opacity: 50%;
805
+ }
806
+ .opacity-60 {
807
+ opacity: 60%;
808
+ }
809
+ .opacity-90 {
810
+ opacity: 90%;
811
+ }
812
+ .shadow-\[inset_-1px_-1px_0_0_\#00000080\,inset_1px_1px_0_0_\#ffffff29\] {
813
+ --tw-shadow: inset -1px -1px 0 0 var(--tw-shadow-color, #00000080), inset 1px 1px 0 0 var(--tw-shadow-color, #ffffff29);
814
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
815
+ }
816
+ .shadow-\[inset_-1px_-1px_0_0_\#00000080\,inset_1px_1px_0_0_\#ffffff80\] {
817
+ --tw-shadow: inset -1px -1px 0 0 var(--tw-shadow-color, #00000080), inset 1px 1px 0 0 var(--tw-shadow-color, #ffffff80);
818
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
819
+ }
820
+ .shadow-\[inset_-1px_-1px_0_0_\#ffffff12\,inset_1px_1px_0_0_\#ffffff29\] {
821
+ --tw-shadow: inset -1px -1px 0 0 var(--tw-shadow-color, #ffffff12), inset 1px 1px 0 0 var(--tw-shadow-color, #ffffff29);
822
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
823
+ }
824
+ .shadow-midground {
825
+ --tw-shadow-color: var(--midground);
826
+ @supports (color: color-mix(in lab, red, red)) {
827
+ --tw-shadow-color: color-mix(in oklab, var(--midground) var(--tw-shadow-alpha), transparent);
828
+ }
829
+ }
830
+ .outline {
831
+ outline-style: var(--tw-outline-style);
832
+ outline-width: 1px;
833
+ }
834
+ .invert {
835
+ --tw-invert: invert(100%);
836
+ 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,);
837
+ }
838
+ .filter {
839
+ 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,);
840
+ }
841
+ .transition {
842
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
843
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
844
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
845
+ }
846
+ .transition-all {
847
+ transition-property: all;
848
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
849
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
850
+ }
851
+ .transition-opacity {
852
+ transition-property: opacity;
853
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
854
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
855
+ }
856
+ .duration-200 {
857
+ --tw-duration: 200ms;
858
+ transition-duration: 200ms;
859
+ }
860
+ .duration-250 {
861
+ --tw-duration: 250ms;
862
+ transition-duration: 250ms;
863
+ }
864
+ .duration-500 {
865
+ --tw-duration: 500ms;
866
+ transition-duration: 500ms;
867
+ }
868
+ .select-none {
869
+ -webkit-user-select: none;
870
+ user-select: none;
871
+ }
872
+ .group-hover\:inline-block {
873
+ &:is(:where(.group):hover *) {
874
+ @media (hover: hover) {
875
+ display: inline-block;
876
+ }
877
+ }
878
+ }
879
+ .group-hover\:opacity-5 {
880
+ &:is(:where(.group):hover *) {
881
+ @media (hover: hover) {
882
+ opacity: 5%;
883
+ }
884
+ }
885
+ }
886
+ .group-hover\:opacity-100 {
887
+ &:is(:where(.group):hover *) {
888
+ @media (hover: hover) {
889
+ opacity: 100%;
890
+ }
891
+ }
892
+ }
893
+ .group-hover\:duration-0 {
894
+ &:is(:where(.group):hover *) {
895
+ @media (hover: hover) {
896
+ --tw-duration: 0ms;
897
+ transition-duration: 0ms;
898
+ }
899
+ }
900
+ }
901
+ .group-focus-visible\:opacity-100 {
902
+ &:is(:where(.group):focus-visible *) {
903
+ opacity: 100%;
904
+ }
905
+ }
906
+ .group-active\:opacity-100 {
907
+ &:is(:where(.group):active *) {
908
+ opacity: 100%;
909
+ }
910
+ }
911
+ .hover\:bg-midground\/10 {
912
+ &:hover {
913
+ @media (hover: hover) {
914
+ background-color: var(--midground);
915
+ @supports (color: color-mix(in lab, red, red)) {
916
+ background-color: color-mix(in oklab, var(--midground) 10%, transparent);
917
+ }
918
+ }
919
+ }
920
+ }
921
+ .hover\:bg-midground\/10\! {
922
+ &:hover {
923
+ @media (hover: hover) {
924
+ background-color: var(--midground) !important;
925
+ @supports (color: color-mix(in lab, red, red)) {
926
+ background-color: color-mix(in oklab, var(--midground) 10%, transparent) !important;
927
+ }
928
+ }
929
+ }
930
+ }
931
+ .hover\:underline {
932
+ &:hover {
933
+ @media (hover: hover) {
934
+ text-decoration-line: underline;
935
+ }
936
+ }
937
+ }
938
+ .hover\:ring-2 {
939
+ &:hover {
940
+ @media (hover: hover) {
941
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
942
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
943
+ }
944
+ }
945
+ }
946
+ .hover\:ring-current\/20 {
947
+ &:hover {
948
+ @media (hover: hover) {
949
+ --tw-ring-color: currentcolor;
950
+ @supports (color: color-mix(in lab, red, red)) {
951
+ --tw-ring-color: color-mix(in oklab, currentcolor 20%, transparent);
952
+ }
953
+ }
954
+ }
955
+ }
956
+ .hover\:duration-0 {
957
+ &:hover {
958
+ @media (hover: hover) {
959
+ --tw-duration: 0ms;
960
+ transition-duration: 0ms;
961
+ }
962
+ }
963
+ }
964
+ .active\:invert {
965
+ &:active {
966
+ --tw-invert: invert(100%);
967
+ 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,);
968
+ }
969
+ }
970
+ .disabled\:pointer-events-none {
971
+ &:disabled {
972
+ pointer-events: none;
973
+ }
974
+ }
975
+ .disabled\:bg-midground\/15 {
976
+ &:disabled {
977
+ background-color: var(--midground);
978
+ @supports (color: color-mix(in lab, red, red)) {
979
+ background-color: color-mix(in oklab, var(--midground) 15%, transparent);
980
+ }
981
+ }
982
+ }
983
+ .disabled\:text-midground {
984
+ &:disabled {
985
+ color: var(--midground);
986
+ }
987
+ }
988
+ .disabled\:shadow-none {
989
+ &:disabled {
990
+ --tw-shadow: 0 0 #0000;
991
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
992
+ }
993
+ }
994
+ .lg\:h-full {
995
+ @media (width >= 64rem) {
996
+ height: 100%;
997
+ }
998
+ }
999
+ .lg\:grid-cols-\[max-content_1fr\] {
1000
+ @media (width >= 64rem) {
1001
+ grid-template-columns: max-content 1fr;
1002
+ }
1003
+ }
1004
+ }
1005
+ @font-face {
1006
+ font-family: 'Collapse';
1007
+ font-style: normal;
1008
+ font-weight: 400;
1009
+ font-display: swap;
1010
+ src: url(/fonts/Collapse-Regular.woff2) format('woff2');
1011
+ }
1012
+ @font-face {
1013
+ font-family: 'Collapse';
1014
+ font-style: normal;
1015
+ font-weight: 700;
1016
+ font-display: swap;
1017
+ src: url(/fonts/Collapse-Bold.woff2) format('woff2');
1018
+ }
1019
+ @font-face {
1020
+ font-family: 'Rules Compressed';
1021
+ font-style: normal;
1022
+ font-weight: 400;
1023
+ font-display: swap;
1024
+ src: url(/fonts/RulesCompressed-Regular.woff2) format('woff2');
1025
+ }
1026
+ @font-face {
1027
+ font-family: 'Rules Compressed';
1028
+ font-style: normal;
1029
+ font-weight: 600;
1030
+ font-display: swap;
1031
+ src: url(/fonts/RulesCompressed-Medium.woff2) format('woff2');
1032
+ }
1033
+ @font-face {
1034
+ font-family: 'Rules Expanded';
1035
+ font-style: normal;
1036
+ font-weight: 400;
1037
+ font-display: swap;
1038
+ src: url(/fonts/RulesExpanded-Regular.woff2) format('woff2');
1039
+ }
1040
+ @font-face {
1041
+ font-family: 'Rules Expanded';
1042
+ font-style: normal;
1043
+ font-weight: 700;
1044
+ font-display: swap;
1045
+ src: url(/fonts/RulesExpanded-Bold.woff2) format('woff2');
1046
+ }
1047
+ @font-face {
1048
+ font-family: 'Mondwest';
1049
+ font-style: normal;
1050
+ font-weight: 400;
1051
+ font-display: swap;
1052
+ src: url(/fonts/Mondwest-Regular.woff2) format('woff2');
1053
+ }
1054
+ :root {
1055
+ --font-sans: 'Collapse', sans-serif;
1056
+ --font-mono: 'Courier Prime', monospace;
1057
+ --font-rules-compressed: 'Rules Compressed', sans-serif;
1058
+ --font-rules-expanded: 'Rules Expanded', sans-serif;
1059
+ --font-mondwest: 'Mondwest', sans-serif;
1060
+ }
1061
+ @layer components {
1062
+ .fit-text {
1063
+ --fit-captured-length: initial;
1064
+ --fit-support-sentinel: var(--fit-captured-length, 9999px);
1065
+ display: flex;
1066
+ container-type: inline-size;
1067
+ > [aria-hidden] {
1068
+ visibility: hidden;
1069
+ }
1070
+ > :not([aria-hidden]) {
1071
+ flex-grow: 1;
1072
+ container-type: inline-size;
1073
+ --fit-captured-length: 100cqi;
1074
+ --fit-available-space: var(--fit-captured-length);
1075
+ > * {
1076
+ --fit-support-sentinel: inherit;
1077
+ --fit-captured-length: 100cqi;
1078
+ --fit-ratio: tan(
1079
+ atan2(
1080
+ var(--fit-available-space),
1081
+ var(--fit-available-space) - var(--fit-captured-length)
1082
+ )
1083
+ );
1084
+ display: block;
1085
+ inline-size: var(--fit-available-space);
1086
+ font-size: clamp( var(--fit-min, 1em), 1em * var(--fit-ratio), var(--fit-max, infinity * 1px) - var(--fit-support-sentinel) );
1087
+ @container (inline-size > 0) {
1088
+ white-space: nowrap;
1089
+ }
1090
+ }
1091
+ }
1092
+ }
1093
+ }
1094
+ @layer components {
1095
+ .g {
1096
+ display: grid;
1097
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1098
+ border-left-style: var(--tw-border-style);
1099
+ border-left-width: 1px;
1100
+ border-color: currentcolor;
1101
+ @supports (color: color-mix(in lab, red, red)) {
1102
+ border-color: color-mix(in oklab, currentcolor 20%, transparent);
1103
+ }
1104
+ &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) > .gc:nth-child(2) {
1105
+ order: calc(1 * -1);
1106
+ }
1107
+ @media (width >= 40rem) {
1108
+ &:has(> .gc:nth-child(2)) {
1109
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1110
+ }
1111
+ &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) > .gc:nth-child(2) {
1112
+ order: calc(1 * -1);
1113
+ grid-column: 1 / -1;
1114
+ }
1115
+ }
1116
+ @media (width >= 64rem) {
1117
+ &:has(> .gc:nth-child(3)) {
1118
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1119
+ }
1120
+ &:has(> .gc:nth-child(4)) {
1121
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1122
+ }
1123
+ &:has(> .gc:nth-child(5)) {
1124
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1125
+ }
1126
+ &:has(> .gc:nth-child(6)) {
1127
+ grid-template-columns: repeat(6, minmax(0, 1fr));
1128
+ }
1129
+ &:has(> .gc:nth-child(3)):not(:has(> .gc:nth-child(4))) {
1130
+ grid-template-columns: 1fr 2fr 1fr;
1131
+ > .gc:nth-child(2) {
1132
+ order: 0;
1133
+ grid-column: auto;
1134
+ }
1135
+ }
1136
+ }
1137
+ &:last-child {
1138
+ border-bottom-style: var(--tw-border-style);
1139
+ border-bottom-width: 1px;
1140
+ }
1141
+ &:first-child, + .g > .gc, > .g {
1142
+ border-top-style: var(--tw-border-style);
1143
+ border-top-width: 1px;
1144
+ }
1145
+ .g {
1146
+ border-left-style: var(--tw-border-style);
1147
+ border-left-width: 0px;
1148
+ }
1149
+ &:not(:last-child) .gc:last-child {
1150
+ border-bottom-style: var(--tw-border-style);
1151
+ border-bottom-width: 0px;
1152
+ }
1153
+ .gc {
1154
+ min-width: calc(var(--spacing) * 0);
1155
+ border-right-style: var(--tw-border-style);
1156
+ border-right-width: 1px;
1157
+ border-color: inherit;
1158
+ padding: calc(var(--spacing) * 4);
1159
+ &:has(> .gc) {
1160
+ padding: calc(var(--spacing) * 0);
1161
+ > .gc {
1162
+ border-right-style: var(--tw-border-style);
1163
+ border-right-width: 0px;
1164
+ &:not(*:first-child) {
1165
+ border-top-style: var(--tw-border-style);
1166
+ border-top-width: 1px;
1167
+ }
1168
+ &:last-child {
1169
+ border-bottom-style: var(--tw-border-style);
1170
+ border-bottom-width: 0px;
1171
+ }
1172
+ }
1173
+ }
1174
+ }
1175
+ .post.gc {
1176
+ @media (width >= 64rem) {
1177
+ padding: calc(var(--spacing) * 12);
1178
+ }
1179
+ }
1180
+ }
1181
+ }
1182
+ @layer components {
1183
+ .modal {
1184
+ z-index: 50;
1185
+ margin: auto;
1186
+ max-height: 85dvh;
1187
+ max-width: 90dvw;
1188
+ background-color: var(--foreground-base);
1189
+ padding: calc(var(--spacing) * 0);
1190
+ color: var(--background-base);
1191
+ opacity: 0%;
1192
+ --tw-outline-style: none;
1193
+ outline-style: none;
1194
+ transition: opacity 0.25s ease-out, overlay 0.25s ease-out allow-discrete, display 0.25s ease-out allow-discrete;
1195
+ &::backdrop {
1196
+ background-color: var(--foreground-base);
1197
+ @supports (color: color-mix(in lab, red, red)) {
1198
+ background-color: color-mix(in oklab, var(--foreground-base) 2%, transparent);
1199
+ }
1200
+ --tw-backdrop-blur: blur(var(--blur-xs));
1201
+ -webkit-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,);
1202
+ 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,);
1203
+ transition: opacity 0.25s ease-out, overlay 0.25s ease-out allow-discrete, display 0.25s ease-out allow-discrete;
1204
+ }
1205
+ &[open] {
1206
+ opacity: 100%;
1207
+ &::backdrop {
1208
+ opacity: 100%;
1209
+ }
1210
+ }
1211
+ @starting-style {
1212
+ &[open], &[open]::backdrop {
1213
+ opacity: 0%;
1214
+ }
1215
+ }
1216
+ }
1217
+ .modal-body {
1218
+ overflow-y: auto;
1219
+ padding: calc(var(--spacing) * 8);
1220
+ font-family: var(--font-mono);
1221
+ text-transform: none;
1222
+ }
1223
+ }
6
1224
  @view-transition {
7
1225
  navigation: auto;
8
1226
  }
9
-
10
1227
  @media (prefers-reduced-motion: reduce) {
11
1228
  @view-transition {
12
1229
  navigation: none;
13
1230
  }
14
1231
  }
15
-
16
- ::view-transition-old(page),
17
- ::view-transition-new(page) {
1232
+ ::view-transition-old(page), ::view-transition-new(page) {
18
1233
  animation-duration: 0.25s;
19
1234
  animation-timing-function: ease-out;
20
1235
  }
21
-
22
1236
  ::view-transition-old(page) {
23
1237
  animation: fade-out 0.25s ease-out;
24
1238
  }
25
-
26
1239
  ::view-transition-new(page) {
27
1240
  animation: fade-in 0.25s ease-out;
28
1241
  }
29
-
30
1242
  @keyframes fade-out {
31
1243
  to {
32
1244
  opacity: 0;
33
1245
  }
34
1246
  }
35
-
36
1247
  @keyframes fade-in {
37
1248
  from {
38
1249
  opacity: 0;
39
1250
  }
40
1251
  }
41
-
42
1252
  @keyframes slide-down {
43
1253
  from {
44
1254
  opacity: 0;
45
1255
  transform: translateY(-6px);
46
1256
  }
47
1257
  }
48
-
49
1258
  @keyframes slide-up {
50
1259
  from {
51
1260
  opacity: 0;
52
1261
  transform: translateY(6px);
53
1262
  }
54
1263
  }
55
-
56
1264
  .animate-slide-down {
57
1265
  animation: slide-down 0.6s ease-out both;
58
1266
  }
59
-
60
1267
  .animate-slide-up {
61
1268
  animation: slide-up 0.6s ease-out both;
62
1269
  }
63
-
64
1270
  .animate-fade-in {
65
1271
  animation: fade-in 0.5s ease-out both;
66
1272
  }
67
-
68
1273
  @keyframes blink {
69
- 0%,
70
- 100% {
1274
+ 0%, 100% {
71
1275
  opacity: 1;
72
1276
  }
73
1277
  50% {
74
1278
  opacity: 0;
75
1279
  }
76
1280
  }
77
-
78
1281
  @keyframes spin-slow {
79
1282
  from {
80
1283
  transform: rotate(0deg);
@@ -83,50 +1286,20 @@
83
1286
  transform: rotate(360deg);
84
1287
  }
85
1288
  }
86
-
87
1289
  .animate-spin-slow {
88
1290
  animation: spin-slow 12s linear infinite;
89
1291
  }
90
-
91
1292
  @keyframes march {
92
1293
  to {
93
1294
  background-position: 0.5rem 0;
94
1295
  }
95
1296
  }
96
-
97
1297
  .group:hover .blink {
98
1298
  animation: blink 1s step-end infinite;
99
1299
  }
100
-
101
1300
  .dither {
102
- background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%)
103
- 0 0 / 2px 2px;
104
- }
105
-
106
- @custom-variant dark (&:is(.dark *));
107
-
108
- @theme inline {
109
- --color-background: var(--background);
110
- --color-background-base: var(--background-base);
111
- --color-midground: var(--midground);
112
- --color-midground-base: var(--midground-base);
113
- --color-foreground: var(--foreground);
114
- --color-foreground-base: var(--foreground-base);
115
- --color-gesso: #eaeaea;
116
-
117
- --color-current: currentColor;
118
- --color-transparent: transparent;
119
-
120
- --gap-inherit: inherit;
121
- --height-between-header-footer: max(
122
- 400px,
123
- calc(
124
- 100dvh - 5rem -
125
- (var(--header-height, 3.5rem) + var(--footer-height, 4.35rem))
126
- )
127
- );
1301
+ background: repeating-conic-gradient(currentColor 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
128
1302
  }
129
-
130
1303
  :root {
131
1304
  --background: color-mix(in srgb, #170d02 100%, transparent);
132
1305
  --background-base: #170d02;
@@ -139,89 +1312,25 @@
139
1312
  --foreground-alpha: 1;
140
1313
  --vsq: calc(0.5vw + 0.5vh);
141
1314
  }
142
-
143
1315
  @property --fit-captured-length {
144
1316
  syntax: '<length>';
145
1317
  initial-value: 0px;
146
1318
  inherits: true;
147
1319
  }
148
-
149
- @utility font-compressed {
150
- font-family: var(--font-rules-compressed);
151
- }
152
-
153
- @utility font-expanded {
154
- font-family: var(--font-rules-expanded);
155
- }
156
-
157
- @utility font-mondwest {
158
- font-family: var(--font-mondwest);
159
- }
160
-
161
- @utility font-courier {
162
- font-family: 'Courier New', var(--font-mono), monospace;
163
- }
164
-
165
- @utility font-serif {
166
- font-family: 'Times New Roman', Times, serif;
167
- }
168
-
169
- @utility text-box-trim-none {
170
- text-box-trim: none;
171
- }
172
-
173
- @utility text-box-trim-both {
174
- text-box-trim: trim-both;
175
- }
176
-
177
- @utility text-box-trim-start {
178
- text-box-trim: trim-start;
179
- }
180
-
181
- @utility text-box-trim-end {
182
- text-box-trim: trim-end;
183
- }
184
-
185
- @utility grid-cols-auto-fit {
186
- grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
187
- }
188
-
189
- @utility h-between-header-footer {
190
- min-height: var(--height-between-header-footer);
191
- }
192
-
193
- @utility w-fill {
194
- width: -webkit-fill-available;
195
- }
196
-
197
- @utility h-fill {
198
- height: -webkit-fill-available;
199
- }
200
-
201
- @utility antialiased {
202
- -webkit-font-smoothing: antialiased;
203
- -moz-osx-font-smoothing: grayscale;
204
- text-rendering: optimizeLegibility;
205
- }
206
-
207
- @utility underline-from-font {
208
- text-decoration-skip-ink: auto;
209
- text-underline-position: from-font;
210
- }
211
-
212
1320
  @keyframes gradient-stroke {
213
1321
  0% {
214
1322
  background-position: 15% 15%;
215
1323
  }
216
-
217
1324
  100% {
218
1325
  background-position: 75% 75%;
219
1326
  }
220
1327
  }
221
-
222
1328
  .arc-border {
223
1329
  --_t: clamp(0%, (0.5 - var(--foreground-alpha, 1)) * 99900%, 100%);
224
- --arc-c0: color-mix(in srgb, var(--foreground) var(--_t), transparent);
1330
+ --arc-c0: var(--foreground);
1331
+ @supports (color: color-mix(in lab, red, red)) {
1332
+ --arc-c0: color-mix(in srgb, var(--foreground) var(--_t), transparent);
1333
+ }
225
1334
  --arc-c1: var(--midground);
226
1335
  --arc-c2: var(--background);
227
1336
  --arc-angle: 160deg;
@@ -244,97 +1353,412 @@
244
1353
  var(--arc-c0) 95%,
245
1354
  var(--arc-c1) 100%
246
1355
  );
247
-
248
- @apply pointer-events-none absolute z-[-1] overflow-hidden rounded-[inherit];
249
-
1356
+ pointer-events: none;
1357
+ position: absolute;
1358
+ z-index: -1;
1359
+ overflow: hidden;
1360
+ border-radius: inherit;
250
1361
  inset: var(--arc-inset);
251
1362
  padding: var(--arc-width);
252
- mask:
253
- linear-gradient(#000 0 0) content-box,
254
- linear-gradient(#000 0 0);
1363
+ mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
255
1364
  -webkit-mask-composite: xor;
256
1365
  mask-composite: exclude;
257
-
258
1366
  &::before {
259
1367
  content: '';
260
- @apply absolute inset-0 rounded-[inherit];
1368
+ position: absolute;
1369
+ inset: calc(var(--spacing) * 0);
1370
+ border-radius: inherit;
261
1371
  background: var(--arc-gradient);
262
1372
  background-size: 300% 300%;
263
1373
  animation: gradient-stroke var(--arc-duration) linear infinite;
264
1374
  }
265
1375
  }
266
-
267
1376
  @layer base {
268
1377
  * {
269
- @apply antialiased;
270
-
1378
+ text-rendering: optimizeLegibility;
1379
+ -webkit-font-smoothing: antialiased;
1380
+ -moz-osx-font-smoothing: grayscale;
271
1381
  text-box-trim: trim-both;
272
1382
  scrollbar-width: thin;
273
1383
  scrollbar-color: transparent transparent;
274
-
275
1384
  &:hover {
276
- scrollbar-color: color-mix(in srgb, var(--midground) 20%, transparent)
277
- transparent;
1385
+ scrollbar-color: var(--midground) transparent;
1386
+ @supports (color: color-mix(in lab, red, red)) {
1387
+ scrollbar-color: color-mix(in srgb, var(--midground) 20%, transparent) transparent;
1388
+ }
278
1389
  }
279
1390
  }
280
-
281
1391
  ::-webkit-scrollbar {
282
1392
  width: 0.25rem;
283
1393
  height: 0.25rem;
284
1394
  }
285
-
286
- ::-webkit-scrollbar-track,
287
- ::-webkit-scrollbar-button {
1395
+ ::-webkit-scrollbar-track, ::-webkit-scrollbar-button {
288
1396
  display: none;
289
1397
  }
290
-
291
1398
  ::-webkit-scrollbar-thumb {
292
1399
  background: transparent;
293
1400
  border-radius: 1rem;
294
1401
  min-height: 1rem;
295
1402
  }
296
-
297
1403
  *:hover::-webkit-scrollbar-thumb {
298
- background: color-mix(in srgb, var(--midground) 20%, transparent);
1404
+ background: var(--midground);
1405
+ @supports (color: color-mix(in lab, red, red)) {
1406
+ background: color-mix(in srgb, var(--midground) 20%, transparent);
1407
+ }
1408
+ }
1409
+ html, body {
1410
+ scrollbar-color: var(--midground) transparent;
1411
+ @supports (color: color-mix(in lab, red, red)) {
1412
+ scrollbar-color: color-mix(in srgb, var(--midground) 65%, transparent) transparent;
1413
+ }
1414
+ }
1415
+ html:hover, body:hover {
1416
+ scrollbar-color: var(--midground) transparent;
1417
+ @supports (color: color-mix(in lab, red, red)) {
1418
+ scrollbar-color: color-mix(in srgb, var(--midground) 80%, transparent) transparent;
1419
+ }
1420
+ }
1421
+ html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb {
1422
+ background: var(--midground);
1423
+ @supports (color: color-mix(in lab, red, red)) {
1424
+ background: color-mix(in srgb, var(--midground) 65%, transparent);
1425
+ }
1426
+ }
1427
+ html:hover::-webkit-scrollbar-thumb, body:hover::-webkit-scrollbar-thumb {
1428
+ background: var(--midground);
1429
+ @supports (color: color-mix(in lab, red, red)) {
1430
+ background: color-mix(in srgb, var(--midground) 80%, transparent);
1431
+ }
299
1432
  }
300
-
301
- html,
302
- body {
303
- scrollbar-color: color-mix(in srgb, var(--midground) 65%, transparent)
304
- transparent;
305
- }
306
-
307
- html:hover,
308
- body:hover {
309
- scrollbar-color: color-mix(in srgb, var(--midground) 80%, transparent)
310
- transparent;
311
- }
312
-
313
- html::-webkit-scrollbar-thumb,
314
- body::-webkit-scrollbar-thumb {
315
- background: color-mix(in srgb, var(--midground) 65%, transparent);
316
- }
317
-
318
- html:hover::-webkit-scrollbar-thumb,
319
- body:hover::-webkit-scrollbar-thumb {
320
- background: color-mix(in srgb, var(--midground) 80%, transparent);
321
- }
322
-
323
1433
  html {
324
1434
  font-size: clamp(10px, var(--vsq) * 5, 14px);
325
1435
  }
326
-
327
1436
  body {
328
- @apply bg-background text-foreground;
1437
+ background-color: var(--background);
1438
+ color: var(--foreground);
329
1439
  }
330
-
331
1440
  .underline {
332
- @apply underline-from-font uppercase underline decoration-current/25 decoration-solid decoration-auto underline-offset-1 transition-[text-decoration-color] hover:decoration-current;
1441
+ text-transform: uppercase;
1442
+ text-decoration-line: underline;
1443
+ text-decoration-color: currentcolor;
1444
+ @supports (color: color-mix(in lab, red, red)) {
1445
+ text-decoration-color: color-mix(in oklab, currentcolor 25%, transparent);
1446
+ }
1447
+ text-decoration-style: solid;
1448
+ text-decoration-thickness: auto;
1449
+ text-underline-offset: 1px;
1450
+ transition-property: text-decoration-color;
1451
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1452
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1453
+ text-decoration-skip-ink: auto;
1454
+ text-underline-position: from-font;
1455
+ &:hover {
1456
+ @media (hover: hover) {
1457
+ text-decoration-color: currentcolor;
1458
+ }
1459
+ }
333
1460
  }
334
-
335
- *::selection,
336
- code {
1461
+ *::selection, code {
337
1462
  background: var(--selection-bg, var(--midground));
338
- @apply text-background;
1463
+ color: var(--background);
1464
+ }
1465
+ }
1466
+ @property --tw-translate-x {
1467
+ syntax: "*";
1468
+ inherits: false;
1469
+ initial-value: 0;
1470
+ }
1471
+ @property --tw-translate-y {
1472
+ syntax: "*";
1473
+ inherits: false;
1474
+ initial-value: 0;
1475
+ }
1476
+ @property --tw-translate-z {
1477
+ syntax: "*";
1478
+ inherits: false;
1479
+ initial-value: 0;
1480
+ }
1481
+ @property --tw-rotate-x {
1482
+ syntax: "*";
1483
+ inherits: false;
1484
+ }
1485
+ @property --tw-rotate-y {
1486
+ syntax: "*";
1487
+ inherits: false;
1488
+ }
1489
+ @property --tw-rotate-z {
1490
+ syntax: "*";
1491
+ inherits: false;
1492
+ }
1493
+ @property --tw-skew-x {
1494
+ syntax: "*";
1495
+ inherits: false;
1496
+ }
1497
+ @property --tw-skew-y {
1498
+ syntax: "*";
1499
+ inherits: false;
1500
+ }
1501
+ @property --tw-border-style {
1502
+ syntax: "*";
1503
+ inherits: false;
1504
+ initial-value: solid;
1505
+ }
1506
+ @property --tw-leading {
1507
+ syntax: "*";
1508
+ inherits: false;
1509
+ }
1510
+ @property --tw-font-weight {
1511
+ syntax: "*";
1512
+ inherits: false;
1513
+ }
1514
+ @property --tw-tracking {
1515
+ syntax: "*";
1516
+ inherits: false;
1517
+ }
1518
+ @property --tw-ordinal {
1519
+ syntax: "*";
1520
+ inherits: false;
1521
+ }
1522
+ @property --tw-slashed-zero {
1523
+ syntax: "*";
1524
+ inherits: false;
1525
+ }
1526
+ @property --tw-numeric-figure {
1527
+ syntax: "*";
1528
+ inherits: false;
1529
+ }
1530
+ @property --tw-numeric-spacing {
1531
+ syntax: "*";
1532
+ inherits: false;
1533
+ }
1534
+ @property --tw-numeric-fraction {
1535
+ syntax: "*";
1536
+ inherits: false;
1537
+ }
1538
+ @property --tw-shadow {
1539
+ syntax: "*";
1540
+ inherits: false;
1541
+ initial-value: 0 0 #0000;
1542
+ }
1543
+ @property --tw-shadow-color {
1544
+ syntax: "*";
1545
+ inherits: false;
1546
+ }
1547
+ @property --tw-shadow-alpha {
1548
+ syntax: "<percentage>";
1549
+ inherits: false;
1550
+ initial-value: 100%;
1551
+ }
1552
+ @property --tw-inset-shadow {
1553
+ syntax: "*";
1554
+ inherits: false;
1555
+ initial-value: 0 0 #0000;
1556
+ }
1557
+ @property --tw-inset-shadow-color {
1558
+ syntax: "*";
1559
+ inherits: false;
1560
+ }
1561
+ @property --tw-inset-shadow-alpha {
1562
+ syntax: "<percentage>";
1563
+ inherits: false;
1564
+ initial-value: 100%;
1565
+ }
1566
+ @property --tw-ring-color {
1567
+ syntax: "*";
1568
+ inherits: false;
1569
+ }
1570
+ @property --tw-ring-shadow {
1571
+ syntax: "*";
1572
+ inherits: false;
1573
+ initial-value: 0 0 #0000;
1574
+ }
1575
+ @property --tw-inset-ring-color {
1576
+ syntax: "*";
1577
+ inherits: false;
1578
+ }
1579
+ @property --tw-inset-ring-shadow {
1580
+ syntax: "*";
1581
+ inherits: false;
1582
+ initial-value: 0 0 #0000;
1583
+ }
1584
+ @property --tw-ring-inset {
1585
+ syntax: "*";
1586
+ inherits: false;
1587
+ }
1588
+ @property --tw-ring-offset-width {
1589
+ syntax: "<length>";
1590
+ inherits: false;
1591
+ initial-value: 0px;
1592
+ }
1593
+ @property --tw-ring-offset-color {
1594
+ syntax: "*";
1595
+ inherits: false;
1596
+ initial-value: #fff;
1597
+ }
1598
+ @property --tw-ring-offset-shadow {
1599
+ syntax: "*";
1600
+ inherits: false;
1601
+ initial-value: 0 0 #0000;
1602
+ }
1603
+ @property --tw-outline-style {
1604
+ syntax: "*";
1605
+ inherits: false;
1606
+ initial-value: solid;
1607
+ }
1608
+ @property --tw-blur {
1609
+ syntax: "*";
1610
+ inherits: false;
1611
+ }
1612
+ @property --tw-brightness {
1613
+ syntax: "*";
1614
+ inherits: false;
1615
+ }
1616
+ @property --tw-contrast {
1617
+ syntax: "*";
1618
+ inherits: false;
1619
+ }
1620
+ @property --tw-grayscale {
1621
+ syntax: "*";
1622
+ inherits: false;
1623
+ }
1624
+ @property --tw-hue-rotate {
1625
+ syntax: "*";
1626
+ inherits: false;
1627
+ }
1628
+ @property --tw-invert {
1629
+ syntax: "*";
1630
+ inherits: false;
1631
+ }
1632
+ @property --tw-opacity {
1633
+ syntax: "*";
1634
+ inherits: false;
1635
+ }
1636
+ @property --tw-saturate {
1637
+ syntax: "*";
1638
+ inherits: false;
1639
+ }
1640
+ @property --tw-sepia {
1641
+ syntax: "*";
1642
+ inherits: false;
1643
+ }
1644
+ @property --tw-drop-shadow {
1645
+ syntax: "*";
1646
+ inherits: false;
1647
+ }
1648
+ @property --tw-drop-shadow-color {
1649
+ syntax: "*";
1650
+ inherits: false;
1651
+ }
1652
+ @property --tw-drop-shadow-alpha {
1653
+ syntax: "<percentage>";
1654
+ inherits: false;
1655
+ initial-value: 100%;
1656
+ }
1657
+ @property --tw-drop-shadow-size {
1658
+ syntax: "*";
1659
+ inherits: false;
1660
+ }
1661
+ @property --tw-duration {
1662
+ syntax: "*";
1663
+ inherits: false;
1664
+ }
1665
+ @property --tw-backdrop-blur {
1666
+ syntax: "*";
1667
+ inherits: false;
1668
+ }
1669
+ @property --tw-backdrop-brightness {
1670
+ syntax: "*";
1671
+ inherits: false;
1672
+ }
1673
+ @property --tw-backdrop-contrast {
1674
+ syntax: "*";
1675
+ inherits: false;
1676
+ }
1677
+ @property --tw-backdrop-grayscale {
1678
+ syntax: "*";
1679
+ inherits: false;
1680
+ }
1681
+ @property --tw-backdrop-hue-rotate {
1682
+ syntax: "*";
1683
+ inherits: false;
1684
+ }
1685
+ @property --tw-backdrop-invert {
1686
+ syntax: "*";
1687
+ inherits: false;
1688
+ }
1689
+ @property --tw-backdrop-opacity {
1690
+ syntax: "*";
1691
+ inherits: false;
1692
+ }
1693
+ @property --tw-backdrop-saturate {
1694
+ syntax: "*";
1695
+ inherits: false;
1696
+ }
1697
+ @property --tw-backdrop-sepia {
1698
+ syntax: "*";
1699
+ inherits: false;
1700
+ }
1701
+ @layer properties {
1702
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1703
+ :root, :host {
1704
+ --fit-captured-length: 0px;
1705
+ }
1706
+ *, ::before, ::after, ::backdrop {
1707
+ --tw-translate-x: 0;
1708
+ --tw-translate-y: 0;
1709
+ --tw-translate-z: 0;
1710
+ --tw-rotate-x: initial;
1711
+ --tw-rotate-y: initial;
1712
+ --tw-rotate-z: initial;
1713
+ --tw-skew-x: initial;
1714
+ --tw-skew-y: initial;
1715
+ --tw-border-style: solid;
1716
+ --tw-leading: initial;
1717
+ --tw-font-weight: initial;
1718
+ --tw-tracking: initial;
1719
+ --tw-ordinal: initial;
1720
+ --tw-slashed-zero: initial;
1721
+ --tw-numeric-figure: initial;
1722
+ --tw-numeric-spacing: initial;
1723
+ --tw-numeric-fraction: initial;
1724
+ --tw-shadow: 0 0 #0000;
1725
+ --tw-shadow-color: initial;
1726
+ --tw-shadow-alpha: 100%;
1727
+ --tw-inset-shadow: 0 0 #0000;
1728
+ --tw-inset-shadow-color: initial;
1729
+ --tw-inset-shadow-alpha: 100%;
1730
+ --tw-ring-color: initial;
1731
+ --tw-ring-shadow: 0 0 #0000;
1732
+ --tw-inset-ring-color: initial;
1733
+ --tw-inset-ring-shadow: 0 0 #0000;
1734
+ --tw-ring-inset: initial;
1735
+ --tw-ring-offset-width: 0px;
1736
+ --tw-ring-offset-color: #fff;
1737
+ --tw-ring-offset-shadow: 0 0 #0000;
1738
+ --tw-outline-style: solid;
1739
+ --tw-blur: initial;
1740
+ --tw-brightness: initial;
1741
+ --tw-contrast: initial;
1742
+ --tw-grayscale: initial;
1743
+ --tw-hue-rotate: initial;
1744
+ --tw-invert: initial;
1745
+ --tw-opacity: initial;
1746
+ --tw-saturate: initial;
1747
+ --tw-sepia: initial;
1748
+ --tw-drop-shadow: initial;
1749
+ --tw-drop-shadow-color: initial;
1750
+ --tw-drop-shadow-alpha: 100%;
1751
+ --tw-drop-shadow-size: initial;
1752
+ --tw-duration: initial;
1753
+ --tw-backdrop-blur: initial;
1754
+ --tw-backdrop-brightness: initial;
1755
+ --tw-backdrop-contrast: initial;
1756
+ --tw-backdrop-grayscale: initial;
1757
+ --tw-backdrop-hue-rotate: initial;
1758
+ --tw-backdrop-invert: initial;
1759
+ --tw-backdrop-opacity: initial;
1760
+ --tw-backdrop-saturate: initial;
1761
+ --tw-backdrop-sepia: initial;
1762
+ }
339
1763
  }
340
1764
  }