@tangle-network/sandbox-ui 0.8.4 → 0.10.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-2XCOGNZP.js} +131 -52
  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 +25 -4
  14. package/dist/dashboard.js +67 -18
  15. package/dist/globals.css +538 -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 +77 -5
  20. package/dist/pages.js +1263 -165
  21. package/dist/primitives.js +2 -2
  22. package/dist/styles.css +538 -1038
  23. package/dist/tokens.css +248 -857
  24. package/dist/{variant-list-C8wx2TqF.d.ts → variant-list-BNwUOSgz.d.ts} +14 -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,18 @@
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
+ }
723
+ .top-1 {
724
+ top: calc(var(--spacing) * 1);
725
+ }
1269
726
  .top-1\/2 {
1270
727
  top: calc(1 / 2 * 100%);
1271
728
  }
1272
- .top-1\/4 {
1273
- top: calc(1 / 4 * 100%);
1274
- }
1275
729
  .top-2 {
1276
730
  top: calc(var(--spacing) * 2);
1277
731
  }
@@ -1284,27 +738,24 @@
1284
738
  .top-\[50\%\] {
1285
739
  top: 50%;
1286
740
  }
741
+ .top-full {
742
+ top: 100%;
743
+ }
1287
744
  .-right-1 {
1288
745
  right: calc(var(--spacing) * -1);
1289
746
  }
1290
- .-right-1\/4 {
1291
- right: calc(calc(1 / 4 * 100%) * -1);
1292
- }
1293
- .-right-20 {
1294
- right: calc(var(--spacing) * -20);
1295
- }
1296
747
  .right-0 {
1297
748
  right: calc(var(--spacing) * 0);
1298
749
  }
750
+ .right-1 {
751
+ right: calc(var(--spacing) * 1);
752
+ }
1299
753
  .right-2 {
1300
754
  right: calc(var(--spacing) * 2);
1301
755
  }
1302
756
  .right-4 {
1303
757
  right: calc(var(--spacing) * 4);
1304
758
  }
1305
- .-bottom-1\/4 {
1306
- bottom: calc(calc(1 / 4 * 100%) * -1);
1307
- }
1308
759
  .bottom-0 {
1309
760
  bottom: calc(var(--spacing) * 0);
1310
761
  }
@@ -1317,12 +768,12 @@
1317
768
  .bottom-\[-0\.75rem\] {
1318
769
  bottom: -0.75rem;
1319
770
  }
1320
- .-left-1\/4 {
1321
- left: calc(calc(1 / 4 * 100%) * -1);
1322
- }
1323
771
  .left-0 {
1324
772
  left: calc(var(--spacing) * 0);
1325
773
  }
774
+ .left-0\.5 {
775
+ left: calc(var(--spacing) * 0.5);
776
+ }
1326
777
  .left-1\/2 {
1327
778
  left: calc(1 / 2 * 100%);
1328
779
  }
@@ -1398,6 +849,9 @@
1398
849
  .my-3 {
1399
850
  margin-block: calc(var(--spacing) * 3);
1400
851
  }
852
+ .my-4 {
853
+ margin-block: calc(var(--spacing) * 4);
854
+ }
1401
855
  .my-8 {
1402
856
  margin-block: calc(var(--spacing) * 8);
1403
857
  }
@@ -1536,6 +990,9 @@
1536
990
  .aspect-square {
1537
991
  aspect-ratio: 1 / 1;
1538
992
  }
993
+ .h-0\.5 {
994
+ height: calc(var(--spacing) * 0.5);
995
+ }
1539
996
  .h-1 {
1540
997
  height: calc(var(--spacing) * 1);
1541
998
  }
@@ -1599,18 +1056,12 @@
1599
1056
  .h-32 {
1600
1057
  height: calc(var(--spacing) * 32);
1601
1058
  }
1602
- .h-40 {
1603
- height: calc(var(--spacing) * 40);
1604
- }
1605
1059
  .h-48 {
1606
1060
  height: calc(var(--spacing) * 48);
1607
1061
  }
1608
1062
  .h-56 {
1609
1063
  height: calc(var(--spacing) * 56);
1610
1064
  }
1611
- .h-\[1px\] {
1612
- height: 1px;
1613
- }
1614
1065
  .h-\[3px\] {
1615
1066
  height: 3px;
1616
1067
  }
