Video Spec Builder

.DS_Store
node_modules/
skills-lock.json
.agents/

/* ================================================================
   app.jsx — composition root
   ================================================================ */

const { useState, useEffect, useRef } = React;

const SECTIONS = [
  { id: 'foundation', num: '00', name: '视觉地基', Comp: () => <FoundationSection /> },
  { id: 'aroll',      num: '01', name: 'A-roll',  Comp: () => <ARollSection /> },
  { id: 'structure',  num: '02', name: '结构图',  Comp: () => <StructureSection /> },
  { id: 'ui',         num: '03', name: '仿真 UI', Comp: () => <FakeUISection /> },
  { id: 'hero',       num: '04', name: '重锤',    Comp: () => <HeroSection /> },
  { id: 'abstract',   num: '05', name: '抽象兜底', Comp: () => <AbstractSection /> },
  { id: 'charts',     num: '06', name: '数据图表', Comp: () => <ChartsSection /> },
  { id: 'flows',      num: '07', name: '流程图',   Comp: () => <FlowsSection /> },
  { id: 'structures2',num: '08', name: '关系结构', Comp: () => <Structures2Section /> },
  { id: 'thinking',   num: '09', name: '结构化思考', Comp: () => <ThinkingSection /> },
  { id: 'illustrations', num: '10', name: '插画',  Comp: () => <IllustrationsSection /> },
];

/* ---------- Tweaks defaults ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FFFFFF",
  "density": "comfortable",
  "showDeco": true
}/*EDITMODE-END*/;

/* ---------- side nav ---------- */
function Nav({ active }) {
  return (
    <nav className="nav">
      {SECTIONS.map(s => (
        <a key={s.id} href={`#${s.id}`}
           className={`nav__item ${active === s.id ? 'is-active' : ''}`}>
          {s.num} · <span className="cn">{s.name}</span>
        </a>
      ))}
    </nav>
  );
}

/* ---------- hero ---------- */
function Hero() {
  return (
    <header className="hero">
      <div className="hero__left">
        <div className="hero__brand">VIDEO / COMPONENT LIBRARY / v2.0 — SPACE × GROK × X</div>
        <h1 className="hero__title">
          A SYSTEM<br/>FOR <span className="hero__accent">VIDEO</span><span style={{ color: 'var(--accent)' }}>.</span>
        </h1>
        <div className="hero__sub cn">
          为 AI 教程视频量身打造 · <span style={{ color: 'var(--accent)' }}>极简 / 几何 / 单色</span> · 上镜可读 · 单 accent 可调
        </div>
      </div>
      <div className="hero__meta">
        <div><span>FRAME</span><b>3840 × 2160</b></div>
        <div><span>RATIO</span><b>16 / 9</b></div>
        <div><span>STACK</span><b>SPACE GROTESK · BARLOW · MONO</b></div>
        <div><span>WEIGHTS</span><b>400 / 600 / 700</b></div>
        <div><span>BUILD</span><b>2026.05 · v2</b></div>
        <div><span>T-MINUS</span><b style={{ color: 'var(--accent)' }}>LIVE</b></div>
      </div>
    </header>
  );
}

/* ---------- section frame ---------- */
function Section({ id, num, title, desc, children }) {
  return (
    <section className="section" id={id} data-screen-label={`${num} ${title}`}>
      <div className="section__num"><span>SECTION {num}</span></div>
      <h2 className="section__title cn">{title}</h2>
      <p className="section__desc cn" dangerouslySetInnerHTML={{ __html: desc }} />
      {children}
    </section>
  );
}

function SubSec({ name, tag, children }) {
  return (
    <div className="subsec">
      <div className="subsec__head">
        <div className="subsec__name cn">{name}</div>
        <div className="subsec__tag">{tag}</div>
      </div>
      {children}
    </div>
  );
}

/* ---------- params table ---------- */
function Params({ rows }) {
  return (
    <div className="params">
      {rows.map((r, i) => (
        <div className="param" key={i}>
          <div className="param__k">{r.k}</div>
          <div className="param__v" dangerouslySetInnerHTML={{ __html: r.v }} />
        </div>
      ))}
    </div>
  );
}

/* ---------- stage ---------- */
function Stage({ pattern = 'plain', label, labelR, labelB, labelBR, children, style }) {
  return (
    <div className={`stage ${pattern === 'dot' ? 'stage--dotgrid' : pattern === 'graph' ? 'stage--graph' : ''}`} style={style}>
      {label && <div className="stage__corner">{label}</div>}
      {labelR && <div className="stage__corner stage__corner--r">{labelR}</div>}
      {labelB && <div className="stage__corner stage__corner--b">{labelB}</div>}
      {labelBR && <div className="stage__corner stage__corner--br">{labelBR}</div>}
      {children}
    </div>
  );
}

/* ---------- App ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState('foundation');

  // apply accent
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  // active section observer
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-40% 0px -50% 0px' });
    SECTIONS.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);

  return (
    <div className="shell">
      <Nav active={active} />
      <Hero />
      {SECTIONS.map(s => (
        <s.Comp key={s.id} />
      ))}
      <footer className="outro">
        <div className="outro__copy">
          PURE BLACK.<br/>
          PURE GEOMETRY.<br/>
          <span style={{ color: 'var(--accent)' }}>PURE SIGNAL.</span>
        </div>
        <div className="outro__meta">
          <div>v2 · 2026.05</div>
          <div>FOR YOUTUBE · 4K · 16:9</div>
          <div style={{ marginTop: 14, color: 'var(--accent)' }}>END / TRANSMISSION</div>
        </div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakColor
            label="主色"
            value={t.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#FFFFFF', '#FF6B3D', '#1D9BF0', '#E8C547', '#00E0FF', '#FF3333']}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakToggle
            label="装饰元素（角标·tick·grid）"
            value={t.showDeco}
            onChange={(v) => setTweak('showDeco', v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

/* expose for inter-script use */
Object.assign(window, { Section, SubSec, Params, Stage });

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

/* ================================================================
   sections/aroll.jsx — 01 · A-roll 出镜讲解（v3.1 编辑感升级）
   "克制" 版：hairline + 字号悬崖 + 0 阴影 + ornament 而非装饰
   ================================================================ */

function ARollSection() {
  return (
    <Section
      id="aroll"
      num="01"
      title="A-roll · 出镜讲解"
      desc="出镜时叠在画面上的三大件：<b>字幕高亮</b>、<b>关键词贴纸</b>、<b>概念卡</b>。<em>每个组件只做一件事</em> —— 不堆装饰、不加阴影、不层叠卡片。"
    >
      <SubtitleHighlight />
      <KeywordSticker />
      <ConceptCard />
    </Section>
  );
}

