@brijbyte/agentic-ui 0.0.1 → 0.0.2

package/dist/index.css

@@ -1,4 +1,4 @@
-@layer base {
+@layer theme {
   :root {
     --font-display: "New York", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", Georgia, serif;
     --font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", "Menlo", ui-monospace, "Courier New", monospace;
@@ -76,28 +76,28 @@
 
   :root, [data-theme="light"] {
     color-scheme: light;
-    --color-bg-base: #f5f5f5;
-    --color-bg-elevated: #fff;
-    --color-bg-sunken: #ebebeb;
-    --color-bg-overlay: #ffffffeb;
-    --color-bg-sidebar: #f6f6f6f2;
-    --color-surface-1: #fff;
-    --color-surface-2: #f9f9f9;
-    --color-surface-3: #f4f4f4;
-    --color-surface-hover: #0000000a;
-    --color-surface-active: #00000012;
-    --color-surface-selected: #0078d41a;
-    --color-text-primary: #000000e0;
-    --color-text-secondary: #0000008c;
-    --color-text-tertiary: #0000005c;
-    --color-text-disabled: #0000003d;
-    --color-text-inverse: #fffffff2;
-    --color-text-on-accent: #fff;
-    --color-text-code: #0f766e;
-    --color-border-base: #0000001f;
-    --color-border-strong: #00000038;
-    --color-border-subtle: #0000000f;
-    --color-border-focus: var(--color-focus-ring);
+    --color-canvas: #f0eff0;
+    --color-elevated: #fafafa;
+    --color-sunken: #e8e7e8;
+    --color-overlay: #fafafaeb;
+    --color-sidebar: #f4f3f4f5;
+    --color-surface-1: #fafafa;
+    --color-surface-2: #f4f3f4;
+    --color-surface-3: #eeeded;
+    --color-hover: #0000000a;
+    --color-active: #00000012;
+    --color-selected: #0078d41a;
+    --color-primary: #000000e0;
+    --color-secondary: #0000008c;
+    --color-tertiary: #0000005c;
+    --color-disabled: #0000003d;
+    --color-inverse: #fffffff2;
+    --color-on-accent: #fff;
+    --color-code: #0f766e;
+    --color-line: #0000001f;
+    --color-line-strong: #00000038;
+    --color-line-subtle: #0000000f;
+    --color-line-focus: var(--color-focus-ring);
     --color-accent: #0078d4;
     --color-accent-hover: #006bbf;
     --color-accent-pressed: #005ea8;
@@ -112,7 +112,7 @@
     --shadow-popover: 0 8px 24px -4px #00000029, 0 2px 6px -2px #0000001a;
     --shadow-sheet: 0 -4px 16px 0 #0000001f;
     --shadow-inset: inset 0 1px 2px 0 #00000014;
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
     --color-success-bg: #f0fdf4;
     --color-success-border: #bbf7d0;
     --color-success-text: #15803d;
@@ -129,41 +129,41 @@
     --color-info-border: #bfdbfe;
     --color-info-text: #1d4ed8;
     --color-info-solid: #2563eb;
-    --color-code-bg: #f6f8fa;
+    --color-code-canvas: #f6f8fa;
     --color-code-border: #d0d7de;
     --color-code-comment: #6e7781;
     --color-code-keyword: #cf222e;
     --color-code-string: #0a3069;
     --color-code-number: #0550ae;
     --color-code-function: #8250df;
-    --color-scrollbar-thumb: #0003;
-    --color-scrollbar-track: transparent;
+    --color-thumb: #0003;
+    --color-track: transparent;
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-theme="dark"] {
       color-scheme: dark;
-      --color-bg-base: #1c1c1e;
-      --color-bg-elevated: #2c2c2e;
-      --color-bg-sunken: #141416;
-      --color-bg-overlay: #1e1e20eb;
-      --color-bg-sidebar: #1c1c1ef2;
+      --color-canvas: #1c1c1e;
+      --color-elevated: #2c2c2e;
+      --color-sunken: #141416;
+      --color-overlay: #1e1e20eb;
+      --color-sidebar: #1c1c1ef2;
       --color-surface-1: #2c2c2e;
       --color-surface-2: #3a3a3c;
       --color-surface-3: #48484a;
-      --color-surface-hover: #ffffff0f;
-      --color-surface-active: #ffffff1a;
-      --color-surface-selected: #0a84ff29;
-      --color-text-primary: #ffffffeb;
-      --color-text-secondary: #ffffff8c;
-      --color-text-tertiary: #ffffff5c;
-      --color-text-disabled: #ffffff3d;
-      --color-text-inverse: #000000e0;
-      --color-text-on-accent: #fff;
-      --color-text-code: #2dd4bf;
-      --color-border-base: #ffffff1f;
-      --color-border-strong: #ffffff38;
-      --color-border-subtle: #ffffff0f;
+      --color-hover: #ffffff0f;
+      --color-active: #ffffff1a;
+      --color-selected: #0a84ff29;
+      --color-primary: #ffffffeb;
+      --color-secondary: #ffffff8c;
+      --color-tertiary: #ffffff5c;
+      --color-disabled: #ffffff3d;
+      --color-inverse: #000000e0;
+      --color-on-accent: #fff;
+      --color-code: #2dd4bf;
+      --color-line: #ffffff1f;
+      --color-line-strong: #ffffff38;
+      --color-line-subtle: #ffffff0f;
       --color-accent: #0a84ff;
       --color-accent-hover: #0071e3;
       --color-accent-pressed: #005bb5;
@@ -178,7 +178,7 @@
       --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
       --shadow-sheet: 0 -4px 16px 0 #0006;
       --shadow-inset: inset 0 1px 2px 0 #0000004d;
-      --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+      --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
       --color-success-bg: #16a34a1f;
       --color-success-border: #16a34a4d;
       --color-success-text: #4ade80;
@@ -195,41 +195,41 @@
       --color-info-border: #2563eb4d;
       --color-info-text: #60a5fa;
       --color-info-solid: #3b82f6;
-      --color-code-bg: #161b22;
+      --color-code-canvas: #161b22;
       --color-code-border: #ffffff1a;
       --color-code-comment: #8b949e;
       --color-code-keyword: #ff7b72;
       --color-code-string: #a5d6ff;
       --color-code-number: #79c0ff;
       --color-code-function: #d2a8ff;
-      --color-scrollbar-thumb: #fff3;
-      --color-scrollbar-track: transparent;
+      --color-thumb: #fff3;
+      --color-track: transparent;
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
-    --color-bg-base: #1c1c1e;
-    --color-bg-elevated: #2c2c2e;
-    --color-bg-sunken: #141416;
-    --color-bg-overlay: #1e1e20eb;
-    --color-bg-sidebar: #1c1c1ef2;
+    --color-canvas: #1c1c1e;
+    --color-elevated: #2c2c2e;
+    --color-sunken: #141416;
+    --color-overlay: #1e1e20eb;
+    --color-sidebar: #1c1c1ef2;
     --color-surface-1: #2c2c2e;
     --color-surface-2: #3a3a3c;
     --color-surface-3: #48484a;
-    --color-surface-hover: #ffffff0f;
-    --color-surface-active: #ffffff1a;
-    --color-surface-selected: #0a84ff29;
-    --color-text-primary: #ffffffeb;
-    --color-text-secondary: #ffffff8c;
-    --color-text-tertiary: #ffffff5c;
-    --color-text-disabled: #ffffff3d;
-    --color-text-inverse: #000000e0;
-    --color-text-on-accent: #fff;
-    --color-text-code: #2dd4bf;
-    --color-border-base: #ffffff1f;
-    --color-border-strong: #ffffff38;
-    --color-border-subtle: #ffffff0f;
+    --color-hover: #ffffff0f;
+    --color-active: #ffffff1a;
+    --color-selected: #0a84ff29;
+    --color-primary: #ffffffeb;
+    --color-secondary: #ffffff8c;
+    --color-tertiary: #ffffff5c;
+    --color-disabled: #ffffff3d;
+    --color-inverse: #000000e0;
+    --color-on-accent: #fff;
+    --color-code: #2dd4bf;
+    --color-line: #ffffff1f;
+    --color-line-strong: #ffffff38;
+    --color-line-subtle: #ffffff0f;
     --color-accent: #0a84ff;
     --color-accent-hover: #0071e3;
     --color-accent-pressed: #005bb5;
@@ -244,7 +244,7 @@
     --shadow-popover: 0 8px 24px -4px #00000080, 0 2px 6px -2px #0006;
     --shadow-sheet: 0 -4px 16px 0 #0006;
     --shadow-inset: inset 0 1px 2px 0 #0000004d;
-    --shadow-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-focus-ring);
+    --shadow-focus: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-focus-ring);
     --color-success-bg: #16a34a1f;
     --color-success-border: #16a34a4d;
     --color-success-text: #4ade80;
@@ -261,17 +261,19 @@
     --color-info-border: #2563eb4d;
     --color-info-text: #60a5fa;
     --color-info-solid: #3b82f6;
-    --color-code-bg: #161b22;
+    --color-code-canvas: #161b22;
     --color-code-border: #ffffff1a;
     --color-code-comment: #8b949e;
     --color-code-keyword: #ff7b72;
     --color-code-string: #a5d6ff;
     --color-code-number: #79c0ff;
     --color-code-function: #d2a8ff;
-    --color-scrollbar-thumb: #fff3;
-    --color-scrollbar-track: transparent;
+    --color-thumb: #fff3;
+    --color-track: transparent;
   }
 }
+
+@layer base, components, utilities;
 @layer base {
   *, :before, :after {
     box-sizing: border-box;
@@ -293,8 +295,8 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-md);
     line-height: var(--line-height-normal);
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-base);
+    color: var(--color-primary);
+    background-color: var(--color-canvas);
   }
 
   img, picture, video, canvas, svg {
@@ -319,12 +321,12 @@
     font-weight: var(--font-weight-semibold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
+    scrollbar-color: var(--color-thumb) var(--color-track);
   }
 
   ::-webkit-scrollbar {
@@ -333,16 +335,14 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background: var(--color-scrollbar-thumb);
+    background: var(--color-thumb);
     border-radius: var(--radius-full);
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--color-scrollbar-track);
+    background: var(--color-track);
   }
 }
