Panova

#!/usr/bin/env bash
#
# Panova build script
# Usage: bash ~/.claude/skills/panova/build.sh <input.md> [output.html]
#
# Reads markdown + style.css + render.js, assembles into a self-contained HTML report.
# Includes post-build JS validation.

set -euo pipefail

SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
TEMPLATE="$SCRIPT_DIR/template.html"
STYLE="$SCRIPT_DIR/style.css"
JS="$SCRIPT_DIR/render.js"

if [ $# -lt 1 ]; then
  echo "Usage: $0 <input.md> [output.html]"
  exit 1
fi

INPUT="$1"
OUTPUT="${2:-./panova-report.html}"

for f in "$INPUT" "$TEMPLATE" "$STYLE" "$JS"; do
  if [ ! -f "$f" ]; then echo "Error: file not found: $f"; exit 1; fi
done

python3 - "$INPUT" "$STYLE" "$JS" "$TEMPLATE" "$OUTPUT" <<'PYEOF'
import sys, re

# Read and escape markdown for JS template literal
with open(sys.argv[1], 'r') as f:
    md = f.read()
md = md.replace('\\', '\\\\')
md = md.replace('`', '\\`')
md = md.replace('${', '\\${')

# Read CSS
with open(sys.argv[2], 'r') as f:
    style = f.read()

# Read JS, inject markdown
with open(sys.argv[3], 'r') as f:
    js = f.read()
js = js.replace('__REPORT_CONTENT__', md)

# Read template, inject style and JS
with open(sys.argv[4], 'r') as f:
    tpl = f.read()
result = tpl.replace('__STYLES__', style).replace('__SCRIPTS__', js)

with open(sys.argv[5], 'w') as f:
    f.write(result)
PYEOF

echo "Report generated: $OUTPUT"

# --- Post-build validation ---
echo "Validating..."

ERRORS=0

# 1. Extract JS from HTML and check syntax with node
python3 - "$OUTPUT" <<'VALIDATE_PYEOF'
import sys, re

with open(sys.argv[1], 'r') as f:
    content = f.read()

# Extract all inline <script> blocks (skip ones with src=)
scripts = re.findall(r'<script(?:\s[^>]*)?>(?!<)(.*?)</script>', content, re.DOTALL)
# Filter out empty and src-only scripts
js_blocks = [s for s in scripts if s.strip()]

if not js_blocks:
    print("Warning: No inline JS found in HTML")
    sys.exit(0)

# Write combined JS for syntax check
combined = '\n'.join(js_blocks)
with open('/tmp/panova-validate.js', 'w') as f:
    f.write(combined)
VALIDATE_PYEOF

if [ -f /tmp/panova-validate.js ]; then
  if ! node -c /tmp/panova-validate.js 2>/tmp/panova-validate-err.txt; then
    echo "ERROR: JS syntax error in generated HTML:"
    cat /tmp/panova-validate-err.txt
    ERRORS=$((ERRORS + 1))
  fi
  rm -f /tmp/panova-validate.js /tmp/panova-validate-err.txt
fi

# 2. Check for dangerous patterns: literal </script> inside the JS content
python3 - "$OUTPUT" <<'CHECK_PYEOF'
import sys, re

with open(sys.argv[1], 'r') as f:
    content = f.read()

# Find <script>...</script> blocks and check for premature </script> inside
scripts = list(re.finditer(r'<script(?:\s[^>]*)?>(?!<)(.*?)</script>', content, re.DOTALL))
for i, m in enumerate(scripts):
    body = m.group(1)
    # Check if body contains </script (case insensitive) which would break parsing
    inner_matches = list(re.finditer(r'</script', body, re.IGNORECASE))
    if inner_matches:
        for im in inner_matches:
            line = content[:m.start() + im.start()].count('\n') + 1
            print(f"ERROR: Found literal </script inside <script> block at line {line}")
        sys.exit(1)

# Check for unescaped backticks in template literal
raw_match = re.search(r'const RAW = `(.*?)(?<!\\)`', content, re.DOTALL)
if raw_match:
    raw_content = raw_match.group(1)
    # Check for unescaped backticks (backtick not preceded by backslash)
    for i, ch in enumerate(raw_content):
        if ch == '`' and (i == 0 or raw_content[i-1] != '\\'):
            line = content[:raw_match.start() + i].count('\n') + 1
            print(f"ERROR: Unescaped backtick in template literal at line {line}")
            sys.exit(1)
    # Check for unescaped ${
    for m2 in re.finditer(r'(?<!\\)\$\{', raw_content):
        line = content[:raw_match.start() + m2.start()].count('\n') + 1
        print(f"ERROR: Unescaped ${{ in template literal at line {line}")
        sys.exit(1)

print("OK: No dangerous patterns found")
CHECK_PYEOF

if [ $? -ne 0 ]; then
  ERRORS=$((ERRORS + 1))
fi

if [ $ERRORS -gt 0 ]; then
  echo "Build completed with $ERRORS validation error(s). Report may not work correctly."
  exit 1
else
  echo "Validation passed."
fi

const RAW = `__REPORT_CONTENT__`;

// --- Icons ---
const ICONS = {
  create: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 5v6M5 8h6"/></svg>',
  impact: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8h10M10 5l3 3-3 3"/></svg>',
  chevron: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 4l4 4-4 4"/></svg>',
};

// --- Mindmap branch colors ---
const BRANCH_COLORS = [
  { bg: '#fff7ed', text: '#9a3412', border: '#fed7aa' },
  { bg: '#eff6ff', text: '#1e40af', border: '#bfdbfe' },
  { bg: '#f0fdfa', text: '#115e59', border: '#99f6e4' },
  { bg: '#faf5ff', text: '#6b21a8', border: '#d8b4fe' },
  { bg: '#fffbeb', text: '#92400e', border: '#fde68a' },
  { bg: '#fef2f2', text: '#991b1b', border: '#fecaca' },
];

// --- Escape helpers ---
function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
function escAttr(s) { return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

// --- Block parser ---
function parseBlocks(src) {
  const lines = src.split('\n');
  const segments = [];
  let current = { type: 'md', lines: [] };
  for (const line of lines) {
    const openMatch = line.match(/^:::(\w+)\s*$/);
    const closeMatch = line.match(/^:::\s*$/);
    if (openMatch && current.type === 'md') {
      if (current.lines.length) segments.push({ ...current, text: current.lines.join('\n') });
      current = { type: openMatch[1], lines: [] };
    } else if (closeMatch && current.type !== 'md') {
      segments.push({ ...current, text: current.lines.join('\n') });
      current = { type: 'md', lines: [] };
    } else {
      current.lines.push(line);
    }
  }
  if (current.lines.length) segments.push({ ...current, text: current.lines.join('\n') });
  return segments;
}

// --- markdown-it setup ---
const md = markdownit({ html: true, linkify: true, typographer: true });

// Inline tooltip: [term](tip:explanation)
let _inTipLink = false;
const _origLinkOpen = md.renderer.rules.link_open || null;
md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
  const hrefIdx = tokens[idx].attrIndex('href');
  if (hrefIdx >= 0) {
    const href = tokens[idx].attrs[hrefIdx][1];
    if (href.startsWith('tip:')) {
      _inTipLink = true;
      return '<span class="tip-word" data-tip="' + escAttr(decodeURIComponent(href.slice(4))) + '">';
    }
    if (href.startsWith('#')) {
      if (!tokens[idx].attrGet('class')) tokens[idx].attrSet('class', 'concept-link');
    }
  }
  _inTipLink = false;
  return _origLinkOpen ? _origLinkOpen(tokens, idx, options, env, self) : self.renderToken(tokens, idx, options);
};
md.renderer.rules.link_close = function(tokens, idx, options, env, self) {
  if (_inTipLink) { _inTipLink = false; return '</span>'; }
  return self.renderToken(tokens, idx, options);
};

// --- Concept card post-processing ---
function postProcessConceptCards(html) {
  html = html.replace(
    /<p><strong>怎么产生[：:]\s*<\/strong>\s*([\s\S]*?)<\/p>/g,
    '<div class="concept-attr attr-create"><div class="concept-attr-icon">' + ICONS.create + '</div><div class="concept-attr-body"><strong>怎么产生</strong><p>$1</p></div></div>'
  );
  html = html.replace(
    /<p><strong>影响范围[：:]\s*<\/strong>\s*([\s\S]*?)<\/p>/g,
    '<div class="concept-attr attr-impact"><div class="concept-attr-icon">' + ICONS.impact + '</div><div class="concept-attr-body"><strong>影响范围</strong><p>$1</p></div></div>'
  );
  return html;
}

// --- Wrap concept sections into cards (DOM-based) ---
function generateConceptGrid() {
  const cards = document.querySelectorAll('.concept-card');
  if (!cards.length) return;

  // Find the first concept card's parent
  const firstCard = cards[0];
  const parent = firstCard.parentNode;

  // Build grid data
  const gridItems = [];
  cards.forEach((card, i) => {
    const h3 = card.querySelector('h3');
    if (!h3) return;
    const id = h3.id;
    const text = h3.textContent || '';
    // Parse "中文名 (EnglishName)"
    const m = text.match(/^(.+?)\s*[（(](.+?)[)）]\s*$/);
    const cn = m ? m[1].trim() : text.trim();
    const en = m ? m[2].trim() : '';

    // Get first paragraph as description
    const firstP = card.querySelector('p');
    const desc = firstP ? firstP.textContent.trim() : '';

    gridItems.push({ id, cn, en, desc });
  });

  if (!gridItems.length) return;

  // Build grid HTML — clean list with dividers
  let html = '<div class="concept-grid" id="concept-grid-overview">';
  gridItems.forEach(item => {
    html += '<a class="concept-grid-item" href="#' + item.id + '">';
    html += '<div class="concept-grid-name">' + escHtml(item.cn);
    if (item.en) html += ' <span class="concept-grid-en">' + escHtml(item.en) + '</span>';
    html += '</div>';
    if (item.desc) html += '<div class="concept-grid-desc">' + escHtml(item.desc) + '</div>';
    html += '</a>';
  });
  html += '</div>';

  // Insert before first concept card
  const wrapper = document.createElement('div');
  wrapper.innerHTML = html;
  parent.insertBefore(wrapper.firstElementChild, firstCard);
}

function wrapConceptCards() {
  const attrs = document.querySelectorAll('.concept-attr');
  attrs.forEach(attr => {
    if (attr.closest('.concept-card')) return;
    // Find preceding h3
    let h3 = attr.previousElementSibling;
    while (h3 && h3.tagName !== 'H3') h3 = h3.previousElementSibling;
    if (!h3) return;
    if (h3.closest('.concept-card')) return;

    // Collect elements from h3 to next h2/h3
    const wrapper = document.createElement('div');
    wrapper.className = 'concept-card';
    h3.parentNode.insertBefore(wrapper, h3);

    const toMove = [];
    let el = h3;
    while (el) {
      if (el !== h3 && el.nodeType === 1 && (el.tagName === 'H2' || el.tagName === 'H3')) break;
      toMove.push(el);
      el = el.nextSibling;
    }
    toMove.forEach(e => wrapper.appendChild(e));

    // Append back-to-overview link
    const backLink = document.createElement('a');
    backLink.className = 'concept-back-link';
    backLink.href = '#concept-grid-overview';
    backLink.textContent = '\u2191 \u8FD4\u56DE\u6982\u5FF5\u603B\u89C8';
    wrapper.appendChild(backLink);
  });
}

// --- Mindmap ---
function parseMindmapTree(text) {
  const lines = text.split('\n').filter(l => /^\s*-/.test(l));
  const root = [];
  const stack = [{ level: -1, node: { children: root } }];
  for (const line of lines) {
    const indent = line.search(/\S/);
    const level = Math.floor(indent / 2);
    const nodeText = line.trim().replace(/^-\s*/, '');
    const node = { text: nodeText, children: [] };
    while (stack.length > 1 && stack[stack.length - 1].level >= level) stack.pop();
    stack[stack.length - 1].node.children.push(node);
    stack.push({ level, node });
  }
  return root;
}

function renderMindmapNode(node, depth, branchIndex) {
  const hasChildren = node.children.length > 0;
  const toggle = hasChildren ? '<span class="mm-toggle">\u25BE</span>' : '';
  const clickAttr = hasChildren ? ' onclick="toggleMM(this)"' : '';

  let styleAttr = '';
  if (depth === 1 && branchIndex >= 0) {
    const c = BRANCH_COLORS[branchIndex % BRANCH_COLORS.length];
    styleAttr = ' style="background:' + c.bg + ';color:' + c.text + ';border:1px solid ' + c.border + '"';
  }

  let html = '<div class="mm-node mm-l' + depth + '">';
  html += '<div class="mm-label' + (hasChildren ? ' mm-expandable' : '') + '"' + clickAttr + styleAttr + '>' + toggle + escHtml(node.text) + '</div>';
  if (hasChildren) {
    html += '<div class="mm-children">';
    node.children.forEach((c, i) => {
      html += renderMindmapNode(c, depth + 1, depth === 0 ? i : branchIndex);
    });
    html += '</div>';
  }
  html += '</div>';
  return html;
}

function renderMindmap(text) {
  const nodes = parseMindmapTree(text);
  let html = '<div class="block-mindmap-tree">';
  nodes.forEach((n, i) => { html += renderMindmapNode(n, 0, i); });
  html += '</div>';
  return html;
}

function toggleMM(label) {
  label.closest('.mm-node').classList.toggle('mm-collapsed');
}

// --- Sequence diagram ---
function renderSequence(text) {
  const lines = text.split('\n');
  const participants = [];
  const messages = [];
  for (const line of lines) {
    const t = line.trim();
    if (!t || t === 'sequenceDiagram') continue;
    if (t.startsWith('participant ')) {
      participants.push(t.slice('participant '.length).trim());
    } else {
      const m = t.match(/^(.+?)\s*(->>|-->>)\s*(.+?):\s*(.+)/);
      if (m) messages.push({ from: m[1].trim(), dashed: m[2] === '-->>', to: m[3].trim(), msg: m[4].trim() });
    }
  }
  let html = '<div class="seq-wrap">';
  if (participants.length) {
    html += '<div class="seq-actors">';
    participants.forEach(p => { html += '<span class="seq-actor">' + escHtml(p) + '</span>'; });
    html += '</div>';
  }
  html += '<div class="seq-timeline">';
  messages.forEach(msg => {
    const self = msg.from === msg.to;
    const arrow = self ? '\u21BB' : (msg.dashed ? '\u21E2' : '\u2192');
    html += '<div class="seq-row' + (msg.dashed ? ' seq-row-dashed' : '') + '">';
    html += '<div class="seq-dir"><span class="seq-from">' + escHtml(msg.from) + '</span>';
    html += '<span class="seq-arrow">' + arrow + '</span>';
    if (!self) html += '<span class="seq-to">' + escHtml(msg.to) + '</span>';
    html += '</div><div class="seq-text">' + escHtml(msg.msg) + '</div></div>';
  });
  html += '</div></div>';
  return html;
}

// --- Block renderers ---
function wrapDiagram(inner, label) {
  return '<div class="diagram-outer">' + inner + '<div class="diagram-outer-label">' + label + '</div></div>';
}

function renderMetric(text) {
  const items = text.trim().split('\n').map(line => {
    const parts = line.split('|');
    return parts.length >= 2 ? { value: parts[0].trim(), label: parts[1].trim() } : null;
  }).filter(Boolean);
  if (!items.length) return '';
  return '<div class="metric-row">' + items.map(it =>
    '<div class="metric-card"><div class="metric-value">' + escHtml(it.value) + '</div><div class="metric-label">' + escHtml(it.label) + '</div></div>'
  ).join('') + '</div>';
}

function renderImpact(text) {
  const lines = text.trim().split('\n');
  let trigger = '';
  const items = [];
  for (const line of lines) {
    if (/^\u89E6\u53D1\u70B9[:：]/.test(line)) {
      trigger = line.replace(/^\u89E6\u53D1\u70B9[:：]\s*/, '');
    } else if (line.startsWith('- ')) {
      items.push(line.slice(2));
    }
  }
  return '<div class="block-impact" onclick="this.classList.toggle(\'open\')">' +
    '<div class="impact-trigger">' + escHtml(trigger) + '<span class="impact-toggle">\u25B8</span></div>' +
    '<div class="impact-items"><ul>' + items.map(it => '<li>' + escHtml(it) + '</li>').join('') + '</ul></div></div>';
}

function renderTabs(text) {
  const tabs = [];
  let current = null;
  for (const line of text.split('\n')) {
    const m = line.match(/^::tab\[(.+)\]\s*$/);
    if (m) { if (current) tabs.push(current); current = { label: m[1], lines: [] }; }
    else if (current) current.lines.push(line);
  }
  if (current) tabs.push(current);
  if (!tabs.length) return '';
  const id = 'tabs-' + Math.random().toString(36).slice(2, 8);
  const bar = tabs.map((t, i) =>
    '<button class="' + (i === 0 ? 'active' : '') + '" onclick="switchTab(\'' + id + '\',' + i + ')">' + escHtml(t.label) + '</button>'
  ).join('');
  const panels = tabs.map((t, i) =>
    '<div class="tab-panel ' + (i === 0 ? 'active' : '') + '" data-tab-group="' + id + '" data-tab-index="' + i + '">' + md.render(t.lines.join('\n')) + '</div>'
  ).join('');
  return '<div class="block-tabs"><div class="tab-bar">' + bar + '</div>' + panels + '</div>';
}

function switchTab(group, index) {
  document.querySelectorAll('[data-tab-group="' + group + '"]').forEach(el => el.classList.remove('active'));
  document.querySelector('[data-tab-group="' + group + '"][data-tab-index="' + index + '"]').classList.add('active');
  const bar = document.querySelector('[data-tab-group="' + group + '"]').closest('.block-tabs').querySelector('.tab-bar');
  bar.querySelectorAll('button').forEach((b, i) => b.classList.toggle('active', i === index));
}

// --- Block renderers ---
function renderSegments(segments) {
  return segments.map(seg => {
    switch (seg.type) {
      case 'md': return postProcessConceptCards(md.render(seg.text));
      case 'mermaid':
        return '<div class="diagram-outer"><pre class="mermaid">' + escHtml(seg.text.trim()) + '</pre><div class="diagram-outer-label">FLOW</div></div>';
      case 'sequence': return wrapDiagram(renderSequence(seg.text.trim()), 'SEQUENCE');
      case 'mindmap': return renderMindmap(seg.text.trim());
      case 'tooltip':
        return '<div class="block-tooltip" onclick="this.classList.toggle(\'open\')">' +
          '<div class="block-tooltip-header">' + ICONS.chevron + ' 技术细节</div>' +
          '<div class="tooltip-body">' + md.render(seg.text) + '</div></div>';
      case 'callout': return '<div class="block-callout">' + md.render(seg.text) + '</div>';
      case 'impact': return renderImpact(seg.text);
      case 'tabs': return renderTabs(seg.text);
      case 'metric': return renderMetric(seg.text);
      case 'demo':
        var demoId = 'demo-' + Math.random().toString(36).slice(2, 8);
        var demoBody = seg.text.trim().replace(/"/g, '&quot;').replace(/<\//g, '&lt;/');
        var demoCSS = [
          '*{margin:0;padding:0;box-sizing:border-box}',
          'body{font-family:-apple-system,&quot;Helvetica Neue&quot;,&quot;PingFang SC&quot;,&quot;Noto Sans SC&quot;,sans-serif;padding:20px;background:transparent;color:#1a1a1a;line-height:1.6;overflow:hidden;font-size:14px}',
          ':root{--black:#37352f;--gray-900:#1a1a1a;--gray-700:#555;--gray-500:#888;--gray-400:#aaa;--gray-300:#ccc;--gray-200:#e5e5e5;--gray-100:#f5f5f5;--gray-50:#fafafa;--white:#fff;--radius:8px;--radius-sm:6px;--radius-full:9999px}',
          '.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:16px}',
          '.card-sm{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:10px 14px}',
          '.row{display:flex;gap:12px;align-items:center}',
          '.col{display:flex;flex-direction:column;gap:8px}',
          '.wrap{display:flex;flex-wrap:wrap;gap:8px}',
          '.center{display:flex;align-items:center;justify-content:center}',
          '.gap-sm{gap:6px}.gap-lg{gap:16px}',
          '.text-xs{font-size:11px}.text-sm{font-size:12px}.text-md{font-size:14px}.text-lg{font-size:16px}.text-xl{font-size:20px}',
          '.text-bold{font-weight:700}.text-medium{font-weight:500}',
          '.text-black{color:var(--black)}.text-gray{color:var(--gray-500)}.text-light{color:var(--gray-400)}.text-white{color:var(--white)}',
          '.bg-black{background:var(--black)}.bg-dark{background:var(--gray-900)}.bg-gray{background:var(--gray-100)}.bg-white{background:var(--white)}',
          '.pill{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--radius-full);font-size:13px;white-space:nowrap}',
          '.pill-outline{border:1px solid var(--gray-200);background:var(--white)}',
          '.pill-filled{background:var(--black);color:var(--white)}',
          '.pill-active{background:var(--black);color:var(--white)}',
          '.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:var(--radius);border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}',
          '.btn-primary{background:var(--black);color:var(--white)}.btn-secondary{background:var(--gray-100);color:var(--black);border:1px solid var(--gray-200)}',
          '.btn-block{width:100%}',
          '.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}',
          '.avatar-sm{width:32px;height:32px;font-size:11px}.avatar-lg{width:48px;height:48px;font-size:14px}',
          '.avatar-dark{background:var(--black);color:var(--white)}.avatar-gray{background:var(--gray-100);color:var(--gray-700)}.avatar-outline{background:var(--white);border:2px solid var(--gray-200);color:var(--gray-700)}',
          '.bubble{padding:10px 14px;border-radius:2px 12px 12px 12px;line-height:1.6}.bubble-gray{background:var(--gray-100)}.bubble-light{background:var(--gray-50);border:1px solid var(--gray-200)}',
          '.divider{height:1px;background:var(--gray-200);margin:12px 0}',
          '.label{font-size:12px;color:var(--gray-500);margin-bottom:6px}',
          '.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-full);font-size:11px;font-weight:600}',
          '.badge-dark{background:var(--black);color:var(--white)}.badge-gray{background:var(--gray-100);color:var(--gray-700)}.badge-outline{border:1px solid var(--gray-300);color:var(--gray-700)}',
          '.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.status-active{background:var(--black)}.status-inactive{background:var(--gray-300)}.status-glow{box-shadow:0 0 8px rgba(0,0,0,0.3)}',
          '.mt-sm{margin-top:8px}.mt-md{margin-top:12px}.mt-lg{margin-top:16px}.mb-sm{margin-bottom:8px}.mb-md{margin-bottom:12px}.mb-lg{margin-bottom:16px}',
          '.text-center{text-align:center}.text-right{text-align:right}',
          '.w-full{width:100%}.max-w-sm{max-width:360px}.max-w-md{max-width:440px}.mx-auto{margin-left:auto;margin-right:auto}',
          '.opacity-30{opacity:0.3}.opacity-50{opacity:0.5}.opacity-70{opacity:0.7}',
          '.shadow-sm{box-shadow:0 1px 3px rgba(0,0,0,0.06)}'
        ].join('');
        var demoHead = '<!DOCTYPE html><html><head><meta charset=&quot;UTF-8&quot;><meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;><style>' + demoCSS + '</style></head><body>';
        var demoTail = '&lt;script>new ResizeObserver(function(){parent.postMessage({type:&quot;demo-resize&quot;,id:&quot;' + demoId + '&quot;,h:document.body.scrollHeight},&quot;*&quot;)}).observe(document.body)&lt;/script></body></html>';
        return '<div class="block-demo">' +
          '<div class="demo-label">DEMO</div>' +
          '<iframe id="' + demoId + '" class="demo-frame" sandbox="allow-scripts" srcdoc="' + demoHead + demoBody + demoTail + '"></iframe></div>';
      default: return md.render(seg.text);
    }
  }).join('');
}

// --- Nav & scroll spy ---
function slugify(text) {
  return text.trim().toLowerCase()
    .replace(/[\s\u3000（）()【】\[\]「」《》、，。！？:：]/g, '-')
    .replace(/[^\w\u4e00-\u9fff-]/g, '')
    .replace(/-+/g, '-')
    .replace(/^-|-$/g, '') || 'sec';
}
const slugCounts = {};
function uniqueSlug(base) {
  const count = (slugCounts[base] || 0) + 1;
  slugCounts[base] = count;
  return count === 1 ? base : base + '-' + count;
}

function buildNav(html) {
  const tmp = document.createElement('div');
  tmp.innerHTML = html;
  const links = [];
  tmp.querySelectorAll('h2, h3').forEach(el => {
    const id = uniqueSlug(slugify(el.textContent));
    el.id = id;
    links.push({ id, text: el.textContent, level: el.tagName });
  });
  document.getElementById('content').innerHTML = tmp.innerHTML;
  document.getElementById('nav-links').innerHTML = links.map(l =>
    '<a href="#' + l.id + '" class="' + (l.level === 'H3' ? 'sub' : '') + '">' + l.text + '</a>'
  ).join('');
}

function setupScrollSpy() {
  const headings = document.querySelectorAll('h2[id], h3[id]');
  const navLinks = document.querySelectorAll('#nav-links a');
  if (!headings.length) return;
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        navLinks.forEach(a => a.classList.remove('active'));
        const link = document.querySelector('#nav-links a[href="#' + entry.target.id + '"]');
        if (link) link.classList.add('active');
      }
    });
  }, { rootMargin: '-20% 0px -70% 0px' });
  headings.forEach(h => observer.observe(h));
}