@@ -1623,12 +1074,6 @@
1623
1074
  .h-\[500px\] {
1624
1075
  height: 500px;
1625
1076
  }
1626
- .h-\[600px\] {
1627
- height: 600px;
1628
- }
1629
- .h-\[800px\] {
1630
- height: 800px;
1631
- }
1632
1077
  .h-\[var\(--avatar-size\)\] {
1633
1078
  height: var(--avatar-size);
1634
1079
  }
@@ -1677,6 +1122,9 @@
1677
1122
  .max-h-\[70vh\] {
1678
1123
  max-height: 70vh;
1679
1124
  }
1125
+ .max-h-\[90vh\] {
1126
+ max-height: 90vh;
1127
+ }
1680
1128
  .max-h-\[120px\] {
1681
1129
  max-height: 120px;
1682
1130
  }
@@ -1725,6 +1173,9 @@
1725
1173
  .w-1\/2 {
1726
1174
  width: calc(1 / 2 * 100%);
1727
1175
  }
1176
+ .w-1\/3 {
1177
+ width: calc(1 / 3 * 100%);
1178
+ }
1728
1179
  .w-1\/4 {
1729
1180
  width: calc(1 / 4 * 100%);
1730
1181
  }
@@ -1857,9 +1308,6 @@
1857
1308
  .w-\[680px\] {
1858
1309
  width: 680px;
1859
1310
  }
1860
- .w-\[800px\] {
1861
- width: 800px;
1862
- }
1863
1311
  .w-\[900px\] {
1864
1312
  width: 900px;
1865
1313
  }
@@ -1908,6 +1356,9 @@
1908
1356
  .max-w-6xl {
1909
1357
  max-width: var(--container-6xl);
1910
1358
  }
1359
+ .max-w-7xl {
1360
+ max-width: var(--container-7xl);
1361
+ }
1911
1362
  .max-w-\[14rem\] {
1912
1363
  max-width: 14rem;
1913
1364
  }
@@ -2008,10 +1459,18 @@
2008
1459
  --tw-translate-x: calc(var(--spacing) * 1);
2009
1460
  translate: var(--tw-translate-x) var(--tw-translate-y);
2010
1461
  }
1462
+ .translate-x-5 {
1463
+ --tw-translate-x: calc(var(--spacing) * 5);
1464
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1465
+ }
2011
1466
  .translate-x-6 {
2012
1467
  --tw-translate-x: calc(var(--spacing) * 6);
2013
1468
  translate: var(--tw-translate-x) var(--tw-translate-y);
2014
1469
  }
1470
+ .translate-x-12 {
1471
+ --tw-translate-x: calc(var(--spacing) * 12);
1472
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1473
+ }
2015
1474
  .translate-x-\[-50\%\] {
2016
1475
  --tw-translate-x: -50%;
2017
1476
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2030,6 +1489,10 @@
2030
1489
  .rotate-90 {
2031
1490
  rotate: 90deg;
2032
1491
  }
1492
+ .-skew-x-12 {
1493
+ --tw-skew-x: skewX(calc(12deg * -1));
1494
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
1495
+ }
2033
1496
  .transform {
2034
1497
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
2035
1498
  }
@@ -2138,6 +1601,9 @@
2138
1601
  .justify-end {
2139
1602
  justify-content: flex-end;
2140
1603
  }
1604
+ .gap-0\.5 {
1605
+ gap: calc(var(--spacing) * 0.5);
1606
+ }
2141
1607
  .gap-1 {
2142
1608
  gap: calc(var(--spacing) * 1);
2143
1609
  }
@@ -2323,9 +1789,6 @@
2323
1789
  .rounded-2xl {
2324
1790
  border-radius: var(--radius-2xl);
2325
1791
  }
2326
- .rounded-3xl {
2327
- border-radius: var(--radius-3xl);
2328
- }
2329
1792
  .rounded-\[2px\] {
2330
1793
  border-radius: 2px;
2331
1794
  }
@@ -2344,9 +1807,6 @@
2344
1807
  .rounded-\[28px\] {
2345
1808
  border-radius: 28px;
2346
1809
  }
2347
- .rounded-\[32px\] {
2348
- border-radius: 32px;
2349
- }
2350
1810
  .rounded-\[calc\(var\(--radius-md\)\+2px\)\] {
2351
1811
  border-radius: calc(var(--radius-md) + 2px);
2352
1812
  }
@@ -2466,6 +1926,9 @@
2466
1926
  .border-\[var\(--border-accent\)\] {
2467
1927
  border-color: var(--border-accent);
2468
1928
  }
1929
+ .border-\[var\(--border-accent\,transparent\)\] {
1930
+ border-color: var(--border-accent,transparent);
1931
+ }
2469
1932
  .border-\[var\(--border-subtle\,hsl\(var\(--border\)\)\)\] {
2470
1933
  border-color: var(--border-subtle,hsl(var(--border)));
2471
1934
  }
@@ -2511,13 +1974,10 @@
2511
1974
  .border-\[var\(--glass-border\)\] {
2512
1975
  border-color: var(--glass-border);
2513
1976
  }
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);
1977
+ .border-\[var\(--status-running\)\]\/30 {
1978
+ border-color: var(--status-running);
2519
1979
  @supports (color: color-mix(in lab, red, red)) {
2520
- border-color: color-mix(in oklab, var(--md3-primary) 30%, transparent);
1980
+ border-color: color-mix(in oklab, var(--status-running) 30%, transparent);
2521
1981
  }
2522
1982
  }
