@deepgram/styles 0.0.4 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/deepgram.css +3004 -2
  2. package/package.json +1 -1
package/dist/deepgram.css CHANGED
@@ -1,3 +1,3005 @@
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: }
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
+ */
2
16
 
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,var(--dg-secondary,#149afb),var(--dg-primary,#13ef95),var(--dg-secondary,#149afb),var(--dg-primary,#13ef95));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,var(--dg-secondary,#149afb),var(--dg-primary,#13ef95),var(--dg-secondary,#149afb),var(--dg-primary,#13ef95));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)}
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
+ ========================================================================== */