@deepgram/styles 0.0.5 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/deepgram.css CHANGED
@@ -1,3005 +1,3 @@
1
- /**
2
- * Deepgram Styles - Tailwind-based Design System
3
- *
4
- * A comprehensive, mobile-first CSS framework for consistent Deepgram starter UIs
5
- * Built with Tailwind CSS utility classes and custom @apply directives
6
- *
7
- * Features:
8
- * - Semantic color tokens via Tailwind theme
9
- * - Mobile-first responsive components
10
- * - BEM methodology with Tailwind utilities
11
- * - Consistent spacing and typography
12
- *
13
- * @version 3.0.0 - Tailwind Migration
14
- * @author Deepgram Starter UIs Team
15
- */
1
+ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
16
2
 
17
- *, ::before, ::after {
18
- --tw-border-spacing-x: 0;
19
- --tw-border-spacing-y: 0;
20
- --tw-translate-x: 0;
21
- --tw-translate-y: 0;
22
- --tw-rotate: 0;
23
- --tw-skew-x: 0;
24
- --tw-skew-y: 0;
25
- --tw-scale-x: 1;
26
- --tw-scale-y: 1;
27
- --tw-pan-x: ;
28
- --tw-pan-y: ;
29
- --tw-pinch-zoom: ;
30
- --tw-scroll-snap-strictness: proximity;
31
- --tw-gradient-from-position: ;
32
- --tw-gradient-via-position: ;
33
- --tw-gradient-to-position: ;
34
- --tw-ordinal: ;
35
- --tw-slashed-zero: ;
36
- --tw-numeric-figure: ;
37
- --tw-numeric-spacing: ;
38
- --tw-numeric-fraction: ;
39
- --tw-ring-inset: ;
40
- --tw-ring-offset-width: 0px;
41
- --tw-ring-offset-color: #fff;
42
- --tw-ring-color: rgb(59 130 246 / 0.5);
43
- --tw-ring-offset-shadow: 0 0 #0000;
44
- --tw-ring-shadow: 0 0 #0000;
45
- --tw-shadow: 0 0 #0000;
46
- --tw-shadow-colored: 0 0 #0000;
47
- --tw-blur: ;
48
- --tw-brightness: ;
49
- --tw-contrast: ;
50
- --tw-grayscale: ;
51
- --tw-hue-rotate: ;
52
- --tw-invert: ;
53
- --tw-saturate: ;
54
- --tw-sepia: ;
55
- --tw-drop-shadow: ;
56
- --tw-backdrop-blur: ;
57
- --tw-backdrop-brightness: ;
58
- --tw-backdrop-contrast: ;
59
- --tw-backdrop-grayscale: ;
60
- --tw-backdrop-hue-rotate: ;
61
- --tw-backdrop-invert: ;
62
- --tw-backdrop-opacity: ;
63
- --tw-backdrop-saturate: ;
64
- --tw-backdrop-sepia: ;
65
- --tw-contain-size: ;
66
- --tw-contain-layout: ;
67
- --tw-contain-paint: ;
68
- --tw-contain-style: ;
69
- }
70
-
71
- ::backdrop {
72
- --tw-border-spacing-x: 0;
73
- --tw-border-spacing-y: 0;
74
- --tw-translate-x: 0;
75
- --tw-translate-y: 0;
76
- --tw-rotate: 0;
77
- --tw-skew-x: 0;
78
- --tw-skew-y: 0;
79
- --tw-scale-x: 1;
80
- --tw-scale-y: 1;
81
- --tw-pan-x: ;
82
- --tw-pan-y: ;
83
- --tw-pinch-zoom: ;
84
- --tw-scroll-snap-strictness: proximity;
85
- --tw-gradient-from-position: ;
86
- --tw-gradient-via-position: ;
87
- --tw-gradient-to-position: ;
88
- --tw-ordinal: ;
89
- --tw-slashed-zero: ;
90
- --tw-numeric-figure: ;
91
- --tw-numeric-spacing: ;
92
- --tw-numeric-fraction: ;
93
- --tw-ring-inset: ;
94
- --tw-ring-offset-width: 0px;
95
- --tw-ring-offset-color: #fff;
96
- --tw-ring-color: rgb(59 130 246 / 0.5);
97
- --tw-ring-offset-shadow: 0 0 #0000;
98
- --tw-ring-shadow: 0 0 #0000;
99
- --tw-shadow: 0 0 #0000;
100
- --tw-shadow-colored: 0 0 #0000;
101
- --tw-blur: ;
102
- --tw-brightness: ;
103
- --tw-contrast: ;
104
- --tw-grayscale: ;
105
- --tw-hue-rotate: ;
106
- --tw-invert: ;
107
- --tw-saturate: ;
108
- --tw-sepia: ;
109
- --tw-drop-shadow: ;
110
- --tw-backdrop-blur: ;
111
- --tw-backdrop-brightness: ;
112
- --tw-backdrop-contrast: ;
113
- --tw-backdrop-grayscale: ;
114
- --tw-backdrop-hue-rotate: ;
115
- --tw-backdrop-invert: ;
116
- --tw-backdrop-opacity: ;
117
- --tw-backdrop-saturate: ;
118
- --tw-backdrop-sepia: ;
119
- --tw-contain-size: ;
120
- --tw-contain-layout: ;
121
- --tw-contain-paint: ;
122
- --tw-contain-style: ;
123
- }
124
-
125
- /*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
126
- */
127
-
128
- /*
129
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
130
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
131
- */
132
-
133
- *,
134
- ::before,
135
- ::after {
136
- box-sizing: border-box;
137
- /* 1 */
138
- border-width: 0;
139
- /* 2 */
140
- border-style: solid;
141
- /* 2 */
142
- border-color: #e5e7eb;
143
- /* 2 */
144
- }
145
-
146
- ::before,
147
- ::after {
148
- --tw-content: '';
149
- }
150
-
151
- /*
152
- 1. Use a consistent sensible line-height in all browsers.
153
- 2. Prevent adjustments of font size after orientation changes in iOS.
154
- 3. Use a more readable tab size.
155
- 4. Use the user's configured `sans` font-family by default.
156
- 5. Use the user's configured `sans` font-feature-settings by default.
157
- 6. Use the user's configured `sans` font-variation-settings by default.
158
- 7. Disable tap highlights on iOS
159
- */
160
-
161
- html,
162
- :host {
163
- line-height: 1.5;
164
- /* 1 */
165
- -webkit-text-size-adjust: 100%;
166
- /* 2 */
167
- -moz-tab-size: 4;
168
- /* 3 */
169
- -o-tab-size: 4;
170
- tab-size: 4;
171
- /* 3 */
172
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
173
- /* 4 */
174
- font-feature-settings: normal;
175
- /* 5 */
176
- font-variation-settings: normal;
177
- /* 6 */
178
- -webkit-tap-highlight-color: transparent;
179
- /* 7 */
180
- }
181
-
182
- /*
183
- 1. Remove the margin in all browsers.
184
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
185
- */
186
-
187
- body {
188
- margin: 0;
189
- /* 1 */
190
- line-height: inherit;
191
- /* 2 */
192
- }
193
-
194
- /*
195
- 1. Add the correct height in Firefox.
196
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
197
- 3. Ensure horizontal rules are visible by default.
198
- */
199
-
200
- hr {
201
- height: 0;
202
- /* 1 */
203
- color: inherit;
204
- /* 2 */
205
- border-top-width: 1px;
206
- /* 3 */
207
- }
208
-
209
- /*
210
- Add the correct text decoration in Chrome, Edge, and Safari.
211
- */
212
-
213
- abbr:where([title]) {
214
- -webkit-text-decoration: underline dotted;
215
- text-decoration: underline dotted;
216
- }
217
-
218
- /*
219
- Remove the default font size and weight for headings.
220
- */
221
-
222
- h1,
223
- h2,
224
- h3,
225
- h4,
226
- h5,
227
- h6 {
228
- font-size: inherit;
229
- font-weight: inherit;
230
- }
231
-
232
- /*
233
- Reset links to optimize for opt-in styling instead of opt-out.
234
- */
235
-
236
- a {
237
- color: inherit;
238
- text-decoration: inherit;
239
- }
240
-
241
- /*
242
- Add the correct font weight in Edge and Safari.
243
- */
244
-
245
- b,
246
- strong {
247
- font-weight: bolder;
248
- }
249
-
250
- /*
251
- 1. Use the user's configured `mono` font-family by default.
252
- 2. Use the user's configured `mono` font-feature-settings by default.
253
- 3. Use the user's configured `mono` font-variation-settings by default.
254
- 4. Correct the odd `em` font sizing in all browsers.
255
- */
256
-
257
- code,
258
- kbd,
259
- samp,
260
- pre {
261
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
262
- /* 1 */
263
- font-feature-settings: normal;
264
- /* 2 */
265
- font-variation-settings: normal;
266
- /* 3 */
267
- font-size: 1em;
268
- /* 4 */
269
- }
270
-
271
- /*
272
- Add the correct font size in all browsers.
273
- */
274
-
275
- small {
276
- font-size: 80%;
277
- }
278
-
279
- /*
280
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
281
- */
282
-
283
- sub,
284
- sup {
285
- font-size: 75%;
286
- line-height: 0;
287
- position: relative;
288
- vertical-align: baseline;
289
- }
290
-
291
- sub {
292
- bottom: -0.25em;
293
- }
294
-
295
- sup {
296
- top: -0.5em;
297
- }
298
-
299
- /*
300
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
301
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
302
- 3. Remove gaps between table borders by default.
303
- */
304
-
305
- table {
306
- text-indent: 0;
307
- /* 1 */
308
- border-color: inherit;
309
- /* 2 */
310
- border-collapse: collapse;
311
- /* 3 */
312
- }
313
-
314
- /*
315
- 1. Change the font styles in all browsers.
316
- 2. Remove the margin in Firefox and Safari.
317
- 3. Remove default padding in all browsers.
318
- */
319
-
320
- button,
321
- input,
322
- optgroup,
323
- select,
324
- textarea {
325
- font-family: inherit;
326
- /* 1 */
327
- font-feature-settings: inherit;
328
- /* 1 */
329
- font-variation-settings: inherit;
330
- /* 1 */
331
- font-size: 100%;
332
- /* 1 */
333
- font-weight: inherit;
334
- /* 1 */
335
- line-height: inherit;
336
- /* 1 */
337
- letter-spacing: inherit;
338
- /* 1 */
339
- color: inherit;
340
- /* 1 */
341
- margin: 0;
342
- /* 2 */
343
- padding: 0;
344
- /* 3 */
345
- }
346
-
347
- /*
348
- Remove the inheritance of text transform in Edge and Firefox.
349
- */
350
-
351
- button,
352
- select {
353
- text-transform: none;
354
- }
355
-
356
- /*
357
- 1. Correct the inability to style clickable types in iOS and Safari.
358
- 2. Remove default button styles.
359
- */
360
-
361
- button,
362
- input:where([type='button']),
363
- input:where([type='reset']),
364
- input:where([type='submit']) {
365
- -webkit-appearance: button;
366
- /* 1 */
367
- background-color: transparent;
368
- /* 2 */
369
- background-image: none;
370
- /* 2 */
371
- }
372
-
373
- /*
374
- Use the modern Firefox focus style for all focusable elements.
375
- */
376
-
377
- :-moz-focusring {
378
- outline: auto;
379
- }
380
-
381
- /*
382
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
383
- */
384
-
385
- :-moz-ui-invalid {
386
- box-shadow: none;
387
- }
388
-
389
- /*
390
- Add the correct vertical alignment in Chrome and Firefox.
391
- */
392
-
393
- progress {
394
- vertical-align: baseline;
395
- }
396
-
397
- /*
398
- Correct the cursor style of increment and decrement buttons in Safari.
399
- */
400
-
401
- ::-webkit-inner-spin-button,
402
- ::-webkit-outer-spin-button {
403
- height: auto;
404
- }
405
-
406
- /*
407
- 1. Correct the odd appearance in Chrome and Safari.
408
- 2. Correct the outline style in Safari.
409
- */
410
-
411
- [type='search'] {
412
- -webkit-appearance: textfield;
413
- /* 1 */
414
- outline-offset: -2px;
415
- /* 2 */
416
- }
417
-
418
- /*
419
- Remove the inner padding in Chrome and Safari on macOS.
420
- */
421
-
422
- ::-webkit-search-decoration {
423
- -webkit-appearance: none;
424
- }
425
-
426
- /*
427
- 1. Correct the inability to style clickable types in iOS and Safari.
428
- 2. Change font properties to `inherit` in Safari.
429
- */
430
-
431
- ::-webkit-file-upload-button {
432
- -webkit-appearance: button;
433
- /* 1 */
434
- font: inherit;
435
- /* 2 */
436
- }
437
-
438
- /*
439
- Add the correct display in Chrome and Safari.
440
- */
441
-
442
- summary {
443
- display: list-item;
444
- }
445
-
446
- /*
447
- Removes the default spacing and border for appropriate elements.
448
- */
449
-
450
- blockquote,
451
- dl,
452
- dd,
453
- h1,
454
- h2,
455
- h3,
456
- h4,
457
- h5,
458
- h6,
459
- hr,
460
- figure,
461
- p,
462
- pre {
463
- margin: 0;
464
- }
465
-
466
- fieldset {
467
- margin: 0;
468
- padding: 0;
469
- }
470
-
471
- legend {
472
- padding: 0;
473
- }
474
-
475
- ol,
476
- ul,
477
- menu {
478
- list-style: none;
479
- margin: 0;
480
- padding: 0;
481
- }
482
-
483
- /*
484
- Reset default styling for dialogs.
485
- */
486
-
487
- dialog {
488
- padding: 0;
489
- }
490
-
491
- /*
492
- Prevent resizing textareas horizontally by default.
493
- */
494
-
495
- textarea {
496
- resize: vertical;
497
- }
498
-
499
- /*
500
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
501
- 2. Set the default placeholder color to the user's configured gray 400 color.
502
- */
503
-
504
- input::-moz-placeholder, textarea::-moz-placeholder {
505
- opacity: 1;
506
- /* 1 */
507
- color: #9ca3af;
508
- /* 2 */
509
- }
510
-
511
- input::placeholder,
512
- textarea::placeholder {
513
- opacity: 1;
514
- /* 1 */
515
- color: #9ca3af;
516
- /* 2 */
517
- }
518
-
519
- /*
520
- Set the default cursor for buttons.
521
- */
522
-
523
- button,
524
- [role="button"] {
525
- cursor: pointer;
526
- }
527
-
528
- /*
529
- Make sure disabled buttons don't get the pointer cursor.
530
- */
531
-
532
- :disabled {
533
- cursor: default;
534
- }
535
-
536
- /*
537
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
538
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
539
- This can trigger a poorly considered lint error in some tools but is included by design.
540
- */
541
-
542
- img,
543
- svg,
544
- video,
545
- canvas,
546
- audio,
547
- iframe,
548
- embed,
549
- object {
550
- display: block;
551
- /* 1 */
552
- vertical-align: middle;
553
- /* 2 */
554
- }
555
-
556
- /*
557
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
558
- */
559
-
560
- img,
561
- video {
562
- max-width: 100%;
563
- height: auto;
564
- }
565
-
566
- /* Make elements with the HTML hidden attribute stay hidden by default */
567
-
568
- [hidden]:where(:not([hidden="until-found"])) {
569
- display: none;
570
- }
571
-
572
- :root {
573
- --dg-base-font-size: 16px;
574
- --dg-border-width: 0.125rem;
575
- --dg-primary: #13ef95;
576
- --dg-secondary: #149afb;
577
- }
578
-
579
- html {
580
- font-size: var(--dg-base-font-size, 16px);
581
- scroll-behavior: smooth;
582
- }
583
-
584
- body {
585
- font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
586
- -webkit-font-smoothing: antialiased;
587
- -moz-osx-font-smoothing: grayscale;
588
- background-color: #0b0b0c;
589
- color: #fbfbff;
590
- line-height: 1.5;
591
- }
592
-
593
- h1, h2, h3, h4, h5, h6 {
594
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
595
- font-weight: 700;
596
- }
597
-
598
- h1 {
599
- font-size: 2.25rem;
600
- }
601
-
602
- @media (min-width: 768px) {
603
- h1 {
604
- font-size: 3rem;
605
- }
606
- }
607
-
608
- h2 {
609
- font-size: 1.875rem;
610
- }
611
-
612
- @media (min-width: 768px) {
613
- h2 {
614
- font-size: 2.25rem;
615
- }
616
- }
617
-
618
- h3 {
619
- font-size: 1.5rem;
620
- }
621
-
622
- @media (min-width: 768px) {
623
- h3 {
624
- font-size: 1.875rem;
625
- }
626
- }
627
-
628
- h4 {
629
- font-size: 1.25rem;
630
- }
631
-
632
- @media (min-width: 768px) {
633
- h4 {
634
- font-size: 1.5rem;
635
- }
636
- }
637
-
638
- code, pre {
639
- font-family: Fira Code, Monaco, Consolas, Courier New, monospace;
640
- }
641
-
642
- a {
643
- color: var(--dg-primary, #13ef95);
644
- transition-property: color;
645
- transition-duration: 200ms;
646
- }
647
-
648
- a:hover {
649
- opacity: 0.8;
650
- }
651
-
652
- /* Button Base Styles */
653
-
654
- .dg-btn {
655
- display: inline-flex;
656
- align-items: center;
657
- justify-content: center;
658
- padding-left: 1.25rem;
659
- padding-right: 1.25rem;
660
- padding-top: 0.375rem;
661
- padding-bottom: 0.375rem;
662
- line-height: 2;
663
- font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
664
- font-size: 1rem;
665
- line-height: 1.5rem;
666
- font-weight: 600;
667
- white-space: nowrap;
668
- border-radius: 0.25rem;
669
- text-transform: capitalize;
670
- cursor: pointer;
671
- -webkit-user-select: none;
672
- -moz-user-select: none;
673
- user-select: none;
674
- width: -moz-fit-content;
675
- width: fit-content;
676
- outline: 2px solid transparent;
677
- outline-offset: 2px;
678
- }
679
-
680
- .dg-btn:disabled {
681
- cursor: not-allowed;
682
- opacity: 0.5;
683
- }
684
-
685
- .dg-btn {
686
- gap: 0.5rem;
687
- height: 3rem;
688
- }
689
-
690
- /* Button Modifier: Small */
691
-
692
- .dg-btn--sm {
693
- padding-left: 1.25rem;
694
- padding-right: 1.25rem;
695
- padding-top: 0.5rem;
696
- padding-bottom: 0.5rem;
697
- font-size: 0.875rem;
698
- line-height: 1.25rem;
699
- font-weight: 700;
700
- height: 2.25rem;
701
- }
702
-
703
- /* Button Modifier: Primary - Gradient border with glow effect */
704
-
705
- .dg-btn--primary {
706
- --tw-text-opacity: 1;
707
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
708
- position: relative;
709
- border-width: 1px;
710
- border-color: transparent;
711
- background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
712
- background-origin: padding-box, border-box;
713
- background-clip: padding-box, border-box;
714
- background-repeat: no-repeat;
715
- background-position: center;
716
- background-size: 100% 100%;
717
- background-color: rgb(0, 0, 0);
718
- box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
719
- }
720
-
721
- .dg-btn--primary:hover {
722
- border-color: transparent;
723
- --tw-text-opacity: 1;
724
- color: rgb(0 0 0 / var(--tw-text-opacity, 1));
725
- --tw-bg-opacity: 1;
726
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
727
- background-image: none;
728
- background-origin: padding-box;
729
- background-clip: border-box;
730
- background-repeat: repeat;
731
- background-position: 0% 0%;
732
- background-size: auto;
733
- box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
734
- }
735
-
736
- /* Button Modifier: Secondary - White background with black text */
737
-
738
- .dg-btn--secondary {
739
- border-width: 1px;
740
- border-color: transparent;
741
- --tw-bg-opacity: 1;
742
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
743
- --tw-text-opacity: 1;
744
- color: rgb(0 0 0 / var(--tw-text-opacity, 1));
745
- }
746
-
747
- .dg-btn--secondary:hover {
748
- --tw-text-opacity: 1;
749
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
750
- border-width: 1px;
751
- --tw-border-opacity: 1;
752
- border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
753
- --tw-bg-opacity: 1;
754
- background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
755
- }
756
-
757
- /* Button Modifier: Ghost - Transparent with grey border */
758
-
759
- .dg-btn--ghost {
760
- --tw-text-opacity: 1;
761
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
762
- border-width: 1px;
763
- --tw-border-opacity: 1;
764
- border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
765
- background-color: transparent;
766
- }
767
-
768
- .dg-btn--ghost:hover {
769
- border-color: transparent;
770
- --tw-text-opacity: 1;
771
- color: rgb(0 0 0 / var(--tw-text-opacity, 1));
772
- --tw-bg-opacity: 1;
773
- background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
774
- background-image: none;
775
- background-origin: padding-box;
776
- background-clip: border-box;
777
- background-repeat: repeat;
778
- background-position: 0% 0%;
779
- background-size: auto;
780
- box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
781
- }
782
-
783
- /* Button Modifier: Danger Ghost - For destructive actions */
784
-
785
- .dg-btn--danger-ghost {
786
- --tw-text-opacity: 1;
787
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
788
- border-width: 1px;
789
- --tw-border-opacity: 1;
790
- border-color: rgb(240 68 56 / var(--tw-border-opacity, 1));
791
- background-color: transparent;
792
- }
793
-
794
- .dg-btn--danger-ghost:hover {
795
- --tw-text-opacity: 1;
796
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
797
- border-color: transparent;
798
- --tw-bg-opacity: 1;
799
- background-color: rgb(240 68 56 / var(--tw-bg-opacity, 1));
800
- }
801
-
802
- /* Button Modifier: Icon Only */
803
-
804
- .dg-btn--icon-only {
805
- width: 3rem;
806
- height: 3rem;
807
- padding-left: 0.5rem;
808
- padding-right: 0.5rem;
809
- }
810
-
811
- .dg-btn--icon-only.dg-btn--sm {
812
- width: 1.5rem;
813
- height: 1.5rem;
814
- }
815
-
816
- /* Button Modifier: Collapse - Responsive mobile-adaptive */
817
-
818
- .dg-btn--collapse {
819
- display: inline-flex;
820
- }
821
-
822
- @media (max-width: 768px) {
823
- .dg-btn--collapse {
824
- width: 100%;
825
- justify-content: center;
826
- }
827
- }
828
-
829
- /* Button Icon Spacing - Prevent icons from shrinking */
830
-
831
- .dg-btn i,
832
- .dg-btn svg {
833
- flex-shrink: 0;
834
- }
835
-
836
- /* ==========================================================================
837
- LAYOUT COMPONENTS
838
- ========================================================================== */
839
-
840
- /* Section Component - Reusable content section */
841
-
842
- .dg-section {
843
- width: 100%;
844
- padding: 0.75rem;
845
- margin-bottom: 1rem;
846
- }
847
-
848
- @media (min-width: 640px) {
849
- .dg-section {
850
- padding: 1.25rem 1rem;
851
- margin-bottom: 1.5rem;
852
- }
853
- }
854
-
855
- @media (min-width: 1024px) {
856
- .dg-section {
857
- padding: 2rem 1.5rem;
858
- margin-bottom: 2rem;
859
- }
860
- }
861
-
862
- .dg-section--compact {
863
- padding: 0.5rem;
864
- margin-bottom: 0.5rem;
865
- }
866
-
867
- @media (min-width: 640px) {
868
- .dg-section--compact {
869
- padding: 0.75rem;
870
- margin-bottom: 0.75rem;
871
- }
872
- }
873
-
874
- .dg-section--spacious {
875
- padding: 1.5rem 0.75rem;
876
- margin-bottom: 2rem;
877
- }
878
-
879
- @media (min-width: 640px) {
880
- .dg-section--spacious {
881
- padding: 2rem 1.5rem;
882
- margin-bottom: 2.5rem;
883
- }
884
- }
885
-
886
- .dg-section--bordered {
887
- border-radius: 0.5rem;
888
- border-width: 1px;
889
- --tw-border-opacity: 1;
890
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
891
- --tw-bg-opacity: 1;
892
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
893
- }
894
-
895
- .dg-section--elevated {
896
- border-radius: 0.5rem;
897
- border-width: 1px;
898
- --tw-border-opacity: 1;
899
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
900
- --tw-bg-opacity: 1;
901
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
902
- --tw-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
903
- --tw-shadow-colored: 0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color), 0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);
904
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
905
- }
906
-
907
- /* Fieldset-style section with legend title */
908
-
909
- .dg-section--fieldset {
910
- position: relative;
911
- border-radius: 0.5rem;
912
- border-width: 1px;
913
- --tw-border-opacity: 1;
914
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
915
- padding-top: 2rem;
916
- }
917
-
918
- @media (min-width: 640px) {
919
- .dg-section--fieldset {
920
- padding-top: 2.5rem;
921
- }
922
- }
923
-
924
- .dg-section--fieldset .dg-section-heading {
925
- --tw-text-opacity: 1;
926
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
927
- position: absolute;
928
- --tw-bg-opacity: 1;
929
- background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
930
- font-weight: 600;
931
- text-transform: uppercase;
932
- letter-spacing: 0.025em;
933
- margin: 0px;
934
- padding-left: 0.5rem;
935
- padding-right: 0.5rem;
936
- font-size: 1rem;
937
- line-height: 1.5rem;
938
- top: -0.75rem;
939
- left: 1rem;
940
- }
941
-
942
- @media (min-width: 640px) {
943
- .dg-section--fieldset .dg-section-heading {
944
- font-size: 1.125rem;
945
- }
946
- }
947
-
948
- /* Card Component */
949
-
950
- .dg-card {
951
- display: flex;
952
- width: 100%;
953
- flex-direction: column;
954
- border-radius: 0.5rem;
955
- border-width: 1px;
956
- --tw-border-opacity: 1;
957
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
958
- --tw-bg-opacity: 1;
959
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
960
- margin-bottom: 0.75rem;
961
- padding: 0.75rem;
962
- --tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
963
- --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
964
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
965
- transition-property: box-shadow;
966
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
967
- transition-duration: 200ms;
968
- }
969
-
970
- @media (min-width: 640px) {
971
- .dg-card {
972
- margin-bottom: 1rem;
973
- padding: 1rem;
974
- }
975
- }
976
-
977
- @media (min-width: 1024px) {
978
- .dg-card {
979
- padding: 1.5rem;
980
- }
981
- }
982
-
983
- .dg-card:hover {
984
- --tw-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1), 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.06);
985
- --tw-shadow-colored: 0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color), 0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);
986
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
987
- }
988
-
989
- /* Card Modifiers */
990
-
991
- .dg-card--compact {
992
- padding: 0.5rem;
993
- }
994
-
995
- @media (min-width: 640px) {
996
- .dg-card--compact {
997
- padding: 0.75rem;
998
- }
999
- }
1000
-
1001
- .dg-card--spacious {
1002
- padding: 1rem;
1003
- }
1004
-
1005
- @media (min-width: 640px) {
1006
- .dg-card--spacious {
1007
- padding: 1.5rem;
1008
- }
1009
- }
1010
-
1011
- @media (min-width: 1024px) {
1012
- .dg-card--spacious {
1013
- padding: 2rem;
1014
- }
1015
- }
1016
-
1017
- .dg-card--bordered {
1018
- border-width: 2px;
1019
- --tw-border-opacity: 1;
1020
- border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
1021
- }
1022
-
1023
- /* Card with structured layout (image, header, body, footer) */
1024
-
1025
- .dg-card--structured {
1026
- justify-content: space-between;
1027
- padding: 0px;
1028
- }
1029
-
1030
- /* Selectable Card */
1031
-
1032
- .dg-card--selectable {
1033
- cursor: pointer;
1034
- transition-property: all;
1035
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1036
- transition-duration: 200ms;
1037
- border-width: 2px;
1038
- --tw-border-opacity: 1;
1039
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
1040
- padding: 1.25rem;
1041
- }
1042
-
1043
- .dg-card--selectable:hover {
1044
- --tw-border-opacity: 1;
1045
- border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
1046
- }
1047
-
1048
- .dg-card--selectable:has(input[type="radio"]:checked) {
1049
- border-color: var(--dg-primary, #13ef95);
1050
- background: rgba(19, 239, 149, 0.05);
1051
- }
1052
-
1053
- /* Screen reader only utility */
1054
-
1055
- .dg-sr-only {
1056
- position: absolute;
1057
- width: 1px;
1058
- height: 1px;
1059
- padding: 0;
1060
- margin: -1px;
1061
- overflow: hidden;
1062
- clip: rect(0, 0, 0, 0);
1063
- white-space: nowrap;
1064
- border-width: 0;
1065
- }
1066
-
1067
- .dg-card--selectable input[type="radio"] {
1068
- position: absolute;
1069
- width: 1px;
1070
- height: 1px;
1071
- padding: 0;
1072
- margin: -1px;
1073
- overflow: hidden;
1074
- clip: rect(0, 0, 0, 0);
1075
- white-space: nowrap;
1076
- border-width: 0;
1077
- }
1078
-
1079
- .dg-card--selectable__indicator {
1080
- display: none;
1081
- }
1082
-
1083
- .dg-card--selectable__icon {
1084
- --tw-text-opacity: 1;
1085
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1086
- margin-right: 0.5rem;
1087
- }
1088
-
1089
- .dg-card--selectable__content {
1090
- display: flex;
1091
- flex: 1 1 0%;
1092
- flex-direction: column;
1093
- gap: 0.25rem;
1094
- }
1095
-
1096
- @media (max-width: 767px) {
1097
- .dg-card--selectable__content {
1098
- flex-direction: row;
1099
- align-items: center;
1100
- gap: 0.75rem;
1101
- }
1102
- }
1103
-
1104
- .dg-card--selectable .dg-item-title {
1105
- --tw-text-opacity: 1;
1106
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1107
- font-size: 1rem;
1108
- line-height: 1.5rem;
1109
- font-weight: 600;
1110
- display: flex;
1111
- align-items: center;
1112
- }
1113
-
1114
- @media (max-width: 767px) {
1115
- .dg-card--selectable .dg-item-title {
1116
- margin-bottom: 0;
1117
- flex-shrink: 0;
1118
- }
1119
- }
1120
-
1121
- @media (min-width: 768px) {
1122
- .dg-card--selectable .dg-item-title {
1123
- margin-bottom: 0.25rem;
1124
- }
1125
- }
1126
-
1127
- .dg-card--selectable .dg-prose {
1128
- --tw-text-opacity: 1;
1129
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1130
- font-size: 0.875rem;
1131
- line-height: 1.25rem;
1132
- }
1133
-
1134
- @media (max-width: 767px) {
1135
- .dg-card--selectable .dg-prose {
1136
- flex: 1;
1137
- white-space: nowrap;
1138
- overflow: hidden;
1139
- text-overflow: ellipsis;
1140
- }
1141
- }
1142
-
1143
- /* File Upload Card */
1144
-
1145
- .dg-card--file-upload {
1146
- cursor: pointer;
1147
- transition-property: all;
1148
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1149
- transition-duration: 200ms;
1150
- border-width: 2px;
1151
- border-style: dashed;
1152
- --tw-border-opacity: 1;
1153
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
1154
- padding: 1.25rem;
1155
- }
1156
-
1157
- .dg-card--file-upload:hover {
1158
- --tw-border-opacity: 1;
1159
- border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
1160
- }
1161
-
1162
- .dg-card--file-upload:has(input[type="checkbox"]:checked) {
1163
- border-style: solid;
1164
- border-color: var(--dg-primary, #13ef95);
1165
- background: rgba(19, 239, 149, 0.05);
1166
- }
1167
-
1168
- .dg-card--file-upload input[type="file"],
1169
- .dg-card--file-upload input[type="checkbox"] {
1170
- position: absolute;
1171
- width: 1px;
1172
- height: 1px;
1173
- padding: 0;
1174
- margin: -1px;
1175
- overflow: hidden;
1176
- clip: rect(0, 0, 0, 0);
1177
- white-space: nowrap;
1178
- border-width: 0;
1179
- }
1180
-
1181
- .dg-card--file-upload__icon {
1182
- --tw-text-opacity: 1;
1183
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1184
- margin-right: 0.5rem;
1185
- }
1186
-
1187
- .dg-card--file-upload__content {
1188
- display: flex;
1189
- flex: 1 1 0%;
1190
- flex-direction: column;
1191
- gap: 0.25rem;
1192
- }
1193
-
1194
- @media (max-width: 767px) {
1195
- .dg-card--file-upload__content {
1196
- flex-direction: row;
1197
- align-items: center;
1198
- gap: 0.75rem;
1199
- }
1200
- }
1201
-
1202
- .dg-card--file-upload .dg-item-title {
1203
- --tw-text-opacity: 1;
1204
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1205
- font-size: 1rem;
1206
- line-height: 1.5rem;
1207
- font-weight: 600;
1208
- display: flex;
1209
- align-items: center;
1210
- }
1211
-
1212
- @media (max-width: 767px) {
1213
- .dg-card--file-upload .dg-item-title {
1214
- margin-bottom: 0;
1215
- flex-shrink: 0;
1216
- }
1217
- }
1218
-
1219
- @media (min-width: 768px) {
1220
- .dg-card--file-upload .dg-item-title {
1221
- margin-bottom: 0.25rem;
1222
- }
1223
- }
1224
-
1225
- .dg-card--file-upload .dg-prose {
1226
- --tw-text-opacity: 1;
1227
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1228
- font-size: 0.875rem;
1229
- line-height: 1.25rem;
1230
- }
1231
-
1232
- @media (max-width: 767px) {
1233
- .dg-card--file-upload .dg-prose {
1234
- flex: 1;
1235
- white-space: nowrap;
1236
- overflow: hidden;
1237
- text-overflow: ellipsis;
1238
- }
1239
- }
1240
-
1241
- /* Card Image */
1242
-
1243
- .dg-card__image {
1244
- width: 100%;
1245
- flex-shrink: 0;
1246
- overflow: hidden;
1247
- border-radius: 0.5rem 0.5rem 0 0;
1248
- /* Rounded top corners only */
1249
- }
1250
-
1251
- .dg-card__image img {
1252
- display: block;
1253
- height: 100%;
1254
- width: 100%;
1255
- -o-object-fit: cover;
1256
- object-fit: cover;
1257
- }
1258
-
1259
- /* Card Image Size Modifiers */
1260
-
1261
- .dg-card__image--small {
1262
- height: 7.5rem;
1263
- }
1264
-
1265
- .dg-card__image--medium {
1266
- height: 10rem;
1267
- }
1268
-
1269
- .dg-card__image--large {
1270
- height: 15rem;
1271
- }
1272
-
1273
- .dg-card__image--aspect-4-3 {
1274
- aspect-ratio: 4/3;
1275
- height: auto;
1276
- }
1277
-
1278
- /* Card Icon */
1279
-
1280
- .dg-card__icon {
1281
- display: flex;
1282
- align-items: center;
1283
- padding: 0.75rem;
1284
- padding-top: 1.5rem;
1285
- }
1286
-
1287
- @media (min-width: 640px) {
1288
- .dg-card__icon {
1289
- padding: 1rem;
1290
- padding-top: 2rem;
1291
- }
1292
- }
1293
-
1294
- @media (min-width: 1024px) {
1295
- .dg-card__icon {
1296
- padding-left: 1.5rem;
1297
- padding-right: 1.5rem;
1298
- padding-bottom: 1.5rem;
1299
- padding-top: 2.5rem;
1300
- }
1301
- }
1302
-
1303
- .dg-card__icon i,
1304
- .dg-card__icon svg {
1305
- color: var(--dg-primary, #13ef95);
1306
- font-size: 3rem;
1307
- line-height: 1;
1308
- }
1309
-
1310
- /* Card Icon Alignment Modifiers */
1311
-
1312
- .dg-card__icon--left {
1313
- justify-content: flex-start;
1314
- }
1315
-
1316
- .dg-card__icon--center {
1317
- justify-content: center;
1318
- }
1319
-
1320
- .dg-card__icon--right {
1321
- justify-content: flex-end;
1322
- }
1323
-
1324
- /* Card Header */
1325
-
1326
- .dg-card__header {
1327
- display: flex;
1328
- flex-direction: column;
1329
- gap: 0.5rem;
1330
- padding: 0.75rem;
1331
- }
1332
-
1333
- @media (min-width: 640px) {
1334
- .dg-card__header {
1335
- padding: 1rem;
1336
- }
1337
- }
1338
-
1339
- @media (min-width: 1024px) {
1340
- .dg-card__header {
1341
- padding-left: 1.5rem;
1342
- padding-right: 1.5rem;
1343
- padding-top: 1.5rem;
1344
- padding-bottom: 0px;
1345
- }
1346
- }
1347
-
1348
- /* Card Body */
1349
-
1350
- .dg-card__body {
1351
- display: flex;
1352
- flex: 1 1 0%;
1353
- flex-direction: column;
1354
- gap: 0.75rem;
1355
- padding: 0.75rem;
1356
- }
1357
-
1358
- @media (min-width: 640px) {
1359
- .dg-card__body {
1360
- padding: 1rem;
1361
- }
1362
- }
1363
-
1364
- @media (min-width: 1024px) {
1365
- .dg-card__body {
1366
- padding-left: 1.5rem;
1367
- padding-right: 1.5rem;
1368
- padding-bottom: 1.5rem;
1369
- padding-top: 0px;
1370
- }
1371
- }
1372
-
1373
- /* Card Footer */
1374
-
1375
- .dg-card__footer {
1376
- margin-top: auto;
1377
- display: flex;
1378
- align-items: center;
1379
- gap: 0.75rem;
1380
- border-top-width: 1px;
1381
- border-color: transparent;
1382
- padding: 0.75rem;
1383
- }
1384
-
1385
- @media (min-width: 640px) {
1386
- .dg-card__footer {
1387
- padding: 1rem;
1388
- }
1389
- }
1390
-
1391
- @media (min-width: 1024px) {
1392
- .dg-card__footer {
1393
- padding: 1.5rem;
1394
- }
1395
- }
1396
-
1397
- /* Card Footer with Border */
1398
-
1399
- .dg-card__footer--bordered {
1400
- --tw-border-opacity: 1;
1401
- border-top-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
1402
- }
1403
-
1404
- /* Code Block Component */
1405
-
1406
- .dg-code-block {
1407
- width: 100%;
1408
- overflow: auto;
1409
- border-radius: 0.5rem;
1410
- border-width: 1px;
1411
- --tw-border-opacity: 1;
1412
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
1413
- --tw-bg-opacity: 1;
1414
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
1415
- margin-top: 0.75rem;
1416
- margin-bottom: 0.75rem;
1417
- max-height: 12.5rem;
1418
- padding: 0.5rem;
1419
- -webkit-overflow-scrolling: touch;
1420
- }
1421
-
1422
- @media (min-width: 640px) {
1423
- .dg-code-block {
1424
- margin-top: 1rem;
1425
- margin-bottom: 1rem;
1426
- max-height: 15.625rem;
1427
- padding: 0.75rem;
1428
- }
1429
- }
1430
-
1431
- @media (min-width: 1024px) {
1432
- .dg-code-block {
1433
- max-height: 18.75rem;
1434
- }
1435
- }
1436
-
1437
- .dg-code-block pre {
1438
- --tw-text-opacity: 1;
1439
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
1440
- margin: 0px;
1441
- white-space: pre-wrap;
1442
- overflow-wrap: break-word;
1443
- padding: 0px;
1444
- font-family: Fira Code, Monaco, Consolas, Courier New, monospace;
1445
- font-size: 0.75rem;
1446
- line-height: 1rem;
1447
- line-height: 1.3;
1448
- }
1449
-
1450
- @media (min-width: 640px) {
1451
- .dg-code-block pre {
1452
- font-size: 0.875rem;
1453
- line-height: 1.25rem;
1454
- }
1455
- }
1456
-
1457
- .dg-code-block--compact {
1458
- max-height: 7.5rem;
1459
- padding: 0.25rem;
1460
- }
1461
-
1462
- @media (min-width: 640px) {
1463
- .dg-code-block--compact {
1464
- max-height: 9.375rem;
1465
- padding: 0.5rem;
1466
- }
1467
- }
1468
-
1469
- .dg-code-block--tall {
1470
- max-height: 18.75rem;
1471
- }
1472
-
1473
- @media (min-width: 640px) {
1474
- .dg-code-block--tall {
1475
- max-height: 25rem;
1476
- }
1477
- }
1478
-
1479
- @media (min-width: 1024px) {
1480
- .dg-code-block--tall {
1481
- max-height: 31.25rem;
1482
- }
1483
- }
1484
-
1485
- .dg-code-block--no-scroll {
1486
- max-height: none;
1487
- overflow: visible;
1488
- }
1489
-
1490
- /* ==========================================================================
1491
- TYPOGRAPHY COMPONENTS
1492
- ========================================================================== */
1493
-
1494
- /* Hero Title */
1495
-
1496
- .dg-hero-title {
1497
- margin-bottom: 1.5rem;
1498
- text-align: center;
1499
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
1500
- font-size: 3rem;
1501
- font-weight: 700;
1502
- line-height: 1.25;
1503
- background-image: linear-gradient(to right, var(--tw-gradient-stops));
1504
- --tw-gradient-from: var(--dg-secondary, #149afb) var(--tw-gradient-from-position);
1505
- --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
1506
- --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
1507
- --tw-gradient-to: var(--dg-primary, #13ef95) var(--tw-gradient-to-position);
1508
- -webkit-background-clip: text;
1509
- background-clip: text;
1510
- -webkit-text-fill-color: transparent;
1511
- letter-spacing: -0.02em;
1512
- font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "ordn" 0, "ss09", "kern";
1513
- font-kerning: normal;
1514
- }
1515
-
1516
- @media (max-width: 1024px) {
1517
- .dg-hero-title {
1518
- font-size: 2.25rem;
1519
- line-height: 2.5rem;
1520
- }
1521
- }
1522
-
1523
- @media (max-width: 768px) {
1524
- .dg-hero-title {
1525
- font-size: 1.875rem;
1526
- line-height: 2.25rem;
1527
- }
1528
- }
1529
-
1530
- @media (max-width: 640px) {
1531
- .dg-hero-title {
1532
- font-size: 1.5rem;
1533
- line-height: 2rem;
1534
- }
1535
- }
1536
-
1537
- /* Hero Section Container */
1538
-
1539
- .dg-hero {
1540
- width: 100%;
1541
- padding-top: 4rem;
1542
- padding-bottom: 4rem;
1543
- padding-left: 1rem;
1544
- padding-right: 1rem;
1545
- text-align: center;
1546
- }
1547
-
1548
- @media (max-width: 768px) {
1549
- .dg-hero {
1550
- padding-top: 3rem;
1551
- padding-bottom: 3rem;
1552
- padding-left: 1rem;
1553
- padding-right: 1rem;
1554
- }
1555
- }
1556
-
1557
- @media (max-width: 640px) {
1558
- .dg-hero {
1559
- padding-top: 2rem;
1560
- padding-bottom: 2rem;
1561
- padding-left: 1rem;
1562
- padding-right: 1rem;
1563
- }
1564
- }
1565
-
1566
- /* Hero Content Container */
1567
-
1568
- .dg-hero__content {
1569
- margin-left: auto;
1570
- margin-right: auto;
1571
- display: flex;
1572
- max-width: 53.125rem;
1573
- flex-direction: column;
1574
- gap: 1.5rem;
1575
- }
1576
-
1577
- @media (max-width: 768px) {
1578
- .dg-hero__content {
1579
- gap: 1.25rem;
1580
- }
1581
- }
1582
-
1583
- /* Hero Announcement Banner */
1584
-
1585
- .dg-hero__announcement {
1586
- display: inline-flex;
1587
- align-items: center;
1588
- justify-content: center;
1589
- border-radius: 9999px;
1590
- border-width: 1px;
1591
- margin-left: auto;
1592
- margin-right: auto;
1593
- margin-bottom: 0.5rem;
1594
- border-color: rgb(148 148 152 / 0.3);
1595
- background-color: rgba(0, 0, 0, 0.5);
1596
- padding-top: 0.5rem;
1597
- padding-bottom: 0.5rem;
1598
- padding-left: 1.25rem;
1599
- padding-right: 1.25rem;
1600
- width: -moz-fit-content;
1601
- width: fit-content;
1602
- cursor: pointer;
1603
- gap: 0.75rem;
1604
- text-decoration-line: none;
1605
- transition-property: all;
1606
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1607
- transition-duration: 200ms;
1608
- }
1609
-
1610
- .dg-hero__announcement:hover {
1611
- --tw-translate-y: -0.125rem;
1612
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1613
- border-color: var(--dg-primary, #13ef95);
1614
- background-color: rgba(19, 239, 149, 0.1);
1615
- box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
1616
- }
1617
-
1618
- .dg-hero__announcement-text {
1619
- --tw-text-opacity: 1;
1620
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1621
- white-space: nowrap;
1622
- font-size: 0.875rem;
1623
- line-height: 1.25rem;
1624
- font-weight: 400;
1625
- }
1626
-
1627
- @media (max-width: 640px) {
1628
- .dg-hero__announcement-text {
1629
- white-space: normal;
1630
- font-size: 0.75rem;
1631
- line-height: 1rem;
1632
- }
1633
- }
1634
-
1635
- .dg-hero__announcement-cta {
1636
- color: var(--dg-secondary, #149afb);
1637
- display: inline-flex;
1638
- align-items: center;
1639
- gap: 0.5rem;
1640
- font-size: 0.875rem;
1641
- line-height: 1.25rem;
1642
- font-weight: 600;
1643
- transition-property: gap;
1644
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1645
- transition-duration: 200ms;
1646
- }
1647
-
1648
- .dg-hero__announcement:hover .dg-hero__announcement-cta {
1649
- gap: 0.75rem;
1650
- }
1651
-
1652
- @media (max-width: 640px) {
1653
- .dg-hero__announcement-cta {
1654
- font-size: 0.75rem;
1655
- line-height: 1rem;
1656
- }
1657
- }
1658
-
1659
- /* Hero Body Text */
1660
-
1661
- .dg-hero__body {
1662
- --tw-text-opacity: 1;
1663
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
1664
- margin-left: auto;
1665
- margin-right: auto;
1666
- max-width: 53.125rem;
1667
- text-align: center;
1668
- font-size: 1.125rem;
1669
- font-weight: 400;
1670
- line-height: 1.75rem;
1671
- }
1672
-
1673
- @media (max-width: 768px) {
1674
- .dg-hero__body {
1675
- font-size: 1rem;
1676
- line-height: 1.5rem;
1677
- line-height: 1.625;
1678
- }
1679
- }
1680
-
1681
- @media (max-width: 640px) {
1682
- .dg-hero__body {
1683
- font-size: 0.9375rem;
1684
- line-height: 1.5;
1685
- }
1686
- }
1687
-
1688
- /* Hero Actions */
1689
-
1690
- .dg-hero__actions {
1691
- margin-top: 0.5rem;
1692
- display: flex;
1693
- flex-wrap: wrap;
1694
- align-items: center;
1695
- justify-content: center;
1696
- gap: 1rem;
1697
- }
1698
-
1699
- @media (max-width: 640px) {
1700
- .dg-hero__actions {
1701
- width: 100%;
1702
- flex-direction: column;
1703
- }
1704
-
1705
- .dg-hero__actions > * {
1706
- width: 100%;
1707
- }
1708
- }
1709
-
1710
- /* Section Heading */
1711
-
1712
- .dg-section-heading {
1713
- --tw-text-opacity: 1;
1714
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1715
- margin-bottom: 1.5rem;
1716
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
1717
- font-size: 1.5rem;
1718
- line-height: 2rem;
1719
- font-weight: 600;
1720
- display: flex;
1721
- flex-wrap: wrap;
1722
- align-items: baseline;
1723
- gap: 0.5rem;
1724
- }
1725
-
1726
- @media (max-width: 640px) {
1727
- .dg-section-heading {
1728
- margin-bottom: 0.75rem;
1729
- gap: 0.375rem;
1730
- font-size: 1.25rem;
1731
- line-height: 1.75rem;
1732
- }
1733
- }
1734
-
1735
- /* Small text within section heading */
1736
-
1737
- .dg-section-heading small {
1738
- --tw-text-opacity: 1;
1739
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1740
- font-size: 1rem;
1741
- line-height: 1.5rem;
1742
- font-weight: 400;
1743
- }
1744
-
1745
- @media (max-width: 640px) {
1746
- .dg-section-heading small {
1747
- font-size: 0.875rem;
1748
- line-height: 1.25rem;
1749
- }
1750
- }
1751
-
1752
- /* Page Heading */
1753
-
1754
- .dg-page-heading {
1755
- margin-bottom: 2rem;
1756
- }
1757
-
1758
- @media (max-width: 640px) {
1759
- .dg-page-heading {
1760
- margin-bottom: 1.5rem;
1761
- }
1762
- }
1763
-
1764
- .dg-page-heading__title {
1765
- --tw-text-opacity: 1;
1766
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1767
- margin-bottom: 0.5rem;
1768
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
1769
- font-size: 2.25rem;
1770
- line-height: 2.5rem;
1771
- font-weight: 600;
1772
- line-height: 1.25;
1773
- }
1774
-
1775
- @media (max-width: 768px) {
1776
- .dg-page-heading__title {
1777
- font-size: 1.875rem;
1778
- line-height: 2.25rem;
1779
- }
1780
- }
1781
-
1782
- @media (max-width: 640px) {
1783
- .dg-page-heading__title {
1784
- font-size: 1.5rem;
1785
- line-height: 2rem;
1786
- }
1787
- }
1788
-
1789
- .dg-page-heading__description {
1790
- --tw-text-opacity: 1;
1791
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1792
- margin: 0px;
1793
- max-width: 65ch;
1794
- font-size: 1.125rem;
1795
- line-height: 1.75rem;
1796
- line-height: 1.625;
1797
- }
1798
-
1799
- @media (max-width: 768px) {
1800
- .dg-page-heading__description {
1801
- font-size: 1rem;
1802
- line-height: 1.5rem;
1803
- }
1804
- }
1805
-
1806
- @media (max-width: 640px) {
1807
- .dg-page-heading__description {
1808
- font-size: 0.9375rem;
1809
- }
1810
- }
1811
-
1812
- /* Card Heading */
1813
-
1814
- .dg-card-heading {
1815
- --tw-text-opacity: 1;
1816
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1817
- margin-bottom: 0.75rem;
1818
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
1819
- font-size: 1.25rem;
1820
- line-height: 1.75rem;
1821
- font-weight: 500;
1822
- display: flex;
1823
- flex-wrap: wrap;
1824
- align-items: baseline;
1825
- gap: 0.375rem;
1826
- }
1827
-
1828
- /* Small text within card heading */
1829
-
1830
- .dg-card-heading small {
1831
- --tw-text-opacity: 1;
1832
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1833
- font-size: 0.875rem;
1834
- line-height: 1.25rem;
1835
- font-weight: 400;
1836
- }
1837
-
1838
- /* Item Title */
1839
-
1840
- .dg-item-title {
1841
- --tw-text-opacity: 1;
1842
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1843
- margin-bottom: 0.25rem;
1844
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
1845
- font-size: 1rem;
1846
- line-height: 1.5rem;
1847
- font-weight: 500;
1848
- display: flex;
1849
- flex-wrap: wrap;
1850
- align-items: baseline;
1851
- gap: 0.25rem;
1852
- }
1853
-
1854
- /* Small text within item title */
1855
-
1856
- .dg-item-title small {
1857
- --tw-text-opacity: 1;
1858
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1859
- font-size: 0.75rem;
1860
- line-height: 1rem;
1861
- font-weight: 400;
1862
- }
1863
-
1864
- /* Prose Text */
1865
-
1866
- .dg-prose {
1867
- --tw-text-opacity: 1;
1868
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
1869
- margin-bottom: 0.75rem;
1870
- width: 100%;
1871
- font-size: 0.875rem;
1872
- line-height: 1.25rem;
1873
- line-height: 1.375;
1874
- }
1875
-
1876
- @media (min-width: 640px) {
1877
- .dg-prose {
1878
- margin-bottom: 1rem;
1879
- max-width: 65ch;
1880
- font-size: 1rem;
1881
- line-height: 1.5rem;
1882
- }
1883
- }
1884
-
1885
- .dg-prose.dg-prose--block {
1886
- width: 100%;
1887
- max-width: none;
1888
- }
1889
-
1890
- .dg-prose--large {
1891
- font-size: 1rem;
1892
- line-height: 1.5rem;
1893
- }
1894
-
1895
- @media (min-width: 640px) {
1896
- .dg-prose--large {
1897
- font-size: 1.125rem;
1898
- line-height: 1.75rem;
1899
- }
1900
- }
1901
-
1902
- @media (min-width: 1024px) {
1903
- .dg-prose--large {
1904
- font-size: 1.25rem;
1905
- line-height: 1.75rem;
1906
- }
1907
- }
1908
-
1909
- .dg-prose--small {
1910
- --tw-text-opacity: 1;
1911
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1912
- font-size: 0.75rem;
1913
- line-height: 1rem;
1914
- }
1915
-
1916
- @media (min-width: 640px) {
1917
- .dg-prose--small {
1918
- font-size: 0.875rem;
1919
- line-height: 1.25rem;
1920
- }
1921
- }
1922
-
1923
- /* ==========================================================================
1924
- FORM COMPONENTS
1925
- ========================================================================== */
1926
-
1927
- /* Form Input Base Styles */
1928
-
1929
- .dg-input {
1930
- width: 100%;
1931
- border-radius: 0.25rem;
1932
- border-width: 1px;
1933
- --tw-border-opacity: 1;
1934
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
1935
- --tw-bg-opacity: 1;
1936
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
1937
- padding-left: 1rem;
1938
- padding-right: 1rem;
1939
- padding-top: 0.75rem;
1940
- padding-bottom: 0.75rem;
1941
- --tw-text-opacity: 1;
1942
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
1943
- font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
1944
- font-size: 0.875rem;
1945
- line-height: 1.25rem;
1946
- outline: 2px solid transparent;
1947
- outline-offset: 2px;
1948
- transition-property: all;
1949
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1950
- transition-duration: 300ms;
1951
- --tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
1952
- --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
1953
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1954
- height: 2.75rem;
1955
- }
1956
-
1957
- .dg-input::-moz-placeholder {
1958
- --tw-text-opacity: 1;
1959
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1960
- }
1961
-
1962
- .dg-input::placeholder {
1963
- --tw-text-opacity: 1;
1964
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
1965
- }
1966
-
1967
- .dg-input:focus {
1968
- border-color: var(--dg-primary, #13ef95);
1969
- box-shadow: 0 0 0 0.0625rem var(--dg-primary, #13ef95);
1970
- }
1971
-
1972
- .dg-input:disabled {
1973
- cursor: not-allowed;
1974
- opacity: 0.5;
1975
- }
1976
-
1977
- .dg-input--inline {
1978
- min-width: 12.5rem;
1979
- }
1980
-
1981
- .dg-input--full {
1982
- max-width: none;
1983
- }
1984
-
1985
- /* Select (dropdown) specific */
1986
-
1987
- .dg-input[type="select"],
1988
- select.dg-input {
1989
- -webkit-appearance: none;
1990
- -moz-appearance: none;
1991
- appearance: none;
1992
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
1993
- background-position: right 0.75rem center;
1994
- background-repeat: no-repeat;
1995
- background-size: 1.5em 1.5em;
1996
- padding-right: 2.5rem;
1997
- }
1998
-
1999
- /* Textarea */
2000
-
2001
- .dg-textarea {
2002
- width: 100%;
2003
- border-radius: 0.25rem;
2004
- border-width: 1px;
2005
- --tw-border-opacity: 1;
2006
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
2007
- --tw-bg-opacity: 1;
2008
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
2009
- padding-left: 1rem;
2010
- padding-right: 1rem;
2011
- padding-top: 0.75rem;
2012
- padding-bottom: 0.75rem;
2013
- --tw-text-opacity: 1;
2014
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2015
- font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
2016
- font-size: 0.875rem;
2017
- line-height: 1.25rem;
2018
- outline: 2px solid transparent;
2019
- outline-offset: 2px;
2020
- transition-property: all;
2021
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2022
- transition-duration: 300ms;
2023
- --tw-shadow: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
2024
- --tw-shadow-colored: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color);
2025
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2026
- height: 2.75rem;
2027
- }
2028
-
2029
- .dg-textarea::-moz-placeholder {
2030
- --tw-text-opacity: 1;
2031
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2032
- }
2033
-
2034
- .dg-textarea::placeholder {
2035
- --tw-text-opacity: 1;
2036
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2037
- }
2038
-
2039
- .dg-textarea:focus {
2040
- border-color: var(--dg-primary, #13ef95);
2041
- box-shadow: 0 0 0 0.0625rem var(--dg-primary, #13ef95);
2042
- }
2043
-
2044
- .dg-textarea:disabled {
2045
- cursor: not-allowed;
2046
- opacity: 0.5;
2047
- }
2048
-
2049
- .dg-textarea[type="select"],
2050
- select.dg-textarea {
2051
- -webkit-appearance: none;
2052
- -moz-appearance: none;
2053
- appearance: none;
2054
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
2055
- background-position: right 0.75rem center;
2056
- background-repeat: no-repeat;
2057
- background-size: 1.5em 1.5em;
2058
- padding-right: 2.5rem;
2059
- }
2060
-
2061
- .dg-form-field--error .dg-textarea {
2062
- --tw-border-opacity: 1;
2063
- border-color: rgb(240 68 56 / var(--tw-border-opacity, 1));
2064
- }
2065
-
2066
- .dg-form-field--success .dg-textarea {
2067
- --tw-border-opacity: 1;
2068
- border-color: rgb(18 183 106 / var(--tw-border-opacity, 1));
2069
- }
2070
-
2071
- .dg-textarea {
2072
- min-height: 6.25rem;
2073
- resize: vertical;
2074
- height: auto;
2075
- }
2076
-
2077
- /* Checkbox */
2078
-
2079
- .dg-checkbox {
2080
- height: 1.25rem;
2081
- width: 1.25rem;
2082
- -webkit-appearance: none;
2083
- -moz-appearance: none;
2084
- appearance: none;
2085
- border-radius: 0.25rem;
2086
- border-width: 1px;
2087
- --tw-border-opacity: 1;
2088
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
2089
- --tw-bg-opacity: 1;
2090
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
2091
- cursor: pointer;
2092
- transition-property: all;
2093
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2094
- transition-duration: 200ms;
2095
- flex-shrink: 0;
2096
- position: relative;
2097
- }
2098
-
2099
- .dg-checkbox:checked {
2100
- border-color: var(--dg-primary, #13ef95);
2101
- background-color: var(--dg-primary, #13ef95);
2102
- }
2103
-
2104
- .dg-checkbox:checked::after {
2105
- content: "";
2106
- position: absolute;
2107
- left: 0.375rem;
2108
- top: 0.125rem;
2109
- width: 0.3125rem;
2110
- height: 0.625rem;
2111
- border: solid black;
2112
- border-width: 0 0.125rem 0.125rem 0;
2113
- transform: rotate(45deg);
2114
- }
2115
-
2116
- .dg-checkbox:focus {
2117
- outline: 2px solid transparent;
2118
- outline-offset: 2px;
2119
- box-shadow: 0 0 0 0.125rem var(--dg-primary, #13ef95);
2120
- }
2121
-
2122
- /* Checkbox Label */
2123
-
2124
- .dg-checkbox-label {
2125
- --tw-text-opacity: 1;
2126
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2127
- display: flex;
2128
- cursor: pointer;
2129
- align-items: flex-start;
2130
- gap: 0.5rem;
2131
- font-size: 0.875rem;
2132
- line-height: 1.25rem;
2133
- }
2134
-
2135
- .dg-checkbox-label:hover .dg-checkbox {
2136
- --tw-border-opacity: 1;
2137
- border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
2138
- }
2139
-
2140
- /* Checkbox Description Container */
2141
-
2142
- .dg-checkbox-description {
2143
- display: flex;
2144
- flex-direction: column;
2145
- gap: 0.5rem;
2146
- }
2147
-
2148
- /* Checkbox Group Container */
2149
-
2150
- .dg-checkbox-group {
2151
- display: flex;
2152
- flex-direction: column;
2153
- gap: 0.75rem;
2154
- }
2155
-
2156
- /* Form Field */
2157
-
2158
- .dg-form-field {
2159
- margin-bottom: 1rem;
2160
- display: flex;
2161
- width: 100%;
2162
- flex-direction: column;
2163
- gap: 0.75rem;
2164
- }
2165
-
2166
- @media (min-width: 640px) {
2167
- .dg-form-field {
2168
- max-width: 28rem;
2169
- }
2170
- }
2171
-
2172
- .dg-form-field--full {
2173
- max-width: none;
2174
- }
2175
-
2176
- /* Form Field Error State */
2177
-
2178
- .dg-form-field--error .dg-input,
2179
- .dg-form-field--error .dg-textarea {
2180
- --tw-border-opacity: 1;
2181
- border-color: rgb(240 68 56 / var(--tw-border-opacity, 1));
2182
- }
2183
-
2184
- .dg-form-field--error .dg-form-helper {
2185
- --tw-text-opacity: 1;
2186
- color: rgb(240 68 56 / var(--tw-text-opacity, 1));
2187
- }
2188
-
2189
- /* Form Field Success State */
2190
-
2191
- .dg-form-field--success .dg-input,
2192
- .dg-form-field--success .dg-textarea {
2193
- --tw-border-opacity: 1;
2194
- border-color: rgb(18 183 106 / var(--tw-border-opacity, 1));
2195
- }
2196
-
2197
- .dg-form-field--success .dg-form-helper {
2198
- --tw-text-opacity: 1;
2199
- color: rgb(18 183 106 / var(--tw-text-opacity, 1));
2200
- }
2201
-
2202
- /* Form Label */
2203
-
2204
- .dg-form-label {
2205
- --tw-text-opacity: 1;
2206
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2207
- font-size: 0.875rem;
2208
- line-height: 1.25rem;
2209
- font-weight: 500;
2210
- }
2211
-
2212
- /* Form Error Message (deprecated - use dg-form-helper with dg-form-field--error) */
2213
-
2214
- .dg-form-error {
2215
- --tw-text-opacity: 1;
2216
- color: rgb(240 68 56 / var(--tw-text-opacity, 1));
2217
- display: block;
2218
- font-size: 0.75rem;
2219
- line-height: 1rem;
2220
- margin: 0;
2221
- }
2222
-
2223
- /* Form Helper Text */
2224
-
2225
- .dg-form-helper {
2226
- --tw-text-opacity: 1;
2227
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2228
- display: block;
2229
- font-size: 0.75rem;
2230
- line-height: 1rem;
2231
- margin: 0;
2232
- }
2233
-
2234
- /* File Upload / Drag & Drop Zone */
2235
-
2236
- .dg-drag-drop-zone {
2237
- position: relative;
2238
- border-radius: 0.5rem;
2239
- border-width: 2px;
2240
- border-style: dashed;
2241
- --tw-border-opacity: 1;
2242
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
2243
- --tw-bg-opacity: 1;
2244
- background-color: rgb(26 26 31 / var(--tw-bg-opacity, 1));
2245
- transition-property: all;
2246
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2247
- transition-duration: 200ms;
2248
- display: flex;
2249
- flex-direction: column;
2250
- align-items: center;
2251
- justify-content: center;
2252
- gap: 0.75rem;
2253
- cursor: pointer;
2254
- padding: 3rem 2rem;
2255
- min-height: 12.5rem;
2256
- }
2257
-
2258
- .dg-drag-drop-zone:hover {
2259
- --tw-border-opacity: 1;
2260
- border-color: rgb(148 148 152 / var(--tw-border-opacity, 1));
2261
- --tw-bg-opacity: 1;
2262
- background-color: rgb(11 11 12 / var(--tw-bg-opacity, 1));
2263
- }
2264
-
2265
- .dg-drag-drop-zone.drag-over {
2266
- border-color: var(--dg-primary, #13ef95);
2267
- background-color: rgba(0, 0, 0, 0.5);
2268
- }
2269
-
2270
- .dg-drag-drop-zone__input {
2271
- position: absolute;
2272
- inset: 0px;
2273
- height: 100%;
2274
- width: 100%;
2275
- cursor: pointer;
2276
- opacity: 0;
2277
- }
2278
-
2279
- .dg-drag-drop-zone__icon {
2280
- --tw-text-opacity: 1;
2281
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2282
- font-size: 3rem;
2283
- line-height: 1;
2284
- }
2285
-
2286
- .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
2287
- color: var(--dg-primary, #13ef95);
2288
- }
2289
-
2290
- .dg-drag-drop-zone__text {
2291
- --tw-text-opacity: 1;
2292
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2293
- font-size: 1rem;
2294
- line-height: 1.5rem;
2295
- font-weight: 500;
2296
- }
2297
-
2298
- .dg-drag-drop-zone__hint {
2299
- --tw-text-opacity: 1;
2300
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2301
- font-size: 0.875rem;
2302
- line-height: 1.25rem;
2303
- }
2304
-
2305
- /* ==========================================================================
2306
- STATUS & FEEDBACK COMPONENTS
2307
- ========================================================================== */
2308
-
2309
- /* Status Banner */
2310
-
2311
- .dg-status {
2312
- --tw-text-opacity: 1;
2313
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2314
- margin-top: 0.5rem;
2315
- margin-bottom: 0.5rem;
2316
- width: 100%;
2317
- padding-top: 0.25rem;
2318
- padding-bottom: 0.25rem;
2319
- font-size: 0.875rem;
2320
- line-height: 1.25rem;
2321
- font-style: italic;
2322
- line-height: 1.375;
2323
- }
2324
-
2325
- @media (min-width: 640px) {
2326
- .dg-status {
2327
- margin-top: 0.75rem;
2328
- margin-bottom: 0.75rem;
2329
- padding-top: 0.5rem;
2330
- padding-bottom: 0.5rem;
2331
- font-size: 1rem;
2332
- line-height: 1.5rem;
2333
- }
2334
- }
2335
-
2336
- .dg-status--info {
2337
- --tw-text-opacity: 1;
2338
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2339
- }
2340
-
2341
- .dg-status--success {
2342
- --tw-text-opacity: 1;
2343
- color: rgb(18 183 106 / var(--tw-text-opacity, 1));
2344
- }
2345
-
2346
- .dg-status--warning {
2347
- --tw-text-opacity: 1;
2348
- color: rgb(254 200 75 / var(--tw-text-opacity, 1));
2349
- }
2350
-
2351
- .dg-status--error {
2352
- --tw-text-opacity: 1;
2353
- color: rgb(240 68 56 / var(--tw-text-opacity, 1));
2354
- }
2355
-
2356
- .dg-status--primary {
2357
- color: var(--dg-primary, #13ef95);
2358
- }
2359
-
2360
- .dg-status--secondary {
2361
- color: var(--dg-secondary, #149afb);
2362
- }
2363
-
2364
- .dg-status--with-icon {
2365
- display: flex;
2366
- align-items: flex-start;
2367
- gap: 0.25rem;
2368
- }
2369
-
2370
- .dg-status--with-icon .dg-status__icon {
2371
- margin-top: 0.1em;
2372
- flex-shrink: 0;
2373
- font-size: 1em;
2374
- }
2375
-
2376
- .dg-status--compact {
2377
- margin-top: 0.25rem;
2378
- margin-bottom: 0.25rem;
2379
- padding-top: 0.125rem;
2380
- padding-bottom: 0.125rem;
2381
- font-size: 0.75rem;
2382
- line-height: 1rem;
2383
- }
2384
-
2385
- @media (min-width: 640px) {
2386
- .dg-status--compact {
2387
- font-size: 0.875rem;
2388
- line-height: 1.25rem;
2389
- }
2390
- }
2391
-
2392
- /* Spinner */
2393
-
2394
- .dg-spinner {
2395
- width: 2.5rem;
2396
- height: 2.5rem;
2397
- border-radius: 9999px;
2398
- border-width: 3px;
2399
- --tw-border-opacity: 1;
2400
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
2401
- border-top-color: var(--dg-primary, #13ef95);
2402
- margin-left: auto;
2403
- margin-right: auto;
2404
- margin-bottom: 0.75rem;
2405
- }
2406
-
2407
- @keyframes spin {
2408
- to {
2409
- transform: rotate(360deg);
2410
- }
2411
- }
2412
-
2413
- .dg-spinner {
2414
- animation: spin 1s linear infinite;
2415
- }
2416
-
2417
- @keyframes dg-spin {
2418
- 0% {
2419
- transform: rotate(0deg);
2420
- }
2421
-
2422
- 100% {
2423
- transform: rotate(360deg);
2424
- }
2425
- }
2426
-
2427
- /* Processing Title */
2428
-
2429
- .dg-processing-title {
2430
- --tw-text-opacity: 1;
2431
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2432
- margin-bottom: 0.25rem;
2433
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
2434
- font-size: 1.25rem;
2435
- line-height: 1.75rem;
2436
- font-weight: 500;
2437
- }
2438
-
2439
- /* Modal Overlay */
2440
-
2441
- .dg-modal-overlay {
2442
- position: fixed;
2443
- inset: 0px;
2444
- z-index: 50;
2445
- display: none;
2446
- align-items: center;
2447
- justify-content: center;
2448
- background-color: rgb(0 0 0 / 0.8);
2449
- }
2450
-
2451
- .dg-modal-overlay.visible,
2452
- .dg-modal-overlay--visible {
2453
- display: flex;
2454
- }
2455
-
2456
- .dg-modal-content {
2457
- margin: 0.75rem;
2458
- max-width: 25rem;
2459
- text-align: center;
2460
- }
2461
-
2462
- /* ==========================================================================
2463
- UTILITY COMPONENTS
2464
- ========================================================================== */
2465
-
2466
- /* Constrained Width Container */
2467
-
2468
- .dg-constrain-width {
2469
- width: 100%;
2470
- }
2471
-
2472
- @media (min-width: 640px) {
2473
- .dg-constrain-width {
2474
- margin-left: auto;
2475
- margin-right: auto;
2476
- max-width: 70rem;
2477
- }
2478
- }
2479
-
2480
- /* Center Horizontally - Complements dg-constrain-width */
2481
-
2482
- .dg-center-h {
2483
- margin-left: auto;
2484
- margin-right: auto;
2485
- }
2486
-
2487
- /* Responsive Grid */
2488
-
2489
- .dg-grid-mobile-stack {
2490
- display: flex;
2491
- flex-direction: column;
2492
- gap: 1rem;
2493
- }
2494
-
2495
- @media (min-width: 640px) {
2496
- .dg-grid-mobile-stack {
2497
- flex-direction: row;
2498
- gap: 1rem;
2499
- }
2500
- }
2501
-
2502
- .dg-grid-mobile-stack > * {
2503
- flex: 1 1 0%;
2504
- }
2505
-
2506
- /* Action Group */
2507
-
2508
- .dg-action-group {
2509
- display: flex;
2510
- flex-wrap: wrap;
2511
- justify-content: center;
2512
- gap: 1rem;
2513
- }
2514
-
2515
- @media (max-width: 640px) {
2516
- .dg-action-group {
2517
- flex-direction: column;
2518
- align-items: stretch;
2519
- }
2520
-
2521
- .dg-action-group .dg-btn {
2522
- width: 100%;
2523
- }
2524
- }
2525
-
2526
- /* Header */
2527
-
2528
- .dg-header {
2529
- width: 100%;
2530
- background: #050506;
2531
- /* dg-almost-black */
2532
- padding: 1rem 1.5rem;
2533
- border-bottom: 1px solid rgba(255, 255, 255, 0.1);
2534
- }
2535
-
2536
- .dg-header__container {
2537
- margin-left: auto;
2538
- margin-right: auto;
2539
- display: flex;
2540
- max-width: 1536px;
2541
- align-items: center;
2542
- justify-content: space-between;
2543
- }
2544
-
2545
- .dg-header__logo {
2546
- display: flex;
2547
- align-items: center;
2548
- gap: 0.75rem;
2549
- }
2550
-
2551
- .dg-header__logo-image {
2552
- height: 2rem;
2553
- width: auto;
2554
- }
2555
-
2556
- .dg-header__logo-text {
2557
- --tw-text-opacity: 1;
2558
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2559
- font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
2560
- font-size: 1.25rem;
2561
- line-height: 1.75rem;
2562
- font-weight: 700;
2563
- }
2564
-
2565
- .dg-header__nav {
2566
- display: flex;
2567
- align-items: center;
2568
- gap: 1rem;
2569
- }
2570
-
2571
- .dg-header__profile-link {
2572
- margin: -0.375rem;
2573
- display: block;
2574
- padding: 0.375rem;
2575
- }
2576
-
2577
- .dg-header__profile-avatar {
2578
- width: 2rem;
2579
- height: 2rem;
2580
- border-radius: 9999px;
2581
- --tw-bg-opacity: 1;
2582
- background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
2583
- outline-style: solid;
2584
- outline-offset: -1px;
2585
- outline-color: rgb(255 255 255 / 0.1);
2586
- }
2587
-
2588
- @media (max-width: 768px) {
2589
- .dg-header {
2590
- padding: 0.75rem 1rem;
2591
- }
2592
-
2593
- .dg-header__logo-text {
2594
- font-size: 1.125rem;
2595
- line-height: 1.75rem;
2596
- }
2597
- }
2598
-
2599
- /* Footer */
2600
-
2601
- .dg-footer {
2602
- margin-top: 4rem;
2603
- border-top-width: 1px;
2604
- --tw-border-opacity: 1;
2605
- border-color: rgb(78 78 82 / var(--tw-border-opacity, 1));
2606
- text-align: center;
2607
- }
2608
-
2609
- /* Text Center Utility */
2610
-
2611
- .dg-text-center {
2612
- text-align: center;
2613
- }
2614
-
2615
- /* Text Color Utilities */
2616
-
2617
- .dg-text-danger {
2618
- --tw-text-opacity: 1;
2619
- color: rgb(240 68 56 / var(--tw-text-opacity, 1));
2620
- }
2621
-
2622
- .dg-text-success {
2623
- --tw-text-opacity: 1;
2624
- color: rgb(18 183 106 / var(--tw-text-opacity, 1));
2625
- }
2626
-
2627
- .dg-text-warning {
2628
- --tw-text-opacity: 1;
2629
- color: rgb(254 200 75 / var(--tw-text-opacity, 1));
2630
- }
2631
-
2632
- .dg-text-primary {
2633
- color: var(--dg-primary, #13ef95);
2634
- }
2635
-
2636
- .dg-text-secondary {
2637
- color: var(--dg-secondary, #149afb);
2638
- }
2639
-
2640
- .dg-text-muted {
2641
- --tw-text-opacity: 1;
2642
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2643
- }
2644
-
2645
- .dg-text-fog {
2646
- --tw-text-opacity: 1;
2647
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2648
- }
2649
-
2650
- .dg-text-white {
2651
- --tw-text-opacity: 1;
2652
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2653
- }
2654
-
2655
- /* Newsletter Layout */
2656
-
2657
- .dg-newsletter-container {
2658
- display: flex;
2659
- flex-direction: column;
2660
- gap: 1rem;
2661
- }
2662
-
2663
- .dg-newsletter-container--compact {
2664
- display: flex;
2665
- flex-direction: column;
2666
- gap: 0.75rem;
2667
- }
2668
-
2669
- .dg-newsletter-form {
2670
- display: flex;
2671
- flex-direction: column;
2672
- gap: 1rem;
2673
- }
2674
-
2675
- .dg-newsletter-form--compact {
2676
- display: flex;
2677
- flex-direction: column;
2678
- gap: 0.75rem;
2679
- }
2680
-
2681
- .dg-newsletter-form--inline {
2682
- display: flex;
2683
- width: 100%;
2684
- gap: 0.5rem;
2685
- }
2686
-
2687
- @media (min-width: 640px) {
2688
- .dg-newsletter-form--inline {
2689
- width: auto;
2690
- }
2691
- }
2692
-
2693
- .dg-newsletter-header {
2694
- display: flex;
2695
- flex-direction: column;
2696
- align-items: flex-start;
2697
- gap: 0.75rem;
2698
- }
2699
-
2700
- @media (min-width: 640px) {
2701
- .dg-newsletter-header {
2702
- flex-direction: row;
2703
- align-items: center;
2704
- }
2705
- }
2706
-
2707
- .dg-newsletter-header__content {
2708
- flex: 1 1 0%;
2709
- }
2710
-
2711
- .dg-newsletter-header__actions {
2712
- width: 100%;
2713
- }
2714
-
2715
- @media (min-width: 640px) {
2716
- .dg-newsletter-header__actions {
2717
- width: auto;
2718
- }
2719
- }
2720
-
2721
- /* Logo Container */
2722
-
2723
- .dg-logo-container {
2724
- display: flex;
2725
- justify-content: center;
2726
- }
2727
-
2728
- .dg-logo {
2729
- height: 2rem;
2730
- width: auto;
2731
- }
2732
-
2733
- /* Social Links Container */
2734
-
2735
- .dg-social-links {
2736
- display: flex;
2737
- justify-content: center;
2738
- gap: 1rem;
2739
- }
2740
-
2741
- /* Typography Utilities */
2742
-
2743
- .dg-text-tagline {
2744
- --tw-text-opacity: 1;
2745
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2746
- text-align: center;
2747
- font-size: 0.875rem;
2748
- line-height: 1.25rem;
2749
- }
2750
-
2751
- .dg-text-subtitle {
2752
- --tw-text-opacity: 1;
2753
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2754
- font-size: 0.875rem;
2755
- line-height: 1.25rem;
2756
- }
2757
-
2758
- .dg-text-heading {
2759
- --tw-text-opacity: 1;
2760
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2761
- font-size: 1rem;
2762
- line-height: 1.5rem;
2763
- font-weight: 500;
2764
- }
2765
-
2766
- .dg-text-heading--with-margin {
2767
- --tw-text-opacity: 1;
2768
- color: rgb(255 255 255 / var(--tw-text-opacity, 1));
2769
- margin-bottom: 0.25rem;
2770
- font-size: 1rem;
2771
- line-height: 1.5rem;
2772
- font-weight: 500;
2773
- }
2774
-
2775
- .dg-text-legal {
2776
- --tw-text-opacity: 1;
2777
- color: rgb(148 148 152 / var(--tw-text-opacity, 1));
2778
- text-align: center;
2779
- font-size: 0.75rem;
2780
- line-height: 1rem;
2781
- }
2782
-
2783
- /* ==========================================================================
2784
- MULTI-COLUMN LAYOUT COMPONENTS
2785
-
2786
- Responsive collapse pattern:
2787
- - Mobile (< 768px): All columns stacked vertically
2788
- - Tablet (768px+): Right sidebar moves to side, left stacked on top
2789
- - Desktop (1024px+): All three columns side-by-side
2790
- ========================================================================== */
2791
-
2792
- /* Column Container - parent wrapper for all columns */
2793
-
2794
- .dg-columns {
2795
- display: flex;
2796
- width: 100%;
2797
- flex-direction: column;
2798
- }
2799
-
2800
- /* At tablet: show right sidebar on the side */
2801
-
2802
- @media (min-width: 768px) {
2803
- .dg-columns {
2804
- flex-direction: row;
2805
- }
2806
- }
2807
-
2808
- /* Column Wrapper - groups left sidebar and main content together */
2809
-
2810
- .dg-columns__wrapper {
2811
- display: flex;
2812
- min-width: 0px;
2813
- flex: 1 1 0%;
2814
- flex-direction: column;
2815
- }
2816
-
2817
- /* At desktop: show left sidebar on the side */
2818
-
2819
- @media (min-width: 1024px) {
2820
- .dg-columns__wrapper {
2821
- flex-direction: row;
2822
- }
2823
- }
2824
-
2825
- /* Base Column - padding for all columns */
2826
-
2827
- .dg-column {
2828
- min-width: 0px;
2829
- padding-left: 1rem;
2830
- padding-right: 1rem;
2831
- padding-top: 1.5rem;
2832
- padding-bottom: 1.5rem;
2833
- }
2834
-
2835
- @media (min-width: 640px) {
2836
- .dg-column {
2837
- padding-left: 1.5rem;
2838
- padding-right: 1.5rem;
2839
- }
2840
- }
2841
-
2842
- /* Main Content Column - always fills available space */
2843
-
2844
- .dg-column--main {
2845
- flex: 1 1 0%;
2846
- }
2847
-
2848
- /* Left Sidebar - fixed width on desktop, full width on mobile/tablet */
2849
-
2850
- .dg-column--sidebar-left {
2851
- /* Layout only - no colors */
2852
- }
2853
-
2854
- @media (min-width: 1024px) {
2855
- .dg-column--sidebar-left {
2856
- width: 12rem;
2857
- flex-shrink: 0;
2858
- }
2859
-
2860
- .dg-column--sidebar-left.dg-column--sm {
2861
- width: 16rem;
2862
- flex-shrink: 0;
2863
- }
2864
-
2865
- .dg-column--sidebar-left.dg-column--lg {
2866
- width: 24rem;
2867
- flex-shrink: 0;
2868
- }
2869
-
2870
- .dg-column--sidebar-left.dg-column--xl {
2871
- width: 32rem;
2872
- flex-shrink: 0;
2873
- }
2874
- }
2875
-
2876
- /* Right Sidebar - fixed width on tablet+, full width on mobile */
2877
-
2878
- .dg-column--sidebar-right {
2879
- /* Layout only - no colors */
2880
- position: relative;
2881
- }
2882
-
2883
- /* Between 768px and 1280px: Floating sidebar with toggle */
2884
-
2885
- @media (min-width: 768px) and (max-width: 1279px) {
2886
- .dg-column--sidebar-right {
2887
- position: fixed;
2888
- top: 65px;
2889
- /* Account for header height */
2890
- right: 0;
2891
- height: calc(100vh - 65px);
2892
- width: 16rem;
2893
- flex-shrink: 0;
2894
- transition: transform 300ms ease;
2895
- z-index: 20;
2896
- box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
2897
- }
2898
-
2899
- .dg-column--sidebar-right.dg-column--sm {
2900
- width: 20rem;
2901
- }
2902
-
2903
- .dg-column--sidebar-right.dg-column--lg {
2904
- width: 24rem;
2905
- }
2906
-
2907
- .dg-column--sidebar-right.dg-column--xl {
2908
- width: 32rem;
2909
- }
2910
-
2911
- /* Collapsed state - slide mostly off screen but leave button visible */
2912
-
2913
- .dg-column--sidebar-right.collapsed {
2914
- transform: translateX(calc(100% - 2rem));
2915
- }
2916
- }
2917
-
2918
- /* Above 1280px: Normal sidebar behavior */
2919
-
2920
- @media (min-width: 1280px) {
2921
- .dg-column--sidebar-right {
2922
- width: 16rem;
2923
- flex-shrink: 0;
2924
- }
2925
-
2926
- .dg-column--sidebar-right.dg-column--sm {
2927
- width: 20rem;
2928
- flex-shrink: 0;
2929
- }
2930
-
2931
- .dg-column--sidebar-right.dg-column--lg {
2932
- width: 24rem;
2933
- flex-shrink: 0;
2934
- }
2935
-
2936
- .dg-column--sidebar-right.dg-column--xl {
2937
- width: 32rem;
2938
- flex-shrink: 0;
2939
- }
2940
- }
2941
-
2942
- /* ==========================================================================
2943
- LINK COMPONENTS
2944
- ========================================================================== */
2945
-
2946
- /* Primary Link with hover effect */
2947
-
2948
- .dg-link {
2949
- color: var(--dg-primary, #13ef95);
2950
- transition-property: opacity;
2951
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2952
- transition-duration: 200ms;
2953
- }
2954
-
2955
- .dg-link:hover {
2956
- opacity: 0.8;
2957
- }
2958
-
2959
- /* Social Icon Link */
2960
-
2961
- .dg-social-link {
2962
- --tw-text-opacity: 1;
2963
- color: rgb(237 237 226 / var(--tw-text-opacity, 1));
2964
- font-size: 1.25rem;
2965
- line-height: 1.75rem;
2966
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2967
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2968
- transition-duration: 200ms;
2969
- }
2970
-
2971
- .dg-social-link:hover {
2972
- color: var(--dg-primary, #13ef95);
2973
- }
2974
-
2975
- .dg-gradient-border {
2976
- background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
2977
- background-origin: padding-box, border-box;
2978
- background-clip: padding-box, border-box;
2979
- background-repeat: no-repeat;
2980
- background-position: center;
2981
- background-size: 100% 100%;
2982
- background-color: rgb(0, 0, 0);
2983
- }
2984
-
2985
- .dg-bg-reset {
2986
- background-image: none;
2987
- background-origin: padding-box;
2988
- background-clip: border-box;
2989
- background-repeat: repeat;
2990
- background-position: 0% 0%;
2991
- background-size: auto;
2992
- }
2993
-
2994
- .dg-glow-cyan-green {
2995
- box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0, color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
2996
- }
2997
-
2998
- .dg-shadow-subtle {
2999
- box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
3000
- }
3001
-
3002
- /* ==========================================================================
3003
- COMPONENTS LAYER - Reusable UI Components
3004
- Base styles (html, body, headings, etc.) are defined in tailwind.config.js
3005
- ========================================================================== */
3
+ /*! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--dg-base-font-size:16px;--dg-border-width:0.125rem;--dg-primary:#13ef95;--dg-secondary:#149afb}html{font-size:var(--dg-base-font-size,16px);scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0b0b0c;color:#fbfbff;line-height:1.5}h1,h2,h3,h4,h5,h6{font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:700}h1{font-size:2.25rem}@media (min-width:768px){h1{font-size:3rem}}h2{font-size:1.875rem}@media (min-width:768px){h2{font-size:2.25rem}}h3{font-size:1.5rem}@media (min-width:768px){h3{font-size:1.875rem}}h4{font-size:1.25rem}@media (min-width:768px){h4{font-size:1.5rem}}code,pre{font-family:Fira Code,Monaco,Consolas,Courier New,monospace}a{color:var(--dg-primary,#13ef95);transition-property:color;transition-duration:.2s}a:hover{opacity:.8}.dg-btn{display:inline-flex;align-items:center;justify-content:center;padding:.375rem 1.25rem;line-height:2;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5rem;font-weight:600;white-space:nowrap;border-radius:.25rem;text-transform:capitalize;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-fit-content;width:fit-content;outline:2px solid transparent;outline-offset:2px}.dg-btn:disabled{cursor:not-allowed;opacity:.5}.dg-btn{gap:.5rem;height:3rem}.dg-btn--sm{padding:.5rem 1.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700;height:2.25rem}.dg-btn--primary{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));position:relative;border-width:1px;border-color:transparent;background-image:linear-gradient(#000,#000),linear-gradient(90deg,color-mix(in srgb,var(--dg-secondary,#149afb) 70%,#000),color-mix(in srgb,var(--dg-primary,#13ef95) 70%,#000),color-mix(in srgb,var(--dg-secondary,#149afb) 70%,#000),color-mix(in srgb,var(--dg-primary,#13ef95) 70%,#000));background-origin:padding-box,border-box;background-clip:padding-box,border-box;background-repeat:no-repeat;background-position:50%;background-size:100% 100%;background-color:#000;box-shadow:color-mix(in srgb,var(--dg-primary,#13ef95) 20%,transparent) .375rem 0 .9375rem 0,color-mix(in srgb,var(--dg-secondary,#149afb) 20%,transparent) -.375rem 0 .9375rem 0}.dg-btn--primary:hover{border-color:transparent;--tw-text-opacity:1;background-image:none;background-origin:padding-box;background-clip:border-box;background-repeat:repeat;background-position:0 0;background-size:auto;box-shadow:0 .0625rem .125rem rgba(38,44,52,.05)}.dg-btn--primary:hover,.dg-btn--secondary{color:rgb(0 0 0/var(--tw-text-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.dg-btn--secondary{border-width:1px;border-color:transparent;--tw-text-opacity:1}.dg-btn--secondary:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));border-width:1px;--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.dg-btn--ghost{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));border-width:1px;--tw-border-opacity:1;border-color:rgb(148 148 152/var(--tw-border-opacity,1));background-color:transparent}.dg-btn--ghost:hover{border-color:transparent;--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));background-image:none;background-origin:padding-box;background-clip:border-box;background-repeat:repeat;background-position:0 0;background-size:auto;box-shadow:0 .0625rem .125rem rgba(38,44,52,.05)}.dg-btn--danger-ghost{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));border-width:1px;--tw-border-opacity:1;border-color:rgb(240 68 56/var(--tw-border-opacity,1));background-color:transparent}.dg-btn--danger-ghost:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));border-color:transparent;--tw-bg-opacity:1;background-color:rgb(240 68 56/var(--tw-bg-opacity,1))}.dg-btn--icon-only{width:3rem;height:3rem;padding-left:.5rem;padding-right:.5rem}.dg-btn--icon-only.dg-btn--sm{width:1.5rem;height:1.5rem}.dg-btn--collapse{display:inline-flex}@media (max-width:768px){.dg-btn--collapse{width:100%;justify-content:center}}.dg-btn i,.dg-btn svg{flex-shrink:0}.dg-section{width:100%;padding:.75rem;margin-bottom:1rem}@media (min-width:640px){.dg-section{padding:1.25rem 1rem;margin-bottom:1.5rem}}@media (min-width:1024px){.dg-section{padding:2rem 1.5rem;margin-bottom:2rem}}.dg-section--compact{padding:.5rem;margin-bottom:.5rem}@media (min-width:640px){.dg-section--compact{padding:.75rem;margin-bottom:.75rem}}.dg-section--spacious{padding:1.5rem .75rem;margin-bottom:2rem}@media (min-width:640px){.dg-section--spacious{padding:2rem 1.5rem;margin-bottom:2.5rem}}.dg-section--bordered,.dg-section--elevated{border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 31/var(--tw-bg-opacity,1))}.dg-section--elevated{--tw-shadow:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1),0 0.125rem 0.25rem -0.0625rem rgba(0,0,0,.06);--tw-shadow-colored:0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color),0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.dg-section--fieldset{position:relative;border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));padding-top:2rem}@media (min-width:640px){.dg-section--fieldset{padding-top:2.5rem}}.dg-section--fieldset .dg-section-heading{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));position:absolute;--tw-bg-opacity:1;background-color:rgb(11 11 12/var(--tw-bg-opacity,1));font-weight:600;text-transform:uppercase;letter-spacing:.025em;margin:0;padding-left:.5rem;padding-right:.5rem;font-size:1rem;line-height:1.5rem;top:-.75rem;left:1rem}@media (min-width:640px){.dg-section--fieldset .dg-section-heading{font-size:1.125rem}}.dg-card{display:flex;width:100%;flex-direction:column;border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 31/var(--tw-bg-opacity,1));margin-bottom:.75rem;padding:.75rem;--tw-shadow:0 0.0625rem 0.125rem 0 rgba(0,0,0,.05);--tw-shadow-colored:0 0.0625rem 0.125rem 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}@media (min-width:640px){.dg-card{margin-bottom:1rem;padding:1rem}}@media (min-width:1024px){.dg-card{padding:1.5rem}}.dg-card:hover{--tw-shadow:0 0.25rem 0.375rem -0.0625rem rgba(0,0,0,.1),0 0.125rem 0.25rem -0.0625rem rgba(0,0,0,.06);--tw-shadow-colored:0 0.25rem 0.375rem -0.0625rem var(--tw-shadow-color),0 0.125rem 0.25rem -0.0625rem var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.dg-card--compact{padding:.5rem}@media (min-width:640px){.dg-card--compact{padding:.75rem}}.dg-card--spacious{padding:1rem}@media (min-width:640px){.dg-card--spacious{padding:1.5rem}}@media (min-width:1024px){.dg-card--spacious{padding:2rem}}.dg-card--bordered{border-width:2px;--tw-border-opacity:1;border-color:rgb(148 148 152/var(--tw-border-opacity,1))}.dg-card--structured{justify-content:space-between;padding:0}.dg-card--selectable{cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;border-width:2px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));padding:1.25rem}.dg-card--selectable:hover{--tw-border-opacity:1;border-color:rgb(148 148 152/var(--tw-border-opacity,1))}.dg-card--selectable:has(input[type=radio]:checked){border-color:var(--dg-primary,#13ef95);background:rgba(19,239,149,.05)}.dg-card--selectable input[type=radio],.dg-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.dg-card--selectable__indicator{display:none}.dg-card--selectable__icon{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-right:.5rem}.dg-card--selectable__content{display:flex;flex:1 1 0%;flex-direction:column;gap:.25rem}@media (max-width:767px){.dg-card--selectable__content{flex-direction:row;align-items:center;gap:.75rem}}.dg-card--selectable .dg-item-title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem;font-weight:600;display:flex;align-items:center}@media (max-width:767px){.dg-card--selectable .dg-item-title{margin-bottom:0;flex-shrink:0}}@media (min-width:768px){.dg-card--selectable .dg-item-title{margin-bottom:.25rem}}.dg-card--selectable .dg-prose{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}@media (max-width:767px){.dg-card--selectable .dg-prose{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.dg-card--file-upload{cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;border-width:2px;border-style:dashed;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));padding:1.25rem}.dg-card--file-upload:hover{--tw-border-opacity:1;border-color:rgb(148 148 152/var(--tw-border-opacity,1))}.dg-card--file-upload:has(input[type=checkbox]:checked){border-style:solid;border-color:var(--dg-primary,#13ef95);background:rgba(19,239,149,.05)}.dg-card--file-upload input[type=checkbox],.dg-card--file-upload input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.dg-card--file-upload__icon{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-right:.5rem}.dg-card--file-upload__content{display:flex;flex:1 1 0%;flex-direction:column;gap:.25rem}@media (max-width:767px){.dg-card--file-upload__content{flex-direction:row;align-items:center;gap:.75rem}}.dg-card--file-upload .dg-item-title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem;font-weight:600;display:flex;align-items:center}@media (max-width:767px){.dg-card--file-upload .dg-item-title{margin-bottom:0;flex-shrink:0}}@media (min-width:768px){.dg-card--file-upload .dg-item-title{margin-bottom:.25rem}}.dg-card--file-upload .dg-prose{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}@media (max-width:767px){.dg-card--file-upload .dg-prose{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.dg-card__image{width:100%;flex-shrink:0;overflow:hidden;border-radius:.5rem .5rem 0 0}.dg-card__image img{display:block;height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.dg-card__image--small{height:7.5rem}.dg-card__image--medium{height:10rem}.dg-card__image--large{height:15rem}.dg-card__image--aspect-4-3{aspect-ratio:4/3;height:auto}.dg-card__icon{display:flex;align-items:center;padding:1.5rem .75rem .75rem}@media (min-width:640px){.dg-card__icon{padding:2rem 1rem 1rem}}@media (min-width:1024px){.dg-card__icon{padding:2.5rem 1.5rem 1.5rem}}.dg-card__icon i,.dg-card__icon svg{color:var(--dg-primary,#13ef95);font-size:3rem;line-height:1}.dg-card__icon--left{justify-content:flex-start}.dg-card__icon--center{justify-content:center}.dg-card__icon--right{justify-content:flex-end}.dg-card__header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem}@media (min-width:640px){.dg-card__header{padding:1rem}}@media (min-width:1024px){.dg-card__header{padding:1.5rem 1.5rem 0}}.dg-card__body{display:flex;flex:1 1 0%;flex-direction:column;gap:.75rem;padding:.75rem}@media (min-width:640px){.dg-card__body{padding:1rem}}@media (min-width:1024px){.dg-card__body{padding:0 1.5rem 1.5rem}}.dg-card__footer{margin-top:auto;display:flex;align-items:center;gap:.75rem;border-top-width:1px;border-color:transparent;padding:.75rem}@media (min-width:640px){.dg-card__footer{padding:1rem}}@media (min-width:1024px){.dg-card__footer{padding:1.5rem}}.dg-card__footer--bordered{border-top-color:rgb(78 78 82/var(--tw-border-opacity,1))}.dg-card__footer--bordered,.dg-code-block{--tw-border-opacity:1}.dg-code-block{width:100%;overflow:auto;border-radius:.5rem;border-width:1px;border-color:rgb(78 78 82/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 31/var(--tw-bg-opacity,1));margin-top:.75rem;margin-bottom:.75rem;max-height:12.5rem;padding:.5rem;-webkit-overflow-scrolling:touch}@media (min-width:640px){.dg-code-block{margin-top:1rem;margin-bottom:1rem;max-height:15.625rem;padding:.75rem}}@media (min-width:1024px){.dg-code-block{max-height:18.75rem}}.dg-code-block pre{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1));margin:0;white-space:pre-wrap;overflow-wrap:break-word;padding:0;font-family:Fira Code,Monaco,Consolas,Courier New,monospace;font-size:.75rem;line-height:1rem;line-height:1.3}@media (min-width:640px){.dg-code-block pre{font-size:.875rem;line-height:1.25rem}}.dg-code-block--compact{max-height:7.5rem;padding:.25rem}@media (min-width:640px){.dg-code-block--compact{max-height:9.375rem;padding:.5rem}}.dg-code-block--tall{max-height:18.75rem}@media (min-width:640px){.dg-code-block--tall{max-height:25rem}}@media (min-width:1024px){.dg-code-block--tall{max-height:31.25rem}}.dg-code-block--no-scroll{max-height:none;overflow:visible}.dg-hero-title{margin-bottom:1.5rem;text-align:center;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:3rem;font-weight:700;line-height:1.25;background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from:var(--dg-secondary,#149afb) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:var(--dg-primary,#13ef95) var(--tw-gradient-to-position);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em;font-feature-settings:"liga" 0,"dlig" 0,"hlig" 0,"ordn" 0,"ss09","kern";font-kerning:normal}@media (max-width:1024px){.dg-hero-title{font-size:2.25rem;line-height:2.5rem}}@media (max-width:768px){.dg-hero-title{font-size:1.875rem;line-height:2.25rem}}@media (max-width:640px){.dg-hero-title{font-size:1.5rem;line-height:2rem}}.dg-hero{width:100%;padding:4rem 1rem;text-align:center}@media (max-width:768px){.dg-hero{padding:3rem 1rem}}@media (max-width:640px){.dg-hero{padding:2rem 1rem}}.dg-hero__content{margin-left:auto;margin-right:auto;display:flex;max-width:53.125rem;flex-direction:column;gap:1.5rem}@media (max-width:768px){.dg-hero__content{gap:1.25rem}}.dg-hero__announcement{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;margin-left:auto;margin-right:auto;margin-bottom:.5rem;border-color:hsla(240,2%,59%,.3);background-color:rgba(0,0,0,.5);padding:.5rem 1.25rem;width:-moz-fit-content;width:fit-content;cursor:pointer;gap:.75rem;text-decoration-line:none;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.dg-hero__announcement:hover{--tw-translate-y:-0.125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));border-color:var(--dg-primary,#13ef95);background-color:rgba(19,239,149,.1);box-shadow:0 .25rem .75rem rgba(19,239,149,.15)}.dg-hero__announcement-text{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:400}@media (max-width:640px){.dg-hero__announcement-text{white-space:normal;font-size:.75rem;line-height:1rem}}.dg-hero__announcement-cta{color:var(--dg-secondary,#149afb);display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;transition-property:gap;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.dg-hero__announcement:hover .dg-hero__announcement-cta{gap:.75rem}@media (max-width:640px){.dg-hero__announcement-cta{font-size:.75rem;line-height:1rem}}.dg-hero__body{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1));margin-left:auto;margin-right:auto;max-width:53.125rem;text-align:center;font-size:1.125rem;font-weight:400;line-height:1.75rem}@media (max-width:768px){.dg-hero__body{font-size:1rem;line-height:1.5rem;line-height:1.625}}@media (max-width:640px){.dg-hero__body{font-size:.9375rem;line-height:1.5}}.dg-hero__actions{margin-top:.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}@media (max-width:640px){.dg-hero__actions{width:100%;flex-direction:column}.dg-hero__actions>*{width:100%}}.dg-section-heading{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-bottom:1.5rem;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1.5rem;line-height:2rem;font-weight:600;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}@media (max-width:640px){.dg-section-heading{margin-bottom:.75rem;gap:.375rem;font-size:1.25rem;line-height:1.75rem}}.dg-section-heading small{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem;font-weight:400}@media (max-width:640px){.dg-section-heading small{font-size:.875rem;line-height:1.25rem}}.dg-page-heading{margin-bottom:2rem}@media (max-width:640px){.dg-page-heading{margin-bottom:1.5rem}}.dg-page-heading__title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-bottom:.5rem;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:2.25rem;line-height:2.5rem;font-weight:600;line-height:1.25}@media (max-width:768px){.dg-page-heading__title{font-size:1.875rem;line-height:2.25rem}}@media (max-width:640px){.dg-page-heading__title{font-size:1.5rem;line-height:2rem}}.dg-page-heading__description{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));margin:0;max-width:65ch;font-size:1.125rem;line-height:1.75rem;line-height:1.625}@media (max-width:768px){.dg-page-heading__description{font-size:1rem;line-height:1.5rem}}@media (max-width:640px){.dg-page-heading__description{font-size:.9375rem}}.dg-card-heading{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-bottom:.75rem;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:500;display:flex;flex-wrap:wrap;align-items:baseline;gap:.375rem}.dg-card-heading small{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem;font-weight:400}.dg-item-title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-bottom:.25rem;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5rem;font-weight:500;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem}.dg-item-title small{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:.75rem;line-height:1rem;font-weight:400}.dg-prose{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1));margin-bottom:.75rem;width:100%;font-size:.875rem;line-height:1.25rem;line-height:1.375}@media (min-width:640px){.dg-prose{margin-bottom:1rem;max-width:65ch;font-size:1rem;line-height:1.5rem}}.dg-prose.dg-prose--block{width:100%;max-width:none}.dg-prose--large{font-size:1rem;line-height:1.5rem}@media (min-width:640px){.dg-prose--large{font-size:1.125rem;line-height:1.75rem}}@media (min-width:1024px){.dg-prose--large{font-size:1.25rem;line-height:1.75rem}}.dg-prose--small{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:.75rem;line-height:1rem}@media (min-width:640px){.dg-prose--small{font-size:.875rem;line-height:1.25rem}}.dg-input{width:100%;border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 31/var(--tw-bg-opacity,1));padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;--tw-shadow:0 0.0625rem 0.125rem 0 rgba(0,0,0,.05);--tw-shadow-colored:0 0.0625rem 0.125rem 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);height:2.75rem}.dg-input::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-input::placeholder{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-input:focus{border-color:var(--dg-primary,#13ef95);box-shadow:0 0 0 .0625rem var(--dg-primary,#13ef95)}.dg-input:disabled{cursor:not-allowed;opacity:.5}.dg-input--inline{min-width:12.5rem}.dg-input--full{max-width:none}.dg-input[type=select],select.dg-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.dg-textarea{width:100%;border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 31/var(--tw-bg-opacity,1));padding:.75rem 1rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;--tw-shadow:0 0.0625rem 0.125rem 0 rgba(0,0,0,.05);--tw-shadow-colored:0 0.0625rem 0.125rem 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);height:2.75rem}.dg-textarea::-moz-placeholder{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-textarea::placeholder{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-textarea:focus{border-color:var(--dg-primary,#13ef95);box-shadow:0 0 0 .0625rem var(--dg-primary,#13ef95)}.dg-textarea:disabled{cursor:not-allowed;opacity:.5}.dg-textarea[type=select],select.dg-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}.dg-form-field--error .dg-textarea{--tw-border-opacity:1;border-color:rgb(240 68 56/var(--tw-border-opacity,1))}.dg-form-field--success .dg-textarea{--tw-border-opacity:1;border-color:rgb(18 183 106/var(--tw-border-opacity,1))}.dg-textarea{min-height:6.25rem;resize:vertical;height:auto}.dg-checkbox{height:1.25rem;width:1.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(26 26 31/var(--tw-bg-opacity,1));cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;flex-shrink:0;position:relative}.dg-checkbox:checked{border-color:var(--dg-primary,#13ef95);background-color:var(--dg-primary,#13ef95)}.dg-checkbox:checked:after{content:"";position:absolute;left:.375rem;top:.125rem;width:.3125rem;height:.625rem;border:solid #000;border-width:0 .125rem .125rem 0;transform:rotate(45deg)}.dg-checkbox:focus{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 .125rem var(--dg-primary,#13ef95)}.dg-checkbox-label{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1));display:flex;cursor:pointer;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.25rem}.dg-checkbox-label:hover .dg-checkbox{--tw-border-opacity:1;border-color:rgb(148 148 152/var(--tw-border-opacity,1))}.dg-checkbox-description{display:flex;flex-direction:column;gap:.5rem}.dg-checkbox-group,.dg-form-field{display:flex;flex-direction:column;gap:.75rem}.dg-form-field{margin-bottom:1rem;width:100%}@media (min-width:640px){.dg-form-field{max-width:28rem}}.dg-form-field--full{max-width:none}.dg-form-field--error .dg-input,.dg-form-field--error .dg-textarea{--tw-border-opacity:1;border-color:rgb(240 68 56/var(--tw-border-opacity,1))}.dg-form-field--error .dg-form-helper{--tw-text-opacity:1;color:rgb(240 68 56/var(--tw-text-opacity,1))}.dg-form-field--success .dg-input,.dg-form-field--success .dg-textarea{--tw-border-opacity:1;border-color:rgb(18 183 106/var(--tw-border-opacity,1))}.dg-form-field--success .dg-form-helper{--tw-text-opacity:1;color:rgb(18 183 106/var(--tw-text-opacity,1))}.dg-form-label{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem;font-weight:500}.dg-form-error{color:rgb(240 68 56/var(--tw-text-opacity,1))}.dg-form-error,.dg-form-helper{--tw-text-opacity:1;display:block;font-size:.75rem;line-height:1rem;margin:0}.dg-form-helper{color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-drag-drop-zone{position:relative;border-radius:.5rem;border-width:2px;border-style:dashed;border-color:rgb(78 78 82/var(--tw-border-opacity,1));background-color:rgb(26 26 31/var(--tw-bg-opacity,1));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;cursor:pointer;padding:3rem 2rem;min-height:12.5rem}.dg-drag-drop-zone,.dg-drag-drop-zone:hover{--tw-border-opacity:1;--tw-bg-opacity:1}.dg-drag-drop-zone:hover{border-color:rgb(148 148 152/var(--tw-border-opacity,1));background-color:rgb(11 11 12/var(--tw-bg-opacity,1))}.dg-drag-drop-zone.drag-over{border-color:var(--dg-primary,#13ef95);background-color:rgba(0,0,0,.5)}.dg-drag-drop-zone__input{position:absolute;inset:0;height:100%;width:100%;cursor:pointer;opacity:0}.dg-drag-drop-zone__icon{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));font-size:3rem;line-height:1}.dg-drag-drop-zone:hover .dg-drag-drop-zone__icon{color:var(--dg-primary,#13ef95)}.dg-drag-drop-zone__text{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem;font-weight:500}.dg-drag-drop-zone__hint{color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-drag-drop-zone__hint,.dg-status{--tw-text-opacity:1;font-size:.875rem;line-height:1.25rem}.dg-status{color:rgb(237 237 226/var(--tw-text-opacity,1));margin-top:.5rem;margin-bottom:.5rem;width:100%;padding-top:.25rem;padding-bottom:.25rem;font-style:italic;line-height:1.375}@media (min-width:640px){.dg-status{margin-top:.75rem;margin-bottom:.75rem;padding-top:.5rem;padding-bottom:.5rem;font-size:1rem;line-height:1.5rem}}.dg-status--info{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1))}.dg-status--success{--tw-text-opacity:1;color:rgb(18 183 106/var(--tw-text-opacity,1))}.dg-status--warning{--tw-text-opacity:1;color:rgb(254 200 75/var(--tw-text-opacity,1))}.dg-status--error{--tw-text-opacity:1;color:rgb(240 68 56/var(--tw-text-opacity,1))}.dg-status--primary{color:var(--dg-primary,#13ef95)}.dg-status--secondary{color:var(--dg-secondary,#149afb)}.dg-status--with-icon{display:flex;align-items:flex-start;gap:.25rem}.dg-status--with-icon .dg-status__icon{margin-top:.1em;flex-shrink:0;font-size:1em}.dg-status--compact{margin-top:.25rem;margin-bottom:.25rem;padding-top:.125rem;padding-bottom:.125rem;font-size:.75rem;line-height:1rem}@media (min-width:640px){.dg-status--compact{font-size:.875rem;line-height:1.25rem}}.dg-spinner{width:2.5rem;height:2.5rem;border-radius:9999px;border-width:3px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1));border-top-color:var(--dg-primary,#13ef95);margin-left:auto;margin-right:auto;margin-bottom:.75rem}@keyframes spin{to{transform:rotate(1turn)}}.dg-spinner{animation:spin 1s linear infinite}@keyframes dg-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.dg-processing-title{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));margin-bottom:.25rem;font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:500}.dg-modal-overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background-color:rgba(0,0,0,.8)}.dg-modal-overlay--visible,.dg-modal-overlay.visible{display:flex}.dg-modal-content{margin:.75rem;max-width:25rem;text-align:center}.dg-constrain-width{width:100%}@media (min-width:640px){.dg-constrain-width{margin-left:auto;margin-right:auto;max-width:70rem}}.dg-center-h{margin-left:auto;margin-right:auto}.dg-grid-mobile-stack{display:flex;flex-direction:column;gap:1rem}@media (min-width:640px){.dg-grid-mobile-stack{flex-direction:row;gap:1rem}}.dg-grid-mobile-stack>*{flex:1 1 0%}.dg-action-group{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}@media (max-width:640px){.dg-action-group{flex-direction:column;align-items:stretch}.dg-action-group .dg-btn{width:100%}}.dg-header{width:100%;background:#050506;padding:1rem 1.5rem;border-bottom:1px solid hsla(0,0%,100%,.1)}.dg-header__container{margin-left:auto;margin-right:auto;display:flex;max-width:1536px;align-items:center;justify-content:space-between}.dg-header__logo{display:flex;align-items:center;gap:.75rem}.dg-header__logo-image{height:2rem;width:auto}.dg-header__logo-text{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-family:Noto Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1.25rem;line-height:1.75rem;font-weight:700}.dg-header__nav{display:flex;align-items:center;gap:1rem}.dg-header__profile-link{margin:-.375rem;display:block;padding:.375rem}.dg-header__profile-avatar{width:2rem;height:2rem;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1));outline-style:solid;outline-offset:-1px;outline-color:hsla(0,0%,100%,.1)}@media (max-width:768px){.dg-header{padding:.75rem 1rem}.dg-header__logo-text{font-size:1.125rem;line-height:1.75rem}}.dg-footer{margin-top:4rem;border-top-width:1px;--tw-border-opacity:1;border-color:rgb(78 78 82/var(--tw-border-opacity,1))}.dg-footer,.dg-text-center{text-align:center}.dg-text-danger{--tw-text-opacity:1;color:rgb(240 68 56/var(--tw-text-opacity,1))}.dg-text-success{--tw-text-opacity:1;color:rgb(18 183 106/var(--tw-text-opacity,1))}.dg-text-warning{--tw-text-opacity:1;color:rgb(254 200 75/var(--tw-text-opacity,1))}.dg-text-primary{color:var(--dg-primary,#13ef95)}.dg-text-secondary{color:var(--dg-secondary,#149afb)}.dg-text-muted{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1))}.dg-text-fog{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1))}.dg-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dg-newsletter-container{display:flex;flex-direction:column;gap:1rem}.dg-newsletter-container--compact{display:flex;flex-direction:column;gap:.75rem}.dg-newsletter-form{display:flex;flex-direction:column;gap:1rem}.dg-newsletter-form--compact{display:flex;flex-direction:column;gap:.75rem}.dg-newsletter-form--inline{display:flex;width:100%;gap:.5rem}@media (min-width:640px){.dg-newsletter-form--inline{width:auto}}.dg-newsletter-header{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}@media (min-width:640px){.dg-newsletter-header{flex-direction:row;align-items:center}}.dg-newsletter-header__content{flex:1 1 0%}.dg-newsletter-header__actions{width:100%}@media (min-width:640px){.dg-newsletter-header__actions{width:auto}}.dg-logo-container{display:flex;justify-content:center}.dg-logo{height:2rem;width:auto}.dg-social-links{display:flex;justify-content:center;gap:1rem}.dg-text-tagline{text-align:center}.dg-text-subtitle,.dg-text-tagline{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1));font-size:.875rem;line-height:1.25rem}.dg-text-heading,.dg-text-heading--with-margin{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1));font-size:1rem;line-height:1.5rem;font-weight:500}.dg-text-heading--with-margin{margin-bottom:.25rem}.dg-text-legal{--tw-text-opacity:1;color:rgb(148 148 152/var(--tw-text-opacity,1));text-align:center;font-size:.75rem;line-height:1rem}.dg-columns{display:flex;width:100%;flex-direction:column}@media (min-width:768px){.dg-columns{flex-direction:row}}.dg-columns__wrapper{display:flex;min-width:0;flex:1 1 0%;flex-direction:column}@media (min-width:1024px){.dg-columns__wrapper{flex-direction:row}}.dg-column{min-width:0;padding:1.5rem 1rem}@media (min-width:640px){.dg-column{padding-left:1.5rem;padding-right:1.5rem}}.dg-column--main{flex:1 1 0%}@media (min-width:1024px){.dg-column--sidebar-left{width:12rem;flex-shrink:0}.dg-column--sidebar-left.dg-column--sm{width:16rem;flex-shrink:0}.dg-column--sidebar-left.dg-column--lg{width:24rem;flex-shrink:0}.dg-column--sidebar-left.dg-column--xl{width:32rem;flex-shrink:0}}.dg-column--sidebar-right{position:relative}@media (min-width:768px) and (max-width:1279px){.dg-column--sidebar-right{position:fixed;top:65px;right:0;height:calc(100vh - 65px);width:16rem;flex-shrink:0;transition:transform .3s ease;z-index:20;box-shadow:-4px 0 16px rgba(0,0,0,.5)}.dg-column--sidebar-right.dg-column--sm{width:20rem}.dg-column--sidebar-right.dg-column--lg{width:24rem}.dg-column--sidebar-right.dg-column--xl{width:32rem}.dg-column--sidebar-right.collapsed{transform:translateX(calc(100% - 2rem))}}@media (min-width:1280px){.dg-column--sidebar-right{width:16rem;flex-shrink:0}.dg-column--sidebar-right.dg-column--sm{width:20rem;flex-shrink:0}.dg-column--sidebar-right.dg-column--lg{width:24rem;flex-shrink:0}.dg-column--sidebar-right.dg-column--xl{width:32rem;flex-shrink:0}}.dg-link{color:var(--dg-primary,#13ef95);transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.dg-link:hover{opacity:.8}.dg-social-link{--tw-text-opacity:1;color:rgb(237 237 226/var(--tw-text-opacity,1));font-size:1.25rem;line-height:1.75rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.dg-social-link:hover{color:var(--dg-primary,#13ef95)}.dg-gradient-border{background-image:linear-gradient(#000,#000),linear-gradient(90deg,color-mix(in srgb,var(--dg-secondary,#149afb) 70%,#000),color-mix(in srgb,var(--dg-primary,#13ef95) 70%,#000),color-mix(in srgb,var(--dg-secondary,#149afb) 70%,#000),color-mix(in srgb,var(--dg-primary,#13ef95) 70%,#000));background-origin:padding-box,border-box;background-clip:padding-box,border-box;background-repeat:no-repeat;background-position:50%;background-size:100% 100%;background-color:#000}.dg-bg-reset{background-image:none;background-origin:padding-box;background-clip:border-box;background-repeat:repeat;background-position:0 0;background-size:auto}.dg-glow-cyan-green{box-shadow:color-mix(in srgb,var(--dg-primary,#13ef95) 20%,transparent) .375rem 0 .9375rem 0,color-mix(in srgb,var(--dg-secondary,#149afb) 20%,transparent) -.375rem 0 .9375rem 0}.dg-shadow-subtle{box-shadow:0 .0625rem .125rem rgba(38,44,52,.05)}