#content-area .link { color: #103B95; } /* Regular docs images only */ .prose img:not([data-rmiz-modal-img]) { max-width: 60%; height: auto; } .w-full aspect-video rounded-xl { max-width: 60% !important; } /* Zoomed modal image */ [data-rmiz-modal-content] img[data-rmiz-modal-img] { max-width: 90vw !important; max-height: 90vh !important; object-fit: contain; } html.dark #content-area .link { color: #6B99FA; } html.dark .mermaid svg g.node .label text, html.dark .mermaid svg g.node span.nodeLabel { fill: #eaf1ff !important; color: #103B95 !important; } html.dark .mermaid svg g.node rect, html.dark .mermaid svg g.node circle, html.dark .mermaid svg g.node ellipse, html.dark .mermaid svg g.node polygon, html.dark .mermaid svg g.node path { stroke: #8fb3ff !important; /* or whatever your dark-mode border color is */ stroke-width: 15px !important; } img { background: none !important; background-color: transparent !important; } .nodeLabel { font-size: 12px; } .stickyDiagram { position: sticky; top: var(--scroll-mt); flex: 0 0 180px; min-width: 100px; } @media (max-width: 768px) { .stickyDiagram { position: static; /* turn off sticky */ top: auto; /* reset top offset */ flex: none; /* allow it to size naturally */ width: 100%; /* take full width on mobile */ margin-bottom: 1rem; /* add some spacing below */ } } /* Make all tables stretch to container width */ table { display: table !important; width: 100%; table-layout: auto; /* or fixed if you prefer equal column widths */ } /* Optional: tidy up borders and spacing */ table th, table td { vertical-align: top; border-left: 1px solid #dadada !important; border-right: 1px solid #dadada !important; padding: 0.5rem !important; } /* Optional: if Mintlify added overflow wrappers, reset that too */ .table-wrapper { overflow-x: visible; } .supportButton { border: 0px !important; } .arcadediv { position: relative; padding-bottom: calc(80.4861% + 41px); height: 0px; width: 100%; } .arcadeiframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; color-scheme: light; } .tab-icon { display: inline-block; border-radius: 4px; padding: 2px; /* gives breathing room for the bg */ } html.dark .tab-icon { background-color: #bababa !important; } h2 > span > .icon { position: relative; top: -0.1em; /* or ~ -2px */ margin-right: 0.4rem; vertical-align: middle; } .ui-bubble { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem; margin-bottom: 0.2rem; margin-left: 0.2rem; margin-right: 0.2rem; background-color: var(--mintlify-code-bg, #f3f4f6); border: 1px solid var(--mintlify-border-color, #e5e7eb); border-radius: 6px; font: inherit; vertical-align: middle; font-size: 0.9em !important; font-weight: 800 !important; } html.dark .ui-bubble { background-color: #1f2937; /* Tailwind gray-800 */ border-color: #374151; /* Tailwind gray-700 */ } .ui-bubble .icon { width: 1.2em !important; /* keeps it proportional to text */ height: 1.2em !important; flex-shrink: 0; display: inline-block; vertical-align: middle; } .kb { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem; margin-bottom: 0.2rem; margin-left: 0.2rem; margin-right: 0.2rem; background-color: var(--mintlify-code-bg, #f3f4f6); border: 1px solid var(--mintlify-border-color, #e5e7eb); border-radius: 6px; font: inherit; vertical-align: middle; font-size: 0.8em !important; font-weight: 600 !important; font-family: ui-monospace, "SFMono-Regular", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace !important; } html.dark .kb { background-color: #1f2937; /* Tailwind gray-800 */ border-color: #374151; /* Tailwind gray-700 */ } .kb .icon { width: 1em !important; /* keeps it proportional to text */ height: 1em !important; flex-shrink: 0; display: inline-block; vertical-align: middle; } .kbd { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.45rem; margin-bottom: 0.2rem; margin-left: 0.2rem; margin-right: 0.2rem; background-color: var(--mintlify-code-bg, #f3f4f6); border: 1px solid var(--mintlify-border-color, #e5e7eb); border-bottom-width: 3px; /* gives the raised-key illusion */ border-radius: 6px; font: inherit; vertical-align: middle; font-size: 0.85em !important; font-weight: 700 !important; line-height: 1.4; white-space: nowrap; user-select: none; color: var(--mintlify-content-color, #374151); } /* Dark mode */ html.dark .kbd { background-color: #1f2937; /* Tailwind gray-800 */ border-color: #374151; /* Tailwind gray-700 */ border-bottom-color: #4b5563; /* gray-600 — keeps depth visible */ color: #e5e7eb; /* gray-200 */ } /* Icon inside a key (matches .ui-bubble .icon sizing) */ .kbd .icon { width: 1.1em !important; height: 1.1em !important; flex-shrink: 0; display: inline-block; vertical-align: middle; } .kbd svg { width: 1em; height: 1em; flex-shrink: 0; /* kills the inline baseline gap */ vertical-align: middle; } /* ── Platform icon keys ─────────────────────────────────────────────────── */ .kbd--mac::before { font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", FontAwesome; content: "\f179"; /* fa-apple */ font-weight: 900; font-style: normal; font-size: 0.95em; margin-right: 0.25em; vertical-align: middle; } .kbd--windows::before { font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", FontAwesome; content: "\f17a"; /* fa-windows */ font-weight: 400; font-style: normal; font-size: 0.9em; margin-right: 0.25em; vertical-align: middle; } .kbd--linux::before { font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", FontAwesome; content: "\f17c"; /* fa-linux */ font-weight: 400; font-style: normal; font-size: 0.95em; margin-right: 0.25em; vertical-align: middle; } :root[data-theme="dark"] .prose :where(h1,h2,h3,h4,h5,h6), html.dark .prose :where(h1,h2,h3,h4,h5,h6) { color:#fff !important; } .prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) { margin-top: 0 !important; margin-bottom: 0 !important; } .prose :where(h1, h2, h3, h4, h5, h6)[id] { scroll-margin-top: 120px !important; } /* Browser Frame (light + dark mode) */ .browser-frame { --bf-radius: 10px; --bf-shadow: 0 8px 24px rgba(0,0,0,.06); /* Light defaults */ --bf-border: #e5e7eb; --bf-bg: #ffffff; --bf-chrome: #f3f4f6; --bf-text: #6b7280; --bf-address-bg: rgba(255,255,255,.75); border: 1px solid var(--bf-border); border-radius: var(--bf-radius); background: var(--bf-bg); box-shadow: var(--bf-shadow); overflow: hidden; max-width: 100%; } /* Dark mode overrides */ .dark .browser-frame { --bf-border: rgba(255,255,255,.12); --bf-bg: #0b0f19; --bf-chrome: #111827; --bf-text: rgba(255,255,255,.70); --bf-address-bg: rgba(255,255,255,.06); --bf-shadow: 0 12px 34px rgba(0,0,0,.45); } .browser-frame__top { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bf-chrome); border-bottom: 1px solid var(--bf-border); } .browser-frame__controls { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .browser-frame__dot { width: 10px; height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .dark .browser-frame__dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); } .browser-frame__dot--red { background: #ff5f57; } .browser-frame__dot--yellow { background: #febc2e; } .browser-frame__dot--green { background: #28c840; } .browser-frame__address { flex: 1 1 auto; height: 22px; border-radius: 999px; border: 1px solid rgba(0,0,0,.06); background: var(--bf-address-bg); display: flex; align-items: center; justify-content: center; padding: 0 10px; font: 500 11px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: var(--bf-text); letter-spacing: .2px; user-select: none; } .dark .browser-frame__address { border-color: rgba(255,255,255,.08); } .browser-frame__body { background: var(--bf-bg); } .browser-frame__body img { width: 100%; height: auto; } /* Code blocks inside browser frame — seamless fit */ .browser-frame__body * { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } .browser-frame__body > * { margin: 0 !important; padding: 0 !important; } .browser-frame__body pre { margin: 0 !important; padding: 0 !important; } /* Light/dark mode image switching */ .browser-frame__body .browser-frame__img--light { display: block; } .browser-frame__body .browser-frame__img--dark { display: none; } .dark .browser-frame__body .browser-frame__img--light { display: none; } .dark .browser-frame__body .browser-frame__img--dark { display: block; } /* Quickstart step cards */ .qs-step { border: 1px solid var(--mintlify-border-color, #e5e7eb); border-radius: 1rem; padding: 2rem; margin-bottom: 2rem; position: relative; } .qs-step-number { position: absolute; top: -0.75rem; left: 1.25rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: linear-gradient(135deg, #1b62f8, #6366f1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 700; line-height: 1; } .qs-step h3:first-of-type { margin-top: 0.25rem; } /* Feature grid – 2x2 with inside borders only */ .feature-grid { display: grid; grid-template-columns: 1fr 1fr; border: none; margin: 0.5rem 0 0.5rem; } .feature-grid__item { padding: 1.25rem 1.5rem; text-align: justify; } .feature-grid__item strong { font-size: 1.15rem; } .feature-grid__item svg { margin-right: 0.4rem; width: 1.75em; height: 1.75em; vertical-align: middle; position: relative; top: -0.1em; } .feature-grid__desc { margin-top: 0.75rem; } /* Vertical border: right edge of left-column cells */ .feature-grid__item:nth-child(odd) { border-right: 1px solid var(--mintlify-border-color, #e5e7eb); } /* Horizontal border: top edge of bottom-row cells */ .feature-grid__item:nth-child(n+3) { border-top: 1px solid var(--mintlify-border-color, #e5e7eb); } /* Softer grid lines in dark mode */ html.dark .feature-grid__item:nth-child(odd) { border-right-color: rgba(255, 255, 255, 0.1); } html.dark .feature-grid__item:nth-child(n+3) { border-top-color: rgba(255, 255, 255, 0.1); } @media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } .feature-grid__item:nth-child(odd) { border-right: none; } .feature-grid__item:nth-child(n+2) { border-top: 1px solid var(--mintlify-border-color, #e5e7eb); } } /* Darker green background for Tip callouts in dark mode */ html.dark .callout[data-callout-type="tip"] { background-color: rgba(5, 46, 22, 0.6) !important; } /* ── Hero "Get Started" tabs on index page ── */ .hero-tabs [role="tablist"] { display: flex !important; gap: 0.75rem; border-bottom: none !important; margin-bottom: 1.5rem; } .hero-tabs [role="tab"] { flex: 1; text-align: center; padding: 0.625rem 1rem; border: 1px solid var(--mintlify-border-color, #e5e7eb); border-radius: 0.75rem; font-weight: 500; font-size: 0.9rem; color: #374151; background: var(--mintlify-card-bg, #fff); cursor: pointer; transition: all 0.15s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } html.dark .hero-tabs [role="tab"] { color: #d1d5db; background: var(--mintlify-card-bg, rgba(255, 255, 255, 0.05)); border-color: var(--mintlify-border-color, rgba(255, 255, 255, 0.1)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .hero-tabs [role="tab"]:hover { border-color: #1b62f8; color: #111827; box-shadow: 0 1px 3px rgba(56, 132, 255, 0.15); } html.dark .hero-tabs [role="tab"]:hover { border-color: #3884ff; color: #f3f4f6; box-shadow: 0 1px 3px rgba(56, 132, 255, 0.25); } /* Active tab: a single crisp blue border plus a light blue fill. Do NOT add a `box-shadow: 0 0 0 1px` ring on top of the border — the two stack into a doubled, offset outline that reads as a rendering artifact. */ .hero-tabs [role="tab"][aria-selected="true"] { border-color: #1b62f8; color: #103B95; background: #eef4ff; box-shadow: 0 1px 3px rgba(56, 132, 255, 0.18); } html.dark .hero-tabs [role="tab"][aria-selected="true"] { border-color: #6B99FA; color: #eaf1ff; background: rgba(56, 132, 255, 0.16); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .hero-tabs [role="tab"], .hero-tabs [role="tab"] * { text-decoration: none !important; } /* Kill Mintlify's underline-style tab indicator, which lives on the inner `data-component-part="tab-button"` div. Scope this to DESCENDANTS only — including the [role="tab"] itself erases the tab card's own bottom border, leaving the box looking open at the bottom. */ .hero-tabs [role="tab"] * { border-bottom: none !important; } /* ── Widen content area ─────────────────────────────────────────────────── */ /* The sequoia theme caps the article column at 696px (lg:max-w-174) and offsets it with a viewport-based margin, which leaves a large empty gutter between the content and the right-hand table of contents on wide displays. Target the stable #content-area id — the generated utility class names change between Mintlify releases, so selecting on them silently stops working. */ @media (min-width: 1024px) { #content-area { max-width: 1100px !important; } } @media (min-width: 1280px) { /* Centre between the left nav and the TOC rather than within the viewport. */ #content-area { margin-left: auto !important; margin-right: auto !important; } } @media (min-width: 1800px) { #content-area { max-width: 1200px !important; } } /* ============================================================ ops-ai landing page (hidden /ops-ai section) — scoped styles ============================================================ */ .opsai-hero { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 0 2.5rem; padding: 3.25rem 2rem 3rem; border-radius: 1.25rem; overflow: hidden; text-align: center; background: radial-gradient(120% 140% at 50% -20%, rgba(56, 132, 255, 0.35) 0%, rgba(56, 132, 255, 0) 60%), linear-gradient(160deg, #0b1220 0%, #0e1729 55%, #0b1220 100%); border: 1px solid rgba(56, 132, 255, 0.25); } .opsai-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(56, 132, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 132, 255, 0.06) 1px, transparent 1px); background-size: 36px 36px; -webkit-mask-image: radial-gradient(70% 70% at 50% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 0%, #000 0%, transparent 75%); pointer-events: none; } .opsai-hero > * { position: relative; z-index: 1; } /* Brand mark — same geometry as the product login/sidebar logo (circle r=3 + 8 round-capped spokes), set in a soft circular badge. */ .opsai-mark { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 0 1rem; border-radius: 50%; background: rgba(56, 132, 255, 0.12); box-shadow: 0 0 0 8px rgba(56, 132, 255, 0.06); animation: opsai-glow 4.5s ease-in-out infinite; } .opsai-mark::before { content: ""; width: 34px; height: 34px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237db4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E"); } @keyframes opsai-glow { 0%, 100% { box-shadow: 0 0 0 8px rgba(56, 132, 255, 0.06); } 50% { box-shadow: 0 0 0 13px rgba(56, 132, 255, 0.03); } } @media (prefers-reduced-motion: reduce) { .opsai-mark { animation: none; } } .opsai-wordmark { display: flex; justify-content: center; align-items: baseline; width: 100%; font-size: 3rem !important; font-weight: 800 !important; letter-spacing: -0.04em; line-height: 1 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; color: #f8fafc !important; } .opsai-wordmark .accent { background: linear-gradient(90deg, #1b62f8, #7db4ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .opsai-tagline { margin: 1.15rem 0 0 !important; max-width: 40rem; font-size: 1.15rem; line-height: 1.55; color: #cbd5e1 !important; } .opsai-tagline strong { color: #f1f5f9; font-weight: 700; } .opsai-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; } .opsai-pill { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; color: #bfdbfe; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid rgba(56, 132, 255, 0.35); background: rgba(56, 132, 255, 0.10); } .opsai-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2.5rem; } @media (max-width: 720px) { .opsai-stats { grid-template-columns: 1fr; } } .opsai-stat { text-align: center; padding: 1.4rem 1rem; border-radius: 0.9rem; border: 1px solid rgba(148, 163, 184, 0.18); background: linear-gradient(180deg, rgba(56, 132, 255, 0.06), rgba(56, 132, 255, 0.01)); } .opsai-stat__num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(90deg, #1b62f8, #7db4ff); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .opsai-stat__label { margin-top: 0.45rem; font-size: 0.9rem; color: #94a3b8; line-height: 1.45; } /* ---- ops-ai page-to-page footer navigation ---- */ .opsai-nav { display: flex; gap: 1rem; margin-top: 3rem; } @media (max-width: 600px) { .opsai-nav { flex-direction: column; } } .opsai-nav a { flex: 1 1 0; display: block; padding: 1rem 1.15rem; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.22); background: linear-gradient(180deg, rgba(56, 132, 255, 0.05), rgba(56, 132, 255, 0.01)); text-decoration: none !important; transition: border-color 0.15s ease, transform 0.15s ease; } .opsai-nav a:hover { border-color: rgba(56, 132, 255, 0.5); transform: translateY(-1px); } .opsai-nav a.opsai-nav--next { text-align: right; } .opsai-nav__dir { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; } .opsai-nav__title { display: block; margin-top: 0.25rem; font-size: 1.02rem; font-weight: 600; color: #1b62f8; } /* ---- "Ask a question..." assistant input: make it less subtle ---- The bordered card is the textarea's grandparent (.chat-assistant-input sits inside a `relative flex items-end` wrapper). Target ONLY the card — styling the inner wrapper too produces a double border, and the card's background must stay fully opaque or page content shows through the floating panel. */ div:has(> div > .chat-assistant-input) { background-color: #eef4ff !important; border-color: #cbd5e1 !important; box-shadow: 0 2px 12px rgba(16, 59, 149, 0.14) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.25s ease !important; } /* ---- Fade back while the reader is scrolling ---- `chat-dimmed` is toggled on by chat-dim.js: scrolling means they're reading, not typing, so the input stops competing with the content it overlaps. Opacity (not visibility) so it stays hoverable, and the :hover / :focus-within rules below still win to bring it straight back. */ html.chat-dimmed div:has(> div > .chat-assistant-input) { opacity: 0.35; } html.chat-dimmed div:has(> div > .chat-assistant-input):hover, html.chat-dimmed div:has(> div > .chat-assistant-input):focus-within { opacity: 1; } @media (prefers-reduced-motion: reduce) { div:has(> div > .chat-assistant-input) { transition: none !important; } } div:has(> div > .chat-assistant-input):hover { border-color: #94a3b8 !important; } /* Blue only once the user is actually typing in it */ div:has(> div > .chat-assistant-input):focus-within { border-color: #1b62f8 !important; box-shadow: 0 4px 18px rgba(16, 59, 149, 0.22) !important; } html.dark div:has(> div > .chat-assistant-input) { background-color: #16203a !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45) !important; } html.dark div:has(> div > .chat-assistant-input):hover { border-color: rgba(255, 255, 255, 0.5) !important; } html.dark div:has(> div > .chat-assistant-input):focus-within { border-color: #6B99FA !important; } /* Stronger placeholder */ .chat-assistant-input::placeholder { color: #103B95 !important; opacity: 1 !important; font-weight: 600; } html.dark .chat-assistant-input::placeholder { color: #9dc0ff !important; } /* ── — boxed numbers + a visible connector ─────────────────────── Mintlify ships a near-white circle (bg-gray-50) on a 1px gray-200/70 line, which all but disappears against the page. Cloudflare-style: a rounded square badge with a real border, joined by a 2px rail. The connector comes in two variants: a flat one between steps and a gradient one that fades out after the last step. They're only distinguishable by class, hence the [class*="to-transparent"] split — painting a flat background-color over the gradient kills the fade. */ .steps [data-component-part="step-number"] > div { border-radius: 0.5rem !important; background-color: #f1f5f9 !important; border: 1px solid #cbd5e1; color: #0f172a !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } html.dark .steps [data-component-part="step-number"] > div { background-color: #1f2937 !important; border-color: rgba(255, 255, 255, 0.18); color: #f3f4f6 !important; box-shadow: none; } .steps [data-component-part="step-line"] { width: 1.5px !important; } .steps [data-component-part="step-line"]:not([class*="to-transparent"]) { background-color: #cbd5e1 !important; } .steps [data-component-part="step-line"][class*="to-transparent"] { background-color: transparent !important; background-image: linear-gradient(to bottom, #cbd5e1, rgba(203, 213, 225, 0)) !important; } html.dark .steps [data-component-part="step-line"]:not([class*="to-transparent"]) { background-color: rgba(255, 255, 255, 0.18) !important; } html.dark .steps [data-component-part="step-line"][class*="to-transparent"] { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)) !important; } /* A 's `title` prop renders a plain