2523
1983
  .border-\[var\(--surface-danger-border\)\] {
@@ -2592,6 +2052,18 @@
2592
2052
  border-color: color-mix(in oklab, var(--color-violet-500) 30%, transparent);
2593
2053
  }
2594
2054
  }
2055
+ .border-white\/10 {
2056
+ border-color: color-mix(in srgb, #fff 10%, transparent);
2057
+ @supports (color: color-mix(in lab, red, red)) {
2058
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2059
+ }
2060
+ }
2061
+ .border-white\/20 {
2062
+ border-color: color-mix(in srgb, #fff 20%, transparent);
2063
+ @supports (color: color-mix(in lab, red, red)) {
2064
+ border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
2065
+ }
2066
+ }
2595
2067
  .border-yellow-500\/30 {
2596
2068
  border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 30%, transparent);
2597
2069
  @supports (color: color-mix(in lab, red, red)) {
@@ -2652,6 +2124,15 @@
2652
2124
  .bg-\[var\(--brand-primary\)\] {
2653
2125
  background-color: var(--brand-primary);
2654
2126
  }
2127
+ .bg-\[var\(--brand-primary\,hsl\(var\(--primary\)\)\)\] {
2128
+ background-color: var(--brand-primary,hsl(var(--primary)));
2129
+ }
2130
+ .bg-\[var\(--brand-strong\)\] {
2131
+ background-color: var(--brand-strong);
2132
+ }
2133
+ .bg-\[var\(--btn-primary-bg\)\] {
2134
+ background-color: var(--btn-primary-bg);
2135
+ }
2655
2136
  .bg-\[var\(--code-error\)\] {
2656
2137
  background-color: var(--code-error);
2657
2138
  }
@@ -2685,30 +2166,12 @@
2685
2166
  background-color: color-mix(in oklab, var(--code-success) 5%, transparent);
2686
2167
  }
2687
2168
  }
2688
- .bg-\[var\(--md3-background\)\] {
2689
- background-color: var(--md3-background);
2169
+ .bg-\[var\(--depth-1\,hsl\(var\(--muted\)\)\)\] {
2170
+ background-color: var(--depth-1,hsl(var(--muted)));
2690
2171
  }
2691
2172
  .bg-\[var\(--md3-outline-variant\)\] {
2692
2173
  background-color: var(--md3-outline-variant);
2693
2174
  }
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
2175
  .bg-\[var\(--status-running\)\] {
2713
2176
  background-color: var(--status-running);
2714
2177
  }
@@ -2748,6 +2211,18 @@
2748
2211
  .bg-\[var\(--surface-warning-text\)\] {
2749
2212
  background-color: var(--surface-warning-text);
2750
2213
  }
2214
+ .bg-amber-500\/10 {
2215
+ background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
2216
+ @supports (color: color-mix(in lab, red, red)) {
2217
+ background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
2218
+ }
2219
+ }
2220
+ .bg-black\/40 {
2221
+ background-color: color-mix(in srgb, #000 40%, transparent);
2222
+ @supports (color: color-mix(in lab, red, red)) {
2223
+ background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
2224
+ }
2225
+ }
2751
2226
  .bg-black\/50 {
2752
2227
  background-color: color-mix(in srgb, #000 50%, transparent);
2753
2228
  @supports (color: color-mix(in lab, red, red)) {
@@ -2850,12 +2325,6 @@
2850
2325
  background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
2851
2326
  }
2852
2327
  }
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
2328
  .bg-yellow-500 {
2860
2329
  background-color: var(--color-yellow-500);
2861
2330
  }
@@ -2869,8 +2338,8 @@
2869
2338
  --tw-gradient-position: to bottom right in oklab;
2870
2339
  background-image: linear-gradient(var(--tw-gradient-stops));
2871
2340
  }
2872
- .bg-gradient-to-r {
2873
- --tw-gradient-position: to right in oklab;
2341
+ .bg-gradient-to-l {
2342
+ --tw-gradient-position: to left in oklab;
2874
2343
  background-image: linear-gradient(var(--tw-gradient-stops));
2875
2344
  }
2876
2345
  .bg-\[image\:var\(--accent-gradient-strong\)\] {
@@ -2882,36 +2351,14 @@
2882
2351
  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
2883
2352
  background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
2884
2353
  }
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
2354
  .bg-\[radial-gradient\(circle_at_top\,rgba\(173\,163\,255\,0\.05\)_0\,transparent_100\%\)\] {
2895
2355
  background-image: radial-gradient(circle at top,rgba(173,163,255,0.05) 0,transparent 100%);
2896
2356
  }
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;
2357
+ .from-white\/5 {
2358
+ --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
2359
+ @supports (color: color-mix(in lab, red, red)) {
2360
+ --tw-gradient-from: color-mix(in oklab, var(--color-white) 5%, transparent);
2361
+ }
2915
2362
  --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
2363
  }
2917
2364
  .to-transparent {
@@ -3041,6 +2488,9 @@
3041
2488
  .py-5 {
3042
2489
  padding-block: calc(var(--spacing) * 5);
3043
2490
  }
2491
+ .py-8 {
2492
+ padding-block: calc(var(--spacing) * 8);
2493
+ }
3044
2494
  .py-12 {
3045
2495
  padding-block: calc(var(--spacing) * 12);
3046
2496
  }
@@ -3278,6 +2728,10 @@
3278
2728
  --tw-font-weight: var(--chat-label-weight,600);
3279
2729
  font-weight: var(--chat-label-weight,600);
3280
2730
  }
2731
+ .font-\[var\(--font-display\)\] {
2732
+ --tw-font-weight: var(--font-display);
2733
+ font-weight: var(--font-display);
2734
+ }
3281
2735
  .font-\[var\(--font-sans\)\] {
3282
2736
  --tw-font-weight: var(--font-sans);
3283
2737
  font-weight: var(--font-sans);
@@ -3397,6 +2851,21 @@
3397
2851
  .text-\[var\(--brand-emerald\)\] {
3398
2852
  color: var(--brand-emerald);
3399
2853
  }
2854
+ .text-\[var\(--brand-emerald\,\#10B981\)\] {
2855
+ color: var(--brand-emerald,#10B981);
2856
+ }
2857
+ .text-\[var\(--brand-strong-text\)\] {
2858
+ color: var(--brand-strong-text);
2859
+ }
2860
+ .text-\[var\(--brand-strong-text-dim\)\] {
2861
+ color: var(--brand-strong-text-dim);
2862
+ }
2863
+ .text-\[var\(--brand-strong-text-muted\)\] {
2864
+ color: var(--brand-strong-text-muted);
2865
+ }
2866
+ .text-\[var\(--btn-primary-text\)\] {
2867
+ color: var(--btn-primary-text);
2868
+ }
3400
2869
  .text-\[var\(--chat-label-size\,11px\)\] {
3401
2870
  color: var(--chat-label-size,11px);
3402
2871
  }
@@ -3451,6 +2920,9 @@
3451
2920
  .text-\[var\(--surface-success-text\)\] {
3452
2921
  color: var(--surface-success-text);
3453
2922
  }
2923
+ .text-\[var\(--surface-success-text\,\#047857\)\] {
2924
+ color: var(--surface-success-text,#047857);
2925
+ }
3454
2926
  .text-\[var\(--surface-teal-text\)\] {
3455
2927
  color: var(--surface-teal-text);
3456
2928
  }
@@ -3472,6 +2944,9 @@
3472
2944
  .text-\[var\(--text-primary\,hsl\(var\(--foreground\)\)\)\] {
3473
2945
  color: var(--text-primary,hsl(var(--foreground)));
3474
2946
  }
2947
+ .text-amber-600 {
2948
+ color: var(--color-amber-600);
2949
+ }
3475
2950
  .text-blue-400 {
3476
2951
  color: var(--color-blue-400);
3477
2952
  }
@@ -3540,12 +3015,6 @@
3540
3015
  .opacity-0 {
3541
3016
  opacity: 0%;
3542
3017
  }
3543
- .opacity-10 {
3544
- opacity: 10%;
3545
- }
3546
- .opacity-20 {
3547
- opacity: 20%;
3548
- }
3549
3018
  .opacity-25 {
3550
3019
  opacity: 25%;
3551
3020
  }
@@ -3570,37 +3039,14 @@
3570
3039
  .opacity-100 {
3571
3040
  opacity: 100%;
3572
3041
  }
3573
- .mix-blend-screen {
3574
- mix-blend-mode: screen;
3042
+ .shadow {
3043
+ --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));
3044
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3575
3045
  }
3576
3046
  .shadow-2xl {
3577
3047
  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
3578
3048
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3579
3049
  }
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
3050
  .shadow-\[inset_2px_0_0_hsl\(var\(--primary\)\)\] {
3605
3051
  --tw-shadow: inset 2px 0 0 var(--tw-shadow-color, hsl(var(--primary)));
3606
3052
  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 +3083,10 @@
3637
3083
  --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
3084
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3639
3085
  }
3086
+ .shadow-md {
3087
+ --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));
3088
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3089
+ }
3640
3090
  .shadow-sm {
3641
3091
  --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
3092
  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 +3099,14 @@
3649
3099
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3650
3100
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3651
3101
  }
3102
+ .ring-1 {
3103
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3104
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3105
+ }
3106
+ .ring-2 {
3107
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3108
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3109
+ }
3652
3110
  .ring-4 {
3653
3111
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3654
3112
  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 +3114,10 @@
3656
3114
  .ring-\[var\(--bg-root\)\] {
3657
3115
  --tw-ring-color: var(--bg-root);
3658
3116
  }
3117
+ .ring-offset-2 {
3118
+ --tw-ring-offset-width: 2px;
3119
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3120
+ }
3659
3121
  .outline {
3660
3122
  outline-style: var(--tw-outline-style);
3661
3123
  outline-width: 1px;
@@ -3664,31 +3126,9 @@
3664
3126
  --tw-blur: blur(8px);
3665
3127
  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
3128
  }
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
3129
  .filter {
3680
3130
  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
3131
  }
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
3132
  .backdrop-blur-md {
3693
3133
  --tw-backdrop-blur: blur(var(--blur-md));
3694
3134
  -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 +3256,6 @@
3816
3256
  }
3817
3257
  }
3818
3258
  }
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
3259
  .group-hover\:opacity-100 {
3830
3260
  &:is(:where(.group):hover *) {
3831
3261
  @media (hover: hover) {
@@ -3833,14 +3263,6 @@
3833
3263
  }
3834
3264
  }
3835
3265
  }
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
3266
  .peer-focus\:outline-none {
3845
3267
  &:is(:where(.peer):focus ~ *) {
3846
3268
  --tw-outline-style: none;
@@ -3990,6 +3412,12 @@
3990
3412
  }
3991
3413
  }
3992
3414
  }
3415
+ .last\:border-0 {
3416
+ &:last-child {
3417
+ border-style: var(--tw-border-style);
3418
+ border-width: 0px;
3419
+ }
3420
+ }
3993
3421
  .focus-within\:border-\[var\(--border-accent-hover\)\] {
3994
3422
  &:focus-within {
3995
3423
  border-color: var(--border-accent-hover);
@@ -4014,14 +3442,6 @@
4014
3442
  }
4015
3443
  }
4016
3444
  }
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
3445
  .hover\:translate-y-\[-1px\] {
4026
3446
  &:hover {
4027
3447
  @media (hover: hover) {
@@ -4051,13 +3471,6 @@
4051
3471
  }
4052
3472
  }
4053
3473
  }
4054
- .hover\:border-\[var\(--glass-border-color\)\] {
4055
- &:hover {
4056
- @media (hover: hover) {
4057
- border-color: var(--glass-border-color);
4058
- }
4059
- }
4060
- }
4061
3474
  .hover\:border-red-500\/30 {
4062
3475
  &:hover {
4063
3476
  @media (hover: hover) {
@@ -4089,20 +3502,20 @@
4089
3502
  }
4090
3503
  }
4091
3504
  }
4092
- .hover\:bg-\[var\(--code-error\)\]\/24 {
3505
+ .hover\:bg-\[var\(--btn-primary-hover\)\] {
4093
3506
  &:hover {
4094
3507
  @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
- }
3508
+ background-color: var(--btn-primary-hover);
4099
3509
  }
4100
3510
  }
4101
3511
  }
4102
- .hover\:bg-\[var\(--md3-primary\)\] {
3512
+ .hover\:bg-\[var\(--code-error\)\]\/24 {
4103
3513
  &:hover {
4104
3514
  @media (hover: hover) {
4105
- background-color: var(--md3-primary);
3515
+ background-color: var(--code-error);
3516
+ @supports (color: color-mix(in lab, red, red)) {
3517
+ background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
3518
+ }
4106
3519
  }
4107
3520
  }
4108
3521
  }
@@ -4181,16 +3594,6 @@
4181
3594
  }
4182
3595
  }
4183
3596
  }
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
3597
  .hover\:bg-yellow-600\/30 {
4195
3598
  &:hover {
4196
3599
  @media (hover: hover) {
@@ -4236,44 +3639,27 @@
4236
3639
  }
4237
3640
  }
4238
3641
  }
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\)\] {
3642
+ .hover\:shadow-md {
4257
3643
  &:hover {
4258
3644
  @media (hover: hover) {
4259
- --tw-shadow: 0 0 20px var(--tw-shadow-color, rgba(173,163,255,0.4));
3645
+ --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
3646
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4261
3647
  }
4262
3648
  }
4263
3649
  }
4264
- .hover\:shadow-\[var\(--shadow-glow\)\] {
3650
+ .hover\:shadow-sm {
4265
3651
  &:hover {
4266
3652
  @media (hover: hover) {
4267
- --tw-shadow: var(--shadow-glow);
3653
+ --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
3654
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4269
3655
  }
4270
3656
  }
4271
3657
  }
4272
- .hover\:shadow-md {
3658
+ .hover\:brightness-95 {
4273
3659
  &:hover {
4274
3660
  @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);
3661
+ --tw-brightness: brightness(95%);
3662
+ 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
3663
  }
4278
3664
  }
4279
3665
  }
@@ -4302,24 +3688,11 @@
4302
3688
  border-color: transparent;
4303
3689
  }
