@clarify-labs/renderer 0.2.0 → 0.4.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.
Files changed (38) hide show
  1. package/output/{AppShell-4KB3lU-n.cjs → AppShell-CZw1MrPG.cjs} +977 -408
  2. package/output/AppShell-CZw1MrPG.cjs.map +1 -0
  3. package/output/{AppShell-Ci894P_0.js → AppShell-nQnuKyn2.js} +974 -411
  4. package/output/AppShell-nQnuKyn2.js.map +1 -0
  5. package/output/client.cjs +1 -1
  6. package/output/client.js +1 -1
  7. package/output/components/PageNavigation.d.ts +5 -0
  8. package/output/components/index.d.ts +1 -0
  9. package/output/context.d.ts +2 -0
  10. package/output/i18n.d.ts +5 -0
  11. package/output/index.cjs +1351 -346
  12. package/output/index.cjs.map +1 -1
  13. package/output/index.js +1351 -346
  14. package/output/index.js.map +1 -1
  15. package/output/openapi/example-panels.d.ts +31 -0
  16. package/output/openapi/helpers.d.ts +24 -0
  17. package/output/openapi/index.d.ts +2 -19
  18. package/output/openapi/openapi-page.d.ts +19 -0
  19. package/output/openapi/request-code.d.ts +16 -0
  20. package/output/openapi/schema-properties.d.ts +15 -0
  21. package/output/openapi/spec-path.d.ts +2 -0
  22. package/output/openapi/types.d.ts +66 -0
  23. package/output/{render-bPMMBoDH.js → render-BCiQn6Q1.js} +2 -2
  24. package/output/{render-bPMMBoDH.js.map → render-BCiQn6Q1.js.map} +1 -1
  25. package/output/{render-z9rSQ00n.cjs → render-CZsdzmme.cjs} +2 -2
  26. package/output/{render-z9rSQ00n.cjs.map → render-CZsdzmme.cjs.map} +1 -1
  27. package/output/renderer.css +1374 -603
  28. package/output/server.cjs +1 -1
  29. package/output/server.js +1 -1
  30. package/output/shell/ContentActions.d.ts +1 -0
  31. package/output/shell/Header.d.ts +4 -3
  32. package/output/shell/icons.d.ts +4 -0
  33. package/output/shell/mobile.d.ts +2 -1
  34. package/output/types.d.ts +62 -9
  35. package/output/utils/path.d.ts +2 -0
  36. package/package.json +10 -9
  37. package/output/AppShell-4KB3lU-n.cjs.map +0 -1
  38. package/output/AppShell-Ci894P_0.js.map +0 -1
@@ -13,15 +13,7 @@
13
13
  --tw-space-y-reverse: 0;
14
14
  --tw-divide-y-reverse: 0;
15
15
  --tw-border-style: solid;
16
- --tw-gradient-position: initial;
17
- --tw-gradient-from: #0000;
18
- --tw-gradient-via: #0000;
19
- --tw-gradient-to: #0000;
20
- --tw-gradient-stops: initial;
21
- --tw-gradient-via-stops: initial;
22
- --tw-gradient-from-position: 0%;
23
- --tw-gradient-via-position: 50%;
24
- --tw-gradient-to-position: 100%;
16
+ --tw-leading: initial;
25
17
  --tw-font-weight: initial;
26
18
  --tw-tracking: initial;
27
19
  --tw-shadow: 0 0 #0000;
@@ -97,6 +89,8 @@
97
89
  --color-emerald-400: oklch(76.5% .177 163.223);
98
90
  --color-emerald-500: oklch(69.6% .17 162.48);
99
91
  --color-emerald-600: oklch(59.6% .145 163.225);
92
+ --color-emerald-700: oklch(50.8% .118 165.612);
93
+ --color-emerald-800: oklch(43.2% .095 166.913);
100
94
  --color-emerald-900: oklch(37.8% .077 168.94);
101
95
  --color-emerald-950: oklch(26.2% .051 172.552);
102
96
  --color-sky-50: oklch(97.7% .013 236.62);
@@ -116,6 +110,7 @@
116
110
  --color-rose-50: oklch(96.9% .015 12.422);
117
111
  --color-rose-100: oklch(94.1% .03 12.58);
118
112
  --color-rose-200: oklch(89.2% .058 10.001);
113
+ --color-rose-300: oklch(81% .117 11.638);
119
114
  --color-rose-400: oklch(71.2% .194 13.428);
120
115
  --color-rose-500: oklch(64.5% .246 16.439);
121
116
  --color-rose-600: oklch(58.6% .253 17.585);
@@ -136,12 +131,9 @@
136
131
  --color-white: #fff;
137
132
  --spacing: .25rem;
138
133
  --container-sm: 24rem;
139
- --container-md: 28rem;
140
134
  --container-lg: 33rem;
141
135
  --container-xl: 36rem;
142
136
  --container-2xl: 40rem;
143
- --container-3xl: 50rem;
144
- --container-5xl: 66rem;
145
137
  --container-6xl: 72rem;
146
138
  --text-xs: .8125rem;
147
139
  --text-xs--line-height: 1.5rem;
@@ -156,8 +148,8 @@
156
148
  --font-weight-medium: 500;
157
149
  --font-weight-semibold: 600;
158
150
  --font-weight-bold: 700;
151
+ --font-weight-black: 900;
159
152
  --tracking-tight: -.025em;
160
- --tracking-normal: 0em;
161
153
  --tracking-wide: .025em;
162
154
  --tracking-widest: .1em;
163
155
  --radius-md: .375rem;
@@ -446,8 +438,8 @@
446
438
  }
447
439
 
448
440
  body {
449
- background: var(--color-white);
450
- color: var(--color-zinc-900);
441
+ background: var(--clarify-theme-tokens-colors-background, var(--color-white));
442
+ color: var(--clarify-theme-tokens-colors-foreground, var(--color-zinc-900));
451
443
  }
452
444
 
453
445
  .dark body {
@@ -498,6 +490,404 @@
498
490
  }
499
491
 
500
492
  @layer components {
493
+ :root, .clarify-app {
494
+ --clarify-ui-text-strong: var(--clarify-theme-tokens-colors-foreground);
495
+ --clarify-ui-text: var(--clarify-theme-tokens-colors-foreground);
496
+ }
497
+
498
+ @supports (color: color-mix(in lab, red, red)) {
499
+ :root, .clarify-app {
500
+ --clarify-ui-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 88%, transparent);
501
+ }
502
+ }
503
+
504
+ :root, .clarify-app {
505
+ --clarify-ui-text-soft: var(--clarify-theme-tokens-colors-foreground);
506
+ }
507
+
508
+ @supports (color: color-mix(in lab, red, red)) {
509
+ :root, .clarify-app {
510
+ --clarify-ui-text-soft: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 68%, transparent);
511
+ }
512
+ }
513
+
514
+ :root, .clarify-app {
515
+ --clarify-ui-text-faint: var(--clarify-theme-tokens-colors-foreground);
516
+ }
517
+
518
+ @supports (color: color-mix(in lab, red, red)) {
519
+ :root, .clarify-app {
520
+ --clarify-ui-text-faint: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 54%, transparent);
521
+ }
522
+ }
523
+
524
+ :root, .clarify-app {
525
+ --clarify-ui-hover-background: var(--clarify-theme-tokens-colors-foreground);
526
+ }
527
+
528
+ @supports (color: color-mix(in lab, red, red)) {
529
+ :root, .clarify-app {
530
+ --clarify-ui-hover-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 5%, transparent);
531
+ }
532
+ }
533
+
534
+ :root, .clarify-app {
535
+ --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
536
+ }
537
+
538
+ @supports (color: color-mix(in lab, red, red)) {
539
+ :root, .clarify-app {
540
+ --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
541
+ }
542
+ }
543
+
544
+ :root, .clarify-app {
545
+ --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-foreground);
546
+ }
547
+
548
+ @supports (color: color-mix(in lab, red, red)) {
549
+ :root, .clarify-app {
550
+ --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 4%, transparent);
551
+ }
552
+ }
553
+
554
+ :root, .clarify-app {
555
+ --clarify-ui-overlay-background: var(--clarify-theme-tokens-colors-muted);
556
+ }
557
+
558
+ @supports (color: color-mix(in lab, red, red)) {
559
+ :root, .clarify-app {
560
+ --clarify-ui-overlay-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 25%, transparent);
561
+ }
562
+ }
563
+
564
+ :root, .clarify-app {
565
+ --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-primary);
566
+ --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-primary);
567
+ }
568
+
569
+ @supports (color: color-mix(in lab, red, red)) {
570
+ :root, .clarify-app {
571
+ --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 9%, transparent);
572
+ }
573
+ }
574
+
575
+ :root, .clarify-app {
576
+ --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-primary);
577
+ }
578
+
579
+ @supports (color: color-mix(in lab, red, red)) {
580
+ :root, .clarify-app {
581
+ --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
582
+ }
583
+ }
584
+
585
+ :root, .clarify-app {
586
+ --clarify-ui-accent-glow: var(--clarify-theme-tokens-colors-accent);
587
+ }
588
+
589
+ @supports (color: color-mix(in lab, red, red)) {
590
+ :root, .clarify-app {
591
+ --clarify-ui-accent-glow: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 18%, transparent);
592
+ }
593
+ }
594
+
595
+ :root, .clarify-app {
596
+ --clarify-ui-menu-width: 13rem;
597
+ --clarify-ui-action-menu-width: 19.5rem;
598
+ --clarify-ui-control-font-size: .875rem;
599
+ --clarify-ui-control-line-height: 1.25rem;
600
+ --clarify-ui-menu-font-size: .875rem;
601
+ --clarify-ui-menu-line-height: 1.5rem;
602
+ --clarify-ui-description-font-size: .75rem;
603
+ --clarify-ui-description-line-height: 1.25rem;
604
+ --clarify-ui-navigation-section-font-size: var(--clarify-ui-menu-font-size);
605
+ --clarify-ui-navigation-section-line-height: var(--clarify-ui-menu-line-height);
606
+ --clarify-ui-navigation-section-badge-font-size: var(--clarify-ui-description-font-size);
607
+ --clarify-ui-navigation-section-badge-line-height: var(--clarify-ui-menu-line-height);
608
+ }
609
+
610
+ .dark, .dark .clarify-app {
611
+ --clarify-ui-text-strong: var(--color-white);
612
+ --clarify-ui-text: var(--color-zinc-200);
613
+ --clarify-ui-text-soft: var(--color-zinc-300);
614
+ --clarify-ui-text-faint: var(--color-zinc-400);
615
+ --clarify-ui-hover-background: #ffffff0d;
616
+ --clarify-ui-active-background: var(--clarify-theme-tokens-colors-primary);
617
+ }
618
+
619
+ @supports (color: color-mix(in lab, red, red)) {
620
+ .dark, .dark .clarify-app {
621
+ --clarify-ui-active-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 18%, transparent);
622
+ }
623
+ }
624
+
625
+ .dark, .dark .clarify-app {
626
+ --clarify-ui-subtle-background: var(--clarify-theme-tokens-colors-primary);
627
+ }
628
+
629
+ @supports (color: color-mix(in lab, red, red)) {
630
+ .dark, .dark .clarify-app {
631
+ --clarify-ui-subtle-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
632
+ }
633
+ }
634
+
635
+ .dark, .dark .clarify-app {
636
+ --clarify-ui-overlay-background: #0006;
637
+ --clarify-ui-accent-text: var(--clarify-theme-tokens-colors-accent);
638
+ }
639
+
640
+ @supports (color: color-mix(in lab, red, red)) {
641
+ .dark, .dark .clarify-app {
642
+ --clarify-ui-accent-text: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 72%, white);
643
+ }
644
+ }
645
+
646
+ .dark, .dark .clarify-app {
647
+ --clarify-ui-accent-background: var(--clarify-theme-tokens-colors-primary);
648
+ }
649
+
650
+ @supports (color: color-mix(in lab, red, red)) {
651
+ .dark, .dark .clarify-app {
652
+ --clarify-ui-accent-background: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 16%, transparent);
653
+ }
654
+ }
655
+
656
+ .dark, .dark .clarify-app {
657
+ --clarify-ui-accent-border: var(--clarify-theme-tokens-colors-accent);
658
+ }
659
+
660
+ @supports (color: color-mix(in lab, red, red)) {
661
+ .dark, .dark .clarify-app {
662
+ --clarify-ui-accent-border: color-mix(in srgb, var(--clarify-theme-tokens-colors-accent) 28%, transparent);
663
+ }
664
+ }
665
+
666
+ .dark, .dark .clarify-app {
667
+ --clarify-ui-accent-glow: var(--clarify-theme-tokens-colors-primary);
668
+ }
669
+
670
+ @supports (color: color-mix(in lab, red, red)) {
671
+ .dark, .dark .clarify-app {
672
+ --clarify-ui-accent-glow: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 28%, transparent);
673
+ }
674
+ }
675
+
676
+ .clarify-ui-control {
677
+ color: var(--clarify-ui-text);
678
+ font-size: var(--clarify-ui-control-font-size);
679
+ line-height: var(--clarify-ui-control-line-height);
680
+ font-weight: 500;
681
+ }
682
+
683
+ .clarify-ui-control:hover, .clarify-ui-control[aria-expanded="true"] {
684
+ color: var(--clarify-ui-text-strong);
685
+ background: var(--clarify-ui-hover-background);
686
+ }
687
+
688
+ .clarify-ui-icon-soft {
689
+ color: var(--clarify-ui-text-soft);
690
+ }
691
+
692
+ .clarify-ui-backdrop {
693
+ background: var(--clarify-ui-overlay-background);
694
+ }
695
+
696
+ .clarify-ui-icon-button:hover {
697
+ background: var(--clarify-ui-hover-background);
698
+ }
699
+
700
+ .clarify-ui-menu {
701
+ color: var(--clarify-ui-text);
702
+ font-size: var(--clarify-ui-menu-font-size);
703
+ line-height: var(--clarify-ui-menu-line-height);
704
+ }
705
+
706
+ .clarify-ui-menu-item {
707
+ color: var(--clarify-ui-text);
708
+ font-weight: 500;
709
+ }
710
+
711
+ .clarify-ui-menu-item:hover, .clarify-ui-menu-item[data-focus], .clarify-ui-menu-item-focus {
712
+ color: var(--clarify-ui-text-strong);
713
+ background: var(--clarify-ui-hover-background);
714
+ }
715
+
716
+ .clarify-ui-menu-item-active {
717
+ color: var(--clarify-ui-accent-text);
718
+ background: var(--clarify-ui-active-background);
719
+ }
720
+
721
+ .clarify-ui-menu-title {
722
+ color: var(--clarify-ui-text-strong);
723
+ font-size: var(--clarify-ui-menu-font-size);
724
+ line-height: var(--clarify-ui-menu-line-height);
725
+ font-weight: 600;
726
+ }
727
+
728
+ .clarify-ui-menu-description {
729
+ color: var(--clarify-ui-text-soft);
730
+ font-size: var(--clarify-ui-description-font-size);
731
+ line-height: var(--clarify-ui-description-line-height);
732
+ }
733
+
734
+ .clarify-ui-menu-code {
735
+ color: var(--clarify-ui-text-faint);
736
+ font-size: var(--clarify-ui-description-font-size);
737
+ line-height: var(--clarify-ui-description-line-height);
738
+ }
739
+
740
+ .clarify-ui-menu-icon {
741
+ color: var(--clarify-ui-text-soft);
742
+ }
743
+
744
+ .clarify-ui-top-link, .clarify-ui-tab {
745
+ color: var(--clarify-ui-text);
746
+ font-size: var(--clarify-ui-menu-font-size);
747
+ line-height: var(--clarify-ui-menu-line-height);
748
+ font-weight: 500;
749
+ }
750
+
751
+ .clarify-ui-top-link:hover, .clarify-ui-tab:hover, .clarify-ui-tab-active {
752
+ color: var(--clarify-ui-text-strong);
753
+ }
754
+
755
+ .clarify-brand-title, .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright, .clarify-search-button {
756
+ font-size: var(--clarify-ui-menu-font-size);
757
+ line-height: var(--clarify-ui-menu-line-height);
758
+ }
759
+
760
+ .clarify-brand-title {
761
+ color: var(--clarify-ui-text-strong);
762
+ }
763
+
764
+ .clarify-footer-link, .clarify-footer-social, .clarify-footer-copyright {
765
+ color: var(--clarify-ui-text-soft);
766
+ }
767
+
768
+ .clarify-footer-link:hover, .clarify-footer-social:hover {
769
+ color: var(--clarify-ui-text-strong);
770
+ }
771
+
772
+ .clarify-built-with {
773
+ color: var(--clarify-ui-text-soft);
774
+ font-size: var(--clarify-ui-description-font-size);
775
+ line-height: var(--clarify-ui-description-line-height);
776
+ }
777
+
778
+ .clarify-built-with:hover {
779
+ color: var(--clarify-ui-text-strong);
780
+ background: var(--clarify-ui-hover-background);
781
+ }
782
+
783
+ .clarify-built-with-brand {
784
+ color: var(--clarify-ui-text-strong);
785
+ }
786
+
787
+ .clarify-navigation-group-title {
788
+ color: var(--clarify-ui-text-strong);
789
+ font-size: var(--clarify-ui-menu-font-size);
790
+ line-height: var(--clarify-ui-menu-line-height);
791
+ letter-spacing: -.01em;
792
+ font-weight: 600;
793
+ }
794
+
795
+ .clarify-navigation-group-title-icon {
796
+ color: var(--clarify-theme-tokens-colors-primary);
797
+ }
798
+
799
+ .clarify-navigation-link {
800
+ color: var(--clarify-ui-text);
801
+ font-size: var(--clarify-ui-menu-font-size);
802
+ line-height: var(--clarify-ui-menu-line-height);
803
+ letter-spacing: -.01em;
804
+ font-weight: 500;
805
+ }
806
+
807
+ .clarify-navigation-anchor-link {
808
+ color: var(--clarify-ui-text-soft);
809
+ font-size: var(--clarify-ui-navigation-section-font-size);
810
+ line-height: var(--clarify-ui-navigation-section-line-height);
811
+ font-weight: 500;
812
+ }
813
+
814
+ .clarify-navigation-link:hover, .clarify-navigation-link[aria-current="page"] {
815
+ color: var(--clarify-ui-text-strong);
816
+ }
817
+
818
+ .clarify-navigation-section-badge {
819
+ font-size: var(--clarify-ui-navigation-section-badge-font-size);
820
+ line-height: var(--clarify-ui-navigation-section-badge-line-height);
821
+ }
822
+
823
+ .clarify-navigation-section-highlight {
824
+ background: var(--clarify-ui-subtle-background);
825
+ }
826
+
827
+ .clarify-search-result[aria-selected="true"], .clarify-search-result-active {
828
+ background: var(--clarify-ui-hover-background);
829
+ }
830
+
831
+ .clarify-search-result-title {
832
+ color: var(--clarify-ui-text-strong);
833
+ font-size: var(--clarify-ui-control-font-size);
834
+ line-height: var(--clarify-ui-control-line-height);
835
+ letter-spacing: -.01em;
836
+ font-weight: 600;
837
+ }
838
+
839
+ .clarify-search-result[aria-selected="true"] .clarify-search-result-title {
840
+ color: var(--clarify-ui-accent-text);
841
+ }
842
+
843
+ .clarify-search-result-hierarchy {
844
+ color: var(--clarify-ui-text-soft);
845
+ font-size: var(--clarify-ui-description-font-size);
846
+ line-height: var(--clarify-ui-description-line-height);
847
+ }
848
+
849
+ .clarify-search-result-separator {
850
+ color: var(--clarify-ui-text-faint);
851
+ }
852
+
853
+ .clarify-search-field {
854
+ color: var(--clarify-ui-text-strong);
855
+ font-size: .9375rem;
856
+ line-height: 1.5rem;
857
+ }
858
+
859
+ .clarify-search-field::placeholder {
860
+ color: var(--clarify-ui-text-faint);
861
+ }
862
+
863
+ @media (min-width: 40rem) {
864
+ .clarify-search-field {
865
+ font-size: var(--clarify-ui-control-font-size);
866
+ line-height: var(--clarify-ui-control-line-height);
867
+ }
868
+ }
869
+
870
+ .clarify-search-button {
871
+ color: var(--clarify-ui-text-soft);
872
+ }
873
+
874
+ .clarify-search-button:hover {
875
+ color: var(--clarify-ui-text-strong);
876
+ box-shadow: inset 0 0 0 1px var(--clarify-theme-tokens-colors-foreground);
877
+ }
878
+
879
+ @supports (color: color-mix(in lab, red, red)) {
880
+ .clarify-search-button:hover {
881
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 28%, transparent);
882
+ }
883
+ }
884
+
885
+ .clarify-search-shortcut {
886
+ color: var(--clarify-ui-text-faint);
887
+ font-size: var(--clarify-ui-description-font-size);
888
+ line-height: var(--clarify-ui-description-line-height);
889
+ }
890
+
501
891
  .prose .contains-task-list {
502
892
  padding-left: 0;
503
893
  list-style: none;
@@ -510,17 +900,29 @@
510
900
  }
