/* ============================================================= GLOBAL TABLE STYLING Problem: Mintlify's default table rows are very tall (~80px+). Solution: Compact padding, remove min-width, fix image margins. ============================================================= */ /* Compact table cells */ .prose table td, .prose table th { min-width: 0 !important; padding: 0.5rem 0.375rem !important; line-height: 1.75 !important; } /* Image spacing in tables - 8px gap between icon and text */ .prose table img, .prose table .mint-inline, table img.mint-inline { margin: 0 8px 0 0 !important; vertical-align: middle !important; } /* Hide Mintlify's visual heading permalink chip while preserving heading IDs and hash/deep-link navigation. */ .prose :is(h2, h3, h4, h5, h6) > div.absolute > a[aria-label="Navigate to header"][href^="#"] { display: none !important; } /* Dark mode navbar button - match page background */ html.dark .bg-primary-dark { background-color: #090c10 !important; } /* Hide the section eyebrow (green label above page title like "Popular") */ [class*="eyebrow"], .eyebrow { display: none !important; } /* ============================================================= OVERVIEW TABLES Semantic Markdown tables with one scoped presentation contract. Mintlify continues to own table semantics and horizontal scrolling. ============================================================= */ .uai-overview-table { overflow: hidden; border: 1px solid #e4e4e7; border-radius: 0.5rem; } html.dark .uai-overview-table { border-color: rgba(255, 255, 255, 0.1); } /* Remove Mintlify's ordinary table breakout only inside the bordered shell. */ .uai-overview-table > [data-table-wrapper="true"] { --page-padding: 0px; margin: 0 !important; padding-block: 0 !important; } /* Fill the shell when content fits; grow into Mintlify's scroller when it does not. */ .prose .uai-overview-table table { width: max-content; min-width: 100%; } /* Overview rows are deliberately compact and remain on one line. */ .prose .uai-overview-table table th, .prose .uai-overview-table table td { min-width: 0 !important; padding: 9px 8px !important; line-height: 1.25rem !important; white-space: nowrap; } /* The shell supplies the bottom edge; avoid doubling it with the final row divider. */ .prose .uai-overview-table tbody tr:last-child { border-bottom: 0; } .prose .uai-overview-table table th { background: rgba(250, 250, 250, 0.6); color: #71717a; font-size: 0.8125rem; font-weight: 500; } html.dark .prose .uai-overview-table table th { background: rgba(255, 255, 255, 0.02); color: #a1a1aa; } /* Images in overview rows are compact identity icons, not content images. */ .prose .uai-overview-table tbody td img { display: inline; width: 1rem; height: 1rem; margin: 0 0.375rem 0 0 !important; vertical-align: middle !important; } /* Ranked overview tables keep rank first, centered, and visually secondary. */ .prose .uai-overview-table.uai-overview-table--ranked table th:first-child, .prose .uai-overview-table.uai-overview-table--ranked table td:first-child { color: #71717a; text-align: center; } html.dark .prose .uai-overview-table.uai-overview-table--ranked table th:first-child, html.dark .prose .uai-overview-table.uai-overview-table--ranked table td:first-child { color: #a1a1aa; } /* CSS-only long-table disclosure. Add the adjacent .uai-overview-more label after any overview table; it appears only when the table has 10+ rows. JS may update the open label to include the exact row count, but CSS owns collapse/expand so the table still works without JavaScript. */ .uai-overview-table:has(tbody tr:nth-child(10)):has(+ .uai-overview-more .uai-overview-toggle:not(:checked)) tbody tr:nth-child(n + 8) { visibility: collapse; } .uai-overview-more { display: none; width: fit-content; margin: 0.75rem auto 0; cursor: pointer; align-items: center; gap: 0.375rem; border: 1px solid #e4e4e7; border-radius: 9999px; background: transparent; padding: 0.375rem 1rem; color: #52525b; font-size: 0.8125rem; font-weight: 500; line-height: 1.75; transition: color 150ms; } .uai-overview-table:has(tbody tr:nth-child(10)) + .uai-overview-more { display: flex; } .uai-overview-toggle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; } .uai-overview-more-open, .uai-overview-more-close { align-items: center; gap: 0.375rem; } .uai-overview-more-open { display: inline-flex; } .uai-overview-more-close { display: none; } .uai-overview-more:has(.uai-overview-toggle:checked) .uai-overview-more-open { display: none; } .uai-overview-more:has(.uai-overview-toggle:checked) .uai-overview-more-close { display: inline-flex; } .uai-overview-more:hover { color: #18181b; } .uai-overview-more:has(.uai-overview-toggle:focus-visible) { outline: 2px solid #18181b; outline-offset: 2px; } html.dark .uai-overview-more { border-color: rgba(255, 255, 255, 0.15); color: #d4d4d8; } html.dark .uai-overview-more:hover { color: #fff; } html.dark .uai-overview-more:has(.uai-overview-toggle:focus-visible) { outline-color: #fafafa; } /* ============================================================= OVERVIEW TABLE STATICS — SSR-safe badges, ratings, and tips for overview-table cells. Cell content must stay plain inline markup: Mintlify renders MDX-exported components only after hydration, so component-driven cells ship empty in the initial HTML and pop in late (or never, without JavaScript). ============================================================= */ .uai-badge { display: inline-flex; align-items: center; border-radius: 0.25rem; padding: 2px 6px; font-size: 0.75rem; font-weight: 500; line-height: 1rem; } .uai-badge--zinc { background: #f4f4f5; color: #52525b; } html.dark .uai-badge--zinc { background: rgb(255 255 255 / 0.1); color: #d4d4d8; } .uai-badge--emerald { background: #ecfdf5; color: #047857; } html.dark .uai-badge--emerald { background: rgb(16 185 129 / 0.1); color: #34d399; } .uai-badge--sky { background: #f0f9ff; color: #0369a1; } html.dark .uai-badge--sky { background: rgb(14 165 233 / 0.1); color: #38bdf8; } .uai-badge--violet { background: #f5f3ff; color: #6d28d9; } html.dark .uai-badge--violet { background: rgb(139 92 246 / 0.1); color: #a78bfa; } .uai-badge--amber { background: #fffbeb; color: #b45309; } html.dark .uai-badge--amber { background: rgb(245 158 11 / 0.1); color: #fbbf24; } /* Rating values keep aligned numerals; the cell already stays on one line. */ .uai-rating { font-variant-numeric: tabular-nums; } /* Tip markers: the label/value text stays as plain static cell content; the built-in wraps ONLY this decorative icon. Built-in components used inline server-render their children (verified against an exported-component control page); only the popover behavior itself attaches on hydration, so nothing visible pops in. */ .uai-tip-icon { position: relative; top: 1px; display: inline-flex; cursor: pointer; color: #71717a; transition: opacity 150ms; } .uai-tip-icon:hover { opacity: 0.7; } html.dark .uai-tip-icon { color: #a1a1aa; } .uai-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================= MOBILE SPACING - Reduce padding above/below page header Problem: Mobile has 160px top padding (pt-40) while nav is only 120px. Solution: Reduce to 132px (8.25rem) for tighter spacing while clearing nav. ============================================================= */ @media (max-width: 1023px) { /* Reduce space above the page header (160px → 140px) */ .pt-40.lg\:pt-10 { padding-top: 8.75rem !important; } /* Reduce space below page title, before content (32px → 18px) */ #content { margin-top: 1.125rem !important; } } @media (min-width: 1024px) { /* Reduce desktop space below page title, before content (32px → 28px) */ #content { margin-top: 1.75rem; } } /* ============================================================= WIDE ARTICLE WIDTH STANDARD Luma already provides width: 100%, border-box sizing, and desktop centering. Only widen mode="wide" pages, while preserving the default and center layouts that may include a right-side panel. ============================================================= */ #navbar.is-wide ~ #body-content #content-area { max-width: 800px; /* 760px usable width + 20px gutters */ margin-inline: auto; padding-inline: 20px; } @media (min-width: 1024px) { #navbar.is-wide ~ #body-content #content-area { max-width: 824px; /* 760px usable width + 32px gutters */ padding-top: 3.25rem; padding-inline: 32px; } } /* ============================================================= WELCOME PAGE STYLING Uses simple class selectors instead of page-mode dependent selectors. Classes are applied directly in index.mdx for reliable styling. ============================================================= */ /* Welcome page container - constrain width and center */ .welcome-page { max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 3rem; padding-right: 3rem; } /* Mobile: reduce welcome page padding and adjust spacing */ @media (max-width: 640px) { .welcome-page { padding-left: 1.5rem; padding-right: 1.5rem; } /* Pill: compact and centered on mobile */ .welcome-pill { font-size: 13px; padding: 10px 16px; border-radius: 16px; text-align: center; } /* Cards: 2-column grid on mobile for better layout */ .welcome-cards { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; max-width: 100% !important; } .welcome-cards > a, .welcome-cards > div { min-height: 120px !important; } } /* Green pill badge - the "100% independent" message */ .welcome-pill { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto 48px auto; padding: 10px 20px 10px 16px; border-radius: 100px; background-color: #f0fdf4; border: 1px solid #bbf7d0; font-size: 14px; font-weight: 500; } .welcome-pill-icon { color: #22c55e; font-size: 14px; flex-shrink: 0; } .welcome-pill-text, .welcome-pill-text strong { color: #166534; font-weight: 500; } /* Dark mode pill */ html.dark .welcome-pill { background-color: rgba(22, 163, 74, 0.15); border-color: rgba(74, 222, 128, 0.3); } html.dark .welcome-pill-icon, html.dark .welcome-pill-text, html.dark .welcome-pill-text strong { color: #4ade80; } /* Welcome cards - spacing and equal height */ .welcome-cards { gap: 1rem; max-width: 100%; } .welcome-cards > a, .welcome-cards > div { min-height: 140px; } /* Hide horizontal rules on welcome page */ .welcome-page hr { display: none; } /* ============================================================= DARK MODE SEPARATORS (HR) Problem: Mintlify sets hr border to rgba(37, 37, 37, 0.5) which is nearly invisible on dark backgrounds. Solution: Override to visible white in dark mode only. ============================================================= */ html.dark .prose hr { border-color: rgba(255, 255, 255, 0.12) !important; } /* ============================================================= WELCOME PAGE CARD ICONS - Green Icon Boxes Adds a light green rounded background behind card icons. Uses simple class selector instead of page-mode dependent selector. ============================================================= */ .welcome-cards [class*="h-6"][class*="w-6"]:has(svg) { background: #F0FDF4; padding: 10px; border-radius: 8px; width: 24px; height: 24px; box-sizing: content-box; margin-bottom: 8px; } /* Green icon color - icons use mask-image with backgroundColor for the color */ .welcome-cards svg { background-color: #16A34A; } html.dark .welcome-cards [class*="h-6"][class*="w-6"]:has(svg) { background: rgba(22, 163, 74, 0.15); } /* ---- 2.0 migration utilities (design library, 2026-07-12) ---- */ /* Muted numerals inside whole-row links — Mintlify's .link color overrides text-color utilities on descendants, so this dedicated class wins instead. */ .u-num-muted { color: #71717a !important; } html.dark .u-num-muted { color: #a1a1aa !important; } /* ===== Shell stream — decided defaults (approved 2026-07-12) ===== */ /* Navbar logo: icon-only SVG + live Inter wordmark (21px / 700 / -0.03em, 1px down) */ /* Key this to the logo image: Mintlify no longer renders the old data-slot marker. */ #navbar a[href="/"]:has(> img.nav-logo) { display: flex; align-items: center; gap: 0.575rem; } #navbar a[href="/"]:has(> img.nav-logo) > img.nav-logo { height: 22px; } #navbar a[href="/"]:has(> img.nav-logo)::after { content: "Useful AI"; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: rgb(9 9 11); line-height: 1; position: relative; top: 1px; } html.dark #navbar a[href="/"]:has(> img.nav-logo)::after { color: #ffffff; } /* Desktop sidebar geometry — active, revisitable baseline (2026-07-21). Mintlify's content shell begins at 224px. The fixed panel is shifted 6px left and kept 230px wide, so its real divider/scrollbar edge lands at 224px. A 14px structural right inset preserves the existing row and chevron positions. The separate mobile drawer remains native. */ #sidebar-content { border-right: 1px solid rgb(228 228 231 / 0.65); } html.dark #sidebar-content { border-right: 1px solid rgb(255 255 255 / 0.07); } @media (min-width: 1024px) { #navbar a[href="/"]:has(> img.nav-logo) { transform: translateX(-6px); } #sidebar-content { left: -6px; width: 14.375rem; } #sidebar-content #navigation-items { padding-right: 0.875rem; } } /* Sidebar rows: 8px radius; hover 5% pill (links and group-toggle buttons, all depths) */ #sidebar-content .sidebar-group li > a, #sidebar-content .sidebar-group li > button { width: 100%; border-radius: 0.5rem; outline-offset: -1px; } #sidebar-content .sidebar-group li > a:hover, #sidebar-content .sidebar-group li > button:hover { background-color: rgb(var(--gray-600) / 0.05); color: rgb(var(--gray-900)); } html.dark #sidebar-content .sidebar-group li > a:hover, html.dark #sidebar-content .sidebar-group li > button:hover { background-color: rgb(var(--gray-200) / 0.05); color: rgb(var(--gray-300)); } /* Sidebar active: OpenAI recipe — 8% tint, body ink, regular weight, no faux-bold */ #sidebar-content .sidebar-group li[data-active="true"] > a, #sidebar-content .sidebar-group li[data-active-nav-item="true"] > a { background-color: rgb(var(--gray-950) / 0.08); border-radius: 0.5rem; color: rgb(var(--gray-800)) !important; text-shadow: none !important; } html.dark #sidebar-content .sidebar-group li[data-active="true"] > a, html.dark #sidebar-content .sidebar-group li[data-active-nav-item="true"] > a { background-color: rgb(255 255 255 / 0.08); color: rgb(var(--gray-200)) !important; text-shadow: none !important; } /* Guide line in front of expanded nested-group children */ #sidebar-content li[data-group-tag] > ul { position: relative; } #sidebar-content li[data-group-tag] > ul::before { content: ""; position: absolute; left: 1.125rem; top: 4px; bottom: 4px; width: 1px; background: rgb(228 228 231); } html.dark #sidebar-content li[data-group-tag] > ul::before { background: rgb(255 255 255 / 0.1); } /* Nested child hover/active pill: pull the LEFT edge in so it sits just right of the guide line (not over it). width:auto lets the left margin shrink the box instead of overflowing on the right; reduced padding keeps the text where it was (nested leaves are padding-left:28px). Added 2026-07-13. */ #sidebar-content li[data-group-tag] > ul > li > a { width: auto; margin-left: 1.375rem; padding-left: 0.375rem !important; } /* TOC shows H2 entries only (H3/H4 carry inline padding-left) */ #table-of-contents li.toc-item:has(> a[style*="padding-left"]) { display: none; } /* ===== Basics stream — inline logo nudge (decided 2026-07-12) ===== -top-px does not compile in markdown class= context (unprefixed classes); JSX className context compiles it fine (mint--top-px). This covers the markdown case. */ img.relative.rounded-sm.inline { top: -1px; } /* ============================================================= INK TOKENS — the site-wide text-color contract (decided 2026-07-13, feeds stream; approved with the dark-mode a11y fixes). Why these exist: Tailwind color utilities fail to compile selectively (landmine 2), and when one fails inside a whole-row the text silently inherits the anchor color — unreadable in dark mode. Plain CSS classes always ship. Three tiers only; meaningful text never goes lighter than uai-ink-muted (contrast floor). Icons: pass color="currentColor" so the icon follows the wrapper's ink class; keep fixed hexes only for semantic/brand color (YouTube red #dc2626, emerald checks, rose crosses). ============================================================= */ .uai-ink-strong { color: #09090b; } /* names, primary values */ html.dark .uai-ink-strong { color: #fafafa; } .uai-ink-body { color: #3e3e3e; } /* ordinary descriptive text */ html.dark .uai-ink-body { color: #d4d4d8; } .uai-ink-muted { color: #71717a; } /* meaningful metadata — WCAG-readable floor */ html.dark .uai-ink-muted { color: #a1a1aa; } /* Updated row — one MDX class owns the approved clock, spacing, and text style. */ .uai-updated-row { display: flex; align-items: center; gap: 0.375rem; margin-top: -0.5rem; margin-bottom: 2rem; padding-left: 0.25rem; color: #27272a; font-size: 0.875rem; line-height: 1.25rem; } .uai-updated-row::before { content: ""; width: 10px; height: 10px; background-color: currentColor; -webkit-mask: url("/images/ui/clock-rotate-left.svg") center / contain no-repeat; mask: url("/images/ui/clock-rotate-left.svg") center / contain no-repeat; } html.dark .uai-updated-row { color: #e4e4e7; } @media (min-width: 1024px) { .uai-updated-row { margin-top: -1rem; } } /* Standardize ordinary content links. Explicit component opt-outs keep their own interaction styling. */ .prose a[href]:not(.no-underline):not(.mint-no-underline):not([class~="group/link"]):not(.uai-itemcard-row--title a) { border-bottom: 0 !important; text-decoration-line: underline !important; text-decoration-color: color-mix(in srgb, currentColor 80%, transparent) !important; text-decoration-thickness: auto !important; text-underline-offset: 2px !important; transition: text-decoration-color 150ms ease; } .prose a[href]:not(.no-underline):not(.mint-no-underline):not([class~="group/link"]):not(.uai-itemcard-row--title a):hover, .prose a[href]:not(.no-underline):not(.mint-no-underline):not([class~="group/link"]):not(.uai-itemcard-row--title a):focus-visible { text-decoration-color: currentColor !important; } /* Deprecated alias of uai-ink-muted (predates the token trio; kept so nothing breaks — new code uses uai-ink-muted). */ .u-num-muted { color: #71717a !important; } html.dark .u-num-muted { color: #a1a1aa !important; } /* ============================================================= FEED TAB SWITCHER — TB2 outlined-container pill switcher (decided 2026-07-12) wired as an SSR-safe radio group: radios, labels, and panels as direct siblings inside a .fy-tabs wrapper. All panels stay in the DOM (SEO); CSS sibling selectors do the switching. Use a div wrapper: Mintlify defers children inside the previous fieldset wrapper to hydration instead of initial HTML. ============================================================= */ /* Contract: radios get ids fy-tab-1..4, panels get ids fy-panel-1..4, labels use htmlFor — same ids on every feed page (ids are per-page). Radios, .fy-tablist, and panels are DIRECT SIBLINGS inside .fy-tabs. */ .fy-tabs { margin: 0; padding: 0; } .fy-tabs > input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .fy-tablist { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e4e4e7; border-radius: 9999px; padding: 4px; margin-bottom: 24px; } html.dark .fy-tablist { border-color: rgba(255, 255, 255, 0.15); } .fy-tablist label { display: inline-flex; align-items: center; cursor: pointer; border-radius: 9999px; padding: 6px 14px; font-size: 14px; line-height: 20px; font-weight: 500; color: #71717a; } .fy-panel { display: none; } #fy-tab-1:checked ~ .fy-tablist label[for="fy-tab-1"], #fy-tab-2:checked ~ .fy-tablist label[for="fy-tab-2"], #fy-tab-3:checked ~ .fy-tablist label[for="fy-tab-3"], #fy-tab-4:checked ~ .fy-tablist label[for="fy-tab-4"] { background: #18181b; color: #fff; } html.dark #fy-tab-1:checked ~ .fy-tablist label[for="fy-tab-1"], html.dark #fy-tab-2:checked ~ .fy-tablist label[for="fy-tab-2"], html.dark #fy-tab-3:checked ~ .fy-tablist label[for="fy-tab-3"], html.dark #fy-tab-4:checked ~ .fy-tablist label[for="fy-tab-4"] { background: #fff; color: #18181b; } #fy-tab-1:checked ~ #fy-panel-1, #fy-tab-2:checked ~ #fy-panel-2, #fy-tab-3:checked ~ #fy-panel-3, #fy-tab-4:checked ~ #fy-panel-4 { display: block; } /* Keyboard focus on a radio draws the ring on its visible pill (a11y, decided 2026-07-12) */ #fy-tab-1:focus-visible ~ .fy-tablist label[for="fy-tab-1"], #fy-tab-2:focus-visible ~ .fy-tablist label[for="fy-tab-2"], #fy-tab-3:focus-visible ~ .fy-tablist label[for="fy-tab-3"], #fy-tab-4:focus-visible ~ .fy-tablist label[for="fy-tab-4"] { outline: 2px solid #18181b; outline-offset: 2px; } html.dark #fy-tab-1:focus-visible ~ .fy-tablist label[for="fy-tab-1"], html.dark #fy-tab-2:focus-visible ~ .fy-tablist label[for="fy-tab-2"], html.dark #fy-tab-3:focus-visible ~ .fy-tablist label[for="fy-tab-3"], html.dark #fy-tab-4:focus-visible ~ .fy-tablist label[for="fy-tab-4"] { outline-color: #fafafa; } /* ============================================================= OVERVIEW BREAKOUT — exceptional opt-in for a primary overview table or directory that still needs width after its columns and content have been simplified. Full-width through tablet; at desktop the caps expand symmetrically around the prose column. ============================================================= */ .uai-overview-breakout { width: 100%; max-width: 100%; min-width: 0; } @media (min-width: 1200px) { .uai-overview-breakout { position: relative; left: 50%; width: max-content; max-width: calc(100% + 224px); transform: translateX(-50%); } } @media (min-width: 1280px) { .uai-overview-breakout { max-width: calc(100% + 288px); } } /* ============================================================= DIRECTORY SHOW-MORE — CSS-only disclosure (decided pattern). One checkbox + ONE label with two state-swapped spans so the accessible name is "Show N more…" or "Show less", never both (two labels on one input concatenate into a garbage name). The checkbox's native checked state announces expansion. ============================================================= */ .fy-more-close { display: none; } .fy-more-toggle:checked ~ label .fy-more-open { display: none; } .fy-more-toggle:checked ~ label .fy-more-close { display: flex; } .fy-more-toggle:focus-visible ~ label { outline: 2px solid #18181b; outline-offset: -2px; } html.dark .fy-more-toggle:focus-visible ~ label { outline-color: #fafafa; } /* Table variant of show-more: collapsed rows stay in the table's intrinsic sizing calculation, so revealing them cannot shift the columns. This rule is intentionally scoped to table rows; flexible directory lists do not share a column-sizing calculation. */ .fy-more-table .fy-more-row { display: table-row; visibility: collapse; } .fy-more-toggle:checked ~ .fy-more-table .fy-more-row { visibility: visible; } .fy-more-toggle:checked ~ .fy-more-pill .fy-more-open { display: none; } .fy-more-toggle:checked ~ .fy-more-pill .fy-more-close { display: inline-flex; } .fy-more-toggle:focus-visible ~ .fy-more-pill label { outline: 2px solid #18181b; outline-offset: 2px; } html.dark .fy-more-toggle:focus-visible ~ .fy-more-pill label { outline-color: #fafafa; } /* INDEXABLE TAB LANDINGS — keep each section index as the first tab-level page so Mintlify includes it in the route and sitemap, but do not repeat an "All …" row above the existing sidebar groups. Mintlify renders separate desktop and mobile navigation copies. */ #sidebar-content li[id="/tools"], #sidebar-content li[id="/models"], #sidebar-content li[id="/use-cases"], #sidebar-content li[id="/feeds"], #sidebar-content li[id="/cheat-sheets"], #mobile-nav li[id="/tools"], #mobile-nav li[id="/models"], #mobile-nav li[id="/use-cases"], #mobile-nav li[id="/feeds"], #mobile-nav li[id="/cheat-sheets"] { display: none !important; } /* When the landing row is the only ungrouped page, remove its now-empty list from layout and the accessibility tree. Production Mintlify still marks the following desktop group as subsequent, so remove only that first 32px group margin. Mobile keeps its intentional spacing below the tab selector. */ #sidebar-content ul.sidebar-group:has(> li:is([id="/tools"], [id="/models"], [id="/use-cases"], [id="/feeds"], [id="/cheat-sheets"]):only-child), #mobile-nav ul.sidebar-group:has(> li:is([id="/tools"], [id="/models"], [id="/use-cases"], [id="/feeds"], [id="/cheat-sheets"]):only-child) { display: none !important; } #sidebar-content ul.sidebar-group:has(> li:is([id="/tools"], [id="/models"], [id="/use-cases"], [id="/feeds"], [id="/cheat-sheets"]):only-child) + div { margin-top: 0 !important; } /* ============================================================= BOOKS — no sidebar (route-scoped). The books roundup should read as a standalone centered article. On luma, mode:"center" centers the content (#content-area is max-w + mx-auto) but still renders the tab sidebar; since #sidebar-content is position:fixed, hiding it for just this route leaves the already-centered article intact. Hook: Mintlify stamps data-current-path on , updated per SPA route. Verify on deploy (same class of Mintlify-runtime behavior). ============================================================= */ html[data-current-path="/books"] #sidebar-content, html[data-current-path="/resources"] #sidebar-content { display: none !important; } /* ============================================================= HIDDEN SECTION-TABS — don't surface in the navbar when active. luma (unlike the mint theme the live site uses) re-shows a `hidden: true` tab in the navbar as an active pill whenever you're on one of its pages. Our Feeds / Courses / Books / Cheat Sheets are hidden section-tabs reached from the Resources hub, so that pill is unwanted. luma marks the active tab with aria-current="location"; scope by route (data-current-path) so only these sections are affected and real visible tabs (Tools, Models, …) never are. The pill is the last

in the navbar tab list. Verify on deploy. ============================================================= */ html[data-current-path^="/feeds"] #navbar li:has(> a[aria-current="location"]), html[data-current-path^="/courses"] #navbar li:has(> a[aria-current="location"]), html[data-current-path^="/books"] #navbar li:has(> a[aria-current="location"]), html[data-current-path^="/cheat-sheets"] #navbar li:has(> a[aria-current="location"]) { display: none !important; } /* Page descriptions exist only for SEO metadata (meta description tag); the visible copy under the title is intentionally suppressed site-wide. */ #header .prose { display: none; } /* Theme headings: semibold instead of Luma's medium, and correct the H1's fixed -0.5px letter-spacing to the Inter dynamic-metrics value for 36px. Scoped to #page-title and direct children of the prose container so card/component headings keep their own styles. */ h1#page-title { font-weight: 600; letter-spacing: -0.022em; } .mdx-content > h2, .mdx-content > h3 { font-weight: 600; } /* Reader-facing article copy sometimes lives inside `not-prose` layouts. Restore the normal prose rhythm without enlarging metadata or controls. */ .prose .uai-article-prose { font-size: 1rem; line-height: 1.75rem; } /* ===== BEGIN UAI ITEM CARD CONTRACT v1 ================================ Canonical shared item-section CSS. Author cards as literal MDX using the matching contract in design-lab/preview/library/item-sections.mdx. Source order is layout order; CSS does not infer or reorder identity rows. ======================================================================== */ .uai-itemcard { margin: 1.5rem 0 0; border: 1px solid #e4e4e7; border-radius: 0.75rem; background: transparent; padding: 1.375rem 1.5rem; } html.dark .uai-itemcard { border-color: rgb(255 255 255 / 0.12); } .uai-itemcard-head { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; } .uai-itemcard-icon { display: block; inline-size: 3.5rem; block-size: 3.5rem; overflow: hidden; border: 1px solid #e4e4e7; border-radius: 0.75rem; background: #fafafa; padding: 0.4rem; } html.dark .uai-itemcard-icon { border-color: rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.05); } .prose .uai-itemcard-icon > img { display: block; inline-size: 100%; block-size: 100%; margin: 0 !important; border-radius: 0.375rem; object-fit: contain; } .uai-itemcard-icon--photo { background: transparent; padding: 0; } .prose .uai-itemcard-icon--photo > img { border-radius: inherit; padding: 0; object-fit: cover; } .uai-itemcard-identity { display: flex; min-inline-size: 0; flex-direction: column; align-items: flex-start; gap: 0.125rem; } .uai-itemcard-row { display: flex; min-inline-size: 0; max-inline-size: 100%; flex-wrap: wrap; align-items: baseline; column-gap: 0.625rem; row-gap: 0.25rem; color: #71717a; font-size: 0.8125rem; line-height: 1.25rem; } html.dark .uai-itemcard-row { color: #a1a1aa; } .uai-itemcard-row--title { align-items: baseline; } .prose .uai-itemcard-row--title h2 { min-inline-size: 0; max-inline-size: 100%; margin: 0 !important; color: #09090b; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.75rem; } .prose .uai-itemcard-row--title h2 a { color: inherit; border-bottom: 0 !important; text-decoration: none !important; } .prose .uai-itemcard-row--title h2 a:hover { text-decoration: underline !important; text-underline-offset: 0.25rem; } html.dark .prose .uai-itemcard-row--title h2 { color: #fafafa; } .uai-itemcard-byline { color: #71717a; font-size: 0.875rem; font-weight: 400; line-height: 1.25rem; } html.dark .uai-itemcard-byline { color: #a1a1aa; } .uai-itemcard-note { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } .uai-itemcard-note--green { color: #047857; } .uai-itemcard-note--blue { color: #0369a1; } html.dark .uai-itemcard-note--green { color: #34d399; } html.dark .uai-itemcard-note--blue { color: #38bdf8; } .uai-itemcard-tag { display: inline-flex; max-inline-size: 100%; align-items: center; border-radius: 0.25rem; padding: 0.125rem 0.375rem; font-size: 0.75rem; font-weight: 500; line-height: 1rem; white-space: nowrap; } .uai-itemcard-row--title .uai-itemcard-tag { align-self: center; } .uai-itemcard-tag--blue { background: #f0f9ff; color: #0369a1; } .uai-itemcard-tag--violet { background: #f5f3ff; color: #6d28d9; } html.dark .uai-itemcard-tag--blue { background: rgb(14 165 233 / 0.1); color: #38bdf8; } html.dark .uai-itemcard-tag--violet { background: rgb(139 92 246 / 0.1); color: #a78bfa; } .uai-itemcard-end { display: flex; justify-self: end; align-items: center; justify-content: flex-end; } .uai-itemcard-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: 0.5rem; background: #047857; padding: 0.5rem 1rem; color: #fff !important; font-size: 0.8125rem; font-weight: 500; line-height: 1.75; border-bottom-width: 0 !important; text-decoration: none !important; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } .uai-itemcard-cta:hover { background: #065f46; } .uai-itemcard-cta--blue { background: #0369a1; } .uai-itemcard-cta--blue:hover { background: #075985; } html.dark .uai-itemcard-cta { background: #34d399; color: #18181b !important; } html.dark .uai-itemcard-cta:hover { background: #6ee7b7; } html.dark .uai-itemcard-cta--blue { background: #38bdf8; } html.dark .uai-itemcard-cta--blue:hover { background: #7dd3fc; } .uai-itemcard-metric { display: flex; flex-direction: column; align-items: flex-end; color: #18181b; font-variant-numeric: tabular-nums; } .uai-itemcard-metric strong { font-size: 1.375rem; font-weight: 600; line-height: 1.5rem; } .uai-itemcard-metric span { margin-top: 0.125rem; color: #71717a; font-size: 0.6875rem; font-weight: 400; line-height: 1rem; } html.dark .uai-itemcard-metric { color: #fafafa; } html.dark .uai-itemcard-metric span { color: #a1a1aa; } .uai-itemcard-body { margin-top: 1.125rem; border-top: 1px solid #f4f4f5; padding-top: 1rem; } html.dark .uai-itemcard-body { border-top-color: rgb(255 255 255 / 0.06); } .prose .uai-itemcard-summary { margin: 0 !important; color: #3f3f46; font-size: 1rem; line-height: 1.75rem; } .prose .uai-itemcard-summary + .uai-itemcard-summary { margin-top: 0.5rem !important; } .prose .uai-itemcard-summary > :first-child { margin-top: 0 !important; } .prose .uai-itemcard-summary > :last-child { margin-bottom: 0 !important; } .prose .uai-itemcard-summary > p { color: inherit; font: inherit; } .prose .uai-itemcard-summary > [data-as="p"] { display: block; } .prose .uai-itemcard-summary > [data-as="p"] + [data-as="p"] { margin-top: 0.5rem; } html.dark .prose .uai-itemcard-summary { color: #d4d4d8; } .uai-itemcard-section + .uai-itemcard-section { margin-top: 1rem; } .uai-itemcard-section--after-facts { margin-top: 1rem; } /* Give a distinct editorial verdict and its supporting paragraph normal paragraph rhythm when they are authored as separate card sections. */ .uai-itemcard-section--after-summary { margin-top: 0.75rem; } .prose .uai-itemcard-section > h3 { margin: 0 0 0.25rem !important; color: #09090b; font-size: 0.9375rem; font-weight: 600; line-height: 1.375rem; } html.dark .prose .uai-itemcard-section > h3 { color: #fafafa; } /* Facts: the one token line. Direct child s are atomic tokens (a pair, a badge, a rating); they never break internally, the line wraps between them, and every separator dot is generated here — never authored. */ .uai-itemcard-facts { --uai-itemcard-dot-gap: 0.3125rem; display: flex; min-inline-size: 0; max-inline-size: 100%; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 0; color: #71717a; font-size: 0.8125rem; line-height: 1.25rem; } .uai-itemcard-identity > .uai-itemcard-facts { --uai-itemcard-dot-gap: 0.1875rem; } .uai-itemcard-body > .uai-itemcard-facts { margin-top: 1rem; } html.dark .uai-itemcard-facts { color: #a1a1aa; } .uai-itemcard-facts strong { color: #09090b; font-weight: 500; font-variant-numeric: tabular-nums; } html.dark .uai-itemcard-facts strong { color: #fafafa; } .uai-itemcard-facts > span { white-space: nowrap; } /* Body facts breathe more than compact identity facts; parent context changes one spacing variable while the authored facts structure stays identical. */ .uai-itemcard-facts > span:not(:last-child)::after { content: "·"; content: "·" / ""; color: #d4d4d8; margin-inline: var(--uai-itemcard-dot-gap); } html.dark .uai-itemcard-facts > span:not(:last-child)::after { color: #52525b; } .uai-itemcard-fact-icon { display: inline-flex; inline-size: 1rem; align-items: center; justify-content: center; margin-inline-end: 0.3rem; color: #a1a1aa; vertical-align: -0.125rem; } /* Course fact glyphs as CSS masks (D25). Tooltip triggers keep their . */ .uai-itemcard-fact-icon--clock::after, .uai-itemcard-fact-icon--user::after, .uai-itemcard-fact-icon--tag::after { content: ""; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: var(--fi) no-repeat center / contain; mask: var(--fi) no-repeat center / contain; } .uai-itemcard-fact-icon--clock { --fi: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/clock.svg"); } .uai-itemcard-fact-icon--user { --fi: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/user.svg"); } .uai-itemcard-fact-icon--tag { --fi: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/tag.svg"); } /* Platform glyphs as CSS masks (D25): the span itself is the icon; the title attribute keeps the hover label. Same FA assets as . */ .uai-itemcard-pficon { display: inline-flex; width: 13px; height: 13px; background-color: currentColor; -webkit-mask: var(--pf) no-repeat center / contain; mask: var(--pf) no-repeat center / contain; } .uai-itemcard-pficon--apple { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/apple.svg"); } .uai-itemcard-pficon--windows { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/windows.svg"); } .uai-itemcard-pficon--android { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/android.svg"); } .uai-itemcard-pficon--linux { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/linux.svg"); } .uai-itemcard-pficon--mobile { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/mobile.svg"); } .uai-itemcard-pficon--tablet { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/tablet.svg"); } .uai-itemcard-pficon--globe { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/globe.svg"); } .uai-itemcard-pficon--code { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/code.svg"); } .uai-itemcard-pficon--terminal { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/terminal.svg"); } .uai-itemcard-pficon--circle { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/circle.svg"); } .uai-itemcard-pficon--puzzle-piece { --pf: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/puzzle-piece.svg"); } .uai-itemcard-platforms { display: inline-flex; align-items: center; gap: 0.3rem; color: #52525b; vertical-align: -0.15rem; } html.dark .uai-itemcard-platforms { color: #a1a1aa; } .uai-itemcard-platforms > span { display: inline-flex; } .uai-itemcard-details-group { margin-top: 0.75rem; margin-bottom: -0.75rem; } .uai-itemcard-details { border-bottom: 1px solid #f4f4f5; } .uai-itemcard-details:first-child { border-top: 1px solid #f4f4f5; } .uai-itemcard-details:last-child { border-bottom: 0; } html.dark .uai-itemcard-details-group, html.dark .uai-itemcard-details { border-color: rgb(255 255 255 / 0.07); } .uai-itemcard-details-toggle { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; clip: rect(0 0 0 0); white-space: nowrap; } .uai-itemcard-details > label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 0.125rem; color: #09090b; cursor: pointer; font-size: 0.9375rem; font-weight: 600; list-style: none; } .uai-itemcard-details-chevron { display: inline-flex; color: #a1a1aa; transition: transform 180ms ease; } .uai-itemcard-details-toggle:checked ~ label .uai-itemcard-details-chevron { transform: rotate(180deg); } /* Chevron drawn in CSS when no child is present (D25): same FA asset, inherits the span's open-state rotation. */ .uai-itemcard-details-chevron:not(:has(svg))::after { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/chevron-down.svg") no-repeat center / contain; mask: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/chevron-down.svg") no-repeat center / contain; } .uai-itemcard-details > label:hover { color: #52525b; } .uai-itemcard-details-toggle:focus-visible ~ label { border-radius: 0.25rem; outline: 2px solid #18181b; outline-offset: 2px; } html.dark .uai-itemcard-details > label { color: #fafafa; } html.dark .uai-itemcard-details > label:hover { color: #d4d4d8; } html.dark .uai-itemcard-details-toggle:focus-visible ~ label { outline-color: #fafafa; } .uai-itemcard-details-body { display: none; padding: 0 0.125rem 1rem; } .uai-itemcard-details-toggle:checked ~ .uai-itemcard-details-body { display: block; } .prose .uai-itemcard-details-body > :first-child { margin-top: 0; } .prose .uai-itemcard-details-body > :last-child { margin-bottom: 0; } .prose .uai-itemcard-details-body > [data-as="p"] { display: block; } .prose .uai-itemcard-details-body > [data-as="p"] + [data-as="p"] { margin-top: 0.5rem; } .uai-itemcard-list { margin-top: 1.125rem; } .prose .uai-itemcard-list-label { margin: 0 0 0.25rem !important; color: #09090b; font-size: 0.9375rem; font-weight: 600; } html.dark .prose .uai-itemcard-list-label { color: #fafafa; } .uai-itemcard-listitem { display: flex; align-items: center; gap: 0.625rem; border-bottom: 1px solid #f4f4f5 !important; padding: 0.625rem 0.125rem; color: #09090b !important; font-size: 0.9375rem; text-decoration: none !important; transition: background-color 150ms; } .uai-itemcard-listitem:last-child { border-bottom: 0 !important; } .uai-itemcard-listitem:hover { background: #fafafa; } .uai-itemcard-listitem-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; } html.dark .uai-itemcard-listitem { border-bottom-color: rgb(255 255 255 / 0.06) !important; color: #d4d4d8 !important; } html.dark .uai-itemcard-listitem:hover { background: rgb(255 255 255 / 0.03); } .uai-itemcard-listitem-title { min-inline-size: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3f3f46; font-size: 0.875rem; font-weight: 500; } html.dark .uai-itemcard-listitem-title { color: #d4d4d8; } .uai-itemcard-listitem-meta { flex: 0 0 auto; color: #71717a; font-size: 0.75rem; font-variant-numeric: tabular-nums; } html.dark .uai-itemcard-listitem-meta { color: #a1a1aa; } .uai-itemcard-listitem-arrow { display: inline-flex; flex: 0 0 auto; color: #71717a; } .uai-itemcard-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; border-top: 1px solid #f4f4f5; padding-top: 1rem; } html.dark .uai-itemcard-rail { border-top-color: rgb(255 255 255 / 0.06); } .prose .uai-itemcard-rail-label { margin: 0 0.375rem 0 0 !important; color: #18181b; font-size: 0.875rem; font-weight: 650; line-height: 1.25rem; /* Carried by the class so the label renders identically as h3 or span; matches the heading tracking the h3 variant used to inherit. */ letter-spacing: -0.025em; } html.dark .prose .uai-itemcard-rail-label { color: #fafafa; } .uai-itemcard-install { display: inline-flex; min-block-size: 2.2rem; align-items: center; gap: 0.45rem; border: 1px solid #e4e4e7 !important; border-radius: 0.65rem; background: #fff; padding: 0.45rem 0.65rem; color: #18181b !important; font-size: 0.8125rem; font-weight: 550; line-height: 1rem; text-decoration: none !important; } .uai-itemcard-install:hover { background: #fafafa; } html.dark .uai-itemcard-install { border-color: rgb(255 255 255 / 0.12) !important; background: rgb(255 255 255 / 0.03); color: #fafafa !important; } html.dark .uai-itemcard-install:hover { background: rgb(255 255 255 / 0.05); } .prose .uai-itemcard-install > svg { color: #71717a; } html.dark .prose .uai-itemcard-install > svg { color: #a1a1aa; } html.dark .uai-itemcard-install:not(:has(svg))::after { background-color: #a1a1aa; } .prose .uai-itemcard-install > img { inline-size: 1rem; block-size: 1rem; margin: 0 !important; border-radius: 0.25rem; object-fit: contain; } /* Cheat-sheet cards use the shared item-card contract without an identity icon. The native Frame remains full width while only the preview is capped. */ .uai-itemcard--cheatsheet .uai-itemcard-head { grid-template-columns: minmax(0, 1fr) auto; } .uai-itemcard--cheatsheet .uai-itemcard-media { margin-top: 1rem; } .uai-itemcard-identity > .uai-itemcard-facts--roomy { --uai-itemcard-dot-gap: 0.375rem; } .uai-itemcard-preview--compact { inline-size: calc(100% - 2rem); max-inline-size: 20rem; margin-inline: auto; } .uai-itemcard-preview--landscape { max-inline-size: 38rem; } .uai-itemcard-preview--square { max-inline-size: 26rem; } .prose .uai-itemcard-preview--compact img { display: block; inline-size: 100%; block-size: auto; margin: 0 !important; border-radius: 0.375rem; } .prose .uai-itemcard-media-caption { margin: 0.625rem 0 0 !important; color: #71717a; font-size: 0.875rem; line-height: 1.25rem; text-align: center; } html.dark .prose .uai-itemcard-media-caption { color: #a1a1aa; } @media (max-width: 639px) { .uai-itemcard { padding: 1rem 1.125rem; } .uai-itemcard-head { grid-template-columns: 2.75rem minmax(0, 1fr) auto; column-gap: 0.625rem; } .uai-itemcard-icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: 0.625rem; padding: 0.3rem; } .uai-itemcard-icon--photo { padding: 0; } .uai-itemcard-row { column-gap: 0.5rem; row-gap: 0.1875rem; } .prose .uai-itemcard-row--title h2 { font-size: 1.0625rem; letter-spacing: -0.01em; line-height: 1.375rem; } .uai-itemcard-cta { padding: 0.45rem 0.875rem; flex-shrink: 0; gap: 0; font-size: 0; } .uai-itemcard-cta::after { content: "Visit"; font-size: 0.8125rem; line-height: 1.75; } .uai-itemcard--cheatsheet-full-cta .uai-itemcard-cta { font-size: 0.8125rem; } .uai-itemcard--cheatsheet-full-cta .uai-itemcard-cta::after { content: none; } .uai-itemcard-metric strong { font-size: 1.125rem; line-height: 1.25rem; } .uai-itemcard-metric span { max-inline-size: 4.25rem; text-align: right; } .uai-itemcard-body { margin-top: 0.875rem; padding-top: 0.875rem; } .uai-itemcard-listitem-title { min-inline-size: 0; } .uai-itemcard-details > label { padding: 0.75rem 0.125rem; font-size: 0.9063rem; } } /* Feeds list-item glyphs as CSS masks (D25): fixed brand colors baked into the modifier so the rendering matches the old exactly. */ .uai-itemcard-listitem-icon--envelope::after, .uai-itemcard-listitem-icon--file-lines::after, .uai-itemcard-listitem-icon--comment::after, .uai-itemcard-listitem-icon--podcast::after, .uai-itemcard-listitem-icon--linkedin::after, .uai-itemcard-listitem-icon--x-twitter::after, .uai-itemcard-listitem-icon--reddit::after, .uai-itemcard-listitem-icon--youtube::after { content: ""; width: 15px; height: 15px; -webkit-mask: var(--li) no-repeat center / contain; mask: var(--li) no-repeat center / contain; } .uai-itemcard-listitem-icon--envelope { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/envelope.svg"); } .uai-itemcard-listitem-icon--envelope::after { background-color: #059669; } .uai-itemcard-listitem-icon--file-lines { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/file-lines.svg"); } .uai-itemcard-listitem-icon--file-lines::after { background-color: #52525b; } .uai-itemcard-listitem-icon--comment { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/comment.svg"); } /* bluesky's comment glyph renders at 14px in the source markup, not 15. */ .uai-itemcard-listitem-icon--comment::after { background-color: #0ea5e9; width: 14px; height: 14px; } .uai-itemcard-listitem-icon--podcast { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/podcast.svg"); } .uai-itemcard-listitem-icon--podcast::after { background-color: #7c3aed; } .uai-itemcard-listitem-icon--linkedin { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/linkedin.svg"); } .uai-itemcard-listitem-icon--linkedin::after { background-color: #0a66c2; } .uai-itemcard-listitem-icon--x-twitter { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/x-twitter.svg"); } .uai-itemcard-listitem-icon--x-twitter::after { background-color: currentColor; } .uai-itemcard-listitem-icon--reddit { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/reddit.svg"); } .uai-itemcard-listitem-icon--reddit::after { background-color: #ff4500; } .uai-itemcard-listitem-icon--youtube { --li: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/brands/youtube.svg"); } .uai-itemcard-listitem-icon--youtube::after { background-color: #dc2626; } /* List-item arrow drawn in CSS when no child is present. */ .uai-itemcard-listitem-arrow:not(:has(svg))::after { content: ""; width: 11px; height: 11px; background-color: currentColor; -webkit-mask: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/arrow-up-right.svg") no-repeat center / contain; mask: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/arrow-up-right.svg") no-repeat center / contain; } /* Markdown summaries directly in the card body (feeds): same summary styling. */ .prose .uai-itemcard-body > span[data-as="p"] { display: block; margin: 0; color: #3f3f46; font-size: 1rem; line-height: 1.75rem; } html.dark .prose .uai-itemcard-body > span[data-as="p"] { color: #d4d4d8; } .prose .uai-itemcard-body > span[data-as="p"] + span[data-as="p"] { margin-top: 0.5rem; } /* ===== END UAI ITEM CARD CONTRACT v1 ================================== */ /* ===== PLUGIN DIRECTORY AND CATEGORY PAGES ============================ Page-specific controls and table treatments used by /plugins. The shared item-card contract above remains the single source of card styling. */ .uai-extension-filters { display: flex; width: fit-content; margin: 0 0 0.75rem; gap: 0.25rem; border: 1px solid #e4e4e7; border-radius: 0.5rem; padding: 0.25rem; } .uai-extension-filter-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; } .uai-extension-filter-label { cursor: pointer; border-radius: 0.375rem; padding: 0.375rem 0.75rem; color: #71717a; font-size: 0.8125rem; font-weight: 500; line-height: 1.25rem; } .uai-extension-filter-label:hover { color: #18181b; } .uai-extension-filter-input:checked + .uai-extension-filter-label { background: #f4f4f5; color: #18181b; } .uai-extension-filter-input:focus-visible + .uai-extension-filter-label { outline: 2px solid #18181b; outline-offset: 2px; } html.dark .uai-extension-filters { border-color: rgba(255, 255, 255, 0.12); } html.dark .uai-extension-filter-label { color: #a1a1aa; } html.dark .uai-extension-filter-label:hover, html.dark .uai-extension-filter-input:checked + .uai-extension-filter-label { color: #fff; } html.dark .uai-extension-filter-input:checked + .uai-extension-filter-label { background: rgba(255, 255, 255, 0.08); } html.dark .uai-extension-filter-input:focus-visible + .uai-extension-filter-label { outline-color: #fafafa; } .uai-extension-cell { display: inline-flex; align-items: center; gap: 0.5rem; border-bottom: 0 !important; text-decoration: none !important; } .prose .uai-overview-table .uai-extension-cell > img { width: 1.25rem; height: 1.25rem; margin: 0 !important; border-radius: 0.25rem; } .uai-extension-cell-copy { display: inline-flex; flex-direction: column; gap: 0.0625rem; line-height: 1.1rem; } .uai-extension-name { color: #18181b; font-size: 0.9375rem; font-weight: 600; } html.dark .uai-extension-name { color: #fafafa; } .prose .uai-extension-directory-v2 .uai-overview-table tbody td { vertical-align: middle !important; } .prose .uai-overview-table--lead-icon thead th:last-child, .prose .uai-overview-table--lead-icon tbody td:last-child { padding-right: 1rem !important; } .uai-overview-table--lead-icon .uai-extension-cell { display: flex; align-items: center; } .prose .uai-mcp-mark { border-radius: 0; } html.dark .prose .uai-mcp-mark { filter: invert(1); } /* Category subgroup filters. Table markers use .uai-sgm-*; matching cards use .uai-sgc-*. Filtered results always bypass the seven-row collapse. */ .uai-subgroup-page:has(#uai-sg-drafting:checked) tbody tr:not(:has(.uai-sgm-drafting)), .uai-subgroup-page:has(#uai-sg-style:checked) tbody tr:not(:has(.uai-sgm-style)), .uai-subgroup-page:has(#uai-sg-translation:checked) tbody tr:not(:has(.uai-sgm-translation)), .uai-subgroup-page:has(#uai-sg-seo:checked) tbody tr:not(:has(.uai-sgm-seo)), .uai-subgroup-page:has(#uai-sg-social:checked) tbody tr:not(:has(.uai-sgm-social)), .uai-subgroup-page:has(#uai-sg-email:checked) tbody tr:not(:has(.uai-sgm-email)), .uai-subgroup-page:has(#uai-sg-ads:checked) tbody tr:not(:has(.uai-sgm-ads)), .uai-subgroup-page:has(#uai-sg-ui:checked) tbody tr:not(:has(.uai-sgm-ui)), .uai-subgroup-page:has(#uai-sg-tools:checked) tbody tr:not(:has(.uai-sgm-tools)), .uai-subgroup-page:has(#uai-sg-decks:checked) tbody tr:not(:has(.uai-sgm-decks)), .uai-subgroup-page:has(#uai-sg-images:checked) tbody tr:not(:has(.uai-sgm-images)), .uai-subgroup-page:has(#uai-sg-video:checked) tbody tr:not(:has(.uai-sgm-video)), .uai-subgroup-page:has(#uai-sg-audio:checked) tbody tr:not(:has(.uai-sgm-audio)), .uai-subgroup-page:has(#uai-sg-prospecting:checked) tbody tr:not(:has(.uai-sgm-prospecting)), .uai-subgroup-page:has(#uai-sg-crm:checked) tbody tr:not(:has(.uai-sgm-crm)), .uai-subgroup-page:has(#uai-sg-outreach:checked) tbody tr:not(:has(.uai-sgm-outreach)), .uai-subgroup-page:has(#uai-sg-quality:checked) tbody tr:not(:has(.uai-sgm-quality)), .uai-subgroup-page:has(#uai-sg-workflows:checked) tbody tr:not(:has(.uai-sgm-workflows)), .uai-subgroup-page:has(#uai-sg-context:checked) tbody tr:not(:has(.uai-sgm-context)), .uai-subgroup-page:has(#uai-sg-platforms:checked) tbody tr:not(:has(.uai-sgm-platforms)), .uai-subgroup-page:has(#uai-sg-cloud:checked) tbody tr:not(:has(.uai-sgm-cloud)), .uai-subgroup-page:has(#uai-sg-ops:checked) tbody tr:not(:has(.uai-sgm-ops)), .uai-subgroup-page:has(#uai-sg-observability:checked) tbody tr:not(:has(.uai-sgm-observability)), .uai-subgroup-page:has(#uai-sg-docs:checked) tbody tr:not(:has(.uai-sgm-docs)), .uai-subgroup-page:has(#uai-sg-projects:checked) tbody tr:not(:has(.uai-sgm-projects)), .uai-subgroup-page:has(#uai-sg-calendars:checked) tbody tr:not(:has(.uai-sgm-calendars)), .uai-subgroup-page:has(#uai-sg-databases:checked) tbody tr:not(:has(.uai-sgm-databases)), .uai-subgroup-page:has(#uai-sg-analytics:checked) tbody tr:not(:has(.uai-sgm-analytics)), .uai-subgroup-page:has(#uai-sg-warehouses:checked) tbody tr:not(:has(.uai-sgm-warehouses)), .uai-subgroup-page:has(#uai-sg-search:checked) tbody tr:not(:has(.uai-sgm-search)), .uai-subgroup-page:has(#uai-sg-crawl:checked) tbody tr:not(:has(.uai-sgm-crawl)), .uai-subgroup-page:has(#uai-sg-research:checked) tbody tr:not(:has(.uai-sgm-research)), .uai-subgroup-page:has(#uai-sg-orchestration:checked) tbody tr:not(:has(.uai-sgm-orchestration)), .uai-subgroup-page:has(#uai-sg-browser:checked) tbody tr:not(:has(.uai-sgm-browser)), .uai-subgroup-page:has(#uai-sg-computer:checked) tbody tr:not(:has(.uai-sgm-computer)), .uai-subgroup-page:has(#uai-sg-chat:checked) tbody tr:not(:has(.uai-sgm-chat)), .uai-subgroup-page:has(#uai-sg-meetings:checked) tbody tr:not(:has(.uai-sgm-meetings)), .uai-subgroup-page:has(#uai-sg-customer:checked) tbody tr:not(:has(.uai-sgm-customer)), .uai-subgroup-page:has(#uai-sg-config:checked) tbody tr:not(:has(.uai-sgm-config)), .uai-subgroup-page:has(#uai-sg-skills:checked) tbody tr:not(:has(.uai-sgm-skills)), .uai-subgroup-page:has(#uai-sg-behavior:checked) tbody tr:not(:has(.uai-sgm-behavior)), .uai-subgroup-page:has(#uai-sg-memory:checked) tbody tr:not(:has(.uai-sgm-memory)) { display: none; } .uai-subgroup-page:has(#uai-sg-drafting:checked) .uai-itemcard:not(.uai-sgc-drafting), .uai-subgroup-page:has(#uai-sg-style:checked) .uai-itemcard:not(.uai-sgc-style), .uai-subgroup-page:has(#uai-sg-translation:checked) .uai-itemcard:not(.uai-sgc-translation), .uai-subgroup-page:has(#uai-sg-seo:checked) .uai-itemcard:not(.uai-sgc-seo), .uai-subgroup-page:has(#uai-sg-social:checked) .uai-itemcard:not(.uai-sgc-social), .uai-subgroup-page:has(#uai-sg-email:checked) .uai-itemcard:not(.uai-sgc-email), .uai-subgroup-page:has(#uai-sg-ads:checked) .uai-itemcard:not(.uai-sgc-ads), .uai-subgroup-page:has(#uai-sg-ui:checked) .uai-itemcard:not(.uai-sgc-ui), .uai-subgroup-page:has(#uai-sg-tools:checked) .uai-itemcard:not(.uai-sgc-tools), .uai-subgroup-page:has(#uai-sg-decks:checked) .uai-itemcard:not(.uai-sgc-decks), .uai-subgroup-page:has(#uai-sg-images:checked) .uai-itemcard:not(.uai-sgc-images), .uai-subgroup-page:has(#uai-sg-video:checked) .uai-itemcard:not(.uai-sgc-video), .uai-subgroup-page:has(#uai-sg-audio:checked) .uai-itemcard:not(.uai-sgc-audio), .uai-subgroup-page:has(#uai-sg-prospecting:checked) .uai-itemcard:not(.uai-sgc-prospecting), .uai-subgroup-page:has(#uai-sg-crm:checked) .uai-itemcard:not(.uai-sgc-crm), .uai-subgroup-page:has(#uai-sg-outreach:checked) .uai-itemcard:not(.uai-sgc-outreach), .uai-subgroup-page:has(#uai-sg-quality:checked) .uai-itemcard:not(.uai-sgc-quality), .uai-subgroup-page:has(#uai-sg-workflows:checked) .uai-itemcard:not(.uai-sgc-workflows), .uai-subgroup-page:has(#uai-sg-context:checked) .uai-itemcard:not(.uai-sgc-context), .uai-subgroup-page:has(#uai-sg-platforms:checked) .uai-itemcard:not(.uai-sgc-platforms), .uai-subgroup-page:has(#uai-sg-cloud:checked) .uai-itemcard:not(.uai-sgc-cloud), .uai-subgroup-page:has(#uai-sg-ops:checked) .uai-itemcard:not(.uai-sgc-ops), .uai-subgroup-page:has(#uai-sg-observability:checked) .uai-itemcard:not(.uai-sgc-observability), .uai-subgroup-page:has(#uai-sg-docs:checked) .uai-itemcard:not(.uai-sgc-docs), .uai-subgroup-page:has(#uai-sg-projects:checked) .uai-itemcard:not(.uai-sgc-projects), .uai-subgroup-page:has(#uai-sg-calendars:checked) .uai-itemcard:not(.uai-sgc-calendars), .uai-subgroup-page:has(#uai-sg-databases:checked) .uai-itemcard:not(.uai-sgc-databases), .uai-subgroup-page:has(#uai-sg-analytics:checked) .uai-itemcard:not(.uai-sgc-analytics), .uai-subgroup-page:has(#uai-sg-warehouses:checked) .uai-itemcard:not(.uai-sgc-warehouses), .uai-subgroup-page:has(#uai-sg-search:checked) .uai-itemcard:not(.uai-sgc-search), .uai-subgroup-page:has(#uai-sg-crawl:checked) .uai-itemcard:not(.uai-sgc-crawl), .uai-subgroup-page:has(#uai-sg-research:checked) .uai-itemcard:not(.uai-sgc-research), .uai-subgroup-page:has(#uai-sg-orchestration:checked) .uai-itemcard:not(.uai-sgc-orchestration), .uai-subgroup-page:has(#uai-sg-browser:checked) .uai-itemcard:not(.uai-sgc-browser), .uai-subgroup-page:has(#uai-sg-computer:checked) .uai-itemcard:not(.uai-sgc-computer), .uai-subgroup-page:has(#uai-sg-chat:checked) .uai-itemcard:not(.uai-sgc-chat), .uai-subgroup-page:has(#uai-sg-meetings:checked) .uai-itemcard:not(.uai-sgc-meetings), .uai-subgroup-page:has(#uai-sg-customer:checked) .uai-itemcard:not(.uai-sgc-customer), .uai-subgroup-page:has(#uai-sg-config:checked) .uai-itemcard:not(.uai-sgc-config), .uai-subgroup-page:has(#uai-sg-skills:checked) .uai-itemcard:not(.uai-sgc-skills), .uai-subgroup-page:has(#uai-sg-behavior:checked) .uai-itemcard:not(.uai-sgc-behavior), .uai-subgroup-page:has(#uai-sg-memory:checked) .uai-itemcard:not(.uai-sgc-memory) { display: none; } .uai-subgroup-page:not(:has(#uai-sg-all:checked)) .uai-overview-table tbody tr { visibility: visible !important; } .uai-subgroup-page:not(:has(#uai-sg-all:checked)) .uai-overview-more { display: none !important; } .uai-subgroup-chips { margin: 0.35rem 0 1.25rem; } /* All-plugins directory treatments. */ .uai-extension-cell-copy .uai-cat-tag { display: block; margin-top: 2px; color: #71717a; font-size: 0.78rem; line-height: 1rem; } html.dark .uai-extension-cell-copy .uai-cat-tag { color: #a1a1aa; } .uai-extension-cell-copy .uai-cell-bf { display: block; margin-top: 2px; color: #52525b; font-size: 0.8rem; line-height: 1.05rem; } html.dark .uai-extension-cell-copy .uai-cell-bf { color: #a1a1aa; } a.uai-badge { border-bottom-width: 0 !important; text-decoration-line: none !important; } a.uai-badge:hover { filter: brightness(0.96); } .uai-overview-table--stretch { width: max-content !important; max-width: none !important; } .uai-overview-table--stretch [data-table-wrapper="true"] { contain: none !important; } .prose .uai-overview-table--stretch table { width: max-content !important; min-width: 0 !important; } @media (max-width: 1200px) { .uai-overview-table--stretch { width: auto !important; } .uai-overview-table--stretch [data-table-wrapper="true"] { contain: inline-size !important; } .prose .uai-overview-table--stretch table { min-width: 100% !important; } } .uai-badge--rose { background: #fff1f2; color: #be123c; } html.dark .uai-badge--rose { background: rgb(244 63 94 / 0.1); color: #fb7185; } .uai-badge--indigo { background: #eef2ff; color: #4338ca; } html.dark .uai-badge--indigo { background: rgb(99 102 241 / 0.1); color: #818cf8; } .uai-badge--cyan { background: #ecfeff; color: #0e7490; } html.dark .uai-badge--cyan { background: rgb(6 182 212 / 0.1); color: #22d3ee; } .uai-badge--fuchsia { background: #fdf4ff; color: #a21caf; } html.dark .uai-badge--fuchsia { background: rgb(217 70 239 / 0.1); color: #e879f9; } .uai-badge--teal { background: #f0fdfa; color: #0f766e; } html.dark .uai-badge--teal { background: rgb(20 184 166 / 0.1); color: #2dd4bf; } .uai-badge--orange { background: #fff7ed; color: #c2410c; } html.dark .uai-badge--orange { background: rgb(249 115 22 / 0.1); color: #fb923c; } .uai-badge--lime { background: #f7fee7; color: #4d7c0f; } html.dark .uai-badge--lime { background: rgb(132 204 22 / 0.1); color: #a3e635; } .uai-badge--blue { background: #eff6ff; color: #1d4ed8; } html.dark .uai-badge--blue { background: rgb(59 130 246 / 0.1); color: #60a5fa; } .uai-badge--pink { background: #fdf2f8; color: #be185d; } html.dark .uai-badge--pink { background: rgb(236 72 153 / 0.1); color: #f472b6; } .uai-badge--slate { background: #f8fafc; color: #475569; } html.dark .uai-badge--slate { background: rgb(148 163 184 / 0.1); color: #94a3b8; } /* ===== END PLUGIN DIRECTORY AND CATEGORY PAGES ======================== */ /* Markdown-authored card body content. MDX renders markdown paragraphs inside JSX wrappers as bare spans (landmine #2); style them as summaries. A lone bold line acts as a non-heading section label. */ .prose .uai-itemcard-section > span { display: block; margin: 0; color: #3f3f46; font-size: 1rem; line-height: 1.75rem; } html.dark .prose .uai-itemcard-section > span { color: #d4d4d8; } .prose .uai-itemcard-section > span + span { margin-top: 0.5rem; } .prose .uai-itemcard-section > span > strong:only-child { display: block; margin: 0 0 0.25rem; color: #09090b; font-size: 0.9375rem; font-weight: 600; line-height: 1.375rem; letter-spacing: -0.025em; } /* The label's own 4px bottom margin is the entire label-to-text gap; the paragraph-spacing rule must not add on top of it. */ .prose .uai-itemcard-section > span:has(> strong:only-child) + span { margin-top: 0; } /* Install buttons draw the arrow in CSS when no child is present - converted and unconverted markup coexist without double arrows. Uses the exact FontAwesome asset Mintlify's resolves to (same CDN file the site already loads on every page), so the glyph is pixel-identical to the component version. */ .uai-itemcard-install:not(:has(svg))::after { content: ""; display: inline-block; width: 10px; height: 10px; background-color: #71717a; -webkit-mask: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/arrow-up-right.svg") no-repeat center / contain; mask: url("https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0/regular/arrow-up-right.svg") no-repeat center / contain; } html.dark .prose .uai-itemcard-section > span > strong:only-child { color: #fafafa; } /* ==== Use-case article template (extracted from sales POC, 2026-07-29) ==== */ .uai-ucflow-stage { display: flex; align-items: center; justify-content: center; gap: 0; padding: 2.25rem 2.5rem; margin: 1.25rem 0 1rem; overflow: hidden; border: 1px solid rgb(235 235 238); border-radius: 1rem; background: radial-gradient(rgb(228 228 231) 1px, transparent 1px); background-size: 22px 22px; } html.dark .uai-ucflow-stage { border-color: rgb(255 255 255 / 0.1); background: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1px); background-size: 22px 22px; } .uai-ucflow-link { flex: 0 1 3.25rem; width: 3.25rem; min-width: 1.25rem; height: 1px; margin: 0 0.375rem; border-top: 2px dotted rgb(190 190 198); } html.dark .uai-ucflow-link { border-top-color: rgb(255 255 255 / 0.22); } .uai-ucflow-trigger { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5625rem; padding: 0.625rem 0.875rem; border: 1px solid rgb(228 228 231); border-radius: 0.75rem; background: #ffffff; } html.dark .uai-ucflow-trigger, html.dark .uai-ucflow-agent, html.dark .uai-ucflow-output { border-color: rgb(255 255 255 / 0.12); background: rgb(30 30 33); } .uai-ucflow-trigger-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.875rem; height: 1.875rem; border-radius: 9999px; background: rgb(244 244 245); } html.dark .uai-ucflow-trigger-icon { background: rgb(255 255 255 / 0.1); } .uai-ucflow-trigger-icon img { display: block; width: 1.125rem; height: 1.125rem; margin: 0 !important; border-radius: 0.25rem; } .uai-ucflow-trigger-title { display: block; color: rgb(24 24 27); font-size: 0.8125rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } html.dark .uai-ucflow-trigger-title, html.dark .uai-ucflow-agent-name, html.dark .uai-ucflow-output-title { color: rgb(235 235 238); } .uai-ucflow-trigger-subtitle { display: block; color: rgb(113 113 122); font-size: 0.6875rem; line-height: 1.3; } html.dark .uai-ucflow-trigger-subtitle, html.dark .uai-ucflow-agent-task { color: rgb(161 161 170); } .uai-ucflow-agent { flex: 0 0 auto; min-width: 13rem; padding: 0.75rem 0.875rem; border: 1px solid rgb(228 228 231); border-radius: 0.875rem; background: #ffffff; } .uai-ucflow-agent-header { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.5rem; } .uai-ucflow-agent-logos { display: flex; flex: 0 0 auto; } .uai-ucflow-agent-logos img { display: block; width: 1.75rem; height: 1.75rem; margin: 0 !important; border: 2px solid #ffffff; border-radius: 9999px; background: #ffffff; } .uai-ucflow-agent-logos img + img { margin-left: -0.5rem !important; } html.dark .uai-ucflow-agent-logos img { border-color: rgb(30 30 33); background: rgb(244 244 245); } .uai-ucflow-agent-name { color: rgb(24 24 27); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; } .uai-ucflow-agent-status { width: 0.4375rem; height: 0.4375rem; margin-left: auto; border-radius: 9999px; background: rgb(34 197 94); } .uai-ucflow-agent-task { display: block; max-width: 12rem; margin: 0; color: rgb(82 82 91); font-size: 0.75rem; line-height: 1.5; } .uai-ucflow-outputs { display: flex; flex: 0 0 auto; flex-direction: column; gap: 0.5rem; } .uai-ucflow-output { min-width: 12rem; padding: 0.5625rem 0.6875rem; border: 1px solid rgb(228 228 231); border-radius: 0.625rem; background: #ffffff; } .uai-ucflow-output-title { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.375rem; color: rgb(24 24 27); font-size: 0.75rem; font-weight: 600; } .uai-ucflow-output-title > span { display: inline-flex; margin-left: auto; } .uai-ucflow-output-title img { display: block; width: 0.9375rem; height: 0.9375rem; margin: 0 !important; border-radius: 0.1875rem; } .uai-ucflow-line { display: block; height: 0.25rem; margin: 0.3125rem 0; border-radius: 9999px; background: rgb(228 228 231); } html.dark .uai-ucflow-line { background: rgb(255 255 255 / 0.14); } .uai-ucflow-line-90 { width: 90%; } .uai-ucflow-line-70 { width: 70%; } .uai-ucflow-line-50 { width: 50%; } .uai-ucflow-task { display: flex; align-items: center; gap: 0.375rem; } .uai-ucflow-task::before { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border: 1.5px solid rgb(190 190 198); border-radius: 0.1875rem; } html.dark .uai-ucflow-task::before { border-color: rgb(255 255 255 / 0.3); } .uai-ucflow-task .uai-ucflow-line { flex: 1 1 auto; margin: 0; } @media (max-width: 900px) { .uai-ucflow-stage { flex-direction: column; gap: 0.5rem; padding: 1.75rem 1.25rem; } .uai-ucflow-link { flex: 0 0 auto; width: 2rem; min-width: 2rem; margin: 0.5rem 0; transform: rotate(90deg); } } .uai-itemcard-body .uai-ucflow-stage { margin: 0.375rem 0 0.25rem; } .uai-itemcard-details label > span:first-child { display: inline-flex; align-items: center; } .uai-itemcard-head--noicon { grid-template-columns: minmax(0, 1fr) auto; } .uai-connect-list { display: flex; flex-direction: column; margin-top: 0.25rem; } .uai-connect-row--pill { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid #f4f4f5; } .uai-connect-row--pill:first-of-type { border-top: 0; } html.dark .uai-connect-row--pill { border-top-color: rgb(255 255 255 / 0.06); } .uai-connect-row--pill .uai-connect-line { margin: 0; } @media (max-width: 640px) { .uai-connect-row--pill { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.625rem 0; } } .uai-connect-pill { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; padding: 0.3125rem 0.8125rem 0.3125rem 0.5rem; border: 1px solid #e4e4e7; border-radius: 9999px; background: #ffffff; font-size: 0.8125rem; font-weight: 600; color: #18181b; white-space: nowrap; } html.dark .uai-connect-pill { border-color: rgb(255 255 255 / 0.12); background: rgb(255 255 255 / 0.04); color: #f4f4f5; } .prose .uai-connect-pill img { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; object-fit: contain; margin: 0; } .uai-connect-pill img + img { margin-left: -0.375rem; } .uai-connect-foot { margin: 0.625rem 0 0; font-size: 0.75rem; line-height: 1.5; color: #a1a1aa; } html.dark .uai-connect-foot { color: #71717a; } .uai-figure { border: 1px solid rgb(235 235 238); border-radius: 1rem; overflow: hidden; margin: 0.875rem 0 0.25rem; } html.dark .uai-figure { border-color: rgb(255 255 255 / 0.1); } .uai-figure .uai-ucflow-stage { border: 0; border-radius: 0; margin: 0; } .uai-figure-caption { margin: 0; padding: 0.5rem 1rem; border-top: 1px solid rgb(235 235 238); background: #fafafa; font-size: 0.75rem; line-height: 1.5; color: #71717a; text-align: center; } html.dark .uai-figure-caption { border-top-color: rgb(255 255 255 / 0.08); background: rgb(255 255 255 / 0.03); color: #a1a1aa; } .uai-stepflat .uai-itemcard-details-body { background: #fafafa; border-radius: 0.625rem; padding: 0.875rem 1.125rem 1rem; margin: 0.125rem 0 0.875rem; } html.dark .uai-stepflat .uai-itemcard-details-body { background: rgb(255 255 255 / 0.03); } .uai-steplabel { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #a1a1aa; margin-right: 0.625rem; } .uai-figure--light .uai-ucflow-stage { background: #ffffff radial-gradient(rgb(240 240 242) 1px, transparent 1px); background-size: 22px 22px; } .prose .uai-itemcard--v6 .uai-itemcard-section > h3 { margin: 0 0 0.375rem !important; font-size: 1rem; line-height: 1.5rem; } .uai-itemcard--v6 .uai-itemcard-section { margin-top: 1.5rem; } .uai-itemcard--v6 .uai-itemcard-section:first-child { margin-top: 0.25rem; } .uai-itemcard--v6 .uai-itemcard-summary { font-size: 0.9375rem; line-height: 1.6; } .uai-itemcard--v6 .uai-figure { margin: 1rem 0 0; } .uai-itemcard--v6 .uai-figure .uai-ucflow-stage { padding: 1.375rem 2.5rem; } .uai-itemcard--v6 .uai-itemcard-details-group { margin-top: 0.375rem; } .uai-itemcard--v6 .uai-itemcard-details-body > p:not([class]) { font-size: 0.9375rem; line-height: 1.6; } .uai-itemcard--v6 .uai-itemcard-details-body ul:not(.uai-checklist) li { font-size: 0.9375rem; } .prose .uai-itemcard--v6 .uai-setuphead-row > h3 { margin: 0 !important; font-size: 1rem; line-height: 1.5rem; color: #09090b; } html.dark .prose .uai-itemcard--v6 .uai-setuphead-row > h3 { color: #fafafa; } .uai-connect-fill .uai-connect-pill { justify-self: stretch; } .uai-connect-rw { margin: 0.1875rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: #71717a; } html.dark .uai-connect-rw { color: #a1a1aa; } .uai-connect-rw:first-child { margin-top: 0; } .uai-connect-rw > span:first-child { display: inline-block; min-width: 3.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #a1a1aa; } .uai-connect-foot + .uai-connect-foot { margin-top: 0.375rem; } .prose .uai-connect-pill--stack img { position: relative; width: 1.375rem; height: 1.375rem; padding: 1.5px; box-sizing: border-box; border-radius: 9999px; background: #ffffff; box-shadow: 0 0 0 2px #ffffff; object-fit: contain; } .prose .uai-connect-pill--stack img + img { margin-left: -0.5rem; } .uai-connect-pill--stack img:nth-of-type(1) { z-index: 3; } .uai-connect-pill--stack img:nth-of-type(2) { z-index: 2; } .uai-connect-pill--stack img:nth-of-type(3) { z-index: 1; } html.dark .prose .uai-connect-pill--stack img { background: #26262a; box-shadow: 0 0 0 2px #26262a; } .uai-connect-list--tight .uai-connect-row--pill { grid-template-columns: 10.5rem minmax(0, 1fr); } @media (max-width: 640px) { .uai-connect-list--tight .uai-connect-row--pill { grid-template-columns: 1fr; } } .uai-connect-pill--stack { gap: 0; } .prose .uai-connect-pill--stack img:last-of-type { margin-right: 0.5625rem; } .uai-connect-fill .uai-connect-pill { justify-self: start; } .uai-tblpills { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; } .uai-connect-pill--sm { padding: 0.125rem 0.5625rem 0.125rem 0.3125rem; font-size: 0.75rem; } .prose .uai-connect-pill--sm img { width: 1rem; height: 1rem; padding: 1px; box-shadow: 0 0 0 1.5px #fff; } .prose .uai-connect-pill--sm img + img { margin-left: -0.375rem; } .prose .uai-connect-pill--sm img:last-of-type { margin-right: 0.4375rem; } html.dark .prose .uai-connect-pill--sm img { box-shadow: 0 0 0 1.5px #26262a; } .prose .uai-overview-table tbody td .uai-connect-pill--sm img { margin: 0 !important; } .prose .uai-overview-table tbody td .uai-connect-pill--sm img + img { margin: 0 0 0 -0.375rem !important; } .prose .uai-overview-table tbody td .uai-connect-pill--sm img:last-of-type { margin-right: 0.4375rem !important; } .prose .uai-connect-pill--stack img + img { margin-left: -0.375rem; } .prose .uai-connect-pill--sm img + img { margin-left: -0.25rem; } .prose .uai-overview-table tbody td .uai-connect-pill--sm img + img { margin: 0 0 0 -0.25rem !important; } .prose .uai-overview-table tbody td { vertical-align: middle; } .uai-connect-pill--plain { font-weight: 400; color: #3f3f46; } html.dark .uai-connect-pill--plain { color: #d4d4d8; } .uai-connect-col .uai-connect-pill { margin-bottom: 0.375rem; } .uai-connect-col .uai-connect-rw { margin: 0 0 0.75rem; } .uai-connect-col .uai-connect-rw:last-child { margin-bottom: 0; } .uai-connect-pill--solid { background: #18181b; border-color: #18181b; color: #ffffff; } html.dark .uai-connect-pill--solid { background: #f4f4f5; border-color: #f4f4f5; color: #18181b; } .prose .uai-connect-pill--solid img { background: #18181b; box-shadow: 0 0 0 2px #18181b; } html.dark .prose .uai-connect-pill--solid img { background: #f4f4f5; box-shadow: 0 0 0 2px #f4f4f5; } .uai-connect-pill-req { font-weight: 600; color: #18181b; } .uai-connect-pill-req::before { content: "· "; font-weight: 400; color: #a1a1aa; margin: 0 0.25rem; } html.dark .uai-connect-pill-req { color: #f4f4f5; } .uai-connect-list--nolines .uai-connect-row--pill { border-top: 0; padding: 0.4375rem 0; } .uai-connect-list--nolines .uai-connect-group { margin-top: 1rem; } .uai-connect-list--nolines .uai-connect-group:first-child { margin-top: 0.25rem; } .uai-subh { margin: 1rem 0 0.25rem; font-size: 0.875rem; font-weight: 600; color: #18181b; } .uai-subh:first-child { margin-top: 0; } html.dark .uai-subh { color: #f4f4f5; } .uai-pair { margin: 0.75rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: #71717a; } html.dark .uai-pair { color: #a1a1aa; } .uai-pair-out { margin: 0.625rem 0 0.25rem; font-size: 0.8125rem; line-height: 1.55; color: #71717a; } html.dark .uai-pair-out { color: #a1a1aa; } .uai-connect-list .uai-subh:first-child { margin-top: 0.25rem; } .uai-overview-table tbody a.uai-tbllink { font-weight: 600; color: inherit !important; text-decoration-line: none !important; border-bottom-width: 0 !important; } .prose .uai-overview-table.uai-overview-table--ranked table th:first-child, .prose .uai-overview-table.uai-overview-table--ranked table td:first-child { padding-left: 16px !important; } .prose .uai-overview-table.uai-overview-table--metric-right table th:last-child, .prose .uai-overview-table.uai-overview-table--metric-right table td:last-child { text-align: right; padding-right: 16px !important; } .prose .uai-agentline img { display: inline; width: 1.0625rem; height: 1.0625rem; vertical-align: -0.1875em; margin: 0 0.3125rem 0 0; border-radius: 4px; } .uai-nowrap { white-space: nowrap; } .uai-itemcard-details label > span:first-child:has(.uai-steplabel) { align-items: baseline; } .uai-itemcard-details label .uai-steplabel { position: relative; top: -1px; } /* Wide canvas content shrinks and wraps instead of clipping at the figure edge. */ .uai-ucflow-trigger { flex-shrink: 1; min-width: 0; } .uai-ucflow-trigger > span:last-child { min-width: 0; } .uai-ucflow-agent { flex-shrink: 1; } .uai-ucflow-outputs { flex-shrink: 1; min-width: 0; } .uai-ucflow-output { min-width: 0; width: 12rem; max-width: 100%; } .uai-ucflow-link { flex-shrink: 99; min-width: 1.25rem; } /* Long canvas labels wrap instead of clipping. */ .uai-ucflow-trigger-title { white-space: normal; } .uai-ucflow-output-title { line-height: 1.3; } /* Card section labels: heading semantics for AT without outline/anchor/index registration. */ .prose .uai-itemcard-section > .uai-card-h { display: block; margin: 0 0 0.25rem; color: #09090b; font-size: 0.9375rem; font-weight: 600; line-height: 1.375rem; letter-spacing: -0.025em; } html.dark .prose .uai-itemcard-section > .uai-card-h { color: #fafafa; } .prose .uai-itemcard--v6 .uai-itemcard-section > .uai-card-h { margin: 0 0 0.375rem; font-size: 1rem; line-height: 1.5rem; }