test-repo/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompleteAdderDemo.vue

<template>
  <div class="complete-adder-demo">
    <div class="demo-header">
      <span class="title">完整加法器演示</span>
      <span class="subtitle">从逻辑门到多位加法 ── 层层抽象，逐级封装</span>
    </div>

    <div class="layer-tabs">
      <button
        v-for="layer in layers"
        :key="layer.id"
        class="layer-tab"
        :class="{ active: currentLayer === layer.id }"
        @click="currentLayer = layer.id"
      >
        {{ layer.name }}
      </button>
    </div>

    <div v-if="currentLayer === 'gates'" class="layer-panel">
      <div class="panel-title">第一层：逻辑门</div>
      <div class="panel-desc">最基础的运算单元，每个门执行一种布尔运算</div>

      <div class="terms-box">
        <div class="term-item">
          <span class="term-name">AND (与门)</span>
          <span class="term-desc">全 1 为 1</span>
        </div>
        <div class="term-item">
          <span class="term-name">OR (或门)</span>
          <span class="term-desc">有 1 为 1</span>
        </div>
        <div class="term-item">
          <span class="term-name">XOR (异或门)</span>
          <span class="term-desc">不同为 1</span>
        </div>
      </div>

      <div class="gates-showcase">
        <div
          v-for="gate in gates"
          :key="gate.name"
          class="gate-demo"
          :class="{ active: gateActive === gate.name }"
          @click="gateActive = gate.name"
        >
          <div class="gate-symbol">{{ gate.symbol }}</div>
          <div class="gate-info">
            <span class="gate-name">{{ gate.name }} ({{ gate.cn }})</span>
            <span class="gate-formula">{{ gate.formula }}</span>
          </div>
          <div class="gate-mini-truth">
            <span
              v-for="(r, i) in gate.truth"
              :key="i"
              class="truth-dot"
              :class="{ one: r }"
              >{{ r }}</span>
          </div>
        </div>
      </div>

      <div class="info-box">
        <strong>核心思想：</strong>
        逻辑门把电压高低（0/1）变成布尔运算（真/假），是硬件实现数学的起点。
      </div>
    </div>

    <div v-if="currentLayer === 'half'" class="layer-panel">
      <div class="panel-title">第二层：半加器</div>
      <div class="panel-desc">
        用 XOR + AND 组合，实现 1 位加法（无进位输入）
      </div>

      <div class="terms-box">
        <div class="term-item">
          <span class="term-name">本位 (Sum)</span>
          <span class="term-desc">当前位的计算结果，不考虑外部进位</span>
        </div>
        <div class="term-item">
          <span class="term-name">进位 (Carry)</span>
          <span class="term-desc">当两位都是 1 时，向更高位"借位"</span>
        </div>
      </div>

      <div class="circuit-container">
        <div class="inputs">
          <div class="input-line">
            <button class="toggle-btn" :class="{ on: haA }" @click="haA = !haA">
              {{ haA ? '1' : '0' }}
            </button>
            <span class="label">输入 A</span>
          </div>
          <div class="input-line">
            <button class="toggle-btn" :class="{ on: haB }" @click="haB = !haB">
              {{ haB ? '1' : '0' }}
            </button>
            <span class="label">输入 B</span>
          </div>
        </div>

        <div class="wires">
          <svg class="wire-svg" viewBox="0 0 80 120" preserveAspectRatio="none">
            <path
              d="M 0,30 C 40,30 40,35 80,35"
              fill="none"
              :stroke="haA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,30 L 20,30 L 20,85 L 80,85"
              fill="none"
              :stroke="haA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,90 C 40,90 40,55 80,55"
              fill="none"
              :stroke="haB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,90 L 30,90 L 30,105 L 80,105"
              fill="none"
              :stroke="haB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <circle
              cx="20"
              cy="30"
              r="3"
              :fill="haA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
            />
            <circle
              cx="30"
              cy="90"
              r="3"
              :fill="haB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
            />
          </svg>
        </div>

        <div class="gates">
          <div class="gate-box" :class="{ active: haSum }">
            <div class="gate-header">
              <span class="gate-name">XOR</span>
              <span class="gate-cn">异或门</span>
            </div>
            <div class="gate-formula">A XOR B</div>
            <div class="gate-desc">不同为 1 → 本位</div>
          </div>
          <div class="gate-box" :class="{ active: haCarry }">
            <div class="gate-header">
              <span class="gate-name">AND</span>
              <span class="gate-cn">与门</span>
            </div>
            <div class="gate-formula">A AND B</div>
            <div class="gate-desc">全 1 为 1 → 进位</div>
          </div>
        </div>

        <div class="wires outputs-wires">
          <svg class="wire-svg" viewBox="0 0 40 120" preserveAspectRatio="none">
            <line
              x1="0"
              y1="45"
              x2="40"
              y2="45"
              :stroke="
                haSum ? 'var(--vp-c-green-1, #16a34a)' : 'var(--vp-c-text-3)'
              "
              stroke-width="2"
            />
            <line
              x1="0"
              y1="95"
              x2="40"
              y2="95"
              :stroke="haCarry ? '#d97706' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
          </svg>
        </div>

        <div class="outputs">
          <div class="output-line" :class="{ active: haSum }">
            <span class="label">本位</span>
            <span class="out-val s-val">{{ haSum ? '1' : '0' }}</span>
          </div>
          <div class="output-line" :class="{ active: haCarry }">
            <span class="label">进位</span>
            <span class="out-val c-val">{{ haCarry ? '1' : '0' }}</span>
          </div>
        </div>
      </div>

      <div class="calculation-box">
        <div class="calc-title">计算过程</div>
        <div class="calc-content">
          <div class="calc-row">
            <span class="calc-label">输入：</span>
            <span class="calc-value">A = {{ haA ? '1' : '0' }}，B = {{ haB ? '1' : '0' }}</span>
          </div>
          <div class="calc-row">
            <span class="calc-label">本位：</span>
            <span class="calc-formula">A XOR B = {{ haA ? '1' : '0' }} XOR {{ haB ? '1' : '0' }} =
              <strong>{{ haSum ? '1' : '0' }}</strong></span>
            <span class="calc-reason">（{{ haA !== haB ? '不同' : '相同' }}）</span>
          </div>
          <div class="calc-row">
            <span class="calc-label">进位：</span>
            <span class="calc-formula">A AND B = {{ haA ? '1' : '0' }} AND {{ haB ? '1' : '0' }} =
              <strong>{{ haCarry ? '1' : '0' }}</strong></span>
            <span class="calc-reason">（{{ haA && haB ? '全为 1' : '不全为 1' }}）</span>
          </div>
        </div>
      </div>

      <div class="info-box">
        <strong>核心思想：</strong>
        半加器用 XOR 算"本位和"，用 AND
        算"进位"。它是最小的加法单元，但无法处理来自低位的进位。
      </div>
    </div>

    <div v-if="currentLayer === 'full'" class="layer-panel">
      <div class="panel-title">第三层：全加器</div>
      <div class="panel-desc">用两个半加器 + OR 门，处理进位输入</div>

      <div class="terms-box">
        <div class="term-item">
          <span class="term-name">Cin (进位输入)</span>
          <span class="term-desc">来自低位的进位信号</span>
        </div>
        <div class="term-item">
          <span class="term-name">Sum (本位)</span>
          <span class="term-desc">三位异或的结果</span>
        </div>
        <div class="term-item">
          <span class="term-name">Cout (进位输出)</span>
          <span class="term-desc">向高位的进位信号</span>
        </div>
      </div>

      <div class="circuit-container">
        <div class="inputs">
          <div class="input-line">
            <button class="toggle-btn" :class="{ on: faA }" @click="faA = !faA">
              {{ faA ? '1' : '0' }}
            </button>
            <span class="label">A</span>
          </div>
          <div class="input-line">
            <button class="toggle-btn" :class="{ on: faB }" @click="faB = !faB">
              {{ faB ? '1' : '0' }}
            </button>
            <span class="label">B</span>
          </div>
          <div class="input-line">
            <button
              class="toggle-btn cin-btn"
              :class="{ on: faCin }"
              @click="faCin = !faCin"
            >
              {{ faCin ? '1' : '0' }}
            </button>
            <span class="label">Cin</span>
          </div>
        </div>

        <div class="wires">
          <svg
            class="wire-svg"
            viewBox="0 0 100 160"
            preserveAspectRatio="none"
          >
            <path
              d="M 0,30 C 30,30 30,40 60,40"
              fill="none"
              :stroke="faA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,30 L 15,30 L 15,100 L 60,100"
              fill="none"
              :stroke="faA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,80 C 30,80 30,55 60,55"
              fill="none"
              :stroke="faB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,80 L 25,80 L 25,115 L 60,115"
              fill="none"
              :stroke="faB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <path
              d="M 0,130 C 30,130 30,130 60,130"
              fill="none"
              :stroke="faCin ? '#d97706' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
            <circle
              cx="15"
              cy="30"
              r="3"
              :fill="faA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
            />
            <circle
              cx="25"
              cy="80"
              r="3"
              :fill="faB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
            />
          </svg>
        </div>

        <div class="gates-grid">
          <div class="gate-box sm" :class="{ active: faXor1 }">
            <span class="gate-name">XOR</span>
            <span class="gate-out">{{ faXor1 ? '1' : '0' }}</span>
          </div>
          <div class="gate-box sm" :class="{ active: faCarry1 }">
            <span class="gate-name">AND</span>
            <span class="gate-out">{{ faCarry1 ? '1' : '0' }}</span>
          </div>
          <div class="gate-box sm" :class="{ active: faSum }">
            <span class="gate-name">XOR</span>
            <span class="gate-out">{{ faSum ? '1' : '0' }}</span>
          </div>
          <div class="gate-box sm" :class="{ active: faCarryOut }">
            <span class="gate-name">OR</span>
            <span class="gate-out">{{ faCarryOut ? '1' : '0' }}</span>
          </div>
        </div>

        <div class="wires outputs-wires">
          <svg class="wire-svg" viewBox="0 0 40 160" preserveAspectRatio="none">
            <line
              x1="0"
              y1="48"
              x2="40"
              y2="48"
              :stroke="
                faSum ? 'var(--vp-c-green-1, #16a34a)' : 'var(--vp-c-text-3)'
              "
              stroke-width="2"
            />
            <line
              x1="0"
              y1="115"
              x2="40"
              y2="115"
              :stroke="faCarryOut ? '#d97706' : 'var(--vp-c-text-3)'"
              stroke-width="2"
            />
          </svg>
        </div>

        <div class="outputs">
          <div class="output-line" :class="{ active: faSum }">
            <span class="label">Sum</span>
            <span class="out-val s-val">{{ faSum ? '1' : '0' }}</span>
          </div>
          <div class="output-line" :class="{ active: faCarryOut }">
            <span class="label">Cout</span>
            <span class="out-val c-val">{{ faCarryOut ? '1' : '0' }}</span>
          </div>
        </div>
      </div>

      <div class="calculation-box">
        <div class="calc-title">计算过程</div>
        <div class="calc-content">
          <div class="calc-row">
            <span class="calc-label">输入：</span>
            <span class="calc-value">A={{ faA ? '1' : '0' }} B={{ faB ? '1' : '0' }} Cin={{
                faCin ? '1' : '0'
              }}</span>
          </div>
          <div class="calc-row">
            <span class="calc-label">中间：</span>
            <span class="calc-formula">中间值 = A XOR B = <strong>{{ faXor1 ? '1' : '0' }}</strong></span>
          </div>
          <div class="calc-row">
            <span class="calc-label">本位：</span>
            <span class="calc-formula">本位 = 中间值 XOR Cin = <strong>{{ faSum ? '1' : '0' }}</strong></span>
          </div>
          <div class="calc-row">
            <span class="calc-label">进位：</span>
            <span class="calc-formula">进位 = (A AND B) OR (中间值 AND Cin) =
              <strong>{{ faCarryOut ? '1' : '0' }}</strong></span>
          </div>
        </div>
      </div>

      <div class="info-box">
        <strong>核心思想：</strong>
        全加器 = 两个半加器 + 一个 OR
        门。它能处理来自低位的进位，是构建多位加法器的基础。
      </div>
    </div>

    <div v-if="currentLayer === 'multi'" class="layer-panel">
      <div class="panel-title">第四层：4 位加法器</div>
      <div class="panel-desc">4 个全加器级联，实现 0-15 范围的加法</div>

      <div class="terms-box">
        <div class="term-item">
          <span class="term-name">级联</span>
          <span class="term-desc">低位 Cout 连接高位 Cin</span>
        </div>
        <div class="term-item">
          <span class="term-name">行波</span>
          <span class="term-desc">进位像波浪一样逐位传递</span>
        </div>
        <div class="term-item">
          <span class="term-name">溢出</span>
          <span class="term-desc">最高位产生进位</span>
        </div>
      </div>

      <div class="multi-control">
        <label class="multi-input">
          <span>A =</span>
          <input v-model.number="multiA" type="number" min="0" max="15" />
        </label>
        <span class="multi-op">+</span>
        <label class="multi-input">
          <span>B =</span>
          <input v-model.number="multiB" type="number" min="0" max="15" />
        </label>
        <span class="multi-op">=</span>
        <span class="multi-result">{{ multiResult }}</span>
        <span v-if="multiOverflow" class="multi-overflow">溢出</span>
      </div>

      <div class="multi-binary">
        <div class="multi-row">
          <span class="multi-label">A:</span>
          <span class="multi-bits">{{ multiBitsA }}</span>
        </div>
        <div class="multi-row">
          <span class="multi-label">B:</span>
          <span class="multi-bits">{{ multiBitsB }}</span>
        </div>
        <div class="multi-row result">
          <span class="multi-label">=:</span>
          <span class="multi-bits">{{ multiBitsSum }}</span>
        </div>
      </div>

      <div class="multi-chain">
        <div
          v-for="(s, i) in multiStages"
          :key="i"
          class="multi-stage"
          :class="{ highlight: multiHover === i }"
          @mouseenter="multiHover = i"
          @mouseleave="multiHover = null"
        >
          <span class="multi-stage-bit">位{{ i }}</span>
          <span class="multi-stage-io">{{ s.a }}+{{ s.b }}<span v-if="i > 0">+{{ s.cin }}</span></span>
          <span class="multi-stage-out">={{ s.sum }}<span v-if="s.cout">C</span></span>
        </div>
      </div>

      <div class="calculation-box">
        <div class="calc-title">计算过程</div>
        <div class="calc-content">
          <div class="calc-row">
            <span class="calc-label">输入：</span>
            <span class="calc-value">A = {{ clampedMultiA }} ({{ multiBitsA }})，B =
              {{ clampedMultiB }} ({{ multiBitsB }})</span>
          </div>
          <div class="calc-row">
            <span class="calc-label">过程：</span>
            <span class="calc-formula">从第 0 位开始，逐位计算本位和进位，进位向高位传递</span>
          </div>
          <div class="calc-row">
            <span class="calc-label">结果：</span>
            <span class="calc-formula">{{ multiBitsSum }} = <strong>{{ multiResult }}</strong>{{ multiOverflow ? ' (溢出)' : '' }}</span>
          </div>
        </div>
      </div>

      <div class="info-box">
        <strong>核心思想：</strong>
        进位从最低位"波纹式"传递到最高位，这就是"行波进位加法器"。位数越多，延迟越大。
      </div>
    </div>

    <div class="summary-box">
      <div class="summary-title">抽象层级总结</div>
      <div class="summary-flow">
        <div class="summary-item">
          <span class="summary-icon">◇</span>
          <span class="summary-name">逻辑门</span>
        </div>
        <span class="summary-arrow">→</span>
        <div class="summary-item">
          <span class="summary-icon">⊞</span>
          <span class="summary-name">半加器</span>
        </div>
        <span class="summary-arrow">→</span>
        <div class="summary-item">
          <span class="summary-icon">⊞⊞</span>
          <span class="summary-name">全加器</span>
        </div>
        <span class="summary-arrow">→</span>
        <div class="summary-item">
          <span class="summary-icon">🔲</span>
          <span class="summary-name">多位加法器</span>
        </div>
        <span class="summary-arrow">→</span>
        <div class="summary-item">
          <span class="summary-icon">🧠</span>
          <span class="summary-name">ALU/CPU</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const currentLayer = ref('gates')
