@infonomic/uikit 3.0.0 → 3.1.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 (21) hide show
  1. package/dist/components/dropdown/dropdown_module.css +8 -13
  2. package/dist/components/input/help-text_module.css +1 -5
  3. package/dist/components/input/select_module.css +10 -17
  4. package/dist/components/pager/pagination_module.css +7 -18
  5. package/dist/components/scroll-area/scroll-area_module.css +4 -20
  6. package/dist/components/tooltip/tooltip_module.css +4 -14
  7. package/dist/styles/styles.css +1 -1
  8. package/dist/widgets/datepicker/datepicker_module.css +2 -2
  9. package/dist/widgets/drawer/drawer_module.css +1 -5
  10. package/dist/widgets/modal/modal_module.css +1 -5
  11. package/package.json +1 -1
  12. package/src/components/dropdown/dropdown.module.css +9 -24
  13. package/src/components/input/help-text.module.css +1 -12
  14. package/src/components/input/select.module.css +10 -17
  15. package/src/components/pager/pagination.module.css +7 -23
  16. package/src/components/scroll-area/scroll-area.module.css +4 -20
  17. package/src/components/tooltip/tooltip.module.css +6 -16
  18. package/src/styles/theme/tokens.css +70 -0
  19. package/src/widgets/datepicker/datepicker.module.css +2 -2
  20. package/src/widgets/drawer/drawer.module.css +1 -5
  21. package/src/widgets/modal/modal.module.css +1 -5
package/dist/components/dropdown/dropdown_module.css CHANGED
@@ -3,10 +3,10 @@
3
3
  @layer infonomic-components {
4
4
  .dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB {
5
5
  z-index: 20;
6
- background-color: var(--canvas-25);
6
+ background-color: var(--surface-panel-elevated);
7
7
  will-change: transform, opacity;
8
8
  border-width: var(--border-width-thin);
9
- border-color: var(--border-color);
9
+ border-color: var(--surface-panel-border);
10
10
  border-style: var(--border-style-solid);
11
11
  border-radius: var(--border-radius-md);
12
12
  box-shadow: var(--shadow-sm);
@@ -36,6 +36,8 @@
36
36
  gap: var(--gap-1);
37
37
  width: 100%;
38
38
  font-size: var(--font-size-sm);
39
+ color: var(--surface-item-text);
40
+ background-color: var(--surface-item);
39
41
  cursor: default;
40
42
  border-radius: var(--border-radius-sm);
41
43
  outline: none;
@@ -45,27 +47,20 @@
45
47
  }
46
48
 
47
49
  .dropdown-item-FFroRa:hover, .dropdown-item-FFroRa:focus, .dropdown-item-FFroRa[data-highlighted] {
48
- background-color: var(--canvas-50);
50
+ background-color: var(--surface-item-hover);
51
+ color: var(--surface-item-text-hover);
49
52
  }
50
53
 
51
54
  .dropdown-separator-scM_7b {
52
- background-color: var(--border-color);
55
+ background-color: var(--surface-panel-border);
53
56
  width: 90%;
54
57
  margin: 0 auto;
55
58
  margin: var(--spacing-1) 0;
56
59
  border-top-width: var(--border-width-thin);
57
- border-top-color: var(--border-color);
60
+ border-top-color: var(--surface-panel-border);
58
61
  border-top-style: var(--border-style-solid);
59
62
  }
60
63
 
61
- .dark .dropdown-content-oNxY22:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-subcontent-JZGnvB:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
62
- background-color: var(--canvas-800);
63
- }
64
-
65
- .dark .dropdown-item-FFroRa:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-item-FFroRa:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-item-FFroRa[data-highlighted]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
66
- background-color: var(--canvas-700);
67
- }
68
-
69
64
  @keyframes slideUpAndFade-bRhQGn {
70
65
  from {
71
66
  opacity: 0;
package/dist/components/input/help-text_module.css CHANGED
@@ -2,12 +2,8 @@
2
2
 
3
3
  @layer infonomic-components {
4
4
  .text-cLsIw6 {
5
- color: var(--gray-800);
5
+ color: var(--muted);
6
6
  font-size: .875rem;
7
7
  }
8
-
9
- .dark .text-cLsIw6:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
10
- color: var(--gray-300);
11
- }
12
8
  }
13
9
 
package/dist/components/input/select_module.css CHANGED
@@ -7,42 +7,35 @@
7
7
 
8
8
  .viewport-EJrpcl {
9
9
  z-index: 50;
10
- border: 1px solid var(--border-color);
10
+ border: 1px solid var(--surface-panel-border);
11
11
  box-shadow: var(--shadow-md);
12
12
  border-radius: var(--border-radius-md);
13
- background-color: var(--background);
13
+ background-color: var(--surface-panel-elevated);
14
14
  margin-top: 2px;
15
15
  padding: 6px;
16
16
  }
17
17
 
18
- .viewport-EJrpcl:is(.dark *) {
19
- background: var(--canvas-800);
20
- }
21
-
22
18
  .group-gZB9XW {
23
19
  z-index: 50;
24
20
  }
25
21
 
26
22
  .scroll-button-ugUv7N {
27
- color: var(--text);
28
- border: 1px solid var(--border-color);
23
+ color: var(--surface-item-text);
24
+ border: 1px solid var(--surface-panel-border);
29
25
  box-shadow: var(--shadow-md);
30
26
  border-radius: var(--border-radius-md);
31
- background-color: var(--background);
27
+ background-color: var(--surface-panel-elevated);
32
28
  justify-content: center;
33
29
  align-items: center;
34
30
  padding: 2px;
35
31
  display: flex;
36
32
  }
37
33
 
38
- .scroll-button-ugUv7N:is(.dark *) {
39
- background: var(--canvas-800);
40
- }
41
-
42
34
  .select-item-PN2sc4 {
43
35
  -webkit-user-select: none;
44
36
  user-select: none;
45
- color: var(--text);
37
+ color: var(--surface-item-text);
38
+ background-color: var(--surface-item);
46
39
  border-radius: 6px;
47
40
  align-items: center;
48
41
  height: 32px;
@@ -55,13 +48,13 @@
55
48
  }
56
49
 
57
50
  .select-item-PN2sc4[data-disabled] {
58
- color: var(--disabled-text-color, #e0e0e0);
51
+ color: var(--surface-item-text-disabled);
59
52
  pointer-events: none;
60
53
  }
61
54
 
62
55
  .select-item-PN2sc4[data-highlighted] {
63
- background-color: var(--highlight-bg-color, #e0e0e0);
64
- color: var(--highlight-text-color, #000);
56
+ background-color: var(--surface-item-hover);
57
+ color: var(--surface-item-text-hover);
65
58
  outline: none;
66
59
  }
67
60
 
package/dist/components/pager/pagination_module.css CHANGED
@@ -36,12 +36,12 @@
36
36
  }
37
37
 
38
38
  .ellipses-D_NPD7, .last-button-Brbqt2, .next-button-WN4Cb5, .previous-button-XaiuAP, .first-button-wfGrPE, .number-button-bFXP3X {
39
- border: 1px solid var(--primary-500);
39
+ border: 1px solid var(--stroke-primary);
40
+ background-color: var(--background);
40
41
  height: 32px;
41
- color: var(--gray-900);
42
+ color: var(--foreground);
42
43
  line-height: 1;
43
44
  font-size: var(--font-size-sm);
44
- background-color: #fff;
45
45
  justify-content: center;
46
46
  align-items: center;
47
47
  margin-left: 0;
@@ -57,8 +57,8 @@
57
57
  }
58
58
 
59
59
  .last-button-Brbqt2:hover, .next-button-WN4Cb5:hover, .number-button-bFXP3X:hover, .previous-button-XaiuAP:hover, .first-button-wfGrPE:hover {
60
- color: #fff;
61
- background-color: var(--primary-600);
60
+ color: var(--text-on-primary);
61
+ background-color: var(--fill-primary-strong);
62
62
  }
63
63
 
64
64
  .last-button-Brbqt2:disabled, .last-button-Brbqt2[disabled], .next-button-WN4Cb5:disabled, .next-button-WN4Cb5[disabled], .number-button-bFXP3X:disabled, .number-button-bFXP3X[disabled], .previous-button-XaiuAP:disabled, .previous-button-XaiuAP[disabled], .first-button-wfGrPE:disabled, .first-button-wfGrPE[disabled] {
@@ -66,8 +66,8 @@
66
66
  }
67
67
 
68
68
  .number-button-bFXP3X.active-SfvR_g {
69
- background-color: var(--primary-600);
70
- color: #fff;
69
+ color: var(--text-on-primary);
70
+ background-color: var(--fill-primary-strong);
71
71
  }
72
72
 
73
73
  .mobile-toggle-iw4kkx {
@@ -82,17 +82,6 @@
82
82
 
83
83
  .dark .ellipses-D_NPD7, .dark .number-button-bFXP3X, .dark .next-button-WN4Cb5, .dark .last-button-Brbqt2, .dark .previous-button-XaiuAP, .dark .first-button-wfGrPE {
84
84
  border-color: var(--canvas-700);
85
- background-color: var(--canvas-800);
86
- color: var(--gray-200);
87
- }
88
-
89
- .dark .number-button-bFXP3X:hover, .dark .next-button-WN4Cb5:hover, .dark .last-button-Brbqt2:hover, .dark .previous-button-XaiuAP:hover, .dark .first-button-wfGrPE:hover {
90
- background-color: var(--canvas-700);
91
- }
92
-
93
- .dark .number-button-bFXP3X.active-SfvR_g {
94
- background-color: var(--primary-500);
95
- color: #fff;
96
85
  }
97
86
  }
98
87
 
package/dist/components/scroll-area/scroll-area_module.css CHANGED
@@ -18,14 +18,14 @@
18
18
  -webkit-user-select: none;
19
19
  user-select: none;
20
20
  touch-action: none;
21
- background: var(--gray-50);
21
+ background: var(--surface-panel-scrollbar);
22
22
  padding: 2px;
23
23
  transition: background .16s ease-out;
24
24
  display: flex;
25
25
  }
26
26
 
27
27
  .scrollbar-Y2nCxA:hover {
28
- background: var(--gray-50);
28
+ background: var(--surface-panel-scrollbar);
29
29
  }
30
30
 
31
31
  .scrollbar-Y2nCxA[data-orientation="vertical"] {
@@ -37,16 +37,8 @@
37
37
  flex-direction: column;
38
38
  }
39
39
 
40
- .scrollbar-Y2nCxA:is(.dark *) {
41
- background: var(--canvas-700);
42
- }
43
-
44
- .scrollbar-Y2nCxA:is(.dark *):hover {
45
- background: var(--canvas-700);
46
- }
47
-
48
40
  .thumb-G2gkhj {
49
- background: var(--primary-100);
41
+ background: var(--surface-panel-scrollbar-thumb);
50
42
  border-radius: var(--border-radius-sm);
51
43
  flex: 1;
52
44
  position: relative;
@@ -64,16 +56,8 @@
64
56
  transform: translate(-50%, -50%);
65
57
  }
66
58
 
67
- .thumb-G2gkhj:is(.dark *) {
68
- background: var(--primary-400);
69
- }
70
-
71
59
  .corner-kCiYUz {
72
- background: var(--gray-50);
73
- }
74
-
75
- .corner-kCiYUz:is(.dark *) {
76
- background: var(--canvas-700);
60
+ background: var(--surface-panel-scrollbar);
77
61
  }
78
62
  }
79
63
 
package/dist/components/tooltip/tooltip_module.css CHANGED
@@ -2,14 +2,14 @@
2
2
 
3
3
  @layer infonomic-components {
4
4
  .tooltip-Oc7lRI {
5
- color: var(--canvas-900);
5
+ color: var(--surface-item-text);
6
6
  -webkit-user-select: none;
7
7
  user-select: none;
8
8
  border-radius: var(--border-radius-sm);
9
9
  border-width: var(--border-width-thin);
10
10
  border-style: var(--border-style-solid);
11
- background-color: var(--gray-25);
12
- border-color: var(--gray-100);
11
+ background-color: var(--surface-panel-elevated);
12
+ border-color: var(--surface-panel-border);
13
13
  box-shadow: var(--shadow-xs);
14
14
  will-change: transform, opacity;
15
15
  animation: var(--transition-normal);
@@ -18,12 +18,6 @@
18
18
  line-height: 1;
19
19
  }
20
20
 
21
- .dark .tooltip-Oc7lRI {
22
- color: var(--gray-50);
23
- border-color: var(--canvas-700);
24
- background-color: var(--canvas-800);
25
- }
26
-
27
21
  .tooltip-Oc7lRI[data-state="delayed-open"][data-side="top"] {
28
22
  animation-name: slideDownAndFade;
29
23
  }
@@ -41,11 +35,7 @@
41
35
  }
42
36
 
43
37
  .tooltip-arrow-a77zEa {
44
- fill: var(--gray-100);
45
- }
46
-
47
- .dark .tooltip-arrow-a77zEa {
48
- fill: var(--canvas-700);
38
+ fill: var(--surface-panel-border);
49
39
  }
50
40
  }
51
41
 
