diff --git a/TRIDENT-PROTOTYPE.md b/TRIDENT-PROTOTYPE.md
new file mode 100644
index 000000000000..e7ce5ad12324
--- /dev/null
+++ b/TRIDENT-PROTOTYPE.md
@@ -0,0 +1,131 @@
+# Trident token prototype
+
+This prototype applies Trident tokens to the existing Hugo and Tailwind docs
+site. Builds use checked-in CSS and fonts, with no access to a private registry.
+
+## Preview
+
+```console
+$ npm ci
+$ hugo server --port 1313
+```
+
+Review these pages in light and dark mode, at desktop and mobile widths:
+
+- `/desktop/setup/install/linux/`: article typography, navigation, callouts,
+  tables, and code
+- `/get-started/docker-concepts/running-containers/sharing-local-files/`: tabs and code blocks
+- `/get-started/`: landing pages and cards
+
+Search requires the separate Pagefind indexing step used by the existing build.
+
+## Integration
+
+`assets/css/style.css` imports the legacy theme, the Trident snapshot, and the
+docs adapter in that order. Generated Tailwind mappings supply prefixed palette
+utilities and replace shared type, spacing, and radius values. Legacy palette utilities remain
+available during the migration. The adapter maps selected docs aliases and
+components to Trident semantic colors.
+
+`assets/css/trident.css` maps docs aliases to semantic tokens and styles the
+header, sidebar selection, article text, cards, buttons, tabs, and callouts.
+The `docs` cascade layer follows utilities so existing light and dark classes
+cannot override these semantic color pairs. Token imports stay at the root
+because they contain Tailwind directives as well as CSS layer declarations.
+
+Manrope supplies the interface and article typeface. Article body text uses the
+16-pixel reading scale, while navigation uses the smaller label scale. Code keeps
+the existing Roboto Mono font. The existing theme switch activates Trident's
+`.dark` overrides.
+
+Article body text and ordinary quotations use Trident's primary foreground
+through the local `--docs-reading-foreground` alias. The local
+`--docs-reading-background` uses white `background-primary` in light mode and
+`sidebar` in dark mode, matching the dark navigation surface. Subtle borders separate the navigation from the reading area. These are
+local layout adaptations; the separate Trident high-contrast mode stays inactive.
+
+Home, Get started, Guides featured cards, and Manuals share the
+`components/card.html` partial. Grid layouts and optional audience labels remain
+page-specific; Guides search results retain their list layout.
+Navigation cards use `background-paper-elevation-0`, compact 16-pixel titles at
+weight 600, and 14-pixel descriptions in Trident gray 700 or gray 300.
+The border and shadow follow the surface material in Trident core's
+`tri-materials.css`: a semantic border in both themes, with a faint inset
+top-edge highlight in dark mode and no visible shadow in light mode. The local
+`--docs-card-shadow` mirrors this material because it is outside the token
+package. The elevated background is a docs-specific surface choice. Decorative icons are
+omitted; titles identify the destinations. Linked cards have a full-area target
+and accented hover or focus states. Tabs retain the component surface and
+semantic borders. Inactive sidebar
+items use `sidebar-foreground-muted`, with stronger text on the active item.
+Inactive table-of-contents links are neutral; active and hovered links use the
+primary accent. Inline code uses a faint foreground tint and compact padding,
+while fenced code uses Trident's default background in light mode and the muted
+surface in dark mode to preserve syntax contrast. Chroma and Gordon's highlight.js
+map keywords, strings, numbers, attributes, commands, and types to Trident
+syntax roles. Comments retain the muted foreground.
+
+The neutral header is a docs-specific adaptation. Trident's `AppHeader` component
+uses the `header-from` and `header-to` blue gradient tokens.
+
+Gordon uses the Trident header gradient, popover surface, input colors, and
+semantic message, feedback, and alert states. Pagefind inherits the same typeface,
+popover surface, foregrounds, accent highlights, and focus colors through its
+component variables. Search ranking and chat requests retain their existing
+behavior.
+
+The homepage composes Gordon's question form, suggested questions, shared
+navigation cards, and release feed with the same Trident palette. The form uses
+the raised surface and a visible focus outline; suggested questions use quieter
+bordered controls. The navigation and release feed share a content width.
+The decorative background pattern and scaling interactions are omitted.
+These page-specific rules live in `assets/css/home.css`.
+
+This is an integration prototype. Components outside these mappings still need
+a design review. Loading tokens does not provide
+Trident component behavior or certify accessibility.
+
+Component checks cover cards, tab switching, code, search results, and Gordon
+at desktop and mobile widths in both themes. Local search checks use the
+preview's Pagefind assets because the local indexer fails with a native allocator
+error. Gordon message and rate-limit checks use intercepted browser responses;
+they verify rendering and interaction, not the live backend.
+
+## Snapshot provenance
+
+- Package: `@docker/trident-tokens@2.0.0-beta.3`
+- Repository: <https://github.com/docker/trident>
+- Release commit: `bbc0746b17209071ceddabcb14b180fcb32b2fa9`
+- CSS: ten unmodified generated files in `assets/css/vendor/trident/`
+- Checksums: SHA-256 per file in that directory's `manifest.json`
+
+The registry rejected the available credentials. This snapshot was generated
+from the release commit using the upstream `sd.config.ts` and
+`scripts/check-dark-coverage.ts`. It was not extracted from the published npm
+archive. The build used Node.js and these dependency versions from the upstream
+lockfile: `tsx@4.23.1`, `style-dictionary@5.5.1`, `apca-w3@0.1.9`, and
+`culori@4.0.2`. Upstream checks reported 97 contrast pairs with zero failures and
+explicit dark overrides for all 286 aliased tokens.
+
+Font files come from `@fontsource-variable/manrope@5.2.8` on npmjs.org. The
+unmodified WOFF2 subsets and their SIL Open Font License are under
+`static/assets/fonts/manrope/`. The font declarations retain the package's
+Unicode ranges and use local asset URLs.
+
+## Refresh the snapshot
+
+A maintainer with Trident access can build an agreed release in a separate
+checkout, or extract its published package. Then run:
+
+```console
+$ node hack/vendor-trident-tokens.mjs /path/to/trident/packages/tokens <40-character-source-commit>
+```
+
+The script validates the package name and local CSS imports, copies the
+generated files without modification, and records their version and checksums.
+Review the CSS diff. Keep docs adjustments in
+`assets/css/trident.css`. The refresh step is separate from ordinary builds.
+
+If the token package becomes available publicly on npmjs.org, replace the
+snapshot import with the package import and pin its version in `package.json`.
+The docs adapter can remain in place.
diff --git a/_vale/config/vocabularies/Docker/accept.txt b/_vale/config/vocabularies/Docker/accept.txt
index 75ac4e3e93b7..8c25b0f492b1 100644
--- a/_vale/config/vocabularies/Docker/accept.txt
+++ b/_vale/config/vocabularies/Docker/accept.txt
@@ -449,3 +449,5 @@ superset
 tokenization
 WebGL
 Xubuntu
+Pagefind
+Roboto
diff --git a/assets/css/global.css b/assets/css/global.css
index ba29b4dc6d16..13debd516625 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -56,19 +56,19 @@ input[type="search"]::-ms-clear {
     @apply mt-8 mb-4;
   }
   :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
