diff --git a/apps/website/docs/_nav.json b/apps/website/docs/_nav.json
index d406a451..05fd4e03 100644
--- a/apps/website/docs/_nav.json
+++ b/apps/website/docs/_nav.json
@@ -8,5 +8,10 @@
     "text": "Playground",
     "link": "/playground/",
     "activeMatch": "^/playground/"
+  },
+  {
+    "text": "Blog",
+    "link": "/blog/perf-swc-vs-babel",
+    "activeMatch": "^/blog/"
   }
 ]
diff --git a/apps/website/docs/docs/getting-started.mdx b/apps/website/docs/docs/getting-started.mdx
index f8933a6b..e221408b 100644
--- a/apps/website/docs/docs/getting-started.mdx
+++ b/apps/website/docs/docs/getting-started.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # Getting Started
 
@@ -8,23 +8,7 @@ The easiest way to try SWC is using the [Playground](/playground/).
 
 Otherwise, run the following to download pre-built binaries:
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/cli @swc/core
-    ```
-  </Tab>
-    <Tab label="npm">
-    ```bash
-    npm i -D @swc/cli @swc/core
-    ```
-  </Tab>
-    <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/cli @swc/core
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/cli @swc/core" />
 
 Then, you can transpile your first file and emit to `stdout`:
 
diff --git a/apps/website/docs/docs/references/wasm-typescript.mdx b/apps/website/docs/docs/references/wasm-typescript.mdx
index 84edfd13..2186a366 100644
--- a/apps/website/docs/docs/references/wasm-typescript.mdx
+++ b/apps/website/docs/docs/references/wasm-typescript.mdx
@@ -1,10 +1,10 @@
+import { PackageManagerTabs } from '@rspress/core/theme';
+
 # @swc/wasm-typescript
 
 ## Installation
 
-```bash
-npm install @swc/wasm-typescript
-```
+<PackageManagerTabs command="install @swc/wasm-typescript" />
 
 ### Usage
 
diff --git a/apps/website/docs/docs/usage/bundling.mdx b/apps/website/docs/docs/usage/bundling.mdx
index 5025b661..8e6072ee 100644
--- a/apps/website/docs/docs/usage/bundling.mdx
+++ b/apps/website/docs/docs/usage/bundling.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 import Callout from '@components/Callout';
 
 # Bundling (swcpack)
@@ -18,23 +18,7 @@ View a [basic example of bundling](https://github.com/swc-project/pkgs/tree/main
 
 ## Usage
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/cli @swc/core
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/cli @swc/core" />
 
 Create a `spack.config.js` file and run:
 
diff --git a/apps/website/docs/docs/usage/cli.mdx b/apps/website/docs/docs/usage/cli.mdx
index 53bf20cf..0ad89b42 100644
--- a/apps/website/docs/docs/usage/cli.mdx
+++ b/apps/website/docs/docs/usage/cli.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # @swc/cli
 
@@ -6,23 +6,7 @@ import { Tab, Tabs } from '@rspress/core/theme';
 
 Run the following to download pre-built binaries:
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/cli @swc/core
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/cli @swc/core
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/cli @swc/core" />
 
 Then, you can transpile your files:
 
@@ -116,9 +100,7 @@ npx swc src --only **/*.js
 
 To automatically recompile files on changes, install `chokidar`:
 
-```sh
-npm i -D chokidar
-```
+<PackageManagerTabs command="install -D chokidar" />
 
 Then, add the `-w` flag:
 
diff --git a/apps/website/docs/docs/usage/html.mdx b/apps/website/docs/docs/usage/html.mdx
index 6fcaba7f..b432cebd 100644
--- a/apps/website/docs/docs/usage/html.mdx
+++ b/apps/website/docs/docs/usage/html.mdx
@@ -2,28 +2,12 @@
 title: "@swc/html"
 ---
 
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 import TypeDeclarations from '@components/TypeDeclarations';
 
 ## Installation
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/html
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/html
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/html
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/html" />
 
 ## Usage
 
diff --git a/apps/website/docs/docs/usage/jest.mdx b/apps/website/docs/docs/usage/jest.mdx
index 832bcec3..f120c565 100644
--- a/apps/website/docs/docs/usage/jest.mdx
+++ b/apps/website/docs/docs/usage/jest.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # @swc/jest
 
@@ -6,23 +6,7 @@ To make your Jest tests run faster, you can swap out the default JavaScript-base
 
 ## Installation
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D jest @swc/core @swc/jest
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D jest @swc/core @swc/jest
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D jest @swc/core @swc/jest
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D jest @swc/core @swc/jest" />
 
 ## Usage
 
diff --git a/apps/website/docs/docs/usage/swc-loader.mdx b/apps/website/docs/docs/usage/swc-loader.mdx
index 6169e234..b2d7a6c3 100644
--- a/apps/website/docs/docs/usage/swc-loader.mdx
+++ b/apps/website/docs/docs/usage/swc-loader.mdx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@rspress/core/theme';
+import { PackageManagerTabs } from '@rspress/core/theme';
 
 # swc-loader
 
@@ -8,23 +8,7 @@ For Rspack users, you can use Rspack's [builtin:swc-loader](https://rspack.rs/gu
 
 ## Installation
 
-<Tabs>
-  <Tab label="pnpm">
-    ```bash
-    pnpm add -D @swc/core swc-loader
-    ```
-  </Tab>
-  <Tab label="npm">
-    ```bash
-    npm i -D @swc/core swc-loader
-    ```
-  </Tab>
-  <Tab label="yarn">
-    ```bash
-    yarn add -D @swc/core swc-loader
-    ```
-  </Tab>
-</Tabs>
+<PackageManagerTabs command="install -D @swc/core swc-loader" />
 
 ## Usage
 
diff --git a/apps/website/docs/playground/index.mdx b/apps/website/docs/playground/index.mdx
index 7d398b7c..c83021d4 100644
--- a/apps/website/docs/playground/index.mdx
+++ b/apps/website/docs/playground/index.mdx
@@ -1,7 +1,6 @@
 ---
 title: SWC Playground
-sidebar: false
-outline: false
+pageType: custom
 ---
 
 <iframe
diff --git a/apps/website/rspress.config.ts b/apps/website/rspress.config.ts
index 9ed8bf33..eb55db60 100644
--- a/apps/website/rspress.config.ts
+++ b/apps/website/rspress.config.ts
@@ -86,6 +86,7 @@ export default defineConfig({
   route: {
     cleanUrls: true,
   },
+  llms: true,
   builderConfig: {
     resolve: {
       alias: {
diff --git a/apps/website/src/styles/index.css b/apps/website/src/styles/index.css
index b451b840..7f572da9 100644
--- a/apps/website/src/styles/index.css
+++ b/apps/website/src/styles/index.css
@@ -51,6 +51,10 @@
   min-width: 0;
 }
 
+.swc-callout .rp-codeblock {
+  --rp-code-title-bg: var(--rp-c-bg-soft);
+}
+
 /* MDX children come wrapped in <p>/<ul> with doc-theme margins; strip the
    outer ones so content aligns with the emoji instead of sagging below it. */
 .swc-callout__content > *:first-child {
@@ -72,6 +76,10 @@
   color: oklch(0.372 0.044 257.287);
 }
 
+.swc-home > .rp-llms-container {
+  display: none;
+}
+
 .dark .swc-home {
   color: oklch(0.929 0.013 255.508);
 }
diff --git a/apps/website/theme/index.css b/apps/website/theme/index.css
index dd486045..d8c19b69 100644
--- a/apps/website/theme/index.css
+++ b/apps/website/theme/index.css
@@ -1,41 +1,86 @@
-/* Theme alignment with the original Nextra-based swc.rs site. */
+/*
+ * Generated by Agent.
+ * Customized with the rspress-custom-theme skill:
+ * https://github.com/rstackjs/agent-skills/blob/main/skills/rspress-custom-theme/SKILL.md
+ * Theme alignment with the original Nextra-based swc.rs site.
+ */
 
 :root {
-  --rp-font-family-base: ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --rp-c-bg: #fafafa;
-  --rp-c-bg-alt: #fafafa;
-  --rp-c-bg-soft: #f3f4f6;
-  --rp-c-bg-mute: #e5e7eb;
-  --rp-c-brand: hsl(212, 100%, 45%);
-  --rp-c-brand-light: hsl(212, 100%, 50%);
-  --rp-c-brand-lighter: hsl(212, 100%, 66%);
-  --rp-c-brand-dark: hsl(212, 100%, 39%);
-  --rp-c-brand-darker: hsl(212, 100%, 32%);
-  --rp-c-brand-tint: hsla(212, 100%, 45%, 0.1);
-  --rp-c-link: var(--rp-c-brand);
+  --rp-c-brand: #0875e1;
+  --rp-c-brand-light: #268cf0;
+  --rp-c-brand-lighter: #d8eaff;
+  --rp-c-brand-dark: #0068d1;
+  --rp-c-brand-darker: #0055ad;
+  --rp-c-brand-tint: rgba(8, 117, 225, 0.1);
+
+  --rp-c-bg: #fbfbfc;
+  --rp-c-bg-soft: #f7f8fa;
+  --rp-c-bg-mute: #f0f3f6;
+  --rp-c-divider: rgba(15, 23, 42, 0.18);
+  --rp-c-divider-light: rgba(15, 23, 42, 0.1);
+  --rp-c-text-0: #0f172a;
+  --rp-c-text-1: #1e293b;
+  --rp-c-text-2: #5b677a;
+  --rp-c-text-code: #3b5875;
+  --rp-c-text-code-bg: rgba(71, 85, 105, 0.08);
+  --rp-c-text-code-border: rgba(71, 85, 105, 0.08);
+
+  --rp-nav-height: 72px;
+  --rp-sidebar-width: 264px;
+  --rp-outline-width: 280px;
+  --rp-content-max-width: 1200px;
+  --rp-content-padding-x: 64px;
+  --rp-content-padding-y: 56px;
+
+  --rp-radius: 10px;
+  --rp-radius-small: 6px;
+  --rp-code-font-size: 0.925rem;
+  --rp-code-title-bg: transparent;
+  --rp-code-block-bg: #ffffff;
+  --rp-code-block-border: 1px solid #d8dee9;
+  --rp-code-block-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
 }
 
 .dark {
-  --rp-c-bg: #111;
-  --rp-c-bg-alt: #111;
-  --rp-c-bg-soft: #262626;
-  --rp-c-bg-mute: #404040;
-  --rp-c-brand: hsl(204, 100%, 55%);
-  --rp-c-brand-light: hsl(204, 100%, 60%);
-  --rp-c-brand-lighter: hsl(204, 100%, 76%);
-  --rp-c-brand-dark: hsl(204, 100%, 49%);
-  --rp-c-brand-darker: hsl(204, 100%, 42%);
-  --rp-c-brand-tint: hsla(204, 100%, 55%, 0.12);
-  --rp-c-link: var(--rp-c-brand);
+  --rp-c-brand: #60a5fa;
+  --rp-c-brand-light: #7db7fb;
+  --rp-c-brand-lighter: #9ac8fc;
+  --rp-c-brand-dark: #3b91f3;
+  --rp-c-brand-darker: #2581eb;
+  --rp-c-brand-tint: rgba(96, 165, 250, 0.12);
+
+  --rp-c-bg: #111318;
+  --rp-c-bg-soft: #191c23;
+  --rp-c-bg-mute: #222630;
+  --rp-c-divider: rgba(226, 232, 240, 0.2);
+  --rp-c-divider-light: rgba(226, 232, 240, 0.1);
+  --rp-c-text-0: #f8fafc;
+  --rp-c-text-1: #e5eaf1;
+  --rp-c-text-2: #a7b0c0;
+  --rp-c-text-code: #c7d8ec;
+  --rp-c-text-code-bg: rgba(148, 163, 184, 0.12);
+  --rp-c-text-code-border: rgba(148, 163, 184, 0.08);
+  --rp-code-block-bg: #15181e;
+  --rp-code-block-border: 1px solid rgba(226, 232, 240, 0.12);
 }
 
-::selection {
-  background: hsla(212, 100%, 45%, 0.3);
+html {
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
-.dark ::selection {
-  background: hsla(204, 100%, 55%, 0.3);
+body {
+  letter-spacing: -0.006em;
+}
+
+/* Header */
+.rp-nav__title__link {
+  font-size: 1.25rem;
+  font-weight: 750;
+  letter-spacing: -0.025em;
 }
 
 .swc-nav-title__logo {
@@ -51,7 +96,8 @@
 }
 
 .swc-nav-title__tagline {
-  color: #4b5563;
+  color: var(--rp-c-text-2);
+  font-size: 0.95rem;
   font-weight: 400;
   white-space: nowrap;
 }
@@ -60,14 +106,341 @@
   color: #9ca3af;
 }
 
+.rp-nav__right {
+  gap: 24px;
+}
+
+.rp-nav-menu {
+  order: 1;
+}
+
+.rp-search-button {
+  order: 2;
+  min-width: 280px;
+  height: 42px;
+  border: 0;
+  background: var(--rp-c-bg-soft);
+  box-shadow: inset 0 0 0 1px var(--rp-c-divider-light);
+}
+
+.rp-search-button:hover {
+  border: 0;
+  box-shadow: inset 0 0 0 1px var(--rp-c-brand);
+}
+
+.rp-nav__others {
+  order: 3;
+}
+
+.rp-nav-hamburger__md {
+  order: 4;
+}
+
+.rp-nav-menu__item__container {
+  color: var(--rp-c-text-2);
+  font-size: 0.95rem;
+  font-weight: 550;
+}
+
+.rp-nav-menu__item:hover .rp-nav-menu__item__container,
+.rp-nav-menu__item--active .rp-nav-menu__item__container {
+  font-size: 0.95rem;
+}
+
+.rp-nav-menu__item--active .rp-nav-menu__item__container {
+  font-weight: 650;
+}
+
+/* Sidebar */
+.rp-doc-layout__sidebar {
+  --swc-sidebar-heading: #475467;
+  --swc-sidebar-icon: #98a2b3;
+  --swc-sidebar-text: #667085;
+
+  padding: 22px 14px 48px;
+  border-right-color: var(--rp-c-divider-light);
+}
+
+.dark .rp-doc-layout__sidebar {
+  --swc-sidebar-heading: #d0d5dd;
+  --swc-sidebar-icon: #667085;
+  --swc-sidebar-text: #98a2b3;
+}
+
+.rp-sidebar-item {
+  margin-top: 2px;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 5px;
+  color: var(--swc-sidebar-text);
+  border-radius: 6px;
+  font-size: 0.84375rem;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.rp-sidebar-item:hover,
+.rp-sidebar-item--pending {
+  background: transparent;
+}
+
+.rp-sidebar-item:hover {
+  color: var(--swc-sidebar-text);
+}
+
+.rp-sidebar-group {
+  margin-top: 16px;
+  margin-bottom: 4px;
+  color: var(--swc-sidebar-heading);
+  font-weight: 600;
+  letter-spacing: 0.005em;
+}
+
+.rp-sidebar-group:hover {
+  color: var(--swc-sidebar-heading);
+}
+
+.rp-doc-layout__sidebar .rp-sidebar-item .rp-doc {
+  color: inherit;
+  font-size: inherit;
+}
+
+.rp-sidebar-item[data-depth="0"] {
+  font-size: 0.875rem;
+}
+
+.rp-sidebar-group .rp-sidebar-item__right {
+  color: var(--swc-sidebar-icon);
+  opacity: 0.72;
+}
+
+.rp-sidebar-group .rp-sidebar-item__right svg {
+  width: 14px;
+  height: 14px;
+}
+
+.rp-sidebar-item--group-item {
+  margin-top: 1px;
+  padding-top: 5px;
+  padding-right: 8px;
+  padding-bottom: 5px;
+}
+
+.rp-sidebar-item--group-item::before {
+  display: none;
+}
+
+.rp-sidebar-item--group-item.rp-sidebar-item--active
+  .rp-sidebar-item__left::before {
+  left: 10px;
+  width: 2px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--rp-c-brand);
+  inset-block: 50% auto;
+  transform: translateY(-50%);
+}
+
+.rp-sidebar-item--active,
+.rp-sidebar-item--active:hover {
+  color: var(--rp-c-brand);
+  background: transparent;
+  font-weight: 600;
+}
+
+.dark .rp-sidebar-item--active,
+.dark .rp-sidebar-item--active:hover {
+  color: var(--rp-c-brand-light);
+}
+
+.rp-sidebar-item--active:not(.rp-sidebar-item--group-item)::before {
+  position: absolute;
+  width: 2px;
+  height: 16px;
+  border-radius: 999px;
+  background: var(--rp-c-brand);
+  content: "";
+  inset-block-start: 50%;
+  inset-inline-start: 0;
+  transform: translateY(-50%);
+}
+
+/* Main document typography */
+.rp-doc-layout__doc-container {
+  min-width: 0;
+}
+
+.rp-doc {
+  color: var(--rp-c-text-1);
+  font-size: 1.04rem;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h1) {
+  margin-bottom: 2.75rem;
+  color: var(--rp-c-text-0);
+  font-size: clamp(2.35rem, 3vw, 2.85rem);
+  font-weight: 760;
+  line-height: 1.12;
+  letter-spacing: -0.04em;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h2) {
+  margin-top: 3.25rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 0.65rem;
+  border-bottom: 1px solid var(--rp-c-divider-light);
+  color: var(--rp-c-text-0);
+  font-size: 1.85rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: -0.03em;
+}
+
+.rp-doc
+  :not(:where(.rp-not-doc, .rp-not-doc *)):where(h2:first-of-type)::before {
+  display: none;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h3) {
+  color: var(--rp-c-text-0);
+  font-size: 1.45rem;
+  font-weight: 680;
+  letter-spacing: -0.02em;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(p):not(:where(li p)),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(ul, ol) {
+  line-height: 1.85;
+}
+
+.rp-doc
+  :not(:where(.rp-not-doc, .rp-not-doc *)):where(a.rp-link):not(
+    :where(.rp-header-anchor)
+  ) {
+  text-underline-offset: 3px;
+}
+
+.rp-doc
+  :not(:where(.rp-not-doc, .rp-not-doc *)):where(a.rp-link):not(
+    :where(.rp-header-anchor)
+  ):hover {
+  border-bottom: 0;
+  text-decoration: underline;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(:not(pre) > code) {
+  border-radius: 5px;
+  padding: 0.12em 0.35em;
+}
+
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(table),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(thead),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(tbody),
+.rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(tbody tr):hover {
+  background: var(--rp-code-block-bg);
+}
+
+/* Code blocks and package-manager tabs */
+.rp-codeblock {
+  overflow: hidden;
+  border-radius: 8px;
+}
+
+.rp-codeblock pre {
+  line-height: 1.75;
+}
+
+.rp-tabs {
+  contain: content;
+  overflow: visible;
+  margin: 1.75rem 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.rp-tabs__label {
+  gap: 0.25rem;
+  padding: 0;
+  border-bottom: 0;
+  background: transparent;
+}
+
+.rp-tabs__label__item {
+  margin: 0;
+  padding: 0.55rem 0.75rem;
+  border-radius: 7px;
+  font-size: 0.95rem;
+  font-weight: 520;
+}
+
+.rp-tabs__label__item--not-selected:hover {
+  color: var(--rp-c-text-0);
+  background: var(--rp-c-bg-soft);
+}
+
+.rp-tabs__label__item--selected,
+.dark .rp-tabs__label__item--selected {
+  color: var(--rp-c-brand);
+  background: var(--rp-c-brand-tint);
+  box-shadow: none;
+  font-weight: 650;
+}
+
+.rp-tabs__content__item {
+  padding: 1rem 0 0;
+}
+
+.rp-tabs__content__item > .rp-codeblock:only-child,
+.rp-tabs__content__item > .rp-tabs:only-child {
+  margin: 0;
+  border: var(--rp-code-block-border);
+  border-radius: 8px;
+  box-shadow: var(--rp-code-block-shadow);
+}
+
+/* On-page outline */
+.rp-doc-layout__outline {
+  box-shadow: none;
+}
+
+.rp-outline {
+  border-left-color: var(--rp-c-divider-light);
+}
+
+.rp-outline__title {
+  color: var(--rp-c-text-2);
+  font-size: 0.75rem;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.rp-outline .rp-toc-item {
+  margin-top: 8px;
+  line-height: 1.4;
+}
+
+.rp-outline .rp-toc-item__text,
+.rp-outline .rp-toc-item__text code {
+  color: var(--rp-c-text-2);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+.rp-outline .rp-toc-item--active .rp-toc-item__text,
+.rp-outline .rp-toc-item--active .rp-toc-item__text code {
+  color: var(--rp-c-link);
+  font-weight: 500;
+}
+
+/* "Powered by Vercel" footer, shown on every page like the Nextra footer. */
 .swc-footer {
   display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  max-width: 90rem;
-  margin: 0 auto;
-  padding: 3rem 1.5rem;
-  color: #4b5563;
+  justify-content: center;
+  padding: 2rem 0;
+  border-top: 1px solid var(--rp-c-divider-light);
 }
 
 .swc-footer a {
@@ -75,26 +448,55 @@
   align-items: center;
   gap: 0.35rem;
   font-weight: 600;
-  color: inherit;
+  color: var(--rp-c-text-1);
   text-decoration: none;
 }
 
-.dark .swc-footer {
-  color: #9ca3af;
-}
+@media (width <= 1279px) {
+  :root {
+    --rp-content-padding-x: 40px;
+    --rp-content-padding-y: 48px;
+  }
+
+  .rp-search-button {
+    min-width: 190px;
+  }
 
-@media (width < 1024px) {
   .swc-nav-title__tagline {
     display: none;
   }
 }
 
-@media (width < 768px) {
+@media (width <= 768px) {
+  :root {
+    --rp-nav-height: 64px;
+    --rp-content-padding-x: 22px;
+    --rp-content-padding-y: 36px;
+  }
+
   .swc-nav-title__name {
     display: none;
   }
 
-  .swc-footer {
-    justify-content: center;
+  .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h1) {
+    margin-bottom: 2rem;
+    font-size: 2.2rem;
+  }
+
+  .rp-doc :not(:where(.rp-not-doc, .rp-not-doc *)):where(h2) {
+    margin-top: 2.5rem;
+    font-size: 1.6rem;
+  }
+
+  .rp-tabs__label {
+    gap: 0;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+  }
+
+  .rp-tabs__label__item {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    font-size: 0.875rem;
   }
 }