// --- Link validation ---
function validateLinks() {
  const links = document.querySelectorAll('#content a[href^="#"]');
  const ids = new Set();
  document.querySelectorAll('[id]').forEach(el => ids.add(el.id));
  let broken = 0;
  links.forEach(link => {
    const target = link.getAttribute('href').slice(1);
    if (target && !ids.has(target)) {
      console.warn('Broken link:', link.textContent, '\u2192 #' + target);
      broken++;
    }
  });
  if (broken) console.warn('\u26A0 Found ' + broken + ' broken anchor link(s). Check console for details.');
  return broken;
}

// --- Concept Link Popover ---
function setupConceptPopovers() {
  var popover = document.createElement('div');
  popover.id = 'concept-popover';
  document.body.appendChild(popover);

  var conceptMap = new Map();
  document.querySelectorAll('.concept-card').forEach(function(card) {
    var h3 = card.querySelector('h3');
    if (!h3 || !h3.id) return;
    var firstP = card.querySelector('p');
    var desc = firstP ? firstP.textContent.trim() : '';
    conceptMap.set(h3.id, {
      name: h3.textContent,
      desc: desc.length > 150 ? desc.substring(0, 150) + '...' : desc
    });
  });

  document.querySelectorAll('#content a[href^="#"]').forEach(function(link) {
    var targetId = link.getAttribute('href').slice(1);
    var data = conceptMap.get(targetId);
    if (!data) return;

    link.addEventListener('mouseenter', function() {
      popover.innerHTML = '<div class="cpop-name">' + escHtml(data.name) + '</div>' +
                          '<div class="cpop-desc">' + escHtml(data.desc) + '</div>';
      var rect = link.getBoundingClientRect();
      popover.style.left = rect.left + rect.width / 2 + 'px';
      popover.style.top = (rect.top - 8) + 'px';
      popover.classList.add('visible');
    });

    link.addEventListener('mouseleave', function() {
      popover.classList.remove('visible');
    });
  });
}

