@import "tailwindcss";

@import "fumadocs-ui/css/neutral.css";

@import "fumadocs-ui/css/preset.css";

@import "fumadocs-openapi/css/preset.css";

/* Prevent overscroll bounce effect on the page */

html,

body {

overscroll-behavior: none;

}

/* Prevent modals/dialogs from shifting layout via scroll-lock compensation */

html,

body {

padding-right: 0 !important;

margin-right: 0 !important;

}

@theme {

--color-fd-primary: var(--color-fd-foreground);

}

/* Pure white light mode background */

:root:not(.dark) {

--color-fd-background: hsl(0, 0%, 100%) !important;

}

/* Match landing page dark background (#1b1b1b) */

.dark {

--color-fd-background: hsl(0, 0%, 10.6%) !important;

--color-fd-card: hsl(0, 0%, 13%) !important;

--color-fd-popover: hsl(0, 0%, 14%) !important;

--color-fd-secondary: hsl(0, 0%, 15.5%) !important;

--color-fd-muted: hsl(0, 0%, 18%) !important;

}

/* Font family utilities */

.font-sans {

font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,

"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

.font-mono {

font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,

"Liberation Mono", "Courier New", monospace;

}

:root {

--fd-border-sidebar: transparent !important;

--fd-nav-height: 92px; /* Custom navbar height (52px top + 40px tabs) */

/* Content container width used to center main content */

--spacing-fd-container: 1400px;

/* Edge gutter = leftover space on each side of centered container */

--edge-gutter: max(1rem, calc((100vw - var(--spacing-fd-container)) / 2));

/* How far sidebar/TOC shift inward from the edge gutter */

--sidebar-shift: 50px;

--sidebar-offset: max(0px, calc(var(--edge-gutter) - var(--sidebar-shift)));

--toc-shift: 50px;

--toc-offset: max(0px, calc(var(--edge-gutter) - var(--toc-shift)));

/* Inner padding for navbar and sidebar — single source of truth */

--nav-inset: 44px;

/* Extra gap between sidebar/TOC and the main text content */

--content-gap: 2.25rem;

}

/* Light mode navbar background */

:root:not(.dark) nav {

background-color: hsla(0, 0%, 100%, 0.85) !important;

}

/* Dark mode navbar background */

:root.dark nav {

background-color: hsla(0, 0%, 10.6%, 0.92) !important;

}

:root.dark nav button[data-search-trigger] {

background-color: hsla(0, 0%, 15%, 0.85) !important;

backdrop-filter: blur(33px) saturate(180%) !important;

-webkit-backdrop-filter: blur(33px) saturate(180%) !important;

color: rgba(255, 255, 255, 0.5) !important;

}

:root.dark nav button[data-search-trigger] kbd {

color: rgba(255, 255, 255, 0.4) !important;

}

/* Floating sidebar appearance - remove background */

[data-sidebar-container],

#nd-sidebar {

background: transparent !important;

border: none !important;

--color-fd-muted: transparent !important;

--color-fd-card: transparent !important;

--color-fd-secondary: transparent !important;

}

aside[data-sidebar],

aside#nd-sidebar {

background: transparent !important;

border: none !important;

}

/* Remove the fade-out mask on sidebar scroll viewport (Fumadocs applies inline maskImage) */

[data-sidebar-placeholder] [data-radix-scroll-area-viewport],

#nd-sidebar [data-radix-scroll-area-viewport],

#nd-sidebar [data-radix-scroll-area-viewport] > div,

aside#nd-sidebar [data-radix-scroll-area-viewport] {

mask: none !important;

mask-image: none !important;

-webkit-mask: none !important;

-webkit-mask-image: none !important;

}

/* Fumadocs v16: Add sidebar placeholder styling for grid area */

[data-sidebar-placeholder] {

background: transparent !important;

}

/* Fumadocs v16: Hide sidebar panel (floating collapse button) */

