@tangle-network/sandbox-ui 1.1.8 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +1 -1
  2. package/dist/{AgentGraph-DxAeQQch.d.ts → AgentGraph-B4uWLXlD.d.ts} +12 -17
  3. package/dist/AgentGraph-C1DsA-Rd.js +1369 -0
  4. package/dist/{AgentGraphCanvas-CMdOlSlh.js → AgentGraphCanvas-Bcxq-e6E.js} +557 -383
  5. package/dist/{WorkflowGraph-DZ3xejKE.js → WorkflowGraph-BDjc7V_U.js} +3 -2
  6. package/dist/canvas-theme-DGd0fm1H.js +58 -0
  7. package/dist/{chat-4OZD23RA.js → chat-BrlLa4rg.js} +2 -2
  8. package/dist/chat.d.ts +2 -2
  9. package/dist/chat.js +1 -1
  10. package/dist/{dashboard-ClKA3opr.js → dashboard-FMrtIe9S.js} +3 -3
  11. package/dist/dashboard.js +1 -1
  12. package/dist/globals.css +2366 -1801
  13. package/dist/{index-ucJHuuVZ.d.ts → index-5zOVKgDT.d.ts} +2 -2
  14. package/dist/index-BK8KKLNY.d.ts +26 -0
  15. package/dist/{index-72uBu5lu.d.ts → index-D9-IiEpQ.d.ts} +21 -6
  16. package/dist/index.d.ts +5 -6
  17. package/dist/index.js +8 -291
  18. package/dist/integrations.d.ts +2 -1
  19. package/dist/integrations.js +6 -1
  20. package/dist/latest-events-B34ElSTE.js +190 -0
  21. package/dist/{AgentGraph-DJEQrKTs.js → node-ui-Bfnh08U3.js} +40 -1194
  22. package/dist/primitives-CCdx5Hh_.js +23 -0
  23. package/dist/primitives.d.ts +2 -3
  24. package/dist/primitives.js +1 -2
  25. package/dist/{run-Qern6muT.js → run-BqpdpP1K.js} +161 -60
  26. package/dist/run.d.ts +2 -2
  27. package/dist/run.js +3 -1
  28. package/dist/styles.css +2366 -1801
  29. package/dist/tailwind.css +74 -60
  30. package/dist/tokens.css +452 -851
  31. package/dist/{workbench-DOgYO3Zg.js → workbench-BVnZNhP2.js} +1 -1
  32. package/dist/workbench.js +1 -1
  33. package/dist/workflows.d.ts +3 -7
  34. package/dist/workflows.js +2 -1
  35. package/package.json +11 -10
  36. package/dist/elk-loader-Dl9S7jQk.js +0 -12
  37. package/dist/index-BAEvGqrn.d.ts +0 -26
  38. package/dist/primitives-CiwDp4-0.js +0 -32
  39. package/dist/rolldown-runtime-782esTHO.js +0 -26
package/dist/styles.css CHANGED
@@ -94,9 +94,10 @@
94
94
  --text-section--letter-spacing: -0.01em;
95
95
  --text-section--font-weight: 600;
96
96
  --radius-full: 999px;
97
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
98
- --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
97
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
98
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
99
99
  --shadow-glow: none;
100
+ --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
100
101
  --color-background: hsl(var(--background));
101
102
  --color-muted: hsl(var(--muted));
102
103
  }
@@ -790,10 +791,6 @@
790
791
  width: calc(var(--spacing) * 2);
791
792
  height: calc(var(--spacing) * 2);
792
793
  }
793
- .size-2\.5 {
794
- width: calc(var(--spacing) * 2.5);
795
- height: calc(var(--spacing) * 2.5);
796
- }
797
794
  .size-3 {
798
795
  width: calc(var(--spacing) * 3);
799
796
  height: calc(var(--spacing) * 3);
@@ -932,6 +929,9 @@
932
929
  .h-28 {
933
930
  height: calc(var(--spacing) * 28);
934
931
  }
932
+ .h-40 {
933
+ height: calc(var(--spacing) * 40);
934
+ }
935
935
  .h-48 {
936
936
  height: calc(var(--spacing) * 48);
937
937
  }
@@ -1070,6 +1070,9 @@
1070
1070
  .h-\[var\(--radix-select-trigger-height\)\] {
1071
1071
  height: var(--radix-select-trigger-height);
1072
1072
  }
1073
+ .h-\[var\(--shell-header-height\)\] {
1074
+ height: var(--shell-header-height);
1075
+ }
1073
1076
  .h-\[var\(--timeline-dot-size\,0\.5rem\)\] {
1074
1077
  height: var(--timeline-dot-size,0.5rem);
1075
1078
  }
@@ -1103,6 +1106,9 @@
1103
1106
  .max-h-96 {
1104
1107
  max-height: calc(var(--spacing) * 96);
1105
1108
  }
1109
+ .max-h-\[35vh\] {
1110
+ max-height: 35vh;
1111
+ }
1106
1112
  .max-h-\[40\%\] {
1107
1113
  max-height: 40%;
1108
1114
  }
@@ -1142,6 +1148,9 @@
1142
1148
  .min-h-0 {
1143
1149
  min-height: 0px;
1144
1150
  }
1151
+ .min-h-4 {
1152
+ min-height: calc(var(--spacing) * 4);
1153
+ }
1145
1154
  .min-h-5 {
1146
1155
  min-height: calc(var(--spacing) * 5);
1147
1156
  }
@@ -1649,6 +1658,9 @@
1649
1658
  .max-w-\[min\(640px\,calc\(100vw-2rem\)\)\] {
1650
1659
  max-width: min(640px, calc(100vw - 2rem));
1651
1660
  }
1661
+ .max-w-fit {
1662
+ max-width: fit-content;
1663
+ }
1652
1664
  .max-w-full {
1653
1665
  max-width: 100%;
1654
1666
  }
@@ -1841,6 +1853,9 @@
1841
1853
  .transform {
1842
1854
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1843
1855
  }
1856
+ .animate-\[tangle-breathe_var\(--motion-ambient\)_infinite\] {
1857
+ animation: tangle-breathe var(--motion-ambient) infinite;
1858
+ }
1844
1859
  .animate-bounce {
1845
1860
  animation: var(--animate-bounce);
1846
1861
  }
@@ -2152,9 +2167,6 @@
2152
2167
  .self-center {
2153
2168
  align-self: center;
2154
2169
  }
2155
- .self-end {
2156
- align-self: flex-end;
2157
- }
2158
2170
  .self-start {
2159
2171
  align-self: flex-start;
2160
2172
  }
@@ -2220,6 +2232,15 @@
2220
2232
  .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
2221
2233
  border-radius: calc(var(--radius-xl) + 2px);
2222
2234
  }
2235
+ .rounded-\[var\(--radius-card\)\] {
2236
+ border-radius: var(--radius-card);
2237
+ }
2238
+ .rounded-\[var\(--radius-container\)\] {
2239
+ border-radius: var(--radius-container);
2240
+ }
2241
+ .rounded-\[var\(--radius-control\)\] {
2242
+ border-radius: var(--radius-control);
2243
+ }
2223
2244
  .rounded-\[var\(--radius-full\)\] {
2224
2245
  border-radius: var(--radius-full);
2225
2246
  }
@@ -2775,9 +2796,6 @@
2775
2796
  .bg-\[var\(--status-running\)\] {
2776
2797
  background-color: var(--status-running);
2777
2798
  }
2778
- .bg-\[var\(--status-running\,\#34c48c\)\] {
2779
- background-color: var(--status-running,#34c48c);
2780
- }
2781
2799
  .bg-\[var\(--surface-danger-bg\)\] {
2782
2800
  background-color: var(--surface-danger-bg);
2783
2801
  }
@@ -2787,9 +2805,15 @@
2787
2805
  .bg-\[var\(--surface-info-bg\)\] {
2788
2806
  background-color: var(--surface-info-bg);
2789
2807
  }
2808
+ .bg-\[var\(--surface-info-text\)\] {
2809
+ background-color: var(--surface-info-text);
2810
+ }
2790
2811
  .bg-\[var\(--surface-neutral-bg\)\] {
2791
2812
  background-color: var(--surface-neutral-bg);
2792
2813
  }
2814
+ .bg-\[var\(--surface-neutral-text\)\] {
2815
+ background-color: var(--surface-neutral-text);
2816
+ }
2793
2817
  .bg-\[var\(--surface-success-bg\)\] {
2794
2818
  background-color: var(--surface-success-bg);
2795
2819
  }
@@ -3009,12 +3033,6 @@
3009
3033
  background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 40%, transparent);
3010
3034
  }
3011
3035
  }