4304
3690
  }
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
3691
  .focus\:text-\[var\(--surface-danger-text\)\] {
4314
3692
  &:focus {
4315
3693
  color: var(--surface-danger-text);
4316
3694
  }
4317
3695
  }
4318
- .focus\:text-red-300 {
4319
- &:focus {
4320
- color: var(--color-red-300);
4321
- }
4322
- }
4323
3696
  .focus\:text-red-400 {
4324
3697
  &:focus {
4325
3698
  color: var(--color-red-400);
@@ -4586,6 +3959,11 @@
4586
3959
  flex-wrap: nowrap;
4587
3960
  }
4588
3961
  }
3962
+ .sm\:justify-between {
3963
+ @media (width >= 40rem) {
3964
+ justify-content: space-between;
3965
+ }
3966
+ }
4589
3967
  .sm\:justify-end {
4590
3968
  @media (width >= 40rem) {
4591
3969
  justify-content: flex-end;
@@ -4611,6 +3989,37 @@
4611
3989
  line-height: var(--tw-leading, var(--text-5xl--line-height));
4612
3990
  }
4613
3991
  }
3992
+ .sm\:opacity-0 {
3993
+ @media (width >= 40rem) {
3994
+ opacity: 0%;
3995
+ }
3996
+ }
3997
+ .sm\:group-hover\:opacity-100 {
3998
+ @media (width >= 40rem) {
3999
+ &:is(:where(.group):hover *) {
4000
+ @media (hover: hover) {
4001
+ opacity: 100%;
4002
+ }
4003
+ }
4004
+ }
4005
+ }
4006
+ .sm\:focus-within\:opacity-100 {
4007
+ @media (width >= 40rem) {
4008
+ &:focus-within {
4009
+ opacity: 100%;
4010
+ }
4011
+ }
4012
+ }
4013
+ .md\:col-span-2 {
4014
+ @media (width >= 48rem) {
4015
+ grid-column: span 2 / span 2;
4016
+ }
4017
+ }
4018
+ .md\:mt-0 {
4019
+ @media (width >= 48rem) {
4020
+ margin-top: calc(var(--spacing) * 0);
4021
+ }
4022
+ }
4614
4023
  .md\:block {
4615
4024
  @media (width >= 48rem) {
4616
4025
  display: block;
@@ -4631,11 +4040,31 @@
4631
4040
  grid-template-columns: repeat(3, minmax(0, 1fr));
4632
4041
  }
4633
4042
  }
