@deepgram/styles 0.2.10 → 0.2.12

package/dist/deepgram.expanded.css

@@ -10,13 +10,9 @@
     --color-indigo-600: oklch(51.1% 0.262 276.966);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
-    --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
-    --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
-    --breakpoint-2xl: 96rem;
-    --container-xs: 20rem;
     --container-md: 28rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -42,13 +38,12 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --tracking-tight: -0.025em;
-    --tracking-wide: 0.025em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
-    --leading-normal: 1.5;
     --leading-relaxed: 1.625;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -56,19 +51,22 @@
     --default-mono-font-family: var(--font-mono);
     --color-dg-primary: var(--dg-primary, #13ef95);
     --color-dg-secondary: var(--dg-secondary, #149afb);
-    --color-dg-background: #0b0b0c;
-    --color-dg-charcoal: #1a1a1f;
-    --color-dg-translucent: rgba(0, 0, 0, 0.5);
-    --color-dg-border: #2c2c33;
-    --color-dg-pebble: #4e4e52;
-    --color-dg-slate: #949498;
-    --color-dg-text: #fbfbff;
-    --color-dg-fog: #edede2;
-    --color-dg-platinum: #e1e1e5;
-    --color-dg-muted: #949498;
-    --color-dg-success: #12b76a;
-    --color-dg-warning: #fec84b;
-    --color-dg-danger: #f04438;
+    --color-dg-almost-black: light-dark(#f8f9fa, #050506);
+    --color-dg-background: light-dark(#ffffff, #0b0b0c);
+    --color-dg-charcoal: light-dark(#f3f4f6, #1a1a1f);
+    --color-dg-solid: light-dark(#000000, #ffffff);
+    --color-dg-translucent: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
+    --color-dg-border: light-dark(#d1d5db, #2c2c33);
+    --color-dg-pebble: light-dark(#9ca3af, #4e4e52);
+    --color-dg-slate: light-dark(#6b7280, #949498);
+    --color-dg-text: light-dark(#111827, #fbfbff);
+    --color-dg-fog: light-dark(#1f2937, #edede2);
+    --color-dg-platinum: light-dark(#374151, #e1e1e5);
+    --color-dg-muted: light-dark(#6b7280, #949498);
+    --color-dg-on-solid: light-dark(#ffffff, #000000);
+    --color-dg-success: light-dark(#15803d, #12b76a);
+    --color-dg-warning: light-dark(#a16207, #fec84b);
+    --color-dg-danger: light-dark(#b91c1c, #f04438);
     --font-dg-sans: "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
     --font-dg-noto: "Noto Sans", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
     --font-dg-mono: "Fira Code", "Monaco", "Consolas", "Courier New", monospace;
@@ -227,6 +225,9 @@
   .collapse {
     visibility: collapse;
   }
+  .invisible {
+    visibility: hidden;
+  }
   .visible {
     visibility: visible;
   }
@@ -259,15 +260,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .inset-y-0 {
-    inset-block: calc(var(--spacing) * 0);
-  }
-  .right-0 {
-    right: calc(var(--spacing) * 0);
-  }
-  .z-50 {
-    z-index: 50;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -286,18 +278,18 @@
       max-width: 96rem;
     }
   }
-  .-m-1\.5 {
-    margin: calc(var(--spacing) * -1.5);
+  .-m-2\.5 {
+    margin: calc(var(--spacing) * -2.5);
   }
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
-  .m-3 {
-    margin: calc(var(--spacing) * 3);
-  }
   .mx-auto {
     margin-inline: auto;
   }
+  .-my-1\.5 {
+    margin-block: calc(var(--spacing) * -1.5);
+  }
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
@@ -313,9 +305,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -328,8 +317,11 @@
   .mt-auto {
     margin-top: auto;
   }
-  .-mr-2 {
-    margin-right: calc(var(--spacing) * -2);
+  .-mr-1\.5 {
+    margin-right: calc(var(--spacing) * -1.5);
+  }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
   }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
@@ -349,9 +341,6 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-  .ml-3 {
-    margin-left: calc(var(--spacing) * 3);
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -373,9 +362,6 @@
   .inline {
     display: inline;
   }
-  .inline-block {
-    display: inline-block;
-  }
   .inline-flex {
     display: inline-flex;
   }
@@ -385,22 +371,10 @@
   .aspect-\[4\/3\] {
     aspect-ratio: 4/3;
   }
-  .size-2 {
-    width: calc(var(--spacing) * 2);
-    height: calc(var(--spacing) * 2);
-  }
-  .size-5 {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
-  .size-8 {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-  }
   .size-10 {
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
@@ -433,9 +407,6 @@
   .h-full {
     height: 100%;
   }
-  .max-h-60 {
-    max-height: calc(var(--spacing) * 60);
-  }
   .max-h-\[7\.5rem\] {
     max-height: 7.5rem;
   }
@@ -490,9 +461,6 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
-  .max-w-\[25rem\] {
-    max-width: 25rem;
-  }
   .max-w-\[53\.125rem\] {
     max-width: 53.125rem;
   }
@@ -508,12 +476,6 @@
   .max-w-none {
     max-width: none;
   }
-  .max-w-screen-2xl {
-    max-width: var(--breakpoint-2xl);
-  }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -538,8 +500,8 @@
   .grow {
     flex-grow: 1;
   }
-  .origin-top-right {
-    transform-origin: 100% 0;
+  .border-collapse {
+    border-collapse: collapse;
   }
   .-translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * -0.5);
@@ -584,9 +546,6 @@
   .items-start {
     align-items: flex-start;
   }
-  .items-stretch {
-    align-items: stretch;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -599,6 +558,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -614,27 +576,12 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .gap-5 {
-    gap: calc(var(--spacing) * 5);
-  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
   .overflow-auto {
     overflow: auto;
   }
@@ -656,9 +603,13 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
-  .rounded-r-md {
-    border-top-right-radius: var(--radius-md);
-    border-bottom-right-radius: var(--radius-md);
+  .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
   .border {
     border-style: var(--tw-border-style);
@@ -684,17 +635,13 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-l-4 {
+  .border-l-0 {
     border-left-style: var(--tw-border-style);
-    border-left-width: 4px;
+    border-left-width: 0px;
   }
   .border-dashed {
     --tw-border-style: dashed;
@@ -723,11 +670,14 @@
     border-color: var(--color-dg-slate);
   }
   .border-dg-slate\/30 {
-    border-color: color-mix(in srgb, #949498 30%, transparent);
+    border-color: color-mix(in srgb, light-dark(#6b7280, #949498) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-dg-slate) 30%, transparent);
     }
   }
+  .border-dg-solid {
+    border-color: var(--color-dg-solid);
+  }
   .border-dg-success {
     border-color: var(--color-dg-success);
   }
@@ -737,9 +687,6 @@
   .border-transparent {
     border-color: transparent;
   }
-  .border-white {
-    border-color: var(--color-white);
-  }
   .border-white\/10 {
     border-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -753,25 +700,16 @@
     border-top-color: var(--color-dg-primary);
   }
   .dg-gradient-border {
-    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));
+    background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
     @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
+      background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black));
     }
     background-origin: padding-box, border-box;
     background-clip: padding-box, border-box;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
-    background-color: rgb(0, 0, 0);
-  }
-  .bg-black {
-    background-color: var(--color-black);
-  }
-  .bg-black\/80 {
-    background-color: color-mix(in srgb, #000 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
-    }
+    background-color: var(--color-dg-on-solid);
   }
   .bg-dg-background {
     background-color: var(--color-dg-background);
@@ -782,17 +720,14 @@
   .bg-dg-danger {
     background-color: var(--color-dg-danger);
   }
-  .bg-dg-muted {
-    background-color: var(--color-dg-muted);
+  .bg-dg-on-solid {
+    background-color: var(--color-dg-on-solid);
   }
   .bg-dg-primary {
     background-color: var(--color-dg-primary);
   }
-  .bg-dg-primary\/10 {
-    background-color: var(--color-dg-primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-dg-primary) 10%, transparent);
-    }
+  .bg-dg-solid {
+    background-color: var(--color-dg-solid);
   }
   .bg-dg-success {
     background-color: var(--color-dg-success);
@@ -800,31 +735,12 @@
   .bg-dg-translucent {
     background-color: var(--color-dg-translucent);
   }
-  .bg-gray-800 {
-    background-color: var(--color-gray-800);
-  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
   .bg-indigo-600 {
     background-color: var(--color-indigo-600);
   }
-  .bg-transparent {
-    background-color: transparent;
-  }
-  .bg-white {
-    background-color: var(--color-white);
-  }
-  .bg-white\/5 {
-    background-color: color-mix(in srgb, #fff 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-  }
-  .bg-gradient-to-r {
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
   .dg-bg-reset {
     background-image: none;
     background-origin: padding-box;
@@ -833,17 +749,6 @@
     background-position: 0% 0%;
     background-size: auto;
   }
-  .from-dg-secondary {
-    --tw-gradient-from: var(--color-dg-secondary);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-dg-primary {
-    --tw-gradient-to: var(--color-dg-primary);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .bg-clip-text {
-    background-clip: text;
-  }
   .object-cover {
     object-fit: cover;
   }
@@ -859,6 +764,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -871,15 +779,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -916,9 +818,6 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-10 {
-    padding-block: calc(var(--spacing) * 10);
-  }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
@@ -928,15 +827,6 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
-  .pt-4 {
-    padding-top: calc(var(--spacing) * 4);
-  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -946,21 +836,9 @@
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
-  .pr-4 {
-    padding-right: calc(var(--spacing) * 4);
-  }
-  .pr-9 {
-    padding-right: calc(var(--spacing) * 9);
-  }
-  .pr-12 {
-    padding-right: calc(var(--spacing) * 12);
-  }
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
@@ -973,9 +851,6 @@
   .text-center {
     text-align: center;
   }
-  .font-dg-mono {
-    font-family: var(--font-dg-mono);
-  }
   .font-dg-noto {
     font-family: var(--font-dg-noto);
   }
@@ -1032,10 +907,6 @@
     --tw-leading: 2;
     line-height: 2;
   }
-  .leading-normal {
-    --tw-leading: var(--leading-normal);
-    line-height: var(--leading-normal);
-  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1064,29 +935,9 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-tight {
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
-  }
-  .tracking-wide {
-    --tw-tracking: var(--tracking-wide);
-    letter-spacing: var(--tracking-wide);
-  }
-  .break-words {
-    overflow-wrap: break-word;
-  }
-  .whitespace-normal {
-    white-space: normal;
-  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
-  .text-black {
-    color: var(--color-black);
-  }
   .text-dg-danger {
     color: var(--color-dg-danger);
   }
@@ -1096,8 +947,8 @@
   .text-dg-muted {
     color: var(--color-dg-muted);
   }
-  .text-dg-platinum {
-    color: var(--color-dg-platinum);
+  .text-dg-on-solid {
+    color: var(--color-dg-on-solid);
   }
   .text-dg-primary {
     color: var(--color-dg-primary);
@@ -1105,6 +956,9 @@
   .text-dg-secondary {
     color: var(--color-dg-secondary);
   }
+  .text-dg-solid {
+    color: var(--color-dg-solid);
+  }
   .text-dg-success {
     color: var(--color-dg-success);
   }
@@ -1123,9 +977,6 @@
   .capitalize {
     text-transform: capitalize;
   }
-  .uppercase {
-    text-transform: uppercase;
-  }
   .italic {
     font-style: italic;
   }
@@ -1142,9 +993,6 @@
   .opacity-50 {
     opacity: 50%;
   }
-  .opacity-80 {
-    opacity: 80%;
-  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1157,10 +1005,6 @@
     --tw-shadow: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .dg-glow-cyan-green {
     box-shadow: var(--dg-primary, #13ef95) 0.375rem 0 0.9375rem 0, var(--dg-secondary, #149afb) -0.375rem 0 0.9375rem 0;
     @supports (color: color-mix(in lab, red, red)) {
@@ -1168,39 +1012,23 @@
     }
   }
   .dg-shadow-subtle {
-    box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+    box-shadow: color-mix(in srgb, light-dark(#9ca3af, #4e4e52) 5%, transparent) 0 0.0625rem 0.125rem;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
+    }
   }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .outline-1 {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .outline-2 {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-  }
-  .-outline-offset-1 {
-    outline-offset: calc(1px * -1);
-  }
-  .-outline-offset-2 {
-    outline-offset: calc(2px * -1);
-  }
-  .outline-dg-primary {
-    outline-color: var(--color-dg-primary);
-  }
-  .outline-white\/10 {
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
   .grayscale {
     --tw-grayscale: grayscale(100%);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1224,11 +1052,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-shadow {
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1242,6 +1065,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1250,99 +1077,6 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .placeholder\:text-dg-slate {
-    &::placeholder {
-      color: var(--color-dg-slate);
-    }
-  }
-  .hover\:border-dg-platinum {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-dg-platinum);
-      }
-    }
-  }
-  .hover\:border-dg-slate {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-dg-slate);
-      }
-    }
-  }
-  .hover\:bg-white\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:text-dg-fog {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-dg-fog);
-      }
-    }
-  }
-  .hover\:text-white {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-  }
-  .focus\:bg-white\/5 {
-    &:focus {
-      background-color: color-mix(in srgb, #fff 5%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-      }
-    }
-  }
-  .focus\:outline-hidden {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-      @media (forced-colors: active) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-    }
-  }
-  .focus\:outline-2 {
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-  }
-  .focus\:outline-offset-2 {
-    &:focus {
-      outline-offset: 2px;
-    }
-  }
-  .focus\:outline-dg-primary {
-    &:focus {
-      outline-color: var(--color-dg-primary);
-    }
-  }
-  .focus-visible\:outline-2 {
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-  }
-  .focus-visible\:outline-offset-2 {
-    &:focus-visible {
-      outline-offset: 2px;
-    }
-  }
-  .focus-visible\:outline-dg-primary {
-    &:focus-visible {
-      outline-color: var(--color-dg-primary);
-    }
-  }
   .disabled\:cursor-not-allowed {
     &:disabled {
       cursor: not-allowed;
@@ -1353,40 +1087,6 @@
       opacity: 50%;
     }
   }
-  .sm\:-my-px {
-    @media (width >= 40rem) {
-      margin-block: -1px;
-    }
-  }
-  .sm\:ml-6 {
-    @media (width >= 40rem) {
-      margin-left: calc(var(--spacing) * 6);
-    }
-  }
-  .sm\:flex {
-    @media (width >= 40rem) {
-      display: flex;
-    }
-  }
-  .sm\:hidden {
-    @media (width >= 40rem) {
-      display: none;
-    }
-  }
-  .sm\:items-center {
-    @media (width >= 40rem) {
-      align-items: center;
-    }
-  }
-  .sm\:space-x-8 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
   .sm\:truncate {
     @media (width >= 40rem) {
       overflow: hidden;
@@ -1405,12 +1105,6 @@
       line-height: var(--tw-leading, var(--text-3xl--line-height));
     }
   }
-  .sm\:text-sm {
-    @media (width >= 40rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-  }
   .sm\:tracking-tight {
     @media (width >= 40rem) {
       --tw-tracking: var(--tracking-tight);
@@ -1442,11 +1136,6 @@
       justify-content: space-between;
     }
   }
-  .lg\:px-8 {
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
   .dark\:border-white\/10 {
     &.dark {
       border-color: color-mix(in srgb, #fff 10%, transparent);
@@ -1458,10 +1147,14 @@
 }
 @layer base {
   :root {
+    color-scheme: light dark;
     --dg-base-font-size: 16px;
     --dg-border-width: 0.125rem;
-    --dg-primary: #13ef95;
-    --dg-secondary: #149afb;
+    --dg-primary: light-dark(#047857, #13ef95);
+    --dg-secondary: light-dark(#0369a1, #149afb);
+    --dg-syntax-keyword: #f97583;
+    --dg-syntax-variable: #79b8ff;
+    --dg-syntax-function: #b392f0;
   }
   html {
     font-size: var(--dg-base-font-size, 16px);
@@ -1569,17 +1262,17 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    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));
+    background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, var(--dg-secondary, #149afb), var(--dg-primary, #13ef95), var(--dg-secondary, #149afb), var(--dg-primary, #13ef95));
     @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, #000), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, #000));
+      background-image: linear-gradient(var(--color-dg-on-solid), var(--color-dg-on-solid)), linear-gradient(90deg, color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black), color-mix(in srgb, var(--dg-secondary, #149afb) 70%, black), color-mix(in srgb, var(--dg-primary, #13ef95) 70%, black));
     }
     background-origin: padding-box, border-box;
     background-clip: padding-box, border-box;
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100% 100%;
-    background-color: rgb(0, 0, 0);
-    color: var(--color-white);
+    background-color: var(--color-dg-on-solid);
+    color: var(--color-dg-solid);
     box-shadow: var(--dg-primary, #13ef95) 0.375rem 0 0.9375rem 0, var(--dg-secondary, #149afb) -0.375rem 0 0.9375rem 0;
     @supports (color: color-mix(in lab, red, red)) {
       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;
@@ -1587,55 +1280,61 @@
   }
   .dg-btn--primary:hover {
     border-color: transparent;
-    background-color: var(--color-white);
+    background-color: var(--color-dg-solid);
     background-image: none;
     background-origin: padding-box;
     background-clip: border-box;
     background-repeat: repeat;
     background-position: 0% 0%;
     background-size: auto;
-    color: var(--color-black);
-    box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+    color: var(--color-dg-on-solid);
+    box-shadow: color-mix(in srgb, light-dark(#9ca3af, #4e4e52) 5%, transparent) 0 0.0625rem 0.125rem;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
+    }
   }
   .dg-btn--secondary {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: transparent;
-    background-color: var(--color-white);
-    color: var(--color-black);
+    background-color: var(--color-dg-solid);
+    color: var(--color-dg-on-solid);
   }
   .dg-btn--secondary:hover {
     border-style: var(--tw-border-style);
     border-width: 1px;
-    border-color: var(--color-white);
-    background-color: var(--color-black);
-    color: var(--color-white);
+    border-color: var(--color-dg-solid);
+    background-color: var(--color-dg-on-solid);
+    color: var(--color-dg-solid);
   }
   .dg-btn--ghost {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-dg-slate);
-    background-color: transparent;
-    color: var(--color-white);
+    background-color: var(--color-dg-on-solid);
+    color: var(--color-dg-solid);
   }
   .dg-btn--ghost:hover {
     border-color: transparent;
-    background-color: var(--color-white);
+    background-color: var(--color-dg-solid);
     background-image: none;
     background-origin: padding-box;
     background-clip: border-box;
     background-repeat: repeat;
     background-position: 0% 0%;
     background-size: auto;
-    color: var(--color-black);
-    box-shadow: rgba(38, 44, 52, 0.05) 0 0.0625rem 0.125rem;
+    color: var(--color-dg-on-solid);
+    box-shadow: color-mix(in srgb, light-dark(#9ca3af, #4e4e52) 5%, transparent) 0 0.0625rem 0.125rem;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--color-dg-pebble) 5%, transparent) 0 0.0625rem 0.125rem;
+    }
   }
   .dg-btn--danger-ghost {
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-dg-danger);
-    background-color: transparent;
-    color: var(--color-white);
+    background-color: var(--color-dg-on-solid);
+    color: var(--color-dg-solid);
   }
   .dg-btn--danger-ghost:hover {
     border-color: transparent;
@@ -1647,10 +1346,6 @@
     height: calc(var(--spacing) * 12);
     padding-inline: calc(var(--spacing) * 2);
   }
-  .dg-btn--icon-only.dg-btn--sm {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-  }
   .dg-btn--collapse {
     display: inline-flex;
   }
@@ -1660,22 +1355,45 @@
       justify-content: center;
     }
   }
+  .dg-btn--icon-only.dg-btn--sm {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .dg-btn i, .dg-btn svg {
     flex-shrink: 0;
   }
   .dg-action-group {
-    display: flex;
+    display: inline-flex;
     flex-wrap: wrap;
-    justify-content: center;
-    gap: calc(var(--spacing) * 4);
+    gap: calc(var(--spacing) * 0);
   }
-  @media (max-width: 640px) {
-    .dg-action-group {
-      flex-direction: column;
-      align-items: stretch;
+  .dg-action-group > .dg-btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0px;
+  }
+  .dg-action-group > .dg-btn:not(.dg-btn--primary):not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .dg-action-group > .dg-btn--primary:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .dg-action-group > .dg-btn--primary:not(:first-child):not(:last-child) {
+    box-shadow: none;
+  }
+  .dg-action-group > .dg-btn--primary:first-child:not(:last-child) {
+    box-shadow: var(--dg-secondary, #149afb) -0.375rem 0 0.9375rem 0;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
     }
-    .dg-action-group .dg-btn {
-      width: 100%;
+  }
+  .dg-action-group > .dg-btn--primary:last-child:not(:first-child) {
+    box-shadow: var(--dg-primary, #13ef95) 0.375rem 0 0.9375rem 0;
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0;
     }
   }
   .dg-section {
@@ -1739,29 +1457,13 @@
     border-color: var(--color-dg-pebble);
     padding-top: 2rem;
   }
-  .dg-section--fieldset .dg-section-heading {
-    position: absolute;
-    background-color: var(--color-dg-background);
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-    --tw-tracking: var(--tracking-wide);
-    letter-spacing: var(--tracking-wide);
-    color: var(--color-dg-muted);
-    text-transform: uppercase;
-    margin: calc(var(--spacing) * 0);
-    padding-inline: calc(var(--spacing) * 2);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    top: -0.75rem;
-    left: 1rem;
-  }
   @media (min-width: 640px) {
     .dg-section--fieldset {
       padding-top: 2.5rem;
     }
-    .dg-section--fieldset .dg-section-heading {
-      font-size: 1.125rem;
-    }
+  }
+  .dg-section--fieldset .dg-section-heading {
+    font-size: 1.125rem;
   }
   .dg-card {
     display: flex;
@@ -1842,39 +1544,6 @@
   .dg-card--selectable:hover {
     border-color: var(--color-dg-slate);
   }
-  .dg-card--selectable:has(input[type="radio"]:checked) {
-    border-color: var(--color-dg-primary);
-    background: rgba(19, 239, 149, 0.05);
-  }
-  .dg-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .dg-card--selectable input[type="radio"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .dg-card--selectable__indicator {
-    display: none;
-  }
-  .dg-card--selectable__icon {
-    color: var(--color-white);
-    margin-right: 0.5rem;
-  }
   .dg-card--selectable__content {
     display: flex;
     flex: 1;
@@ -1886,7 +1555,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     display: flex;
     align-items: center;
   }
@@ -1934,27 +1603,6 @@
   .dg-card--file-upload:hover {
     border-color: var(--color-dg-slate);
   }
-  .dg-card--file-upload:has(input[type="checkbox"]:checked) {
-    --tw-border-style: solid;
-    border-style: solid;
-    border-color: var(--color-dg-primary);
-    background: rgba(19, 239, 149, 0.05);
-  }
-  .dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border-width: 0;
-  }
-  .dg-card--file-upload__icon {
-    color: var(--color-white);
-    margin-right: 0.5rem;
-  }
   .dg-card--file-upload__content {
     display: flex;
     flex: 1;
@@ -1966,7 +1614,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     display: flex;
     align-items: center;
   }
@@ -2003,45 +1651,15 @@
     overflow: hidden;
     border-radius: 0.5rem 0.5rem 0 0;
   }
-  .dg-card__image img {
-    display: block;
-    height: 100%;
-    width: 100%;
-    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: calc(var(--spacing) * 3);
     padding-top: calc(var(--spacing) * 6);
-  }
-  .dg-card__icon i, .dg-card__icon svg {
     font-size: var(--text-5xl);
     line-height: var(--tw-leading, var(--text-5xl--line-height));
     color: var(--color-dg-primary);
   }
-  .dg-card__icon--left {
-    justify-content: flex-start;
-  }
-  .dg-card__icon--center {
-    justify-content: center;
-  }
-  .dg-card__icon--right {
-    justify-content: flex-end;
-  }
   @media (min-width: 640px) {
     .dg-card__icon {
       padding: calc(var(--spacing) * 4);
@@ -2078,19 +1696,6 @@
     flex: 1;
     flex-direction: column;
     gap: calc(var(--spacing) * 3);
-    padding: calc(var(--spacing) * 3);
-  }
-  @media (min-width: 640px) {
-    .dg-card__body {
-      padding: calc(var(--spacing) * 4);
-    }
-  }
-  @media (min-width: 1024px) {
-    .dg-card__body {
-      padding-inline: calc(var(--spacing) * 6);
-      padding-top: calc(var(--spacing) * 0);
-      padding-bottom: calc(var(--spacing) * 6);
-    }
   }
   .dg-card__footer {
     display: flex;
@@ -2102,9 +1707,6 @@
     padding: calc(var(--spacing) * 3);
     margin-top: auto;
   }
-  .dg-card__footer--bordered {
-    border-top-color: var(--color-dg-pebble);
-  }
   @media (min-width: 640px) {
     .dg-card__footer {
       padding: calc(var(--spacing) * 4);
@@ -2115,6 +1717,115 @@
       padding: calc(var(--spacing) * 6);
     }
   }
+  .dg-card--selectable:has(input[type="radio"]:checked) {
+    border-color: var(--color-dg-primary);
+    background: var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
+    }
+  }
+  .dg-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .dg-card--selectable input[type="radio"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .dg-card--selectable__indicator {
+    display: none;
+  }
+  .dg-card--selectable__icon {
+    color: var(--color-dg-text);
+    margin-right: 0.5rem;
+  }
+  .dg-card--file-upload:has(input[type="checkbox"]:checked) {
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--color-dg-primary);
+    background: var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
+    }
+  }
+  .dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .dg-card--file-upload__icon {
+    color: var(--color-dg-text);
+    margin-right: 0.5rem;
+  }
+  .dg-card__image img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    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--left {
+    justify-content: flex-start;
+  }
+  .dg-card__icon--center {
+    justify-content: center;
+  }
+  .dg-card__icon--right {
+    justify-content: flex-end;
+  }
+  .dg-card--structured .dg-card__body {
+    padding: calc(var(--spacing) * 3);
+  }
+  .dg-card__body > :last-child {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .dg-card__footer--bordered {
+    border-top-color: var(--color-dg-pebble);
+  }
+  @media (min-width: 640px) {
+    .dg-card--structured .dg-card__body {
+      padding: calc(var(--spacing) * 4);
+    }
+  }
+  @media (min-width: 1024px) {
+    .dg-card--structured .dg-card__body {
+      padding-inline: calc(var(--spacing) * 6);
+      padding-top: calc(var(--spacing) * 0);
+      padding-bottom: calc(var(--spacing) * 6);
+    }
+  }
   .dg-code-block {
     width: 100%;
     overflow: auto;
@@ -2128,27 +1839,12 @@
     padding: calc(var(--spacing) * 2);
     -webkit-overflow-scrolling: touch;
   }
-  .dg-code-block pre {
-    margin: calc(var(--spacing) * 0);
-    padding: calc(var(--spacing) * 0);
-    font-family: var(--font-dg-mono);
-    font-size: var(--text-xs);
-    line-height: var(--tw-leading, var(--text-xs--line-height));
-    white-space: pre-wrap;
-    color: var(--color-dg-fog);
-    overflow-wrap: break-word;
-    line-height: 1.3;
-  }
   @media (min-width: 640px) {
     .dg-code-block {
       margin-block: calc(var(--spacing) * 4);
       max-height: 15.625rem;
       padding: calc(var(--spacing) * 3);
     }
-    .dg-code-block pre {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
   }
   @media (min-width: 1024px) {
     .dg-code-block {
@@ -2182,26 +1878,9 @@
     max-height: none;
     overflow: visible;
   }
-  .dg-hero-title {
-    margin-bottom: calc(var(--spacing) * 6);
-    text-align: center;
-    font-family: var(--font-dg-noto);
-    font-size: var(--text-5xl);
-    line-height: var(--tw-leading, var(--text-5xl--line-height));
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-    --tw-gradient-from: var(--color-dg-secondary);
-    --tw-gradient-to: var(--color-dg-primary);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    letter-spacing: -0.02em;
-    font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "ordn" 0, "ss09", "kern";
-    font-kerning: normal;
+  .dg-code-block pre {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .dg-hero {
     width: 100%;
@@ -2209,6 +1888,22 @@
     padding-block: calc(var(--spacing) * 16);
     text-align: center;
   }
+  @media (max-width: 768px) {
+    .dg-hero {
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 12);
+    }
+  }
+  @media (max-width: 640px) {
+    .dg-hero {
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 8);
+    }
+  }
+  .dg-hero__title {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
   .dg-hero__content {
     margin-inline: auto;
     display: flex;
@@ -2226,7 +1921,7 @@
     background-color: var(--color-dg-translucent);
     margin-inline: auto;
     margin-bottom: calc(var(--spacing) * 2);
-    border-color: color-mix(in srgb, #949498 30%, transparent);
+    border-color: color-mix(in srgb, light-dark(#6b7280, #949498) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-dg-slate) 30%, transparent);
     }
@@ -2242,20 +1937,13 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .dg-hero__announcement:hover {
-    --tw-translate-y: calc(var(--spacing) * -0.5);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-    border-color: var(--color-dg-primary);
-    background-color: rgba(19, 239, 149, 0.1);
-    box-shadow: 0 0.25rem 0.75rem rgba(19, 239, 149, 0.15);
-  }
   .dg-hero__announcement-text {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
     white-space: nowrap;
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-hero__announcement-cta {
     display: inline-flex;
@@ -2272,9 +1960,6 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .dg-hero__announcement:hover .dg-hero__announcement-cta {
-    gap: calc(var(--spacing) * 3);
-  }
   .dg-hero__body {
     margin-inline: auto;
     text-align: center;
@@ -2295,61 +1980,24 @@
     justify-content: center;
     gap: calc(var(--spacing) * 4);
   }
-  @media (max-width: 1024px) {
-    .dg-hero-title {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
-  }
-  @media (max-width: 768px) {
-    .dg-hero-title {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
-    .dg-hero {
-      padding-inline: calc(var(--spacing) * 4);
-      padding-block: calc(var(--spacing) * 12);
-    }
-    .dg-hero__content {
-      gap: calc(var(--spacing) * 5);
+  .dg-hero__announcement:hover {
+    --tw-translate-y: calc(var(--spacing) * -0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    border-color: var(--color-dg-primary);
+    background-color: var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb, var(--dg-primary) 10%, transparent);
     }
-    .dg-hero__body {
-      font-size: var(--text-base);
-      line-height: var(--tw-leading, var(--text-base--line-height));
-      --tw-leading: var(--leading-relaxed);
-      line-height: var(--leading-relaxed);
+    box-shadow: 0 0.25rem 0.75rem var(--dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--dg-primary) 15%, transparent);
     }
   }
-  @media (max-width: 640px) {
-    .dg-hero-title {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-    .dg-hero {
-      padding-inline: calc(var(--spacing) * 4);
-      padding-block: calc(var(--spacing) * 8);
-    }
-    .dg-hero__announcement-text {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-      white-space: normal;
-    }
-    .dg-hero__announcement-cta {
-      font-size: var(--text-xs);
-      line-height: var(--tw-leading, var(--text-xs--line-height));
-    }
-    .dg-hero__body {
-      font-size: 0.9375rem;
-      --tw-leading: var(--leading-normal);
-      line-height: var(--leading-normal);
-    }
-    .dg-hero__actions {
-      width: 100%;
-      flex-direction: column;
-    }
-    .dg-hero__actions > * {
-      width: 100%;
-    }
+  .dg-hero__announcement:hover .dg-hero__announcement-cta {
+    gap: calc(var(--spacing) * 3);
+  }
+  .dg-hero__actions > * {
+    width: 100%;
   }
   .dg-section-heading {
     margin-bottom: calc(var(--spacing) * 6);
@@ -2359,18 +2007,11 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     flex-wrap: wrap;
     align-items: baseline;
     gap: calc(var(--spacing) * 2);
   }
-  .dg-section-heading small {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-font-weight: var(--font-weight-normal);
-    font-weight: var(--font-weight-normal);
-    color: var(--color-dg-muted);
-  }
   @media (max-width: 640px) {
     .dg-section-heading {
       margin-bottom: calc(var(--spacing) * 3);
@@ -2378,14 +2019,19 @@
       font-size: var(--text-xl);
       line-height: var(--tw-leading, var(--text-xl--line-height));
     }
-    .dg-section-heading small {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
+  }
+  .dg-section-heading small {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .dg-page-heading {
     margin-bottom: calc(var(--spacing) * 8);
   }
+  @media (max-width: 640px) {
+    .dg-page-heading {
+      margin-bottom: calc(var(--spacing) * 6);
+    }
+  }
   .dg-page-heading__title {
     margin-bottom: calc(var(--spacing) * 2);
     font-family: var(--font-dg-noto);
@@ -2395,7 +2041,19 @@
     line-height: var(--leading-tight);
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
+  }
+  @media (max-width: 768px) {
+    .dg-page-heading__title {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  @media (max-width: 640px) {
+    .dg-page-heading__title {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
   }
   .dg-page-heading__description {
     margin: calc(var(--spacing) * 0);
@@ -2407,23 +2065,12 @@
     color: var(--color-dg-muted);
   }
   @media (max-width: 768px) {
-    .dg-page-heading__title {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
     .dg-page-heading__description {
       font-size: var(--text-base);
       line-height: var(--tw-leading, var(--text-base--line-height));
     }
   }
   @media (max-width: 640px) {
-    .dg-page-heading {
-      margin-bottom: calc(var(--spacing) * 6);
-    }
-    .dg-page-heading__title {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
     .dg-page-heading__description {
       font-size: 0.9375rem;
     }
@@ -2448,38 +2095,7 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
-    color: var(--color-white);
-    @media (width >= 40rem) {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-    @media (width >= 40rem) {
-      font-size: var(--text-3xl);
-      line-height: var(--tw-leading, var(--text-3xl--line-height));
-    }
-    @media (width >= 40rem) {
-      --tw-tracking: var(--tracking-tight);
-      letter-spacing: var(--tracking-tight);
-    }
-    line-height: 1.75;
-  }
-  .dg-page-headings__actions {
-    margin-top: calc(var(--spacing) * 4);
-    display: flex;
-    @media (width >= 48rem) {
-      margin-top: calc(var(--spacing) * 0);
-    }
-    @media (width >= 48rem) {
-      margin-left: calc(var(--spacing) * 4);
-    }
-  }
-  .dg-page-headings__title {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     @media (width >= 40rem) {
       overflow: hidden;
       text-overflow: ellipsis;
@@ -2513,7 +2129,7 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     flex-wrap: wrap;
     align-items: baseline;
     gap: calc(var(--spacing) * 1.5);
@@ -2540,7 +2156,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-item-title {
     margin-bottom: calc(var(--spacing) * 1);
@@ -2550,7 +2166,7 @@
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
     flex-wrap: wrap;
     align-items: baseline;
     gap: calc(var(--spacing) * 1);
@@ -2571,10 +2187,6 @@
     line-height: var(--leading-snug);
     color: var(--color-dg-fog);
   }
-  .dg-prose.dg-prose--block {
-    width: 100%;
-    max-width: none;
-  }
   @media (min-width: 640px) {
     .dg-prose {
       margin-bottom: calc(var(--spacing) * 4);
@@ -2610,6 +2222,13 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
+  .dg-prose.dg-prose--block {
+    width: 100%;
+    max-width: none;
+  }
+  .dg-icon {
+    flex-shrink: 0;
+  }
   .dg-input {
     width: 100%;
     border-radius: 0.25rem;
@@ -2622,7 +2241,7 @@
     font-family: var(--font-dg-sans);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-white);
+    color: var(--color-dg-text);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -2634,9 +2253,6 @@
     transition-duration: 300ms;
     height: 2.75rem;
   }
-  .dg-input::placeholder {
-    color: var(--color-dg-muted);
-  }
   .dg-input:focus {
     border-color: var(--color-dg-primary);
     box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
@@ -2651,13 +2267,8 @@
   .dg-input--full {
     max-width: none;
   }
-  .dg-input[type="select"], select.dg-input {
-    appearance: none;
-    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");
-    background-position: right 0.75rem center;
-    background-repeat: no-repeat;
-    background-size: 1.5em 1.5em;
-    padding-right: 2.5rem;
+  .dg-input::placeholder {
+    color: var(--color-dg-muted);
   }
   .dg-textarea {
     width: 100%;
@@ -2671,7 +2282,7 @@
     font-family: var(--font-dg-sans);
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-white);
+    color: var(--color-dg-text);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -2685,6 +2296,17 @@
     resize: vertical;
     height: auto;
   }
+  .dg-textarea:focus {
+    border-color: var(--color-dg-primary);
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
+  }
+  .dg-textarea:disabled {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .dg-textarea::placeholder {
+    color: var(--color-dg-muted);
+  }
   .dg-checkbox {
     height: calc(var(--spacing) * 5);
     width: calc(var(--spacing) * 5);
@@ -2703,6 +2325,18 @@
     transition-duration: 200ms;
     position: relative;
   }
+  .dg-checkbox:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+    box-shadow: 0 0 0 0.125rem var(--color-dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
+    }
+  }
+  .dg-checkbox:disabled {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
   .dg-checkbox:checked {
     border-color: var(--color-dg-primary);
     background-color: var(--color-dg-primary);
@@ -2714,11 +2348,128 @@
     top: 0.125rem;
     width: 0.3125rem;
     height: 0.625rem;
-    border: solid black;
+    border: solid var(--color-dg-almost-black);
     border-width: 0 0.125rem 0.125rem 0;
     transform: rotate(45deg);
   }
-  .dg-checkbox:focus {
+  .dg-checkbox-label:hover .dg-checkbox {
+    border-color: var(--color-dg-slate);
+  }
+  .dg-checkbox-label:has(.dg-checkbox:disabled) {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .dg-select {
+    width: 100%;
+    border-radius: 0.25rem;
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-dg-pebble);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+    background-color: var(--color-dg-charcoal);
+    font-family: var(--font-dg-sans);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-dg-text);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-outline-style: none;
+    outline-style: none;
+    cursor: pointer;
+    appearance: none;
+    --tw-shadow: 0 0.0625rem 0.125rem 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.05));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+    height: 2.75rem;
+    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");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+  .dg-select:focus {
+    border-color: var(--color-dg-primary);
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
+  }
+  .dg-select:disabled {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .dg-option {
+    background-color: var(--color-dg-charcoal);
+    color: var(--color-dg-text);
+  }
+  .dg-radio {
+    height: calc(var(--spacing) * 5);
+    width: calc(var(--spacing) * 5);
+    appearance: none;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-dg-pebble);
+    flex-shrink: 0;
+    cursor: pointer;
+    background-color: var(--color-dg-charcoal);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    position: relative;
+  }
+  .dg-radio:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+    box-shadow: 0 0 0 0.125rem var(--color-dg-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
+    }
+  }
+  .dg-radio:disabled {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .dg-radio:checked {
+    border-color: var(--color-dg-primary);
+    background-color: var(--color-dg-primary);
+  }
+  .dg-radio:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.375rem;
+    height: 0.375rem;
+    background: var(--color-dg-almost-black);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .dg-radio-label:hover .dg-radio {
+    border-color: var(--color-dg-slate);
+  }
+  .dg-radio-label:has(.dg-radio:disabled) {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .dg-toggle {
+    flex-shrink: 0;
+    cursor: pointer;
+    appearance: none;
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    position: relative;
+    width: 2.75rem;
+    height: 1.5rem;
+    border-radius: 0.75rem;
+    background-color: var(--color-dg-pebble);
+  }
+  .dg-toggle:focus {
     --tw-outline-style: none;
     outline-style: none;
     box-shadow: 0 0 0 0.125rem var(--color-dg-primary);
@@ -2726,6 +2477,37 @@
       box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
     }
   }
+  .dg-toggle:disabled {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
+  .dg-toggle:checked {
+    background-color: var(--color-dg-primary);
+  }
+  .dg-toggle::after {
+    content: "";
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: white;
+    transition: transform 200ms ease-in-out;
+  }
+  .dg-toggle:checked::after {
+    transform: translateX(1.25rem);
+  }
+  .dg-toggle-label:hover .dg-toggle {
+    background-color: var(--color-dg-slate);
+  }
+  .dg-toggle-label:hover .dg-toggle:checked {
+    background-color: var(--color-dg-primary);
+  }
+  .dg-toggle-label:has(.dg-toggle:disabled) {
+    cursor: not-allowed;
+    opacity: 50%;
+  }
   .dg-checkbox-label {
     display: flex;
     cursor: pointer;
@@ -2735,9 +2517,6 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-dg-fog);
   }
-  .dg-checkbox-label:hover .dg-checkbox {
-    border-color: var(--color-dg-slate);
-  }
   .dg-checkbox-description {
     display: flex;
     flex-direction: column;
@@ -2748,54 +2527,98 @@
     flex-direction: column;
     gap: calc(var(--spacing) * 3);
   }
-  .dg-form-field {
-    margin-bottom: calc(var(--spacing) * 4);
+  .dg-radio-label {
     display: flex;
-    width: 100%;
-    flex-direction: column;
-    gap: calc(var(--spacing) * 3);
-  }
-  .dg-form-field--full {
-    max-width: none;
+    cursor: pointer;
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-dg-fog);
   }
-  .dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea {
-    border-color: var(--color-dg-danger);
+  .dg-radio-description {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 2);
   }
-  .dg-form-field--error .dg-form-helper {
-    color: var(--color-dg-danger);
+  .dg-radio-description__hint {
+    color: var(--color-dg-muted);
   }
-  .dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea {
-    border-color: var(--color-dg-success);
+  .dg-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 3);
   }
-  .dg-form-field--success .dg-form-helper {
-    color: var(--color-dg-success);
+  .dg-toggle-label {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-dg-fog);
+  }
+  .dg-toggle-group {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 4);
   }
   .dg-form-label {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
-  .dg-form-error {
+  .dg-form-helper {
     display: block;
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
-    color: var(--color-dg-danger);
+    color: var(--color-dg-muted);
     margin: 0;
   }
-  .dg-form-helper {
+  .dg-form-error {
     display: block;
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
-    color: var(--color-dg-muted);
+    color: var(--color-dg-danger);
     margin: 0;
   }
+  .dg-form-field {
+    margin-bottom: calc(var(--spacing) * 4);
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 3);
+  }
   @media (min-width: 640px) {
     .dg-form-field {
       max-width: var(--container-md);
     }
   }
+  .dg-form-field--full {
+    max-width: none;
+  }
+  .dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea, .dg-form-field--error .dg-select {
+    border-color: var(--color-dg-danger);
+  }
+  .dg-form-field--error .dg-input:focus, .dg-form-field--error .dg-textarea:focus, .dg-form-field--error .dg-select:focus {
+    border-color: var(--color-dg-danger);
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-danger);
+  }
+  .dg-form-field--error .dg-form-helper {
+    color: var(--color-dg-danger);
+  }
+  .dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea, .dg-form-field--success .dg-select {
+    border-color: var(--color-dg-success);
+  }
+  .dg-form-field--success .dg-input:focus, .dg-form-field--success .dg-textarea:focus, .dg-form-field--success .dg-select:focus {
+    border-color: var(--color-dg-success);
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-success);
+  }
+  .dg-form-field--success .dg-form-helper {
+    color: var(--color-dg-success);
+  }
   .dg-drag-drop-zone {
     position: relative;
     border-radius: var(--radius-lg);
@@ -2823,10 +2646,6 @@
     border-color: var(--color-dg-slate);
     background-color: var(--color-dg-background);
   }
-  .dg-drag-drop-zone.drag-over {
-    border-color: var(--color-dg-primary);
-    background-color: var(--color-dg-translucent);
-  }
   .dg-drag-drop-zone__input {
     position: absolute;
     inset: calc(var(--spacing) * 0);
@@ -2840,21 +2659,25 @@
     line-height: var(--tw-leading, var(--text-5xl--line-height));
     color: var(--color-dg-muted);
   }
-  .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
-    color: var(--color-dg-primary);
-  }
   .dg-drag-drop-zone__text {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+    color: var(--color-dg-text);
   }
   .dg-drag-drop-zone__hint {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-dg-muted);
   }
+  .dg-drag-drop-zone.drag-over {
+    border-color: var(--color-dg-primary);
+    background-color: var(--color-dg-translucent);
+  }
+  .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
+    color: var(--color-dg-primary);
+  }
   .dg-status {
     width: 100%;
     padding-block: calc(var(--spacing) * 1);
@@ -2897,11 +2720,6 @@
     align-items: flex-start;
     gap: calc(var(--spacing) * 1);
   }
-  .dg-status--with-icon .dg-status__icon {
-    margin-top: 0.1em;
-    flex-shrink: 0;
-    font-size: 1em;
-  }
   .dg-status--compact {
     margin-block: calc(var(--spacing) * 1);
     padding-block: calc(var(--spacing) * 0.5);
@@ -2914,6 +2732,11 @@
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
+  .dg-status--with-icon .dg-status__icon {
+    margin-top: 0.1em;
+    flex-shrink: 0;
+    font-size: 1em;
+  }
   .dg-spinner {
     margin-inline: auto;
     width: calc(var(--spacing) * 10);
@@ -2926,219 +2749,203 @@
     margin-bottom: calc(var(--spacing) * 3);
     animation: var(--animate-spin);
   }
-  .dg-processing-title {
+  .dg-spinner__title {
     margin-bottom: calc(var(--spacing) * 1);
     font-family: var(--font-dg-noto);
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
-    color: var(--color-white);
-  }
-  .dg-modal-overlay {
-    position: fixed;
-    inset: calc(var(--spacing) * 0);
-    display: none;
-    align-items: center;
-    justify-content: center;
-    background-color: color-mix(in srgb, #000 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
-    }
-    z-index: 50;
-  }
-  .dg-modal-overlay.visible, .dg-modal-overlay--visible {
-    display: flex;
-  }
-  .dg-modal-content {
-    margin: calc(var(--spacing) * 3);
-    max-width: 25rem;
-    text-align: center;
+    color: var(--color-dg-text);
   }
   .dg-constrain-width {
     width: 100%;
   }
-  .dg-center-h {
-    margin-inline: auto;
-  }
   @media (min-width: 640px) {
     .dg-constrain-width {
       margin-inline: auto;
       max-width: 70rem;
     }
   }
+  .dg-center-h {
+    margin-inline: auto;
+  }
   .dg-grid-mobile-stack {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 4);
   }
-  .dg-grid-mobile-stack > * {
-    flex: 1;
-  }
   @media (min-width: 640px) {
     .dg-grid-mobile-stack {
       flex-direction: row;
       gap: calc(var(--spacing) * 4);
     }
   }
+  .dg-grid-mobile-stack > * {
+    flex: 1;
+  }
   .dg-columns {
     display: flex;
     width: 100%;
     flex-direction: column;
   }
-  .dg-columns__wrapper {
-    display: flex;
-    min-width: calc(var(--spacing) * 0);
-    flex: 1;
-    flex-direction: column;
+  @media (min-width: 1280px) {
+    .dg-columns {
+      flex-direction: row;
+    }
   }
-  .dg-column {
-    min-width: calc(var(--spacing) * 0);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 6);
+  .dg-columns--fixed {
+    position: relative;
+    height: 100%;
+    --dg-sidebar-width: 18rem;
+    --dg-aside-width: 24rem;
   }
-  .dg-column--main {
-    flex: 1;
+  .dg-columns--fixed .dg-columns__column--left {
+    display: none;
   }
-  .dg-column--sidebar-right {
-    position: relative;
+  .dg-columns--fixed .dg-columns__column--right {
+    display: none;
   }
-  @media (min-width: 640px) {
-    .dg-column {
-      padding-inline: calc(var(--spacing) * 6);
+  @media (min-width: 1024px) {
+    .dg-columns--fixed .dg-columns__column--left {
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 50;
+      width: var(--dg-sidebar-width);
+      overflow-y: auto;
+      background: var(--color-dg-almost-black);
+      border-right: 1px solid var(--color-dg-border);
     }
-  }
-  @media (min-width: 768px) {
-    .dg-columns {
-      flex-direction: row;
+    .dg-columns--fixed .dg-columns__column--center {
+      padding-left: var(--dg-sidebar-width);
+    }
+    .dg-columns--fixed:has(.dg-columns__column--left.dg-columns__column--sm) {
+      --dg-sidebar-width: 16rem;
+    }
+    .dg-columns--fixed:has(.dg-columns__column--left.dg-columns__column--lg) {
+      --dg-sidebar-width: 24rem;
+    }
+    .dg-columns--fixed:has(.dg-columns__column--left.dg-columns__column--xl) {
+      --dg-sidebar-width: 32rem;
     }
   }
-  @media (min-width: 768px) and (max-width: 1279px) {
-    .dg-column--sidebar-right {
+  @media (min-width: 1280px) {
+    .dg-columns--fixed .dg-columns__column--right {
+      display: flex;
+      flex-direction: column;
       position: fixed;
-      top: 65px;
-      right: 0;
-      height: calc(100vh - 65px);
-      width: 16rem;
-      flex-shrink: 0;
-      transition: transform 300ms ease;
-      z-index: 20;
-      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.5);
+      top: 0;
+      bottom: 0;
+      left: var(--dg-sidebar-width);
+      width: var(--dg-aside-width);
+      overflow-y: auto;
+      border-right: 1px solid var(--color-dg-border);
     }
-    .dg-column--sidebar-right.dg-column--sm {
-      width: 20rem;
+    .dg-columns--fixed:has(.dg-columns__column--right) .dg-columns__column--center {
+      padding-left: calc(var(--dg-sidebar-width) + var(--dg-aside-width));
     }
-    .dg-column--sidebar-right.dg-column--lg {
-      width: 24rem;
+    .dg-columns--fixed:has(.dg-columns__column--right.dg-columns__column--sm) {
+      --dg-aside-width: 20rem;
     }
-    .dg-column--sidebar-right.dg-column--xl {
-      width: 32rem;
+    .dg-columns--fixed:has(.dg-columns__column--right.dg-columns__column--lg) {
+      --dg-aside-width: 28rem;
     }
-    .dg-column--sidebar-right.collapsed {
-      transform: translateX(calc(100% - 2rem));
+    .dg-columns--fixed:has(.dg-columns__column--right.dg-columns__column--xl) {
+      --dg-aside-width: 32rem;
     }
   }
+  .dg-columns__wrapper {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    flex-direction: column;
+  }
   @media (min-width: 1024px) {
     .dg-columns__wrapper {
       flex-direction: row;
     }
-    .dg-column--sidebar-left {
+  }
+  .dg-columns__mobile-header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 3);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    position: sticky;
+    top: 0;
+    z-index: 40;
+    background: var(--color-dg-almost-black);
+    border-bottom: 1px solid var(--color-dg-border);
+  }
+  @media (min-width: 1024px) {
+    .dg-columns__mobile-header {
+      display: none;
+    }
+  }
+  .dg-columns__sidebar-toggle {
+    margin: calc(var(--spacing) * -2.5);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: calc(var(--spacing) * 2.5);
+    color: var(--color-dg-muted);
+  }
+  .dg-columns__column {
+    min-width: calc(var(--spacing) * 0);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 6);
+  }
+  @media (min-width: 640px) {
+    .dg-columns__column {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .dg-columns__column--right {
+    position: relative;
+  }
+  .dg-columns__column--center {
+    flex: 1;
+  }
+  @media (min-width: 1024px) {
+    .dg-columns__column--left {
       width: calc(var(--spacing) * 48);
       flex-shrink: 0;
     }
-    .dg-column--sidebar-left.dg-column--sm {
+    .dg-columns__column--left.dg-columns__column--sm {
       width: calc(var(--spacing) * 64);
       flex-shrink: 0;
     }
-    .dg-column--sidebar-left.dg-column--lg {
+    .dg-columns__column--left.dg-columns__column--lg {
       width: calc(var(--spacing) * 96);
       flex-shrink: 0;
     }
-    .dg-column--sidebar-left.dg-column--xl {
+    .dg-columns__column--left.dg-columns__column--xl {
       width: var(--spacing-128);
       flex-shrink: 0;
     }
   }
   @media (min-width: 1280px) {
-    .dg-column--sidebar-right {
+    .dg-columns__column--right {
       width: 16rem;
       flex-shrink: 0;
     }
-    .dg-column--sidebar-right.dg-column--sm {
+    .dg-columns__column--right.dg-columns__column--sm {
       width: 20rem;
       flex-shrink: 0;
     }
-    .dg-column--sidebar-right.dg-column--lg {
+    .dg-columns__column--right.dg-columns__column--lg {
       width: 24rem;
       flex-shrink: 0;
     }
-    .dg-column--sidebar-right.dg-column--xl {
+    .dg-columns__column--right.dg-columns__column--xl {
       width: 32rem;
       flex-shrink: 0;
     }
   }
-  .dg-header {
-    width: 100%;
-    background: #050506;
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  }
-  .dg-header__container {
-    margin-inline: auto;
-    display: flex;
-    max-width: var(--breakpoint-2xl);
-    align-items: center;
-    justify-content: space-between;
-  }
-  .dg-header__logo {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 3);
-  }
-  .dg-header__logo-image {
-    height: calc(var(--spacing) * 8);
-    width: auto;
-  }
-  .dg-header__logo-text {
-    font-family: var(--font-dg-noto);
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    color: var(--color-white);
-  }
-  .dg-header__nav {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 4);
-  }
-  .dg-header__profile-link {
-    margin: calc(var(--spacing) * -1.5);
-    display: block;
-    padding: calc(var(--spacing) * 1.5);
-  }
-  .dg-header__profile-avatar {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-    border-radius: calc(infinity * 1px);
-    background-color: var(--color-gray-800);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-    outline-offset: calc(1px * -1);
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-  @media (max-width: 768px) {
-    .dg-header {
-      padding: 0.75rem 1rem;
-    }
-    .dg-header__logo-text {
-      font-size: var(--text-lg);
-      line-height: var(--tw-leading, var(--text-lg--line-height));
-    }
-  }
   .dg-footer {
     margin-top: calc(var(--spacing) * 16);
     border-top-style: var(--tw-border-style);
@@ -3146,29 +2953,21 @@
     border-color: var(--color-dg-pebble);
     text-align: center;
   }
-  .dg-link {
-    color: var(--color-dg-primary);
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .dg-link:hover {
-    opacity: 80%;
+  .dg-footer__social-links {
+    display: flex;
+    justify-content: center;
+    gap: calc(var(--spacing) * 4);
   }
-  .dg-social-link {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-    color: var(--color-dg-fog);
+  .dg-footer__social-link {
+    color: var(--color-dg-muted);
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .dg-social-link:hover {
-    color: var(--color-dg-primary);
+  .dg-footer__social-link:hover {
+    color: var(--color-dg-text);
   }
   .dg-text-center {
     text-align: center;
@@ -3229,42 +3028,28 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
     color: var(--color-dg-muted);
   }
-  .dg-newsletter-container {
+  .dg-newsletter {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 4);
   }
-  .dg-newsletter-container--compact {
+  .dg-newsletter--compact {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 3);
   }
-  .dg-newsletter-form {
+  .dg-newsletter__form {
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 4);
   }
-  .dg-newsletter-form--compact {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--spacing) * 3);
-  }
-  .dg-newsletter-form--inline {
-    display: flex;
-    width: 100%;
-    gap: calc(var(--spacing) * 2);
-  }
-  .dg-newsletter-header {
+  .dg-newsletter__form--compact {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
     gap: calc(var(--spacing) * 3);
   }
-  .dg-newsletter-header__content {
-    flex: 1;
-  }
-  .dg-newsletter-header__actions {
-    width: 100%;
+  .dg-newsletter__form--inline {
+    width: auto;
   }
   .dg-logo-container {
     display: flex;
@@ -3274,53 +3059,36 @@
     height: calc(var(--spacing) * 8);
     width: auto;
   }
-  .dg-social-links {
-    display: flex;
-    justify-content: center;
-    gap: calc(var(--spacing) * 4);
-  }
-  @media (min-width: 640px) {
-    .dg-newsletter-form--inline {
-      width: auto;
-    }
-    .dg-newsletter-header {
-      flex-direction: row;
-      align-items: center;
-    }
-    .dg-newsletter-header__actions {
-      width: auto;
-    }
-  }
   .dg-alert {
     border-radius: var(--radius-md);
     padding: calc(var(--spacing) * 4);
   }
   .dg-alert--warning {
-    background-color: color-mix(in srgb, #fec84b 10%, transparent);
+    background-color: color-mix(in srgb, light-dark(#a16207, #fec84b) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb, var(--color-dg-warning) 10%, transparent);
     }
-    outline: 1px solid color-mix(in srgb, #fec84b 15%, transparent);
+    outline: 1px solid color-mix(in srgb, light-dark(#a16207, #fec84b) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 1px solid color-mix(in srgb, var(--color-dg-warning) 15%, transparent);
     }
   }
   .dg-alert--success {
-    background-color: color-mix(in srgb, #12b76a 10%, transparent);
+    background-color: color-mix(in srgb, light-dark(#15803d, #12b76a) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb, var(--color-dg-success) 10%, transparent);
     }
-    outline: 1px solid color-mix(in srgb, #12b76a 15%, transparent);
+    outline: 1px solid color-mix(in srgb, light-dark(#15803d, #12b76a) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 1px solid color-mix(in srgb, var(--color-dg-success) 15%, transparent);
     }
   }
   .dg-alert--danger {
-    background-color: color-mix(in srgb, #f04438 10%, transparent);
+    background-color: color-mix(in srgb, light-dark(#b91c1c, #f04438) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb, var(--color-dg-danger) 10%, transparent);
     }
-    outline: 1px solid color-mix(in srgb, #f04438 15%, transparent);
+    outline: 1px solid color-mix(in srgb, light-dark(#b91c1c, #f04438) 15%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline: 1px solid color-mix(in srgb, var(--color-dg-danger) 15%, transparent);
     }
@@ -3340,22 +3108,7 @@
   }
   .dg-alert__icon {
     flex-shrink: 0;
-  }
-  .dg-alert__icon svg {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
-  .dg-alert--warning .dg-alert__icon {
-    color: var(--color-dg-warning);
-  }
-  .dg-alert--success .dg-alert__icon {
-    color: var(--color-dg-success);
-  }
-  .dg-alert--danger .dg-alert__icon {
-    color: var(--color-dg-danger);
-  }
-  .dg-alert--info .dg-alert__icon {
-    color: var(--color-dg-secondary);
+    font-size: 1.25rem;
   }
   .dg-alert__body {
     margin-left: 0.75rem;
@@ -3366,18 +3119,6 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .dg-alert--warning .dg-alert__title {
-    color: var(--color-dg-warning);
-  }
-  .dg-alert--success .dg-alert__title {
-    color: var(--color-dg-success);
-  }
-  .dg-alert--danger .dg-alert__title {
-    color: var(--color-dg-danger);
-  }
-  .dg-alert--info .dg-alert__title {
-    color: var(--color-dg-secondary);
-  }
   .dg-alert__description {
     margin-top: calc(var(--spacing) * 2);
     font-size: var(--text-sm);
@@ -3387,10 +3128,6 @@
   .dg-alert__actions {
     margin-top: calc(var(--spacing) * 4);
   }
-  .dg-alert__actions .dg-btn {
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-  }
   .dg-alert__list {
     margin-top: calc(var(--spacing) * 2);
     list-style-type: disc;
@@ -3399,588 +3136,52 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-dg-muted);
   }
-  .dg-alert__list li {
-    padding-left: 0.25rem;
-  }
   .dg-alert__dismiss {
+    margin-block: calc(var(--spacing) * -1.5);
+    margin-right: calc(var(--spacing) * -1.5);
     margin-left: auto;
+    display: inline-flex;
     flex-shrink: 0;
     padding-left: calc(var(--spacing) * 3);
-  }
-  .dg-alert__dismiss button {
-    display: inline-flex;
     cursor: pointer;
     border-radius: var(--radius-md);
     padding: calc(var(--spacing) * 1.5);
     color: var(--color-dg-muted);
+    font-size: 1.25rem;
   }
-  .dg-alert__dismiss button:hover {
-    color: var(--color-dg-text);
-  }
-  .dg-alert__dismiss button svg {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
-  .dg-combobox {
-    position: relative;
-    display: block;
-  }
-  .dg-combobox__label {
-    display: block;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-white);
-    line-height: 1.5rem;
-  }
-  .dg-combobox__wrapper {
-    position: relative;
-    margin-top: calc(var(--spacing) * 2);
-    display: block;
-  }
-  .dg-combobox__input {
-    display: block;
-    width: 100%;
-    border-radius: var(--radius-md);
-    background-color: color-mix(in srgb, #fff 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-    }
-    padding-block: calc(var(--spacing) * 1.5);
-    padding-right: calc(var(--spacing) * 12);
-    padding-left: calc(var(--spacing) * 3);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    color: var(--color-white);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-    outline-offset: calc(1px * -1);
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-    &::placeholder {
-      color: var(--color-dg-slate);
-    }
-    @media (width >= 40rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-    line-height: 1.5rem;
-  }
-  .dg-combobox__input:focus {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-    outline-offset: calc(2px * -1);
-    outline-color: var(--color-dg-primary);
-  }
-  .dg-combobox__toggle {
-    position: absolute;
-    inset-block: calc(var(--spacing) * 0);
-    right: calc(var(--spacing) * 0);
-    display: flex;
-    align-items: center;
-    border-top-right-radius: var(--radius-md);
-    border-bottom-right-radius: var(--radius-md);
-    padding-inline: calc(var(--spacing) * 2);
-  }
-  .dg-combobox__toggle-icon {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-    color: var(--color-dg-muted);
-  }
-  .dg-combobox__options {
-    max-height: calc(var(--spacing) * 60);
-    overflow: auto;
-    border-radius: var(--radius-md);
-    background-color: var(--color-dg-charcoal);
-    padding-block: calc(var(--spacing) * 1);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    @media (width >= 40rem) {
-      font-size: var(--text-sm);
-      line-height: var(--tw-leading, var(--text-sm--line-height));
-    }
-    outline: 1px solid rgba(255, 255, 255, 0.1);
-    outline-offset: -1px;
-  }
-  .dg-combobox__option {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
-    color: var(--color-dg-platinum);
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: pointer;
-  }
-  .dg-combobox__option:hover {
-    background-color: var(--color-dg-primary);
-    color: var(--color-white);
-  }
-  .dg-combobox__option.selected {
-    background-color: var(--color-dg-primary);
-    color: var(--color-white);
-  }
-  .dg-combobox__option-text {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .dg-combobox__check {
-    position: absolute;
-    inset-block: calc(var(--spacing) * 0);
-    right: calc(var(--spacing) * 0);
-    display: flex;
-    align-items: center;
-    padding-right: calc(var(--spacing) * 4);
-    color: var(--color-white);
-  }
-  .dg-combobox__check-icon {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
-  .dg-combobox--with-check .dg-combobox__option {
-    position: relative;
-    padding-right: calc(var(--spacing) * 9);
-  }
-  .dg-combobox--with-check .dg-combobox__option.selected .dg-combobox__check {
-    display: flex;
-  }
-  .dg-combobox--with-avatar .dg-combobox__option {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .dg-combobox__avatar {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-    flex-shrink: 0;
-    border-radius: calc(infinity * 1px);
-  }
-  .dg-combobox--with-status .dg-combobox__option {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-  .dg-combobox__status {
-    display: inline-block;
-    width: calc(var(--spacing) * 2);
-    height: calc(var(--spacing) * 2);
-    flex-shrink: 0;
-    border-radius: calc(infinity * 1px);
-  }
-  .dg-combobox__status--online {
-    background-color: var(--color-dg-success);
-  }
-  .dg-combobox__status--offline {
-    background-color: var(--color-dg-muted);
-  }
-  .dg-stacked {
-    min-height: 100%;
-  }
-  .dg-stacked__nav {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
-    border-color: var(--color-dg-border);
-    background-color: var(--dg-bg-default, #0b0b0c);
-  }
-  .dg-stacked__nav-container {
-    margin-inline: auto;
-    max-width: var(--container-7xl);
-    padding-inline: calc(var(--spacing) * 4);
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
-  }
-  .dg-stacked__nav-bar {
-    display: flex;
-    height: calc(var(--spacing) * 16);
-    justify-content: space-between;
-  }
-  .dg-stacked__nav-left {
-    display: flex;
-  }
-  .dg-stacked__logo {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-  }
-  .dg-stacked__logo img {
-    height: calc(var(--spacing) * 8);
-    width: auto;
-  }
-  .dg-stacked__nav-links {
-    display: none;
-    @media (width >= 40rem) {
-      margin-block: -1px;
-    }
-    @media (width >= 40rem) {
-      margin-left: calc(var(--spacing) * 6);
-    }
-    @media (width >= 40rem) {
-      display: flex;
-    }
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 8) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
-  .dg-stacked__nav-link {
-    display: inline-flex;
-    align-items: center;
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-    border-color: transparent;
-    padding-inline: calc(var(--spacing) * 1);
-    padding-top: calc(var(--spacing) * 1);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-dg-muted);
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-dg-platinum);
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-dg-fog);
-      }
-    }
-  }
-  .dg-stacked__nav-link--active {
-    border-color: var(--color-dg-primary);
-    color: var(--color-white);
-  }
-  .dg-stacked__nav-right {
-    display: none;
-    @media (width >= 40rem) {
-      margin-left: calc(var(--spacing) * 6);
-    }
-    @media (width >= 40rem) {
-      display: flex;
-    }
-    @media (width >= 40rem) {
-      align-items: center;
-    }
-  }
-  .dg-stacked__notification-btn {
-    position: relative;
-    border-radius: calc(infinity * 1px);
-    padding: calc(var(--spacing) * 1);
-    color: var(--color-dg-muted);
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-    &:focus {
-      outline-offset: 2px;
-    }
-    &:focus {
-      outline-color: var(--color-dg-primary);
-    }
-  }
-  .dg-stacked__notification-btn svg {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-  }
-  .dg-stacked__profile {
-    position: relative;
-    margin-left: calc(var(--spacing) * 3);
-  }
-  .dg-stacked__profile-btn {
-    position: relative;
-    display: flex;
-    max-width: var(--container-xs);
-    align-items: center;
-    border-radius: calc(infinity * 1px);
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-    &:focus-visible {
-      outline-offset: 2px;
-    }
-    &:focus-visible {
-      outline-color: var(--color-dg-primary);
-    }
-  }
-  .dg-stacked__profile-btn img {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-    border-radius: calc(infinity * 1px);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-    outline-offset: calc(1px * -1);
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-  }
-  .dg-stacked__profile-menu {
-    width: calc(var(--spacing) * 48);
-    transform-origin: 100% 0;
-    border-radius: var(--radius-md);
-    padding-block: calc(var(--spacing) * 1);
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
-    background-color: var(--dg-bg-default, #0b0b0c);
-  }
-  .dg-stacked__profile-menu a {
-    display: block;
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 2);
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-dg-platinum);
-    &:focus {
-      background-color: color-mix(in srgb, #fff 5%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-      }
-    }
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-      @media (forced-colors: active) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-    }
-  }
-  .dg-stacked__mobile-toggle {
-    margin-right: calc(var(--spacing) * -2);
-    display: flex;
-    align-items: center;
-    @media (width >= 40rem) {
-      display: none;
-    }
-  }
-  .dg-stacked__mobile-btn {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-md);
-    padding: calc(var(--spacing) * 2);
-    color: var(--color-dg-muted);
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-        }
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-white);
-      }
-    }
-    &:focus {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-    &:focus {
-      outline-offset: 2px;
-    }
-    &:focus {
-      outline-color: var(--color-dg-primary);
-    }
-    background-color: var(--dg-bg-default, #0b0b0c);
-  }
-  .dg-stacked__mobile-btn svg {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-  }
-  .dg-stacked__mobile-menu {
-    @media (width >= 40rem) {
-      display: none;
-    }
-  }
-  .dg-stacked__mobile-links {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-    padding-top: calc(var(--spacing) * 2);
-    padding-bottom: calc(var(--spacing) * 3);
-  }
-  .dg-stacked__mobile-link {
-    display: block;
-    border-left-style: var(--tw-border-style);
-    border-left-width: 4px;
-    border-color: transparent;
-    padding-block: calc(var(--spacing) * 2);
-    padding-right: calc(var(--spacing) * 4);
-    padding-left: calc(var(--spacing) * 3);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-dg-muted);
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-dg-slate);
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-        }
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-dg-fog);
-      }
-    }
+  .dg-alert--warning .dg-alert__icon {
+    color: var(--color-dg-warning);
   }
-  .dg-stacked__mobile-link--active {
-    border-color: var(--color-dg-primary);
-    background-color: var(--color-dg-primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-dg-primary) 10%, transparent);
-    }
-    color: var(--color-dg-primary);
+  .dg-alert--success .dg-alert__icon {
+    color: var(--color-dg-success);
   }
-  .dg-stacked__mobile-user {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
-    border-color: var(--color-dg-border);
-    padding-top: calc(var(--spacing) * 4);
-    padding-bottom: calc(var(--spacing) * 3);
+  .dg-alert--danger .dg-alert__icon {
+    color: var(--color-dg-danger);
   }
-  .dg-stacked__mobile-user-info {
-    display: flex;
-    align-items: center;
-    padding-inline: calc(var(--spacing) * 4);
+  .dg-alert--info .dg-alert__icon {
+    color: var(--color-dg-secondary);
   }
-  .dg-stacked__mobile-user-avatar {
-    flex-shrink: 0;
+  .dg-alert--warning .dg-alert__title {
+    color: var(--color-dg-warning);
   }
-  .dg-stacked__mobile-user-avatar img {
-    width: calc(var(--spacing) * 10);
-    height: calc(var(--spacing) * 10);
-    border-radius: calc(infinity * 1px);
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-    outline-offset: calc(1px * -1);
-    outline-color: color-mix(in srgb, #fff 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-    }
+  .dg-alert--success .dg-alert__title {
+    color: var(--color-dg-success);
   }
-  .dg-stacked__mobile-user-details {
-    margin-left: calc(var(--spacing) * 3);
+  .dg-alert--danger .dg-alert__title {
+    color: var(--color-dg-danger);
   }
-  .dg-stacked__mobile-user-name {
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-white);
+  .dg-alert--info .dg-alert__title {
+    color: var(--color-dg-secondary);
   }
-  .dg-stacked__mobile-user-email {
+  .dg-alert__actions .dg-btn {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-dg-muted);
-  }
-  .dg-stacked__mobile-user-actions {
-    margin-top: calc(var(--spacing) * 3);
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
-  .dg-stacked__mobile-user-actions a {
-    display: block;
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 2);
-    font-size: var(--text-base);
-    line-height: var(--tw-leading, var(--text-base--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-dg-muted);
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
-        }
-      }
-    }
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-dg-fog);
-      }
-    }
-  }
-  .dg-stacked__content {
-    padding-block: calc(var(--spacing) * 10);
-  }
-  .dg-stacked__page-header {
-    margin-inline: auto;
-    max-width: var(--container-7xl);
-    padding-inline: calc(var(--spacing) * 4);
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
   }
-  .dg-stacked__page-title {
-    font-size: var(--text-3xl);
-    line-height: var(--tw-leading, var(--text-3xl--line-height));
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
-    color: var(--color-white);
+  .dg-alert__list li {
+    padding-left: 0.25rem;
   }
-  .dg-stacked__main {
-    margin-inline: auto;
-    max-width: var(--container-7xl);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 8);
-    @media (width >= 40rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 8);
-    }
+  .dg-alert__dismiss:hover {
+    color: var(--color-dg-text);
   }
 }
 @property --tw-translate-x {
@@ -4018,58 +3219,11 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
   initial-value: solid;
 }
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -4078,10 +3232,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -4209,10 +3359,13 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-x-reverse {
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
   syntax: "*";
   inherits: false;
-  initial-value: 0;
 }
 @keyframes spin {
   to {
@@ -4230,20 +3383,9 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
-      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -4273,7 +3415,8 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-space-x-reverse: 0;
+      --tw-ease: initial;
+      --tw-tracking: initial;
     }
   }
 }