const gateActive = ref('XOR')

const layers = [
  { id: 'gates', name: '逻辑门' },
  { id: 'half', name: '半加器' },
  { id: 'full', name: '全加器' },
  { id: 'multi', name: '多位加法' }
]

const gates = [
  {
    name: 'AND',
    cn: '与门',
    symbol: '&',
    formula: 'A AND B',
    truth: [0, 0, 0, 1]
  },
  {
    name: 'OR',
    cn: '或门',
    symbol: '≥1',
    formula: 'A OR B',
    truth: [0, 1, 1, 1]
  },
  {
    name: 'XOR',
    cn: '异或门',
    symbol: '=1',
    formula: 'A XOR B',
    truth: [0, 1, 1, 0]
  },
  { name: 'NOT', cn: '非门', symbol: '1', formula: '¬A', truth: [1, 0] }
]

const haA = ref(false)
const haB = ref(true)
const haSum = computed(() => haA.value !== haB.value)
const haCarry = computed(() => haA.value && haB.value)

const faA = ref(true)
const faB = ref(true)
const faCin = ref(false)
const faXor1 = computed(() => faA.value !== faB.value)
const faCarry1 = computed(() => faA.value && faB.value)
const faCarry2 = computed(() => faXor1.value && faCin.value)
const faSum = computed(() => faXor1.value !== faCin.value)
const faCarryOut = computed(() => faCarry1.value || faCarry2.value)