package/dist/styles/styles.css CHANGED
@@ -1 +1 @@
1
- @layer infonomic-base{*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--theme-base:oklch(43.11% .1 317.53);--theme-25:oklch(from var(--theme-base)calc(l*2)c h);--theme-50:oklch(from var(--theme-base)calc(l*1.75)c h);--theme-100:oklch(from var(--theme-base)calc(l*1.5)c h);--theme-200:oklch(from var(--theme-base)calc(l*1.25)c h);--theme-300:oklch(from var(--theme-base)calc(l*1.1)c h);--theme-400:var(--theme-base);--theme-500:oklch(from var(--theme-base)calc(l*.95)c h);--theme-600:oklch(from var(--theme-base)calc(l*.9)c h);--theme-700:oklch(from var(--theme-base)calc(l*.85)c h);--theme-800:oklch(from var(--theme-base)calc(l*.8)c h);--theme-900:oklch(from var(--theme-base)calc(l*.75)c h);--theme-950:oklch(from var(--theme-base)calc(l*.7)c h);--primary-base:oklch(49.7% .189 295.76);--primary-25:oklch(from var(--primary-base)calc(l*2)c h);--primary-50:oklch(from var(--primary-base)calc(l*1.75)c h);--primary-100:oklch(from var(--primary-base)calc(l*1.5)c h);--primary-200:oklch(from var(--primary-base)calc(l*1.25)c h);--primary-300:oklch(from var(--primary-base)calc(l*1.1)c h);--primary-400:var(--primary-base);--primary-500:oklch(from var(--primary-base)calc(l*.95)c h);--primary-600:oklch(from var(--primary-base)calc(l*.9)c h);--primary-700:oklch(from var(--primary-base)calc(l*.85)c h);--primary-800:oklch(from var(--primary-base)calc(l*.8)c h);--primary-900:oklch(from var(--primary-base)calc(l*.75)c h);--primary-950:oklch(from var(--primary-base)calc(l*.7)c h);--secondary-base:oklch(84.61% .15 82.94);--secondary-25:oklch(from var(--secondary-base)calc(l*2.25).1 h);--secondary-50:oklch(from var(--secondary-base)calc(l*2)c h);--secondary-100:oklch(from var(--secondary-base)calc(l*1.75)c h);--secondary-200:oklch(from var(--secondary-base)calc(l*1.5)c h);--secondary-300:oklch(from var(--secondary-base)calc(l*1.1)c h);--secondary-400:var(--secondary-base);--secondary-500:oklch(from var(--secondary-base)calc(l*.95)c h);--secondary-600:oklch(from var(--secondary-base)calc(l*.9)c h);--secondary-700:oklch(from var(--secondary-base)calc(l*.85)c h);--secondary-800:oklch(from var(--secondary-base)calc(l*.8)c h);--secondary-900:oklch(from var(--secondary-base)calc(l*.75)c h);--secondary-950:oklch(from var(--secondary-base)calc(l*.7)c h);--accent-base:oklch(75.4% .1 324.9);--accent-25:oklch(from var(--accent-base).985 .06 h);--accent-50:oklch(from var(--accent-base).975 .08 h);--accent-100:oklch(from var(--accent-base).9 .07 h);--accent-200:oklch(from var(--accent-base).85 c h);--accent-300:oklch(from var(--accent-base).8 c h);--accent-400:var(--accent-base);--accent-500:oklch(from var(--accent-base).7 c h);--accent-600:oklch(from var(--accent-base).68 c h);--accent-700:oklch(from var(--accent-base).62 .1 h);--accent-800:oklch(from var(--accent-base).6 .1 h);--accent-900:oklch(from var(--accent-base).58 .1 h);--accent-950:oklch(from var(--accent-base).5 .11 h);--canvas-base:oklch(54.2% .0037 275.34);--canvas-25:oklch(from var(--canvas-base)calc(l*1.9)c h);--canvas-50:oklch(from var(--canvas-base)calc(l*1.75)c h);--canvas-100:oklch(from var(--canvas-base)calc(l*1.6)c h);--canvas-200:oklch(from var(--canvas-base)calc(l*1.4)c h);--canvas-300:oklch(from var(--canvas-base)calc(l*1.2)c h);--canvas-400:var(--canvas-base);--canvas-500:oklch(from var(--canvas-base)calc(l*.9)c h);--canvas-600:oklch(from var(--canvas-base)calc(l*.7)c h);--canvas-700:oklch(from var(--canvas-base)calc(l*.5)c h);--canvas-800:oklch(from var(--canvas-base)calc(l*.335)c h);--canvas-900:oklch(from var(--canvas-base)calc(l*.3)c h);--canvas-950:oklch(from var(--canvas-base)calc(l*.225)c h);--gray-base:oklch(59.84% 0 0);--gray-25:oklch(from var(--gray-base)calc(l*1.625)c h);--gray-50:oklch(from var(--gray-base)calc(l*1.575)c h);--gray-100:oklch(from var(--gray-base)calc(l*1.475)c h);--gray-200:oklch(from var(--gray-base)calc(l*1.35)c h);--gray-300:oklch(from var(--gray-base)calc(l*1.175)c h);--gray-400:var(--gray-base);--gray-500:oklch(from var(--gray-base)calc(l*.85)c h);--gray-600:oklch(from var(--gray-base)calc(l*.725)c h);--gray-700:oklch(from var(--gray-base)calc(l*.6126)c h);--gray-800:oklch(from var(--gray-base)calc(l*.5)c h);--gray-900:oklch(from var(--gray-base)calc(l*.4)c h);--gray-950:oklch(from var(--gray-base)calc(l*.3)c h);--red-base:oklch(54.27% .18 31.76);--red-25:oklch(from var(--red-base)calc(l*2)c h);--red-50:oklch(from var(--red-base)calc(l*1.75)c h);--red-100:oklch(from var(--red-base)calc(l*1.5)c h);--red-200:oklch(from var(--red-base)calc(l*1.25)c h);--red-300:oklch(from var(--red-base)calc(l*1.1)c h);--red-400:var(--red-base);--red-500:oklch(from var(--red-base)calc(l*.95)c h);--red-600:oklch(from var(--red-base)calc(l*.9)c h);--red-700:oklch(from var(--red-base)calc(l*.85)c h);--red-800:oklch(from var(--red-base)calc(l*.8)c h);--red-900:oklch(from var(--red-base)calc(l*.75)c h);--red-950:oklch(from var(--red-base)calc(l*.7)c h);--green-base:oklch(65.26% .18 142.58);--green-25:oklch(from var(--green-base)calc(l*2)c h);--green-50:oklch(from var(--green-base)calc(l*1.75)c h);--green-100:oklch(from var(--green-base)calc(l*1.5)c h);--green-200:oklch(from var(--green-base)calc(l*1.25)c h);--green-300:oklch(from var(--green-base)calc(l*1.1)c h);--green-400:var(--green-base);--green-500:oklch(from var(--green-base)calc(l*.95)c h);--green-600:oklch(from var(--green-base)calc(l*.9)c h);--green-700:oklch(from var(--green-base)calc(l*.85)c h);--green-800:oklch(from var(--green-base)calc(l*.8)c h);--green-900:oklch(from var(--green-base)calc(l*.75)c h);--green-950:oklch(from var(--green-base)calc(l*.7)c h);--blue-base:oklch(53.66% .1942 265.89);--blue-25:oklch(from var(--blue-base)calc(l*2)c h);--blue-50:oklch(from var(--blue-base)calc(l*1.75)c h);--blue-100:oklch(from var(--blue-base)calc(l*1.5)c h);--blue-200:oklch(from var(--blue-base)calc(l*1.25)c h);--blue-300:oklch(from var(--blue-base)calc(l*1.1)c h);--blue-400:var(--blue-base);--blue-500:oklch(from var(--blue-base)calc(l*.95)c h);--blue-600:oklch(from var(--blue-base)calc(l*.9)c h);--blue-700:oklch(from var(--blue-base)calc(l*.85)c h);--blue-800:oklch(from var(--blue-base)calc(l*.8)c h);--blue-900:oklch(from var(--blue-base)calc(l*.75)c h);--blue-950:oklch(from var(--blue-base)calc(l*.7)c h);--yellow-base:oklch(75% .15 82.94);--yellow-25:oklch(from var(--yellow-base)calc(l*2)c h);--yellow-50:oklch(from var(--yellow-base)calc(l*1.75)c h);--yellow-100:oklch(from var(--yellow-base)calc(l*1.5)c h);--yellow-200:oklch(from var(--yellow-base)calc(l*1.25)c h);--yellow-300:oklch(from var(--yellow-base)calc(l*1.1)c h);--yellow-400:var(--yellow-base);--yellow-500:oklch(from var(--yellow-base)calc(l*.95)c h);--yellow-600:oklch(from var(--yellow-base)calc(l*.9)c h);--yellow-700:oklch(from var(--yellow-base)calc(l*.85)c h);--yellow-800:oklch(from var(--yellow-base)calc(l*.8)c h);--yellow-900:oklch(from var(--yellow-base)calc(l*.75)c h);--yellow-950:oklch(from var(--yellow-base)calc(l*.7)c h);--breakpoint-xs:480px;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1050px;--breakpoint-xl:1230px;--breakpoint-2xl:1500px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:2.625rem;--font-size-6xl:3rem;--font-size-7xl:3.375rem;--font-size-8xl:3.75rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-ultrabold:900;--line-height-tight:1.1;--line-height-snug:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tight:-.02em;--letter-spacing-normal:0;--letter-spacing-wide:.05em;--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-8:32px;--spacing-10:40px;--spacing-12:48px;--spacing-16:64px;--spacing-20:80px;--spacing-24:96px;--spacing-32:128px;--border-radius-none:0px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-xl:16px;--border-radius-2xl:24px;--border-radius-full:9999px;--border-width-thin:1px;--border-width-normal:2px;--border-width-thick:4px;--border-style-solid:solid;--border-style-dashed:dashed;--border-style-dotted:dotted;--ring-offset-width:2px;--ring-inset: ;--ring-shadow:0 0 #0000;--shadow:0 0 #0000;--shadow-xs:0px 1px 2px #0000000d;--shadow-sm:0px 2px 4px #0000001a;--shadow-md:0px 4px 6px #0000001a;--shadow-lg:0px 6px 12px #00000026;--shadow-xl:0px 8px 16px #0003;--transition-fast:.175s ease-in-out;--transition-normal:.23s ease-in-out;--transition-slow:.4s ease-in-out;--z-index-low:10;--z-index-medium:100;--z-index-high:1000;--z-index-modal:1050;--z-index-toast:1100;--opacity-0:0;--opacity-25:.25;--opacity-50:.5;--opacity-75:.75;--opacity-100:1;--grid-columns-2:2;--grid-columns-3:3;--grid-columns-4:4;--grid-columns-5:5;--grid-columns-6:6;--grid-columns-7:7;--grid-columns-8:8;--grid-columns-9:9;--grid-columns-10:10;--grid-columns-11:11;--grid-columns-12:12;--grid-gap-sm:8px;--grid-gap-md:16px;--grid-gap-lg:24px;--grid-column-size-xs:240px;--grid-column-size-sm:260px;--grid-column-size-md:320px;--grid-column-size-lg:480px;--gap-0:var(--spacing-0);--gap-1:var(--spacing-1);--gap-2:var(--spacing-2);--gap-3:var(--spacing-3);--gap-4:var(--spacing-4);--gap-5:var(--spacing-5);--gap-6:var(--spacing-6);--gap-8:var(--spacing-8);--gap-10:var(--spacing-10);--gap-12:var(--spacing-12);--gap-16:var(--spacing-16);--gap-20:var(--spacing-20);--gap-24:var(--spacing-24);--gap-32:var(--spacing-32);--flex-row:row;--flex-column:column;--flex-wrap:wrap;--flex-nowrap:nowrap;--flex-center:center}@keyframes enterFromRight{0%{opacity:0;transform:translate(200px)}to{opacity:1;transform:translate(0)}}@keyframes enterFromLeft{0%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(0)}}@keyframes exitToRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(200px)}}@keyframes exitToLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-200px)}}@keyframes scaleIn{0%{opacity:0;transform:rotateX(-30deg)scale(.9)}to{opacity:1;transform:rotateX(0)scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:rotateX(0)scale(1)}to{opacity:0;transform:rotateX(-10deg)scale(.95)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUpAndFade{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRightAndFade{0%{opacity:0;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeftAndFade{0%{opacity:0;transform:translate(2px)}to{opacity:1;transform:translate(0)}}h1{font-size:1.75rem;font-weight:600;line-height:1.125}h2{font-size:1.5rem;font-weight:600;line-height:1.125}h3{font-size:1.25rem;font-weight:600;line-height:1.1}h4{font-size:1rem;font-weight:600;line-height:1.1}}@layer infonomic-utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.text-5xl{font-size:var(--font-size-5xl)}.text-6xl{font-size:var(--font-size-6xl)}.text-7xl{font-size:var(--font-size-7xl)}.text-8xl{font-size:var(--font-size-8xl)}.font-light{font-weight:var(--font-weight-light)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.font-extrabold{font-weight:var(--font-weight-extrabold)}.font-ultrabold{font-weight:var(--font-weight-ultrabold)}.leading-tight{line-height:var(--line-height-tight)}.leading-snug{line-height:var(--line-height-snug)}.leading-normal{line-height:var(--line-height-normal)}.leading-relaxed{line-height:var(--line-height-relaxed)}.leading-loose{line-height:var(--line-height-loose)}.tracking-tight{letter-spacing:var(--letter-spacing-tight)}.tracking-normal{letter-spacing:var(--letter-spacing-normal)}.tracking-wide{letter-spacing:var(--letter-spacing-wide)}@media (width>=640px){.sm\:text-xs{font-size:var(--font-size-xs)}.sm\:text-sm{font-size:var(--font-size-sm)}.sm\:text-base{font-size:var(--font-size-base)}.sm\:text-lg{font-size:var(--font-size-lg)}.sm\:text-xl{font-size:var(--font-size-xl)}.sm\:text-2xl{font-size:var(--font-size-2xl)}.sm\:text-3xl{font-size:var(--font-size-3xl)}.sm\:text-4xl{font-size:var(--font-size-4xl)}.sm\:text-5xl{font-size:var(--font-size-5xl)}.sm\:text-6xl{font-size:var(--font-size-6xl)}.sm\:text-7xl{font-size:var(--font-size-7xl)}.sm\:text-8xl{font-size:var(--font-size-8xl)}.sm\:font-light{font-weight:var(--font-weight-light)}.sm\:font-normal{font-weight:var(--font-weight-normal)}.sm\:font-medium{font-weight:var(--font-weight-medium)}.sm\:font-semibold{font-weight:var(--font-weight-semibold)}.sm\:font-bold{font-weight:var(--font-weight-bold)}.sm\:font-extrabold{font-weight:var(--font-weight-extrabold)}.sm\:font-ultrabold{font-weight:var(--font-weight-ultrabold)}.sm\:leading-tight{line-height:var(--line-height-tight)}.sm\:leading-snug{line-height:var(--line-height-snug)}.sm\:leading-normal{line-height:var(--line-height-normal)}.sm\:leading-relaxed{line-height:var(--line-height-relaxed)}.sm\:leading-loose{line-height:var(--line-height-loose)}.sm\:tracking-tight{letter-spacing:var(--letter-spacing-tight)}.sm\:tracking-normal{letter-spacing:var(--letter-spacing-normal)}.sm\:tracking-wide{letter-spacing:var(--letter-spacing-wide)}}@media (width>=768px){.md\:text-xs{font-size:var(--font-size-xs)}.md\:text-sm{font-size:var(--font-size-sm)}.md\:text-base{font-size:var(--font-size-base)}.md\:text-lg{font-size:var(--font-size-lg)}.md\:text-xl{font-size:var(--font-size-xl)}.md\:text-2xl{font-size:var(--font-size-2xl)}.md\:text-3xl{font-size:var(--font-size-3xl)}.md\:text-4xl{font-size:var(--font-size-4xl)}.md\:text-5xl{font-size:var(--font-size-5xl)}.md\:text-6xl{font-size:var(--font-size-6xl)}.md\:text-7xl{font-size:var(--font-size-7xl)}.md\:text-8xl{font-size:var(--font-size-8xl)}.md\:font-light{font-weight:var(--font-weight-light)}.md\:font-normal{font-weight:var(--font-weight-normal)}.md\:font-medium{font-weight:var(--font-weight-medium)}.md\:font-semibold{font-weight:var(--font-weight-semibold)}.md\:font-bold{font-weight:var(--font-weight-bold)}.md\:font-extrabold{font-weight:var(--font-weight-extrabold)}.md\:font-ultrabold{font-weight:var(--font-weight-ultrabold)}.md\:leading-tight{line-height:var(--line-height-tight)}.md\:leading-snug{line-height:var(--line-height-snug)}.md\:leading-normal{line-height:var(--line-height-normal)}.md\:leading-relaxed{line-height:var(--line-height-relaxed)}.md\:leading-loose{line-height:var(--line-height-loose)}.md\:tracking-tight{letter-spacing:var(--letter-spacing-tight)}.md\:tracking-normal{letter-spacing:var(--letter-spacing-normal)}.md\:tracking-wide{letter-spacing:var(--letter-spacing-wide)}}.m-0{margin:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.m-8{margin:var(--spacing-8)}.m-10{margin:var(--spacing-10)}.m-12{margin:var(--spacing-12)}.m-16{margin:var(--spacing-16)}.p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-5{padding:var(--spacing-5)}.p-6{padding:var(--spacing-6)}.p-8{padding:var(--spacing-8)}.p-10{padding:var(--spacing-10)}.p-12{padding:var(--spacing-12)}.p-16{padding:var(--spacing-16)}.p-20{padding:var(--spacing-20)}.p-24{padding:var(--spacing-24)}.p-32{padding:var(--spacing-32)}@media (width>=640px){.sm\:m-0{margin:var(--spacing-0)}.sm\:m-1{margin:var(--spacing-1)}.sm\:m-2{margin:var(--spacing-2)}.sm\:m-3{margin:var(--spacing-3)}.sm\:m-4{margin:var(--spacing-4)}.sm\:m-5{margin:var(--spacing-5)}.sm\:m-6{margin:var(--spacing-6)}.sm\:m-8{margin:var(--spacing-8)}.sm\:m-10{margin:var(--spacing-10)}.sm\:m-12{margin:var(--spacing-12)}.sm\:m-16{margin:var(--spacing-16)}.sm\:p-0{padding:var(--spacing-0)}.sm\:p-1{padding:var(--spacing-1)}.sm\:p-2{padding:var(--spacing-2)}.sm\:p-3{padding:var(--spacing-3)}.sm\:p-4{padding:var(--spacing-4)}.sm\:p-5{padding:var(--spacing-5)}.sm\:p-6{padding:var(--spacing-6)}.sm\:p-8{padding:var(--spacing-8)}.sm\:p-10{padding:var(--spacing-10)}.sm\:p-12{padding:var(--spacing-12)}.sm\:p-16{padding:var(--spacing-16)}.sm\:p-20{padding:var(--spacing-20)}.sm\:p-24{padding:var(--spacing-24)}.sm\:p-32{padding:var(--spacing-32)}}@media (width>=768px){.md\:m-0{margin:var(--spacing-0)}.md\:m-1{margin:var(--spacing-1)}.md\:m-2{margin:var(--spacing-2)}.md\:m-3{margin:var(--spacing-3)}.md\:m-4{margin:var(--spacing-4)}.md\:m-5{margin:var(--spacing-5)}.md\:m-6{margin:var(--spacing-6)}.md\:m-8{margin:var(--spacing-8)}.md\:m-10{margin:var(--spacing-10)}.md\:m-12{margin:var(--spacing-12)}.md\:m-16{margin:var(--spacing-16)}.md\:p-0{padding:var(--spacing-0)}.md\:p-1{padding:var(--spacing-1)}.md\:p-2{padding:var(--spacing-2)}.md\:p-3{padding:var(--spacing-3)}.md\:p-4{padding:var(--spacing-4)}.md\:p-5{padding:var(--spacing-5)}.md\:p-6{padding:var(--spacing-6)}.md\:p-8{padding:var(--spacing-8)}.md\:p-10{padding:var(--spacing-10)}.md\:p-12{padding:var(--spacing-12)}.md\:p-16{padding:var(--spacing-16)}.md\:p-20{padding:var(--spacing-20)}.md\:p-24{padding:var(--spacing-24)}.md\:p-32{padding:var(--spacing-32)}}.flex{display:flex}.flex-row{flex-direction:var(--flex-row)}.flex-column{flex-direction:var(--flex-column)}.flex-wrap{flex-wrap:var(--flex-wrap)}.flex-nowrap{flex-wrap:var(--flex-nowrap)}.items-center{align-items:var(--flex-center)}.justify-center{justify-content:var(--flex-center)}@media (width>=640px){.sm\:flex{display:flex}.sm\:flex-row{flex-direction:var(--flex-row)}.sm\:flex-column{flex-direction:var(--flex-column)}.sm\:flex-wrap{flex-wrap:var(--flex-wrap)}.sm\:flex-nowrap{flex-wrap:var(--flex-nowrap)}.sm\:items-center{align-items:var(--flex-center)}.sm\:justify-center{justify-content:var(--flex-center)}}@media (width>=768px){.md\:flex{display:flex}.md\:flex-row{flex-direction:var(--flex-row)}.md\:flex-column{flex-direction:var(--flex-column)}.md\:flex-wrap{flex-wrap:var(--flex-wrap)}.md\:flex-nowrap{flex-wrap:var(--flex-nowrap)}.md\:items-center{align-items:var(--flex-center)}.md\:justify-center{justify-content:var(--flex-center)}}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(var(--grid-columns-2),minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(var(--grid-columns-3),minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(var(--grid-columns-4),minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(var(--grid-columns-5),minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(var(--grid-columns-6),minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(var(--grid-columns-7),minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(var(--grid-columns-8),minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(var(--grid-columns-9),minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(var(--grid-columns-10),minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(var(--grid-columns-11),minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(var(--grid-columns-12),minmax(0,1fr))}.gap-0{gap:var(--gap-0)}.gap-1{gap:var(--gap-1)}.gap-2{gap:var(--gap-2)}.gap-3{gap:var(--gap-3)}.gap-4{gap:var(--gap-4)}.gap-5{gap:var(--gap-5)}.gap-6{gap:var(--gap-6)}.gap-8{gap:var(--gap-8)}.gap-10{gap:var(--gap-10)}.gap-12{gap:var(--gap-12)}.gap-16{gap:var(--gap-16)}.gap-20{gap:var(--gap-20)}.gap-24{gap:var(--gap-24)}.gap-32{gap:var(--gap-32)}@media (width>=640px){.sm\:grid{display:grid}.sm\:grid-cols-12{grid-template-columns:repeat(var(--grid-columns),1fr)}.sm\:gap-0{gap:.5rem;gap:var(--gap-0)}.sm\:gap-1{gap:var(--gap-1)}.sm\:gap-2{gap:var(--gap-2)}.sm\:gap-3{gap:var(--gap-3)}.sm\:gap-4{gap:var(--gap-4)}.sm\:gap-5{gap:var(--gap-5)}.sm\:gap-6{gap:var(--gap-6)}.sm\:gap-8{gap:var(--gap-8)}.sm\:gap-10{gap:var(--gap-10)}.sm\:gap-12{gap:var(--gap-12)}.sm\:gap-16{gap:var(--gap-16)}.sm\:gap-20{gap:var(--gap-20)}.sm\:gap-24{gap:var(--gap-24)}.sm\:gap-32{gap:var(--gap-32)}}@media (width>=768px){.md\:grid{display:grid}.md\:grid-cols-12{grid-template-columns:repeat(var(--grid-columns),1fr)}.md\:gap-0{gap:.5rem;gap:var(--gap-0)}.md\:gap-1{gap:var(--gap-1)}.md\:gap-2{gap:var(--gap-2)}.md\:gap-3{gap:var(--gap-3)}.md\:gap-4{gap:var(--gap-4)}.md\:gap-5{gap:var(--gap-5)}.md\:gap-6{gap:var(--gap-6)}.md\:gap-8{gap:var(--gap-8)}.md\:gap-10{gap:var(--gap-10)}.md\:gap-12{gap:var(--gap-12)}.md\:gap-16{gap:var(--gap-16)}.md\:gap-20{gap:var(--gap-20)}.md\:gap-24{gap:var(--gap-24)}.md\:gap-32{gap:var(--gap-32)}}.border{border-width:var(--border-width-normal);border-style:var(--border-style-solid)}.border-thin{border-width:var(--border-width-thin)}.border-thick{border-width:var(--border-width-thick)}.rounded-none{border-radius:var(--border-radius-none)}.rounded-sm{border-radius:var(--border-radius-sm)}.rounded,.rounded-md{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.rounded-xl{border-radius:var(--border-radius-xl)}.rounded-2xl{border-radius:var(--border-radius-2xl)}.rounded-full{border-radius:var(--border-radius-full)}@media (width>=640px){.sm\:border{border-width:var(--border-width-normal);border-style:var(--border-style-solid)}.sm\:border-thin{border-width:var(--border-width-thin)}.sm\:border-thick{border-width:var(--border-width-thick)}.sm\:rounded-none{border-radius:var(--border-radius-none)}.sm\:rounded-sm,.sm\:rounded,.sm\:rounded-md{border-radius:var(--border-radius-sm)}.sm\:rounded-lg{border-radius:var(--border-radius-lg)}.sm\:rounded-xl{border-radius:var(--border-radius-xl)}.sm\:rounded-2xl{border-radius:var(--border-radius-2xl)}.sm\:rounded-full{border-radius:var(--border-radius-full)}}@media (width>=768px){.md\:border{border-width:var(--border-width-normal);border-style:var(--border-style-solid)}.md\:border-thin{border-width:var(--border-width-thin)}.md\:border-thick{border-width:var(--border-width-thick)}.md\:rounded-none{border-radius:var(--border-radius-none)}.md\:rounded-sm{border-radius:var(--border-radius-sm)}.md\:rounded,.md\:rounded-md{border-radius:var(--border-radius-md)}.md\:rounded-lg{border-radius:var(--border-radius-lg)}.md\:rounded-xl{border-radius:var(--border-radius-xl)}.md\:rounded-2xl{border-radius:var(--border-radius-2xl)}.md\:rounded-full{border-radius:var(--border-radius-full)}}.shadow{box-shadow:var(--shadow)}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}@media (width>=768px){.md\:shadow{box-shadow:var(--shadow)}.md\:shadow-xs{box-shadow:var(--shadow-xs)}.md\:shadow-sm{box-shadow:var(--shadow-sm)}.md\:shadow-md{box-shadow:var(--shadow-md)}.md\:shadow-lg{box-shadow:var(--shadow-lg)}.md\:shadow-xl{box-shadow:var(--shadow-xl)}}.opacity-0{opacity:var(--opacity-0)}.opacity-25{opacity:var(--opacity-25)}.opacity-50{opacity:var(--opacity-50)}.opacity-75{opacity:var(--opacity-75)}.opacity-100{opacity:var(--opacity-100)}@media (width>=768px){.md\:opacity-0{opacity:var(--opacity-0)}.md\:opacity-25{opacity:var(--opacity-25)}.md\:opacity-50{opacity:var(--opacity-50)}.md\:opacity-75{opacity:var(--opacity-75)}.md\:opacity-100{opacity:var(--opacity-100)}}.transition-fast{transition:var(--transition-fast)}.transition-normal{transition:var(--transition-normal)}.transition-slow{transition:var(--transition-slow)}.ring-primary-offset-primary:focus:not(.dark *),.ring-primary-offset-primary:active:not(.dark *){--ring-shadow:var(--ring-inset)0 0 0 calc(1px + var(--ring-offset-width))var(--primary-700);--ring-offset-shadow:var(--ring-inset)0 0 0 var(--ring-offset-width)var(--primary-400);box-shadow:var(--ring-offset-shadow),var(--ring-shadow),var(--shadow,0 0 #0000)}.ring-secondary-offset-secondary:focus:not(.dark *),.ring-secondary-offset-secondary:active:not(.dark *){--ring-shadow:var(--ring-inset)0 0 0 calc(1px + var(--ring-offset-width))var(--secondary-700);--ring-offset-shadow:var(--ring-inset)0 0 0 var(--ring-offset-width)var(--secondary-400);box-shadow:var(--ring-offset-shadow),var(--ring-shadow),var(--shadow,0 0 #0000)}.ring-accent-offset-accent:focus:not(.dark *),.ring-accent-offset-accent:active:not(.dark *){--ring-shadow:var(--ring-inset)0 0 0 calc(1px + var(--ring-offset-width))var(--accent-700);--ring-offset-shadow:var(--ring-inset)0 0 0 var(--ring-offset-width)var(--accent-400);box-shadow:var(--ring-offset-shadow),var(--ring-shadow),var(--shadow,0 0 #0000)}.fix-scroll-layout-shift-right{padding-right:var(--removed-body-scroll-bar-size)}.fix-scroll-layout-shift-left{padding-left:var(--removed-body-scroll-bar-size)}}@layer infonomic-theme{input:autofill,input:autofill:hover,input:autofill:focus,textarea:autofill,textarea:autofill:hover,textarea:autofill:focus,select:autofill,select:autofill:hover,select:autofill:focus{-webkit-text-fill-color:black!important;color:#000!important;background-color:#fad9a7!important;border:1px solid #d89d3d!important;transition:background-color 5000s ease-in-out!important;-webkit-box-shadow:inset 0 0 0 1000px #fff2dc!important;box-shadow:inset 0 0 0 1000px #fff2dc!important}.dark input:autofill,.dark input:autofill:hover,.dark input:autofill:focus,.dark textarea:autofill,.dark textarea:autofill:hover,.dark textarea:autofill:focus,.dark select:autofill,.dark select:autofill:hover,.dark select:autofill:focus{border:1px solid var(--theme-600)!important;-webkit-text-fill-color:white!important;-webkit-box-shadow:0 0 0px 1000px var(--theme-600)inset!important;box-shadow:0 0 0px 1000px var(--theme-600)inset!important;color:#fff!important;background-color:#64646480!important;transition:background-color 5000s ease-in-out!important}:root{--scroll-bar-thumb:var(--theme-400);--scroll-bar-track:var(--theme-600)}:root.dark{--scroll-bar-thumb:var(--canvas-700);--scroll-bar-track:var(--canvas-900)}::-webkit-scrollbar{width:.6em;height:.6em}::-webkit-scrollbar-thumb{background:var(--scroll-bar-thumb)}::-webkit-scrollbar-track{background:var(--scroll-bar-track)}::-webkit-scrollbar-corner{background:var(--scroll-bar-track)}html{scrollbar-width:thin;scrollbar-color:var(--scroll-bar-thumb)var(--scroll-bar-track)}.component--scroller,.dark .component--scroller{--scroll-bar-thumb:var(--scroll-bar-thumb);--scroll-bar-track:var(--scroll-bar-track)}.component--scroller{scrollbar-width:thin;scrollbar-color:var(--scroll-bar-thumb)var(--scroll-bar-track);overflow-y:auto}:root{--fill-primary-strong:var(--primary-600);--fill-primary-strong-hover:oklch(from var(--primary-600)calc(l*.9)c h);--fill-primary-strong-disabled:oklch(from var(--primary-600)calc(l*1.1)calc(c*.85)h);--fill-primary-weak:oklch(from var(--primary-600)calc(l*2.15)calc(c*.2)h);--fill-primary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-primary:white;--text-on-primary-disabled:oklch(90% 5.0664e-8 90);--text-primary-strong:var(--primary-700);--text-primary-weak:oklch(from var(--primary-600)calc(l*.7)c h);--text-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.5)h);--stroke-primary:var(--primary-700);--stroke-primary-hover:oklch(from var(--primary-700)calc(l*.85)c h);--stroke-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.8)h);--ring-primary:var(--primary-600);--gradient-primary-start:var(--primary-500);--gradient-primary-end:var(--primary-700);--gradient-primary-foreground:white;--gradient-primary-disabled:oklch(from var(--primary-700)calc(l*1.2)calc(c*.85)h);--fill-secondary-strong:var(--secondary-500);--fill-secondary-strong-hover:oklch(from var(--secondary-500)calc(l*.95)c h);--fill-secondary-strong-disabled:oklch(from var(--secondary-500)calc(l*1.1)calc(c*.85)h);--fill-secondary-weak:oklch(from var(--secondary-500)calc(l*1.6)calc(c*.2)h);--fill-secondary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-secondary:black;--text-on-secondary-disabled:oklch(0% 0 0);--text-secondary-strong:var(--secondary-950);--text-secondary-weak:oklch(from var(--secondary-500)calc(l*.7)c h);--text-secondary-disabled:oklch(from var(--secondary-950)calc(l*1.5)calc(c*.5)h);--stroke-secondary:var(--secondary-700);--stroke-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.5)calc(c*.8)h);--ring-secondary:var(--secondary-500);--stroke-secondary-hover:oklch(from var(--secondary-700)calc(l*.85)c h);--gradient-secondary-start:var(--secondary-500);--gradient-secondary-end:var(--secondary-700);--gradient-secondary-foreground:black;--gradient-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.2)calc(c*.85)h);--fill-noeffect-strong:var(--gray-100);--fill-noeffect-strong-hover:oklch(from var(--gray-100)calc(l*.95)c h);--fill-noeffect-strong-disabled:oklch(from var(--gray-100)calc(l*1.1)calc(c*.85)h);--fill-noeffect-weak:oklch(from var(--gray-100)calc(l*2.9)calc(c*.2)h);--fill-noeffect-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-noeffect:black;--text-on-noeffect-disabled:oklch(0% 0 0);--text-noeffect-strong:var(--gray-800);--text-noeffect-weak:oklch(from var(--gray-100)calc(l*.5)c h);--text-noeffect-disabled:oklch(from var(--gray-800)calc(l*1.5)calc(c*.5)h);--stroke-noeffect:var(--gray-500);--stroke-noeffect-hover:oklch(from var(--gray-500)calc(l*.75)c h);--stroke-noeffect-disabled:oklch(from var(--gray-500)calc(l*1.5)calc(c*.8)h);--ring-noeffect:var(--gray-200);--gradient-noeffect-start:var(--gray-100);--gradient-noeffect-end:var(--gray-200);--gradient-noeffect-foreground:black;--gradient-noeffect-hover:var(--gray-400);--gradient-noeffect-disabled:oklch(from var(--gray-200)calc(l*1.2)calc(c*.85)h);--fill-success-strong:var(--green-400);--fill-success-strong-hover:oklch(from var(--green-400)calc(l*.9)c h);--fill-success-strong-disabled:oklch(from var(--green-400)calc(l*1.1)calc(c*.85)h);--fill-success-weak:oklch(from var(--green-400)calc(l*1.6)calc(c*.2)h);--fill-success-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-success:white;--text-on-success-disabled:oklch(90% 5.0664e-8 90);--text-success-strong:var(--green-600);--text-success-weak:oklch(from var(--green-400)calc(l*.7)c h);--text-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.5)h);--stroke-success:var(--green-600);--stroke-success-hover:oklch(from var(--green-600)calc(l*.85)c h);--stroke-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.8)h);--ring-success:var(--green-400);--gradient-success-start:var(--green-500);--gradient-success-end:var(--green-700);--gradient-success-foreground:white;--gradient-success-disabled:oklch(from var(--green-700)calc(l*1.2)calc(c*.85)h);--fill-info-strong:var(--blue-400);--fill-info-strong-hover:oklch(from var(--blue-400)calc(l*.9)c h);--fill-info-strong-disabled:oklch(from var(--blue-400)calc(l*1.1)calc(c*.85)h);--fill-info-weak:oklch(from var(--blue-400)calc(l*1.9)calc(c*.2)h);--fill-info-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-info:white;--text-on-info-disabled:oklch(90% 5.0664e-8 90);--text-info-strong:var(--blue-300);--text-info-weak:oklch(from var(--blue-400)calc(l*.7)c h);--text-info-disabled:oklch(from var(--blue-300)calc(l*1.5)calc(c*.5)h);--stroke-info:var(--blue-500);--stroke-info-hover:oklch(from var(--blue-500)calc(l*.85)c h);--stroke-info-disabled:oklch(from var(--blue-500)calc(l*1.5)calc(c*.8)h);--ring-info:var(--blue-400);--gradient-info-start:var(--blue-500);--gradient-info-end:var(--blue-700);--gradient-info-foreground:white;--gradient-info-disabled:oklch(from var(--blue-700)calc(l*1.2)calc(c*.85)h);--fill-warning-strong:var(--yellow-300);--fill-warning-strong-hover:oklch(from var(--yellow-300)calc(l*.95)c h);--fill-warning-strong-disabled:oklch(from var(--yellow-300)calc(l*1.1)calc(c*.85)h);--fill-warning-weak:oklch(from var(--yellow-300)calc(l*1.9)calc(c*.2)h);--fill-warning-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-warning:black;--text-on-warning-disabled:oklch(0% 0 0);--text-warning-strong:var(--yellow-700);--text-warning-weak:oklch(from var(--yellow-300)calc(l*.6)c h);--text-warning-disabled:oklch(from var(--yellow-700)calc(l*1.5)calc(c*.5)h);--stroke-warning:var(--yellow-500);--stroke-warning-hover:oklch(from var(--yellow-500)calc(l*.85)c h);--stroke-warning-disabled:oklch(from var(--yellow-500)calc(l*1.5)calc(c*.8)h);--ring-warning:var(--yellow-300);--gradient-warning-start:var(--yellow-300);--gradient-warning-end:var(--yellow-400);--gradient-warning-foreground:black;--gradient-warning-disabled:oklch(from var(--yellow-400)calc(l*1.2)calc(c*.85)h);--fill-danger-strong:var(--red-400);--fill-danger-strong-hover:oklch(from var(--red-400)calc(l*.9)c h);--fill-danger-strong-disabled:oklch(from var(--red-400)calc(l*1.1)calc(c*.85)h);--fill-danger-weak:oklch(from var(--red-400)calc(l*1.8)calc(c*.3)h);--fill-danger-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-danger:white;--text-on-danger-disabled:oklch(90% 5.0664e-8 90);--text-danger-strong:var(--red-500);--text-danger-weak:oklch(from var(--red-400)calc(l*.7)c h);--text-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.5)h);--stroke-danger:var(--red-500);--stroke-danger-hover:oklch(from var(--red-500)calc(l*.85)c h);--stroke-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.8)h);--ring-danger:var(--red-400);--gradient-danger-start:var(--red-500);--gradient-danger-end:var(--red-700);--gradient-danger-foreground:white;--gradient-danger-disabled:oklch(from var(--red-700)calc(l*1.2)calc(c*.85)h)}.dark{--fill-primary-strong:var(--primary-600);--fill-primary-strong-hover:oklch(from var(--primary-600)calc(l*.9)c h);--fill-primary-strong-disabled:oklch(from var(--primary-600)calc(l*.85)calc(c*.85)h);--fill-primary-weak:oklch(from var(--primary-600)calc(l*.45)calc(c*.1)h);--fill-primary-weak-hover:var(--canvas-800);--text-on-primary:white;--text-on-primary-disabled:oklch(85% 5.0664e-8 90);--text-primary-strong:var(--primary-100);--text-primary-weak:var(--primary-600);--text-primary-disabled:oklch(from var(--primary-100)calc(l*.8)calc(c*.8)h);--stroke-primary:var(--primary-500);--stroke-primary-hover:oklch(from var(--primary-500)calc(l*1.1)c h);--stroke-primary-disabled:oklch(from var(--primary-500)calc(l*.8)calc(c*.8)h);--ring-primary:var(--primary-600);--gradient-primary-start:var(--primary-500);--gradient-primary-end:var(--primary-700);--gradient-primary-foreground:white;--gradient-primary-disabled:oklch(from var(--primary-700)calc(l*.85)calc(c*.85)h);--fill-secondary-strong:var(--secondary-500);--fill-secondary-strong-hover:oklch(from var(--secondary-500)calc(l*.95)c h);--fill-secondary-strong-disabled:oklch(from var(--secondary-500)calc(l*.85)calc(c*.85)h);--fill-secondary-weak:oklch(from var(--secondary-500)calc(l*.3)calc(c*.1)h);--fill-secondary-weak-hover:var(--canvas-800);--text-on-secondary:black;--text-on-secondary-disabled:oklch(0% 0 0);--text-secondary-strong:var(--secondary-500);--text-secondary-weak:var(--secondary-500);--text-secondary-disabled:oklch(from var(--secondary-500)calc(l*.8)calc(c*.8)h);--stroke-secondary:var(--secondary-500);--stroke-secondary-hover:oklch(from var(--secondary-500)calc(l*1.1)c h);--stroke-secondary-disabled:oklch(from var(--secondary-500)calc(l*.8)calc(c*.8)h);--ring-secondary:var(--secondary-500);--gradient-secondary-start:var(--secondary-500);--gradient-secondary-end:var(--secondary-700);--gradient-secondary-foreground:black;--gradient-secondary-disabled:oklch(from var(--secondary-700)calc(l*.85)calc(c*.85)h);--fill-noeffect-strong:var(--gray-900);--fill-noeffect-strong-hover:oklch(from var(--gray-900)calc(l*.95)c h);--fill-noeffect-strong-disabled:oklch(from var(--gray-900)calc(l*.85)calc(c*.85)h);--fill-noeffect-weak:oklch(from var(--gray-900)calc(l*.75)calc(c*.2)h);--fill-noeffect-weak-hover:var(--canvas-800);--text-on-noeffect:white;--text-on-noeffect-disabled:oklch(85% 5.0664e-8 90);--text-noeffect-strong:var(--gray-300);--text-noeffect-weak:var(--gray-300);--text-noeffect-disabled:oklch(from var(--gray-300)calc(l*.85)calc(c*.85)h);--stroke-noeffect:var(--gray-500);--stroke-noeffect-hover:oklch(from var(--gray-500)calc(l*1.2)c h);--stroke-noeffect-disabled:oklch(from var(--gray-500)calc(l*.8)calc(c*.8)h);--ring-noeffect:var(--gray-900);--gradient-noeffect-start:var(--gray-950);--gradient-noeffect-end:var(--gray-900);--gradient-noeffect-foreground:white;--gradient-noeffect-hover:var(--gray-900);--gradient-noeffect-disabled:oklch(from var(--gray-900)calc(l*.85)calc(c*.85)h);--fill-success-strong:var(--green-400);--fill-success-strong-hover:oklch(from var(--green-400)calc(l*.9)c h);--fill-success-strong-disabled:oklch(from var(--green-400)calc(l*.85)calc(c*.85)h);--fill-success-weak:oklch(from var(--green-400)calc(l*.35)calc(c*.1)h);--fill-success-weak-hover:var(--canvas-800);--text-on-success:white;--text-on-success-disabled:oklch(85% 5.0664e-8 90);--text-success-strong:var(--green-500);--text-success-weak:var(--green-400);--text-success-disabled:oklch(from var(--green-500)calc(l*.8)calc(c*.8)h);--stroke-success:var(--green-500);--stroke-success-hover:oklch(from var(--green-500)calc(l*1.1)c h);--stroke-success-disabled:oklch(from var(--green-500)calc(l*.8)calc(c*.8)h);--ring-success:var(--green-400);--gradient-success-start:var(--green-500);--gradient-success-end:var(--green-700);--gradient-success-foreground:white;--gradient-success-disabled:oklch(from var(--green-700)calc(l*.85)calc(c*.85)h);--fill-info-strong:var(--blue-400);--fill-info-strong-hover:oklch(from var(--blue-400)calc(l*.9)c h);--fill-info-strong-disabled:oklch(from var(--blue-400)calc(l*.85)calc(c*.85)h);--fill-info-weak:oklch(from var(--blue-400)calc(l*.43)calc(c*.1)h);--fill-info-weak-hover:var(--canvas-800);--text-on-info:white;--text-on-info-disabled:oklch(85% 5.0664e-8 90);--text-info-strong:var(--blue-300);--text-info-weak:var(--blue-400);--text-info-disabled:oklch(from var(--blue-300)calc(l*.8)calc(c*.8)h);--stroke-info:var(--blue-500);--stroke-info-hover:oklch(from var(--blue-500)calc(l*1.1)c h);--stroke-info-disabled:oklch(from var(--blue-500)calc(l*.8)calc(c*.8)h);--ring-info:var(--blue-400);--gradient-info-start:var(--blue-500);--gradient-info-end:var(--blue-700);--gradient-info-foreground:white;--gradient-info-disabled:oklch(from var(--blue-700)calc(l*.85)calc(c*.85)h);--fill-warning-strong:var(--yellow-300);--fill-warning-strong-hover:oklch(from var(--yellow-300)calc(l*.95)c h);--fill-warning-strong-disabled:oklch(from var(--yellow-300)calc(l*.85)calc(c*.85)h);--fill-warning-weak:oklch(from var(--yellow-300)calc(l*.31)calc(c*.1)h);--fill-warning-weak-hover:var(--canvas-800);--text-on-warning:black;--text-on-warning-disabled:oklch(0% 0 0);--text-warning-strong:var(--yellow-500);--text-warning-weak:var(--yellow-300);--text-warning-disabled:oklch(from var(--yellow-500)calc(l*.8)calc(c*.8)h);--stroke-warning:var(--yellow-500);--stroke-warning-hover:oklch(from var(--yellow-500)calc(l*1.1)c h);--stroke-warning-disabled:oklch(from var(--yellow-500)calc(l*.8)calc(c*.8)h);--ring-warning:var(--yellow-300);--gradient-warning-start:var(--yellow-300);--gradient-warning-end:var(--yellow-400);--gradient-warning-foreground:black;--gradient-warning-disabled:oklch(from var(--yellow-400)calc(l*.85)calc(c*.85)h);--fill-danger-strong:var(--red-400);--fill-danger-strong-hover:oklch(from var(--red-400)calc(l*.9)c h);--fill-danger-strong-disabled:oklch(from var(--red-400)calc(l*.85)calc(c*.85)h);--fill-danger-weak:oklch(from var(--red-400)calc(l*.4)calc(c*.1)h);--fill-danger-weak-hover:var(--canvas-800);--text-on-danger:white;--text-on-danger-disabled:oklch(85% 5.0664e-8 90);--text-danger-strong:var(--red-500);--text-danger-weak:var(--red-400);--text-danger-disabled:oklch(from var(--red-500)calc(l*.8)calc(c*.8)h);--stroke-danger:var(--red-500);--stroke-danger-hover:oklch(from var(--red-500)calc(l*1.1)c h);--stroke-danger-disabled:oklch(from var(--red-500)calc(l*.8)calc(c*.8)h);--ring-danger:var(--red-400);--gradient-danger-start:var(--red-500);--gradient-danger-end:var(--red-700);--gradient-danger-foreground:white;--gradient-danger-disabled:oklch(from var(--red-700)calc(l*.85)calc(c*.85)h)}.not-dark{--fill-primary-strong:var(--primary-600);--fill-primary-strong-hover:oklch(from var(--primary-600)calc(l*.9)c h);--fill-primary-strong-disabled:oklch(from var(--primary-600)calc(l*1.1)calc(c*.85)h);--fill-primary-weak:oklch(from var(--primary-600)calc(l*2.15)calc(c*.2)h);--fill-primary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-primary:white;--text-on-primary-disabled:oklch(90% 5.0664e-8 90);--text-primary-strong:var(--primary-700);--text-primary-weak:oklch(from var(--primary-600)calc(l*.7)c h);--text-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.5)h);--stroke-primary:var(--primary-700);--stroke-primary-hover:oklch(from var(--primary-700)calc(l*.85)c h);--stroke-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.8)h);--ring-primary:var(--primary-600);--gradient-primary-start:var(--primary-500);--gradient-primary-end:var(--primary-700);--gradient-primary-foreground:white;--gradient-primary-disabled:oklch(from var(--primary-700)calc(l*1.2)calc(c*.85)h);--fill-secondary-strong:var(--secondary-500);--fill-secondary-strong-hover:oklch(from var(--secondary-500)calc(l*.95)c h);--fill-secondary-strong-disabled:oklch(from var(--secondary-500)calc(l*1.1)calc(c*.85)h);--fill-secondary-weak:oklch(from var(--secondary-500)calc(l*1.6)calc(c*.2)h);--fill-secondary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-secondary:black;--text-on-secondary-disabled:oklch(0% 0 0);--text-secondary-strong:var(--secondary-950);--text-secondary-weak:oklch(from var(--secondary-500)calc(l*.7)c h);--text-secondary-disabled:oklch(from var(--secondary-950)calc(l*1.5)calc(c*.5)h);--stroke-secondary:var(--secondary-700);--stroke-secondary-hover:oklch(from var(--secondary-700)calc(l*.85)c h);--stroke-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.5)calc(c*.8)h);--ring-secondary:var(--secondary-500);--gradient-secondary-start:var(--secondary-500);--gradient-secondary-end:var(--secondary-700);--gradient-secondary-foreground:black;--gradient-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.2)calc(c*.85)h);--fill-noeffect-strong:var(--gray-100);--fill-noeffect-strong-hover:oklch(from var(--gray-100)calc(l*.95)c h);--fill-noeffect-strong-disabled:oklch(from var(--gray-100)calc(l*1.1)calc(c*.85)h);--fill-noeffect-weak:oklch(from var(--gray-100)calc(l*2.9)calc(c*.2)h);--fill-noeffect-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-noeffect:black;--text-on-noeffect-disabled:oklch(0% 0 0);--text-noeffect-strong:var(--gray-800);--text-noeffect-weak:oklch(from var(--gray-100)calc(l*.5)c h);--text-noeffect-disabled:oklch(from var(--gray-800)calc(l*1.5)calc(c*.5)h);--stroke-noeffect:var(--gray-500);--stroke-noeffect-hover:oklch(from var(--gray-500)calc(l*.75)c h);--stroke-noeffect-disabled:oklch(from var(--gray-500)calc(l*1.5)calc(c*.8)h);--ring-noeffect:var(--gray-200);--gradient-noeffect-start:var(--gray-100);--gradient-noeffect-end:var(--gray-200);--gradient-noeffect-foreground:black;--gradient-noeffect-hover:var(--gray-400);--gradient-noeffect-disabled:oklch(from var(--gray-200)calc(l*1.2)calc(c*.85)h);--fill-success-strong:var(--green-400);--fill-success-strong-hover:oklch(from var(--green-400)calc(l*.9)c h);--fill-success-strong-disabled:oklch(from var(--green-400)calc(l*1.1)calc(c*.85)h);--fill-success-weak:oklch(from var(--green-400)calc(l*1.6)calc(c*.2)h);--fill-success-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-success:white;--text-on-success-disabled:oklch(90% 5.0664e-8 90);--text-success-strong:var(--green-600);--text-success-weak:oklch(from var(--green-400)calc(l*.7)c h);--text-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.5)h);--stroke-success:var(--green-600);--stroke-success-hover:oklch(from var(--green-600)calc(l*.85)c h);--stroke-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.8)h);--ring-success:var(--green-400);--gradient-success-start:var(--green-500);--gradient-success-end:var(--green-700);--gradient-success-foreground:white;--gradient-success-disabled:oklch(from var(--green-700)calc(l*1.2)calc(c*.85)h);--fill-info-strong:var(--blue-400);--fill-info-strong-hover:oklch(from var(--blue-400)calc(l*.9)c h);--fill-info-strong-disabled:oklch(from var(--blue-400)calc(l*1.1)calc(c*.85)h);--fill-info-weak:oklch(from var(--blue-400)calc(l*1.9)calc(c*.2)h);--fill-info-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-info:white;--text-on-info-disabled:oklch(90% 5.0664e-8 90);--text-info-strong:var(--blue-300);--text-info-weak:oklch(from var(--blue-400)calc(l*.7)c h);--text-info-disabled:oklch(from var(--blue-300)calc(l*1.5)calc(c*.5)h);--stroke-info:var(--blue-500);--stroke-info-hover:oklch(from var(--blue-500)calc(l*.85)c h);--stroke-info-disabled:oklch(from var(--blue-500)calc(l*1.5)calc(c*.8)h);--ring-info:var(--blue-400);--gradient-info-start:var(--blue-500);--gradient-info-end:var(--blue-700);--gradient-info-foreground:white;--gradient-info-disabled:oklch(from var(--blue-700)calc(l*1.2)calc(c*.85)h);--fill-warning-strong:var(--yellow-300);--fill-warning-strong-hover:oklch(from var(--yellow-300)calc(l*.95)c h);--fill-warning-strong-disabled:oklch(from var(--yellow-300)calc(l*1.1)calc(c*.85)h);--fill-warning-weak:oklch(from var(--yellow-300)calc(l*1.9)calc(c*.2)h);--fill-warning-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-warning:black;--text-on-warning-disabled:oklch(0% 0 0);--text-warning-strong:var(--yellow-700);--text-warning-weak:oklch(from var(--yellow-300)calc(l*.6)c h);--text-warning-disabled:oklch(from var(--yellow-700)calc(l*1.5)calc(c*.5)h);--stroke-warning:var(--yellow-500);--stroke-warning-hover:oklch(from var(--yellow-500)calc(l*.85)c h);--stroke-warning-disabled:oklch(from var(--yellow-500)calc(l*1.5)calc(c*.8)h);--ring-warning:var(--yellow-300);--gradient-warning-start:var(--yellow-300);--gradient-warning-end:var(--yellow-400);--gradient-warning-foreground:black;--gradient-warning-disabled:oklch(from var(--yellow-400)calc(l*1.2)calc(c*.85)h);--fill-danger-strong:var(--red-400);--fill-danger-strong-hover:oklch(from var(--red-400)calc(l*.9)c h);--fill-danger-strong-disabled:oklch(from var(--red-400)calc(l*1.1)calc(c*.85)h);--fill-danger-weak:oklch(from var(--red-400)calc(l*1.8)calc(c*.3)h);--fill-danger-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-danger:white;--text-on-danger-disabled:oklch(90% 5.0664e-8 90);--text-danger-strong:var(--red-500);--text-danger-weak:oklch(from var(--red-400)calc(l*.7)c h);--text-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.5)h);--stroke-danger:var(--red-500);--stroke-danger-hover:oklch(from var(--red-500)calc(l*.85)c h);--stroke-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.8)h);--ring-danger:var(--red-400);--gradient-danger-start:var(--red-500);--gradient-danger-end:var(--red-700);--gradient-danger-foreground:white;--gradient-danger-disabled:oklch(from var(--red-700)calc(l*1.2)calc(c*.85)h)}:root{--background:var(--canvas-25);--foreground:var(--gray-900);--text:var(--gray-900);--headings:var(--primary-700);--muted:oklch(from var(--foreground)calc(l*2)c h);--border-color:var(--gray-100);--shadow:var(--shadow-md);--loader-color:var(--primary-500);--invert-background:var(--canvas-900);--invert-foreground:var(--gray-50);--invert-text:var(--gray-50);--invert-headings:var(--gray-50);--invert-muted:oklch(from var(--foreground)calc(l*.75)c h);--invert-border-color:var(--canvas-700);--invert-shadow:var(--shadow-lg);--invert-loader-color:var(--gray-50)}.dark{--background:var(--invert-background);--foreground:var(--invert-foreground);--text:var(--invert-text);--headings:var(--invert-headings);--border-color:var(--invert-border-color);--shadow:var(--invert-shadow);--muted:var(--invert-muted);--loader-color:var(--invert-loader-color)}.not-dark{--background:var(--canvas-25);--foreground:var(--gray-900);--text:var(--gray-900);--headings:var(--primary-800);--muted:oklch(from var(--foreground)calc(l*2)c h);--border-color:var(--gray-100);--shadow:var(--shadow-md);--loader-color:var(--primary-500)}html{color:var(--text);font-size:1rem}html .not-dark{color:var(--text)}::selection{background-color:var(--theme-600);color:#fff}.dark ::selection{background-color:var(--theme-200);color:var(--gray-900)}.background{background-color:var(--background)}.foreground{color:var(--foreground)}.text{color:var(--text)}.headings{color:var(--headings)}.muted{color:var(--muted);font-size:.925rem}.shadow{box-shadow:var(--shadow)}.border-color{border-color:var(--border-color)}.border{border-color:var(--border-color);border-width:var(--border-width-thin);border-style:var(--border-style-solid);border-radius:var(--border-radius-sm)}.external-link:after{content:"";background-image:url(/external-link-light.svg);background-position:20%;background-repeat:no-repeat;background-size:65%;width:1.1rem;height:1.1rem;margin-right:-5px;display:inline-block}.dark .external-link:after{background-image:url(/external-link-dark.svg)}}@layer infonomic-typography;@layer infonomic-components{.component--icon-element-root svg{max-width:100%;max-height:100%;margin:auto;display:block}.component--hamburger{z-index:200;cursor:pointer;width:42px;height:34px;font:inherit;color:inherit;text-transform:none;background-color:#0000;border:0;border-radius:4px;justify-content:center;align-items:center;margin:0;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:ease;display:flex;position:relative;overflow:hidden}.component--hamburger:active,.component--hamburger:focus{border:.5px dashed #fff;border-radius:4px;outline:none!important}.component--hamburger .box{width:24px;height:24px;display:block;position:relative}.component--hamburger .inner{margin-top:-1px;transition-duration:75ms;transition-timing-function:cubic-bezier(.55,.055,.675,.19);display:block;top:50%}.component--hamburger .inner,.component--hamburger .inner:before,.component--hamburger .inner:after{border-radius:0;width:24px;height:2px;transition-property:transform;transition-duration:.15s;transition-timing-function:ease;position:absolute}.component--hamburger .inner:before,.component--hamburger .inner:after{content:"";display:block}.component--hamburger .inner:before{transition:top 75ms .12s,opacity 75ms;top:-8px}.component--hamburger .inner:after{transition:bottom 75ms .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);bottom:-8px}.component--hamburger.is_active .inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.component--hamburger.is_active .inner:before{opacity:0;transition:top 75ms,opacity 75ms .12s;top:0}.component--hamburger.is_active .inner:after{transition:bottom 75ms,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;bottom:0;transform:rotate(-90deg)}}.btn-to-top{opacity:0;visibility:hidden;z-index:20;color:#fff;background-color:var(--primary-500);cursor:pointer;border-style:none;outline:none;justify-content:center;align-items:center;width:0;height:0;margin:0;padding:0;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.5,1),color 1ms;display:flex;position:fixed;bottom:45px;right:30px}.btn-to-top span{width:18px;padding-bottom:3px}.btn-to-top span .icon path{stroke:none;fill:#fff}@media screen and (width>=587px){.btn-to-top{bottom:45px;right:45px}.btn-to-top span{width:18px}}.btn-to-top:hover,.btn-to-top:focus{color:#fff;background-color:var(--primary-500);transform:translateY(-5px)}.dark .btn-to-top{background-color:var(--primary-600)}.dark .btn-to-top:hover,.dark .btn-to-top:focus{color:#fff;background-color:var(--primary-600)}.btn-floating{opacity:1;visibility:visible;border-radius:20px;width:40px;min-width:0;height:40px;padding:0;bottom:20px;right:10px}@media screen and (width>=587px){.btn-floating{border-radius:21px;width:42px;height:42px;bottom:22px;right:22px}}ul.check{padding-left:0}.component--list-item-checkbox{outline:none;margin-left:0;margin-right:8px;padding-left:28px;padding-right:24px;list-style-type:none;position:relative}@media screen and (width>=768px){ul.check{padding-left:1rem}}.component--list-item-checkbox:before{content:"";cursor:pointer;background-repeat:no-repeat;background-size:cover;border:1px solid #7d7d7d;border-radius:2px;width:16px;height:16px;display:block;position:absolute;top:8px;left:0}.component--list-item-checkbox-checked{text-decoration:line-through}.component--list-item-checkbox-checked:before{border:1px solid var(--secondary-300);background-color:var(--secondary-400);background-repeat:no-repeat}.component--list-item-checkbox-checked:after{content:"";cursor:pointer;border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;display:block;position:absolute;top:11px;left:6px;right:7px;transform:rotate(45deg)}.lds-ellipsis{display:inline-block;position:relative}.lds-ellipsis div{background:#fff;border-radius:50%;width:16.25%;height:32.25%;animation-timing-function:cubic-bezier(0,1,1,0);position:absolute;top:41.25%}.lds-ellipsis div:first-child{animation:.6s infinite lds-ellipsis1;left:10%}.lds-ellipsis div:nth-child(2){animation:.6s infinite lds-ellipsis2;left:10%}.lds-ellipsis div:nth-child(3){animation:.6s infinite lds-ellipsis2;left:40%}.lds-ellipsis div:nth-child(4){animation:.6s infinite lds-ellipsis3;left:70%}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(184.61%)}}.lds-ring{display:inline-block;position:relative}.lds-ring div{box-sizing:border-box;border:8px solid #0000;border-top-color:#fff;border-radius:50%;animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-ring;display:block;position:absolute}.lds-ring div:first-child{animation-delay:-.45s}.lds-ring div:nth-child(2){animation-delay:-.3s}.lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lds-spinner{color:official;width:56px;height:56px;display:inline-block;position:relative}.lds-spinner div{transform-origin:28px 32px;animation:1.2s linear infinite lds-spinner}.lds-spinner div .div-after{content:" ";background:#fff;border-radius:20%;width:5px;height:14px;display:block;position:absolute;top:0;left:25px}.lds-spinner div:first-child{animation-delay:-1.1s;transform:rotate(0)}.lds-spinner div:nth-child(2){animation-delay:-1s;transform:rotate(30deg)}.lds-spinner div:nth-child(3){animation-delay:-.9s;transform:rotate(60deg)}.lds-spinner div:nth-child(4){animation-delay:-.8s;transform:rotate(90deg)}.lds-spinner div:nth-child(5){animation-delay:-.7s;transform:rotate(120deg)}.lds-spinner div:nth-child(6){animation-delay:-.6s;transform:rotate(150deg)}.lds-spinner div:nth-child(7){animation-delay:-.5s;transform:rotate(180deg)}.lds-spinner div:nth-child(8){animation-delay:-.4s;transform:rotate(210deg)}.lds-spinner div:nth-child(9){animation-delay:-.3s;transform:rotate(240deg)}.lds-spinner div:nth-child(10){animation-delay:-.2s;transform:rotate(270deg)}.lds-spinner div:nth-child(11){animation-delay:-.1s;transform:rotate(300deg)}.lds-spinner div:nth-child(12){animation-delay:0s;transform:rotate(330deg)}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}.component--fade-in-lift{opacity:0;visibility:hidden;will-change:opacity,visibility;transition:opacity .5s ease-out,transform .7s ease-out;transform:matrix(1,0,0,1,0,18)}.component--fade-in-lift.is-visible{opacity:1;visibility:visible;transform:matrix(1,0,0,1,0,0)}@keyframes checkBoxIn{0%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}80%{transform:scale(.9)}to{transform:scale(1)}}@keyframes checkBoxOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.component--checkbox,.component--checkbox-icon{transition:all .2s ease-in-out}.component--checkbox-indicator[data-state=checked] .component--checkbox-icon{opacity:1;animation:.3s cubic-bezier(.25,1.5,.5,1) forwards checkBoxIn;transform:scale(1)}.component--checkbox-indicator[data-state=unchecked] .component--checkbox-icon{opacity:0;animation:.2s ease-in checkBoxOut;transform:scale(.8)}.component--card{background:var(--theme-25);color:oklch(12.97% .005 285.67);border:solid 1px var(--gray-50)}.component--card:is(.dark *){background:var(--canvas-800);color:var(--gray-100);border:solid 1px var(--canvas-700)}.component--card--hover:hover{background:oklch(from var(--theme-50)1 .03 h);transition:all .2s ease-in-out}.component--card--hover:hover:is(.dark *){background:oklch(from var(--canvas-700).258 c h)}.toast-viewport{--viewport-padding:25px;padding:var(--viewport-padding);z-index:2147483647;outline:none;flex-direction:column;gap:10px;width:100vw;max-width:100vw;margin:0;list-style:none;display:flex;position:fixed;bottom:0;right:0}.popover-content[data-state=open][data-side=top]{animation:.1s ease-in slideDownAndFade}.popover-content[data-state=open][data-side=right]{animation:.1s ease-in slideLeftAndFade}.popover-content[data-state=open][data-side=bottom]{animation:.1s ease-in slideUpAndFade}.popover-content[data-state=open][data-side=left]{animation:.1s ease-in slideRightAndFade}.dropdown-menu-content[data-side=top],.dropdown-menu-subcontent[data-side=top]{animation:.1s ease-in slideDownAndFade}.dropdown-menu-content[data-side=right],.dropdown-menu-subcontent[data-side=right]{animation:.1s ease-in slideLeftAndFade}.dropdown-menu-content[data-side=bottom],.dropdown-menu-subcontent[data-side=bottom]{animation:.1s ease-in slideUpAndFade}.dropdown-menu-content[data-side=left],.dropdown-menu-subcontent[data-side=left]{animation:.1s ease-in slideRightAndFade}
1
+ @layer infonomic-base{*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content:""}html,:host{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{line-height:inherit;margin:0}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-feature-settings:inherit;font-variation-settings:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:#0000;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{margin:0;padding:0;list-style:none}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}:root{--theme-base:oklch(43.11% .1 317.53);--theme-25:oklch(from var(--theme-base)calc(l*2)c h);--theme-50:oklch(from var(--theme-base)calc(l*1.75)c h);--theme-100:oklch(from var(--theme-base)calc(l*1.5)c h);--theme-200:oklch(from var(--theme-base)calc(l*1.25)c h);--theme-300:oklch(from var(--theme-base)calc(l*1.1)c h);--theme-400:var(--theme-base);--theme-500:oklch(from var(--theme-base)calc(l*.95)c h);--theme-600:oklch(from var(--theme-base)calc(l*.9)c h);--theme-700:oklch(from var(--theme-base)calc(l*.85)c h);--theme-800:oklch(from var(--theme-base)calc(l*.8)c h);--theme-900:oklch(from var(--theme-base)calc(l*.75)c h);--theme-950:oklch(from var(--theme-base)calc(l*.7)c h);--primary-base:oklch(49.7% .189 295.76);--primary-25:oklch(from var(--primary-base)calc(l*2)c h);--primary-50:oklch(from var(--primary-base)calc(l*1.75)c h);--primary-100:oklch(from var(--primary-base)calc(l*1.5)c h);--primary-200:oklch(from var(--primary-base)calc(l*1.25)c h);--primary-300:oklch(from var(--primary-base)calc(l*1.1)c h);--primary-400:var(--primary-base);--primary-500:oklch(from var(--primary-base)calc(l*.95)c h);--primary-600:oklch(from var(--primary-base)calc(l*.9)c h);--primary-700:oklch(from var(--primary-base)calc(l*.85)c h);--primary-800:oklch(from var(--primary-base)calc(l*.8)c h);--primary-900:oklch(from var(--primary-base)calc(l*.75)c h);--primary-950:oklch(from var(--primary-base)calc(l*.7)c h);--secondary-base:oklch(84.61% .15 82.94);--secondary-25:oklch(from var(--secondary-base)calc(l*2.25).1 h);--secondary-50:oklch(from var(--secondary-base)calc(l*2)c h);--secondary-100:oklch(from var(--secondary-base)calc(l*1.75)c h);--secondary-200:oklch(from var(--secondary-base)calc(l*1.5)c h);--secondary-300:oklch(from var(--secondary-base)calc(l*1.1)c h);--secondary-400:var(--secondary-base);--secondary-500:oklch(from var(--secondary-base)calc(l*.95)c h);--secondary-600:oklch(from var(--secondary-base)calc(l*.9)c h);--secondary-700:oklch(from var(--secondary-base)calc(l*.85)c h);--secondary-800:oklch(from var(--secondary-base)calc(l*.8)c h);--secondary-900:oklch(from var(--secondary-base)calc(l*.75)c h);--secondary-950:oklch(from var(--secondary-base)calc(l*.7)c h);--accent-base:oklch(75.4% .1 324.9);--accent-25:oklch(from var(--accent-base).985 .06 h);--accent-50:oklch(from var(--accent-base).975 .08 h);--accent-100:oklch(from var(--accent-base).9 .07 h);--accent-200:oklch(from var(--accent-base).85 c h);--accent-300:oklch(from var(--accent-base).8 c h);--accent-400:var(--accent-base);--accent-500:oklch(from var(--accent-base).7 c h);--accent-600:oklch(from var(--accent-base).68 c h);--accent-700:oklch(from var(--accent-base).62 .1 h);--accent-800:oklch(from var(--accent-base).6 .1 h);--accent-900:oklch(from var(--accent-base).58 .1 h);--accent-950:oklch(from var(--accent-base).5 .11 h);--canvas-base:oklch(54.2% .0037 275.34);--canvas-25:oklch(from var(--canvas-base)calc(l*1.9)c h);--canvas-50:oklch(from var(--canvas-base)calc(l*1.75)c h);--canvas-100:oklch(from var(--canvas-base)calc(l*1.6)c h);--canvas-200:oklch(from var(--canvas-base)calc(l*1.4)c h);--canvas-300:oklch(from var(--canvas-base)calc(l*1.2)c h);--canvas-400:var(--canvas-base);--canvas-500:oklch(from var(--canvas-base)calc(l*.9)c h);--canvas-600:oklch(from var(--canvas-base)calc(l*.7)c h);--canvas-700:oklch(from var(--canvas-base)calc(l*.5)c h);--canvas-800:oklch(from var(--canvas-base)calc(l*.335)c h);--canvas-900:oklch(from var(--canvas-base)calc(l*.3)c h);--canvas-950:oklch(from var(--canvas-base)calc(l*.225)c h);--gray-base:oklch(59.84% 0 0);--gray-25:oklch(from var(--gray-base)calc(l*1.625)c h);--gray-50:oklch(from var(--gray-base)calc(l*1.575)c h);--gray-100:oklch(from var(--gray-base)calc(l*1.475)c h);--gray-200:oklch(from var(--gray-base)calc(l*1.35)c h);--gray-300:oklch(from var(--gray-base)calc(l*1.175)c h);--gray-400:var(--gray-base);--gray-500:oklch(from var(--gray-base)calc(l*.85)c h);--gray-600:oklch(from var(--gray-base)calc(l*.725)c h);--gray-700:oklch(from var(--gray-base)calc(l*.6126)c h);--gray-800:oklch(from var(--gray-base)calc(l*.5)c h);--gray-900:oklch(from var(--gray-base)calc(l*.4)c h);--gray-950:oklch(from var(--gray-base)calc(l*.3)c h);--red-base:oklch(54.27% .18 31.76);--red-25:oklch(from var(--red-base)calc(l*2)c h);--red-50:oklch(from var(--red-base)calc(l*1.75)c h);--red-100:oklch(from var(--red-base)calc(l*1.5)c h);--red-200:oklch(from var(--red-base)calc(l*1.25)c h);--red-300:oklch(from var(--red-base)calc(l*1.1)c h);--red-400:var(--red-base);--red-500:oklch(from var(--red-base)calc(l*.95)c h);--red-600:oklch(from var(--red-base)calc(l*.9)c h);--red-700:oklch(from var(--red-base)calc(l*.85)c h);--red-800:oklch(from var(--red-base)calc(l*.8)c h);--red-900:oklch(from var(--red-base)calc(l*.75)c h);--red-950:oklch(from var(--red-base)calc(l*.7)c h);--green-base:oklch(65.26% .18 142.58);--green-25:oklch(from var(--green-base)calc(l*2)c h);--green-50:oklch(from var(--green-base)calc(l*1.75)c h);--green-100:oklch(from var(--green-base)calc(l*1.5)c h);--green-200:oklch(from var(--green-base)calc(l*1.25)c h);--green-300:oklch(from var(--green-base)calc(l*1.1)c h);--green-400:var(--green-base);--green-500:oklch(from var(--green-base)calc(l*.95)c h);--green-600:oklch(from var(--green-base)calc(l*.9)c h);--green-700:oklch(from var(--green-base)calc(l*.85)c h);--green-800:oklch(from var(--green-base)calc(l*.8)c h);--green-900:oklch(from var(--green-base)calc(l*.75)c h);--green-950:oklch(from var(--green-base)calc(l*.7)c h);--blue-base:oklch(53.66% .1942 265.89);--blue-25:oklch(from var(--blue-base)calc(l*2)c h);--blue-50:oklch(from var(--blue-base)calc(l*1.75)c h);--blue-100:oklch(from var(--blue-base)calc(l*1.5)c h);--blue-200:oklch(from var(--blue-base)calc(l*1.25)c h);--blue-300:oklch(from var(--blue-base)calc(l*1.1)c h);--blue-400:var(--blue-base);--blue-500:oklch(from var(--blue-base)calc(l*.95)c h);--blue-600:oklch(from var(--blue-base)calc(l*.9)c h);--blue-700:oklch(from var(--blue-base)calc(l*.85)c h);--blue-800:oklch(from var(--blue-base)calc(l*.8)c h);--blue-900:oklch(from var(--blue-base)calc(l*.75)c h);--blue-950:oklch(from var(--blue-base)calc(l*.7)c h);--yellow-base:oklch(75% .15 82.94);--yellow-25:oklch(from var(--yellow-base)calc(l*2)c h);--yellow-50:oklch(from var(--yellow-base)calc(l*1.75)c h);--yellow-100:oklch(from var(--yellow-base)calc(l*1.5)c h);--yellow-200:oklch(from var(--yellow-base)calc(l*1.25)c h);--yellow-300:oklch(from var(--yellow-base)calc(l*1.1)c h);--yellow-400:var(--yellow-base);--yellow-500:oklch(from var(--yellow-base)calc(l*.95)c h);--yellow-600:oklch(from var(--yellow-base)calc(l*.9)c h);--yellow-700:oklch(from var(--yellow-base)calc(l*.85)c h);--yellow-800:oklch(from var(--yellow-base)calc(l*.8)c h);--yellow-900:oklch(from var(--yellow-base)calc(l*.75)c h);--yellow-950:oklch(from var(--yellow-base)calc(l*.7)c h);--breakpoint-xs:480px;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1050px;--breakpoint-xl:1230px;--breakpoint-2xl:1500px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:2.625rem;--font-size-6xl:3rem;--font-size-7xl:3.375rem;--font-size-8xl:3.75rem;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-ultrabold:900;--line-height-tight:1.1;--line-height-snug:1.25;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tight:-.02em;--letter-spacing-normal:0;--letter-spacing-wide:.05em;--spacing-0:0px;--spacing-1:4px;--spacing-2:8px;--spacing-3:12px;--spacing-4:16px;--spacing-5:20px;--spacing-6:24px;--spacing-8:32px;--spacing-10:40px;--spacing-12:48px;--spacing-16:64px;--spacing-20:80px;--spacing-24:96px;--spacing-32:128px;--border-radius-none:0px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-xl:16px;--border-radius-2xl:24px;--border-radius-full:9999px;--border-width-thin:1px;--border-width-normal:2px;--border-width-thick:4px;--border-style-solid:solid;--border-style-dashed:dashed;--border-style-dotted:dotted;--ring-offset-width:2px;--ring-inset: ;--ring-shadow:0 0 #0000;--shadow:0 0 #0000;--shadow-xs:0px 1px 2px #0000000d;--shadow-sm:0px 2px 4px #0000001a;--shadow-md:0px 4px 6px #0000001a;--shadow-lg:0px 6px 12px #00000026;--shadow-xl:0px 8px 16px #0003;--transition-fast:.175s ease-in-out;--transition-normal:.23s ease-in-out;--transition-slow:.4s ease-in-out;--z-index-low:10;--z-index-medium:100;--z-index-high:1000;--z-index-modal:1050;--z-index-toast:1100;--opacity-0:0;--opacity-25:.25;--opacity-50:.5;--opacity-75:.75;--opacity-100:1;--grid-columns-2:2;--grid-columns-3:3;--grid-columns-4:4;--grid-columns-5:5;--grid-columns-6:6;--grid-columns-7:7;--grid-columns-8:8;--grid-columns-9:9;--grid-columns-10:10;--grid-columns-11:11;--grid-columns-12:12;--grid-gap-sm:8px;--grid-gap-md:16px;--grid-gap-lg:24px;--grid-column-size-xs:240px;--grid-column-size-sm:260px;--grid-column-size-md:320px;--grid-column-size-lg:480px;--gap-0:var(--spacing-0);--gap-1:var(--spacing-1);--gap-2:var(--spacing-2);--gap-3:var(--spacing-3);--gap-4:var(--spacing-4);--gap-5:var(--spacing-5);--gap-6:var(--spacing-6);--gap-8:var(--spacing-8);--gap-10:var(--spacing-10);--gap-12:var(--spacing-12);--gap-16:var(--spacing-16);--gap-20:var(--spacing-20);--gap-24:var(--spacing-24);--gap-32:var(--spacing-32);--flex-row:row;--flex-column:column;--flex-wrap:wrap;--flex-nowrap:nowrap;--flex-center:center}@keyframes enterFromRight{0%{opacity:0;transform:translate(200px)}to{opacity:1;transform:translate(0)}}@keyframes enterFromLeft{0%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(0)}}@keyframes exitToRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(200px)}}@keyframes exitToLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-200px)}}@keyframes scaleIn{0%{opacity:0;transform:rotateX(-30deg)scale(.9)}to{opacity:1;transform:rotateX(0)scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:rotateX(0)scale(1)}to{opacity:0;transform:rotateX(-10deg)scale(.95)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUpAndFade{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRightAndFade{0%{opacity:0;transform:translate(-2px)}to{opacity:1;transform:translate(0)}}@keyframes slideDownAndFade{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}@keyframes slideLeftAndFade{0%{opacity:0;transform:translate(2px)}to{opacity:1;transform:translate(0)}}h1{font-size:1.75rem;font-weight:600;line-height:1.125}h2{font-size:1.5rem;font-weight:600;line-height:1.125}h3{font-size:1.25rem;font-weight:600;line-height:1.1}h4{font-size:1rem;font-weight:600;line-height:1.1}}@layer infonomic-utilities{.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.text-5xl{font-size:var(--font-size-5xl)}.text-6xl{font-size:var(--font-size-6xl)}.text-7xl{font-size:var(--font-size-7xl)}.text-8xl{font-size:var(--font-size-8xl)}.font-light{font-weight:var(--font-weight-light)}.font-normal{font-weight:var(--font-weight-normal)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.font-extrabold{font-weight:var(--font-weight-extrabold)}.font-ultrabold{font-weight:var(--font-weight-ultrabold)}.leading-tight{line-height:var(--line-height-tight)}.leading-snug{line-height:var(--line-height-snug)}.leading-normal{line-height:var(--line-height-normal)}.leading-relaxed{line-height:var(--line-height-relaxed)}.leading-loose{line-height:var(--line-height-loose)}.tracking-tight{letter-spacing:var(--letter-spacing-tight)}.tracking-normal{letter-spacing:var(--letter-spacing-normal)}.tracking-wide{letter-spacing:var(--letter-spacing-wide)}@media (width>=640px){.sm\:text-xs{font-size:var(--font-size-xs)}.sm\:text-sm{font-size:var(--font-size-sm)}.sm\:text-base{font-size:var(--font-size-base)}.sm\:text-lg{font-size:var(--font-size-lg)}.sm\:text-xl{font-size:var(--font-size-xl)}.sm\:text-2xl{font-size:var(--font-size-2xl)}.sm\:text-3xl{font-size:var(--font-size-3xl)}.sm\:text-4xl{font-size:var(--font-size-4xl)}.sm\:text-5xl{font-size:var(--font-size-5xl)}.sm\:text-6xl{font-size:var(--font-size-6xl)}.sm\:text-7xl{font-size:var(--font-size-7xl)}.sm\:text-8xl{font-size:var(--font-size-8xl)}.sm\:font-light{font-weight:var(--font-weight-light)}.sm\:font-normal{font-weight:var(--font-weight-normal)}.sm\:font-medium{font-weight:var(--font-weight-medium)}.sm\:font-semibold{font-weight:var(--font-weight-semibold)}.sm\:font-bold{font-weight:var(--font-weight-bold)}.sm\:font-extrabold{font-weight:var(--font-weight-extrabold)}.sm\:font-ultrabold{font-weight:var(--font-weight-ultrabold)}.sm\:leading-tight{line-height:var(--line-height-tight)}.sm\:leading-snug{line-height:var(--line-height-snug)}.sm\:leading-normal{line-height:var(--line-height-normal)}.sm\:leading-relaxed{line-height:var(--line-height-relaxed)}.sm\:leading-loose{line-height:var(--line-height-loose)}.sm\:tracking-tight{letter-spacing:var(--letter-spacing-tight)}.sm\:tracking-normal{letter-spacing:var(--letter-spacing-normal)}.sm\:tracking-wide{letter-spacing:var(--letter-spacing-wide)}}@media (width>=768px){.md\:text-xs{font-size:var(--font-size-xs)}.md\:text-sm{font-size:var(--font-size-sm)}.md\:text-base{font-size:var(--font-size-base)}.md\:text-lg{font-size:var(--font-size-lg)}.md\:text-xl{font-size:var(--font-size-xl)}.md\:text-2xl{font-size:var(--font-size-2xl)}.md\:text-3xl{font-size:var(--font-size-3xl)}.md\:text-4xl{font-size:var(--font-size-4xl)}.md\:text-5xl{font-size:var(--font-size-5xl)}.md\:text-6xl{font-size:var(--font-size-6xl)}.md\:text-7xl{font-size:var(--font-size-7xl)}.md\:text-8xl{font-size:var(--font-size-8xl)}.md\:font-light{font-weight:var(--font-weight-light)}.md\:font-normal{font-weight:var(--font-weight-normal)}.md\:font-medium{font-weight:var(--font-weight-medium)}.md\:font-semibold{font-weight:var(--font-weight-semibold)}.md\:font-bold{font-weight:var(--font-weight-bold)}.md\:font-extrabold{font-weight:var(--font-weight-extrabold)}.md\:font-ultrabold{font-weight:var(--font-weight-ultrabold)}.md\:leading-tight{line-height:var(--line-height-tight)}.md\:leading-snug{line-height:var(--line-height-snug)}.md\:leading-normal{line-height:var(--line-height-normal)}.md\:leading-relaxed{line-height:var(--line-height-relaxed)}.md\:leading-loose{line-height:var(--line-height-loose)}.md\:tracking-tight{letter-spacing:var(--letter-spacing-tight)}.md\:tracking-normal{letter-spacing:var(--letter-spacing-normal)}.md\:tracking-wide{letter-spacing:var(--letter-spacing-wide)}}.m-0{margin:var(--spacing-0)}.m-1{margin:var(--spacing-1)}.m-2{margin:var(--spacing-2)}.m-3{margin:var(--spacing-3)}.m-4{margin:var(--spacing-4)}.m-5{margin:var(--spacing-5)}.m-6{margin:var(--spacing-6)}.m-8{margin:var(--spacing-8)}.m-10{margin:var(--spacing-10)}.m-12{margin:var(--spacing-12)}.m-16{margin:var(--spacing-16)}.p-0{padding:var(--spacing-0)}.p-1{padding:var(--spacing-1)}.p-2{padding:var(--spacing-2)}.p-3{padding:var(--spacing-3)}.p-4{padding:var(--spacing-4)}.p-5{padding:var(--spacing-5)}.p-6{padding:var(--spacing-6)}.p-8{padding:var(--spacing-8)}.p-10{padding:var(--spacing-10)}.p-12{padding:var(--spacing-12)}.p-16{padding:var(--spacing-16)}.p-20{padding:var(--spacing-20)}.p-24{padding:var(--spacing-24)}.p-32{padding:var(--spacing-32)}@media (width>=640px){.sm\:m-0{margin:var(--spacing-0)}.sm\:m-1{margin:var(--spacing-1)}.sm\:m-2{margin:var(--spacing-2)}.sm\:m-3{margin:var(--spacing-3)}.sm\:m-4{margin:var(--spacing-4)}.sm\:m-5{margin:var(--spacing-5)}.sm\:m-6{margin:var(--spacing-6)}.sm\:m-8{margin:var(--spacing-8)}.sm\:m-10{margin:var(--spacing-10)}.sm\:m-12{margin:var(--spacing-12)}.sm\:m-16{margin:var(--spacing-16)}.sm\:p-0{padding:var(--spacing-0)}.sm\:p-1{padding:var(--spacing-1)}.sm\:p-2{padding:var(--spacing-2)}.sm\:p-3{padding:var(--spacing-3)}.sm\:p-4{padding:var(--spacing-4)}.sm\:p-5{padding:var(--spacing-5)}.sm\:p-6{padding:var(--spacing-6)}.sm\:p-8{padding:var(--spacing-8)}.sm\:p-10{padding:var(--spacing-10)}.sm\:p-12{padding:var(--spacing-12)}.sm\:p-16{padding:var(--spacing-16)}.sm\:p-20{padding:var(--spacing-20)}.sm\:p-24{padding:var(--spacing-24)}.sm\:p-32{padding:var(--spacing-32)}}@media (width>=768px){.md\:m-0{margin:var(--spacing-0)}.md\:m-1{margin:var(--spacing-1)}.md\:m-2{margin:var(--spacing-2)}.md\:m-3{margin:var(--spacing-3)}.md\:m-4{margin:var(--spacing-4)}.md\:m-5{margin:var(--spacing-5)}.md\:m-6{margin:var(--spacing-6)}.md\:m-8{margin:var(--spacing-8)}.md\:m-10{margin:var(--spacing-10)}.md\:m-12{margin:var(--spacing-12)}.md\:m-16{margin:var(--spacing-16)}.md\:p-0{padding:var(--spacing-0)}.md\:p-1{padding:var(--spacing-1)}.md\:p-2{padding:var(--spacing-2)}.md\:p-3{padding:var(--spacing-3)}.md\:p-4{padding:var(--spacing-4)}.md\:p-5{padding:var(--spacing-5)}.md\:p-6{padding:var(--spacing-6)}.md\:p-8{padding:var(--spacing-8)}.md\:p-10{padding:var(--spacing-10)}.md\:p-12{padding:var(--spacing-12)}.md\:p-16{padding:var(--spacing-16)}.md\:p-20{padding:var(--spacing-20)}.md\:p-24{padding:var(--spacing-24)}.md\:p-32{padding:var(--spacing-32)}}.flex{display:flex}.flex-row{flex-direction:var(--flex-row)}.flex-column{flex-direction:var(--flex-column)}.flex-wrap{flex-wrap:var(--flex-wrap)}.flex-nowrap{flex-wrap:var(--flex-nowrap)}.items-center{align-items:var(--flex-center)}.justify-center{justify-content:var(--flex-center)}@media (width>=640px){.sm\:flex{display:flex}.sm\:flex-row{flex-direction:var(--flex-row)}.sm\:flex-column{flex-direction:var(--flex-column)}.sm\:flex-wrap{flex-wrap:var(--flex-wrap)}.sm\:flex-nowrap{flex-wrap:var(--flex-nowrap)}.sm\:items-center{align-items:var(--flex-center)}.sm\:justify-center{justify-content:var(--flex-center)}}@media (width>=768px){.md\:flex{display:flex}.md\:flex-row{flex-direction:var(--flex-row)}.md\:flex-column{flex-direction:var(--flex-column)}.md\:flex-wrap{flex-wrap:var(--flex-wrap)}.md\:flex-nowrap{flex-wrap:var(--flex-nowrap)}.md\:items-center{align-items:var(--flex-center)}.md\:justify-center{justify-content:var(--flex-center)}}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(var(--grid-columns-2),minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(var(--grid-columns-3),minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(var(--grid-columns-4),minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(var(--grid-columns-5),minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(var(--grid-columns-6),minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(var(--grid-columns-7),minmax(0,1fr))}.grid-cols-8{grid-template-columns:repeat(var(--grid-columns-8),minmax(0,1fr))}.grid-cols-9{grid-template-columns:repeat(var(--grid-columns-9),minmax(0,1fr))}.grid-cols-10{grid-template-columns:repeat(var(--grid-columns-10),minmax(0,1fr))}.grid-cols-11{grid-template-columns:repeat(var(--grid-columns-11),minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(var(--grid-columns-12),minmax(0,1fr))}.gap-0{gap:var(--gap-0)}.gap-1{gap:var(--gap-1)}.gap-2{gap:var(--gap-2)}.gap-3{gap:var(--gap-3)}.gap-4{gap:var(--gap-4)}.gap-5{gap:var(--gap-5)}.gap-6{gap:var(--gap-6)}.gap-8{gap:var(--gap-8)}.gap-10{gap:var(--gap-10)}.gap-12{gap:var(--gap-12)}.gap-16{gap:var(--gap-16)}.gap-20{gap:var(--gap-20)}.gap-24{gap:var(--gap-24)}.gap-32{gap:var(--gap-32)}@media (width>=640px){.sm\:grid{display:grid}.sm\:grid-cols-12{grid-template-columns:repeat(var(--grid-columns),1fr)}.sm\:gap-0{gap:.5rem;gap:var(--gap-0)}.sm\:gap-1{gap:var(--gap-1)}.sm\:gap-2{gap:var(--gap-2)}.sm\:gap-3{gap:var(--gap-3)}.sm\:gap-4{gap:var(--gap-4)}.sm\:gap-5{gap:var(--gap-5)}.sm\:gap-6{gap:var(--gap-6)}.sm\:gap-8{gap:var(--gap-8)}.sm\:gap-10{gap:var(--gap-10)}.sm\:gap-12{gap:var(--gap-12)}.sm\:gap-16{gap:var(--gap-16)}.sm\:gap-20{gap:var(--gap-20)}.sm\:gap-24{gap:var(--gap-24)}.sm\:gap-32{gap:var(--gap-32)}}@media (width>=768px){.md\:grid{display:grid}.md\:grid-cols-12{grid-template-columns:repeat(var(--grid-columns),1fr)}.md\:gap-0{gap:.5rem;gap:var(--gap-0)}.md\:gap-1{gap:var(--gap-1)}.md\:gap-2{gap:var(--gap-2)}.md\:gap-3{gap:var(--gap-3)}.md\:gap-4{gap:var(--gap-4)}.md\:gap-5{gap:var(--gap-5)}.md\:gap-6{gap:var(--gap-6)}.md\:gap-8{gap:var(--gap-8)}.md\:gap-10{gap:var(--gap-10)}.md\:gap-12{gap:var(--gap-12)}.md\:gap-16{gap:var(--gap-16)}.md\:gap-20{gap:var(--gap-20)}.md\:gap-24{gap:var(--gap-24)}.md\:gap-32{gap:var(--gap-32)}}.border{border-width:var(--border-width-normal);border-style:var(--border-style-solid)}.border-thin{border-width:var(--border-width-thin)}.border-thick{border-width:var(--border-width-thick)}.rounded-none{border-radius:var(--border-radius-none)}.rounded-sm{border-radius:var(--border-radius-sm)}.rounded,.rounded-md{border-radius:var(--border-radius-md)}.rounded-lg{border-radius:var(--border-radius-lg)}.rounded-xl{border-radius:var(--border-radius-xl)}.rounded-2xl{border-radius:var(--border-radius-2xl)}.rounded-full{border-radius:var(--border-radius-full)}@media (width>=640px){.sm\:border{border-width:var(--border-width-normal);border-style:var(--border-style-solid)}.sm\:border-thin{border-width:var(--border-width-thin)}.sm\:border-thick{border-width:var(--border-width-thick)}.sm\:rounded-none{border-radius:var(--border-radius-none)}.sm\:rounded-sm,.sm\:rounded,.sm\:rounded-md{border-radius:var(--border-radius-sm)}.sm\:rounded-lg{border-radius:var(--border-radius-lg)}.sm\:rounded-xl{border-radius:var(--border-radius-xl)}.sm\:rounded-2xl{border-radius:var(--border-radius-2xl)}.sm\:rounded-full{border-radius:var(--border-radius-full)}}@media (width>=768px){.md\:border{border-width:var(--border-width-normal);border-style:var(--border-style-solid)}.md\:border-thin{border-width:var(--border-width-thin)}.md\:border-thick{border-width:var(--border-width-thick)}.md\:rounded-none{border-radius:var(--border-radius-none)}.md\:rounded-sm{border-radius:var(--border-radius-sm)}.md\:rounded,.md\:rounded-md{border-radius:var(--border-radius-md)}.md\:rounded-lg{border-radius:var(--border-radius-lg)}.md\:rounded-xl{border-radius:var(--border-radius-xl)}.md\:rounded-2xl{border-radius:var(--border-radius-2xl)}.md\:rounded-full{border-radius:var(--border-radius-full)}}.shadow{box-shadow:var(--shadow)}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}@media (width>=768px){.md\:shadow{box-shadow:var(--shadow)}.md\:shadow-xs{box-shadow:var(--shadow-xs)}.md\:shadow-sm{box-shadow:var(--shadow-sm)}.md\:shadow-md{box-shadow:var(--shadow-md)}.md\:shadow-lg{box-shadow:var(--shadow-lg)}.md\:shadow-xl{box-shadow:var(--shadow-xl)}}.opacity-0{opacity:var(--opacity-0)}.opacity-25{opacity:var(--opacity-25)}.opacity-50{opacity:var(--opacity-50)}.opacity-75{opacity:var(--opacity-75)}.opacity-100{opacity:var(--opacity-100)}@media (width>=768px){.md\:opacity-0{opacity:var(--opacity-0)}.md\:opacity-25{opacity:var(--opacity-25)}.md\:opacity-50{opacity:var(--opacity-50)}.md\:opacity-75{opacity:var(--opacity-75)}.md\:opacity-100{opacity:var(--opacity-100)}}.transition-fast{transition:var(--transition-fast)}.transition-normal{transition:var(--transition-normal)}.transition-slow{transition:var(--transition-slow)}.ring-primary-offset-primary:focus:not(.dark *),.ring-primary-offset-primary:active:not(.dark *){--ring-shadow:var(--ring-inset)0 0 0 calc(1px + var(--ring-offset-width))var(--primary-700);--ring-offset-shadow:var(--ring-inset)0 0 0 var(--ring-offset-width)var(--primary-400);box-shadow:var(--ring-offset-shadow),var(--ring-shadow),var(--shadow,0 0 #0000)}.ring-secondary-offset-secondary:focus:not(.dark *),.ring-secondary-offset-secondary:active:not(.dark *){--ring-shadow:var(--ring-inset)0 0 0 calc(1px + var(--ring-offset-width))var(--secondary-700);--ring-offset-shadow:var(--ring-inset)0 0 0 var(--ring-offset-width)var(--secondary-400);box-shadow:var(--ring-offset-shadow),var(--ring-shadow),var(--shadow,0 0 #0000)}.ring-accent-offset-accent:focus:not(.dark *),.ring-accent-offset-accent:active:not(.dark *){--ring-shadow:var(--ring-inset)0 0 0 calc(1px + var(--ring-offset-width))var(--accent-700);--ring-offset-shadow:var(--ring-inset)0 0 0 var(--ring-offset-width)var(--accent-400);box-shadow:var(--ring-offset-shadow),var(--ring-shadow),var(--shadow,0 0 #0000)}.fix-scroll-layout-shift-right{padding-right:var(--removed-body-scroll-bar-size)}.fix-scroll-layout-shift-left{padding-left:var(--removed-body-scroll-bar-size)}}@layer infonomic-theme{input:autofill,input:autofill:hover,input:autofill:focus,textarea:autofill,textarea:autofill:hover,textarea:autofill:focus,select:autofill,select:autofill:hover,select:autofill:focus{-webkit-text-fill-color:black!important;color:#000!important;background-color:#fad9a7!important;border:1px solid #d89d3d!important;transition:background-color 5000s ease-in-out!important;-webkit-box-shadow:inset 0 0 0 1000px #fff2dc!important;box-shadow:inset 0 0 0 1000px #fff2dc!important}.dark input:autofill,.dark input:autofill:hover,.dark input:autofill:focus,.dark textarea:autofill,.dark textarea:autofill:hover,.dark textarea:autofill:focus,.dark select:autofill,.dark select:autofill:hover,.dark select:autofill:focus{border:1px solid var(--theme-600)!important;-webkit-text-fill-color:white!important;-webkit-box-shadow:0 0 0px 1000px var(--theme-600)inset!important;box-shadow:0 0 0px 1000px var(--theme-600)inset!important;color:#fff!important;background-color:#64646480!important;transition:background-color 5000s ease-in-out!important}:root{--scroll-bar-thumb:var(--theme-400);--scroll-bar-track:var(--theme-600)}:root.dark{--scroll-bar-thumb:var(--canvas-700);--scroll-bar-track:var(--canvas-900)}::-webkit-scrollbar{width:.6em;height:.6em}::-webkit-scrollbar-thumb{background:var(--scroll-bar-thumb)}::-webkit-scrollbar-track{background:var(--scroll-bar-track)}::-webkit-scrollbar-corner{background:var(--scroll-bar-track)}html{scrollbar-width:thin;scrollbar-color:var(--scroll-bar-thumb)var(--scroll-bar-track)}.component--scroller,.dark .component--scroller{--scroll-bar-thumb:var(--scroll-bar-thumb);--scroll-bar-track:var(--scroll-bar-track)}.component--scroller{scrollbar-width:thin;scrollbar-color:var(--scroll-bar-thumb)var(--scroll-bar-track);overflow-y:auto}:root{--fill-primary-strong:var(--primary-600);--fill-primary-strong-hover:oklch(from var(--primary-600)calc(l*.9)c h);--fill-primary-strong-disabled:oklch(from var(--primary-600)calc(l*1.1)calc(c*.85)h);--fill-primary-weak:oklch(from var(--primary-600)calc(l*2.15)calc(c*.2)h);--fill-primary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-primary:white;--text-on-primary-disabled:oklch(90% 5.0664e-8 90);--text-primary-strong:var(--primary-700);--text-primary-weak:oklch(from var(--primary-600)calc(l*.7)c h);--text-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.5)h);--stroke-primary:var(--primary-700);--stroke-primary-hover:oklch(from var(--primary-700)calc(l*.85)c h);--stroke-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.8)h);--ring-primary:var(--primary-600);--gradient-primary-start:var(--primary-500);--gradient-primary-end:var(--primary-700);--gradient-primary-foreground:white;--gradient-primary-disabled:oklch(from var(--primary-700)calc(l*1.2)calc(c*.85)h);--fill-secondary-strong:var(--secondary-500);--fill-secondary-strong-hover:oklch(from var(--secondary-500)calc(l*.95)c h);--fill-secondary-strong-disabled:oklch(from var(--secondary-500)calc(l*1.1)calc(c*.85)h);--fill-secondary-weak:oklch(from var(--secondary-500)calc(l*1.6)calc(c*.2)h);--fill-secondary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-secondary:black;--text-on-secondary-disabled:oklch(0% 0 0);--text-secondary-strong:var(--secondary-950);--text-secondary-weak:oklch(from var(--secondary-500)calc(l*.7)c h);--text-secondary-disabled:oklch(from var(--secondary-950)calc(l*1.5)calc(c*.5)h);--stroke-secondary:var(--secondary-700);--stroke-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.5)calc(c*.8)h);--ring-secondary:var(--secondary-500);--stroke-secondary-hover:oklch(from var(--secondary-700)calc(l*.85)c h);--gradient-secondary-start:var(--secondary-500);--gradient-secondary-end:var(--secondary-700);--gradient-secondary-foreground:black;--gradient-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.2)calc(c*.85)h);--fill-noeffect-strong:var(--gray-100);--fill-noeffect-strong-hover:oklch(from var(--gray-100)calc(l*.95)c h);--fill-noeffect-strong-disabled:oklch(from var(--gray-100)calc(l*1.1)calc(c*.85)h);--fill-noeffect-weak:oklch(from var(--gray-100)calc(l*2.9)calc(c*.2)h);--fill-noeffect-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-noeffect:black;--text-on-noeffect-disabled:oklch(0% 0 0);--text-noeffect-strong:var(--gray-800);--text-noeffect-weak:oklch(from var(--gray-100)calc(l*.5)c h);--text-noeffect-disabled:oklch(from var(--gray-800)calc(l*1.5)calc(c*.5)h);--stroke-noeffect:var(--gray-500);--stroke-noeffect-hover:oklch(from var(--gray-500)calc(l*.75)c h);--stroke-noeffect-disabled:oklch(from var(--gray-500)calc(l*1.5)calc(c*.8)h);--ring-noeffect:var(--gray-200);--gradient-noeffect-start:var(--gray-100);--gradient-noeffect-end:var(--gray-200);--gradient-noeffect-foreground:black;--gradient-noeffect-hover:var(--gray-400);--gradient-noeffect-disabled:oklch(from var(--gray-200)calc(l*1.2)calc(c*.85)h);--fill-success-strong:var(--green-400);--fill-success-strong-hover:oklch(from var(--green-400)calc(l*.9)c h);--fill-success-strong-disabled:oklch(from var(--green-400)calc(l*1.1)calc(c*.85)h);--fill-success-weak:oklch(from var(--green-400)calc(l*1.6)calc(c*.2)h);--fill-success-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-success:white;--text-on-success-disabled:oklch(90% 5.0664e-8 90);--text-success-strong:var(--green-600);--text-success-weak:oklch(from var(--green-400)calc(l*.7)c h);--text-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.5)h);--stroke-success:var(--green-600);--stroke-success-hover:oklch(from var(--green-600)calc(l*.85)c h);--stroke-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.8)h);--ring-success:var(--green-400);--gradient-success-start:var(--green-500);--gradient-success-end:var(--green-700);--gradient-success-foreground:white;--gradient-success-disabled:oklch(from var(--green-700)calc(l*1.2)calc(c*.85)h);--fill-info-strong:var(--blue-400);--fill-info-strong-hover:oklch(from var(--blue-400)calc(l*.9)c h);--fill-info-strong-disabled:oklch(from var(--blue-400)calc(l*1.1)calc(c*.85)h);--fill-info-weak:oklch(from var(--blue-400)calc(l*1.9)calc(c*.2)h);--fill-info-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-info:white;--text-on-info-disabled:oklch(90% 5.0664e-8 90);--text-info-strong:var(--blue-300);--text-info-weak:oklch(from var(--blue-400)calc(l*.7)c h);--text-info-disabled:oklch(from var(--blue-300)calc(l*1.5)calc(c*.5)h);--stroke-info:var(--blue-500);--stroke-info-hover:oklch(from var(--blue-500)calc(l*.85)c h);--stroke-info-disabled:oklch(from var(--blue-500)calc(l*1.5)calc(c*.8)h);--ring-info:var(--blue-400);--gradient-info-start:var(--blue-500);--gradient-info-end:var(--blue-700);--gradient-info-foreground:white;--gradient-info-disabled:oklch(from var(--blue-700)calc(l*1.2)calc(c*.85)h);--fill-warning-strong:var(--yellow-300);--fill-warning-strong-hover:oklch(from var(--yellow-300)calc(l*.95)c h);--fill-warning-strong-disabled:oklch(from var(--yellow-300)calc(l*1.1)calc(c*.85)h);--fill-warning-weak:oklch(from var(--yellow-300)calc(l*1.9)calc(c*.2)h);--fill-warning-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-warning:black;--text-on-warning-disabled:oklch(0% 0 0);--text-warning-strong:var(--yellow-700);--text-warning-weak:oklch(from var(--yellow-300)calc(l*.6)c h);--text-warning-disabled:oklch(from var(--yellow-700)calc(l*1.5)calc(c*.5)h);--stroke-warning:var(--yellow-500);--stroke-warning-hover:oklch(from var(--yellow-500)calc(l*.85)c h);--stroke-warning-disabled:oklch(from var(--yellow-500)calc(l*1.5)calc(c*.8)h);--ring-warning:var(--yellow-300);--gradient-warning-start:var(--yellow-300);--gradient-warning-end:var(--yellow-400);--gradient-warning-foreground:black;--gradient-warning-disabled:oklch(from var(--yellow-400)calc(l*1.2)calc(c*.85)h);--fill-danger-strong:var(--red-400);--fill-danger-strong-hover:oklch(from var(--red-400)calc(l*.9)c h);--fill-danger-strong-disabled:oklch(from var(--red-400)calc(l*1.1)calc(c*.85)h);--fill-danger-weak:oklch(from var(--red-400)calc(l*1.8)calc(c*.3)h);--fill-danger-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-danger:white;--text-on-danger-disabled:oklch(90% 5.0664e-8 90);--text-danger-strong:var(--red-500);--text-danger-weak:oklch(from var(--red-400)calc(l*.7)c h);--text-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.5)h);--stroke-danger:var(--red-500);--stroke-danger-hover:oklch(from var(--red-500)calc(l*.85)c h);--stroke-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.8)h);--ring-danger:var(--red-400);--gradient-danger-start:var(--red-500);--gradient-danger-end:var(--red-700);--gradient-danger-foreground:white;--gradient-danger-disabled:oklch(from var(--red-700)calc(l*1.2)calc(c*.85)h);--surface-panel:var(--canvas-25);--surface-panel-elevated:white;--surface-panel-border:var(--border-color);--surface-item:transparent;--surface-item-hover:var(--canvas-50);--surface-item-active:var(--canvas-100);--surface-item-text:var(--text);--surface-item-text-hover:var(--text);--surface-item-text-active:var(--text);--surface-item-text-disabled:var(--gray-400);--surface-panel-scrollbar:var(--gray-50);--surface-panel-scrollbar-thumb:var(--primary-100)}.dark{--fill-primary-strong:var(--primary-600);--fill-primary-strong-hover:oklch(from var(--primary-600)calc(l*.9)c h);--fill-primary-strong-disabled:oklch(from var(--primary-600)calc(l*.85)calc(c*.85)h);--fill-primary-weak:oklch(from var(--primary-600)calc(l*.45)calc(c*.1)h);--fill-primary-weak-hover:var(--canvas-800);--text-on-primary:white;--text-on-primary-disabled:oklch(85% 5.0664e-8 90);--text-primary-strong:var(--primary-100);--text-primary-weak:var(--primary-600);--text-primary-disabled:oklch(from var(--primary-100)calc(l*.8)calc(c*.8)h);--stroke-primary:var(--primary-500);--stroke-primary-hover:oklch(from var(--primary-500)calc(l*1.1)c h);--stroke-primary-disabled:oklch(from var(--primary-500)calc(l*.8)calc(c*.8)h);--ring-primary:var(--primary-600);--gradient-primary-start:var(--primary-500);--gradient-primary-end:var(--primary-700);--gradient-primary-foreground:white;--gradient-primary-disabled:oklch(from var(--primary-700)calc(l*.85)calc(c*.85)h);--fill-secondary-strong:var(--secondary-500);--fill-secondary-strong-hover:oklch(from var(--secondary-500)calc(l*.95)c h);--fill-secondary-strong-disabled:oklch(from var(--secondary-500)calc(l*.85)calc(c*.85)h);--fill-secondary-weak:oklch(from var(--secondary-500)calc(l*.3)calc(c*.1)h);--fill-secondary-weak-hover:var(--canvas-800);--text-on-secondary:black;--text-on-secondary-disabled:oklch(0% 0 0);--text-secondary-strong:var(--secondary-500);--text-secondary-weak:var(--secondary-500);--text-secondary-disabled:oklch(from var(--secondary-500)calc(l*.8)calc(c*.8)h);--stroke-secondary:var(--secondary-500);--stroke-secondary-hover:oklch(from var(--secondary-500)calc(l*1.1)c h);--stroke-secondary-disabled:oklch(from var(--secondary-500)calc(l*.8)calc(c*.8)h);--ring-secondary:var(--secondary-500);--gradient-secondary-start:var(--secondary-500);--gradient-secondary-end:var(--secondary-700);--gradient-secondary-foreground:black;--gradient-secondary-disabled:oklch(from var(--secondary-700)calc(l*.85)calc(c*.85)h);--fill-noeffect-strong:var(--gray-900);--fill-noeffect-strong-hover:oklch(from var(--gray-900)calc(l*.95)c h);--fill-noeffect-strong-disabled:oklch(from var(--gray-900)calc(l*.85)calc(c*.85)h);--fill-noeffect-weak:oklch(from var(--gray-900)calc(l*.75)calc(c*.2)h);--fill-noeffect-weak-hover:var(--canvas-800);--text-on-noeffect:white;--text-on-noeffect-disabled:oklch(85% 5.0664e-8 90);--text-noeffect-strong:var(--gray-300);--text-noeffect-weak:var(--gray-300);--text-noeffect-disabled:oklch(from var(--gray-300)calc(l*.85)calc(c*.85)h);--stroke-noeffect:var(--gray-500);--stroke-noeffect-hover:oklch(from var(--gray-500)calc(l*1.2)c h);--stroke-noeffect-disabled:oklch(from var(--gray-500)calc(l*.8)calc(c*.8)h);--ring-noeffect:var(--gray-900);--gradient-noeffect-start:var(--gray-950);--gradient-noeffect-end:var(--gray-900);--gradient-noeffect-foreground:white;--gradient-noeffect-hover:var(--gray-900);--gradient-noeffect-disabled:oklch(from var(--gray-900)calc(l*.85)calc(c*.85)h);--fill-success-strong:var(--green-400);--fill-success-strong-hover:oklch(from var(--green-400)calc(l*.9)c h);--fill-success-strong-disabled:oklch(from var(--green-400)calc(l*.85)calc(c*.85)h);--fill-success-weak:oklch(from var(--green-400)calc(l*.35)calc(c*.1)h);--fill-success-weak-hover:var(--canvas-800);--text-on-success:white;--text-on-success-disabled:oklch(85% 5.0664e-8 90);--text-success-strong:var(--green-500);--text-success-weak:var(--green-400);--text-success-disabled:oklch(from var(--green-500)calc(l*.8)calc(c*.8)h);--stroke-success:var(--green-500);--stroke-success-hover:oklch(from var(--green-500)calc(l*1.1)c h);--stroke-success-disabled:oklch(from var(--green-500)calc(l*.8)calc(c*.8)h);--ring-success:var(--green-400);--gradient-success-start:var(--green-500);--gradient-success-end:var(--green-700);--gradient-success-foreground:white;--gradient-success-disabled:oklch(from var(--green-700)calc(l*.85)calc(c*.85)h);--fill-info-strong:var(--blue-400);--fill-info-strong-hover:oklch(from var(--blue-400)calc(l*.9)c h);--fill-info-strong-disabled:oklch(from var(--blue-400)calc(l*.85)calc(c*.85)h);--fill-info-weak:oklch(from var(--blue-400)calc(l*.43)calc(c*.1)h);--fill-info-weak-hover:var(--canvas-800);--text-on-info:white;--text-on-info-disabled:oklch(85% 5.0664e-8 90);--text-info-strong:var(--blue-300);--text-info-weak:var(--blue-400);--text-info-disabled:oklch(from var(--blue-300)calc(l*.8)calc(c*.8)h);--stroke-info:var(--blue-500);--stroke-info-hover:oklch(from var(--blue-500)calc(l*1.1)c h);--stroke-info-disabled:oklch(from var(--blue-500)calc(l*.8)calc(c*.8)h);--ring-info:var(--blue-400);--gradient-info-start:var(--blue-500);--gradient-info-end:var(--blue-700);--gradient-info-foreground:white;--gradient-info-disabled:oklch(from var(--blue-700)calc(l*.85)calc(c*.85)h);--fill-warning-strong:var(--yellow-300);--fill-warning-strong-hover:oklch(from var(--yellow-300)calc(l*.95)c h);--fill-warning-strong-disabled:oklch(from var(--yellow-300)calc(l*.85)calc(c*.85)h);--fill-warning-weak:oklch(from var(--yellow-300)calc(l*.31)calc(c*.1)h);--fill-warning-weak-hover:var(--canvas-800);--text-on-warning:black;--text-on-warning-disabled:oklch(0% 0 0);--text-warning-strong:var(--yellow-500);--text-warning-weak:var(--yellow-300);--text-warning-disabled:oklch(from var(--yellow-500)calc(l*.8)calc(c*.8)h);--stroke-warning:var(--yellow-500);--stroke-warning-hover:oklch(from var(--yellow-500)calc(l*1.1)c h);--stroke-warning-disabled:oklch(from var(--yellow-500)calc(l*.8)calc(c*.8)h);--ring-warning:var(--yellow-300);--gradient-warning-start:var(--yellow-300);--gradient-warning-end:var(--yellow-400);--gradient-warning-foreground:black;--gradient-warning-disabled:oklch(from var(--yellow-400)calc(l*.85)calc(c*.85)h);--fill-danger-strong:var(--red-400);--fill-danger-strong-hover:oklch(from var(--red-400)calc(l*.9)c h);--fill-danger-strong-disabled:oklch(from var(--red-400)calc(l*.85)calc(c*.85)h);--fill-danger-weak:oklch(from var(--red-400)calc(l*.4)calc(c*.1)h);--fill-danger-weak-hover:var(--canvas-800);--text-on-danger:white;--text-on-danger-disabled:oklch(85% 5.0664e-8 90);--text-danger-strong:var(--red-500);--text-danger-weak:var(--red-400);--text-danger-disabled:oklch(from var(--red-500)calc(l*.8)calc(c*.8)h);--stroke-danger:var(--red-500);--stroke-danger-hover:oklch(from var(--red-500)calc(l*1.1)c h);--stroke-danger-disabled:oklch(from var(--red-500)calc(l*.8)calc(c*.8)h);--ring-danger:var(--red-400);--gradient-danger-start:var(--red-500);--gradient-danger-end:var(--red-700);--gradient-danger-foreground:white;--gradient-danger-disabled:oklch(from var(--red-700)calc(l*.85)calc(c*.85)h);--surface-panel:var(--canvas-800);--surface-panel-elevated:var(--canvas-800);--surface-panel-border:var(--border-color);--surface-item:transparent;--surface-item-hover:var(--canvas-700);--surface-item-active:var(--canvas-600);--surface-item-text:var(--text);--surface-item-text-hover:var(--text);--surface-item-text-active:var(--text);--surface-item-text-disabled:var(--gray-500);--surface-panel-scrollbar:var(--canvas-700);--surface-panel-scrollbar-thumb:var(--primary-400)}.not-dark{--fill-primary-strong:var(--primary-600);--fill-primary-strong-hover:oklch(from var(--primary-600)calc(l*.9)c h);--fill-primary-strong-disabled:oklch(from var(--primary-600)calc(l*1.1)calc(c*.85)h);--fill-primary-weak:oklch(from var(--primary-600)calc(l*2.15)calc(c*.2)h);--fill-primary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-primary:white;--text-on-primary-disabled:oklch(90% 5.0664e-8 90);--text-primary-strong:var(--primary-700);--text-primary-weak:oklch(from var(--primary-600)calc(l*.7)c h);--text-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.5)h);--stroke-primary:var(--primary-700);--stroke-primary-hover:oklch(from var(--primary-700)calc(l*.85)c h);--stroke-primary-disabled:oklch(from var(--primary-700)calc(l*1.5)calc(c*.8)h);--ring-primary:var(--primary-600);--gradient-primary-start:var(--primary-500);--gradient-primary-end:var(--primary-700);--gradient-primary-foreground:white;--gradient-primary-disabled:oklch(from var(--primary-700)calc(l*1.2)calc(c*.85)h);--fill-secondary-strong:var(--secondary-500);--fill-secondary-strong-hover:oklch(from var(--secondary-500)calc(l*.95)c h);--fill-secondary-strong-disabled:oklch(from var(--secondary-500)calc(l*1.1)calc(c*.85)h);--fill-secondary-weak:oklch(from var(--secondary-500)calc(l*1.6)calc(c*.2)h);--fill-secondary-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-secondary:black;--text-on-secondary-disabled:oklch(0% 0 0);--text-secondary-strong:var(--secondary-950);--text-secondary-weak:oklch(from var(--secondary-500)calc(l*.7)c h);--text-secondary-disabled:oklch(from var(--secondary-950)calc(l*1.5)calc(c*.5)h);--stroke-secondary:var(--secondary-700);--stroke-secondary-hover:oklch(from var(--secondary-700)calc(l*.85)c h);--stroke-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.5)calc(c*.8)h);--ring-secondary:var(--secondary-500);--gradient-secondary-start:var(--secondary-500);--gradient-secondary-end:var(--secondary-700);--gradient-secondary-foreground:black;--gradient-secondary-disabled:oklch(from var(--secondary-700)calc(l*1.2)calc(c*.85)h);--fill-noeffect-strong:var(--gray-100);--fill-noeffect-strong-hover:oklch(from var(--gray-100)calc(l*.95)c h);--fill-noeffect-strong-disabled:oklch(from var(--gray-100)calc(l*1.1)calc(c*.85)h);--fill-noeffect-weak:oklch(from var(--gray-100)calc(l*2.9)calc(c*.2)h);--fill-noeffect-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-noeffect:black;--text-on-noeffect-disabled:oklch(0% 0 0);--text-noeffect-strong:var(--gray-800);--text-noeffect-weak:oklch(from var(--gray-100)calc(l*.5)c h);--text-noeffect-disabled:oklch(from var(--gray-800)calc(l*1.5)calc(c*.5)h);--stroke-noeffect:var(--gray-500);--stroke-noeffect-hover:oklch(from var(--gray-500)calc(l*.75)c h);--stroke-noeffect-disabled:oklch(from var(--gray-500)calc(l*1.5)calc(c*.8)h);--ring-noeffect:var(--gray-200);--gradient-noeffect-start:var(--gray-100);--gradient-noeffect-end:var(--gray-200);--gradient-noeffect-foreground:black;--gradient-noeffect-hover:var(--gray-400);--gradient-noeffect-disabled:oklch(from var(--gray-200)calc(l*1.2)calc(c*.85)h);--fill-success-strong:var(--green-400);--fill-success-strong-hover:oklch(from var(--green-400)calc(l*.9)c h);--fill-success-strong-disabled:oklch(from var(--green-400)calc(l*1.1)calc(c*.85)h);--fill-success-weak:oklch(from var(--green-400)calc(l*1.6)calc(c*.2)h);--fill-success-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-success:white;--text-on-success-disabled:oklch(90% 5.0664e-8 90);--text-success-strong:var(--green-600);--text-success-weak:oklch(from var(--green-400)calc(l*.7)c h);--text-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.5)h);--stroke-success:var(--green-600);--stroke-success-hover:oklch(from var(--green-600)calc(l*.85)c h);--stroke-success-disabled:oklch(from var(--green-600)calc(l*1.5)calc(c*.8)h);--ring-success:var(--green-400);--gradient-success-start:var(--green-500);--gradient-success-end:var(--green-700);--gradient-success-foreground:white;--gradient-success-disabled:oklch(from var(--green-700)calc(l*1.2)calc(c*.85)h);--fill-info-strong:var(--blue-400);--fill-info-strong-hover:oklch(from var(--blue-400)calc(l*.9)c h);--fill-info-strong-disabled:oklch(from var(--blue-400)calc(l*1.1)calc(c*.85)h);--fill-info-weak:oklch(from var(--blue-400)calc(l*1.9)calc(c*.2)h);--fill-info-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-info:white;--text-on-info-disabled:oklch(90% 5.0664e-8 90);--text-info-strong:var(--blue-300);--text-info-weak:oklch(from var(--blue-400)calc(l*.7)c h);--text-info-disabled:oklch(from var(--blue-300)calc(l*1.5)calc(c*.5)h);--stroke-info:var(--blue-500);--stroke-info-hover:oklch(from var(--blue-500)calc(l*.85)c h);--stroke-info-disabled:oklch(from var(--blue-500)calc(l*1.5)calc(c*.8)h);--ring-info:var(--blue-400);--gradient-info-start:var(--blue-500);--gradient-info-end:var(--blue-700);--gradient-info-foreground:white;--gradient-info-disabled:oklch(from var(--blue-700)calc(l*1.2)calc(c*.85)h);--fill-warning-strong:var(--yellow-300);--fill-warning-strong-hover:oklch(from var(--yellow-300)calc(l*.95)c h);--fill-warning-strong-disabled:oklch(from var(--yellow-300)calc(l*1.1)calc(c*.85)h);--fill-warning-weak:oklch(from var(--yellow-300)calc(l*1.9)calc(c*.2)h);--fill-warning-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-warning:black;--text-on-warning-disabled:oklch(0% 0 0);--text-warning-strong:var(--yellow-700);--text-warning-weak:oklch(from var(--yellow-300)calc(l*.6)c h);--text-warning-disabled:oklch(from var(--yellow-700)calc(l*1.5)calc(c*.5)h);--stroke-warning:var(--yellow-500);--stroke-warning-hover:oklch(from var(--yellow-500)calc(l*.85)c h);--stroke-warning-disabled:oklch(from var(--yellow-500)calc(l*1.5)calc(c*.8)h);--ring-warning:var(--yellow-300);--gradient-warning-start:var(--yellow-300);--gradient-warning-end:var(--yellow-400);--gradient-warning-foreground:black;--gradient-warning-disabled:oklch(from var(--yellow-400)calc(l*1.2)calc(c*.85)h);--fill-danger-strong:var(--red-400);--fill-danger-strong-hover:oklch(from var(--red-400)calc(l*.9)c h);--fill-danger-strong-disabled:oklch(from var(--red-400)calc(l*1.1)calc(c*.85)h);--fill-danger-weak:oklch(from var(--red-400)calc(l*1.8)calc(c*.3)h);--fill-danger-weak-hover:oklch(from var(--canvas-50)calc(l*.995)c h);--text-on-danger:white;--text-on-danger-disabled:oklch(90% 5.0664e-8 90);--text-danger-strong:var(--red-500);--text-danger-weak:oklch(from var(--red-400)calc(l*.7)c h);--text-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.5)h);--stroke-danger:var(--red-500);--stroke-danger-hover:oklch(from var(--red-500)calc(l*.85)c h);--stroke-danger-disabled:oklch(from var(--red-500)calc(l*1.5)calc(c*.8)h);--ring-danger:var(--red-400);--gradient-danger-start:var(--red-500);--gradient-danger-end:var(--red-700);--gradient-danger-foreground:white;--gradient-danger-disabled:oklch(from var(--red-700)calc(l*1.2)calc(c*.85)h);--surface-panel:var(--canvas-25);--surface-panel-elevated:white;--surface-panel-border:var(--border-color);--surface-item:transparent;--surface-item-hover:var(--canvas-50);--surface-item-active:var(--canvas-100);--surface-item-text:var(--text);--surface-item-text-hover:var(--text);--surface-item-text-active:var(--text);--surface-item-text-disabled:var(--gray-400);--surface-panel-scrollbar:var(--gray-50);--surface-panel-scrollbar-thumb:var(--primary-100)}:root{--background:var(--canvas-25);--foreground:var(--gray-900);--text:var(--gray-900);--headings:var(--primary-700);--muted:oklch(from var(--foreground)calc(l*2)c h);--border-color:var(--gray-100);--shadow:var(--shadow-md);--loader-color:var(--primary-500);--invert-background:var(--canvas-900);--invert-foreground:var(--gray-50);--invert-text:var(--gray-50);--invert-headings:var(--gray-50);--invert-muted:oklch(from var(--foreground)calc(l*.75)c h);--invert-border-color:var(--canvas-700);--invert-shadow:var(--shadow-lg);--invert-loader-color:var(--gray-50)}.dark{--background:var(--invert-background);--foreground:var(--invert-foreground);--text:var(--invert-text);--headings:var(--invert-headings);--border-color:var(--invert-border-color);--shadow:var(--invert-shadow);--muted:var(--invert-muted);--loader-color:var(--invert-loader-color)}.not-dark{--background:var(--canvas-25);--foreground:var(--gray-900);--text:var(--gray-900);--headings:var(--primary-800);--muted:oklch(from var(--foreground)calc(l*2)c h);--border-color:var(--gray-100);--shadow:var(--shadow-md);--loader-color:var(--primary-500)}html{color:var(--text);font-size:1rem}html .not-dark{color:var(--text)}::selection{background-color:var(--theme-600);color:#fff}.dark ::selection{background-color:var(--theme-200);color:var(--gray-900)}.background{background-color:var(--background)}.foreground{color:var(--foreground)}.text{color:var(--text)}.headings{color:var(--headings)}.muted{color:var(--muted);font-size:.925rem}.shadow{box-shadow:var(--shadow)}.border-color{border-color:var(--border-color)}.border{border-color:var(--border-color);border-width:var(--border-width-thin);border-style:var(--border-style-solid);border-radius:var(--border-radius-sm)}.external-link:after{content:"";background-image:url(/external-link-light.svg);background-position:20%;background-repeat:no-repeat;background-size:65%;width:1.1rem;height:1.1rem;margin-right:-5px;display:inline-block}.dark .external-link:after{background-image:url(/external-link-dark.svg)}}@layer infonomic-typography;@layer infonomic-components{.component--icon-element-root svg{max-width:100%;max-height:100%;margin:auto;display:block}.component--hamburger{z-index:200;cursor:pointer;width:42px;height:34px;font:inherit;color:inherit;text-transform:none;background-color:#0000;border:0;border-radius:4px;justify-content:center;align-items:center;margin:0;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:ease;display:flex;position:relative;overflow:hidden}.component--hamburger:active,.component--hamburger:focus{border:.5px dashed #fff;border-radius:4px;outline:none!important}.component--hamburger .box{width:24px;height:24px;display:block;position:relative}.component--hamburger .inner{margin-top:-1px;transition-duration:75ms;transition-timing-function:cubic-bezier(.55,.055,.675,.19);display:block;top:50%}.component--hamburger .inner,.component--hamburger .inner:before,.component--hamburger .inner:after{border-radius:0;width:24px;height:2px;transition-property:transform;transition-duration:.15s;transition-timing-function:ease;position:absolute}.component--hamburger .inner:before,.component--hamburger .inner:after{content:"";display:block}.component--hamburger .inner:before{transition:top 75ms .12s,opacity 75ms;top:-8px}.component--hamburger .inner:after{transition:bottom 75ms .12s,transform 75ms cubic-bezier(.55,.055,.675,.19);bottom:-8px}.component--hamburger.is_active .inner{transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:rotate(45deg)}.component--hamburger.is_active .inner:before{opacity:0;transition:top 75ms,opacity 75ms .12s;top:0}.component--hamburger.is_active .inner:after{transition:bottom 75ms,transform 75ms cubic-bezier(.215,.61,.355,1) .12s;bottom:0;transform:rotate(-90deg)}}.btn-to-top{opacity:0;visibility:hidden;z-index:20;color:#fff;background-color:var(--primary-500);cursor:pointer;border-style:none;outline:none;justify-content:center;align-items:center;width:0;height:0;margin:0;padding:0;text-decoration:none;transition:all .3s cubic-bezier(.25,.8,.5,1),color 1ms;display:flex;position:fixed;bottom:45px;right:30px}.btn-to-top span{width:18px;padding-bottom:3px}.btn-to-top span .icon path{stroke:none;fill:#fff}@media screen and (width>=587px){.btn-to-top{bottom:45px;right:45px}.btn-to-top span{width:18px}}.btn-to-top:hover,.btn-to-top:focus{color:#fff;background-color:var(--primary-500);transform:translateY(-5px)}.dark .btn-to-top{background-color:var(--primary-600)}.dark .btn-to-top:hover,.dark .btn-to-top:focus{color:#fff;background-color:var(--primary-600)}.btn-floating{opacity:1;visibility:visible;border-radius:20px;width:40px;min-width:0;height:40px;padding:0;bottom:20px;right:10px}@media screen and (width>=587px){.btn-floating{border-radius:21px;width:42px;height:42px;bottom:22px;right:22px}}ul.check{padding-left:0}.component--list-item-checkbox{outline:none;margin-left:0;margin-right:8px;padding-left:28px;padding-right:24px;list-style-type:none;position:relative}@media screen and (width>=768px){ul.check{padding-left:1rem}}.component--list-item-checkbox:before{content:"";cursor:pointer;background-repeat:no-repeat;background-size:cover;border:1px solid #7d7d7d;border-radius:2px;width:16px;height:16px;display:block;position:absolute;top:8px;left:0}.component--list-item-checkbox-checked{text-decoration:line-through}.component--list-item-checkbox-checked:before{border:1px solid var(--secondary-300);background-color:var(--secondary-400);background-repeat:no-repeat}.component--list-item-checkbox-checked:after{content:"";cursor:pointer;border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;display:block;position:absolute;top:11px;left:6px;right:7px;transform:rotate(45deg)}.lds-ellipsis{display:inline-block;position:relative}.lds-ellipsis div{background:#fff;border-radius:50%;width:16.25%;height:32.25%;animation-timing-function:cubic-bezier(0,1,1,0);position:absolute;top:41.25%}.lds-ellipsis div:first-child{animation:.6s infinite lds-ellipsis1;left:10%}.lds-ellipsis div:nth-child(2){animation:.6s infinite lds-ellipsis2;left:10%}.lds-ellipsis div:nth-child(3){animation:.6s infinite lds-ellipsis2;left:40%}.lds-ellipsis div:nth-child(4){animation:.6s infinite lds-ellipsis3;left:70%}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(184.61%)}}.lds-ring{display:inline-block;position:relative}.lds-ring div{box-sizing:border-box;border:8px solid #0000;border-top-color:#fff;border-radius:50%;animation:1.2s cubic-bezier(.5,0,.5,1) infinite lds-ring;display:block;position:absolute}.lds-ring div:first-child{animation-delay:-.45s}.lds-ring div:nth-child(2){animation-delay:-.3s}.lds-ring div:nth-child(3){animation-delay:-.15s}@keyframes lds-ring{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lds-spinner{color:official;width:56px;height:56px;display:inline-block;position:relative}.lds-spinner div{transform-origin:28px 32px;animation:1.2s linear infinite lds-spinner}.lds-spinner div .div-after{content:" ";background:#fff;border-radius:20%;width:5px;height:14px;display:block;position:absolute;top:0;left:25px}.lds-spinner div:first-child{animation-delay:-1.1s;transform:rotate(0)}.lds-spinner div:nth-child(2){animation-delay:-1s;transform:rotate(30deg)}.lds-spinner div:nth-child(3){animation-delay:-.9s;transform:rotate(60deg)}.lds-spinner div:nth-child(4){animation-delay:-.8s;transform:rotate(90deg)}.lds-spinner div:nth-child(5){animation-delay:-.7s;transform:rotate(120deg)}.lds-spinner div:nth-child(6){animation-delay:-.6s;transform:rotate(150deg)}.lds-spinner div:nth-child(7){animation-delay:-.5s;transform:rotate(180deg)}.lds-spinner div:nth-child(8){animation-delay:-.4s;transform:rotate(210deg)}.lds-spinner div:nth-child(9){animation-delay:-.3s;transform:rotate(240deg)}.lds-spinner div:nth-child(10){animation-delay:-.2s;transform:rotate(270deg)}.lds-spinner div:nth-child(11){animation-delay:-.1s;transform:rotate(300deg)}.lds-spinner div:nth-child(12){animation-delay:0s;transform:rotate(330deg)}@keyframes lds-spinner{0%{opacity:1}to{opacity:0}}.component--fade-in-lift{opacity:0;visibility:hidden;will-change:opacity,visibility;transition:opacity .5s ease-out,transform .7s ease-out;transform:matrix(1,0,0,1,0,18)}.component--fade-in-lift.is-visible{opacity:1;visibility:visible;transform:matrix(1,0,0,1,0,0)}@keyframes checkBoxIn{0%{opacity:0;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}80%{transform:scale(.9)}to{transform:scale(1)}}@keyframes checkBoxOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.component--checkbox,.component--checkbox-icon{transition:all .2s ease-in-out}.component--checkbox-indicator[data-state=checked] .component--checkbox-icon{opacity:1;animation:.3s cubic-bezier(.25,1.5,.5,1) forwards checkBoxIn;transform:scale(1)}.component--checkbox-indicator[data-state=unchecked] .component--checkbox-icon{opacity:0;animation:.2s ease-in checkBoxOut;transform:scale(.8)}.component--card{background:var(--theme-25);color:oklch(12.97% .005 285.67);border:solid 1px var(--gray-50)}.component--card:is(.dark *){background:var(--canvas-800);color:var(--gray-100);border:solid 1px var(--canvas-700)}.component--card--hover:hover{background:oklch(from var(--theme-50)1 .03 h);transition:all .2s ease-in-out}.component--card--hover:hover:is(.dark *){background:oklch(from var(--canvas-700).258 c h)}.toast-viewport{--viewport-padding:25px;padding:var(--viewport-padding);z-index:2147483647;outline:none;flex-direction:column;gap:10px;width:100vw;max-width:100vw;margin:0;list-style:none;display:flex;position:fixed;bottom:0;right:0}.popover-content[data-state=open][data-side=top]{animation:.1s ease-in slideDownAndFade}.popover-content[data-state=open][data-side=right]{animation:.1s ease-in slideLeftAndFade}.popover-content[data-state=open][data-side=bottom]{animation:.1s ease-in slideUpAndFade}.popover-content[data-state=open][data-side=left]{animation:.1s ease-in slideRightAndFade}.dropdown-menu-content[data-side=top],.dropdown-menu-subcontent[data-side=top]{animation:.1s ease-in slideDownAndFade}.dropdown-menu-content[data-side=right],.dropdown-menu-subcontent[data-side=right]{animation:.1s ease-in slideLeftAndFade}.dropdown-menu-content[data-side=bottom],.dropdown-menu-subcontent[data-side=bottom]{animation:.1s ease-in slideUpAndFade}.dropdown-menu-content[data-side=left],.dropdown-menu-subcontent[data-side=left]{animation:.1s ease-in slideRightAndFade}
package/dist/widgets/datepicker/datepicker_module.css CHANGED
@@ -107,11 +107,11 @@
107
107
  }
108
108
 
109
109
  .close-bJApom:hover {
110
- background-color: var(--violet-4);
110
+ background-color: var(--primary-400);
111
111
  }
112
112
 
113
113
  .close-bJApom:focus {
114
- box-shadow: 0 0 0 2px var(--violet-7);
114
+ box-shadow: 0 0 0 2px var(--primary-600);
115
115
  }
116
116
 
117
117
  .time-picker-container-sVEGKe {
package/dist/widgets/drawer/drawer_module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  .drawer-container-ssf1qn {
15
- background-color: var(--canvas-25);
15
+ background-color: var(--surface-panel);
16
16
  height: 100%;
17
17
  box-shadow: var(--shadow-md);
18
18
  z-index: inherit;
@@ -24,10 +24,6 @@
24
24
  animation: .15s cubic-bezier(.16, 1, .3, 1) slideIn-dDQJvD;
25
25
  }
26
26
 
27
- .drawer-container-ssf1qn:is(.dark *) {
28
- background: var(--canvas-800);
29
- }
30
-
31
27
  .drawer-depth-0-VYE9YM.drawer-medium-ZFbdby .drawer-container-ssf1qn, .drawer-depth-0-VYE9YM.drawer-wide-nXbxPs .drawer-container-ssf1qn {
32
28
  width: 90%;
33
29
  }
package/dist/widgets/modal/modal_module.css CHANGED
@@ -16,7 +16,7 @@
16
16
  box-shadow: var(--shadow-md);
17
17
  border-radius: var(--border-radius-md);
18
18
  z-index: 20;
19
- background-color: var(--canvas-25);
19
+ background-color: var(--surface-panel);
20
20
  border: 1px solid var(--border-color);
21
21
  width: 100%;
22
22
  min-height: 300px;
@@ -29,10 +29,6 @@
29
29
  bottom: 0;
30
30
  }
31
31
 
32
- .modal-container-PPkPyj:is(.dark *) {
33
- background: var(--canvas-800);
34
- }
35
-
36
32
  @media screen and (min-width: 640px) {
37
33
  .modal-container-PPkPyj {
38
34
  width: auto;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@infonomic/uikit",
3
3
  "private": false,
4
4
  "license": "MIT",
5
- "version": "3.0.0",
5
+ "version": "3.1.0",
6
6
  "type": "module",
7
7
  "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
8
8
  "keywords": [
package/src/components/dropdown/dropdown.module.css CHANGED
@@ -5,13 +5,13 @@
5
5
  .dropdown-content,
6
6
  .dropdown-subcontent {
7
7
  z-index: 20;
8
- background-color: var(--canvas-25);
8
+ background-color: var(--surface-panel-elevated);
9
9
  padding: 4px;
10
10
  animation-duration: 400ms;
11
11
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
12
12
  will-change: transform, opacity;
13
13
  border-width: var(--border-width-thin);
14
- border-color: var(--border-color);
14
+ border-color: var(--surface-panel-border);
15
15
  border-style: var(--border-style-solid);
16
16
  border-radius: var(--border-radius-md);
17
17
  box-shadow: var(--shadow-sm);
@@ -41,6 +41,8 @@
41
41
  width: 100%;
42
42
  padding: 5px 2px;
43
43
  font-size: var(--font-size-sm);
44
+ color: var(--surface-item-text);
45
+ background-color: var(--surface-item);
44
46
  transition: background-color 0.2s;
45
47
  cursor: default;
46
48
  outline: none;
@@ -51,38 +53,21 @@
51
53
  .dropdown-item:hover,
52
54
  .dropdown-item:focus,
53
55
  .dropdown-item[data-highlighted] {
54
- background-color: var(--canvas-50);
56
+ background-color: var(--surface-item-hover);
57
+ color: var(--surface-item-text-hover);
55
58
  }
56
59
 
57
60
  .dropdown-separator {
58
61
  margin: 0 auto;
59
62
  width: 90%;
60
- background-color: var(--border-color);
63
+ background-color: var(--surface-panel-border);
61
64
  margin: var(--spacing-1) 0;
62
65
  border-top-width: var(--border-width-thin);
63
- border-top-color: var(--border-color);
66
+ border-top-color: var(--surface-panel-border);
64
67
  border-top-style: var(--border-style-solid);
65
68
  }
66
69
 
67
- /* 🌙 Dark via `.dark` class. We rely on the
68
- * consuming application to detect a user's preferred
69
- * color scheme - either by header or cookie, and set
70
- * a root html class accordingly
71
- */
72
- :global(.dark) {
73
-
74
- .dropdown-content:not(:where([class~="not-dark"], [class~="not-dark"] *)),
75
- .dropdown-subcontent:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
76
- background-color: var(--canvas-800);
77
- }
78
-
79
- /* Updated to also cover data-highlighted presence */
80
- .dropdown-item:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)),
81
- .dropdown-item:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)),
82
- .dropdown-item[data-highlighted]:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
83
- background-color: var(--canvas-700);
84
- }
85
- }
70
+ /* Dark mode handled by surface tokens in theme layer */
86
71
 