511
901
 
512
902
  .prose .task-list-item > input[type="checkbox"] {
513
- accent-color: var(--color-emerald-500);
903
+ accent-color: var(--clarify-theme-tokens-colors-primary, var(--color-emerald-500));
514
904
  flex: none;
515
905
  margin-top: .45rem;
516
906
  }
517
907
  }
518
908
 
519
909
  @layer utilities {
910
+ .\@container {
911
+ container-type: inline-size;
912
+ }
913
+
914
+ .pointer-events-auto {
915
+ pointer-events: auto;
916
+ }
917
+
520
918
  .pointer-events-none {
521
919
  pointer-events: none;
522
920
  }
523
921
 
922
+ .collapse {
923
+ visibility: collapse;
924
+ }
925
+
524
926
  .visible {
525
927
  visibility: visible;
526
928
  }
@@ -585,10 +987,6 @@
585
987
  top: calc(var(--spacing) * 16);
586
988
  }
587
989
 
588
- .top-full {
589
- top: 100%;
590
- }
591
-
592
990
  .top-px {
593
991
  top: 1px;
594
992
  }
@@ -621,10 +1019,18 @@
621
1019
  left: calc(var(--spacing) * 3);
622
1020
  }
623
1021
 
1022
+ .left-4 {
1023
+ left: calc(var(--spacing) * 4);
1024
+ }
1025
+
624
1026
  .-z-10 {
625
1027
  z-index: calc(10 * -1);
626
1028
  }
627
1029
 
1030
+ .z-10 {
1031
+ z-index: 10;
1032
+ }
1033
+
628
1034
  .z-20 {
629
1035
  z-index: 20;
630
1036
  }
@@ -675,10 +1081,18 @@
675
1081
  margin: 0;
676
1082
  }
677
1083
 
1084
+ .-mx-2 {
1085
+ margin-inline: calc(var(--spacing) * -2);
1086
+ }
1087
+
678
1088
  .mx-0 {
679
1089
  margin-inline: 0;
680
1090
  }
681
1091
 
1092
+ .mx-0\.5 {
1093
+ margin-inline: calc(var(--spacing) * .5);
1094
+ }
1095
+
682
1096
  .mx-2 {
683
1097
  margin-inline: calc(var(--spacing) * 2);
684
1098
  }
@@ -696,23 +1110,68 @@
696
1110
  }
697
1111
 
698
1112
  .prose {
699
- --tw-prose-body: oklch(37% .013 285.805);
700
- --tw-prose-headings: oklch(21% .006 285.885);
701
- --tw-prose-links: oklch(69.6% .17 162.48);
702
- --tw-prose-links-hover: oklch(59.6% .145 163.225);
703
- --tw-prose-links-underline: oklab(69.6% -.162114 .0511766 / .3);
704
- --tw-prose-bold: oklch(21% .006 285.885);
705
- --tw-prose-counters: oklch(55.2% .016 285.938);
706
- --tw-prose-bullets: oklch(87.1% .006 286.286);
707
- --tw-prose-hr: oklab(21% .00164225 -.00577088 / .05);
708
- --tw-prose-quotes: oklch(21% .006 285.885);
709
- --tw-prose-quote-borders: oklch(92% .004 286.32);
710
- --tw-prose-captions: oklch(55.2% .016 285.938);
711
- --tw-prose-code: oklch(21% .006 285.885);
712
- --tw-prose-code-bg: oklch(96.7% .001 286.375);
713
- --tw-prose-code-ring: oklch(87.1% .006 286.286);
714
- --tw-prose-th-borders: oklch(87.1% .006 286.286);
715
- --tw-prose-td-borders: oklch(92% .004 286.32);
1113
+ --tw-prose-body: var(--clarify-theme-tokens-colors-foreground);
1114
+ }
1115
+
1116
+ @supports (color: color-mix(in lab, red, red)) {
1117
+ .prose {
1118
+ --tw-prose-body: color-mix(in srgb, var(--clarify-theme-tokens-colors-foreground) 60%, var(--clarify-theme-tokens-colors-muted));
1119
+ }
1120
+ }
1121
+
1122
+ .prose {
1123
+ --tw-prose-headings: var(--clarify-theme-tokens-colors-foreground);
1124
+ --tw-prose-links: var(--clarify-theme-tokens-colors-primary);
1125
+ --tw-prose-links-hover: var(--clarify-theme-tokens-colors-accent);
1126
+ --tw-prose-links-underline: var(--clarify-theme-tokens-colors-primary);
1127
+ }
1128
+
1129
+ @supports (color: color-mix(in lab, red, red)) {
1130
+ .prose {
1131
+ --tw-prose-links-underline: color-mix(in srgb, var(--clarify-theme-tokens-colors-primary) 30%, transparent);
1132
+ }
1133
+ }
1134
+
1135
+ .prose {
1136
+ --tw-prose-bold: var(--clarify-theme-tokens-colors-foreground);
1137
+ --tw-prose-counters: var(--clarify-theme-tokens-colors-muted);
1138
+ --tw-prose-bullets: var(--clarify-theme-tokens-colors-muted);
1139
+ }
1140
+
1141
+ @supports (color: color-mix(in lab, red, red)) {
1142
+ .prose {
1143
+ --tw-prose-bullets: color-mix(in srgb, var(--clarify-theme-tokens-colors-muted) 35%, transparent);
1144
+ }
1145
+ }
1146
+
1147
+ .prose {
1148
+ --tw-prose-hr: var(--clarify-theme-tokens-colors-border);
1149
+ }
1150
+
1151
+ @supports (color: color-mix(in lab, red, red)) {
1152
+ .prose {
1153
+ --tw-prose-hr: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 65%, transparent);
1154
+ }
1155
+ }
1156
+
1157
+ .prose {
1158
+ --tw-prose-quotes: var(--clarify-theme-tokens-colors-foreground);
1159
+ --tw-prose-quote-borders: var(--clarify-theme-tokens-colors-border);
1160
+ --tw-prose-captions: var(--clarify-theme-tokens-colors-muted);
1161
+ --tw-prose-code: var(--clarify-theme-tokens-colors-foreground);
1162
+ --tw-prose-code-bg: var(--clarify-theme-tokens-colors-code-background);
1163
+ --tw-prose-code-ring: var(--clarify-theme-tokens-colors-border);
1164
+ --tw-prose-th-borders: var(--clarify-theme-tokens-colors-border);
1165
+ --tw-prose-td-borders: var(--clarify-theme-tokens-colors-border);
1166
+ }
1167
+
1168
+ @supports (color: color-mix(in lab, red, red)) {
1169
+ .prose {
1170
+ --tw-prose-td-borders: color-mix(in srgb, var(--clarify-theme-tokens-colors-border) 80%, transparent);
1171
+ }
1172
+ }
1173
+
1174
+ .prose {
716
1175
  --tw-prose-invert-body: oklch(70.5% .015 286.067);
717
1176
  --tw-prose-invert-headings: #fff;
718
1177
  --tw-prose-invert-links: oklch(76.5% .177 163.223);
@@ -731,7 +1190,7 @@
731
1190
  --tw-prose-invert-th-borders: oklch(44.2% .017 285.786);
732
1191
  --tw-prose-invert-td-borders: oklch(37% .013 285.805);
733
1192
  color: var(--tw-prose-body);
734
- font-size: .875rem;
1193
+ font-size: 1rem;
735
1194
  line-height: 1.75rem;
736
1195
  }
737
1196
 
@@ -741,7 +1200,7 @@
741
1200
  }
742
1201
 
743
1202
  .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
744
- font-size: 1rem;
1203
+ font-size: 1.125rem;
745
1204
  line-height: 1.75rem;
746
1205
  }
747
1206
 
@@ -903,9 +1362,9 @@
903
1362
 
904
1363
  .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
905
1364
  color: var(--tw-prose-code);
1365
+ border-radius: var(--clarify-theme-tokens-radius-lg);
906
1366
  box-shadow: inset 0 0 0 1px var(--tw-prose-code-ring);
907
1367
  background-color: var(--tw-prose-code-bg);
908
- border-radius: .5rem;
909
1368
  padding: .25rem .375rem;
910
1369
  font-size: .75rem;
911
1370
  }
@@ -926,6 +1385,10 @@
926
1385
  margin-bottom: 0 !important;
927
1386
  }
928
1387
 
1388
+ .mt-0 {
1389
+ margin-top: 0;
1390
+ }
1391
+
929
1392
  .mt-0\.5 {
930
1393
  margin-top: calc(var(--spacing) * .5);
931
1394
  }
@@ -942,6 +1405,10 @@
942
1405
  margin-top: calc(var(--spacing) * 3);
943
1406
  }
944
1407
 
1408
+ .mt-4 {
1409
+ margin-top: calc(var(--spacing) * 4);
1410
+ }
1411
+
945
1412
  .mt-6 {
946
1413
  margin-top: calc(var(--spacing) * 6);
947
1414
  }
@@ -954,6 +1421,10 @@
954
1421
  margin-right: calc(var(--spacing) * -1);
955
1422
  }
956
1423
 
1424
+ .mr-2 {
1425
+ margin-right: calc(var(--spacing) * 2);
1426
+ }
1427
+
957
1428
  .mr-auto {
958
1429
  margin-right: auto;
959
1430
  }
@@ -970,6 +1441,10 @@
970
1441
  margin-bottom: calc(var(--spacing) * 3);
971
1442
  }
972
1443
 
1444
+ .mb-6 {
1445
+ margin-bottom: calc(var(--spacing) * 6);
1446
+ }
1447
+
973
1448
  .mb-10 {
974
1449
  margin-bottom: calc(var(--spacing) * 10);
975
1450
  }
@@ -994,6 +1469,10 @@
994
1469
  margin-left: calc(var(--spacing) * -152);
995
1470
  }
996
1471
 
1472
+ .ml-2 {
1473
+ margin-left: calc(var(--spacing) * 2);
1474
+ }
1475
+
997
1476
  .ml-auto {
998
1477
  margin-left: auto;
999
1478
  }
@@ -1041,6 +1520,11 @@
1041
1520
  height: calc(var(--spacing) * 6);
