@tangle-network/sandbox-ui 0.133.2 → 0.133.4

package/dist/styles.css

@@ -3,7 +3,7 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+    --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
@@ -89,7 +89,7 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --font-display: "Inter", "Geist", sans-serif;
+    --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
     --text-section--line-height: 1.3;
     --text-section--letter-spacing: -0.01em;
     --text-section--font-weight: 600;
@@ -250,6 +250,9 @@
   }
 }
 @layer utilities {
+  .\@container {
+    container-type: inline-size;
+  }
   .pointer-events-auto {
     pointer-events: auto;
   }
@@ -2257,6 +2260,9 @@
       border-color: color-mix(in oklab, var(--code-success) 20%, transparent);
     }
   }
+  .border-\[var\(--field-border\)\] {
+    border-color: var(--field-border);
+  }
   .border-\[var\(--glass-border\)\] {
     border-color: var(--glass-border);
   }
@@ -2578,8 +2584,8 @@
       background-color: color-mix(in oklab, var(--code-success) 5%, transparent);
     }
   }
-  .bg-\[var\(--field-surface\,var\(--bg-input\)\)\] {
-    background-color: var(--field-surface,var(--bg-input));
+  .bg-\[var\(--field-surface\,var\(--well\)\)\] {
+    background-color: var(--field-surface,var(--well));
   }
   .bg-\[var\(--md3-outline-variant\)\] {
     background-color: var(--md3-outline-variant);
@@ -2683,6 +2689,9 @@
   .bg-\[var\(--tone-violet-bg-selected\)\] {
     background-color: var(--tone-violet-bg-selected);
   }
+  .bg-\[var\(--well\)\] {
+    background-color: var(--well);
+  }
   .bg-accent {
     background-color: hsl(var(--accent));
   }
@@ -2872,6 +2881,9 @@
       background-color: color-mix(in oklab, hsl(var(--muted)) 60%, transparent);
     }
   }
+  .bg-popover {
+    background-color: hsl(var(--popover));
+  }
   .bg-primary {
     background-color: hsl(var(--primary));
   }
@@ -3408,9 +3420,6 @@
   .text-\[14px\] {
     font-size: 14px;
   }
-  .text-\[15px\] {
-    font-size: 15px;
-  }
   .text-\[length\:var\(--control-text-lg\,1rem\)\] {
     font-size: var(--control-text-lg,1rem);
   }