87
72
  @keyframes slideUpAndFade {
88
73
  from {
package/src/components/input/help-text.module.css CHANGED
@@ -3,17 +3,6 @@
3
3
  @layer infonomic-components {
4
4
  .text {
5
5
  font-size: 0.875rem;
6
- color: var(--gray-800)
7
- }
8
-
9
- /* 🌙 Dark via `.dark` class. We rely on the
10
- * consuming application to detect a user's preferred
11
- * color scheme - either by header or cookie, and set
12
- * a root html class accordingly
13
- */
14
- :global(.dark) {
15
- .text:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
16
- color: var(--gray-300);
17
- }
6
+ color: var(--muted)
18
7
  }
19
8
  }
package/src/components/input/select.module.css CHANGED
@@ -8,17 +8,13 @@
8
8
  .viewport {
9
9
  z-index: 50;
10
10
  margin-top: 2px;
11
- border: 1px solid var(--border-color);
11
+ border: 1px solid var(--surface-panel-border);
12
12
  box-shadow: var(--shadow-md);
13
13
  border-radius: var(--border-radius-md);
14
- background-color: var(--background);
14
+ background-color: var(--surface-panel-elevated);
15
15
  padding: 6px;
16
16
  }
17
17
 
18
- .viewport:is(:global(.dark) *) {
19
- background: var(--canvas-800);
20
- }
21
-
22
18
  .group {
23
19
  z-index: 50;
24
20
  }
@@ -27,22 +23,19 @@
27
23
  display: flex;
28
24
  align-items: center;
29
25
  justify-content: center;
30
- color: var(--text);
31
- border: 1px solid var(--border-color);
26
+ color: var(--surface-item-text);
27
+ border: 1px solid var(--surface-panel-border);
32
28
  box-shadow: var(--shadow-md);
33
29
  border-radius: var(--border-radius-md);
34
- background-color: var(--background);
30
+ background-color: var(--surface-panel-elevated);
35
31
  padding: 2px;
36
32
  }
