@farming-labs/svelte-theme 0.2.5 → 0.2.7

package/styles/pixel-border.css

@@ -6,7 +6,8 @@
 
 /* ─── Color Tokens (light) ───────────────────────────────────────── */
 
-:root {
+body:has(#nd-docs-layout),
+#nd-docs-layout {
   --color-fd-background: oklch(1 0 0);
   --color-fd-foreground: oklch(0.147 0.004 49.25);
   --color-fd-card: oklch(0.985 0.001 106.423);
@@ -34,7 +35,11 @@
 
 /* ─── Color Tokens (dark) ────────────────────────────────────────── */
 
-.dark {
+html.dark body:has(#nd-docs-layout),
+body.dark:has(#nd-docs-layout),
+body:has(#nd-docs-layout.dark),
+:is(html.dark, body.dark) #nd-docs-layout,
+#nd-docs-layout.dark {
   --color-fd-background: hsl(0 0% 2%);
   --color-fd-foreground: oklch(0.985 0.001 106.423);
   --color-fd-card: hsl(0 0% 4%);
@@ -58,94 +63,102 @@
 
 /* ─── Scroll (light + dark) ──────────────────────────────────────── */
 
-html {
+#nd-docs-layout {
   scroll-behavior: auto;
   scroll-padding-top: calc(
     var(--fd-nav-height, 56px) + var(--fd-banner-height, 0px) + var(--fd-tocnav-height, 0px) + 24px
   );
 }
 
-html:not([data-anchor-scrolling]) {
+html:not([data-anchor-scrolling]) #nd-docs-layout {
   scroll-behavior: smooth;
 }
 
 /* ─── Custom scrollbar (light + dark) ─────────────────────────────── */
 
-* {
+#nd-docs-layout,
+#nd-docs-layout * {
   scrollbar-width: thin;
   scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
 }
 
-::-webkit-scrollbar {
+#nd-docs-layout::-webkit-scrollbar,
+#nd-docs-layout *::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
 
-::-webkit-scrollbar-track {
+#nd-docs-layout::-webkit-scrollbar-track,
+#nd-docs-layout *::-webkit-scrollbar-track {
   background: var(--scrollbar-track);
 }
 
-::-webkit-scrollbar-thumb {
+#nd-docs-layout::-webkit-scrollbar-thumb,
+#nd-docs-layout *::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb);
   border-radius: 9999px;
   border: 3px solid transparent;
   background-clip: content-box;
 }
 
-::-webkit-scrollbar-thumb:hover {
+#nd-docs-layout::-webkit-scrollbar-thumb:hover,
+#nd-docs-layout *::-webkit-scrollbar-thumb:hover {
   background-color: var(--scrollbar-thumb-hover);
 }
 
-::-webkit-scrollbar-corner {
+#nd-docs-layout::-webkit-scrollbar-corner,
+#nd-docs-layout *::-webkit-scrollbar-corner {
   background: transparent;
 }
 
 /* ─── Selection (light + dark) ───────────────────────────────────── */
 
-body {
+body:has(#nd-docs-layout),
+#nd-docs-layout {
   overscroll-behavior: none;
 }
 
-::selection {
+#nd-docs-layout::selection,
+#nd-docs-layout *::selection {
   background: var(--color-fd-foreground);
   color: var(--color-fd-background);
 }
 
 /* ─── Inline code word break ─────────────────────────────────────── */
 
-code:not(pre code) {
+#nd-docs-layout code:not(pre code) {
   overflow-wrap: break-word;
   word-break: break-word;
 }
 
 /* ─── Sharp corners everywhere (both modes) ──────────────────────── */
 
-.fd-sidebar-search-btn,
-.fd-search-dialog,
-.fd-search-overlay .fd-search-dialog,
-.fd-search-result,
-.fd-codeblock,
-.fd-codeblock pre,
-.fd-codeblock-title,
-.fd-tabs,
-.fd-tab-trigger,
-.fd-tab-panel,
-.fd-callout,
-.fd-page-nav-card,
-.fd-table-wrapper,
-.fd-copy-btn,
-.fd-sidebar-search-btn kbd,
-.fd-sidebar-collapse-btn,
-.fd-theme-toggle {
+#nd-docs-layout .fd-sidebar-search-btn,
+#nd-docs-layout .fd-search-dialog,
+#nd-docs-layout .fd-search-overlay .fd-search-dialog,
+#nd-docs-layout .fd-search-result,
+#nd-docs-layout .fd-codeblock,
+#nd-docs-layout .fd-codeblock pre,
+#nd-docs-layout .fd-codeblock-title,
+#nd-docs-layout .fd-tabs,
+#nd-docs-layout .fd-tab-trigger,
+#nd-docs-layout .fd-tab-panel,
+#nd-docs-layout .fd-callout,
+#nd-docs-layout .fd-page-nav-card,
+#nd-docs-layout .fd-table-wrapper,
+#nd-docs-layout .fd-copy-btn,
+#nd-docs-layout .fd-sidebar-search-btn kbd,
+#nd-docs-layout .fd-sidebar-collapse-btn,
+#nd-docs-layout .fd-theme-toggle {
   border-radius: 0 !important;
 }
 
 /* ─── Docs grid: sidebar (sticky left, full height) — no clipping ─────── */
 @media (min-width: 1024px) {
-  .fd-layout {
+  #nd-docs-layout {
     grid-template-columns: var(--fd-sidebar-width) minmax(0, 1fr);
   }
-  .fd-sidebar {
+  #nd-docs-layout .fd-sidebar {
     position: sticky;
     top: 0;
     align-self: start;
@@ -153,16 +166,16 @@ code:not(pre code) {
     height: 100%;
   }
 
-  .fd-main {
+  #nd-docs-layout .fd-main {
     min-width: 0;
   }
 
-  .fd-page {
+  #nd-docs-layout .fd-page {
     grid-template-columns: minmax(0, 1fr) var(--fd-toc-width);
   }
 
-  .fd-page-article,
-  .fd-page-body {
+  #nd-docs-layout .fd-page-article,
+#nd-docs-layout .fd-page-body {
     max-width: none;
     margin-inline: 0;
   }
@@ -170,7 +183,7 @@ code:not(pre code) {
 
 /* ─── Mobile: ensure sidebar drawer/content isn't clipped ───────────────── */
 @media (max-width: 1023px) {
-  .fd-sidebar {
+  #nd-docs-layout .fd-sidebar {
     max-height: none;
     overflow-y: visible;
   }
@@ -179,8 +192,8 @@ code:not(pre code) {
 /* ─── Sidebar (pixel-border style — BOTH light and dark) ─────────── */
 
 /* Full-width border separators between top-level items */
-.fd-sidebar-top-link,
-.fd-sidebar-nav > .fd-sidebar-folder {
+#nd-docs-layout .fd-sidebar-top-link,
+#nd-docs-layout .fd-sidebar-nav > .fd-sidebar-folder {
   border-top: 1px solid var(--color-fd-border);
   margin-left: -12px;
   margin-right: -12px;
@@ -188,7 +201,7 @@ code:not(pre code) {
   padding-right: 12px;
 }
 
-.fd-sidebar-folder-content::before {
+#nd-docs-layout .fd-sidebar-folder-content::before {
   content: "";
   position: absolute;
   left: 4px;
@@ -198,16 +211,16 @@ code:not(pre code) {
   background: var(--color-fd-border);
 }
 
-.fd-sidebar-top-link.fd-sidebar-first-item,
-.fd-sidebar-folder.fd-sidebar-first-item {
+#nd-docs-layout .fd-sidebar-top-link.fd-sidebar-first-item,
+#nd-docs-layout .fd-sidebar-folder.fd-sidebar-first-item {
   border-top: none;
 }
 
-.fd-sidebar-top-link:last-child,
-.fd-sidebar-nav > .fd-sidebar-folder:last-child {
+#nd-docs-layout .fd-sidebar-top-link:last-child,
+#nd-docs-layout .fd-sidebar-nav > .fd-sidebar-folder:last-child {
   border-bottom: 1px solid var(--color-fd-border);
 }
-.fd-sidebar-folder-content::before {
+#nd-docs-layout .fd-sidebar-folder-content::before {
   content: "";
   position: absolute;
   left: -4px;
@@ -219,7 +232,7 @@ code:not(pre code) {
 }
 
 /* Folder trigger — extend to full sidebar width */
-.fd-sidebar-nav > .fd-sidebar-folder > .fd-sidebar-folder-trigger {
+#nd-docs-layout .fd-sidebar-nav > .fd-sidebar-folder > .fd-sidebar-folder-trigger {
   margin-left: -12px;
   margin-right: -12px;
   padding-left: 12px;
@@ -227,7 +240,7 @@ code:not(pre code) {
 }
 
 /* All sidebar links — sharp corners, transparent bg */
-.fd-sidebar-link {
+#nd-docs-layout .fd-sidebar-link {
   font-size: 0.875rem;
   line-height: 1.6;
   border-radius: 0 !important;
@@ -238,89 +251,99 @@ code:not(pre code) {
   color: var(--color-fd-muted-foreground);
 }
 
-.fd-sidebar-link:hover {
+#nd-docs-layout .fd-sidebar-link:hover {
   background: transparent !important;
   background-color: transparent !important;
   color: var(--color-fd-foreground);
 }
 
-.fd-sidebar-link-active,
-.fd-sidebar-link[data-active="true"] {
+#nd-docs-layout .fd-sidebar-link-active,
+#nd-docs-layout .fd-sidebar-link[data-active="true"] {
   color: var(--color-fd-foreground) !important;
   font-weight: 600;
   background: transparent !important;
   background-color: transparent !important;
 }
 
-.fd-sidebar-link-active:hover,
-.fd-sidebar-link[data-active="true"]:hover {
+#nd-docs-layout .fd-sidebar-link-active:hover,
+#nd-docs-layout .fd-sidebar-link[data-active="true"]:hover {
   background: transparent !important;
   background-color: transparent !important;
 }
 
 /* Folder triggers — sharp corners, transparent bg */
-.fd-sidebar-folder-trigger {
+#nd-docs-layout .fd-sidebar-folder-trigger {
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 0 !important;
 }
 
-.fd-sidebar-folder-trigger:hover {
+#nd-docs-layout .fd-sidebar-folder-trigger:hover {
   background: transparent !important;
 }
 
 /* Child links — smaller, inside folder content */
-.fd-sidebar-child-link {
+#nd-docs-layout .fd-sidebar-child-link {
   font-size: 0.785rem !important;
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
 }
 
-.fd-sidebar-child-link.fd-sidebar-link-active {
+#nd-docs-layout .fd-sidebar-child-link.fd-sidebar-link-active {
   font-weight: 600 !important;
 }
 
 /* Dark mode — specific color overrides */
-.dark .fd-sidebar {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar,
+#nd-docs-layout.dark .fd-sidebar {
   background: hsl(0 0% 2%);
   border-color: hsl(0 0% 12%);
 }
 
-.dark .fd-sidebar-link {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-link,
+#nd-docs-layout.dark .fd-sidebar-link {
   color: hsl(0 0% 50%);
 }
 
-.dark .fd-sidebar-link:hover {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-link:hover,
+#nd-docs-layout.dark .fd-sidebar-link:hover {
   color: hsl(0 0% 80%);
 }
 
-.dark .fd-sidebar-folder-trigger {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-folder-trigger,
+#nd-docs-layout.dark .fd-sidebar-folder-trigger {
   color: hsl(0 0% 90%);
 }
 
-.dark .fd-sidebar-folder-trigger:hover {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-folder-trigger:hover,
+#nd-docs-layout.dark .fd-sidebar-folder-trigger:hover {
   color: hsl(0 0% 100%);
 }
 
-.dark .fd-sidebar-link-active,
-.dark .fd-sidebar-link[data-active="true"] {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-link-active,
+#nd-docs-layout.dark .fd-sidebar-link-active,
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-link[data-active="true"],
+#nd-docs-layout.dark .fd-sidebar-link[data-active="true"] {
   color: var(--color-fd-primary, hsl(0 0% 95%)) !important;
 }
 
-.dark .fd-sidebar-child-link {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-child-link,
+#nd-docs-layout.dark .fd-sidebar-child-link {
   color: hsl(0 0% 45%) !important;
 }
 
-.dark .fd-sidebar-child-link:hover {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-child-link:hover,
+#nd-docs-layout.dark .fd-sidebar-child-link:hover {
   color: hsl(0 0% 75%) !important;
 }
 
-.dark .fd-sidebar-child-link.fd-sidebar-link-active {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-child-link.fd-sidebar-link-active,
+#nd-docs-layout.dark .fd-sidebar-child-link.fd-sidebar-link-active {
   color: var(--color-fd-primary, hsl(0 0% 95%)) !important;
 }
 
 /* Active indicator bar for child links */
-.fd-sidebar-folder-content .fd-sidebar-link-active::before {
+#nd-docs-layout .fd-sidebar-folder-content .fd-sidebar-link-active::before {
   content: "";
   position: absolute;
   left: -16px;
@@ -331,24 +354,25 @@ code:not(pre code) {
   border-radius: 0;
 }
 
-.dark .fd-sidebar-folder-content .fd-sidebar-link-active::before {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-folder-content .fd-sidebar-link-active::before,
+#nd-docs-layout.dark .fd-sidebar-folder-content .fd-sidebar-link-active::before {
   background: var(--color-fd-primary, hsl(0 0% 95%));
 }
 
 /* Sidebar icon */
-.fd-sidebar-icon {
+#nd-docs-layout .fd-sidebar-icon {
   display: inline-flex;
   align-items: center;
   flex-shrink: 0;
   opacity: 0.7;
 }
 
-.fd-sidebar-link-active .fd-sidebar-icon {
+#nd-docs-layout .fd-sidebar-link-active .fd-sidebar-icon {
   opacity: 1;
 }
 
 /* Sidebar search button — full-width, border-y */
-.fd-sidebar-search-btn {
+#nd-docs-layout .fd-sidebar-search-btn {
   background: transparent !important;
   border: none !important;
   border-top: 1px solid var(--color-fd-border) !important;
@@ -356,7 +380,7 @@ code:not(pre code) {
   border-radius: 0 !important;
 }
 
-.fd-sidebar-search {
+#nd-docs-layout .fd-sidebar-search {
   padding: 0;
   margin-left: -12px;
   margin-right: -12px;
@@ -364,60 +388,65 @@ code:not(pre code) {
   padding-right: 12px;
 }
 
-.fd-sidebar-search .fd-sidebar-search-btn {
+#nd-docs-layout .fd-sidebar-search .fd-sidebar-search-btn {
   width: 100%;
   padding-left: 12px;
   padding-right: 12px;
   margin: 0;
 }
 
-.fd-sidebar-search-btn:hover {
+#nd-docs-layout .fd-sidebar-search-btn:hover {
   background: var(--color-fd-accent) !important;
 }
 
-.dark .fd-sidebar-search-btn {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-search-btn,
+#nd-docs-layout.dark .fd-sidebar-search-btn {
   color: hsl(0 0% 45%);
 }
 
-.dark .fd-sidebar-search-btn:hover {
+:is(html.dark, body.dark) #nd-docs-layout .fd-sidebar-search-btn:hover,
+#nd-docs-layout.dark .fd-sidebar-search-btn:hover {
   background: hsl(0 0% 4%) !important;
   color: hsl(0 0% 65%);
 }
 
 /* ─── Tables ─────────────────────────────────────────────────────── */
 
-.fd-table-wrapper {
+#nd-docs-layout .fd-table-wrapper {
   border-radius: 0 !important;
 }
 
-.dark .fd-table-wrapper {
+:is(html.dark, body.dark) #nd-docs-layout .fd-table-wrapper,
+#nd-docs-layout.dark .fd-table-wrapper {
   border-color: hsl(0 0% 15%);
 }
 
-.dark .fd-page-body table th {
+:is(html.dark, body.dark) #nd-docs-layout .fd-page-body table th,
+#nd-docs-layout.dark .fd-page-body table th {
   background: hsl(0 0% 6%);
   color: hsl(0 0% 80%);
   font-weight: 500;
   border-color: hsl(0 0% 15%);
 }
 
-.dark .fd-page-body table td {
+:is(html.dark, body.dark) #nd-docs-layout .fd-page-body table td,
+#nd-docs-layout.dark .fd-page-body table td {
   border-color: hsl(0 0% 12%);
 }
 
 /* ─── Code blocks ────────────────────────────────────────────────── */
 
-.fd-codeblock {
+#nd-docs-layout .fd-codeblock {
   border: 1px solid var(--color-fd-border);
   border-radius: 0 !important;
   box-shadow: none;
 }
 
-.fd-codeblock pre.shiki {
+#nd-docs-layout .fd-codeblock pre.shiki {
   border-radius: 0 !important;
 }
 
-.fd-codeblock-title {
+#nd-docs-layout .fd-codeblock-title {
   border-bottom: 1px solid var(--color-fd-border) !important;
   border-radius: 0 !important;
   background-color: color-mix(in srgb, var(--color-fd-secondary, hsl(0 0% 8%)) 55%, transparent) !important;
@@ -430,161 +459,166 @@ code:not(pre code) {
   ) !important;
 }
 
-.fd-codeblock-title .fd-copy-btn {
+#nd-docs-layout .fd-codeblock-title .fd-copy-btn {
   border-radius: 0 !important;
 }
 
-.fd-copy-btn {
+#nd-docs-layout .fd-copy-btn {
   border-radius: 0 !important;
 }
 
 /* ─── Tabs ───────────────────────────────────────────────────────── */
 
-.fd-tabs {
+#nd-docs-layout .fd-tabs {
   border-radius: 0 !important;
   box-shadow: none;
 }
 
 /* ─── Callouts ───────────────────────────────────────────────────── */
 
-.fd-callout {
+#nd-docs-layout .fd-callout {
   border-radius: 0 !important;
 }
 
 /* ─── Prev/Next nav cards ────────────────────────────────────────── */
 
-.fd-page-nav-card {
+#nd-docs-layout .fd-page-nav-card {
   border-radius: 0 !important;
 }
 
-.dark .fd-page-nav-card {
+:is(html.dark, body.dark) #nd-docs-layout .fd-page-nav-card,
+#nd-docs-layout.dark .fd-page-nav-card {
   border-color: hsl(0 0% 15%);
 }
 
-.dark .fd-page-nav-card:hover {
+:is(html.dark, body.dark) #nd-docs-layout .fd-page-nav-card:hover,
+#nd-docs-layout.dark .fd-page-nav-card:hover {
   background: hsl(0 0% 6%);
   border-color: hsl(0 0% 22%);
 }
 
 /* ─── Search dialog ──────────────────────────────────────────────── */
 
-.fd-search-overlay .fd-search-dialog {
+#nd-docs-layout .fd-search-overlay .fd-search-dialog {
   border-radius: 0;
 }
 
 /* ─── Breadcrumb (monospace, uppercase) ───────────────────────────── */
 
-.fd-breadcrumb {
+#nd-docs-layout .fd-breadcrumb {
   font-size: 0.75rem;
   letter-spacing: 0.01em;
 }
 
-.fd-breadcrumb-parent,
-.fd-breadcrumb-current {
+#nd-docs-layout .fd-breadcrumb-parent,
+#nd-docs-layout .fd-breadcrumb-current {
   font-family: ui-monospace, monospace;
   text-transform: uppercase;
 }
 
 /* ─── Selection ──────────────────────────────────────────────────── */
 
-::selection {
+#nd-docs-layout::selection,
+#nd-docs-layout *::selection {
   background: var(--color-fd-foreground);
   color: var(--color-fd-background);
 }
 
 /* ─── Scrollbar ──────────────────────────────────────────────────── */
 
-* {
+#nd-docs-layout,
+#nd-docs-layout * {
   scrollbar-width: thin;
   scrollbar-color: var(--color-fd-border) transparent;
 }
 
 /* ─── HR ─────────────────────────────────────────────────────────── */
 
-.dark hr {
+:is(html.dark, body.dark) #nd-docs-layout hr,
+#nd-docs-layout.dark hr {
   border-color: hsl(0 0% 15%);
 }
 
 /* ─── AI Chat (pixel-border — zero radius, pixel-art, monospace) ── */
 
-.fd-ai-dialog {
+#nd-docs-layout .fd-ai-dialog {
   border-radius: 0 !important;
   border-width: 1px;
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-tab-bar {
+#nd-docs-layout .fd-ai-tab-bar {
   gap: 0;
 }
 
-.fd-ai-tab {
+#nd-docs-layout .fd-ai-tab {
   border-radius: 0 !important;
   font-size: 12px;
   letter-spacing: 0.04em;
 }
 
-.fd-ai-header-title {
+#nd-docs-layout .fd-ai-header-title {
   font-size: 13px;
 }
 
-.fd-ai-bubble-user {
+#nd-docs-layout .fd-ai-bubble-user {
   border-radius: 0 !important;
   font-size: 12px;
 }
 
-.fd-ai-bubble-ai {
+#nd-docs-layout .fd-ai-bubble-ai {
   border-radius: 0 !important;
   font-size: 12px;
 }
 
-.fd-ai-bubble-ai pre {
+#nd-docs-layout .fd-ai-bubble-ai pre {
   border-radius: 0 !important;
   border: 1px solid var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-bubble-ai code {
+#nd-docs-layout .fd-ai-bubble-ai code {
   border-radius: 0 !important;
 }
 
-.fd-ai-input-wrap {
+#nd-docs-layout .fd-ai-input-wrap {
   border-radius: 0 !important;
 }
 
-.fd-ai-input {
+#nd-docs-layout .fd-ai-input {
   font-size: 13px;
 }
 
-.fd-ai-send-btn {
+#nd-docs-layout .fd-ai-send-btn {
   border-radius: 0 !important;
 }
 
-.fd-ai-close-btn {
+#nd-docs-layout .fd-ai-close-btn {
   border-radius: 0 !important;
 }
 
-.fd-ai-floating-btn {
+#nd-docs-layout .fd-ai-floating-btn {
   border-radius: 0 !important;
   box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-floating-btn:hover {
+#nd-docs-layout .fd-ai-floating-btn:hover {
   transform: translate(-1px, -1px);
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
 /* Custom Ask AI trigger — same as fd-ai-floating-btn for theme */
-.fd-ai-floating-trigger .ask-ai-trigger {
+#nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger {
   font-family: var(--fd-font-sans, inherit);
   border-radius: 0 !important;
   box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)) !important;
 }
 
-.fd-ai-floating-trigger .ask-ai-trigger:hover {
+#nd-docs-layout .fd-ai-floating-trigger .ask-ai-trigger:hover {
   transform: translate(-1px, -1px);
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger {
+#nd-docs-layout .fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger {
   border-radius: 0 !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
   text-transform: uppercase !important;
@@ -593,40 +627,40 @@ code:not(pre code) {
   box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%)) !important;
 }
 
-.fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
+#nd-docs-layout .fd-ai-fm-input-bar .fd-ai-floating-trigger .ask-ai-trigger:hover {
   transform: translate(-1px, -1px);
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-suggestion {
+#nd-docs-layout .fd-ai-suggestion {
   border-radius: 0 !important;
   font-size: 12px;
 }
 
-.fd-ai-result {
+#nd-docs-layout .fd-ai-result {
   border-radius: 0 !important;
 }
 
-.fd-ai-esc {
+#nd-docs-layout .fd-ai-esc {
   border-radius: 0 !important;
 }
 
-.fd-ai-clear-btn {
+#nd-docs-layout .fd-ai-clear-btn {
   border-radius: 0 !important;
   letter-spacing: 0.04em;
 }
 
-.fd-ai-msg-label {
+#nd-docs-layout .fd-ai-msg-label {
   letter-spacing: 0.06em;
 }
 
-.fd-ai-loader-shimmer-text {
+#nd-docs-layout .fd-ai-loader-shimmer-text {
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 11px;
 }
 
-.fd-ai-loader-typing-dot {
+#nd-docs-layout .fd-ai-loader-typing-dot {
   border-radius: 0;
   width: 4px;
   height: 4px;
@@ -634,24 +668,24 @@ code:not(pre code) {
 
 /* ─── Full-Modal (pixel-border) ──────────────────────────────────── */
 
-.fd-ai-fm-input-container {
+#nd-docs-layout .fd-ai-fm-input-container {
   border-radius: 0 !important;
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-fm-send-btn {
+#nd-docs-layout .fd-ai-fm-send-btn {
   border-radius: 0 !important;
 }
 
-.fd-ai-fm-close-btn {
+#nd-docs-layout .fd-ai-fm-close-btn {
   border-radius: 0 !important;
 }
 
-.fd-ai-fm-input {
+#nd-docs-layout .fd-ai-fm-input {
   font-size: 13px;
 }
 
-.fd-ai-fm-suggestion {
+#nd-docs-layout .fd-ai-fm-suggestion {
   border-radius: 0 !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace);
   font-size: 11px;
@@ -659,7 +693,7 @@ code:not(pre code) {
   letter-spacing: 0.04em;
 }
 
-.fd-ai-fm-trigger-btn {
+#nd-docs-layout .fd-ai-fm-trigger-btn {
   border-radius: 0 !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace);
   text-transform: uppercase;
@@ -668,39 +702,39 @@ code:not(pre code) {
   box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-fm-trigger-btn:hover {
+#nd-docs-layout .fd-ai-fm-trigger-btn:hover {
   transform: translate(-1px, -1px);
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%));
 }
 
-.fd-ai-fm-msg-label {
+#nd-docs-layout .fd-ai-fm-msg-label {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-size: 11px;
 }
 
-.fd-ai-fm-msg-content {
+#nd-docs-layout .fd-ai-fm-msg-content {
   font-size: 13px;
 }
 
-.fd-ai-fm-msg-content code {
+#nd-docs-layout .fd-ai-fm-msg-content code {
   border-radius: 0 !important;
 }
 
-.fd-ai-fm-suggestions-label {
+#nd-docs-layout .fd-ai-fm-suggestions-label {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
-.fd-ai-fm-clear-btn {
+#nd-docs-layout .fd-ai-fm-clear-btn {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
-.fd-ai-fm-footer-hint {
+#nd-docs-layout .fd-ai-fm-footer-hint {
   font-size: 11px;
 }
 
@@ -708,7 +742,7 @@ code:not(pre code) {
 
 /* ─── Code blocks in AI chat (pixel-border) ──────────────────────── */
 
-.fd-ai-code-block {
+#nd-docs-layout .fd-ai-code-block {
   border-radius: 0 !important;
   box-shadow: 3px 3px 0 0 var(--color-fd-border, hsl(0 0% 15%));
   background: transparent;
@@ -723,28 +757,28 @@ code:not(pre code) {
   --sh-jsxliterals: #ae81ff;
 }
 
-.fd-ai-code-header {
+#nd-docs-layout .fd-ai-code-header {
   border-bottom-color: var(--color-fd-border, hsl(0 0% 15%));
   background: transparent;
 }
 
-.fd-ai-code-lang {
+#nd-docs-layout .fd-ai-code-lang {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
-.fd-ai-code-copy {
+#nd-docs-layout .fd-ai-code-copy {
   border-radius: 0 !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
-.fd-ai-code-block code {
+#nd-docs-layout .fd-ai-code-block code {
   font-family: var(--fd-font-mono, ui-monospace, monospace);
 }
 
 /* Light mode: AI code blocks — light bg + dark text + visible pixel border */
-:root:not(.dark) .fd-ai-code-block {
+:root:not(.dark) #nd-docs-layout .fd-ai-code-block {
   background: #f4f4f5 !important;
   box-shadow: 3px 3px 0 0 hsl(0 0% 75%);
   --sh-class: #b45309;
@@ -758,32 +792,32 @@ code:not(pre code) {
   --sh-jsxliterals: #7c3aed;
 }
 
-:root:not(.dark) .fd-ai-code-header {
+:root:not(.dark) #nd-docs-layout .fd-ai-code-header {
   border-bottom-color: hsl(0 0% 80%);
   background: color-mix(in srgb, #e4e4e7 90%, transparent);
 }
 
-:root:not(.dark) .fd-ai-code-lang {
+:root:not(.dark) #nd-docs-layout .fd-ai-code-lang {
   color: #52525b;
 }
 
-:root:not(.dark) .fd-ai-code-copy {
+:root:not(.dark) #nd-docs-layout .fd-ai-code-copy {
   color: #52525b;
   border-color: hsl(0 0% 75%);
 }
 
-:root:not(.dark) .fd-ai-code-copy:hover {
+:root:not(.dark) #nd-docs-layout .fd-ai-code-copy:hover {
   color: #18181b;
   background: color-mix(in srgb, #d4d4d8 70%, transparent);
 }
 
-:root:not(.dark) .fd-ai-code-block code {
+:root:not(.dark) #nd-docs-layout .fd-ai-code-block code {
   color: #1f2937;
 }
 
 /* ─── Omni Command Palette — pixel-border theme ──────────────────── */
 
-.omni-content {
+#nd-docs-layout .omni-content {
   border-radius: 0 !important;
   border: 2px solid var(--color-fd-border, hsl(0 0% 15%)) !important;
   box-shadow:
@@ -791,45 +825,45 @@ code:not(pre code) {
     0 24px 60px -12px rgba(0, 0, 0, 0.5) !important;
 }
 
-.omni-item {
+#nd-docs-layout .omni-item {
   border-radius: 0 !important;
 }
 
-.omni-kbd,
-.omni-kbd-sm {
+#nd-docs-layout .omni-kbd,
+#nd-docs-layout .omni-kbd-sm {
   border-radius: 0 !important;
   border: 1px solid var(--color-fd-border, hsl(0 0% 15%)) !important;
 }
 
-.omni-close-btn {
+#nd-docs-layout .omni-close-btn {
   border-radius: 0 !important;
 }
 
-.omni-empty-icon {
+#nd-docs-layout .omni-empty-icon {
   border-radius: 0 !important;
 }
 
-.omni-search-input {
+#nd-docs-layout .omni-search-input {
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
 }
 
-.omni-group-label {
+#nd-docs-layout .omni-group-label {
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
   letter-spacing: 0.08em !important;
 }
 
-.omni-footer-inner {
+#nd-docs-layout .omni-footer-inner {
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
 }
 
-.omni-highlight {
+#nd-docs-layout .omni-highlight {
   background: color-mix(in srgb, var(--color-fd-primary, #6366f1) 25%, transparent) !important;
   border-radius: 0 !important;
 }
 
 /* ─── Page Actions — pixel-border theme ─────────────────────────── */
 
-.fd-page-action-btn {
+#nd-docs-layout .fd-page-action-btn {
   text-transform: uppercase !important;
   box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626) !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
@@ -838,18 +872,18 @@ code:not(pre code) {
   letter-spacing: 0.03em !important;
 }
 
-.fd-page-action-dropdown {
+#nd-docs-layout .fd-page-action-dropdown {
   position: relative !important;
 }
 
-.fd-page-action-menu {
+#nd-docs-layout .fd-page-action-menu {
   border-radius: 0 !important;
   border: 2px solid var(--color-fd-border, #262626) !important;
   box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626), 0 4px 24px hsl(0 0% 0% / 0.5) !important;
   padding: 0 !important;
 }
 
-.fd-page-action-menu-item {
+#nd-docs-layout .fd-page-action-menu-item {
   border-radius: 0 !important;
   font-size: 0.8rem !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
@@ -859,26 +893,26 @@ code:not(pre code) {
   border-top: 1px solid var(--color-fd-border, #262626) !important;
 }
 
-.fd-page-action-menu-item:first-child {
+#nd-docs-layout .fd-page-action-menu-item:first-child {
   border-top: none !important;
 }
 
 /* ─── Prompt (pixel-border theme) ──────────────────────────────── */
 
-.fd-prompt {
+#nd-docs-layout .fd-prompt {
   border-radius: 0 !important;
   border: 1px solid var(--color-fd-border, #262626) !important;
   background: var(--color-fd-card, var(--color-fd-background)) !important;
   box-shadow: 4px 4px 0 0 var(--color-fd-border, #262626) !important;
 }
 
-.fd-prompt-body {
+#nd-docs-layout .fd-prompt-body {
   border-radius: 0 !important;
   border-top: 1px solid var(--color-fd-border, #262626) !important;
   background: var(--color-fd-background, #0c0c0c) !important;
 }
 
-.fd-prompt-action-btn {
+#nd-docs-layout .fd-prompt-action-btn {
   text-transform: uppercase !important;
   box-shadow: 2px 2px 0 0 var(--color-fd-border, #262626) !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
@@ -890,12 +924,12 @@ code:not(pre code) {
   border: 1px solid var(--color-fd-border) !important;
 }
 
-.fd-prompt-action-btn:hover {
+#nd-docs-layout .fd-prompt-action-btn:hover {
   background: var(--color-fd-muted) !important;
   color: var(--color-fd-foreground) !important;
 }
 
-.fd-prompt-menu {
+#nd-docs-layout .fd-prompt-menu {
   border-radius: 0 !important;
   box-shadow: 4px 4px 0 0 var(--color-fd-border, hsl(0 0% 15%)), 0 4px 24px hsl(0 0% 0% / 0.5) !important;
   background: var(--color-fd-popover) !important;
@@ -903,7 +937,7 @@ code:not(pre code) {
   padding: 0.375rem !important;
 }
 
-.fd-prompt-menu-item {
+#nd-docs-layout .fd-prompt-menu-item {
   border-radius: 0 !important;
   font-size: 0.8rem !important;
   font-family: var(--fd-font-mono, ui-monospace, monospace) !important;
@@ -914,28 +948,28 @@ code:not(pre code) {
   border-top: 1px solid var(--color-fd-border) !important;
 }
 
-.fd-prompt-menu-item:first-child {
+#nd-docs-layout .fd-prompt-menu-item:first-child {
   border-top: none !important;
 }
 
-.fd-prompt-menu-item:hover {
+#nd-docs-layout .fd-prompt-menu-item:hover {
   background: var(--color-fd-muted) !important;
   color: var(--color-fd-foreground) !important;
 }
 
 /* ─── Feedback (pixel-border theme) ──────────────────────────────── */
 
-.fd-feedback-input,
-.fd-feedback-submit {
+#nd-docs-layout .fd-feedback-input,
+#nd-docs-layout .fd-feedback-submit {
   border-radius: 0 !important;
   box-shadow: 3px 3px 0 0 var(--color-fd-border);
 }
 
-.fd-feedback-choice[data-selected="true"] {
+#nd-docs-layout .fd-feedback-choice[data-selected="true"] {
   background: var(--color-fd-secondary);
 }
 
-.fd-feedback-status[data-status="success"] {
+#nd-docs-layout .fd-feedback-status[data-status="success"] {
   font-family: var(--fd-font-mono, var(--font-geist-mono, ui-monospace, monospace));
   text-transform: uppercase;
 }