/* ---------- 字幕高亮 ---------- */
function SubtitleHighlight() {
  const tokens = ['让我们聊聊', '上下文', '工程', '不是', '提示词', '魔法'];
  const highlighted = [1, 2, 4];
  const [active, setActive] = React.useState(2);
  React.useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % tokens.length), 900);
    return () => clearInterval(id);
  }, []);

  return (
    <SubSec name="A · 字幕高亮 · Subtitle Highlight" tag="SPOKEN-WORD CAPTIONS">
      <Stage pattern="dot" label="● A-ROLL · LIVE" labelR="01.A">
        {/* 左上：讲者标签 */}
        <div style={{ position: 'absolute', top: '8%', left: '6%', display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="dot-pulse" />
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>SPEAKER · LIVE</span>
        </div>
        {/* 右上：时间码 */}
        <div className="mono" style={{ position: 'absolute', top: '8%', right: '6%', fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>
          00:14:22 · CC ON
        </div>

        {/* 字幕主体 */}
        <div style={{
          position: 'absolute', left: '8%', right: '8%', bottom: '14%',
          display: 'flex', flexWrap: 'wrap', gap: '0 18px',
          fontSize: 'clamp(28px, 4.4vw, 56px)', fontWeight: 800,
          letterSpacing: '-0.018em', lineHeight: 1.1,
        }}>
          {tokens.map((tk, i) => {
            const isHot = highlighted.includes(i) && i === active;
            const isPast = highlighted.includes(i) && i < active;
            return (
              <span key={i} className="cn" style={{
                color: isHot ? 'var(--accent)' : isPast ? 'var(--fg)' : 'var(--fg-3)',
                position: 'relative',
                transition: 'color 280ms var(--ease-out)',
              }}>
                {tk}
                {isHot && (
                  <span style={{
                    position: 'absolute', left: 0, right: 0, bottom: '-12px',
                    height: 3, background: 'var(--accent)',
                    animation: 'lineIn 280ms var(--ease-out) forwards',
                    transformOrigin: 'left',
                  }} />
                )}
              </span>
            );
          })}
        </div>

        {/* 底部 hairline */}
        <div style={{ position: 'absolute', bottom: '8%', left: '8%', right: '8%', display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>EN / CN</span>
          <span style={{ flex: 1, height: 1, background: 'var(--line)' }} />
          <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>3 / 6 WORDS HOT</span>
        </div>

        <style>{`@keyframes lineIn { from { transform: scaleX(0) } to { transform: scaleX(1) } }`}</style>
      </Stage>

      <Params rows={[
        { k: 'FONT',     v: '思源黑体 800 · clamp 28-56px' },
        { k: 'COLOR',    v: '默认 fg-3 · 念到 accent · 念过 fg' },
        { k: 'ACCENT',   v: '<b>仅 3px 底线</b> · 无底色块 · scaleX in' },
        { k: 'CHROME',   v: '左讲者 · 右时码 · 底 hairline + 计数' },
        { k: 'POSITION', v: '下 14% · 左右 8% padding' },
      ]} />
    </SubSec>
  );
}

/* ---------- 关键词贴纸 ---------- */
function KeywordSticker() {
  const items = [
    { txt: 'Context',          en: true,  pos: { top: '20%', left: '8%' },   tilt: -1.5 },
    { txt: '不是魔法',          en: false, pos: { top: '34%', right: '12%' }, tilt: 1 },
    { txt: '✱ Engineering',    en: true,  pos: { top: '62%', left: '14%' },  tilt: -0.5 },
  ];
  const [shown, setShown] = React.useState([0]);
  React.useEffect(() => {
    const id = setInterval(() => {
      setShown(s => {
        const next = (s[s.length - 1] + 1) % items.length;
        if (s.length >= items.length) return [next];
        return [...s, next];
      });
    }, 1100);
    return () => clearInterval(id);
  }, []);

  return (
    <SubSec name="B · 关键词贴纸 · Keyword Sticker" tag="POP-IN LABELS">
      <Stage pattern="dot" label="● A-ROLL · STICKER" labelR="01.B">
        {/* 左上 eyebrow */}
        <div className="mono" style={{ position: 'absolute', top: '8%', left: '6%', fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)' }}>● KEYWORDS · 3</div>

        {items.map((it, i) => {
          if (!shown.includes(i)) return null;
          const isLast = shown[shown.length - 1] === i;
          return (
            <div key={i} className={it.en ? '' : 'cn'} style={{
              position: 'absolute', ...it.pos,
              padding: '14px 22px',
              background: isLast ? 'var(--fg)' : 'var(--bg-card)',
              color: isLast ? 'var(--bg)' : 'var(--fg)',
              border: isLast ? 'none' : '1px solid var(--line-2)',
              fontFamily: it.en ? 'var(--f-sans)' : 'var(--f-cn)',
              fontWeight: it.en ? 600 : 700,
              fontSize: 22, letterSpacing: it.en ? '-0.005em' : '0.01em',
              borderRadius: 6,
              animation: `stickIn 320ms var(--ease-spring) forwards`,
              transform: `rotate(${it.tilt}deg)`,
              transformOrigin: it.pos.left ? 'left center' : 'right center',
            }}>{it.txt}</div>
          );
        })}

        {/* 右下：scrollback meta */}
        <div className="mono" style={{ position: 'absolute', bottom: '8%', right: '6%', fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>
          DUR · 320ms · SPRING
        </div>

        <style>{`
          @keyframes stickIn {
            from { opacity: 0; transform: scale(0.92) rotate(-1.5deg); }
            to   { opacity: 1; transform: scale(1) rotate(0); }
          }
        `}</style>
      </Stage>

      <Params rows={[
        { k: 'BG',       v: '反白 fg / 卡 bg-card · 二选一' },
        { k: 'BORDER',   v: '1px line-2 · 或无' },
        { k: 'PADDING',  v: '14 / 22px' },
        { k: 'RADIUS',   v: '6px · tilt ±1.5°' },
        { k: 'ENTER',    v: 'scale .92→1 + tilt 1.5°→0 · 320ms spring' },
        { k: 'RULE',     v: '<b>同屏 ≤ 3 个 · 至少 200px 间距</b>' },
      ]} />
    </SubSec>
  );
}

/* ---------- 概念卡 · 升级版 ---------- */
function ConceptCard() {
  return (
    <SubSec name="C · 概念卡 · Concept Card" tag="EXPLAINER CARD · REFINED">
      <Stage pattern="dot" label="● A-ROLL · CARD" labelR="01.C">

        {/* 左侧：模拟讲者侧 / 空白 — 让卡片"贴右" */}
        <div className="mono" style={{ position: 'absolute', top: '14%', left: '6%', fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>
          ← SPEAKER FRAME
        </div>

        {/* 概念卡主体 */}
        <div style={{
          position: 'absolute', top: '12%', right: '6%',
          width: '50%',
        }}>
          {/* 头部：编号 + 时间码 */}
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)' }}>● CONCEPT</span>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>02 / 12</span>
            </div>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>00:14:22</span>
          </div>

          {/* 主卡片 */}
          <div className="frame" style={{
            background: 'var(--bg-card)',
            border: '1px solid var(--line)',
            borderRadius: 8,
            padding: '32px 36px',
            position: 'relative',
          }}>
            <Crosses />
            {/* 标题 */}
            <div className="cn" style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.015em', lineHeight: 1.12, marginBottom: 14 }}>
              Context 是<span style={{ color: 'var(--accent)' }}>材料</span>，
              <br />不是<span className="serif" style={{ fontWeight: 400, fontStyle: 'italic', color: 'var(--fg-2)' }}>提示</span>。
            </div>
            {/* 分隔 */}
            <div style={{ width: 28, height: 2, background: 'var(--accent)', marginBottom: 14 }} />
            {/* 正文 */}
            <div className="cn" style={{ fontSize: 16, fontWeight: 400, color: 'var(--fg-2)', lineHeight: 1.65 }}>
              把"足够相关"的资料喂给模型，比把"足够聪明"的提示给模型更有效。
            </div>
            {/* 底部：来源 */}
            <div style={{ marginTop: 22, paddingTop: 14, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>REF · ANTHROPIC ENG BLOG</span>
              <span className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--fg-3)' }}>HOLD · 4S</span>
            </div>
          </div>
        </div>
      </Stage>

      {/* 用法说明 */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, marginBottom: 16 }}>
        <UseCase label="01 · USE WHEN" body="抛出一个名词的<em>新定义</em>，需要在画面驻留 3-5s" />
        <UseCase label="02 · DON'T" body="不要叠加 glow / 阴影 / 渐变 · 不要双卡同屏" />
        <UseCase label="03 · ENTER" body="opacity 0→1 + y 12→0 · 700ms ease-out · 出场反向" />
      </div>

      <Params rows={[
        { k: 'BG',       v: 'var(--bg-card) #111114' },
        { k: 'BORDER',   v: '1px hairline + 4× 角十字针脚' },
        { k: 'RADIUS',   v: '8px' },
        { k: 'PADDING',  v: '32 / 36px · 宽度 50% 画面' },
        { k: 'TYPE',     v: 'mono 11 caps · cn 38/800 · cn 16/400 · 一字 serif italic' },
        { k: 'RULE',     v: '一卡只讲一个概念 · 不超过 3 行正文' },
        { k: 'SHADOW',   v: '<b>0</b> · 强调靠换色与字号悬崖' },
        { k: 'ENTER',    v: '700ms ease-out · 卡 + 角标错峰 80ms' },
      ]} />
    </SubSec>
  );
}

/* ---------- helpers ---------- */
function Crosses() {
  return (
    <>
      <span className="cross cross--tl" />
      <span className="cross cross--tr" />
      <span className="cross cross--bl" />
      <span className="cross cross--br" />
    </>
  );
}

function UseCase({ label, body }) {
  return (
    <div style={{
      background: 'var(--bg-card)', border: '1px solid var(--line)',
      borderRadius: 8, padding: '18px 20px',
    }}>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', marginBottom: 10 }}>{label}</div>
      <div className="cn" style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.6 }} dangerouslySetInnerHTML={{ __html: body.replace(/<em>(.*?)<\/em>/g, '<em style="color:var(--accent);font-style:normal">$1</em>') }} />
    </div>
  );
}

Object.assign(window, { ARollSection });

/* ================================================================
   sections/broll-abstract.jsx — 05 · B-roll · 抽象兜底
   讲 AI 时多数概念没有具象图标 —— 这里是"以形会意"的通用版式
   ================================================================ */

function AbstractSection() {
  return (
    <Section id="abstract" num="05" title="B-roll · 抽象兜底"
      desc="当概念<em>没有具象图标</em>可用时的通用版式 —— <b>类比</b>、<b>黑盒</b>、<b>等式</b>、<b>光谱</b>、<b>冰山</b>、<b>对照</b>、<b>占位</b>。这是讲 AI 时最常用的一类，因为<em>抽象概念远多于具象图标</em>。">
      <Analogy />
      <BlackBox />
      <Equation />
      <AbstractSpectrum />
      <Iceberg />
      <Versus />
      <Placeholder />
    </Section>
  );
}

/* ---------- A · Analogy ---------- */
function Analogy() {
  return (
    <SubSec name="类比框 · Analogy" tag="UNFAMILIAR ≈ FAMILIAR">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.A">
        <div style={{ position: 'absolute', inset: '16% 6%', display: 'grid', gridTemplateColumns: '1fr 80px 1fr', alignItems: 'center', gap: 0 }}>
          <AnalogyCard side="未知" tone="accent" big="RAG" sub="检索增强生成 · 模型 + 外挂资料库" />
          <div style={{ textAlign: 'center' }}>
            <div className="serif" style={{ fontSize: 76, color: 'var(--accent)', lineHeight: 1 }}>≈</div>
            <div className="meta" style={{ marginTop: 6 }}>就像</div>
          </div>
          <AnalogyCard side="熟悉" big="开卷考试" sub="不用背 · 翻书查 · 临场组织答案" />
        </div>
      </Stage>
      <Params rows={[
        { k: 'LAYOUT', v: '左 = 未知 · 右 = 熟悉' },
        { k: 'CONNECTOR', v: '≈ · Instrument Serif italic · 76px · accent' },
        { k: 'SUB-LABEL', v: '"就像" 在 ≈ 下方做语义提示' },
        { k: 'CARDS', v: '完全对称 hairline 卡 · 左卡 accent 标签强化区分' },
      ]} />
    </SubSec>
  );
}
function AnalogyCard({ side, tone, big, sub }) {
  return (
    <div style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 8, padding: '36px 36px', position: 'relative' }}>
      <Bracket size={18} color="var(--line-3)" thick={1} />
      <div className="meta" style={{ color: tone === 'accent' ? 'var(--accent)' : 'var(--fg-3)', marginBottom: 18 }}>{side}</div>
      <div className="cn" style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.018em', lineHeight: 1, marginBottom: 14 }}>{big}</div>
      <div className="cn" style={{ fontSize: 26, color: 'var(--fg-2)', lineHeight: 1.5 }}>{sub}</div>
    </div>
  );
}

/* ---------- B · Black Box ---------- */
function BlackBox() {
  return (
    <SubSec name="黑盒图 · Black Box" tag="INPUT → ? → OUTPUT">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.B">
        <div style={{ position: 'absolute', inset: '24% 6%', display: 'grid', gridTemplateColumns: '1fr 56px 1.5fr 56px 1fr', alignItems: 'center', gap: 0 }}>
          <Slot label="INPUT" cn="提示词" />
          <Arrow />
          <div style={{ position: 'relative', background: 'var(--bg-card)', border: '1px dashed var(--accent)', borderRadius: 8, padding: '36px 32px', textAlign: 'center' }}>
            <Bracket size={14} color="var(--accent)" thick={1} />
            <div className="meta" style={{ color: 'var(--accent)', marginBottom: 14 }}>BLACK BOX</div>
            <div className="big-num" style={{ fontSize: 84, color: 'var(--accent)', lineHeight: 0.85 }}>?</div>
            <div className="cn" style={{ fontSize: 26, color: 'var(--fg-2)', marginTop: 14 }}>175B 参数 · 不可解释</div>
          </div>
          <Arrow />
          <Slot label="OUTPUT" cn="回答" />
        </div>
      </Stage>
      <Params rows={[
        { k: 'BOX', v: 'dashed accent 描边（区别 hairline）+ 四角 bracket' },
        { k: '?', v: '84px · big-num · accent' },
        { k: 'USE', v: '讲"内部不可知"型概念' },
        { k: 'ARROW', v: 'hairline + 锐角三角 · line-3' },
      ]} />
    </SubSec>
  );
}
function Slot({ label, cn }) {
  return (
    <div style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 8, padding: '30px 32px', textAlign: 'center' }}>
      <div className="meta" style={{ marginBottom: 12 }}>{label}</div>
      <div className="cn" style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.012em' }}>{cn}</div>
    </div>
  );
}
function Arrow() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ height: 1, flex: 1, background: 'var(--line-3)' }} />
      <div style={{ width: 0, height: 0, borderLeft: '8px solid var(--line-3)', borderTop: '5px solid transparent', borderBottom: '5px solid transparent' }} />
    </div>
  );
}

