@vialiq/flux-ui 0.21.0 → 0.23.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/_animation.scss +5 -0
- package/components/_card.scss +180 -0
- package/components/_checkbox.scss +1 -1
- package/components/_chip.scss +1 -1
- package/components/_combobox.scss +1 -1
- package/components/_index.scss +1 -0
- package/components/_input.scss +1 -1
- package/components/_progress.scss +259 -0
- package/components/_radio.scss +1 -1
- package/components/_select.scss +2 -2
- package/components/_skeleton.scss +35 -0
- package/components/_spin.scss +159 -0
- package/components/_switch.scss +3 -2
- package/components/_tab.scss +1 -1
- package/components/_tabs.scss +6 -14
- package/components/_tag.scss +1 -1
- package/components/index.scss +1 -0
- package/flux-ui.css +1 -1
- package/flux-ui.css.map +1 -1
- package/package.json +1 -1
- package/styles/_variables.scss +19 -4
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
@use '../styles/functions' as func;
|
|
3
|
+
|
|
4
|
+
@layer components {
|
|
5
|
+
:host {
|
|
6
|
+
display: block;
|
|
7
|
+
width: 100%;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.vi-card {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
position: relative;
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
width: 100%;
|
|
16
|
+
|
|
17
|
+
background-color: var(--vi-card-bg, #{tokens.$layer-01});
|
|
18
|
+
border: #{tokens.$border-width-thin} solid var(--vi-card-border-color, #{tokens.$border-02});
|
|
19
|
+
border-radius: var(--vi-card-border-radius, #{tokens.$border-radius-lg});
|
|
20
|
+
color: var(--vi-card-color, #{tokens.$text-primary});
|
|
21
|
+
// Refined premium transitions
|
|
22
|
+
transition: box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
23
|
+
border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
24
|
+
transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
|
25
|
+
|
|
26
|
+
// Subtle glassy inner highlight for 3D machined edge + faint ambient shadow
|
|
27
|
+
box-shadow: var(--vi-card-shadow, #{tokens.$shadow-sm}, #{tokens.$shadow-inner-light});
|
|
28
|
+
|
|
29
|
+
// Default padding (can be overridden by size classes)
|
|
30
|
+
--vi-card-padding: #{func.to-rem(24px)};
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Size Overrides */
|
|
34
|
+
.vi-card--size-sm { --vi-card-padding: #{func.to-rem(12px)}; }
|
|
35
|
+
.vi-card--size-md { --vi-card-padding: #{func.to-rem(16px)}; }
|
|
36
|
+
.vi-card--size-lg { --vi-card-padding: #{func.to-rem(24px)}; }
|
|
37
|
+
|
|
38
|
+
.vi-card--hoverable:hover {
|
|
39
|
+
// Multi-layered diffuse shadow + maintaining the inner inset highlight
|
|
40
|
+
box-shadow: var(--vi-card-hover-shadow, #{tokens.$shadow-md}, #{tokens.$shadow-inner-light});
|
|
41
|
+
border-color: var(--vi-card-hover-border-color, #{tokens.$border-03});
|
|
42
|
+
// Physical lift micro-interaction
|
|
43
|
+
transform: translateY(-2px);
|
|
44
|
+
cursor: pointer;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Subtle tactile press effect
|
|
48
|
+
.vi-card--hoverable:active {
|
|
49
|
+
transform: translateY(0) scale(0.995);
|
|
50
|
+
box-shadow: var(--vi-card-active-shadow, #{tokens.$shadow-sm}, #{tokens.$shadow-inner-light});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Structural Slots */
|
|
54
|
+
|
|
55
|
+
.vi-card-cover {
|
|
56
|
+
display: flex;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
border-top-left-radius: var(--vi-card-border-radius, #{tokens.$border-radius-lg});
|
|
59
|
+
border-top-right-radius: var(--vi-card-border-radius, #{tokens.$border-radius-lg});
|
|
60
|
+
margin-top: -1px;
|
|
61
|
+
margin-left: -1px;
|
|
62
|
+
margin-right: -1px;
|
|
63
|
+
|
|
64
|
+
::slotted(*) {
|
|
65
|
+
width: 100%;
|
|
66
|
+
display: block;
|
|
67
|
+
object-fit: cover;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
.vi-card-header {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
justify-content: space-between;
|
|
74
|
+
padding: var(--vi-card-padding);
|
|
75
|
+
border-bottom: #{tokens.$border-width-thin} solid transparent;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.vi-card--bordered .vi-card-header {
|
|
79
|
+
border-bottom-color: var(--vi-card-border-color, #{tokens.$border-02});
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.vi-card-title {
|
|
83
|
+
margin: 0;
|
|
84
|
+
font-family: #{tokens.$font-family-base};
|
|
85
|
+
font-weight: #{tokens.$font-weight-semibold};
|
|
86
|
+
/* Premium tracking for dense, modern typography */
|
|
87
|
+
letter-spacing: -0.01em;
|
|
88
|
+
|
|
89
|
+
/* Fluid typography fallback using vw instead of cqi */
|
|
90
|
+
font-size: var(--vi-card-title-font-size, clamp(#{func.to-rem(16px)}, #{func.to-rem(14px)} + 1vw, #{func.to-rem(20px)}));
|
|
91
|
+
line-height: #{tokens.$line-height-tight};
|
|
92
|
+
color: var(--vi-card-title-color, #{tokens.$text-primary});
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.vi-card-extra {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
gap: #{func.to-rem(8px)};
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.vi-card-body {
|
|
102
|
+
padding: var(--vi-card-padding);
|
|
103
|
+
flex: 1 1 auto;
|
|
104
|
+
font-size: var(--vi-card-body-font-size, #{tokens.$font-size-base});
|
|
105
|
+
line-height: #{tokens.$line-height-normal};
|
|
106
|
+
color: var(--vi-card-body-color, #{tokens.$text-secondary});
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.vi-card-footer {
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
padding: var(--vi-card-padding);
|
|
113
|
+
border-top: #{tokens.$border-width-thin} solid transparent;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.vi-card--bordered .vi-card-footer {
|
|
117
|
+
border-top-color: var(--vi-card-border-color, #{tokens.$border-02});
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.vi-card-actions {
|
|
121
|
+
display: flex;
|
|
122
|
+
// Visually anchor actions with faint background
|
|
123
|
+
background: var(--vi-card-actions-bg, #{tokens.$layer-dimmed});
|
|
124
|
+
border-top: #{tokens.$border-width-thin} solid transparent;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.vi-card--bordered .vi-card-actions {
|
|
128
|
+
border-top-color: var(--vi-card-border-color, #{tokens.$border-02});
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.vi-card-actions ::slotted(*) {
|
|
132
|
+
flex: 1;
|
|
133
|
+
display: flex;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
align-items: center;
|
|
136
|
+
padding: #{func.to-rem(12px)} 0;
|
|
137
|
+
margin: 0;
|
|
138
|
+
border-right: #{tokens.$border-width-thin} solid transparent;
|
|
139
|
+
color: var(--vi-card-action-color, #{tokens.$text-secondary});
|
|
140
|
+
transition: color 0.3s ease;
|
|
141
|
+
cursor: pointer;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.vi-card--bordered .vi-card-actions ::slotted(*) {
|
|
145
|
+
border-right-color: var(--vi-card-border-color, #{tokens.$border-02});
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.vi-card-actions ::slotted(*:hover) {
|
|
149
|
+
color: var(--vi-card-action-hover-color, #{tokens.$text-primary});
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.vi-card-actions ::slotted(*:last-child) {
|
|
153
|
+
border-right: none;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
.vi-card-skeleton {
|
|
158
|
+
display: flex;
|
|
159
|
+
gap: #{func.to-rem(16px)};
|
|
160
|
+
width: 100%;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.vi-card-skeleton-content {
|
|
164
|
+
display: flex;
|
|
165
|
+
flex-direction: column;
|
|
166
|
+
flex: 1 1 auto;
|
|
167
|
+
gap: #{func.to-rem(16px)};
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.vi-card-skeleton-title {
|
|
171
|
+
width: 38%;
|
|
172
|
+
margin-top: #{func.to-rem(8px)};
|
|
173
|
+
margin-bottom: #{func.to-rem(4px)};
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.vi-card-skeleton-short {
|
|
177
|
+
width: 61%;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
}
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
.checkbox-input:focus-visible ~ .checkbox-box {
|
|
97
97
|
outline: #{tokens.$border-width-base} solid var(--vi-checkbox-focus-ring-color, #{tokens.$focus});
|
|
98
98
|
outline-offset: 2px;
|
|
99
|
-
box-shadow:
|
|
99
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
// Hover state (only on non-disabled)
|
package/components/_chip.scss
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
.chip:focus-visible {
|
|
32
32
|
outline: #{tokens.$border-width-base} solid var(--vi-chip-focus-ring-color, #{tokens.$focus});
|
|
33
33
|
outline-offset: 0;
|
|
34
|
-
box-shadow:
|
|
34
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
// Disabled state structure
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
border-color: var(--vi-combobox-border-color-focus, #{tokens.$focus});
|
|
53
53
|
outline: var(--vi-combobox-border-width-focus, #{tokens.$border-width-base}) solid var(--vi-combobox-focus-ring-color, #{tokens.$focus});
|
|
54
54
|
outline-offset: 0;
|
|
55
|
-
box-shadow:
|
|
55
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
&.is-disabled {
|
package/components/_index.scss
CHANGED
package/components/_input.scss
CHANGED
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
&:focus {
|
|
55
55
|
outline: #{tokens.$border-width-base} solid var(--vi-input-focus-ring-color, #{tokens.$focus});
|
|
56
56
|
outline-offset: 0;
|
|
57
|
-
box-shadow:
|
|
57
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
&::placeholder {
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
@use '../styles/functions' as func;
|
|
3
|
+
|
|
4
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
5
|
+
// COMPONENT: vi-progress
|
|
6
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
7
|
+
|
|
8
|
+
:host {
|
|
9
|
+
display: block;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.vi-progress {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: var(--vi-progress-gap, #{tokens.$spacing-sm});
|
|
17
|
+
font-family: var(--vi-font-family, #{tokens.$font-family-base});
|
|
18
|
+
|
|
19
|
+
// Level 1: Consumer override
|
|
20
|
+
// Level 2: Component default
|
|
21
|
+
// Level 3: Semantic token
|
|
22
|
+
--progress-track-bg: var(--vi-progress-track-bg, #{tokens.$layer-03});
|
|
23
|
+
--progress-indicator-bg: var(--vi-progress-indicator-bg, #{tokens.$color-primary});
|
|
24
|
+
--progress-text-color: var(--vi-progress-text-color, #{tokens.$text-primary});
|
|
25
|
+
--progress-border-radius: var(--vi-progress-border-radius, #{tokens.$border-radius-full});
|
|
26
|
+
--progress-line-height: var(--vi-progress-line-height, #{func.to-rem(8px)});
|
|
27
|
+
--progress-circle-size: var(--vi-progress-circle-size, #{func.to-rem(120px)});
|
|
28
|
+
--progress-font-size: var(--vi-progress-font-size, #{tokens.$font-size-base});
|
|
29
|
+
|
|
30
|
+
// Variants
|
|
31
|
+
&.vi-progress--variant-primary {
|
|
32
|
+
--progress-indicator-bg: var(--vi-progress-primary-bg, #{tokens.$color-primary});
|
|
33
|
+
}
|
|
34
|
+
&.vi-progress--variant-success {
|
|
35
|
+
--progress-indicator-bg: var(--vi-progress-success-bg, #{tokens.$color-green-500});
|
|
36
|
+
}
|
|
37
|
+
&.vi-progress--variant-error {
|
|
38
|
+
--progress-indicator-bg: var(--vi-progress-error-bg, #{tokens.$color-red-500});
|
|
39
|
+
}
|
|
40
|
+
&.vi-progress--variant-warning {
|
|
41
|
+
--progress-indicator-bg: var(--vi-progress-warning-bg, #{tokens.$color-yellow-500});
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Sizes
|
|
45
|
+
&.vi-progress--size-sm {
|
|
46
|
+
--progress-line-height: var(--vi-progress-line-height-sm, #{func.to-rem(6px)});
|
|
47
|
+
--progress-font-size: var(--vi-progress-font-size-sm, #{tokens.$font-size-sm});
|
|
48
|
+
--progress-circle-size: var(--vi-progress-circle-size-sm, #{func.to-rem(80px)});
|
|
49
|
+
}
|
|
50
|
+
&.vi-progress--size-md {
|
|
51
|
+
--progress-line-height: var(--vi-progress-line-height-md, #{func.to-rem(8px)});
|
|
52
|
+
--progress-font-size: var(--vi-progress-font-size-md, #{tokens.$font-size-base});
|
|
53
|
+
--progress-circle-size: var(--vi-progress-circle-size-md, #{func.to-rem(120px)});
|
|
54
|
+
}
|
|
55
|
+
&.vi-progress--size-lg {
|
|
56
|
+
--progress-line-height: var(--vi-progress-line-height-lg, #{func.to-rem(12px)});
|
|
57
|
+
--progress-font-size: var(--vi-progress-font-size-lg, #{tokens.$font-size-lg});
|
|
58
|
+
--progress-circle-size: var(--vi-progress-circle-size-lg, #{func.to-rem(160px)});
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
63
|
+
// TYPE: LINE
|
|
64
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
65
|
+
|
|
66
|
+
.vi-progress--line {
|
|
67
|
+
.vi-progress-outer {
|
|
68
|
+
flex: 1 1 auto;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.vi-progress-track {
|
|
72
|
+
background-color: var(--progress-track-bg);
|
|
73
|
+
border-radius: var(--progress-border-radius);
|
|
74
|
+
height: var(--progress-line-height);
|
|
75
|
+
overflow: hidden; // Ensures indicator is clipped to radius
|
|
76
|
+
position: relative;
|
|
77
|
+
width: 100%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.vi-progress-success-indicator {
|
|
81
|
+
background-color: var(--progress-success-bg, #{tokens.$color-success});
|
|
82
|
+
border-radius: var(--progress-border-radius);
|
|
83
|
+
height: 100%;
|
|
84
|
+
position: absolute;
|
|
85
|
+
left: 0;
|
|
86
|
+
top: 0;
|
|
87
|
+
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.vi-progress-indicator {
|
|
91
|
+
background-color: var(--progress-indicator-bg);
|
|
92
|
+
border-radius: var(--progress-border-radius);
|
|
93
|
+
height: 100%;
|
|
94
|
+
position: absolute;
|
|
95
|
+
left: 0;
|
|
96
|
+
top: 0;
|
|
97
|
+
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Status: active (gleaming sweep animation)
|
|
101
|
+
&.vi-progress--status-active .vi-progress-indicator::before {
|
|
102
|
+
content: '';
|
|
103
|
+
position: absolute;
|
|
104
|
+
top: 0;
|
|
105
|
+
left: 0;
|
|
106
|
+
bottom: 0;
|
|
107
|
+
right: 0;
|
|
108
|
+
background: var(--vi-progress-gleam-bg, #{tokens.$layer-01});
|
|
109
|
+
opacity: 0;
|
|
110
|
+
animation: vi-progress-active-gleam 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
115
|
+
// TYPE: CIRCLE
|
|
116
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
117
|
+
|
|
118
|
+
.vi-progress--circle,
|
|
119
|
+
.vi-progress--dashboard {
|
|
120
|
+
position: relative;
|
|
121
|
+
display: inline-flex;
|
|
122
|
+
flex-direction: column;
|
|
123
|
+
justify-content: center;
|
|
124
|
+
align-items: center;
|
|
125
|
+
width: var(--progress-circle-size);
|
|
126
|
+
height: var(--progress-circle-size);
|
|
127
|
+
gap: 0; // Text is overlaid
|
|
128
|
+
|
|
129
|
+
.vi-progress-circle-svg {
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 100%;
|
|
132
|
+
transform: rotate(-90deg);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.vi-progress-circle-track {
|
|
136
|
+
fill: transparent;
|
|
137
|
+
stroke: var(--progress-track-bg);
|
|
138
|
+
// stroke-width is provided inline via JS based on props, but fallback here
|
|
139
|
+
stroke-width: var(--vi-progress-circle-stroke-width, 6);
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.vi-progress-circle-success {
|
|
143
|
+
fill: transparent;
|
|
144
|
+
stroke: var(--progress-success-bg, #{tokens.$color-success});
|
|
145
|
+
stroke-width: var(--vi-progress-circle-stroke-width, 6);
|
|
146
|
+
transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.vi-progress-circle-indicator {
|
|
150
|
+
fill: transparent;
|
|
151
|
+
stroke: var(--progress-indicator-bg);
|
|
152
|
+
stroke-width: var(--vi-progress-circle-stroke-width, 6);
|
|
153
|
+
transition: stroke-dashoffset 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.vi-progress-info {
|
|
157
|
+
position: absolute;
|
|
158
|
+
left: 50%;
|
|
159
|
+
top: 50%;
|
|
160
|
+
transform: translate(-50%, -50%);
|
|
161
|
+
width: 100%;
|
|
162
|
+
text-align: center;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
167
|
+
// TYPE: STEPS
|
|
168
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
169
|
+
|
|
170
|
+
.vi-progress--steps {
|
|
171
|
+
.vi-progress-steps {
|
|
172
|
+
flex: 1 1 auto;
|
|
173
|
+
display: flex;
|
|
174
|
+
gap: var(--vi-progress-step-gap, #{func.to-rem(4px)});
|
|
175
|
+
align-items: center;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.vi-progress-step-item {
|
|
179
|
+
flex: 1;
|
|
180
|
+
border-radius: var(--progress-border-radius);
|
|
181
|
+
transition: background-color 0.3s ease, height 0.3s ease;
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
186
|
+
// INFO TEXT & ICONS
|
|
187
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
188
|
+
|
|
189
|
+
.vi-progress-info {
|
|
190
|
+
color: var(--progress-text-color);
|
|
191
|
+
font-size: var(--progress-font-size);
|
|
192
|
+
line-height: 1;
|
|
193
|
+
white-space: nowrap;
|
|
194
|
+
word-break: keep-all;
|
|
195
|
+
|
|
196
|
+
// Align icons nicely
|
|
197
|
+
display: flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
justify-content: center;
|
|
200
|
+
|
|
201
|
+
vi-icon {
|
|
202
|
+
font-size: calc(var(--progress-font-size) * 1.15); // icons slightly larger than text
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
// Specific icon colors overriding text color
|
|
206
|
+
.vi-progress--variant-success & vi-icon {
|
|
207
|
+
color: var(--progress-indicator-bg);
|
|
208
|
+
}
|
|
209
|
+
.vi-progress--variant-error & vi-icon {
|
|
210
|
+
color: var(--progress-indicator-bg);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// Simulate filled icons for Line mode
|
|
214
|
+
.vi-progress--line.vi-progress--status-success & vi-icon,
|
|
215
|
+
.vi-progress--line.vi-progress--status-exception & vi-icon {
|
|
216
|
+
background-color: var(--progress-indicator-bg);
|
|
217
|
+
color: #{tokens.$text-inverse};
|
|
218
|
+
border-radius: 50%;
|
|
219
|
+
// Ensure the background is tightly fitted to the icon
|
|
220
|
+
width: 1em;
|
|
221
|
+
height: 1em;
|
|
222
|
+
display: inline-flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
justify-content: center;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
229
|
+
// ANIMATIONS
|
|
230
|
+
// ─────────────────────────────────────────────────────────────────────────────
|
|
231
|
+
|
|
232
|
+
@keyframes vi-progress-active-gleam {
|
|
233
|
+
0% {
|
|
234
|
+
opacity: 0.1;
|
|
235
|
+
width: 0;
|
|
236
|
+
}
|
|
237
|
+
20% {
|
|
238
|
+
opacity: 0.5;
|
|
239
|
+
width: 0;
|
|
240
|
+
}
|
|
241
|
+
100% {
|
|
242
|
+
opacity: 0;
|
|
243
|
+
width: 100%;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
@media (prefers-reduced-motion: reduce) {
|
|
248
|
+
.vi-progress-indicator {
|
|
249
|
+
transition: none !important;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.vi-progress--status-active .vi-progress-indicator::before {
|
|
253
|
+
animation: none !important;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.vi-progress-circle-indicator {
|
|
257
|
+
transition: none !important;
|
|
258
|
+
}
|
|
259
|
+
}
|
package/components/_radio.scss
CHANGED
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
.radio-input:focus-visible + .radio-circle {
|
|
140
140
|
outline: #{tokens.$border-width-base} solid var(--vi-radio-focus-ring-color, #{tokens.$focus});
|
|
141
141
|
outline-offset: 2px;
|
|
142
|
-
box-shadow:
|
|
142
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
143
143
|
}
|
|
144
144
|
|
|
145
145
|
// Hover state (only on non-disabled)
|
package/components/_select.scss
CHANGED
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
border-color: var(--vi-select-focus-ring-color, #{tokens.$focus});
|
|
71
71
|
outline: var(--vi-border-width-base, 2px) solid var(--vi-select-focus-ring-color, #{tokens.$focus});
|
|
72
72
|
outline-offset: -1px;
|
|
73
|
-
box-shadow:
|
|
73
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
border-color: var(--vi-select-focus-ring-color, #{tokens.$focus});
|
|
291
291
|
outline: var(--vi-border-width-base, 2px) solid var(--vi-select-focus-ring-color, #{tokens.$focus});
|
|
292
292
|
outline-offset: -1px;
|
|
293
|
-
box-shadow:
|
|
293
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
294
294
|
}
|
|
295
295
|
}
|
|
296
296
|
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@use '../styles/variables' as tokens;
|
|
2
|
+
@use '../styles/functions' as func;
|
|
3
|
+
@use './animation';
|
|
4
|
+
|
|
5
|
+
@layer components {
|
|
6
|
+
.vi-skeleton {
|
|
7
|
+
display: block;
|
|
8
|
+
background: var(--vi-skeleton-color, #{tokens.$layer-02});
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
/* Transition for smooth animation changes if needed */
|
|
11
|
+
transition: background 0.3s ease;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Shimmer Animation State */
|
|
15
|
+
.vi-skeleton--animation-shimmer {
|
|
16
|
+
background: linear-gradient(
|
|
17
|
+
90deg,
|
|
18
|
+
var(--vi-skeleton-color, #{tokens.$layer-02}) 25%,
|
|
19
|
+
var(--vi-skeleton-to-color, #{tokens.$layer-03}) 37%,
|
|
20
|
+
var(--vi-skeleton-color, #{tokens.$layer-02}) 63%
|
|
21
|
+
);
|
|
22
|
+
background-size: 400% 100%;
|
|
23
|
+
animation: vi-shimmer 1.4s ease infinite;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Pulse Animation State */
|
|
27
|
+
.vi-skeleton--animation-pulse {
|
|
28
|
+
animation: vi-pulse 1.5s ease-in-out infinite;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* None Animation State */
|
|
32
|
+
.vi-skeleton--animation-none {
|
|
33
|
+
/* No animation overrides, uses default static background */
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Spin component base styles.
|
|
3
|
+
*
|
|
4
|
+
* Provides the host-agnostic foundation for the loading spinner.
|
|
5
|
+
* Includes the dot animations and overlay dimming logic.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@use '../styles/functions' as func;
|
|
9
|
+
@use '../styles/variables' as tokens;
|
|
10
|
+
|
|
11
|
+
@layer components {
|
|
12
|
+
|
|
13
|
+
@keyframes viSpinRotate {
|
|
14
|
+
100% {
|
|
15
|
+
transform: rotate(360deg);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
@keyframes viSpinMove {
|
|
20
|
+
to {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.spin-wrapper {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
color: var(--vi-spin-color, var(--vi-color-primary, #{tokens.$color-primary}));
|
|
31
|
+
vertical-align: middle;
|
|
32
|
+
text-align: center;
|
|
33
|
+
opacity: 0;
|
|
34
|
+
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
35
|
+
|
|
36
|
+
&.spinning {
|
|
37
|
+
opacity: 1;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&.spin-fullscreen {
|
|
41
|
+
position: fixed;
|
|
42
|
+
inset: 0;
|
|
43
|
+
z-index: 9999;
|
|
44
|
+
background-color: var(--vi-spin-fullscreen-bg, rgba(255, 255, 255, 0.8));
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.spin-circle {
|
|
49
|
+
display: inline-block;
|
|
50
|
+
font-size: var(--vi-spin-size-md, #{func.to-rem(20px)});
|
|
51
|
+
width: 1em;
|
|
52
|
+
height: 1em;
|
|
53
|
+
animation: viSpinRotate 1s infinite linear;
|
|
54
|
+
|
|
55
|
+
&.spin-circle-determinate {
|
|
56
|
+
animation: none;
|
|
57
|
+
transform: rotate(-90deg);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.spin-dot {
|
|
62
|
+
position: relative;
|
|
63
|
+
display: inline-block;
|
|
64
|
+
font-size: var(--vi-spin-size-md, #{func.to-rem(20px)});
|
|
65
|
+
width: 1em;
|
|
66
|
+
height: 1em;
|
|
67
|
+
transform: rotate(45deg);
|
|
68
|
+
animation: viSpinRotate 1.2s infinite linear;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.spin-dot-item {
|
|
72
|
+
position: absolute;
|
|
73
|
+
display: block;
|
|
74
|
+
width: var(--vi-spin-item-size-md, 9px);
|
|
75
|
+
height: var(--vi-spin-item-size-md, 9px);
|
|
76
|
+
background-color: currentColor;
|
|
77
|
+
border-radius: 100%;
|
|
78
|
+
transform: scale(0.75);
|
|
79
|
+
transform-origin: 50% 50%;
|
|
80
|
+
opacity: 0.3;
|
|
81
|
+
animation: viSpinMove 1s infinite linear alternate;
|
|
82
|
+
|
|
83
|
+
&:nth-child(1) {
|
|
84
|
+
top: 0;
|
|
85
|
+
left: 0;
|
|
86
|
+
}
|
|
87
|
+
&:nth-child(2) {
|
|
88
|
+
top: 0;
|
|
89
|
+
right: 0;
|
|
90
|
+
animation-delay: 0.4s;
|
|
91
|
+
}
|
|
92
|
+
&:nth-child(3) {
|
|
93
|
+
right: 0;
|
|
94
|
+
bottom: 0;
|
|
95
|
+
animation-delay: 0.8s;
|
|
96
|
+
}
|
|
97
|
+
&:nth-child(4) {
|
|
98
|
+
bottom: 0;
|
|
99
|
+
left: 0;
|
|
100
|
+
animation-delay: 1.2s;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.spin-text {
|
|
105
|
+
margin-top: #{tokens.$spacing-xs};
|
|
106
|
+
font-family: #{tokens.$font-family-base};
|
|
107
|
+
font-size: var(--vi-spin-text-font-size, #{tokens.$font-size-sm});
|
|
108
|
+
color: var(--vi-spin-color, var(--vi-color-primary, #{tokens.$color-primary}));
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Sizes
|
|
112
|
+
.spin-sm {
|
|
113
|
+
.spin-circle, .spin-dot {
|
|
114
|
+
font-size: var(--vi-spin-size-sm, #{tokens.$font-size-base});
|
|
115
|
+
}
|
|
116
|
+
.spin-dot-item {
|
|
117
|
+
width: var(--vi-spin-item-size-sm, #{tokens.$spacing-unit});
|
|
118
|
+
height: var(--vi-spin-item-size-sm, #{tokens.$spacing-unit});
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.spin-lg {
|
|
123
|
+
.spin-circle, .spin-dot {
|
|
124
|
+
font-size: var(--vi-spin-size-lg, #{tokens.$spacing-xl});
|
|
125
|
+
}
|
|
126
|
+
.spin-dot-item {
|
|
127
|
+
width: var(--vi-spin-item-size-lg, #{tokens.$font-size-base});
|
|
128
|
+
height: var(--vi-spin-item-size-lg, #{tokens.$font-size-base});
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Nested Overlay Mode
|
|
133
|
+
.spin-nested-loading {
|
|
134
|
+
position: relative;
|
|
135
|
+
|
|
136
|
+
.spin-container {
|
|
137
|
+
position: relative;
|
|
138
|
+
transition: opacity 0.3s;
|
|
139
|
+
|
|
140
|
+
&.spin-blur {
|
|
141
|
+
clear: both;
|
|
142
|
+
opacity: 0.5;
|
|
143
|
+
user-select: none;
|
|
144
|
+
pointer-events: none;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
> .spin-wrapper {
|
|
149
|
+
position: absolute;
|
|
150
|
+
top: 0;
|
|
151
|
+
left: 0;
|
|
152
|
+
z-index: 4;
|
|
153
|
+
display: flex;
|
|
154
|
+
width: 100%;
|
|
155
|
+
height: 100%;
|
|
156
|
+
max-height: 400px;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
package/components/_switch.scss
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
// on the cap-height of the first text line.
|
|
10
10
|
|
|
11
11
|
.switch-wrapper {
|
|
12
|
+
position: relative;
|
|
12
13
|
display: inline-flex;
|
|
13
14
|
align-items: flex-start;
|
|
14
15
|
gap: var(--vi-switch-label-gap, #{tokens.$spacing-xs});
|
|
@@ -76,7 +77,7 @@
|
|
|
76
77
|
height: var(--vi-switch-thumb-size, func.to-rem(18px));
|
|
77
78
|
background-color: var(--vi-switch-thumb-color, #{tokens.$text-primary-inverse});
|
|
78
79
|
border-radius: 50%;
|
|
79
|
-
box-shadow: var(--vi-switch-thumb-shadow,
|
|
80
|
+
box-shadow: var(--vi-switch-thumb-shadow, #{tokens.$shadow-md});
|
|
80
81
|
transition: left var(--vi-switch-transition-duration, 150ms) ease;
|
|
81
82
|
}
|
|
82
83
|
|
|
@@ -98,7 +99,7 @@
|
|
|
98
99
|
outline: #{tokens.$border-width-base} solid
|
|
99
100
|
var(--vi-switch-focus-ring-color, #{tokens.$focus});
|
|
100
101
|
outline-offset: 2px;
|
|
101
|
-
box-shadow:
|
|
102
|
+
box-shadow: #{tokens.$focus-ring-shadow};
|
|
102
103
|
}
|
|
103
104
|
|
|
104
105
|
// ── Disabled state ────────────────────────────────────────────────────────────
|
package/components/_tab.scss
CHANGED
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
background: var(--vi-tab-badge-bg, #{tokens.$color-primary});
|
|
157
157
|
color: var(--vi-tab-badge-color, #{tokens.$layer-01});
|
|
158
158
|
flex-shrink: 0;
|
|
159
|
-
box-shadow:
|
|
159
|
+
box-shadow: #{tokens.$shadow-sm};
|
|
160
160
|
animation: vi-badge-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
161
161
|
}
|
|
162
162
|
|
package/components/_tabs.scss
CHANGED
|
@@ -223,7 +223,7 @@
|
|
|
223
223
|
padding: var(--vi-tabs-spacing-xs, 4px);
|
|
224
224
|
gap: var(--vi-tabs-gap-xs, 2px);
|
|
225
225
|
// Inset shadow creates a "recessed tray" feel
|
|
226
|
-
box-shadow:
|
|
226
|
+
box-shadow: #{tokens.$shadow-inner-deep};
|
|
227
227
|
}
|
|
228
228
|
|
|
229
229
|
// The sliding white pill cursor
|
|
@@ -233,10 +233,7 @@
|
|
|
233
233
|
border-radius: #{func.to-rem(7px)};
|
|
234
234
|
background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
|
|
235
235
|
// Multi-layer shadow for floating card feel
|
|
236
|
-
box-shadow:
|
|
237
|
-
0 1px 3px rgba(0, 0, 0, 0.10),
|
|
238
|
-
0 1px 2px rgba(0, 0, 0, 0.06),
|
|
239
|
-
0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
236
|
+
box-shadow: #{tokens.$shadow-sm};
|
|
240
237
|
}
|
|
241
238
|
|
|
242
239
|
// Indicator hidden — cursor does selection work
|
|
@@ -292,7 +289,7 @@
|
|
|
292
289
|
border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
|
|
293
290
|
border-bottom-color: $surface-color; // Merges with content below
|
|
294
291
|
margin-top: 8px;
|
|
295
|
-
box-shadow:
|
|
292
|
+
box-shadow: #{tokens.$shadow-sm};
|
|
296
293
|
}
|
|
297
294
|
|
|
298
295
|
.vi-tabs__indicator { display: none; }
|
|
@@ -309,7 +306,7 @@
|
|
|
309
306
|
border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
|
|
310
307
|
border-radius: #{func.to-rem(10px)};
|
|
311
308
|
overflow: clip; // Enclosed: clip cursor inside rounded border box
|
|
312
|
-
box-shadow:
|
|
309
|
+
box-shadow: #{tokens.$shadow-sm};
|
|
313
310
|
|
|
314
311
|
.vi-tabs__tablist {
|
|
315
312
|
background: var(--vi-tabs-surface-secondary, #{tokens.$layer-02});
|
|
@@ -370,9 +367,7 @@
|
|
|
370
367
|
width: calc(100% - 8px) !important; // Override JS width — fills sidebar
|
|
371
368
|
border-radius: #{func.to-rem(8px)};
|
|
372
369
|
background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
|
|
373
|
-
box-shadow:
|
|
374
|
-
0 1px 3px rgba(0, 0, 0, 0.08),
|
|
375
|
-
0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
370
|
+
box-shadow: #{tokens.$shadow-sm};
|
|
376
371
|
}
|
|
377
372
|
|
|
378
373
|
// Vertical indicator — right edge accent line
|
|
@@ -518,10 +513,7 @@
|
|
|
518
513
|
background: var(--vi-tabs-surface-primary, #{tokens.$layer-01});
|
|
519
514
|
border: 1px solid var(--vi-tabs-border-color, #{tokens.$color-border});
|
|
520
515
|
border-radius: #{func.to-rem(8px)};
|
|
521
|
-
box-shadow:
|
|
522
|
-
0 4px 6px -1px rgba(0, 0, 0, 0.10),
|
|
523
|
-
0 2px 4px -1px rgba(0, 0, 0, 0.06),
|
|
524
|
-
0 0 0 1px rgba(0, 0, 0, 0.04);
|
|
516
|
+
box-shadow: #{tokens.$shadow-md};
|
|
525
517
|
padding: var(--vi-tabs-spacing-xs, 4px);
|
|
526
518
|
animation: vi-menu-appear 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
527
519
|
transform-origin: top right;
|
package/components/_tag.scss
CHANGED
|
@@ -294,7 +294,7 @@
|
|
|
294
294
|
// ────────────────────────────────────────────────────────────────────────
|
|
295
295
|
&.appearance-solid {
|
|
296
296
|
border-color: transparent;
|
|
297
|
-
box-shadow:
|
|
297
|
+
box-shadow: #{tokens.$shadow-sm};
|
|
298
298
|
|
|
299
299
|
&.variant-neutral {
|
|
300
300
|
background-color: var(--vi-tag-solid-neutral-bg, #{tokens.$border-inverse-03});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward 'progress';
|
package/flux-ui.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset, components, utilities;:root{--vi-color-grey-100: strip-units(var(--vi-color-grey-100, #f5f5f5));--vi-color-grey-200: strip-units(var(--vi-color-grey-200, #eeeeee));--vi-color-grey-300: strip-units(var(--vi-color-grey-300, #e0e0e0));--vi-color-grey-400: strip-units(var(--vi-color-grey-400, #bdbdbd));--vi-color-grey-500: strip-units(var(--vi-color-grey-500, #9e9e9e));--vi-color-grey-600: strip-units(var(--vi-color-grey-600, #757575));--vi-color-grey-700: strip-units(var(--vi-color-grey-700, #616161));--vi-color-grey-800: strip-units(var(--vi-color-grey-800, #424242));--vi-color-grey-900: strip-units(var(--vi-color-grey-900, #212121));--vi-color-red-100: strip-units(var(--vi-color-red-100, #ffccce));--vi-color-red-200: strip-units(var(--vi-color-red-200, #f69892));--vi-color-red-300: strip-units(var(--vi-color-red-300, #ee6f68));--vi-color-red-400: strip-units(var(--vi-color-red-400, #f74d40));--vi-color-red-500: strip-units(var(--vi-color-red-500, #fb3c1e));--vi-color-red-600: strip-units(var(--vi-color-red-600, #ed3020));--vi-color-red-700: strip-units(var(--vi-color-red-700, #db231b));--vi-color-red-800: strip-units(var(--vi-color-red-800, #ce1a12));--vi-color-red-900: strip-units(var(--vi-color-red-900, #c00000));--vi-color-yellow-100: strip-units(var(--vi-color-yellow-100, #ffeab1));--vi-color-yellow-200: strip-units(var(--vi-color-yellow-200, #ffde85));--vi-color-yellow-300: strip-units(var(--vi-color-yellow-300, #ffd359));--vi-color-yellow-400: strip-units(var(--vi-color-yellow-400, #ffc72e));--vi-color-yellow-500: strip-units(var(--vi-color-yellow-500, #ffba00));--vi-color-yellow-600: strip-units(var(--vi-color-yellow-600, #ffa900));--vi-color-yellow-700: strip-units(var(--vi-color-yellow-700, #ff9900));--vi-color-yellow-800: strip-units(var(--vi-color-yellow-800, #e68300));--vi-color-yellow-900: strip-units(var(--vi-color-yellow-900, #cc6d00));--vi-color-green-100: strip-units(var(--vi-color-green-100, #e6f0eb));--vi-color-green-200: strip-units(var(--vi-color-green-200, #c0dbcd));--vi-color-green-300: strip-units(var(--vi-color-green-300, #96c4ab));--vi-color-green-400: strip-units(var(--vi-color-green-400, #6eab88));--vi-color-green-500: strip-units(var(--vi-color-green-500, #489167));--vi-color-green-600: strip-units(var(--vi-color-green-600, #367551));--vi-color-green-700: strip-units(var(--vi-color-green-700, #265a3d));--vi-color-green-800: strip-units(var(--vi-color-green-800, #17402a));--vi-color-green-900: strip-units(var(--vi-color-green-900, #0a2618));--vi-color-blue-100: strip-units(var(--vi-color-blue-100, #ebf5ff));--vi-color-blue-200: strip-units(var(--vi-color-blue-200, #cee6ff));--vi-color-blue-300: strip-units(var(--vi-color-blue-300, #a3d1fa));--vi-color-blue-400: strip-units(var(--vi-color-blue-400, #74b6f4));--vi-color-blue-500: strip-units(var(--vi-color-blue-500, #3f96f1));--vi-color-blue-600: strip-units(var(--vi-color-blue-600, #3b86de));--vi-color-blue-700: strip-units(var(--vi-color-blue-700, #3676d0));--vi-color-blue-800: strip-units(var(--vi-color-blue-800, #2d5fa8));--vi-color-blue-900: strip-units(var(--vi-color-blue-900, #254882));--vi-color-purple-100: strip-units(var(--vi-color-purple-100, #f0e5f9));--vi-color-purple-200: strip-units(var(--vi-color-purple-200, #dbbdf2));--vi-color-purple-300: strip-units(var(--vi-color-purple-300, #c18eeb));--vi-color-purple-400: strip-units(var(--vi-color-purple-400, #a454e2));--vi-color-purple-500: strip-units(var(--vi-color-purple-500, #7609d0));--vi-color-purple-600: strip-units(var(--vi-color-purple-600, #6507c9));--vi-color-purple-700: strip-units(var(--vi-color-purple-700, #5505c2));--vi-color-purple-800: strip-units(var(--vi-color-purple-800, #4403bb));--vi-color-purple-900: strip-units(var(--vi-color-purple-900, #3400b4));--vi-color-primary: strip-units(var(--vi-color-primary, #3676d0));--vi-color-secondary: strip-units(var(--vi-color-secondary, #f0f4f8));--vi-color-success: strip-units(var(--vi-color-success, #489167));--vi-color-warning: strip-units(var(--vi-color-warning, #ffba00));--vi-color-error: strip-units(var(--vi-color-error, #ef4444));--vi-color-info: strip-units(var(--vi-color-info, #3676d0));--vi-color-background: strip-units(var(--vi-color-background, #ffffff));--vi-color-foreground: strip-units(var(--vi-color-foreground, #111827));--vi-color-border: strip-units(var(--vi-color-border, #e5e7eb));--vi-spacing-unit: strip-units(var(--vi-spacing-unit, 0.25rem));--vi-spacing-xs: strip-units(var(--vi-spacing-xs, 0.5rem));--vi-spacing-sm: strip-units(var(--vi-spacing-sm, 0.75rem));--vi-spacing-md: strip-units(var(--vi-spacing-md, 1rem));--vi-spacing-lg: strip-units(var(--vi-spacing-lg, 1.5rem));--vi-spacing-xl: strip-units(var(--vi-spacing-xl, 2rem));--vi-spacing-2xl: strip-units(var(--vi-spacing-2xl, 3rem));--vi-spacing-3xl: strip-units(var(--vi-spacing-3xl, 4rem));--vi-font-family-base: strip-units(var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));--vi-font-family-mono: strip-units(var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));--vi-font-size-xs: strip-units(var(--vi-font-size-xs, 0.75rem));--vi-font-size-sm: strip-units(var(--vi-font-size-sm, 0.8125rem));--vi-font-size-base: strip-units(var(--vi-font-size-base, 0.875rem));--vi-font-size-lg: strip-units(var(--vi-font-size-lg, 1rem));--vi-font-size-xl: strip-units(var(--vi-font-size-xl, 1.25rem));--vi-font-size-2xl: strip-units(var(--vi-font-size-2xl, 1.5rem));--vi-font-size-3xl: strip-units(var(--vi-font-size-3xl, 1.875rem));--vi-font-weight-light: strip-units(var(--vi-font-weight-light, 300));--vi-font-weight-normal: strip-units(var(--vi-font-weight-normal, 400));--vi-font-weight-medium: strip-units(var(--vi-font-weight-medium, 500));--vi-font-weight-semibold: strip-units(var(--vi-font-weight-semibold, 600));--vi-font-weight-bold: strip-units(var(--vi-font-weight-bold, 700));--vi-line-height-tight: strip-units(var(--vi-line-height-tight, 1.2));--vi-line-height-normal: strip-units(var(--vi-line-height-normal, 1.5715));--vi-line-height-relaxed: strip-units(var(--vi-line-height-relaxed, 1.75));--vi-letter-spacing-tight: strip-units(var(--vi-letter-spacing-tight, -0.01em));--vi-letter-spacing-normal: strip-units(var(--vi-letter-spacing-normal, 0em));--vi-letter-spacing-wide: strip-units(var(--vi-letter-spacing-wide, 0.025em));--vi-letter-spacing-wider: strip-units(var(--vi-letter-spacing-wider, 0.05em));--vi-letter-spacing-widest: strip-units(var(--vi-letter-spacing-widest, 0.1em));--vi-shadow-sm: strip-units(var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));--vi-shadow-md: strip-units(var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1)));--vi-shadow-lg: strip-units(var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1)));--vi-shadow-xl: strip-units(var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1)));--vi-border-radius-sm: strip-units(var(--vi-border-radius-sm, 4px));--vi-border-radius-md: strip-units(var(--vi-border-radius-md, 6px));--vi-border-radius-lg: strip-units(var(--vi-border-radius-lg, 8px));--vi-border-radius-xl: strip-units(var(--vi-border-radius-xl, 12px));--vi-border-width-thin: strip-units(var(--vi-border-width-thin, 1px));--vi-border-width-base: strip-units(var(--vi-border-width-base, 2px));--vi-border-width-thick: strip-units(var(--vi-border-width-thick, 3px))}@layer reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-size:var(--vi-font-size-base, 0.875rem);line-height:var(--vi-line-height-normal, 1.5715);color:var(--vi-color-foreground, #111827);background-color:var(--vi-color-background, #ffffff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,h1,h2,h3,h4,h5,h6,ul,ol,dl{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit;line-height:inherit}ul,ol{list-style:none}a{color:inherit;text-decoration:none;background-color:rgba(0,0,0,0)}a:active,a:hover{outline:0}code,pre,samp{font-family:var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace);font-size:1em}pre{margin:0;overflow:auto}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15}button,input[type=button],input[type=reset],input[type=submit]{background:rgba(0,0,0,0);border:0;cursor:pointer;-webkit-appearance:button}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}input[type=checkbox]{padding:0;-webkit-appearance:checkbox}input[type=radio]{padding:0;-webkit-appearance:radio}textarea{overflow:auto;resize:vertical}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img,svg{max-width:100%;height:auto;display:block}img{border:0;vertical-align:middle}iframe,video{max-width:100%}[hidden]{display:none}hr{margin:0;border:0;border-top:1px solid var(--vi-color-border, #e5e7eb)}}@layer utilities{.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.gap-xs{gap:var(--vi-spacing-xs, 0.5rem)}.gap-sm{gap:var(--vi-spacing-sm, 0.75rem)}.gap-md{gap:var(--vi-spacing-md, 1rem)}.gap-lg{gap:var(--vi-spacing-lg, 1.5rem)}.gap-xl{gap:var(--vi-spacing-xl, 2rem)}.flex-1{flex:1}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-auto-fit{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.min-h-screen{min-height:100vh;min-height:100dvh}.max-w-container{max-width:1200px;margin-left:auto;margin-right:auto}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}}.vi-overline,.vi-caption,.vi-label-sm,.vi-label-md,.vi-body-sm,.vi-body-md,.vi-body-lg,.vi-heading-sm,.vi-heading-md,.vi-heading-lg,.vi-heading-xl,.vi-display-md,.vi-display-lg,td,th,blockquote,pre,code,kbd,samp,figcaption,small,label,p,h6,h5,h4,h3,h2,h1{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}@layer components{body{font-family:var(--vi-font-family-base, var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--vi-body-md-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:var(--vi-heading-h1-size, var(--vi-font-size-3xl, 1.875rem));font-weight:var(--vi-heading-h1-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h1-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h1-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h1-color, var(--vi-color-foreground, #111827))}h2{font-size:var(--vi-heading-h2-size, var(--vi-font-size-2xl, 1.5rem));font-weight:var(--vi-heading-h2-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h2-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h2-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h2-color, var(--vi-color-foreground, #111827))}h3{font-size:var(--vi-heading-h3-size, var(--vi-font-size-xl, 1.25rem));font-weight:var(--vi-heading-h3-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h3-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h3-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h3-color, var(--vi-color-foreground, #111827))}h4{font-size:var(--vi-heading-h4-size, var(--vi-font-size-lg, 1rem));font-weight:var(--vi-heading-h4-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h4-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h4-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h4-color, var(--vi-color-foreground, #111827))}h5{font-size:var(--vi-heading-h5-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-heading-h5-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h5-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h5-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h5-color, var(--vi-color-foreground, #111827))}h6{font-size:var(--vi-heading-h6-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-heading-h6-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h6-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h6-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h6-color, var(--vi-color-grey-700, #616161))}p{font-size:var(--vi-body-md-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827))}label{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}small{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}strong,b{font-weight:var(--vi-font-weight-semibold, 600)}em,i{font-style:italic}figcaption{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}code,kbd,samp{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-code-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-code-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-code-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}pre{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 0.8125rem));line-height:var(--vi-code-leading, var(--vi-line-height-relaxed, 1.75));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}blockquote{font-size:var(--vi-body-lg-size, var(--vi-font-size-lg, 1rem));font-weight:var(--vi-body-lg-weight, var(--vi-font-weight-light, 300));line-height:var(--vi-body-lg-leading, var(--vi-line-height-relaxed, 1.75));letter-spacing:var(--vi-body-lg-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-lg-color, var(--vi-color-grey-700, #616161));font-style:italic;padding:0}th{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}td{font-size:var(--vi-body-sm-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-body-sm-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-sm-leading, var(--vi-line-height-normal, 1.5715));color:var(--vi-body-sm-color, var(--vi-color-grey-600, #757575))}}@layer utilities{.vi-display-lg{font-size:var(--vi-display-lg-size, var(--vi-font-size-3xl, 1.875rem));font-weight:var(--vi-display-lg-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-display-lg-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-display-lg-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-display-lg-color, var(--vi-color-foreground, #111827))}.vi-display-md{font-size:var(--vi-display-md-size, var(--vi-font-size-2xl, 1.5rem));font-weight:var(--vi-display-md-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-display-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-display-md-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-display-md-color, var(--vi-color-foreground, #111827))}.vi-heading-xl{font-size:var(--vi-heading-h2-size, var(--vi-font-size-2xl, 1.5rem));font-weight:var(--vi-heading-h2-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h2-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h2-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h2-color, var(--vi-color-foreground, #111827))}.vi-heading-lg{font-size:var(--vi-heading-h3-size, var(--vi-font-size-xl, 1.25rem));font-weight:var(--vi-heading-h3-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h3-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h3-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h3-color, var(--vi-color-foreground, #111827))}.vi-heading-md{font-size:var(--vi-heading-h5-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-heading-h5-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h5-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h5-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h5-color, var(--vi-color-foreground, #111827))}.vi-heading-sm{font-size:var(--vi-heading-h6-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-heading-h6-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h6-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h6-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h6-color, var(--vi-color-grey-700, #616161))}.vi-body-lg{font-size:var(--vi-body-lg-size, var(--vi-font-size-lg, 1rem));font-weight:var(--vi-body-lg-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-lg-leading, var(--vi-line-height-relaxed, 1.75));letter-spacing:var(--vi-body-lg-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-lg-color, var(--vi-color-foreground, #111827))}.vi-body-md{font-size:var(--vi-body-md-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827))}.vi-body-sm{font-size:var(--vi-body-sm-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-body-sm-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-sm-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-sm-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-sm-color, var(--vi-color-grey-600, #757575))}.vi-label-md{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}.vi-label-sm{font-size:var(--vi-label-sm-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-label-sm-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-sm-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-sm-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-sm-color, var(--vi-color-foreground, #111827))}.vi-caption{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}.vi-overline{font-size:var(--vi-overline-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-overline-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-overline-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-overline-tracking, var(--vi-letter-spacing-widest, 0.1em));text-transform:uppercase;color:var(--vi-overline-color, var(--vi-color-grey-600, #757575))}.vi-code{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-code-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-code-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-code-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}.vi-text-muted{color:var(--vi-color-grey-500, #9e9e9e)}.vi-text-subtle{color:var(--vi-color-grey-600, #757575)}.vi-text-strong{font-weight:var(--vi-font-weight-semibold, 600)}.vi-text-bold{font-weight:var(--vi-font-weight-bold, 700)}.vi-text-italic{font-style:italic}.vi-text-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vi-text-balance{text-wrap:balance}.vi-tracking-tight{letter-spacing:var(--vi-letter-spacing-tight, -0.01em)}.vi-tracking-normal{letter-spacing:var(--vi-letter-spacing-normal, 0em)}.vi-tracking-wide{letter-spacing:var(--vi-letter-spacing-wide, 0.025em)}.vi-tracking-wider{letter-spacing:var(--vi-letter-spacing-wider, 0.05em)}.vi-tracking-widest{letter-spacing:var(--vi-letter-spacing-widest, 0.1em)}}@layer utilities{.m-unit{margin:var(--vi-spacing-unit, 0.25rem)}.mx-unit{margin-left:var(--vi-spacing-unit, 0.25rem);margin-right:var(--vi-spacing-unit, 0.25rem)}.my-unit{margin-top:var(--vi-spacing-unit, 0.25rem);margin-bottom:var(--vi-spacing-unit, 0.25rem)}.mt-unit{margin-top:var(--vi-spacing-unit, 0.25rem)}.mr-unit{margin-right:var(--vi-spacing-unit, 0.25rem)}.mb-unit{margin-bottom:var(--vi-spacing-unit, 0.25rem)}.ml-unit{margin-left:var(--vi-spacing-unit, 0.25rem)}.m-xs{margin:var(--vi-spacing-xs, 0.5rem)}.mx-xs{margin-left:var(--vi-spacing-xs, 0.5rem);margin-right:var(--vi-spacing-xs, 0.5rem)}.my-xs{margin-top:var(--vi-spacing-xs, 0.5rem);margin-bottom:var(--vi-spacing-xs, 0.5rem)}.mt-xs{margin-top:var(--vi-spacing-xs, 0.5rem)}.mr-xs{margin-right:var(--vi-spacing-xs, 0.5rem)}.mb-xs{margin-bottom:var(--vi-spacing-xs, 0.5rem)}.ml-xs{margin-left:var(--vi-spacing-xs, 0.5rem)}.m-sm{margin:var(--vi-spacing-sm, 0.75rem)}.mx-sm{margin-left:var(--vi-spacing-sm, 0.75rem);margin-right:var(--vi-spacing-sm, 0.75rem)}.my-sm{margin-top:var(--vi-spacing-sm, 0.75rem);margin-bottom:var(--vi-spacing-sm, 0.75rem)}.mt-sm{margin-top:var(--vi-spacing-sm, 0.75rem)}.mr-sm{margin-right:var(--vi-spacing-sm, 0.75rem)}.mb-sm{margin-bottom:var(--vi-spacing-sm, 0.75rem)}.ml-sm{margin-left:var(--vi-spacing-sm, 0.75rem)}.m-md{margin:var(--vi-spacing-md, 1rem)}.mx-md{margin-left:var(--vi-spacing-md, 1rem);margin-right:var(--vi-spacing-md, 1rem)}.my-md{margin-top:var(--vi-spacing-md, 1rem);margin-bottom:var(--vi-spacing-md, 1rem)}.mt-md{margin-top:var(--vi-spacing-md, 1rem)}.mr-md{margin-right:var(--vi-spacing-md, 1rem)}.mb-md{margin-bottom:var(--vi-spacing-md, 1rem)}.ml-md{margin-left:var(--vi-spacing-md, 1rem)}.m-lg{margin:var(--vi-spacing-lg, 1.5rem)}.mx-lg{margin-left:var(--vi-spacing-lg, 1.5rem);margin-right:var(--vi-spacing-lg, 1.5rem)}.my-lg{margin-top:var(--vi-spacing-lg, 1.5rem);margin-bottom:var(--vi-spacing-lg, 1.5rem)}.mt-lg{margin-top:var(--vi-spacing-lg, 1.5rem)}.mr-lg{margin-right:var(--vi-spacing-lg, 1.5rem)}.mb-lg{margin-bottom:var(--vi-spacing-lg, 1.5rem)}.ml-lg{margin-left:var(--vi-spacing-lg, 1.5rem)}.m-xl{margin:var(--vi-spacing-xl, 2rem)}.mx-xl{margin-left:var(--vi-spacing-xl, 2rem);margin-right:var(--vi-spacing-xl, 2rem)}.my-xl{margin-top:var(--vi-spacing-xl, 2rem);margin-bottom:var(--vi-spacing-xl, 2rem)}.mt-xl{margin-top:var(--vi-spacing-xl, 2rem)}.mr-xl{margin-right:var(--vi-spacing-xl, 2rem)}.mb-xl{margin-bottom:var(--vi-spacing-xl, 2rem)}.ml-xl{margin-left:var(--vi-spacing-xl, 2rem)}.m-2xl{margin:var(--vi-spacing-2xl, 3rem)}.mx-2xl{margin-left:var(--vi-spacing-2xl, 3rem);margin-right:var(--vi-spacing-2xl, 3rem)}.my-2xl{margin-top:var(--vi-spacing-2xl, 3rem);margin-bottom:var(--vi-spacing-2xl, 3rem)}.mt-2xl{margin-top:var(--vi-spacing-2xl, 3rem)}.mr-2xl{margin-right:var(--vi-spacing-2xl, 3rem)}.mb-2xl{margin-bottom:var(--vi-spacing-2xl, 3rem)}.ml-2xl{margin-left:var(--vi-spacing-2xl, 3rem)}.m-3xl{margin:var(--vi-spacing-3xl, 4rem)}.mx-3xl{margin-left:var(--vi-spacing-3xl, 4rem);margin-right:var(--vi-spacing-3xl, 4rem)}.my-3xl{margin-top:var(--vi-spacing-3xl, 4rem);margin-bottom:var(--vi-spacing-3xl, 4rem)}.mt-3xl{margin-top:var(--vi-spacing-3xl, 4rem)}.mr-3xl{margin-right:var(--vi-spacing-3xl, 4rem)}.mb-3xl{margin-bottom:var(--vi-spacing-3xl, 4rem)}.ml-3xl{margin-left:var(--vi-spacing-3xl, 4rem)}.p-unit{padding:var(--vi-spacing-unit, 0.25rem)}.px-unit{padding-left:var(--vi-spacing-unit, 0.25rem);padding-right:var(--vi-spacing-unit, 0.25rem)}.py-unit{padding-top:var(--vi-spacing-unit, 0.25rem);padding-bottom:var(--vi-spacing-unit, 0.25rem)}.pt-unit{padding-top:var(--vi-spacing-unit, 0.25rem)}.pr-unit{padding-right:var(--vi-spacing-unit, 0.25rem)}.pb-unit{padding-bottom:var(--vi-spacing-unit, 0.25rem)}.pl-unit{padding-left:var(--vi-spacing-unit, 0.25rem)}.p-xs{padding:var(--vi-spacing-xs, 0.5rem)}.px-xs{padding-left:var(--vi-spacing-xs, 0.5rem);padding-right:var(--vi-spacing-xs, 0.5rem)}.py-xs{padding-top:var(--vi-spacing-xs, 0.5rem);padding-bottom:var(--vi-spacing-xs, 0.5rem)}.pt-xs{padding-top:var(--vi-spacing-xs, 0.5rem)}.pr-xs{padding-right:var(--vi-spacing-xs, 0.5rem)}.pb-xs{padding-bottom:var(--vi-spacing-xs, 0.5rem)}.pl-xs{padding-left:var(--vi-spacing-xs, 0.5rem)}.p-sm{padding:var(--vi-spacing-sm, 0.75rem)}.px-sm{padding-left:var(--vi-spacing-sm, 0.75rem);padding-right:var(--vi-spacing-sm, 0.75rem)}.py-sm{padding-top:var(--vi-spacing-sm, 0.75rem);padding-bottom:var(--vi-spacing-sm, 0.75rem)}.pt-sm{padding-top:var(--vi-spacing-sm, 0.75rem)}.pr-sm{padding-right:var(--vi-spacing-sm, 0.75rem)}.pb-sm{padding-bottom:var(--vi-spacing-sm, 0.75rem)}.pl-sm{padding-left:var(--vi-spacing-sm, 0.75rem)}.p-md{padding:var(--vi-spacing-md, 1rem)}.px-md{padding-left:var(--vi-spacing-md, 1rem);padding-right:var(--vi-spacing-md, 1rem)}.py-md{padding-top:var(--vi-spacing-md, 1rem);padding-bottom:var(--vi-spacing-md, 1rem)}.pt-md{padding-top:var(--vi-spacing-md, 1rem)}.pr-md{padding-right:var(--vi-spacing-md, 1rem)}.pb-md{padding-bottom:var(--vi-spacing-md, 1rem)}.pl-md{padding-left:var(--vi-spacing-md, 1rem)}.p-lg{padding:var(--vi-spacing-lg, 1.5rem)}.px-lg{padding-left:var(--vi-spacing-lg, 1.5rem);padding-right:var(--vi-spacing-lg, 1.5rem)}.py-lg{padding-top:var(--vi-spacing-lg, 1.5rem);padding-bottom:var(--vi-spacing-lg, 1.5rem)}.pt-lg{padding-top:var(--vi-spacing-lg, 1.5rem)}.pr-lg{padding-right:var(--vi-spacing-lg, 1.5rem)}.pb-lg{padding-bottom:var(--vi-spacing-lg, 1.5rem)}.pl-lg{padding-left:var(--vi-spacing-lg, 1.5rem)}.p-xl{padding:var(--vi-spacing-xl, 2rem)}.px-xl{padding-left:var(--vi-spacing-xl, 2rem);padding-right:var(--vi-spacing-xl, 2rem)}.py-xl{padding-top:var(--vi-spacing-xl, 2rem);padding-bottom:var(--vi-spacing-xl, 2rem)}.pt-xl{padding-top:var(--vi-spacing-xl, 2rem)}.pr-xl{padding-right:var(--vi-spacing-xl, 2rem)}.pb-xl{padding-bottom:var(--vi-spacing-xl, 2rem)}.pl-xl{padding-left:var(--vi-spacing-xl, 2rem)}.p-2xl{padding:var(--vi-spacing-2xl, 3rem)}.px-2xl{padding-left:var(--vi-spacing-2xl, 3rem);padding-right:var(--vi-spacing-2xl, 3rem)}.py-2xl{padding-top:var(--vi-spacing-2xl, 3rem);padding-bottom:var(--vi-spacing-2xl, 3rem)}.pt-2xl{padding-top:var(--vi-spacing-2xl, 3rem)}.pr-2xl{padding-right:var(--vi-spacing-2xl, 3rem)}.pb-2xl{padding-bottom:var(--vi-spacing-2xl, 3rem)}.pl-2xl{padding-left:var(--vi-spacing-2xl, 3rem)}.p-3xl{padding:var(--vi-spacing-3xl, 4rem)}.px-3xl{padding-left:var(--vi-spacing-3xl, 4rem);padding-right:var(--vi-spacing-3xl, 4rem)}.py-3xl{padding-top:var(--vi-spacing-3xl, 4rem);padding-bottom:var(--vi-spacing-3xl, 4rem)}.pt-3xl{padding-top:var(--vi-spacing-3xl, 4rem)}.pr-3xl{padding-right:var(--vi-spacing-3xl, 4rem)}.pb-3xl{padding-bottom:var(--vi-spacing-3xl, 4rem)}.pl-3xl{padding-left:var(--vi-spacing-3xl, 4rem)}.text-xs{font-size:var(--vi-font-size-xs, 0.75rem)}.text-sm{font-size:var(--vi-font-size-sm, 0.8125rem)}.text-base{font-size:var(--vi-font-size-base, 0.875rem)}.text-lg{font-size:var(--vi-font-size-lg, 1rem)}.text-xl{font-size:var(--vi-font-size-xl, 1.25rem)}.text-2xl{font-size:var(--vi-font-size-2xl, 1.5rem)}.text-3xl{font-size:var(--vi-font-size-3xl, 1.875rem)}.font-light{font-weight:var(--vi-font-weight-light, 300)}.font-normal{font-weight:var(--vi-font-weight-normal, 400)}.font-medium{font-weight:var(--vi-font-weight-medium, 500)}.font-semibold{font-weight:var(--vi-font-weight-semibold, 600)}.font-bold{font-weight:var(--vi-font-weight-bold, 700)}.leading-tight{line-height:var(--vi-line-height-tight, 1.2)}.leading-normal{line-height:var(--vi-line-height-normal, 1.5715)}.leading-relaxed{line-height:var(--vi-line-height-relaxed, 1.75)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--vi-color-primary, #3676d0)}.bg-primary{background-color:var(--vi-color-primary, #3676d0)}.border-primary{border-color:var(--vi-color-primary, #3676d0)}.text-secondary{color:var(--vi-color-secondary, #f0f4f8)}.bg-secondary{background-color:var(--vi-color-secondary, #f0f4f8)}.border-secondary{border-color:var(--vi-color-secondary, #f0f4f8)}.text-success{color:var(--vi-color-success, #489167)}.bg-success{background-color:var(--vi-color-success, #489167)}.border-success{border-color:var(--vi-color-success, #489167)}.text-warning{color:var(--vi-color-warning, #ffba00)}.bg-warning{background-color:var(--vi-color-warning, #ffba00)}.border-warning{border-color:var(--vi-color-warning, #ffba00)}.text-error{color:var(--vi-color-error, #ef4444)}.bg-error{background-color:var(--vi-color-error, #ef4444)}.border-error{border-color:var(--vi-color-error, #ef4444)}.text-info{color:var(--vi-color-info, #3676d0)}.bg-info{background-color:var(--vi-color-info, #3676d0)}.border-info{border-color:var(--vi-color-info, #3676d0)}.text-grey-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-grey-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.text-grey-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-grey-200{background-color:var(--vi-color-grey-200, #eeeeee)}.text-grey-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-grey-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.text-grey-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-grey-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.text-grey-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-grey-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.text-grey-600{color:var(--vi-color-grey-600, #757575)}.bg-grey-600{background-color:var(--vi-color-grey-600, #757575)}.text-grey-700{color:var(--vi-color-grey-700, #616161)}.bg-grey-700{background-color:var(--vi-color-grey-700, #616161)}.text-grey-800{color:var(--vi-color-grey-800, #424242)}.bg-grey-800{background-color:var(--vi-color-grey-800, #424242)}.text-grey-900{color:var(--vi-color-grey-900, #212121)}.bg-grey-900{background-color:var(--vi-color-grey-900, #212121)}.text-red-100{color:var(--vi-color-red-100, #ffccce)}.bg-red-100{background-color:var(--vi-color-red-100, #ffccce)}.text-red-200{color:var(--vi-color-red-200, #f69892)}.bg-red-200{background-color:var(--vi-color-red-200, #f69892)}.text-red-300{color:var(--vi-color-red-300, #ee6f68)}.bg-red-300{background-color:var(--vi-color-red-300, #ee6f68)}.text-red-400{color:var(--vi-color-red-400, #f74d40)}.bg-red-400{background-color:var(--vi-color-red-400, #f74d40)}.text-red-500{color:var(--vi-color-red-500, #fb3c1e)}.bg-red-500{background-color:var(--vi-color-red-500, #fb3c1e)}.text-red-600{color:var(--vi-color-red-600, #ed3020)}.bg-red-600{background-color:var(--vi-color-red-600, #ed3020)}.text-red-700{color:var(--vi-color-red-700, #db231b)}.bg-red-700{background-color:var(--vi-color-red-700, #db231b)}.text-red-800{color:var(--vi-color-red-800, #ce1a12)}.bg-red-800{background-color:var(--vi-color-red-800, #ce1a12)}.text-red-900{color:var(--vi-color-red-900, #c00000)}.bg-red-900{background-color:var(--vi-color-red-900, #c00000)}.text-yellow-100{color:var(--vi-color-yellow-100, #ffeab1)}.bg-yellow-100{background-color:var(--vi-color-yellow-100, #ffeab1)}.text-yellow-200{color:var(--vi-color-yellow-200, #ffde85)}.bg-yellow-200{background-color:var(--vi-color-yellow-200, #ffde85)}.text-yellow-300{color:var(--vi-color-yellow-300, #ffd359)}.bg-yellow-300{background-color:var(--vi-color-yellow-300, #ffd359)}.text-yellow-400{color:var(--vi-color-yellow-400, #ffc72e)}.bg-yellow-400{background-color:var(--vi-color-yellow-400, #ffc72e)}.text-yellow-500{color:var(--vi-color-yellow-500, #ffba00)}.bg-yellow-500{background-color:var(--vi-color-yellow-500, #ffba00)}.text-yellow-600{color:var(--vi-color-yellow-600, #ffa900)}.bg-yellow-600{background-color:var(--vi-color-yellow-600, #ffa900)}.text-yellow-700{color:var(--vi-color-yellow-700, #ff9900)}.bg-yellow-700{background-color:var(--vi-color-yellow-700, #ff9900)}.text-yellow-800{color:var(--vi-color-yellow-800, #e68300)}.bg-yellow-800{background-color:var(--vi-color-yellow-800, #e68300)}.text-yellow-900{color:var(--vi-color-yellow-900, #cc6d00)}.bg-yellow-900{background-color:var(--vi-color-yellow-900, #cc6d00)}.text-green-100{color:var(--vi-color-green-100, #e6f0eb)}.bg-green-100{background-color:var(--vi-color-green-100, #e6f0eb)}.text-green-200{color:var(--vi-color-green-200, #c0dbcd)}.bg-green-200{background-color:var(--vi-color-green-200, #c0dbcd)}.text-green-300{color:var(--vi-color-green-300, #96c4ab)}.bg-green-300{background-color:var(--vi-color-green-300, #96c4ab)}.text-green-400{color:var(--vi-color-green-400, #6eab88)}.bg-green-400{background-color:var(--vi-color-green-400, #6eab88)}.text-green-500{color:var(--vi-color-green-500, #489167)}.bg-green-500{background-color:var(--vi-color-green-500, #489167)}.text-green-600{color:var(--vi-color-green-600, #367551)}.bg-green-600{background-color:var(--vi-color-green-600, #367551)}.text-green-700{color:var(--vi-color-green-700, #265a3d)}.bg-green-700{background-color:var(--vi-color-green-700, #265a3d)}.text-green-800{color:var(--vi-color-green-800, #17402a)}.bg-green-800{background-color:var(--vi-color-green-800, #17402a)}.text-green-900{color:var(--vi-color-green-900, #0a2618)}.bg-green-900{background-color:var(--vi-color-green-900, #0a2618)}.text-blue-100{color:var(--vi-color-blue-100, #ebf5ff)}.bg-blue-100{background-color:var(--vi-color-blue-100, #ebf5ff)}.text-blue-200{color:var(--vi-color-blue-200, #cee6ff)}.bg-blue-200{background-color:var(--vi-color-blue-200, #cee6ff)}.text-blue-300{color:var(--vi-color-blue-300, #a3d1fa)}.bg-blue-300{background-color:var(--vi-color-blue-300, #a3d1fa)}.text-blue-400{color:var(--vi-color-blue-400, #74b6f4)}.bg-blue-400{background-color:var(--vi-color-blue-400, #74b6f4)}.text-blue-500{color:var(--vi-color-blue-500, #3f96f1)}.bg-blue-500{background-color:var(--vi-color-blue-500, #3f96f1)}.text-blue-600{color:var(--vi-color-blue-600, #3b86de)}.bg-blue-600{background-color:var(--vi-color-blue-600, #3b86de)}.text-blue-700{color:var(--vi-color-blue-700, #3676d0)}.bg-blue-700{background-color:var(--vi-color-blue-700, #3676d0)}.text-blue-800{color:var(--vi-color-blue-800, #2d5fa8)}.bg-blue-800{background-color:var(--vi-color-blue-800, #2d5fa8)}.text-blue-900{color:var(--vi-color-blue-900, #254882)}.bg-blue-900{background-color:var(--vi-color-blue-900, #254882)}.text-purple-100{color:var(--vi-color-purple-100, #f0e5f9)}.bg-purple-100{background-color:var(--vi-color-purple-100, #f0e5f9)}.text-purple-200{color:var(--vi-color-purple-200, #dbbdf2)}.bg-purple-200{background-color:var(--vi-color-purple-200, #dbbdf2)}.text-purple-300{color:var(--vi-color-purple-300, #c18eeb)}.bg-purple-300{background-color:var(--vi-color-purple-300, #c18eeb)}.text-purple-400{color:var(--vi-color-purple-400, #a454e2)}.bg-purple-400{background-color:var(--vi-color-purple-400, #a454e2)}.text-purple-500{color:var(--vi-color-purple-500, #7609d0)}.bg-purple-500{background-color:var(--vi-color-purple-500, #7609d0)}.text-purple-600{color:var(--vi-color-purple-600, #6507c9)}.bg-purple-600{background-color:var(--vi-color-purple-600, #6507c9)}.text-purple-700{color:var(--vi-color-purple-700, #5505c2)}.bg-purple-700{background-color:var(--vi-color-purple-700, #5505c2)}.text-purple-800{color:var(--vi-color-purple-800, #4403bb)}.bg-purple-800{background-color:var(--vi-color-purple-800, #4403bb)}.text-purple-900{color:var(--vi-color-purple-900, #3400b4)}.bg-purple-900{background-color:var(--vi-color-purple-900, #3400b4)}.text-neutral-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-neutral-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.border-neutral-100{border-color:var(--vi-color-grey-100, #f5f5f5)}.text-neutral-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-neutral-200{background-color:var(--vi-color-grey-200, #eeeeee)}.border-neutral-200{border-color:var(--vi-color-grey-200, #eeeeee)}.text-neutral-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-neutral-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.border-neutral-300{border-color:var(--vi-color-grey-300, #e0e0e0)}.text-neutral-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-neutral-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.border-neutral-400{border-color:var(--vi-color-grey-400, #bdbdbd)}.text-neutral-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-neutral-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.border-neutral-500{border-color:var(--vi-color-grey-500, #9e9e9e)}.text-neutral-600{color:var(--vi-color-grey-600, #757575)}.bg-neutral-600{background-color:var(--vi-color-grey-600, #757575)}.border-neutral-600{border-color:var(--vi-color-grey-600, #757575)}.text-neutral-700{color:var(--vi-color-grey-700, #616161)}.bg-neutral-700{background-color:var(--vi-color-grey-700, #616161)}.border-neutral-700{border-color:var(--vi-color-grey-700, #616161)}.text-neutral-800{color:var(--vi-color-grey-800, #424242)}.bg-neutral-800{background-color:var(--vi-color-grey-800, #424242)}.border-neutral-800{border-color:var(--vi-color-grey-800, #424242)}.text-neutral-900{color:var(--vi-color-grey-900, #212121)}.bg-neutral-900{background-color:var(--vi-color-grey-900, #212121)}.border-neutral-900{border-color:var(--vi-color-grey-900, #212121)}.shadow-sm{box-shadow:var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))}.shadow-md{box-shadow:var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1))}.shadow-lg{box-shadow:var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1))}.shadow-xl{box-shadow:var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1))}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--vi-border-radius-sm, 4px)}.rounded-md{border-radius:var(--vi-border-radius-md, 6px)}.rounded-lg{border-radius:var(--vi-border-radius-lg, 8px)}.rounded-xl{border-radius:var(--vi-border-radius-xl, 12px)}.rounded-full{border-radius:var(--vi-border-radius-full, 9999px)}.border-thin{border-width:var(--vi-border-width-thin, 1px);border-style:solid}.border-base{border-width:var(--vi-border-width-base, 2px);border-style:solid}.border-thick{border-width:var(--vi-border-width-thick, 3px);border-style:solid}.z-hide{z-index:-1}.z-auto{z-index:auto}.z-base{z-index:0}.z-dropdown{z-index:1000}.z-sticky{z-index:1020}.z-fixed{z-index:1030}.z-backdrop{z-index:1040}.z-modal{z-index:1050}.z-popover{z-index:1060}.z-tooltip{z-index:1070}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.gap-unit{gap:var(--vi-spacing-unit, 0.25rem)}.gap-x-unit{column-gap:var(--vi-spacing-unit, 0.25rem)}.gap-y-unit{row-gap:var(--vi-spacing-unit, 0.25rem)}.gap-xs{gap:var(--vi-spacing-xs, 0.5rem)}.gap-x-xs{column-gap:var(--vi-spacing-xs, 0.5rem)}.gap-y-xs{row-gap:var(--vi-spacing-xs, 0.5rem)}.gap-sm{gap:var(--vi-spacing-sm, 0.75rem)}.gap-x-sm{column-gap:var(--vi-spacing-sm, 0.75rem)}.gap-y-sm{row-gap:var(--vi-spacing-sm, 0.75rem)}.gap-md{gap:var(--vi-spacing-md, 1rem)}.gap-x-md{column-gap:var(--vi-spacing-md, 1rem)}.gap-y-md{row-gap:var(--vi-spacing-md, 1rem)}.gap-lg{gap:var(--vi-spacing-lg, 1.5rem)}.gap-x-lg{column-gap:var(--vi-spacing-lg, 1.5rem)}.gap-y-lg{row-gap:var(--vi-spacing-lg, 1.5rem)}.gap-xl{gap:var(--vi-spacing-xl, 2rem)}.gap-x-xl{column-gap:var(--vi-spacing-xl, 2rem)}.gap-y-xl{row-gap:var(--vi-spacing-xl, 2rem)}.gap-2xl{gap:var(--vi-spacing-2xl, 3rem)}.gap-x-2xl{column-gap:var(--vi-spacing-2xl, 3rem)}.gap-y-2xl{row-gap:var(--vi-spacing-2xl, 3rem)}.gap-3xl{gap:var(--vi-spacing-3xl, 4rem)}.gap-x-3xl{column-gap:var(--vi-spacing-3xl, 4rem)}.gap-y-3xl{row-gap:var(--vi-spacing-3xl, 4rem)}.transition-all{transition:all .2s ease-in-out}.transition-colors{transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out}.transition-opacity{transition:opacity .2s ease-in-out}.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}}/*# sourceMappingURL=flux-ui.css.map */
|
|
1
|
+
@layer reset, components, utilities;:root{--vi-color-grey-100: strip-units(var(--vi-color-grey-100, #f5f5f5));--vi-color-grey-200: strip-units(var(--vi-color-grey-200, #eeeeee));--vi-color-grey-300: strip-units(var(--vi-color-grey-300, #e0e0e0));--vi-color-grey-400: strip-units(var(--vi-color-grey-400, #bdbdbd));--vi-color-grey-500: strip-units(var(--vi-color-grey-500, #9e9e9e));--vi-color-grey-600: strip-units(var(--vi-color-grey-600, #757575));--vi-color-grey-700: strip-units(var(--vi-color-grey-700, #616161));--vi-color-grey-800: strip-units(var(--vi-color-grey-800, #424242));--vi-color-grey-900: strip-units(var(--vi-color-grey-900, #212121));--vi-color-red-100: strip-units(var(--vi-color-red-100, #ffccce));--vi-color-red-200: strip-units(var(--vi-color-red-200, #f69892));--vi-color-red-300: strip-units(var(--vi-color-red-300, #ee6f68));--vi-color-red-400: strip-units(var(--vi-color-red-400, #f74d40));--vi-color-red-500: strip-units(var(--vi-color-red-500, #fb3c1e));--vi-color-red-600: strip-units(var(--vi-color-red-600, #ed3020));--vi-color-red-700: strip-units(var(--vi-color-red-700, #db231b));--vi-color-red-800: strip-units(var(--vi-color-red-800, #ce1a12));--vi-color-red-900: strip-units(var(--vi-color-red-900, #c00000));--vi-color-yellow-100: strip-units(var(--vi-color-yellow-100, #ffeab1));--vi-color-yellow-200: strip-units(var(--vi-color-yellow-200, #ffde85));--vi-color-yellow-300: strip-units(var(--vi-color-yellow-300, #ffd359));--vi-color-yellow-400: strip-units(var(--vi-color-yellow-400, #ffc72e));--vi-color-yellow-500: strip-units(var(--vi-color-yellow-500, #ffba00));--vi-color-yellow-600: strip-units(var(--vi-color-yellow-600, #ffa900));--vi-color-yellow-700: strip-units(var(--vi-color-yellow-700, #ff9900));--vi-color-yellow-800: strip-units(var(--vi-color-yellow-800, #e68300));--vi-color-yellow-900: strip-units(var(--vi-color-yellow-900, #cc6d00));--vi-color-green-100: strip-units(var(--vi-color-green-100, #e6f0eb));--vi-color-green-200: strip-units(var(--vi-color-green-200, #c0dbcd));--vi-color-green-300: strip-units(var(--vi-color-green-300, #96c4ab));--vi-color-green-400: strip-units(var(--vi-color-green-400, #6eab88));--vi-color-green-500: strip-units(var(--vi-color-green-500, #489167));--vi-color-green-600: strip-units(var(--vi-color-green-600, #367551));--vi-color-green-700: strip-units(var(--vi-color-green-700, #265a3d));--vi-color-green-800: strip-units(var(--vi-color-green-800, #17402a));--vi-color-green-900: strip-units(var(--vi-color-green-900, #0a2618));--vi-color-blue-100: strip-units(var(--vi-color-blue-100, #ebf5ff));--vi-color-blue-200: strip-units(var(--vi-color-blue-200, #cee6ff));--vi-color-blue-300: strip-units(var(--vi-color-blue-300, #a3d1fa));--vi-color-blue-400: strip-units(var(--vi-color-blue-400, #74b6f4));--vi-color-blue-500: strip-units(var(--vi-color-blue-500, #3f96f1));--vi-color-blue-600: strip-units(var(--vi-color-blue-600, #3b86de));--vi-color-blue-700: strip-units(var(--vi-color-blue-700, #3676d0));--vi-color-blue-800: strip-units(var(--vi-color-blue-800, #2d5fa8));--vi-color-blue-900: strip-units(var(--vi-color-blue-900, #254882));--vi-color-purple-100: strip-units(var(--vi-color-purple-100, #f0e5f9));--vi-color-purple-200: strip-units(var(--vi-color-purple-200, #dbbdf2));--vi-color-purple-300: strip-units(var(--vi-color-purple-300, #c18eeb));--vi-color-purple-400: strip-units(var(--vi-color-purple-400, #a454e2));--vi-color-purple-500: strip-units(var(--vi-color-purple-500, #7609d0));--vi-color-purple-600: strip-units(var(--vi-color-purple-600, #6507c9));--vi-color-purple-700: strip-units(var(--vi-color-purple-700, #5505c2));--vi-color-purple-800: strip-units(var(--vi-color-purple-800, #4403bb));--vi-color-purple-900: strip-units(var(--vi-color-purple-900, #3400b4));--vi-color-primary: strip-units(var(--vi-color-primary, #3676d0));--vi-color-secondary: strip-units(var(--vi-color-secondary, #f0f4f8));--vi-color-success: strip-units(var(--vi-color-success, #489167));--vi-color-warning: strip-units(var(--vi-color-warning, #ffba00));--vi-color-error: strip-units(var(--vi-color-error, #ef4444));--vi-color-info: strip-units(var(--vi-color-info, #3676d0));--vi-color-background: strip-units(var(--vi-color-background, #ffffff));--vi-color-foreground: strip-units(var(--vi-color-foreground, #111827));--vi-color-border: strip-units(var(--vi-color-border, #e5e7eb));--vi-spacing-unit: strip-units(var(--vi-spacing-unit, 0.25rem));--vi-spacing-xs: strip-units(var(--vi-spacing-xs, 0.5rem));--vi-spacing-sm: strip-units(var(--vi-spacing-sm, 0.75rem));--vi-spacing-md: strip-units(var(--vi-spacing-md, 1rem));--vi-spacing-lg: strip-units(var(--vi-spacing-lg, 1.5rem));--vi-spacing-xl: strip-units(var(--vi-spacing-xl, 2rem));--vi-spacing-2xl: strip-units(var(--vi-spacing-2xl, 3rem));--vi-spacing-3xl: strip-units(var(--vi-spacing-3xl, 4rem));--vi-font-family-base: strip-units(var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));--vi-font-family-mono: strip-units(var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));--vi-font-size-xs: strip-units(var(--vi-font-size-xs, 0.75rem));--vi-font-size-sm: strip-units(var(--vi-font-size-sm, 0.8125rem));--vi-font-size-base: strip-units(var(--vi-font-size-base, 0.875rem));--vi-font-size-lg: strip-units(var(--vi-font-size-lg, 1rem));--vi-font-size-xl: strip-units(var(--vi-font-size-xl, 1.25rem));--vi-font-size-2xl: strip-units(var(--vi-font-size-2xl, 1.5rem));--vi-font-size-3xl: strip-units(var(--vi-font-size-3xl, 1.875rem));--vi-font-weight-light: strip-units(var(--vi-font-weight-light, 300));--vi-font-weight-normal: strip-units(var(--vi-font-weight-normal, 400));--vi-font-weight-medium: strip-units(var(--vi-font-weight-medium, 500));--vi-font-weight-semibold: strip-units(var(--vi-font-weight-semibold, 600));--vi-font-weight-bold: strip-units(var(--vi-font-weight-bold, 700));--vi-line-height-tight: strip-units(var(--vi-line-height-tight, 1.2));--vi-line-height-normal: strip-units(var(--vi-line-height-normal, 1.5715));--vi-line-height-relaxed: strip-units(var(--vi-line-height-relaxed, 1.75));--vi-letter-spacing-tight: strip-units(var(--vi-letter-spacing-tight, -0.01em));--vi-letter-spacing-normal: strip-units(var(--vi-letter-spacing-normal, 0em));--vi-letter-spacing-wide: strip-units(var(--vi-letter-spacing-wide, 0.025em));--vi-letter-spacing-wider: strip-units(var(--vi-letter-spacing-wider, 0.05em));--vi-letter-spacing-widest: strip-units(var(--vi-letter-spacing-widest, 0.1em));--vi-shadow-sm: strip-units(var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.03)));--vi-shadow-md: strip-units(var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1)));--vi-shadow-lg: strip-units(var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1)));--vi-shadow-xl: strip-units(var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 25px 50px -12px rgba(0, 0, 0, 0.15)));--vi-border-radius-sm: strip-units(var(--vi-border-radius-sm, 4px));--vi-border-radius-md: strip-units(var(--vi-border-radius-md, 6px));--vi-border-radius-lg: strip-units(var(--vi-border-radius-lg, 8px));--vi-border-radius-xl: strip-units(var(--vi-border-radius-xl, 12px));--vi-border-width-thin: strip-units(var(--vi-border-width-thin, 1px));--vi-border-width-base: strip-units(var(--vi-border-width-base, 2px));--vi-border-width-thick: strip-units(var(--vi-border-width-thick, 3px))}@layer reset{*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);font-size:var(--vi-font-size-base, 0.875rem);line-height:var(--vi-line-height-normal, 1.5715);color:var(--vi-color-foreground, #111827);background-color:var(--vi-color-background, #ffffff);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p,h1,h2,h3,h4,h5,h6,ul,ol,dl{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit;line-height:inherit}ul,ol{list-style:none}a{color:inherit;text-decoration:none;background-color:rgba(0,0,0,0)}a:active,a:hover{outline:0}code,pre,samp{font-family:var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace);font-size:1em}pre{margin:0;overflow:auto}button,input,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%;line-height:1.15}button,input[type=button],input[type=reset],input[type=submit]{background:rgba(0,0,0,0);border:0;cursor:pointer;-webkit-appearance:button}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{padding:0;border:0}input[type=checkbox]{padding:0;-webkit-appearance:checkbox}input[type=radio]{padding:0;-webkit-appearance:radio}textarea{overflow:auto;resize:vertical}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img,svg{max-width:100%;height:auto;display:block}img{border:0;vertical-align:middle}iframe,video{max-width:100%}[hidden]{display:none}hr{margin:0;border:0;border-top:1px solid var(--vi-color-border, #e5e7eb)}}@layer utilities{.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-center{align-items:center}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.gap-xs{gap:var(--vi-spacing-xs, 0.5rem)}.gap-sm{gap:var(--vi-spacing-sm, 0.75rem)}.gap-md{gap:var(--vi-spacing-md, 1rem)}.gap-lg{gap:var(--vi-spacing-lg, 1.5rem)}.gap-xl{gap:var(--vi-spacing-xl, 2rem)}.flex-1{flex:1}.flex-grow{flex-grow:1}.flex-shrink-0{flex-shrink:0}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-auto-fit{grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.min-h-screen{min-height:100vh;min-height:100dvh}.max-w-container{max-width:1200px;margin-left:auto;margin-right:auto}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}}.vi-overline,.vi-caption,.vi-label-sm,.vi-label-md,.vi-body-sm,.vi-body-md,.vi-body-lg,.vi-heading-sm,.vi-heading-md,.vi-heading-lg,.vi-heading-xl,.vi-display-md,.vi-display-lg,td,th,blockquote,pre,code,kbd,samp,figcaption,small,label,p,h6,h5,h4,h3,h2,h1{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}@layer components{body{font-family:var(--vi-font-family-base, var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));font-size:var(--vi-body-md-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:var(--vi-heading-h1-size, var(--vi-font-size-3xl, 1.875rem));font-weight:var(--vi-heading-h1-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h1-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h1-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h1-color, var(--vi-color-foreground, #111827))}h2{font-size:var(--vi-heading-h2-size, var(--vi-font-size-2xl, 1.5rem));font-weight:var(--vi-heading-h2-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h2-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h2-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h2-color, var(--vi-color-foreground, #111827))}h3{font-size:var(--vi-heading-h3-size, var(--vi-font-size-xl, 1.25rem));font-weight:var(--vi-heading-h3-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h3-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h3-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h3-color, var(--vi-color-foreground, #111827))}h4{font-size:var(--vi-heading-h4-size, var(--vi-font-size-lg, 1rem));font-weight:var(--vi-heading-h4-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h4-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h4-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h4-color, var(--vi-color-foreground, #111827))}h5{font-size:var(--vi-heading-h5-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-heading-h5-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h5-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h5-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h5-color, var(--vi-color-foreground, #111827))}h6{font-size:var(--vi-heading-h6-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-heading-h6-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h6-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h6-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h6-color, var(--vi-color-grey-700, #616161))}p{font-size:var(--vi-body-md-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827))}label{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}small{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}strong,b{font-weight:var(--vi-font-weight-semibold, 600)}em,i{font-style:italic}figcaption{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}code,kbd,samp{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-code-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-code-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-code-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}pre{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 0.8125rem));line-height:var(--vi-code-leading, var(--vi-line-height-relaxed, 1.75));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}blockquote{font-size:var(--vi-body-lg-size, var(--vi-font-size-lg, 1rem));font-weight:var(--vi-body-lg-weight, var(--vi-font-weight-light, 300));line-height:var(--vi-body-lg-leading, var(--vi-line-height-relaxed, 1.75));letter-spacing:var(--vi-body-lg-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-lg-color, var(--vi-color-grey-700, #616161));font-style:italic;padding:0}th{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}td{font-size:var(--vi-body-sm-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-body-sm-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-sm-leading, var(--vi-line-height-normal, 1.5715));color:var(--vi-body-sm-color, var(--vi-color-grey-600, #757575))}}@layer utilities{.vi-display-lg{font-size:var(--vi-display-lg-size, var(--vi-font-size-3xl, 1.875rem));font-weight:var(--vi-display-lg-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-display-lg-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-display-lg-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-display-lg-color, var(--vi-color-foreground, #111827))}.vi-display-md{font-size:var(--vi-display-md-size, var(--vi-font-size-2xl, 1.5rem));font-weight:var(--vi-display-md-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-display-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-display-md-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-display-md-color, var(--vi-color-foreground, #111827))}.vi-heading-xl{font-size:var(--vi-heading-h2-size, var(--vi-font-size-2xl, 1.5rem));font-weight:var(--vi-heading-h2-weight, var(--vi-font-weight-bold, 700));line-height:var(--vi-heading-h2-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h2-tracking, var(--vi-letter-spacing-tight, -0.01em));color:var(--vi-heading-h2-color, var(--vi-color-foreground, #111827))}.vi-heading-lg{font-size:var(--vi-heading-h3-size, var(--vi-font-size-xl, 1.25rem));font-weight:var(--vi-heading-h3-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h3-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-heading-h3-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-heading-h3-color, var(--vi-color-foreground, #111827))}.vi-heading-md{font-size:var(--vi-heading-h5-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-heading-h5-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h5-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h5-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h5-color, var(--vi-color-foreground, #111827))}.vi-heading-sm{font-size:var(--vi-heading-h6-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-heading-h6-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-heading-h6-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-heading-h6-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-heading-h6-color, var(--vi-color-grey-700, #616161))}.vi-body-lg{font-size:var(--vi-body-lg-size, var(--vi-font-size-lg, 1rem));font-weight:var(--vi-body-lg-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-lg-leading, var(--vi-line-height-relaxed, 1.75));letter-spacing:var(--vi-body-lg-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-lg-color, var(--vi-color-foreground, #111827))}.vi-body-md{font-size:var(--vi-body-md-size, var(--vi-font-size-base, 0.875rem));font-weight:var(--vi-body-md-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-md-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-md-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-md-color, var(--vi-color-foreground, #111827))}.vi-body-sm{font-size:var(--vi-body-sm-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-body-sm-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-body-sm-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-body-sm-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-body-sm-color, var(--vi-color-grey-600, #757575))}.vi-label-md{font-size:var(--vi-label-md-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-label-md-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-md-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-md-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-md-color, var(--vi-color-foreground, #111827))}.vi-label-sm{font-size:var(--vi-label-sm-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-label-sm-weight, var(--vi-font-weight-medium, 500));line-height:var(--vi-label-sm-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-label-sm-tracking, var(--vi-letter-spacing-wide, 0.025em));color:var(--vi-label-sm-color, var(--vi-color-foreground, #111827))}.vi-caption{font-size:var(--vi-caption-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-caption-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-caption-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-caption-tracking, var(--vi-letter-spacing-wider, 0.05em));color:var(--vi-caption-color, var(--vi-color-grey-500, #9e9e9e))}.vi-overline{font-size:var(--vi-overline-size, var(--vi-font-size-xs, 0.75rem));font-weight:var(--vi-overline-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-overline-leading, var(--vi-line-height-tight, 1.2));letter-spacing:var(--vi-overline-tracking, var(--vi-letter-spacing-widest, 0.1em));text-transform:uppercase;color:var(--vi-overline-color, var(--vi-color-grey-600, #757575))}.vi-code{font-family:var(--vi-font-family-mono, var(--vi-font-family-mono, "Menlo", "Monaco", "Courier New", monospace));font-size:var(--vi-code-size, var(--vi-font-size-sm, 0.8125rem));font-weight:var(--vi-code-weight, var(--vi-font-weight-normal, 400));line-height:var(--vi-code-leading, var(--vi-line-height-normal, 1.5715));letter-spacing:var(--vi-code-tracking, var(--vi-letter-spacing-normal, 0em));color:var(--vi-code-color, var(--vi-color-foreground, #111827));-webkit-font-smoothing:auto}.vi-text-muted{color:var(--vi-color-grey-500, #9e9e9e)}.vi-text-subtle{color:var(--vi-color-grey-600, #757575)}.vi-text-strong{font-weight:var(--vi-font-weight-semibold, 600)}.vi-text-bold{font-weight:var(--vi-font-weight-bold, 700)}.vi-text-italic{font-style:italic}.vi-text-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vi-text-balance{text-wrap:balance}.vi-tracking-tight{letter-spacing:var(--vi-letter-spacing-tight, -0.01em)}.vi-tracking-normal{letter-spacing:var(--vi-letter-spacing-normal, 0em)}.vi-tracking-wide{letter-spacing:var(--vi-letter-spacing-wide, 0.025em)}.vi-tracking-wider{letter-spacing:var(--vi-letter-spacing-wider, 0.05em)}.vi-tracking-widest{letter-spacing:var(--vi-letter-spacing-widest, 0.1em)}}@layer utilities{.m-unit{margin:var(--vi-spacing-unit, 0.25rem)}.mx-unit{margin-left:var(--vi-spacing-unit, 0.25rem);margin-right:var(--vi-spacing-unit, 0.25rem)}.my-unit{margin-top:var(--vi-spacing-unit, 0.25rem);margin-bottom:var(--vi-spacing-unit, 0.25rem)}.mt-unit{margin-top:var(--vi-spacing-unit, 0.25rem)}.mr-unit{margin-right:var(--vi-spacing-unit, 0.25rem)}.mb-unit{margin-bottom:var(--vi-spacing-unit, 0.25rem)}.ml-unit{margin-left:var(--vi-spacing-unit, 0.25rem)}.m-xs{margin:var(--vi-spacing-xs, 0.5rem)}.mx-xs{margin-left:var(--vi-spacing-xs, 0.5rem);margin-right:var(--vi-spacing-xs, 0.5rem)}.my-xs{margin-top:var(--vi-spacing-xs, 0.5rem);margin-bottom:var(--vi-spacing-xs, 0.5rem)}.mt-xs{margin-top:var(--vi-spacing-xs, 0.5rem)}.mr-xs{margin-right:var(--vi-spacing-xs, 0.5rem)}.mb-xs{margin-bottom:var(--vi-spacing-xs, 0.5rem)}.ml-xs{margin-left:var(--vi-spacing-xs, 0.5rem)}.m-sm{margin:var(--vi-spacing-sm, 0.75rem)}.mx-sm{margin-left:var(--vi-spacing-sm, 0.75rem);margin-right:var(--vi-spacing-sm, 0.75rem)}.my-sm{margin-top:var(--vi-spacing-sm, 0.75rem);margin-bottom:var(--vi-spacing-sm, 0.75rem)}.mt-sm{margin-top:var(--vi-spacing-sm, 0.75rem)}.mr-sm{margin-right:var(--vi-spacing-sm, 0.75rem)}.mb-sm{margin-bottom:var(--vi-spacing-sm, 0.75rem)}.ml-sm{margin-left:var(--vi-spacing-sm, 0.75rem)}.m-md{margin:var(--vi-spacing-md, 1rem)}.mx-md{margin-left:var(--vi-spacing-md, 1rem);margin-right:var(--vi-spacing-md, 1rem)}.my-md{margin-top:var(--vi-spacing-md, 1rem);margin-bottom:var(--vi-spacing-md, 1rem)}.mt-md{margin-top:var(--vi-spacing-md, 1rem)}.mr-md{margin-right:var(--vi-spacing-md, 1rem)}.mb-md{margin-bottom:var(--vi-spacing-md, 1rem)}.ml-md{margin-left:var(--vi-spacing-md, 1rem)}.m-lg{margin:var(--vi-spacing-lg, 1.5rem)}.mx-lg{margin-left:var(--vi-spacing-lg, 1.5rem);margin-right:var(--vi-spacing-lg, 1.5rem)}.my-lg{margin-top:var(--vi-spacing-lg, 1.5rem);margin-bottom:var(--vi-spacing-lg, 1.5rem)}.mt-lg{margin-top:var(--vi-spacing-lg, 1.5rem)}.mr-lg{margin-right:var(--vi-spacing-lg, 1.5rem)}.mb-lg{margin-bottom:var(--vi-spacing-lg, 1.5rem)}.ml-lg{margin-left:var(--vi-spacing-lg, 1.5rem)}.m-xl{margin:var(--vi-spacing-xl, 2rem)}.mx-xl{margin-left:var(--vi-spacing-xl, 2rem);margin-right:var(--vi-spacing-xl, 2rem)}.my-xl{margin-top:var(--vi-spacing-xl, 2rem);margin-bottom:var(--vi-spacing-xl, 2rem)}.mt-xl{margin-top:var(--vi-spacing-xl, 2rem)}.mr-xl{margin-right:var(--vi-spacing-xl, 2rem)}.mb-xl{margin-bottom:var(--vi-spacing-xl, 2rem)}.ml-xl{margin-left:var(--vi-spacing-xl, 2rem)}.m-2xl{margin:var(--vi-spacing-2xl, 3rem)}.mx-2xl{margin-left:var(--vi-spacing-2xl, 3rem);margin-right:var(--vi-spacing-2xl, 3rem)}.my-2xl{margin-top:var(--vi-spacing-2xl, 3rem);margin-bottom:var(--vi-spacing-2xl, 3rem)}.mt-2xl{margin-top:var(--vi-spacing-2xl, 3rem)}.mr-2xl{margin-right:var(--vi-spacing-2xl, 3rem)}.mb-2xl{margin-bottom:var(--vi-spacing-2xl, 3rem)}.ml-2xl{margin-left:var(--vi-spacing-2xl, 3rem)}.m-3xl{margin:var(--vi-spacing-3xl, 4rem)}.mx-3xl{margin-left:var(--vi-spacing-3xl, 4rem);margin-right:var(--vi-spacing-3xl, 4rem)}.my-3xl{margin-top:var(--vi-spacing-3xl, 4rem);margin-bottom:var(--vi-spacing-3xl, 4rem)}.mt-3xl{margin-top:var(--vi-spacing-3xl, 4rem)}.mr-3xl{margin-right:var(--vi-spacing-3xl, 4rem)}.mb-3xl{margin-bottom:var(--vi-spacing-3xl, 4rem)}.ml-3xl{margin-left:var(--vi-spacing-3xl, 4rem)}.p-unit{padding:var(--vi-spacing-unit, 0.25rem)}.px-unit{padding-left:var(--vi-spacing-unit, 0.25rem);padding-right:var(--vi-spacing-unit, 0.25rem)}.py-unit{padding-top:var(--vi-spacing-unit, 0.25rem);padding-bottom:var(--vi-spacing-unit, 0.25rem)}.pt-unit{padding-top:var(--vi-spacing-unit, 0.25rem)}.pr-unit{padding-right:var(--vi-spacing-unit, 0.25rem)}.pb-unit{padding-bottom:var(--vi-spacing-unit, 0.25rem)}.pl-unit{padding-left:var(--vi-spacing-unit, 0.25rem)}.p-xs{padding:var(--vi-spacing-xs, 0.5rem)}.px-xs{padding-left:var(--vi-spacing-xs, 0.5rem);padding-right:var(--vi-spacing-xs, 0.5rem)}.py-xs{padding-top:var(--vi-spacing-xs, 0.5rem);padding-bottom:var(--vi-spacing-xs, 0.5rem)}.pt-xs{padding-top:var(--vi-spacing-xs, 0.5rem)}.pr-xs{padding-right:var(--vi-spacing-xs, 0.5rem)}.pb-xs{padding-bottom:var(--vi-spacing-xs, 0.5rem)}.pl-xs{padding-left:var(--vi-spacing-xs, 0.5rem)}.p-sm{padding:var(--vi-spacing-sm, 0.75rem)}.px-sm{padding-left:var(--vi-spacing-sm, 0.75rem);padding-right:var(--vi-spacing-sm, 0.75rem)}.py-sm{padding-top:var(--vi-spacing-sm, 0.75rem);padding-bottom:var(--vi-spacing-sm, 0.75rem)}.pt-sm{padding-top:var(--vi-spacing-sm, 0.75rem)}.pr-sm{padding-right:var(--vi-spacing-sm, 0.75rem)}.pb-sm{padding-bottom:var(--vi-spacing-sm, 0.75rem)}.pl-sm{padding-left:var(--vi-spacing-sm, 0.75rem)}.p-md{padding:var(--vi-spacing-md, 1rem)}.px-md{padding-left:var(--vi-spacing-md, 1rem);padding-right:var(--vi-spacing-md, 1rem)}.py-md{padding-top:var(--vi-spacing-md, 1rem);padding-bottom:var(--vi-spacing-md, 1rem)}.pt-md{padding-top:var(--vi-spacing-md, 1rem)}.pr-md{padding-right:var(--vi-spacing-md, 1rem)}.pb-md{padding-bottom:var(--vi-spacing-md, 1rem)}.pl-md{padding-left:var(--vi-spacing-md, 1rem)}.p-lg{padding:var(--vi-spacing-lg, 1.5rem)}.px-lg{padding-left:var(--vi-spacing-lg, 1.5rem);padding-right:var(--vi-spacing-lg, 1.5rem)}.py-lg{padding-top:var(--vi-spacing-lg, 1.5rem);padding-bottom:var(--vi-spacing-lg, 1.5rem)}.pt-lg{padding-top:var(--vi-spacing-lg, 1.5rem)}.pr-lg{padding-right:var(--vi-spacing-lg, 1.5rem)}.pb-lg{padding-bottom:var(--vi-spacing-lg, 1.5rem)}.pl-lg{padding-left:var(--vi-spacing-lg, 1.5rem)}.p-xl{padding:var(--vi-spacing-xl, 2rem)}.px-xl{padding-left:var(--vi-spacing-xl, 2rem);padding-right:var(--vi-spacing-xl, 2rem)}.py-xl{padding-top:var(--vi-spacing-xl, 2rem);padding-bottom:var(--vi-spacing-xl, 2rem)}.pt-xl{padding-top:var(--vi-spacing-xl, 2rem)}.pr-xl{padding-right:var(--vi-spacing-xl, 2rem)}.pb-xl{padding-bottom:var(--vi-spacing-xl, 2rem)}.pl-xl{padding-left:var(--vi-spacing-xl, 2rem)}.p-2xl{padding:var(--vi-spacing-2xl, 3rem)}.px-2xl{padding-left:var(--vi-spacing-2xl, 3rem);padding-right:var(--vi-spacing-2xl, 3rem)}.py-2xl{padding-top:var(--vi-spacing-2xl, 3rem);padding-bottom:var(--vi-spacing-2xl, 3rem)}.pt-2xl{padding-top:var(--vi-spacing-2xl, 3rem)}.pr-2xl{padding-right:var(--vi-spacing-2xl, 3rem)}.pb-2xl{padding-bottom:var(--vi-spacing-2xl, 3rem)}.pl-2xl{padding-left:var(--vi-spacing-2xl, 3rem)}.p-3xl{padding:var(--vi-spacing-3xl, 4rem)}.px-3xl{padding-left:var(--vi-spacing-3xl, 4rem);padding-right:var(--vi-spacing-3xl, 4rem)}.py-3xl{padding-top:var(--vi-spacing-3xl, 4rem);padding-bottom:var(--vi-spacing-3xl, 4rem)}.pt-3xl{padding-top:var(--vi-spacing-3xl, 4rem)}.pr-3xl{padding-right:var(--vi-spacing-3xl, 4rem)}.pb-3xl{padding-bottom:var(--vi-spacing-3xl, 4rem)}.pl-3xl{padding-left:var(--vi-spacing-3xl, 4rem)}.text-xs{font-size:var(--vi-font-size-xs, 0.75rem)}.text-sm{font-size:var(--vi-font-size-sm, 0.8125rem)}.text-base{font-size:var(--vi-font-size-base, 0.875rem)}.text-lg{font-size:var(--vi-font-size-lg, 1rem)}.text-xl{font-size:var(--vi-font-size-xl, 1.25rem)}.text-2xl{font-size:var(--vi-font-size-2xl, 1.5rem)}.text-3xl{font-size:var(--vi-font-size-3xl, 1.875rem)}.font-light{font-weight:var(--vi-font-weight-light, 300)}.font-normal{font-weight:var(--vi-font-weight-normal, 400)}.font-medium{font-weight:var(--vi-font-weight-medium, 500)}.font-semibold{font-weight:var(--vi-font-weight-semibold, 600)}.font-bold{font-weight:var(--vi-font-weight-bold, 700)}.leading-tight{line-height:var(--vi-line-height-tight, 1.2)}.leading-normal{line-height:var(--vi-line-height-normal, 1.5715)}.leading-relaxed{line-height:var(--vi-line-height-relaxed, 1.75)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--vi-color-primary, #3676d0)}.bg-primary{background-color:var(--vi-color-primary, #3676d0)}.border-primary{border-color:var(--vi-color-primary, #3676d0)}.text-secondary{color:var(--vi-color-secondary, #f0f4f8)}.bg-secondary{background-color:var(--vi-color-secondary, #f0f4f8)}.border-secondary{border-color:var(--vi-color-secondary, #f0f4f8)}.text-success{color:var(--vi-color-success, #489167)}.bg-success{background-color:var(--vi-color-success, #489167)}.border-success{border-color:var(--vi-color-success, #489167)}.text-warning{color:var(--vi-color-warning, #ffba00)}.bg-warning{background-color:var(--vi-color-warning, #ffba00)}.border-warning{border-color:var(--vi-color-warning, #ffba00)}.text-error{color:var(--vi-color-error, #ef4444)}.bg-error{background-color:var(--vi-color-error, #ef4444)}.border-error{border-color:var(--vi-color-error, #ef4444)}.text-info{color:var(--vi-color-info, #3676d0)}.bg-info{background-color:var(--vi-color-info, #3676d0)}.border-info{border-color:var(--vi-color-info, #3676d0)}.text-grey-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-grey-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.text-grey-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-grey-200{background-color:var(--vi-color-grey-200, #eeeeee)}.text-grey-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-grey-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.text-grey-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-grey-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.text-grey-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-grey-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.text-grey-600{color:var(--vi-color-grey-600, #757575)}.bg-grey-600{background-color:var(--vi-color-grey-600, #757575)}.text-grey-700{color:var(--vi-color-grey-700, #616161)}.bg-grey-700{background-color:var(--vi-color-grey-700, #616161)}.text-grey-800{color:var(--vi-color-grey-800, #424242)}.bg-grey-800{background-color:var(--vi-color-grey-800, #424242)}.text-grey-900{color:var(--vi-color-grey-900, #212121)}.bg-grey-900{background-color:var(--vi-color-grey-900, #212121)}.text-red-100{color:var(--vi-color-red-100, #ffccce)}.bg-red-100{background-color:var(--vi-color-red-100, #ffccce)}.text-red-200{color:var(--vi-color-red-200, #f69892)}.bg-red-200{background-color:var(--vi-color-red-200, #f69892)}.text-red-300{color:var(--vi-color-red-300, #ee6f68)}.bg-red-300{background-color:var(--vi-color-red-300, #ee6f68)}.text-red-400{color:var(--vi-color-red-400, #f74d40)}.bg-red-400{background-color:var(--vi-color-red-400, #f74d40)}.text-red-500{color:var(--vi-color-red-500, #fb3c1e)}.bg-red-500{background-color:var(--vi-color-red-500, #fb3c1e)}.text-red-600{color:var(--vi-color-red-600, #ed3020)}.bg-red-600{background-color:var(--vi-color-red-600, #ed3020)}.text-red-700{color:var(--vi-color-red-700, #db231b)}.bg-red-700{background-color:var(--vi-color-red-700, #db231b)}.text-red-800{color:var(--vi-color-red-800, #ce1a12)}.bg-red-800{background-color:var(--vi-color-red-800, #ce1a12)}.text-red-900{color:var(--vi-color-red-900, #c00000)}.bg-red-900{background-color:var(--vi-color-red-900, #c00000)}.text-yellow-100{color:var(--vi-color-yellow-100, #ffeab1)}.bg-yellow-100{background-color:var(--vi-color-yellow-100, #ffeab1)}.text-yellow-200{color:var(--vi-color-yellow-200, #ffde85)}.bg-yellow-200{background-color:var(--vi-color-yellow-200, #ffde85)}.text-yellow-300{color:var(--vi-color-yellow-300, #ffd359)}.bg-yellow-300{background-color:var(--vi-color-yellow-300, #ffd359)}.text-yellow-400{color:var(--vi-color-yellow-400, #ffc72e)}.bg-yellow-400{background-color:var(--vi-color-yellow-400, #ffc72e)}.text-yellow-500{color:var(--vi-color-yellow-500, #ffba00)}.bg-yellow-500{background-color:var(--vi-color-yellow-500, #ffba00)}.text-yellow-600{color:var(--vi-color-yellow-600, #ffa900)}.bg-yellow-600{background-color:var(--vi-color-yellow-600, #ffa900)}.text-yellow-700{color:var(--vi-color-yellow-700, #ff9900)}.bg-yellow-700{background-color:var(--vi-color-yellow-700, #ff9900)}.text-yellow-800{color:var(--vi-color-yellow-800, #e68300)}.bg-yellow-800{background-color:var(--vi-color-yellow-800, #e68300)}.text-yellow-900{color:var(--vi-color-yellow-900, #cc6d00)}.bg-yellow-900{background-color:var(--vi-color-yellow-900, #cc6d00)}.text-green-100{color:var(--vi-color-green-100, #e6f0eb)}.bg-green-100{background-color:var(--vi-color-green-100, #e6f0eb)}.text-green-200{color:var(--vi-color-green-200, #c0dbcd)}.bg-green-200{background-color:var(--vi-color-green-200, #c0dbcd)}.text-green-300{color:var(--vi-color-green-300, #96c4ab)}.bg-green-300{background-color:var(--vi-color-green-300, #96c4ab)}.text-green-400{color:var(--vi-color-green-400, #6eab88)}.bg-green-400{background-color:var(--vi-color-green-400, #6eab88)}.text-green-500{color:var(--vi-color-green-500, #489167)}.bg-green-500{background-color:var(--vi-color-green-500, #489167)}.text-green-600{color:var(--vi-color-green-600, #367551)}.bg-green-600{background-color:var(--vi-color-green-600, #367551)}.text-green-700{color:var(--vi-color-green-700, #265a3d)}.bg-green-700{background-color:var(--vi-color-green-700, #265a3d)}.text-green-800{color:var(--vi-color-green-800, #17402a)}.bg-green-800{background-color:var(--vi-color-green-800, #17402a)}.text-green-900{color:var(--vi-color-green-900, #0a2618)}.bg-green-900{background-color:var(--vi-color-green-900, #0a2618)}.text-blue-100{color:var(--vi-color-blue-100, #ebf5ff)}.bg-blue-100{background-color:var(--vi-color-blue-100, #ebf5ff)}.text-blue-200{color:var(--vi-color-blue-200, #cee6ff)}.bg-blue-200{background-color:var(--vi-color-blue-200, #cee6ff)}.text-blue-300{color:var(--vi-color-blue-300, #a3d1fa)}.bg-blue-300{background-color:var(--vi-color-blue-300, #a3d1fa)}.text-blue-400{color:var(--vi-color-blue-400, #74b6f4)}.bg-blue-400{background-color:var(--vi-color-blue-400, #74b6f4)}.text-blue-500{color:var(--vi-color-blue-500, #3f96f1)}.bg-blue-500{background-color:var(--vi-color-blue-500, #3f96f1)}.text-blue-600{color:var(--vi-color-blue-600, #3b86de)}.bg-blue-600{background-color:var(--vi-color-blue-600, #3b86de)}.text-blue-700{color:var(--vi-color-blue-700, #3676d0)}.bg-blue-700{background-color:var(--vi-color-blue-700, #3676d0)}.text-blue-800{color:var(--vi-color-blue-800, #2d5fa8)}.bg-blue-800{background-color:var(--vi-color-blue-800, #2d5fa8)}.text-blue-900{color:var(--vi-color-blue-900, #254882)}.bg-blue-900{background-color:var(--vi-color-blue-900, #254882)}.text-purple-100{color:var(--vi-color-purple-100, #f0e5f9)}.bg-purple-100{background-color:var(--vi-color-purple-100, #f0e5f9)}.text-purple-200{color:var(--vi-color-purple-200, #dbbdf2)}.bg-purple-200{background-color:var(--vi-color-purple-200, #dbbdf2)}.text-purple-300{color:var(--vi-color-purple-300, #c18eeb)}.bg-purple-300{background-color:var(--vi-color-purple-300, #c18eeb)}.text-purple-400{color:var(--vi-color-purple-400, #a454e2)}.bg-purple-400{background-color:var(--vi-color-purple-400, #a454e2)}.text-purple-500{color:var(--vi-color-purple-500, #7609d0)}.bg-purple-500{background-color:var(--vi-color-purple-500, #7609d0)}.text-purple-600{color:var(--vi-color-purple-600, #6507c9)}.bg-purple-600{background-color:var(--vi-color-purple-600, #6507c9)}.text-purple-700{color:var(--vi-color-purple-700, #5505c2)}.bg-purple-700{background-color:var(--vi-color-purple-700, #5505c2)}.text-purple-800{color:var(--vi-color-purple-800, #4403bb)}.bg-purple-800{background-color:var(--vi-color-purple-800, #4403bb)}.text-purple-900{color:var(--vi-color-purple-900, #3400b4)}.bg-purple-900{background-color:var(--vi-color-purple-900, #3400b4)}.text-neutral-100{color:var(--vi-color-grey-100, #f5f5f5)}.bg-neutral-100{background-color:var(--vi-color-grey-100, #f5f5f5)}.border-neutral-100{border-color:var(--vi-color-grey-100, #f5f5f5)}.text-neutral-200{color:var(--vi-color-grey-200, #eeeeee)}.bg-neutral-200{background-color:var(--vi-color-grey-200, #eeeeee)}.border-neutral-200{border-color:var(--vi-color-grey-200, #eeeeee)}.text-neutral-300{color:var(--vi-color-grey-300, #e0e0e0)}.bg-neutral-300{background-color:var(--vi-color-grey-300, #e0e0e0)}.border-neutral-300{border-color:var(--vi-color-grey-300, #e0e0e0)}.text-neutral-400{color:var(--vi-color-grey-400, #bdbdbd)}.bg-neutral-400{background-color:var(--vi-color-grey-400, #bdbdbd)}.border-neutral-400{border-color:var(--vi-color-grey-400, #bdbdbd)}.text-neutral-500{color:var(--vi-color-grey-500, #9e9e9e)}.bg-neutral-500{background-color:var(--vi-color-grey-500, #9e9e9e)}.border-neutral-500{border-color:var(--vi-color-grey-500, #9e9e9e)}.text-neutral-600{color:var(--vi-color-grey-600, #757575)}.bg-neutral-600{background-color:var(--vi-color-grey-600, #757575)}.border-neutral-600{border-color:var(--vi-color-grey-600, #757575)}.text-neutral-700{color:var(--vi-color-grey-700, #616161)}.bg-neutral-700{background-color:var(--vi-color-grey-700, #616161)}.border-neutral-700{border-color:var(--vi-color-grey-700, #616161)}.text-neutral-800{color:var(--vi-color-grey-800, #424242)}.bg-neutral-800{background-color:var(--vi-color-grey-800, #424242)}.border-neutral-800{border-color:var(--vi-color-grey-800, #424242)}.text-neutral-900{color:var(--vi-color-grey-900, #212121)}.bg-neutral-900{background-color:var(--vi-color-grey-900, #212121)}.border-neutral-900{border-color:var(--vi-color-grey-900, #212121)}.shadow-sm{box-shadow:var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.03))}.shadow-md{box-shadow:var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1))}.shadow-lg{box-shadow:var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1))}.shadow-xl{box-shadow:var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 25px 50px -12px rgba(0, 0, 0, 0.15))}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--vi-border-radius-sm, 4px)}.rounded-md{border-radius:var(--vi-border-radius-md, 6px)}.rounded-lg{border-radius:var(--vi-border-radius-lg, 8px)}.rounded-xl{border-radius:var(--vi-border-radius-xl, 12px)}.rounded-full{border-radius:var(--vi-border-radius-full, 9999px)}.border-thin{border-width:var(--vi-border-width-thin, 1px);border-style:solid}.border-base{border-width:var(--vi-border-width-base, 2px);border-style:solid}.border-thick{border-width:var(--vi-border-width-thick, 3px);border-style:solid}.z-hide{z-index:-1}.z-auto{z-index:auto}.z-base{z-index:0}.z-dropdown{z-index:1000}.z-sticky{z-index:1020}.z-fixed{z-index:1030}.z-backdrop{z-index:1040}.z-modal{z-index:1050}.z-popover{z-index:1060}.z-tooltip{z-index:1070}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.hidden{display:none}.flex{display:flex}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.items-baseline{align-items:baseline}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-none{flex:none}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.grid-cols-7{grid-template-columns:repeat(7, minmax(0, 1fr))}.grid-cols-8{grid-template-columns:repeat(8, minmax(0, 1fr))}.grid-cols-9{grid-template-columns:repeat(9, minmax(0, 1fr))}.grid-cols-10{grid-template-columns:repeat(10, minmax(0, 1fr))}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.gap-unit{gap:var(--vi-spacing-unit, 0.25rem)}.gap-x-unit{column-gap:var(--vi-spacing-unit, 0.25rem)}.gap-y-unit{row-gap:var(--vi-spacing-unit, 0.25rem)}.gap-xs{gap:var(--vi-spacing-xs, 0.5rem)}.gap-x-xs{column-gap:var(--vi-spacing-xs, 0.5rem)}.gap-y-xs{row-gap:var(--vi-spacing-xs, 0.5rem)}.gap-sm{gap:var(--vi-spacing-sm, 0.75rem)}.gap-x-sm{column-gap:var(--vi-spacing-sm, 0.75rem)}.gap-y-sm{row-gap:var(--vi-spacing-sm, 0.75rem)}.gap-md{gap:var(--vi-spacing-md, 1rem)}.gap-x-md{column-gap:var(--vi-spacing-md, 1rem)}.gap-y-md{row-gap:var(--vi-spacing-md, 1rem)}.gap-lg{gap:var(--vi-spacing-lg, 1.5rem)}.gap-x-lg{column-gap:var(--vi-spacing-lg, 1.5rem)}.gap-y-lg{row-gap:var(--vi-spacing-lg, 1.5rem)}.gap-xl{gap:var(--vi-spacing-xl, 2rem)}.gap-x-xl{column-gap:var(--vi-spacing-xl, 2rem)}.gap-y-xl{row-gap:var(--vi-spacing-xl, 2rem)}.gap-2xl{gap:var(--vi-spacing-2xl, 3rem)}.gap-x-2xl{column-gap:var(--vi-spacing-2xl, 3rem)}.gap-y-2xl{row-gap:var(--vi-spacing-2xl, 3rem)}.gap-3xl{gap:var(--vi-spacing-3xl, 4rem)}.gap-x-3xl{column-gap:var(--vi-spacing-3xl, 4rem)}.gap-y-3xl{row-gap:var(--vi-spacing-3xl, 4rem)}.transition-all{transition:all .2s ease-in-out}.transition-colors{transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out}.transition-opacity{transition:opacity .2s ease-in-out}.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}}/*# sourceMappingURL=flux-ui.css.map */
|
package/flux-ui.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAqBA,oCCTA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,0dAMF,kIACA,4GAKA,gEACA,kEACA,qEACA,6DACA,gEACA,iEACA,mEAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,2EACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../libs/flux-ui/styles/_variables.scss","../../../libs/flux-ui/styles/_root.scss","../../../libs/flux-ui/styles/_reset.scss","../../../libs/flux-ui/styles/_layout.scss","../../../libs/flux-ui/styles/_typography.scss","../../../libs/flux-ui/styles/_utilities.scss"],"names":[],"mappings":"AAqBA,oCCTA,MAMM,gqHAQF,sYAMF,wEACA,wEACA,gEAME,0dAMF,kIACA,4GAKA,gEACA,kEACA,qEACA,6DACA,gEACA,iEACA,mEAKA,sEACA,wEACA,wEACA,4EACA,oEAKA,sEACA,2EACA,2EASA,gFACA,8EACA,8EACA,+EACA,gFAME,scAMF,oEACA,oEACA,oEACA,qEAKA,sEACA,sEACA,wECpGF,aAKE,qBAGE,sBAOF,KAEE,8BACA,0BAOF,KACE,SACA,UACA,YF0Je,8FEzJf,UF+Ja,mCE9Jb,YF2KkB,qCE1KlB,MF+Ee,oCE9Ef,iBF6Ee,oCE5Ef,mCACA,kCAOF,6BACE,SACA,UAGF,kBACE,oBACA,kBACA,oBAGF,MACE,gBAOF,EACE,cACA,qBACA,+BAEA,iBAEE,UAQJ,cACE,YF2Ge,wEE1Gf,cAGF,IACE,SACA,cAOF,6BAIE,SACA,UACA,oBACA,eACA,iBAGF,+DAIE,yBACA,SACA,eACA,0BAEA,uIACE,UACA,SAIJ,qBACE,UACA,4BAGF,kBACE,UACA,yBAGF,SACE,cACA,gBAOF,MACE,yBACA,iBAGF,MAEE,UAOF,QAEE,eACA,YACA,cAGF,IACE,SACA,sBAOF,aAEE,eAOF,SACE,aAGF,GACE,SACA,SACA,sDCrLJ,iBAKE,MACE,aAGF,UACE,sBAGF,UACE,mBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,gBACE,uBAGF,aACE,yBAGF,iBACE,8BAGF,gBACE,6BAGF,aACE,uBAGF,cACE,mBAGF,WACE,qBAGF,eACE,oBAGF,QACE,IH+GW,6BG5Gb,QACE,IH4GW,8BGzGb,QACE,IHyGW,2BGtGb,QACE,IHsGW,6BGnGb,QACE,IHmGW,2BGhGb,QACE,OAGF,WACE,YAGF,eACE,cAOF,MACE,aAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,aACE,gDAGF,oBACE,2DAOF,QACE,aAGF,OACE,cAGF,cACE,qBAGF,QACE,eAOF,UACE,kBAGF,UACE,kBAGF,OACE,eAGF,QACE,gBAGF,QACE,gBAOF,QACE,WAGF,QACE,WAGF,QACE,YAGF,QACE,YAGF,cACE,iBACA,kBAGF,iBACE,iBACA,iBACA,kBAOF,iBACE,gBAGF,eACE,cAGF,iBACE,gBAGF,iBACE,iBC5LJ,+PACE,0GACA,mCACA,kCACA,SAQF,kBAIE,KACE,sIACA,qEACA,wEACA,4EACA,gFACA,mEACA,mCACA,kCAKF,GAEE,uEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,qEACA,yEACA,2EACA,sFACA,sEAGF,GAEE,qEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,kEACA,6EACA,2EACA,mFACA,sEAGF,GAEE,wEACA,6EACA,+EACA,qFACA,sEAGF,GAEE,uEACA,6EACA,+EACA,qFACA,oEAKF,EAEE,qEACA,wEACA,4EACA,gFACA,mEAMF,MAEE,qEACA,yEACA,yEACA,mFACA,oEAKF,MAEE,kEACA,wEACA,4EACA,kFACA,iEAGF,SAEE,gDAGF,KAEE,kBAKF,WAEE,kEACA,wEACA,4EACA,kFACA,iEAKF,cAIE,gHACA,iEACA,qEACA,yEACA,6EACA,gEACA,4BAGF,IAEE,gHACA,iEACA,wEACA,gEACA,4BAKF,WAEE,+DACA,uEACA,2EACA,gFACA,iEACA,kBACA,UAKF,GAEE,qEACA,2EACA,yEACA,mFACA,oEAGF,GAEE,oEACA,wEACA,4EACA,kEAUJ,iBAIE,eAEE,uEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,qEACA,6EACA,2EACA,sFACA,sEAKF,eAEE,qEACA,yEACA,2EACA,sFACA,sEAGF,eAEE,qEACA,6EACA,2EACA,mFACA,sEAGF,eAEE,wEACA,6EACA,+EACA,qFACA,sEAGF,eAEE,uEACA,6EACA,+EACA,qFACA,oEAKF,YAEE,+DACA,wEACA,2EACA,gFACA,mEAGF,YAEE,qEACA,wEACA,4EACA,gFACA,mEAGF,YAEE,oEACA,wEACA,4EACA,gFACA,iEAKF,aAEE,qEACA,yEACA,yEACA,mFACA,oEAGF,aAEE,mEACA,yEACA,yEACA,mFACA,oEAKF,YAEE,kEACA,wEACA,4EACA,kFACA,iEAGF,aAEE,mEACA,2EACA,yEACA,mFACA,yBACA,kEAGF,SACE,gHACA,iEACA,qEACA,yEACA,6EACA,gEACA,4BAKF,uDACA,wDACA,gEACA,0DACA,kCACA,kBACE,gBACA,mBACA,uBAEF,mCAIA,0EACA,wEACA,wEACA,yEACA,2ECjYF,iBAMI,QACE,OLoVQ,gCKjVV,SACE,YLgVQ,gCK/UR,aL+UQ,gCK5UV,SACE,WL2UQ,gCK1UR,cL0UQ,gCKvUV,SACE,WLsUQ,gCKnUV,SACE,aLkUQ,gCK/TV,SACE,cL8TQ,gCK3TV,SACE,YL0TQ,gCKrVV,MACE,OLoVQ,6BKjVV,OACE,YLgVQ,6BK/UR,aL+UQ,6BK5UV,OACE,WL2UQ,6BK1UR,cL0UQ,6BKvUV,OACE,WLsUQ,6BKnUV,OACE,aLkUQ,6BK/TV,OACE,cL8TQ,6BK3TV,OACE,YL0TQ,6BKrVV,MACE,OLoVQ,8BKjVV,OACE,YLgVQ,8BK/UR,aL+UQ,8BK5UV,OACE,WL2UQ,8BK1UR,cL0UQ,8BKvUV,OACE,WLsUQ,8BKnUV,OACE,aLkUQ,8BK/TV,OACE,cL8TQ,8BK3TV,OACE,YL0TQ,8BKrVV,MACE,OLoVQ,2BKjVV,OACE,YLgVQ,2BK/UR,aL+UQ,2BK5UV,OACE,WL2UQ,2BK1UR,cL0UQ,2BKvUV,OACE,WLsUQ,2BKnUV,OACE,aLkUQ,2BK/TV,OACE,cL8TQ,2BK3TV,OACE,YL0TQ,2BKrVV,MACE,OLoVQ,6BKjVV,OACE,YLgVQ,6BK/UR,aL+UQ,6BK5UV,OACE,WL2UQ,6BK1UR,cL0UQ,6BKvUV,OACE,WLsUQ,6BKnUV,OACE,aLkUQ,6BK/TV,OACE,cL8TQ,6BK3TV,OACE,YL0TQ,6BKrVV,MACE,OLoVQ,2BKjVV,OACE,YLgVQ,2BK/UR,aL+UQ,2BK5UV,OACE,WL2UQ,2BK1UR,cL0UQ,2BKvUV,OACE,WLsUQ,2BKnUV,OACE,aLkUQ,2BK/TV,OACE,cL8TQ,2BK3TV,OACE,YL0TQ,2BKrVV,OACE,OLoVQ,4BKjVV,QACE,YLgVQ,4BK/UR,aL+UQ,4BK5UV,QACE,WL2UQ,4BK1UR,cL0UQ,4BKvUV,QACE,WLsUQ,4BKnUV,QACE,aLkUQ,4BK/TV,QACE,cL8TQ,4BK3TV,QACE,YL0TQ,4BKrVV,OACE,OLoVQ,4BKjVV,QACE,YLgVQ,4BK/UR,aL+UQ,4BK5UV,QACE,WL2UQ,4BK1UR,cL0UQ,4BKvUV,QACE,WLsUQ,4BKnUV,QACE,aLkUQ,4BK/TV,QACE,cL8TQ,4BK3TV,QACE,YL0TQ,4BKjTV,QACE,QLgTQ,gCK7SV,SACE,aL4SQ,gCK3SR,cL2SQ,gCKxSV,SACE,YLuSQ,gCKtSR,eLsSQ,gCKnSV,SACE,YLkSQ,gCK/RV,SACE,cL8RQ,gCK3RV,SACE,eL0RQ,gCKvRV,SACE,aLsRQ,gCKjTV,MACE,QLgTQ,6BK7SV,OACE,aL4SQ,6BK3SR,cL2SQ,6BKxSV,OACE,YLuSQ,6BKtSR,eLsSQ,6BKnSV,OACE,YLkSQ,6BK/RV,OACE,cL8RQ,6BK3RV,OACE,eL0RQ,6BKvRV,OACE,aLsRQ,6BKjTV,MACE,QLgTQ,8BK7SV,OACE,aL4SQ,8BK3SR,cL2SQ,8BKxSV,OACE,YLuSQ,8BKtSR,eLsSQ,8BKnSV,OACE,YLkSQ,8BK/RV,OACE,cL8RQ,8BK3RV,OACE,eL0RQ,8BKvRV,OACE,aLsRQ,8BKjTV,MACE,QLgTQ,2BK7SV,OACE,aL4SQ,2BK3SR,cL2SQ,2BKxSV,OACE,YLuSQ,2BKtSR,eLsSQ,2BKnSV,OACE,YLkSQ,2BK/RV,OACE,cL8RQ,2BK3RV,OACE,eL0RQ,2BKvRV,OACE,aLsRQ,2BKjTV,MACE,QLgTQ,6BK7SV,OACE,aL4SQ,6BK3SR,cL2SQ,6BKxSV,OACE,YLuSQ,6BKtSR,eLsSQ,6BKnSV,OACE,YLkSQ,6BK/RV,OACE,cL8RQ,6BK3RV,OACE,eL0RQ,6BKvRV,OACE,aLsRQ,6BKjTV,MACE,QLgTQ,2BK7SV,OACE,aL4SQ,2BK3SR,cL2SQ,2BKxSV,OACE,YLuSQ,2BKtSR,eLsSQ,2BKnSV,OACE,YLkSQ,2BK/RV,OACE,cL8RQ,2BK3RV,OACE,eL0RQ,2BKvRV,OACE,aLsRQ,2BKjTV,OACE,QLgTQ,4BK7SV,QACE,aL4SQ,4BK3SR,cL2SQ,4BKxSV,QACE,YLuSQ,4BKtSR,eLsSQ,4BKnSV,QACE,YLkSQ,4BK/RV,QACE,cL8RQ,4BK3RV,QACE,eL0RQ,4BKvRV,QACE,aLsRQ,4BKjTV,OACE,QLgTQ,4BK7SV,QACE,aL4SQ,4BK3SR,cL2SQ,4BKxSV,QACE,YLuSQ,4BKtSR,eLsSQ,4BKnSV,QACE,YLkSQ,4BK/RV,QACE,cL8RQ,4BK3RV,QACE,eL0RQ,4BKvRV,QACE,aLsRQ,4BK9QZ,SACE,UL4Ga,gCKzGf,SACE,ULyGa,kCKtGf,WACE,ULsGa,mCKnGf,SACE,ULmGa,6BKhGf,SACE,ULgGa,gCK7Ff,UACE,UL6Fa,gCK1Ff,UACE,UL0Fa,kCKvFf,YACE,YLwFmB,iCKrFrB,aACE,YLqFmB,kCKlFrB,aACE,YLkFmB,kCK/ErB,eACE,YL+EmB,oCK5ErB,WACE,YL4EmB,gCKzErB,eACE,YL0EkB,iCKvEpB,gBACE,YLuEkB,qCKpEpB,iBACE,YLoEkB,oCKjEpB,aACE,kBAGF,WACE,gBAGF,YACE,iBAQA,cACE,MLuLM,iCKpLR,YACE,iBLmLM,iCKhLR,gBACE,aL+KM,iCKxLR,gBACE,MLuLM,mCKpLR,cACE,iBLmLM,mCKhLR,kBACE,aL+KM,mCKxLR,cACE,MLuLM,iCKpLR,YACE,iBLmLM,iCKhLR,gBACE,aL+KM,iCKxLR,cACE,MLuLM,iCKpLR,YACE,iBLmLM,iCKhLR,gBACE,aL+KM,iCKxLR,YACE,MLuLM,+BKpLR,UACE,iBLmLM,+BKhLR,cACE,aL+KM,+BKxLR,WACE,MLuLM,8BKpLR,SACE,iBLmLM,8BKhLR,aACE,aL+KM,8BKvKN,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,cACE,ML4JO,iCKzJT,YACE,iBLwJO,iCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,gBACE,ML4JO,mCKzJT,cACE,iBLwJO,mCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,eACE,ML4JO,kCKzJT,aACE,iBLwJO,kCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCK7JT,iBACE,ML4JO,oCKzJT,eACE,iBLwJO,oCKjJX,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKvEb,kBACE,MLsEW,kCKnEb,gBACE,iBLkEW,kCK/Db,oBACE,aL8DW,kCKrDb,WACE,WL4JO,qDK7JT,WACE,WL4JO,6FK7JT,WACE,WL4JO,+FK7JT,WACE,WL4JO,iGKpJX,cACE,gBAGF,YACE,cLoBe,gCKjBjB,YACE,cLiBe,gCKdjB,YACE,cLce,gCKXjB,YACE,cLWe,iCKRjB,cACE,mDAOF,aACE,aLIiB,iCKHjB,mBAGF,aACE,8CACA,mBAGF,cACE,aLJiB,kCKKjB,mBAQA,QACE,QLuIQ,GKxIV,QACE,QLuIQ,KKxIV,QACE,QLuIQ,EKxIV,YACE,QLuIQ,KKxIV,UACE,QLuIQ,KKxIV,SACE,QLuIQ,KKxIV,YACE,QLuIQ,KKxIV,SACE,QLuIQ,KKxIV,WACE,QLuIQ,KKxIV,WACE,QLuIQ,KK/HZ,qBACA,wBACA,uBACA,wBACA,uBAMA,OACE,cAGF,QACE,eAGF,cACE,qBAGF,QACE,aAOF,MACE,aAGF,UACE,mBAGF,UACE,sBAGF,WACE,eAGF,aACE,iBAGF,eACE,2BAGF,aACE,yBAGF,gBACE,uBAGF,iBACE,8BAGF,gBACE,6BAGF,gBACE,6BAGF,aACE,uBAGF,WACE,qBAGF,cACE,mBAGF,eACE,oBAGF,gBACE,qBAGF,QACE,YAGF,WACE,cAGF,WACE,UAOF,MACE,aAIA,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,aACE,gDADF,cACE,iDADF,cACE,iDADF,cACE,iDASF,UACE,IL9CQ,gCKiDV,YACE,WLlDQ,gCKqDV,YACE,QLtDQ,gCK6CV,QACE,IL9CQ,6BKiDV,UACE,WLlDQ,6BKqDV,UACE,QLtDQ,6BK6CV,QACE,IL9CQ,8BKiDV,UACE,WLlDQ,8BKqDV,UACE,QLtDQ,8BK6CV,QACE,IL9CQ,2BKiDV,UACE,WLlDQ,2BKqDV,UACE,QLtDQ,2BK6CV,QACE,IL9CQ,6BKiDV,UACE,WLlDQ,6BKqDV,UACE,QLtDQ,6BK6CV,QACE,IL9CQ,2BKiDV,UACE,WLlDQ,2BKqDV,UACE,QLtDQ,2BK6CV,SACE,IL9CQ,4BKiDV,WACE,WLlDQ,4BKqDV,WACE,QLtDQ,4BK6CV,SACE,IL9CQ,4BKiDV,WACE,WLlDQ,4BKqDV,WACE,QLtDQ,4BK8DZ,gBACE,+BAGF,mBACE,+FAGF,oBACE,mCAGF,wCACA,wCACA","file":"flux-ui.css"}
|
package/package.json
CHANGED
package/styles/_variables.scss
CHANGED
|
@@ -126,6 +126,9 @@ $layer-01: var(--vi-layer-01, #ffffff); // Pure white base
|
|
|
126
126
|
$layer-02: var(--vi-layer-02, #f3f4f6); // grey-100
|
|
127
127
|
$layer-03: var(--vi-layer-03, #e5e7eb); // grey-200
|
|
128
128
|
$layer-04: var(--vi-layer-04, #d1d5db); // grey-300
|
|
129
|
+
$layer-dimmed: var(--vi-layer-dimmed, rgba(0, 0, 0, 0.02)); // Faint tint for visual anchors
|
|
130
|
+
$layer-overlay: var(--vi-layer-overlay, rgba(0, 0, 0, 0.40)); // Scrim/backdrop for modals, drawers, sidebars
|
|
131
|
+
|
|
129
132
|
|
|
130
133
|
$layer-hover-01: var(--vi-layer-hover-01, #f3f4f6); // grey-100
|
|
131
134
|
$layer-hover-02: var(--vi-layer-hover-02, #e5e7eb); // grey-200
|
|
@@ -220,10 +223,22 @@ $letter-spacing-widest: var(--vi-letter-spacing-widest, 0.1em);
|
|
|
220
223
|
|
|
221
224
|
// -- Primitive: Shadows ------------------------------------------------------
|
|
222
225
|
|
|
223
|
-
|
|
224
|
-
$shadow-
|
|
225
|
-
$shadow-
|
|
226
|
-
$shadow-
|
|
226
|
+
// Premium multi-layered diffuse shadows
|
|
227
|
+
$shadow-sm: var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.03));
|
|
228
|
+
$shadow-md: var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1));
|
|
229
|
+
$shadow-lg: var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 20px 25px -5px rgba(0, 0, 0, 0.1));
|
|
230
|
+
$shadow-xl: var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 25px 50px -12px rgba(0, 0, 0, 0.15));
|
|
231
|
+
|
|
232
|
+
// Premium 3D edge highlights
|
|
233
|
+
$shadow-inner-light: var(--vi-shadow-inner-light, inset 0 1px 0 rgba(255, 255, 255, 0.3));
|
|
234
|
+
$shadow-inner-dark: var(--vi-shadow-inner-dark, inset 0 1px 0 rgba(0, 0, 0, 0.05));
|
|
235
|
+
$shadow-inner-deep: var(--vi-shadow-inner-deep, inset 0 1px 3px rgba(0, 0, 0, 0.07), inset 0 1px 2px rgba(0, 0, 0, 0.04));
|
|
236
|
+
|
|
237
|
+
// Focus Rings
|
|
238
|
+
$focus-ring-color: var(--vi-focus-ring-color, $color-blue-200);
|
|
239
|
+
$focus-ring-shadow: var(--vi-focus-ring-shadow, 0 0 0 3px $focus-ring-color);
|
|
240
|
+
$focus-ring-error-shadow: var(--vi-focus-ring-error-shadow, 0 0 0 3px $color-red-200);
|
|
241
|
+
$focus-ring-success-shadow: var(--vi-focus-ring-success-shadow, 0 0 0 3px $color-green-200);
|
|
227
242
|
|
|
228
243
|
// -- Primitive: Border radius ------------------------------------------------
|
|
229
244
|
|