style.css

/* global lowercase text styling */
* {
 text-transform: lowercase !important;
}

/* preserve code formatting - exclude code blocks and inline code */
code,
pre,
pre *,
code *,
.code-group code,
.code-group pre,
[class*="highlight"] code,
[class*="highlight"] pre,
kbd {
 text-transform: none !important;
}

/* remove all rounded corners site-wide */
*,
*::before,
*::after {
 border-radius: 0 !important;
}

/* pricing calculator button styling */
:root {
 --btn-selected-bg: #CAB168;
 --btn-border: #000;
}
/* sidebar section headings — recede to a quiet "eyebrow" so they read as
 structure, distinct from the clickable page links below them. mintlify
 renders the group title as .sidebar-group-header (the old #sidebar-title id
 no longer exists), and the inner h3 inherits font/size/color from it. */
#navigation-items .sidebar-group-header {
 font-weight: 300 !important; /* Inter Light */
 font-size: 11px !important;
 
}

html.dark #navigation-items .sidebar-group-header {
 color: rgba(237, 238, 240, 0.55) !important;
}

/* divider + breathing room above each section after the first (non-first
 sections are wrapped by mintlify in a margin-top div) */
#navigation-items div[class*="mt-"] > .sidebar-group-header {
 margin-top: 0.75rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(33, 34, 37, 0.1);
}

html.dark #navigation-items div[class*="mt-"] > .sidebar-group-header {
 border-top-color: rgba(237, 238, 240, 0.1);
}

/* move nested nav arrows to the right */
#navigation-items li[data-title] > button.group,
#navigation-items li[data-title] > div.group {
 width: 100% !important;
 flex-direction: row-reverse !important;
 justify-content: space-between !important;
}

#navigation-items li[data-title] > button.group > svg,
#navigation-items li[data-title] > div.group > svg {
 margin-right: 0 !important;
 margin-left: 0 !important;
}

/* enhanced table styling - matches code group design */
.prose table,
article table,
table {
 width: 100% !important;
 border-collapse: separate !important;
 border-spacing: 0 !important;
 border-radius: 0 !important;
 overflow: hidden !important;
 border: 1px solid rgb(var(--gray-950) / 0.1) !important;
 background-color: rgb(249, 250, 251) !important;
 margin: 0 !important;
 display: table !important;
}

/* table headers */
.prose table thead th,
article table thead th,
table thead th {
 padding: 10px 16px !important;
 text-align: left !important;
 font-weight: 600 !important;
 font-size: 0.875rem !important;
 line-height: 1.5rem !important;
 background-color: rgba(0, 0, 0, 0.02) !important;
 border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
 word-wrap: break-word !important;
 word-break: break-word !important;
 overflow-wrap: break-word !important;
 white-space: normal !important;
 max-width: 0 !important;
}

/* table body */
.prose table tbody tr,
article table tbody tr,
table tbody tr {
 transition: background-color 0.15s ease !important;
 border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.prose table tbody tr:last-child,
article table tbody tr:last-child,
table tbody tr:last-child {
 border-bottom: none !important;
}

.prose table tbody tr:hover,
article table tbody tr:hover,
table tbody tr:hover {
 background-color: rgba(0, 0, 0, 0.02) !important;
}

.prose table tbody td,
article table tbody td,
table tbody td {
 padding: 10px 16px !important;
 font-size: 0.875rem !important;
 line-height: 1.5rem !important;
 word-wrap: break-word !important;
 word-break: break-word !important;
 overflow-wrap: break-word !important;
 white-space: normal !important;
 max-width: 0 !important;
 min-width: 130px !important;
}

/* code in tables */
.prose table code,
article table code,
table code {
 font-size: 0.8125rem !important;
 padding: 2px 6px !important;
 border-radius: 0 !important;
}

/* first column bold for reference tables */
.prose table tbody td:first-child,
article table tbody td:first-child,
table tbody td:first-child {
 font-weight: 500 !important;
}

/* tinker box responsive layout */
.tinker-box {
 display: flex;
 flex-direction: column;
 gap: 32px;
 padding: 32px;
 border: 1px solid rgba(0, 0, 0, 0.12);
 margin-top: 2rem;
 margin-bottom: 2rem;
}

.tinker-box-row {
 display: flex;
 align-items: center;
 gap: 32px;
}

.tinker-box-content {
 display: flex;
 flex-direction: column;
 gap: 32px;
 flex: 1;
 min-width: 0;
}

.tinker-box-content button {
 width: 100% !important;
 max-width: 100% !important;
}

@media (max-width: 640px) {
 .tinker-box {
 padding: 24px;
 gap: 24px;
 }

 .tinker-box-row {
 flex-direction: column;
 align-items: stretch;
 gap: 24px;
 width: 100%;
 }

 .tinker-box-content {
 width: 100%;
 }
}

/* dark mode overrides */
html.dark .prose table,
html.dark article table,
html.dark table {
 border-color: rgba(237, 238, 240, 0.10) !important;
 background-color: rgba(237, 238, 240, 0.02) !important;
}

html.dark .prose table thead th,
html.dark article table thead th,
html.dark table thead th {
 background-color: rgba(237, 238, 240, 0.04) !important;
 border-bottom-color: rgba(237, 238, 240, 0.10) !important;
}

html.dark .prose table tbody tr,
html.dark article table tbody tr,
html.dark table tbody tr {
 border-bottom-color: rgba(237, 238, 240, 0.08) !important;
}

html.dark .prose table tbody tr:hover,
html.dark article table tbody tr:hover,
html.dark table tbody tr:hover {
 background-color: rgba(237, 238, 240, 0.04) !important;
}

/* tinker box border */
html.dark .tinker-box {
 border-color: rgba(237, 238, 240, 0.14);
}

/* pricing calculator button border */
html.dark {
 --btn-border: #EDEEF0;
}

/* warning callout — selector depends on mintlify's yellow-* classes; renames silently break this */
html.dark .callout[class*="yellow"] {
 background-color: rgba(237, 238, 240, 0.03) !important;
 border-color: rgba(237, 238, 240, 0.10) !important;
}
html.dark .callout[class*="yellow"] svg {
 color: #CAB168 !important;
}

.dark .card:hover {
 border-color: rgb(223 223 223) !important;
}

.dark .link {
 border-bottom-color: #EDEEF0
}