body { font-size: 12px; } /* ---------------------------------------------------------------------------- * Content width: Mintlify caps #content-area at max-w-xl (36rem) and sets its * width to `calc(100% - 28rem)`, centered with mx-auto, so on wide screens the * content is a narrow column with large dead zones. The TOC column to its right * is only 19rem wide (#table-of-contents-layout, with its own pl-10 gap), so * that 28rem reserve leaves ~9rem unused. Restore the wider-but-bounded 72rem * content max and reserve only 20rem on the right, so tables and code get room * without prose stretching indefinitely on very wide screens. * -------------------------------------------------------------------------- */ @media (min-width: 1280px) { #content-area { max-width: 72rem !important; width: calc(100% - 20rem) !important; } } /* * microsandbox SDK reference styles * Auto-loaded by Mintlify (any .css in the docs root). Class names are * prefixed with `msb-` to avoid clashing with Mintlify / Tailwind utilities. * Light is the default; `.dark` (toggled by Mintlify on ) overrides. */ :root { --msb-code-surface: #fdfbff; --msb-code-surface-strong: #faf5ff; --msb-code-border: rgba(109, 75, 196, 0.16); --msb-code-header: #f6efff; --msb-code-header-hover: #f0e4ff; --msb-code-header-text: #5f3caf; --msb-code-control-surface: rgba(246, 239, 255, 0.22); --msb-code-control-surface-hover: rgba(240, 228, 255, 0.38); --msb-code-control-icon: rgba(95, 60, 175, 0.72); --msb-code-control-icon-hover: #5f3caf; --msb-code-fade-10: rgba(255, 255, 255, 0.06); --msb-code-fade-25: rgba(255, 255, 255, 0.14); --msb-code-fade-35: rgba(255, 255, 255, 0.24); --msb-code-fade-45: rgba(255, 255, 255, 0.34); } .dark { --msb-code-surface: #171221; --msb-code-surface-strong: #1b1428; --msb-code-border: rgba(191, 132, 254, 0.24); --msb-code-header: #211832; --msb-code-header-hover: #2a1d40; --msb-code-header-text: #d8c0ff; --msb-code-control-surface: rgba(33, 24, 50, 0.22); --msb-code-control-surface-hover: rgba(42, 29, 64, 0.38); --msb-code-control-icon: rgba(216, 192, 255, 0.72); --msb-code-control-icon-hover: #d8c0ff; --msb-code-fade-10: rgba(11, 12, 14, 0.06); --msb-code-fade-25: rgba(11, 12, 14, 0.14); --msb-code-fade-35: rgba(11, 12, 14, 0.24); --msb-code-fade-45: rgba(11, 12, 14, 0.34); } /* our links shouldn't get Mintlify's prose underline-border */ .msb-backref a, .msb-type { border-bottom: 0 !important; } /* method headings: monospace name with a muted receiver / path prefix. * With the rules between entries gone, lean on a generous top margin to * separate one method from the previous one's body and keep the list * scannable. Scoped to method headings so section/type headings are * unaffected. */ h4:has(.msb-hn) { margin-top: 5rem !important; } /* but the first method directly under a section heading needs far less; the * section heading already separates it from what came before. */ h2 + h4:has(.msb-hn), h2 + p + h4:has(.msb-hn), h2 + p + p + h4:has(.msb-hn), h2 + span + h4:has(.msb-hn), h2 + p + span + h4:has(.msb-hn), h2 + div + h4:has(.msb-hn), h2 + div + p + h4:has(.msb-hn), h2 + div + p + p + h4:has(.msb-hn), h2 + div + span + h4:has(.msb-hn), h2 + div + p + span + h4:has(.msb-hn), h3 + h4:has(.msb-hn), .msb-backref + h4:has(.msb-hn), .msb-member-group + h4:has(.msb-hn) { margin-top: 1.5rem !important; } .msb-hn { font-family: var(--font-mono, monospace); font-weight: 500; } .msb-recv { font-family: var(--font-mono, monospace); font-weight: 400; color: #a3a29c; } .dark .msb-recv { color: #6f6e68; } /* Labels inside a type reference keep related member families scannable * without adding another level to the right-hand table of contents. */ .msb-member-group { margin: 3rem 0 0.75rem; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.02em; opacity: 0.72; } h2 + .msb-member-group { margin-top: 1.5rem; } /* Collapse second-level entries in the right-hand table of contents while * keeping each root type directly navigable. */ #table-of-contents-content li:has(> .msb-toc-toggle) { position: relative; padding-left: 1.35rem; } #table-of-contents-content .msb-toc-toggle { position: absolute; z-index: 1; top: 0.2rem; left: 0; display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border: 0; padding: 0; color: inherit; opacity: 0.75; background: transparent; cursor: pointer; } #table-of-contents-content .msb-toc-toggle:hover, #table-of-contents-content .msb-toc-toggle:focus-visible { opacity: 1; } #table-of-contents-content .msb-toc-toggle span { width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 120ms ease; } #table-of-contents-content .msb-toc-toggle[aria-expanded="true"] span { transform: rotate(45deg) translate(-0.08rem, -0.08rem); } #table-of-contents-content li[data-msb-expanded="false"] > ul { display: none; } /* inline type links (in param/return rows) */ .msb-type { color: #6d4bc4; } .dark .msb-type { color: #c9a4ff; } /* small section labels (parameters / returns / example) */ .msb-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .55; margin: 16px 0 6px; } /* parameter + return rows * The key column auto-sizes to its content (param name + type) and stays * aligned across rows via subgrid, capped so a long type can't crowd out the * description. */ .msb-params { margin: 4px 0 0; display: grid; grid-template-columns: minmax(170px, min(34%, 320px)) minmax(0, 1fr); column-gap: 18px; } .msb-param { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: 4px; padding: 9px 0; border-top: 1px solid rgba(135,134,128,.18); } .msb-param-key code { font-size: 13px; } .msb-param-key .msb-type { font-size: 12px; display: inline-block; margin-top: 3px; margin-left: 6px; } .msb-param-desc { font-size: 14px; opacity: .85; } /* back-references on types (returned by / used by) */ .msb-backref { font-size: 13px; opacity: .7; margin: 4px 0 12px; } .msb-backref a { font-family: var(--font-mono, monospace); font-size: 12.5px; text-decoration: none; } /* ---------------------------------------------------------------------------- * Tables: prose cells wrap, capped at a readable width, while code spans stay * on one line so tokens like Vec<(String, String)> never break mid-token. The * element directly wrapping each table is still a scroll boundary, so a table * that is genuinely wider than the prose column (several code-heavy columns) * scrolls instead of being crammed. * -------------------------------------------------------------------------- */ :has(> table) { overflow-x: auto; max-width: 100%; } table { table-layout: auto; } table th, table td { vertical-align: top; } table td { max-width: 48ch; } table th code, table td code { white-space: nowrap; } /* ---------------------------------------------------------------------------- * Code surfaces: Mintlify's default dark code background is nearly neutral and * can read greenish against the microsandbox palette. Tint standalone code * blocks, code groups, and SDK example accordions toward the purple brand color * while keeping the contrast restrained in both themes. * -------------------------------------------------------------------------- */ .code-block, .code-group { border-color: var(--msb-code-border) !important; } .code-block-background[data-component-part="code-block-root"], html.dark body .code-block-background[data-component-part="code-block-root"] { background-color: var(--msb-code-surface) !important; } .code-group { background-color: var(--msb-code-surface-strong) !important; } details.accordion:has(.code-block) { background-color: var(--msb-code-surface) !important; border-color: var(--msb-code-border) !important; } details.accordion:has(.code-block) > summary { background-color: var(--msb-code-header) !important; color: var(--msb-code-header-text) !important; } details.accordion:has(.code-block) > summary:hover { background-color: var(--msb-code-header-hover) !important; } .code-block [data-floating-buttons="true"], .code-group [data-floating-buttons="true"] { z-index: 2; } .code-block [data-floating-buttons="true"] button, .code-group [data-floating-buttons="true"] button, .code-block [data-floating-buttons="true"] a, .code-group [data-floating-buttons="true"] a, .code-block [data-testid="copy-code-button"], .code-group [data-testid="copy-code-button"], .code-block [aria-label*="assistant" i], .code-group [aria-label*="assistant" i] { background-color: var(--msb-code-control-surface) !important; box-shadow: 0 0 0 1px var(--msb-code-border); color: var(--msb-code-control-icon) !important; } .code-block [data-floating-buttons="true"] button:hover, .code-group [data-floating-buttons="true"] button:hover, .code-block [data-floating-buttons="true"] a:hover, .code-group [data-floating-buttons="true"] a:hover, .code-block [data-testid="copy-code-button"]:hover, .code-group [data-testid="copy-code-button"]:hover, .code-block [aria-label*="assistant" i]:hover, .code-group [aria-label*="assistant" i]:hover { background-color: var(--msb-code-control-surface-hover) !important; color: var(--msb-code-control-icon-hover) !important; } .code-block [data-floating-buttons="true"] svg, .code-group [data-floating-buttons="true"] svg, .code-block [data-testid="copy-code-button"] svg, .code-group [data-testid="copy-code-button"] svg, .code-block [aria-label*="assistant" i] svg, .code-group [aria-label*="assistant" i] svg { color: currentColor !important; } .code-block [data-fade-overlay="true"], .code-group [data-fade-overlay="true"] { background-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0, var(--msb-code-fade-10) 10px, var(--msb-code-fade-25) 25px, var(--msb-code-fade-35) 35px, var(--msb-code-fade-45) 45px ) !important; } /* ---------------------------------------------------------------------------- * Example collapsibles: Mintlify wraps the code block in prose margins * (content wrapper mt-2/mb-4/mx-6 plus the code-block's own mt-5/mb-8), which * leaves a lot of dead space inside the accordion. Trim it to a balanced, tight * inset. Scoped to accordions that hold a code block so prose accordions are * left alone. * -------------------------------------------------------------------------- */ details.accordion:has(.code-block) > *:not(summary) { margin: 0.75rem !important; } details.accordion:has(.code-block) .code-block { margin: 0 !important; } /* The example now sits directly under the signature. The signature code * block's 2rem bottom margin and the accordion's top margin stacked into a * wide gap; collapse them to one even, tight inset so the example reads as * attached to the signature it documents. */ .code-block:has(+ details.accordion) { margin-bottom: 0 !important; } details.accordion:has(.code-block) { margin-top: 0.5rem !important; } @media (max-width: 640px) { .msb-params { grid-template-columns: 1fr; } .msb-param { row-gap: 2px; } } /* ---------------------------------------------------------------------------- * Availability badges: small pills rendered inside headings to mark sections * whose feature is local-only (not yet on cloud). * -------------------------------------------------------------------------- */ .msb-badge-local { display: inline-block; margin-top: -0.35rem; padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: #5f3caf; background: #f6efff; border: 1px solid rgba(109, 75, 196, 0.25); } .dark .msb-badge-local { color: #c9b1ff; background: rgba(191, 132, 254, 0.12); border-color: rgba(191, 132, 254, 0.3); } .msb-badge-local svg, .msb-badge-local [class*="mask"] { display: inline-block; vertical-align: -0.12em; margin-left: 0.1rem; } /* The info icon is the tooltip affordance; drop the wrapper's dotted underline. */ span:has(> .msb-badge-local) { text-decoration: none !important; } .msb-badge-limited { display: inline-block; margin-top: -0.35rem; padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: #8a5a00; background: #fdf6e7; border: 1px solid rgba(180, 120, 0, 0.28); } .dark .msb-badge-limited { color: #e8c37a; background: rgba(232, 195, 122, 0.1); border-color: rgba(232, 195, 122, 0.28); } .msb-badge-limited svg, .msb-badge-limited [class*="mask"] { display: inline-block; vertical-align: -0.12em; margin-left: 0.1rem; } span:has(> .msb-badge-limited) { text-decoration: none !important; } /* Masked tooltip icons inherit each pill's text color. */ .msb-badge-local svg, .msb-badge-local [class*="mask"], .msb-badge-limited svg, .msb-badge-limited [class*="mask"] { background-color: currentColor !important; } .msb-badge-cloud { display: inline-block; margin-top: -0.35rem; padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: #0b6bcb; background: #eef6ff; border: 1px solid rgba(11, 107, 203, 0.25); } .dark .msb-badge-cloud { color: #8ec2f2; background: rgba(142, 194, 242, 0.1); border-color: rgba(142, 194, 242, 0.28); } .msb-badge-cloud svg, .msb-badge-cloud [class*="mask"] { display: inline-block; vertical-align: -0.12em; margin-left: 0.1rem; background-color: currentColor !important; } span:has(> .msb-badge-cloud) { text-decoration: none !important; } /* Neutral cloud-note pill: behaves differently on cloud but fully works (not a limitation). */ .msb-badge-note { display: inline-block; margin-top: -0.35rem; padding: 0.1rem 0.5rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; color: #475569; background: #f1f5f9; border: 1px solid rgba(71, 85, 105, 0.2); } .dark .msb-badge-note { color: #94a3b8; background: rgba(148, 163, 184, 0.1); border-color: rgba(148, 163, 184, 0.24); } .msb-badge-note svg, .msb-badge-note [class*="mask"] { display: inline-block; vertical-align: -0.12em; margin-left: 0.1rem; background-color: currentColor !important; } span:has(> .msb-badge-note) { text-decoration: none !important; }