@aravindc26/velu 0.12.7 → 0.12.9

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 (74) hide show
  1. package/package.json +1 -1
  2. package/src/build.ts +13 -0
  3. package/src/cli.ts +51 -9
  4. package/src/engine/app/(docs)/[...slug]/layout.tsx +21 -537
  5. package/src/engine/app/_preview/[sessionId]/[...slug]/layout.tsx +96 -0
  6. package/src/engine/app/_preview/[sessionId]/[...slug]/page.tsx +298 -0
  7. package/src/engine/app/_preview/[sessionId]/layout.tsx +56 -0
  8. package/src/{preview-engine/app → engine/app/_preview}/[sessionId]/page.tsx +7 -3
  9. package/src/engine/app/_preview/api/sessions/[sessionId]/assets/[...path]/route.ts +51 -0
  10. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/init/route.ts +2 -2
  11. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/route.ts +3 -3
  12. package/src/{preview-engine/app → engine/app/_preview}/api/sessions/[sessionId]/sync/route.ts +2 -2
  13. package/src/{preview-engine/app → engine/app/_preview}/layout.tsx +4 -1
  14. package/src/engine/app/global.css +0 -3623
  15. package/src/engine/app/layout.tsx +4 -3
  16. package/src/engine/components/sidebar-links.tsx +11 -5
  17. package/src/engine/lib/docs-layout.tsx +605 -0
  18. package/src/engine/lib/layout.shared.ts +7 -7
  19. package/src/engine/lib/preview-config.ts +129 -0
  20. package/src/{preview-engine/lib/content-generator.ts → engine/lib/preview-content.ts} +242 -42
  21. package/src/engine/lib/source.ts +80 -97
  22. package/src/engine/lib/velu.ts +79 -55
  23. package/src/engine/mdx-components.tsx +14 -650
  24. package/src/engine/source.config.ts +11 -89
  25. package/src/engine/tsconfig.json +1 -0
  26. package/src/engine-core/components/assistant.tsx +361 -0
  27. package/src/engine-core/components/banner.tsx +80 -0
  28. package/src/engine-core/components/changelog-filters.tsx +114 -0
  29. package/src/engine-core/components/code-group.tsx +383 -0
  30. package/src/engine-core/components/color.tsx +118 -0
  31. package/src/engine-core/components/copy-page.tsx +223 -0
  32. package/src/engine-core/components/dropdown-switcher.tsx +142 -0
  33. package/src/engine-core/components/expandable.tsx +77 -0
  34. package/src/engine-core/components/header-tab-link.tsx +43 -0
  35. package/src/engine-core/components/icon.tsx +136 -0
  36. package/src/engine-core/components/image-zoom-fallback.tsx +147 -0
  37. package/src/engine-core/components/image.tsx +111 -0
  38. package/src/engine-core/components/lang-switcher.tsx +101 -0
  39. package/src/engine-core/components/manual-api-playground.tsx +154 -0
  40. package/src/engine-core/components/mermaid.tsx +142 -0
  41. package/src/engine-core/components/openapi-toc-sync.tsx +59 -0
  42. package/src/engine-core/components/openapi.tsx +1682 -0
  43. package/src/engine-core/components/page-feedback-api.test.ts +83 -0
  44. package/src/engine-core/components/page-feedback-api.ts +89 -0
  45. package/src/engine-core/components/page-feedback.tsx +200 -0
  46. package/src/engine-core/components/product-switcher.tsx +107 -0
  47. package/src/engine-core/components/prompt.tsx +90 -0
  48. package/src/engine-core/components/providers.tsx +21 -0
  49. package/src/engine-core/components/search.tsx +318 -0
  50. package/src/engine-core/components/sidebar-links.tsx +54 -0
  51. package/src/engine-core/components/synced-tabs.tsx +57 -0
  52. package/src/engine-core/components/theme-toggle.tsx +39 -0
  53. package/src/engine-core/components/toc-examples.tsx +110 -0
  54. package/src/engine-core/components/version-switcher.tsx +95 -0
  55. package/src/engine-core/components/view.tsx +344 -0
  56. package/src/engine-core/css/assistant.css +326 -0
  57. package/src/engine-core/css/copy-page.css +206 -0
  58. package/src/engine-core/css/search.css +142 -0
  59. package/src/engine-core/css/shared.css +3628 -0
  60. package/src/engine-core/lib/remark-plugins.ts +102 -0
  61. package/src/engine-core/lib/source-plugins.ts +105 -0
  62. package/src/engine-core/mdx-components.tsx +654 -0
  63. package/src/engine-core/types.ts +49 -0
  64. package/src/preview-engine/app/[sessionId]/[...slug]/page.tsx +0 -41
  65. package/src/preview-engine/app/[sessionId]/layout.tsx +0 -23
  66. package/src/preview-engine/app/global.css +0 -3
  67. package/src/preview-engine/lib/session-config.ts +0 -86
  68. package/src/preview-engine/lib/source.ts +0 -60
  69. package/src/preview-engine/next.config.mjs +0 -20
  70. package/src/preview-engine/postcss.config.mjs +0 -8
  71. package/src/preview-engine/source.config.ts +0 -26
  72. package/src/preview-engine/tsconfig.json +0 -32
  73. /package/src/{preview-engine/app → engine/app/_preview}/page.tsx +0 -0
  74. /package/src/{preview-engine/lib/auth.ts → engine/lib/preview-auth.ts} +0 -0