// --- Mobile Nav ---
function setupMobileNav() {
  var nav = document.getElementById('nav');
  if (!nav) return;

  // Create hamburger button
  var btn = document.createElement('button');
  btn.className = 'mobile-nav-toggle';
  btn.textContent = '\u2630';
  btn.setAttribute('aria-label', 'Toggle navigation');
  document.body.appendChild(btn);

  // Create overlay
  var overlay = document.createElement('div');
  overlay.className = 'nav-overlay';
  document.body.appendChild(overlay);

  btn.addEventListener('click', function() {
    nav.classList.toggle('nav-open');
    overlay.classList.toggle('visible');
  });

  overlay.addEventListener('click', function() {
    nav.classList.remove('nav-open');
    overlay.classList.remove('visible');
  });

  // Close nav when a link is clicked (mobile)
  nav.addEventListener('click', function(e) {
    if (e.target.tagName === 'A') {
      nav.classList.remove('nav-open');
      overlay.classList.remove('visible');
    }
  });
}

// --- Nav Search ---
function setupSearch() {
  var navTitle = document.querySelector('.nav-title');
  if (!navTitle) return;

  var input = document.createElement('input');
  input.type = 'text';
  input.className = 'nav-search';
  input.placeholder = '\u641C\u7D22\u7AE0\u8282...';
  navTitle.parentNode.insertBefore(input, navTitle.nextSibling);

  input.addEventListener('input', function() {
    var query = input.value.trim().toLowerCase();
    var links = document.querySelectorAll('#nav-links a');
    links.forEach(function(link) {
      if (!query) {
        link.classList.remove('search-dimmed');
      } else {
        var text = link.textContent.toLowerCase();
        link.classList.toggle('search-dimmed', text.indexOf(query) === -1);
      }
    });
  });
}