@@ -3998,6 +4007,10 @@
     --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--edge-highlight\)\,var\(--shadow-card\)\] {
+    --tw-shadow: var(--edge-highlight), var(--shadow-card);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[var\(--shadow-accent\)\] {
     --tw-shadow: var(--shadow-accent);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4014,6 +4027,10 @@
     --tw-shadow: var(--shadow-glow);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--shadow-well\)\] {
+    --tw-shadow: var(--shadow-well);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4141,6 +4158,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[border-color\,box-shadow\,background-color\] {
+    transition-property: border-color,box-shadow,background-color;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[border-color\,box-shadow\] {
     transition-property: border-color,box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4161,6 +4183,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[color\,background-color\,box-shadow\] {
+    transition-property: color,background-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[margin-left\] {
     transition-property: margin-left;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4422,8 +4449,8 @@
   .autofill\:caret-\[var\(--text-primary\)\]:autofill {
     caret-color: var(--text-primary);
   }
-  .autofill\:shadow-\[inset_0_0_0_1000px_var\(--bg-input\)\]:autofill {
-    --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, var(--bg-input));
+  .autofill\:shadow-\[inset_0_0_0_1000px_var\(--field-surface\,var\(--well\)\)\]:autofill {
+    --tw-shadow: inset 0 0 0 1000px var(--tw-shadow-color, var(--field-surface,var(--well)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .autofill\:\[-webkit-text-fill-color\:var\(--text-primary\)\]:autofill {
@@ -4443,6 +4470,9 @@
     .hover\:border-\[var\(--border-strong\)\]:hover {
       border-color: var(--border-strong);
     }
+    .hover\:border-\[var\(--ix-hover-border\)\]:hover {
+      border-color: var(--ix-hover-border);
+    }
     .hover\:border-\[var\(--md3-outline-variant\)\]:hover {
       border-color: var(--md3-outline-variant);
     }
@@ -4561,6 +4591,9 @@
     .hover\:bg-\[var\(--btn-primary-hover\)\]:hover {
       background-color: var(--btn-primary-hover);
     }
+    .hover\:bg-\[var\(--ix-hover-bg\)\]:hover {
+      background-color: var(--ix-hover-bg);
+    }
     .hover\:bg-\[var\(--md3-surface-container\)\]:hover {
       background-color: var(--md3-surface-container);
     }
@@ -4831,12 +4864,24 @@
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
-    .hover\:shadow-md:hover {
-      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    .hover\:shadow-\[inset_0_-2px_0_hsl\(var\(--hsl-ring\)\/0\.4\)\]:hover {
+      --tw-shadow: inset 0 -2px 0 var(--tw-shadow-color, hsl(var(--hsl-ring)/0.4));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .hover\:shadow-\[inset_0_0_0_1px_var\(--ix-hover-border\)\]:hover {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-hover-border));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .hover\:shadow-\[var\(--ix-hover\)\]:hover {
+      --tw-shadow: var(--ix-hover);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
-    .hover\:shadow-sm:hover {
-      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    .hover\:shadow-\[var\(--shadow-well\)\,var\(--ix-hover\)\]:hover {
+      --tw-shadow: var(--shadow-well), var(--ix-hover);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .hover\:shadow-md:hover {
+      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
     .hover\:brightness-110:hover {
@@ -4853,8 +4898,8 @@
   .focus\:bg-\[var\(--accent-surface-strong\)\]:focus {
     background-color: var(--accent-surface-strong);
   }
-  .focus\:bg-accent:focus {
-    background-color: hsl(var(--accent));
+  .focus\:bg-\[var\(--ix-sel-bg\)\]:focus {
+    background-color: var(--ix-sel-bg);
   }
   .focus\:bg-accent\/40:focus {
     background-color: hsl(var(--accent));
@@ -4925,6 +4970,13 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  .focus\:not-focus-visible\:border-\[var\(--ix-hover-border\)\]:focus:not(:focus-visible) {
+    border-color: var(--ix-hover-border);
+  }
+  .focus\:not-focus-visible\:shadow-\[var\(--ix-after\)\]:focus:not(:focus-visible) {
+    --tw-shadow: var(--ix-after);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .focus-visible\:pointer-events-auto:focus-visible {
     pointer-events: auto;
   }
@@ -4940,6 +4992,10 @@
   .focus-visible\:opacity-100:focus-visible {
     opacity: 100%;
   }
+  .focus-visible\:shadow-none:focus-visible {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .focus-visible\:ring-0:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4984,9 +5040,23 @@
   .active\:scale-\[0\.98\]:active {
     scale: 0.98;
   }
+  .active\:border-\[hsl\(var\(--hsl-ring\)\)\]:active {
+    border-color: hsl(var(--hsl-ring));
+  }
   .active\:bg-\[var\(--border-accent\)\]:active {
     background-color: var(--border-accent);
   }
+  .active\:bg-\[var\(--ix-sel-bg\)\]:active {
+    background-color: var(--ix-sel-bg);
+  }
+  .active\:shadow-\[inset_0_0_0_1px_hsl\(var\(--hsl-ring\)\)\]:active {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, hsl(var(--hsl-ring)));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .active\:shadow-\[var\(--ix-press\)\]:active {
+    --tw-shadow: var(--ix-press);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .disabled\:pointer-events-none:disabled {
     pointer-events: none;
   }
@@ -5025,6 +5095,23 @@
   .has-\[\:is\(textarea\,select\,\[contenteditable\]\:not\(\[contenteditable\=false\]\)\,input\:not\(\[type\=button\]\,\[type\=submit\]\,\[type\=reset\]\,\[type\=image\]\,\[type\=checkbox\]\,\[type\=radio\]\,\[type\=range\]\,\[type\=color\]\,\[type\=file\]\)\)\:focus\]\:ring-\[var\(--focus-halo\)\]:has(:is(:is(textarea, select, [contenteditable]:not([contenteditable=false]), input:not([type=button], [type=submit], [type=reset], [type=image], [type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus)) {
     --tw-ring-color: var(--focus-halo);
   }
+  .aria-checked\:bg-\[hsl\(var\(--hsl-ring\)\/0\.07\)\][aria-checked="true"] {
+    background-color: hsl(var(--hsl-ring)/0.07);
+  }
+  .aria-checked\:bg-\[var\(--ix-sel-bg\)\][aria-checked="true"] {
+    background-color: var(--ix-sel-bg);
+  }
+  .aria-checked\:text-\[var\(--accent-text\)\][aria-checked="true"] {
+    color: var(--accent-text);
+  }
+  .aria-checked\:shadow-\[inset_0_-2px_0_var\(--ix-sel-ring\)\][aria-checked="true"] {
+    --tw-shadow: inset 0 -2px 0 var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .aria-checked\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][aria-checked="true"] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
     cursor: not-allowed;
   }
@@ -5045,12 +5132,39 @@
   .aria-invalid\:focus\:ring-\[var\(--focus-halo-danger\)\][aria-invalid="true"]:focus {
     --tw-ring-color: var(--focus-halo-danger);
   }
+  .aria-pressed\:bg-\[var\(--ix-sel-bg\)\][aria-pressed="true"] {
+    background-color: var(--ix-sel-bg);
+  }
+  .aria-pressed\:text-\[var\(--accent-text\)\][aria-pressed="true"] {
+    color: var(--accent-text);
+  }
+  .aria-pressed\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][aria-pressed="true"] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .aria-\[current\=page\]\:bg-\[var\(--ix-sel-bg\)\][aria-current="page"] {
+    background-color: var(--ix-sel-bg);
+  }
+  .aria-\[current\=page\]\:text-\[var\(--accent-text\)\][aria-current="page"] {
+    color: var(--accent-text);
+  }
+  .aria-\[current\=page\]\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][aria-current="page"] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
   .data-\[disabled\]\:opacity-50[data-disabled] {
     opacity: 50%;
   }
+  .data-\[highlighted\]\:bg-\[var\(--ix-sel-bg\)\][data-highlighted] {
+    background-color: var(--ix-sel-bg);
+  }
+  .data-\[highlighted\]\:shadow-\[inset_0_0_0_1px_var\(--ix-hover-border\)\][data-highlighted] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-hover-border));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
     height: calc(var(--spacing) * 1.5);
   }
@@ -5078,6 +5192,15 @@
   .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
     flex-direction: column;
   }
+  .data-\[overflow-end\]\:\[mask-image\:linear-gradient\(to_right\,\#000_calc\(100\%-24px\)\,transparent\)\][data-overflow-end] {
+    mask-image: linear-gradient(to right,#000 calc(100% - 24px),transparent);
+  }
+  .data-\[overflow-start\]\:\[mask-image\:linear-gradient\(to_right\,transparent\,\#000_24px\)\][data-overflow-start] {
+    mask-image: linear-gradient(to right,transparent,#000 24px);
+  }
+  .data-\[overflow-start\]\:data-\[overflow-end\]\:\[mask-image\:linear-gradient\(to_right\,transparent\,\#000_24px\,\#000_calc\(100\%-24px\)\,transparent\)\][data-overflow-start][data-overflow-end] {
+    mask-image: linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);
+  }
   .data-\[placeholder\]\:text-\[var\(--text-dim\)\][data-placeholder] {
     color: var(--text-dim);
   }
@@ -5100,20 +5223,27 @@
   .data-\[state\=active\]\:border-primary[data-state="active"] {
     border-color: hsl(var(--primary));
   }
+  .data-\[state\=active\]\:bg-\[hsl\(var\(--hsl-ring\)\/0\.07\)\][data-state="active"] {
+    background-color: hsl(var(--hsl-ring)/0.07);
+  }
+  .data-\[state\=active\]\:bg-\[var\(--ix-sel-bg\)\][data-state="active"] {
+    background-color: var(--ix-sel-bg);
+  }
   .data-\[state\=active\]\:bg-background[data-state="active"] {
     background-color: hsl(var(--background));
   }
-  .data-\[state\=active\]\:bg-primary[data-state="active"] {
-    background-color: hsl(var(--primary));
+  .data-\[state\=active\]\:text-\[var\(--accent-text\)\][data-state="active"] {
+    color: var(--accent-text);
   }
   .data-\[state\=active\]\:text-foreground[data-state="active"] {
     color: hsl(var(--foreground));
   }
-  .data-\[state\=active\]\:text-primary-foreground[data-state="active"] {
-    color: hsl(var(--primary-foreground));
+  .data-\[state\=active\]\:shadow-\[inset_0_-2px_0_var\(--ix-sel-ring\)\][data-state="active"] {
+    --tw-shadow: inset 0 -2px 0 var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .data-\[state\=active\]\:shadow-sm[data-state="active"] {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  .data-\[state\=active\]\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][data-state="active"] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
@@ -5135,6 +5265,9 @@
   .data-\[state\=checked\]\:bg-\[var\(--accent-text\)\][data-state="checked"] {
     background-color: var(--accent-text);
   }
+  .data-\[state\=checked\]\:bg-\[var\(--ix-sel-bg\)\][data-state="checked"] {
+    background-color: var(--ix-sel-bg);
+  }
   .data-\[state\=checked\]\:bg-card[data-state="checked"] {
     background-color: hsl(var(--card));
   }
@@ -5157,6 +5290,10 @@
   .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
     color: hsl(var(--primary-foreground));
   }
+  .data-\[state\=checked\]\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][data-state="checked"] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[state\=closed\]\:duration-200[data-state="closed"] {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -5164,11 +5301,6 @@
   .data-\[state\=inactive\]\:text-muted-foreground[data-state="inactive"] {
     color: hsl(var(--muted-foreground));
   }
-  @media (hover: hover) {
-    .data-\[state\=inactive\]\:hover\:bg-muted[data-state="inactive"]:hover {
-      background-color: hsl(var(--muted));
-    }
-  }
   .data-\[state\=indeterminate\]\:border-primary[data-state="indeterminate"] {
     border-color: hsl(var(--primary));
   }
@@ -5178,9 +5310,19 @@
   .data-\[state\=indeterminate\]\:text-primary-foreground[data-state="indeterminate"] {
     color: hsl(var(--primary-foreground));
   }
+  .data-\[state\=on\]\:bg-\[var\(--ix-sel-bg\)\][data-state="on"] {
+    background-color: var(--ix-sel-bg);
+  }
+  .data-\[state\=on\]\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][data-state="on"] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[state\=open\]\:rotate-180[data-state="open"] {
     rotate: 180deg;
   }
+  .data-\[state\=open\]\:border-\[var\(--ix-hover-border\)\][data-state="open"] {
+    border-color: var(--ix-hover-border);
+  }
   .data-\[state\=open\]\:border-\[var\(--md3-outline\)\][data-state="open"] {
     border-color: var(--md3-outline);
   }
@@ -5193,6 +5335,9 @@
   .data-\[state\=open\]\:bg-\[var\(--accent-surface-strong\)\][data-state="open"] {
     background-color: var(--accent-surface-strong);
   }
+  .data-\[state\=open\]\:bg-\[var\(--ix-sel-bg\)\][data-state="open"] {
+    background-color: var(--ix-sel-bg);
+  }
   .data-\[state\=open\]\:bg-accent[data-state="open"] {
     background-color: hsl(var(--accent));
   }
@@ -5211,6 +5356,10 @@
   .data-\[state\=open\]\:opacity-100[data-state="open"] {
     opacity: 100%;
   }
+  .data-\[state\=open\]\:shadow-\[var\(--ix-after\)\][data-state="open"] {
+    --tw-shadow: var(--ix-after);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-\[state\=open\]\:duration-300[data-state="open"] {
     --tw-duration: 300ms;
     transition-duration: 300ms;
@@ -5476,9 +5625,6 @@
     .md\:grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-    .md\:grid-cols-5 {
-      grid-template-columns: repeat(5, minmax(0, 1fr));
-    }
     .md\:items-center {
       align-items: center;
     }
@@ -5598,6 +5744,26 @@
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
   }
+  @container (width >= 28rem) {
+    .\@md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @container (width >= 36rem) {
+    .\@xl\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  @container (width >= 48rem) {
+    .\@3xl\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+  }
+  @container (width >= 56rem) {
+    .\@4xl\:grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+  }
   @media (prefers-color-scheme: dark) {
     .dark\:text-neutral-500 {
       color: var(--color-neutral-500);
@@ -5629,6 +5795,9 @@
     }
   }
   @media (pointer: coarse) {
+    .pointer-coarse\:min-h-11 {
+      min-height: calc(var(--spacing) * 11);
+    }
     .pointer-coarse\:text-base {
       font-size: var(--text-base);
       line-height: var(--tw-leading, var(--text-base--line-height));
@@ -5849,15 +6018,14 @@
       border-left-width: 1px;
     }
   }
-  .\[\&\>span\]\:line-clamp-1 > span {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
   .\[\&\>span\]\:min-w-0 > span {
     min-width: 0px;
   }
+  .\[\&\>span\]\:truncate > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .\[\&\>span\]\:text-left > span {
     text-align: left;
   }
@@ -5987,8 +6155,8 @@
   --hsl-muted-foreground: 240 5% 68%;
   --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 0 0% 90.1961%;
-  --hsl-destructive: 348 74% 48%;
-  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-destructive: 0 90% 77%;
+  --hsl-destructive-foreground: 0 60% 10%;
   --hsl-border: 243 20% 20%;
   --hsl-input: 244 29% 9%;
   --hsl-ring: 233 100% 87%;
@@ -6213,7 +6381,7 @@
   --content-max-width: 80rem;
   --shell-header-height: 3.5rem;
   --shell-inset-gutter: 0.5rem;
-  --transcript-font-size: var(--font-size-base);
+  --transcript-font-size: 1rem;
   --transcript-line-height: var(--line-height-base);
   --font-size-xs: 0.6875rem;
   --font-size-sm: 0.75rem;
@@ -6279,8 +6447,8 @@
   --transition-fast: 0.1s ease;
   --transition-default: 0.16s ease;
   --transition-medium: 0.24s ease;
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 [data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"], .light {
@@ -6516,8 +6684,8 @@
   --accent-surface-soft: rgba(76, 63, 198, 0.05);
   --accent-surface-strong: rgba(76, 63, 198, 0.13);
   --accent-text: #3c32e9;
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
-  --font-display: "Inter", "Geist", sans-serif;
+  --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
   --radius: 0.5rem;
   --radius-sm: 6px;
@@ -6549,6 +6717,41 @@
   @supports (color: color-mix(in lab, red, red)) {
     --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
   }
+  --hsl-raised: var(--hsl-card);
+  --hsl-raised-2: var(--hsl-card);
+  --well-page: var(--bg-input);
+  --well-card: var(--bg-input);
+  --well-raised: var(--bg-input);
+  --well-raised-2: var(--bg-input);
+  --well: var(--well-page);
+  --field-border: hsl(var(--hsl-border));
+  --shadow-raised: var(--shadow-card);
+  --shadow-well: 0 0 0 0 transparent;
+  --edge-highlight: 0 0 0 0 transparent;
+  --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
+  --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
+  --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
+  --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
+  --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
+  --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
+  --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
+}
+[data-sandbox-theme="vault"]:where(:not(.dark)), [data-sandbox-theme="dawn"]:where(:not(.dark)), [data-theme="hospitality"]:where(:not(.dark)), [data-theme="website"]:where(:not(.dark)), [data-theme="light"], .light, [data-theme$="-light"] {
+  --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
+  --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
+}
+[data-slot="card"] :where(*) {
+  --card: var(--hsl-raised);
+  --well: var(--well-card);
+}
+[data-slot="card"] [data-slot="card"] :where(*) {
+  --card: var(--hsl-raised-2);
+  --well: var(--well-raised);
+}
+[data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
+  --well: var(--well-raised-2);
+}
+:root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
   --chart-ink: var(--text-primary);
   --chart-ink-muted: var(--text-dim);
   --chart-muted: var(--md3-outline);
@@ -7027,8 +7230,8 @@
   --hsl-muted-foreground: 240 5% 68%;
   --hsl-accent: 249 24% 16%;
   --hsl-accent-foreground: 0 0% 90.1961%;
-  --hsl-destructive: 348 74% 48%;
-  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-destructive: 0 90% 77%;
+  --hsl-destructive-foreground: 0 60% 10%;
   --hsl-border: 243 20% 20%;
   --hsl-input: 244 29% 9%;
   --hsl-ring: 233 100% 87%;
@@ -7133,7 +7336,7 @@
   --border-hover: rgba(120, 108, 158, 0.28);
 }
 [data-theme="hospitality"]:where(:not(.dark)) {
-  --hsl-background: 102 18% 92%;
+  --hsl-background: 108 16.7% 88.2%;
   --hsl-foreground: 143 25% 12%;
   --hsl-card: 0 0% 100%;
   --hsl-card-foreground: 143 25% 12%;
@@ -7141,58 +7344,71 @@
   --hsl-popover-foreground: 143 25% 12%;
   --hsl-primary: 153 38% 25%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 126 17% 94%;
+  --hsl-secondary: 110 18.7% 93.7%;
   --hsl-secondary-foreground: 143 25% 12%;
-  --hsl-muted: 126 17% 94%;
-  --hsl-muted-foreground: 146 9% 39%;
-  --hsl-accent: 131 20% 91%;
+  --hsl-muted: 110 18.7% 93.7%;
+  --hsl-muted-foreground: 138 7.3% 35.5%;
+  --hsl-accent: 133 38.4% 88%;
   --hsl-accent-foreground: 143 25% 12%;
-  --hsl-border: 130 15% 84%;
-  --hsl-input: 105 22% 97.5%;
+  --hsl-border: 107 8.7% 79.8%;
+  --hsl-input: 0 0% 100%;
   --hsl-ring: 148 28% 43%;
-  --sidebar-background: 0 0% 100%;
+  --hsl-destructive: 0 72% 41%;
+  --hsl-raised: 110 18.7% 93.7%;
+  --hsl-raised-2: 0 0% 100%;
+  --sidebar-background: 108 21.7% 95.5%;
   --sidebar-foreground: 143 25% 12%;
   --sidebar-primary: 153 38% 25%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 126 17% 94%;
+  --sidebar-accent: 133 38.4% 88%;
   --sidebar-accent-foreground: 143 25% 12%;
-  --sidebar-border: 130 15% 84%;
+  --sidebar-border: 107 8.7% 79.8%;
   --sidebar-ring: 148 28% 43%;
-  --md3-surface: #e9eee7;
-  --md3-surface-dim: #d5ded3;
+  --md3-surface: #dee6dc;
+  --md3-surface-dim: #d3dcd1;
   --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f8faf7;
+  --md3-surface-container-low: #f2f6f1;
   --md3-surface-container: #ffffff;
-  --md3-surface-container-high: #edf2ee;
+  --md3-surface-container-high: #edf2ec;
   --md3-surface-container-highest: #ffffff;
-  --md3-surface-variant: #edf2ee;
+  --md3-surface-variant: #edf2ec;
   --md3-on-surface: #17261d;
-  --md3-on-surface-variant: #5a6c62;
+  --md3-on-surface-variant: #546158;
   --md3-outline: #6d8376;
-  --md3-outline-variant: #d0dcd2;
+  --md3-outline-variant: #c9d0c7;
   --md3-primary: #285842;
   --md3-primary-dim: #1f4735;
   --md3-primary-container: #1f4735;
   --md3-on-primary: #ffffff;
   --md3-surface-tint: #285842;
-  --depth-1: #e9eee7;
+  --depth-1: #dee6dc;
   --depth-2: #ffffff;
-  --depth-3: #edf2ee;
+  --depth-3: #edf2ec;
   --depth-4: #ffffff;
-  --bg-root: #e9eee7;
-  --bg-dark: #e9eee7;
-  --bg-section: #e9eee7;
+  --bg-root: #dee6dc;
+  --bg-dark: #dee6dc;
+  --bg-section: #dee6dc;
   --bg-card: #ffffff;
   --bg-elevated: #ffffff;
-  --bg-input: #f8faf7;
+  --bg-input: #ffffff;
+  --well-page: #ffffff;
+  --well-card: #ebf0e9;
+  --well-raised: #ffffff;
+  --well-raised-2: #ebf0e9;
   --bg-hover: rgba(40, 88, 66, 0.05);
   --bg-selection: rgba(40, 88, 66, 0.16);
-  --border-subtle: rgba(23, 38, 29, 0.10);
-  --border-default: rgba(23, 38, 29, 0.14);
-  --border-hover: rgba(23, 38, 29, 0.24);
+  --border-subtle: rgba(23, 38, 29, 0.11);
+  --border-default: rgba(23, 38, 29, 0.16);
+  --border-hover: rgba(23, 38, 29, 0.28);
+  --border-strong: #798479;
+  --field-border: #798479;
   --border-accent: rgba(40, 88, 66, 0.20);
   --border-accent-hover: rgba(40, 88, 66, 0.36);
+  --shadow-card: 0 1px 2px rgba(23, 38, 29, 0.07), 0 4px 14px -4px rgba(23, 38, 29, 0.10);
+  --shadow-raised: 0 1px 1px rgba(23, 38, 29, 0.05), 0 2px 6px -2px rgba(23, 38, 29, 0.07);
+  --shadow-well: inset 0 1px 2px rgba(23, 38, 29, 0.06);
+  --edge-highlight: 0 0 0 0 transparent;
   --accent-text: #285842;
   --accent-surface-soft: rgba(40, 88, 66, 0.05);
   --accent-surface-strong: rgba(40, 88, 66, 0.13);
@@ -7206,71 +7422,96 @@
   --btn-primary-text: #ffffff;
   --text-primary: #17261d;
   --text-secondary: #36493e;
-  --text-muted: #5a6c62;
-  --text-dim: #5f6d65;
+  --text-muted: #546158;
+  --text-dim: #546158;
+  --surface-success-bg: #c5edce;
+  --surface-success-text: #1e5b34;
+  --surface-success-border: #91c79e;
+  --surface-warning-bg: #f4e3bf;
+  --surface-warning-text: #804d0c;
+  --surface-warning-border: #dcb87a;
+  --surface-danger-bg: #fadad8;
+  --surface-danger-text: #a5292b;
+  --surface-danger-border: #e8acaa;
+  --surface-neutral-bg: #e5e9e4;
+  --surface-neutral-text: #576157;
+  --surface-neutral-border: #c0c6bf;
 }
 .dark[data-theme="hospitality"] {
-  --hsl-background: 150 8% 8.6%;
+  --hsl-background: 140 10.3% 5.7%;
   --hsl-foreground: 140 12% 90.2%;
-  --hsl-card: 150 6% 18.8%;
+  --hsl-card: 132 5.3% 18.6%;
   --hsl-card-foreground: 140 12% 90.2%;
-  --hsl-popover: 150 6% 20.8%;
+  --hsl-popover: 130 3.9% 29.8%;
   --hsl-popover-foreground: 140 12% 90.2%;
   --hsl-primary: 145 31% 59%;
   --hsl-primary-foreground: 153 35% 10%;
-  --hsl-secondary: 150 6% 20.8%;
+  --hsl-secondary: 130 4.6% 25.5%;
   --hsl-secondary-foreground: 140 12% 90.2%;
-  --hsl-muted: 150 6% 20.8%;
-  --hsl-muted-foreground: 145 8% 71%;
-  --hsl-accent: 150 6% 20.8%;
+  --hsl-muted: 130 4.6% 25.5%;
+  --hsl-muted-foreground: 128 5.6% 73.9%;
+  --hsl-accent: 140 18% 20%;
   --hsl-accent-foreground: 140 12% 90.2%;
-  --hsl-border: 150 5% 29.8%;
-  --hsl-input: 150 8% 12.2%;
+  --hsl-border: 130 3.9% 29.8%;
+  --hsl-input: 120 16.7% 2.4%;
   --hsl-ring: 145 31% 59%;
-  --sidebar-background: 150 9% 6.3%;
+  --hsl-destructive: 0 80% 88%;
+  --hsl-raised: 130 4.6% 25.5%;
+  --hsl-raised-2: 130 3.7% 31.8%;
+  --sidebar-background: 120 8% 9.8%;
   --sidebar-foreground: 140 12% 90.2%;
   --sidebar-primary: 145 31% 59%;
   --sidebar-primary-foreground: 153 35% 10%;
-  --sidebar-accent: 150 6% 20.8%;
+  --sidebar-accent: 140 18% 20%;
   --sidebar-accent-foreground: 140 12% 90.2%;
-  --sidebar-border: 150 5% 29.8%;
+  --sidebar-border: 130 3.9% 29.8%;
   --sidebar-ring: 145 31% 59%;
-  --md3-surface: #141816;
-  --md3-surface-dim: #0f1210;
-  --md3-surface-bright: #383e3b;
-  --md3-surface-container-lowest: #0f1210;
-  --md3-surface-container-low: #212624;
-  --md3-surface-container: #2d3330;
-  --md3-surface-container-high: #323835;
-  --md3-surface-container-highest: #383e3b;
-  --md3-surface-variant: #323835;
+  --md3-surface: #0d100e;
+  --md3-surface-dim: #050705;
+  --md3-surface-bright: #494f4a;
+  --md3-surface-container-lowest: #050705;
+  --md3-surface-container-low: #171b17;
+  --md3-surface-container: #2d322e;
+  --md3-surface-container-high: #3e443f;
+  --md3-surface-container-highest: #494f4a;
+  --md3-surface-variant: #3e443f;
   --md3-on-surface: #e3e9e5;
-  --md3-on-surface-variant: #afbbb4;
+  --md3-on-surface-variant: #b9c0ba;
   --md3-outline: #8a938e;
-  --md3-outline-variant: #48504c;
+  --md3-outline-variant: #494f4a;
   --md3-primary: #99caad;
   --md3-primary-dim: #396a52;
   --md3-primary-container: #396a52;
   --md3-on-primary: #11221a;
   --md3-surface-tint: #76b791;
-  --depth-1: #141816;
-  --depth-2: #2d3330;
-  --depth-3: #323835;
-  --depth-4: #383e3b;
-  --bg-root: #141816;
-  --bg-dark: #141816;
-  --bg-section: #141816;
-  --bg-card: #2d3330;
-  --bg-elevated: #383e3b;
-  --bg-input: #1d221f;
+  --depth-1: #0d100e;
+  --depth-2: #2d322e;
+  --depth-3: #3e443f;
+  --depth-4: #494f4a;
+  --bg-root: #0d100e;
+  --bg-dark: #0d100e;
+  --bg-section: #0d100e;
+  --bg-card: #2d322e;
+  --bg-elevated: #494f4a;
+  --bg-input: #050705;
+  --well-page: #050705;
+  --well-card: #050705;
+  --well-raised: #181c18;
+  --well-raised-2: #181c18;
   --bg-hover: rgba(118, 183, 145, 0.07);
   --bg-selection: rgba(118, 183, 145, 0.28);
   --border-subtle: rgba(227, 233, 229, 0.10);
   --border-default: rgba(227, 233, 229, 0.16);
   --border-hover: rgba(227, 233, 229, 0.28);
+  --border-strong: #868f87;
+  --field-border: #868f87;
   --border-accent: rgba(118, 183, 145, 0.35);
   --border-accent-hover: rgba(118, 183, 145, 0.50);
-  --accent-text: #99caad;
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
+  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+  --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --accent-text: #b2dbc2;
   --accent-surface-soft: rgba(118, 183, 145, 0.07);
   --accent-surface-strong: rgba(57, 106, 82, 0.40);
   --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
@@ -7283,8 +7524,20 @@
   --btn-primary-text: #11221a;
   --text-primary: #e3e9e5;
   --text-secondary: #c5cec9;
-  --text-muted: #afbbb4;
-  --text-dim: #9ea9a2;
+  --text-muted: #b9c0ba;
+  --text-dim: #b9c0ba;
+  --surface-success-bg: #254930;
+  --surface-success-text: #9ce9b1;
+  --surface-success-border: #437652;
+  --surface-warning-bg: #513d21;
+  --surface-warning-text: #fed081;
+  --surface-warning-border: #8d6b39;
+  --surface-danger-bg: #5c3231;
+  --surface-danger-text: #f7b3b0;
+  --surface-danger-border: #a45857;
+  --surface-neutral-bg: #3e443f;
+  --surface-neutral-text: #b9c0ba;
+  --surface-neutral-border: #5f6560;
 }
 [data-theme="agents"] {
   --bg-card: #1a191b;