@octohirono/stitch-design-system 0.2.0 → 0.4.0

package/dist/style.css

@@ -15,6 +15,7 @@
   --stitch-accent-hover: color-mix(in srgb, var(--stitch-accent), black 12%);
   --stitch-accent-active: color-mix(in srgb, var(--stitch-accent), black 22%);
   --stitch-accent-text: #0c0a09;
+  --stitch-brand: var(--stitch-accent);
   --stitch-link: #3398e1;
   --stitch-cat-1: #3ba6f1;
   --stitch-cat-2: #78716c;
@@ -62,11 +63,11 @@
   --stitch-text-disabled: color-mix(in srgb, var(--stitch-text-muted), var(--stitch-bg-canvas) 45%);
   --stitch-bg-disabled: #f0f0f0;
   --stitch-focus-ring: var(--stitch-accent);
-  --stitch-spacing-xs: 4px;
-  --stitch-spacing-sm: 8px;
-  --stitch-spacing-md: 12px;
-  --stitch-spacing-lg: 16px;
-  --stitch-spacing-xl: 24px;
+  --stitch-spacing-xs: var(--stitch-space-4, 4px);
+  --stitch-spacing-sm: var(--stitch-space-8, 8px);
+  --stitch-spacing-md: var(--stitch-space-12, 12px);
+  --stitch-spacing-lg: var(--stitch-space-16, 16px);
+  --stitch-spacing-xl: var(--stitch-space-24, 24px);
   --stitch-mask-bg: rgba(0,0,0,.45);
   --stitch-height-sm: 32px;
   --stitch-height-base: 40px;
@@ -74,6 +75,37 @@
   --stitch-motion-duration-fast: 120ms;
   --stitch-motion-duration-base: 200ms;
   --stitch-motion-ease: cubic-bezier(.4,0,.2,1);
+  --stitch-text-caption: 10px;
+  --stitch-leading-caption: 2.3;
+  --stitch-text-body-lg: 16px;
+  --stitch-leading-body-lg: 1.69;
+  --stitch-tracking-body-lg: 0.048px;
+  --stitch-text-subheading: 20px;
+  --stitch-leading-subheading: 1.2;
+  --stitch-tracking-subheading: -0.1px;
+  --stitch-text-heading-sm: 32px;
+  --stitch-leading-heading-sm: 1.25;
+  --stitch-tracking-heading-sm: -0.8px;
+  --stitch-text-display: 52px;
+  --stitch-leading-display: 1.12;
+  --stitch-tracking-display: -1.092px;
+  --stitch-space-unit: 4px;
+  --stitch-space-4: 4px;
+  --stitch-space-8: 8px;
+  --stitch-space-12: 12px;
+  --stitch-space-16: 16px;
+  --stitch-space-24: 24px;
+  --stitch-space-32: 32px;
+  --stitch-space-40: 40px;
+  --stitch-space-48: 48px;
+  --stitch-space-64: 64px;
+  --stitch-space-80: 80px;
+  --stitch-space-96: 96px;
+  --stitch-space-160: 160px;
+  --stitch-page-max-width: 1200px;
+  --stitch-section-gap: 96px;
+  --stitch-card-padding: 24px;
+  --stitch-element-gap: 8px;
 }
 ._btn_18xhb_1 {
   position: relative;
@@ -363,7 +395,7 @@
   flex-shrink: 0;
   color: currentColor;
 }