/* ---------- C · Equation ---------- */
function Equation() {
  return (
    <SubSec name="概念等式 · Concept Equation" tag="A + B = C">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.C">
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24, padding: '0 6%' }}>
          <EqBox big="模型" sub="reasoning" />
          <EqOp ch="+" />
          <EqBox big="资料" sub="context" accent />
          <EqOp ch="=" />
          <EqBox big="可靠回答" sub="output" />
        </div>
        {/* 顶部细注释线，提升"教科书等式"感 */}
        <div style={{ position: 'absolute', top: '22%', left: '6%', right: '6%', display: 'flex', alignItems: 'center' }}>
          <span className="meta" style={{ color: 'var(--fg-3)' }}>EQ · 概念组合</span>
          <span style={{ flex: 1, height: 1, background: 'var(--line)', marginLeft: 12 }} />
        </div>
      </Stage>
      <Params rows={[
        { k: 'LAYOUT', v: '横向居中 · 等距' },
        { k: 'OPERATOR', v: 'serif italic · 56px · accent' },
        { k: 'EMPHASIS', v: '关键项 accent 边框' },
        { k: 'HEADER', v: '顶部 EQ · hairline 注释栏（教科书味）' },
      ]} />
    </SubSec>
  );
}
function EqBox({ big, sub, accent }) {
  return (
    <div style={{ background: 'var(--bg-card)', border: `1px solid ${accent ? 'var(--accent)' : 'var(--line)'}`, borderRadius: 8, padding: '30px 36px', textAlign: 'center', minWidth: 160 }}>
      <div className="cn" style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.012em', marginBottom: 8 }}>{big}</div>
      <div className="meta" style={{ color: accent ? 'var(--accent)' : 'var(--fg-3)' }}>{sub}</div>
    </div>
  );
}
function EqOp({ ch }) {
  return <div className="serif" style={{ fontSize: 56, color: 'var(--accent)', lineHeight: 1 }}>{ch}</div>;
}