const multiA = ref(7)
const multiB = ref(6)
const multiHover = ref(null)

function clampMulti(n) {
  const v = Number(n)
  if (Number.isNaN(v)) return 0
  return Math.max(0, Math.min(15, Math.floor(v)))
}

const clampedMultiA = computed(() => clampMulti(multiA.value))
const clampedMultiB = computed(() => clampMulti(multiB.value))

const multiBitsA = computed(() =>
  clampedMultiA.value.toString(2).padStart(4, '0')
)
const multiBitsB = computed(() =>
  clampedMultiB.value.toString(2).padStart(4, '0')
)

const multiStages = computed(() => {
  const A = clampedMultiA.value
  const B = clampedMultiB.value
  const result = []
  let cin = 0
  for (let i = 0; i < 4; i++) {
    const a = (A >> i) & 1
    const b = (B >> i) & 1
    const xor1 = a ^ b
    const sum = xor1 ^ cin
    const cout = (a & b) | (cin & xor1)
    result.push({ a, b, cin: i > 0 ? cin : null, sum, cout })
    cin = cout
  }
  return result
})

const multiBitsSum = computed(() => {
  const S = multiStages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
  return S.toString(2).padStart(4, '0')
})

const multiResult = computed(() =>
  multiStages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
)

const multiOverflow = computed(() => multiStages.value[3]?.cout === 1)
</script>