4043
+ .md\:grid-cols-4 {
4044
+ @media (width >= 48rem) {
4045
+ grid-template-columns: repeat(4, minmax(0, 1fr));
4046
+ }
4047
+ }
4634
4048
  .md\:flex-row {
4635
4049
  @media (width >= 48rem) {
4636
4050
  flex-direction: row;
4637
4051
  }
4638
4052
  }
4053
+ .md\:items-center {
4054
+ @media (width >= 48rem) {
4055
+ align-items: center;
4056
+ }
4057
+ }
4058
+ .md\:items-end {
4059
+ @media (width >= 48rem) {
4060
+ align-items: flex-end;
4061
+ }
4062
+ }
4063
+ .md\:justify-between {
4064
+ @media (width >= 48rem) {
4065
+ justify-content: space-between;
4066
+ }
4067
+ }
4639
4068
  .lg\:col-span-1 {
4640
4069
  @media (width >= 64rem) {
4641
4070
  grid-column: span 1 / span 1;
@@ -4739,6 +4168,82 @@
4739
4168
  border-width: 0px;
4740
4169
  }
4741
4170
  }
4171
+ .\[\&\:\:-moz-range-track\]\:h-2 {
4172
+ &::-moz-range-track {
4173
+ height: calc(var(--spacing) * 2);
4174
+ }
4175
+ }
4176
+ .\[\&\:\:-moz-range-track\]\:rounded-full {
4177
+ &::-moz-range-track {
4178
+ border-radius: calc(infinity * 1px);
4179
+ }
4180
+ }
4181
+ .\[\&\:\:-webkit-slider-runnable-track\]\:h-2 {
4182
+ &::-webkit-slider-runnable-track {
4183
+ height: calc(var(--spacing) * 2);
4184
+ }
4185
+ }
4186
+ .\[\&\:\:-webkit-slider-runnable-track\]\:rounded-full {
4187
+ &::-webkit-slider-runnable-track {
4188
+ border-radius: calc(infinity * 1px);
4189
+ }
4190
+ }
4191
+ .\[\&\:\:-webkit-slider-thumb\]\:-mt-\[6px\] {
4192
+ &::-webkit-slider-thumb {
4193
+ margin-top: calc(6px * -1);
4194
+ }
4195
+ }
4196
+ .\[\&\:\:-webkit-slider-thumb\]\:h-5 {
4197
+ &::-webkit-slider-thumb {
4198
+ height: calc(var(--spacing) * 5);
4199
+ }
4200
+ }
4201
+ .\[\&\:\:-webkit-slider-thumb\]\:w-5 {
4202
+ &::-webkit-slider-thumb {
4203
+ width: calc(var(--spacing) * 5);
4204
+ }
4205
+ }
4206
+ .\[\&\:\:-webkit-slider-thumb\]\:appearance-none {
4207
+ &::-webkit-slider-thumb {
4208
+ appearance: none;
4209
+ }
4210
+ }
4211
+ .\[\&\:\:-webkit-slider-thumb\]\:rounded-full {
4212
+ &::-webkit-slider-thumb {
4213
+ border-radius: calc(infinity * 1px);
4214
+ }
4215
+ }
4216
+ .\[\&\:\:-webkit-slider-thumb\]\:border-2 {
4217
+ &::-webkit-slider-thumb {
4218
+ border-style: var(--tw-border-style);
4219
+ border-width: 2px;
4220
+ }
4221
+ }
4222
+ .\[\&\:\:-webkit-slider-thumb\]\:shadow-md {
4223
+ &::-webkit-slider-thumb {
4224
+ --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));
4225
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
4226
+ }
4227
+ }
4228
+ .\[\&\:\:-webkit-slider-thumb\]\:transition-transform {
4229
+ &::-webkit-slider-thumb {
4230
+ transition-property: transform, translate, scale, rotate;
4231
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
4232
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
4233
+ }
4234
+ }
4235
+ .\[\&\:\:-webkit-slider-thumb\]\:hover\:scale-110 {
4236
+ &::-webkit-slider-thumb {
4237
+ &:hover {
4238
+ @media (hover: hover) {
4239
+ --tw-scale-x: 110%;
4240
+ --tw-scale-y: 110%;
4241
+ --tw-scale-z: 110%;
4242
+ scale: var(--tw-scale-x) var(--tw-scale-y);
4243
+ }
4244
+ }
4245
+ }
4246
+ }
4742
4247
  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
