@hexdspace/react 0.1.0 → 0.1.2

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