37
33
 
38
- .scroll-button:is(:global(.dark) *) {
39
- background: var(--canvas-800);
40
- }
41
-
42
34
  .select-item {
43
35
  position: relative;
44
36
  user-select: none;
45
- color: var(--text);
37
+ color: var(--surface-item-text);
38
+ background-color: var(--surface-item);
46
39
  font-size: 1rem;
47
40
  line-height: 1;
48
41
  padding-right: 35px;
@@ -54,14 +47,14 @@
54
47
  }
55
48
 
56
49
  .select-item[data-disabled] {
57
- color: var(--disabled-text-color, #e0e0e0);
50
+ color: var(--surface-item-text-disabled);
58
51
  pointer-events: none;
59
52
  }
60
53
 
61
54
  .select-item[data-highlighted] {
62
55
  outline: none;
63
- background-color: var(--highlight-bg-color, #e0e0e0);
64
- color: var(--highlight-text-color, #000000);
56
+ background-color: var(--surface-item-hover);
57
+ color: var(--surface-item-text-hover);
65
58
  }
66
59
 
67
60
  .select-item-indicator {
package/src/components/pager/pagination.module.css CHANGED
@@ -72,9 +72,9 @@
72
72
  justify-content: center;
73
73
  height: 32px;
74
74
  line-height: 1;
75
- border: 1px solid var(--primary-500);
76
- background-color: white;
77
- color: var(--gray-900);
75
+ border: 1px solid var(--stroke-primary);
76
+ background-color: var(--background);
77
+ color: var(--foreground);
78
78
  font-size: var(--font-size-sm);
79
79
  }
80
80
 
@@ -96,8 +96,8 @@
96
96
  .number-button:hover,
97
97
  .previous-button:hover,
98
98
  .first-button:hover {
99
- color: white;
100
- background-color: var(--primary-600);
99
+ color: var(--text-on-primary);
100
+ background-color: var(--fill-primary-strong);
101
101
  }
102
102
 
103
103
  .last-button:disabled,
@@ -114,8 +114,8 @@
114
114
  }
115
115
 
116
116
  .number-button.active {
117
- background-color: var(--primary-600);
118
- color: white;
117
+ color: var(--text-on-primary);
118
+ background-color: var(--fill-primary-strong);
119
119
  }
120
120
 
121
121
 
@@ -137,7 +137,6 @@
137
137
  * a root html class accordingly
138
138
  */
139
139
  :global(.dark) {
140
-
141
140
  .ellipses,
142
141
  .number-button,
143
142
  .next-button,
@@ -145,21 +144,6 @@
145
144
  .previous-button,
146
145
  .first-button {
147
146
  border-color: var(--canvas-700);
148
- background-color: var(--canvas-800);
149
- color: var(--gray-200);
150
- }
151
-
152
- .number-button:hover,
153
- .next-button:hover,
154
- .last-button:hover,
155
- .previous-button:hover,
156
- .first-button:hover {
157
- background-color: var(--canvas-700);
158
- }
159
-
160
- .number-button.active {
161
- background-color: var(--primary-500);
162
- color: white;
163
147
  }
164
148
  }
165
149
  }
package/src/components/scroll-area/scroll-area.module.css CHANGED
@@ -21,11 +21,11 @@
21
21
  /* disable browser handling of all panning and zooming gestures on touch devices */
22
22
  touch-action: none;
23
23
  padding: 2px;
24
- background: var(--gray-50);
24
+ background: var(--surface-panel-scrollbar);
25
25
  transition: background 160ms ease-out;
26
26
 
27
27
  &:hover {
28
- background: var(--gray-50);
28
+ background: var(--surface-panel-scrollbar);
29
29
  }
30
30
 
31
31
  &[data-orientation="vertical"] {
@@ -38,17 +38,9 @@
38
38
  }
39
39
  }