1042
1521
  }
1043
1522
 
1523
+ .size-8 {
1524
+ width: calc(var(--spacing) * 8);
1525
+ height: calc(var(--spacing) * 8);
1526
+ }
1527
+
1044
1528
  .size-9 {
1045
1529
  width: calc(var(--spacing) * 9);
1046
1530
  height: calc(var(--spacing) * 9);
@@ -1087,6 +1571,10 @@
1087
1571
  height: calc(var(--spacing) * 9);
1088
1572
  }
1089
1573
 
1574
+ .h-10 {
1575
+ height: calc(var(--spacing) * 10);
1576
+ }
1577
+
1090
1578
  .h-12 {
1091
1579
  height: calc(var(--spacing) * 12);
1092
1580
  }
@@ -1107,14 +1595,14 @@
1107
1595
  height: 100%;
1108
1596
  }
1109
1597
 
1110
- .h-px {
1111
- height: 1px;
1112
- }
1113
-
1114
1598
  .max-h-64 {
1115
1599
  max-height: calc(var(--spacing) * 64);
1116
1600
  }
1117
1601
 
1602
+ .min-h-11 {
1603
+ min-height: calc(var(--spacing) * 11);
1604
+ }
1605
+
1118
1606
  .min-h-\[calc\(--spacing\(12\)\+1px\)\] {
1119
1607
  min-height: calc(calc(var(--spacing) * 12) + 1px);
1120
1608
  }
@@ -1123,8 +1611,12 @@
1123
1611
  min-height: 100vh;
1124
1612
  }
1125
1613
 
1126
- .w-\(--button-width\) {
1127
- width: var(--button-width);
1614
+ .w-\(--clarify-ui-action-menu-width\) {
1615
+ width: var(--clarify-ui-action-menu-width);
1616
+ }
1617
+
1618
+ .w-\(--clarify-ui-menu-width\) {
1619
+ width: var(--clarify-ui-menu-width);
1128
1620
  }
1129
1621
 
1130
1622
  .w-\(--width\) {
@@ -1163,12 +1655,12 @@
1163
1655
  width: calc(var(--spacing) * 8);
1164
1656
  }
1165
1657
 
1166
- .w-44 {
1167
- width: calc(var(--spacing) * 44);
1658
+ .w-24 {
1659
+ width: calc(var(--spacing) * 24);
1168
1660
  }
1169
1661
 
1170
- .w-52 {
1171
- width: calc(var(--spacing) * 52);
1662
+ .w-80 {
1663
+ width: calc(var(--spacing) * 80);
1172
1664
  }
1173
1665
 
1174
1666
  .w-278\.25 {
@@ -1179,40 +1671,68 @@
1179
1671
  width: calc(var(--spacing) * 325);
1180
1672
  }
1181
1673
 
1674
+ .w-\[calc\(100\%\+1rem\)\] {
1675
+ width: calc(100% + 1rem);
1676
+ }
1677
+
1182
1678
  .w-full {
1183
1679
  width: 100%;
1184
1680
  }
1185
1681
 
1682
+ .w-max {
1683
+ width: max-content;
1684
+ }
1685
+
1186
1686
  .w-px {
1187
1687
  width: 1px;
1188
1688
  }
1189
1689
 
1190
- .max-w-2xl {
1191
- max-width: var(--container-2xl);
1690
+ .max-w-\(--clarify-theme-layout-max-width\) {
1691
+ max-width: var(--clarify-theme-layout-max-width);
1192
1692
  }
1193
1693
 
1194
- .max-w-3xl {
1195
- max-width: var(--container-3xl);
1694
+ .max-w-2xl {
1695
+ max-width: var(--container-2xl);
1196
1696
  }
1197
1697
 
1198
1698
  .max-w-6xl {
1199
1699
  max-width: var(--container-6xl);
1200
1700
  }
1201
1701
 
1702
+ .max-w-32 {
1703
+ max-width: calc(var(--spacing) * 32);
1704
+ }
1705
+
1706
+ .max-w-48 {
1707
+ max-width: calc(var(--spacing) * 48);
1708
+ }
1709
+
1710
+ .max-w-\[36vw\] {
1711
+ max-width: 36vw;
1712
+ }
1713
+
1714
+ .max-w-\[min\(32rem\,calc\(100vw-2rem\)\)\] {
1715
+ max-width: min(32rem, 100vw - 2rem);
1716
+ }
1717
+
1202
1718
  .max-w-none {
1203
1719
  max-width: none;
1204
1720
  }
1205
1721
 
1722
+ .min-w-\(--button-width\) {
1723
+ min-width: var(--button-width);
1724
+ }
1725
+
1206
1726
  .min-w-0 {
1207
1727
  min-width: 0;
1208
1728
  }
1209
1729
 
1210
- .min-w-32 {
1211
- min-width: calc(var(--spacing) * 32);
1730
+ .min-w-16 {
1731
+ min-width: calc(var(--spacing) * 16);
1212
1732
  }
1213
1733
 
1214
- .min-w-40 {
1215
- min-width: calc(var(--spacing) * 40);
1734
+ .min-w-28 {
1735
+ min-width: calc(var(--spacing) * 28);
1216
1736
  }
1217
1737
 
1218
1738
  .flex-1 {
@@ -1235,6 +1755,11 @@
1235
1755
  transform-origin: 100% 0;
1236
1756
  }
1237
1757
 
1758
+ .-translate-x-1\/2 {
1759
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
1760
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1761
+ }
1762
+
1238
1763
  .-translate-y-1\.5 {
1239
1764
  --tw-translate-y: calc(var(--spacing) * -1.5);
1240
1765
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1266,6 +1791,10 @@
1266
1791
  cursor: default;
1267
1792
  }
1268
1793
 
1794
+ .cursor-pointer {
1795
+ cursor: pointer;
1796
+ }
1797
+
1269
1798
  .resize {
1270
1799
  resize: both;
1271
1800
  }
@@ -1282,10 +1811,6 @@
1282
1811
  scroll-margin-top: calc(var(--spacing) * 32);
1283
1812
  }
1284
1813
 
1285
- .scrollbar-none {
1286
- scrollbar-width: none;
1287
- }
1288
-
1289
1814
  .list-none {
1290
1815
  list-style-type: none;
1291
1816
  }
@@ -1322,6 +1847,10 @@
1322
1847
  align-items: flex-start;
1323
1848
  }
1324
1849
 
1850
+ .items-stretch {
1851
+ align-items: stretch;
1852
+ }
1853
+
1325
1854
  .justify-between {
1326
1855
  justify-content: space-between;
1327
1856
  }
@@ -1374,20 +1903,14 @@
1374
1903
  gap: calc(var(--spacing) * 8);
1375
1904
  }
1376
1905
 
1377
- .gap-12 {
1378
- gap: calc(var(--spacing) * 12);
1379
- }
1380
-
1381
1906
  :where(.space-y-6 > :not(:last-child)) {
1382
1907
  --tw-space-y-reverse: 0;
1383
1908
  margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
1384
1909
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
1385
1910
  }
1386
1911
 
1387
- :where(.space-y-16 > :not(:last-child)) {
1388
- --tw-space-y-reverse: 0;
1389
- margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
1390
- margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
1912
+ .gap-x-2 {
1913
+ column-gap: calc(var(--spacing) * 2);
1391
1914
  }
1392
1915
 
1393
1916
  .gap-x-3 {
@@ -1398,8 +1921,12 @@
1398
1921
  column-gap: calc(var(--spacing) * 4);
1399
1922
  }
1400
1923
 
1401
- .gap-x-16 {
1402
- column-gap: calc(var(--spacing) * 16);
1924
+ .gap-x-8 {
1925
+ column-gap: calc(var(--spacing) * 8);
1926
+ }
1927
+
1928
+ .gap-y-0\.5 {
1929
+ row-gap: calc(var(--spacing) * .5);
1403
1930
  }
1404
1931
 
1405
1932
  .gap-y-2 {
@@ -1418,6 +1945,16 @@
1418
1945
  border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1419
1946
  }
1420
1947
 
1948
+ :where(.divide-zinc-200\/70 > :not(:last-child)) {
1949
+ border-color: #e4e4e7b3;
1950
+ }
1951
+
1952
+ @supports (color: color-mix(in lab, red, red)) {
1953
+ :where(.divide-zinc-200\/70 > :not(:last-child)) {
1954
+ border-color: color-mix(in oklab, var(--color-zinc-200) 70%, transparent);
1955
+ }
1956
+ }
1957
+
1421
1958
  :where(.divide-zinc-900\/5 > :not(:last-child)) {
1422
1959
  border-color: #18181b0d;
1423
1960
  }
@@ -1454,14 +1991,38 @@
1454
1991
  overflow-y: auto;
1455
1992
  }
1456
1993
 
1457
- .scroll-smooth {
1458
- scroll-behavior: smooth;
1994
+ .rounded {
1995
+ border-radius: .25rem;
1996
+ }
1997
+
1998
+ .rounded-\(--clarify-theme-tokens-radius-lg\) {
1999
+ border-radius: var(--clarify-theme-tokens-radius-lg);
2000
+ }
2001
+
2002
+ .rounded-\(--clarify-theme-tokens-radius-md\) {
2003
+ border-radius: var(--clarify-theme-tokens-radius-md);
2004
+ }
2005
+
2006
+ .rounded-\(--clarify-theme-tokens-radius-sm\) {
2007
+ border-radius: var(--clarify-theme-tokens-radius-sm);
2008
+ }
2009
+
2010
+ .rounded-\(--clarify-theme-tokens-radius-xl\) {
2011
+ border-radius: var(--clarify-theme-tokens-radius-xl);
1459
2012
  }
1460
2013
 
1461
2014
  .rounded-2xl {
1462
2015
  border-radius: var(--radius-2xl);
1463
2016
  }
1464
2017
 
2018
+ .rounded-\[var\(--clarify-theme-tokens-radius-lg\)\] {
2019
+ border-radius: var(--clarify-theme-tokens-radius-lg);
2020
+ }
2021
+
2022
+ .rounded-\[var\(--clarify-theme-tokens-radius-xl\)\] {
2023
+ border-radius: var(--clarify-theme-tokens-radius-xl);
2024
+ }
2025
+
1465
2026
  .rounded-full {
1466
2027
  border-radius: 3.40282e38px;
1467
2028
  }
@@ -1483,6 +2044,11 @@
1483
2044
  border-width: 1px;
1484
2045
  }
1485
2046
 
2047
+ .border-0 {
2048
+ border-style: var(--tw-border-style);
2049
+ border-width: 0;
2050
+ }
2051
+
1486
2052
  .border-y {
1487
2053
  border-block-style: var(--tw-border-style);
1488
2054
  border-block-width: 1px;
@@ -1503,6 +2069,22 @@
1503
2069
  border-left-width: 1px;
1504
2070
  }
1505
2071
 
2072
+ .border-\(--clarify-theme-tokens-colors-border\) {
2073
+ border-color: var(--clarify-theme-tokens-colors-border);
2074
+ }
2075
+
2076
+ .border-\(--clarify-ui-accent-border\) {
2077
+ border-color: var(--clarify-ui-accent-border);
2078
+ }
2079
+
2080
+ .border-\[color\:var\(--clarify-theme-tokens-colors-border\)\] {
2081
+ border-color: var(--clarify-theme-tokens-colors-border);
2082
+ }
2083
+
2084
+ .border-\[var\(--clarify-theme-tokens-colors-primary\)\] {
2085
+ border-color: var(--clarify-theme-tokens-colors-primary);
2086
+ }
2087
+
1506
2088
  .border-amber-200 {
1507
2089
  border-color: var(--color-amber-200);
1508
2090
  }
@@ -1517,10 +2099,6 @@
1517
2099
  }
1518
2100
  }
1519
2101
 
1520
- .border-emerald-500 {
1521
- border-color: var(--color-emerald-500);
1522
- }
1523
-
1524
2102
  .border-emerald-500\/20 {
1525
2103
  border-color: #00bb7f33;
1526
2104
  }
@@ -1559,16 +2137,6 @@
1559
2137
  border-color: #0000;
1560
2138
  }
1561
2139
 
1562
- .border-white\/10 {
1563
- border-color: #ffffff1a;
1564
- }
1565
-
1566
- @supports (color: color-mix(in lab, red, red)) {
1567
- .border-white\/10 {
1568
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1569
- }
1570
- }
1571
-
1572
2140
  .border-zinc-200 {
1573
2141
  border-color: var(--color-zinc-200);
1574
2142
  }
@@ -1611,6 +2179,60 @@
1611
2179
  }
1612
2180
  }
1613
2181
 
2182
+ .bg-\(--clarify-theme-tokens-colors-background\), .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
2183
+ background-color: var(--clarify-theme-tokens-colors-background);
2184
+ }
2185
+
2186
+ @supports (color: color-mix(in lab, red, red)) {
2187
+ .bg-\(--clarify-theme-tokens-colors-background\)\/\(--bg-opacity-light\) {
2188
+ background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-background) var(--bg-opacity-light), transparent);
2189
+ }
2190
+ }
2191
+
2192
+ .bg-\(--clarify-theme-tokens-colors-border\) {
2193
+ background-color: var(--clarify-theme-tokens-colors-border);
2194
+ }
2195
+
2196
+ .bg-\(--clarify-theme-tokens-colors-code-background\) {
2197
+ background-color: var(--clarify-theme-tokens-colors-code-background);
2198
+ }
2199
+
2200
+ .bg-\(--clarify-theme-tokens-colors-foreground\) {
2201
+ background-color: var(--clarify-theme-tokens-colors-foreground);
2202
+ }
2203
+
2204
+ .bg-\(--clarify-theme-tokens-colors-primary\) {
2205
+ background-color: var(--clarify-theme-tokens-colors-primary);
2206
+ }
2207
+
2208
+ .bg-\(--clarify-theme-tokens-colors-surface\), .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
2209
+ background-color: var(--clarify-theme-tokens-colors-surface);
2210
+ }
2211
+
2212
+ @supports (color: color-mix(in lab, red, red)) {
2213
+ .bg-\(--clarify-theme-tokens-colors-surface\)\/90 {
2214
+ background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-surface) 90%, transparent);
2215
+ }
2216
+ }
2217
+
2218
+ .bg-\(--clarify-ui-accent-background\) {
2219
+ background-color: var(--clarify-ui-accent-background);
2220
+ }
2221
+
2222
+ .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
2223
+ background-color: var(--clarify-theme-tokens-colors-primary);
2224
+ }
2225
+
2226
+ @supports (color: color-mix(in lab, red, red)) {
2227
+ .bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_12\%\,transparent\)\] {
2228
+ background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-primary) 12%,transparent);
2229
+ }
2230
+ }
2231
+
2232
+ .bg-\[var\(--clarify-theme-tokens-colors-surface\)\] {
2233
+ background-color: var(--clarify-theme-tokens-colors-surface);
2234
+ }
2235
+
1614
2236
  .bg-amber-50 {
1615
2237
  background-color: var(--color-amber-50);
1616
2238
  }
@@ -1635,8 +2257,24 @@
1635
2257
  }
1636
2258
  }
1637
2259
 
1638
- .bg-emerald-50 {
1639
- background-color: var(--color-emerald-50);
2260
+ .bg-amber-400\/15 {
2261
+ background-color: #fcbb0026;
2262
+ }
2263
+
2264
+ @supports (color: color-mix(in lab, red, red)) {
2265
+ .bg-amber-400\/15 {
2266
+ background-color: color-mix(in oklab, var(--color-amber-400) 15%, transparent);
2267
+ }
2268
+ }
2269
+
2270
+ .bg-black\/30 {
2271
+ background-color: #0000004d;
2272
+ }
2273
+
2274
+ @supports (color: color-mix(in lab, red, red)) {
2275
+ .bg-black\/30 {
2276
+ background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
2277
+ }
1640
2278
  }
1641
2279
 
1642
2280
  .bg-emerald-50\/50 {
@@ -1649,6 +2287,10 @@
1649
2287
  }
1650
2288
  }