/* ---------- D · Spectrum ---------- */
function AbstractSpectrum() {
  return (
    <SubSec name="光谱 · Spectrum" tag="ONE AXIS · TWO POLES">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.D">
        <div style={{ position: 'absolute', inset: '24% 8%', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 18 }}>
          {/* 左右极标签 */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div>
              <div className="meta" style={{ marginBottom: 6 }}>左极</div>
              <div className="cn" style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.012em' }}>纯背诵</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="meta" style={{ marginBottom: 6, color: 'var(--accent)' }}>右极</div>
              <div className="cn" style={{ fontSize: 34, fontWeight: 800, letterSpacing: '-0.012em' }}>纯检索</div>
            </div>
          </div>
          {/* 轴 */}
          <div style={{ position: 'relative', height: 24, display: 'flex', alignItems: 'center' }}>
            {/* ticks */}
            <div style={{ position: 'absolute', inset: 0, display: 'flex', justifyContent: 'space-between' }}>
              {Array.from({ length: 11 }).map((_, i) => (
                <span key={i} style={{ width: 1, height: i % 5 === 0 ? 12 : 6, background: 'var(--line-3)', alignSelf: 'flex-end' }} />
              ))}
            </div>
            {/* main rule */}
            <div style={{ position: 'absolute', left: 0, right: 0, height: 1, background: 'var(--fg-3)', bottom: 0 }} />
            {/* marker */}
            <div style={{ position: 'absolute', left: '68%', bottom: -8, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
              <span className="meta" style={{ color: 'var(--accent)', whiteSpace: 'nowrap' }}>RAG · 0.68</span>
              <div style={{ width: 0, height: 0, borderLeft: '7px solid transparent', borderRight: '7px solid transparent', borderTop: '10px solid var(--accent)' }} />
            </div>
          </div>
          {/* legend */}
          <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--fg-3)', marginTop: 28 }}>
            <span className="cn" style={{ fontSize: 18 }}>fine-tuning</span>
            <span className="cn" style={{ fontSize: 18 }}>vector search</span>
          </div>
        </div>
      </Stage>
      <Params rows={[
        { k: 'AXIS', v: '0 – 1 · 11 个 tick · 5n 主刻度' },
        { k: 'MARKER', v: '倒三角 · accent · 上方 mono 标签' },
        { k: 'POLES', v: '左 fg · 右 accent meta · 强调右极' },
        { k: 'USE', v: '"X 在 A 和 B 之间偏哪边" 类概念' },
      ]} />
    </SubSec>
  );
}

/* ---------- E · Iceberg ---------- */
function Iceberg() {
  return (
    <SubSec name="冰山 · Iceberg" tag="VISIBLE / HIDDEN">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.E">
        <div style={{ position: 'absolute', inset: '12% 8%', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'stretch' }}>
          {/* 左侧 SVG 冰山 */}
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 200 200" width="100%" style={{ maxWidth: 320 }}>
              {/* 水面线 */}
              <line x1="0" y1="80" x2="200" y2="80" stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 3" />
              <text x="2" y="76" fontSize="6" fill="var(--accent)" fontFamily="var(--f-mono)" letterSpacing="1">— WATERLINE</text>
              {/* 上半（可见） */}
              <polygon points="100,30 130,80 70,80" fill="none" stroke="var(--fg)" strokeWidth="1.2" />
              {/* 下半（隐藏） */}
              <polygon points="55,80 145,80 165,160 130,185 70,185 35,160" fill="rgba(255,255,255,0.04)" stroke="var(--fg-3)" strokeWidth="1" strokeDasharray="2 3" />
              {/* 指引线 */}
              <line x1="120" y1="55" x2="185" y2="40" stroke="var(--fg-3)" strokeWidth="0.6" />
              <line x1="135" y1="140" x2="190" y2="155" stroke="var(--fg-3)" strokeWidth="0.6" />
              <circle cx="120" cy="55" r="1.2" fill="var(--fg)" />
              <circle cx="135" cy="140" r="1.2" fill="var(--fg-3)" />
            </svg>
          </div>
          {/* 右侧文字标注 */}
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 28 }}>
            <div>
              <div className="meta" style={{ color: 'var(--accent)', marginBottom: 10 }}>● 可见 · 10%</div>
              <div className="cn" style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.012em', marginBottom: 8 }}>对话界面</div>
              <div className="cn" style={{ fontSize: 22, color: 'var(--fg-2)', lineHeight: 1.5 }}>你看到的输入框和回答</div>
            </div>
            <div style={{ height: 1, background: 'var(--line)' }} />
            <div>
              <div className="meta" style={{ marginBottom: 10 }}>○ 隐藏 · 90%</div>
              <div className="cn" style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.012em', marginBottom: 8, color: 'var(--fg-2)' }}>权重 · 训练数据 · RLHF · 推理基建</div>
              <div className="cn" style={{ fontSize: 22, color: 'var(--fg-3)', lineHeight: 1.5 }}>真正决定回答质量的部分</div>
            </div>
          </div>
        </div>
      </Stage>
      <Params rows={[
        { k: 'WATERLINE', v: 'accent 虚线 + WATERLINE 标签' },
        { k: 'ABOVE', v: '实线 · 10% 标注 · accent' },
        { k: 'BELOW', v: '虚线 + 轻填充 · 90% · 灰阶' },
        { k: 'USE', v: '"看得见 / 看不见" 比例悬殊型概念' },
      ]} />
    </SubSec>
  );
}