<style scoped>
.complete-adder-demo {
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  background: var(--vp-c-bg-soft);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
}

.demo-header {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.75rem;
}

.title {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--vp-c-text-1);
}

.subtitle {
  font-size: 0.75rem;
  color: var(--vp-c-text-3);
}

.layer-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.layer-tab {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-2);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}

.layer-tab.active {
  background: var(--vp-c-brand-1);
  color: white;
  border-color: var(--vp-c-brand-1);
}

.layer-panel {
  background: var(--vp-c-bg);
  border-radius: 6px;
  padding: 0.75rem;
}

.panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
  margin-bottom: 0.2rem;
}

.panel-desc {
  font-size: 0.72rem;
  color: var(--vp-c-text-3);
  margin-bottom: 0.6rem;
}

.terms-box {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: var(--vp-c-bg-alt);
  border-radius: 6px;
}

.term-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.term-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--vp-c-brand-1);
}

.term-desc {
  font-size: 0.68rem;
  color: var(--vp-c-text-3);
  line-height: 1.3;
}

.gates-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.gate-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  background: var(--vp-c-bg-alt);
  cursor: pointer;
  transition: all 0.15s;
}

.gate-demo.active {
  border-color: var(--vp-c-brand-1);
  box-shadow: 0 0 0 1px var(--vp-c-brand-soft);
}