-    font-weight: 500 !important;
-    font-size: 180% !important;
+    font-weight: var(--tri-font-weight-heading);
+    font-size: var(--tri-scale-heading-1-font-size);
     margin-bottom: 0.4em !important;
   }
   > h2 {
     @apply mt-7! mb-3!;
-    font-size: 160% !important;
+    font-size: var(--tri-scale-heading-3-font-size);
     a {
       @apply hover:no-underline!;
     }
   }
   > h3 {
-    font-size: 130% !important;
+    font-size: var(--tri-scale-heading-4-font-size);
     a {
       @apply hover:no-underline!;
     }
diff --git a/assets/css/home.css b/assets/css/home.css
new file mode 100644
index 000000000000..0a68147c4a43
--- /dev/null
+++ b/assets/css/home.css
@@ -0,0 +1,216 @@
+/* Homepage composition using the shared Trident surfaces and controls. */
+@layer docs {
+  .docs-home {
+    background: var(--tri-sidebar);
+    color: var(--tri-foreground);
+  }
+
+  .home-container {
+    width: min(100% - 3rem, 72rem);
+    margin-inline: auto;
+  }
+
+  .home-hero {
+    padding: clamp(3rem, 6vw, 5rem) 1.5rem 3.5rem;
+  }
+
+  .home-hero-content {
+    max-width: 48rem;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  .home-hero h1 {
+    margin: 0;
+    font-size: clamp(2.25rem, 4vw, 3rem);
+    font-weight: var(--tri-font-weight-semibold);
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+    text-wrap: balance;
+  }
+
+  .home-intro {
+    margin-top: 1rem;
+    color: var(--docs-card-description);
+    font-size: 1rem;
+    line-height: 1.6;
+    text-wrap: balance;
+  }
+
+  .home-question {
+    margin-top: 2rem;
+  }
+
+  .home-question-field {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem;
+    padding-left: 1.25rem;
+    background: var(--tri-background-paper-elevation-0);
+    border: 1px solid var(--tri-input);
+    border-radius: var(--tri-radius-lg);
+    box-shadow: var(--docs-card-shadow);
+  }
+
+  .home-question-field:focus-within {
+    border-color: var(--tri-ring);
+    outline: 2px solid var(--tri-ring);
+    outline-offset: 3px;
+  }
+
+  .home-gordon-icon {
+    flex-shrink: 0;
+    color: var(--tri-primary);
+  }
+
+  .home-question input {
+    flex: 1;
+    min-width: 0;
+    padding-block: 0.5rem;
+    color: var(--tri-foreground);
+    background: transparent;
+    font: inherit;
+    font-size: 1rem;
+    outline: none;
+  }
+
+  .home-question input::placeholder {
+    color: var(--tri-muted-foreground);
+    opacity: 1;
+  }
+
+  .home-question-submit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    background: var(--tri-primary);
+    color: var(--tri-primary-foreground);
+    border-radius: var(--tri-radius-default);
+    cursor: pointer;
+  }
+
+  .home-question-submit:disabled {
+    background: var(--tri-muted);
+    color: var(--tri-muted-foreground);
+    cursor: default;
+  }
+
+  .home-question-submit:enabled:hover {
+    background: var(--tri-accent-hover);
+  }
+
+  .home-suggestions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.625rem;
+    margin: 1.25rem auto 0;
+  }
+
+  .home-suggestion {
+    padding: 0.5rem 0.875rem;
+    border: 1px solid var(--tri-border);
+    border-radius: var(--tri-radius-lg);
+    background: transparent;
+    color: var(--docs-card-description);
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    cursor: pointer;
+  }
+
+  .home-suggestion:hover {
+    background: var(--tri-accent-subtle);
+    border-color: var(--tri-primary);
+    color: var(--tri-foreground);
+  }
+
+  .home-navigation {
+    padding-bottom: 3.5rem;
+  }
+
+  .home-updates {
+    padding-top: 0;
+    padding-bottom: 4rem;
+  }
+
+  .home-updates header {
+    border-color: var(--tri-border);
+    margin-bottom: 1rem;
+  }
+
+  .home-updates h2 {
+    color: var(--tri-foreground);
+    font-size: 1.5rem;
+    font-weight: var(--tri-font-weight-semibold);
+  }
+
+  .home-updates ol {
+    max-width: 56rem;
+  }
+
+  .home-update-link {
+    border-color: var(--tri-border);
+  }
+
+  .home-update-dot {
+    background: var(--tri-muted-foreground);
+    box-shadow: 0 0 0 4px var(--tri-sidebar);
+  }
+
+  .home-update-product,
+  .home-updates > .home-container > button {
+    color: var(--tri-primary);
+  }
+
+  .home-updates time,
+  .home-update-link .icon-svg {
+    color: var(--tri-muted-foreground);
+  }
+
+  .home-update-title {
+    color: var(--tri-foreground);
+  }
+
+  .home-update-description {
+    color: var(--docs-card-description);
+    line-height: 1.6;
+  }
+
+  .home-update-link:hover .home-update-title {
+    color: var(--tri-primary);
+  }
+
+  .home-update-link:hover .home-update-dot {
+    background: var(--tri-primary);
+  }
+
+  @media (max-width: 40rem) {
+    .home-question-field {
+      gap: 0.625rem;
+      padding-left: 0.75rem;
+    }
+
+    .home-gordon-icon {
+      display: none;
+    }
+
+    .home-hero {
+      padding-bottom: 2.5rem;
+    }
+
+    .home-navigation {
+      padding-bottom: 2.5rem;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .home-update-link .icon-svg {
+      transition: none;
+      transform: none;
+    }
+  }
+}
diff --git a/assets/css/pagefind.css b/assets/css/pagefind.css
index a6619c3b104a..77538e5cac5c 100644
--- a/assets/css/pagefind.css
+++ b/assets/css/pagefind.css
@@ -1,25 +1,47 @@
-/* Pagefind Component UI Customizations */
-
-/* Dark mode variables for modal */
-.dark pagefind-modal {
-  --pf-text: var(--color-gray-100);
-  --pf-text-secondary: var(--color-gray-300);
-  --pf-text-muted: var(--color-gray-400);
-  --pf-background: var(--color-gray-900);
-  --pf-border: var(--color-gray-700);
-  --pf-border-focus: var(--color-blue-400);
-  --pf-hover: var(--color-gray-800);
+/* Scope variables to the modal so the separately loaded Pagefind defaults
+   cannot replace the docs theme. */
+pagefind-modal {
+  --pf-font: var(--tri-font-family-sans);
+  --pf-text: var(--tri-foreground);
+  --pf-text-secondary: var(--tri-foreground);
+  --pf-text-muted: var(--tri-muted-foreground);
+  --pf-background: var(--tri-popover);
+  --pf-border: var(--tri-border);
+  --pf-border-focus: var(--tri-ring);
+  --pf-outline-focus: var(--tri-ring);
+  --pf-hover: var(--tri-accent-subtle);
+  --pf-skeleton: var(--tri-muted);
+  --pf-skeleton-shine: var(--tri-background-primary);
+  --pf-border-radius: var(--tri-radius-default);
+  --pf-error-bg: var(--tri-alert-error-bg);
+  --pf-error-border: var(--tri-alert-error-border);
+  --pf-error-text: var(--tri-alert-error-title);
+  --pf-error-text-secondary: var(--tri-foreground);
 }
 
-/* Highlight marks in results */
-pagefind-results mark {
-  background-color: var(--color-yellow-200);
-  color: inherit;
-  padding: 0 0.125rem;
-  border-radius: 0.125rem;
-}
+@layer docs {
+  pagefind-results li {
+    border-color: var(--tri-border);
+  }
+
+  pagefind-results a {
+    color: var(--tri-primary);
+  }
+
+  pagefind-results p {
+    color: var(--tri-foreground);
+  }
+
+  pagefind-results .text-xs,
+  #search-placeholder {
+    color: var(--tri-muted-foreground);
+  }
 
-.dark pagefind-results mark {
-  background-color: rgba(255, 204, 72, 0.3);
-  color: white;
+  pagefind-results mark {
+    background: var(--tri-accent-subtle);
+    color: var(--tri-foreground);
+    font-weight: var(--tri-font-weight-semibold);
+    padding: 0 0.125rem;
+    border-radius: 0.125rem;
+  }
 }
diff --git a/assets/css/style.css b/assets/css/style.css
index f63fc6f5aec2..8a22279a000d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,15 +1,84 @@
 /* Main CSS entry point */
+@layer theme, tri, base, components, utilities, docs;
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 @source "hugo_stats.json";
 
+/* manrope-cyrillic-ext-wght-normal */
 @font-face {
-  font-family: "Roboto Flex";
-  src: url("/assets/fonts/RobotoFlex.woff2") format("woff2");
-  font-weight: 100 1000; /* Range of weights Roboto Flex supports */
-  font-stretch: 100%; /* Range of width Roboto Flex supports */
-  font-style: oblique 0deg 10deg; /* Range of oblique angle Roboto Flex supports */
-  font-display: fallback;
+  font-family: "Manrope Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(/assets/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* manrope-cyrillic-wght-normal */
+@font-face {
+  font-family: "Manrope Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(/assets/fonts/manrope/manrope-cyrillic-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* manrope-greek-wght-normal */
+@font-face {
+  font-family: "Manrope Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(/assets/fonts/manrope/manrope-greek-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+/* manrope-vietnamese-wght-normal */
+@font-face {
+  font-family: "Manrope Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(/assets/fonts/manrope/manrope-vietnamese-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
+    U+1EA0-1EF9, U+20AB;
+}
+
+/* manrope-latin-ext-wght-normal */
+@font-face {
+  font-family: "Manrope Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(/assets/fonts/manrope/manrope-latin-ext-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
+    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* manrope-latin-wght-normal */
+@font-face {
+  font-family: "Manrope Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 800;
+  src: url(/assets/fonts/manrope/manrope-latin-wght-normal.woff2)
+    format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
+    U+2215, U+FEFF, U+FFFD;
 }
 
 /* Roboto Mono */
@@ -30,9 +99,10 @@
   font-display: fallback;
 }
 
-@layer theme {
-  @import "theme.css";
-}
+@import "theme.css";
+@import "vendor/trident/tri-tokens.css";
+@import "trident.css";
+@import "home.css";
 
 @layer base {
   @import "global.css";
@@ -42,6 +112,8 @@
 @import "syntax-dark.css";
 @import "syntax-light.css";
 @import "components.css";
-@import "highlight-github-dark.css";
+@layer components {
+  @import "highlight-github-dark.css";
+}
 
 @variant dark (&:where(.dark, .dark *));
diff --git a/assets/css/trident.css b/assets/css/trident.css
new file mode 100644
index 000000000000..072f89d9c542
--- /dev/null
+++ b/assets/css/trident.css
@@ -0,0 +1,609 @@
+/* Docs adapter. Keep the upstream snapshot untouched; migrate legacy aliases here. */
+@theme inline {
+  --default-font-family: var(--tri-font-family-sans);
+  --font-mono: "Roboto Mono", ui-monospace, monospace;
+  --color-blue: var(--tri-primary);
+  --color-primary-blue: var(--tri-primary);
+  --color-gray: var(--tri-muted-foreground);
+  --color-background-light: var(--tri-background);
+  --color-background-dark: var(--tri-background);
+  --color-navbar-bg: var(--tri-sidebar);
+  --color-navbar-bg-dark: var(--tri-sidebar);
+  --color-navbar-text: var(--tri-sidebar-foreground-muted);
+  --color-navbar-text-dark: var(--tri-sidebar-foreground-muted);
+  --color-divider-light: var(--tri-border);
+  --color-divider-dark: var(--tri-border);
+}
+
+/* This layer follows utilities so legacy light/dark classes cannot override
+   semantic pairs on the components migrated by this prototype. */
+@layer docs {
+  :root {
+    --docs-card-description: var(--tri-gray-700);
+    /* Surface material from Trident core tri-materials.css. */
+    --docs-card-shadow: 0 0 transparent;
+    --docs-component-background: var(--tri-background-primary);
+    --docs-code-background: var(--tri-background);
+    --docs-reading-foreground: var(--tri-foreground);
+    --docs-reading-background: var(--tri-background-primary);
+    --docs-inline-code-bg: color-mix(
+      in oklab,
+      var(--tri-foreground) 5%,
+      var(--docs-reading-background)
+    );
+    --navbar-font-size: var(--tri-scale-label-font-size);
+    --tw-prose-code-bg: var(--tri-muted);
+    --tw-prose-code-bg-dark: var(--tri-muted);
+    color-scheme: light;
+  }
+
+  :root.dark {
+    --docs-card-description: var(--tri-gray-300);
+    --docs-card-shadow: inset 0 1px 0 oklch(1 0 0 / 0.05);
+    --docs-code-background: var(--tri-muted);
+    --docs-reading-background: var(--tri-sidebar);
+    color-scheme: dark;
+  }
+
+  body {
+    font-family: var(--tri-font-family-sans);
+    font-weight: var(--tri-font-weight-body);
+  }
+
+  .docs-body,
+  .docs-content {
+    background: var(--tri-background);
+    color: var(--tri-foreground);
+  }
+
+  .docs-content {
+    background: var(--docs-reading-background);
+  }
+
+  .docs-sidebar {
+    border-right: 1px solid var(--tri-border-subtle);
+  }
+
+  .docs-aside {
+    border-left: 1px solid var(--tri-border-subtle);
+    padding-left: 1rem;
+  }
+
+  .docs-header {
+    background: var(--tri-sidebar);
+    color: var(--tri-foreground);
+    border-bottom: 1px solid var(--tri-border);
+  }
+
+  .docs-logo path {
+    fill: currentColor;
+  }
+
+  .docs-header nav li {
+    border-bottom-width: 2px;
+  }
+
+  .docs-header nav li:not(.border-transparent) {
+    color: var(--tri-primary);
+    border-color: var(--tri-primary);
+  }
+
+  .docs-header nav li:hover {
+    color: var(--tri-primary);
+    border-color: var(--tri-border-accent);
+  }
+
+  .docs-header #buttons button {
+    background: var(--tri-background);
+    color: var(--tri-foreground);
+    border: 1px solid var(--tri-border);
+    border-radius: var(--tri-radius-default);
+    font-weight: var(--tri-font-weight-label);
+  }
+
+  .docs-header #buttons button:hover {
+    background: var(--tri-action-hover);
+  }
+
+  .docs-header .shimmer::after {
+    display: none;
+  }
+
+  :where(a, button, input, select, textarea, summary):focus-visible {
+    outline: 2px solid var(--tri-ring);
+    outline-offset: 3px;
+  }
+
+  .navbar-group-font-title {
+    color: var(--tri-sidebar-foreground-muted);
+    text-transform: none;
+    font-weight: var(--tri-font-weight-label);
+  }
+
+  .navbar-entry-background-current {
+    background: var(--tri-accent-subtle);
+    color: var(--tri-foreground);
+    border-radius: var(--tri-radius-default);
+  }
+
+  .navbar-font a:hover {
+    color: var(--tri-sidebar-foreground);
+  }
+
+  .navbar-entry-background-current a[aria-current="page"] {
+    color: var(--tri-foreground);
+    font-weight: var(--tri-font-weight-semibold);
+  }
+
+  .prose {
+    --tw-prose-body: var(--docs-reading-foreground);
+    --tw-prose-headings: var(--tri-foreground);
+    --tw-prose-links: var(--tri-primary);
+    --tw-prose-bold: var(--tri-foreground);
+    --tw-prose-counters: var(--tri-muted-foreground);
+    --tw-prose-bullets: var(--tri-muted-foreground);
+    --tw-prose-hr: var(--tri-border);
+    --tw-prose-quotes: var(--docs-reading-foreground);
+    --tw-prose-quote-borders: var(--tri-border);
+    --tw-prose-captions: var(--tri-muted-foreground);
+    --tw-prose-code: var(--tri-foreground);
+    --tw-prose-th-borders: var(--tri-border);
+    --tw-prose-td-borders: var(--tri-border);
+    font-size: var(--tri-scale-body-font-size);
+    line-height: var(--tri-scale-body-line-height);
+    letter-spacing: var(--tri-scale-body-letter-spacing);
+  }
+
+  .prose :is(h1, h2, h3, h4) {
+    font-weight: var(--tri-font-weight-heading);
+    line-height: var(--tri-line-height-tight);
+  }
+
+  .prose h1 {
+    font-size: var(--tri-scale-heading-1-font-size);
+    letter-spacing: var(--tri-scale-heading-1-letter-spacing);
+  }
+
+  .prose h2 {
+    font-size: var(--tri-scale-heading-3-font-size);
+    letter-spacing: var(--tri-scale-heading-3-letter-spacing);
+  }
+
+  .prose h3 {
+    font-size: var(--tri-scale-heading-4-font-size);
+    letter-spacing: var(--tri-scale-heading-4-letter-spacing);
+  }
+
+  .link {
+    color: var(--tri-primary);
+  }
+
+  .toc a {
+    color: var(--tri-muted-foreground);
+    background: none;
+    border-left: 2px solid transparent;
+  }
+
+  .toc a[aria-current="true"],
+  .toc a:hover {
+    color: var(--tri-primary);
+    border-left-color: var(--tri-primary);
+  }
+
+  .prose [marlin-action] {
+    color: var(--tri-muted-foreground);
+  }
+
+  .prose [marlin-action]:hover {
+    color: var(--tri-foreground);
+  }
+
+  .card,
+  .section-card {
+    background: var(--docs-component-background);
+    color: var(--tri-card-foreground);
+    border-color: var(--tri-border);
+    border-radius: var(--tri-radius-lg);
+    filter: none;
+  }
+
+  .card:hover,
+  .card:focus-within,
+  .section-card:hover,
+  .section-card:focus-visible {
+    border-color: var(--tri-primary);
+  }
+
+  .card-header,
+  .card-icon,
+  .section-card-title {
+    color: var(--tri-card-foreground);
+  }
+
+  .card-description,
+  .section-card-text {
+    color: var(--tri-foreground);
+  }
+
+  .button {
+    background: var(--tri-primary);
+    color: var(--tri-primary-foreground);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+    border-radius: var(--tri-radius-default);
+    font-weight: var(--tri-font-weight-label);
+    text-decoration: none;
+  }
+
+  .button:hover {
+    background: var(--tri-primary);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  .tabs,
+  .summary-bar {
+    background: var(--docs-component-background);
+    border: 1px solid var(--tri-border);
+    border-radius: var(--tri-radius-lg);
+  }
+
+  .tablist {
+    display: flex;
+    overflow-x: auto;
+    padding: 3px;
+    border-color: var(--tri-border);
+  }
+
+  .tab-item {
+    flex-shrink: 0;
+    border-bottom: 2px solid transparent;
+    color: var(--tri-muted-foreground);
+    font-weight: var(--tri-font-weight-label);
+  }
+
+  .tab-item:hover {
+    background: var(--tri-action-hover);
+    color: var(--tri-foreground);
+  }
+
+  .tab-item.border-b-4 {
+    color: var(--tri-primary);
+    border-color: var(--tri-primary);
+    border-bottom-width: 2px;
+  }
+
+  .docs-navigation-card {
+    min-width: 0;
+    margin: 0;
+    padding: 1.25rem;
+    gap: 0;
+    background: var(--tri-background-paper-elevation-0);
+    border: 1px solid var(--tri-border);
+    box-shadow: var(--docs-card-shadow);
+    border-radius: var(--tri-radius-default);
+  }
+
+  .docs-navigation-card:has(> .card-link) {
+    padding: 0;
+  }
+
+  .docs-navigation-card > .card-link {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 1.25rem;
+    border-radius: inherit;
+  }
+
+  .card-header {
+    align-items: flex-start;
+    margin: 0 0 0.5rem;
+  }
+
+  .docs-navigation-card .docs-card-label {
+    margin: 0 0 0.5rem;
+    color: var(--tri-muted-foreground);
+    font-size: 0.75rem;
+    line-height: 1.5;
+  }
+
+  .docs-navigation-card .card-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: var(--tri-font-weight-semibold);
+    line-height: 1.4;
+    letter-spacing: normal;
+  }
+
+  .docs-navigation-card .card-description {
+    margin: 0;
+    color: var(--docs-card-description);
+    font-size: 0.875rem;
+    line-height: 1.6;
+    letter-spacing: normal;
+  }
+
+  .docs-navigation-card:has(> .card-link):hover .card-title,
+  .docs-navigation-card:focus-within .card-title {
+    color: var(--tri-primary);
+  }
+
+  .docs-code {
+    background: var(--docs-code-background);
+    outline-color: var(--tri-border);
+    border-radius: var(--tri-radius-default);
+    color: var(--tri-foreground);
+  }
+
+  .docs-code pre,
+  .docs-code code {
+    background: transparent;
+    color: inherit;
+  }
+
+  /* Chroma and Gordon's highlight.js share the same syntax roles. */
+  :is(.docs-code, #gordon-chat)
+    :is(.k, .kc, .kd, .kn, .kp, .kr, .ow, .hljs-keyword, .hljs-literal) {
+    color: var(--tri-syntax-keyword);
+  }
+
+  :is(.docs-code, #gordon-chat)
+    :is(
+      .s,
+      .s1,
+      .s2,
+      .sa,
+      .sb,
+      .sc,
+      .sd,
+      .se,
+      .sh,
+      .si,
+      .sr,
+      .ss,
+      .sx,
+      .hljs-string,
+      .hljs-regexp
+    ) {
+    color: var(--tri-syntax-string);
+  }
+
+  :is(.docs-code, #gordon-chat)
+    :is(.m, .mb, .mf, .mh, .mi, .il, .mo, .hljs-number) {
+    color: var(--tri-syntax-number);
+  }
+
+  :is(.docs-code, #gordon-chat)
+    :is(.na, .nt, .cp, .cpf, .hljs-attr, .hljs-attribute, .hljs-meta) {
+    color: var(--tri-syntax-attr);
+  }
+
+  :is(.docs-code, #gordon-chat)
+    :is(.nb, .nf, .fm, .hljs-built_in, .hljs-title) {
+    color: var(--tri-syntax-command);
+  }
+
+  :is(.docs-code, #gordon-chat) :is(.kt, .nc, .nn, .hljs-type) {
+    color: var(--tri-syntax-type);
+  }
+
+  :is(.docs-code, #gordon-chat)
+    :is(.c, .c1, .cm, .cs, .ch, .hljs-comment, .hljs-quote) {
+    color: var(--tri-muted-foreground);
+  }
+
+  :is(.docs-code, #gordon-chat)
+    :is(.n, .nv, .no, .p, .o, .go, .gp, .hljs-variable, .hljs-subst) {
+    color: var(--tri-foreground);
+  }
+
+  .gordon-error {
+    background: var(--tri-alert-error-bg);
+    border-color: var(--tri-alert-error-border);
+    color: var(--tri-alert-error-title);
+  }
+
+  .gordon-warning {
+    background: var(--tri-alert-warning-bg);
+    border-color: var(--tri-alert-warning-border);
+    color: var(--tri-alert-warning-title);
+  }
+
+  .gordon-limit {
+    background: var(--tri-alert-info-bg);
+    border-color: var(--tri-alert-info-border);
+    color: var(--tri-foreground);
+  }
+
+  .gordon-limit button {
+    background: var(--tri-primary);
+    color: var(--tri-primary-foreground);
+  }
+
+  .docs-code .cl {
+    color: var(--tri-foreground);
+  }
+
+  .docs-code :is(.ln, .lnt) {
+    color: var(--tri-muted-foreground);
+  }
+
+  .docs-code .hl {
+    background: var(--tri-accent-subtle);
+  }
+
+  .docs-code-title {
+    background: var(--tri-muted);
+    color: var(--tri-muted-foreground);
+  }
+
+  .docs-code-title > div {
+    color: inherit;
+  }
+
+  .docs-code button[title="copy"] {
+    color: var(--tri-muted-foreground);
+    background: var(--docs-code-background);
+    border-radius: var(--tri-radius-default);
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+  }
+
+  .docs-code button[title="copy"]:focus-visible .icon-svg:first-child {
+    display: block;
+  }
+
+  #gordon-chat {
+    background: var(--tri-popover);
+    color: var(--tri-popover-foreground);
+    border-left: 1px solid var(--tri-border);
+    height: 100dvh;
+  }
+
+  #gordon-chat .gordon-muted {
+    color: var(--tri-muted-foreground);
+  }
+
+  .gordon-feedback {
+    background: var(--tri-secondary);
+    color: var(--tri-secondary-foreground);
+    border: 1px solid var(--tri-border);
+  }
+
+  .gordon-feedback:hover,
+  .gordon-feedback[aria-pressed="true"] {
+    background: var(--tri-accent-subtle);
+    color: var(--tri-primary);
+    border-color: var(--tri-primary);
+    box-shadow: none;
+  }
+
+  #gordon-chat button[type="submit"] {
+    color: var(--tri-primary);
+  }
+
+  #gordon-chat button[type="submit"]:disabled {
+    color: var(--tri-muted-foreground);
+  }
+
+  .gordon-header {
+    background: linear-gradient(
+      to right,
+      var(--tri-header-from),
+      var(--tri-header-to)
+    );
+    color: var(--tri-header-foreground);
+    box-shadow: none;
+    border-bottom: 1px solid var(--tri-border);
+  }
+
+  .gordon-suggestion {
+    background: var(--docs-component-background);
+    color: var(--tri-foreground);
+    border-color: var(--tri-border);
+    border-radius: var(--tri-radius-default);
+    text-align: left;
+  }
+
+  .gordon-suggestion:hover {
+    border-color: var(--tri-primary);
+    background: var(--tri-accent-subtle);
+    transform: none;
+  }
+
+  .gordon-suggestion .icon-svg {
+    background: var(--tri-accent-subtle);
+    color: var(--tri-primary);
+  }
+
+  #gordon-chat textarea {
+    background: var(--tri-input-bg);
+    color: var(--tri-foreground);
+    border-color: var(--tri-input);
+    padding-right: 3.5rem;
+    border-radius: var(--tri-radius-default);
+  }
+
+  #gordon-chat textarea::placeholder {
+    color: var(--tri-muted-foreground);
+  }
+
+  #gordon-chat textarea:focus {
+    border-color: var(--tri-ring);
+    outline: 2px solid var(--tri-ring);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  #gordon-chat textarea:enabled:hover {
+    border-color: var(--tri-ring);
+  }
+
+  .gordon-message {
+    background: var(--docs-component-background);
+    color: var(--tri-foreground);
+    border: 1px solid var(--tri-border);
+    border-radius: var(--tri-radius-lg);
+  }
+
+  .gordon-message-user {
+    background: var(--tri-accent-subtle);
+    border-color: var(--tri-border-accent);
+  }
+
+  .gordon-disclaimer {
+    background: var(--tri-sidebar);
+    color: var(--tri-muted-foreground);
+    border-top: 1px solid var(--tri-border);
+  }
+
+  .admonition {
+    --docs-callout-border: var(--tri-border);
+    --docs-callout-bg: var(--tri-card);
+    --docs-callout-title: var(--tri-foreground);
+    border: 1px solid var(--docs-callout-border);
+    border-radius: var(--tri-radius-lg);
+    background: var(--docs-callout-bg);
+    color: var(--docs-reading-foreground);
+  }
+
+  .admonition-header {
+    color: var(--docs-callout-title);
+  }
+
+  /* Trident alerts keep body copy neutral and strong on tinted surfaces. */
+  .admonition-content,
+  .admonition strong {
+    color: var(--tri-foreground);
+  }
+
+  .admonition-note {
+    --docs-callout-border: var(--tri-alert-info-border);
+    --docs-callout-bg: var(--tri-alert-info-bg);
+    --docs-callout-title: var(--tri-alert-info-title);
+  }
+
+  .admonition-tip {
+    --docs-callout-border: var(--tri-alert-success-border);
+    --docs-callout-bg: var(--tri-alert-success-bg);
+    --docs-callout-title: var(--tri-alert-success-title);
+  }
+
+  .admonition-warning {
+    --docs-callout-border: var(--tri-alert-warning-border);
+    --docs-callout-bg: var(--tri-alert-warning-bg);
+    --docs-callout-title: var(--tri-alert-warning-title);
+  }
+
+  .admonition-danger {
+    --docs-callout-border: var(--tri-alert-error-border);
+    --docs-callout-bg: var(--tri-alert-error-bg);
+    --docs-callout-title: var(--tri-alert-error-title);
+  }
+
+  .admonition-important {
+    --docs-callout-border: var(--tri-alert-premium-border);
+    --docs-callout-bg: var(--tri-alert-premium-bg);
+    --docs-callout-title: var(--tri-alert-premium-title);
+  }
+}
diff --git a/assets/css/utilities.css b/assets/css/utilities.css
index 819af1bf9880..628c8caa806b 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -108,17 +108,21 @@
   }
 
   /* code in `inline code` style */
-  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)),
+  :where(code):not(:where(pre *, [class~="not-prose"], [class~="not-prose"] *)),
   a > code {
+    overflow-wrap: anywhere;
     font-size: 0.875em;
     font-weight: 400 !important;
     border: 1px solid !important;
     border-radius: 0.25rem;
     border: none !important;
-    padding: 4px !important;
-    background: var(--tw-prose-code-bg) !important;
+    padding: 0.1em 0.25em !important;
+    background: var(--docs-inline-code-bg, var(--tw-prose-code-bg)) !important;
     .dark & {
-      background: var(--tw-prose-code-bg-dark) !important;
+      background: var(
+        --docs-inline-code-bg,
+        var(--tw-prose-code-bg-dark)
+      ) !important;
     }
     &::before,
     &::after {
diff --git a/assets/css/vendor/trident/manifest.json b/assets/css/vendor/trident/manifest.json
new file mode 100644
index 000000000000..9c9cc19b38d5
--- /dev/null
+++ b/assets/css/vendor/trident/manifest.json
@@ -0,0 +1,19 @@
+{
+  "package": "@docker/trident-tokens",
+  "version": "2.0.0-beta.3",
+  "repository": "https://github.com/docker/trident",
+  "revision": "bbc0746b17209071ceddabcb14b180fcb32b2fa9",
+  "license": null,
+  "files": {
+    "tri-component.css": "21d6c0ca2a19b17b3ad7e6ce9fd19e5014344fdeabbc707c7f46181a74236bd6",
+    "tri-elevation.css": "935c565c62ea6409c17cf0874ebaceab29298d363c7261eafafb6e7a0f92ab7a",
+    "tri-motion.css": "bde397fd1484793a8bb6007a69d224ac2470f1f7ff5eb1e3080a507826f2fe8f",
+    "tri-primitives.css": "ff0f3f18db01cbf26fa9d790b38e64f56bde491541f641d9423c5c50b0c057e4",
+    "tri-radius.css": "bc026830e2af72566d0c5dfaa1a68918ddfee08f7e9585f88869f831b0422a5e",
+    "tri-semantic.css": "71a19fcc11b8dd8ac9a79a2bb753e83827e3abc81b30367ea553349c923991a3",
+    "tri-spacing.css": "e2f09390c1a4523b0c6e24a30588376c6d54ffca8f8e7415438fbbfb45fb1cc5",
+    "tri-themes.css": "2365ca5871714ead9fb291a35cd6e208e0f79d2ec98b18614d5572685db925cd",
+    "tri-tokens.css": "af50705ffffed685a1e648130c2374b2d52445262451ff674072b93337112b22",
+    "tri-typography.css": "67f573500db670818e8b0e282ee9497e9fa444233cb5e2217567bd4f3501f94b"
+  }
+}
diff --git a/assets/css/vendor/trident/tri-component.css b/assets/css/vendor/trident/tri-component.css
new file mode 100644
index 000000000000..ef6580b5079d
--- /dev/null
+++ b/assets/css/vendor/trident/tri-component.css
@@ -0,0 +1,50 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+
+@layer tri.component {
+:root {
+  --tri-border-offset: 2px;
+  --tri-button-error: oklch(0.566 0.208 23);
+  --tri-button-premium: oklch(0.548 0.275 291.4);
+  --tri-button-primary: oklch(0.546 0.219 262);
+  --tri-button-secondary: oklch(0.55 0.016 245);
+  --tri-button-success: oklch(0.481 0.077 179.4);
+  --tri-button-warning: oklch(0.443 0.125 43.7);
+  --tri-button-white: oklch(1 0 0);
+  --tri-height-app-header-default: 3.5rem;
+  --tri-height-tab-indicator-inset: 1px;
+  --tri-repo-card-hover-border: oklch(0.546 0.219 262 / 0.56);
+  --tri-shadow-glow-error: 0 0 4px 0px oklch(0.69 0.199 22.3 / 0.70), 0 0 12px 2px oklch(0.69 0.199 22.3 / 0.25);
+  --tri-shadow-glow-running: 0 0 4px 0px oklch(0.720 0.170 145 / 0.70), 0 0 12px 2px oklch(0.720 0.170 145 / 0.25);
+  --tri-shadow-glow-warning: 0 0 4px 0px oklch(0.666 0.158 55.8 / 0.65), 0 0 12px 2px oklch(0.666 0.158 55.8 / 0.20);
+  --tri-spacing-tabs-inner: 3px;
+  --tri-tooltip-tooltip: oklch(0.462 0.014 245);
+  --tri-width-context-switcher: 220px;
+  --tri-width-date-picker-md: 300px;
+  --tri-width-date-picker-sm: 280px;
+  --tri-width-sidebar-collapsed: 3rem;
+  --tri-width-sidebar-default: 16rem;
+  --tri-width-sidebar-expanded: 18rem;
+}
+
+.dark {
+  --tri-button-error: oklch(0.642 0.183 16.8);
+  --tri-button-premium: oklch(0.664 0.2 297.3);
+  --tri-button-primary: oklch(0.633 0.199 257.2);
+  --tri-button-secondary: oklch(0.661 0.014 245);
+  --tri-button-success: oklch(0.735 0.117 180.8);
+  --tri-button-warning: oklch(0.817 0.137 65.7);
+  --tri-repo-card-hover-border: oklch(0.633 0.199 257.2 / 0.56);
+  --tri-tooltip-tooltip: oklch(0.661 0.014 245);
+}
+
+.high-contrast {
+  --tri-button-error: oklch(0.952 0.021 17.5);
+  --tri-button-premium: oklch(0.957 0.028 311.3);
+  --tri-button-primary: oklch(0.954 0.019 240.7);
+  --tri-button-secondary: oklch(0.661 0.014 245);
+  --tri-button-success: oklch(0.958 0.016 187.3);
+  --tri-button-warning: oklch(0.969 0.034 86.3);
+  --tri-tooltip-tooltip: oklch(0.661 0.014 245);
+}
+}
diff --git a/assets/css/vendor/trident/tri-elevation.css b/assets/css/vendor/trident/tri-elevation.css
new file mode 100644
index 000000000000..6ce1a46d9cd5
--- /dev/null
+++ b/assets/css/vendor/trident/tri-elevation.css
@@ -0,0 +1,35 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+
+@layer tri.elevation {
+:root {
+  --tri-elevation-floating-shadow: 0px 4px 6px -1px oklch(0 0 0 / 0.10), 0px 2px 4px -2px oklch(0 0 0 / 0.10);
+  --tri-elevation-floating-z: var(--tri-z-sticky);
+  --tri-elevation-modal-shadow: 0px 20px 25px -5px oklch(0 0 0 / 0.10), 0px 8px 10px -6px oklch(0 0 0 / 0.10);
+  --tri-elevation-modal-z: var(--tri-z-modal);
+  --tri-elevation-overlay-shadow: 0px 10px 15px -3px oklch(0 0 0 / 0.10), 0px 4px 6px -4px oklch(0 0 0 / 0.10);
+  --tri-elevation-overlay-z: var(--tri-z-overlay);
+  --tri-elevation-raised-shadow: 0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 1px 2px -1px oklch(0 0 0 / 0.10);
+  --tri-elevation-raised-z: var(--tri-z-dropdown);
+  --tri-elevation-toast-shadow: 0px 20px 25px -5px oklch(0 0 0 / 0.10), 0px 8px 10px -6px oklch(0 0 0 / 0.10);
+  --tri-elevation-toast-z: var(--tri-z-toast);
+}
+}
+
+@theme inline {
+  --z-raised: var(--tri-elevation-raised-z);
+  --z-floating: var(--tri-elevation-floating-z);
+  --z-overlay: var(--tri-elevation-overlay-z);
+  --z-modal: var(--tri-elevation-modal-z);
+  --z-toast: var(--tri-elevation-toast-z);
+  --z-sticky: var(--tri-z-sticky);
+  --z-dropdown: var(--tri-z-dropdown);
+}
+
+@utility z-raised { z-index: var(--tri-elevation-raised-z); }
+@utility z-floating { z-index: var(--tri-elevation-floating-z); }
+@utility z-overlay { z-index: var(--tri-elevation-overlay-z); }
+@utility z-modal { z-index: var(--tri-elevation-modal-z); }
+@utility z-toast { z-index: var(--tri-elevation-toast-z); }
+@utility z-sticky { z-index: var(--tri-z-sticky); }
+@utility z-dropdown { z-index: var(--tri-z-dropdown); }
diff --git a/assets/css/vendor/trident/tri-motion.css b/assets/css/vendor/trident/tri-motion.css
new file mode 100644
index 000000000000..98e18507138d
--- /dev/null
+++ b/assets/css/vendor/trident/tri-motion.css
@@ -0,0 +1,45 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+@layer tri.motion {
+:root {
+  --tri-duration-expressive: 200ms;
+  --tri-duration-fast: 100ms;
+  --tri-duration-instant: 50ms;
+  --tri-duration-normal: 200ms;
+  --tri-duration-productive: 120ms;
+  --tri-duration-slow: 300ms;
+  --tri-duration-slower: 500ms;
+  --tri-duration-structural: 300ms;
+  --tri-ease-default: cubic-bezier(0.2, 0, 0, 1);
+  --tri-ease-expressive: cubic-bezier(0.2, 0, 0, 1);
+  --tri-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --tri-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --tri-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --tri-ease-productive: cubic-bezier(0.2, 0, 0.4, 1);
+}
+}
+@theme inline {
+  --duration-expressive: var(--tri-duration-expressive);
+  --duration-fast: var(--tri-duration-fast);
+  --duration-instant: var(--tri-duration-instant);
+  --duration-normal: var(--tri-duration-normal);
+  --duration-productive: var(--tri-duration-productive);
+  --duration-slow: var(--tri-duration-slow);
+  --duration-slower: var(--tri-duration-slower);
+  --duration-structural: var(--tri-duration-structural);
+  --ease-default: var(--tri-ease-default);
+  --ease-expressive: var(--tri-ease-expressive);
+  --ease-in: var(--tri-ease-in);
+  --ease-in-out: var(--tri-ease-in-out);
+  --ease-out: var(--tri-ease-out);
+  --ease-productive: var(--tri-ease-productive);
+}
+
+@utility duration-expressive { transition-duration: var(--tri-duration-expressive); }
+@utility duration-fast { transition-duration: var(--tri-duration-fast); }
+@utility duration-instant { transition-duration: var(--tri-duration-instant); }
+@utility duration-normal { transition-duration: var(--tri-duration-normal); }
+@utility duration-productive { transition-duration: var(--tri-duration-productive); }
+@utility duration-slow { transition-duration: var(--tri-duration-slow); }
+@utility duration-slower { transition-duration: var(--tri-duration-slower); }
+@utility duration-structural { transition-duration: var(--tri-duration-structural); }
diff --git a/assets/css/vendor/trident/tri-primitives.css b/assets/css/vendor/trident/tri-primitives.css
new file mode 100644
index 000000000000..0f5fe2c34832
--- /dev/null
+++ b/assets/css/vendor/trident/tri-primitives.css
@@ -0,0 +1,163 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+
+@layer tri.primitives {
+:root {
+  --tri-black-100: oklch(0 0 0);
+  --tri-black-12: oklch(0 0 0 / 0.12);
+  --tri-black-16: oklch(0 0 0 / 0.16);
+  --tri-black-24: oklch(0 0 0 / 0.24);
+  --tri-black-32: oklch(0 0 0 / 0.32);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-black-4: oklch(0 0 0 / 0.04);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-black-40: oklch(0 0 0 / 0.4);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-black-56: oklch(0 0 0 / 0.56);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-black-64: oklch(0 0 0 / 0.64);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-black-8: oklch(0 0 0 / 0.08);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-black-80: oklch(0 0 0 / 0.8);
+  --tri-black-main: oklch(0 0 0);
+  --tri-blue-100: oklch(0.933 0.029 241.4);
+  --tri-blue-200: oklch(0.892 0.049 242.8);
+  --tri-blue-300: oklch(0.806 0.09 242.2);
+  --tri-blue-400: oklch(0.64 0.169 249.4);
+  --tri-blue-450: oklch(0.633 0.199 257.2);
+  --tri-blue-50: oklch(0.954 0.019 240.7);
+  --tri-blue-500: oklch(0.546 0.219 262);
+  --tri-blue-600: oklch(0.455 0.198 262.2);
+  --tri-blue-700: oklch(0.353 0.161 261.8);
+  --tri-blue-800: oklch(0.208 0.081 259.1);
+  --tri-blue-900: oklch(0.204 0.122 264.1);
+  --tri-gray-100: oklch(0.968 0.005 245);
+  --tri-gray-200: oklch(0.913 0.007 245);
+  --tri-gray-300: oklch(0.832 0.01 245);
+  --tri-gray-400: oklch(0.661 0.014 245);
+  --tri-gray-50: oklch(0.985 0.004 245);
+  --tri-gray-500: oklch(0.55 0.016 245);
+  --tri-gray-600: oklch(0.462 0.014 245);
+  --tri-gray-700: oklch(0.366 0.012 245);
+  --tri-gray-775: oklch(0.23 0.014 245);
+  --tri-gray-800: oklch(0.214 0.008 245);
+  --tri-gray-850: oklch(0.2 0.014 245);
+  --tri-gray-900: oklch(0.184 0.008 245);
+  --tri-gray-925: oklch(0.16 0.012 245);
+  --tri-gray-950: oklch(0.1 0.008 245);
+  --tri-green-100: oklch(0.909 0.039 178.6);
+  --tri-green-200: oklch(0.817 0.082 175);
+  --tri-green-300: oklch(0.73 0.089 176.7);
+  --tri-green-400: oklch(0.642 0.097 178.3);
+  --tri-green-50: oklch(0.958 0.016 187.3);
+  --tri-green-500: oklch(0.544 0.08 182.8);
+  --tri-green-600: oklch(0.481 0.077 179.4);
+  --tri-green-700: oklch(0.424 0.066 182.1);
+  --tri-green-800: oklch(0.268 0.038 183.9);
+  --tri-lime-100: oklch(0.91 0.06 145);
+  --tri-lime-200: oklch(0.85 0.1 145);
+  --tri-lime-300: oklch(0.79 0.14 145);
+  --tri-lime-400: oklch(0.72 0.17 145);
+  --tri-lime-50: oklch(0.96 0.03 145);
+  --tri-lime-500: oklch(0.61 0.19 145);
+  --tri-lime-600: oklch(0.5 0.2 145);
+  --tri-lime-700: oklch(0.4 0.17 145);
+  --tri-lime-800: oklch(0.27 0.11 145);
+  --tri-orange-100: oklch(0.919 0.078 85.1);
+  --tri-orange-200: oklch(0.821 0.14 72.9);
+  --tri-orange-300: oklch(0.747 0.15 65.3);
+  --tri-orange-400: oklch(0.673 0.16 57.7);
+  --tri-orange-450: oklch(0.666 0.158 55.8);
+  --tri-orange-50: oklch(0.969 0.034 86.3);
+  --tri-orange-500: oklch(0.564 0.149 49.6);
+  --tri-orange-600: oklch(0.52 0.143 44.4);
+  --tri-orange-700: oklch(0.443 0.125 43.7);
+  --tri-orange-800: oklch(0.274 0.071 48.2);
+  --tri-pink-100: oklch(0.933 0.054 331.4);
+  --tri-pink-200: oklch(0.897 0.084 332);
+  --tri-pink-300: oklch(0.836 0.139 333);
+  --tri-pink-400: oklch(0.69 0.245 329.8);
+  --tri-pink-50: oklch(0.951 0.039 331.1);
+  --tri-pink-500: oklch(0.587 0.256 330.8);
+  --tri-pink-600: oklch(0.516 0.234 330.6);
+  --tri-pink-700: oklch(0.426 0.195 329.6);
+  --tri-pink-800: oklch(0.268 0.122 331.2);
+  --tri-red-100: oklch(0.922 0.039 17.2);
+  --tri-red-200: oklch(0.861 0.075 16.7);
+  --tri-red-300: oklch(0.773 0.134 18.9);
+  --tri-red-400: oklch(0.69 0.199 22.3);
+  --tri-red-50: oklch(0.952 0.021 17.5);
+  --tri-red-500: oklch(0.566 0.208 23);
+  --tri-red-600: oklch(0.507 0.184 21.7);
+  --tri-red-700: oklch(0.416 0.148 22.1);
+  --tri-red-800: oklch(0.225 0.068 16.7);
+  --tri-shadow-2xl: 0px 25px 50px -12px oklch(0 0 0 / 0.25);
+  --tri-shadow-2xs: 0px 1px 0px 0px oklch(0 0 0 / 0.05);
+  --tri-shadow-lg: 0px 10px 15px -3px oklch(0 0 0 / 0.10), 0px 4px 6px -4px oklch(0 0 0 / 0.10);
+  --tri-shadow-md: 0px 4px 6px -1px oklch(0 0 0 / 0.10), 0px 2px 4px -2px oklch(0 0 0 / 0.10);
+  --tri-shadow-sm: 0px 1px 3px 0px oklch(0 0 0 / 0.10), 0px 1px 2px -1px oklch(0 0 0 / 0.10);
+  --tri-shadow-xl: 0px 20px 25px -5px oklch(0 0 0 / 0.10), 0px 8px 10px -6px oklch(0 0 0 / 0.10);
+  --tri-shadow-xs: 0px 1px 2px 0px oklch(0 0 0 / 0.05);
+  --tri-terminal-blue-300: oklch(0.74 0.17 262);
+  --tri-terminal-blue-400: oklch(0.68 0.18 262);
+  --tri-terminal-blue-600: oklch(0.44 0.18 262);
+  --tri-terminal-blue-700: oklch(0.4 0.17 262);
+  --tri-terminal-cyan-300: oklch(0.78 0.09 195);
+  --tri-terminal-cyan-400: oklch(0.72 0.1 195);
+  --tri-terminal-cyan-600: oklch(0.4 0.1 195);
+  --tri-terminal-cyan-700: oklch(0.36 0.09 195);
+  --tri-terminal-green-300: oklch(0.78 0.15 155);
+  --tri-terminal-green-400: oklch(0.72 0.17 145);
+  --tri-terminal-green-600: oklch(0.38 0.15 145);
+  --tri-terminal-green-700: oklch(0.34 0.13 155);
+  --tri-terminal-red-300: oklch(0.78 0.17 25);
+  --tri-terminal-red-400: oklch(0.72 0.2 25);
+  --tri-terminal-red-600: oklch(0.48 0.2 25);
+  --tri-terminal-red-700: oklch(0.44 0.17 25);
+  --tri-terminal-violet-300: oklch(0.74 0.19 290);
+  --tri-terminal-violet-400: oklch(0.68 0.2 290);
+  --tri-terminal-violet-600: oklch(0.46 0.2 290);
+  --tri-terminal-violet-700: oklch(0.42 0.19 290);
+  --tri-terminal-yellow-300: oklch(0.81 0.14 65);
+  --tri-terminal-yellow-400: oklch(0.75 0.15 65);
+  --tri-terminal-yellow-600: oklch(0.42 0.14 65);
+  --tri-terminal-yellow-700: oklch(0.38 0.13 75);
+  --tri-violet-100: oklch(0.9 0.062 307.2);
+  --tri-violet-200: oklch(0.845 0.095 304.4);
+  --tri-violet-300: oklch(0.789 0.128 301.6);
+  --tri-violet-400: oklch(0.63 0.225 295.4);
+  --tri-violet-50: oklch(0.957 0.028 311.3);
+  --tri-violet-500: oklch(0.548 0.275 291.4);
+  --tri-violet-600: oklch(0.489 0.275 290.9);
+  --tri-violet-700: oklch(0.414 0.232 291.7);
+  --tri-violet-800: oklch(0.208 0.111 300.8);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-100: oklch(1 0 0);
+  --tri-white-12: oklch(1 0 0 / 0.12);
+  --tri-white-16: oklch(1 0 0 / 0.16);
+  --tri-white-24: oklch(1 0 0 / 0.24);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-32: oklch(1 0 0 / 0.32);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-4: oklch(1 0 0 / 0.04);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-40: oklch(1 0 0 / 0.4);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-56: oklch(1 0 0 / 0.56);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-64: oklch(1 0 0 / 0.64);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-8: oklch(1 0 0 / 0.08);
+  /* DEPRECATED: Not referenced by any overlay/scrim/surface token today. (remove in 4.0.0) */
+  --tri-white-80: oklch(1 0 0 / 0.8);
+  --tri-white-main: oklch(1 0 0);
+  --tri-z-base: 0;
+  --tri-z-dropdown: 50;
+  --tri-z-modal: 300;
+  --tri-z-overlay: 200;
+  --tri-z-popover: 400;
+  --tri-z-sticky: 100;
+  --tri-z-toast: 500;
+}
+}
diff --git a/assets/css/vendor/trident/tri-radius.css b/assets/css/vendor/trident/tri-radius.css
new file mode 100644
index 000000000000..4de7967b1aab
--- /dev/null
+++ b/assets/css/vendor/trident/tri-radius.css
@@ -0,0 +1,31 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+@layer tri.radius {
+:root {
+  --tri-radius-2xl: 16px;
+  --tri-radius-3xl: 24px;
+  --tri-radius-4xl: 32px;
+  --tri-radius-default: 5px;
+  --tri-radius-full: 9999px;
+  --tri-radius-lg: 8px;
+  --tri-radius-md: 6px;
+  --tri-radius-none: 0px;
+  --tri-radius-sm: 4px;
+  --tri-radius-xl: 12px;
+  --tri-radius-xs: 2px;
+}
+}
+
+@theme inline {
+  --radius-2xl: var(--tri-radius-2xl);
+  --radius-3xl: var(--tri-radius-3xl);
+  --radius-4xl: var(--tri-radius-4xl);
+  --radius-default: var(--tri-radius-default);
+  --radius-full: var(--tri-radius-full);
+  --radius-lg: var(--tri-radius-lg);
+  --radius-md: var(--tri-radius-md);
+  --radius-none: var(--tri-radius-none);
+  --radius-sm: var(--tri-radius-sm);
+  --radius-xl: var(--tri-radius-xl);
+  --radius-xs: var(--tri-radius-xs);
+}
diff --git a/assets/css/vendor/trident/tri-semantic.css b/assets/css/vendor/trident/tri-semantic.css
new file mode 100644
index 000000000000..a04fbf53412f
--- /dev/null
+++ b/assets/css/vendor/trident/tri-semantic.css
@@ -0,0 +1,1280 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant high-contrast (&:is(.high-contrast *));
+
+@theme inline {
+  --color-accent: var(--tri-accent);
+  --color-accent-active: var(--tri-accent-active);
+  --color-accent-foreground: var(--tri-accent-foreground);
+  --color-accent-hover: var(--tri-accent-hover);
+  --color-accent-subtle: var(--tri-accent-subtle);
+  --color-accent-track: var(--tri-accent-track);
+  --color-accent-track-fill: var(--tri-accent-track-fill);
+  --color-accent-wash: var(--tri-accent-wash);
+  --color-action-disabled: var(--tri-action-disabled);
+  --color-action-disabled-bg: var(--tri-action-disabled-bg);
+  --color-action-focus: var(--tri-action-focus);
+  --color-action-hover: var(--tri-action-hover);
+  --color-action-selected: var(--tri-action-selected);
+  --color-active-overlay: var(--tri-active-overlay);
+  --color-alert-error-bg: var(--tri-alert-error-bg);
+  --color-alert-error-border: var(--tri-alert-error-border);
+  --color-alert-error-fg: var(--tri-alert-error-fg);
+  --color-alert-error-icon: var(--tri-alert-error-icon);
+  --color-alert-error-title: var(--tri-alert-error-title);
+  --color-alert-info-bg: var(--tri-alert-info-bg);
+  --color-alert-info-border: var(--tri-alert-info-border);
+  --color-alert-info-fg: var(--tri-alert-info-fg);
+  --color-alert-info-icon: var(--tri-alert-info-icon);
+  --color-alert-info-title: var(--tri-alert-info-title);
+  --color-alert-premium-bg: var(--tri-alert-premium-bg);
+  --color-alert-premium-border: var(--tri-alert-premium-border);
+  --color-alert-premium-fg: var(--tri-alert-premium-fg);
+  --color-alert-premium-icon: var(--tri-alert-premium-icon);
+  --color-alert-premium-title: var(--tri-alert-premium-title);
+  --color-alert-success-bg: var(--tri-alert-success-bg);
+  --color-alert-success-border: var(--tri-alert-success-border);
+  --color-alert-success-fg: var(--tri-alert-success-fg);
+  --color-alert-success-icon: var(--tri-alert-success-icon);
+  --color-alert-success-title: var(--tri-alert-success-title);
+  --color-alert-warning-bg: var(--tri-alert-warning-bg);
+  --color-alert-warning-border: var(--tri-alert-warning-border);
+  --color-alert-warning-fg: var(--tri-alert-warning-fg);
+  --color-alert-warning-icon: var(--tri-alert-warning-icon);
+  --color-alert-warning-title: var(--tri-alert-warning-title);
+  --color-artifact: var(--tri-artifact);
+  --color-artifact-foreground: var(--tri-artifact-foreground);
+  --color-background: var(--tri-background);
+  --color-background-paper-elevation-0: var(--tri-background-paper-elevation-0);
+  --color-background-paper-elevation-1: var(--tri-background-paper-elevation-1);
+  --color-background-paper-elevation-2: var(--tri-background-paper-elevation-2);
+  --color-background-paper-elevation-3: var(--tri-background-paper-elevation-3);
+  --color-background-paper-elevation-4: var(--tri-background-paper-elevation-4);
+  --color-background-primary: var(--tri-background-primary);
+  --color-background-secondary: var(--tri-background-secondary);
+  --color-blockquote-caution: var(--tri-blockquote-caution);
+  --color-blockquote-caution-bg: var(--tri-blockquote-caution-bg);
+  --color-blockquote-caution-title: var(--tri-blockquote-caution-title);
+  --color-blockquote-important: var(--tri-blockquote-important);
+  --color-blockquote-important-bg: var(--tri-blockquote-important-bg);
+  --color-blockquote-important-title: var(--tri-blockquote-important-title);
+  --color-blockquote-note: var(--tri-blockquote-note);
+  --color-blockquote-note-bg: var(--tri-blockquote-note-bg);
+  --color-blockquote-note-title: var(--tri-blockquote-note-title);
+  --color-blockquote-tip: var(--tri-blockquote-tip);
+  --color-blockquote-tip-bg: var(--tri-blockquote-tip-bg);
+  --color-blockquote-tip-title: var(--tri-blockquote-tip-title);
+  --color-blockquote-warning: var(--tri-blockquote-warning);
+  --color-blockquote-warning-bg: var(--tri-blockquote-warning-bg);
+  --color-blockquote-warning-title: var(--tri-blockquote-warning-title);
+  --color-border: var(--tri-border);
+  --color-border-accent: var(--tri-border-accent);
+  --color-border-subtle: var(--tri-border-subtle);
+  --color-canvas-bg: var(--tri-canvas-bg);
+  --color-card: var(--tri-card);
+  --color-card-foreground: var(--tri-card-foreground);
+  --color-chart-1: var(--tri-chart-1);
+  --color-chart-2: var(--tri-chart-2);
+  --color-chart-3: var(--tri-chart-3);
+  --color-chart-4: var(--tri-chart-4);
+  --color-chart-5: var(--tri-chart-5);
+  --color-chart-6: var(--tri-chart-6);
+  --color-chart-7: var(--tri-chart-7);
+  --color-chart-8: var(--tri-chart-8);
+  --color-destructive: var(--tri-destructive);
+  --color-destructive-active: var(--tri-destructive-active);
+  --color-destructive-foreground: var(--tri-destructive-foreground);
+  --color-destructive-hover: var(--tri-destructive-hover);
+  --color-destructive-link-hover: var(--tri-destructive-link-hover);
+  --color-destructive-ring: var(--tri-destructive-ring);
+  --color-destructive-subtle: var(--tri-destructive-subtle);
+  --color-destructive-wash: var(--tri-destructive-wash);
+  --color-diff-added-bg: var(--tri-diff-added-bg);
+  --color-diff-added-text: var(--tri-diff-added-text);
+  --color-diff-hunk-bg: var(--tri-diff-hunk-bg);
+  --color-diff-removed-bg: var(--tri-diff-removed-bg);
+  --color-diff-removed-text: var(--tri-diff-removed-text);
+  --color-disabled-foreground: var(--tri-disabled-foreground);
+  --color-foreground: var(--tri-foreground);
+  --color-grade-a: var(--tri-grade-a);
+  --color-grade-a-bg: var(--tri-grade-a-bg);
+  --color-grade-a-border: var(--tri-grade-a-border);
+  --color-grade-a-fg: var(--tri-grade-a-fg);
+  --color-grade-a-text: var(--tri-grade-a-text);
+  --color-grade-b: var(--tri-grade-b);
+  --color-grade-b-bg: var(--tri-grade-b-bg);
+  --color-grade-b-border: var(--tri-grade-b-border);
+  --color-grade-b-fg: var(--tri-grade-b-fg);
+  --color-grade-b-text: var(--tri-grade-b-text);
+  --color-grade-c: var(--tri-grade-c);
+  --color-grade-c-bg: var(--tri-grade-c-bg);
+  --color-grade-c-border: var(--tri-grade-c-border);
+  --color-grade-c-fg: var(--tri-grade-c-fg);
+  --color-grade-c-text: var(--tri-grade-c-text);
+  --color-grade-d: var(--tri-grade-d);
+  --color-grade-d-bg: var(--tri-grade-d-bg);
+  --color-grade-d-border: var(--tri-grade-d-border);
+  --color-grade-d-fg: var(--tri-grade-d-fg);
+  --color-grade-d-text: var(--tri-grade-d-text);
+  --color-grade-e: var(--tri-grade-e);
+  --color-grade-e-bg: var(--tri-grade-e-bg);
+  --color-grade-e-border: var(--tri-grade-e-border);
+  --color-grade-e-fg: var(--tri-grade-e-fg);
+  --color-grade-e-text: var(--tri-grade-e-text);
+  --color-grade-f: var(--tri-grade-f);
+  --color-grade-f-bg: var(--tri-grade-f-bg);
+  --color-grade-f-border: var(--tri-grade-f-border);
+  --color-grade-f-fg: var(--tri-grade-f-fg);
+  --color-grade-f-text: var(--tri-grade-f-text);
+  --color-header-accent: var(--tri-header-accent);
+  --color-header-accent-foreground: var(--tri-header-accent-foreground);
+  --color-header-foreground: var(--tri-header-foreground);
+  --color-header-foreground-muted: var(--tri-header-foreground-muted);
+  --color-header-from: var(--tri-header-from);
+  --color-header-ring: var(--tri-header-ring);
+  --color-header-to: var(--tri-header-to);
+  --color-hover-overlay: var(--tri-hover-overlay);
+  --color-info: var(--tri-info);
+  --color-info-foreground: var(--tri-info-foreground);
+  --color-input: var(--tri-input);
+  --color-input-bg: var(--tri-input-bg);
+  --color-invalid-ring: var(--tri-invalid-ring);
+  --color-link-hover: var(--tri-link-hover);
+  --color-log-warn-bg: var(--tri-log-warn-bg);
+  --color-muted: var(--tri-muted);
+  --color-muted-foreground: var(--tri-muted-foreground);
+  --color-muted-foreground-decoration: var(--tri-muted-foreground-decoration);
+  --color-muted-foreground-track: var(--tri-muted-foreground-track);
+  --color-neutral-focus: var(--tri-neutral-focus);
+  --color-neutral-focus-visible: var(--tri-neutral-focus-visible);
+  --color-neutral-hover: var(--tri-neutral-hover);
+  --color-neutral-outlined-border: var(--tri-neutral-outlined-border);
+  --color-neutral-selected: var(--tri-neutral-selected);
+  --color-overlay-backdrop: var(--tri-overlay-backdrop);
+  --color-overlay-frosted: var(--tri-overlay-frosted);
+  --color-overlay-scrim: var(--tri-overlay-scrim);
+  --color-popover: var(--tri-popover);
+  --color-popover-foreground: var(--tri-popover-foreground);
+  --color-premium: var(--tri-premium);
+  --color-premium-foreground: var(--tri-premium-foreground);
+  --color-premium-hover: var(--tri-premium-hover);
+  --color-primary: var(--tri-primary);
+  --color-primary-foreground: var(--tri-primary-foreground);
+  --color-primary-foreground-wash: var(--tri-primary-foreground-wash);
+  --color-primary-subtle: var(--tri-primary-subtle);
+  --color-primary-wash: var(--tri-primary-wash);
+  --color-product-gradient-admin-from: var(--tri-product-gradient-admin-from);
+  --color-product-gradient-admin-to: var(--tri-product-gradient-admin-to);
+  --color-product-gradient-build-from: var(--tri-product-gradient-build-from);
+  --color-product-gradient-build-to: var(--tri-product-gradient-build-to);
+  --color-product-gradient-desktop-from: var(--tri-product-gradient-desktop-from);
+  --color-product-gradient-desktop-to: var(--tri-product-gradient-desktop-to);
+  --color-product-gradient-docs-from: var(--tri-product-gradient-docs-from);
+  --color-product-gradient-docs-to: var(--tri-product-gradient-docs-to);
+  --color-product-gradient-hub-from: var(--tri-product-gradient-hub-from);
+  --color-product-gradient-hub-to: var(--tri-product-gradient-hub-to);
+  --color-product-gradient-scout-from: var(--tri-product-gradient-scout-from);
+  --color-product-gradient-scout-to: var(--tri-product-gradient-scout-to);
+  --color-promo: var(--tri-promo);
+  --color-promo-foreground: var(--tri-promo-foreground);
+  --color-ring: var(--tri-ring);
+  --color-scrollbar-thumb: var(--tri-scrollbar-thumb);
+  --color-scrollbar-thumb-hover: var(--tri-scrollbar-thumb-hover);
+  --color-scrollbar-track: var(--tri-scrollbar-track);
+  --color-secondary: var(--tri-secondary);
+  --color-secondary-foreground: var(--tri-secondary-foreground);
+  --color-secondary-hover: var(--tri-secondary-hover);
+  --color-selected-overlay: var(--tri-selected-overlay);
+  --color-severity-critical: var(--tri-severity-critical);
+  --color-severity-critical-fg: var(--tri-severity-critical-fg);
+  --color-severity-high: var(--tri-severity-high);
+  --color-severity-high-fg: var(--tri-severity-high-fg);
+  --color-severity-info: var(--tri-severity-info);
+  --color-severity-info-fg: var(--tri-severity-info-fg);
+  --color-severity-low: var(--tri-severity-low);
+  --color-severity-low-border: var(--tri-severity-low-border);
+  --color-severity-low-fg: var(--tri-severity-low-fg);
+  --color-severity-medium: var(--tri-severity-medium);
+  --color-severity-medium-border: var(--tri-severity-medium-border);
+  --color-severity-medium-fg: var(--tri-severity-medium-fg);
+  --color-severity-none: var(--tri-severity-none);
+  --color-severity-none-fg: var(--tri-severity-none-fg);
+  --color-sidebar: var(--tri-sidebar);
+  --color-sidebar-accent: var(--tri-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--tri-sidebar-accent-foreground);
+  --color-sidebar-border: var(--tri-sidebar-border);
+  --color-sidebar-foreground: var(--tri-sidebar-foreground);
+  --color-sidebar-foreground-muted: var(--tri-sidebar-foreground-muted);
+  --color-sidebar-primary: var(--tri-sidebar-primary);
+  --color-sidebar-primary-foreground: var(--tri-sidebar-primary-foreground);
+  --color-sidebar-ring: var(--tri-sidebar-ring);
+  --color-status-active: var(--tri-status-active);
+  --color-status-deprecated: var(--tri-status-deprecated);
+  --color-status-eol: var(--tri-status-eol);
+  --color-status-error: var(--tri-status-error);
+  --color-status-error-text: var(--tri-status-error-text);
+  --color-status-paused: var(--tri-status-paused);
+  --color-status-paused-text: var(--tri-status-paused-text);
+  --color-status-running: var(--tri-status-running);
+  --color-status-running-text: var(--tri-status-running-text);
+  --color-status-stopped: var(--tri-status-stopped);
+  --color-success: var(--tri-success);
+  --color-success-foreground: var(--tri-success-foreground);
+  --color-success-hover: var(--tri-success-hover);
+  --color-success-wash: var(--tri-success-wash);
+  --color-syntax-attr: var(--tri-syntax-attr);
+  --color-syntax-command: var(--tri-syntax-command);
+  --color-syntax-comment: var(--tri-syntax-comment);
+  --color-syntax-directive: var(--tri-syntax-directive);
+  --color-syntax-keyword: var(--tri-syntax-keyword);
+  --color-syntax-number: var(--tri-syntax-number);
+  --color-syntax-string: var(--tri-syntax-string);
+  --color-syntax-type: var(--tri-syntax-type);
+  --color-syntax-value: var(--tri-syntax-value);
+  --color-tag-default-bg: var(--tri-tag-default-bg);
+  --color-tag-default-fg: var(--tri-tag-default-fg);
+  --color-tag-destructive-bg: var(--tri-tag-destructive-bg);
+  --color-tag-destructive-fg: var(--tri-tag-destructive-fg);
+  --color-tag-info-bg: var(--tri-tag-info-bg);
+  --color-tag-info-fg: var(--tri-tag-info-fg);
+  --color-tag-premium-bg: var(--tri-tag-premium-bg);
+  --color-tag-premium-fg: var(--tri-tag-premium-fg);
+  --color-tag-primary-bg: var(--tri-tag-primary-bg);
+  --color-tag-primary-fg: var(--tri-tag-primary-fg);
+  --color-tag-success-bg: var(--tri-tag-success-bg);
+  --color-tag-success-fg: var(--tri-tag-success-fg);
+  --color-tag-warning-bg: var(--tri-tag-warning-bg);
+  --color-tag-warning-fg: var(--tri-tag-warning-fg);
+  --color-terminal-bg: var(--tri-terminal-bg);
+  --color-terminal-black: var(--tri-terminal-black);
+  --color-terminal-blue: var(--tri-terminal-blue);
+  --color-terminal-border: var(--tri-terminal-border);
+  --color-terminal-bright-black: var(--tri-terminal-bright-black);
+  --color-terminal-bright-blue: var(--tri-terminal-bright-blue);
+  --color-terminal-bright-cyan: var(--tri-terminal-bright-cyan);
+  --color-terminal-bright-green: var(--tri-terminal-bright-green);
+  --color-terminal-bright-magenta: var(--tri-terminal-bright-magenta);
+  --color-terminal-bright-red: var(--tri-terminal-bright-red);
+  --color-terminal-bright-white: var(--tri-terminal-bright-white);
+  --color-terminal-bright-yellow: var(--tri-terminal-bright-yellow);
+  --color-terminal-cursor: var(--tri-terminal-cursor);
+  --color-terminal-cyan: var(--tri-terminal-cyan);
+  --color-terminal-green: var(--tri-terminal-green);
+  --color-terminal-magenta: var(--tri-terminal-magenta);
+  --color-terminal-muted: var(--tri-terminal-muted);
+  --color-terminal-red: var(--tri-terminal-red);
+  --color-terminal-surface: var(--tri-terminal-surface);
+  --color-terminal-text: var(--tri-terminal-text);
+  --color-terminal-white: var(--tri-terminal-white);
+  --color-terminal-yellow: var(--tri-terminal-yellow);
+  --color-tertiary-foreground: var(--tri-tertiary-foreground);
+  --color-text-error: var(--tri-text-error);
+  --color-text-info: var(--tri-text-info);
+  --color-text-premium: var(--tri-text-premium);
+  --color-text-success: var(--tri-text-success);
+  --color-text-text: var(--tri-text-text);
+  --color-text-warning: var(--tri-text-warning);
+  --color-tooltip-kbd-bg: var(--tri-tooltip-kbd-bg);
+  --color-trust-community: var(--tri-trust-community);
+  --color-trust-community-bg: var(--tri-trust-community-bg);
+  --color-trust-community-border: var(--tri-trust-community-border);
+  --color-trust-community-text: var(--tri-trust-community-text);
+  --color-trust-hardened: var(--tri-trust-hardened);
+  --color-trust-hardened-bg: var(--tri-trust-hardened-bg);
+  --color-trust-hardened-border: var(--tri-trust-hardened-border);
+  --color-trust-hardened-text: var(--tri-trust-hardened-text);
+  --color-trust-official: var(--tri-trust-official);
+  --color-trust-official-bg: var(--tri-trust-official-bg);
+  --color-trust-official-border: var(--tri-trust-official-border);
+  --color-trust-official-text: var(--tri-trust-official-text);
+  --color-trust-verified: var(--tri-trust-verified);
+  --color-trust-verified-bg: var(--tri-trust-verified-bg);
+  --color-trust-verified-border: var(--tri-trust-verified-border);
+  --color-trust-verified-text: var(--tri-trust-verified-text);
+  --color-warning: var(--tri-warning);
+  --color-warning-foreground: var(--tri-warning-foreground);
+  --color-warning-hover: var(--tri-warning-hover);
+  --color-warning-subtle: var(--tri-warning-subtle);
+  --color-warning-wash: var(--tri-warning-wash);
+  --color-tri-black-100: var(--tri-black-100);
+  --color-tri-black-12: var(--tri-black-12);
+  --color-tri-black-16: var(--tri-black-16);
+  --color-tri-black-24: var(--tri-black-24);
+  --color-tri-black-32: var(--tri-black-32);
+  --color-tri-black-4: var(--tri-black-4);
+  --color-tri-black-40: var(--tri-black-40);
+  --color-tri-black-56: var(--tri-black-56);
+  --color-tri-black-64: var(--tri-black-64);
+  --color-tri-black-8: var(--tri-black-8);
+  --color-tri-black-80: var(--tri-black-80);
+  --color-tri-black-main: var(--tri-black-main);
+  --color-tri-blue-100: var(--tri-blue-100);
+  --color-tri-blue-200: var(--tri-blue-200);
+  --color-tri-blue-300: var(--tri-blue-300);
+  --color-tri-blue-400: var(--tri-blue-400);
+  --color-tri-blue-450: var(--tri-blue-450);
+  --color-tri-blue-50: var(--tri-blue-50);
+  --color-tri-blue-500: var(--tri-blue-500);
+  --color-tri-blue-600: var(--tri-blue-600);
+  --color-tri-blue-700: var(--tri-blue-700);
+  --color-tri-blue-800: var(--tri-blue-800);
+  --color-tri-blue-900: var(--tri-blue-900);
+  --color-tri-gray-100: var(--tri-gray-100);
+  --color-tri-gray-200: var(--tri-gray-200);
+  --color-tri-gray-300: var(--tri-gray-300);
+  --color-tri-gray-400: var(--tri-gray-400);
+  --color-tri-gray-50: var(--tri-gray-50);
+  --color-tri-gray-500: var(--tri-gray-500);
+  --color-tri-gray-600: var(--tri-gray-600);
+  --color-tri-gray-700: var(--tri-gray-700);
+  --color-tri-gray-775: var(--tri-gray-775);
+  --color-tri-gray-800: var(--tri-gray-800);
+  --color-tri-gray-850: var(--tri-gray-850);
+  --color-tri-gray-900: var(--tri-gray-900);
+  --color-tri-gray-925: var(--tri-gray-925);
+  --color-tri-gray-950: var(--tri-gray-950);
+  --color-tri-green-100: var(--tri-green-100);
+  --color-tri-green-200: var(--tri-green-200);
+  --color-tri-green-300: var(--tri-green-300);
+  --color-tri-green-400: var(--tri-green-400);
+  --color-tri-green-50: var(--tri-green-50);
+  --color-tri-green-500: var(--tri-green-500);
+  --color-tri-green-600: var(--tri-green-600);
+  --color-tri-green-700: var(--tri-green-700);
+  --color-tri-green-800: var(--tri-green-800);
+  --color-tri-lime-100: var(--tri-lime-100);
+  --color-tri-lime-200: var(--tri-lime-200);
+  --color-tri-lime-300: var(--tri-lime-300);
+  --color-tri-lime-400: var(--tri-lime-400);
+  --color-tri-lime-50: var(--tri-lime-50);
+  --color-tri-lime-500: var(--tri-lime-500);
+  --color-tri-lime-600: var(--tri-lime-600);
+  --color-tri-lime-700: var(--tri-lime-700);
+  --color-tri-lime-800: var(--tri-lime-800);
+  --color-tri-orange-100: var(--tri-orange-100);
+  --color-tri-orange-200: var(--tri-orange-200);
+  --color-tri-orange-300: var(--tri-orange-300);
+  --color-tri-orange-400: var(--tri-orange-400);
+  --color-tri-orange-450: var(--tri-orange-450);
+  --color-tri-orange-50: var(--tri-orange-50);
+  --color-tri-orange-500: var(--tri-orange-500);
+  --color-tri-orange-600: var(--tri-orange-600);
+  --color-tri-orange-700: var(--tri-orange-700);
+  --color-tri-orange-800: var(--tri-orange-800);
+  --color-tri-pink-100: var(--tri-pink-100);
+  --color-tri-pink-200: var(--tri-pink-200);
+  --color-tri-pink-300: var(--tri-pink-300);
+  --color-tri-pink-400: var(--tri-pink-400);
+  --color-tri-pink-50: var(--tri-pink-50);
+  --color-tri-pink-500: var(--tri-pink-500);
+  --color-tri-pink-600: var(--tri-pink-600);
+  --color-tri-pink-700: var(--tri-pink-700);
+  --color-tri-pink-800: var(--tri-pink-800);
+  --color-tri-red-100: var(--tri-red-100);
+  --color-tri-red-200: var(--tri-red-200);
+  --color-tri-red-300: var(--tri-red-300);
+  --color-tri-red-400: var(--tri-red-400);
+  --color-tri-red-50: var(--tri-red-50);
+  --color-tri-red-500: var(--tri-red-500);
+  --color-tri-red-600: var(--tri-red-600);
+  --color-tri-red-700: var(--tri-red-700);
+  --color-tri-red-800: var(--tri-red-800);
+  --color-tri-terminal-blue-300: var(--tri-terminal-blue-300);
+  --color-tri-terminal-blue-400: var(--tri-terminal-blue-400);
+  --color-tri-terminal-blue-600: var(--tri-terminal-blue-600);
+  --color-tri-terminal-blue-700: var(--tri-terminal-blue-700);
+  --color-tri-terminal-cyan-300: var(--tri-terminal-cyan-300);
+  --color-tri-terminal-cyan-400: var(--tri-terminal-cyan-400);
+  --color-tri-terminal-cyan-600: var(--tri-terminal-cyan-600);
+  --color-tri-terminal-cyan-700: var(--tri-terminal-cyan-700);
+  --color-tri-terminal-green-300: var(--tri-terminal-green-300);
+  --color-tri-terminal-green-400: var(--tri-terminal-green-400);
+  --color-tri-terminal-green-600: var(--tri-terminal-green-600);
+  --color-tri-terminal-green-700: var(--tri-terminal-green-700);
+  --color-tri-terminal-red-300: var(--tri-terminal-red-300);
+  --color-tri-terminal-red-400: var(--tri-terminal-red-400);
+  --color-tri-terminal-red-600: var(--tri-terminal-red-600);
+  --color-tri-terminal-red-700: var(--tri-terminal-red-700);
+  --color-tri-terminal-violet-300: var(--tri-terminal-violet-300);
+  --color-tri-terminal-violet-400: var(--tri-terminal-violet-400);
+  --color-tri-terminal-violet-600: var(--tri-terminal-violet-600);
+  --color-tri-terminal-violet-700: var(--tri-terminal-violet-700);
+  --color-tri-terminal-yellow-300: var(--tri-terminal-yellow-300);
+  --color-tri-terminal-yellow-400: var(--tri-terminal-yellow-400);
+  --color-tri-terminal-yellow-600: var(--tri-terminal-yellow-600);
+  --color-tri-terminal-yellow-700: var(--tri-terminal-yellow-700);
+  --color-tri-violet-100: var(--tri-violet-100);
+  --color-tri-violet-200: var(--tri-violet-200);
+  --color-tri-violet-300: var(--tri-violet-300);
+  --color-tri-violet-400: var(--tri-violet-400);
+  --color-tri-violet-50: var(--tri-violet-50);
+  --color-tri-violet-500: var(--tri-violet-500);
+  --color-tri-violet-600: var(--tri-violet-600);
+  --color-tri-violet-700: var(--tri-violet-700);
+  --color-tri-violet-800: var(--tri-violet-800);
+  --color-tri-white-100: var(--tri-white-100);
+  --color-tri-white-12: var(--tri-white-12);
+  --color-tri-white-16: var(--tri-white-16);
+  --color-tri-white-24: var(--tri-white-24);
+  --color-tri-white-32: var(--tri-white-32);
+  --color-tri-white-4: var(--tri-white-4);
+  --color-tri-white-40: var(--tri-white-40);
+  --color-tri-white-56: var(--tri-white-56);
+  --color-tri-white-64: var(--tri-white-64);
+  --color-tri-white-8: var(--tri-white-8);
+  --color-tri-white-80: var(--tri-white-80);
+  --color-tri-white-main: var(--tri-white-main);
+}
+@layer tri.semantic {
+:root {
+  --tri-accent: oklch(0.954 0.019 240.7);
+  --tri-accent-active: oklch(0.353 0.161 261.8);
+  --tri-accent-foreground: oklch(0.184 0.008 245);
+  --tri-accent-hover: oklch(0.455 0.198 262.2);
+  --tri-accent-subtle: oklch(0.455 0.198 262.2 / 0.08);
+  --tri-accent-track: oklch(0.455 0.198 262.2 / 0.15);
+  --tri-accent-track-fill: oklch(0.455 0.198 262.2 / 0.35);
+  --tri-accent-wash: oklch(0.455 0.198 262.2 / 0.05);
+  --tri-action-disabled: oklch(0 0 0 / 0.32);
+  --tri-action-disabled-bg: oklch(0 0 0 / 0.12);
+  --tri-action-focus: oklch(0 0 0 / 0.24);
+  --tri-action-hover: oklch(0 0 0 / 0.12);
+  --tri-action-selected: oklch(0 0 0 / 0.16);
+  --tri-active-overlay: oklch(0 0 0 / 0.06);
+  --tri-alert-error-bg: oklch(0.952 0.021 17.5);
+  --tri-alert-error-border: oklch(0.566 0.208 23 / 0.56);
+  --tri-alert-error-fg: oklch(0.225 0.068 16.7);
+  --tri-alert-error-icon: oklch(0.566 0.208 23);
+  --tri-alert-error-title: oklch(0.507 0.184 21.7);
+  --tri-alert-info-bg: oklch(0.954 0.019 240.7);
+  --tri-alert-info-border: oklch(0.546 0.219 262 / 0.56);
+  --tri-alert-info-fg: oklch(0.208 0.081 259.1);
+  --tri-alert-info-icon: oklch(0.546 0.219 262);
+  --tri-alert-info-title: oklch(0.455 0.198 262.2);
+  --tri-alert-premium-bg: oklch(0.957 0.028 311.3);
+  --tri-alert-premium-border: oklch(0.548 0.275 291.4 / 0.56);
+  --tri-alert-premium-fg: oklch(0.208 0.111 300.8);
+  --tri-alert-premium-icon: oklch(0.548 0.275 291.4);
+  --tri-alert-premium-title: oklch(0.489 0.275 290.9);
+  --tri-alert-success-bg: oklch(0.958 0.016 187.3);
+  --tri-alert-success-border: oklch(0.544 0.08 182.8 / 0.56);
+  --tri-alert-success-fg: oklch(0.268 0.038 183.9);
+  --tri-alert-success-icon: oklch(0.544 0.08 182.8);
+  --tri-alert-success-title: oklch(0.481 0.077 179.4);
+  --tri-alert-warning-bg: oklch(0.969 0.034 86.3);
+  --tri-alert-warning-border: oklch(0.564 0.149 49.6 / 0.56);
+  --tri-alert-warning-fg: oklch(0.274 0.071 48.2);
+  --tri-alert-warning-icon: oklch(0.564 0.149 49.6);
+  --tri-alert-warning-title: oklch(0.52 0.143 44.4);
+  --tri-artifact: oklch(0.481 0.077 179.4);
+  --tri-artifact-foreground: oklch(1 0 0);
+  --tri-background: oklch(0.985 0.004 245);
+  --tri-background-paper-elevation-0: oklch(1 0 0);
+  --tri-background-paper-elevation-1: oklch(1 0 0);
+  --tri-background-paper-elevation-2: oklch(1 0 0);
+  --tri-background-paper-elevation-3: oklch(1 0 0);
+  --tri-background-paper-elevation-4: oklch(1 0 0);
+  --tri-background-primary: oklch(1 0 0);
+  --tri-background-secondary: oklch(0.985 0.004 245);
+  --tri-blockquote-caution: oklch(0.566 0.208 23);
+  --tri-blockquote-caution-bg: oklch(0.566 0.208 23 / 0.16);
+  --tri-blockquote-caution-title: oklch(0.416 0.148 22.1);
+  --tri-blockquote-important: oklch(0.548 0.275 291.4);
+  --tri-blockquote-important-bg: oklch(0.548 0.275 291.4 / 0.16);
+  --tri-blockquote-important-title: oklch(0.414 0.232 291.7);
+  --tri-blockquote-note: oklch(0.546 0.219 262);
+  --tri-blockquote-note-bg: oklch(0.546 0.219 262 / 0.16);
+  --tri-blockquote-note-title: oklch(0.353 0.161 261.8);
+  --tri-blockquote-tip: oklch(0.544 0.08 182.8);
+  --tri-blockquote-tip-bg: oklch(0.544 0.08 182.8 / 0.16);
+  --tri-blockquote-tip-title: oklch(0.424 0.066 182.1);
+  --tri-blockquote-warning: oklch(0.564 0.149 49.6);
+  --tri-blockquote-warning-bg: oklch(0.564 0.149 49.6 / 0.16);
+  --tri-blockquote-warning-title: oklch(0.443 0.125 43.7);
+  --tri-border: oklch(0.913 0.007 245);
+  --tri-border-accent: oklch(0.455 0.198 262.2 / 0.2);
+  --tri-border-subtle: oklch(0.913 0.007 245);
+  --tri-canvas-bg: oklch(0.968 0.005 245);
+  --tri-card: oklch(1 0 0);
+  --tri-card-foreground: oklch(0.184 0.008 245);
+  --tri-chart-1: oklch(0.806 0.09 242.2);
+  --tri-chart-2: oklch(0.64 0.169 249.4);
+  --tri-chart-3: oklch(0.455 0.198 262.2);
+  --tri-chart-4: oklch(0.548 0.275 291.4);
+  --tri-chart-5: oklch(0.414 0.232 291.7);
+  --tri-chart-6: oklch(0.544 0.08 182.8);
+  --tri-chart-7: oklch(0.564 0.149 49.6);
+  --tri-chart-8: oklch(0.69 0.199 22.3);
+  --tri-destructive: oklch(0.507 0.184 21.7);
+  --tri-destructive-active: oklch(0.225 0.068 16.7);
+  --tri-destructive-foreground: oklch(1 0 0);
+  --tri-destructive-hover: oklch(0.416 0.148 22.1);
+  --tri-destructive-link-hover: oklch(0.507 0.184 21.7);
+  --tri-destructive-ring: oklch(0.507 0.184 21.7 / 0.75);
+  --tri-destructive-subtle: oklch(0.507 0.184 21.7 / 0.1);
+  --tri-destructive-wash: oklch(0.507 0.184 21.7 / 0.06);
+  --tri-diff-added-bg: oklch(0.4 0.17 145 / 0.08);
+  --tri-diff-added-text: oklch(0.4 0.17 145);
+  --tri-diff-hunk-bg: oklch(0.455 0.198 262.2 / 0.08);
+  --tri-diff-removed-bg: oklch(0.507 0.184 21.7 / 0.08);
+  --tri-diff-removed-text: oklch(0.507 0.184 21.7);
+  --tri-disabled-foreground: oklch(0.661 0.014 245);
+  --tri-foreground: oklch(0.184 0.008 245);
+  --tri-grade-a: oklch(0.544 0.08 182.8);
+  --tri-grade-a-bg: oklch(0.544 0.08 182.8 / 0.16);
+  --tri-grade-a-border: oklch(0.544 0.08 182.8 / 0.56);
+  --tri-grade-a-fg: oklch(1 0 0);
+  --tri-grade-a-text: oklch(0.424 0.066 182.1);
+  --tri-grade-b: oklch(0.642 0.097 178.3);
+  --tri-grade-b-bg: oklch(0.546 0.219 262 / 0.16);
+  --tri-grade-b-border: oklch(0.546 0.219 262 / 0.56);
+  --tri-grade-b-fg: oklch(0.184 0.008 245);
+  --tri-grade-b-text: oklch(0.353 0.161 261.8);
+  --tri-grade-c: oklch(0.673 0.16 57.7);
+  --tri-grade-c-bg: oklch(0.564 0.149 49.6 / 0.16);
+  --tri-grade-c-border: oklch(0.564 0.149 49.6 / 0.56);
+  --tri-grade-c-fg: oklch(0.184 0.008 245);
+  --tri-grade-c-text: oklch(0.443 0.125 43.7);
+  --tri-grade-d: oklch(0.564 0.149 49.6);
+  --tri-grade-d-bg: oklch(0.566 0.208 23 / 0.12);
+  --tri-grade-d-border: oklch(0.566 0.208 23 / 0.56);
+  --tri-grade-d-fg: oklch(1 0 0);
+  --tri-grade-d-text: oklch(0.507 0.184 21.7);
+  --tri-grade-e: oklch(0.566 0.208 23);
+  --tri-grade-e-bg: oklch(0.566 0.208 23 / 0.16);
+  --tri-grade-e-border: oklch(0.566 0.208 23 / 0.56);
+  --tri-grade-e-fg: oklch(1 0 0);
+  --tri-grade-e-text: oklch(0.507 0.184 21.7);
+  --tri-grade-f: oklch(0.507 0.184 21.7);
+  --tri-grade-f-bg: oklch(0.566 0.208 23 / 0.16);
+  --tri-grade-f-border: oklch(0.566 0.208 23 / 0.56);
+  --tri-grade-f-fg: oklch(1 0 0);
+  --tri-grade-f-text: oklch(0.416 0.148 22.1);
+  --tri-header-accent: oklch(0.353 0.161 261.8);
+  --tri-header-accent-foreground: oklch(1 0 0);
+  --tri-header-foreground: oklch(1 0 0);
+  --tri-header-foreground-muted: oklch(0.954 0.019 240.7);
+  --tri-header-from: oklch(0.455 0.198 262.2);
+  --tri-header-ring: oklch(1 0 0);
+  --tri-header-to: oklch(0.546 0.219 262);
+  --tri-hover-overlay: oklch(0 0 0 / 0.04);
+  --tri-info: oklch(0.546 0.219 262);
+  --tri-info-foreground: oklch(0.954 0.019 240.7);
+  --tri-input: oklch(0.55 0.016 245);
+  --tri-input-bg: oklch(1 0 0);
+  --tri-invalid-ring: oklch(0.507 0.184 21.7 / 0.2);
+  --tri-link-hover: oklch(0.546 0.219 262);
+  --tri-log-warn-bg: oklch(0.969 0.034 86.3);
+  --tri-muted: oklch(0.968 0.005 245);
+  --tri-muted-foreground: oklch(0.462 0.014 245);
+  --tri-muted-foreground-decoration: oklch(0.462 0.014 245 / 0.5);
+  --tri-muted-foreground-track: oklch(0.462 0.014 245 / 0.4);
+  --tri-neutral-focus: oklch(0.55 0.016 245 / 0.24);
+  --tri-neutral-focus-visible: oklch(0.55 0.016 245 / 0.32);
+  --tri-neutral-hover: oklch(0.55 0.016 245 / 0.12);
+  --tri-neutral-outlined-border: oklch(0.55 0.016 245 / 0.56);
+  --tri-neutral-selected: oklch(0.55 0.016 245 / 0.16);
+  --tri-overlay-backdrop: oklch(0 0 0 / 0.1);
+  --tri-overlay-frosted: oklch(0.968 0.005 245 / 0.7);
+  --tri-overlay-scrim: oklch(0 0 0 / 0.5);
+  --tri-popover: oklch(1 0 0);
+  --tri-popover-foreground: oklch(0.184 0.008 245);
+  --tri-premium: oklch(0.548 0.275 291.4);
+  --tri-premium-foreground: oklch(0.957 0.028 311.3);
+  --tri-premium-hover: oklch(0.414 0.232 291.7);
+  --tri-primary: oklch(0.546 0.219 262);
+  --tri-primary-foreground: oklch(0.985 0.004 245);
+  --tri-primary-foreground-wash: oklch(0.985 0.004 245 / 0.1);
+  --tri-primary-subtle: oklch(0.455 0.198 262.2 / 0.1);
+  --tri-primary-wash: oklch(0.455 0.198 262.2 / 0.05);
+  --tri-product-gradient-admin-from: oklch(0.548 0.275 291.4);
+  --tri-product-gradient-admin-to: oklch(0.546 0.219 262);
+  --tri-product-gradient-build-from: oklch(0.587 0.256 330.8);
+  --tri-product-gradient-build-to: oklch(0.546 0.219 262);
+  --tri-product-gradient-desktop-from: oklch(0.455 0.198 262.2);
+  --tri-product-gradient-desktop-to: oklch(0.546 0.219 262);
+  --tri-product-gradient-docs-from: oklch(0.55 0.016 245);
+  --tri-product-gradient-docs-to: oklch(0.546 0.219 262);
+  --tri-product-gradient-hub-from: oklch(0.546 0.219 262);
+  --tri-product-gradient-hub-to: oklch(0.546 0.219 262);
+  --tri-product-gradient-scout-from: oklch(0.544 0.08 182.8);
+  --tri-product-gradient-scout-to: oklch(0.546 0.219 262);
+  --tri-promo: oklch(0.52 0.143 44.4);
+  --tri-promo-foreground: oklch(1 0 0);
+  --tri-ring: oklch(0.546 0.219 262 / 0.75);
+  --tri-scrollbar-thumb: oklch(0 0 0 / 0.24);
+  --tri-scrollbar-thumb-hover: oklch(0 0 0 / 0.4);
+  --tri-scrollbar-track: oklch(0 0 0 / 0.04);
+  --tri-scrollbar-width: 6px;
+  --tri-secondary: oklch(0.968 0.005 245);
+  --tri-secondary-foreground: oklch(0.214 0.008 245);
+  --tri-secondary-hover: oklch(0.913 0.007 245);
+  --tri-selected-overlay: oklch(0 0 0 / 0.08);
+  --tri-severity-critical: oklch(0.507 0.184 21.7);
+  --tri-severity-critical-fg: oklch(1 0 0);
+  --tri-severity-high: oklch(0.443 0.125 43.7);
+  --tri-severity-high-fg: oklch(1 0 0);
+  --tri-severity-info: oklch(0.462 0.014 245);
+  --tri-severity-info-fg: oklch(0.985 0.004 245);
+  --tri-severity-low: oklch(0.661 0.014 245);
+  --tri-severity-low-border: oklch(0.462 0.014 245);
+  --tri-severity-low-fg: oklch(0.184 0.008 245);
+  --tri-severity-medium: oklch(0.747 0.15 65.3);
+  --tri-severity-medium-border: oklch(0.52 0.143 44.4);
+  --tri-severity-medium-fg: oklch(0.184 0.008 245);
+  --tri-severity-none: oklch(0.913 0.007 245);
+  --tri-severity-none-fg: oklch(0.462 0.014 245);
+  --tri-sidebar: oklch(0.985 0.004 245);
+  --tri-sidebar-accent: oklch(0.968 0.005 245);
+  --tri-sidebar-accent-foreground: oklch(0.214 0.008 245);
+  --tri-sidebar-border: oklch(0.913 0.007 245);
+  --tri-sidebar-foreground: oklch(0 0 0);
+  --tri-sidebar-foreground-muted: oklch(0.462 0.014 245);
+  --tri-sidebar-primary: oklch(0.455 0.198 262.2);
+  --tri-sidebar-primary-foreground: oklch(0.954 0.019 240.7);
+  --tri-sidebar-ring: oklch(0.55 0.016 245);
+  --tri-status-active: oklch(0.544 0.08 182.8);
+  --tri-status-deprecated: oklch(0.564 0.149 49.6);
+  --tri-status-eol: oklch(0.566 0.208 23);
+  --tri-status-error: oklch(0.507 0.184 21.7);
+  --tri-status-error-text: oklch(0.507 0.184 21.7);
+  --tri-status-paused: oklch(0.666 0.158 55.8);
+  --tri-status-paused-text: oklch(0.564 0.149 49.6);
+  --tri-status-running: oklch(0.5 0.2 145);
+  --tri-status-running-text: oklch(0.481 0.077 179.4);
+  --tri-status-stopped: oklch(0.462 0.014 245);
+  --tri-success: oklch(0.481 0.077 179.4);
+  --tri-success-foreground: oklch(1 0 0);
+  --tri-success-hover: oklch(0.268 0.038 183.9);
+  --tri-success-wash: oklch(0.481 0.077 179.4 / 0.06);
+  --tri-syntax-attr: oklch(0.455 0.198 262.2);
+  --tri-syntax-command: oklch(0.548 0.275 291.4);
+  --tri-syntax-comment: oklch(0.55 0.016 245);
+  --tri-syntax-directive: oklch(0.806 0.09 242.2);
+  --tri-syntax-keyword: oklch(0.566 0.208 23);
+  --tri-syntax-number: oklch(0.564 0.149 49.6);
+  --tri-syntax-string: oklch(0.544 0.08 182.8);
+  --tri-syntax-type: oklch(0.489 0.275 290.9);
+  --tri-syntax-value: oklch(0.55 0.016 245);
+  --tri-tag-default-bg: oklch(0.968 0.005 245);
+  --tri-tag-default-fg: oklch(0.366 0.012 245);
+  --tri-tag-destructive-bg: oklch(0.952 0.021 17.5);
+  --tri-tag-destructive-fg: oklch(0.416 0.148 22.1);
+  --tri-tag-info-bg: oklch(0.954 0.019 240.7);
+  --tri-tag-info-fg: oklch(0.353 0.161 261.8);
+  --tri-tag-premium-bg: oklch(0.957 0.028 311.3);
+  --tri-tag-premium-fg: oklch(0.414 0.232 291.7);
+  --tri-tag-primary-bg: oklch(0.954 0.019 240.7);
+  --tri-tag-primary-fg: oklch(0.353 0.161 261.8);
+  --tri-tag-success-bg: oklch(0.958 0.016 187.3);
+  --tri-tag-success-fg: oklch(0.424 0.066 182.1);
+  --tri-tag-warning-bg: oklch(0.969 0.034 86.3);
+  --tri-tag-warning-fg: oklch(0.443 0.125 43.7);
+  --tri-terminal-bg: oklch(0.968 0.005 245);
+  --tri-terminal-black: oklch(0.462 0.014 245);
+  --tri-terminal-blue: oklch(0.44 0.18 262);
+  --tri-terminal-border: oklch(0.832 0.01 245);
+  --tri-terminal-bright-black: oklch(0.462 0.014 245);
+  --tri-terminal-bright-blue: oklch(0.4 0.17 262);
+  --tri-terminal-bright-cyan: oklch(0.36 0.09 195);
+  --tri-terminal-bright-green: oklch(0.34 0.13 155);
+  --tri-terminal-bright-magenta: oklch(0.42 0.19 290);
+  --tri-terminal-bright-red: oklch(0.44 0.17 25);
+  --tri-terminal-bright-white: oklch(0.184 0.008 245);
+  --tri-terminal-bright-yellow: oklch(0.38 0.13 75);
+  --tri-terminal-cursor: oklch(0.184 0.008 245);
+  --tri-terminal-cyan: oklch(0.4 0.1 195);
+  --tri-terminal-green: oklch(0.38 0.15 145);
+  --tri-terminal-magenta: oklch(0.46 0.2 290);
+  --tri-terminal-muted: oklch(0.462 0.014 245);
+  --tri-terminal-red: oklch(0.48 0.2 25);
+  --tri-terminal-surface: oklch(0.985 0.004 245);
+  --tri-terminal-text: oklch(0.184 0.008 245);
+  --tri-terminal-white: oklch(0.184 0.008 245);
+  --tri-terminal-yellow: oklch(0.42 0.14 65);
+  --tri-tertiary-foreground: oklch(0.55 0.016 245);
+  --tri-text-error: oklch(0.566 0.208 23);
+  --tri-text-info: oklch(0.546 0.219 262);
+  --tri-text-premium: oklch(0.548 0.275 291.4);
+  --tri-text-success: oklch(0.544 0.08 182.8);
+  --tri-text-text: oklch(0 0 0);
+  --tri-text-warning: oklch(0.564 0.149 49.6);
+  --tri-tooltip-kbd-bg: oklch(1 0 0 / 0.12);
+  --tri-trust-community: oklch(0.55 0.016 245);
+  --tri-trust-community-bg: transparent;
+  --tri-trust-community-border: oklch(0.832 0.01 245);
+  --tri-trust-community-text: oklch(0.55 0.016 245);
+  --tri-trust-hardened: oklch(0.462 0.014 245);
+  --tri-trust-hardened-bg: oklch(0.968 0.005 245);
+  --tri-trust-hardened-border: oklch(0.832 0.01 245);
+  --tri-trust-hardened-text: oklch(0.462 0.014 245);
+  --tri-trust-official: oklch(0.546 0.219 262);
+  --tri-trust-official-bg: oklch(0.933 0.029 241.4);
+  --tri-trust-official-border: oklch(0.64 0.169 249.4);
+  --tri-trust-official-text: oklch(0.353 0.161 261.8);
+  --tri-trust-verified: oklch(0.64 0.169 249.4);
+  --tri-trust-verified-bg: oklch(0.954 0.019 240.7);
+  --tri-trust-verified-border: oklch(0.661 0.014 245);
+  --tri-trust-verified-text: oklch(0.462 0.014 245);
+  --tri-warning: oklch(0.564 0.149 49.6);
+  --tri-warning-foreground: oklch(1 0 0);
+  --tri-warning-hover: oklch(0.443 0.125 43.7);
+  --tri-warning-subtle: oklch(0.443 0.125 43.7 / 0.1);
+  --tri-warning-wash: oklch(0.443 0.125 43.7 / 0.06);
+}
+
+.dark {
+  --tri-accent: oklch(0.214 0.008 245);
+  --tri-accent-active: oklch(0.806 0.09 242.2);
+  --tri-accent-foreground: oklch(0.913 0.007 245);
+  --tri-accent-hover: oklch(0.633 0.199 257.2);
+  --tri-accent-subtle: oklch(0.633 0.199 257.2 / 0.1);
+  --tri-accent-track: oklch(0.633 0.199 257.2 / 0.2);
+  --tri-accent-track-fill: oklch(0.633 0.199 257.2 / 0.4);
+  --tri-accent-wash: oklch(0.633 0.199 257.2 / 0.06);
+  --tri-action-disabled: oklch(0.366 0.012 245);
+  --tri-action-disabled-bg: oklch(1 0 0 / 0.12);
+  --tri-action-focus: oklch(1 0 0 / 0.24);
+  --tri-action-hover: oklch(1 0 0 / 0.12);
+  --tri-action-selected: oklch(1 0 0 / 0.16);
+  --tri-active-overlay: oklch(1 0 0 / 0.1);
+  --tri-alert-error-bg: oklch(0.225 0.068 16.7);
+  --tri-alert-error-border: oklch(0.69 0.199 22.3 / 0.56);
+  --tri-alert-error-fg: oklch(0.861 0.075 16.7);
+  --tri-alert-error-icon: oklch(0.69 0.199 22.3);
+  --tri-alert-error-title: oklch(0.773 0.134 18.9);
+  --tri-alert-info-bg: oklch(0.208 0.081 259.1);
+  --tri-alert-info-border: oklch(0.633 0.199 257.2 / 0.56);
+  --tri-alert-info-fg: oklch(0.806 0.09 242.2);
+  --tri-alert-info-icon: oklch(0.633 0.199 257.2);
+  --tri-alert-info-title: oklch(0.806 0.09 242.2);
+  --tri-alert-premium-bg: oklch(0.208 0.111 300.8);
+  --tri-alert-premium-border: oklch(0.63 0.225 295.4 / 0.56);
+  --tri-alert-premium-fg: oklch(0.845 0.095 304.4);
+  --tri-alert-premium-icon: oklch(0.63 0.225 295.4);
+  --tri-alert-premium-title: oklch(0.789 0.128 301.6);
+  --tri-alert-success-bg: oklch(0.268 0.038 183.9);
+  --tri-alert-success-border: oklch(0.642 0.097 178.3 / 0.56);
+  --tri-alert-success-fg: oklch(0.817 0.082 175);
+  --tri-alert-success-icon: oklch(0.642 0.097 178.3);
+  --tri-alert-success-title: oklch(0.73 0.089 176.7);
+  --tri-alert-warning-bg: oklch(0.274 0.071 48.2);
+  --tri-alert-warning-border: oklch(0.666 0.158 55.8 / 0.56);
+  --tri-alert-warning-fg: oklch(0.919 0.078 85.1);
+  --tri-alert-warning-icon: oklch(0.666 0.158 55.8);
+  --tri-alert-warning-title: oklch(0.747 0.15 65.3);
+  --tri-artifact: oklch(0.73 0.089 176.7);
+  --tri-artifact-foreground: oklch(0.268 0.038 183.9);
+  --tri-background: oklch(0.1 0.008 245);
+  --tri-background-paper-elevation-0: oklch(0.184 0.008 245);
+  --tri-background-paper-elevation-1: oklch(0.184 0.008 245);
+  --tri-background-paper-elevation-2: oklch(0.214 0.008 245);
+  --tri-background-paper-elevation-3: oklch(0.214 0.008 245);
+  --tri-background-paper-elevation-4: oklch(0.214 0.008 245);
+  --tri-background-primary: oklch(0.184 0.008 245);
+  --tri-background-secondary: oklch(0 0 0);
+  --tri-blockquote-caution-bg: oklch(0.69 0.199 22.3 / 0.16);
+  --tri-blockquote-caution-title: oklch(0.69 0.199 22.3);
+  --tri-blockquote-important: oklch(0.63 0.225 295.4);
+  --tri-blockquote-important-bg: oklch(0.63 0.225 295.4 / 0.16);
+  --tri-blockquote-important-title: oklch(0.789 0.128 301.6);
+  --tri-blockquote-note: oklch(0.633 0.199 257.2);
+  --tri-blockquote-note-bg: oklch(0.633 0.199 257.2 / 0.16);
+  --tri-blockquote-note-title: oklch(0.64 0.169 249.4);
+  --tri-blockquote-tip-bg: oklch(0.642 0.097 178.3 / 0.16);
+  --tri-blockquote-tip-title: oklch(0.73 0.089 176.7);
+  --tri-blockquote-warning-bg: oklch(0.666 0.158 55.8 / 0.16);
+  --tri-blockquote-warning-title: oklch(0.747 0.15 65.3);
+  --tri-border: oklch(0.366 0.012 245);
+  --tri-border-accent: oklch(0.633 0.199 257.2 / 0.2);
+  --tri-border-subtle: oklch(0.214 0.008 245);
+  --tri-canvas-bg: oklch(0 0 0);
+  --tri-card: oklch(0.16 0.012 245);
+  --tri-card-foreground: oklch(0.913 0.007 245);
+  --tri-chart-1: oklch(0.455 0.198 262.2);
+  --tri-chart-2: oklch(0.546 0.219 262);
+  --tri-chart-3: oklch(0.64 0.169 249.4);
+  --tri-chart-4: oklch(0.63 0.225 295.4);
+  --tri-chart-5: oklch(0.789 0.128 301.6);
+  --tri-chart-6: oklch(0.642 0.097 178.3);
+  --tri-chart-7: oklch(0.666 0.158 55.8);
+  --tri-chart-8: oklch(0.566 0.208 23);
+  --tri-destructive: oklch(0.69 0.199 22.3);
+  --tri-destructive-active: oklch(0.861 0.075 16.7);
+  --tri-destructive-foreground: oklch(0.225 0.068 16.7);
+  --tri-destructive-hover: oklch(0.773 0.134 18.9);
+  --tri-destructive-link-hover: oklch(0.566 0.208 23);
+  --tri-destructive-ring: oklch(0.69 0.199 22.3 / 0.75);
+  --tri-destructive-subtle: oklch(0.69 0.199 22.3 / 0.12);
+  --tri-destructive-wash: oklch(0.69 0.199 22.3 / 0.08);
+  --tri-diff-added-bg: oklch(0.72 0.17 145 / 0.1);
+  --tri-diff-added-text: oklch(0.72 0.17 145);
+  --tri-diff-hunk-bg: oklch(0.633 0.199 257.2 / 0.1);
+  --tri-diff-removed-bg: oklch(0.69 0.199 22.3 / 0.1);
+  --tri-diff-removed-text: oklch(0.69 0.199 22.3);
+  --tri-disabled-foreground: oklch(0.366 0.012 245);
+  --tri-foreground: oklch(0.913 0.007 245);
+  --tri-grade-a: oklch(0.642 0.097 178.3);
+  --tri-grade-a-bg: oklch(0.642 0.097 178.3 / 0.16);
+  --tri-grade-a-border: oklch(0.642 0.097 178.3 / 0.56);
+  --tri-grade-a-text: oklch(0.817 0.082 175);
+  --tri-grade-b: oklch(0.544 0.08 182.8);
+  --tri-grade-b-bg: oklch(0.633 0.199 257.2 / 0.16);
+  --tri-grade-b-border: oklch(0.633 0.199 257.2 / 0.56);
+  --tri-grade-b-fg: oklch(0.968 0.005 245);
+  --tri-grade-b-text: oklch(0.806 0.09 242.2);
+  --tri-grade-c: oklch(0.564 0.149 49.6);
+  --tri-grade-c-bg: oklch(0.666 0.158 55.8 / 0.16);
+  --tri-grade-c-border: oklch(0.666 0.158 55.8 / 0.56);
+  --tri-grade-c-fg: oklch(0.968 0.005 245);
+  --tri-grade-c-text: oklch(0.821 0.14 72.9);
+  --tri-grade-d: oklch(0.666 0.158 55.8);
+  --tri-grade-d-bg: oklch(0.69 0.199 22.3 / 0.12);
+  --tri-grade-d-border: oklch(0.69 0.199 22.3 / 0.56);
+  --tri-grade-d-text: oklch(0.773 0.134 18.9);
+  --tri-grade-e: oklch(0.69 0.199 22.3);
+  --tri-grade-e-bg: oklch(0.69 0.199 22.3 / 0.16);
+  --tri-grade-e-border: oklch(0.69 0.199 22.3 / 0.56);
+  --tri-grade-e-text: oklch(0.773 0.134 18.9);
+  --tri-grade-f: oklch(0.566 0.208 23);
+  --tri-grade-f-bg: oklch(0.69 0.199 22.3 / 0.16);
+  --tri-grade-f-border: oklch(0.69 0.199 22.3 / 0.56);
+  --tri-grade-f-text: oklch(0.773 0.134 18.9);
+  --tri-header-accent: oklch(0.208 0.081 259.1);
+  --tri-header-foreground-muted: oklch(0.892 0.049 242.8);
+  --tri-header-from: oklch(0.353 0.161 261.8);
+  --tri-header-to: oklch(0.455 0.198 262.2);
+  --tri-hover-overlay: oklch(1 0 0 / 0.06);
+  --tri-info: oklch(0.633 0.199 257.2);
+  --tri-info-foreground: oklch(0.208 0.081 259.1);
+  --tri-input-bg: oklch(0.184 0.008 245);
+  --tri-invalid-ring: oklch(0.69 0.199 22.3 / 0.2);
+  --tri-link-hover: oklch(0.633 0.199 257.2);
+  --tri-log-warn-bg: oklch(0.274 0.071 48.2);
+  --tri-muted: oklch(0.2 0.014 245);
+  --tri-muted-foreground: oklch(0.661 0.014 245);
+  --tri-muted-foreground-decoration: oklch(0.661 0.014 245 / 0.5);
+  --tri-muted-foreground-track: oklch(0.661 0.014 245 / 0.4);
+  --tri-overlay-backdrop: oklch(0 0 0 / 0.25);
+  --tri-overlay-frosted: oklch(0.184 0.008 245 / 0.7);
+  --tri-overlay-scrim: oklch(0 0 0 / 0.4);
+  --tri-popover: oklch(0.23 0.014 245);
+  --tri-popover-foreground: oklch(0.913 0.007 245);
+  --tri-premium: oklch(0.63 0.225 295.4);
+  --tri-premium-foreground: oklch(0.208 0.111 300.8);
+  --tri-premium-hover: oklch(0.789 0.128 301.6);
+  --tri-primary: oklch(0.64 0.169 249.4);
+  --tri-primary-foreground: oklch(0.184 0.008 245);
+  --tri-primary-foreground-wash: oklch(0.184 0.008 245 / 0.1);
+  --tri-primary-subtle: oklch(0.633 0.199 257.2 / 0.12);
+  --tri-primary-wash: oklch(0.633 0.199 257.2 / 0.06);
+  --tri-product-gradient-admin-from: oklch(0.63 0.225 295.4);
+  --tri-product-gradient-admin-to: oklch(0.633 0.199 257.2);
+  --tri-product-gradient-build-from: oklch(0.69 0.245 329.8);
+  --tri-product-gradient-build-to: oklch(0.633 0.199 257.2);
+  --tri-product-gradient-desktop-from: oklch(0.64 0.169 249.4);
+  --tri-product-gradient-desktop-to: oklch(0.633 0.199 257.2);
+  --tri-product-gradient-docs-from: oklch(0.661 0.014 245);
+  --tri-product-gradient-docs-to: oklch(0.633 0.199 257.2);
+  --tri-product-gradient-hub-from: oklch(0.633 0.199 257.2);
+  --tri-product-gradient-hub-to: oklch(0.633 0.199 257.2);
+  --tri-product-gradient-scout-from: oklch(0.642 0.097 178.3);
+  --tri-product-gradient-scout-to: oklch(0.633 0.199 257.2);
+  --tri-promo: oklch(0.747 0.15 65.3);
+  --tri-promo-foreground: oklch(0.274 0.071 48.2);
+  --tri-ring: oklch(0.633 0.199 257.2 / 0.75);
+  --tri-scrollbar-thumb: oklch(1 0 0 / 0.24);
+  --tri-scrollbar-thumb-hover: oklch(1 0 0 / 0.4);
+  --tri-scrollbar-track: oklch(1 0 0 / 0.04);
+  --tri-secondary: oklch(0.2 0.014 245);
+  --tri-secondary-foreground: oklch(0.832 0.01 245);
+  --tri-secondary-hover: oklch(0.366 0.012 245);
+  --tri-selected-overlay: oklch(1 0 0 / 0.14);
+  --tri-severity-critical: oklch(0.773 0.134 18.9);
+  --tri-severity-critical-fg: oklch(0.184 0.008 245);
+  --tri-severity-high: oklch(0.821 0.14 72.9);
+  --tri-severity-high-fg: oklch(0.184 0.008 245);
+  --tri-severity-info: oklch(0.661 0.014 245);
+  --tri-severity-info-fg: oklch(0.184 0.008 245);
+  --tri-severity-low-border: transparent;
+  --tri-severity-medium-border: transparent;
+  --tri-severity-medium-fg: oklch(0.214 0.008 245);
+  --tri-severity-none-fg: oklch(0.366 0.012 245);
+  --tri-sidebar: oklch(0.16 0.012 245);
+  --tri-sidebar-accent: oklch(0.214 0.008 245);
+  --tri-sidebar-accent-foreground: oklch(1 0 0);
+  --tri-sidebar-border: oklch(1 0 0 / 0.12);
+  --tri-sidebar-foreground: oklch(1 0 0);
+  --tri-sidebar-foreground-muted: oklch(0.661 0.014 245);
+  --tri-sidebar-primary-foreground: oklch(0.832 0.01 245);
+  --tri-sidebar-ring: oklch(0.633 0.199 257.2);
+  --tri-status-active: oklch(0.642 0.097 178.3);
+  --tri-status-deprecated: oklch(0.666 0.158 55.8);
+  --tri-status-eol: oklch(0.69 0.199 22.3);
+  --tri-status-error: oklch(0.69 0.199 22.3);
+  --tri-status-error-text: oklch(0.69 0.199 22.3);
+  --tri-status-paused-text: oklch(0.666 0.158 55.8);
+  --tri-status-running: oklch(0.72 0.17 145);
+  --tri-status-running-text: oklch(0.73 0.089 176.7);
+  --tri-status-stopped: oklch(0.661 0.014 245);
+  --tri-success: oklch(0.73 0.089 176.7);
+  --tri-success-foreground: oklch(0.268 0.038 183.9);
+  --tri-success-hover: oklch(0.817 0.082 175);
+  --tri-success-wash: oklch(0.73 0.089 176.7 / 0.08);
+  --tri-syntax-attr: oklch(0.73 0.089 176.7);
+  --tri-syntax-command: oklch(0.789 0.128 301.6);
+  --tri-syntax-comment: oklch(0.661 0.014 245);
+  --tri-syntax-directive: oklch(0.64 0.169 249.4);
+  --tri-syntax-keyword: oklch(0.69 0.199 22.3);
+  --tri-syntax-number: oklch(0.747 0.15 65.3);
+  --tri-syntax-string: oklch(0.73 0.089 176.7);
+  --tri-syntax-type: oklch(0.789 0.128 301.6);
+  --tri-syntax-value: oklch(0.661 0.014 245);
+  --tri-tag-default-bg: oklch(0.184 0.008 245);
+  --tri-tag-default-fg: oklch(0.832 0.01 245);
+  --tri-tag-destructive-bg: oklch(0.225 0.068 16.7);
+  --tri-tag-destructive-fg: oklch(0.773 0.134 18.9);
+  --tri-tag-info-bg: oklch(0.208 0.081 259.1);
+  --tri-tag-info-fg: oklch(0.806 0.09 242.2);
+  --tri-tag-premium-bg: oklch(0.208 0.111 300.8);
+  --tri-tag-premium-fg: oklch(0.789 0.128 301.6);
+  --tri-tag-primary-bg: oklch(0.208 0.081 259.1);
+  --tri-tag-primary-fg: oklch(0.806 0.09 242.2);
+  --tri-tag-success-bg: oklch(0.268 0.038 183.9);
+  --tri-tag-success-fg: oklch(0.817 0.082 175);
+  --tri-tag-warning-bg: oklch(0.274 0.071 48.2);
+  --tri-tag-warning-fg: oklch(0.821 0.14 72.9);
+  --tri-terminal-bg: oklch(0 0 0);
+  --tri-terminal-black: oklch(0.55 0.016 245);
+  --tri-terminal-blue: oklch(0.68 0.18 262);
+  --tri-terminal-border: oklch(0.214 0.008 245);
+  --tri-terminal-bright-black: oklch(0.661 0.014 245);
+  --tri-terminal-bright-blue: oklch(0.74 0.17 262);
+  --tri-terminal-bright-cyan: oklch(0.78 0.09 195);
+  --tri-terminal-bright-green: oklch(0.78 0.15 155);
+  --tri-terminal-bright-magenta: oklch(0.74 0.19 290);
+  --tri-terminal-bright-red: oklch(0.78 0.17 25);
+  --tri-terminal-bright-white: oklch(0.913 0.007 245);
+  --tri-terminal-bright-yellow: oklch(0.81 0.14 65);
+  --tri-terminal-cursor: oklch(0.913 0.007 245);
+  --tri-terminal-cyan: oklch(0.72 0.1 195);
+  --tri-terminal-green: oklch(0.72 0.17 145);
+  --tri-terminal-magenta: oklch(0.68 0.2 290);
+  --tri-terminal-muted: oklch(0.55 0.016 245);
+  --tri-terminal-red: oklch(0.72 0.2 25);
+  --tri-terminal-surface: oklch(0.184 0.008 245);
+  --tri-terminal-text: oklch(0.913 0.007 245);
+  --tri-terminal-white: oklch(0.913 0.007 245);
+  --tri-terminal-yellow: oklch(0.75 0.15 65);
+  --tri-text-error: oklch(0.69 0.199 22.3);
+  --tri-text-info: oklch(0.633 0.199 257.2);
+  --tri-text-premium: oklch(0.63 0.225 295.4);
+  --tri-text-success: oklch(0.642 0.097 178.3);
+  --tri-text-text: oklch(0.913 0.007 245);
+  --tri-text-warning: oklch(0.666 0.158 55.8);
+  --tri-tooltip-kbd-bg: oklch(0 0 0 / 0.12);
+  --tri-trust-community-border: oklch(0.462 0.014 245);
+  --tri-trust-hardened: oklch(0.661 0.014 245);
+  --tri-trust-hardened-bg: oklch(0.184 0.008 245);
+  --tri-trust-hardened-border: oklch(0.55 0.016 245);
+  --tri-trust-hardened-text: oklch(0.661 0.014 245);
+  --tri-trust-official: oklch(0.633 0.199 257.2);
+  --tri-trust-official-bg: oklch(0.208 0.081 259.1);
+  --tri-trust-official-border: oklch(0.55 0.016 245);
+  --tri-trust-official-text: oklch(0.806 0.09 242.2);
+  --tri-trust-verified: oklch(0.546 0.219 262);
+  --tri-trust-verified-bg: oklch(0.184 0.008 245);
+  --tri-trust-verified-border: oklch(0.55 0.016 245);
+  --tri-trust-verified-text: oklch(0.661 0.014 245);
+  --tri-vulnerability-chip-critical: oklch(0.756 0.119 11.8);
+  --tri-vulnerability-chip-high: oklch(0.73 0.158 61.3);
+  --tri-vulnerability-chip-low: oklch(0.487 0.128 50.6);
+  --tri-vulnerability-chip-medium: oklch(0.666 0.158 55.8);
+  --tri-vulnerability-chip-unspecified: oklch(0.214 0.008 245);
+  --tri-warning: oklch(0.666 0.158 55.8);
+  --tri-warning-foreground: oklch(0.274 0.071 48.2);
+  --tri-warning-hover: oklch(0.821 0.14 72.9);
+  --tri-warning-subtle: oklch(0.747 0.15 65.3 / 0.12);
+  --tri-warning-wash: oklch(0.747 0.15 65.3 / 0.08);
+}
+
+.high-contrast {
+  --tri-accent: oklch(0.462 0.014 245);
+  --tri-accent-active: oklch(0.546 0.219 262);
+  --tri-accent-foreground: oklch(1 0 0);
+  --tri-accent-hover: oklch(0.455 0.198 262.2);
+  --tri-accent-subtle: oklch(0.633 0.199 257.2 / 0.2);
+  --tri-accent-track: oklch(0.633 0.199 257.2 / 0.3);
+  --tri-accent-track-fill: oklch(0.633 0.199 257.2 / 0.6);
+  --tri-accent-wash: oklch(0.633 0.199 257.2 / 0.15);
+  --tri-action-disabled: oklch(0.55 0.016 245);
+  --tri-action-disabled-bg: oklch(0.214 0.008 245);
+  --tri-action-focus: oklch(1 0 0 / 0.4);
+  --tri-action-hover: oklch(1 0 0 / 0.2);
+  --tri-action-selected: oklch(1 0 0 / 0.25);
+  --tri-active-overlay: oklch(1 0 0 / 0.15);
+  --tri-alert-error-bg: oklch(0.225 0.068 16.7);
+  --tri-alert-error-border: oklch(0.773 0.134 18.9);
+  --tri-alert-error-fg: oklch(0.861 0.075 16.7);
+  --tri-alert-error-icon: oklch(0.773 0.134 18.9);
+  --tri-alert-error-title: oklch(0.861 0.075 16.7);
+  --tri-alert-info-bg: oklch(0.208 0.081 259.1);
+  --tri-alert-info-border: oklch(0.806 0.09 242.2);
+  --tri-alert-info-fg: oklch(0.892 0.049 242.8);
+  --tri-alert-info-icon: oklch(0.806 0.09 242.2);
+  --tri-alert-info-title: oklch(0.892 0.049 242.8);
+  --tri-alert-premium-bg: oklch(0.208 0.111 300.8);
+  --tri-alert-premium-border: oklch(0.789 0.128 301.6);
+  --tri-alert-premium-fg: oklch(0.845 0.095 304.4);
+  --tri-alert-premium-icon: oklch(0.789 0.128 301.6);
+  --tri-alert-premium-title: oklch(0.845 0.095 304.4);
+  --tri-alert-success-bg: oklch(0.268 0.038 183.9);
+  --tri-alert-success-border: oklch(0.73 0.089 176.7);
+  --tri-alert-success-fg: oklch(0.817 0.082 175);
+  --tri-alert-success-icon: oklch(0.73 0.089 176.7);
+  --tri-alert-success-title: oklch(0.817 0.082 175);
+  --tri-alert-warning-bg: oklch(0.274 0.071 48.2);
+  --tri-alert-warning-border: oklch(0.747 0.15 65.3);
+  --tri-alert-warning-fg: oklch(0.821 0.14 72.9);
+  --tri-alert-warning-icon: oklch(0.747 0.15 65.3);
+  --tri-alert-warning-title: oklch(0.821 0.14 72.9);
+  --tri-background: oklch(0 0 0);
+  --tri-background-paper-elevation-0: oklch(0 0 0);
+  --tri-background-paper-elevation-1: oklch(0 0 0);
+  --tri-background-paper-elevation-2: oklch(0 0 0);
+  --tri-background-paper-elevation-3: oklch(0 0 0);
+  --tri-background-paper-elevation-4: oklch(0 0 0);
+  --tri-background-primary: oklch(0 0 0);
+  --tri-background-secondary: oklch(0 0 0);
+  --tri-blockquote-caution: oklch(0.773 0.134 18.9);
+  --tri-blockquote-caution-bg: oklch(0.773 0.134 18.9 / 0.2);
+  --tri-blockquote-caution-title: oklch(0.773 0.134 18.9);
+  --tri-blockquote-important: oklch(0.789 0.128 301.6);
+  --tri-blockquote-important-bg: oklch(0.789 0.128 301.6 / 0.2);
+  --tri-blockquote-important-title: oklch(0.789 0.128 301.6);
+  --tri-blockquote-note: oklch(0.806 0.09 242.2);
+  --tri-blockquote-note-bg: oklch(0.806 0.09 242.2 / 0.2);
+  --tri-blockquote-note-title: oklch(0.806 0.09 242.2);
+  --tri-blockquote-tip: oklch(0.73 0.089 176.7);
+  --tri-blockquote-tip-bg: oklch(0.73 0.089 176.7 / 0.2);
+  --tri-blockquote-tip-title: oklch(0.73 0.089 176.7);
+  --tri-blockquote-warning: oklch(0.747 0.15 65.3);
+  --tri-blockquote-warning-bg: oklch(0.747 0.15 65.3 / 0.2);
+  --tri-blockquote-warning-title: oklch(0.747 0.15 65.3);
+  --tri-border: oklch(1 0 0);
+  --tri-border-accent: oklch(0.546 0.219 262);
+  --tri-border-subtle: oklch(0.462 0.014 245);
+  --tri-canvas-bg: oklch(0 0 0);
+  --tri-card: oklch(0 0 0);
+  --tri-card-foreground: oklch(1 0 0);
+  --tri-chart-1: oklch(0.892 0.049 242.8);
+  --tri-chart-2: oklch(0.806 0.09 242.2);
+  --tri-chart-3: oklch(0.64 0.169 249.4);
+  --tri-chart-4: oklch(0.789 0.128 301.6);
+  --tri-chart-5: oklch(0.63 0.225 295.4);
+  --tri-chart-6: oklch(0.73 0.089 176.7);
+  --tri-chart-7: oklch(0.747 0.15 65.3);
+  --tri-chart-8: oklch(0.773 0.134 18.9);
+  --tri-destructive: oklch(0.952 0.021 17.5);
+  --tri-destructive-active: oklch(0.507 0.184 21.7);
+  --tri-destructive-foreground: oklch(0.416 0.148 22.1);
+  --tri-destructive-hover: oklch(0.507 0.184 21.7);
+  --tri-destructive-link-hover: oklch(0.566 0.208 23);
+  --tri-destructive-ring: oklch(0.952 0.021 17.5 / 0.75);
+  --tri-destructive-subtle: oklch(0.69 0.199 22.3 / 0.2);
+  --tri-destructive-wash: oklch(0.69 0.199 22.3 / 0.15);
+  --tri-diff-added-bg: oklch(0.642 0.097 178.3 / 0.2);
+  --tri-diff-added-text: oklch(0.544 0.08 182.8);
+  --tri-diff-hunk-bg: oklch(0.633 0.199 257.2 / 0.2);
+  --tri-diff-removed-bg: oklch(0.69 0.199 22.3 / 0.2);
+  --tri-diff-removed-text: oklch(0.566 0.208 23);
+  --tri-foreground: oklch(1 0 0);
+  --tri-grade-a: oklch(0.958 0.016 187.3);
+  --tri-grade-a-bg: oklch(0.642 0.097 178.3 / 0.2);
+  --tri-grade-a-border: oklch(0.544 0.08 182.8);
+  --tri-grade-a-fg: oklch(0.424 0.066 182.1);
+  --tri-grade-a-text: oklch(0.73 0.089 176.7);
+  --tri-grade-b: oklch(0.954 0.019 240.7);
+  --tri-grade-b-bg: oklch(0.633 0.199 257.2 / 0.2);
+  --tri-grade-b-border: oklch(0.546 0.219 262);
+  --tri-grade-b-fg: oklch(0.353 0.161 261.8);
+  --tri-grade-b-text: oklch(0.806 0.09 242.2);
+  --tri-grade-c: oklch(0.969 0.034 86.3);
+  --tri-grade-c-bg: oklch(0.666 0.158 55.8 / 0.2);
+  --tri-grade-c-border: oklch(0.564 0.149 49.6);
+  --tri-grade-c-fg: oklch(0.443 0.125 43.7);
+  --tri-grade-c-text: oklch(0.747 0.15 65.3);
+  --tri-grade-d: oklch(0.952 0.021 17.5);
+  --tri-grade-d-bg: oklch(0.69 0.199 22.3 / 0.15);
+  --tri-grade-d-border: oklch(0.566 0.208 23);
+  --tri-grade-d-fg: oklch(0.416 0.148 22.1);
+  --tri-grade-d-text: oklch(0.773 0.134 18.9);
+  --tri-grade-e: oklch(0.952 0.021 17.5);
+  --tri-grade-e-bg: oklch(0.69 0.199 22.3 / 0.2);
+  --tri-grade-e-border: oklch(0.566 0.208 23);
+  --tri-grade-e-fg: oklch(0.416 0.148 22.1);
+  --tri-grade-e-text: oklch(0.773 0.134 18.9);
+  --tri-grade-f: oklch(0.952 0.021 17.5);
+  --tri-grade-f-bg: oklch(0.69 0.199 22.3 / 0.2);
+  --tri-grade-f-border: oklch(0.566 0.208 23);
+  --tri-grade-f-fg: oklch(0.416 0.148 22.1);
+  --tri-grade-f-text: oklch(0.773 0.134 18.9);
+  --tri-header-foreground: oklch(1 0 0);
+  --tri-header-foreground-muted: oklch(0.968 0.005 245);
+  --tri-header-from: oklch(0 0 0);
+  --tri-header-ring: oklch(1 0 0);
+  --tri-header-to: oklch(0 0 0);
+  --tri-hover-overlay: oklch(1 0 0 / 0.12);
+  --tri-info: oklch(0.954 0.019 240.7);
+  --tri-info-foreground: oklch(0.353 0.161 261.8);
+  --tri-input: oklch(1 0 0);
+  --tri-input-bg: oklch(0 0 0);
+  --tri-invalid-ring: oklch(0.952 0.021 17.5 / 0.2);
+  --tri-link-hover: oklch(0.806 0.09 242.2);
+  --tri-log-warn-bg: oklch(0.274 0.071 48.2);
+  --tri-muted: oklch(0.214 0.008 245);
+  --tri-muted-foreground: oklch(0.968 0.005 245);
+  --tri-muted-foreground-decoration: oklch(0.832 0.01 245 / 0.7);
+  --tri-muted-foreground-track: oklch(0.832 0.01 245 / 0.6);
+  --tri-overlay-backdrop: oklch(0 0 0 / 0.8);
+  --tri-overlay-frosted: oklch(0 0 0 / 0.85);
+  --tri-overlay-scrim: oklch(0 0 0 / 0.8);
+  --tri-popover: oklch(0 0 0);
+  --tri-popover-foreground: oklch(1 0 0);
+  --tri-premium: oklch(0.957 0.028 311.3);
+  --tri-premium-foreground: oklch(0.414 0.232 291.7);
+  --tri-premium-hover: oklch(0.63 0.225 295.4);
+  --tri-primary: oklch(0.954 0.019 240.7);
+  --tri-primary-foreground: oklch(0.353 0.161 261.8);
+  --tri-primary-foreground-wash: oklch(0.806 0.09 242.2 / 0.15);
+  --tri-product-gradient-admin-from: oklch(0.789 0.128 301.6);
+  --tri-product-gradient-admin-to: oklch(0.806 0.09 242.2);
+  --tri-product-gradient-build-from: oklch(0.789 0.128 301.6);
+  --tri-product-gradient-build-to: oklch(0.806 0.09 242.2);
+  --tri-product-gradient-desktop-from: oklch(0.64 0.169 249.4);
+  --tri-product-gradient-desktop-to: oklch(0.806 0.09 242.2);
+  --tri-product-gradient-docs-from: oklch(0.832 0.01 245);
+  --tri-product-gradient-docs-to: oklch(0.806 0.09 242.2);
+  --tri-product-gradient-hub-from: oklch(0.806 0.09 242.2);
+  --tri-product-gradient-hub-to: oklch(0.64 0.169 249.4);
+  --tri-product-gradient-scout-from: oklch(0.73 0.089 176.7);
+  --tri-product-gradient-scout-to: oklch(0.806 0.09 242.2);
+  --tri-ring: oklch(0.806 0.09 242.2);
+  --tri-scrollbar-thumb: oklch(1 0 0 / 0.4);
+  --tri-scrollbar-thumb-hover: oklch(1 0 0 / 0.6);
+  --tri-scrollbar-track: oklch(1 0 0 / 0.08);
+  --tri-secondary: oklch(0.462 0.014 245);
+  --tri-secondary-foreground: oklch(1 0 0);
+  --tri-secondary-hover: oklch(0.661 0.014 245);
+  --tri-selected-overlay: oklch(1 0 0 / 0.18);
+  --tri-severity-critical: oklch(0.952 0.021 17.5);
+  --tri-severity-critical-fg: oklch(0.416 0.148 22.1);
+  --tri-severity-high: oklch(0.821 0.14 72.9);
+  --tri-severity-high-fg: oklch(0.274 0.071 48.2);
+  --tri-severity-info: oklch(0.661 0.014 245);
+  --tri-severity-info-fg: oklch(0.184 0.008 245);
+  --tri-severity-low: oklch(0.968 0.005 245);
+  --tri-severity-low-border: oklch(0.55 0.016 245);
+  --tri-severity-low-fg: oklch(0.184 0.008 245);
+  --tri-severity-medium: oklch(0.969 0.034 86.3);
+  --tri-severity-medium-border: oklch(0.443 0.125 43.7);
+  --tri-severity-medium-fg: oklch(0.443 0.125 43.7);
+  --tri-severity-none: oklch(0.214 0.008 245);
+  --tri-severity-none-fg: oklch(0.968 0.005 245);
+  --tri-sidebar: oklch(0 0 0);
+  --tri-sidebar-accent: oklch(0.214 0.008 245);
+  --tri-sidebar-accent-foreground: oklch(1 0 0);
+  --tri-sidebar-border: oklch(1 0 0);
+  --tri-sidebar-foreground: oklch(1 0 0);
+  --tri-sidebar-foreground-muted: oklch(0.661 0.014 245);
+  --tri-sidebar-primary: oklch(0.546 0.219 262);
+  --tri-sidebar-primary-foreground: oklch(1 0 0);
+  --tri-sidebar-ring: oklch(0.546 0.219 262);
+  --tri-status-active: oklch(0.73 0.089 176.7);
+  --tri-status-deprecated: oklch(0.747 0.15 65.3);
+  --tri-status-eol: oklch(0.773 0.134 18.9);
+  --tri-status-error: oklch(0.773 0.134 18.9);
+  --tri-status-error-text: oklch(0.773 0.134 18.9);
+  --tri-status-paused: oklch(0.747 0.15 65.3);
+  --tri-status-paused-text: oklch(0.747 0.15 65.3);
+  --tri-status-running: oklch(0.73 0.089 176.7);
+  --tri-status-running-text: oklch(0.73 0.089 176.7);
+  --tri-status-stopped: oklch(0.832 0.01 245);
+  --tri-success: oklch(0.958 0.016 187.3);
+  --tri-success-foreground: oklch(0.424 0.066 182.1);
+  --tri-success-hover: oklch(0.642 0.097 178.3);
+  --tri-success-wash: oklch(0.642 0.097 178.3 / 0.15);
+  --tri-syntax-attr: oklch(0.73 0.089 176.7);
+  --tri-syntax-command: oklch(0.789 0.128 301.6);
+  --tri-syntax-comment: oklch(0.661 0.014 245);
+  --tri-syntax-directive: oklch(0.892 0.049 242.8);
+  --tri-syntax-keyword: oklch(0.773 0.134 18.9);
+  --tri-syntax-number: oklch(0.747 0.15 65.3);
+  --tri-syntax-string: oklch(0.73 0.089 176.7);
+  --tri-syntax-type: oklch(0.789 0.128 301.6);
+  --tri-syntax-value: oklch(0.661 0.014 245);
+  --tri-tag-default-bg: oklch(0.968 0.005 245);
+  --tri-tag-default-fg: oklch(0.366 0.012 245);
+  --tri-tag-destructive-bg: oklch(0.952 0.021 17.5);
+  --tri-tag-destructive-fg: oklch(0.416 0.148 22.1);
+  --tri-tag-info-bg: oklch(0.954 0.019 240.7);
+  --tri-tag-info-fg: oklch(0.353 0.161 261.8);
+  --tri-tag-premium-bg: oklch(0.957 0.028 311.3);
+  --tri-tag-premium-fg: oklch(0.414 0.232 291.7);
+  --tri-tag-primary-bg: oklch(0.954 0.019 240.7);
+  --tri-tag-primary-fg: oklch(0.353 0.161 261.8);
+  --tri-tag-success-bg: oklch(0.958 0.016 187.3);
+  --tri-tag-success-fg: oklch(0.424 0.066 182.1);
+  --tri-tag-warning-bg: oklch(0.969 0.034 86.3);
+  --tri-tag-warning-fg: oklch(0.443 0.125 43.7);
+  --tri-terminal-bg: oklch(0 0 0);
+  --tri-terminal-black: oklch(1 0 0);
+  --tri-terminal-blue: oklch(0.806 0.09 242.2);
+  --tri-terminal-border: oklch(1 0 0);
+  --tri-terminal-bright-black: oklch(0.661 0.014 245);
+  --tri-terminal-bright-blue: oklch(0.806 0.09 242.2);
+  --tri-terminal-bright-cyan: oklch(0.892 0.049 242.8);
+  --tri-terminal-bright-green: oklch(0.73 0.089 176.7);
+  --tri-terminal-bright-magenta: oklch(0.789 0.128 301.6);
+  --tri-terminal-bright-red: oklch(0.773 0.134 18.9);
+  --tri-terminal-bright-white: oklch(1 0 0);
+  --tri-terminal-bright-yellow: oklch(0.747 0.15 65.3);
+  --tri-terminal-cursor: oklch(1 0 0);
+  --tri-terminal-cyan: oklch(0.892 0.049 242.8);
+  --tri-terminal-green: oklch(0.73 0.089 176.7);
+  --tri-terminal-magenta: oklch(0.789 0.128 301.6);
+  --tri-terminal-muted: oklch(0.661 0.014 245);
+  --tri-terminal-red: oklch(0.773 0.134 18.9);
+  --tri-terminal-surface: oklch(0 0 0);
+  --tri-terminal-text: oklch(1 0 0);
+  --tri-terminal-white: oklch(1 0 0);
+  --tri-terminal-yellow: oklch(0.747 0.15 65.3);
+  --tri-text-error: oklch(0.773 0.134 18.9);
+  --tri-text-info: oklch(0.806 0.09 242.2);
+  --tri-text-premium: oklch(0.789 0.128 301.6);
+  --tri-text-success: oklch(0.73 0.089 176.7);
+  --tri-text-text: oklch(1 0 0);
+  --tri-text-warning: oklch(0.747 0.15 65.3);
+  --tri-tooltip-kbd-bg: oklch(0 0 0);
+  --tri-trust-community: oklch(0.661 0.014 245);
+  --tri-trust-community-bg: transparent;
+  --tri-trust-community-border: oklch(0.661 0.014 245);
+  --tri-trust-community-text: oklch(0.661 0.014 245);
+  --tri-trust-hardened: oklch(0.832 0.01 245);
+  --tri-trust-hardened-bg: oklch(0 0 0);
+  --tri-trust-hardened-border: oklch(0.661 0.014 245);
+  --tri-trust-hardened-text: oklch(0.832 0.01 245);
+  --tri-trust-official: oklch(0.806 0.09 242.2);
+  --tri-trust-official-bg: oklch(0 0 0);
+  --tri-trust-official-border: oklch(0.806 0.09 242.2);
+  --tri-trust-official-text: oklch(0.806 0.09 242.2);
+  --tri-trust-verified: oklch(0.806 0.09 242.2);
+  --tri-trust-verified-bg: oklch(0 0 0);
+  --tri-trust-verified-border: oklch(0.806 0.09 242.2);
+  --tri-trust-verified-text: oklch(0.806 0.09 242.2);
+  --tri-warning: oklch(0.969 0.034 86.3);
+  --tri-warning-foreground: oklch(0.443 0.125 43.7);
+  --tri-warning-hover: oklch(0.673 0.16 57.7);
+}
+}
diff --git a/assets/css/vendor/trident/tri-spacing.css b/assets/css/vendor/trident/tri-spacing.css
new file mode 100644
index 000000000000..447880928784
--- /dev/null
+++ b/assets/css/vendor/trident/tri-spacing.css
@@ -0,0 +1,5 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+@theme inline {
+  --spacing: 4px;
+}
diff --git a/assets/css/vendor/trident/tri-themes.css b/assets/css/vendor/trident/tri-themes.css
new file mode 100644
index 000000000000..b0b779243b3c
--- /dev/null
+++ b/assets/css/vendor/trident/tri-themes.css
@@ -0,0 +1,31 @@
+/* Auto-generated from tokens/src/themes/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+/* Product and marketing themes override spatial/typographic tokens only.
+   Color tokens in theme files are a build error.
+   Apply via: <html class="product"> or <html class="marketing"> */
+
+.marketing {
+  --tri-font-size-base: 16px;
+  --tri-font-weight-body: 400;
+  --tri-font-weight-heading: 800;
+  --tri-font-weight-label: 600;
+  --tri-icon-size-default: 24px;
+  --tri-icon-size-lg: 32px;
+  --tri-icon-size-md: 24px;
+  --tri-icon-size-sm: 20px;
+  --tri-icon-stroke: 2;
+  --tri-radius-default: 8px;
+}
+
+.product {
+  --tri-font-size-base: 14px;
+  --tri-font-weight-body: 420;
+  --tri-font-weight-heading: 680;
+  --tri-font-weight-label: 520;
+  --tri-icon-size-default: 16px;
+  --tri-icon-size-lg: 24px;
+  --tri-icon-size-md: 20px;
+  --tri-icon-size-sm: 16px;
+  --tri-icon-stroke: 1.5;
+  --tri-radius-default: 5px;
+}
diff --git a/assets/css/vendor/trident/tri-tokens.css b/assets/css/vendor/trident/tri-tokens.css
new file mode 100644
index 000000000000..302c023b7cac
--- /dev/null
+++ b/assets/css/vendor/trident/tri-tokens.css
@@ -0,0 +1,10 @@
+/* Auto-generated barrel — DO NOT EDIT */
+@import './tri-primitives.css';
+@import './tri-semantic.css';
+@import './tri-spacing.css';
+@import './tri-typography.css';
+@import './tri-motion.css';
+@import './tri-radius.css';
+@import './tri-elevation.css';
+@import './tri-component.css';
+@import './tri-themes.css';
diff --git a/assets/css/vendor/trident/tri-typography.css b/assets/css/vendor/trident/tri-typography.css
new file mode 100644
index 000000000000..e9a4f51faafe
--- /dev/null
+++ b/assets/css/vendor/trident/tri-typography.css
@@ -0,0 +1,155 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+@layer tri.typography {
+:root {
+  --tri-font-family-display: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-font-family-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
+  --tri-font-family-mono-code: 'JetBrains Mono Variable', 'JetBrains Mono', 'ui-monospace', 'SFMono-Regular', monospace;
+  --tri-font-family-sans: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-font-size-2xl: 24px;
+  --tri-font-size-2xs: 10px;
+  --tri-font-size-3xl: 30px;
+  --tri-font-size-3xs: 9px;
+  --tri-font-size-4xl: 36px;
+  --tri-font-size-5xl: 48px;
+  --tri-font-size-base: 14px;
+  --tri-font-size-lg: 18px;
+  --tri-font-size-md: 16px;
+  --tri-font-size-micro: 11px;
+  --tri-font-size-sm: 14px;
+  --tri-font-size-xl: 20px;
+  --tri-font-size-xs: 12px;
+  --tri-font-weight-black: 900;
+  --tri-font-weight-body: 420;
+  --tri-font-weight-bold: 700;
+  --tri-font-weight-extrabold: 800;
+  --tri-font-weight-extralight: 200;
+  --tri-font-weight-heading: 680;
+  --tri-font-weight-label: 520;
+  --tri-font-weight-light: 300;
+  --tri-font-weight-medium: 500;
+  --tri-font-weight-mono: 400;
+  --tri-font-weight-regular: 400;
+  --tri-font-weight-semibold: 600;
+  --tri-font-weight-thin: 100;
+  --tri-letter-spacing-normal: 0em;
+  --tri-letter-spacing-tight: -0.025em;
+  --tri-letter-spacing-tighter: -0.05em;
+  --tri-letter-spacing-wide: 0.025em;
+  --tri-letter-spacing-wider: 0.05em;
+  --tri-letter-spacing-widest: 0.1em;
+  --tri-line-height-comfortable: 1.45;
+  --tri-line-height-loose: 2;
+  --tri-line-height-none: 1;
+  --tri-line-height-normal: 1.5;
+  --tri-line-height-reading: 1.55;
+  --tri-line-height-relaxed: 1.625;
+  --tri-line-height-snug: 1.375;
+  --tri-line-height-tight: 1.25;
+  --tri-scale-body-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-body-font-size: 16px;
+  --tri-scale-body-font-weight: 420;
+  --tri-scale-body-letter-spacing: -0.008em;
+  --tri-scale-body-line-height: 1.625;
+  --tri-scale-body-sm-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-body-sm-font-size: 14px;
+  --tri-scale-body-sm-font-weight: 420;
+  --tri-scale-body-sm-letter-spacing: -0.011em;
+  --tri-scale-body-sm-line-height: 1.625;
+  --tri-scale-caption-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-caption-font-size: 12px;
+  --tri-scale-caption-font-weight: 420;
+  --tri-scale-caption-letter-spacing: -0.006em;
+  --tri-scale-caption-line-height: 1.45;
+  --tri-scale-display-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-display-font-size: 48px;
+  --tri-scale-display-font-weight: 680;
+  --tri-scale-display-letter-spacing: -0.025em;
+  --tri-scale-display-line-height: 1.25;
+  --tri-scale-heading-1-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-heading-1-font-size: 36px;
+  --tri-scale-heading-1-font-weight: 680;
+  --tri-scale-heading-1-letter-spacing: -0.022em;
+  --tri-scale-heading-1-line-height: 1.25;
+  --tri-scale-heading-2-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-heading-2-font-size: 30px;
+  --tri-scale-heading-2-font-weight: 680;
+  --tri-scale-heading-2-letter-spacing: -0.018em;
+  --tri-scale-heading-2-line-height: 1.375;
+  --tri-scale-heading-3-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-heading-3-font-size: 24px;
+  --tri-scale-heading-3-font-weight: 680;
+  --tri-scale-heading-3-letter-spacing: -0.015em;
+  --tri-scale-heading-3-line-height: 1.375;
+  --tri-scale-heading-4-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-heading-4-font-size: 20px;
+  --tri-scale-heading-4-font-weight: 680;
+  --tri-scale-heading-4-letter-spacing: -0.012em;
+  --tri-scale-heading-4-line-height: 1.375;
+  --tri-scale-label-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-label-font-size: 13px;
+  --tri-scale-label-font-weight: 520;
+  --tri-scale-label-letter-spacing: -0.008em;
+  --tri-scale-label-line-height: 1.4;
+  --tri-scale-mono-code-font-family: 'JetBrains Mono Variable', 'JetBrains Mono', 'ui-monospace', 'SFMono-Regular', monospace;
+  --tri-scale-mono-code-font-size: 13px;
+  --tri-scale-mono-code-font-weight: 400;
+  --tri-scale-mono-code-letter-spacing: 0em;
+  --tri-scale-mono-code-line-height: 1.55;
+  --tri-scale-mono-data-font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
+  --tri-scale-mono-data-font-size: 12px;
+  --tri-scale-mono-data-font-weight: 400;
+  --tri-scale-mono-data-letter-spacing: 0em;
+  --tri-scale-mono-data-line-height: 1.45;
+  --tri-scale-overline-font-family: 'Manrope Variable', 'Manrope', system-ui, sans-serif;
+  --tri-scale-overline-font-size: 10px;
+  --tri-scale-overline-font-weight: 520;
+  --tri-scale-overline-letter-spacing: 0.08em;
+  --tri-scale-overline-line-height: 1.3;
+}
+}
+@theme inline {
+  --font-display: var(--tri-font-family-display);
+  --font-mono: var(--tri-font-family-mono);
+  --font-mono-code: var(--tri-font-family-mono-code);
+  --font-sans: var(--tri-font-family-sans);
+  --text-2xl: var(--tri-font-size-2xl);
+  --text-2xs: var(--tri-font-size-2xs);
+  --text-3xl: var(--tri-font-size-3xl);
+  --text-3xs: var(--tri-font-size-3xs);
+  --text-4xl: var(--tri-font-size-4xl);
+  --text-5xl: var(--tri-font-size-5xl);
+  --text-base: var(--tri-font-size-base);
+  --text-lg: var(--tri-font-size-lg);
+  --text-micro: var(--tri-font-size-micro);
+  --text-sm: var(--tri-font-size-sm);
+  --text-xl: var(--tri-font-size-xl);
+  --text-xs: var(--tri-font-size-xs);
+  --font-weight-black: var(--tri-font-weight-black);
+  --font-weight-body: var(--tri-font-weight-body);
+  --font-weight-bold: var(--tri-font-weight-bold);
+  --font-weight-extrabold: var(--tri-font-weight-extrabold);
+  --font-weight-extralight: var(--tri-font-weight-extralight);
+  --font-weight-heading: var(--tri-font-weight-heading);
+  --font-weight-label: var(--tri-font-weight-label);
+  --font-weight-light: var(--tri-font-weight-light);
+  --font-weight-medium: var(--tri-font-weight-medium);
+  --font-weight-mono: var(--tri-font-weight-mono);
+  --font-weight-normal: var(--tri-font-weight-regular);
+  --font-weight-semibold: var(--tri-font-weight-semibold);
+  --font-weight-thin: var(--tri-font-weight-thin);
+  --tracking-normal: var(--tri-letter-spacing-normal);
+  --tracking-tight: var(--tri-letter-spacing-tight);
+  --tracking-tighter: var(--tri-letter-spacing-tighter);
+  --tracking-wide: var(--tri-letter-spacing-wide);
+  --tracking-wider: var(--tri-letter-spacing-wider);
+  --tracking-widest: var(--tri-letter-spacing-widest);
+  --leading-comfortable: var(--tri-line-height-comfortable);
+  --leading-loose: var(--tri-line-height-loose);
+  --leading-none: var(--tri-line-height-none);
+  --leading-normal: var(--tri-line-height-normal);
+  --leading-reading: var(--tri-line-height-reading);
+  --leading-relaxed: var(--tri-line-height-relaxed);
+  --leading-snug: var(--tri-line-height-snug);
+  --leading-tight: var(--tri-line-height-tight);
+}
diff --git a/hack/vendor-trident-tokens.mjs b/hack/vendor-trident-tokens.mjs
new file mode 100644
index 000000000000..c7bb96e83094
--- /dev/null
+++ b/hack/vendor-trident-tokens.mjs
@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+// Import generated CSS from an extracted package or a built Trident checkout.
+import { createHash } from "node:crypto";
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const [packagePath, revision] = process.argv.slice(2);
+if (!packagePath || !/^[a-f0-9]{40}$/.test(revision || "")) {
+  throw new Error(
+    "Usage: node hack/vendor-trident-tokens.mjs <package-directory> <source-commit>",
+  );
+}
+const source = resolve(packagePath);
+const pkg = JSON.parse(await readFile(resolve(source, "package.json"), "utf8"));
+if (pkg.name !== "@docker/trident-tokens") {
+  throw new Error("Expected @docker/trident-tokens");
+}
+const styles = resolve(source, "dist/styles");
+const names = (await readdir(styles))
+  .filter((name) => /^tri-[a-z-]+\.css$/.test(name))
+  .sort();
+const files = new Map(
+  await Promise.all(
+    names.map(async (name) => [name, await readFile(resolve(styles, name))]),
+  ),
+);
+if (!files.has("tri-tokens.css"))
+  throw new Error("Missing generated CSS entry point");
+for (const content of files.values()) {
+  for (const match of content
+    .toString()
+    .matchAll(/@import\s+['"]\.\/([^'"]+)['"]/g)) {
+    if (!files.has(match[1]))
+      throw new Error(`Missing imported file: ${match[1]}`);
+  }
+}
+const target = fileURLToPath(
+  new URL("../assets/css/vendor/trident/", import.meta.url),
+);
+await mkdir(target, { recursive: true });
+const hashes = {};
+for (const [name, content] of files) {
+  await writeFile(resolve(target, name), content);
+  hashes[name] = createHash("sha256").update(content).digest("hex");
+}
+await writeFile(
+  resolve(target, "manifest.json"),
+  JSON.stringify(
+    {
+      package: pkg.name,
+      version: pkg.version,
+      repository: "https://github.com/docker/trident",
+      revision,
+      license: pkg.license || null,
+      files: hashes,
+    },
+    null,
+    2,
+  ) + "\n",
+);
+console.log(`Vendored ${files.size} CSS files from ${pkg.name}@${pkg.version}`);
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
index 3d1440131b01..752a9aaec935 100644
--- a/layouts/_markup/render-codeblock.html
+++ b/layouts/_markup/render-codeblock.html
@@ -2,12 +2,12 @@
   data-pagefind-ignore
   x-data
   x-ref="root"
-  class="group mt-2 mb-4 flex w-full scroll-mt-2 flex-col items-start gap-4 rounded bg-gray-50 p-2 outline outline-1 outline-offset-[-1px] outline-gray-200 dark:bg-gray-900 dark:outline-gray-800"
+  class="docs-code group mt-2 mb-4 flex w-full scroll-mt-2 flex-col items-start gap-4 rounded bg-gray-50 p-2 outline outline-1 outline-offset-[-1px] outline-gray-200 dark:bg-gray-900 dark:outline-gray-800"
 >
   {{ with .Attributes.title }}
     <div class="flex w-full items-center gap-2">
       <div
-        class="flex items-center gap-2.5 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-800"
+        class="docs-code-title flex items-center gap-2.5 rounded bg-gray-100 px-2 py-0.5 dark:bg-gray-800"
       >
         <div class="font-normal text-gray-500 dark:text-gray-200">
           {{ . }}
@@ -64,7 +64,7 @@
             <button
               @click="collapse = true"
               x-show="!collapse"
-              class="chip mx-auto mt-4 flex items-center  text-sm"
+              class="chip mx-auto mt-4 flex items-center text-sm"
             >
               <span>Hide</span>
               <span class="icon-svg"
diff --git a/layouts/_partials/aside.html b/layouts/_partials/aside.html
index 5ed76e1a20cb..52e485d7e923 100644
--- a/layouts/_partials/aside.html
+++ b/layouts/_partials/aside.html
@@ -1,5 +1,5 @@
 <aside
-  class="scrollbar-hover sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full"
+  class="docs-aside scrollbar-hover sticky top-16 h-[calc(100vh-64px)] w-full min-w-52 space-y-4 overflow-y-auto py-4"
 >
   {{ partial "github-links.html" . }}
   <div id="TableOfContents" class="overflow-x-auto">
diff --git a/layouts/_partials/components/card.html b/layouts/_partials/components/card.html
index 4e5d499763b6..7a9929d24647 100644
--- a/layouts/_partials/components/card.html
+++ b/layouts/_partials/components/card.html
@@ -1,18 +1,14 @@
-<div class="card">
+<div class="card docs-navigation-card">
   {{ if .link }}
     <a href="{{ .link }}" class="card-link">
   {{ end }}
+    {{ with .label }}
+      <p class="docs-card-label">{{ . }}</p>
+    {{ end }}
     <div class="card-header">
       {{ with .image }}
         <img class="card-image" src="{{ . }}" alt="">
       {{ end }}
-      {{ with .icon }}
-      <div class="card-icon">
-        <span class="card-img svg">
-          {{ partialCached "icon" . . }}
-        </span>
-      </div>
-      {{ end }}
       <h3 class="card-title">{{ markdownify .title }}</h3>
     </div>
     <div class="card-content">
diff --git a/layouts/_partials/gordon-chat.html b/layouts/_partials/gordon-chat.html
index ad9740ef90c4..672acaf2a0eb 100644
--- a/layouts/_partials/gordon-chat.html
+++ b/layouts/_partials/gordon-chat.html
@@ -338,7 +338,7 @@
   >
     <!-- Header -->
     <div
-      class="z-10 flex items-center justify-between bg-blue-500 px-6 py-3 shadow-lg/30 dark:shadow-lg/60"
+      class="gordon-header z-10 flex items-center justify-between bg-blue-500 px-6 py-3 shadow-lg/30 dark:shadow-lg/60"
     >
       <div class="flex items-center gap-3">
         {{ partialCached "icon" "images/gordon-logo.svg" "images/gordon-logo.svg" }}
@@ -404,13 +404,15 @@
             <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
               What can I help you with?
             </h3>
-            <p class="max-w-sm text-lg text-gray-600 dark:text-gray-400">
+            <p
+              class="gordon-muted max-w-sm text-lg text-gray-600 dark:text-gray-400"
+            >
               I'm Gordon, your AI assistant for Docker and documentation
               questions.
             </p>
             <div class="w-full text-left">
               <p
-                class="text-sm font-bold text-gray-600 uppercase dark:text-gray-400"
+                class="gordon-muted text-sm font-bold text-gray-600 uppercase dark:text-gray-400"
               >
                 Try asking
               </p>
@@ -437,7 +439,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
               {{- range $gordonSuggestions }}
                 <button
                   @click="currentQuestion = {{ .question | jsonify }}; askQuestion()"
-                  class="cursor-pointer rounded-xl border border-gray-200 bg-white p-3 transition hover:scale-[1.02] hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
+                  class="gordon-suggestion cursor-pointer rounded-xl border border-gray-200 bg-white p-3 transition hover:scale-[1.02] hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
                 >
                   <div class="flex items-center gap-3">
                     <span
@@ -462,8 +464,8 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
           >
             <div class="flex max-w-full flex-col gap-2">
               <div
-                :class="message.role === 'user' ? 'bg-blue-500 dark:bg-blue-800 text-white' : 'max-w-none bg-gray-100 dark:bg-gray-800'"
-                class="prose prose-sm dark:prose-invert rounded-lg px-4"
+                :class="message.role === 'user' ? 'gordon-message-user' : 'max-w-none'"
+                class="gordon-message prose prose-sm dark:prose-invert rounded-lg px-4"
               >
                 <template x-if="!message.content && message.isStreaming">
                   <div class="flex gap-1 py-3">
@@ -493,7 +495,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                   <div class="flex items-center gap-3 text-xs">
                     <!-- "Was this helpful?" prompt with gordon icon -->
                     <div
-                      class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400"
+                      class="gordon-muted flex items-center gap-1.5 text-gray-600 dark:text-gray-400"
                     >
                       <span class="icon-svg icon-sm">
                         {{ partialCached "icon" "gordon" "gordon" }}
@@ -506,10 +508,8 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                       <!-- Thumbs up - Helpful -->
                       <button
                         @click="submitFeedback(index, 'positive')"
-                        :class="message.feedback === 'positive'
-                        ? 'bg-green-100 text-green-700 ring ring-green-500 dark:bg-green-900/50 dark:text-green-400 dark:ring-green-600'
-                        : 'bg-gray-100 text-gray-600 hover:bg-green-50 hover:text-green-600 hover:ring hover:ring-green dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-green-900/30 dark:hover:text-green-400 dark:hover:ring-green'"
-                        class="flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-200"
+                        :aria-pressed="message.feedback === 'positive'"
+                        class="gordon-feedback flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-200"
                         title="Helpful"
                       >
                         <span class="icon-svg icon-sm transition-transform">
@@ -523,10 +523,8 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                       <!-- Thumbs down - Not quite -->
                       <button
                         @click="submitFeedback(index, 'negative')"
-                        :class="message.feedback === 'negative'
-                        ? 'bg-red-100 text-red-700 ring ring-red-500 dark:bg-red-900/50 dark:text-red-400 dark:ring-red-600'
-                        : 'bg-gray-100 text-gray-600 hover:bg-red-50 hover:text-red-600 hover:ring hover:ring-red dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-red-900/30 dark:hover:text-red-400 dark:hover:ring-red'"
-                        class="flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-200"
+                        :aria-pressed="message.feedback === 'negative'"
+                        class="gordon-feedback flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1.5 transition-all duration-200"
                         title="Not quite"
                       >
                         <span class="icon-svg icon-sm transition-transform">
@@ -544,7 +542,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
                     <!-- Copy button -->
                     <button
                       @click="copyAnswer(index)"
-                      class="hover:ring-blue flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-gray-600 transition-all duration-200 hover:bg-blue-50 hover:text-blue-700 hover:ring dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-blue-900/30 dark:hover:text-blue-300 dark:hover:ring-blue-400"
+                      class="gordon-feedback hover:ring-blue flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-gray-600 transition-all duration-200 hover:bg-blue-50 hover:text-blue-700 hover:ring dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-blue-900/30 dark:hover:text-blue-300 dark:hover:ring-blue-400"
                       :title="message.copied ? 'Copied!' : 'Copy answer'"
                     >
                       <span
@@ -584,7 +582,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
       <!-- Error message -->
       <template x-if="error">
         <div
-          class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
+          class="gordon-error rounded-lg border border-red-200 bg-red-50 p-4 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
         >
           <p class="text-sm" x-text="error"></p>
         </div>
@@ -593,7 +591,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
       <!-- Countdown warning when approaching limit -->
       <template x-if="shouldShowCountdown()">
         <div
-          class="rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"
+          class="gordon-warning rounded-lg border border-yellow-200 bg-yellow-50 p-3 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400"
         >
           <p class="text-sm">
             <span x-text="getRemainingTurns()"></span>
@@ -608,7 +606,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
       <!-- Thread limit warning -->
       <template x-if="isThreadLimitReached()">
         <div
-          class="rounded-lg border border-blue-200 bg-blue-50 p-4 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
+          class="gordon-limit rounded-lg border border-blue-200 bg-blue-50 p-4 text-blue-800 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
         >
           <p class="mb-3 text-sm">
             You've reached the maximum of
@@ -692,7 +690,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
           href="https://github.com/docker/docs/issues/23966"
           target="_blank"
           rel="noopener noreferrer"
-          class="text-xs text-gray-500 underline hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+          class="gordon-muted text-xs text-gray-500 underline hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
         >
           Share feedback
         </a>
@@ -701,7 +699,7 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
 
     <!-- Disclaimer -->
     <div
-      class="bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"
+      class="gordon-muted gordon-disclaimer bg-blue-50 px-4 py-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400"
     >
       Answers are generated based on the documentation.
     </div>
@@ -712,7 +710,8 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
 <style>
   /* Code block styles */
   #gordon-chat pre {
-    background: #0d1117;
+    background: var(--docs-code-background);
+    border: 1px solid var(--tri-border);
     border-radius: 0.25rem;
     padding: 0;
     margin: 0.5rem 0;
@@ -721,8 +720,8 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
   }
 
   #gordon-chat pre code {
-    background: #0d1117;
-    color: #c9d1d9;
+    background: var(--docs-code-background);
+    color: var(--tri-foreground);
     padding: 1rem;
     display: block;
     font-family: "Roboto Mono", monospace;
@@ -738,16 +737,11 @@ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
 
   /* Inline code styling (not in pre blocks) */
   #gordon-chat .prose code.not-prose {
-    background-color: rgb(229 231 235);
-    color: rgb(17 24 39);
+    background-color: var(--docs-inline-code-bg);
+    color: var(--tri-foreground);
     padding: 0.2em 0.4em;
     border-radius: 0.25rem;
     font-family: "Roboto Mono", monospace;
     font-size: 0.875em;
   }
-
-  .dark #gordon-chat .prose code.not-prose {
-    background-color: rgb(55 65 81);
-    color: rgb(229 231 235);
-  }
 </style>
diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html
index 15afc7ad4338..3d65bc4c3ded 100644
--- a/layouts/_partials/head.html
+++ b/layouts/_partials/head.html
@@ -86,9 +86,9 @@
     </script>
   {{- end -}}
 {{- end -}}
-{{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
+{{/* preload Manrope as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
 <link
-  href="/assets/fonts/RobotoFlex.woff2"
+  href="/assets/fonts/manrope/manrope-latin-wght-normal.woff2"
   rel="preload"
   as="font"
   type="font/woff2"
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 2013c6ecf28e..3edb3b4a3b59 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -1,4 +1,6 @@
-<header class="sticky top-0 z-20 h-16 w-full bg-blue-600 text-white">
+<header
+  class="docs-header sticky top-0 z-20 h-16 w-full bg-blue-600 text-white"
+>
   <div class="mx-auto flex h-full justify-between gap-2 px-4">
     <div class="flex h-full items-center gap-2 lg:gap-8">
       {{- if not .IsHome }}
@@ -13,7 +15,11 @@
       {{- end }}
       <div>
         {{/* main logo */}}
-        <a title="Docker Docs home page" href="{{ site.BaseURL }}">
+        <a
+          class="docs-logo"
+          title="Docker Docs home page"
+          href="{{ site.BaseURL }}"
+        >
           <div class="hidden sm:block">
             {{- (resources.Get "images/docker-docs-white.svg").Content | safe.HTML -}}
           </div>
diff --git a/layouts/_partials/whats-new.html b/layouts/_partials/whats-new.html
index e050bc717004..7e63be38a11c 100644
--- a/layouts/_partials/whats-new.html
+++ b/layouts/_partials/whats-new.html
@@ -2,8 +2,8 @@
 {{- with $data.items -}}
   {{- $items := sort . "published" "desc" -}}
   {{- $more := where $items "featured" false -}}
-  <section class="py-10 md:py-12" x-data="{ expanded: false }">
-    <div class="container mx-auto max-w-4xl px-4">
+  <section class="home-updates py-10 md:py-12" x-data="{ expanded: false }">
+    <div class="home-container">
       <header class="mb-6 border-b border-gray-200 pb-4 dark:border-gray-800">
         <h2 class="text-2xl font-semibold text-gray-900 dark:text-white">
           What's new
@@ -24,14 +24,14 @@ <h2 class="text-2xl font-semibold text-gray-900 dark:text-white">
             >
             <a
               href="{{ .url }}"
-              class="group relative block border-l border-gray-200 py-5 pl-7 dark:border-gray-700"
+              class="home-update-link group relative block border-l border-gray-200 py-5 pl-7 dark:border-gray-700"
             >
               <span
                 aria-hidden="true"
-                class="absolute top-6 -left-[5px] size-[9px] rounded-full bg-gray-300 ring-4 ring-gray-50 transition group-hover:bg-blue-500 dark:bg-gray-600 dark:ring-gray-950 dark:group-hover:bg-blue-400"
+                class="home-update-dot absolute top-6 -left-[5px] size-[9px] rounded-full bg-gray-300 ring-4 ring-gray-50 transition group-hover:bg-blue-500 dark:bg-gray-600 dark:ring-gray-950 dark:group-hover:bg-blue-400"
               ></span>
               <span
-                class="mb-1 flex flex-wrap items-center gap-x-2 text-sm font-medium text-blue-600 dark:text-blue-400"
+                class="home-update-product mb-1 flex flex-wrap items-center gap-x-2 text-sm font-medium text-blue-600 dark:text-blue-400"
               >
                 {{ .product }}
                 <time
@@ -42,7 +42,7 @@ <h2 class="text-2xl font-semibold text-gray-900 dark:text-white">
               </span>
               <span class="flex items-center gap-2">
                 <span
-                  class="font-medium text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
+                  class="home-update-title font-medium text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
                   >{{ .title }}</span
                 >
                 <span
@@ -51,7 +51,8 @@ <h2 class="text-2xl font-semibold text-gray-900 dark:text-white">
                   {{ partialCached "icon" "arrow-right" "arrow-right" }}
                 </span>
               </span>
-              <span class="mt-1 block text-sm text-gray-600 dark:text-gray-300"
+              <span
+                class="home-update-description mt-1 block text-sm text-gray-600 dark:text-gray-300"
                 >{{ .description }}</span
               >
             </a>
diff --git a/layouts/baseof.html b/layouts/baseof.html
index 823d4a087912..69a2ce350b69 100644
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -5,7 +5,7 @@
   </head>
 
   <body
-    class="dark:bg-navbar-bg-dark bg-navbar-bg flex flex-col items-center text-base text-black dark:text-white"
+    class="docs-body dark:bg-navbar-bg-dark bg-navbar-bg flex flex-col items-center text-base text-black dark:text-white"
   >
     {{ partial "header.html" . }}
     {{ partial "gordon-chat.html" . }}
@@ -30,7 +30,10 @@
               }
           }
       })"
