@teseor/css 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/compiled.css +1 -4564
  2. package/dist/index.css +1 -4546
  3. package/package.json +1 -1
  4. package/src/03-layout/sidebar-nav/index.scss +1 -1
package/dist/index.css CHANGED
@@ -1,4546 +1 @@
1
- @charset "UTF-8";
2
- @import "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&display=swap";
3
- @layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;
4
- /**
5
- * CSS Library - Main Entry Point
6
- *
7
- * Import order follows numbered folder structure for cascade control.
8
- */
9
- /* 00. Config: Layer definitions + Design tokens */
10
- /* Fonts (Google Fonts CDN) */
11
- :root {
12
- --ui-color-primary: oklch(55% 0.22 250);
13
- --ui-color-success: oklch(60% 0.18 145);
14
- --ui-color-warning: oklch(75% 0.18 70);
15
- --ui-color-danger: oklch(60% 0.22 25);
16
- --ui-color-neutral: oklch(50% 0.02 250);
17
- --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
18
- --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
19
- --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
20
- --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
21
- --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
22
- --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);
23
- --ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);
24
- --ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);
25
- --ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);
26
- --ui-color-neutral-500: var(--ui-color-neutral);
27
- --ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);
28
- --ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);
29
- --ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);
30
- --ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black);
31
- }
32
- :root {
33
- --ui-space-px: calc(var(--ui-unit) * 0.125);
34
- --ui-space-quarter: calc(var(--ui-unit) * 0.25);
35
- --ui-space-half: calc(var(--ui-unit) * 0.5);
36
- --ui-space-0: calc(var(--ui-unit) * 0.5);
37
- --ui-space-1: var(--ui-unit);
38
- --ui-space-2: calc(var(--ui-unit) * 2);
39
- --ui-space-3: calc(var(--ui-unit) * 3);
40
- --ui-space-4: calc(var(--ui-unit) * 4);
41
- --ui-space-6: calc(var(--ui-unit) * 6);
42
- --ui-space-8: calc(var(--ui-unit) * 8);
43
- }
44
- :root {
45
- --ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
46
- --ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;
47
- --ui-font-size-xs: 0.75rem;
48
- --ui-font-size-sm: 0.875rem;
49
- --ui-font-size-md: 1rem;
50
- --ui-font-size-lg: 1.25rem;
51
- --ui-font-size-xl: 1.5rem;
52
- --ui-font-size-2xl: 1.75rem;
53
- --ui-font-size-3xl: 2rem;
54
- --ui-font-size-4xl: 2.5rem;
55
- --ui-leading-tight-xs: var(--ui-row-1);
56
- --ui-leading-tight-sm: var(--ui-row-1);
57
- --ui-leading-tight-md: calc(var(--ui-unit) * 3);
58
- --ui-leading-tight-lg: calc(var(--ui-unit) * 3);
59
- --ui-leading-xs: var(--ui-row-1);
60
- --ui-leading-sm: calc(var(--ui-unit) * 3);
61
- --ui-leading-md: calc(var(--ui-unit) * 3);
62
- --ui-leading-lg: var(--ui-row-2);
63
- --ui-leading-xl: var(--ui-row-2);
64
- --ui-leading-2xl: var(--ui-row-2);
65
- --ui-leading-3xl: calc(var(--ui-unit) * 5);
66
- --ui-leading-4xl: calc(var(--ui-unit) * 6);
67
- --ui-weight-normal: 400;
68
- --ui-weight-medium: 500;
69
- --ui-weight-semibold: 600;
70
- --ui-weight-bold: 700;
71
- --ui-tracking-display: -0.02em;
72
- --ui-tracking-body: 0;
73
- --ui-tracking-caps: 0.08em;
74
- --ui-heading-1-size: var(--ui-font-size-4xl);
75
- --ui-heading-1-line-height: var(--ui-leading-4xl);
76
- --ui-heading-1-weight: var(--ui-weight-bold);
77
- --ui-heading-1-tracking: var(--ui-tracking-display);
78
- --ui-heading-2-size: var(--ui-font-size-3xl);
79
- --ui-heading-2-line-height: var(--ui-leading-3xl);
80
- --ui-heading-2-weight: var(--ui-weight-bold);
81
- --ui-heading-2-tracking: -0.01em;
82
- --ui-heading-3-size: var(--ui-font-size-2xl);
83
- --ui-heading-3-line-height: var(--ui-leading-2xl);
84
- --ui-heading-3-weight: var(--ui-weight-semibold);
85
- --ui-heading-3-tracking: var(--ui-tracking-body);
86
- --ui-heading-4-size: var(--ui-font-size-xl);
87
- --ui-heading-4-line-height: var(--ui-leading-xl);
88
- --ui-heading-4-weight: var(--ui-weight-semibold);
89
- --ui-heading-4-tracking: var(--ui-tracking-body);
90
- --ui-heading-5-size: var(--ui-font-size-lg);
91
- --ui-heading-5-line-height: var(--ui-leading-sm);
92
- --ui-heading-5-weight: var(--ui-weight-medium);
93
- --ui-heading-5-tracking: var(--ui-tracking-body);
94
- --ui-body-size: var(--ui-font-size-md);
95
- --ui-body-line-height: var(--ui-leading-md);
96
- --ui-body-weight: var(--ui-weight-normal);
97
- --ui-body-tracking: var(--ui-tracking-body);
98
- --ui-body-sm-size: var(--ui-font-size-sm);
99
- --ui-body-sm-line-height: var(--ui-leading-sm);
100
- --ui-body-sm-weight: var(--ui-weight-normal);
101
- --ui-body-sm-tracking: var(--ui-tracking-body);
102
- --ui-caption-size: var(--ui-font-size-xs);
103
- --ui-caption-line-height: var(--ui-leading-xs);
104
- --ui-caption-weight: var(--ui-weight-normal);
105
- --ui-caption-tracking: 0.01em;
106
- --ui-lead-size: var(--ui-font-size-lg);
107
- --ui-lead-line-height: var(--ui-leading-lg);
108
- --ui-lead-weight: var(--ui-weight-normal);
109
- --ui-lead-tracking: var(--ui-tracking-body);
110
- --ui-eyebrow-size: var(--ui-font-size-xs);
111
- --ui-eyebrow-line-height: var(--ui-leading-xs);
112
- --ui-eyebrow-weight: var(--ui-weight-semibold);
113
- --ui-eyebrow-tracking: var(--ui-tracking-caps);
114
- }
115
- :root {
116
- --ui-unit: 8px; /* 8px */
117
- --ui-row: calc(var(--ui-unit) * 2);
118
- --ui-row-1: var(--ui-row);
119
- --ui-row-2: calc(var(--ui-row) * 2);
120
- --ui-row-3: calc(var(--ui-row) * 3);
121
- --ui-row-4: calc(var(--ui-row) * 4);
122
- --ui-row-5: calc(var(--ui-row) * 5);
123
- --ui-row-6: calc(var(--ui-row) * 6);
124
- }
125
- :root {
126
- --ui-radius-sm: calc(var(--ui-unit) * 0.5);
127
- --ui-radius-md: var(--ui-unit);
128
- --ui-radius-lg: calc(var(--ui-unit) * 2);
129
- --ui-radius-full: 9999px;
130
- }
131
- :root {
132
- --ui-border-width-sm: calc(var(--ui-unit) * 0.125);
133
- --ui-border-width-md: calc(var(--ui-unit) * 0.25);
134
- --ui-border-width-lg: calc(var(--ui-unit) * 0.5);
135
- }
136
- :root {
137
- --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);
138
- --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);
139
- --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15);
140
- }
141
- @layer tokens {
142
- :root {
143
- --ui-z-base: 0;
144
- --ui-z-sticky: 100;
145
- --ui-z-dropdown: 200;
146
- --ui-z-overlay: 300;
147
- --ui-z-modal: 400;
148
- --ui-z-popover: 500;
149
- --ui-z-tooltip: 600;
150
- --ui-z-toast: 700;
151
- --ui-z-debug: 9999;
152
- }
153
- }
154
- @layer tokens {
155
- :root {
156
- --ui-duration-instant: 50ms;
157
- --ui-duration-fast: 100ms;
158
- --ui-duration-base: 150ms;
159
- --ui-duration-slow: 250ms;
160
- --ui-duration-slower: 400ms;
161
- --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
162
- --ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
163
- --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
164
- --ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
165
- }
166
- @media (prefers-reduced-motion: reduce) {
167
- :root {
168
- --ui-duration-instant: 0ms;
169
- --ui-duration-fast: 0ms;
170
- --ui-duration-base: 0ms;
171
- --ui-duration-slow: 0ms;
172
- --ui-duration-slower: 0ms;
173
- }
174
- }
175
- }
176
- :root {
177
- --ui-color-text: var(--ui-color-neutral-900);
178
- --ui-color-text-muted: var(--ui-color-neutral-500);
179
- --ui-color-text-inverse: var(--ui-color-neutral-50);
180
- --ui-color-bg: var(--ui-color-neutral-50);
181
- --ui-color-bg-subtle: var(--ui-color-neutral-100);
182
- --ui-color-bg-muted: var(--ui-color-neutral-200);
183
- --ui-color-border: var(--ui-color-neutral-200);
184
- --ui-color-border-strong: var(--ui-color-neutral-300);
185
- --ui-color-interactive: var(--ui-color-primary);
186
- --ui-color-interactive-hover: var(--ui-color-primary-dark);
187
- --ui-color-focus: var(--ui-color-primary-light);
188
- }
189
- [data-theme=dark] {
190
- --ui-color-text: var(--ui-color-neutral-100);
191
- --ui-color-text-muted: var(--ui-color-neutral-400);
192
- --ui-color-text-inverse: var(--ui-color-neutral-900);
193
- --ui-color-bg: var(--ui-color-neutral-900);
194
- --ui-color-bg-subtle: var(--ui-color-neutral-800);
195
- --ui-color-bg-muted: var(--ui-color-neutral-700);
196
- --ui-color-border: var(--ui-color-neutral-700);
197
- --ui-color-border-strong: var(--ui-color-neutral-600);
198
- }
199
- :root {
200
- --ui-spacing-xs: var(--ui-space-1);
201
- --ui-spacing-sm: var(--ui-space-2);
202
- --ui-spacing-md: var(--ui-space-4);
203
- --ui-spacing-lg: var(--ui-space-6);
204
- --ui-spacing-xl: var(--ui-space-8);
205
- --ui-spacing-gutter: var(--ui-space-4);
206
- --ui-spacing-section: var(--ui-space-8);
207
- }
208
- :root {
209
- --ui-input-height: var(--ui-row-2);
210
- --ui-input-padding-x: var(--ui-space-2);
211
- --ui-input-padding-y: var(--ui-space-1);
212
- --ui-input-radius: var(--ui-radius-md);
213
- --ui-input-border-width: var(--ui-border-width-sm);
214
- --ui-input-bg: var(--ui-color-bg);
215
- --ui-input-border: var(--ui-color-border);
216
- --ui-input-border-focus: var(--ui-color-interactive);
217
- --ui-input-text: var(--ui-color-text);
218
- --ui-input-placeholder: var(--ui-color-text-muted);
219
- }
220
- /* 01. Reset styles */
221
- @layer reset {
222
- *,
223
- *::before,
224
- *::after {
225
- box-sizing: border-box;
226
- margin: 0;
227
- }
228
- }
229
- /* 02. Base styles (typography, etc.) */
230
- @layer base {
231
- .ui-root {
232
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
233
- font-size: var(--ui-font-size-md, 1rem);
234
- line-height: var(--ui-leading-md, calc(0.5rem * 3));
235
- color: var(--ui-color-text, hsl(220, 10%, 10%));
236
- background: var(--ui-color-bg, hsl(220, 10%, 98%));
237
- }
238
- }
239
- @layer base {
240
- h1 {
241
- margin-block-end: var(--ui-space-4);
242
- font-size: var(--ui-heading-1-size);
243
- font-weight: var(--ui-heading-1-weight);
244
- line-height: var(--ui-heading-1-line-height);
245
- letter-spacing: var(--ui-heading-1-tracking);
246
- }
247
- h2 {
248
- margin-block-end: var(--ui-space-3);
249
- font-size: var(--ui-heading-2-size);
250
- font-weight: var(--ui-heading-2-weight);
251
- line-height: var(--ui-heading-2-line-height);
252
- letter-spacing: var(--ui-heading-2-tracking);
253
- }
254
- h3 {
255
- margin-block-end: var(--ui-space-2);
256
- font-size: var(--ui-heading-3-size);
257
- font-weight: var(--ui-heading-3-weight);
258
- line-height: var(--ui-heading-3-line-height);
259
- letter-spacing: var(--ui-heading-3-tracking);
260
- }
261
- h4 {
262
- margin-block-end: var(--ui-space-2);
263
- font-size: var(--ui-heading-4-size);
264
- font-weight: var(--ui-heading-4-weight);
265
- line-height: var(--ui-heading-4-line-height);
266
- letter-spacing: var(--ui-heading-4-tracking);
267
- }
268
- h5,
269
- h6 {
270
- margin-block-end: var(--ui-space-1);
271
- font-size: var(--ui-heading-5-size);
272
- font-weight: var(--ui-heading-5-weight);
273
- line-height: var(--ui-heading-5-line-height);
274
- letter-spacing: var(--ui-heading-5-tracking);
275
- }
276
- p {
277
- margin-block-end: var(--ui-space-2);
278
- font-size: var(--ui-body-size);
279
- line-height: var(--ui-body-line-height);
280
- letter-spacing: var(--ui-body-tracking);
281
- }
282
- p:last-child {
283
- margin-block-end: 0;
284
- }
285
- strong,
286
- b {
287
- font-weight: var(--ui-weight-bold);
288
- line-height: 0;
289
- }
290
- small {
291
- font-size: var(--ui-caption-size);
292
- line-height: 0;
293
- }
294
- code {
295
- padding: 0 var(--ui-space-1);
296
- font-family: var(--ui-font-mono);
297
- font-size: var(--ui-body-sm-size);
298
- line-height: 0;
299
- vertical-align: baseline;
300
- background: var(--ui-color-bg-muted);
301
- border-radius: var(--ui-radius-sm);
302
- }
303
- pre {
304
- padding: var(--ui-space-2);
305
- margin-block-end: var(--ui-space-2);
306
- overflow-x: auto;
307
- font-family: var(--ui-font-mono);
308
- font-size: var(--ui-body-sm-size);
309
- line-height: var(--ui-body-sm-line-height);
310
- background: var(--ui-color-bg-muted);
311
- border-radius: var(--ui-radius-md);
312
- }
313
- pre code {
314
- padding: 0;
315
- background: none;
316
- }
317
- a {
318
- text-decoration: underline;
319
- color: var(--ui-color-primary);
320
- transition: color var(--ui-duration-fast) var(--ui-ease-default);
321
- }
322
- a:hover {
323
- color: var(--ui-color-primary-hover);
324
- }
325
- a:visited {
326
- color: var(--ui-color-primary);
327
- }
328
- @media (width < 45.625rem) {
329
- h1 {
330
- font-size: var(--ui-font-size-2xl);
331
- line-height: var(--ui-leading-2xl);
332
- }
333
- h2 {
334
- font-size: var(--ui-font-size-xl);
335
- line-height: var(--ui-leading-xl);
336
- }
337
- h3 {
338
- font-size: var(--ui-font-size-lg);
339
- line-height: var(--ui-leading-sm);
340
- }
341
- h4 {
342
- font-size: 1.125rem;
343
- line-height: var(--ui-leading-sm);
344
- }
345
- }
346
- @media (width > 67.5rem) {
347
- h1 {
348
- font-size: calc(var(--ui-unit) * 6);
349
- line-height: calc(var(--ui-unit) * 7);
350
- }
351
- h2 {
352
- font-size: var(--ui-font-size-4xl);
353
- line-height: var(--ui-leading-4xl);
354
- }
355
- }
356
- }
357
- /* 03. Layout primitives */
358
- @layer primitives {
359
- .ui-box {
360
- --ui-_padding: var(--ui-box-padding, 0);
361
- --ui-_bg: var(--ui-box-bg, transparent);
362
- --ui-_color: var(--ui-box-color, inherit);
363
- --ui-_radius: var(--ui-box-radius, 0);
364
- padding: var(--ui-_padding);
365
- color: var(--ui-_color);
366
- background: var(--ui-_bg);
367
- border-radius: var(--ui-_radius);
368
- }
369
- .ui-box--p-1 {
370
- --ui-_padding: var(--ui-space-1, 0.5rem);
371
- }
372
- .ui-box--p-2 {
373
- --ui-_padding: var(--ui-space-2, 1rem);
374
- }
375
- .ui-box--p-3 {
376
- --ui-_padding: var(--ui-space-3, 1.5rem);
377
- }
378
- .ui-box--p-4 {
379
- --ui-_padding: var(--ui-space-4, 2rem);
380
- }
381
- .ui-box--bg-subtle {
382
- --ui-_bg: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
383
- }
384
- .ui-box--bg-muted {
385
- --ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
386
- }
387
- .ui-box--rounded {
388
- --ui-_radius: var(--ui-radius-md, 0.5rem);
389
- }
390
- .ui-box--rounded-lg {
391
- --ui-_radius: var(--ui-radius-lg, 1rem);
392
- }
393
- }
394
- @layer primitives {
395
- .ui-stack {
396
- display: flex;
397
- flex-direction: column;
398
- gap: var(--ui-stack-gap, var(--ui-space-2));
399
- }
400
- .ui-stack--xs {
401
- --ui-stack-gap: var(--ui-space-1);
402
- }
403
- .ui-stack--sm {
404
- --ui-stack-gap: var(--ui-space-2);
405
- }
406
- .ui-stack--md {
407
- --ui-stack-gap: var(--ui-space-4);
408
- }
409
- .ui-stack--lg {
410
- --ui-stack-gap: var(--ui-space-6);
411
- }
412
- .ui-stack--xl {
413
- --ui-stack-gap: var(--ui-space-8);
414
- }
415
- }
416
- @layer primitives {
417
- .ui-cluster {
418
- display: flex;
419
- flex-wrap: wrap;
420
- align-items: center;
421
- gap: var(--ui-cluster-gap, var(--ui-space-2));
422
- }
423
- .ui-cluster--xs {
424
- --ui-cluster-gap: var(--ui-space-1);
425
- }
426
- .ui-cluster--sm {
427
- --ui-cluster-gap: var(--ui-space-2);
428
- }
429
- .ui-cluster--md {
430
- --ui-cluster-gap: var(--ui-space-4);
431
- }
432
- .ui-cluster--lg {
433
- --ui-cluster-gap: var(--ui-space-6);
434
- }
435
- .ui-cluster--start {
436
- justify-content: flex-start;
437
- }
438
- .ui-cluster--center {
439
- justify-content: center;
440
- }
441
- .ui-cluster--end {
442
- justify-content: flex-end;
443
- }
444
- .ui-cluster--between {
445
- justify-content: space-between;
446
- }
447
- }
448
- @layer primitives {
449
- .ui-flex {
450
- --ui-_gap: var(--ui-flex-gap, var(--ui-space-2, 1rem));
451
- --ui-_direction: var(--ui-flex-direction, row);
452
- --ui-_wrap: var(--ui-flex-wrap, nowrap);
453
- --ui-_align: var(--ui-flex-align, stretch);
454
- --ui-_justify: var(--ui-flex-justify, flex-start);
455
- display: flex;
456
- flex-direction: var(--ui-_direction);
457
- flex-wrap: var(--ui-_wrap);
458
- align-items: var(--ui-_align);
459
- justify-content: var(--ui-_justify);
460
- gap: var(--ui-_gap);
461
- }
462
- .ui-flex--row {
463
- --ui-_direction: row;
464
- }
465
- .ui-flex--col {
466
- --ui-_direction: column;
467
- }
468
- .ui-flex--row-reverse {
469
- --ui-_direction: row-reverse;
470
- }
471
- .ui-flex--col-reverse {
472
- --ui-_direction: column-reverse;
473
- }
474
- .ui-flex--wrap {
475
- --ui-_wrap: wrap;
476
- }
477
- .ui-flex--nowrap {
478
- --ui-_wrap: nowrap;
479
- }
480
- .ui-flex--items-start {
481
- --ui-_align: flex-start;
482
- }
483
- .ui-flex--items-center {
484
- --ui-_align: center;
485
- }
486
- .ui-flex--items-end {
487
- --ui-_align: flex-end;
488
- }
489
- .ui-flex--items-baseline {
490
- --ui-_align: baseline;
491
- }
492
- .ui-flex--justify-start {
493
- --ui-_justify: flex-start;
494
- }
495
- .ui-flex--justify-center {
496
- --ui-_justify: center;
497
- }
498
- .ui-flex--justify-end {
499
- --ui-_justify: flex-end;
500
- }
501
- .ui-flex--justify-between {
502
- --ui-_justify: space-between;
503
- }
504
- .ui-flex--justify-around {
505
- --ui-_justify: space-around;
506
- }
507
- .ui-flex--gap-0 {
508
- --ui-_gap: 0;
509
- }
510
- .ui-flex--gap-1 {
511
- --ui-_gap: var(--ui-space-1, 0.5rem);
512
- }
513
- .ui-flex--gap-2 {
514
- --ui-_gap: var(--ui-space-2, 1rem);
515
- }
516
- .ui-flex--gap-3 {
517
- --ui-_gap: var(--ui-space-3, 1.5rem);
518
- }
519
- .ui-flex--gap-4 {
520
- --ui-_gap: var(--ui-space-4, 2rem);
521
- }
522
- }
523
- @layer primitives {
524
- .ui-center {
525
- display: flex;
526
- align-items: center;
527
- justify-content: center;
528
- }
529
- .ui-center--column {
530
- flex-direction: column;
531
- }
532
- }
533
- @layer primitives {
534
- .ui-grid {
535
- display: grid;
536
- gap: var(--ui-grid-gap, var(--ui-space-4));
537
- grid-template-columns: repeat(var(--ui-grid-cols, 1), minmax(0, 1fr));
538
- }
539
- .ui-grid--2 {
540
- --ui-grid-cols: 2;
541
- }
542
- .ui-grid--3 {
543
- --ui-grid-cols: 3;
544
- }
545
- .ui-grid--4 {
546
- --ui-grid-cols: 4;
547
- }
548
- .ui-grid--auto {
549
- grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr));
550
- }
551
- }
552
- @layer primitives {
553
- .ui-app-shell {
554
- min-block-size: 100vh;
555
- }
556
- }
557
- @layer primitives {
558
- .ui-sidebar {
559
- display: flex;
560
- flex-direction: column;
561
- position: fixed;
562
- inset-block-start: 0;
563
- inset-inline-start: 0;
564
- z-index: var(--ui-z-sticky);
565
- block-size: 100vh;
566
- inline-size: var(--ui-sidebar-width, calc(var(--ui-unit) * 30));
567
- overflow-y: auto;
568
- background: var(--ui-color-bg-subtle);
569
- box-shadow: inset calc(var(--ui-border-width-sm) * -1) 0 0 0 var(--ui-color-border);
570
- }
571
- /* Width modifiers */
572
- .ui-sidebar--sm {
573
- --ui-sidebar-width: calc(var(--ui-unit) * 24);
574
- }
575
- .ui-sidebar--md {
576
- --ui-sidebar-width: calc(var(--ui-unit) * 30);
577
- }
578
- .ui-sidebar--lg {
579
- --ui-sidebar-width: calc(var(--ui-unit) * 40);
580
- }
581
- /* Position modifier - sidebar on end (right in LTR) */
582
- .ui-sidebar--end {
583
- inset-inline-start: auto;
584
- inset-inline-end: 0;
585
- box-shadow: inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border);
586
- }
587
- }
588
- @layer primitives {
589
- .ui-sidebar-nav {
590
- --ui-_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));
591
- --ui-_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));
592
- --ui-_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));
593
- --ui-_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));
594
- display: flex;
595
- flex-direction: column;
596
- block-size: 100%;
597
- inline-size: var(--ui-_width);
598
- background: var(--ui-_bg);
599
- }
600
- .ui-sidebar-nav__header {
601
- --ui-_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));
602
- flex-shrink: 0;
603
- padding: var(--ui-_padding);
604
- box-shadow: inset 0 calc(var(--ui-border-width-sm) * -1) 0 0 var(--ui-_border-color);
605
- }
606
- .ui-sidebar-nav__content {
607
- flex: 1;
608
- padding: var(--ui-_padding);
609
- overflow-y: auto;
610
- }
611
- .ui-sidebar-nav__footer {
612
- --ui-_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));
613
- flex-shrink: 0;
614
- padding: var(--ui-_padding);
615
- box-shadow: inset 0 var(--ui-border-width-sm) 0 0 var(--ui-_border-color);
616
- }
617
- .ui-sidebar-nav__group {
618
- margin-block-end: var(--ui-space-2);
619
- }
620
- .ui-sidebar-nav__group-label {
621
- --ui-_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));
622
- --ui-_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));
623
- --ui-_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));
624
- display: block;
625
- padding: var(--ui-space-1) var(--ui-space-2);
626
- margin: 0;
627
- font-size: var(--ui-_font-size);
628
- font-weight: var(--ui-_weight);
629
- letter-spacing: 0.05em;
630
- text-transform: uppercase;
631
- color: var(--ui-_color);
632
- }
633
- .ui-sidebar-nav__group-items {
634
- display: flex;
635
- flex-direction: column;
636
- gap: var(--ui-space-half);
637
- padding: 0;
638
- margin: 0;
639
- list-style: none;
640
- }
641
- .ui-sidebar-nav__subgroup-label {
642
- display: block;
643
- padding: var(--ui-space-1) var(--ui-space-2);
644
- margin: 0;
645
- margin-block-start: var(--ui-space-1);
646
- font-size: var(--ui-size-xs);
647
- font-weight: var(--ui-weight-medium);
648
- color: var(--ui-color-text-muted);
649
- }
650
- .ui-sidebar-nav__item {
651
- --ui-_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));
652
- --ui-_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));
653
- --ui-_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));
654
- --ui-_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));
655
- --ui-_bg: var(--ui-sidebar-nav-item-bg, transparent);
656
- --ui-_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));
657
- display: flex;
658
- align-items: center;
659
- gap: var(--ui-space-1);
660
- min-block-size: var(--ui-_height);
661
- padding-inline: var(--ui-_padding-inline);
662
- font-size: var(--ui-_font-size);
663
- font-weight: var(--ui-_weight, normal);
664
- text-decoration: none;
665
- color: var(--ui-_color);
666
- background: var(--ui-_bg);
667
- border-radius: var(--ui-_radius);
668
- cursor: pointer;
669
- transition: background var(--ui-duration-fast) var(--ui-easing-default), color var(--ui-duration-fast) var(--ui-easing-default);
670
- }
671
- .ui-sidebar-nav__item:hover {
672
- --ui-_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted));
673
- }
674
- .ui-sidebar-nav__item:visited {
675
- color: var(--ui-_color);
676
- }
677
- .ui-sidebar-nav__item:focus-visible {
678
- outline: 2px solid var(--ui-color-focus);
679
- outline-offset: -2px;
680
- }
681
- .ui-sidebar-nav__item--active {
682
- --ui-_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));
683
- --ui-_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary));
684
- --ui-_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium));
685
- }
686
- .ui-sidebar-nav__item--nested {
687
- --ui-_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));
688
- padding-inline-start: var(--ui-_padding-inline-start);
689
- }
690
- .ui-sidebar-nav__item--disabled {
691
- opacity: 0.5;
692
- cursor: not-allowed;
693
- pointer-events: none;
694
- }
695
- .ui-sidebar-nav__icon {
696
- display: flex;
697
- flex-shrink: 0;
698
- align-items: center;
699
- justify-content: center;
700
- block-size: var(--ui-size-md);
701
- inline-size: var(--ui-size-md);
702
- }
703
- .ui-sidebar-nav__label {
704
- flex: 1;
705
- min-inline-size: 0;
706
- overflow: hidden;
707
- text-overflow: ellipsis;
708
- white-space: nowrap;
709
- }
710
- .ui-sidebar-nav__badge {
711
- flex-shrink: 0;
712
- margin-inline-start: auto;
713
- }
714
- .ui-sidebar-nav--collapsed {
715
- --ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3));
716
- }
717
- .ui-sidebar-nav--collapsed .ui-sidebar-nav__label,
718
- .ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,
719
- .ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,
720
- .ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label {
721
- display: none;
722
- }
723
- .ui-sidebar-nav--collapsed .ui-sidebar-nav__item {
724
- justify-content: center;
725
- padding-inline: var(--ui-space-1);
726
- }
727
- }
728
- @layer primitives {
729
- .ui-main {
730
- margin-inline-start: var(--ui-sidebar-width, calc(var(--ui-unit) * 30));
731
- }
732
- /* When sidebar is on the end */
733
- .ui-main--sidebar-end {
734
- margin-inline-start: 0;
735
- margin-inline-end: var(--ui-sidebar-width, calc(var(--ui-unit) * 30));
736
- }
737
- /* No sidebar */
738
- .ui-main--full {
739
- margin-inline-start: 0;
740
- margin-inline-end: 0;
741
- }
742
- }
743
- @layer primitives {
744
- .ui-container {
745
- max-inline-size: var(--ui-container-width, calc(var(--ui-unit) * 120));
746
- padding-inline: var(--ui-space-4);
747
- }
748
- .ui-container--center {
749
- margin-inline: auto;
750
- }
751
- /* Size modifiers */
752
- .ui-container--sm {
753
- --ui-container-width: calc(var(--ui-unit) * 80);
754
- }
755
- .ui-container--md {
756
- --ui-container-width: calc(var(--ui-unit) * 100);
757
- }
758
- .ui-container--lg {
759
- --ui-container-width: calc(var(--ui-unit) * 120);
760
- }
761
- .ui-container--xl {
762
- --ui-container-width: calc(var(--ui-unit) * 160);
763
- }
764
- .ui-container--full {
765
- max-inline-size: none;
766
- }
767
- }
768
- /* 04. Components */
769
- @layer components.tokens {
770
- .ui-button {
771
- --ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));
772
- --ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));
773
- --ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));
774
- --ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));
775
- --ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));
776
- --ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));
777
- --ui-_bg: var(--ui-_accent);
778
- --ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);
779
- --ui-_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
780
- }
781
- .ui-button--sm {
782
- --ui-ctx-size: var(--ui-size-sm, 0.75rem);
783
- --ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));
784
- --ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem));
785
- }
786
- .ui-button--md {
787
- --ui-ctx-size: var(--ui-size-md, 1rem);
788
- --ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));
789
- --ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem));
790
- }
791
- .ui-button--lg {
792
- --ui-ctx-size: var(--ui-size-lg, 1.25rem);
793
- --ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));
794
- --ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));
795
- --ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem));
796
- }
797
- .ui-button--secondary {
798
- --ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
799
- --ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));
800
- --ui-_text: var(--ui-color-text, hsl(220, 10%, 10%));
801
- }
802
- .ui-button--ghost {
803
- --ui-_bg: transparent;
804
- --ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);
805
- --ui-_text: var(--ui-_accent);
806
- }
807
- .ui-button--outline {
808
- --ui-_bg: transparent;
809
- --ui-_bg-hover: var(--ui-_accent);
810
- --ui-_text: var(--ui-_accent);
811
- --ui-_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
812
- --ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor;
813
- }
814
- .ui-button--danger {
815
- --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
816
- }
817
- .ui-button--link {
818
- --ui-_bg: transparent;
819
- --ui-_bg-hover: transparent;
820
- --ui-_text: var(--ui-_accent);
821
- --ui-_text-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);
822
- --ui-_height: auto;
823
- --ui-_padding-x: 0;
824
- --ui-_radius: 0;
825
- }
826
- .ui-button--icon {
827
- --ui-_padding-x: 0;
828
- }
829
- .ui-button--radius-none {
830
- --ui-_radius: 0;
831
- }
832
- .ui-button--radius-sm {
833
- --ui-_radius: var(--ui-radius-sm, 0.25rem);
834
- }
835
- .ui-button--radius-lg {
836
- --ui-_radius: var(--ui-radius-lg, 1rem);
837
- }
838
- .ui-button--radius-full {
839
- --ui-_radius: 624.9375rem;
840
- }
841
- }
842
- @layer components.styles {
843
- .ui-button {
844
- display: inline-flex;
845
- align-items: center;
846
- justify-content: center;
847
- gap: var(--ui-space-1, 0.5rem);
848
- block-size: var(--ui-_height);
849
- padding-inline: var(--ui-_padding-x);
850
- margin: 0;
851
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
852
- font-size: var(--ui-_font-size);
853
- font-weight: var(--ui-_font-weight);
854
- line-height: 1;
855
- text-decoration: none;
856
- white-space: nowrap;
857
- color: var(--ui-_text);
858
- background: var(--ui-_bg);
859
- border: var(--ui-_border, none);
860
- border-radius: var(--ui-_radius);
861
- cursor: pointer;
862
- transition: background-color var(--ui-duration-base) var(--ui-ease-default), color var(--ui-duration-base) var(--ui-ease-default), transform var(--ui-duration-fast) var(--ui-ease-default);
863
- }
864
- .ui-button:hover, .ui-button--hover {
865
- color: var(--ui-_text-hover, var(--ui-_text));
866
- background: var(--ui-_bg-hover);
867
- }
868
- .ui-button:focus-visible, .ui-button--focus {
869
- outline: var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));
870
- outline-offset: var(--ui-border-width-md, 0.125rem);
871
- }
872
- .ui-button:active, .ui-button--active {
873
- transform: scale(0.98);
874
- }
875
- .ui-button:disabled {
876
- opacity: 0.5;
877
- cursor: not-allowed;
878
- }
879
- .ui-button:disabled:hover {
880
- background: var(--ui-_bg);
881
- transform: none;
882
- }
883
- .ui-button--icon {
884
- inline-size: var(--ui-_height);
885
- }
886
- .ui-button--block {
887
- inline-size: 100%;
888
- }
889
- .ui-button--link {
890
- text-decoration: underline;
891
- text-underline-offset: var(--ui-space-quarter);
892
- }
893
- .ui-button--link:hover {
894
- text-decoration-thickness: var(--ui-space-quarter);
895
- }
896
- .ui-button__icon {
897
- flex-shrink: 0;
898
- block-size: 1em;
899
- inline-size: 1em;
900
- }
901
- .ui-button__icon--start {
902
- order: -1;
903
- }
904
- .ui-button__icon--end {
905
- order: 1;
906
- }
907
- .ui-button--loading {
908
- position: relative;
909
- opacity: 0.7;
910
- pointer-events: none;
911
- }
912
- .ui-button--loading::after {
913
- content: "";
914
- position: absolute;
915
- block-size: 1em;
916
- inline-size: 1em;
917
- border: 2px solid currentcolor;
918
- border-radius: 50%;
919
- animation: button-spin 0.6s linear infinite;
920
- border-inline-end-color: transparent;
921
- }
922
- @keyframes button-spin {
923
- to {
924
- transform: rotate(360deg);
925
- }
926
- }
927
- }
928
- @layer components.tokens {
929
- .ui-button-group {
930
- --ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)));
931
- }
932
- }
933
- @layer components.styles {
934
- .ui-button-group {
935
- display: inline-flex;
936
- }
937
- .ui-button-group > .ui-button:not(:first-child, :last-child) {
938
- border-radius: 0;
939
- }
940
- .ui-button-group > .ui-button:first-child:not(:last-child) {
941
- border-start-end-radius: 0;
942
- border-end-end-radius: 0;
943
- }
944
- .ui-button-group > .ui-button:last-child:not(:first-child) {
945
- border-start-start-radius: 0;
946
- border-end-start-radius: 0;
947
- }
948
- .ui-button-group > .ui-button + .ui-button {
949
- margin-inline-start: calc(0.5rem / -8);
950
- }
951
- .ui-button-group > .ui-button:focus-visible {
952
- z-index: 1;
953
- }
954
- .ui-button-group--vertical {
955
- flex-direction: column;
956
- }
957
- .ui-button-group--vertical > .ui-button:not(:first-child, :last-child) {
958
- border-radius: 0;
959
- }
960
- .ui-button-group--vertical > .ui-button:first-child:not(:last-child) {
961
- border-end-start-radius: 0;
962
- border-end-end-radius: 0;
963
- }
964
- .ui-button-group--vertical > .ui-button:last-child:not(:first-child) {
965
- border-start-start-radius: 0;
966
- border-start-end-radius: 0;
967
- }
968
- .ui-button-group--vertical > .ui-button + .ui-button {
969
- margin-block-start: calc(0.5rem / -8);
970
- margin-inline-start: 0;
971
- }
972
- .ui-button-group--attached > .ui-button {
973
- border-inline-end-width: 0;
974
- }
975
- .ui-button-group--attached > .ui-button:last-child {
976
- border-inline-end-width: 1px;
977
- }
978
- .ui-button-group--attached > .ui-button + .ui-button {
979
- margin-inline-start: 0;
980
- }
981
- }
982
- @layer components.tokens {
983
- .ui-avatar {
984
- --ui-_size: var(--ui-avatar-size, calc(0.5rem * 5));
985
- --ui-_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
986
- --ui-_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
987
- --ui-_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));
988
- --ui-_radius: var(--ui-avatar-radius, 50%);
989
- }
990
- .ui-avatar--xs {
991
- --ui-_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));
992
- --ui-_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem));
993
- }
994
- .ui-avatar--sm {
995
- --ui-_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));
996
- --ui-_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem));
997
- }
998
- .ui-avatar--lg {
999
- --ui-_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));
1000
- --ui-_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem));
1001
- }
1002
- .ui-avatar--xl {
1003
- --ui-_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));
1004
- --ui-_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem));
1005
- }
1006
- .ui-avatar--square {
1007
- --ui-_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem));
1008
- }
1009
- }
1010
- @layer components.styles {
1011
- .ui-avatar {
1012
- display: inline-flex;
1013
- flex-shrink: 0;
1014
- align-items: center;
1015
- justify-content: center;
1016
- position: relative;
1017
- block-size: var(--ui-_size);
1018
- inline-size: var(--ui-_size);
1019
- overflow: hidden;
1020
- font-size: var(--ui-_font-size);
1021
- font-weight: var(--ui-weight-medium, 500);
1022
- line-height: 1;
1023
- text-transform: uppercase;
1024
- color: var(--ui-_color);
1025
- background: var(--ui-_bg);
1026
- border-radius: var(--ui-_radius);
1027
- }
1028
- .ui-avatar__image {
1029
- position: absolute;
1030
- inset: 0;
1031
- block-size: 100%;
1032
- inline-size: 100%;
1033
- object-fit: cover;
1034
- border-radius: inherit;
1035
- }
1036
- .ui-avatar__fallback {
1037
- display: flex;
1038
- align-items: center;
1039
- justify-content: center;
1040
- block-size: 100%;
1041
- inline-size: 100%;
1042
- user-select: none;
1043
- }
1044
- .ui-avatar-group {
1045
- display: flex;
1046
- flex-direction: row-reverse;
1047
- justify-content: flex-end;
1048
- }
1049
- .ui-avatar-group > .ui-avatar {
1050
- margin-inline-start: calc(var(--ui-_size) * -0.25);
1051
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%));
1052
- }
1053
- .ui-avatar-group > .ui-avatar:last-child {
1054
- margin-inline-start: 0;
1055
- }
1056
- }
1057
- @layer components.tokens {
1058
- .ui-badge {
1059
- --ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
1060
- --ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));
1061
- --ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));
1062
- --ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));
1063
- --ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));
1064
- --ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));
1065
- --ui-_bg: var(--ui-_accent);
1066
- --ui-_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)));
1067
- }
1068
- .ui-badge--sm {
1069
- --ui-_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));
1070
- --ui-_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));
1071
- --ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85));
1072
- }
1073
- .ui-badge--primary {
1074
- --ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
1075
- --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
1076
- }
1077
- .ui-badge--success {
1078
- --ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
1079
- --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
1080
- }
1081
- .ui-badge--warning {
1082
- --ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
1083
- --ui-_text: var(--ui-color-text, hsl(220, 10%, 10%));
1084
- }
1085
- .ui-badge--danger {
1086
- --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
1087
- --ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%));
1088
- }
1089
- }
1090
- @layer components.styles {
1091
- .ui-badge {
1092
- display: inline-flex;
1093
- align-items: center;
1094
- justify-content: center;
1095
- block-size: var(--ui-_height);
1096
- padding-inline: var(--ui-_padding-x);
1097
- font-size: var(--ui-_font-size);
1098
- font-weight: var(--ui-_font-weight);
1099
- line-height: 1;
1100
- white-space: nowrap;
1101
- color: var(--ui-_text);
1102
- background: var(--ui-_bg);
1103
- border-radius: var(--ui-_radius);
1104
- }
1105
- }
1106
- @layer components.tokens {
1107
- .ui-card {
1108
- --ui-_padding: var(--ui-card-padding, var(--ui-space-4));
1109
- --ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
1110
- --ui-_bg: var(--ui-card-bg, var(--ui-color-bg));
1111
- --ui-_border-color: var(--ui-card-border-color, var(--ui-color-border));
1112
- --ui-_radius: var(--ui-card-radius, var(--ui-radius-md));
1113
- }
1114
- .ui-card--subtle {
1115
- --ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle));
1116
- }
1117
- .ui-card--muted {
1118
- --ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted));
1119
- }
1120
- .ui-card--sm {
1121
- --ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2));
1122
- }
1123
- .ui-card--lg {
1124
- --ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6));
1125
- }
1126
- .ui-card--flush {
1127
- --ui-_padding: 0;
1128
- --ui-_border-width: 0;
1129
- }
1130
- }
1131
- @layer components.styles {
1132
- .ui-card {
1133
- border: var(--ui-_border-width) solid var(--ui-_border-color);
1134
- border-radius: var(--ui-_radius);
1135
- background: var(--ui-_bg);
1136
- padding: calc(var(--ui-_padding) - var(--ui-_border-width));
1137
- line-height: var(--ui-row-1);
1138
- }
1139
- }
1140
- @layer components.tokens {
1141
- .ui-data-list {
1142
- --ui-_gap: var(--ui-data-list-gap, calc(0.5rem * 2));
1143
- --ui-_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));
1144
- --ui-_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
1145
- --ui-_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1146
- }
1147
- }
1148
- @layer components.styles {
1149
- .ui-data-list {
1150
- display: flex;
1151
- flex-direction: column;
1152
- gap: var(--ui-_gap);
1153
- margin: 0;
1154
- line-height: var(--ui-row-1, 1rem);
1155
- }
1156
- .ui-data-list__item {
1157
- display: flex;
1158
- flex-direction: column;
1159
- gap: var(--ui-_item-gap);
1160
- }
1161
- .ui-data-list__label {
1162
- font-size: var(--ui-font-size-sm, 0.875rem);
1163
- font-weight: var(--ui-weight-medium, 500);
1164
- line-height: var(--ui-row-1, 1rem);
1165
- color: var(--ui-_label-color);
1166
- }
1167
- .ui-data-list__value {
1168
- margin: 0;
1169
- line-height: var(--ui-row-1, 1rem);
1170
- color: var(--ui-_value-color);
1171
- }
1172
- .ui-data-list--horizontal .ui-data-list__item {
1173
- flex-direction: row;
1174
- align-items: baseline;
1175
- justify-content: space-between;
1176
- gap: calc(0.5rem * 2);
1177
- }
1178
- .ui-data-list--horizontal .ui-data-list__label {
1179
- flex-shrink: 0;
1180
- }
1181
- .ui-data-list--horizontal .ui-data-list__value {
1182
- text-align: end;
1183
- }
1184
- .ui-data-list--divided .ui-data-list__item {
1185
- padding-block-end: calc(var(--ui-_gap) - var(--ui-border-width-sm, 0.0625rem));
1186
- border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%));
1187
- }
1188
- .ui-data-list--divided .ui-data-list__item:last-child {
1189
- padding-block-end: 0;
1190
- border-block-end: none;
1191
- }
1192
- .ui-data-list--striped .ui-data-list__item:nth-child(odd) {
1193
- padding: calc(0.5rem * 1);
1194
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
1195
- border-radius: var(--ui-radius-sm, 0.25rem);
1196
- }
1197
- .ui-data-list--sm {
1198
- --ui-_gap: calc(0.5rem * 1);
1199
- --ui-_item-gap: 0;
1200
- font-size: var(--ui-font-size-sm, 0.875rem);
1201
- }
1202
- .ui-data-list--lg {
1203
- --ui-_gap: calc(0.5rem * 3);
1204
- --ui-_item-gap: calc(0.5rem * 1);
1205
- font-size: var(--ui-font-size-lg, 1.25rem);
1206
- }
1207
- }
1208
- @layer components.tokens {
1209
- .ui-icon {
1210
- --ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));
1211
- --ui-_stroke: var(--ui-icon-stroke, 2);
1212
- }
1213
- .ui-icon--xs {
1214
- --ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem));
1215
- }
1216
- .ui-icon--sm {
1217
- --ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem));
1218
- }
1219
- .ui-icon--md {
1220
- --ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem));
1221
- }
1222
- .ui-icon--lg {
1223
- --ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem));
1224
- }
1225
- .ui-icon--xl {
1226
- --ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem));
1227
- }
1228
- .ui-icon--stroke-thin {
1229
- --ui-_stroke: var(--ui-icon-stroke-thin, 1);
1230
- }
1231
- .ui-icon--stroke-thick {
1232
- --ui-_stroke: var(--ui-icon-stroke-thick, 2.5);
1233
- }
1234
- }
1235
- @layer components.styles {
1236
- .ui-icon {
1237
- display: inline-block;
1238
- flex-shrink: 0;
1239
- block-size: var(--ui-_size);
1240
- inline-size: var(--ui-_size);
1241
- vertical-align: middle;
1242
- color: currentcolor;
1243
- fill: none;
1244
- stroke: currentcolor;
1245
- stroke-width: var(--ui-_stroke);
1246
- stroke-linecap: round;
1247
- stroke-linejoin: round;
1248
- }
1249
- .ui-icon--filled {
1250
- fill: currentcolor;
1251
- stroke: none;
1252
- }
1253
- .ui-icon--spin {
1254
- animation: icon-spin 1s linear infinite;
1255
- }
1256
- @keyframes icon-spin {
1257
- to {
1258
- transform: rotate(360deg);
1259
- }
1260
- }
1261
- }
1262
- @layer components.tokens {
1263
- .ui-status {
1264
- --ui-_size: var(--ui-status-size, calc(0.5rem * 1));
1265
- --ui-_color: var(--ui-status-color, var(--ui-color-text-muted));
1266
- --ui-_gap: var(--ui-status-gap, calc(0.5rem * 1));
1267
- }
1268
- .ui-status--success {
1269
- --ui-_color: var(--ui-color-success);
1270
- }
1271
- .ui-status--warning {
1272
- --ui-_color: var(--ui-color-warning);
1273
- }
1274
- .ui-status--danger {
1275
- --ui-_color: var(--ui-color-danger);
1276
- }
1277
- .ui-status--info {
1278
- --ui-_color: var(--ui-color-primary);
1279
- }
1280
- }
1281
- @layer components.styles {
1282
- .ui-status {
1283
- display: inline-flex;
1284
- align-items: center;
1285
- gap: var(--ui-_gap);
1286
- }
1287
- .ui-status__dot {
1288
- flex-shrink: 0;
1289
- block-size: var(--ui-_size);
1290
- inline-size: var(--ui-_size);
1291
- background: var(--ui-_color);
1292
- border-radius: 50%;
1293
- }
1294
- .ui-status--pulse .ui-status__dot {
1295
- position: relative;
1296
- }
1297
- .ui-status--pulse .ui-status__dot::before {
1298
- content: "";
1299
- position: absolute;
1300
- inset: 0;
1301
- background: var(--ui-_color);
1302
- border-radius: 50%;
1303
- animation: status-pulse 2s infinite;
1304
- }
1305
- @keyframes status-pulse {
1306
- 0% {
1307
- opacity: 1;
1308
- transform: scale(1);
1309
- }
1310
- 100% {
1311
- opacity: 0;
1312
- transform: scale(2.5);
1313
- }
1314
- }
1315
- .ui-status--sm {
1316
- --ui-_size: calc(0.5rem * 0.75);
1317
- --ui-_gap: calc(0.5rem * 0.75);
1318
- }
1319
- .ui-status--lg {
1320
- --ui-_size: calc(0.5rem * 1.5);
1321
- --ui-_gap: calc(0.5rem * 1.5);
1322
- }
1323
- }
1324
- @layer components.tokens {
1325
- .ui-table {
1326
- --ui-_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));
1327
- --ui-_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
1328
- --ui-_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
1329
- --ui-_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));
1330
- --ui-_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem));
1331
- }
1332
- .ui-table--compact {
1333
- --ui-_cell-padding-y: var(--ui-space-0, 0.25rem);
1334
- --ui-_cell-padding-x: var(--ui-space-1, 0.5rem);
1335
- --ui-_font-size: var(--ui-font-size-xs, 0.75rem);
1336
- }
1337
- }
1338
- @layer components.styles {
1339
- .ui-table {
1340
- inline-size: 100%;
1341
- font-size: var(--ui-_font-size);
1342
- border-collapse: separate;
1343
- border-spacing: 0;
1344
- }
1345
- .ui-table th,
1346
- .ui-table td {
1347
- padding-block-start: var(--ui-_cell-padding-y);
1348
- padding-block-end: calc(var(--ui-_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));
1349
- padding-inline: var(--ui-_cell-padding-x);
1350
- line-height: calc(var(--ui-unit, 0.5rem) * 3);
1351
- text-align: start;
1352
- border-block-end: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
1353
- }
1354
- .ui-table th {
1355
- font-weight: var(--ui-weight-medium, 500);
1356
- background: var(--ui-_header-bg);
1357
- }
1358
- .ui-table--striped tbody tr:nth-child(odd) {
1359
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
1360
- }
1361
- .ui-table--striped th {
1362
- background: var(--ui-color-bg-muted, hsl(220, 10%, 90%));
1363
- }
1364
- }
1365
- @layer components.tokens {
1366
- .ui-tag {
1367
- --ui-_height: var(--ui-tag-height, calc(0.5rem * 3));
1368
- --ui-_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));
1369
- --ui-_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));
1370
- --ui-_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));
1371
- --ui-_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));
1372
- --ui-_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
1373
- --ui-_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1374
- }
1375
- .ui-tag--sm {
1376
- --ui-_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));
1377
- --ui-_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));
1378
- --ui-_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem));
1379
- }
1380
- .ui-tag--primary {
1381
- --ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));
1382
- --ui-_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1383
- }
1384
- .ui-tag--success {
1385
- --ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));
1386
- --ui-_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1387
- }
1388
- .ui-tag--warning {
1389
- --ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));
1390
- --ui-_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1391
- }
1392
- .ui-tag--danger {
1393
- --ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));
1394
- --ui-_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1395
- }
1396
- }
1397
- @layer components.styles {
1398
- .ui-tag {
1399
- display: inline-flex;
1400
- align-items: center;
1401
- gap: var(--ui-_gap);
1402
- block-size: var(--ui-_height);
1403
- padding-inline: var(--ui-_padding-x);
1404
- font-size: var(--ui-_font-size);
1405
- font-weight: var(--ui-weight-medium, 500);
1406
- line-height: 1;
1407
- white-space: nowrap;
1408
- color: var(--ui-_color);
1409
- background: var(--ui-_bg);
1410
- border-radius: var(--ui-_radius);
1411
- }
1412
- .ui-tag:disabled, .ui-tag[aria-disabled=true] {
1413
- opacity: 0.5;
1414
- cursor: not-allowed;
1415
- }
1416
- .ui-tag__remove {
1417
- display: inline-flex;
1418
- flex-shrink: 0;
1419
- align-items: center;
1420
- justify-content: center;
1421
- padding: 0;
1422
- margin-inline-start: calc(var(--ui-_gap) * -0.5);
1423
- color: currentcolor;
1424
- background: none;
1425
- border: none;
1426
- opacity: 0.7;
1427
- cursor: pointer;
1428
- }
1429
- .ui-tag__remove:hover {
1430
- opacity: 1;
1431
- }
1432
- .ui-tag-group {
1433
- display: flex;
1434
- flex-wrap: wrap;
1435
- gap: calc(0.5rem * 0.5);
1436
- }
1437
- }
1438
- @layer components.tokens {
1439
- .ui-accordion {
1440
- --ui-_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
1441
- --ui-_border-width: var(--ui-accordion-border-width, 1px);
1442
- --ui-_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)));
1443
- }
1444
- }
1445
- @layer components.styles {
1446
- .ui-accordion {
1447
- border-radius: var(--ui-_radius);
1448
- outline: var(--ui-_border-width) solid var(--ui-_border-color);
1449
- outline-offset: calc(var(--ui-_border-width) * -1);
1450
- }
1451
- .ui-accordion > .ui-disclosure {
1452
- --ui-_border-width: 0;
1453
- border: none;
1454
- border-radius: 0;
1455
- }
1456
- .ui-accordion > .ui-disclosure + .ui-disclosure {
1457
- border-block-start: 1px solid var(--ui-_border-color);
1458
- }
1459
- .ui-accordion > .ui-disclosure:first-child .ui-disclosure__trigger {
1460
- border-start-start-radius: var(--ui-_radius);
1461
- border-start-end-radius: var(--ui-_radius);
1462
- }
1463
- .ui-accordion > .ui-disclosure:last-child .ui-disclosure__trigger {
1464
- border-end-start-radius: var(--ui-_radius);
1465
- border-end-end-radius: var(--ui-_radius);
1466
- }
1467
- .ui-accordion > .ui-disclosure:last-child .ui-disclosure__content {
1468
- border-end-start-radius: var(--ui-_radius);
1469
- border-end-end-radius: var(--ui-_radius);
1470
- }
1471
- .ui-accordion--borderless {
1472
- border: none;
1473
- }
1474
- .ui-accordion--borderless > .ui-disclosure + .ui-disclosure {
1475
- border-block-start: none;
1476
- }
1477
- .ui-accordion--separated {
1478
- display: flex;
1479
- flex-direction: column;
1480
- gap: calc(0.5rem * 1);
1481
- border: none;
1482
- }
1483
- .ui-accordion--separated > .ui-disclosure {
1484
- border: 1px solid var(--ui-_border-color);
1485
- border-radius: var(--ui-_radius);
1486
- }
1487
- .ui-accordion--separated > .ui-disclosure + .ui-disclosure {
1488
- border-block-start: 1px solid var(--ui-_border-color);
1489
- }
1490
- }
1491
- @layer components.tokens {
1492
- .ui-disclosure {
1493
- --ui-_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
1494
- --ui-_border-width: var(--ui-disclosure-border-width, 1px);
1495
- --ui-_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(0.5rem * 1)));
1496
- --ui-_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(1rem * 3)));
1497
- --ui-_padding-x: var(--ui-disclosure-padding-x, calc(0.5rem * 2));
1498
- --ui-_padding-y: var(--ui-disclosure-padding-y, calc(0.5rem * 2));
1499
- }
1500
- }
1501
- @layer components.styles {
1502
- .ui-disclosure {
1503
- box-sizing: border-box;
1504
- border-radius: var(--ui-_radius);
1505
- outline: var(--ui-_border-width) solid var(--ui-_border-color);
1506
- outline-offset: calc(var(--ui-_border-width) * -1);
1507
- }
1508
- .ui-disclosure:not([open]) {
1509
- block-size: var(--ui-_trigger-height);
1510
- }
1511
- .ui-disclosure__trigger {
1512
- display: flex;
1513
- align-items: center;
1514
- justify-content: space-between;
1515
- gap: calc(0.5rem * 2);
1516
- block-size: var(--ui-_trigger-height);
1517
- inline-size: 100%;
1518
- padding-inline: var(--ui-_padding-x);
1519
- font-weight: var(--ui-weight-medium, 500);
1520
- line-height: 1;
1521
- text-align: start;
1522
- cursor: pointer;
1523
- list-style: none;
1524
- }
1525
- .ui-disclosure__trigger::-webkit-details-marker {
1526
- display: none;
1527
- }
1528
- .ui-disclosure__trigger::marker {
1529
- display: none;
1530
- }
1531
- .ui-disclosure__trigger:hover {
1532
- background: var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.02));
1533
- }
1534
- .ui-disclosure__icon {
1535
- flex-shrink: 0;
1536
- transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
1537
- }
1538
- .ui-disclosure[open] .ui-disclosure__icon {
1539
- transform: rotate(180deg);
1540
- }
1541
- .ui-disclosure__content {
1542
- padding: 0 var(--ui-_padding-x) var(--ui-_padding-y);
1543
- }
1544
- .ui-disclosure--animate .ui-disclosure__content {
1545
- animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
1546
- }
1547
- @keyframes disclosure-open {
1548
- from {
1549
- opacity: 0;
1550
- transform: translateY(calc(0.5rem * -1));
1551
- }
1552
- to {
1553
- opacity: 1;
1554
- transform: translateY(0);
1555
- }
1556
- }
1557
- .ui-disclosure--borderless {
1558
- --ui-_border-width: 0;
1559
- border: none;
1560
- border-radius: 0;
1561
- }
1562
- .ui-disclosure--flush .ui-disclosure__trigger {
1563
- padding-inline: 0;
1564
- }
1565
- .ui-disclosure--flush .ui-disclosure__content {
1566
- padding-inline: 0;
1567
- }
1568
- }
1569
- @layer components.tokens {
1570
- .ui-alert {
1571
- --ui-_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));
1572
- --ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));
1573
- --ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));
1574
- --ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));
1575
- --ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));
1576
- --ui-_bg: color-mix(in oklch, var(--ui-_accent) 8%, white);
1577
- --ui-_border-color: var(--ui-_accent);
1578
- --ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));
1579
- --ui-_icon-color: var(--ui-_accent);
1580
- }
1581
- .ui-alert--info {
1582
- --ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));
1583
- }
1584
- .ui-alert--success {
1585
- --ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));
1586
- }
1587
- .ui-alert--warning {
1588
- --ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));
1589
- }
1590
- .ui-alert--danger {
1591
- --ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));
1592
- }
1593
- }
1594
- @layer components.styles {
1595
- .ui-alert {
1596
- display: flex;
1597
- align-items: flex-start;
1598
- gap: var(--ui-_gap);
1599
- padding: calc(var(--ui-_padding) - var(--ui-_border-width));
1600
- padding-inline: var(--ui-_padding);
1601
- color: var(--ui-_color);
1602
- background: var(--ui-_bg);
1603
- border: var(--ui-_border-width) solid var(--ui-_border-color);
1604
- border-radius: var(--ui-_radius);
1605
- border-inline-start-width: calc(0.5rem * 0.5);
1606
- }
1607
- .ui-alert__icon {
1608
- flex-shrink: 0;
1609
- color: var(--ui-_icon-color);
1610
- }
1611
- .ui-alert__content {
1612
- flex: 1;
1613
- min-inline-size: 0;
1614
- }
1615
- .ui-alert__title {
1616
- margin: 0;
1617
- font-weight: var(--ui-weight-medium, 500);
1618
- line-height: var(--ui-row-1, 1rem);
1619
- }
1620
- .ui-alert__description {
1621
- margin: 0;
1622
- margin-block-start: calc(0.5rem * 1);
1623
- font-size: var(--ui-font-size-sm, 0.875rem);
1624
- line-height: var(--ui-row-1, 1rem);
1625
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1626
- }
1627
- .ui-alert__close {
1628
- flex-shrink: 0;
1629
- align-self: flex-start;
1630
- padding: 0;
1631
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1632
- background: none;
1633
- border: none;
1634
- cursor: pointer;
1635
- }
1636
- .ui-alert__close:hover {
1637
- color: var(--ui-color-text, hsl(220, 10%, 10%));
1638
- }
1639
- }
1640
- @layer components.tokens {
1641
- .ui-progress {
1642
- --ui-_height: var(--ui-progress-height, calc(0.5rem * 1));
1643
- --ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
1644
- --ui-_fill: var(--ui-progress-fill, var(--ui-color-primary));
1645
- --ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px));
1646
- }
1647
- .ui-progress--sm {
1648
- --ui-_height: calc(0.5rem * 1);
1649
- }
1650
- .ui-progress--lg {
1651
- --ui-_height: calc(0.5rem * 2);
1652
- }
1653
- }
1654
- @layer components.styles {
1655
- .ui-progress {
1656
- position: relative;
1657
- block-size: var(--ui-_height);
1658
- overflow: hidden;
1659
- background: var(--ui-_bg);
1660
- border-radius: var(--ui-_radius);
1661
- }
1662
- .ui-progress__bar {
1663
- block-size: 100%;
1664
- background: var(--ui-_fill);
1665
- border-radius: var(--ui-_radius);
1666
- transition: inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
1667
- }
1668
- .ui-progress--indeterminate .ui-progress__bar {
1669
- inline-size: 30%;
1670
- animation: progress-indeterminate 1.5s infinite ease-in-out;
1671
- }
1672
- @keyframes progress-indeterminate {
1673
- 0% {
1674
- transform: translateX(-100%);
1675
- }
1676
- 100% {
1677
- transform: translateX(400%);
1678
- }
1679
- }
1680
- .ui-progress--striped .ui-progress__bar {
1681
- background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
1682
- background-size: 0.5rem 0.5rem;
1683
- }
1684
- .ui-progress--animated .ui-progress__bar {
1685
- animation: progress-stripes 1s linear infinite;
1686
- }
1687
- @keyframes progress-stripes {
1688
- from {
1689
- background-position: 0.5rem 0;
1690
- }
1691
- to {
1692
- background-position: 0 0;
1693
- }
1694
- }
1695
- .ui-progress--success {
1696
- --ui-_fill: var(--ui-color-success);
1697
- }
1698
- .ui-progress--warning {
1699
- --ui-_fill: var(--ui-color-warning);
1700
- }
1701
- .ui-progress--danger {
1702
- --ui-_fill: var(--ui-color-danger);
1703
- }
1704
- }
1705
- @layer components.tokens {
1706
- .ui-skeleton {
1707
- --ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
1708
- --ui-_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
1709
- --ui-_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
1710
- }
1711
- }
1712
- @layer components.styles {
1713
- .ui-skeleton {
1714
- display: block;
1715
- position: relative;
1716
- overflow: hidden;
1717
- background: var(--ui-_bg);
1718
- border-radius: var(--ui-_radius);
1719
- }
1720
- .ui-skeleton::after {
1721
- content: "";
1722
- position: absolute;
1723
- inset: 0;
1724
- background: linear-gradient(90deg, transparent 0%, var(--ui-_shimmer) 50%, transparent 100%);
1725
- animation: skeleton-shimmer 1.5s infinite;
1726
- transform: translateX(-100%);
1727
- }
1728
- @keyframes skeleton-shimmer {
1729
- 100% {
1730
- transform: translateX(100%);
1731
- }
1732
- }
1733
- .ui-skeleton--text {
1734
- block-size: calc(0.5rem * 2);
1735
- inline-size: 100%;
1736
- }
1737
- .ui-skeleton--heading {
1738
- block-size: calc(0.5rem * 3);
1739
- inline-size: 60%;
1740
- }
1741
- .ui-skeleton--circle {
1742
- block-size: calc(0.5rem * 5);
1743
- inline-size: calc(0.5rem * 5);
1744
- border-radius: 50%;
1745
- }
1746
- .ui-skeleton--rect {
1747
- block-size: calc(0.5rem * 20);
1748
- inline-size: 100%;
1749
- }
1750
- .ui-skeleton--static::after {
1751
- animation: none;
1752
- }
1753
- .ui-skeleton--pulse {
1754
- animation: skeleton-pulse 1.5s infinite ease-in-out;
1755
- }
1756
- .ui-skeleton--pulse::after {
1757
- display: none;
1758
- }
1759
- @keyframes skeleton-pulse {
1760
- 0%, 100% {
1761
- opacity: 1;
1762
- }
1763
- 50% {
1764
- opacity: 0.5;
1765
- }
1766
- }
1767
- }
1768
- @layer components.tokens {
1769
- .ui-spinner {
1770
- --ui-_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));
1771
- --ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
1772
- --ui-_color: var(--ui-spinner-color, currentcolor);
1773
- --ui-_track-color: var(--ui-spinner-track-color, transparent);
1774
- --ui-_duration: var(--ui-spinner-duration, 750ms);
1775
- }
1776
- .ui-spinner--xs {
1777
- --ui-_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));
1778
- --ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
1779
- }
1780
- .ui-spinner--sm {
1781
- --ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));
1782
- --ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
1783
- }
1784
- .ui-spinner--lg {
1785
- --ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));
1786
- --ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
1787
- }
1788
- .ui-spinner--xl {
1789
- --ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));
1790
- --ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
1791
- }
1792
- }
1793
- @layer components.styles {
1794
- .ui-spinner {
1795
- display: inline-block;
1796
- flex-shrink: 0;
1797
- box-sizing: border-box;
1798
- block-size: var(--ui-_size);
1799
- inline-size: var(--ui-_size);
1800
- vertical-align: middle;
1801
- border: var(--ui-_border-width) solid var(--ui-_track-color);
1802
- border-radius: 50%;
1803
- border-block-start-color: var(--ui-_color);
1804
- animation: spinner-rotate var(--ui-_duration) linear infinite;
1805
- }
1806
- @keyframes spinner-rotate {
1807
- to {
1808
- transform: rotate(360deg);
1809
- }
1810
- }
1811
- }
1812
- @layer components.tokens {
1813
- .ui-toast-viewport {
1814
- --ui-_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));
1815
- --ui-_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));
1816
- --ui-_max-width: var(--ui-toast-viewport-max-width, 420px);
1817
- }
1818
- .ui-toast {
1819
- --ui-_padding: var(--ui-toast-padding, calc(0.5rem * 2));
1820
- --ui-_gap: var(--ui-toast-gap, calc(0.5rem * 1));
1821
- --ui-_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));
1822
- --ui-_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
1823
- --ui-_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
1824
- --ui-_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg));
1825
- }
1826
- .ui-toast--success {
1827
- --ui-_border-color: var(--ui-color-success);
1828
- }
1829
- .ui-toast--warning {
1830
- --ui-_border-color: var(--ui-color-warning);
1831
- }
1832
- .ui-toast--danger {
1833
- --ui-_border-color: var(--ui-color-danger);
1834
- }
1835
- .ui-toast--info {
1836
- --ui-_border-color: var(--ui-color-primary);
1837
- }
1838
- }
1839
- @layer components.styles {
1840
- .ui-toast-viewport {
1841
- display: flex;
1842
- flex-direction: column;
1843
- gap: var(--ui-_gap);
1844
- position: fixed;
1845
- z-index: var(--ui-z-toast, 1000);
1846
- max-inline-size: var(--ui-_max-width);
1847
- padding: var(--ui-_padding);
1848
- pointer-events: none;
1849
- list-style: none;
1850
- }
1851
- .ui-toast-viewport--top-end {
1852
- inset-block-start: 0;
1853
- inset-inline-end: 0;
1854
- }
1855
- .ui-toast-viewport--top-start {
1856
- inset-block-start: 0;
1857
- inset-inline-start: 0;
1858
- }
1859
- .ui-toast-viewport--bottom-end {
1860
- inset-block-end: 0;
1861
- inset-inline-end: 0;
1862
- }
1863
- .ui-toast-viewport--bottom-start {
1864
- inset-block-end: 0;
1865
- inset-inline-start: 0;
1866
- }
1867
- .ui-toast-viewport--top-center {
1868
- inset-block-start: 0;
1869
- inset-inline-start: 50%;
1870
- transform: translateX(-50%);
1871
- }
1872
- .ui-toast-viewport--bottom-center {
1873
- inset-block-end: 0;
1874
- inset-inline-start: 50%;
1875
- transform: translateX(-50%);
1876
- }
1877
- .ui-toast {
1878
- display: flex;
1879
- align-items: flex-start;
1880
- gap: var(--ui-_gap);
1881
- padding: var(--ui-_padding);
1882
- background: var(--ui-_bg);
1883
- border-radius: var(--ui-_radius);
1884
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
1885
- box-shadow: var(--ui-_shadow);
1886
- pointer-events: auto;
1887
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
1888
- }
1889
- .ui-toast__icon {
1890
- flex-shrink: 0;
1891
- }
1892
- .ui-toast__content {
1893
- flex: 1;
1894
- min-inline-size: 0;
1895
- }
1896
- .ui-toast__title {
1897
- margin: 0;
1898
- font-weight: var(--ui-weight-medium, 500);
1899
- line-height: var(--ui-row-1, 1rem);
1900
- }
1901
- .ui-toast__description {
1902
- margin: 0;
1903
- font-size: var(--ui-font-size-sm, 0.875rem);
1904
- line-height: var(--ui-row-1, 1rem);
1905
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1906
- }
1907
- .ui-toast__action {
1908
- flex-shrink: 0;
1909
- }
1910
- .ui-toast__close {
1911
- display: inline-flex;
1912
- flex-shrink: 0;
1913
- align-items: center;
1914
- justify-content: center;
1915
- block-size: var(--ui-row-1, 1rem);
1916
- inline-size: var(--ui-row-1, 1rem);
1917
- padding: 0;
1918
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
1919
- background: none;
1920
- border: none;
1921
- cursor: pointer;
1922
- }
1923
- .ui-toast__close:hover {
1924
- color: var(--ui-color-text, hsl(220, 10%, 10%));
1925
- }
1926
- .ui-toast[data-state=open] {
1927
- animation: toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
1928
- }
1929
- .ui-toast[data-state=closed] {
1930
- animation: toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
1931
- }
1932
- @keyframes toast-slide-in {
1933
- from {
1934
- opacity: 0;
1935
- transform: translateX(100%);
1936
- }
1937
- }
1938
- @keyframes toast-slide-out {
1939
- to {
1940
- opacity: 0;
1941
- transform: translateX(100%);
1942
- }
1943
- }
1944
- }
1945
- @layer components.tokens {
1946
- .ui-checkbox {
1947
- --ui-_size: var(--ui-checkbox-size, calc(0.5rem * 2));
1948
- --ui-_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));
1949
- --ui-_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
1950
- --ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
1951
- --ui-_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
1952
- --ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
1953
- --ui-_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
1954
- }
1955
- .ui-checkbox--lg {
1956
- --ui-_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3));
1957
- }
1958
- .ui-checkbox--error {
1959
- --ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
1960
- --ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
1961
- }
1962
- }
1963
- @layer components.styles {
1964
- .ui-checkbox {
1965
- display: inline-flex;
1966
- flex-shrink: 0;
1967
- align-items: center;
1968
- justify-content: center;
1969
- block-size: var(--ui-_size);
1970
- inline-size: var(--ui-_size);
1971
- margin: 0;
1972
- vertical-align: middle;
1973
- background: var(--ui-_bg);
1974
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
1975
- border-radius: var(--ui-_radius);
1976
- cursor: pointer;
1977
- appearance: none;
1978
- transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
1979
- }
1980
- .ui-checkbox::before {
1981
- content: "";
1982
- block-size: 65%;
1983
- inline-size: 65%;
1984
- background-color: var(--ui-_check-color);
1985
- opacity: 0;
1986
- clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
1987
- transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
1988
- }
1989
- .ui-checkbox:hover:not(:disabled) {
1990
- border-color: var(--ui-_border-color-focus);
1991
- }
1992
- .ui-checkbox:focus-visible {
1993
- border-color: var(--ui-_border-color-focus);
1994
- outline: none;
1995
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
1996
- }
1997
- .ui-checkbox:checked {
1998
- background: var(--ui-_bg-checked);
1999
- border-color: var(--ui-_bg-checked);
2000
- }
2001
- .ui-checkbox:checked::before {
2002
- opacity: 1;
2003
- }
2004
- .ui-checkbox:indeterminate {
2005
- background: var(--ui-_bg-checked);
2006
- border-color: var(--ui-_bg-checked);
2007
- }
2008
- .ui-checkbox:indeterminate::before {
2009
- opacity: 1;
2010
- clip-path: polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%);
2011
- }
2012
- .ui-checkbox:disabled {
2013
- opacity: 0.5;
2014
- cursor: not-allowed;
2015
- }
2016
- }
2017
- @layer components.tokens {
2018
- .ui-field {
2019
- --ui-_gap: var(--ui-field-gap, 0);
2020
- }
2021
- }
2022
- @layer components.styles {
2023
- .ui-field {
2024
- display: flex;
2025
- flex-direction: column;
2026
- gap: var(--ui-_gap);
2027
- }
2028
- .ui-field__control {
2029
- display: flex;
2030
- flex-direction: column;
2031
- }
2032
- .ui-field--horizontal {
2033
- flex-direction: row;
2034
- flex-wrap: wrap;
2035
- align-items: flex-start;
2036
- }
2037
- .ui-field--horizontal > .ui-field__label {
2038
- flex: 0 0 auto;
2039
- min-inline-size: calc(0.5rem * 15);
2040
- padding-block-start: calc(0.5rem * 1);
2041
- }
2042
- .ui-field--horizontal > .ui-field__control {
2043
- flex: 1 1 0;
2044
- min-inline-size: calc(0.5rem * 20);
2045
- }
2046
- }
2047
- @layer components.tokens {
2048
- .ui-form-error {
2049
- --ui-_color: var(--ui-form-error-color, var(--ui-color-danger));
2050
- --ui-_size: var(--ui-form-error-size, var(--ui-font-size-sm, 0.875rem));
2051
- --ui-_gap: var(--ui-form-error-gap, 0);
2052
- }
2053
- }
2054
- @layer components.styles {
2055
- .ui-form-error {
2056
- display: flex;
2057
- align-items: flex-start;
2058
- gap: var(--ui-_gap);
2059
- margin-block-start: var(--ui-_gap);
2060
- font-size: var(--ui-_size);
2061
- line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
2062
- color: var(--ui-_color);
2063
- }
2064
- .ui-form-error__icon {
2065
- flex-shrink: 0;
2066
- }
2067
- }
2068
- @layer components.tokens {
2069
- .ui-form-helper {
2070
- --ui-_color: var(--ui-form-helper-color, var(--ui-color-text-muted));
2071
- --ui-_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));
2072
- --ui-_gap: var(--ui-form-helper-gap, 0);
2073
- }
2074
- }
2075
- @layer components.styles {
2076
- .ui-form-helper {
2077
- display: block;
2078
- margin-block-start: var(--ui-_gap);
2079
- font-size: var(--ui-_size);
2080
- line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
2081
- color: var(--ui-_color);
2082
- }
2083
- }
2084
- @layer components.tokens {
2085
- .ui-input {
2086
- --ui-_height: var(--ui-input-height, var(--ui-row-2, 2rem));
2087
- --ui-_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));
2088
- --ui-_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));
2089
- --ui-_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));
2090
- --ui-_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2091
- --ui-_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2092
- --ui-_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2093
- --ui-_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));
2094
- --ui-_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2095
- }
2096
- .ui-input--sm {
2097
- --ui-_height: var(--ui-input-height-sm, calc(1rem * 1.5));
2098
- --ui-_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem));
2099
- }
2100
- .ui-input--lg {
2101
- --ui-_height: var(--ui-input-height-lg, calc(1rem * 2.5));
2102
- --ui-_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));
2103
- --ui-_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem));
2104
- }
2105
- .ui-input--filled {
2106
- --ui-_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2107
- --ui-_border-color: transparent;
2108
- }
2109
- .ui-input--ghost {
2110
- --ui-_bg: transparent;
2111
- --ui-_border-color: transparent;
2112
- }
2113
- .ui-input--error {
2114
- --ui-_border-color: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2115
- --ui-_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2116
- }
2117
- .ui-input--success {
2118
- --ui-_border-color: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2119
- --ui-_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2120
- }
2121
- }
2122
- @layer components.styles {
2123
- .ui-input {
2124
- display: inline-flex;
2125
- align-items: center;
2126
- block-size: var(--ui-_height);
2127
- padding-inline: var(--ui-_padding-x);
2128
- font-family: inherit;
2129
- font-size: var(--ui-_font-size);
2130
- line-height: 1;
2131
- color: var(--ui-_text);
2132
- background: var(--ui-_bg);
2133
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
2134
- border-radius: var(--ui-_radius);
2135
- transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2136
- }
2137
- .ui-input::placeholder {
2138
- color: var(--ui-_placeholder);
2139
- }
2140
- .ui-input:hover:not(:disabled, :focus) {
2141
- border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
2142
- }
2143
- .ui-input:focus, .ui-input--focus {
2144
- border-color: var(--ui-_border-color-focus);
2145
- outline: none;
2146
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2147
- }
2148
- .ui-input:disabled, .ui-input--disabled {
2149
- opacity: 0.5;
2150
- cursor: not-allowed;
2151
- }
2152
- .ui-input:read-only {
2153
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
2154
- }
2155
- .ui-input--block {
2156
- inline-size: 100%;
2157
- }
2158
- .ui-input-group {
2159
- display: inline-flex;
2160
- align-items: stretch;
2161
- position: relative;
2162
- }
2163
- .ui-input-group .ui-input {
2164
- flex: 1;
2165
- }
2166
- .ui-input-group--has-prefix .ui-input {
2167
- padding-inline-start: calc(var(--ui-_height) + var(--ui-space-half, 0.25rem));
2168
- }
2169
- .ui-input-group--has-suffix .ui-input {
2170
- padding-inline-end: calc(var(--ui-_height) + var(--ui-space-half, 0.25rem));
2171
- }
2172
- .ui-input-group__addon {
2173
- display: flex;
2174
- align-items: center;
2175
- justify-content: center;
2176
- position: absolute;
2177
- inset-block: 0;
2178
- inline-size: var(--ui-_height, 2rem);
2179
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2180
- pointer-events: none;
2181
- }
2182
- .ui-input-group__addon--start {
2183
- inset-inline-start: 0;
2184
- }
2185
- .ui-input-group__addon--end {
2186
- inset-inline-end: 0;
2187
- }
2188
- .ui-input-group__addon--interactive {
2189
- cursor: pointer;
2190
- pointer-events: auto;
2191
- }
2192
- }
2193
- @layer components.tokens {
2194
- .ui-label {
2195
- --ui-_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));
2196
- --ui-_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));
2197
- --ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2198
- }
2199
- .ui-label--lg {
2200
- --ui-_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem));
2201
- }
2202
- }
2203
- @layer components.styles {
2204
- .ui-label {
2205
- display: inline-flex;
2206
- align-items: baseline;
2207
- gap: 0;
2208
- font-size: var(--ui-_font-size);
2209
- font-weight: var(--ui-weight-medium, 500);
2210
- line-height: var(--ui-leading-tight-sm, var(--ui-row-1));
2211
- color: var(--ui-_color);
2212
- cursor: pointer;
2213
- }
2214
- .ui-label[aria-disabled=true] {
2215
- opacity: 0.5;
2216
- cursor: not-allowed;
2217
- }
2218
- .ui-label__required {
2219
- color: var(--ui-_required-color);
2220
- }
2221
- .ui-label__optional {
2222
- font-weight: var(--ui-weight-normal, 400);
2223
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2224
- }
2225
- }
2226
- @layer components.tokens {
2227
- .ui-radio {
2228
- --ui-_size: var(--ui-radio-size, calc(0.5rem * 2));
2229
- --ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2230
- --ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2231
- --ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2232
- --ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2233
- --ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
2234
- }
2235
- .ui-radio--lg {
2236
- --ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3));
2237
- }
2238
- .ui-radio--error {
2239
- --ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2240
- --ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2241
- }
2242
- }
2243
- @layer components.styles {
2244
- .ui-radio {
2245
- display: inline-flex;
2246
- flex-shrink: 0;
2247
- align-items: center;
2248
- justify-content: center;
2249
- block-size: var(--ui-_size);
2250
- inline-size: var(--ui-_size);
2251
- margin: 0;
2252
- vertical-align: middle;
2253
- background: var(--ui-_bg);
2254
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
2255
- border-radius: 50%;
2256
- cursor: pointer;
2257
- appearance: none;
2258
- transition: background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2259
- }
2260
- .ui-radio::before {
2261
- content: "";
2262
- block-size: 50%;
2263
- inline-size: 50%;
2264
- background-color: var(--ui-_dot-color);
2265
- border-radius: 50%;
2266
- opacity: 0;
2267
- transform: scale(0);
2268
- transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2269
- }
2270
- .ui-radio:hover:not(:disabled) {
2271
- border-color: var(--ui-_border-color-focus);
2272
- }
2273
- .ui-radio:focus-visible {
2274
- border-color: var(--ui-_border-color-focus);
2275
- outline: none;
2276
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2277
- }
2278
- .ui-radio:checked {
2279
- background: var(--ui-_bg-checked);
2280
- border-color: var(--ui-_bg-checked);
2281
- }
2282
- .ui-radio:checked::before {
2283
- opacity: 1;
2284
- transform: scale(1);
2285
- }
2286
- .ui-radio:disabled {
2287
- opacity: 0.5;
2288
- cursor: not-allowed;
2289
- }
2290
- }
2291
- @layer components.tokens {
2292
- .ui-select {
2293
- --ui-_height: var(--ui-select-height, var(--ui-row-2, 2rem));
2294
- --ui-_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));
2295
- --ui-_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));
2296
- --ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));
2297
- --ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2298
- --ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2299
- --ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2300
- --ui-_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));
2301
- --ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2302
- }
2303
- .ui-select--sm {
2304
- --ui-_height: var(--ui-select-height-sm, calc(1rem * 1.5));
2305
- --ui-_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem));
2306
- }
2307
- .ui-select--lg {
2308
- --ui-_height: var(--ui-select-height-lg, calc(1rem * 2.5));
2309
- --ui-_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));
2310
- --ui-_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem));
2311
- }
2312
- .ui-select--filled {
2313
- --ui-_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2314
- --ui-_border-color: transparent;
2315
- }
2316
- .ui-select--ghost {
2317
- --ui-_bg: transparent;
2318
- --ui-_border-color: transparent;
2319
- }
2320
- .ui-select--error {
2321
- --ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2322
- --ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2323
- }
2324
- .ui-select--success {
2325
- --ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2326
- --ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2327
- }
2328
- }
2329
- @layer components.styles {
2330
- .ui-select {
2331
- display: inline-block;
2332
- block-size: var(--ui-_height);
2333
- padding-inline-start: var(--ui-_padding-x);
2334
- padding-inline-end: calc(var(--ui-_height) - var(--ui-space-half, 0.25rem));
2335
- font-family: inherit;
2336
- font-size: var(--ui-_font-size);
2337
- line-height: 1;
2338
- color: var(--ui-_text);
2339
- background-color: var(--ui-_bg);
2340
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
2341
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
2342
- border-radius: var(--ui-_radius);
2343
- cursor: pointer;
2344
- appearance: none;
2345
- transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2346
- background-repeat: no-repeat;
2347
- background-position: right var(--ui-space-half, 0.25rem) center;
2348
- background-size: calc(var(--ui-_height) * 0.5);
2349
- }
2350
- .ui-select:hover:not(:disabled, :focus) {
2351
- border-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
2352
- }
2353
- .ui-select:focus, .ui-select--focus {
2354
- border-color: var(--ui-_border-color-focus);
2355
- outline: none;
2356
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2357
- }
2358
- .ui-select:disabled, .ui-select--disabled {
2359
- opacity: 0.5;
2360
- cursor: not-allowed;
2361
- }
2362
- .ui-select--block {
2363
- inline-size: 100%;
2364
- }
2365
- .ui-select:invalid, .ui-select--placeholder {
2366
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2367
- }
2368
- }
2369
- @layer components.tokens {
2370
- .ui-textarea {
2371
- --ui-_min-height: var(--ui-textarea-min-height, calc(1rem * 4));
2372
- --ui-_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));
2373
- --ui-_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));
2374
- --ui-_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));
2375
- --ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));
2376
- --ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2377
- --ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));
2378
- --ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2379
- --ui-_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));
2380
- --ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2381
- }
2382
- .ui-textarea--sm {
2383
- --ui-_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));
2384
- --ui-_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem));
2385
- }
2386
- .ui-textarea--lg {
2387
- --ui-_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));
2388
- --ui-_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));
2389
- --ui-_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));
2390
- --ui-_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem));
2391
- }
2392
- .ui-textarea--filled {
2393
- --ui-_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2394
- --ui-_border-color: transparent;
2395
- }
2396
- .ui-textarea--ghost {
2397
- --ui-_bg: transparent;
2398
- --ui-_border-color: transparent;
2399
- }
2400
- .ui-textarea--error {
2401
- --ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2402
- --ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));
2403
- }
2404
- .ui-textarea--success {
2405
- --ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2406
- --ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));
2407
- }
2408
- }
2409
- @layer components.styles {
2410
- .ui-textarea {
2411
- display: block;
2412
- box-sizing: border-box;
2413
- inline-size: 100%;
2414
- min-block-size: var(--ui-_min-height);
2415
- padding-block: var(--ui-_padding-y);
2416
- padding-inline: var(--ui-_padding-x);
2417
- font-family: inherit;
2418
- font-size: var(--ui-_font-size);
2419
- line-height: var(--ui-row-1, 1rem);
2420
- color: var(--ui-_text);
2421
- background: var(--ui-_bg);
2422
- border: none;
2423
- border-radius: var(--ui-_radius);
2424
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
2425
- transition: border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease), box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
2426
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
2427
- resize: vertical;
2428
- }
2429
- .ui-textarea::placeholder {
2430
- color: var(--ui-_placeholder);
2431
- }
2432
- .ui-textarea:hover:not(:disabled, :focus) {
2433
- outline-color: var(--ui-color-border-strong, hsl(220, 10%, 80%));
2434
- }
2435
- .ui-textarea:focus, .ui-textarea--focus {
2436
- outline-color: var(--ui-_border-color-focus);
2437
- box-shadow: 0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg));
2438
- }
2439
- .ui-textarea:disabled, .ui-textarea--disabled {
2440
- opacity: 0.5;
2441
- cursor: not-allowed;
2442
- resize: none;
2443
- }
2444
- .ui-textarea:read-only {
2445
- background: var(--ui-color-bg-subtle, hsl(220, 10%, 96%));
2446
- resize: none;
2447
- }
2448
- .ui-textarea--resize-none {
2449
- resize: none;
2450
- }
2451
- .ui-textarea--resize-horizontal {
2452
- resize: horizontal;
2453
- }
2454
- .ui-textarea--resize-both {
2455
- resize: both;
2456
- }
2457
- }
2458
- @layer components.tokens {
2459
- .ui-toggle {
2460
- --ui-_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));
2461
- --ui-_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));
2462
- --ui-_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
2463
- --ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
2464
- --ui-_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));
2465
- --ui-_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));
2466
- --ui-_thumb-bg: var(--ui-toggle-thumb-bg, white);
2467
- --ui-_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4));
2468
- }
2469
- .ui-toggle--sm {
2470
- --ui-_track-width: calc(0.5rem * 4);
2471
- --ui-_track-height: calc(0.5rem * 2);
2472
- --ui-_track-radius: 0.5rem;
2473
- --ui-_thumb-size: calc(0.5rem * 1.5);
2474
- }
2475
- .ui-toggle--lg {
2476
- --ui-_track-width: calc(0.5rem * 6);
2477
- --ui-_track-height: calc(0.5rem * 4);
2478
- --ui-_track-radius: calc(0.5rem * 2);
2479
- --ui-_thumb-size: calc(0.5rem * 3.5);
2480
- }
2481
- }
2482
- @layer components.styles {
2483
- .ui-toggle {
2484
- display: inline-flex;
2485
- flex-shrink: 0;
2486
- align-items: center;
2487
- position: relative;
2488
- block-size: var(--ui-_track-height);
2489
- inline-size: var(--ui-_track-width);
2490
- background: var(--ui-_track-bg);
2491
- border-radius: var(--ui-_track-radius);
2492
- cursor: pointer;
2493
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2494
- }
2495
- .ui-toggle__input {
2496
- position: absolute;
2497
- inset: 0;
2498
- block-size: 100%;
2499
- inline-size: 100%;
2500
- margin: 0;
2501
- opacity: 0;
2502
- cursor: pointer;
2503
- }
2504
- .ui-toggle__track {
2505
- position: absolute;
2506
- inset: 0;
2507
- background: var(--ui-_track-bg);
2508
- border-radius: var(--ui-_track-radius);
2509
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2510
- }
2511
- .ui-toggle__thumb {
2512
- position: absolute;
2513
- inset-block-start: var(--ui-_thumb-offset);
2514
- inset-inline-start: var(--ui-_thumb-offset);
2515
- block-size: var(--ui-_thumb-size);
2516
- inline-size: var(--ui-_thumb-size);
2517
- background: var(--ui-_thumb-bg);
2518
- border-radius: 50%;
2519
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
2520
- transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2521
- }
2522
- .ui-toggle__input:checked ~ .ui-toggle__track {
2523
- background: var(--ui-_track-bg-checked);
2524
- }
2525
- .ui-toggle__input:checked ~ .ui-toggle__thumb {
2526
- transform: translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2));
2527
- }
2528
- .ui-toggle__input:focus-visible ~ .ui-toggle__track {
2529
- outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
2530
- outline-offset: calc(0.5rem / 4);
2531
- }
2532
- .ui-toggle__input:disabled ~ .ui-toggle__track,
2533
- .ui-toggle__input:disabled ~ .ui-toggle__thumb {
2534
- opacity: 0.5;
2535
- cursor: not-allowed;
2536
- }
2537
- .ui-toggle:has(.ui-toggle__input:disabled) {
2538
- cursor: not-allowed;
2539
- }
2540
- }
2541
- @layer components.tokens {
2542
- .ui-divider {
2543
- --ui-_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
2544
- --ui-_line-size: var(--ui-divider-line-size, 1px);
2545
- --ui-_height: var(--ui-divider-height, 0.5rem);
2546
- --ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2));
2547
- }
2548
- }
2549
- @layer components.styles {
2550
- .ui-divider {
2551
- display: flex;
2552
- align-items: center;
2553
- block-size: var(--ui-_height);
2554
- margin: var(--ui-_gap) 0;
2555
- font-size: var(--ui-font-size-sm, 0.875rem);
2556
- line-height: 1;
2557
- color: var(--ui-color-text-muted);
2558
- }
2559
- .ui-divider::before,
2560
- .ui-divider::after {
2561
- content: "";
2562
- flex: 1;
2563
- block-size: var(--ui-_line-size);
2564
- background: var(--ui-_color);
2565
- }
2566
- .ui-divider:not(:empty) {
2567
- --ui-_height: var(--ui-row-1, 1rem);
2568
- }
2569
- .ui-divider:not(:empty)::before {
2570
- margin-inline-end: calc(0.5rem * 2);
2571
- }
2572
- .ui-divider:not(:empty)::after {
2573
- margin-inline-start: calc(0.5rem * 2);
2574
- }
2575
- .ui-divider:empty::after {
2576
- display: none;
2577
- }
2578
- .ui-divider--vertical {
2579
- flex-direction: column;
2580
- align-self: stretch;
2581
- margin: 0 var(--ui-_gap);
2582
- writing-mode: vertical-rl;
2583
- }
2584
- .ui-divider--vertical::before,
2585
- .ui-divider--vertical::after {
2586
- flex: 1;
2587
- block-size: auto;
2588
- inline-size: var(--ui-_size);
2589
- }
2590
- .ui-divider--start::before {
2591
- display: none;
2592
- }
2593
- .ui-divider--start:not(:empty)::after {
2594
- margin-inline-start: calc(0.5rem * 2);
2595
- }
2596
- .ui-divider--end::after {
2597
- display: none;
2598
- }
2599
- .ui-divider--end:not(:empty)::before {
2600
- margin-inline-end: calc(0.5rem * 2);
2601
- }
2602
- .ui-divider--dashed::before,
2603
- .ui-divider--dashed::after {
2604
- background: repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
2605
- }
2606
- .ui-divider--vertical.ui-divider--dashed::before,
2607
- .ui-divider--vertical.ui-divider--dashed::after {
2608
- background: repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem);
2609
- }
2610
- }
2611
- @layer components.tokens {
2612
- .ui-breadcrumb {
2613
- --ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));
2614
- --ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));
2615
- --ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
2616
- --ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
2617
- --ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
2618
- }
2619
- }
2620
- @layer components.styles {
2621
- .ui-breadcrumb {
2622
- display: flex;
2623
- flex-wrap: wrap;
2624
- align-items: center;
2625
- gap: var(--ui-_gap);
2626
- block-size: var(--ui-_height);
2627
- padding: 0;
2628
- margin: 0;
2629
- font-size: var(--ui-font-size-sm, 0.875rem);
2630
- line-height: 1;
2631
- list-style: none;
2632
- }
2633
- .ui-breadcrumb__item {
2634
- display: flex;
2635
- align-items: center;
2636
- gap: var(--ui-_gap);
2637
- block-size: var(--ui-_height);
2638
- }
2639
- .ui-breadcrumb__item:not(:last-child)::after {
2640
- content: var(--ui-breadcrumb-separator, "/");
2641
- color: var(--ui-_separator-color);
2642
- }
2643
- .ui-breadcrumb__link {
2644
- text-decoration: none;
2645
- color: var(--ui-_link-color);
2646
- transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2647
- }
2648
- .ui-breadcrumb__link:hover {
2649
- text-decoration: underline;
2650
- color: var(--ui-color-primary);
2651
- }
2652
- .ui-breadcrumb__item:last-child .ui-breadcrumb__link,
2653
- .ui-breadcrumb__current {
2654
- color: var(--ui-_current-color);
2655
- pointer-events: none;
2656
- }
2657
- .ui-breadcrumb__item--hidden {
2658
- display: none;
2659
- }
2660
- .ui-breadcrumb__ellipsis {
2661
- color: var(--ui-_separator-color);
2662
- }
2663
- }
2664
- @layer components.tokens {
2665
- .ui-menu {
2666
- --ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));
2667
- --ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));
2668
- --ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));
2669
- --ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));
2670
- --ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
2671
- --ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
2672
- --ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
2673
- --ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));
2674
- --ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));
2675
- --ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
2676
- }
2677
- }
2678
- @layer components.styles {
2679
- .ui-menu {
2680
- min-inline-size: var(--ui-_min-width);
2681
- max-block-size: var(--ui-_max-height);
2682
- padding: var(--ui-_padding);
2683
- overflow-y: auto;
2684
- background: var(--ui-_bg);
2685
- border-radius: var(--ui-_radius);
2686
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
2687
- box-shadow: var(--ui-_shadow);
2688
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
2689
- }
2690
- .ui-menu__group {
2691
- padding: 0;
2692
- margin: 0;
2693
- list-style: none;
2694
- }
2695
- .ui-menu__label {
2696
- padding: var(--ui-_item-padding);
2697
- font-size: var(--ui-font-size-xs, 0.75rem);
2698
- font-weight: var(--ui-weight-medium, 500);
2699
- line-height: var(--ui-row-1, 1rem);
2700
- letter-spacing: 0.05em;
2701
- text-transform: uppercase;
2702
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2703
- }
2704
- .ui-menu__item {
2705
- display: flex;
2706
- align-items: center;
2707
- gap: calc(0.5rem * 1);
2708
- padding: var(--ui-_item-padding);
2709
- font-size: var(--ui-font-size-sm, 0.875rem);
2710
- line-height: var(--ui-row-1, 1rem);
2711
- text-decoration: none;
2712
- color: var(--ui-color-text, hsl(220, 10%, 10%));
2713
- background: transparent;
2714
- border: none;
2715
- border-radius: var(--ui-_item-radius);
2716
- cursor: pointer;
2717
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2718
- }
2719
- .ui-menu__item:hover, .ui-menu__item:focus-visible {
2720
- background: var(--ui-_item-bg-hover);
2721
- outline: none;
2722
- }
2723
- .ui-menu__item--danger {
2724
- color: var(--ui-color-danger, oklch(60% 0.22 25deg));
2725
- }
2726
- .ui-menu__item--danger:hover, .ui-menu__item--danger:focus-visible {
2727
- color: var(--ui-color-danger, oklch(60% 0.22 25deg));
2728
- }
2729
- .ui-menu__item--disabled,
2730
- .ui-menu__item[aria-disabled=true] {
2731
- opacity: 0.5;
2732
- pointer-events: none;
2733
- }
2734
- .ui-menu__item-icon {
2735
- flex-shrink: 0;
2736
- block-size: calc(0.5rem * 2);
2737
- inline-size: calc(0.5rem * 2);
2738
- }
2739
- .ui-menu__item-shortcut {
2740
- margin-inline-start: auto;
2741
- font-size: var(--ui-font-size-xs, 0.75rem);
2742
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2743
- }
2744
- .ui-menu__separator {
2745
- display: flex;
2746
- align-items: center;
2747
- block-size: calc(0.5rem * 2);
2748
- margin: 0;
2749
- }
2750
- .ui-menu__separator::before {
2751
- content: "";
2752
- flex: 1;
2753
- block-size: var(--ui-border-width-sm, 1px);
2754
- background: var(--ui-color-border, hsl(220, 10%, 90%));
2755
- }
2756
- .ui-menu__item--check,
2757
- .ui-menu__item--radio {
2758
- position: relative;
2759
- padding-inline-start: calc(0.5rem * 4);
2760
- }
2761
- .ui-menu__item-indicator {
2762
- display: flex;
2763
- align-items: center;
2764
- justify-content: center;
2765
- position: absolute;
2766
- inset-inline-start: calc(0.5rem * 1);
2767
- block-size: calc(0.5rem * 2);
2768
- inline-size: calc(0.5rem * 2);
2769
- }
2770
- }
2771
- @layer components.tokens {
2772
- .ui-nav {
2773
- --ui-_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));
2774
- --ui-_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));
2775
- --ui-_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));
2776
- --ui-_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));
2777
- --ui-_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));
2778
- --ui-_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));
2779
- --ui-_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));
2780
- --ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2781
- --ui-_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));
2782
- --ui-_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
2783
- }
2784
- .ui-nav--pills {
2785
- --ui-_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
2786
- --ui-_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));
2787
- --ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
2788
- }
2789
- }
2790
- @layer components.styles {
2791
- .ui-nav__list {
2792
- display: flex;
2793
- align-items: stretch;
2794
- gap: var(--ui-_gap);
2795
- box-sizing: border-box;
2796
- block-size: var(--ui-_item-height);
2797
- padding: 0;
2798
- margin: 0;
2799
- list-style: none;
2800
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--ui-_border-color);
2801
- }
2802
- .ui-nav__item {
2803
- display: inline-flex;
2804
- align-items: center;
2805
- box-sizing: border-box;
2806
- block-size: var(--ui-_item-height);
2807
- padding-inline: var(--ui-_item-padding-x);
2808
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
2809
- font-size: var(--ui-_item-font-size);
2810
- font-weight: var(--ui-_item-font-weight);
2811
- line-height: 1;
2812
- text-decoration: none;
2813
- white-space: nowrap;
2814
- color: var(--ui-_item-color);
2815
- background: transparent;
2816
- border: none;
2817
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
2818
- cursor: pointer;
2819
- transition: color var(--ui-duration-base) var(--ui-ease-default), background var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
2820
- }
2821
- .ui-nav__item:hover {
2822
- color: var(--ui-_item-color-hover);
2823
- }
2824
- .ui-nav__item--active {
2825
- color: var(--ui-_item-color-active);
2826
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-_item-color-active);
2827
- }
2828
- .ui-nav__item--disabled {
2829
- opacity: 0.5;
2830
- pointer-events: none;
2831
- }
2832
- .ui-nav--pills .ui-nav__list {
2833
- box-shadow: none;
2834
- }
2835
- .ui-nav--pills .ui-nav__item {
2836
- border-radius: var(--ui-_item-radius);
2837
- box-shadow: none;
2838
- }
2839
- .ui-nav--pills .ui-nav__item:hover {
2840
- background: var(--ui-_item-bg-hover);
2841
- }
2842
- .ui-nav--pills .ui-nav__item--active {
2843
- color: var(--ui-_item-color-active);
2844
- background: var(--ui-_item-bg-active);
2845
- }
2846
- .ui-nav--vertical .ui-nav__list {
2847
- flex-direction: column;
2848
- align-items: stretch;
2849
- block-size: auto;
2850
- box-shadow: inset calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 0 var(--ui-_border-color);
2851
- }
2852
- .ui-nav--vertical .ui-nav__item {
2853
- box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 transparent;
2854
- }
2855
- .ui-nav--vertical .ui-nav__item--active {
2856
- box-shadow: inset calc(var(--ui-border-width-md, 0.125rem) * -1) 0 0 var(--ui-_item-color-active);
2857
- }
2858
- .ui-nav--vertical.ui-nav--pills .ui-nav__list {
2859
- box-shadow: none;
2860
- }
2861
- .ui-nav--vertical.ui-nav--pills .ui-nav__item {
2862
- box-shadow: none;
2863
- }
2864
- }
2865
- @layer components.tokens {
2866
- .ui-pagination {
2867
- --ui-_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));
2868
- --ui-_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));
2869
- --ui-_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));
2870
- --ui-_item-bg: var(--ui-pagination-item-bg, transparent);
2871
- --ui-_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));
2872
- --ui-_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
2873
- --ui-_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));
2874
- --ui-_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)));
2875
- }
2876
- }
2877
- @layer components.styles {
2878
- .ui-pagination {
2879
- display: flex;
2880
- align-items: center;
2881
- gap: var(--ui-_gap);
2882
- }
2883
- .ui-pagination__list {
2884
- display: flex;
2885
- align-items: center;
2886
- gap: var(--ui-_gap);
2887
- padding: 0;
2888
- margin: 0;
2889
- list-style: none;
2890
- }
2891
- .ui-pagination__item {
2892
- display: flex;
2893
- }
2894
- .ui-pagination__link {
2895
- display: inline-flex;
2896
- align-items: center;
2897
- justify-content: center;
2898
- block-size: var(--ui-_item-size);
2899
- min-inline-size: var(--ui-_item-size);
2900
- padding-inline: calc(0.5rem * 1);
2901
- font-size: var(--ui-font-size-sm, 0.875rem);
2902
- text-decoration: none;
2903
- color: var(--ui-_item-color);
2904
- background: var(--ui-_item-bg);
2905
- border-radius: var(--ui-_item-radius);
2906
- transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease), color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
2907
- }
2908
- .ui-pagination__link:hover {
2909
- background: var(--ui-_item-bg-hover);
2910
- }
2911
- .ui-pagination__link[aria-current=page],
2912
- .ui-pagination__link--active {
2913
- color: var(--ui-_item-color-active);
2914
- background: var(--ui-_item-bg-active);
2915
- pointer-events: none;
2916
- }
2917
- .ui-pagination__link[aria-disabled=true],
2918
- .ui-pagination__link--disabled {
2919
- opacity: 0.5;
2920
- pointer-events: none;
2921
- }
2922
- .ui-pagination__prev,
2923
- .ui-pagination__next {
2924
- display: inline-flex;
2925
- align-items: center;
2926
- gap: calc(0.5rem * 0.5);
2927
- padding-inline: calc(0.5rem * 1.5);
2928
- }
2929
- .ui-pagination__ellipsis {
2930
- display: inline-flex;
2931
- align-items: center;
2932
- justify-content: center;
2933
- block-size: var(--ui-_item-size);
2934
- min-inline-size: var(--ui-_item-size);
2935
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2936
- }
2937
- .ui-pagination--sm {
2938
- --ui-_item-size: calc(0.5rem * 3);
2939
- --ui-_gap: calc(0.5rem * 0.25);
2940
- }
2941
- .ui-pagination--lg {
2942
- --ui-_item-size: calc(0.5rem * 5);
2943
- --ui-_gap: calc(0.5rem * 0.75);
2944
- }
2945
- }
2946
- @layer components.tokens {
2947
- .ui-tabs {
2948
- --ui-_border-color: var(--ui-tabs-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
2949
- --ui-_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, 1rem));
2950
- --ui-_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, 0.5rem));
2951
- --ui-_tab-bg: var(--ui-tabs-tab-bg, transparent);
2952
- --ui-_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, hsl(220, 10%, 98%)));
2953
- --ui-_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, 1.5rem));
2954
- }
2955
- }
2956
- @layer components.styles {
2957
- .ui-tabs__list {
2958
- display: flex;
2959
- align-items: stretch;
2960
- gap: var(--ui-space-1, 0.5rem);
2961
- box-sizing: border-box;
2962
- block-size: var(--ui-row-2, 2rem);
2963
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 0.0625rem) * -1) 0 var(--ui-_border-color);
2964
- }
2965
- .ui-tabs__tab {
2966
- display: inline-flex;
2967
- align-items: center;
2968
- box-sizing: border-box;
2969
- block-size: var(--ui-row-2, 2rem);
2970
- padding-inline: var(--ui-_tab-padding-x);
2971
- margin: 0;
2972
- font-family: var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);
2973
- font-size: var(--ui-font-size-sm, 0.875rem);
2974
- font-weight: var(--ui-weight-medium, 500);
2975
- line-height: 1;
2976
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
2977
- background: var(--ui-_tab-bg);
2978
- border: none;
2979
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 transparent;
2980
- cursor: pointer;
2981
- transition: color var(--ui-duration-base) var(--ui-ease-default), box-shadow var(--ui-duration-base) var(--ui-ease-default);
2982
- }
2983
- .ui-tabs__tab:hover {
2984
- color: var(--ui-color-text, hsl(220, 10%, 10%));
2985
- }
2986
- .ui-tabs__tab--active {
2987
- color: var(--ui-color-primary, oklch(55% 0.22 250deg));
2988
- background: var(--ui-_tab-bg-active);
2989
- box-shadow: inset 0 calc(var(--ui-border-width-md, 0.125rem) * -1) 0 var(--ui-color-primary, oklch(55% 0.22 250deg));
2990
- }
2991
- .ui-tabs__panel {
2992
- display: none;
2993
- padding: var(--ui-_panel-padding);
2994
- line-height: var(--ui-row-1, 1rem);
2995
- }
2996
- .ui-tabs__panel--active {
2997
- display: block;
2998
- }
2999
- }
3000
- @layer components.tokens {
3001
- .ui-dialog {
3002
- --ui-_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3003
- --ui-_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));
3004
- --ui-_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3005
- --ui-_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
3006
- }
3007
- }
3008
- @layer components.styles {
3009
- .ui-dialog .ui-modal__content {
3010
- padding: 0;
3011
- }
3012
- .ui-dialog__header {
3013
- display: flex;
3014
- flex-shrink: 0;
3015
- align-items: center;
3016
- justify-content: space-between;
3017
- gap: calc(0.5rem * 2);
3018
- padding: var(--ui-_header-padding);
3019
- border-block-end: 1px solid var(--ui-_border-color);
3020
- }
3021
- .ui-dialog__title {
3022
- margin: 0;
3023
- font-size: var(--ui-font-size-lg, 1.25rem);
3024
- font-weight: var(--ui-weight-semibold, 600);
3025
- line-height: calc(0.5rem * 3);
3026
- }
3027
- .ui-dialog__close {
3028
- flex-shrink: 0;
3029
- margin-inline-start: auto;
3030
- }
3031
- .ui-dialog__body {
3032
- flex: 1 1 auto;
3033
- padding: var(--ui-_body-padding);
3034
- overflow-y: auto;
3035
- }
3036
- .ui-dialog__footer {
3037
- display: flex;
3038
- flex-shrink: 0;
3039
- align-items: center;
3040
- justify-content: flex-end;
3041
- gap: calc(0.5rem * 1.5);
3042
- padding: var(--ui-_footer-padding);
3043
- border-block-start: 1px solid var(--ui-_border-color);
3044
- }
3045
- .ui-dialog--borderless .ui-dialog__header {
3046
- border-block-end: none;
3047
- }
3048
- .ui-dialog--borderless .ui-dialog__footer {
3049
- border-block-start: none;
3050
- }
3051
- }
3052
- @layer components.tokens {
3053
- .ui-drawer {
3054
- --ui-_size: var(--ui-drawer-size, calc(0.5rem * 40));
3055
- --ui-_max-size: var(--ui-drawer-max-size, 90%);
3056
- --ui-_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));
3057
- --ui-_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));
3058
- --ui-_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3059
- --ui-_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));
3060
- --ui-_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));
3061
- --ui-_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));
3062
- }
3063
- .ui-drawer--sm {
3064
- --ui-_size: calc(0.5rem * 30);
3065
- }
3066
- .ui-drawer--lg {
3067
- --ui-_size: calc(0.5rem * 50);
3068
- }
3069
- .ui-drawer--full {
3070
- --ui-_size: 100%;
3071
- --ui-_max-size: 100%;
3072
- }
3073
- }
3074
- @layer components.styles {
3075
- .ui-drawer-overlay {
3076
- position: fixed;
3077
- inset: 0;
3078
- z-index: var(--ui-z-drawer, 900);
3079
- background: var(--ui-overlay-bg, rgba(0, 0, 0, 0.5));
3080
- }
3081
- .ui-drawer-overlay[data-state=open] {
3082
- animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3083
- }
3084
- .ui-drawer-overlay[data-state=closed] {
3085
- animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3086
- }
3087
- @keyframes drawer-overlay-in {
3088
- from {
3089
- opacity: 0;
3090
- }
3091
- }
3092
- @keyframes drawer-overlay-out {
3093
- to {
3094
- opacity: 0;
3095
- }
3096
- }
3097
- .ui-drawer {
3098
- display: flex;
3099
- flex-direction: column;
3100
- position: fixed;
3101
- z-index: var(--ui-z-drawer, 900);
3102
- background: var(--ui-_bg);
3103
- box-shadow: var(--ui-_shadow);
3104
- }
3105
- .ui-drawer--end {
3106
- inset-block: 0;
3107
- inset-inline-end: 0;
3108
- inline-size: var(--ui-_size);
3109
- max-inline-size: var(--ui-_max-size);
3110
- box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--ui-_border-color);
3111
- }
3112
- .ui-drawer--start {
3113
- inset-block: 0;
3114
- inset-inline-start: 0;
3115
- inline-size: var(--ui-_size);
3116
- max-inline-size: var(--ui-_max-size);
3117
- box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--ui-_border-color);
3118
- }
3119
- .ui-drawer--top {
3120
- inset-block-start: 0;
3121
- inset-inline: 0;
3122
- block-size: var(--ui-_size);
3123
- max-block-size: var(--ui-_max-size);
3124
- box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color);
3125
- }
3126
- .ui-drawer--bottom {
3127
- inset-block-end: 0;
3128
- inset-inline: 0;
3129
- block-size: var(--ui-_size);
3130
- max-block-size: var(--ui-_max-size);
3131
- box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
3132
- }
3133
- .ui-drawer--end[data-state=open] {
3134
- animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3135
- }
3136
- .ui-drawer--end[data-state=closed] {
3137
- animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3138
- }
3139
- .ui-drawer--start[data-state=open] {
3140
- animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3141
- }
3142
- .ui-drawer--start[data-state=closed] {
3143
- animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3144
- }
3145
- .ui-drawer--top[data-state=open] {
3146
- animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3147
- }
3148
- .ui-drawer--top[data-state=closed] {
3149
- animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3150
- }
3151
- .ui-drawer--bottom[data-state=open] {
3152
- animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
3153
- }
3154
- .ui-drawer--bottom[data-state=closed] {
3155
- animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
3156
- }
3157
- @keyframes drawer-slide-in-end {
3158
- from {
3159
- transform: translateX(100%);
3160
- }
3161
- }
3162
- @keyframes drawer-slide-out-end {
3163
- to {
3164
- transform: translateX(100%);
3165
- }
3166
- }
3167
- @keyframes drawer-slide-in-start {
3168
- from {
3169
- transform: translateX(-100%);
3170
- }
3171
- }
3172
- @keyframes drawer-slide-out-start {
3173
- to {
3174
- transform: translateX(-100%);
3175
- }
3176
- }
3177
- @keyframes drawer-slide-in-top {
3178
- from {
3179
- transform: translateY(-100%);
3180
- }
3181
- }
3182
- @keyframes drawer-slide-out-top {
3183
- to {
3184
- transform: translateY(-100%);
3185
- }
3186
- }
3187
- @keyframes drawer-slide-in-bottom {
3188
- from {
3189
- transform: translateY(100%);
3190
- }
3191
- }
3192
- @keyframes drawer-slide-out-bottom {
3193
- to {
3194
- transform: translateY(100%);
3195
- }
3196
- }
3197
- .ui-drawer__header {
3198
- display: flex;
3199
- flex-shrink: 0;
3200
- align-items: center;
3201
- justify-content: space-between;
3202
- gap: calc(0.5rem * 2);
3203
- padding: var(--ui-_header-padding);
3204
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
3205
- }
3206
- .ui-drawer__title {
3207
- margin: 0;
3208
- font-size: var(--ui-font-size-lg, 1.25rem);
3209
- font-weight: var(--ui-weight-semibold, 600);
3210
- line-height: var(--ui-row-1, 1rem);
3211
- }
3212
- .ui-drawer__description {
3213
- margin: 0;
3214
- font-size: var(--ui-font-size-sm, 0.875rem);
3215
- line-height: var(--ui-row-1, 1rem);
3216
- color: var(--ui-color-text-muted, hsl(220, 10%, 45%));
3217
- }
3218
- .ui-drawer__close {
3219
- flex-shrink: 0;
3220
- margin-inline-start: auto;
3221
- }
3222
- .ui-drawer__body {
3223
- flex: 1 1 auto;
3224
- padding: var(--ui-_body-padding);
3225
- overflow-y: auto;
3226
- line-height: var(--ui-row-1, 1rem);
3227
- }
3228
- .ui-drawer__footer {
3229
- display: flex;
3230
- flex-shrink: 0;
3231
- align-items: center;
3232
- justify-content: flex-end;
3233
- gap: calc(0.5rem * 2);
3234
- padding: var(--ui-_footer-padding);
3235
- box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color);
3236
- }
3237
- }
3238
- @layer components.tokens {
3239
- .ui-modal {
3240
- --ui-_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
3241
- --ui-_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));
3242
- --ui-_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));
3243
- --ui-_padding: var(--ui-modal-padding, calc(0.5rem * 3));
3244
- --ui-_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));
3245
- --ui-_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));
3246
- --ui-_z: var(--ui-modal-z, var(--ui-z-modal, 400));
3247
- }
3248
- .ui-modal--sm {
3249
- --ui-_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40));
3250
- }
3251
- .ui-modal--lg {
3252
- --ui-_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80));
3253
- }
3254
- .ui-modal--full {
3255
- --ui-_max-width: calc(100vw - 0.5rem * 4);
3256
- --ui-_max-height: calc(100vh - 0.5rem * 4);
3257
- --ui-_radius: 0;
3258
- }
3259
- }
3260
- @layer components.styles {
3261
- .ui-modal {
3262
- display: flex;
3263
- align-items: center;
3264
- justify-content: center;
3265
- position: fixed;
3266
- inset: 0;
3267
- z-index: var(--ui-_z);
3268
- padding: calc(0.5rem * 2);
3269
- }
3270
- .ui-modal__content {
3271
- display: flex;
3272
- flex-direction: column;
3273
- position: relative;
3274
- inline-size: 100%;
3275
- max-block-size: var(--ui-_max-height);
3276
- max-inline-size: var(--ui-_max-width);
3277
- padding: var(--ui-_padding);
3278
- overflow: hidden;
3279
- background: var(--ui-_bg);
3280
- border-radius: var(--ui-_radius);
3281
- box-shadow: var(--ui-_shadow);
3282
- }
3283
- .ui-modal__body {
3284
- flex: 1 1 auto;
3285
- overflow-y: auto;
3286
- }
3287
- .ui-modal--entering .ui-modal__content,
3288
- .ui-modal--visible .ui-modal__content {
3289
- opacity: 1;
3290
- transform: scale(1);
3291
- }
3292
- .ui-modal--exiting .ui-modal__content,
3293
- .ui-modal--hidden .ui-modal__content {
3294
- opacity: 0;
3295
- transform: scale(0.95);
3296
- }
3297
- .ui-modal--animate .ui-modal__content {
3298
- transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease), transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
3299
- }
3300
- .ui-modal--hidden {
3301
- visibility: hidden;
3302
- pointer-events: none;
3303
- }
3304
- }
3305
- @layer components.tokens {
3306
- .ui-overlay {
3307
- --ui-_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
3308
- --ui-_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
3309
- }
3310
- .ui-overlay--light {
3311
- --ui-_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
3312
- }
3313
- .ui-overlay--blur {
3314
- --ui-_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
3315
- }
3316
- }
3317
- @layer components.styles {
3318
- .ui-overlay {
3319
- position: fixed;
3320
- inset: 0;
3321
- z-index: var(--ui-_z);
3322
- background: var(--ui-_bg);
3323
- }
3324
- .ui-overlay--blur {
3325
- backdrop-filter: blur(calc(0.5rem * 0.5));
3326
- }
3327
- .ui-overlay--entering,
3328
- .ui-overlay--visible {
3329
- opacity: 1;
3330
- }
3331
- .ui-overlay--exiting,
3332
- .ui-overlay--hidden {
3333
- opacity: 0;
3334
- pointer-events: none;
3335
- }
3336
- .ui-overlay--animate {
3337
- transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
3338
- }
3339
- }
3340
- @layer components.tokens {
3341
- .ui-popover {
3342
- --ui-_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
3343
- --ui-_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
3344
- --ui-_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));
3345
- --ui-_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));
3346
- --ui-_padding: var(--ui-popover-padding, calc(0.5rem * 2));
3347
- --ui-_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));
3348
- --ui-_z: var(--ui-popover-z, var(--ui-z-popover, 500));
3349
- --ui-_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem));
3350
- }
3351
- }
3352
- @layer components.styles {
3353
- .ui-popover {
3354
- position: absolute;
3355
- z-index: var(--ui-_z);
3356
- max-inline-size: var(--ui-_max-width);
3357
- padding: var(--ui-_padding);
3358
- line-height: var(--ui-row-1, 1rem);
3359
- background: var(--ui-_bg);
3360
- border-radius: var(--ui-_radius);
3361
- outline: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
3362
- box-shadow: var(--ui-_shadow);
3363
- outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
3364
- }
3365
- .ui-popover__header {
3366
- padding-block-end: calc(0.5rem * 2);
3367
- margin-block-end: calc(0.5rem * 2);
3368
- box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--ui-_border-color);
3369
- }
3370
- .ui-popover__title {
3371
- margin: 0;
3372
- font-size: var(--ui-font-size-md, 1rem);
3373
- font-weight: var(--ui-weight-semibold, 600);
3374
- }
3375
- .ui-popover--top::after {
3376
- content: "";
3377
- position: absolute;
3378
- inset-block-start: 100%;
3379
- inset-inline-start: 50%;
3380
- border: var(--ui-_arrow-size) solid transparent;
3381
- border-block-start-color: var(--ui-_bg);
3382
- transform: translateX(-50%);
3383
- }
3384
- .ui-popover--top::before {
3385
- content: "";
3386
- position: absolute;
3387
- inset-block-start: 100%;
3388
- inset-inline-start: 50%;
3389
- border: calc(var(--ui-_arrow-size) + 1px) solid transparent;
3390
- border-block-start-color: var(--ui-_border-color);
3391
- transform: translateX(-50%);
3392
- }
3393
- .ui-popover--bottom::after {
3394
- content: "";
3395
- position: absolute;
3396
- inset-block-end: 100%;
3397
- inset-inline-start: 50%;
3398
- border: var(--ui-_arrow-size) solid transparent;
3399
- border-block-end-color: var(--ui-_bg);
3400
- transform: translateX(-50%);
3401
- }
3402
- .ui-popover--bottom::before {
3403
- content: "";
3404
- position: absolute;
3405
- inset-block-end: 100%;
3406
- inset-inline-start: 50%;
3407
- border: calc(var(--ui-_arrow-size) + 1px) solid transparent;
3408
- border-block-end-color: var(--ui-_border-color);
3409
- transform: translateX(-50%);
3410
- }
3411
- .ui-popover--visible {
3412
- opacity: 1;
3413
- }
3414
- .ui-popover--hidden {
3415
- opacity: 0;
3416
- pointer-events: none;
3417
- }
3418
- .ui-popover--animate {
3419
- transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
3420
- }
3421
- }
3422
- @layer components.tokens {
3423
- .ui-tooltip {
3424
- --ui-_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));
3425
- --ui-_color: var(--ui-tooltip-color, var(--ui-color-bg, white));
3426
- --ui-_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));
3427
- --ui-_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));
3428
- --ui-_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));
3429
- --ui-_size: var(--ui-tooltip-size, var(--ui-font-size-sm, 0.875rem));
3430
- --ui-_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));
3431
- --ui-_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2));
3432
- }
3433
- }
3434
- @layer components.styles {
3435
- .ui-tooltip {
3436
- position: absolute;
3437
- z-index: var(--ui-_z);
3438
- max-inline-size: calc(0.5rem * 25);
3439
- padding: var(--ui-_padding-y) var(--ui-_padding-x);
3440
- font-size: var(--ui-_size);
3441
- line-height: calc(0.5rem * 2);
3442
- text-align: center;
3443
- white-space: nowrap;
3444
- color: var(--ui-_color);
3445
- background: var(--ui-_bg);
3446
- border-radius: var(--ui-_radius);
3447
- }
3448
- .ui-tooltip--top::after {
3449
- content: "";
3450
- position: absolute;
3451
- inset-block-start: 100%;
3452
- inset-inline-start: 50%;
3453
- border: var(--ui-_arrow-size) solid transparent;
3454
- border-block-start-color: var(--ui-_bg);
3455
- transform: translateX(-50%);
3456
- }
3457
- .ui-tooltip--bottom::after {
3458
- content: "";
3459
- position: absolute;
3460
- inset-block-end: 100%;
3461
- inset-inline-start: 50%;
3462
- border: var(--ui-_arrow-size) solid transparent;
3463
- border-block-end-color: var(--ui-_bg);
3464
- transform: translateX(-50%);
3465
- }
3466
- .ui-tooltip--start::after {
3467
- content: "";
3468
- position: absolute;
3469
- inset-block-start: 50%;
3470
- inset-inline-start: 100%;
3471
- border: var(--ui-_arrow-size) solid transparent;
3472
- border-inline-start-color: var(--ui-_bg);
3473
- transform: translateY(-50%);
3474
- }
3475
- .ui-tooltip--end::after {
3476
- content: "";
3477
- position: absolute;
3478
- inset-block-start: 50%;
3479
- inset-inline-end: 100%;
3480
- border: var(--ui-_arrow-size) solid transparent;
3481
- border-inline-end-color: var(--ui-_bg);
3482
- transform: translateY(-50%);
3483
- }
3484
- .ui-tooltip--visible {
3485
- opacity: 1;
3486
- }
3487
- .ui-tooltip--hidden {
3488
- opacity: 0;
3489
- pointer-events: none;
3490
- }
3491
- .ui-tooltip--animate {
3492
- transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
3493
- }
3494
- }
3495
- @layer components.tokens {
3496
- .ui-code {
3497
- --ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));
3498
- --ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
3499
- --ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));
3500
- --ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));
3501
- --ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem));
3502
- }
3503
- .ui-code--sm {
3504
- --ui-_font-size: var(--ui-font-size-xs, 0.75rem);
3505
- }
3506
- .ui-code-block {
3507
- --ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));
3508
- --ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));
3509
- --ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));
3510
- --ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));
3511
- --ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)));
3512
- }
3513
- }
3514
- @layer components.styles {
3515
- .ui-code {
3516
- padding: var(--ui-_padding-y) var(--ui-_padding-x);
3517
- font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
3518
- font-size: var(--ui-_font-size);
3519
- line-height: var(--ui-leading-tight-sm, 1rem);
3520
- background: var(--ui-_bg);
3521
- border-radius: var(--ui-_radius);
3522
- }
3523
- .ui-code-block {
3524
- display: block;
3525
- padding: calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));
3526
- overflow-x: auto;
3527
- font-family: var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);
3528
- font-size: var(--ui-_font-size);
3529
- line-height: var(--ui-leading-tight-sm, 1rem);
3530
- white-space: pre;
3531
- background: var(--ui-_bg);
3532
- border: var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);
3533
- border-radius: var(--ui-_radius);
3534
- }
3535
- .ui-code-block code {
3536
- padding: 0;
3537
- font-size: inherit;
3538
- background: none;
3539
- }
3540
- }
3541
- @layer components.tokens {
3542
- .ui-heading {
3543
- --ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));
3544
- --ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));
3545
- --ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));
3546
- --ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)));
3547
- }
3548
- .ui-heading--4xl {
3549
- --ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));
3550
- --ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem));
3551
- }
3552
- .ui-heading--3xl {
3553
- --ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));
3554
- --ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem));
3555
- }
3556
- .ui-heading--2xl {
3557
- --ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));
3558
- --ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem));
3559
- }
3560
- .ui-heading--xl {
3561
- --ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));
3562
- --ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem));
3563
- }
3564
- .ui-heading--lg {
3565
- --ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));
3566
- --ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem));
3567
- }
3568
- .ui-heading--md {
3569
- --ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));
3570
- --ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem));
3571
- }
3572
- .ui-heading--sm {
3573
- --ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));
3574
- --ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem));
3575
- }
3576
- }
3577
- @layer components.styles {
3578
- .ui-heading {
3579
- margin: 0;
3580
- font-size: var(--ui-_font-size);
3581
- font-weight: var(--ui-_weight);
3582
- line-height: var(--ui-_line-height);
3583
- color: var(--ui-_color);
3584
- }
3585
- }
3586
- @layer components.tokens {
3587
- .ui-link {
3588
- --ui-_color: var(--ui-link-color, var(--ui-color-primary));
3589
- --ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));
3590
- --ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));
3591
- --ui-_decoration: var(--ui-link-decoration, underline);
3592
- --ui-_decoration-hover: var(--ui-link-decoration-hover, underline);
3593
- }
3594
- .ui-link--muted {
3595
- --ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
3596
- --ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
3597
- }
3598
- .ui-link--subtle {
3599
- --ui-_decoration: none;
3600
- --ui-_decoration-hover: underline;
3601
- }
3602
- }
3603
- @layer components.styles {
3604
- .ui-link {
3605
- text-decoration: var(--ui-_decoration);
3606
- color: var(--ui-_color);
3607
- cursor: pointer;
3608
- transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
3609
- text-underline-offset: calc(0.5rem / 4);
3610
- }
3611
- .ui-link:hover {
3612
- text-decoration: var(--ui-_decoration-hover);
3613
- color: var(--ui-_color-hover);
3614
- }
3615
- .ui-link:focus-visible {
3616
- border-radius: calc(0.5rem / 4);
3617
- outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
3618
- outline-offset: calc(0.5rem / 4);
3619
- }
3620
- .ui-link:visited {
3621
- color: var(--ui-_color-visited);
3622
- }
3623
- .ui-link--disabled,
3624
- .ui-link[aria-disabled=true] {
3625
- color: var(--ui-color-text-muted);
3626
- opacity: 0.6;
3627
- cursor: not-allowed;
3628
- pointer-events: none;
3629
- }
3630
- .ui-link--external::after {
3631
- content: "↗";
3632
- display: inline-block;
3633
- margin-inline-start: calc(0.5rem / 4);
3634
- font-size: 0.75em;
3635
- }
3636
- }
3637
- /* 05. Utilities (high specificity, load last) */
3638
- /* Spacing utilities - all values align to 8px grid */
3639
- /* Uses logical properties for international/RTL support */
3640
- @layer utilities {
3641
- /* Margin utilities */
3642
- .ui-m-0 {
3643
- margin: 0;
3644
- }
3645
- .ui-m-1 {
3646
- margin: var(--ui-space-1);
3647
- }
3648
- .ui-m-2 {
3649
- margin: var(--ui-space-2);
3650
- }
3651
- .ui-m-3 {
3652
- margin: var(--ui-space-3);
3653
- }
3654
- .ui-m-4 {
3655
- margin: var(--ui-space-4);
3656
- }
3657
- .ui-m-6 {
3658
- margin: var(--ui-space-6);
3659
- }
3660
- .ui-m-8 {
3661
- margin: var(--ui-space-8);
3662
- }
3663
- .ui-mt-0 {
3664
- margin-block-start: 0;
3665
- }
3666
- .ui-mt-1 {
3667
- margin-block-start: var(--ui-space-1);
3668
- }
3669
- .ui-mt-2 {
3670
- margin-block-start: var(--ui-space-2);
3671
- }
3672
- .ui-mt-3 {
3673
- margin-block-start: var(--ui-space-3);
3674
- }
3675
- .ui-mt-4 {
3676
- margin-block-start: var(--ui-space-4);
3677
- }
3678
- .ui-mt-6 {
3679
- margin-block-start: var(--ui-space-6);
3680
- }
3681
- .ui-mt-8 {
3682
- margin-block-start: var(--ui-space-8);
3683
- }
3684
- .ui-me-0 {
3685
- margin-inline-end: 0;
3686
- }
3687
- .ui-me-1 {
3688
- margin-inline-end: var(--ui-space-1);
3689
- }
3690
- .ui-me-2 {
3691
- margin-inline-end: var(--ui-space-2);
3692
- }
3693
- .ui-me-3 {
3694
- margin-inline-end: var(--ui-space-3);
3695
- }
3696
- .ui-me-4 {
3697
- margin-inline-end: var(--ui-space-4);
3698
- }
3699
- .ui-me-6 {
3700
- margin-inline-end: var(--ui-space-6);
3701
- }
3702
- .ui-me-8 {
3703
- margin-inline-end: var(--ui-space-8);
3704
- }
3705
- .ui-mb-0 {
3706
- margin-block-end: 0;
3707
- }
3708
- .ui-mb-1 {
3709
- margin-block-end: var(--ui-space-1);
3710
- }
3711
- .ui-mb-2 {
3712
- margin-block-end: var(--ui-space-2);
3713
- }
3714
- .ui-mb-3 {
3715
- margin-block-end: var(--ui-space-3);
3716
- }
3717
- .ui-mb-4 {
3718
- margin-block-end: var(--ui-space-4);
3719
- }
3720
- .ui-mb-6 {
3721
- margin-block-end: var(--ui-space-6);
3722
- }
3723
- .ui-mb-8 {
3724
- margin-block-end: var(--ui-space-8);
3725
- }
3726
- .ui-ms-0 {
3727
- margin-inline-start: 0;
3728
- }
3729
- .ui-ms-1 {
3730
- margin-inline-start: var(--ui-space-1);
3731
- }
3732
- .ui-ms-2 {
3733
- margin-inline-start: var(--ui-space-2);
3734
- }
3735
- .ui-ms-3 {
3736
- margin-inline-start: var(--ui-space-3);
3737
- }
3738
- .ui-ms-4 {
3739
- margin-inline-start: var(--ui-space-4);
3740
- }
3741
- .ui-ms-6 {
3742
- margin-inline-start: var(--ui-space-6);
3743
- }
3744
- .ui-ms-8 {
3745
- margin-inline-start: var(--ui-space-8);
3746
- }
3747
- .ui-mx-0 {
3748
- margin-inline: 0;
3749
- }
3750
- .ui-mx-1 {
3751
- margin-inline: var(--ui-space-1);
3752
- }
3753
- .ui-mx-2 {
3754
- margin-inline: var(--ui-space-2);
3755
- }
3756
- .ui-mx-3 {
3757
- margin-inline: var(--ui-space-3);
3758
- }
3759
- .ui-mx-4 {
3760
- margin-inline: var(--ui-space-4);
3761
- }
3762
- .ui-mx-auto {
3763
- margin-inline: auto;
3764
- }
3765
- .ui-my-0 {
3766
- margin-block: 0;
3767
- }
3768
- .ui-my-1 {
3769
- margin-block: var(--ui-space-1);
3770
- }
3771
- .ui-my-2 {
3772
- margin-block: var(--ui-space-2);
3773
- }
3774
- .ui-my-3 {
3775
- margin-block: var(--ui-space-3);
3776
- }
3777
- .ui-my-4 {
3778
- margin-block: var(--ui-space-4);
3779
- }
3780
- /* Padding utilities */
3781
- .ui-p-0 {
3782
- padding: 0;
3783
- }
3784
- .ui-p-1 {
3785
- padding: var(--ui-space-1);
3786
- }
3787
- .ui-p-2 {
3788
- padding: var(--ui-space-2);
3789
- }
3790
- .ui-p-3 {
3791
- padding: var(--ui-space-3);
3792
- }
3793
- .ui-p-4 {
3794
- padding: var(--ui-space-4);
3795
- }
3796
- .ui-p-6 {
3797
- padding: var(--ui-space-6);
3798
- }
3799
- .ui-p-8 {
3800
- padding: var(--ui-space-8);
3801
- }
3802
- .ui-pt-0 {
3803
- padding-block-start: 0;
3804
- }
3805
- .ui-pt-1 {
3806
- padding-block-start: var(--ui-space-1);
3807
- }
3808
- .ui-pt-2 {
3809
- padding-block-start: var(--ui-space-2);
3810
- }
3811
- .ui-pt-3 {
3812
- padding-block-start: var(--ui-space-3);
3813
- }
3814
- .ui-pt-4 {
3815
- padding-block-start: var(--ui-space-4);
3816
- }
3817
- .ui-pt-6 {
3818
- padding-block-start: var(--ui-space-6);
3819
- }
3820
- .ui-pt-8 {
3821
- padding-block-start: var(--ui-space-8);
3822
- }
3823
- .ui-pe-0 {
3824
- padding-inline-end: 0;
3825
- }
3826
- .ui-pe-1 {
3827
- padding-inline-end: var(--ui-space-1);
3828
- }
3829
- .ui-pe-2 {
3830
- padding-inline-end: var(--ui-space-2);
3831
- }
3832
- .ui-pe-3 {
3833
- padding-inline-end: var(--ui-space-3);
3834
- }
3835
- .ui-pe-4 {
3836
- padding-inline-end: var(--ui-space-4);
3837
- }
3838
- .ui-pe-6 {
3839
- padding-inline-end: var(--ui-space-6);
3840
- }
3841
- .ui-pe-8 {
3842
- padding-inline-end: var(--ui-space-8);
3843
- }
3844
- .ui-pb-0 {
3845
- padding-block-end: 0;
3846
- }
3847
- .ui-pb-1 {
3848
- padding-block-end: var(--ui-space-1);
3849
- }
3850
- .ui-pb-2 {
3851
- padding-block-end: var(--ui-space-2);
3852
- }
3853
- .ui-pb-3 {
3854
- padding-block-end: var(--ui-space-3);
3855
- }
3856
- .ui-pb-4 {
3857
- padding-block-end: var(--ui-space-4);
3858
- }
3859
- .ui-pb-6 {
3860
- padding-block-end: var(--ui-space-6);
3861
- }
3862
- .ui-pb-8 {
3863
- padding-block-end: var(--ui-space-8);
3864
- }
3865
- .ui-ps-0 {
3866
- padding-inline-start: 0;
3867
- }
3868
- .ui-ps-1 {
3869
- padding-inline-start: var(--ui-space-1);
3870
- }
3871
- .ui-ps-2 {
3872
- padding-inline-start: var(--ui-space-2);
3873
- }
3874
- .ui-ps-3 {
3875
- padding-inline-start: var(--ui-space-3);
3876
- }
3877
- .ui-ps-4 {
3878
- padding-inline-start: var(--ui-space-4);
3879
- }
3880
- .ui-ps-6 {
3881
- padding-inline-start: var(--ui-space-6);
3882
- }
3883
- .ui-ps-8 {
3884
- padding-inline-start: var(--ui-space-8);
3885
- }
3886
- .ui-px-0 {
3887
- padding-inline: 0;
3888
- }
3889
- .ui-px-1 {
3890
- padding-inline: var(--ui-space-1);
3891
- }
3892
- .ui-px-2 {
3893
- padding-inline: var(--ui-space-2);
3894
- }
3895
- .ui-px-3 {
3896
- padding-inline: var(--ui-space-3);
3897
- }
3898
- .ui-px-4 {
3899
- padding-inline: var(--ui-space-4);
3900
- }
3901
- .ui-py-0 {
3902
- padding-block: 0;
3903
- }
3904
- .ui-py-1 {
3905
- padding-block: var(--ui-space-1);
3906
- }
3907
- .ui-py-2 {
3908
- padding-block: var(--ui-space-2);
3909
- }
3910
- .ui-py-3 {
3911
- padding-block: var(--ui-space-3);
3912
- }
3913
- .ui-py-4 {
3914
- padding-block: var(--ui-space-4);
3915
- }
3916
- /* Gap utilities (for flex/grid) */
3917
- .ui-gap-0 {
3918
- gap: 0;
3919
- }
3920
- .ui-gap-1 {
3921
- gap: var(--ui-space-1);
3922
- }
3923
- .ui-gap-2 {
3924
- gap: var(--ui-space-2);
3925
- }
3926
- .ui-gap-3 {
3927
- gap: var(--ui-space-3);
3928
- }
3929
- .ui-gap-4 {
3930
- gap: var(--ui-space-4);
3931
- }
3932
- .ui-gap-6 {
3933
- gap: var(--ui-space-6);
3934
- }
3935
- .ui-gap-8 {
3936
- gap: var(--ui-space-8);
3937
- }
3938
- }
3939
- /* Display and visibility utilities */
3940
- /* Uses logical properties for international/RTL support */
3941
- @layer utilities {
3942
- /* Display */
3943
- .ui-block {
3944
- display: block;
3945
- }
3946
- .ui-inline-block {
3947
- display: inline-block;
3948
- }
3949
- .ui-inline {
3950
- display: inline;
3951
- }
3952
- .ui-flex {
3953
- display: flex;
3954
- }
3955
- .ui-inline-flex {
3956
- display: inline-flex;
3957
- }
3958
- .ui-grid {
3959
- display: grid;
3960
- }
3961
- .ui-inline-grid {
3962
- display: inline-grid;
3963
- }
3964
- .ui-hidden {
3965
- display: none;
3966
- }
3967
- /* Flexbox direction */
3968
- .ui-flex-row {
3969
- flex-direction: row;
3970
- }
3971
- .ui-flex-row-reverse {
3972
- flex-direction: row-reverse;
3973
- }
3974
- .ui-flex-col {
3975
- flex-direction: column;
3976
- }
3977
- .ui-flex-col-reverse {
3978
- flex-direction: column-reverse;
3979
- }
3980
- /* Flexbox wrap */
3981
- .ui-flex-wrap {
3982
- flex-wrap: wrap;
3983
- }
3984
- .ui-flex-nowrap {
3985
- flex-wrap: nowrap;
3986
- }
3987
- .ui-flex-wrap-reverse {
3988
- flex-wrap: wrap-reverse;
3989
- }
3990
- /* Flexbox grow/shrink */
3991
- .ui-flex-1 {
3992
- flex: 1 1 0%;
3993
- }
3994
- .ui-flex-auto {
3995
- flex: 1 1 auto;
3996
- }
3997
- .ui-flex-initial {
3998
- flex: 0 1 auto;
3999
- }
4000
- .ui-flex-none {
4001
- flex: none;
4002
- }
4003
- .ui-grow {
4004
- flex-grow: 1;
4005
- }
4006
- .ui-grow-0 {
4007
- flex-grow: 0;
4008
- }
4009
- .ui-shrink {
4010
- flex-shrink: 1;
4011
- }
4012
- .ui-shrink-0 {
4013
- flex-shrink: 0;
4014
- }
4015
- /* Justify content */
4016
- .ui-justify-start {
4017
- justify-content: flex-start;
4018
- }
4019
- .ui-justify-end {
4020
- justify-content: flex-end;
4021
- }
4022
- .ui-justify-center {
4023
- justify-content: center;
4024
- }
4025
- .ui-justify-between {
4026
- justify-content: space-between;
4027
- }
4028
- .ui-justify-around {
4029
- justify-content: space-around;
4030
- }
4031
- .ui-justify-evenly {
4032
- justify-content: space-evenly;
4033
- }
4034
- /* Align items */
4035
- .ui-items-start {
4036
- align-items: flex-start;
4037
- }
4038
- .ui-items-end {
4039
- align-items: flex-end;
4040
- }
4041
- .ui-items-center {
4042
- align-items: center;
4043
- }
4044
- .ui-items-baseline {
4045
- align-items: baseline;
4046
- }
4047
- .ui-items-stretch {
4048
- align-items: stretch;
4049
- }
4050
- /* Align self */
4051
- .ui-self-auto {
4052
- align-self: auto;
4053
- }
4054
- .ui-self-start {
4055
- align-self: flex-start;
4056
- }
4057
- .ui-self-end {
4058
- align-self: flex-end;
4059
- }
4060
- .ui-self-center {
4061
- align-self: center;
4062
- }
4063
- .ui-self-stretch {
4064
- align-self: stretch;
4065
- }
4066
- /* Visibility */
4067
- .ui-visible {
4068
- visibility: visible;
4069
- }
4070
- .ui-invisible {
4071
- visibility: hidden;
4072
- }
4073
- /* Screen reader only - visually hidden but accessible */
4074
- .ui-sr-only {
4075
- position: absolute;
4076
- /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
4077
- block-size: 1px;
4078
- /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
4079
- inline-size: 1px;
4080
- padding: 0;
4081
- /* stylelint-disable-next-line unit-disallowed-list -- intentional -1px for a11y */
4082
- margin: -1px;
4083
- overflow: hidden;
4084
- white-space: nowrap;
4085
- border-width: 0;
4086
- clip-path: inset(50%);
4087
- }
4088
- }
4089
- @layer utilities {
4090
- .ui-text-start {
4091
- text-align: start;
4092
- }
4093
- .ui-text-center {
4094
- text-align: center;
4095
- }
4096
- .ui-text-end {
4097
- text-align: end;
4098
- }
4099
- .ui-text-justify {
4100
- text-align: justify;
4101
- }
4102
- .ui-font-normal {
4103
- font-weight: var(--ui-weight-normal);
4104
- }
4105
- .ui-font-medium {
4106
- font-weight: var(--ui-weight-medium);
4107
- }
4108
- .ui-font-semibold {
4109
- font-weight: var(--ui-weight-semibold);
4110
- }
4111
- .ui-font-bold {
4112
- font-weight: var(--ui-weight-bold);
4113
- }
4114
- .ui-text-xs {
4115
- font-size: var(--ui-font-size-xs);
4116
- line-height: var(--ui-leading-xs);
4117
- }
4118
- .ui-text-sm {
4119
- font-size: var(--ui-font-size-sm);
4120
- line-height: var(--ui-leading-sm);
4121
- }
4122
- .ui-text-md {
4123
- font-size: var(--ui-font-size-md);
4124
- line-height: var(--ui-leading-md);
4125
- }
4126
- .ui-text-lg {
4127
- font-size: var(--ui-font-size-lg);
4128
- line-height: var(--ui-leading-lg);
4129
- }
4130
- .ui-text-xl {
4131
- font-size: var(--ui-font-size-xl);
4132
- line-height: var(--ui-leading-xl);
4133
- }
4134
- .ui-text-2xl {
4135
- font-size: var(--ui-font-size-2xl);
4136
- line-height: var(--ui-leading-2xl);
4137
- }
4138
- .ui-text-3xl {
4139
- font-size: var(--ui-font-size-3xl);
4140
- line-height: var(--ui-leading-3xl);
4141
- }
4142
- .ui-text-4xl {
4143
- font-size: var(--ui-font-size-4xl);
4144
- line-height: var(--ui-leading-4xl);
4145
- }
4146
- .ui-text-lead {
4147
- font-size: var(--ui-lead-size);
4148
- font-weight: var(--ui-lead-weight);
4149
- line-height: var(--ui-lead-line-height);
4150
- letter-spacing: var(--ui-lead-tracking);
4151
- }
4152
- .ui-text-eyebrow {
4153
- font-size: var(--ui-eyebrow-size);
4154
- font-weight: var(--ui-eyebrow-weight);
4155
- line-height: var(--ui-eyebrow-line-height);
4156
- letter-spacing: var(--ui-eyebrow-tracking);
4157
- text-transform: uppercase;
4158
- }
4159
- .ui-text-caption {
4160
- font-size: var(--ui-caption-size);
4161
- font-weight: var(--ui-caption-weight);
4162
- line-height: var(--ui-caption-line-height);
4163
- letter-spacing: var(--ui-caption-tracking);
4164
- }
4165
- .ui-text-body-sm {
4166
- font-size: var(--ui-body-sm-size);
4167
- font-weight: var(--ui-body-sm-weight);
4168
- line-height: var(--ui-body-sm-line-height);
4169
- letter-spacing: var(--ui-body-sm-tracking);
4170
- }
4171
- .ui-font-sans {
4172
- font-family: var(--ui-font-sans);
4173
- }
4174
- .ui-font-mono {
4175
- font-family: var(--ui-font-mono);
4176
- }
4177
- .ui-underline {
4178
- text-decoration: underline;
4179
- }
4180
- .ui-line-through {
4181
- text-decoration: line-through;
4182
- }
4183
- .ui-no-underline {
4184
- text-decoration: none;
4185
- }
4186
- .ui-uppercase {
4187
- text-transform: uppercase;
4188
- }
4189
- .ui-lowercase {
4190
- text-transform: lowercase;
4191
- }
4192
- .ui-capitalize {
4193
- text-transform: capitalize;
4194
- }
4195
- .ui-normal-case {
4196
- text-transform: none;
4197
- }
4198
- .ui-text-primary {
4199
- color: var(--ui-color-primary);
4200
- }
4201
- .ui-text-muted {
4202
- color: var(--ui-color-text-muted);
4203
- }
4204
- .ui-text-success {
4205
- color: var(--ui-color-success);
4206
- }
4207
- .ui-text-warning {
4208
- color: var(--ui-color-warning);
4209
- }
4210
- .ui-text-danger {
4211
- color: var(--ui-color-danger);
4212
- }
4213
- .ui-truncate {
4214
- overflow: hidden;
4215
- text-overflow: ellipsis;
4216
- white-space: nowrap;
4217
- }
4218
- .ui-whitespace-normal {
4219
- white-space: normal;
4220
- }
4221
- .ui-whitespace-nowrap {
4222
- white-space: nowrap;
4223
- }
4224
- .ui-whitespace-pre {
4225
- white-space: pre;
4226
- }
4227
- .ui-whitespace-pre-wrap {
4228
- white-space: pre-wrap;
4229
- }
4230
- .ui-prose {
4231
- max-inline-size: 65ch;
4232
- }
4233
- .ui-prose-sm {
4234
- max-inline-size: 45ch;
4235
- }
4236
- .ui-prose-lg {
4237
- max-inline-size: 75ch;
4238
- }
4239
- .ui-tracking-display {
4240
- letter-spacing: var(--ui-tracking-display);
4241
- }
4242
- .ui-tracking-body {
4243
- letter-spacing: var(--ui-tracking-body);
4244
- }
4245
- .ui-tracking-caps {
4246
- letter-spacing: var(--ui-tracking-caps);
4247
- }
4248
- }
4249
- @layer utilities {
4250
- .ui-border {
4251
- border: var(--ui-border-width-sm) solid var(--ui-color-border);
4252
- }
4253
- .ui-border-0 {
4254
- border: none;
4255
- }
4256
- .ui-rounded {
4257
- border-radius: var(--ui-radius-md);
4258
- }
4259
- .ui-rounded-none {
4260
- border-radius: 0;
4261
- }
4262
- .ui-rounded-sm {
4263
- border-radius: var(--ui-radius-sm);
4264
- }
4265
- .ui-rounded-lg {
4266
- border-radius: var(--ui-radius-lg);
4267
- }
4268
- .ui-rounded-full {
4269
- border-radius: var(--ui-radius-full);
4270
- }
4271
- .ui-bg {
4272
- background: var(--ui-color-bg);
4273
- }
4274
- .ui-bg-subtle {
4275
- background: var(--ui-color-bg-subtle);
4276
- }
4277
- .ui-bg-muted {
4278
- background: var(--ui-color-bg-muted);
4279
- }
4280
- .ui-bg-transparent {
4281
- background: transparent;
4282
- }
4283
- }
4284
- @layer utilities {
4285
- .ui-visually-hidden {
4286
- position: absolute;
4287
- block-size: calc(0.5rem / 8);
4288
- inline-size: calc(0.5rem / 8);
4289
- padding: 0;
4290
- margin: calc(0.5rem / -8);
4291
- overflow: hidden;
4292
- white-space: nowrap;
4293
- border: 0;
4294
- clip: rect(0 0 0 0);
4295
- clip-path: inset(50%);
4296
- }
4297
- .ui-visually-hidden--focusable:focus,
4298
- .ui-visually-hidden--focusable:active {
4299
- position: static;
4300
- block-size: auto;
4301
- inline-size: auto;
4302
- margin: 0;
4303
- overflow: visible;
4304
- white-space: normal;
4305
- clip: auto;
4306
- clip-path: none;
4307
- }
4308
- }
4309
- @view-transition {
4310
- navigation: auto;
4311
- }
4312
- @layer utilities {
4313
- @keyframes vt-fade-in {
4314
- from {
4315
- opacity: 0;
4316
- }
4317
- }
4318
- @keyframes vt-fade-out {
4319
- to {
4320
- opacity: 0;
4321
- }
4322
- }
4323
- @keyframes vt-slide-in-up {
4324
- from {
4325
- opacity: 0;
4326
- transform: translateY(1.25rem);
4327
- }
4328
- }
4329
- @keyframes vt-slide-out-up {
4330
- to {
4331
- opacity: 0;
4332
- transform: translateY(-1.25rem);
4333
- }
4334
- }
4335
- @keyframes vt-slide-in-down {
4336
- from {
4337
- opacity: 0;
4338
- transform: translateY(-1.25rem);
4339
- }
4340
- }
4341
- @keyframes vt-slide-out-down {
4342
- to {
4343
- opacity: 0;
4344
- transform: translateY(1.25rem);
4345
- }
4346
- }
4347
- @keyframes vt-slide-in-start {
4348
- from {
4349
- opacity: 0;
4350
- transform: translateX(-1.25rem);
4351
- }
4352
- }
4353
- @keyframes vt-slide-out-start {
4354
- to {
4355
- opacity: 0;
4356
- transform: translateX(-1.25rem);
4357
- }
4358
- }
4359
- @keyframes vt-slide-in-end {
4360
- from {
4361
- opacity: 0;
4362
- transform: translateX(1.25rem);
4363
- }
4364
- }
4365
- @keyframes vt-slide-out-end {
4366
- to {
4367
- opacity: 0;
4368
- transform: translateX(1.25rem);
4369
- }
4370
- }
4371
- @keyframes vt-scale-in {
4372
- from {
4373
- opacity: 0;
4374
- transform: scale(0.95);
4375
- }
4376
- }
4377
- @keyframes vt-scale-out {
4378
- to {
4379
- opacity: 0;
4380
- transform: scale(1.05);
4381
- }
4382
- }
4383
- .ui-transition-name-sidebar {
4384
- view-transition-name: sidebar;
4385
- }
4386
- .ui-transition-name-main {
4387
- view-transition-name: main;
4388
- }
4389
- .ui-transition-name-header {
4390
- view-transition-name: header;
4391
- }
4392
- .ui-transition-name-hero {
4393
- view-transition-name: hero;
4394
- }
4395
- .ui-transition-name-card {
4396
- view-transition-name: card;
4397
- }
4398
- .ui-transition-name-modal {
4399
- view-transition-name: modal;
4400
- }
4401
- .ui-transition-name-slide-up {
4402
- view-transition-name: slide-up;
4403
- }
4404
- .ui-transition-name-slide-down {
4405
- view-transition-name: slide-down;
4406
- }
4407
- .ui-transition-name-slide-start {
4408
- view-transition-name: slide-start;
4409
- }
4410
- .ui-transition-name-slide-end {
4411
- view-transition-name: slide-end;
4412
- }
4413
- .ui-transition-name-scale {
4414
- view-transition-name: scale;
4415
- }
4416
- .ui-transition-name-fade {
4417
- view-transition-name: fade;
4418
- }
4419
- .ui-transition-name-none {
4420
- view-transition-name: none;
4421
- }
4422
- ::view-transition-old(sidebar),
4423
- ::view-transition-new(sidebar),
4424
- ::view-transition-old(header),
4425
- ::view-transition-new(header) {
4426
- animation: none;
4427
- }
4428
- ::view-transition-old(root),
4429
- ::view-transition-new(root) {
4430
- animation-duration: var(--ui-duration-base);
4431
- animation-timing-function: var(--ui-ease-default);
4432
- }
4433
- ::view-transition-old(fade) {
4434
- animation: vt-fade-out var(--ui-duration-base) var(--ui-ease-out);
4435
- }
4436
- ::view-transition-new(fade) {
4437
- animation: vt-fade-in var(--ui-duration-base) var(--ui-ease-out);
4438
- }
4439
- ::view-transition-old(slide-up),
4440
- ::view-transition-old(main) {
4441
- animation: vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out);
4442
- }
4443
- ::view-transition-new(slide-up),
4444
- ::view-transition-new(main) {
4445
- animation: vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out);
4446
- }
4447
- ::view-transition-old(slide-down) {
4448
- animation: vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out);
4449
- }
4450
- ::view-transition-new(slide-down) {
4451
- animation: vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out);
4452
- }
4453
- ::view-transition-old(slide-start) {
4454
- animation: vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out);
4455
- }
4456
- ::view-transition-new(slide-start) {
4457
- animation: vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out);
4458
- }
4459
- ::view-transition-old(slide-end) {
4460
- animation: vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out);
4461
- }
4462
- ::view-transition-new(slide-end) {
4463
- animation: vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out);
4464
- }
4465
- ::view-transition-old(scale),
4466
- ::view-transition-old(modal),
4467
- ::view-transition-old(card) {
4468
- animation: vt-scale-out var(--ui-duration-base) var(--ui-ease-out);
4469
- }
4470
- ::view-transition-new(scale),
4471
- ::view-transition-new(modal),
4472
- ::view-transition-new(card) {
4473
- animation: vt-scale-in var(--ui-duration-base) var(--ui-ease-out);
4474
- }
4475
- ::view-transition-group(hero) {
4476
- animation-duration: var(--ui-duration-slow);
4477
- animation-timing-function: var(--ui-ease-in-out);
4478
- }
4479
- @media (prefers-reduced-motion: reduce) {
4480
- ::view-transition-old(*),
4481
- ::view-transition-new(*),
4482
- ::view-transition-group(*) {
4483
- animation-duration: 0s !important;
4484
- }
4485
- }
4486
- }
4487
- /* 99. Debug tools (dev only) */
4488
- .ui-debug-grid,
4489
- .ui-debug-grid-rows,
4490
- .ui-debug-baseline {
4491
- position: relative;
4492
- }
4493
- .ui-debug-grid {
4494
- --ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15);
4495
- }
4496
- .ui-debug-grid::after {
4497
- content: "";
4498
- position: absolute;
4499
- inset-block-start: 0;
4500
- inset-inline-start: 0;
4501
- z-index: var(--ui-z-debug);
4502
- block-size: 100%;
4503
- inline-size: 100%;
4504
- min-block-size: 100vh;
4505
- background-image: linear-gradient(to right, var(--ui-debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px);
4506
- pointer-events: none;
4507
- background-size: var(--ui-unit) var(--ui-unit);
4508
- background-position: 0 0;
4509
- }
4510
- .ui-debug-grid-rows {
4511
- --ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);
4512
- --ui-debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25);
4513
- }
4514
- .ui-debug-grid-rows::after {
4515
- content: "";
4516
- position: absolute;
4517
- inset-block-start: 0;
4518
- inset-inline-start: 0;
4519
- z-index: var(--ui-z-debug);
4520
- block-size: 100%;
4521
- inline-size: 100%;
4522
- min-block-size: 100vh;
4523
- background-image: linear-gradient(to right, var(--ui-debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px), linear-gradient(to bottom, var(--ui-debug-color-strong) 1px, transparent 1px);
4524
- pointer-events: none;
4525
- background-size: var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-row);
4526
- background-position: 0 0;
4527
- }
4528
- .ui-debug-baseline {
4529
- --ui-debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
4530
- }
4531
- .ui-debug-baseline::after {
4532
- content: "";
4533
- position: absolute;
4534
- inset-block-start: 0;
4535
- inset-inline-start: 0;
4536
- z-index: var(--ui-z-debug);
4537
- block-size: 100%;
4538
- inline-size: 100%;
4539
- min-block-size: 100vh;
4540
- background-image: linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px);
4541
- pointer-events: none;
4542
- background-size: 100% var(--ui-unit);
4543
- }
4544
- .ui-debug-outline * {
4545
- outline: 1px solid hsla(0, 100%, 50%, 0.5);
4546
- }
1
+ @import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Mono:wght@400;500&display=swap";@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;:root{--ui-color-primary: oklch(55% 0.22 250);--ui-color-success: oklch(60% 0.18 145);--ui-color-warning: oklch(75% 0.18 70);--ui-color-danger: oklch(60% 0.22 25);--ui-color-neutral: oklch(50% 0.02 250);--ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);--ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);--ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);--ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);--ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);--ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);--ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);--ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);--ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);--ui-color-neutral-500: var(--ui-color-neutral);--ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);--ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);--ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);--ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black)}:root{--ui-space-px: calc(var(--ui-unit) * 0.125);--ui-space-quarter: calc(var(--ui-unit) * 0.25);--ui-space-half: calc(var(--ui-unit) * 0.5);--ui-space-0: calc(var(--ui-unit) * 0.5);--ui-space-1: var(--ui-unit);--ui-space-2: calc(var(--ui-unit) * 2);--ui-space-3: calc(var(--ui-unit) * 3);--ui-space-4: calc(var(--ui-unit) * 4);--ui-space-6: calc(var(--ui-unit) * 6);--ui-space-8: calc(var(--ui-unit) * 8)}:root{--ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;--ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;--ui-font-size-xs: 0.75rem;--ui-font-size-sm: 0.875rem;--ui-font-size-md: 1rem;--ui-font-size-lg: 1.25rem;--ui-font-size-xl: 1.5rem;--ui-font-size-2xl: 1.75rem;--ui-font-size-3xl: 2rem;--ui-font-size-4xl: 2.5rem;--ui-leading-tight-xs: var(--ui-row-1);--ui-leading-tight-sm: var(--ui-row-1);--ui-leading-tight-md: calc(var(--ui-unit) * 3);--ui-leading-tight-lg: calc(var(--ui-unit) * 3);--ui-leading-xs: var(--ui-row-1);--ui-leading-sm: calc(var(--ui-unit) * 3);--ui-leading-md: calc(var(--ui-unit) * 3);--ui-leading-lg: var(--ui-row-2);--ui-leading-xl: var(--ui-row-2);--ui-leading-2xl: var(--ui-row-2);--ui-leading-3xl: calc(var(--ui-unit) * 5);--ui-leading-4xl: calc(var(--ui-unit) * 6);--ui-weight-normal: 400;--ui-weight-medium: 500;--ui-weight-semibold: 600;--ui-weight-bold: 700;--ui-tracking-display: -0.02em;--ui-tracking-body: 0;--ui-tracking-caps: 0.08em;--ui-heading-1-size: var(--ui-font-size-4xl);--ui-heading-1-line-height: var(--ui-leading-4xl);--ui-heading-1-weight: var(--ui-weight-bold);--ui-heading-1-tracking: var(--ui-tracking-display);--ui-heading-2-size: var(--ui-font-size-3xl);--ui-heading-2-line-height: var(--ui-leading-3xl);--ui-heading-2-weight: var(--ui-weight-bold);--ui-heading-2-tracking: -0.01em;--ui-heading-3-size: var(--ui-font-size-2xl);--ui-heading-3-line-height: var(--ui-leading-2xl);--ui-heading-3-weight: var(--ui-weight-semibold);--ui-heading-3-tracking: var(--ui-tracking-body);--ui-heading-4-size: var(--ui-font-size-xl);--ui-heading-4-line-height: var(--ui-leading-xl);--ui-heading-4-weight: var(--ui-weight-semibold);--ui-heading-4-tracking: var(--ui-tracking-body);--ui-heading-5-size: var(--ui-font-size-lg);--ui-heading-5-line-height: var(--ui-leading-sm);--ui-heading-5-weight: var(--ui-weight-medium);--ui-heading-5-tracking: var(--ui-tracking-body);--ui-body-size: var(--ui-font-size-md);--ui-body-line-height: var(--ui-leading-md);--ui-body-weight: var(--ui-weight-normal);--ui-body-tracking: var(--ui-tracking-body);--ui-body-sm-size: var(--ui-font-size-sm);--ui-body-sm-line-height: var(--ui-leading-sm);--ui-body-sm-weight: var(--ui-weight-normal);--ui-body-sm-tracking: var(--ui-tracking-body);--ui-caption-size: var(--ui-font-size-xs);--ui-caption-line-height: var(--ui-leading-xs);--ui-caption-weight: var(--ui-weight-normal);--ui-caption-tracking: 0.01em;--ui-lead-size: var(--ui-font-size-lg);--ui-lead-line-height: var(--ui-leading-lg);--ui-lead-weight: var(--ui-weight-normal);--ui-lead-tracking: var(--ui-tracking-body);--ui-eyebrow-size: var(--ui-font-size-xs);--ui-eyebrow-line-height: var(--ui-leading-xs);--ui-eyebrow-weight: var(--ui-weight-semibold);--ui-eyebrow-tracking: var(--ui-tracking-caps)}:root{--ui-unit: 8px;--ui-row: calc(var(--ui-unit) * 2);--ui-row-1: var(--ui-row);--ui-row-2: calc(var(--ui-row) * 2);--ui-row-3: calc(var(--ui-row) * 3);--ui-row-4: calc(var(--ui-row) * 4);--ui-row-5: calc(var(--ui-row) * 5);--ui-row-6: calc(var(--ui-row) * 6)}:root{--ui-radius-sm: calc(var(--ui-unit) * 0.5);--ui-radius-md: var(--ui-unit);--ui-radius-lg: calc(var(--ui-unit) * 2);--ui-radius-full: 9999px}:root{--ui-border-width-sm: calc(var(--ui-unit) * 0.125);--ui-border-width-md: calc(var(--ui-unit) * 0.25);--ui-border-width-lg: calc(var(--ui-unit) * 0.5)}:root{--ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);--ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);--ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15)}@layer tokens{:root{--ui-z-base: 0;--ui-z-sticky: 100;--ui-z-dropdown: 200;--ui-z-overlay: 300;--ui-z-modal: 400;--ui-z-popover: 500;--ui-z-tooltip: 600;--ui-z-toast: 700;--ui-z-debug: 9999}}@layer tokens{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}:root{--ui-color-text: var(--ui-color-neutral-900);--ui-color-text-muted: var(--ui-color-neutral-500);--ui-color-text-inverse: var(--ui-color-neutral-50);--ui-color-bg: var(--ui-color-neutral-50);--ui-color-bg-subtle: var(--ui-color-neutral-100);--ui-color-bg-muted: var(--ui-color-neutral-200);--ui-color-border: var(--ui-color-neutral-200);--ui-color-border-strong: var(--ui-color-neutral-300);--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light)}[data-theme=dark]{--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}:root{--ui-spacing-xs: var(--ui-space-1);--ui-spacing-sm: var(--ui-space-2);--ui-spacing-md: var(--ui-space-4);--ui-spacing-lg: var(--ui-space-6);--ui-spacing-xl: var(--ui-space-8);--ui-spacing-gutter: var(--ui-space-4);--ui-spacing-section: var(--ui-space-8)}:root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}@layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}@layer base{.ui-root{font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--ui-font-size-md, 1rem);line-height:var(--ui-leading-md, calc(0.5rem * 3));color:var(--ui-color-text, hsl(220, 10%, 10%));background:var(--ui-color-bg, hsl(220, 10%, 98%))}}@layer base{h1{margin-block-end:var(--ui-space-4);font-size:var(--ui-heading-1-size);font-weight:var(--ui-heading-1-weight);line-height:var(--ui-heading-1-line-height);letter-spacing:var(--ui-heading-1-tracking)}h2{margin-block-end:var(--ui-space-3);font-size:var(--ui-heading-2-size);font-weight:var(--ui-heading-2-weight);line-height:var(--ui-heading-2-line-height);letter-spacing:var(--ui-heading-2-tracking)}h3{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-3-size);font-weight:var(--ui-heading-3-weight);line-height:var(--ui-heading-3-line-height);letter-spacing:var(--ui-heading-3-tracking)}h4{margin-block-end:var(--ui-space-2);font-size:var(--ui-heading-4-size);font-weight:var(--ui-heading-4-weight);line-height:var(--ui-heading-4-line-height);letter-spacing:var(--ui-heading-4-tracking)}h5,h6{margin-block-end:var(--ui-space-1);font-size:var(--ui-heading-5-size);font-weight:var(--ui-heading-5-weight);line-height:var(--ui-heading-5-line-height);letter-spacing:var(--ui-heading-5-tracking)}p{margin-block-end:var(--ui-space-2);font-size:var(--ui-body-size);line-height:var(--ui-body-line-height);letter-spacing:var(--ui-body-tracking)}p:last-child{margin-block-end:0}strong,b{font-weight:var(--ui-weight-bold);line-height:0}small{font-size:var(--ui-caption-size);line-height:0}code{padding:0 var(--ui-space-1);font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:0;vertical-align:baseline;background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-sm)}pre{padding:var(--ui-space-2);margin-block-end:var(--ui-space-2);overflow-x:auto;font-family:var(--ui-font-mono);font-size:var(--ui-body-sm-size);line-height:var(--ui-body-sm-line-height);background:var(--ui-color-bg-muted);border-radius:var(--ui-radius-md)}pre code{padding:0;background:none}a{text-decoration:underline;color:var(--ui-color-primary);transition:color var(--ui-duration-fast) var(--ui-ease-default)}a:hover{color:var(--ui-color-primary-hover)}a:visited{color:var(--ui-color-primary)}@media(width < 45.625rem){h1{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}h2{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}h3{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-sm)}h4{font-size:1.125rem;line-height:var(--ui-leading-sm)}}@media(width > 67.5rem){h1{font-size:calc(var(--ui-unit)*6);line-height:calc(var(--ui-unit)*7)}h2{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}}}@layer primitives{.ui-box{--ui-_padding: var(--ui-box-padding, 0);--ui-_bg: var(--ui-box-bg, transparent);--ui-_color: var(--ui-box-color, inherit);--ui-_radius: var(--ui-box-radius, 0);padding:var(--ui-_padding);color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-box--p-1{--ui-_padding: var(--ui-space-1, 0.5rem)}.ui-box--p-2{--ui-_padding: var(--ui-space-2, 1rem)}.ui-box--p-3{--ui-_padding: var(--ui-space-3, 1.5rem)}.ui-box--p-4{--ui-_padding: var(--ui-space-4, 2rem)}.ui-box--bg-subtle{--ui-_bg: var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.ui-box--bg-muted{--ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%))}.ui-box--rounded{--ui-_radius: var(--ui-radius-md, 0.5rem)}.ui-box--rounded-lg{--ui-_radius: var(--ui-radius-lg, 1rem)}}@layer primitives{.ui-stack{display:flex;flex-direction:column;gap:var(--ui-stack-gap, var(--ui-space-2))}.ui-stack--xs{--ui-stack-gap: var(--ui-space-1)}.ui-stack--sm{--ui-stack-gap: var(--ui-space-2)}.ui-stack--md{--ui-stack-gap: var(--ui-space-4)}.ui-stack--lg{--ui-stack-gap: var(--ui-space-6)}.ui-stack--xl{--ui-stack-gap: var(--ui-space-8)}}@layer primitives{.ui-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-cluster-gap, var(--ui-space-2))}.ui-cluster--xs{--ui-cluster-gap: var(--ui-space-1)}.ui-cluster--sm{--ui-cluster-gap: var(--ui-space-2)}.ui-cluster--md{--ui-cluster-gap: var(--ui-space-4)}.ui-cluster--lg{--ui-cluster-gap: var(--ui-space-6)}.ui-cluster--start{justify-content:flex-start}.ui-cluster--center{justify-content:center}.ui-cluster--end{justify-content:flex-end}.ui-cluster--between{justify-content:space-between}}@layer primitives{.ui-flex{--ui-_gap: var(--ui-flex-gap, var(--ui-space-2, 1rem));--ui-_direction: var(--ui-flex-direction, row);--ui-_wrap: var(--ui-flex-wrap, nowrap);--ui-_align: var(--ui-flex-align, stretch);--ui-_justify: var(--ui-flex-justify, flex-start);display:flex;flex-direction:var(--ui-_direction);flex-wrap:var(--ui-_wrap);align-items:var(--ui-_align);justify-content:var(--ui-_justify);gap:var(--ui-_gap)}.ui-flex--row{--ui-_direction: row}.ui-flex--col{--ui-_direction: column}.ui-flex--row-reverse{--ui-_direction: row-reverse}.ui-flex--col-reverse{--ui-_direction: column-reverse}.ui-flex--wrap{--ui-_wrap: wrap}.ui-flex--nowrap{--ui-_wrap: nowrap}.ui-flex--items-start{--ui-_align: flex-start}.ui-flex--items-center{--ui-_align: center}.ui-flex--items-end{--ui-_align: flex-end}.ui-flex--items-baseline{--ui-_align: baseline}.ui-flex--justify-start{--ui-_justify: flex-start}.ui-flex--justify-center{--ui-_justify: center}.ui-flex--justify-end{--ui-_justify: flex-end}.ui-flex--justify-between{--ui-_justify: space-between}.ui-flex--justify-around{--ui-_justify: space-around}.ui-flex--gap-0{--ui-_gap: 0}.ui-flex--gap-1{--ui-_gap: var(--ui-space-1, 0.5rem)}.ui-flex--gap-2{--ui-_gap: var(--ui-space-2, 1rem)}.ui-flex--gap-3{--ui-_gap: var(--ui-space-3, 1.5rem)}.ui-flex--gap-4{--ui-_gap: var(--ui-space-4, 2rem)}}@layer primitives{.ui-center{display:flex;align-items:center;justify-content:center}.ui-center--column{flex-direction:column}}@layer primitives{.ui-grid{display:grid;gap:var(--ui-grid-gap, var(--ui-space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}}@layer primitives{.ui-app-shell{min-block-size:100vh}}@layer primitives{.ui-sidebar{display:flex;flex-direction:column;position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-sticky);block-size:100vh;inline-size:var(--ui-sidebar-width, calc(var(--ui-unit) * 30));overflow-y:auto;background:var(--ui-color-bg-subtle);box-shadow:inset calc(var(--ui-border-width-sm)*-1) 0 0 0 var(--ui-color-border)}.ui-sidebar--sm{--ui-sidebar-width: calc(var(--ui-unit) * 24)}.ui-sidebar--md{--ui-sidebar-width: calc(var(--ui-unit) * 30)}.ui-sidebar--lg{--ui-sidebar-width: calc(var(--ui-unit) * 40)}.ui-sidebar--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-border-width-sm) 0 0 0 var(--ui-color-border)}}@layer primitives{.ui-sidebar-nav{--ui-_width: var(--ui-sidebar-nav-width, calc(var(--ui-unit) * 30));--ui-_bg: var(--ui-sidebar-nav-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-sidebar-nav-border-color, var(--ui-color-border));--ui-_padding: var(--ui-sidebar-nav-padding, var(--ui-space-2));display:flex;flex-direction:column;block-size:100%;inline-size:var(--ui-_width);background:var(--ui-_bg)}.ui-sidebar-nav__header{--ui-_padding: var(--ui-sidebar-nav-header-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 calc(var(--ui-border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__content{flex:1;padding:var(--ui-_padding);overflow-y:auto}.ui-sidebar-nav__footer{--ui-_padding: var(--ui-sidebar-nav-footer-padding, var(--ui-space-2));flex-shrink:0;padding:var(--ui-_padding);box-shadow:inset 0 var(--ui-border-width-sm) 0 0 var(--ui-_border-color)}.ui-sidebar-nav__group{margin-block-end:var(--ui-space-2)}.ui-sidebar-nav__group-label{--ui-_font-size: var(--ui-sidebar-nav-group-label-size, var(--ui-size-xs));--ui-_color: var(--ui-sidebar-nav-group-label-color, var(--ui-color-text-muted));--ui-_weight: var(--ui-sidebar-nav-group-label-weight, var(--ui-weight-bold));display:block;padding:var(--ui-space-1) var(--ui-space-2);margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-_color)}.ui-sidebar-nav__group-items{display:flex;flex-direction:column;gap:var(--ui-space-half);padding:0;margin:0;list-style:none}.ui-sidebar-nav__subgroup-label{display:block;padding:var(--ui-space-1) var(--ui-space-2);margin:0;margin-block-start:var(--ui-space-1);font-size:var(--ui-size-xs);font-weight:var(--ui-weight-medium);color:var(--ui-color-text-muted)}.ui-sidebar-nav__item{--ui-_height: var(--ui-sidebar-nav-item-height, var(--ui-row-2));--ui-_padding-inline: var(--ui-sidebar-nav-item-padding-inline, var(--ui-space-2));--ui-_font-size: var(--ui-sidebar-nav-item-size, var(--ui-size-sm));--ui-_color: var(--ui-sidebar-nav-item-color, var(--ui-color-text));--ui-_bg: var(--ui-sidebar-nav-item-bg, transparent);--ui-_radius: var(--ui-sidebar-nav-item-radius, var(--ui-radius-sm));display:flex;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);font-size:var(--ui-_font-size);font-weight:var(--ui-_weight, normal);text-decoration:none;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius);cursor:pointer;transition:background var(--ui-duration-fast) var(--ui-easing-default),color var(--ui-duration-fast) var(--ui-easing-default)}.ui-sidebar-nav__item:hover{--ui-_bg: var(--ui-sidebar-nav-item-hover-bg, var(--ui-color-bg-muted))}.ui-sidebar-nav__item:visited{color:var(--ui-_color)}.ui-sidebar-nav__item:focus-visible{outline:2px solid var(--ui-color-focus);outline-offset:-2px}.ui-sidebar-nav__item--active{--ui-_bg: var(--ui-sidebar-nav-item-active-bg, var(--ui-color-primary-subtle));--ui-_color: var(--ui-sidebar-nav-item-active-color, var(--ui-color-primary-hover));--ui-_weight: var(--ui-sidebar-nav-item-active-weight, var(--ui-weight-medium))}.ui-sidebar-nav__item--nested{--ui-_padding-inline-start: var(--ui-sidebar-nav-item-nested-indent, var(--ui-space-4));padding-inline-start:var(--ui-_padding-inline-start)}.ui-sidebar-nav__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-sidebar-nav__icon{display:flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-size-md);inline-size:var(--ui-size-md)}.ui-sidebar-nav__label{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-sidebar-nav__badge{flex-shrink:0;margin-inline-start:auto}.ui-sidebar-nav--collapsed{--ui-_width: var(--ui-sidebar-nav-width-collapsed, var(--ui-row-3))}.ui-sidebar-nav--collapsed .ui-sidebar-nav__label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__badge,.ui-sidebar-nav--collapsed .ui-sidebar-nav__group-label,.ui-sidebar-nav--collapsed .ui-sidebar-nav__subgroup-label{display:none}.ui-sidebar-nav--collapsed .ui-sidebar-nav__item{justify-content:center;padding-inline:var(--ui-space-1)}}@layer primitives{.ui-main{margin-inline-start:var(--ui-sidebar-width, calc(var(--ui-unit) * 30))}.ui-main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--ui-sidebar-width, calc(var(--ui-unit) * 30))}.ui-main--full{margin-inline-start:0;margin-inline-end:0}}@layer primitives{.ui-container{max-inline-size:var(--ui-container-width, calc(var(--ui-unit) * 120));padding-inline:var(--ui-space-4)}.ui-container--center{margin-inline:auto}.ui-container--sm{--ui-container-width: calc(var(--ui-unit) * 80)}.ui-container--md{--ui-container-width: calc(var(--ui-unit) * 100)}.ui-container--lg{--ui-container-width: calc(var(--ui-unit) * 120)}.ui-container--xl{--ui-container-width: calc(var(--ui-unit) * 160)}.ui-container--full{max-inline-size:none}}@layer components.tokens{.ui-button{--ui-_accent: var(--ui-button-accent, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_height: var(--ui-button-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-button-padding-x, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-button-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-weight: var(--ui-button-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-button-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-_accent);--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 80%, black);--ui-_text: var(--ui-button-text, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-button--sm{--ui-ctx-size: var(--ui-size-sm, 0.75rem);--ui-_height: var(--ui-button-height-sm, calc(var(--ui-row, 1rem) * 1.5));--ui-_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-button--md{--ui-ctx-size: var(--ui-size-md, 1rem);--ui-_height: var(--ui-button-height-md, var(--ui-row-2, 2rem));--ui-_font-size: var(--ui-button-font-size-md, var(--ui-font-size-sm, 0.875rem))}.ui-button--lg{--ui-ctx-size: var(--ui-size-lg, 1.25rem);--ui-_height: var(--ui-button-height-lg, calc(var(--ui-row, 1rem) * 2.5));--ui-_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, 1.5rem));--ui-_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-button--secondary{--ui-_bg: var(--ui-color-bg-muted, hsl(220, 10%, 90%));--ui-_bg-hover: var(--ui-color-border-strong, hsl(220, 10%, 80%));--ui-_text: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-button--ghost{--ui-_bg: transparent;--ui-_bg-hover: color-mix(in oklch, var(--ui-_accent) 10%, transparent);--ui-_text: var(--ui-_accent)}.ui-button--outline{--ui-_bg: transparent;--ui-_bg-hover: var(--ui-_accent);--ui-_text: var(--ui-_accent);--ui-_text-hover: var(--ui-color-text-inverse, hsl(220, 10%, 98%));--ui-_border: var(--ui-border-width-sm, 0.0625rem) solid currentColor}.ui-button--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-button--link{--ui-_bg: transparent;--ui-_bg-hover: transparent;--ui-_text: var(--ui-_accent);--ui-_text-hover: color-mix(in oklch, var(--ui-_accent) 70%, black);--ui-_height: auto;--ui-_padding-x: 0;--ui-_radius: 0}.ui-button--icon{--ui-_padding-x: 0}.ui-button--radius-none{--ui-_radius: 0}.ui-button--radius-sm{--ui-_radius: var(--ui-radius-sm, 0.25rem)}.ui-button--radius-lg{--ui-_radius: var(--ui-radius-lg, 1rem)}.ui-button--radius-full{--ui-_radius: 624.9375rem}}@layer components.styles{.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-1, 0.5rem);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);margin:0;font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_text);background:var(--ui-_bg);border:var(--ui-_border, none);border-radius:var(--ui-_radius);cursor:pointer;transition:background-color var(--ui-duration-base) var(--ui-ease-default),color var(--ui-duration-base) var(--ui-ease-default),transform var(--ui-duration-fast) var(--ui-ease-default)}.ui-button:hover,.ui-button--hover{color:var(--ui-_text-hover, var(--ui-_text));background:var(--ui-_bg-hover)}.ui-button:focus-visible,.ui-button--focus{outline:var(--ui-border-width-md, 0.125rem) solid var(--ui-color-focus, oklch(75% 0.15 250deg));outline-offset:var(--ui-border-width-md, 0.125rem)}.ui-button:active,.ui-button--active{transform:scale(0.98)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-button:disabled:hover{background:var(--ui-_bg);transform:none}.ui-button--icon{inline-size:var(--ui-_height)}.ui-button--block{inline-size:100%}.ui-button--link{text-decoration:underline;text-underline-offset:var(--ui-space-quarter)}.ui-button--link:hover{text-decoration-thickness:var(--ui-space-quarter)}.ui-button__icon{flex-shrink:0;block-size:1em;inline-size:1em}.ui-button__icon--start{order:-1}.ui-button__icon--end{order:1}.ui-button--loading{position:relative;opacity:.7;pointer-events:none}.ui-button--loading::after{content:"";position:absolute;block-size:1em;inline-size:1em;border:2px solid currentcolor;border-radius:50%;animation:button-spin .6s linear infinite;border-inline-end-color:rgba(0,0,0,0)}@keyframes button-spin{to{transform:rotate(360deg)}}}@layer components.tokens{.ui-button-group{--ui-_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(0.5rem / 2)))}}@layer components.styles{.ui-button-group{display:inline-flex}.ui-button-group>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group>.ui-button:first-child:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui-button-group>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui-button-group>.ui-button+.ui-button{margin-inline-start:calc(0.5rem/-8)}.ui-button-group>.ui-button:focus-visible{z-index:1}.ui-button-group--vertical{flex-direction:column}.ui-button-group--vertical>.ui-button:not(:first-child,:last-child){border-radius:0}.ui-button-group--vertical>.ui-button:first-child:not(:last-child){border-end-start-radius:0;border-end-end-radius:0}.ui-button-group--vertical>.ui-button:last-child:not(:first-child){border-start-start-radius:0;border-start-end-radius:0}.ui-button-group--vertical>.ui-button+.ui-button{margin-block-start:calc(0.5rem/-8);margin-inline-start:0}.ui-button-group--attached>.ui-button{border-inline-end-width:0}.ui-button-group--attached>.ui-button:last-child{border-inline-end-width:1px}.ui-button-group--attached>.ui-button+.ui-button{margin-inline-start:0}}@layer components.tokens{.ui-avatar{--ui-_size: var(--ui-avatar-size, calc(0.5rem * 5));--ui-_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_color: var(--ui-avatar-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-avatar-radius, 50%)}.ui-avatar--xs{--ui-_size: var(--ui-avatar-size-xs, calc(0.5rem * 3));--ui-_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, 0.75rem))}.ui-avatar--sm{--ui-_size: var(--ui-avatar-size-sm, calc(0.5rem * 4));--ui-_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-avatar--lg{--ui-_size: var(--ui-avatar-size-lg, calc(0.5rem * 6));--ui-_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-avatar--xl{--ui-_size: var(--ui-avatar-size-xl, calc(0.5rem * 8));--ui-_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, 1.25rem))}.ui-avatar--square{--ui-_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, 0.5rem))}}@layer components.styles{.ui-avatar{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;position:relative;block-size:var(--ui-_size);inline-size:var(--ui-_size);overflow:hidden;font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;text-transform:uppercase;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-avatar__image{position:absolute;inset:0;block-size:100%;inline-size:100%;object-fit:cover;border-radius:inherit}.ui-avatar__fallback{display:flex;align-items:center;justify-content:center;block-size:100%;inline-size:100%;user-select:none}.ui-avatar-group{display:flex;flex-direction:row-reverse;justify-content:flex-end}.ui-avatar-group>.ui-avatar{margin-inline-start:calc(var(--ui-_size)*-0.25);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-bg, hsl(220, 10%, 98%))}.ui-avatar-group>.ui-avatar:last-child{margin-inline-start:0}}@layer components.tokens{.ui-badge{--ui-_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_height: var(--ui-badge-height, calc(var(--ui-row, 1rem) * 1.25));--ui-_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, 0.75rem));--ui-_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, 500));--ui-_radius: var(--ui-badge-radius, var(--ui-radius-full, 9999px));--ui-_bg: var(--ui-_accent);--ui-_text: var(--ui-badge-text, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-badge--sm{--ui-_height: var(--ui-badge-height-sm, var(--ui-row, 1rem));--ui-_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, 0.25rem));--ui-_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, 0.75rem) * 0.85))}.ui-badge--primary{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}.ui-badge--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg));--ui-_text: var(--ui-color-text, hsl(220, 10%, 10%))}.ui-badge--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg));--ui-_text: var(--ui-color-text-inverse, hsl(220, 10%, 98%))}}@layer components.styles{.ui-badge{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-size:var(--ui-_font-size);font-weight:var(--ui-_font-weight);line-height:1;white-space:nowrap;color:var(--ui-_text);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}@layer components.tokens{.ui-card{--ui-_padding: var(--ui-card-padding, var(--ui-space-4));--ui-_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));--ui-_bg: var(--ui-card-bg, var(--ui-color-bg));--ui-_border-color: var(--ui-card-border-color, var(--ui-color-border));--ui-_radius: var(--ui-card-radius, var(--ui-radius-md))}.ui-card--subtle{--ui-_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle))}.ui-card--muted{--ui-_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted))}.ui-card--sm{--ui-_padding: var(--ui-card-padding-sm, var(--ui-space-2))}.ui-card--lg{--ui-_padding: var(--ui-card-padding-lg, var(--ui-space-6))}.ui-card--flush{--ui-_padding: 0;--ui-_border-width: 0}}@layer components.styles{.ui-card{border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius);background:var(--ui-_bg);padding:calc(var(--ui-_padding) - var(--ui-_border-width));line-height:var(--ui-row-1)}}@layer components.tokens{.ui-data-list{--ui-_gap: var(--ui-data-list-gap, calc(0.5rem * 2));--ui-_item-gap: var(--ui-data-list-item-gap, calc(0.5rem * 1));--ui-_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_value-color: var(--ui-data-list-value-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}@layer components.styles{.ui-data-list{display:flex;flex-direction:column;gap:var(--ui-_gap);margin:0;line-height:var(--ui-row-1, 1rem)}.ui-data-list__item{display:flex;flex-direction:column;gap:var(--ui-_item-gap)}.ui-data-list__label{font-size:var(--ui-font-size-sm, 0.875rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);color:var(--ui-_label-color)}.ui-data-list__value{margin:0;line-height:var(--ui-row-1, 1rem);color:var(--ui-_value-color)}.ui-data-list--horizontal .ui-data-list__item{flex-direction:row;align-items:baseline;justify-content:space-between;gap:calc(0.5rem*2)}.ui-data-list--horizontal .ui-data-list__label{flex-shrink:0}.ui-data-list--horizontal .ui-data-list__value{text-align:end}.ui-data-list--divided .ui-data-list__item{padding-block-end:calc(var(--ui-_gap) - var(--ui-border-width-sm, 0.0625rem));border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-color-border, hsl(220, 10%, 90%))}.ui-data-list--divided .ui-data-list__item:last-child{padding-block-end:0;border-block-end:none}.ui-data-list--striped .ui-data-list__item:nth-child(odd){padding:calc(0.5rem*1);background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));border-radius:var(--ui-radius-sm, 0.25rem)}.ui-data-list--sm{--ui-_gap: calc(0.5rem * 1);--ui-_item-gap: 0;font-size:var(--ui-font-size-sm, 0.875rem)}.ui-data-list--lg{--ui-_gap: calc(0.5rem * 3);--ui-_item-gap: calc(0.5rem * 1);font-size:var(--ui-font-size-lg, 1.25rem)}}@layer components.tokens{.ui-icon{--ui-_size: var(--ui-icon-size, var(--ui-ctx-size, 1rem));--ui-_stroke: var(--ui-icon-stroke, 2)}.ui-icon--xs{--ui-_size: var(--ui-icon-size-xs, var(--ui-size-xs, 0.5rem))}.ui-icon--sm{--ui-_size: var(--ui-icon-size-sm, var(--ui-size-sm, 0.75rem))}.ui-icon--md{--ui-_size: var(--ui-icon-size-md, var(--ui-size-md, 1rem))}.ui-icon--lg{--ui-_size: var(--ui-icon-size-lg, var(--ui-size-lg, 1.25rem))}.ui-icon--xl{--ui-_size: var(--ui-icon-size-xl, var(--ui-size-xl, 1.5rem))}.ui-icon--stroke-thin{--ui-_stroke: var(--ui-icon-stroke-thin, 1)}.ui-icon--stroke-thick{--ui-_stroke: var(--ui-icon-stroke-thick, 2.5)}}@layer components.styles{.ui-icon{display:inline-block;flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;color:currentcolor;fill:none;stroke:currentcolor;stroke-width:var(--ui-_stroke);stroke-linecap:round;stroke-linejoin:round}.ui-icon--filled{fill:currentcolor;stroke:none}.ui-icon--spin{animation:icon-spin 1s linear infinite}@keyframes icon-spin{to{transform:rotate(360deg)}}}@layer components.tokens{.ui-status{--ui-_size: var(--ui-status-size, calc(0.5rem * 1));--ui-_color: var(--ui-status-color, var(--ui-color-text-muted));--ui-_gap: var(--ui-status-gap, calc(0.5rem * 1))}.ui-status--success{--ui-_color: var(--ui-color-success)}.ui-status--warning{--ui-_color: var(--ui-color-warning)}.ui-status--danger{--ui-_color: var(--ui-color-danger)}.ui-status--info{--ui-_color: var(--ui-color-primary)}}@layer components.styles{.ui-status{display:inline-flex;align-items:center;gap:var(--ui-_gap)}.ui-status__dot{flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);background:var(--ui-_color);border-radius:50%}.ui-status--pulse .ui-status__dot{position:relative}.ui-status--pulse .ui-status__dot::before{content:"";position:absolute;inset:0;background:var(--ui-_color);border-radius:50%;animation:status-pulse 2s infinite}@keyframes status-pulse{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}.ui-status--sm{--ui-_size: calc(0.5rem * 0.75);--ui-_gap: calc(0.5rem * 0.75)}.ui-status--lg{--ui-_size: calc(0.5rem * 1.5);--ui-_gap: calc(0.5rem * 1.5)}}@layer components.tokens{.ui-table{--ui-_font-size: var(--ui-table-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_border-color: var(--ui-table-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_header-bg: var(--ui-table-header-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_cell-padding-x: var(--ui-table-cell-padding-x, var(--ui-space-2, 1rem));--ui-_cell-padding-y: var(--ui-table-cell-padding-y, var(--ui-space-1, 0.5rem))}.ui-table--compact{--ui-_cell-padding-y: var(--ui-space-0, 0.25rem);--ui-_cell-padding-x: var(--ui-space-1, 0.5rem);--ui-_font-size: var(--ui-font-size-xs, 0.75rem)}}@layer components.styles{.ui-table{inline-size:100%;font-size:var(--ui-_font-size);border-collapse:separate;border-spacing:0}.ui-table th,.ui-table td{padding-block-start:var(--ui-_cell-padding-y);padding-block-end:calc(var(--ui-_cell-padding-y) - var(--ui-border-width-sm, 0.0625rem));padding-inline:var(--ui-_cell-padding-x);line-height:calc(var(--ui-unit, 0.5rem)*3);text-align:start;border-block-end:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color)}.ui-table th{font-weight:var(--ui-weight-medium, 500);background:var(--ui-_header-bg)}.ui-table--striped tbody tr:nth-child(odd){background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.ui-table--striped th{background:var(--ui-color-bg-muted, hsl(220, 10%, 90%))}}@layer components.tokens{.ui-tag{--ui-_height: var(--ui-tag-height, calc(0.5rem * 3));--ui-_padding-x: var(--ui-tag-padding-x, var(--ui-space-1, 0.5rem));--ui-_gap: var(--ui-tag-gap, calc(0.5rem * 0.5));--ui-_radius: var(--ui-tag-radius, var(--ui-radius-full, 9999px));--ui-_font-size: var(--ui-tag-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-tag-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_color: var(--ui-tag-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-tag--sm{--ui-_height: var(--ui-tag-height-sm, calc(0.5rem * 2.5));--ui-_padding-x: var(--ui-tag-padding-x-sm, calc(0.5rem * 1));--ui-_font-size: var(--ui-tag-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-tag--primary{--ui-_bg: var(--ui-tag-primary-bg, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color: var(--ui-tag-primary-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-tag--success{--ui-_bg: var(--ui-tag-success-bg, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_color: var(--ui-tag-success-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-tag--warning{--ui-_bg: var(--ui-tag-warning-bg, var(--ui-color-warning, oklch(75% 0.18 70deg)));--ui-_color: var(--ui-tag-warning-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-tag--danger{--ui-_bg: var(--ui-tag-danger-bg, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_color: var(--ui-tag-danger-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}@layer components.styles{.ui-tag{display:inline-flex;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:1;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-tag:disabled,.ui-tag[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ui-tag__remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;margin-inline-start:calc(var(--ui-_gap)*-0.5);color:currentcolor;background:none;border:none;opacity:.7;cursor:pointer}.ui-tag__remove:hover{opacity:1}.ui-tag-group{display:flex;flex-wrap:wrap;gap:calc(0.5rem*.5)}}@layer components.tokens{.ui-accordion{--ui-_border-color: var(--ui-accordion-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_border-width: var(--ui-accordion-border-width, 1px);--ui-_radius: var(--ui-accordion-radius, var(--ui-radius-md, calc(0.5rem * 1)))}}@layer components.styles{.ui-accordion{border-radius:var(--ui-_radius);outline:var(--ui-_border-width) solid var(--ui-_border-color);outline-offset:calc(var(--ui-_border-width)*-1)}.ui-accordion>.ui-disclosure{--ui-_border-width: 0;border:none;border-radius:0}.ui-accordion>.ui-disclosure+.ui-disclosure{border-block-start:1px solid var(--ui-_border-color)}.ui-accordion>.ui-disclosure:first-child .ui-disclosure__trigger{border-start-start-radius:var(--ui-_radius);border-start-end-radius:var(--ui-_radius)}.ui-accordion>.ui-disclosure:last-child .ui-disclosure__trigger{border-end-start-radius:var(--ui-_radius);border-end-end-radius:var(--ui-_radius)}.ui-accordion>.ui-disclosure:last-child .ui-disclosure__content{border-end-start-radius:var(--ui-_radius);border-end-end-radius:var(--ui-_radius)}.ui-accordion--borderless{border:none}.ui-accordion--borderless>.ui-disclosure+.ui-disclosure{border-block-start:none}.ui-accordion--separated{display:flex;flex-direction:column;gap:calc(0.5rem*1);border:none}.ui-accordion--separated>.ui-disclosure{border:1px solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-accordion--separated>.ui-disclosure+.ui-disclosure{border-block-start:1px solid var(--ui-_border-color)}}@layer components.tokens{.ui-disclosure{--ui-_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_border-width: var(--ui-disclosure-border-width, 1px);--ui-_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(0.5rem * 1)));--ui-_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(1rem * 3)));--ui-_padding-x: var(--ui-disclosure-padding-x, calc(0.5rem * 2));--ui-_padding-y: var(--ui-disclosure-padding-y, calc(0.5rem * 2))}}@layer components.styles{.ui-disclosure{box-sizing:border-box;border-radius:var(--ui-_radius);outline:var(--ui-_border-width) solid var(--ui-_border-color);outline-offset:calc(var(--ui-_border-width)*-1)}.ui-disclosure:not([open]){block-size:var(--ui-_trigger-height)}.ui-disclosure__trigger{display:flex;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);block-size:var(--ui-_trigger-height);inline-size:100%;padding-inline:var(--ui-_padding-x);font-weight:var(--ui-weight-medium, 500);line-height:1;text-align:start;cursor:pointer;list-style:none}.ui-disclosure__trigger::-webkit-details-marker{display:none}.ui-disclosure__trigger::marker{display:none}.ui-disclosure__trigger:hover{background:var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.02))}.ui-disclosure__icon{flex-shrink:0;transition:transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-disclosure[open] .ui-disclosure__icon{transform:rotate(180deg)}.ui-disclosure__content{padding:0 var(--ui-_padding-x) var(--ui-_padding-y)}.ui-disclosure--animate .ui-disclosure__content{animation:disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}@keyframes disclosure-open{from{opacity:0;transform:translateY(calc(0.5rem * -1))}to{opacity:1;transform:translateY(0)}}.ui-disclosure--borderless{--ui-_border-width: 0;border:none;border-radius:0}.ui-disclosure--flush .ui-disclosure__trigger{padding-inline:0}.ui-disclosure--flush .ui-disclosure__content{padding-inline:0}}@layer components.tokens{.ui-alert{--ui-_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));--ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));--ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: color-mix(in oklch, var(--ui-_accent) 8%, white);--ui-_border-color: var(--ui-_accent);--ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_icon-color: var(--ui-_accent)}.ui-alert--info{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg))}.ui-alert--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-alert--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-alert--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}}@layer components.styles{.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-_gap);padding:calc(var(--ui-_padding) - var(--ui-_border-width));padding-inline:var(--ui-_padding);color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius);border-inline-start-width:calc(0.5rem*.5)}.ui-alert__icon{flex-shrink:0;color:var(--ui-_icon-color)}.ui-alert__content{flex:1;min-inline-size:0}.ui-alert__title{margin:0;font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem)}.ui-alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:none;border:none;cursor:pointer}.ui-alert__close:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}}@layer components.tokens{.ui-progress{--ui-_height: var(--ui-progress-height, calc(0.5rem * 1));--ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_fill: var(--ui-progress-fill, var(--ui-color-primary));--ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px))}.ui-progress--sm{--ui-_height: calc(0.5rem * 1)}.ui-progress--lg{--ui-_height: calc(0.5rem * 2)}}@layer components.styles{.ui-progress{position:relative;block-size:var(--ui-_height);overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-progress__bar{block-size:100%;background:var(--ui-_fill);border-radius:var(--ui-_radius);transition:inline-size var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}.ui-progress--indeterminate .ui-progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.ui-progress--striped .ui-progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.ui-progress--animated .ui-progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}.ui-progress--success{--ui-_fill: var(--ui-color-success)}.ui-progress--warning{--ui-_fill: var(--ui-color-warning)}.ui-progress--danger{--ui-_fill: var(--ui-color-danger)}}@layer components.tokens{.ui-skeleton{--ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));--ui-_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)))}}@layer components.styles{.ui-skeleton{display:block;position:relative;overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--ui-_shimmer) 50%, transparent 100%);animation:skeleton-shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.ui-skeleton--text{block-size:calc(0.5rem*2);inline-size:100%}.ui-skeleton--heading{block-size:calc(0.5rem*3);inline-size:60%}.ui-skeleton--circle{block-size:calc(0.5rem*5);inline-size:calc(0.5rem*5);border-radius:50%}.ui-skeleton--rect{block-size:calc(0.5rem*20);inline-size:100%}.ui-skeleton--static::after{animation:none}.ui-skeleton--pulse{animation:skeleton-pulse 1.5s infinite ease-in-out}.ui-skeleton--pulse::after{display:none}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}}@layer components.tokens{.ui-spinner{--ui-_size: var(--ui-spinner-size, calc(var(--ui-unit) * 4));--ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));--ui-_color: var(--ui-spinner-color, currentcolor);--ui-_track-color: var(--ui-spinner-track-color, transparent);--ui-_duration: var(--ui-spinner-duration, 750ms)}.ui-spinner--xs{--ui-_size: var(--ui-spinner-size-xs, calc(var(--ui-unit) * 2));--ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm))}.ui-spinner--sm{--ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit) * 3));--ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md))}.ui-spinner--lg{--ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit) * 5));--ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md))}.ui-spinner--xl{--ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit) * 6));--ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg))}}@layer components.styles{.ui-spinner{display:inline-block;flex-shrink:0;box-sizing:border-box;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;border:var(--ui-_border-width) solid var(--ui-_track-color);border-radius:50%;border-block-start-color:var(--ui-_color);animation:spinner-rotate var(--ui-_duration) linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}}@layer components.tokens{.ui-toast-viewport{--ui-_gap: var(--ui-toast-viewport-gap, calc(0.5rem * 1));--ui-_padding: var(--ui-toast-viewport-padding, calc(0.5rem * 2));--ui-_max-width: var(--ui-toast-viewport-max-width, 420px)}.ui-toast{--ui-_padding: var(--ui-toast-padding, calc(0.5rem * 2));--ui-_gap: var(--ui-toast-gap, calc(0.5rem * 1));--ui-_radius: var(--ui-toast-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-toast-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-toast-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_shadow: var(--ui-toast-shadow, var(--ui-shadow-lg))}.ui-toast--success{--ui-_border-color: var(--ui-color-success)}.ui-toast--warning{--ui-_border-color: var(--ui-color-warning)}.ui-toast--danger{--ui-_border-color: var(--ui-color-danger)}.ui-toast--info{--ui-_border-color: var(--ui-color-primary)}}@layer components.styles{.ui-toast-viewport{display:flex;flex-direction:column;gap:var(--ui-_gap);position:fixed;z-index:var(--ui-z-toast, 1000);max-inline-size:var(--ui-_max-width);padding:var(--ui-_padding);pointer-events:none;list-style:none}.ui-toast-viewport--top-end{inset-block-start:0;inset-inline-end:0}.ui-toast-viewport--top-start{inset-block-start:0;inset-inline-start:0}.ui-toast-viewport--bottom-end{inset-block-end:0;inset-inline-end:0}.ui-toast-viewport--bottom-start{inset-block-end:0;inset-inline-start:0}.ui-toast-viewport--top-center{inset-block-start:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast-viewport--bottom-center{inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%)}.ui-toast{display:flex;align-items:flex-start;gap:var(--ui-_gap);padding:var(--ui-_padding);background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);pointer-events:auto;outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.ui-toast__icon{flex-shrink:0}.ui-toast__content{flex:1;min-inline-size:0}.ui-toast__title{margin:0;font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem)}.ui-toast__description{margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-toast__action{flex-shrink:0}.ui-toast__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-row-1, 1rem);inline-size:var(--ui-row-1, 1rem);padding:0;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:none;border:none;cursor:pointer}.ui-toast__close:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}.ui-toast[data-state=open]{animation:toast-slide-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-toast[data-state=closed]{animation:toast-slide-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes toast-slide-in{from{opacity:0;transform:translateX(100%)}}@keyframes toast-slide-out{to{opacity:0;transform:translateX(100%)}}}@layer components.tokens{.ui-checkbox{--ui-_size: var(--ui-checkbox-size, calc(0.5rem * 2));--ui-_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, 0.25rem));--ui-_bg: var(--ui-checkbox-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-checkbox--lg{--ui-_size: var(--ui-checkbox-size-lg, calc(0.5rem * 3))}.ui-checkbox--error{--ui-_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}@layer components.styles{.ui-checkbox{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-_size);inline-size:var(--ui-_size);margin:0;vertical-align:middle;background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);cursor:pointer;appearance:none;transition:background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-checkbox::before{content:"";block-size:65%;inline-size:65%;background-color:var(--ui-_check-color);opacity:0;clip-path:polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-checkbox:hover:not(:disabled){border-color:var(--ui-_border-color-focus)}.ui-checkbox:focus-visible{border-color:var(--ui-_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-checkbox:checked{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-checkbox:checked::before{opacity:1}.ui-checkbox:indeterminate{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-checkbox:indeterminate::before{opacity:1;clip-path:polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%)}.ui-checkbox:disabled{opacity:.5;cursor:not-allowed}}@layer components.tokens{.ui-field{--ui-_gap: var(--ui-field-gap, 0)}}@layer components.styles{.ui-field{display:flex;flex-direction:column;gap:var(--ui-_gap)}.ui-field__control{display:flex;flex-direction:column}.ui-field--horizontal{flex-direction:row;flex-wrap:wrap;align-items:flex-start}.ui-field--horizontal>.ui-field__label{flex:0 0 auto;min-inline-size:calc(0.5rem*15);padding-block-start:calc(0.5rem*1)}.ui-field--horizontal>.ui-field__control{flex:1 1 0;min-inline-size:calc(0.5rem*20)}}@layer components.tokens{.ui-form-error{--ui-_color: var(--ui-form-error-color, var(--ui-color-danger));--ui-_size: var(--ui-form-error-size, var(--ui-font-size-sm, 0.875rem));--ui-_gap: var(--ui-form-error-gap, 0)}}@layer components.styles{.ui-form-error{display:flex;align-items:flex-start;gap:var(--ui-_gap);margin-block-start:var(--ui-_gap);font-size:var(--ui-_size);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--ui-_color)}.ui-form-error__icon{flex-shrink:0}}@layer components.tokens{.ui-form-helper{--ui-_color: var(--ui-form-helper-color, var(--ui-color-text-muted));--ui-_size: var(--ui-form-helper-size, var(--ui-font-size-sm, 0.875rem));--ui-_gap: var(--ui-form-helper-gap, 0)}}@layer components.styles{.ui-form-helper{display:block;margin-block-start:var(--ui-_gap);font-size:var(--ui-_size);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--ui-_color)}}@layer components.tokens{.ui-input{--ui-_height: var(--ui-input-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-input-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-input-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-input-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-input-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-input-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-input-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-input-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-input-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-input--sm{--ui-_height: var(--ui-input-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-input-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-input--lg{--ui-_height: var(--ui-input-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-input-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-input-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-input--filled{--ui-_bg: var(--ui-input-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-input--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-input--error{--ui-_border-color: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-input-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-input--success{--ui-_border-color: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-input-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}@layer components.styles{.ui-input{display:inline-flex;align-items:center;block-size:var(--ui-_height);padding-inline:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-input::placeholder{color:var(--ui-_placeholder)}.ui-input:hover:not(:disabled,:focus){border-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.ui-input:focus,.ui-input--focus{border-color:var(--ui-_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-input:disabled,.ui-input--disabled{opacity:.5;cursor:not-allowed}.ui-input:read-only{background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%))}.ui-input--block{inline-size:100%}.ui-input-group{display:inline-flex;align-items:stretch;position:relative}.ui-input-group .ui-input{flex:1}.ui-input-group--has-prefix .ui-input{padding-inline-start:calc(var(--ui-_height) + var(--ui-space-half, 0.25rem))}.ui-input-group--has-suffix .ui-input{padding-inline-end:calc(var(--ui-_height) + var(--ui-space-half, 0.25rem))}.ui-input-group__addon{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;inline-size:var(--ui-_height, 2rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%));pointer-events:none}.ui-input-group__addon--start{inset-inline-start:0}.ui-input-group__addon--end{inset-inline-end:0}.ui-input-group__addon--interactive{cursor:pointer;pointer-events:auto}}@layer components.tokens{.ui-label{--ui-_font-size: var(--ui-label-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_color: var(--ui-label-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_required-color: var(--ui-label-required-color, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-label--lg{--ui-_font-size: var(--ui-label-font-size-lg, var(--ui-font-size-md, 1rem))}}@layer components.styles{.ui-label{display:inline-flex;align-items:baseline;gap:0;font-size:var(--ui-_font-size);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-leading-tight-sm, var(--ui-row-1));color:var(--ui-_color);cursor:pointer}.ui-label[aria-disabled=true]{opacity:.5;cursor:not-allowed}.ui-label__required{color:var(--ui-_required-color)}.ui-label__optional{font-weight:var(--ui-weight-normal, 400);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}@layer components.tokens{.ui-radio{--ui-_size: var(--ui-radio-size, calc(0.5rem * 2));--ui-_bg: var(--ui-radio-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_bg-checked: var(--ui-radio-bg-checked, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_border-color: var(--ui-radio-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-radio-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_dot-color: var(--ui-radio-dot-color, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}.ui-radio--lg{--ui-_size: var(--ui-radio-size-lg, calc(0.5rem * 3))}.ui-radio--error{--ui-_border-color: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-radio-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}}@layer components.styles{.ui-radio{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;block-size:var(--ui-_size);inline-size:var(--ui-_size);margin:0;vertical-align:middle;background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:50%;cursor:pointer;appearance:none;transition:background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-radio::before{content:"";block-size:50%;inline-size:50%;background-color:var(--ui-_dot-color);border-radius:50%;opacity:0;transform:scale(0);transition:opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),transform var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease)}.ui-radio:hover:not(:disabled){border-color:var(--ui-_border-color-focus)}.ui-radio:focus-visible{border-color:var(--ui-_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-radio:checked{background:var(--ui-_bg-checked);border-color:var(--ui-_bg-checked)}.ui-radio:checked::before{opacity:1;transform:scale(1)}.ui-radio:disabled{opacity:.5;cursor:not-allowed}}@layer components.tokens{.ui-select{--ui-_height: var(--ui-select-height, var(--ui-row-2, 2rem));--ui-_padding-x: var(--ui-select-padding-x, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-select-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-select-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-select-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-select-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-select-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-select-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_icon-color: var(--ui-select-icon-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-select--sm{--ui-_height: var(--ui-select-height-sm, calc(1rem * 1.5));--ui-_font-size: var(--ui-select-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-select--lg{--ui-_height: var(--ui-select-height-lg, calc(1rem * 2.5));--ui-_padding-x: var(--ui-select-padding-x-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-select-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-select--filled{--ui-_bg: var(--ui-select-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-select--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-select--error{--ui-_border-color: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-select-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-select--success{--ui-_border-color: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-select-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}@layer components.styles{.ui-select{display:inline-block;block-size:var(--ui-_height);padding-inline-start:var(--ui-_padding-x);padding-inline-end:calc(var(--ui-_height) - var(--ui-space-half, 0.25rem));font-family:inherit;font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_text);background-color:var(--ui-_bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius);cursor:pointer;appearance:none;transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);background-repeat:no-repeat;background-position:right var(--ui-space-half, 0.25rem) center;background-size:calc(var(--ui-_height)*.5)}.ui-select:hover:not(:disabled,:focus){border-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.ui-select:focus,.ui-select--focus{border-color:var(--ui-_border-color-focus);outline:none;box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-select:disabled,.ui-select--disabled{opacity:.5;cursor:not-allowed}.ui-select--block{inline-size:100%}.ui-select:invalid,.ui-select--placeholder{color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}}@layer components.tokens{.ui-textarea{--ui-_min-height: var(--ui-textarea-min-height, calc(1rem * 4));--ui-_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, 0.5rem));--ui-_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_radius: var(--ui-textarea-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-textarea-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_text: var(--ui-textarea-text, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, hsl(220, 10%, 45%)))}.ui-textarea--sm{--ui-_min-height: var(--ui-textarea-min-height-sm, calc(1rem * 3));--ui-_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, 0.75rem))}.ui-textarea--lg{--ui-_min-height: var(--ui-textarea-min-height-lg, calc(1rem * 6));--ui-_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, 1rem));--ui-_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, 1rem))}.ui-textarea--filled{--ui-_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_border-color: transparent}.ui-textarea--ghost{--ui-_bg: transparent;--ui-_border-color: transparent}.ui-textarea--error{--ui-_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)));--ui-_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, oklch(60% 0.22 25deg)))}.ui-textarea--success{--ui-_border-color: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)));--ui-_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, oklch(60% 0.18 145deg)))}}@layer components.styles{.ui-textarea{display:block;box-sizing:border-box;inline-size:100%;min-block-size:var(--ui-_min-height);padding-block:var(--ui-_padding-y);padding-inline:var(--ui-_padding-x);font-family:inherit;font-size:var(--ui-_font-size);line-height:var(--ui-row-1, 1rem);color:var(--ui-_text);background:var(--ui-_bg);border:none;border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);transition:border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1);resize:vertical}.ui-textarea::placeholder{color:var(--ui-_placeholder)}.ui-textarea:hover:not(:disabled,:focus){outline-color:var(--ui-color-border-strong, hsl(220, 10%, 80%))}.ui-textarea:focus,.ui-textarea--focus{outline-color:var(--ui-_border-color-focus);box-shadow:0 0 0 var(--ui-border-width-md, 0.125rem) var(--ui-color-focus, oklch(75% 0.15 250deg))}.ui-textarea:disabled,.ui-textarea--disabled{opacity:.5;cursor:not-allowed;resize:none}.ui-textarea:read-only{background:var(--ui-color-bg-subtle, hsl(220, 10%, 96%));resize:none}.ui-textarea--resize-none{resize:none}.ui-textarea--resize-horizontal{resize:horizontal}.ui-textarea--resize-both{resize:both}}@layer components.tokens{.ui-toggle{--ui-_track-width: var(--ui-toggle-track-width, calc(0.5rem * 5));--ui-_track-height: var(--ui-toggle-track-height, calc(0.5rem * 3));--ui-_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));--ui-_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));--ui-_track-radius: var(--ui-toggle-track-radius, calc(0.5rem * 1.5));--ui-_thumb-size: var(--ui-toggle-thumb-size, calc(0.5rem * 2.5));--ui-_thumb-bg: var(--ui-toggle-thumb-bg, white);--ui-_thumb-offset: var(--ui-toggle-thumb-offset, calc(0.5rem / 4))}.ui-toggle--sm{--ui-_track-width: calc(0.5rem * 4);--ui-_track-height: calc(0.5rem * 2);--ui-_track-radius: 0.5rem;--ui-_thumb-size: calc(0.5rem * 1.5)}.ui-toggle--lg{--ui-_track-width: calc(0.5rem * 6);--ui-_track-height: calc(0.5rem * 4);--ui-_track-radius: calc(0.5rem * 2);--ui-_thumb-size: calc(0.5rem * 3.5)}}@layer components.styles{.ui-toggle{display:inline-flex;flex-shrink:0;align-items:center;position:relative;block-size:var(--ui-_track-height);inline-size:var(--ui-_track-width);background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__input{position:absolute;inset:0;block-size:100%;inline-size:100%;margin:0;opacity:0;cursor:pointer}.ui-toggle__track{position:absolute;inset:0;background:var(--ui-_track-bg);border-radius:var(--ui-_track-radius);transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__thumb{position:absolute;inset-block-start:var(--ui-_thumb-offset);inset-inline-start:var(--ui-_thumb-offset);block-size:var(--ui-_thumb-size);inline-size:var(--ui-_thumb-size);background:var(--ui-_thumb-bg);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-toggle__input:checked~.ui-toggle__track{background:var(--ui-_track-bg-checked)}.ui-toggle__input:checked~.ui-toggle__thumb{transform:translateX(calc(var(--ui-_track-width) - var(--ui-_thumb-size) - var(--ui-_thumb-offset) * 2))}.ui-toggle__input:focus-visible~.ui-toggle__track{outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.ui-toggle__input:disabled~.ui-toggle__track,.ui-toggle__input:disabled~.ui-toggle__thumb{opacity:.5;cursor:not-allowed}.ui-toggle:has(.ui-toggle__input:disabled){cursor:not-allowed}}@layer components.tokens{.ui-divider{--ui-_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_line-size: var(--ui-divider-line-size, 1px);--ui-_height: var(--ui-divider-height, 0.5rem);--ui-_gap: var(--ui-divider-gap, calc(0.5rem * 2))}}@layer components.styles{.ui-divider{display:flex;align-items:center;block-size:var(--ui-_height);margin:var(--ui-_gap) 0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;color:var(--ui-color-text-muted)}.ui-divider::before,.ui-divider::after{content:"";flex:1;block-size:var(--ui-_line-size);background:var(--ui-_color)}.ui-divider:not(:empty){--ui-_height: var(--ui-row-1, 1rem)}.ui-divider:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.ui-divider:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.ui-divider:empty::after{display:none}.ui-divider--vertical{flex-direction:column;align-self:stretch;margin:0 var(--ui-_gap);writing-mode:vertical-rl}.ui-divider--vertical::before,.ui-divider--vertical::after{flex:1;block-size:auto;inline-size:var(--ui-_size)}.ui-divider--start::before{display:none}.ui-divider--start:not(:empty)::after{margin-inline-start:calc(0.5rem*2)}.ui-divider--end::after{display:none}.ui-divider--end:not(:empty)::before{margin-inline-end:calc(0.5rem*2)}.ui-divider--dashed::before,.ui-divider--dashed::after{background:repeating-linear-gradient(90deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}.ui-divider--vertical.ui-divider--dashed::before,.ui-divider--vertical.ui-divider--dashed::after{background:repeating-linear-gradient(180deg, var(--ui-_color) 0, var(--ui-_color) calc(0.5rem / 2), transparent calc(0.5rem / 2), transparent 0.5rem)}}@layer components.tokens{.ui-breadcrumb{--ui-_height: var(--ui-breadcrumb-height, var(--ui-row-1, 1rem));--ui-_gap: var(--ui-breadcrumb-gap, calc(0.5rem * 1));--ui-_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));--ui-_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));--ui-_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text))}}@layer components.styles{.ui-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height);padding:0;margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:1;list-style:none}.ui-breadcrumb__item{display:flex;align-items:center;gap:var(--ui-_gap);block-size:var(--ui-_height)}.ui-breadcrumb__item:not(:last-child)::after{content:var(--ui-breadcrumb-separator, "/");color:var(--ui-_separator-color)}.ui-breadcrumb__link{text-decoration:none;color:var(--ui-_link-color);transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-breadcrumb__link:hover{text-decoration:underline;color:var(--ui-color-primary)}.ui-breadcrumb__item:last-child .ui-breadcrumb__link,.ui-breadcrumb__current{color:var(--ui-_current-color);pointer-events:none}.ui-breadcrumb__item--hidden{display:none}.ui-breadcrumb__ellipsis{color:var(--ui-_separator-color)}}@layer components.tokens{.ui-menu{--ui-_min-width: var(--ui-menu-min-width, calc(0.5rem * 16));--ui-_max-height: var(--ui-menu-max-height, calc(0.5rem * 40));--ui-_padding: var(--ui-menu-padding, calc(0.5rem * 1));--ui-_radius: var(--ui-menu-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: var(--ui-menu-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_border-color: var(--ui-menu-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));--ui-_item-padding: var(--ui-menu-item-padding, calc(0.5rem * 1) calc(0.5rem * 2));--ui-_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)))}}@layer components.styles{.ui-menu{min-inline-size:var(--ui-_min-width);max-block-size:var(--ui-_max-height);padding:var(--ui-_padding);overflow-y:auto;background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.ui-menu__group{padding:0;margin:0;list-style:none}.ui-menu__label{padding:var(--ui-_item-padding);font-size:var(--ui-font-size-xs, 0.75rem);font-weight:var(--ui-weight-medium, 500);line-height:var(--ui-row-1, 1rem);letter-spacing:.05em;text-transform:uppercase;color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-menu__item{display:flex;align-items:center;gap:calc(0.5rem*1);padding:var(--ui-_item-padding);font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);text-decoration:none;color:var(--ui-color-text, hsl(220, 10%, 10%));background:rgba(0,0,0,0);border:none;border-radius:var(--ui-_item-radius);cursor:pointer;transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-menu__item:hover,.ui-menu__item:focus-visible{background:var(--ui-_item-bg-hover);outline:none}.ui-menu__item--danger{color:var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-menu__item--danger:hover,.ui-menu__item--danger:focus-visible{color:var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-menu__item--disabled,.ui-menu__item[aria-disabled=true]{opacity:.5;pointer-events:none}.ui-menu__item-icon{flex-shrink:0;block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}.ui-menu__item-shortcut{margin-inline-start:auto;font-size:var(--ui-font-size-xs, 0.75rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-menu__separator{display:flex;align-items:center;block-size:calc(0.5rem*2);margin:0}.ui-menu__separator::before{content:"";flex:1;block-size:var(--ui-border-width-sm, 1px);background:var(--ui-color-border, hsl(220, 10%, 90%))}.ui-menu__item--check,.ui-menu__item--radio{position:relative;padding-inline-start:calc(0.5rem*4)}.ui-menu__item-indicator{display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-start:calc(0.5rem*1);block-size:calc(0.5rem*2);inline-size:calc(0.5rem*2)}}@layer components.tokens{.ui-nav{--ui-_gap: var(--ui-nav-gap, var(--ui-space-1, 0.5rem));--ui-_item-height: var(--ui-nav-item-height, var(--ui-row-2, 2rem));--ui-_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, 1rem));--ui-_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, 500));--ui-_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_border-color: var(--ui-nav-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-nav--pills{--ui-_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}@layer components.styles{.ui-nav__list{display:flex;align-items:stretch;gap:var(--ui-_gap);box-sizing:border-box;block-size:var(--ui-_item-height);padding:0;margin:0;list-style:none;box-shadow:inset 0 calc(var(--ui-border-width-sm, 0.0625rem)*-1) 0 var(--ui-_border-color)}.ui-nav__item{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--ui-_item-height);padding-inline:var(--ui-_item-padding-x);font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--ui-_item-font-size);font-weight:var(--ui-_item-font-weight);line-height:1;text-decoration:none;white-space:nowrap;color:var(--ui-_item-color);background:rgba(0,0,0,0);border:none;box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--ui-duration-base) var(--ui-ease-default),background var(--ui-duration-base) var(--ui-ease-default),box-shadow var(--ui-duration-base) var(--ui-ease-default)}.ui-nav__item:hover{color:var(--ui-_item-color-hover)}.ui-nav__item--active{color:var(--ui-_item-color-active);box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 var(--ui-_item-color-active)}.ui-nav__item--disabled{opacity:.5;pointer-events:none}.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--pills .ui-nav__item{border-radius:var(--ui-_item-radius);box-shadow:none}.ui-nav--pills .ui-nav__item:hover{background:var(--ui-_item-bg-hover)}.ui-nav--pills .ui-nav__item--active{color:var(--ui-_item-color-active);background:var(--ui-_item-bg-active)}.ui-nav--vertical .ui-nav__list{flex-direction:column;align-items:stretch;block-size:auto;box-shadow:inset calc(var(--ui-border-width-sm, 0.0625rem)*-1) 0 0 var(--ui-_border-color)}.ui-nav--vertical .ui-nav__item{box-shadow:inset calc(var(--ui-border-width-md, 0.125rem)*-1) 0 0 rgba(0,0,0,0)}.ui-nav--vertical .ui-nav__item--active{box-shadow:inset calc(var(--ui-border-width-md, 0.125rem)*-1) 0 0 var(--ui-_item-color-active)}.ui-nav--vertical.ui-nav--pills .ui-nav__list{box-shadow:none}.ui-nav--vertical.ui-nav--pills .ui-nav__item{box-shadow:none}}@layer components.tokens{.ui-pagination{--ui-_gap: var(--ui-pagination-gap, calc(0.5rem * 0.5));--ui-_item-size: var(--ui-pagination-item-size, calc(0.5rem * 4));--ui-_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, 0.25rem));--ui-_item-bg: var(--ui-pagination-item-bg, transparent);--ui-_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));--ui-_item-color: var(--ui-pagination-item-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, hsl(220, 10%, 98%)))}}@layer components.styles{.ui-pagination{display:flex;align-items:center;gap:var(--ui-_gap)}.ui-pagination__list{display:flex;align-items:center;gap:var(--ui-_gap);padding:0;margin:0;list-style:none}.ui-pagination__item{display:flex}.ui-pagination__link{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ui-_item-size);min-inline-size:var(--ui-_item-size);padding-inline:calc(0.5rem*1);font-size:var(--ui-font-size-sm, 0.875rem);text-decoration:none;color:var(--ui-_item-color);background:var(--ui-_item-bg);border-radius:var(--ui-_item-radius);transition:background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease),color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}.ui-pagination__link:hover{background:var(--ui-_item-bg-hover)}.ui-pagination__link[aria-current=page],.ui-pagination__link--active{color:var(--ui-_item-color-active);background:var(--ui-_item-bg-active);pointer-events:none}.ui-pagination__link[aria-disabled=true],.ui-pagination__link--disabled{opacity:.5;pointer-events:none}.ui-pagination__prev,.ui-pagination__next{display:inline-flex;align-items:center;gap:calc(0.5rem*.5);padding-inline:calc(0.5rem*1.5)}.ui-pagination__ellipsis{display:inline-flex;align-items:center;justify-content:center;block-size:var(--ui-_item-size);min-inline-size:var(--ui-_item-size);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-pagination--sm{--ui-_item-size: calc(0.5rem * 3);--ui-_gap: calc(0.5rem * 0.25)}.ui-pagination--lg{--ui-_item-size: calc(0.5rem * 5);--ui-_gap: calc(0.5rem * 0.75)}}@layer components.tokens{.ui-tabs{--ui-_border-color: var(--ui-tabs-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_tab-padding-x: var(--ui-tabs-tab-padding-x, var(--ui-space-2, 1rem));--ui-_tab-padding-y: var(--ui-tabs-tab-padding-y, var(--ui-space-1, 0.5rem));--ui-_tab-bg: var(--ui-tabs-tab-bg, transparent);--ui-_tab-bg-active: var(--ui-tabs-tab-bg-active, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_panel-padding: var(--ui-tabs-panel-padding, var(--ui-space-3, 1.5rem))}}@layer components.styles{.ui-tabs__list{display:flex;align-items:stretch;gap:var(--ui-space-1, 0.5rem);box-sizing:border-box;block-size:var(--ui-row-2, 2rem);box-shadow:inset 0 calc(var(--ui-border-width-sm, 0.0625rem)*-1) 0 var(--ui-_border-color)}.ui-tabs__tab{display:inline-flex;align-items:center;box-sizing:border-box;block-size:var(--ui-row-2, 2rem);padding-inline:var(--ui-_tab-padding-x);margin:0;font-family:var(--ui-font-sans, Noto Sans, system-ui, -apple-system, sans-serif);font-size:var(--ui-font-size-sm, 0.875rem);font-weight:var(--ui-weight-medium, 500);line-height:1;color:var(--ui-color-text-muted, hsl(220, 10%, 45%));background:var(--ui-_tab-bg);border:none;box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 rgba(0,0,0,0);cursor:pointer;transition:color var(--ui-duration-base) var(--ui-ease-default),box-shadow var(--ui-duration-base) var(--ui-ease-default)}.ui-tabs__tab:hover{color:var(--ui-color-text, hsl(220, 10%, 10%))}.ui-tabs__tab--active{color:var(--ui-color-primary, oklch(55% 0.22 250deg));background:var(--ui-_tab-bg-active);box-shadow:inset 0 calc(var(--ui-border-width-md, 0.125rem)*-1) 0 var(--ui-color-primary, oklch(55% 0.22 250deg))}.ui-tabs__panel{display:none;padding:var(--ui-_panel-padding);line-height:var(--ui-row-1, 1rem)}.ui-tabs__panel--active{display:block}}@layer components.tokens{.ui-dialog{--ui-_header-padding: var(--ui-dialog-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--ui-_body-padding: var(--ui-dialog-body-padding, calc(0.5rem * 3));--ui-_footer-padding: var(--ui-dialog-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--ui-_border-color: var(--ui-dialog-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)))}}@layer components.styles{.ui-dialog .ui-modal__content{padding:0}.ui-dialog__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--ui-_header-padding);border-block-end:1px solid var(--ui-_border-color)}.ui-dialog__title{margin:0;font-size:var(--ui-font-size-lg, 1.25rem);font-weight:var(--ui-weight-semibold, 600);line-height:calc(0.5rem*3)}.ui-dialog__close{flex-shrink:0;margin-inline-start:auto}.ui-dialog__body{flex:1 1 auto;padding:var(--ui-_body-padding);overflow-y:auto}.ui-dialog__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*1.5);padding:var(--ui-_footer-padding);border-block-start:1px solid var(--ui-_border-color)}.ui-dialog--borderless .ui-dialog__header{border-block-end:none}.ui-dialog--borderless .ui-dialog__footer{border-block-start:none}}@layer components.tokens{.ui-drawer{--ui-_size: var(--ui-drawer-size, calc(0.5rem * 40));--ui-_max-size: var(--ui-drawer-max-size, 90%);--ui-_bg: var(--ui-drawer-bg, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));--ui-_header-padding: var(--ui-drawer-header-padding, calc(0.5rem * 2) calc(0.5rem * 3));--ui-_body-padding: var(--ui-drawer-body-padding, calc(0.5rem * 3));--ui-_footer-padding: var(--ui-drawer-footer-padding, calc(0.5rem * 2) calc(0.5rem * 3));--ui-_border-color: var(--ui-drawer-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}.ui-drawer--sm{--ui-_size: calc(0.5rem * 30)}.ui-drawer--lg{--ui-_size: calc(0.5rem * 50)}.ui-drawer--full{--ui-_size: 100%;--ui-_max-size: 100%}}@layer components.styles{.ui-drawer-overlay{position:fixed;inset:0;z-index:var(--ui-z-drawer, 900);background:var(--ui-overlay-bg, rgba(0, 0, 0, 0.5))}.ui-drawer-overlay[data-state=open]{animation:drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-drawer-overlay[data-state=closed]{animation:drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes drawer-overlay-in{from{opacity:0}}@keyframes drawer-overlay-out{to{opacity:0}}.ui-drawer{display:flex;flex-direction:column;position:fixed;z-index:var(--ui-z-drawer, 900);background:var(--ui-_bg);box-shadow:var(--ui-_shadow)}.ui-drawer--end{inset-block:0;inset-inline-end:0;inline-size:var(--ui-_size);max-inline-size:var(--ui-_max-size);box-shadow:calc(var(--ui-border-width-sm, 1px)*-1) 0 0 var(--ui-_border-color)}.ui-drawer--start{inset-block:0;inset-inline-start:0;inline-size:var(--ui-_size);max-inline-size:var(--ui-_max-size);box-shadow:var(--ui-border-width-sm, 1px) 0 0 var(--ui-_border-color)}.ui-drawer--top{inset-block-start:0;inset-inline:0;block-size:var(--ui-_size);max-block-size:var(--ui-_max-size);box-shadow:0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color)}.ui-drawer--bottom{inset-block-end:0;inset-inline:0;block-size:var(--ui-_size);max-block-size:var(--ui-_max-size);box-shadow:0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--ui-_border-color)}.ui-drawer--end[data-state=open]{animation:drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-drawer--end[data-state=closed]{animation:drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}.ui-drawer--start[data-state=open]{animation:drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-drawer--start[data-state=closed]{animation:drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}.ui-drawer--top[data-state=open]{animation:drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-drawer--top[data-state=closed]{animation:drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}.ui-drawer--bottom[data-state=open]{animation:drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out)}.ui-drawer--bottom[data-state=closed]{animation:drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in)}@keyframes drawer-slide-in-end{from{transform:translateX(100%)}}@keyframes drawer-slide-out-end{to{transform:translateX(100%)}}@keyframes drawer-slide-in-start{from{transform:translateX(-100%)}}@keyframes drawer-slide-out-start{to{transform:translateX(-100%)}}@keyframes drawer-slide-in-top{from{transform:translateY(-100%)}}@keyframes drawer-slide-out-top{to{transform:translateY(-100%)}}@keyframes drawer-slide-in-bottom{from{transform:translateY(100%)}}@keyframes drawer-slide-out-bottom{to{transform:translateY(100%)}}.ui-drawer__header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);padding:var(--ui-_header-padding);box-shadow:inset 0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--ui-_border-color)}.ui-drawer__title{margin:0;font-size:var(--ui-font-size-lg, 1.25rem);font-weight:var(--ui-weight-semibold, 600);line-height:var(--ui-row-1, 1rem)}.ui-drawer__description{margin:0;font-size:var(--ui-font-size-sm, 0.875rem);line-height:var(--ui-row-1, 1rem);color:var(--ui-color-text-muted, hsl(220, 10%, 45%))}.ui-drawer__close{flex-shrink:0;margin-inline-start:auto}.ui-drawer__body{flex:1 1 auto;padding:var(--ui-_body-padding);overflow-y:auto;line-height:var(--ui-row-1, 1rem)}.ui-drawer__footer{display:flex;flex-shrink:0;align-items:center;justify-content:flex-end;gap:calc(0.5rem*2);padding:var(--ui-_footer-padding);box-shadow:inset 0 var(--ui-border-width-sm, 1px) 0 var(--ui-_border-color)}}@layer components.tokens{.ui-modal{--ui-_bg: var(--ui-modal-bg, var(--ui-color-bg, white));--ui-_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(0.5rem * 1.5)));--ui-_shadow: var(--ui-modal-shadow, 0 calc(0.5rem * 3) calc(0.5rem * 6) rgb(0 0 0 / 0.25));--ui-_padding: var(--ui-modal-padding, calc(0.5rem * 3));--ui-_max-width: var(--ui-modal-max-width, calc(0.5rem * 60));--ui-_max-height: var(--ui-modal-max-height, calc(100vh - 0.5rem * 8));--ui-_z: var(--ui-modal-z, var(--ui-z-modal, 400))}.ui-modal--sm{--ui-_max-width: var(--ui-modal-max-width-sm, calc(0.5rem * 40))}.ui-modal--lg{--ui-_max-width: var(--ui-modal-max-width-lg, calc(0.5rem * 80))}.ui-modal--full{--ui-_max-width: calc(100vw - 0.5rem * 4);--ui-_max-height: calc(100vh - 0.5rem * 4);--ui-_radius: 0}}@layer components.styles{.ui-modal{display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:var(--ui-_z);padding:calc(0.5rem*2)}.ui-modal__content{display:flex;flex-direction:column;position:relative;inline-size:100%;max-block-size:var(--ui-_max-height);max-inline-size:var(--ui-_max-width);padding:var(--ui-_padding);overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius);box-shadow:var(--ui-_shadow)}.ui-modal__body{flex:1 1 auto;overflow-y:auto}.ui-modal--entering .ui-modal__content,.ui-modal--visible .ui-modal__content{opacity:1;transform:scale(1)}.ui-modal--exiting .ui-modal__content,.ui-modal--hidden .ui-modal__content{opacity:0;transform:scale(0.95)}.ui-modal--animate .ui-modal__content{transition:opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease),transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}.ui-modal--hidden{visibility:hidden;pointer-events:none}}@layer components.tokens{.ui-overlay{--ui-_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));--ui-_z: var(--ui-overlay-z, var(--ui-z-overlay, 300))}.ui-overlay--light{--ui-_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7))}.ui-overlay--blur{--ui-_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3))}}@layer components.styles{.ui-overlay{position:fixed;inset:0;z-index:var(--ui-_z);background:var(--ui-_bg)}.ui-overlay--blur{backdrop-filter:blur(calc(0.5rem * 0.5))}.ui-overlay--entering,.ui-overlay--visible{opacity:1}.ui-overlay--exiting,.ui-overlay--hidden{opacity:0;pointer-events:none}.ui-overlay--animate{transition:opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease)}}@layer components.tokens{.ui-popover{--ui-_bg: var(--ui-popover-bg, var(--ui-color-bg, white));--ui-_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));--ui-_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));--ui-_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));--ui-_padding: var(--ui-popover-padding, calc(0.5rem * 2));--ui-_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));--ui-_z: var(--ui-popover-z, var(--ui-z-popover, 500));--ui-_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem))}}@layer components.styles{.ui-popover{position:absolute;z-index:var(--ui-_z);max-inline-size:var(--ui-_max-width);padding:var(--ui-_padding);line-height:var(--ui-row-1, 1rem);background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-border-width-sm, 0.0625rem)*-1)}.ui-popover__header{padding-block-end:calc(0.5rem*2);margin-block-end:calc(0.5rem*2);box-shadow:inset 0 calc(var(--ui-border-width-sm, 1px)*-1) 0 var(--ui-_border-color)}.ui-popover__title{margin:0;font-size:var(--ui-font-size-md, 1rem);font-weight:var(--ui-weight-semibold, 600)}.ui-popover--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-popover--top::before{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:calc(var(--ui-_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_border-color);transform:translateX(-50%)}.ui-popover--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-popover--bottom::before{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:calc(var(--ui-_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_border-color);transform:translateX(-50%)}.ui-popover--visible{opacity:1}.ui-popover--hidden{opacity:0;pointer-events:none}.ui-popover--animate{transition:opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}}@layer components.tokens{.ui-tooltip{--ui-_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));--ui-_color: var(--ui-tooltip-color, var(--ui-color-bg, white));--ui-_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));--ui-_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));--ui-_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));--ui-_size: var(--ui-tooltip-size, var(--ui-font-size-sm, 0.875rem));--ui-_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));--ui-_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2))}}@layer components.styles{.ui-tooltip{position:absolute;z-index:var(--ui-_z);max-inline-size:calc(0.5rem*25);padding:var(--ui-_padding-y) var(--ui-_padding-x);font-size:var(--ui-_size);line-height:calc(0.5rem*2);text-align:center;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-tooltip--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--start::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-start-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--end::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-end-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--visible{opacity:1}.ui-tooltip--hidden{opacity:0;pointer-events:none}.ui-tooltip--animate{transition:opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease)}}@layer components.tokens{.ui-code{--ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));--ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem))}.ui-code--sm{--ui-_font-size: var(--ui-font-size-xs, 0.75rem)}.ui-code-block{--ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));--ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));--ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)))}}@layer components.styles{.ui-code{padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-leading-tight-sm, 1rem);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-code-block{display:block;padding:calc(var(--ui-_padding) - var(--ui-border-width-sm, 0.0625rem));overflow-x:auto;font-family:var(--ui-font-mono, Noto Sans Mono, ui-monospace, Cascadia Code, monospace);font-size:var(--ui-_font-size);line-height:var(--ui-leading-tight-sm, 1rem);white-space:pre;background:var(--ui-_bg);border:var(--ui-border-width-sm, 0.0625rem) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-code-block code{padding:0;font-size:inherit;background:none}}@layer components.tokens{.ui-heading{--ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));--ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));--ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-heading--4xl{--ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));--ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem))}.ui-heading--3xl{--ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));--ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem))}.ui-heading--2xl{--ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));--ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem))}.ui-heading--xl{--ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem))}.ui-heading--lg{--ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));--ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem))}.ui-heading--md{--ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));--ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem))}.ui-heading--sm{--ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));--ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem))}}@layer components.styles{.ui-heading{margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);line-height:var(--ui-_line-height);color:var(--ui-_color)}}@layer components.tokens{.ui-link{--ui-_color: var(--ui-link-color, var(--ui-color-primary));--ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));--ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));--ui-_decoration: var(--ui-link-decoration, underline);--ui-_decoration-hover: var(--ui-link-decoration-hover, underline)}.ui-link--muted{--ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted));--ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text))}.ui-link--subtle{--ui-_decoration: none;--ui-_decoration-hover: underline}}@layer components.styles{.ui-link{text-decoration:var(--ui-_decoration);color:var(--ui-_color);cursor:pointer;transition:color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);text-underline-offset:calc(0.5rem/4)}.ui-link:hover{text-decoration:var(--ui-_decoration-hover);color:var(--ui-_color-hover)}.ui-link:focus-visible{border-radius:calc(0.5rem/4);outline:2px solid var(--ui-color-focus, var(--ui-color-primary));outline-offset:calc(0.5rem/4)}.ui-link:visited{color:var(--ui-_color-visited)}.ui-link--disabled,.ui-link[aria-disabled=true]{color:var(--ui-color-text-muted);opacity:.6;cursor:not-allowed;pointer-events:none}.ui-link--external::after{content:"↗";display:inline-block;margin-inline-start:calc(0.5rem/4);font-size:.75em}}@layer utilities{.ui-m-0{margin:0}.ui-m-1{margin:var(--ui-space-1)}.ui-m-2{margin:var(--ui-space-2)}.ui-m-3{margin:var(--ui-space-3)}.ui-m-4{margin:var(--ui-space-4)}.ui-m-6{margin:var(--ui-space-6)}.ui-m-8{margin:var(--ui-space-8)}.ui-mt-0{margin-block-start:0}.ui-mt-1{margin-block-start:var(--ui-space-1)}.ui-mt-2{margin-block-start:var(--ui-space-2)}.ui-mt-3{margin-block-start:var(--ui-space-3)}.ui-mt-4{margin-block-start:var(--ui-space-4)}.ui-mt-6{margin-block-start:var(--ui-space-6)}.ui-mt-8{margin-block-start:var(--ui-space-8)}.ui-me-0{margin-inline-end:0}.ui-me-1{margin-inline-end:var(--ui-space-1)}.ui-me-2{margin-inline-end:var(--ui-space-2)}.ui-me-3{margin-inline-end:var(--ui-space-3)}.ui-me-4{margin-inline-end:var(--ui-space-4)}.ui-me-6{margin-inline-end:var(--ui-space-6)}.ui-me-8{margin-inline-end:var(--ui-space-8)}.ui-mb-0{margin-block-end:0}.ui-mb-1{margin-block-end:var(--ui-space-1)}.ui-mb-2{margin-block-end:var(--ui-space-2)}.ui-mb-3{margin-block-end:var(--ui-space-3)}.ui-mb-4{margin-block-end:var(--ui-space-4)}.ui-mb-6{margin-block-end:var(--ui-space-6)}.ui-mb-8{margin-block-end:var(--ui-space-8)}.ui-ms-0{margin-inline-start:0}.ui-ms-1{margin-inline-start:var(--ui-space-1)}.ui-ms-2{margin-inline-start:var(--ui-space-2)}.ui-ms-3{margin-inline-start:var(--ui-space-3)}.ui-ms-4{margin-inline-start:var(--ui-space-4)}.ui-ms-6{margin-inline-start:var(--ui-space-6)}.ui-ms-8{margin-inline-start:var(--ui-space-8)}.ui-mx-0{margin-inline:0}.ui-mx-1{margin-inline:var(--ui-space-1)}.ui-mx-2{margin-inline:var(--ui-space-2)}.ui-mx-3{margin-inline:var(--ui-space-3)}.ui-mx-4{margin-inline:var(--ui-space-4)}.ui-mx-auto{margin-inline:auto}.ui-my-0{margin-block:0}.ui-my-1{margin-block:var(--ui-space-1)}.ui-my-2{margin-block:var(--ui-space-2)}.ui-my-3{margin-block:var(--ui-space-3)}.ui-my-4{margin-block:var(--ui-space-4)}.ui-p-0{padding:0}.ui-p-1{padding:var(--ui-space-1)}.ui-p-2{padding:var(--ui-space-2)}.ui-p-3{padding:var(--ui-space-3)}.ui-p-4{padding:var(--ui-space-4)}.ui-p-6{padding:var(--ui-space-6)}.ui-p-8{padding:var(--ui-space-8)}.ui-pt-0{padding-block-start:0}.ui-pt-1{padding-block-start:var(--ui-space-1)}.ui-pt-2{padding-block-start:var(--ui-space-2)}.ui-pt-3{padding-block-start:var(--ui-space-3)}.ui-pt-4{padding-block-start:var(--ui-space-4)}.ui-pt-6{padding-block-start:var(--ui-space-6)}.ui-pt-8{padding-block-start:var(--ui-space-8)}.ui-pe-0{padding-inline-end:0}.ui-pe-1{padding-inline-end:var(--ui-space-1)}.ui-pe-2{padding-inline-end:var(--ui-space-2)}.ui-pe-3{padding-inline-end:var(--ui-space-3)}.ui-pe-4{padding-inline-end:var(--ui-space-4)}.ui-pe-6{padding-inline-end:var(--ui-space-6)}.ui-pe-8{padding-inline-end:var(--ui-space-8)}.ui-pb-0{padding-block-end:0}.ui-pb-1{padding-block-end:var(--ui-space-1)}.ui-pb-2{padding-block-end:var(--ui-space-2)}.ui-pb-3{padding-block-end:var(--ui-space-3)}.ui-pb-4{padding-block-end:var(--ui-space-4)}.ui-pb-6{padding-block-end:var(--ui-space-6)}.ui-pb-8{padding-block-end:var(--ui-space-8)}.ui-ps-0{padding-inline-start:0}.ui-ps-1{padding-inline-start:var(--ui-space-1)}.ui-ps-2{padding-inline-start:var(--ui-space-2)}.ui-ps-3{padding-inline-start:var(--ui-space-3)}.ui-ps-4{padding-inline-start:var(--ui-space-4)}.ui-ps-6{padding-inline-start:var(--ui-space-6)}.ui-ps-8{padding-inline-start:var(--ui-space-8)}.ui-px-0{padding-inline:0}.ui-px-1{padding-inline:var(--ui-space-1)}.ui-px-2{padding-inline:var(--ui-space-2)}.ui-px-3{padding-inline:var(--ui-space-3)}.ui-px-4{padding-inline:var(--ui-space-4)}.ui-py-0{padding-block:0}.ui-py-1{padding-block:var(--ui-space-1)}.ui-py-2{padding-block:var(--ui-space-2)}.ui-py-3{padding-block:var(--ui-space-3)}.ui-py-4{padding-block:var(--ui-space-4)}.ui-gap-0{gap:0}.ui-gap-1{gap:var(--ui-space-1)}.ui-gap-2{gap:var(--ui-space-2)}.ui-gap-3{gap:var(--ui-space-3)}.ui-gap-4{gap:var(--ui-space-4)}.ui-gap-6{gap:var(--ui-space-6)}.ui-gap-8{gap:var(--ui-space-8)}}@layer utilities{.ui-block{display:block}.ui-inline-block{display:inline-block}.ui-inline{display:inline}.ui-flex{display:flex}.ui-inline-flex{display:inline-flex}.ui-grid{display:grid}.ui-inline-grid{display:inline-grid}.ui-hidden{display:none}.ui-flex-row{flex-direction:row}.ui-flex-row-reverse{flex-direction:row-reverse}.ui-flex-col{flex-direction:column}.ui-flex-col-reverse{flex-direction:column-reverse}.ui-flex-wrap{flex-wrap:wrap}.ui-flex-nowrap{flex-wrap:nowrap}.ui-flex-wrap-reverse{flex-wrap:wrap-reverse}.ui-flex-1{flex:1 1 0%}.ui-flex-auto{flex:1 1 auto}.ui-flex-initial{flex:0 1 auto}.ui-flex-none{flex:none}.ui-grow{flex-grow:1}.ui-grow-0{flex-grow:0}.ui-shrink{flex-shrink:1}.ui-shrink-0{flex-shrink:0}.ui-justify-start{justify-content:flex-start}.ui-justify-end{justify-content:flex-end}.ui-justify-center{justify-content:center}.ui-justify-between{justify-content:space-between}.ui-justify-around{justify-content:space-around}.ui-justify-evenly{justify-content:space-evenly}.ui-items-start{align-items:flex-start}.ui-items-end{align-items:flex-end}.ui-items-center{align-items:center}.ui-items-baseline{align-items:baseline}.ui-items-stretch{align-items:stretch}.ui-self-auto{align-self:auto}.ui-self-start{align-self:flex-start}.ui-self-end{align-self:flex-end}.ui-self-center{align-self:center}.ui-self-stretch{align-self:stretch}.ui-visible{visibility:visible}.ui-invisible{visibility:hidden}.ui-sr-only{position:absolute;block-size:1px;inline-size:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}}@layer utilities{.ui-text-start{text-align:start}.ui-text-center{text-align:center}.ui-text-end{text-align:end}.ui-text-justify{text-align:justify}.ui-font-normal{font-weight:var(--ui-weight-normal)}.ui-font-medium{font-weight:var(--ui-weight-medium)}.ui-font-semibold{font-weight:var(--ui-weight-semibold)}.ui-font-bold{font-weight:var(--ui-weight-bold)}.ui-text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.ui-text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.ui-text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.ui-text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.ui-text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.ui-text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.ui-text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.ui-text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.ui-text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.ui-text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.ui-text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.ui-text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.ui-font-sans{font-family:var(--ui-font-sans)}.ui-font-mono{font-family:var(--ui-font-mono)}.ui-underline{text-decoration:underline}.ui-line-through{text-decoration:line-through}.ui-no-underline{text-decoration:none}.ui-uppercase{text-transform:uppercase}.ui-lowercase{text-transform:lowercase}.ui-capitalize{text-transform:capitalize}.ui-normal-case{text-transform:none}.ui-text-primary{color:var(--ui-color-primary)}.ui-text-muted{color:var(--ui-color-text-muted)}.ui-text-success{color:var(--ui-color-success)}.ui-text-warning{color:var(--ui-color-warning)}.ui-text-danger{color:var(--ui-color-danger)}.ui-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-whitespace-normal{white-space:normal}.ui-whitespace-nowrap{white-space:nowrap}.ui-whitespace-pre{white-space:pre}.ui-whitespace-pre-wrap{white-space:pre-wrap}.ui-prose{max-inline-size:65ch}.ui-prose-sm{max-inline-size:45ch}.ui-prose-lg{max-inline-size:75ch}.ui-tracking-display{letter-spacing:var(--ui-tracking-display)}.ui-tracking-body{letter-spacing:var(--ui-tracking-body)}.ui-tracking-caps{letter-spacing:var(--ui-tracking-caps)}}@layer utilities{.ui-border{border:var(--ui-border-width-sm) solid var(--ui-color-border)}.ui-border-0{border:none}.ui-rounded{border-radius:var(--ui-radius-md)}.ui-rounded-none{border-radius:0}.ui-rounded-sm{border-radius:var(--ui-radius-sm)}.ui-rounded-lg{border-radius:var(--ui-radius-lg)}.ui-rounded-full{border-radius:var(--ui-radius-full)}.ui-bg{background:var(--ui-color-bg)}.ui-bg-subtle{background:var(--ui-color-bg-subtle)}.ui-bg-muted{background:var(--ui-color-bg-muted)}.ui-bg-transparent{background:rgba(0,0,0,0)}}@layer utilities{.ui-visually-hidden{position:absolute;block-size:calc(0.5rem/8);inline-size:calc(0.5rem/8);padding:0;margin:calc(0.5rem/-8);overflow:hidden;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}.ui-visually-hidden--focusable:focus,.ui-visually-hidden--focusable:active{position:static;block-size:auto;inline-size:auto;margin:0;overflow:visible;white-space:normal;clip:auto;clip-path:none}}@view-transition{navigation:auto}@layer utilities{@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-slide-in-up{from{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-out-up{to{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-in-down{from{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-out-down{to{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-in-start{from{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-out-start{to{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-in-end{from{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-slide-out-end{to{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-scale-in{from{opacity:0;transform:scale(0.95)}}@keyframes vt-scale-out{to{opacity:0;transform:scale(1.05)}}.ui-transition-name-sidebar{view-transition-name:sidebar}.ui-transition-name-main{view-transition-name:main}.ui-transition-name-header{view-transition-name:header}.ui-transition-name-hero{view-transition-name:hero}.ui-transition-name-card{view-transition-name:card}.ui-transition-name-modal{view-transition-name:modal}.ui-transition-name-slide-up{view-transition-name:slide-up}.ui-transition-name-slide-down{view-transition-name:slide-down}.ui-transition-name-slide-start{view-transition-name:slide-start}.ui-transition-name-slide-end{view-transition-name:slide-end}.ui-transition-name-scale{view-transition-name:scale}.ui-transition-name-fade{view-transition-name:fade}.ui-transition-name-none{view-transition-name:none}::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(header),::view-transition-new(header){animation:none}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ui-duration-base);animation-timing-function:var(--ui-ease-default)}::view-transition-old(fade){animation:vt-fade-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(fade){animation:vt-fade-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-up),::view-transition-old(main){animation:vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-up),::view-transition-new(main){animation:vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-down){animation:vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-down){animation:vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-start){animation:vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-start){animation:vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-end){animation:vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-end){animation:vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(scale),::view-transition-old(modal),::view-transition-old(card){animation:vt-scale-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(scale),::view-transition-new(modal),::view-transition-new(card){animation:vt-scale-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-group(hero){animation-duration:var(--ui-duration-slow);animation-timing-function:var(--ui-ease-in-out)}@media(prefers-reduced-motion: reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation-duration:0s !important}}}.ui-debug-grid,.ui-debug-grid-rows,.ui-debug-baseline{position:relative}.ui-debug-grid{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15)}.ui-debug-grid::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to right, var(--ui-debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px);pointer-events:none;background-size:var(--ui-unit) var(--ui-unit);background-position:0 0}.ui-debug-grid-rows{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.1);--ui-debug-color-strong: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.25)}.ui-debug-grid-rows::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to right, var(--ui-debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--ui-debug-color-strong) 1px, transparent 1px);pointer-events:none;background-size:var(--ui-unit) var(--ui-unit),var(--ui-unit) var(--ui-unit),var(--ui-unit) var(--ui-row);background-position:0 0}.ui-debug-baseline{--ui-debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2)}.ui-debug-baseline::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px);pointer-events:none;background-size:100% var(--ui-unit)}.ui-debug-outline *{outline:1px solid rgba(255,0,0,.5)}