@jameskyeong/uix 0.1.11 → 0.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +2 -397
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -1,397 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
/* Usage: @import "@jameskyeong/uix/styles.css" (after tailwindcss) */
|
|
3
|
-
|
|
4
|
-
/* ===== @jameskyeong/uix Font System ===== */
|
|
5
|
-
/* Outfit (영문) + Pretendard (한글) */
|
|
6
|
-
@font-face {
|
|
7
|
-
font-family: 'Outfit';
|
|
8
|
-
src: url('/fonts/Outfit/Outfit-Regular.ttf') format('truetype');
|
|
9
|
-
font-weight: 400;
|
|
10
|
-
font-style: normal;
|
|
11
|
-
font-display: swap;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
@font-face {
|
|
15
|
-
font-family: 'Outfit';
|
|
16
|
-
src: url('/fonts/Outfit/Outfit-Medium.ttf') format('truetype');
|
|
17
|
-
font-weight: 500;
|
|
18
|
-
font-style: normal;
|
|
19
|
-
font-display: swap;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
@font-face {
|
|
23
|
-
font-family: 'Outfit';
|
|
24
|
-
src: url('/fonts/Outfit/Outfit-SemiBold.ttf') format('truetype');
|
|
25
|
-
font-weight: 600;
|
|
26
|
-
font-style: normal;
|
|
27
|
-
font-display: swap;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@font-face {
|
|
31
|
-
font-family: 'Outfit';
|
|
32
|
-
src: url('/fonts/Outfit/Outfit-Bold.ttf') format('truetype');
|
|
33
|
-
font-weight: 700;
|
|
34
|
-
font-style: normal;
|
|
35
|
-
font-display: swap;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@font-face {
|
|
39
|
-
font-family: 'Pretendard';
|
|
40
|
-
src: url('/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2');
|
|
41
|
-
font-weight: 400;
|
|
42
|
-
font-style: normal;
|
|
43
|
-
font-display: swap;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
@font-face {
|
|
47
|
-
font-family: 'Pretendard';
|
|
48
|
-
src: url('/fonts/Pretendard/Pretendard-Medium.woff2') format('woff2');
|
|
49
|
-
font-weight: 500;
|
|
50
|
-
font-style: normal;
|
|
51
|
-
font-display: swap;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@font-face {
|
|
55
|
-
font-family: 'Pretendard';
|
|
56
|
-
src: url('/fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2');
|
|
57
|
-
font-weight: 600;
|
|
58
|
-
font-style: normal;
|
|
59
|
-
font-display: swap;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@font-face {
|
|
63
|
-
font-family: 'Pretendard';
|
|
64
|
-
src: url('/fonts/Pretendard/Pretendard-Bold.woff2') format('woff2');
|
|
65
|
-
font-weight: 700;
|
|
66
|
-
font-style: normal;
|
|
67
|
-
font-display: swap;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* ===== @jameskyeong/uix Color Palette ===== */
|
|
71
|
-
/* 100: lightest, 300: default, 500: darkest */
|
|
72
|
-
|
|
73
|
-
:root {
|
|
74
|
-
/* Black (웜 블랙) */
|
|
75
|
-
--uix-black-100: #4a4644;
|
|
76
|
-
--uix-black-200: #393634;
|
|
77
|
-
--uix-black-300: #282524;
|
|
78
|
-
--uix-black-400: #1a1817;
|
|
79
|
-
--uix-black-500: #0d0c0b;
|
|
80
|
-
|
|
81
|
-
/* Gray (웜 그레이) */
|
|
82
|
-
--uix-gray-100: #a8a196;
|
|
83
|
-
--uix-gray-200: #8a8278;
|
|
84
|
-
--uix-gray-300: #6d6459;
|
|
85
|
-
--uix-gray-400: #534c43;
|
|
86
|
-
--uix-gray-500: #3a352e;
|
|
87
|
-
|
|
88
|
-
/* White (웜 화이트) */
|
|
89
|
-
--uix-white-100: #ffffff;
|
|
90
|
-
--uix-white-200: #faf9f7;
|
|
91
|
-
--uix-white-300: #f5f4f1;
|
|
92
|
-
--uix-white-400: #e8e6e1;
|
|
93
|
-
--uix-white-500: #d4d1ca;
|
|
94
|
-
|
|
95
|
-
/* Prime - 라벤더 블루 (메인 포인트) */
|
|
96
|
-
--uix-prime-100: #c4c4eb;
|
|
97
|
-
--uix-prime-200: #a3a3e0;
|
|
98
|
-
--uix-prime-300: #8383d6;
|
|
99
|
-
--uix-prime-400: #6363cb;
|
|
100
|
-
--uix-prime-500: #4a4ab0;
|
|
101
|
-
|
|
102
|
-
/* Sub1 - 코랄 (서브 포인트 1) */
|
|
103
|
-
--uix-sub1-100: #f5c4b8;
|
|
104
|
-
--uix-sub1-200: #f0a08b;
|
|
105
|
-
--uix-sub1-300: #e87c5d;
|
|
106
|
-
--uix-sub1-400: #d9593a;
|
|
107
|
-
--uix-sub1-500: #b84526;
|
|
108
|
-
|
|
109
|
-
/* Sub2 - 베이지 (서브 포인트 2) */
|
|
110
|
-
--uix-sub2-100: #f5ebe0;
|
|
111
|
-
--uix-sub2-200: #e6d5c3;
|
|
112
|
-
--uix-sub2-300: #d4bc9a;
|
|
113
|
-
--uix-sub2-400: #c4a67a;
|
|
114
|
-
--uix-sub2-500: #a8895e;
|
|
115
|
-
|
|
116
|
-
/* ===== Surface layers - Light Mode (backgrounds) ===== */
|
|
117
|
-
/* 100: 카드/컴포넌트 배경, 200: 구분선/보더, 300: 섹션 교차, 400: 메인 배경, 500: 강조 배경 */
|
|
118
|
-
--uix-surface-100: var(--uix-white-100);
|
|
119
|
-
--uix-surface-200: var(--uix-white-200);
|
|
120
|
-
--uix-surface-300: var(--uix-white-300);
|
|
121
|
-
--uix-surface-400: var(--uix-white-400);
|
|
122
|
-
--uix-surface-500: var(--uix-white-500);
|
|
123
|
-
|
|
124
|
-
/* ===== Border colors - Light Mode (subtle) ===== */
|
|
125
|
-
--uix-border-100: var(--uix-white-300);
|
|
126
|
-
--uix-border-200: var(--uix-white-400);
|
|
127
|
-
--uix-border-300: var(--uix-white-500);
|
|
128
|
-
|
|
129
|
-
/* ===== Text colors - Light Mode ===== */
|
|
130
|
-
--uix-text-100: var(--uix-black-300);
|
|
131
|
-
--uix-text-200: var(--uix-black-200);
|
|
132
|
-
--uix-text-300: var(--uix-gray-300);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.dark {
|
|
136
|
-
/* ===== Surface layers - Dark Mode (backgrounds) ===== */
|
|
137
|
-
/* 더 진한 블랙톤 사용 - 100이 가장 밝은 컴포넌트, 400이 메인 배경 */
|
|
138
|
-
--uix-surface-100: var(--uix-black-300);
|
|
139
|
-
--uix-surface-200: var(--uix-black-400);
|
|
140
|
-
--uix-surface-300: var(--uix-black-400);
|
|
141
|
-
--uix-surface-400: var(--uix-black-500);
|
|
142
|
-
--uix-surface-500: var(--uix-black-500);
|
|
143
|
-
|
|
144
|
-
/* ===== Border colors - Dark Mode (더 어둡게) ===== */
|
|
145
|
-
--uix-border-100: var(--uix-black-400);
|
|
146
|
-
--uix-border-200: var(--uix-black-300);
|
|
147
|
-
--uix-border-300: var(--uix-black-200);
|
|
148
|
-
|
|
149
|
-
/* ===== Text colors - Dark Mode ===== */
|
|
150
|
-
--uix-text-100: var(--uix-white-100);
|
|
151
|
-
--uix-text-200: var(--uix-white-300);
|
|
152
|
-
--uix-text-300: var(--uix-gray-200);
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
/* ===== Tailwind Theme Integration ===== */
|
|
156
|
-
@theme inline {
|
|
157
|
-
/* Surface Layers (backgrounds) */
|
|
158
|
-
--color-uix-surface-100: var(--uix-surface-100);
|
|
159
|
-
--color-uix-surface-200: var(--uix-surface-200);
|
|
160
|
-
--color-uix-surface-300: var(--uix-surface-300);
|
|
161
|
-
--color-uix-surface-400: var(--uix-surface-400);
|
|
162
|
-
--color-uix-surface-500: var(--uix-surface-500);
|
|
163
|
-
|
|
164
|
-
/* Text Colors (100: primary, 300: muted) */
|
|
165
|
-
--color-uix-text-100: var(--uix-text-100);
|
|
166
|
-
--color-uix-text-200: var(--uix-text-200);
|
|
167
|
-
--color-uix-text-300: var(--uix-text-300);
|
|
168
|
-
|
|
169
|
-
/* Border Colors */
|
|
170
|
-
--color-uix-border-100: var(--uix-border-100);
|
|
171
|
-
--color-uix-border-200: var(--uix-border-200);
|
|
172
|
-
--color-uix-border-300: var(--uix-border-300);
|
|
173
|
-
|
|
174
|
-
/* Black Palette */
|
|
175
|
-
--color-uix-black-100: var(--uix-black-100);
|
|
176
|
-
--color-uix-black-200: var(--uix-black-200);
|
|
177
|
-
--color-uix-black-300: var(--uix-black-300);
|
|
178
|
-
--color-uix-black-400: var(--uix-black-400);
|
|
179
|
-
--color-uix-black-500: var(--uix-black-500);
|
|
180
|
-
|
|
181
|
-
/* Gray Palette */
|
|
182
|
-
--color-uix-gray-100: var(--uix-gray-100);
|
|
183
|
-
--color-uix-gray-200: var(--uix-gray-200);
|
|
184
|
-
--color-uix-gray-300: var(--uix-gray-300);
|
|
185
|
-
--color-uix-gray-400: var(--uix-gray-400);
|
|
186
|
-
--color-uix-gray-500: var(--uix-gray-500);
|
|
187
|
-
|
|
188
|
-
/* White Palette */
|
|
189
|
-
--color-uix-white-100: var(--uix-white-100);
|
|
190
|
-
--color-uix-white-200: var(--uix-white-200);
|
|
191
|
-
--color-uix-white-300: var(--uix-white-300);
|
|
192
|
-
--color-uix-white-400: var(--uix-white-400);
|
|
193
|
-
--color-uix-white-500: var(--uix-white-500);
|
|
194
|
-
|
|
195
|
-
/* Prime Palette */
|
|
196
|
-
--color-uix-prime-100: var(--uix-prime-100);
|
|
197
|
-
--color-uix-prime-200: var(--uix-prime-200);
|
|
198
|
-
--color-uix-prime-300: var(--uix-prime-300);
|
|
199
|
-
--color-uix-prime-400: var(--uix-prime-400);
|
|
200
|
-
--color-uix-prime-500: var(--uix-prime-500);
|
|
201
|
-
|
|
202
|
-
/* Sub1 Palette */
|
|
203
|
-
--color-uix-sub1-100: var(--uix-sub1-100);
|
|
204
|
-
--color-uix-sub1-200: var(--uix-sub1-200);
|
|
205
|
-
--color-uix-sub1-300: var(--uix-sub1-300);
|
|
206
|
-
--color-uix-sub1-400: var(--uix-sub1-400);
|
|
207
|
-
--color-uix-sub1-500: var(--uix-sub1-500);
|
|
208
|
-
|
|
209
|
-
/* Sub2 Palette */
|
|
210
|
-
--color-uix-sub2-100: var(--uix-sub2-100);
|
|
211
|
-
--color-uix-sub2-200: var(--uix-sub2-200);
|
|
212
|
-
--color-uix-sub2-300: var(--uix-sub2-300);
|
|
213
|
-
--color-uix-sub2-400: var(--uix-sub2-400);
|
|
214
|
-
--color-uix-sub2-500: var(--uix-sub2-500);
|
|
215
|
-
|
|
216
|
-
/* Font - Outfit(영문) + Pretendard(한글) */
|
|
217
|
-
--font-sans: 'Outfit', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
/* ===== Base Styles ===== */
|
|
221
|
-
html {
|
|
222
|
-
scroll-behavior: smooth;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
body {
|
|
226
|
-
font-family: var(--font-sans);
|
|
227
|
-
line-height: 1.7;
|
|
228
|
-
-webkit-font-smoothing: antialiased;
|
|
229
|
-
-moz-osx-font-smoothing: grayscale;
|
|
230
|
-
background-color: var(--uix-surface-400);
|
|
231
|
-
color: var(--uix-text-100);
|
|
232
|
-
transition: background-color 0.2s ease, color 0.2s ease;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
/* ===== Selection ===== */
|
|
236
|
-
::selection {
|
|
237
|
-
background: var(--uix-prime-300);
|
|
238
|
-
color: var(--uix-white-100);
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
/* ===== Focus Styles ===== */
|
|
242
|
-
:focus-visible {
|
|
243
|
-
outline: 2px solid var(--uix-prime-300);
|
|
244
|
-
outline-offset: 2px;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
/* ===== Glass Border ===== */
|
|
248
|
-
.uix-glass-border {
|
|
249
|
-
border: 1px solid rgba(0, 0, 0, 0.07);
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.dark .uix-glass-border {
|
|
253
|
-
border: 1px solid rgba(255, 255, 255, 0.03);
|
|
254
|
-
}
|
|
255
|
-
|
|
256
|
-
/* ===== Common Glassmorphism Container ===== */
|
|
257
|
-
/* 글래스모피즘 컨테이너 공통 스타일 */
|
|
258
|
-
.uix-glass {
|
|
259
|
-
background-color: color-mix(in srgb, var(--uix-surface-200) 40%, transparent);
|
|
260
|
-
backdrop-filter: blur(12px) saturate(1.5);
|
|
261
|
-
-webkit-backdrop-filter: blur(12px) saturate(1.5);
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
/* ===== Embossed Glassmorphism Effect ===== */
|
|
265
|
-
/* 볼록한 엠보싱: 상단 하이라이트 + 하단 내부 그림자 + 외곽 소프트 섀도우 */
|
|
266
|
-
|
|
267
|
-
/* 레이아웃용 - 미니멀 (네비, 사이드바, 섹션) */
|
|
268
|
-
.uix-convex-subtle {
|
|
269
|
-
box-shadow:
|
|
270
|
-
inset 0 1px 1px 0 rgba(255, 255, 255, 0.6),
|
|
271
|
-
inset 0 -1px 2px 0 rgba(0, 0, 0, 0.08),
|
|
272
|
-
0 1px 4px -1px rgba(0, 0, 0, 0.04);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
.dark .uix-convex-subtle {
|
|
276
|
-
box-shadow:
|
|
277
|
-
inset 0 2px 4px 0 rgba(255, 255, 255, 0.1),
|
|
278
|
-
inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2);
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
/* 기본 - 인터랙티브 컴포넌트용 */
|
|
282
|
-
.uix-convex {
|
|
283
|
-
box-shadow:
|
|
284
|
-
inset 0 1px 1px 0 rgba(255, 255, 255, 0.7),
|
|
285
|
-
inset 0 -1px 3px 0 rgba(0, 0, 0, 0.12),
|
|
286
|
-
0 2px 6px -2px rgba(0, 0, 0, 0.05);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.uix-convex-sm {
|
|
290
|
-
box-shadow:
|
|
291
|
-
inset 0 1px 1px 0 rgba(255, 255, 255, 0.6),
|
|
292
|
-
inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1),
|
|
293
|
-
0 1px 4px -1px rgba(0, 0, 0, 0.04);
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
.uix-convex-lg {
|
|
297
|
-
box-shadow:
|
|
298
|
-
inset 0 1px 2px 0 rgba(255, 255, 255, 0.75),
|
|
299
|
-
inset 0 -1px 4px 0 rgba(0, 0, 0, 0.15),
|
|
300
|
-
0 3px 10px -3px rgba(0, 0, 0, 0.06);
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
/* 다크모드 볼록 효과 */
|
|
304
|
-
.dark .uix-convex {
|
|
305
|
-
box-shadow:
|
|
306
|
-
inset 0 1px 4px 0 rgba(255, 255, 255, 0.18),
|
|
307
|
-
inset 0 -2px 10px 0 rgba(0, 0, 0, 0.4),
|
|
308
|
-
0 10px 36px -2px rgba(0, 0, 0, 0.6);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
.dark .uix-convex-sm {
|
|
312
|
-
box-shadow:
|
|
313
|
-
inset 0 1px 2px 0 rgba(255, 255, 255, 0.15),
|
|
314
|
-
inset 0 -1px 6px 0 rgba(0, 0, 0, 0.35),
|
|
315
|
-
0 6px 24px -1px rgba(0, 0, 0, 0.5);
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
.dark .uix-convex-lg {
|
|
319
|
-
box-shadow:
|
|
320
|
-
inset 0 2px 6px 0 rgba(255, 255, 255, 0.2),
|
|
321
|
-
inset 0 -3px 12px 0 rgba(0, 0, 0, 0.45),
|
|
322
|
-
0 14px 48px -4px rgba(0, 0, 0, 0.65);
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
/* ===== 색상 배경용 볼록 효과 ===== */
|
|
326
|
-
/* 색상이 있는 버튼/뱃지 등에 자동 적용 - 강한 하이라이트 + 진한 하단 그림자 */
|
|
327
|
-
|
|
328
|
-
.uix-convex-colored {
|
|
329
|
-
box-shadow:
|
|
330
|
-
inset 0 2px 6px 0 rgba(255, 255, 255, 0.4),
|
|
331
|
-
inset 0 -3px 8px 0 rgba(0, 0, 0, 0.35);
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
.uix-convex-colored-sm {
|
|
335
|
-
box-shadow:
|
|
336
|
-
inset 0 1px 4px 0 rgba(255, 255, 255, 0.35),
|
|
337
|
-
inset 0 -2px 5px 0 rgba(0, 0, 0, 0.3);
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
/* 다크모드에서도 동일하게 유지 (색상 배경은 라이트/다크 구분 없음) */
|
|
341
|
-
.dark .uix-convex-colored {
|
|
342
|
-
box-shadow:
|
|
343
|
-
inset 0 2px 6px 0 rgba(255, 255, 255, 0.4),
|
|
344
|
-
inset 0 -3px 8px 0 rgba(0, 0, 0, 0.35);
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
.dark .uix-convex-colored-sm {
|
|
348
|
-
box-shadow:
|
|
349
|
-
inset 0 1px 4px 0 rgba(255, 255, 255, 0.35),
|
|
350
|
-
inset 0 -2px 5px 0 rgba(0, 0, 0, 0.3);
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
/* ===== Enhanced Glassmorphism ===== */
|
|
354
|
-
/* 상단 하이라이트 + 노이즈 텍스처로 실제 유리 질감 표현 */
|
|
355
|
-
/* Note: 부모 요소가 positioned (relative, absolute, fixed 등)여야 함 */
|
|
356
|
-
|
|
357
|
-
/* 상단 하이라이트 - 빛 반사 효과 (1px 라인) */
|
|
358
|
-
.uix-glass-noise::before {
|
|
359
|
-
content: '';
|
|
360
|
-
position: absolute;
|
|
361
|
-
top: 0;
|
|
362
|
-
left: 10%;
|
|
363
|
-
right: 10%;
|
|
364
|
-
height: 1px;
|
|
365
|
-
z-index: 1;
|
|
366
|
-
background: linear-gradient(
|
|
367
|
-
to right,
|
|
368
|
-
transparent 0%,
|
|
369
|
-
rgba(255, 255, 255, 0.5) 50%,
|
|
370
|
-
transparent 100%
|
|
371
|
-
);
|
|
372
|
-
pointer-events: none;
|
|
373
|
-
}
|
|
374
|
-
|
|
375
|
-
/* 내부 상단 글로우 */
|
|
376
|
-
.uix-glass-noise::after {
|
|
377
|
-
content: '';
|
|
378
|
-
position: absolute;
|
|
379
|
-
inset: 0;
|
|
380
|
-
z-index: 1;
|
|
381
|
-
border-radius: inherit;
|
|
382
|
-
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
|
|
383
|
-
pointer-events: none;
|
|
384
|
-
}
|
|
385
|
-
|
|
386
|
-
.dark .uix-glass-noise::before {
|
|
387
|
-
background: linear-gradient(
|
|
388
|
-
to right,
|
|
389
|
-
transparent 0%,
|
|
390
|
-
rgba(255, 255, 255, 0.25) 50%,
|
|
391
|
-
transparent 100%
|
|
392
|
-
);
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.dark .uix-glass-noise::after {
|
|
396
|
-
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
|
|
397
|
-
}
|
|
1
|
+
/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:"Outfit","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-500:oklch(76.9% .188 70.08);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--ease-out:cubic-bezier(0,0,.2,1);--blur-sm:8px;--blur-xl:24px;--blur-2xl:40px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:"Outfit","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.-top-4{top:calc(var(--spacing)*-4)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing)*3)}.top-4{top:calc(var(--spacing)*4)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.right-3{right:calc(var(--spacing)*3)}.right-6{right:calc(var(--spacing)*6)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-3{bottom:calc(var(--spacing)*3)}.bottom-6{bottom:calc(var(--spacing)*6)}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing)*3)}.-z-10{z-index:calc(10*-1)}.z-10{z-index:10}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.my-1\.5{margin-block:calc(var(--spacing)*1.5)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-12{margin-top:calc(var(--spacing)*12)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.mb-14{margin-bottom:calc(var(--spacing)*14)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-1\.5{margin-left:calc(var(--spacing)*1.5)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.ml-auto{margin-left:auto}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1{height:calc(var(--spacing)*1)}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-11{height:calc(var(--spacing)*11)}.h-12{height:calc(var(--spacing)*12)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-32{height:calc(var(--spacing)*32)}.h-44{height:calc(var(--spacing)*44)}.h-full{height:100%}.h-px{height:1px}.min-h-\[260px\]{min-height:260px}.min-h-screen{min-height:100vh}.w-0\.5{width:calc(var(--spacing)*.5)}.w-1{width:calc(var(--spacing)*1)}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-14{width:calc(var(--spacing)*14)}.w-16{width:calc(var(--spacing)*16)}.w-32{width:calc(var(--spacing)*32)}.w-44{width:calc(var(--spacing)*44)}.w-60{width:calc(var(--spacing)*60)}.w-72{width:calc(var(--spacing)*72)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.min-w-\[180px\]{min-width:180px}.min-w-\[320px\]{min-width:320px}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-grab{cursor:grab}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*12)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[1\.5rem\]{border-radius:1.5rem}.rounded-\[2\.5rem\]{border-radius:2.5rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-none{border-radius:0}.rounded-xl{border-radius:var(--radius-xl)}.rounded-r-3xl{border-top-right-radius:var(--radius-3xl);border-bottom-right-radius:var(--radius-3xl)}.rounded-r-full{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-amber-500\/20{border-color:#f99c0033}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/20{border-color:color-mix(in oklab,var(--color-amber-500)20%,transparent)}}.border-black\/5{border-color:#0000000d}@supports (color:color-mix(in lab, red, red)){.border-black\/5{border-color:color-mix(in oklab,var(--color-black)5%,transparent)}}.border-black\/10{border-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.border-black\/10{border-color:color-mix(in oklab,var(--color-black)10%,transparent)}}.border-black\/\[0\.3\]{border-color:#0000004d}@supports (color:color-mix(in lab, red, red)){.border-black\/\[0\.3\]{border-color:color-mix(in oklab,var(--color-black)30%,transparent)}}.border-uix-black-200{border-color:var(--uix-black-200)}.border-uix-border-100{border-color:var(--uix-border-100)}.border-uix-border-200{border-color:var(--uix-border-200)}.border-uix-prime-300,.border-uix-prime-300\/50{border-color:var(--uix-prime-300)}@supports (color:color-mix(in lab, red, red)){.border-uix-prime-300\/50{border-color:color-mix(in oklab,var(--uix-prime-300)50%,transparent)}}.border-uix-sub1-300\/50{border-color:var(--uix-sub1-300)}@supports (color:color-mix(in lab, red, red)){.border-uix-sub1-300\/50{border-color:color-mix(in oklab,var(--uix-sub1-300)50%,transparent)}}.border-uix-sub1-400{border-color:var(--uix-sub1-400)}.border-uix-sub2-300\/50{border-color:var(--uix-sub2-300)}@supports (color:color-mix(in lab, red, red)){.border-uix-sub2-300\/50{border-color:color-mix(in oklab,var(--uix-sub2-300)50%,transparent)}}.border-uix-surface-200{border-color:var(--uix-surface-200)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab,var(--color-amber-500)10%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-black\/55{background-color:#0000008c}@supports (color:color-mix(in lab, red, red)){.bg-black\/55{background-color:color-mix(in oklab,var(--color-black)55%,transparent)}}.bg-transparent{background-color:#0000}.bg-uix-black-400{background-color:var(--uix-black-400)}.bg-uix-gray-200{background-color:var(--uix-gray-200)}.bg-uix-gray-300{background-color:var(--uix-gray-300)}.bg-uix-prime-100\/15{background-color:var(--uix-prime-100)}@supports (color:color-mix(in lab, red, red)){.bg-uix-prime-100\/15{background-color:color-mix(in oklab,var(--uix-prime-100)15%,transparent)}}.bg-uix-prime-300,.bg-uix-prime-300\/20{background-color:var(--uix-prime-300)}@supports (color:color-mix(in lab, red, red)){.bg-uix-prime-300\/20{background-color:color-mix(in oklab,var(--uix-prime-300)20%,transparent)}}.bg-uix-prime-300\/60{background-color:var(--uix-prime-300)}@supports (color:color-mix(in lab, red, red)){.bg-uix-prime-300\/60{background-color:color-mix(in oklab,var(--uix-prime-300)60%,transparent)}}.bg-uix-prime-400{background-color:var(--uix-prime-400)}.bg-uix-prime-500\/10{background-color:var(--uix-prime-500)}@supports (color:color-mix(in lab, red, red)){.bg-uix-prime-500\/10{background-color:color-mix(in oklab,var(--uix-prime-500)10%,transparent)}}.bg-uix-sub1-300{background-color:var(--uix-sub1-300)}.bg-uix-sub1-400{background-color:var(--uix-sub1-400)}.bg-uix-sub2-300{background-color:var(--uix-sub2-300)}.bg-uix-sub2-400{background-color:var(--uix-sub2-400)}.bg-uix-surface-100,.bg-uix-surface-100\/20{background-color:var(--uix-surface-100)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-100\/20{background-color:color-mix(in oklab,var(--uix-surface-100)20%,transparent)}}.bg-uix-surface-100\/50{background-color:var(--uix-surface-100)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-100\/50{background-color:color-mix(in oklab,var(--uix-surface-100)50%,transparent)}}.bg-uix-surface-100\/80{background-color:var(--uix-surface-100)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-100\/80{background-color:color-mix(in oklab,var(--uix-surface-100)80%,transparent)}}.bg-uix-surface-100\/90{background-color:var(--uix-surface-100)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-100\/90{background-color:color-mix(in oklab,var(--uix-surface-100)90%,transparent)}}.bg-uix-surface-200\/30{background-color:var(--uix-surface-200)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-200\/30{background-color:color-mix(in oklab,var(--uix-surface-200)30%,transparent)}}.bg-uix-surface-200\/50{background-color:var(--uix-surface-200)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-200\/50{background-color:color-mix(in oklab,var(--uix-surface-200)50%,transparent)}}.bg-uix-surface-200\/60{background-color:var(--uix-surface-200)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-200\/60{background-color:color-mix(in oklab,var(--uix-surface-200)60%,transparent)}}.bg-uix-surface-200\/70{background-color:var(--uix-surface-200)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-200\/70{background-color:color-mix(in oklab,var(--uix-surface-200)70%,transparent)}}.bg-uix-surface-300\/50{background-color:var(--uix-surface-300)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-300\/50{background-color:color-mix(in oklab,var(--uix-surface-300)50%,transparent)}}.bg-uix-surface-300\/80{background-color:var(--uix-surface-300)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-300\/80{background-color:color-mix(in oklab,var(--uix-surface-300)80%,transparent)}}.bg-uix-surface-400,.bg-uix-surface-400\/90{background-color:var(--uix-surface-400)}@supports (color:color-mix(in lab, red, red)){.bg-uix-surface-400\/90{background-color:color-mix(in oklab,var(--uix-surface-400)90%,transparent)}}.bg-uix-surface-500{background-color:var(--uix-surface-500)}.bg-white\/15{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.bg-white\/15{background-color:color-mix(in oklab,var(--color-white)15%,transparent)}}.bg-white\/25{background-color:#ffffff40}@supports (color:color-mix(in lab, red, red)){.bg-white\/25{background-color:color-mix(in oklab,var(--color-white)25%,transparent)}}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-uix-black-500{--tw-gradient-from:var(--uix-black-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-uix-prime-400{--tw-gradient-from:var(--uix-prime-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-uix-prime-500{--tw-gradient-from:var(--uix-prime-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-uix-sub1-400{--tw-gradient-from:var(--uix-sub1-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-uix-sub2-400{--tw-gradient-from:var(--uix-sub2-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-uix-white-200{--tw-gradient-from:var(--uix-white-200);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-transparent{--tw-gradient-via:transparent;--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-uix-black-500\/50{--tw-gradient-via:var(--uix-black-500)}@supports (color:color-mix(in lab, red, red)){.via-uix-black-500\/50{--tw-gradient-via:color-mix(in oklab,var(--uix-black-500)50%,transparent)}}.via-uix-black-500\/50{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-uix-prime-300{--tw-gradient-via:var(--uix-prime-300);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-uix-sub1-300{--tw-gradient-via:var(--uix-sub1-300);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-uix-sub2-300{--tw-gradient-via:var(--uix-sub2-300);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-uix-white-200\/50{--tw-gradient-via:var(--uix-white-200)}@supports (color:color-mix(in lab, red, red)){.via-uix-white-200\/50{--tw-gradient-via:color-mix(in oklab,var(--uix-white-200)50%,transparent)}}.via-uix-white-200\/50{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-30\%{--tw-gradient-via-position:30%}.to-uix-black-500{--tw-gradient-to:var(--uix-black-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-uix-prime-400{--tw-gradient-to:var(--uix-prime-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-uix-prime-500{--tw-gradient-to:var(--uix-prime-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-uix-sub1-400{--tw-gradient-to:var(--uix-sub1-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-uix-sub2-400{--tw-gradient-to:var(--uix-sub2-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-uix-white-200{--tw-gradient-to:var(--uix-white-200);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.\[mask-image\:linear-gradient\(to_bottom\,black_30\%\,transparent_70\%\)\]{-webkit-mask-image:linear-gradient(#000 30%,#0000 70%);mask-image:linear-gradient(#000 30%,#0000 70%)}.\[mask-image\:linear-gradient\(to_bottom\,black_40\%\,rgba\(0\,0\,0\,0\.3\)_70\%\,transparent_100\%\)\,linear-gradient\(to_right\,transparent_0\%\,rgba\(0\,0\,0\,0\.5\)_15\%\,black_30\%\,black_70\%\,rgba\(0\,0\,0\,0\.5\)_85\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(#000 40%,#0000004d 70%,#0000 100%),linear-gradient(90deg,#0000 0%,#00000080 15%,#000 30% 70%,#00000080 85%,#0000 100%);mask-image:linear-gradient(#000 40%,#0000004d 70%,#0000 100%),linear-gradient(90deg,#0000 0%,#00000080 15%,#000 30% 70%,#00000080 85%,#0000 100%)}.\[mask-image\:linear-gradient\(to_bottom\,black_50\%\,transparent_100\%\)\,linear-gradient\(to_right\,transparent\,black_20\%\,black_80\%\,transparent\)\]{-webkit-mask-image:linear-gradient(#000 50%,#0000 100%),linear-gradient(90deg,#0000,#000 20% 80%,#0000);mask-image:linear-gradient(#000 50%,#0000 100%),linear-gradient(90deg,#0000,#000 20% 80%,#0000)}.\[mask-image\:linear-gradient\(to_bottom\,black_50\%\,transparent_100\%\)\]{-webkit-mask-image:linear-gradient(#000 50%,#0000 100%);mask-image:linear-gradient(#000 50%,#0000 100%)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.\[mask-composite\:intersect\]{-webkit-mask-composite:source-in;-webkit-mask-composite:source-in;mask-composite:intersect}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1\.5{padding:calc(var(--spacing)*1.5)}.p-2\.5{padding:calc(var(--spacing)*2.5)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.p-14{padding:calc(var(--spacing)*14)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.py-20{padding-block:calc(var(--spacing)*20)}.py-24{padding-block:calc(var(--spacing)*24)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-28{padding-top:calc(var(--spacing)*28)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.whitespace-nowrap{white-space:nowrap}.text-amber-200{color:var(--color-amber-200)}.text-amber-300{color:var(--color-amber-300)}.text-green-400{color:var(--color-green-400)}.text-green-500{color:var(--color-green-500)}.text-transparent{color:#0000}.text-uix-black-300{color:var(--uix-black-300)}.text-uix-gray-100{color:var(--uix-gray-100)}.text-uix-gray-200{color:var(--uix-gray-200)}.text-uix-gray-300{color:var(--uix-gray-300)}.text-uix-prime-300{color:var(--uix-prime-300)}.text-uix-prime-400{color:var(--uix-prime-400)}.text-uix-sub1-300,.text-uix-sub1-300\/80{color:var(--uix-sub1-300)}@supports (color:color-mix(in lab, red, red)){.text-uix-sub1-300\/80{color:color-mix(in oklab,var(--uix-sub1-300)80%,transparent)}}.text-uix-sub2-400{color:var(--uix-sub2-400)}.text-uix-text-100{color:var(--uix-text-100)}.text-uix-text-200{color:var(--uix-text-200)}.text-uix-text-300{color:var(--uix-text-300)}.text-uix-white-100{color:var(--uix-white-100)}.text-white{color:var(--color-white)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab,var(--color-white)90%,transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-uix-prime-300{--tw-ring-color:var(--uix-prime-300)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.backdrop-blur-2xl{--tw-backdrop-blur:blur(var(--blur-2xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-saturate-150{--tw-backdrop-saturate:saturate(150%);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[margin\]{transition-property:margin;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:border-transparent:hover{border-color:#0000}.hover\:border-uix-prime-300\/50:hover{border-color:var(--uix-prime-300)}@supports (color:color-mix(in lab, red, red)){.hover\:border-uix-prime-300\/50:hover{border-color:color-mix(in oklab,var(--uix-prime-300)50%,transparent)}}.hover\:bg-uix-black-200:hover{background-color:var(--uix-black-200)}.hover\:bg-uix-prime-100\/15:hover{background-color:var(--uix-prime-100)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-prime-100\/15:hover{background-color:color-mix(in oklab,var(--uix-prime-100)15%,transparent)}}.hover\:bg-uix-prime-300:hover{background-color:var(--uix-prime-300)}.hover\:bg-uix-prime-400:hover{background-color:var(--uix-prime-400)}.hover\:bg-uix-prime-500:hover{background-color:var(--uix-prime-500)}.hover\:bg-uix-sub1-100\/15:hover{background-color:var(--uix-sub1-100)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-sub1-100\/15:hover{background-color:color-mix(in oklab,var(--uix-sub1-100)15%,transparent)}}.hover\:bg-uix-sub1-300:hover{background-color:var(--uix-sub1-300)}.hover\:bg-uix-sub1-400:hover{background-color:var(--uix-sub1-400)}.hover\:bg-uix-sub2-100\/15:hover{background-color:var(--uix-sub2-100)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-sub2-100\/15:hover{background-color:color-mix(in oklab,var(--uix-sub2-100)15%,transparent)}}.hover\:bg-uix-sub2-300:hover{background-color:var(--uix-sub2-300)}.hover\:bg-uix-sub2-400:hover{background-color:var(--uix-sub2-400)}.hover\:bg-uix-surface-200\/30:hover{background-color:var(--uix-surface-200)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-surface-200\/30:hover{background-color:color-mix(in oklab,var(--uix-surface-200)30%,transparent)}}.hover\:bg-uix-surface-300:hover,.hover\:bg-uix-surface-300\/50:hover{background-color:var(--uix-surface-300)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-surface-300\/50:hover{background-color:color-mix(in oklab,var(--uix-surface-300)50%,transparent)}}.hover\:bg-uix-surface-300\/60:hover{background-color:var(--uix-surface-300)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-surface-300\/60:hover{background-color:color-mix(in oklab,var(--uix-surface-300)60%,transparent)}}.hover\:bg-uix-surface-300\/80:hover{background-color:var(--uix-surface-300)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-surface-300\/80:hover{background-color:color-mix(in oklab,var(--uix-surface-300)80%,transparent)}}.hover\:bg-uix-surface-400\/50:hover{background-color:var(--uix-surface-400)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-uix-surface-400\/50:hover{background-color:color-mix(in oklab,var(--uix-surface-400)50%,transparent)}}.hover\:text-uix-black-300:hover{color:var(--uix-black-300)}.hover\:text-uix-text-100:hover{color:var(--uix-text-100)}.hover\:text-uix-text-200:hover{color:var(--uix-text-200)}.hover\:text-uix-white-100:hover{color:var(--uix-white-100)}}.focus\:border-uix-prime-300:focus{border-color:var(--uix-prime-300)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-uix-prime-300\/20:focus{--tw-ring-color:var(--uix-prime-300)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-uix-prime-300\/20:focus{--tw-ring-color:color-mix(in oklab,var(--uix-prime-300)20%,transparent)}}.focus\:ring-uix-sub1-300\/30:focus{--tw-ring-color:var(--uix-sub1-300)}@supports (color:color-mix(in lab, red, red)){.focus\:ring-uix-sub1-300\/30:focus{--tw-ring-color:color-mix(in oklab,var(--uix-sub1-300)30%,transparent)}}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-uix-prime-300:focus-visible{--tw-ring-color:var(--uix-prime-300)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:40rem){.sm\:flex{display:flex}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:px-6{padding-inline:calc(var(--spacing)*6)}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}}@media (min-width:80rem){.xl\:mb-20{margin-bottom:calc(var(--spacing)*20)}.xl\:ml-64{margin-left:calc(var(--spacing)*64)}.xl\:block{display:block}.xl\:flex{display:flex}.xl\:hidden{display:none}:where(.xl\:space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.xl\:p-8{padding:calc(var(--spacing)*8)}.xl\:px-8{padding-inline:calc(var(--spacing)*8)}.xl\:px-12{padding-inline:calc(var(--spacing)*12)}.xl\:py-24{padding-block:calc(var(--spacing)*24)}.xl\:py-32{padding-block:calc(var(--spacing)*32)}.xl\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.xl\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.xl\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.xl\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.xl\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (prefers-color-scheme:dark){.dark\:border-white\/5{border-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/5{border-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.dark\:border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/10{border-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.dark\:border-white\/\[0\.03\]{border-color:#ffffff08}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[0\.03\]{border-color:color-mix(in oklab,var(--color-white)3%,transparent)}}.dark\:border-white\/\[0\.06\]{border-color:#ffffff0f}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/\[0\.06\]{border-color:color-mix(in oklab,var(--color-white)6%,transparent)}}.dark\:opacity-40{opacity:.4}}.\[\&_\.line\]\:before\:mr-4 .line:before{content:var(--tw-content);margin-right:calc(var(--spacing)*4)}.\[\&_\.line\]\:before\:text-uix-gray-300 .line:before{content:var(--tw-content);color:var(--uix-gray-300)}.\[\&_\.line\]\:before\:content-\[counter\(line\)\] .line:before{--tw-content:counter(line);content:var(--tw-content)}.\[\&_code\]\:\!bg-transparent code{background-color:#0000!important}.\[\&_pre\]\:\!m-0 pre{margin:calc(var(--spacing)*0)!important}.\[\&_pre\]\:\!bg-transparent pre{background-color:#0000!important}.\[\&_pre\]\:\!p-0 pre{padding:calc(var(--spacing)*0)!important}.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar{width:calc(var(--spacing)*2)}.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb{border-radius:3.40282e38px}.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-uix-gray-300\/50::-webkit-scrollbar-thumb{background-color:var(--uix-gray-300)}@supports (color:color-mix(in lab, red, red)){.\[\&\:\:-webkit-scrollbar-thumb\]\:bg-uix-gray-300\/50::-webkit-scrollbar-thumb{background-color:color-mix(in oklab,var(--uix-gray-300)50%,transparent)}}@media (hover:hover){.\[\&\:\:-webkit-scrollbar-thumb\]\:hover\:bg-uix-gray-300::-webkit-scrollbar-thumb:hover{background-color:var(--uix-gray-300)}}.\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track{background-color:#0000}.\[\&\>\*\]\:col-start-1>*{grid-column-start:1}.\[\&\>\*\]\:row-start-1>*{grid-row-start:1}.\[\&\>svg\]\:text-amber-500>svg{color:var(--color-amber-500)}.\[\&\>svg\]\:text-green-500>svg{color:var(--color-green-500)}.\[\&\>svg\]\:text-uix-prime-400>svg{color:var(--uix-prime-400)}.\[\&\>svg\]\:text-uix-sub1-400>svg{color:var(--uix-sub1-400)}}@font-face{font-family:Outfit;src:url(/fonts/Outfit/Outfit-Regular.ttf)format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Outfit;src:url(/fonts/Outfit/Outfit-Medium.ttf)format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Outfit;src:url(/fonts/Outfit/Outfit-SemiBold.ttf)format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Outfit;src:url(/fonts/Outfit/Outfit-Bold.ttf)format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/Pretendard-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/Pretendard-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/Pretendard-SemiBold.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Pretendard;src:url(/fonts/Pretendard/Pretendard-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--uix-black-100:#4a4644;--uix-black-200:#393634;--uix-black-300:#282524;--uix-black-400:#1a1817;--uix-black-500:#0d0c0b;--uix-gray-100:#a8a196;--uix-gray-200:#8a8278;--uix-gray-300:#6d6459;--uix-gray-400:#534c43;--uix-gray-500:#3a352e;--uix-white-100:#fff;--uix-white-200:#faf9f7;--uix-white-300:#f5f4f1;--uix-white-400:#e8e6e1;--uix-white-500:#d4d1ca;--uix-prime-100:#c4c4eb;--uix-prime-200:#a3a3e0;--uix-prime-300:#8383d6;--uix-prime-400:#6363cb;--uix-prime-500:#4a4ab0;--uix-sub1-100:#f5c4b8;--uix-sub1-200:#f0a08b;--uix-sub1-300:#e87c5d;--uix-sub1-400:#d9593a;--uix-sub1-500:#b84526;--uix-sub2-100:#f5ebe0;--uix-sub2-200:#e6d5c3;--uix-sub2-300:#d4bc9a;--uix-sub2-400:#c4a67a;--uix-sub2-500:#a8895e;--uix-surface-100:var(--uix-white-100);--uix-surface-200:var(--uix-white-200);--uix-surface-300:var(--uix-white-300);--uix-surface-400:var(--uix-white-400);--uix-surface-500:var(--uix-white-500);--uix-border-100:var(--uix-white-300);--uix-border-200:var(--uix-white-400);--uix-border-300:var(--uix-white-500);--uix-text-100:var(--uix-black-300);--uix-text-200:var(--uix-black-200);--uix-text-300:var(--uix-gray-300)}.dark{--uix-surface-100:var(--uix-black-300);--uix-surface-200:var(--uix-black-400);--uix-surface-300:var(--uix-black-400);--uix-surface-400:var(--uix-black-500);--uix-surface-500:var(--uix-black-500);--uix-border-100:var(--uix-black-400);--uix-border-200:var(--uix-black-300);--uix-border-300:var(--uix-black-200);--uix-text-100:var(--uix-white-100);--uix-text-200:var(--uix-white-300);--uix-text-300:var(--uix-gray-200)}html{scroll-behavior:smooth}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--uix-surface-400);color:var(--uix-text-100);line-height:1.7;transition:background-color .2s,color .2s}::selection{background:var(--uix-prime-300);color:var(--uix-white-100)}:focus-visible{outline:2px solid var(--uix-prime-300);outline-offset:2px}.uix-glass-border{border:1px solid #00000012}.dark .uix-glass-border{border:1px solid #ffffff08}.uix-glass{background-color:var(--uix-surface-200)}@supports (color:color-mix(in lab, red, red)){.uix-glass{background-color:color-mix(in srgb,var(--uix-surface-200)40%,transparent)}}.uix-glass{-webkit-backdrop-filter:blur(12px)saturate(1.5)}.uix-convex-subtle{box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 2px #00000014,0 1px 4px -1px #0000000a}.dark .uix-convex-subtle{box-shadow:inset 0 2px 4px #ffffff1a,inset 0 -2px 4px #0003}.uix-convex{box-shadow:inset 0 1px 1px #ffffffb3,inset 0 -1px 3px #0000001f,0 2px 6px -2px #0000000d}.uix-convex-sm{box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 2px #0000001a,0 1px 4px -1px #0000000a}.uix-convex-lg{box-shadow:inset 0 1px 2px #ffffffbf,inset 0 -1px 4px #00000026,0 3px 10px -3px #0000000f}.dark .uix-convex{box-shadow:inset 0 1px 4px #ffffff2e,inset 0 -2px 10px #0006,0 10px 36px -2px #0009}.dark .uix-convex-sm{box-shadow:inset 0 1px 2px #ffffff26,inset 0 -1px 6px #00000059,0 6px 24px -1px #00000080}.dark .uix-convex-lg{box-shadow:inset 0 2px 6px #fff3,inset 0 -3px 12px #00000073,0 14px 48px -4px #000000a6}.uix-convex-colored{box-shadow:inset 0 2px 6px #fff6,inset 0 -3px 8px #00000059}.uix-convex-colored-sm{box-shadow:inset 0 1px 4px #ffffff59,inset 0 -2px 5px #0000004d}.dark .uix-convex-colored{box-shadow:inset 0 2px 6px #fff6,inset 0 -3px 8px #00000059}.dark .uix-convex-colored-sm{box-shadow:inset 0 1px 4px #ffffff59,inset 0 -2px 5px #0000004d}.uix-glass-noise:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#0000 0%,#ffffff80 50%,#0000 100%);height:1px;position:absolute;top:0;left:10%;right:10%}.uix-glass-noise:after{content:"";z-index:1;border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px 1px #ffffff1a}.dark .uix-glass-noise:before{background:linear-gradient(90deg,#0000 0%,#ffffff40 50%,#0000 100%)}.dark .uix-glass-noise:after{box-shadow:inset 0 1px 1px #ffffff0d}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jameskyeong/uix",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.12",
|
|
4
4
|
"description": "React UI component library with warm, elegant design system",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"dev": "pnpm generate:versions && vite --port 9999 --open",
|
|
29
29
|
"build": "vite build --mode lib && pnpm build:css && pnpm build:cli",
|
|
30
30
|
"build:lib": "vite build --mode lib",
|
|
31
|
-
"build:css": "
|
|
31
|
+
"build:css": "npx @tailwindcss/cli -i src/styles/build.css -o dist/styles.css --minify",
|
|
32
32
|
"build:cli": "tsc -p tsconfig.cli.json && cp -r src/cli/themes dist/cli/",
|
|
33
33
|
"build:showcase": "pnpm generate:versions && vite build",
|
|
34
34
|
"generate:versions": "node scripts/generate-versions.js",
|