4743
4248
  &:has([role=checkbox]) {
4744
4249
  padding-right: calc(var(--spacing) * 0);
@@ -4999,33 +4504,28 @@
4999
4504
  }
5000
4505
  }
5001
4506
  }
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);
4507
+ [data-sandbox-theme="vault"] .glass-panel {
4508
+ background: hsl(var(--card));
4509
+ backdrop-filter: none;
4510
+ -webkit-backdrop-filter: none;
5007
4511
  border-color: hsl(var(--border));
5008
- box-shadow: 0 1px 4px hsl(var(--foreground) / 0.06);
4512
+ box-shadow: var(--shadow-card);
5009
4513
  }
5010
- [data-sandbox-theme="vault"] .glass-panel:hover,
5011
- [data-sandbox-theme="dawn"] .glass-panel:hover {
4514
+ [data-sandbox-theme="vault"] .glass-panel:hover {
5012
4515
  border-color: hsl(var(--foreground) / 0.15);
5013
4516
  }
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);
4517
+ [data-sandbox-theme="vault"] .glass-panel-heavy {
4518
+ background: hsl(var(--card));
4519
+ backdrop-filter: none;
4520
+ -webkit-backdrop-filter: none;
5019
4521
  border-color: hsl(var(--border));
5020
- box-shadow: 0 4px 16px hsl(var(--foreground) / 0.08);
4522
+ box-shadow: var(--shadow-card);
5021
4523
  }
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);
4524
+ [data-sandbox-theme="vault"] .glow-primary {
4525
+ box-shadow: none;
5025
4526
  }
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);
4527
+ [data-sandbox-theme="vault"] .glow-primary:hover {
4528
+ box-shadow: none;
5029
4529
  }
