@aravindc26/velu 0.11.0 → 0.11.3

package/src/engine/app/global.css

@@ -1,11 +1,56 @@
 @import 'tailwindcss';
 @import 'fumadocs-ui/css/preset.css';
+@import 'fumadocs-openapi/css/preset.css';
 @import './velu-theme.css';
 
 body {
   min-height: 100vh;
 }
 
+.velu-nav-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+}
+
+.velu-nav-logo {
+  display: block;
+  height: 1.95rem;
+  width: auto;
+  max-width: 190px;
+}
+
+.velu-nav-logo-dark {
+  display: none;
+}
+
+.dark .velu-nav-logo-light {
+  display: none;
+}
+
+.dark .velu-nav-logo-dark {
+  display: block;
+}
+
+/* Keep sidebar brand and collapse control aligned like Mintlify. */
+#nd-sidebar .flex.justify-between {
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: 0.5rem;
+}
+
+#nd-sidebar .flex.justify-between > a {
+  min-width: 0;
+  overflow: hidden;
+}
+
+#nd-sidebar .flex.justify-between > button {
+  margin-left: auto;
+}
+
 /* Ensure sidebar/toc widths are set on the grid layout */
 nextjs-portal {
   display: none !important;
@@ -17,17 +62,88 @@ nextjs-portal {
   }
 }
 