[data-sidebar-panel] {

display: none !important;

}

/* Mobile only: Reduce gap between navbar and content (custom navbar hidden on mobile) */

@media (max-width: 1023px) {

#nd-docs-layout {

margin-top: -25px;

}

}

/* Hide TOC popover on tablet/medium screens (768px - 1279px) */

/* Keeps it visible on mobile (<768px) for easy navigation */

/* Desktop (>=1280px) already hides it via fumadocs xl:hidden */

@media (min-width: 768px) and (max-width: 1279px) {

#nd-docs-layout {

--fd-toc-popover-height: 0px !important;

}

[data-toc-popover] {

display: none !important;

}

}

/* Desktop only: Apply custom navbar offset, sidebar width and margin offsets */

/* On mobile, let fumadocs handle the layout natively */

@media (min-width: 1024px) {

:root {

--fd-banner-height: 92px !important; /* 52px top + 40px tabs */

}

#nd-docs-layout {

/* Use 100dvh so sidebar height = 100dvh - 92px (banner) = full viewport below navbar */

--fd-docs-height: 100dvh !important;

--fd-sidebar-width: 300px !important;

margin-left: var(--sidebar-offset) !important;

margin-right: var(--toc-offset) !important;

min-height: var(--fd-docs-height) !important;

}

/* Sidebar divider line — fixed to viewport, full height from navbar to bottom */

#nd-docs-layout::before {

content: "";

position: fixed;

top: 92px; /* below navbar */

bottom: 0;

left: calc(var(--sidebar-offset) + var(--fd-sidebar-width));

width: 1px;

background-color: rgba(0, 0, 0, 0.08);

pointer-events: none;

z-index: 21;

}

html.dark #nd-docs-layout::before {

background-color: rgba(255, 255, 255, 0.08);

}

/* Hide fumadocs nav on desktop - we use custom navbar there */

#nd-docs-layout > header {

display: none !important;

}

}

/* Sidebar spacing — left padding aligns item text with navbar content (item has 14px internal padding) */

[data-sidebar-viewport],

#nd-sidebar > div {

padding: 0 14px 0 calc(var(--nav-inset) - 14px) !important;

background: transparent !important;

}

/* Override Fumadocs p-4 on scroll viewport — must beat Tailwind v4 utility layer specificity */

html #nd-sidebar [data-radix-scroll-area-viewport],

html #nd-sidebar [data-radix-scroll-area-viewport].p-4,

html aside#nd-sidebar [data-radix-scroll-area-viewport] {

padding: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

padding-left: 0 !important;

padding-right: 0 !important;

}

/* Top/bottom breathing room inside the scrollable sidebar content — scrollable, not clipped */

html #nd-sidebar [data-radix-scroll-area-viewport] > div {

padding-top: 20px !important;

padding-bottom: 16px !important;

}

/* Override sidebar item styling to match Raindrop */

/* Target Link and button elements in sidebar - override Fumadocs itemVariants */

/* Exclude the small chevron-only toggle buttons */

/* Using html prefix for higher specificity over Tailwind v4 utilities */

html #nd-sidebar a:not(:has(span.font-mono)),

html #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {

font-size: 0.875rem !important; /* 14px to match navbar items */

line-height: 1.4 !important;

padding: 0.375rem 0.875rem !important;

font-weight: 450 !important;

border-radius: 0.75rem !important;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,

sans-serif !important;

}

/* Sidebar text — aligned with platform --text-body */

html.dark #nd-sidebar a:not(:has(span.font-mono)),

html.dark #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {

color: #cdcdcd !important;

}

html:not(.dark) #nd-sidebar a:not(:has(span.font-mono)),

html:not(.dark) #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*="xpand"]) {

color: #3b3b3b !important;

}

/* Chevron icons — aligned with platform --text-icon */

#nd-sidebar svg {

display: inline-block !important;

opacity: 1 !important;