@@ -0,0 +1,3628 @@
1
+
2
+ body {
3
+ min-height: 100vh;
4
+ }
5
+
6
+ body:has(.velu-announcement) #nd-docs-layout,
7
+ body:has(.velu-announcement) #nd-notebook-layout {
8
+ --fd-banner-height: var(--velu-announcement-h, 0px) !important;
9
+ }
10
+
11
+ /* ── Global announcement banner ── */
12
+ .velu-announcement {
13
+ position: sticky;
14
+ top: 0;
15
+ z-index: 30;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ width: 100%;
20
+ padding: 0.5rem 1rem;
21
+ background-color: var(--color-fd-primary);
22
+ color: #fff;
23
+ font-size: 0.875rem;
24
+ line-height: 1.4;
25
+ text-align: center;
26
+ gap: 0.5rem;
27
+ border-radius: 0;
28
+ margin: 0;
29
+ border: none;
30
+ }
31
+
32
+ .velu-announcement a {
33
+ color: #fff;
34
+ text-decoration: underline;
35
+ text-underline-offset: 2px;
36
+ }
37
+
38
+ .velu-announcement a:hover {
39
+ opacity: 0.85;
40
+ }
41
+
42
+ .velu-announcement-content {
43
+ flex: 1;
44
+ min-width: 0;
45
+ }
46
+
47
+ .velu-announcement-dismiss {
48
+ flex-shrink: 0;
49
+ display: inline-flex;
50
+ align-items: center;
51
+ justify-content: center;
52
+ width: 1.5rem;
53
+ height: 1.5rem;
54
+ padding: 0;
55
+ border: none;
56
+ border-radius: 0.25rem;
57
+ background: transparent;
58
+ color: #fff;
59
+ font-size: 1rem;
60
+ cursor: pointer;
61
+ opacity: 0.8;
62
+ transition: opacity 0.15s;
63
+ }
64
+
65
+ .velu-announcement-dismiss:hover {
66
+ opacity: 1;
67
+ }
68
+
69
+ .velu-nav-brand {
70
+ display: inline-flex;
71
+ align-items: center;
72
+ gap: 0.25rem;
73
+ max-width: 100%;
74
+ }
75
+
76
+ .velu-nav-logo {
77
+ display: block;
78
+ height: 1.95rem;
79
+ width: auto;
80
+ max-width: 190px;
81
+ }
82
+
83
+ .velu-nav-logo-dark {
84
+ display: none;
85
+ }
86
+
87
+ .dark .velu-nav-logo-light {
88
+ display: none;
89
+ }
90
+
91
+ .dark .velu-nav-logo-dark {
92
+ display: block;
93
+ }
94
+
95
+ /* Keep sidebar brand and collapse control aligned like Mintlify. */
96
+ #nd-sidebar .flex.justify-between {
97
+ width: 100%;
98
+ display: grid;
99
+ grid-template-columns: minmax(0, 1fr) auto;
100
+ align-items: center;
101
+ column-gap: 0.5rem;
102
+ }
103
+
104
+ #nd-sidebar .flex.justify-between > a {
105
+ min-width: 0;
106
+ overflow: hidden;
107
+ }
108
+
109
+ #nd-sidebar .flex.justify-between > button {
110
+ margin-left: auto;
111
+ }
112
+
113
+ /* Ensure sidebar/toc widths are set on the grid layout */
114
+ nextjs-portal {
115
+ display: none !important;
116
+ }
117
+
118
+ @media (min-width: 768px) {
119
+ #nd-docs-layout[data-sidebar-collapsed='false'] {
120
+ --fd-sidebar-width: 268px;
121
+ }
122
+ }
123
+
124
+ @media (min-width: 1024px) {
125
+ #nd-docs-layout,
126
+ #nd-notebook-layout {
127
+ --fd-toc-width: 268px;
128
+ }
129
+
130
+ #nd-docs-layout:has(#nd-toc .velu-api-toc-rail),
131
+ #nd-notebook-layout:has(#nd-toc .velu-api-toc-rail) {
132
+ --fd-toc-width: clamp(420px, 32vw, 560px);
133
+ }
134
+
135
+ /* Override notebook's default xl TOC width reset for API example rail. */
136
+ #nd-toc:has(.velu-api-toc-rail) {
137
+ --fd-toc-width: clamp(420px, 32vw, 560px);
138
+ width: var(--fd-toc-width);
139
+ padding-top: 0;
140
+ overflow-y: auto;
141
+ overflow-x: hidden;
142
+ }
143
+
144
+ /* Notebook header: keep tabs on the left and move search to the far right. */
145
+ #nd-subnav [data-header-body] > button[data-search-full] {
146
+ order: 3;
147
+ margin-left: auto;
148
+ width: min(280px, 28vw);
149
+ max-width: 280px;
150
+ min-width: 220px;
151
+ flex: 0 0 auto;
152
+ }
153
+
154
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 {
155
+ order: 2;
156
+ flex: 0 1 auto;
157
+ justify-content: flex-start;
158
+ margin-right: auto;
159
+ }
160
+
161
+ /* Top bar tabs: active underline like Mintlify. */
162
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden {
163
+ align-self: stretch;
164
+ }
165
+
166
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > a,
167
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button {
168
+ display: inline-flex;
169
+ align-items: center;
170
+ height: 100%;
171
+ font-size: 1.05rem;
172
+ font-weight: 700;
173
+ border-bottom: 2px solid transparent;
174
+ margin-bottom: -1px;
175
+ }
176
+
177
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button {
178
+ background: transparent;
179
+ padding-inline: 0;
180
+ border-radius: 0;
181
+ }
182
+
183
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > a[data-active='true'],
184
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button:has(a[data-active='true']),
185
+ #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button[data-state='open'] {
186
+ border-bottom-color: var(--color-fd-primary);
187
+ }
188
+ }
189
+
190
+ .velu-sidebar-footer {
191
+ display: flex;
192
+ flex-direction: column;
193
+ gap: 0.5rem;
194
+ }
195
+
196
+ .velu-sidebar-footer-shell {
197
+ border-top: 1px solid var(--color-fd-border);
198
+ padding: 0.75rem 1rem 1rem;
199
+ }
200
+
201
+ .velu-sidebar-footer-icons {
202
+ display: flex;
203
+ align-items: center;
204
+ gap: 0.35rem;
205
+ margin-bottom: 0.35rem;
206
+ }
207
+
208
+ .velu-sidebar-banner {
209
+ display: flex;
210
+ width: 100%;
211
+ padding: 0.125rem 0;
212
+ order: -1;
213
+ }
214
+
215
+ /* Keep the sidebar title row above the product switcher */
216
+ #nd-sidebar .flex.flex-col > :first-child {
217
+ order: -2;
218
+ }
219
+
220
+ .velu-header-version-switcher {
221
+ display: flex;
222
+ align-items: center;
223
+ justify-content: flex-end;
224
+ }
225
+
226
+ .velu-version-switcher-wrap {
227
+ position: relative;
228
+ }
229
+
230
+ .velu-version-switcher {
231
+ display: inline-flex;
232
+ align-items: center;
233
+ gap: 0.35rem;
234
+ padding: 0.25rem 0.5rem;
235
+ border: none;
236
+ border-radius: 0.375rem;
237
+ background: transparent;
238
+ color: var(--color-fd-muted-foreground);
239
+ font-size: 0.75rem;
240
+ font-weight: 500;
241
+ cursor: pointer;
242
+ transition: color 0.15s, background-color 0.15s;
243
+ }
244
+
245
+ .velu-version-switcher:hover {
246
+ color: var(--color-fd-foreground);
247
+ background-color: var(--color-fd-accent);
248
+ }
249
+
250
+ .velu-version-switcher svg {
251
+ width: 0.9rem;
252
+ height: 0.9rem;
253
+ }
254
+
255
+ .velu-version-switcher svg:last-child {
256
+ width: 0.8rem;
257
+ height: 0.8rem;
258
+ }
259
+
260
+ .velu-version-menu {
261
+ position: absolute;
262
+ top: calc(100% + 0.25rem);
263
+ right: 0;
264
+ min-width: 7.5rem;
265
+ padding: 0.25rem;
266
+ border-radius: 0.5rem;
267
+ background-color: var(--color-fd-popover);
268
+ border: 1px solid var(--color-fd-border);
269
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
270
+ z-index: 60;
271
+ }
272
+
273
+ .velu-version-option {
274
+ display: block;
275
+ width: 100%;
276
+ padding: 0.35rem 0.5rem;
277
+ border: none;
278
+ border-radius: 0.375rem;
279
+ background: transparent;
280
+ color: var(--color-fd-muted-foreground);
281
+ font-size: 0.8rem;
282
+ text-align: left;
283
+ cursor: pointer;
284
+ transition: color 0.15s, background-color 0.15s;
285
+ }
286
+
287
+ .velu-version-option:hover {
288
+ background-color: var(--color-fd-accent);
289
+ color: var(--color-fd-foreground);
290
+ }
291
+
292
+ .velu-version-option.active {
293
+ color: var(--color-fd-primary);
294
+ }
295
+
296
+ .velu-product-switcher-wrap {
297
+ position: relative;
298
+ width: 100%;
299
+ }
300
+
301
+ .velu-product-switcher {
302
+ display: flex;
303
+ align-items: center;
304
+ justify-content: space-between;
305
+ width: 100%;
306
+ padding: 0.5rem 0.625rem;
307
+ border: 1px solid var(--color-fd-border);
308
+ border-radius: 0.5rem;
309
+ background: var(--color-fd-background);
310
+ color: var(--color-fd-foreground);
311
+ font-size: 0.8125rem;
312
+ font-weight: 500;
313
+ cursor: pointer;
314
+ transition: border-color 0.15s, background-color 0.15s;
315
+ }
316
+
317
+ .velu-product-switcher:hover {
318
+ border-color: var(--color-fd-primary);
319
+ background-color: var(--color-fd-accent);
320
+ }
321
+
322
+ .velu-product-switcher svg {
323
+ width: 0.875rem;
324
+ height: 0.875rem;
325
+ flex-shrink: 0;
326
+ opacity: 0.6;
327
+ }
328
+
329
+ .velu-product-switcher-label {
330
+ flex: 1;
331
+ text-align: left;
332
+ }
333
+
334
+ .velu-product-switcher-label-wrap {
335
+ display: inline-flex;
336
+ align-items: center;
337
+ gap: 0.4rem;
338
+ min-width: 0;
339
+ }
340
+
341
+ .velu-product-icon {
342
+ width: 0.9rem;
343
+ height: 0.9rem;
344
+ flex-shrink: 0;
345
+ opacity: 0.75;
346
+ }
347
+
348
+ .velu-product-menu {
349
+ position: absolute;
350
+ top: calc(100% + 0.25rem);
351
+ left: 0;
352
+ right: 0;
353
+ padding: 0.25rem;
354
+ border-radius: 0.5rem;
355
+ background-color: var(--color-fd-popover);
356
+ border: 1px solid var(--color-fd-border);
357
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
358
+ z-index: 60;
359
+ }
360
+
361
+ .velu-product-option {
362
+ display: flex;
363
+ flex-direction: column;
364
+ width: 100%;
365
+ padding: 0.5rem 0.625rem;
366
+ border: none;
367
+ border-radius: 0.375rem;
368
+ background: transparent;
369
+ text-align: left;
370
+ cursor: pointer;
371
+ transition: background-color 0.15s;
372
+ }
373
+
374
+ .velu-product-option:hover {
375
+ background-color: var(--color-fd-accent);
376
+ }
377
+
378
+ .velu-product-option.active {
379
+ background-color: var(--color-fd-accent);
380
+ }
381
+
382
+ .velu-product-option-name {
383
+ font-size: 0.8125rem;
384
+ font-weight: 500;
385
+ color: var(--color-fd-foreground);
386
+ }
387
+
388
+ .velu-product-option-name-wrap {
389
+ display: inline-flex;
390
+ align-items: center;
391
+ gap: 0.4rem;
392
+ }
393
+
394
+ .velu-product-option-icon {
395
+ width: 0.9rem;
396
+ height: 0.9rem;
397
+ flex-shrink: 0;
398
+ opacity: 0.75;
399
+ }
400
+
401
+ .velu-product-option.active .velu-product-option-name {
402
+ color: var(--color-fd-primary);
403
+ }
404
+
405
+ .velu-product-option-desc {
406
+ font-size: 0.6875rem;
407
+ color: var(--color-fd-muted-foreground);
408
+ margin-top: 0.125rem;
409
+ }
410
+
411
+ .velu-sidebar-footer-row {
412
+ display: flex;
413
+ align-items: center;
414
+ justify-content: space-between;
415
+ }
416
+
417
+ .velu-sidebar-links {
418
+ display: flex;
419
+ flex-direction: column;
420
+ gap: 0;
421
+ }
422
+
423
+ .velu-sidebar-link {
424
+ display: flex;
425
+ align-items: center;
426
+ justify-content: space-between;
427
+ padding: 0.375rem 0.5rem;
428
+ border-radius: 0.375rem;
429
+ font-size: 0.875rem;
430
+ color: var(--color-fd-muted-foreground);
431
+ text-decoration: none;
432
+ transition: color 0.15s, background-color 0.15s;
433
+ }
434
+
435
+ .velu-sidebar-link:hover {
436
+ color: var(--color-fd-foreground);
437
+ background-color: var(--color-fd-accent);
438
+ }
439
+
440
+ .velu-sidebar-link-text {
441
+ flex: 1;
442
+ }
443
+
444
+ .velu-sidebar-link-left {
445
+ display: inline-flex;
446
+ align-items: center;
447
+ gap: 0.4rem;
448
+ min-width: 0;
449
+ }
450
+
451
+ .velu-sidebar-link-leading-icon {
452
+ width: 0.875rem;
453
+ height: 0.875rem;
454
+ opacity: 0.7;
455
+ flex-shrink: 0;
456
+ }
457
+
458
+ .velu-sidebar-link-icon {
459
+ width: 0.875rem;
460
+ height: 0.875rem;
461
+ opacity: 0.5;
462
+ flex-shrink: 0;
463
+ }
464
+
465
+ .velu-sidebar-link:hover .velu-sidebar-link-icon {
466
+ opacity: 0.8;
467
+ }
468
+
469
+ .velu-status-badge {
470
+ display: inline-flex;
471
+ align-items: center;
472
+ margin-inline-start: 0.45rem;
473
+ padding: 0.06rem 0.38rem;
474
+ border-radius: 999px;
475
+ border: 1px solid var(--color-fd-border);
476
+ font-size: 0.62rem;
477
+ font-weight: 650;
478
+ line-height: 1.2;
479
+ color: var(--color-fd-muted-foreground);
480
+ text-transform: uppercase;
481
+ letter-spacing: 0.02em;
482
+ }
483
+
484
+ .velu-status-badge-deprecated {
485
+ border-color: color-mix(in oklab, #f59e0b 52%, var(--color-fd-border));
486
+ background: color-mix(in oklab, #f59e0b 14%, transparent);
487
+ color: #f59e0b;
488
+ }
489
+
490
+ .velu-openapi-sidebar-item {
491
+ display: inline-flex;
492
+ align-items: center;
493
+ gap: 0.55rem;
494
+ min-width: 0;
495
+ }
496
+
497
+ .velu-openapi-sidebar-label {
498
+ min-width: 0;
499
+ }
500
+
501
+ .velu-openapi-method-badge {
502
+ display: inline-flex;
503
+ align-items: center;
504
+ justify-content: center;
505
+ border-radius: 999px;
506
+ padding: 0.06rem 0.43rem;
507
+ font-size: 0.66rem;
508
+ font-weight: 700;
509
+ line-height: 1.2;
510
+ text-transform: uppercase;
511
+ letter-spacing: 0.01em;
512
+ flex-shrink: 0;
513
+ }
514
+
515
+ .velu-openapi-method-get {
516
+ background: color-mix(in oklab, #16a34a 20%, transparent);
517
+ color: #22c55e;
518
+ }
519
+
520
+ .velu-openapi-method-post {
521
+ background: color-mix(in oklab, #2563eb 20%, transparent);
522
+ color: #60a5fa;
523
+ }
524
+
525
+ .velu-openapi-method-put {
526
+ background: color-mix(in oklab, #ca8a04 20%, transparent);
527
+ color: #facc15;
528
+ }
529
+
530
+ .velu-openapi-method-patch {
531
+ background: color-mix(in oklab, #ea580c 20%, transparent);
532
+ color: #fb923c;
533
+ }
534
+
535
+ .velu-openapi-method-delete {
536
+ background: color-mix(in oklab, #dc2626 20%, transparent);
537
+ color: #f87171;
538
+ }
539
+
540
+ .velu-openapi-method-webhook {
541
+ background: color-mix(in oklab, #8b5cf6 20%, transparent);
542
+ color: #c4b5fd;
543
+ }
544
+
545
+ .velu-theme-toggle {
546
+ display: flex;
547
+ align-items: center;
548
+ gap: 0.25rem;
549
+ padding: 0.25rem;
550
+ border-radius: 0.5rem;
551
+ background-color: var(--color-fd-accent);
552
+ width: fit-content;
553
+ margin-left: auto;
554
+ }
555
+
556
+ .velu-lang-switcher {
557
+ display: flex;
558
+ align-items: center;
559
+ gap: 0.375rem;
560
+ padding: 0.375rem 0.5rem;
561
+ border: none;
562
+ border-radius: 0.375rem;
563
+ background: transparent;
564
+ color: var(--color-fd-muted-foreground);
565
+ font-size: 0.875rem;
566
+ cursor: pointer;
567
+ transition: color 0.15s, background-color 0.15s;
568
+ position: relative;
569
+ }
570
+
571
+ .velu-lang-switcher:hover {
572
+ color: var(--color-fd-foreground);
573
+ background-color: var(--color-fd-accent);
574
+ }
575
+
576
+ .velu-lang-switcher svg {
577
+ width: 1rem;
578
+ height: 1rem;
579
+ }
580
+
581
+ .velu-lang-menu {
582
+ position: absolute;
583
+ bottom: 100%;
584
+ left: 0;
585
+ margin-bottom: 0.25rem;
586
+ min-width: 8rem;
587
+ padding: 0.25rem;
588
+ border-radius: 0.5rem;
589
+ background-color: var(--color-fd-popover);
590
+ border: 1px solid var(--color-fd-border);
591
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
592
+ z-index: 50;
593
+ }
594
+
595
+ .velu-lang-option {
596
+ display: block;
597
+ width: 100%;
598
+ padding: 0.375rem 0.5rem;
599
+ border: none;
600
+ border-radius: 0.375rem;
601
+ background: transparent;
602
+ color: var(--color-fd-muted-foreground);
603
+ font-size: 0.875rem;
604
+ text-align: left;
605
+ cursor: pointer;
606
+ transition: color 0.15s, background-color 0.15s;
607
+ }
608
+
609
+ .velu-lang-option:hover {
610
+ background-color: var(--color-fd-accent);
611
+ color: var(--color-fd-foreground);
612
+ }
613
+
614
+ .velu-lang-option.active {
615
+ color: var(--color-fd-primary);
616
+ }
617
+
618
+ .velu-theme-btn {
619
+ display: flex;
620
+ align-items: center;
621
+ justify-content: center;
622
+ padding: 0.375rem;
623
+ border: none;
624
+ border-radius: 0.375rem;
625
+ background: transparent;
626
+ color: var(--color-fd-muted-foreground);
627
+ cursor: pointer;
628
+ transition: color 0.15s, background-color 0.15s;
629
+ }
630
+
631
+ .velu-theme-btn:hover {
632
+ color: var(--color-fd-foreground);
633
+ }
634
+
635
+ .velu-theme-btn.active {
636
+ background-color: var(--color-fd-background);
637
+ color: var(--color-fd-foreground);
638
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
639
+ }
640
+
641
+ .velu-footer {
642
+ margin-top: 3rem;
643
+ padding-top: 1.1rem;
644
+ border-top: 1px solid var(--color-fd-border);
645
+ display: flex;
646
+ align-items: center;
647
+ justify-content: space-between;
648
+ gap: 1rem;
649
+ flex-wrap: wrap;
650
+ font-size: 1rem;
651
+ color: var(--color-fd-muted-foreground);
652
+ }
653
+
654
+ .velu-footer-socials {
655
+ display: inline-flex;
656
+ align-items: center;
657
+ gap: 1rem;
658
+ }
659
+
660
+ .velu-footer-social-link {
661
+ display: inline-flex;
662
+ align-items: center;
663
+ justify-content: center;
664
+ color: var(--color-fd-muted-foreground);
665
+ opacity: 0.78;
666
+ text-decoration: none;
667
+ transition: color 0.15s, opacity 0.15s;
668
+ }
669
+
670
+ .velu-footer-social-link:hover {
671
+ color: var(--color-fd-foreground);
672
+ opacity: 1;
673
+ }
674
+
675
+ .velu-footer-social-icon {
676
+ width: 1.05rem;
677
+ height: 1.05rem;
678
+ flex-shrink: 0;
679
+ }
680
+
681
+ .velu-footer-powered {
682
+ margin-left: auto;
683
+ font-size: 1.15rem;
684
+ line-height: 1.3;
685
+ }
686
+
687
+ .velu-page-feedback-wrap {
688
+ margin-top: 2.75rem;
689
+ display: grid;
690
+ gap: 0.85rem;
691
+ }
692
+
693
+ .velu-page-feedback-block {
694
+ display: grid;
695
+ gap: 0.85rem;
696
+ }
697
+
698
+ .velu-page-feedback-row {
699
+ display: flex;
700
+ align-items: center;
701
+ justify-content: flex-start;
702
+ gap: 0.55rem;
703
+ flex-wrap: wrap;
704
+ }
705
+
706
+ .velu-page-feedback-question {
707
+ margin: 0;
708
+ font-size: 0.82rem;
709
+ font-weight: 500;
710
+ line-height: 1.35;
711
+ color: var(--color-fd-foreground);
712
+ }
713
+
714
+ .velu-page-feedback-actions {
715
+ display: inline-flex;
716
+ align-items: center;
717
+ gap: 0.5rem;
718
+ margin-left: 0.1rem;
719
+ }
720
+
721
+ .velu-page-feedback-btn {
722
+ display: inline-flex;
723
+ align-items: center;
724
+ gap: 0.45rem;
725
+ border: 1px solid var(--color-fd-border);
726
+ border-radius: 999px;
727
+ background: transparent;
728
+ color: var(--color-fd-muted-foreground);
729
+ height: 1.72rem;
730
+ padding: 0 0.6rem;
731
+ font-size: 0.82rem;
732
+ font-weight: 500;
733
+ line-height: 1;
734
+ cursor: pointer;
735
+ transition: color 0.15s, border-color 0.15s, background-color 0.15s;
736
+ }
737
+
738
+ .velu-page-feedback-btn:hover {
739
+ color: var(--color-fd-foreground);
740
+ border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
741
+ background: color-mix(in oklab, var(--color-fd-primary) 8%, transparent);
742
+ }
743
+
744
+ .velu-page-feedback-btn.is-active {
745
+ color: var(--color-fd-foreground);
746
+ border-color: color-mix(in oklab, var(--color-fd-primary) 55%, var(--color-fd-border));
747
+ }
748
+
749
+ .velu-page-feedback-btn svg {
750
+ width: 0.76rem;
751
+ height: 0.76rem;
752
+ stroke: currentColor;
753
+ fill: none;
754
+ stroke-width: 1.9;
755
+ stroke-linecap: round;
756
+ stroke-linejoin: round;
757
+ }
758
+
759
+ .velu-page-feedback-panel {
760
+ border-top: 1px solid var(--color-fd-border);
761
+ padding-top: 1rem;
762
+ display: grid;
763
+ gap: 0.85rem;
764
+ }
765
+
766
+ .velu-page-feedback-panel-title {
767
+ margin: 0;
768
+ font-size: 0.95rem;
769
+ line-height: 1.35;
770
+ font-weight: 600;
771
+ color: var(--color-fd-foreground);
772
+ }
773
+
774
+ .velu-page-feedback-options {
775
+ display: grid;
776
+ gap: 0.35rem;
777
+ }
778
+
779
+ .velu-page-feedback-option {
780
+ border: 0;
781
+ background: transparent;
782
+ display: inline-flex;
783
+ align-items: center;
784
+ gap: 0.6rem;
785
+ width: fit-content;
786
+ max-width: 100%;
787
+ color: var(--color-fd-muted-foreground);
788
+ font-size: 0.82rem;
789
+ line-height: 1.35;
790
+ text-align: left;
791
+ padding: 0.12rem 0;
792
+ cursor: pointer;
793
+ }
794
+
795
+ .velu-page-feedback-option:hover {
796
+ color: var(--color-fd-foreground);
797
+ }
798
+
799
+ .velu-page-feedback-option.is-checked {
800
+ color: var(--color-fd-foreground);
801
+ }
802
+
803
+ .velu-page-feedback-radio {
804
+ width: 1rem;
805
+ height: 1rem;
806
+ border-radius: 999px;
807
+ border: 1px solid color-mix(in oklab, var(--color-fd-muted-foreground) 50%, var(--color-fd-border));
808
+ box-shadow: inset 0 0 0 0 transparent;
809
+ flex-shrink: 0;
810
+ transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
811
+ }
812
+
813
+ .velu-page-feedback-option.is-checked .velu-page-feedback-radio {
814
+ border-color: var(--color-fd-primary);
815
+ background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
816
+ box-shadow: inset 0 0 0 3px var(--color-fd-primary);
817
+ }
818
+
819
+ .velu-page-feedback-inputs {
820
+ display: grid;
821
+ gap: 0.6rem;
822
+ }
823
+
824
+ .velu-page-feedback-input {
825
+ width: 100%;
826
+ border: 1px solid var(--color-fd-border);
827
+ border-radius: 0.75rem;
828
+ background: transparent;
829
+ color: var(--color-fd-foreground);
830
+ font: inherit;
831
+ font-size: 0.82rem;
832
+ line-height: 1.35;
833
+ padding: 0.68rem 0.8rem;
834
+ }
835
+
836
+ .velu-page-feedback-input::placeholder {
837
+ color: var(--color-fd-muted-foreground);
838
+ }
839
+
840
+ .velu-page-feedback-input:focus {
841
+ outline: none;
842
+ border-color: color-mix(in oklab, var(--color-fd-primary) 55%, var(--color-fd-border));
843
+ box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-fd-primary) 22%, transparent);
844
+ }
845
+
846
+ .velu-page-feedback-cta {
847
+ display: inline-flex;
848
+ align-items: center;
849
+ gap: 0.55rem;
850
+ }
851
+
852
+ .velu-page-feedback-cancel,
853
+ .velu-page-feedback-submit {
854
+ border-radius: 999px;
855
+ height: 2rem;
856
+ padding: 0 0.9rem;
857
+ font: inherit;
858
+ font-size: 0.82rem;
859
+ font-weight: 500;
860
+ line-height: 1;
861
+ cursor: pointer;
862
+ }
863
+
864
+ .velu-page-feedback-cancel {
865
+ border: 1px solid var(--color-fd-border);
866
+ background: transparent;
867
+ color: var(--color-fd-muted-foreground);
868
+ }
869
+
870
+ .velu-page-feedback-cancel:hover {
871
+ color: var(--color-fd-foreground);
872
+ border-color: color-mix(in oklab, var(--color-fd-primary) 35%, var(--color-fd-border));
873
+ }
874
+
875
+ .velu-page-feedback-submit {
876
+ border: 1px solid color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
877
+ background: var(--color-fd-foreground);
878
+ color: var(--color-fd-background);
879
+ }
880
+
881
+ .velu-page-feedback-submit:hover {
882
+ filter: brightness(0.96);
883
+ }
884
+
885
+ .velu-page-nav-grid {
886
+ display: grid;
887
+ gap: 0.85rem;
888
+ }
889
+
890
+ .velu-page-nav-grid-one {
891
+ grid-template-columns: 1fr;
892
+ }
893
+
894
+ .velu-page-nav-grid-two {
895
+ grid-template-columns: repeat(2, minmax(0, 1fr));
896
+ }
897
+
898
+ .velu-page-nav-card {
899
+ display: flex;
900
+ flex-direction: column;
901
+ gap: 0.35rem;
902
+ border: 1px solid var(--color-fd-border);
903
+ border-radius: 0.85rem;
904
+ padding: 1rem 1.1rem;
905
+ text-decoration: none;
906
+ color: inherit;
907
+ transition: border-color 0.15s, background-color 0.15s;
908
+ }
909
+
910
+ .velu-page-nav-card:hover {
911
+ border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
912
+ background: color-mix(in oklab, var(--color-fd-primary) 8%, transparent);
913
+ }
914
+
915
+ .velu-page-nav-card-next {
916
+ text-align: right;
917
+ }
918
+
919
+ .velu-page-nav-title {
920
+ margin: 0;
921
+ font-size: 1rem;
922
+ font-weight: 600;
923
+ color: var(--color-fd-foreground);
924
+ line-height: 1.25;
925
+ }
926
+
927
+ .velu-page-nav-meta {
928
+ margin: 0;
929
+ display: inline-flex;
930
+ align-items: center;
931
+ gap: 0.35rem;
932
+ color: var(--color-fd-muted-foreground);
933
+ font-size: 0.95rem;
934
+ line-height: 1.35;
935
+ }
936
+
937
+ .velu-page-nav-meta-next {
938
+ justify-content: flex-end;
939
+ }
940
+
941
+ .velu-page-nav-meta svg {
942
+ width: 0.95rem;
943
+ height: 0.95rem;
944
+ stroke: currentColor;
945
+ fill: none;
946
+ stroke-width: 2;
947
+ stroke-linecap: round;
948
+ stroke-linejoin: round;
949
+ flex-shrink: 0;
950
+ }
951
+
952
+ @media (max-width: 768px) {
953
+ .velu-page-nav-grid-two {
954
+ grid-template-columns: 1fr;
955
+ }
956
+
957
+ .velu-page-nav-card-next {
958
+ text-align: left;
959
+ }
960
+
961
+ .velu-page-nav-meta-next {
962
+ justify-content: flex-start;
963
+ }
964
+ }
965
+
966
+ .velu-footer-powered a {
967
+ color: var(--color-fd-primary);
968
+ font-weight: 600;
969
+ text-decoration: none;
970
+ }
971
+
972
+ .velu-footer-powered a:hover {
973
+ text-decoration: underline;
974
+ }
975
+
976
+ @media (max-width: 768px) {
977
+ .velu-footer-powered {
978
+ margin-left: 0;
979
+ }
980
+ }
981
+
982
+ [data-card].velu-card-horizontal {
983
+ display: grid !important;
984
+ grid-template-columns: 2.25rem minmax(0, 1fr);
985
+ column-gap: 0.75rem;
986
+ align-items: center !important;
987
+ }
988
+
989
+ [data-card].velu-card-horizontal > div.not-prose {
990
+ grid-row: 1 / span 3;
991
+ margin-bottom: 0;
992
+ margin-top: 0;
993
+ align-self: center;
994
+ justify-self: start;
995
+ }
996
+
997
+ [data-card].velu-card-horizontal > h3 {
998
+ margin-bottom: 0.25rem;
999
+ }
1000
+
1001
+ .velu-card-group {
1002
+ display: grid !important;
1003
+ grid-template-columns: repeat(var(--velu-card-cols, 2), minmax(0, 1fr));
1004
+ gap: 0.75rem !important;
1005
+ }
1006
+
1007
+ .velu-card-group > [data-card] {
1008
+ margin: 0 !important;
1009
+ }
1010
+
1011
+ .velu-card-image {
1012
+ width: 100%;
1013
+ border-radius: 0.55rem;
1014
+ margin-bottom: 0.65rem;
1015
+ border: 1px solid var(--color-fd-border);
1016
+ }
1017
+
1018
+ [data-card].velu-card {
1019
+ display: flex;
1020
+ flex-direction: column;
1021
+ border: 1px solid var(--color-fd-border);
1022
+ background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card));
1023
+ }
1024
+
1025
+ /* Only stretch cards to fill their cell when inside a card group grid */
1026
+ .velu-card-group > [data-card].velu-card,
1027
+ .velu-card-deck > [data-card].velu-card {
1028
+ height: 100%;
1029
+ }
1030
+
1031
+ [data-card].velu-card,
1032
+ .velu-card-group > [data-card] {
1033
+ transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
1034
+ }
1035
+
1036
+ [data-card].velu-card:hover,
1037
+ .velu-card-group > [data-card]:hover {
1038
+ /* Keep card surface stable on hover and emphasize border instead. */
1039
+ background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card)) !important;
1040
+ border-color: color-mix(in oklab, var(--color-fd-primary) 72%, var(--color-fd-border));
1041
+ box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-fd-primary) 28%, transparent);
1042
+ }
1043
+
1044
+ /* Mintlify-like icon chip styling inside cards. */
1045
+ [data-card].velu-card > div.not-prose {
1046
+ background: transparent !important;
1047
+ border: 0 !important;
1048
+ color: var(--color-fd-primary) !important;
1049
+ box-shadow: none !important;
1050
+ width: 2.25rem;
1051
+ height: 2.25rem;
1052
+ padding: 0 !important;
1053
+ border-radius: 0.7rem !important;
1054
+ display: inline-flex;
1055
+ align-items: center;
1056
+ justify-content: center;
1057
+ margin-bottom: 0.55rem;
1058
+ }
1059
+
1060
+ [data-card].velu-card > div.not-prose svg,
1061
+ [data-card].velu-card > div.not-prose img {
1062
+ width: 1.6rem;
1063
+ height: 1.6rem;
1064
+ }
1065
+
1066
+ [data-card].velu-card > h3 {
1067
+ margin-top: 0.04rem;
1068
+ }
1069
+
1070
+ [data-card].velu-card + [data-card].velu-card {
1071
+ margin-top: 0.75rem !important;
1072
+ }
1073
+
1074
+ .velu-card-group > [data-card].velu-card + [data-card].velu-card {
1075
+ margin-top: 0 !important;
1076
+ }
1077
+
1078
+ [data-card].velu-card > div:last-child {
1079
+ display: flex;
1080
+ flex-direction: column;
1081
+ flex: 1;
1082
+ }
1083
+
1084
+ .velu-card-cta {
1085
+ display: inline-flex;
1086
+ align-items: center;
1087
+ gap: 0.3rem;
1088
+ margin-top: auto;
1089
+ padding-top: 0.55rem;
1090
+ font-size: 0.82rem;
1091
+ font-weight: 600;
1092
+ color: var(--color-fd-primary);
1093
+ }
1094
+
1095
+ .velu-card-cta-arrow {
1096
+ width: 0.95rem;
1097
+ height: 0.95rem;
1098
+ }
1099
+
1100
+ .velu-card-color-blue {
1101
+ border-color: rgba(37, 99, 235, 0.3);
1102
+ }
1103
+
1104
+ .velu-card-color-green {
1105
+ border-color: rgba(22, 163, 74, 0.3);
1106
+ }
1107
+
1108
+ .velu-card-color-yellow {
1109
+ border-color: rgba(245, 158, 11, 0.35);
1110
+ }
1111
+
1112
+ .velu-card-color-red {
1113
+ border-color: rgba(220, 38, 38, 0.3);
1114
+ }
1115
+
1116
+ .velu-card-color-purple {
1117
+ border-color: rgba(147, 51, 234, 0.3);
1118
+ }
1119
+
1120
+ .velu-card-color-orange {
1121
+ border-color: rgba(234, 88, 12, 0.3);
1122
+ }
1123
+
1124
+ .velu-card-color-gray {
1125
+ border-color: rgba(148, 163, 184, 0.35);
1126
+ }
1127
+
1128
+ .velu-accordions,
1129
+ .velu-code-group,
1130
+ .velu-properties,
1131
+ .velu-param-field,
1132
+ .velu-response-field {
1133
+ display: grid;
1134
+ gap: 0.75rem;
1135
+ }
1136
+
1137
+ .velu-step-title {
1138
+ margin: 0 0 0.35rem;
1139
+ font-weight: 600;
1140
+ }
1141
+
1142
+ .velu-tabs-border-bottom {
1143
+ border-bottom: 1px solid var(--color-fd-border);
1144
+ padding-bottom: 0.75rem;
1145
+ margin-bottom: 0.75rem;
1146
+ }
1147
+
1148
+ .velu-tabs-plain [role='tablist'] {
1149
+ gap: 1rem;
1150
+ margin-bottom: 0.45rem;
1151
+ }
1152
+
1153
+ .velu-code-group-dropdown {
1154
+ border: 1px solid var(--color-fd-border);
1155
+ border-radius: 0.85rem;
1156
+ overflow: visible;
1157
+ gap: 0;
1158
+ }
1159
+
1160
+ .velu-code-group-tabs {
1161
+ border: 1px solid var(--color-fd-border);
1162
+ border-radius: 0.85rem;
1163
+ overflow: hidden;
1164
+ gap: 0;
1165
+ }
1166
+
1167
+ .velu-code-group-tabs-head {
1168
+ display: flex;
1169
+ flex-wrap: wrap;
1170
+ align-items: flex-end;
1171
+ gap: 0.12rem;
1172
+ min-height: 1.9rem;
1173
+ padding: 0 0.45rem 0;
1174
+ border-bottom: 1px solid var(--color-fd-border);
1175
+ background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
1176
+ }
1177
+
1178
+ .velu-code-group-tab-btn {
1179
+ display: inline-flex;
1180
+ align-items: center;
1181
+ align-self: flex-end;
1182
+ gap: 0.28rem;
1183
+ border: 0;
1184
+ border-bottom: 2px solid transparent;
1185
+ border-radius: 0.35rem 0.35rem 0 0;
1186
+ padding: 0 0.28rem 0.06rem;
1187
+ background: transparent;
1188
+ color: var(--color-fd-muted-foreground);
1189
+ font-size: 0.82rem;
1190
+ font-weight: 600;
1191
+ line-height: 1;
1192
+ cursor: pointer;
1193
+ min-height: 0;
1194
+ }
1195
+
1196
+ .velu-code-group-tab-btn > span:last-child,
1197
+ .velu-code-group-file > span:last-child,
1198
+ .velu-code-group-select-btn > span:nth-child(2),
1199
+ .velu-code-group-select-item > span:nth-child(2) {
1200
+ padding-top: 0.08rem;
1201
+ padding-bottom: 0.16rem;
1202
+ }
1203
+
1204
+ .velu-code-group-tab-btn.is-active {
1205
+ color: var(--color-fd-primary);
1206
+ border-bottom-color: var(--color-fd-primary);
1207
+ }
1208
+
1209
+ .velu-code-group-dropdown-head {
1210
+ display: flex;
1211
+ align-items: center;
1212
+ justify-content: space-between;
1213
+ gap: 0.75rem;
1214
+ padding: 0.7rem 0.9rem;
1215
+ border-bottom: 1px solid var(--color-fd-border);
1216
+ background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
1217
+ }
1218
+
1219
+ .velu-code-group-file {
1220
+ display: inline-flex;
1221
+ align-items: center;
1222
+ gap: 0.45rem;
1223
+ font-size: 0.95rem;
1224
+ font-weight: 600;
1225
+ color: var(--color-fd-foreground);
1226
+ }
1227
+
1228
+ .velu-code-group-select-wrap {
1229
+ position: relative;
1230
+ min-width: 10rem;
1231
+ }
1232
+
1233
+ .velu-code-group-select-btn {
1234
+ width: 100%;
1235
+ display: inline-flex;
1236
+ align-items: center;
1237
+ justify-content: space-between;
1238
+ gap: 0.45rem;
1239
+ border: 1px solid var(--color-fd-border);
1240
+ border-radius: 0.65rem;
1241
+ padding: 0.35rem 0.55rem;
1242
+ background: var(--color-fd-background);
1243
+ color: var(--color-fd-foreground);
1244
+ font-size: 0.9rem;
1245
+ cursor: pointer;
1246
+ }
1247
+
1248
+ .velu-code-group-caret {
1249
+ opacity: 0.7;
1250
+ font-size: 0.9rem;
1251
+ }
1252
+
1253
+ .velu-code-group-select-menu {
1254
+ position: absolute;
1255
+ top: calc(100% + 0.35rem);
1256
+ right: 0;
1257
+ min-width: 12rem;
1258
+ border: 1px solid var(--color-fd-border);
1259
+ border-radius: 0.75rem;
1260
+ background: var(--color-fd-popover);
1261
+ padding: 0.3rem;
1262
+ z-index: 20;
1263
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
1264
+ }
1265
+
1266
+ .velu-code-group-select-item {
1267
+ width: 100%;
1268
+ display: inline-flex;
1269
+ align-items: center;
1270
+ gap: 0.5rem;
1271
+ border: 0;
1272
+ border-radius: 0.55rem;
1273
+ padding: 0.45rem 0.5rem;
1274
+ background: transparent;
1275
+ color: var(--color-fd-foreground);
1276
+ text-align: left;
1277
+ cursor: pointer;
1278
+ }
1279
+
1280
+ .velu-code-group-select-item:hover {
1281
+ background: var(--color-fd-accent);
1282
+ }
1283
+
1284
+ .velu-code-group-select-item.is-active {
1285
+ color: var(--color-fd-primary);
1286
+ }
1287
+
1288
+ .velu-code-group-check {
1289
+ margin-left: auto;
1290
+ color: var(--color-fd-primary);
1291
+ }
1292
+
1293
+ .velu-code-group-dropdown-body {
1294
+ padding: 0;
1295
+ overflow: hidden;
1296
+ border-bottom-left-radius: 0.85rem;
1297
+ border-bottom-right-radius: 0.85rem;
1298
+ }
1299
+
1300
+ .velu-code-group-dropdown-body > * {
1301
+ margin-top: 0 !important;
1302
+ margin-bottom: 0 !important;
1303
+ border-top-left-radius: 0;
1304
+ border-top-right-radius: 0;
1305
+ border-bottom-left-radius: 0.85rem;
1306
+ border-bottom-right-radius: 0.85rem;
1307
+ }
1308
+
1309
+ .velu-lang-icon {
1310
+ display: inline-flex;
1311
+ align-items: center;
1312
+ justify-content: center;
1313
+ width: 1.15rem;
1314
+ height: 1.15rem;
1315
+ border-radius: 0.28rem;
1316
+ font-size: 0.58rem;
1317
+ font-weight: 700;
1318
+ line-height: 1;
1319
+ background: color-mix(in oklab, var(--color-fd-muted-foreground) 22%, transparent);
1320
+ color: var(--color-fd-foreground);
1321
+ }
1322
+
1323
+ .velu-lang-icon-img {
1324
+ width: 0.72rem;
1325
+ height: 0.72rem;
1326
+ display: block;
1327
+ border-radius: 0.16rem;
1328
+ object-fit: contain;
1329
+ flex-shrink: 0;
1330
+ }
1331
+
1332
+ .velu-code-group .velu-lang-icon-img,
1333
+ .velu-code-group-tabs-head .velu-lang-icon-img,
1334
+ .velu-code-group-dropdown-head .velu-lang-icon-img,
1335
+ .velu-code-group-select-item .velu-lang-icon-img {
1336
+ margin: 0 !important;
1337
+ }
1338
+
1339
+ .velu-lang-javascript {
1340
+ background: rgba(16, 185, 129, 0.2);
1341
+ color: #34d399;
1342
+ }
1343
+
1344
+ .velu-lang-typescript {
1345
+ background: rgba(59, 130, 246, 0.2);
1346
+ color: #60a5fa;
1347
+ }
1348
+
1349
+ .velu-lang-python {
1350
+ background: rgba(245, 158, 11, 0.2);
1351
+ color: #fbbf24;
1352
+ }
1353
+
1354
+ .velu-lang-java {
1355
+ background: rgba(239, 68, 68, 0.2);
1356
+ color: #f87171;
1357
+ }
1358
+
1359
+ .velu-accordion,
1360
+ .velu-expandable {
1361
+ border: 1px solid var(--color-fd-border);
1362
+ border-radius: 0.6rem;
1363
+ background: var(--color-fd-card);
1364
+ overflow: hidden;
1365
+ }
1366
+
1367
+ .velu-accordion > summary,
1368
+ .velu-expandable > summary {
1369
+ cursor: pointer;
1370
+ font-weight: 600;
1371
+ padding: 0.7rem 0.85rem;
1372
+ }
1373
+
1374
+ .velu-accordion-content,
1375
+ .velu-expandable-content {
1376
+ padding: 0 0.85rem 0.85rem;
1377
+ }
1378
+
1379
+ .velu-frame {
1380
+ --velu-frame-gap-bg: #e5e7eb;
1381
+ border: 1px solid var(--color-fd-border);
1382
+ border-radius: 0.65rem;
1383
+ overflow: hidden;
1384
+ margin: 1rem 0;
1385
+ }
1386
+
1387
+ :root[data-theme='dark'] .velu-frame,
1388
+ .dark .velu-frame {
1389
+ --velu-frame-gap-bg: #2f2f2f;
1390
+ }
1391
+
1392
+ .velu-frame-content {
1393
+ padding: 0.45rem;
1394
+ background: var(--velu-frame-gap-bg);
1395
+ }
1396
+
1397
+ .velu-frame-content img {
1398
+ display: block;
1399
+ width: 100%;
1400
+ height: auto;
1401
+ margin: 0 !important;
1402
+ border-radius: 0.45rem;
1403
+ }
1404
+
1405
+ .velu-frame-hint {
1406
+ display: flex;
1407
+ align-items: center;
1408
+ gap: 0.5rem;
1409
+ padding: 0;
1410
+ margin: 0 0 0.55rem;
1411
+ border: 0;
1412
+ font-size: 1.05rem;
1413
+ line-height: 1.4;
1414
+ color: var(--color-fd-foreground);
1415
+ background: transparent;
1416
+ }
1417
+
1418
+ .velu-frame-hint-icon {
1419
+ width: 1rem;
1420
+ height: 1rem;
1421
+ flex-shrink: 0;
1422
+ opacity: 0.9;
1423
+ color: color-mix(in oklab, var(--color-fd-foreground) 72%, var(--color-fd-muted-foreground));
1424
+ }
1425
+
1426
+ :root[data-theme='dark'] .velu-frame-hint-icon,
1427
+ .dark .velu-frame-hint-icon {
1428
+ opacity: 1;
1429
+ color: color-mix(in oklab, var(--color-fd-foreground) 92%, var(--color-fd-muted-foreground));
1430
+ }
1431
+
1432
+ .velu-frame figcaption {
1433
+ font-size: 0.85rem;
1434
+ color: color-mix(in oklab, var(--color-fd-foreground) 78%, var(--color-fd-muted-foreground));
1435
+ border-top: 0;
1436
+ padding: 0.55rem 0.8rem;
1437
+ background: var(--velu-frame-gap-bg);
1438
+ text-align: center;
1439
+ margin-top: -0.1rem;
1440
+ }
1441
+
1442
+ .velu-frame figcaption a {
1443
+ color: var(--color-fd-primary);
1444
+ text-decoration: underline;
1445
+ }
1446
+
1447
+ .velu-param,
1448
+ .velu-property {
1449
+ border: 1px solid var(--color-fd-border);
1450
+ border-radius: 0.6rem;
1451
+ padding: 0.7rem 0.85rem;
1452
+ }
1453
+
1454
+ .velu-param-head,
1455
+ .velu-property-head {
1456
+ display: flex;
1457
+ flex-wrap: wrap;
1458
+ gap: 0.4rem;
1459
+ align-items: center;
1460
+ position: relative;
1461
+ }
1462
+
1463
+ .velu-param-head span,
1464
+ .velu-property-head span {
1465
+ font-size: 0.75rem;
1466
+ border: 1px solid var(--color-fd-border);
1467
+ border-radius: 999px;
1468
+ padding: 0.1rem 0.45rem;
1469
+ }
1470
+
1471
+ .velu-param-head strong,
1472
+ .velu-property-head strong {
1473
+ color: var(--color-fd-primary);
1474
+ font-size: 0.75rem;
1475
+ }
1476
+
1477
+ .velu-param-head em,
1478
+ .velu-property-head em {
1479
+ font-size: 0.75rem;
1480
+ color: var(--color-fd-muted-foreground);
1481
+ }
1482
+
1483
+ .velu-param-field-item,
1484
+ .velu-response-field-item {
1485
+ border: 0;
1486
+ border-radius: 0;
1487
+ padding: 0;
1488
+ background: transparent;
1489
+ position: relative;
1490
+ }
1491
+
1492
+ .velu-param-field-item::before,
1493
+ .velu-response-field-item::before {
1494
+ content: '';
1495
+ position: absolute;
1496
+ top: 0;
1497
+ bottom: 0;
1498
+ left: -1.15rem;
1499
+ width: 1.15rem;
1500
+ }
1501
+
1502
+ .velu-param-field-item + .velu-param-field-item,
1503
+ .velu-response-field-item + .velu-response-field-item {
1504
+ border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 18%, transparent);
1505
+ margin-top: 0.75rem;
1506
+ padding-top: 0.75rem;
1507
+ }
1508
+
1509
+ .velu-param-field-item .velu-param-head code,
1510
+ .velu-response-field-item .velu-property-head code {
1511
+ border: 0;
1512
+ background: transparent;
1513
+ padding: 0;
1514
+ color: var(--color-fd-primary);
1515
+ font-weight: 400;
1516
+ font-size: 1.10em;
1517
+ }
1518
+
1519
+ .velu-param-anchor {
1520
+ position: absolute;
1521
+ left: -1rem;
1522
+ top: 50%;
1523
+ transform: translateY(-50%);
1524
+ display: inline-flex;
1525
+ align-items: center;
1526
+ justify-content: center;
1527
+ width: 0.9rem;
1528
+ height: 0.9rem;
1529
+ color: var(--color-fd-muted-foreground);
1530
+ text-decoration: none;
1531
+ opacity: 0;
1532
+ visibility: hidden;
1533
+ transition: opacity 0.15s ease, color 0.15s ease;
1534
+ }
1535
+
1536
+ .velu-param-anchor svg {
1537
+ width: 0.85rem;
1538
+ height: 0.85rem;
1539
+ }
1540
+
1541
+ .velu-param-field-item:hover .velu-param-anchor,
1542
+ .velu-param-field-item:focus-within .velu-param-anchor,
1543
+ .velu-response-field-item:hover .velu-param-anchor,
1544
+ .velu-response-field-item:focus-within .velu-param-anchor,
1545
+ .velu-param-anchor:focus-visible {
1546
+ opacity: 0.9;
1547
+ visibility: visible;
1548
+ }
1549
+
1550
+ .velu-param-anchor:hover {
1551
+ color: var(--color-fd-foreground);
1552
+ }
1553
+
1554
+ .velu-pill {
1555
+ display: inline-flex;
1556
+ align-items: center;
1557
+ border-radius: 999px;
1558
+ padding: 0.1rem 0.45rem;
1559
+ font-size: 0.72rem;
1560
+ font-weight: 600;
1561
+ line-height: 1.2;
1562
+ }
1563
+
1564
+ .velu-pill-required {
1565
+ background: rgba(220, 38, 38, 0.16);
1566
+ color: #ef4444;
1567
+ }
1568
+
1569
+ .velu-pill-deprecated {
1570
+ background: rgba(245, 158, 11, 0.18);
1571
+ color: #f59e0b;
1572
+ }
1573
+
1574
+ .velu-pill-type {
1575
+ background: #e5e7eb;
1576
+ color: #292929;
1577
+ }
1578
+
1579
+ .velu-param-body,
1580
+ .velu-property-body {
1581
+ margin-top: 0.5rem;
1582
+ }
1583
+
1584
+ .velu-param-field-meta {
1585
+ display: flex;
1586
+ gap: 0.35rem;
1587
+ flex-wrap: wrap;
1588
+ }
1589
+
1590
+ .velu-param-field-meta span {
1591
+ text-transform: uppercase;
1592
+ font-size: 0.7rem;
1593
+ color: var(--color-fd-muted-foreground);
1594
+ border: 1px solid var(--color-fd-border);
1595
+ border-radius: 999px;
1596
+ padding: 0.08rem 0.4rem;
1597
+ }
1598
+
1599
+ .velu-endpoint,
1600
+ .velu-openapi,
1601
+ .velu-snippet {
1602
+ border: 1px solid var(--color-fd-border);
1603
+ border-radius: 0.65rem;
1604
+ padding: 0.8rem;
1605
+ margin: 1rem 0;
1606
+ }
1607
+
1608
+ .velu-api-playground {
1609
+ border: 0;
1610
+ border-radius: 0;
1611
+ padding: 0.35rem 0.35rem 0.6rem;
1612
+ }
1613
+
1614
+ .velu-openapi-operation-layout {
1615
+ display: flex;
1616
+ flex-direction: column;
1617
+ gap: 0.95rem;
1618
+ }
1619
+
1620
+ .velu-openapi-section {
1621
+ display: flex;
1622
+ flex-direction: column;
1623
+ gap: 0.55rem;
1624
+ }
1625
+
1626
+ .velu-openapi-field-group {
1627
+ display: flex;
1628
+ flex-direction: column;
1629
+ gap: 0.5rem;
1630
+ }
1631
+
1632
+ .velu-openapi-field-group + .velu-openapi-field-group {
1633
+ margin-top: 0.6rem;
1634
+ }
1635
+
1636
+ .velu-openapi-field-list {
1637
+ display: flex;
1638
+ flex-direction: column;
1639
+ }
1640
+
1641
+ .velu-openapi-parameter-group > h2,
1642
+ .velu-openapi-parameter-group > h3 {
1643
+ margin: 0;
1644
+ }
1645
+
1646
+ .velu-openapi-parameter-group > .velu-openapi-field-list {
1647
+ border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1648
+ padding-top: 0.95rem;
1649
+ }
1650
+
1651
+ .velu-openapi-field-list > div + div {
1652
+ border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 18%, transparent);
1653
+ margin-top: 0.75rem;
1654
+ padding-top: 0.75rem;
1655
+ }
1656
+
1657
+ .velu-openapi-complex-field + .velu-openapi-complex-field {
1658
+ margin-top: 0.75rem;
1659
+ }
1660
+
1661
+ .velu-openapi-child-attrs {
1662
+ margin-top: 0.55rem;
1663
+ border: 1px solid color-mix(in oklab, var(--color-fd-foreground) 16%, transparent);
1664
+ border-radius: 0.72rem;
1665
+ overflow: hidden;
1666
+ }
1667
+
1668
+ .velu-openapi-child-attrs-summary {
1669
+ list-style: none;
1670
+ cursor: pointer;
1671
+ padding: 0.55rem 0.7rem;
1672
+ font-size: 0.83rem;
1673
+ font-weight: 500;
1674
+ color: var(--color-fd-muted-foreground);
1675
+ border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1676
+ user-select: none;
1677
+ }
1678
+
1679
+ .velu-openapi-child-attrs-summary::-webkit-details-marker {
1680
+ display: none;
1681
+ }
1682
+
1683
+ .velu-openapi-child-attrs-summary::before {
1684
+ content: '\203A';
1685
+ display: inline-block;
1686
+ margin-right: 0.35rem;
1687
+ transform: rotate(90deg);
1688
+ transition: transform 0.15s ease;
1689
+ }
1690
+
1691
+ .velu-openapi-child-attrs:not([open]) .velu-openapi-child-attrs-summary {
1692
+ border-bottom: 0;
1693
+ }
1694
+
1695
+ .velu-openapi-child-attrs:not([open]) .velu-openapi-child-attrs-summary::before {
1696
+ transform: rotate(0deg);
1697
+ }
1698
+
1699
+ .velu-openapi-child-attrs > .velu-openapi-field-list,
1700
+ .velu-openapi-child-variants {
1701
+ padding: 0.55rem 0.65rem 0.65rem;
1702
+ }
1703
+
1704
+ .velu-openapi-child-variant-list {
1705
+ margin-bottom: 0.55rem;
1706
+ }
1707
+
1708
+ .velu-openapi-child-variant-trigger {
1709
+ border: 0;
1710
+ border-radius: 0;
1711
+ padding: 0.1rem 0.12rem 0.24rem;
1712
+ color: var(--color-fd-muted-foreground);
1713
+ font-size: 0.85rem;
1714
+ font-weight: 600;
1715
+ line-height: 1.15;
1716
+ }
1717
+
1718
+ .velu-openapi-child-variant-trigger[data-state='active'] {
1719
+ color: var(--color-fd-primary);
1720
+ border-bottom: 2px solid var(--color-fd-primary);
1721
+ }
1722
+
1723
+ .velu-openapi-media-label {
1724
+ display: inline-flex;
1725
+ align-items: center;
1726
+ width: fit-content;
1727
+ }
1728
+
1729
+ .velu-openapi-field-description {
1730
+ color: var(--color-fd-muted-foreground);
1731
+ }
1732
+
1733
+ .velu-openapi-response-group {
1734
+ display: flex;
1735
+ flex-direction: column;
1736
+ gap: 0.6rem;
1737
+ border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1738
+ padding-top: 0.75rem;
1739
+ }
1740
+
1741
+ .velu-openapi-response-group:first-of-type {
1742
+ border-top: 0;
1743
+ padding-top: 0.2rem;
1744
+ }
1745
+
1746
+ .velu-openapi-response-head {
1747
+ display: flex;
1748
+ flex-direction: column;
1749
+ gap: 0.35rem;
1750
+ }
1751
+
1752
+ .velu-openapi-response-section {
1753
+ margin-top: 0.25rem;
1754
+ }
1755
+
1756
+ .velu-openapi-response-panel {
1757
+ border: 0;
1758
+ }
1759
+
1760
+ .velu-openapi-response-header {
1761
+ display: flex;
1762
+ align-items: center;
1763
+ justify-content: space-between;
1764
+ gap: 1rem;
1765
+ border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1766
+ padding-bottom: 0.55rem;
1767
+ margin-bottom: 0.65rem;
1768
+ }
1769
+
1770
+ .velu-openapi-response-header h2,
1771
+ .velu-openapi-response-header h3 {
1772
+ margin: 0;
1773
+ }
1774
+
1775
+ .velu-openapi-response-controls {
1776
+ display: inline-flex;
1777
+ align-items: center;
1778
+ gap: 1.15rem;
1779
+ margin-left: auto;
1780
+ }
1781
+
1782
+ .velu-openapi-response-status-list {
1783
+ border: 0;
1784
+ background: transparent;
1785
+ }
1786
+
1787
+ .velu-openapi-response-status-list .velu-openapi-response-status-trigger {
1788
+ border: 0;
1789
+ border-radius: 0;
1790
+ padding: 0.1rem 0.12rem 0.26rem;
1791
+ color: var(--color-fd-muted-foreground);
1792
+ font-size: 0.95rem;
1793
+ font-weight: 600;
1794
+ line-height: 1.15;
1795
+ }
1796
+
1797
+ .velu-openapi-response-status-list .velu-openapi-response-status-trigger[data-state='active'] {
1798
+ color: var(--color-fd-primary);
1799
+ border-bottom: 2px solid var(--color-fd-primary);
1800
+ }
1801
+
1802
+ .velu-openapi-response-status-list .velu-openapi-response-status-trigger + .velu-openapi-response-status-trigger {
1803
+ margin-left: 0.35rem;
1804
+ }
1805
+
1806
+ .velu-openapi-response-content-type {
1807
+ color: var(--color-fd-muted-foreground);
1808
+ font-size: 0.95rem;
1809
+ font-weight: 600;
1810
+ white-space: nowrap;
1811
+ }
1812
+
1813
+ .velu-openapi-response-panel .velu-openapi-response-head {
1814
+ margin-bottom: 0.5rem;
1815
+ }
1816
+
1817
+ .velu-openapi-response-panel .velu-openapi-response-group {
1818
+ border-top: 0;
1819
+ padding-top: 0;
1820
+ }
1821
+
1822
+ .velu-openapi-response-empty {
1823
+ color: var(--color-fd-muted-foreground);
1824
+ font-size: 0.875rem;
1825
+ font-weight: 500;
1826
+ line-height: 1.3;
1827
+ }
1828
+
1829
+ .velu-openapi-response-headers {
1830
+ margin-bottom: 0.85rem;
1831
+ }
1832
+
1833
+ .velu-openapi-response-headers h3 {
1834
+ margin: 0 0 0.5rem;
1835
+ }
1836
+
1837
+ .velu-openapi-response-headers > .velu-openapi-field-list {
1838
+ border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1839
+ padding-top: 0.75rem;
1840
+ }
1841
+
1842
+ .velu-openapi-body-section {
1843
+ gap: 0.65rem;
1844
+ }
1845
+
1846
+ .velu-openapi-body-header {
1847
+ display: flex;
1848
+ align-items: center;
1849
+ justify-content: space-between;
1850
+ gap: 1rem;
1851
+ border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
1852
+ padding-bottom: 0.55rem;
1853
+ margin-bottom: 0.2rem;
1854
+ }
1855
+
1856
+ .velu-openapi-body-header h2,
1857
+ .velu-openapi-body-header h3 {
1858
+ margin: 0;
1859
+ }
1860
+
1861
+ .velu-openapi-body-content-type {
1862
+ color: var(--color-fd-muted-foreground);
1863
+ font-size: 0.95rem;
1864
+ font-weight: 600;
1865
+ white-space: nowrap;
1866
+ }
1867
+
1868
+ .velu-openapi-body-media-list {
1869
+ border: 0;
1870
+ background: transparent;
1871
+ }
1872
+
1873
+ .velu-openapi-body-media-trigger {
1874
+ border: 0;
1875
+ border-radius: 0;
1876
+ padding: 0.1rem 0.12rem 0.26rem;
1877
+ color: var(--color-fd-muted-foreground);
1878
+ font-size: 0.95rem;
1879
+ font-weight: 600;
1880
+ line-height: 1.15;
1881
+ }
1882
+
1883
+ .velu-openapi-body-media-trigger[data-state='active'] {
1884
+ color: var(--color-fd-primary);
1885
+ border-bottom: 2px solid var(--color-fd-primary);
1886
+ }
1887
+
1888
+ .velu-openapi-body-section > .velu-openapi-field-list {
1889
+ border-top: 0;
1890
+ padding-top: 0;
1891
+ }
1892
+
1893
+ .velu-openapi-response-media-switch-header {
1894
+ margin-bottom: 0.55rem;
1895
+ }
1896
+
1897
+ .velu-openapi-response-media-list {
1898
+ border: 0;
1899
+ background: transparent;
1900
+ }
1901
+
1902
+ .velu-openapi-response-media-trigger {
1903
+ border: 0;
1904
+ border-radius: 999px;
1905
+ padding: 0.14rem 0.5rem 0.2rem;
1906
+ font-size: 0.78rem;
1907
+ font-weight: 600;
1908
+ color: var(--color-fd-muted-foreground);
1909
+ }
1910
+
1911
+ .velu-openapi-response-media-trigger[data-state='active'] {
1912
+ color: var(--color-fd-foreground);
1913
+ background: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
1914
+ }
1915
+
1916
+ .velu-openapi-response-examples {
1917
+ margin-bottom: 0.7rem;
1918
+ }
1919
+
1920
+ .velu-openapi-response-example-switch-header {
1921
+ margin-bottom: 0.55rem;
1922
+ }
1923
+
1924
+ .velu-openapi-response-example-list {
1925
+ border: 0;
1926
+ background: transparent;
1927
+ flex-wrap: wrap;
1928
+ }
1929
+
1930
+ .velu-openapi-response-example-trigger {
1931
+ border: 0;
1932
+ border-radius: 999px;
1933
+ padding: 0.14rem 0.5rem 0.2rem;
1934
+ font-size: 0.78rem;
1935
+ font-weight: 600;
1936
+ color: var(--color-fd-muted-foreground);
1937
+ }
1938
+
1939
+ .velu-openapi-response-example-trigger[data-state='active'] {
1940
+ color: var(--color-fd-foreground);
1941
+ background: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
1942
+ }
1943
+
1944
+ .velu-openapi-response-example-code {
1945
+ margin-bottom: 0.65rem;
1946
+ }
1947
+
1948
+ .velu-openapi-response-example-code pre {
1949
+ margin: 0;
1950
+ }
1951
+
1952
+ .velu-openapi-field-depth-1 {
1953
+ padding-left: 0.85rem;
1954
+ }
1955
+
1956
+ .velu-openapi-field-depth-2 {
1957
+ padding-left: 1.5rem;
1958
+ }
1959
+
1960
+ .velu-openapi-field-depth-3,
1961
+ .velu-openapi-field-depth-4 {
1962
+ padding-left: 2rem;
1963
+ }
1964
+
1965
+ .velu-manual-api {
1966
+ border: 1px solid var(--color-fd-border);
1967
+ border-radius: 0.75rem;
1968
+ padding: 0.75rem;
1969
+ margin: 1rem 0;
1970
+ background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card));
1971
+ }
1972
+
1973
+ .velu-manual-api-head {
1974
+ display: flex;
1975
+ align-items: center;
1976
+ gap: 0.55rem;
1977
+ flex-wrap: wrap;
1978
+ }
1979
+
1980
+ .velu-manual-api-method {
1981
+ display: inline-flex;
1982
+ align-items: center;
1983
+ border-radius: 999px;
1984
+ border: 1px solid color-mix(in oklab, var(--color-fd-primary) 40%, transparent);
1985
+ color: var(--color-fd-primary);
1986
+ font-size: 0.75rem;
1987
+ font-weight: 700;
1988
+ padding: 0.12rem 0.5rem;
1989
+ }
1990
+
1991
+ .velu-manual-api-url {
1992
+ font-size: 0.82rem;
1993
+ word-break: break-all;
1994
+ }
1995
+
1996
+ .velu-manual-api-send {
1997
+ margin-left: auto;
1998
+ border: 1px solid color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
1999
+ background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
2000
+ color: var(--color-fd-primary);
2001
+ border-radius: 0.45rem;
2002
+ padding: 0.22rem 0.6rem;
2003
+ font-size: 0.78rem;
2004
+ font-weight: 600;
2005
+ cursor: pointer;
2006
+ }
2007
+
2008
+ .velu-manual-api-send:disabled {
2009
+ opacity: 0.65;
2010
+ cursor: default;
2011
+ }
2012
+
2013
+ .velu-manual-api-auth-grid {
2014
+ display: grid;
2015
+ gap: 0.5rem;
2016
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2017
+ margin-top: 0.7rem;
2018
+ }
2019
+
2020
+ .velu-manual-api-auth {
2021
+ display: grid;
2022
+ gap: 0.28rem;
2023
+ margin-top: 0.7rem;
2024
+ }
2025
+
2026
+ .velu-manual-api-auth > span {
2027
+ font-size: 0.73rem;
2028
+ color: var(--color-fd-muted-foreground);
2029
+ }
2030
+
2031
+ .velu-manual-api-auth > input {
2032
+ border: 1px solid var(--color-fd-border);
2033
+ border-radius: 0.45rem;
2034
+ padding: 0.42rem 0.56rem;
2035
+ font-size: 0.82rem;
2036
+ background: color-mix(in oklab, var(--color-fd-background) 92%, transparent);
2037
+ }
2038
+
2039
+ .velu-manual-api-error {
2040
+ margin: 0.75rem 0 0;
2041
+ color: #e11d48;
2042
+ font-size: 0.8rem;
2043
+ }
2044
+
2045
+ .velu-manual-api-result {
2046
+ margin-top: 0.75rem;
2047
+ border-top: 1px solid var(--color-fd-border);
2048
+ padding-top: 0.6rem;
2049
+ }
2050
+
2051
+ .velu-manual-api-status {
2052
+ font-size: 0.78rem;
2053
+ color: var(--color-fd-muted-foreground);
2054
+ margin-bottom: 0.35rem;
2055
+ }
2056
+
2057
+ .velu-manual-api-result pre {
2058
+ margin: 0;
2059
+ border: 1px solid var(--color-fd-border);
2060
+ border-radius: 0.55rem;
2061
+ padding: 0.7rem;
2062
+ overflow: auto;
2063
+ background: color-mix(in oklab, var(--color-fd-background) 85%, var(--color-fd-card));
2064
+ }
2065
+
2066
+ .velu-manual-api-simple {
2067
+ border-style: dashed;
2068
+ }
2069
+
2070
+ @media (max-width: 768px) {
2071
+ .velu-manual-api-auth-grid {
2072
+ grid-template-columns: 1fr;
2073
+ }
2074
+
2075
+ .velu-manual-api-send {
2076
+ margin-left: 0;
2077
+ }
2078
+ }
2079
+
2080
+ .velu-openapi-warning {
2081
+ border: 1px solid var(--color-fd-border);
2082
+ border-radius: 0.65rem;
2083
+ padding: 0.75rem 0.9rem;
2084
+ color: var(--color-fd-muted-foreground);
2085
+ }
2086
+
2087
+ .velu-openapi-schema-wrapper {
2088
+ margin: 1rem 0;
2089
+ }
2090
+
2091
+ .velu-openapi-schema {
2092
+ border: 1px solid var(--color-fd-border);
2093
+ border-radius: 0.65rem;
2094
+ padding: 0.9rem;
2095
+ }
2096
+
2097
+ .velu-openapi-schema > h2 {
2098
+ margin: 0 0 0.5rem;
2099
+ font-size: 1.05rem;
2100
+ }
2101
+
2102
+ .velu-openapi-schema > p {
2103
+ margin: 0 0 0.6rem;
2104
+ color: var(--color-fd-muted-foreground);
2105
+ }
2106
+
2107
+ .velu-openapi-schema-json {
2108
+ margin: 0;
2109
+ border: 1px solid var(--color-fd-border);
2110
+ border-radius: 0.55rem;
2111
+ padding: 0.7rem;
2112
+ overflow: auto;
2113
+ background: color-mix(in oklab, var(--color-fd-background) 85%, var(--color-fd-card));
2114
+ }
2115
+
2116
+ .velu-api-toc-rail {
2117
+ margin-top: 0.35rem;
2118
+ width: 100%;
2119
+ min-width: 0;
2120
+ overflow: hidden;
2121
+ }
2122
+
2123
+ .velu-api-toc-rail #velu-api-toc-rail-host {
2124
+ width: 100%;
2125
+ min-width: 0;
2126
+ }
2127
+
2128
+ .velu-api-toc-example {
2129
+ border: 0;
2130
+ border-radius: 0;
2131
+ padding: 0;
2132
+ margin: 0;
2133
+ }
2134
+
2135
+ .velu-openapi-example-source {
2136
+ display: none;
2137
+ }
2138
+
2139
+ #velu-api-toc-rail-host .velu-openapi-example-source {
2140
+ display: block;
2141
+ border: 0;
2142
+ margin: 0;
2143
+ padding: 0;
2144
+ width: 100%;
2145
+ max-width: 100%;
2146
+ box-sizing: border-box;
2147
+ }
2148
+
2149
+ #velu-api-toc-rail-host .velu-openapi-example-source > * {
2150
+ width: 100%;
2151
+ max-width: 100%;
2152
+ box-sizing: border-box;
2153
+ }
2154
+
2155
+ #velu-api-toc-rail-host .prose-no-margin,
2156
+ #velu-api-toc-rail-host [role='tablist'],
2157
+ #velu-api-toc-rail-host [role='tabpanel'],
2158
+ #velu-api-toc-rail-host figure {
2159
+ width: 100%;
2160
+ max-width: 100%;
2161
+ box-sizing: border-box;
2162
+ }
2163
+
2164
+ #velu-api-toc-rail-host [role='tabpanel'] > figure {
2165
+ margin: 0 !important;
2166
+ border-radius: 0.65rem !important;
2167
+ border: 0 !important;
2168
+ box-shadow: none !important;
2169
+ background: transparent !important;
2170
+ }
2171
+
2172
+ #velu-api-toc-rail-host .velu-openapi-example-source pre,
2173
+ #velu-api-toc-rail-host .velu-openapi-example-source .shiki,
2174
+ #velu-api-toc-rail-host .velu-openapi-example-source [data-codeblock] {
2175
+ width: 100%;
2176
+ max-width: 100%;
2177
+ overflow-x: auto;
2178
+ }
2179
+
2180
+ #velu-api-toc-rail-host .fd-scroll-container {
2181
+ width: 100% !important;
2182
+ max-width: 100% !important;
2183
+ padding-top: 0 !important;
2184
+ padding-bottom: 0 !important;
2185
+ --padding-right: calc(var(--spacing) * 4) !important;
2186
+ }
2187
+
2188
+ #nd-toc:has(.velu-api-toc-rail) > :not(.velu-api-toc-rail) {
2189
+ display: none !important;
2190
+ }
2191
+
2192
+ .velu-update {
2193
+ display: grid;
2194
+ grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
2195
+ column-gap: 1rem;
2196
+ row-gap: 0.45rem;
2197
+ align-items: start;
2198
+ border: 0;
2199
+ border-radius: 0;
2200
+ background: transparent;
2201
+ padding: 0;
2202
+ margin: 1rem 0 1.5rem;
2203
+ }
2204
+
2205
+ .velu-request-example,
2206
+ .velu-response-example {
2207
+ margin: 0;
2208
+ }
2209
+
2210
+ .velu-request-example:not(.velu-in-toc-example),
2211
+ .velu-response-example:not(.velu-in-toc-example) {
2212
+ margin: 1rem 0;
2213
+ }
2214
+
2215
+ .velu-request-example > *:first-child,
2216
+ .velu-response-example > *:first-child {
2217
+ margin-top: 0 !important;
2218
+ }
2219
+
2220
+ .velu-request-example > *:last-child,
2221
+ .velu-response-example > *:last-child {
2222
+ margin-bottom: 0 !important;
2223
+ }
2224
+
2225
+ .velu-response-example-status {
2226
+ display: inline-flex;
2227
+ align-items: center;
2228
+ border: 1px solid var(--color-fd-border);
2229
+ border-radius: 999px;
2230
+ padding: 0.1rem 0.45rem;
2231
+ font-size: 0.72rem;
2232
+ color: var(--color-fd-muted-foreground);
2233
+ margin-bottom: 0.45rem;
2234
+ }
2235
+
2236
+ .velu-endpoint-head {
2237
+ display: flex;
2238
+ align-items: center;
2239
+ gap: 0.6rem;
2240
+ }
2241
+
2242
+ .velu-endpoint-head span {
2243
+ font-size: 0.75rem;
2244
+ font-weight: 700;
2245
+ color: #fff;
2246
+ background: var(--color-fd-primary);
2247
+ padding: 0.1rem 0.45rem;
2248
+ border-radius: 0.35rem;
2249
+ }
2250
+
2251
+ .velu-endpoint-body {
2252
+ margin-top: 0.55rem;
2253
+ }
2254
+
2255
+ .velu-video iframe {
2256
+ width: 100%;
2257
+ aspect-ratio: 16 / 9;
2258
+ border: 0;
2259
+ border-radius: 0.6rem;
2260
+ margin: 1rem 0;
2261
+ }
2262
+
2263
+ .velu-update-meta {
2264
+ display: flex;
2265
+ flex-direction: column;
2266
+ gap: 0.35rem;
2267
+ padding-left: 1rem;
2268
+ position: sticky;
2269
+ top: calc(var(--fd-nav-height, 0px) + 0.75rem);
2270
+ align-self: start;
2271
+ }
2272
+
2273
+ .velu-update-anchor {
2274
+ position: absolute;
2275
+ left: 0;
2276
+ top: 0.33rem;
2277
+ display: inline-flex;
2278
+ align-items: center;
2279
+ justify-content: center;
2280
+ width: 0.85rem;
2281
+ height: 0.85rem;
2282
+ color: var(--color-fd-muted-foreground);
2283
+ text-decoration: none;
2284
+ opacity: 0.75;
2285
+ visibility: visible;
2286
+ transition: opacity 0.15s ease, color 0.15s ease;
2287
+ }
2288
+
2289
+ .velu-update-anchor svg {
2290
+ width: 0.82rem;
2291
+ height: 0.82rem;
2292
+ }
2293
+
2294
+ .velu-update:hover .velu-update-anchor,
2295
+ .velu-update:focus-within .velu-update-anchor,
2296
+ .velu-update-anchor:focus-visible {
2297
+ opacity: 1;
2298
+ }
2299
+
2300
+ .velu-update-anchor:hover {
2301
+ color: var(--color-fd-foreground);
2302
+ }
2303
+
2304
+ .velu-update-label {
2305
+ display: inline-flex;
2306
+ align-items: center;
2307
+ width: fit-content;
2308
+ border-radius: 999px;
2309
+ padding: 0.2rem 0.6rem;
2310
+ font-size: 0.76rem;
2311
+ font-weight: 600;
2312
+ color: var(--color-fd-primary-foreground, #fff);
2313
+ background: var(--color-fd-primary);
2314
+ text-decoration: none;
2315
+ }
2316
+
2317
+ .velu-update-label:hover {
2318
+ background: color-mix(in oklab, var(--color-fd-primary) 86%, black);
2319
+ color: var(--color-fd-primary-foreground, #fff);
2320
+ }
2321
+
2322
+ .velu-update-description {
2323
+ color: var(--color-fd-muted-foreground);
2324
+ font-size: 0.85rem;
2325
+ }
2326
+
2327
+ .velu-update-tags {
2328
+ display: grid;
2329
+ gap: 0.18rem;
2330
+ }
2331
+
2332
+ .velu-update-tag {
2333
+ display: inline-flex;
2334
+ align-items: center;
2335
+ border: 0;
2336
+ border-radius: 0;
2337
+ font-size: 0.72rem;
2338
+ line-height: 1.3;
2339
+ padding: 0;
2340
+ color: color-mix(in oklab, var(--color-fd-foreground) 82%, var(--color-fd-muted-foreground));
2341
+ }
2342
+
2343
+ .velu-update-content {
2344
+ min-width: 0;
2345
+ }
2346
+
2347
+ .velu-update-content > :first-child {
2348
+ margin-top: 0;
2349
+ }
2350
+
2351
+ .velu-update-content > :last-child {
2352
+ margin-bottom: 0;
2353
+ }
2354
+
2355
+ .velu-update[hidden] {
2356
+ display: none !important;
2357
+ }
2358
+
2359
+ .velu-changelog-filter-block {
2360
+ display: grid;
2361
+ gap: 0.5rem;
2362
+ }
2363
+
2364
+ .velu-changelog-filter-heading {
2365
+ font-size: 1rem;
2366
+ font-weight: 500;
2367
+ color: var(--color-fd-foreground);
2368
+ }
2369
+
2370
+ .velu-changelog-filters {
2371
+ display: flex;
2372
+ flex-wrap: wrap;
2373
+ gap: 0.45rem;
2374
+ margin: 0;
2375
+ }
2376
+
2377
+ .velu-changelog-filter-host {
2378
+ margin-bottom: 0.4rem;
2379
+ }
2380
+
2381
+ #nd-toc.velu-changelog-filters-only > h3,
2382
+ #nd-toc.velu-changelog-filters-only > .relative {
2383
+ display: none !important;
2384
+ }
2385
+
2386
+ .velu-changelog-filter {
2387
+ border: 1px solid transparent;
2388
+ border-radius: 999px;
2389
+ padding: 0.22rem 0.65rem;
2390
+ font-size: 0.74rem;
2391
+ font-weight: 500;
2392
+ line-height: 1.25;
2393
+ color: color-mix(in oklab, var(--color-fd-foreground) 82%, var(--color-fd-muted-foreground));
2394
+ background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
2395
+ cursor: pointer;
2396
+ transition: color 0.15s, border-color 0.15s, background-color 0.15s;
2397
+ }
2398
+
2399
+ .velu-changelog-filter:hover {
2400
+ border-color: color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
2401
+ color: var(--color-fd-foreground);
2402
+ background: color-mix(in oklab, var(--color-fd-muted-foreground) 18%, transparent);
2403
+ }
2404
+
2405
+ .velu-changelog-filter.active {
2406
+ color: var(--color-fd-primary);
2407
+ border-color: color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
2408
+ background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
2409
+ }
2410
+
2411
+ @media (max-width: 768px) {
2412
+ .velu-update {
2413
+ grid-template-columns: 1fr;
2414
+ }
2415
+
2416
+ .velu-update-meta {
2417
+ position: static;
2418
+ top: auto;
2419
+ padding-left: 0;
2420
+ }
2421
+
2422
+ .velu-update-anchor {
2423
+ position: static;
2424
+ width: 1rem;
2425
+ height: 1rem;
2426
+ margin-bottom: -0.15rem;
2427
+ opacity: 1;
2428
+ visibility: visible;
2429
+ }
2430
+
2431
+ .velu-changelog-filters {
2432
+ margin-bottom: 0.45rem;
2433
+ }
2434
+ }
2435
+
2436
+ .velu-view {
2437
+ margin: 1rem 0;
2438
+ }
2439
+
2440
+ .velu-view-toc-host {
2441
+ margin-bottom: 0.75rem;
2442
+ }
2443
+
2444
+ .velu-view-toc-switcher {
2445
+ position: relative;
2446
+ }
2447
+
2448
+ .velu-view-toc-trigger {
2449
+ width: 100%;
2450
+ display: inline-flex;
2451
+ align-items: center;
2452
+ justify-content: space-between;
2453
+ gap: 0.55rem;
2454
+ border: 1px solid var(--color-fd-border);
2455
+ border-radius: 0.9rem;
2456
+ background: var(--color-fd-card);
2457
+ color: var(--color-fd-foreground);
2458
+ font-size: 1.02rem;
2459
+ font-weight: 500;
2460
+ line-height: 1.15;
2461
+ padding: 0.7rem 0.85rem;
2462
+ cursor: pointer;
2463
+ transition: border-color 0.15s, background-color 0.15s, color 0.15s;
2464
+ }
2465
+
2466
+ .velu-view-toc-trigger:hover {
2467
+ border-color: var(--color-fd-primary);
2468
+ }
2469
+
2470
+ .velu-view-toc-trigger > span {
2471
+ flex: 1;
2472
+ text-align: left;
2473
+ }
2474
+
2475
+ .velu-view-toc-chevron {
2476
+ width: 1rem;
2477
+ height: 1rem;
2478
+ transition: transform 0.15s ease;
2479
+ color: var(--color-fd-muted-foreground);
2480
+ }
2481
+
2482
+ .velu-view-toc-chevron.open {
2483
+ transform: rotate(180deg);
2484
+ }
2485
+
2486
+ .velu-view-toc-menu {
2487
+ margin-top: 0.35rem;
2488
+ border: 1px solid var(--color-fd-border);
2489
+ border-radius: 0.9rem;
2490
+ background: var(--color-fd-card);
2491
+ overflow: hidden;
2492
+ }
2493
+
2494
+ .velu-view-toc-option {
2495
+ width: 100%;
2496
+ display: flex;
2497
+ align-items: center;
2498
+ justify-content: space-between;
2499
+ gap: 0.6rem;
2500
+ padding: 0.7rem 0.85rem;
2501
+ border: 0;
2502
+ border-top: 1px solid transparent;
2503
+ background: transparent;
2504
+ color: var(--color-fd-foreground);
2505
+ font-size: 1.02rem;
2506
+ text-align: left;
2507
+ cursor: pointer;
2508
+ }
2509
+
2510
+ .velu-view-toc-option + .velu-view-toc-option {
2511
+ border-top-color: var(--color-fd-border);
2512
+ }
2513
+
2514
+ .velu-view-toc-option:hover {
2515
+ background: var(--color-fd-accent);
2516
+ }
2517
+
2518
+ .velu-view-toc-option-main {
2519
+ display: inline-flex;
2520
+ align-items: center;
2521
+ gap: 0.55rem;
2522
+ }
2523
+
2524
+ .velu-view-check {
2525
+ width: 1rem;
2526
+ height: 1rem;
2527
+ color: #15803d;
2528
+ }
2529
+
2530
+ .velu-view-option {
2531
+ display: inline-flex;
2532
+ align-items: center;
2533
+ gap: 0.35rem;
2534
+ }
2535
+
2536
+ .velu-view-option-icon {
2537
+ width: 0.95rem;
2538
+ height: 0.95rem;
2539
+ flex-shrink: 0;
2540
+ }
2541
+
2542
+ .velu-view-option-icon-img {
2543
+ margin: 0 !important;
2544
+ border-radius: 0.16rem;
2545
+ object-fit: contain;
2546
+ }
2547
+
2548
+ /* Fallback utilities for imported MDX media classes. */
2549
+ #nd-page .w-full {
2550
+ width: 100% !important;
2551
+ }
2552
+
2553
+ #nd-page .h-96 {
2554
+ height: 24rem !important;
2555
+ }
2556
+
2557
+ #nd-page .rounded-lg {
2558
+ border-radius: 0.5rem !important;
2559
+ }
2560
+
2561
+ #nd-page .rounded-xl {
2562
+ border-radius: 0.75rem !important;
2563
+ }
2564
+
2565
+ #nd-page :is(img, iframe, video).aspect-video {
2566
+ width: 100% !important;
2567
+ aspect-ratio: 16 / 9 !important;
2568
+ height: auto !important;
2569
+ display: block;
2570
+ }
2571
+
2572
+ #nd-page iframe {
2573
+ border: 0;
2574
+ }
2575
+
2576
+ #nd-page img.velu-image-zoomable,
2577
+ #nd-page .velu-frame-content img.velu-image-zoomable {
2578
+ cursor: zoom-in !important;
2579
+ }
2580
+
2581
+ #nd-page img.velu-image-zoomable-fallback,
2582
+ #nd-page .velu-frame-content img.velu-image-zoomable-fallback {
2583
+ cursor: zoom-in !important;
2584
+ }
2585
+
2586
+ .velu-image-lightbox {
2587
+ position: fixed;
2588
+ inset: 0;
2589
+ z-index: 120;
2590
+ background: rgba(0, 0, 0, 0.82);
2591
+ padding: 1.5rem;
2592
+ display: flex;
2593
+ align-items: center;
2594
+ justify-content: center;
2595
+ cursor: zoom-out;
2596
+ }
2597
+
2598
+ .velu-image-lightbox-img {
2599
+ display: block;
2600
+ width: auto;
2601
+ height: auto;
2602
+ max-width: min(94vw, 1500px);
2603
+ max-height: 90vh;
2604
+ border-radius: 0.75rem;
2605
+ box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
2606
+ cursor: auto;
2607
+ }
2608
+
2609
+ .velu-image-lightbox-close {
2610
+ position: fixed;
2611
+ top: 1rem;
2612
+ right: 1rem;
2613
+ border: 1px solid rgba(255, 255, 255, 0.28);
2614
+ background: rgba(0, 0, 0, 0.58);
2615
+ color: #fff;
2616
+ width: 2rem;
2617
+ height: 2rem;
2618
+ border-radius: 999px;
2619
+ font-size: 1.45rem;
2620
+ line-height: 1;
2621
+ display: inline-flex;
2622
+ align-items: center;
2623
+ justify-content: center;
2624
+ cursor: pointer;
2625
+ }
2626
+
2627
+ .velu-view-content > :first-child {
2628
+ margin-top: 0;
2629
+ }
2630
+
2631
+ .velu-view-content > :last-child {
2632
+ margin-bottom: 0;
2633
+ }
2634
+
2635
+ .velu-toc-replaced > * {
2636
+ display: none !important;
2637
+ }
2638
+
2639
+ .velu-toc-examples {
2640
+ display: grid;
2641
+ gap: 0.9rem;
2642
+ margin-top: 0.75rem;
2643
+ width: calc(100% - 0.35rem);
2644
+ box-sizing: border-box;
2645
+ }
2646
+
2647
+ #nd-toc .velu-in-toc-example {
2648
+ margin: 0;
2649
+ width: 100%;
2650
+ max-width: 100%;
2651
+ }
2652
+
2653
+ #nd-toc .velu-in-toc-example.velu-panel {
2654
+ border: 1px solid var(--color-fd-border);
2655
+ background: var(--color-fd-card);
2656
+ border-radius: 1rem;
2657
+ padding: 0.45rem;
2658
+ }
2659
+
2660
+ #nd-toc .velu-in-toc-example h4 {
2661
+ margin-bottom: 0.55rem;
2662
+ }
2663
+
2664
+ .velu-toc-replaced {
2665
+ padding-right: 0.5rem !important;
2666
+ overflow: visible !important;
2667
+ }
2668
+
2669
+ .velu-toc-replaced > .velu-toc-examples {
2670
+ display: grid !important;
2671
+ }
2672
+
2673
+ #nd-toc .velu-in-toc-example pre,
2674
+ #nd-toc .velu-in-toc-example [data-codeblock],
2675
+ #nd-toc .velu-in-toc-example .shiki {
2676
+ max-width: 100% !important;
2677
+ overflow-x: auto !important;
2678
+ }
2679
+
2680
+ #nd-toc .velu-in-toc-example [role='tablist'],
2681
+ #nd-toc .velu-in-toc-example [role='tabpanel'],
2682
+ #nd-toc .velu-in-toc-example [data-codeblock] {
2683
+ width: 100% !important;
2684
+ max-width: 100% !important;
2685
+ box-sizing: border-box;
2686
+ }
2687
+
2688
+ #nd-toc .velu-in-toc-example [role='tabpanel'] {
2689
+ padding: 0 !important;
2690
+ }
2691
+
2692
+ #nd-toc .velu-in-toc-example [role='tabpanel'] > figure {
2693
+ width: 100% !important;
2694
+ max-width: 100% !important;
2695
+ margin: 0 !important;
2696
+ box-sizing: border-box;
2697
+ }
2698
+
2699
+ #nd-toc .velu-in-toc-example pre,
2700
+ #nd-toc .velu-in-toc-example .shiki,
2701
+ #nd-toc .velu-in-toc-example .shiki code {
2702
+ display: block !important;
2703
+ width: 100% !important;
2704
+ max-width: 100% !important;
2705
+ min-width: 0 !important;
2706
+ box-sizing: border-box;
2707
+ }
2708
+
2709
+ #nd-toc .velu-in-toc-example .fd-scroll-container {
2710
+ width: 100% !important;
2711
+ max-width: 100% !important;
2712
+ box-sizing: border-box;
2713
+ --padding-right: calc(var(--spacing) * 4) !important;
2714
+ }
2715
+
2716
+ #nd-toc .velu-in-toc-example .fd-scroll-container > pre {
2717
+ width: 100% !important;
2718
+ min-width: 100% !important;
2719
+ }
2720
+
2721
+ @media (max-width: 1023px) {
2722
+ .velu-toc-replaced > * {
2723
+ display: unset !important;
2724
+ }
2725
+
2726
+ .velu-toc-examples {
2727
+ display: none !important;
2728
+ }
2729
+
2730
+ #nd-page.velu-page-with-toc-examples {
2731
+ max-width: 900px !important;
2732
+ }
2733
+ }
2734
+
2735
+
2736
+ @media (min-width: 1024px) {
2737
+ #nd-page.velu-page-with-toc-examples {
2738
+ max-width: 680px !important;
2739
+ }
2740
+ }
2741
+
2742
+ .velu-tooltip-wrap {
2743
+ position: relative;
2744
+ display: inline-flex;
2745
+ align-items: baseline;
2746
+ }
2747
+
2748
+ .velu-tooltip {
2749
+ text-decoration: underline dotted;
2750
+ text-underline-offset: 0.2rem;
2751
+ cursor: help;
2752
+ }
2753
+
2754
+ .velu-tooltip-popover {
2755
+ position: absolute;
2756
+ left: 50%;
2757
+ bottom: calc(100% + 0.25rem);
2758
+ transform: translateX(-50%) translateY(4px);
2759
+ min-width: 14rem;
2760
+ max-width: min(22rem, calc(100vw - 2rem));
2761
+ border: 1px solid var(--color-fd-border);
2762
+ border-radius: 0.65rem;
2763
+ background: var(--color-fd-popover);
2764
+ color: var(--color-fd-foreground);
2765
+ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
2766
+ padding: 0.6rem 0.7rem;
2767
+ display: grid;
2768
+ gap: 0.25rem;
2769
+ opacity: 0;
2770
+ visibility: hidden;
2771
+ pointer-events: none;
2772
+ transition: opacity 0.14s ease, transform 0.14s ease;
2773
+ z-index: 60;
2774
+ }
2775
+
2776
+ /* Keep hover active while moving from trigger text to the tooltip card. */
2777
+ .velu-tooltip-popover::before {
2778
+ content: '';
2779
+ position: absolute;
2780
+ left: 0;
2781
+ right: 0;
2782
+ bottom: -0.5rem;
2783
+ height: 0.5rem;
2784
+ }
2785
+
2786
+ .velu-tooltip-popover::after {
2787
+ content: '';
2788
+ position: absolute;
2789
+ top: 100%;
2790
+ left: 50%;
2791
+ transform: translateX(-50%);
2792
+ border-width: 6px 6px 0 6px;
2793
+ border-style: solid;
2794
+ border-color: var(--color-fd-border) transparent transparent transparent;
2795
+ }
2796
+
2797
+ .velu-tooltip-wrap:hover .velu-tooltip-popover,
2798
+ .velu-tooltip-wrap:focus-within .velu-tooltip-popover {
2799
+ opacity: 1;
2800
+ visibility: visible;
2801
+ pointer-events: auto;
2802
+ transform: translateX(-50%) translateY(0);
2803
+ }
2804
+
2805
+ .velu-tooltip-headline {
2806
+ font-size: 0.8rem;
2807
+ font-weight: 700;
2808
+ line-height: 1.35;
2809
+ }
2810
+
2811
+ .velu-tooltip-text {
2812
+ font-size: 0.78rem;
2813
+ line-height: 1.45;
2814
+ color: var(--color-fd-muted-foreground);
2815
+ }
2816
+
2817
+ .velu-tooltip-cta {
2818
+ font-size: 0.78rem;
2819
+ font-weight: 600;
2820
+ color: var(--color-fd-primary);
2821
+ text-decoration: none;
2822
+ }
2823
+
2824
+ .velu-inline-icon {
2825
+ display: inline-flex;
2826
+ vertical-align: middle;
2827
+ width: 1rem;
2828
+ height: 1rem;
2829
+ }
2830
+
2831
+ .velu-inline-icon svg,
2832
+ .velu-inline-icon img {
2833
+ width: 100%;
2834
+ height: 100%;
2835
+ }
2836
+
2837
+ .velu-mermaid {
2838
+ position: relative;
2839
+ border: 0;
2840
+ border-radius: 0.6rem;
2841
+ padding: 0;
2842
+ background: transparent;
2843
+ overflow: hidden;
2844
+ }
2845
+
2846
+ .velu-mermaid-stage {
2847
+ display: flex;
2848
+ align-items: center;
2849
+ justify-content: center;
2850
+ min-height: 180px;
2851
+ transform-origin: center center;
2852
+ transition: transform 0.18s ease;
2853
+ }
2854
+
2855
+ .velu-mermaid-svg {
2856
+ width: 100%;
2857
+ display: flex;
2858
+ align-items: center;
2859
+ justify-content: center;
2860
+ }
2861
+
2862
+ .velu-mermaid-svg svg {
2863
+ width: auto;
2864
+ max-width: 100%;
2865
+ height: auto;
2866
+ display: block;
2867
+ }
2868
+
2869
+ .velu-mermaid-error {
2870
+ margin: 0;
2871
+ white-space: pre-wrap;
2872
+ font-size: 0.85rem;
2873
+ }
2874
+
2875
+ .velu-mermaid-controls {
2876
+ position: absolute;
2877
+ display: grid;
2878
+ grid-template-columns: repeat(3, 2.25rem);
2879
+ grid-template-rows: repeat(3, 2.25rem);
2880
+ gap: 0.28rem;
2881
+ width: auto;
2882
+ padding: 0.28rem;
2883
+ border: 1px solid var(--color-fd-border);
2884
+ border-radius: 0.65rem;
2885
+ background: color-mix(in oklab, var(--color-fd-card) 96%, transparent);
2886
+ backdrop-filter: blur(4px);
2887
+ }
2888
+
2889
+ .velu-mermaid-controls button {
2890
+ border: 1px solid var(--color-fd-border);
2891
+ background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
2892
+ color: var(--color-fd-foreground);
2893
+ border-radius: 0.5rem;
2894
+ font-size: 1rem;
2895
+ line-height: 1;
2896
+ padding: 0;
2897
+ cursor: pointer;
2898
+ display: inline-flex;
2899
+ align-items: center;
2900
+ justify-content: center;
2901
+ }
2902
+
2903
+ .velu-mermaid-controls button:hover {
2904
+ border-color: var(--color-fd-primary);
2905
+ color: var(--color-fd-primary);
2906
+ }
2907
+
2908
+ .velu-mermaid-btn-up { grid-column: 2; grid-row: 1; }
2909
+ .velu-mermaid-btn-zoom-in { grid-column: 3; grid-row: 1; }
2910
+ .velu-mermaid-btn-left { grid-column: 1; grid-row: 2; }
2911
+ .velu-mermaid-btn-reset { grid-column: 2; grid-row: 2; }
2912
+ .velu-mermaid-btn-right { grid-column: 3; grid-row: 2; }
2913
+ .velu-mermaid-btn-down { grid-column: 2; grid-row: 3; }
2914
+ .velu-mermaid-btn-zoom-out { grid-column: 3; grid-row: 3; }
2915
+
2916
+ .velu-mermaid-controls-top-left { top: 0.55rem; left: 0.55rem; }
2917
+ .velu-mermaid-controls-top-right { top: 0.55rem; right: 0.55rem; }
2918
+ .velu-mermaid-controls-bottom-left { bottom: 0.55rem; left: 0.55rem; }
2919
+ .velu-mermaid-controls-bottom-right { bottom: 0.55rem; right: 0.55rem; }
2920
+
2921
+ @media (max-width: 768px) {
2922
+ .velu-mermaid-controls {
2923
+ grid-template-columns: repeat(3, 2rem);
2924
+ grid-template-rows: repeat(3, 2rem);
2925
+ }
2926
+ }
2927
+
2928
+ .velu-callout {
2929
+ border-width: 1px;
2930
+ box-shadow: none;
2931
+ }
2932
+
2933
+ .velu-callout > div:last-child > div {
2934
+ color: inherit;
2935
+ }
2936
+
2937
+ .velu-callout-info {
2938
+ background: rgba(37, 99, 235, 0.1);
2939
+ border-color: rgba(37, 99, 235, 0.26);
2940
+ color: #1e40af;
2941
+ }
2942
+
2943
+ :root[data-theme='dark'] .velu-callout-info,
2944
+ .dark .velu-callout-info {
2945
+ background: rgba(37, 99, 235, 0.14);
2946
+ border-color: rgba(37, 99, 235, 0.32);
2947
+ color: #bfdbfe;
2948
+ }
2949
+
2950
+ .velu-callout-warning {
2951
+ background: rgba(245, 158, 11, 0.16);
2952
+ border-color: rgba(245, 158, 11, 0.34);
2953
+ color: #92400e;
2954
+ }
2955
+
2956
+ .velu-callout-success {
2957
+ background: rgba(22, 163, 74, 0.14);
2958
+ border-color: rgba(22, 163, 74, 0.34);
2959
+ color: #166534;
2960
+ }
2961
+
2962
+ .velu-callout-error {
2963
+ background: rgba(220, 38, 38, 0.16);
2964
+ border-color: rgba(220, 38, 38, 0.34);
2965
+ color: #991b1b;
2966
+ }
2967
+
2968
+ .velu-callout-idea {
2969
+ background: rgba(147, 51, 234, 0.14);
2970
+ border-color: rgba(147, 51, 234, 0.32);
2971
+ color: #6b21a8;
2972
+ }
2973
+
2974
+ :root[data-theme='dark'] .velu-callout-warning,
2975
+ .dark .velu-callout-warning {
2976
+ color: #fde68a;
2977
+ }
2978
+
2979
+ :root[data-theme='dark'] .velu-callout-success,
2980
+ .dark .velu-callout-success {
2981
+ color: #bbf7d0;
2982
+ }
2983
+
2984
+ :root[data-theme='dark'] .velu-callout-error,
2985
+ .dark .velu-callout-error {
2986
+ color: #fecaca;
2987
+ }
2988
+
2989
+ :root[data-theme='dark'] .velu-callout-idea,
2990
+ .dark .velu-callout-idea {
2991
+ color: #e9d5ff;
2992
+ }
2993
+
2994
+ .velu-badge {
2995
+ display: inline-flex;
2996
+ align-items: center;
2997
+ gap: 0.3rem;
2998
+ border: 1px solid transparent;
2999
+ border-radius: 0.35rem;
3000
+ padding: 0.15rem 0.5rem;
3001
+ font-size: 0.75rem;
3002
+ font-weight: 600;
3003
+ }
3004
+
3005
+ .velu-badge-icon {
3006
+ display: inline-flex;
3007
+ width: 0.85rem;
3008
+ height: 0.85rem;
3009
+ }
3010
+
3011
+ .velu-badge-icon svg,
3012
+ .velu-badge-icon img {
3013
+ width: 0.85rem;
3014
+ height: 0.85rem;
3015
+ }
3016
+
3017
+ .velu-badge-size-sm {
3018
+ font-size: 0.7rem;
3019
+ padding: 0.1rem 0.4rem;
3020
+ }
3021
+
3022
+ .velu-badge-size-xs {
3023
+ font-size: 0.66rem;
3024
+ padding: 0.06rem 0.32rem;
3025
+ }
3026
+
3027
+ .velu-badge-size-md {
3028
+ font-size: 0.75rem;
3029
+ padding: 0.15rem 0.5rem;
3030
+ }
3031
+
3032
+ .velu-badge-size-lg {
3033
+ font-size: 0.82rem;
3034
+ padding: 0.2rem 0.6rem;
3035
+ }
3036
+
3037
+ .velu-badge-shape-rounded {
3038
+ border-radius: 0.35rem;
3039
+ }
3040
+
3041
+ .velu-badge-shape-pill {
3042
+ border-radius: 999px;
3043
+ }
3044
+
3045
+ .velu-badge-shape-square {
3046
+ border-radius: 0.4rem;
3047
+ }
3048
+
3049
+ .velu-badge-color-gray {
3050
+ background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
3051
+ color: var(--color-fd-foreground);
3052
+ }
3053
+
3054
+ .velu-badge-color-blue {
3055
+ background: rgba(37, 99, 235, 0.14);
3056
+ color: #1d4ed8;
3057
+ }
3058
+
3059
+ .velu-badge-color-green {
3060
+ background: rgba(22, 163, 74, 0.16);
3061
+ color: #15803d;
3062
+ }
3063
+
3064
+ .velu-badge-color-yellow {
3065
+ background: rgba(245, 158, 11, 0.2);
3066
+ color: #a16207;
3067
+ }
3068
+
3069
+ .velu-badge-color-red {
3070
+ background: rgba(220, 38, 38, 0.16);
3071
+ color: #b91c1c;
3072
+ }
3073
+
3074
+ .velu-badge-color-purple {
3075
+ background: rgba(147, 51, 234, 0.16);
3076
+ color: #7e22ce;
3077
+ }
3078
+
3079
+ .velu-badge-color-white {
3080
+ background: #fff;
3081
+ color: #111827;
3082
+ border-color: rgba(17, 24, 39, 0.16);
3083
+ }
3084
+
3085
+ .velu-badge-color-surface {
3086
+ background: var(--color-fd-card);
3087
+ color: var(--color-fd-foreground);
3088
+ border-color: var(--color-fd-border);
3089
+ }
3090
+
3091
+ .velu-badge-color-white-destructive {
3092
+ background: #fff;
3093
+ color: #b91c1c;
3094
+ border-color: rgba(185, 28, 28, 0.26);
3095
+ }
3096
+
3097
+ .velu-badge-color-surface-destructive {
3098
+ background: rgba(220, 38, 38, 0.1);
3099
+ color: #b91c1c;
3100
+ border-color: rgba(220, 38, 38, 0.25);
3101
+ }
3102
+
3103
+ .velu-badge-color-orange {
3104
+ background: rgba(234, 88, 12, 0.16);
3105
+ color: #c2410c;
3106
+ }
3107
+
3108
+ .velu-badge-stroke {
3109
+ background: transparent;
3110
+ border-color: currentColor;
3111
+ }
3112
+
3113
+ .velu-badge-disabled {
3114
+ opacity: 0.5;
3115
+ }
3116
+
3117
+ .velu-banner {
3118
+ display: flex;
3119
+ align-items: center;
3120
+ gap: 0.45rem;
3121
+ border: 1px solid var(--color-fd-border);
3122
+ background: var(--color-fd-accent);
3123
+ border-radius: 0.6rem;
3124
+ padding: 0.75rem 0.9rem;
3125
+ margin: 1rem 0;
3126
+ color: var(--color-fd-foreground);
3127
+ text-decoration: none;
3128
+ line-height: 1.35;
3129
+ }
3130
+
3131
+ .velu-banner:hover {
3132
+ border-color: var(--color-fd-primary);
3133
+ }
3134
+
3135
+ .velu-banner-icon {
3136
+ width: 1rem;
3137
+ height: 1rem;
3138
+ display: inline-flex;
3139
+ flex-shrink: 0;
3140
+ }
3141
+
3142
+ .velu-banner-icon svg,
3143
+ .velu-banner-icon img {
3144
+ width: 1rem;
3145
+ height: 1rem;
3146
+ }
3147
+
3148
+ .velu-banner-content {
3149
+ min-width: 0;
3150
+ }
3151
+
3152
+ .velu-banner-content > p {
3153
+ margin: 0;
3154
+ }
3155
+
3156
+ .velu-banner-content > :first-child {
3157
+ margin-top: 0;
3158
+ }
3159
+
3160
+ .velu-banner-content > :last-child {
3161
+ margin-bottom: 0;
3162
+ }
3163
+
3164
+ .velu-banner-info {
3165
+ background: rgba(37, 99, 235, 0.1);
3166
+ border-color: rgba(37, 99, 235, 0.25);
3167
+ }
3168
+
3169
+ .velu-banner-success {
3170
+ background: rgba(22, 163, 74, 0.12);
3171
+ border-color: rgba(22, 163, 74, 0.28);
3172
+ }
3173
+
3174
+ .velu-banner-warning {
3175
+ background: rgba(245, 158, 11, 0.15);
3176
+ border-color: rgba(245, 158, 11, 0.3);
3177
+ }
3178
+
3179
+ .velu-color {
3180
+ display: inline-flex;
3181
+ align-items: center;
3182
+ gap: 0.45rem;
3183
+ border: 1px solid var(--color-fd-border);
3184
+ border-radius: 0.5rem;
3185
+ padding: 0.35rem 0.5rem;
3186
+ }
3187
+
3188
+ .velu-color-swatch {
3189
+ background: var(--velu-color-light, transparent);
3190
+ width: 1rem;
3191
+ height: 1rem;
3192
+ border-radius: 0.2rem;
3193
+ border: 1px solid rgba(0, 0, 0, 0.1);
3194
+ }
3195
+
3196
+ :root[data-theme='dark'] .velu-color-swatch {
3197
+ background: var(--velu-color-dark, var(--velu-color-light, transparent));
3198
+ }
3199
+
3200
+ .dark .velu-color-swatch {
3201
+ background: var(--velu-color-dark, var(--velu-color-light, transparent));
3202
+ }
3203
+
3204
+ .velu-color-group {
3205
+ display: grid;
3206
+ gap: 0.65rem;
3207
+ width: 100%;
3208
+ }
3209
+
3210
+ .velu-color-compact {
3211
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
3212
+ gap: 0.75rem;
3213
+ }
3214
+
3215
+ .velu-color-table {
3216
+ grid-template-columns: 1fr;
3217
+ }
3218
+
3219
+ .velu-color-item {
3220
+ position: relative;
3221
+ display: inline-flex;
3222
+ align-items: center;
3223
+ gap: 0.45rem;
3224
+ border: 1px solid var(--color-fd-border);
3225
+ border-radius: 0.5rem;
3226
+ padding: 0.35rem 0.5rem;
3227
+ background: var(--color-fd-card);
3228
+ cursor: pointer;
3229
+ text-align: left;
3230
+ transition: border-color 0.15s, background-color 0.15s;
3231
+ }
3232
+
3233
+ .velu-color-item:hover {
3234
+ border-color: var(--color-fd-primary);
3235
+ }
3236
+
3237
+ .velu-color-item[data-copied='true'] {
3238
+ border-color: color-mix(in oklab, var(--color-fd-primary) 70%, transparent);
3239
+ background: color-mix(in oklab, var(--color-fd-primary) 10%, var(--color-fd-card));
3240
+ }
3241
+
3242
+ .velu-color-compact .velu-color-item {
3243
+ display: grid;
3244
+ grid-template-columns: 1fr;
3245
+ gap: 0.45rem;
3246
+ border: 0;
3247
+ padding: 0;
3248
+ background: transparent;
3249
+ }
3250
+
3251
+ .velu-color-swatch-wrap {
3252
+ position: relative;
3253
+ display: inline-flex;
3254
+ }
3255
+
3256
+ .velu-color-compact .velu-color-swatch {
3257
+ width: 100%;
3258
+ height: auto;
3259
+ aspect-ratio: 1.35 / 1;
3260
+ border-radius: 0.55rem;
3261
+ border: 0;
3262
+ }
3263
+
3264
+ .velu-color-copied-check {
3265
+ position: absolute;
3266
+ top: 0.4rem;
3267
+ right: 0.4rem;
3268
+ width: 1.2rem;
3269
+ height: 1.2rem;
3270
+ display: inline-flex;
3271
+ align-items: center;
3272
+ justify-content: center;
3273
+ border-radius: 999px;
3274
+ background: rgba(3, 7, 18, 0.75);
3275
+ color: #fff;
3276
+ font-size: 0.78rem;
3277
+ font-weight: 700;
3278
+ opacity: 0;
3279
+ transform: scale(0.82);
3280
+ transition: opacity 0.15s ease, transform 0.15s ease;
3281
+ pointer-events: none;
3282
+ }
3283
+
3284
+ .velu-color-copied-check.is-visible {
3285
+ opacity: 1;
3286
+ transform: scale(1);
3287
+ }
3288
+
3289
+ .velu-color-item-text {
3290
+ display: inline-flex;
3291
+ flex-direction: column;
3292
+ gap: 0.1rem;
3293
+ min-width: 0;
3294
+ }
3295
+
3296
+ .velu-color-compact .velu-color-item-text {
3297
+ padding: 0 0.1rem;
3298
+ }
3299
+
3300
+ .velu-color-compact .velu-color-item-text code {
3301
+ background: transparent;
3302
+ border: 0;
3303
+ padding: 0;
3304
+ border-radius: 0;
3305
+ font-family: inherit;
3306
+ font-size: 1.25rem;
3307
+ font-weight: 700;
3308
+ color: var(--color-fd-foreground);
3309
+ }
3310
+
3311
+ .velu-color-item-text > span {
3312
+ font-size: 0.75rem;
3313
+ color: var(--color-fd-muted-foreground);
3314
+ }
3315
+
3316
+ .velu-color-compact .velu-color-item-text > span {
3317
+ font-size: 0.95rem;
3318
+ }
3319
+
3320
+ .velu-color-row {
3321
+ display: grid;
3322
+ gap: 0.45rem;
3323
+ }
3324
+
3325
+ .velu-color-row-title {
3326
+ font-size: 0.8rem;
3327
+ font-weight: 600;
3328
+ color: var(--color-fd-muted-foreground);
3329
+ }
3330
+
3331
+ .velu-color-row-items {
3332
+ display: grid;
3333
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
3334
+ gap: 0.5rem;
3335
+ }
3336
+
3337
+ .velu-color-table .velu-color-row {
3338
+ grid-template-columns: 140px 1fr;
3339
+ align-items: center;
3340
+ gap: 0.9rem;
3341
+ }
3342
+
3343
+ .velu-color-table .velu-color-row-title {
3344
+ font-size: 1.05rem;
3345
+ font-weight: 700;
3346
+ color: var(--color-fd-foreground);
3347
+ }
3348
+
3349
+ .velu-color-table .velu-color-row-items {
3350
+ display: flex;
3351
+ flex-wrap: wrap;
3352
+ gap: 0.7rem;
3353
+ }
3354
+
3355
+ .velu-color-table .velu-color-item {
3356
+ border: 0;
3357
+ padding: 0;
3358
+ background: transparent;
3359
+ }
3360
+
3361
+ .velu-color-table .velu-color-item-text {
3362
+ display: none;
3363
+ }
3364
+
3365
+ .velu-color-table .velu-color-swatch {
3366
+ width: 4.5rem;
3367
+ height: 3rem;
3368
+ border-radius: 0.55rem;
3369
+ border: 0;
3370
+ }
3371
+
3372
+ .velu-color-table .velu-color-copied-check {
3373
+ top: 0.25rem;
3374
+ right: 0.25rem;
3375
+ }
3376
+
3377
+ .velu-columns,
3378
+ .velu-examples {
3379
+ display: grid;
3380
+ grid-template-columns: repeat(var(--velu-columns-count, auto-fit), minmax(220px, 1fr));
3381
+ gap: 0.8rem;
3382
+ margin: 1rem 0;
3383
+ }
3384
+
3385
+ .velu-tiles {
3386
+ display: grid;
3387
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
3388
+ gap: 0.8rem;
3389
+ margin: 1rem 0;
3390
+ }
3391
+
3392
+ .velu-column,
3393
+ .velu-response {
3394
+ border: 1px solid var(--color-fd-border);
3395
+ border-radius: 0.6rem;
3396
+ padding: 0.7rem;
3397
+ }
3398
+
3399
+ .velu-panel {
3400
+ border: 1px solid var(--color-fd-border);
3401
+ background: var(--color-fd-card);
3402
+ border-radius: 1rem;
3403
+ padding: 0.45rem;
3404
+ margin: 1rem 0;
3405
+ }
3406
+
3407
+ .velu-panel h4 {
3408
+ margin: 0 0 0.35rem;
3409
+ }
3410
+
3411
+ .velu-panel .velu-callout,
3412
+ #nd-toc .velu-in-toc-example.velu-panel .velu-callout {
3413
+ margin: 0;
3414
+ }
3415
+
3416
+ .velu-prompt {
3417
+ border: 1px solid var(--color-fd-border);
3418
+ border-radius: 0.8rem;
3419
+ padding: 0.6rem 0.75rem;
3420
+ background: var(--color-fd-card);
3421
+ margin: 1rem 0;
3422
+ }
3423
+
3424
+ .velu-prompt-row {
3425
+ display: flex;
3426
+ align-items: center;
3427
+ justify-content: space-between;
3428
+ gap: 0.6rem;
3429
+ }
3430
+
3431
+ .velu-prompt-left {
3432
+ display: inline-flex;
3433
+ align-items: center;
3434
+ gap: 0.55rem;
3435
+ min-width: 0;
3436
+ }
3437
+
3438
+ .velu-prompt-icon {
3439
+ width: 1rem;
3440
+ height: 1rem;
3441
+ color: var(--color-fd-muted-foreground);
3442
+ flex-shrink: 0;
3443
+ }
3444
+
3445
+ .velu-prompt-desc {
3446
+ color: var(--color-fd-foreground);
3447
+ font-size: 0.95rem;
3448
+ font-weight: 400;
3449
+ line-height: 1.35;
3450
+ min-width: 0;
3451
+ }
3452
+
3453
+ .velu-prompt-actions {
3454
+ display: inline-flex;
3455
+ align-items: center;
3456
+ gap: 0.45rem;
3457
+ flex-shrink: 0;
3458
+ }
3459
+
3460
+ .velu-prompt-copy {
3461
+ border: 0;
3462
+ border-radius: 0.45rem;
3463
+ background: var(--color-fd-primary);
3464
+ color: var(--color-fd-primary-foreground, #fff);
3465
+ font-size: 0.8rem;
3466
+ font-weight: 600;
3467
+ padding: 0 0.55rem;
3468
+ height: 1.72rem;
3469
+ cursor: pointer;
3470
+ white-space: nowrap;
3471
+ line-height: 1.15;
3472
+ }
3473
+
3474
+ .velu-prompt-copy:hover {
3475
+ background: color-mix(in oklab, var(--color-fd-primary) 86%, black);
3476
+ }
3477
+
3478
+ .velu-prompt-open {
3479
+ border: 1px solid var(--color-fd-border);
3480
+ border-radius: 0.45rem;
3481
+ background: var(--color-fd-background);
3482
+ color: var(--color-fd-foreground);
3483
+ font-size: 0.8rem;
3484
+ font-weight: 600;
3485
+ padding: 0 0.5rem;
3486
+ height: 1.72rem;
3487
+ cursor: pointer;
3488
+ white-space: nowrap;
3489
+ line-height: 1.15;
3490
+ display: inline-flex;
3491
+ align-items: center;
3492
+ gap: 0.35rem;
3493
+ }
3494
+
3495
+ .velu-prompt-open:hover {
3496
+ background: var(--color-fd-accent);
3497
+ }
3498
+
3499
+ .velu-prompt-open-icon {
3500
+ width: 0.85rem;
3501
+ height: 0.85rem;
3502
+ flex-shrink: 0;
3503
+ }
3504
+
3505
+ .velu-prompt-open-icon-on-light {
3506
+ filter: brightness(0.55) contrast(1.35);
3507
+ }
3508
+
3509
+ .velu-prompt-open-icon-on-dark {
3510
+ filter: invert(1) brightness(1.08) contrast(1.1);
3511
+ }
3512
+
3513
+ .velu-prompt-open-icon-on-dark {
3514
+ display: none;
3515
+ }
3516
+
3517
+ :root[data-theme='dark'] .velu-prompt-open-icon-on-light,
3518
+ .dark .velu-prompt-open-icon-on-light {
3519
+ display: none;
3520
+ }
3521
+
3522
+ :root[data-theme='dark'] .velu-prompt-open-icon-on-dark,
3523
+ .dark .velu-prompt-open-icon-on-dark {
3524
+ display: inline-block;
3525
+ }
3526
+
3527
+ .velu-tile {
3528
+ display: flex;
3529
+ flex-direction: column;
3530
+ gap: 0.75rem;
3531
+ border: 0;
3532
+ border-radius: 0.75rem;
3533
+ padding: 0.85rem;
3534
+ text-decoration: none;
3535
+ color: inherit;
3536
+ }
3537
+
3538
+ .velu-tile:hover {
3539
+ background: var(--color-fd-accent);
3540
+ }
3541
+
3542
+ .velu-tile-preview {
3543
+ display: flex;
3544
+ align-items: center;
3545
+ justify-content: center;
3546
+ min-height: 170px;
3547
+ border: 0;
3548
+ border-radius: 0.9rem;
3549
+ overflow: hidden;
3550
+ background: color-mix(in oklab, var(--color-fd-card) 92%, transparent);
3551
+ padding: 1rem;
3552
+ }
3553
+
3554
+ .velu-tile-preview img {
3555
+ display: block;
3556
+ width: auto;
3557
+ height: auto;
3558
+ max-width: min(100%, 320px);
3559
+ max-height: 230px;
3560
+ margin: 0 !important;
3561
+ }
3562
+
3563
+ /* Fallback for MDX utility classes that may not be generated in this app build. */
3564
+ .velu-tile-preview .hidden {
3565
+ display: none;
3566
+ }
3567
+
3568
+ .velu-tile-preview .block {
3569
+ display: block;
3570
+ }
3571
+
3572
+ :root[data-theme='dark'] .velu-tile-preview .dark\:hidden,
3573
+ .dark .velu-tile-preview .dark\:hidden {
3574
+ display: none !important;
3575
+ }
3576
+
3577
+ :root[data-theme='dark'] .velu-tile-preview .dark\:block,
3578
+ .dark .velu-tile-preview .dark\:block {
3579
+ display: block !important;
3580
+ }
3581
+
3582
+ .velu-tile-body {
3583
+ display: flex;
3584
+ flex-direction: column;
3585
+ gap: 0.15rem;
3586
+ text-align: center;
3587
+ align-items: center;
3588
+ }
3589
+
3590
+ .velu-tile-title {
3591
+ font-weight: 600;
3592
+ line-height: 1.35;
3593
+ }
3594
+
3595
+ .velu-tile-description {
3596
+ font-size: 0.9rem;
3597
+ color: var(--color-fd-muted-foreground);
3598
+ line-height: 1.4;
3599
+ }
3600
+
3601
+ .velu-tree,
3602
+ .velu-files {
3603
+ margin: 1rem 0;
3604
+ }
3605
+
3606
+ .velu-tree .velu-tree-file,
3607
+ .velu-files .velu-tree-file {
3608
+ font-family: var(--font-fd-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
3609
+ }
3610
+
3611
+ .velu-tree-folder-static .velu-tree-folder-label {
3612
+ display: flex;
3613
+ align-items: center;
3614
+ border-radius: 0.375rem;
3615
+ padding: 0.375rem 0.5rem;
3616
+ font-size: 0.875rem;
3617
+ font-weight: 500;
3618
+ }
3619
+
3620
+ .velu-tree-children {
3621
+ margin-inline-start: 0.5rem;
3622
+ border-inline-start: 1px solid var(--color-fd-border);
3623
+ padding-inline-start: 0.5rem;
3624
+ }
3625
+
3626
+ .velu-tree ul {
3627
+ margin: 0.2rem 0 0.2rem 1rem;
3628
+ }