3012
- .bg-muted-foreground\/50 {
3013
- background-color: hsl(var(--muted-foreground));
3014
- @supports (color: color-mix(in lab, red, red)) {
3015
- background-color: color-mix(in oklab, hsl(var(--muted-foreground)) 50%, transparent);
3016
- }
3017
- }
3018
3036
  .bg-muted\/10 {
3019
3037
  background-color: hsl(var(--muted));
3020
3038
  @supports (color: color-mix(in lab, red, red)) {
@@ -3749,10 +3767,6 @@
3749
3767
  --tw-font-weight: var(--font-weight-semibold);
3750
3768
  font-weight: var(--font-weight-semibold);
3751
3769
  }
3752
- .tracking-\[-0\.01em\] {
3753
- --tw-tracking: -0.01em;
3754
- letter-spacing: -0.01em;
3755
- }
3756
3770
  .tracking-\[0\.1em\] {
3757
3771
  --tw-tracking: 0.1em;
3758
3772
  letter-spacing: 0.1em;
@@ -3839,6 +3853,9 @@
3839
3853
  .text-\[color\:var\(--surface-danger-text\)\] {
3840
3854
  color: var(--surface-danger-text);
3841
3855
  }
3856
+ .text-\[color\:var\(--surface-warning-text\)\] {
3857
+ color: var(--surface-warning-text);
3858
+ }
3842
3859
  .text-\[color\:var\(--text-dim\)\] {
3843
3860
  color: var(--text-dim);
3844
3861
  }
@@ -4170,6 +4187,9 @@
4170
4187
  .underline {
4171
4188
  text-decoration-line: underline;
4172
4189
  }
4190
+ .underline-offset-2 {
4191
+ text-underline-offset: 2px;
4192
+ }
4173
4193
  .underline-offset-4 {
4174
4194
  text-underline-offset: 4px;
4175
4195
  }
@@ -4358,6 +4378,10 @@
4358
4378
  --tw-blur: blur(8px);
4359
4379
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
4360
4380
  }
4381
+ .grayscale {
4382
+ --tw-grayscale: grayscale(100%);
4383
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
4384
+ }
4361
4385
  .filter {
4362
4386
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
4363
4387
  }
@@ -4514,8 +4538,8 @@
4514
4538
  .\[-webkit-mask-image\:linear-gradient\(to_right\,transparent\,black_16px\,black_calc\(100\%-16px\)\,transparent\)\] {
4515
4539
  -webkit-mask-image: linear-gradient(to right,transparent,black 16px,black calc(100% - 16px),transparent);
4516
4540
  }
4517
- .\[animation-duration\:1\.6s\] {
4518
- animation-duration: 1.6s;
4541
+ .\[text-decoration\:inherit\] {
4542
+ text-decoration: inherit;
4519
4543
  }
4520
4544
  .\[transition\:color_var\(--motion-control\)\,background-color_var\(--motion-control\)\,border-color_var\(--motion-control\)\,box-shadow_var\(--motion-control\)\,transform_var\(--motion-control\)\,scale_var\(--motion-control\)\,opacity_var\(--motion-control\)\] {
4521
4545
  transition: color var(--motion-control),background-color var(--motion-control),border-color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-control),scale var(--motion-control),opacity var(--motion-control);
@@ -4594,16 +4618,6 @@
4594
4618
  .group-focus-visible\:bg-ring:is(:where(.group):focus-visible *) {
4595
4619
  background-color: hsl(var(--ring));
4596
4620
  }
4597
- .group-focus-visible\/agent\:outline-2:is(:where(.group\/agent):focus-visible *) {
4598
- outline-style: var(--tw-outline-style);
4599
- outline-width: 2px;
4600
- }
4601
- .group-focus-visible\/agent\:outline-offset-4:is(:where(.group\/agent):focus-visible *) {
4602
- outline-offset: 4px;
4603
- }
4604
- .group-focus-visible\/agent\:outline-ring:is(:where(.group\/agent):focus-visible *) {
4605
- outline-color: hsl(var(--ring));
4606
- }
4607
4621
  .group-data-\[state\=indeterminate\]\/checkbox\:block:is(:where(.group\/checkbox)[data-state="indeterminate"] *) {
4608
4622
  display: block;
4609
4623
  }
@@ -4656,66 +4670,54 @@
4656
4670
  --tw-content: '';
4657
4671
  content: var(--tw-content);
4658
4672
  }
4659
- .after\:pointer-events-none::after {
4660
- content: var(--tw-content);
4661
- pointer-events: none;
4662
- }
4663
4673
  .after\:absolute::after {
4664
4674
  content: var(--tw-content);
4665
4675
  position: absolute;
4666
4676
  }
4667
- .after\:inset-0::after {
4668
- content: var(--tw-content);
4669
- inset: 0px;
4670
- }
4671
4677
  .after\:top-0::after {
4672
4678
  content: var(--tw-content);
4673
4679
  top: 0px;
4674
4680
  }
4675
- .after\:right-0::after {
4681
+ .after\:top-1\/2::after {
4676
4682
  content: var(--tw-content);
4677
- right: 0px;
4683
+ top: calc(1 / 2 * 100%);
4678
4684
  }
4679
- .after\:left-0::after {
4685
+ .after\:-right-\[3px\]::after {
4680
4686
  content: var(--tw-content);
4681
- left: 0px;
4687
+ right: calc(3px * -1);
4682
4688
  }
4683
- .after\:h-\[2px\]::after {
4689
+ .after\:right-0::after {
4684
4690
  content: var(--tw-content);
4685
- height: 2px;
4691
+ right: 0px;
4686
4692
  }
4687
- .after\:rounded-xl::after {
4693
+ .after\:left-0::after {
4688
4694
  content: var(--tw-content);
4689
- border-radius: var(--radius-xl);
4695
+ left: 0px;
4690
4696
  }
4691
- .after\:bg-primary::after {
4697
+ .after\:h-4::after {
4692
4698
  content: var(--tw-content);
4693
- background-color: hsl(var(--primary));
4699
+ height: calc(var(--spacing) * 4);
4694
4700
  }
4695
- .after\:opacity-0::after {
4701
+ .after\:h-\[2px\]::after {
4696
4702
  content: var(--tw-content);
4697
- opacity: 0%;
4703
+ height: 2px;
4698
4704
  }
4699
- .after\:shadow-\[0_10px_28px_-10px_hsl\(var\(--foreground\)\/0\.45\)\]::after {
4705
+ .after\:w-px::after {
4700
4706
  content: var(--tw-content);
4701
- --tw-shadow: 0 10px 28px -10px var(--tw-shadow-color, hsl(var(--foreground)/0.45));
4702
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4707
+ width: 1px;
4703
4708
  }
4704
- .after\:transition-opacity::after {
4709
+ .after\:-translate-y-1\/2::after {
4705
4710
  content: var(--tw-content);
4706
- transition-property: opacity;
4707
- transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4708
- transition-duration: var(--tw-duration, var(--default-transition-duration));
4711
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
4712
+ translate: var(--tw-translate-x) var(--tw-translate-y);
4709
4713
  }
4710
- .after\:duration-150::after {
4714
+ .after\:bg-border::after {
4711
4715
  content: var(--tw-content);
4712
- --tw-duration: 150ms;
4713
- transition-duration: 150ms;
4716
+ background-color: hsl(var(--border));
4714
4717
  }
4715
- .after\:ease-out::after {
4718
+ .after\:bg-primary::after {
4716
4719
  content: var(--tw-content);
4717
- --tw-ease: var(--ease-out);
4718
- transition-timing-function: var(--ease-out);
4720
+ background-color: hsl(var(--primary));
4719
4721
  }
4720
4722
  .first\:pt-0:first-child {
4721
4723
  padding-top: 0px;
@@ -4742,10 +4744,6 @@
4742
4744
  --tw-translate-y: calc(var(--spacing) * -0.5);
4743
4745
  translate: var(--tw-translate-x) var(--tw-translate-y);
4744
4746
  }
4745
- .hover\:-translate-y-px:hover {
4746
- --tw-translate-y: -1px;
4747
- translate: var(--tw-translate-x) var(--tw-translate-y);
4748
- }
4749
4747
  .hover\:border-\[var\(--border-accent\)\]:hover {
4750
4748
  border-color: var(--border-accent);
4751
4749
  }
@@ -5176,9 +5174,9 @@
5176
5174
  --tw-brightness: brightness(110%);
5177
5175
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
5178
5176
  }
5179
- .hover\:after\:opacity-100:hover::after {
5180
- content: var(--tw-content);
5181
- opacity: 100%;
5177
+ .hover\:grayscale-0:hover {
5178
+ --tw-grayscale: grayscale(0%);
5179
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
5182
5180
  }
5183
5181
  }
5184
5182
  .focus\:border-\[var\(--focus-border\)\]:focus {
@@ -5454,9 +5452,6 @@
5454
5452
  .aria-pressed\:text-\[var\(--accent-text\)\][aria-pressed="true"] {
5455
5453
  color: var(--accent-text);
5456
5454
  }
5457
- .aria-pressed\:text-foreground[aria-pressed="true"] {
5458
- color: hsl(var(--foreground));
5459
- }
5460
5455
  .aria-pressed\:shadow-\[inset_0_0_0_1px_var\(--ix-sel-ring\)\][aria-pressed="true"] {
5461
5456
  --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--ix-sel-ring));
5462
5457
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5731,11 +5726,6 @@
5731
5726
  }
5732
5727
  }
5733
5728
  }
5734
- @media (prefers-reduced-motion: no-preference) {
5735
- .motion-safe\:animate-spin {
5736
- animation: var(--animate-spin);
5737
- }
5738
- }
5739
5729
  @media (prefers-reduced-motion: reduce) {
5740
5730
  .motion-reduce\:not-sr-only {
5741
5731
  position: static;
@@ -5756,16 +5746,6 @@
5756
5746
  .motion-reduce\:transition-none {
5757
5747
  transition-property: none;
5758
5748
  }
5759
- .motion-reduce\:after\:transition-none::after {
5760
- content: var(--tw-content);
5761
- transition-property: none;
5762
- }
5763
- @media (hover: hover) {
5764
- .motion-reduce\:hover\:translate-y-0:hover {
5765
- --tw-translate-y: 0px;
5766
- translate: var(--tw-translate-x) var(--tw-translate-y);
5767
- }
5768
- }
5769
5749
  .motion-reduce\:active\:scale-100:active {
5770
5750
  --tw-scale-x: 100%;
5771
5751
  --tw-scale-y: 100%;
@@ -5805,6 +5785,9 @@
5805
5785
  border-left-style: var(--tw-border-style) !important;
5806
5786
  border-left-width: 0px !important;
5807
5787
  }
5788
+ .max-sm\:p-4 {
5789
+ padding: calc(var(--spacing) * 4);
5790
+ }
5808
5791
  .max-sm\:pl-4 {
5809
5792
  padding-left: calc(var(--spacing) * 4);
5810
5793
  }
@@ -6017,6 +6000,9 @@
6017
6000
  .lg\:col-span-1 {
6018
6001
  grid-column: span 1 / span 1;
6019
6002
  }
6003
+ .lg\:mr-\[420px\] {
6004
+ margin-right: 420px;
6005
+ }
6020
6006
  .lg\:ml-\[var\(--sb-content-margin\,0px\)\] {
6021
6007
  margin-left: var(--sb-content-margin,0px);
6022
6008
  }
@@ -6301,6 +6287,16 @@
6301
6287
  .\[\&_a\:hover\]\:underline a:hover {
6302
6288
  text-decoration-line: underline;
6303
6289
  }
6290
+ .\[\&_blockquote_p\]\:before\:content-none blockquote p::before {
6291
+ content: var(--tw-content);
6292
+ --tw-content: none;
6293
+ content: none;
6294
+ }
6295
+ .\[\&_blockquote_p\]\:after\:content-none blockquote p::after {
6296
+ content: var(--tw-content);
6297
+ --tw-content: none;
6298
+ content: none;
6299
+ }
6304
6300
  .\[\&_h1\]\:text-2xl h1 {
6305
6301
  font-size: var(--text-2xl);
6306
6302
  line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -6466,12 +6462,20 @@
6466
6462
  padding-block: var(--spacing);
6467
6463
  }
6468
6464
  @media (width < 40rem) {
6465
+ .max-sm\:\[\&\>div\+div\]\:border-t > div + div {
6466
+ border-top-style: var(--tw-border-style);
6467
+ border-top-width: 1px;
6468
+ }
6469
6469
  .max-sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
6470
6470
  border-left-style: var(--tw-border-style);
6471
6471
  border-left-width: 1px;
6472
6472
  }
6473
6473
  }
6474
6474
  @media (width >= 40rem) {
6475
+ .sm\:\[\&\>div\:not\(\:nth-child\(2n\+1\)\)\]\:border-l > div:not(:nth-child(2n+1)) {
6476
+ border-left-style: var(--tw-border-style);
6477
+ border-left-width: 1px;
6478
+ }
6475
6479
  .sm\:\[\&\>div\:not\(\:nth-child\(3n\+1\)\)\]\:border-l > div:not(:nth-child(3n+1)) {
6476
6480
  border-left-style: var(--tw-border-style);
6477
6481
  border-left-width: 1px;
@@ -6589,1571 +6593,1972 @@
6589
6593
  color: hsl(var(--muted-foreground));
6590
6594
  }
6591
6595
  }
6592
- :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
6593
- color-scheme: dark;
6594
- --hsl-background: 240 33% 6%;
6595
- --hsl-input: 244 29% 9%;
6596
- --hsl-card: 244 23% 12%;
6597
- --hsl-secondary: 249 24% 17.5%;
6598
- --hsl-popover: 247 21% 23%;
6599
- --hsl-muted: var(--hsl-secondary);
6600
- --hsl-accent: var(--hsl-secondary);
6601
- --md3-surface-dim: #040408;
6602
- --md3-surface-container-lowest: var(--md3-surface-dim);
6603
- --md3-surface-bright: #232238;
6604
- --md3-surface: hsl(var(--hsl-background));
6605
- --md3-surface-container-low: hsl(var(--hsl-input));
6606
- --md3-surface-container: hsl(var(--hsl-card));
6607
- --md3-surface-container-high: hsl(var(--hsl-secondary));
6608
- --md3-surface-container-highest: hsl(var(--hsl-popover));
6609
- --md3-surface-variant: var(--md3-surface-container-high);
6610
- --depth-1: var(--md3-surface);
6611
- --depth-2: var(--md3-surface-container);
6612
- --depth-3: var(--md3-surface-container-high);
6613
- --depth-4: var(--md3-surface-container-highest);
6614
- --bg-root: var(--md3-surface);
6615
- --bg-dark: var(--depth-1);
6616
- --bg-card: var(--depth-2);
6617
- --bg-elevated: var(--depth-4);
6618
- --bg-section: var(--depth-1);
6619
- --bg-input: hsl(var(--hsl-input));
6620
- --sidebar-background: var(--hsl-input);
6621
- --sidebar-accent: var(--hsl-secondary);
6622
- --md3-inverse-surface: #fdfdfd;
6623
- --md3-inverse-on-surface: #000000;
6624
- --hsl-foreground: 0 0% 90.1961%;
6625
- --hsl-muted-foreground: 240 5% 68%;
6626
- --text-primary: hsl(var(--hsl-foreground));
6627
- --text-secondary: #c7c7c7;
6628
- --text-muted: #b5b5b5;
6629
- --text-dim: #a5a5a5;
6630
- --hsl-card-foreground: var(--hsl-foreground);
6631
- --hsl-popover-foreground: var(--hsl-foreground);
6632
- --hsl-secondary-foreground: var(--hsl-foreground);
6633
- --hsl-accent-foreground: var(--hsl-foreground);
6634
- --sidebar-foreground: var(--hsl-foreground);
6635
- --sidebar-accent-foreground: var(--hsl-foreground);
6636
- --md3-on-surface: var(--text-primary);
6637
- --md3-on-surface-variant: var(--text-muted);
6638
- --md3-outline: #8e8e8e;
6639
- --hsl-border: 244 16% 25%;
6640
- --md3-outline-variant: hsl(var(--hsl-border));
6641
- --sidebar-border: var(--hsl-border);
6642
- --border-subtle: hsl(var(--hsl-border));
6643
- --border-default: hsl(var(--hsl-border));
6644
- --border-hover: rgba(255, 255, 255, 0.28);
6645
- --hsl-primary: 246 54% 51%;
6646
- --hsl-primary-foreground: 0 0% 100%;
6647
- --hsl-ring: 233 100% 87%;
6648
- --brand-primary: #7C6CF6;
6649
- --brand-cool: #818CF8;
6650
- --accent-text: #A5B4FC;
6651
- --brand-purple: #C7D2FE;
6652
- --brand-strong: #2E2A5E;
6653
- --brand-strong-text: #ffffff;
6654
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
6655
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
6656
- --brand-glow: var(--accent-text);
6657
- --brand-vibrant: var(--brand-primary);
6658
- --btn-primary-bg: hsl(var(--hsl-primary));
6659
- --btn-primary-hover: #5a50d6;
6660
- --btn-primary-text: #ffffff;
6661
- --btn-cta-bg: var(--btn-primary-bg);
6662
- --btn-cta-text: var(--btn-primary-text);
6663
- --sidebar-primary: var(--hsl-primary);
6664
- --sidebar-primary-foreground: var(--hsl-primary-foreground);
6665
- --sidebar-ring: var(--hsl-ring);
6666
- --md3-primary: var(--accent-text);
6667
- --md3-primary-dim: var(--brand-primary);
6668
- --md3-primary-container: var(--btn-primary-bg);
6669
- --md3-on-primary: #ffffff;
6670
- --md3-on-primary-container: var(--brand-purple);
6671
- --md3-primary-fixed: var(--accent-text);
6672
- --md3-primary-fixed-dim: var(--brand-cool);
6673
- --md3-secondary: var(--brand-purple);
6674
- --md3-secondary-dim: var(--accent-text);
6675
- --md3-secondary-container: var(--brand-strong);
6676
- --md3-on-secondary: var(--brand-purple);
6677
- --md3-on-secondary-container: var(--brand-purple);
6678
- --md3-inverse-primary: var(--btn-primary-bg);
6679
- --md3-surface-tint: var(--accent-text);
6680
- --accent-surface-soft: var(--accent-text);
6681
- @supports (color: color-mix(in lab, red, red)) {
6682
- --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
6683
- }
6684
- --accent-surface-strong: var(--btn-primary-bg);
6685
- @supports (color: color-mix(in lab, red, red)) {
6686
- --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
6687
- }
6688
- --bg-hover: var(--accent-surface-soft);
6689
- --bg-selection: var(--brand-primary);
6690
- @supports (color: color-mix(in lab, red, red)) {
6691
- --bg-selection: color-mix(in srgb, var(--brand-primary) 28%, transparent);
6692
- }
6693
- --border-accent: var(--brand-cool);
6694
- @supports (color: color-mix(in lab, red, red)) {
6695
- --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
6696
- }
6697
- --border-accent-hover: var(--brand-cool);
6698
- @supports (color: color-mix(in lab, red, red)) {
6699
- --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
6700
- }
6701
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--accent-text));
6702
- --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
6703
- --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--brand-primary));
6704
- --hsl-success: 154.7 60.2% 60.6%;
6705
- --hsl-warning: 41.5 88.2% 63.3%;
6706
- --hsl-destructive: 2.8 100% 83.1%;
6707
- --hsl-destructive-foreground: 0 60% 10%;
6708
- --hsl-info: 199.7 100% 70.2%;
6709
- --surface-success-text: hsl(var(--hsl-success));
6710
- --surface-success-bg: #2f5146;
6711
- --surface-success-border: #3c7760;
6712
- --surface-warning-text: hsl(var(--hsl-warning));
6713
- --surface-warning-bg: #4b4232;
6714
- --surface-warning-border: #7a6236;
6715
- --surface-danger-text: hsl(var(--hsl-destructive));
6716
- --surface-danger-bg: #5a3b40;
6717
- --surface-danger-border: #7d4d53;
6718
- --surface-info-text: hsl(var(--hsl-info));
6719
- --surface-info-bg: #2d4e67;
6720
- --surface-info-border: #3d7292;
6721
- --status-running: var(--surface-success-text);
6722
- --status-creating: var(--accent-text);
6723
- --status-stopped: var(--surface-warning-text);
6724
- --status-warm: var(--surface-orange-text);
6725
- --status-cold: var(--surface-info-text);
6726
- --status-error: var(--surface-danger-text);
6727
- --status-deleted: var(--text-dim);
6728
- --brand-emerald: var(--surface-success-text);
6729
- --md3-tertiary: var(--surface-success-text);
6730
- --md3-tertiary-container: var(--surface-success-bg);
6731
- --md3-error: var(--surface-danger-text);
6732
- --md3-error-dim: var(--md3-error);
6733
- @supports (color: color-mix(in lab, red, red)) {
6734
- --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
6735
- }
6736
- --md3-error-container: var(--surface-danger-bg);
6737
- --md3-on-error: hsl(var(--hsl-destructive-foreground));
6738
- --md3-on-error-container: var(--surface-danger-text);
6739
- --background: var(--hsl-background);
6740
- --foreground: var(--hsl-foreground);
6741
- --card: var(--hsl-card);
6742
- --card-foreground: var(--hsl-card-foreground);
6743
- --popover: var(--hsl-popover);
6744
- --popover-foreground: var(--hsl-popover-foreground);
6745
- --primary: var(--hsl-primary);
6746
- --primary-foreground: var(--hsl-primary-foreground);
6747
- --secondary: var(--hsl-secondary);
6748
- --secondary-foreground: var(--hsl-secondary-foreground);
6749
- --muted: var(--hsl-muted);
6750
- --muted-foreground: var(--hsl-muted-foreground);
6751
- --accent: var(--hsl-accent);
6752
- --accent-foreground: var(--hsl-accent-foreground);
6753
- --destructive: var(--hsl-destructive);
6754
- --destructive-foreground: var(--hsl-destructive-foreground);
6755
- --border: var(--hsl-border);
6756
- --input: var(--hsl-muted-foreground);
6757
- --ring: var(--hsl-ring);
6758
- --success: var(--hsl-success);
6759
- --warning: var(--hsl-warning);
6760
- --error: var(--hsl-destructive);
6761
- --info: var(--hsl-info);
6762
- --tone-violet-bg: #392751;
6763
- --tone-violet-bg-hover: #432b60;
6764
- --tone-violet-bg-selected: #4c306c;
6765
- --tone-violet-border: #8457aa;
6766
- --tone-violet-border-selected: #d19dff;
6767
- --tone-violet-text: #ecd9fa;
6768
- --tone-violet-icon: #d19dff;
6769
- --tone-orange-bg: #432823;
6770
- --tone-orange-bg-hover: #512d22;
6771
- --tone-orange-bg-selected: #5e3221;
6772
- --tone-orange-border: #a35829;
6773
- --tone-orange-border-selected: #f76b15;
6774
- --tone-orange-text: #ffe0c2;
6775
- --tone-orange-icon: #f76b15;
6776
- --tone-teal-bg: #18333b;
6777
- --tone-teal-bg-hover: #173b42;
6778
- --tone-teal-bg-selected: #174448;
6779
- --tone-teal-border: #207e73;
6780
- --tone-teal-border-selected: #12a594;
6781
- --tone-teal-text: #adf0dd;
6782
- --tone-teal-icon: #12a594;
6783
- --tone-blue-bg: #143051;
6784
- --tone-blue-bg-hover: #123861;
6785
- --tone-blue-bg-selected: #113e6b;
6786
- --tone-blue-border: #2870bd;
6787
- --tone-blue-border-selected: #0090ff;
6788
- --tone-blue-text: #c2e6ff;
6789
- --tone-blue-icon: #0090ff;
6790
- --tone-pink-bg: #462243;
6791
- --tone-pink-bg-hover: #55254d;
6792
- --tone-pink-bg-selected: #612754;
6793
- --tone-pink-border: #a84885;
6794
- --tone-pink-border-selected: #de51a8;
6795
- --tone-pink-text: #fdd1ea;
6796
- --tone-pink-icon: #de51a8;
6797
- --tone-brown-bg: #372d30;
6798
- --tone-brown-bg-hover: #413434;
6799
- --tone-brown-bg-selected: #4a3a37;
6800
- --tone-brown-border: #7c5f46;
6801
- --tone-brown-border-selected: #ad7f58;
6802
- --tone-brown-text: #f2e1ca;
6803
- --tone-brown-icon: #ad7f58;
6804
- --tone-cyan-bg: #143245;
6805
- --tone-cyan-bg-hover: #133b4e;
6806
- --tone-cyan-bg-selected: #114358;
6807
- --tone-cyan-border: #11809c;
6808
- --tone-cyan-border-selected: #00a2c7;
6809
- --tone-cyan-text: #b6ecf7;
6810
- --tone-cyan-icon: #00a2c7;
6811
- --tone-lime-bg: #2b302d;
6812
- --tone-lime-bg-hover: #32382f;
6813
- --tone-lime-bg-selected: #384132;
6814
- --tone-lime-border: #577538;
6815
- --tone-lime-border-selected: #bdee63;
6816
- --tone-lime-text: #e3f7ba;
6817
- --tone-lime-icon: #bdee63;
6818
- --surface-violet-bg: #392751;
6819
- --surface-violet-border: #8457aa;
6820
- --surface-violet-text: #d19dff;
6821
- --surface-orange-bg: #432823;
6822
- --surface-orange-border: #a35829;
6823
- --surface-orange-text: #ffa057;
6824
- --surface-teal-bg: #18333b;
6825
- --surface-teal-border: #207e73;
6826
- --surface-teal-text: #0bd8b6;
6827
- --run-mix-succeeded: #76edb9;
6828
- --run-mix-waiting: #e9b642;
6829
- --run-mix-failed: #e1918e;
6830
- --run-mix-in-flight: #2d9bca;
6831
- --run-mix-cancelled: #767d90;
6832
- --surface-neutral-bg: var(--depth-3);
6833
- --surface-neutral-border: var(--border-subtle);
6834
- --surface-neutral-text: var(--text-muted);
6835
- --glass-bg: var(--depth-2);
6836
- --glass-bg-strong: var(--depth-3);
6837
- --glass-border: var(--border-subtle);
6838
- --glass-border-hover: var(--border-hover);
6839
- --glass-blur: 0px;
6840
- --mesh-teal: transparent;
6841
- --mesh-violet: transparent;
6842
- --mesh-blue: transparent;
6843
- --code-header-bg: hsl(var(--hsl-background));
6844
- --syntax-foreground: var(--text-primary);
6845
- --syntax-variable: var(--text-secondary);
6846
- --syntax-comment: var(--text-dim);
6847
- --syntax-keyword: var(--tone-violet-icon);
6848
- --syntax-meta: var(--accent-text);
6849
- --syntax-function: var(--surface-info-text);
6850
- --syntax-string: var(--surface-success-text);
6851
- --syntax-number: var(--surface-warning-text);
6852
- --syntax-error: var(--surface-danger-text);
6853
- --code-keyword: var(--syntax-keyword);
6854
- --code-string: var(--syntax-string);
6855
- --code-function: var(--syntax-function);
6856
- --code-number: var(--syntax-number);
6857
- --code-success: var(--surface-success-text);
6858
- --code-comment: var(--syntax-comment);
6859
- --code-error: var(--syntax-error);
6860
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
6861
- --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
6862
- --shadow-glow: none;
6863
- --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
6864
- --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
6865
- 0 16px 40px hsl(var(--hsl-foreground) / 0.16);
6866
- --scrim: rgb(0 0 0 / 0.4);
6867
- --scrim-strong: rgb(0 0 0 / 0.72);
6868
- --on-media: #ffffff;
6869
- --shadow-status-running: none;
6870
- --shadow-status-creating: none;
6871
- --shadow-status-error: none;
6872
- --radius-sm: 6px;
6873
- --radius-md: 8px;
6874
- --radius-lg: 10px;
6875
- --radius-xl: 12px;
6876
- --radius-pill: 999px;
6877
- --radius-full: 999px;
6878
- --radius-composer: 26px;
6879
- --radius-tag: 4px;
6880
- --radius-chip: 8px;
6881
- --radius-field: 12px;
6882
- --radius-panel: 16px;
6883
- --radius-cover: 20px;
6884
- --radius-sheet: 24px;
6885
- --radius: 0.5rem;
6886
- --control-height: 2.25rem;
6887
- --control-height-sm: 2rem;
6888
- --control-height-lg: 2.75rem;
6889
- --control-text-sm: 0.75rem;
6890
- --control-text-md: 0.875rem;
6891
- --control-text-lg: 1rem;
6892
- --font-size-label: 0.875rem;
6893
- --font-size-help: 0.75rem;
6894
- --panel-padding: 1rem;
6895
- --content-max-width: 80rem;
6896
- --shell-header-height: 3.5rem;
6897
- --shell-inset-gutter: 0.5rem;
6898
- --transcript-font-size: 1rem;
6899
- --transcript-line-height: var(--line-height-base);
6900
- --font-size-xs: 0.75rem;
6901
- --font-size-sm: 0.875rem;
6902
- --font-size-base: 1rem;
6903
- --font-size-lg: 1.125rem;
6904
- --font-size-xl: 1.25rem;
6905
- --font-size-2xl: 1.5rem;
6906
- --font-size-3xl: 1.875rem;
6907
- --font-size-4xl: 2.25rem;
6908
- --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
6909
- --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
6910
- --line-height-tight: 1.3;
6911
- --line-height-base: 1.6;
6912
- --line-height-relaxed: 1.75;
6913
- --line-height-display: 1.05;
6914
- --line-height-heading: 1.15;
6915
- --tracking-tight: -0.02em;
6916
- --tracking-snug: -0.01em;
6917
- --tracking-wide: 0.08em;
6918
- --tracking-display: -0.03em;
6919
- --hero-gutter: 1.5rem;
6920
- --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
6921
- --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
6922
- --display-max-width: 56rem;
6923
- --reading-max-width: 42rem;
6924
- --hero-action-gap: 0.75rem;
6925
- --hero-content-gap: 1.5rem;
6926
- --display-control-height: 2.875rem;
6927
- --display-control-radius: 0.625rem;
6928
- --display-control-font-size: 0.9375rem;
6929
- --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
6930
- --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
6931
- --hero-grid-pitch: 3.5rem;
6932
- --hero-atmosphere-opacity: 0.16;
6933
- --hero-knot-opacity: 0.07;
6934
- --duration-expressive-entrance: 300ms;
6935
- --duration-expressive-ambient: 14s;
6936
- --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
6937
- --avatar-size: 2rem;
6938
- --timeline-dot-size: 0.625rem;
6939
- --indicator-dot-size: 0.25rem;
6940
- --code-padding-x: 0.75rem;
6941
- --code-padding-y: 0.625rem;
6942
- --code-font-size: 0.8125rem;
6943
- --code-line-height: 1.5;
6944
- --chat-message-px: 0.875rem;
6945
- --chat-message-py: 0.5rem;
6946
- --chat-input-py: 0.625rem;
6947
- --card-padding: 1.25rem;
6948
- --tool-card-px: 0.75rem;
6949
- --tool-card-py: 0.5rem;
6950
- --tool-icon-size: 1.75rem;
6951
- --duration-instant: 90ms;
6952
- --duration-fast: 150ms;
6953
- --duration-base: 240ms;
6954
- --duration-slow: 360ms;
6955
- --duration-stream: 420ms;
6956
- --duration-arrive: 600ms;
6957
- --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
6958
- --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
6959
- --ease-exit: cubic-bezier(0.4, 0, 1, 1);
6960
- --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
6961
- --motion-control: var(--duration-fast) var(--ease-standard);
6962
- --motion-surface: var(--duration-base) var(--ease-entrance);
6963
- --motion-dismiss: var(--duration-instant) var(--ease-exit);
6964
- --motion-stream: var(--duration-stream) var(--ease-expo);
6965
- --motion-arrive: var(--duration-arrive) var(--ease-expo);
6966
- --interaction-feedback-budget: 100ms;
6967
- --interaction-pending-delay: 200ms;
6968
- --interaction-long-work-delay: 1000ms;
6969
- --interaction-mutation-budget: 500ms;
6970
- --stagger-step: 50ms;
6971
- --stagger-index: 0;
6972
- --arrive-distance: 8px;
6973
- --stream-blur: 4px;
6974
- --transition-fast: 0.1s ease;
6975
- --transition-default: 0.16s ease;
6976
- --transition-medium: 0.24s ease;
6977
- --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
6978
- --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
6979
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
6980
- }
6981
- [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 {
6982
- color-scheme: light;
6983
- --hsl-background: 223 23% 94%;
6984
- --hsl-input: 225 29% 97%;
6985
- --hsl-card: 0 0% 100%;
6986
- --hsl-secondary: 228 25% 94.5%;
6987
- --hsl-popover: var(--hsl-card);
6988
- --md3-surface-dim: #dcdee6;
6989
- --md3-surface-container-lowest: hsl(var(--hsl-card));
6990
- --md3-surface-bright: #ffffff;
6991
- --sidebar-background: var(--hsl-card);
6992
- --md3-inverse-surface: #2e2e3e;
6993
- --md3-inverse-on-surface: #f0f1f4;
6994
- --hsl-foreground: 0 0% 17.6471%;
6995
- --hsl-muted-foreground: 0 0% 29.8039%;
6996
- --text-secondary: #3f3f3f;
6997
- --text-muted: #4c4c4c;
6998
- --text-dim: #686868;
6999
- --md3-outline: #787878;
7000
- --hsl-border: 244 16% 81%;
7001
- --border-hover: rgba(0, 0, 0, 0.24);
7002
- --hsl-ring: var(--hsl-primary);
7003
- --brand-primary: #6366F1;
7004
- --brand-purple: var(--brand-primary);
7005
- --accent-text: #3c32e9;
7006
- --md3-primary: var(--accent-text);
7007
- --md3-primary-dim: var(--btn-primary-bg);
7008
- --md3-on-primary-container: #ffffff;
7009
- --md3-primary-fixed: #E8E5FF;
7010
- --md3-primary-fixed-dim: var(--md3-primary-fixed);
7011
- @supports (color: color-mix(in lab, red, red)) {
7012
- --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
7013
- }
7014
- --md3-secondary: var(--accent-text);
7015
- --md3-secondary-dim: var(--btn-primary-bg);
7016
- --md3-secondary-container: var(--md3-primary-fixed);
7017
- --md3-on-secondary: #ffffff;
7018
- --md3-on-secondary-container: var(--accent-text);
7019
- --md3-inverse-primary: #A5B4FC;
7020
- --md3-surface-tint: var(--brand-primary);
7021
- --accent-surface-soft: var(--btn-primary-bg);
7022
- @supports (color: color-mix(in lab, red, red)) {
7023
- --accent-surface-soft: color-mix(in srgb, var(--btn-primary-bg) 5%, transparent);
7024
- }
7025
- --accent-surface-strong: var(--btn-primary-bg);
7026
- @supports (color: color-mix(in lab, red, red)) {
7027
- --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7028
- }
7029
- --bg-selection: var(--btn-primary-bg);
7030
- @supports (color: color-mix(in lab, red, red)) {
7031
- --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7032
- }
7033
- --border-accent: var(--btn-primary-hover);
7034
- @supports (color: color-mix(in lab, red, red)) {
7035
- --border-accent: color-mix(in srgb, var(--btn-primary-hover) 18%, transparent);
7036
- }
7037
- --border-accent-hover: var(--btn-primary-hover);
7038
- @supports (color: color-mix(in lab, red, red)) {
7039
- --border-accent-hover: color-mix(in srgb, var(--btn-primary-hover) 35%, transparent);
7040
- }
7041
- --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7042
- --tangle-gradient-text: var(--tangle-gradient);
7043
- --accent-gradient-strong: var(--tangle-gradient);
7044
- --hsl-success: 162.9 93.5% 24.3%;
7045
- --hsl-warning: 25.9 90% 35.3%;
7046
- --hsl-destructive: 0 73.7% 41.8%;
7047
- --hsl-destructive-foreground: 0 0% 100%;
7048
- --hsl-info: 201.3 96.3% 32.2%;
7049
- --surface-success-bg: #ecfdf5;
7050
- --surface-success-border: #a7f3d0;
7051
- --surface-warning-bg: #fffbeb;
7052
- --surface-warning-border: #fde68a;
7053
- --surface-danger-bg: #fff1f2;
7054
- --surface-danger-border: #fecdd3;
7055
- --surface-info-bg: #f0f9ff;
7056
- --surface-info-border: #bae6fd;
7057
- --tone-violet-bg: #f7edfe;
7058
- --tone-violet-bg-hover: #f2e2fc;
7059
- --tone-violet-bg-selected: #ead5f9;
7060
- --tone-violet-border: #e0c4f4;
7061
- --tone-violet-border-selected: #8e4ec6;
7062
- --tone-violet-text: #402060;
7063
- --tone-violet-icon: #8e4ec6;
7064
- --tone-orange-bg: #ffefd6;
7065
- --tone-orange-bg-hover: #ffdfb5;
7066
- --tone-orange-bg-selected: #ffd19a;
7067
- --tone-orange-border: #ffc182;
7068
- --tone-orange-border-selected: #cc4e00;
7069
- --tone-orange-text: #582d1d;
7070
- --tone-orange-icon: #cc4e00;
7071
- --tone-teal-bg: #e0f8f3;
7072
- --tone-teal-bg-hover: #ccf3ea;
7073
- --tone-teal-bg-selected: #b8eae0;
7074
- --tone-teal-border: #a1ded2;
7075
- --tone-teal-border-selected: #008573;
7076
- --tone-teal-text: #0d3d38;
7077
- --tone-teal-icon: #008573;
7078
- --tone-blue-bg: #e6f4fe;
7079
- --tone-blue-bg-hover: #d5efff;
7080
- --tone-blue-bg-selected: #c2e5ff;
7081
- --tone-blue-border: #acd8fc;
7082
- --tone-blue-border-selected: #0d74ce;
7083
- --tone-blue-text: #113264;
7084
- --tone-blue-icon: #0d74ce;
7085
- --tone-pink-bg: #fee9f5;
7086
- --tone-pink-bg-hover: #fbdcef;
7087
- --tone-pink-bg-selected: #f6cee7;
7088
- --tone-pink-border: #efbfdd;
7089
- --tone-pink-border-selected: #cf3897;
7090
- --tone-pink-text: #651249;
7091
- --tone-pink-icon: #cf3897;
7092
- --tone-brown-bg: #f6eee7;
7093
- --tone-brown-bg-hover: #f0e4d9;
7094
- --tone-brown-bg-selected: #ebdaca;
7095
- --tone-brown-border: #e4cdb7;
7096
- --tone-brown-border-selected: #815e46;
7097
- --tone-brown-text: #3e332e;
7098
- --tone-brown-icon: #815e46;
7099
- --tone-cyan-bg: #def7f9;
7100
- --tone-cyan-bg-hover: #caf1f6;
7101
- --tone-cyan-bg-selected: #b5e9f0;
7102
- --tone-cyan-border: #9ddde7;
7103
- --tone-cyan-border-selected: #107d98;
7104
- --tone-cyan-text: #0d3c48;
7105
- --tone-cyan-icon: #107d98;
7106
- --tone-lime-bg: #eef6d6;
7107
- --tone-lime-bg-hover: #e2f0bd;
7108
- --tone-lime-bg-selected: #d3e7a6;
7109
- --tone-lime-border: #c2da91;
7110
- --tone-lime-border-selected: #5c7c2f;
7111
- --tone-lime-text: #37401c;
7112
- --tone-lime-icon: #5c7c2f;
7113
- --surface-violet-bg: #f7edfe;
7114
- --surface-violet-border: #e0c4f4;
7115
- --surface-violet-text: #8145b5;
7116
- --surface-orange-bg: #ffefd6;
7117
- --surface-orange-border: #ffc182;
7118
- --surface-orange-text: #bc4904;
7119
- --surface-teal-bg: #e0f8f3;
7120
- --surface-teal-border: #a1ded2;
7121
- --surface-teal-text: #017d6d;
7122
- --run-mix-succeeded: #3c9b78;
7123
- --run-mix-waiting: #c16227;
7124
- --run-mix-failed: #cd342f;
7125
- --run-mix-in-flight: #00679e;
7126
- --run-mix-cancelled: #515367;
7127
- --glass-bg-strong: var(--depth-1);
7128
- --code-header-bg: hsl(var(--hsl-muted));
7129
- @supports (color: color-mix(in lab, red, red)) {
7130
- --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
7131
- }
7132
- --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
7133
- --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
7134
- --shadow-glow: none;
7135
- --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
7136
- }
7137
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7138
- --focus-border: hsl(var(--hsl-ring) / 0.8);
7139
- --focus-halo: hsl(var(--hsl-ring) / 0.18);
7140
- --focus-border-danger: var(--surface-danger-text);
7141
- @supports (color: color-mix(in lab, red, red)) {
7142
- --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
7143
- }
7144
- --focus-halo-danger: var(--surface-danger-text);
7145
- @supports (color: color-mix(in lab, red, red)) {
7146
- --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
7147
- }
7148
- --border-strong: hsl(var(--hsl-border));
7149
- @supports (color: color-mix(in lab, red, red)) {
7150
- --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
7151
- }
7152
- --hsl-raised: var(--hsl-secondary);
7153
- --hsl-raised-2: var(--hsl-popover);
7154
- --well-page: hsl(var(--hsl-background));
7155
- @supports (color: color-mix(in lab, red, red)) {
7156
- --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
7157
- }
7158
- --well-card: var(--well-page);
7159
- --well-raised: hsl(var(--hsl-card));
7160
- --well-raised-2: var(--well-raised);
7161
- --well: var(--well-page);
7162
- --field-border: hsl(var(--hsl-border));
7163
- @supports (color: color-mix(in lab, red, red)) {
7164
- --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
7165
- }
7166
- --shadow-raised: var(--shadow-card);
7167
- --shadow-well: 0 0 0 0 transparent;
7168
- --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7169
- --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
7170
- --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
7171
- --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
7172
- --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
7173
- --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
7174
- --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
7175
- --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
7176
- }
7177
- [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"] {
7178
- --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
7179
- --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
7180
- --well-page: hsl(var(--hsl-card));
7181
- --well-card: hsl(var(--hsl-background));
7182
- --well-raised-2: var(--well-card);
7183
- --edge-highlight: 0 0 0 0 transparent;
7184
- }
7185
- [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], [data-theme="intelligence"] {
7186
- --hsl-raised: var(--hsl-card);
7187
- --hsl-raised-2: var(--hsl-card);
7188
- --well-raised: var(--well-card);
7189
- --well-raised-2: var(--well-card);
7190
- --edge-highlight: 0 0 0 0 transparent;
7191
- }
7192
- [data-slot="card"] :where(*) {
7193
- --card: var(--hsl-raised);
7194
- --well: var(--well-card);
7195
- }
7196
- [data-slot="card"] [data-slot="card"] :where(*) {
7197
- --card: var(--hsl-raised-2);
7198
- --well: var(--well-raised);
7199
- }
7200
- [data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
7201
- --well: var(--well-raised-2);
7202
- }
7203
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7204
- --chart-ink: var(--text-primary);
7205
- --chart-ink-muted: var(--text-dim);
7206
- --chart-muted: var(--md3-outline);
7207
- --chart-grid: var(--md3-surface-container-high);
7208
- --chart-rule: var(--md3-outline-variant);
7209
- --chart-shade: var(--bg-hover);
7210
- --chart-accent: var(--brand-cool);
7211
- --chart-tier-c: #4a4a95;
7212
- --chart-tier-b: #5b5bd6;
7213
- --chart-tier-a: #8b87f0;
7214
- --chart-tier-s: #b1a9ff;
7215
- }
7216
- [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"] {
7217
- --chart-accent: hsl(var(--hsl-primary));
7218
- --chart-tier-c: #9b9ef0;
7219
- --chart-tier-b: #7c7fe3;
7220
- --chart-tier-a: #5b5bd6;
7221
- --chart-tier-s: #272962;
7222
- }
7223
- @media (prefers-reduced-motion: reduce) {
7224
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7225
- --duration-instant: 0ms;
7226
- --duration-fast: 0ms;
7227
- --duration-base: 0ms;
7228
- --duration-slow: 0ms;
7229
- --duration-stream: 0ms;
7230
- --duration-arrive: 0ms;
7231
- --stagger-step: 0ms;
6596
+ @layer theme.brand {
6597
+ :root, [data-sandbox-ui], [data-sandbox-theme="vault"], [data-sandbox-theme="dawn"], [data-theme="dark"], [data-theme="light"], [data-theme="aubergine"], [data-theme="aubergine-light"], [data-theme="arena"], [data-theme="arena-light"], [data-theme="super"], [data-theme="super-light"], [data-theme="tangle-dark"], [data-theme="tangle-light"], [data-theme="hospitality"], [data-theme="agents"], [data-theme="agents-light"], [data-theme="website"], .light, .dark {
6598
+ color-scheme: dark;
6599
+ --hsl-background: 246.6667 31.0345% 5.6863%;
6600
+ --hsl-input: 245 26.087% 9.0196%;
6601
+ --hsl-card: 244.2857 22.5806% 12.1569%;
6602
+ --hsl-secondary: 243.3333 20.4545% 17.2549%;
6603
+ --hsl-popover: 242.7273 18.9655% 22.7451%;
6604
+ --hsl-muted: var(--hsl-secondary);
6605
+ --hsl-accent: var(--hsl-secondary);
6606
+ --md3-surface-dim: hsl(240 33.3333% 2.3529%);
6607
+ --md3-surface-container-lowest: var(--md3-surface-dim);
6608
+ --md3-surface-bright: hsl(var(--hsl-popover));
6609
+ --md3-surface: hsl(var(--hsl-background));
6610
+ --md3-surface-container-low: hsl(var(--hsl-input));
6611
+ --md3-surface-container: hsl(var(--hsl-card));
6612
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
6613
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
6614
+ --md3-surface-variant: var(--md3-surface-container-high);
6615
+ --depth-1: var(--md3-surface);
6616
+ --depth-2: var(--md3-surface-container);
6617
+ --depth-3: var(--md3-surface-container-high);
6618
+ --depth-4: var(--md3-surface-container-highest);
6619
+ --bg-root: var(--depth-1);
6620
+ --bg-dark: var(--depth-1);
6621
+ --bg-card: var(--depth-2);
6622
+ --bg-elevated: var(--depth-4);
6623
+ --bg-section: var(--depth-1);
6624
+ --bg-input: hsl(var(--hsl-input));
6625
+ --sidebar-background: var(--hsl-input);
6626
+ --sidebar-accent: var(--hsl-secondary);
6627
+ --md3-inverse-surface: hsl(0 0% 100%);
6628
+ --md3-inverse-on-surface: hsl(0 0% 0%);
6629
+ --hsl-foreground: 0 0% 84.3137%;
6630
+ --hsl-muted-foreground: 0 0% 67.0588%;
6631
+ --text-primary: hsl(var(--hsl-foreground));
6632
+ --text-secondary: hsl(0 0% 74.1176%);
6633
+ --text-muted: hsl(0 0% 67.0588%);
6634
+ --text-dim: hsl(0 0% 60.3922%);
6635
+ --hsl-card-foreground: var(--hsl-foreground);
6636
+ --hsl-popover-foreground: var(--hsl-foreground);
6637
+ --hsl-secondary-foreground: var(--hsl-foreground);
6638
+ --hsl-accent-foreground: var(--hsl-foreground);
6639
+ --sidebar-foreground: var(--hsl-foreground);
6640
+ --sidebar-accent-foreground: var(--hsl-foreground);
6641
+ --md3-on-surface: var(--text-primary);
6642
+ --md3-on-surface-variant: var(--text-muted);
6643
+ --md3-outline: hsl(var(--hsl-muted-foreground));
6644
+ --hsl-border: 245 18.4615% 25.4902%;
6645
+ --md3-outline-variant: hsl(var(--hsl-border));
6646
+ --sidebar-border: var(--hsl-border);
6647
+ --border-subtle: hsl(var(--hsl-border));
6648
+ --border-default: hsl(var(--hsl-border));
6649
+ --border-hover: rgb(215 215 215 / 0.28);
6650
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
6651
+ --hsl-primary-foreground: 0 0% 100%;
6652
+ --hsl-ring: 245.5556 93.1034% 88.6275%;
6653
+ --brand-primary: hsl(245.5102 65.3333% 70.5882%);
6654
+ --brand-cool: hsl(246.0465 85.4305% 70.3922%);
6655
+ --accent-text: hsl(245.5556 93.1034% 88.6275%);
6656
+ --brand-purple: hsl(245.1429 94.5946% 92.7451%);
6657
+ --brand-strong: hsl(246 41.6667% 28.2353%);
6658
+ --brand-strong-text: hsl(0 0% 100%);
6659
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
6660
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
6661
+ --brand-glow: var(--accent-text);
6662
+ --brand-vibrant: var(--brand-primary);
6663
+ --btn-primary-bg: hsl(var(--hsl-primary));
6664
+ --btn-primary-hover: hsl(246.055 54.2289% 60.5882%);
6665
+ --btn-primary-text: hsl(0 0% 100%);
6666
+ --btn-cta-bg: var(--btn-primary-bg);
6667
+ --btn-cta-text: var(--btn-primary-text);
6668
+ --sidebar-primary: var(--hsl-primary);
6669
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
6670
+ --sidebar-ring: var(--hsl-ring);
6671
+ --md3-primary: var(--accent-text);
6672
+ --md3-primary-dim: var(--btn-primary-bg);
6673
+ --md3-primary-container: var(--btn-primary-bg);
6674
+ --md3-on-primary: hsl(0 0% 100%);
6675
+ --md3-on-primary-container: var(--brand-purple);
6676
+ --md3-primary-fixed: var(--accent-text);
6677
+ --md3-primary-fixed-dim: var(--brand-cool);
6678
+ --md3-secondary: var(--brand-purple);
6679
+ --md3-secondary-dim: var(--accent-text);
6680
+ --md3-secondary-container: var(--brand-strong);
6681
+ --md3-on-secondary: var(--brand-purple);
6682
+ --md3-on-secondary-container: var(--brand-purple);
6683
+ --md3-inverse-primary: var(--btn-primary-bg);
6684
+ --md3-surface-tint: var(--accent-text);
6685
+ --accent-surface-soft: var(--accent-text);
6686
+ @supports (color: color-mix(in lab, red, red)) {
6687
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
6688
+ }
6689
+ --accent-surface-strong: var(--btn-primary-bg);
6690
+ @supports (color: color-mix(in lab, red, red)) {
6691
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
6692
+ }
6693
+ --bg-hover: var(--accent-text);
6694
+ @supports (color: color-mix(in lab, red, red)) {
6695
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
6696
+ }
6697
+ --bg-selection: var(--btn-primary-bg);
6698
+ @supports (color: color-mix(in lab, red, red)) {
6699
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
6700
+ }
6701
+ --border-accent: var(--brand-cool);
6702
+ @supports (color: color-mix(in lab, red, red)) {
6703
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
6704
+ }
6705
+ --border-accent-hover: var(--brand-cool);
6706
+ @supports (color: color-mix(in lab, red, red)) {
6707
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
6708
+ }
6709
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
6710
+ --tangle-gradient-text: linear-gradient(135deg, var(--brand-purple), var(--accent-text));
6711
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
6712
+ --hsl-success: 155.1429 64.8148% 78.8235%;
6713
+ --hsl-warning: 38.5714 65.1163% 83.1373%;
6714
+ --hsl-destructive: 0 74.4681% 90.7843%;
6715
+ --hsl-destructive-foreground: 0 0% 0%;
6716
+ --hsl-info: 201.7021 66.1972% 86.0784%;
6717
+ --surface-success-text: hsl(var(--hsl-success));
6718
+ --surface-success-bg: #21342c;
6719
+ --surface-success-border: #496b5d;
6720
+ --surface-warning-text: hsl(var(--hsl-warning));
6721
+ --surface-warning-bg: #362f22;
6722
+ --surface-warning-border: #6e634f;
6723
+ --surface-danger-text: hsl(var(--hsl-destructive));
6724
+ --surface-danger-bg: #412a2a;
6725
+ --surface-danger-border: #785e5e;
6726
+ --surface-info-text: hsl(var(--hsl-info));
6727
+ --surface-info-bg: #243239;
6728
+ --surface-info-border: #546771;
6729
+ --status-running: var(--surface-success-text);
6730
+ --status-creating: var(--accent-text);
6731
+ --status-stopped: var(--surface-warning-text);
6732
+ --status-warm: var(--surface-orange-text);
6733
+ --status-cold: var(--surface-info-text);
6734
+ --status-error: var(--surface-danger-text);
6735
+ --status-deleted: var(--text-dim);
6736
+ --brand-emerald: var(--surface-success-text);
6737
+ --md3-tertiary: var(--surface-success-text);
6738
+ --md3-tertiary-container: var(--surface-success-bg);
6739
+ --md3-error: var(--surface-danger-text);
6740
+ --md3-error-dim: var(--md3-error);
6741
+ @supports (color: color-mix(in lab, red, red)) {
6742
+ --md3-error-dim: color-mix(in srgb, var(--md3-error) 85%, black);
6743
+ }
6744
+ --md3-error-container: var(--surface-danger-bg);
6745
+ --md3-on-error: hsl(var(--hsl-destructive-foreground));
6746
+ --md3-on-error-container: var(--surface-danger-text);
6747
+ --background: var(--hsl-background);
6748
+ --foreground: var(--hsl-foreground);
6749
+ --card: var(--hsl-card);
6750
+ --card-foreground: var(--hsl-card-foreground);
6751
+ --popover: var(--hsl-popover);
6752
+ --popover-foreground: var(--hsl-popover-foreground);
6753
+ --primary: var(--hsl-primary);
6754
+ --primary-foreground: var(--hsl-primary-foreground);
6755
+ --secondary: var(--hsl-secondary);
6756
+ --secondary-foreground: var(--hsl-secondary-foreground);
6757
+ --muted: var(--hsl-muted);
6758
+ --muted-foreground: var(--hsl-muted-foreground);
6759
+ --accent: var(--hsl-accent);
6760
+ --accent-foreground: var(--hsl-accent-foreground);
6761
+ --destructive: var(--hsl-destructive);
6762
+ --destructive-foreground: var(--hsl-destructive-foreground);
6763
+ --border: var(--hsl-border);
6764
+ --input: var(--hsl-muted-foreground);
6765
+ --ring: var(--hsl-ring);
6766
+ --success: var(--hsl-success);
6767
+ --warning: var(--hsl-warning);
6768
+ --error: var(--hsl-destructive);
6769
+ --info: var(--hsl-info);
6770
+ --tone-violet-bg: hsl(270.8108 31.6239% 22.9412%);
6771
+ --tone-violet-bg-hover: hsl(271.4286 31.3433% 26.2745%);
6772
+ --tone-violet-bg-selected: hsl(271.9149 31.5436% 29.2157%);
6773
+ --tone-violet-border: hsl(272.1739 27.49% 49.2157%);
6774
+ --tone-violet-border-selected: hsl(272.4 79.3651% 75.2941%);
6775
+ --tone-violet-text: hsl(272 81.0811% 85.4902%);
6776
+ --tone-violet-icon: hsl(272.4 79.3651% 75.2941%);
6777
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
6778
+ --tone-violet-ring: 272.5424 80.8219% 85.6863%;
6779
+ --tone-violet-mark: hsl(272.4 79.3651% 75.2941%);
6780
+ --tone-violet-line: hsl(272.4 79.3651% 75.2941%);
6781
+ --tone-violet-ink: hsl(272.5424 80.8219% 85.6863%);
6782
+ --tone-orange-bg: hsl(23.2258 32.6316% 18.6275%);
6783
+ --tone-orange-bg-hover: hsl(21.6667 32.7273% 21.5686%);
6784
+ --tone-orange-bg-selected: hsl(22.5 32.7869% 23.9216%);
6785
+ --tone-orange-border: hsl(22.4176 43.5407% 40.9804%);
6786
+ --tone-orange-border-selected: hsl(22.2517 79.8942% 62.9412%);
6787
+ --tone-orange-text: hsl(22.5 80% 78.4314%);
6788
+ --tone-orange-icon: hsl(22.2517 79.8942% 62.9412%);
6789
+ --tone-orange-fill: 22 79.7872% 36.8627%;
6790
+ --tone-orange-ring: 22.1429 80.7692% 79.6078%;
6791
+ --tone-orange-mark: hsl(22.2517 79.8942% 62.9412%);
6792
+ --tone-orange-line: hsl(22.2517 79.8942% 62.9412%);
6793
+ --tone-orange-ink: hsl(22.1429 80.7692% 79.6078%);
6794
+ --tone-teal-bg: hsl(170.7692 32.5% 15.6863%);
6795
+ --tone-teal-bg-hover: hsl(172 32.6087% 18.0392%);
6796
+ --tone-teal-bg-selected: hsl(172.5 31.3725% 20%);
6797
+ --tone-teal-border: hsl(171.7895 66.4336% 28.0392%);
6798
+ --tone-teal-border-selected: hsl(171.9512 79.6117% 40.3922%);
6799
+ --tone-teal-text: hsl(171.9 80% 49.0196%);
6800
+ --tone-teal-icon: hsl(171.9512 79.6117% 40.3922%);
6801
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
6802
+ --tone-teal-ring: 171.7647 80.315% 49.8039%;
6803
+ --tone-teal-mark: hsl(171.9512 79.6117% 40.3922%);
6804
+ --tone-teal-line: hsl(171.9512 79.6117% 40.3922%);
6805
+ --tone-teal-ink: hsl(171.7647 80.315% 49.8039%);
6806
+ --tone-blue-bg: hsl(208.125 32.6531% 19.2157%);
6807
+ --tone-blue-bg-hover: hsl(208.3333 32.1429% 21.9608%);
6808
+ --tone-blue-bg-selected: hsl(208.5 31.746% 24.7059%);
6809
+ --tone-blue-border: hsl(209.3023 39.4495% 42.7451%);
6810
+ --tone-blue-border-selected: hsl(209.1429 80.4598% 65.8824%);
6811
+ --tone-blue-text: hsl(208.9157 80.5825% 79.8039%);
6812
+ --tone-blue-icon: hsl(209.1429 80.4598% 65.8824%);
6813
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
6814
+ --tone-blue-ring: 208.4211 79.1667% 81.1765%;
6815
+ --tone-blue-mark: hsl(209.1429 80.4598% 65.8824%);
6816
+ --tone-blue-line: hsl(209.1429 80.4598% 65.8824%);
6817
+ --tone-blue-ink: hsl(208.4211 79.1667% 81.1765%);
6818
+ --tone-pink-bg: hsl(322.9412 31.4815% 21.1765%);
6819
+ --tone-pink-bg-hover: hsl(322.5 32.2581% 24.3137%);
6820
+ --tone-pink-bg-selected: hsl(323.1818 31.8841% 27.0588%);
6821
+ --tone-pink-border: hsl(322.7027 31.0924% 46.6667%);
6822
+ --tone-pink-border-selected: hsl(322.4348 80.4196% 71.9608%);
6823
+ --tone-pink-text: hsl(322.7273 80.4878% 83.9216%);
6824
+ --tone-pink-icon: hsl(322.4348 80.4196% 71.9608%);
6825
+ --tone-pink-fill: 322 80.3571% 43.9216%;
6826
+ --tone-pink-ring: 322.7273 80.4878% 83.9216%;
6827
+ --tone-pink-mark: hsl(322.4348 80.4196% 71.9608%);
6828
+ --tone-pink-line: hsl(322.4348 80.4196% 71.9608%);
6829
+ --tone-pink-ink: hsl(322.7273 80.4878% 83.9216%);
6830
+ --tone-brown-bg: hsl(24 31.9149% 18.4314%);
6831
+ --tone-brown-bg-hover: hsl(24.7059 31.4815% 21.1765%);
6832
+ --tone-brown-bg-selected: hsl(24.6154 32.2314% 23.7255%);
6833
+ --tone-brown-border: hsl(24.2553 22.2749% 41.3725%);
6834
+ --tone-brown-border-selected: hsl(24 35.5191% 64.1176%);
6835
+ --tone-brown-text: hsl(24.6154 35.1351% 78.2353%);
6836
+ --tone-brown-icon: hsl(24 35.5191% 64.1176%);
6837
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
6838
+ --tone-brown-ring: 25 35.2941% 80%;
6839
+ --tone-brown-mark: hsl(24 35.5191% 64.1176%);
6840
+ --tone-brown-line: hsl(24 35.5191% 64.1176%);
6841
+ --tone-brown-ink: hsl(25 35.2941% 80%);
6842
+ --tone-cyan-bg: hsl(192.8571 32.5581% 16.8627%);
6843
+ --tone-cyan-bg-hover: hsl(191.25 32.6531% 19.2157%);
6844
+ --tone-cyan-bg-selected: hsl(191.6667 32.7273% 21.5686%);
6845
+ --tone-cyan-border: hsl(192.3214 68.2927% 32.1569%);
6846
+ --tone-cyan-border-selected: hsl(192.0619 80.1653% 47.451%);
6847
+ --tone-cyan-text: hsl(191.7188 80% 68.6275%);
6848
+ --tone-cyan-icon: hsl(192.0619 80.1653% 47.451%);
6849
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
6850
+ --tone-cyan-ring: 191.8966 79.4521% 71.3725%;
6851
+ --tone-cyan-mark: hsl(192.0619 80.1653% 47.451%);
6852
+ --tone-cyan-line: hsl(192.0619 80.1653% 47.451%);
6853
+ --tone-cyan-ink: hsl(191.8966 79.4521% 71.3725%);
6854
+ --tone-lime-bg: hsl(82.5 30.7692% 15.2941%);
6855
+ --tone-lime-bg-hover: hsl(84.8276 32.5843% 17.451%);
6856
+ --tone-lime-bg-selected: hsl(84.375 32% 19.6078%);
6857
+ --tone-lime-border: hsl(84 52.6316% 29.8039%);
6858
+ --tone-lime-border-selected: hsl(84.2647 60.177% 44.3137%);
6859
+ --tone-lime-text: hsl(83.6975 59.799% 60.9804%);
6860
+ --tone-lime-icon: hsl(84.2647 60.177% 44.3137%);
6861
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
6862
+ --tone-lime-ring: 84 60.4396% 64.3137%;
6863
+ --tone-lime-mark: hsl(84.2647 60.177% 44.3137%);
6864
+ --tone-lime-line: hsl(84.2647 60.177% 44.3137%);
6865
+ --tone-lime-ink: hsl(84 60.4396% 64.3137%);
6866
+ --surface-violet-bg: var(--tone-violet-bg);
6867
+ --surface-violet-border: var(--tone-violet-border);
6868
+ --surface-violet-text: var(--tone-violet-text);
6869
+ --surface-orange-bg: var(--tone-orange-bg);
6870
+ --surface-orange-border: var(--tone-orange-border);
6871
+ --surface-orange-text: var(--tone-orange-text);
6872
+ --surface-teal-bg: var(--tone-teal-bg);
6873
+ --surface-teal-border: var(--tone-teal-border);
6874
+ --surface-teal-text: var(--tone-teal-text);
6875
+ --run-mix-succeeded: hsl(154.9315 59.8361% 47.8431%);
6876
+ --run-mix-waiting: hsl(37.7483 60.1594% 49.2157%);
6877
+ --run-mix-failed: hsl(0 60.4278% 63.3333%);
6878
+ --run-mix-in-flight: hsl(200.8889 60% 44.1176%);
6879
+ --run-mix-cancelled: hsl(229.2857 11.7647% 46.6667%);
6880
+ --surface-neutral-bg: var(--depth-3);
6881
+ --surface-neutral-border: var(--border-subtle);
6882
+ --surface-neutral-text: var(--text-muted);
6883
+ --glass-bg: var(--depth-2);
6884
+ --glass-bg-strong: var(--depth-3);
6885
+ --glass-border: var(--border-subtle);
6886
+ --glass-border-hover: var(--border-hover);
6887
+ --glass-blur: 0px;
6888
+ --mesh-teal: transparent;
6889
+ --mesh-violet: transparent;
6890
+ --mesh-blue: transparent;
6891
+ --code-header-bg: hsl(var(--hsl-background));
6892
+ --syntax-foreground: var(--text-primary);
6893
+ --syntax-variable: var(--text-secondary);
6894
+ --syntax-comment: var(--text-dim);
6895
+ --syntax-keyword: var(--tone-violet-text);
6896
+ --syntax-meta: var(--accent-text);
6897
+ --syntax-function: var(--surface-info-text);
6898
+ --syntax-string: var(--surface-success-text);
6899
+ --syntax-number: var(--surface-warning-text);
6900
+ --syntax-error: var(--surface-danger-text);
6901
+ --code-keyword: var(--syntax-keyword);
6902
+ --code-string: var(--syntax-string);
6903
+ --code-function: var(--syntax-function);
6904
+ --code-number: var(--syntax-number);
6905
+ --code-success: var(--surface-success-text);
6906
+ --code-comment: var(--syntax-comment);
6907
+ --code-error: var(--syntax-error);
6908
+ --shadow-color: 0 0% 0%;
6909
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.3);
6910
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.45);
6911
+ --shadow-glow: none;
6912
+ --shadow-accent: var(--shadow-card);
6913
+ --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.3), 0 16px 40px hsl(var(--shadow-color) / 0.5);
6914
+ --scrim: rgb(0 0 0 / 0.4);
6915
+ --scrim-strong: rgb(0 0 0 / 0.72);
6916
+ --on-media: #ffffff;
6917
+ --shadow-status-running: none;
6918
+ --shadow-status-creating: none;
6919
+ --shadow-status-error: none;
6920
+ --radius-sm: 6px;
6921
+ --radius-md: 8px;
6922
+ --radius-lg: 10px;
6923
+ --radius-xl: 12px;
6924
+ --radius-pill: 999px;
6925
+ --radius-full: 999px;
6926
+ --radius-composer: 26px;
6927
+ --radius-tag: 4px;
6928
+ --radius-control: var(--radius-md);
6929
+ --radius-card: var(--radius-xl);
6930
+ --radius-container: 16px;
6931
+ --radius-chip: var(--radius-control);
6932
+ --radius-field: var(--radius-card);
6933
+ --radius-panel: var(--radius-container);
6934
+ --radius-cover: 20px;
6935
+ --radius-sheet: 24px;
6936
+ --radius: 0.5rem;
6937
+ --control-height: 2.25rem;
6938
+ --control-height-sm: 2rem;
6939
+ --control-height-lg: 2.75rem;
6940
+ --control-text-sm: 0.75rem;
6941
+ --control-text-md: 0.875rem;
6942
+ --control-text-lg: 1rem;
6943
+ --font-size-label: 0.875rem;
6944
+ --font-size-help: 0.75rem;
6945
+ --panel-padding: 1rem;
6946
+ --content-max-width: 80rem;
6947
+ --shell-header-height: 3.5rem;
6948
+ --shell-inset-gutter: 0.5rem;
6949
+ --transcript-font-size: 1rem;
6950
+ --transcript-line-height: var(--line-height-base);
6951
+ --font-size-xs: 0.75rem;
6952
+ --font-size-sm: 0.875rem;
6953
+ --font-size-base: 1rem;
6954
+ --font-size-lg: 1.125rem;
6955
+ --font-size-xl: 1.25rem;
6956
+ --font-size-2xl: 1.5rem;
6957
+ --font-size-3xl: 1.875rem;
6958
+ --font-size-4xl: 2.25rem;
6959
+ --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);
6960
+ --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem);
6961
+ --line-height-tight: 1.3;
6962
+ --line-height-base: 1.6;
6963
+ --line-height-relaxed: 1.75;
6964
+ --line-height-display: 1.05;
6965
+ --line-height-heading: 1.15;
6966
+ --tracking-tight: -0.02em;
6967
+ --tracking-snug: -0.01em;
6968
+ --tracking-wide: 0.08em;
6969
+ --tracking-display: -0.03em;
6970
+ --hero-gutter: 1.5rem;
6971
+ --hero-padding-top: clamp(5rem, 3rem + 5vw, 7rem);
6972
+ --hero-padding-bottom: clamp(4rem, 2rem + 5vw, 6rem);
6973
+ --display-max-width: 56rem;
6974
+ --reading-max-width: 42rem;
6975
+ --hero-action-gap: 0.75rem;
6976
+ --hero-content-gap: 1.5rem;
6977
+ --display-control-height: 2.875rem;
6978
+ --display-control-radius: 0.625rem;
6979
+ --display-control-font-size: 0.9375rem;
6980
+ --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
6981
+ --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
6982
+ --hero-grid-pitch: 3.5rem;
6983
+ --hero-atmosphere-opacity: 0.16;
6984
+ --hero-knot-opacity: 0.07;
6985
+ --duration-expressive-entrance: 300ms;
6986
+ --duration-expressive-ambient: 14s;
6987
+ --ease-expressive: cubic-bezier(0.16, 1, 0.3, 1);
6988
+ --avatar-size: 2rem;
6989
+ --timeline-dot-size: 0.625rem;
6990
+ --indicator-dot-size: 0.25rem;
6991
+ --code-padding-x: 0.75rem;
6992
+ --code-padding-y: 0.625rem;
6993
+ --code-font-size: 0.8125rem;
6994
+ --code-line-height: 1.5;
6995
+ --chat-message-px: 0.875rem;
6996
+ --chat-message-py: 0.5rem;
6997
+ --chat-input-py: 0.625rem;
6998
+ --card-padding: 1.25rem;
6999
+ --tool-card-px: 0.75rem;
7000
+ --tool-card-py: 0.5rem;
7001
+ --tool-icon-size: 1.75rem;
7002
+ --duration-instant: 90ms;
7003
+ --duration-fast: 150ms;
7004
+ --duration-base: 240ms;
7005
+ --duration-slow: 360ms;
7006
+ --duration-stream: 420ms;
7007
+ --duration-arrive: 600ms;
7008
+ --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
7009
+ --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
7010
+ --ease-exit: cubic-bezier(0.4, 0, 1, 1);
7011
+ --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
7232
7012
  --motion-control: var(--duration-fast) var(--ease-standard);
