elseware-ui 2.32.0 → 2.33.0

package/dist/index.css

@@ -517,6 +517,9 @@ video {
 .ml-5 {
   margin-left: 1.25rem;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .mr-2 {
   margin-right: .5rem;
 }
@@ -580,6 +583,9 @@ video {
 .h-2 {
   height: .5rem;
 }
+.h-2\.5 {
+  height: .625rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -631,6 +637,9 @@ video {
 .h-\[300px\] {
   height: 300px;
 }
+.h-\[320px\] {
+  height: 320px;
+}
 .h-\[3px\] {
   height: 3px;
 }
@@ -719,6 +728,12 @@ video {
 .w-16 {
   width: 4rem;
 }
+.w-2 {
+  width: .5rem;
+}
+.w-2\.5 {
+  width: .625rem;
+}
 .w-20 {
   width: 5rem;
 }
@@ -746,6 +761,9 @@ video {
 .w-64 {
   width: 16rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -862,6 +880,9 @@ video {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-\[140px\] {
+  min-width: 140px;
+}
 .min-w-\[180px\] {
   min-width: 180px;
 }
@@ -886,6 +907,9 @@ video {
 .max-w-5xl {
   max-width: 64rem;
 }
+.max-w-7xl {
+  max-width: 80rem;
+}
 .max-w-\[1000px\] {
   max-width: 1000px;
 }
@@ -895,6 +919,9 @@ video {
 .max-w-\[1300px\] {
   max-width: 1300px;
 }
+.max-w-\[180px\] {
+  max-width: 180px;
+}
 .max-w-\[500px\] {
   max-width: 500px;
 }
@@ -916,6 +943,9 @@ video {
 .max-w-none {
   max-width: none;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1025,6 +1055,9 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-grab {
   cursor: grab;
 }
@@ -1110,6 +1143,9 @@ video {
 .gap-1 {
   gap: .25rem;
 }
+.gap-1\.5 {
+  gap: .375rem;
+}
 .gap-10 {
   gap: 2.5rem;
 }
@@ -1140,6 +1176,13 @@ video {
 .gap-\[4px\] {
   gap: 4px;
 }
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+.gap-y-2 {
+  row-gap: .5rem;
+}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse:0;
   margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)));
@@ -1198,6 +1241,11 @@ video {
 .scroll-smooth {
   scroll-behavior: smooth;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
@@ -1289,6 +1337,10 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(11 107 5/var(--tw-border-opacity,1));
 }
+.border-\[\#2a2d35\] {
+  --tw-border-opacity:1;
+  border-color: rgb(42 45 53/var(--tw-border-opacity,1));
+}
 .border-cyan-400 {
   --tw-border-opacity:1;
   border-color: rgb(34 211 238/var(--tw-border-opacity,1));
@@ -1467,6 +1519,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(239 68 68/var(--tw-border-opacity,1));
 }
+.border-red-500\/30 {
+  border-color: rgba(239, 68, 68, .3);
+}
 .border-red-600 {
   --tw-border-opacity:1;
   border-color: rgb(220 38 38/var(--tw-border-opacity,1));
@@ -1532,6 +1587,10 @@ video {
 .border-t-eui-dark-400\/40 {
   border-top-color: rgba(64, 69, 71, .4);
 }
+.border-t-gray-200 {
+  --tw-border-opacity:1;
+  border-top-color: rgb(229 231 235/var(--tw-border-opacity,1));
+}
 .border-t-gray-800 {
   border-top-color: rgb(31 41 55/var(--tw-border-opacity,1));
 }
@@ -1539,6 +1598,24 @@ video {
 .border-t-gray-800 {
   --tw-border-opacity:1;
 }
+.bg-\[\#08090d\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(8 9 13/var(--tw-bg-opacity,1));
+}
+.bg-\[\#111217\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(17 18 23/var(--tw-bg-opacity,1));
+}
+.bg-\[\#111217\]\/40 {
+  background-color: rgba(17, 18, 23, .4);
+}
+.bg-\[\#111217\]\/60 {
+  background-color: rgba(17, 18, 23, .6);
+}
+.bg-\[\#181b21\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(24 27 33/var(--tw-bg-opacity,1));
+}
 .bg-black {
   --tw-bg-opacity:1;
   background-color: rgb(0 0 0/var(--tw-bg-opacity,1));
@@ -1711,6 +1788,12 @@ video {
   --tw-bg-opacity:1;
   background-color: rgb(239 68 68/var(--tw-bg-opacity,1));
 }
+.bg-red-500\/10 {
+  background-color: rgba(239, 68, 68, .1);
+}
+.bg-red-500\/5 {
+  background-color: rgba(239, 68, 68, .05);
+}
 .bg-red-600\/40 {
   background-color: rgba(220, 38, 38, .4);
 }
@@ -1740,6 +1823,9 @@ video {
 .bg-white\/5 {
   background-color: hsla(0, 0%, 100%, .05);
 }
+.bg-white\/\[0\.03\] {
+  background-color: hsla(0, 0%, 100%, .03);
+}
 .bg-yellow-600\/40 {
   background-color: rgba(202, 138, 4, .4);
 }
@@ -2435,6 +2521,9 @@ video {
 .tracking-\[0\.2em\] {
   letter-spacing: .2em;
 }
+.tracking-tight {
+  letter-spacing: -.025em;
+}
 .tracking-wide {
   letter-spacing: .025em;
 }
@@ -2474,6 +2563,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(110 231 183/var(--tw-text-opacity,1));
 }
+.text-emerald-400 {
+  --tw-text-opacity:1;
+  color: rgb(52 211 153/var(--tw-text-opacity,1));
+}
 .text-eui-danger-300 {
   --tw-text-opacity:1;
   color: rgb(234 72 85/var(--tw-text-opacity,1));
@@ -2650,6 +2743,13 @@ video {
   --tw-text-opacity:1;
   color: rgb(192 132 252/var(--tw-text-opacity,1));
 }
+.text-red-200 {
+  --tw-text-opacity:1;
+  color: rgb(254 202 202/var(--tw-text-opacity,1));
+}
+.text-red-200\/70 {
+  color: hsla(0, 96%, 89%, .7);
+}
 .text-red-300 {
   --tw-text-opacity:1;
   color: rgb(252 165 165/var(--tw-text-opacity,1));
@@ -3337,6 +3437,9 @@ video {
 .hover\:bg-purple-500\/20:hover {
   background-color: rgba(168, 85, 247, .2);
 }
+.hover\:bg-red-500\/10:hover {
+  background-color: rgba(239, 68, 68, .1);
+}
 .hover\:bg-white\/10:hover {
   background-color: hsla(0, 0%, 100%, .1);
 }
@@ -3383,6 +3486,9 @@ video {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:opacity-80:hover {
+  opacity: .8;
+}
 .hover\:shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.2\)\,0_10px_40px_rgba\(0\,0\,0\,0\.4\)\]:hover {
   --tw-shadow:0 0 0 1px hsla(0,0%,100%,.2),0 10px 40px rgba(0,0,0,.4);
   --tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 10px 40px var(--tw-shadow-color);
@@ -3959,6 +4065,9 @@ video {
   .lg\:block {
     display: block;
   }
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .lg\:px-\[150px\] {
     padding-left: 150px;
     padding-right: 150px;
@@ -4573,6 +4682,9 @@ video {
 .ml-5 {
   margin-left: 1.25rem;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .mr-2 {
   margin-right: .5rem;
 }
@@ -4636,6 +4748,9 @@ video {
 .h-2 {
   height: .5rem;
 }
+.h-2\.5 {
+  height: .625rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -4687,6 +4802,9 @@ video {
 .h-\[300px\] {
   height: 300px;
 }
+.h-\[320px\] {
+  height: 320px;
+}
 .h-\[3px\] {
   height: 3px;
 }
@@ -4775,6 +4893,12 @@ video {
 .w-16 {
   width: 4rem;
 }
+.w-2 {
+  width: .5rem;
+}
+.w-2\.5 {
+  width: .625rem;
+}
 .w-20 {
   width: 5rem;
 }
@@ -4802,6 +4926,9 @@ video {
 .w-64 {
   width: 16rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -4918,6 +5045,9 @@ video {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-\[140px\] {
+  min-width: 140px;
+}
 .min-w-\[180px\] {
   min-width: 180px;
 }
@@ -4942,6 +5072,9 @@ video {
 .max-w-5xl {
   max-width: 64rem;
 }
+.max-w-7xl {
+  max-width: 80rem;
+}
 .max-w-\[1000px\] {
   max-width: 1000px;
 }
@@ -4951,6 +5084,9 @@ video {
 .max-w-\[1300px\] {
   max-width: 1300px;
 }
+.max-w-\[180px\] {
+  max-width: 180px;
+}
 .max-w-\[500px\] {
   max-width: 500px;
 }
@@ -4972,6 +5108,9 @@ video {
 .max-w-none {
   max-width: none;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -5081,6 +5220,9 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-grab {
   cursor: grab;
 }
@@ -5166,6 +5308,9 @@ video {
 .gap-1 {
   gap: .25rem;
 }
+.gap-1\.5 {
+  gap: .375rem;
+}
 .gap-10 {
   gap: 2.5rem;
 }
@@ -5196,6 +5341,13 @@ video {
 .gap-\[4px\] {
   gap: 4px;
 }
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+.gap-y-2 {
+  row-gap: .5rem;
+}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse:0;
   margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)));
@@ -5254,6 +5406,11 @@ video {
 .scroll-smooth {
   scroll-behavior: smooth;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
@@ -5345,6 +5502,10 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(11 107 5/var(--tw-border-opacity,1));
 }
+.border-\[\#2a2d35\] {
+  --tw-border-opacity:1;
+  border-color: rgb(42 45 53/var(--tw-border-opacity,1));
+}
 .border-cyan-400 {
   --tw-border-opacity:1;
   border-color: rgb(34 211 238/var(--tw-border-opacity,1));
@@ -5523,6 +5684,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(239 68 68/var(--tw-border-opacity,1));
 }
+.border-red-500\/30 {
+  border-color: rgba(239, 68, 68, .3);
+}
 .border-red-600 {
   --tw-border-opacity:1;
   border-color: rgb(220 38 38/var(--tw-border-opacity,1));
@@ -5588,6 +5752,10 @@ video {
 .border-t-eui-dark-400\/40 {
   border-top-color: rgba(64, 69, 71, .4);
 }
+.border-t-gray-200 {
+  --tw-border-opacity:1;
+  border-top-color: rgb(229 231 235/var(--tw-border-opacity,1));
+}
 .border-t-gray-800 {
   border-top-color: rgb(31 41 55/var(--tw-border-opacity,1));
 }
@@ -5595,6 +5763,24 @@ video {
 .border-t-gray-800 {
   --tw-border-opacity:1;
 }
+.bg-\[\#08090d\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(8 9 13/var(--tw-bg-opacity,1));
+}
+.bg-\[\#111217\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(17 18 23/var(--tw-bg-opacity,1));
+}
+.bg-\[\#111217\]\/40 {
+  background-color: rgba(17, 18, 23, .4);
+}
+.bg-\[\#111217\]\/60 {
+  background-color: rgba(17, 18, 23, .6);
+}
+.bg-\[\#181b21\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(24 27 33/var(--tw-bg-opacity,1));
+}
 .bg-black {
   --tw-bg-opacity:1;
   background-color: rgb(0 0 0/var(--tw-bg-opacity,1));
@@ -5767,6 +5953,12 @@ video {
   --tw-bg-opacity:1;
   background-color: rgb(239 68 68/var(--tw-bg-opacity,1));
 }
+.bg-red-500\/10 {
+  background-color: rgba(239, 68, 68, .1);
+}
+.bg-red-500\/5 {
+  background-color: rgba(239, 68, 68, .05);
+}
 .bg-red-600\/40 {
   background-color: rgba(220, 38, 38, .4);
 }
@@ -5796,6 +5988,9 @@ video {
 .bg-white\/5 {
   background-color: hsla(0, 0%, 100%, .05);
 }
+.bg-white\/\[0\.03\] {
+  background-color: hsla(0, 0%, 100%, .03);
+}
 .bg-yellow-600\/40 {
   background-color: rgba(202, 138, 4, .4);
 }
@@ -6491,6 +6686,9 @@ video {
 .tracking-\[0\.2em\] {
   letter-spacing: .2em;
 }
+.tracking-tight {
+  letter-spacing: -.025em;
+}
 .tracking-wide {
   letter-spacing: .025em;
 }
@@ -6530,6 +6728,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(110 231 183/var(--tw-text-opacity,1));
 }
+.text-emerald-400 {
+  --tw-text-opacity:1;
+  color: rgb(52 211 153/var(--tw-text-opacity,1));
+}
 .text-eui-danger-300 {
   --tw-text-opacity:1;
   color: rgb(234 72 85/var(--tw-text-opacity,1));
@@ -6706,6 +6908,13 @@ video {
   --tw-text-opacity:1;
   color: rgb(192 132 252/var(--tw-text-opacity,1));
 }
+.text-red-200 {
+  --tw-text-opacity:1;
+  color: rgb(254 202 202/var(--tw-text-opacity,1));
+}
+.text-red-200\/70 {
+  color: hsla(0, 96%, 89%, .7);
+}
 .text-red-300 {
   --tw-text-opacity:1;
   color: rgb(252 165 165/var(--tw-text-opacity,1));
@@ -7478,6 +7687,9 @@ video {
 .hover\:bg-purple-500\/20:hover {
   background-color: rgba(168, 85, 247, .2);
 }
+.hover\:bg-red-500\/10:hover {
+  background-color: rgba(239, 68, 68, .1);
+}
 .hover\:bg-white\/10:hover {
   background-color: hsla(0, 0%, 100%, .1);
 }
@@ -7524,6 +7736,9 @@ video {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:opacity-80:hover {
+  opacity: .8;
+}
 .hover\:shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.2\)\,0_10px_40px_rgba\(0\,0\,0\,0\.4\)\]:hover {
   --tw-shadow:0 0 0 1px hsla(0,0%,100%,.2),0 10px 40px rgba(0,0,0,.4);
   --tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 10px 40px var(--tw-shadow-color);
@@ -8100,12 +8315,110 @@ video {
   .lg\:block {
     display: block;
   }
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .lg\:px-\[150px\] {
     padding-left: 150px;
     padding-right: 150px;
   }
 }
 
+/* src/components/data-display/graphs-v2/styles/graph.css */
+.eui-graph {
+  --eui-graph-panel-bg:#111217;
+  --eui-graph-panel-border:#2a2d35;
+  --eui-graph-text-primary:#f3f4f6;
+  --eui-graph-text-secondary:#9ca3af;
+  --eui-graph-text-muted:#6b7280;
+  --eui-graph-grid:#2a2d35;
+  --eui-graph-axis:#8b949e;
+  --eui-graph-tooltip-bg:#181b21;
+  --eui-graph-tooltip-border:#2a2d35;
+  --eui-graph-tooltip-shadow:0 16px 40px rgba(0,0,0,.35);
+  color: var(--eui-graph-text-primary);
+}
+.eui-graph-panel {
+  background: var(--eui-graph-panel-bg);
+  border: 1px solid var(--eui-graph-panel-border);
+  border-radius: .875rem;
+}
+.eui-graph-title {
+  color: var(--eui-graph-text-primary);
+}
+.eui-graph-description {
+  color: var(--eui-graph-text-secondary);
+}
+.eui-graph-muted {
+  color: var(--eui-graph-text-muted);
+}
+.eui-graph .recharts-wrapper {
+  font-family: inherit;
+}
+.eui-graph .recharts-cartesian-grid-horizontal line,
+.eui-graph .recharts-cartesian-grid-vertical line {
+  stroke: var(--eui-graph-grid);
+  stroke-opacity: .65;
+}
+.eui-graph .recharts-cartesian-axis-line,
+.eui-graph .recharts-cartesian-axis-tick-line {
+  stroke: var(--eui-graph-axis);
+  stroke-opacity: .4;
+}
+.eui-graph .recharts-cartesian-axis-tick-value {
+  fill: var(--eui-graph-text-secondary);
+  font-size: .75rem;
+}
+.eui-graph .recharts-legend-item-text {
+  color: var(--eui-graph-text-secondary) !important;
+  font-size: .75rem;
+}
+.eui-graph .recharts-tooltip-wrapper {
+  outline: none;
+}
+.eui-graph .recharts-default-tooltip {
+  background: var(--eui-graph-tooltip-bg) !important;
+  border: 1px solid var(--eui-graph-tooltip-border) !important;
+  border-radius: .75rem !important;
+  box-shadow: var(--eui-graph-tooltip-shadow);
+  color: var(--eui-graph-text-primary) !important;
+}
+.eui-graph .recharts-tooltip-label {
+  color: var(--eui-graph-text-primary) !important;
+  font-weight: 600;
+  margin-bottom: .375rem;
+}
+.eui-graph .recharts-tooltip-item {
+  color: var(--eui-graph-text-secondary) !important;
+  font-size: .75rem;
+}
+.eui-graph .recharts-active-dot {
+  filter: drop-shadow(0 0 8px rgba(125, 211, 252, .45));
+}
+.eui-graph .recharts-line-curve {
+  filter: drop-shadow(0 0 4px rgba(125, 211, 252, .2));
+}
+.eui-graph-loading {
+  animation: eui-graph-shimmer 1.4s ease infinite;
+  background:
+    linear-gradient(
+      90deg,
+      hsla(0, 0%, 100%, .04) 25%,
+      hsla(0, 0%, 100%, .08) 37%,
+      hsla(0, 0%, 100%, .04) 63%);
+  background-size: 400% 100%;
+  overflow: hidden;
+  position: relative;
+}
+@keyframes eui-graph-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
 /* src/styles/components/markdown/index.css */
 *,
 :after,
@@ -8625,6 +8938,9 @@ video {
 .ml-5 {
   margin-left: 1.25rem;
 }
+.ml-auto {
+  margin-left: auto;
+}
 .mr-2 {
   margin-right: .5rem;
 }
@@ -8688,6 +9004,9 @@ video {
 .h-2 {
   height: .5rem;
 }
+.h-2\.5 {
+  height: .625rem;
+}
 .h-20 {
   height: 5rem;
 }
@@ -8739,6 +9058,9 @@ video {
 .h-\[300px\] {
   height: 300px;
 }
+.h-\[320px\] {
+  height: 320px;
+}
 .h-\[3px\] {
   height: 3px;
 }
@@ -8827,6 +9149,12 @@ video {
 .w-16 {
   width: 4rem;
 }
+.w-2 {
+  width: .5rem;
+}
+.w-2\.5 {
+  width: .625rem;
+}
 .w-20 {
   width: 5rem;
 }
@@ -8854,6 +9182,9 @@ video {
 .w-64 {
   width: 16rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-72 {
   width: 18rem;
 }
@@ -8970,6 +9301,9 @@ video {
 .min-w-\[120px\] {
   min-width: 120px;
 }
+.min-w-\[140px\] {
+  min-width: 140px;
+}
 .min-w-\[180px\] {
   min-width: 180px;
 }
@@ -8994,6 +9328,9 @@ video {
 .max-w-5xl {
   max-width: 64rem;
 }
+.max-w-7xl {
+  max-width: 80rem;
+}
 .max-w-\[1000px\] {
   max-width: 1000px;
 }
@@ -9003,6 +9340,9 @@ video {
 .max-w-\[1300px\] {
   max-width: 1300px;
 }
+.max-w-\[180px\] {
+  max-width: 180px;
+}
 .max-w-\[500px\] {
   max-width: 500px;
 }
@@ -9024,6 +9364,9 @@ video {
 .max-w-none {
   max-width: none;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -9133,6 +9476,9 @@ video {
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+.cursor-default {
+  cursor: default;
+}
 .cursor-grab {
   cursor: grab;
 }
@@ -9218,6 +9564,9 @@ video {
 .gap-1 {
   gap: .25rem;
 }
+.gap-1\.5 {
+  gap: .375rem;
+}
 .gap-10 {
   gap: 2.5rem;
 }
@@ -9248,6 +9597,13 @@ video {
 .gap-\[4px\] {
   gap: 4px;
 }
+.gap-x-4 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+.gap-y-2 {
+  row-gap: .5rem;
+}
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse:0;
   margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse)));
@@ -9306,6 +9662,11 @@ video {
 .scroll-smooth {
   scroll-behavior: smooth;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
@@ -9397,6 +9758,10 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(11 107 5/var(--tw-border-opacity,1));
 }
+.border-\[\#2a2d35\] {
+  --tw-border-opacity:1;
+  border-color: rgb(42 45 53/var(--tw-border-opacity,1));
+}
 .border-cyan-400 {
   --tw-border-opacity:1;
   border-color: rgb(34 211 238/var(--tw-border-opacity,1));
@@ -9575,6 +9940,9 @@ video {
   --tw-border-opacity:1;
   border-color: rgb(239 68 68/var(--tw-border-opacity,1));
 }
+.border-red-500\/30 {
+  border-color: rgba(239, 68, 68, .3);
+}
 .border-red-600 {
   --tw-border-opacity:1;
   border-color: rgb(220 38 38/var(--tw-border-opacity,1));
@@ -9640,6 +10008,10 @@ video {
 .border-t-eui-dark-400\/40 {
   border-top-color: rgba(64, 69, 71, .4);
 }
+.border-t-gray-200 {
+  --tw-border-opacity:1;
+  border-top-color: rgb(229 231 235/var(--tw-border-opacity,1));
+}
 .border-t-gray-800 {
   border-top-color: rgb(31 41 55/var(--tw-border-opacity,1));
 }
@@ -9647,6 +10019,24 @@ video {
 .border-t-gray-800 {
   --tw-border-opacity:1;
 }
+.bg-\[\#08090d\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(8 9 13/var(--tw-bg-opacity,1));
+}
+.bg-\[\#111217\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(17 18 23/var(--tw-bg-opacity,1));
+}
+.bg-\[\#111217\]\/40 {
+  background-color: rgba(17, 18, 23, .4);
+}
+.bg-\[\#111217\]\/60 {
+  background-color: rgba(17, 18, 23, .6);
+}
+.bg-\[\#181b21\] {
+  --tw-bg-opacity:1;
+  background-color: rgb(24 27 33/var(--tw-bg-opacity,1));
+}
 .bg-black {
   --tw-bg-opacity:1;
   background-color: rgb(0 0 0/var(--tw-bg-opacity,1));
@@ -9819,6 +10209,12 @@ video {
   --tw-bg-opacity:1;
   background-color: rgb(239 68 68/var(--tw-bg-opacity,1));
 }
+.bg-red-500\/10 {
+  background-color: rgba(239, 68, 68, .1);
+}
+.bg-red-500\/5 {
+  background-color: rgba(239, 68, 68, .05);
+}
 .bg-red-600\/40 {
   background-color: rgba(220, 38, 38, .4);
 }
@@ -9848,6 +10244,9 @@ video {
 .bg-white\/5 {
   background-color: hsla(0, 0%, 100%, .05);
 }
+.bg-white\/\[0\.03\] {
+  background-color: hsla(0, 0%, 100%, .03);
+}
 .bg-yellow-600\/40 {
   background-color: rgba(202, 138, 4, .4);
 }
@@ -10543,6 +10942,9 @@ video {
 .tracking-\[0\.2em\] {
   letter-spacing: .2em;
 }
+.tracking-tight {
+  letter-spacing: -.025em;
+}
 .tracking-wide {
   letter-spacing: .025em;
 }
@@ -10582,6 +10984,10 @@ video {
   --tw-text-opacity:1;
   color: rgb(110 231 183/var(--tw-text-opacity,1));
 }
+.text-emerald-400 {
+  --tw-text-opacity:1;
+  color: rgb(52 211 153/var(--tw-text-opacity,1));
+}
 .text-eui-danger-300 {
   --tw-text-opacity:1;
   color: rgb(234 72 85/var(--tw-text-opacity,1));
@@ -10758,6 +11164,13 @@ video {
   --tw-text-opacity:1;
   color: rgb(192 132 252/var(--tw-text-opacity,1));
 }
+.text-red-200 {
+  --tw-text-opacity:1;
+  color: rgb(254 202 202/var(--tw-text-opacity,1));
+}
+.text-red-200\/70 {
+  color: hsla(0, 96%, 89%, .7);
+}
 .text-red-300 {
   --tw-text-opacity:1;
   color: rgb(252 165 165/var(--tw-text-opacity,1));
@@ -11559,6 +11972,9 @@ video {
 .hover\:bg-purple-500\/20:hover {
   background-color: rgba(168, 85, 247, .2);
 }
+.hover\:bg-red-500\/10:hover {
+  background-color: rgba(239, 68, 68, .1);
+}
 .hover\:bg-white\/10:hover {
   background-color: hsla(0, 0%, 100%, .1);
 }
@@ -11605,6 +12021,9 @@ video {
 .hover\:opacity-100:hover {
   opacity: 1;
 }
+.hover\:opacity-80:hover {
+  opacity: .8;
+}
 .hover\:shadow-\[0_0_0_1px_rgba\(255\,255\,255\,0\.2\)\,0_10px_40px_rgba\(0\,0\,0\,0\.4\)\]:hover {
   --tw-shadow:0 0 0 1px hsla(0,0%,100%,.2),0 10px 40px rgba(0,0,0,.4);
   --tw-shadow-colored:0 0 0 1px var(--tw-shadow-color),0 10px 40px var(--tw-shadow-color);
@@ -12181,6 +12600,9 @@ video {
   .lg\:block {
     display: block;
   }
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .lg\:px-\[150px\] {
     padding-left: 150px;
     padding-right: 150px;