@import "tailwindcss"; /* Hero tagline with typewriter cycling text */ .hero-tagline { margin-bottom: 20px; text-align: center; } /* Logos set inline in a sentence, sized like an emoji rather than a figure. The README uses height="16" align="center", which GitHub honours; Mintlify's prose CSS sizes images by width, so the attributes lose and the logo renders full-width and block-level, breaking the line it sits in. Scaled in em so it tracks the surrounding text. */ .inline-logo { display: inline-block !important; width: auto !important; height: 1.1em !important; margin: 0 0.15em 0 0 !important; vertical-align: -0.2em; border-radius: 2px; } /* Landing-page shields, kept on one centered line under the hero image. As Markdown links they rendered one per line: Mintlify turns a soft newline inside a paragraph into a hard break, so each badge started its own row. */ .badge-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.25rem 0 1.5rem; } .badge-row a { display: inline-flex; line-height: 0; } .badge-row img { height: 20px; width: auto; margin: 0; border-radius: 3px; } .hero-tagline-line { font-size: 2.5rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; } .hero-typed { font-weight: 700; border-right: none; } #hero-top { color: #046e7a; } .hero-typed.hero-cursor { border-right: 3px solid currentColor; padding-right: 2px; } @keyframes hero-blink { 0%, 100% { border-color: currentColor; } 50% { border-color: transparent; } } .hero-typed.hero-cursor.hero-blink { animation: hero-blink 0.7s step-end infinite; } @media (max-width: 768px) { .hero-tagline-line { font-size: 1.75rem; } } /* Sidebar search bar: defined willow border, softer corners, hover. The ⌘K keycap chip itself is styled further down (search bar ⌘K section). */ #search-bar-entry { border-radius: 0.5rem !important; background-color: #ffffff !important; box-shadow: inset 0 0 0 1px #ced9d7 !important; /* willow-300 */ transition: box-shadow 0.15s ease, background-color 0.15s ease; } #search-bar-entry:hover { background-color: #fbfdfd !important; /* willow-50 */ box-shadow: inset 0 0 0 1px #8ebec3 !important; /* primary-light */ } html.dark #search-bar-entry { background-color: var(--background-dark) !important; box-shadow: inset 0 0 0 1px #344649 !important; /* willow-700 */ } html.dark #search-bar-entry:hover { box-shadow: inset 0 0 0 1px #506467 !important; /* willow-600 */ } /* GitHub repo preview cards */ .gh-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #d0d7de; border-radius: 8px; text-decoration: none !important; color: inherit !important; transition: border-color 0.15s, box-shadow 0.15s; margin-bottom: 24px; } .gh-card:hover { border-color: rgb(var(--primary)); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); text-decoration: none !important; } :is(.dark) .gh-card { border-color: #344649; } :is(.dark) .gh-card:hover { border-color: rgb(var(--primary-light)); } .gh-card-icon { flex-shrink: 0; color: #656d76; margin-top: 2px; } :is(.dark) .gh-card-icon { color: #8ebec3; } .gh-card-body { flex: 1; min-width: 0; } .gh-card-name { font-size: 1.1rem; font-weight: 600; color: rgb(var(--primary)); margin-bottom: 4px; } .gh-card-desc { font-size: 0.875rem; color: #656d76; line-height: 1.5; margin-bottom: 10px; } :is(.dark) .gh-card-desc { color: #8ebec3; } .gh-card-meta { display: flex; align-items: center; gap: 16px; font-size: 0.75rem; color: #656d76; } :is(.dark) .gh-card-meta { color: #8ebec3; } .gh-card-meta-item { display: flex; align-items: center; gap: 4px; } .gh-card-lang-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* Override Mintlify's color palette with willow colors */ :root { /* Primary accent - system-green #046e7a */ --primary: 4 110 122; --primary-light: 142 190 195; --primary-dark: 52 70 73; /* Tooltip */ --tooltip-foreground: 255 255 255; --background-dark: 13 17 19; /* Gray scale mapped to willow palette */ --gray-50: 249 252 252; /* willow-50 */ --gray-100: 238 245 244; /* willow-100 */ --gray-200: 222 233 232; /* willow-200 */ --gray-300: 206 217 215; /* willow-300 */ --gray-400: 158 180 178; /* willow-400 */ --gray-500: 118 139 142; /* willow-500 */ --gray-600: 80 100 103; /* willow-600 */ --gray-700: 52 70 73; /* willow-700 */ --gray-800: 29 44 47; /* willow-800 */ --gray-900: 22 36 38; /* willow-900 */ --gray-950: 16 26 27; /* willow-950 */ } #sidebar-title { font-size: 1.125rem !important; } [data-component-part="card-title"] { font-size: 1.125rem !important; } /* override almond background color (light mode only; in dark mode the full-screen backdrop is painted by dark:bg-[#09090B], which this rule must not override) */ html:not(.dark) .bg-gray-950\/\[0\.03\] { background-color: #f1f6f6; /* willow-100 */ } html.dark .bg-\[\#09090B\] { background-color: #01090b; /* willow-950 */ } /* override font weights */ .font-bold { font-weight: 600; /* semibold */ } /* override border rounding */ .rounded-2xl { border-radius: 0.375rem !important; } .rounded-lg { border-radius: 0.25rem !important; } .rounded-xl { border-radius: 0.25rem !important; } .rounded-t-xl { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } .rounded-b-xl { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-l-xl { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .rounded-r-xl { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-t-2xl { border-top-left-radius: 0.375rem !important; border-top-right-radius: 0.375rem !important; } .rounded-b-2xl { border-bottom-left-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; } .rounded-l-2xl { border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; } .rounded-r-2xl { border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; } .rounded-t-lg { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; } .rounded-b-lg { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-l-lg { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } .rounded-r-lg { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } .rounded-search { border-radius: 0.375rem; /* rounded-xl */ } .rounded-xt { border-radius: 0.25rem !important; } /* ── Search bar ⌘K shortcut → key-cap chip ───────────────────────────────── */ /* The ⌘K hint is the lone direct child of the search entry button. Default Mintlify renders it as bare text; render it as a keyboard chip. */ #search-bar-entry > span { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; /* 2px 6px */ border: 1px solid #ced9d7; /* willow-300 */ border-radius: 0.25rem; background-color: #eef5f4; /* willow-100 */ color: #506467; /* willow-600 */ font-size: 0.6875rem; /* 11px */ font-weight: 500; line-height: 1; letter-spacing: 0.02em; } html.dark #search-bar-entry > span { border-color: #344649; /* willow-700 */ background-color: #1d2c2f; /* willow-800 */ color: #9eb4b2; /* willow-400 */ } /* bg-red-100/50 (light mode only; dark uses .bg-red-400/10) */ html:not(.dark) .bg-red-100\/50 { background-color: oklch(0.892 0.058 10.001 / 0.7); } html.dark .bg-red-400\/10 { background-color: oklch(45.5% 0.188 13.697 / 0.7); } html:not(.dark) .bg-gray-50 { background-color: #ebf0f0; /* willow-200/70 */ } html:not(.dark) .bg-gray-200\/50 { background-color: oklch(86.9% 0.014 204 / 0.7); /* willow-300/70 */ } :not(pre) > code { background-color: #e2e9ea; /* willow-200 */ } html.dark :not(pre) > code { background-color: #344649; /* willow-700 */ } .border-gray-950\/10 { border-color: oklch(86.9% 0.014 204 / 0.7); /* willow-300/70 */ } html.dark .dark\:border-white\/10 { border-color: oklch(28% 0.021 211); /* willow-800 */ } /* border-gray-500/5 */ .border-gray-500\/5 { border-color: oklch(86.9% 0.014 204); /* willow-300 */ border-bottom-width: 1px; border-bottom-style: solid; } /* dark:border-gray-300/[0.06] */ html.dark .dark\:border-gray-300\/\[0\.06\] { border-color: oklch(28% 0.021 211); /* willow-800 */ border-bottom-width: 1px; border-bottom-style: solid; } /* border-gray-100 */ .border-gray-100 { border-color: #f1f5f5; /* willow-100 */ border-bottom-width: 1px; border-bottom-style: solid; } /* border-gray-200/70 */ .border-gray-200\/70 { border-color: oklch(86.9% 0.014 204); /* willow-300 */ } .border-gray-200 { border-color: oklch(86.9% 0.014 204); /* willow-300 */ } html:not(.dark) .bg-gray-200\/70 { background-color: oklch(86.9% 0.014 204); /* willow-300 */ } html.dark .dark\:bg-gray-800\/70 { background-color: oklch(28% 0.021 211); /* willow-800 */ } html.dark .dark\:border-gray-800\/70 { border-color: oklch(28% 0.021 211); /* willow-800 */ } /* dark:border-white/[0.07] */ html.dark .dark\:border-white\/\[0\.07\] { border-color: oklch(28% 0.021 211); /* willow-800 */ } /* border-gray-400/20 */ .border-gray-400\/20 { border-color: oklch(86.9% 0.014 204); /* willow-300 */ } /* dark:border-gray-600/30 */ html.dark .dark\:border-gray-600\/30 { border-color: oklch(28% 0.021 211); /* willow-800 */ } /* hover:border-gray-300 */ .hover\:border-gray-300:hover { border-color: oklch(74% 0.022 206); background-color: oklch(98.4% 0.002 199); } /* dark:hover:border-gray-700 */ html.dark .dark\:hover\:border-gray-700:hover { border-color: oklch(48% 0.024 209); background-color: oklch(20% 0.02 212); } /* hover:!border-primary */ .hover\:\!border-primary:hover { background-color: oklch(98.4% 0.002 199); } /* dark:hover:!border-primary-light */ html.dark .dark\:hover\:\!border-primary-light:hover { background-color: oklch(20% 0.02 212); } [class="flex items-center lg:px-12 h-16 min-w-0 mx-4 lg:mx-0"] { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #768b8e; /* willow-500 */ } @media (min-width: 1024px) { [class="flex items-center lg:px-12 h-16 min-w-0 mx-4 lg:mx-0"] { padding-left: 48px; padding-right: 48px; } } html.dark [class="flex items-center lg:px-12 h-16 min-w-0 mx-4 lg:mx-0"] { border-bottom-color: #344649; /* willow-700 */ } /* Code blocks */ .code-block .code-block-background { background-color: #fafbfb !important; } .code-block [style*="--fade-color-light"] { --fade-color-light: #fafbfb !important; } /* Widen the main content area (Mintlify caps it at max-w-(--content-width,36rem)) */ #content-area { max-width: 56rem !important; } .mdx-content { max-width: 56rem !important; } /* Tool catalog: fade-to-reveal on intro page */ .tool-catalog-container { position: relative; max-height: 320px; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .tool-catalog-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--background, #ffffff) 80%); display: flex; align-items: flex-end; justify-content: center; font-size: 0.875rem; font-weight: 500; color: rgb(var(--primary)); cursor: pointer; z-index: 10; padding-bottom: 12px; } .tool-catalog-fade::after { content: "Show all tools"; } :is(.dark) .tool-catalog-fade { background: linear-gradient(to bottom, transparent, var(--background, #101b1b) 80%); } /* Hidden checkbox drives the expand state */ .catalog-toggle-input { display: none; } .catalog-toggle-input:checked + .tool-catalog-container { max-height: none; cursor: default; } .catalog-toggle-input:checked + .tool-catalog-container .tool-catalog-fade { display: none; } /* "Show less" link at bottom when expanded */ .tool-catalog-collapse { display: none; } .catalog-toggle-input:checked + .tool-catalog-container .tool-catalog-collapse { display: flex; justify-content: center; font-size: 0.875rem; font-weight: 500; color: rgb(var(--primary)); cursor: pointer; padding: 12px 0 4px; } .tool-catalog-collapse::after { content: "Show less"; } /* ===== Tool Tab Bar System ===== */ .tab-radio-input { display: none; } .tool-tab-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin-bottom: 0; border-bottom: 1px solid #dfe8e9; padding-bottom: 0; pointer-events: none; } .tool-tab-bar .tool-tab { pointer-events: auto; } :is(.dark) .tool-tab-bar { border-bottom-color: #344649; } /* Tab badge wrapper */ .tool-tab-wrap { display: inline-flex; position: relative; margin-bottom: -1px; } /* Tab badges */ .tool-tab { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 0.8125rem; font-weight: 500; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; text-decoration: none; cursor: pointer; transition: all 0.15s ease; line-height: 1.4; } .tool-tab:hover { text-decoration: none; filter: brightness(0.92); } .tool-tab svg { flex-shrink: 0; } /* Open/close label toggle: by default show open, hide close */ .tool-tab.tab-close { display: none !important; } /* Tab colors (inactive = pill style) */ .tool-tab.badge-github { background: #344649; color: #dfe8e9; } .tool-tab.badge-paper { background: #046e7a; color: #d4eef0; } .tool-tab.badge-cite { background: #795548; color: #efebe9; } .tool-tab.badge-notebook { background: #6c5ce7; color: #fff; } .tool-tab.badge-preprint { background: #e65100; color: #fff; } .tool-tab.badge-proto { background: #7fee64; color: #0b2e14; } .tool-tab.badge-local { background: #475569; color: #e2e8f0; } .tool-tab.badge-source { background: #f0f5f5; color: #344649; border-color: #c0ccce; border-bottom: none; } .tool-tab.badge-hf { background: #FFD21E; color: #1a1a2e; } :is(.dark) .tool-tab.badge-source { background: #1e2e30; color: #8ebec3; border-color: #455c60; } /* Active tab: colored top bar, white/dark bg, connects to panel */ /* Active tab states: keep original color, no border swap */ .tab-radio-input[id^="github-"]:checked ~ .tool-tab-bar .badge-github.tab-open { display: none !important; } .tab-radio-input[id^="github-"]:checked ~ .tool-tab-bar .badge-github.tab-close { display: inline-flex !important; background: #344649; color: #fff; border-color: #344649; border-bottom: 2px solid #344649; font-weight: 600; } .tab-radio-input[id^="paper-"]:checked ~ .tool-tab-bar .badge-paper.tab-open { display: none !important; } .tab-radio-input[id^="paper-"]:checked ~ .tool-tab-bar .badge-paper.tab-close { display: inline-flex !important; background: #046e7a; color: #fff; border-color: #046e7a; border-bottom: 2px solid #046e7a; font-weight: 600; } .tab-radio-input[id^="hf-"]:checked ~ .tool-tab-bar .badge-hf.tab-open { display: none !important; } .tab-radio-input[id^="hf-"]:checked ~ .tool-tab-bar .badge-hf.tab-close { display: inline-flex !important; background: #FFD21E; color: #1a1a2e; border-color: #FFD21E; border-bottom: 2px solid #FFD21E; font-weight: 600; } .tab-radio-input[id^="preprint-"]:checked ~ .tool-tab-bar .badge-preprint.tab-open { display: none !important; } .tab-radio-input[id^="preprint-"]:checked ~ .tool-tab-bar .badge-preprint.tab-close { display: inline-flex !important; background: #e65100; color: #fff; border-color: #e65100; border-bottom: 2px solid #e65100; font-weight: 600; } .tab-radio-input[id^="cite-"]:checked ~ .tool-tab-bar .badge-cite.tab-open { display: none !important; } .tab-radio-input[id^="cite-"]:checked ~ .tool-tab-bar .badge-cite.tab-close { display: inline-flex !important; background: #795548; color: #efebe9; border-color: #795548; border-bottom: 2px solid #795548; font-weight: 600; } .tab-radio-input[id^="source-"]:checked ~ .tool-tab-bar .badge-source.tab-open { display: none !important; } .tab-radio-input[id^="source-"]:checked ~ .tool-tab-bar .badge-source.tab-close { display: inline-flex !important; background: #5d6f75; color: #fff; border-color: #5d6f75; border-bottom: 2px solid #5d6f75; font-weight: 600; } .tab-radio-input[id^="notebook-"]:checked ~ .tool-tab-bar .badge-notebook.tab-open { display: none !important; } .tab-radio-input[id^="notebook-"]:checked ~ .tool-tab-bar .badge-notebook.tab-close { display: inline-flex !important; background: #6c5ce7; color: #fff; border-color: #6c5ce7; border-bottom: 2px solid #6c5ce7; font-weight: 600; } .tab-radio-input[id^="proto-"]:checked ~ .tool-tab-bar .badge-proto.tab-open { display: none !important; } .tab-radio-input[id^="proto-"]:checked ~ .tool-tab-bar .badge-proto.tab-close { display: inline-flex !important; background: #7fee64; color: #0b2e14; border-color: #7fee64; border-bottom: 2px solid #7fee64; font-weight: 600; } .tab-radio-input[id^="proto-"]:checked ~ .tool-tab-bar .badge-local.tab-open { display: none !important; } .tab-radio-input[id^="proto-"]:checked ~ .tool-tab-bar .badge-local.tab-close { display: inline-flex !important; background: #475569; color: #fff; border-color: #475569; border-bottom: 2px solid #475569; font-weight: 600; } /* Panel border colors when active */ .tab-radio-input[id^="github-"]:checked ~ .github-panel { border-color: #344649; } .tab-radio-input[id^="hf-"]:checked ~ .hf-panel { border-color: #FFD21E; } .tab-radio-input[id^="paper-"]:checked ~ .paper-panel { border-color: #046e7a; } .tab-radio-input[id^="preprint-"]:checked ~ .preprint-panel { border-color: #e65100; } .tab-radio-input[id^="cite-"]:checked ~ .cite-panel { border-color: #795548; } .tab-radio-input[id^="source-"]:checked ~ .source-panel { border-color: #5d6f75; } .tab-radio-input[id^="notebook-"]:checked ~ .notebook-panel { border-color: #6c5ce7; } .tab-radio-input[id^="website-"]:checked ~ .website-panel { border-color: #046e7a; } /* Tab panels */ .tab-panel { display: none; border: 1px solid #dfe8e9; border-top: 3px solid #dfe8e9; border-radius: 0 0 8px 8px; overflow: hidden; margin-bottom: 1.25rem; text-decoration: none !important; color: inherit !important; min-height: 241px; pointer-events: none; /* One neutral surface for every tab; the tab's own color lives in its top border and button */ background: #f4f7f7; } .tab-panel .panel-goto-btn { pointer-events: auto; } /* Accent top border per panel type */ .tab-radio-input[id^="github-"]:checked ~ .github-panel { border-top-color: #344649; } .tab-radio-input[id^="hf-"]:checked ~ .hf-panel { border-top-color: #FFD21E; } .tab-radio-input[id^="paper-"]:checked ~ .paper-panel { border-top-color: #046e7a; } .tab-radio-input[id^="preprint-"]:checked ~ .preprint-panel { border-top-color: #e65100; } .tab-radio-input[id^="cite-"]:checked ~ .cite-panel { border-top-color: #795548; } .tab-radio-input[id^="source-"]:checked ~ .source-panel { border-top-color: #5d6f75; } .tab-radio-input[id^="notebook-"]:checked ~ .notebook-panel { border-top-color: #6c5ce7; } .tab-radio-input[id^="website-"]:checked ~ .website-panel { border-top-color: #046e7a; } .tab-radio-input[id^="proto-"]:checked ~ .proto-panel { border-top-color: #7fee64; } :is(.dark) .tab-panel { border-color: #344649; background: #142022; } /* Panel appear animation */ @keyframes panel-appear { 0% { opacity: 0; } 30% { opacity: 0.6; } 100% { opacity: 1; } } /* Show panels via radio :checked */ .tab-radio-input[id^="github-"]:checked ~ .github-panel { display: block; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="hf-"]:checked ~ .hf-panel { display: flex; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="paper-"]:checked ~ .paper-panel { display: flex; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="preprint-"]:checked ~ .preprint-panel { display: flex; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="cite-"]:checked ~ .cite-panel { display: flex; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="source-"]:checked ~ .source-panel { display: block; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="notebook-"]:checked ~ .notebook-panel { display: flex; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="website-"]:checked ~ .website-panel { display: flex; animation: panel-appear 0.3s ease-out; } .tab-radio-input[id^="proto-"]:checked ~ .proto-panel { display: flex; animation: panel-appear 0.3s ease-out; } /* No hover background change on panels */ /* HuggingFace logo in badge */ .tool-tab .hf-logo { display: inline-block !important; vertical-align: middle !important; height: 14px !important; width: 14px !important; margin: 0 !important; padding: 0 !important; } /* Override Mintlify prose img styles inside tab badges */ .tool-tab img { margin: 0 !important; padding: 0 !important; display: inline !important; } /* GitHub panel layout */ .github-panel { align-items: center; padding: 8px; } .tab-radio-input[id^="github-"]:checked ~ .github-panel { display: flex; } .gh-card-wrap, .hf-card-wrap { flex-shrink: 0; pointer-events: auto; } .gh-card-img { max-width: 380px; width: 100%; height: auto; display: block; border-radius: 6px; margin: 0 auto; padding: 0; flex-shrink: 0; pointer-events: none; } /* Card OG images (GitHub/Hugging Face) can be slow; show the Proto default underneath so the slot is filled while they load instead of flashing a broken-image icon. The image paints over it once loaded; on failure cite-copy.js swaps in the card's fallback panel or the Proto default. */ .img-fallback { aspect-ratio: 1200 / 630; height: auto; object-fit: cover; background: url("https://proto-bio.github.io/proto-assets/default/social.png") center / cover no-repeat; } .gh-card-fallback, .hf-card-fallback { display: none; width: 450px; height: 225px; background: #fff; border-radius: 6px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; } :is(.dark) .gh-card-fallback, :is(.dark) .hf-card-fallback { background: #1e2e30; } .gh-fallback-org, .hf-fallback-org { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 700; color: #344649; } :is(.dark) .gh-fallback-org, :is(.dark) .hf-fallback-org { color: #8ebec3; } .gh-fallback-desc { font-size: 0.875rem; color: #5d6f75; max-width: 380px; } .gh-fallback-stats { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; color: #5d6f75; } /* Multi-model HuggingFace panel */ .hf-multi-panel { padding: 16px; pointer-events: auto; } .hf-model-list { display: flex; flex-wrap: wrap; gap: 8px; pointer-events: auto; } .hf-model-card { position: relative; display: flex; align-items: flex-end; width: 220px; height: 120px; border-radius: 8px; overflow: hidden; background: #FFD21E; text-decoration: none !important; transition: transform 0.15s; pointer-events: auto; } .hf-model-card:hover { transform:; text-decoration: none !important; } .hf-model-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; margin: 0 !important; padding: 0 !important; } .hf-model-card-label { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; width: 100%; padding: 8px 12px; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%); color: #fff !important; font-size: 0.8rem; font-weight: 600; } .hf-model-card-label .hf-logo { filter: brightness(10); } /* Hide label by default, show on hover */ .hf-model-card-label { opacity: 0; transition: opacity 0.15s; } .hf-model-card:hover .hf-model-card-label { opacity: 1; } /* HuggingFace panel */ .hf-panel { align-items: center; padding: 8px; } .tab-radio-input[id^="hf-"]:checked ~ .hf-panel { display: flex; } .hf-card-img { width: 450px !important; height: 225px !important; height: auto !important; border-radius: 6px !important; margin: 0 !important; pointer-events: none; padding: 0 !important; object-fit: cover; object-position: top; flex-shrink: 0; } /* Remove stray horizontal rules near panels */ .tab-panel + hr, a.tab-panel + hr { display: none !important; } a.tab-panel { border-bottom: none !important; } a.tab-panel::after { display: none !important; } /* Paper/Preprint panels */ .paper-panel { align-items: center; padding: 8px; } .preprint-panel { align-items: center; padding: 8px; } .paper-info { background: #fff; border-radius: 6px; padding: 14px 24px; flex-shrink: 0; width: 450px; height: 225px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; } :is(.dark) .paper-info { background: #161b22; } .paper-title { font-size: 1rem; font-weight: 700; color: #1a2c2e; line-height: 1.35; margin-bottom: 6px; } :is(.dark) .paper-title { color: #dfe8e9; } .paper-meta { font-size: 0.8125rem; color: #5d6f75; margin-top: 0; line-height: 1.4; } :is(.dark) .paper-meta { color: #8ebec3; } .paper-venue { font-style: italic; margin-top: 8px; padding-top: 6px; border-top: 1px solid #eef2f3; font-size: 0.8125rem; color: #768b8e; } :is(.dark) .paper-venue { border-top-color: #344649; color: #5d6f75; } /* Panel goto label (fills remaining space, centered with a solid accent button) */ .panel-goto-btn { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.875rem; font-weight: 600; white-space: nowrap; flex: 1; } .panel-goto-btn > span { display: inline-flex; align-items: center; gap: 6px; background: var(--goto-bg, #344649); color: #fff; padding: 10px 18px; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.14), 0 4px 12px -4px rgba(0, 0, 0, 0.3); transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s; } .panel-goto-btn:hover > span { background: color-mix(in srgb, var(--goto-bg, #344649) 82%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(0, 0, 0, 0.16), 0 8px 18px -6px rgba(0, 0, 0, 0.36); transform: translateY(-1px); } /* Link buttons get a trailing arrow that nudges on hover; Copy citation is an action, not a link */ .panel-goto-btn:not(.cite-copy-btn) > span::after { content: "\2192"; transition: transform 0.15s; } .panel-goto-btn:not(.cite-copy-btn):hover > span::after { transform: translateX(2px); } /* Side by side, the card gives up width before the action column does, so the button always fits with equal space to the card and to the panel edge (hence no right padding). */ @media (min-width: 769px) { .tab-panel:has(> .panel-goto-btn) { padding-right: 0; } .tab-panel > :not(.panel-goto-btn, .proto-actions) { flex-shrink: 1; min-width: 0; } .gh-card-fallback, .hf-card-fallback, .hf-card-img { max-width: 100%; } .tab-panel > .panel-goto-btn { flex: 1 0 auto; padding: 0 24px; } } /* Each button takes its panel's accent, deepened where needed for white-text contrast */ .panel-goto-btn.gh-goto-btn { --goto-bg: #1f2e31; } .panel-goto-btn.hf-goto-btn { --goto-bg: #2b2b40; } .panel-goto-btn.pub-goto-btn { --goto-bg: #046e7a; } .panel-goto-btn.preprint-goto-btn { --goto-bg: #c2410c; } .panel-goto-btn.source-goto-btn { --goto-bg: #4a5a5f; } .panel-goto-btn.cite-copy-btn { --goto-bg: #6d4c41; } .panel-goto-btn.notebook-goto-btn { --goto-bg: #5b4bd6; } .panel-goto-btn.website-goto-btn { --goto-bg: #046e7a; } .panel-goto-btn.tools-goto-btn { --goto-bg: #046e7a; } .panel-goto-btn img { height: 14px !important; width: 14px !important; margin: 0 !important; } .panel-open-link { display: none; } /* Source panel */ .source-panel { align-items: center; padding: 8px; } .tab-radio-input[id^="source-"]:checked ~ .source-panel { display: flex; } /* The Proto mark, vector, in a light and a dark variant */ .source-avatar { width: auto !important; height: 52px !important; margin: 0 !important; flex-shrink: 0; } .source-path { font-size: 0.9375rem; font-weight: 500; color: #344649; min-width: 0; overflow-wrap: anywhere; } :is(.dark) .source-path { color: #8ebec3; } .source-info { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 6px; flex-shrink: 0; width: 450px; height: 225px; box-sizing: border-box; } :is(.dark) .source-info { background: #161b22; } /* Always-open "Source" tab on the language reference pages. Same look as the tool pages' "Tool Source" tab, but shown without a radio toggle: Source is the only tab, so it is rendered already open (its pill carries the active #5d6f75 styling and the panel is forced visible). */ .entity-source-tab { background: #5d6f75; color: #fff; border-color: #5d6f75; border-bottom: 2px solid #5d6f75; font-weight: 600; cursor: default; } .entity-source-tab:hover { filter: none; } .source-panel.entity-source-panel { display: flex; pointer-events: auto; border-color: #5d6f75; border-top-color: #5d6f75; } /* ── Tools Used tab + grid (language reference pages) ────────────────────── */ .tool-tab.badge-tools { background: #046e7a; color: #d4eef0; } .tab-radio-input[id^="tools-"]:checked ~ .tool-tab-bar .badge-tools.tab-open { display: none !important; } .tab-radio-input[id^="tools-"]:checked ~ .tool-tab-bar .badge-tools.tab-close { display: inline-flex !important; background: #046e7a; color: #fff; border-color: #046e7a; border-bottom: 2px solid #046e7a; font-weight: 600; } .tab-radio-input[id^="tools-"]:checked ~ .tools-panel { display: block; border-top-color: #046e7a; animation: panel-appear 0.3s ease-out; } .tools-panel { pointer-events: auto; } .tools-used-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 16px; width: 100%; } .tools-used-tile { display: flex; align-items: center; justify-content: center; aspect-ratio: 1200 / 630; border-radius: 8px; overflow: hidden; border: 1px solid #dfe8e9; background: #f1f6f6; pointer-events: auto; text-decoration: none !important; transition: transform 0.15s, box-shadow 0.15s; } .tools-used-tile:hover { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); text-decoration: none !important; } :is(.dark) .tools-used-tile { background: #1d2c2f; border-color: #344649; } .tools-used-tile { position: relative; } .tools-used-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Collapsed category tile: a 2x2 collage of its tools' carousel cards. */ .tools-used-cat-collage { background: #046e7a; } .tools-cat-cell-blank { background: #cdd9da; } :is(.dark) .tools-cat-cell-blank { background: #243033; } /* Single tool/category: a card + "Go to ..." button, the box hugging the card's exact height (no min-height floor or padding inflating it). */ .tab-radio-input[id^="tools-"]:checked ~ .tools-panel.tools-panel-single { display: flex; } .tools-panel.tools-panel-single { align-items: stretch; padding: 0; min-height: 0; text-decoration: none !important; } .tools-single-card { width: 450px; max-width: 100%; overflow: hidden; flex-shrink: 0; background: #f1f6f6; font-size: 0; } .tools-single-card img { width: 100%; height: auto; display: block; } .tools-single-card.tools-single-collage { position: relative; aspect-ratio: 1200 / 630; background: #046e7a; } /* Website panel */ .website-panel { align-items: center; padding: 8px; } .website-info { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 6px; flex-shrink: 0; width: 450px; height: 225px; box-sizing: border-box; } :is(.dark) .website-info { background: #161b22; } .website-favicon { border-radius: 4px; flex-shrink: 0; } /* Website card with a captured screenshot (.github/scripts/site_previews.py): the page fills the card from its top edge, with the domain chip floating at the bottom */ /* The whole card follows the panel's link, not just the button */ .website-info { pointer-events: auto; cursor: pointer; } .website-info.website-preview { position: relative; padding: 0 0 16px; overflow: hidden; justify-content: flex-end; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); } .website-preview-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; object-fit: cover; object-position: top; } .website-preview .website-url { position: relative; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); backdrop-filter: blur(6px); } :is(.dark) .website-preview .website-url { background: rgba(18, 48, 47, 0.94); } /* The site's domain in a chip, styled like the citation chips */ .website-url { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow-wrap: anywhere; font-size: 0.9375rem; font-weight: 500; color: #035560; background: #e6f3f4; border: 1px solid #c9e3e6; border-radius: 999px; padding: 8px 18px; } .website-url svg { flex-shrink: 0; width: 16px; height: 16px; color: #046e7a; } :is(.dark) .website-url { color: #b6dde1; background: #12302f; border-color: #1f4a4d; } :is(.dark) .website-url svg { color: #8ebec3; } .website-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; } .website-card { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fff; border: 1px solid #dfe8e9; border-radius: 6px; text-decoration: none !important; color: #344649 !important; font-size: 0.8125rem; font-weight: 500; pointer-events: auto; } .website-card:hover { background: #f0f7f8; } :is(.dark) .website-card { background: #161b22; border-color: #344649; color: #8ebec3 !important; } :is(.dark) .website-card:hover { background: #1a2e31; } .website-card-label { white-space: nowrap; } /* Cite panel */ .cite-panel { padding: 8px; } /* Cite card: one chip per BibTeX entry. The full BibTeX sits in the hidden .cite-code-wrap, which is what "Copy citation" copies. */ .cite-card { width: 450px; height: 225px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: #fff; border-radius: 6px; } :is(.dark) .cite-card { background: #161b22; } .cite-entry { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem; color: #4e342e; background: #efebe9; border: 1px solid #e0d6d2; border-radius: 999px; padding: 6px 14px; } .cite-entry-type, .cite-entry-more { color: #8d6e63; } .cite-entry-type { margin-right: 8px; } :is(.dark) .cite-entry { color: #d7ccc8; background: #2c1e1a; border-color: #4e342e; } :is(.dark) .cite-entry-type, :is(.dark) .cite-entry-more { color: #a1887f; } .cite-code-wrap { display: none; } /* Install snippet on the two introduction pages: a single copyable command sitting directly under the repository preview. It shrinks to the width of the command and centres, rather than filling the column the way body code blocks do, and takes the flatter surface a README carries on GitHub. Shiki is already on github-light-default, so the token colours match without further work. */ .install-snippet { display: flex; justify-content: center; margin: 0 0 1.75rem; } .install-snippet > * { width: max-content; max-width: 100%; border: 1px solid #d1d9e0; border-radius: 6px; overflow: hidden; } /* Mintlify sizes the code surface with w-0 + min-w-full, which measures against the container and so collapses to nothing the moment the wrapper stops being full width. Let the command's own width set the box instead. */ .install-snippet .code-block-background { width: max-content !important; min-width: 0 !important; max-width: none !important; } .install-snippet .code-block, .install-snippet .code-block-background, .install-snippet .code-block .bg-gray-50 { background: #f6f8fa !important; } :is(.dark) .install-snippet > * { border-color: #3d444d; } :is(.dark) .install-snippet .code-block, :is(.dark) .install-snippet .code-block-background, :is(.dark) .install-snippet .code-block .bg-gray-50 { background: #151b23 !important; } /* Branded account-connection panels on the hosted MCP setup page. */ .mcp-connection-panel { display: flex; align-items: center; gap: 1.25rem; padding: 1.35rem; border: 1px solid #d8e1e6; border-radius: 14px; background: linear-gradient(135deg, #f7fbfb 0%, #ffffff 72%); box-shadow: 0 8px 24px rgba(15, 54, 63, 0.07); } /* Hosted MCP call to action on the MCP landing page. */ /* An agent exchanging messages with Proto over MCP: a bot, the wire, and the Proto mark. The brackets and dots light in sequence out to Proto and back, so it reads as a conversation rather than a one-way call. Eight beats at 12.5% each: < d1 d2 d3 > d3 d2 d1, then round to < again. Running the brackets as the end stops is what keeps d1 from firing twice across the loop seam -- the cycle now turns on a bracket at each end rather than on the outermost dot. One keyframe set per element, because a shared keyframe with staggered delays can only sweep one way; every element except the two turning points needs two peaks. */ .mcp-comm { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 1.75rem); margin: 0.75rem 0 1.75rem; } /* Matched to the Proto mark's height so the two ends sit on one axis. */ .mcp-comm-agent { display: grid; place-items: center; width: 104px; height: 104px; flex: 0 0 auto; border: 1px solid #d8e1e6; border-radius: 22px; background: #ffffff; color: #40545c; } .mcp-comm-agent svg { width: 58px; height: 58px; } .mcp-comm-wire { display: flex; align-items: center; gap: 0.5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; line-height: 1; } .mcp-comm-bracket { color: #046e7a; opacity: 0.28; } .mcp-comm-dot { display: block; width: 9px; height: 9px; border-radius: 999px; background: #046e7a; opacity: 0.2; } .mcp-comm-bracket-l { animation: mcp-comm-lb 2.6s ease-in-out infinite; } .mcp-comm-dot-1 { animation: mcp-comm-d1 2.6s ease-in-out infinite; } .mcp-comm-dot-2 { animation: mcp-comm-d2 2.6s ease-in-out infinite; } .mcp-comm-dot-3 { animation: mcp-comm-d3 2.6s ease-in-out infinite; } .mcp-comm-bracket-r { animation: mcp-comm-rb 2.6s ease-in-out infinite; } @keyframes mcp-comm-lb { 0% { opacity: 1; } 6%, 94% { opacity: 0.28; } 100% { opacity: 1; } } @keyframes mcp-comm-d1 { 0%, 7% { opacity: 0.2; transform: scale(1); } 12.5% { opacity: 1; transform: scale(1.3); } 18%, 82% { opacity: 0.2; transform: scale(1); } 87.5% { opacity: 1; transform: scale(1.3); } 93%, 100% { opacity: 0.2; transform: scale(1); } } @keyframes mcp-comm-d2 { 0%, 19.5% { opacity: 0.2; transform: scale(1); } 25% { opacity: 1; transform: scale(1.3); } 30.5%, 69.5% { opacity: 0.2; transform: scale(1); } 75% { opacity: 1; transform: scale(1.3); } 80.5%, 100% { opacity: 0.2; transform: scale(1); } } @keyframes mcp-comm-d3 { 0%, 32% { opacity: 0.2; transform: scale(1); } 37.5% { opacity: 1; transform: scale(1.3); } 43%, 57% { opacity: 0.2; transform: scale(1); } 62.5% { opacity: 1; transform: scale(1.3); } 68%, 100% { opacity: 0.2; transform: scale(1); } } @keyframes mcp-comm-rb { 0%, 44% { opacity: 0.28; } 50% { opacity: 1; } 56%, 100% { opacity: 0.28; } } .mcp-comm-proto { display: flex; align-items: center; } /* No display here: the light/dark pair is swapped by Tailwind's block/hidden utilities, and a display declaration on this selector outranks them and shows both marks. */ .mcp-comm-proto img { height: 104px; width: auto; margin: 0 !important; } @media (prefers-reduced-motion: reduce) { .mcp-comm-dot, .mcp-comm-bracket { animation: none !important; opacity: 0.55; } } @media (max-width: 640px) { .mcp-comm-agent { width: 72px; height: 72px; border-radius: 16px; } .mcp-comm-agent svg { width: 40px; height: 40px; } .mcp-comm-proto img { height: 72px; } } :is(.dark) .mcp-comm-agent { border-color: #2c4044; background: #17272c; color: #a9c7c3; } :is(.dark) .mcp-comm-bracket { color: #4fc3cd; } :is(.dark) .mcp-comm-dot { background: #4fc3cd; } /* A single primary action: a flat pill, centred, in the spirit of ChatGPT's buttons. No gradient, no shadow, and nothing that moves or resizes on hover -- only the fill changes. text-decoration is forced off in the hover state too, because Mintlify's own link styles re-underline on hover, and the underline was changing the button's height. */ .mcp-setup-cta { display: flex; width: fit-content; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.25rem auto 1.75rem; padding: 0.8rem 1.6rem; border: 1px solid transparent; border-radius: 999px; background: #0d0d0d; color: #ffffff !important; font-size: 0.95rem; font-weight: 500; line-height: 1.25; text-decoration: none !important; transition: background 160ms ease; } .mcp-setup-cta:hover { background: #2f2f2f; text-decoration: none !important; } .mcp-setup-cta-arrow { display: inline-flex; align-items: center; font-size: 1rem; line-height: 1; } .mcp-connection-mark { display: flex; align-items: center; justify-content: center; flex: 0 0 4.75rem; width: 4.75rem; height: 4.75rem; padding: 0.55rem; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(4, 110, 122, 0.12); } .mcp-connection-mark img { max-width: 100%; max-height: 100%; } .mcp-modal-panel .mcp-connection-mark { padding: 0.2rem; } .mcp-modal-panel .mcp-connection-mark img { width: 100%; height: 100%; object-fit: contain; } .mcp-agent-options { position: relative; } .mcp-agent-options-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .mcp-agent-option { min-width: 0; padding: 1.25rem; border: 1px solid; border-radius: 0.8rem; transition: border-color 150ms ease, box-shadow 150ms ease; } .mcp-agent-option h3 { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; } .mcp-official-plugins { border-color: #edc86e; background: linear-gradient(145deg, #fff8df 0%, #fffdf7 72%); box-shadow: 0 8px 22px rgba(162, 112, 0, 0.1); } .mcp-official-plugins h3 { color: #805900; } .mcp-official-plugins:hover { border-color: #d39a18; box-shadow: 0 12px 26px rgba(162, 112, 0, 0.16); } .mcp-plugin-buttons { display: flex; flex-direction: column; gap: 0.75rem; } .mcp-plugin-button { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border: 1px solid #ecd9a4 !important; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgba(128, 89, 0, 0.08), 0 4px 12px rgba(128, 89, 0, 0.06); color: #2f2200 !important; font: inherit; font-size: 0.875rem; font-weight: 650; line-height: 1.2; white-space: nowrap; text-align: left; text-decoration: none !important; cursor: pointer; transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .mcp-plugin-button:hover { transform: translateY(-1px); border-color: #d39a18 !important; box-shadow: 0 2px 4px rgba(128, 89, 0, 0.1), 0 10px 22px rgba(128, 89, 0, 0.12); text-decoration: none !important; } .mcp-plugin-logo { display: grid; flex-shrink: 0; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 9px; background: #fbf5e6; } .mcp-plugin-logo img { width: 1.6rem; height: 1.6rem; margin: 0; } .mcp-plugin-button-soon, .mcp-plugin-button-soon:hover { transform: none; border-style: dashed !important; border-color: #e6cf91 !important; background: transparent; box-shadow: none; color: #8a7a55 !important; cursor: default; } .mcp-plugin-button-soon .mcp-plugin-logo { background: rgba(162, 112, 0, 0.06); } .mcp-url-connection { border-color: #8bbded; background: linear-gradient(145deg, #eaf5ff 0%, #f9fcff 72%); box-shadow: 0 8px 22px rgba(17, 104, 184, 0.1); } .mcp-url-connection h3 { color: #1764ab; } .mcp-url-connection:hover { border-color: #398bd3; box-shadow: 0 12px 26px rgba(17, 104, 184, 0.16); } .mcp-agent-options-or { position: absolute; top: 50%; left: 50%; z-index: 1; display: grid; width: 2.25rem; height: 2.25rem; place-items: center; transform: translate(-50%, -50%); border: 1px solid #d8e1e6; border-radius: 999px; background: #ffffff; color: #61757c; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.07em; } .mcp-connection-copy { min-width: 0; } .mcp-connection-eyebrow { display: block; margin-bottom: 0.25rem; color: #046e7a; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .mcp-connection-copy p { margin: 0 0 0.85rem; color: #40545c; line-height: 1.55; } .mcp-connection-action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 7px; background: #046e7a; color: #ffffff !important; font-size: 0.875rem; font-weight: 650; text-decoration: none !important; transition: background 150ms ease; } .mcp-connection-action:hover { background: #035964; /* Mintlify re-underlines links on hover, which changed the button's height. */ text-decoration: none !important; } .mcp-modal-panel { background: linear-gradient(135deg, #f8f7fc 0%, #ffffff 72%); border-color: #e0dced; } .mcp-modal-panel .mcp-connection-mark { box-shadow: inset 0 0 0 1px rgba(105, 74, 160, 0.14); } .mcp-modal-panel .mcp-connection-eyebrow { color: #694aa0; } .mcp-modal-panel .mcp-connection-action { background: #694aa0; } .mcp-modal-panel .mcp-connection-action:hover { background: #543982; text-decoration: none !important; } :is(.dark) .mcp-connection-panel { border-color: #29424a; background: linear-gradient(135deg, #10282e 0%, #111b20 72%); box-shadow: none; } :is(.dark) .mcp-setup-cta { background: #ffffff; color: #0d0d0d !important; } :is(.dark) .mcp-setup-cta:hover { background: #e3e3e3; text-decoration: none !important; } :is(.dark) .mcp-connection-mark { background: #17272c; box-shadow: inset 0 0 0 1px rgba(136, 211, 218, 0.18); } :is(.dark) .mcp-connection-copy p { color: #bbcad0; } :is(.dark) .mcp-modal-panel { border-color: #40385a; background: linear-gradient(135deg, #211b31 0%, #171923 72%); } :is(.dark) .mcp-agent-options-or { border-color: #31444b; background: #17272c; color: #bbcad0; } :is(.dark) .mcp-official-plugins { border-color: #80621f; background: linear-gradient(145deg, #3b3115 0%, #252116 70%); box-shadow: none; } :is(.dark) .mcp-official-plugins h3 { color: #f0c85c; } :is(.dark) .mcp-plugin-button { border-color: #5e4a1c !important; background: #1d1810; box-shadow: none; color: #f6e4b5 !important; } :is(.dark) .mcp-plugin-button:hover { border-color: #b08a2e !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } :is(.dark) .mcp-plugin-logo { background: #2a2315; } :is(.dark) .mcp-plugin-button-soon, :is(.dark) .mcp-plugin-button-soon:hover { border-color: #5e4a1c !important; background: transparent; box-shadow: none; color: #a8976c !important; } :is(.dark) .mcp-plugin-button-soon .mcp-plugin-logo { background: rgba(240, 200, 92, 0.06); } :is(.dark) .mcp-url-connection { border-color: #356eaa; background: linear-gradient(145deg, #152f49 0%, #17212b 70%); box-shadow: none; } :is(.dark) .mcp-url-connection h3 { color: #83c4ff; } @media (max-width: 480px) { .mcp-connection-panel { align-items: flex-start; flex-direction: column; gap: 1rem; } .mcp-agent-options-or { position: static; margin: -0.35rem auto; transform: none; } .mcp-agent-options-grid { grid-template-columns: 1fr; } } /* Notebook panel */ .notebook-panel { align-items: center; padding: 8px; } .notebook-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #fff; padding: 14px 16px; border-radius: 6px; flex-shrink: 0; width: 450px; height: 225px; box-sizing: border-box; color: #5b4bd6; } :is(.dark) .notebook-info { background: #161b22; color: #a99cf5; } .notebook-icon svg { opacity: 0.6; } .notebook-label { font-size: 1.1rem; font-weight: 600; } /* Run on Modal panel: Proto < ... > Modal on the left, Install MCP and a deep-link button per rendered tool function stacked on the right. */ .proto-panel { align-items: stretch; gap: 8px; padding: 8px; } .proto-info { display: flex; align-items: center; justify-content: center; flex: 0 1 450px; min-width: 0; min-height: 225px; background: #fff; border-radius: 6px; } :is(.dark) .proto-info { background: #0f1719; } /* The MCP page's exchange animation (.mcp-comm) with Modal on the right, scaled to the card's width (cqi) since the card shrinks to make room for the buttons beside it. */ .proto-info { container-type: inline-size; } .proto-modal-comm { gap: clamp(0.35rem, 4cqi, 1.5rem); margin: 0; } .proto-modal-comm .mcp-comm-wire { gap: clamp(0.2rem, 1.6cqi, 0.5rem); font-size: clamp(0.8rem, 5cqi, 1.6rem); } .proto-modal-comm .mcp-comm-dot { width: clamp(5px, 2cqi, 9px); height: clamp(5px, 2cqi, 9px); } /* Inside a shrinkable card, the inherited max-width: 100% collapses the logos to zero width. */ .proto-modal-comm img { max-width: none; width: auto; margin: 0 !important; } .proto-modal-comm .mcp-comm-proto img { height: clamp(24px, 15cqi, 72px); } .proto-modal-comm .mcp-comm-modal img { height: clamp(17px, 10.8cqi, 52px); } .proto-modal-comm .mcp-comm-dot, :is(.dark) .proto-modal-comm .mcp-comm-dot { background: #16a34a; } .proto-modal-comm .mcp-comm-bracket, :is(.dark) .proto-modal-comm .mcp-comm-bracket { color: #16a34a; } /* One pill per hosted function, styled like .panel-goto-btn. Several stack at the width of the longest label, centered in the column with the same side space as the other tabs. */ .proto-actions { flex: 1 0 auto; display: grid; grid-template-columns: max-content; justify-content: center; align-content: center; gap: 10px; padding: 8px 24px; } .proto-action-btn { --goto-bg: #15803d; pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 8px; background: var(--goto-bg); color: #fff !important; font-weight: 600; font-size: 0.875rem; white-space: nowrap; text-decoration: none !important; border: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.14), 0 4px 12px -4px rgba(0, 0, 0, 0.3); transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s; } .proto-action-btn svg { flex-shrink: 0; } /* Install MCP leads every Proto tab, a shade deeper than the per-tool links below it */ .proto-action-mcp { --goto-bg: #0f5e2d; } .proto-action-btn::after { content: "\2192"; margin-left: auto; padding-left: 8px; transition: transform 0.15s; } .proto-action-btn:hover { background: color-mix(in srgb, var(--goto-bg) 82%, #000); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 4px rgba(0, 0, 0, 0.16), 0 8px 18px -6px rgba(0, 0, 0, 0.36); transform: translateY(-1px); } .proto-action-btn:hover::after { transform: translateX(2px); } @media (min-width: 769px) { .tab-panel:has(> .proto-actions) { padding-right: 0; } } /* Run Locally panel: GitHub preview on the left, copyable pip install on the right. */ .tab-radio-input[id^="proto-"]:checked ~ .run-local-panel { border-top-color: #475569; } .run-local-panel { align-items: stretch; gap: 12px; padding: 10px; } .run-local-preview { flex: 0 0 44%; align-self: center; pointer-events: auto; display: block; border-radius: 6px; overflow: hidden; border: 1px solid #dfe8e9; transition: box-shadow 0.15s ease; } .run-local-preview:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); } :is(.dark) .run-local-preview { border-color: #344649; } .run-local-preview img { display: block; width: 100%; height: auto; margin: 0 !important; } .run-local-install { flex: 1; pointer-events: auto; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 12px; min-width: 0; } .run-local-label { font-size: 0.9rem; font-weight: 600; color: #475569; line-height: 1.4; } :is(.dark) .run-local-label { color: #94a3b8; } .run-local-code .code-block { margin: 0 !important; border-radius: 6px !important; } .run-local-code .code-block code { white-space: pre-wrap !important; overflow-wrap: anywhere; } .proto-coming-soon { text-align: center; padding: 24px; } .proto-icon { display: flex; justify-content: center; color: #6c5ce7; margin-bottom: 8px; } .proto-icon svg { width: 32px; height: 32px; } .proto-title { font-size: 1.125rem; font-weight: 700; color: #6c5ce7; margin-bottom: 4px; } .proto-desc { font-size: 0.875rem; color: #5d6f75; } /* Cite copy button */ .cite-copy-btn, .cite-copy-btn span { cursor: pointer; } /* Every panel's inner card: white on the shared neutral, with a hairline so it holds its edge. Placed after the per-card rules so the dark surface wins their equal-specificity tie. */ :is(.gh-card-fallback, .hf-card-fallback, .paper-info, .source-info, .website-info, .cite-card, .notebook-info, .proto-info) { box-shadow: 0 0 0 1px #e1e9ea, 0 1px 2px rgba(16, 27, 27, 0.04); } :is(.dark) :is(.gh-card-fallback, .hf-card-fallback, .paper-info, .source-info, .website-info, .cite-card, .notebook-info, .proto-info) { background: #0c1415; box-shadow: 0 0 0 1px #243033; } /* ── Resource tabs on phones + tablets ────────────────────────────────────── */ /* The tool/component link tabs (GitHub / HuggingFace / Publication / Cite / Source / Proto, etc.) are laid out for desktop: each panel is a horizontal row of a fixed ~450px card plus an action button. Below 768px that overflows the content column and the wrapped badge row reads as clutter. Stack each panel (card over button), cap every inner element to the panel width so the fixed 380px/450px cards stop overflowing, reveal the labels that are hover-only on desktop (touch has no hover), and tighten the badges. Scoped to <=768px so the desktop layout is untouched. */ @media (max-width: 768px) { /* Smaller badges wrap into clean rows instead of ragged ones */ .tool-tab-bar { gap: 3px; } .tool-tab { padding: 5px 10px; font-size: 0.75rem; gap: 4px; } /* Stack each panel: card on top, action button beneath; drop the tall min-height */ .tab-panel { flex-direction: column; align-items: stretch; min-height: 0; } /* Non-destructive overflow guard: nothing inside a panel exceeds its width, which neutralizes the fixed 380px/450px card, info, and image widths */ .tab-panel * { max-width: 100%; } /* Cards and OG images fill the stacked width instead of a fixed side column */ .gh-card-wrap, .hf-card-wrap, .gh-card-img, .hf-card-img, .gh-card-fallback, .hf-card-fallback, .paper-info, .cite-card, .website-info { width: 100% !important; height: auto !important; } /* Its 450px flex-basis is a width on desktop but would become the height once stacked */ .proto-info { flex: none; } /* Action button becomes a full-width pill below the card, not a flex:1 column, with a little breathing room under the image */ .tab-panel .panel-goto-btn { flex: none; width: 100%; margin-top: 10px; } /* Multi-model HuggingFace list: one full-width card per row */ .hf-model-list { flex-direction: column; } .hf-model-card { width: 100%; } /* Hover-only labels are unreachable on touch, so show them */ .hf-model-card-label { opacity: 1; } } /* Function table buttons */ .func-table-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 5px; text-decoration: none !important; white-space: nowrap; pointer-events: auto; transition: filter 0.15s; } .func-table-btn:hover { filter: brightness(0.9); text-decoration: none !important; } /* Dual-row hero carousel for overview page */ .hero-carousel { overflow: hidden; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transition: opacity 0.4s ease; } .hero-carousel.ready { opacity: 1; } .hero-carousel .card-strip { animation: card-strip-scroll var(--strip-duration, 60s) linear infinite; } .hero-carousel .card-strip-reverse { animation: card-strip-scroll-reverse var(--strip-duration, 60s) linear infinite; } @keyframes card-strip-scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .hero-carousel .card-strip:hover, .hero-carousel .card-strip-reverse:hover { animation-play-state: paused; } /* Horizontal scrollable card strip for concept pages */ .card-strip-wrapper { overflow-x: auto; margin: 0 0 24px; cursor: grab; scrollbar-width: none; opacity: 0; transition: opacity 0.4s ease; } .card-strip-wrapper.ready { opacity: 1; } .card-strip-wrapper::-webkit-scrollbar { display: none; } .card-strip-wrapper.is-dragging { cursor: grabbing; scroll-behavior: auto; } .card-strip { display: flex; gap: 10px; width: max-content; animation: card-strip-scroll 30s linear infinite; } .card-strip:hover { animation-play-state: paused; } @keyframes card-strip-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Full-bleed nav-card background art (generated by .github/scripts/card_art.py). */ .card-art { position: absolute; inset: 0; width: 100% !important; height: 100%; max-width: none !important; object-fit: cover; z-index: 0; margin: 0 !important; pointer-events: none; } /* Full-width hero banner at the top of each tool/component page (proto-assets hero image). */ .page-hero-banner { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 1.75rem; } /* Tool pages wrap the banner so the org badge(s) can overlay the top-left corner. */ .page-hero { position: relative; margin-bottom: 1.75rem; } .page-hero .page-hero-banner { margin-bottom: 0; } .page-hero-badges { position: absolute; top: 0.85rem; left: 0.85rem; margin: 0; } .page-hero-badges .tool-org-badge { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .card-strip-item { flex: 0 0 260px; aspect-ratio: 1200 / 630; position: relative; border-radius: 6px; overflow: hidden; text-decoration: none !important; color: inherit !important; border: 1px solid #dfe8e9; transition: transform 0.15s, box-shadow 0.15s; } .card-strip-item:hover { transform: scale(1.03); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12); text-decoration: none !important; } :is(.dark) .card-strip-item { border-color: #344649; } /* Top-right descriptor label (icon + text) overlaid on a social card. The toolkit name is baked into the image bottom-left, so this shows the leftover descriptor (tool category, or a component name with its model prefix stripped). */ .card-strip-label { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 7px 9px; font-size: 0.625rem; font-weight: 600; color: #fff !important; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); display: flex; align-items: flex-start; justify-content: flex-end; text-align: right; gap: 4px; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; } .card-strip-label svg { flex-shrink: 0; width: 11px; height: 11px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.85)); } /* Bright card image -> dark label text (set per-card by the generators). */ .card-strip-label.card-strip-label-dark { color: #1a1a1a !important; text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7); } .card-strip-label.card-strip-label-dark svg { color: #1a1a1a; filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.7)); } .card-strip-item .tool-card-org-row { position: absolute; top: 5px; left: 5px; right: auto; bottom: auto; z-index: 3; flex-direction: column; align-items: flex-start; pointer-events: none; } .card-strip-item .tool-card-org { font-size: 0.5625rem; padding: 1px 5px; } /* Tool catalog image cards */ .tool-catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; align-items: start; } @media (max-width: 640px) { .tool-catalog-grid { grid-template-columns: 1fr; } } .tool-catalog-card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1200 / 630; border-radius: 0.25rem; overflow: hidden; text-decoration: none !important; color: inherit !important; border: 1px solid #dfe8e9; background: #f1f6f6; transition: transform 0.15s, box-shadow 0.15s; } .tool-catalog-card:hover { transform: scale(1.015); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); text-decoration: none !important; } :is(.dark) .tool-catalog-card { background: #1d2c2f; border-color: #344649; } /* Organization badges on tool pages */ .tool-org-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .tool-org-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 0.75rem; font-weight: 500; border-radius: 4px; text-decoration: none !important; color: #fff !important; transition: filter 0.15s; } .tool-org-badge:hover { filter: brightness(0.85); text-decoration: none !important; } .tool-org-badge-light { color: #1d2c2f !important; border: 1px solid #ccc; } .tool-org-badge-logo { width: 16px; height: 16px; border-radius: 3px; display: block; margin: 0 !important; padding: 0 !important; pointer-events: none; } /* Organization labels on catalog cards */ .tool-card-org-row { position: absolute; bottom: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; pointer-events: none; } /* Category + org pages: overlay the org badge(s) in the card's top-left corner, matching the banner overlay on tool pages (the homepage carousel keeps its own bottom-right placement via .card-strip-item above). */ .tool-catalog-card .tool-card-org-row { top: 8px; left: 8px; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; } .tool-card-org { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; font-size: 0.625rem; font-weight: 500; border-radius: 3px; color: #fff; opacity: 0.9; white-space: nowrap; } .tool-card-org-light { color: #1d2c2f; border: 1px solid #ccc; } .tool-card-org-logo { width: 12px; height: 12px; border-radius: 2px; display: block; margin: 0 !important; padding: 0 !important; } /* Some organization marks are fine dark line art on a transparent ground — USC's seal, for one — which disappears against a dark badge and vanishes entirely in dark mode. An opaque tile behind every logo fixes those, and is invisible behind the square avatars that already fill their box, so no existing logo changes. All four surfaces that render an organization logo need it: the badge on a tool page, the label on a catalogue card, the organizations index, and an organization's own page. */ .tool-org-badge-logo, .tool-card-org-logo, .org-index-card-logo, .org-page-logo { background: #fff; } /* The index and page marks are large enough to letterbox rather than crop, so a seal keeps its proportions instead of having its edges cut off. */ .org-index-card-logo, .org-page-logo { object-fit: contain; padding: 2px !important; box-sizing: border-box; } /* Organization index page cards */ .org-index-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid #dfe8e9; border-radius: 0.25rem; text-decoration: none !important; color: inherit !important; transition: transform 0.15s, box-shadow 0.15s; } .org-index-card:hover { transform: scale(1.015); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); text-decoration: none !important; } :is(.dark) .org-index-card { border-color: #344649; } .org-index-card-color { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; } .org-index-card-body { flex: 1; min-width: 0; } .org-index-card-name { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; } .org-index-card-logo { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; flex-shrink: 0; padding: 0 !important; } .org-index-card-count { font-size: 0.8125rem; color: #768b8e; margin-top: 2px; } .org-index-card-desc { font-size: 0.75rem; color: #506467; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } :is(.dark) .org-index-card-count { color: #8ebec3; } :is(.dark) .org-index-card-desc { color: #768b8e; } /* Organization page header */ .org-page-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .org-page-logo { width: 48px; height: 48px; border-radius: 6px; display: block; margin: 0 !important; padding: 0 !important; pointer-events: none; flex-shrink: 0; } .org-page-link { font-size: 0.9rem; color: rgb(var(--primary)) !important; } /* Affiliation / trademark fine print shown on entity pages (tool, constraint, generator) and organization pages. Small, muted fine print. */ .entity-disclaimer { font-size: 0.7rem; line-height: 1.5; color: #6b7280; margin: 0.5rem 0 0.85rem; } :is(.dark) .entity-disclaimer { color: #9aa3af; } /* Hairline divider between the disclaimer and the tool reference tabs. */ .entity-rule { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); margin: 1.1rem 0; } :is(.dark) .entity-rule { border-top-color: rgba(255, 255, 255, 0.08); } /* API model section containers — wraps a Mintlify with a colored left stripe identifying Input / Config / Output. The Source link is floated on top of the accordion header so it stays visible whether open or closed. */ .api-model-section { margin-bottom: 12px; position: relative; } /* Breathing room between the H3 intro paragraph and the first Input/Config/Output dropdown. Only the first .api-model-section in each tool block sits directly after the named anchor, so consecutive sections keep their tighter 12px spacing. */ a[name^="api-"] + .api-model-section { margin-top: 20px; } .api-model-section > details.accordion { border-left-width: 3px !important; } .api-input-section > details.accordion { border-left-color: #4caf50 !important; } .api-config-section > details.accordion { border-left-color: #2196f3 !important; } .api-output-section > details.accordion { border-left-color: #ff9800 !important; } .api-model-section > .api-model-source { position: absolute; top: 10px; right: 14px; z-index: 2; pointer-events: auto; } .api-model-badge { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; color: #fff; } .api-input-badge { background: #4caf50; } .api-config-badge { background: #2196f3; } .api-output-badge { background: #ff9800; } /* Static (non-collapsible) API containers on the language reference pages. Same Input/Config/Output colored-box look as the tool accordions, but the body is always shown -- each constraint/generator/optimizer has a single config (and optional Returns), so there is nothing worth hiding behind a toggle. The colored left border lives on the box itself here (the tool pages put it on the nested

). */ .api-model-static { border: 1px solid #c0ccce; border-left-width: 3px; border-radius: 12px; padding: 16px 18px 4px; margin-bottom: 14px; } :is(.dark) .api-model-static { border-color: #455c60; } .api-input-section.api-model-static { border-left-color: #4caf50; } .api-config-section.api-model-static { border-left-color: #2196f3; } .api-output-section.api-model-static { border-left-color: #ff9800; } /* MCP server tools. One container per tool: a tinted header naming the tool and its category, with the description and parameters inside beneath it. Same rounded box and coloured left stripe as the Input/Config/Output blocks above, but the whole tool lives in it rather than the parameters alone. Categories match the capability cards on the MCP introduction page. */ .mcp-tool { border: 1px solid #c0ccce; border-left-width: 3px; border-radius: 12px; overflow: hidden; margin: 0 0 18px; } :is(.dark) .mcp-tool { border-color: #455c60; } .mcp-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #c0ccce; } :is(.dark) .mcp-tool-head { border-bottom-color: #455c60; } .mcp-tool-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; font-size: 0.9rem; color: #173339; } :is(.dark) .mcp-tool-name { color: #e6f0f1; } /* Source link to the tool's definition in the MCP server, matching the Source buttons on the tool pages' Input/Config/Output blocks. Sits in the header rather than floated, so it never overlaps the tool name. */ .mcp-tool-source { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 10px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; line-height: 1.6; text-decoration: none !important; white-space: nowrap; } /* Body padding-bottom is tight because the last ParamField carries its own margin. */ .mcp-tool-body { padding: 15px 18px 1px; } /* Per category: stripe, header tint, and tag fill. */ .mcp-workspace { border-left-color: #046e7a; } .mcp-workspace .mcp-tool-head { background: #046e7a14; } .mcp-workspace .mcp-tool-tag { background: #046e7a; } .mcp-discover { border-left-color: #4caf50; } .mcp-discover .mcp-tool-head { background: #4caf5014; } .mcp-discover .mcp-tool-tag { background: #4caf50; } .mcp-inspect { border-left-color: #2196f3; } .mcp-inspect .mcp-tool-head { background: #2196f314; } .mcp-inspect .mcp-tool-tag { background: #2196f3; } .mcp-run { border-left-color: #ff9800; } .mcp-run .mcp-tool-head { background: #ff980014; } .mcp-run .mcp-tool-tag { background: #ff9800; } .mcp-deploy { border-left-color: #7c5cbf; } .mcp-deploy .mcp-tool-head { background: #7c5cbf14; } .mcp-deploy .mcp-tool-tag { background: #7c5cbf; } /* Backend picker on the MCP installation page. Mintlify's default tab row is a plain underlined text list, which reads as two headings rather than one control; these are pills in a track, with the selected backend carried in brand teal. Scoped to the wrapper so tabs elsewhere in the docs keep the default treatment. */ .backend-tabs [role="tablist"] { display: inline-flex !important; min-width: 0 !important; gap: 6px !important; padding: 5px; margin-bottom: 12px !important; border-bottom: 0 !important; border-radius: 10px; background: #eef4f4; } /* The panel is boxed so it is obvious which text the tabs swap, the way the tool pages enclose their tab panels. Only the selected panel is in flow; the others carry `hidden`. Padding-bottom is tight because the last paragraph brings its own margin. */ .backend-tabs [role="tabpanel"] { border: 1px solid #dfe8e9; border-top: 3px solid #046e7a; border-radius: 0 0 10px 10px; padding: 16px 18px 2px; margin-bottom: 1.25rem; } :is(.dark) .backend-tabs [role="tabpanel"] { border-color: #455c60; border-top-color: #0d8b98; } :is(.dark) .backend-tabs [role="tablist"] { background: #17282b; } .backend-tabs [data-component-part="tab-button"] { padding: 6px 18px !important; margin-bottom: 0 !important; border: 0 !important; border-radius: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; color: #587c81 !important; transition: background 0.15s ease, color 0.15s ease; } .backend-tabs [data-component-part="tab-button"]:hover { color: #046e7a !important; } .backend-tabs [data-component-part="tab-button"][data-active="true"] { background: #046e7a; color: #fff !important; } :is(.dark) .backend-tabs [data-component-part="tab-button"] { color: #8ebec3 !important; } :is(.dark) .backend-tabs [data-component-part="tab-button"]:hover { color: #b7dade !important; } :is(.dark) .backend-tabs [data-component-part="tab-button"][data-active="true"] { background: #0d8b98; color: #fff !important; } :is(.dark) .mcp-workspace .mcp-tool-head { background: #046e7a2e; } :is(.dark) .mcp-discover .mcp-tool-head { background: #4caf502e; } :is(.dark) .mcp-inspect .mcp-tool-head { background: #2196f32e; } :is(.dark) .mcp-run .mcp-tool-head { background: #ff98002e; } :is(.dark) .mcp-deploy .mcp-tool-head { background: #7c5cbf2e; } .api-model-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .api-model-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; font-size: 0.9rem; color: #344649; } :is(.dark) .api-model-name { color: #8ebec3; } .func-api-btn { background: #046e7a; color: #fff !important; } .func-source-btn { background: #f0f5f5; color: #344649 !important; border: 1px solid #c0ccce; } :is(.dark) .func-source-btn { background: #1e2e30; color: #8ebec3 !important; border-color: #455c60; } /* Hide prev/next footer navigation (sidebar and card grids handle navigation) */ .pagination-prev, .pagination-next { display: none !important; } /* Make sidebar group headers larger and bold */ [data-testid="sidebar"] h2, nav h2, .sidebar-group-heading, aside h2, [class*="group"] > button > span, [class*="group"] > a > span { font-size: 0.9375rem !important; font-weight: 700 !important; } /* ── Link preview popovers ──────────────────────────────────────────────── */ .link-preview-popover { position: absolute; z-index: 9999; display: none; max-width: 360px; border-radius: 10px; border: 1px solid rgb(var(--gray-200)); background: rgb(var(--gray-50)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); overflow: hidden; transition: opacity 0.15s ease; pointer-events: auto; } .dark .link-preview-popover { background: rgb(var(--gray-900)); border-color: rgb(var(--gray-700)); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Wikipedia preview */ .link-preview-wiki { display: flex; gap: 12px; padding: 14px; } .link-preview-thumb { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .link-preview-body { min-width: 0; } .link-preview-title { font-weight: 600; font-size: 0.875rem; line-height: 1.3; color: rgb(var(--gray-900)); margin-bottom: 4px; } .dark .link-preview-title { color: rgb(var(--gray-100)); } .link-preview-extract { font-size: 0.8125rem; line-height: 1.45; color: rgb(var(--gray-600)); margin-bottom: 6px; } .dark .link-preview-extract { color: rgb(var(--gray-400)); } .link-preview-source { font-size: 0.75rem; color: rgb(var(--gray-400)); display: flex; align-items: center; gap: 4px; } .dark .link-preview-source { color: rgb(var(--gray-500)); } /* External link preview: large favicon on top, link underneath */ .link-preview-external { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 18px; min-width: 140px; max-width: 240px; } .link-preview-favicon { width: 64px; height: 64px; border-radius: 10px; flex-shrink: 0; object-fit: cover; background: rgb(var(--gray-100)); } .dark .link-preview-favicon { background: rgb(var(--gray-800)); } .link-preview-url { font-size: 0.8125rem; font-weight: 500; color: rgb(var(--gray-700)); text-align: center; word-break: break-all; line-height: 1.35; } .dark .link-preview-url { color: rgb(var(--gray-300)); } .link-preview-loading { padding: 14px; font-size: 0.8125rem; color: rgb(var(--gray-400)); text-align: center; } .dark .link-preview-loading { color: rgb(var(--gray-500)); } /* ── Tutorial notebook button (guide pages) ─────────────────────────────── */ /* Matches the green accent of the Open Notebook panel on tool pages. */ .tutorial-notebook-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #e8f5e9; color: #2e7d32 !important; border: 1px solid #c8e6c9; border-radius: 6px; font-size: 0.875rem; font-weight: 600; text-decoration: none !important; transition: background 0.15s, border-color 0.15s; margin: 0 0 20px 0; } .tutorial-notebook-btn:hover { background: #c8e6c9; border-color: #a5d6a7; text-decoration: none !important; } .tutorial-notebook-btn svg { width: 16px; height: 16px; flex-shrink: 0; } :is(.dark) .tutorial-notebook-btn { background: #1b3a1b; color: #66bb6a !important; border-color: #2e4e2e; } :is(.dark) .tutorial-notebook-btn:hover { background: #2e4e2e; border-color: #3b6b3b; } /* ── Scroll-reveal animation ─────────────────────────────────────────────── */ /* Elements tagged with .scroll-reveal fade + slide into view when they enter the viewport. The initial-hidden rule is scoped to the .js-reveal-ready root class (added by scroll-reveal.js) so the content stays visible if the script fails to load. Respects prefers-reduced-motion. */ .js-reveal-ready .scroll-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; will-change: opacity, transform; } .js-reveal-ready .scroll-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js-reveal-ready .scroll-reveal { opacity: 1; transform: none; transition: none; } } /* ── Tool Catalog tiles on tools/introduction ───────────────────────────── */ .tool-catalog-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 20px 0; } @media (max-width: 1200px) { .tool-catalog-tiles { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .tool-catalog-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .tool-catalog-tiles { grid-template-columns: 1fr; } } .tool-catalog-tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; border: 1px solid #dfe8e9; text-decoration: none !important; color: inherit !important; transition: transform 0.15s, box-shadow 0.15s; } .tool-catalog-tile:hover { transform: scale(1.02); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); text-decoration: none !important; } :is(.dark) .tool-catalog-tile { border-color: #344649; } .tool-catalog-tile-collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: #fff; } :is(.dark) .tool-catalog-tile-collage { background: #0f1719; } .tool-catalog-tile-cell { position: relative; overflow: hidden; } .tool-catalog-tile-cell img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; } .tool-catalog-tile-color { display: flex; align-items: center; justify-content: center; padding: 4px 8px; } .tool-catalog-tile-color span { color: #fff; font-size: 0.6875rem; font-weight: 600; line-height: 1.2; text-align: center; word-break: break-word; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .tool-catalog-tile-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; max-width: calc(100% - 20px); background: rgba(20, 30, 34, 0.38); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); color: #fff; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.005em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .tool-catalog-tile-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tool-catalog-tile-icon { width: 14px; height: 14px; flex-shrink: 0; filter: invert(1) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); margin: 0 !important; } /* ── Tool Catalog collage: flat image mosaic (replaces per-category tiles) ─ */ .tool-collage { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 1.25rem 0 0.5rem; } /* Mintlify's `.link { z-index: 10 }` on raw tags ties the catalog fade, so tiles paint over "Show all tools". Reset it here; only a hovered tile lifts. */ .tool-collage .tool-collage-item { position: relative; z-index: auto; display: block; aspect-ratio: 1200 / 630; border-radius: 6px; overflow: hidden; background: #0f1719; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease; } .tool-collage-item:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); z-index: 1; } .tool-collage-item img { position: absolute; inset: 0; width: 100% !important; height: 100%; max-width: none !important; object-fit: cover; margin: 0 !important; display: block; transition: transform 0.3s ease; } .tool-collage-item:hover img { transform: scale(1.06); } /* ── Footer contributors section (injected by contributors-footer.js) ───── */ /* Mounts as the first child of the Mintlify footer container. We flip that container to a vertical stack so our block sits above the Powered-by line, center-aligned with tight spacing so both read as one footer unit. */ .has-proto-contributors { flex-direction: column !important; align-items: center !important; gap: 6px !important; } /* The Mintlify footer's own children (GitHub icon, Powered-by line) normally left-align; center them so they visually stack under the contributor block. */ .has-proto-contributors > * { align-self: center !important; } .proto-contributors-footer { width: 100%; padding: 0; margin: 0; text-align: center; } .proto-contributors-copy { margin: 0 auto 8px; max-width: 640px; } .proto-contributors-lead { margin: 0 0 4px 0 !important; font-size: 0.875rem; color: rgb(var(--gray-600)); line-height: 1.5; } .proto-contributors-lead.proto-contributors-join { margin-top: 6px !important; } .proto-contributors-lead a { color: rgb(var(--primary)); text-decoration: none; border-bottom: 1px solid currentColor; } .proto-contributors-lead a:hover { opacity: 0.8; } .proto-contributors-strip { margin: 0 auto; max-width: 100%; /* overflow must stay visible so scaled hovers and the name tooltip aren't clipped. */ overflow: visible; padding: 6px 0 10px; } .proto-contributors-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; row-gap: 10px; } .proto-contributor { position: relative; display: inline-block; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; text-decoration: none !important; transition: transform 0.18s ease-out; } .proto-contributor img { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: block; margin: 0 !important; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } :is(.dark) .proto-contributor img { border-color: #1d2c2f; } .proto-contributor:hover { transform: translateY(-2px) scale(1.25); z-index: 20; } .proto-contributor-name { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 8px; background: #1d2c2f; color: #fff; font-size: 0.6875rem; font-weight: 600; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 30; transition: opacity 0.15s ease-out; } .proto-contributor:hover .proto-contributor-name { opacity: 1; } /* ── Contributors grid (tools/introduction bottom) ──────────────────────── */ .contributors-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 32px; } .contributor-avatar { position: relative; display: inline-block; width: 44px; height: 44px; border-radius: 50%; overflow: visible; text-decoration: none !important; transition: transform 0.15s ease-out; } .contributor-avatar img { width: 44px !important; height: 44px !important; border-radius: 50% !important; display: block; margin: 0 !important; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); transition: box-shadow 0.15s ease-out; } :is(.dark) .contributor-avatar img { border-color: #1d2c2f; } .contributor-avatar:hover { transform: translateY(-2px) scale(1.08); z-index: 2; } .contributor-avatar:hover img { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } .contributor-avatar-name { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 3px 8px; background: #1d2c2f; color: #fff; font-size: 0.6875rem; font-weight: 600; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s ease-out; } .contributor-avatar:hover .contributor-avatar-name { opacity: 1; } /* ── Tool catalog sidebar indentation ───────────────────────────────────── */ /* Indent tool leaf pages under category groups so they visually belong to their section. Excludes top-level tools pages, hand-written concept/guide pages, organizations, and category overview pages (which act as group roots). */ [data-testid="sidebar"] a[href^="/tools/"]:not([href="/tools/introduction"]):not([href="/tools/installation"]):not([href^="/tools/concepts/"]):not([href^="/tools/guides/"]):not([href^="/tools/organizations/"]):not([href$="/overview"]), aside a[href^="/tools/"]:not([href="/tools/introduction"]):not([href="/tools/installation"]):not([href^="/tools/concepts/"]):not([href^="/tools/guides/"]):not([href^="/tools/organizations/"]):not([href$="/overview"]) { padding-left: 1.75rem !important; } /* ── Toolkit Notes badge row ────────────────────────────────────────────── */ /* The four proto-docs guide badges in a tool's ## Toolkit Notes section. Wrapped by the generator into

so MDX sees one block element rather than four sibling tags (which Mintlify stacks vertically). Flex layout keeps the pills side-by-side and wraps them to a second row on narrow viewports. */ .toolkit-guide-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 18px; } .toolkit-guide-badges a { display: inline-flex; line-height: 0; /* drop the inline-baseline whitespace under the badge image */ } /* ── Tool subsection card ───────────────────────────────────────────────── */ /* Wraps each H3 tool subsection inside the ## Tools section so individual tools visually stand out as discrete cards on the rendered page. Generated automatically by the docs build; source READMEs are unchanged. */ .tool-section-card { background: #f9fcfc; /* willow-50 — default for tools without a verb match */ border: 1px solid #dee9e8; /* willow-200 */ border-radius: 10px; padding: 20px 24px; margin: 24px 0; } html.dark .tool-section-card { background: #162426; /* willow-900 */ border-color: #344649; /* willow-700 */ } .tool-section-card > h3:first-child { margin-top: 0 !important; } /* Per-verb background tints. Tool keys containing the listed substring get a matching subtle background so related tools (all "score" tools, all "sample" tools, etc.) share a visual family across the catalog. All variants share the default willow-200 / willow-700 border defined on .tool-section-card above; tints are kept very low-saturation so they read as neutral grey-tones rather than vibrant colors. */ .tool-section-card--sample { background: #f0edf6; } /* pale lavender */ .tool-section-card--score { background: #f5f0e4; } /* pale tan */ .tool-section-card--predict { background: #ebeff7; } /* pale blue */ .tool-section-card--embedding { background: #ecf2ed; } /* pale sage */ .tool-section-card--gradient { background: #e9f1f2; } /* pale teal */ .tool-section-card--search { background: #e8f0f2; } /* pale cyan */ .tool-section-card--fetch { background: #e8f1ed; } /* pale aqua */ .tool-section-card--design { background: #f4ece1; } /* pale peach */ .tool-section-card--align { background: #ededf5; } /* pale indigo */ .tool-section-card--lookup { background: #f2efdf; } /* pale olive */ .tool-section-card--cluster { background: #efeaf3; } /* pale mauve */ .tool-section-card--relax { background: #e9f2ec; } /* pale mint */ .tool-section-card--energy { background: #f4eedd; } /* pale gold */ html.dark .tool-section-card--sample { background: #1d1a28; } html.dark .tool-section-card--score { background: #28241a; } html.dark .tool-section-card--predict { background: #181d28; } html.dark .tool-section-card--embedding { background: #1a221c; } html.dark .tool-section-card--gradient { background: #18222a; } html.dark .tool-section-card--search { background: #16202a; } html.dark .tool-section-card--fetch { background: #182521; } html.dark .tool-section-card--design { background: #271f15; } html.dark .tool-section-card--align { background: #1c1c28; } html.dark .tool-section-card--lookup { background: #25221a; } html.dark .tool-section-card--cluster { background: #221d28; } html.dark .tool-section-card--relax { background: #182521; } html.dark .tool-section-card--energy { background: #25201a; } /* Hide Mintlify's diagram pan/zoom control overlay; it covered diagram content. The diagram still renders at its default size. Keyed on the semantic aria-label so it survives Tailwind utility-class churn. */ div:has(> button[aria-label="Reset view"]) { display: none !important; } /* "Go deeper" reference card — a teal-accented banner that links into the developer notes, deliberately distinct from the plain Next Steps nav cards. */ .go-deeper-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 1rem 0; background: #f0f7f8; border: 1px solid #cfe3e4; border-left: 4px solid #046e7a; /* primary teal accent */ border-radius: 8px; text-decoration: none !important; transition: background 0.15s ease, border-left-color 0.15s ease; } .go-deeper-card:hover { background: #e4f0f1; border-left-color: #035a64; } .go-deeper-icon { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; color: #046e7a; } .go-deeper-body { display: flex; flex-direction: column; gap: 2px; } .go-deeper-title { font-weight: 600; color: #344649; /* willow-700 */ } .go-deeper-desc { color: #506467; /* willow-600 */ font-size: 0.875rem; line-height: 1.45; } :is(.dark) .go-deeper-card { background: #11201f; border-color: #2c4044; border-left-color: #2dd4bf; } :is(.dark) .go-deeper-card:hover { background: #16302e; } :is(.dark) .go-deeper-icon { color: #5fd3c4; } :is(.dark) .go-deeper-title { color: #eef5f4; } :is(.dark) .go-deeper-desc { color: #9eb4b2; } /* ============================================================ Change log: commit-history chart + milestone notes (scripts/changelog-chart.js renders into #changelog-chart) ============================================================ */ :root { --changelog-language: #046e7a; --changelog-tools: #b5722a; --changelog-axis: #768b8e; /* willow-500 */ --changelog-grid: #dee9e8; /* willow-200 */ --changelog-line-soft: #ced9d7; /* willow-300 */ --changelog-surface: #ffffff; --changelog-surface-alt: #f9fcfc; /* willow-50 */ --changelog-border: #dee9e8; /* willow-200 */ --changelog-text: #1d2c2f; /* willow-800 */ --changelog-muted: #506467; /* willow-600 */ } :is(.dark) { --changelog-language: #5fd3c4; --changelog-tools: #e0a35c; --changelog-axis: #768b8e; /* willow-500 */ --changelog-grid: #2c4044; --changelog-line-soft: #344649; /* willow-700 */ --changelog-surface: #162426; /* willow-900 */ --changelog-surface-alt: #101a1b; /* willow-950 */ --changelog-border: #2c4044; --changelog-text: #eef5f4; /* willow-100 */ --changelog-muted: #9eb4b2; /* willow-400 */ } .changelog-chart { margin: 28px 0 40px; padding: 20px 20px 12px; min-height: 300px; border: 1px solid var(--changelog-border); border-radius: 14px; background: var(--changelog-surface-alt); } .changelog-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .changelog-legend { display: flex; flex-wrap: wrap; gap: 6px; } .changelog-legend-item { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border: 0; border-radius: 999px; background: transparent; font-size: 0.8125rem; line-height: 1.2; cursor: pointer; opacity: 0.4; transition: opacity 0.15s ease, background-color 0.15s ease; } .changelog-legend-item.is-on { opacity: 1; } .changelog-legend-item:hover { background: var(--changelog-surface); } .changelog-legend-label { font-weight: 600; color: var(--changelog-text); } .changelog-legend-count { color: var(--changelog-muted); font-variant-numeric: tabular-nums; } .changelog-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--changelog-axis); } .changelog-legend-item[data-layer="language"] .changelog-swatch, .changelog-tooltip-row.changelog-language .changelog-swatch { background: var(--changelog-language); } .changelog-legend-item[data-layer="tools"] .changelog-swatch, .changelog-tooltip-row.changelog-tools .changelog-swatch { background: var(--changelog-tools); } .changelog-chart-canvas { position: relative; } .changelog-svg { display: block; width: 100%; height: auto; overflow: visible; } .changelog-gridline { stroke: var(--changelog-grid); stroke-width: 1; } .changelog-axis-label { fill: var(--changelog-axis); font-size: 11px; font-variant-numeric: tabular-nums; } .changelog-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .changelog-line.changelog-language { stroke: var(--changelog-language); } .changelog-line.changelog-tools { stroke: var(--changelog-tools); } .changelog-area { stroke: none; } .changelog-stop-from.changelog-language { stop-color: var(--changelog-language); stop-opacity: 0.26; } .changelog-stop-from.changelog-tools { stop-color: var(--changelog-tools); stop-opacity: 0.24; } .changelog-stop-to.changelog-language, .changelog-stop-to.changelog-tools { stop-color: var(--changelog-surface-alt); stop-opacity: 0; } .changelog-crosshair { stroke: var(--changelog-axis); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; } /* Newsworthy events (updates and new tools): a ring on the line they belong to, named in the hover readout for their week. The ring fades in once the line has drawn in. */ .changelog-marker { fill: var(--changelog-surface-alt); stroke-width: 2; pointer-events: none; animation: changelog-marker-in 0.3s ease-out 1.1s both; } .changelog-marker.changelog-language { stroke: var(--changelog-language); } .changelog-marker.changelog-tools { stroke: var(--changelog-tools); } @keyframes changelog-marker-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .changelog-marker { animation: none; } } .changelog-tooltip-event { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--changelog-grid); font-weight: 600; } .changelog-focus-dot { stroke: var(--changelog-surface-alt); stroke-width: 2; } .changelog-focus-dot.changelog-language { fill: var(--changelog-language); } .changelog-focus-dot.changelog-tools { fill: var(--changelog-tools); } .changelog-overlay { cursor: crosshair; } .changelog-tooltip { position: absolute; top: 4px; transform: translateX(-50%); min-width: 240px; max-width: 320px; padding: 10px 12px; border: 1px solid var(--changelog-border); border-radius: 10px; background: var(--changelog-surface); box-shadow: 0 6px 20px rgb(16 26 27 / 0.12); font-size: 0.78rem; color: var(--changelog-text); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; } .changelog-tooltip.is-visible { opacity: 1; } .changelog-tooltip.is-flipped { transform: translateX(-100%); } .changelog-tooltip-date { margin-bottom: 6px; font-weight: 600; } .changelog-tooltip-row { display: flex; align-items: center; gap: 8px; line-height: 1.7; white-space: nowrap; } .changelog-tooltip-value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; } /* New-tool cards. data-date and data-layer place the marker on the chart. */ .changelog-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 8px; } .changelog-tool-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--changelog-border); border-radius: 14px; background: var(--changelog-surface); text-decoration: none !important; color: inherit !important; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .changelog-tool-card:hover { border-color: var(--changelog-tools); box-shadow: 0 8px 24px rgb(16 26 27 / 0.1); transform: translateY(-2px); } .changelog-tool-art { display: block; width: 100%; aspect-ratio: 1200 / 630; /* proto-assets carousel variant */ object-fit: cover; margin: 0 !important; border-radius: 0 !important; } .changelog-tool-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; } .changelog-tool-date { color: var(--changelog-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .changelog-tool-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--changelog-text); } .changelog-tool-desc { font-size: 0.8125rem; line-height: 1.5; color: var(--changelog-muted); } /* Commit timeline. */ .changelog-commits { margin: 20px 0 8px; } .changelog-commits-head { display: flex; justify-content: flex-end; margin-bottom: 12px; } .changelog-filters { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--changelog-border); border-radius: 9px; background: var(--changelog-surface); } .changelog-filter { padding: 4px 11px; border: 0; border-radius: 6px; background: transparent; color: var(--changelog-muted); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .changelog-filter:hover { color: var(--changelog-text); } .changelog-filter.is-active { background: var(--changelog-surface-alt); color: var(--changelog-text); box-shadow: inset 0 0 0 1px var(--changelog-border); } .changelog-commit-list { position: relative; list-style: none !important; margin: 0; padding: 0 0 0 22px !important; } /* The rail the commit dots sit on. */ .changelog-commit-list::before { content: ""; position: absolute; top: 10px; bottom: 10px; left: 4px; width: 1px; background: var(--changelog-grid); } /* Source island for hand-written commit write-ups; the script moves the content inline under its commit, so the island itself never renders. */ .changelog-commit-notes { display: none; } .changelog-commit { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 7px 0; margin: 0; border-bottom: 1px solid var(--changelog-border); font-size: 0.8125rem; } .changelog-commit:last-child { border-bottom: 0; } /* Sits on the rail drawn by .changelog-commit-list::before, left of the row. */ .changelog-commit-dot { position: absolute; top: 12px; left: -22px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--changelog-surface); } .changelog-commit.changelog-language .changelog-commit-dot { background: var(--changelog-language); } .changelog-commit.changelog-tools .changelog-commit-dot { background: var(--changelog-tools); } /* Event rows: dated moments with no commit behind them, interleaved by date. Hollow dot and a neutral chip where a commit shows its sha, so they read as a different kind of entry without competing with either layer's colour. */ .changelog-commit.changelog-commit-event .changelog-commit-dot { background: var(--changelog-surface); border-color: var(--changelog-muted); } .changelog-commit-kind { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--changelog-muted); } /* An event title is prose, not a commit subject, and events are rare enough to wrap rather than be cut at the ellipsis a one-line commit row uses. */ .changelog-commit-event .changelog-commit-subject { overflow: visible; text-overflow: clip; white-space: normal; } .changelog-event-link { color: var(--changelog-text) !important; text-decoration: underline !important; text-underline-offset: 2px; text-decoration-thickness: 1px; } .changelog-event-link:hover { text-decoration-thickness: 2px; } .changelog-commit-meta { display: flex; align-items: baseline; gap: 8px; flex: none; } .changelog-commit-sha { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: var(--changelog-muted) !important; text-decoration: none !important; } .changelog-commit-sha:hover { color: var(--changelog-text) !important; } .changelog-commit-layer { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .changelog-commit.changelog-language .changelog-commit-layer { color: var(--changelog-language); } .changelog-commit.changelog-tools .changelog-commit-layer { color: var(--changelog-tools); } .changelog-commit-subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--changelog-text); } .changelog-commit-tail { display: flex; align-items: baseline; gap: 10px; flex: none; } .changelog-commit-pr { font-size: 0.75rem; color: var(--changelog-muted) !important; text-decoration: none !important; } .changelog-commit-pr:hover { color: var(--changelog-text) !important; } .changelog-commit-date { color: var(--changelog-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; } /* A commit's inline write-up: wraps onto its own full-width line in the row. */ .changelog-commit-note { width: 100%; margin: 10px 0 4px; padding: 12px 14px; border-radius: 8px; border-left: 2px solid var(--changelog-border); background: var(--changelog-surface-alt); font-size: 0.8125rem; line-height: 1.6; color: var(--changelog-muted); white-space: normal; } .changelog-commit.changelog-language .changelog-commit-note { border-left-color: var(--changelog-language); } .changelog-commit.changelog-tools .changelog-commit-note { border-left-color: var(--changelog-tools); } .changelog-commit-note p { margin: 0 0 8px; } .changelog-commit-note p:last-child { margin-bottom: 0; } /* Vendor logo introducing a note; the wordmark carries its own padding, so it sits flush left at a height that matches the surrounding prose rather than dominating it. */ .changelog-note-logo { height: 22px; width: auto; margin: 0 0 10px; display: block; } /* Update artwork in a timeline row. The frame owns the box and the border; the image just fits inside it, so a square poster and a wide wordmark both land the same size. */ .changelog-note-art { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0 !important; } html:not(.dark) .changelog-note-art.is-dark { display: none; } html.dark .changelog-note-art.is-light { display: none; } .changelog-commit.has-note .changelog-commit-subject { font-weight: 600; color: var(--changelog-text); } .changelog-commits-more { margin-top: 14px; padding: 6px 14px; border: 1px solid var(--changelog-border); border-radius: 999px; background: var(--changelog-surface); color: var(--changelog-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .changelog-commits-more:hover { border-color: var(--changelog-language); color: var(--changelog-language); } @media (max-width: 860px) { .changelog-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .changelog-chart { padding: 16px 12px 8px; } .changelog-legend-count { display: none; } .changelog-tools { grid-template-columns: minmax(0, 1fr); } .changelog-commit-layer { display: none; } } @media (prefers-reduced-motion: reduce) { .changelog-tool-card:hover { transform: none; } } /* ============================================================ Per-tool contributor row (top of each tool page) Rendered as static markup by generate_tools_docs.py. ============================================================ */ .entity-contributors { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 20px; } .entity-contributors-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #768b8e; /* willow-500 */ } .entity-contributors-people { display: flex; flex-wrap: wrap; gap: 6px; } .entity-contributor { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border: 1px solid #dee9e8; /* willow-200 */ border-radius: 999px; background: #ffffff; color: #344649 !important; /* willow-700 */ font-size: 0.78rem; font-weight: 500; line-height: 1.4; text-decoration: none !important; transition: border-color 0.15s ease, background-color 0.15s ease; } a.entity-contributor:hover { border-color: #8ebec3; /* primary-light */ background: #f9fcfc; /* willow-50 */ } .entity-contributor-avatar { width: 22px; height: 22px; margin: 0 !important; border-radius: 50% !important; object-fit: cover; } .entity-contributor-initials { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #eef5f4; /* willow-100 */ color: #506467; /* willow-600 */ font-size: 0.625rem; font-weight: 700; } .entity-contributor-more { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px dashed #ced9d7; /* willow-300 */ border-radius: 999px; color: #506467; /* willow-600 */ font-size: 0.78rem; font-weight: 500; } :is(.dark) .entity-contributor { border-color: #2c4044; background: #162426; /* willow-900 */ color: #eef5f4 !important; /* willow-100 */ } :is(.dark) a.entity-contributor:hover { border-color: #506467; /* willow-600 */ background: #1d2c2f; /* willow-800 */ } :is(.dark) .entity-contributor-initials { background: #344649; /* willow-700 */ color: #9eb4b2; /* willow-400 */ } :is(.dark) .entity-contributor-more { border-color: #344649; /* willow-700 */ color: #9eb4b2; /* willow-400 */ } /* A toolkit an outside organization wrote itself, rather than one Proto built around their model. The row is tinted so the distinction reads at a glance against the plain row every other toolkit carries, and it names the organization in line with the people. Amber rather than a willow tint: willow is the site's ambient colour, so a willow row would not read as different. It follows warm accents already in use (#e65100, #ff9800). */ .entity-contributors-developed { padding: 10px 14px; border: 1px solid #f2e0ae; border-left: 3px solid #e0a02a; border-radius: 8px; background: #fdf8ec; } /* The willow-500 default goes muddy on a warm ground. */ .entity-contributors-developed .entity-contributors-label { color: #8a5a12; } .entity-contributors-org { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px; border: 1px solid #e6cf9a; /* Overridden inline with the organization's own brand colour. */ border-left: 2px solid #e0a02a; border-radius: 999px; background: #ffffff; color: #4a3410 !important; font-size: 0.78rem; font-weight: 600; line-height: 1.4; text-decoration: none !important; transition: border-color 0.15s ease, background-color 0.15s ease; } /* No registry logo: reclaim the left inset the logo would have filled. */ .entity-contributors-org-plain { padding-left: 12px; } a.entity-contributors-org:hover { border-color: #d9bd7c; background: #fffdf7; } .entity-contributors-org-logo { width: 20px; height: 20px; margin: 0 !important; border-radius: 50% !important; object-fit: contain; background: #fff; } .entity-contributors-org-role { font-weight: 500; color: #8a6428; } /* The pills stay white and lift off the tint, but their hover flips to willow-50, a cool near-white that reads as a hue shift on a warm ground rather than a hover. */ .entity-contributors-developed a.entity-contributor:hover { border-color: #d9bd7c; background: #fffdf7; } .entity-contributors-developed .entity-contributor-more { border-color: #e2cfa2; color: #8a5a12; } :is(.dark) .entity-contributors-developed { border-color: #4a3a1c; border-left-color: #c78b28; background: #241d12; } :is(.dark) .entity-contributors-developed .entity-contributors-label { color: #d9ae63; } :is(.dark) .entity-contributors-org { border-color: #4a3a1c; background: #1a1610; color: #f2e7d3 !important; } :is(.dark) a.entity-contributors-org:hover { border-color: #6b5426; background: #241d12; } :is(.dark) .entity-contributors-org-role { color: #c2a06a; } /* In dark mode the pill's willow-900 ground is cool enough to clash with the warm row, unlike the white pills in light mode. */ :is(.dark) .entity-contributors-developed .entity-contributor { border-color: #3b2f18; background: #1a1610; } :is(.dark) .entity-contributors-developed a.entity-contributor:hover { border-color: #6b5426; background: #241d12; } :is(.dark) .entity-contributors-developed .entity-contributor-initials { background: #3b2f18; color: #c2a06a; } :is(.dark) .entity-contributors-developed .entity-contributor-more { border-color: #4a3a1c; color: #c2a06a; } /* Updates page: cards rendered by scripts/updates.js from the same list the change log timeline interleaves, so an update is written once and appears on both pages. */ .updates-list { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 8px; } .updates-card { display: flex; align-items: center; gap: 24px; padding: 20px 24px; border: 1px solid var(--changelog-border); border-radius: 16px; background: var(--changelog-surface); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .updates-card:hover { border-color: var(--changelog-line-soft); box-shadow: 0 10px 30px rgb(16 26 27 / 0.07); } /* One frame for every update whatever the source aspect: a square poster fills it and a wide wordmark letterboxes inside it, so a column of cards keeps one left edge. The ring is inset rather than a border, so it reads as a tint rather than a second box drawn inside the card's own. */ .updates-card-frame { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; padding: 14px; border-radius: 14px; background: var(--changelog-surface-alt); box-shadow: inset 0 0 0 1px var(--changelog-border); overflow: hidden; } .updates-card-art { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0 !important; } /* Guarded both ways: an unguarded light rule leaks into dark mode under Tailwind v4. */ html:not(.dark) .updates-card-art.is-dark { display: none; } html.dark .updates-card-art.is-light { display: none; } .updates-card-text { flex: 1; min-width: 0; } .updates-card-date { display: block; margin-bottom: 7px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--changelog-axis); font-variant-numeric: tabular-nums; } .updates-card-title { margin: 0 0 7px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--changelog-text); } .updates-card-link { color: var(--changelog-text) !important; text-decoration: none !important; background-image: linear-gradient(var(--changelog-line-soft), var(--changelog-line-soft)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 0.18s ease, background-image 0.18s ease; padding-bottom: 1px; } .updates-card:hover .updates-card-link { background-image: linear-gradient(var(--changelog-text), var(--changelog-text)); background-size: 100% 2px; } .updates-card-body { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--changelog-muted); } @media (max-width: 640px) { .updates-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 20px; } .updates-card-frame { width: 88px; height: 88px; padding: 12px; } } /* An update's note lays the art beside its prose. Scoped to event rows so a commit write-up, which has no frame, keeps its plain stacked block. */ .changelog-commit-event .changelog-commit-note { display: flex; align-items: center; gap: 14px; } .changelog-commit-event .changelog-commit-note > p { flex: 1; min-width: 0; margin: 0; } @media (max-width: 640px) { .changelog-commit-event .changelog-commit-note { flex-direction: column; align-items: flex-start; } } /* The timeline uses the same frame, at the smaller size a commit row allows. */ .changelog-note-frame { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; padding: 10px; margin: 0; flex: 0 0 auto; border: 1px solid var(--changelog-border); border-radius: 10px; background: var(--changelog-surface-alt); overflow: hidden; } /* The MCP component card has no repository preview image, so the MCP page's animation stands in for one: pinned across the top of the card at the 2:1 shape of the GitHub previews on the Language and Tools cards, on white in both themes as those previews are. The content area is pushed down by the same height (a percentage padding resolves against the card's width). */ .card:has(.component-card-art) > [data-component-part="card-content-container"] { position: static; padding-top: calc(50% + 1.25rem); } .component-card-art { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 2 / 1; display: flex; align-items: center; justify-content: center; background: #ffffff; border-bottom: 1px solid #e5e7eb; } /* The art sits out of flow, so the description must not keep the spacing prose gives a following paragraph. */ .component-card-art + * { margin-top: 0 !important; } .component-card-art .mcp-comm { gap: 0.6rem; margin: 0; } .component-card-art .mcp-comm-agent, :is(.dark) .component-card-art .mcp-comm-agent { width: 48px; height: 48px; border-radius: 11px; border-color: #d8e1e6; background: #ffffff; color: #40545c; } .component-card-art .mcp-comm-agent svg { width: 27px; height: 27px; } .component-card-art .mcp-comm-wire { gap: 0.25rem; font-size: 0.85rem; } .component-card-art .mcp-comm-dot, :is(.dark) .component-card-art .mcp-comm-dot { width: 5px; height: 5px; background: #046e7a; } :is(.dark) .component-card-art .mcp-comm-bracket { color: #046e7a; } .component-card-art .mcp-comm-proto img { height: 48px; }