1651
2289
 
2290
+ .bg-emerald-100 {
2291
+ background-color: var(--color-emerald-100);
2292
+ }
2293
+
1652
2294
  .bg-emerald-400\/10 {
1653
2295
  background-color: #00d2941a;
1654
2296
  }
@@ -1659,8 +2301,14 @@
1659
2301
  }
1660
2302
  }
1661
2303
 
1662
- .bg-emerald-500 {
1663
- background-color: var(--color-emerald-500);
2304
+ .bg-emerald-400\/15 {
2305
+ background-color: #00d29426;
2306
+ }
2307
+
2308
+ @supports (color: color-mix(in lab, red, red)) {
2309
+ .bg-emerald-400\/15 {
2310
+ background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
2311
+ }
1664
2312
  }
1665
2313
 
1666
2314
  .bg-red-50 {
@@ -1681,6 +2329,16 @@
1681
2329
  }
1682
2330
  }
1683
2331
 
2332
+ .bg-rose-400\/15 {
2333
+ background-color: #ff667f26;
2334
+ }
2335
+
2336
+ @supports (color: color-mix(in lab, red, red)) {
2337
+ .bg-rose-400\/15 {
2338
+ background-color: color-mix(in oklab, var(--color-rose-400) 15%, transparent);
2339
+ }
2340
+ }
2341
+
1684
2342
  .bg-sky-50\/50 {
1685
2343
  background-color: #f0f9ff80;
1686
2344
  }
@@ -1701,51 +2359,31 @@
1701
2359
  }
1702
2360
  }
1703
2361
 