7233
7013
  --motion-surface: var(--duration-base) var(--ease-entrance);
7234
7014
  --motion-dismiss: var(--duration-instant) var(--ease-exit);
7235
7015
  --motion-stream: var(--duration-stream) var(--ease-expo);
7236
7016
  --motion-arrive: var(--duration-arrive) var(--ease-expo);
7017
+ --duration-ambient: 2000ms;
7018
+ --motion-ambient: var(--duration-ambient) ease-in-out;
7019
+ --interaction-feedback-budget: 100ms;
7020
+ --interaction-pending-delay: 200ms;
7021
+ --interaction-long-work-delay: 1000ms;
7022
+ --interaction-mutation-budget: 500ms;
7023
+ --stagger-step: 50ms;
7024
+ --stagger-index: 0;
7025
+ --arrive-distance: 8px;
7026
+ --stream-blur: 4px;
7027
+ --transition-fast: 0.1s ease;
7028
+ --transition-default: 0.16s ease;
7029
+ --transition-medium: 0.24s ease;
7030
+ --font-sans: "Inter Variable", "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
7031
+ --font-display: "Inter Variable", "Inter", "Geist", sans-serif;
7032
+ --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
7033
+ }
7034
+ [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 {
7035
+ color-scheme: light;
7036
+ --hsl-background: 225 26.6667% 94.1176%;
7037
+ --hsl-input: 231.4286 46.6667% 97.0588%;
7038
+ --hsl-card: 0 0% 100%;
7039
+ --hsl-secondary: 225 28.5714% 94.5098%;
7040
+ --hsl-popover: 0 0% 100%;
7041
+ --md3-surface-dim: hsl(231.4286 11.4754% 88.0392%);
7042
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7043
+ --md3-surface-bright: hsl(var(--hsl-popover));
7044
+ --sidebar-background: var(--hsl-card);
7045
+ --md3-inverse-surface: hsl(0 0% 18.0392%);
7046
+ --md3-inverse-on-surface: hsl(0 0% 100%);
7047
+ --hsl-foreground: 0 0% 24.7059%;
7048
+ --hsl-muted-foreground: 0 0% 36.4706%;
7049
+ --text-secondary: hsl(0 0% 31.3725%);
7050
+ --text-muted: hsl(0 0% 36.4706%);
7051
+ --text-dim: hsl(0 0% 41.9608%);
7052
+ --md3-outline: hsl(var(--hsl-muted-foreground));
7053
+ --hsl-border: 222.8571 6.6667% 79.4118%;
7054
+ --border-hover: rgb(63 63 63 / 0.28);
7055
+ --hsl-ring: 245.9504 54.2601% 56.2745%;
7056
+ --brand-primary: hsl(245.9091 64.7059% 60%);
7057
+ --brand-purple: hsl(246.5217 92% 70.5882%);
7058
+ --accent-text: hsl(246.2264 92.1739% 54.902%);
7059
+ --md3-primary: var(--accent-text);
7060
+ --md3-primary-dim: var(--btn-primary-bg);
7061
+ --md3-on-primary-container: hsl(0 0% 100%);
7062
+ --md3-primary-fixed: hsl(246.9231 92.8571% 94.5098%);
7063
+ --md3-primary-fixed-dim: var(--md3-primary-fixed);
7064
+ @supports (color: color-mix(in lab, red, red)) {
7065
+ --md3-primary-fixed-dim: color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text));
7066
+ }
7067
+ --md3-secondary: var(--accent-text);
7068
+ --md3-secondary-dim: var(--btn-primary-bg);
7069
+ --md3-secondary-container: var(--md3-primary-fixed);
7070
+ --md3-on-secondary: hsl(0 0% 100%);
7071
+ --md3-on-secondary-container: var(--accent-text);
7072
+ --md3-inverse-primary: hsl(246.0759 64.2276% 75.8824%);
7073
+ --md3-surface-tint: var(--accent-text);
7074
+ --accent-surface-soft: var(--accent-text);
7075
+ @supports (color: color-mix(in lab, red, red)) {
7076
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
7077
+ }
7078
+ --accent-surface-strong: var(--btn-primary-bg);
7079
+ @supports (color: color-mix(in lab, red, red)) {
7080
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7081
+ }
7082
+ --bg-selection: var(--btn-primary-bg);
7083
+ @supports (color: color-mix(in lab, red, red)) {
7084
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7085
+ }
7086
+ --border-accent: var(--brand-cool);
7087
+ @supports (color: color-mix(in lab, red, red)) {
7088
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
7089
+ }
7090
+ --border-accent-hover: var(--brand-cool);
7091
+ @supports (color: color-mix(in lab, red, red)) {
7092
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
7093
+ }
7094
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7095
+ --tangle-gradient-text: var(--tangle-gradient);
7096
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
7097
+ --hsl-success: 154.8148 64.8% 24.5098%;
7098
+ --hsl-warning: 38.2979 65.2778% 28.2353%;
7099
+ --hsl-destructive: 0 75.1244% 39.4118%;
7100
+ --hsl-destructive-foreground: 0 0% 100%;
7101
+ --hsl-info: 201.1429 65.2174% 31.5686%;
7102
+ --surface-success-bg: #f1f6f4;
7103
+ --surface-success-border: #afcbc0;
7104
+ --surface-warning-bg: #f7f5f1;
7105
+ --surface-warning-border: #d1c5b0;
7106
+ --surface-danger-bg: #faf1f1;
7107
+ --surface-danger-border: #e4b0b0;
7108
+ --surface-info-bg: #f1f5f8;
7109
+ --surface-info-border: #b1c8d6;
7110
+ --tone-violet-bg: hsl(272.3077 86.6667% 97.0588%);
7111
+ --tone-violet-bg-hover: hsl(272.7273 78.5714% 94.5098%);
7112
+ --tone-violet-bg-selected: hsl(270.9091 80.4878% 91.9608%);
7113
+ --tone-violet-border: hsl(272.5301 80.5825% 79.8039%);
7114
+ --tone-violet-border-selected: hsl(272.1569 80.1047% 62.549%);
7115
+ --tone-violet-text: hsl(272.1212 79.8387% 51.3725%);
7116
+ --tone-violet-icon: hsl(272.1569 80.1047% 62.549%);
7117
+ --tone-violet-fill: 272.1081 80.0866% 54.7059%;
7118
+ --tone-violet-ring: 272.1081 80.0866% 54.7059%;
7119
+ --tone-violet-mark: hsl(272.1569 80.1047% 62.549%);
7120
+ --tone-violet-line: hsl(272.1569 80.1047% 62.549%);
7121
+ --tone-violet-ink: hsl(271.8857 79.9087% 42.9412%);
7122
+ --tone-orange-bg: hsl(20 42.8571% 95.8824%);
7123
+ --tone-orange-bg-hover: hsl(20 47.3684% 92.549%);
7124
+ --tone-orange-bg-selected: hsl(20 47.3684% 88.8235%);
7125
+ --tone-orange-border: hsl(22.1053 62.9139% 70.3922%);
7126
+ --tone-orange-border-selected: hsl(21.9672 79.9127% 44.902%);
7127
+ --tone-orange-text: hsl(22.0833 80% 35.2941%);
7128
+ --tone-orange-icon: hsl(21.9672 79.9127% 44.902%);
7129
+ --tone-orange-fill: 22 79.7872% 36.8627%;
7130
+ --tone-orange-ring: 22 79.7872% 36.8627%;
7131
+ --tone-orange-mark: hsl(21.9672 79.9127% 44.902%);
7132
+ --tone-orange-line: hsl(21.9672 79.9127% 44.902%);
7133
+ --tone-orange-ink: hsl(22.314 80.1325% 29.6078%);
7134
+ --tone-teal-bg: hsl(171.4286 28% 95.098%);
7135
+ --tone-teal-bg-hover: hsl(175 26.087% 90.9804%);
7136
+ --tone-teal-bg-selected: hsl(170.5263 27.5362% 86.4706%);
7137
+ --tone-teal-border: hsl(171.8182 35.1064% 63.1373%);
7138
+ --tone-teal-border-selected: hsl(172.32 79.6178% 30.7843%);
7139
+ --tone-teal-text: hsl(172.1212 80.4878% 24.1176%);
7140
+ --tone-teal-icon: hsl(172.32 79.6178% 30.7843%);
7141
+ --tone-teal-fill: 172.2772 79.5276% 24.902%;
7142
+ --tone-teal-ring: 172.2772 79.5276% 24.902%;
7143
+ --tone-teal-mark: hsl(172.32 79.6178% 30.7843%);
7144
+ --tone-teal-line: hsl(172.32 79.6178% 30.7843%);
7145
+ --tone-teal-ink: hsl(172.0482 80.5825% 20.1961%);
7146
+ --tone-blue-bg: hsl(210 50% 96.0784%);
7147
+ --tone-blue-bg-hover: hsl(208.4211 51.3514% 92.7451%);
7148
+ --tone-blue-bg-selected: hsl(208.9655 52.7273% 89.2157%);
7149
+ --tone-blue-border: hsl(209.4231 74.2857% 72.549%);
7150
+ --tone-blue-border-selected: hsl(209.0909 79.8387% 48.6275%);
7151
+ --tone-blue-text: hsl(209.2308 79.5918% 38.4314%);
7152
+ --tone-blue-icon: hsl(209.0909 79.8387% 48.6275%);
7153
+ --tone-blue-fill: 209.0683 80.0995% 39.4118%;
7154
+ --tone-blue-ring: 209.0683 80.0995% 39.4118%;
7155
+ --tone-blue-mark: hsl(209.0909 79.8387% 48.6275%);
7156
+ --tone-blue-line: hsl(209.0909 79.8387% 48.6275%);
7157
+ --tone-blue-ink: hsl(209.0909 80.4878% 32.1569%);
7158
+ --tone-pink-bg: hsl(325 66.6667% 96.4706%);
7159
+ --tone-pink-bg-hover: hsl(321.8182 64.7059% 93.3333%);
7160
+ --tone-pink-bg-selected: hsl(320.625 61.5385% 89.8039%);
7161
+ --tone-pink-border: hsl(322.2222 79.4118% 73.3333%);
7162
+ --tone-pink-border-selected: hsl(321.7647 80.315% 49.8039%);
7163
+ --tone-pink-text: hsl(321.9876 80.0995% 39.4118%);
7164
+ --tone-pink-icon: hsl(321.7647 80.315% 49.8039%);
7165
+ --tone-pink-fill: 322 80.3571% 43.9216%;
7166
+ --tone-pink-ring: 322 80.3571% 43.9216%;
7167
+ --tone-pink-mark: hsl(321.7647 80.315% 49.8039%);
7168
+ --tone-pink-line: hsl(321.7647 80.315% 49.8039%);
7169
+ --tone-pink-ink: hsl(321.9403 79.7619% 32.9412%);
7170
+ --tone-brown-bg: hsl(15 20% 96.0784%);
7171
+ --tone-brown-bg-hover: hsl(22.5 21.0526% 92.549%);
7172
+ --tone-brown-bg-selected: hsl(23.0769 22.807% 88.8235%);
7173
+ --tone-brown-border: hsl(23.4783 32.3944% 72.1569%);
7174
+ --tone-brown-border-selected: hsl(23.8636 35.7724% 48.2353%);
7175
+ --tone-brown-text: hsl(24.3478 35.7513% 37.8431%);
7176
+ --tone-brown-icon: hsl(23.8636 35.7724% 48.2353%);
7177
+ --tone-brown-fill: 23.662 36.0406% 38.6275%;
7178
+ --tone-brown-ring: 23.662 36.0406% 38.6275%;
7179
+ --tone-brown-mark: hsl(23.8636 35.7724% 48.2353%);
7180
+ --tone-brown-line: hsl(23.8636 35.7724% 48.2353%);
7181
+ --tone-brown-ink: hsl(23.3898 36.1963% 31.9608%);
7182
+ --tone-cyan-bg: hsl(187.5 33.3333% 95.2941%);
7183
+ --tone-cyan-bg-hover: hsl(192 34.8837% 91.5686%);
7184
+ --tone-cyan-bg-selected: hsl(193.6364 34.375% 87.451%);
7185
+ --tone-cyan-border: hsl(192.3077 44.8276% 65.8824%);
7186
+ --tone-cyan-border-selected: hsl(192.1622 80.4348% 36.0784%);
7187
+ --tone-cyan-text: hsl(192.4138 79.4521% 28.6275%);
7188
+ --tone-cyan-icon: hsl(192.1622 80.4348% 36.0784%);
7189
+ --tone-cyan-fill: 192.3967 80.1325% 29.6078%;
7190
+ --tone-cyan-ring: 192.3967 80.1325% 29.6078%;
7191
+ --tone-cyan-mark: hsl(192.1622 80.4348% 36.0784%);
7192
+ --tone-cyan-line: hsl(192.1622 80.4348% 36.0784%);
7193
+ --tone-cyan-ink: hsl(192.2449 80.3279% 23.9216%);
7194
+ --tone-lime-bg: hsl(90 25% 95.2941%);
7195
+ --tone-lime-bg-hover: hsl(84 22.7273% 91.3725%);
7196
+ --tone-lime-bg-selected: hsl(84 22.3881% 86.8627%);
7197
+ --tone-lime-border: hsl(84.4444 30% 64.7059%);
7198
+ --tone-lime-border-selected: hsl(83.8835 59.5376% 33.9216%);
7199
+ --tone-lime-text: hsl(83.7037 60% 26.4706%);
7200
+ --tone-lime-icon: hsl(83.8835 59.5376% 33.9216%);
7201
+ --tone-lime-fill: 84.5783 59.7122% 27.2549%;
7202
+ --tone-lime-ring: 84.5783 59.7122% 27.2549%;
7203
+ --tone-lime-mark: hsl(83.8835 59.5376% 33.9216%);
7204
+ --tone-lime-line: hsl(83.8835 59.5376% 33.9216%);
7205
+ --tone-lime-ink: hsl(83.8235 59.6491% 22.3529%);
7206
+ --surface-violet-bg: var(--tone-violet-bg);
7207
+ --surface-violet-border: var(--tone-violet-border);
7208
+ --surface-violet-text: var(--tone-violet-text);
7209
+ --surface-orange-bg: var(--tone-orange-bg);
7210
+ --surface-orange-border: var(--tone-orange-border);
7211
+ --surface-orange-text: var(--tone-orange-text);
7212
+ --surface-teal-bg: var(--tone-teal-bg);
7213
+ --surface-teal-border: var(--tone-teal-border);
7214
+ --surface-teal-text: var(--tone-teal-text);
7215
+ --run-mix-succeeded: hsl(154.8718 60% 38.2353%);
7216
+ --run-mix-waiting: hsl(38.3193 60.4061% 38.6275%);
7217
+ --run-mix-failed: hsl(0 59.6838% 49.6078%);
7218
+ --run-mix-in-flight: hsl(200.7692 60.4651% 33.7255%);
7219
+ --run-mix-cancelled: hsl(228.5714 11.8644% 34.7059%);
7220
+ --glass-bg-strong: var(--depth-1);
7221
+ --code-header-bg: hsl(var(--hsl-muted));
7222
+ @supports (color: color-mix(in lab, red, red)) {
7223
+ --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
7224
+ }
7225
+ --shadow-color: 220 40% 8%;
7226
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06);
7227
+ --shadow-dropdown: 0 8px 30px hsl(var(--shadow-color) / 0.1);
7228
+ --shadow-overlay: 0 2px 6px hsl(var(--shadow-color) / 0.1), 0 16px 40px hsl(var(--shadow-color) / 0.16);
7229
+ }
7230
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7231
+ --focus-border: hsl(var(--hsl-ring) / 0.8);
7232
+ --focus-halo: hsl(var(--hsl-ring) / 0.18);
7233
+ --focus-border-danger: var(--surface-danger-text);
7234
+ @supports (color: color-mix(in lab, red, red)) {
7235
+ --focus-border-danger: color-mix(in srgb, var(--surface-danger-text) 80%, transparent);
7236
+ }
7237
+ --focus-halo-danger: var(--surface-danger-text);
7238
+ @supports (color: color-mix(in lab, red, red)) {
7239
+ --focus-halo-danger: color-mix(in srgb, var(--surface-danger-text) 18%, transparent);
7240
+ }
7241
+ --border-strong: hsl(var(--hsl-border));
7242
+ @supports (color: color-mix(in lab, red, red)) {
7243
+ --border-strong: color-mix(in srgb, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 20%);
7244
+ }
7245
+ --hsl-raised: var(--hsl-secondary);
7246
+ --hsl-raised-2: var(--hsl-popover);
7247
+ --well-page: hsl(var(--hsl-background));
7248
+ @supports (color: color-mix(in lab, red, red)) {
7249
+ --well-page: color-mix(in oklab, hsl(var(--hsl-background)) 70%, black);
7250
+ }
7251
+ --well-card: var(--well-page);
7252
+ --well-raised: hsl(var(--hsl-card));
7253
+ --well-raised-2: var(--well-raised);
7254
+ --well: var(--well-page);
7255
+ --field-border: hsl(var(--hsl-border));
7256
+ @supports (color: color-mix(in lab, red, red)) {
7257
+ --field-border: color-mix(in oklab, hsl(var(--hsl-border)), hsl(var(--hsl-foreground)) 45%);
7258
+ }
7259
+ --shadow-raised: var(--shadow-card);
7260
+ --shadow-well: 0 0 0 0 transparent;
7261
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7262
+ --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
7263
+ --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
7264
+ --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
7265
+ --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
7266
+ --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
7267
+ --ix-sel-bg: hsl(var(--hsl-ring) / 0.18);
7268
+ --ix-hover-bg: hsl(var(--hsl-ring) / 0.08);
7269
+ }
7270
+ [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"] {
7271
+ --ix-sel-bg: hsl(var(--hsl-ring) / 0.13);
7272
+ --ix-hover-bg: hsl(var(--hsl-ring) / 0.07);
7273
+ --well-page: hsl(var(--hsl-card));
7274
+ --well-card: hsl(var(--hsl-background));
7275
+ --well-raised-2: var(--well-card);
7276
+ --edge-highlight: 0 0 0 0 transparent;
7277
+ }
7278
+ [data-slot="card"] :where(*) {
7279
+ --card: var(--hsl-raised);
7280
+ --well: var(--well-card);
7281
+ }
7282
+ [data-slot="card"] [data-slot="card"] :where(*) {
7283
+ --card: var(--hsl-raised-2);
7284
+ --well: var(--well-raised);
7285
+ }
7286
+ [data-slot="card"] [data-slot="card"] [data-slot="card"] :where(*) {
7287
+ --well: var(--well-raised-2);
7288
+ }
7289
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7290
+ --chart-ink: var(--text-primary);
7291
+ --chart-ink-muted: var(--text-dim);
7292
+ --chart-muted: var(--md3-outline);
7293
+ --chart-grid: var(--md3-surface-container-high);
7294
+ --chart-rule: var(--md3-outline-variant);
7295
+ --chart-shade: var(--bg-hover);
7296
+ --chart-accent: var(--brand-cool);
7297
+ --chart-tier-c: hsl(246.1017 55.1402% 41.9608%);
7298
+ --chart-tier-b: hsl(246.1905 54.7826% 54.902%);
7299
+ --chart-tier-a: hsl(245.3933 54.6012% 68.0392%);
7300
+ --chart-tier-s: hsl(245.6604 54.6392% 80.9804%);
7301
+ }
7302
+ [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"] {
7303
+ --chart-accent: hsl(var(--hsl-primary));
7304
+ --chart-tier-c: hsl(246.2687 54.4715% 75.8824%);
7305
+ --chart-tier-b: hsl(246.055 54.7739% 60.9804%);
7306
+ --chart-tier-a: hsl(246.0465 54.8936% 46.0784%);
7307
+ --chart-tier-s: hsl(245.5172 54.717% 31.1765%);
7308
+ }
7309
+ @keyframes tangle-breathe {
7310
+ 50% {
7311
+ opacity: 0.45;
7312
+ }
7313
+ }
7314
+ @media (prefers-reduced-motion: reduce) {
7315
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7316
+ --duration-instant: 0ms;
7317
+ --duration-fast: 0ms;
7318
+ --duration-base: 0ms;
7319
+ --duration-slow: 0ms;
7320
+ --duration-stream: 0ms;
7321
+ --duration-arrive: 0ms;
7322
+ --stagger-step: 0ms;
7323
+ --motion-control: var(--duration-fast) var(--ease-standard);
7324
+ --motion-surface: var(--duration-base) var(--ease-entrance);
7325
+ --motion-dismiss: var(--duration-instant) var(--ease-exit);
7326
+ --motion-stream: var(--duration-stream) var(--ease-expo);
7327
+ --motion-arrive: var(--duration-arrive) var(--ease-expo);
7328
+ }
7329
+ }
7330
+ [data-tone="violet"], [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7331
+ --tone-bg: var(--tone-violet-bg);
7332
+ --tone-bg-hover: var(--tone-violet-bg-hover);
7333
+ --tone-bg-selected: var(--tone-violet-bg-selected);
7334
+ --tone-border: var(--tone-violet-border);
7335
+ --tone-border-selected: var(--tone-violet-border-selected);
7336
+ --tone-text: var(--tone-violet-text);
7337
+ --tone-icon: var(--tone-violet-icon);
7338
+ }
7339
+ [data-tone="orange"], [data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7340
+ --tone-bg: var(--tone-orange-bg);
7341
+ --tone-bg-hover: var(--tone-orange-bg-hover);
7342
+ --tone-bg-selected: var(--tone-orange-bg-selected);
7343
+ --tone-border: var(--tone-orange-border);
7344
+ --tone-border-selected: var(--tone-orange-border-selected);
7345
+ --tone-text: var(--tone-orange-text);
7346
+ --tone-icon: var(--tone-orange-icon);
7347
+ }
7348
+ [data-tone="teal"], [data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7349
+ --tone-bg: var(--tone-teal-bg);
7350
+ --tone-bg-hover: var(--tone-teal-bg-hover);
7351
+ --tone-bg-selected: var(--tone-teal-bg-selected);
7352
+ --tone-border: var(--tone-teal-border);
7353
+ --tone-border-selected: var(--tone-teal-border-selected);
7354
+ --tone-text: var(--tone-teal-text);
7355
+ --tone-icon: var(--tone-teal-icon);
7356
+ }
7357
+ [data-tone="blue"], [data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7358
+ --tone-bg: var(--tone-blue-bg);
7359
+ --tone-bg-hover: var(--tone-blue-bg-hover);
7360
+ --tone-bg-selected: var(--tone-blue-bg-selected);
7361
+ --tone-border: var(--tone-blue-border);
7362
+ --tone-border-selected: var(--tone-blue-border-selected);
7363
+ --tone-text: var(--tone-blue-text);
7364
+ --tone-icon: var(--tone-blue-icon);
7365
+ }
7366
+ [data-tone="pink"], [data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7367
+ --tone-bg: var(--tone-pink-bg);
7368
+ --tone-bg-hover: var(--tone-pink-bg-hover);
7369
+ --tone-bg-selected: var(--tone-pink-bg-selected);
7370
+ --tone-border: var(--tone-pink-border);
7371
+ --tone-border-selected: var(--tone-pink-border-selected);
7372
+ --tone-text: var(--tone-pink-text);
7373
+ --tone-icon: var(--tone-pink-icon);
7374
+ }
7375
+ [data-tone="brown"], [data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7376
+ --tone-bg: var(--tone-brown-bg);
7377
+ --tone-bg-hover: var(--tone-brown-bg-hover);
7378
+ --tone-bg-selected: var(--tone-brown-bg-selected);
7379
+ --tone-border: var(--tone-brown-border);
7380
+ --tone-border-selected: var(--tone-brown-border-selected);
7381
+ --tone-text: var(--tone-brown-text);
7382
+ --tone-icon: var(--tone-brown-icon);
7383
+ }
7384
+ [data-tone="cyan"], [data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7385
+ --tone-bg: var(--tone-cyan-bg);
7386
+ --tone-bg-hover: var(--tone-cyan-bg-hover);
7387
+ --tone-bg-selected: var(--tone-cyan-bg-selected);
7388
+ --tone-border: var(--tone-cyan-border);
7389
+ --tone-border-selected: var(--tone-cyan-border-selected);
7390
+ --tone-text: var(--tone-cyan-text);
7391
+ --tone-icon: var(--tone-cyan-icon);
7392
+ }
7393
+ [data-tone="lime"], [data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7394
+ --tone-bg: var(--tone-lime-bg);
7395
+ --tone-bg-hover: var(--tone-lime-bg-hover);
7396
+ --tone-bg-selected: var(--tone-lime-bg-selected);
7397
+ --tone-border: var(--tone-lime-border);
7398
+ --tone-border-selected: var(--tone-lime-border-selected);
7399
+ --tone-text: var(--tone-lime-text);
7400
+ --tone-icon: var(--tone-lime-icon);
7401
+ }
7402
+ :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7403
+ --text-display: var(--font-size-display);
7404
+ --text-hero: var(--font-size-hero);
7405
+ --text-page: var(--font-size-3xl);
7406
+ --text-section: var(--font-size-xl);
7407
+ --text-eyebrow: var(--font-size-xs);
7408
+ --text-control-sm: var(--control-text-sm);
7409
+ --text-control-md: var(--control-text-md);
7410
+ --text-control-lg: var(--control-text-lg);
7411
+ --text-label: var(--font-size-label);
7412
+ --text-help: var(--font-size-help);
7413
+ --spacing-control-sm: var(--control-height-sm);
7414
+ --spacing-control-md: var(--control-height);
7415
+ --spacing-control-lg: var(--control-height-lg);
7416
+ --spacing-shell-header: var(--shell-header-height);
7417
+ --color-brand: var(--brand-primary);
7418
+ --color-brand-dim: var(--btn-primary-bg);
7419
+ --color-brand-cool: var(--brand-cool);
7420
+ --color-brand-glow: var(--brand-glow);
7421
+ --color-brand-emerald: var(--brand-emerald);
7422
+ --color-status-running: var(--status-running);
7423
+ --color-status-creating: var(--status-creating);
7424
+ --color-status-stopped: var(--status-stopped);
7425
+ --color-status-error: var(--status-error);
7426
+ --color-scrim: var(--scrim);
7427
+ --color-scrim-strong: var(--scrim-strong);
7428
+ --color-on-media: var(--on-media);
7429
+ --color-depth-1: var(--depth-1);
7430
+ --color-depth-2: var(--depth-2);
7431
+ --color-depth-3: var(--depth-3);
7432
+ --color-depth-4: var(--depth-4);
7433
+ --color-background: hsl(var(--background));
7434
+ --color-foreground: hsl(var(--foreground));
7435
+ --color-card: hsl(var(--card));
7436
+ --color-card-foreground: hsl(var(--card-foreground));
7437
+ --color-popover: hsl(var(--popover));
7438
+ --color-popover-foreground: hsl(var(--popover-foreground));
7439
+ --color-primary: hsl(var(--primary));
7440
+ --color-primary-foreground: hsl(var(--primary-foreground));
7441
+ --color-secondary: hsl(var(--secondary));
7442
+ --color-secondary-foreground: hsl(var(--secondary-foreground));
7443
+ --color-muted: hsl(var(--muted));
7444
+ --color-muted-foreground: hsl(var(--muted-foreground));
7445
+ --color-accent: hsl(var(--accent));
7446
+ --color-accent-foreground: hsl(var(--accent-foreground));
7447
+ --color-destructive: hsl(var(--destructive));
7448
+ --color-destructive-foreground: hsl(var(--destructive-foreground));
7449
+ --color-border: hsl(var(--border));
7450
+ --color-input: hsl(var(--input));
7451
+ --color-ring: hsl(var(--ring));
7452
+ --color-surface-container-lowest: var(--md3-surface-container-lowest);
7453
+ --color-surface-container-low: var(--md3-surface-container-low);
7454
+ --color-surface-container: var(--md3-surface-container);
7455
+ --color-surface-container-high: var(--md3-surface-container-high);
7456
+ --color-surface-container-highest: var(--md3-surface-container-highest);
7457
+ --color-fg: var(--text-primary);
7458
+ --color-fg-muted: var(--text-muted);
7459
+ --color-fg-dim: var(--text-dim);
7460
+ }
7461
+ [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"] {
7462
+ --hsl-secondary-foreground: var(--hsl-foreground);
7463
+ --surface-neutral-text: var(--text-muted);
7464
+ }
7465
+ [data-theme="aubergine"] {
7466
+ --hsl-background: 257.7778 44.2623% 11.9608%;
7467
+ --hsl-foreground: 0 0% 96.0784%;
7468
+ --hsl-card: 258.1395 37.3913% 22.549%;
7469
+ --hsl-card-foreground: var(--hsl-foreground);
7470
+ --hsl-popover: 257.2881 34.104% 33.9216%;
7471
+ --hsl-popover-foreground: var(--hsl-foreground);
7472
+ --hsl-primary: 257.76 54.1126% 54.7059%;
7473
+ --hsl-primary-foreground: 0 0% 100%;
7474
+ --hsl-secondary: 257.6471 35.6643% 28.0392%;
7475
+ --hsl-muted: var(--hsl-secondary);
7476
+ --hsl-muted-foreground: 0 0% 76.8627%;
7477
+ --hsl-accent: var(--hsl-secondary);
7478
+ --hsl-border: 257.5385 34.0314% 37.451%;
7479
+ --hsl-input: 257.6471 38.6364% 17.2549%;
7480
+ --hsl-ring: 257.3684 92.6829% 83.9216%;
7481
+ --depth-1: var(--md3-surface);
7482
+ --depth-2: var(--md3-surface-container);
7483
+ --depth-3: var(--md3-surface-container-high);
7484
+ --depth-4: var(--md3-surface-container-highest);
7485
+ --bg-root: hsl(var(--hsl-background));
7486
+ --bg-card: var(--depth-2);
7487
+ --bg-input: hsl(var(--hsl-input));
7488
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7489
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7490
+ --md3-surface-container: hsl(var(--hsl-card));
7491
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7492
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7493
+ --md3-outline-variant: hsl(var(--hsl-border));
7494
+ --border-subtle: hsl(var(--hsl-border));
7495
+ --border-default: hsl(var(--hsl-border));
7496
+ --border-hover: rgb(245 245 245 / 0.28);
7497
+ --accent-text: hsl(257.3684 92.6829% 83.9216%);
7498
+ --brand-primary: hsl(258.5185 64.8% 75.4902%);
7499
+ --brand-glow: var(--accent-text);
7500
+ --text-primary: hsl(var(--hsl-foreground));
7501
+ --text-secondary: hsl(0 0% 84.3137%);
7502
+ --text-muted: hsl(0 0% 76.8627%);
7503
+ --text-dim: hsl(0 0% 69.4118%);
7504
+ --md3-surface: var(--bg-root);
7505
+ --md3-surface-dim: hsl(255.7895 51.3514% 7.2549%);
7506
+ --md3-surface-bright: hsl(var(--hsl-popover));
7507
+ --md3-surface-variant: var(--md3-surface-container-high);
7508
+ --md3-on-surface: var(--text-primary);
7509
+ --md3-on-surface-variant: var(--text-muted);
7510
+ --hsl-raised: var(--hsl-secondary);
7511
+ --hsl-raised-2: var(--hsl-popover);
7512
+ --well-page: #0e091c;
7513
+ --well-card: #0e091c;
7514
+ --well-raised: #31244f;
7515
+ --well-raised-2: #31244f;
7516
+ --sidebar-background: 257.6471 38.6364% 17.2549%;
7517
+ }
7518
+ [data-theme="aubergine-light"] {
7519
+ --hsl-background: 255 54.5455% 95.6863%;
7520
+ --hsl-foreground: 0 0% 24.7059%;
7521
+ --hsl-card: 0 0% 100%;
7522
+ --hsl-card-foreground: var(--hsl-foreground);
7523
+ --hsl-popover: 0 0% 100%;
7524
+ --hsl-popover-foreground: var(--hsl-foreground);
7525
+ --hsl-primary: 257.76 54.1126% 54.7059%;
7526
+ --hsl-primary-foreground: 0 0% 100%;
7527
+ --hsl-secondary: 255 50% 95.2941%;
7528
+ --hsl-muted: var(--hsl-secondary);
7529
+ --hsl-muted-foreground: 0 0% 36.4706%;
7530
+ --hsl-accent: var(--hsl-secondary);
7531
+ --hsl-border: 255 14.2857% 83.5294%;
7532
+ --hsl-input: 266.6667 100% 98.2353%;
7533
+ --hsl-ring: 257.76 54.1126% 54.7059%;
7534
+ --depth-1: var(--md3-surface);
7535
+ --depth-2: var(--md3-surface-container);
7536
+ --depth-3: var(--md3-surface-container-high);
7537
+ --depth-4: var(--md3-surface-container-highest);
7538
+ --bg-root: hsl(var(--hsl-background));
7539
+ --bg-card: var(--depth-2);
7540
+ --bg-input: hsl(var(--hsl-input));
7541
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7542
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7543
+ --md3-surface-container: hsl(var(--hsl-card));
7544
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7545
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7546
+ --md3-outline-variant: hsl(var(--hsl-border));
7547
+ --border-subtle: hsl(var(--hsl-border));
7548
+ --border-default: hsl(var(--hsl-border));
7549
+ --border-hover: rgb(63 63 63 / 0.28);
7550
+ --accent-text: hsl(257.9724 92.3404% 53.9216%);
7551
+ --brand-primary: hsl(258.1295 65.2582% 58.2353%);
7552
+ --brand-glow: var(--accent-text);
7553
+ --text-primary: hsl(var(--hsl-foreground));
7554
+ --text-secondary: hsl(0 0% 31.7647%);
7555
+ --text-muted: hsl(0 0% 36.4706%);
7556
+ --text-dim: hsl(0 0% 41.9608%);
7557
+ --md3-surface: var(--bg-root);
7558
+ --md3-surface-dim: hsl(258.4615 23.6364% 89.2157%);
7559
+ --md3-surface-bright: hsl(var(--hsl-popover));
7560
+ --md3-surface-variant: var(--md3-surface-container-high);
7561
+ --md3-on-surface: var(--text-primary);
7562
+ --md3-on-surface-variant: var(--text-muted);
7563
+ --hsl-raised: var(--hsl-secondary);
7564
+ --hsl-raised-2: var(--hsl-popover);
7565
+ --well-page: #ffffff;
7566
+ --well-card: #f1eefa;
7567
+ --well-raised: #ffffff;
7568
+ --well-raised-2: #f1eefa;
7569
+ --sidebar-background: 266.6667 100% 98.2353%;
7570
+ }
7571
+ [data-theme="arena"] {
7572
+ --hsl-background: 160 20% 5.8824%;
7573
+ --hsl-foreground: 0 0% 92.549%;
7574
+ --hsl-card: 156 13.8889% 14.1176%;
7575
+ --hsl-card-foreground: var(--hsl-foreground);
7576
+ --hsl-popover: 156.9231 11.1111% 22.9412%;
7577
+ --hsl-popover-foreground: var(--hsl-foreground);
7578
+ --hsl-primary: 160.5 54.0541% 29.0196%;
7579
+ --hsl-primary-foreground: 0 0% 100%;
7580
+ --hsl-secondary: 160 12.766% 18.4314%;
7581
+ --hsl-muted: var(--hsl-secondary);
7582
+ --hsl-muted-foreground: 0 0% 73.7255%;
7583
+ --hsl-accent: var(--hsl-secondary);
7584
+ --hsl-border: 156 11.4504% 25.6863%;
7585
+ --hsl-input: 157.5 16% 9.8039%;
7586
+ --hsl-ring: 160 91.6667% 42.3529%;
7587
+ --depth-1: var(--md3-surface);
7588
+ --depth-2: var(--md3-surface-container);
7589
+ --depth-3: var(--md3-surface-container-high);
7590
+ --depth-4: var(--md3-surface-container-highest);
7591
+ --bg-root: hsl(var(--hsl-background));
7592
+ --bg-card: var(--depth-2);
7593
+ --bg-input: hsl(var(--hsl-input));
7594
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7595
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7596
+ --md3-surface-container: hsl(var(--hsl-card));
7597
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7598
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7599
+ --md3-outline-variant: hsl(var(--hsl-border));
7600
+ --border-subtle: hsl(var(--hsl-border));
7601
+ --border-default: hsl(var(--hsl-border));
7602
+ --border-hover: rgb(236 236 236 / 0.28);
7603
+ --accent-text: hsl(160 91.6667% 42.3529%);
7604
+ --brand-primary: hsl(159.7183 65.1376% 42.7451%);
7605
+ --brand-glow: var(--accent-text);
7606
+ --text-primary: hsl(var(--hsl-foreground));
7607
+ --text-secondary: hsl(0 0% 81.1765%);
7608
+ --text-muted: hsl(0 0% 73.7255%);
7609
+ --text-dim: hsl(0 0% 66.6667%);
7610
+ --md3-surface: var(--bg-root);
7611
+ --md3-surface-dim: hsl(160 23.0769% 2.549%);
7612
+ --md3-surface-bright: hsl(var(--hsl-popover));
7613
+ --md3-surface-variant: var(--md3-surface-container-high);
7614
+ --md3-on-surface: var(--text-primary);
7615
+ --md3-on-surface-variant: var(--text-muted);
7616
+ --hsl-raised: var(--hsl-secondary);
7617
+ --hsl-raised-2: var(--hsl-popover);
7618
+ --well-page: #050807;
7619
+ --well-card: #050807;
7620
+ --well-raised: #1f2925;
7621
+ --well-raised-2: #1f2925;
7622
+ --sidebar-background: 157.5 16% 9.8039%;
7623
+ }
7624
+ [data-theme="arena-light"] {
7625
+ --hsl-background: 150 29.4118% 93.3333%;
7626
+ --hsl-foreground: 0 0% 25.098%;
7627
+ --hsl-card: 0 0% 100%;
7628
+ --hsl-card-foreground: var(--hsl-foreground);
7629
+ --hsl-popover: 0 0% 100%;
7630
+ --hsl-popover-foreground: var(--hsl-foreground);
7631
+ --hsl-primary: 160.5 54.0541% 29.0196%;
7632
+ --hsl-primary-foreground: 0 0% 100%;
7633
+ --hsl-secondary: 150 27.7778% 92.9412%;
7634
+ --hsl-muted: var(--hsl-secondary);
7635
+ --hsl-muted-foreground: 0 0% 36.8627%;
7636
+ --hsl-accent: var(--hsl-secondary);
7637
+ --hsl-border: 150 10.4167% 81.1765%;
7638
+ --hsl-input: 150 55.5556% 96.4706%;
7639
+ --hsl-ring: 160.5 54.0541% 29.0196%;
7640
+ --depth-1: var(--md3-surface);
7641
+ --depth-2: var(--md3-surface-container);
7642
+ --depth-3: var(--md3-surface-container-high);
7643
+ --depth-4: var(--md3-surface-container-highest);
7644
+ --bg-root: hsl(var(--hsl-background));
7645
+ --bg-card: var(--depth-2);
7646
+ --bg-input: hsl(var(--hsl-input));
7647
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7648
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7649
+ --md3-surface-container: hsl(var(--hsl-card));
7650
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7651
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7652
+ --md3-outline-variant: hsl(var(--hsl-border));
7653
+ --border-subtle: hsl(var(--hsl-border));
7654
+ --border-default: hsl(var(--hsl-border));
7655
+ --border-hover: rgb(64 64 64 / 0.28);
7656
+ --accent-text: hsl(160.4082 92.4528% 20.7843%);
7657
+ --brand-primary: hsl(160 64.8649% 29.0196%);
7658
+ --brand-glow: var(--accent-text);
7659
+ --text-primary: hsl(var(--hsl-foreground));
7660
+ --text-secondary: hsl(0 0% 31.7647%);
7661
+ --text-muted: hsl(0 0% 36.8627%);
7662
+ --text-dim: hsl(0 0% 42.3529%);
7663
+ --md3-surface: var(--bg-root);
7664
+ --md3-surface-dim: hsl(153.3333 13.4328% 86.8627%);
7665
+ --md3-surface-bright: hsl(var(--hsl-popover));
7666
+ --md3-surface-variant: var(--md3-surface-container-high);
7667
+ --md3-on-surface: var(--text-primary);
7668
+ --md3-on-surface-variant: var(--text-muted);
7669
+ --hsl-raised: var(--hsl-secondary);
7670
+ --hsl-raised-2: var(--hsl-popover);
7671
+ --well-page: #ffffff;
7672
+ --well-card: #e9f3ee;
7673
+ --well-raised: #ffffff;
7674
+ --well-raised-2: #e9f3ee;
7675
+ --sidebar-background: 150 55.5556% 96.4706%;
7676
+ }
7677
+ [data-theme="super"] {
7678
+ --hsl-background: 120 12.1951% 8.0392%;
7679
+ --hsl-foreground: 0 0% 96.4706%;
7680
+ --hsl-card: 120 9.5238% 16.4706%;
7681
+ --hsl-card-foreground: var(--hsl-foreground);
7682
+ --hsl-popover: 120 8.3969% 25.6863%;
7683
+ --hsl-popover-foreground: var(--hsl-foreground);
7684
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
7685
+ --hsl-primary-foreground: 0 0% 100%;
7686
+ --hsl-secondary: 120 9.2593% 21.1765%;
7687
+ --hsl-secondary-foreground: var(--hsl-foreground);
7688
+ --hsl-muted: var(--hsl-secondary);
7689
+ --hsl-muted-foreground: 0 0% 77.2549%;
7690
+ --hsl-accent: var(--hsl-secondary);
7691
+ --hsl-accent-foreground: var(--hsl-foreground);
7692
+ --hsl-border: 120 8.3333% 28.2353%;
7693
+ --hsl-input: 120 9.6774% 12.1569%;
7694
+ --hsl-ring: 147.9808 92.0354% 44.3137%;
7695
+ --depth-1: var(--md3-surface);
7696
+ --depth-2: var(--md3-surface-container);
7697
+ --depth-3: var(--md3-surface-container-high);
7698
+ --depth-4: var(--md3-surface-container-highest);
7699
+ --bg-root: hsl(var(--hsl-background));
7700
+ --bg-card: var(--depth-2);
7701
+ --bg-input: hsl(var(--hsl-input));
7702
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7703
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7704
+ --md3-surface-container: hsl(var(--hsl-card));
7705
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7706
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7707
+ --md3-outline-variant: hsl(var(--hsl-border));
7708
+ --border-subtle: hsl(var(--hsl-border));
7709
+ --border-default: hsl(var(--hsl-border));
7710
+ --border-hover: rgb(246 246 246 / 0.28);
7711
+ --accent-text: hsl(147.9808 92.0354% 44.3137%);
7712
+ --brand-primary: hsl(148 65.2174% 45.098%);
7713
+ --brand-glow: var(--accent-text);
7714
+ --text-primary: hsl(var(--hsl-foreground));
7715
+ --text-secondary: hsl(0 0% 85.098%);
7716
+ --text-muted: hsl(0 0% 77.2549%);
7717
+ --text-dim: hsl(0 0% 69.8039%);
7718
+ --md3-primary: var(--accent-text);
7719
+ --bg-hover: var(--accent-text);
7720
+ @supports (color: color-mix(in lab, red, red)) {
7721
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
7722
+ }
7723
+ --bg-selection: var(--btn-primary-bg);
7724
+ @supports (color: color-mix(in lab, red, red)) {
7725
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
7726
+ }
7727
+ --accent-surface-soft: var(--accent-text);
7728
+ @supports (color: color-mix(in lab, red, red)) {
7729
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
7730
+ }
7731
+ --accent-surface-strong: var(--btn-primary-bg);
7732
+ @supports (color: color-mix(in lab, red, red)) {
7733
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
7734
+ }
7735
+ --border-accent: var(--brand-cool);
7736
+ @supports (color: color-mix(in lab, red, red)) {
7737
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
7738
+ }
7739
+ --border-accent-hover: var(--brand-cool);
7740
+ @supports (color: color-mix(in lab, red, red)) {
7741
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
7742
+ }
7743
+ --btn-primary-bg: hsl(var(--hsl-primary));
7744
+ --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%);
7745
+ --btn-primary-text: hsl(0 0% 100%);
7746
+ --btn-cta-bg: var(--btn-primary-bg);
7747
+ --btn-cta-text: var(--btn-primary-text);
7748
+ --md3-surface: var(--bg-root);
7749
+ --md3-surface-dim: hsl(120 14.2857% 4.1176%);
7750
+ --md3-surface-bright: hsl(var(--hsl-popover));
7751
+ --md3-surface-variant: var(--md3-surface-container-high);
7752
+ --md3-on-surface: var(--text-primary);
7753
+ --md3-on-surface-variant: var(--text-muted);
7754
+ --hsl-raised: var(--hsl-secondary);
7755
+ --hsl-raised-2: var(--hsl-popover);
7756
+ --well-page: #090c09;
7757
+ --well-card: #090c09;
7758
+ --well-raised: #262e26;
7759
+ --well-raised-2: #262e26;
7760
+ --sidebar-background: 120 9.6774% 12.1569%;
7761
+ }
7762
+ [data-theme="super-light"] {
7763
+ --hsl-background: 80 17.6471% 93.3333%;
7764
+ --hsl-foreground: 0 0% 25.098%;
7765
+ --hsl-card: 0 0% 100%;
7766
+ --hsl-card-foreground: var(--hsl-foreground);
7767
+ --hsl-popover: 0 0% 100%;
7768
+ --hsl-popover-foreground: var(--hsl-foreground);
7769
+ --hsl-primary: 148.1481 54.3624% 29.2157%;
7770
+ --hsl-primary-foreground: 0 0% 100%;
7771
+ --hsl-secondary: 80 16.6667% 92.9412%;
7772
+ --hsl-muted: var(--hsl-secondary);
7773
+ --hsl-muted-foreground: 0 0% 36.4706%;
7774
+ --hsl-accent: var(--hsl-secondary);
7775
+ --hsl-border: 80 6.25% 81.1765%;
7776
+ --hsl-input: 80 33.3333% 96.4706%;
7777
+ --hsl-ring: 148.1481 54.3624% 29.2157%;
7778
+ --depth-1: var(--md3-surface);
7779
+ --depth-2: var(--md3-surface-container);
7780
+ --depth-3: var(--md3-surface-container-high);
7781
+ --depth-4: var(--md3-surface-container-highest);
7782
+ --bg-root: hsl(var(--hsl-background));
7783
+ --bg-card: var(--depth-2);
7784
+ --bg-input: hsl(var(--hsl-input));
7785
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7786
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7787
+ --md3-surface-container: hsl(var(--hsl-card));
7788
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7789
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7790
+ --md3-outline-variant: hsl(var(--hsl-border));
7791
+ --border-subtle: hsl(var(--hsl-border));
7792
+ --border-default: hsl(var(--hsl-border));
7793
+ --border-hover: rgb(64 64 64 / 0.28);
7794
+ --accent-text: hsl(148.4848 92.5234% 20.9804%);
7795
+ --brand-primary: hsl(148.4536 65.1007% 29.2157%);
7796
+ --brand-glow: var(--accent-text);
7797
+ --text-primary: hsl(var(--hsl-foreground));
7798
+ --text-secondary: hsl(0 0% 31.7647%);
7799
+ --text-muted: hsl(0 0% 36.4706%);
7800
+ --text-dim: hsl(0 0% 41.9608%);
7801
+ --md3-primary: var(--accent-text);
7802
+ --bg-hover: var(--accent-text);
7803
+ @supports (color: color-mix(in lab, red, red)) {
7804
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
7805
+ }
7806
+ --bg-selection: var(--btn-primary-bg);
7807
+ @supports (color: color-mix(in lab, red, red)) {
7808
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
7809
+ }
7810
+ --accent-surface-soft: var(--accent-text);
7811
+ @supports (color: color-mix(in lab, red, red)) {
7812
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
7813
+ }
7814
+ --accent-surface-strong: var(--btn-primary-bg);
7815
+ @supports (color: color-mix(in lab, red, red)) {
7816
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
7817
+ }
7818
+ --border-accent: var(--brand-cool);
7819
+ @supports (color: color-mix(in lab, red, red)) {
7820
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
7821
+ }
7822
+ --border-accent-hover: var(--brand-cool);
7823
+ @supports (color: color-mix(in lab, red, red)) {
7824
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
7825
+ }
7826
+ --btn-primary-bg: hsl(var(--hsl-primary));
7827
+ --btn-primary-hover: hsl(147.9452 39.4595% 36.2745%);
7828
+ --btn-primary-text: hsl(0 0% 100%);
7829
+ --btn-cta-bg: var(--btn-primary-bg);
7830
+ --btn-cta-text: var(--btn-primary-text);
7831
+ --md3-surface: var(--bg-root);
7832
+ --md3-surface-dim: hsl(85.7143 10.4478% 86.8627%);
7833
+ --md3-surface-bright: hsl(var(--hsl-popover));
7834
+ --md3-surface-variant: var(--md3-surface-container-high);
7835
+ --md3-on-surface: var(--text-primary);
7836
+ --md3-on-surface-variant: var(--text-muted);
7837
+ --hsl-raised: var(--hsl-secondary);
7838
+ --hsl-raised-2: var(--hsl-popover);
7839
+ --well-page: #ffffff;
7840
+ --well-card: #eff1eb;
7841
+ --well-raised: #ffffff;
7842
+ --well-raised-2: #eff1eb;
7843
+ --sidebar-background: 80 33.3333% 96.4706%;
7844
+ }
7845
+ [data-theme="tangle-light"] {
7846
+ --hsl-background: 240 33.3333% 95.2941%;
7847
+ --hsl-foreground: 0 0% 24.7059%;
7848
+ --hsl-card: 0 0% 100%;
7849
+ --hsl-card-foreground: var(--hsl-foreground);
7850
+ --hsl-popover: 0 0% 100%;
7851
+ --hsl-popover-foreground: var(--hsl-foreground);
7852
+ --hsl-primary: 245.9504 54.2601% 56.2745%;
7853
+ --hsl-primary-foreground: 0 0% 100%;
7854
+ --hsl-secondary: 240 30.7692% 94.902%;
7855
+ --hsl-muted: var(--hsl-secondary);
7856
+ --hsl-muted-foreground: 0 0% 36.4706%;
7857
+ --hsl-accent: var(--hsl-secondary);
7858
+ --hsl-border: 240 8.046% 82.9412%;
7859
+ --hsl-input: 240 100% 98.6275%;
7860
+ --hsl-ring: 245.9504 54.2601% 56.2745%;
7861
+ --depth-1: var(--md3-surface);
7862
+ --depth-2: var(--md3-surface-container);
7863
+ --depth-3: var(--md3-surface-container-high);
7864
+ --depth-4: var(--md3-surface-container-highest);
7865
+ --bg-root: hsl(var(--hsl-background));
7866
+ --bg-card: var(--depth-2);
7867
+ --bg-input: hsl(var(--hsl-input));
7868
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7869
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7870
+ --md3-surface-container: hsl(var(--hsl-card));
7871
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7872
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7873
+ --md3-outline-variant: hsl(var(--hsl-border));
7874
+ --border-subtle: hsl(var(--hsl-border));
7875
+ --border-default: hsl(var(--hsl-border));
7876
+ --border-hover: rgb(63 63 63 / 0.28);
7877
+ --accent-text: hsl(246.0302 91.7051% 57.451%);
7878
+ --brand-primary: hsl(246.3636 64.7059% 60%);
7879
+ --brand-glow: var(--accent-text);
7880
+ --text-primary: hsl(var(--hsl-foreground));
7881
+ --text-secondary: hsl(0 0% 31.7647%);
7882
+ --text-muted: hsl(0 0% 36.4706%);
7883
+ --text-dim: hsl(0 0% 41.9608%);
7884
+ --hsl-raised: var(--hsl-secondary);
7885
+ --hsl-raised-2: var(--hsl-popover);
7886
+ --well-page: #ffffff;
7887
+ --well-card: #efeff7;
7888
+ --well-raised: #ffffff;
7889
+ --well-raised-2: #efeff7;
7890
+ --sidebar-background: 240 100% 98.6275%;
7891
+ }
7892
+ .dark[data-theme="intelligence"] {
7893
+ --md3-surface: var(--bg-root);
7894
+ --md3-surface-dim: hsl(260 33.3333% 1.7647%);
7895
+ --md3-surface-bright: hsl(var(--hsl-popover));
7896
+ --md3-surface-container-lowest: var(--md3-surface-dim);
7897
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7898
+ --md3-surface-container: hsl(var(--hsl-card));
7899
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7900
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7901
+ --md3-surface-variant: var(--md3-surface-container-high);
7902
+ --md3-on-surface-variant: var(--text-muted);
7903
+ --hsl-background: 260 23.0769% 5.098%;
7904
+ --hsl-card: 260 16.6667% 14.1176%;
7905
+ --hsl-popover: 260 14.7541% 23.9216%;
7906
+ --hsl-secondary: 264 15.7895% 18.6275%;
7907
+ --hsl-muted: var(--hsl-secondary);
7908
+ --hsl-muted-foreground: 0 0% 70.1961%;
7909
+ --hsl-accent: var(--hsl-secondary);
7910
+ --hsl-border: 261 14.2857% 27.451%;
7911
+ --hsl-input: 264 20.8333% 9.4118%;
7912
+ --sidebar-background: 264 20.8333% 9.4118%;
7913
+ --sidebar-accent: var(--hsl-secondary);
7914
+ --sidebar-border: var(--hsl-border);
7915
+ --depth-1: var(--md3-surface);
7916
+ --depth-2: var(--md3-surface-container);
7917
+ --depth-3: var(--md3-surface-container-high);
7918
+ --depth-4: var(--md3-surface-container-highest);
7919
+ --bg-elevated: var(--depth-4);
7920
+ --bg-section: var(--depth-1);
7921
+ --bg-root: hsl(var(--hsl-background));
7922
+ --border-subtle: hsl(var(--hsl-border));
7923
+ --border-default: hsl(var(--hsl-border));
7924
+ --border-hover: rgb(224 224 224 / 0.28);
7925
+ --hsl-raised: var(--hsl-secondary);
7926
+ --hsl-raised-2: var(--hsl-popover);
7927
+ --well-page: #040306;
7928
+ --well-card: #040306;
7929
+ --well-raised: #221e2a;
7930
+ --well-raised-2: #221e2a;
7931
+ }
7932
+ [data-theme="hospitality"]:where(:not(.dark)) {
7933
+ --hsl-background: 108 16.6667% 88.2353%;
7934
+ --hsl-foreground: 0 0% 22.3529%;
7935
+ --hsl-card: 0 0% 100%;
7936
+ --hsl-card-foreground: var(--hsl-foreground);
7937
+ --hsl-popover: 0 0% 100%;
7938
+ --hsl-popover-foreground: var(--hsl-foreground);
7939
+ --hsl-primary: 153 54.0541% 29.0196%;
7940
+ --hsl-primary-foreground: 0 0% 100%;
7941
+ --hsl-secondary: 108 29.4118% 93.3333%;
7942
+ --hsl-secondary-foreground: var(--hsl-foreground);
7943
+ --hsl-muted: var(--hsl-secondary);
7944
+ --hsl-muted-foreground: 0 0% 34.1176%;
7945
+ --hsl-accent: var(--hsl-secondary);
7946
+ --hsl-accent-foreground: var(--hsl-foreground);
7947
+ --hsl-border: 113.3333 8.7379% 79.8039%;
7948
+ --hsl-input: 0 0% 100%;
7949
+ --hsl-ring: 153 54.0541% 29.0196%;
7950
+ --hsl-destructive: 0 75.1244% 39.4118%;
7951
+ --hsl-raised: var(--hsl-secondary);
7952
+ --hsl-raised-2: 0 0% 100%;
7953
+ --sidebar-background: 109.0909 44% 95.098%;
7954
+ --sidebar-foreground: var(--hsl-foreground);
7955
+ --sidebar-primary: var(--hsl-primary);
7956
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
7957
+ --sidebar-accent: var(--hsl-secondary);
7958
+ --sidebar-accent-foreground: var(--hsl-foreground);
7959
+ --sidebar-border: var(--hsl-border);
7960
+ --sidebar-ring: var(--hsl-ring);
7961
+ --md3-surface: var(--bg-root);
7962
+ --md3-surface-dim: hsl(108 11.9048% 83.5294%);
7963
+ --md3-surface-bright: hsl(var(--hsl-popover));
7964
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
7965
+ --md3-surface-container-low: hsl(var(--sidebar-background));
7966
+ --md3-surface-container: hsl(var(--hsl-card));
7967
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
7968
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
7969
+ --md3-surface-variant: var(--md3-surface-container-high);
7970
+ --md3-on-surface: var(--text-primary);
7971
+ --md3-on-surface-variant: var(--text-muted);
7972
+ --md3-outline: hsl(var(--hsl-muted-foreground));
7973
+ --md3-outline-variant: hsl(var(--hsl-border));
7974
+ --md3-primary: var(--accent-text);
7975
+ --md3-primary-dim: var(--btn-primary-bg);
7976
+ --md3-primary-container: var(--btn-primary-bg);
7977
+ --md3-on-primary: hsl(0 0% 100%);
7978
+ --md3-surface-tint: var(--accent-text);
7979
+ --depth-1: var(--md3-surface);
7980
+ --depth-2: var(--md3-surface-container);
7981
+ --depth-3: var(--md3-surface-container-high);
7982
+ --depth-4: var(--md3-surface-container-highest);
7983
+ --bg-root: hsl(var(--hsl-background));
7984
+ --bg-dark: var(--depth-1);
7985
+ --bg-section: var(--depth-1);
7986
+ --bg-card: var(--depth-2);
7987
+ --bg-elevated: var(--depth-4);
7988
+ --bg-input: hsl(var(--hsl-input));
7989
+ --well-page: #ffffff;
7990
+ --well-card: #e9f1e7;
7991
+ --well-raised: #ffffff;
7992
+ --well-raised-2: #e9f1e7;
7993
+ --bg-hover: var(--accent-text);
7994
+ @supports (color: color-mix(in lab, red, red)) {
7995
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
7996
+ }
7997
+ --bg-selection: var(--btn-primary-bg);
7998
+ @supports (color: color-mix(in lab, red, red)) {
7999
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 16%, transparent);
8000
+ }
8001
+ --border-subtle: hsl(var(--hsl-border));
8002
+ --border-default: hsl(var(--hsl-border));
8003
+ --border-hover: rgb(57 57 57 / 0.28);
8004
+ --border-strong: #7b837a;
8005
+ --field-border: #7b837a;
8006
+ --border-accent: var(--brand-cool);
8007
+ @supports (color: color-mix(in lab, red, red)) {
8008
+ --border-accent: color-mix(in srgb, var(--brand-cool) 20%, transparent);
8009
+ }
8010
+ --border-accent-hover: var(--brand-cool);
8011
+ @supports (color: color-mix(in lab, red, red)) {
8012
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 36%, transparent);
8013
+ }
8014
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.07), 0 4px 14px -4px hsl(var(--shadow-color) / 0.1);
8015
+ --shadow-raised: 0 1px 1px hsl(var(--shadow-color) / 0.05), 0 2px 6px -2px hsl(var(--shadow-color) / 0.07);
8016
+ --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.06);
8017
+ --edge-highlight: 0 0 0 0 transparent;
8018
+ --accent-text: hsl(153.2609 92% 19.6078%);
8019
+ --accent-surface-soft: var(--accent-text);
8020
+ @supports (color: color-mix(in lab, red, red)) {
8021
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 5%, transparent);
8022
+ }
8023
+ --accent-surface-strong: var(--btn-primary-bg);
8024
+ @supports (color: color-mix(in lab, red, red)) {
8025
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 13%, transparent);
8026
+ }
8027
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8028
+ --brand-primary: hsl(153.3333 65.2174% 27.0588%);
8029
+ --brand-cool: hsl(153.12 85.034% 28.8235%);
8030
+ --brand-glow: var(--accent-text);
8031
+ --brand-vibrant: var(--brand-primary);
8032
+ --btn-primary-bg: hsl(var(--hsl-primary));
8033
+ --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%);
8034
+ --btn-primary-text: hsl(0 0% 100%);
8035
+ --text-primary: hsl(var(--hsl-foreground));
8036
+ --text-secondary: hsl(0 0% 29.0196%);
8037
+ --text-muted: hsl(0 0% 34.1176%);
8038
+ --text-dim: hsl(0 0% 34.1176%);
8039
+ --surface-success-bg: #d1edd9;
8040
+ --surface-success-text: #1b6c4b;
8041
+ --surface-success-border: #9ac6ae;
8042
+ --surface-warning-bg: #f3e2c7;
8043
+ --surface-warning-text: #79581e;
8044
+ --surface-warning-border: #ceb994;
8045
+ --surface-danger-bg: #fedbd7;
8046
+ --surface-danger-text: #ae2c2c;
8047
+ --surface-danger-border: #e6a6a4;
8048
+ --surface-neutral-bg: #e1e6e0;
8049
+ --surface-neutral-text: #59605c;
8050
+ --surface-neutral-border: #b8beb8;
8051
+ }
8052
+ .dark[data-theme="hospitality"] {
8053
+ --hsl-background: 120 6.6667% 5.8824%;
8054
+ --hsl-foreground: 0 0% 99.2157%;
8055
+ --hsl-card: 132 5.2632% 18.6275%;
8056
+ --hsl-card-foreground: var(--hsl-foreground);
8057
+ --hsl-popover: 137.1429 4.6358% 29.6078%;
8058
+ --hsl-popover-foreground: var(--hsl-foreground);
8059
+ --hsl-primary: 153 54.0541% 29.0196%;
8060
+ --hsl-primary-foreground: 0 0% 100%;
8061
+ --hsl-secondary: 130 4.6154% 25.4902%;
8062
+ --hsl-secondary-foreground: var(--hsl-foreground);
8063
+ --hsl-muted: var(--hsl-secondary);
8064
+ --hsl-muted-foreground: 0 0% 85.8824%;
8065
+ --hsl-accent: var(--hsl-secondary);
8066
+ --hsl-accent-foreground: var(--hsl-foreground);
8067
+ --hsl-border: 137.1429 4.6358% 29.6078%;
8068
+ --hsl-input: 120 9.0909% 2.1569%;
8069
+ --hsl-ring: 152.9464 91.8033% 47.8431%;
8070
+ --hsl-destructive: 0 74.4681% 90.7843%;
8071
+ --hsl-raised: var(--hsl-secondary);
8072
+ --hsl-raised-2: 137.1429 4.3478% 31.5686%;
8073
+ --sidebar-background: 120 5.8824% 10%;
8074
+ --sidebar-foreground: var(--hsl-foreground);
8075
+ --sidebar-primary: var(--hsl-primary);
8076
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
8077
+ --sidebar-accent: var(--hsl-secondary);
8078
+ --sidebar-accent-foreground: var(--hsl-foreground);
8079
+ --sidebar-border: var(--hsl-border);
8080
+ --sidebar-ring: var(--hsl-ring);
8081
+ --md3-surface: var(--bg-root);
8082
+ --md3-surface-dim: hsl(120 9.0909% 2.1569%);
8083
+ --md3-surface-bright: hsl(var(--hsl-popover));
8084
+ --md3-surface-container-lowest: var(--md3-surface-dim);
8085
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8086
+ --md3-surface-container: hsl(var(--hsl-card));
8087
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8088
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8089
+ --md3-surface-variant: var(--md3-surface-container-high);
8090
+ --md3-on-surface: var(--text-primary);
8091
+ --md3-on-surface-variant: var(--text-muted);
8092
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8093
+ --md3-outline-variant: hsl(var(--hsl-border));
8094
+ --md3-primary: var(--accent-text);
8095
+ --md3-primary-dim: var(--btn-primary-bg);
8096
+ --md3-primary-container: var(--btn-primary-bg);
8097
+ --md3-on-primary: hsl(0 0% 100%);
8098
+ --md3-surface-tint: var(--accent-text);
8099
+ --depth-1: var(--md3-surface);
8100
+ --depth-2: var(--md3-surface-container);
8101
+ --depth-3: var(--md3-surface-container-high);
8102
+ --depth-4: var(--md3-surface-container-highest);
8103
+ --bg-root: hsl(var(--hsl-background));
8104
+ --bg-dark: var(--depth-1);
8105
+ --bg-section: var(--depth-1);
8106
+ --bg-card: var(--depth-2);
8107
+ --bg-elevated: var(--depth-4);
8108
+ --bg-input: hsl(var(--hsl-input));
8109
+ --well-page: #050605;
8110
+ --well-card: #050605;
8111
+ --well-raised: #191c19;
8112
+ --well-raised-2: #191c19;
8113
+ --bg-hover: var(--accent-text);
8114
+ @supports (color: color-mix(in lab, red, red)) {
8115
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
8116
+ }
8117
+ --bg-selection: var(--btn-primary-bg);
8118
+ @supports (color: color-mix(in lab, red, red)) {
8119
+ --bg-selection: color-mix(in srgb, var(--btn-primary-bg) 28%, transparent);
8120
+ }
8121
+ --border-subtle: hsl(var(--hsl-border));
8122
+ --border-default: hsl(var(--hsl-border));
8123
+ --border-hover: rgb(253 253 253 / 0.28);
8124
+ --border-strong: #919d93;
8125
+ --field-border: #919d93;
8126
+ --border-accent: var(--brand-cool);
8127
+ @supports (color: color-mix(in lab, red, red)) {
8128
+ --border-accent: color-mix(in srgb, var(--brand-cool) 35%, transparent);
8129
+ }
8130
+ --border-accent-hover: var(--brand-cool);
8131
+ @supports (color: color-mix(in lab, red, red)) {
8132
+ --border-accent-hover: color-mix(in srgb, var(--brand-cool) 50%, transparent);
8133
+ }
8134
+ --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.45), 0 10px 24px -14px hsl(var(--shadow-color) / 0.6);
8135
+ --shadow-raised: 0 1px 2px hsl(var(--shadow-color) / 0.35);
8136
+ --shadow-well: inset 0 1px 2px hsl(var(--shadow-color) / 0.5);
8137
+ --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
8138
+ --accent-text: hsl(152.9464 91.8033% 47.8431%);
8139
+ --accent-surface-soft: var(--accent-text);
8140
+ @supports (color: color-mix(in lab, red, red)) {
8141
+ --accent-surface-soft: color-mix(in srgb, var(--accent-text) 7%, transparent);
8142
+ }
8143
+ --accent-surface-strong: var(--btn-primary-bg);
8144
+ @supports (color: color-mix(in lab, red, red)) {
8145
+ --accent-surface-strong: color-mix(in srgb, var(--btn-primary-bg) 30%, transparent);
8146
+ }
8147
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8148
+ --brand-primary: hsl(152.7273 65.2174% 50.3922%);
8149
+ --brand-cool: hsl(152.7869 85.1163% 42.1569%);
8150
+ --brand-glow: var(--accent-text);
8151
+ --brand-vibrant: var(--brand-primary);
8152
+ --btn-primary-bg: hsl(var(--hsl-primary));
8153
+ --btn-primary-hover: hsl(153.3333 39.1304% 36.0784%);
8154
+ --btn-primary-text: hsl(0 0% 100%);
8155
+ --text-primary: hsl(var(--hsl-foreground));
8156
+ --text-secondary: hsl(0 0% 94.5098%);
8157
+ --text-muted: hsl(0 0% 85.8824%);
8158
+ --text-dim: hsl(0 0% 85.8824%);
8159
+ --surface-success-bg: #304838;
8160
+ --surface-success-text: #45d196;
8161
+ --surface-success-border: #367154;
8162
+ --surface-warning-bg: #4d3f29;
8163
+ --surface-warning-text: #dab26b;
8164
+ --surface-warning-border: #77623d;
8165
+ --surface-danger-bg: #553937;
8166
+ --surface-danger-text: #e8a5a5;
8167
+ --surface-danger-border: #815958;
8168
+ --surface-neutral-bg: #3f433e;
8169
+ --surface-neutral-text: #b4bab6;
8170
+ --surface-neutral-border: #626762;
8171
+ }
8172
+ [data-theme="agents"] {
8173
+ --bg-card: var(--depth-2);
8174
+ --hsl-background: 270 5.5556% 7.0588%;
8175
+ --hsl-foreground: 0 0% 92.9412%;
8176
+ --hsl-card: 260 3.7037% 15.8824%;
8177
+ --hsl-card-foreground: var(--hsl-foreground);
8178
+ --hsl-popover: 264 3.876% 25.2941%;
8179
+ --hsl-popover-foreground: var(--hsl-foreground);
8180
+ --hsl-secondary: 270 3.8462% 20.3922%;
8181
+ --hsl-secondary-foreground: var(--hsl-foreground);
8182
+ --hsl-muted: var(--hsl-secondary);
8183
+ --hsl-muted-foreground: 0 0% 74.1176%;
8184
+ --hsl-accent: var(--hsl-secondary);
8185
+ --hsl-accent-foreground: var(--hsl-foreground);
8186
+ --hsl-border: 276 3.4483% 28.4314%;
8187
+ --hsl-input: 270 3.4483% 11.3725%;
8188
+ --sidebar-background: 270 3.4483% 11.3725%;
8189
+ --sidebar-foreground: var(--hsl-foreground);
8190
+ --sidebar-accent: var(--hsl-secondary);
8191
+ --sidebar-accent-foreground: var(--hsl-foreground);
8192
+ --sidebar-border: var(--hsl-border);
8193
+ --md3-surface: var(--bg-root);
8194
+ --md3-surface-dim: hsl(240 5.8824% 3.3333%);
8195
+ --md3-surface-bright: hsl(var(--hsl-popover));
8196
+ --md3-surface-container-lowest: var(--md3-surface-dim);
8197
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8198
+ --md3-surface-container: hsl(var(--hsl-card));
8199
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8200
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8201
+ --md3-surface-variant: var(--md3-surface-container-high);
8202
+ --md3-on-surface: var(--text-primary);
8203
+ --md3-on-surface-variant: var(--text-muted);
8204
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8205
+ --md3-outline-variant: hsl(var(--hsl-border));
8206
+ --depth-1: var(--md3-surface);
8207
+ --depth-2: var(--md3-surface-container);
8208
+ --depth-3: var(--md3-surface-container-high);
8209
+ --depth-4: var(--md3-surface-container-highest);
8210
+ --bg-root: hsl(var(--hsl-background));
8211
+ --bg-dark: var(--depth-1);
8212
+ --bg-elevated: var(--depth-4);
8213
+ --bg-section: var(--depth-1);
8214
+ --bg-input: hsl(var(--hsl-input));
8215
+ --bg-hover: var(--accent-text);
8216
+ @supports (color: color-mix(in lab, red, red)) {
8217
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
8218
+ }
8219
+ --text-primary: hsl(var(--hsl-foreground));
8220
+ --text-secondary: hsl(0 0% 81.9608%);
8221
+ --text-muted: hsl(0 0% 74.1176%);
8222
+ --text-dim: hsl(0 0% 67.0588%);
8223
+ --border-subtle: hsl(var(--hsl-border));
8224
+ --border-default: hsl(var(--hsl-border));
8225
+ --border-hover: rgb(237 237 237 / 0.28);
8226
+ --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
8227
+ --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px hsl(var(--shadow-color) / 0.5);
8228
+ --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px hsl(var(--shadow-color) / 0.6);
8229
+ --hsl-raised: var(--hsl-secondary);
8230
+ --hsl-raised-2: var(--hsl-popover);
8231
+ --well-page: #080809;
8232
+ --well-card: #080809;
8233
+ --well-raised: #28272a;
8234
+ --well-raised-2: #28272a;
8235
+ }
8236
+ [data-theme="agents-light"] {
8237
+ --bg-card: var(--depth-2);
8238
+ --hsl-background: 0 0% 100%;
8239
+ --hsl-foreground: 0 0% 25.098%;
8240
+ --hsl-card: 0 0% 100%;
8241
+ --hsl-card-foreground: var(--hsl-foreground);
8242
+ --hsl-popover: 0 0% 100%;
8243
+ --hsl-popover-foreground: var(--hsl-foreground);
8244
+ --hsl-secondary: 285 13.3333% 94.1176%;
8245
+ --hsl-secondary-foreground: var(--hsl-foreground);
8246
+ --hsl-muted: var(--hsl-secondary);
8247
+ --hsl-muted-foreground: 0 0% 36.4706%;
8248
+ --hsl-accent: var(--hsl-secondary);
8249
+ --hsl-accent-foreground: var(--hsl-foreground);
8250
+ --hsl-border: 300 3.2967% 82.1569%;
8251
+ --hsl-input: 285 33.3333% 97.6471%;
8252
+ --sidebar-background: 285 33.3333% 97.6471%;
8253
+ --sidebar-foreground: var(--hsl-foreground);
8254
+ --sidebar-accent: var(--hsl-secondary);
8255
+ --sidebar-accent-foreground: var(--hsl-foreground);
8256
+ --sidebar-border: var(--hsl-border);
8257
+ --md3-surface: var(--bg-root);
8258
+ --md3-surface-dim: hsl(285 6.4516% 87.8431%);
8259
+ --md3-surface-bright: hsl(var(--hsl-popover));
8260
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
8261
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8262
+ --md3-surface-container: hsl(var(--hsl-card));
8263
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8264
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8265
+ --md3-surface-variant: var(--md3-surface-container-high);
8266
+ --md3-on-surface: var(--text-primary);
8267
+ --md3-on-surface-variant: var(--text-muted);
8268
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8269
+ --md3-outline-variant: hsl(var(--hsl-border));
8270
+ --depth-1: var(--md3-surface);
8271
+ --depth-2: var(--md3-surface-container);
8272
+ --depth-3: var(--md3-surface-container-high);
8273
+ --depth-4: var(--md3-surface-container-highest);
8274
+ --bg-root: hsl(var(--hsl-background));
8275
+ --bg-dark: var(--depth-1);
8276
+ --bg-elevated: var(--depth-4);
8277
+ --bg-section: var(--depth-1);
8278
+ --bg-input: hsl(var(--hsl-input));
8279
+ --bg-hover: var(--accent-text);
8280
+ @supports (color: color-mix(in lab, red, red)) {
8281
+ --bg-hover: color-mix(in srgb, var(--accent-text) 5%, transparent);
8282
+ }
8283
+ --text-primary: hsl(var(--hsl-foreground));
8284
+ --text-secondary: hsl(0 0% 31.7647%);
8285
+ --text-muted: hsl(0 0% 36.4706%);
8286
+ --text-dim: hsl(0 0% 41.9608%);
8287
+ --border-subtle: hsl(var(--hsl-border));
8288
+ --border-default: hsl(var(--hsl-border));
8289
+ --border-hover: rgb(64 64 64 / 0.28);
8290
+ --shadow-card: 0 0 0 1px hsl(var(--shadow-color) / 0.03), 0 2px 6px hsl(var(--shadow-color) / 0.05), 0 4px 8px hsl(var(--shadow-color) / 0.08);
8291
+ --shadow-dropdown: 0 0 0 1px hsl(var(--shadow-color) / 0.04), 0 6px 16px hsl(var(--shadow-color) / 0.12);
8292
+ --shadow-overlay: 0 8px 28px hsl(var(--shadow-color) / 0.28);
8293
+ --hsl-raised: var(--hsl-secondary);
8294
+ --hsl-raised-2: var(--hsl-popover);
8295
+ --well-page: #ffffff;
8296
+ --well-card: #ffffff;
8297
+ --well-raised: #ffffff;
8298
+ --well-raised-2: #ffffff;
8299
+ }
8300
+ [data-theme="website"]:where(:not(.dark)) {
8301
+ --hsl-background: 240 39.1304% 95.4902%;
8302
+ --hsl-foreground: 0 0% 24.7059%;
8303
+ --hsl-card: 0 0% 100%;
8304
+ --hsl-card-foreground: var(--hsl-foreground);
8305
+ --hsl-popover: 0 0% 100%;
8306
+ --hsl-popover-foreground: var(--hsl-foreground);
8307
+ --hsl-secondary: 240 36% 95.098%;
8308
+ --hsl-secondary-foreground: var(--hsl-foreground);
8309
+ --hsl-muted: var(--hsl-secondary);
8310
+ --hsl-muted-foreground: 0 0% 36.4706%;
8311
+ --hsl-accent: var(--hsl-secondary);
8312
+ --hsl-accent-foreground: var(--hsl-foreground);
8313
+ --hsl-border: 240 10.5882% 83.3333%;
8314
+ --hsl-input: 240 100% 98.4314%;
8315
+ --md3-surface: var(--bg-root);
8316
+ --md3-surface-dim: hsl(240 14.2857% 89.0196%);
8317
+ --md3-surface-bright: hsl(var(--hsl-popover));
8318
+ --md3-surface-container-lowest: hsl(var(--hsl-card));
8319
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8320
+ --md3-surface-container: hsl(var(--hsl-card));
8321
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8322
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8323
+ --md3-surface-variant: var(--md3-surface-container-high);
8324
+ --md3-on-surface: var(--text-primary);
8325
+ --md3-on-surface-variant: var(--text-muted);
8326
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8327
+ --md3-outline-variant: hsl(var(--hsl-border));
8328
+ --depth-1: var(--md3-surface);
8329
+ --depth-2: var(--md3-surface-container);
8330
+ --depth-3: var(--md3-surface-container-high);
8331
+ --depth-4: var(--md3-surface-container-highest);
8332
+ --bg-root: hsl(var(--hsl-background));
8333
+ --bg-dark: var(--depth-1);
8334
+ --bg-section: var(--depth-1);
8335
+ --bg-card: var(--depth-2);
8336
+ --bg-elevated: var(--depth-4);
8337
+ --bg-input: hsl(var(--hsl-input));
8338
+ --border-subtle: hsl(var(--hsl-border));
8339
+ --border-default: hsl(var(--hsl-border));
8340
+ --border-hover: rgb(63 63 63 / 0.28);
8341
+ --text-primary: hsl(var(--hsl-foreground));
8342
+ --text-secondary: hsl(0 0% 31.7647%);
8343
+ --text-muted: hsl(0 0% 36.4706%);
8344
+ --text-dim: hsl(0 0% 41.9608%);
8345
+ --hsl-raised: var(--hsl-secondary);
8346
+ --hsl-raised-2: var(--hsl-popover);
8347
+ --well-page: #ffffff;
8348
+ --well-card: #efeff8;
8349
+ --well-raised: #ffffff;
8350
+ --well-raised-2: #efeff8;
8351
+ --sidebar-background: 240 100% 98.4314%;
8352
+ }
8353
+ .dark[data-theme="website"] {
8354
+ --hsl-background: 243.3333 45% 7.8431%;
8355
+ --hsl-foreground: 0 0% 89.4118%;
8356
+ --hsl-card: 243.75 34.7826% 18.0392%;
8357
+ --hsl-card-foreground: var(--hsl-foreground);
8358
+ --hsl-popover: 242.6087 30.6667% 29.4118%;
8359
+ --hsl-popover-foreground: var(--hsl-foreground);
8360
+ --hsl-secondary: 243.1579 31.6667% 23.5294%;
8361
+ --hsl-secondary-foreground: var(--hsl-foreground);
8362
+ --hsl-muted: var(--hsl-secondary);
8363
+ --hsl-muted-foreground: 0 0% 71.3725%;
8364
+ --hsl-accent: var(--hsl-secondary);
8365
+ --hsl-accent-foreground: var(--hsl-foreground);
8366
+ --hsl-border: 243.3962 30.2857% 34.3137%;
8367
+ --hsl-input: 244.8 38.4615% 12.7451%;
8368
+ --md3-surface: var(--bg-root);
8369
+ --md3-surface-dim: hsl(240 55.5556% 3.5294%);
8370
+ --md3-surface-bright: hsl(var(--hsl-popover));
8371
+ --md3-surface-container-lowest: var(--md3-surface-dim);
8372
+ --md3-surface-container-low: hsl(var(--sidebar-background));
8373
+ --md3-surface-container: hsl(var(--hsl-card));
8374
+ --md3-surface-container-high: hsl(var(--hsl-secondary));
8375
+ --md3-surface-container-highest: hsl(var(--hsl-popover));
8376
+ --md3-surface-variant: var(--md3-surface-container-high);
8377
+ --md3-on-surface: var(--text-primary);
8378
+ --md3-on-surface-variant: var(--text-muted);
8379
+ --md3-outline: hsl(var(--hsl-muted-foreground));
8380
+ --md3-outline-variant: hsl(var(--hsl-border));
8381
+ --depth-1: var(--md3-surface);
8382
+ --depth-2: var(--md3-surface-container);
8383
+ --depth-3: var(--md3-surface-container-high);
8384
+ --depth-4: var(--md3-surface-container-highest);
8385
+ --bg-root: hsl(var(--hsl-background));
8386
+ --bg-dark: var(--depth-1);
8387
+ --bg-section: var(--depth-1);
8388
+ --bg-card: var(--depth-2);
8389
+ --bg-elevated: var(--depth-4);
8390
+ --bg-input: hsl(var(--hsl-input));
8391
+ --border-subtle: hsl(var(--hsl-border));
8392
+ --border-default: hsl(var(--hsl-border));
8393
+ --border-hover: rgb(228 228 228 / 0.28);
8394
+ --text-primary: hsl(var(--hsl-foreground));
8395
+ --text-secondary: hsl(0 0% 78.4314%);
8396
+ --text-muted: hsl(0 0% 71.3725%);
8397
+ --text-dim: hsl(0 0% 64.3137%);
8398
+ --hsl-raised: var(--hsl-secondary);
8399
+ --hsl-raised-2: var(--hsl-popover);
8400
+ --well-page: #04040e;
8401
+ --well-card: #04040e;
8402
+ --well-raised: #201e3e;
8403
+ --well-raised-2: #201e3e;
8404
+ --sidebar-background: 244.8 38.4615% 12.7451%;
8405
+ }
8406
+ [data-accent="violet"], [data-accent="violet"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8407
+ --hsl-primary: var(--tone-violet-fill);
8408
+ --hsl-ring: var(--tone-violet-ring);
8409
+ --brand-primary: var(--tone-violet-mark);
8410
+ --brand-cool: var(--tone-violet-line);
8411
+ --accent-text: var(--tone-violet-ink);
8412
+ }
8413
+ [data-accent="orange"], [data-accent="orange"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8414
+ --hsl-primary: var(--tone-orange-fill);
8415
+ --hsl-ring: var(--tone-orange-ring);
8416
+ --brand-primary: var(--tone-orange-mark);
8417
+ --brand-cool: var(--tone-orange-line);
8418
+ --accent-text: var(--tone-orange-ink);
8419
+ }
8420
+ [data-accent="teal"], [data-accent="teal"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8421
+ --hsl-primary: var(--tone-teal-fill);
8422
+ --hsl-ring: var(--tone-teal-ring);
8423
+ --brand-primary: var(--tone-teal-mark);
8424
+ --brand-cool: var(--tone-teal-line);
8425
+ --accent-text: var(--tone-teal-ink);
8426
+ }
8427
+ [data-accent="blue"], [data-accent="blue"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8428
+ --hsl-primary: var(--tone-blue-fill);
8429
+ --hsl-ring: var(--tone-blue-ring);
8430
+ --brand-primary: var(--tone-blue-mark);
8431
+ --brand-cool: var(--tone-blue-line);
8432
+ --accent-text: var(--tone-blue-ink);
8433
+ }
8434
+ [data-accent="pink"], [data-accent="pink"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8435
+ --hsl-primary: var(--tone-pink-fill);
8436
+ --hsl-ring: var(--tone-pink-ring);
8437
+ --brand-primary: var(--tone-pink-mark);
8438
+ --brand-cool: var(--tone-pink-line);
8439
+ --accent-text: var(--tone-pink-ink);
8440
+ }
8441
+ [data-accent="brown"], [data-accent="brown"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8442
+ --hsl-primary: var(--tone-brown-fill);
8443
+ --hsl-ring: var(--tone-brown-ring);
8444
+ --brand-primary: var(--tone-brown-mark);
8445
+ --brand-cool: var(--tone-brown-line);
8446
+ --accent-text: var(--tone-brown-ink);
8447
+ }
8448
+ [data-accent="cyan"], [data-accent="cyan"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8449
+ --hsl-primary: var(--tone-cyan-fill);
8450
+ --hsl-ring: var(--tone-cyan-ring);
8451
+ --brand-primary: var(--tone-cyan-mark);
8452
+ --brand-cool: var(--tone-cyan-line);
8453
+ --accent-text: var(--tone-cyan-ink);
8454
+ }
8455
+ [data-accent="lime"], [data-accent="lime"]:is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), [data-accent="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8456
+ --hsl-primary: var(--tone-lime-fill);
8457
+ --hsl-ring: var(--tone-lime-ring);
8458
+ --brand-primary: var(--tone-lime-mark);
8459
+ --brand-cool: var(--tone-lime-line);
8460
+ --accent-text: var(--tone-lime-ink);
8461
+ }
8462
+ :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]):is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]), :is([data-accent="violet"], [data-accent="orange"], [data-accent="teal"], [data-accent="blue"], [data-accent="pink"], [data-accent="brown"], [data-accent="cyan"], [data-accent="lime"]) :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
8463
+ --btn-primary-hover: hsl(var(--hsl-primary));
8464
+ @supports (color: color-mix(in lab, red, red)) {
8465
+ --btn-primary-hover: color-mix(in srgb, hsl(var(--hsl-primary)), white 10%);
8466
+ }
8467
+ --brand-purple: var(--accent-text);
8468
+ @supports (color: color-mix(in lab, red, red)) {
8469
+ --brand-purple: color-mix(in srgb, var(--accent-text), white 35%);
8470
+ }
8471
+ --brand-strong: hsl(var(--hsl-primary));
8472
+ @supports (color: color-mix(in lab, red, red)) {
8473
+ --brand-strong: color-mix(in srgb, hsl(var(--hsl-primary)), black 50%);
8474
+ }
8475
+ --md3-primary-fixed: light-dark(var(--accent-text), var(--accent-text));
8476
+ @supports (color: color-mix(in lab, red, red)) {
8477
+ --md3-primary-fixed: light-dark(color-mix(in srgb, var(--accent-text) 12%, white), var(--accent-text));
8478
+ }
8479
+ --md3-inverse-primary: light-dark(var(--brand-primary), var(--btn-primary-bg));
8480
+ @supports (color: color-mix(in lab, red, red)) {
8481
+ --md3-inverse-primary: light-dark(color-mix(in srgb, var(--brand-primary), white 40%), var(--btn-primary-bg));
8482
+ }
8483
+ --hsl-primary-foreground: 0 0% 100%;
8484
+ --btn-primary-text: #ffffff;
8485
+ --md3-on-primary: #ffffff;
8486
+ --brand-glow: var(--accent-text);
8487
+ --brand-vibrant: var(--brand-primary);
8488
+ --btn-primary-bg: hsl(var(--hsl-primary));
8489
+ --btn-cta-bg: var(--btn-primary-bg);
8490
+ --btn-cta-text: var(--btn-primary-text);
8491
+ --sidebar-primary: var(--hsl-primary);
8492
+ --sidebar-primary-foreground: var(--hsl-primary-foreground);
8493
+ --sidebar-ring: var(--hsl-ring);
8494
+ --md3-primary: var(--accent-text);
8495
+ --md3-primary-dim: var(--btn-primary-bg);
8496
+ --md3-primary-container: var(--btn-primary-bg);
8497
+ --md3-on-primary-container: light-dark(hsl(0 0% 100%), var(--brand-purple));
8498
+ --md3-primary-fixed-dim: light-dark(var(--md3-primary-fixed), var(--brand-cool));
8499
+ @supports (color: color-mix(in lab, red, red)) {
8500
+ --md3-primary-fixed-dim: light-dark(color-mix(in srgb, var(--md3-primary-fixed) 85%, var(--accent-text)), var(--brand-cool));
8501
+ }
8502
+ --md3-secondary: light-dark(var(--accent-text), var(--brand-purple));
8503
+ --md3-secondary-dim: light-dark(var(--btn-primary-bg), var(--accent-text));
8504
+ --md3-secondary-container: light-dark(var(--md3-primary-fixed), var(--brand-strong));
8505
+ --md3-on-secondary: light-dark(hsl(0 0% 100%), var(--brand-purple));
8506
+ --md3-on-secondary-container: light-dark(var(--accent-text), var(--brand-purple));
8507
+ --md3-surface-tint: var(--accent-text);
8508
+ --accent-surface-soft: light-dark(var(--accent-text), var(--accent-text));
8509
+ @supports (color: color-mix(in lab, red, red)) {
8510
+ --accent-surface-soft: light-dark(color-mix(in srgb, var(--accent-text) 5%, transparent), color-mix(in srgb, var(--accent-text) 7%, transparent));
8511
+ }
8512
+ --accent-surface-strong: light-dark(var(--btn-primary-bg), var(--btn-primary-bg));
8513
+ @supports (color: color-mix(in lab, red, red)) {
8514
+ --accent-surface-strong: light-dark(color-mix(in srgb, var(--btn-primary-bg) 13%, transparent), color-mix(in srgb, var(--btn-primary-bg) 30%, transparent));
8515
+ }
8516
+ --bg-hover: var(--accent-text);
8517
+ @supports (color: color-mix(in lab, red, red)) {
8518
+ --bg-hover: color-mix(in srgb, var(--accent-text) 7%, transparent);
8519
+ }
8520
+ --bg-selection: light-dark(var(--btn-primary-bg), var(--btn-primary-bg));
8521
+ @supports (color: color-mix(in lab, red, red)) {
8522
+ --bg-selection: light-dark(color-mix(in srgb, var(--btn-primary-bg) 16%, transparent), color-mix(in srgb, var(--btn-primary-bg) 28%, transparent));
8523
+ }
8524
+ --border-accent: light-dark(var(--brand-cool), var(--brand-cool));
8525
+ @supports (color: color-mix(in lab, red, red)) {
8526
+ --border-accent: light-dark(color-mix(in srgb, var(--brand-cool) 20%, transparent), color-mix(in srgb, var(--brand-cool) 35%, transparent));
8527
+ }
8528
+ --border-accent-hover: light-dark(var(--brand-cool), var(--brand-cool));
8529
+ @supports (color: color-mix(in lab, red, red)) {
8530
+ --border-accent-hover: light-dark(color-mix(in srgb, var(--brand-cool) 36%, transparent), color-mix(in srgb, var(--brand-cool) 50%, transparent));
8531
+ }
8532
+ --tangle-gradient: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8533
+ --tangle-gradient-text: linear-gradient(135deg, light-dark(var(--btn-primary-bg), var(--brand-purple)), light-dark(var(--btn-primary-hover), var(--accent-text)));
8534
+ --accent-gradient-strong: linear-gradient(135deg, var(--btn-primary-bg), var(--btn-primary-hover));
8535
+ --status-creating: var(--accent-text);
8536
+ --primary: var(--hsl-primary);
8537
+ --primary-foreground: var(--hsl-primary-foreground);
8538
+ --ring: var(--hsl-ring);
8539
+ --syntax-meta: var(--accent-text);
8540
+ --display-control-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 4px 16px hsl(var(--primary) / 0.2);
8541
+ --display-gradient: linear-gradient(135deg, hsl(var(--foreground)) 10%, var(--accent-text) 70%);
8542
+ --focus-border: hsl(var(--hsl-ring) / 0.8);
8543
+ --focus-halo: hsl(var(--hsl-ring) / 0.18);
8544
+ --ix-hover: 0 0 0 1px hsl(var(--hsl-ring) / 0.45), 0 0 0 4px hsl(var(--hsl-ring) / 0.16);
8545
+ --ix-hover-border: hsl(var(--hsl-ring) / 0.7);
8546
+ --ix-press: 0 0 0 1px hsl(var(--hsl-ring) / 0.95), 0 0 0 4px hsl(var(--hsl-ring) / 0.3);
8547
+ --ix-after: 0 0 0 1px hsl(var(--hsl-ring) / 0.6), 0 0 0 3px hsl(var(--hsl-ring) / 0.14);
8548
+ --ix-sel-ring: hsl(var(--hsl-ring) / 0.85);
8549
+ --ix-sel-bg: light-dark(hsl(var(--hsl-ring) / 0.13), hsl(var(--hsl-ring) / 0.18));
8550
+ --ix-hover-bg: light-dark(hsl(var(--hsl-ring) / 0.07), hsl(var(--hsl-ring) / 0.08));
8551
+ --chart-shade: var(--bg-hover);
8552
+ --chart-accent: light-dark(hsl(var(--hsl-primary)), var(--brand-cool));
8553
+ --color-brand: var(--brand-primary);
8554
+ --color-brand-dim: var(--btn-primary-bg);
8555
+ --color-brand-cool: var(--brand-cool);
8556
+ --color-brand-glow: var(--brand-glow);
8557
+ --color-status-creating: var(--status-creating);
8558
+ --color-primary: hsl(var(--primary));
8559
+ --color-primary-foreground: hsl(var(--primary-foreground));
8560
+ --color-ring: hsl(var(--ring));
7237
8561
  }