5030
4530
  @property --tw-translate-x {
5031
4531
  syntax: "*";
@@ -5323,6 +4823,11 @@
5323
4823
  syntax: "*";
5324
4824
  inherits: false;
5325
4825
  }
4826
+ @property --tw-content {
4827
+ syntax: "*";
4828
+ initial-value: "";
4829
+ inherits: false;
4830
+ }
5326
4831
  @property --tw-scale-x {
5327
4832
  syntax: "*";
5328
4833
  inherits: false;
@@ -5338,11 +4843,6 @@
5338
4843
  inherits: false;
5339
4844
  initial-value: 1;
5340
4845
  }
5341
- @property --tw-content {
5342
- syntax: "*";
5343
- initial-value: "";
5344
- inherits: false;
5345
- }
5346
4846
  @keyframes spin {
5347
4847
  to {
5348
4848
  transform: rotate(360deg);
@@ -5440,10 +4940,10 @@
5440
4940
  --tw-backdrop-sepia: initial;
5441
4941
  --tw-duration: initial;
5442
4942
  --tw-ease: initial;
4943
+ --tw-content: "";
5443
4944
  --tw-scale-x: 1;
5444
4945
  --tw-scale-y: 1;
5445
4946
  --tw-scale-z: 1;
5446
- --tw-content: "";
5447
4947
  }
5448
4948
  }
5449
4949
  }