@farming-labs/svelte-theme 0.2.6 → 0.2.7

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.
package/styles/docs.css CHANGED
@@ -10,16 +10,18 @@
10
10
 
11
11
  /* ─── CSS Reset ──────────────────────────────────────────────────────── */
12
12
 
13
- *,
14
- *::before,
15
- *::after {
13
+ #nd-docs-layout,
14
+ #nd-docs-layout *,
15
+ #nd-docs-layout *::before,
16
+ #nd-docs-layout *::after {
16
17
  box-sizing: border-box;
17
18
  margin: 0;
18
19
  }
19
20
 
20
21
  /* ─── Color Tokens (light by default, matching fumadocs neutral) ──── */
21
22
 
22
- :root {
23
+ body:has(#nd-docs-layout),
24
+ #nd-docs-layout {
23
25
  --color-fd-background: hsl(0, 0%, 96%);
24
26
  --color-fd-foreground: hsl(0, 0%, 3.9%);
25
27
  --color-fd-muted: hsl(0, 0%, 96.1%);
@@ -44,7 +46,11 @@
44
46
  --fd-nav-height: 48px;
45
47
  }
46
48
 
47
- .dark {
49
+ html.dark body:has(#nd-docs-layout),
50
+ body.dark:has(#nd-docs-layout),
51
+ body:has(#nd-docs-layout.dark),
52
+ :is(html.dark, body.dark) #nd-docs-layout,
53
+ #nd-docs-layout.dark {
48
54
  --color-fd-background: hsl(0, 0%, 7.04%);
49
55
  --color-fd-foreground: hsl(0, 0%, 92%);
50
56
  --color-fd-muted: hsl(0, 0%, 12.9%);
@@ -65,12 +71,26 @@
65
71
 
66
72
  /* ─── Base ───────────────────────────────────────────────────────────── */
67
73
 
68
- html {
74
+ html:has(#nd-docs-layout) {
69
75
  scroll-behavior: smooth;
70
76
  scroll-padding-top: 80px;
71
77
  }
72
78
 
73
- body {
79
+ body:has(#nd-docs-layout) {
80
+ margin: 0;
81
+ font-family: var(--fd-font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
82
+ font-size: var(--fd-body-size, 1rem);
83
+ font-weight: var(--fd-body-weight, 400);
84
+ line-height: var(--fd-body-line-height, 1.75);
85
+ background: var(--color-fd-background);
86
+ color: var(--color-fd-foreground);
87
+ -webkit-font-smoothing: antialiased;
88
+ -moz-osx-font-smoothing: grayscale;
89
+ }
90
+
91
+ #nd-docs-layout {
92
+ scroll-behavior: smooth;
93
+ scroll-padding-top: 80px;
74
94
  font-family: var(--fd-font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
75
95
  font-size: var(--fd-body-size, 1rem);
76
96
  font-weight: var(--fd-body-weight, 400);
@@ -81,10 +101,10 @@ body {
81
101
  -moz-osx-font-smoothing: grayscale;
82
102
  }
83
103
 
84
- code,
85
- kbd,
86
- pre,
87
- samp {
104
+ #nd-docs-layout code,
105
+ #nd-docs-layout kbd,
106
+ #nd-docs-layout pre,
107
+ #nd-docs-layout samp {
88
108
  font-family: var(
89
109
  --fd-font-mono,
90
110
  ui-monospace,
@@ -98,7 +118,7 @@ samp {
98
118
 
99
119
  /* ─── Layout (sidebar + content, TOC lives inside content area) ──────── */
100
120
 
101
- .fd-layout {
121
+ #nd-docs-layout {
102
122
  display: grid;
103
123
  grid-template-columns: var(--fd-sidebar-width) 1fr;
104
124
  min-height: 100dvh;
@@ -106,7 +126,7 @@ samp {
106
126
 
107
127
  /* ─── Mobile header ──────────────────────────────────────────────────── */
108
128
 
109
- .fd-header {
129
+ #nd-docs-layout .fd-header {
110
130
  display: none;
111
131
  position: sticky;
112
132
  top: 0;
@@ -119,7 +139,7 @@ samp {
119
139
  gap: 8px;
120
140
  }
121
141
 
122
- .fd-header-title {
142
+ #nd-docs-layout .fd-header-title {
123
143
  font-weight: 600;
124
144
  font-size: 14px;
125
145
  color: var(--color-fd-foreground);
@@ -127,8 +147,8 @@ samp {
127
147
  flex: 1;
128
148
  }
129
149
 
130
- .fd-menu-btn,
131
- .fd-search-trigger-mobile {
150
+ #nd-docs-layout .fd-menu-btn,
151
+ #nd-docs-layout .fd-search-trigger-mobile {
132
152
  display: inline-flex;
133
153
  align-items: center;
134
154
  justify-content: center;
@@ -144,39 +164,39 @@ samp {
144
164
  color 0.15s;
145
165
  }
146
166
 
147
- .fd-menu-btn:hover,
148
- .fd-search-trigger-mobile:hover {
167
+ #nd-docs-layout .fd-menu-btn:hover,
168
+ #nd-docs-layout .fd-search-trigger-mobile:hover {
149
169
  background: var(--color-fd-accent);
150
170
  color: var(--color-fd-foreground);
151
171
  }
152
172
 
153
173
  @media (max-width: 1023px) {
154
- .fd-header {
174
+ #nd-docs-layout .fd-header {
155
175
  display: flex;
156
176
  }
157
177
 
158
- .fd-layout {
178
+ #nd-docs-layout {
159
179
  display: flex;
160
180
  flex-direction: column;
161
181
  }
162
182
  }
163
183
 
164
184
  @media (min-width: 1024px) {
165
- .fd-layout {
185
+ #nd-docs-layout {
166
186
  grid-template-columns: var(--fd-sidebar-width) minmax(0, 1fr);
167
187
  }
168
188
 
169
- .fd-main {
189
+ #nd-docs-layout .fd-main {
170
190
  min-width: 0;
171
191
  }
172
192
 
173
- .fd-page {
193
+ #nd-docs-layout .fd-page {
174
194
  grid-template-columns: minmax(0, 1fr) var(--fd-toc-width);
175
195
  }
176
196
 
177
- .fd-page-article,
178
- .fd-page-body,
179
- .fd-docs-content {
197
+ #nd-docs-layout .fd-page-article,
198
+ #nd-docs-layout .fd-page-body,
199
+ #nd-docs-layout .fd-docs-content {
180
200
  max-width: none;
181
201
  margin-inline: 0;
182
202
  }
@@ -184,7 +204,7 @@ samp {
184
204
 
185
205
  /* ─── Sidebar ────────────────────────────────────────────────────────── */
186
206
 
187
- .fd-sidebar {
207
+ #nd-docs-layout .fd-sidebar {
188
208
  position: sticky;
189
209
  top: 0;
190
210
  width: var(--fd-sidebar-width);
@@ -199,7 +219,7 @@ samp {
199
219
  z-index: 50;
200
220
  }
201
221
 
202
- .fd-sidebar-header {
222
+ #nd-docs-layout .fd-sidebar-header {
203
223
  display: flex;
204
224
  align-items: center;
205
225
  justify-content: space-between;
@@ -207,7 +227,7 @@ samp {
207
227
  gap: 4px;
208
228
  }
209
229
 
210
- .fd-sidebar-title {
230
+ #nd-docs-layout .fd-sidebar-title {
211
231
  font-weight: 600;
212
232
  font-size: 14px;
213
233
  letter-spacing: 0.02em;
@@ -220,11 +240,11 @@ samp {
220
240
  flex: 1;
221
241
  }
222
242
 
223
- .fd-sidebar-title:hover {
243
+ #nd-docs-layout .fd-sidebar-title:hover {
224
244
  text-decoration: none;
225
245
  }
226
246
 
227
- .fd-sidebar-collapse-btn {
247
+ #nd-docs-layout .fd-sidebar-collapse-btn {
228
248
  display: inline-flex;
229
249
  align-items: center;
230
250
  justify-content: center;
@@ -241,18 +261,18 @@ samp {
241
261
  flex-shrink: 0;
242
262
  }
243
263
 
244
- .fd-sidebar-collapse-btn:hover {
264
+ #nd-docs-layout .fd-sidebar-collapse-btn:hover {
245
265
  background: var(--color-fd-accent);
246
266
  color: var(--color-fd-foreground);
247
267
  }
248
268
 
249
269
  /* ─── Search button (fumadocs style) ─────────────────────────────────── */
250
270
 
251
- .fd-sidebar-search {
271
+ #nd-docs-layout .fd-sidebar-search {
252
272
  padding: 8px 12px;
253
273
  }
254
274
 
255
- .fd-sidebar-search-btn {
275
+ #nd-docs-layout .fd-sidebar-search-btn {
256
276
  display: flex;
257
277
  align-items: center;
258
278
  gap: 8px;
@@ -270,21 +290,21 @@ samp {
270
290
  background 0.15s;
271
291
  }
272
292
 
273
- .fd-sidebar-search-btn:hover {
293
+ #nd-docs-layout .fd-sidebar-search-btn:hover {
274
294
  background: var(--color-fd-accent);
275
295
  }
276
296
 
277
- .fd-sidebar-search-btn svg {
297
+ #nd-docs-layout .fd-sidebar-search-btn svg {
278
298
  flex-shrink: 0;
279
299
  opacity: 0.7;
280
300
  }
281
301
 
282
- .fd-sidebar-search-btn span {
302
+ #nd-docs-layout .fd-sidebar-search-btn span {
283
303
  flex: 1;
284
304
  text-align: left;
285
305
  }
286
306
 
287
- .fd-sidebar-search-btn kbd {
307
+ #nd-docs-layout .fd-sidebar-search-btn kbd {
288
308
  font-size: 11px;
289
309
  padding: 1px 6px;
290
310
  border: 1px solid var(--color-fd-border);
@@ -296,13 +316,13 @@ samp {
296
316
 
297
317
  /* ─── Sidebar nav ────────────────────────────────────────────────────── */
298
318
 
299
- .fd-sidebar-nav {
319
+ #nd-docs-layout .fd-sidebar-nav {
300
320
  flex: 1;
301
321
  padding: 4px 12px;
302
322
  overflow-y: auto;
303
323
  }
304
324
 
305
- .fd-sidebar-link {
325
+ #nd-docs-layout .fd-sidebar-link {
306
326
  display: flex;
307
327
  align-items: center;
308
328
  gap: 8px;
@@ -318,20 +338,20 @@ samp {
318
338
  background 0.15s;
319
339
  }
320
340
 
321
- .fd-sidebar-link:hover {
341
+ #nd-docs-layout .fd-sidebar-link:hover {
322
342
  color: var(--color-fd-accent-foreground);
323
343
  background: var(--color-fd-accent);
324
344
  text-decoration: none;
325
345
  }
326
346
 
327
- .fd-sidebar-link-active,
328
- .fd-sidebar-link[data-active="true"] {
347
+ #nd-docs-layout .fd-sidebar-link-active,
348
+ #nd-docs-layout .fd-sidebar-link[data-active="true"] {
329
349
  color: var(--color-fd-foreground) !important;
330
350
  background: var(--color-fd-accent) !important;
331
351
  font-weight: 600;
332
352
  }
333
353
 
334
- .fd-sidebar-folder-content .fd-sidebar-link-active::before {
354
+ #nd-docs-layout .fd-sidebar-folder-content .fd-sidebar-link-active::before {
335
355
  content: "";
336
356
  position: absolute;
337
357
  left: -9px;
@@ -344,19 +364,19 @@ samp {
344
364
 
345
365
  /* ─── Sidebar folders ────────────────────────────────────────────────── */
346
366
 
347
- .fd-sidebar-folder {
367
+ #nd-docs-layout .fd-sidebar-folder {
348
368
  margin: 2px 0;
349
369
  }
350
370
 
351
- .fd-sidebar-folder summary {
371
+ #nd-docs-layout .fd-sidebar-folder summary {
352
372
  list-style: none;
353
373
  }
354
374
 
355
- .fd-sidebar-folder summary::-webkit-details-marker {
375
+ #nd-docs-layout .fd-sidebar-folder summary::-webkit-details-marker {
356
376
  display: none;
357
377
  }
358
378
 
359
- .fd-sidebar-folder-trigger {
379
+ #nd-docs-layout .fd-sidebar-folder-trigger {
360
380
  display: flex;
361
381
  align-items: center;
362
382
  justify-content: space-between;
@@ -369,15 +389,15 @@ samp {
369
389
  transition: background 0.15s;
370
390
  }
371
391
 
372
- .fd-sidebar-folder-trigger:hover {
392
+ #nd-docs-layout .fd-sidebar-folder-trigger:hover {
373
393
  background: var(--color-fd-accent);
374
394
  }
375
395
 
376
- .fd-sidebar-folder-trigger-link {
396
+ #nd-docs-layout .fd-sidebar-folder-trigger-link {
377
397
  gap: 8px;
378
398
  }
379
399
 
380
- .fd-sidebar-folder-parent-link {
400
+ #nd-docs-layout .fd-sidebar-folder-parent-link {
381
401
  min-width: 0;
382
402
  flex: 1;
383
403
  padding: 0;
@@ -385,12 +405,12 @@ samp {
385
405
  background: transparent !important;
386
406
  }
387
407
 
388
- .fd-sidebar-folder-parent-link:hover {
408
+ #nd-docs-layout .fd-sidebar-folder-parent-link:hover {
389
409
  color: inherit;
390
410
  background: transparent !important;
391
411
  }
392
412
 
393
- .fd-sidebar-folder-toggle {
413
+ #nd-docs-layout .fd-sidebar-folder-toggle {
394
414
  display: inline-flex;
395
415
  align-items: center;
396
416
  justify-content: center;
@@ -403,25 +423,25 @@ samp {
403
423
  flex-shrink: 0;
404
424
  }
405
425
 
406
- .fd-sidebar-chevron {
426
+ #nd-docs-layout .fd-sidebar-chevron {
407
427
  transition: transform 0.2s;
408
428
  flex-shrink: 0;
409
429
  opacity: 0.5;
410
430
  }
411
431
 
412
- .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron,
413
- .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger-link .fd-sidebar-chevron {
432
+ #nd-docs-layout .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger .fd-sidebar-chevron,
433
+ #nd-docs-layout .fd-sidebar-folder[open] > .fd-sidebar-folder-trigger-link .fd-sidebar-chevron {
414
434
  transform: rotate(180deg);
415
435
  }
416
436
 
417
- .fd-sidebar-folder-content {
437
+ #nd-docs-layout .fd-sidebar-folder-content {
418
438
  position: relative;
419
439
  padding-left: 12px;
420
440
  margin-left: 10px;
421
441
  margin-top: 2px;
422
442
  }
423
443
 
424
- .fd-sidebar-folder-content::before {
444
+ #nd-docs-layout .fd-sidebar-folder-content::before {
425
445
  content: "";
426
446
  position: absolute;
427
447
  left: 4px;
@@ -431,17 +451,17 @@ samp {
431
451
  background: var(--color-fd-border);
432
452
  }
433
453
 
434
- .fd-sidebar-banner {
454
+ #nd-docs-layout .fd-sidebar-banner {
435
455
  padding: 12px 16px;
436
456
  border-bottom: 1px solid var(--color-fd-border);
437
457
  }
438
458
 
439
- .fd-sidebar-footer-custom {
459
+ #nd-docs-layout .fd-sidebar-footer-custom {
440
460
  padding: 12px 16px;
441
461
  border-top: 1px solid var(--color-fd-border);
442
462
  }
443
463
 
444
- .fd-sidebar-footer {
464
+ #nd-docs-layout .fd-sidebar-footer {
445
465
  padding: 12px 16px;
446
466
  border-top: 1px solid var(--color-fd-border);
447
467
  margin-top: auto;
@@ -449,7 +469,7 @@ samp {
449
469
 
450
470
  /* ─── Sidebar overlay + responsive ───────────────────────────────────── */
451
471
 
452
- .fd-sidebar-overlay {
472
+ #nd-docs-layout .fd-sidebar-overlay {
453
473
  display: none;
454
474
  position: fixed;
455
475
  inset: 0;
@@ -459,7 +479,7 @@ samp {
459
479
  }
460
480
 
461
481
  @media (max-width: 1023px) {
462
- .fd-sidebar {
482
+ #nd-docs-layout .fd-sidebar {
463
483
  position: fixed;
464
484
  left: 0;
465
485
  top: 0;
@@ -468,31 +488,31 @@ samp {
468
488
  z-index: 50;
469
489
  }
470
490
 
471
- .fd-sidebar-open {
491
+ #nd-docs-layout .fd-sidebar-open {
472
492
  transform: translateX(0);
473
493
  }
474
494
 
475
- .fd-sidebar-open + .fd-sidebar-overlay {
495
+ #nd-docs-layout .fd-sidebar-open + .fd-sidebar-overlay {
476
496
  display: block;
477
497
  }
478
498
  }
479
499
 
480
500
  /* ─── Main content ───────────────────────────────────────────────────── */
481
501
 
482
- .fd-main {
502
+ #nd-docs-layout .fd-main {
483
503
  min-width: 0;
484
504
  padding: 0;
485
505
  }
486
506
 
487
507
  /* ─── Page layout (article + TOC) ────────────────────────────────────── */
488
508
 
489
- .fd-page {
509
+ #nd-docs-layout .fd-page {
490
510
  display: grid;
491
511
  grid-template-columns: 1fr var(--fd-toc-width);
492
512
  width: 100%;
493
513
  }
494
514
 
495
- .fd-page-article {
515
+ #nd-docs-layout .fd-page-article {
496
516
  min-width: 0;
497
517
  padding: 32px 48px 64px;
498
518
  display: flex;
@@ -502,7 +522,7 @@ samp {
502
522
 
503
523
  /* ─── Table of Contents (right column, flush to right edge) ──────────── */
504
524
 
505
- .fd-toc {
525
+ #nd-docs-layout .fd-toc {
506
526
  width: var(--fd-toc-width);
507
527
  position: sticky;
508
528
  top: 0;
@@ -511,10 +531,10 @@ samp {
511
531
  padding: 40px 24px;
512
532
  }
513
533
 
514
- .fd-toc-inner {
534
+ #nd-docs-layout .fd-toc-inner {
515
535
  }
516
536
 
517
- .fd-toc-title {
537
+ #nd-docs-layout .fd-toc-title {
518
538
  display: flex;
519
539
  align-items: center;
520
540
  gap: 8px;
@@ -524,11 +544,11 @@ samp {
524
544
  margin-bottom: 12px;
525
545
  }
526
546
 
527
- .fd-toc-title svg {
547
+ #nd-docs-layout .fd-toc-title svg {
528
548
  opacity: 0.5;
529
549
  }
530
550
 
531
- .fd-toc-list {
551
+ #nd-docs-layout .fd-toc-list {
532
552
  list-style: none;
533
553
  padding: 0;
534
554
  margin: 0;
@@ -538,11 +558,11 @@ samp {
538
558
  border-left: 1px solid var(--color-fd-border);
539
559
  }
540
560
 
541
- .fd-toc-item {
561
+ #nd-docs-layout .fd-toc-item {
542
562
  margin: 0;
543
563
  }
544
564
 
545
- .fd-toc-link {
565
+ #nd-docs-layout .fd-toc-link {
546
566
  display: block;
547
567
  padding: 4px 12px;
548
568
  font-size: 13px;
@@ -555,23 +575,23 @@ samp {
555
575
  border-color 0.15s;
556
576
  }
557
577
 
558
- .fd-toc-link:hover {
578
+ #nd-docs-layout .fd-toc-link:hover {
559
579
  color: var(--color-fd-foreground);
560
580
  text-decoration: none;
561
581
  }
562
582
 
563
- .fd-toc-link-active {
583
+ #nd-docs-layout .fd-toc-link-active {
564
584
  color: var(--color-fd-primary);
565
585
  border-left-color: var(--color-fd-primary);
566
586
  }
567
587
 
568
588
  /* ─── Clerk TOC (tree-line style) ────────────────────────────────────── */
569
589
 
570
- .fd-toc-clerk {
590
+ #nd-docs-layout .fd-toc-clerk {
571
591
  border-left: none !important;
572
592
  }
573
593
 
574
- .fd-toc-clerk .fd-toc-link {
594
+ #nd-docs-layout .fd-toc-clerk .fd-toc-link {
575
595
  display: block;
576
596
  border-left: none;
577
597
  margin-left: 0;
@@ -580,45 +600,45 @@ samp {
580
600
  transition: color 0.15s;
581
601
  }
582
602
 
583
- .fd-toc-clerk .fd-toc-link:hover {
603
+ #nd-docs-layout .fd-toc-clerk .fd-toc-link:hover {
584
604
  color: var(--color-fd-foreground);
585
605
  }
586
606
 
587
- .fd-toc-clerk .fd-toc-link[data-active="true"] {
607
+ #nd-docs-layout .fd-toc-clerk .fd-toc-link[data-active="true"] {
588
608
  color: var(--color-fd-primary);
589
609
  }
590
610
 
591
- .fd-toc-clerk-mask {
611
+ #nd-docs-layout .fd-toc-clerk-mask {
592
612
  overflow: hidden;
593
613
  }
594
614
 
595
- .fd-toc-clerk-thumb {
615
+ #nd-docs-layout .fd-toc-clerk-thumb {
596
616
  width: 100%;
597
617
  }
598
618
 
599
619
  @media (max-width: 1279px) {
600
- .fd-toc {
620
+ #nd-docs-layout .fd-toc {
601
621
  display: none;
602
622
  }
603
623
 
604
- .fd-page {
624
+ #nd-docs-layout .fd-page {
605
625
  grid-template-columns: 1fr;
606
626
  }
607
627
  }
608
628
 
609
629
  @media (max-width: 1023px) {
610
- .fd-toc {
630
+ #nd-docs-layout .fd-toc {
611
631
  display: none;
612
632
  }
613
633
 
614
- .fd-page {
634
+ #nd-docs-layout .fd-page {
615
635
  grid-template-columns: 1fr;
616
636
  }
617
637
  }
618
638
 
619
639
  /* ─── Page title + description (match Nuxt/Astro: title first, then description) ─────── */
620
640
 
621
- .fd-page-title {
641
+ #nd-docs-layout .fd-page-title {
622
642
  font-size: var(--fd-h1-size, 2.25rem);
623
643
  font-weight: var(--fd-h1-weight, 700);
624
644
  line-height: var(--fd-h1-line-height, 1.2);
@@ -627,7 +647,7 @@ samp {
627
647
  scroll-margin-top: 80px;
628
648
  }
629
649
 
630
- .fd-page-description {
650
+ #nd-docs-layout .fd-page-description {
631
651
  margin-top: 0;
632
652
  margin-bottom: 1rem;
633
653
  font-size: var(--fd-body-size, 1.125rem);
@@ -638,14 +658,14 @@ samp {
638
658
 
639
659
  /* ─── Page Actions (Copy page / Open in …) ─────────────────────────────── */
640
660
 
641
- .fd-page-actions-divider {
661
+ #nd-docs-layout .fd-page-actions-divider {
642
662
  border: none;
643
663
  border-top: 1px solid var(--color-fd-border);
644
664
  margin: 1rem 0 0.75rem;
645
665
  }
646
666
 
647
- .fd-page-actions,
648
- [data-page-actions] {
667
+ #nd-docs-layout .fd-page-actions,
668
+ #nd-docs-layout [data-page-actions] {
649
669
  display: flex;
650
670
  flex-direction: row;
651
671
  align-items: center;
@@ -655,17 +675,17 @@ samp {
655
675
  width: 100%;
656
676
  }
657
677
 
658
- .fd-page-actions[data-actions-alignment="right"],
659
- [data-page-actions][data-actions-alignment="right"] {
678
+ #nd-docs-layout .fd-page-actions[data-actions-alignment="right"],
679
+ #nd-docs-layout [data-page-actions][data-actions-alignment="right"] {
660
680
  justify-content: flex-end;
661
681
  }
662
682
 
663
- .fd-page-actions[data-actions-alignment="left"],
664
- [data-page-actions][data-actions-alignment="left"] {
683
+ #nd-docs-layout .fd-page-actions[data-actions-alignment="left"],
684
+ #nd-docs-layout [data-page-actions][data-actions-alignment="left"] {
665
685
  justify-content: flex-start;
666
686
  }
667
687
 
668
- .fd-page-action-btn {
688
+ #nd-docs-layout .fd-page-action-btn {
669
689
  display: inline-flex;
670
690
  align-items: center;
671
691
  gap: 0.375rem;
@@ -687,33 +707,33 @@ samp {
687
707
  user-select: none;
688
708
  }
689
709
 
690
- .fd-page-action-btn:hover {
710
+ #nd-docs-layout .fd-page-action-btn:hover {
691
711
  color: var(--color-fd-accent-foreground);
692
712
  background: var(--color-fd-accent);
693
713
  }
694
714
 
695
- .fd-page-action-btn[data-copied="true"] {
715
+ #nd-docs-layout .fd-page-action-btn[data-copied="true"] {
696
716
  color: var(--color-fd-foreground);
697
717
  }
698
718
 
699
- .fd-page-action-btn[data-selected="true"] {
719
+ #nd-docs-layout .fd-page-action-btn[data-selected="true"] {
700
720
  color: var(--color-fd-accent-foreground);
701
721
  background: var(--color-fd-accent);
702
722
  }
703
723
 
704
- .fd-page-action-btn svg {
724
+ #nd-docs-layout .fd-page-action-btn svg {
705
725
  flex-shrink: 0;
706
726
  }
707
727
 
708
- .fd-page-action-btn[data-selected="true"] svg {
728
+ #nd-docs-layout .fd-page-action-btn[data-selected="true"] svg {
709
729
  color: currentColor;
710
730
  }
711
731
 
712
- .fd-page-action-dropdown {
732
+ #nd-docs-layout .fd-page-action-dropdown {
713
733
  position: relative;
714
734
  }
715
735
 
716
- .fd-page-action-menu {
736
+ #nd-docs-layout .fd-page-action-menu {
717
737
  position: absolute;
718
738
  top: calc(100% + 0.375rem);
719
739
  left: 0;
@@ -729,11 +749,11 @@ samp {
729
749
  gap: 0.125rem;
730
750
  }
731
751
 
732
- .fd-page-action-menu[hidden] {
752
+ #nd-docs-layout .fd-page-action-menu[hidden] {
733
753
  display: none !important;
734
754
  }
735
755
 
736
- .fd-page-action-menu-item {
756
+ #nd-docs-layout .fd-page-action-menu-item {
737
757
  display: flex;
738
758
  align-items: center;
739
759
  gap: 0.5rem;
@@ -751,32 +771,32 @@ samp {
751
771
  transition: background 0.1s, color 0.1s;
752
772
  }
753
773
 
754
- .fd-page-action-menu-item:hover {
774
+ #nd-docs-layout .fd-page-action-menu-item:hover {
755
775
  background: var(--color-fd-accent);
756
776
  color: var(--color-fd-accent-foreground);
757
777
  }
758
778
 
759
- .fd-page-action-menu-label {
779
+ #nd-docs-layout .fd-page-action-menu-label {
760
780
  flex: 1;
761
781
  }
762
782
 
763
- .fd-page-actions a,
764
- .fd-page-actions button,
765
- .fd-page-action-menu-item,
766
- .fd-page-action-btn {
783
+ #nd-docs-layout .fd-page-actions a,
784
+ #nd-docs-layout .fd-page-actions button,
785
+ #nd-docs-layout .fd-page-action-menu-item,
786
+ #nd-docs-layout .fd-page-action-btn {
767
787
  text-decoration: none !important;
768
788
  }
769
789
 
770
- .fd-page-action-menu-item:hover {
790
+ #nd-docs-layout .fd-page-action-menu-item:hover {
771
791
  text-decoration: none !important;
772
792
  }
773
793
 
774
- .fd-last-modified-below-title {
794
+ #nd-docs-layout .fd-last-modified-below-title {
775
795
  margin-top: 0.25rem;
776
796
  margin-bottom: 1rem;
777
797
  }
778
798
 
779
- .fd-page-meta {
799
+ #nd-docs-layout .fd-page-meta {
780
800
  display: flex;
781
801
  flex-wrap: wrap;
782
802
  align-items: center;
@@ -784,7 +804,7 @@ samp {
784
804
  margin-bottom: 0.75rem;
785
805
  }
786
806
 
787
- .fd-page-meta-dot {
807
+ #nd-docs-layout .fd-page-meta-dot {
788
808
  display: inline-flex;
789
809
  align-items: center;
790
810
  justify-content: center;
@@ -794,7 +814,7 @@ samp {
794
814
  color: color-mix(in srgb, var(--color-fd-muted-foreground) 78%, transparent);
795
815
  }
796
816
 
797
- .fd-page-meta-item {
817
+ #nd-docs-layout .fd-page-meta-item {
798
818
  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
799
819
  font-size: 0.6875rem;
800
820
  font-weight: 500;
@@ -803,14 +823,14 @@ samp {
803
823
  color: var(--color-fd-muted-foreground);
804
824
  }
805
825
 
806
- .fd-feedback {
826
+ #nd-docs-layout .fd-feedback {
807
827
  margin-top: 2rem;
808
828
  margin-bottom: 1.25rem;
809
829
  padding-top: 1.25rem;
810
830
  border-top: 1px solid var(--color-fd-border);
811
831
  }
812
832
 
813
- .fd-feedback-content {
833
+ #nd-docs-layout .fd-feedback-content {
814
834
  display: flex;
815
835
  align-items: center;
816
836
  justify-content: space-between;
@@ -818,7 +838,7 @@ samp {
818
838
  flex-wrap: wrap;
819
839
  }
820
840
 
821
- .fd-feedback-question {
841
+ #nd-docs-layout .fd-feedback-question {
822
842
  margin: 0;
823
843
  font-size: 0.9375rem;
824
844
  font-weight: 600;
@@ -826,34 +846,34 @@ samp {
826
846
  color: var(--color-fd-foreground);
827
847
  }
828
848
 
829
- .fd-feedback-actions {
849
+ #nd-docs-layout .fd-feedback-actions {
830
850
  display: inline-flex;
831
851
  align-items: center;
832
852
  gap: 0.5rem;
833
853
  flex-wrap: wrap;
834
854
  }
835
855
 
836
- .fd-feedback-form {
856
+ #nd-docs-layout .fd-feedback-form {
837
857
  display: flex;
838
858
  flex-direction: column;
839
859
  gap: 0.75rem;
840
860
  margin-top: 0.875rem;
841
861
  }
842
862
 
843
- .fd-feedback-form[hidden],
844
- .fd-feedback-spinner[hidden],
845
- .fd-feedback-status[hidden],
846
- .fd-feedback-submit svg[hidden] {
863
+ #nd-docs-layout .fd-feedback-form[hidden],
864
+ #nd-docs-layout .fd-feedback-spinner[hidden],
865
+ #nd-docs-layout .fd-feedback-status[hidden],
866
+ #nd-docs-layout .fd-feedback-submit svg[hidden] {
847
867
  display: none !important;
848
868
  }
849
869
 
850
- .fd-feedback-choice[data-selected="true"] {
870
+ #nd-docs-layout .fd-feedback-choice[data-selected="true"] {
851
871
  background: var(--color-fd-accent);
852
872
  color: var(--color-fd-accent-foreground);
853
873
  border-color: color-mix(in srgb, var(--color-fd-primary, currentColor) 65%, transparent);
854
874
  }
855
875
 
856
- .fd-feedback-input {
876
+ #nd-docs-layout .fd-feedback-input {
857
877
  width: 100%;
858
878
  min-height: 4.75rem;
859
879
  resize: vertical;
@@ -872,16 +892,16 @@ samp {
872
892
  background-color 150ms ease;
873
893
  }
874
894
 
875
- .fd-feedback-input::placeholder {
895
+ #nd-docs-layout .fd-feedback-input::placeholder {
876
896
  color: var(--color-fd-muted-foreground);
877
897
  }
878
898
 
879
- .fd-feedback-input:focus {
899
+ #nd-docs-layout .fd-feedback-input:focus {
880
900
  border-color: var(--color-fd-ring, var(--color-fd-primary, currentColor));
881
901
  box-shadow: 0 0 0 1px var(--color-fd-ring, var(--color-fd-primary, currentColor));
882
902
  }
883
903
 
884
- .fd-feedback-submit-row {
904
+ #nd-docs-layout .fd-feedback-submit-row {
885
905
  display: flex;
886
906
  align-items: center;
887
907
  gap: 0.75rem;
@@ -889,18 +909,18 @@ samp {
889
909
  min-height: 2rem;
890
910
  }
891
911
 
892
- .fd-feedback-submit {
912
+ #nd-docs-layout .fd-feedback-submit {
893
913
  min-width: 7rem;
894
914
  padding-inline: 0.875rem;
895
915
  justify-content: center;
896
916
  }
897
917
 
898
- .fd-feedback-submit:disabled {
918
+ #nd-docs-layout .fd-feedback-submit:disabled {
899
919
  cursor: not-allowed;
900
920
  opacity: 0.65;
901
921
  }
902
922
 
903
- .fd-feedback-spinner {
923
+ #nd-docs-layout .fd-feedback-spinner {
904
924
  width: 0.875rem;
905
925
  height: 0.875rem;
906
926
  border-radius: 9999px;
@@ -909,14 +929,14 @@ samp {
909
929
  animation: fd-feedback-spin 0.8s linear infinite;
910
930
  }
911
931
 
912
- .fd-feedback-status {
932
+ #nd-docs-layout .fd-feedback-status {
913
933
  margin: 0 !important;
914
934
  font-size: 0.75rem;
915
935
  line-height: 1.3;
916
936
  color: var(--color-fd-muted-foreground);
917
937
  }
918
938
 
919
- .fd-feedback-status[data-status="success"] {
939
+ #nd-docs-layout .fd-feedback-status[data-status="success"] {
920
940
  display: inline-flex;
921
941
  align-self: center;
922
942
  align-items: center;
@@ -924,11 +944,11 @@ samp {
924
944
  min-height: 2rem;
925
945
  }
926
946
 
927
- .fd-feedback-status[data-status="success"] {
947
+ #nd-docs-layout .fd-feedback-status[data-status="success"] {
928
948
  color: color-mix(in srgb, var(--color-fd-primary) 85%, var(--color-fd-foreground));
929
949
  }
930
950
 
931
- .fd-feedback-status[data-status="error"] {
951
+ #nd-docs-layout .fd-feedback-status[data-status="error"] {
932
952
  color: var(--color-fd-foreground);
933
953
  }
934
954
 
@@ -939,19 +959,19 @@ samp {
939
959
  }
940
960
 
941
961
  @media (max-width: 640px) {
942
- .fd-feedback-content {
962
+ #nd-docs-layout .fd-feedback-content {
943
963
  flex-direction: column;
944
964
  align-items: flex-start;
945
965
  }
946
966
 
947
- .fd-feedback-submit-row {
967
+ #nd-docs-layout .fd-feedback-submit-row {
948
968
  flex-wrap: wrap;
949
969
  }
950
970
  }
951
971
 
952
972
  /* ─── Breadcrumb ─────────────────────────────────────────────────────── */
953
973
 
954
- .fd-breadcrumb {
974
+ #nd-docs-layout .fd-breadcrumb {
955
975
  display: flex;
956
976
  align-items: center;
957
977
  gap: 0;
@@ -961,23 +981,23 @@ samp {
961
981
  margin-bottom: 2rem;
962
982
  }
963
983
 
964
- .fd-breadcrumb-item {
984
+ #nd-docs-layout .fd-breadcrumb-item {
965
985
  display: inline-flex;
966
986
  align-items: center;
967
987
  }
968
988
 
969
- .fd-breadcrumb-sep {
989
+ #nd-docs-layout .fd-breadcrumb-sep {
970
990
  margin: 0 6px;
971
991
  opacity: 0.4;
972
992
  font-size: var(--fd-small-size, 0.75rem);
973
993
  }
974
994
 
975
- .fd-breadcrumb-parent {
995
+ #nd-docs-layout .fd-breadcrumb-parent {
976
996
  opacity: 0.7;
977
997
  font-weight: 400;
978
998
  }
979
999
 
980
- .fd-breadcrumb-link {
1000
+ #nd-docs-layout .fd-breadcrumb-link {
981
1001
  color: inherit;
982
1002
  text-decoration: none;
983
1003
  cursor: pointer;
@@ -986,20 +1006,20 @@ samp {
986
1006
  color 0.15s;
987
1007
  }
988
1008
 
989
- .fd-breadcrumb-link:hover {
1009
+ #nd-docs-layout .fd-breadcrumb-link:hover {
990
1010
  opacity: 1;
991
1011
  color: var(--color-fd-foreground);
992
1012
  text-decoration: none;
993
1013
  }
994
1014
 
995
- .fd-breadcrumb-current {
1015
+ #nd-docs-layout .fd-breadcrumb-current {
996
1016
  font-weight: 500;
997
1017
  color: var(--color-fd-foreground);
998
1018
  }
999
1019
 
1000
1020
  /* ─── Prompt Cards ─────────────────────────────────────────────────── */
1001
1021
 
1002
- .fd-prompt {
1022
+ #nd-docs-layout .fd-prompt {
1003
1023
  display: flex;
1004
1024
  flex-direction: column;
1005
1025
  gap: 0.875rem;
@@ -1010,22 +1030,22 @@ samp {
1010
1030
  background: color-mix(in srgb, var(--color-fd-card) 78%, transparent);
1011
1031
  }
1012
1032
 
1013
- .fd-prompt-header {
1033
+ #nd-docs-layout .fd-prompt-header {
1014
1034
  display: flex;
1015
1035
  align-items: flex-start;
1016
1036
  gap: 0.75rem;
1017
1037
  }
1018
1038
 
1019
- .fd-prompt-icon,
1020
- .fd-prompt-action-icon,
1021
- .fd-prompt-menu-icon {
1039
+ #nd-docs-layout .fd-prompt-icon,
1040
+ #nd-docs-layout .fd-prompt-action-icon,
1041
+ #nd-docs-layout .fd-prompt-menu-icon {
1022
1042
  display: inline-flex;
1023
1043
  align-items: center;
1024
1044
  justify-content: center;
1025
1045
  flex-shrink: 0;
1026
1046
  }
1027
1047
 
1028
- .fd-prompt-icon {
1048
+ #nd-docs-layout .fd-prompt-icon {
1029
1049
  width: 1.75rem;
1030
1050
  height: 1.75rem;
1031
1051
  border-radius: 0.5rem;
@@ -1034,18 +1054,18 @@ samp {
1034
1054
  color: var(--color-fd-foreground);
1035
1055
  }
1036
1056
 
1037
- .fd-prompt-icon svg,
1038
- .fd-prompt-action-icon svg,
1039
- .fd-prompt-menu-icon svg {
1057
+ #nd-docs-layout .fd-prompt-icon svg,
1058
+ #nd-docs-layout .fd-prompt-action-icon svg,
1059
+ #nd-docs-layout .fd-prompt-menu-icon svg {
1040
1060
  width: 1rem;
1041
1061
  height: 1rem;
1042
1062
  }
1043
1063
 
1044
- .fd-prompt-copy {
1064
+ #nd-docs-layout .fd-prompt-copy {
1045
1065
  min-width: 0;
1046
1066
  }
1047
1067
 
1048
- .fd-prompt-title {
1068
+ #nd-docs-layout .fd-prompt-title {
1049
1069
  margin: 0;
1050
1070
  color: var(--color-fd-foreground);
1051
1071
  font-size: 0.9375rem;
@@ -1053,14 +1073,14 @@ samp {
1053
1073
  line-height: 1.35;
1054
1074
  }
1055
1075
 
1056
- .fd-prompt-description {
1076
+ #nd-docs-layout .fd-prompt-description {
1057
1077
  margin: 0.25rem 0 0;
1058
1078
  color: var(--color-fd-muted-foreground);
1059
1079
  font-size: 0.875rem;
1060
1080
  line-height: 1.55;
1061
1081
  }
1062
1082
 
1063
- .fd-prompt-body {
1083
+ #nd-docs-layout .fd-prompt-body {
1064
1084
  margin: 0;
1065
1085
  padding: 0.875rem 1rem;
1066
1086
  border-radius: 0.625rem;
@@ -1069,7 +1089,7 @@ samp {
1069
1089
  overflow-x: auto;
1070
1090
  }
1071
1091
 
1072
- .fd-prompt-body > pre.fd-prompt-code {
1092
+ #nd-docs-layout .fd-prompt-body > pre.fd-prompt-code {
1073
1093
  margin: 0;
1074
1094
  padding: 0 !important;
1075
1095
  border: 0 !important;
@@ -1092,7 +1112,7 @@ samp {
1092
1112
  );
1093
1113
  }
1094
1114
 
1095
- .fd-prompt-actions {
1115
+ #nd-docs-layout .fd-prompt-actions {
1096
1116
  display: flex;
1097
1117
  flex-wrap: wrap;
1098
1118
  gap: 0.5rem;
@@ -1100,7 +1120,7 @@ samp {
1100
1120
  justify-content: flex-end;
1101
1121
  }
1102
1122
 
1103
- .fd-prompt-action-btn {
1123
+ #nd-docs-layout .fd-prompt-action-btn {
1104
1124
  display: inline-flex;
1105
1125
  align-items: center;
1106
1126
  gap: 0.4375rem;
@@ -1117,24 +1137,24 @@ samp {
1117
1137
  transition: color 0.15s, background 0.15s, border-color 0.15s;
1118
1138
  }
1119
1139
 
1120
- .fd-prompt-action-btn:hover {
1140
+ #nd-docs-layout .fd-prompt-action-btn:hover {
1121
1141
  color: var(--color-fd-accent-foreground);
1122
1142
  background: var(--color-fd-accent);
1123
1143
  }
1124
1144
 
1125
- .fd-prompt-action-btn[data-copied="true"] {
1145
+ #nd-docs-layout .fd-prompt-action-btn[data-copied="true"] {
1126
1146
  color: var(--color-fd-foreground);
1127
1147
  }
1128
1148
 
1129
- .fd-prompt-action-icon-copied[hidden] {
1149
+ #nd-docs-layout .fd-prompt-action-icon-copied[hidden] {
1130
1150
  display: none !important;
1131
1151
  }
1132
1152
 
1133
- .fd-prompt-dropdown {
1153
+ #nd-docs-layout .fd-prompt-dropdown {
1134
1154
  position: relative;
1135
1155
  }
1136
1156
 
1137
- .fd-prompt-menu {
1157
+ #nd-docs-layout .fd-prompt-menu {
1138
1158
  position: absolute;
1139
1159
  top: calc(100% + 0.375rem);
1140
1160
  right: 0;
@@ -1150,11 +1170,11 @@ samp {
1150
1170
  gap: 0.125rem;
1151
1171
  }
1152
1172
 
1153
- .fd-prompt-menu[hidden] {
1173
+ #nd-docs-layout .fd-prompt-menu[hidden] {
1154
1174
  display: none !important;
1155
1175
  }
1156
1176
 
1157
- .fd-prompt-menu-item {
1177
+ #nd-docs-layout .fd-prompt-menu-item {
1158
1178
  display: flex;
1159
1179
  align-items: center;
1160
1180
  gap: 0.5rem;
@@ -1171,18 +1191,18 @@ samp {
1171
1191
  transition: background 0.1s, color 0.1s;
1172
1192
  }
1173
1193
 
1174
- .fd-prompt-menu-item:hover {
1194
+ #nd-docs-layout .fd-prompt-menu-item:hover {
1175
1195
  background: var(--color-fd-accent);
1176
1196
  color: var(--color-fd-accent-foreground);
1177
1197
  }
1178
1198
 
1179
- .fd-prompt-menu-label {
1199
+ #nd-docs-layout .fd-prompt-menu-label {
1180
1200
  flex: 1;
1181
1201
  }
1182
1202
 
1183
1203
  /* ─── Theme Toggle ───────────────────────────────────────────────────── */
1184
1204
 
1185
- .fd-theme-toggle {
1205
+ #nd-docs-layout .fd-theme-toggle {
1186
1206
  display: inline-flex;
1187
1207
  align-items: center;
1188
1208
  justify-content: center;
@@ -1198,14 +1218,14 @@ samp {
1198
1218
  background 0.15s;
1199
1219
  }
1200
1220
 
1201
- .fd-theme-toggle:hover {
1221
+ #nd-docs-layout .fd-theme-toggle:hover {
1202
1222
  color: var(--color-fd-foreground);
1203
1223
  background: var(--color-fd-accent);
1204
1224
  }
1205
1225
 
1206
1226
  /* ─── Search Dialog (matching fumadocs Cmd+K) ────────────────────────── */
1207
1227
 
1208
- .fd-search-overlay {
1228
+ #nd-docs-layout .fd-search-overlay {
1209
1229
  position: fixed;
1210
1230
  inset: 0;
1211
1231
  z-index: 100;
@@ -1218,7 +1238,7 @@ samp {
1218
1238
  animation: fd-fade-in 0.12s ease-out;
1219
1239
  }
1220
1240
 
1221
- .fd-search-dialog {
1241
+ #nd-docs-layout .fd-search-dialog {
1222
1242
  width: 90%;
1223
1243
  max-width: 540px;
1224
1244
  background: var(--color-fd-popover);
@@ -1229,7 +1249,7 @@ samp {
1229
1249
  animation: fd-slide-up 0.15s ease-out;
1230
1250
  }
1231
1251
 
1232
- .fd-search-input-wrap {
1252
+ #nd-docs-layout .fd-search-input-wrap {
1233
1253
  display: flex;
1234
1254
  align-items: center;
1235
1255
  gap: 10px;
@@ -1237,12 +1257,12 @@ samp {
1237
1257
  border-bottom: 1px solid var(--color-fd-border);
1238
1258
  }
1239
1259
 
1240
- .fd-search-input-wrap svg {
1260
+ #nd-docs-layout .fd-search-input-wrap svg {
1241
1261
  color: var(--color-fd-muted-foreground);
1242
1262
  flex-shrink: 0;
1243
1263
  }
1244
1264
 
1245
- .fd-search-input {
1265
+ #nd-docs-layout .fd-search-input {
1246
1266
  flex: 1;
1247
1267
  background: transparent;
1248
1268
  border: none;
@@ -1252,11 +1272,11 @@ samp {
1252
1272
  font-family: inherit;
1253
1273
  }
1254
1274
 
1255
- .fd-search-input::placeholder {
1275
+ #nd-docs-layout .fd-search-input::placeholder {
1256
1276
  color: var(--color-fd-muted-foreground);
1257
1277
  }
1258
1278
 
1259
- .fd-search-kbd {
1279
+ #nd-docs-layout .fd-search-kbd {
1260
1280
  font-size: 11px;
1261
1281
  padding: 2px 6px;
1262
1282
  border: 1px solid var(--color-fd-border);
@@ -1266,20 +1286,20 @@ samp {
1266
1286
  background: var(--color-fd-background);
1267
1287
  }
1268
1288
 
1269
- .fd-search-results {
1289
+ #nd-docs-layout .fd-search-results {
1270
1290
  max-height: 360px;
1271
1291
  overflow-y: auto;
1272
1292
  padding: 8px;
1273
1293
  }
1274
1294
 
1275
- .fd-search-empty {
1295
+ #nd-docs-layout .fd-search-empty {
1276
1296
  padding: 32px;
1277
1297
  text-align: center;
1278
1298
  color: var(--color-fd-muted-foreground);
1279
1299
  font-size: 14px;
1280
1300
  }
1281
1301
 
1282
- .fd-search-result {
1302
+ #nd-docs-layout .fd-search-result {
1283
1303
  display: block;
1284
1304
  width: 100%;
1285
1305
  text-align: left;
@@ -1293,17 +1313,17 @@ samp {
1293
1313
  color: var(--color-fd-foreground);
1294
1314
  }
1295
1315
 
1296
- .fd-search-result:hover {
1316
+ #nd-docs-layout .fd-search-result:hover {
1297
1317
  background: var(--color-fd-accent);
1298
1318
  }
1299
1319
 
1300
- .fd-search-result-title {
1320
+ #nd-docs-layout .fd-search-result-title {
1301
1321
  display: block;
1302
1322
  font-size: 14px;
1303
1323
  font-weight: 500;
1304
1324
  }
1305
1325
 
1306
- .fd-search-result-url {
1326
+ #nd-docs-layout .fd-search-result-url {
1307
1327
  display: block;
1308
1328
  font-size: 12px;
1309
1329
  color: var(--color-fd-muted-foreground);
@@ -1312,14 +1332,14 @@ samp {
1312
1332
 
1313
1333
  /* ─── Prose / Markdown content (matching fumadocs) ───────────────────── */
1314
1334
 
1315
- .fd-page-body {
1335
+ #nd-docs-layout .fd-page-body {
1316
1336
  color: var(--color-fd-foreground);
1317
1337
  line-height: 1.75;
1318
1338
  font-size: 15px;
1319
1339
  flex: 1;
1320
1340
  }
1321
1341
 
1322
- .fd-page-body a {
1342
+ #nd-docs-layout .fd-page-body a {
1323
1343
  color: var(--color-fd-foreground);
1324
1344
  font-weight: 500;
1325
1345
  text-decoration: underline;
@@ -1327,18 +1347,18 @@ samp {
1327
1347
  text-decoration-color: var(--color-fd-primary);
1328
1348
  }
1329
1349
 
1330
- .fd-page-body a:hover {
1350
+ #nd-docs-layout .fd-page-body a:hover {
1331
1351
  opacity: 0.8;
1332
1352
  }
1333
1353
 
1334
- .fd-hover-link {
1354
+ #nd-docs-layout .fd-hover-link {
1335
1355
  position: relative;
1336
1356
  display: inline-block;
1337
1357
  vertical-align: baseline;
1338
1358
  max-width: 100%;
1339
1359
  }
1340
1360
 
1341
- .fd-hover-link-trigger {
1361
+ #nd-docs-layout .fd-hover-link-trigger {
1342
1362
  display: inline !important;
1343
1363
  border: none;
1344
1364
  background: transparent;
@@ -1358,17 +1378,17 @@ samp {
1358
1378
  transition: text-decoration-color 180ms ease, opacity 180ms ease;
1359
1379
  }
1360
1380
 
1361
- .fd-hover-link-trigger:hover,
1362
- .fd-hover-link-trigger:focus-visible,
1363
- .fd-hover-link-open > .fd-hover-link-trigger {
1381
+ #nd-docs-layout .fd-hover-link-trigger:hover,
1382
+ #nd-docs-layout .fd-hover-link-trigger:focus-visible,
1383
+ #nd-docs-layout .fd-hover-link-open > .fd-hover-link-trigger {
1364
1384
  text-decoration-color: color-mix(in srgb, var(--color-fd-foreground) 68%, transparent);
1365
1385
  }
1366
1386
 
1367
- .fd-hover-link-trigger:focus-visible {
1387
+ #nd-docs-layout .fd-hover-link-trigger:focus-visible {
1368
1388
  outline: none;
1369
1389
  }
1370
1390
 
1371
- .fd-hover-link-popover {
1391
+ #nd-docs-layout .fd-hover-link-popover {
1372
1392
  --fd-hover-link-rest-x: -50%;
1373
1393
  --fd-hover-link-rest-y: 8px;
1374
1394
  --fd-hover-link-open-x: -50%;
@@ -1386,27 +1406,27 @@ samp {
1386
1406
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms linear;
1387
1407
  }
1388
1408
 
1389
- .fd-hover-link[data-align="start"] > .fd-hover-link-popover {
1409
+ #nd-docs-layout .fd-hover-link[data-align="start"] > .fd-hover-link-popover {
1390
1410
  left: 0;
1391
1411
  --fd-hover-link-rest-x: 0;
1392
1412
  --fd-hover-link-open-x: 0;
1393
1413
  }
1394
1414
 
1395
- .fd-hover-link[data-align="end"] > .fd-hover-link-popover {
1415
+ #nd-docs-layout .fd-hover-link[data-align="end"] > .fd-hover-link-popover {
1396
1416
  left: auto;
1397
1417
  right: 0;
1398
1418
  --fd-hover-link-rest-x: 0;
1399
1419
  --fd-hover-link-open-x: 0;
1400
1420
  }
1401
1421
 
1402
- .fd-hover-link[data-side="top"] > .fd-hover-link-popover {
1422
+ #nd-docs-layout .fd-hover-link[data-side="top"] > .fd-hover-link-popover {
1403
1423
  top: auto;
1404
1424
  bottom: calc(100% + var(--fd-hover-link-side-offset, 12px));
1405
1425
  --fd-hover-link-rest-y: -8px;
1406
1426
  --fd-hover-link-open-y: 0;
1407
1427
  }
1408
1428
 
1409
- .fd-hover-link[data-side="right"] > .fd-hover-link-popover {
1429
+ #nd-docs-layout .fd-hover-link[data-side="right"] > .fd-hover-link-popover {
1410
1430
  top: 50%;
1411
1431
  left: calc(100% + var(--fd-hover-link-side-offset, 12px));
1412
1432
  right: auto;
@@ -1416,20 +1436,20 @@ samp {
1416
1436
  --fd-hover-link-open-y: -50%;
1417
1437
  }
1418
1438
 
1419
- .fd-hover-link[data-side="right"][data-align="start"] > .fd-hover-link-popover {
1439
+ #nd-docs-layout .fd-hover-link[data-side="right"][data-align="start"] > .fd-hover-link-popover {
1420
1440
  top: 0;
1421
1441
  --fd-hover-link-rest-y: 0;
1422
1442
  --fd-hover-link-open-y: 0;
1423
1443
  }
1424
1444
 
1425
- .fd-hover-link[data-side="right"][data-align="end"] > .fd-hover-link-popover {
1445
+ #nd-docs-layout .fd-hover-link[data-side="right"][data-align="end"] > .fd-hover-link-popover {
1426
1446
  top: auto;
1427
1447
  bottom: 0;
1428
1448
  --fd-hover-link-rest-y: 0;
1429
1449
  --fd-hover-link-open-y: 0;
1430
1450
  }
1431
1451
 
1432
- .fd-hover-link[data-side="left"] > .fd-hover-link-popover {
1452
+ #nd-docs-layout .fd-hover-link[data-side="left"] > .fd-hover-link-popover {
1433
1453
  top: 50%;
1434
1454
  left: auto;
1435
1455
  right: calc(100% + var(--fd-hover-link-side-offset, 12px));
@@ -1439,27 +1459,27 @@ samp {
1439
1459
  --fd-hover-link-open-y: -50%;
1440
1460
  }
1441
1461
 
1442
- .fd-hover-link[data-side="left"][data-align="start"] > .fd-hover-link-popover {
1462
+ #nd-docs-layout .fd-hover-link[data-side="left"][data-align="start"] > .fd-hover-link-popover {
1443
1463
  top: 0;
1444
1464
  --fd-hover-link-rest-y: 0;
1445
1465
  --fd-hover-link-open-y: 0;
1446
1466
  }
1447
1467
 
1448
- .fd-hover-link[data-side="left"][data-align="end"] > .fd-hover-link-popover {
1468
+ #nd-docs-layout .fd-hover-link[data-side="left"][data-align="end"] > .fd-hover-link-popover {
1449
1469
  top: auto;
1450
1470
  bottom: 0;
1451
1471
  --fd-hover-link-rest-y: 0;
1452
1472
  --fd-hover-link-open-y: 0;
1453
1473
  }
1454
1474
 
1455
- .fd-hover-link-open > .fd-hover-link-popover {
1475
+ #nd-docs-layout .fd-hover-link-open > .fd-hover-link-popover {
1456
1476
  opacity: 1;
1457
1477
  visibility: visible;
1458
1478
  pointer-events: auto;
1459
1479
  transform: translate3d(var(--fd-hover-link-open-x), var(--fd-hover-link-open-y), 0);
1460
1480
  }
1461
1481
 
1462
- .fd-hover-link-card {
1482
+ #nd-docs-layout .fd-hover-link-card {
1463
1483
  display: flex;
1464
1484
  flex-direction: column;
1465
1485
  gap: 0.75rem;
@@ -1473,13 +1493,13 @@ samp {
1473
1493
  backdrop-filter: blur(14px);
1474
1494
  }
1475
1495
 
1476
- .fd-hover-link-body {
1496
+ #nd-docs-layout .fd-hover-link-body {
1477
1497
  display: flex;
1478
1498
  flex-direction: column;
1479
1499
  gap: 0.35rem;
1480
1500
  }
1481
1501
 
1482
- .fd-hover-link-preview-label {
1502
+ #nd-docs-layout .fd-hover-link-preview-label {
1483
1503
  font-size: 0.68rem;
1484
1504
  text-transform: uppercase;
1485
1505
  letter-spacing: 0.1em;
@@ -1487,30 +1507,30 @@ samp {
1487
1507
  color: color-mix(in srgb, var(--color-fd-popover-foreground, var(--color-fd-foreground)) 55%, transparent);
1488
1508
  }
1489
1509
 
1490
- .fd-hover-link-title,
1491
- .fd-hover-link-cta {
1510
+ #nd-docs-layout .fd-hover-link-title,
1511
+ #nd-docs-layout .fd-hover-link-cta {
1492
1512
  text-decoration: none !important;
1493
1513
  }
1494
1514
 
1495
- .fd-hover-link-title {
1515
+ #nd-docs-layout .fd-hover-link-title {
1496
1516
  color: var(--color-fd-popover-foreground, var(--color-fd-foreground));
1497
1517
  font-size: 1rem;
1498
1518
  font-weight: 600 !important;
1499
1519
  line-height: 1.3;
1500
1520
  }
1501
1521
 
1502
- .fd-hover-link-title:hover,
1503
- .fd-hover-link-cta:hover {
1522
+ #nd-docs-layout .fd-hover-link-title:hover,
1523
+ #nd-docs-layout .fd-hover-link-cta:hover {
1504
1524
  opacity: 1;
1505
1525
  }
1506
1526
 
1507
- .fd-hover-link-description {
1527
+ #nd-docs-layout .fd-hover-link-description {
1508
1528
  font-size: 0.92rem;
1509
1529
  line-height: 1.6;
1510
1530
  color: color-mix(in srgb, var(--color-fd-popover-foreground, var(--color-fd-foreground)) 74%, transparent);
1511
1531
  }
1512
1532
 
1513
- .fd-hover-link-footer {
1533
+ #nd-docs-layout .fd-hover-link-footer {
1514
1534
  display: flex;
1515
1535
  align-items: center;
1516
1536
  justify-content: space-between;
@@ -1519,7 +1539,7 @@ samp {
1519
1539
  border-top: 1px solid color-mix(in srgb, var(--color-fd-border) 72%, transparent);
1520
1540
  }
1521
1541
 
1522
- .fd-hover-link-cta {
1542
+ #nd-docs-layout .fd-hover-link-cta {
1523
1543
  display: inline-flex !important;
1524
1544
  align-items: center;
1525
1545
  gap: 0.4rem;
@@ -1531,7 +1551,7 @@ samp {
1531
1551
  font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
1532
1552
  }
1533
1553
 
1534
- .fd-page-body h1 {
1554
+ #nd-docs-layout .fd-page-body h1 {
1535
1555
  font-size: var(--fd-h1-size, 2.25rem);
1536
1556
  font-weight: var(--fd-h1-weight, 700);
1537
1557
  line-height: var(--fd-h1-line-height, 1.2);
@@ -1540,7 +1560,7 @@ samp {
1540
1560
  scroll-margin-top: 80px;
1541
1561
  }
1542
1562
 
1543
- .fd-page-body h2 {
1563
+ #nd-docs-layout .fd-page-body h2 {
1544
1564
  font-size: var(--fd-h2-size, 1.5rem);
1545
1565
  font-weight: var(--fd-h2-weight, 600);
1546
1566
  line-height: var(--fd-h2-line-height, 1.3);
@@ -1551,7 +1571,7 @@ samp {
1551
1571
  scroll-margin-top: 80px;
1552
1572
  }
1553
1573
 
1554
- .fd-page-body h3 {
1574
+ #nd-docs-layout .fd-page-body h3 {
1555
1575
  font-size: var(--fd-h3-size, 1.25rem);
1556
1576
  font-weight: var(--fd-h3-weight, 600);
1557
1577
  line-height: var(--fd-h3-line-height, 1.4);
@@ -1559,7 +1579,7 @@ samp {
1559
1579
  scroll-margin-top: 80px;
1560
1580
  }
1561
1581
 
1562
- .fd-page-body h4 {
1582
+ #nd-docs-layout .fd-page-body h4 {
1563
1583
  font-size: var(--fd-h4-size, 1.125rem);
1564
1584
  font-weight: var(--fd-h4-weight, 600);
1565
1585
  line-height: var(--fd-h4-line-height, 1.4);
@@ -1567,49 +1587,49 @@ samp {
1567
1587
  scroll-margin-top: 80px;
1568
1588
  }
1569
1589
 
1570
- .fd-page-body p {
1590
+ #nd-docs-layout .fd-page-body p {
1571
1591
  margin: 0 0 16px;
1572
1592
  font-size: var(--fd-body-size, 1rem);
1573
1593
  font-weight: var(--fd-body-weight, 400);
1574
1594
  line-height: var(--fd-body-line-height, 1.75);
1575
1595
  }
1576
1596
 
1577
- .fd-page-body ul,
1578
- .fd-page-body ol {
1597
+ #nd-docs-layout .fd-page-body ul,
1598
+ #nd-docs-layout .fd-page-body ol {
1579
1599
  margin: 0 0 16px;
1580
1600
  padding-left: 24px;
1581
1601
  }
1582
1602
 
1583
- .fd-page-body li {
1603
+ #nd-docs-layout .fd-page-body li {
1584
1604
  margin: 4px 0;
1585
1605
  font-size: var(--fd-body-size, 1rem);
1586
1606
  font-weight: var(--fd-body-weight, 400);
1587
1607
  line-height: var(--fd-body-line-height, 1.75);
1588
1608
  }
1589
1609
 
1590
- .fd-page-body li::marker {
1610
+ #nd-docs-layout .fd-page-body li::marker {
1591
1611
  color: var(--color-fd-muted-foreground);
1592
1612
  }
1593
1613
 
1594
- .fd-page-body strong {
1614
+ #nd-docs-layout .fd-page-body strong {
1595
1615
  font-weight: 600;
1596
1616
  color: var(--color-fd-foreground);
1597
1617
  }
1598
1618
 
1599
- .fd-page-body hr {
1619
+ #nd-docs-layout .fd-page-body hr {
1600
1620
  border: none;
1601
1621
  border-top: 1px solid var(--color-fd-border);
1602
1622
  margin: 32px 0;
1603
1623
  }
1604
1624
 
1605
- .fd-page-body blockquote {
1625
+ #nd-docs-layout .fd-page-body blockquote {
1606
1626
  border-left: 3px solid var(--color-fd-border);
1607
1627
  padding: 8px 16px;
1608
1628
  margin: 16px 0;
1609
1629
  color: var(--color-fd-muted-foreground);
1610
1630
  }
1611
1631
 
1612
- .fd-page-body code {
1632
+ #nd-docs-layout .fd-page-body code {
1613
1633
  font-size: 0.875em;
1614
1634
  padding: 2px 5px;
1615
1635
  background: var(--color-fd-secondary);
@@ -1618,7 +1638,7 @@ samp {
1618
1638
  color: var(--color-fd-foreground);
1619
1639
  }
1620
1640
 
1621
- .fd-page-body pre {
1641
+ #nd-docs-layout .fd-page-body pre {
1622
1642
  margin: 16px 0;
1623
1643
  padding: 14px 16px;
1624
1644
  background: var(--color-fd-card);
@@ -1630,7 +1650,7 @@ samp {
1630
1650
  position: relative;
1631
1651
  }
1632
1652
 
1633
- .fd-page-body pre code {
1653
+ #nd-docs-layout .fd-page-body pre code {
1634
1654
  background: transparent;
1635
1655
  border: none;
1636
1656
  padding: 0;
@@ -1640,36 +1660,36 @@ samp {
1640
1660
  }
1641
1661
 
1642
1662
  /* Shiki dual-theme: light uses inline styles, dark uses --shiki-dark vars */
1643
- .fd-page-body pre.shiki {
1663
+ #nd-docs-layout .fd-page-body pre.shiki {
1644
1664
  background-color: var(--color-fd-card) !important;
1645
1665
  }
1646
1666
 
1647
- .fd-page-body pre.shiki code {
1667
+ #nd-docs-layout .fd-page-body pre.shiki code {
1648
1668
  counter-reset: line;
1649
1669
  }
1650
1670
 
1651
- html.dark .shiki,
1652
- html.dark .shiki span {
1671
+ html.dark #nd-docs-layout .shiki,
1672
+ html.dark #nd-docs-layout .shiki span {
1653
1673
  color: var(--shiki-dark) !important;
1654
1674
  background-color: transparent !important;
1655
1675
  }
1656
1676
 
1657
- html.dark pre.shiki {
1677
+ html.dark #nd-docs-layout pre.shiki {
1658
1678
  background-color: var(--color-fd-card) !important;
1659
1679
  }
1660
1680
 
1661
1681
  /* ─── Code block wrapper + copy button ────────────────────────────────── */
1662
1682
 
1663
- .fd-codeblock {
1683
+ #nd-docs-layout .fd-codeblock {
1664
1684
  position: relative;
1665
1685
  margin: 16px 0;
1666
1686
  }
1667
1687
 
1668
- .fd-codeblock pre {
1688
+ #nd-docs-layout .fd-codeblock pre {
1669
1689
  margin: 0;
1670
1690
  }
1671
1691
 
1672
- .fd-codeblock-title {
1692
+ #nd-docs-layout .fd-codeblock-title {
1673
1693
  display: flex;
1674
1694
  align-items: center;
1675
1695
  gap: 8px;
@@ -1684,17 +1704,17 @@ html.dark pre.shiki {
1684
1704
  border-radius: var(--radius, 12px) var(--radius, 12px) 0 0;
1685
1705
  }
1686
1706
 
1687
- .fd-codeblock-title + .fd-copy-btn ~ pre {
1707
+ #nd-docs-layout .fd-codeblock-title + .fd-copy-btn ~ pre {
1688
1708
  border-top-left-radius: 0 !important;
1689
1709
  border-top-right-radius: 0 !important;
1690
1710
  }
1691
1711
 
1692
- .fd-codeblock:has(.fd-codeblock-title) pre {
1712
+ #nd-docs-layout .fd-codeblock:has(.fd-codeblock-title) pre {
1693
1713
  border-top-left-radius: 0 !important;
1694
1714
  border-top-right-radius: 0 !important;
1695
1715
  }
1696
1716
 
1697
- .fd-copy-btn {
1717
+ #nd-docs-layout .fd-copy-btn {
1698
1718
  position: absolute;
1699
1719
  top: 4px;
1700
1720
  right: 4px;
@@ -1717,23 +1737,23 @@ html.dark pre.shiki {
1717
1737
  background 0.15s;
1718
1738
  }
1719
1739
 
1720
- .fd-codeblock:hover .fd-copy-btn {
1740
+ #nd-docs-layout .fd-codeblock:hover .fd-copy-btn {
1721
1741
  opacity: 1;
1722
1742
  }
1723
1743
 
1724
- .fd-copy-btn:hover {
1744
+ #nd-docs-layout .fd-copy-btn:hover {
1725
1745
  color: var(--color-fd-foreground);
1726
1746
  background: var(--color-fd-accent);
1727
1747
  }
1728
1748
 
1729
- .fd-copy-btn-copied {
1749
+ #nd-docs-layout .fd-copy-btn-copied {
1730
1750
  color: hsl(142, 71%, 45%) !important;
1731
1751
  opacity: 1 !important;
1732
1752
  }
1733
1753
 
1734
1754
  /* ─── Tabs ────────────────────────────────────────────────────────────── */
1735
1755
 
1736
- .fd-tabs {
1756
+ #nd-docs-layout .fd-tabs {
1737
1757
  margin: 16px 0;
1738
1758
  border: 1px solid var(--color-fd-border);
1739
1759
  border-radius: 12px;
@@ -1742,14 +1762,14 @@ html.dark pre.shiki {
1742
1762
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
1743
1763
  }
1744
1764
 
1745
- .fd-tabs-list {
1765
+ #nd-docs-layout .fd-tabs-list {
1746
1766
  display: flex;
1747
1767
  border-bottom: 1px solid var(--color-fd-border);
1748
1768
  background: transparent;
1749
1769
  overflow-x: auto;
1750
1770
  }
1751
1771
 
1752
- .fd-tab-trigger {
1772
+ #nd-docs-layout .fd-tab-trigger {
1753
1773
  padding: 8px 14px;
1754
1774
  font-size: 13px;
1755
1775
  font-weight: 500;
@@ -1765,58 +1785,58 @@ html.dark pre.shiki {
1765
1785
  white-space: nowrap;
1766
1786
  }
1767
1787
 
1768
- .fd-tab-trigger:hover {
1788
+ #nd-docs-layout .fd-tab-trigger:hover {
1769
1789
  color: var(--color-fd-foreground);
1770
1790
  }
1771
1791
 
1772
- .fd-tab-trigger.fd-tab-active {
1792
+ #nd-docs-layout .fd-tab-trigger.fd-tab-active {
1773
1793
  color: var(--color-fd-foreground);
1774
1794
  font-weight: 600;
1775
1795
  border-bottom-color: var(--color-fd-primary);
1776
1796
  }
1777
1797
 
1778
- .fd-tab-panel {
1798
+ #nd-docs-layout .fd-tab-panel {
1779
1799
  display: none;
1780
1800
  }
1781
1801
 
1782
- .fd-tab-panel-active {
1802
+ #nd-docs-layout .fd-tab-panel-active {
1783
1803
  display: block;
1784
1804
  }
1785
1805
 
1786
- .fd-tab-panel .fd-codeblock {
1806
+ #nd-docs-layout .fd-tab-panel .fd-codeblock {
1787
1807
  margin: 0;
1788
1808
  }
1789
1809
 
1790
- .fd-tab-panel .fd-codeblock pre {
1810
+ #nd-docs-layout .fd-tab-panel .fd-codeblock pre {
1791
1811
  border: none;
1792
1812
  border-radius: 0;
1793
1813
  margin: 0;
1794
1814
  background: transparent !important;
1795
1815
  }
1796
1816
 
1797
- .fd-tab-panel .fd-copy-btn {
1817
+ #nd-docs-layout .fd-tab-panel .fd-copy-btn {
1798
1818
  top: 6px;
1799
1819
  right: 6px;
1800
1820
  }
1801
1821
 
1802
- .fd-page-body .fd-table-wrapper {
1822
+ #nd-docs-layout .fd-page-body .fd-table-wrapper {
1803
1823
  margin: 16px 0;
1804
1824
  overflow-x: auto;
1805
1825
  border: 1px solid var(--color-fd-border);
1806
1826
  border-radius: 8px;
1807
1827
  }
1808
1828
 
1809
- .fd-page-body table {
1829
+ #nd-docs-layout .fd-page-body table {
1810
1830
  width: 100%;
1811
1831
  border-collapse: collapse;
1812
1832
  font-size: 13px;
1813
1833
  }
1814
1834
 
1815
- .fd-page-body thead {
1835
+ #nd-docs-layout .fd-page-body thead {
1816
1836
  background: var(--color-fd-muted);
1817
1837
  }
1818
1838
 
1819
- .fd-page-body th {
1839
+ #nd-docs-layout .fd-page-body th {
1820
1840
  padding: 10px 16px;
1821
1841
  text-align: left;
1822
1842
  font-weight: 600;
@@ -1826,22 +1846,22 @@ html.dark pre.shiki {
1826
1846
  white-space: nowrap;
1827
1847
  }
1828
1848
 
1829
- .fd-page-body td {
1849
+ #nd-docs-layout .fd-page-body td {
1830
1850
  padding: 10px 16px;
1831
1851
  text-align: left;
1832
1852
  border-bottom: 1px solid var(--color-fd-border);
1833
1853
  color: var(--color-fd-foreground);
1834
1854
  }
1835
1855
 
1836
- .fd-page-body tbody tr:last-child td {
1856
+ #nd-docs-layout .fd-page-body tbody tr:last-child td {
1837
1857
  border-bottom: none;
1838
1858
  }
1839
1859
 
1840
- .fd-page-body tbody tr:hover {
1860
+ #nd-docs-layout .fd-page-body tbody tr:hover {
1841
1861
  background: var(--color-fd-accent);
1842
1862
  }
1843
1863
 
1844
- .fd-page-body td code {
1864
+ #nd-docs-layout .fd-page-body td code {
1845
1865
  font-size: 12px;
1846
1866
  padding: 1px 5px;
1847
1867
  background: var(--color-fd-secondary);
@@ -1850,7 +1870,7 @@ html.dark pre.shiki {
1850
1870
  white-space: nowrap;
1851
1871
  }
1852
1872
 
1853
- .fd-page-body img {
1873
+ #nd-docs-layout .fd-page-body img {
1854
1874
  max-width: 100%;
1855
1875
  border-radius: 8px;
1856
1876
  margin: 16px 0;
@@ -1858,13 +1878,13 @@ html.dark pre.shiki {
1858
1878
 
1859
1879
  /* ─── Animations ─────────────────────────────────────────────────────── */
1860
1880
 
1861
- .fd-toc-empty {
1881
+ #nd-docs-layout .fd-toc-empty {
1862
1882
  font-size: 13px;
1863
1883
  color: var(--color-fd-muted-foreground);
1864
1884
  padding: 4px 0;
1865
1885
  }
1866
1886
 
1867
- .fd-sidebar-folder-label {
1887
+ #nd-docs-layout .fd-sidebar-folder-label {
1868
1888
  display: flex;
1869
1889
  align-items: center;
1870
1890
  gap: 8px;
@@ -1892,7 +1912,7 @@ html.dark pre.shiki {
1892
1912
 
1893
1913
  /* ─── Callout / Admonition ──────────────────────────────────────────── */
1894
1914
 
1895
- .fd-callout {
1915
+ #nd-docs-layout .fd-callout {
1896
1916
  position: relative;
1897
1917
  display: flex;
1898
1918
  gap: 10px;
@@ -1906,7 +1926,7 @@ html.dark pre.shiki {
1906
1926
  overflow: hidden;
1907
1927
  }
1908
1928
 
1909
- .fd-callout-indicator {
1929
+ #nd-docs-layout .fd-callout-indicator {
1910
1930
  position: absolute;
1911
1931
  left: 0;
1912
1932
  top: 0;
@@ -1915,81 +1935,81 @@ html.dark pre.shiki {
1915
1935
  border-radius: 8px 0 0 8px;
1916
1936
  }
1917
1937
 
1918
- .fd-callout-note .fd-callout-indicator {
1938
+ #nd-docs-layout .fd-callout-note .fd-callout-indicator {
1919
1939
  background: hsl(221, 83%, 53%);
1920
1940
  }
1921
- .fd-callout-warning .fd-callout-indicator {
1941
+ #nd-docs-layout .fd-callout-warning .fd-callout-indicator {
1922
1942
  background: hsl(38, 92%, 50%);
1923
1943
  }
1924
- .fd-callout-tip .fd-callout-indicator {
1944
+ #nd-docs-layout .fd-callout-tip .fd-callout-indicator {
1925
1945
  background: hsl(142, 71%, 45%);
1926
1946
  }
1927
- .fd-callout-important .fd-callout-indicator {
1947
+ #nd-docs-layout .fd-callout-important .fd-callout-indicator {
1928
1948
  background: hsl(262, 83%, 58%);
1929
1949
  }
1930
- .fd-callout-caution .fd-callout-indicator {
1950
+ #nd-docs-layout .fd-callout-caution .fd-callout-indicator {
1931
1951
  background: hsl(0, 72%, 51%);
1932
1952
  }
1933
1953
 
1934
- .fd-callout-icon {
1954
+ #nd-docs-layout .fd-callout-icon {
1935
1955
  flex-shrink: 0;
1936
1956
  margin-top: 2px;
1937
1957
  }
1938
1958
 
1939
- .fd-callout-note .fd-callout-icon {
1959
+ #nd-docs-layout .fd-callout-note .fd-callout-icon {
1940
1960
  color: hsl(221, 83%, 53%);
1941
1961
  }
1942
- .fd-callout-warning .fd-callout-icon {
1962
+ #nd-docs-layout .fd-callout-warning .fd-callout-icon {
1943
1963
  color: hsl(38, 92%, 50%);
1944
1964
  }
1945
- .fd-callout-tip .fd-callout-icon {
1965
+ #nd-docs-layout .fd-callout-tip .fd-callout-icon {
1946
1966
  color: hsl(142, 71%, 45%);
1947
1967
  }
1948
- .fd-callout-important .fd-callout-icon {
1968
+ #nd-docs-layout .fd-callout-important .fd-callout-icon {
1949
1969
  color: hsl(262, 83%, 58%);
1950
1970
  }
1951
- .fd-callout-caution .fd-callout-icon {
1971
+ #nd-docs-layout .fd-callout-caution .fd-callout-icon {
1952
1972
  color: hsl(0, 72%, 51%);
1953
1973
  }
1954
1974
 
1955
- .fd-callout-content {
1975
+ #nd-docs-layout .fd-callout-content {
1956
1976
  flex: 1;
1957
1977
  min-width: 0;
1958
1978
  }
1959
1979
 
1960
- .fd-callout-title {
1980
+ #nd-docs-layout .fd-callout-title {
1961
1981
  font-weight: 600;
1962
1982
  font-size: 13px;
1963
1983
  }
1964
1984
 
1965
- .fd-callout-note .fd-callout-title {
1985
+ #nd-docs-layout .fd-callout-note .fd-callout-title {
1966
1986
  color: hsl(221, 83%, 53%);
1967
1987
  }
1968
- .fd-callout-warning .fd-callout-title {
1988
+ #nd-docs-layout .fd-callout-warning .fd-callout-title {
1969
1989
  color: hsl(38, 92%, 50%);
1970
1990
  }
1971
- .fd-callout-tip .fd-callout-title {
1991
+ #nd-docs-layout .fd-callout-tip .fd-callout-title {
1972
1992
  color: hsl(142, 71%, 45%);
1973
1993
  }
1974
- .fd-callout-important .fd-callout-title {
1994
+ #nd-docs-layout .fd-callout-important .fd-callout-title {
1975
1995
  color: hsl(262, 83%, 58%);
1976
1996
  }
1977
- .fd-callout-caution .fd-callout-title {
1997
+ #nd-docs-layout .fd-callout-caution .fd-callout-title {
1978
1998
  color: hsl(0, 72%, 51%);
1979
1999
  }
1980
2000
 
1981
- .fd-callout-content p:last-child {
2001
+ #nd-docs-layout .fd-callout-content p:last-child {
1982
2002
  margin-bottom: 0;
1983
2003
  }
1984
2004
 
1985
2005
  /* ─── Edit on GitHub ────────────────────────────────────────────────── */
1986
2006
 
1987
- .fd-page-footer {
2007
+ #nd-docs-layout .fd-page-footer {
1988
2008
  margin-top: auto;
1989
2009
  padding-top: 16px;
1990
2010
  }
1991
2011
 
1992
- .fd-edit-on-github {
2012
+ #nd-docs-layout .fd-edit-on-github {
1993
2013
  display: flex;
1994
2014
  flex-wrap: wrap;
1995
2015
  align-items: center;
@@ -2000,7 +2020,7 @@ html.dark pre.shiki {
2000
2020
  font-size: 13px;
2001
2021
  }
2002
2022
 
2003
- .fd-edit-on-github a {
2023
+ #nd-docs-layout .fd-edit-on-github a {
2004
2024
  display: inline-flex;
2005
2025
  align-items: center;
2006
2026
  gap: 6px;
@@ -2009,29 +2029,29 @@ html.dark pre.shiki {
2009
2029
  transition: color 0.15s;
2010
2030
  }
2011
2031
 
2012
- .fd-edit-on-github a:hover {
2032
+ #nd-docs-layout .fd-edit-on-github a:hover {
2013
2033
  color: var(--color-fd-foreground);
2014
2034
  }
2015
2035
 
2016
- .fd-last-modified {
2036
+ #nd-docs-layout .fd-last-modified {
2017
2037
  color: var(--color-fd-muted-foreground);
2018
2038
  font-size: var(--fd-small-size, 0.75rem);
2019
2039
  font-weight: var(--fd-small-weight, 400);
2020
2040
  }
2021
2041
 
2022
2042
  @media (max-width: 640px) {
2023
- .fd-last-modified {
2043
+ #nd-docs-layout .fd-last-modified {
2024
2044
  width: 100%;
2025
2045
  }
2026
2046
  }
2027
2047
 
2028
- .fd-llms-txt-links {
2048
+ #nd-docs-layout .fd-llms-txt-links {
2029
2049
  display: inline-flex;
2030
2050
  align-items: center;
2031
2051
  gap: 0.5rem;
2032
2052
  }
2033
2053
 
2034
- .fd-llms-txt-link {
2054
+ #nd-docs-layout .fd-llms-txt-link {
2035
2055
  color: var(--color-fd-muted-foreground);
2036
2056
  font-size: 0.75rem;
2037
2057
  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace);
@@ -2042,7 +2062,7 @@ html.dark pre.shiki {
2042
2062
  transition: color 150ms, border-color 150ms;
2043
2063
  }
2044
2064
 
2045
- .fd-llms-txt-link:hover {
2065
+ #nd-docs-layout .fd-llms-txt-link:hover {
2046
2066
  color: var(--color-fd-foreground);
2047
2067
  border-color: var(--color-fd-foreground);
2048
2068
  text-decoration: none;
@@ -2050,7 +2070,7 @@ html.dark pre.shiki {
2050
2070
 
2051
2071
  /* ─── Previous / Next Navigation ────────────────────────────────────── */
2052
2072
 
2053
- .fd-page-nav {
2073
+ #nd-docs-layout .fd-page-nav {
2054
2074
  display: grid;
2055
2075
  grid-template-columns: 1fr 1fr;
2056
2076
  gap: 16px;
@@ -2059,7 +2079,7 @@ html.dark pre.shiki {
2059
2079
  border-top: 1px solid var(--color-fd-border);
2060
2080
  }
2061
2081
 
2062
- .fd-page-nav-card {
2082
+ #nd-docs-layout .fd-page-nav-card {
2063
2083
  display: flex;
2064
2084
  flex-direction: column;
2065
2085
  gap: 4px;
@@ -2073,17 +2093,17 @@ html.dark pre.shiki {
2073
2093
  border-color 0.15s;
2074
2094
  }
2075
2095
 
2076
- .fd-page-nav-card:hover {
2096
+ #nd-docs-layout .fd-page-nav-card:hover {
2077
2097
  background: var(--color-fd-accent);
2078
2098
  border-color: var(--color-fd-border);
2079
2099
  }
2080
2100
 
2081
- .fd-page-nav-next {
2101
+ #nd-docs-layout .fd-page-nav-next {
2082
2102
  text-align: right;
2083
2103
  align-items: flex-end;
2084
2104
  }
2085
2105
 
2086
- .fd-page-nav-label {
2106
+ #nd-docs-layout .fd-page-nav-label {
2087
2107
  display: inline-flex;
2088
2108
  align-items: center;
2089
2109
  gap: 4px;
@@ -2094,7 +2114,7 @@ html.dark pre.shiki {
2094
2114
  letter-spacing: 0.05em;
2095
2115
  }
2096
2116
 
2097
- .fd-page-nav-title {
2117
+ #nd-docs-layout .fd-page-nav-title {
2098
2118
  font-size: 14px;
2099
2119
  font-weight: 600;
2100
2120
  color: var(--color-fd-foreground);
@@ -2102,14 +2122,14 @@ html.dark pre.shiki {
2102
2122
 
2103
2123
  /* ─── Sidebar icon ───────────────────────────────────────────────────── */
2104
2124
 
2105
- .fd-sidebar-icon {
2125
+ #nd-docs-layout .fd-sidebar-icon {
2106
2126
  display: inline-flex;
2107
2127
  align-items: center;
2108
2128
  flex-shrink: 0;
2109
2129
  opacity: 0.7;
2110
2130
  }
2111
2131
 
2112
- .fd-sidebar-link-active .fd-sidebar-icon {
2132
+ #nd-docs-layout .fd-sidebar-link-active .fd-sidebar-icon {
2113
2133
  opacity: 1;
2114
2134
  }
2115
2135
 
@@ -2159,7 +2179,7 @@ html.dark pre.shiki {
2159
2179
  }
2160
2180
  }
2161
2181
 
2162
- .fd-ai-overlay {
2182
+ #nd-docs-layout .fd-ai-overlay {
2163
2183
  position: fixed;
2164
2184
  inset: 0;
2165
2185
  z-index: 9998;
@@ -2169,7 +2189,7 @@ html.dark pre.shiki {
2169
2189
  animation: fd-ai-fade-in 150ms ease-out;
2170
2190
  }
2171
2191
 
2172
- .fd-ai-dialog {
2192
+ #nd-docs-layout .fd-ai-dialog {
2173
2193
  position: fixed;
2174
2194
  z-index: 9999;
2175
2195
  display: flex;
@@ -2185,7 +2205,7 @@ html.dark pre.shiki {
2185
2205
  font-family: var(--fd-font-sans, system-ui, -apple-system, sans-serif);
2186
2206
  }
2187
2207
 
2188
- .fd-ai-tab-bar {
2208
+ #nd-docs-layout .fd-ai-tab-bar {
2189
2209
  display: flex;
2190
2210
  align-items: stretch;
2191
2211
  gap: 0;
@@ -2194,7 +2214,7 @@ html.dark pre.shiki {
2194
2214
  background: var(--color-fd-card);
2195
2215
  }
2196
2216
 
2197
- .fd-ai-tab {
2217
+ #nd-docs-layout .fd-ai-tab {
2198
2218
  display: inline-flex;
2199
2219
  align-items: center;
2200
2220
  justify-content: center;
@@ -2216,27 +2236,27 @@ html.dark pre.shiki {
2216
2236
  position: relative;
2217
2237
  }
2218
2238
 
2219
- .fd-ai-tab svg {
2239
+ #nd-docs-layout .fd-ai-tab svg {
2220
2240
  opacity: 0.7;
2221
2241
  flex-shrink: 0;
2222
2242
  }
2223
2243
 
2224
- .fd-ai-tab[data-active="true"] {
2244
+ #nd-docs-layout .fd-ai-tab[data-active="true"] {
2225
2245
  color: var(--color-fd-foreground);
2226
2246
  border-bottom-color: var(--color-fd-primary);
2227
2247
  background: transparent;
2228
2248
  }
2229
2249
 
2230
- .fd-ai-tab[data-active="true"] svg {
2250
+ #nd-docs-layout .fd-ai-tab[data-active="true"] svg {
2231
2251
  opacity: 1;
2232
2252
  }
2233
2253
 
2234
- .fd-ai-tab:hover:not([data-active="true"]) {
2254
+ #nd-docs-layout .fd-ai-tab:hover:not([data-active="true"]) {
2235
2255
  color: var(--color-fd-foreground);
2236
2256
  background: var(--color-fd-accent);
2237
2257
  }
2238
2258
 
2239
- .fd-ai-esc {
2259
+ #nd-docs-layout .fd-ai-esc {
2240
2260
  padding: 2px 8px;
2241
2261
  border-radius: 6px;
2242
2262
  border: 1px solid var(--color-fd-border);
@@ -2249,7 +2269,7 @@ html.dark pre.shiki {
2249
2269
 
2250
2270
  /* ─── Header ─────────────────────────────────────────────────── */
2251
2271
 
2252
- .fd-ai-header {
2272
+ #nd-docs-layout .fd-ai-header {
2253
2273
  display: flex;
2254
2274
  align-items: center;
2255
2275
  gap: 8px;
@@ -2257,13 +2277,13 @@ html.dark pre.shiki {
2257
2277
  border-bottom: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.06));
2258
2278
  }
2259
2279
 
2260
- .fd-ai-header-title {
2280
+ #nd-docs-layout .fd-ai-header-title {
2261
2281
  font-size: 14px;
2262
2282
  font-weight: 600;
2263
2283
  flex: 1;
2264
2284
  }
2265
2285
 
2266
- .fd-ai-close-btn {
2286
+ #nd-docs-layout .fd-ai-close-btn {
2267
2287
  display: flex;
2268
2288
  align-items: center;
2269
2289
  justify-content: center;
@@ -2277,12 +2297,12 @@ html.dark pre.shiki {
2277
2297
  transition: all 150ms;
2278
2298
  }
2279
2299
 
2280
- .fd-ai-close-btn:hover {
2300
+ #nd-docs-layout .fd-ai-close-btn:hover {
2281
2301
  color: var(--color-fd-foreground, #e4e4e7);
2282
2302
  background: var(--color-fd-accent, rgba(255, 255, 255, 0.06));
2283
2303
  }
2284
2304
 
2285
- .fd-ai-search-wrap {
2305
+ #nd-docs-layout .fd-ai-search-wrap {
2286
2306
  display: flex;
2287
2307
  align-items: center;
2288
2308
  gap: 10px;
@@ -2291,12 +2311,12 @@ html.dark pre.shiki {
2291
2311
  color: var(--color-fd-muted-foreground);
2292
2312
  }
2293
2313
 
2294
- .fd-ai-search-wrap svg {
2314
+ #nd-docs-layout .fd-ai-search-wrap svg {
2295
2315
  flex-shrink: 0;
2296
2316
  opacity: 0.5;
2297
2317
  }
2298
2318
 
2299
- .fd-ai-input {
2319
+ #nd-docs-layout .fd-ai-input {
2300
2320
  flex: 1;
2301
2321
  background: transparent;
2302
2322
  border: none;
@@ -2306,19 +2326,19 @@ html.dark pre.shiki {
2306
2326
  font-family: inherit;
2307
2327
  }
2308
2328
 
2309
- .fd-ai-input::placeholder {
2329
+ #nd-docs-layout .fd-ai-input::placeholder {
2310
2330
  color: var(--color-fd-muted-foreground);
2311
2331
  opacity: 0.7;
2312
2332
  }
2313
2333
 
2314
- .fd-ai-results {
2334
+ #nd-docs-layout .fd-ai-results {
2315
2335
  flex: 1;
2316
2336
  overflow-y: auto;
2317
2337
  padding: 8px;
2318
2338
  max-height: 360px;
2319
2339
  }
2320
2340
 
2321
- .fd-ai-result {
2341
+ #nd-docs-layout .fd-ai-result {
2322
2342
  display: flex;
2323
2343
  align-items: center;
2324
2344
  gap: 10px;
@@ -2338,21 +2358,21 @@ html.dark pre.shiki {
2338
2358
  color: var(--color-fd-foreground);
2339
2359
  }
2340
2360
 
2341
- .fd-ai-result svg {
2361
+ #nd-docs-layout .fd-ai-result svg {
2342
2362
  flex-shrink: 0;
2343
2363
  opacity: 0.5;
2344
2364
  }
2345
2365
 
2346
- .fd-ai-result[data-active="true"] {
2366
+ #nd-docs-layout .fd-ai-result[data-active="true"] {
2347
2367
  background: var(--color-fd-accent);
2348
2368
  color: var(--color-fd-foreground);
2349
2369
  }
2350
2370
 
2351
- .fd-ai-result[data-active="true"] svg {
2371
+ #nd-docs-layout .fd-ai-result[data-active="true"] svg {
2352
2372
  opacity: 1;
2353
2373
  }
2354
2374
 
2355
- .fd-ai-result-empty {
2375
+ #nd-docs-layout .fd-ai-result-empty {
2356
2376
  padding: 48px 16px;
2357
2377
  text-align: center;
2358
2378
  color: var(--color-fd-muted-foreground);
@@ -2360,7 +2380,7 @@ html.dark pre.shiki {
2360
2380
  line-height: 1.6;
2361
2381
  }
2362
2382
 
2363
- .fd-ai-messages {
2383
+ #nd-docs-layout .fd-ai-messages {
2364
2384
  flex: 1;
2365
2385
  overflow-y: auto;
2366
2386
  padding: 12px 16px;
@@ -2369,7 +2389,7 @@ html.dark pre.shiki {
2369
2389
  gap: 16px;
2370
2390
  }
2371
2391
 
2372
- .fd-ai-empty {
2392
+ #nd-docs-layout .fd-ai-empty {
2373
2393
  display: flex;
2374
2394
  flex-direction: column;
2375
2395
  align-items: center;
@@ -2380,12 +2400,12 @@ html.dark pre.shiki {
2380
2400
  color: var(--color-fd-muted-foreground);
2381
2401
  }
2382
2402
 
2383
- .fd-ai-empty-title {
2403
+ #nd-docs-layout .fd-ai-empty-title {
2384
2404
  font-size: 14px;
2385
2405
  font-weight: 500;
2386
2406
  }
2387
2407
 
2388
- .fd-ai-empty-desc {
2408
+ #nd-docs-layout .fd-ai-empty-desc {
2389
2409
  font-size: 12px;
2390
2410
  opacity: 0.7;
2391
2411
  text-align: center;
@@ -2393,7 +2413,7 @@ html.dark pre.shiki {
2393
2413
  line-height: 1.5;
2394
2414
  }
2395
2415
 
2396
- .fd-ai-suggestions {
2416
+ #nd-docs-layout .fd-ai-suggestions {
2397
2417
  display: flex;
2398
2418
  flex-direction: column;
2399
2419
  gap: 6px;
@@ -2402,7 +2422,7 @@ html.dark pre.shiki {
2402
2422
  margin-top: 8px;
2403
2423
  }
2404
2424
 
2405
- .fd-ai-suggestion {
2425
+ #nd-docs-layout .fd-ai-suggestion {
2406
2426
  display: flex;
2407
2427
  align-items: center;
2408
2428
  gap: 8px;
@@ -2420,27 +2440,27 @@ html.dark pre.shiki {
2420
2440
  transition: all 150ms;
2421
2441
  }
2422
2442
 
2423
- .fd-ai-suggestion:hover {
2443
+ #nd-docs-layout .fd-ai-suggestion:hover {
2424
2444
  background: var(--color-fd-accent);
2425
2445
  border-color: var(--color-fd-ring);
2426
2446
  opacity: 1;
2427
2447
  }
2428
2448
 
2429
- .fd-ai-msg {
2449
+ #nd-docs-layout .fd-ai-msg {
2430
2450
  display: flex;
2431
2451
  flex-direction: column;
2432
2452
  gap: 4px;
2433
2453
  }
2434
2454
 
2435
- .fd-ai-msg[data-role="user"] {
2455
+ #nd-docs-layout .fd-ai-msg[data-role="user"] {
2436
2456
  align-items: flex-end;
2437
2457
  }
2438
2458
 
2439
- .fd-ai-msg[data-role="assistant"] {
2459
+ #nd-docs-layout .fd-ai-msg[data-role="assistant"] {
2440
2460
  align-items: flex-start;
2441
2461
  }
2442
2462
 
2443
- .fd-ai-msg-label {
2463
+ #nd-docs-layout .fd-ai-msg-label {
2444
2464
  font-size: 10px;
2445
2465
  font-weight: 500;
2446
2466
  text-transform: uppercase;
@@ -2449,7 +2469,7 @@ html.dark pre.shiki {
2449
2469
  padding: 0 2px;
2450
2470
  }
2451
2471
 
2452
- .fd-ai-bubble-user {
2472
+ #nd-docs-layout .fd-ai-bubble-user {
2453
2473
  background: var(--color-fd-primary);
2454
2474
  color: var(--color-fd-primary-foreground);
2455
2475
  padding: 8px 14px;
@@ -2460,7 +2480,7 @@ html.dark pre.shiki {
2460
2480
  word-break: break-word;
2461
2481
  }
2462
2482
 
2463
- .fd-ai-bubble-ai {
2483
+ #nd-docs-layout .fd-ai-bubble-ai {
2464
2484
  background: var(--color-fd-muted, rgba(255, 255, 255, 0.04));
2465
2485
  padding: 10px 14px;
2466
2486
  border-radius: var(--radius, 14px);
@@ -2476,12 +2496,12 @@ html.dark pre.shiki {
2476
2496
  to { opacity: 1; transform: translateY(0); }
2477
2497
  }
2478
2498
 
2479
- .fd-ai-chat-footer {
2499
+ #nd-docs-layout .fd-ai-chat-footer {
2480
2500
  padding: 8px 12px 12px;
2481
2501
  border-top: 1px solid var(--color-fd-border);
2482
2502
  }
2483
2503
 
2484
- .fd-ai-clear-btn {
2504
+ #nd-docs-layout .fd-ai-clear-btn {
2485
2505
  font-size: 11px;
2486
2506
  color: var(--color-fd-muted-foreground);
2487
2507
  background: transparent;
@@ -2492,11 +2512,11 @@ html.dark pre.shiki {
2492
2512
  font-family: inherit;
2493
2513
  }
2494
2514
 
2495
- .fd-ai-clear-btn:hover {
2515
+ #nd-docs-layout .fd-ai-clear-btn:hover {
2496
2516
  color: var(--color-fd-foreground);
2497
2517
  }
2498
2518
 
2499
- .fd-ai-input-wrap {
2519
+ #nd-docs-layout .fd-ai-input-wrap {
2500
2520
  display: flex;
2501
2521
  align-items: center;
2502
2522
  gap: 8px;
@@ -2506,7 +2526,7 @@ html.dark pre.shiki {
2506
2526
  border: 1px solid var(--color-fd-border);
2507
2527
  }
2508
2528
 
2509
- .fd-ai-send-btn {
2529
+ #nd-docs-layout .fd-ai-send-btn {
2510
2530
  display: flex;
2511
2531
  align-items: center;
2512
2532
  justify-content: center;
@@ -2520,13 +2540,13 @@ html.dark pre.shiki {
2520
2540
  color: var(--color-fd-muted-foreground);
2521
2541
  }
2522
2542
 
2523
- .fd-ai-send-btn[data-active="true"] {
2543
+ #nd-docs-layout .fd-ai-send-btn[data-active="true"] {
2524
2544
  cursor: pointer;
2525
2545
  background: var(--color-fd-primary);
2526
2546
  color: var(--color-fd-primary-foreground);
2527
2547
  }
2528
2548
 
2529
- .fd-ai-loader {
2549
+ #nd-docs-layout .fd-ai-loader {
2530
2550
  display: inline-flex;
2531
2551
  align-items: center;
2532
2552
  gap: 6px;
@@ -2538,7 +2558,7 @@ html.dark pre.shiki {
2538
2558
  to { opacity: 1; transform: translateY(0); }
2539
2559
  }
2540
2560
 
2541
- .fd-ai-loader-shimmer-text {
2561
+ #nd-docs-layout .fd-ai-loader-shimmer-text {
2542
2562
  font-size: 13px;
2543
2563
  font-weight: 500;
2544
2564
  background: linear-gradient(to right, var(--color-fd-muted-foreground, #888) 40%, var(--color-fd-foreground, #fff) 60%, var(--color-fd-muted-foreground, #888) 80%);
@@ -2554,13 +2574,13 @@ html.dark pre.shiki {
2554
2574
  100% { background-position: -150% center; }
2555
2575
  }
2556
2576
 
2557
- .fd-ai-loader-typing-dots {
2577
+ #nd-docs-layout .fd-ai-loader-typing-dots {
2558
2578
  display: inline-flex;
2559
2579
  align-items: center;
2560
2580
  gap: 2px;
2561
2581
  }
2562
2582
 
2563
- .fd-ai-loader-typing-dot {
2583
+ #nd-docs-layout .fd-ai-loader-typing-dot {
2564
2584
  width: 4px;
2565
2585
  height: 4px;
2566
2586
  border-radius: 50%;
@@ -2568,15 +2588,15 @@ html.dark pre.shiki {
2568
2588
  animation: fd-ai-typing 1s infinite;
2569
2589
  }
2570
2590
 
2571
- .fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
2572
- .fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
2591
+ #nd-docs-layout .fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
2592
+ #nd-docs-layout .fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
2573
2593
 
2574
2594
  @keyframes fd-ai-typing {
2575
2595
  0%, 100% { transform: translateY(0); opacity: 0.5; }
2576
2596
  50% { transform: translateY(-2px); opacity: 1; }
2577
2597
  }
2578
2598
 
2579
- .fd-ai-streaming::after {
2599
+ #nd-docs-layout .fd-ai-streaming::after {
2580
2600
  content: "";
2581
2601
  display: inline-block;
2582
2602
  width: 2px;
@@ -2594,7 +2614,7 @@ html.dark pre.shiki {
2594
2614
 
2595
2615
  /* ─── Markdown in AI responses ───────────────────────────────── */
2596
2616
 
2597
- .fd-ai-bubble-ai code {
2617
+ #nd-docs-layout .fd-ai-bubble-ai code {
2598
2618
  background: var(--color-fd-muted, #1a1a2e);
2599
2619
  padding: 2px 6px;
2600
2620
  border-radius: var(--radius, 4px);
@@ -2602,33 +2622,33 @@ html.dark pre.shiki {
2602
2622
  font-family: var(--fd-font-mono, ui-monospace, monospace);
2603
2623
  }
2604
2624
 
2605
- .fd-ai-bubble-ai a {
2625
+ #nd-docs-layout .fd-ai-bubble-ai a {
2606
2626
  color: var(--color-fd-primary, #6366f1);
2607
2627
  text-decoration: underline;
2608
2628
  }
2609
2629
 
2610
- .fd-ai-bubble-ai .fd-ai-code-block code {
2630
+ #nd-docs-layout .fd-ai-bubble-ai .fd-ai-code-block code {
2611
2631
  background: transparent;
2612
2632
  padding: 0;
2613
2633
  border-radius: 0;
2614
2634
  font-size: inherit;
2615
2635
  }
2616
2636
 
2617
- .fd-ai-bubble-ai table {
2637
+ #nd-docs-layout .fd-ai-bubble-ai table {
2618
2638
  width: 100%;
2619
2639
  border-collapse: collapse;
2620
2640
  margin: 8px 0;
2621
2641
  font-size: 13px;
2622
2642
  }
2623
2643
 
2624
- .fd-ai-bubble-ai th,
2625
- .fd-ai-bubble-ai td {
2644
+ #nd-docs-layout .fd-ai-bubble-ai th,
2645
+ #nd-docs-layout .fd-ai-bubble-ai td {
2626
2646
  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
2627
2647
  padding: 6px 12px;
2628
2648
  text-align: left;
2629
2649
  }
2630
2650
 
2631
- .fd-ai-bubble-ai th {
2651
+ #nd-docs-layout .fd-ai-bubble-ai th {
2632
2652
  background: var(--color-fd-muted, #1a1a2e);
2633
2653
  font-weight: 600;
2634
2654
  font-size: 12px;
@@ -2636,47 +2656,47 @@ html.dark pre.shiki {
2636
2656
 
2637
2657
  /* ─── Markdown prose inside AI bubbles (panel/modal/popover) ─────── */
2638
2658
 
2639
- .fd-ai-bubble-ai h2 {
2659
+ #nd-docs-layout .fd-ai-bubble-ai h2 {
2640
2660
  font-size: 1.125rem;
2641
2661
  font-weight: 600;
2642
2662
  margin: 12px 0 6px;
2643
2663
  line-height: 1.3;
2644
2664
  }
2645
2665
 
2646
- .fd-ai-bubble-ai h3 {
2666
+ #nd-docs-layout .fd-ai-bubble-ai h3 {
2647
2667
  font-size: 1rem;
2648
2668
  font-weight: 600;
2649
2669
  margin: 10px 0 4px;
2650
2670
  line-height: 1.4;
2651
2671
  }
2652
2672
 
2653
- .fd-ai-bubble-ai h4 {
2673
+ #nd-docs-layout .fd-ai-bubble-ai h4 {
2654
2674
  font-size: 0.9375rem;
2655
2675
  font-weight: 600;
2656
2676
  margin: 8px 0 4px;
2657
2677
  line-height: 1.4;
2658
2678
  }
2659
2679
 
2660
- .fd-ai-bubble-ai strong {
2680
+ #nd-docs-layout .fd-ai-bubble-ai strong {
2661
2681
  font-weight: 600;
2662
2682
  color: var(--color-fd-foreground, #e4e4e7);
2663
2683
  }
2664
2684
 
2665
- .fd-ai-bubble-ai em {
2685
+ #nd-docs-layout .fd-ai-bubble-ai em {
2666
2686
  font-style: italic;
2667
2687
  }
2668
2688
 
2669
- .fd-ai-bubble-ai p {
2689
+ #nd-docs-layout .fd-ai-bubble-ai p {
2670
2690
  margin: 0 0 6px;
2671
2691
  }
2672
2692
 
2673
- .fd-ai-bubble-ai br {
2693
+ #nd-docs-layout .fd-ai-bubble-ai br {
2674
2694
  content: "";
2675
2695
  display: block;
2676
2696
  margin-top: 2px;
2677
2697
  }
2678
2698
 
2679
- .fd-ai-bubble-ai pre {
2699
+ #nd-docs-layout .fd-ai-bubble-ai pre {
2680
2700
  margin: 8px 0;
2681
2701
  border-radius: 0;
2682
2702
  border: none;
@@ -2688,7 +2708,7 @@ html.dark pre.shiki {
2688
2708
  * Code blocks in AI chat — fd-ai-code-*
2689
2709
  * ═══════════════════════════════════════════════════════════════════ */
2690
2710
 
2691
- .fd-ai-code-block {
2711
+ #nd-docs-layout .fd-ai-code-block {
2692
2712
  --sh-class: #8be9fd;
2693
2713
  --sh-identifier: #c9d1d9;
2694
2714
  --sh-keyword: #ff7b72;
@@ -2707,7 +2727,7 @@ html.dark pre.shiki {
2707
2727
  overflow: hidden;
2708
2728
  }
2709
2729
 
2710
- .fd-ai-code-header {
2730
+ #nd-docs-layout .fd-ai-code-header {
2711
2731
  display: flex;
2712
2732
  align-items: center;
2713
2733
  justify-content: space-between;
@@ -2717,7 +2737,7 @@ html.dark pre.shiki {
2717
2737
  min-height: 32px;
2718
2738
  }
2719
2739
 
2720
- .fd-ai-code-lang {
2740
+ #nd-docs-layout .fd-ai-code-lang {
2721
2741
  font-size: 11px;
2722
2742
  font-family: var(--fd-font-mono, ui-monospace, monospace);
2723
2743
  color: var(--color-fd-muted-foreground, #71717a);
@@ -2725,7 +2745,7 @@ html.dark pre.shiki {
2725
2745
  letter-spacing: 0.04em;
2726
2746
  }
2727
2747
 
2728
- .fd-ai-code-copy {
2748
+ #nd-docs-layout .fd-ai-code-copy {
2729
2749
  font-size: 11px;
2730
2750
  font-family: var(--fd-font-mono, ui-monospace, monospace);
2731
2751
  color: var(--color-fd-muted-foreground, #71717a);
@@ -2737,7 +2757,7 @@ html.dark pre.shiki {
2737
2757
  transition: all 150ms;
2738
2758
  }
2739
2759
 
2740
- .fd-ai-code-copy:hover {
2760
+ #nd-docs-layout .fd-ai-code-copy:hover {
2741
2761
  color: var(--color-fd-foreground, #e4e4e7);
2742
2762
  background: color-mix(
2743
2763
  in srgb,
@@ -2746,7 +2766,7 @@ html.dark pre.shiki {
2746
2766
  );
2747
2767
  }
2748
2768
 
2749
- .fd-ai-code-block pre {
2769
+ #nd-docs-layout .fd-ai-code-block pre {
2750
2770
  margin: 0;
2751
2771
  padding: 12px 16px;
2752
2772
  overflow-x: auto;
@@ -2755,7 +2775,7 @@ html.dark pre.shiki {
2755
2775
  border-radius: 0;
2756
2776
  }
2757
2777
 
2758
- .fd-ai-code-block code {
2778
+ #nd-docs-layout .fd-ai-code-block code {
2759
2779
  font-size: 13px;
2760
2780
  line-height: 1.45;
2761
2781
  font-family: var(--fd-font-mono, ui-monospace, monospace);
@@ -2764,7 +2784,7 @@ html.dark pre.shiki {
2764
2784
  border-radius: 0;
2765
2785
  }
2766
2786
 
2767
- .fd-ai-code-block .sh__line {
2787
+ #nd-docs-layout .fd-ai-code-block .sh__line {
2768
2788
  display: block;
2769
2789
  min-height: 1.2em;
2770
2790
  }
@@ -2774,66 +2794,66 @@ html.dark pre.shiki {
2774
2794
  (matches Next.js fumadocs default.css)
2775
2795
  ═══════════════════════════════════════════════════════════════ */
2776
2796
 
2777
- .fd-ai-dialog {
2797
+ #nd-docs-layout .fd-ai-dialog {
2778
2798
  border-radius: 12px;
2779
2799
  box-shadow:
2780
2800
  0 20px 60px rgba(99, 102, 241, 0.08),
2781
2801
  0 8px 24px rgba(0, 0, 0, 0.12);
2782
2802
  }
2783
2803
 
2784
- .fd-ai-bubble-user {
2804
+ #nd-docs-layout .fd-ai-bubble-user {
2785
2805
  border-radius: 16px 16px 4px 16px;
2786
2806
  }
2787
2807
 
2788
- .fd-ai-bubble-ai {
2808
+ #nd-docs-layout .fd-ai-bubble-ai {
2789
2809
  border-radius: 16px 16px 16px 4px;
2790
2810
  }
2791
2811
 
2792
- .fd-ai-input-wrap {
2812
+ #nd-docs-layout .fd-ai-input-wrap {
2793
2813
  border-radius: 10px;
2794
2814
  }
2795
2815
 
2796
- .fd-ai-send-btn {
2816
+ #nd-docs-layout .fd-ai-send-btn {
2797
2817
  border-radius: 8px;
2798
2818
  }
2799
2819
 
2800
- .fd-ai-floating-btn {
2820
+ #nd-docs-layout .fd-ai-floating-btn {
2801
2821
  border-radius: 26px;
2802
2822
  }
2803
2823
 
2804
- .fd-ai-suggestion {
2824
+ #nd-docs-layout .fd-ai-suggestion {
2805
2825
  border-radius: 8px;
2806
2826
  }
2807
2827
 
2808
- .fd-ai-result {
2828
+ #nd-docs-layout .fd-ai-result {
2809
2829
  border-radius: 8px;
2810
2830
  }
2811
2831
 
2812
- .fd-ai-fm-input-container {
2832
+ #nd-docs-layout .fd-ai-fm-input-container {
2813
2833
  border-radius: 12px;
2814
2834
  }
2815
2835
 
2816
- .fd-ai-fm-send-btn {
2836
+ #nd-docs-layout .fd-ai-fm-send-btn {
2817
2837
  border-radius: 9999px;
2818
2838
  }
2819
2839
 
2820
- .fd-ai-fm-suggestion {
2840
+ #nd-docs-layout .fd-ai-fm-suggestion {
2821
2841
  border-radius: 9999px;
2822
2842
  }
2823
2843
 
2824
- .fd-ai-fm-trigger-btn {
2844
+ #nd-docs-layout .fd-ai-fm-trigger-btn {
2825
2845
  border-radius: 16px;
2826
2846
  }
2827
2847
 
2828
- .fd-ai-fm-close-btn {
2848
+ #nd-docs-layout .fd-ai-fm-close-btn {
2829
2849
  border-radius: 9999px;
2830
2850
  }
2831
2851
 
2832
- .fd-ai-code-block {
2852
+ #nd-docs-layout .fd-ai-code-block {
2833
2853
  border-radius: 8px;
2834
2854
  }
2835
2855
 
2836
- .fd-ai-code-copy {
2856
+ #nd-docs-layout .fd-ai-code-copy {
2837
2857
  border-radius: 4px;
2838
2858
  }
2839
2859
 
@@ -2844,7 +2864,7 @@ html.dark pre.shiki {
2844
2864
 
2845
2865
  /* ─── Floating trigger button ────────────────────────────────── */
2846
2866
 
2847
- .fd-ai-floating-btn {
2867
+ #nd-docs-layout .fd-ai-floating-btn {
2848
2868
  position: fixed;
2849
2869
  z-index: 9997;
2850
2870
  display: flex;
@@ -2869,37 +2889,41 @@ html.dark pre.shiki {
2869
2889
  animation: fd-ai-fade-in 300ms ease-out;
2870
2890
  }
2871
2891
 
2872
- .fd-ai-floating-btn:hover {
2892
+ #nd-docs-layout .fd-ai-floating-btn:hover {
2873
2893
  background: var(--color-fd-accent);
2874
2894
  color: var(--color-fd-accent-foreground);
2875
2895
  transform: scale(1.03);
2876
2896
  }
2877
2897
 
2878
- .fd-ai-floating-btn:active {
2898
+ #nd-docs-layout .fd-ai-floating-btn:active {
2879
2899
  transform: scale(0.97);
2880
2900
  }
2881
2901
 
2882
- .dark .fd-ai-floating-btn,
2883
- .dark .fd-ai-fm-trigger-btn {
2902
+ :is(html.dark, body.dark) #nd-docs-layout .fd-ai-floating-btn,
2903
+ #nd-docs-layout.dark .fd-ai-floating-btn,
2904
+ :is(html.dark, body.dark) #nd-docs-layout .fd-ai-fm-trigger-btn,
2905
+ #nd-docs-layout.dark .fd-ai-fm-trigger-btn {
2884
2906
  background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
2885
2907
  color: var(--color-fd-foreground, #e4e4e7);
2886
2908
  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
2887
2909
  }
2888
2910
 
2889
- .dark .fd-ai-floating-btn:hover,
2890
- .dark .fd-ai-fm-trigger-btn:hover {
2911
+ :is(html.dark, body.dark) #nd-docs-layout .fd-ai-floating-btn:hover,
2912
+ #nd-docs-layout.dark .fd-ai-floating-btn:hover,
2913
+ :is(html.dark, body.dark) #nd-docs-layout .fd-ai-fm-trigger-btn:hover,
2914
+ #nd-docs-layout.dark .fd-ai-fm-trigger-btn:hover {
2891
2915
  background: var(--color-fd-accent);
2892
2916
  color: var(--color-fd-accent-foreground);
2893
2917
  }
2894
2918
 
2895
- .fd-ai-floating-trigger {
2919
+ #nd-docs-layout .fd-ai-floating-trigger {
2896
2920
  position: fixed;
2897
2921
  z-index: 9997;
2898
2922
  cursor: pointer;
2899
2923
  animation: fd-ai-fade-in 300ms ease-out;
2900
2924
  }
2901
2925
 
2902
- .fd-ai-floating-trigger .ask-ai-trigger {
2926
+ #nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger {
2903
2927
  display: flex;
2904
2928
  align-items: center;
2905
2929
  justify-content: center;
@@ -2918,24 +2942,26 @@ html.dark pre.shiki {
2918
2942
  transition: transform 150ms, background 150ms, color 150ms;
2919
2943
  }
2920
2944
 
2921
- .dark .fd-ai-floating-trigger .ask-ai-trigger {
2945
+ :is(html.dark, body.dark) #nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger,
2946
+ #nd-docs-layout.dark .fd-ai-floating-trigger .ask-ai-trigger {
2922
2947
  background: color-mix(in srgb, var(--color-fd-secondary, rgba(255, 255, 255, 0.08)) 90%, transparent);
2923
2948
  color: var(--color-fd-foreground, #e4e4e7);
2924
2949
  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.12));
2925
2950
  }
2926
2951
 
2927
- .fd-ai-floating-trigger .ask-ai-trigger:hover {
2952
+ #nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger:hover {
2928
2953
  background: var(--color-fd-accent);
2929
2954
  color: var(--color-fd-accent-foreground);
2930
2955
  transform: scale(1.03);
2931
2956
  }
2932
2957
 
2933
- .dark .fd-ai-floating-trigger .ask-ai-trigger:hover {
2958
+ :is(html.dark, body.dark) #nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger:hover,
2959
+ #nd-docs-layout.dark .fd-ai-floating-trigger .ask-ai-trigger:hover {
2934
2960
  background: var(--color-fd-accent);
2935
2961
  color: var(--color-fd-accent-foreground);
2936
2962
  }
2937
2963
 
2938
- .fd-ai-floating-trigger .ask-ai-trigger:active {
2964
+ #nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger:active {
2939
2965
  transform: scale(0.97);
2940
2966
  }
2941
2967
 
@@ -2944,17 +2970,17 @@ html.dark pre.shiki {
2944
2970
  ═══════════════════════════════════════════════════════════════ */
2945
2971
 
2946
2972
  /* Fixed wrapper for trigger when closed — never morphs, so no "stuck" feel */
2947
- .fd-ai-fm-trigger-fixed {
2973
+ #nd-docs-layout .fd-ai-fm-trigger-fixed {
2948
2974
  position: fixed;
2949
2975
  z-index: 9997;
2950
2976
  animation: fd-ai-fade-in 200ms ease-out;
2951
2977
  }
2952
2978
 
2953
- .fd-ai-floating-trigger--static {
2979
+ #nd-docs-layout .fd-ai-floating-trigger--static {
2954
2980
  position: static;
2955
2981
  }
2956
2982
 
2957
- .fd-ai-fm-overlay {
2983
+ #nd-docs-layout .fd-ai-fm-overlay {
2958
2984
  position: fixed;
2959
2985
  inset: 0;
2960
2986
  display: flex;
@@ -2966,13 +2992,13 @@ html.dark pre.shiki {
2966
2992
  padding: 0 8px;
2967
2993
  }
2968
2994
 
2969
- .fd-ai-fm-overlay--animate {
2995
+ #nd-docs-layout .fd-ai-fm-overlay--animate {
2970
2996
  animation: fd-ai-fade-in 200ms ease-out;
2971
2997
  }
2972
2998
 
2973
2999
  /* ─── Top bar (close button) ─────────────────────────────────── */
2974
3000
 
2975
- .fd-ai-fm-topbar {
3001
+ #nd-docs-layout .fd-ai-fm-topbar {
2976
3002
  display: flex;
2977
3003
  justify-content: flex-end;
2978
3004
  align-items: center;
@@ -2983,7 +3009,7 @@ html.dark pre.shiki {
2983
3009
  z-index: 2;
2984
3010
  }
2985
3011
 
2986
- .fd-ai-fm-close-btn {
3012
+ #nd-docs-layout .fd-ai-fm-close-btn {
2987
3013
  display: flex;
2988
3014
  align-items: center;
2989
3015
  justify-content: center;
@@ -2997,13 +3023,13 @@ html.dark pre.shiki {
2997
3023
  transition: all 150ms;
2998
3024
  }
2999
3025
 
3000
- .fd-ai-fm-close-btn:hover {
3026
+ #nd-docs-layout .fd-ai-fm-close-btn:hover {
3001
3027
  background: var(--color-fd-accent, rgba(255, 255, 255, 0.1));
3002
3028
  }
3003
3029
 
3004
3030
  /* ─── Message list ───────────────────────────────────────────── */
3005
3031
 
3006
- .fd-ai-fm-messages {
3032
+ #nd-docs-layout .fd-ai-fm-messages {
3007
3033
  flex: 1;
3008
3034
  overflow-y: auto;
3009
3035
  width: min(800px, 100%);
@@ -3024,7 +3050,7 @@ html.dark pre.shiki {
3024
3050
  );
3025
3051
  }
3026
3052
 
3027
- .fd-ai-fm-messages-inner {
3053
+ #nd-docs-layout .fd-ai-fm-messages-inner {
3028
3054
  display: flex;
3029
3055
  flex-direction: column;
3030
3056
  gap: 20px;
@@ -3032,29 +3058,29 @@ html.dark pre.shiki {
3032
3058
 
3033
3059
  /* ─── Message ────────────────────────────────────────────────── */
3034
3060
 
3035
- .fd-ai-fm-msg {
3061
+ #nd-docs-layout .fd-ai-fm-msg {
3036
3062
  display: flex;
3037
3063
  flex-direction: column;
3038
3064
  }
3039
3065
 
3040
- .fd-ai-fm-msg-label {
3066
+ #nd-docs-layout .fd-ai-fm-msg-label {
3041
3067
  font-size: 13px;
3042
3068
  font-weight: 500;
3043
3069
  margin-bottom: 4px;
3044
3070
  color: var(--color-fd-muted-foreground, #71717a);
3045
3071
  }
3046
3072
 
3047
- .fd-ai-fm-msg-label[data-role="assistant"] {
3073
+ #nd-docs-layout .fd-ai-fm-msg-label[data-role="assistant"] {
3048
3074
  color: var(--color-fd-primary, #6366f1);
3049
3075
  }
3050
3076
 
3051
- .fd-ai-fm-msg-content {
3077
+ #nd-docs-layout .fd-ai-fm-msg-content {
3052
3078
  font-size: 14px;
3053
3079
  line-height: 1.7;
3054
3080
  color: var(--color-fd-foreground, #e4e4e7);
3055
3081
  }
3056
3082
 
3057
- .fd-ai-fm-msg-content code {
3083
+ #nd-docs-layout .fd-ai-fm-msg-content code {
3058
3084
  background: var(--color-fd-muted, #1a1a2e);
3059
3085
  padding: 2px 6px;
3060
3086
  border-radius: var(--radius, 4px);
@@ -3062,33 +3088,33 @@ html.dark pre.shiki {
3062
3088
  font-family: var(--fd-font-mono, ui-monospace, monospace);
3063
3089
  }
3064
3090
 
3065
- .fd-ai-fm-msg-content .fd-ai-code-block code {
3091
+ #nd-docs-layout .fd-ai-fm-msg-content .fd-ai-code-block code {
3066
3092
  background: transparent;
3067
3093
  padding: 0;
3068
3094
  border-radius: 0;
3069
3095
  font-size: inherit;
3070
3096
  }
3071
3097
 
3072
- .fd-ai-fm-msg-content a {
3098
+ #nd-docs-layout .fd-ai-fm-msg-content a {
3073
3099
  color: var(--color-fd-primary, #6366f1);
3074
3100
  text-decoration: underline;
3075
3101
  }
3076
3102
 
3077
- .fd-ai-fm-msg-content table {
3103
+ #nd-docs-layout .fd-ai-fm-msg-content table {
3078
3104
  width: 100%;
3079
3105
  border-collapse: collapse;
3080
3106
  margin: 8px 0;
3081
3107
  font-size: 13px;
3082
3108
  }
3083
3109
 
3084
- .fd-ai-fm-msg-content th,
3085
- .fd-ai-fm-msg-content td {
3110
+ #nd-docs-layout .fd-ai-fm-msg-content th,
3111
+ #nd-docs-layout .fd-ai-fm-msg-content td {
3086
3112
  border: 1px solid var(--color-fd-border, rgba(255, 255, 255, 0.1));
3087
3113
  padding: 6px 12px;
3088
3114
  text-align: left;
3089
3115
  }
3090
3116
 
3091
- .fd-ai-fm-msg-content th {
3117
+ #nd-docs-layout .fd-ai-fm-msg-content th {
3092
3118
  background: var(--color-fd-muted, #1a1a2e);
3093
3119
  font-weight: 600;
3094
3120
  font-size: 12px;
@@ -3096,47 +3122,47 @@ html.dark pre.shiki {
3096
3122
 
3097
3123
  /* ─── Markdown prose inside full-modal messages ──────────────────── */
3098
3124
 
3099
- .fd-ai-fm-msg-content h2 {
3125
+ #nd-docs-layout .fd-ai-fm-msg-content h2 {
3100
3126
  font-size: 1.25rem;
3101
3127
  font-weight: 600;
3102
3128
  margin: 16px 0 8px;
3103
3129
  line-height: 1.3;
3104
3130
  }
3105
3131
 
3106
- .fd-ai-fm-msg-content h3 {
3132
+ #nd-docs-layout .fd-ai-fm-msg-content h3 {
3107
3133
  font-size: 1.0625rem;
3108
3134
  font-weight: 600;
3109
3135
  margin: 12px 0 6px;
3110
3136
  line-height: 1.4;
3111
3137
  }
3112
3138
 
3113
- .fd-ai-fm-msg-content h4 {
3139
+ #nd-docs-layout .fd-ai-fm-msg-content h4 {
3114
3140
  font-size: 1rem;
3115
3141
  font-weight: 600;
3116
3142
  margin: 10px 0 4px;
3117
3143
  line-height: 1.4;
3118
3144
  }
3119
3145
 
3120
- .fd-ai-fm-msg-content strong {
3146
+ #nd-docs-layout .fd-ai-fm-msg-content strong {
3121
3147
  font-weight: 600;
3122
3148
  color: var(--color-fd-foreground, #e4e4e7);
3123
3149
  }
3124
3150
 
3125
- .fd-ai-fm-msg-content em {
3151
+ #nd-docs-layout .fd-ai-fm-msg-content em {
3126
3152
  font-style: italic;
3127
3153
  }
3128
3154
 
3129
- .fd-ai-fm-msg-content p {
3155
+ #nd-docs-layout .fd-ai-fm-msg-content p {
3130
3156
  margin: 0 0 8px;
3131
3157
  }
3132
3158
 
3133
- .fd-ai-fm-msg-content br {
3159
+ #nd-docs-layout .fd-ai-fm-msg-content br {
3134
3160
  content: "";
3135
3161
  display: block;
3136
3162
  margin-top: 2px;
3137
3163
  }
3138
3164
 
3139
- .fd-ai-fm-msg-content pre {
3165
+ #nd-docs-layout .fd-ai-fm-msg-content pre {
3140
3166
  margin: 8px 0;
3141
3167
  border-radius: 0;
3142
3168
  border: none;
@@ -3148,12 +3174,12 @@ html.dark pre.shiki {
3148
3174
 
3149
3175
  /* ─── Bottom input bar ───────────────────────────────────────── */
3150
3176
 
3151
- .fd-ai-fm-input-bar {
3177
+ #nd-docs-layout .fd-ai-fm-input-bar {
3152
3178
  position: fixed;
3153
3179
  z-index: 9999;
3154
3180
  }
3155
3181
 
3156
- .fd-ai-fm-input-bar--open {
3182
+ #nd-docs-layout .fd-ai-fm-input-bar--open {
3157
3183
  bottom: 16px;
3158
3184
  left: 50%;
3159
3185
  transform: translateX(-50%);
@@ -3161,7 +3187,7 @@ html.dark pre.shiki {
3161
3187
  animation: fd-ai-fade-in 200ms ease-out;
3162
3188
  }
3163
3189
 
3164
- .fd-ai-fm-input-container {
3190
+ #nd-docs-layout .fd-ai-fm-input-container {
3165
3191
  display: flex;
3166
3192
  flex-direction: column;
3167
3193
  border-radius: var(--radius, 12px);
@@ -3171,13 +3197,13 @@ html.dark pre.shiki {
3171
3197
  overflow: hidden;
3172
3198
  }
3173
3199
 
3174
- .fd-ai-fm-input-wrap {
3200
+ #nd-docs-layout .fd-ai-fm-input-wrap {
3175
3201
  display: flex;
3176
3202
  align-items: flex-start;
3177
3203
  padding-right: 8px;
3178
3204
  }
3179
3205
 
3180
- .fd-ai-fm-input {
3206
+ #nd-docs-layout .fd-ai-fm-input {
3181
3207
  flex: 1;
3182
3208
  padding: 16px;
3183
3209
  background: transparent;
@@ -3192,11 +3218,11 @@ html.dark pre.shiki {
3192
3218
  max-height: 120px;
3193
3219
  }
3194
3220
 
3195
- .fd-ai-fm-input::placeholder {
3221
+ #nd-docs-layout .fd-ai-fm-input::placeholder {
3196
3222
  color: var(--color-fd-muted-foreground, #71717a);
3197
3223
  }
3198
3224
 
3199
- .fd-ai-fm-send-btn {
3225
+ #nd-docs-layout .fd-ai-fm-send-btn {
3200
3226
  display: flex;
3201
3227
  align-items: center;
3202
3228
  justify-content: center;
@@ -3211,7 +3237,7 @@ html.dark pre.shiki {
3211
3237
  color: var(--color-fd-muted-foreground, #71717a);
3212
3238
  }
3213
3239
 
3214
- .fd-ai-fm-send-btn[data-active="true"] {
3240
+ #nd-docs-layout .fd-ai-fm-send-btn[data-active="true"] {
3215
3241
  cursor: pointer;
3216
3242
  background: var(--color-fd-primary, #6366f1);
3217
3243
  color: var(--color-fd-primary-foreground, #fff);
@@ -3219,18 +3245,18 @@ html.dark pre.shiki {
3219
3245
 
3220
3246
  /* ─── Suggestions (horizontal pills) ────────────────────────── */
3221
3247
 
3222
- .fd-ai-fm-suggestions-area {
3248
+ #nd-docs-layout .fd-ai-fm-suggestions-area {
3223
3249
  padding: 12px 16px 4px;
3224
3250
  }
3225
3251
 
3226
- .fd-ai-fm-suggestions-label {
3252
+ #nd-docs-layout .fd-ai-fm-suggestions-label {
3227
3253
  font-size: 12px;
3228
3254
  font-weight: 500;
3229
3255
  color: var(--color-fd-muted-foreground, #71717a);
3230
3256
  margin-bottom: 8px;
3231
3257
  }
3232
3258
 
3233
- .fd-ai-fm-suggestions {
3259
+ #nd-docs-layout .fd-ai-fm-suggestions {
3234
3260
  display: flex;
3235
3261
  gap: 8px;
3236
3262
  overflow-x: auto;
@@ -3251,7 +3277,7 @@ html.dark pre.shiki {
3251
3277
  );
3252
3278
  }
3253
3279
 
3254
- .fd-ai-fm-suggestion {
3280
+ #nd-docs-layout .fd-ai-fm-suggestion {
3255
3281
  flex-shrink: 0;
3256
3282
  white-space: nowrap;
3257
3283
  padding: 6px 14px;
@@ -3266,7 +3292,7 @@ html.dark pre.shiki {
3266
3292
  transition: all 200ms;
3267
3293
  }
3268
3294
 
3269
- .fd-ai-fm-suggestion:hover {
3295
+ #nd-docs-layout .fd-ai-fm-suggestion:hover {
3270
3296
  background: color-mix(in srgb, var(--color-fd-muted, rgba(255, 255, 255, 0.04)) 50%, transparent);
3271
3297
  color: var(--color-fd-foreground, #e4e4e7);
3272
3298
  border-color: var(--color-fd-border, rgba(255, 255, 255, 0.1));
@@ -3274,7 +3300,7 @@ html.dark pre.shiki {
3274
3300
 
3275
3301
  /* ─── Footer bar ─────────────────────────────────────────────── */
3276
3302
 
3277
- .fd-ai-fm-footer-bar {
3303
+ #nd-docs-layout .fd-ai-fm-footer-bar {
3278
3304
  display: flex;
3279
3305
  align-items: center;
3280
3306
  gap: 4px;
@@ -3289,7 +3315,7 @@ html.dark pre.shiki {
3289
3315
  color: var(--color-fd-muted-foreground, #71717a);
3290
3316
  }
3291
3317
 
3292
- .fd-ai-fm-clear-btn {
3318
+ #nd-docs-layout .fd-ai-fm-clear-btn {
3293
3319
  display: flex;
3294
3320
  align-items: center;
3295
3321
  gap: 4px;
@@ -3303,22 +3329,22 @@ html.dark pre.shiki {
3303
3329
  padding: 0;
3304
3330
  }
3305
3331
 
3306
- .fd-ai-fm-clear-btn:hover {
3332
+ #nd-docs-layout .fd-ai-fm-clear-btn:hover {
3307
3333
  color: var(--color-fd-foreground, #e4e4e7);
3308
3334
  }
3309
3335
 
3310
- .fd-ai-fm-clear-btn[aria-disabled="true"] {
3336
+ #nd-docs-layout .fd-ai-fm-clear-btn[aria-disabled="true"] {
3311
3337
  opacity: 0.5;
3312
3338
  cursor: not-allowed;
3313
3339
  }
3314
3340
 
3315
- .fd-ai-fm-footer-hint {
3341
+ #nd-docs-layout .fd-ai-fm-footer-hint {
3316
3342
  flex: 1;
3317
3343
  }
3318
3344
 
3319
3345
  /* ─── Closed trigger button ──────────────────────────────────── */
3320
3346
 
3321
- .fd-ai-fm-trigger-btn {
3347
+ #nd-docs-layout .fd-ai-fm-trigger-btn {
3322
3348
  display: flex;
3323
3349
  align-items: center;
3324
3350
  justify-content: center;
@@ -3342,12 +3368,12 @@ html.dark pre.shiki {
3342
3368
  white-space: nowrap;
3343
3369
  }
3344
3370
 
3345
- .fd-ai-fm-trigger-btn:hover {
3371
+ #nd-docs-layout .fd-ai-fm-trigger-btn:hover {
3346
3372
  background: var(--color-fd-accent);
3347
3373
  color: var(--color-fd-accent-foreground);
3348
3374
  transform: scale(1.03);
3349
3375
  }
3350
3376
 
3351
- .fd-ai-fm-trigger-btn:active {
3377
+ #nd-docs-layout .fd-ai-fm-trigger-btn:active {
3352
3378
  transform: scale(0.97);
3353
3379
  }