@juwel-development/design-system 3.11.0 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (70) hide show
  1. package/README.md +16 -3
  2. package/dist/design-system.js +1094 -546
  3. package/dist/styles.css +2 -0
  4. package/dist/styles.dark.css +2 -0
  5. package/dist/styles.light.css +2 -0
  6. package/dist/types/Arrangement/ColumnLayout/ColumnLayout.d.ts +38 -18
  7. package/dist/types/Display/Callout/Callout.d.ts +31 -0
  8. package/dist/types/Display/Icon/Icon.d.ts +20 -24
  9. package/dist/types/Display/Meter/Meter.d.ts +5 -6
  10. package/dist/types/Display/Rule/Rule.d.ts +22 -0
  11. package/dist/types/Display/Table/Table.d.ts +57 -7
  12. package/dist/types/Display/Typography/Eyebrow/Eyebrow.d.ts +1 -1
  13. package/dist/types/Display/Typography/H1/H1.d.ts +1 -1
  14. package/dist/types/Display/Typography/H2/H2.d.ts +1 -1
  15. package/dist/types/Display/Typography/H3/H3.d.ts +1 -1
  16. package/dist/types/Display/Typography/H4/H4.d.ts +1 -1
  17. package/dist/types/Display/Typography/H5/H5.d.ts +1 -1
  18. package/dist/types/Display/Typography/H6/H6.d.ts +1 -1
  19. package/dist/types/Display/Typography/Note/Note.d.ts +16 -3
  20. package/dist/types/Display/Typography/P/P.d.ts +15 -2
  21. package/dist/types/Display/Typography/Prose/Prose.d.ts +14 -6
  22. package/dist/types/Interaction/Button/Button.d.ts +10 -4
  23. package/dist/types/Interaction/Slider/Slider.d.ts +3 -0
  24. package/dist/types/Interaction/Stepper/Stepper.d.ts +59 -0
  25. package/dist/types/Interaction/Stepper/StepperCompositionError.d.ts +3 -0
  26. package/dist/types/Interaction/Switch/Switch.d.ts +20 -0
  27. package/dist/types/Interaction/Tabs/Tabs.d.ts +24 -3
  28. package/dist/types/Layout/Dialog/Dialog.d.ts +11 -3
  29. package/dist/types/Layout/Form/FormConfigurationError.d.ts +3 -0
  30. package/dist/types/Layout/Pane/Pane.d.ts +57 -0
  31. package/dist/types/Layout/Screen/Screen.d.ts +31 -0
  32. package/dist/types/Layout/Screen/ScreenBodyAllocation.d.ts +1 -0
  33. package/dist/types/Layout/Shell/Shell.d.ts +39 -0
  34. package/dist/types/Layout/Sidebar/Sidebar.d.ts +16 -2
  35. package/dist/types/Theme/Palette.d.ts +11 -4
  36. package/dist/types/index.d.ts +22 -1
  37. package/package.json +18 -8
  38. package/src/Arrangement/ColumnLayout/ColumnLayout.tsx +86 -28
  39. package/src/Display/Callout/Callout.tsx +64 -0
  40. package/src/Display/Icon/Icon.tsx +53 -13
  41. package/src/Display/Meter/Meter.tsx +12 -13
  42. package/src/Display/Rule/Rule.tsx +31 -0
  43. package/src/Display/Table/Table.tsx +189 -24
  44. package/src/Display/Typography/Note/Note.tsx +27 -11
  45. package/src/Display/Typography/P/P.tsx +29 -4
  46. package/src/Display/Typography/Prose/Prose.tsx +44 -19
  47. package/src/Interaction/Button/Button.tsx +11 -4
  48. package/src/Interaction/Slider/Slider.tsx +3 -5
  49. package/src/Interaction/Stepper/Stepper.tsx +307 -0
  50. package/src/Interaction/Stepper/StepperCompositionError.ts +6 -0
  51. package/src/Interaction/Switch/Switch.tsx +64 -0
  52. package/src/Interaction/Tabs/Tabs.tsx +44 -10
  53. package/src/Layout/Dialog/Dialog.tsx +19 -6
  54. package/src/Layout/Form/Form.tsx +2 -1
  55. package/src/Layout/Form/FormConfigurationError.ts +6 -0
  56. package/src/Layout/Pane/Pane.tsx +272 -0
  57. package/src/Layout/Screen/Screen.tsx +61 -0
  58. package/src/Layout/Screen/ScreenBodyAllocation.ts +5 -0
  59. package/src/Layout/Shell/Shell.tsx +124 -0
  60. package/src/Layout/Sidebar/Sidebar.tsx +31 -7
  61. package/src/Theme/Palette.ts +17 -6
  62. package/src/Theme/renderTokens.ts +61 -12
  63. package/src/index.ts +22 -2
  64. package/src/styles.css +5 -6
  65. package/src/styles.dark.css +5 -6
  66. package/src/styles.light.css +5 -6
  67. package/src/tokens.css +54 -9
  68. package/src/tokens.dark.css +51 -8
  69. package/src/tokens.light.css +49 -6
  70. package/dist/index.css +0 -2
package/src/tokens.css CHANGED
@@ -11,6 +11,8 @@
11
11
 