7238
- }
7239
- [data-tone="violet"], [data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7240
- --tone-bg: var(--tone-violet-bg);
7241
- --tone-bg-hover: var(--tone-violet-bg-hover);
7242
- --tone-bg-selected: var(--tone-violet-bg-selected);
7243
- --tone-border: var(--tone-violet-border);
7244
- --tone-border-selected: var(--tone-violet-border-selected);
7245
- --tone-text: var(--tone-violet-text);
7246
- --tone-icon: var(--tone-violet-icon);
7247
- }
7248
- [data-tone="orange"], [data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7249
- --tone-bg: var(--tone-orange-bg);
7250
- --tone-bg-hover: var(--tone-orange-bg-hover);
7251
- --tone-bg-selected: var(--tone-orange-bg-selected);
7252
- --tone-border: var(--tone-orange-border);
7253
- --tone-border-selected: var(--tone-orange-border-selected);
7254
- --tone-text: var(--tone-orange-text);
7255
- --tone-icon: var(--tone-orange-icon);
7256
- }
7257
- [data-tone="teal"], [data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7258
- --tone-bg: var(--tone-teal-bg);
7259
- --tone-bg-hover: var(--tone-teal-bg-hover);
7260
- --tone-bg-selected: var(--tone-teal-bg-selected);
7261
- --tone-border: var(--tone-teal-border);
7262
- --tone-border-selected: var(--tone-teal-border-selected);
7263
- --tone-text: var(--tone-teal-text);
7264
- --tone-icon: var(--tone-teal-icon);
7265
- }
7266
- [data-tone="blue"], [data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7267
- --tone-bg: var(--tone-blue-bg);
7268
- --tone-bg-hover: var(--tone-blue-bg-hover);
7269
- --tone-bg-selected: var(--tone-blue-bg-selected);
7270
- --tone-border: var(--tone-blue-border);
7271
- --tone-border-selected: var(--tone-blue-border-selected);
7272
- --tone-text: var(--tone-blue-text);
7273
- --tone-icon: var(--tone-blue-icon);
7274
- }
7275
- [data-tone="pink"], [data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7276
- --tone-bg: var(--tone-pink-bg);
7277
- --tone-bg-hover: var(--tone-pink-bg-hover);
7278
- --tone-bg-selected: var(--tone-pink-bg-selected);
7279
- --tone-border: var(--tone-pink-border);
7280
- --tone-border-selected: var(--tone-pink-border-selected);
7281
- --tone-text: var(--tone-pink-text);
7282
- --tone-icon: var(--tone-pink-icon);
7283
- }
7284
- [data-tone="brown"], [data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7285
- --tone-bg: var(--tone-brown-bg);
7286
- --tone-bg-hover: var(--tone-brown-bg-hover);
7287
- --tone-bg-selected: var(--tone-brown-bg-selected);
7288
- --tone-border: var(--tone-brown-border);
7289
- --tone-border-selected: var(--tone-brown-border-selected);
7290
- --tone-text: var(--tone-brown-text);
7291
- --tone-icon: var(--tone-brown-icon);
7292
- }
7293
- [data-tone="cyan"], [data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7294
- --tone-bg: var(--tone-cyan-bg);
7295
- --tone-bg-hover: var(--tone-cyan-bg-hover);
7296
- --tone-bg-selected: var(--tone-cyan-bg-selected);
7297
- --tone-border: var(--tone-cyan-border);
7298
- --tone-border-selected: var(--tone-cyan-border-selected);
7299
- --tone-text: var(--tone-cyan-text);
7300
- --tone-icon: var(--tone-cyan-icon);
7301
- }
7302
- [data-tone="lime"], [data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
7303
- --tone-bg: var(--tone-lime-bg);
7304
- --tone-bg-hover: var(--tone-lime-bg-hover);
7305
- --tone-bg-selected: var(--tone-lime-bg-selected);
7306
- --tone-border: var(--tone-lime-border);
7307
- --tone-border-selected: var(--tone-lime-border-selected);
7308
- --tone-text: var(--tone-lime-text);
7309
- --tone-icon: var(--tone-lime-icon);
7310
- }
7311
- :root, .dark, .light, [data-sandbox-ui], [data-sandbox-theme], [data-theme] {
7312
- --text-display: var(--font-size-display);
7313
- --text-hero: var(--font-size-hero);
7314
- --text-page: var(--font-size-3xl);
7315
- --text-section: var(--font-size-xl);
7316
- --text-eyebrow: var(--font-size-xs);
7317
- --text-control-sm: var(--control-text-sm);
7318
- --text-control-md: var(--control-text-md);
7319
- --text-control-lg: var(--control-text-lg);
7320
- --text-label: var(--font-size-label);
7321
- --text-help: var(--font-size-help);
7322
- --spacing-control-sm: var(--control-height-sm);
7323
- --spacing-control-md: var(--control-height);
7324
- --spacing-control-lg: var(--control-height-lg);
7325
- --spacing-shell-header: var(--shell-header-height);
7326
- --color-brand: var(--brand-primary);
7327
- --color-brand-dim: var(--btn-primary-bg);
7328
- --color-brand-cool: var(--brand-cool);
7329
- --color-brand-glow: var(--brand-glow);
7330
- --color-brand-emerald: var(--brand-emerald);
7331
- --color-status-running: var(--status-running);
7332
- --color-status-creating: var(--status-creating);
7333
- --color-status-stopped: var(--status-stopped);
7334
- --color-status-error: var(--status-error);
7335
- --color-scrim: var(--scrim);
7336
- --color-scrim-strong: var(--scrim-strong);
7337
- --color-on-media: var(--on-media);
7338
- --color-depth-1: var(--depth-1);
7339
- --color-depth-2: var(--depth-2);
7340
- --color-depth-3: var(--depth-3);
7341
- --color-depth-4: var(--depth-4);
7342
- --color-background: hsl(var(--background));
7343
- --color-foreground: hsl(var(--foreground));
7344
- --color-card: hsl(var(--card));
7345
- --color-card-foreground: hsl(var(--card-foreground));
7346
- --color-popover: hsl(var(--popover));
7347
- --color-popover-foreground: hsl(var(--popover-foreground));
7348
- --color-primary: hsl(var(--primary));
7349
- --color-primary-foreground: hsl(var(--primary-foreground));
7350
- --color-secondary: hsl(var(--secondary));
7351
- --color-secondary-foreground: hsl(var(--secondary-foreground));
7352
- --color-muted: hsl(var(--muted));
7353
- --color-muted-foreground: hsl(var(--muted-foreground));
7354
- --color-accent: hsl(var(--accent));
7355
- --color-accent-foreground: hsl(var(--accent-foreground));
7356
- --color-destructive: hsl(var(--destructive));
7357
- --color-destructive-foreground: hsl(var(--destructive-foreground));
7358
- --color-border: hsl(var(--border));
7359
- --color-input: hsl(var(--input));
7360
- --color-ring: hsl(var(--ring));
7361
- --color-surface-container-lowest: var(--md3-surface-container-lowest);
7362
- --color-surface-container-low: var(--md3-surface-container-low);
7363
- --color-surface-container: var(--md3-surface-container);
7364
- --color-surface-container-high: var(--md3-surface-container-high);
7365
- --color-surface-container-highest: var(--md3-surface-container-highest);
7366
- --color-fg: var(--text-primary);
7367
- --color-fg-muted: var(--text-muted);
7368
- --color-fg-dim: var(--text-dim);
7369
- }
7370
- [data-theme="aubergine-light"], [data-theme="arena-light"], [data-theme="super-light"], [data-theme="tangle-light"], [data-theme="agents-light"] {
7371
- --hsl-secondary-foreground: 0 0% 10%;
7372
- --surface-neutral-text: #4b5563;
7373
- }
7374
- [data-theme="aubergine"] {
7375
- --hsl-background: 258 44% 12%;
7376
- --hsl-foreground: 258 50% 97%;
7377
- --hsl-card: 258 40% 20%;
7378
- --hsl-card-foreground: 258 50% 97%;
7379
- --hsl-popover: 258 40% 24%;
7380
- --hsl-popover-foreground: 258 50% 97%;
7381
- --hsl-primary: 250 100% 76%;
7382
- --hsl-primary-foreground: 258 45% 10%;
7383
- --hsl-secondary: 258 38% 17%;
7384
- --hsl-muted: 258 38% 17%;
7385
- --hsl-muted-foreground: 258 26% 70%;
7386
- --hsl-accent: 258 40% 24%;
7387
- --hsl-border: 258 32% 30%;
7388
- --hsl-input: 258 38% 17%;
7389
- --hsl-ring: 250 100% 76%;
7390
- --depth-1: #1a1230;
7391
- --depth-2: #241a42;
7392
- --depth-3: #2f2253;
7393
- --depth-4: #3d2d68;
7394
- --bg-root: #1a1230;
7395
- --bg-card: var(--depth-3);
7396
- --bg-input: var(--depth-2);
7397
- --md3-surface-container-lowest: #150e28;
7398
- --md3-surface-container-low: #241a42;
7399
- --md3-surface-container: #2a1f4c;
7400
- --md3-surface-container-high: #2f2253;
7401
- --md3-surface-container-highest: #3d2d68;
7402
- --md3-outline-variant: #463571;
7403
- --border-subtle: rgba(183,157,255,0.12);
7404
- --border-default: rgba(183,157,255,0.22);
7405
- --border-hover: rgba(183,157,255,0.40);
7406
- --accent-text: #c4b0ff;
7407
- --brand-primary: #8f8bff;
7408
- --brand-glow: #c4b0ff;
7409
- --text-primary: #f4f1fd;
7410
- --text-secondary: #cec4e8;
7411
- --text-muted: #b7afd1;
7412
- --text-dim: #a59ebb;
7413
- --md3-surface: var(--bg-root);
7414
- --md3-surface-dim: var(--md3-surface-container-lowest);
7415
- --md3-surface-bright: var(--md3-surface-container-highest);
7416
- --md3-surface-variant: var(--md3-surface-container-high);
7417
- --md3-on-surface: var(--text-primary);
7418
- --md3-on-surface-variant: var(--text-muted);
7419
- }
7420
- [data-theme="aubergine-light"] {
7421
- --hsl-background: 258 60% 96%;
7422
- --hsl-foreground: 258 45% 11%;
7423
- --hsl-card: 0 0% 100%;
7424
- --hsl-card-foreground: 258 45% 11%;
7425
- --hsl-popover: 0 0% 100%;
7426
- --hsl-popover-foreground: 258 45% 11%;
7427
- --hsl-primary: 258 70% 50%;
7428
- --hsl-primary-foreground: 0 0% 100%;
7429
- --hsl-secondary: 258 45% 92%;
7430
- --hsl-muted: 258 45% 92%;
7431
- --hsl-muted-foreground: 258 18% 42%;
7432
- --hsl-accent: 258 45% 92%;
7433
- --hsl-border: 258 30% 88%;
7434
- --hsl-input: 258 30% 88%;
7435
- --hsl-ring: 258 70% 50%;
7436
- --depth-1: #f4f1fc;
7437
- --depth-2: #ece6f8;
7438
- --depth-3: #ffffff;
7439
- --depth-4: #ffffff;
7440
- --bg-root: #f4f1fc;
7441
- --bg-card: #ffffff;
7442
- --bg-input: #ece6f8;
7443
- --md3-surface-container-lowest: #ffffff;
7444
- --md3-surface-container-low: #faf8fe;
7445
- --md3-surface-container: #f4f1fc;
7446
- --md3-surface-container-high: #ece6f8;
7447
- --md3-surface-container-highest: #e4dcf4;
7448
- --md3-outline-variant: #e0d8f0;
7449
- --border-subtle: rgba(60,32,110,0.10);
7450
- --border-default: rgba(60,32,110,0.16);
7451
- --border-hover: rgba(60,32,110,0.30);
7452
- --accent-text: #6423c8;
7453
- --brand-primary: #6d28d9;
7454
- --brand-glow: #8b5cf6;
7455
- --text-primary: #160f22;
7456
- --text-secondary: #3f3460;
7457
- --text-muted: #585070;
7458
- --text-dim: #655d82;
7459
- --md3-surface: var(--bg-root);
7460
- --md3-surface-dim: var(--depth-2);
7461
- --md3-surface-bright: #ffffff;
7462
- --md3-surface-variant: var(--md3-surface-container-high);
7463
- --md3-on-surface: var(--text-primary);
7464
- --md3-on-surface-variant: var(--text-muted);
7465
- }
7466
- [data-theme="arena"] {
7467
- --hsl-background: 160 16% 6%;
7468
- --hsl-foreground: 150 20% 96%;
7469
- --hsl-card: 158 14% 12%;
7470
- --hsl-card-foreground: 150 20% 96%;
7471
- --hsl-popover: 158 13% 16%;
7472
- --hsl-popover-foreground: 150 20% 96%;
7473
- --hsl-primary: 160 84% 39%;
7474
- --hsl-primary-foreground: 160 60% 8%;
7475
- --hsl-secondary: 158 12% 12%;
7476
- --hsl-muted: 158 12% 12%;
7477
- --hsl-muted-foreground: 152 12% 62%;
7478
- --hsl-accent: 158 14% 14%;
7479
- --hsl-border: 158 14% 18%;
7480
- --hsl-input: 158 12% 12%;
7481
- --hsl-ring: 160 84% 45%;
7482
- --depth-1: #0a0f0c;
7483
- --depth-2: #131b16;
7484
- --depth-3: #1b261f;
7485
- --depth-4: #233328;
7486
- --bg-root: #0a0f0c;
7487
- --bg-card: var(--depth-3);
7488
- --bg-input: var(--depth-2);
7489
- --md3-surface-container-lowest: #070b08;
7490
- --md3-surface-container-low: #131b16;
7491
- --md3-surface-container: #182019;
7492
- --md3-surface-container-high: #1b261f;
7493
- --md3-surface-container-highest: #233328;
7494
- --md3-outline-variant: #2a3a31;
7495
- --border-subtle: rgba(52,211,153,0.10);
7496
- --border-default: rgba(52,211,153,0.18);
7497
- --border-hover: rgba(52,211,153,0.32);
7498
- --accent-text: #34d399;
7499
- --brand-primary: #10b981;
7500
- --brand-glow: #34d399;
7501
- --text-primary: #ecfdf5;
7502
- --text-secondary: #c2e8d6;
7503
- --text-muted: #8fb6a3;
7504
- --text-dim: #7ba08e;
7505
- --md3-surface: var(--bg-root);
7506
- --md3-surface-dim: var(--md3-surface-container-lowest);
7507
- --md3-surface-bright: var(--md3-surface-container-highest);
7508
- --md3-surface-variant: var(--md3-surface-container-high);
7509
- --md3-on-surface: var(--text-primary);
7510
- --md3-on-surface-variant: var(--text-muted);
7511
- }
7512
- [data-theme="arena-light"] {
7513
- --hsl-background: 150 30% 96%;
7514
- --hsl-foreground: 158 30% 10%;
7515
- --hsl-card: 0 0% 100%;
7516
- --hsl-card-foreground: 158 30% 10%;
7517
- --hsl-popover: 0 0% 100%;
7518
- --hsl-popover-foreground: 158 30% 10%;
7519
- --hsl-primary: 160 84% 27%;
7520
- --hsl-primary-foreground: 0 0% 100%;
7521
- --hsl-secondary: 150 25% 92%;
7522
- --hsl-muted: 150 25% 92%;
7523
- --hsl-muted-foreground: 158 14% 40%;
7524
- --hsl-accent: 150 25% 92%;
7525
- --hsl-border: 150 20% 86%;
7526
- --hsl-input: 150 20% 86%;
7527
- --hsl-ring: 160 84% 30%;
7528
- --depth-1: #f0f6f2;
7529
- --depth-2: #e6f0ea;
7530
- --depth-3: #ffffff;
7531
- --depth-4: #ffffff;
7532
- --bg-root: #f0f6f2;
7533
- --bg-card: #ffffff;
7534
- --bg-input: #e6f0ea;
7535
- --md3-surface-container-lowest: #ffffff;
7536
- --md3-surface-container-low: #f6fbf8;
7537
- --md3-surface-container: #f0f6f2;
7538
- --md3-surface-container-high: #e6f0ea;
7539
- --md3-surface-container-highest: #dcebe2;
7540
- --md3-outline-variant: #d7e8de;
7541
- --border-subtle: rgba(6,95,70,0.10);
7542
- --border-default: rgba(6,95,70,0.16);
7543
- --border-hover: rgba(6,95,70,0.30);
7544
- --accent-text: #03674b;
7545
- --brand-primary: #059669;
7546
- --brand-glow: #10b981;
7547
- --text-primary: #06231a;
7548
- --text-secondary: #285048;
7549
- --text-muted: #455f52;
7550
- --text-dim: #4e6d62;
7551
- --md3-surface: var(--bg-root);
7552
- --md3-surface-dim: var(--depth-2);
7553
- --md3-surface-bright: #ffffff;
7554
- --md3-surface-variant: var(--md3-surface-container-high);
7555
- --md3-on-surface: var(--text-primary);
7556
- --md3-on-surface-variant: var(--text-muted);
7557
- }
7558
- [data-theme="super"] {
7559
- --hsl-background: 120 12% 8%;
7560
- --hsl-foreground: 86 20% 93%;
7561
- --hsl-card: 120 11% 12%;
7562
- --hsl-card-foreground: 86 20% 93%;
7563
- --hsl-popover: 120 10% 15%;
7564
- --hsl-popover-foreground: 86 20% 93%;
7565
- --hsl-primary: 139 31% 61%;
7566
- --hsl-primary-foreground: 140 35% 8%;
7567
- --hsl-secondary: 120 9% 17%;
7568
- --hsl-secondary-foreground: 86 20% 93%;
7569
- --hsl-muted: 120 9% 17%;
7570
- --hsl-muted-foreground: 95 10% 67%;
7571
- --hsl-accent: 120 10% 18%;
7572
- --hsl-accent-foreground: 86 20% 93%;
7573
- --hsl-border: 120 9% 25%;
7574
- --hsl-input: 120 9% 17%;
7575
- --hsl-ring: 139 31% 61%;
7576
- --depth-1: #121712;
7577
- --depth-2: #1c231c;
7578
- --depth-3: #232b23;
7579
- --depth-4: #2b342b;
7580
- --bg-root: #121712;
7581
- --bg-card: var(--depth-2);
7582
- --bg-input: var(--depth-3);
7583
- --md3-surface-container-lowest: #0d110d;
7584
- --md3-surface-container-low: #171d17;
7585
- --md3-surface-container: #1c231c;
7586
- --md3-surface-container-high: #232b23;
7587
- --md3-surface-container-highest: #2b342b;
7588
- --md3-outline-variant: #3a453a;
7589
- --border-subtle: rgba(190,210,180,0.12);
7590
- --border-default: rgba(190,210,180,0.20);
7591
- --border-hover: rgba(190,210,180,0.34);
7592
- --accent-text: #8fd0a4;
7593
- --brand-primary: #7dbb91;
7594
- --brand-glow: #8fd0a4;
7595
- --text-primary: #eef1ea;
7596
- --text-secondary: #cbd3c5;
7597
- --text-muted: #a9b3a2;
7598
- --text-dim: #959f8f;
7599
- --md3-primary: #8fd0a4;
7600
- --bg-hover: rgba(190,210,180,0.06);
7601
- --bg-selection: rgba(125,187,145,0.28);
7602
- --accent-surface-soft: rgba(125,187,145,0.08);
7603
- --accent-surface-strong: rgba(125,187,145,0.24);
7604
- --border-accent: rgba(125,187,145,0.38);
7605
- --border-accent-hover: rgba(125,187,145,0.56);
7606
- --btn-primary-bg: #7dbb91;
7607
- --btn-primary-hover: #8fcaa1;
7608
- --btn-primary-text: #0e1d13;
7609
- --btn-cta-bg: #7dbb91;
7610
- --btn-cta-text: #0e1d13;
7611
- --md3-surface: var(--bg-root);
7612
- --md3-surface-dim: var(--md3-surface-container-lowest);
7613
- --md3-surface-bright: var(--md3-surface-container-highest);
7614
- --md3-surface-variant: var(--md3-surface-container-high);
7615
- --md3-on-surface: var(--text-primary);
7616
- --md3-on-surface-variant: var(--text-muted);
7617
- }
7618
- [data-theme="super-light"] {
7619
- --hsl-background: 75 22% 96%;
7620
- --hsl-foreground: 114 13% 15%;
7621
- --hsl-card: 0 0% 100%;
7622
- --hsl-card-foreground: 114 13% 15%;
7623
- --hsl-popover: 0 0% 100%;
7624
- --hsl-popover-foreground: 114 13% 15%;
7625
- --hsl-primary: 148 40% 25%;
7626
- --hsl-primary-foreground: 0 0% 100%;
7627
- --hsl-secondary: 80 18% 93%;
7628
- --hsl-muted: 80 18% 93%;
7629
- --hsl-muted-foreground: 99 9% 37%;
7630
- --hsl-accent: 80 18% 93%;
7631
- --hsl-border: 87 17% 87%;
7632
- --hsl-input: 92 14% 78%;
7633
- --hsl-ring: 144 31% 34%;
7634
- --depth-1: #f7f8f4;
7635
- --depth-2: #eff1eb;
7636
- --depth-3: #ffffff;
7637
- --depth-4: #ffffff;
7638
- --bg-root: #f7f8f4;
7639
- --bg-card: #ffffff;
7640
- --bg-input: #eff1eb;
7641
- --md3-surface-container-lowest: #ffffff;
7642
- --md3-surface-container-low: #fcfcf9;
7643
- --md3-surface-container: #f7f8f4;
7644
- --md3-surface-container-high: #eff1eb;
7645
- --md3-surface-container-highest: #e6eae1;
7646
- --md3-outline-variant: #dfe4d9;
7647
- --border-subtle: rgba(34,43,33,0.10);
7648
- --border-default: rgba(34,43,33,0.16);
7649
- --border-hover: rgba(34,43,33,0.30);
7650
- --accent-text: #275a3f;
7651
- --brand-primary: #275a3f;
7652
- --brand-glow: #3b7050;
7653
- --text-primary: #222b21;
7654
- --text-secondary: #46523f;
7655
- --text-muted: #5d6857;
7656
- --text-dim: #616c5a;
7657
- --md3-primary: #275a3f;
7658
- --bg-hover: rgba(34,43,33,0.04);
7659
- --bg-selection: rgba(39,90,63,0.16);
7660
- --accent-surface-soft: rgba(39,90,63,0.06);
7661
- --accent-surface-strong: rgba(39,90,63,0.14);
7662
- --border-accent: rgba(39,90,63,0.30);
7663
- --border-accent-hover: rgba(39,90,63,0.45);
7664
- --btn-primary-bg: #275a3f;
7665
- --btn-primary-hover: #1e4832;
7666
- --btn-primary-text: #ffffff;
7667
- --btn-cta-bg: #275a3f;
7668
- --btn-cta-text: #ffffff;
7669
- --md3-surface: var(--bg-root);
7670
- --md3-surface-dim: var(--depth-2);
7671
- --md3-surface-bright: #ffffff;
7672
- --md3-surface-variant: var(--md3-surface-container-high);
7673
- --md3-on-surface: var(--text-primary);
7674
- --md3-on-surface-variant: var(--text-muted);
7675
- }
7676
- [data-theme="tangle-light"] {
7677
- --hsl-background: 240 33% 98%;
7678
- --hsl-foreground: 245 32% 14%;
7679
- --hsl-card: 0 0% 100%;
7680
- --hsl-card-foreground: 245 32% 14%;
7681
- --hsl-popover: 0 0% 100%;
7682
- --hsl-popover-foreground: 245 32% 14%;
7683
- --hsl-primary: 239 84% 60%;
7684
- --hsl-primary-foreground: 0 0% 100%;
7685
- --hsl-secondary: 240 30% 95%;
7686
- --hsl-muted: 240 28% 95%;
7687
- --hsl-muted-foreground: 240 8% 42%;
7688
- --hsl-accent: 240 30% 95%;
7689
- --hsl-border: 240 20% 90%;
7690
- --hsl-input: 240 20% 90%;
7691
- --hsl-ring: 239 84% 60%;
7692
- --depth-1: #f4f4f9;
7693
- --depth-2: #edecf4;
7694
- --depth-3: #ffffff;
7695
- --depth-4: #ffffff;
7696
- --bg-root: #f4f4f9;
7697
- --bg-card: #ffffff;
7698
- --bg-input: #edecf4;
7699
- --md3-surface-container-lowest: #ffffff;
7700
- --md3-surface-container-low: #f8f8fc;
7701
- --md3-surface-container: #f4f4f9;
7702
- --md3-surface-container-high: #edecf4;
7703
- --md3-surface-container-highest: #e5e4ee;
7704
- --md3-outline-variant: #e2e1ec;
7705
- --border-subtle: rgba(20,20,40,0.08);
7706
- --border-default: rgba(20,20,40,0.14);
7707
- --border-hover: rgba(20,20,40,0.26);
7708
- --accent-text: #453be3;
7709
- --brand-primary: #6366f1;
7710
- --brand-glow: #818cf8;
7711
- --text-primary: #15131f;
7712
- --text-secondary: #3f3a52;
7713
- --text-muted: #59556b;
7714
- --text-dim: #67627b;
7715
- }
7716
- .dark[data-theme="intelligence"] {
7717
- --md3-surface: #0d0a10;
7718
- --md3-surface-dim: #0a080d;
7719
- --md3-surface-bright: #2e2936;
7720
- --md3-surface-container-lowest: #070509;
7721
- --md3-surface-container-low: #100d15;
7722
- --md3-surface-container: #14111a;
7723
- --md3-surface-container-high: #1b1821;
7724
- --md3-surface-container-highest: #24202b;
7725
- --md3-surface-variant: #24202b;
7726
- --md3-on-surface-variant: #aaa6bb;
7727
- --hsl-background: 262 24% 5%;
7728
- --hsl-card: 262 19% 11%;
7729
- --hsl-popover: 260 16% 13%;
7730
- --hsl-secondary: 262 15% 18%;
7731
- --hsl-muted: 262 17% 15%;
7732
- --hsl-muted-foreground: 255 12% 62%;
7733
- --hsl-accent: 262 15% 20%;
7734
- --hsl-border: 262 12% 28%;
7735
- --hsl-input: 260 14% 16%;
7736
- --sidebar-background: 264 26% 4%;
7737
- --sidebar-accent: 262 16% 16%;
7738
- --sidebar-border: 262 12% 13%;
7739
- --depth-1: #0e0b13;
7740
- --depth-2: #16131c;
7741
- --depth-3: #201c28;
7742
- --depth-4: #2a2533;
7743
- --bg-elevated: hsl(262 17% 15%);
7744
- --bg-section: hsl(262 22% 7%);
7745
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(129, 99, 241, 0.08), transparent),
7746
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
7747
- linear-gradient(180deg, var(--depth-1), #0d0a12 100%);
7748
- --border-subtle: rgba(120, 108, 158, 0.1);
7749
- --border-default: rgba(120, 108, 158, 0.18);
7750
- --border-hover: rgba(120, 108, 158, 0.28);
7751
- }
7752
- [data-theme="hospitality"]:where(:not(.dark)) {
7753
- --hsl-background: 108 16.7% 88.2%;
7754
- --hsl-foreground: 143 25% 12%;
7755
- --hsl-card: 0 0% 100%;
7756
- --hsl-card-foreground: 143 25% 12%;
7757
- --hsl-popover: 0 0% 100%;
7758
- --hsl-popover-foreground: 143 25% 12%;
7759
- --hsl-primary: 153 38% 25%;
7760
- --hsl-primary-foreground: 0 0% 100%;
7761
- --hsl-secondary: 110 18.7% 93.7%;
7762
- --hsl-secondary-foreground: 143 25% 12%;
7763
- --hsl-muted: 110 18.7% 93.7%;
7764
- --hsl-muted-foreground: 138 7.3% 35.5%;
7765
- --hsl-accent: 133 38.4% 88%;
7766
- --hsl-accent-foreground: 143 25% 12%;
7767
- --hsl-border: 107 8.7% 79.8%;
7768
- --hsl-input: 0 0% 100%;
7769
- --hsl-ring: 148 28% 43%;
7770
- --hsl-destructive: 0 73.7% 41.8%;
7771
- --hsl-raised: 110 18.7% 93.7%;
7772
- --hsl-raised-2: 0 0% 100%;
7773
- --sidebar-background: 108 21.7% 95.5%;
7774
- --sidebar-foreground: 143 25% 12%;
7775
- --sidebar-primary: 153 38% 25%;
7776
- --sidebar-primary-foreground: 0 0% 100%;
7777
- --sidebar-accent: 133 38.4% 88%;
7778
- --sidebar-accent-foreground: 143 25% 12%;
7779
- --sidebar-border: 107 8.7% 79.8%;
7780
- --sidebar-ring: 148 28% 43%;
7781
- --md3-surface: #dee6dc;
7782
- --md3-surface-dim: #d3dcd1;
7783
- --md3-surface-bright: #ffffff;
7784
- --md3-surface-container-lowest: #ffffff;
7785
- --md3-surface-container-low: #f2f6f1;
7786
- --md3-surface-container: #ffffff;
7787
- --md3-surface-container-high: #edf2ec;
7788
- --md3-surface-container-highest: #ffffff;
7789
- --md3-surface-variant: #edf2ec;
7790
- --md3-on-surface: #17261d;
7791
- --md3-on-surface-variant: #546158;
7792
- --md3-outline: #6d8376;
7793
- --md3-outline-variant: #c9d0c7;
7794
- --md3-primary: #285842;
7795
- --md3-primary-dim: #1f4735;
7796
- --md3-primary-container: #1f4735;
7797
- --md3-on-primary: #ffffff;
7798
- --md3-surface-tint: #285842;
7799
- --depth-1: #dee6dc;
7800
- --depth-2: #ffffff;
7801
- --depth-3: #edf2ec;
7802
- --depth-4: #ffffff;
7803
- --bg-root: #dee6dc;
7804
- --bg-dark: #dee6dc;
7805
- --bg-section: #dee6dc;
7806
- --bg-card: #ffffff;
7807
- --bg-elevated: #ffffff;
7808
- --bg-input: #ffffff;
7809
- --well-page: #ffffff;
7810
- --well-card: #ebf0e9;
7811
- --well-raised: #ffffff;
7812
- --well-raised-2: #ebf0e9;
7813
- --bg-hover: rgba(40, 88, 66, 0.05);
7814
- --bg-selection: rgba(40, 88, 66, 0.16);
7815
- --border-subtle: rgba(23, 38, 29, 0.11);
7816
- --border-default: rgba(23, 38, 29, 0.16);
7817
- --border-hover: rgba(23, 38, 29, 0.28);
7818
- --border-strong: #798479;
7819
- --field-border: #798479;
7820
- --border-accent: rgba(40, 88, 66, 0.20);
7821
- --border-accent-hover: rgba(40, 88, 66, 0.36);
7822
- --shadow-card: 0 1px 2px rgba(23, 38, 29, 0.07), 0 4px 14px -4px rgba(23, 38, 29, 0.10);
7823
- --shadow-raised: 0 1px 1px rgba(23, 38, 29, 0.05), 0 2px 6px -2px rgba(23, 38, 29, 0.07);
7824
- --shadow-well: inset 0 1px 2px rgba(23, 38, 29, 0.06);
7825
- --edge-highlight: 0 0 0 0 transparent;
7826
- --accent-text: #285842;
7827
- --accent-surface-soft: rgba(40, 88, 66, 0.05);
7828
- --accent-surface-strong: rgba(40, 88, 66, 0.13);
7829
- --accent-gradient-strong: linear-gradient(135deg, #1f4735, #336c52);
7830
- --brand-primary: #3d7b5f;
7831
- --brand-cool: #4f8c6c;
7832
- --brand-glow: #6cac8a;
7833
- --brand-vibrant: #3d7b5f;
7834
- --btn-primary-bg: #285842;
7835
- --btn-primary-hover: #336c52;
7836
- --btn-primary-text: #ffffff;
7837
- --text-primary: #17261d;
7838
- --text-secondary: #36493e;
7839
- --text-muted: #546158;
7840
- --text-dim: #546158;
7841
- --surface-success-bg: #c5edce;
7842
- --surface-success-text: #1e5b34;
7843
- --surface-success-border: #91c79e;
7844
- --surface-warning-bg: #f4e3bf;
7845
- --surface-warning-text: #804d0c;
7846
- --surface-warning-border: #dcb87a;
7847
- --surface-danger-bg: #fadad8;
7848
- --surface-danger-text: #a5292b;
7849
- --surface-danger-border: #e8acaa;
7850
- --surface-neutral-bg: #e5e9e4;
7851
- --surface-neutral-text: #576157;
7852
- --surface-neutral-border: #c0c6bf;
7853
- }
7854
- .dark[data-theme="hospitality"] {
7855
- --hsl-background: 140 10.3% 5.7%;
7856
- --hsl-foreground: 140 12% 90.2%;
7857
- --hsl-card: 132 5.3% 18.6%;
7858
- --hsl-card-foreground: 140 12% 90.2%;
7859
- --hsl-popover: 130 3.9% 29.8%;
7860
- --hsl-popover-foreground: 140 12% 90.2%;
7861
- --hsl-primary: 145 31% 59%;
7862
- --hsl-primary-foreground: 153 35% 10%;
7863
- --hsl-secondary: 130 4.6% 25.5%;
7864
- --hsl-secondary-foreground: 140 12% 90.2%;
7865
- --hsl-muted: 130 4.6% 25.5%;
7866
- --hsl-muted-foreground: 128 5.6% 73.9%;
7867
- --hsl-accent: 140 18% 20%;
7868
- --hsl-accent-foreground: 140 12% 90.2%;
7869
- --hsl-border: 130 3.9% 29.8%;
7870
- --hsl-input: 120 16.7% 2.4%;
7871
- --hsl-ring: 145 31% 59%;
7872
- --hsl-destructive: 0 80% 88%;
7873
- --hsl-raised: 130 4.6% 25.5%;
7874
- --hsl-raised-2: 130 3.7% 31.8%;
7875
- --sidebar-background: 120 8% 9.8%;
7876
- --sidebar-foreground: 140 12% 90.2%;
7877
- --sidebar-primary: 145 31% 59%;
7878
- --sidebar-primary-foreground: 153 35% 10%;
7879
- --sidebar-accent: 140 18% 20%;
7880
- --sidebar-accent-foreground: 140 12% 90.2%;
7881
- --sidebar-border: 130 3.9% 29.8%;
7882
- --sidebar-ring: 145 31% 59%;
7883
- --md3-surface: #0d100e;
7884
- --md3-surface-dim: #050705;
7885
- --md3-surface-bright: #494f4a;
7886
- --md3-surface-container-lowest: #050705;
7887
- --md3-surface-container-low: #171b17;
7888
- --md3-surface-container: #2d322e;
7889
- --md3-surface-container-high: #3e443f;
7890
- --md3-surface-container-highest: #494f4a;
7891
- --md3-surface-variant: #3e443f;
7892
- --md3-on-surface: #e3e9e5;
7893
- --md3-on-surface-variant: #b9c0ba;
7894
- --md3-outline: #8a938e;
7895
- --md3-outline-variant: #494f4a;
7896
- --md3-primary: #99caad;
7897
- --md3-primary-dim: #396a52;
7898
- --md3-primary-container: #396a52;
7899
- --md3-on-primary: #11221a;
7900
- --md3-surface-tint: #76b791;
7901
- --depth-1: #0d100e;
7902
- --depth-2: #2d322e;
7903
- --depth-3: #3e443f;
7904
- --depth-4: #494f4a;
7905
- --bg-root: #0d100e;
7906
- --bg-dark: #0d100e;
7907
- --bg-section: #0d100e;
7908
- --bg-card: #2d322e;
7909
- --bg-elevated: #494f4a;
7910
- --bg-input: #050705;
7911
- --well-page: #050705;
7912
- --well-card: #050705;
7913
- --well-raised: #181c18;
7914
- --well-raised-2: #181c18;
7915
- --bg-hover: rgba(118, 183, 145, 0.07);
7916
- --bg-selection: rgba(118, 183, 145, 0.28);
7917
- --border-subtle: rgba(227, 233, 229, 0.10);
7918
- --border-default: rgba(227, 233, 229, 0.16);
7919
- --border-hover: rgba(227, 233, 229, 0.28);
7920
- --border-strong: #939c94;
7921
- --field-border: #939c94;
7922
- --border-accent: rgba(118, 183, 145, 0.35);
7923
- --border-accent-hover: rgba(118, 183, 145, 0.50);
7924
- --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
7925
- --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);
7926
- --shadow-well: inset 0 1px 2px rgba(0, 0, 0, 0.5);
7927
- --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
7928
- --accent-text: #b2dbc2;
7929
- --accent-surface-soft: rgba(118, 183, 145, 0.07);
7930
- --accent-surface-strong: rgba(57, 106, 82, 0.40);
7931
- --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
7932
- --brand-primary: #529873;
7933
- --brand-cool: #76b791;
7934
- --brand-glow: #94c7a9;
7935
- --brand-vibrant: #529873;
7936
- --btn-primary-bg: #76b791;
7937
- --btn-primary-hover: #8dc3a4;
7938
- --btn-primary-text: #11221a;
7939
- --text-primary: #e3e9e5;
7940
- --text-secondary: #c5cec9;
7941
- --text-muted: #b9c0ba;
7942
- --text-dim: #b9c0ba;
7943
- --surface-success-bg: #254930;
7944
- --surface-success-text: #9ce9b1;
7945
- --surface-success-border: #437652;
7946
- --surface-warning-bg: #513d21;
7947
- --surface-warning-text: #fed081;
7948
- --surface-warning-border: #8d6b39;
7949
- --surface-danger-bg: #5c3231;
7950
- --surface-danger-text: #f7b3b0;
7951
- --surface-danger-border: #a45857;
7952
- --surface-neutral-bg: #3e443f;
7953
- --surface-neutral-text: #b9c0ba;
7954
- --surface-neutral-border: #5f6560;
7955
- }
7956
- [data-theme="agents"] {
7957
- --bg-card: #1a191b;
7958
- --hsl-background: 270 5.6% 7.1%;
7959
- --hsl-foreground: 240 6.2% 93.7%;
7960
- --hsl-card: 270 3.8% 10.2%;
7961
- --hsl-card-foreground: 240 6.2% 93.7%;
7962
- --hsl-popover: 260 4.2% 13.9%;
7963
- --hsl-popover-foreground: 240 6.2% 93.7%;
7964
- --hsl-secondary: 260 4.2% 13.9%;
7965
- --hsl-secondary-foreground: 240 6.2% 93.7%;
7966
- --hsl-muted: 260 4.2% 13.9%;
7967
- --hsl-muted-foreground: 258 6.9% 71.8%;
7968
- --hsl-accent: 270 4.7% 16.9%;
7969
- --hsl-accent-foreground: 240 6.2% 93.7%;
7970
- --hsl-border: 270 5% 23.5%;
7971
- --hsl-input: 251 4.8% 44.9%;
7972
- --sidebar-background: 270 3.8% 10.2%;
7973
- --sidebar-foreground: 240 6.2% 93.7%;
7974
- --sidebar-accent: 270 4.7% 16.9%;
7975
- --sidebar-accent-foreground: 240 6.2% 93.7%;
7976
- --sidebar-border: 270 5% 23.5%;
7977
- --md3-surface: #121113;
7978
- --md3-surface-dim: #121113;
7979
- --md3-surface-bright: #323035;
7980
- --md3-surface-container-lowest: #121113;
7981
- --md3-surface-container-low: #1a191b;
7982
- --md3-surface-container: #1a191b;
7983
- --md3-surface-container-high: #232225;
7984
- --md3-surface-container-highest: #2b292d;
7985
- --md3-surface-variant: #232225;
7986
- --md3-on-surface: #eeeef0;
7987
- --md3-on-surface-variant: #b5b2bc;
7988
- --md3-outline: #6f6d78;
7989
- --md3-outline-variant: #3c393f;
7990
- --depth-1: #121113;
7991
- --depth-2: #1a191b;
7992
- --depth-3: #232225;
7993
- --depth-4: #2b292d;
7994
- --bg-root: #121113;
7995
- --bg-dark: #121113;
7996
- --bg-elevated: #232225;
7997
- --bg-section: #121113;
7998
- --bg-input: #1a191b;
7999
- --bg-hover: #232225;
8000
- --text-primary: #eeeef0;
8001
- --text-secondary: #eeeef0;
8002
- --text-muted: #b5b2bc;
8003
- --text-dim: #b5b2bc;
8004
- --border-subtle: #3c393f;
8005
- --border-default: #49474e;
8006
- --border-hover: #625f69;
8007
- --shadow-card: inset 0 0 0 1px rgb(255 255 255 / 0.06);
8008
- --shadow-dropdown: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.5);
8009
- --shadow-overlay: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 16px 48px rgb(0 0 0 / 0.6);
8010
- }
8011
- [data-theme="agents-light"] {
8012
- --bg-card: #ffffff;
8013
- --hsl-background: 0 0% 100%;
8014
- --hsl-foreground: 257 10.1% 13.5%;
8015
- --hsl-card: 0 0% 100%;
8016
- --hsl-card-foreground: 257 10.1% 13.5%;
8017
- --hsl-popover: 0 0% 100%;
8018
- --hsl-popover-foreground: 257 10.1% 13.5%;
8019
- --hsl-secondary: 285 14.3% 94.5%;
8020
- --hsl-secondary-foreground: 257 10.1% 13.5%;
8021
- --hsl-muted: 285 14.3% 94.5%;
8022
- --hsl-muted-foreground: 252 4.8% 40.8%;
8023
- --hsl-accent: 276 11.6% 91.6%;
8024
- --hsl-accent-foreground: 257 10.1% 13.5%;
8025
- --hsl-border: 262 11.4% 86.3%;
8026
- --hsl-input: 249 6% 57.5%;
8027
- --sidebar-background: 270 20% 98%;
8028
- --sidebar-foreground: 257 10.1% 13.5%;
8029
- --sidebar-accent: 276 11.6% 91.6%;
8030
- --sidebar-accent-foreground: 257 10.1% 13.5%;
8031
- --sidebar-border: 262 11.4% 86.3%;
8032
- --md3-surface: #ffffff;
8033
- --md3-surface-dim: #faf9fb;
8034
- --md3-surface-bright: #ffffff;
8035
- --md3-surface-container-lowest: #ffffff;
8036
- --md3-surface-container-low: #faf9fb;
8037
- --md3-surface-container: #ffffff;
8038
- --md3-surface-container-high: #f2eff3;
8039
- --md3-surface-container-highest: #ffffff;
8040
- --md3-surface-variant: #f2eff3;
8041
- --md3-on-surface: #211f26;
8042
- --md3-on-surface-variant: #65636d;
8043
- --md3-outline: #8e8c99;
8044
- --md3-outline-variant: #dbd8e0;
8045
- --depth-1: #ffffff;
8046
- --depth-2: #ffffff;
8047
- --depth-3: #faf9fb;
8048
- --depth-4: #ffffff;
8049
- --bg-root: #ffffff;
8050
- --bg-dark: #faf9fb;
8051
- --bg-elevated: #ffffff;
8052
- --bg-section: #faf9fb;
8053
- --bg-input: #ffffff;
8054
- --bg-hover: #f2eff3;
8055
- --text-primary: #211f26;
8056
- --text-secondary: #211f26;
8057
- --text-muted: #65636d;
8058
- --text-dim: #65636d;
8059
- --border-subtle: #dbd8e0;
8060
- --border-default: #d0cdd7;
8061
- --border-hover: #bcbac7;
8062
- --shadow-card: 0 0 0 1px rgb(33 31 38 / 0.03), 0 2px 6px rgb(33 31 38 / 0.05), 0 4px 8px rgb(33 31 38 / 0.08);
8063
- --shadow-dropdown: 0 0 0 1px rgb(33 31 38 / 0.04), 0 6px 16px rgb(33 31 38 / 0.12);
8064
- --shadow-overlay: 0 8px 28px rgb(33 31 38 / 0.28);
8065
- }
8066
- [data-theme="website"]:where(:not(.dark)) {
8067
- --hsl-background: 240 42.9% 97.3%;
8068
- --hsl-foreground: 224 18% 12%;
8069
- --hsl-card: 0 0% 100%;
8070
- --hsl-card-foreground: 224 18% 12%;
8071
- --hsl-popover: 0 0% 100%;
8072
- --hsl-popover-foreground: 224 18% 12%;
8073
- --hsl-secondary: 240 35.7% 94.5%;
8074
- --hsl-secondary-foreground: 224 18% 12%;
8075
- --hsl-muted: 240 35.7% 94.5%;
8076
- --hsl-muted-foreground: 240 13% 42.4%;
8077
- --hsl-accent: 240 23.1% 92.4%;
8078
- --hsl-accent-foreground: 224 18% 12%;
8079
- --hsl-border: 240 26.3% 88.8%;
8080
- --hsl-input: 240 42.9% 97.3%;
8081
- --md3-surface: #f5f5fb;
8082
- --md3-surface-dim: #e7e7f0;
8083
- --md3-surface-bright: #ffffff;
8084
- --md3-surface-container-lowest: #ffffff;
8085
- --md3-surface-container-low: #fafafd;
8086
- --md3-surface-container: #ffffff;
8087
- --md3-surface-container-high: #ececf6;
8088
- --md3-surface-container-highest: #ffffff;
8089
- --md3-surface-variant: #ececf6;
8090
- --md3-on-surface: #191c24;
8091
- --md3-on-surface-variant: #5e5e7a;
8092
- --md3-outline: #5e5e7a;
8093
- --md3-outline-variant: #dbdbea;
8094
- --depth-1: #f5f5fb;
8095
- --depth-2: #ffffff;
8096
- --depth-3: #ececf6;
8097
- --depth-4: #ffffff;
8098
- --bg-root: #f5f5fb;
8099
- --bg-dark: #f5f5fb;
8100
- --bg-section: #ececf6;
8101
- --bg-card: #ffffff;
8102
- --bg-elevated: #ffffff;
8103
- --bg-input: #f5f5fb;
8104
- --border-subtle: rgba(25, 28, 36, 0.08);
8105
- --border-default: rgba(25, 28, 36, 0.12);
8106
- --border-hover: rgba(25, 28, 36, 0.24);
8107
- --text-primary: #191c24;
8108
- --text-secondary: #3a3a50;
8109
- --text-muted: #5e5e7a;
8110
- --text-dim: #5e5e7a;
8111
- }
8112
- .dark[data-theme="website"] {
8113
- --hsl-background: 243 45% 7.8%;
8114
- --hsl-foreground: 0 0% 99.2%;
8115
- --hsl-card: 244 34.9% 16.3%;
8116
- --hsl-card-foreground: 0 0% 99.2%;
8117
- --hsl-popover: 243 33.3% 21.2%;
8118
- --hsl-popover-foreground: 0 0% 99.2%;
8119
- --hsl-secondary: 244 34% 19%;
8120
- --hsl-secondary-foreground: 0 0% 99.2%;
8121
- --hsl-muted: 244 34% 19%;
8122
- --hsl-muted-foreground: 237 23% 65.9%;
8123
- --hsl-accent: 243 33.3% 21.2%;
8124
- --hsl-accent-foreground: 0 0% 99.2%;
8125
- --hsl-border: 243 31.9% 28.2%;
8126
- --hsl-input: 243 41.2% 10%;
8127
- --md3-surface: #0c0b1d;
8128
- --md3-surface-dim: #080814;
8129
- --md3-surface-bright: #2e2c56;
8130
- --md3-surface-container-lowest: #080814;
8131
- --md3-surface-container-low: #141328;
8132
- --md3-surface-container: #1d1b38;
8133
- --md3-surface-container-high: #222041;
8134
- --md3-surface-container-highest: #262448;
8135
- --md3-surface-variant: #222041;
8136
- --md3-on-surface: #fdfdfd;
8137
- --md3-on-surface-variant: #aaa8b8;
8138
- --md3-outline: #9496bc;
8139
- --md3-outline-variant: #33315f;
8140
- --depth-1: #0c0b1d;
8141
- --depth-2: #1d1b38;
8142
- --depth-3: #222041;
8143
- --depth-4: #262448;
8144
- --bg-root: #0c0b1d;
8145
- --bg-dark: #0c0b1d;
8146
- --bg-section: #141328;
8147
- --bg-card: #1d1b38;
8148
- --bg-elevated: #262448;
8149
- --bg-input: #100f24;
8150
- --border-subtle: rgba(255, 255, 255, 0.08);
8151
- --border-default: rgba(255, 255, 255, 0.15);
8152
- --border-hover: rgba(255, 255, 255, 0.28);
8153
- --text-primary: #fdfdfd;
8154
- --text-secondary: #aaa8b8;
8155
- --text-muted: #9496bc;
8156
- --text-dim: #9496bc;
8157
8562
  }