color: #5e5e5e !important;

flex-shrink: 0 !important;

}

html.dark #nd-sidebar svg {

color: #939393 !important;

}

/* Ensure the small chevron toggle buttons are visible */

#nd-sidebar button[aria-label*="ollapse"],

#nd-sidebar button[aria-label*="xpand"] {

display: flex !important;

opacity: 1 !important;

padding: 0.25rem !important;

}

/* Add tiny gap between nested items */

#nd-sidebar ul li {

margin-bottom: 0.0625rem !important;

}

#nd-sidebar ul li:last-child {

margin-bottom: 0 !important;

}

/* Section separator headers — styling handled by component, override fumadocs defaults */

[data-sidebar-viewport] [data-separator] p,

#nd-sidebar [data-separator] p {

font-size: 0.625rem !important; /* 10px */

font-weight: 600 !important;

text-transform: uppercase !important;

letter-spacing: 0.06em !important;

margin: 0 !important;

padding: 0 !important;

}

/* First separator has no top margin or divider; subsequent ones show the divider on desktop */

[data-separator]:not([data-separator] ~ [data-separator]) {

margin-top: 0;

}

@media (min-width: 1024px) {

[data-separator] ~ [data-separator] > .separator-divider {

display: block;

}

}

/* Active state — aligned with platform --surface-active */

#nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),

#nd-sidebar button[data-active="true"] {

background-image: none !important;

}

html.dark #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),

html.dark #nd-sidebar button[data-active="true"] {

background-color: #2c2c2c !important;

color: #cdcdcd !important;

}

html:not(.dark) #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)),

html:not(.dark) #nd-sidebar button[data-active="true"] {

background-color: #ececec !important;

color: #3b3b3b !important;

}

/* Hover state — aligned with platform --surface-hover */

html.dark #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),

html.dark #nd-sidebar button:hover:not([data-active="true"]) {

background-color: #262626 !important;

}

html:not(.dark) #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),

html:not(.dark) #nd-sidebar button:hover:not([data-active="true"]) {

background-color: #f2f2f2 !important;

}

/* Active items don't change on hover */

html.dark #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,

html.dark #nd-sidebar button[data-active="true"]:hover {

background-color: #2c2c2c !important;

color: #cdcdcd !important;

}

html:not(.dark) #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,

html:not(.dark) #nd-sidebar button[data-active="true"]:hover {

background-color: #ececec !important;

color: #3b3b3b !important;

}

/* Hide search, platform, and collapse button from sidebar completely */

[data-sidebar] [data-search],

[data-sidebar] .search-toggle,

#nd-sidebar [data-search],

#nd-sidebar .search-toggle,

[data-sidebar-viewport] [data-search],

[data-sidebar-viewport] button[data-search],

aside[data-sidebar] [role="button"]:has([data-search]),

aside[data-sidebar] > div > button:first-child,

#nd-sidebar > div > button:first-child,

[data-sidebar] a[href*="sim.ai"],

#nd-sidebar a[href*="sim.ai"],

[data-sidebar-viewport] a[href*="sim.ai"],

/* Hide search buttons (but NOT folder chevron buttons) */

aside[data-sidebar] > div:first-child

> button:not([aria-label="Collapse"]):not([aria-label="Expand"]),

#nd-sidebar > div:first-child > button:not([aria-label="Collapse"]):not([aria-label="Expand"]),

/* Hide sidebar collapse button (panel icon) - direct children only */

aside[data-sidebar] > button:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),

[data-sidebar]

> button[type="button"]:first-of-type:not([aria-label="Collapse"]):not([aria-label="Expand"]),

button[data-collapse]:not([aria-label="Collapse"]):not([aria-label="Expand"]),

[data-sidebar-header] button,

/* Hide theme toggle from sidebar footer */

aside[data-sidebar] [data-theme-toggle],

[data-sidebar-footer],

[data-sidebar] footer,