// --- Init ---
function init() {
  const segments = parseBlocks(RAW);
  const html = renderSegments(segments);
  buildNav(html);
  wrapConceptCards();
  generateConceptGrid();
  setupScrollSpy();
  setupConceptPopovers();

  // Initialize mermaid
  if (typeof mermaid !== 'undefined') {
    mermaid.initialize({
      startOnLoad: false,
      theme: 'base',
      themeVariables: {
        primaryColor: '#e3e2de',
        primaryTextColor: '#37352f',
        primaryBorderColor: '#d4d4d0',
        lineColor: '#b4b4b0',
        secondaryColor: '#f7f6f3',
        tertiaryColor: '#f7f6f3',
        noteBkgColor: '#fffbeb',
        noteTextColor: '#92400e',
        fontSize: '14px',
        fontFamily: 'inherit'
      },
      flowchart: {
        htmlLabels: true,
        curve: 'basis',
        padding: 16,
        nodeSpacing: 40,
        rankSpacing: 60,
        useMaxWidth: true,
        wrappingWidth: 180
      }
    });
    mermaid.run({ querySelector: 'pre.mermaid' });
  }

  // Demo iframe auto-resize
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'demo-resize') {
      var frame = document.getElementById(e.data.id);
      if (frame) frame.style.height = e.data.h + 'px';
    }
  });

  validateLinks();
  setupMobileNav();
  setupSearch();

  // Expand first impact chain by default
  const firstImpact = document.querySelector('.block-impact');
  if (firstImpact) firstImpact.classList.add('open');

  const h1 = document.querySelector('h1');
  if (h1) document.title = h1.textContent + ' \u2014 Panova';
}