12
12
  :root {
13
13
  --color-surface: #ffffff;
14
+ --color-selected-surface: #f8fafc;
15
+ --color-selected-error: #cd2d7d;
14
16
  --color-foreground: #0f172a;
15
17
  --color-muted: #64748b;
16
18
  --color-border: #e2e8f0;
@@ -28,7 +30,7 @@
28
30
  --color-secondary-foreground: #f8fafc;
29
31
  --color-disabled: #94a3b8;
30
32
  --color-disabled-hover: #64748b;
31
- --color-focus-ring: var(--color-ring, #475569);
33
+ --color-focus-ring: #475569;
32
34
  --color-link: #2563eb;
33
35
  --color-success: #047857;
34
36
  --color-warning: #b45309;
@@ -40,13 +42,15 @@
40
42
 
41
43
  .dark {
42
44
  --color-surface: #0f172a;
45
+ --color-selected-surface: #151e30;
46
+ --color-selected-error: #f48fb1;
43
47
  --color-foreground: #f8fafc;
44
48
  --color-muted: #94a3b8;
45
49
  --color-border: #334155;
46
50
  --color-control-border: #94a3b8;
47
51
  --color-rule: #5b6a80;
48
52
  --color-backing: #1e293b;
49
- --color-scrim: rgb(15 23 42 / 0.5);
53
+ --color-scrim: rgb(0 0 0 / 0.6);
50
54
  --color-meter-fill: #f8fafc;
51
55
  --color-meter-track: #334155;
52
56
  --color-primary: #8b5cf6;
@@ -56,8 +60,8 @@
56
60
  --color-secondary-hover: #38bdf8;
57
61
  --color-secondary-foreground: #020617;
58
62
  --color-disabled: #475569;
59
- --color-disabled-hover: #334155;
60
- --color-focus-ring: var(--color-ring, #cbd5e1);
63
+ --color-disabled-hover: #64748b;
64
+ --color-focus-ring: #cbd5e1;
61
65
  --color-link: #60a5fa;
62
66
  --color-success: #34d399;
63
67
  --color-warning: #fbbf24;
@@ -69,6 +73,8 @@
69
73
 
70
74
  @theme inline {
71
75
  --color-surface: var(--color-surface);
76
+ --color-selected-surface: var(--color-selected-surface);
77
+ --color-selected-error: var(--color-selected-error);
72
78
  --color-foreground: var(--color-foreground);
73
79
  --color-muted: var(--color-muted);
74
80
  --color-border: var(--color-border);
@@ -150,14 +156,20 @@
150
156
  --font-primary: inherit;
151
157
  --font-secondary: inherit;
152
158
 
159
+ /* Visual emphasis for body copy and annotations (#135), independent of family and size. */
160
+ --font-weight-strong: 700;
161
+
153
162
  /* Type roles, not a scale: one role per job, so a component asks for what its text is, never a rung.
154
163
  display > title > subtitle are the three heading steps H1-H3 bind to; H4-H6 share body and split
155
164
  by weight, so there is no fourth role. display is the hero and must out-scale every subpage head. */
156
- --text-display: clamp(3rem, 7vw, 6rem);
165
+ /* At 1280, 1440 and 1920 CSS px (16px root), size(w / 2) / size(w) must be >= 0.75.
166
+ At 200% zoom the viewport halves, so physical growth is 2 * that ratio: at least 1.5x.
167
+ The rem terms preserve growth; at 1280px these sizes stay within 2px of the old vw clamps. */
168
+ --text-display: clamp(3rem, 3rem + 3.125vw, 6rem);
157
169
  --leading-display: 1.05;
158
- --text-title: clamp(2.25rem, 5vw, 4.25rem);
170
+ --text-title: clamp(2.25rem, 2.25rem + 2.25vw, 4.25rem);
159
171
  --leading-title: 1.1;
160
- --text-subtitle: clamp(1.5rem, 3vw, 2.25rem);
172
+ --text-subtitle: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
161
173
  --leading-subtitle: 1.2;
162
174
 
163
175
  /* The reading block's opening paragraph (Prose #21): sized above body and below subtitle, led
@@ -166,6 +178,10 @@
166
178
  subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
167
179
  --text-lede: 1.25rem; /* 20px */
168
180
  --leading-lede: 1.4;
181
+
182
+ /* Whole correspondence blocks, independently of opening ledes (Prose #128). */
183
+ --text-letter: 1.25rem;
184
+ --leading-letter: 1.8;
169
185
  --text-body: 1.0625rem; /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
170
186
  --leading-body: 1.6;
171
187
  --text-small: 0.9375rem; /* 15px floor: below it tabular figures stop comparing column to column */
@@ -180,7 +196,7 @@
180
196
  /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
181
197
  the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
182
198
  role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
183
- --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
199
+ --text-dialog-title: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
184
200
  --leading-dialog-title: 1.2;
185
201
 
186
202
  /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
@@ -191,12 +207,15 @@
191
207
  --tracking-optical: -0.02em;
192
208
  }
193
209
 
194
- /* The heading, body and control family roles are utilities with a fallback to the primary face, not
210
+ /* The heading, body, letter and control family roles are utilities with a fallback to the primary face, not
195
211
  @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
196
212
  @utility font-heading {
197
213
  font-family: var(--font-heading, var(--font-primary));
198
214
  }
199
215
 
216
+ @utility font-letter {
217
+ font-family: var(--font-letter, var(--font-primary));
218
+ }
200
219
  @utility font-body {
201
220
  font-family: var(--font-body, var(--font-primary));
202
221
  }
@@ -219,6 +238,7 @@
219
238
  of controls rather than a reading line (docs/adr/0008, Amendments). */
220
239
  :root {
221
240
  --measure: 66ch;
241
+ --measure-letter: 60ch;
222
242
  --measure-display: 36ch;
223
243
  --measure-wide: 72ch;
224
244
  --measure-action: 20rem;
@@ -262,11 +282,23 @@
262
282
  initial-value: 1px;
263
283
  }
264
284
 
285
+ @property --column-layout-shortfall {
286
+ syntax: "<length>";
287
+ inherits: false;
288
+ initial-value: 1px;
289
+ }
290
+
265
291
  /* Box's inner padding, measured against inherited type, beside Collection's. */
266
292
  :root {
267
293
  --space-box-inset: 1em;
268
294
  }
269
295
 
296
+ /* Callout marks an edge without enclosing or arranging its content. */
297
+ :root {
298
+ --callout-mark-width: 0.25rem;
299
+ --space-callout-inset: 1em;
300
+ }
301
+
270
302
  /* Table's cell insets, one pair per density, beside Box's. */
271
303
  :root {
272
304
  --table-cell-inset-inline: 1rem;
@@ -311,6 +343,14 @@
311
343
  --tab-inset-block: 0.5em;
312
344
  }
313
345
 
346
+ :root {
347
+ --step-marker-size: 2em;
348
+ --step-inset-inline: 1em;
349
+ --step-inset-block: 0.5em;
350
+ --step-connector-thickness: 1px;
351
+ --step-selection-thickness: 2px;
352
+ }
353
+
314
354
  :root {
315
355
  --slider-track-thickness: 0.25rem;
316
356
  --slider-thumb-size: 1.5rem;
@@ -322,6 +362,11 @@
322
362
  --choice-marker-dot-size: 0.5rem;
323
363
  }
324
364
 
365
+ :root {
366
+ --switch-thumb-size: 1rem;
367
+ --switch-track-inset: 0.125rem;
368
+ }
369
+
325
370
  /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
326
371
  :root {
327
372
  --meter-track-thickness: 0.5rem;
@@ -6,13 +6,15 @@
6
6
 
7
7
  :root {
8
8
  --color-surface: #0f172a;
9
+ --color-selected-surface: #151e30;
10
+ --color-selected-error: #f48fb1;
9
11
  --color-foreground: #f8fafc;
10
12
  --color-muted: #94a3b8;
11
13
  --color-border: #334155;
12
14
  --color-control-border: #94a3b8;
13
15
  --color-rule: #5b6a80;
14
16
  --color-backing: #1e293b;
15
- --color-scrim: rgb(15 23 42 / 0.5);
17
+ --color-scrim: rgb(0 0 0 / 0.6);
16
18
  --color-meter-fill: #f8fafc;
17
19
  --color-meter-track: #334155;
18
20
  --color-primary: #8b5cf6;
@@ -22,8 +24,8 @@
22
24
  --color-secondary-hover: #38bdf8;
23
25
  --color-secondary-foreground: #020617;
24
26
  --color-disabled: #475569;
25
- --color-disabled-hover: #334155;
26
- --color-focus-ring: var(--color-ring, #cbd5e1);
27
+ --color-disabled-hover: #64748b;
28
+ --color-focus-ring: #cbd5e1;
27
29
  --color-link: #60a5fa;
28
30
  --color-success: #34d399;
29
31
  --color-warning: #fbbf24;
@@ -35,6 +37,8 @@
35
37
 
36
38
  @theme inline {
37
39
  --color-surface: var(--color-surface);
40
+ --color-selected-surface: var(--color-selected-surface);
41
+ --color-selected-error: var(--color-selected-error);
38
42
  --color-foreground: var(--color-foreground);
39
43
  --color-muted: var(--color-muted);
40
44
  --color-border: var(--color-border);
@@ -116,14 +120,20 @@
116
120
  --font-primary: inherit;
117
121
  --font-secondary: inherit;
118
122
 
123
+ /* Visual emphasis for body copy and annotations (#135), independent of family and size. */
124
+ --font-weight-strong: 700;
125
+
119
126
  /* Type roles, not a scale: one role per job, so a component asks for what its text is, never a rung.
120
127
  display > title > subtitle are the three heading steps H1-H3 bind to; H4-H6 share body and split
121
128
  by weight, so there is no fourth role. display is the hero and must out-scale every subpage head. */
122
- --text-display: clamp(3rem, 7vw, 6rem);
129
+ /* At 1280, 1440 and 1920 CSS px (16px root), size(w / 2) / size(w) must be >= 0.75.
130
+ At 200% zoom the viewport halves, so physical growth is 2 * that ratio: at least 1.5x.
131
+ The rem terms preserve growth; at 1280px these sizes stay within 2px of the old vw clamps. */
132
+ --text-display: clamp(3rem, 3rem + 3.125vw, 6rem);
123
133
  --leading-display: 1.05;
124
- --text-title: clamp(2.25rem, 5vw, 4.25rem);
134
+ --text-title: clamp(2.25rem, 2.25rem + 2.25vw, 4.25rem);
125
135
  --leading-title: 1.1;
126
- --text-subtitle: clamp(1.5rem, 3vw, 2.25rem);
136
+ --text-subtitle: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
127
137
  --leading-subtitle: 1.2;
128
138
 
129
139
  /* The reading block's opening paragraph (Prose #21): sized above body and below subtitle, led
@@ -132,6 +142,10 @@
132
142
  subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
133
143
  --text-lede: 1.25rem; /* 20px */
134
144
  --leading-lede: 1.4;
145
+
146
+ /* Whole correspondence blocks, independently of opening ledes (Prose #128). */
147
+ --text-letter: 1.25rem;
148
+ --leading-letter: 1.8;
135
149
  --text-body: 1.0625rem; /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
136
150
  --leading-body: 1.6;
137
151
  --text-small: 0.9375rem; /* 15px floor: below it tabular figures stop comparing column to column */
@@ -146,7 +160,7 @@
146
160
  /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
147
161
  the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
148
162
  role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
149
- --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
163
+ --text-dialog-title: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
150
164
  --leading-dialog-title: 1.2;
151
165
 
152
166
  /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
@@ -157,12 +171,15 @@
157
171
  --tracking-optical: -0.02em;
158
172
  }
159
173
 
160
- /* The heading, body and control family roles are utilities with a fallback to the primary face, not
174
+ /* The heading, body, letter and control family roles are utilities with a fallback to the primary face, not
161
175
  @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
162
176
  @utility font-heading {
163
177
  font-family: var(--font-heading, var(--font-primary));
164
178
  }
165
179
 
180
+ @utility font-letter {
181
+ font-family: var(--font-letter, var(--font-primary));
182
+ }
166
183
  @utility font-body {
167
184
  font-family: var(--font-body, var(--font-primary));
168
185
  }
@@ -185,6 +202,7 @@
185
202
  of controls rather than a reading line (docs/adr/0008, Amendments). */
186
203
  :root {
187
204
  --measure: 66ch;
205
+ --measure-letter: 60ch;
188
206
  --measure-display: 36ch;
189
207
  --measure-wide: 72ch;
190
208
  --measure-action: 20rem;
@@ -228,11 +246,23 @@
228
246
  initial-value: 1px;
229
247
  }
230
248
 
249
+ @property --column-layout-shortfall {
250
+ syntax: "<length>";
251
+ inherits: false;
252
+ initial-value: 1px;
253
+ }
254
+
231
255
  /* Box's inner padding, measured against inherited type, beside Collection's. */
232
256
  :root {
233
257
  --space-box-inset: 1em;
234
258
  }
235
259
 
260
+ /* Callout marks an edge without enclosing or arranging its content. */
261
+ :root {
262
+ --callout-mark-width: 0.25rem;
263
+ --space-callout-inset: 1em;
264
+ }
265
+
236
266
  /* Table's cell insets, one pair per density, beside Box's. */
237
267
  :root {
238
268
  --table-cell-inset-inline: 1rem;
@@ -277,6 +307,14 @@
277
307
  --tab-inset-block: 0.5em;
278
308
  }
279
309
 
310
+ :root {
311
+ --step-marker-size: 2em;
312
+ --step-inset-inline: 1em;
313
+ --step-inset-block: 0.5em;
314
+ --step-connector-thickness: 1px;
315
+ --step-selection-thickness: 2px;
316
+ }
317
+
280
318
  :root {
281
319
  --slider-track-thickness: 0.25rem;
282
320
  --slider-thumb-size: 1.5rem;
@@ -288,6 +326,11 @@
288
326
  --choice-marker-dot-size: 0.5rem;
289
327
  }
290
328
 
329
+ :root {
330
+ --switch-thumb-size: 1rem;
331
+ --switch-track-inset: 0.125rem;
332
+ }
333
+
291
334
  /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
292
335
  :root {
293
336
  --meter-track-thickness: 0.5rem;
@@ -6,6 +6,8 @@
6
6
 
7
7
  :root {
8
8
  --color-surface: #ffffff;
9
+ --color-selected-surface: #f8fafc;
10
+ --color-selected-error: #cd2d7d;
9
11
  --color-foreground: #0f172a;
10
12
  --color-muted: #64748b;
11
13
  --color-border: #e2e8f0;
@@ -23,7 +25,7 @@
23
25
  --color-secondary-foreground: #f8fafc;
24
26
  --color-disabled: #94a3b8;
25
27
  --color-disabled-hover: #64748b;
26
- --color-focus-ring: var(--color-ring, #475569);
28
+ --color-focus-ring: #475569;
27
29
  --color-link: #2563eb;
28
30
  --color-success: #047857;
29
31
  --color-warning: #b45309;
@@ -35,6 +37,8 @@
35
37
 
36
38
  @theme inline {
37
39
  --color-surface: var(--color-surface);
40
+ --color-selected-surface: var(--color-selected-surface);
41
+ --color-selected-error: var(--color-selected-error);
38
42
  --color-foreground: var(--color-foreground);
39
43
  --color-muted: var(--color-muted);
40
44
  --color-border: var(--color-border);
@@ -116,14 +120,20 @@
116
120
  --font-primary: inherit;
117
121
  --font-secondary: inherit;
118
122
 
123
+ /* Visual emphasis for body copy and annotations (#135), independent of family and size. */
124
+ --font-weight-strong: 700;
125
+
119
126
  /* Type roles, not a scale: one role per job, so a component asks for what its text is, never a rung.
120
127
  display > title > subtitle are the three heading steps H1-H3 bind to; H4-H6 share body and split
121
128
  by weight, so there is no fourth role. display is the hero and must out-scale every subpage head. */
122
- --text-display: clamp(3rem, 7vw, 6rem);
129
+ /* At 1280, 1440 and 1920 CSS px (16px root), size(w / 2) / size(w) must be >= 0.75.
130
+ At 200% zoom the viewport halves, so physical growth is 2 * that ratio: at least 1.5x.
131
+ The rem terms preserve growth; at 1280px these sizes stay within 2px of the old vw clamps. */
132
+ --text-display: clamp(3rem, 3rem + 3.125vw, 6rem);
123
133
  --leading-display: 1.05;
124
- --text-title: clamp(2.25rem, 5vw, 4.25rem);
134
+ --text-title: clamp(2.25rem, 2.25rem + 2.25vw, 4.25rem);
125
135
  --leading-title: 1.1;
126
- --text-subtitle: clamp(1.5rem, 3vw, 2.25rem);
136
+ --text-subtitle: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
127
137
  --leading-subtitle: 1.2;
128
138
 
129
139
  /* The reading block's opening paragraph (Prose #21): sized above body and below subtitle, led
@@ -132,6 +142,10 @@
132
142
  subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
133
143
  --text-lede: 1.25rem; /* 20px */
134
144
  --leading-lede: 1.4;
145
+
146
+ /* Whole correspondence blocks, independently of opening ledes (Prose #128). */
147
+ --text-letter: 1.25rem;
148
+ --leading-letter: 1.8;
135
149
  --text-body: 1.0625rem; /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
136
150
  --leading-body: 1.6;
137
151
  --text-small: 0.9375rem; /* 15px floor: below it tabular figures stop comparing column to column */
@@ -146,7 +160,7 @@
146
160
  /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
147
161
  the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
148
162
  role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
149
- --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
163
+ --text-dialog-title: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
150
164
  --leading-dialog-title: 1.2;
151
165
 
152
166
  /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
@@ -157,12 +171,15 @@
157
171
  --tracking-optical: -0.02em;
158
172
  }
159
173
 
160
- /* The heading, body and control family roles are utilities with a fallback to the primary face, not
174
+ /* The heading, body, letter and control family roles are utilities with a fallback to the primary face, not
161
175
  @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
162
176
  @utility font-heading {
163
177
  font-family: var(--font-heading, var(--font-primary));
164
178
  }
165
179
 
180
+ @utility font-letter {
181
+ font-family: var(--font-letter, var(--font-primary));
182
+ }
166
183
  @utility font-body {
167
184
  font-family: var(--font-body, var(--font-primary));
168
185
  }
@@ -185,6 +202,7 @@
185
202
  of controls rather than a reading line (docs/adr/0008, Amendments). */
186
203
  :root {
187
204
  --measure: 66ch;
205
+ --measure-letter: 60ch;
188
206
  --measure-display: 36ch;
189
207
  --measure-wide: 72ch;
190
208
  --measure-action: 20rem;
@@ -228,11 +246,23 @@
228
246
  initial-value: 1px;
229
247
  }
230
248
 
249
+ @property --column-layout-shortfall {
250
+ syntax: "<length>";
251
+ inherits: false;
252
+ initial-value: 1px;
253
+ }
254
+
231
255
  /* Box's inner padding, measured against inherited type, beside Collection's. */
232
256
  :root {
233
257
  --space-box-inset: 1em;
234
258
  }
235
259
 
260
+ /* Callout marks an edge without enclosing or arranging its content. */
261
+ :root {
262
+ --callout-mark-width: 0.25rem;
263
+ --space-callout-inset: 1em;
264
+ }
265
+
236
266
  /* Table's cell insets, one pair per density, beside Box's. */
237
267
  :root {
238
268
  --table-cell-inset-inline: 1rem;
@@ -277,6 +307,14 @@
277
307
  --tab-inset-block: 0.5em;
278
308
  }
279
309
 
310
+ :root {
311
+ --step-marker-size: 2em;
312
+ --step-inset-inline: 1em;
313
+ --step-inset-block: 0.5em;
314
+ --step-connector-thickness: 1px;
315
+ --step-selection-thickness: 2px;
316
+ }
317
+
280
318
  :root {
281
319
  --slider-track-thickness: 0.25rem;
282
320
  --slider-thumb-size: 1.5rem;
@@ -288,6 +326,11 @@
288
326
  --choice-marker-dot-size: 0.5rem;
289
327
  }
290
328
 
329
+ :root {
330
+ --switch-thumb-size: 1rem;
331
+ --switch-track-inset: 0.125rem;
332
+ }
333
+
291
334
  /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
292
335
  :root {
293
336
  --meter-track-thickness: 0.5rem;
package/dist/index.css DELETED
@@ -1,2 +0,0 @@
1
- /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
2
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){:root,:host{--definition-shortfall:1px}*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-slate-200:oklch(92.9% .013 255.508);--color-slate-900:oklch(20.8% .042 265.755);--color-stone-50:oklch(98.5% .001 106.423);--color-white:#fff;--spacing:.25rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--radius-md:.375rem;--radius-lg:.5rem;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-surface:var(--color-surface);--color-foreground:var(--color-foreground);--color-muted:var(--color-muted);--color-border:var(--color-border);--color-control-border:var(--color-control-border);--color-rule:var(--color-rule);--color-backing:var(--color-backing);--color-scrim:var(--color-scrim);--color-meter-fill:var(--color-meter-fill);--color-meter-track:var(--color-meter-track);--color-primary:var(--color-primary);--color-primary-hover:var(--color-primary-hover);--color-primary-foreground:var(--color-primary-foreground);--color-secondary:var(--color-secondary);--color-secondary-hover:var(--color-secondary-hover);--color-secondary-foreground:var(--color-secondary-foreground);--color-disabled:var(--color-disabled);--color-disabled-hover:var(--color-disabled-hover);--color-focus-ring:var(--color-focus-ring);--color-link:var(--color-link);--color-success:var(--color-success);--color-warning:var(--color-warning);--color-error:var(--color-error);--color-error-hover:var(--color-error-hover);--color-error-foreground:var(--color-error-foreground);--color-info:var(--color-info);--font-primary:inherit;--font-secondary:inherit;--text-display:clamp(3rem, 7vw, 6rem);--leading-display:1.05;--text-title:clamp(2.25rem, 5vw, 4.25rem);--leading-title:1.1;--text-subtitle:clamp(1.5rem, 3vw, 2.25rem);--leading-subtitle:1.2;--text-lede:1.25rem;--leading-lede:1.4;--text-body:1.0625rem;--leading-body:1.6;--text-small:.9375rem;--text-label:.8125rem;--leading-label:1.5;--text-dialog-title:clamp(1.5rem, 3vw, 2.25rem);--leading-dialog-title:1.2;--tracking-label:.14em;--tracking-optical:-.02em;--aspect-portrait:4 / 5;--aspect-square:1 / 1;--aspect-landscape:3 / 2;--aspect-wide:16 / 9}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.\@container{container-type:inline-size}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.right-0{right:0}.left-0{left:0}.isolate{isolation:isolate}.z-10{z-index:10}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.-m-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{margin:calc(calc(var(--focus-ring-width) + var(--focus-ring-offset)) * -1)}.m-0{margin:0}.m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]{margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-auto{margin-block:auto}.ms-auto{margin-inline-start:auto}.mt-\[0\.3rem\]{margin-top:.3rem}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-landscape{aspect-ratio:var(--aspect-landscape)}.aspect-portrait{aspect-ratio:var(--aspect-portrait)}.aspect-square{aspect-ratio:var(--aspect-square)}.aspect-wide{aspect-ratio:var(--aspect-wide)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-\[var\(--choice-marker-dot-size\)\]{width:var(--choice-marker-dot-size);height:var(--choice-marker-dot-size)}.size-\[var\(--choice-marker-size\)\]{width:var(--choice-marker-size);height:var(--choice-marker-size)}.h-12{height:calc(var(--spacing) * 12)}.h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{height:calc(100dvh - 2 * var(--space-region))}.h-\[var\(--meter-track-thickness\)\]{height:var(--meter-track-thickness)}.h-\[var\(--slider-thumb-size\)\]{height:var(--slider-thumb-size)}.h-full{height:100%}.max-h-\[calc\(100dvh-2\*var\(--space-region\)\)\]{max-height:calc(100dvh - 2 * var(--space-region))}.max-h-\[var\(--multiselect-surface-max-height\,50vh\)\]{max-height:var(--multiselect-surface-max-height,50vh)}.max-h-full{max-height:100%}.max-h-none{max-height:none}.min-h-0{min-height:0}.min-h-24{min-height:calc(var(--spacing) * 24)}.min-h-\[calc\(var\(--text-body\)\*var\(--leading-body\)\)\]{min-height:calc(var(--text-body) * var(--leading-body))}.min-h-\[calc\(var\(--text-label\)\*var\(--leading-label\)\)\]{min-height:calc(var(--text-label) * var(--leading-label))}.min-h-\[var\(--cover-height\)\]{min-height:var(--cover-height)}.min-h-\[var\(--fold-height\)\]{min-height:var(--fold-height)}.w-\[32rem\]{width:32rem}.w-\[360px\]{width:360px}.w-\[calc\(100vw-2\*var\(--gutter\)\)\]{width:calc(100vw - 2 * var(--gutter))}.w-\[calc\(var\(--meter-level\)\*100\%\)\]{width:calc(var(--meter-level) * 100%)}.w-\[var\(--measure-action\)\]{width:var(--measure-action)}.w-fit{width:fit-content}.w-full{width:100%}.\[max-width\:var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-\[12rem\]{max-width:12rem}.max-w-\[calc\(100vw-2\*var\(--gutter\)\)\]{max-width:calc(100vw - 2 * var(--gutter))}.max-w-\[var\(--measure\)\]{max-width:var(--measure)}.max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.max-w-\[var\(--measure-wide\)\]{max-width:var(--measure-wide)}.max-w-full{max-width:100%}.max-w-none{max-width:none}.min-w-0{min-width:0}.min-w-42{min-width:calc(var(--spacing) * 42)}.min-w-\[min\(var\(--control-min-width\)\,100\%\)\]{min-width:min(var(--control-min-width), 100%)}.min-w-\[var\(--standing-min-width\)\]{min-width:var(--standing-min-width)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.grow-\[var\(--column-layout-weight\)\]{flex-grow:var(--column-layout-weight)}.basis-0{flex-basis:0}.basis-\[clamp\(0px\,\(var\(--column-layout-threshold\)-100\%\)\*1000000\,100\%\)\]{flex-basis:clamp(0px, (var(--column-layout-threshold) - 100%) * 1000000, 100%)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.list-none{list-style-type:none}.appearance-none{appearance:none}.grid-flow-row-dense{grid-auto-flow:dense}.grid-cols-\[max\(calc\(\(100\%-var\(--space-definition-column\)\)\*var\(--definition-term-share\)\)\,var\(--definition-stack\)\)_minmax\(0\,1fr\)\]{grid-template-columns:max(calc((100% - var(--space-definition-column)) * var(--definition-term-share)), var(--definition-stack)) minmax(0,1fr)}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:var(--spacing)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-\[var\(--space-region\)\]{gap:var(--space-region)}.gap-\[var\(--space-stack\)\]{gap:var(--space-stack)}:where(.space-y-10>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-\[max\(0px\,var\(--space-definition-column\)-var\(--definition-stack\)\)\]{column-gap:max(0px, var(--space-definition-column) - var(--definition-stack))}.gap-x-\[var\(--space-region\)\]{column-gap:var(--space-region)}.gap-x-\[var\(--space-stack\)\]{column-gap:var(--space-stack)}.gap-y-\[var\(--space-stack\)\]{row-gap:var(--space-stack)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-\[var\(--radius-control\)\]{border-radius:var(--radius-control)}.rounded-\[var\(--radius-dialog\)\]{border-radius:var(--radius-dialog)}.rounded-\[var\(--radius-…\)\]{border-radius:var(--radius-…)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-\[length\:var\(--tab-marker-thickness\)\]{border-bottom-style:var(--tw-border-style);border-bottom-width:var(--tab-marker-thickness)}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-none{--tw-border-style:none;border-style:none}.border-solid{--tw-border-style:solid;border-style:solid}.border-border{border-color:var(--color-border)}.border-control-border{border-color:var(--color-control-border)}.border-error{border-color:var(--color-error)}.border-primary{border-color:var(--color-primary)}.border-rule{border-color:var(--color-rule)}.border-secondary{border-color:var(--color-secondary)}.border-slate-200{border-color:var(--color-slate-200)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:var(--color-meter-fill)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_oklab\,var\(--color-meter-fill\)_calc\(var\(--meter-level\)\*100\%\)\,var\(--color-error\)\)\]{background-color:color-mix(in oklab,var(--color-meter-fill) calc(var(--meter-level) * 100%),var(--color-error))}}.bg-backing{background-color:var(--color-backing)}.bg-error{background-color:var(--color-error)}.bg-foreground{background-color:var(--color-foreground)}.bg-meter-fill{background-color:var(--color-meter-fill)}.bg-meter-track{background-color:var(--color-meter-track)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.object-cover{object-fit:cover}.object-bottom{object-position:bottom}.object-center{object-position:center}.object-left{object-position:left}.object-right{object-position:right}.object-top{object-position:top}.p-0{padding:0}.p-1{padding:var(--spacing)}.p-4{padding:calc(var(--spacing) * 4)}.p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.p-\[var\(--space-box-inset\)\]{padding:var(--space-box-inset)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[calc\(1rem_-_1px\)\]{padding-inline:calc(1rem - 1px)}.px-\[var\(--gutter\)\]{padding-inline:var(--gutter)}.px-\[var\(--space-region\)\]{padding-inline:var(--space-region)}.px-\[var\(--tab-inset-inline\)\]{padding-inline:var(--tab-inset-inline)}.px-\[var\(--table-cell-padding-inline\)\]{padding-inline:var(--table-cell-padding-inline)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-\[calc\(0\.5rem_-_1px\)\]{padding-block:calc(.5rem - 1px)}.py-\[var\(--space-band\)\]{padding-block:var(--space-band)}.py-\[var\(--space-collection-item\)\]{padding-block:var(--space-collection-item)}.py-\[var\(--space-region\)\]{padding-block:var(--space-region)}.py-\[var\(--tab-inset-block\)\]{padding-block:var(--tab-inset-block)}.py-\[var\(--table-cell-padding-block\)\]{padding-block:var(--table-cell-padding-block)}.pt-1{padding-top:var(--spacing)}.pt-\[var\(--space-region\)\]{padding-top:var(--space-region)}.pr-0\.5{padding-right:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-\[var\(--space-region\)\]{padding-bottom:var(--space-region)}.pl-2{padding-left:calc(var(--spacing) * 2)}.\[text-align\:inherit\]{text-align:inherit}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-start{text-align:start}.align-\[-0\.125em\]{vertical-align:-.125em}.\[font-family\:Georgia\]{font-family:Georgia}.\[font-family\:…\]{font-family:…}.font-\(family-name\:--brand\){font-family:var(--brand)}.font-\[Georgia\]{font-family:Georgia}.font-\[family-name\:var\(--brand\)\]{font-family:var(--brand)}.font-\[…\]{font-family:…}.font-body{font-family:var(--font-body,var(--font-primary))}.font-control{font-family:var(--font-control,var(--font-primary))}.font-heading{font-family:var(--font-heading,var(--font-primary))}.font-mono{font-family:var(--font-mono)}.font-primary{font-family:var(--font-primary)}.font-sans{font-family:var(--font-sans)}.font-secondary{font-family:var(--font-secondary)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-body{font-size:var(--text-body)}.text-dialog-title{font-size:var(--text-dialog-title)}.text-display{font-size:var(--text-display)}.text-label{font-size:var(--text-label)}.text-lede{font-size:var(--text-lede)}.text-small{font-size:var(--text-small)}.text-subtitle{font-size:var(--text-subtitle)}.text-title{font-size:var(--text-title)}.leading-body{--tw-leading:var(--leading-body);line-height:var(--leading-body)}.leading-dialog-title{--tw-leading:var(--leading-dialog-title);line-height:var(--leading-dialog-title)}.leading-display{--tw-leading:var(--leading-display);line-height:var(--leading-display)}.leading-label{--tw-leading:var(--leading-label);line-height:var(--leading-label)}.leading-lede{--tw-leading:var(--leading-lede);line-height:var(--leading-lede)}.leading-subtitle{--tw-leading:var(--leading-subtitle);line-height:var(--leading-subtitle)}.leading-title{--tw-leading:var(--leading-title);line-height:var(--leading-title)}.font-\(--brand\){--tw-font-weight:var(--brand);font-weight:var(--brand)}.font-\[500\]{--tw-font-weight:500;font-weight:500}.font-\[600\]{--tw-font-weight:600;font-weight:600}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-label{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.tracking-optical{--tw-tracking:var(--tracking-optical);letter-spacing:var(--tracking-optical)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.\[letter-spacing\:inherit\]{letter-spacing:inherit}.text-balance{text-wrap:balance}.text-nowrap{text-wrap:nowrap}.\[overflow-wrap\:anywhere\],.wrap-anywhere{overflow-wrap:anywhere}.wrap-break-word{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.\[color\:inherit\]{color:inherit}.text-\[var\(--text-small\)\]{color:var(--text-small)}.text-error{color:var(--color-error)}.text-error-foreground{color:var(--color-error-foreground)}.text-foreground{color:var(--color-foreground)}.text-info{color:var(--color-info)}.text-inherit{color:inherit}.text-link{color:var(--color-link)}.text-muted{color:var(--color-muted)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary{color:var(--color-secondary)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-slate-900{color:var(--color-slate-900)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.underline{text-decoration-line:underline}.decoration-\[length\:var\(--underline-thickness\)\]{text-decoration-thickness:var(--underline-thickness)}.underline-offset-\[var\(--underline-offset\)\]{text-underline-offset:var(--underline-offset)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--elevation-floating\)\]{--tw-shadow:var(--elevation-floating);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-offset-\[var\(--focus-ring-offset\)\]{outline-offset:var(--focus-ring-offset)}.outline-focus-ring{outline-color:var(--color-focus-ring)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-\[var\(--motion-duration-color\)\]{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.forced-color-adjust-auto{forced-color-adjust:auto}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.\[--column-layout-gap\:var\(--space-region\)\]{--column-layout-gap:var(--space-region)}.\[--column-layout-gap\:var\(--space-stack\)\]{--column-layout-gap:var(--space-stack)}.\[--definition-shortfall\:clamp\(0px\,\(var\(--definition-threshold\)-100cqi\)\*1000000\,1px\)\]{--definition-shortfall:clamp(0px, (var(--definition-threshold) - 100cqi) * 1000000, 1px)}.\[--definition-stack\:clamp\(0px\,\(var\(--definition-threshold\)-100\%\)\*1000000\,100\%\)\]{--definition-stack:clamp(0px, (var(--definition-threshold) - 100%) * 1000000, 100%)}.\[--table-cell-padding-block\:var\(--table-cell-inset-block\)\]{--table-cell-padding-block:var(--table-cell-inset-block)}.\[--table-cell-padding-block\:var\(--table-cell-inset-block-compact\)\]{--table-cell-padding-block:var(--table-cell-inset-block-compact)}.\[--table-cell-padding-inline\:var\(--table-cell-inset-inline\)\]{--table-cell-padding-inline:var(--table-cell-inset-inline)}.\[--table-cell-padding-inline\:var\(--table-cell-inset-inline-compact\)\]{--table-cell-padding-inline:var(--table-cell-inset-inline-compact)}.\[font\:inherit\]{font:inherit}.group-disabled\/choice\:text-muted:is(:where(.group\/choice):disabled *){color:var(--color-muted)}.group-aria-checked\/option\:border-foreground:is(:where(.group\/option)[aria-checked=true] *){border-color:var(--color-foreground)}.group-data-\[disabled\]\/field\:text-muted:is(:where(.group\/field)[data-disabled] *){color:var(--color-muted)}.backdrop\:bg-scrim::backdrop{background-color:var(--color-scrim)}.backdrop\:\[backdrop-filter\:blur\(var\(--scrim-blur\)\)\]::backdrop{-webkit-backdrop-filter:blur(var(--scrim-blur));backdrop-filter:blur(var(--scrim-blur))}.before\:mt-\[0\.35em\]:before{content:var(--tw-content);margin-top:.35em}.before\:size-\[calc\(var\(--tick-length\)\*0\.7\)\]:before{content:var(--tw-content);width:calc(var(--tick-length) * .7);height:calc(var(--tick-length) * .7)}.before\:shrink-0:before{content:var(--tw-content);flex-shrink:0}.before\:rotate-45:before{content:var(--tw-content);rotate:45deg}.before\:bg-\[var\(--color-rule\)\]:before{content:var(--tw-content);background-color:var(--color-rule)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\[border-right\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-right:var(--tick-thickness) solid var(--color-rule)}.before\:\[border-top\:var\(--tick-thickness\)_solid_var\(--color-rule\)\]:before{content:var(--tw-content);border-top:var(--tick-thickness) solid var(--color-rule)}.first\:border-t:first-child{border-top-style:var(--tw-border-style);border-top-width:1px}.first\:pl-0:first-child{padding-left:0}.last\:pr-0:last-child{padding-right:0}.open\:flex:is([open],:popover-open,:open){display:flex}.open\:flex-col:is([open],:popover-open,:open){flex-direction:column}@media (hover:hover){.hover\:border-muted:hover{border-color:var(--color-muted)}.hover\:bg-backing:hover{background-color:var(--color-backing)}.hover\:bg-error-hover:hover{background-color:var(--color-error-hover)}.hover\:bg-primary-hover:hover{background-color:var(--color-primary-hover)}.hover\:bg-secondary:hover{background-color:var(--color-secondary)}.hover\:bg-secondary-hover:hover{background-color:var(--color-secondary-hover)}.hover\:text-sm:hover{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:underline:hover{text-decoration-line:underline}.hover\:decoration-\[length\:var\(--underline-thickness\)\]:hover{text-decoration-thickness:var(--underline-thickness)}.hover\:decoration-\[length\:var\(--underline-thickness-hover\)\]:hover{text-decoration-thickness:var(--underline-thickness-hover)}.hover\:underline-offset-\[var\(--underline-offset\)\]:hover{text-underline-offset:var(--underline-offset)}.hover\:opacity-90:hover{opacity:.9}}.focus-visible\:outline:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.focus-visible\:outline-\[length\:…\]:focus-visible{outline-style:var(--tw-outline-style);outline-width:…}.focus-visible\:outline-focus-ring:focus-visible{outline-color:var(--color-focus-ring)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-disabled:disabled{border-color:var(--color-disabled)}.disabled\:bg-disabled:disabled{background-color:var(--color-disabled)}.disabled\:text-disabled:disabled{color:var(--color-disabled)}.disabled\:text-muted:disabled{color:var(--color-muted)}@media (hover:hover){.disabled\:hover\:bg-disabled-hover:disabled:hover{background-color:var(--color-disabled-hover)}.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}.disabled\:hover\:text-muted:disabled:hover{color:var(--color-muted)}}.aria-checked\:border-foreground[aria-checked=true],.aria-selected\:border-foreground[aria-selected=true]{border-color:var(--color-foreground)}.aria-selected\:text-foreground[aria-selected=true]{color:var(--color-foreground)}.aria-\[invalid\=true\]\:border-error[aria-invalid=true]{border-color:var(--color-error)}.data-\[disabled\]\:border-disabled[data-disabled]{border-color:var(--color-disabled)}.data-\[disabled\]\:text-muted[data-disabled]{color:var(--color-muted)}.data-\[overflow\]\:invisible[data-overflow]{visibility:hidden}.data-\[overflow\]\:absolute[data-overflow]{position:absolute}.data-\[placement\=above\]\:bottom-full[data-placement=above]{bottom:100%}.data-\[placement\=above\]\:mb-1[data-placement=above]{margin-bottom:var(--spacing)}.data-\[placement\=below\]\:top-full[data-placement=below]{top:100%}.data-\[placement\=below\]\:mt-1[data-placement=below]{margin-top:var(--spacing)}@media (width>=40rem){.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:px-\[calc\(1\.5rem_-_1px\)\]{padding-inline:calc(1.5rem - 1px)}}@media (width>=48rem){.md\:font-serif{font-family:var(--font-serif)}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}@media (width>=64rem){.lg\:sticky{position:sticky}.lg\:top-6{top:calc(var(--spacing) * 6)}.lg\:max-w-\[var\(--measure-display\)\]{max-width:var(--measure-display)}.lg\:grid-cols-\[10rem_minmax\(0\,1fr\)\]{grid-template-columns:10rem minmax(0,1fr)}.lg\:grid-cols-\[12rem_minmax\(0\,1fr\)\]{grid-template-columns:12rem minmax(0,1fr)}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:gap-x-12{column-gap:calc(var(--spacing) * 12)}}@media (forced-colors:active){.forced-colors\:border{border-style:var(--tw-border-style);border-width:1px}}.\[\&_\[aria-current\=page\]\]\:text-foreground [aria-current=page]{color:var(--color-foreground)}.\[\&_caption\]\:pb-3 caption{padding-bottom:calc(var(--spacing) * 3)}.\[\&_caption\]\:text-left caption{text-align:left}.\[\&_caption\]\:font-secondary caption{font-family:var(--font-secondary)}.\[\&_caption\]\:text-label caption{font-size:var(--text-label)}.\[\&_caption\]\:tracking-label caption{--tw-tracking:var(--tracking-label);letter-spacing:var(--tracking-label)}.\[\&_caption\]\:text-muted caption{color:var(--color-muted)}.\[\&\+li\]\:border-t+li{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\+li\]\:border-solid+li{--tw-border-style:solid;border-style:solid}.\[\&\+li\]\:border-border+li{border-color:var(--color-border)}.\[\&\:\:-moz-range-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-moz-range-thumb\]\:rounded-\[var\(--radius-control\)\]::-moz-range-thumb{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-thumb\]\:border-none::-moz-range-thumb{--tw-border-style:none;border-style:none}.\[\&\:\:-moz-range-thumb\]\:bg-foreground::-moz-range-thumb{background-color:var(--color-foreground)}.\[\&\:\:-moz-range-track\]\:h-\[var\(--slider-track-thickness\)\]::-moz-range-track{height:var(--slider-track-thickness)}.\[\&\:\:-moz-range-track\]\:rounded-\[var\(--radius-control\)\]::-moz-range-track{border-radius:var(--radius-control)}.\[\&\:\:-moz-range-track\]\:bg-control-border::-moz-range-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-runnable-track\]\:h-\[var\(--slider-track-thickness\)\]::-webkit-slider-runnable-track{height:var(--slider-track-thickness)}.\[\&\:\:-webkit-slider-runnable-track\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-runnable-track{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-runnable-track\]\:bg-control-border::-webkit-slider-runnable-track{background-color:var(--color-control-border)}.\[\&\:\:-webkit-slider-thumb\]\:mt-\[calc\(\(var\(--slider-track-thickness\)-var\(--slider-thumb-size\)\)\/2\)\]::-webkit-slider-thumb{margin-top:calc((var(--slider-track-thickness) - var(--slider-thumb-size)) / 2)}.\[\&\:\:-webkit-slider-thumb\]\:size-\[var\(--slider-thumb-size\)\]::-webkit-slider-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size)}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-\[var\(--radius-control\)\]::-webkit-slider-thumb{border-radius:var(--radius-control)}.\[\&\:\:-webkit-slider-thumb\]\:bg-foreground::-webkit-slider-thumb{background-color:var(--color-foreground)}.\[\&\:disabled\:\:-moz-range-thumb\]\:bg-disabled:disabled::-moz-range-thumb{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-moz-range-track\]\:bg-disabled:disabled::-moz-range-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-runnable-track\]\:bg-disabled:disabled::-webkit-slider-runnable-track{background-color:var(--color-disabled)}.\[\&\:disabled\:\:-webkit-slider-thumb\]\:bg-disabled:disabled::-webkit-slider-thumb{background-color:var(--color-disabled)}.\[\&\:has\(\+\[data-dialog-member\=description\]\)\]\:pb-0:has(+[data-dialog-member=description]){padding-bottom:0}.\[\&\:has\(\[aria-selected\]\)_tr\>\*\:first-child\]\:pl-\[var\(--table-cell-padding-inline\)\]:has([aria-selected]) tr>:first-child{padding-left:var(--table-cell-padding-inline)}.\[\&\:has\(tr\[tabindex\]\)\]\:m-\[calc\(-1\*\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\)\]:has(tr[tabindex]){margin:calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)))}.\[\&\:has\(tr\[tabindex\]\)\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]:has(tr[tabindex]){scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.\[\&\:has\(tr\[tabindex\]\)\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]:has(tr[tabindex]){padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.\[\&\:not\(\:first-child\)\]\:mt-\[var\(--space-stack\)\]:not(:first-child){margin-top:var(--space-stack)}.\[\&\:not\(\:first-child\)\]\:border-t:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\:not\(\:first-child\)\]\:border-solid:not(:first-child){--tw-border-style:solid;border-style:solid}.\[\&\:not\(\:first-child\)\]\:border-border:not(:first-child){border-color:var(--color-border)}.\[\&\:not\(\:first-child\)\]\:pt-\[var\(--space-stack\)\]:not(:first-child){padding-top:var(--space-stack)}.\[\&\:user-invalid\]\:border-error:user-invalid{border-color:var(--color-error)}.\[\&\>dd\]\:col-span-full>dd{grid-column:1/-1}.\[\&\>dd\]\:col-start-\[calc\(2-tan\(atan2\(var\(--definition-shortfall\)\,1px\)\)\)\]>dd{grid-column-start:calc(2 - tan(atan2(var(--definition-shortfall), 1px)))}.\[\&\>dd\]\:self-baseline>dd{align-self:baseline}.\[\&\>div\]\:py-\[var\(--space-definition-item\)\]>div{padding-block:var(--space-definition-item)}.\[\&\>div\]\:py-\[var\(--space-definition-item-compact\)\]>div{padding-block:var(--space-definition-item-compact)}.\[\&\>div\:first-child\]\:border-b>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&\>div\:first-child\]\:border-solid>div:first-child{--tw-border-style:solid;border-style:solid}.\[\&\>div\:first-child\]\:border-border>div:first-child{border-color:var(--color-border)}.\[\&\>div\:first-child\]\:pb-\[var\(--space-stack\)\]>div:first-child{padding-bottom:var(--space-stack)}@media (width>=64rem){.lg\:\[\&\>div\:first-child\]\:border-r>div:first-child{border-right-style:var(--tw-border-style);border-right-width:1px}.lg\:\[\&\>div\:first-child\]\:border-b-0>div:first-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:\[\&\>div\:first-child\]\:pr-\[var\(--space-stack\)\]>div:first-child{padding-right:var(--space-stack)}.lg\:\[\&\>div\:first-child\]\:pb-0>div:first-child{padding-bottom:0}}.\[\&\>div\:first-child\>nav\]\:p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}@media (width>=64rem){.lg\:\[\&\>div\:first-child\>nav\]\:sticky>div:first-child>nav{position:sticky}.lg\:\[\&\>div\:first-child\>nav\]\:top-0>div:first-child>nav{top:0}.lg\:\[\&\>div\:first-child\>nav\]\:max-h-\[min\(100dvh\,var\(--sidebar-scrollport-height\,100dvh\)\)\]>div:first-child>nav{max-height:min(100dvh, var(--sidebar-scrollport-height,100dvh))}.lg\:\[\&\>div\:first-child\>nav\]\:scroll-p-\[calc\(var\(--focus-ring-width\)\+var\(--focus-ring-offset\)\)\]>div:first-child>nav{scroll-padding:calc(var(--focus-ring-width) + var(--focus-ring-offset))}.lg\:\[\&\>div\:first-child\>nav\]\:overflow-y-auto>div:first-child>nav{overflow-y:auto}}.\[\&\>div\:first-child\>nav\>ul\]\:flex>div:first-child>nav>ul{display:flex}.\[\&\>div\:first-child\>nav\>ul\]\:flex-col>div:first-child>nav>ul{flex-direction:column}.\[\&\>div\:first-child\>nav\>ul\]\:gap-\[var\(--space-stack\)\]>div:first-child>nav>ul{gap:var(--space-stack)}.\[\&\>dt\]\:col-start-1>dt{grid-column-start:1}.\[\&\>dt\]\:self-baseline>dt{align-self:baseline}.\[\&\>label\]\:font-secondary>label{font-family:var(--font-secondary)}.\[\&\>label\]\:text-body>label{font-size:var(--text-body)}.\[\&\>label\]\:font-medium>label{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\[\&\>label\]\:text-foreground>label{color:var(--color-foreground)}.\[\&\>p\]\:font-secondary>p{font-family:var(--font-secondary)}.\[\&\>p\]\:text-small>p{font-size:var(--text-small)}.\[\&\>p\]\:text-muted>p{color:var(--color-muted)}.\[\&\>p\[data-error\]\]\:text-error>p[data-error]{color:var(--color-error)}.\[\&\>select\]\:block>select{display:block}.\[\&\>select\]\:w-full>select{width:100%}.\[\&\>select\]\:rounded-\[var\(--radius-control\)\]>select{border-radius:var(--radius-control)}.\[\&\>select\]\:border>select{border-style:var(--tw-border-style);border-width:1px}.\[\&\>select\]\:border-solid>select{--tw-border-style:solid;border-style:solid}.\[\&\>select\]\:border-control-border>select{border-color:var(--color-control-border)}.\[\&\>select\]\:bg-transparent>select{background-color:#0000}.\[\&\>select\]\:px-3>select{padding-inline:calc(var(--spacing) * 3)}.\[\&\>select\]\:py-2>select{padding-block:calc(var(--spacing) * 2)}.\[\&\>select\]\:font-control>select{font-family:var(--font-control,var(--font-primary))}.\[\&\>select\]\:font-primary>select{font-family:var(--font-primary)}.\[\&\>select\]\:text-body>select{font-size:var(--text-body)}.\[\&\>select\]\:text-foreground>select{color:var(--color-foreground)}.\[\&\>select\]\:outline-offset-\[var\(--focus-ring-offset\)\]>select{outline-offset:var(--focus-ring-offset)}.\[\&\>select\]\:outline-focus-ring>select{outline-color:var(--color-focus-ring)}.\[\&\>select\]\:transition-colors>select{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&\>select\]\:duration-\[var\(--motion-duration-color\)\]>select{--tw-duration:var(--motion-duration-color);transition-duration:var(--motion-duration-color)}.\[\&\>select\]\:focus-visible\:outline>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.\[\&\>select\]\:focus-visible\:outline-\[length\:var\(--focus-ring-width\)\]>select:focus-visible{outline-style:var(--tw-outline-style);outline-width:var(--focus-ring-width)}.\[\&\>select\]\:disabled\:cursor-not-allowed>select:disabled{cursor:not-allowed}.\[\&\>select\]\:disabled\:border-disabled>select:disabled{border-color:var(--color-disabled)}.\[\&\>select\]\:disabled\:text-muted>select:disabled{color:var(--color-muted)}.\[\&\>select\]\:aria-\[invalid\=true\]\:border-error>select[aria-invalid=true]{border-color:var(--color-error)}.\[\&\>select\:user-invalid\]\:border-error>select:user-invalid{border-color:var(--color-error)}.\[\&\>span\]\:font-secondary>span{font-family:var(--font-secondary)}.\[\&\>span\]\:text-small>span{font-size:var(--text-small)}.\[\&\>span\]\:text-muted>span{color:var(--color-muted)}.\[\&\>table\]\:w-full>table{width:100%}.\[\&\>table\]\:border-collapse>table{border-collapse:collapse}.\[\&\>table\]\:text-left>table{text-align:left}.\[\&\>table\>\*\:nth-child\(2\)\>tr\:first-child\]\:border-rule>table>:nth-child(2)>tr:first-child{border-color:var(--color-rule)}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:relative[aria-selected=true]>:first-child{position:relative}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:absolute[aria-selected=true]>:first-child:before{content:var(--tw-content);position:absolute}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:inset-y-0[aria-selected=true]>:first-child:before{content:var(--tw-content);inset-block:0}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:left-0[aria-selected=true]>:first-child:before{content:var(--tw-content);left:0}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:border-l-\[length\:var\(--table-selection-marker-thickness\)\][aria-selected=true]>:first-child:before{content:var(--tw-content);border-left-style:var(--tw-border-style);border-left-width:var(--table-selection-marker-thickness)}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:border-solid[aria-selected=true]>:first-child:before{content:var(--tw-content);--tw-border-style:solid;border-style:solid}.\[\&\[aria-selected\=true\]\>\*\:first-child\]\:before\:border-foreground[aria-selected=true]>:first-child:before{content:var(--tw-content);border-color:var(--color-foreground)}.\[\&\[data-columns\]\>table\]\:grid[data-columns]>table{display:grid}.\[\&\[data-columns\]\>table\]\:grid-cols-\[var\(--table-columns\)\][data-columns]>table{grid-template-columns:var(--table-columns)}.\[\&\[data-columns\]\>table\>\*\:not\(caption\)\]\:col-span-full[data-columns]>table>:not(caption){grid-column:1/-1}.\[\&\[data-columns\]\>table\>\*\:not\(caption\)\]\:grid[data-columns]>table>:not(caption){display:grid}.\[\&\[data-columns\]\>table\>\*\:not\(caption\)\]\:grid-cols-subgrid[data-columns]>table>:not(caption){grid-template-columns:subgrid}.\[\&\[data-columns\]\>table\>\*\>tr\]\:col-span-full[data-columns]>table>*>tr{grid-column:1/-1}.\[\&\[data-columns\]\>table\>\*\>tr\]\:grid[data-columns]>table>*>tr{display:grid}.\[\&\[data-columns\]\>table\>\*\>tr\]\:grid-cols-subgrid[data-columns]>table>*>tr{grid-template-columns:subgrid}.\[\&\[data-columns\]\>table\>\*\>tr\>td\]\:wrap-anywhere[data-columns]>table>*>tr>td,.\[\&\[data-columns\]\>table\>\*\>tr\>th\]\:wrap-anywhere[data-columns]>table>*>tr>th{overflow-wrap:anywhere}.\[\&\[data-columns\]\>table\>caption\]\:col-span-full[data-columns]>table>caption{grid-column:1/-1}@media not all and (width>=48rem){.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_tbody\]\:max-md\:block[data-notes=content]:not([data-columns]) tbody,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_td\]\:max-md\:block[data-notes=content]:not([data-columns]) td,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_tfoot\]\:max-md\:block[data-notes=content]:not([data-columns]) tfoot,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_th\]\:max-md\:block[data-notes=content]:not([data-columns]) th,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_thead\]\:max-md\:block[data-notes=content]:not([data-columns]) thead,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)_tr\]\:max-md\:block[data-notes=content]:not([data-columns]) tr,.\[\&\[data-notes\=content\]\:not\(\[data-columns\]\)\>table\]\:max-md\:block[data-notes=content]:not([data-columns])>table{display:block}.\[\&\[data-notes\=supplementary\]\:not\(\[data-columns\]\)_\[data-variant\=note\]\]\:max-md\:hidden[data-notes=supplementary]:not([data-columns]) [data-variant=note]{display:none}}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-dialog-member=content]+.\[\[data-dialog-member\=content\]\+\&\]\:border-border{border-color:var(--color-border)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:mt-\[var\(--space-stack\)\]{margin-top:var(--space-stack)}[data-dialog-member=title]+.\[\[data-dialog-member\=title\]\+\&\]\:pt-0{padding-top:0}[data-section]+.\[\[data-section\]\+\&\]\:z-10{z-index:10}[data-section]+.\[\[data-section\]\+\&\]\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}[data-section]+.\[\[data-section\]\+\&\]\:border-solid{--tw-border-style:solid;border-style:solid}[data-section]+.\[\[data-section\]\+\&\]\:border-rule{border-color:var(--color-rule)}}:root{--color-surface:#fff;--color-foreground:#0f172a;--color-muted:#64748b;--color-border:#e2e8f0;--color-control-border:#64748b;--color-rule:#808fa3;--color-backing:#f1f5f9;--color-scrim:#0f172a80;--color-meter-fill:#0f172a;--color-meter-track:#e2e8f0;--color-primary:#7c3aed;--color-primary-hover:#6d28d9;--color-primary-foreground:#f8fafc;--color-secondary:#0369a1;--color-secondary-hover:#075985;--color-secondary-foreground:#f8fafc;--color-disabled:#94a3b8;--color-disabled-hover:#64748b;--color-focus-ring:var(--color-ring,#475569);--color-link:#2563eb;--color-success:#047857;--color-warning:#b45309;--color-error:#d63384;--color-error-hover:#be185d;--color-error-foreground:#fff;--color-info:#0e7490}.dark{--color-surface:#0f172a;--color-foreground:#f8fafc;--color-muted:#94a3b8;--color-border:#334155;--color-control-border:#94a3b8;--color-rule:#5b6a80;--color-backing:#1e293b;--color-scrim:#0f172a80;--color-meter-fill:#f8fafc;--color-meter-track:#334155;--color-primary:#8b5cf6;--color-primary-hover:#a78bfa;--color-primary-foreground:#020617;--color-secondary:#0ea5e9;--color-secondary-hover:#38bdf8;--color-secondary-foreground:#020617;--color-disabled:#475569;--color-disabled-hover:#334155;--color-focus-ring:var(--color-ring,#cbd5e1);--color-link:#60a5fa;--color-success:#34d399;--color-warning:#fbbf24;--color-error:#f48fb1;--color-error-hover:#f8bbd0;--color-error-foreground:#020617;--color-info:#22d3ee}:root{--motion-duration-color:.15s}@media (prefers-reduced-motion:reduce){:root{--motion-duration-color:0s}}:root{--focus-ring-width:3px;--focus-ring-offset:2px;--radius-control:.5rem;--radius-dialog:.375rem;--control-min-width:10.5rem;--standing-min-width:7.5rem;--underline-offset:.18em;--underline-thickness:1px;--underline-thickness-hover:2px;--measure:66ch;--measure-display:36ch;--measure-wide:72ch;--measure-action:20rem;--table-column-name:12rem;--table-column-fact:9rem;--table-column-figure:8rem;--table-column-action:12.5rem;--space-stack:.5em;--space-region:1.5em;--space-band:4em;--space-collection-item:1em;--space-definition-item:1.5rem;--space-definition-item-compact:.5rem;--space-definition-column:3rem;--definition-term-min-width:9rem;--definition-description-min-width:10rem}@property --definition-shortfall{syntax:"<length>";inherits:true;initial-value:1px}:root{--space-box-inset:1em;--table-cell-inset-inline:1rem;--table-cell-inset-block:.5rem;--table-cell-inset-inline-compact:.5rem;--table-cell-inset-block-compact:.25rem;--gutter:clamp(1.5rem, 5vw, 4rem);--fold-height:min(70vh, 40rem);--cover-height:100svh;--tick-length:.9rem;--tick-thickness:1px;--tab-marker-thickness:2px;--table-selection-marker-thickness:2px;--tab-inset-inline:1em;--tab-inset-block:.5em;--slider-track-thickness:.25rem;--slider-thumb-size:1.5rem;--choice-marker-size:1.125rem;--choice-marker-dot-size:.5rem;--meter-track-thickness:.5rem;--scrim-blur:0;--elevation-floating:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}