kern 0.5.0 → 0.7.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 (54) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile +2 -0
  3. data/Gemfile.lock +13 -2
  4. data/README.md +15 -13
  5. data/Rakefile +3 -3
  6. data/app/assets/builds/tailwind.kern.css +1749 -0
  7. data/app/controllers/kern/billing_profiles/subscriptions_controller.rb +37 -0
  8. data/app/controllers/kern/billing_profiles/subscriptions_controller.rb.tt +37 -0
  9. data/app/controllers/kern/settings/subscriptions_controller.rb +6 -0
  10. data/app/controllers/kern/signups_controller.rb +1 -1
  11. data/app/models/billing_profile/subscription.rb +16 -0
  12. data/app/models/billing_profile.rb +7 -0
  13. data/app/models/session.rb +1 -1
  14. data/app/models/signup.rb +1 -1
  15. data/app/models/user.rb +1 -1
  16. data/app/models/workspace/access.rb +3 -0
  17. data/app/models/workspace/access.rb.tt +10 -0
  18. data/app/models/workspace/billable.rb +16 -0
  19. data/app/models/workspace/feature_access.rb +28 -0
  20. data/app/models/workspace/members.rb +9 -7
  21. data/app/models/workspace/setup.rb +5 -3
  22. data/app/models/workspace.rb +2 -0
  23. data/app/views/components/_dialog.html.erb +36 -0
  24. data/app/views/kern/pages/welcome.html.erb +10 -6
  25. data/app/views/kern/settings/_cards.html.erb +11 -3
  26. data/app/views/kern/settings/subscriptions/_plan.html.erb +35 -0
  27. data/app/views/kern/settings/subscriptions/show.html.erb +11 -0
  28. data/app/views/kern/settings/users/show.html.erb +2 -2
  29. data/app/views/kern/signups/new.html.erb +2 -0
  30. data/app/views/layouts/kern/application.html.erb +4 -2
  31. data/app/views/layouts/kern/application.html.erb.tt +2 -1
  32. data/app/views/layouts/kern/auth.html.erb +2 -2
  33. data/app/webhooks/stripe/base.rb +31 -0
  34. data/app/webhooks/stripe/checkout_session_completed.rb +46 -0
  35. data/app/webhooks/stripe/customer_subscription_deleted.rb +20 -0
  36. data/app/webhooks/stripe/customer_subscription_updated.rb +33 -0
  37. data/bin/release +2 -3
  38. data/config/initializers/stripe.rb +5 -0
  39. data/config/initializers/stripe.rb.tt +3 -0
  40. data/config/routes.rb +4 -0
  41. data/db/migrate/20250101000007_create_billing_profiles.rb +14 -0
  42. data/db/migrate/20250101000008_create_billing_profile_subscriptions.rb +20 -0
  43. data/lib/generators/kern/feature/USAGE +1 -0
  44. data/lib/generators/kern/feature/feature_generator.rb +82 -19
  45. data/lib/generators/kern/install/install_generator.rb +43 -7
  46. data/lib/generators/kern/install/templates/POST_INSTALL +25 -0
  47. data/lib/generators/kern/install/templates/configurations/plans.yml +43 -0
  48. data/lib/generators/kern/install/templates/configurations/stripe.yml +11 -0
  49. data/lib/generators/kern/layouts/layouts_generator.rb +12 -0
  50. data/lib/kern/version.rb +1 -1
  51. metadata +27 -5
  52. data/app/assets/builds/tailwind.css +0 -2
  53. data/lib/generators/kern/views/USAGE +0 -22
  54. data/lib/generators/kern/views/views_generator.rb +0 -42