init();

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #37352f;
  --gray-900: #1a1a1a;
  --gray-800: #37352f;
  --gray-700: #555;
  --gray-600: #6b6b6b;
  --gray-500: #9b9a97;
  --gray-400: #b4b4b0;
  --gray-300: #d4d4d0;
  --gray-200: #e8e8e4;
  --gray-150: #f0f0ec;
  --gray-100: #f7f6f3;
  --gray-50: #fbfbfa;
  --white: #fff;
  --orange: #f97316;
  --orange-light: #fff7ed;
  --blue: #3b82f6;
  --blue-light: #eff6ff;
  --teal: #14b8a6;
  --teal-light: #f0fdfa;
  --coral: #f87171;
  --coral-light: #fef2f2;
  --amber: #f59e0b;
  --purple: #a855f7;
  --purple-light: #faf5ff;
  --accent: #111;
  --font-sans: -apple-system, "Helvetica Neue", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Noto Sans Mono CJK SC", monospace;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.09), 0 4px 10px rgba(0,0,0,0.05);
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--black);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.page { display: flex; min-height: 100vh; }

nav {
  position: fixed;
  top: 0; left: 0;
  width: 260px; height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--gray-200);
  padding: 32px 16px 64px;
  font-size: 14px;
  background: var(--white);
  z-index: 10;
}
nav::-webkit-scrollbar { width: 3px; }
nav::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
nav .nav-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 24px;
  padding-left: 12px;
}
nav a {
  display: block;
  color: var(--gray-500);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.15s;
  font-size: 13px;
  line-height: 1.5;
}
nav a:hover { color: var(--black); background: var(--gray-50); }
nav a.active {
  color: var(--black);
  font-weight: 600;
  background: var(--orange-light);
}
nav a.sub { padding-left: 24px; font-size: 12px; }
.nav-footer {
  position: fixed;
  bottom: 24px; left: 20px;
  font-size: 11px;
  color: var(--gray-400);
}
.nav-footer span { color: var(--orange); font-weight: 600; }