40
40
 
41
- .scrollbar:is(:global(.dark) *) {
42
- background: var(--canvas-700);
43
-
44
- &:hover {
45
- background: var(--canvas-700);
46
- }
47
- }
48
-
49
41
  .thumb {
50
42
  flex: 1;
51
- background: var(--primary-100);
43
+ background: var(--surface-panel-scrollbar-thumb);
52
44
  border-radius: var(--border-radius-sm);
53
45
  position: relative;
54
46
 
@@ -66,15 +58,7 @@
66
58
  }
67
59
  }
68
60
 
69
- .thumb:is(:global(.dark) *) {
70
- background: var(--primary-400);
71
- }
72
-
73
61
  .corner {
74
- background: var(--gray-50);
75
- }
76
-
77
- .corner:is(:global(.dark) *) {
78
- background: var(--canvas-700);
62
+ background: var(--surface-panel-scrollbar);
79
63
  }
80
64
  }
package/src/components/tooltip/tooltip.module.css CHANGED
@@ -4,26 +4,20 @@
4
4
  .tooltip {
5
5
  font-size: 0.75rem;
6
6
  line-height: 1;
7
- color: var(--canvas-900);
7
+ color: var(--surface-item-text);
8
8
  user-select: none;
9
9
  padding: 0.625rem 1rem;
10
10
  border-radius: var(--border-radius-sm);
11
11
  border-width: var(--border-width-thin);
12
12
  border-style: var(--border-style-solid);
13
- background-color: var(--gray-25);
14
- border-color: var(--gray-100);
13
+ background-color: var(--surface-panel-elevated);
14
+ border-color: var(--surface-panel-border);
15
15
  box-shadow: var(--shadow-xs);
16
16
  will-change: transform, opacity;
17
17
  animation: var(--transition-normal);
18
18
  }