footer button[aria-label*="heme"],

aside[data-sidebar] > div:last-child:has(button[aria-label*="heme"]),

aside[data-sidebar] button[aria-label*="heme"],

[data-sidebar] button[aria-label*="Theme"],

/* Additional theme toggle selectors */

aside[data-sidebar] > *:last-child

button,

[data-sidebar-viewport] ~ *,

aside[data-sidebar] > div:not([data-sidebar-viewport]),

/* Aggressive theme toggle hiding */

aside[data-sidebar] svg[class*="sun"],

aside[data-sidebar] svg[class*="moon"],

aside[data-sidebar] button[type="button"]:last-child,

aside button:has(svg:only-child),

[data-sidebar] div:has(> button[type="button"]:only-child:last-child),

/* Hide theme toggle and other non-content elements */

aside[data-sidebar] > *:not([data-sidebar-viewport]) {

display: none !important;

}

/* Desktop only: Hide sidebar toggle buttons and nav title/logo (keep visible on mobile) */

@media (min-width: 1025px) {

[data-sidebar-container] > button,

[data-sidebar-container] [data-toggle],

aside[data-sidebar] [data-sidebar-toggle],

button[data-sidebar-toggle],

nav button[data-sidebar-toggle],

button[aria-label="Toggle Sidebar"],

button[aria-label="Collapse Sidebar"],

/* Hide nav title/logo in sidebar on desktop - target all possible locations */

/* Lower specificity selectors first (attribute selectors) */

[data-sidebar-header],

[data-sidebar] [data-title],

aside[data-sidebar] a[href="/"],

aside[data-sidebar] a[href="/"] img,

aside[data-sidebar] > a:first-child,

aside[data-sidebar] > div > a:first-child,

aside[data-sidebar] img[alt="Sim"],

aside[data-sidebar] svg[aria-label="Sim"],

/* Higher specificity selectors (ID selectors) */

#nd-sidebar

a[href="/"],

#nd-sidebar a[href="/"] img,

#nd-sidebar a[href="/"] svg,

#nd-sidebar > a:first-child,

#nd-sidebar > div:first-child > a:first-child,

#nd-sidebar img[alt="Sim"],

#nd-sidebar svg[aria-label="Sim"],

/* Hide theme toggle at bottom of sidebar on desktop */

#nd-sidebar

> footer,

#nd-sidebar footer,

aside#nd-sidebar > *:last-child:not(div),

#nd-sidebar > button:last-child,

#nd-sidebar button[aria-label*="theme" i],

#nd-sidebar button[aria-label*="Theme"],

#nd-sidebar > div:last-child > button {

display: none !important;

}

}

/* Extra aggressive - hide everything after the viewport */

aside[data-sidebar] [data-sidebar-viewport] ~ * {

display: none !important;

}

/* Tighter spacing for sidebar content */

[data-sidebar-viewport] > * {

margin-bottom: 0.0625rem;

}

[data-sidebar-viewport] > *:last-child {

margin-bottom: 0;

}

[data-sidebar-viewport] ul {

margin: 0;

padding: 0;

}

/* Ensure sidebar starts with content immediately */

aside[data-sidebar] > div:first-child {

padding-top: 0;

}

/* Remove all sidebar borders and backgrounds (except the right divider) */

[data-sidebar-container],

aside[data-sidebar],

[data-sidebar],

[data-sidebar] *,

#nd-sidebar,

#nd-sidebar * {

border: none !important;

}

/* Sidebar border is handled via #nd-docs-layout::before pseudo-element (see desktop section below) */

/* Override fumadocs background colors for sidebar */

.dark #nd-sidebar,

.dark [data-sidebar-container],

.dark aside[data-sidebar] {

--color-fd-muted: transparent !important;

--color-fd-secondary: transparent !important;

background: transparent !important;

}

/* Force normal text flow in sidebar */

[data-sidebar],