.gate-symbol {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--vp-c-brand-1);
  margin-bottom: 0.2rem;
}

.gate-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin-bottom: 0.3rem;
}

.gate-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
}

.gate-formula {
  font-size: 0.68rem;
  color: var(--vp-c-text-3);
  font-family: 'JetBrains Mono', monospace;
}

.gate-mini-truth {
  display: flex;
  gap: 0.15rem;
}

.truth-dot {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--vp-c-bg);
  color: var(--vp-c-text-3);
}

.truth-dot.one {
  background: var(--vp-c-brand-soft);
  color: var(--vp-c-brand-1);
}

.circuit-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.75rem;
  overflow-x: auto;
}

.inputs,
.outputs {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 5rem;
  z-index: 2;
}

.outputs {
  min-width: 4.5rem;
}

.input-line,
.output-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.label {
  font-size: 0.78rem;
  color: var(--vp-c-text-1);
}

.toggle-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  font-weight: bold;
  font-family: monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.on {
  background: var(--vp-c-brand-soft);
  color: var(--vp-c-brand-1);
  border-color: var(--vp-c-brand-1);
}

.toggle-btn.cin-btn.on {
  background: #fef3c7;
  color: #d97706;
  border-color: #d97706;
}

.out-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  font-weight: bold;
  font-family: monospace;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.output-line.active .s-val {
  background: #dcfce7;
  color: #16a34a;
  border-color: #16a34a;
}

.output-line.active .c-val {
  background: #fef3c7;
  color: #d97706;
  border-color: #d97706;
}