8158
8563
  :is(.dark, .light, [data-theme], [data-sandbox-theme="vault"]) {
8159
8564
  --foreground: var(--hsl-foreground);
@@ -8711,105 +9116,109 @@
8711
9116
  .tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
8712
9117
  border-left: 1px solid var(--border-subtle);
8713
9118
  }
9119
+ .agent-graph {
9120
+ container-type: inline-size;
9121
+ }
8714
9122
  .ag-live {
8715
9123
  --ag-fg: hsl(var(--foreground));
8716
9124
  --ag-muted: hsl(var(--muted-foreground));
8717
9125
  --ag-surface: hsl(var(--card));
8718
9126
  --ag-border: hsl(var(--border));
8719
9127
  }
8720
- .ag-live .ag-live-card {
9128
+ .ag-live-slot {
9129
+ display: flex;
9130
+ align-items: center;
9131
+ width: 100%;
9132
+ height: 100%;
9133
+ }
9134
+ .ag-live-card {
8721
9135
  position: relative;
8722
9136
  display: flex;
8723
9137
  flex-direction: column;
8724
- gap: 8px;
9138
+ gap: 4px;
9139
+ box-sizing: border-box;
8725
9140
  width: 100%;
8726
9141
  height: 100%;
8727
- padding: 12px;
9142
+ padding: 10px;
8728
9143
  border: 1px solid var(--ag-border);
8729
- border-radius: 14px;
9144
+ border-radius: var(--radius-card);
9145
+ animation: agent-arrive var(--motion-arrive) both;
8730
9146
  background: var(--ag-surface);
8731
9147
  color: var(--ag-fg);
8732
- cursor: pointer;
8733
9148
  overflow: hidden;
8734
- animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both;
8735
- transform-origin: 50% 0;
8736
- transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1);
8737
- }
8738
- .ag-live .ag-live-card:hover {
8739
- transform: translateY(-1px);
8740
- }
8741
- .ag-live .ag-live-card[data-status="running"]::before {
8742
- content: "";
8743
- position: absolute;
8744
- inset: 0 0 auto;
8745
- height: 2px;
8746
- background: linear-gradient(90deg, transparent, var(--ag-status), transparent);
8747
- background-size: 40% 100%;
8748
- background-repeat: no-repeat;
8749
- animation: ag-live-sheen 2.4s ease-in-out infinite;
8750
- }
8751
- .ag-live .ag-live-head {
8752
- display: flex;
9149
+ transition: height var(--motion-surface), border-radius var(--motion-surface), border-color var(--motion-control), box-shadow var(--motion-control);
9150
+ }
9151
+ .ag-live-head {
9152
+ display: grid;
9153
+ grid-template-columns: 18px minmax(0, 1fr) auto;
8753
9154
  align-items: center;
8754
- gap: 8px;
9155
+ column-gap: 8px;
8755
9156
  min-width: 0;
8756
9157
  }
