diff --git a/TRIDENT-PROTOTYPE.md b/TRIDENT-PROTOTYPE.md
new file mode 100644
index 000000000000..822311c21f1d
--- /dev/null
+++ b/TRIDENT-PROTOTYPE.md
@@ -0,0 +1,157 @@
+# 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 and homepage backgrounds use `background` in both themes. Article text
+and quotations use `foreground`. Navigation retains the `sidebar` surface.
+The separate Trident high-contrast mode stays inactive.
+
+Home, Get started, Guides featured cards, and Manuals share the
+`components/card.html` partial. Cards use `card`, `card-foreground`,
+`muted-foreground`, and `elevation-raised-shadow`. Titles and descriptions use
+Trident's body and small-body typography scales. The homepage uses the display,
+body, label, and heading scales. Layout dimensions remain specific to the docs.
+
+Inline and fenced code use `muted` in both themes. Fenced code uses
+`@pierre/diffs@1.1.22` with a shared docs syntax theme. Keywords, functions,
+and property names use Trident's primary blue; comments use muted foreground;
+values and punctuation use the normal foreground. Diff additions and deletions
+retain semantic success and error colors. The token package does not define
+syntax roles, so this mapping lives in `assets/js/pierre/themes.js`.
+
+Console transcripts highlight prompt-prefixed commands and their backslash
+continuations. Command output remains neutral instead of being parsed as shell
+code. This grammar lives in `assets/js/pierre/console.js`.
+
+The header uses the `sidebar` surface. Tabs and messages use `card`, and the
+homepage question field uses `input-bg`.
+
+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 input 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.
+
+## Browser code rendering
+
+Hugo emits escaped plain code through `components/code-source.html`. An eagerly
+preloaded, deferred `pierre.js` bundle enhances every block as soon as the document
+is parsed. It also renders code in Gordon responses as they stream in. There is
+no separate code-rendering build step and no React integration.
+
+The head script hides fallback text while retaining its space until Pierre has
+rendered it. If the bundle fails to load, fallback text becomes visible. A
+four-second deadline also reveals fallback text if loading stalls. With
+JavaScript disabled, plain code remains visible from the start. This avoids a
+flash of unhighlighted text during normal loading, but does not guarantee
+highlighted code at first paint on slow connections.
+
+The existing title, copy, and Show more controls remain outside Pierre's shadow
+root. The adapter preserves `linenos`, `linenostart`, and `hl_lines` options and
+Dockerfile instruction links. Theme changes update existing renderers. Replaced
+Gordon blocks release their renderer instances.
+
+`assets/js/pierre/shiki.js` limits Shiki's eager bundle to selected languages used
+by the docs. Add grammars there and aliases in `assets/js/pierre.js` when extending
+language support. Unsupported languages, including Rego, render as plain text.
+The initial bundle is approximately 576 KB gzipped, separate from the site's
+main JavaScript bundle.
+
+## Snapshot provenance
+
+- Package: `@docker/trident-tokens@2.0.0-beta.5`
+- Repository: <https://github.com/docker/trident>
+- Source commit: `22ff6c848be181d439fd1f5d057175dddfdc9430`
+- CSS: ten unmodified generated files in `assets/css/vendor/trident/`
+- Checksums: SHA-256 per file in that directory's `manifest.json`
+
+This snapshot was generated
+from the source 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 87 contrast pairs with zero failures and
+explicit dark overrides for all 243 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.
+
+## Removed prototype overrides
+
+- Alternate article backgrounds: `background-primary` in light mode and `sidebar`
+  in dark mode. Both use `background`.
+- Gray 700/300 descriptions. Descriptions use `muted-foreground`.
+- The copied dark inset card highlight and transparent light shadow. Cards and
+  the homepage input use `elevation-raised-shadow`.
+- Elevated paper surfaces for cards and the homepage input. They use `card` and
+  `input-bg`, respectively.
+- Light/dark fenced-code background switching and the 5% inline-code color mix.
+  Both use `muted`.
+- The Roboto Mono font override and custom card/homepage type sizes, line heights,
+  and letter spacing. These use the corresponding Trident typography tokens.
+- References to removed `syntax-*` tokens. Pierre applies the docs syntax theme.
+
+The dark `background` token is `oklch(0.1 0.008 245)` in both snapshots.
+The beta.5 source does not contain a lighter replacement for that token.
+
+## 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 85aa4dd9c767..ba658e73f9cd 100644
--- a/_vale/config/vocabularies/Docker/accept.txt
+++ b/_vale/config/vocabularies/Docker/accept.txt
@@ -425,3 +425,5 @@ tokenization
 WebGL
 Xubuntu
 Netlify
+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..035180172005
--- /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-background);
+    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: var(--tri-scale-display-font-size);
+    font-weight: var(--tri-font-weight-semibold);
+    line-height: var(--tri-scale-display-line-height);
+    letter-spacing: var(--tri-scale-display-letter-spacing);
+    text-wrap: balance;
+  }
+
+  .home-intro {
+    margin-top: 1rem;
+    color: var(--tri-muted-foreground);
+    font-size: var(--tri-scale-body-font-size);
+    line-height: var(--tri-scale-body-line-height);
+    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-input-bg);
+    border: 1px solid var(--tri-input);
+    border-radius: var(--tri-radius-lg);
+    box-shadow: var(--tri-elevation-raised-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: var(--tri-scale-body-font-size);
+    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(--tri-muted-foreground);
+    font-size: var(--tri-scale-label-font-size);
+    line-height: var(--tri-scale-label-line-height);
+    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: var(--tri-scale-heading-3-font-size);
+    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-background);
+  }
+
+  .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(--tri-muted-foreground);
+    line-height: var(--tri-scale-body-line-height);
+  }
+
+  .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..9bcaa83c74e8 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: var(--tri-radius-xs);
+  }
 }
diff --git a/assets/css/pierre.css b/assets/css/pierre.css
new file mode 100644
index 000000000000..000720f2cd5e
--- /dev/null
+++ b/assets/css/pierre.css
@@ -0,0 +1,39 @@
+@layer docs {
+  .pierre-code {
+    position: relative;
+    min-width: 0;
+    width: 100%;
+    color: var(--tri-foreground);
+    background: var(--tri-muted);
+    border-radius: var(--tri-radius-default);
+  }
+
+  .pierre-code [data-pierre-source] {
+    margin: 0;
+    padding: 0 8px;
+    overflow-x: auto;
+    font-family: var(--tri-font-family-mono);
+    font-size: var(--tri-scale-mono-code-font-size);
+    line-height: var(--tri-scale-mono-code-line-height);
+    color: inherit;
+    background: transparent;
+  }
+
+  .pierre-code [data-pierre-source] code {
+    font: inherit;
+  }
+
+  .pierre-loading .pierre-code:not(.pierre-fallback) [data-pierre-source] {
+    visibility: hidden;
+  }
+
+  .pierre-render {
+    display: block;
+    min-width: 0;
+  }
+
+  .pierre-code:not(.pierre-ready) .pierre-render {
+    position: absolute;
+    inset: 0;
+  }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index d1a2620a8fef..8676c24858e7 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,19 +99,18 @@
   font-display: fallback;
 }
 
-@layer theme {
-  @import "theme.css";
-}
+@import "theme.css";
+@import "vendor/trident/tri-tokens.css";
+@import "trident.css";
+@import "pierre.css";
+@import "home.css";
 
 @layer base {
   @import "global.css";
 }
 @import "utilities.css";
 @import "pagefind.css";
-@import "syntax-dark.css";
-@import "syntax-light.css";
 @import "components.css";
 @import "interactive-diagram.css";
-@import "highlight-github-dark.css";
 
 @variant dark (&:where(.dark, .dark *));