-        class="bg-background-toc dark:bg-background-toc fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden overflow-y-auto{{ if ne .Type "guides" }} md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)] md:w-[320px]{{ end }}"
+        class="docs-sidebar bg-background-toc dark:bg-background-toc overflow-y-auto{{ if ne .Type "guides" }}
+          md:sticky md:top-16 md:z-auto md:block md:h-[calc(100vh-64px)]
+          md:w-[320px]
+        {{ end }} fixed top-0 z-40 hidden h-screen w-full flex-none overflow-x-hidden"
         :class="{ 'hidden': ! $store.showSidebar }"
       >
         <!-- Gray backdrop on small screens -->
@@ -61,7 +64,7 @@
       <!-- Main content -->
       <div
         {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
-        class="dark:bg-background-dark w-full min-w-0 bg-white p-8"
+        class="docs-content dark:bg-background-dark w-full min-w-0 bg-white p-8"
       >
         {{ partial "pagefind-meta.html" . }}
         {{ block "main" . }}
diff --git a/layouts/get-started.html b/layouts/get-started.html
index 35f213160c59..a9245c9ebee2 100644
--- a/layouts/get-started.html
+++ b/layouts/get-started.html
@@ -26,24 +26,13 @@
       </h2>
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
         {{ range .Params.installs }}
-          <a
-            href="{{ .link }}"
-            class="group block rounded-xl border border-gray-200 bg-white p-5 transition hover:scale-[1.01] hover:border-blue-500 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-400/40 motion-reduce:transform-none dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
-          >
-            <p
-              class="mb-2 font-mono text-xs font-semibold tracking-[0.12em] text-gray-600 uppercase dark:text-gray-300"
-            >
-              {{ .eyebrow }}
-            </p>
-            <h3
-              class="mb-1 text-lg font-semibold text-gray-950 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
-            >
-              {{ .title }}
-            </h3>
-            <p class="leading-relaxed text-gray-600 dark:text-gray-300">
-              {{ .description }}
-            </p>
-          </a>
+          {{ partial "components/card.html" (dict
+            "title" .title
+            "description" .description
+            "link" .link
+            "label" .eyebrow
+            )
+          }}
         {{ end }}
       </div>
     </section>
@@ -57,24 +46,13 @@
       </h2>
       <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
         {{ range .Params.tutorials }}
-          <a
-            href="{{ .link }}"
-            class="group flex h-full flex-col rounded-xl border border-gray-200 bg-white p-6 transition hover:scale-[1.01] hover:border-blue-500 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-400/40 motion-reduce:transform-none dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
-          >
-            <p
-              class="mb-3 font-mono text-xs font-semibold tracking-[0.12em] text-gray-600 uppercase dark:text-gray-300"
-            >
-              {{ .audience }}
-            </p>
-            <h3
-              class="mb-2 text-xl leading-tight font-semibold tracking-tight text-gray-950 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
-            >
-              {{ .title }}
-            </h3>
-            <p class="leading-relaxed text-gray-600 dark:text-gray-300">
-              {{ .description }}
-            </p>
-          </a>
+          {{ partial "components/card.html" (dict
+            "title" .title
+            "description" .description
+            "link" .link
+            "label" .audience
+            )
+          }}
         {{ end }}
       </div>
     </section>
diff --git a/layouts/guides/landing.html b/layouts/guides/landing.html
index 4b54e9447039..6891524c4c16 100644
--- a/layouts/guides/landing.html
+++ b/layouts/guides/landing.html
@@ -120,13 +120,12 @@
             </p>
             <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
               {{- range .ByWeight }}
-                <a
-                  href="{{ .Permalink }}"
-                  class="group flex flex-col gap-1.5 rounded-lg border border-gray-200 p-4 transition-colors hover:border-gray-300 dark:border-gray-800 dark:hover:border-gray-700"
-                >
-                  <span class="font-medium leading-snug text-gray-900 transition-colors group-hover:text-blue-600 dark:text-gray-100 dark:group-hover:text-blue-400">{{ .Title }}</span>
-                  <span class="line-clamp-2 text-sm leading-relaxed text-gray-500 dark:text-gray-400">{{ .Summary }}</span>
-                </a>
+                {{ partial "components/card.html" (dict
+                  "title" .Title
+                  "description" .Summary
+                  "link" .Permalink
+                  )
+                }}
               {{- end }}
             </div>
           </div>
diff --git a/layouts/home.html b/layouts/home.html
index be53a510e1a5..048476ff5d80 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -4,59 +4,48 @@
     {{ partial "head.html" . }}
   </head>
 
-  <body
-    class="flex min-h-screen flex-col bg-gray-50 text-base dark:bg-gray-950 dark:text-white"
-  >
+  <body class="docs-home flex min-h-screen flex-col text-base">
     {{ partial "header.html" . }}
     {{ partial "gordon-chat.html" . }}
     <main class="flex-1">
-      <!-- AI Hero Section -->
-      <section class="relative overflow-hidden py-16 md:py-20">
-        <!-- Wavy plus pattern background from Docker.com -->
-        <div
-          class="absolute inset-0 bg-[center_top] bg-no-repeat opacity-100 [mix-blend-mode:multiply] dark:opacity-60 dark:[mix-blend-mode:normal] dark:[filter:invert(1)_brightness(1.5)]"
-          style="background-image: url('/assets/images/dot-pattern.svg');"
-        ></div>
-        <div class="relative z-10 container mx-auto max-w-4xl px-4 text-center">
-          <h1
-            class="mb-4 text-3xl font-semibold text-balance text-gray-900 md:text-4xl dark:text-white"
+      <section class="home-hero" aria-labelledby="home-heading">
+        <div class="home-hero-content">
+          <h1 id="home-heading">How can we help?</h1>
+          <p class="home-intro">
+            Ask Gordon about Docker, or explore the documentation.
+          </p>
+          <form
+            class="home-question"
+            x-data="{ query: '' }"
+            @submit.prevent="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
           >
-            How can we help?
-          </h1>
-          <!-- AI Search Input -->
-          <div class="mx-auto max-w-2xl py-6" x-data="{ query: '' }">
-            <div
-              class="group flex items-center gap-3 rounded-2xl border-2 border-gray-200 bg-white p-4 shadow-lg transition focus-within:scale-[1.02] focus-within:border-blue-500 hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900"
+            <label for="home-question" class="sr-only"
+              >Ask Gordon about Docker</label
             >
-              <div class="shrink-0 rounded-xl text-blue-500">
-                <span class="icon-svg group-hover:hidden">
-                  {{ partialCached "icon" "gordon" "gordon" }}
-                </span>
-                <span class="icon-svg hidden group-hover:block">
-                  {{ partialCached "icon" "gordon-happy" "gordon-happy" }}
-                </span>
-              </div>
+            <div class="home-question-field">
+              <span class="icon-svg home-gordon-icon" aria-hidden="true">
+                {{ partialCached "icon" "gordon" "gordon" }}
+              </span>
               <input
+                id="home-question"
                 x-model="query"
                 type="text"
-                placeholder="Ask anything about Docker and get instant answers…"
-                @keydown.enter="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
-                class="flex-1 bg-transparent text-lg text-gray-900 placeholder-gray-500 focus:outline-none dark:text-white dark:placeholder-gray-400"
+                placeholder="Ask a question about Docker…"
               />
               <button
-                @click="if (query.trim()) { $store.gordon.open(query.trim(), true); query = ''; }"
+                type="submit"
                 :disabled="!query.trim()"
-                class="shrink-0 rounded-xl bg-blue-500 p-2 text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:bg-gray-300 dark:disabled:bg-gray-700"
+                aria-label="Ask Gordon"
+                class="home-question-submit"
               >
-                <span class="icon-svg">
+                <span class="icon-svg" aria-hidden="true">
                   {{ partialCached "icon" "arrow-right" "arrow-right" }}
                 </span>
               </button>
             </div>
-          </div>
+          </form>
 
-          <!-- Suggestion Pills -->
-          <div class="mt-6 flex flex-wrap justify-center gap-3" x-data>
+          <div class="home-suggestions" x-data>
             {{ range slice
               "How do I get started with Docker?"
               "Can I run my AI agent in a sandbox?"
@@ -65,8 +54,9 @@
               "Why should I use Docker Compose?"
             }}
               <button
+                type="button"
                 @click="$store.gordon.open($el.textContent.trim(), true);"
-                class="ai-suggestion cursor-pointer rounded-full border border-gray-200 bg-white px-4 py-2 text-sm text-gray-600 transition hover:border-blue-400 hover:bg-blue-50 hover:text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-500 dark:hover:bg-gray-700 dark:hover:text-white"
+                class="home-suggestion"
               >
                 {{ . }}
               </button>
@@ -76,8 +66,8 @@
       </section>
 
       <!-- Quick Links Section -->
-      <section class="py-8">
-        <div class="container mx-auto px-4 xl:max-w-[1200px]">
+      <section class="home-navigation" aria-label="Explore the documentation">
+        <div class="home-container">
           <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
             {{ range slice
               (dict "url" "/get-started/" "icon" "rocket-launch" "title" "Get started" "description" "Containerize an app, sandbox an agent, or pilot Docker for your organization.")
@@ -85,32 +75,12 @@
               (dict "url" "/manuals/" "icon" "document-text" "title" "Manuals" "description" "Install, set up, configure, and use Docker products.")
               (dict "url" "/reference/" "icon" "command-line" "title" "Reference" "description" "Browse the CLI and API documentation.")
             }}
-              <a
-                href="{{ .url }}"
-                class="group block rounded-xl border border-gray-200 bg-white p-6 transition hover:scale-[1.02] hover:border-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
-              >
-                <div class="flex items-start gap-4">
-                  <div
-                    class="shrink-0 rounded-lg bg-blue-100 p-3 text-blue-500 dark:bg-gray-700 dark:text-blue-400"
-                  >
-                    <span class="icon-svg">
-                      {{ partialCached "icon" .icon .icon }}
-                    </span>
-                  </div>
-                  <div>
-                    <h3
-                      class="mb-1 text-lg font-semibold text-gray-900 transition group-hover:text-blue-500 dark:text-white dark:group-hover:text-blue-400"
-                    >
-                      {{ .title }}
-                    </h3>
-                    <p
-                      class="text-sm leading-relaxed text-gray-600 dark:text-gray-300"
-                    >
-                      {{ .description }}
-                    </p>
-                  </div>
-                </div>
-              </a>
+              {{ partial "components/card.html" (dict
+                "title" .title
+                "description" .description
+                "link" .url
+                )
+              }}
             {{ end }}
           </div>
         </div>
diff --git a/static/assets/fonts/manrope/LICENSE b/static/assets/fonts/manrope/LICENSE
new file mode 100644
index 000000000000..462280f3e403
--- /dev/null
+++ b/static/assets/fonts/manrope/LICENSE
@@ -0,0 +1,93 @@
+Copyright 2019 The Manrope Project Authors (https://github.com/sharanda/manrope)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/static/assets/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2 b/static/assets/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2
new file mode 100644
index 000000000000..57c7c0eefb32
Binary files /dev/null and b/static/assets/fonts/manrope/manrope-cyrillic-ext-wght-normal.woff2 differ
diff --git a/static/assets/fonts/manrope/manrope-cyrillic-wght-normal.woff2 b/static/assets/fonts/manrope/manrope-cyrillic-wght-normal.woff2
new file mode 100644
index 000000000000..3a062296a126
Binary files /dev/null and b/static/assets/fonts/manrope/manrope-cyrillic-wght-normal.woff2 differ
diff --git a/static/assets/fonts/manrope/manrope-greek-wght-normal.woff2 b/static/assets/fonts/manrope/manrope-greek-wght-normal.woff2
new file mode 100644
index 000000000000..e74e7189632e
Binary files /dev/null and b/static/assets/fonts/manrope/manrope-greek-wght-normal.woff2 differ
diff --git a/static/assets/fonts/manrope/manrope-latin-ext-wght-normal.woff2 b/static/assets/fonts/manrope/manrope-latin-ext-wght-normal.woff2
new file mode 100644
index 000000000000..bd24140af06f
Binary files /dev/null and b/static/assets/fonts/manrope/manrope-latin-ext-wght-normal.woff2 differ
diff --git a/static/assets/fonts/manrope/manrope-latin-wght-normal.woff2 b/static/assets/fonts/manrope/manrope-latin-wght-normal.woff2
new file mode 100644
index 000000000000..71eb731d5580
Binary files /dev/null and b/static/assets/fonts/manrope/manrope-latin-wght-normal.woff2 differ
diff --git a/static/assets/fonts/manrope/manrope-vietnamese-wght-normal.woff2 b/static/assets/fonts/manrope/manrope-vietnamese-wght-normal.woff2
new file mode 100644
index 000000000000..1e4b7a4b3fb9
Binary files /dev/null and b/static/assets/fonts/manrope/manrope-vietnamese-wght-normal.woff2 differ