1704
- .bg-transparent {
1705
- background-color: #0000;
1706
- }
1707
-
1708
- .bg-white {
1709
- background-color: var(--color-white);
1710
- }
1711
-
1712
- .bg-white\/\(--bg-opacity-light\) {
1713
- background-color: #fff;
1714
- }
1715
-
1716
- @supports (color: color-mix(in lab, red, red)) {
1717
- .bg-white\/\(--bg-opacity-light\) {
1718
- background-color: color-mix(in oklab, var(--color-white) var(--bg-opacity-light), transparent);
1719
- }
1720
- }
1721
-
1722
- .bg-white\/5 {
1723
- background-color: #ffffff0d;
2362
+ .bg-sky-400\/15 {
2363
+ background-color: #00bcfe26;
1724
2364
  }
1725
2365
 
1726
2366
  @supports (color: color-mix(in lab, red, red)) {
1727
- .bg-white\/5 {
1728
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
2367
+ .bg-sky-400\/15 {
2368
+ background-color: color-mix(in oklab, var(--color-sky-400) 15%, transparent);
1729
2369
  }
1730
2370
  }
1731
2371
 
1732
- .bg-white\/10 {
1733
- background-color: #ffffff1a;
2372
+ .bg-transparent {
2373
+ background-color: #0000;
1734
2374
  }
1735
2375
 
1736
- @supports (color: color-mix(in lab, red, red)) {
1737
- .bg-white\/10 {
1738
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1739
- }
2376
+ .bg-white {
2377
+ background-color: var(--color-white);
1740
2378
  }
1741
2379
 
1742
- .bg-white\/85 {
1743
- background-color: #ffffffd9;
2380
+ .bg-white\/5 {
2381
+ background-color: #ffffff0d;
1744
2382
  }
1745
2383
 
1746
2384
  @supports (color: color-mix(in lab, red, red)) {
1747
- .bg-white\/85 {
1748
- background-color: color-mix(in oklab, var(--color-white) 85%, transparent);
2385
+ .bg-white\/5 {
2386
+ background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
1749
2387
  }
1750
2388
  }
1751
2389
 
@@ -1753,64 +2391,54 @@
1753
2391
  background-color: var(--color-zinc-50);
1754
2392
  }
1755
2393
 
1756
- .bg-zinc-100 {
1757
- background-color: var(--color-zinc-100);
1758
- }
1759
-
1760
- .bg-zinc-300 {
1761
- background-color: var(--color-zinc-300);
1762
- }
1763
-
1764
- .bg-zinc-400\/20 {
1765
- background-color: #9f9fa933;
2394
+ .bg-zinc-100\/50 {
2395
+ background-color: #f4f4f580;
1766
2396
  }
1767
2397
 
1768
2398
  @supports (color: color-mix(in lab, red, red)) {
1769
- .bg-zinc-400\/20 {
1770
- background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
2399
+ .bg-zinc-100\/50 {
2400
+ background-color: color-mix(in oklab, var(--color-zinc-100) 50%, transparent);
1771
2401
  }
1772
2402
  }
1773
2403
 
1774
- .bg-zinc-400\/25 {
1775
- background-color: #9f9fa940;
2404
+ .bg-zinc-100\/70 {
2405
+ background-color: #f4f4f5b3;
1776
2406
  }
1777
2407
 
1778
2408
  @supports (color: color-mix(in lab, red, red)) {
1779
- .bg-zinc-400\/25 {
1780
- background-color: color-mix(in oklab, var(--color-zinc-400) 25%, transparent);
2409
+ .bg-zinc-100\/70 {
2410
+ background-color: color-mix(in oklab, var(--color-zinc-100) 70%, transparent);
1781
2411
  }
1782
2412
  }
1783
2413
 
1784
- .bg-zinc-500 {
1785
- background-color: var(--color-zinc-500);
2414
+ .bg-zinc-200 {
2415
+ background-color: var(--color-zinc-200);
1786
2416
  }
1787
2417
 
1788
- .bg-zinc-800 {
1789
- background-color: var(--color-zinc-800);
2418
+ .bg-zinc-300 {
2419
+ background-color: var(--color-zinc-300);
1790
2420
  }
1791
2421
 
1792
- .bg-zinc-800\/2\.5 {
1793
- background-color: #27272a06;
2422
+ .bg-zinc-400\/15 {
2423
+ background-color: #9f9fa926;
1794
2424
  }
1795
2425
 
1796
2426
  @supports (color: color-mix(in lab, red, red)) {
1797
- .bg-zinc-800\/2\.5 {
1798
- background-color: color-mix(in oklab, var(--color-zinc-800) 2.5%, transparent);
2427
+ .bg-zinc-400\/15 {
2428
+ background-color: color-mix(in oklab, var(--color-zinc-400) 15%, transparent);
1799
2429
  }
1800
2430
  }
1801
2431
 
1802
- .bg-zinc-900 {
1803
- background-color: var(--color-zinc-900);
2432
+ .bg-zinc-500 {
2433
+ background-color: var(--color-zinc-500);
1804
2434
  }
1805
2435
 
1806
- .bg-zinc-900\/7\.5 {
1807
- background-color: #18181b13;
2436
+ .bg-zinc-800 {
2437
+ background-color: var(--color-zinc-800);
1808
2438
  }
1809
2439
 
1810
- @supports (color: color-mix(in lab, red, red)) {
1811
- .bg-zinc-900\/7\.5 {
1812
- background-color: color-mix(in oklab, var(--color-zinc-900) 7.5%, transparent);
1813
- }
2440
+ .bg-zinc-900 {
2441
+ background-color: var(--color-zinc-900);
1814
2442
  }
1815
2443
 
1816
2444
  .bg-zinc-900\/10 {
@@ -1823,33 +2451,35 @@
1823
2451
  }
1824
2452
  }
1825
2453
 
1826
- .bg-linear-to-r {
1827
- --tw-gradient-position: to right;
2454
+ .bg-zinc-950\/\[0\.025\] {
2455
+ background-color: #09090b06;
1828
2456
  }
1829
2457
 
1830
- @supports (background-image: linear-gradient(in lab, red, red)) {
1831
- .bg-linear-to-r {
1832
- --tw-gradient-position: to right in oklab;
2458
+ @supports (color: color-mix(in lab, red, red)) {
2459
+ .bg-zinc-950\/\[0\.025\] {
2460
+ background-color: color-mix(in oklab, var(--color-zinc-950) 2.5%, transparent);
1833
2461
  }
1834
2462
  }
1835
2463
 
1836
- .bg-linear-to-r {
1837
- background-image: linear-gradient(var(--tw-gradient-stops));
2464
+ .bg-\[linear-gradient\(to_right\,var\(--clarify-theme-tokens-colors-primary\)\,var\(--clarify-theme-tokens-colors-accent\)\)\] {
2465
+ background-image: linear-gradient(to right,var(--clarify-theme-tokens-colors-primary),var(--clarify-theme-tokens-colors-accent));
2466
+ }
2467
+
2468
+ .mask-\[radial-gradient\(farthest-side_at_top\,white\,transparent\)\] {
2469
+ -webkit-mask-image: radial-gradient(farthest-side at top, #fff, #0000);
2470
+ mask-image: radial-gradient(farthest-side at top, #fff, #0000);
1838
2471
  }
1839
2472
 
1840
- .from-\[\#36b49f\] {
1841
- --tw-gradient-from: #36b49f;
1842
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2473
+ .fill-\(--clarify-theme-tokens-colors-foreground\) {
2474
+ fill: var(--clarify-theme-tokens-colors-foreground);
1843
2475
  }
1844
2476
 
1845
- .to-\[\#DBFF75\] {
1846
- --tw-gradient-to: #dbff75;
1847
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2477
+ .fill-\(--clarify-theme-tokens-colors-primary\) {
2478
+ fill: var(--clarify-theme-tokens-colors-primary);
1848
2479
  }
1849
2480
 
1850
- .mask-\[radial-gradient\(farthest-side_at_top\,white\,transparent\)\] {
1851
- -webkit-mask-image: radial-gradient(farthest-side at top, #fff, #0000);
1852
- mask-image: radial-gradient(farthest-side at top, #fff, #0000);
2481
+ .fill-\(--clarify-ui-accent-text\) {
2482
+ fill: var(--clarify-ui-accent-text);
1853
2483
  }
1854
2484
 
1855
2485
  .fill-black\/40 {
@@ -1862,14 +2492,6 @@
1862
2492
  }
1863
2493
  }
1864
2494
 
1865
- .fill-emerald-400 {
1866
- fill: var(--color-emerald-400);
1867
- }
1868
-
1869
- .fill-emerald-500 {
1870
- fill: var(--color-emerald-500);
1871
- }
1872
-
1873
2495
  .fill-white {
1874
2496
  fill: var(--color-white);
1875
2497
  }
@@ -1884,8 +2506,16 @@
1884
2506
  }
1885
2507
  }
1886
2508
 
1887
- .fill-zinc-900 {
1888
- fill: var(--color-zinc-900);
2509
+ .stroke-\(--clarify-theme-tokens-colors-foreground\) {
2510
+ stroke: var(--clarify-theme-tokens-colors-foreground);
2511
+ }
2512
+
2513
+ .stroke-\(--clarify-theme-tokens-colors-muted\) {
2514
+ stroke: var(--clarify-theme-tokens-colors-muted);
2515
+ }
2516
+
2517
+ .stroke-\(--clarify-theme-tokens-colors-surface\) {
2518
+ stroke: var(--clarify-theme-tokens-colors-surface);
1889
2519
  }
1890
2520
 
1891
2521
  .stroke-black\/50 {
@@ -1910,10 +2540,6 @@
1910
2540
  stroke: var(--color-zinc-500);
1911
2541
  }
1912
2542
 
1913
- .stroke-zinc-900 {
1914
- stroke: var(--color-zinc-900);
1915
- }
1916
-
1917
2543
  .p-0 {
1918
2544
  padding: 0;
1919
2545
  }
@@ -1922,6 +2548,14 @@
1922
2548
  padding: var(--spacing);
1923
2549
  }
1924
2550
 
2551
+ .p-1\.5 {
2552
+ padding: calc(var(--spacing) * 1.5);
2553
+ }
2554
+
2555
+ .p-3 {
2556
+ padding: calc(var(--spacing) * 3);
2557
+ }
2558
+
1925
2559
  .p-4 {
1926
2560
  padding: calc(var(--spacing) * 4);
1927
2561
  }
@@ -1938,6 +2572,10 @@
1938
2572
  padding-inline: 0;
1939
2573
  }
1940
2574
 
2575
+ .px-1 {
2576
+ padding-inline: var(--spacing);
2577
+ }
2578
+
1941
2579
  .px-1\.5 {
1942
2580
  padding-inline: calc(var(--spacing) * 1.5);
1943
2581
  }
@@ -1958,10 +2596,18 @@
1958
2596
  padding-inline: calc(var(--spacing) * 4);
1959
2597
  }
1960
2598
 
2599
+ .px-5 {
2600
+ padding-inline: calc(var(--spacing) * 5);
2601
+ }
2602
+
1961
2603
  .px-6 {
1962
2604
  padding-inline: calc(var(--spacing) * 6);
1963
2605
  }
1964
2606
 
2607
+ .py-0 {
2608
+ padding-block: 0;
2609
+ }
2610
+
1965
2611
  .py-0\.5 {
1966
2612
  padding-block: calc(var(--spacing) * .5);
1967
2613
  }
@@ -1978,6 +2624,10 @@
1978
2624
  padding-block: calc(var(--spacing) * 2);
1979
2625
  }
1980
2626
 
2627
+ .py-2\.5 {
2628
+ padding-block: calc(var(--spacing) * 2.5);
2629
+ }
2630
+
1981
2631
  .py-3 {
1982
2632
  padding-block: calc(var(--spacing) * 3);
1983
2633
  }
@@ -1986,10 +2636,18 @@
1986
2636
  padding-block: calc(var(--spacing) * 4);
1987
2637
  }
1988
2638
 
2639
+ .py-8 {
2640
+ padding-block: calc(var(--spacing) * 8);
2641
+ }
2642
+
1989
2643
  .py-10 {
1990
2644
  padding-block: calc(var(--spacing) * 10);
1991
2645
  }
1992
2646
 
2647
+ .py-16 {
2648
+ padding-block: calc(var(--spacing) * 16);
2649
+ }
2650
+
1993
2651
  .pt-3 {
1994
2652
  padding-top: calc(var(--spacing) * 3);
1995
2653
  }
@@ -1998,10 +2656,6 @@
1998
2656
  padding-top: calc(var(--spacing) * 6);
1999
2657
  }
2000
2658
 
2001
- .pt-8 {
2002
- padding-top: calc(var(--spacing) * 8);
2003
- }
2004
-
2005
2659
  .pt-14 {
2006
2660
  padding-top: calc(var(--spacing) * 14);
2007
2661
  }
@@ -2034,6 +2688,10 @@
2034
2688
  padding-left: calc(var(--spacing) * 2);
2035
2689
  }
2036
2690
 
2691
+ .pl-2\.5 {
2692
+ padding-left: calc(var(--spacing) * 2.5);
2693
+ }
2694
+
2037
2695
  .pl-4 {
2038
2696
  padding-left: calc(var(--spacing) * 4);
2039
2697
  }
@@ -2076,16 +2734,6 @@
2076
2734
  line-height: var(--tw-leading, var(--text-3xl--line-height));
2077
2735
  }
2078
2736
 
2079
- .text-\[0\.625rem\]\/4 {
2080
- font-size: .625rem;
2081
- line-height: calc(var(--spacing) * 4);
2082
- }
2083
-
2084
- .text-\[0\.625rem\]\/5 {
2085
- font-size: .625rem;
2086
- line-height: calc(var(--spacing) * 5);
2087
- }
2088
-
2089
2737
  .text-\[0\.625rem\]\/6 {
2090
2738
  font-size: .625rem;
2091
2739
  line-height: calc(var(--spacing) * 6);
@@ -2121,6 +2769,29 @@
2121
2769
  line-height: calc(var(--spacing) * 6);
2122
2770
  }
2123
2771
 
2772
+ .text-\[0\.6875rem\] {
2773
+ font-size: .6875rem;
2774
+ }
2775
+
2776
+ .text-\[0\.8125rem\] {
2777
+ font-size: .8125rem;
2778
+ }
2779
+
2780
+ .leading-5 {
2781
+ --tw-leading: calc(var(--spacing) * 5);
2782
+ line-height: calc(var(--spacing) * 5);
2783
+ }
2784
+
2785
+ .leading-6 {
2786
+ --tw-leading: calc(var(--spacing) * 6);
2787
+ line-height: calc(var(--spacing) * 6);
2788
+ }
2789
+
2790
+ .font-black {
2791
+ --tw-font-weight: var(--font-weight-black);
2792
+ font-weight: var(--font-weight-black);
2793
+ }
2794
+
2124
2795
  .font-bold {
2125
2796
  --tw-font-weight: var(--font-weight-bold);
2126
2797
  font-weight: var(--font-weight-bold);
@@ -2136,9 +2807,9 @@
2136
2807
  font-weight: var(--font-weight-semibold);
2137
2808
  }
2138
2809
 
2139
- .tracking-normal {
2140
- --tw-tracking: var(--tracking-normal);
2141
- letter-spacing: var(--tracking-normal);
2810
+ .tracking-\[-0\.01em\] {
2811
+ --tw-tracking: -.01em;
2812
+ letter-spacing: -.01em;
2142
2813
  }
2143
2814
 
2144
2815
  .tracking-tight {
@@ -2156,14 +2827,46 @@
2156
2827
  letter-spacing: var(--tracking-widest);
2157
2828
  }
2158
2829
 
2159
- .wrap-break-word {
2160
- overflow-wrap: break-word;
2830
+ .wrap-anywhere {
2831
+ overflow-wrap: anywhere;
2832
+ }
2833
+
2834
+ .whitespace-normal {
2835
+ white-space: normal;
2161
2836
  }
2162
2837
 
2163
2838
  .whitespace-nowrap {
2164
2839
  white-space: nowrap;
2165
2840
  }
2166
2841
 
2842
+ .text-\(--clarify-theme-tokens-colors-foreground\) {
2843
+ color: var(--clarify-theme-tokens-colors-foreground);
2844
+ }
2845
+
2846
+ .text-\(--clarify-theme-tokens-colors-muted\) {
2847
+ color: var(--clarify-theme-tokens-colors-muted);
2848
+ }
2849
+
2850
+ .text-\(--clarify-theme-tokens-colors-primary\) {
2851
+ color: var(--clarify-theme-tokens-colors-primary);
2852
+ }
2853
+
2854
+ .text-\(--clarify-ui-accent-text\) {
2855
+ color: var(--clarify-ui-accent-text);
2856
+ }
2857
+
2858
+ .text-\[var\(--clarify-theme-tokens-colors-foreground\)\] {
2859
+ color: var(--clarify-theme-tokens-colors-foreground);
2860
+ }
2861
+
2862
+ .text-\[var\(--clarify-theme-tokens-colors-muted\)\] {
2863
+ color: var(--clarify-theme-tokens-colors-muted);
2864
+ }
2865
+
2866
+ .text-\[var\(--clarify-theme-tokens-colors-primary\)\] {
2867
+ color: var(--clarify-theme-tokens-colors-primary);
2868
+ }
2869
+
2167
2870
  .text-amber-500 {
2168
2871
  color: var(--color-amber-500);
2169
2872
  }
@@ -2184,6 +2887,10 @@
2184
2887
  color: var(--color-amber-950);
2185
2888
  }
2186
2889
 
2890
+ .text-emerald-300 {
2891
+ color: var(--color-emerald-300);
2892
+ }
2893
+
2187
2894
  .text-emerald-400 {
2188
2895
  color: var(--color-emerald-400);
2189
2896
  }
@@ -2196,6 +2903,10 @@
2196
2903
  color: var(--color-emerald-600);
2197
2904
  }
2198
2905
 
2906
+ .text-emerald-800 {
2907
+ color: var(--color-emerald-800);
2908
+ }
2909
+
2199
2910
  .text-emerald-900 {
2200
2911
  color: var(--color-emerald-900);
2201
2912
  }
@@ -2288,6 +2999,10 @@
2288
2999
  color: var(--color-zinc-900);
2289
3000
  }
2290
3001
 
3002
+ .text-zinc-950 {
3003
+ color: var(--color-zinc-950);
3004
+ }
3005
+
2291
3006
  .capitalize {
2292
3007
  text-transform: capitalize;
2293
3008
  }
@@ -2312,14 +3027,23 @@
2312
3027
  opacity: 0;
2313
3028
  }
2314
3029
 
2315
- .opacity-40 {
2316
- opacity: .4;
3030
+ .opacity-35 {
3031
+ opacity: .35;
3032
+ }
3033
+
3034
+ .opacity-100 {
3035
+ opacity: 1;
2317
3036
  }
2318
3037
 
2319
3038
  .mix-blend-overlay {
2320
3039
  mix-blend-mode: overlay;
2321
3040
  }
2322
3041
 
3042
+ .shadow-\(--clarify-ui-accent-glow\) {
3043
+ --tw-shadow: var(--clarify-ui-accent-glow);
3044
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3045
+ }
3046
+
2323
3047
  .shadow-lg {
2324
3048
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
2325
3049
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2330,6 +3054,11 @@
2330
3054
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2331
3055
  }
2332
3056
 
3057
+ .shadow-none {
3058
+ --tw-shadow: 0 0 #0000;
3059
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3060
+ }
3061
+
2333
3062
  .shadow-sm {
2334
3063
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
2335
3064
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2340,11 +3069,26 @@
2340
3069
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2341
3070
  }
2342
3071
 
3072
+ .shadow-xs {
3073
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
3074
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3075
+ }
3076
+
2343
3077
  .ring-1 {
2344
3078
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
2345
3079
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2346
3080
  }
2347
3081
 
3082
+ .shadow-black\/10 {
3083
+ --tw-shadow-color: #0000001a;
3084
+ }
3085
+
3086
+ @supports (color: color-mix(in lab, red, red)) {
3087
+ .shadow-black\/10 {
3088
+ --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-black) 10%, transparent) var(--tw-shadow-alpha), transparent);
3089
+ }
3090
+ }
3091
+
2348
3092
  .shadow-black\/20 {
2349
3093
  --tw-shadow-color: #0003;
2350
3094
  }
@@ -2375,42 +3119,30 @@
2375
3119
  }
2376
3120
  }
2377
3121
 
2378
- .ring-amber-300 {
2379
- --tw-ring-color: var(--color-amber-300);
2380
- }
2381
-
2382
- .ring-emerald-300 {
2383
- --tw-ring-color: var(--color-emerald-300);
2384
- }
2385
-
2386
- .ring-emerald-400\/20 {
2387
- --tw-ring-color: #00d29433;
3122
+ .ring-\(--clarify-theme-tokens-colors-border\) {
3123
+ --tw-ring-color: var(--clarify-theme-tokens-colors-border);
2388
3124
  }
2389
3125
 
2390
- @supports (color: color-mix(in lab, red, red)) {
2391
- .ring-emerald-400\/20 {
2392
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
2393
- }
3126
+ .ring-\(--clarify-ui-accent-border\) {
3127
+ --tw-ring-color: var(--clarify-ui-accent-border);
2394
3128
  }
2395
3129
 
2396
- .ring-emerald-500\/10 {
2397
- --tw-ring-color: #00bb7f1a;
3130
+ .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
3131
+ --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
2398
3132
  }
2399
3133
 
2400
3134
  @supports (color: color-mix(in lab, red, red)) {
2401
- .ring-emerald-500\/10 {
2402
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
3135
+ .ring-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-primary\)_24\%\,transparent\)\] {
3136
+ --tw-ring-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-primary) 24%,transparent);
2403
3137
  }
2404
3138
  }
2405
3139
 
2406
- .ring-emerald-500\/20 {
2407
- --tw-ring-color: #00bb7f33;
3140
+ .ring-amber-300 {
3141
+ --tw-ring-color: var(--color-amber-300);
2408
3142
  }
2409
3143
 
2410
- @supports (color: color-mix(in lab, red, red)) {
2411
- .ring-emerald-500\/20 {
2412
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
2413
- }
3144
+ .ring-emerald-300 {
3145
+ --tw-ring-color: var(--color-emerald-300);
2414
3146
  }
2415
3147
 
2416
3148
  .ring-rose-200 {
@@ -2421,31 +3153,27 @@
2421
3153
  --tw-ring-color: var(--color-sky-300);
2422
3154
  }
2423
3155
 
2424
- .ring-zinc-200 {
2425
- --tw-ring-color: var(--color-zinc-200);
2426
- }
2427
-
2428
- .ring-zinc-300 {
2429
- --tw-ring-color: var(--color-zinc-300);
2430
- }
2431
-
2432
- .ring-zinc-900\/7\.5 {
2433
- --tw-ring-color: #18181b13;
3156
+ .ring-white\/10 {
3157
+ --tw-ring-color: #ffffff1a;
2434
3158
  }
2435
3159
 
2436
3160
  @supports (color: color-mix(in lab, red, red)) {
2437
- .ring-zinc-900\/7\.5 {
2438
- --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 7.5%, transparent);
3161
+ .ring-white\/10 {
3162
+ --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2439
3163
  }
2440
3164
  }
2441
3165
 
2442
- .ring-zinc-900\/10 {
2443
- --tw-ring-color: #18181b1a;
3166
+ .ring-zinc-300 {
3167
+ --tw-ring-color: var(--color-zinc-300);
3168
+ }
3169
+
3170
+ .ring-zinc-950\/10 {
3171
+ --tw-ring-color: #09090b1a;
2444
3172
  }
2445
3173
 
2446
3174
  @supports (color: color-mix(in lab, red, red)) {
2447
- .ring-zinc-900\/10 {
2448
- --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
3175
+ .ring-zinc-950\/10 {
3176
+ --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
2449
3177
  }
2450
3178
  }
2451
3179
 
@@ -2506,6 +3234,12 @@
2506
3234
  transition-duration: var(--tw-duration, var(--default-transition-duration));
2507
3235
  }
2508
3236
 
3237
+ .transition-transform {
3238
+ transition-property: transform, translate, scale, rotate;
3239
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
3240
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
3241
+ }
3242
+
2509
3243
  .delay-150 {
2510
3244
  transition-delay: .15s;
2511
3245
  }
@@ -2555,6 +3289,10 @@
2555
3289
  }
2556
3290
 
2557
3291
  @media (hover: hover) {
3292
+ .group-hover\:text-\(--clarify-theme-tokens-colors-primary\):is(:where(.group):hover *) {
3293
+ color: var(--clarify-theme-tokens-colors-primary);
3294
+ }
3295
+
2558
3296
  .group-hover\:opacity-100:is(:where(.group):hover *) {
2559
3297
  opacity: 1;
2560
3298
  }
@@ -2568,8 +3306,8 @@
2568
3306
  opacity: 1;
2569
3307
  }
2570
3308
 
2571
- .group-aria-selected\:text-emerald-500:is(:where(.group)[aria-selected="true"] *) {
2572
- color: var(--color-emerald-500);
3309
+ .group-aria-expanded\:rotate-180:is(:where(.group)[aria-expanded="true"] *) {
3310
+ rotate: 180deg;
2573
3311
  }
2574
3312
 
2575
3313
  .group-data-selected\:opacity-100:is(:where(.group)[data-selected] *) {
@@ -2601,60 +3339,72 @@
2601
3339
  }
2602
3340
 
2603
3341
  @media (hover: hover) {
2604
- .hover\:border-emerald-300:hover {
2605
- border-color: var(--color-emerald-300);
3342
+ .hover\:border-\(--clarify-theme-tokens-colors-primary\):hover {
3343
+ border-color: var(--clarify-theme-tokens-colors-primary);
2606
3344
  }
2607
3345
 
2608
- .hover\:border-white\/20:hover {
2609
- border-color: #fff3;
3346
+ .hover\:border-\(--clarify-ui-accent-border\):hover {
3347
+ border-color: var(--clarify-ui-accent-border);
2610
3348
  }
2611
3349
 
2612
- @supports (color: color-mix(in lab, red, red)) {
2613
- .hover\:border-white\/20:hover {
2614
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2615
- }
3350
+ .hover\:border-zinc-300:hover {
3351
+ border-color: var(--color-zinc-300);
2616
3352
  }
2617
3353
 
2618
- .hover\:bg-white\/5:hover {
2619
- background-color: #ffffff0d;
3354
+ .hover\:bg-\(--clarify-theme-tokens-colors-background\):hover {
3355
+ background-color: var(--clarify-theme-tokens-colors-background);
3356
+ }
3357
+
3358
+ .hover\:bg-\(--clarify-theme-tokens-colors-surface\):hover {
3359
+ background-color: var(--clarify-theme-tokens-colors-surface);
3360
+ }
3361
+
3362
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
3363
+ background-color: var(--clarify-theme-tokens-colors-foreground);
2620
3364
  }
2621
3365
 
2622
3366
  @supports (color: color-mix(in lab, red, red)) {
2623
- .hover\:bg-white\/5:hover {
2624
- background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
3367
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_2\.5\%\,transparent\)\]:hover {
3368
+ background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 2.5%,transparent);
2625
3369
  }
2626
3370
  }
2627
3371
 
2628
- .hover\:bg-white\/7\.5:hover {
2629
- background-color: #ffffff13;
3372
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\]:hover {
3373
+ background-color: var(--clarify-theme-tokens-colors-foreground);
2630
3374
  }
2631
3375
 
2632
3376
  @supports (color: color-mix(in lab, red, red)) {
2633
- .hover\:bg-white\/7\.5:hover {
2634
- background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
3377
+ .hover\:bg-\[color-mix\(in_srgb\,var\(--clarify-theme-tokens-colors-foreground\)_5\%\,transparent\)\]:hover {
3378
+ background-color: color-mix(in srgb,var(--clarify-theme-tokens-colors-foreground) 5%,transparent);
2635
3379
  }
2636
3380
  }
2637
3381
 
2638
- .hover\:bg-white\/10:hover {
2639
- background-color: #ffffff1a;
3382
+ .hover\:bg-black\/50:hover {
3383
+ background-color: #00000080;
2640
3384
  }
2641
3385
 
2642
3386
  @supports (color: color-mix(in lab, red, red)) {
2643
- .hover\:bg-white\/10:hover {
2644
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3387
+ .hover\:bg-black\/50:hover {
3388
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
2645
3389
  }
2646
3390
  }
2647
3391
 
2648
- .hover\:bg-zinc-100:hover {
2649
- background-color: var(--color-zinc-100);
3392
+ .hover\:bg-white\/7\.5:hover {
3393
+ background-color: #ffffff13;
2650
3394
  }
2651
3395
 
2652
- .hover\:bg-zinc-200:hover {
2653
- background-color: var(--color-zinc-200);
3396
+ @supports (color: color-mix(in lab, red, red)) {
3397
+ .hover\:bg-white\/7\.5:hover {
3398
+ background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
3399
+ }
2654
3400
  }
2655
3401
 
2656
- .hover\:bg-zinc-700:hover {
2657
- background-color: var(--color-zinc-700);
3402
+ .hover\:bg-zinc-50:hover {
3403
+ background-color: var(--color-zinc-50);
3404
+ }
3405
+
3406
+ .hover\:bg-zinc-100:hover {
3407
+ background-color: var(--color-zinc-100);
2658
3408
  }
2659
3409
 
2660
3410
  .hover\:bg-zinc-900\/2\.5:hover {
@@ -2667,18 +3417,12 @@
2667
3417
  }
2668
3418
  }
2669
3419
 
2670
- .hover\:bg-zinc-900\/5:hover {
2671
- background-color: #18181b0d;
2672
- }
2673
-
2674
- @supports (color: color-mix(in lab, red, red)) {
2675
- .hover\:bg-zinc-900\/5:hover {
2676
- background-color: color-mix(in oklab, var(--color-zinc-900) 5%, transparent);
2677
- }
3420
+ .hover\:text-\(--clarify-theme-tokens-colors-foreground\):hover {
3421
+ color: var(--clarify-theme-tokens-colors-foreground);
2678
3422
  }
2679
3423
 
2680
- .hover\:text-emerald-600:hover {
2681
- color: var(--color-emerald-600);
3424
+ .hover\:text-emerald-700:hover {
3425
+ color: var(--color-emerald-700);
2682
3426
  }
2683
3427
 
2684
3428
  .hover\:text-inherit:hover {
@@ -2701,6 +3445,10 @@
2701
3445
  color: var(--color-zinc-950);
2702
3446
  }
2703
3447
 
3448
+ .hover\:opacity-80:hover {
3449
+ opacity: .8;
3450
+ }
3451
+
2704
3452
  .hover\:shadow-md:hover {
2705
3453
  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
2706
3454
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2709,16 +3457,6 @@
2709
3457
  .hover\:ring-zinc-500:hover {
2710
3458
  --tw-ring-color: var(--color-zinc-500);
2711
3459
  }
2712
-
2713
- .hover\:ring-zinc-900\/20:hover {
2714
- --tw-ring-color: #18181b33;
2715
- }
2716
-
2717
- @supports (color: color-mix(in lab, red, red)) {
2718
- .hover\:ring-zinc-900\/20:hover {
2719
- --tw-ring-color: color-mix(in oklab, var(--color-zinc-900) 20%, transparent);
2720
- }
2721
- }
2722
3460
  }
2723
3461
 
2724
3462
  .focus\:w-full:focus {
@@ -2729,8 +3467,26 @@
2729
3467
  flex: none;
2730
3468
  }
2731
3469
 
2732
- .focus\:border-emerald-400:focus {
2733
- border-color: var(--color-emerald-400);
3470
+ .focus\:border-zinc-400:focus {
3471
+ border-color: var(--color-zinc-400);
3472
+ }
3473
+
3474
+ .focus\:bg-black\/50:focus {
3475
+ background-color: #00000080;
3476
+ }
3477
+
3478
+ @supports (color: color-mix(in lab, red, red)) {
3479
+ .focus\:bg-black\/50:focus {
3480
+ background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
3481
+ }
3482
+ }
3483
+
3484
+ .focus\:bg-white:focus {
3485
+ background-color: var(--color-white);
3486
+ }
3487
+
3488
+ .focus\:text-zinc-200:focus {
3489
+ color: var(--color-zinc-200);
2734
3490
  }
2735
3491
 
2736
3492
  .focus\:opacity-100:focus {
@@ -2742,13 +3498,13 @@
2742
3498
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2743
3499
  }
2744
3500
 
2745
- .focus\:ring-emerald-400\/20:focus {
2746
- --tw-ring-color: #00d29433;
3501
+ .focus\:ring-emerald-400\/25:focus {
3502
+ --tw-ring-color: #00d29440;
2747
3503
  }
2748
3504
 
2749
3505
  @supports (color: color-mix(in lab, red, red)) {
2750
- .focus\:ring-emerald-400\/20:focus {
2751
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3506
+ .focus\:ring-emerald-400\/25:focus {
3507
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
2752
3508
  }
2753
3509
  }
2754
3510
 
@@ -2757,10 +3513,6 @@
2757
3513
  outline-style: none;
2758
3514
  }
2759
3515
 
2760
- .aria-selected\:bg-zinc-50[aria-selected="true"] {
2761
- background-color: var(--color-zinc-50);
2762
- }
2763
-
2764
3516
  .data-closed\:-translate-x-full[data-closed] {
2765
3517
  --tw-translate-x: -100%;
2766
3518
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2810,10 +3562,6 @@
2810
3562
  color: var(--color-white);
2811
3563
  }
2812
3564
 
2813
- .data-focus\:text-zinc-950[data-focus] {
2814
- color: var(--color-zinc-950);
2815
- }
2816
-
2817
3565
  .data-leave\:pointer-events-none[data-leave] {
2818
3566
  pointer-events: none;
2819
3567
  }
@@ -2833,8 +3581,22 @@
2833
3581
  transition-timing-function: var(--ease-in);
2834
3582
  }
2835
3583
 
2836
- .data-open\:border-emerald-400[data-open] {
2837
- border-color: var(--color-emerald-400);
3584
+ .data-open\:border-zinc-300[data-open] {
3585
+ border-color: var(--color-zinc-300);
3586
+ }
3587
+
3588
+ .data-open\:bg-white\/10[data-open] {
3589
+ background-color: #ffffff1a;
3590
+ }
3591
+
3592
+ @supports (color: color-mix(in lab, red, red)) {
3593
+ .data-open\:bg-white\/10[data-open] {
3594
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3595
+ }
3596
+ }
3597
+
3598
+ .data-open\:bg-zinc-50[data-open] {
3599
+ background-color: var(--color-zinc-50);
2838
3600
  }
2839
3601
 
2840
3602
  .data-open\:ring-2[data-open] {
@@ -2842,13 +3604,13 @@
2842
3604
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2843
3605
  }
2844
3606
 
2845
- .data-open\:ring-emerald-400\/20[data-open] {
2846
- --tw-ring-color: #00d29433;
3607
+ .data-open\:ring-emerald-400\/25[data-open] {
3608
+ --tw-ring-color: #00d29440;
2847
3609
  }
2848
3610
 
2849
3611
  @supports (color: color-mix(in lab, red, red)) {
2850
- .data-open\:ring-emerald-400\/20[data-open] {
2851
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3612
+ .data-open\:ring-emerald-400\/25[data-open] {
3613
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
2852
3614
  }
2853
3615
  }
2854
3616
 
@@ -2856,6 +3618,10 @@
2856
3618
  color: var(--color-emerald-300);
2857
3619
  }
2858
3620
 
3621
+ .data-selected\:text-emerald-700[data-selected] {
3622
+ color: var(--color-emerald-700);
3623
+ }
3624
+
2859
3625
  .data-selected\:not-data-focus\:outline-hidden[data-selected]:not([data-focus]) {
2860
3626
  --tw-outline-style: none;
2861
3627
  outline-style: none;
@@ -2875,18 +3641,42 @@
2875
3641
  }
2876
3642
 
2877
3643
  @media (min-width: 40rem) {
3644
+ .sm\:flex {
3645
+ display: flex;
3646
+ }
3647
+
3648
+ .sm\:hidden {
3649
+ display: none;
3650
+ }
3651
+
2878
3652
  .sm\:inline {
2879
3653
  display: inline;
2880
3654
  }
2881
3655
 
3656
+ .sm\:w-auto {
3657
+ width: auto;
3658
+ }
3659
+
3660
+ .sm\:max-w-\[min\(36\%\,16rem\)\] {
3661
+ max-width: min(36%, 16rem);
3662
+ }
3663
+
2882
3664
  .sm\:max-w-xl {
2883
3665
  max-width: var(--container-xl);
2884
3666
  }
2885
3667
 
3668
+ .sm\:min-w-16 {
3669
+ min-width: calc(var(--spacing) * 16);
3670
+ }
3671
+
2886
3672
  .sm\:grid-cols-2 {
2887
3673
  grid-template-columns: repeat(2, minmax(0, 1fr));
2888
3674
  }
2889
3675
 
3676
+ .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.2fr\)\] {
3677
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
3678
+ }
3679
+
2890
3680
  .sm\:flex-row {
2891
3681
  flex-direction: row;
2892
3682
  }
@@ -2903,6 +3693,10 @@
2903
3693
  justify-content: flex-start;
2904
3694
  }
2905
3695
 
3696
+ .sm\:px-1\.5 {
3697
+ padding-inline: calc(var(--spacing) * 1.5);
3698
+ }
3699
+
2906
3700
  .sm\:px-6 {
2907
3701
  padding-inline: calc(var(--spacing) * 6);
2908
3702
  }
@@ -2918,18 +3712,9 @@
2918
3712
  .sm\:text-left {
2919
3713
  text-align: left;
2920
3714
  }
2921
-
2922
- .sm\:text-sm {
2923
- font-size: var(--text-sm);
2924
- line-height: var(--tw-leading, var(--text-sm--line-height));
2925
- }
2926
3715
  }
2927
3716
 
2928
3717
  @media (min-width: 48rem) {
2929
- .md\:mt-0 {
2930
- margin-top: 0;
2931
- }
2932
-
2933
3718
  .md\:block {
2934
3719
  display: block;
2935
3720
  }
@@ -2950,14 +3735,8 @@
2950
3735
  justify-content: flex-start;
2951
3736
  }
2952
3737
 
2953
- .md\:bg-zinc-900\/10 {
2954
- background-color: #18181b1a;
2955
- }
2956
-
2957
- @supports (color: color-mix(in lab, red, red)) {
2958
- .md\:bg-zinc-900\/10 {
2959
- background-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
2960
- }
3738
+ .md\:bg-\(--clarify-theme-tokens-colors-border\) {
3739
+ background-color: var(--clarify-theme-tokens-colors-border);
2961
3740
  }
2962
3741
 
2963
3742
  .md\:px-10 {
@@ -2975,44 +3754,32 @@
2975
3754
  }
2976
3755
 
2977
3756
  @media (min-width: 64rem) {
2978
- .lg\:pointer-events-auto {
2979
- pointer-events: auto;
2980
- }
2981
-
2982
- .lg\:pointer-events-none {
2983
- pointer-events: none;
3757
+ .lg\:sticky {
3758
+ position: sticky;
2984
3759
  }
2985
3760
 
2986
- .lg\:fixed {
2987
- position: fixed;
3761
+ .lg\:top-14 {
3762
+ top: calc(var(--spacing) * 14);
2988
3763
  }
2989
3764
 
2990
- .lg\:inset-0 {
2991
- inset: 0;
3765
+ .lg\:top-28 {
3766
+ top: calc(var(--spacing) * 28);
2992
3767
  }
2993
3768
 
2994
- .lg\:left-72 {
2995
- left: calc(var(--spacing) * 72);
3769
+ .lg\:top-30 {
3770
+ top: calc(var(--spacing) * 30);
2996
3771
  }
2997
3772
 
2998
3773
  .lg\:z-30 {
2999
3774
  z-index: 30;
3000
3775
  }
3001
3776
 
3002
- .lg\:z-40 {
3003
- z-index: 40;
3004
- }
3005
-
3006
3777
  .lg\:z-50 {
3007
3778
  z-index: 50;
3008
3779
  }
3009
3780
 
3010
- .lg\:mt-10 {
3011
- margin-top: calc(var(--spacing) * 10);
3012
- }
3013
-
3014
- .lg\:ml-72 {
3015
- margin-left: calc(var(--spacing) * 72);
3781
+ .lg\:mt-24 {
3782
+ margin-top: calc(var(--spacing) * 24);
3016
3783
  }
3017
3784
 
3018
3785
  .lg\:block {
@@ -3027,16 +3794,12 @@
3027
3794
  display: none;
3028
3795
  }
3029
3796
 
3030
- .lg\:w-72 {
3031
- width: calc(var(--spacing) * 72);
3032
- }
3033
-
3034
- .lg\:max-w-md {
3035
- max-width: var(--container-md);
3797
+ .lg\:h-\[calc\(100vh-3\.5rem\)\] {
3798
+ height: calc(100vh - 3.5rem);
3036
3799
  }
3037
3800
 
3038
- .lg\:flex-auto {
3039
- flex: auto;
3801
+ .lg\:h-\[calc\(100vh-7rem\)\] {
3802
+ height: calc(100vh - 7rem);
3040
3803
  }
3041
3804
 
3042
3805
  .lg\:grid-cols-3 {
@@ -3047,31 +3810,24 @@
3047
3810
  grid-template-columns: repeat(4, minmax(0, 1fr));
3048
3811
  }
3049
3812
 
3050
- .lg\:overflow-y-auto {
3051
- overflow-y: auto;
3052
- }
3053
-
3054
- .lg\:border-r {
3055
- border-right-style: var(--tw-border-style);
3056
- border-right-width: 1px;
3813
+ .lg\:grid-cols-\[18rem_minmax\(0\,1fr\)\] {
3814
+ grid-template-columns: 18rem minmax(0, 1fr);
3057
3815
  }
3058
3816
 
3059
- .lg\:border-zinc-900\/10 {
3060
- border-color: #18181b1a;
3817
+ .lg\:self-start {
3818
+ align-self: flex-start;
3061
3819
  }
3062
3820
 
3063
- @supports (color: color-mix(in lab, red, red)) {
3064
- .lg\:border-zinc-900\/10 {
3065
- border-color: color-mix(in oklab, var(--color-zinc-900) 10%, transparent);
3066
- }
3821
+ .lg\:overflow-y-auto {
3822
+ overflow-y: auto;
3067
3823
  }
3068
3824
 
3069
- .lg\:bg-white {
3070
- background-color: var(--color-white);
3825
+ .lg\:bg-\(--clarify-theme-tokens-colors-background\) {
3826
+ background-color: var(--clarify-theme-tokens-colors-background);
3071
3827
  }
3072
3828
 
3073
- .lg\:px-6 {
3074
- padding-inline: calc(var(--spacing) * 6);
3829
+ .lg\:px-5 {
3830
+ padding-inline: calc(var(--spacing) * 5);
3075
3831
  }
3076
3832
 
3077
3833
  .lg\:px-8 {
@@ -3082,8 +3838,12 @@
3082
3838
  padding-block: 15vh;
3083
3839
  }
3084
3840
 
3085
- .lg\:pt-4 {
3086
- padding-top: calc(var(--spacing) * 4);
3841
+ .lg\:pt-6 {
3842
+ padding-top: calc(var(--spacing) * 6);
3843
+ }
3844
+
3845
+ .lg\:pt-28 {
3846
+ padding-top: calc(var(--spacing) * 28);
3087
3847
  }
3088
3848
 
3089
3849
  .lg\:pb-8 {
@@ -3100,38 +3860,48 @@
3100
3860
  top: calc(var(--spacing) * 24);
3101
3861
  }
3102
3862
 
3103
- .xl\:left-80 {
3104
- left: calc(var(--spacing) * 80);
3863
+ .xl\:max-w-none {
3864
+ max-width: none;
3105
3865
  }
3106
3866
 
3107
- .xl\:ml-80 {
3108
- margin-left: calc(var(--spacing) * 80);
3867
+ .xl\:grid-cols-2 {
3868
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3109
3869
  }
3110
3870
 
3111
- .xl\:w-80 {
3112
- width: calc(var(--spacing) * 80);
3871
+ .xl\:grid-cols-\[20rem_minmax\(0\,1fr\)\] {
3872
+ grid-template-columns: 20rem minmax(0, 1fr);
3113
3873
  }
3114
3874
 
3115
- .xl\:max-w-\[56rem\] {
3116
- max-width: 56rem;
3875
+ .xl\:px-6 {
3876
+ padding-inline: calc(var(--spacing) * 6);
3117
3877
  }
3118
3878
 
3119
- .xl\:max-w-none {
3120
- max-width: none;
3879
+ .xl\:px-10 {
3880
+ padding-inline: calc(var(--spacing) * 10);
3121
3881
  }
3882
+ }
3122
3883
 
3123
- .xl\:grid-cols-2 {
3124
- grid-template-columns: repeat(2, minmax(0, 1fr));
3884
+ @media (min-width: 96rem) {
3885
+ .\32 xl\:\[--width\:--spacing\(10\)\] {
3886
+ --width: calc(var(--spacing) * 10);
3125
3887
  }
3126
3888
  }
3127
3889
 
3128
- @media (min-width: 96rem) {
3129
- .\32 xl\:max-w-\[64rem\] {
3130
- max-width: 64rem;
3890
+ @container (min-width: 50rem) {
3891
+ .\@3xl\:block {
3892
+ display: block;
3131
3893
  }
3132
3894
 
3133
- .\32 xl\:\[--width\:--spacing\(10\)\] {
3134
- --width: calc(var(--spacing) * 10);
3895
+ .\@3xl\:grid-cols-2 {
3896
+ grid-template-columns: repeat(2, minmax(0, 1fr));
3897
+ }
3898
+
3899
+ .\@3xl\:justify-end {
3900
+ justify-content: flex-end;
3901
+ }
3902
+
3903
+ .\@3xl\:text-right {
3904
+ text-align: right;
3135
3905
  }
3136
3906
  }
3137
3907
 
@@ -3153,6 +3923,16 @@
3153
3923
  }
3154
3924
  }
3155
3925
 
3926
+ :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
3927
+ border-color: #ffffff1a;
3928
+ }
3929
+
3930
+ @supports (color: color-mix(in lab, red, red)) {
3931
+ :where(.dark\:divide-white\/10:where(.dark, .dark *) > :not(:last-child)) {
3932
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3933
+ }
3934
+ }
3935
+
3156
3936
  .dark\:border-amber-400\/30:where(.dark, .dark *) {
3157
3937
  border-color: #fcbb004d;
3158
3938
  }
@@ -3183,16 +3963,6 @@
3183
3963
  }
3184
3964
  }
3185
3965
 
3186
- .dark\:border-emerald-500\/30:where(.dark, .dark *) {
3187
- border-color: #00bb7f4d;
3188
- }
3189
-
3190
- @supports (color: color-mix(in lab, red, red)) {
3191
- .dark\:border-emerald-500\/30:where(.dark, .dark *) {
3192
- border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
3193
- }
3194
- }
3195
-
3196
3966
  .dark\:border-red-500\/30:where(.dark, .dark *) {
3197
3967
  border-color: #fb2c364d;
3198
3968
  }
@@ -3257,6 +4027,16 @@
3257
4027
  }
3258
4028
  }
3259
4029
 
4030
+ .dark\:bg-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *), .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
4031
+ background-color: var(--clarify-theme-tokens-colors-primary);
4032
+ }
4033
+
4034
+ @supports (color: color-mix(in lab, red, red)) {
4035
+ .dark\:bg-\(--clarify-theme-tokens-colors-primary\)\/10:where(.dark, .dark *) {
4036
+ background-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-primary) 10%, transparent);
4037
+ }
4038
+ }
4039
+
3260
4040
  .dark\:bg-amber-400\/5:where(.dark, .dark *) {
3261
4041
  background-color: #fcbb000d;
3262
4042
  }
@@ -3267,23 +4047,23 @@
3267
4047
  }
3268
4048
  }
3269
4049
 
3270
- .dark\:bg-amber-500\/10:where(.dark, .dark *) {
3271
- background-color: #f99c001a;
4050
+ .dark\:bg-amber-400\/20:where(.dark, .dark *) {
4051
+ background-color: #fcbb0033;
3272
4052
  }
3273
4053
 
3274
4054
  @supports (color: color-mix(in lab, red, red)) {
3275
- .dark\:bg-amber-500\/10:where(.dark, .dark *) {
3276
- background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
4055
+ .dark\:bg-amber-400\/20:where(.dark, .dark *) {
4056
+ background-color: color-mix(in oklab, var(--color-amber-400) 20%, transparent);
3277
4057
  }
3278
4058
  }
3279
4059
 
3280
- .dark\:bg-black\/40:where(.dark, .dark *) {
3281
- background-color: #0006;
4060
+ .dark\:bg-amber-500\/10:where(.dark, .dark *) {
4061
+ background-color: #f99c001a;
3282
4062
  }
3283
4063
 
3284
4064
  @supports (color: color-mix(in lab, red, red)) {
3285
- .dark\:bg-black\/40:where(.dark, .dark *) {
3286
- background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
4065
+ .dark\:bg-amber-500\/10:where(.dark, .dark *) {
4066
+ background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
3287
4067
  }
3288
4068
  }
3289
4069
 
@@ -3297,27 +4077,23 @@
3297
4077
  }
3298
4078
  }
3299
4079
 
3300
- .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
3301
- background-color: #00d2941a;
4080
+ .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
4081
+ background-color: #00d29426;
3302
4082
  }
3303
4083
 
3304
4084
  @supports (color: color-mix(in lab, red, red)) {
3305
- .dark\:bg-emerald-400\/10:where(.dark, .dark *) {
3306
- background-color: color-mix(in oklab, var(--color-emerald-400) 10%, transparent);
4085
+ .dark\:bg-emerald-400\/15:where(.dark, .dark *) {
4086
+ background-color: color-mix(in oklab, var(--color-emerald-400) 15%, transparent);
3307
4087
  }
3308
4088
  }
3309
4089
 
3310
- .dark\:bg-emerald-500:where(.dark, .dark *) {
3311
- background-color: var(--color-emerald-500);
3312
- }
3313
-
3314
- .dark\:bg-emerald-500\/5:where(.dark, .dark *) {
3315
- background-color: #00bb7f0d;
4090
+ .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
4091
+ background-color: #00d29433;
3316
4092
  }
3317
4093
 
3318
4094
  @supports (color: color-mix(in lab, red, red)) {
3319
- .dark\:bg-emerald-500\/5:where(.dark, .dark *) {
3320
- background-color: color-mix(in oklab, var(--color-emerald-500) 5%, transparent);
4095
+ .dark\:bg-emerald-400\/20:where(.dark, .dark *) {
4096
+ background-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
3321
4097
  }
3322
4098
  }
3323
4099
 
@@ -3351,6 +4127,16 @@
3351
4127
  }
3352
4128
  }
3353
4129
 
4130
+ .dark\:bg-rose-400\/20:where(.dark, .dark *) {
4131
+ background-color: #ff667f33;
4132
+ }
4133
+
4134
+ @supports (color: color-mix(in lab, red, red)) {
4135
+ .dark\:bg-rose-400\/20:where(.dark, .dark *) {
4136
+ background-color: color-mix(in oklab, var(--color-rose-400) 20%, transparent);
4137
+ }
4138
+ }
4139
+
3354
4140
  .dark\:bg-sky-400\/5:where(.dark, .dark *) {
3355
4141
  background-color: #00bcfe0d;
3356
4142
  }
@@ -3361,10 +4147,24 @@
3361
4147
  }
3362
4148
  }
3363
4149
 
4150
+ .dark\:bg-sky-400\/20:where(.dark, .dark *) {
4151
+ background-color: #00bcfe33;
4152
+ }
4153
+
4154
+ @supports (color: color-mix(in lab, red, red)) {
4155
+ .dark\:bg-sky-400\/20:where(.dark, .dark *) {
4156
+ background-color: color-mix(in oklab, var(--color-sky-400) 20%, transparent);
4157
+ }
4158
+ }
4159
+
3364
4160
  .dark\:bg-transparent:where(.dark, .dark *) {
3365
4161
  background-color: #0000;
3366
4162
  }
3367
4163
 
4164
+ .dark\:bg-white:where(.dark, .dark *) {
4165
+ background-color: var(--color-white);
4166
+ }
4167
+
3368
4168
  .dark\:bg-white\/1:where(.dark, .dark *) {
3369
4169
  background-color: #ffffff03;
3370
4170
  }
@@ -3395,23 +4195,33 @@
3395
4195
  }
3396
4196
  }
3397
4197
 
3398
- .dark\:bg-white\/7\.5:where(.dark, .dark *) {
3399
- background-color: #ffffff13;
4198
+ .dark\:bg-white\/10:where(.dark, .dark *) {
4199
+ background-color: #ffffff1a;
3400
4200
  }
3401
4201
 
3402
4202
  @supports (color: color-mix(in lab, red, red)) {
3403
- .dark\:bg-white\/7\.5:where(.dark, .dark *) {
3404
- background-color: color-mix(in oklab, var(--color-white) 7.5%, transparent);
4203
+ .dark\:bg-white\/10:where(.dark, .dark *) {
4204
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3405
4205
  }
3406
4206
  }
3407
4207
 
3408
- .dark\:bg-white\/10:where(.dark, .dark *) {
3409
- background-color: #ffffff1a;
4208
+ .dark\:bg-white\/12:where(.dark, .dark *) {
4209
+ background-color: #ffffff1f;
3410
4210
  }
3411
4211
 
3412
4212
  @supports (color: color-mix(in lab, red, red)) {
3413
- .dark\:bg-white\/10:where(.dark, .dark *) {
3414
- background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
4213
+ .dark\:bg-white\/12:where(.dark, .dark *) {
4214
+ background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
4215
+ }
4216
+ }
4217
+
4218
+ .dark\:bg-white\/\[0\.04\]:where(.dark, .dark *) {
4219
+ background-color: #ffffff0a;
4220
+ }
4221
+
4222
+ @supports (color: color-mix(in lab, red, red)) {
4223
+ .dark\:bg-white\/\[0\.04\]:where(.dark, .dark *) {
4224
+ background-color: color-mix(in oklab, var(--color-white) 4%, transparent);
3415
4225
  }
3416
4226
  }
3417
4227
 
@@ -3425,6 +4235,16 @@
3425
4235
  }
3426
4236
  }
3427
4237
 
4238
+ .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
4239
+ background-color: #9f9fa933;
4240
+ }
4241
+
4242
+ @supports (color: color-mix(in lab, red, red)) {
4243
+ .dark\:bg-zinc-400\/20:where(.dark, .dark *) {
4244
+ background-color: color-mix(in oklab, var(--color-zinc-400) 20%, transparent);
4245
+ }
4246
+ }
4247
+
3428
4248
  .dark\:bg-zinc-600:where(.dark, .dark *) {
3429
4249
  background-color: var(--color-zinc-600);
3430
4250
  }
@@ -3443,16 +4263,6 @@
3443
4263
  }
3444
4264
  }
3445
4265
 
3446
- .dark\:bg-zinc-800\/50:where(.dark, .dark *) {
3447
- background-color: #27272a80;
3448
- }
3449
-
3450
- @supports (color: color-mix(in lab, red, red)) {
3451
- .dark\:bg-zinc-800\/50:where(.dark, .dark *) {
3452
- background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
3453
- }
3454
- }
3455
-
3456
4266
  .dark\:bg-zinc-900:where(.dark, .dark *) {
3457
4267
  background-color: var(--color-zinc-900);
3458
4268
  }
@@ -3467,6 +4277,26 @@
3467
4277
  }
3468
4278
  }
3469
4279
 
4280
+ .dark\:bg-zinc-900\/60:where(.dark, .dark *) {
4281
+ background-color: #18181b99;
4282
+ }
4283
+
4284
+ @supports (color: color-mix(in lab, red, red)) {
4285
+ .dark\:bg-zinc-900\/60:where(.dark, .dark *) {
4286
+ background-color: color-mix(in oklab, var(--color-zinc-900) 60%, transparent);
4287
+ }
4288
+ }
4289
+
4290
+ .dark\:bg-zinc-900\/80:where(.dark, .dark *) {
4291
+ background-color: #18181bcc;
4292
+ }
4293
+
4294
+ @supports (color: color-mix(in lab, red, red)) {
4295
+ .dark\:bg-zinc-900\/80:where(.dark, .dark *) {
4296
+ background-color: color-mix(in oklab, var(--color-zinc-900) 80%, transparent);
4297
+ }
4298
+ }
4299
+
3470
4300
  .dark\:bg-zinc-950:where(.dark, .dark *) {
3471
4301
  background-color: var(--color-zinc-950);
3472
4302
  }
@@ -3481,29 +4311,13 @@
3481
4311
  }
3482
4312
  }
3483
4313
 
3484
- .dark\:from-\[\#36b49f\]\/30:where(.dark, .dark *) {
3485
- --tw-gradient-from: oklab(69.6777% -.112486 .00150466 / .3);
3486
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3487
- }
3488
-
3489
- .dark\:to-\[\#DBFF75\]\/30:where(.dark, .dark *) {
3490
- --tw-gradient-to: oklab(94.6982% -.0890822 .143295 / .3);
3491
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
3492
- }
3493
-
3494
4314
  .dark\:mask-\[linear-gradient\(white\,transparent\)\]:where(.dark, .dark *) {
3495
4315
  -webkit-mask-image: linear-gradient(#fff, #0000);
3496
4316
  mask-image: linear-gradient(#fff, #0000);
3497
4317
  }
3498
4318
 
3499
- .dark\:fill-emerald-200\/20:where(.dark, .dark *) {
3500
- fill: #a4f4cf33;
3501
- }
3502
-
3503
- @supports (color: color-mix(in lab, red, red)) {
3504
- .dark\:fill-emerald-200\/20:where(.dark, .dark *) {
3505
- fill: color-mix(in oklab, var(--color-emerald-200) 20%, transparent);
3506
- }
4319
+ .dark\:fill-\(--clarify-ui-accent-background\):where(.dark, .dark *) {
4320
+ fill: var(--clarify-ui-accent-background);
3507
4321
  }
3508
4322
 
3509
4323
  .dark\:fill-white:where(.dark, .dark *) {
@@ -3520,8 +4334,8 @@
3520
4334
  }
3521
4335
  }
3522
4336
 
3523
- .dark\:stroke-emerald-200:where(.dark, .dark *) {
3524
- stroke: var(--color-emerald-200);
4337
+ .dark\:stroke-\(--clarify-ui-accent-text\):where(.dark, .dark *) {
4338
+ stroke: var(--clarify-ui-accent-text);
3525
4339
  }
3526
4340
 
3527
4341
  .dark\:stroke-white:where(.dark, .dark *) {
@@ -3546,6 +4360,10 @@
3546
4360
  stroke: var(--color-zinc-600);
3547
4361
  }
3548
4362
 
4363
+ .dark\:text-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *) {
4364
+ color: var(--clarify-theme-tokens-colors-primary);
4365
+ }
4366
+
3549
4367
  .dark\:text-amber-100:where(.dark, .dark *) {
3550
4368
  color: var(--color-amber-100);
3551
4369
  }
@@ -3554,6 +4372,10 @@
3554
4372
  color: var(--color-amber-200);
3555
4373
  }
3556
4374
 
4375
+ .dark\:text-amber-300:where(.dark, .dark *) {
4376
+ color: var(--color-amber-300);
4377
+ }
4378
+
3557
4379
  .dark\:text-amber-400:where(.dark, .dark *) {
3558
4380
  color: var(--color-amber-400);
3559
4381
  }
@@ -3562,8 +4384,8 @@
3562
4384
  color: var(--color-emerald-100);
3563
4385
  }
3564
4386
 
3565
- .dark\:text-emerald-200:where(.dark, .dark *) {
3566
- color: var(--color-emerald-200);
4387
+ .dark\:text-emerald-300:where(.dark, .dark *) {
4388
+ color: var(--color-emerald-300);
3567
4389
  }
3568
4390
 
3569
4391
  .dark\:text-emerald-400:where(.dark, .dark *) {
@@ -3582,6 +4404,10 @@
3582
4404
  color: var(--color-rose-100);
3583
4405
  }
3584
4406
 
4407
+ .dark\:text-rose-300:where(.dark, .dark *) {
4408
+ color: var(--color-rose-300);
4409
+ }
4410
+
3585
4411
  .dark\:text-rose-400:where(.dark, .dark *) {
3586
4412
  color: var(--color-rose-400);
3587
4413
  }
@@ -3594,6 +4420,10 @@
3594
4420
  color: var(--color-sky-100);
3595
4421
  }
3596
4422
 
4423
+ .dark\:text-sky-300:where(.dark, .dark *) {
4424
+ color: var(--color-sky-300);
4425
+ }
4426
+
3597
4427
  .dark\:text-sky-400:where(.dark, .dark *) {
3598
4428
  color: var(--color-sky-400);
3599
4429
  }
@@ -3606,6 +4436,10 @@
3606
4436
  color: var(--color-white);
3607
4437
  }
3608
4438
 
4439
+ .dark\:text-zinc-100:where(.dark, .dark *) {
4440
+ color: var(--color-zinc-100);
4441
+ }
4442
+
3609
4443
  .dark\:text-zinc-200:where(.dark, .dark *) {
3610
4444
  color: var(--color-zinc-200);
3611
4445
  }
@@ -3622,12 +4456,13 @@
3622
4456
  color: var(--color-zinc-500);
3623
4457
  }
3624
4458
 
3625
- .dark\:text-zinc-700:where(.dark, .dark *) {
3626
- color: var(--color-zinc-700);
4459
+ .dark\:opacity-55:where(.dark, .dark *) {
4460
+ opacity: .55;
3627
4461
  }
3628
4462
 
3629
- .dark\:opacity-100:where(.dark, .dark *) {
3630
- opacity: 1;
4463
+ .dark\:shadow-none:where(.dark, .dark *) {
4464
+ --tw-shadow: 0 0 #0000;
4465
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3631
4466
  }
3632
4467
 
3633
4468
  .dark\:ring-1:where(.dark, .dark *) {
@@ -3635,23 +4470,23 @@
3635
4470
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3636
4471
  }
3637
4472
 
3638
- .dark\:ring-amber-400\/30:where(.dark, .dark *) {
3639
- --tw-ring-color: #fcbb004d;
4473
+ .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
4474
+ --tw-ring-color: var(--clarify-theme-tokens-colors-primary);
3640
4475
  }
3641
4476
 
3642
4477
  @supports (color: color-mix(in lab, red, red)) {
3643
- .dark\:ring-amber-400\/30:where(.dark, .dark *) {
3644
- --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
4478
+ .dark\:ring-\(--clarify-theme-tokens-colors-primary\)\/20:where(.dark, .dark *) {
4479
+ --tw-ring-color: color-mix(in oklab, var(--clarify-theme-tokens-colors-primary) 20%, transparent);
3645
4480
  }
3646
4481
  }
3647
4482
 
3648
- .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
3649
- --tw-ring-color: #00d29433;
4483
+ .dark\:ring-amber-400\/30:where(.dark, .dark *) {
4484
+ --tw-ring-color: #fcbb004d;
3650
4485
  }
3651
4486
 
3652
4487
  @supports (color: color-mix(in lab, red, red)) {
3653
- .dark\:ring-emerald-400\/20:where(.dark, .dark *) {
3654
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 20%, transparent);
4488
+ .dark\:ring-amber-400\/30:where(.dark, .dark *) {
4489
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent);
3655
4490
  }
3656
4491
  }
3657
4492
 
@@ -3665,16 +4500,6 @@
3665
4500
  }
3666
4501
  }
3667
4502
 
3668
- .dark\:ring-emerald-500\/30:where(.dark, .dark *) {
3669
- --tw-ring-color: #00bb7f4d;
3670
- }
3671
-
3672
- @supports (color: color-mix(in lab, red, red)) {
3673
- .dark\:ring-emerald-500\/30:where(.dark, .dark *) {
3674
- --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
3675
- }
3676
- }
3677
-
3678
4503
  .dark\:ring-rose-500\/20:where(.dark, .dark *) {
3679
4504
  --tw-ring-color: #ff235733;
3680
4505
  }
@@ -3749,8 +4574,8 @@
3749
4574
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
3750
4575
  }
3751
4576
 
3752
- .dark\:\[--tw-prose-links-hover\:var\(--color-emerald-300\)\]:where(.dark, .dark *) {
3753
- --tw-prose-links-hover: var(--color-emerald-300);
4577
+ .dark\:\[--tw-prose-links-hover\:var\(--clarify-ui-accent-text\)\]:where(.dark, .dark *) {
4578
+ --tw-prose-links-hover: var(--clarify-ui-accent-text);
3754
4579
  }
3755
4580
 
3756
4581
  .dark\:\[--tw-prose-links\:var\(--color-white\)\]:where(.dark, .dark *) {
@@ -3765,19 +4590,35 @@
3765
4590
  .dark\:group-hover\/anchor\:stroke-white:where(.dark, .dark *):is(:where(.group\/anchor):hover *) {
3766
4591
  stroke: var(--color-white);
3767
4592
  }
4593
+ }
4594
+
4595
+ .dark\:placeholder\:text-zinc-500:where(.dark, .dark *)::placeholder {
4596
+ color: var(--color-zinc-500);
4597
+ }
4598
+
4599
+ @media (hover: hover) {
4600
+ .dark\:hover\:border-\(--clarify-theme-tokens-colors-primary\):where(.dark, .dark *):hover {
4601
+ border-color: var(--clarify-theme-tokens-colors-primary);
4602
+ }
3768
4603
 
3769
- .dark\:hover\:border-emerald-400\/40:where(.dark, .dark *):hover {
3770
- border-color: #00d29466;
4604
+ .dark\:hover\:border-white\/15:where(.dark, .dark *):hover {
4605
+ border-color: #ffffff26;
3771
4606
  }
3772
4607
 
3773
4608
  @supports (color: color-mix(in lab, red, red)) {
3774
- .dark\:hover\:border-emerald-400\/40:where(.dark, .dark *):hover {
3775
- border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
4609
+ .dark\:hover\:border-white\/15:where(.dark, .dark *):hover {
4610
+ border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
3776
4611
  }
3777
4612
  }
3778
4613
 
3779
- .dark\:hover\:bg-emerald-400:where(.dark, .dark *):hover {
3780
- background-color: var(--color-emerald-400);
4614
+ .dark\:hover\:bg-white\/2\.5:where(.dark, .dark *):hover {
4615
+ background-color: #ffffff06;
4616
+ }
4617
+
4618
+ @supports (color: color-mix(in lab, red, red)) {
4619
+ .dark\:hover\:bg-white\/2\.5:where(.dark, .dark *):hover {
4620
+ background-color: color-mix(in oklab, var(--color-white) 2.5%, transparent);
4621
+ }
3781
4622
  }
3782
4623
 
3783
4624
  .dark\:hover\:bg-white\/5:where(.dark, .dark *):hover {
@@ -3808,12 +4649,12 @@
3808
4649
  background-color: var(--color-zinc-800);
3809
4650
  }
3810
4651
 
3811
- .dark\:hover\:text-emerald-300:where(.dark, .dark *):hover {
3812
- color: var(--color-emerald-300);
4652
+ .dark\:hover\:bg-zinc-900:where(.dark, .dark *):hover {
4653
+ background-color: var(--color-zinc-900);
3813
4654
  }
3814
4655
 
3815
- .dark\:hover\:text-emerald-500:where(.dark, .dark *):hover {
3816
- color: var(--color-emerald-500);
4656
+ .dark\:hover\:text-emerald-200:where(.dark, .dark *):hover {
4657
+ color: var(--color-emerald-200);
3817
4658
  }
3818
4659
 
3819
4660
  .dark\:hover\:text-white:where(.dark, .dark *):hover {
@@ -3824,18 +4665,8 @@
3824
4665
  color: var(--color-zinc-300);
3825
4666
  }
3826
4667
 
3827
- .dark\:hover\:ring-emerald-300:where(.dark, .dark *):hover {
3828
- --tw-ring-color: var(--color-emerald-300);
3829
- }
3830
-
3831
- .dark\:hover\:ring-white\/20:where(.dark, .dark *):hover {
3832
- --tw-ring-color: #fff3;
3833
- }
3834
-
3835
- @supports (color: color-mix(in lab, red, red)) {
3836
- .dark\:hover\:ring-white\/20:where(.dark, .dark *):hover {
3837
- --tw-ring-color: color-mix(in oklab, var(--color-white) 20%, transparent);
3838
- }
4668
+ .dark\:hover\:opacity-80:where(.dark, .dark *):hover {
4669
+ opacity: .8;
3839
4670
  }
3840
4671
 
3841
4672
  .dark\:hover\:ring-zinc-600:where(.dark, .dark *):hover {
@@ -3843,16 +4674,20 @@
3843
4674
  }
3844
4675
  }
3845
4676
 
3846
- .dark\:aria-selected\:bg-zinc-800\/50:where(.dark, .dark *)[aria-selected="true"] {
3847
- background-color: #27272a80;
4677
+ .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
4678
+ border-color: #fff3;
3848
4679
  }
3849
4680
 
3850
4681
  @supports (color: color-mix(in lab, red, red)) {
3851
- .dark\:aria-selected\:bg-zinc-800\/50:where(.dark, .dark *)[aria-selected="true"] {
3852
- background-color: color-mix(in oklab, var(--color-zinc-800) 50%, transparent);
4682
+ .dark\:focus\:border-white\/20:where(.dark, .dark *):focus {
4683
+ border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
3853
4684
  }
3854
4685
  }
3855
4686
 
4687
+ .dark\:focus\:bg-zinc-950:where(.dark, .dark *):focus {
4688
+ background-color: var(--color-zinc-950);
4689
+ }
4690
+
3856
4691
  .dark\:data-focus\:bg-white\/10:where(.dark, .dark *)[data-focus] {
3857
4692
  background-color: #ffffff1a;
3858
4693
  }
@@ -3863,8 +4698,22 @@
3863
4698
  }
3864
4699
  }
3865
4700
 
3866
- .dark\:data-focus\:text-white:where(.dark, .dark *)[data-focus] {
3867
- color: var(--color-white);
4701
+ .dark\:data-open\:border-white\/15:where(.dark, .dark *)[data-open] {
4702
+ border-color: #ffffff26;
4703
+ }
4704
+
4705
+ @supports (color: color-mix(in lab, red, red)) {
4706
+ .dark\:data-open\:border-white\/15:where(.dark, .dark *)[data-open] {
4707
+ border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
4708
+ }
4709
+ }
4710
+
4711
+ .dark\:data-open\:bg-zinc-900:where(.dark, .dark *)[data-open] {
4712
+ background-color: var(--color-zinc-900);
4713
+ }
4714
+
4715
+ .dark\:data-selected\:text-emerald-300:where(.dark, .dark *)[data-selected] {
4716
+ color: var(--color-emerald-300);
3868
4717
  }
3869
4718
 
3870
4719
  @media (min-width: 48rem) {
@@ -3880,16 +4729,6 @@
3880
4729
  }
3881
4730
 
3882
4731
  @media (min-width: 64rem) {
3883
- .lg\:dark\:border-white\/10:where(.dark, .dark *) {
3884
- border-color: #ffffff1a;
3885
- }
3886
-
3887
- @supports (color: color-mix(in lab, red, red)) {
3888
- .lg\:dark\:border-white\/10:where(.dark, .dark *) {
3889
- border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
3890
- }
3891
- }
3892
-
3893
4732
  .lg\:dark\:bg-zinc-950:where(.dark, .dark *) {
3894
4733
  background-color: var(--color-zinc-950);
3895
4734
  }
@@ -3917,38 +4756,16 @@
3917
4756
  display: none;
3918
4757
  }
3919
4758
 
3920
- html :where(.\[html_\:where\(\&\>\*\)\]\:mx-auto > *) {
3921
- margin-inline: auto;
3922
- }
3923
-
3924
4759
  html :where(.\[html_\:where\(\&\>\*\)\]\:w-full > *) {
3925
4760
  width: 100%;
3926
4761
  }
3927
4762
 
3928
- html :where(.\[html_\:where\(\&\>\*\)\]\:max-w-3xl > *) {
3929
- max-width: var(--container-3xl);
3930
- }
3931
-
3932
- @media (min-width: 80rem) {
3933
- html :where(.xl\:\[html_\:where\(\&\>\*\)\]\:max-w-\[56rem\] > *) {
3934
- max-width: 56rem;
3935
- }
3936
- }
3937
-
3938
- @media (min-width: 96rem) {
3939
- html :where(.\32 xl\:\[html_\:where\(\&\>\*\)\]\:max-w-\[64rem\] > *) {
3940
- max-width: 64rem;
3941
- }
3942
- }
3943
-
3944
- html :where(.\[html_\:where\(\&\>\.not-prose\)\]\:max-w-5xl > .not-prose) {
3945
- max-width: var(--container-5xl);
4763
+ html :where(.\[html_\:where\(\&\>\*\)\]\:max-w-full > *) {
4764
+ max-width: 100%;
3946
4765
  }
3947
4766
 
3948
- @media (min-width: 96rem) {
3949
- html :where(.\32 xl\:\[html_\:where\(\&\>\.not-prose\)\]\:max-w-\[76rem\] > .not-prose) {
3950
- max-width: 76rem;
3951
- }
4767
+ html :where(.\[html_\:where\(\&\>\*\)\]\:min-w-0 > *) {
4768
+ min-width: 0;
3952
4769
  }
3953
4770
  }
3954
4771
 
@@ -4013,57 +4830,11 @@
4013
4830
  initial-value: solid;
4014
4831
  }
4015
4832
 
4016
- @property --tw-gradient-position {
4017
- syntax: "*";
4018
- inherits: false
4019
- }
4020
-
4021
- @property --tw-gradient-from {
4022
- syntax: "<color>";
4023
- inherits: false;
4024
- initial-value: #0000;
4025
- }
4026
-
4027
- @property --tw-gradient-via {
4028
- syntax: "<color>";
4029
- inherits: false;
4030
- initial-value: #0000;
4031
- }
4032
-
4033
- @property --tw-gradient-to {
4034
- syntax: "<color>";
4035
- inherits: false;
4036
- initial-value: #0000;
4037
- }
4038
-
4039
- @property --tw-gradient-stops {
4040
- syntax: "*";
4041
- inherits: false
4042
- }
4043
-
4044
- @property --tw-gradient-via-stops {
4833
+ @property --tw-leading {
4045
4834
  syntax: "*";
4046
4835
  inherits: false
4047
4836
  }
4048
4837
 
4049
- @property --tw-gradient-from-position {
4050
- syntax: "<length-percentage>";
4051
- inherits: false;
4052
- initial-value: 0%;
4053
- }
4054
-
4055
- @property --tw-gradient-via-position {
4056
- syntax: "<length-percentage>";
4057
- inherits: false;
4058
- initial-value: 50%;
4059
- }
4060
-
4061
- @property --tw-gradient-to-position {
4062
- syntax: "<length-percentage>";
4063
- inherits: false;
4064
- initial-value: 100%;
4065
- }
4066
-
4067
4838
  @property --tw-font-weight {
4068
4839
  syntax: "*";
4069
4840
  inherits: false