@tangle-network/sandbox-ui 0.8.4 → 0.9.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 (27) hide show
  1. package/README.md +5 -6
  2. package/dist/auth.js +2 -2
  3. package/dist/chat.js +3 -3
  4. package/dist/{chunk-XXDFEF72.js → chunk-7YWFOGKQ.js} +51 -50
  5. package/dist/{chunk-VOUV7GGB.js → chunk-DI3NZ5ZX.js} +8 -22
  6. package/dist/{chunk-BUOQTBTO.js → chunk-JLKYXLFN.js} +1 -1
  7. package/dist/{chunk-2QZ6G7NM.js → chunk-MKTSMWVD.js} +5 -5
  8. package/dist/{chunk-UXQMIR3D.js → chunk-OHPW55EV.js} +1 -1
  9. package/dist/{chunk-WXK43R62.js → chunk-PLTZB5BC.js} +1 -1
  10. package/dist/{chunk-HFMAXUHV.js → chunk-QC4BJEG6.js} +2 -2
  11. package/dist/{chunk-3CJ2SOEI.js → chunk-US6JKJKH.js} +2 -2
  12. package/dist/{chunk-7U2Z23NE.js → chunk-VX3XOUEB.js} +15 -1
  13. package/dist/dashboard.d.ts +23 -3
  14. package/dist/dashboard.js +41 -4
  15. package/dist/globals.css +520 -1038
  16. package/dist/index.d.ts +1 -1
  17. package/dist/index.js +8 -8
  18. package/dist/openui.js +2 -2
  19. package/dist/pages.d.ts +70 -5
  20. package/dist/pages.js +1194 -135
  21. package/dist/primitives.js +2 -2
  22. package/dist/styles.css +520 -1038
  23. package/dist/tokens.css +248 -857
  24. package/dist/{variant-list-C8wx2TqF.d.ts → variant-list-CsS6ydgm.d.ts} +1 -1
  25. package/dist/workspace.d.ts +1 -1
  26. package/dist/workspace.js +4 -4
  27. package/package.json +16 -3