main {
  flex: none;
  max-width: 960px;
  padding: 56px 64px 120px;
  margin-left: max(260px, calc((100vw - 960px) / 2));
  margin-right: auto;
}

/* --- Scroll offset --- */
h2[id], h3[id], h4[id] { scroll-margin-top: 24px; }

/* --- Typography --- */
h1 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
p.subtitle {
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: 48px;
  line-height: 1.6;
}
h2 {
  font-size: 22px;
  font-weight: 800;
  margin-top: 72px;
  margin-bottom: 24px;
  padding-bottom: 0;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 12px;
}
h4 {
  font-size: 13px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
}
p { margin-bottom: 16px; color: var(--gray-800); }
strong { font-weight: 700; color: var(--black); }
code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--gray-100);
  padding: 2px 5px;
  border-radius: 3px;
  color: #eb5757;
}
pre {
  background: var(--gray-100);
  color: var(--gray-800);
  padding: 16px 20px;
  overflow-x: auto;
  margin-bottom: 16px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--gray-200);
}
pre code { background: none; padding: 0; color: inherit; }
ul, ol { padding-left: 20px; margin-bottom: 16px; }
li { margin-bottom: 6px; color: var(--gray-800); }
li::marker { color: var(--gray-400); }

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 24px;
  font-size: 14px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}
th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 11px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-150);
}
tr:nth-child(even) td { background: var(--gray-50); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--orange-light); }