[data-sidebar] *,

[data-sidebar-viewport],

[data-sidebar-viewport] * {

writing-mode: horizontal-tb !important;

}

/* Apply Geist Mono to code elements */

code,

pre,

pre code {

font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,

"Liberation Mono", "Courier New", monospace;

}

/* Inline code — neutral colors aligned with sim design system */

:not(pre) > code {

padding: 0.2em 0.4em;

border-radius: 0.25rem;

font-size: 0.875em;

font-weight: 500;

}

/* Light mode inline code — neutral, no red */

:root:not(.dark) :not(pre) > code {

background-color: rgb(245 245 245);

color: rgb(55 65 81);

border: 1px solid rgb(229 231 235);

}

/* Dark mode inline code — neutral, no red */

.dark :not(pre) > code {

background-color: rgb(38 38 38);

color: rgb(212 212 216);

border: 1px solid rgb(63 63 70);

}

/* Remove heavy shadows globally — aligned with sim design system (shadow-card: 0 1px 3px rgba(0,0,0,0.04)) */

figure.shiki,

figure[data-rehype-pretty-code-figure],

.shiki {

box-shadow: none !important;

}

/* Search dialog — lighter shadow + constrained size */

[data-radix-popper-content-wrapper] > div,

[role="dialog"][data-state] {

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

}

[role="dialog"][data-state] {

max-width: 480px !important;

}

/* Search dialog overlay + panel must cover the sticky navbar — both default to z-50,

and the navbar wins the tie by DOM order, leaving it unblurred above the overlay */

.bg-fd-overlay,

[role="dialog"][data-state] {

z-index: 60 !important;

}

pre {

font-size: 0.875rem;

line-height: 1.7;

tab-size: 2;

-webkit-overflow-scrolling: touch;

}

pre code {

display: block;

width: fit-content;

min-width: 100%;

}

/* Syntax highlighting adjustments for better readability */

pre code .line {

padding-left: 0;

padding-right: 0;

}

/* Content typography — align heading sizes and weights with platform */

main article h1,

[data-content] h1,

#nd-page h1 {

font-size: 1.5rem !important;

font-weight: 550 !important;

letter-spacing: -0.02em;

color: rgba(0, 0, 0, 0.88);

}

html.dark main article h1,

html.dark [data-content] h1,

html.dark #nd-page h1 {

color: rgba(255, 255, 255, 0.92);

}

main article h2,

[data-content] h2,

#nd-page h2 {

font-size: 1.25rem !important;

font-weight: 500 !important;

letter-spacing: -0.015em;

color: rgba(0, 0, 0, 0.85);

}

html.dark main article h2,

html.dark [data-content] h2,

html.dark #nd-page h2 {

color: rgba(255, 255, 255, 0.88);

}

main article h3,

main article h4,

[data-content] h3,

[data-content] h4,

#nd-page h3,

#nd-page h4 {

font-size: 1rem !important;

font-weight: 470 !important;

letter-spacing: -0.01em;

color: rgba(0, 0, 0, 0.8);

}

html.dark main article h3,

html.dark main article h4,

html.dark [data-content] h3,

html.dark [data-content] h4,

html.dark #nd-page h3,

html.dark #nd-page h4 {

color: rgba(255, 255, 255, 0.85);

}

/* Body text — align with landing text colors */

main article p,

[data-content] p,

[data-docs-page] p {

color: rgba(0, 0, 0, 0.7);

}

html.dark main article p,

html.dark [data-content] p,

html.dark [data-docs-page] p {

color: rgba(255, 255, 255, 0.7);

}

/* Muted text — align with landing-text-muted (#999999) */

main article .text-muted-foreground,

[data-content] .text-muted-foreground,

[data-docs-page] .text-muted-foreground {

color: rgba(0, 0, 0, 0.45);

}

html.dark main article .text-muted-foreground,

html.dark [data-content] .text-muted-foreground,

