docs: 重构 README 附录展示 & 新增多个附录交互组件

README 更新:
- 移除顶部 header.png 横幅图片
- 新增「附录知识库」板块，以 3×3 网格展示 9 大知识领域精选内容
- 附录链接指向部署版网站 (datawhalechina.github.io)
- 阶段表格新增「附录」行，突出 80+ 交互式专题
- 章节标题「新手入门 & PM」简化为「零基础入门」
- News 新增 2026-02-25 附录知识库更新条目

新增交互组件:
- 异步任务队列 (async-task-queues) 演示组件
- 文件存储 (file-storage) 演示组件
- 项目架构 (project-architecture) 演示组件
- 限流与背压 (rate-limiting) 演示组件
- 搜索引擎 (search-engines) 演示组件
- 计算机基础: AppLaunch/BiosUefi/OSBoot 等启动流程演示组件

新增附录文档:
- 前端项目架构 (frontend-project-architecture.md)
- 后端项目架构 (backend-project-architecture.md)

内容优化:
- 算法思维、数据结构、编程语言、调试艺术等多篇附录内容更新
- HTML/CSS 布局、请求旅程等前后端文档完善
- 附录索引页 (index.md) 同步更新

docs/.vitepress/theme/components/appendix/rate-limiting/BackpressureDemo.vue