-._image_15m2u_1 {
+._image_94mwe_1 {
   --img-matte: var(--stitch-bg-elevated);
   position: relative;
   display: inline-flex;
@@ -381,17 +413,17 @@
   vertical-align: middle;
   transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._img_15m2u_19 {
+._img_94mwe_19 {
   display: block;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._loaded_15m2u_26 ._img_15m2u_19 {
+._loaded_94mwe_26 ._img_94mwe_19 {
   opacity: 1;
 }
-._error_15m2u_29 {
+._error_94mwe_29 {
   flex-direction: column;
   gap: var(--stitch-spacing-sm);
   color: var(--stitch-text-disabled);
@@ -400,51 +432,51 @@
   font-weight: var(--stitch-font-weight-medium);
   line-height: var(--stitch-line-height-base);
 }
-._image-accent_15m2u_38 {
+._image-accent_94mwe_38 {
   --img-matte: var(--stitch-bg-accent);
 }
-._image-danger_15m2u_41 {
+._image-danger_94mwe_41 {
   --img-matte: var(--stitch-danger-bg);
 }
-._image-success_15m2u_44 {
+._image-success_94mwe_44 {
   --img-matte: var(--stitch-success-bg);
 }
-._image-warning_15m2u_47 {
+._image-warning_94mwe_47 {
   --img-matte: var(--stitch-warning-bg);
 }
-._image-info_15m2u_50 {
+._image-info_94mwe_50 {
   --img-matte: var(--stitch-info-bg);
 }
-._image-cat-1_15m2u_53 {
+._image-cat-1_94mwe_53 {
   --img-matte: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-bg-canvas) 88%);
 }
-._image-cat-2_15m2u_56 {
+._image-cat-2_94mwe_56 {
   --img-matte: color-mix(in srgb, var(--stitch-cat-2), var(--stitch-bg-canvas) 88%);
 }
-._image-cat-3_15m2u_59 {
+._image-cat-3_94mwe_59 {
   --img-matte: color-mix(in srgb, var(--stitch-cat-3), var(--stitch-bg-canvas) 88%);
 }
-._image-cat-4_15m2u_62 {
+._image-cat-4_94mwe_62 {
   --img-matte: color-mix(in srgb, var(--stitch-cat-4), var(--stitch-bg-canvas) 88%);
 }
-._image-cat-5_15m2u_65 {
+._image-cat-5_94mwe_65 {
   --img-matte: color-mix(in srgb, var(--stitch-cat-5), var(--stitch-bg-canvas) 88%);
 }
-._image-cat-6_15m2u_68 {
+._image-cat-6_94mwe_68 {
   --img-matte: color-mix(in srgb, var(--stitch-cat-6), var(--stitch-bg-canvas) 88%);
 }
-._preview_15m2u_71 {
+._preview_94mwe_71 {
   font: inherit;
   color: inherit;
   -webkit-appearance: none;
   appearance: none;
   cursor: zoom-in;
 }
-._preview_15m2u_71:focus-visible {
+._preview_94mwe_71:focus-visible {
   outline: 2px solid var(--stitch-focus-ring);
   outline-offset: 2px;
 }
-._mask_15m2u_82 {
+._mask_94mwe_82 {
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -452,49 +484,47 @@
   align-items: center;
   justify-content: center;
   background: var(--stitch-mask-bg);
-  animation: _stitch-image-fade-in_15m2u_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+  animation: _stitch-image-fade-in_94mwe_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._dialog_15m2u_92 {
+._dialog_94mwe_92 {
   position: relative;
   display: inline-flex;
   line-height: 0;
 }
-._previewImg_15m2u_97 {
+._previewImg_94mwe_97 {
   max-width: min(88vw, 1100px);
   max-height: 86vh;
   border-radius: var(--stitch-radius-image);
   box-shadow: var(--stitch-shadow-lg);
   object-fit: contain;
-  animation: _stitch-image-zoom-in_15m2u_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+  animation: _stitch-image-zoom-in_94mwe_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._closeBtn_15m2u_105 {
+._closeBtn_94mwe_105 {
   position: absolute;
-  top: var(--stitch-spacing-md);
-  right: var(--stitch-spacing-md);
+  top: var(--stitch-spacing-sm);
+  right: var(--stitch-spacing-sm);
   z-index: 1;
-  width: 40px;
-  height: 40px;
+  width: 28px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
-  color: var(--stitch-text-primary);
-  background: var(--stitch-bg-elevated);
-  border: var(--stitch-border-width) solid var(--stitch-border);
-  border-radius: var(--stitch-radius-button);
-  box-shadow: var(--stitch-shadow-sm);
+  color: var(--stitch-text-on-dark);
+  background: var(--stitch-mask-bg);
+  border: none;
+  border-radius: 50%;
   cursor: pointer;
-  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease), transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+  transition: transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._closeBtn_15m2u_105:hover {
-  background: var(--stitch-bg-card);
-  transform: scale(1.06);
+._closeBtn_94mwe_105:hover {
+  transform: scale(1.1);
 }
-._closeBtn_15m2u_105:focus-visible {
+._closeBtn_94mwe_105:focus-visible {
   outline: 2px solid var(--stitch-focus-ring);
   outline-offset: 2px;
 }
-@keyframes _stitch-image-fade-in_15m2u_1 {
+@keyframes _stitch-image-fade-in_94mwe_1 {
   from {
     opacity: 0;
   }
@@ -502,7 +532,7 @@
     opacity: 1;
   }
 }
-@keyframes _stitch-image-zoom-in_15m2u_1 {
+@keyframes _stitch-image-zoom-in_94mwe_1 {
   from {
     opacity: 0;
     transform: scale(0.92);
@@ -683,7 +713,7 @@
   font-weight: var(--stitch-font-weight-normal);
   font-size: var(--stitch-font-size-sm);
 }
-._collapse_xqb89_1 {
+._collapse_1t4ba_1 {
   box-sizing: border-box;
   position: relative;
   background: var(--stitch-bg-elevated);
@@ -693,10 +723,10 @@
   font-family: var(--stitch-font-body);
   transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._collapse_xqb89_1._disabled_xqb89_11 {
+._collapse_1t4ba_1._disabled_1t4ba_11 {
   opacity: 0.6;
 }
-._header_xqb89_14 {
+._header_1t4ba_14 {
   display: flex;
   align-items: center;
   gap: var(--stitch-spacing-md);
@@ -709,38 +739,38 @@
   font-family: inherit;
   color: var(--stitch-text-primary);
 }
-._header_xqb89_14:focus-visible {
+._header_1t4ba_14:focus-visible {
   outline: 2px solid var(--stitch-focus-ring);
   outline-offset: -2px;
 }
-._header_xqb89_14:disabled {
+._header_1t4ba_14:disabled {
   cursor: not-allowed;
 }
-._indicator_xqb89_34 {
+._indicator_1t4ba_34 {
   display: flex;
   flex-shrink: 0;
   color: var(--stitch-text-secondary);
   transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._expanded_xqb89_40 ._indicator_xqb89_34 {
+._expanded_1t4ba_40 ._indicator_1t4ba_34 {
   transform: rotate(180deg);
 }
-._text_xqb89_43 {
+._text_1t4ba_43 {
   flex: 1;
   font-size: var(--stitch-font-size-lg);
   font-weight: var(--stitch-font-weight-medium);
   color: var(--stitch-text-primary);
   line-height: var(--stitch-line-height-base);
 }
-._panel_xqb89_50 {
+._panel_1t4ba_50 {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._expanded_xqb89_40 ._panel_xqb89_50 {
+._expanded_1t4ba_40 ._panel_1t4ba_50 {
   grid-template-rows: 1fr;
 }
-._content_xqb89_58 {
+._content_1t4ba_58 {
   overflow: hidden;
   padding: 0 var(--stitch-spacing-xl);
   color: var(--stitch-text-secondary);
@@ -748,30 +778,30 @@
   line-height: var(--stitch-line-height-base);
   transition: padding var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._expanded_xqb89_40 ._content_xqb89_58 {
+._expanded_1t4ba_40 ._content_1t4ba_58 {
   padding-bottom: var(--stitch-spacing-xl);
 }
-._content_xqb89_58 a {
-  color: var(--stitch-accent);
+._content_1t4ba_58 a {
+  color: var(--stitch-link);
   text-decoration: none;
   font-weight: var(--stitch-font-weight-medium);
   transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._content_xqb89_58 a:hover {
-  color: var(--stitch-accent-hover);
+._content_1t4ba_58 a:hover {
+  color: color-mix(in srgb, var(--stitch-link), black 12%);
   text-decoration: underline;
 }
-._content_xqb89_58 p {
+._content_1t4ba_58 p {
   margin: 0 0 var(--stitch-spacing-sm) 0;
 }
-._content_xqb89_58 p:last-child {
+._content_1t4ba_58 p:last-child {
   margin-bottom: 0;
 }
-._content_xqb89_58 ul {
+._content_1t4ba_58 ul {
   margin: var(--stitch-spacing-sm) 0;
   padding-left: var(--stitch-spacing-xl);
 }
-._content_xqb89_58 li {
+._content_1t4ba_58 li {
   margin-bottom: var(--stitch-spacing-xs);
 }
 ._tabs_oy7wm_1 {
@@ -1498,14 +1528,69 @@
   line-height: var(--stitch-line-height-base);
   user-select: none;
 }
-._wrapper_13o0n_1 {
+._root_1mbik_1 {
+  overflow: hidden;
+  position: relative;
+}
+._viewport_1mbik_5 {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+._scrollbar_1mbik_10 {
+  display: flex;
+  user-select: none;
+  touch-action: none;
+  padding: var(--sa-track-pad);
+  background: transparent;
+  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._scrollbar_1mbik_10:hover {
+  background: var(--stitch-bg-section);
+}
+._scrollbar_1mbik_10[data-orientation='vertical'] {
+  width: var(--sa-size);
+}
+._scrollbar_1mbik_10[data-orientation='horizontal'] {
+  flex-direction: column;
+  height: var(--sa-size);
+}
+._thumb_1mbik_28 {
+  flex: 1;
+  position: relative;
+  background: var(--stitch-text-muted);
+  border-radius: var(--stitch-radius-button);
+  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._thumb_1mbik_28:hover {
+  background: var(--stitch-text-secondary);
+}
+._thumb_1mbik_28::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+  transform: translate(-50%, -50%);
+}
+._corner_1mbik_49 {
+  background: transparent;
+}
+._root_1mbik_1 {
+  --sa-size: 10px;
+  --sa-track-pad: 2px;
+}
+._wrapper_158od_1 {
   position: relative;
   display: inline-block;
   min-width: 160px;
   font-family: var(--stitch-font-body);
   user-select: none;
 }
-._trigger_13o0n_8 {
+._trigger_158od_8 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1519,73 +1604,77 @@
   cursor: pointer;
   transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease), box-shadow var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._trigger_13o0n_8:hover {
+._trigger_158od_8:hover {
   border-color: var(--stitch-border-strong);
 }
-._trigger_13o0n_8:focus-visible {
+._trigger_158od_8:focus-visible {
   outline: none;
   border-color: var(--stitch-accent);
   box-shadow: 0 0 0 2px var(--stitch-focus-ring);
 }
-._trigger_13o0n_8._open_13o0n_30 {
+._trigger_158od_8._open_158od_30 {
   border-color: var(--stitch-accent);
 }
-._small_13o0n_33 {
+._small_158od_33 {
   height: var(--stitch-height-sm);
   padding: 0 var(--stitch-spacing-md);
   font-size: var(--stitch-font-size-sm);
 }
-._middle_13o0n_38 {
+._middle_158od_38 {
   height: var(--stitch-height-base);
   padding: 0 var(--stitch-spacing-lg);
   font-size: var(--stitch-font-size-base);
 }
-._large_13o0n_43 {
+._large_158od_43 {
   height: var(--stitch-height-lg);
   padding: 0 var(--stitch-spacing-xl);
   font-size: var(--stitch-font-size-lg);
 }
-._value_13o0n_48 {
+._value_158od_48 {
   color: var(--stitch-text-primary);
   font-weight: var(--stitch-font-weight-medium);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._placeholder_13o0n_55 {
+._placeholder_158od_55 {
   color: var(--stitch-text-muted);
   font-weight: var(--stitch-font-weight-normal);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._arrow_13o0n_62 {
+._arrow_158od_62 {
   flex-shrink: 0;
   color: var(--stitch-text-secondary);
   transition: transform var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._arrowOpen_13o0n_67 {
+._arrowOpen_158od_67 {
   transform: rotate(180deg);
-  color: var(--stitch-accent);
+  color: var(--stitch-brand);
 }
-._dropdown_13o0n_71 {
+._dropdown_158od_71 {
   position: absolute;
   left: 0;
   top: calc(100% + var(--stitch-spacing-xs));
   z-index: 100;
   min-width: 100%;
   box-sizing: border-box;
-  max-height: 280px;
-  overflow-y: auto;
-  padding: var(--stitch-spacing-xs);
   background: var(--stitch-bg-elevated);
   border: var(--stitch-border-width) solid var(--stitch-border);
   border-radius: var(--stitch-radius-card);
   box-shadow: var(--stitch-shadow-base);
   opacity: 0;
-  animation: _dropdownFadeIn_13o0n_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease) forwards;
+  animation: _dropdownFadeIn_158od_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease) forwards;
+  overflow: hidden;
 }
-@keyframes _dropdownFadeIn_13o0n_1 {
+._dropdownScroll_158od_86 {
+  padding: var(--stitch-spacing-xs);
+}
+._dropdownScroll_158od_86 [data-radix-scroll-area-viewport] {
+  max-height: 280px;
+}
+@keyframes _dropdownFadeIn_158od_1 {
   from {
     opacity: 0;
     transform: translateY(-4px);
@@ -1595,7 +1684,7 @@
     transform: translateY(0);
   }
 }
-._option_13o0n_98 {
+._option_158od_102 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1608,38 +1697,38 @@
   white-space: nowrap;
   transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._optionLabel_13o0n_111 {
+._optionLabel_158od_115 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._optionActive_13o0n_115 {
+._optionActive_158od_119 {
   background: var(--stitch-bg-section);
 }
-._optionSelected_13o0n_118 {
-  color: var(--stitch-accent);
+._optionSelected_158od_122 {
+  color: var(--stitch-brand);
   font-weight: var(--stitch-font-weight-medium);
 }
-._checkMark_13o0n_122 {
+._checkMark_158od_126 {
   flex-shrink: 0;
-  color: var(--stitch-accent);
+  color: var(--stitch-brand);
 }
-._optionDisabled_13o0n_126 {
+._optionDisabled_158od_130 {
   color: var(--stitch-text-disabled);
   cursor: not-allowed;
 }
-._optionDisabled_13o0n_126._optionActive_13o0n_115 {
+._optionDisabled_158od_130._optionActive_158od_119 {
   background: transparent;
 }
-._disabled_13o0n_133 ._trigger_13o0n_8 {
+._disabled_158od_137 ._trigger_158od_8 {
   background: var(--stitch-bg-disabled);
   color: var(--stitch-text-disabled);
   cursor: not-allowed;
   opacity: 0.6;
 }
-._disabled_13o0n_133 ._trigger_13o0n_8:hover {
+._disabled_158od_137 ._trigger_158od_8:hover {
   border-color: var(--stitch-border);
 }
-._disabled_13o0n_133 ._value_13o0n_48 {
+._disabled_158od_137 ._value_158od_48 {
   color: var(--stitch-text-disabled);
 }
 ._root_de6fy_1 {
@@ -2388,158 +2477,336 @@
 ._tok-jsx_zsyzk_49 {
   color: var(--stitch-cat-3);
 }
-._frame_o1yrk_1 {
-  width: 100%;
-}
-._tooltip_6t8so_1 {
-  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+._message_dvybo_1 {
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--stitch-spacing-sm);
+  margin-bottom: var(--stitch-spacing-md);
   font-family: var(--stitch-font-body);
-  font-size: var(--stitch-font-size-sm);
+  font-size: var(--stitch-font-size-base);
   line-height: var(--stitch-line-height-base);
-  pointer-events: none;
 }
-._label_6t8so_8 {
-  margin-bottom: var(--stitch-spacing-xs);
-  color: var(--stitch-text-secondary);
+._variant-received_dvybo_10 {
+  flex-direction: row;
+  justify-content: flex-start;
 }
-._row_6t8so_12 {
-  display: flex;
+._variant-sent_dvybo_14 {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
+}
+._variant-system_dvybo_18 {
+  flex-direction: column;
   align-items: center;
-  gap: var(--stitch-spacing-sm);
-  color: var(--stitch-text-primary);
+  gap: var(--stitch-spacing-xs);
+  text-align: center;
 }
-._swatch_6t8so_18 {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
+._avatar-slot_dvybo_24 {
   flex: none;
+  width: 40px;
+  display: flex;
+  align-items: flex-end;
 }
-._name_6t8so_24 {
-  color: var(--stitch-text-secondary);
-}
-._value_6t8so_27 {
-  margin-left: auto;
-  color: var(--stitch-text-primary);
+._body_dvybo_30 {
+  display: flex;
+  flex-direction: column;
+  max-width: 72%;
+  min-width: 0;
 }
-._chart_bhyb6_1 {
-  font-family: var(--stitch-font-body);
-  font-size: var(--stitch-font-size-sm);
+._variant-sent_dvybo_14 ._body_dvybo_30 {
+  align-items: flex-end;
 }
-._endLabel_bhyb6_5 {
-  fill: var(--stitch-text-primary);
-  font-size: var(--stitch-font-size-sm);
+._bubble_dvybo_39 {
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  border-radius: var(--stitch-radius-card);
+  word-break: break-word;
+  white-space: pre-wrap;
+  box-shadow: var(--stitch-shadow-base);
 }
-._chart_1sb8f_1 {
-  font-family: var(--stitch-font-body);
-  font-size: var(--stitch-font-size-sm);
+._variant-received_dvybo_10 ._bubble_dvybo_39 {
+  background: var(--stitch-bg-card);
+  color: var(--stitch-text-primary);
 }
-._chart_yzp1s_1 {
-  font-family: var(--stitch-font-body);
-  font-size: var(--stitch-font-size-sm);
+._variant-sent_dvybo_14 ._bubble_dvybo_39 {
+  background: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-bg-canvas) 88%);
+  color: color-mix(in srgb, var(--stitch-cat-1), var(--stitch-text-primary) 68%);
 }
-._center_yzp1s_5 {
-  fill: var(--stitch-text-primary);
-  font-size: var(--stitch-font-size-lg);
+._bubble_dvybo_39 a {
+  color: var(--stitch-link);
+  text-decoration: none;
   font-weight: var(--stitch-font-weight-medium);
+  transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._stat_1wp9y_1 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--stitch-spacing-xs);
-  font-family: var(--stitch-font-body);
-  color: var(--stitch-text-primary);
+._bubble_dvybo_39 a:hover {
+  color: color-mix(in srgb, var(--stitch-link), black 12%);
+  text-decoration: underline;
 }
-._stat-title_1wp9y_8 {
+._emoji_dvybo_64 {
+  font-size: calc(var(--stitch-font-size-display) * 0.75);
+  line-height: 1.1;
+}
+._system_dvybo_68 {
+  display: inline-block;
+  padding: var(--stitch-spacing-xs) var(--stitch-spacing-md);
+  border-radius: var(--stitch-radius-card);
+  background: var(--stitch-bg-section);
+  color: var(--stitch-text-muted);
   font-size: var(--stitch-font-size-sm);
-  color: var(--stitch-text-secondary);
 }
-._stat-value-row_1wp9y_12 {
-  display: flex;
-  align-items: baseline;
-  gap: var(--stitch-spacing-sm);
+._meta_dvybo_76,
+._meta-below_dvybo_77 {
+  font-size: calc(var(--stitch-font-size-sm) * 0.8);
+  line-height: 1;
+  color: var(--stitch-text-muted);
 }
-._stat-value_1wp9y_12 {
+._meta_dvybo_76 {
   display: inline-flex;
-  align-items: baseline;
+  align-items: center;
+  vertical-align: text-bottom;
   gap: var(--stitch-spacing-xs);
-  font-size: var(--stitch-font-size-display);
-  font-weight: var(--stitch-font-weight-medium);
-  line-height: var(--stitch-line-height-base);
-}
-._stat-prefix_1wp9y_25,
-._stat-suffix_1wp9y_26 {
-  font-size: var(--stitch-font-size-lg);
-  color: var(--stitch-text-secondary);
+  margin-left: var(--stitch-spacing-sm);
 }
-._stat-trend_1wp9y_30 {
-  display: inline-flex;
+._meta-below_dvybo_77 {
+  display: flex;
   align-items: center;
   gap: var(--stitch-spacing-xs);
-  font-size: var(--stitch-font-size-sm);
-  font-weight: var(--stitch-font-weight-medium);
-}
-._stat-trend-positive_1wp9y_37 {
-  color: var(--stitch-success);
-}
-._stat-trend-negative_1wp9y_40 {
-  color: var(--stitch-danger);
+  margin-top: var(--stitch-spacing-xs);
 }
-._stat-caption_1wp9y_43 {
-  font-size: var(--stitch-font-size-sm);
-  color: var(--stitch-text-secondary);
+._time_dvybo_95 {
+  color: var(--stitch-text-muted);
 }
-._stat-status_1wp9y_47 {
+._ticks_dvybo_98 {
   display: inline-flex;
   align-items: center;
-  gap: var(--stitch-spacing-xs);
-  font-size: var(--stitch-font-size-sm);
-  color: var(--stitch-text-secondary);
-}
-._stat-dot-neutral_1wp9y_54 {
   color: var(--stitch-text-muted);
 }
-._stat-dot-success_1wp9y_57 {
-  color: var(--stitch-success);
-}
-._stat-dot-danger_1wp9y_60 {
-  color: var(--stitch-danger);
-}
-._stat-dot-warning_1wp9y_63 {
-  color: var(--stitch-warning);
+._ticks_dvybo_98 ._tick_dvybo_98 + ._tick_dvybo_98 {
+  margin-left: -0.55em;
 }
-._stat-dot-info_1wp9y_66 {
+._ticks-read_dvybo_106 {
   color: var(--stitch-info);
 }
-._group_1wp9y_69 {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
+._is-grouped_dvybo_109 {
+  margin-bottom: var(--stitch-spacing-xs);
 }
-._group-item_1wp9y_74 {
-  display: flex;
-  padding: 0 var(--stitch-spacing-xl);
+._content_6jxoc_1 {
+  box-sizing: border-box;
+  min-width: 180px;
+  background: var(--stitch-bg-elevated);
+  border: var(--stitch-border-width) solid var(--stitch-border);
+  border-radius: var(--stitch-radius-card);
+  box-shadow: var(--stitch-shadow-base);
+  color: var(--stitch-text-primary);
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+  line-height: var(--stitch-line-height-base);
+  z-index: 100;
+  overflow: hidden;
 }
-._group-item_1wp9y_74 + ._group-item_1wp9y_74 {
-  border-left: var(--stitch-border-width) solid var(--stitch-border);
+._content_6jxoc_1[data-state='open'] {
+  animation: _stitch-dropdown-in_6jxoc_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._overlay_jixc4_1 {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--stitch-spacing-md);
-  background: var(--stitch-mask-bg);
-  color: var(--stitch-text-on-dark);
-  opacity: 1;
-  transition: opacity var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+._content_6jxoc_1[data-state='closed'] {
+  animation: _stitch-dropdown-out_6jxoc_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._closing_jixc4_14 {
-  opacity: 0;
+._scroll_6jxoc_21 {
+  padding: var(--stitch-spacing-xs);
 }
-._hidden_jixc4_17 {
-  display: none;
+._scroll_6jxoc_21 [data-radix-scroll-area-viewport] {
+  max-height: 280px;
+}
+._item_6jxoc_27 {
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  border-radius: var(--stitch-radius-input);
+  color: var(--stitch-text-primary);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._item_6jxoc_27[data-highlighted] {
+  background: var(--stitch-bg-section);
+}
+._item_6jxoc_27[data-disabled] {
+  color: var(--stitch-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+._danger_6jxoc_47 {
+  color: var(--stitch-danger);
+}
+._danger_6jxoc_47[data-highlighted] {
+  background: var(--stitch-danger-bg);
+  color: var(--stitch-danger);
+}
+._itemIcon_6jxoc_54 {
+  flex-shrink: 0;
+  color: currentColor;
+}
+._itemLabel_6jxoc_58 {
+  flex: 1;
+}
+._subArrow_6jxoc_61 {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--stitch-text-muted);
+}
+@keyframes _stitch-dropdown-in_6jxoc_1 {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes _stitch-dropdown-out_6jxoc_1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+._content_1dpag_1 {
+  box-sizing: border-box;
+  min-width: 180px;
+  background: var(--stitch-bg-elevated);
+  border: var(--stitch-border-width) solid var(--stitch-border);
+  border-radius: var(--stitch-radius-card);
+  box-shadow: var(--stitch-shadow-base);
+  color: var(--stitch-text-primary);
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+  line-height: var(--stitch-line-height-base);
+  z-index: 100;
+  overflow: hidden;
+}
+._content_1dpag_1[data-state='open'] {
+  animation: _stitch-context-menu-in_1dpag_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+}
+._content_1dpag_1[data-state='closed'] {
+  animation: _stitch-context-menu-out_1dpag_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._scroll_1dpag_21 {
+  padding: var(--stitch-spacing-xs);
+}
+._scroll_1dpag_21 [data-radix-scroll-area-viewport] {
+  max-height: 280px;
+}
+._item_1dpag_27 {
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  border-radius: var(--stitch-radius-input);
+  color: var(--stitch-text-primary);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._item_1dpag_27[data-highlighted] {
+  background: var(--stitch-bg-section);
+}
+._item_1dpag_27[data-disabled] {
+  color: var(--stitch-text-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+._danger_1dpag_47 {
+  color: var(--stitch-danger);
+}
+._danger_1dpag_47[data-highlighted] {
+  background: var(--stitch-danger-bg);
+  color: var(--stitch-danger);
+}
+._itemIcon_1dpag_54 {
+  flex-shrink: 0;
+  color: currentColor;
+}
+._itemLabel_1dpag_58 {
+  flex: 1;
+}
+._subArrow_1dpag_61 {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--stitch-text-muted);
+}
+@keyframes _stitch-context-menu-in_1dpag_1 {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes _stitch-context-menu-out_1dpag_1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+._wrap_9echt_1 {
+  position: relative;
+  display: inline-block;
+}
+._trigger_9echt_5 {
+  position: absolute;
+  top: var(--stitch-spacing-xs);
+  right: var(--stitch-spacing-xs);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stitch-height-sm);
+  height: var(--stitch-height-sm);
+  padding: 0;
+  background: var(--stitch-bg-elevated);
+  border: var(--stitch-border-width) solid var(--stitch-border);
+  border-radius: var(--stitch-radius-button);
+  box-shadow: var(--stitch-shadow-sm);
+  color: var(--stitch-text-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--stitch-motion-duration-fast) var(--stitch-motion-ease), background var(--stitch-motion-duration-fast) var(--stitch-motion-ease), color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._trigger_9echt_5:focus-visible,
+._trigger_9echt_5[data-state='open'] {
+  opacity: 1;
+}
+._trigger_9echt_5:hover:not(:disabled) {
+  background: var(--stitch-bg-section);
+  color: var(--stitch-text-primary);
+}
+._trigger_9echt_5:focus-visible {
+  outline: var(--stitch-border-width) solid var(--stitch-focus-ring);
+  outline-offset: 2px;
+}
+._overlay_jixc4_1 {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stitch-spacing-md);
+  background: var(--stitch-mask-bg);
+  color: var(--stitch-text-on-dark);
+  opacity: 1;
+  transition: opacity var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+}
+._closing_jixc4_14 {
+  opacity: 0;
+}
+._hidden_jixc4_17 {
+  display: none;
 }
 ._spinner_jixc4_20 {
   border: 3px solid var(--stitch-border);
@@ -2547,38 +2814,475 @@
   border-radius: var(--stitch-radius-button);
   animation: _stitch-loading-spin_jixc4_1 0.8s linear infinite;
 }
-@keyframes _stitch-loading-spin_jixc4_1 {
-  to {
-    transform: rotate(360deg);
-  }
+@keyframes _stitch-loading-spin_jixc4_1 {
+  to {
+    transform: rotate(360deg);
+  }
+}
+._spinner-small_jixc4_31 {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+._spinner-middle_jixc4_36 {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+._spinner-large_jixc4_41 {
+  width: 44px;
+  height: 44px;
+  border-width: 4px;
+}
+._tip_jixc4_46 {
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+  line-height: var(--stitch-line-height-base);
+}
+@media (prefers-reduced-motion: reduce) {
+  ._spinner_jixc4_20 {
+    animation-duration: 1.6s;
+  }
+  ._overlay_jixc4_1 {
+    transition: none;
+  }
+}
+._list_1xrm9_1 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: var(--stitch-spacing-md);
+  font-family: var(--stitch-font-body);
+}
+._list_1xrm9_1:focus-visible {
+  outline: 2px solid var(--stitch-focus-ring);
+  outline-offset: -2px;
+}
+._top-loader_1xrm9_13 {
+  position: relative;
+  flex: none;
+  height: var(--stitch-height-lg);
+}
+._input_1o9t1_1 {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  width: 100%;
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  background: var(--stitch-bg-elevated);
+  border: var(--stitch-border-width) solid var(--stitch-border);
+  border-radius: var(--stitch-radius-input);
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-base);
+  transition: border-color var(--stitch-motion-duration-base) var(--stitch-motion-ease), box-shadow var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+}
+._input_1o9t1_1:hover:not(._is-disabled_1o9t1_15) {
+  border-color: var(--stitch-border-strong);
+}
+._input_1o9t1_1:focus-within:not(._is-disabled_1o9t1_15) {
+  border-color: var(--stitch-accent);
+  box-shadow: 0 0 0 2px var(--stitch-focus-ring);
+}
+._is-disabled_1o9t1_15 {
+  background: var(--stitch-bg-disabled);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+._prefix_1o9t1_27 {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+._textarea_1o9t1_32 {
+  flex: 1;
+  min-width: 0;
+  display: block;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  resize: none;
+  overflow-y: hidden;
+  background: transparent;
+  color: var(--stitch-text-primary);
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--stitch-font-weight-normal);
+  line-height: var(--stitch-line-height-base);
+  padding: 0;
+}
+._textarea_1o9t1_32::placeholder {
+  color: var(--stitch-text-muted);
+}
+._textarea_1o9t1_32:disabled {
+  color: var(--stitch-text-disabled);
+  cursor: not-allowed;
+}
+._actions_1o9t1_56 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stitch-spacing-xs);
+  flex-shrink: 0;
+}
+._send_1o9t1_62 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stitch-height-sm);
+  height: var(--stitch-height-sm);
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  color: var(--stitch-accent-text);
+  background: var(--stitch-accent);
+  border-radius: var(--stitch-radius-button);
+  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease), opacity var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._send_1o9t1_62:hover:not(:disabled) {
+  background: var(--stitch-accent-hover);
+}
+._send_1o9t1_62:active:not(:disabled) {
+  background: var(--stitch-accent-active);
+}
+._send_1o9t1_62:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--stitch-bg-elevated), 0 0 0 4px var(--stitch-focus-ring);
+}
+._send_1o9t1_62:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+._indicator_hslxz_1 {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  width: fit-content;
+  gap: var(--stitch-spacing-xs);
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  background: var(--stitch-bg-card);
+  border-radius: var(--stitch-radius-card);
+}
+._dot_hslxz_11 {
+  width: calc(var(--stitch-font-size-sm) * 0.4);
+  height: calc(var(--stitch-font-size-sm) * 0.4);
+  border-radius: var(--stitch-radius-button);
+  background: var(--stitch-text-muted);
+  animation: _stitch-typing-bounce_hslxz_1 calc(var(--stitch-motion-duration-base) * 3) var(--stitch-motion-ease) infinite;
+}
+._dot_hslxz_11:nth-child(2) {
+  animation-delay: var(--stitch-motion-duration-base);
+}
+._dot_hslxz_11:nth-child(3) {
+  animation-delay: calc(var(--stitch-motion-duration-base) * 2);
+}
+@keyframes _stitch-typing-bounce_hslxz_1 {
+  0%,
+  60%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-25%);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  ._dot_hslxz_11 {
+    animation: none;
+    opacity: 0.6;
+  }
+}
+._frame_1b4n8_1 {
+  display: block;
+  line-height: 0;
+  max-width: 100%;
+}
+._thumb_1b4n8_6 {
+  display: block;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: zoom-in;
+  border-radius: var(--stitch-radius-image);
+}
+._thumb_1b4n8_6:focus-visible {
+  outline: 2px solid var(--stitch-focus-ring);
+  outline-offset: 2px;
+}
+._mask_1b4n8_18 {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--stitch-mask-bg);
+}
+._dialog_1b4n8_27 {
+  position: relative;
+  display: inline-flex;
+  line-height: 0;
+}
+._full_1b4n8_32 {
+  max-width: min(88vw, 1100px);
+  max-height: 86vh;
+}
+._tools_1b4n8_36 {
+  position: absolute;
+  top: var(--stitch-spacing-md);
+  right: var(--stitch-spacing-md);
+  z-index: 1;
+  display: flex;
+  gap: var(--stitch-spacing-sm);
+}
+._toolBtn_1b4n8_44 {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--stitch-text-on-dark);
+  background: var(--stitch-mask-bg);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+}
+._toolBtn_1b4n8_44:hover {
+  transform: scale(1.1);
+}
+._toolBtn_1b4n8_44:focus-visible {
+  outline: 2px solid var(--stitch-focus-ring);
+  outline-offset: 2px;
+}
+._file_1tjaq_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  max-width: 320px;
+}
+._trigger_1tjaq_8 {
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}
+button._trigger_1tjaq_8 {
+  cursor: pointer;
+}
+button._trigger_1tjaq_8:focus-visible {
+  outline: 2px solid var(--stitch-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--stitch-radius-input);
+}
+._type_1tjaq_29 {
+  flex: 0 0 auto;
+  color: var(--stitch-text-secondary);
+}
+._text_1tjaq_33 {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 2px;
+}
+._name_1tjaq_39 {
+  color: var(--stitch-text-primary);
+  font-weight: var(--stitch-font-weight-medium);
+  font-size: var(--stitch-font-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+._meta_1tjaq_47 {
+  color: var(--stitch-text-muted);
+  font-size: var(--stitch-font-size-sm);
+}
+._download_1tjaq_51 {
+  flex: 0 0 auto;
+}
+._voice_16mxc_1 {
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  min-width: 180px;
+}
+._play_16mxc_7 {
+  flex: 0 0 auto;
+  width: var(--stitch-height-base);
+  height: var(--stitch-height-base);
+  padding: 0;
+  border-radius: 50%;
+}
+._wave_16mxc_14 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  height: 28px;
+  min-width: 0;
+}
+._bar_16mxc_22 {
+  flex: 1 1 auto;
+  min-width: 2px;
+  max-width: 4px;
+  border-radius: var(--stitch-radius-button);
+}
+._bar-played_16mxc_28 {
+  background: var(--stitch-accent);
+}
+._bar-idle_16mxc_31 {
+  background: var(--stitch-border);
+}
+._duration_16mxc_34 {
+  flex: 0 0 auto;
+  color: var(--stitch-text-muted);
+  font-size: var(--stitch-font-size-sm);
+  font-variant-numeric: tabular-nums;
+}
+._frame_o1yrk_1 {
+  width: 100%;
+}
+._tooltip_6t8so_1 {
+  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+  line-height: var(--stitch-line-height-base);
+  pointer-events: none;
+}
+._label_6t8so_8 {
+  margin-bottom: var(--stitch-spacing-xs);
+  color: var(--stitch-text-secondary);
+}
+._row_6t8so_12 {
+  display: flex;
+  align-items: center;
+  gap: var(--stitch-spacing-sm);
+  color: var(--stitch-text-primary);
+}
+._swatch_6t8so_18 {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  flex: none;
+}
+._name_6t8so_24 {
+  color: var(--stitch-text-secondary);
+}
+._value_6t8so_27 {
+  margin-left: auto;
+  color: var(--stitch-text-primary);
+}
+._chart_bhyb6_1 {
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+}
+._endLabel_bhyb6_5 {
+  fill: var(--stitch-text-primary);
+  font-size: var(--stitch-font-size-sm);
+}
+._chart_1sb8f_1 {
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+}
+._chart_yzp1s_1 {
+  font-family: var(--stitch-font-body);
+  font-size: var(--stitch-font-size-sm);
+}
+._center_yzp1s_5 {
+  fill: var(--stitch-text-primary);
+  font-size: var(--stitch-font-size-lg);
+  font-weight: var(--stitch-font-weight-medium);
+}
+._stat_1wp9y_1 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stitch-spacing-xs);
+  font-family: var(--stitch-font-body);
+  color: var(--stitch-text-primary);
+}
+._stat-title_1wp9y_8 {
+  font-size: var(--stitch-font-size-sm);
+  color: var(--stitch-text-secondary);
+}
+._stat-value-row_1wp9y_12 {
+  display: flex;
+  align-items: baseline;
+  gap: var(--stitch-spacing-sm);
+}
+._stat-value_1wp9y_12 {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--stitch-spacing-xs);
+  font-size: var(--stitch-font-size-display);
+  font-weight: var(--stitch-font-weight-medium);
+  line-height: var(--stitch-line-height-base);
+}
+._stat-prefix_1wp9y_25,
+._stat-suffix_1wp9y_26 {
+  font-size: var(--stitch-font-size-lg);
+  color: var(--stitch-text-secondary);
 }
-._spinner-small_jixc4_31 {
-  width: 20px;
-  height: 20px;
-  border-width: 2px;
+._stat-trend_1wp9y_30 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stitch-spacing-xs);
+  font-size: var(--stitch-font-size-sm);
+  font-weight: var(--stitch-font-weight-medium);
 }
-._spinner-middle_jixc4_36 {
-  width: 32px;
-  height: 32px;
-  border-width: 3px;
+._stat-trend-positive_1wp9y_37 {
+  color: var(--stitch-success);
 }
-._spinner-large_jixc4_41 {
-  width: 44px;
-  height: 44px;
-  border-width: 4px;
+._stat-trend-negative_1wp9y_40 {
+  color: var(--stitch-danger);
 }
-._tip_jixc4_46 {
-  font-family: var(--stitch-font-body);
+._stat-caption_1wp9y_43 {
   font-size: var(--stitch-font-size-sm);
-  line-height: var(--stitch-line-height-base);
+  color: var(--stitch-text-secondary);
 }
-@media (prefers-reduced-motion: reduce) {
-  ._spinner_jixc4_20 {
-    animation-duration: 1.6s;
-  }
-  ._overlay_jixc4_1 {
-    transition: none;
-  }
+._stat-status_1wp9y_47 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stitch-spacing-xs);
+  font-size: var(--stitch-font-size-sm);
+  color: var(--stitch-text-secondary);
+}
+._stat-dot-neutral_1wp9y_54 {
+  color: var(--stitch-text-muted);
+}
+._stat-dot-success_1wp9y_57 {
+  color: var(--stitch-success);
+}
+._stat-dot-danger_1wp9y_60 {
+  color: var(--stitch-danger);
+}
+._stat-dot-warning_1wp9y_63 {
+  color: var(--stitch-warning);
+}
+._stat-dot-info_1wp9y_66 {
+  color: var(--stitch-info);
+}
+._group_1wp9y_69 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}
+._group-item_1wp9y_74 {
+  display: flex;
+  padding: 0 var(--stitch-spacing-xl);
+}
+._group-item_1wp9y_74 + ._group-item_1wp9y_74 {
+  border-left: var(--stitch-border-width) solid var(--stitch-border);
 }
 ._progress_1oxpl_1 {
   box-sizing: border-box;
@@ -3506,160 +4210,6 @@
     opacity: 0;
   }
 }
-._content_5l6nu_1 {
-  box-sizing: border-box;
-  min-width: 180px;
-  padding: var(--stitch-spacing-xs);
-  background: var(--stitch-bg-elevated);
-  border: var(--stitch-border-width) solid var(--stitch-border);
-  border-radius: var(--stitch-radius-card);
-  box-shadow: var(--stitch-shadow-base);
-  color: var(--stitch-text-primary);
-  font-family: var(--stitch-font-body);
-  font-size: var(--stitch-font-size-sm);
-  line-height: var(--stitch-line-height-base);
-  z-index: 100;
-}
-._content_5l6nu_1[data-state='open'] {
-  animation: _stitch-dropdown-in_5l6nu_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
-}
-._content_5l6nu_1[data-state='closed'] {
-  animation: _stitch-dropdown-out_5l6nu_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
-}
-._item_5l6nu_21 {
-  display: flex;
-  align-items: center;
-  gap: var(--stitch-spacing-sm);
-  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
-  border-radius: var(--stitch-radius-input);
-  color: var(--stitch-text-primary);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
-}
-._item_5l6nu_21[data-highlighted] {
-  background: var(--stitch-bg-section);
-}
-._item_5l6nu_21[data-disabled] {
-  color: var(--stitch-text-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-._danger_5l6nu_41 {
-  color: var(--stitch-danger);
-}
-._danger_5l6nu_41[data-highlighted] {
-  background: var(--stitch-danger-bg);
-  color: var(--stitch-danger);
-}
-._itemIcon_5l6nu_48 {
-  flex-shrink: 0;
-  color: currentColor;
-}
-._itemLabel_5l6nu_52 {
-  flex: 1;
-}
-._subArrow_5l6nu_55 {
-  flex-shrink: 0;
-  margin-left: auto;
-  color: var(--stitch-text-muted);
-}
-@keyframes _stitch-dropdown-in_5l6nu_1 {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes _stitch-dropdown-out_5l6nu_1 {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-._content_1or0o_1 {
-  box-sizing: border-box;
-  min-width: 180px;
-  padding: var(--stitch-spacing-xs);
-  background: var(--stitch-bg-elevated);
-  border: var(--stitch-border-width) solid var(--stitch-border);
-  border-radius: var(--stitch-radius-card);
-  box-shadow: var(--stitch-shadow-base);
-  color: var(--stitch-text-primary);
-  font-family: var(--stitch-font-body);
-  font-size: var(--stitch-font-size-sm);
-  line-height: var(--stitch-line-height-base);
-  z-index: 100;
-}
-._content_1or0o_1[data-state='open'] {
-  animation: _stitch-context-menu-in_1or0o_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
-}
-._content_1or0o_1[data-state='closed'] {
-  animation: _stitch-context-menu-out_1or0o_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
-}
-._item_1or0o_21 {
-  display: flex;
-  align-items: center;
-  gap: var(--stitch-spacing-sm);
-  padding: var(--stitch-spacing-sm) var(--stitch-spacing-md);
-  border-radius: var(--stitch-radius-input);
-  color: var(--stitch-text-primary);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
-}
-._item_1or0o_21[data-highlighted] {
-  background: var(--stitch-bg-section);
-}
-._item_1or0o_21[data-disabled] {
-  color: var(--stitch-text-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-._danger_1or0o_41 {
-  color: var(--stitch-danger);
-}
-._danger_1or0o_41[data-highlighted] {
-  background: var(--stitch-danger-bg);
-  color: var(--stitch-danger);
-}
-._itemIcon_1or0o_48 {
-  flex-shrink: 0;
-  color: currentColor;
-}
-._itemLabel_1or0o_52 {
-  flex: 1;
-}
-._subArrow_1or0o_55 {
-  flex-shrink: 0;
-  margin-left: auto;
-  color: var(--stitch-text-muted);
-}
-@keyframes _stitch-context-menu-in_1or0o_1 {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes _stitch-context-menu-out_1or0o_1 {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
 ._root_907u3_1 {
   display: flex;
   align-items: center;
@@ -3923,14 +4473,14 @@
   cursor: not-allowed;
   pointer-events: none;
 }
-._root_phcem_1 {
+._root_i0lyd_1 {
   position: relative;
   display: flex;
   font-family: var(--stitch-font-body);
   font-size: var(--stitch-font-size-sm);
   line-height: var(--stitch-line-height-base);
 }
-._list_phcem_8 {
+._list_i0lyd_8 {
   display: flex;
   align-items: center;
   gap: var(--stitch-spacing-xs);
@@ -3938,11 +4488,11 @@
   padding: 0;
   list-style: none;
 }
-._item_phcem_16 {
+._item_i0lyd_16 {
   position: relative;
 }
-._link_phcem_19,
-._trigger_phcem_20 {
+._link_i0lyd_19,
+._trigger_i0lyd_20 {
   display: inline-flex;
   align-items: center;
   gap: var(--stitch-spacing-xs);
@@ -3959,30 +4509,30 @@
   outline: none;
   transition: color var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._link_phcem_19:hover,
-._trigger_phcem_20:hover {
+._link_i0lyd_19:hover,
+._trigger_i0lyd_20:hover {
   color: var(--stitch-text-primary);
 }
-._link_phcem_19:focus-visible,
-._trigger_phcem_20:focus-visible {
+._link_i0lyd_19:focus-visible,
+._trigger_i0lyd_20:focus-visible {
   outline: 2px solid var(--stitch-focus-ring);
   outline-offset: 2px;
 }
-._link_phcem_19[data-active] {
-  color: var(--stitch-accent);
+._link_i0lyd_19[data-active] {
+  color: var(--stitch-brand);
 }
-._trigger_phcem_20[data-state='open'] {
+._trigger_i0lyd_20[data-state='open'] {
   color: var(--stitch-text-primary);
 }
-._caret_phcem_52 {
+._caret_i0lyd_52 {
   flex-shrink: 0;
   color: var(--stitch-text-muted);
   transition: transform var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._trigger_phcem_20[data-state='open'] ._caret_phcem_52 {
+._trigger_i0lyd_20[data-state='open'] ._caret_i0lyd_52 {
   transform: rotate(180deg);
 }
-._viewportWrapper_phcem_60 {
+._viewportWrapper_i0lyd_60 {
   position: absolute;
   top: 100%;
   left: 0;
@@ -3990,7 +4540,7 @@
   justify-content: flex-start;
   z-index: 100;
 }
-._viewport_phcem_60 {
+._viewport_i0lyd_60 {
   position: relative;
   margin-top: var(--stitch-spacing-sm);
   width: max-content;
@@ -4001,16 +4551,16 @@
   box-shadow: var(--stitch-shadow-base);
   color: var(--stitch-text-primary);
 }
-._viewport_phcem_60[data-state='open'] {
-  animation: _stitch-navigation-menu-in_phcem_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
+._viewport_i0lyd_60[data-state='open'] {
+  animation: _stitch-navigation-menu-in_i0lyd_1 var(--stitch-motion-duration-base) var(--stitch-motion-ease);
 }
-._viewport_phcem_60[data-state='closed'] {
-  animation: _stitch-navigation-menu-out_phcem_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
+._viewport_i0lyd_60[data-state='closed'] {
+  animation: _stitch-navigation-menu-out_i0lyd_1 var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
 }
-._content_phcem_85 {
+._content_i0lyd_85 {
   padding: var(--stitch-spacing-lg);
 }
-@keyframes _stitch-navigation-menu-in_phcem_1 {
+@keyframes _stitch-navigation-menu-in_i0lyd_1 {
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -4020,7 +4570,7 @@
     transform: translateY(0);
   }
 }
-@keyframes _stitch-navigation-menu-out_phcem_1 {
+@keyframes _stitch-navigation-menu-out_i0lyd_1 {
   from {
     opacity: 1;
     transform: translateY(0);
@@ -4030,59 +4580,4 @@
     transform: translateY(-6px);
   }
 }
-._root_1mbik_1 {
-  overflow: hidden;
-  position: relative;
-}
-._viewport_1mbik_5 {
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-}
-._scrollbar_1mbik_10 {
-  display: flex;
-  user-select: none;
-  touch-action: none;
-  padding: var(--sa-track-pad);
-  background: transparent;
-  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
-}
-._scrollbar_1mbik_10:hover {
-  background: var(--stitch-bg-section);
-}
-._scrollbar_1mbik_10[data-orientation='vertical'] {
-  width: var(--sa-size);
-}
-._scrollbar_1mbik_10[data-orientation='horizontal'] {
-  flex-direction: column;
-  height: var(--sa-size);
-}
-._thumb_1mbik_28 {
-  flex: 1;
-  position: relative;
-  background: var(--stitch-text-muted);
-  border-radius: var(--stitch-radius-button);
-  transition: background var(--stitch-motion-duration-fast) var(--stitch-motion-ease);
-}
-._thumb_1mbik_28:hover {
-  background: var(--stitch-text-secondary);
-}
-._thumb_1mbik_28::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 100%;
-  min-width: 44px;
-  min-height: 44px;
-  transform: translate(-50%, -50%);
-}
-._corner_1mbik_49 {
-  background: transparent;
-}
-._root_1mbik_1 {
-  --sa-size: 10px;
-  --sa-track-pad: 2px;
-}
 /*$vite$:1*/