8757
- .ag-live .ag-live-names {
8758
- display: flex;
8759
- flex-direction: column;
8760
- min-width: 0;
8761
- flex: 1;
9158
+ .ag-live-head > :first-child {
9159
+ grid-column: 1;
9160
+ grid-row: 1 / 3;
8762
9161
  }
8763
- .ag-live .ag-live-name {
9162
+ .ag-live-names, .ag-live-stats {
9163
+ display: contents;
9164
+ }
9165
+ .ag-live-name {
9166
+ grid-column: 2;
9167
+ grid-row: 1;
8764
9168
  font-size: 14px;
8765
9169
  line-height: 18px;
8766
9170
  font-weight: 600;
8767
- letter-spacing: -.01em;
8768
- white-space: nowrap;
8769
9171
  overflow: hidden;
8770
9172
  text-overflow: ellipsis;
9173
+ white-space: nowrap;
8771
9174
  }
8772
- .ag-live .ag-live-meta, .ag-live .ag-live-stats {
8773
- font-size: 11px;
8774
- line-height: 14px;
9175
+ .ag-live-meta, .ag-live-stats {
9176
+ font-size: 12px;
9177
+ line-height: 16px;
8775
9178
  color: var(--ag-muted);
8776
- white-space: nowrap;
9179
+ }
9180
+ .ag-live-meta {
9181
+ grid-column: 2 / -1;
9182
+ grid-row: 2;
8777
9183
  overflow: hidden;
8778
9184
  text-overflow: ellipsis;
9185
+ white-space: nowrap;
8779
9186
  }
8780
- .ag-live .ag-live-stats {
8781
- display: flex;
8782
- flex-direction: column;
8783
- align-items: flex-end;
8784
- gap: 2px;
9187
+ .ag-live-accounting {
9188
+ grid-column: 2 / -1;
9189
+ grid-row: 3;
8785
9190
  font-variant-numeric: tabular-nums;
8786
- flex: none;
8787
9191
  }
8788
- .ag-live .ag-live-pill {
9192
+ .ag-live-pill {
9193
+ grid-column: 3;
9194
+ grid-row: 1;
9195
+ justify-self: end;
8789
9196
  display: inline-flex;
8790
9197
  align-items: center;
8791
9198
  gap: 4px;
8792
- height: 16px;
8793
- padding: 0 6px;
8794
- border-radius: 8px;
8795
- font-weight: 600;
8796
9199
  color: var(--ag-status);
8797
- background: var(--ag-status);
8798
- @supports (color: color-mix(in lab, red, red)) {
8799
- background: color-mix(in oklab, var(--ag-status) 14%, transparent);
8800
- }
8801
9200
  }
8802
- .ag-live .ag-live-dot {
9201
+ .ag-running-dot {
9202
+ display: inline-block;
9203
+ flex: none;
8803
9204
  width: 6px;
8804
9205
  height: 6px;
8805
- border-radius: 50%;
8806
- background: var(--ag-status);
9206
+ border-radius: var(--radius-pill);
9207
+ background: var(--surface-info-text);
8807
9208
  }
8808
- .ag-live [data-status="running"] .ag-live-dot {
8809
- animation: ag-live-breathe 1.6s ease-in-out infinite;
9209
+ [data-activity="quiet"] .ag-running-dot {
9210
+ background: var(--surface-warning-text);
9211
+ animation: none !important;
8810
9212
  }
8811
- .ag-live .ag-live-thinking {
8812
- flex: none;
9213
+ .ag-live-thinking-row {
9214
+ display: flex;
9215
+ align-items: center;
9216
+ gap: 8px;
9217
+ min-width: 0;
9218
+ }
9219
+ .ag-live-thinking {
9220
+ flex: 1;
9221
+ min-width: 0;
8813
9222
  margin: 0;
8814
9223
  font-size: 13px;
8815
9224
  line-height: 17px;
@@ -8817,141 +9226,297 @@
8817
9226
  -webkit-line-clamp: 2;
8818
9227
  -webkit-box-orient: vertical;
8819
9228
  overflow: hidden;
8820
- animation: ag-live-in 260ms ease-out both;
8821
9229
  }
8822
- .ag-live .ag-live-quiet {
8823
- color: var(--ag-muted);
9230
+ .ag-live-failure {
9231
+ color: var(--surface-danger-text);
8824
9232
  }
8825
- .ag-live .ag-live-failure {
8826
- color: var(--ag-status);
9233
+ .ag-live-quiet {
9234
+ color: var(--surface-warning-text);
9235
+ font-size: 12px;
9236
+ line-height: 16px;
8827
9237
  }
8828
- .ag-live .ag-live-events {
8829
- margin: auto 0 0;
9238
+ .ag-live-inspect {
9239
+ border: 0;
9240
+ padding: 0;
9241
+ background: transparent;
9242
+ font: inherit;
9243
+ cursor: pointer;
9244
+ }
9245
+ .ag-live-inspect > span:last-child {
9246
+ text-decoration: underline;
9247
+ }
9248
+ .ag-live-respond {
9249
+ height: 28px;
9250
+ min-height: 28px;
9251
+ flex: none;
9252
+ border: 1px solid currentColor;
9253
+ border-radius: var(--radius-control);
9254
+ padding: 0 8px;
9255
+ color: var(--surface-warning-text);
9256
+ background: transparent;
9257
+ cursor: pointer;
9258
+ }
9259
+ .ag-live-events-clip {
9260
+ margin-top: auto;
9261
+ height: 48px;
9262
+ min-height: 48px;
9263
+ overflow: hidden;
9264
+ }
9265
+ .ag-live-events {
9266
+ margin: 0;
8830
9267
  padding: 0;
8831
9268
  list-style: none;
9269
+ min-height: 64px;
8832
9270
  display: flex;
8833
9271
  flex-direction: column;
9272
+ justify-content: flex-end;
9273
+ transform: translateY(-16px);
8834
9274
  }
8835
- .ag-live .ag-live-events li {
9275
+ .ag-live-events li {
8836
9276
  display: flex;
8837
9277
  align-items: center;
8838
9278
  gap: 6px;
8839
- height: 16px;
8840
- font: 11px/16px var(--font-mono, ui-monospace, monospace);
9279
+ min-height: 16px;
9280
+ font: 11px/16px var(--font-mono, monospace);
8841
9281
  color: var(--ag-muted);
8842
- animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both;
9282
+ transition: color var(--motion-stream);
8843
9283
  }
8844
- .ag-live .ag-live-events li svg {
9284
+ .ag-live-events li svg {
8845
9285
  flex: none;
8846
- opacity: .8;
8847
- }
8848
- .ag-live .ag-live-events li:nth-last-child(3) {
8849
- opacity: .55;
8850
- }
8851
- .ag-live .ag-live-events li:nth-last-child(2) {
8852
- opacity: .8;
9286
+ width: 12px;
9287
+ height: 12px;
8853
9288
  }
8854
- .ag-live .ag-live-events li:last-child {
9289
+ .ag-live-events li:last-child {
8855
9290
  color: var(--ag-fg);
8856
- animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both;
8857
9291
  }
8858
- .ag-live .ag-live-event-label {
9292
+ .ag-live-event-label {
8859
9293
  flex: 1;
8860
9294
  min-width: 0;
8861
- white-space: nowrap;
8862
9295
  overflow: hidden;
8863
9296
  text-overflow: ellipsis;
9297
+ white-space: nowrap;
8864
9298
  }
8865
- .ag-live .ag-live-event-at {
9299
+ .ag-live-event-at {
8866
9300
  flex: none;
8867
- font-family: inherit;
8868
- color: var(--ag-muted);
9301
+ min-width: 3ch;
9302
+ text-align: right;
8869
9303
  font-variant-numeric: tabular-nums;
8870
9304
  }
8871
- .ag-live .ag-live-slot {
8872
- display: flex;
9305
+ .ag-live-chip {
9306
+ height: 40px;
9307
+ flex-direction: row;
8873
9308
  align-items: center;
8874
- justify-content: center;
9309
+ gap: 8px;
9310
+ border-radius: var(--radius-pill);
9311
+ opacity: 1;
9312
+ }
9313
+ .ag-live-chip .ag-live-head {
9314
+ display: flex;
9315
+ flex: none;
9316
+ max-width: 45%;
9317
+ }
9318
+ .ag-live-chip .ag-live-names {
9319
+ display: flex;
9320
+ min-width: 0;
9321
+ }
9322
+ .ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child {
9323
+ display: none;
9324
+ }
9325
+ .ag-live-chip-result {
9326
+ flex: 1;
9327
+ min-width: 0;
9328
+ overflow: hidden;
9329
+ text-overflow: ellipsis;
9330
+ white-space: nowrap;
9331
+ font-size: 12px;
9332
+ line-height: 16px;
9333
+ font-weight: 500;
9334
+ }
9335
+ .ag-phone-list {
9336
+ display: flex;
9337
+ flex-direction: column;
9338
+ gap: 12px;
9339
+ margin: 0;
9340
+ padding: 8px;
9341
+ list-style: none;
9342
+ }
9343
+ .ag-phone-list > li {
9344
+ min-width: 0;
9345
+ padding-left: min(calc(var(--depth) * 16px), 32px);
9346
+ border-left: 1px solid var(--ag-border);
9347
+ }
9348
+ .ag-phone-select {
8875
9349
  width: 100%;
8876
9350
  height: 100%;
9351
+ text-align: left;
9352
+ background: transparent;
9353
+ padding: 0;
9354
+ border: 0;
9355
+ color: inherit;
9356
+ cursor: pointer;
8877
9357
  }
8878
- .ag-live .ag-live-chip {
8879
- display: inline-flex;
8880
- align-items: center;
8881
- gap: 8px;
9358
+ .agent-graph .react-flow__node-liveAgent:focus-visible .ag-live-card, .agent-graph .react-flow__node-agent:focus-visible > div, .ag-phone-select:focus-visible {
9359
+ outline: 2px solid hsl(var(--foreground) / .7);
9360
+ outline-offset: 2px;
9361
+ }
9362
+ @media (prefers-reduced-motion: reduce) {
9363
+ .ag-live-card {
9364
+ animation: none;
9365
+ transition: opacity var(--duration-fast);
9366
+ }
9367
+ }
9368
+ @container (width < 600px) {
9369
+ .ag-live-card {
9370
+ height: auto;
9371
+ min-height: 164px;
9372
+ }
9373
+ .ag-live-card[data-sparse="true"] {
9374
+ min-height: 88px;
9375
+ }
9376
+ .ag-phone-select .ag-agent-card {
9377
+ height: auto;
9378
+ min-height: 88px;
9379
+ }
9380
+ .ag-caption-target {
9381
+ display: none;
9382
+ }
9383
+ .ag-live-card.ag-live-chip {
9384
+ min-height: 40px;
9385
+ height: 40px;
9386
+ }
9387
+ }
9388
+ .ag-live-accounting {
9389
+ overflow: hidden;
9390
+ text-overflow: ellipsis;
9391
+ white-space: nowrap;
8882
9392
  max-width: 100%;
8883
- height: 32px;
8884
- padding: 0 12px;
8885
- border: 1px solid var(--ag-border);
8886
- border-radius: 16px;
8887
- background: var(--ag-surface);
9393
+ }
9394
+ .ag-live-chip-status {
9395
+ flex: none;
9396
+ font-size: 12px;
9397
+ color: var(--ag-status);
9398
+ }
9399
+ .ag-live-chip-cost {
9400
+ flex: none;
9401
+ font-size: 12px;
9402
+ color: var(--ag-muted);
9403
+ font-variant-numeric: tabular-nums;
9404
+ }
9405
+ .ag-parent-label {
8888
9406
  color: var(--ag-muted);
8889
9407
  font-size: 12px;
8890
- cursor: pointer;
8891
- animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both;
9408
+ font-weight: 400;
8892
9409
  }
8893
- .ag-live .ag-live-chip-name {
8894
- color: var(--ag-fg);
8895
- font-weight: 600;
8896
- white-space: nowrap;
9410
+ .ag-agent-card[data-status="needs-you"] p {
9411
+ -webkit-line-clamp: 1;
9412
+ }
9413
+ .ag-status-button {
9414
+ display: inline-flex;
9415
+ align-items: center;
9416
+ min-width: 0;
9417
+ gap: 6px;
9418
+ }
9419
+ .ag-caption-target {
8897
9420
  overflow: hidden;
8898
9421
  text-overflow: ellipsis;
9422
+ white-space: nowrap;
9423
+ font-weight: 600;
8899
9424
  }
8900
- .ag-live .ag-live-chip-result {
8901
- color: var(--ag-fg);
8902
- font-weight: 500;
9425
+ .ag-latest {
9426
+ flex: none;
9427
+ min-width: 0;
9428
+ border-bottom: 1px solid hsl(var(--border));
9429
+ padding: 8px 12px;
9430
+ color: hsl(var(--foreground));
9431
+ font-size: 12px;
8903
9432
  line-height: 16px;
8904
- white-space: nowrap;
8905
- overflow: hidden;
8906
- text-overflow: ellipsis;
8907
9433
  }
8908
- @keyframes ag-live-sheen {
8909
- from {
8910
- background-position: -40% 0;
8911
- }
8912
- to {
8913
- background-position: 140% 0;
8914
- }
9434
+ .ag-latest header {
9435
+ display: flex;
9436
+ align-items: center;
9437
+ min-height: 24px;
9438
+ gap: 8px;
8915
9439
  }
8916
- @keyframes ag-live-breathe {
8917
- 50% {
8918
- opacity: .35;
8919
- transform: scale(.8);
8920
- }
9440
+ .ag-latest header > span {
9441
+ color: hsl(var(--muted-foreground));
8921
9442
  }
8922
- @keyframes ag-live-flash {
8923
- from {
8924
- background: color-mix(in oklab, var(--ag-status) 16%, transparent);
8925
- }
8926
- to {
8927
- background: transparent;
8928
- }
9443
+ .ag-latest header > button {
9444
+ margin-left: auto;
9445
+ padding: 0;
9446
+ border: 0;
9447
+ background: transparent;
9448
+ text-decoration: underline;
9449
+ font: inherit;
9450
+ color: inherit;
9451
+ cursor: pointer;
8929
9452
  }
8930
- @keyframes ag-live-grow {
8931
- from {
8932
- opacity: 0;
8933
- transform: scale(.92) translateY(-8px);
8934
- }
9453
+ .ag-latest ol {
9454
+ list-style: none;
9455
+ margin: 0;
9456
+ padding: 0;
9457
+ overflow: auto;
8935
9458
  }
8936
- @keyframes ag-live-in {
8937
- from {
8938
- opacity: 0;
8939
- transform: translateY(6px);
8940
- }
9459
+ .ag-latest li {
9460
+ height: 28px;
8941
9461
  }
8942
- @keyframes ag-live-settle {
8943
- from {
8944
- opacity: 1;
8945
- transform: scale(1.08);
8946
- }
9462
+ .ag-latest li > button {
9463
+ display: flex;
9464
+ align-items: center;
9465
+ gap: 6px;
9466
+ width: 100%;
9467
+ height: 28px;
9468
+ padding: 0;
9469
+ border: 0;
9470
+ background: transparent;
9471
+ color: inherit;
9472
+ font: inherit;
9473
+ text-align: left;
9474
+ cursor: pointer;
8947
9475
  }
8948
- @media (prefers-reduced-motion: reduce) {
8949
- .ag-live *, .ag-live *::before {
8950
- animation: none !important;
8951
- }
8952
- .ag-live .ag-live-card:hover {
8953
- transform: none;
8954
- }
9476
+ .ag-latest li > button:disabled {
9477
+ cursor: default;
9478
+ }
9479
+ .ag-latest strong {
9480
+ font-weight: 600;
9481
+ }
9482
+ .ag-latest li strong {
9483
+ flex: none;
9484
+ max-width: 22%;
9485
+ overflow: hidden;
9486
+ text-overflow: ellipsis;
9487
+ white-space: nowrap;
9488
+ }
9489
+ .ag-latest-dot {
9490
+ box-sizing: border-box;
9491
+ width: 8px;
9492
+ height: 8px;
9493
+ flex: none;
9494
+ border-radius: var(--radius-pill);
9495
+ }
9496
+ .ag-latest-state {
9497
+ display: inline-flex;
9498
+ align-items: center;
9499
+ gap: 4px;
9500
+ flex: none;
9501
+ }
9502
+ .ag-latest-label {
9503
+ flex: 1;
9504
+ min-width: 0;
9505
+ overflow: hidden;
9506
+ text-overflow: ellipsis;
9507
+ white-space: nowrap;
9508
+ font: 11px/16px var(--font-mono, monospace);
9509
+ }
9510
+ .ag-latest time {
9511
+ flex: none;
9512
+ color: hsl(var(--muted-foreground));
9513
+ font: 11px/16px var(--font-mono, monospace);
9514
+ font-variant-numeric: tabular-nums;
9515
+ }
9516
+ .ag-latest-empty {
9517
+ display: flex;
9518
+ align-items: center;
9519
+ color: hsl(var(--muted-foreground));
8955
9520
  }
8956
9521
  @property --tw-translate-x {
8957
9522
  syntax: "*";