19
19
 
20
- :global(.dark) {
21
- .tooltip {
22
- color: var(--gray-50);
23
- border-color: var(--canvas-700);
24
- background-color: var(--canvas-800);
25
- }
26
- }
20
+ /* Dark mode handled by semantic tokens in theme layer */
27
21
 
28
22
  .tooltip[data-state="delayed-open"][data-side="top"] :global {
29
23
  animation-name: slideDownAndFade;
@@ -44,12 +38,8 @@
44
38
  }
45
39
 
46
40
  .tooltip-arrow {
47
- fill: var(--gray-100)
41
+ fill: var(--surface-panel-border);
48
42
  }
49
43
 
50
- :global(.dark) {
51
- .tooltip-arrow {
52
- fill: var(--canvas-700);
53
- }
54
- }
44
+ /* Dark mode handled by semantic tokens in theme layer */
55
45
  }
package/src/styles/theme/tokens.css CHANGED
@@ -208,6 +208,30 @@
208
208
  --gradient-danger-end: var(--red-700);
209
209
  --gradient-danger-foreground: white;
210
210
  --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
211
+
212
+ /* SURFACE TOKENS (for panels, dropdowns, menus, lists)
213
+ ----------------------------------------------------------------- */
214
+
215
+ /* Panel/container backgrounds */
216
+ --surface-panel: var(--canvas-25);
217
+ --surface-panel-elevated: white; /* For dropdowns/popovers with shadow */
218
+ --surface-panel-border: var(--border-color);
219
+
220
+ /* Item backgrounds (default transparent, inherits panel) */
221
+ --surface-item: transparent;
222
+ --surface-item-hover: var(--canvas-50);
223
+ --surface-item-active: var(--canvas-100);
224
+
225
+ /* Item text colors */
226
+ --surface-item-text: var(--text);
227
+ --surface-item-text-hover: var(--text);
228
+ --surface-item-text-active: var(--text);
229
+ --surface-item-text-disabled: var(--gray-400);
230
+
231
+ /* Panel scrollers */
232
+ --surface-panel-scrollbar: var(--gray-50);
233
+ --surface-panel-scrollbar-thumb: var(--primary-100);
234
+
211
235
  }