/* --- Concept Grid Overview --- */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0;
  margin: 24px 0 40px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.concept-grid-item {
  display: block;
  text-decoration: none;
  padding: 16px;
  border-bottom: 1px solid var(--gray-200);
  border-right: 1px solid var(--gray-200);
  transition: background 0.15s;
  cursor: pointer;
}
.concept-grid-item:hover {
  background: var(--gray-50);
}
.concept-grid-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
  margin-bottom: 2px;
  line-height: 1.4;
}
.concept-grid-en {
  font-weight: 400;
  font-size: 12px;
  color: var(--gray-400);
  margin-left: 6px;
}
.concept-grid-desc {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.5;
}

/* --- Concept Card --- */
.concept-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 28px 0;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s, transform 0.25s;
}
.concept-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.concept-card h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 19px;
}
.concept-card > p:first-of-type {
  color: var(--gray-600);
  margin-bottom: 20px;
  font-size: 15px;
}
.concept-attr {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.concept-attr-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.concept-attr-icon svg { width: 16px; height: 16px; }
.attr-create .concept-attr-icon { background: var(--teal-light); }
.attr-create .concept-attr-icon svg { color: var(--teal); }
.attr-impact .concept-attr-icon { background: var(--coral-light); }
.attr-impact .concept-attr-icon svg { color: var(--coral); }
.concept-attr-body strong {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 10px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-weight: 700;
}
.attr-create .concept-attr-body strong { background: var(--teal-light); color: #115e59; }
.attr-impact .concept-attr-body strong { background: var(--coral-light); color: #991b1b; }
.concept-attr-body p { margin: 0; font-size: 14px; color: var(--gray-700); }

/* --- Mindmap Tree --- */
.block-mindmap-tree { padding: 4px 0 8px; font-size: 13px; }
.mm-node { margin: 3px 0; }
.mm-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 20px;
  line-height: 1.4;
  user-select: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mm-expandable { cursor: pointer; }
.mm-expandable:hover { transform: scale(1.02); box-shadow: var(--shadow-sm); }
.mm-l0 > .mm-label {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  border-radius: 10px;
  padding: 8px 20px;
  box-shadow: var(--shadow-sm);
}
.mm-l1 > .mm-label { font-weight: 600; }
.mm-l2 > .mm-label { background: var(--white); border: 1px solid var(--gray-200); }
.mm-l3 > .mm-label { background: transparent; color: var(--gray-500); font-size: 12px; padding-left: 8px; }
.mm-toggle { font-size: 10px; transition: transform 0.2s; display: inline-block; }
.mm-children { margin-left: 26px; padding-left: 12px; border-left: 2px dashed var(--gray-200); padding-top: 4px; margin-top: 2px; }
.mm-node.mm-collapsed > .mm-children { display: none; }
.mm-node.mm-collapsed > .mm-label .mm-toggle { transform: rotate(-90deg); }

/* --- Flow Chain (horizontal) --- */
.flow-chain {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; padding: 4px 0 8px;
}
.flow-chip {
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 20px; padding: 5px 14px; font-size: 13px; white-space: nowrap;
}
.flow-chip-back { background: #fff0f0; border-color: #f5c6c6; color: #b03030; }
.flow-sep { color: var(--gray-300); font-size: 15px; }

/* --- Flow Steps (vertical branching) --- */
.flow-steps { padding: 4px 0 8px; font-size: 13px; }
.flow-step {
  display: inline-flex; align-items: center;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 8px; padding: 7px 16px; margin: 3px 0; max-width: 520px;
}
.flow-decision {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fffaec; border: 1.5px solid #f0d050;
  border-radius: 8px; padding: 6px 16px; margin: 3px 0;
  font-weight: 500; max-width: 520px;
}
.flow-dec-icon { color: #c49a00; font-size: 12px; }
.flow-branches { display: flex; flex-wrap: wrap; gap: 8px; margin: 5px 0 3px 20px; }
.flow-branch {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 6px; padding: 4px 12px; font-size: 12px;
}
.flow-branch b { color: var(--gray-600); margin-right: 4px; }
.flow-vconn { padding: 1px 0 1px 16px; color: var(--gray-300); font-size: 16px; line-height: 1; }

/* --- Sequence Diagram --- */
.seq-wrap { padding: 4px 0 8px; font-size: 13px; }
.seq-actors { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.seq-actor { background: var(--black); color: var(--white); border-radius: 6px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.seq-timeline { border-left: 2px solid var(--gray-150); padding-left: 14px; }
.seq-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--gray-100);
}
.seq-row:last-child { border-bottom: none; }
.seq-dir { display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; min-width: 140px; }
.seq-from, .seq-to { font-weight: 600; color: var(--gray-700); font-size: 12px; }
.seq-arrow { color: var(--gray-300); font-size: 13px; margin: 0 1px; }
.seq-text {
  background: var(--gray-50); border: 1px solid var(--gray-150);
  border-radius: 6px; padding: 3px 10px; font-size: 12px; color: var(--gray-700); flex: 1;
}
.seq-row-dashed .seq-text { background: transparent; border-style: dashed; color: var(--gray-500); }

/* --- Diagram outer wrapper --- */
.diagram-outer {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  margin: 28px 0;
  padding: 24px 28px 16px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
.diagram-outer-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gray-300); margin-top: 12px;
}
.diagram-outer .mermaid { margin: 0; background: transparent; color: inherit; padding: 0; font-size: inherit; border: none; }
.diagram-outer .mermaid svg { max-width: 100%; }
.diagram-outer .nodeLabel {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.4 !important;
}

/* --- Custom blocks --- */
.block-tooltip {
  font-size: 13px;
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0 20px;
  cursor: pointer;
  background: var(--gray-50);
  transition: border-color 0.2s;
}
.block-tooltip:hover { border-color: var(--gray-300); }
.block-tooltip-header {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--gray-400); user-select: none;
}
.block-tooltip-header svg { width: 14px; height: 14px; transition: transform 0.2s; }
.block-tooltip.open .block-tooltip-header svg { transform: rotate(90deg); }
.block-tooltip .tooltip-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.block-tooltip.open .tooltip-body { max-height: 600px; margin-top: 12px; }
.block-tooltip .tooltip-body p { font-size: 13px; color: var(--gray-600); margin-bottom: 8px; }

.block-callout {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  color: var(--gray-800);
  padding: 22px 26px;
  margin: 24px 0;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.7;
  box-shadow: var(--shadow-sm);
}
.block-callout p { color: var(--gray-800); margin-bottom: 8px; }
.block-callout p:last-child { margin-bottom: 0; }
.block-callout strong { color: var(--black); }

.block-impact {
  background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
  border: 1px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin: 16px 0;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.block-impact:hover { box-shadow: var(--shadow-sm); }
.block-impact .impact-trigger {
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
  color: #991b1b;
  user-select: none;
}
.block-impact .impact-trigger::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--coral); flex-shrink: 0;
}
.block-impact .impact-toggle {
  margin-left: auto; font-size: 12px; color: #f87171;
  transition: transform 0.2s;
}
.block-impact.open .impact-toggle { transform: rotate(90deg); }
.block-impact .impact-items {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.block-impact.open .impact-items { max-height: 500px; margin-top: 14px; }
.block-impact ul { list-style: none; padding: 0; margin: 0; }
.block-impact li {
  padding: 8px 0 8px 28px; position: relative;
  font-size: 13px; color: #7f1d1d;
}
.block-impact li::before {
  content: ""; position: absolute; left: 0; top: 16px;
  width: 16px; height: 1px;
  background: #fca5a5;
}
.block-impact li::after {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; border-radius: 50%;
  border: 2px solid #f87171; background: var(--white);
}
.block-impact li:last-child::before { display: none; }

.block-tabs { margin: 24px 0; }
.tab-bar {
  display: flex; gap: 0; margin-bottom: 0;
  background: var(--gray-100);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 4px 4px 0;
}
.tab-bar button {
  background: none; border: none; padding: 10px 20px;
  font-size: 13px; font-weight: 600; color: var(--gray-500);
  cursor: pointer; border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--font-sans); transition: all 0.2s;
}
.tab-bar button.active { color: var(--black); background: var(--white); }
.tab-bar button:hover:not(.active) { color: var(--gray-700); background: var(--gray-50); }
.tab-panel {
  display: none; padding: 22px 26px; background: var(--white);
  border: 1px solid var(--gray-200); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius); font-size: 14px;
}
.tab-panel.active { display: block; }
.tab-panel p:last-child { margin-bottom: 0; }

/* --- Metric Cards --- */
.metric-row { display: flex; gap: 12px; margin: 24px 0; }
.metric-card {
  flex: 1; border: 1px solid var(--gray-200); border-radius: var(--radius);
  padding: 20px 18px; background: var(--white); text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-value { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; color: var(--orange); }
.metric-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-400); }