html.dark [data-docs-page] .text-muted-foreground {

color: rgba(255, 255, 255, 0.45);

}

/* List items — inherit body text color */

main article li,

[data-content] li,

[data-docs-page] li {

color: rgba(0, 0, 0, 0.7);

}

html.dark main article li,

html.dark [data-content] li,

html.dark [data-docs-page] li {

color: rgba(255, 255, 255, 0.7);

}

/* Custom text highlighting styles */

.text-highlight {

color: var(--color-fd-primary);

}

/* Override marker color for highlighted lists */

.highlight-markers li::marker {

color: var(--color-fd-primary);

}

/* Remove the thin border-left on nested TOC items (keeps main indicator only) */

#nd-toc a[style*="padding-inline-start"] {

border-left: none !important;

}

/* TOC heading — align weight with landing */

#nd-toc h3,

#nd-toc [class*="title"] {

font-weight: 480 !important;

font-size: 0.8125rem !important;

color: rgba(0, 0, 0, 0.5);

}

html.dark #nd-toc h3,

html.dark #nd-toc [class*="title"] {

color: rgba(255, 255, 255, 0.45);

}

/* TOC links — softer colors aligned with landing muted text */

#nd-toc a {

font-weight: 430 !important;

font-size: 0.8125rem !important;

color: rgba(0, 0, 0, 0.5);

transition: color 0.2s;

}

html.dark #nd-toc a {

color: rgba(255, 255, 255, 0.45);

}

#nd-toc a:hover {

color: rgba(0, 0, 0, 0.75);

}

html.dark #nd-toc a:hover {

color: rgba(255, 255, 255, 0.7);

}

#nd-toc a[data-active="true"] {

color: rgba(0, 0, 0, 0.85) !important;

font-weight: 470 !important;

}

html.dark #nd-toc a[data-active="true"] {

color: rgba(255, 255, 255, 0.9) !important;

}

/* Add bottom spacing to prevent abrupt page endings */

[data-content] {

padding-top: 1.5rem !important;

padding-bottom: 4rem;

}

/* Alternative fallback for different Fumadocs versions */

main article,

.docs-page main {

padding-top: 1.5rem !important;

padding-bottom: 4rem;

}

/* Main content area - center and constrain like turborepo/raindrop */

/* Note: --sidebar-offset and --toc-offset are now applied at #nd-docs-layout level */

main[data-main] {

max-width: var(--spacing-fd-container, 1400px);

margin-left: auto;

margin-right: auto;

padding-top: 1rem;

padding-left: var(--content-gap);

padding-right: var(--content-gap);

order: 1 !important;

}

/* Adjust for smaller screens */

@media (max-width: 768px) {

main[data-main] {

padding-left: 1rem;

padding-right: 1rem;

}

#nd-page:has(.api-page-header) {

padding-left: 1rem;

padding-right: 1rem;

}

}

/* Ensure docs page content is properly constrained */

[data-docs-page] {

max-width: 1400px;

margin-left: auto;

margin-right: auto;

padding-top: 1.5rem !important;

}

/* Remove any unwanted outlines from video elements */

video {

outline: none !important;

}

/* API Reference Pages — Mintlify-style overrides */

/* OpenAPI pages: span main + TOC grid columns for wide two-column layout.

Use named grid lines from grid-template-areas so this works regardless

of whether the grid has 3 columns (production) or 5 columns (local dev). */

#nd-page:has(.api-page-header) {

grid-column: main-start / toc-end !important;

max-width: 1400px !important;

padding-left: calc(var(--content-gap) + 1rem);

padding-right: calc(var(--content-gap) + 1rem);

}

/* Hide the empty TOC aside on OpenAPI pages so it doesn't overlay content */

#nd-docs-layout:has(#nd-page:has(.api-page-header)) #nd-toc {

display: none;

}

/* Hide the default "Response Body" heading rendered by fumadocs-openapi */