package/dist/styles.css CHANGED
@@ -1,60 +1,60 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
3
  :root, [data-sandbox-ui] {
4
- --md3-surface: #0a0a0c;
5
- --md3-surface-dim: #070709;
6
- --md3-surface-bright: #1b1b22;
7
- --md3-surface-container-lowest: #000000;
8
- --md3-surface-container-low: #0c0c0f;
9
- --md3-surface-container: #101014;
10
- --md3-surface-container-high: #15151a;
11
- --md3-surface-container-highest: #1e1e24;
12
- --md3-surface-variant: #1e1e24;
4
+ --md3-surface: #0a0a14;
5
+ --md3-surface-dim: #07070d;
6
+ --md3-surface-bright: #1b1a2c;
7
+ --md3-surface-container-lowest: #000001;
8
+ --md3-surface-container-low: #0d0c18;
9
+ --md3-surface-container: #11101e;
10
+ --md3-surface-container-high: #171624;
11
+ --md3-surface-container-highest: #1f1e30;
12
+ --md3-surface-variant: #1f1e30;
13
13
  --md3-on-surface: #fdfdfd;
14
- --md3-on-surface-variant: #b0b0b8;
15
- --md3-primary: #9b8cff;
16
- --md3-primary-dim: #705bf5;
17
- --md3-primary-container: #5d48e5;
14
+ --md3-on-surface-variant: #aaa8b8;
15
+ --md3-primary: #818CF8;
16
+ --md3-primary-dim: #6366F1;
17
+ --md3-primary-container: #4F46E5;
18
18
  --md3-on-primary: #ffffff;
19
- --md3-on-primary-container: #efeaff;
20
- --md3-primary-fixed: #ada3ff;
21
- --md3-primary-fixed-dim: #9082ff;
22
- --md3-secondary: #c4b9f5;
23
- --md3-secondary-dim: #b6ace7;
24
- --md3-secondary-container: #2b234d;
25
- --md3-on-secondary: #e8e4ff;
26
- --md3-on-secondary-container: #e8e4ff;
27
- --md3-tertiary: #10b981;
28
- --md3-outline: #474858;
29
- --md3-outline-variant: #282937;
19
+ --md3-on-primary-container: #E0E7FF;
20
+ --md3-primary-fixed: #A5AAFC;
21
+ --md3-primary-fixed-dim: #818CF8;
22
+ --md3-secondary: #C7D2FE;
23
+ --md3-secondary-dim: #A5B4FC;
24
+ --md3-secondary-container: #312E81;
25
+ --md3-on-secondary: #E8E5FF;
26
+ --md3-on-secondary-container: #E8E5FF;
27
+ --md3-tertiary: #10B981;
28
+ --md3-outline: #434260;
29
+ --md3-outline-variant: #2A293D;
30
30
  --md3-error: #ff5277;
31
31
  --md3-error-dim: #eb2855;
32
32
  --md3-error-container: #82042b;
33
33
  --md3-on-error: #ffffff;
34
34
  --md3-on-error-container: #ffbdf2;
35
35
  --md3-inverse-surface: #fdfdfd;
36
- --md3-inverse-primary: #4530c5;
36
+ --md3-inverse-primary: #4F46E5;
37
37
  --md3-inverse-on-surface: #000000;
38
- --md3-surface-tint: #9b8cff;
39
- --hsl-background: 248 52% 5%;
40
- --hsl-foreground: 244 20% 94%;
41
- --hsl-card: 246 42% 12%;
42
- --hsl-card-foreground: 244 20% 94%;
43
- --hsl-popover: 246 40% 15%;
44
- --hsl-popover-foreground: 244 20% 94%;
45
- --hsl-primary: 247 100% 61%;
38
+ --md3-surface-tint: #818CF8;
39
+ --hsl-background: 244 28% 5%;
40
+ --hsl-foreground: 240 18% 94%;
41
+ --hsl-card: 246 30% 11%;
42
+ --hsl-card-foreground: 240 18% 94%;
43
+ --hsl-popover: 246 28% 14%;
44
+ --hsl-popover-foreground: 240 18% 94%;
45
+ --hsl-primary: 239 84% 67%;
46
46
  --hsl-primary-foreground: 0 0% 100%;
47
- --hsl-secondary: 243 25% 19%;
47
+ --hsl-secondary: 248 24% 18%;
48
48
  --hsl-secondary-foreground: 240 16% 90%;
49
- --hsl-muted: 242 22% 16%;
50
- --hsl-muted-foreground: 233 17% 62%;
51
- --hsl-accent: 245 28% 21%;
49
+ --hsl-muted: 246 22% 15%;
50
+ --hsl-muted-foreground: 240 14% 58%;
51
+ --hsl-accent: 248 26% 20%;
52
52
  --hsl-accent-foreground: 240 16% 92%;
53
53
  --hsl-destructive: 348 90% 60%;
54
54
  --hsl-destructive-foreground: 0 0% 100%;
55
- --hsl-border: 236 16% 22%;
56
- --hsl-input: 245 30% 15%;
57
- --hsl-ring: 247 100% 61%;
55
+ --hsl-border: 244 14% 22%;
56
+ --hsl-input: 246 28% 14%;
57
+ --hsl-ring: 239 84% 67%;
58
58
  --hsl-success: 160 84% 39%;
59
59
  --hsl-warning: 40 94% 56%;
60
60
  --hsl-info: 200 88% 56%;
@@ -81,20 +81,20 @@
81
81
  --warning: var(--hsl-warning);
82
82
  --error: var(--hsl-destructive);
83
83
  --info: var(--hsl-info);
84
- --sidebar-background: 248 52% 5%;
85
- --sidebar-foreground: 244 20% 94%;
86
- --sidebar-primary: 247 100% 61%;
84
+ --sidebar-background: 244 28% 5%;
85
+ --sidebar-foreground: 240 18% 94%;
86
+ --sidebar-primary: 239 84% 67%;
87
87
  --sidebar-primary-foreground: 0 0% 100%;
88
- --sidebar-accent: 245 28% 21%;
88
+ --sidebar-accent: 248 26% 20%;
89
89
  --sidebar-accent-foreground: 240 16% 92%;
90
- --sidebar-border: 236 16% 18%;
91
- --sidebar-ring: 247 100% 61%;
92
- --depth-1: #08071A;
93
- --depth-2: #131228;
94
- --depth-3: #1C1A3A;
95
- --depth-4: #26244C;
96
- --status-running: #10b981;
97
- --status-creating: #8263FF;
90
+ --sidebar-border: 244 14% 17%;
91
+ --sidebar-ring: 239 84% 67%;
92
+ --depth-1: #0C0B1D;
93
+ --depth-2: #141328;
94
+ --depth-3: #1D1B38;
95
+ --depth-4: #262448;
96
+ --status-running: #10B981;
97
+ --status-creating: #9B93F0;
98
98
  --status-stopped: #FFB800;
99
99
  --status-warm: #FF8A4C;
100
100
  --status-cold: #4AABFF;
@@ -102,7 +102,7 @@
102
102
  --status-deleted: #6B7094;
103
103
  --surface-success-bg: #022c22;
104
104
  --surface-success-border: #14532d;
105
- --surface-success-text: #34d399;
105
+ --surface-success-text: #34D399;
106
106
  --surface-warning-bg: #451a03;
107
107
  --surface-warning-border: #78350f;
108
108
  --surface-warning-text: #fbbf24;
@@ -115,9 +115,9 @@
115
115
  --surface-teal-bg: #042f2e;
116
116
  --surface-teal-border: #134e4a;
117
117
  --surface-teal-text: #2dd4bf;
118
- --surface-violet-bg: #2e1065;
119
- --surface-violet-border: #4c1d95;
120
- --surface-violet-text: #a78bfa;
118
+ --surface-violet-bg: #1e1b4b;
119
+ --surface-violet-border: #3730a3;
120
+ --surface-violet-text: #B8B2F5;
121
121
  --surface-orange-bg: #431407;
122
122
  --surface-orange-border: #7c2d12;
123
123
  --surface-orange-text: #fb923c;
@@ -130,57 +130,61 @@
130
130
  --glass-border-hover: var(--border-default);
131
131
  --glass-blur: 0px;
132
132
  --mesh-teal: rgba(16, 185, 129, 0.05);
133
- --mesh-violet: rgba(130, 99, 255, 0.07);
134
- --mesh-blue: rgba(74, 58, 255, 0.04);
135
- --tangle-gradient: linear-gradient(135deg, #8263FF, #4a3aff);
136
- --tangle-gradient-text: linear-gradient(135deg, #A78FFF, #6D6AFF);
137
- --accent-gradient-strong: linear-gradient(135deg, #8263FF, #4a3aff);
138
- --accent-surface-soft: rgba(130, 99, 255, 0.12);
139
- --accent-surface-strong: rgba(130, 99, 255, 0.20);
140
- --accent-text: #A78FFF;
141
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(130, 99, 255, 0.08), transparent),
142
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(74, 58, 255, 0.06), transparent),
133
+ --mesh-violet: rgba(99, 102, 241, 0.07);
134
+ --mesh-blue: rgba(129, 140, 248, 0.04);
135
+ --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
136
+ --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
137
+ --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
138
+ --accent-surface-soft: rgba(99, 102, 241, 0.12);
139
+ --accent-surface-strong: rgba(99, 102, 241, 0.20);
140
+ --accent-text: #A5AAFC;
141
+ --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
142
+ radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
143
143
  linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
144
144
  --bg-dark: var(--depth-1);
145
145
  --bg-card: hsl(var(--hsl-card));
146
- --bg-elevated: hsl(246 38% 18%);
147
- --bg-section: hsl(246 38% 9%);
146
+ --bg-elevated: hsl(246 28% 17%);
147
+ --bg-section: hsl(246 28% 9%);
148
148
  --bg-input: hsl(var(--hsl-input));
149
- --bg-hover: rgba(130, 99, 255, 0.08);
150
- --bg-selection: rgba(130, 99, 255, 0.18);
149
+ --bg-hover: rgba(99, 102, 241, 0.08);
150
+ --bg-selection: rgba(99, 102, 241, 0.18);
151
151
  --text-primary: hsl(var(--hsl-foreground));
152
- --text-secondary: hsl(244 18% 88%);
153
- --text-muted: #8B90B8;
154
- --text-dim: #6B70A0;
155
- --brand-primary: #4a3aff;
156
- --brand-strong: #3B2ECC;
157
- --brand-cool: #8263FF;
158
- --brand-glow: #6D6AFF;
159
- --brand-purple: #A78FFF;
160
- --brand-vibrant: #4a3aff;
161
- --brand-emerald: #10b981;
162
- --border-subtle: rgba(107, 112, 148, 0.08);
163
- --border-default: rgba(107, 112, 148, 0.15);
164
- --border-hover: rgba(107, 112, 148, 0.25);
165
- --border-accent: rgba(130, 99, 255, 0.15);
166
- --border-accent-hover: rgba(130, 99, 255, 0.35);
167
- --btn-primary-bg: #4a3aff;
168
- --btn-primary-hover: #5B4DFF;
169
- --btn-cta-bg: #8263FF;
152
+ --text-secondary: hsl(240 16% 85%);
153
+ --text-muted: #8688B0;
154
+ --text-dim: #606294;
155
+ --brand-primary: #6366F1;
156
+ --brand-strong: #2E2A5E;
157
+ --brand-strong-text: #ffffff;
158
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
159
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
160
+ --brand-cool: #818CF8;
161
+ --brand-glow: #A5AAFC;
162
+ --brand-purple: #C7D2FE;
163
+ --brand-vibrant: #6366F1;
164
+ --brand-emerald: #10B981;
165
+ --border-subtle: rgba(100, 100, 148, 0.10);
166
+ --border-default: rgba(100, 100, 148, 0.18);
167
+ --border-hover: rgba(100, 100, 148, 0.28);
168
+ --border-accent: rgba(99, 102, 241, 0.18);
169
+ --border-accent-hover: rgba(99, 102, 241, 0.35);
170
+ --btn-primary-bg: #6366F1;
171
+ --btn-primary-hover: #818CF8;
172
+ --btn-primary-text: #ffffff;
173
+ --btn-cta-bg: #818CF8;
170
174
  --btn-cta-text: #FFFFFF;
171
- --code-keyword: #A78FFF;
172
- --code-string: #10b981;
175
+ --code-keyword: #A5AAFC;
176
+ --code-string: #34D399;
173
177
  --code-function: #6D9FFF;
174
178
  --code-number: #FFB347;
175
- --code-success: #10b981;
176
- --code-comment: #6B7094;
179
+ --code-success: #10B981;
180
+ --code-comment: #606294;
177
181
  --code-error: #FF4D6D;
178
182
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
179
183
  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
180
- --shadow-glow: 0 0 32px rgba(130, 99, 255, 0.18);
181
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(130, 99, 255, 0.2);
184
+ --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
185
+ --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
182
186
  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
183
- --shadow-status-creating: 0 0 6px rgba(130, 99, 255, 0.5);
187
+ --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
184
188
  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
185
189
  --radius-sm: 6px;
186
190
  --radius-md: 8px;
@@ -230,63 +234,75 @@
230
234
  --font-display: "Outfit", "Geist", sans-serif;
231
235
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
232
236
  }
233
- [data-sandbox-theme="builder"] {
234
- --hsl-primary: 247 100% 61%;
235
- --brand-primary: #4a3aff;
236
- --brand-cool: #6D9FFF;
237
- --brand-glow: #4a3aff;
238
- --tangle-gradient: linear-gradient(135deg, #4a3aff, #6D9FFF);
239
- --accent-gradient-strong: linear-gradient(135deg, #4a3aff, #6D9FFF);
240
- --status-creating: #4a3aff;
241
- }
242
- [data-sandbox-theme="consumer"] {
243
- --hsl-background: 246 44% 8%;
244
- --hsl-card: 246 36% 13%;
245
- --hsl-input: 246 30% 16%;
246
- --hsl-primary: 160 84% 39%;
247
- --hsl-ring: 160 84% 39%;
248
- --brand-primary: #10b981;
249
- --brand-cool: #10b981;
250
- --brand-glow: #34D399;
251
- --tangle-gradient: linear-gradient(135deg, #10b981, #34D399);
252
- --accent-gradient-strong: linear-gradient(135deg, #10b981, #34D399);
253
- --accent-text: #34D399;
254
- --btn-primary-bg: #10b981;
255
- --btn-primary-hover: #0EA572;
256
- }
257
237
  [data-sandbox-theme="vault"] {
258
- --hsl-background: 210 17% 97%;
259
- --hsl-foreground: 210 20% 10%;
238
+ --md3-surface: #f8f9fb;
239
+ --md3-surface-dim: #d9dae0;
240
+ --md3-surface-bright: #f8f9fb;
241
+ --md3-surface-container-lowest: #ffffff;
242
+ --md3-surface-container-low: #f3f4f7;
243
+ --md3-surface-container: #edeef2;
244
+ --md3-surface-container-high: #e7e8ed;
245
+ --md3-surface-container-highest: #e1e2e8;
246
+ --md3-surface-variant: #e1e2e8;
247
+ --md3-on-surface: #191c24;
248
+ --md3-on-surface-variant: #464858;
249
+ --md3-primary: #3E349E;
250
+ --md3-primary-dim: #352B88;
251
+ --md3-primary-container: #352B88;
252
+ --md3-on-primary: #ffffff;
253
+ --md3-on-primary-container: #9B93F0;
254
+ --md3-primary-fixed: #E8E5FF;
255
+ --md3-primary-fixed-dim: #C5C0F0;
256
+ --md3-secondary: #524A78;
257
+ --md3-secondary-dim: #3E3660;
258
+ --md3-secondary-container: #E8E5FF;
259
+ --md3-on-secondary: #ffffff;
260
+ --md3-on-secondary-container: #524A78;
261
+ --md3-tertiary: #065F46;
262
+ --md3-tertiary-container: #D1FAE5;
263
+ --md3-outline: #6B6E8A;
264
+ --md3-outline-variant: #C7C6D6;
265
+ --md3-error: #ba1a1a;
266
+ --md3-error-dim: #93000a;
267
+ --md3-error-container: #ffdad6;
268
+ --md3-on-error: #ffffff;
269
+ --md3-on-error-container: #93000a;
270
+ --md3-inverse-surface: #2e2e3e;
271
+ --md3-inverse-primary: #A5AAFC;
272
+ --md3-inverse-on-surface: #f0f1f4;
273
+ --md3-surface-tint: #6366F1;
274
+ --hsl-background: 225 20% 97%;
275
+ --hsl-foreground: 228 20% 12%;
260
276
  --hsl-card: 0 0% 100%;
261
- --hsl-card-foreground: 210 20% 10%;
277
+ --hsl-card-foreground: 228 20% 12%;
262
278
  --hsl-popover: 0 0% 100%;
263
- --hsl-popover-foreground: 210 20% 10%;
264
- --hsl-primary: 248 100% 35%;
279
+ --hsl-popover-foreground: 228 20% 12%;
280
+ --hsl-primary: 239 84% 67%;
265
281
  --hsl-primary-foreground: 0 0% 100%;
266
- --hsl-secondary: 152 100% 22%;
282
+ --hsl-secondary: 242 22% 42%;
267
283
  --hsl-secondary-foreground: 0 0% 100%;
268
- --hsl-muted: 210 14% 95%;
269
- --hsl-muted-foreground: 215 10% 40%;
270
- --hsl-accent: 210 20% 94%;
271
- --hsl-accent-foreground: 210 20% 10%;
284
+ --hsl-muted: 240 14% 89%;
285
+ --hsl-muted-foreground: 240 10% 36%;
286
+ --hsl-accent: 248 22% 86%;
287
+ --hsl-accent-foreground: 248 38% 30%;
272
288
  --hsl-destructive: 0 72% 41%;
273
289
  --hsl-destructive-foreground: 0 0% 100%;
274
- --hsl-border: 214 18% 88%;
275
- --hsl-input: 214 18% 90%;
276
- --hsl-ring: 248 100% 35%;
277
- --hsl-success: 152 82% 34%;
290
+ --hsl-border: 244 14% 78%;
291
+ --hsl-input: 244 12% 80%;
292
+ --hsl-ring: 239 84% 67%;
293
+ --hsl-success: 160 84% 30%;
278
294
  --hsl-warning: 41 96% 50%;
279
295
  --hsl-info: 212 80% 50%;
280
- --depth-1: #f8f9fa;
281
- --depth-2: #f2f3f5;
282
- --depth-3: #e8eaed;
283
- --depth-4: #dde0e5;
284
- --status-running: #2C8C86;
285
- --status-creating: #3B2ECC;
296
+ --depth-1: #f4f4f9;
297
+ --depth-2: #edecf4;
298
+ --depth-3: #e5e4ee;
299
+ --depth-4: #dcdbe8;
300
+ --status-running: #059669;
301
+ --status-creating: #3E349E;
286
302
  --status-stopped: #B45309;
287
303
  --status-warm: #C05621;
288
304
  --status-cold: #1D6FA4;
289
- --status-error: #C81E34;
305
+ --status-error: #ba1a1a;
290
306
  --status-deleted: #6B6B82;
291
307
  --glass-bg: var(--depth-2);
292
308
  --glass-bg-strong: var(--depth-1);
@@ -307,648 +323,87 @@
307
323
  --surface-teal-bg: #f0fdfa;
308
324
  --surface-teal-border: #99f6e4;
309
325
  --surface-teal-text: #0f766e;
310
- --surface-violet-bg: #f5f3ff;
311
- --surface-violet-border: #ddd6fe;
312
- --surface-violet-text: #6d28d9;
313
- --surface-orange-bg: #fff7ed;
314
- --surface-orange-border: #fed7aa;
315
- --surface-orange-text: #c2410c;
316
- --surface-neutral-bg: var(--depth-3);
317
- --surface-neutral-border: var(--border-subtle);
318
- --surface-neutral-text: var(--text-muted);
319
- --sidebar-background: 210 17% 97%;
320
- --sidebar-foreground: 210 20% 10%;
321
- --sidebar-primary: 248 100% 35%;
322
- --sidebar-primary-foreground: 0 0% 100%;
323
- --sidebar-accent: 210 20% 92%;
324
- --sidebar-accent-foreground: 210 20% 10%;
325
- --sidebar-border: 214 18% 88%;
326
- --sidebar-ring: 248 100% 35%;
327
- --mesh-teal: rgba(44, 140, 134, 0.04);
328
- --mesh-violet: rgba(74, 58, 255, 0.03);
329
- --mesh-blue: rgba(29, 111, 164, 0.03);
330
- --bg-root: #f8f9fa;
331
- --bg-dark: #f2f3f5;
332
- --bg-card: #ffffff;
333
- --bg-elevated: #ebedf0;
334
- --bg-section: #f2f3f5;
335
- --bg-input: #f0f1f4;
336
- --bg-hover: rgba(74, 58, 255, 0.05);
337
- --bg-selection: rgba(74, 58, 255, 0.08);
338
- --text-primary: #0F1133;
339
- --text-secondary: #2A2D4A;
340
- --text-muted: #6B7094;
341
- --text-dim: #9DA3C2;
342
- --brand-primary: #1e116e;
343
- --brand-strong: #211f54;
344
- --brand-cool: #4a3aff;
345
- --brand-glow: #8263FF;
346
- --brand-purple: #4a3aff;
347
- --brand-vibrant: #4a3aff;
348
- --brand-emerald: #10b981;
349
- --border-subtle: rgba(107, 112, 148, 0.08);
350
- --border-default: rgba(107, 112, 148, 0.15);
351
- --border-hover: rgba(107, 112, 148, 0.25);
352
- --border-accent: rgba(74, 58, 255, 0.15);
353
- --border-accent-hover: rgba(74, 58, 255, 0.35);
354
- --btn-primary-bg: #1e116e;
355
- --btn-primary-hover: #211f54;
356
- --btn-cta-bg: #4a3aff;
357
- --btn-cta-text: #ffffff;
358
- --code-keyword: #1e116e;
359
- --code-string: #10b981;
360
- --code-function: #1e116e;
361
- --code-number: #B45309;
362
- --code-success: #10b981;
363
- --code-comment: #6B7094;
364
- --code-error: #C81E34;
365
- --shadow-card: 0 1px 4px rgba(15, 17, 51, 0.06), 0 0 0 1px rgba(15, 17, 51, 0.05);
366
- --shadow-dropdown: 0 8px 32px rgba(15, 17, 51, 0.10), 0 0 0 1px rgba(15, 17, 51, 0.06);
367
- --shadow-glow: 0 0 32px rgba(74, 58, 255, 0.10);
368
- --shadow-accent: 0 2px 8px rgba(74, 58, 255, 0.12), 0 0 0 1px rgba(74, 58, 255, 0.08);
369
- --tangle-gradient: linear-gradient(135deg, #1e116e, #4a3aff);
370
- --tangle-gradient-text: linear-gradient(135deg, #1e116e, #4a3aff);
371
- --accent-gradient-strong: linear-gradient(135deg, #1e116e, #4a3aff);
372
- --accent-surface-soft: rgba(74, 58, 255, 0.06);
373
- --accent-surface-strong: rgba(74, 58, 255, 0.12);
374
- --accent-text: #1e116e;
375
- --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
376
- --font-display: "Outfit", "Geist", sans-serif;
377
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
378
- --syntax-comment: #8B92B8;
379
- --syntax-keyword: #5B3FCC;
380
- --syntax-string: #059669;
381
- --syntax-function: #2563EB;
382
- --syntax-number: #D97706;
383
- --syntax-meta: #7C3AED;
384
- --syntax-error: #DC2626;
385
- --syntax-variable: #334155;
386
- --syntax-foreground: #1E293B;
387
- }
388
- [data-sandbox-theme="ocean"] {
389
- --hsl-background: 215 50% 5%;
390
- --hsl-foreground: 210 20% 94%;
391
- --hsl-card: 214 42% 11%;
392
- --hsl-card-foreground: 210 20% 94%;
393
- --hsl-popover: 214 40% 14%;
394
- --hsl-popover-foreground: 210 20% 94%;
395
- --hsl-primary: 199 85% 50%;
396
- --hsl-primary-foreground: 0 0% 100%;
397
- --hsl-secondary: 210 25% 18%;
398
- --hsl-secondary-foreground: 210 16% 90%;
399
- --hsl-muted: 212 22% 15%;
400
- --hsl-muted-foreground: 210 17% 52%;
401
- --hsl-accent: 210 28% 20%;
402
- --hsl-accent-foreground: 210 16% 92%;
403
- --hsl-destructive: 0 85% 58%;
404
- --hsl-destructive-foreground: 0 0% 100%;
405
- --hsl-border: 214 16% 20%;
406
- --hsl-input: 214 30% 14%;
407
- --hsl-ring: 199 85% 50%;
408
- --hsl-success: 160 84% 39%;
409
- --hsl-warning: 40 94% 56%;
410
- --hsl-info: 199 85% 50%;
411
- --depth-1: #060c14;
412
- --depth-2: #0c1524;
413
- --depth-3: #132035;
414
- --depth-4: #1a2b46;
415
- --status-running: #10b981;
416
- --status-creating: #0ea5e9;
417
- --status-stopped: #FFB800;
418
- --status-warm: #FF8A4C;
419
- --status-cold: #38bdf8;
420
- --status-error: #ef4444;
421
- --status-deleted: #6B7094;
422
- --glass-bg: var(--depth-2);
423
- --glass-bg-strong: var(--depth-3);
424
- --glass-border: var(--border-subtle);
425
- --glass-border-hover: var(--border-default);
426
- --surface-success-bg: #022c22;
427
- --surface-success-border: #14532d;
428
- --surface-success-text: #34d399;
429
- --surface-warning-bg: #451a03;
430
- --surface-warning-border: #78350f;
431
- --surface-warning-text: #fbbf24;
432
- --surface-danger-bg: #450a0a;
433
- --surface-danger-border: #7f1d1d;
434
- --surface-danger-text: #f87171;
435
- --surface-info-bg: #082f49;
436
- --surface-info-border: #0c4a6e;
437
- --surface-info-text: #38bdf8;
438
- --surface-teal-bg: #042f2e;
439
- --surface-teal-border: #134e4a;
440
- --surface-teal-text: #2dd4bf;
441
- --surface-violet-bg: #1e1b4b;
442
- --surface-violet-border: #312e81;
443
- --surface-violet-text: #a5b4fc;
444
- --surface-orange-bg: #431407;
445
- --surface-orange-border: #7c2d12;
446
- --surface-orange-text: #fb923c;
447
- --surface-neutral-bg: var(--depth-3);
448
- --surface-neutral-border: var(--border-subtle);
449
- --surface-neutral-text: var(--text-muted);
450
- --sidebar-background: 215 50% 5%;
451
- --sidebar-foreground: 210 20% 94%;
452
- --sidebar-primary: 199 85% 50%;
453
- --sidebar-primary-foreground: 0 0% 100%;
454
- --sidebar-accent: 210 28% 20%;
455
- --sidebar-accent-foreground: 210 16% 92%;
456
- --sidebar-border: 214 16% 16%;
457
- --sidebar-ring: 199 85% 50%;
458
- --mesh-teal: rgba(14, 165, 233, 0.06);
459
- --mesh-violet: rgba(56, 189, 248, 0.04);
460
- --mesh-blue: rgba(14, 165, 233, 0.05);
461
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(14, 165, 233, 0.08), transparent),
462
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(56, 189, 248, 0.05), transparent),
463
- linear-gradient(180deg, var(--depth-1), #0a1628 100%);
464
- --bg-dark: var(--depth-1);
465
- --bg-card: hsl(var(--hsl-card));
466
- --bg-elevated: hsl(214 38% 17%);
467
- --bg-section: hsl(214 38% 8%);
468
- --bg-input: hsl(var(--hsl-input));
469
- --bg-hover: rgba(14, 165, 233, 0.08);
470
- --bg-selection: rgba(14, 165, 233, 0.18);
471
- --text-primary: hsl(var(--hsl-foreground));
472
- --text-secondary: hsl(210 18% 82%);
473
- --text-muted: #5e7490;
474
- --text-dim: #3d5068;
475
- --brand-primary: #0ea5e9;
476
- --brand-strong: #0284c7;
477
- --brand-cool: #38bdf8;
478
- --brand-glow: #7dd3fc;
479
- --brand-purple: #38bdf8;
480
- --brand-vibrant: #0ea5e9;
481
- --brand-emerald: #10b981;
482
- --border-subtle: rgba(94, 116, 144, 0.08);
483
- --border-default: rgba(94, 116, 144, 0.15);
484
- --border-hover: rgba(94, 116, 144, 0.25);
485
- --border-accent: rgba(14, 165, 233, 0.15);
486
- --border-accent-hover: rgba(14, 165, 233, 0.35);
487
- --btn-primary-bg: #0ea5e9;
488
- --btn-primary-hover: #38bdf8;
489
- --btn-cta-bg: #0ea5e9;
490
- --btn-cta-text: #FFFFFF;
491
- --code-keyword: #38bdf8;
492
- --code-string: #34d399;
493
- --code-function: #7dd3fc;
494
- --code-number: #fbbf24;
495
- --code-success: #10b981;
496
- --code-comment: #5e7490;
497
- --code-error: #ef4444;
498
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
499
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
500
- --shadow-glow: 0 0 32px rgba(14, 165, 233, 0.18);
501
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(14, 165, 233, 0.2);
502
- --tangle-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
503
- --tangle-gradient-text: linear-gradient(135deg, #38bdf8, #7dd3fc);
504
- --accent-gradient-strong: linear-gradient(135deg, #0ea5e9, #38bdf8);
505
- --accent-surface-soft: rgba(14, 165, 233, 0.12);
506
- --accent-surface-strong: rgba(14, 165, 233, 0.20);
507
- --accent-text: #38bdf8;
508
- --md3-primary: #38bdf8;
509
- --md3-primary-dim: #0ea5e9;
510
- --md3-primary-container: #0284c7;
511
- --md3-on-primary: #ffffff;
512
- --md3-on-primary-container: #e0f2fe;
513
- --md3-surface: #0a1020;
514
- --md3-surface-dim: #060c14;
515
- --md3-surface-bright: #1a2540;
516
- --md3-on-surface: #e2e8f0;
517
- --md3-on-surface-variant: #94a3b8;
518
- --md3-error: #ef4444;
519
- --md3-outline: #334155;
520
- --md3-outline-variant: #1e293b;
521
- }
522
- [data-sandbox-theme="ember"] {
523
- --hsl-background: 20 40% 5%;
524
- --hsl-foreground: 30 20% 93%;
525
- --hsl-card: 20 35% 11%;
526
- --hsl-card-foreground: 30 20% 93%;
527
- --hsl-popover: 20 32% 14%;
528
- --hsl-popover-foreground: 30 20% 93%;
529
- --hsl-primary: 25 90% 55%;
530
- --hsl-primary-foreground: 0 0% 100%;
531
- --hsl-secondary: 20 22% 18%;
532
- --hsl-secondary-foreground: 30 16% 90%;
533
- --hsl-muted: 18 20% 15%;
534
- --hsl-muted-foreground: 20 14% 50%;
535
- --hsl-accent: 20 25% 20%;
536
- --hsl-accent-foreground: 30 16% 92%;
537
- --hsl-destructive: 0 85% 55%;
538
- --hsl-destructive-foreground: 0 0% 100%;
539
- --hsl-border: 20 14% 20%;
540
- --hsl-input: 20 25% 14%;
541
- --hsl-ring: 25 90% 55%;
542
- --hsl-success: 160 84% 39%;
543
- --hsl-warning: 45 96% 56%;
544
- --hsl-info: 200 88% 56%;
545
- --depth-1: #140c06;
546
- --depth-2: #1e150c;
547
- --depth-3: #2a1e14;
548
- --depth-4: #36281c;
549
- --status-running: #10b981;
550
- --status-creating: #f59e0b;
551
- --status-stopped: #d97706;
552
- --status-warm: #fb923c;
553
- --status-cold: #38bdf8;
554
- --status-error: #ef4444;
555
- --status-deleted: #78716c;
556
- --glass-bg: var(--depth-2);
557
- --glass-bg-strong: var(--depth-3);
558
- --glass-border: var(--border-subtle);
559
- --glass-border-hover: var(--border-default);
560
- --surface-success-bg: #052e16;
561
- --surface-success-border: #166534;
562
- --surface-success-text: #4ade80;
563
- --surface-warning-bg: #451a03;
564
- --surface-warning-border: #92400e;
565
- --surface-warning-text: #fbbf24;
566
- --surface-danger-bg: #450a0a;
567
- --surface-danger-border: #991b1b;
568
- --surface-danger-text: #fca5a5;
569
- --surface-info-bg: #082f49;
570
- --surface-info-border: #0c4a6e;
571
- --surface-info-text: #38bdf8;
572
- --surface-teal-bg: #042f2e;
573
- --surface-teal-border: #134e4a;
574
- --surface-teal-text: #2dd4bf;
575
- --surface-violet-bg: #2e1065;
576
- --surface-violet-border: #4c1d95;
577
- --surface-violet-text: #c4b5fd;
578
- --surface-orange-bg: #431407;
579
- --surface-orange-border: #9a3412;
580
- --surface-orange-text: #fdba74;
581
- --surface-neutral-bg: var(--depth-3);
582
- --surface-neutral-border: var(--border-subtle);
583
- --surface-neutral-text: var(--text-muted);
584
- --sidebar-background: 20 40% 5%;
585
- --sidebar-foreground: 30 20% 93%;
586
- --sidebar-primary: 25 90% 55%;
587
- --sidebar-primary-foreground: 0 0% 100%;
588
- --sidebar-accent: 20 25% 20%;
589
- --sidebar-accent-foreground: 30 16% 92%;
590
- --sidebar-border: 20 14% 16%;
591
- --sidebar-ring: 25 90% 55%;
592
- --mesh-teal: rgba(245, 158, 11, 0.05);
593
- --mesh-violet: rgba(251, 146, 60, 0.04);
594
- --mesh-blue: rgba(217, 119, 6, 0.04);
595
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(245, 158, 11, 0.07), transparent),
596
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(251, 146, 60, 0.05), transparent),
597
- linear-gradient(180deg, var(--depth-1), #1a1008 100%);
598
- --bg-dark: var(--depth-1);
599
- --bg-card: hsl(var(--hsl-card));
600
- --bg-elevated: hsl(20 30% 16%);
601
- --bg-section: hsl(20 30% 8%);
602
- --bg-input: hsl(var(--hsl-input));
603
- --bg-hover: rgba(245, 158, 11, 0.08);
604
- --bg-selection: rgba(245, 158, 11, 0.18);
605
- --text-primary: hsl(var(--hsl-foreground));
606
- --text-secondary: hsl(30 16% 80%);
607
- --text-muted: #8c7a68;
608
- --text-dim: #5c4e3e;
609
- --brand-primary: #f59e0b;
610
- --brand-strong: #d97706;
611
- --brand-cool: #fbbf24;
612
- --brand-glow: #fcd34d;
613
- --brand-purple: #fbbf24;
614
- --brand-vibrant: #f59e0b;
615
- --brand-emerald: #10b981;
616
- --border-subtle: rgba(140, 122, 104, 0.08);
617
- --border-default: rgba(140, 122, 104, 0.15);
618
- --border-hover: rgba(140, 122, 104, 0.25);
619
- --border-accent: rgba(245, 158, 11, 0.15);
620
- --border-accent-hover: rgba(245, 158, 11, 0.35);
621
- --btn-primary-bg: #f59e0b;
622
- --btn-primary-hover: #fbbf24;
623
- --btn-cta-bg: #f59e0b;
624
- --btn-cta-text: #000000;
625
- --code-keyword: #fbbf24;
626
- --code-string: #34d399;
627
- --code-function: #fcd34d;
628
- --code-number: #fb923c;
629
- --code-success: #10b981;
630
- --code-comment: #8c7a68;
631
- --code-error: #ef4444;
632
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
633
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
634
- --shadow-glow: 0 0 32px rgba(245, 158, 11, 0.15);
635
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.2);
636
- --tangle-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
637
- --tangle-gradient-text: linear-gradient(135deg, #fbbf24, #fcd34d);
638
- --accent-gradient-strong: linear-gradient(135deg, #f59e0b, #fbbf24);
639
- --accent-surface-soft: rgba(245, 158, 11, 0.12);
640
- --accent-surface-strong: rgba(245, 158, 11, 0.20);
641
- --accent-text: #fbbf24;
642
- --md3-primary: #fbbf24;
643
- --md3-primary-dim: #f59e0b;
644
- --md3-primary-container: #d97706;
645
- --md3-on-primary: #000000;
646
- --md3-on-primary-container: #fef3c7;
647
- --md3-surface: #120e08;
648
- --md3-surface-dim: #0a0806;
649
- --md3-surface-bright: #2a2218;
650
- --md3-on-surface: #f5f0e8;
651
- --md3-on-surface-variant: #a8998a;
652
- --md3-error: #ef4444;
653
- --md3-outline: #4a3f34;
654
- --md3-outline-variant: #2a2218;
655
- }
656
- [data-sandbox-theme="forest"] {
657
- --hsl-background: 155 35% 5%;
658
- --hsl-foreground: 150 15% 93%;
659
- --hsl-card: 155 30% 10%;
660
- --hsl-card-foreground: 150 15% 93%;
661
- --hsl-popover: 155 28% 13%;
662
- --hsl-popover-foreground: 150 15% 93%;
663
- --hsl-primary: 155 80% 40%;
664
- --hsl-primary-foreground: 0 0% 100%;
665
- --hsl-secondary: 155 20% 17%;
666
- --hsl-secondary-foreground: 150 14% 90%;
667
- --hsl-muted: 152 18% 14%;
668
- --hsl-muted-foreground: 150 14% 48%;
669
- --hsl-accent: 155 22% 19%;
670
- --hsl-accent-foreground: 150 14% 92%;
671
- --hsl-destructive: 0 85% 55%;
672
- --hsl-destructive-foreground: 0 0% 100%;
673
- --hsl-border: 155 12% 19%;
674
- --hsl-input: 155 22% 13%;
675
- --hsl-ring: 155 80% 40%;
676
- --hsl-success: 155 80% 40%;
677
- --hsl-warning: 40 94% 56%;
678
- --hsl-info: 200 88% 56%;
679
- --depth-1: #060e0a;
680
- --depth-2: #0c1a14;
681
- --depth-3: #14261e;
682
- --depth-4: #1c3228;
683
- --status-running: #10b981;
684
- --status-creating: #34d399;
685
- --status-stopped: #eab308;
686
- --status-warm: #fb923c;
687
- --status-cold: #38bdf8;
688
- --status-error: #ef4444;
689
- --status-deleted: #6b7280;
690
- --glass-bg: var(--depth-2);
691
- --glass-bg-strong: var(--depth-3);
692
- --glass-border: var(--border-subtle);
693
- --glass-border-hover: var(--border-default);
694
- --surface-success-bg: #052e16;
695
- --surface-success-border: #166534;
696
- --surface-success-text: #4ade80;
697
- --surface-warning-bg: #422006;
698
- --surface-warning-border: #854d0e;
699
- --surface-warning-text: #facc15;
700
- --surface-danger-bg: #450a0a;
701
- --surface-danger-border: #991b1b;
702
- --surface-danger-text: #fca5a5;
703
- --surface-info-bg: #082f49;
704
- --surface-info-border: #0c4a6e;
705
- --surface-info-text: #38bdf8;
706
- --surface-teal-bg: #042f2e;
707
- --surface-teal-border: #134e4a;
708
- --surface-teal-text: #2dd4bf;
709
- --surface-violet-bg: #1e1b4b;
710
- --surface-violet-border: #3730a3;
711
- --surface-violet-text: #a5b4fc;
712
- --surface-orange-bg: #431407;
713
- --surface-orange-border: #7c2d12;
714
- --surface-orange-text: #fb923c;
715
- --surface-neutral-bg: var(--depth-3);
716
- --surface-neutral-border: var(--border-subtle);
717
- --surface-neutral-text: var(--text-muted);
718
- --sidebar-background: 155 35% 5%;
719
- --sidebar-foreground: 150 15% 93%;
720
- --sidebar-primary: 155 80% 40%;
721
- --sidebar-primary-foreground: 0 0% 100%;
722
- --sidebar-accent: 155 22% 19%;
723
- --sidebar-accent-foreground: 150 14% 92%;
724
- --sidebar-border: 155 12% 15%;
725
- --sidebar-ring: 155 80% 40%;
726
- --mesh-teal: rgba(16, 185, 129, 0.06);
727
- --mesh-violet: rgba(52, 211, 153, 0.04);
728
- --mesh-blue: rgba(16, 185, 129, 0.04);
729
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(16, 185, 129, 0.08), transparent),
730
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(52, 211, 153, 0.05), transparent),
731
- linear-gradient(180deg, var(--depth-1), #0a1a12 100%);
732
- --bg-dark: var(--depth-1);
733
- --bg-card: hsl(var(--hsl-card));
734
- --bg-elevated: hsl(155 26% 16%);
735
- --bg-section: hsl(155 26% 8%);
736
- --bg-input: hsl(var(--hsl-input));
737
- --bg-hover: rgba(16, 185, 129, 0.08);
738
- --bg-selection: rgba(16, 185, 129, 0.18);
739
- --text-primary: hsl(var(--hsl-foreground));
740
- --text-secondary: hsl(150 14% 80%);
741
- --text-muted: #6b8a7a;
742
- --text-dim: #4a6858;
743
- --brand-primary: #10b981;
744
- --brand-strong: #059669;
745
- --brand-cool: #34d399;
746
- --brand-glow: #6ee7b7;
747
- --brand-purple: #34d399;
748
- --brand-vibrant: #10b981;
749
- --brand-emerald: #10b981;
750
- --border-subtle: rgba(107, 138, 122, 0.08);
751
- --border-default: rgba(107, 138, 122, 0.15);
752
- --border-hover: rgba(107, 138, 122, 0.25);
753
- --border-accent: rgba(16, 185, 129, 0.15);
754
- --border-accent-hover: rgba(16, 185, 129, 0.35);
755
- --btn-primary-bg: #10b981;
756
- --btn-primary-hover: #34d399;
757
- --btn-cta-bg: #10b981;
758
- --btn-cta-text: #000000;
759
- --code-keyword: #34d399;
760
- --code-string: #a5b4fc;
761
- --code-function: #6ee7b7;
762
- --code-number: #fbbf24;
763
- --code-success: #10b981;
764
- --code-comment: #6b8a7a;
765
- --code-error: #ef4444;
766
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
767
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
768
- --shadow-glow: 0 0 32px rgba(16, 185, 129, 0.18);
769
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.2);
770
- --tangle-gradient: linear-gradient(135deg, #10b981, #34d399);
771
- --tangle-gradient-text: linear-gradient(135deg, #34d399, #6ee7b7);
772
- --accent-gradient-strong: linear-gradient(135deg, #10b981, #34d399);
773
- --accent-surface-soft: rgba(16, 185, 129, 0.12);
774
- --accent-surface-strong: rgba(16, 185, 129, 0.20);
775
- --accent-text: #34d399;
776
- --md3-primary: #34d399;
777
- --md3-primary-dim: #10b981;
778
- --md3-primary-container: #059669;
779
- --md3-on-primary: #000000;
780
- --md3-on-primary-container: #d1fae5;
781
- --md3-surface: #0a0f0c;
782
- --md3-surface-dim: #060e0a;
783
- --md3-surface-bright: #1a2a22;
784
- --md3-on-surface: #ecfdf5;
785
- --md3-on-surface-variant: #86a896;
786
- --md3-error: #ef4444;
787
- --md3-outline: #2d4a3a;
788
- --md3-outline-variant: #1a2a22;
789
- }
790
- [data-sandbox-theme="dawn"] {
791
- --hsl-background: 30 25% 96%;
792
- --hsl-foreground: 20 25% 12%;
793
- --hsl-card: 30 20% 100%;
794
- --hsl-card-foreground: 20 25% 12%;
795
- --hsl-popover: 30 20% 100%;
796
- --hsl-popover-foreground: 20 25% 12%;
797
- --hsl-primary: 15 75% 50%;
798
- --hsl-primary-foreground: 0 0% 100%;
799
- --hsl-secondary: 25 60% 30%;
800
- --hsl-secondary-foreground: 0 0% 100%;
801
- --hsl-muted: 30 18% 93%;
802
- --hsl-muted-foreground: 20 10% 42%;
803
- --hsl-accent: 30 22% 92%;
804
- --hsl-accent-foreground: 20 25% 12%;
805
- --hsl-destructive: 0 72% 45%;
806
- --hsl-destructive-foreground: 0 0% 100%;
807
- --hsl-border: 25 18% 86%;
808
- --hsl-input: 25 18% 88%;
809
- --hsl-ring: 15 75% 50%;
810
- --hsl-success: 152 82% 34%;
811
- --hsl-warning: 41 96% 50%;
812
- --hsl-info: 212 80% 50%;
813
- --depth-1: #faf7f4;
814
- --depth-2: #f5f0eb;
815
- --depth-3: #ebe4dc;
816
- --depth-4: #ddd4ca;
817
- --status-running: #059669;
818
- --status-creating: #d97706;
819
- --status-stopped: #b45309;
820
- --status-warm: #c2410c;
821
- --status-cold: #0284c7;
822
- --status-error: #dc2626;
823
- --status-deleted: #78716c;
824
- --glass-bg: var(--depth-2);
825
- --glass-bg-strong: var(--depth-1);
826
- --glass-border: var(--border-subtle);
827
- --glass-border-hover: var(--border-default);
828
- --surface-success-bg: #f0fdf4;
829
- --surface-success-border: #bbf7d0;
830
- --surface-success-text: #15803d;
831
- --surface-warning-bg: #fffbeb;
832
- --surface-warning-border: #fde68a;
833
- --surface-warning-text: #a16207;
834
- --surface-danger-bg: #fef2f2;
835
- --surface-danger-border: #fecaca;
836
- --surface-danger-text: #b91c1c;
837
- --surface-info-bg: #eff6ff;
838
- --surface-info-border: #bfdbfe;
839
- --surface-info-text: #1d4ed8;
840
- --surface-teal-bg: #f0fdfa;
841
- --surface-teal-border: #99f6e4;
842
- --surface-teal-text: #0f766e;
843
- --surface-violet-bg: #f5f3ff;
844
- --surface-violet-border: #ddd6fe;
845
- --surface-violet-text: #6d28d9;
326
+ --surface-violet-bg: #F0EEFF;
327
+ --surface-violet-border: #C5C0F0;
328
+ --surface-violet-text: #3E349E;
846
329
  --surface-orange-bg: #fff7ed;
847
330
  --surface-orange-border: #fed7aa;
848
331
  --surface-orange-text: #c2410c;
849
332
  --surface-neutral-bg: var(--depth-3);
850
333
  --surface-neutral-border: var(--border-subtle);
851
334
  --surface-neutral-text: var(--text-muted);
852
- --sidebar-background: 30 25% 96%;
853
- --sidebar-foreground: 20 25% 12%;
854
- --sidebar-primary: 15 75% 50%;
335
+ --sidebar-background: 232 18% 96%;
336
+ --sidebar-foreground: 228 20% 12%;
337
+ --sidebar-primary: 239 84% 67%;
855
338
  --sidebar-primary-foreground: 0 0% 100%;
856
- --sidebar-accent: 30 22% 90%;
857
- --sidebar-accent-foreground: 20 25% 12%;
858
- --sidebar-border: 25 18% 86%;
859
- --sidebar-ring: 15 75% 50%;
339
+ --sidebar-accent: 240 18% 90%;
340
+ --sidebar-accent-foreground: 240 38% 30%;
341
+ --sidebar-border: 244 14% 78%;
342
+ --sidebar-ring: 239 84% 67%;
860
343
  --mesh-teal: rgba(5, 150, 105, 0.04);
861
- --mesh-violet: rgba(217, 119, 6, 0.03);
862
- --mesh-blue: rgba(2, 132, 199, 0.03);
863
- --bg-root: #faf7f4;
864
- --bg-dark: #f5f0eb;
344
+ --mesh-violet: rgba(99, 102, 241, 0.03);
345
+ --mesh-blue: rgba(129, 140, 248, 0.03);
346
+ --bg-root: #f4f4f9;
347
+ --bg-dark: #edecf4;
865
348
  --bg-card: #ffffff;
866
- --bg-elevated: #ebe4dc;
867
- --bg-section: #f5f0eb;
868
- --bg-input: #f2ece5;
869
- --bg-hover: rgba(217, 119, 6, 0.05);
870
- --bg-selection: rgba(217, 119, 6, 0.08);
871
- --text-primary: #2a1f14;
872
- --text-secondary: #4a3f34;
873
- --text-muted: #8c7a68;
874
- --text-dim: #b0a090;
875
- --brand-primary: #d97706;
876
- --brand-strong: #b45309;
877
- --brand-cool: #f59e0b;
878
- --brand-glow: #fbbf24;
879
- --brand-purple: #d97706;
880
- --brand-vibrant: #ea580c;
349
+ --bg-elevated: #e5e4ee;
350
+ --bg-section: #edecf4;
351
+ --bg-input: #edecf4;
352
+ --bg-hover: rgba(99, 102, 241, 0.05);
353
+ --bg-selection: rgba(99, 102, 241, 0.10);
354
+ --text-primary: #191c24;
355
+ --text-secondary: #3a3a50;
356
+ --text-muted: #5E5E7A;
357
+ --text-dim: #A0A0B8;
358
+ --brand-primary: #6366F1;
359
+ --brand-strong: #2E2A5E;
360
+ --brand-strong-text: #ffffff;
361
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
362
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
363
+ --brand-cool: #818CF8;
364
+ --brand-glow: #A5AAFC;
365
+ --brand-purple: #6366F1;
366
+ --brand-vibrant: #6366F1;
881
367
  --brand-emerald: #059669;
882
- --border-subtle: rgba(140, 122, 104, 0.08);
883
- --border-default: rgba(140, 122, 104, 0.15);
884
- --border-hover: rgba(140, 122, 104, 0.25);
885
- --border-accent: rgba(217, 119, 6, 0.15);
886
- --border-accent-hover: rgba(217, 119, 6, 0.35);
887
- --btn-primary-bg: #d97706;
888
- --btn-primary-hover: #b45309;
889
- --btn-cta-bg: #ea580c;
368
+ --border-subtle: rgba(110, 108, 148, 0.20);
369
+ --border-default: rgba(110, 108, 148, 0.35);
370
+ --border-hover: rgba(110, 108, 148, 0.50);
371
+ --border-accent: rgba(99, 102, 241, 0.15);
372
+ --border-accent-hover: rgba(99, 102, 241, 0.30);
373
+ --btn-primary-bg: #6366F1;
374
+ --btn-primary-hover: #4F46E5;
375
+ --btn-primary-text: #ffffff;
376
+ --btn-cta-bg: #6366F1;
890
377
  --btn-cta-text: #ffffff;
891
- --code-keyword: #9a3412;
378
+ --code-keyword: #3E349E;
892
379
  --code-string: #059669;
893
- --code-function: #b45309;
894
- --code-number: #c2410c;
380
+ --code-function: #352B88;
381
+ --code-number: #B45309;
895
382
  --code-success: #059669;
896
- --code-comment: #8c7a68;
897
- --code-error: #dc2626;
898
- --shadow-card: 0 1px 4px rgba(42, 31, 20, 0.06), 0 0 0 1px rgba(42, 31, 20, 0.04);
899
- --shadow-dropdown: 0 8px 32px rgba(42, 31, 20, 0.10), 0 0 0 1px rgba(42, 31, 20, 0.06);
900
- --shadow-glow: 0 0 32px rgba(217, 119, 6, 0.10);
901
- --shadow-accent: 0 2px 8px rgba(217, 119, 6, 0.12), 0 0 0 1px rgba(217, 119, 6, 0.08);
902
- --tangle-gradient: linear-gradient(135deg, #d97706, #f59e0b);
903
- --tangle-gradient-text: linear-gradient(135deg, #b45309, #d97706);
904
- --accent-gradient-strong: linear-gradient(135deg, #d97706, #f59e0b);
905
- --accent-surface-soft: rgba(217, 119, 6, 0.06);
906
- --accent-surface-strong: rgba(217, 119, 6, 0.12);
907
- --accent-text: #b45309;
908
- --md3-primary: #f59e0b;
909
- --md3-primary-dim: #d97706;
910
- --md3-primary-container: #fef3c7;
911
- --md3-on-primary: #ffffff;
912
- --md3-on-primary-container: #78350f;
913
- --md3-surface: #faf7f4;
914
- --md3-surface-dim: #f5f0eb;
915
- --md3-surface-bright: #ffffff;
916
- --md3-on-surface: #2a1f14;
917
- --md3-on-surface-variant: #78716c;
918
- --md3-error: #dc2626;
919
- --md3-outline: #d6d3d1;
920
- --md3-outline-variant: #e7e5e4;
921
- --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
922
- --font-display: "Outfit", "Geist", sans-serif;
383
+ --code-comment: #6B6E8A;
384
+ --code-error: #ba1a1a;
385
+ --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
386
+ --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
387
+ --shadow-glow: none;
388
+ --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
389
+ --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
390
+ --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
391
+ --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
392
+ --accent-surface-soft: rgba(99, 102, 241, 0.06);
393
+ --accent-surface-strong: rgba(99, 102, 241, 0.12);
394
+ --accent-text: #4F46E5;
395
+ --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
396
+ --font-display: "Manrope", "Inter", sans-serif;
923
397
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
398
+ --radius: 0.375rem;
399
+ --radius-sm: 2px;
400
+ --radius-md: 4px;
401
+ --radius-lg: 6px;
402
+ --radius-xl: 8px;
403
+ --radius-pill: 999px;
404
+ --radius-full: 999px;
924
405
  }
925
- [data-density="compact"] {
926
- --radius-sm: 4px;
927
- --radius-md: 6px;
928
- --radius-lg: 8px;
929
- --radius-xl: 12px;
930
- --control-height: 2rem;
931
- --panel-padding: 0.625rem;
932
- --font-size-xs: 0.625rem;
933
- --font-size-sm: 0.6875rem;
934
- --font-size-base: 0.8125rem;
935
- --font-size-lg: 0.875rem;
936
- --line-height-base: 1.6;
937
- --avatar-size: 1.5rem;
938
- --timeline-dot-size: 0.5rem;
939
- --code-padding-x: 0.625rem;
940
- --code-padding-y: 0.5rem;
941
- --code-font-size: 0.75rem;
942
- --code-line-height: 1.4;
943
- --chat-message-px: 0.75rem;
944
- --chat-message-py: 0.375rem;
945
- --chat-input-py: 0.5rem;
946
- --card-padding: 1rem;
947
- --tool-card-px: 0.625rem;
948
- --tool-card-py: 0.375rem;
949
- --tool-icon-size: 1.5rem;
950
- }
951
- @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap");
406
+ @import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");
952
407
  @layer theme, base, components, utilities;
953
408
  @layer theme {
954
409
  :root, :host {
@@ -957,12 +412,13 @@
957
412
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
958
413
  "Courier New", monospace;
959
414
  --color-red-200: oklch(88.5% 0.062 18.334);
960
- --color-red-300: oklch(80.8% 0.114 19.571);
961
415
  --color-red-400: oklch(70.4% 0.191 22.216);
962
416
  --color-red-500: oklch(63.7% 0.237 25.331);
963
417
  --color-red-600: oklch(57.7% 0.245 27.325);
964
418
  --color-red-700: oklch(50.5% 0.213 27.518);
965
419
  --color-orange-400: oklch(75% 0.183 55.934);
420
+ --color-amber-500: oklch(76.9% 0.188 70.08);
421
+ --color-amber-600: oklch(66.6% 0.179 58.318);
966
422
  --color-yellow-400: oklch(85.2% 0.199 91.936);
967
423
  --color-yellow-500: oklch(79.5% 0.184 86.047);
968
424
  --color-yellow-600: oklch(68.1% 0.162 75.834);
@@ -994,6 +450,7 @@
994
450
  --container-4xl: 56rem;
995
451
  --container-5xl: 64rem;
996
452
  --container-6xl: 72rem;
453
+ --container-7xl: 80rem;
997
454
  --text-xs: 0.75rem;
998
455
  --text-xs--line-height: calc(1 / 0.75);
999
456
  --text-sm: 0.875rem;
@@ -1031,7 +488,6 @@
1031
488
  --radius-lg: 0.5rem;
1032
489
  --radius-xl: 0.75rem;
1033
490
  --radius-2xl: 1rem;
1034
- --radius-3xl: 1.5rem;
1035
491
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
1036
492
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
1037
493
  --animate-spin: spin 1s linear infinite;
@@ -1041,8 +497,6 @@
1041
497
  --blur-sm: 8px;
1042
498
  --blur-md: 12px;
1043
499
  --blur-xl: 24px;
1044
- --blur-2xl: 40px;
1045
- --blur-3xl: 64px;
1046
500
  --default-transition-duration: 150ms;
1047
501
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1048
502
  --default-font-family: var(--font-sans);
@@ -1260,18 +714,15 @@
1260
714
  .-top-12 {
1261
715
  top: calc(var(--spacing) * -12);
1262
716
  }
1263
- .-top-20 {
1264
- top: calc(var(--spacing) * -20);
1265
- }
1266
717
  .top-0 {
1267
718
  top: calc(var(--spacing) * 0);
1268
719
  }
720
+ .top-0\.5 {
721
+ top: calc(var(--spacing) * 0.5);
722
+ }
1269
723
  .top-1\/2 {
1270
724
  top: calc(1 / 2 * 100%);
1271
725
  }
1272
- .top-1\/4 {
1273
- top: calc(1 / 4 * 100%);
1274
- }
1275
726
  .top-2 {
1276
727
  top: calc(var(--spacing) * 2);
1277
728
  }
@@ -1287,12 +738,6 @@
1287
738
  .-right-1 {
1288
739
  right: calc(var(--spacing) * -1);
1289
740
  }
1290
- .-right-1\/4 {
1291
- right: calc(calc(1 / 4 * 100%) * -1);
1292
- }
1293
- .-right-20 {
1294
- right: calc(var(--spacing) * -20);
1295
- }
1296
741
  .right-0 {
1297
742
  right: calc(var(--spacing) * 0);
1298
743
  }
@@ -1302,9 +747,6 @@
1302
747
  .right-4 {
1303
748
  right: calc(var(--spacing) * 4);
1304
749
  }
1305
- .-bottom-1\/4 {
1306
- bottom: calc(calc(1 / 4 * 100%) * -1);
1307
- }
1308
750
  .bottom-0 {
1309
751
  bottom: calc(var(--spacing) * 0);
1310
752
  }
@@ -1317,12 +759,12 @@
1317
759
  .bottom-\[-0\.75rem\] {
1318
760
  bottom: -0.75rem;
1319
761
  }
1320
- .-left-1\/4 {
1321
- left: calc(calc(1 / 4 * 100%) * -1);
1322
- }
1323
762
  .left-0 {
1324
763
  left: calc(var(--spacing) * 0);
1325
764
  }
765
+ .left-0\.5 {
766
+ left: calc(var(--spacing) * 0.5);
767
+ }
1326
768
  .left-1\/2 {
1327
769
  left: calc(1 / 2 * 100%);
1328
770
  }
@@ -1398,6 +840,9 @@
1398
840
  .my-3 {
1399
841
  margin-block: calc(var(--spacing) * 3);
1400
842
  }
843
+ .my-4 {
844
+ margin-block: calc(var(--spacing) * 4);
845
+ }
1401
846
  .my-8 {
1402
847
  margin-block: calc(var(--spacing) * 8);
1403
848
  }
@@ -1536,6 +981,9 @@
1536
981
  .aspect-square {
1537
982
  aspect-ratio: 1 / 1;
1538
983
  }
984
+ .h-0\.5 {
985
+ height: calc(var(--spacing) * 0.5);
986
+ }
1539
987
  .h-1 {
1540
988
  height: calc(var(--spacing) * 1);
1541
989
  }
@@ -1599,18 +1047,12 @@
1599
1047
  .h-32 {
1600
1048
  height: calc(var(--spacing) * 32);
1601
1049
  }
1602
- .h-40 {
1603
- height: calc(var(--spacing) * 40);
1604
- }
1605
1050
  .h-48 {
1606
1051
  height: calc(var(--spacing) * 48);
1607
1052
  }
1608
1053
  .h-56 {
1609
1054
  height: calc(var(--spacing) * 56);
1610
1055
  }
1611
- .h-\[1px\] {
1612
- height: 1px;
1613
- }
1614
1056
  .h-\[3px\] {
1615
1057
  height: 3px;
1616
1058
  }
@@ -1623,12 +1065,6 @@
1623
1065
  .h-\[500px\] {
1624
1066
  height: 500px;
1625
1067
  }
1626
- .h-\[600px\] {
1627
- height: 600px;
1628
- }
1629
- .h-\[800px\] {
1630
- height: 800px;
1631
- }
1632
1068
  .h-\[var\(--avatar-size\)\] {
1633
1069
  height: var(--avatar-size);
1634
1070
  }
@@ -1677,6 +1113,9 @@
1677
1113
  .max-h-\[70vh\] {
1678
1114
  max-height: 70vh;
1679
1115
  }
1116
+ .max-h-\[90vh\] {
1117
+ max-height: 90vh;
1118
+ }
1680
1119
  .max-h-\[120px\] {
1681
1120
  max-height: 120px;
1682
1121
  }
@@ -1725,6 +1164,9 @@
1725
1164
  .w-1\/2 {
1726
1165
  width: calc(1 / 2 * 100%);
1727
1166
  }
1167
+ .w-1\/3 {
1168
+ width: calc(1 / 3 * 100%);
1169
+ }
1728
1170
  .w-1\/4 {
1729
1171
  width: calc(1 / 4 * 100%);
1730
1172
  }
@@ -1857,9 +1299,6 @@
1857
1299
  .w-\[680px\] {
1858
1300
  width: 680px;
1859
1301
  }
1860
- .w-\[800px\] {
1861
- width: 800px;
1862
- }
1863
1302
  .w-\[900px\] {
1864
1303
  width: 900px;
1865
1304
  }
@@ -1908,6 +1347,9 @@
1908
1347
  .max-w-6xl {
1909
1348
  max-width: var(--container-6xl);
1910
1349
  }
1350
+ .max-w-7xl {
1351
+ max-width: var(--container-7xl);
1352
+ }
1911
1353
  .max-w-\[14rem\] {
1912
1354
  max-width: 14rem;
1913
1355
  }
@@ -2008,10 +1450,18 @@
2008
1450
  --tw-translate-x: calc(var(--spacing) * 1);
2009
1451
  translate: var(--tw-translate-x) var(--tw-translate-y);
2010
1452
  }
1453
+ .translate-x-5 {
1454
+ --tw-translate-x: calc(var(--spacing) * 5);
1455
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1456
+ }
2011
1457
  .translate-x-6 {
2012
1458
  --tw-translate-x: calc(var(--spacing) * 6);
2013
1459
  translate: var(--tw-translate-x) var(--tw-translate-y);
2014
1460
  }
1461
+ .translate-x-12 {
1462
+ --tw-translate-x: calc(var(--spacing) * 12);
1463
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1464
+ }
2015
1465
  .translate-x-\[-50\%\] {
2016
1466
  --tw-translate-x: -50%;
2017
1467
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2030,6 +1480,10 @@
2030
1480
  .rotate-90 {
2031
1481
  rotate: 90deg;
2032
1482
  }
1483
+ .-skew-x-12 {
1484
+ --tw-skew-x: skewX(calc(12deg * -1));
1485
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1486
+ }
2033
1487
  .transform {
2034
1488
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
2035
1489
  }
@@ -2138,6 +1592,9 @@
2138
1592
  .justify-end {
2139
1593
  justify-content: flex-end;
2140
1594
  }
1595
+ .gap-0\.5 {
1596
+ gap: calc(var(--spacing) * 0.5);
1597
+ }
2141
1598
  .gap-1 {
2142
1599
  gap: calc(var(--spacing) * 1);
2143
1600
  }
@@ -2323,9 +1780,6 @@
2323
1780
  .rounded-2xl {
2324
1781
  border-radius: var(--radius-2xl);
2325
1782
  }
2326
- .rounded-3xl {
2327
- border-radius: var(--radius-3xl);
2328
- }
2329
1783
  .rounded-\[2px\] {
2330
1784
  border-radius: 2px;
2331
1785
  }
@@ -2344,9 +1798,6 @@
2344
1798
  .rounded-\[28px\] {
2345
1799
  border-radius: 28px;
2346
1800
  }
2347
- .rounded-\[32px\] {
2348
- border-radius: 32px;
2349
- }
2350
1801
  .rounded-\[calc\(var\(--radius-md\)\+2px\)\] {
2351
1802
  border-radius: calc(var(--radius-md) + 2px);
2352
1803
  }
@@ -2466,6 +1917,9 @@
2466
1917
  .border-\[var\(--border-accent\)\] {
2467
1918
  border-color: var(--border-accent);
2468
1919
  }
1920
+ .border-\[var\(--border-accent\,transparent\)\] {
1921
+ border-color: var(--border-accent,transparent);
1922
+ }
2469
1923
  .border-\[var\(--border-subtle\,hsl\(var\(--border\)\)\)\] {
2470
1924
  border-color: var(--border-subtle,hsl(var(--border)));
2471
1925
  }
@@ -2511,13 +1965,10 @@
2511
1965
  .border-\[var\(--glass-border\)\] {
2512
1966
  border-color: var(--glass-border);
2513
1967
  }
2514
- .border-\[var\(--md3-outline-variant\)\] {
2515
- border-color: var(--md3-outline-variant);
2516
- }
2517
- .border-\[var\(--md3-primary\)\]\/30 {
2518
- border-color: var(--md3-primary);
1968
+ .border-\[var\(--status-running\)\]\/30 {
1969
+ border-color: var(--status-running);
2519
1970
  @supports (color: color-mix(in lab, red, red)) {
2520
- border-color: color-mix(in oklab, var(--md3-primary) 30%, transparent);
1971
+ border-color: color-mix(in oklab, var(--status-running) 30%, transparent);
2521
1972
  }
2522
1973
  }
2523
1974
  .border-\[var\(--surface-danger-border\)\] {
@@ -2592,6 +2043,18 @@
2592
2043
  border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
2593
2044
  }
2594
2045
  }
2046
+ .border-white\/10 {
2047
+ border-color: color-mix(in srgb, #fff 10%, transparent);
2048
+ @supports (color: color-mix(in lab, red, red)) {
2049
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2050
+ }
2051
+ }
2052
+ .border-white\/20 {
2053
+ border-color: color-mix(in srgb, #fff 20%, transparent);
2054
+ @supports (color: color-mix(in lab, red, red)) {
2055
+ border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2056
+ }
2057
+ }
2595
2058
  .border-yellow-500\/30 {
2596
2059
  border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
2597
2060
  @supports (color: color-mix(in lab, red, red)) {
@@ -2652,6 +2115,15 @@
2652
2115
  .bg-\[var\(--brand-primary\)\] {
2653
2116
  background-color: var(--brand-primary);
2654
2117
  }
2118
+ .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
2119
+ background-color: var(--brand-primary,hsl(var(--primary)));
2120
+ }
2121
+ .bg-\[var\(--brand-strong\)\] {
2122
+ background-color: var(--brand-strong);
2123
+ }
2124
+ .bg-\[var\(--btn-primary-bg\)\] {
2125
+ background-color: var(--btn-primary-bg);
2126
+ }
2655
2127
  .bg-\[var\(--code-error\)\] {
2656
2128
  background-color: var(--code-error);
2657
2129
  }
@@ -2685,30 +2157,12 @@
2685
2157
  background-color: color-mix(in oklab, var(--code-success) 5%, transparent);
2686
2158
  }
2687
2159
  }
2688
- .bg-\[var\(--md3-background\)\] {
2689
- background-color: var(--md3-background);
2160
+ .bg-\[var\(--depth-1\,hsl\(var\(--muted\)\)\)\] {
2161
+ background-color: var(--depth-1,hsl(var(--muted)));
2690
2162
  }
2691
2163
  .bg-\[var\(--md3-outline-variant\)\] {
2692
2164
  background-color: var(--md3-outline-variant);
2693
2165
  }
2694
- .bg-\[var\(--md3-primary\)\] {
2695
- background-color: var(--md3-primary);
2696
- }
2697
- .bg-\[var\(--md3-primary\)\]\/10 {
2698
- background-color: var(--md3-primary);
2699
- @supports (color: color-mix(in lab, red, red)) {
2700
- background-color: color-mix(in oklab, var(--md3-primary) 10%, transparent);
2701
- }
2702
- }
2703
- .bg-\[var\(--md3-primary\)\]\/20 {
2704
- background-color: var(--md3-primary);
2705
- @supports (color: color-mix(in lab, red, red)) {
2706
- background-color: color-mix(in oklab, var(--md3-primary) 20%, transparent);
2707
- }
2708
- }
2709
- .bg-\[var\(--md3-primary-dim\)\] {
2710
- background-color: var(--md3-primary-dim);
2711
- }
2712
2166
  .bg-\[var\(--status-running\)\] {
2713
2167
  background-color: var(--status-running);
2714
2168
  }
@@ -2748,6 +2202,18 @@
2748
2202
  .bg-\[var\(--surface-warning-text\)\] {
2749
2203
  background-color: var(--surface-warning-text);
2750
2204
  }
2205
+ .bg-amber-500\/10 {
2206
+ background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
2207
+ @supports (color: color-mix(in lab, red, red)) {
2208
+ background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
2209
+ }
2210
+ }
2211
+ .bg-black\/40 {
2212
+ background-color: color-mix(in srgb, #000 40%, transparent);
2213
+ @supports (color: color-mix(in lab, red, red)) {
2214
+ background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
2215
+ }
2216
+ }
2751
2217
  .bg-black\/50 {
2752
2218
  background-color: color-mix(in srgb, #000 50%, transparent);
2753
2219
  @supports (color: color-mix(in lab, red, red)) {
@@ -2850,12 +2316,6 @@
2850
2316
  background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2851
2317
  }
2852
2318
  }
2853
- .bg-white\/20 {
2854
- background-color: color-mix(in srgb, #fff 20%, transparent);
2855
- @supports (color: color-mix(in lab, red, red)) {
2856
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2857
- }
2858
- }
2859
2319
  .bg-yellow-500 {
2860
2320
  background-color: var(--color-yellow-500);
2861
2321
  }
@@ -2869,8 +2329,8 @@
2869
2329
  --tw-gradient-position: to bottom right in oklab;
2870
2330
  background-image: linear-gradient(var(--tw-gradient-stops));
2871
2331
  }
2872
- .bg-gradient-to-r {
2873
- --tw-gradient-position: to right in oklab;
2332
+ .bg-gradient-to-l {
2333
+ --tw-gradient-position: to left in oklab;
2874
2334
  background-image: linear-gradient(var(--tw-gradient-stops));
2875
2335
  }
2876
2336
  .bg-\[image\:var\(--accent-gradient-strong\)\] {
@@ -2882,36 +2342,14 @@
2882
2342
  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
2883
2343
  background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
2884
2344
  }
2885
- .bg-\[radial-gradient\(circle_at_center\,rgba\(155\,140\,255\,0\.1\)_0\,transparent_100\%\)\] {
2886
- background-image: radial-gradient(circle at center,rgba(155,140,255,0.1) 0,transparent 100%);
2887
- }
2888
- .bg-\[radial-gradient\(circle_at_center\,rgba\(255\,255\,255\,0\.1\)_0\,transparent_100\%\)\] {
2889
- background-image: radial-gradient(circle at center,rgba(255,255,255,0.1) 0,transparent 100%);
2890
- }
2891
- .bg-\[radial-gradient\(circle_at_center\,rgba\(255\,255\,255\,0\.03\)_0\%\,transparent_100\%\)\] {
2892
- background-image: radial-gradient(circle at center,rgba(255,255,255,0.03) 0%,transparent 100%);
2893
- }
2894
2345
  .bg-\[radial-gradient\(circle_at_top\,rgba\(173\,163\,255\,0\.05\)_0\,transparent_100\%\)\] {
2895
2346
  background-image: radial-gradient(circle at top,rgba(173,163,255,0.05) 0,transparent 100%);
2896
2347
  }
2897
- .bg-\[url\(\'data\:image\/svg\+xml\;base64\,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI\+PHBhdGggZD0ibTIwIDB2MjBIMFYweiIgZmlsbD0ibm9uZSIvPPHBhdGggZD0iTTE5LjUgMEwxOS41IDIwTTIwIC41TDAgLjVIMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsIDI1NSLCAyNTUsIDAuMDMpIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4\=\'\)\] {
2898
- background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTIwIDB2MjBIMFYweiIgZmlsbD0ibm9uZSIvPPHBhdGggZD0iTTE5LjUgMEwxOS41IDIwTTIwIC41TDAgLjVIMjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsIDI1NSLCAyNTUsIDAuMDMpIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=');
2899
- }
2900
- .from-\[var\(--md3-primary\)\] {
2901
- --tw-gradient-from: var(--md3-primary);
2902
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2903
- }
2904
- .from-transparent {
2905
- --tw-gradient-from: transparent;
2906
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2907
- }
2908
- .via-\[var\(--md3-primary\)\] {
2909
- --tw-gradient-via: var(--md3-primary);
2910
- --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
2911
- --tw-gradient-stops: var(--tw-gradient-via-stops);
2912
- }
2913
- .to-\[\#ada3ff\] {
2914
- --tw-gradient-to: #ada3ff;
2348
+ .from-white\/5 {
2349
+ --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
2350
+ @supports (color: color-mix(in lab, red, red)) {
2351
+ --tw-gradient-from: color-mix(in oklab, var(--color-white) 5%, transparent);
2352
+ }
2915
2353
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
2916
2354
  }
2917
2355
  .to-transparent {
@@ -3278,6 +2716,10 @@
3278
2716
  --tw-font-weight: var(--chat-label-weight,600);
3279
2717
  font-weight: var(--chat-label-weight,600);
3280
2718
  }
2719
+ .font-\[var\(--font-display\)\] {
2720
+ --tw-font-weight: var(--font-display);
2721
+ font-weight: var(--font-display);
2722
+ }
3281
2723
  .font-\[var\(--font-sans\)\] {
3282
2724
  --tw-font-weight: var(--font-sans);
3283
2725
  font-weight: var(--font-sans);
@@ -3397,6 +2839,21 @@
3397
2839
  .text-\[var\(--brand-emerald\)\] {
3398
2840
  color: var(--brand-emerald);
3399
2841
  }
2842
+ .text-\[var\(--brand-emerald\,\#10B981\)\] {
2843
+ color: var(--brand-emerald,#10B981);
2844
+ }
2845
+ .text-\[var\(--brand-strong-text\)\] {
2846
+ color: var(--brand-strong-text);
2847
+ }
2848
+ .text-\[var\(--brand-strong-text-dim\)\] {
2849
+ color: var(--brand-strong-text-dim);
2850
+ }
2851
+ .text-\[var\(--brand-strong-text-muted\)\] {
2852
+ color: var(--brand-strong-text-muted);
2853
+ }
2854
+ .text-\[var\(--btn-primary-text\)\] {
2855
+ color: var(--btn-primary-text);
2856
+ }
3400
2857
  .text-\[var\(--chat-label-size\,11px\)\] {
3401
2858
  color: var(--chat-label-size,11px);
3402
2859
  }
@@ -3451,6 +2908,9 @@
3451
2908
  .text-\[var\(--surface-success-text\)\] {
3452
2909
  color: var(--surface-success-text);
3453
2910
  }
2911
+ .text-\[var\(--surface-success-text\,\#047857\)\] {
2912
+ color: var(--surface-success-text,#047857);
2913
+ }
3454
2914
  .text-\[var\(--surface-teal-text\)\] {
3455
2915
  color: var(--surface-teal-text);
3456
2916
  }
@@ -3472,6 +2932,9 @@
3472
2932
  .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
3473
2933
  color: var(--text-primary,hsl(var(--foreground)));
3474
2934
  }
2935
+ .text-amber-600 {
2936
+ color: var(--color-amber-600);
2937
+ }
3475
2938
  .text-blue-400 {
3476
2939
  color: var(--color-blue-400);
3477
2940
  }
@@ -3540,12 +3003,6 @@
3540
3003
  .opacity-0 {
3541
3004
  opacity: 0%;
3542
3005
  }
3543
- .opacity-10 {
3544
- opacity: 10%;
3545
- }
3546
- .opacity-20 {
3547
- opacity: 20%;
3548
- }
3549
3006
  .opacity-25 {
3550
3007
  opacity: 25%;
3551
3008
  }
@@ -3570,37 +3027,14 @@
3570
3027
  .opacity-100 {
3571
3028
  opacity: 100%;
3572
3029
  }
3573
- .mix-blend-screen {
3574
- mix-blend-mode: screen;
3030
+ .shadow {
3031
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3032
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3575
3033
  }
3576
3034
  .shadow-2xl {
3577
3035
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
3578
3036
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3579
3037
  }
3580
- .shadow-\[0_0_12px_-2px_rgba\(130\,99\,255\,0\.3\)\] {
3581
- --tw-shadow: 0 0 12px -2px var(--tw-shadow-color, rgba(130,99,255,0.3));
3582
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3583
- }
3584
- .shadow-\[0_0_15px_rgba\(173\,163\,255\,0\.1\)\] {
3585
- --tw-shadow: 0 0 15px var(--tw-shadow-color, rgba(173,163,255,0.1));
3586
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3587
- }
3588
- .shadow-\[0_0_20px_rgba\(130\,99\,255\,0\.2\)\] {
3589
- --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(130,99,255,0.2));
3590
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3591
- }
3592
- .shadow-\[0_0_20px_rgba\(155\,140\,255\,0\.2\)\] {
3593
- --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(155,140,255,0.2));
3594
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3595
- }
3596
- .shadow-\[0_0_30px_rgba\(173\,163\,255\,0\.1\)\] {
3597
- --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(173,163,255,0.1));
3598
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3599
- }
3600
- .shadow-\[0_0_30px_rgba\(173\,163\,255\,0\.15\)\] {
3601
- --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(173,163,255,0.15));
3602
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3603
- }
3604
3038
  .shadow-\[inset_2px_0_0_hsl\(var\(--primary\)\)\] {
3605
3039
  --tw-shadow: inset 2px 0 0 var(--tw-shadow-color, hsl(var(--primary)));
3606
3040
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3637,6 +3071,10 @@
3637
3071
  --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3638
3072
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3639
3073
  }
3074
+ .shadow-md {
3075
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3076
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3077
+ }
3640
3078
  .shadow-sm {
3641
3079
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
3642
3080
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3649,6 +3087,14 @@
3649
3087
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3650
3088
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3651
3089
  }
3090
+ .ring-1 {
3091
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3092
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3093
+ }
3094
+ .ring-2 {
3095
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3096
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3097
+ }
3652
3098
  .ring-4 {
3653
3099
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3654
3100
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3656,6 +3102,10 @@
3656
3102
  .ring-\[var\(--bg-root\)\] {
3657
3103
  --tw-ring-color: var(--bg-root);
3658
3104
  }
3105
+ .ring-offset-2 {
3106
+ --tw-ring-offset-width: 2px;
3107
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3108
+ }
3659
3109
  .outline {
3660
3110
  outline-style: var(--tw-outline-style);
3661
3111
  outline-width: 1px;
@@ -3664,31 +3114,9 @@
3664
3114
  --tw-blur: blur(8px);
3665
3115
  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,);
3666
3116
  }
3667
- .blur-\[50px\] {
3668
- --tw-blur: blur(50px);
3669
- 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,);
3670
- }
3671
- .blur-\[60px\] {
3672
- --tw-blur: blur(60px);
3673
- 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,);
3674
- }
3675
- .blur-\[150px\] {
3676
- --tw-blur: blur(150px);
3677
- 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,);
3678
- }
3679
3117
  .filter {
3680
3118
  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,);
3681
3119
  }
3682
- .backdrop-blur-2xl {
3683
- --tw-backdrop-blur: blur(var(--blur-2xl));
3684
- -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3685
- backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3686
- }
3687
- .backdrop-blur-3xl {
3688
- --tw-backdrop-blur: blur(var(--blur-3xl));
3689
- -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3690
- backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
3691
- }
3692
3120
  .backdrop-blur-md {
3693
3121
  --tw-backdrop-blur: blur(var(--blur-md));
3694
3122
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -3816,16 +3244,6 @@
3816
3244
  }
3817
3245
  }
3818
3246
  }
3819
- .group-hover\:scale-110 {
3820
- &:is(:where(.group):hover *) {
3821
- @media (hover: hover) {
3822
- --tw-scale-x: 110%;
3823
- --tw-scale-y: 110%;
3824
- --tw-scale-z: 110%;
3825
- scale: var(--tw-scale-x) var(--tw-scale-y);
3826
- }
3827
- }
3828
- }
3829
3247
  .group-hover\:opacity-100 {
3830
3248
  &:is(:where(.group):hover *) {
3831
3249
  @media (hover: hover) {
@@ -3833,14 +3251,6 @@
3833
3251
  }
3834
3252
  }
3835
3253
  }
3836
- .group-hover\:shadow-\[0_0_30px_rgba\(155\,140\,255\,0\.4\)\] {
3837
- &:is(:where(.group):hover *) {
3838
- @media (hover: hover) {
3839
- --tw-shadow: 0 0 30px var(--tw-shadow-color, rgba(155,140,255,0.4));
3840
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3841
- }
3842
- }
3843
- }
3844
3254
  .peer-focus\:outline-none {
3845
3255
  &:is(:where(.peer):focus ~ *) {
3846
3256
  --tw-outline-style: none;
@@ -4014,14 +3424,6 @@
4014
3424
  }
4015
3425
  }
4016
3426
  }
4017
- .hover\:-translate-y-1 {
4018
- &:hover {
4019
- @media (hover: hover) {
4020
- --tw-translate-y: calc(var(--spacing) * -1);
4021
- translate: var(--tw-translate-x) var(--tw-translate-y);
4022
- }
4023
- }
4024
- }
4025
3427
  .hover\:translate-y-\[-1px\] {
4026
3428
  &:hover {
4027
3429
  @media (hover: hover) {
@@ -4051,13 +3453,6 @@
4051
3453
  }
4052
3454
  }
4053
3455
  }
4054
- .hover\:border-\[var\(--glass-border-color\)\] {
4055
- &:hover {
4056
- @media (hover: hover) {
4057
- border-color: var(--glass-border-color);
4058
- }
4059
- }
4060
- }
4061
3456
  .hover\:border-red-500\/30 {
4062
3457
  &:hover {
4063
3458
  @media (hover: hover) {
@@ -4089,20 +3484,20 @@
4089
3484
  }
4090
3485
  }
4091
3486
  }
4092
- .hover\:bg-\[var\(--code-error\)\]\/24 {
3487
+ .hover\:bg-\[var\(--btn-primary-hover\)\] {
4093
3488
  &:hover {
4094
3489
  @media (hover: hover) {
4095
- background-color: var(--code-error);
4096
- @supports (color: color-mix(in lab, red, red)) {
4097
- background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
4098
- }
3490
+ background-color: var(--btn-primary-hover);
4099
3491
  }
4100
3492
  }
4101
3493
  }
4102
- .hover\:bg-\[var\(--md3-primary\)\] {
3494
+ .hover\:bg-\[var\(--code-error\)\]\/24 {
4103
3495
  &:hover {
4104
3496
  @media (hover: hover) {
4105
- background-color: var(--md3-primary);
3497
+ background-color: var(--code-error);
3498
+ @supports (color: color-mix(in lab, red, red)) {
3499
+ background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
3500
+ }
4106
3501
  }
4107
3502
  }
4108
3503
  }
@@ -4181,16 +3576,6 @@
4181
3576
  }
4182
3577
  }
4183
3578
  }
4184
- .hover\:bg-white\/20 {
4185
- &:hover {
4186
- @media (hover: hover) {
4187
- background-color: color-mix(in srgb, #fff 20%, transparent);
4188
- @supports (color: color-mix(in lab, red, red)) {
4189
- background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
4190
- }
4191
- }
4192
- }
4193
- }
4194
3579
  .hover\:bg-yellow-600\/30 {
4195
3580
  &:hover {
4196
3581
  @media (hover: hover) {
@@ -4236,44 +3621,27 @@
4236
3621
  }
4237
3622
  }
4238
3623
  }
4239
- .hover\:shadow-\[var\(--md3-primary\)\]\/10 {
4240
- &:hover {
4241
- @media (hover: hover) {
4242
- --tw-shadow-alpha: 10%;
4243
- --tw-shadow: var(--md3-primary);
4244
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4245
- }
4246
- }
4247
- }
4248
- .hover\:shadow-2xl {
4249
- &:hover {
4250
- @media (hover: hover) {
4251
- --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
4252
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4253
- }
4254
- }
4255
- }
4256
- .hover\:shadow-\[0_0_20px_rgba\(173\,163\,255\,0\.4\)\] {
3624
+ .hover\:shadow-md {
4257
3625
  &:hover {
4258
3626
  @media (hover: hover) {
4259
- --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(173,163,255,0.4));
3627
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4260
3628
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4261
3629
  }
4262
3630
  }
4263
3631
  }
4264
- .hover\:shadow-\[var\(--shadow-glow\)\] {
3632
+ .hover\:shadow-sm {
4265
3633
  &:hover {
4266
3634
  @media (hover: hover) {
4267
- --tw-shadow: var(--shadow-glow);
3635
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4268
3636
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4269
3637
  }
4270
3638
  }
4271
3639
  }
4272
- .hover\:shadow-md {
3640
+ .hover\:brightness-95 {
4273
3641
  &:hover {
4274
3642
  @media (hover: hover) {
4275
- --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4276
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3643
+ --tw-brightness: brightness(95%);
3644
+ 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,);
4277
3645
  }
4278
3646
  }
4279
3647
  }
@@ -4302,24 +3670,11 @@
4302
3670
  border-color: transparent;
4303
3671
  }
4304
3672
  }
4305
- .focus\:bg-red-500\/10 {
4306
- &:focus {
4307
- background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
4308
- @supports (color: color-mix(in lab, red, red)) {
4309
- background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
4310
- }
4311
- }
4312
- }
4313
3673
  .focus\:text-\[var\(--surface-danger-text\)\] {
4314
3674
  &:focus {
4315
3675
  color: var(--surface-danger-text);
4316
3676
  }
4317
3677
  }
4318
- .focus\:text-red-300 {
4319
- &:focus {
4320
- color: var(--color-red-300);
4321
- }
4322
- }
4323
3678
  .focus\:text-red-400 {
4324
3679
  &:focus {
4325
3680
  color: var(--color-red-400);
@@ -4586,6 +3941,11 @@
4586
3941
  flex-wrap: nowrap;
4587
3942
  }
4588
3943
  }
3944
+ .sm\:justify-between {
3945
+ @media (width >= 40rem) {
3946
+ justify-content: space-between;
3947
+ }
3948
+ }
4589
3949
  .sm\:justify-end {
4590
3950
  @media (width >= 40rem) {
4591
3951
  justify-content: flex-end;
@@ -4611,6 +3971,37 @@
4611
3971
  line-height: var(--tw-leading, var(--text-5xl--line-height));
4612
3972
  }
4613
3973
  }
3974
+ .sm\:opacity-0 {
3975
+ @media (width >= 40rem) {
3976
+ opacity: 0%;
3977
+ }
3978
+ }
3979
+ .sm\:group-hover\:opacity-100 {
3980
+ @media (width >= 40rem) {
3981
+ &:is(:where(.group):hover *) {
3982
+ @media (hover: hover) {
3983
+ opacity: 100%;
3984
+ }
3985
+ }
3986
+ }
3987
+ }
3988
+ .sm\:focus-within\:opacity-100 {
3989
+ @media (width >= 40rem) {
3990
+ &:focus-within {
3991
+ opacity: 100%;
3992
+ }
3993
+ }
3994
+ }
3995
+ .md\:col-span-2 {
3996
+ @media (width >= 48rem) {
3997
+ grid-column: span 2 / span 2;
3998
+ }
3999
+ }
4000
+ .md\:mt-0 {
4001
+ @media (width >= 48rem) {
4002
+ margin-top: calc(var(--spacing) * 0);
4003
+ }
4004
+ }
4614
4005
  .md\:block {
4615
4006
  @media (width >= 48rem) {
4616
4007
  display: block;
@@ -4631,11 +4022,31 @@
4631
4022
  grid-template-columns: repeat(3, minmax(0, 1fr));
4632
4023
  }
4633
4024
  }
4025
+ .md\:grid-cols-4 {
4026
+ @media (width >= 48rem) {
4027
+ grid-template-columns: repeat(4, minmax(0, 1fr));
4028
+ }
4029
+ }
4634
4030
  .md\:flex-row {
4635
4031
  @media (width >= 48rem) {
4636
4032
  flex-direction: row;
4637
4033
  }
4638
4034
  }
4035
+ .md\:items-center {
4036
+ @media (width >= 48rem) {
4037
+ align-items: center;
4038
+ }
4039
+ }
4040
+ .md\:items-end {
4041
+ @media (width >= 48rem) {
4042
+ align-items: flex-end;
4043
+ }
4044
+ }
4045
+ .md\:justify-between {
4046
+ @media (width >= 48rem) {
4047
+ justify-content: space-between;
4048
+ }
4049
+ }
4639
4050
  .lg\:col-span-1 {
4640
4051
  @media (width >= 64rem) {
4641
4052
  grid-column: span 1 / span 1;
@@ -4739,6 +4150,82 @@
4739
4150
  border-width: 0px;
4740
4151
  }
4741
4152
  }
4153
+ .\[\&\:\:-moz-range-track\]\:h-2 {
4154
+ &::-moz-range-track {
4155
+ height: calc(var(--spacing) * 2);
4156
+ }
4157
+ }
4158
+ .\[\&\:\:-moz-range-track\]\:rounded-full {
4159
+ &::-moz-range-track {
4160
+ border-radius: calc(infinity * 1px);
4161
+ }
4162
+ }
4163
+ .\[\&\:\:-webkit-slider-runnable-track\]\:h-2 {
4164
+ &::-webkit-slider-runnable-track {
4165
+ height: calc(var(--spacing) * 2);
4166
+ }
4167
+ }
4168
+ .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full {
4169
+ &::-webkit-slider-runnable-track {
4170
+ border-radius: calc(infinity * 1px);
4171
+ }
4172
+ }
4173
+ .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[6px\] {
4174
+ &::-webkit-slider-thumb {
4175
+ margin-top: calc(6px * -1);
4176
+ }
4177
+ }
4178
+ .\[\&\:\:-webkit-slider-thumb\]\:h-5 {
4179
+ &::-webkit-slider-thumb {
4180
+ height: calc(var(--spacing) * 5);
4181
+ }
4182
+ }
4183
+ .\[\&\:\:-webkit-slider-thumb\]\:w-5 {
4184
+ &::-webkit-slider-thumb {
4185
+ width: calc(var(--spacing) * 5);
4186
+ }
4187
+ }
4188
+ .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
4189
+ &::-webkit-slider-thumb {
4190
+ appearance: none;
4191
+ }
4192
+ }
4193
+ .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
4194
+ &::-webkit-slider-thumb {
4195
+ border-radius: calc(infinity * 1px);
4196
+ }
4197
+ }
4198
+ .\[\&\:\:-webkit-slider-thumb\]\:border-2 {
4199
+ &::-webkit-slider-thumb {
4200
+ border-style: var(--tw-border-style);
4201
+ border-width: 2px;
4202
+ }
4203
+ }
4204
+ .\[\&\:\:-webkit-slider-thumb\]\:shadow-md {
4205
+ &::-webkit-slider-thumb {
4206
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
4207
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4208
+ }
4209
+ }
4210
+ .\[\&\:\:-webkit-slider-thumb\]\:transition-transform {
4211
+ &::-webkit-slider-thumb {
4212
+ transition-property: transform, translate, scale, rotate;
4213
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4214
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
4215
+ }
4216
+ }
4217
+ .\[\&\:\:-webkit-slider-thumb\]\:hover\:scale-110 {
4218
+ &::-webkit-slider-thumb {
4219
+ &:hover {
4220
+ @media (hover: hover) {
4221
+ --tw-scale-x: 110%;
4222
+ --tw-scale-y: 110%;
4223
+ --tw-scale-z: 110%;
4224
+ scale: var(--tw-scale-x) var(--tw-scale-y);
4225
+ }
4226
+ }
4227
+ }
4228
+ }
4742
4229
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
4743
4230
  &:has([role=checkbox]) {
4744
4231
  padding-right: calc(var(--spacing) * 0);
@@ -4999,33 +4486,28 @@
4999
4486
  }
5000
4487
  }
5001
4488
  }
5002
- [data-sandbox-theme="vault"] .glass-panel,
5003
- [data-sandbox-theme="dawn"] .glass-panel {
5004
- background: hsl(var(--card) / 0.7);
5005
- backdrop-filter: blur(12px);
5006
- -webkit-backdrop-filter: blur(12px);
4489
+ [data-sandbox-theme="vault"] .glass-panel {
4490
+ background: hsl(var(--card));
4491
+ backdrop-filter: none;
4492
+ -webkit-backdrop-filter: none;
5007
4493
  border-color: hsl(var(--border));
5008
- box-shadow: 0 1px 4px hsl(var(--foreground) / 0.06);
4494
+ box-shadow: var(--shadow-card);
5009
4495
  }
5010
- [data-sandbox-theme="vault"] .glass-panel:hover,
5011
- [data-sandbox-theme="dawn"] .glass-panel:hover {
4496
+ [data-sandbox-theme="vault"] .glass-panel:hover {
5012
4497
  border-color: hsl(var(--foreground) / 0.15);
5013
4498
  }
5014
- [data-sandbox-theme="vault"] .glass-panel-heavy,
5015
- [data-sandbox-theme="dawn"] .glass-panel-heavy {
5016
- background: hsl(var(--card) / 0.92);
5017
- backdrop-filter: blur(16px);
5018
- -webkit-backdrop-filter: blur(16px);
4499
+ [data-sandbox-theme="vault"] .glass-panel-heavy {
4500
+ background: hsl(var(--card));
4501
+ backdrop-filter: none;
4502
+ -webkit-backdrop-filter: none;
5019
4503
  border-color: hsl(var(--border));
5020
- box-shadow: 0 4px 16px hsl(var(--foreground) / 0.08);
4504
+ box-shadow: var(--shadow-card);
5021
4505
  }
5022
- [data-sandbox-theme="vault"] .glow-primary,
5023
- [data-sandbox-theme="dawn"] .glow-primary {
5024
- box-shadow: 0 0 24px hsl(var(--primary) / 0.1);
4506
+ [data-sandbox-theme="vault"] .glow-primary {
4507
+ box-shadow: none;
5025
4508
  }
5026
- [data-sandbox-theme="vault"] .glow-primary:hover,
5027
- [data-sandbox-theme="dawn"] .glow-primary:hover {
5028
- box-shadow: 0 0 40px hsl(var(--primary) / 0.18);
4509
+ [data-sandbox-theme="vault"] .glow-primary:hover {
4510
+ box-shadow: none;
5029
4511
  }
5030
4512
  @property --tw-translate-x {
5031
4513
  syntax: "*";
@@ -5323,6 +4805,11 @@
5323
4805
  syntax: "*";
5324
4806
  inherits: false;
5325
4807
  }
4808
+ @property --tw-content {
4809
+ syntax: "*";
4810
+ initial-value: "";
4811
+ inherits: false;
4812
+ }
5326
4813
  @property --tw-scale-x {
5327
4814
  syntax: "*";
5328
4815
  inherits: false;
@@ -5338,11 +4825,6 @@
5338
4825
  inherits: false;
5339
4826
  initial-value: 1;
5340
4827
  }
5341
- @property --tw-content {
5342
- syntax: "*";
5343
- initial-value: "";
5344
- inherits: false;
5345
- }
5346
4828
  @keyframes spin {
5347
4829
  to {
5348
4830
  transform: rotate(360deg);
@@ -5440,10 +4922,10 @@
5440
4922
  --tw-backdrop-sepia: initial;
5441
4923
  --tw-duration: initial;
5442
4924
  --tw-ease: initial;
4925
+ --tw-content: "";
5443
4926
  --tw-scale-x: 1;
5444
4927
  --tw-scale-y: 1;
5445
4928
  --tw-scale-z: 1;
5446
- --tw-content: "";
5447
4929
  }
5448
4930
  }
5449
4931
  }