212
236
 
213
237
  /* ===================================================================
@@ -397,6 +421,29 @@
397
421
  --gradient-danger-end: var(--red-700);
398
422
  --gradient-danger-foreground: white;
399
423
  --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 0.85) calc(c * 0.85) h);
424
+
425
+ /* SURFACE TOKENS (Dark Mode)
426
+ ----------------------------------------------------------------- */
427
+
428
+ /* Panel/container backgrounds - slightly elevated from canvas-900 base */
429
+ --surface-panel: var(--canvas-800);
430
+ --surface-panel-elevated: var(--canvas-800);
431
+ --surface-panel-border: var(--border-color);
432
+
433
+ /* Item backgrounds - lighter than panel for hover/active */
434
+ --surface-item: transparent;
435
+ --surface-item-hover: var(--canvas-700);
436
+ --surface-item-active: var(--canvas-600);
437
+
438
+ /* Item text colors */
439
+ --surface-item-text: var(--text);
440
+ --surface-item-text-hover: var(--text);
441
+ --surface-item-text-active: var(--text);
442
+ --surface-item-text-disabled: var(--gray-500);
443
+
444
+ /* Panel scrollers */
445
+ --surface-panel-scrollbar: var(--canvas-700);
446
+ --surface-panel-scrollbar-thumb: var(--primary-400);
400
447
  }