that the table of contents never sees. Writing the title as a markdown heading inside the step body instead — and dropping the prop — gets it into the TOC, but a prose

is bigger and lighter than the title it replaces. Pull the leading heading of a step back to the step-title weight and size so the two spellings look identical; later headings inside a step stay full-size subsections. Scoped to a step-content that is its wrapper's :first-child — i.e. no step-title was rendered before it. Steps that still pass `title` and open with a heading (a genuine subsection) are left alone. / .steps [data-component-part="step-content"]:first-child > h3:first-child { margin-top: 0; font-size: 1em; line-height: 1.75; font-weight: 600; } / ── Table of contents — stepped rail + active-section marker ──────────── The rail is drawn per row rather than as one border on , because indentation here is NOT expressed by DOM nesting — a single nested
can hold both h3 and h4 entries, distinguished only by the --toc-padding-left custom property on the anchor. Keying each row's own segment off that property makes the rail step in and out with the headings, and consecutive rows at the same depth join into one line. The rail doubles as the active marker: the current row's segment just changes colour, which cross-fades as you scroll between sections. / nav ul.toc { position: relative; padding-left: 0.875rem; } nav ul.toc li.toc-item > a { position: relative; } nav ul.toc li.toc-item > a::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--toc-padding-left, 0rem) - 0.875rem); width: 1.5px; background-color: #e5e7eb; transition: background-color 0.2s ease; } html.dark nav ul.toc li.toc-item > a::after { background-color: rgba(255, 255, 255, 0.12); } / The marker itself is a single bar that toc-indicator.js slides between rows, so it can animate across a depth change instead of one pseudo-element fading out while another fades in. z-index is load-bearing: the marker and each row's grey rail sit at the same x, so whichever paints last wins, and the script inserts the marker at a fixed spot in the list rather than after every row. Any row that follows it in the DOM — the last entry, typically — is `position: relative`, so its ::after rail would paint over the marker and the row would look inactive. / nav ul.toc .toc-slider { position: absolute; top: 0; left: 0; z-index: 1; list-style: none; width: 1.5px; height: 0; opacity: 0; background-color: #1b62f8; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease; pointer-events: none; } html.dark nav ul.toc .toc-slider { background-color: #6B99FA; } / Dotted bridges across the step where the rail changes depth, plus the bar that runs along one during a depth change. Both are placed by toc-indicator.js — CSS can't compare one row's indent against its neighbour's, so it can't know where the steps are. / nav ul.toc .toc-link, nav ul.toc .toc-tracer { position: absolute; top: 0; left: 0; height: 1.5px; list-style: none; pointer-events: none; } nav ul.toc .toc-link { background-image: repeating-linear-gradient( to right, #d1d5db 0 2px, transparent 2px 5px ); } html.dark nav ul.toc .toc-link { background-image: repeating-linear-gradient( to right, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 5px ); } nav ul.toc .toc-tracer { width: 0; opacity: 0; z-index: 1; background-color: #1b62f8; transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), width 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease; } html.dark nav ul.toc .toc-tracer { background-color: #6B99FA; } @media (prefers-reduced-motion: reduce) { nav ul.toc .toc-slider, nav ul.toc .toc-tracer { transition: none; } } / Fallback for when the script hasn't run: tint the active row's own segment in place. Mintlify flags every ancestor of the current heading as active, which would light up two or three rails at once, so the :has() rules demote all but the deepest row — an active parent of an active child, and an active h3 sitting above an active h4 in the same
. / html:not(.toc-slide) nav ul.toc li.toc-item[data-active] > a::after { background-color: #1b62f8; } html:not(.toc-slide) nav ul.toc li.toc-item[data-active]:has(li.toc-item[data-active]) > a::after, html:not(.toc-slide) nav ul.toc li.toc-item[data-active]:has(~ li.toc-item[data-active]) > a::after { background-color: #e5e7eb; } html.dark:not(.toc-slide) nav ul.toc li.toc-item[data-active] > a::after { background-color: #6B99FA; } html.dark:not(.toc-slide) nav ul.toc li.toc-item[data-active]:has(li.toc-item[data-active]) > a::after, html.dark:not(.toc-slide) nav ul.toc li.toc-item[data-active]:has(~ li.toc-item[data-active]) > a::after { background-color: rgba(255, 255, 255, 0.12); } / The right-hand panel ships its own `border-l`, which sat ~30px to the left of the TOC rail and read as a doubled divider. / div.border-l:has(ul.toc) { border-left: none !important; } / Solid send button instead of the 30%-opacity tint / .chat-assistant-send-button { background-color: #1b62f8 !important; } .chat-assistant-send-button:hover { background-color: #1f6dea !important; } / Custom 404 page — pixel robot standing on top of the "404". The theme hardcodes the badge above the configurable title, so the image can't come from errors.404.description in docs.json; it's injected here onto the wrapper that holds #error-badge. / @font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/press-start-2p-latin.woff2") format("woff2"); / only the digits are ever used here / unicode-range: U+0030-0039; } div:has(> #error-badge)::before { content: ""; display: block; width: 100%; max-width: 131px; aspect-ratio: 262 / 292; / cancel the wrapper's gap-y-6 so the feet land on the glyph tops / margin: 0 auto -0.9rem; / nudge left so the robot centers over the middle "0" / translate: -5px; / stand in front of the digits, not behind them / z-index: 1; background: url("/images/robot-not-found.png") center bottom / contain no-repeat; / pixel art — keep the edges crisp when scaled / image-rendering: pixelated; } #error-badge { font-family: "Press Start 2P", ui-monospace, monospace; font-size: 5.5rem; line-height: 1; letter-spacing: 0; padding: 0; } / ── Sidebar — section headings and chevron alignment ──────────────────── Section labels ("Build", "Test & Deploy") are dividers, not destinations, so they get no icon. Instead they shift typographic register — uppercase and letterspaced — which separates them from the nav items without competing with the icon column those items now sit in. / .sidebar-group-header .sidebar-title { text-transform: uppercase; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; } / Bind each label to the group below it: more air above than below. / #navigation-items div:has(> .sidebar-group-header):not(:first-child) { margin-top: 2.5rem; } / Expandable items pack their chevron right up against the label, which leaves a ragged right edge. Push it to a consistent column instead. (Plain links already right-align via a flex-1 wrapper.) / #navigation-items button.group > div:has(> svg.transition-transform) { margin-left: auto; } / Icons mark top-level destinations only. A page's frontmatter icon is global to that page, so a page listed at L1 in one section and nested under another would drag its icon down a level. Suppress nested icons so the icon column always means "top-level item". Remove the whole icon slot rather than just the glyph — items that never had an icon render with no slot at all, so hiding only the glyph would leave the flex gap behind and push those rows out of alignment. / #navigation-items li ul li a > div:first-child:has(> :is(svg, img)) { display: none; } / ── Prompt cards (Mintlify ) ─────────────────────────────────── Stock styling is stone-50 on a near-white page, so the card all but disappears next to a callout. Tint it with our primary, give it real padding, and push the actions onto their own row so the buttons read as the call to action rather than trailing metadata. / .prompt { padding: 1.25rem !important; gap: 0.875rem !important; border-color: #cfe0ff !important; background: linear-gradient(180deg, #f6faff 0%, #edf4ff 100%) !important; box-shadow: 0 1px 2px rgba(16, 59, 149, 0.06); } html.dark .prompt { border-color: rgba(56, 132, 255, 0.28) !important; background: rgba(56, 132, 255, 0.08) !important; box-shadow: none; } / The icon is a mask-image swatch, so its color is `background-color`. / .prompt [data-component-part="prompt-icon"] svg { background-color: #1b62f8 !important; } html.dark .prompt [data-component-part="prompt-icon"] svg { background-color: #6b99fa !important; } .prompt [data-component-part="prompt-description"] { font-size: 0.9375rem; line-height: 1.5; } / `flex-basis: 100%` breaks the actions onto their own line inside the card's existing flex-wrap, matching Mintlify's own quickstart layout. / .prompt [data-component-part="prompt-actions-wrapper"] { flex-basis: 100%; justify-content: flex-end; gap: 0.5rem !important; } .prompt [data-component-part="prompt-action-copy-button"], .prompt [data-component-part="prompt-action-cursor-button"] { padding: 0.4375rem 0.875rem !important; font-size: 0.8125rem !important; line-height: 1.25rem !important; border-radius: 0.625rem !important; } .prompt [data-component-part="prompt-action-copy-button"] { background-color: #1b62f8 !important; box-shadow: 0 1px 2px rgba(16, 59, 149, 0.18); } .prompt [data-component-part="prompt-action-copy-button"]:hover { background-color: #2f6fd9 !important; } .prompt [data-component-part="prompt-action-cursor-button"] { color: #103b95 !important; background: #fff !important; border-color: #cfe0ff !important; box-shadow: 0 1px 2px rgba(16, 59, 149, 0.06); } .prompt [data-component-part="prompt-action-cursor-button"]:hover { background: #f3f8ff !important; border-color: #1b62f8 !important; } html.dark .prompt [data-component-part="prompt-action-cursor-button"] { color: #eaf1ff !important; background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(56, 132, 255, 0.35) !important; box-shadow: none; } html.dark .prompt [data-component-part="prompt-action-cursor-button"]:hover { background: rgba(56, 132, 255, 0.18) !important; border-color: #6b99fa !important; } / ── Handwritten annotations () ─────────────────────────────── A marker-pen aside that points at the component directly below it. The arrow is absolutely positioned so it hangs past the note and overlaps that component instead of pushing it down the page. / @font-face { font-family: "Kalam"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/kalam-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2018-2019, U+201C-201D, U+2013-2014; } .hand-note { position: relative; z-index: 5; display: flex; align-items: flex-end; gap: 0.25rem; / Leaves room for the arrow's first third; the rest hangs over the card. / margin: 1.5rem 0 0.75rem; color: #1b62f8; pointer-events: none; } / The tip lands on the card's top corner, so the arrow reads as pointing at the box itself rather than at the description text inside it. / .hand-note-right { justify-content: flex-end; padding-right: 1rem; } .hand-note-left { justify-content: flex-start; padding-left: 1rem; flex-direction: row-reverse; } html.dark .hand-note { color: #6b99fa; } .hand-note-text { font-family: "Kalam", "Comic Sans MS", cursive; font-size: 1.125rem; line-height: 1.2; transform: rotate(-3deg); } .hand-note-arrow { width: 44px; height: 66px; / Only the top of the arc sits in flow — the tip overhangs the card. / margin-bottom: -44px; flex: none; } .hand-note-left .hand-note-arrow { transform: scaleX(-1); } / ── Inline code in prose ───────────────────────────────────────────────── The theme's default sits at a mid grey on a near-white chip, so a `code` span barely separates from the sentence around it. Darken the text to near-black and deepen the chip so the token reads as a distinct object. The chip is a translucent dark wash rather than a fixed grey, so it tints whatever surface it lands on — over a green Tip or a blue Info callout it picks up that hue instead of stamping a grey patch across the tint. Scoped to `:not(pre) > code` so syntax-highlighted code blocks, which colour their own tokens, are untouched. / :not(pre) > code { color: #18181b !important; background-color: rgba(17, 24, 39, 0.08) !important; border-color: rgba(17, 24, 39, 0.1) !important; } html.dark :not(pre) > code { color: #f4f4f5 !important; background-color: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.14) !important; } / A code span inside a link should still read as part of the link. / a :not(pre) > code, a > code { color: inherit !important; } / ── Accordions ────────────────────────────────────────────────────────── Drop the gray fill for an outline-only card, the way Mintlify's own docs render them: white in light mode, transparent in dark, so the border does the work and nested content keeps its own background. */ details.accordion { border-color: rgba(17, 24, 39, 0.08) !important; background: #fff !important; } html.dark details.accordion { border-color: rgba(255, 255, 255, 0.12) !important; background: transparent !important; } details.accordion > summary { padding: 1.0625rem 1.5rem !important; } details.accordion > summary:hover { background: #f6f8fb !important; } html.dark details.accordion > summary:hover { background: rgba(255, 255, 255, 0.04) !important; }

​List Platforms

​Get Platform Details

List Platforms

Get Platform Details