/* --- Inline tooltip --- */
.tip-word {
  border-bottom: 1px dashed var(--blue);
  color: var(--blue);
  cursor: help;
  position: relative;
}
.tip-word::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: var(--gray-100);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 400;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  width: 260px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
  line-height: 1.6;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.tip-word:hover::after { opacity: 1; }

/* --- Concept cross-link --- */
.concept-link {
  color: var(--black);
  font-weight: 600;
  border-bottom: 1px solid var(--gray-400);
  text-decoration: none;
  transition: border-color 0.15s;
}
.concept-link:hover { border-bottom-color: var(--orange); color: var(--orange); }

/* --- Concept Popover --- */
#concept-popover {
  position: fixed;
  transform: translateX(-50%) translateY(-100%);
  background: var(--gray-900);
  color: var(--gray-100);
  padding: 12px 16px;
  border-radius: var(--radius);
  max-width: 320px;
  min-width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 300;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  line-height: 1.5;
}
#concept-popover.visible { opacity: 1; }
.cpop-name { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--white); }
.cpop-desc { font-size: 12px; color: var(--gray-300); line-height: 1.5; }

/* --- Demo Block --- */
.block-demo {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 24px 0;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.demo-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-300);
  padding: 8px 16px 0;
}
.demo-frame {
  width: 100%;
  min-height: 60px;
  border: none;
  display: block;
  background: transparent;
}

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.concept-card { animation: fadeInUp 0.35s ease-out both; }
.diagram-outer { animation: fadeInUp 0.4s ease-out both; }
.block-callout { animation: fadeInUp 0.4s ease-out 0.05s both; }
.block-impact { animation: fadeInUp 0.4s ease-out 0.05s both; }

/* Mobile nav toggle */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gray-900);
  color: var(--white);
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 100;
  box-shadow: var(--shadow-lg);
  align-items: center;
  justify-content: center;
}

/* Nav search */
.nav-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--gray-50);
  color: var(--black);
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.15s;
}
.nav-search:focus { border-color: var(--gray-400); }
.nav-search::placeholder { color: var(--gray-400); }
nav a.search-dimmed { opacity: 0.25; }

/* Concept back link */
.concept-back-link {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--gray-400);
  text-decoration: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-150);
}
.concept-back-link:hover { color: var(--orange); }

/* --- Responsive --- */
@media (max-width: 900px) {
  .mobile-nav-toggle { display: flex; }
  nav { display: none; }
  nav.nav-open {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 280px; height: 100vh;
    z-index: 200;
    box-shadow: var(--shadow-lg);
  }
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 150;
  }
  .nav-overlay.visible { display: block; }
  main { margin-left: 0; max-width: 100%; padding: 24px 20px 80px; }
  .metric-row { flex-wrap: wrap; }
  .metric-card { min-width: calc(50% - 8px); }
}

@media print {
  nav { display: none; }
  main { margin-left: 0; max-width: 100%; }
  .block-tooltip .tooltip-body { max-height: none; }
  .diagram-outer-label { display: none; }
  .concept-card { box-shadow: none; break-inside: avoid; }
}