@@ -0,0 +1,173 @@
+<!--
+  BackpressureDemo.vue
+  背压控制演示：展示生产者速度 > 消费者速度时的处理策略
+-->
+<template>
+  <div class="backpressure-demo">
+    <div class="header">
+      <div class="title">背压控制 (Backpressure)</div>
+      <div class="subtitle">当生产速度超过消费速度时会发生什么？</div>
+    </div>
+
+    <div class="controls">
+      <div class="speed-control">
+        <span class="ctrl-label">生产速率：</span>
+        <input type="range" min="1" max="10" v-model.number="produceRate" />
+        <span class="ctrl-value">{{ produceRate }}/s</span>
+      </div>
+      <div class="speed-control">
+        <span class="ctrl-label">消费速率：</span>
+        <input type="range" min="1" max="10" v-model.number="consumeRate" />
+        <span class="ctrl-value">{{ consumeRate }}/s</span>
+      </div>
+      <div class="btn-group">
+        <button class="ctrl-btn primary" @click="start" :disabled="running">开始</button>
+        <button class="ctrl-btn" @click="stop">停止</button>
+      </div>
+    </div>
+
+    <div class="buffer-visual">
+      <div class="producer-side">
+        <div class="side-label">生产者</div>
+        <div class="rate-indicator" :class="{ fast: produceRate > consumeRate }">
+          {{ produceRate }}/s
+        </div>
+      </div>
+
+      <div class="buffer-section">
+        <div class="buffer-label">缓冲区 ({{ bufferSize }}/{{ maxBuffer }})</div>
+        <div class="buffer-bar">
+          <div
+            class="buffer-fill"
+            :style="{ width: (bufferSize / maxBuffer * 100) + '%' }"
+            :class="bufferLevel"
+          ></div>
+        </div>
+        <div class="buffer-status" :class="bufferLevel">{{ statusText }}</div>
+      </div>
+
+      <div class="consumer-side">
+        <div class="side-label">消费者</div>
+        <div class="rate-indicator">{{ consumeRate }}/s</div>
+      </div>
+    </div>
+
+    <div class="strategies">
+      <div class="strat-title">背压处理策略：</div>
+      <div class="strat-grid">
+        <div v-for="s in strategies" :key="s.name" class="strat-card">
+          <div class="strat-name">{{ s.name }}</div>
+          <div class="strat-desc">{{ s.desc }}</div>
+          <div class="strat-example">{{ s.example }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onUnmounted } from 'vue'
+
+const produceRate = ref(6)
+const consumeRate = ref(3)
+const bufferSize = ref(0)
+const maxBuffer = 20
+const running = ref(false)
+let timer = null
+
+const bufferLevel = computed(() => {
+  const ratio = bufferSize.value / maxBuffer
+  if (ratio >= 0.9) return 'critical'
+  if (ratio >= 0.6) return 'warning'
+  return 'normal'
+})
+
+const statusText = computed(() => {
+  const ratio = bufferSize.value / maxBuffer
+  if (ratio >= 1) return '缓冲区溢出！数据丢失'
+  if (ratio >= 0.8) return '即将溢出，需要背压控制'
+  if (ratio >= 0.5) return '缓冲区压力较大'
+  return '正常运行'
+})
+
+function start() {
+  running.value = true
+  timer = setInterval(() => {
+    const produced = produceRate.value
+    const consumed = consumeRate.value
+    bufferSize.value = Math.max(0, Math.min(maxBuffer, bufferSize.value + produced - consumed))
+  }, 1000)
+}
+
+function stop() {
+  running.value = false
+  if (timer) clearInterval(timer)
+  timer = null
+  bufferSize.value = 0
+}
+
+const strategies = [
+  { name: '丢弃策略', desc: '缓冲区满时直接丢弃新数据', example: '如：日志采集、实时监控指标' },
+  { name: '阻塞策略', desc: '缓冲区满时让生产者等待', example: '如：Go channel、Java BlockingQueue' },
+  { name: '采样策略', desc: '只处理部分数据，跳过其余', example: '如：高频传感器数据降采样' },
+  { name: '弹性扩容', desc: '动态增加消费者数量', example: '如：K8s HPA 自动扩缩容' }
+]
+
+onUnmounted(() => { if (timer) clearInterval(timer) })
+</script>
+
+<style scoped>
+.backpressure-demo {
+  border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
+  border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
+}
+.header { margin-bottom: 1rem; }
+.title { font-weight: 700; font-size: 1.1rem; }
+.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
+.controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; }
+.speed-control { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
+.ctrl-label { font-weight: 600; min-width: 70px; }
+.ctrl-value { font-family: var(--vp-font-family-mono); min-width: 30px; }
+.btn-group { display: flex; gap: 0.5rem; }
+.ctrl-btn {
+  padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
+}
+.ctrl-btn.primary { background: var(--vp-c-brand); color: #fff; border-color: var(--vp-c-brand); }
+.ctrl-btn:disabled { opacity: 0.5; }
+.buffer-visual { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+.producer-side, .consumer-side { text-align: center; min-width: 80px; }
+.side-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
+.rate-indicator {
+  padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem;
+  background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
+  font-family: var(--vp-font-family-mono);
+}
+.rate-indicator.fast { border-color: #ef4444; color: #ef4444; }
+.buffer-section { flex: 1; }
+.buffer-label { font-size: 0.8rem; color: var(--vp-c-text-2); margin-bottom: 0.25rem; }
+.buffer-bar {
+  height: 24px; background: var(--vp-c-bg); border-radius: 6px;
+  border: 1px solid var(--vp-c-divider); overflow: hidden;
+}
+.buffer-fill { height: 100%; border-radius: 5px; transition: width 0.5s, background 0.3s; }
+.buffer-fill.normal { background: #22c55e; }
+.buffer-fill.warning { background: #f59e0b; }
+.buffer-fill.critical { background: #ef4444; }
+.buffer-status { font-size: 0.8rem; margin-top: 0.25rem; }
+.buffer-status.normal { color: #22c55e; }
+.buffer-status.warning { color: #f59e0b; }
+.buffer-status.critical { color: #ef4444; }
+.strat-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem; }
+.strat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.5rem; }
+.strat-card {
+  padding: 0.75rem; border-radius: 8px; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
+}
+.strat-name { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.25rem; }
+.strat-desc { font-size: 0.8rem; color: var(--vp-c-text-2); margin-bottom: 0.25rem; }
+.strat-example { font-size: 0.75rem; color: var(--vp-c-text-3); }
+@media (max-width: 640px) {
+  .buffer-visual { flex-direction: column; }
+  .strat-grid { grid-template-columns: 1fr; }
+}
+</style>

docs/.vitepress/theme/components/appendix/rate-limiting/RateLimitAlgorithmDemo.vue

@@ -0,0 +1,219 @@
+<!--
+  RateLimitAlgorithmDemo.vue
+  限流算法演示：令牌桶、漏桶、滑动窗口
+-->
+<template>
+  <div class="rate-limit-demo">
+    <div class="header">
+      <div class="title">限流算法对比</div>
+      <div class="subtitle">选择算法，点击"发送请求"观察效果</div>
+    </div>
+
+    <div class="algo-tabs">
+      <button
+        v-for="a in algorithms"
+        :key="a.key"
+        :class="['tab', { active: algo === a.key }]"
+        @click="algo = a.key; reset()"
+      >{{ a.label }}</button>
+    </div>
+
+    <div class="sim-area">
+      <div class="controls">
+        <button class="send-btn" @click="sendRequest">发送请求</button>
+        <button class="burst-btn" @click="burstRequests">突发 10 个请求</button>
+        <button class="reset-btn" @click="reset">重置</button>
+      </div>
+
+      <div class="stats">
+        <div class="stat">
+          <span class="stat-label">通过</span>
+          <span class="stat-value ok">{{ passed }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">拒绝</span>
+          <span class="stat-value reject">{{ rejected }}</span>
+        </div>
+        <div class="stat" v-if="algo === 'token'">
+          <span class="stat-label">剩余令牌</span>
+          <span class="stat-value">{{ tokens }}</span>
+        </div>
+        <div class="stat" v-if="algo === 'leaky'">
+          <span class="stat-label">桶中排队</span>
+          <span class="stat-value">{{ bucketQueue }}</span>
+        </div>
+        <div class="stat" v-if="algo === 'sliding'">
+          <span class="stat-label">窗口内请求</span>
+          <span class="stat-value">{{ windowCount }}</span>
+        </div>
+      </div>
+
+      <div class="log-area">
+        <div
+          v-for="(log, i) in logs.slice(-8)"
+          :key="i"
+          :class="['log-item', log.status]"
+        >
+          <span class="log-time">{{ log.time }}</span>
+          <span>{{ log.msg }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="algo-info">
+      <div class="info-name">{{ currentAlgo.label }}</div>
+      <div class="info-desc">{{ currentAlgo.desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const algo = ref('token')
+const passed = ref(0)
+const rejected = ref(0)
+const tokens = ref(5)
+const bucketQueue = ref(0)
+const windowCount = ref(0)
+const logs = ref([])
+
+const algorithms = [
+  { key: 'token', label: '令牌桶', desc: '以固定速率往桶里放令牌，每个请求消耗一个令牌。桶满时多余令牌丢弃。允许一定程度的突发流量（桶里有存量令牌时）。' },
+  { key: 'leaky', label: '漏桶', desc: '请求先进入桶中排队，以固定速率从桶底"漏出"处理。桶满时新请求被拒绝。输出速率恒定，完全平滑流量。' },
+  { key: 'sliding', label: '滑动窗口', desc: '统计最近 N 秒内的请求数，超过阈值则拒绝。比固定窗口更精确，避免窗口边界的突发问题。' }
+]
+
+const currentAlgo = computed(() => algorithms.find(a => a.key === algo.value))
+
+// Token bucket: refill 1 token per second, max 5
+let tokenTimer = null
+function startTokenRefill() {
+  if (tokenTimer) clearInterval(tokenTimer)
+  tokenTimer = setInterval(() => {
+    if (tokens.value < 5) tokens.value++
+  }, 1000)
+}
+
+// Leaky bucket: drain 1 per second, max queue 5
+let leakyTimer = null
+function startLeakyDrain() {
+  if (leakyTimer) clearInterval(leakyTimer)
+  leakyTimer = setInterval(() => {
+    if (bucketQueue.value > 0) {
+      bucketQueue.value--
+      passed.value++
+      addLog('ok', '漏桶处理了一个排队请求')
+    }
+  }, 1000)
+}
+
+// Sliding window: max 5 per 3 seconds
+const windowRequests = ref([])
+
+function reset() {
+  passed.value = 0
+  rejected.value = 0
+  tokens.value = 5
+  bucketQueue.value = 0
+  windowCount.value = 0
+  logs.value = []
+  windowRequests.value = []
+  if (tokenTimer) clearInterval(tokenTimer)
+  if (leakyTimer) clearInterval(leakyTimer)
+  if (algo.value === 'token') startTokenRefill()
+  if (algo.value === 'leaky') startLeakyDrain()
+}
+
+function addLog(status, msg) {
+  const now = new Date()
+  logs.value.push({ status, msg, time: now.toLocaleTimeString() })
+}
+
+function sendRequest() {
+  if (algo.value === 'token') {
+    if (tokens.value > 0) {
+      tokens.value--
+      passed.value++
+      addLog('ok', `请求通过（剩余令牌: ${tokens.value}）`)
+    } else {
+      rejected.value++
+      addLog('reject', '令牌不足，请求被拒绝 (429)')
+    }
+    if (!tokenTimer) startTokenRefill()
+  } else if (algo.value === 'leaky') {
+    if (bucketQueue.value < 5) {
+      bucketQueue.value++
+      addLog('ok', `请求进入排队（队列: ${bucketQueue.value}/5）`)
+    } else {
+      rejected.value++
+      addLog('reject', '桶已满，请求被拒绝 (429)')
+    }
+    if (!leakyTimer) startLeakyDrain()
+  } else {
+    const now = Date.now()
+    windowRequests.value = windowRequests.value.filter(t => now - t < 3000)
+    windowCount.value = windowRequests.value.length
+    if (windowCount.value < 5) {
+      windowRequests.value.push(now)
+      windowCount.value++
+      passed.value++
+      addLog('ok', `请求通过（窗口内: ${windowCount.value}/5）`)
+    } else {
+      rejected.value++
+      addLog('reject', '窗口内请求数超限 (429)')
+    }
+  }
+}
+
+function burstRequests() {
+  for (let i = 0; i < 10; i++) {
+    setTimeout(() => sendRequest(), i * 80)
+  }
+}
+
+reset()
+</script>
+
+<style scoped>
+.rate-limit-demo {
+  border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
+  border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
+}
+.header { margin-bottom: 1rem; }
+.title { font-weight: 700; font-size: 1.1rem; }
+.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
+.algo-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+.tab {
+  padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
+}
+.tab.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
+.controls { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
+.send-btn, .burst-btn, .reset-btn {
+  padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
+}
+.send-btn { background: var(--vp-c-brand); color: #fff; border-color: var(--vp-c-brand); }
+.burst-btn { background: #f59e0b; color: #fff; border-color: #f59e0b; }
+.stats { display: flex; gap: 1rem; margin-bottom: 0.75rem; }
+.stat { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
+.stat-label { color: var(--vp-c-text-3); }
+.stat-value { font-weight: 700; font-family: var(--vp-font-family-mono); }
+.stat-value.ok { color: #22c55e; }
+.stat-value.reject { color: #ef4444; }
+.log-area { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
+.log-item {
+  padding: 0.3rem 0.5rem; border-radius: 4px; font-size: 0.8rem;
+  background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
+}
+.log-item.ok { border-color: rgba(34,197,94,0.3); }
+.log-item.reject { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.03); }
+.log-time { color: var(--vp-c-text-3); margin-right: 0.5rem; font-family: var(--vp-font-family-mono); }
+.algo-info {
+  margin-top: 1rem; padding: 0.75rem; border-radius: 8px;
+  background: rgba(var(--vp-c-brand-rgb), 0.05); border: 1px solid var(--vp-c-brand);
+}
+.info-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
+.info-desc { font-size: 0.85rem; color: var(--vp-c-text-2); line-height: 1.6; }
+</style>

docs/.vitepress/theme/components/appendix/rate-limiting/RateLimiterDemo.vue

@@ -0,0 +1,204 @@
+<!--
+  RateLimiterDemo.vue
+  限流算法演示：令牌桶 vs 滑动窗口
+-->
+<template>
+  <div class="rate-limiter-demo">
+    <div class="header">
+      <div class="title">限流算法可视化</div>
+      <div class="subtitle">选择算法，点击发送请求观察限流效果</div>
+    </div>
+
+    <div class="algo-tabs">
+      <button
+        v-for="a in algorithms"
+        :key="a.key"
+        :class="['tab', { active: algo === a.key }]"
+        @click="algo = a.key; reset()"
+      >{{ a.label }}</button>
+    </div>
+
+    <div class="sim-area">
+      <div class="controls">
+        <button class="send-btn" @click="sendRequest">发送请求</button>
+        <button class="burst-btn" @click="sendBurst">模拟突发 (10个)</button>
+        <button class="reset-btn" @click="reset">重置</button>
+      </div>
+
+      <div class="stats">
+        <div class="stat">
+          <span class="stat-label">已发送</span>
+          <span class="stat-value">{{ totalSent }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">通过</span>
+          <span class="stat-value pass">{{ passed }}</span>
+        </div>
+        <div class="stat">
+          <span class="stat-label">拒绝</span>
+          <span class="stat-value reject">{{ rejected }}</span>
+        </div>
+        <div class="stat" v-if="algo === 'token'">
+          <span class="stat-label">剩余令牌</span>
+          <span class="stat-value">{{ tokens }}</span>
+        </div>
+      </div>
+
+      <div class="request-log">
+        <div
+          v-for="(req, i) in recentRequests"
+          :key="i"
+          :class="['req-item', req.status]"
+        >
+          <span>{{ req.status === 'pass' ? '✅' : '❌' }}</span>
+          <span>请求 #{{ req.id }}</span>
+          <span class="req-time">{{ req.time }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="algo-info">
+      <div class="info-name">{{ currentAlgo.label }}</div>
+      <div class="info-desc">{{ currentAlgo.desc }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const algo = ref('token')
+const totalSent = ref(0)
+const passed = ref(0)
+const rejected = ref(0)
+const tokens = ref(5)
+const recentRequests = ref([])
+
+const algorithms = [
+  { key: 'token', label: '令牌桶', desc: '以固定速率往桶里放令牌，每个请求消耗一个令牌。桶满时多余令牌丢弃。允许一定程度的突发流量（桶里有存量令牌时）。' },
+  { key: 'sliding', label: '滑动窗口', desc: '在一个滑动的时间窗口内统计请求数，超过阈值则拒绝。比固定窗口更平滑，避免窗口边界的突发问题。' },
+  { key: 'leaky', label: '漏桶', desc: '请求先进入桶中排队，以固定速率流出处理。无论请求多快到达，处理速率恒定。适合需要严格匀速的场景。' }
+]
+
+const currentAlgo = computed(() => algorithms.find(a => a.key === algo.value))
+
+// Sliding window state
+const windowRequests = ref([])
+const WINDOW_SIZE = 3000 // 3s window
+const WINDOW_LIMIT = 5
+
+// Token bucket refill
+let tokenInterval = null
+
+function startTokenRefill() {
+  if (tokenInterval) clearInterval(tokenInterval)
+  tokenInterval = setInterval(() => {
+    if (tokens.value < 5) tokens.value++
+  }, 1000)
+}
+
+function reset() {
+  totalSent.value = 0
+  passed.value = 0
+  rejected.value = 0
+  tokens.value = 5
+  recentRequests.value = []
+  windowRequests.value = []
+  if (tokenInterval) clearInterval(tokenInterval)
+  startTokenRefill()
+}
+
+function checkLimit() {
+  if (algo.value === 'token') {
+    if (tokens.value > 0) { tokens.value--; return true }
+    return false
+  }
+  if (algo.value === 'sliding') {
+    const now = Date.now()
+    windowRequests.value = windowRequests.value.filter(t => now - t < WINDOW_SIZE)
+    if (windowRequests.value.length < WINDOW_LIMIT) {
+      windowRequests.value.push(now)
+      return true
+    }
+    return false
+  }
+  // leaky bucket: simple counter-based
+  if (algo.value === 'leaky') {
+    const now = Date.now()
+    windowRequests.value = windowRequests.value.filter(t => now - t < 2000)
+    if (windowRequests.value.length < 3) {
+      windowRequests.value.push(now)
+      return true
+    }
+    return false
+  }
+  return true
+}
+
+function sendRequest() {
+  totalSent.value++
+  const allowed = checkLimit()
+  if (allowed) passed.value++
+  else rejected.value++
+
+  const now = new Date()
+  recentRequests.value.unshift({
+    id: totalSent.value,
+    status: allowed ? 'pass' : 'reject',
+    time: `${now.getHours()}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`
+  })
+  if (recentRequests.value.length > 10) recentRequests.value.pop()
+}
+
+async function sendBurst() {
+  for (let i = 0; i < 10; i++) {
+    sendRequest()
+    await new Promise(r => setTimeout(r, 100))
+  }
+}
+
+startTokenRefill()
+</script>
+
+<style scoped>
+.rate-limiter-demo {
+  border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
+  border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
+}
+.header { margin-bottom: 1rem; }
+.title { font-weight: 700; font-size: 1.1rem; }
+.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
+.algo-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
+.tab {
+  padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
+}
+.tab.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
+.controls { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
+.send-btn, .burst-btn, .reset-btn {
+  padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
+}
+.send-btn { background: var(--vp-c-brand); color: #fff; border-color: var(--vp-c-brand); }
+.burst-btn { background: #f59e0b; color: #fff; border-color: #f59e0b; }
+.stats { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
+.stat { display: flex; flex-direction: column; align-items: center; }
+.stat-label { font-size: 0.75rem; color: var(--vp-c-text-3); }
+.stat-value { font-weight: 700; font-size: 1.2rem; font-family: var(--vp-font-family-mono); }
+.stat-value.pass { color: #22c55e; }
+.stat-value.reject { color: #ef4444; }
+.request-log { display: flex; flex-direction: column; gap: 0.25rem; max-height: 200px; overflow-y: auto; margin-bottom: 1rem; }
+.req-item {
+  display: flex; gap: 0.5rem; padding: 0.3rem 0.5rem; border-radius: 4px;
+  font-size: 0.8rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider);
+}
+.req-item.reject { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.03); }
+.req-item.pass { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.03); }
+.req-time { margin-left: auto; color: var(--vp-c-text-3); font-family: var(--vp-font-family-mono); }
+.algo-info {
+  padding: 0.75rem; border-radius: 8px;
+  background: rgba(var(--vp-c-brand-rgb), 0.05); border: 1px solid var(--vp-c-brand);
+}
+.info-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; }
+.info-desc { font-size: 0.85rem; color: var(--vp-c-text-2); line-height: 1.6; }
+</style>