@@ -0,0 +1,1749 @@
1
+ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
2
+ @layer properties;
3
+ @layer theme, base, components, utilities;
4
+ @layer theme {
5
+ :root, :host {
6
+ --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
7
+ 'Noto Color Emoji';
8
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
9
+ monospace;
10
+ --color-red-50: oklch(97.1% 0.013 17.38);
11
+ --color-red-100: oklch(93.6% 0.032 17.717);
12
+ --color-red-400: oklch(70.4% 0.191 22.216);
13
+ --color-red-600: oklch(57.7% 0.245 27.325);
14
+ --color-red-900: oklch(39.6% 0.141 25.723);
15
+ --color-emerald-300: oklch(84.5% 0.143 164.978);
16
+ --color-cyan-400: oklch(78.9% 0.154 211.53);
17
+ --color-blue-50: oklch(97% 0.014 254.604);
18
+ --color-blue-100: oklch(93.2% 0.032 255.585);
19
+ --color-blue-200: oklch(88.2% 0.059 254.128);
20
+ --color-blue-300: oklch(80.9% 0.105 251.813);
21
+ --color-blue-400: oklch(70.7% 0.165 254.624);
22
+ --color-blue-500: oklch(62.3% 0.214 259.815);
23
+ --color-blue-600: oklch(54.6% 0.245 262.881);
24
+ --color-blue-700: oklch(48.8% 0.243 264.376);
25
+ --color-blue-800: oklch(42.4% 0.199 265.638);
26
+ --color-blue-900: oklch(37.9% 0.146 265.522);
27
+ --color-blue-950: oklch(28.2% 0.091 267.935);
28
+ --color-pink-200: oklch(89.9% 0.061 343.231);
29
+ --color-pink-800: oklch(45.9% 0.187 3.815);
30
+ --color-slate-50: oklch(98.4% 0.003 247.858);
31
+ --color-slate-100: oklch(96.8% 0.007 247.896);
32
+ --color-slate-200: oklch(92.9% 0.013 255.508);
33
+ --color-slate-300: oklch(86.9% 0.022 252.894);
34
+ --color-slate-400: oklch(70.4% 0.04 256.788);
35
+ --color-slate-500: oklch(55.4% 0.046 257.417);
36
+ --color-slate-600: oklch(44.6% 0.043 257.281);
37
+ --color-slate-700: oklch(37.2% 0.044 257.287);
38
+ --color-slate-800: oklch(27.9% 0.041 260.031);
39
+ --color-slate-900: oklch(20.8% 0.042 265.755);
40
+ --color-slate-950: oklch(12.9% 0.042 264.695);
41
+ --color-gray-50: var(--color-slate-50);
42
+ --color-gray-100: var(--color-slate-100);
43
+ --color-gray-200: var(--color-slate-200);
44
+ --color-gray-300: var(--color-slate-300);
45
+ --color-gray-400: var(--color-slate-400);
46
+ --color-gray-500: var(--color-slate-500);
47
+ --color-gray-600: var(--color-slate-600);
48
+ --color-gray-700: var(--color-slate-700);
49
+ --color-gray-800: var(--color-slate-800);
50
+ --color-gray-900: var(--color-slate-900);
51
+ --color-gray-950: var(--color-slate-950);
52
+ --color-white: #fff;
53
+ --spacing: 0.25rem;
54
+ --container-sm: 24rem;
55
+ --container-md: 28rem;
56
+ --container-lg: 32rem;
57
+ --container-xl: 36rem;
58
+ --container-5xl: 64rem;
59
+ --text-xs: 0.75rem;
60
+ --text-xs--line-height: calc(1 / 0.75);
61
+ --text-sm: 0.875rem;
62
+ --text-sm--line-height: calc(1.25 / 0.875);
63
+ --text-base: 1rem;
64
+ --text-base--line-height: calc(1.5 / 1);
65
+ --text-lg: 1.125rem;
66
+ --text-lg--line-height: calc(1.75 / 1.125);
67
+ --text-3xl: 1.875rem;
68
+ --text-3xl--line-height: calc(2.25 / 1.875);
69
+ --font-weight-light: 300;
70
+ --font-weight-normal: 400;
71
+ --font-weight-medium: 500;
72
+ --font-weight-semibold: 600;
73
+ --font-weight-bold: 700;
74
+ --font-weight-extrabold: 800;
75
+ --tracking-tight: -0.025em;
76
+ --radius-sm: 0.25rem;
77
+ --radius-md: 0.375rem;
78
+ --radius-lg: 0.5rem;
79
+ --radius-xl: 0.75rem;
80
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
81
+ --blur-md: 12px;
82
+ --default-transition-duration: 150ms;
83
+ --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
84
+ --default-font-family: var(--font-sans);
85
+ --default-mono-font-family: var(--font-mono);
86
+ --color-brand-50: var(--color-blue-50);
87
+ --color-brand-300: var(--color-blue-300);
88
+ --color-brand-400: var(--color-blue-400);
89
+ --color-brand-500: var(--color-blue-500);
90
+ --color-brand-600: var(--color-blue-600);
91
+ --color-brand-700: var(--color-blue-700);
92
+ --color-brand-800: var(--color-blue-800);
93
+ --color-brand-950: var(--color-blue-950);
94
+ }
95
+ }
96
+ @layer base {
97
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
98
+ box-sizing: border-box;
99
+ margin: 0;
100
+ padding: 0;
101
+ border: 0 solid;
102
+ }
103
+ html, :host {
104
+ line-height: 1.5;
105
+ -webkit-text-size-adjust: 100%;
106
+ tab-size: 4;
107
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
108
+ font-feature-settings: var(--default-font-feature-settings, normal);
109
+ font-variation-settings: var(--default-font-variation-settings, normal);
110
+ -webkit-tap-highlight-color: transparent;
111
+ }
112
+ hr {
113
+ height: 0;
114
+ color: inherit;
115
+ border-top-width: 1px;
116
+ }
117
+ abbr:where([title]) {
118
+ -webkit-text-decoration: underline dotted;
119
+ text-decoration: underline dotted;
120
+ }
121
+ h1, h2, h3, h4, h5, h6 {
122
+ font-size: inherit;
123
+ font-weight: inherit;
124
+ }
125
+ a {
126
+ color: inherit;
127
+ -webkit-text-decoration: inherit;
128
+ text-decoration: inherit;
129
+ }
130
+ b, strong {
131
+ font-weight: bolder;
132
+ }
133
+ code, kbd, samp, pre {
134
+ font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
135
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
136
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
137
+ font-size: 1em;
138
+ }
139
+ small {
140
+ font-size: 80%;
141
+ }
142
+ sub, sup {
143
+ font-size: 75%;
144
+ line-height: 0;
145
+ position: relative;
146
+ vertical-align: baseline;
147
+ }
148
+ sub {
149
+ bottom: -0.25em;
150
+ }
151
+ sup {
152
+ top: -0.5em;
153
+ }
154
+ table {
155
+ text-indent: 0;
156
+ border-color: inherit;
157
+ border-collapse: collapse;
158
+ }
159
+ :-moz-focusring {
160
+ outline: auto;
161
+ }
162
+ progress {
163
+ vertical-align: baseline;
164
+ }
165
+ summary {
166
+ display: list-item;
167
+ }
168
+ ol, ul, menu {
169
+ list-style: none;
170
+ }
171
+ img, svg, video, canvas, audio, iframe, embed, object {
172
+ display: block;
173
+ vertical-align: middle;
174
+ }
175
+ img, video {
176
+ max-width: 100%;
177
+ height: auto;
178
+ }
179
+ button, input, select, optgroup, textarea, ::file-selector-button {
180
+ font: inherit;
181
+ font-feature-settings: inherit;
182
+ font-variation-settings: inherit;
183
+ letter-spacing: inherit;
184
+ color: inherit;
185
+ border-radius: 0;
186
+ background-color: transparent;
187
+ opacity: 1;
188
+ }
189
+ :where(select:is([multiple], [size])) optgroup {
190
+ font-weight: bolder;
191
+ }
192
+ :where(select:is([multiple], [size])) optgroup option {
193
+ padding-inline-start: 20px;
194
+ }
195
+ ::file-selector-button {
196
+ margin-inline-end: 4px;
197
+ }
198
+ ::placeholder {
199
+ opacity: 1;
200
+ }
201
+ @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
202
+ ::placeholder {
203
+ color: currentcolor;
204
+ @supports (color: color-mix(in lab, red, red)) {
205
+ color: color-mix(in oklab, currentcolor 50%, transparent);
206
+ }
207
+ }
208
+ }
209
+ textarea {
210
+ resize: vertical;
211
+ }
212
+ ::-webkit-search-decoration {
213
+ -webkit-appearance: none;
214
+ }
215
+ ::-webkit-date-and-time-value {
216
+ min-height: 1lh;
217
+ text-align: inherit;
218
+ }
219
+ ::-webkit-datetime-edit {
220
+ display: inline-flex;
221
+ }
222
+ ::-webkit-datetime-edit-fields-wrapper {
223
+ padding: 0;
224
+ }
225
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
226
+ padding-block: 0;
227
+ }
228
+ ::-webkit-calendar-picker-indicator {
229
+ line-height: 1;
230
+ }
231
+ :-moz-ui-invalid {
232
+ box-shadow: none;
233
+ }
234
+ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
235
+ appearance: button;
236
+ }
237
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
238
+ height: auto;
239
+ }
240
+ [hidden]:where(:not([hidden='until-found'])) {
241
+ display: none !important;
242
+ }
243
+ }
244
+ @layer utilities {
245
+ .sr-only {
246
+ position: absolute;
247
+ width: 1px;
248
+ height: 1px;
249
+ padding: 0;
250
+ margin: -1px;
251
+ overflow: hidden;
252
+ clip-path: inset(50%);
253
+ white-space: nowrap;
254
+ border-width: 0;
255
+ }
256
+ .absolute {
257
+ position: absolute;
258
+ }
259
+ .fixed {
260
+ position: fixed;
261
+ }
262
+ .relative {
263
+ position: relative;
264
+ }
265
+ .sticky {
266
+ position: sticky;
267
+ }
268
+ .-top-\[400px\] {
269
+ top: calc(400px * -1);
270
+ }
271
+ .top-0 {
272
+ top: calc(var(--spacing) * 0);
273
+ }
274
+ .-right-\[300px\] {
275
+ right: calc(300px * -1);
276
+ }
277
+ .right-4 {
278
+ right: calc(var(--spacing) * 4);
279
+ }
280
+ .-bottom-\[450px\] {
281
+ bottom: calc(450px * -1);
282
+ }
283
+ .bottom-4 {
284
+ bottom: calc(var(--spacing) * 4);
285
+ }
286
+ .-left-\[350px\] {
287
+ left: calc(350px * -1);
288
+ }
289
+ .col-span-12 {
290
+ grid-column: span 12 / span 12;
291
+ }
292
+ .container {
293
+ width: 100%;
294
+ @media (width >= 40rem) {
295
+ max-width: 40rem;
296
+ }
297
+ @media (width >= 48rem) {
298
+ max-width: 48rem;
299
+ }
300
+ @media (width >= 64rem) {
301
+ max-width: 64rem;
302
+ }
303
+ @media (width >= 80rem) {
304
+ max-width: 80rem;
305
+ }
306
+ @media (width >= 96rem) {
307
+ max-width: 96rem;
308
+ }
309
+ }
310
+ .mx-2 {
311
+ margin-inline: calc(var(--spacing) * 2);
312
+ }
313
+ .mx-4 {
314
+ margin-inline: calc(var(--spacing) * 4);
315
+ }
316
+ .mx-auto {
317
+ margin-inline: auto;
318
+ }
319
+ .my-20 {
320
+ margin-block: calc(var(--spacing) * 20);
321
+ }
322
+ .mt-0\.5 {
323
+ margin-top: calc(var(--spacing) * 0.5);
324
+ }
325
+ .mt-1 {
326
+ margin-top: calc(var(--spacing) * 1);
327
+ }
328
+ .mt-2 {
329
+ margin-top: calc(var(--spacing) * 2);
330
+ }
331
+ .mt-6 {
332
+ margin-top: calc(var(--spacing) * 6);
333
+ }
334
+ .mt-7 {
335
+ margin-top: calc(var(--spacing) * 7);
336
+ }
337
+ .mt-8 {
338
+ margin-top: calc(var(--spacing) * 8);
339
+ }
340
+ .ml-0 {
341
+ margin-left: calc(var(--spacing) * 0);
342
+ }
343
+ .ml-1 {
344
+ margin-left: calc(var(--spacing) * 1);
345
+ }
346
+ .block {
347
+ display: block;
348
+ }
349
+ .flex {
350
+ display: flex;
351
+ }
352
+ .grid {
353
+ display: grid;
354
+ }
355
+ .hidden {
356
+ display: none;
357
+ }
358
+ .inline {
359
+ display: inline;
360
+ }
361
+ .size-3 {
362
+ width: calc(var(--spacing) * 3);
363
+ height: calc(var(--spacing) * 3);
364
+ }
365
+ .size-3\.5 {
366
+ width: calc(var(--spacing) * 3.5);
367
+ height: calc(var(--spacing) * 3.5);
368
+ }
369
+ .size-4 {
370
+ width: calc(var(--spacing) * 4);
371
+ height: calc(var(--spacing) * 4);
372
+ }
373
+ .size-4\.5 {
374
+ width: calc(var(--spacing) * 4.5);
375
+ height: calc(var(--spacing) * 4.5);
376
+ }
377
+ .size-5 {
378
+ width: calc(var(--spacing) * 5);
379
+ height: calc(var(--spacing) * 5);
380
+ }
381
+ .size-6 {
382
+ width: calc(var(--spacing) * 6);
383
+ height: calc(var(--spacing) * 6);
384
+ }
385
+ .size-\[800px\] {
386
+ width: 800px;
387
+ height: 800px;
388
+ }
389
+ .h-8 {
390
+ height: calc(var(--spacing) * 8);
391
+ }
392
+ .h-dvh {
393
+ height: 100dvh;
394
+ }
395
+ .h-screen {
396
+ height: 100vh;
397
+ }
398
+ .w-16 {
399
+ width: calc(var(--spacing) * 16);
400
+ }
401
+ .w-full {
402
+ width: 100%;
403
+ }
404
+ .max-w-5xl {
405
+ max-width: var(--container-5xl);
406
+ }
407
+ .max-w-lg {
408
+ max-width: var(--container-lg);
409
+ }
410
+ .max-w-md {
411
+ max-width: var(--container-md);
412
+ }
413
+ .max-w-xl {
414
+ max-width: var(--container-xl);
415
+ }
416
+ .flex-1 {
417
+ flex: 1;
418
+ }
419
+ .shrink-0 {
420
+ flex-shrink: 0;
421
+ }
422
+ .grow-1 {
423
+ flex-grow: 1;
424
+ }
425
+ .translate-x-0 {
426
+ --tw-translate-x: calc(var(--spacing) * 0);
427
+ translate: var(--tw-translate-x) var(--tw-translate-y);
428
+ }
429
+ .translate-y-0 {
430
+ --tw-translate-y: calc(var(--spacing) * 0);
431
+ translate: var(--tw-translate-x) var(--tw-translate-y);
432
+ }
433
+ .scale-100 {
434
+ --tw-scale-x: 100%;
435
+ --tw-scale-y: 100%;
436
+ --tw-scale-z: 100%;
437
+ scale: var(--tw-scale-x) var(--tw-scale-y);
438
+ }
439
+ .rotate-32 {
440
+ rotate: 32deg;
441
+ }
442
+ .transform {
443
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
444
+ }
445
+ .list-inside {
446
+ list-style-position: inside;
447
+ }
448
+ .list-disc {
449
+ list-style-type: disc;
450
+ }
451
+ .grid-cols-12 {
452
+ grid-template-columns: repeat(12, minmax(0, 1fr));
453
+ }
454
+ .flex-col {
455
+ flex-direction: column;
456
+ }
457
+ .place-items-center {
458
+ place-items: center;
459
+ }
460
+ .items-center {
461
+ align-items: center;
462
+ }
463
+ .items-start {
464
+ align-items: flex-start;
465
+ }
466
+ .justify-between {
467
+ justify-content: space-between;
468
+ }
469
+ .justify-center {
470
+ justify-content: center;
471
+ }
472
+ .gap-1 {
473
+ gap: calc(var(--spacing) * 1);
474
+ }
475
+ .gap-2 {
476
+ gap: calc(var(--spacing) * 2);
477
+ }
478
+ .gap-4 {
479
+ gap: calc(var(--spacing) * 4);
480
+ }
481
+ .gap-8 {
482
+ gap: calc(var(--spacing) * 8);
483
+ }
484
+ .gap-x-1 {
485
+ column-gap: calc(var(--spacing) * 1);
486
+ }
487
+ .gap-x-1\.5 {
488
+ column-gap: calc(var(--spacing) * 1.5);
489
+ }
490
+ .gap-x-2 {
491
+ column-gap: calc(var(--spacing) * 2);
492
+ }
493
+ .gap-y-0\.5 {
494
+ row-gap: calc(var(--spacing) * 0.5);
495
+ }
496
+ .gap-y-5 {
497
+ row-gap: calc(var(--spacing) * 5);
498
+ }
499
+ .overflow-clip {
500
+ overflow: clip;
501
+ }
502
+ .rounded-full {
503
+ border-radius: calc(infinity * 1px);
504
+ }
505
+ .rounded-md {
506
+ border-radius: var(--radius-md);
507
+ }
508
+ .rounded-sm {
509
+ border-radius: var(--radius-sm);
510
+ }
511
+ .border {
512
+ border-style: var(--tw-border-style);
513
+ border-width: 1px;
514
+ }
515
+ .border-0 {
516
+ border-style: var(--tw-border-style);
517
+ border-width: 0px;
518
+ }
519
+ .border-t {
520
+ border-top-style: var(--tw-border-style);
521
+ border-top-width: 1px;
522
+ }
523
+ .border-r {
524
+ border-right-style: var(--tw-border-style);
525
+ border-right-width: 1px;
526
+ }
527
+ .border-b {
528
+ border-bottom-style: var(--tw-border-style);
529
+ border-bottom-width: 1px;
530
+ }
531
+ .border-gray-100 {
532
+ border-color: var(--color-gray-100);
533
+ }
534
+ .border-gray-200\/50 {
535
+ border-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
536
+ @supports (color: color-mix(in lab, red, red)) {
537
+ border-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
538
+ }
539
+ }
540
+ .border-red-100 {
541
+ border-color: var(--color-red-100);
542
+ }
543
+ .bg-gray-50 {
544
+ background-color: var(--color-gray-50);
545
+ }
546
+ .bg-gray-200\/40 {
547
+ background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 40%, transparent);
548
+ @supports (color: color-mix(in lab, red, red)) {
549
+ background-color: color-mix(in oklab, var(--color-gray-200) 40%, transparent);
550
+ }
551
+ }
552
+ .bg-red-50 {
553
+ background-color: var(--color-red-50);
554
+ }
555
+ .bg-white {
556
+ background-color: var(--color-white);
557
+ }
558
+ .bg-white\/50 {
559
+ background-color: color-mix(in srgb, #fff 50%, transparent);
560
+ @supports (color: color-mix(in lab, red, red)) {
561
+ background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
562
+ }
563
+ }
564
+ .bg-gradient-to-b {
565
+ --tw-gradient-position: to bottom in oklab;
566
+ background-image: linear-gradient(var(--tw-gradient-stops));
567
+ }
568
+ .from-gray-900\/80 {
569
+ --tw-gradient-from: color-mix(in srgb, oklch(20.8% 0.042 265.755) 80%, transparent);
570
+ @supports (color: color-mix(in lab, red, red)) {
571
+ --tw-gradient-from: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
572
+ }
573
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
574
+ }
575
+ .to-gray-900 {
576
+ --tw-gradient-to: var(--color-gray-900);
577
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
578
+ }
579
+ .fill-brand-400 {
580
+ fill: var(--color-brand-400);
581
+ }
582
+ .fill-brand-600\/60 {
583
+ fill: color-mix(in srgb, oklch(54.6% 0.245 262.881) 60%, transparent);
584
+ @supports (color: color-mix(in lab, red, red)) {
585
+ fill: color-mix(in oklab, var(--color-brand-600) 60%, transparent);
586
+ }
587
+ }
588
+ .p-2 {
589
+ padding: calc(var(--spacing) * 2);
590
+ }
591
+ .px-0\.5 {
592
+ padding-inline: calc(var(--spacing) * 0.5);
593
+ }
594
+ .px-2 {
595
+ padding-inline: calc(var(--spacing) * 2);
596
+ }
597
+ .px-2\.5 {
598
+ padding-inline: calc(var(--spacing) * 2.5);
599
+ }
600
+ .px-3 {
601
+ padding-inline: calc(var(--spacing) * 3);
602
+ }
603
+ .px-4 {
604
+ padding-inline: calc(var(--spacing) * 4);
605
+ }
606
+ .py-1 {
607
+ padding-block: calc(var(--spacing) * 1);
608
+ }
609
+ .py-1\.5 {
610
+ padding-block: calc(var(--spacing) * 1.5);
611
+ }
612
+ .py-2 {
613
+ padding-block: calc(var(--spacing) * 2);
614
+ }
615
+ .py-3 {
616
+ padding-block: calc(var(--spacing) * 3);
617
+ }
618
+ .py-4 {
619
+ padding-block: calc(var(--spacing) * 4);
620
+ }
621
+ .py-5 {
622
+ padding-block: calc(var(--spacing) * 5);
623
+ }
624
+ .pt-4 {
625
+ padding-top: calc(var(--spacing) * 4);
626
+ }
627
+ .pb-2 {
628
+ padding-bottom: calc(var(--spacing) * 2);
629
+ }
630
+ .pb-4 {
631
+ padding-bottom: calc(var(--spacing) * 4);
632
+ }
633
+ .text-center {
634
+ text-align: center;
635
+ }
636
+ .font-sans {
637
+ font-family: var(--font-sans);
638
+ }
639
+ .text-3xl {
640
+ font-size: var(--text-3xl);
641
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
642
+ }
643
+ .text-base {
644
+ font-size: var(--text-base);
645
+ line-height: var(--tw-leading, var(--text-base--line-height));
646
+ }
647
+ .text-lg {
648
+ font-size: var(--text-lg);
649
+ line-height: var(--tw-leading, var(--text-lg--line-height));
650
+ }
651
+ .text-sm {
652
+ font-size: var(--text-sm);
653
+ line-height: var(--tw-leading, var(--text-sm--line-height));
654
+ }
655
+ .text-xs {
656
+ font-size: var(--text-xs);
657
+ line-height: var(--tw-leading, var(--text-xs--line-height));
658
+ }
659
+ .leading-none {
660
+ --tw-leading: 1;
661
+ line-height: 1;
662
+ }
663
+ .font-bold {
664
+ --tw-font-weight: var(--font-weight-bold);
665
+ font-weight: var(--font-weight-bold);
666
+ }
667
+ .font-extrabold {
668
+ --tw-font-weight: var(--font-weight-extrabold);
669
+ font-weight: var(--font-weight-extrabold);
670
+ }
671
+ .font-light {
672
+ --tw-font-weight: var(--font-weight-light);
673
+ font-weight: var(--font-weight-light);
674
+ }
675
+ .font-medium {
676
+ --tw-font-weight: var(--font-weight-medium);
677
+ font-weight: var(--font-weight-medium);
678
+ }
679
+ .font-normal {
680
+ --tw-font-weight: var(--font-weight-normal);
681
+ font-weight: var(--font-weight-normal);
682
+ }
683
+ .font-semibold {
684
+ --tw-font-weight: var(--font-weight-semibold);
685
+ font-weight: var(--font-weight-semibold);
686
+ }
687
+ .tracking-tight {
688
+ --tw-tracking: var(--tracking-tight);
689
+ letter-spacing: var(--tracking-tight);
690
+ }
691
+ .text-brand-500 {
692
+ color: var(--color-brand-500);
693
+ }
694
+ .text-brand-600 {
695
+ color: var(--color-brand-600);
696
+ }
697
+ .text-current {
698
+ color: currentcolor;
699
+ }
700
+ .text-cyan-400 {
701
+ color: var(--color-cyan-400);
702
+ }
703
+ .text-emerald-300 {
704
+ color: var(--color-emerald-300);
705
+ }
706
+ .text-gray-400 {
707
+ color: var(--color-gray-400);
708
+ }
709
+ .text-gray-500 {
710
+ color: var(--color-gray-500);
711
+ }
712
+ .text-gray-600 {
713
+ color: var(--color-gray-600);
714
+ }
715
+ .text-gray-700 {
716
+ color: var(--color-gray-700);
717
+ }
718
+ .text-gray-800 {
719
+ color: var(--color-gray-800);
720
+ }
721
+ .text-gray-900 {
722
+ color: var(--color-gray-900);
723
+ }
724
+ .text-gray-950 {
725
+ color: var(--color-gray-950);
726
+ }
727
+ .text-red-400 {
728
+ color: var(--color-red-400);
729
+ }
730
+ .text-red-600 {
731
+ color: var(--color-red-600);
732
+ }
733
+ .text-red-900 {
734
+ color: var(--color-red-900);
735
+ }
736
+ .text-slate-800 {
737
+ color: var(--color-slate-800);
738
+ }
739
+ .text-white {
740
+ color: var(--color-white);
741
+ }
742
+ .antialiased {
743
+ -webkit-font-smoothing: antialiased;
744
+ -moz-osx-font-smoothing: grayscale;
745
+ }
746
+ .accent-brand-500 {
747
+ accent-color: var(--color-brand-500);
748
+ }
749
+ .opacity-0 {
750
+ opacity: 0%;
751
+ }
752
+ .opacity-100 {
753
+ opacity: 100%;
754
+ }
755
+ .shadow-2xl {
756
+ --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
757
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
758
+ }
759
+ .shadow-lg {
760
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
761
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
762
+ }
763
+ .ring {
764
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
765
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
766
+ }
767
+ .ring-gray-200\/50 {
768
+ --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 50%, transparent);
769
+ @supports (color: color-mix(in lab, red, red)) {
770
+ --tw-ring-color: color-mix(in oklab, var(--color-gray-200) 50%, transparent);
771
+ }
772
+ }
773
+ .ring-gray-200\/60 {
774
+ --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 60%, transparent);
775
+ @supports (color: color-mix(in lab, red, red)) {
776
+ --tw-ring-color: color-mix(in oklab, var(--color-gray-200) 60%, transparent);
777
+ }
778
+ }
779
+ .ring-gray-200\/80 {
780
+ --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);
781
+ @supports (color: color-mix(in lab, red, red)) {
782
+ --tw-ring-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
783
+ }
784
+ }
785
+ .ring-gray-700\/90 {
786
+ --tw-ring-color: color-mix(in srgb, oklch(37.2% 0.044 257.287) 90%, transparent);
787
+ @supports (color: color-mix(in lab, red, red)) {
788
+ --tw-ring-color: color-mix(in oklab, var(--color-gray-700) 90%, transparent);
789
+ }
790
+ }
791
+ .backdrop-blur-md {
792
+ --tw-backdrop-blur: blur(var(--blur-md));
793
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
794
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
795
+ }
796
+ .transition {
797
+ 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;
798
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
799
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
800
+ }
801
+ .transition-all {
802
+ transition-property: all;
803
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
804
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
805
+ }
806
+ .transition-discrete {
807
+ transition-behavior: allow-discrete;
808
+ }
809
+ .delay-75 {
810
+ transition-delay: 75ms;
811
+ }
812
+ .duration-300 {
813
+ --tw-duration: 300ms;
814
+ transition-duration: 300ms;
815
+ }
816
+ .ease-in-out {
817
+ --tw-ease: var(--ease-in-out);
818
+ transition-timing-function: var(--ease-in-out);
819
+ }
820
+ .outline-none {
821
+ --tw-outline-style: none;
822
+ outline-style: none;
823
+ }
824
+ .select-all {
825
+ -webkit-user-select: all;
826
+ user-select: all;
827
+ }
828
+ .\*\:inline-block {
829
+ :is(& > *) {
830
+ display: inline-block;
831
+ }
832
+ }
833
+ .group-hover\/link\:fill-brand-700 {
834
+ &:is(:where(.group\/link):hover *) {
835
+ @media (hover: hover) {
836
+ fill: var(--color-brand-700);
837
+ }
838
+ }
839
+ }
840
+ .group-hover\/link\:text-brand-700 {
841
+ &:is(:where(.group\/link):hover *) {
842
+ @media (hover: hover) {
843
+ color: var(--color-brand-700);
844
+ }
845
+ }
846
+ }
847
+ .group-hover\/link\:text-brand-950 {
848
+ &:is(:where(.group\/link):hover *) {
849
+ @media (hover: hover) {
850
+ color: var(--color-brand-950);
851
+ }
852
+ }
853
+ }
854
+ .group-hover\/link\:text-gray-950 {
855
+ &:is(:where(.group\/link):hover *) {
856
+ @media (hover: hover) {
857
+ color: var(--color-gray-950);
858
+ }
859
+ }
860
+ }
861
+ .peer-disabled\:cursor-not-allowed {
862
+ &:is(:where(.peer):disabled ~ *) {
863
+ cursor: not-allowed;
864
+ }
865
+ }
866
+ .peer-disabled\:opacity-50 {
867
+ &:is(:where(.peer):disabled ~ *) {
868
+ opacity: 50%;
869
+ }
870
+ }
871
+ .marker\:text-blue-500 {
872
+ & *::marker {
873
+ color: var(--color-blue-500);
874
+ }
875
+ &::marker {
876
+ color: var(--color-blue-500);
877
+ }
878
+ & *::-webkit-details-marker {
879
+ color: var(--color-blue-500);
880
+ }
881
+ &::-webkit-details-marker {
882
+ color: var(--color-blue-500);
883
+ }
884
+ }
885
+ .selection\:bg-blue-200\/40 {
886
+ & *::selection {
887
+ background-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 40%, transparent);
888
+ @supports (color: color-mix(in lab, red, red)) {
889
+ background-color: color-mix(in oklab, var(--color-blue-200) 40%, transparent);
890
+ }
891
+ }
892
+ &::selection {
893
+ background-color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 40%, transparent);
894
+ @supports (color: color-mix(in lab, red, red)) {
895
+ background-color: color-mix(in oklab, var(--color-blue-200) 40%, transparent);
896
+ }
897
+ }
898
+ }
899
+ .selection\:bg-pink-200\/40 {
900
+ & *::selection {
901
+ background-color: color-mix(in srgb, oklch(89.9% 0.061 343.231) 40%, transparent);
902
+ @supports (color: color-mix(in lab, red, red)) {
903
+ background-color: color-mix(in oklab, var(--color-pink-200) 40%, transparent);
904
+ }
905
+ }
906
+ &::selection {
907
+ background-color: color-mix(in srgb, oklch(89.9% 0.061 343.231) 40%, transparent);
908
+ @supports (color: color-mix(in lab, red, red)) {
909
+ background-color: color-mix(in oklab, var(--color-pink-200) 40%, transparent);
910
+ }
911
+ }
912
+ }
913
+ .selection\:text-blue-800\/70 {
914
+ & *::selection {
915
+ color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 70%, transparent);
916
+ @supports (color: color-mix(in lab, red, red)) {
917
+ color: color-mix(in oklab, var(--color-blue-800) 70%, transparent);
918
+ }
919
+ }
920
+ &::selection {
921
+ color: color-mix(in srgb, oklch(42.4% 0.199 265.638) 70%, transparent);
922
+ @supports (color: color-mix(in lab, red, red)) {
923
+ color: color-mix(in oklab, var(--color-blue-800) 70%, transparent);
924
+ }
925
+ }
926
+ }
927
+ .selection\:text-pink-800\/70 {
928
+ & *::selection {
929
+ color: color-mix(in srgb, oklch(45.9% 0.187 3.815) 70%, transparent);
930
+ @supports (color: color-mix(in lab, red, red)) {
931
+ color: color-mix(in oklab, var(--color-pink-800) 70%, transparent);
932
+ }
933
+ }
934
+ &::selection {
935
+ color: color-mix(in srgb, oklch(45.9% 0.187 3.815) 70%, transparent);
936
+ @supports (color: color-mix(in lab, red, red)) {
937
+ color: color-mix(in oklab, var(--color-pink-800) 70%, transparent);
938
+ }
939
+ }
940
+ }
941
+ .file\:mr-2 {
942
+ &::file-selector-button {
943
+ margin-right: calc(var(--spacing) * 2);
944
+ }
945
+ }
946
+ .file\:rounded-full {
947
+ &::file-selector-button {
948
+ border-radius: calc(infinity * 1px);
949
+ }
950
+ }
951
+ .file\:border-0 {
952
+ &::file-selector-button {
953
+ border-style: var(--tw-border-style);
954
+ border-width: 0px;
955
+ }
956
+ }
957
+ .file\:bg-gray-100 {
958
+ &::file-selector-button {
959
+ background-color: var(--color-gray-100);
960
+ }
961
+ }
962
+ .file\:px-4 {
963
+ &::file-selector-button {
964
+ padding-inline: calc(var(--spacing) * 4);
965
+ }
966
+ }
967
+ .file\:py-1 {
968
+ &::file-selector-button {
969
+ padding-block: calc(var(--spacing) * 1);
970
+ }
971
+ }
972
+ .file\:text-xs {
973
+ &::file-selector-button {
974
+ font-size: var(--text-xs);
975
+ line-height: var(--tw-leading, var(--text-xs--line-height));
976
+ }
977
+ }
978
+ .file\:font-medium {
979
+ &::file-selector-button {
980
+ --tw-font-weight: var(--font-weight-medium);
981
+ font-weight: var(--font-weight-medium);
982
+ }
983
+ }
984
+ .file\:text-gray-700 {
985
+ &::file-selector-button {
986
+ color: var(--color-gray-700);
987
+ }
988
+ }
989
+ .open\:block {
990
+ &:is([open], :popover-open, :open) {
991
+ display: block;
992
+ }
993
+ }
994
+ .hover\:scale-105 {
995
+ &:hover {
996
+ @media (hover: hover) {
997
+ --tw-scale-x: 105%;
998
+ --tw-scale-y: 105%;
999
+ --tw-scale-z: 105%;
1000
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1001
+ }
1002
+ }
1003
+ }
1004
+ .hover\:border-gray-200 {
1005
+ &:hover {
1006
+ @media (hover: hover) {
1007
+ border-color: var(--color-gray-200);
1008
+ }
1009
+ }
1010
+ }
1011
+ .hover\:bg-brand-50 {
1012
+ &:hover {
1013
+ @media (hover: hover) {
1014
+ background-color: var(--color-brand-50);
1015
+ }
1016
+ }
1017
+ }
1018
+ .hover\:bg-gray-200\/40 {
1019
+ &:hover {
1020
+ @media (hover: hover) {
1021
+ background-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 40%, transparent);
1022
+ @supports (color: color-mix(in lab, red, red)) {
1023
+ background-color: color-mix(in oklab, var(--color-gray-200) 40%, transparent);
1024
+ }
1025
+ }
1026
+ }
1027
+ }
1028
+ .hover\:text-brand-800 {
1029
+ &:hover {
1030
+ @media (hover: hover) {
1031
+ color: var(--color-brand-800);
1032
+ }
1033
+ }
1034
+ }
1035
+ .hover\:text-gray-500 {
1036
+ &:hover {
1037
+ @media (hover: hover) {
1038
+ color: var(--color-gray-500);
1039
+ }
1040
+ }
1041
+ }
1042
+ .hover\:underline {
1043
+ &:hover {
1044
+ @media (hover: hover) {
1045
+ text-decoration-line: underline;
1046
+ }
1047
+ }
1048
+ }
1049
+ .hover\:ring-gray-300 {
1050
+ &:hover {
1051
+ @media (hover: hover) {
1052
+ --tw-ring-color: var(--color-gray-300);
1053
+ }
1054
+ }
1055
+ }
1056
+ .hover\:file\:bg-gray-200 {
1057
+ &:hover {
1058
+ @media (hover: hover) {
1059
+ &::file-selector-button {
1060
+ background-color: var(--color-gray-200);
1061
+ }
1062
+ }
1063
+ }
1064
+ }
1065
+ .focus\:bg-white {
1066
+ &:focus {
1067
+ background-color: var(--color-white);
1068
+ }
1069
+ }
1070
+ .focus\:ring {
1071
+ &:focus {
1072
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1073
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1074
+ }
1075
+ }
1076
+ .focus\:ring-0 {
1077
+ &:focus {
1078
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1079
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1080
+ }
1081
+ }
1082
+ .focus\:ring-brand-300 {
1083
+ &:focus {
1084
+ --tw-ring-color: var(--color-brand-300);
1085
+ }
1086
+ }
1087
+ .focus\:ring-gray-300 {
1088
+ &:focus {
1089
+ --tw-ring-color: var(--color-gray-300);
1090
+ }
1091
+ }
1092
+ .focus\:ring-offset-1 {
1093
+ &:focus {
1094
+ --tw-ring-offset-width: 1px;
1095
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1096
+ }
1097
+ }
1098
+ .focus\:outline-hidden {
1099
+ &:focus {
1100
+ --tw-outline-style: none;
1101
+ outline-style: none;
1102
+ @media (forced-colors: active) {
1103
+ outline: 2px solid transparent;
1104
+ outline-offset: 2px;
1105
+ }
1106
+ }
1107
+ }
1108
+ .disabled\:cursor-not-allowed {
1109
+ &:disabled {
1110
+ cursor: not-allowed;
1111
+ }
1112
+ }
1113
+ .disabled\:opacity-25 {
1114
+ &:disabled {
1115
+ opacity: 25%;
1116
+ }
1117
+ }
1118
+ .disabled\:opacity-50 {
1119
+ &:disabled {
1120
+ opacity: 50%;
1121
+ }
1122
+ }
1123
+ .disabled\:hover\:ring-gray-200\/80 {
1124
+ &:disabled {
1125
+ &:hover {
1126
+ @media (hover: hover) {
1127
+ --tw-ring-color: color-mix(in srgb, oklch(92.9% 0.013 255.508) 80%, transparent);
1128
+ @supports (color: color-mix(in lab, red, red)) {
1129
+ --tw-ring-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
1130
+ }
1131
+ }
1132
+ }
1133
+ }
1134
+ }
1135
+ .md\:col-span-4 {
1136
+ @media (width >= 48rem) {
1137
+ grid-column: span 4 / span 4;
1138
+ }
1139
+ }
1140
+ .md\:mx-4 {
1141
+ @media (width >= 48rem) {
1142
+ margin-inline: calc(var(--spacing) * 4);
1143
+ }
1144
+ }
1145
+ .md\:gap-8 {
1146
+ @media (width >= 48rem) {
1147
+ gap: calc(var(--spacing) * 8);
1148
+ }
1149
+ }
1150
+ .md\:rounded-md {
1151
+ @media (width >= 48rem) {
1152
+ border-radius: var(--radius-md);
1153
+ }
1154
+ }
1155
+ .md\:rounded-xl {
1156
+ @media (width >= 48rem) {
1157
+ border-radius: var(--radius-xl);
1158
+ }
1159
+ }
1160
+ .md\:px-4 {
1161
+ @media (width >= 48rem) {
1162
+ padding-inline: calc(var(--spacing) * 4);
1163
+ }
1164
+ }
1165
+ .md\:pb-4 {
1166
+ @media (width >= 48rem) {
1167
+ padding-bottom: calc(var(--spacing) * 4);
1168
+ }
1169
+ }
1170
+ .md\:text-base {
1171
+ @media (width >= 48rem) {
1172
+ font-size: var(--text-base);
1173
+ line-height: var(--tw-leading, var(--text-base--line-height));
1174
+ }
1175
+ }
1176
+ .md\:text-lg {
1177
+ @media (width >= 48rem) {
1178
+ font-size: var(--text-lg);
1179
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1180
+ }
1181
+ }
1182
+ .md\:text-sm {
1183
+ @media (width >= 48rem) {
1184
+ font-size: var(--text-sm);
1185
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1186
+ }
1187
+ }
1188
+ .md\:shadow-lg {
1189
+ @media (width >= 48rem) {
1190
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1191
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1192
+ }
1193
+ }
1194
+ .md\:ring {
1195
+ @media (width >= 48rem) {
1196
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1197
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1198
+ }
1199
+ }
1200
+ .lg\:not-sr-only {
1201
+ @media (width >= 64rem) {
1202
+ position: static;
1203
+ width: auto;
1204
+ height: auto;
1205
+ padding: 0;
1206
+ margin: 0;
1207
+ overflow: visible;
1208
+ clip-path: none;
1209
+ white-space: normal;
1210
+ }
1211
+ }
1212
+ .lg\:col-span-3 {
1213
+ @media (width >= 64rem) {
1214
+ grid-column: span 3 / span 3;
1215
+ }
1216
+ }
1217
+ .lg\:w-60 {
1218
+ @media (width >= 64rem) {
1219
+ width: calc(var(--spacing) * 60);
1220
+ }
1221
+ }
1222
+ .lg\:px-6 {
1223
+ @media (width >= 64rem) {
1224
+ padding-inline: calc(var(--spacing) * 6);
1225
+ }
1226
+ }
1227
+ .starting\:ml-3\.5 {
1228
+ @starting-style {
1229
+ margin-left: calc(var(--spacing) * 3.5);
1230
+ }
1231
+ }
1232
+ .starting\:translate-x-4 {
1233
+ @starting-style {
1234
+ --tw-translate-x: calc(var(--spacing) * 4);
1235
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1236
+ }
1237
+ }
1238
+ .starting\:scale-0 {
1239
+ @starting-style {
1240
+ --tw-scale-x: 0%;
1241
+ --tw-scale-y: 0%;
1242
+ --tw-scale-z: 0%;
1243
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1244
+ }
1245
+ }
1246
+ .starting\:opacity-0 {
1247
+ @starting-style {
1248
+ opacity: 0%;
1249
+ }
1250
+ }
1251
+ .\[\&_code\]\:font-bold {
1252
+ & code {
1253
+ --tw-font-weight: var(--font-weight-bold);
1254
+ font-weight: var(--font-weight-bold);
1255
+ }
1256
+ }
1257
+ .\[\&\:not\(\[open\]\)\[variant\=centered\]\]\:scale-95 {
1258
+ &:not([open])[variant=centered] {
1259
+ --tw-scale-x: 95%;
1260
+ --tw-scale-y: 95%;
1261
+ --tw-scale-z: 95%;
1262
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1263
+ }
1264
+ }
1265
+ .\[\&\:not\(\[open\]\)\[variant\=drawer\]\]\:translate-x-full {
1266
+ &:not([open])[variant=drawer] {
1267
+ --tw-translate-x: 100%;
1268
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1269
+ }
1270
+ }
1271
+ .\[\&\>input\]\:mt-\[0\.15em\] {
1272
+ &>input {
1273
+ margin-top: 0.15em;
1274
+ }
1275
+ }
1276
+ .\[\&\[data-slot\=\'field\'\]\+\[data-slot\=\'field\'\]\]\:mt-4 {
1277
+ &[data-slot='field']+[data-slot='field'] {
1278
+ margin-top: calc(var(--spacing) * 4);
1279
+ }
1280
+ }
1281
+ .\[\&\[variant\=centered\]\]\:m-auto {
1282
+ &[variant=centered] {
1283
+ margin: auto;
1284
+ }
1285
+ }
1286
+ .\[\&\[variant\=centered\]\]\:rounded-lg {
1287
+ &[variant=centered] {
1288
+ border-radius: var(--radius-lg);
1289
+ }
1290
+ }
1291
+ .\[\&\[variant\=centered\]\]\:backdrop\:bg-gray-950\/10 {
1292
+ &[variant=centered] {
1293
+ &::backdrop {
1294
+ background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 10%, transparent);
1295
+ @supports (color: color-mix(in lab, red, red)) {
1296
+ background-color: color-mix(in oklab, var(--color-gray-950) 10%, transparent);
1297
+ }
1298
+ }
1299
+ }
1300
+ }
1301
+ .\[\&\[variant\=centered\]\]\:backdrop\:backdrop-blur-\[2px\] {
1302
+ &[variant=centered] {
1303
+ &::backdrop {
1304
+ --tw-backdrop-blur: blur(2px);
1305
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1306
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1307
+ }
1308
+ }
1309
+ }
1310
+ .\[\&\[variant\=centered\]\]\:max-sm\:mb-0 {
1311
+ &[variant=centered] {
1312
+ @media (width < 40rem) {
1313
+ margin-bottom: calc(var(--spacing) * 0);
1314
+ }
1315
+ }
1316
+ }
1317
+ .\[\&\[variant\=centered\]\]\:max-sm\:rounded-b-none {
1318
+ &[variant=centered] {
1319
+ @media (width < 40rem) {
1320
+ border-bottom-right-radius: 0;
1321
+ border-bottom-left-radius: 0;
1322
+ }
1323
+ }
1324
+ }
1325
+ .\[\&\[variant\=centered\]\]\:sm\:my-auto {
1326
+ &[variant=centered] {
1327
+ @media (width >= 40rem) {
1328
+ margin-block: auto;
1329
+ }
1330
+ }
1331
+ }
1332
+ .\[\&\[variant\=centered\]\]\:starting\:scale-95 {
1333
+ &[variant=centered] {
1334
+ @starting-style {
1335
+ --tw-scale-x: 95%;
1336
+ --tw-scale-y: 95%;
1337
+ --tw-scale-z: 95%;
1338
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1339
+ }
1340
+ }
1341
+ }
1342
+ .\[\&\[variant\=centered\]\]\:max-sm\:starting\:translate-y-full {
1343
+ &[variant=centered] {
1344
+ @media (width < 40rem) {
1345
+ @starting-style {
1346
+ --tw-translate-y: 100%;
1347
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1348
+ }
1349
+ }
1350
+ }
1351
+ }
1352
+ .\[\&\[variant\=centered\]\]\:max-sm\:starting\:scale-100 {
1353
+ &[variant=centered] {
1354
+ @media (width < 40rem) {
1355
+ @starting-style {
1356
+ --tw-scale-x: 100%;
1357
+ --tw-scale-y: 100%;
1358
+ --tw-scale-z: 100%;
1359
+ scale: var(--tw-scale-x) var(--tw-scale-y);
1360
+ }
1361
+ }
1362
+ }
1363
+ }
1364
+ .\[\&\[variant\=drawer\]\]\:m-0 {
1365
+ &[variant=drawer] {
1366
+ margin: calc(var(--spacing) * 0);
1367
+ }
1368
+ }
1369
+ .\[\&\[variant\=drawer\]\]\:ml-auto {
1370
+ &[variant=drawer] {
1371
+ margin-left: auto;
1372
+ }
1373
+ }
1374
+ .\[\&\[variant\=drawer\]\]\:h-screen {
1375
+ &[variant=drawer] {
1376
+ height: 100vh;
1377
+ }
1378
+ }
1379
+ .\[\&\[variant\=drawer\]\]\:max-h-none {
1380
+ &[variant=drawer] {
1381
+ max-height: none;
1382
+ }
1383
+ }
1384
+ .\[\&\[variant\=drawer\]\]\:max-w-sm {
1385
+ &[variant=drawer] {
1386
+ max-width: var(--container-sm);
1387
+ }
1388
+ }
1389
+ .\[\&\[variant\=drawer\]\]\:rounded-l-lg {
1390
+ &[variant=drawer] {
1391
+ border-top-left-radius: var(--radius-lg);
1392
+ border-bottom-left-radius: var(--radius-lg);
1393
+ }
1394
+ }
1395
+ .\[\&\[variant\=drawer\]\]\:starting\:translate-x-full {
1396
+ &[variant=drawer] {
1397
+ @starting-style {
1398
+ --tw-translate-x: 100%;
1399
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1400
+ }
1401
+ }
1402
+ }
1403
+ }
1404
+ @layer base {
1405
+ a:not([class]) {
1406
+ text-decoration-line: underline;
1407
+ &:hover {
1408
+ text-decoration-line: none;
1409
+ }
1410
+ }
1411
+ }
1412
+ @layer components {
1413
+ [class^="btn-"] {
1414
+ display: flex;
1415
+ width: 100%;
1416
+ align-items: center;
1417
+ column-gap: calc(var(--spacing) * 1);
1418
+ padding-inline: calc(var(--spacing) * 3.5);
1419
+ padding-block: calc(var(--spacing) * 1.25);
1420
+ @media (width >= 48rem) {
1421
+ width: auto;
1422
+ }
1423
+ text-align: center;
1424
+ font-size: var(--text-sm);
1425
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1426
+ --tw-font-weight: var(--font-weight-medium);
1427
+ font-weight: var(--font-weight-medium);
1428
+ --tw-tracking: .0125em;
1429
+ letter-spacing: .0125em;
1430
+ border-style: var(--tw-border-style);
1431
+ border-width: 1px;
1432
+ border-color: transparent;
1433
+ border-radius: var(--radius-sm);
1434
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1435
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1436
+ --tw-ring-color: transparent;
1437
+ cursor: pointer;
1438
+ 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;
1439
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1440
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1441
+ [data-slot="icon"], svg {
1442
+ width: calc(var(--spacing) * 3.5);
1443
+ height: calc(var(--spacing) * 3.5);
1444
+ }
1445
+ }
1446
+ .btn-secondary {
1447
+ color: var(--color-gray-800);
1448
+ border-color: var(--color-white);
1449
+ --tw-ring-color: var(--color-gray-300);
1450
+ [data-slot="icon"], svg {
1451
+ color: var(--color-gray-600);
1452
+ }
1453
+ &:hover {
1454
+ --tw-ring-color: var(--color-gray-300);
1455
+ }
1456
+ }
1457
+ .btn-primary {
1458
+ background-color: var(--color-brand-600);
1459
+ color: var(--color-white);
1460
+ [data-slot="icon"], svg {
1461
+ color: var(--color-white);
1462
+ }
1463
+ &:hover {
1464
+ background-color: var(--color-brand-700);
1465
+ }
1466
+ }
1467
+ .btn-block {
1468
+ display: block;
1469
+ width: 100%;
1470
+ }
1471
+ .buttons {
1472
+ margin-top: calc(var(--spacing) * 4);
1473
+ display: flex;
1474
+ justify-content: flex-end;
1475
+ }
1476
+ }
1477
+ @property --tw-translate-x {
1478
+ syntax: "*";
1479
+ inherits: false;
1480
+ initial-value: 0;
1481
+ }
1482
+ @property --tw-translate-y {
1483
+ syntax: "*";
1484
+ inherits: false;
1485
+ initial-value: 0;
1486
+ }
1487
+ @property --tw-translate-z {
1488
+ syntax: "*";
1489
+ inherits: false;
1490
+ initial-value: 0;
1491
+ }
1492
+ @property --tw-scale-x {
1493
+ syntax: "*";
1494
+ inherits: false;
1495
+ initial-value: 1;
1496
+ }
1497
+ @property --tw-scale-y {
1498
+ syntax: "*";
1499
+ inherits: false;
1500
+ initial-value: 1;
1501
+ }
1502
+ @property --tw-scale-z {
1503
+ syntax: "*";
1504
+ inherits: false;
1505
+ initial-value: 1;
1506
+ }
1507
+ @property --tw-rotate-x {
1508
+ syntax: "*";
1509
+ inherits: false;
1510
+ }
1511
+ @property --tw-rotate-y {
1512
+ syntax: "*";
1513
+ inherits: false;
1514
+ }
1515
+ @property --tw-rotate-z {
1516
+ syntax: "*";
1517
+ inherits: false;
1518
+ }
1519
+ @property --tw-skew-x {
1520
+ syntax: "*";
1521
+ inherits: false;
1522
+ }
1523
+ @property --tw-skew-y {
1524
+ syntax: "*";
1525
+ inherits: false;
1526
+ }
1527
+ @property --tw-border-style {
1528
+ syntax: "*";
1529
+ inherits: false;
1530
+ initial-value: solid;
1531
+ }
1532
+ @property --tw-gradient-position {
1533
+ syntax: "*";
1534
+ inherits: false;
1535
+ }
1536
+ @property --tw-gradient-from {
1537
+ syntax: "<color>";
1538
+ inherits: false;
1539
+ initial-value: #0000;
1540
+ }
1541
+ @property --tw-gradient-via {
1542
+ syntax: "<color>";
1543
+ inherits: false;
1544
+ initial-value: #0000;
1545
+ }
1546
+ @property --tw-gradient-to {
1547
+ syntax: "<color>";
1548
+ inherits: false;
1549
+ initial-value: #0000;
1550
+ }
1551
+ @property --tw-gradient-stops {
1552
+ syntax: "*";
1553
+ inherits: false;
1554
+ }
1555
+ @property --tw-gradient-via-stops {
1556
+ syntax: "*";
1557
+ inherits: false;
1558
+ }
1559
+ @property --tw-gradient-from-position {
1560
+ syntax: "<length-percentage>";
1561
+ inherits: false;
1562
+ initial-value: 0%;
1563
+ }
1564
+ @property --tw-gradient-via-position {
1565
+ syntax: "<length-percentage>";
1566
+ inherits: false;
1567
+ initial-value: 50%;
1568
+ }
1569
+ @property --tw-gradient-to-position {
1570
+ syntax: "<length-percentage>";
1571
+ inherits: false;
1572
+ initial-value: 100%;
1573
+ }
1574
+ @property --tw-leading {
1575
+ syntax: "*";
1576
+ inherits: false;
1577
+ }
1578
+ @property --tw-font-weight {
1579
+ syntax: "*";
1580
+ inherits: false;
1581
+ }
1582
+ @property --tw-tracking {
1583
+ syntax: "*";
1584
+ inherits: false;
1585
+ }
1586
+ @property --tw-shadow {
1587
+ syntax: "*";
1588
+ inherits: false;
1589
+ initial-value: 0 0 #0000;
1590
+ }
1591
+ @property --tw-shadow-color {
1592
+ syntax: "*";
1593
+ inherits: false;
1594
+ }
1595
+ @property --tw-shadow-alpha {
1596
+ syntax: "<percentage>";
1597
+ inherits: false;
1598
+ initial-value: 100%;
1599
+ }
1600
+ @property --tw-inset-shadow {
1601
+ syntax: "*";
1602
+ inherits: false;
1603
+ initial-value: 0 0 #0000;
1604
+ }
1605
+ @property --tw-inset-shadow-color {
1606
+ syntax: "*";
1607
+ inherits: false;
1608
+ }
1609
+ @property --tw-inset-shadow-alpha {
1610
+ syntax: "<percentage>";
1611
+ inherits: false;
1612
+ initial-value: 100%;
1613
+ }
1614
+ @property --tw-ring-color {
1615
+ syntax: "*";
1616
+ inherits: false;
1617
+ }
1618
+ @property --tw-ring-shadow {
1619
+ syntax: "*";
1620
+ inherits: false;
1621
+ initial-value: 0 0 #0000;
1622
+ }
1623
+ @property --tw-inset-ring-color {
1624
+ syntax: "*";
1625
+ inherits: false;
1626
+ }
1627
+ @property --tw-inset-ring-shadow {
1628
+ syntax: "*";
1629
+ inherits: false;
1630
+ initial-value: 0 0 #0000;
1631
+ }
1632
+ @property --tw-ring-inset {
1633
+ syntax: "*";
1634
+ inherits: false;
1635
+ }
1636
+ @property --tw-ring-offset-width {
1637
+ syntax: "<length>";
1638
+ inherits: false;
1639
+ initial-value: 0px;
1640
+ }
1641
+ @property --tw-ring-offset-color {
1642
+ syntax: "*";
1643
+ inherits: false;
1644
+ initial-value: #fff;
1645
+ }
1646
+ @property --tw-ring-offset-shadow {
1647
+ syntax: "*";
1648
+ inherits: false;
1649
+ initial-value: 0 0 #0000;
1650
+ }
1651
+ @property --tw-backdrop-blur {
1652
+ syntax: "*";
1653
+ inherits: false;
1654
+ }
1655
+ @property --tw-backdrop-brightness {
1656
+ syntax: "*";
1657
+ inherits: false;
1658
+ }
1659
+ @property --tw-backdrop-contrast {
1660
+ syntax: "*";
1661
+ inherits: false;
1662
+ }
1663
+ @property --tw-backdrop-grayscale {
1664
+ syntax: "*";
1665
+ inherits: false;
1666
+ }
1667
+ @property --tw-backdrop-hue-rotate {
1668
+ syntax: "*";
1669
+ inherits: false;
1670
+ }
1671
+ @property --tw-backdrop-invert {
1672
+ syntax: "*";
1673
+ inherits: false;
1674
+ }
1675
+ @property --tw-backdrop-opacity {
1676
+ syntax: "*";
1677
+ inherits: false;
1678
+ }
1679
+ @property --tw-backdrop-saturate {
1680
+ syntax: "*";
1681
+ inherits: false;
1682
+ }
1683
+ @property --tw-backdrop-sepia {
1684
+ syntax: "*";
1685
+ inherits: false;
1686
+ }
1687
+ @property --tw-duration {
1688
+ syntax: "*";
1689
+ inherits: false;
1690
+ }
1691
+ @property --tw-ease {
1692
+ syntax: "*";
1693
+ inherits: false;
1694
+ }
1695
+ @layer properties {
1696
+ @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1697
+ *, ::before, ::after, ::backdrop {
1698
+ --tw-translate-x: 0;
1699
+ --tw-translate-y: 0;
1700
+ --tw-translate-z: 0;
1701
+ --tw-scale-x: 1;
1702
+ --tw-scale-y: 1;
1703
+ --tw-scale-z: 1;
1704
+ --tw-rotate-x: initial;
1705
+ --tw-rotate-y: initial;
1706
+ --tw-rotate-z: initial;
1707
+ --tw-skew-x: initial;
1708
+ --tw-skew-y: initial;
1709
+ --tw-border-style: solid;
1710
+ --tw-gradient-position: initial;
1711
+ --tw-gradient-from: #0000;
1712
+ --tw-gradient-via: #0000;
1713
+ --tw-gradient-to: #0000;
1714
+ --tw-gradient-stops: initial;
1715
+ --tw-gradient-via-stops: initial;
1716
+ --tw-gradient-from-position: 0%;
1717
+ --tw-gradient-via-position: 50%;
1718
+ --tw-gradient-to-position: 100%;
1719
+ --tw-leading: initial;
1720
+ --tw-font-weight: initial;
1721
+ --tw-tracking: initial;
1722
+ --tw-shadow: 0 0 #0000;
1723
+ --tw-shadow-color: initial;
1724
+ --tw-shadow-alpha: 100%;
1725
+ --tw-inset-shadow: 0 0 #0000;
1726
+ --tw-inset-shadow-color: initial;
1727
+ --tw-inset-shadow-alpha: 100%;
1728
+ --tw-ring-color: initial;
1729
+ --tw-ring-shadow: 0 0 #0000;
1730
+ --tw-inset-ring-color: initial;
1731
+ --tw-inset-ring-shadow: 0 0 #0000;
1732
+ --tw-ring-inset: initial;
1733
+ --tw-ring-offset-width: 0px;
1734
+ --tw-ring-offset-color: #fff;
1735
+ --tw-ring-offset-shadow: 0 0 #0000;
1736
+ --tw-backdrop-blur: initial;
1737
+ --tw-backdrop-brightness: initial;
1738
+ --tw-backdrop-contrast: initial;
1739
+ --tw-backdrop-grayscale: initial;
1740
+ --tw-backdrop-hue-rotate: initial;
1741
+ --tw-backdrop-invert: initial;
1742
+ --tw-backdrop-opacity: initial;
1743
+ --tw-backdrop-saturate: initial;
1744
+ --tw-backdrop-sepia: initial;
1745
+ --tw-duration: initial;
1746
+ --tw-ease: initial;
1747
+ }
1748
+ }
1749
+ }