.wires {
  width: 60px;
  height: 120px;
  position: relative;
}

.wires.outputs-wires {
  width: 30px;
}

.wire-svg {
  width: 100%;
  height: 100%;
}

.gates {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 2;
}

.gates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  z-index: 2;
}

.gate-box {
  width: 6rem;
  height: 3.5rem;
  background: var(--vp-c-bg-alt);
  border: 2px solid var(--vp-c-divider);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.gate-box.sm {
  width: 4rem;
  height: 2.5rem;
}

.gate-box.active {
  border-color: var(--vp-c-brand-1);
  box-shadow: 0 0 8px var(--vp-c-brand-soft);
}

.gate-header {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.gate-name {
  font-weight: bold;
  font-size: 0.85rem;
  color: var(--vp-c-text-1);
}

.gate-box.sm .gate-name {
  font-size: 0.75rem;
}

.gate-cn {
  font-size: 0.65rem;
  color: var(--vp-c-text-3);
}

.gate-formula {
  font-size: 0.7rem;
  color: var(--vp-c-brand-1);
  font-family: 'JetBrains Mono', monospace;
}

.gate-desc {
  font-size: 0.6rem;
  color: var(--vp-c-text-3);
  margin-top: 0.1rem;
}

.gate-out {
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  color: var(--vp-c-brand-1);
  font-weight: 600;
}

.calculation-box {
  margin-top: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: var(--vp-c-bg-alt);
  border-radius: 6px;
}

.calc-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--vp-c-text-2);
  margin-bottom: 0.3rem;
}

.calc-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.calc-row {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-size: 0.72rem;
}

.calc-label {
  color: var(--vp-c-text-3);
  min-width: 3rem;
}

.calc-formula {
  font-family: 'JetBrains Mono', monospace;
  color: var(--vp-c-text-1);
}

.calc-formula strong {
  color: var(--vp-c-brand-1);
}

.calc-reason {
  color: var(--vp-c-text-3);
  font-size: 0.68rem;
}

.multi-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.multi-input {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--vp-c-text-2);
}

.multi-input input {
  width: 2.5rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--vp-c-bg-alt);
  color: var(--vp-c-text-1);
}

.multi-op {
  font-weight: bold;
  color: var(--vp-c-text-3);
}

.multi-result {
  font-weight: bold;
  color: var(--vp-c-brand-1);
  font-size: 1rem;
}

.multi-overflow {
  font-size: 0.6rem;
  padding: 0.1rem 0.3rem;
  background: #fef3c7;
  color: #d97706;
  border-radius: 3px;
}

.multi-binary {
  background: var(--vp-c-bg-alt);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
}

.multi-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-family: 'JetBrains Mono', monospace;
}

.multi-row.result {
  color: var(--vp-c-green-1, #16a34a);
  font-weight: 600;
}

.multi-label {
  color: var(--vp-c-text-3);
  min-width: 1.5rem;
}

.multi-bits {
  letter-spacing: 0.15rem;
}

.multi-chain {
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin-bottom: 0.5rem;
}

.multi-stage {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 4px;
  background: var(--vp-c-bg);
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s;
}

.multi-stage.highlight {
  border-color: var(--vp-c-brand-1);
  background: var(--vp-c-brand-soft);
}

.multi-stage-bit {
  font-weight: 600;
  color: var(--vp-c-text-2);
  margin-bottom: 0.1rem;
}

.multi-stage-io {
  color: var(--vp-c-text-3);
  font-family: 'JetBrains Mono', monospace;
}

.multi-stage-out {
  color: var(--vp-c-brand-1);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

.info-box {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.7rem;
  background: var(--vp-c-bg-alt);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--vp-c-text-2);
  line-height: 1.4;
}

.info-box strong {
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--vp-c-text-1);
}

.summary-box {
  margin-top: 0.75rem;
  padding: 0.5rem 0.7rem;
  background: var(--vp-c-bg-alt);
  border-radius: 6px;
}

.summary-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--vp-c-text-2);
  margin-bottom: 0.4rem;
}

.summary-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  background: var(--vp-c-bg);
}

.summary-icon {
  font-size: 0.9rem;
}

.summary-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--vp-c-text-1);
}

.summary-arrow {
  color: var(--vp-c-text-3);
  font-size: 0.8rem;
}

@media (max-width: 600px) {
  .gates-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
  .circuit-container {
    transform: scale(0.8);
    transform-origin: left top;
  }
  .terms-box {
    flex-direction: column;
  }
}
</style>