.response-section-wrapper > .response-section-content > h2,

.response-section-wrapper > .response-section-content > h3 {

display: none !important;

}

/* Hide default accordion triggers (status code rows) — we show our own dropdown */

.response-section-wrapper [data-orientation="vertical"] > [data-state] > h3 {

display: none !important;

}

/* Ensure API reference pages use the same font as the rest of the docs */

#nd-page:has(.api-page-header),

#nd-page:has(.api-page-header) h2,

#nd-page:has(.api-page-header) h3,

#nd-page:has(.api-page-header) h4,

#nd-page:has(.api-page-header) p,

#nd-page:has(.api-page-header) span,

#nd-page:has(.api-page-header) div,

#nd-page:has(.api-page-header) label,

#nd-page:has(.api-page-header) button {

font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,

"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

/* Method badge pills — shared background colors (page + sidebar) */

span.font-mono.font-medium[data-method="get"],

span.font-mono.font-medium[data-method="head"],

span.font-mono.font-medium[data-method="options"] {

background-color: rgb(220 252 231 / 0.85);

}

html.dark span.font-mono.font-medium[data-method="get"],

html.dark span.font-mono.font-medium[data-method="head"],

html.dark span.font-mono.font-medium[data-method="options"] {

background-color: rgb(34 197 94 / 0.15);

}

span.font-mono.font-medium[data-method="post"] {

background-color: rgb(219 234 254 / 0.85);

}

html.dark span.font-mono.font-medium[data-method="post"] {

background-color: rgb(59 130 246 / 0.15);

}

span.font-mono.font-medium[data-method="put"] {

background-color: rgb(254 249 195 / 0.85);

}

html.dark span.font-mono.font-medium[data-method="put"] {

background-color: rgb(234 179 8 / 0.15);

}

span.font-mono.font-medium[data-method="patch"] {

background-color: rgb(255 237 213 / 0.85);

}

html.dark span.font-mono.font-medium[data-method="patch"] {

background-color: rgb(249 115 22 / 0.15);

}

span.font-mono.font-medium[data-method="delete"] {

background-color: rgb(254 226 226 / 0.85);

}

html.dark span.font-mono.font-medium[data-method="delete"] {

background-color: rgb(239 68 68 / 0.15);

}

/* Sidebar links with method badges — match regular item padding */

html #nd-sidebar a:has(span.font-mono.font-medium) {

display: flex !important;

align-items: center !important;

gap: 0.375rem;

padding: 0.375rem 0.875rem !important;

font-size: 0.875rem !important;

line-height: 1.4 !important;

font-weight: 450 !important;

border-radius: 0.75rem !important;

}

/* Sidebar method badges — fixed-width for right-aligned labels */

#nd-sidebar a span.font-mono.font-medium {

display: inline-flex;

align-items: center;

justify-content: center;

width: 2.625rem;

font-size: 0.625rem !important;

line-height: 1 !important;

padding: 0.15625rem 0.25rem;

border-radius: 0.1875rem;

flex-shrink: 0;

}

/* Footer navigation method badges — pill styling to match sidebar */

#nd-page span.font-mono.font-medium[data-method] {

display: inline-flex;

align-items: center;

justify-content: center;

font-size: 0.625rem !important;

line-height: 1 !important;

padding: 0.15625rem 0.375rem;

border-radius: 0.1875rem;

}

/* API page code/card containers — transparent background */

#nd-page:has(.api-page-header) {

--color-fd-card: transparent !important;

}

#nd-page:has(.api-page-header) figure.shiki {

border-radius: 0.75rem !important;

background-color: transparent !important;

}

/* API page code example panels — transparent */

#nd-page:has(.api-page-header) .rounded-xl.border.bg-fd-card {

background-color: transparent !important;

}

#nd-page:has(.api-page-header) .rounded-xl.border.shadow-md.bg-fd-card {

