diff --git a/website/.vitepress/config.mts b/website/.vitepress/config.mts
index 3e5786242..0efeab0bf 100644
--- a/website/.vitepress/config.mts
+++ b/website/.vitepress/config.mts
@@ -13,7 +13,7 @@ const require = createRequire(import.meta.url)
 const vueDir = dirname(require.resolve('vue/package.json'))
 
 const repo = 'https://github.com/MiniMax-AI/OpenAgentCore'
-const description = 'An open-source, self-hosted implementation of the OpenAI Agents API with multiple native Harnesses.'
+const description = 'The OpenAI Agents API, open source and self-hosted. Run Codex, Claude Code or MiniMax Code on your own machines with your own models, through the official OpenAI SDK.'
 
 const base = siteBase(process.env.WEBSITE_URL)
 
@@ -73,7 +73,7 @@ export default defineConfig({
       label: '简体中文',
       lang: 'zh-CN',
       link: '/zh/',
-      description: '开源、可自部署的 OpenAI Agents API 实现，支持多种原生 Harness。',
+      description: '开源、可自部署的 OpenAI Agents API。用官方 OpenAI SDK，在你自己的机器上用你自己的模型运行 Codex、Claude Code 或 MiniMax Code。',
       themeConfig: {
         nav: docsNav('zh'),
         langMenuLabel: '切换语言',
diff --git a/website/.vitepress/theme/components/AsciiCanvas.vue b/website/.vitepress/theme/components/AsciiCanvas.vue
deleted file mode 100644
index 2a2f36000..000000000
--- a/website/.vitepress/theme/components/AsciiCanvas.vue
+++ /dev/null
@@ -1,300 +0,0 @@
-<script setup lang="ts">
-// Renders a shape as animated ASCII on a canvas: the OpenAgentCore mark (from
-// the canonical SVG path) or a line of text. Characters decode in, a scan line
-// sweeps through, and the pointer stirs the field around it. Motion stops when
-// the canvas is off screen or the user prefers reduced motion.
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import logoSvg from '../../../../docs/assets/openagentcore-logo.svg?raw'
-
-const props = withDefaults(
-  defineProps<{
-    kind?: 'logo' | 'text'
-    text?: string
-    /** Character cell height in CSS pixels. */
-    cell?: number
-    /** Density ramp from empty to full. */
-    ramp?: string
-    /** Probability of a background character in empty cells. */
-    noise?: number
-    /** Fraction of the canvas the shape may fill. */
-    fill?: number
-    /** Vertical offset of the shape's centre, as a fraction of the height. */
-    shiftY?: number
-    label?: string
-  }>(),
-  { kind: 'logo', text: '', cell: 14, ramp: ' .:-=+*#%@', noise: 0.035, fill: 0.86, shiftY: 0, label: '' },
-)
-
-const canvas = ref<HTMLCanvasElement>()
-const GLYPHS = '01{}[]<>/\\|=+*#%$&@?!~^;:'
-const logoPath = /\sd="([^"]+)"/.exec(logoSvg)?.[1] ?? ''
-
-interface Cell { target: string; level: number; reveal: number; glyph: string; seed: number }
-
-let ctx: CanvasRenderingContext2D | null = null
-let cells: Cell[] = []
-let cols = 0
-let rows = 0
-let cw = 8
-let ch = 14
-let frame = 0
-let start = 0
-let visible = false
-let reduced = false
-let pointer = { x: -1e4, y: -1e4, t: 0 }
-let colors = { dim: '#1f3a2b', mid: '#2f7a4c', hot: '#4ade80', white: '#e9fff1' }
-let resizeObserver: ResizeObserver | undefined
-let intersection: IntersectionObserver | undefined
-let themeObserver: MutationObserver | undefined
-
-function readColors() {
-  const style = getComputedStyle(canvas.value!)
-  const v = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback
-  colors = { dim: v('--ascii-dim', colors.dim), mid: v('--ascii-mid', colors.mid), hot: v('--ascii-hot', colors.hot), white: v('--ascii-white', colors.white) }
-}
-
-function randomGlyph() {
-  return GLYPHS[(Math.random() * GLYPHS.length) | 0]
-}
-
-/** Rasterises the shape at 3x3 samples per cell and maps coverage onto the ramp. */
-function layout() {
-  const el = canvas.value
-  if (!el || !ctx) return
-  const rect = el.getBoundingClientRect()
-  if (!rect.width || !rect.height) return
-  const dpr = Math.min(window.devicePixelRatio || 1, 2)
-  el.width = Math.round(rect.width * dpr)
-  el.height = Math.round(rect.height * dpr)
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-
-  ch = props.cell
-  ctx.font = `${Math.round(ch * 0.78)}px "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace`
-  cw = Math.max(5, ctx.measureText('M').width * 1.04)
-  ctx.textBaseline = 'middle'
-  ctx.textAlign = 'center'
-  cols = Math.max(1, Math.floor(rect.width / cw))
-  rows = Math.max(1, Math.floor(rect.height / ch))
-
-  const ss = 3
-  const mask = document.createElement('canvas')
-  mask.width = cols * ss
-  mask.height = rows * ss
-  const m = mask.getContext('2d', { willReadFrequently: true })!
-  m.fillStyle = '#fff'
-  // One mask pixel is cw/ss by ch/ss screen pixels; scale so the shape keeps its
-  // on-screen proportions.
-  const sx = ss / cw
-  const sy = ss / ch
-  if (props.kind === 'logo') {
-    // The mark occupies x 214–988 and y 245–1026 of its 1254-unit viewBox.
-    const bounds = { x: 214, y: 245, size: 781 }
-    const size = Math.min(rect.width, rect.height) * props.fill
-    const scale = size / bounds.size
-    const ox = (rect.width - size) / 2 - bounds.x * scale
-    const oy = (rect.height - size) / 2 + rect.height * props.shiftY - bounds.y * scale
-    m.setTransform(scale * sx, 0, 0, scale * sy, ox * sx, oy * sy)
-    m.fill(new Path2D(logoPath), 'evenodd')
-  } else {
-    const lines = props.text.split('\n')
-    let fontSize = rect.height * props.fill / lines.length / 1.05
-    m.font = `800 ${fontSize}px "Inter Variable", Inter, system-ui, sans-serif`
-    const widest = Math.max(...lines.map((line) => m.measureText(line).width))
-    if (widest > rect.width * 0.96) fontSize *= (rect.width * 0.96) / widest
-    m.setTransform(sx, 0, 0, sy, 0, 0)
-    m.font = `800 ${fontSize}px "Inter Variable", Inter, system-ui, sans-serif`
-    m.textAlign = 'center'
-    m.textBaseline = 'middle'
-    const lineHeight = fontSize * 1.05
-    const top = rect.height / 2 - (lineHeight * (lines.length - 1)) / 2
-    lines.forEach((line, i) => m.fillText(line, rect.width / 2, top + i * lineHeight))
-  }
-  const data = m.getImageData(0, 0, mask.width, mask.height).data
-
-  const ramp = props.ramp
-  const cx = cols / 2
-  const cy = rows / 2
-  const maxDist = Math.hypot(cx, cy)
-  cells = new Array(cols * rows)
-  for (let r = 0; r < rows; r++) {
-    for (let c = 0; c < cols; c++) {
-      let sum = 0
-      for (let y = 0; y < ss; y++) for (let x = 0; x < ss; x++) sum += data[((r * ss + y) * mask.width + (c * ss + x)) * 4 + 3]
-      const level = sum / (ss * ss * 255)
-      const index = level < 0.04 ? 0 : Math.min(ramp.length - 1, 1 + Math.floor(level * (ramp.length - 1)))
-      const dist = Math.hypot(c - cx, (r - cy) * (ch / cw)) / maxDist
-      cells[r * cols + c] = {
-        target: ramp[index],
-        level,
-        reveal: 250 + dist * 900 + Math.random() * 650,
-        glyph: randomGlyph(),
-        seed: Math.random(),
-      }
-    }
-  }
-}
-
-function draw(now: number) {
-  if (!ctx || !canvas.value) return
-  const t = reduced ? 1e6 : now - start
-  const w = canvas.value.width
-  const h = canvas.value.height
-  ctx.clearRect(0, 0, w, h)
-
-  // A diagonal scan line crosses the shape every few seconds.
-  const period = 5200
-  const phase = ((t % period) / period) * (cols + rows) * 1.6 - rows * 0.3
-  const pointerAge = now - pointer.t
-  const pointerStrength = reduced ? 0 : Math.max(0, 1 - pointerAge / 2200)
-  const pc = pointer.x / cw
-  const pr = pointer.y / ch
-  const radius = 9
-
-  const buckets: Record<string, number[]> = { dim: [], mid: [], hot: [], white: [] }
-  const chars: string[] = new Array(cells.length)
-
-  for (let i = 0; i < cells.length; i++) {
-    const cell = cells[i]
-    const c = i % cols
-    const r = (i / cols) | 0
-    const inside = cell.target !== ' '
-    let ch2 = ' '
-    let tone: keyof typeof buckets = 'dim'
-
-    const scan = Math.abs(c + r * 1.4 - phase)
-    const dx = c - pc
-    const dy = (r - pr) * (ch / cw)
-    const near = pointerStrength > 0 ? Math.max(0, 1 - Math.hypot(dx, dy) / radius) * pointerStrength : 0
-
-    if (inside) {
-      if (t < cell.reveal) {
-        if (t > cell.reveal - 700) {
-          ch2 = (frame + i) % 3 === 0 ? randomGlyph() : cell.glyph
-          tone = 'mid'
-        }
-      } else {
-        ch2 = cell.target
-        tone = cell.level > 0.7 ? 'hot' : 'mid'
-        if (t < cell.reveal + 160) tone = 'white'
-        if (!reduced && scan < 1.6) {
-          ch2 = scan < 0.8 ? randomGlyph() : cell.target
-          tone = 'white'
-        } else if (!reduced && cell.seed < 0.012 && (frame + i) % 40 < 3) {
-          ch2 = randomGlyph()
-          tone = 'white'
-        }
-        if (near > 0.25) {
-          ch2 = near > 0.6 ? randomGlyph() : ch2
-          tone = 'white'
-        }
-      }
-    } else {
-      // Background field: sparse, slowly drifting characters that the pointer stirs up.
-      const drift = reduced ? 0 : Math.floor(t / 1400 + cell.seed * 40)
-      const on = ((cell.seed * 997 + drift * 0.61803) % 1) < props.noise
-      if (near > 0.15 && cell.seed < near * 0.9) {
-        ch2 = randomGlyph()
-        tone = near > 0.55 ? 'hot' : 'mid'
-      } else if (on && t > cell.reveal * 0.6) {
-        ch2 = cell.glyph
-        tone = 'dim'
-      }
-    }
-    if (ch2 !== ' ') {
-      chars[i] = ch2
-      buckets[tone].push(i)
-    }
-  }
-
-  for (const tone of ['dim', 'mid', 'hot', 'white'] as const) {
-    ctx.fillStyle = colors[tone]
-    for (const i of buckets[tone]) ctx.fillText(chars[i], (i % cols) * cw + cw / 2, ((i / cols) | 0) * ch + ch / 2)
-  }
-}
-
-let raf = 0
-let last = 0
-function loop(now: number) {
-  raf = 0
-  if (!visible || document.hidden) return
-  // About 30 frames per second is enough for character animation.
-  if (now - last > 32) {
-    last = now
-    frame++
-    draw(now)
-  }
-  raf = requestAnimationFrame(loop)
-}
-
-function play() {
-  if (reduced) return draw(performance.now())
-  if (!raf) raf = requestAnimationFrame(loop)
-}
-
-function onPointer(event: PointerEvent) {
-  const rect = canvas.value!.getBoundingClientRect()
-  pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top, t: performance.now() }
-}
-
-function onVisibility() {
-  if (!document.hidden && visible) play()
-}
-
-onMounted(() => {
-  const el = canvas.value!
-  ctx = el.getContext('2d')
-  reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  readColors()
-  start = performance.now()
-  const relayout = () => {
-    layout()
-    if (reduced || !raf) draw(performance.now())
-  }
-  // Wait for the web fonts so cell widths match the rendered glyphs.
-  document.fonts?.ready.then(relayout)
-  relayout()
-  resizeObserver = new ResizeObserver(relayout)
-  resizeObserver.observe(el)
-  intersection = new IntersectionObserver(([entry]) => {
-    visible = entry.isIntersecting
-    if (visible) play()
-  })
-  intersection.observe(el)
-  themeObserver = new MutationObserver(() => {
-    readColors()
-    draw(performance.now())
-  })
-  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
-  document.addEventListener('visibilitychange', onVisibility)
-})
-
-onBeforeUnmount(() => {
-  cancelAnimationFrame(raf)
-  resizeObserver?.disconnect()
-  intersection?.disconnect()
-  themeObserver?.disconnect()
-  document.removeEventListener('visibilitychange', onVisibility)
-})
-
-watch(() => props.text, () => layout())
-</script>
-
-<template>
-  <canvas
-    ref="canvas"
-    class="ascii-canvas"
-    role="img"
-    :aria-label="label"
-    @pointermove="onPointer"
-    @pointerdown="onPointer"
-  />
-</template>
-
-<style scoped>
-.ascii-canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  touch-action: pan-y;
-}
-</style>
diff --git a/website/.vitepress/theme/components/ComposeLab.vue b/website/.vitepress/theme/components/ComposeLab.vue
index 8c41fdd43..225aa6cec 100644
--- a/website/.vitepress/theme/components/ComposeLab.vue
+++ b/website/.vitepress/theme/components/ComposeLab.vue
@@ -75,7 +75,7 @@ const lines = computed<Tok[][]>(() => {
   <div class="lab">
     <div class="lab-controls">
       <fieldset>
-        <legend><span class="dollar">$</span> {{ t.harness }}</legend>
+        <legend>{{ t.harness }}</legend>
         <button
           v-for="h in harnesses"
           :key="h.id"
@@ -87,12 +87,11 @@ const lines = computed<Tok[][]>(() => {
         >
           <span class="box">{{ harness === h.id ? '■' : '□' }}</span>
           <span class="name">{{ h.label }}</span>
-          <code>{{ h.id }}</code>
         </button>
       </fieldset>
 
       <fieldset>
-        <legend><span class="dollar">$</span> {{ t.protocol }}</legend>
+        <legend>{{ t.protocol }}</legend>
         <button
           v-for="p in protocols"
           :key="p"
@@ -104,14 +103,13 @@ const lines = computed<Tok[][]>(() => {
         >
           <span class="box">{{ protocol === p ? '■' : '□' }}</span>
           <span class="name">{{ p }}</span>
-          <code>{{ (selected.protocols as readonly string[]).includes(p) ? 'native' : '—' }}</code>
         </button>
       </fieldset>
 
       <fieldset>
-        <legend><span class="dollar">$</span> {{ t.environment }}</legend>
+        <legend>{{ t.environment }}</legend>
         <button
-          v-for="(e, id) in t.envs"
+          v-for="(label, id) in t.envs"
           :key="id"
           type="button"
           class="opt"
@@ -120,8 +118,7 @@ const lines = computed<Tok[][]>(() => {
           @click="env = id as Env"
         >
           <span class="box">{{ env === id ? '■' : '□' }}</span>
-          <span class="name">{{ e.label }}</span>
-          <code>{{ e.note }}</code>
+          <span class="name">{{ label }}</span>
         </button>
       </fieldset>
     </div>
@@ -150,39 +147,37 @@ const lines = computed<Tok[][]>(() => {
 .lab {
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
-  gap: 20px;
+  gap: 24px;
 }
 .lab-controls {
   display: grid;
-  gap: 14px;
+  gap: 16px;
   align-content: start;
 }
 fieldset {
+  position: relative;
   border: 1px solid var(--l-line);
   border-radius: 10px;
-  padding: 10px 10px 8px;
+  padding: 8px;
   margin: 0;
   background: var(--l-panel);
 }
 legend {
-  padding: 0 6px;
-  font: 500 12px/1 var(--l-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--l-muted);
-}
-.dollar {
-  color: var(--l-accent);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
 }
 .opt {
   display: grid;
-  grid-template-columns: 18px 1fr auto;
+  grid-template-columns: 18px 1fr;
   align-items: center;
   gap: 8px;
   width: 100%;
-  padding: 7px 8px;
+  padding: 9px 10px;
   border-radius: 6px;
-  font: 14px/1.3 var(--l-mono);
+  font: 15px/1.3 var(--l-mono);
   color: var(--l-text-2);
   text-align: left;
   transition: background 0.15s, color 0.15s;
@@ -206,13 +201,8 @@ legend {
 .opt.unsupported.on .name {
   color: var(--l-danger);
 }
-.opt code {
-  font-size: 11px;
-  color: var(--l-muted);
-  white-space: nowrap;
-}
 .box {
-  font-size: 12px;
+  font-size: 14px;
 }
 .lab-code {
   display: flex;
@@ -229,7 +219,7 @@ legend {
   gap: 12px;
   padding: 10px 14px;
   border-bottom: 1px solid rgba(232, 241, 235, 0.08);
-  font: 12px var(--l-mono);
+  font: 14px var(--l-mono);
   color: #7f8f85;
 }
 .dots {
@@ -249,7 +239,7 @@ legend {
   margin: 0;
   padding: 16px 18px;
   overflow-x: auto;
-  font: 13px/1.7 var(--l-mono);
+  font: 14px/1.7 var(--l-mono);
   color: var(--l-code-text);
   animation: settle 0.35s ease-out;
 }
@@ -286,7 +276,7 @@ legend {
   align-items: baseline;
   padding: 12px 18px;
   border-top: 1px solid rgba(232, 241, 235, 0.08);
-  font: 13px/1.5 var(--l-mono);
+  font: 14px/1.5 var(--l-mono);
 }
 .verdict.pass {
   color: #4ade80;
@@ -307,13 +297,15 @@ legend {
 }
 .lab-foot {
   grid-column: 1 / -1;
-  margin: 0;
-  font-size: 14px;
-  color: var(--l-muted);
+  margin: 12px 0 0;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--l-text-2);
 }
 .lab-foot a {
   color: var(--l-accent);
   font-family: var(--l-mono);
+  white-space: nowrap;
   text-decoration: none;
 }
 @keyframes settle {
diff --git a/website/.vitepress/theme/components/Landing.vue b/website/.vitepress/theme/components/Landing.vue
index 498ad7cc3..d1c754e4a 100644
--- a/website/.vitepress/theme/components/Landing.vue
+++ b/website/.vitepress/theme/components/Landing.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { withBase } from 'vitepress'
-import AsciiCanvas from './AsciiCanvas.vue'
+import '@fontsource-variable/space-grotesk'
 import ComposeLab from './ComposeLab.vue'
 import LogoWall from './LogoWall.vue'
 import LaunchVideo from './LaunchVideo.vue'
 import SessionFlow from './SessionFlow.vue'
 import TitleAccent from './TitleAccent.vue'
-import { copy, installCommand, repoUrl, type Lang } from '../landing-content'
-import architectureImg from '../../../../docs/assets/architecture.svg'
+import { copy, installCommands, repoUrl, type Lang } from '../landing-content'
+import architectureLight from '../../../../docs/assets/architecture.svg'
+import architectureDark from '../../../../docs/assets/architecture-dark.svg'
 import overviewEn from '../../../../docs/assets/console-overview-en.webp'
 import overviewZh from '../../../../docs/assets/console-overview-zh.webp'
 import metricsEn from '../../../../docs/assets/console-agent-metrics-en.webp'
@@ -22,14 +23,14 @@ const consoleImages = computed(() =>
 )
 const consoleTab = ref<'overview' | 'metrics'>('overview')
 const consoleAlt = computed(() => t.value.observe.tabs.find((tab) => tab.id === consoleTab.value)!.alt)
-
 function localLink(path: string) { return withBase(props.lang === 'zh' ? `/zh${path}` : path) }
 
-
+const installOs = ref<'unix' | 'windows'>('unix')
+const installCommand = computed(() => installCommands[installOs.value])
 const copied = ref(false)
 async function copyInstall() {
   try {
-    await navigator.clipboard.writeText(installCommand)
+    await navigator.clipboard.writeText(installCommand.value)
     copied.value = true
     setTimeout(() => (copied.value = false), 1600)
   } catch {
@@ -98,127 +99,85 @@ onBeforeUnmount(() => {
 
     <!-- Hero -->
     <section class="hero">
-      <div class="wrap hero-grid">
-        <div class="hero-copy">
-          <p class="eyebrow"><span class="led" aria-hidden="true" />{{ t.hero.eyebrow }}</p>
-          <h1 class="hero-title" :aria-label="t.hero.title.join(' ')">
-            <span aria-hidden="true">{{ titleLines[0] }}</span>
-            <span aria-hidden="true" class="accent">{{ titleLines[1] }}<span class="cursor">_</span></span>
-          </h1>
-          <p class="lede">{{ t.hero.lede }}</p>
-          <div class="ctas">
-            <a class="btn primary" :href="localLink('/docs/getting-started/quickstart')">{{ t.hero.primary }} <span aria-hidden="true">→</span></a>
-            <a class="btn ghost" :href="localLink('/docs/getting-started/')">{{ t.hero.secondary }}</a>
-            <a class="btn ghost icon" :href="repoUrl" target="_blank" rel="noreferrer" aria-label="GitHub">
+      <div class="wrap">
+        <div class="hero-grid">
+          <div class="hero-head">
+            <h1 class="hero-title" :aria-label="t.hero.title.join(' ')">
+              <span aria-hidden="true">{{ titleLines[0] }}</span>
+              <span aria-hidden="true" class="accent">{{ titleLines[1] }}<span class="cursor">_</span></span>
+            </h1>
+            <LaunchVideo :lang="lang" />
+          </div>
+          <div class="hero-copy">
+            <p class="lede">{{ t.hero.lede }}</p>
+            <div class="ctas">
+              <a class="btn primary" :href="localLink('/docs/getting-started/install')">{{ t.hero.primary }} <span aria-hidden="true">→</span></a>
+              <a class="btn ghost" :href="localLink('/docs/getting-started/')">{{ t.hero.secondary }}</a>
+              <a class="btn ghost icon" :href="repoUrl" target="_blank" rel="noreferrer" aria-label="GitHub">
               <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.71 1.26 3.37.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.68 0-1.25.45-2.28 1.19-3.08-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.8 1.19 1.83 1.19 3.08 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z" /></svg>
               GitHub
             </a>
-          </div>
-          <div class="hero-install">
-          <div class="install">
-            <code><span class="prompt">$</span> {{ installCommand }}</code>
-            <button type="button" class="copy" @click="copyInstall">{{ copied ? t.hero.copied : t.hero.copy }}</button>
-          </div>
-          <p class="install-note">{{ t.hero.installLabel }}</p>
-          </div>
-        </div>
-
-        <div class="hero-media">
-          <div class="hero-brand">
-            <div class="hero-art">
-              <div class="corner tl" aria-hidden="true" /><div class="corner tr" aria-hidden="true" /><div class="corner bl" aria-hidden="true" /><div class="corner br" aria-hidden="true" />
-              <AsciiCanvas kind="logo" :cell="8" :fill="0.78" label="OpenAgentCore" />
             </div>
-            <dl class="hud">
-              <div v-for="[k, v] in t.hero.hud" :key="k"><dt>{{ k }}</dt><dd>{{ v }}</dd></div>
-            </dl>
+            <div class="install-tabs" role="group">
+              <button v-for="(label, i) in t.hero.installTabs" :key="label" type="button" :aria-pressed="installOs === (i ? 'windows' : 'unix')" :class="{ on: installOs === (i ? 'windows' : 'unix') }" @click="installOs = i ? 'windows' : 'unix'">{{ label }}</button>
+            </div>
+            <div class="install">
+              <code><span class="prompt">{{ installOs === 'unix' ? '$' : '>' }}</span> {{ installCommand }}</code>
+              <button type="button" class="copy" @click="copyInstall">{{ copied ? t.hero.copied : t.hero.copy }}</button>
+            </div>
           </div>
-          <LaunchVideo :lang="lang" />
-        </div>
-      </div>
-
-      <div class="ticker" aria-hidden="true">
-        <div class="ticker-track">
-          <span v-for="n in 2" :key="n" class="ticker-run">
-            <span v-for="item in t.ticker" :key="item + n">{{ item }}<b>/</b></span>
-          </span>
         </div>
+        <div class="hero-lab" data-reveal><ComposeLab :t="t.compose" :lang="lang" /></div>
       </div>
     </section>
 
-    <!-- 01 Compose -->
+    <!-- Architecture -->
     <section class="sec">
       <div class="wrap">
-        <header class="sec-head" data-reveal><span class="idx">// {{ t.compose.index }}</span><span class="kicker">{{ t.compose.kicker }}</span></header>
-        <h2 data-reveal><TitleAccent :title="t.compose.title" :accent="t.compose.titleAccent" /></h2>
-        <p class="sec-lede" data-reveal>{{ t.compose.lede }}</p>
-        <div data-reveal><ComposeLab :t="t.compose" :lang="lang" /></div>
-
-      </div>
-    </section>
-
-    <!-- 02 Architecture -->
-    <section class="sec">
-      <div class="wrap">
-        <header class="sec-head" data-reveal><span class="idx">// {{ t.architecture.index }}</span><span class="kicker">{{ t.architecture.kicker }}</span></header>
         <h2 data-reveal><TitleAccent :title="t.architecture.title" :accent="t.architecture.titleAccent" /></h2>
-        <p class="sec-lede" data-reveal>{{ t.architecture.lede }}</p>
-        <a class="architecture-visual" :href="architectureImg" target="_blank" rel="noreferrer" data-reveal>
-          <img :src="architectureImg" :alt="t.architecture.tabs[0].alt" loading="lazy" decoding="async" />
-        </a>
+        <div class="architecture-visual" data-reveal>
+          <a class="light-only" :href="architectureLight" target="_blank" rel="noreferrer"><img :src="architectureLight" :alt="t.architecture.alt" loading="lazy" decoding="async" /></a>
+          <a class="dark-only" :href="architectureDark" target="_blank" rel="noreferrer"><img :src="architectureDark" :alt="t.architecture.alt" loading="lazy" decoding="async" /></a>
+        </div>
         <a class="more" :href="localLink('/docs/architecture')">{{ t.architecture.more }} →</a>
       </div>
     </section>
 
-    <!-- 03 Session lifecycle -->
+    <!-- Session -->
     <section class="sec">
       <div class="wrap">
-        <header class="sec-head" data-reveal><span class="idx">// {{ t.session.index }}</span><span class="kicker">{{ t.session.kicker }}</span></header>
         <h2 data-reveal><TitleAccent :title="t.session.title" :accent="t.session.titleAccent" /></h2>
-        <p class="sec-lede" data-reveal>{{ t.session.lede }}</p>
         <SessionFlow :lang="lang" />
-        <a class="more" :href="localLink('/docs/api/public-agent-api')">{{ t.session.more }} →</a>
+        <a class="more" :href="localLink('/docs/architecture#a-session-end-to-end')">{{ t.session.more }} →</a>
       </div>
     </section>
 
-    <!-- 04 Observe -->
+    <!-- Console -->
     <section class="sec">
       <div class="wrap">
-        <header class="sec-head" data-reveal><span class="idx">// {{ t.observe.index }}</span><span class="kicker">{{ t.observe.kicker }}</span></header>
         <div class="observe-heading" data-reveal>
-          <div><h2><TitleAccent :title="t.observe.title" :accent="t.observe.titleAccent" /></h2><p class="sec-lede">{{ t.observe.lede }}</p></div>
+          <h2><TitleAccent :title="t.observe.title" :accent="t.observe.titleAccent" /></h2>
           <div class="tabs" :aria-label="t.observe.title">
             <button v-for="tab in t.observe.tabs" :key="tab.id" type="button" :aria-pressed="consoleTab === tab.id" :class="{ on: consoleTab === tab.id }" @click="consoleTab = tab.id">{{ tab.label }}</button>
           </div>
         </div>
-        <div class="window console-wide" data-reveal>
-          <div class="win-bar"><span class="dots"><i /><i /><i /></span><span>web · {{ consoleTab }}</span></div>
+        <div class="window" data-reveal>
           <img :key="consoleTab + lang" :src="consoleImages[consoleTab]" :alt="consoleAlt" loading="lazy" decoding="async" />
         </div>
-        <p class="caption">{{ t.observe.caption }}</p>
       </div>
     </section>
 
     <nav class="wrap doc-shortcuts" :aria-label="t.docs.title">
-      <a v-for="(link, i) in t.docs.links" :key="link.path" :href="localLink(link.path)">
-        <span class="shortcut-index">0{{ i + 1 }}</span><span>{{ link.label }}</span><span aria-hidden="true">↗</span>
-      </a>
+      <a v-for="link in t.docs.links" :key="link.path" :href="localLink(link.path)"><span>{{ link.label }}</span><span aria-hidden="true">↗</span></a>
     </nav>
 
     <LogoWall :lang="lang" />
 
-    <!-- 05 Get started -->
+    <!-- Next steps -->
     <section class="outro">
-      <div class="wrap start-compact">
-        <header class="sec-head"><span class="idx">// {{ t.start.index }}</span><span class="kicker">{{ t.start.kicker }}</span></header>
+      <div class="wrap">
         <h2><TitleAccent :title="t.start.title" :accent="t.start.titleAccent" /></h2>
-        <p class="install-note">{{ t.hero.installLabel }}</p>
-        <div class="install"><code><span class="prompt">$</span> {{ installCommand }}</code><button type="button" class="copy" @click="copyInstall">{{ copied ? t.hero.copied : t.hero.copy }}</button></div>
-        <ol class="start-path"><li v-for="(step, i) in t.start.steps" :key="step.title"><span>0{{ i + 1 }}</span>{{ step.title }}</li></ol>
-        <div class="ctas"><a class="btn primary" :href="localLink('/docs/getting-started/install')">{{ t.start.cta }} →</a><a class="btn ghost" :href="localLink('/docs/getting-started/quickstart')">{{ t.start.trial }}</a></div>
-      </div>
-      <div class="outro-art">
-        <AsciiCanvas kind="text" text="ONE CORE.&#10;MANY AGENTS." :cell="11" ramp=" .:░▒▓█" :noise="0.02" :fill="0.82" label="One core. Many agents." />
+        <ol class="start-path"><li v-for="(step, i) in t.start.steps" :key="step.path"><span>0{{ i + 1 }}</span><a :href="localLink(step.path)">{{ step.label }} →</a></li></ol>
       </div>
     </section>
   </div>
@@ -242,10 +201,6 @@ onBeforeUnmount(() => {
   --l-danger-soft: rgba(220, 38, 38, 0.08);
   --l-glow: rgba(21, 128, 61, 0.35);
   --l-grid: rgba(11, 21, 16, 0.05);
-  --ascii-dim: #c4d1c7;
-  --ascii-mid: #3f8a5c;
-  --ascii-hot: #15803d;
-  --ascii-white: #04210f;
   /* Code and terminals stay dark in both themes. */
   --l-code-bg: #0b100e;
   --l-code-text: #d7e5dc;
@@ -278,13 +233,12 @@ onBeforeUnmount(() => {
   --l-danger-soft: rgba(251, 113, 133, 0.08);
   --l-glow: rgba(74, 222, 128, 0.35);
   --l-grid: rgba(232, 241, 235, 0.035);
-  --ascii-dim: #1d3326;
-  --ascii-mid: #2f8a52;
-  --ascii-hot: #4ade80;
-  --ascii-white: #eafff1;
 }
+:where(.landing) button { font-size: 14px; }
+.landing :is(.install, .code) code { font-size: 14px; }
 </style>
 
+
 <style scoped>
 .landing :deep(a) {
   text-decoration: none;
@@ -312,20 +266,12 @@ onBeforeUnmount(() => {
 .accent {
   color: var(--l-accent);
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
 
 /* ---------- reveal ---------- */
 .animate [data-reveal] {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
-  transition-delay: calc(var(--i, 0) * 70ms);
 }
 .animate [data-reveal].in {
   opacity: 1;
@@ -337,19 +283,16 @@ onBeforeUnmount(() => {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
-  margin-top: 28px;
-}
-.ctas.center {
-  justify-content: center;
+  margin-top: 32px;
 }
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: 42px;
-  padding: 0 18px;
+  height: 44px;
+  padding: 0 20px;
   border-radius: 2px;
-  font: 500 14px/1 var(--l-mono);
+  font: 500 15px/1 var(--l-mono);
   border: 1px solid var(--l-line-strong);
   color: var(--l-text);
   transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
@@ -362,49 +305,38 @@ onBeforeUnmount(() => {
   background: var(--l-accent);
   border-color: var(--l-accent);
   color: var(--l-bg);
-  box-shadow: 0 0 0 0 var(--l-glow);
+  box-shadow: 3px 3px 0 var(--l-text);
 }
 .btn.primary:hover {
-  box-shadow: 0 8px 30px -8px var(--l-glow);
+  box-shadow: 5px 5px 0 var(--l-text);
 }
 .btn.ghost {
   background: var(--l-panel);
   backdrop-filter: blur(6px);
 }
+.btn:focus-visible,
+.copy:focus-visible,
+.install-tabs button:focus-visible,
+.tabs button:focus-visible {
+  outline: 2px solid var(--l-accent);
+  outline-offset: 4px;
+}
 
 /* ---------- hero ---------- */
 .hero {
   position: relative;
-  padding: 56px 0 0;
+  padding: 88px 0 0;
 }
 .hero-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 32px;
-  align-items: center;
-  min-height: min(72vh, 660px);
-}
-.eyebrow {
-  display: inline-flex;
+  gap: 56px;
   align-items: center;
-  gap: 10px;
-  margin: 0 0 22px;
-  padding: 6px 12px;
-  border: 1px solid var(--l-line);
-  border-radius: 999px;
-  background: var(--l-panel);
-  font: 12px/1 var(--l-mono);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--l-text-2);
 }
-.led {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--l-accent);
-  box-shadow: 0 0 10px var(--l-accent);
-  animation: pulse 2s ease-in-out infinite;
+.hero-head {
+  display: grid;
+  gap: 40px;
+  justify-items: start;
 }
 .hero-title {
   display: flex;
@@ -413,24 +345,52 @@ onBeforeUnmount(() => {
   font: 700 clamp(44px, 6vw, 78px) / 0.98 var(--l-display);
   letter-spacing: -0.045em;
   white-space: nowrap;
+  border: 0;
+  padding: 0;
+}
+.hero-title .accent {
+  font-style: italic;
+}
+.landing[lang='zh-CN'] .hero-title .accent,
+.landing[lang='zh-CN'] :deep(em) {
+  font-style: normal;
 }
 .cursor {
   color: var(--l-accent);
+  font-style: normal;
   animation: blink 1.1s steps(1) infinite;
 }
 .lede {
   max-width: 34em;
-  margin: 26px 0 0;
+  margin: 0;
   font-size: 18px;
   line-height: 1.6;
   color: var(--l-text-2);
 }
+.install-tabs {
+  display: flex;
+  gap: 4px;
+  margin-top: 32px;
+}
+.install-tabs button {
+  padding: 6px 12px;
+  border-radius: 4px;
+  font: 14px var(--l-mono);
+  color: var(--l-muted);
+}
+.install-tabs button.on {
+  color: var(--l-accent);
+  background: var(--l-accent-soft);
+}
+.install-tabs button:hover {
+  color: var(--l-text);
+}
 .install {
   display: flex;
   align-items: center;
   gap: 8px;
   max-width: 100%;
-  margin-top: 26px;
+  margin-top: 8px;
   padding: 6px 6px 6px 14px;
   border: 1px solid var(--l-line);
   border-radius: 3px;
@@ -442,7 +402,7 @@ onBeforeUnmount(() => {
   overflow-x: auto;
   white-space: nowrap;
   scrollbar-width: none;
-  font: 13px/2.2 var(--l-mono);
+  font: 14px/2.2 var(--l-mono);
   color: var(--l-code-text);
   background: none;
   padding: 0;
@@ -452,319 +412,94 @@ onBeforeUnmount(() => {
 }
 .copy {
   flex: none;
-  padding: 6px 12px;
+  padding: 7px 14px;
   border-radius: 6px;
   border: 1px solid rgba(232, 241, 235, 0.16);
-  font: 12px var(--l-mono);
+  font: 14px var(--l-mono);
   color: #b7c5bc;
 }
 .copy:hover {
   color: #4ade80;
   border-color: #4ade80;
 }
-.install-note {
-  margin: 10px 0 0;
-  font: 12px var(--l-mono);
-  color: var(--l-muted);
-}
-.hero-media { min-width: 0; }
-.hero-brand { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
-.hero-art {
-  position: relative;
-  aspect-ratio: 1 / 1;
-  width: clamp(220px, 22vw, 280px);
-  flex-shrink: 0;
-}
-.corner {
-  position: absolute;
-  width: 18px;
-  height: 18px;
-  border-color: var(--l-accent);
-  border-style: solid;
-  opacity: 0.7;
-}
-.corner.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
-.corner.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
-.corner.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
-.corner.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
-.hud {
-  min-width: 0;
-  margin: 0;
-  font: 10px/1.8 var(--l-mono);
-  color: var(--l-muted);
-  pointer-events: none;
-}
-.hud div {
-  display: flex;
-  gap: 8px;
-}
-.hud dt {
-  min-width: 6.5em;
-  flex-shrink: 0;
-  color: var(--l-accent);
-}
-.hud dt::after {
-  content: ':';
-}
-.hud dd {
-  overflow-wrap: anywhere;
-  margin: 0;
-}
-
-/* ticker */
-.ticker {
-  margin-top: 48px;
-  border-block: 1px solid var(--l-line);
-  overflow: hidden;
-  background: var(--l-panel);
-  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
-}
-.ticker-track {
-  display: flex;
-  width: max-content;
-  animation: marquee 48s linear infinite;
-}
-.ticker-run span {
-  display: inline-block;
-  padding: 14px 0 14px 22px;
-  font: 13px var(--l-mono);
-  color: var(--l-text-2);
-  text-transform: lowercase;
-}
-.ticker-run b {
-  margin-left: 22px;
-  font-weight: 400;
-  color: var(--l-accent);
+.hero-lab {
+  margin-top: 88px;
 }
 
 /* ---------- sections ---------- */
 .sec {
   position: relative;
-  padding: 64px 0 0;
-}
-.sec-head {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  margin-bottom: 20px;
-  font: 12px/1 var(--l-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-}
-.sec-head::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, var(--l-line-strong), transparent);
-}
-.idx {
-  color: var(--l-accent);
-}
-.kicker {
-  color: var(--l-muted);
+  margin-top: 96px;
+  padding-top: 72px;
+  border-top: 1px solid var(--l-line-strong);
 }
 h2 {
   max-width: 22em;
-  margin: 0;
-  font: 700 clamp(28px, 3.6vw, 44px) / 1.12 var(--l-sans);
-  letter-spacing: -0.03em;
+  margin: 0 0 48px;
+  font: 700 clamp(28px, 3.6vw, 44px) / 1.12 var(--l-display);
+  letter-spacing: -0.045em;
   border: 0;
   padding: 0;
 }
 .landing[lang='zh-CN'] h2 {
   letter-spacing: -0.01em;
 }
-h3 {
-  margin: 0;
-  font: 600 17px/1.35 var(--l-sans);
-  letter-spacing: -0.01em;
+.more {
+  display: inline-block;
+  margin-top: 24px;
+  font: 16px var(--l-mono);
+  color: var(--l-accent);
 }
-.sec-lede {
-  max-width: 44em;
-  margin: 18px 0 36px;
-  font-size: 17px;
-  line-height: 1.65;
-  color: var(--l-text-2);
+.architecture-visual {
+  display: block;
+  max-width: 980px;
+  margin: 0 auto;
 }
-.split {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
-  gap: 56px;
-  align-items: start;
+.architecture-visual a {
+  display: block;
 }
-.split.narrow-right {
-  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
+.architecture-visual .dark-only,
+.dark .architecture-visual .light-only {
+  display: none;
 }
-.mono-label {
-  margin: 0 0 12px;
-  font: 12px var(--l-mono);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--l-muted);
+.dark .architecture-visual .dark-only {
+  display: block;
 }
-.sigil {
-  display: inline-block;
-  width: 1.6em;
-  font-family: var(--l-mono);
-  color: var(--l-accent);
+.architecture-visual img {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
-/* 03 */
-.figure {
-  border: 1px solid var(--l-line);
-  border-radius: 3px;
-  background: var(--l-panel);
-  overflow: hidden;
+/* console */
+.observe-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
 }
 .tabs {
   display: flex;
+  flex-shrink: 0;
   gap: 4px;
-  padding: 8px;
-  border-bottom: 1px solid var(--l-line);
-  overflow-x: auto;
+  padding: 6px;
+  border: 1px solid var(--l-line);
 }
 .tabs button {
-  padding: 7px 14px;
+  padding: 8px 16px;
   border-radius: 7px;
-  font: 13px var(--l-mono);
+  font: 14px var(--l-mono);
   color: var(--l-muted);
   white-space: nowrap;
   transition: color 0.15s, background 0.15s;
 }
-.tabs button::before {
-  content: '> ';
-  opacity: 0;
-}
 .tabs button.on {
   color: var(--l-accent);
   background: var(--l-accent-soft);
 }
-.tabs button.on::before {
-  opacity: 1;
-}
 .tabs button:hover {
   color: var(--l-text);
 }
-.tabs.vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0;
-  border: 0;
-}
-.plate {
-  display: block;
-  padding: 18px;
-  background: #fff;
-  cursor: zoom-in;
-}
-.plate img {
-  display: block;
-  width: 100%;
-  height: auto;
-  animation: fade 0.4s ease;
-}
-.boundaries {
-  display: grid;
-  gap: 0;
-  margin-top: 28px;
-}
-.boundary {
-  display: grid;
-  grid-template-columns: 9em minmax(40px, 1fr) 9em minmax(0, 1.3fr);
-  align-items: center;
-  gap: 14px;
-  padding: 12px 6px;
-  border-bottom: 1px solid var(--l-line);
-  font: 14px var(--l-mono);
-  color: var(--l-text);
-  transition: background 0.15s;
-}
-.boundary:hover {
-  background: var(--l-hover);
-}
-.b-to {
-  text-align: left;
-}
-.b-wire {
-  position: relative;
-  height: 1px;
-  background: var(--l-line-strong);
-}
-.b-wire::after {
-  content: '▶';
-  position: absolute;
-  right: -2px;
-  top: 50%;
-  transform: translateY(-52%);
-  font-size: 9px;
-  color: var(--l-line-strong);
-}
-.b-wire i {
-  position: absolute;
-  top: -1px;
-  left: 0;
-  width: 26px;
-  height: 3px;
-  border-radius: 2px;
-  background: var(--l-accent);
-  box-shadow: 0 0 10px var(--l-accent);
-  animation: packet 2.6s linear infinite;
-  animation-delay: calc(var(--i) * -0.43s);
-}
-.b-doc {
-  justify-self: end;
-  color: var(--l-muted);
-  font-size: 13px;
-}
-.boundary:hover .b-doc {
-  color: var(--l-accent);
-}
-.more {
-  justify-self: start;
-  margin-top: 18px;
-  font: 14px var(--l-mono);
-  color: var(--l-accent);
-}
-
-/* 04 */
-.rules {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.rules li {
-  padding: 20px;
-  border: 1px solid var(--l-line);
-  border-radius: 3px;
-  background: var(--l-panel);
-}
-.art {
-  margin: 0 0 18px;
-  padding: 14px 16px;
-  border-radius: 2px;
-  background: var(--l-code-bg);
-  color: #4ade80;
-  font: 12.5px/1.7 var(--l-mono);
-  overflow-x: auto;
-  white-space: pre;
-}
-.note {
-  display: flex;
-  margin: 26px 0 0;
-  font: 14px/1.6 var(--l-mono);
-  color: var(--l-text-2);
-}
-
-/* 05 */
-.caption {
-  margin: 22px 0 0;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--l-muted);
-}
 .window {
   border: 1px solid var(--l-line);
   border-radius: 3px;
@@ -778,174 +513,92 @@ h3 {
   height: auto;
   animation: fade 0.4s ease;
 }
-.win-bar {
+
+/* documentation shortcuts */
+.doc-shortcuts {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 16px;
+  margin-top: 96px;
+}
+.doc-shortcuts a {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--l-line);
-  font: 12px var(--l-mono);
-  color: var(--l-muted);
+  gap: 16px;
+  padding: 28px 20px;
+  border: 1px solid var(--l-line-strong);
+  font: 500 15px/1.4 var(--l-mono);
+  color: var(--l-text);
 }
-.dots {
-  display: flex;
-  gap: 6px;
+.doc-shortcuts a:hover {
+  border-color: var(--l-accent);
+  color: var(--l-accent);
 }
-.dots i {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+.doc-shortcuts a > :last-child {
+  margin-left: auto;
 }
-.dots i:nth-child(1) { background: #ff5f57; }
-.dots i:nth-child(2) { background: #febc2e; }
-.dots i:nth-child(3) { background: #28c840; }
 
 /* outro */
 .outro {
   position: relative;
-  margin-top: 24px;
-  padding-bottom: 96px;
+  margin-top: 56px;
+  padding: 72px 0 120px;
   border-top: 1px solid var(--l-line);
 }
-.outro-art {
-  height: clamp(200px, 30vw, 380px);
-  max-width: 1280px;
-  margin: 0 auto;
+.start-path {
+  display: flex;
+  gap: 48px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 16px var(--l-mono);
 }
-.outro-copy {
-  text-align: center;
+.start-path li {
+  display: flex;
+  gap: 14px;
+  align-items: baseline;
 }
-.outro-copy p {
-  margin: 8px auto 0;
-  max-width: 36em;
-  font-size: 18px;
-  line-height: 1.6;
-  color: var(--l-text-2);
+.start-path span {
+  color: var(--l-accent);
+}
+.start-path a {
+  color: var(--l-text);
+}
+.start-path a:hover {
+  color: var(--l-accent);
 }
 
 /* ---------- motion ---------- */
 @keyframes blink {
   50% { opacity: 0; }
 }
-@keyframes pulse {
-  50% { opacity: 0.35; }
-}
-@keyframes marquee {
-  to { transform: translateX(-50%); }
-}
-@keyframes packet {
-  from { left: 0; opacity: 0; }
-  10% { opacity: 1; }
-  90% { opacity: 1; }
-  to { left: calc(100% - 26px); opacity: 0; }
-}
 @keyframes fade {
   from { opacity: 0; }
 }
 @media (prefers-reduced-motion: reduce) {
-  .ticker-track, .b-wire i, .led, .cursor { animation: none; }
+  .cursor { animation: none; }
 }
 
 /* ---------- responsive ---------- */
-@media (max-width: 1080px) {
-  .pillars, .roadmap, .docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-@media (max-width: 900px) {
-  .hero { padding-top: 24px; }
-  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; }
-  .hero-copy { display: contents; }
-  .hero-media { order: 1; width: 100%; max-width: 600px; justify-self: center; margin-top: 24px; }
-  .hero-install { order: 2; }
-  .hero-brand { justify-content: center; }
-  .hero-art { width: min(60vw, 280px); }
-  .hud { display: none; }
-  .split, .split.narrow-right { grid-template-columns: minmax(0, 1fr); gap: 32px; }
-  .tradeoffs { grid-template-columns: minmax(0, 1fr); }
-  .rules { grid-template-columns: minmax(0, 1fr); }
-  .boundary { grid-template-columns: 7.5em minmax(24px, 1fr) 7.5em; }
-  .b-doc { grid-column: 1 / -1; justify-self: start; }
-  .sec { padding-top: 84px; }
-}
-@media (max-width: 560px) {
-  .wrap { padding: 0 18px; }
-  .pillars, .roadmap, .docs-grid { grid-template-columns: minmax(0, 1fr); }
-  .eyebrow { flex-wrap: wrap; border-radius: 3px; line-height: 1.5; }
-  .hero-title { font-size: clamp(38px, 12vw, 56px); }
-  .lede { font-size: 16px; }
-  .compare tbody th { white-space: normal; }
-}
-
-/* Editorial typography and ruled sections retain the terminal demonstrations. */
-.hero-title .accent { font-style: italic; }
-.cursor { font-style: normal; }
-.eyebrow { border-radius: 0; background: transparent; border: 0; border-left: 3px solid var(--l-accent); padding-left: 12px; }
-.sec { border-top: 1px solid var(--l-line-strong); padding-bottom: 56px; }
-
-.sec-head { align-items: center; }
-.idx { background: var(--l-accent); color: var(--l-bg); padding: 7px 10px; }
-h2, .motto { font-family: var(--l-display); letter-spacing: -0.045em; }
-h3 { font-family: var(--l-display); }
-.hero-art { background: transparent; }
-.ticker { background: var(--l-text); color: var(--l-bg); border-top: 3px solid var(--l-accent); }
-.ticker-run span { color: inherit; }
-.btn.primary { box-shadow: 3px 3px 0 var(--l-text); }
-.btn.primary:hover { box-shadow: 5px 5px 0 var(--l-text); }
-.btn:focus-visible, .copy:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 5px; }
-@media (max-width: 640px) {
-  .hero-art { transform: none; }
-  .hero-title { letter-spacing: -0.05em; }
-}
-</style>
-
-<style scoped>
-.architecture-visual { display: block; max-width: 980px; margin: 0 auto 20px; }
-.architecture-visual img { display: block; width: 100%; height: auto; }
-.more { display: inline-block; }
-.session-flow { display: flex; align-items: center; justify-content: center; gap: 28px; padding: 32px 24px; margin: 24px 0; border: 1px solid var(--l-line-strong); background: var(--l-panel); }
-.flow-node { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border: 1px solid var(--l-line-strong); font: 500 17px var(--l-mono); }
-.flow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--l-muted); }
-.flow-node.active { border-color: var(--l-accent); color: var(--l-accent); }
-.active .flow-dot { background: var(--l-accent); box-shadow: 0 0 16px var(--l-glow); }
-.flow-arrow { color: var(--l-accent); font-size: 24px; }
-.flow-outcomes { display: grid; gap: 10px; }
-.compact-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.compact-rules li { padding: 16px; }
-.rule-icon { width: 36px; height: 36px; margin-bottom: 18px; color: var(--l-accent); }
-.compact-rules h3 { font-size: 16px; }
-.compact-rules p { font-size: 13px; }
-.observe-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
-.observe-heading .tabs { flex-shrink: 0; border: 1px solid var(--l-line); }
-.console-wide { width: 100%; }
-.console-wide img { width: 100%; display: block; }
-.doc-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 28px; padding-bottom: 28px; }
-.doc-shortcuts a { display: flex; align-items: center; gap: 16px; padding: 22px 16px; border: 1px solid var(--l-line-strong); font: 500 14px var(--l-mono); }
-.doc-shortcuts a:hover { border-color: var(--l-accent); color: var(--l-accent); }
-.doc-shortcuts a > :last-child { margin-left: auto; }
-.shortcut-index { color: var(--l-accent); font-size: 11px; }
-.start-compact { padding-top: 40px; }
-.start-compact .install { max-width: 100%; }
-.start-path { display: flex; gap: 32px; list-style: none; padding: 0; margin: 24px 0; font: 14px var(--l-mono); }
-.start-path li { display: flex; gap: 12px; align-items: center; }
-.start-path span { color: var(--l-accent); }
-.outro { padding-bottom: 0; }
-.outro-art { margin-top: 32px; }
 @media (max-width: 900px) {
-  .compact-rules, .doc-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .session-flow { gap: 14px; padding: 24px 12px; }
-  .flow-node { padding: 12px; font-size: 14px; }
+  .hero { padding-top: 48px; }
+  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
+  .hero-lab { margin-top: 64px; }
+  .sec { margin-top: 72px; padding-top: 56px; }
+  .doc-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 72px; }
 }
 @media (max-width: 640px) {
+  .wrap { padding: 0 18px; }
+  .hero-title { font-size: clamp(38px, 12vw, 56px); letter-spacing: -0.05em; }
+  .lede { font-size: 16px; }
   .observe-heading { display: block; }
-  .observe-heading .tabs { margin-bottom: 20px; width: fit-content; }
-  .session-flow { flex-wrap: wrap; gap: 10px; }
-  .flow-node { font-size: 11px; padding: 10px; gap: 6px; }
-  .flow-arrow { font-size: 18px; }
-  .flow-dot { width: 5px; height: 5px; }
-  .start-path { flex-direction: column; gap: 16px; }
-  .doc-shortcuts a { font-size: 12px; gap: 8px; padding: 16px 10px; }
+  .observe-heading .tabs { margin-bottom: 28px; width: fit-content; }
+  .doc-shortcuts { grid-template-columns: minmax(0, 1fr); }
+  .start-path { flex-direction: column; gap: 20px; }
+  /* Keep the figure and the console at a readable size and let them scroll sideways. */
+  .architecture-visual, .window { overflow-x: auto; }
+  .architecture-visual img { min-width: 960px; }
+  .window img { min-width: 900px; }
+  .outro { padding-bottom: 80px; }
 }
 </style>
-
-<style scoped>
-@font-face { font-family: 'OAC Hand'; src: url('../assets/fonts/Virgil.woff2') format('woff2'); font-weight: 400; font-display: swap; }
-</style>
diff --git a/website/.vitepress/theme/components/LaunchVideo.vue b/website/.vitepress/theme/components/LaunchVideo.vue
index 2672f86b1..a38ce8261 100644
--- a/website/.vitepress/theme/components/LaunchVideo.vue
+++ b/website/.vitepress/theme/components/LaunchVideo.vue
@@ -1,37 +1,25 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 import { copy, type Lang } from '../landing-content'
 
 const props = defineProps<{ lang: Lang }>()
 const t = computed(() => copy[props.lang].video)
 const source = 'https://file.cdn.minimax.io/public/OpenAgentCore-launch.mp4'
-const preview = ref<HTMLVideoElement>()
 const player = ref<HTMLVideoElement>()
 const dialog = ref<HTMLDialogElement>()
-const paused = ref(true)
-let resumePreview = false
+// The video loads only after the first click.
+const opened = ref(false)
 
-function play(video?: HTMLVideoElement) {
-  void video?.play().catch(() => {})
-}
-function expand() {
-  if (!preview.value || !player.value || !dialog.value) return
-  resumePreview = !preview.value.paused
-  preview.value.pause()
-  dialog.value.showModal()
-  player.value.currentTime = preview.value.currentTime
-  play(player.value)
+async function open() {
+  opened.value = true
+  dialog.value?.showModal()
+  await nextTick()
+  void player.value?.play().catch(() => {})
 }
 function close() {
   player.value?.pause()
-  if (preview.value && player.value) preview.value.currentTime = player.value.currentTime
-  if (resumePreview) play(preview.value)
 }
-onMounted(() => {
-  if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) play(preview.value)
-})
 onBeforeUnmount(() => {
-  preview.value?.pause()
   player.value?.pause()
   dialog.value?.close()
 })
@@ -39,41 +27,25 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="launch-video">
-    <div class="preview-frame">
-      <button class="preview-open" type="button" :aria-label="t.expand" aria-haspopup="dialog" @click="expand">
-        <video ref="preview" :src="source" muted loop playsinline preload="metadata" aria-hidden="true" @play="paused = false" @pause="paused = true" />
-        <span class="expand-icon" aria-hidden="true">↗</span>
-      </button>
-      <span class="video-corner top-left" aria-hidden="true" /><span class="video-corner top-right" aria-hidden="true" /><span class="video-corner bottom-left" aria-hidden="true" /><span class="video-corner bottom-right" aria-hidden="true" />
-      <button class="preview-pause" type="button" :aria-label="paused ? t.play : t.pause" @click="paused ? play(preview) : preview?.pause()">{{ paused ? '▶' : 'Ⅱ' }}</button>
-    </div>
-    <button class="video-caption" type="button" @click="expand">{{ t.title }} <span aria-hidden="true">↗</span></button>
+    <button class="watch" type="button" aria-haspopup="dialog" @click="open">
+      <span class="play" aria-hidden="true">▶</span>{{ t.expand }}
+    </button>
     <dialog ref="dialog" class="video-dialog" :aria-label="t.title" @close="close" @click="($event.target === dialog) && dialog?.close()">
       <div class="player-heading"><span>{{ t.title }}</span><button type="button" :aria-label="t.close" autofocus @click="dialog?.close()">✕</button></div>
-      <video ref="player" :src="source" controls playsinline preload="none" :aria-label="t.title" />
+      <video ref="player" :src="opened ? source : undefined" controls playsinline preload="none" :aria-label="t.title" />
     </dialog>
   </div>
 </template>
 
 <style scoped>
-.launch-video { width: 100%; }
-.preview-frame { position: relative; padding: 6px; background: transparent; }
-.video-corner { position: absolute; width: 18px; height: 18px; border-style: solid; border-color: var(--l-accent); opacity: 0.65; pointer-events: none; }
-.top-left { top: 0; left: 0; border-width: 1px 0 0 1px; }
-.top-right { top: 0; right: 0; border-width: 1px 1px 0 0; }
-.bottom-left { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
-.bottom-right { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
-.preview-open { display: block; width: 100%; cursor: pointer; }
-.preview-open video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
-.expand-icon, .preview-pause { position: absolute; bottom: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff50; border-radius: 3px; color: #fff; background: #0b100ecc; }
-.expand-icon { right: 10px; }
-.preview-pause { left: 10px; cursor: pointer; }
-.video-caption { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 6px; border-bottom: 1px solid var(--l-line); color: var(--l-text-2); font: 12px var(--l-mono); cursor: pointer; }
-button:focus-visible { outline: 2px solid var(--l-accent); outline-offset: -3px; }
-.preview-frame:hover .video-corner { opacity: 1; }
+.watch { display: inline-flex; align-items: center; gap: 14px; padding: 6px 0; color: var(--l-text); font: 500 16px/1.4 var(--l-mono); cursor: pointer; }
+.watch:hover { color: var(--l-accent); }
+.play { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--l-line-strong); border-radius: 50%; color: var(--l-accent); font-size: 14px; padding-left: 2px; }
+.watch:hover .play { border-color: var(--l-accent); }
+button:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 4px; }
 .video-dialog { position: fixed; inset: 0; width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--l-line-strong); border-radius: 6px; background: var(--l-code-bg); color: var(--l-code-text); box-shadow: 0 24px 100px #0008; }
 .video-dialog::backdrop { background: #050907d9; backdrop-filter: blur(8px); }
-.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #ffffff20; font: 13px var(--l-mono); }
+.player-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; border-bottom: 1px solid #ffffff20; font: 14px var(--l-mono); }
 .player-heading button { width: 32px; height: 32px; cursor: pointer; }
 .video-dialog video { display: block; width: 100%; max-height: calc(100dvh - 90px); background: #000; }
 </style>
diff --git a/website/.vitepress/theme/components/LogoWall.vue b/website/.vitepress/theme/components/LogoWall.vue
index 70063329c..1a7d693af 100644
--- a/website/.vitepress/theme/components/LogoWall.vue
+++ b/website/.vitepress/theme/components/LogoWall.vue
@@ -8,8 +8,8 @@ const props = defineProps<{ lang: Lang }>()
 const t = computed(() => copy[props.lang].ecosystem)
 const paused = ref(false)
 const rows = computed(() => [
-  { label: t.value.agents, logos: agentLogos },
-  { label: t.value.compute, logos: computeLogos },
+  { label: 'Harnesses and models', logos: agentLogos },
+  { label: 'Cloud and compute', logos: computeLogos },
 ])
 </script>
 
@@ -23,7 +23,6 @@ const rows = computed(() => [
       </button>
     </header>
     <div v-for="(row, index) in rows" :key="index" class="logo-row" :class="{ reverse: index === 1 }">
-      <p class="logo-row-label">{{ row.label }}</p>
       <div class="logo-viewport" tabindex="0" role="region" :aria-label="row.label">
         <div class="logo-track">
           <ul v-for="run in 2" :key="run" class="logo-run" :aria-hidden="run === 2 ? true : undefined">
@@ -41,9 +40,9 @@ const rows = computed(() => [
 <style scoped>
 .logo-wall {
   position: relative;
-  padding: 20px 0;
+  padding: 56px 0 24px;
   background: transparent;
-  color: #fff;
+  color: var(--l-text);
 }
 .logo-wall-heading {
   max-width: 1200px;
@@ -58,32 +57,24 @@ const rows = computed(() => [
   margin: 0;
   font: 500 clamp(20px, 2.5vw, 28px) / 1.3 var(--l-display);
   letter-spacing: -0.035em;
-  color: #fff;
+  color: var(--l-text);
 }
 .logo-wall-heading button {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.28);
+  padding: 10px 14px;
+  border: 1px solid var(--l-line-strong);
   border-radius: 3px;
-  color: #fff;
-  font: 11px var(--l-mono);
+  color: var(--l-text);
+  font: 14px var(--l-mono);
   cursor: pointer;
 }
-.logo-wall-heading button:hover { background: rgba(255, 255, 255, 0.08); }
+.logo-wall-heading button:hover { background: var(--l-hover); }
 .logo-wall-heading button:focus-visible,
-.logo-viewport:focus-visible { outline: 2px solid #4ade80; outline-offset: -2px; }
+.logo-viewport:focus-visible { outline: 2px solid var(--l-accent); outline-offset: -2px; }
 .logo-row + .logo-row { margin-top: 18px; }
-.logo-row-label {
-  margin: 0 0 6px;
-  text-align: center;
-  color: #9aaba0;
-  font: 10px / 1.5 var(--l-mono);
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
-}
 .logo-viewport {
   overflow-x: auto;
   scrollbar-width: none;
@@ -121,8 +112,9 @@ const rows = computed(() => [
   width: 36px;
   height: 36px;
   object-fit: contain;
-  filter: brightness(0) invert(1);
+  filter: brightness(0);
 }
+.dark .logo-item img { filter: brightness(0) invert(1); }
 .logo-wall.paused .logo-track,
 .logo-wall:hover .logo-track,
 .logo-viewport:focus-within .logo-track { animation-play-state: paused; }
diff --git a/website/.vitepress/theme/components/SessionFlow.vue b/website/.vitepress/theme/components/SessionFlow.vue
index 7ac648b8c..184f7c73c 100644
--- a/website/.vitepress/theme/components/SessionFlow.vue
+++ b/website/.vitepress/theme/components/SessionFlow.vue
@@ -1,24 +1,20 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
-import type { Lang } from '../landing-content'
+import { copy as landing, type Lang } from '../landing-content'
 import codex from '../assets/logos/codex.svg'
 import claude from '../assets/logos/claudecode.svg'
 import minimax from '../assets/logos/minimax.svg'
 
 const props = defineProps<{ lang: Lang }>()
-const copy = computed(() => props.lang === 'zh' ? {
-  stages: ['原生 Agent', '统一执行', '自由组合'],
-  captions: ['Runtime 准备环境，原生 Harness 运行模型与工具循环。', '应用通过 Agents API 创建 Session，Core 管理执行与持久状态。', '不同 Session 使用不同 Harness 与模型；此示例中的托管 Session 共用 microsandbox 部署，独立工作区可跨计算生命周期保留。'],
-  app: '你的应用', api: 'OpenAI SDK · Agents API', state: 'Session 与 Turn', orchestration: '调度 · 取消 · 交互', events: '事件 · 结果 · 持久状态', workspace: '挂载工作区 · Shell · 工具', loop: '原生 Agent 循环', runtime: '环境准备 · 执行管理', model: '模型提供商', provider: '沙箱提供商', compute: '创建与回收计算资源', next: '下一步', back: '上一步', play: '播放', pause: '暂停', label: 'Session 架构演示', step: '演示阶段',
-} : {
-  stages: ['Native agent', 'Managed execution', 'Many combinations'],
-  captions: ['Runtime prepares the environment. The native harness owns the model and tool loop.', 'Your app creates a Session through the Agents API. Core manages execution and durable state.', 'Sessions use different Harnesses and models. Managed Sessions here share one microsandbox deployment; independent workspaces outlive compute.'],
-  app: 'Your application', api: 'OpenAI SDK · Agents API', state: 'Sessions & Turns', orchestration: 'Schedule · cancel · interact', events: 'Events · results · durable state', workspace: 'Mounted workspace · shell · tools', loop: 'Native agent loop', runtime: 'Prepare · execute · report', model: 'Model provider', provider: 'Sandbox Provider', compute: 'Provision & reclaim compute', next: 'Next', back: 'Back', play: 'Play', pause: 'Pause', label: 'Inside a Session', step: 'Architecture stage',
-})
+const copy = computed(() => landing[props.lang].session.flow)
 const step = ref(0)
 const playing = ref(true)
 const visible = ref(false)
 const root = ref<HTMLElement>()
+const fit = ref<HTMLElement>()
+// The 1100 px board scales down to the column width instead of scrolling.
+const scale = ref(1)
+let resize: ResizeObserver | undefined
 let timer: ReturnType<typeof setInterval> | undefined
 let observer: IntersectionObserver | undefined
 let media: MediaQueryList | undefined
@@ -36,15 +32,16 @@ onMounted(() => {
   observer = new IntersectionObserver(([entry]) => { visible.value = entry.isIntersecting; syncTimer() }, { threshold: .2 })
   observer.observe(root.value!)
   document.addEventListener('visibilitychange', syncTimer)
+  resize = new ResizeObserver(([entry]) => { scale.value = Math.min(1, entry.contentRect.width / 1100) })
+  resize.observe(fit.value!)
 })
-onBeforeUnmount(() => { clearInterval(timer); observer?.disconnect(); media?.removeEventListener('change', onMotion); document.removeEventListener('visibilitychange', syncTimer) })
+onBeforeUnmount(() => { clearInterval(timer); observer?.disconnect(); resize?.disconnect(); media?.removeEventListener('change', onMotion); document.removeEventListener('visibilitychange', syncTimer) })
 </script>
 
 <template>
   <figure ref="root" class="session-sketch" :data-stage="step" :class="{ paused: !playing || !visible }" :aria-label="copy.label">
-    <div class="sketch-top"><strong>{{ copy.label }}</strong><span>0{{ step + 1 }} · {{ copy.stages[step] }}</span></div>
-    <div class="sketch-scroll" tabindex="0" :aria-label="copy.label">
-      <div class="sketch-board">
+    <div ref="fit" class="sketch-fit" :style="{ height: 530 * scale + 'px' }">
+      <div class="sketch-board" :style="{ transform: `scale(${scale})` }">
         <svg class="wires" viewBox="0 0 1100 530" aria-hidden="true">
           <defs><marker id="session-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M1 1 8 5 1 9" /></marker></defs>
           <g class="core-wires"><path d="M205 228 Q238 222 266 228" marker-end="url(#session-arrow)" /><path d="M266 265 Q238 271 205 265" marker-end="url(#session-arrow)" /><text x="219" y="210">/v1</text>
@@ -91,11 +88,9 @@ onBeforeUnmount(() => { clearInterval(timer); observer?.disconnect(); media?.rem
 </template>
 
 <style scoped>
-.session-sketch { margin: 28px 0 24px; color: var(--l-text); font-family: 'OAC Hand', 'Kaiti SC', KaiTi, cursive; line-height: 1.35; }
-.sketch-top { display: flex; justify-content: space-between; gap: 20px; padding: 0 20px 12px; font-size: 20px; }
-.sketch-top > span { color: var(--l-muted); font-size: 16px; }
-.sketch-scroll { overflow-x: auto; }
-.sketch-board { position: relative; width: 1100px; height: 530px; margin: auto; background-image: linear-gradient(var(--l-grid) 1px,transparent 1px),linear-gradient(90deg,var(--l-grid) 1px,transparent 1px); background-size: 32px 32px; }
+.session-sketch { margin: 40px 0 24px; color: var(--l-text); font-family: 'OAC Hand', 'Kaiti SC', KaiTi, cursive; line-height: 1.35; }
+.sketch-fit { width: 100%; max-width: 1100px; margin: 0 auto; }
+.sketch-board { position: relative; width: 1100px; height: 530px; transform-origin: top left; background-image: linear-gradient(var(--l-grid) 1px,transparent 1px),linear-gradient(90deg,var(--l-grid) 1px,transparent 1px); background-size: 32px 32px; }
 .hand-box { position: relative; border: 1.3px solid var(--l-text-2); border-radius: 2px 5px 3px 7px; background: var(--l-bg); }
 .hand-box::after { content: ''; pointer-events: none; position: absolute; inset: 2px -3px -3px 2px; border: .7px solid var(--l-muted); opacity: .4; border-radius: 5px 2px 6px 3px; transform: rotate(-.35deg); }
 .sketch-board > article { position: absolute; box-sizing: border-box; transition: left .85s cubic-bezier(.22,1,.36,1), top .85s cubic-bezier(.22,1,.36,1), width .85s, height .85s, opacity .5s, transform .85s; }
@@ -122,7 +117,8 @@ strong, b { font-weight: 400; }
 .runtime small { font-size: 11px; }
 .harness { padding: 12px; margin-top: 14px; }
 .harness > strong { display: flex; align-items: center; gap: 9px; font-size: 19px; }
-.harness img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
+.harness img { width: 22px; height: 22px; filter: brightness(0); }
+.dark .harness img { filter: brightness(0) invert(1); }
 .agent-loop { text-align: center; margin-top: 8px; }
 .cycle { position: relative; height: 90px; width: 200px; margin: auto; font-size: 14px; }
 .cycle span { position: absolute; z-index: 1; background: var(--l-bg); padding: 0 3px; }
@@ -164,10 +160,14 @@ figcaption { min-height: 2.8em; max-width: 900px; margin: 8px auto 14px; padding
 .sketch-controls { display: flex; gap: 22px; align-items: center; justify-content: center; padding: 8px 12px; }
 .sketch-controls button { border: 1px solid var(--l-line-strong); padding: 7px 14px; font: 16px 'OAC Hand', 'Kaiti SC', cursive; cursor: pointer; }.sketch-controls button:disabled { opacity: .3; cursor: default; }
 .sketch-controls button:hover:enabled { border-color: var(--l-accent); color: var(--l-accent); }
-.sketch-controls :focus-visible,.sketch-scroll:focus-visible { outline: 2px solid var(--l-accent); outline-offset: 3px; }
-.stage-picker { width: 330px; }.stage-picker input { width: 100%; accent-color: var(--l-accent); }.stage-picker > div { display: flex; justify-content: space-between; font-size: 13px; color: var(--l-muted); }
+.sketch-controls :focus-visible { outline: 2px solid var(--l-accent); outline-offset: 3px; }
+.stage-picker { width: 520px; max-width: 100%; }.stage-picker input { width: 100%; accent-color: var(--l-accent); }.stage-picker > div { display: flex; justify-content: space-between; font-size: 14px; color: var(--l-muted); }
 @keyframes ink-flow { to { stroke-dashoffset: -54; } }
 .paused .cycle svg,.paused .request { animation-play-state: paused; }
-@media (max-width: 640px) { .sketch-top { padding: 0 4px 12px; font-size: 16px; }.sketch-top > span { font-size: 13px; }.sketch-controls { gap: 8px; flex-wrap: wrap; }.stage-picker { width: 100%; order: -1; }figcaption { font-size: 16px; } }
+@media (max-width: 640px) { .sketch-controls { gap: 8px; flex-wrap: wrap; }.stage-picker { width: 100%; order: -1; }figcaption { font-size: 16px; } }
 @media (prefers-reduced-motion: reduce) { article,.core-wires,.fleet-wires { transition: none; }.cycle svg,.wires .request { animation: none; } }
 </style>
+
+<style scoped>
+@font-face { font-family: 'OAC Hand'; src: url('../assets/fonts/Virgil.woff2') format('woff2'); font-weight: 400; font-display: swap; }
+</style>
diff --git a/website/.vitepress/theme/components/TypeTerminal.vue b/website/.vitepress/theme/components/TypeTerminal.vue
deleted file mode 100644
index b5ee7a58e..000000000
--- a/website/.vitepress/theme/components/TypeTerminal.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<script setup lang="ts">
-// A terminal that types its lines once it scrolls into view.
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-
-export interface TermLine {
-  kind: 'cmd' | 'comment' | 'out'
-  text: string
-}
-
-const props = defineProps<{ lines: TermLine[]; title: string }>()
-
-const root = ref<HTMLElement>()
-const shown = ref<string[]>(props.lines.map(() => ''))
-const active = ref(-1)
-let timer: ReturnType<typeof setTimeout> | undefined
-let observer: IntersectionObserver | undefined
-
-function finish() {
-  shown.value = props.lines.map((line) => line.text)
-  active.value = props.lines.length - 1
-}
-
-function run() {
-  let line = 0
-  let char = 0
-  const step = () => {
-    if (line >= props.lines.length) return
-    active.value = line
-    const target = props.lines[line]
-    if (target.kind !== 'cmd') {
-      shown.value[line] = target.text
-      line++
-      timer = setTimeout(step, 140)
-      return
-    }
-    char = Math.min(target.text.length, char + 2)
-    shown.value[line] = target.text.slice(0, char)
-    if (char >= target.text.length) {
-      line++
-      char = 0
-      timer = setTimeout(step, 420)
-    } else {
-      timer = setTimeout(step, 18 + Math.random() * 30)
-    }
-  }
-  step()
-}
-
-onMounted(() => {
-  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return finish()
-  observer = new IntersectionObserver(
-    ([entry]) => {
-      if (!entry.isIntersecting) return
-      observer?.disconnect()
-      run()
-    },
-    { threshold: 0.4 },
-  )
-  observer.observe(root.value!)
-})
-
-onBeforeUnmount(() => {
-  clearTimeout(timer)
-  observer?.disconnect()
-})
-</script>
-
-<template>
-  <div ref="root" class="term">
-    <div class="term-bar">
-      <span class="dots"><i /><i /><i /></span>
-      <span>{{ title }}</span>
-    </div>
-    <pre class="term-body" :aria-label="lines.map((l) => l.text).join('\n')"><template v-for="(line, i) in lines" :key="i"><span v-if="shown[i] || active === i" :class="line.kind"><span v-if="line.kind === 'cmd'" class="prompt">❯ </span>{{ shown[i] }}<span v-if="active === i" class="caret" aria-hidden="true">█</span>
-</span></template></pre>
-  </div>
-</template>
-
-<style scoped>
-.term {
-  border: 1px solid var(--l-line);
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--l-code-bg);
-  box-shadow: 0 30px 80px -40px var(--l-glow);
-}
-.term-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 14px;
-  border-bottom: 1px solid rgba(232, 241, 235, 0.08);
-  font: 12px var(--l-mono);
-  color: #7f8f85;
-}
-.dots {
-  display: flex;
-  gap: 6px;
-}
-.dots i {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-.dots i:nth-child(1) { background: #ff5f57; }
-.dots i:nth-child(2) { background: #febc2e; }
-.dots i:nth-child(3) { background: #28c840; }
-.term-body {
-  margin: 0;
-  min-height: 15.5em;
-  padding: 16px 18px;
-  overflow-x: auto;
-  font: 13px/1.75 var(--l-mono);
-  color: var(--l-code-text);
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-.prompt {
-  color: #4ade80;
-}
-.comment {
-  color: #5f7166;
-}
-.out {
-  color: #b7c5bc;
-}
-.caret {
-  color: #4ade80;
-  animation: blink 1s steps(1) infinite;
-}
-@keyframes blink {
-  50% {
-    opacity: 0;
-  }
-}
-</style>
diff --git a/website/.vitepress/theme/index.ts b/website/.vitepress/theme/index.ts
index c05406789..1bc256aff 100644
--- a/website/.vitepress/theme/index.ts
+++ b/website/.vitepress/theme/index.ts
@@ -1,7 +1,6 @@
 import DefaultTheme from 'vitepress/theme'
 import type { Theme } from 'vitepress'
 import '@fontsource-variable/inter'
-import '@fontsource-variable/space-grotesk'
 import '@fontsource-variable/geist-mono'
 import Layout from './Layout.vue'
 import Landing from './components/Landing.vue'
diff --git a/website/.vitepress/theme/landing-content.ts b/website/.vitepress/theme/landing-content.ts
index e5879da97..d150fcc0c 100644
--- a/website/.vitepress/theme/landing-content.ts
+++ b/website/.vitepress/theme/landing-content.ts
@@ -1,284 +1,170 @@
 // Landing page copy. Every product claim here is backed by a page in docs/ or
-// contracts/; each section links to the page that owns the detail.
+// contracts/; link labels equal the target page titles.
 
 export type Lang = 'en' | 'zh'
 
+export interface FlowCopy {
+  label: string
+  stages: string[]
+  captions: string[]
+  app: string
+  api: string
+  state: string
+  orchestration: string
+  events: string
+  workspace: string
+  loop: string
+  runtime: string
+  model: string
+  provider: string
+  compute: string
+  next: string
+  back: string
+  play: string
+  pause: string
+  step: string
+}
+
 export interface LandingCopy {
-  hero: {
-    eyebrow: string
-    title: [string, string]
-    lede: string
-    primary: string
-    secondary: string
-    installLabel: string
-    copied: string
-    copy: string
-    hud: [string, string][]
-  }
-  video: { title: string; expand: string; close: string; pause: string; play: string }
-  ticker: string[]
+  hero: { title: [string, string]; lede: string; primary: string; secondary: string; copied: string; copy: string; installTabs: [string, string] }
+  video: { title: string; expand: string; close: string }
   compose: {
-    index: string
-    kicker: string
-    title: string
-    titleAccent: string
-    lede: string
     harness: string
     protocol: string
     environment: string
     accepted: string
     rejected: (harness: string, protocols: string) => string
-    envs: Record<'openai_hosted' | 'self_hosted', { label: string; note: string }>
+    envs: Record<'openai_hosted' | 'self_hosted', string>
     input: string
     footnote: string
     footnoteLink: string
   }
-  architecture: {
-    index: string
-    kicker: string
-    title: string
-    titleAccent: string
-    lede: string
-    tabs: { id: string; label: string; alt: string }[]
-    more: string
-  }
-  session: {
-    index: string
-    kicker: string
-    title: string
-    titleAccent: string
-    lede: string
-    rules: { title: string; body: string; art: string }[]
-    animation: { label: string; steps: string[]; messages: string[]; states: string[]; pause: string; play: string; replay: string; next: string; note: string }
-    more: string
-  }
-  observe: {
-    index: string
-    kicker: string
-    title: string
-    titleAccent: string
-    lede: string
-    tabs: { id: 'overview' | 'metrics'; label: string; alt: string }[]
-    caption: string
-  }
-  start: {
-    index: string
-    kicker: string
-    title: string
-    titleAccent: string
-    lede: string
-    steps: { title: string; body: string }[]
-    cta: string
-    trial: string
-  }
+  architecture: { title: string; titleAccent: string; alt: string; more: string }
+  session: { title: string; titleAccent: string; more: string; flow: FlowCopy }
+  observe: { title: string; titleAccent: string; tabs: { id: 'overview' | 'metrics'; label: string; alt: string }[] }
   docs: { title: string; links: { label: string; path: string }[] }
-  ecosystem: { title: string; titleAccent: string; agents: string; compute: string; pause: string; resume: string }
+  ecosystem: { title: string; titleAccent: string; pause: string; resume: string }
+  start: { title: string; titleAccent: string; steps: { label: string; path: string }[] }
 }
 
 const en: LandingCopy = {
   hero: {
-    eyebrow: 'open source · self-hosted · OpenAI Agents API',
     title: ['One core.', 'Many agents.'],
-    lede: 'An open-source, self-hosted implementation of the OpenAI Agents API. Run Codex, Claude Code or MiniMax Code with your own models, on your own machines, through the official OpenAI SDK.',
-    primary: 'Run your first Session',
+    lede: 'The OpenAI Agents API, open source and self-hosted. Run Codex, Claude Code or MiniMax Code on your own machines with your own models, through the official OpenAI SDK.',
+    primary: 'Get started',
     secondary: 'Read the docs',
-    installLabel: 'Linux amd64 · Docker · Python 3.9+',
     copied: 'copied',
     copy: 'copy',
-    hud: [
-      ['api', '/v1 · OpenAI Agents API'],
-      ['harness', 'codex | claude_sdk | mcode'],
-      ['protocol', 'responses | anthropic | chat_completions'],
-      ['sandbox', 'microsandbox | e2b | docker'],
-      ['workspace', 'independent filesystem adapter'],
-      ['machine', 'linux | macos | windows'],
-    ],
+    installTabs: ['macOS / Linux', 'Windows'],
   },
-  video: { title: 'Meet OpenAgentCore', expand: 'Watch the launch film', close: 'Close video', pause: 'Pause preview', play: 'Play preview' },
-  ticker: ['Codex', 'Claude Code', 'MiniMax Code', 'Responses API', 'Anthropic Messages', 'Chat Completions', 'microsandbox', 'E2B', 'Docker', 'Linux', 'macOS', 'Windows', 'PostgreSQL', 'OpenAI SDK'],
+  video: { title: 'Meet OpenAgentCore', expand: 'Watch the launch film', close: 'Close video' },
   compose: {
-    index: '01',
-    kicker: 'pick each part',
-    title: 'Your agent. Your model. Your machine.', titleAccent: 'Your machine.',
-    lede: 'Choose a combination. See the API call.',
-    harness: 'harness',
-    protocol: 'model protocol',
-    environment: 'environment',
+    harness: 'Harness',
+    protocol: 'Model protocol',
+    environment: 'Environment',
     accepted: 'accepted · Session created',
     rejected: (harness, protocols) => `rejected before the Session is created · ${harness} speaks only ${protocols}`,
-    envs: {
-      openai_hosted: { label: 'managed sandbox', note: 'microsandbox + persistent FS · E2B' },
-      self_hosted: { label: 'your machine', note: 'Linux · macOS · Windows' },
-    },
+    envs: { openai_hosted: 'managed sandbox', self_hosted: 'your machine' },
     input: 'Fix the failing test and explain the change.',
-    footnote: 'The supported combinations are declared by each harness, not guessed.',
+    footnote: 'Each Harness declares the protocols it speaks; Core rejects other combinations before it creates the Session.',
     footnoteLink: 'Harness capabilities',
   },
   architecture: {
-    index: '02',
-    kicker: 'protocols at every boundary',
     title: 'One API. Replaceable parts.', titleAccent: 'Replaceable parts.',
-    lede: 'Core orchestrates. Native harnesses run inside sandboxes. Compute and persistent workspace storage have separate adapters.',
-    tabs: [
-      { id: 'ecosystem', label: 'ecosystem', alt: 'Applications call Core through the Agents API; native Harnesses run inside sandboxes and call models directly. Separate adapters manage compute and persistent workspace storage.' },
-      { id: 'protocols', label: 'components', alt: 'Agents API and Core API on top of Core; Sandbox Provider, Runtime, Harness and Model Provider connected by protocols.' },
-      { id: 'surfaces', label: 'api namespaces', alt: 'Three namespaces with three credentials: Agents API for applications, Core API for operators, Machine API for nodes.' },
-    ],
-    more: 'Read the architecture',
+    alt: 'Applications call Core through the Agents API; native Harnesses run inside sandboxes and call models directly. Separate adapters manage compute and persistent workspace storage.',
+    more: 'Architecture',
   },
   session: {
-    index: '03',
-    kicker: 'execution you can manage',
-    title: 'Session is all you need.', titleAccent: 'Session',
-    lede: 'Submit work, follow its progress, and pick up the conversation.',
-    rules: [
-      { title: 'Connection ≠ work', body: 'Submitted work continues after the stream closes.', art: 'client ──────╳  disconnect\nturn   ━━━━━━━━━━━━━━▶ completed' },
-      { title: 'Retries have identity', body: 'Stable keys prevent duplicates on supported submission paths.', art: 'POST  Idempotency-Key: a1f ──▶ turn_01\nPOST  Idempotency-Key: a1f ──▶ turn_01' },
-      { title: 'Cancel has a receipt', body: 'Core confirms the target Turn\'s execution and cleanup.', art: 'cancel ──▶ turn  in_progress\n       ──▶ turn  cancelled  ✓ confirmed' },
-      { title: 'Compute can sleep', body: 'microsandbox suspends idle compute. Independent workspace files survive snapshot expiry; new work resumes or cold-starts execution.', art: 'compute    ━━━┫ sleep ┣━━━\nworkspace  ━━━━━━━━━━━━━━━' },
-    ],
-    animation: {
-      label: 'Execution demo', steps: ['Submit', 'Run', 'Input needed', 'Resume', 'Complete'],
-      messages: ['Your application submits a task.', 'The native harness runs the task.', 'The turn waits for input from your application.', 'Your application responds. Execution continues.', 'The result is ready for your application.'],
-      states: ['Submitted', 'Running', 'Waiting', 'Running', 'Completed'],
-      pause: 'Pause', play: 'Play', replay: 'Replay', next: 'Next', note: 'Illustrative workflow · Each harness declares its supported interactions.',
+    title: 'One Session, from request to result.', titleAccent: 'from request to result.',
+    more: 'A Session, end to end',
+    flow: {
+      label: 'Inside a Session', stages: ['Native agent', 'Managed execution', 'Many combinations'],
+      captions: ['Runtime prepares the environment. The native Harness owns the model and tool loop.', 'Your app creates a Session through the Agents API. Core manages execution and durable state.', 'Sessions use different Harnesses and models. Managed Sessions here share one microsandbox deployment; independent workspaces outlive compute.'],
+      app: 'Your application', api: 'OpenAI SDK · Agents API', state: 'Sessions & Turns', orchestration: 'Schedule · cancel · interact', events: 'Events · results · durable state', workspace: 'Mounted workspace · shell · tools', loop: 'Native agent loop', runtime: 'Prepare · execute · report', model: 'Model provider', provider: 'Sandbox Provider', compute: 'Provision & reclaim compute', next: 'Next', back: 'Back', play: 'Play', pause: 'Pause', step: 'Architecture stage',
     },
-    more: 'Session lifecycle',
   },
   observe: {
-    index: '04',
-    kicker: 'see it run',
-    title: 'Operations you can actually see.', titleAccent: 'actually see.',
-    lede: 'Sessions · Compute capacity · Usage',
+    title: 'Run it from one console.', titleAccent: 'one console.',
     tabs: [
-      { id: 'overview', label: 'overview', alt: 'Web console overview: service status, running Sessions, sandbox capacity, fleet and Projects.' },
-      { id: 'metrics', label: 'agent metrics', alt: 'Web console agent metrics: requests, errors, latency, tokens and tool calls.' },
+      { id: 'overview', label: 'Overview', alt: 'Web console overview: service status, running Sessions, sandbox capacity, fleet and Projects.' },
+      { id: 'metrics', label: 'Agent metrics', alt: 'Web console agent metrics: requests, errors, latency, tokens and tool calls.' },
     ],
-    caption: 'Screenshot values are illustrative. Usage visibility depends on what each native harness reports.',
   },
+  docs: { title: 'Documentation', links: [
+    { label: 'Run your first Session', path: '/docs/getting-started/quickstart' },
+    { label: 'Agents API guide', path: '/docs/api/public-agent-api' },
+    { label: 'Install Core and Web', path: '/docs/getting-started/install' },
+    { label: 'Develop OpenAgentCore', path: '/docs/development' },
+  ] },
+  ecosystem: { title: 'An open ecosystem.', titleAccent: 'open ecosystem.', pause: 'Pause', resume: 'Resume' },
   start: {
-    index: '05',
-    kicker: 'get started',
     title: 'From install to first Session.', titleAccent: 'first Session.',
-    lede: 'On a Linux amd64 host with Docker and Python 3.9+:',
     steps: [
-      { title: 'Install & sign in', body: '' },
-      { title: 'Configure model & compute', body: '' },
-      { title: 'Run your first Session', body: '' },
+      { label: 'Install Core and Web', path: '/docs/getting-started/install' },
+      { label: 'Add and manage nodes', path: '/docs/getting-started/nodes' },
+      { label: 'Run your first Session', path: '/docs/getting-started/quickstart' },
     ],
-    cta: 'Installation guide',
-    trial: 'Quickstart',
   },
-  docs: { title: 'Explore the docs', links: [
-    { label: 'Quickstart', path: '/docs/getting-started/quickstart' },
-    { label: 'API reference', path: '/docs/api/public-agent-api' },
-    { label: 'Deployment', path: '/docs/getting-started/install' },
-    { label: 'Build an adapter', path: '/docs/development' },
-  ] },
-  ecosystem: { title: 'One core. An open ecosystem.', titleAccent: 'An open ecosystem.', agents: 'Harnesses & models', compute: 'Cloud & compute', pause: 'Pause', resume: 'Resume' },
 }
 
 const zh: LandingCopy = {
   hero: {
-    eyebrow: '开源 · 可自部署 · OpenAI Agents API',
     title: ['One core.', 'Many agents.'],
-    lede: 'OpenAI Agents API 的开源实现。用官方 OpenAI SDK，在你自己的模型和机器上运行 Codex、Claude Code 或 MiniMax Code。',
-    primary: '运行第一个 Session',
+    lede: '开源、可自部署的 OpenAI Agents API。用官方 OpenAI SDK，在你自己的机器上用你自己的模型运行 Codex、Claude Code 或 MiniMax Code。',
+    primary: '开始使用',
     secondary: '阅读文档',
-    installLabel: 'Linux amd64 · Docker · Python 3.9+',
     copied: '已复制',
     copy: '复制',
-    hud: [
-      ['api', '/v1 · OpenAI Agents API'],
-      ['harness', 'codex | claude_sdk | mcode'],
-      ['protocol', 'responses | anthropic | chat_completions'],
-      ['sandbox', 'microsandbox | e2b | docker'],
-      ['workspace', '独立文件系统 adapter'],
-      ['machine', 'linux | macos | windows'],
-    ],
+    installTabs: ['macOS / Linux', 'Windows'],
   },
-  video: { title: '认识 OpenAgentCore', expand: '观看发布视频', close: '关闭视频', pause: '暂停预览', play: '播放预览' },
-  ticker: en.ticker,
+  video: { title: '认识 OpenAgentCore', expand: '观看发布视频', close: '关闭视频' },
   compose: {
-    index: '01',
-    kicker: '自由组合',
-    title: 'Agent、模型、机器，自由组合。', titleAccent: '自由组合。',
-    lede: '选一个组合，看看对应的 API 调用。',
-    harness: 'harness',
+    harness: 'Harness',
     protocol: '模型协议',
     environment: '执行环境',
     accepted: '通过校验 · Session 已创建',
     rejected: (harness, protocols) => `创建前即被拒绝 · ${harness} 只支持 ${protocols}`,
-    envs: {
-      openai_hosted: { label: '托管沙箱', note: 'microsandbox + 持久 FS · E2B' },
-      self_hosted: { label: '你自己的机器', note: 'Linux · macOS · Windows' },
-    },
+    envs: { openai_hosted: '托管沙箱', self_hosted: '你自己的机器' },
     input: '修复失败的测试，并说明改动。',
-    footnote: '支持哪些组合，由每个 Harness 明确声明，而不是猜测。',
-    footnoteLink: 'Harness 能力表',
+    footnote: '每个 Harness 声明自己支持的协议；其他组合在创建 Session 前即被拒绝。',
+    footnoteLink: 'Harness 能力',
   },
   architecture: {
-    index: '02',
-    kicker: '每条边界都是协议',
     title: '一个 API，部件自由替换。', titleAccent: '部件自由替换。',
-    lede: 'Core 编排，原生 Harness 在沙箱内执行；计算与持久工作区存储由独立 adapter 管理。',
-    tabs: [
-      { id: 'ecosystem', label: '生态', alt: '应用通过 Agents API 接入 Core；原生 Harness 在沙箱内运行并调用模型，计算与持久工作区存储由独立 adapter 管理。' },
-      { id: 'protocols', label: '组件', alt: 'Core 之上是 Agents API 与 Core API；沙箱提供商、Runtime、Harness、模型提供商通过协议连接。' },
-      { id: 'surfaces', label: 'API 命名空间', alt: '三个命名空间、三种凭据：应用用 Agents API，管理员用 Core API，节点用 Machine API。' },
-    ],
-    more: '阅读架构文档',
+    alt: '应用通过 Agents API 接入 Core；原生 Harness 在沙箱内运行并调用模型，计算与持久工作区存储由独立 adapter 管理。',
+    more: '架构',
   },
   session: {
-    index: '03',
-    kicker: '可管理的执行',
-    title: 'Session is all you need.', titleAccent: 'Session',
-    lede: '提交任务，追踪进度，继续对话。',
-    rules: [
-      { title: '连接 ≠ 任务', body: '关闭输出流，已提交的任务仍继续执行。', art: en.session.rules[0].art },
-      { title: '重试有身份', body: '支持的提交路径用稳定标识避免重复任务。', art: en.session.rules[1].art },
-      { title: '取消要有回执', body: 'Core 确认任务停止与资源清理。', art: en.session.rules[2].art },
-      { title: '计算可以休眠', body: 'microsandbox 自动挂起空闲计算；独立工作区文件在快照过期后保留，新任务到来时恢复或冷启动。', art: en.session.rules[3].art },
-    ],
-    animation: {
-      label: '执行流程演示', steps: ['提交', '执行', '等待输入', '继续执行', '完成'],
-      messages: ['应用提交一项任务。', '原生 Harness 开始执行。', 'Turn 等待应用提供输入。', '应用回应，任务继续执行。', '结果已就绪，应用可以读取。'],
-      states: ['已提交', '执行中', '等待中', '执行中', '已完成'],
-      pause: '暂停', play: '播放', replay: '重播', next: '下一步', note: '流程示意 · 交互支持范围由各 Harness 声明。',
+    title: '一个 Session，从请求到结果。', titleAccent: '从请求到结果。',
+    more: '一个 Session 的完整流程',
+    flow: {
+      label: 'Session 内部', stages: ['原生 Agent', '统一执行', '自由组合'],
+      captions: ['Runtime 准备环境，原生 Harness 运行模型与工具循环。', '应用通过 Agents API 创建 Session，Core 管理执行与持久状态。', '不同 Session 使用不同 Harness 与模型；此示例中的托管 Session 共用 microsandbox 部署，独立工作区可跨计算生命周期保留。'],
+      app: '你的应用', api: 'OpenAI SDK · Agents API', state: 'Session 与 Turn', orchestration: '调度 · 取消 · 交互', events: '事件 · 结果 · 持久状态', workspace: '挂载工作区 · Shell · 工具', loop: '原生 Agent 循环', runtime: '环境准备 · 执行管理', model: '模型提供商', provider: '沙箱提供商', compute: '创建与回收计算资源', next: '下一步', back: '上一步', play: '播放', pause: '暂停', step: '演示阶段',
     },
-    more: 'Session 生命周期',
   },
   observe: {
-    index: '04',
-    kicker: '看见运行',
-    title: '运行情况，看得见。', titleAccent: '看得见。',
-    lede: 'Session 状态 · 计算资源 · 用量',
+    title: '一个控制台管理全部运行。', titleAccent: '一个控制台',
     tabs: [
-      { id: 'overview', label: '部署概览', alt: 'Web 控制台概览：服务状态、运行中的 Session、沙箱容量、节点与项目。' },
+      { id: 'overview', label: '概览', alt: 'Web 控制台概览：服务状态、运行中的 Session、沙箱容量、节点与项目。' },
       { id: 'metrics', label: 'Agent 监控', alt: 'Web 控制台 Agent 监控：请求、错误、耗时、Token 与工具调用。' },
     ],
-    caption: '截图数值仅用于展示界面。用量可见性取决于原生 Harness 提供的数据。',
   },
+  docs: { title: '文档', links: [
+    { label: '运行第一个 Session', path: '/docs/getting-started/quickstart' },
+    { label: 'Agents API 指南', path: '/docs/api/public-agent-api' },
+    { label: '安装 Core 和 Web', path: '/docs/getting-started/install' },
+    { label: '开发 OpenAgentCore', path: '/docs/development' },
+  ] },
+  ecosystem: { title: '开放的生态。', titleAccent: '开放的生态。', pause: '暂停', resume: '继续' },
   start: {
-    index: '05',
-    kicker: '开始使用',
     title: '从安装到第一个 Session。', titleAccent: '第一个 Session。',
-    lede: '在装有 Docker 和 Python 3.9+ 的 Linux amd64 主机上：',
     steps: [
-      { title: '安装并登录', body: '' },
-      { title: '配置模型与计算资源', body: '' },
-      { title: '运行第一个 Session', body: '' },
+      { label: '安装 Core 和 Web', path: '/docs/getting-started/install' },
+      { label: '添加和管理节点', path: '/docs/getting-started/nodes' },
+      { label: '运行第一个 Session', path: '/docs/getting-started/quickstart' },
     ],
-    cta: '安装指南',
-    trial: '快速开始',
   },
-  docs: { title: '文档入口', links: [
-    { label: '快速开始', path: '/docs/getting-started/quickstart' },
-    { label: 'API 参考', path: '/docs/api/public-agent-api' },
-    { label: '部署指南', path: '/docs/getting-started/install' },
-    { label: '扩展适配器', path: '/docs/development' },
-  ] },
-  ecosystem: { title: '一个内核，开放的生态。', titleAccent: '开放的生态。', agents: 'Harness 与模型', compute: '云计算与沙箱', pause: '暂停', resume: '继续' },
 }
 
 export const copy: Record<Lang, LandingCopy> = { en, zh }
@@ -292,6 +178,9 @@ export const harnesses = [
 
 export const protocols = ['responses', 'anthropic', 'chat_completions'] as const
 
-export const installCommand = 'curl -fsSL https://openagentcore.dev/install.sh | bash'
+export const installCommands = {
+  unix: 'curl -fsSL https://openagentcore.dev/install.sh | bash',
+  windows: 'irm https://github.com/MiniMax-AI/OpenAgentCore/releases/latest/download/install.ps1 | iex',
+} as const
 
 export const repoUrl = 'https://github.com/MiniMax-AI/OpenAgentCore'
diff --git a/website/README.md b/website/README.md
index ff417011f..0b6a74f88 100644
--- a/website/README.md
+++ b/website/README.md
@@ -19,25 +19,25 @@ pnpm --dir website preview   # serve the build at http://127.0.0.1:4181
 - Each page's source Markdown is published next to its HTML (`/docs/architecture.md`), and the `README` paths declared in `docs.json` redirect to their section index.
 - Relative links from a page to a file that is not a published page, such as `CONTRIBUTING.md` or `openapi.yaml`, are rewritten to GitHub at build time, so the Markdown works unchanged on GitHub and on the site.
 
-The visual system combines warm paper surfaces, green accents, ruled sections and ASCII artwork. Landing headings use self-hosted Space Grotesk; body text uses Inter and code uses Geist Mono. Chinese text uses the system Chinese sans-serif stack. Both light and dark themes share the same hierarchy.
+The visual system combines warm paper surfaces, green accents and ruled sections. Landing headings use self-hosted Space Grotesk (loaded by the landing only); body text uses Inter and code uses Geist Mono. Chinese text uses the system Chinese sans-serif stack. Both light and dark themes share the same hierarchy.
 
 Site appearance and metadata are configured in `.vitepress/config.mts` and `.vitepress/theme/`.
 
-The landing page lives in `.vitepress/theme/`. `landing-content.ts` holds its English and Chinese copy; every claim there must be backed by a page in `docs/` or `contracts/`, and its harness protocols follow [Model execution](../contracts/agents-api/model-execution.md).
+The landing page lives in `.vitepress/theme/`. `landing-content.ts` holds its English and Chinese copy; every claim there must be backed by a page in `docs/` or `contracts/`, link labels equal the target page titles, and its Harness protocols follow [Model execution](../contracts/agents-api/model-execution.md). The hero lede and the `description` in `config.mts` are the same sentence.
 
-The landing page has five numbered sections: the interactive combination example, an architecture image, execution lifecycle, console screenshots and installation. Four documentation shortcuts link to the detailed guides. `components/SessionFlow.vue` illustrates native execution, Core orchestration and multiple Session environments through a three-stage hand-drawn animation. It autoplays while visible and offers previous/next buttons, a stage slider and pause/play. Reduced-motion preferences disable autoplay. The diagram uses the locally bundled [Virgil font](https://github.com/excalidraw/virgil); its OFL license is stored beside the font in `.vitepress/theme/assets/fonts/`. Section headings share the hero’s display font with white text and green italic accents.
+The hero holds the title, the lede, the install command and the interactive example (`components/ComposeLab.vue`). Below it are four sections: an architecture image, the Session diagram, console screenshots and next steps, with four documentation shortcuts and the logo wall between the last two. `components/SessionFlow.vue` illustrates native execution, Core orchestration and multiple Session environments through a three-stage hand-drawn animation that scales to the column width. It autoplays while visible and offers previous/next buttons, a stage slider and pause/play. Reduced-motion preferences disable autoplay. The diagram uses the locally bundled [Virgil font](https://github.com/excalidraw/virgil); its OFL license is stored beside the font in `.vitepress/theme/assets/fonts/`.
 
 ### Launch video
 
-`components/LaunchVideo.vue` embeds the CDN-hosted launch film in the hero’s right column, below an interactive ASCII brand panel, in both languages. Green corner marks frame the preview. On narrow screens, the video fills the content width between the hero actions and installation command. The compact preview loops silently and has a pause control; reduced-motion preferences leave it paused. Opening the preview pauses it and continues from the same position in a modal player with native playback and audio controls. The close button, Escape and backdrop dismiss the player and return focus to the preview.
+`components/LaunchVideo.vue` renders the "Watch the launch film" link in the hero. The CDN-hosted video loads only when the link opens the modal player; nothing autoplays. The close button, Escape and backdrop dismiss the player.
 
 ### Ecosystem logo wall
 
-`components/LogoWall.vue` places two full-width white logo rows between the documentation shortcuts and the closing installation section. The wall is transparent and borderless, allowing the landing page's background and grid to continue through it. Harness and model brands occupy the first row; cloud and compute brands occupy the second. They scroll in opposite directions, pause on hover or row keyboard focus, and have an explicit pause control. Reduced-motion preferences disable animation and leave both rows manually scrollable. Labels and controls use the landing page's English and Chinese copy.
+`components/LogoWall.vue` places two full-width logo rows between the documentation shortcuts and the closing section. The wall is transparent and borderless, allowing the landing page's background and grid to continue through it. Harness and model brands occupy the first row; cloud and compute brands occupy the second. They scroll in opposite directions, pause on hover or row keyboard focus, and have an explicit pause control. Reduced-motion preferences disable animation and leave both rows manually scrollable.
 
-`.vitepress/theme/ecosystem-logos.ts` owns the brand list. These are ecosystem illustrations; supported Harness combinations remain defined by [Model execution](../contracts/agents-api/model-execution.md), and host requirements by [Installation](../docs/getting-started/install.md). Brand artwork does not establish deployment qualification or a partnership.
+`.vitepress/theme/ecosystem-logos.ts` owns the brand list. These are ecosystem illustrations; supported Harness combinations remain defined by [Model execution](../contracts/agents-api/model-execution.md), and host requirements by [Install Core and Web](../docs/getting-started/install.md). Brand artwork does not establish deployment qualification or a partnership.
 
-SVG files are bundled under `.vitepress/theme/assets/logos/` and rendered in white with CSS, preserving their proportions. Their sources are:
+SVG files are bundled under `.vitepress/theme/assets/logos/` and tinted with CSS (dark in the light theme, white in the dark theme), preserving their proportions. Their sources are:
 
 - AI brands, AWS, Azure, Google Cloud, Alibaba Cloud, Tencent Cloud, Huawei Cloud, Volcengine, Baidu AI Cloud and DigitalOcean: [Lobe Icons](https://github.com/lobehub/lobe-icons), from `@lobehub/icons-static-svg` version `1.95.1`, using the matching filename in its `icons/` directory. MIT license: `LICENSE-lobe-icons.txt` beside the assets.
 - Docker: [SVGL's Docker SVG](https://github.com/pheralb/svgl/blob/main/static/library/docker.svg). MIT license: `LICENSE-svgl.txt` beside the assets.
diff --git a/website/index.md b/website/index.md
index 92771439e..bab529dc7 100644
--- a/website/index.md
+++ b/website/index.md
@@ -2,7 +2,6 @@
 layout: page
 title: OpenAgentCore — One core. Many agents.
 titleTemplate: false
-description: An open-source, self-hosted implementation of the OpenAI Agents API with multiple native Harnesses.
 ---
 
 <Landing lang="en" />
diff --git a/website/zh/index.md b/website/zh/index.md
index 05facbf58..775163080 100644
--- a/website/zh/index.md
+++ b/website/zh/index.md
@@ -2,7 +2,6 @@
 layout: page
 title: OpenAgentCore — One core. Many agents.
 titleTemplate: false
-description: OpenAI Agents API 的开源实现，支持多种原生 Harness，可自部署。
 ---
 
 <Landing lang="zh" />