diff --git a/assets/css/syntax-dark.css b/assets/css/syntax-dark.css
deleted file mode 100644
index e66c18186f6f..000000000000
--- a/assets/css/syntax-dark.css
+++ /dev/null
@@ -1,337 +0,0 @@
-@utility syntax-dark {
-  /* Other */
-  .x {
-    color: var(--color-white-main);
-  }
-  /* Error */
-  .err {
-    color: var(--color-red-500);
-  }
-  /* CodeLine */
-  .cl {
-    color: var(--color-gray-200);
-  }
-  /* LineHighlight */
-  .hl {
-    min-width: fit-content;
-    background-color: var(--color-gray-800);
-  }
-  /* LineNumbersTable */
-  .lnt {
-    white-space: pre;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: var(--color-gray-300);
-  }
-  /* LineNumbers */
-  .ln {
-    white-space: pre;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: var(--color-gray-900);
-  }
-  /* Line */
-  .line {
-    display: flex;
-  }
-  /* Keyword */
-  .k {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordConstant */
-  .kc {
-    color: var(--color-violet-300);
-  }
-  /* KeywordDeclaration */
-  .kd {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordNamespace */
-  .kn {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordPseudo */
-  .kp {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordReserved */
-  .kr {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordType */
-  .kt {
-    color: var(--color-yellow-700);
-  }
-  /* Name */
-  .n {
-    color: var(--color-violet-300);
-  }
-  /* NameAttribute */
-  .na {
-    color: var(--color-yellow-700);
-  }
-  /* NameBuiltin */
-  .nb {
-    color: var(--color-yellow-700);
-  }
-  /* NameBuiltinPseudo */
-  .bp {
-    color: var(--color-violet-300);
-  }
-  /* NameClass */
-  .nc {
-    color: var(--color-white-main);
-  }
-  /* NameConstant */
-  .no {
-    color: var(--color-white-main);
-  }
-  /* NameDecorator */
-  .nd {
-    color: var(--color-violet-300);
-  }
-  /* NameEntity */
-  .ni {
-    color: var(--color-yellow-700);
-  }
-  /* NameException */
-  .ne {
-    color: var(--color-red-700);
-  }
-  /* NameFunction */
-  .nf {
-    color: var(--color-blue-400);
-  }
-  /* NameFunctionMagic */
-  .fm {
-    color: var(--color-blue-400);
-  }
-  /* NameLabel */
-  .nl {
-    color: var(--color-yellow-500);
-  }
-  /* NameNamespace */
-  .nn {
-    color: var(--color-white-main);
-  }
-  /* NameOther */
-  .nx {
-    color: var(--color-white-main);
-  }
-  /* NameProperty */
-  .py {
-    color: var(--color-violet-300);
-  }
-  /* NameTag */
-  .nt {
-    color: var(--color-green-300);
-  }
-  /* NameVariable */
-  .nv {
-    color: var(--color-green-500);
-  }
-  /* NameVariableClass */
-  .vc {
-    color: var(--color-violet-600);
-  }
-  /* NameVariableGlobal */
-  .vg {
-    color: var(--color-violet-600);
-  }
-  /* NameVariableInstance */
-  .vi {
-    color: var(--color-violet-600);
-  }
-  /* NameVariableMagic */
-  .vm {
-    color: var(--color-violet-600);
-  }
-  /* Literal */
-  .l {
-    color: var(--color-white-main);
-  }
-  /* LiteralDate */
-  .ld {
-    color: var(--color-green-600);
-  }
-  /* LiteralString */
-  .s {
-    color: var(--color-white-main);
-  }
-  /* LiteralStringAffix */
-  .sa {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringBacktick */
-  .sb {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringChar */
-  .sc {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringDelimiter */
-  .dl {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringDoc */
-  .sd {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringDouble */
-  .s2 {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringEscape */
-  .se {
-    color: var(--color-white-main);
-  }
-  /* LiteralStringHeredoc */
-  .sh {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringInterpol */
-  .si {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringOther */
-  .sx {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringRegex */
-  .sr {
-    color: var(--color-blue-400);
-  }
-  /* LiteralStringSingle */
-  .s1 {
-    color: var(--color-green-600);
-  }
-  /* LiteralStringSymbol */
-  .ss {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumber */
-  .m {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumberBin */
-  .mb {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumberFloat */
-  .mf {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumberHex */
-  .mh {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumberInteger */
-  .mi {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumberIntegerLong */
-  .il {
-    color: var(--color-blue-400);
-  }
-  /* LiteralNumberOct */
-  .mo {
-    color: var(--color-blue-400);
-  }
-  /* Operator */
-  .o {
-    color: var(--color-blue-200);
-  }
-  /* OperatorWord */
-  .ow {
-    color: var(--color-yellow-700);
-  }
-  /* Punctuation */
-  .p {
-    color: var(--color-gray-500);
-  }
-  /* Comment */
-  .c {
-    color: var(--color-gray-500);
-  }
-  /* CommentHashbang */
-  .ch {
-    color: var(--color-gray-500);
-  }
-  /* CommentMultiline */
-  .cm {
-    color: var(--color-gray-500);
-  }
-  /* CommentSingle */
-  .c1 {
-    color: var(--color-gray-500);
-  }
-  /* CommentSpecial */
-  .cs {
-    color: var(--color-gray-500);
-  }
-  /* CommentPreproc */
-  .cp {
-    color: var(--color-gray-500);
-  }
-  /* CommentPreprocFile */
-  .cpf {
-    color: var(--color-gray-500);
-  }
-  /* Generic */
-  .g {
-    color: var(--color-white-main);
-  }
-  /* GenericDeleted */
-  .gd {
-    color: var(--color-red-500);
-  }
-  /* GenericEmph */
-  .ge {
-    color: var(--color-white-main);
-  }
-  /* GenericError */
-  .gr {
-    color: var(--color-red-500);
-  }
-  /* GenericHeading */
-  .gh {
-    color: var(--color-gray-600);
-  }
-  /* GenericInserted */
-  .gi {
-    color: var(--color-green-500);
-  }
-  /* GenericOutput */
-  .go {
-    color: var(--color-white-main);
-  }
-  /* GenericPrompt */
-  .gp {
-    user-select: none;
-    color: var(--color-green-500);
-  }
-  /* GenericStrong */
-  .gs {
-    color: var(--color-white-main);
-  }
-  /* GenericSubheading */
-  .gu {
-    color: var(--color-gray-600);
-  }
-  /* GenericTraceback */
-  .gt {
-    color: var(--color-red-500);
-  }
-  /* GenericUnderline */
-  .gl {
-    color: var(--color-white-main);
-    text-decoration: underline;
-  }
-  /* TextWhitespace */
-  .w {
-    color: var(--color-gray-100);
-  }
-}
diff --git a/assets/css/syntax-light.css b/assets/css/syntax-light.css
deleted file mode 100644
index e9c3151d14fe..000000000000
--- a/assets/css/syntax-light.css
+++ /dev/null
@@ -1,337 +0,0 @@
-@utility syntax-light {
-  /* Other */
-  .x {
-    color: var(--color-black-main);
-  }
-  /* Error */
-  .err {
-    color: var(--color-red-500);
-  }
-  /* CodeLine */
-  .cl {
-    color: var(--color-gray-700);
-  }
-  /* LineHighlight */
-  .hl {
-    min-width: fit-content;
-    background-color: var(--color-gray-100);
-  }
-  /* LineNumbersTable */
-  .lnt {
-    white-space: pre;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: var(--color-gray-400);
-  }
-  /* LineNumbers */
-  .ln {
-    white-space: pre;
-    user-select: none;
-    margin-right: 0.4em;
-    padding: 0 0.4em 0 0.4em;
-    color: var(--color-gray-400);
-  }
-  /* Line */
-  .line {
-    display: flex;
-  }
-  /* Keyword */
-  .k {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordConstant */
-  .kc {
-    color: var(--color-violet-400);
-  }
-  /* KeywordDeclaration */
-  .kd {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordNamespace */
-  .kn {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordPseudo */
-  .kp {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordReserved */
-  .kr {
-    color: var(--color-yellow-700);
-  }
-  /* KeywordType */
-  .kt {
-    color: var(--color-yellow-700);
-  }
-  /* Name */
-  .n {
-    color: var(--color-violet-400);
-  }
-  /* NameAttribute */
-  .na {
-    color: var(--color-yellow-700);
-  }
-  /* NameBuiltin */
-  .nb {
-    color: var(--color-yellow-800);
-  }
-  /* NameBuiltinPseudo */
-  .bp {
-    color: var(--color-violet-400);
-  }
-  /* NameClass */
-  .nc {
-    color: var(--color-black-main);
-  }
-  /* NameConstant */
-  .no {
-    color: var(--color-black-main);
-  }
-  /* NameDecorator */
-  .nd {
-    color: var(--color-violet-400);
-  }
-  /* NameEntity */
-  .ni {
-    color: var(--color-yellow-700);
-  }
-  /* NameException */
-  .ne {
-    color: var(--color-red-700);
-  }
-  /* NameFunction */
-  .nf {
-    color: var(--color-blue-500);
-  }
-  /* NameFunctionMagic */
-  .fm {
-    color: var(--color-blue-500);
-  }
-  /* NameLabel */
-  .nl {
-    color: var(--color-yellow-700);
-  }
-  /* NameNamespace */
-  .nn {
-    color: var(--color-black-main);
-  }
-  /* NameOther */
-  .nx {
-    color: var(--color-black-main);
-  }
-  /* NameProperty */
-  .py {
-    color: var(--color-black-main);
-  }
-  /* NameTag */
-  .nt {
-    color: var(--color-blue-400);
-  }
-  /* NameVariable */
-  .nv {
-    color: var(--color-black-main);
-  }
-  /* NameVariableClass */
-  .vc {
-    color: var(--color-violet-600);
-  }
-  /* NameVariableGlobal */
-  .vg {
-    color: var(--color-violet-600);
-  }
-  /* NameVariableInstance */
-  .vi {
-    color: var(--color-violet-600);
-  }
-  /* NameVariableMagic */
-  .vm {
-    color: var(--color-violet-600);
-  }
-  /* Literal */
-  .l {
-    color: var(--color-black-main);
-  }
-  /* LiteralDate */
-  .ld {
-    color: var(--color-black-main);
-  }
-  /* LiteralString */
-  .s {
-    color: var(--color-black-main);
-  }
-  /* LiteralStringAffix */
-  .sa {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringBacktick */
-  .sb {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringChar */
-  .sc {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringDelimiter */
-  .dl {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringDoc */
-  .sd {
-    color: #8f5902;
-  }
-  /* LiteralStringDouble */
-  .s2 {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringEscape */
-  .se {
-    color: var(--color-black-main);
-  }
-  /* LiteralStringHeredoc */
-  .sh {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringInterpol */
-  .si {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringOther */
-  .sx {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringRegex */
-  .sr {
-    color: var(--color-blue-500);
-  }
-  /* LiteralStringSingle */
-  .s1 {
-    color: var(--color-green-700);
-  }
-  /* LiteralStringSymbol */
-  .ss {
-    color: var(--color-green-700);
-  }
-  /* LiteralNumber */
-  .m {
-    color: var(--color-blue-500);
-  }
-  /* LiteralNumberBin */
-  .mb {
-    color: var(--color-blue-500);
-  }
-  /* LiteralNumberFloat */
-  .mf {
-    color: var(--color-blue-500);
-  }
-  /* LiteralNumberHex */
-  .mh {
-    color: var(--color-blue-500);
-  }
-  /* LiteralNumberInteger */
-  .mi {
-    color: var(--color-blue-500);
-  }
-  /* LiteralNumberIntegerLong */
-  .il {
-    color: var(--color-blue-500);
-  }
-  /* LiteralNumberOct */
-  .mo {
-    color: var(--color-blue-500);
-  }
-  /* Operator */
-  .o {
-    color: var(--color-blue-400);
-  }
-  /* OperatorWord */
-  .ow {
-    color: var(--color-yellow-700);
-  }
-  /* Punctuation */
-  .p {
-    color: var(--color-gray-400);
-  }
-  /* Comment */
-  .c {
-    color: var(--color-gray-400);
-  }
-  /* CommentHashbang */
-  .ch {
-    color: var(--color-gray-400);
-  }
-  /* CommentMultiline */
-  .cm {
-    color: var(--color-gray-400);
-  }
-  /* CommentSingle */
-  .c1 {
-    color: var(--color-gray-400);
-  }
-  /* CommentSpecial */
-  .cs {
-    color: var(--color-gray-400);
-  }
-  /* CommentPreproc */
-  .cp {
-    color: var(--color-gray-400);
-  }
-  /* CommentPreprocFile */
-  .cpf {
-    color: var(--color-gray-400);
-  }
-  /* Generic */
-  .g {
-    color: var(--color-black-main);
-  }
-  /* GenericDeleted */
-  .gd {
-    color: var(--color-red-500);
-  }
-  /* GenericEmph */
-  .ge {
-    color: var(--color-black-main);
-  }
-  /* GenericError */
-  .gr {
-    color: var(--color-red-500);
-  }
-  /* GenericHeading */
-  .gh {
-    color: var(--color-gray-600);
-  }
-  /* GenericInserted */
-  .gi {
-    color: var(--color-green-500);
-  }
-  /* GenericOutput */
-  .go {
-    color: var(--color-black-main);
-  }
-  /* GenericPrompt */
-  .gp {
-    user-select: none;
-    color: var(--color-green-400);
-  }
-  /* GenericStrong */
-  .gs {
-    color: var(--color-black-main);
-  }
-  /* GenericSubheading */
-  .gu {
-    color: var(--color-gray-600);
-  }
-  /* GenericTraceback */
-  .gt {
-    color: var(--color-red-500);
-  }
-  /* GenericUnderline */
-  .gl {
-    color: var(--color-black-main);
-    text-decoration: underline;
-  }
-  /* TextWhitespace */
-  .w {
-    color: var(--color-gray-100);
-  }
-}
diff --git a/assets/css/trident.css b/assets/css/trident.css
new file mode 100644
index 000000000000..605bf97028f9
--- /dev/null
+++ b/assets/css/trident.css
@@ -0,0 +1,521 @@
+/* Docs adapter. Keep the upstream snapshot untouched; migrate legacy aliases here. */
+@theme inline {
+  --default-font-family: var(--tri-font-family-sans);
+  --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 {
+    --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 {
+    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-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 .navbar-entry-margin:hover,
+  .navbar-font .navbar-entry-margin:hover > :is(a, button) {
+    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(--tri-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(--tri-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(--tri-card);
+    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(--tri-card);
+    border: 1px solid var(--tri-border);
+    border-radius: var(--tri-radius-lg);
+  }
+
+  .tablist {
+    display: flex;
+    overflow-x: auto;
+    padding: var(--tri-spacing-tabs-inner);
+    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-card);
+    border: 1px solid var(--tri-border);
+    box-shadow: var(--tri-elevation-raised-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: var(--tri-scale-caption-font-size);
+    line-height: var(--tri-scale-caption-line-height);
+  }
+
+  .docs-navigation-card .card-title {
+    margin: 0;
+    font-size: var(--tri-scale-body-font-size);
+    font-weight: var(--tri-font-weight-semibold);
+    line-height: var(--tri-scale-body-line-height);
+    letter-spacing: var(--tri-letter-spacing-normal);
+  }
+
+  .docs-navigation-card .card-description {
+    margin: 0;
+    color: var(--tri-muted-foreground);
+    font-size: var(--tri-scale-body-sm-font-size);
+    line-height: var(--tri-scale-body-sm-line-height);
+    letter-spacing: var(--tri-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(--tri-muted);
+    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;
+  }
+
+  .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-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(--tri-muted);
+    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(--tri-card);
+    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(--tri-card);
+    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(--tri-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..1ee6b9b7958b 100644
--- a/assets/css/utilities.css
+++ b/assets/css/utilities.css
@@ -108,14 +108,15 @@
   }
 
   /* 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;
+    padding: 0.1em 0.25em !important;
     background: var(--tw-prose-code-bg) !important;
     .dark & {
       background: var(--tw-prose-code-bg-dark) !important;
diff --git a/assets/css/vendor/trident/manifest.json b/assets/css/vendor/trident/manifest.json
new file mode 100644
index 000000000000..368e2b82b490
--- /dev/null
+++ b/assets/css/vendor/trident/manifest.json
@@ -0,0 +1,19 @@
+{
+  "package": "@docker/trident-tokens",
+  "version": "2.0.0-beta.5",
+  "repository": "https://github.com/docker/trident",
+  "revision": "22ff6c848be181d439fd1f5d057175dddfdc9430",
+  "license": null,
+  "files": {
+    "tri-component.css": "918cca8906793b2a788c67ecc9aff12f7f97daaef151821fdf36448642656ee1",
+    "tri-elevation.css": "815ceee07e44e8066e50f18a57bac67edfaace6580caeaff0649a50fbe9eb632",
+    "tri-motion.css": "bde397fd1484793a8bb6007a69d224ac2470f1f7ff5eb1e3080a507826f2fe8f",
+    "tri-primitives.css": "c4ca72865c71aae10cbc4e89b37e161f4f8f32a3c217733d9fbe58e855677985",
+    "tri-radius.css": "bc026830e2af72566d0c5dfaa1a68918ddfee08f7e9585f88869f831b0422a5e",
+    "tri-semantic.css": "911cfbcb0774cfdd975102f8dac5679b76381b59333deb58fc7041b7670c5ea5",
+    "tri-spacing.css": "e2f09390c1a4523b0c6e24a30588376c6d54ffca8f8e7415438fbbfb45fb1cc5",
+    "tri-themes.css": "2365ca5871714ead9fb291a35cd6e208e0f79d2ec98b18614d5572685db925cd",
+    "tri-tokens.css": "af50705ffffed685a1e648130c2374b2d52445262451ff674072b93337112b22",
+    "tri-typography.css": "3540602511fda26a8febffa40726c470668ecd685efb846bcbfa45ad568300d7"
+  }
+}
diff --git a/assets/css/vendor/trident/tri-component.css b/assets/css/vendor/trident/tri-component.css
new file mode 100644
index 000000000000..a64208af9b95
--- /dev/null
+++ b/assets/css/vendor/trident/tri-component.css
@@ -0,0 +1,47 @@
+/* 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: 0px 0px 4px 0px oklch(0.69 0.199 22.3 / 0.7), 0px 0px 12px 2px oklch(0.69 0.199 22.3 / 0.25);
+  --tri-shadow-glow-running: 0px 0px 4px 0px oklch(0.72 0.17 145 / 0.7), 0px 0px 12px 2px oklch(0.72 0.17 145 / 0.25);
+  --tri-shadow-glow-warning: 0px 0px 4px 0px oklch(0.666 0.158 55.8 / 0.65), 0px 0px 12px 2px oklch(0.666 0.158 55.8 / 0.2);
+  --tri-spacing-tabs-inner: 3px;
+  --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);
+}
+
+.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);
+}
+}
diff --git a/assets/css/vendor/trident/tri-elevation.css b/assets/css/vendor/trident/tri-elevation.css
new file mode 100644
index 000000000000..041d5b8c3fab
--- /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.1), 0px 2px 4px -2px oklch(0 0 0 / 0.1);
+  --tri-elevation-floating-z: var(--tri-z-sticky);
+  --tri-elevation-modal-shadow: 0px 20px 25px -5px oklch(0 0 0 / 0.1), 0px 8px 10px -6px oklch(0 0 0 / 0.1);
+  --tri-elevation-modal-z: var(--tri-z-modal);
+  --tri-elevation-overlay-shadow: 0px 10px 15px -3px oklch(0 0 0 / 0.1), 0px 4px 6px -4px oklch(0 0 0 / 0.1);
+  --tri-elevation-overlay-z: var(--tri-z-overlay);
+  --tri-elevation-raised-shadow: 0px 1px 3px 0px oklch(0 0 0 / 0.1), 0px 1px 2px -1px oklch(0 0 0 / 0.1);
+  --tri-elevation-raised-z: var(--tri-z-dropdown);
+  --tri-elevation-toast-shadow: 0px 20px 25px -5px oklch(0 0 0 / 0.1), 0px 8px 10px -6px oklch(0 0 0 / 0.1);
+  --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..8a0a86b1a94c
--- /dev/null
+++ b/assets/css/vendor/trident/tri-primitives.css
@@ -0,0 +1,127 @@
+/* Auto-generated from tokens/ — DO NOT EDIT — run `pnpm run tokens:build` */
+
+
+@layer tri.primitives {
+:root {
+  --tri-black: 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.1), 0px 4px 6px -4px oklch(0 0 0 / 0.1);
+  --tri-shadow-md: 0px 4px 6px -1px oklch(0 0 0 / 0.1), 0px 2px 4px -2px oklch(0 0 0 / 0.1);
+  --tri-shadow-sm: 0px 1px 3px 0px oklch(0 0 0 / 0.1), 0px 1px 2px -1px oklch(0 0 0 / 0.1);
+  --tri-shadow-xl: 0px 20px 25px -5px oklch(0 0 0 / 0.1), 0px 8px 10px -6px oklch(0 0 0 / 0.1);
+  --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);
+  --tri-white: 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..7ec6938a7517
--- /dev/null
+++ b/assets/css/vendor/trident/tri-semantic.css
@@ -0,0 +1,1100 @@
+/* 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-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-disabled-foreground: var(--tri-disabled-foreground);
+  --color-foreground: var(--tri-foreground);
+  --color-grade-a-bg: var(--tri-grade-a-bg);
+  --color-grade-a-border: var(--tri-grade-a-border);
+  --color-grade-a-text: var(--tri-grade-a-text);
+  --color-grade-b-bg: var(--tri-grade-b-bg);
+  --color-grade-b-border: var(--tri-grade-b-border);
+  --color-grade-b-text: var(--tri-grade-b-text);
+  --color-grade-c-bg: var(--tri-grade-c-bg);
+  --color-grade-c-border: var(--tri-grade-c-border);
+  --color-grade-c-text: var(--tri-grade-c-text);
+  --color-grade-d-bg: var(--tri-grade-d-bg);
+  --color-grade-d-border: var(--tri-grade-d-border);
+  --color-grade-d-text: var(--tri-grade-d-text);
+  --color-grade-f-bg: var(--tri-grade-f-bg);
+  --color-grade-f-border: var(--tri-grade-f-border);
+  --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-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-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-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-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-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-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-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-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-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-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: var(--tri-black);
+  --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: var(--tri-white);
+}
+@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-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-disabled-foreground: oklch(0.661 0.014 245);
+  --tri-foreground: oklch(0.184 0.008 245);
+  --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-text: oklch(0.424 0.066 182.1);
+  --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-text: oklch(0.353 0.161 261.8);
+  --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-text: oklch(0.443 0.125 43.7);
+  --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-text: 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-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);
+  /* DEPRECATED: Not wired to any component, story, or chart today, even though color.gray's numeric grades are used. (remove in 4.0.0) */
+  --tri-neutral-focus: oklch(0.55 0.016 245 / 0.24);
+  /* DEPRECATED: Not wired to any component, story, or chart today, even though color.gray's numeric grades are used. (remove in 4.0.0) */
+  --tri-neutral-focus-visible: oklch(0.55 0.016 245 / 0.32);
+  --tri-neutral-hover: oklch(0.55 0.016 245 / 0.12);
+  /* DEPRECATED: Not wired to any component, story, or chart today, even though color.gray's numeric grades are used. (remove in 4.0.0) */
+  --tri-neutral-outlined-border: oklch(0.55 0.016 245 / 0.56);
+  /* DEPRECATED: Not wired to any component, story, or chart today, even though color.gray's numeric grades are used. (remove in 4.0.0) */
+  --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-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-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-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-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-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-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-bg: oklch(0 0 0 / 0);
+  --tri-trust-community-border: oklch(0.832 0.01 245);
+  --tri-trust-community-text: oklch(0.55 0.016 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-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-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-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-disabled-foreground: oklch(0.366 0.012 245);
+  --tri-foreground: oklch(0.913 0.007 245);
+  --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-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-text: oklch(0.806 0.09 242.2);
+  --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-text: oklch(0.821 0.14 72.9);
+  --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-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-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-low-border: oklch(0 0 0 / 0);
+  --tri-severity-medium-border: oklch(0 0 0 / 0);
+  --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-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-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-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-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-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-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-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-foreground: oklch(1 0 0);
+  --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-text: oklch(0.73 0.089 176.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-text: oklch(0.806 0.09 242.2);
+  --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-text: oklch(0.747 0.15 65.3);
+  --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-text: oklch(0.773 0.134 18.9);
+  --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-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-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-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-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-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-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-bg: oklch(0 0 0 / 0);
+  --tri-trust-community-border: oklch(0.661 0.014 245);
+  --tri-trust-community-text: oklch(0.661 0.014 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-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-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..7217d2e4fdd6
--- /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/assets/js/pierre.js b/assets/js/pierre.js
new file mode 100644
index 000000000000..668d2f65e5ed
--- /dev/null
+++ b/assets/js/pierre.js
@@ -0,0 +1,191 @@
+import { File, preloadHighlighter } from "@pierre/diffs";
+import { bundledLanguages } from "./pierre/shiki.js";
+
+import { themes } from "./pierre/themes.js";
+const aliases = {
+  console: "docs-console",
+  bash: "shellscript",
+  sh: "shellscript",
+  shell: "shellscript",
+  dockerfile: "docker",
+  yml: "yaml",
+  js: "javascript",
+  ts: "typescript",
+  py: "python",
+  golang: "go",
+  ps: "powershell",
+  plaintext: "text",
+  txt: "text",
+  systemd: "ini",
+  env: "dotenv",
+  cs: "csharp",
+};
+const languageFor = (name = "text") => {
+  const language = aliases[name.toLowerCase()] || name.toLowerCase();
+  return Object.hasOwn(bundledLanguages, language) ? language : "text";
+};
+const themeType = () =>
+  document.documentElement.classList.contains("dark") ? "dark" : "light";
+const instances = new Map();
+const pending = new WeakSet();
+const loads = new Map();
+const instructions = new Set([
+  "ADD",
+  "ARG",
+  "CMD",
+  "COPY",
+  "ENTRYPOINT",
+  "ENV",
+  "EXPOSE",
+  "FROM",
+  "HEALTHCHECK",
+  "LABEL",
+  "ONBUILD",
+  "RUN",
+  "SHELL",
+  "STOPSIGNAL",
+  "USER",
+  "VOLUME",
+  "WORKDIR",
+]);
+
+function prepare(language) {
+  if (!loads.has(language)) {
+    loads.set(language, preloadHighlighter({ themes, langs: [language] }));
+  }
+  return loads.get(language);
+}
+
+function highlightLines(value) {
+  const ranges = String(Array.isArray(value) ? value.join(" ") : value || "")
+    .split(/[\s,]+/)
+    .map((part) => part.match(/^(\d+)(?:-(\d+))?$/))
+    .filter(Boolean)
+    .map((match) => [Number(match[1]), Number(match[2] || match[1])]);
+  return (number) =>
+    ranges.some(([start, end]) => number >= start && number <= end);
+}
+
+function enhance(wrapper) {
+  if (pending.has(wrapper) || instances.has(wrapper)) return;
+  const source = wrapper.querySelector("[data-pierre-source]");
+  if (!source) return;
+  pending.add(wrapper);
+  const language = languageFor(wrapper.dataset.pierreLanguage);
+  let options = {};
+  try {
+    options = JSON.parse(wrapper.dataset.pierreOptions || "{}");
+  } catch {
+    /* Use defaults. */
+  }
+  const highlighted = highlightLines(options.hl_lines);
+  const start = Math.max(1, Number.parseInt(options.linenostart, 10) || 1);
+  const host = document.createElement("diffs-container");
+  host.className = "pierre-render";
+  host.style.visibility = "hidden";
+  wrapper.append(host);
+  const fail = (error) => {
+    console.warn("Code highlighting failed; keeping plain code.", error);
+    instances.get(wrapper)?.cleanUp();
+    instances.delete(wrapper);
+    host.remove();
+    source.hidden = false;
+    wrapper.classList.add("pierre-fallback");
+  };
+  prepare(language)
+    .then(() => {
+      if (!wrapper.isConnected) return;
+      const instance = new File({
+        theme: { light: themes[0], dark: themes[1] },
+        themeType: themeType(),
+        disableFileHeader: true,
+        disableLineNumbers: !["true", "table", "inline"].includes(
+          String(options.linenos),
+        ),
+        disableErrorHandling: true,
+        overflow: "scroll",
+        unsafeCSS: `
+        :host { --diffs-bg: var(--tri-muted); --diffs-font-family: var(--tri-font-family-mono);
+          --diffs-font-size: var(--tri-scale-mono-code-font-size);
+          --diffs-line-height: var(--tri-scale-mono-code-line-height);
+          --diffs-gap-block: 0px; --diffs-gap-inline: 8px; }
+        [data-docs-highlight] { background: var(--tri-accent-subtle); }
+        a { color: inherit; text-decoration: underline dashed; text-underline-offset: 3px; }
+      `,
+        onPostRender(container) {
+          const root = container.shadowRoot;
+          if (!root?.querySelector("[data-line]")) return;
+          for (const line of root.querySelectorAll("[data-line]")) {
+            line.toggleAttribute(
+              "data-docs-highlight",
+              highlighted(Number(line.dataset.line)),
+            );
+          }
+          for (const number of root.querySelectorAll("[data-column-number]")) {
+            const label = number.querySelector("[data-line-number-content]");
+            if (label)
+              label.textContent =
+                Number(number.dataset.columnNumber) + start - 1;
+          }
+          if (language === "docker") {
+            for (const span of root.querySelectorAll("[data-line] span")) {
+              if (!instructions.has(span.textContent) || span.closest("a"))
+                continue;
+              const link = document.createElement("a");
+              link.href = `/reference/dockerfile/#${span.textContent.toLowerCase()}`;
+              link.title = `Learn more about the ${span.textContent} instruction`;
+              span.replaceWith(link);
+              link.append(span);
+            }
+          }
+          source.hidden = true;
+          host.style.visibility = "";
+          wrapper.classList.add("pierre-ready");
+        },
+      });
+      instances.set(wrapper, instance);
+      instance.render({
+        file: { name: "code", lang: language, contents: source.textContent },
+        fileContainer: host,
+      });
+    })
+    .catch(fail);
+}
+
+function scan(root) {
+  if (root.matches?.(".pierre-code")) enhance(root);
+  root.querySelectorAll(".pierre-code").forEach(enhance);
+  for (const [wrapper, instance] of instances) {
+    if (!wrapper.isConnected) {
+      instance.cleanUp();
+      instances.delete(wrapper);
+    }
+  }
+}
+
+// Warm common Gordon languages immediately, alongside the languages on this page.
+for (const language of [
+  "shellscript",
+  "docker",
+  "yaml",
+  "json",
+  "javascript",
+  "python",
+  "go",
+]) {
+  prepare(language).catch(() => {}); // Each block handles its own fallback.
+}
+scan(document);
+const chat = document.querySelector("#gordon-chat");
+if (chat) {
+  new MutationObserver(() => scan(chat)).observe(chat, {
+    childList: true,
+    subtree: true,
+  });
+}
+new MutationObserver(() => {
+  for (const instance of instances.values()) instance.setThemeType(themeType());
+}).observe(document.documentElement, {
+  attributes: true,
+  attributeFilter: ["class"],
+});
diff --git a/assets/js/pierre/console.js b/assets/js/pierre/console.js
new file mode 100644
index 000000000000..8d04a0e7765d
--- /dev/null
+++ b/assets/js/pierre/console.js
@@ -0,0 +1,19 @@
+import shell from "shiki/langs/shellscript.mjs";
+
+// Console transcripts contain output as well as commands. Only prompt-prefixed
+// commands and their backslash continuations should be parsed as shell syntax.
+export default [
+  ...shell,
+  {
+    name: "docs-console",
+    scopeName: "text.docs-console",
+    patterns: [
+      {
+        begin: "^\\s*([$>]) ",
+        beginCaptures: { 1: { name: "keyword.control.prompt" } },
+        end: "(?<!\\\\)$",
+        patterns: [{ include: "source.shell" }],
+      },
+    ],
+  },
+];
diff --git a/assets/js/pierre/shiki.js b/assets/js/pierre/shiki.js
new file mode 100644
index 000000000000..b4fcf02c905d
--- /dev/null
+++ b/assets/js/pierre/shiki.js
@@ -0,0 +1,41 @@
+// Limit the eager Pierre bundle to languages used by Docker docs.
+export * from "shiki/core";
+export { createHighlighterCore as createHighlighter } from "shiki/core";
+export { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+export { createOnigurumaEngine } from "shiki/engine/oniguruma";
+export const bundledThemes = {};
+export const bundledLanguages = {
+  "docs-console": () => import("./console.js"),
+  shellscript: () => import("shiki/langs/shellscript.mjs"),
+  docker: () => import("shiki/langs/docker.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  go: () => import("shiki/langs/go.mjs"),
+  java: () => import("shiki/langs/java.mjs"),
+  hcl: () => import("shiki/langs/hcl.mjs"),
+  powershell: () => import("shiki/langs/powershell.mjs"),
+  xml: () => import("shiki/langs/xml.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  ini: () => import("shiki/langs/ini.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  properties: () => import("shiki/langs/properties.mjs"),
+  toml: () => import("shiki/langs/toml.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  csharp: () => import("shiki/langs/csharp.mjs"),
+  nginx: () => import("shiki/langs/nginx.mjs"),
+  http: () => import("shiki/langs/http.mjs"),
+  groovy: () => import("shiki/langs/groovy.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  graphql: () => import("shiki/langs/graphql.mjs"),
+  c: () => import("shiki/langs/c.mjs"),
+  cpp: () => import("shiki/langs/cpp.mjs"),
+  ruby: () => import("shiki/langs/ruby.mjs"),
+  php: () => import("shiki/langs/php.mjs"),
+  makefile: () => import("shiki/langs/makefile.mjs"),
+  dotenv: () => import("shiki/langs/dotenv.mjs"),
+  "git-commit": () => import("shiki/langs/git-commit.mjs"),
+};
diff --git a/assets/js/pierre/themes.js b/assets/js/pierre/themes.js
new file mode 100644
index 000000000000..d2258ad3a57a
--- /dev/null
+++ b/assets/js/pierre/themes.js
@@ -0,0 +1,31 @@
+import { createCSSVariablesTheme, registerCustomTheme } from "@pierre/diffs";
+
+// One set of syntax roles for every language; Trident supplies both palettes.
+const colors = {
+  foreground: "var(--tri-foreground)",
+  background: "var(--tri-muted)",
+  "token-keyword": "var(--tri-primary)",
+  "token-function": "var(--tri-primary)",
+  "token-link": "var(--tri-primary)",
+  "token-comment": "var(--tri-muted-foreground)",
+  "token-string": "var(--tri-foreground)",
+  "token-string-expression": "var(--tri-foreground)",
+  "token-constant": "var(--tri-foreground)",
+  "token-parameter": "var(--tri-foreground)",
+  "token-punctuation": "var(--tri-foreground)",
+  "token-inserted": "var(--tri-alert-success-title)",
+  "token-deleted": "var(--tri-alert-error-title)",
+  "token-changed": "var(--tri-primary)",
+};
+
+export const themes = ["docs-code-light", "docs-code-dark"];
+for (const [index, name] of themes.entries()) {
+  const theme = createCSSVariablesTheme({
+    name,
+    variablePrefix: "--docs-syntax-",
+    variableDefaults: colors,
+    fontStyle: false,
+  });
+  theme.type = index === 0 ? "light" : "dark";
+  registerCustomTheme(name, () => Promise.resolve(theme));
+}
diff --git a/assets/js/src/alpine.js b/assets/js/src/alpine.js
index c314dc641cd9..cb3eb4161d02 100644
--- a/assets/js/src/alpine.js
+++ b/assets/js/src/alpine.js
@@ -1,111 +1,80 @@
-import Alpine from 'alpinejs'
-import collapse from '@alpinejs/collapse'
-import persist from '@alpinejs/persist'
-import focus from '@alpinejs/focus'
-import { marked } from 'marked'
-import hljs from 'highlight.js/lib/core'
-// Import languages relevant to Docker docs
-import bash from 'highlight.js/lib/languages/bash'
-import dockerfile from 'highlight.js/lib/languages/dockerfile'
-import yaml from 'highlight.js/lib/languages/yaml'
-import json from 'highlight.js/lib/languages/json'
-import javascript from 'highlight.js/lib/languages/javascript'
-import python from 'highlight.js/lib/languages/python'
-import go from 'highlight.js/lib/languages/go'
+import Alpine from "alpinejs";
+import collapse from "@alpinejs/collapse";
+import persist from "@alpinejs/persist";
+import focus from "@alpinejs/focus";
+import { marked } from "marked";
+window.Alpine = Alpine;
 
-window.Alpine = Alpine
-
-Alpine.plugin(collapse)
-Alpine.plugin(persist)
-Alpine.plugin(focus)
-
-// Register highlight.js languages
-hljs.registerLanguage('bash', bash)
-hljs.registerLanguage('sh', bash)
-hljs.registerLanguage('shell', bash)
-hljs.registerLanguage('console', bash)
-hljs.registerLanguage('dockerfile', dockerfile)
-hljs.registerLanguage('yaml', yaml)
-hljs.registerLanguage('yml', yaml)
-hljs.registerLanguage('json', json)
-hljs.registerLanguage('javascript', javascript)
-hljs.registerLanguage('js', javascript)
-hljs.registerLanguage('python', python)
-hljs.registerLanguage('py', python)
-hljs.registerLanguage('go', go)
-hljs.registerLanguage('golang', go)
+Alpine.plugin(collapse);
+Alpine.plugin(persist);
+Alpine.plugin(focus);
 
 // Configure marked to escape HTML in text tokens only (not code blocks)
 marked.use({
   walkTokens(token) {
     // Escape HTML in text and HTML tokens, preserve code blocks
-    if (token.type === 'text' || token.type === 'html') {
-      const text = token.text || token.raw
+    if (token.type === "text" || token.type === "html") {
+      const text = token.text || token.raw;
       const escaped = text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-      if (token.text) token.text = escaped
-      if (token.raw) token.raw = escaped
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+      if (token.text) token.text = escaped;
+      if (token.raw) token.raw = escaped;
     }
-  }
-})
+  },
+});
 
 // Add $markdown magic for rendering markdown with syntax highlighting
-Alpine.magic('markdown', () => {
+Alpine.magic("markdown", () => {
   return (content) => {
-    if (!content) return ''
-    const html = marked(content)
-
-    // Parse and highlight code blocks
-    const div = document.createElement('div')
-    div.innerHTML = html
+    if (!content) return "";
+    const html = marked(content);
 
-    // Handle code blocks (pre > code)
-    div.querySelectorAll('pre').forEach((pre) => {
-      // Add not-prose to prevent Tailwind Typography styling
-      pre.classList.add('not-prose')
-      const code = pre.querySelector('code')
-      if (code) {
-        // Preserve the original text with newlines
-        const codeText = code.textContent
-
-        // Clear and set as plain text first to preserve structure
-        code.textContent = codeText
-
-        // Now apply highlight.js which will work with the text nodes
-        hljs.highlightElement(code)
-      }
-    })
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    div.querySelectorAll("pre > code").forEach((code) => {
+      const pre = code.parentElement;
+      pre.classList.add("not-prose");
+      pre.setAttribute("data-pierre-source", "");
+      const wrapper = document.createElement("div");
+      wrapper.className = "pierre-code not-prose";
+      wrapper.dataset.pierreLanguage =
+        [...code.classList]
+          .find((name) => name.startsWith("language-"))
+          ?.slice(9) || "text";
+      pre.replaceWith(wrapper);
+      wrapper.append(pre);
+    });
 
     // Handle inline code elements (not in pre blocks)
-    div.querySelectorAll('code:not(pre code)').forEach((code) => {
-      code.classList.add('not-prose')
-    })
+    div.querySelectorAll("code:not(pre code)").forEach((code) => {
+      code.classList.add("not-prose");
+    });
 
-    return div.innerHTML
-  }
-})
+    return div.innerHTML;
+  };
+});
 
 // Stores
-Alpine.store("showSidebar", false)
-Alpine.store('gordon', {
+Alpine.store("showSidebar", false);
+Alpine.store("gordon", {
   isOpen: false,
-  query: '',
+  query: "",
   autoSubmit: false,
   toggle() {
-    this.isOpen = !this.isOpen
+    this.isOpen = !this.isOpen;
   },
   open(query, autoSubmit = false) {
-    this.isOpen = true
+    this.isOpen = true;
     if (query) {
-      this.query = query
-      this.autoSubmit = autoSubmit
+      this.query = query;
+      this.autoSubmit = autoSubmit;
     }
   },
   close() {
-    this.isOpen = false
-  }
-})
+    this.isOpen = false;
+  },
+});
 
-Alpine.start()
+Alpine.start();
diff --git a/assets/js/src/dockerfile-links.js b/assets/js/src/dockerfile-links.js
deleted file mode 100644
index acb7ecdc7aed..000000000000
--- a/assets/js/src/dockerfile-links.js
+++ /dev/null
@@ -1,33 +0,0 @@
-const keywords = [
-  "ADD",
-  "ARG",
-  "CMD",
-  "COPY",
-  "ENTRYPOINT",
-  "ENV",
-  "EXPOSE",
-  "FROM",
-  "HEALTHCHECK",
-  "LABEL",
-  // "MAINTAINER",
-  "ONBUILD",
-  "RUN",
-  "SHELL",
-  "STOPSIGNAL",
-  "USER",
-  "VOLUME",
-  "WORKDIR",
-]
-const cmds = Array.from(document.querySelectorAll(".language-dockerfile span.k"))
-  .filter((el) => keywords.some(kwd => el.textContent.includes(kwd)));
-
-for (const cmd of cmds) {
-  const name = cmd.textContent;
-  const a = document.createElement("a")
-  a.classList.add("underline","underline-offset-4","decoration-dashed","cursor-pointer")
-  a.title = `Learn more about the ${name} instruction`
-  a.href = `/reference/dockerfile/#${name.toLowerCase()}`
-  a.innerHTML = cmd.outerHTML
-  cmd.insertAdjacentElement("beforebegin", a)
-  cmd.remove()
-}
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/hugo.yaml b/hugo.yaml
index 38dce8194f35..f5e3c8de612b 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -339,9 +339,6 @@ module:
     # Mount the icon files to assets so we can access them with resources.Get
     - source: node_modules/heroicons/24/solid
       target: assets/icons
-    # Mount highlight.js theme for Gordon chat syntax highlighting
-    - source: node_modules/highlight.js/styles/github-dark.css
-      target: assets/css/highlight-github-dark.css
 
   imports:
     # Docker Engine API
diff --git a/layouts/_markup/render-codeblock.html b/layouts/_markup/render-codeblock.html
index 3d1440131b01..d74eab6aef1e 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">
           {{ . }}
@@ -17,10 +17,8 @@
   {{ end }}
   <div class="relative w-full">
     {{ $lang := .Type | default "text" }}
-    {{ $result := transform.Highlight .Inner
-      $lang .Options
-    }}
-    <div class="syntax-light dark:syntax-dark not-prose w-full">
+    {{ $source := partial "components/code-source.html" (dict "content" .Inner "lang" $lang "options" .Options) }}
+    <div class="not-prose w-full">
       <button
         x-data="{ code: '{{ encoding.Base64Encode .Inner }}', copying: false }"
         class="{{ if .Attributes.title }}
@@ -60,11 +58,11 @@
             </button>
           </div>
           <div :class="{ 'h-32': collapse }">
-            {{ $result }}
+            {{ $source }}
             <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"
@@ -74,7 +72,7 @@
           </div>
         </div>
       {{ else }}
-        {{ $result }}
+        {{ $source }}
       {{ end }}
     </div>
   </div>
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/components/code-source.html b/layouts/_partials/components/code-source.html
new file mode 100644
index 000000000000..5b546c885530
--- /dev/null
+++ b/layouts/_partials/components/code-source.html
@@ -0,0 +1,7 @@
+<div
+  class="pierre-code not-prose"
+  data-pierre-language="{{ .lang | default "text" }}"
+  data-pierre-options="{{ .options | default dict | jsonify }}"
+>
+  <pre data-pierre-source><code>{{ .content }}</code></pre>
+</div>
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..6885982e13e1 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"
@@ -96,6 +96,25 @@
 />
 {{ $theme := resources.Get "js/theme.js" | js.Build (dict "minify" true) }}
 <script>{{ $theme.Content | safeJS }}</script>
+{{ $pierre := resources.Get "js/pierre.js" | js.Build (dict "minify" true "targetPath" "pierre.js" "shims" (dict "shiki" "js/pierre/shiki.js")) }}
+<link
+  rel="preload"
+  href="{{ $pierre.RelPermalink }}"
+  as="script"
+  fetchpriority="high"
+/>
+<script>
+  document.documentElement.classList.add('pierre-loading');
+  setTimeout(function () {
+    document.documentElement.classList.remove('pierre-loading');
+  }, 4000);
+</script>
+<script
+  defer
+  src="{{ $pierre.RelPermalink }}"
+  fetchpriority="high"
+  onerror="document.documentElement.classList.remove('pierre-loading')"
+></script>
 {{ $js := resources.Match "js/src/**.js"
   | resources.Concat "scripts.js"
   | js.Build (dict "minify" true "targetPath" "scripts.js")
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/_shortcodes/file.html b/layouts/_shortcodes/file.html
index 9e62391bc013..eca89990a35a 100644
--- a/layouts/_shortcodes/file.html
+++ b/layouts/_shortcodes/file.html
@@ -17,7 +17,7 @@
     path      required. File path within the project, can include folders (e.g. "db/password.txt").
     lang      optional. Overrides the fence info string for syntax highlighting.
     status    optional. One of "modified" or "new". Shows a colored badge in the file tree.
-    hl_lines  optional. Line numbers/ranges to highlight (e.g. "8" or "6,8-11"). Passed to chroma.
+    hl_lines  optional. Line numbers/ranges to highlight (e.g. "8" or "6,8-11"). Passed to the code renderer.
 */}}
 
 {{ if ne .Parent.Name "files" }}
diff --git a/layouts/_shortcodes/files.html b/layouts/_shortcodes/files.html
index 47bf92f14b31..32939a9ed89c 100644
--- a/layouts/_shortcodes/files.html
+++ b/layouts/_shortcodes/files.html
@@ -288,9 +288,7 @@
 
       {{/* Content pane. The outer `main` is the positioning context for the
            copy button and stays fixed; the inner div is the scroll container
-           so content scrolls independently of the button. The chroma
-           `.highlight` wrapper's own overflow-x is disabled so the scroll
-           container owns both axes and scrollbars sit at the window edges. */}}
+           so content scrolls independently of the button. */}}
       <main class="group relative min-w-0 flex-1 overflow-hidden">
         {{/* Per-file copy button. Matches the codeblock copy style: icon-only,
              hover-revealed, swaps to a check icon for two seconds on copy. */}}
@@ -308,18 +306,18 @@
           >
         </button>
 
-        <div class="h-full overflow-auto [&_.highlight]:overflow-visible">
+        <div class="h-full overflow-auto">
           {{ range $i, $f := $files }}
-            {{ $opts := "" }}
+            {{ $opts := dict }}
             {{ with $f.hl_lines }}
-              {{ $opts = printf "hl_lines=%s" . }}
+              {{ $opts = dict "hl_lines" . }}
             {{ end }}
             <div
               role="tabpanel"
               x-show="selected === {{ $i }}"
-              class="syntax-light dark:syntax-dark"
+              class="not-prose"
             >
-              {{ (transform.Highlight $f.content $f.lang $opts) | safeHTML }}
+              {{ partial "components/code-source.html" (dict "content" $f.content "lang" $f.lang "options" $opts) }}
             </div>
           {{ end }}
         </div>
@@ -376,12 +374,12 @@
             >{{ partialCached "icon" "check-circle" "check-circle" }}</span
           >
         </button>
-        <div class="h-full overflow-auto [&_.highlight]:overflow-visible">
-          <div x-show="shell === 'bash'" class="syntax-light dark:syntax-dark">
-            {{ (transform.Highlight $bashScript "bash" "") | safeHTML }}
+        <div class="h-full overflow-auto">
+          <div x-show="shell === 'bash'" class="not-prose">
+            {{ partial "components/code-source.html" (dict "content" $bashScript "lang" "bash") }}
           </div>
-          <div x-show="shell === 'powershell'" x-cloak class="syntax-light dark:syntax-dark">
-            {{ (transform.Highlight $psScript "powershell" "") | safeHTML }}
+          <div x-show="shell === 'powershell'" x-cloak class="not-prose">
+            {{ partial "components/code-source.html" (dict "content" $psScript "lang" "powershell") }}
           </div>
         </div>
       </div>
diff --git a/layouts/_shortcodes/sandbox-auth.html b/layouts/_shortcodes/sandbox-auth.html
index b19b2261b5f3..d11b2ae7e1e1 100644
--- a/layouts/_shortcodes/sandbox-auth.html
+++ b/layouts/_shortcodes/sandbox-auth.html
@@ -83,12 +83,9 @@
           store. The command prompts for the key without displaying it:
         </p>
         <div
-          class="syntax-light dark:syntax-dark overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
+          class="not-prose overflow-hidden rounded-md border border-gray-200 dark:border-gray-700"
         >
-          {{ transform.Highlight
-            (printf "$ sbx secret set %s" $choice.service)
-            "console" ""
-          }}
+          {{ partial "components/code-source.html" (dict "content" (printf "$ sbx secret set %s" $choice.service) "lang" "console") }}
         </div>
       </div>
     {{ end }}
diff --git a/layouts/baseof.html b/layouts/baseof.html
index 7d4354bcc353..b7742764b128 100644
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -6,7 +6,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" . }}
@@ -31,7 +31,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 -->
@@ -62,7 +65,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/package-lock.json b/package-lock.json
index 53d434980a39..8fd015a6e937 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,14 +14,15 @@
         "@alpinejs/persist": "3.15.8",
         "@docker/marlin-sdk-web-public": "0.6.0",
         "@floating-ui/dom": "1.7.6",
+        "@pierre/diffs": "1.1.22",
         "@tailwindcss/cli": "4.2.1",
         "@tailwindcss/typography": "0.5.19",
         "alpinejs": "3.15.8",
         "heroicons": "2.2.0",
-        "highlight.js": "11.11.1",
         "marked": "17.0.4",
         "mermaid": "11.15.0",
         "micromark": "4.0.2",
+        "shiki": "3.23.0",
         "tailwindcss": "4.2.1"
       },
       "devDependencies": {
@@ -509,6 +510,31 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/@pierre/diffs": {
+      "version": "1.1.22",
+      "resolved": "https://registry.npmjs.org/@pierre/diffs/-/diffs-1.1.22.tgz",
+      "integrity": "sha512-1Iv7kdl6OABFCd1n2HQbGUiRHouXPaHoIjcb7Lwg8zeJKY5ph+cESFcGEyIiwW0NCbKGtYS2bTnXmI+Eze5dwg==",
+      "dependencies": {
+        "@pierre/theme": "0.0.28",
+        "@shikijs/transformers": "^3.0.0",
+        "diff": "8.0.3",
+        "hast-util-to-html": "9.0.5",
+        "lru_map": "0.4.1",
+        "shiki": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1 || ^19.0.0",
+        "react-dom": "^18.3.1 || ^19.0.0"
+      }
+    },
+    "node_modules/@pierre/theme": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@pierre/theme/-/theme-0.0.28.tgz",
+      "integrity": "sha512-1j/H/fECBuc9dEvntdWI+l435HZapw+RCJTlqCA6BboQ5TjlnE005j/ROWutXIs8aq5OAc82JI2Kwk4A1WWBgw==",
+      "engines": {
+        "vscode": "^1.0.0"
+      }
+    },
     "node_modules/@rumdl/cli-darwin-arm64": {
       "version": "0.2.49",
       "resolved": "https://registry.npmjs.org/@rumdl/cli-darwin-arm64/-/cli-darwin-arm64-0.2.49.tgz",
@@ -621,6 +647,75 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@shikijs/core": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.23.0.tgz",
+      "integrity": "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==",
+      "dependencies": {
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.5"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.23.0.tgz",
+      "integrity": "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA==",
+      "dependencies": {
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "oniguruma-to-es": "^4.3.4"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.23.0.tgz",
+      "integrity": "sha512-1nWINwKXxKKLqPibT5f4pAFLej9oZzQTsby8942OTlsJzOBZ0MWKiwzMsd+jhzu8YPCHAswGnnN1YtQfirL35g==",
+      "dependencies": {
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.23.0.tgz",
+      "integrity": "sha512-2Ep4W3Re5aB1/62RSYQInK9mM3HsLeB91cHqznAJMuylqjzNVAVCMnNWRHFtcNHXsoNRayP9z1qj4Sq3nMqYXg==",
+      "dependencies": {
+        "@shikijs/types": "3.23.0"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.23.0.tgz",
+      "integrity": "sha512-5qySYa1ZgAT18HR/ypENL9cUSGOeI2x+4IvYJu4JgVJdizn6kG4ia5Q1jDEOi7gTbN4RbuYtmHh0W3eccOrjMA==",
+      "dependencies": {
+        "@shikijs/types": "3.23.0"
+      }
+    },
+    "node_modules/@shikijs/transformers": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-3.23.0.tgz",
+      "integrity": "sha512-F9msZVxdF+krQNSdQ4V+Ja5QemeAoTQ2jxt7nJCwhDsdF1JWS3KxIQXA3lQbyKwS3J61oHRUSv4jYWv3CkaKTQ==",
+      "dependencies": {
+        "@shikijs/core": "3.23.0",
+        "@shikijs/types": "3.23.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.23.0.tgz",
+      "integrity": "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ==",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="
+    },
     "node_modules/@tailwindcss/cli": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@tailwindcss/cli/-/cli-4.2.1.tgz",
@@ -1187,6 +1282,22 @@
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
       "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.5.tgz",
+      "integrity": "sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/ms": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
@@ -1198,6 +1309,16 @@
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
       "optional": true
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.4.0.tgz",
+      "integrity": "sha512-1mEZtMKPM09vDmQt5y7YvmN2+DFTP7Tg0EWXdic8/C6VRnpb33e4ghisCIE3WZjsE2N8mf+QV1Zqh7ZFYLWInQ=="
+    },
     "node_modules/@upsetjs/venn.js": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@upsetjs/venn.js/-/venn.js-2.0.0.tgz",
@@ -1243,6 +1364,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/character-entities": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
@@ -1252,6 +1382,33 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
@@ -1819,6 +1976,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/diff": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-8.0.3.tgz",
+      "integrity": "sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==",
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/dompurify": {
       "version": "3.4.6",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.6.tgz",
@@ -1877,18 +2042,52 @@
       "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
       "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/heroicons": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.2.0.tgz",
       "integrity": "sha512-yOwvztmNiBWqR946t+JdgZmyzEmnRMC2nxvHFC90bF1SUttwB6yJKYeme1JeEcBfobdOs827nCyiWBS2z/brog=="
     },
-    "node_modules/highlight.js": {
-      "version": "11.11.1",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
-      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
-      "license": "BSD-3-Clause",
-      "engines": {
-        "node": ">=12.0.0"
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/iconv-lite": {
@@ -2252,6 +2451,11 @@
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
       "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
     },
+    "node_modules/lru_map": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz",
+      "integrity": "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -2273,6 +2477,26 @@
         "node": ">= 20"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mermaid": {
       "version": "11.15.0",
       "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.15.0.tgz",
@@ -2745,6 +2969,21 @@
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "license": "MIT"
     },
+    "node_modules/oniguruma-parser": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
+      "integrity": "sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw=="
+    },
+    "node_modules/oniguruma-to-es": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.3.6.tgz",
+      "integrity": "sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==",
+      "dependencies": {
+        "oniguruma-parser": "^0.12.2",
+        "regex": "^6.1.0",
+        "regex-recursion": "^6.0.2"
+      }
+    },
     "node_modules/package-manager-detector": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
@@ -2911,6 +3150,57 @@
         }
       }
     },
+    "node_modules/property-information": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.2.0.tgz",
+      "integrity": "sha512-IAtzIB6sUiWaJYrX9smp3V46pBGbBeLFRGdh25kg1334VcBlD8HzhPeNIWQH9zhGmo2itIe25EHt9dQP7G5hmg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz",
+      "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.3.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz",
+      "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.28.0"
+      },
+      "peerDependencies": {
+        "react": "^19.3.0"
+      }
+    },
+    "node_modules/regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz",
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="
+    },
     "node_modules/robust-predicates": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
@@ -2958,6 +3248,27 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
+    "node_modules/scheduler": {
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz",
+      "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==",
+      "peer": true
+    },
+    "node_modules/shiki": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-3.23.0.tgz",
+      "integrity": "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA==",
+      "dependencies": {
+        "@shikijs/core": "3.23.0",
+        "@shikijs/engine-javascript": "3.23.0",
+        "@shikijs/engine-oniguruma": "3.23.0",
+        "@shikijs/langs": "3.23.0",
+        "@shikijs/themes": "3.23.0",
+        "@shikijs/types": "3.23.0",
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2967,6 +3278,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/stylis": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.4.0.tgz",
@@ -3017,6 +3350,15 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-dedent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
@@ -3035,6 +3377,69 @@
         "ulid": "bin/cli.js"
       }
     },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3060,6 +3465,41 @@
       "bin": {
         "uuidv7": "cli.js"
       }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index bb4de3c29c77..52403a00a7e3 100644
--- a/package.json
+++ b/package.json
@@ -19,14 +19,15 @@
     "@alpinejs/persist": "3.15.8",
     "@docker/marlin-sdk-web-public": "0.6.0",
     "@floating-ui/dom": "1.7.6",
+    "@pierre/diffs": "1.1.22",
     "@tailwindcss/cli": "4.2.1",
     "@tailwindcss/typography": "0.5.19",
     "alpinejs": "3.15.8",
     "heroicons": "2.2.0",
-    "highlight.js": "11.11.1",
     "marked": "17.0.4",
     "mermaid": "11.15.0",
     "micromark": "4.0.2",
+    "shiki": "3.23.0",
     "tailwindcss": "4.2.1"
   },
   "devDependencies": {
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