401
448
 
402
449
  /* ===================================================================
@@ -596,5 +643,28 @@
596
643
  --gradient-danger-end: var(--red-700);
597
644
  --gradient-danger-foreground: white;
598
645
  --gradient-danger-disabled: oklch(from var(--red-700) calc(l * 1.2) calc(c * 0.85) h);
646
+
647
+ /* SURFACE TOKENS (Force Light Mode)
648
+ ----------------------------------------------------------------- */
649
+
650
+ /* Panel/container backgrounds - identical to :root */
651
+ --surface-panel: var(--canvas-25);
652
+ --surface-panel-elevated: white;
653
+ --surface-panel-border: var(--border-color);
654
+
655
+ /* Item backgrounds */
656
+ --surface-item: transparent;
657
+ --surface-item-hover: var(--canvas-50);
658
+ --surface-item-active: var(--canvas-100);
659
+
660
+ /* Item text colors */
661
+ --surface-item-text: var(--text);
662
+ --surface-item-text-hover: var(--text);
663
+ --surface-item-text-active: var(--text);
664
+ --surface-item-text-disabled: var(--gray-400);
665
+
666
+ /* Panel scrollers */
667
+ --surface-panel-scrollbar: var(--gray-50);
668
+ --surface-panel-scrollbar-thumb: var(--primary-100);
599
669
  }
600
670
  }
package/src/widgets/datepicker/datepicker.module.css CHANGED
@@ -109,11 +109,11 @@
109
109
  right: 5px;
110
110
 
111
111
  &:hover {
112
- background-color: var(--violet-4);
112
+ background-color: var(--primary-400);
113
113
  }
114
114
 
115
115
  &:focus {
116
- box-shadow: 0 0 0 2px var(--violet-7);
116
+ box-shadow: 0 0 0 2px var(--primary-600);
117
117
  }
118
118
  }
119
119
 
package/src/widgets/drawer/drawer.module.css CHANGED
@@ -19,7 +19,7 @@
19
19
  position: absolute;
20
20
  right: 0;
21
21
  height: 100%;
22
- background-color: var(--canvas-25);
22
+ background-color: var(--surface-panel);
23
23
  box-shadow: var(--shadow-md);
24
24
  z-index: inherit;
25
25
  }
@@ -28,10 +28,6 @@
28
28
  animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
29
29
  }
30
30
 
31
- .drawer-container:is(:global(.dark) *) {
32
- background: var(--canvas-800);
33
- }
34
-
35
31
  .drawer-depth-0.drawer-medium .drawer-container,
36
32
  .drawer-depth-0.drawer-wide .drawer-container {
37
33
  width: 90%;
package/src/widgets/modal/modal.module.css CHANGED
@@ -26,16 +26,12 @@
26
26
  max-height: 88vh;
27
27
  width: 100%;
28
28
  bottom: 0;
29
- background-color: var(--canvas-25);
29
+ background-color: var(--surface-panel);
30
30
  border: 1px solid var(--border-color);
31
31
  margin-left: var(--spacing-2);
32
32
  margin-right: var(--spacing-2);
33
33
  }
34
34
 
35
- .modal-container:is(:global(.dark) *) {
36
- background: var(--canvas-800);
37
- }
38
-
39
35
  @media screen and (min-width: 640px) {
40
36
  .modal-container {
41
37
  max-height: calc(100vh - 24px);