/* ---------- F · Versus ---------- */
function Versus() {
  return (
    <SubSec name="对照 · Versus" tag="A vs B · DELTA">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.F">
        <div style={{ position: 'absolute', inset: '14% 8%', display: 'grid', gridTemplateColumns: '1fr 100px 1fr', alignItems: 'stretch', gap: 0 }}>
          <VsCard side="A" big="预训练" rows={[
            { k: '数据', v: '海量公开语料' },
            { k: '时长', v: '数月 · 数千卡' },
            { k: '产出', v: '通用基础模型' },
          ]} />
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
            <div style={{ height: '100%', width: 1, background: 'var(--line)', position: 'absolute', top: 0 }} />
            <div className="serif" style={{ fontSize: 56, color: 'var(--accent)', background: 'var(--bg)', padding: '4px 12px', position: 'relative', zIndex: 1 }}>vs</div>
          </div>
          <VsCard side="B" accent big="微调" rows={[
            { k: '数据', v: '少量任务数据' },
            { k: '时长', v: '小时 · 单卡' },
            { k: '产出', v: '专业化变体' },
          ]} />
        </div>
      </Stage>
      <Params rows={[
        { k: 'LAYOUT', v: '左右等宽 · 中竖线 + vs serif' },
        { k: 'ROWS', v: '同序键值 · 行行对齐（方便逐行对比）' },
        { k: 'SIDE LABEL', v: '左 fg-3 · 右 accent · A / B' },
        { k: 'USE', v: '两个方案 / 两种概念逐项对比' },
      ]} />
    </SubSec>
  );
}
function VsCard({ side, accent, big, rows }) {
  return (
    <div style={{ background: 'var(--bg-card)', border: `1px solid ${accent ? 'var(--accent)' : 'var(--line)'}`, borderRadius: 8, padding: '28px 32px' }}>
      <div className="meta" style={{ color: accent ? 'var(--accent)' : 'var(--fg-3)', marginBottom: 14 }}>{side}</div>
      <div className="cn" style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.012em', marginBottom: 18 }}>{big}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {rows.map(r => (
          <div key={r.k} style={{ display: 'grid', gridTemplateColumns: '70px 1fr', gap: 16, alignItems: 'baseline', paddingBottom: 8, borderBottom: '1px solid var(--line)' }}>
            <span className="meta">{r.k}</span>
            <span className="cn" style={{ fontSize: 22, color: 'var(--fg-2)' }}>{r.v}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- G · Placeholder ---------- */
function Placeholder() {
  return (
    <SubSec name="占位框 · Placeholder" tag="WHEN YOU LACK AN ASSET">
      <Stage pattern="dot" label="● B-ROLL" labelR="05.G">
        <div style={{ position: 'absolute', inset: '18% 18%', background: 'transparent', border: '1px solid var(--line-2)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', backgroundImage: 'repeating-linear-gradient(-45deg, transparent 0, transparent 14px, rgba(255,255,255,0.04) 14px, rgba(255,255,255,0.04) 15px)', position: 'relative' }}>
          <Bracket size={20} color="var(--line-3)" thick={1} />
          <div className="meta" style={{ color: 'var(--accent)', marginBottom: 14 }}>[ DROP HERE ]</div>
          <div className="cn" style={{ fontSize: 38, fontWeight: 800, letterSpacing: '-0.012em' }}>GPT-4 屏幕录像</div>
          <div className="mono" style={{ fontSize: 22, color: 'var(--fg-3)', marginTop: 10 }}>1920 × 1080 · ≤ 8s · prores</div>
        </div>
      </Stage>
      <Params rows={[
        { k: 'BG', v: '45° 斜条纹（4% 白）' },
        { k: 'BORDER', v: '1px line-2 + 四角 bracket' },
        { k: 'LABEL', v: '[ DROP HERE ] mono caps · accent' },
        { k: 'SPEC', v: '尺寸 · 时长 · 编码格式' },
      ]} />
    </SubSec>
  );
}

Object.assign(window, { AbstractSection });

/* ================================================================
   sections/broll-charts.jsx — 06 · A 类 · 数据图表 12 款
   line / multi-line / bar / hbar / stacked / area / donut /
   scatter / heatmap / gauge / sparkline / sankey
   ================================================================ */

function ChartsSection() {
  return (
    <Section id="charts" num="06" title="B-roll · 数据图表"
      desc="讲<b>数字 · 趋势 · 占比 · 流量</b>时用。所有图共用一套渲染语法：<em>hairline 坐标轴 · mono 数字 · 单 accent 高亮关键点</em>。每屏最多 1 个主信息 + 2-3 个数据点。">
      <LineChart /><MultiLine /><BarChart /><HBarChart />
      <StackedBar /><AreaChart /><Donut /><Scatter />
      <Heatmap /><Gauge /><Sparkline /><Sankey />
    </Section>
  );
}

/* ── shared axis ── */
function Axis({ xLabels, yMax = 100, yStep = 25, padX = 80, padY = 60, w = 1000, h = 500 }) {
  const ys = [];
  for (let v = 0; v <= yMax; v += yStep) ys.push(v);
  const innerH = h - padY * 2;
  const innerW = w - padX * 2;
  return (
    <g>
      {/* y grid + labels */}
      {ys.map(v => {
        const y = h - padY - (v / yMax) * innerH;
        return (
          <g key={v}>
            <line x1={padX} x2={w - padX} y1={y} y2={y} stroke="rgba(255,255,255,.06)" strokeWidth="1" />
            <text x={padX - 14} y={y + 6} textAnchor="end" fontSize="16" fontFamily="var(--f-mono)" fill="rgba(255,255,255,.42)">{v}</text>
          </g>
        );
      })}
      {/* x labels */}
      {xLabels.map((l, i) => {
        const x = padX + (i / (xLabels.length - 1)) * innerW;
        return <text key={i} x={x} y={h - padY + 30} textAnchor="middle" fontSize="16" fontFamily="var(--f-mono)" letterSpacing="0.08em" fill="rgba(255,255,255,.42)">{l}</text>;
      })}
    </g>
  );
}

/* ── A1 · 折线图 ── */
function LineChart() {
  const pts = [12, 28, 22, 45, 38, 62, 78, 71, 88];
  const labels = ['W1','W2','W3','W4','W5','W6','W7','W8','W9'];
  const padX = 80, padY = 60, w = 1000, h = 500;
  const innerW = w - padX * 2, innerH = h - padY * 2;
  const path = pts.map((v, i) => `${i === 0 ? 'M' : 'L'} ${padX + (i / (pts.length - 1)) * innerW} ${h - padY - (v / 100) * innerH}`).join(' ');
  return (
    <SubSec name="A1 · 折线图 · Line Chart" tag="TREND OVER TIME">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A1">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>WEEKLY · ACTIVE USERS</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>9 周增长 +633%</div>
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <Axis xLabels={labels} />
          <path d={path} fill="none" stroke="var(--accent)" strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" />
          {pts.map((v, i) => {
            const x = padX + (i / (pts.length - 1)) * innerW;
            const y = h - padY - (v / 100) * innerH;
            const last = i === pts.length - 1;
            return <g key={i}>
              <circle cx={x} cy={y} r={last ? 8 : 4} fill={last ? 'var(--accent)' : 'var(--bg)'} stroke="var(--accent)" strokeWidth="2" />
              {last && <text x={x + 16} y={y + 6} fontSize="20" fontWeight="800" fontFamily="var(--f-mono)" fill="var(--accent)">{v}</text>}
            </g>;
          })}
        </svg>
      </Stage>
      <Params rows={[
        { k: 'AXIS', v: '1px rgba(255,255,255,.06) hairline' },
        { k: 'LINE', v: '3px accent · round join' },
        { k: 'POINT', v: '4px (常规) · 8px (端点高亮)' },
        { k: 'LABEL', v: '末端标数字 + mono 字体' },
      ]} />
    </SubSec>
  );
}

/* ── A2 · 多线对比 ── */
function MultiLine() {
  const series = [
    { name: 'GPT-4',     data: [22, 38, 45, 58, 64, 71, 78, 82, 86], color: 'var(--accent)' },
    { name: 'Claude 3.5', data: [18, 32, 41, 52, 60, 68, 74, 79, 83], color: 'rgba(255,255,255,.7)' },
    { name: 'Gemini',    data: [15, 24, 30, 38, 44, 50, 55, 58, 62], color: 'rgba(255,255,255,.35)' },
  ];
  const labels = ['1','2','3','4','5','6','7','8','9'];
  const padX = 80, padY = 60, w = 1000, h = 500;
  const innerW = w - padX * 2, innerH = h - padY * 2;
  return (
    <SubSec name="A2 · 多线对比 · Multi-line" tag="MODEL COMPARISON">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A2">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>BENCHMARK · MMLU SCORE</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>三家模型 9 月成绩</div>
        </div>
        <div style={{ position: 'absolute', top: '8%', right: '6%', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {series.map(s => (
            <div key={s.name} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 18, height: 3, background: s.color }} />
              <span className="mono" style={{ fontSize: 16, color: s.color }}>{s.name}</span>
            </div>
          ))}
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <Axis xLabels={labels} />
          {series.map((s, si) => {
            const path = s.data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${padX + (i / (s.data.length - 1)) * innerW} ${h - padY - (v / 100) * innerH}`).join(' ');
            return <path key={si} d={path} fill="none" stroke={s.color} strokeWidth={si === 0 ? 3 : 2} strokeLinejoin="round" />;
          })}
        </svg>
      </Stage>
      <Params rows={[
        { k: 'HIERARCHY', v: '主线 accent 3px · 次线 70% 白 2px · 三线 35% 白 2px' },
        { k: 'LEGEND', v: '右上角 · 18px 横杠 + mono 名' },
        { k: 'RULE', v: '<b>最多 3 条线</b> · 4 条以上拆图' },
      ]} />
    </SubSec>
  );
}

/* ── A3 · 柱形图 ── */
function BarChart() {
  const data = [
    { l: 'JAN', v: 38 }, { l: 'FEB', v: 52 }, { l: 'MAR', v: 41 },
    { l: 'APR', v: 67 }, { l: 'MAY', v: 84 }, { l: 'JUN', v: 72 },
  ];
  const max = 100;
  return (
    <SubSec name="A3 · 柱形图 · Bar Chart" tag="DISCRETE QUANTITIES">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A3">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>MONTHLY · API CALLS (M)</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>5 月峰值 84M</div>
        </div>
        <div style={{ position: 'absolute', inset: '34% 8% 14% 8%', display: 'flex', alignItems: 'flex-end', gap: 24 }}>
          {data.map((d, i) => {
            const hot = d.v === Math.max(...data.map(x => x.v));
            return (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%' }}>
                <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: hot ? 'var(--accent)' : 'var(--fg-2)', marginBottom: 8 }}>{d.v}</div>
                <div style={{ width: '100%', flex: 1, display: 'flex', alignItems: 'flex-end' }}>
                  <div style={{ width: '100%', height: `${(d.v / max) * 100}%`, background: hot ? 'var(--accent)' : 'rgba(255,255,255,.18)', borderRadius: '2px 2px 0 0' }} />
                </div>
                <div className="meta" style={{ marginTop: 14, color: hot ? 'var(--accent)' : 'var(--fg-3)' }}>{d.l}</div>
              </div>
            );
          })}
        </div>
      </Stage>
      <Params rows={[
        { k: 'BAR', v: '默认 18% 白 · 峰值 accent' },
        { k: 'GAP', v: '24px · 不超过柱宽 50%' },
        { k: 'VALUE', v: '柱顶 mono · 峰值字色 accent' },
        { k: 'RADIUS', v: '顶部 2px (柔化)' },
      ]} />
    </SubSec>
  );
}

/* ── A4 · 横向条形 ── */
function HBarChart() {
  const data = [
    { l: 'GitHub Copilot', v: 92 },
    { l: 'ChatGPT',        v: 88 },
    { l: 'Cursor',         v: 74 },
    { l: 'Claude Code',    v: 68 },
    { l: 'Windsurf',       v: 41 },
  ];
  return (
    <SubSec name="A4 · 横向条形 · H-Bar" tag="RANKING">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A4">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>2025 DEV TOOL ADOPTION %</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>开发者用得最多的 AI 工具</div>
        </div>
        <div style={{ position: 'absolute', inset: '30% 8% 10% 8%', display: 'flex', flexDirection: 'column', gap: 18 }}>
          {data.map((d, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr 60px', alignItems: 'center', gap: 18 }}>
              <div className="cn" style={{ fontSize: 18, fontWeight: 600, color: i === 0 ? 'var(--fg)' : 'var(--fg-2)' }}>{d.l}</div>
              <div style={{ height: 18, background: 'rgba(255,255,255,.05)', position: 'relative' }}>
                <div style={{ width: `${d.v}%`, height: '100%', background: i === 0 ? 'var(--accent)' : 'rgba(255,255,255,.22)' }} />
              </div>
              <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: i === 0 ? 'var(--accent)' : 'var(--fg-2)', textAlign: 'right' }}>{d.v}%</div>
            </div>
          ))}
        </div>
      </Stage>
      <Params rows={[
        { k: 'LAYOUT', v: '3 列：标签 / 条 / 数值' },
        { k: 'SORT', v: '降序 · 第一名 accent' },
        { k: 'BAR HEIGHT', v: '18px (粗壮便于看清)' },
        { k: 'TRACK', v: '5% 白底打底 (空槽可见)' },
      ]} />
    </SubSec>
  );
}

/* ── A5 · 堆叠条/柱 ── */
function StackedBar() {
  const months = [
    { l: 'Q1', segs: [42, 28, 18] },
    { l: 'Q2', segs: [58, 31, 22] },
    { l: 'Q3', segs: [71, 38, 27] },
    { l: 'Q4', segs: [88, 42, 34] },
  ];
  const colors = ['var(--accent)', 'rgba(255,255,255,.55)', 'rgba(255,255,255,.22)'];
  const names = ['Inference', 'Training', 'Storage'];
  return (
    <SubSec name="A5 · 堆叠柱 · Stacked" tag="COMPOSITION OVER TIME">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A5">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>COMPUTE COST · $M</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>四季度构成变化</div>
        </div>
        <div style={{ position: 'absolute', top: '8%', right: '6%', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {names.map((n, i) => (
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 14, height: 14, background: colors[i] }} />
              <span className="mono" style={{ fontSize: 16, color: 'var(--fg-2)' }}>{n}</span>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', inset: '36% 8% 14% 8%', display: 'flex', alignItems: 'flex-end', gap: 36 }}>
          {months.map((m, i) => {
            const total = m.segs.reduce((s, v) => s + v, 0);
            const max = 180;
            return (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                <div className="mono" style={{ fontSize: 18, fontWeight: 600, color: 'var(--fg)', marginBottom: 8 }}>${total}</div>
                <div style={{ width: '100%', height: 220, display: 'flex', flexDirection: 'column-reverse' }}>
                  {m.segs.map((s, si) => (
                    <div key={si} style={{ height: `${(s / max) * 100}%`, background: colors[si] }} />
                  ))}
                </div>
                <div className="meta" style={{ marginTop: 14 }}>{m.l}</div>
              </div>
            );
          })}
        </div>
      </Stage>
      <Params rows={[
        { k: 'COLOR ORDER', v: '主项 accent · 次项 55% 白 · 三项 22% 白' },
        { k: 'TOTAL', v: '柱顶 mono · 累计值' },
        { k: 'STACK', v: '主项<b>放底部</b>视觉锚定' },
      ]} />
    </SubSec>
  );
}

/* ── A6 · 面积图 ── */
function AreaChart() {
  const pts = [10, 18, 28, 22, 38, 52, 48, 68, 84];
  const labels = ['1','2','3','4','5','6','7','8','9'];
  const padX = 80, padY = 60, w = 1000, h = 500;
  const innerW = w - padX * 2, innerH = h - padY * 2;
  const pathLine = pts.map((v, i) => `${i === 0 ? 'M' : 'L'} ${padX + (i / (pts.length - 1)) * innerW} ${h - padY - (v / 100) * innerH}`).join(' ');
  const pathFill = pathLine + ` L ${w - padX} ${h - padY} L ${padX} ${h - padY} Z`;
  return (
    <SubSec name="A6 · 面积图 · Area" tag="ACCUMULATED VOLUME">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A6">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>CONTEXT WINDOW · K TOKENS</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>模型上下文增长曲线</div>
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <Axis xLabels={labels} />
          <defs>
            <linearGradient id="areaGrad" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.42" />
              <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d={pathFill} fill="url(#areaGrad)" />
          <path d={pathLine} fill="none" stroke="var(--accent)" strokeWidth="3" />
        </svg>
      </Stage>
      <Params rows={[
        { k: 'FILL', v: 'accent 42% → 0% 渐变 (唯一允许的渐变)' },
        { k: 'STROKE', v: '顶线 3px accent' },
        { k: 'USE', v: '强调"累积量 / 容量"' },
      ]} />
    </SubSec>
  );
}

/* ── A7 · 环形图 ── */
function Donut() {
  const data = [
    { l: 'Retrieval', v: 52, c: 'var(--accent)' },
    { l: 'Generate',  v: 28, c: 'rgba(255,255,255,.65)' },
    { l: 'Rank',      v: 14, c: 'rgba(255,255,255,.32)' },
    { l: 'Other',     v: 6,  c: 'rgba(255,255,255,.14)' },
  ];
  const r = 140, cx = 160, cy = 160, stroke = 36;
  const C = 2 * Math.PI * r;
  let acc = 0;
  return (
    <SubSec name="A7 · 环形图 · Donut" tag="PROPORTION (≤ 4 SLICES)">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A7">
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', padding: '6% 8%' }}>
          <div style={{ position: 'relative', width: 320, height: 320 }}>
            <svg viewBox="0 0 320 320">
              {data.map((d, i) => {
                const len = (d.v / 100) * C;
                const dasharray = `${len} ${C - len}`;
                const offset = -acc;
                acc += len;
                return <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={d.c} strokeWidth={stroke} strokeDasharray={dasharray} strokeDashoffset={offset} transform={`rotate(-90 ${cx} ${cy})`} />;
              })}
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <div className="mono" style={{ fontSize: 56, fontWeight: 800, color: 'var(--accent)' }}>52%</div>
              <div className="meta" style={{ marginTop: 6 }}>RETRIEVAL</div>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div className="meta" style={{ color: 'var(--accent)', marginBottom: 6 }}>LATENCY BUDGET BREAKDOWN</div>
            {data.map((d, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 60px', alignItems: 'center', gap: 14 }}>
                <span style={{ width: 18, height: 18, background: d.c }} />
                <div className="cn" style={{ fontSize: 20, fontWeight: i === 0 ? 800 : 400, color: i === 0 ? 'var(--fg)' : 'var(--fg-2)' }}>{d.l}</div>
                <div className="mono" style={{ fontSize: 20, fontWeight: 600, color: i === 0 ? 'var(--accent)' : 'var(--fg-2)', textAlign: 'right' }}>{d.v}%</div>
              </div>
            ))}
          </div>
        </div>
      </Stage>
      <Params rows={[
        { k: 'RING', v: '36px stroke · 半径 140' },
        { k: 'CENTER', v: '主项数字 mono 800 · 56px · accent' },
        { k: 'LEGEND', v: '右栏 3 列：色块 / 名 / 数值' },
        { k: 'RULE', v: '<b>≤ 4 块</b>，多了换柱形' },
      ]} />
    </SubSec>
  );
}

/* ── A8 · 散点图 ── */
function Scatter() {
  // x = cost (0-100), y = quality (0-100), size = adoption
  const pts = [
    { x: 22, y: 38, r: 10, l: 'A', dim: true },
    { x: 35, y: 56, r: 14, l: 'B', dim: true },
    { x: 48, y: 72, r: 22, l: 'C', dim: true },
    { x: 68, y: 88, r: 28, l: 'D' }, // hot
    { x: 82, y: 78, r: 16, l: 'E', dim: true },
    { x: 28, y: 22, r: 8,  l: 'F', dim: true },
    { x: 58, y: 48, r: 12, l: 'G', dim: true },
  ];
  const padX = 90, padY = 70, w = 1000, h = 500;
  const innerW = w - padX * 2, innerH = h - padY * 2;
  return (
    <SubSec name="A8 · 散点图 · Scatter" tag="CORRELATION / DISTRIBUTION">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A8">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>COST × QUALITY · MODEL LANDSCAPE</div>
          <div className="cn" style={{ fontSize: 32, fontWeight: 800, marginTop: 6 }}>模型 D 是甜蜜点</div>
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <Axis xLabels={['LOW','','','MID','','','HIGH']} />
          <text x={padX - 50} y={h / 2} fontSize="14" fontFamily="var(--f-mono)" letterSpacing="0.16em" fill="rgba(255,255,255,.42)" transform={`rotate(-90 ${padX - 50} ${h / 2})`}>QUALITY →</text>
          {pts.map((p, i) => {
            const cx = padX + (p.x / 100) * innerW;
            const cy = h - padY - (p.y / 100) * innerH;
            return (
              <g key={i}>
                <circle cx={cx} cy={cy} r={p.r} fill={p.dim ? 'rgba(255,255,255,.14)' : 'var(--accent)'} stroke={p.dim ? 'rgba(255,255,255,.32)' : 'var(--accent)'} strokeWidth="1.5" />
                <text x={cx} y={cy + 5} textAnchor="middle" fontSize="14" fontFamily="var(--f-mono)" fontWeight="800" fill={p.dim ? 'var(--fg)' : 'var(--bg)'}>{p.l}</text>
              </g>
            );
          })}
        </svg>
      </Stage>
      <Params rows={[
        { k: 'AXES', v: '双坐标 · 角落注 LOW/HIGH' },
        { k: 'POINT SIZE', v: '映射第三维度（如采用量）' },
        { k: 'HIGHLIGHT', v: '主点 accent · 其余 14% 白填' },
      ]} />
    </SubSec>
  );
}

/* ── A9 · 热力图 ── */
function Heatmap() {
  const rows = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const cols = ['0','3','6','9','12','15','18','21'];
  // 7x8 grid intensity 0-100
  const grid = rows.map((_, r) => cols.map((_, c) => {
    // peak around Tue-Thu / 9-15
    const dr = Math.abs(r - 2.5), dc = Math.abs(c - 4);
    const base = Math.max(0, 100 - dr * 18 - dc * 14);
    return Math.min(100, Math.round(base + (Math.sin(r * c) * 12)));
  }));
  return (
    <SubSec name="A9 · 热力图 · Heatmap" tag="2D INTENSITY">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A9">
        <div style={{ position: 'absolute', top: '6%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>API USAGE · WEEKDAY × HOUR</div>
          <div className="cn" style={{ fontSize: 28, fontWeight: 800, marginTop: 6 }}>工作日中午为高峰</div>
        </div>
        <div style={{ position: 'absolute', inset: '32% 8% 10% 8%', display: 'grid', gridTemplateRows: 'repeat(7, 1fr)', gap: 4 }}>
          {grid.map((row, ri) => (
            <div key={ri} style={{ display: 'grid', gridTemplateColumns: '40px repeat(8, 1fr)', gap: 4, alignItems: 'center' }}>
              <div className="meta" style={{ color: 'var(--fg-3)' }}>{rows[ri]}</div>
              {row.map((v, ci) => (
                <div key={ci} title={`${rows[ri]} ${cols[ci]}: ${v}`} style={{
                  aspectRatio: '1.6 / 1',
                  background: v > 70 ? 'var(--accent)' : `rgba(255,255,255,${Math.max(0.04, v / 200)})`,
                  borderRadius: 2,
                }} />
              ))}
            </div>
          ))}
          <div style={{ display: 'grid', gridTemplateColumns: '40px repeat(8, 1fr)', gap: 4, marginTop: 4 }}>
            <div />
            {cols.map(c => <div key={c} className="meta" style={{ textAlign: 'center', color: 'var(--fg-3)' }}>{c}</div>)}
          </div>
        </div>
      </Stage>
      <Params rows={[
        { k: 'CELL', v: '阶梯填色：< 70 灰阶 · ≥ 70 accent' },
        { k: 'GAP', v: '4px · 让格子边界清晰' },
        { k: 'LABELS', v: '行 · 列 mono caps 14px' },
      ]} />
    </SubSec>
  );
}

/* ── A10 · 仪表盘 ── */
function Gauge() {
  const value = 73;
  const startA = -200, endA = 20;  // sweep 220°
  const r = 130, cx = 160, cy = 170, stroke = 22;
  const C = (220 / 360) * 2 * Math.PI * r;
  const filled = (value / 100) * C;
  const arc = (a) => {
    const rad = (a * Math.PI) / 180;
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  };
  const [x1, y1] = arc(startA), [x2, y2] = arc(endA);
  return (
    <SubSec name="A10 · 仪表盘 · Gauge" tag="SINGLE METRIC">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A10">
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', alignItems: 'center', padding: '6% 10%' }}>
          <div style={{ position: 'relative', width: 340, height: 240 }}>
            <svg viewBox="0 0 340 240">
              <path d={`M ${x1} ${y1} A ${r} ${r} 0 1 1 ${x2} ${y2}`} fill="none" stroke="rgba(255,255,255,.1)" strokeWidth={stroke} strokeLinecap="round" />
              <path d={`M ${x1} ${y1} A ${r} ${r} 0 1 1 ${x2} ${y2}`} fill="none" stroke="var(--accent)" strokeWidth={stroke} strokeLinecap="round" strokeDasharray={`${filled} ${C}`} />
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-end', paddingBottom: 14 }}>
              <div className="mono" style={{ fontSize: 72, fontWeight: 800, color: 'var(--accent)', lineHeight: 1 }}>73<span style={{ fontSize: 28, color: 'var(--fg-2)' }}>%</span></div>
              <div className="meta" style={{ marginTop: 8 }}>HEALTHY · TARGET 80%</div>
            </div>
          </div>
          <div>
            <div className="meta" style={{ color: 'var(--accent)', marginBottom: 10 }}>RAG · ANSWER FIDELITY</div>
            <div className="cn" style={{ fontSize: 30, fontWeight: 800, lineHeight: 1.2, marginBottom: 14 }}>距离目标还差 <span style={{ color: 'var(--accent)' }}>7 个点</span></div>
            <div className="cn" style={{ fontSize: 18, color: 'var(--fg-2)', lineHeight: 1.6 }}>本周新版 retrieval 上线后从 64 → 73。<br/>计划下周做 reranker 验证。</div>
          </div>
        </div>
      </Stage>
      <Params rows={[
        { k: 'SWEEP', v: '220° · 起始 -200° → 终止 20°' },
        { k: 'STROKE', v: '22px round cap · 留底色 10% 白' },
        { k: 'NUMBER', v: '72px mono 800 · accent' },
      ]} />
    </SubSec>
  );
}

/* ── A11 · 迷你图 ── */
function Sparkline() {
  const cards = [
    { l: 'DAU',    v: '12.4K', d: '+8.2%', up: true,  pts: [40, 38, 52, 48, 62, 70, 78] },
    { l: 'LATENCY', v: '342ms', d: '-12.4%', up: true,  pts: [78, 82, 70, 58, 52, 48, 42] },
    { l: 'ERROR', v: '0.42%', d: '+0.08', up: false, pts: [22, 18, 28, 32, 28, 38, 42] },
    { l: 'COST',  v: '$3.8K', d: '+2.1%', up: false, pts: [42, 48, 44, 52, 50, 58, 62] },
  ];
  return (
    <SubSec name="A11 · 迷你图 · Sparkline" tag="DENSE METRIC CARDS">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A11">
        <div style={{ position: 'absolute', top: '8%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>WEEKLY DASHBOARD</div>
          <div className="cn" style={{ fontSize: 28, fontWeight: 800, marginTop: 6 }}>4 项关键指标</div>
        </div>
        <div style={{ position: 'absolute', inset: '32% 6% 12% 6%', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {cards.map((c, i) => {
            const max = Math.max(...c.pts), min = Math.min(...c.pts);
            const W = 200, H = 60;
            const path = c.pts.map((v, j) => `${j === 0 ? 'M' : 'L'} ${(j / (c.pts.length - 1)) * W} ${H - ((v - min) / (max - min)) * H}`).join(' ');
            return (
              <div key={i} style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 6, padding: 22 }}>
                <div className="meta" style={{ marginBottom: 10 }}>{c.l}</div>
                <div className="mono" style={{ fontSize: 30, fontWeight: 800, color: 'var(--fg)', marginBottom: 4 }}>{c.v}</div>
                <div className="mono" style={{ fontSize: 14, color: c.up ? 'var(--green)' : 'var(--accent)', marginBottom: 14 }}>{c.d}</div>
                <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="60" preserveAspectRatio="none">
                  <path d={path} fill="none" stroke={c.up ? 'var(--green)' : 'var(--accent)'} strokeWidth="2.5" />
                </svg>
              </div>
            );
          })}
        </div>
      </Stage>
      <Params rows={[
        { k: 'CARD', v: '1px hairline · 22px padding · 6px radius' },
        { k: 'METRIC', v: 'mono 30/800 主数 + 14px delta' },
        { k: 'LINE', v: '2.5px · 颜色映射趋势 (绿=好 / 橙=糟)' },
      ]} />
    </SubSec>
  );
}

/* ── A12 · Sankey 流图 ── */
function Sankey() {
  // 3 sources -> 2 mid -> 1 sink, simplified rectangles + bezier
  const w = 1000, h = 460;
  const cols = [
    { x: 80,  nodes: [{ y: 80, h: 140, l: '搜索 · 56%' }, { y: 240, h: 80, l: '社交 · 24%' }, { y: 340, h: 60, l: '直接 · 20%' }] },
    { x: 470, nodes: [{ y: 80, h: 180, l: '试用 · 65%' }, { y: 280, h: 120, l: '流失 · 35%' }] },
    { x: 860, nodes: [{ y: 80, h: 220, l: '留存 · 28%' }] },
  ];
  const flows = [
    { a: [0, 0], b: [1, 0], w: 100, hot: true },
    { a: [0, 0], b: [1, 1], w: 40 },
    { a: [0, 1], b: [1, 0], w: 50, hot: true },
    { a: [0, 1], b: [1, 1], w: 30 },
    { a: [0, 2], b: [1, 0], w: 30, hot: true },
    { a: [0, 2], b: [1, 1], w: 30 },
    { a: [1, 0], b: [2, 0], w: 180, hot: true },
  ];
  const NW = 18;
  const flowPath = (f) => {
    const A = cols[f.a[0]].nodes[f.a[1]];
    const B = cols[f.b[0]].nodes[f.b[1]];
    const x1 = cols[f.a[0]].x + NW, x2 = cols[f.b[0]].x;
    const y1 = A.y + A.h / 2, y2 = B.y + B.h / 2;
    const mx = (x1 + x2) / 2;
    return `M ${x1} ${y1 - f.w / 2} C ${mx} ${y1 - f.w / 2}, ${mx} ${y2 - f.w / 2}, ${x2} ${y2 - f.w / 2} L ${x2} ${y2 + f.w / 2} C ${mx} ${y2 + f.w / 2}, ${mx} ${y1 + f.w / 2}, ${x1} ${y1 + f.w / 2} Z`;
  };
  return (
    <SubSec name="A12 · Sankey 流图" tag="FLOW DISTRIBUTION">
      <Stage pattern="graph" label="● B-ROLL · DATA" labelR="06.A12">
        <div style={{ position: 'absolute', top: '6%', left: '6%' }}>
          <div className="meta" style={{ color: 'var(--accent)' }}>USER ACQUISITION FUNNEL</div>
          <div className="cn" style={{ fontSize: 28, fontWeight: 800, marginTop: 6 }}>10,000 流量到 28% 留存</div>
        </div>
        <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="xMidYMid meet" style={{ position: 'absolute', inset: '26% 0 0 0', width: '100%', height: '74%' }}>
          {flows.map((f, i) => (
            <path key={i} d={flowPath(f)} fill={f.hot ? 'var(--accent)' : 'rgba(255,255,255,.12)'} opacity={f.hot ? 0.32 : 0.42} />
          ))}
          {cols.map((c, ci) => c.nodes.map((n, ni) => {
            const hot = ci === 2 || (ci === 0) || (ci === 1 && ni === 0);
            return (
              <g key={ci + '-' + ni}>
                <rect x={c.x} y={n.y} width={NW} height={n.h} fill={hot ? 'var(--accent)' : 'var(--fg-2)'} />
                <text x={ci === 2 ? c.x - 14 : c.x + NW + 14} y={n.y + n.h / 2 + 6} fontSize="18" fontWeight="600" fontFamily="var(--f-cn)" fill={hot ? 'var(--accent)' : 'var(--fg)'} textAnchor={ci === 2 ? 'end' : 'start'}>{n.l}</text>
              </g>
            );
          }))}
        </svg>
      </Stage>
      <Params rows={[
        { k: 'NODE', v: '18px 宽矩形 · accent / 62% 白' },
        { k: 'FLOW', v: 'bezier · accent 32% / 白 42% opacity' },
        { k: 'WIDTH', v: '映射流量大小' },
        { k: 'USE', v: '讲漏斗 / 转化 / 资源分配' },
      ]} />
    </SubSec>
  );
}

Object.assign(window, { ChartsSection });