-@layer theme, base;
-
 @layer components {
   .root_fRZpDq {
     align-items: center;
@@ -361,14 +361,14 @@
 
   .variant-default_fRZpDq {
     background-color: var(--color-surface-3);
-    border-color: var(--color-border-base);
-    color: var(--color-text-secondary);
+    border-color: var(--color-line);
+    color: var(--color-secondary);
   }
 
   .variant-solid_fRZpDq {
     background-color: var(--color-accent);
     border-color: var(--color-accent);
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
 
   .variant-soft_fRZpDq {
@@ -409,10 +409,70 @@
     height: 5px;
   }
 }
+@layer components {
+  .root_mD1LSW {
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+
+  .root-elevated_mD1LSW {
+    box-shadow: var(--shadow-sm);
+  }
+
+  .root-interactive_mD1LSW {
+    cursor: pointer;
+    transition: border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-standard);
+  }
+
+  .root-interactive_mD1LSW:hover {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+  }
+
+  .root-interactive_mD1LSW:active {
+    transform: scale(.995);
+  }
+
+  .header_mD1LSW {
+    padding: var(--space-4) var(--space-5);
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
+    gap: var(--space-0-5);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .title_mD1LSW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+  }
+
+  .description_mD1LSW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-normal);
+  }
 
-@layer utilities;
-@layer theme, base;
+  .body_mD1LSW {
+    padding: var(--space-4) var(--space-5);
+  }
 
+  .footer_mD1LSW {
+    padding: var(--space-3) var(--space-5);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
+  }
+}
 @layer components {
   .positioner_HVPjPa {
     z-index: var(--z-dropdown);
@@ -423,10 +483,10 @@
     box-sizing: border-box;
     padding: var(--space-1) 0;
     border-radius: var(--radius-lg);
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
     box-shadow: var(--shadow-popover);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     min-width: 200px;
@@ -462,7 +522,7 @@
     border-radius: var(--radius-md);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-primary);
     cursor: default;
     user-select: none;
     outline: none;
@@ -473,7 +533,7 @@
 
   .item_HVPjPa[data-highlighted] {
     background-color: var(--color-accent);
-    color: var(--color-text-on-accent);
+    color: var(--color-on-accent);
   }
 
   .item_HVPjPa[data-disabled] {
@@ -497,13 +557,13 @@
   .item-shortcut_HVPjPa {
     margin-left: var(--space-6);
     font-size: var(--font-size-xs);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     letter-spacing: .02em;
     flex-shrink: 0;
   }
 
   .item_HVPjPa[data-highlighted] .item-shortcut_HVPjPa {
-    color: color-mix(in srgb, var(--color-text-on-accent) 60%, transparent);
+    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);
   }
 
   .group-label_HVPjPa {
@@ -511,7 +571,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
     font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     text-transform: uppercase;
     letter-spacing: var(--letter-spacing-wide);
     cursor: default;
@@ -522,17 +582,17 @@
   .separator_HVPjPa {
     margin: var(--space-1) 0;
     height: var(--border-width-base);
-    background-color: var(--color-border-subtle);
+    background-color: var(--color-line-subtle);
   }
 
   .submenu-trigger-icon_HVPjPa {
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     flex-shrink: 0;
     margin-left: auto;
   }
 
   .item_HVPjPa[data-highlighted] .submenu-trigger-icon_HVPjPa {
-    color: color-mix(in srgb, var(--color-text-on-accent) 70%, transparent);
+    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
   }
 
   .arrow_HVPjPa {
@@ -560,436 +620,725 @@
   }
 
   .arrow-fill_HVPjPa {
-    fill: var(--color-bg-overlay);
+    fill: var(--color-overlay);
   }
 
   .arrow-stroke_HVPjPa {
-    fill: var(--color-border-base);
+    fill: var(--color-line);
   }
 }
-
-@layer utilities;
-@layer theme, base;
-
 @layer components {
-  .root_mD1LSW {
-    background-color: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-xl);
-    overflow: hidden;
+  .root_3hDtBa {
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+    user-select: none;
+    display: flex;
   }
 
-  .root-elevated_mD1LSW {
-    box-shadow: var(--shadow-sm);
+  .root_3hDtBa[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .root-interactive_mD1LSW {
-    cursor: pointer;
-    transition: border-color var(--duration-fast) var(--easing-standard),
-      box-shadow var(--duration-fast) var(--easing-standard),
-      transform var(--duration-fast) var(--easing-standard);
+  .thumb-track_3hDtBa {
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line);
+    width: 36px;
+    height: 20px;
+    transition: background-color var(--duration-normal) var(--easing-standard),
+      border-color var(--duration-normal) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    flex-shrink: 0;
+    position: relative;
   }
 
-  .root-interactive_mD1LSW:hover {
+  .thumb-track_3hDtBa:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .thumb-track_3hDtBa[data-checked] {
+    background-color: var(--color-accent);
     border-color: var(--color-accent);
-    box-shadow: var(--shadow-md);
   }
 
-  .root-interactive_mD1LSW:active {
-    transform: scale(.995);
+  .thumb-track_3hDtBa[data-checked]:hover {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
   }
 
-  .header_mD1LSW {
-    padding: var(--space-4) var(--space-5);
-    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
-    gap: var(--space-0-5);
-    flex-direction: column;
-    display: flex;
+  .thumb_3hDtBa {
+    border-radius: var(--radius-full);
+    width: 14px;
+    height: 14px;
+    box-shadow: var(--shadow-xs);
+    transition: transform var(--duration-normal) var(--easing-spring);
+    background-color: #fff;
+    position: absolute;
+    top: 2px;
+    left: 2px;
   }
 
-  .title_mD1LSW {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-md);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-tight);
+  .thumb-track_3hDtBa[data-checked] .thumb_3hDtBa {
+    transform: translateX(16px);
   }
 
-  .description_mD1LSW {
+  .label_3hDtBa {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    line-height: var(--line-height-normal);
+    color: var(--color-primary);
+  }
+}
+@layer components {
+  .positioner_U19WMG {
+    z-index: var(--z-dropdown);
+    outline: none;
   }
 
-  .body_mD1LSW {
-    padding: var(--space-4) var(--space-5);
+  .popup_U19WMG {
+    box-sizing: border-box;
+    padding: var(--space-1) 0;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    box-shadow: var(--shadow-popover);
+    color: var(--color-primary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    min-width: 220px;
+    transform-origin: var(--transform-origin);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .15s var(--easing-ease-out);
+    outline: none;
   }
 
-  .footer_mD1LSW {
-    padding: var(--space-3) var(--space-5);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
-    align-items: center;
-    gap: var(--space-2);
-    display: flex;
+  @supports (backdrop-filter: blur(20px)) {
+    .popup_U19WMG {
+      -webkit-backdrop-filter: blur(20px) saturate(1.8);
+    }
   }
-}
 
-@layer utilities;
-@layer theme, base;
+  .popup_U19WMG[data-starting-style] {
+    opacity: 0;
+    transform: scale(.97);
+  }
 
-@layer components {
-  .root_J4At5G {
+  .popup_U19WMG[data-ending-style] {
+    opacity: 0;
+    transition: opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+    transform: scale(.99);
+  }
+
+  .trigger_U19WMG {
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+    outline: none;
+    display: block;
+  }
+
+  .item_U19WMG {
     align-items: center;
     gap: var(--space-2);
-    cursor: pointer;
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
     user-select: none;
+    outline: none;
+    transition: none;
     display: flex;
+    position: relative;
   }
 
-  .root_J4At5G[data-disabled] {
-    opacity: .44;
+  .item_U19WMG[data-highlighted] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
+  }
+
+  .item_U19WMG[data-disabled] {
+    opacity: .36;
     cursor: not-allowed;
   }
 
-  .indicator_J4At5G {
-    border-radius: var(--radius-sm);
-    border: var(--border-width-base) solid var(--color-border-strong);
-    background-color: var(--color-surface-1);
+  .item-icon_U19WMG {
     width: 16px;
     height: 16px;
-    transition: background-color var(--duration-fast) var(--easing-standard),
-      border-color var(--duration-fast) var(--easing-standard),
-      box-shadow var(--duration-fast) var(--easing-standard);
-    outline: none;
+    color: inherit;
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     display: flex;
-    position: relative;
   }
 
-  .indicator_J4At5G:focus-visible {
-    box-shadow: var(--shadow-focus);
-    border-color: var(--color-accent);
-  }
-
-  .indicator_J4At5G:hover:not([data-disabled]) {
-    border-color: var(--color-accent);
-  }
-
-  .indicator_J4At5G[data-checked], .indicator_J4At5G[data-indeterminate] {
-    background-color: var(--color-accent);
-    border-color: var(--color-accent);
+  .item-label_U19WMG {
+    flex: 1;
   }
 
-  .indicator_J4At5G[data-checked]:hover, .indicator_J4At5G[data-indeterminate]:hover {
-    background-color: var(--color-accent-hover);
-    border-color: var(--color-accent-hover);
+  .item-shortcut_U19WMG {
+    margin-left: var(--space-8);
+    font-size: var(--font-size-sm);
+    color: var(--color-tertiary);
+    flex-shrink: 0;
   }
 
-  .icon_J4At5G {
-    width: 10px;
-    height: 10px;
-    color: var(--color-text-on-accent);
-    opacity: 0;
-    transition: opacity var(--duration-fast) var(--easing-standard),
-      transform var(--duration-fast) var(--easing-spring);
-    transform: scale(.9);
+  .item_U19WMG[data-highlighted] .item-shortcut_U19WMG {
+    color: color-mix(in srgb, var(--color-on-accent) 60%, transparent);
   }
 
-  .indicator_J4At5G[data-checked] .icon_J4At5G, .indicator_J4At5G[data-indeterminate] .icon_J4At5G {
-    opacity: 1;
-    transform: scale(1);
+  .submenu-icon_U19WMG {
+    color: var(--color-tertiary);
+    flex-shrink: 0;
+    margin-left: auto;
   }
 
-  .label_J4At5G {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
-    line-height: var(--line-height-normal);
+  .item_U19WMG[data-highlighted] .submenu-icon_U19WMG, .submenu-trigger_U19WMG[data-highlighted] .submenu-icon_U19WMG {
+    color: color-mix(in srgb, var(--color-on-accent) 70%, transparent);
   }
-}
-
-@layer utilities;
-@layer theme, base;
 
-@layer components {
-  .viewport_QXnIWW {
-    bottom: var(--space-4);
-    right: var(--space-4);
-    z-index: var(--z-toast);
-    width: 360px;
-    max-width: calc(100vw - var(--space-8));
-    pointer-events: none;
+  .submenu-trigger_U19WMG {
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-4);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-primary);
+    cursor: default;
+    user-select: none;
     outline: none;
-    flex-direction: column;
-    list-style: none;
+    transition: none;
     display: flex;
-    position: fixed;
   }
 
-  .viewport-list_QXnIWW {
-    gap: var(--space-2);
+  .submenu-trigger_U19WMG[data-highlighted], .submenu-trigger_U19WMG[data-popup-open] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
   }
 
-  .viewport-stacked_QXnIWW {
-    gap: 0;
+  .submenu-trigger_U19WMG[data-disabled] {
+    opacity: .36;
+    cursor: not-allowed;
   }
 
-  .toast_QXnIWW {
-    align-items: flex-start;
-    gap: var(--space-3);
-    padding: var(--space-3) var(--space-4);
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-xl);
-    box-shadow: var(--shadow-popover);
-    pointer-events: auto;
+  .group-label_U19WMG {
+    padding: var(--space-1) var(--space-4) var(--space-0-5);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-tertiary);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-spacing-wide);
     cursor: default;
-    width: 100%;
-    display: flex;
+    user-select: none;
   }
 
-  @supports (backdrop-filter: blur(12px)) {
-    .toast_QXnIWW {
-      -webkit-backdrop-filter: blur(12px) saturate(1.5);
-    }
+  .separator_U19WMG {
+    margin: var(--space-1) var(--space-4);
+    height: var(--border-width-base);
+    background-color: var(--color-line-subtle);
+  }
+}
+@layer components {
+  .root_prqJ8a {
+    flex-direction: column;
+    gap: 0;
+    display: flex;
   }
 
-  .viewport-list_QXnIWW .toast_QXnIWW {
-    transform-origin: 100% 100%;
-    opacity: 1;
-    transition: opacity .3s var(--easing-ease-out),
-      transform .3s var(--easing-spring);
-    transform: translateX(0);
+  .list_prqJ8a {
+    align-items: center;
+    gap: var(--space-px);
+    border-bottom: var(--border-width-base) solid var(--color-line);
+    scrollbar-width: none;
+    display: flex;
+    overflow-x: auto;
+  }
 
-    @starting-style {
-      opacity: 0;
-      transform: translateX(calc(100% + var(--space-4)));
-    }
+  .list_prqJ8a::-webkit-scrollbar {
+    display: none;
   }
 
-  .viewport-list_QXnIWW .toast_QXnIWW[data-ending-style] {
-    opacity: 0;
-    transform: translateX(calc(100% + var(--space-4)));
-    transition: opacity .2s var(--easing-ease-in),
-      transform .2s var(--easing-ease-in);
+  .tab_prqJ8a {
+    align-items: center;
+    gap: var(--space-1-5);
+    padding: var(--space-1-5) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-regular);
+    color: var(--color-tertiary);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
+    user-select: none;
+    background: none;
+    border: none;
+    border-bottom: 3px solid #0000;
+    outline: none;
+    margin-bottom: -1px;
+    display: inline-flex;
+    position: relative;
   }
 
-  .viewport-stacked_QXnIWW {
-    height: calc(var(--toast-frontmost-height, 64px) + 20px);
-    box-sizing: content-box;
-    clip-path: inset(0 0 0 0 round var(--radius-xl));
-    transition: clip-path .2s var(--easing-ease-out),
-      height .2s var(--easing-ease-out);
-    padding-top: 20px;
+  .tab_prqJ8a:hover:not([data-disabled]) {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-line-strong);
   }
 
-  .viewport-stacked_QXnIWW[data-expanded] {
-    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
-    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+  .tab_prqJ8a:focus-visible {
+    outline: none;
   }
 
-  .viewport-stacked_QXnIWW[data-expanded]:after {
+  .tab_prqJ8a:focus-visible:after {
     content: "";
-    pointer-events: auto;
-    z-index: 0;
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-focus);
+    pointer-events: none;
     position: absolute;
-    inset: -9999px 0 0;
+    inset: 2px 2px 8px;
   }
 
-  .toast-stacked_QXnIWW {
-    z-index: calc(50 - var(--toast-index));
-    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * .04));
-    transform-origin: bottom;
-    opacity: calc(1 - var(--toast-index) * .15);
-    transition: transform .2s var(--easing-ease-out),
-      opacity .2s var(--easing-ease-out);
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  .tab_prqJ8a[data-active] {
+    color: var(--color-primary);
+    font-weight: var(--font-weight-medium);
+    border-bottom-color: var(--color-accent);
   }
 
-  .viewport-stacked_QXnIWW[data-expanded] .toast-stacked_QXnIWW {
-    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
-    opacity: 1;
-    pointer-events: auto;
+  .tab_prqJ8a[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW {
-    @starting-style {
-      opacity: 0;
-      transform: translateY(16px) scale(calc(1 - var(--toast-index) * .04));
-    }
+  .panel_prqJ8a {
+    padding-top: var(--space-4);
+    transition: opacity .15s var(--easing-ease-out);
+    outline: none;
   }
 
-  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW[data-ending-style] {
+  .panel_prqJ8a[data-starting-style] {
     opacity: 0;
-    transform: translateX(calc(100% + var(--space-4)));
-    transition: opacity .15s var(--easing-ease-in),
-      transform .15s var(--easing-ease-in);
-  }
-
-  .toast-success_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-bg-overlay));
-  }
-
-  .toast-error_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-bg-overlay));
-  }
-
-  .toast-warning_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-bg-overlay));
-  }
-
-  .toast-info_QXnIWW {
-    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-bg-overlay));
-  }
-
-  .icon_QXnIWW {
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-    margin-top: 1px;
   }
 
-  .icon-success_QXnIWW {
-    color: var(--color-success-solid);
+  .panel_prqJ8a:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-radius: var(--radius-sm);
   }
-
-  .icon-warning_QXnIWW {
-    color: var(--color-warning-solid);
+}
+@layer components {
+  .root_XcG3ua {
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-lg);
+    flex-direction: column;
+    gap: 0;
+    display: flex;
+    overflow: hidden;
   }
 
-  .icon-error_QXnIWW {
-    color: var(--color-error-solid);
+  .item_XcG3ua {
+    border-bottom: var(--border-width-base) solid var(--color-line-subtle);
   }
 
-  .icon-info_QXnIWW {
-    color: var(--color-info-solid);
+  .item_XcG3ua:last-child {
+    border-bottom: none;
   }
 
-  .content_QXnIWW {
-    gap: var(--space-0-5);
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
+  .header_XcG3ua {
+    align-items: center;
     display: flex;
   }
 
-  .title_QXnIWW {
+  .trigger_XcG3ua {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
-    line-height: var(--line-height-normal);
-  }
-
-  .description_QXnIWW {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-    line-height: var(--line-height-relaxed);
-  }
-
-  .close_QXnIWW {
-    border-radius: var(--radius-sm);
-    width: 20px;
-    height: 20px;
-    color: var(--color-text-tertiary);
+    color: var(--color-primary);
     cursor: pointer;
+    text-align: left;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
+    user-select: none;
     background: none;
     border: none;
     outline: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    margin-top: 1px;
+    flex: 1;
     display: flex;
   }
 
-  .close_QXnIWW:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
-  }
-
-  .close_QXnIWW:focus-visible {
-    box-shadow: var(--shadow-focus);
+  .trigger_XcG3ua:hover {
+    background-color: var(--color-hover);
   }
-}
-
-@layer utilities;
-@layer theme, base;
 
-@layer components {
-  .positioner_yQZxSq {
-    z-index: var(--z-tooltip);
+  .trigger_XcG3ua:focus-visible {
+    box-shadow: inset var(--shadow-focus);
   }
 
-  .popup_yQZxSq {
-    background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-sm);
-    padding: var(--space-1) var(--space-2);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
-    color: var(--color-text-primary);
-    line-height: var(--line-height-normal);
-    word-break: break-word;
-    max-width: 240px;
-    transform-origin: var(--transform-origin);
-    transition: opacity .125s var(--easing-ease-out),
-      transform .125s var(--easing-ease-out);
+  .trigger_XcG3ua[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .popup_yQZxSq[data-instant] {
-    transition-duration: 0s;
+  .trigger-icon_XcG3ua {
+    color: var(--color-tertiary);
+    transition: transform var(--duration-normal) var(--easing-standard);
+    flex-shrink: 0;
   }
 
-  .popup_yQZxSq[data-starting-style] {
-    opacity: 0;
-    transform: scale(.96);
+  .trigger_XcG3ua[data-panel-open] .trigger-icon_XcG3ua {
+    transform: rotate(180deg);
   }
 
-  .popup_yQZxSq[data-ending-style] {
-    opacity: 0;
-    transition: opacity 75ms var(--easing-ease-in),
-      transform 75ms var(--easing-ease-in);
-    transform: scale(.98);
+  .panel_XcG3ua {
+    height: var(--accordion-panel-height);
+    transition: height var(--duration-normal) var(--easing-standard);
+    overflow: hidden;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .popup_yQZxSq {
-      transition: opacity .125s var(--easing-ease-out);
-    }
-
-    .popup_yQZxSq[data-ending-style] {
-      transition: opacity 75ms var(--easing-ease-in);
-    }
-
-    .popup_yQZxSq[data-starting-style], .popup_yQZxSq[data-ending-style] {
-      transform: none;
-    }
+  .panel_XcG3ua[data-starting-style], .panel_XcG3ua[data-ending-style] {
+    height: 0;
   }
 
-  .arrow_yQZxSq {
-    width: 8px;
-    height: 8px;
-    fill: var(--color-surface-3);
-    stroke: var(--color-border-base);
-    stroke-width: 1px;
+  .panel-content_XcG3ua {
+    padding: var(--space-2) var(--space-4) var(--space-4);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+}
+@layer components {
+  .root_4j5AgW {
+    justify-content: center;
+    align-items: center;
+    gap: var(--space-1-5);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-normal);
+    border-radius: var(--radius-md);
+    border: var(--border-width-base) solid transparent;
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      opacity var(--duration-fast) var(--easing-standard),
+      transform .1s var(--easing-ease-out);
+    outline: none;
+    line-height: 1;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .root_4j5AgW:active:not([data-disabled]) {
+    transform: scale(.97);
+  }
+
+  .root_4j5AgW:focus-visible {
+    box-shadow: var(--shadow-focus);
+  }
+
+  .root_4j5AgW[data-disabled] {
+    cursor: not-allowed;
+    opacity: .44;
+    pointer-events: none;
+  }
+
+  .size-xs_4j5AgW {
+    height: 22px;
+    padding-inline: var(--space-2);
+    font-size: var(--font-size-xs);
+    border-radius: var(--radius-sm);
+  }
+
+  .size-sm_4j5AgW {
+    height: 26px;
+    padding-inline: var(--space-2-5);
+    font-size: var(--font-size-sm);
+  }
+
+  .size-md_4j5AgW {
+    height: 30px;
+    padding-inline: var(--space-3);
+    font-size: var(--font-size-md);
+  }
+
+  .size-lg_4j5AgW {
+    height: 36px;
+    padding-inline: var(--space-4);
+    font-size: var(--font-size-lg);
+    border-radius: var(--radius-lg);
+  }
+
+  .icon-only_4j5AgW.size-xs_4j5AgW {
+    width: 22px;
+    padding-inline: 0;
+  }
+
+  .icon-only_4j5AgW.size-sm_4j5AgW {
+    width: 26px;
+    padding-inline: 0;
+  }
+
+  .icon-only_4j5AgW.size-md_4j5AgW {
+    width: 30px;
+    padding-inline: 0;
+  }
+
+  .icon-only_4j5AgW.size-lg_4j5AgW {
+    width: 36px;
+    padding-inline: 0;
+  }
+
+  .tone-primary_4j5AgW {
+    --btn-color: var(--color-accent);
+    --btn-color-hover: var(--color-accent-hover);
+    --btn-color-pressed: var(--color-accent-pressed);
+    --btn-tint: var(--color-accent-tint);
+    --btn-tint-hover: var(--color-accent-tint-hover);
+    --btn-on-color: var(--color-on-accent);
+  }
+
+  .tone-secondary_4j5AgW {
+    --btn-color: var(--color-secondary);
+    --btn-color-hover: var(--color-primary);
+    --btn-color-pressed: var(--color-primary);
+    --btn-tint: var(--color-hover);
+    --btn-tint-hover: var(--color-active);
+    --btn-on-color: var(--color-canvas);
+  }
+
+  .tone-destructive_4j5AgW {
+    --btn-color: var(--color-error-solid);
+    --btn-color-hover: var(--color-error-solid);
+    --btn-color-pressed: var(--color-error-solid);
+    --btn-tint: var(--color-error-bg);
+    --btn-tint-hover: var(--color-error-bg);
+    --btn-on-color: #fff;
+  }
+
+  .tone-success_4j5AgW {
+    --btn-color: var(--color-success-solid);
+    --btn-color-hover: var(--color-success-solid);
+    --btn-color-pressed: var(--color-success-solid);
+    --btn-tint: var(--color-success-bg);
+    --btn-tint-hover: var(--color-success-bg);
+    --btn-on-color: #fff;
+  }
+
+  .tone-warning_4j5AgW {
+    --btn-color: var(--color-warning-solid);
+    --btn-color-hover: var(--color-warning-solid);
+    --btn-color-pressed: var(--color-warning-solid);
+    --btn-tint: var(--color-warning-bg);
+    --btn-tint-hover: var(--color-warning-bg);
+    --btn-on-color: #fff;
+  }
+
+  .variant-solid_4j5AgW {
+    background-color: var(--btn-color);
+    border-color: var(--btn-color);
+    color: var(--btn-on-color);
+  }
+
+  .variant-solid_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
+    filter: brightness(.92);
+  }
+
+  .variant-solid_4j5AgW:active:not([data-disabled]), .variant-solid_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-color-pressed);
+    border-color: var(--btn-color-pressed);
+    filter: brightness(.84);
+  }
+
+  .variant-solid_4j5AgW.tone-primary_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--btn-color-hover);
+    border-color: var(--btn-color-hover);
+    filter: none;
+  }
+
+  .variant-solid_4j5AgW.tone-primary_4j5AgW:active:not([data-disabled]), .variant-solid_4j5AgW.tone-primary_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-color-pressed);
+    border-color: var(--btn-color-pressed);
+    filter: none;
+  }
+
+  .variant-soft_4j5AgW {
+    background-color: var(--btn-tint);
+    color: var(--btn-color);
+    border-color: #0000;
+  }
+
+  .variant-soft_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--btn-tint-hover);
+  }
+
+  .variant-soft_4j5AgW:active:not([data-disabled]), .variant-soft_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--btn-tint-hover);
+    filter: brightness(.95);
+  }
+
+  .variant-outline_4j5AgW {
+    border-color: var(--color-line-strong);
+    color: var(--color-primary);
+    background-color: #0000;
+  }
+
+  .variant-outline_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--color-hover);
+    border-color: var(--btn-color);
+    color: var(--btn-color);
+  }
+
+  .variant-outline_4j5AgW:active:not([data-disabled]), .variant-outline_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--color-active);
+  }
+
+  .variant-ghost_4j5AgW {
+    color: var(--color-secondary);
+    background-color: #0000;
+    border-color: #0000;
+  }
+
+  .variant-ghost_4j5AgW:hover:not([data-disabled]) {
+    background-color: var(--color-hover);
+    color: var(--btn-color);
+  }
+
+  .variant-ghost_4j5AgW:active:not([data-disabled]), .variant-ghost_4j5AgW[data-pressed]:not([data-disabled]) {
+    background-color: var(--color-active);
+  }
+
+  .loader_4j5AgW {
+    opacity: 0;
+    pointer-events: none;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: absolute;
+    inset: 0;
+  }
+
+  .loader-visible_4j5AgW {
+    opacity: 1;
+  }
+
+  .content-loading_4j5AgW {
+    visibility: hidden;
+  }
+
+  @keyframes spin_4j5AgW {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner_4j5AgW {
+    opacity: .7;
+    border: 1.5px solid;
+    border-top-color: #0000;
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    animation: .6s linear infinite spin_4j5AgW;
   }
 }
+@layer components {
+  .backdrop_xocxMW {
+    min-height: 100dvh;
+    z-index: var(--z-overlay);
+    transition: opacity var(--duration-slow) var(--easing-standard);
+    background-color: #0000007a;
+    position: fixed;
+    inset: 0;
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
+  }
 
-@layer utilities;
-@layer theme, base;
+  .backdrop_xocxMW[data-starting-style], .backdrop_xocxMW[data-ending-style] {
+    opacity: 0;
+  }
 
+  .popup_xocxMW {
+    z-index: var(--z-modal);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-2xl);
+    box-shadow: var(--shadow-xl);
+    padding: var(--space-5) var(--space-6);
+    width: min(380px, calc(100vw - var(--space-8)));
+    gap: var(--space-3);
+    transition: opacity .2s var(--easing-ease-out),
+      transform .2s var(--easing-spring);
+    outline: none;
+    flex-direction: column;
+    display: flex;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+  }
+
+  .popup_xocxMW[data-starting-style] {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(.96);
+  }
+
+  .popup_xocxMW[data-ending-style] {
+    opacity: 0;
+    transition: opacity .15s var(--easing-ease-in),
+      transform .15s var(--easing-ease-in);
+    transform: translate(-50%, -50%) scale(.98);
+  }
+
+  .header_xocxMW {
+    gap: var(--space-1-5);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .icon_xocxMW {
+    margin-bottom: var(--space-1);
+  }
+
+  .title_xocxMW {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+  }
+
+  .description_xocxMW {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+  }
+
+  .actions_xocxMW {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-1);
+    display: flex;
+  }
+}
 @layer components {
   .backdrop_VsZA5W {
     z-index: var(--z-overlay);
@@ -1005,14 +1354,14 @@
 
   .popup_VsZA5W {
     z-index: var(--z-modal);
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-2xl);
     box-shadow: var(--shadow-xl);
-    padding: var(--space-6);
-    width: min(480px, calc(100vw - var(--space-8)));
+    padding: var(--space-5) var(--space-6) var(--space-5);
+    width: min(440px, calc(100vw - var(--space-8)));
     max-height: min(640px, calc(100vh - var(--space-8)));
-    gap: var(--space-4);
+    gap: var(--space-3);
     transition: opacity .2s var(--easing-ease-out),
       transform .2s var(--easing-spring);
     outline: none;
@@ -1038,25 +1387,25 @@
   }
 
   .header_VsZA5W {
-    gap: var(--space-1);
+    gap: var(--space-2);
+    text-align: center;
     flex-direction: column;
     display: flex;
   }
 
   .title_VsZA5W {
-    font-family: var(--font-mono);
+    font-family: var(--font-sans);
     font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-primary);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
-    padding-right: var(--space-6);
   }
 
   .description_VsZA5W {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    font-family: var(--font-sans);
+    font-size: var(--font-size-md);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
   }
 
@@ -1066,7 +1415,7 @@
     border-radius: var(--radius-sm);
     width: 24px;
     height: 24px;
-    color: var(--color-text-tertiary);
+    color: var(--color-tertiary);
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard),
       color var(--duration-fast) var(--easing-standard);
@@ -1080,8 +1429,8 @@
   }
 
   .close_VsZA5W:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
   .close_VsZA5W:focus-visible {
@@ -1091,7 +1440,7 @@
   .body_VsZA5W {
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
+    color: var(--color-secondary);
     line-height: var(--line-height-relaxed);
     flex: 1;
     overflow-y: auto;
@@ -1099,1326 +1448,1254 @@
 
   .footer_VsZA5W {
     justify-content: flex-end;
-    align-items: center;
-    gap: var(--space-2);
-    padding-top: var(--space-2);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
-    display: flex;
-  }
-}
-
-@layer utilities;
-@layer theme, base;
-
-@layer components {
-  .root_XcG3ua {
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-lg);
-    flex-direction: column;
-    gap: 0;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .item_XcG3ua {
-    border-bottom: var(--border-width-base) solid var(--color-border-subtle);
-  }
-
-  .item_XcG3ua:last-child {
-    border-bottom: none;
-  }
-
-  .header_XcG3ua {
-    align-items: center;
-    display: flex;
-  }
-
-  .trigger_XcG3ua {
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
-    cursor: pointer;
-    text-align: left;
-    transition: background-color var(--duration-fast) var(--easing-standard),
-      color var(--duration-fast) var(--easing-standard);
-    user-select: none;
-    background: none;
-    border: none;
-    outline: none;
-    flex: 1;
-    display: flex;
-  }
-
-  .trigger_XcG3ua:hover {
-    background-color: var(--color-surface-hover);
-  }
-
-  .trigger_XcG3ua:focus-visible {
-    box-shadow: inset var(--shadow-focus);
-  }
-
-  .trigger_XcG3ua[data-disabled] {
-    opacity: .44;
-    cursor: not-allowed;
-  }
-
-  .trigger-icon_XcG3ua {
-    color: var(--color-text-tertiary);
-    transition: transform var(--duration-normal) var(--easing-standard);
-    flex-shrink: 0;
-  }
-
-  .trigger_XcG3ua[data-panel-open] .trigger-icon_XcG3ua {
-    transform: rotate(180deg);
-  }
-
-  .panel_XcG3ua {
-    height: var(--accordion-panel-height);
-    transition: height var(--duration-normal) var(--easing-standard);
-    overflow: hidden;
-  }
-
-  .panel_XcG3ua[data-starting-style], .panel_XcG3ua[data-ending-style] {
-    height: 0;
-  }
-
-  .panel-content_XcG3ua {
-    padding: var(--space-2) var(--space-4) var(--space-4);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    line-height: var(--line-height-relaxed);
-  }
-}
-
-@layer utilities;
-@layer theme, base;
-
-@layer components {
-  .separator_027UfG {
-    background-color: var(--color-border-base);
-    flex-shrink: 0;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-2);
+    display: flex;
   }
 
-  .separator_027UfG[data-orientation="horizontal"] {
-    width: 100%;
-    height: var(--border-width-base, 1px);
+  .footer-split_VsZA5W {
+    justify-content: space-between;
   }
 
-  .separator_027UfG[data-orientation="vertical"] {
-    width: var(--border-width-base, 1px);
-    align-self: stretch;
+  .footer-end_VsZA5W {
+    align-items: center;
+    gap: var(--space-2);
+    display: flex;
   }
 }
-
-@layer utilities;
-@layer theme, base;
-
 @layer components {
-  .root_rWN60G {
+  .wrapper_ZbafIa {
+    gap: var(--space-1);
     flex-direction: column;
-    gap: 0;
+    width: 100%;
     display: flex;
   }
 
-  .trigger_rWN60G {
+  .inputWrapper_ZbafIa {
     align-items: center;
-    gap: var(--space-2);
-    padding: var(--space-2) var(--space-3);
+    display: flex;
+    position: relative;
+  }
+
+  .root_ZbafIa {
+    width: 100%;
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-primary);
-    background: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
+    color: var(--color-primary);
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
     border-radius: var(--radius-md);
-    cursor: pointer;
-    text-align: left;
-    user-select: none;
-    transition: background-color var(--duration-fast) var(--easing-standard),
-      border-bottom-left-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
-      border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
-      border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);
+    transition: border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      background-color var(--duration-fast) var(--easing-standard);
+    -webkit-appearance: none;
+    appearance: none;
     outline: none;
-    display: flex;
   }
 
-  .trigger_rWN60G[data-panel-open] {
-    transition: background-color var(--duration-fast) var(--easing-standard),
-      border-bottom-left-radius var(--duration-normal) var(--easing-standard),
-      border-bottom-right-radius var(--duration-normal) var(--easing-standard),
-      border-bottom-color var(--duration-normal) var(--easing-standard);
-    border-bottom-color: #0000;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
+  .root_ZbafIa::placeholder {
+    color: var(--color-tertiary);
+    font-family: var(--font-mono);
   }
 
-  .trigger_rWN60G:hover {
-    background-color: var(--color-surface-hover);
+  .root_ZbafIa:hover:not(:disabled):not([data-invalid]) {
+    border-color: var(--color-line-strong);
   }
 
-  .trigger_rWN60G:focus-visible {
+  .root_ZbafIa:focus:not(:disabled) {
+    border-color: var(--color-accent);
     box-shadow: var(--shadow-focus);
   }
 
-  .trigger_rWN60G[data-disabled] {
+  .root_ZbafIa:disabled {
     opacity: .44;
     cursor: not-allowed;
+    background-color: var(--color-surface-2);
   }
 
-  .trigger-icon_rWN60G {
-    color: var(--color-text-tertiary);
-    transition: transform var(--duration-normal) var(--easing-standard);
-    flex-shrink: 0;
+  .root_ZbafIa[data-invalid], .root_ZbafIa[aria-invalid="true"] {
+    border-color: var(--color-error-solid);
   }
 
-  .trigger_rWN60G[data-panel-open] .trigger-icon_rWN60G {
-    transform: rotate(90deg);
+  .root_ZbafIa[data-invalid]:focus, .root_ZbafIa[aria-invalid="true"]:focus {
+    box-shadow: 0 0 0 3px #dc262640;
   }
 
-  .panel_rWN60G {
-    height: var(--collapsible-panel-height);
-    transition: height var(--duration-normal) var(--easing-standard);
-    overflow: hidden;
+  .size-sm_ZbafIa {
+    height: 26px;
+    padding-inline: var(--space-2);
+    font-size: var(--font-size-xs);
   }
 
-  .panel_rWN60G[hidden]:not([hidden="until-found"]) {
-    display: none;
+  .size-md_ZbafIa {
+    height: 30px;
+    padding-inline: var(--space-2-5);
+    font-size: var(--font-size-sm);
   }
 
-  .panel_rWN60G[data-starting-style], .panel_rWN60G[data-ending-style] {
-    height: 0;
+  .size-lg_ZbafIa {
+    height: 36px;
+    padding-inline: var(--space-3);
+    font-size: var(--font-size-md);
+    border-radius: var(--radius-lg);
   }
 
-  .panel-content_rWN60G {
-    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    line-height: var(--line-height-relaxed);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-    background: var(--color-bg-elevated);
-    border-top: none;
+  .has-left-icon_ZbafIa {
+    padding-left: var(--space-8);
   }
-}
 
-@layer utilities;
-@layer components {
-  .root_4j5AgW {
+  .has-right-icon_ZbafIa {
+    padding-right: var(--space-8);
+  }
+
+  .adornment_ZbafIa {
+    color: var(--color-tertiary);
+    pointer-events: none;
+    width: var(--space-8);
     justify-content: center;
     align-items: center;
-    gap: var(--space-1-5);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--letter-spacing-normal);
-    border-radius: var(--radius-md);
-    border: var(--border-width-base) solid transparent;
-    cursor: pointer;
-    user-select: none;
-    white-space: nowrap;
-    transition: background-color var(--duration-fast) var(--easing-standard),
-      border-color var(--duration-fast) var(--easing-standard),
-      color var(--duration-fast) var(--easing-standard),
-      box-shadow var(--duration-fast) var(--easing-standard),
-      opacity var(--duration-fast) var(--easing-standard),
-      transform .1s var(--easing-ease-out);
-    outline: none;
-    line-height: 1;
-    text-decoration: none;
-    display: inline-flex;
-    position: relative;
+    display: flex;
+    position: absolute;
   }
 
-  .root_4j5AgW:active:not([data-disabled]) {
-    transform: scale(.97);
+  .adornment-left_ZbafIa {
+    left: 0;
   }
 
-  .root_4j5AgW:focus-visible {
-    box-shadow: var(--shadow-focus);
+  .adornment-right_ZbafIa {
+    right: 0;
   }
-
-  .root_4j5AgW[data-disabled] {
-    cursor: not-allowed;
-    opacity: .44;
-    pointer-events: none;
+}
+@layer components {
+  .root_eYYE3W {
+    gap: var(--space-1-5);
+    flex-direction: column;
+    width: 100%;
+    display: flex;
   }
 
-  .size-xs_4j5AgW {
-    height: 22px;
-    padding-inline: var(--space-2);
+  .label-row_eYYE3W {
+    font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    border-radius: var(--radius-sm);
+    color: var(--color-secondary);
+    justify-content: space-between;
+    align-items: center;
+    display: flex;
   }
 
-  .size-sm_4j5AgW {
-    height: 26px;
-    padding-inline: var(--space-2-5);
-    font-size: var(--font-size-sm);
+  .track_eYYE3W {
+    background-color: var(--color-surface-3);
+    border-radius: var(--radius-full);
+    width: 100%;
+    height: 6px;
+    overflow: hidden;
   }
 
-  .size-md_4j5AgW {
-    height: 30px;
-    padding-inline: var(--space-3);
-    font-size: var(--font-size-md);
+  .track-sm_eYYE3W {
+    height: 4px;
   }
 
-  .size-lg_4j5AgW {
-    height: 36px;
-    padding-inline: var(--space-4);
-    font-size: var(--font-size-lg);
-    border-radius: var(--radius-lg);
+  .track-md_eYYE3W {
+    height: 6px;
   }
 
-  .icon-only_4j5AgW.size-xs_4j5AgW {
-    width: 22px;
-    padding-inline: 0;
+  .track-lg_eYYE3W {
+    height: 8px;
   }
 
-  .icon-only_4j5AgW.size-sm_4j5AgW {
-    width: 26px;
-    padding-inline: 0;
+  .indicator_eYYE3W {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    height: 100%;
+    transition: width var(--duration-slower) var(--easing-standard);
   }
 
-  .icon-only_4j5AgW.size-md_4j5AgW {
-    width: 30px;
-    padding-inline: 0;
+  .indicator-success_eYYE3W {
+    background-color: var(--color-success-solid);
   }
 
-  .icon-only_4j5AgW.size-lg_4j5AgW {
-    width: 36px;
-    padding-inline: 0;
+  .indicator-warning_eYYE3W {
+    background-color: var(--color-warning-solid);
   }
 
-  .tone-primary_4j5AgW {
-    --btn-color: var(--color-accent);
-    --btn-color-hover: var(--color-accent-hover);
-    --btn-color-pressed: var(--color-accent-pressed);
-    --btn-tint: var(--color-accent-tint);
-    --btn-tint-hover: var(--color-accent-tint-hover);
-    --btn-on-color: var(--color-text-on-accent);
+  .indicator-error_eYYE3W {
+    background-color: var(--color-error-solid);
   }
 
-  .tone-secondary_4j5AgW {
-    --btn-color: var(--color-text-secondary);
-    --btn-color-hover: var(--color-text-primary);
-    --btn-color-pressed: var(--color-text-primary);
-    --btn-tint: var(--color-surface-hover);
-    --btn-tint-hover: var(--color-surface-active);
-    --btn-on-color: var(--color-bg-base);
+  @keyframes progress-indeterminate_eYYE3W {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(400%);
+    }
   }
 
-  .tone-destructive_4j5AgW {
-    --btn-color: var(--color-error-solid);
-    --btn-color-hover: var(--color-error-solid);
-    --btn-color-pressed: var(--color-error-solid);
-    --btn-tint: var(--color-error-bg);
-    --btn-tint-hover: var(--color-error-bg);
-    --btn-on-color: #fff;
+  .indicator_eYYE3W[data-value="null"], .indicator-indeterminate_eYYE3W {
+    animation: 1.4s linear infinite progress-indeterminate_eYYE3W;
+    width: 30% !important;
+  }
+}
+@layer components {
+  .backdrop_JNKGQq {
+    --backdrop-opacity: .48;
+    min-height: 100dvh;
+    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
+    z-index: var(--z-overlay);
+    background-color: #000;
+    transition-property: opacity;
+    transition-duration: .45s;
+    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
+    position: fixed;
+    inset: 0;
+
+    @supports (-webkit-touch-callout: none) {
+      position: absolute;
+    }
   }
 
-  .tone-success_4j5AgW {
-    --btn-color: var(--color-success-solid);
-    --btn-color-hover: var(--color-success-solid);
-    --btn-color-pressed: var(--color-success-solid);
-    --btn-tint: var(--color-success-bg);
-    --btn-tint-hover: var(--color-success-bg);
-    --btn-on-color: #fff;
+  .backdrop_JNKGQq[data-starting-style], .backdrop_JNKGQq[data-ending-style] {
+    opacity: 0;
   }
 
-  .tone-warning_4j5AgW {
-    --btn-color: var(--color-warning-solid);
-    --btn-color-hover: var(--color-warning-solid);
-    --btn-color-pressed: var(--color-warning-solid);
-    --btn-tint: var(--color-warning-bg);
-    --btn-tint-hover: var(--color-warning-bg);
-    --btn-on-color: #fff;
+  .backdrop_JNKGQq[data-swiping] {
+    transition-duration: 0s;
   }
 
-  .variant-solid_4j5AgW {
-    background-color: var(--btn-color);
-    border-color: var(--btn-color);
-    color: var(--btn-on-color);
+  .backdrop_JNKGQq[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
   }
 
-  .variant-solid_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--btn-color-hover);
-    border-color: var(--btn-color-hover);
-    filter: brightness(.92);
+  .viewport_JNKGQq {
+    z-index: var(--z-modal);
+    display: flex;
+    position: fixed;
+    inset: 0;
   }
 
-  .variant-solid_4j5AgW:active:not([data-disabled]), .variant-solid_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--btn-color-pressed);
-    border-color: var(--btn-color-pressed);
-    filter: brightness(.84);
+  .viewport_JNKGQq[data-side="left"] {
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
-  .variant-solid_4j5AgW.tone-primary_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--btn-color-hover);
-    border-color: var(--btn-color-hover);
-    filter: none;
+  .viewport_JNKGQq[data-side="right"] {
+    justify-content: flex-end;
+    align-items: stretch;
   }
 
-  .variant-solid_4j5AgW.tone-primary_4j5AgW:active:not([data-disabled]), .variant-solid_4j5AgW.tone-primary_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--btn-color-pressed);
-    border-color: var(--btn-color-pressed);
-    filter: none;
+  .viewport_JNKGQq[data-side="bottom"] {
+    justify-content: center;
+    align-items: flex-end;
   }
 
-  .variant-soft_4j5AgW {
-    background-color: var(--btn-tint);
-    color: var(--btn-color);
-    border-color: #0000;
+  .viewport_JNKGQq[data-side="top"] {
+    justify-content: center;
+    align-items: flex-start;
   }
 
-  .variant-soft_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--btn-tint-hover);
-  }
+  @supports (-webkit-touch-callout: none) {
+    .viewport_JNKGQq[data-side="left"], .viewport_JNKGQq[data-side="right"] {
+      padding: .625rem;
+    }
 
-  .variant-soft_4j5AgW:active:not([data-disabled]), .variant-soft_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--btn-tint-hover);
-    filter: brightness(.95);
-  }
+    .viewport_JNKGQq[data-side="bottom"] {
+      padding: 0 .625rem .625rem;
+    }
 
-  .variant-outline_4j5AgW {
-    border-color: var(--color-border-strong);
-    color: var(--color-text-primary);
-    background-color: #0000;
+    .viewport_JNKGQq[data-side="top"] {
+      padding: .625rem .625rem 0;
+    }
   }
 
-  .variant-outline_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
-    border-color: var(--btn-color);
-    color: var(--btn-color);
+  .popup_JNKGQq {
+    box-sizing: border-box;
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    overscroll-behavior: contain;
+    touch-action: auto;
+    will-change: transform;
+    outline: none;
+    transition-duration: .45s;
+    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
+    overflow-y: auto;
   }
 
-  .variant-outline_4j5AgW:active:not([data-disabled]), .variant-outline_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+  .popup_JNKGQq[data-swiping] {
+    user-select: none;
+    transition-duration: 0s;
   }
 
-  .variant-ghost_4j5AgW {
-    color: var(--color-text-secondary);
-    background-color: #0000;
-    border-color: #0000;
+  .popup_JNKGQq[data-ending-style] {
+    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
   }
 
-  .variant-ghost_4j5AgW:hover:not([data-disabled]) {
-    background-color: var(--color-surface-hover);
-    color: var(--btn-color);
-  }
+  .popup-right_JNKGQq {
+    --bleed: 3rem;
+    height: 100%;
+    width: calc(var(--drawer-width, 20rem) + var(--bleed));
+    max-width: calc(100vw - 3rem + var(--bleed));
+    padding: var(--space-6);
+    padding-right: calc(var(--space-6) + var(--bleed));
+    margin-right: calc(-1 * var(--bleed));
+    transform: translateX(var(--drawer-swipe-movement-x));
+    transition-property: transform;
 
-  .variant-ghost_4j5AgW:active:not([data-disabled]), .variant-ghost_4j5AgW[data-pressed]:not([data-disabled]) {
-    background-color: var(--color-surface-active);
+    @supports (-webkit-touch-callout: none) {
+      --bleed: 0px;
+      border-radius: var(--radius-xl);
+      margin-right: 0;
+    }
   }
 
-  .loader_4j5AgW {
-    opacity: 0;
-    pointer-events: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: absolute;
-    inset: 0;
+  .popup-right_JNKGQq[data-starting-style], .popup-right_JNKGQq[data-ending-style] {
+    transform: translateX(calc(100% - var(--bleed) + 2px));
   }
 
-  .loader-visible_4j5AgW {
-    opacity: 1;
+  .popup-left_JNKGQq {
+    --bleed: 3rem;
+    height: 100%;
+    width: calc(var(--drawer-width, 20rem) + var(--bleed));
+    max-width: calc(100vw - 3rem + var(--bleed));
+    padding: var(--space-6);
+    padding-left: calc(var(--space-6) + var(--bleed));
+    margin-left: calc(-1 * var(--bleed));
+    transform: translateX(var(--drawer-swipe-movement-x));
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      --bleed: 0px;
+      border-radius: var(--radius-xl);
+      margin-left: 0;
+    }
   }
 
-  .content-loading_4j5AgW {
-    visibility: hidden;
+  .popup-left_JNKGQq[data-starting-style], .popup-left_JNKGQq[data-ending-style] {
+    transform: translateX(calc(-100% + var(--bleed) - 2px));
   }
 
-  @keyframes spin_4j5AgW {
-    to {
-      transform: rotate(360deg);
+  .popup-bottom_JNKGQq {
+    width: 100%;
+    max-width: var(--drawer-max-width, 480px);
+    max-height: 90dvh;
+    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
+    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+    transform: translateY(var(--drawer-swipe-movement-y));
+    border-bottom: none;
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      border-radius: var(--radius-2xl);
     }
   }
 
-  .spinner_4j5AgW {
-    opacity: .7;
-    border: 1.5px solid;
-    border-top-color: #0000;
-    border-radius: 50%;
-    width: 12px;
-    height: 12px;
-    animation: .6s linear infinite spin_4j5AgW;
+  .popup-bottom_JNKGQq[data-starting-style], .popup-bottom_JNKGQq[data-ending-style] {
+    transform: translateY(calc(100% + 2px));
   }
-}
-@layer theme, base;
 
-@layer components {
-  .root_msdI1W {
-    align-items: flex-start;
-    gap: var(--space-1);
-    flex-direction: column;
-    display: flex;
+  .popup-top_JNKGQq {
+    width: 100%;
+    max-width: var(--drawer-max-width, 480px);
+    max-height: 90dvh;
+    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);
+    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
+    transform: translateY(var(--drawer-swipe-movement-y));
+    border-top: none;
+    transition-property: transform;
+
+    @supports (-webkit-touch-callout: none) {
+      border-radius: var(--radius-2xl);
+    }
   }
 
-  .scrub-area_msdI1W {
-    cursor: ew-resize;
-    user-select: none;
+  .popup-top_JNKGQq[data-starting-style], .popup-top_JNKGQq[data-ending-style] {
+    transform: translateY(calc(-100% - 2px));
   }
 
-  .scrub-area-cursor_msdI1W {
-    filter: drop-shadow(0 1px 1px #00000080);
+  .handle-bar_JNKGQq {
+    background-color: var(--color-line-strong);
+    width: 2.5rem;
+    height: 4px;
+    margin: 0 auto var(--space-4);
+    border-radius: 9999px;
+    flex-shrink: 0;
   }
 
-  .label_msdI1W {
-    cursor: ew-resize;
-    font-family: var(--font-mono);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-medium);
-    color: var(--color-text-secondary);
-    letter-spacing: var(--letter-spacing-wide);
-    text-transform: uppercase;
+  .popup-top_JNKGQq .handle-bar_JNKGQq {
+    margin: var(--space-4) auto 0;
+    order: 1;
   }
 
-  .group_msdI1W {
+  .content_JNKGQq {
+    gap: var(--space-4);
+    flex-direction: column;
+    height: 100%;
     display: flex;
   }
 
-  .input_msdI1W {
-    box-sizing: border-box;
-    width: 6rem;
-    height: 2rem;
+  .title_JNKGQq {
     font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    text-align: center;
-    font-variant-numeric: tabular-nums;
-    color: var(--color-text-primary);
-    background-color: var(--color-bg-elevated);
-    border-top: var(--border-width-base) solid var(--color-border-base);
-    border-bottom: var(--border-width-base) solid var(--color-border-base);
-    transition: box-shadow var(--duration-fast) var(--easing-standard);
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
-    outline: none;
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+    line-height: var(--line-height-tight);
+    letter-spacing: var(--letter-spacing-tight);
+    padding-right: var(--space-6);
     margin: 0;
-    padding: 0;
-    font-weight: normal;
-  }
-
-  .input_msdI1W:focus {
-    z-index: 1;
-    box-shadow: inset var(--shadow-focus);
   }
 
-  .input_msdI1W[data-disabled] {
-    opacity: .44;
-    cursor: not-allowed;
+  .description_JNKGQq {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+    margin: 0;
   }
 
-  .step-button_msdI1W {
-    box-sizing: border-box;
-    border: var(--border-width-base) solid var(--color-border-base);
-    background-color: var(--color-surface-1);
-    width: 2rem;
-    height: 2rem;
-    color: var(--color-text-secondary);
+  .close_JNKGQq {
+    top: var(--space-4);
+    right: var(--space-4);
+    border-radius: var(--radius-sm);
+    width: 24px;
+    height: 24px;
+    color: var(--color-tertiary);
     cursor: pointer;
-    user-select: none;
     transition: background-color var(--duration-fast) var(--easing-standard),
-      color var(--duration-fast) var(--easing-standard),
-      transform .1s var(--easing-ease-out);
+      color var(--duration-fast) var(--easing-standard);
+    background: none;
+    border: none;
     outline: none;
     justify-content: center;
     align-items: center;
-    margin: 0;
-    padding: 0;
     display: flex;
+    position: absolute;
   }
 
-  .step-button_msdI1W:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
-  }
-
-  .step-button_msdI1W:active:not([data-disabled]) {
-    background-color: var(--color-surface-active);
-    transform: scale(.93);
-  }
-
-  .step-button_msdI1W:focus-visible {
-    z-index: 1;
-    box-shadow: inset var(--shadow-focus);
-  }
-
-  .step-button_msdI1W[data-disabled] {
-    opacity: .44;
-    cursor: not-allowed;
+  .close_JNKGQq:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
-  .decrement_msdI1W {
-    border-radius: var(--radius-md) 0 0 var(--radius-md);
+  .close_JNKGQq:focus-visible {
+    box-shadow: var(--shadow-focus);
   }
 
-  .increment_msdI1W {
-    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  .footer_JNKGQq {
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-2);
+    padding-top: var(--space-4);
+    border-top: var(--border-width-base) solid var(--color-line-subtle);
+    margin-top: auto;
+    display: flex;
   }
 }
-
-@layer utilities;
-@layer theme, base;
-
 @layer components {
-  .backdrop_JNKGQq {
-    --backdrop-opacity: .48;
-    min-height: 100dvh;
-    opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
-    z-index: var(--z-overlay);
-    background-color: #000;
-    transition-property: opacity;
-    transition-duration: .45s;
-    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
-    position: fixed;
-    inset: 0;
-
-    @supports (-webkit-touch-callout: none) {
-      position: absolute;
-    }
+  .trigger_Vd2Aoq {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    background-color: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    -webkit-appearance: none;
+    appearance: none;
+    height: 30px;
+    padding-inline: var(--space-2-5);
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    outline: none;
+    display: inline-flex;
+    overflow: hidden;
   }
 
-  .backdrop_JNKGQq[data-starting-style], .backdrop_JNKGQq[data-ending-style] {
-    opacity: 0;
+  .trigger_Vd2Aoq:hover:not([data-disabled]) {
+    border-color: var(--color-line-strong);
   }
 
-  .backdrop_JNKGQq[data-swiping] {
-    transition-duration: 0s;
+  .trigger_Vd2Aoq:focus-visible {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-focus);
   }
 
-  .backdrop_JNKGQq[data-ending-style] {
-    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+  .trigger_Vd2Aoq[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .viewport_JNKGQq {
-    z-index: var(--z-modal);
-    display: flex;
-    position: fixed;
-    inset: 0;
+  .trigger-value_Vd2Aoq {
+    text-overflow: ellipsis;
+    flex: 1;
+    overflow: hidden;
   }
 
-  .viewport_JNKGQq[data-side="left"] {
-    justify-content: flex-start;
-    align-items: stretch;
+  .trigger-icon_Vd2Aoq {
+    color: var(--color-tertiary);
+    transition: transform var(--duration-normal) var(--easing-standard);
+    flex-shrink: 0;
   }
 
-  .viewport_JNKGQq[data-side="right"] {
-    justify-content: flex-end;
-    align-items: stretch;
+  .trigger_Vd2Aoq[data-popup-open] .trigger-icon_Vd2Aoq {
+    transform: rotate(180deg);
   }
 
-  .viewport_JNKGQq[data-side="bottom"] {
-    justify-content: center;
-    align-items: flex-end;
+  .positioner_Vd2Aoq {
+    z-index: var(--z-dropdown);
   }
 
-  .viewport_JNKGQq[data-side="top"] {
-    justify-content: center;
-    align-items: flex-start;
+  .popup_Vd2Aoq {
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-popover);
+    padding: var(--space-1);
+    min-width: var(--anchor-width);
+    max-width: var(--available-width);
+    width: fit-content;
+    max-height: 280px;
+    transform-origin: var(--transform-origin);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .15s var(--easing-ease-out);
+    outline: none;
+    overflow-y: auto;
   }
 
-  @supports (-webkit-touch-callout: none) {
-    .viewport_JNKGQq[data-side="left"], .viewport_JNKGQq[data-side="right"] {
-      padding: .625rem;
-    }
+  .popup_Vd2Aoq[data-starting-style] {
+    opacity: 0;
+    transform: scale(.95);
+  }
 
-    .viewport_JNKGQq[data-side="bottom"] {
-      padding: 0 .625rem .625rem;
-    }
+  .popup_Vd2Aoq[data-ending-style] {
+    opacity: 0;
+    transition: opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+    transform: scale(.98);
+  }
 
-    .viewport_JNKGQq[data-side="top"] {
-      padding: .625rem .625rem 0;
+  @supports (backdrop-filter: blur(12px)) {
+    .popup_Vd2Aoq {
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
     }
   }
 
-  .popup_JNKGQq {
-    box-sizing: border-box;
-    background-color: var(--color-bg-elevated);
-    border: var(--border-width-base) solid var(--color-border-base);
-    overscroll-behavior: contain;
-    touch-action: auto;
-    will-change: transform;
+  .item_Vd2Aoq {
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1-5) var(--space-2-5);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    border-radius: var(--radius-sm);
+    cursor: default;
+    transition: background-color var(--duration-fast) var(--easing-standard);
+    user-select: none;
     outline: none;
-    transition-duration: .45s;
-    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
-    overflow-y: auto;
+    display: flex;
   }
 
-  .popup_JNKGQq[data-swiping] {
-    user-select: none;
-    transition-duration: 0s;
+  .item_Vd2Aoq:hover, .item_Vd2Aoq[data-highlighted] {
+    background-color: var(--color-accent);
+    color: var(--color-on-accent);
   }
 
-  .popup_JNKGQq[data-ending-style] {
-    transition-duration: calc(var(--drawer-swipe-strength) * .4s);
+  .item_Vd2Aoq[data-selected] {
+    font-weight: var(--font-weight-medium);
   }
 
-  .popup-right_JNKGQq {
-    --bleed: 3rem;
-    height: 100%;
-    width: calc(var(--drawer-width, 20rem) + var(--bleed));
-    max-width: calc(100vw - 3rem + var(--bleed));
-    padding: var(--space-6);
-    padding-right: calc(var(--space-6) + var(--bleed));
-    margin-right: calc(-1 * var(--bleed));
-    transform: translateX(var(--drawer-swipe-movement-x));
-    transition-property: transform;
+  .item_Vd2Aoq[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
+  }
 
-    @supports (-webkit-touch-callout: none) {
-      --bleed: 0px;
-      border-radius: var(--radius-xl);
-      margin-right: 0;
-    }
+  .item-indicator_Vd2Aoq {
+    color: var(--color-accent);
+    align-items: center;
+    margin-left: auto;
+    display: flex;
   }
 
-  .popup-right_JNKGQq[data-starting-style], .popup-right_JNKGQq[data-ending-style] {
-    transform: translateX(calc(100% - var(--bleed) + 2px));
+  .item_Vd2Aoq:hover .item-indicator_Vd2Aoq, .item_Vd2Aoq[data-highlighted] .item-indicator_Vd2Aoq {
+    color: var(--color-on-accent);
   }
 
-  .popup-left_JNKGQq {
-    --bleed: 3rem;
-    height: 100%;
-    width: calc(var(--drawer-width, 20rem) + var(--bleed));
-    max-width: calc(100vw - 3rem + var(--bleed));
-    padding: var(--space-6);
-    padding-left: calc(var(--space-6) + var(--bleed));
-    margin-left: calc(-1 * var(--bleed));
-    transform: translateX(var(--drawer-swipe-movement-x));
-    transition-property: transform;
+  .group-label_Vd2Aoq {
+    padding: var(--space-1) var(--space-2-5);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-tertiary);
+    letter-spacing: var(--letter-spacing-wider);
+    text-transform: uppercase;
+  }
 
-    @supports (-webkit-touch-callout: none) {
-      --bleed: 0px;
-      border-radius: var(--radius-xl);
-      margin-left: 0;
-    }
+  .separator_Vd2Aoq {
+    height: var(--border-width-base);
+    background-color: var(--color-line-subtle);
+    margin: var(--space-1) 0;
   }
 
-  .popup-left_JNKGQq[data-starting-style], .popup-left_JNKGQq[data-ending-style] {
-    transform: translateX(calc(-100% + var(--bleed) - 2px));
+  .list_Vd2Aoq {
+    flex-direction: column;
+    gap: 0;
+    display: flex;
+  }
+}
+@layer components {
+  .viewport_QXnIWW {
+    bottom: var(--space-4);
+    right: var(--space-4);
+    z-index: var(--z-toast);
+    width: 360px;
+    max-width: calc(100vw - var(--space-8));
+    pointer-events: none;
+    outline: none;
+    flex-direction: column;
+    list-style: none;
+    display: flex;
+    position: fixed;
   }
 
-  .popup-bottom_JNKGQq {
-    width: 100%;
-    max-width: var(--drawer-max-width, 480px);
-    max-height: 90dvh;
-    padding: var(--space-5) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
-    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
-    transform: translateY(var(--drawer-swipe-movement-y));
-    border-bottom: none;
-    transition-property: transform;
-
-    @supports (-webkit-touch-callout: none) {
-      border-radius: var(--radius-2xl);
-    }
+  .viewport-list_QXnIWW {
+    gap: var(--space-2);
   }
 
-  .popup-bottom_JNKGQq[data-starting-style], .popup-bottom_JNKGQq[data-ending-style] {
-    transform: translateY(calc(100% + 2px));
+  .viewport-stacked_QXnIWW {
+    gap: 0;
   }
 
-  .popup-top_JNKGQq {
+  .toast_QXnIWW {
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background-color: var(--color-overlay);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-popover);
+    pointer-events: auto;
+    cursor: default;
     width: 100%;
-    max-width: var(--drawer-max-width, 480px);
-    max-height: 90dvh;
-    padding: calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5);
-    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
-    transform: translateY(var(--drawer-swipe-movement-y));
-    border-top: none;
-    transition-property: transform;
+    display: flex;
+  }
 
-    @supports (-webkit-touch-callout: none) {
-      border-radius: var(--radius-2xl);
+  @supports (backdrop-filter: blur(12px)) {
+    .toast_QXnIWW {
+      -webkit-backdrop-filter: blur(12px) saturate(1.5);
     }
   }
 
-  .popup-top_JNKGQq[data-starting-style], .popup-top_JNKGQq[data-ending-style] {
-    transform: translateY(calc(-100% - 2px));
-  }
+  .viewport-list_QXnIWW .toast_QXnIWW {
+    transform-origin: 100% 100%;
+    opacity: 1;
+    transition: opacity .3s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
+    transform: translateX(0);
 
-  .handle-bar_JNKGQq {
-    background-color: var(--color-border-strong);
-    width: 2.5rem;
-    height: 4px;
-    margin: 0 auto var(--space-4);
-    border-radius: 9999px;
-    flex-shrink: 0;
+    @starting-style {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--space-4)));
+    }
   }
 
-  .popup-top_JNKGQq .handle-bar_JNKGQq {
-    margin: var(--space-4) auto 0;
-    order: 1;
+  .viewport-list_QXnIWW .toast_QXnIWW[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition: opacity .2s var(--easing-ease-in),
+      transform .2s var(--easing-ease-in);
   }
 
-  .content_JNKGQq {
-    gap: var(--space-4);
-    flex-direction: column;
-    height: 100%;
-    display: flex;
+  .viewport-stacked_QXnIWW {
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
+    box-sizing: content-box;
+    clip-path: inset(0 0 0 0 round var(--radius-xl));
+    transition: clip-path .2s var(--easing-ease-out),
+      height .2s var(--easing-ease-out);
+    padding-top: 20px;
   }
 
-  .title_JNKGQq {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-primary);
-    line-height: var(--line-height-tight);
-    letter-spacing: var(--letter-spacing-tight);
-    padding-right: var(--space-6);
-    margin: 0;
+  .viewport-stacked_QXnIWW[data-expanded] {
+    clip-path: inset(-9999px 0 0 0 round var(--radius-xl));
+    height: calc(var(--toast-frontmost-height, 64px) + 20px);
   }
 
-  .description_JNKGQq {
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    line-height: var(--line-height-relaxed);
-    margin: 0;
+  .viewport-stacked_QXnIWW[data-expanded]:after {
+    content: "";
+    pointer-events: auto;
+    z-index: 0;
+    position: absolute;
+    inset: -9999px 0 0;
   }
 
-  .close_JNKGQq {
-    top: var(--space-4);
-    right: var(--space-4);
-    border-radius: var(--radius-sm);
-    width: 24px;
-    height: 24px;
-    color: var(--color-text-tertiary);
-    cursor: pointer;
-    transition: background-color var(--duration-fast) var(--easing-standard),
-      color var(--duration-fast) var(--easing-standard);
-    background: none;
-    border: none;
-    outline: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
+  .toast-stacked_QXnIWW {
+    z-index: calc(50 - var(--toast-index));
+    transform: translateY(calc(var(--toast-index) * -8px)) scale(calc(1 - var(--toast-index) * .04));
+    transform-origin: bottom;
+    opacity: calc(1 - var(--toast-index) * .15);
+    transition: transform .2s var(--easing-ease-out),
+      opacity .2s var(--easing-ease-out);
     position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 
-  .close_JNKGQq:hover {
-    background-color: var(--color-surface-hover);
-    color: var(--color-text-primary);
+  .viewport-stacked_QXnIWW[data-expanded] .toast-stacked_QXnIWW {
+    transform: translateY(calc((var(--toast-offset-y) + var(--toast-index) * 8px) * -1));
+    opacity: 1;
+    pointer-events: auto;
   }
 
-  .close_JNKGQq:focus-visible {
-    box-shadow: var(--shadow-focus);
+  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW {
+    @starting-style {
+      opacity: 0;
+      transform: translateY(16px) scale(calc(1 - var(--toast-index) * .04));
+    }
   }
 
-  .footer_JNKGQq {
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--space-2);
-    padding-top: var(--space-4);
-    border-top: var(--border-width-base) solid var(--color-border-subtle);
-    margin-top: auto;
-    display: flex;
+  .viewport-stacked_QXnIWW .toast-stacked_QXnIWW[data-ending-style] {
+    opacity: 0;
+    transform: translateX(calc(100% + var(--space-4)));
+    transition: opacity .15s var(--easing-ease-in),
+      transform .15s var(--easing-ease-in);
   }
-}
 
-@layer utilities;
-@layer theme, base;
-
-@layer components {
-  .wrapper_ZbafIa {
-    gap: var(--space-1);
-    flex-direction: column;
-    width: 100%;
-    display: flex;
+  .toast-success_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-success-solid) 6%, var(--color-overlay));
   }
 
-  .inputWrapper_ZbafIa {
-    align-items: center;
-    display: flex;
-    position: relative;
+  .toast-error_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-error-solid) 6%, var(--color-overlay));
   }
 
-  .root_ZbafIa {
-    width: 100%;
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
-    background-color: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-md);
-    transition: border-color var(--duration-fast) var(--easing-standard),
-      box-shadow var(--duration-fast) var(--easing-standard),
-      background-color var(--duration-fast) var(--easing-standard);
-    -webkit-appearance: none;
-    appearance: none;
-    outline: none;
+  .toast-warning_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-warning-solid) 6%, var(--color-overlay));
   }
 
-  .root_ZbafIa::placeholder {
-    color: var(--color-text-tertiary);
-    font-family: var(--font-mono);
+  .toast-info_QXnIWW {
+    background-color: color-mix(in srgb, var(--color-info-solid) 6%, var(--color-overlay));
   }
 
-  .root_ZbafIa:hover:not(:disabled):not([data-invalid]) {
-    border-color: var(--color-border-strong);
+  .icon_QXnIWW {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
   }
 
-  .root_ZbafIa:focus:not(:disabled) {
-    border-color: var(--color-accent);
-    box-shadow: var(--shadow-focus);
+  .icon-success_QXnIWW {
+    color: var(--color-success-solid);
   }
 
-  .root_ZbafIa:disabled {
-    opacity: .44;
-    cursor: not-allowed;
-    background-color: var(--color-surface-2);
+  .icon-warning_QXnIWW {
+    color: var(--color-warning-solid);
   }
 
-  .root_ZbafIa[data-invalid], .root_ZbafIa[aria-invalid="true"] {
-    border-color: var(--color-error-solid);
+  .icon-error_QXnIWW {
+    color: var(--color-error-solid);
   }
 
-  .root_ZbafIa[data-invalid]:focus, .root_ZbafIa[aria-invalid="true"]:focus {
-    box-shadow: 0 0 0 3px #dc262640;
+  .icon-info_QXnIWW {
+    color: var(--color-info-solid);
   }
 
-  .size-sm_ZbafIa {
-    height: 26px;
-    padding-inline: var(--space-2);
-    font-size: var(--font-size-xs);
+  .content_QXnIWW {
+    gap: var(--space-0-5);
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    display: flex;
   }
 
-  .size-md_ZbafIa {
-    height: 30px;
-    padding-inline: var(--space-2-5);
+  .title_QXnIWW {
+    font-family: var(--font-mono);
     font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
   }
 
-  .size-lg_ZbafIa {
-    height: 36px;
-    padding-inline: var(--space-3);
-    font-size: var(--font-size-md);
-    border-radius: var(--radius-lg);
-  }
-
-  .has-left-icon_ZbafIa {
-    padding-left: var(--space-8);
-  }
-
-  .has-right-icon_ZbafIa {
-    padding-right: var(--space-8);
+  .description_QXnIWW {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
   }
 
-  .adornment_ZbafIa {
-    color: var(--color-text-tertiary);
-    pointer-events: none;
-    width: var(--space-8);
+  .close_QXnIWW {
+    border-radius: var(--radius-sm);
+    width: 20px;
+    height: 20px;
+    color: var(--color-tertiary);
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard);
+    background: none;
+    border: none;
+    outline: none;
+    flex-shrink: 0;
     justify-content: center;
     align-items: center;
+    margin-top: 1px;
     display: flex;
-    position: absolute;
   }
 
-  .adornment-left_ZbafIa {
-    left: 0;
+  .close_QXnIWW:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
-  .adornment-right_ZbafIa {
-    right: 0;
+  .close_QXnIWW:focus-visible {
+    box-shadow: var(--shadow-focus);
   }
 }
-
-@layer utilities;
-@layer theme, base;
-
 @layer components {
-  .root_3hDtBa {
+  .root_rWN60G {
+    flex-direction: column;
+    gap: 0;
+    display: flex;
+  }
+
+  .trigger_rWN60G {
     align-items: center;
     gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-primary);
+    background: var(--color-surface-1);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-md);
     cursor: pointer;
+    text-align: left;
     user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-bottom-left-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
+      border-bottom-right-radius var(--duration-normal) var(--easing-standard) var(--duration-normal),
+      border-bottom-color var(--duration-normal) var(--easing-standard) var(--duration-normal);
+    outline: none;
     display: flex;
   }
 
-  .root_3hDtBa[data-disabled] {
-    opacity: .44;
-    cursor: not-allowed;
+  .trigger_rWN60G[data-panel-open] {
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-bottom-left-radius var(--duration-normal) var(--easing-standard),
+      border-bottom-right-radius var(--duration-normal) var(--easing-standard),
+      border-bottom-color var(--duration-normal) var(--easing-standard);
+    border-bottom-color: #0000;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
   }
 
-  .thumb-track_3hDtBa {
-    border-radius: var(--radius-full);
-    background-color: var(--color-surface-3);
-    border: var(--border-width-base) solid var(--color-border-base);
-    width: 36px;
-    height: 20px;
-    transition: background-color var(--duration-normal) var(--easing-standard),
-      border-color var(--duration-normal) var(--easing-standard),
-      box-shadow var(--duration-fast) var(--easing-standard);
-    outline: none;
-    flex-shrink: 0;
-    position: relative;
+  .trigger_rWN60G:hover {
+    background-color: var(--color-hover);
   }
 
-  .thumb-track_3hDtBa:focus-visible {
+  .trigger_rWN60G:focus-visible {
     box-shadow: var(--shadow-focus);
   }
 
-  .thumb-track_3hDtBa[data-checked] {
-    background-color: var(--color-accent);
-    border-color: var(--color-accent);
+  .trigger_rWN60G[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .thumb-track_3hDtBa[data-checked]:hover {
-    background-color: var(--color-accent-hover);
-    border-color: var(--color-accent-hover);
+  .trigger-icon_rWN60G {
+    color: var(--color-tertiary);
+    transition: transform var(--duration-normal) var(--easing-standard);
+    flex-shrink: 0;
   }
 
-  .thumb_3hDtBa {
-    border-radius: var(--radius-full);
-    width: 14px;
-    height: 14px;
-    box-shadow: var(--shadow-xs);
-    transition: transform var(--duration-normal) var(--easing-spring);
-    background-color: #fff;
-    position: absolute;
-    top: 2px;
-    left: 2px;
+  .trigger_rWN60G[data-panel-open] .trigger-icon_rWN60G {
+    transform: rotate(90deg);
   }
 
-  .thumb-track_3hDtBa[data-checked] .thumb_3hDtBa {
-    transform: translateX(16px);
+  .panel_rWN60G {
+    height: var(--collapsible-panel-height);
+    transition: height var(--duration-normal) var(--easing-standard);
+    overflow: hidden;
   }
 
-  .label_3hDtBa {
+  .panel_rWN60G[hidden]:not([hidden="until-found"]) {
+    display: none;
+  }
+
+  .panel_rWN60G[data-starting-style], .panel_rWN60G[data-ending-style] {
+    height: 0;
+  }
+
+  .panel-content_rWN60G {
+    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
+    color: var(--color-secondary);
+    line-height: var(--line-height-relaxed);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: 0 0 var(--radius-md) var(--radius-md);
+    background: var(--color-elevated);
+    border-top: none;
   }
 }
-
-@layer utilities;
-@layer theme, base;
-
 @layer components {
-  .root_eYYE3W {
-    gap: var(--space-1-5);
-    flex-direction: column;
-    width: 100%;
-    display: flex;
+  .positioner_yQZxSq {
+    z-index: var(--z-tooltip);
   }
 
-  .label-row_eYYE3W {
+  .popup_yQZxSq {
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    padding: var(--space-1) var(--space-2);
     font-family: var(--font-mono);
     font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
+    word-break: break-word;
+    max-width: 240px;
+    transform-origin: var(--transform-origin);
+    transition: opacity .15s var(--easing-ease-out),
+      transform .3s var(--easing-spring);
   }
 
-  .track_eYYE3W {
-    background-color: var(--color-surface-3);
-    border-radius: var(--radius-full);
-    width: 100%;
-    height: 6px;
-    overflow: hidden;
+  .popup_yQZxSq[data-instant] {
+    transition-duration: 0s;
   }
 
-  .track-sm_eYYE3W {
-    height: 4px;
+  .popup_yQZxSq[data-starting-style] {
+    opacity: 0;
+    transform: scale(.85);
   }
 
-  .track-md_eYYE3W {
-    height: 6px;
+  .popup_yQZxSq[data-ending-style] {
+    opacity: 0;
+    transition: opacity 75ms var(--easing-ease-in),
+      transform 75ms var(--easing-ease-in);
+    transform: scale(.95);
   }
 
-  .track-lg_eYYE3W {
-    height: 8px;
-  }
+  @media (prefers-reduced-motion: reduce) {
+    .popup_yQZxSq {
+      transition: opacity .125s var(--easing-ease-out);
+    }
 
-  .indicator_eYYE3W {
-    border-radius: var(--radius-full);
-    background-color: var(--color-accent);
-    height: 100%;
-    transition: width var(--duration-slower) var(--easing-standard);
-  }
+    .popup_yQZxSq[data-ending-style] {
+      transition: opacity 75ms var(--easing-ease-in);
+    }
 
-  .indicator-success_eYYE3W {
-    background-color: var(--color-success-solid);
+    .popup_yQZxSq[data-starting-style], .popup_yQZxSq[data-ending-style] {
+      transform: none;
+    }
   }
 
-  .indicator-warning_eYYE3W {
-    background-color: var(--color-warning-solid);
+  .arrow_yQZxSq {
+    width: 8px;
+    height: 8px;
+    fill: var(--color-surface-3);
+    stroke: var(--color-line);
+    stroke-width: 1px;
   }
-
-  .indicator-error_eYYE3W {
-    background-color: var(--color-error-solid);
+}
+@layer components {
+  .root_msdI1W {
+    align-items: flex-start;
+    gap: var(--space-1);
+    flex-direction: column;
+    display: flex;
   }
 
-  @keyframes progress-indeterminate_eYYE3W {
-    0% {
-      transform: translateX(-100%);
-    }
+  .scrub-area_msdI1W {
+    cursor: ew-resize;
+    user-select: none;
+  }
 
-    100% {
-      transform: translateX(400%);
-    }
+  .scrub-area-cursor_msdI1W {
+    filter: drop-shadow(0 1px 1px #00000080);
   }
 
-  .indicator_eYYE3W[data-value="null"], .indicator-indeterminate_eYYE3W {
-    animation: 1.4s linear infinite progress-indeterminate_eYYE3W;
-    width: 30% !important;
+  .label_msdI1W {
+    cursor: ew-resize;
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
   }
-}
 
-@layer utilities;
-@layer theme, base;
+  .group_msdI1W {
+    display: flex;
+  }
 
-@layer components {
-  .trigger_Vd2Aoq {
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--space-2);
-    width: 100%;
+  .input_msdI1W {
+    box-sizing: border-box;
+    width: 6rem;
+    height: 2rem;
     font-family: var(--font-mono);
     font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
-    background-color: var(--color-surface-1);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    transition: border-color var(--duration-fast) var(--easing-standard),
-      box-shadow var(--duration-fast) var(--easing-standard);
-    -webkit-appearance: none;
-    appearance: none;
-    height: 30px;
-    padding-inline: var(--space-2-5);
-    text-align: left;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    color: var(--color-primary);
+    background-color: var(--color-elevated);
+    border-top: var(--border-width-base) solid var(--color-line);
+    border-bottom: var(--border-width-base) solid var(--color-line);
+    transition: box-shadow var(--duration-fast) var(--easing-standard);
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
     outline: none;
-    display: inline-flex;
-    overflow: hidden;
-  }
-
-  .trigger_Vd2Aoq:hover:not([data-disabled]) {
-    border-color: var(--color-border-strong);
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
   }
 
-  .trigger_Vd2Aoq:focus-visible {
-    border-color: var(--color-accent);
-    box-shadow: var(--shadow-focus);
+  .input_msdI1W:focus {
+    z-index: 1;
+    box-shadow: inset 0 0 0 1.5px var(--color-accent);
   }
 
-  .trigger_Vd2Aoq[data-disabled] {
+  .input_msdI1W[data-disabled] {
     opacity: .44;
     cursor: not-allowed;
   }
 
-  .trigger-value_Vd2Aoq {
-    text-overflow: ellipsis;
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .trigger-icon_Vd2Aoq {
-    color: var(--color-text-tertiary);
-    transition: transform var(--duration-normal) var(--easing-standard);
-    flex-shrink: 0;
+  .step-button_msdI1W {
+    box-sizing: border-box;
+    border: var(--border-width-base) solid var(--color-line);
+    background-color: var(--color-surface-1);
+    width: 2rem;
+    height: 2rem;
+    color: var(--color-secondary);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      color var(--duration-fast) var(--easing-standard),
+      transform .1s var(--easing-ease-out);
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    display: flex;
   }
 
-  .trigger_Vd2Aoq[data-popup-open] .trigger-icon_Vd2Aoq {
-    transform: rotate(180deg);
+  .step-button_msdI1W:hover {
+    background-color: var(--color-hover);
+    color: var(--color-primary);
   }
 
-  .positioner_Vd2Aoq {
-    z-index: var(--z-dropdown);
+  .step-button_msdI1W:active:not([data-disabled]) {
+    background-color: var(--color-active);
+    transform: scale(.93);
   }
 
-  .popup_Vd2Aoq {
-    background-color: var(--color-bg-overlay);
-    border: var(--border-width-base) solid var(--color-border-base);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-popover);
-    padding: var(--space-1);
-    min-width: var(--available-width);
-    max-height: 280px;
-    transform-origin: var(--transform-origin);
-    transition: opacity .15s var(--easing-ease-out),
-      transform .15s var(--easing-ease-out);
-    outline: none;
-    overflow-y: auto;
+  .step-button_msdI1W:focus-visible {
+    z-index: 1;
+    box-shadow: inset 0 0 0 1.5px var(--color-accent);
   }
 
-  .popup_Vd2Aoq[data-starting-style] {
-    opacity: 0;
-    transform: scale(.95);
+  .step-button_msdI1W[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .popup_Vd2Aoq[data-ending-style] {
-    opacity: 0;
-    transition: opacity 75ms var(--easing-ease-in),
-      transform 75ms var(--easing-ease-in);
-    transform: scale(.98);
+  .decrement_msdI1W {
+    border-radius: var(--radius-md) 0 0 var(--radius-md);
   }
 
-  @supports (backdrop-filter: blur(12px)) {
-    .popup_Vd2Aoq {
-      -webkit-backdrop-filter: blur(12px) saturate(1.5);
-    }
+  .increment_msdI1W {
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
   }
-
-  .item_Vd2Aoq {
+}
+@layer components {
+  .root_J4At5G {
     align-items: center;
     gap: var(--space-2);
-    padding: var(--space-1-5) var(--space-2-5);
-    font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    color: var(--color-text-primary);
-    border-radius: var(--radius-sm);
-    cursor: default;
-    transition: background-color var(--duration-fast) var(--easing-standard);
+    cursor: pointer;
     user-select: none;
-    outline: none;
     display: flex;
   }
 
-  .item_Vd2Aoq:hover, .item_Vd2Aoq[data-highlighted] {
-    background-color: var(--color-accent);
-    color: var(--color-text-on-accent);
-  }
-
-  .item_Vd2Aoq[data-selected] {
-    font-weight: var(--font-weight-medium);
-  }
-
-  .item_Vd2Aoq[data-disabled] {
+  .root_J4At5G[data-disabled] {
     opacity: .44;
     cursor: not-allowed;
   }
 
-  .item-indicator_Vd2Aoq {
-    color: var(--color-accent);
+  .indicator_J4At5G {
+    border-radius: var(--radius-sm);
+    border: var(--border-width-base) solid var(--color-line-strong);
+    background-color: var(--color-surface-1);
+    width: 16px;
+    height: 16px;
+    transition: background-color var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard),
+      box-shadow var(--duration-fast) var(--easing-standard);
+    outline: none;
+    flex-shrink: 0;
+    justify-content: center;
     align-items: center;
-    margin-left: auto;
     display: flex;
+    position: relative;
   }
 
-  .item_Vd2Aoq:hover .item-indicator_Vd2Aoq, .item_Vd2Aoq[data-highlighted] .item-indicator_Vd2Aoq {
-    color: var(--color-text-on-accent);
+  .indicator_J4At5G:focus-visible {
+    box-shadow: var(--shadow-focus);
+    border-color: var(--color-accent);
   }
 
-  .group-label_Vd2Aoq {
-    padding: var(--space-1) var(--space-2-5);
-    font-size: var(--font-size-xs);
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-tertiary);
-    letter-spacing: var(--letter-spacing-wider);
-    text-transform: uppercase;
+  .indicator_J4At5G:hover:not([data-disabled]) {
+    border-color: var(--color-accent);
   }
 
-  .separator_Vd2Aoq {
-    height: var(--border-width-base);
-    background-color: var(--color-border-subtle);
-    margin: var(--space-1) 0;
+  .indicator_J4At5G[data-checked], .indicator_J4At5G[data-indeterminate] {
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
   }
 
-  .list_Vd2Aoq {
-    flex-direction: column;
-    gap: 0;
-    display: flex;
+  .indicator_J4At5G[data-checked]:hover, .indicator_J4At5G[data-indeterminate]:hover {
+    background-color: var(--color-accent-hover);
+    border-color: var(--color-accent-hover);
+  }
+
+  .icon_J4At5G {
+    width: 10px;
+    height: 10px;
+    color: var(--color-on-accent);
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--easing-standard),
+      transform var(--duration-fast) var(--easing-spring);
+    transform: scale(.9);
+  }
+
+  .indicator_J4At5G[data-checked] .icon_J4At5G, .indicator_J4At5G[data-indeterminate] .icon_J4At5G {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .label_J4At5G {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    color: var(--color-primary);
+    line-height: var(--line-height-normal);
   }
 }
+@layer components {
+  .separator_027UfG {
+    background-color: var(--color-line);
+    flex-shrink: 0;
+  }
 
-@layer utilities;
-@layer theme, base;
+  .separator_027UfG[data-orientation="horizontal"] {
+    width: 100%;
+    height: var(--border-width-base, 1px);
+  }
 
+  .separator_027UfG[data-orientation="vertical"] {
+    width: var(--border-width-base, 1px);
+    align-self: stretch;
+  }
+}
 @layer components {
-  .root_prqJ8a {
+  .root_Lvfi-a {
+    gap: var(--space-2);
     flex-direction: column;
-    gap: 0;
+    width: 100%;
     display: flex;
   }
 
-  .list_prqJ8a {
+  .header_Lvfi-a {
+    justify-content: space-between;
     align-items: center;
-    gap: var(--space-px);
-    border-bottom: var(--border-width-base) solid var(--color-border-base);
-    scrollbar-width: none;
+    gap: var(--space-2);
     display: flex;
-    overflow-x: auto;
   }
 
-  .list_prqJ8a::-webkit-scrollbar {
-    display: none;
+  .label_Lvfi-a {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-secondary);
+    letter-spacing: var(--letter-spacing-wide);
+    text-transform: uppercase;
+    user-select: none;
   }
 
-  .tab_prqJ8a {
-    align-items: center;
-    gap: var(--space-1-5);
-    padding: var(--space-1-5) var(--space-3);
+  .value_Lvfi-a {
     font-family: var(--font-mono);
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-regular);
-    color: var(--color-text-tertiary);
-    cursor: pointer;
-    white-space: nowrap;
-    transition: color var(--duration-fast) var(--easing-standard),
-      border-color var(--duration-fast) var(--easing-standard);
-    user-select: none;
-    background: none;
-    border: none;
-    border-bottom: 3px solid #0000;
-    outline: none;
-    margin-bottom: -1px;
-    display: inline-flex;
-    position: relative;
+    font-size: var(--font-size-xs);
+    color: var(--color-tertiary);
+    font-variant-numeric: tabular-nums;
   }
 
-  .tab_prqJ8a:hover:not([data-disabled]) {
-    color: var(--color-text-primary);
-    border-bottom-color: var(--color-border-strong);
+  .control_Lvfi-a {
+    width: 100%;
+    padding-block: var(--space-2);
+    touch-action: none;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    display: flex;
   }
 
-  .tab_prqJ8a:focus-visible {
-    outline: none;
+  .control_Lvfi-a[data-disabled] {
+    opacity: .44;
+    cursor: not-allowed;
   }
 
-  .tab_prqJ8a:focus-visible:after {
-    content: "";
-    border-radius: var(--radius-sm);
-    box-shadow: var(--shadow-focus);
-    pointer-events: none;
-    position: absolute;
-    inset: 2px 2px 8px;
+  .track_Lvfi-a {
+    border-radius: var(--radius-full);
+    background-color: var(--color-surface-3);
+    border: var(--border-width-base) solid var(--color-line-subtle);
+    user-select: none;
+    width: 100%;
+    height: 4px;
+    position: relative;
   }
 
-  .tab_prqJ8a[data-active] {
-    color: var(--color-text-primary);
-    font-weight: var(--font-weight-medium);
-    border-bottom-color: var(--color-accent);
+  .indicator_Lvfi-a {
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    user-select: none;
+    transition: background-color var(--duration-fast) var(--easing-standard);
   }
 
-  .tab_prqJ8a[data-disabled] {
-    opacity: .44;
-    cursor: not-allowed;
+  .root_Lvfi-a[data-disabled] .indicator_Lvfi-a {
+    background-color: var(--color-tertiary);
   }
 
-  .panel_prqJ8a {
-    padding-top: var(--space-4);
-    transition: opacity .15s var(--easing-ease-out);
-    outline: none;
+  .thumb_Lvfi-a {
+    border-radius: var(--radius-full);
+    background-color: var(--color-elevated);
+    border: var(--border-width-base) solid var(--color-line);
+    width: 16px;
+    height: 16px;
+    box-shadow: var(--shadow-sm);
+    user-select: none;
+    transition: transform var(--duration-fast) var(--easing-spring),
+      box-shadow var(--duration-fast) var(--easing-standard),
+      border-color var(--duration-fast) var(--easing-standard);
   }
 
-  .panel_prqJ8a[data-starting-style] {
-    opacity: 0;
+  .thumb_Lvfi-a[data-dragging] {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-md);
+    transform: scale(1.2);
   }
 
-  .panel_prqJ8a:focus-visible {
+  .thumb_Lvfi-a:has(:focus-visible) {
+    border-color: var(--color-accent);
     box-shadow: var(--shadow-focus);
-    border-radius: var(--radius-sm);
   }
-}
 
-@layer utilities;
+  .thumb_Lvfi-a[data-disabled] {
+    cursor: not-allowed;
+    background-color: var(--color-surface-3);
+  }
+}