-@media (min-width: 1280px) {
-  #nd-docs-layout {
+@media (min-width: 1024px) {
+  #nd-docs-layout,
+  #nd-notebook-layout {
     --fd-toc-width: 268px;
   }
+
+  #nd-docs-layout:has(#nd-toc .velu-api-toc-rail),
+  #nd-notebook-layout:has(#nd-toc .velu-api-toc-rail) {
+    --fd-toc-width: clamp(420px, 32vw, 560px);
+  }
+
+  /* Override notebook's default xl TOC width reset for API example rail. */
+  #nd-toc:has(.velu-api-toc-rail) {
+    --fd-toc-width: clamp(420px, 32vw, 560px);
+    width: var(--fd-toc-width);
+    padding-top: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Notebook header: keep tabs on the left and move search to the far right. */
+  #nd-subnav [data-header-body] > button[data-search-full] {
+    order: 3;
+    margin-left: auto;
+    width: min(280px, 28vw);
+    max-width: 280px;
+    min-width: 220px;
+    flex: 0 0 auto;
+  }
+
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 {
+    order: 2;
+    flex: 0 1 auto;
+    justify-content: flex-start;
+    margin-right: auto;
+  }
+
+  /* Top bar tabs: active underline like Mintlify. */
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden {
+    align-self: stretch;
+  }
+
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > a,
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    font-size: 1.05rem;
+    font-weight: 700;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+  }
+
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button {
+    background: transparent;
+    padding-inline: 0;
+    border-radius: 0;
+  }
+
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > a[data-active='true'],
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button:has(a[data-active='true']),
+  #nd-subnav [data-header-body] > div.flex.flex-1.items-center.justify-end.md\:gap-2 > div.flex.items-center.gap-6.empty\:hidden.max-lg\:hidden > button[data-state='open'] {
+    border-bottom-color: var(--color-fd-primary);
+  }
 }
 
 .velu-sidebar-footer {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding-top: 0.5rem;
+}
+
+.velu-sidebar-footer-shell {
+  border-top: 1px solid var(--color-fd-border);
+  padding: 0.75rem 1rem 1rem;
+}
+
+.velu-sidebar-footer-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-bottom: 0.35rem;
 }
 
 .velu-sidebar-banner {
@@ -156,6 +272,20 @@ nextjs-portal {
   text-align: left;
 }
 
+.velu-product-switcher-label-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.velu-product-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex-shrink: 0;
+  opacity: 0.75;
+}
+
 .velu-product-menu {
   position: absolute;
   top: calc(100% + 0.25rem);
@@ -196,6 +326,19 @@ nextjs-portal {
   color: var(--color-fd-foreground);
 }
 
+.velu-product-option-name-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.velu-product-option-icon {
+  width: 0.9rem;
+  height: 0.9rem;
+  flex-shrink: 0;
+  opacity: 0.75;
+}
+
 .velu-product-option.active .velu-product-option-name {
   color: var(--color-fd-primary);
 }
@@ -239,6 +382,20 @@ nextjs-portal {
   flex: 1;
 }
 
+.velu-sidebar-link-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  min-width: 0;
+}
+
+.velu-sidebar-link-leading-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
 .velu-sidebar-link-icon {
   width: 0.875rem;
   height: 0.875rem;
@@ -250,6 +407,82 @@ nextjs-portal {
   opacity: 0.8;
 }
 
+.velu-status-badge {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: 0.45rem;
+  padding: 0.06rem 0.38rem;
+  border-radius: 999px;
+  border: 1px solid var(--color-fd-border);
+  font-size: 0.62rem;
+  font-weight: 650;
+  line-height: 1.2;
+  color: var(--color-fd-muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.velu-status-badge-deprecated {
+  border-color: color-mix(in oklab, #f59e0b 52%, var(--color-fd-border));
+  background: color-mix(in oklab, #f59e0b 14%, transparent);
+  color: #f59e0b;
+}
+
+.velu-openapi-sidebar-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.velu-openapi-sidebar-label {
+  min-width: 0;
+}
+
+.velu-openapi-method-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  padding: 0.06rem 0.43rem;
+  font-size: 0.66rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+  flex-shrink: 0;
+}
+
+.velu-openapi-method-get {
+  background: color-mix(in oklab, #16a34a 20%, transparent);
+  color: #22c55e;
+}
+
+.velu-openapi-method-post {
+  background: color-mix(in oklab, #2563eb 20%, transparent);
+  color: #60a5fa;
+}
+
+.velu-openapi-method-put {
+  background: color-mix(in oklab, #ca8a04 20%, transparent);
+  color: #facc15;
+}
+
+.velu-openapi-method-patch {
+  background: color-mix(in oklab, #ea580c 20%, transparent);
+  color: #fb923c;
+}
+
+.velu-openapi-method-delete {
+  background: color-mix(in oklab, #dc2626 20%, transparent);
+  color: #f87171;
+}
+
+.velu-openapi-method-webhook {
+  background: color-mix(in oklab, #8b5cf6 20%, transparent);
+  color: #c4b5fd;
+}
+
 .velu-theme-toggle {
   display: flex;
   align-items: center;
@@ -355,6 +588,284 @@ nextjs-portal {
   color: var(--color-fd-muted-foreground);
 }
 
+.velu-page-feedback-wrap {
+  margin-top: 2.75rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.velu-page-feedback-block {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.velu-page-feedback-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.velu-page-feedback-question {
+  margin: 0;
+  font-size: 0.82rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--color-fd-foreground);
+}
+
+.velu-page-feedback-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.velu-page-feedback-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  height: 1.72rem;
+  padding: 0 0.6rem;
+  font-size: 0.82rem;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
+}
+
+.velu-page-feedback-btn:hover {
+  color: var(--color-fd-foreground);
+  border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
+  background: color-mix(in oklab, var(--color-fd-primary) 8%, transparent);
+}
+
+.velu-page-feedback-btn.is-active {
+  color: var(--color-fd-foreground);
+  border-color: color-mix(in oklab, var(--color-fd-primary) 55%, var(--color-fd-border));
+}
+
+.velu-page-feedback-btn svg {
+  width: 0.76rem;
+  height: 0.76rem;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.velu-page-feedback-panel {
+  border-top: 1px solid var(--color-fd-border);
+  padding-top: 1rem;
+  display: grid;
+  gap: 0.85rem;
+}
+
+.velu-page-feedback-panel-title {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.35;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.velu-page-feedback-options {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.velu-page-feedback-option {
+  border: 0;
+  background: transparent;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: fit-content;
+  max-width: 100%;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.82rem;
+  line-height: 1.35;
+  text-align: left;
+  padding: 0.12rem 0;
+  cursor: pointer;
+}
+
+.velu-page-feedback-option:hover {
+  color: var(--color-fd-foreground);
+}
+
+.velu-page-feedback-option.is-checked {
+  color: var(--color-fd-foreground);
+}
+
+.velu-page-feedback-radio {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 999px;
+  border: 1px solid color-mix(in oklab, var(--color-fd-muted-foreground) 50%, var(--color-fd-border));
+  box-shadow: inset 0 0 0 0 transparent;
+  flex-shrink: 0;
+  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
+}
+
+.velu-page-feedback-option.is-checked .velu-page-feedback-radio {
+  border-color: var(--color-fd-primary);
+  background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
+  box-shadow: inset 0 0 0 3px var(--color-fd-primary);
+}
+
+.velu-page-feedback-inputs {
+  display: grid;
+  gap: 0.6rem;
+}
+
+.velu-page-feedback-input {
+  width: 100%;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.75rem;
+  background: transparent;
+  color: var(--color-fd-foreground);
+  font: inherit;
+  font-size: 0.82rem;
+  line-height: 1.35;
+  padding: 0.68rem 0.8rem;
+}
+
+.velu-page-feedback-input::placeholder {
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-page-feedback-input:focus {
+  outline: none;
+  border-color: color-mix(in oklab, var(--color-fd-primary) 55%, var(--color-fd-border));
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-fd-primary) 22%, transparent);
+}
+
+.velu-page-feedback-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.velu-page-feedback-cancel,
+.velu-page-feedback-submit {
+  border-radius: 999px;
+  height: 2rem;
+  padding: 0 0.9rem;
+  font: inherit;
+  font-size: 0.82rem;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.velu-page-feedback-cancel {
+  border: 1px solid var(--color-fd-border);
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-page-feedback-cancel:hover {
+  color: var(--color-fd-foreground);
+  border-color: color-mix(in oklab, var(--color-fd-primary) 35%, var(--color-fd-border));
+}
+
+.velu-page-feedback-submit {
+  border: 1px solid color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
+  background: var(--color-fd-foreground);
+  color: var(--color-fd-background);
+}
+
+.velu-page-feedback-submit:hover {
+  filter: brightness(0.96);
+}
+
+.velu-page-nav-grid {
+  display: grid;
+  gap: 0.85rem;
+}
+
+.velu-page-nav-grid-one {
+  grid-template-columns: 1fr;
+}
+
+.velu-page-nav-grid-two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.velu-page-nav-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.85rem;
+  padding: 1rem 1.1rem;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.velu-page-nav-card:hover {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 45%, var(--color-fd-border));
+  background: color-mix(in oklab, var(--color-fd-primary) 8%, transparent);
+}
+
+.velu-page-nav-card-next {
+  text-align: right;
+}
+
+.velu-page-nav-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+  line-height: 1.25;
+}
+
+.velu-page-nav-meta {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.95rem;
+  line-height: 1.35;
+}
+
+.velu-page-nav-meta-next {
+  justify-content: flex-end;
+}
+
+.velu-page-nav-meta svg {
+  width: 0.95rem;
+  height: 0.95rem;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .velu-page-nav-grid-two {
+    grid-template-columns: 1fr;
+  }
+
+  .velu-page-nav-card-next {
+    text-align: left;
+  }
+
+  .velu-page-nav-meta-next {
+    justify-content: flex-start;
+  }
+}
+
 .velu-footer a {
   color: var(--color-fd-primary);
   font-weight: 600;
@@ -364,3 +875,2646 @@ nextjs-portal {
 .velu-footer a:hover {
   text-decoration: underline;
 }
+
+[data-card].velu-card-horizontal {
+  display: grid !important;
+  grid-template-columns: 2.25rem minmax(0, 1fr);
+  column-gap: 0.75rem;
+  align-items: start !important;
+}
+
+[data-card].velu-card-horizontal > div.not-prose {
+  grid-row: 1 / span 3;
+  margin-bottom: 0;
+  margin-top: 0.02rem;
+  align-self: start;
+  justify-self: start;
+}
+
+[data-card].velu-card-horizontal > h3 {
+  margin-bottom: 0.25rem;
+}
+
+.velu-card-group {
+  display: grid !important;
+  grid-template-columns: repeat(var(--velu-card-cols, 2), minmax(0, 1fr));
+  gap: 0.75rem !important;
+}
+
+.velu-card-group > [data-card] {
+  margin: 0 !important;
+}
+
+.velu-card-image {
+  width: 100%;
+  border-radius: 0.55rem;
+  margin-bottom: 0.65rem;
+  border: 1px solid var(--color-fd-border);
+}
+
+[data-card].velu-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card));
+}
+
+[data-card].velu-card,
+.velu-card-group > [data-card] {
+  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+[data-card].velu-card:hover,
+.velu-card-group > [data-card]:hover {
+  /* Keep card surface stable on hover and emphasize border instead. */
+  background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card)) !important;
+  border-color: color-mix(in oklab, var(--color-fd-primary) 72%, var(--color-fd-border));
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-fd-primary) 28%, transparent);
+}
+
+/* Mintlify-like icon chip styling inside cards. */
+[data-card].velu-card > div.not-prose {
+  background: transparent !important;
+  border: 0 !important;
+  color: var(--color-fd-primary) !important;
+  box-shadow: none !important;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0 !important;
+  border-radius: 0.7rem !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.55rem;
+}
+
+[data-card].velu-card > div.not-prose svg,
+[data-card].velu-card > div.not-prose img {
+  width: 1.6rem;
+  height: 1.6rem;
+}
+
+[data-card].velu-card > h3 {
+  margin-top: 0.04rem;
+}
+
+[data-card].velu-card + [data-card].velu-card {
+  margin-top: 0.75rem !important;
+}
+
+.velu-card-group > [data-card].velu-card + [data-card].velu-card {
+  margin-top: 0 !important;
+}
+
+[data-card].velu-card > div:last-child {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.velu-card-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-top: auto;
+  padding-top: 0.55rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--color-fd-primary);
+}
+
+.velu-card-cta-arrow {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.velu-card-color-blue {
+  border-color: rgba(37, 99, 235, 0.3);
+}
+
+.velu-card-color-green {
+  border-color: rgba(22, 163, 74, 0.3);
+}
+
+.velu-card-color-yellow {
+  border-color: rgba(245, 158, 11, 0.35);
+}
+
+.velu-card-color-red {
+  border-color: rgba(220, 38, 38, 0.3);
+}
+
+.velu-card-color-purple {
+  border-color: rgba(147, 51, 234, 0.3);
+}
+
+.velu-card-color-orange {
+  border-color: rgba(234, 88, 12, 0.3);
+}
+
+.velu-card-color-gray {
+  border-color: rgba(148, 163, 184, 0.35);
+}
+
+.velu-accordions,
+.velu-code-group,
+.velu-properties,
+.velu-param-field,
+.velu-response-field {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.velu-step-title {
+  margin: 0 0 0.35rem;
+  font-weight: 600;
+}
+
+.velu-tabs-border-bottom {
+  border-bottom: 1px solid var(--color-fd-border);
+  padding-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.velu-tabs-plain [role='tablist'] {
+  gap: 1rem;
+  margin-bottom: 0.45rem;
+}
+
+.velu-code-group-dropdown {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.85rem;
+  overflow: visible;
+  gap: 0;
+}
+
+.velu-code-group-tabs {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.85rem;
+  overflow: hidden;
+  gap: 0;
+}
+
+.velu-code-group-tabs-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 0.12rem;
+  min-height: 1.9rem;
+  padding: 0 0.45rem 0;
+  border-bottom: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
+}
+
+.velu-code-group-tab-btn {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-end;
+  gap: 0.28rem;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0.35rem 0.35rem 0 0;
+  padding: 0 0.28rem 0.06rem;
+  background: transparent;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.82rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  min-height: 0;
+}
+
+.velu-code-group-tab-btn > span:last-child,
+.velu-code-group-file > span:last-child,
+.velu-code-group-select-btn > span:nth-child(2),
+.velu-code-group-select-item > span:nth-child(2) {
+  padding-top: 0.08rem;
+  padding-bottom: 0.16rem;
+}
+
+.velu-code-group-tab-btn.is-active {
+  color: var(--color-fd-primary);
+  border-bottom-color: var(--color-fd-primary);
+}
+
+.velu-code-group-dropdown-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.7rem 0.9rem;
+  border-bottom: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
+}
+
+.velu-code-group-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-fd-foreground);
+}
+
+.velu-code-group-select-wrap {
+  position: relative;
+  min-width: 10rem;
+}
+
+.velu-code-group-select-btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  padding: 0.35rem 0.55rem;
+  background: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  font-size: 0.9rem;
+  cursor: pointer;
+}
+
+.velu-code-group-caret {
+  opacity: 0.7;
+  font-size: 0.9rem;
+}
+
+.velu-code-group-select-menu {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  right: 0;
+  min-width: 12rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.75rem;
+  background: var(--color-fd-popover);
+  padding: 0.3rem;
+  z-index: 20;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
+}
+
+.velu-code-group-select-item {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 0;
+  border-radius: 0.55rem;
+  padding: 0.45rem 0.5rem;
+  background: transparent;
+  color: var(--color-fd-foreground);
+  text-align: left;
+  cursor: pointer;
+}
+
+.velu-code-group-select-item:hover {
+  background: var(--color-fd-accent);
+}
+
+.velu-code-group-select-item.is-active {
+  color: var(--color-fd-primary);
+}
+
+.velu-code-group-check {
+  margin-left: auto;
+  color: var(--color-fd-primary);
+}
+
+.velu-code-group-dropdown-body {
+  padding: 0;
+  overflow: hidden;
+  border-bottom-left-radius: 0.85rem;
+  border-bottom-right-radius: 0.85rem;
+}
+
+.velu-code-group-dropdown-body > * {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: 0.85rem;
+  border-bottom-right-radius: 0.85rem;
+}
+
+.velu-lang-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.15rem;
+  height: 1.15rem;
+  border-radius: 0.28rem;
+  font-size: 0.58rem;
+  font-weight: 700;
+  line-height: 1;
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 22%, transparent);
+  color: var(--color-fd-foreground);
+}
+
+.velu-lang-icon-img {
+  width: 0.72rem;
+  height: 0.72rem;
+  display: block;
+  border-radius: 0.16rem;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.velu-code-group .velu-lang-icon-img,
+.velu-code-group-tabs-head .velu-lang-icon-img,
+.velu-code-group-dropdown-head .velu-lang-icon-img,
+.velu-code-group-select-item .velu-lang-icon-img {
+  margin: 0 !important;
+}
+
+.velu-lang-javascript {
+  background: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+}
+
+.velu-lang-typescript {
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+}
+
+.velu-lang-python {
+  background: rgba(245, 158, 11, 0.2);
+  color: #fbbf24;
+}
+
+.velu-lang-java {
+  background: rgba(239, 68, 68, 0.2);
+  color: #f87171;
+}
+
+.velu-accordion,
+.velu-expandable {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.6rem;
+  background: var(--color-fd-card);
+  overflow: hidden;
+}
+
+.velu-accordion > summary,
+.velu-expandable > summary {
+  cursor: pointer;
+  font-weight: 600;
+  padding: 0.7rem 0.85rem;
+}
+
+.velu-accordion-content,
+.velu-expandable-content {
+  padding: 0 0.85rem 0.85rem;
+}
+
+.velu-frame {
+  --velu-frame-gap-bg: #e5e7eb;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  overflow: hidden;
+  margin: 1rem 0;
+}
+
+:root[data-theme='dark'] .velu-frame,
+.dark .velu-frame {
+  --velu-frame-gap-bg: #2f2f2f;
+}
+
+.velu-frame-content {
+  padding: 0.45rem;
+  background: var(--velu-frame-gap-bg);
+}
+
+.velu-frame-content img {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 !important;
+  border-radius: 0.45rem;
+}
+
+.velu-frame-hint {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  margin: 0 0 0.55rem;
+  border: 0;
+  font-size: 1.05rem;
+  line-height: 1.4;
+  color: var(--color-fd-foreground);
+  background: transparent;
+}
+
+.velu-frame-hint-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.9;
+  color: color-mix(in oklab, var(--color-fd-foreground) 72%, var(--color-fd-muted-foreground));
+}
+
+:root[data-theme='dark'] .velu-frame-hint-icon,
+.dark .velu-frame-hint-icon {
+  opacity: 1;
+  color: color-mix(in oklab, var(--color-fd-foreground) 92%, var(--color-fd-muted-foreground));
+}
+
+.velu-frame figcaption {
+  font-size: 0.85rem;
+  color: color-mix(in oklab, var(--color-fd-foreground) 78%, var(--color-fd-muted-foreground));
+  border-top: 0;
+  padding: 0.55rem 0.8rem;
+  background: var(--velu-frame-gap-bg);
+  text-align: center;
+  margin-top: -0.1rem;
+}
+
+.velu-frame figcaption a {
+  color: var(--color-fd-primary);
+  text-decoration: underline;
+}
+
+.velu-param,
+.velu-property {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.6rem;
+  padding: 0.7rem 0.85rem;
+}
+
+.velu-param-head,
+.velu-property-head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  position: relative;
+}
+
+.velu-param-head span,
+.velu-property-head span {
+  font-size: 0.75rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+}
+
+.velu-param-head strong,
+.velu-property-head strong {
+  color: var(--color-fd-primary);
+  font-size: 0.75rem;
+}
+
+.velu-param-head em,
+.velu-property-head em {
+  font-size: 0.75rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-param-field-item,
+.velu-response-field-item {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: transparent;
+  position: relative;
+}
+
+.velu-param-field-item::before,
+.velu-response-field-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -1.15rem;
+  width: 1.15rem;
+}
+
+.velu-param-field-item + .velu-param-field-item,
+.velu-response-field-item + .velu-response-field-item {
+  border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 18%, transparent);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.velu-param-field-item .velu-param-head code,
+.velu-response-field-item .velu-property-head code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  color: var(--color-fd-primary);
+  font-weight: 400;
+  font-size: 1.10em;
+}
+
+.velu-param-anchor {
+  position: absolute;
+  left: -1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.9rem;
+  height: 0.9rem;
+  color: var(--color-fd-muted-foreground);
+  text-decoration: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.velu-param-anchor svg {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.velu-param-field-item:hover .velu-param-anchor,
+.velu-param-field-item:focus-within .velu-param-anchor,
+.velu-response-field-item:hover .velu-param-anchor,
+.velu-response-field-item:focus-within .velu-param-anchor,
+.velu-param-anchor:focus-visible {
+  opacity: 0.9;
+  visibility: visible;
+}
+
+.velu-param-anchor:hover {
+  color: var(--color-fd-foreground);
+}
+
+.velu-pill {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.velu-pill-required {
+  background: rgba(220, 38, 38, 0.16);
+  color: #ef4444;
+}
+
+.velu-pill-deprecated {
+  background: rgba(245, 158, 11, 0.18);
+  color: #f59e0b;
+}
+
+.velu-pill-type {
+  background: #e5e7eb;
+  color: #292929;
+}
+
+.velu-param-body,
+.velu-property-body {
+  margin-top: 0.5rem;
+}
+
+.velu-param-field-meta {
+  display: flex;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+
+.velu-param-field-meta span {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  color: var(--color-fd-muted-foreground);
+  border: 1px solid var(--color-fd-border);
+  border-radius: 999px;
+  padding: 0.08rem 0.4rem;
+}
+
+.velu-endpoint,
+.velu-openapi,
+.velu-snippet {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  padding: 0.8rem;
+  margin: 1rem 0;
+}
+
+.velu-api-playground {
+  border: 0;
+  border-radius: 0;
+  padding: 0.35rem 0.35rem 0.6rem;
+}
+
+.velu-openapi-operation-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 0.95rem;
+}
+
+.velu-openapi-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+}
+
+.velu-openapi-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.velu-openapi-field-group + .velu-openapi-field-group {
+  margin-top: 0.6rem;
+}
+
+.velu-openapi-field-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.velu-openapi-parameter-group > h2,
+.velu-openapi-parameter-group > h3 {
+  margin: 0;
+}
+
+.velu-openapi-parameter-group > .velu-openapi-field-list {
+  border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
+  padding-top: 0.95rem;
+}
+
+.velu-openapi-field-list > div + div {
+  border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 18%, transparent);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+
+.velu-openapi-complex-field + .velu-openapi-complex-field {
+  margin-top: 0.75rem;
+}
+
+.velu-openapi-child-attrs {
+  margin-top: 0.55rem;
+  border: 1px solid color-mix(in oklab, var(--color-fd-foreground) 16%, transparent);
+  border-radius: 0.72rem;
+  overflow: hidden;
+}
+
+.velu-openapi-child-attrs-summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 0.55rem 0.7rem;
+  font-size: 0.83rem;
+  font-weight: 500;
+  color: var(--color-fd-muted-foreground);
+  border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
+  user-select: none;
+}
+
+.velu-openapi-child-attrs-summary::-webkit-details-marker {
+  display: none;
+}
+
+.velu-openapi-child-attrs-summary::before {
+  content: '\203A';
+  display: inline-block;
+  margin-right: 0.35rem;
+  transform: rotate(90deg);
+  transition: transform 0.15s ease;
+}
+
+.velu-openapi-child-attrs:not([open]) .velu-openapi-child-attrs-summary {
+  border-bottom: 0;
+}
+
+.velu-openapi-child-attrs:not([open]) .velu-openapi-child-attrs-summary::before {
+  transform: rotate(0deg);
+}
+
+.velu-openapi-child-attrs > .velu-openapi-field-list,
+.velu-openapi-child-variants {
+  padding: 0.55rem 0.65rem 0.65rem;
+}
+
+.velu-openapi-child-variant-list {
+  margin-bottom: 0.55rem;
+}
+
+.velu-openapi-child-variant-trigger {
+  border: 0;
+  border-radius: 0;
+  padding: 0.1rem 0.12rem 0.24rem;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1.15;
+}
+
+.velu-openapi-child-variant-trigger[data-state='active'] {
+  color: var(--color-fd-primary);
+  border-bottom: 2px solid var(--color-fd-primary);
+}
+
+.velu-openapi-media-label {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+}
+
+.velu-openapi-field-description {
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-openapi-response-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
+  padding-top: 0.75rem;
+}
+
+.velu-openapi-response-group:first-of-type {
+  border-top: 0;
+  padding-top: 0.2rem;
+}
+
+.velu-openapi-response-head {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.velu-openapi-response-section {
+  margin-top: 0.25rem;
+}
+
+.velu-openapi-response-panel {
+  border: 0;
+}
+
+.velu-openapi-response-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
+  padding-bottom: 0.55rem;
+  margin-bottom: 0.65rem;
+}
+
+.velu-openapi-response-header h2,
+.velu-openapi-response-header h3 {
+  margin: 0;
+}
+
+.velu-openapi-response-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.15rem;
+  margin-left: auto;
+}
+
+.velu-openapi-response-status-list {
+  border: 0;
+  background: transparent;
+}
+
+.velu-openapi-response-status-list .velu-openapi-response-status-trigger {
+  border: 0;
+  border-radius: 0;
+  padding: 0.1rem 0.12rem 0.26rem;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.15;
+}
+
+.velu-openapi-response-status-list .velu-openapi-response-status-trigger[data-state='active'] {
+  color: var(--color-fd-primary);
+  border-bottom: 2px solid var(--color-fd-primary);
+}
+
+.velu-openapi-response-status-list .velu-openapi-response-status-trigger + .velu-openapi-response-status-trigger {
+  margin-left: 0.35rem;
+}
+
+.velu-openapi-response-content-type {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.95rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.velu-openapi-response-panel .velu-openapi-response-head {
+  margin-bottom: 0.5rem;
+}
+
+.velu-openapi-response-panel .velu-openapi-response-group {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.velu-openapi-response-empty {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.velu-openapi-response-headers {
+  margin-bottom: 0.85rem;
+}
+
+.velu-openapi-response-headers h3 {
+  margin: 0 0 0.5rem;
+}
+
+.velu-openapi-response-headers > .velu-openapi-field-list {
+  border-top: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
+  padding-top: 0.75rem;
+}
+
+.velu-openapi-body-section {
+  gap: 0.65rem;
+}
+
+.velu-openapi-body-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid color-mix(in oklab, var(--color-fd-foreground) 14%, transparent);
+  padding-bottom: 0.55rem;
+  margin-bottom: 0.2rem;
+}
+
+.velu-openapi-body-header h2,
+.velu-openapi-body-header h3 {
+  margin: 0;
+}
+
+.velu-openapi-body-content-type {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.95rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.velu-openapi-body-media-list {
+  border: 0;
+  background: transparent;
+}
+
+.velu-openapi-body-media-trigger {
+  border: 0;
+  border-radius: 0;
+  padding: 0.1rem 0.12rem 0.26rem;
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.15;
+}
+
+.velu-openapi-body-media-trigger[data-state='active'] {
+  color: var(--color-fd-primary);
+  border-bottom: 2px solid var(--color-fd-primary);
+}
+
+.velu-openapi-body-section > .velu-openapi-field-list {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.velu-openapi-response-media-switch-header {
+  margin-bottom: 0.55rem;
+}
+
+.velu-openapi-response-media-list {
+  border: 0;
+  background: transparent;
+}
+
+.velu-openapi-response-media-trigger {
+  border: 0;
+  border-radius: 999px;
+  padding: 0.14rem 0.5rem 0.2rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-openapi-response-media-trigger[data-state='active'] {
+  color: var(--color-fd-foreground);
+  background: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+}
+
+.velu-openapi-response-examples {
+  margin-bottom: 0.7rem;
+}
+
+.velu-openapi-response-example-switch-header {
+  margin-bottom: 0.55rem;
+}
+
+.velu-openapi-response-example-list {
+  border: 0;
+  background: transparent;
+  flex-wrap: wrap;
+}
+
+.velu-openapi-response-example-trigger {
+  border: 0;
+  border-radius: 999px;
+  padding: 0.14rem 0.5rem 0.2rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-openapi-response-example-trigger[data-state='active'] {
+  color: var(--color-fd-foreground);
+  background: color-mix(in oklab, var(--color-fd-foreground) 10%, transparent);
+}
+
+.velu-openapi-response-example-code {
+  margin-bottom: 0.65rem;
+}
+
+.velu-openapi-response-example-code pre {
+  margin: 0;
+}
+
+.velu-openapi-field-depth-1 {
+  padding-left: 0.85rem;
+}
+
+.velu-openapi-field-depth-2 {
+  padding-left: 1.5rem;
+}
+
+.velu-openapi-field-depth-3,
+.velu-openapi-field-depth-4 {
+  padding-left: 2rem;
+}
+
+.velu-manual-api {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+  margin: 1rem 0;
+  background: color-mix(in oklab, var(--color-fd-background) 92%, var(--color-fd-card));
+}
+
+.velu-manual-api-head {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+}
+
+.velu-manual-api-method {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid color-mix(in oklab, var(--color-fd-primary) 40%, transparent);
+  color: var(--color-fd-primary);
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 0.12rem 0.5rem;
+}
+
+.velu-manual-api-url {
+  font-size: 0.82rem;
+  word-break: break-all;
+}
+
+.velu-manual-api-send {
+  margin-left: auto;
+  border: 1px solid color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
+  background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
+  color: var(--color-fd-primary);
+  border-radius: 0.45rem;
+  padding: 0.22rem 0.6rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.velu-manual-api-send:disabled {
+  opacity: 0.65;
+  cursor: default;
+}
+
+.velu-manual-api-auth-grid {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 0.7rem;
+}
+
+.velu-manual-api-auth {
+  display: grid;
+  gap: 0.28rem;
+  margin-top: 0.7rem;
+}
+
+.velu-manual-api-auth > span {
+  font-size: 0.73rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-manual-api-auth > input {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.45rem;
+  padding: 0.42rem 0.56rem;
+  font-size: 0.82rem;
+  background: color-mix(in oklab, var(--color-fd-background) 92%, transparent);
+}
+
+.velu-manual-api-error {
+  margin: 0.75rem 0 0;
+  color: #e11d48;
+  font-size: 0.8rem;
+}
+
+.velu-manual-api-result {
+  margin-top: 0.75rem;
+  border-top: 1px solid var(--color-fd-border);
+  padding-top: 0.6rem;
+}
+
+.velu-manual-api-status {
+  font-size: 0.78rem;
+  color: var(--color-fd-muted-foreground);
+  margin-bottom: 0.35rem;
+}
+
+.velu-manual-api-result pre {
+  margin: 0;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.55rem;
+  padding: 0.7rem;
+  overflow: auto;
+  background: color-mix(in oklab, var(--color-fd-background) 85%, var(--color-fd-card));
+}
+
+.velu-manual-api-simple {
+  border-style: dashed;
+}
+
+@media (max-width: 768px) {
+  .velu-manual-api-auth-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .velu-manual-api-send {
+    margin-left: 0;
+  }
+}
+
+.velu-openapi-warning {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  padding: 0.75rem 0.9rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-openapi-schema-wrapper {
+  margin: 1rem 0;
+}
+
+.velu-openapi-schema {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  padding: 0.9rem;
+}
+
+.velu-openapi-schema > h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.05rem;
+}
+
+.velu-openapi-schema > p {
+  margin: 0 0 0.6rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-openapi-schema-json {
+  margin: 0;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.55rem;
+  padding: 0.7rem;
+  overflow: auto;
+  background: color-mix(in oklab, var(--color-fd-background) 85%, var(--color-fd-card));
+}
+
+.velu-api-toc-rail {
+  margin-top: 0.35rem;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.velu-api-toc-rail #velu-api-toc-rail-host {
+  width: 100%;
+  min-width: 0;
+}
+
+.velu-api-toc-example {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.velu-openapi-example-source {
+  display: none;
+}
+
+#velu-api-toc-rail-host .velu-openapi-example-source {
+  display: block;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+#velu-api-toc-rail-host .velu-openapi-example-source > * {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+#velu-api-toc-rail-host .prose-no-margin,
+#velu-api-toc-rail-host [role='tablist'],
+#velu-api-toc-rail-host [role='tabpanel'],
+#velu-api-toc-rail-host figure {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+#velu-api-toc-rail-host [role='tabpanel'] > figure {
+  margin: 0 !important;
+  border-radius: 0.65rem !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  background: transparent !important;
+}
+
+#velu-api-toc-rail-host .velu-openapi-example-source pre,
+#velu-api-toc-rail-host .velu-openapi-example-source .shiki,
+#velu-api-toc-rail-host .velu-openapi-example-source [data-codeblock] {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+#velu-api-toc-rail-host .fd-scroll-container {
+  width: 100% !important;
+  max-width: 100% !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  --padding-right: calc(var(--spacing) * 4) !important;
+}
+
+#nd-toc:has(.velu-api-toc-rail) > :not(.velu-api-toc-rail) {
+  display: none !important;
+}
+
+.velu-update {
+  display: grid;
+  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
+  column-gap: 1rem;
+  row-gap: 0.45rem;
+  align-items: start;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  padding: 0;
+  margin: 1rem 0 1.5rem;
+}
+
+.velu-request-example,
+.velu-response-example {
+  margin: 0;
+}
+
+.velu-request-example:not(.velu-in-toc-example),
+.velu-response-example:not(.velu-in-toc-example) {
+  margin: 1rem 0;
+}
+
+.velu-request-example > *:first-child,
+.velu-response-example > *:first-child {
+  margin-top: 0 !important;
+}
+
+.velu-request-example > *:last-child,
+.velu-response-example > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+.velu-response-example-status {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.72rem;
+  color: var(--color-fd-muted-foreground);
+  margin-bottom: 0.45rem;
+}
+
+.velu-endpoint-head {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.velu-endpoint-head span {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: #fff;
+  background: var(--color-fd-primary);
+  padding: 0.1rem 0.45rem;
+  border-radius: 0.35rem;
+}
+
+.velu-endpoint-body {
+  margin-top: 0.55rem;
+}
+
+.velu-video iframe {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
+  border-radius: 0.6rem;
+  margin: 1rem 0;
+}
+
+.velu-update-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding-left: 1rem;
+  position: sticky;
+  top: calc(var(--fd-nav-height, 0px) + 0.75rem);
+  align-self: start;
+}
+
+.velu-update-anchor {
+  position: absolute;
+  left: 0;
+  top: 0.33rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.85rem;
+  height: 0.85rem;
+  color: var(--color-fd-muted-foreground);
+  text-decoration: none;
+  opacity: 0.75;
+  visibility: visible;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.velu-update-anchor svg {
+  width: 0.82rem;
+  height: 0.82rem;
+}
+
+.velu-update:hover .velu-update-anchor,
+.velu-update:focus-within .velu-update-anchor,
+.velu-update-anchor:focus-visible {
+  opacity: 1;
+}
+
+.velu-update-anchor:hover {
+  color: var(--color-fd-foreground);
+}
+
+.velu-update-label {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  border-radius: 999px;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.76rem;
+  font-weight: 600;
+  color: var(--color-fd-primary-foreground, #fff);
+  background: var(--color-fd-primary);
+  text-decoration: none;
+}
+
+.velu-update-label:hover {
+  background: color-mix(in oklab, var(--color-fd-primary) 86%, black);
+  color: var(--color-fd-primary-foreground, #fff);
+}
+
+.velu-update-description {
+  color: var(--color-fd-muted-foreground);
+  font-size: 0.85rem;
+}
+
+.velu-update-tags {
+  display: grid;
+  gap: 0.18rem;
+}
+
+.velu-update-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  border-radius: 0;
+  font-size: 0.72rem;
+  line-height: 1.3;
+  padding: 0;
+  color: color-mix(in oklab, var(--color-fd-foreground) 82%, var(--color-fd-muted-foreground));
+}
+
+.velu-update-content {
+  min-width: 0;
+}
+
+.velu-update-content > :first-child {
+  margin-top: 0;
+}
+
+.velu-update-content > :last-child {
+  margin-bottom: 0;
+}
+
+.velu-update[hidden] {
+  display: none !important;
+}
+
+.velu-changelog-filter-block {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.velu-changelog-filter-heading {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-fd-foreground);
+}
+
+.velu-changelog-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin: 0;
+}
+
+.velu-changelog-filter-host {
+  margin-bottom: 0.4rem;
+}
+
+#nd-toc.velu-changelog-filters-only > h3,
+#nd-toc.velu-changelog-filters-only > .relative {
+  display: none !important;
+}
+
+.velu-changelog-filter {
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 0.22rem 0.65rem;
+  font-size: 0.74rem;
+  font-weight: 500;
+  line-height: 1.25;
+  color: color-mix(in oklab, var(--color-fd-foreground) 82%, var(--color-fd-muted-foreground));
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
+}
+
+.velu-changelog-filter:hover {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
+  color: var(--color-fd-foreground);
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 18%, transparent);
+}
+
+.velu-changelog-filter.active {
+  color: var(--color-fd-primary);
+  border-color: color-mix(in oklab, var(--color-fd-primary) 35%, transparent);
+  background: color-mix(in oklab, var(--color-fd-primary) 16%, transparent);
+}
+
+@media (max-width: 768px) {
+  .velu-update {
+    grid-template-columns: 1fr;
+  }
+
+  .velu-update-meta {
+    position: static;
+    top: auto;
+    padding-left: 0;
+  }
+
+  .velu-update-anchor {
+    position: static;
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: -0.15rem;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .velu-changelog-filters {
+    margin-bottom: 0.45rem;
+  }
+}
+
+.velu-view {
+  margin: 1rem 0;
+}
+
+.velu-view-toc-host {
+  margin-bottom: 0.75rem;
+}
+
+.velu-view-toc-switcher {
+  position: relative;
+}
+
+.velu-view-toc-trigger {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.55rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.9rem;
+  background: var(--color-fd-card);
+  color: var(--color-fd-foreground);
+  font-size: 1.02rem;
+  font-weight: 500;
+  line-height: 1.15;
+  padding: 0.7rem 0.85rem;
+  cursor: pointer;
+  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
+}
+
+.velu-view-toc-trigger:hover {
+  border-color: var(--color-fd-primary);
+}
+
+.velu-view-toc-trigger > span {
+  flex: 1;
+  text-align: left;
+}
+
+.velu-view-toc-chevron {
+  width: 1rem;
+  height: 1rem;
+  transition: transform 0.15s ease;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-view-toc-chevron.open {
+  transform: rotate(180deg);
+}
+
+.velu-view-toc-menu {
+  margin-top: 0.35rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.9rem;
+  background: var(--color-fd-card);
+  overflow: hidden;
+}
+
+.velu-view-toc-option {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+  padding: 0.7rem 0.85rem;
+  border: 0;
+  border-top: 1px solid transparent;
+  background: transparent;
+  color: var(--color-fd-foreground);
+  font-size: 1.02rem;
+  text-align: left;
+  cursor: pointer;
+}
+
+.velu-view-toc-option + .velu-view-toc-option {
+  border-top-color: var(--color-fd-border);
+}
+
+.velu-view-toc-option:hover {
+  background: var(--color-fd-accent);
+}
+
+.velu-view-toc-option-main {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.velu-view-check {
+  width: 1rem;
+  height: 1rem;
+  color: #15803d;
+}
+
+.velu-view-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.velu-view-option-icon {
+  width: 0.95rem;
+  height: 0.95rem;
+  flex-shrink: 0;
+}
+
+.velu-view-option-icon-img {
+  margin: 0 !important;
+  border-radius: 0.16rem;
+  object-fit: contain;
+}
+
+/* Fallback utilities for imported MDX media classes. */
+#nd-page .w-full {
+  width: 100% !important;
+}
+
+#nd-page .h-96 {
+  height: 24rem !important;
+}
+
+#nd-page .rounded-lg {
+  border-radius: 0.5rem !important;
+}
+
+#nd-page .rounded-xl {
+  border-radius: 0.75rem !important;
+}
+
+#nd-page :is(img, iframe, video).aspect-video {
+  width: 100% !important;
+  aspect-ratio: 16 / 9 !important;
+  height: auto !important;
+  display: block;
+}
+
+#nd-page iframe {
+  border: 0;
+}
+
+#nd-page img.velu-image-zoomable,
+#nd-page .velu-frame-content img.velu-image-zoomable {
+  cursor: zoom-in !important;
+}
+
+#nd-page img.velu-image-zoomable-fallback,
+#nd-page .velu-frame-content img.velu-image-zoomable-fallback {
+  cursor: zoom-in !important;
+}
+
+.velu-image-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 120;
+  background: rgba(0, 0, 0, 0.82);
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.velu-image-lightbox-img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: min(94vw, 1500px);
+  max-height: 90vh;
+  border-radius: 0.75rem;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
+  cursor: auto;
+}
+
+.velu-image-lightbox-close {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  background: rgba(0, 0, 0, 0.58);
+  color: #fff;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 999px;
+  font-size: 1.45rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.velu-view-content > :first-child {
+  margin-top: 0;
+}
+
+.velu-view-content > :last-child {
+  margin-bottom: 0;
+}
+
+.velu-toc-replaced > * {
+  display: none !important;
+}
+
+.velu-toc-examples {
+  display: grid;
+  gap: 0.9rem;
+  margin-top: 0.75rem;
+  width: calc(100% - 0.35rem);
+  box-sizing: border-box;
+}
+
+#nd-toc .velu-in-toc-example {
+  margin: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+#nd-toc .velu-in-toc-example.velu-panel {
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  border-radius: 1rem;
+  padding: 0.45rem;
+}
+
+#nd-toc .velu-in-toc-example h4 {
+  margin-bottom: 0.55rem;
+}
+
+.velu-toc-replaced {
+  padding-right: 0.5rem !important;
+  overflow: visible !important;
+}
+
+.velu-toc-replaced > .velu-toc-examples {
+  display: grid !important;
+}
+
+#nd-toc .velu-in-toc-example pre,
+#nd-toc .velu-in-toc-example [data-codeblock],
+#nd-toc .velu-in-toc-example .shiki {
+  max-width: 100% !important;
+  overflow-x: auto !important;
+}
+
+#nd-toc .velu-in-toc-example [role='tablist'],
+#nd-toc .velu-in-toc-example [role='tabpanel'],
+#nd-toc .velu-in-toc-example [data-codeblock] {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+}
+
+#nd-toc .velu-in-toc-example [role='tabpanel'] {
+  padding: 0 !important;
+}
+
+#nd-toc .velu-in-toc-example [role='tabpanel'] > figure {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  box-sizing: border-box;
+}
+
+#nd-toc .velu-in-toc-example pre,
+#nd-toc .velu-in-toc-example .shiki,
+#nd-toc .velu-in-toc-example .shiki code {
+  display: block !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box;
+}
+
+#nd-toc .velu-in-toc-example .fd-scroll-container {
+  width: 100% !important;
+  max-width: 100% !important;
+  box-sizing: border-box;
+  --padding-right: calc(var(--spacing) * 4) !important;
+}
+
+#nd-toc .velu-in-toc-example .fd-scroll-container > pre {
+  width: 100% !important;
+  min-width: 100% !important;
+}
+
+@media (max-width: 1023px) {
+  .velu-toc-replaced > * {
+    display: unset !important;
+  }
+
+  .velu-toc-examples {
+    display: none !important;
+  }
+
+  #nd-page.velu-page-with-toc-examples {
+    max-width: 900px !important;
+  }
+}
+
+
+@media (min-width: 1024px) {
+  #nd-page.velu-page-with-toc-examples {
+    max-width: 680px !important;
+  }
+}
+
+.velu-tooltip-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.velu-tooltip {
+  text-decoration: underline dotted;
+  text-underline-offset: 0.2rem;
+  cursor: help;
+}
+
+.velu-tooltip-popover {
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 0.25rem);
+  transform: translateX(-50%) translateY(4px);
+  min-width: 14rem;
+  max-width: min(22rem, calc(100vw - 2rem));
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  background: var(--color-fd-popover);
+  color: var(--color-fd-foreground);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+  padding: 0.6rem 0.7rem;
+  display: grid;
+  gap: 0.25rem;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.14s ease, transform 0.14s ease;
+  z-index: 60;
+}
+
+/* Keep hover active while moving from trigger text to the tooltip card. */
+.velu-tooltip-popover::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.5rem;
+  height: 0.5rem;
+}
+
+.velu-tooltip-popover::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+  border-style: solid;
+  border-color: var(--color-fd-border) transparent transparent transparent;
+}
+
+.velu-tooltip-wrap:hover .velu-tooltip-popover,
+.velu-tooltip-wrap:focus-within .velu-tooltip-popover {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateX(-50%) translateY(0);
+}
+
+.velu-tooltip-headline {
+  font-size: 0.8rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.velu-tooltip-text {
+  font-size: 0.78rem;
+  line-height: 1.45;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-tooltip-cta {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--color-fd-primary);
+  text-decoration: none;
+}
+
+.velu-inline-icon {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 1rem;
+  height: 1rem;
+}
+
+.velu-inline-icon svg,
+.velu-inline-icon img {
+  width: 100%;
+  height: 100%;
+}
+
+.velu-mermaid {
+  position: relative;
+  border: 0;
+  border-radius: 0.6rem;
+  padding: 0;
+  background: transparent;
+  overflow: hidden;
+}
+
+.velu-mermaid-stage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 180px;
+  transform-origin: center center;
+  transition: transform 0.18s ease;
+}
+
+.velu-mermaid-svg {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.velu-mermaid-svg svg {
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+.velu-mermaid-error {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 0.85rem;
+}
+
+.velu-mermaid-controls {
+  position: absolute;
+  display: grid;
+  grid-template-columns: repeat(3, 2.25rem);
+  grid-template-rows: repeat(3, 2.25rem);
+  gap: 0.28rem;
+  width: auto;
+  padding: 0.28rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.65rem;
+  background: color-mix(in oklab, var(--color-fd-card) 96%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+.velu-mermaid-controls button {
+  border: 1px solid var(--color-fd-border);
+  background: color-mix(in oklab, var(--color-fd-card) 82%, transparent);
+  color: var(--color-fd-foreground);
+  border-radius: 0.5rem;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.velu-mermaid-controls button:hover {
+  border-color: var(--color-fd-primary);
+  color: var(--color-fd-primary);
+}
+
+.velu-mermaid-btn-up { grid-column: 2; grid-row: 1; }
+.velu-mermaid-btn-zoom-in { grid-column: 3; grid-row: 1; }
+.velu-mermaid-btn-left { grid-column: 1; grid-row: 2; }
+.velu-mermaid-btn-reset { grid-column: 2; grid-row: 2; }
+.velu-mermaid-btn-right { grid-column: 3; grid-row: 2; }
+.velu-mermaid-btn-down { grid-column: 2; grid-row: 3; }
+.velu-mermaid-btn-zoom-out { grid-column: 3; grid-row: 3; }
+
+.velu-mermaid-controls-top-left { top: 0.55rem; left: 0.55rem; }
+.velu-mermaid-controls-top-right { top: 0.55rem; right: 0.55rem; }
+.velu-mermaid-controls-bottom-left { bottom: 0.55rem; left: 0.55rem; }
+.velu-mermaid-controls-bottom-right { bottom: 0.55rem; right: 0.55rem; }
+
+@media (max-width: 768px) {
+  .velu-mermaid-controls {
+    grid-template-columns: repeat(3, 2rem);
+    grid-template-rows: repeat(3, 2rem);
+  }
+}
+
+.velu-callout {
+  border-width: 1px;
+  box-shadow: none;
+}
+
+.velu-callout > div:last-child > div {
+  color: inherit;
+}
+
+.velu-callout-info {
+  background: rgba(37, 99, 235, 0.1);
+  border-color: rgba(37, 99, 235, 0.26);
+  color: #1e40af;
+}
+
+:root[data-theme='dark'] .velu-callout-info,
+.dark .velu-callout-info {
+  background: rgba(37, 99, 235, 0.14);
+  border-color: rgba(37, 99, 235, 0.32);
+  color: #bfdbfe;
+}
+
+.velu-callout-warning {
+  background: rgba(245, 158, 11, 0.16);
+  border-color: rgba(245, 158, 11, 0.34);
+  color: #92400e;
+}
+
+.velu-callout-success {
+  background: rgba(22, 163, 74, 0.14);
+  border-color: rgba(22, 163, 74, 0.34);
+  color: #166534;
+}
+
+.velu-callout-error {
+  background: rgba(220, 38, 38, 0.16);
+  border-color: rgba(220, 38, 38, 0.34);
+  color: #991b1b;
+}
+
+.velu-callout-idea {
+  background: rgba(147, 51, 234, 0.14);
+  border-color: rgba(147, 51, 234, 0.32);
+  color: #6b21a8;
+}
+
+:root[data-theme='dark'] .velu-callout-warning,
+.dark .velu-callout-warning {
+  color: #fde68a;
+}
+
+:root[data-theme='dark'] .velu-callout-success,
+.dark .velu-callout-success {
+  color: #bbf7d0;
+}
+
+:root[data-theme='dark'] .velu-callout-error,
+.dark .velu-callout-error {
+  color: #fecaca;
+}
+
+:root[data-theme='dark'] .velu-callout-idea,
+.dark .velu-callout-idea {
+  color: #e9d5ff;
+}
+
+.velu-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: 1px solid transparent;
+  border-radius: 0.35rem;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.velu-badge-icon {
+  display: inline-flex;
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.velu-badge-icon svg,
+.velu-badge-icon img {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.velu-badge-size-sm {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.4rem;
+}
+
+.velu-badge-size-xs {
+  font-size: 0.66rem;
+  padding: 0.06rem 0.32rem;
+}
+
+.velu-badge-size-md {
+  font-size: 0.75rem;
+  padding: 0.15rem 0.5rem;
+}
+
+.velu-badge-size-lg {
+  font-size: 0.82rem;
+  padding: 0.2rem 0.6rem;
+}
+
+.velu-badge-shape-rounded {
+  border-radius: 0.35rem;
+}
+
+.velu-badge-shape-pill {
+  border-radius: 999px;
+}
+
+.velu-badge-shape-square {
+  border-radius: 0.4rem;
+}
+
+.velu-badge-color-gray {
+  background: color-mix(in oklab, var(--color-fd-muted-foreground) 14%, transparent);
+  color: var(--color-fd-foreground);
+}
+
+.velu-badge-color-blue {
+  background: rgba(37, 99, 235, 0.14);
+  color: #1d4ed8;
+}
+
+.velu-badge-color-green {
+  background: rgba(22, 163, 74, 0.16);
+  color: #15803d;
+}
+
+.velu-badge-color-yellow {
+  background: rgba(245, 158, 11, 0.2);
+  color: #a16207;
+}
+
+.velu-badge-color-red {
+  background: rgba(220, 38, 38, 0.16);
+  color: #b91c1c;
+}
+
+.velu-badge-color-purple {
+  background: rgba(147, 51, 234, 0.16);
+  color: #7e22ce;
+}
+
+.velu-badge-color-white {
+  background: #fff;
+  color: #111827;
+  border-color: rgba(17, 24, 39, 0.16);
+}
+
+.velu-badge-color-surface {
+  background: var(--color-fd-card);
+  color: var(--color-fd-foreground);
+  border-color: var(--color-fd-border);
+}
+
+.velu-badge-color-white-destructive {
+  background: #fff;
+  color: #b91c1c;
+  border-color: rgba(185, 28, 28, 0.26);
+}
+
+.velu-badge-color-surface-destructive {
+  background: rgba(220, 38, 38, 0.1);
+  color: #b91c1c;
+  border-color: rgba(220, 38, 38, 0.25);
+}
+
+.velu-badge-color-orange {
+  background: rgba(234, 88, 12, 0.16);
+  color: #c2410c;
+}
+
+.velu-badge-stroke {
+  background: transparent;
+  border-color: currentColor;
+}
+
+.velu-badge-disabled {
+  opacity: 0.5;
+}
+
+.velu-banner {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-accent);
+  border-radius: 0.6rem;
+  padding: 0.75rem 0.9rem;
+  margin: 1rem 0;
+  color: var(--color-fd-foreground);
+  text-decoration: none;
+  line-height: 1.35;
+}
+
+.velu-banner:hover {
+  border-color: var(--color-fd-primary);
+}
+
+.velu-banner-icon {
+  width: 1rem;
+  height: 1rem;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.velu-banner-icon svg,
+.velu-banner-icon img {
+  width: 1rem;
+  height: 1rem;
+}
+
+.velu-banner-content {
+  min-width: 0;
+}
+
+.velu-banner-content > p {
+  margin: 0;
+}
+
+.velu-banner-content > :first-child {
+  margin-top: 0;
+}
+
+.velu-banner-content > :last-child {
+  margin-bottom: 0;
+}
+
+.velu-banner-info {
+  background: rgba(37, 99, 235, 0.1);
+  border-color: rgba(37, 99, 235, 0.25);
+}
+
+.velu-banner-success {
+  background: rgba(22, 163, 74, 0.12);
+  border-color: rgba(22, 163, 74, 0.28);
+}
+
+.velu-banner-warning {
+  background: rgba(245, 158, 11, 0.15);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+.velu-color {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.5rem;
+  padding: 0.35rem 0.5rem;
+}
+
+.velu-color-swatch {
+  background: var(--velu-color-light, transparent);
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.2rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+:root[data-theme='dark'] .velu-color-swatch {
+  background: var(--velu-color-dark, var(--velu-color-light, transparent));
+}
+
+.dark .velu-color-swatch {
+  background: var(--velu-color-dark, var(--velu-color-light, transparent));
+}
+
+.velu-color-group {
+  display: grid;
+  gap: 0.65rem;
+  width: 100%;
+}
+
+.velu-color-compact {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.75rem;
+}
+
+.velu-color-table {
+  grid-template-columns: 1fr;
+}
+
+.velu-color-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.5rem;
+  padding: 0.35rem 0.5rem;
+  background: var(--color-fd-card);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.velu-color-item:hover {
+  border-color: var(--color-fd-primary);
+}
+
+.velu-color-item[data-copied='true'] {
+  border-color: color-mix(in oklab, var(--color-fd-primary) 70%, transparent);
+  background: color-mix(in oklab, var(--color-fd-primary) 10%, var(--color-fd-card));
+}
+
+.velu-color-compact .velu-color-item {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.45rem;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.velu-color-swatch-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.velu-color-compact .velu-color-swatch {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1.35 / 1;
+  border-radius: 0.55rem;
+  border: 0;
+}
+
+.velu-color-copied-check {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.4rem;
+  width: 1.2rem;
+  height: 1.2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(3, 7, 18, 0.75);
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: 700;
+  opacity: 0;
+  transform: scale(0.82);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  pointer-events: none;
+}
+
+.velu-color-copied-check.is-visible {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.velu-color-item-text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  min-width: 0;
+}
+
+.velu-color-compact .velu-color-item-text {
+  padding: 0 0.1rem;
+}
+
+.velu-color-compact .velu-color-item-text code {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-fd-foreground);
+}
+
+.velu-color-item-text > span {
+  font-size: 0.75rem;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-color-compact .velu-color-item-text > span {
+  font-size: 0.95rem;
+}
+
+.velu-color-row {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.velu-color-row-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-fd-muted-foreground);
+}
+
+.velu-color-row-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.5rem;
+}
+
+.velu-color-table .velu-color-row {
+  grid-template-columns: 140px 1fr;
+  align-items: center;
+  gap: 0.9rem;
+}
+
+.velu-color-table .velu-color-row-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--color-fd-foreground);
+}
+
+.velu-color-table .velu-color-row-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem;
+}
+
+.velu-color-table .velu-color-item {
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.velu-color-table .velu-color-item-text {
+  display: none;
+}
+
+.velu-color-table .velu-color-swatch {
+  width: 4.5rem;
+  height: 3rem;
+  border-radius: 0.55rem;
+  border: 0;
+}
+
+.velu-color-table .velu-color-copied-check {
+  top: 0.25rem;
+  right: 0.25rem;
+}
+
+.velu-columns,
+.velu-examples {
+  display: grid;
+  grid-template-columns: repeat(var(--velu-columns-count, auto-fit), minmax(220px, 1fr));
+  gap: 0.8rem;
+  margin: 1rem 0;
+}
+
+.velu-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 0.8rem;
+  margin: 1rem 0;
+}
+
+.velu-column,
+.velu-response {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.6rem;
+  padding: 0.7rem;
+}
+
+.velu-panel {
+  border: 1px solid var(--color-fd-border);
+  background: var(--color-fd-card);
+  border-radius: 1rem;
+  padding: 0.45rem;
+  margin: 1rem 0;
+}
+
+.velu-panel h4 {
+  margin: 0 0 0.35rem;
+}
+
+.velu-panel .velu-callout,
+#nd-toc .velu-in-toc-example.velu-panel .velu-callout {
+  margin: 0;
+}
+
+.velu-prompt {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.8rem;
+  padding: 0.6rem 0.75rem;
+  background: var(--color-fd-card);
+  margin: 1rem 0;
+}
+
+.velu-prompt-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+
+.velu-prompt-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.velu-prompt-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-fd-muted-foreground);
+  flex-shrink: 0;
+}
+
+.velu-prompt-desc {
+  color: var(--color-fd-foreground);
+  font-size: 0.95rem;
+  font-weight: 400;
+  line-height: 1.35;
+  min-width: 0;
+}
+
+.velu-prompt-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-shrink: 0;
+}
+
+.velu-prompt-copy {
+  border: 0;
+  border-radius: 0.45rem;
+  background: var(--color-fd-primary);
+  color: var(--color-fd-primary-foreground, #fff);
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0 0.55rem;
+  height: 1.72rem;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1.15;
+}
+
+.velu-prompt-copy:hover {
+  background: color-mix(in oklab, var(--color-fd-primary) 86%, black);
+}
+
+.velu-prompt-open {
+  border: 1px solid var(--color-fd-border);
+  border-radius: 0.45rem;
+  background: var(--color-fd-background);
+  color: var(--color-fd-foreground);
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0 0.5rem;
+  height: 1.72rem;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1.15;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.velu-prompt-open:hover {
+  background: var(--color-fd-accent);
+}
+
+.velu-prompt-open-icon {
+  width: 0.85rem;
+  height: 0.85rem;
+  flex-shrink: 0;
+}
+
+.velu-prompt-open-icon-on-light {
+  filter: brightness(0.55) contrast(1.35);
+}
+
+.velu-prompt-open-icon-on-dark {
+  filter: invert(1) brightness(1.08) contrast(1.1);
+}
+
+.velu-prompt-open-icon-on-dark {
+  display: none;
+}
+
+:root[data-theme='dark'] .velu-prompt-open-icon-on-light,
+.dark .velu-prompt-open-icon-on-light {
+  display: none;
+}
+
+:root[data-theme='dark'] .velu-prompt-open-icon-on-dark,
+.dark .velu-prompt-open-icon-on-dark {
+  display: inline-block;
+}
+
+.velu-tile {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border: 0;
+  border-radius: 0.75rem;
+  padding: 0.85rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.velu-tile:hover {
+  background: var(--color-fd-accent);
+}
+
+.velu-tile-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 170px;
+  border: 0;
+  border-radius: 0.9rem;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--color-fd-card) 92%, transparent);
+  padding: 1rem;
+}
+
+.velu-tile-preview img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: min(100%, 320px);
+  max-height: 230px;
+  margin: 0 !important;
+}
+
+/* Fallback for MDX utility classes that may not be generated in this app build. */
+.velu-tile-preview .hidden {
+  display: none;
+}
+
+.velu-tile-preview .block {
+  display: block;
+}
+
+:root[data-theme='dark'] .velu-tile-preview .dark\:hidden,
+.dark .velu-tile-preview .dark\:hidden {
+  display: none !important;
+}
+
+:root[data-theme='dark'] .velu-tile-preview .dark\:block,
+.dark .velu-tile-preview .dark\:block {
+  display: block !important;
+}
+
+.velu-tile-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  text-align: center;
+  align-items: center;
+}
+
+.velu-tile-title {
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.velu-tile-description {
+  font-size: 0.9rem;
+  color: var(--color-fd-muted-foreground);
+  line-height: 1.4;
+}
+
+.velu-tree,
+.velu-files {
+  margin: 1rem 0;
+}
+
+.velu-tree .velu-tree-file,
+.velu-files .velu-tree-file {
+  font-family: var(--font-fd-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+.velu-tree-folder-static .velu-tree-folder-label {
+  display: flex;
+  align-items: center;
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.velu-tree-children {
+  margin-inline-start: 0.5rem;
+  border-inline-start: 1px solid var(--color-fd-border);
+  padding-inline-start: 0.5rem;
+}
+
+.velu-tree ul {
+  margin: 0.2rem 0 0.2rem 1rem;
+}