background-color: transparent !important;

box-shadow: none !important;

}

/* Hide "Filter Properties" search bar everywhere — main page and popovers */

input[placeholder="Filter Properties"] {

display: none !important;

}

div:has(> input[placeholder="Filter Properties"]) {

display: none !important;

}

/* Remove top border on first visible property after hidden Filter Properties */

div:has(> input[placeholder="Filter Properties"]) + .text-sm.border-t {

border-top: none !important;

}

/* Hide "TypeScript Definitions" copy panel on API pages */

#nd-page:has(.api-page-header) div.not-prose.rounded-xl.border.p-3.mb-4 {

display: none !important;

}

#nd-page:has(.api-page-header) div.not-prose.rounded-xl.border.p-3:has(> div > p.font-medium) {

display: none !important;

}

/* Hide info tags (Format, Default, etc.) everywhere — main page and popovers */

div.flex.flex-row.gap-2.flex-wrap.not-prose:has(> div.bg-fd-secondary) {

display: none !important;

}

div.flex.flex-row.items-start.bg-fd-secondary.border.rounded-lg.text-xs {

display: none !important;

}

/* Method+path bar — cleaner, lighter styling like Gumloop.

Override bg-fd-card CSS variable directly for reliability. */

#nd-page:has(.api-page-header) div.flex.flex-row.items-center.rounded-xl.border.not-prose {

--color-fd-card: rgb(249 250 251) !important;

background-color: rgb(249 250 251) !important;

border-color: rgb(229 231 235) !important;

}

html.dark

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose {

--color-fd-card: rgb(24 24 27) !important;

background-color: rgb(24 24 27) !important;

border-color: rgb(63 63 70) !important;

}

/* Method badge inside path bar — cleaner sans-serif, softer colors */

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium {

font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif !important;

font-weight: 600 !important;

font-size: 0.6875rem !important;

letter-spacing: 0.025em;

text-transform: uppercase;

padding: 0.125rem 0.5rem !important;

border-radius: 0.375rem !important;

}

/* Path bar per-method colors (fumadocs renders these, so we match by class) */

/* GET */

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-green"] {

color: rgb(22 163 74) !important;

background-color: rgb(220 252 231 / 0.7) !important;

}

html.dark

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-green"] {

color: rgb(74 222 128) !important;

background-color: rgb(34 197 94 / 0.15) !important;

}

/* POST */

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-blue"] {

color: rgb(37 99 235) !important;

background-color: rgb(219 234 254 / 0.7) !important;

}

html.dark

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-blue"] {

color: rgb(96 165 250) !important;

background-color: rgb(59 130 246 / 0.15) !important;

}

/* PUT */

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-yellow"] {

color: rgb(161 98 7) !important;

background-color: rgb(254 249 195 / 0.7) !important;

}

html.dark

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-yellow"] {

color: rgb(250 204 21) !important;

background-color: rgb(234 179 8 / 0.15) !important;

}

/* PATCH */

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-orange"] {

color: rgb(194 65 12) !important;

background-color: rgb(255 237 213 / 0.7) !important;

}

html.dark

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-orange"] {

color: rgb(251 146 60) !important;

background-color: rgb(249 115 22 / 0.15) !important;

}

/* DELETE */

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-red"] {

color: rgb(185 28 28) !important;

background-color: rgb(254 226 226 / 0.7) !important;

}

html.dark

#nd-page:has(.api-page-header)

div.flex.flex-row.items-center.rounded-xl.border.not-prose

span.font-mono.font-medium[class*="text-red"] {

color: rgb(248 113 113) !important;

background-color: rgb(239 68 68 / 0.15) !important;

}

/* Path text inside method+path bar — monospace, bright like Gumloop */

#nd-page:has(.api-page-header) div.flex.flex-row.items-center.rounded-xl.border.not-prose code {

color: rgb(55 65 81) !important;

background: none !important;