---
import BaseLayout from '../../../layouts/BaseLayout.astro';
import Header from '../../../components/Header.astro';
import Footer from '../../../components/Footer.astro';
import ReportSection from '../../../components/report/ReportSection.astro';
import GlassTable from '../../../components/common/GlassTable.astro';
import MathFormula from '../../../components/common/MathFormula.astro';
import ImageViewer from '../../../components/common/ImageViewer.astro';

import Container from '../../../components/Container.astro';
import ReportSidebar from '../../../components/report/ReportSidebar.astro';
---

<BaseLayout 
  title="基于AI的集成电路版图识别开题报告 - Jiao77" 
  description="面向版图模板识别的AI技术路径探索，聚焦RoRD的旋转鲁棒性与零样本匹配能力"
  type="report"
>
  <Header />
  
  <main class="report-main">
    <div class="report-layout container mx-auto px-4">
      <ReportSidebar title="报告目录" toggleLabel="目录" />
      <div class="report-content" data-report-content>
      <!-- 报告标题区域 -->
      <section id="intro" class="report-header scroll-mt-16" data-reveal data-reveal-distance="64px">
        <Container
          variant="glass"
          size="full"
          padding="xl"
          className="text-center mb-12 mt-24"
          revealDistance="56px"
        >
          <h1 class="report-title">面向版图模板识别的AI技术路径探索</h1>
          <p class="report-subtitle">聚焦RoRD的旋转鲁棒性与零样本匹配能力，剖析其如何应对IC版图分析的根本挑战。</p>
          <div class="report-action">
            <a href="#goal" class="bg-[#27797f] text-white font-bold py-3 px-8 rounded-full hover:bg-[#1e6066] transition duration-300">开始探索 ↓</a>
          </div>
        </Container>
      </section>

      <!-- 项目目标章节 -->
      <ReportSection 
        title="🎯 项目目标：赋能设计-工艺协同优化(DTCO)"
        subtitle="将AI版图分析定位为先进工艺节点开发的核心环节，为实现更优的PPA（功耗、性能、面积）目标提供关键技术支撑。"
        level={2}
      >
        <div class="space-y-6">
          <div class="goal-section">
            <h3 class="section-heading">核心目标</h3>
            <p>
              本项目的核心目标是，研发并验证一种能够<strong>赋能设计-工艺协同优化（DTCO）流程</strong>的AI版图分析引擎。
              我们将以RoRD的旋转鲁棒特征匹配技术为基础，通过对IC版图进行快速、精准的自动化解构（识别标准单元、IP核及关键图形模式），
              <strong>打通从设计端（GDSII）到工艺端（制造结果）的信息反馈闭环</strong>。
            </p>
          </div>
          
          <div class="goal-section">
            <h3 class="section-heading">研究意义：支撑DTCO的四大支柱</h3>
            <ul class="research-pillars">
              <li>
                <strong>赋能设计-工艺协同：</strong>
                为设计和工艺团队提供一个强大的数据透视工具。工艺工程师可以通过分析大规模版图中的单元使用频率和布局模式，
                来优化工艺规则（DRC）和PDK；设计工程师则能获得关于其设计选择对可制造性影响的快速反馈。
              </li>
              <li>
                <strong>加速PPA评估与收敛：</strong>
                通过自动化、全芯片级别的标准单元和IP核识别，可以快速进行精确的面积计算、单元密度分析和绕线拥塞评估。
                这使得在设计的早期阶段就能对PPA进行更准确的预测，从而加速设计收敛。
              </li>
              <li>
                <strong>强化可制造性设计（DFM）与良率分析：</strong>
                除了匹配已知IP，本技术可扩展用于识别已知的"良率关键图形"（yield detractors / hotspots）。
                通过在设计阶段主动扫描并识别这些高风险图形，可以指导设计师进行规避，从而从源头上提升芯片的最终良率。
              </li>
              <li>
                <strong>支撑先进节点的IP复用与验证：</strong>
                在DTCO模式下，IP核必须与特定的工艺技术紧密耦合。本工具能够自动化地验证IP核在最终版图中的实现是否与预期一致，
                确保其在不同设计环境下的性能和可靠性，从而实现高效、可靠的IP复用。
              </li>
            </ul>
          </div>
        </div>
      </ReportSection>

      <!-- 核心挑战章节 -->
      <ReportSection 
        title="🔬 版图识别的核心挑战"
        subtitle="AI在版图分析中的应用并非一帆风顺。要实现高效、精准的自动化模板识别，我们必须首先直面以下相互交织的四大核心挑战。"
        level={2}
      >
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div class="challenge-card">
            <h3 class="challenge-title">数据稀缺性</h3>
            <p class="challenge-description">监督学习依赖大量精细标注数据，但在高度专业的版图领域，获取像素级或边界框标注的成本极其高昂，成为主要瓶颈。</p>
          </div>
          <div class="challenge-card">
            <h3 class="challenge-title">几何多变性</h3>
            <p class="challenge-description">版图中的模板常以不同角度出现。具体而言，IC设计中主要考虑8个方向：0、90、180、270度旋转，以及这四个角度下的垂直或水平镜像。模型必须对这8个方向具备完全的鲁棒性。</p>
          </div>
          <div class="challenge-card">
            <h3 class="challenge-title">动态扩展性</h3>
            <p class="challenge-description">IP核库、标准单元库等模板库规模庞大且动态更新。AI方案必须能灵活适应新模板，而无需频繁进行昂贵的重训练。</p>
          </div>
          <div class="challenge-card">
            <h3 class="challenge-title">结构复杂性</h3>
            <p class="challenge-description">IC版图包含高密度、精细的几何图案和复杂的层次结构，对AI模型的特征表征能力提出了严峻考验。</p>
          </div>
        </div>
      </ReportSection>

      <!-- RoRD深度解析章节 -->
      <!-- RoRD深度解析章节 -->
      <ReportSection 
        title="💡 RoRD 深度解析：为何是它？"
        subtitle="RoRD (Rotation-Robust Descriptors and Orthographic Views for Local Feature Matching) 提出了一种新颖的框架，通过结合数据增强学习不变性描述子和正交视点投影，以应对局部特征匹配在极端视角变化下的挑战。以下内容基于论文 arXiv:2103.08573v4 进行详细阐释。"
        level={2}
      >
        <div class="math-intro mb-6">
          <p class="text-center text-lg text-gray-600 max-w-3xl mx-auto">
            RoRD (Rotation-Robust Descriptors and Orthographic Views for Local Feature Matching) 提出了一种新颖的框架，通过结合数据增强学习不变性描述子和正交视点投影，以应对局部特征匹配在极端视角变化下的挑战。以下内容基于论文 arXiv:2103.08573v4 进行详细阐释。
          </p>
          <div class="text-center mt-4">
            <p class="text-lg text-gray-600 mb-3">以下是旋转单应性变换的数学表达：</p>
            <MathFormula 
              formula="H_R(\\theta) = \\begin{bmatrix} \\cos\\theta & -\\sin\\theta & 0 \\\\ \\sin\\theta & \\cos\\theta & 0 \\\\ 0 & 0 & 1 \\end{bmatrix}"
              className="rotation-matrix-formula"
            />
          </div>
        </div>

        <div class="space-y-8">
          <div class="deep-dive-card">
            <div class="flex items-center mb-4">
              <span class="text-5xl mr-4 text-blue-500">🌍</span>
              <div>
                <span class="text-sm font-semibold text-blue-600 block">组件一</span>
                <h3 class="text-2xl font-bold text-blue-500">正交视图生成 (Orthographic View Generation)</h3>
              </div>
            </div>
            <p class="text-gray-700 mb-3">RoRD认为，尽管正交视图能增加视觉重叠以辅助匹配，但仅有正交视图不足以应对极端视角变化，仍需旋转鲁棒特征配合。此步骤旨在通过几何变换将输入的透视图像转换为标准的顶视（鸟瞰）图像，为后续特征提取提供规范化输入。</p>
            <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">实现方式：</h4>
            <ul class="list-disc text-gray-600 space-y-2">
              <li><b>基于表面法线 (Surface Normal Based):</b> 主要用于相机具有6自由度运动的场景（例如论文中的Diverse View数据集）。该方法利用深度信息生成3D点云，计算主导平面的表面法线，并以此为基准生成正交视图。</li>
              <li><b>基于逆透视变换 (IPM - Inverse Perspective Mapping):</b> 适用于场景布局相对一致的特定应用，例如自动驾驶场景（如论文中的Oxford RobotCar数据集），通过固定的单应性矩阵将相机图像转换为路面的鸟瞰图。</li>
            </ul>
          </div>

          <div class="deep-dive-card">
            <div class="flex items-center mb-4">
              <span class="text-5xl mr-4 text-green-500">🔄</span>
              <div>
                <span class="text-sm font-semibold text-blue-600 block">组件二</span>
                <h3 class="text-2xl font-bold text-blue-500">旋转鰁棒描述子学习 (RoRD Descriptors)</h3>
              </div>
            </div>
            <p class="text-gray-700 mb-3">此组件是RoRD实现旋转不变性的核心。其目标是学习到即使图像发生平面内旋转，其局部特征描述子也能保持稳定且具有判别力的能力。例如，旋转变换由单应性矩阵 H_R(θ) 定义。</p>
            <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">关键技术：</h4>
            <ul class="list-disc text-gray-600 space-y-2">
              <li><b>数据增强策略:</b> RoRD采用一种基于几何变换的自监督学习方式。通过对训练图像施加一个随机的平面内旋转单应性变换 H_R(θ) (旋转角度 θ 在0到360度之间均匀随机采样)来生成训练对。论文还提及加入了透视、缩放和错切变换，以增强模型的泛化能力。</li>
              <li><b>网络架构与训练:</b> RoRD的实现基于D2-Net所采用的“检测与描述”联合学习框架，使用VGG-16作为其骨干。训练时主要微调描述子生成层，旨在使原始图像块与其经过几何变换后的对应图像块所提取的描述子在特征空间中尽可能相似。</li>
            </ul>
          </div>

          <div class="deep-dive-card">
            <div class="flex items-center mb-4">
              <span class="text-5xl mr-4 text-purple-500">🔗</span>
              <div>
                <span class="text-sm font-semibold text-blue-600 block">组件三</span>
                <h3 class="text-2xl font-bold text-blue-500">对应关系集成与筛选</h3>
              </div>
            </div>
            <p class="text-gray-700 mb-3">为了进一步提升匹配的整体性能，RoRD引入了一种对应关系集成技术，并使用RANSAC算法进行几何验证，以确保最终匹配结果的精确性。</p>
            <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">集成与匹配流程：</h4>
            <ul class="list-disc text-gray-600 space-y-2">
              <li><b>双头D2-Net结构:</b> 使用一个双头模型，一个头按原始D2-Net方式训练，另一个头（RoRD）使用旋转增强数据训练。两个头共享骨干网络但拥有独立的描述子生成层。</li>
              <li><b>独立匹配与合并:</b> 输入一对图像时，两个头分别独立地检测关键点、计算描述子，并使用互最近邻（MNN）匹配算法建立初始对应关系。随后将两组对应集合并。</li>
              <li><b>RANSAC几何验证:</b> 合并后的初始匹配集包含大量正确的匹配（内点），但也混杂着错误的匹配（外点）。此时，RANSAC作为最后一道关键的“过滤器”发挥作用。</li>
            </ul>
          </div>
        </div>

        <div class="summary-highlight" data-reveal data-reveal-distance="48px">
          <p class="summary-highlight__text">核心优势总结：RoRD通过结合正交视图生成、专门的旋转鲁棒特征学习以及对应关系集成，显著提升了在极端视角变化（尤其是旋转）下的局部特征匹配性能，并在描述子匹配、姿态估计和视觉位置识别等任务上超越了多种基线和先进方法。</p>
        </div>
      </ReportSection>      <!-- AI技术版图交互式对比 -->
      <ReportSection 
        title="🗺️ AI技术版图：交互式对比"
        subtitle="针对上述挑战，我们探索了多种技术路径。点击下方标签，交互式地对比各类方法的原理与优劣，并查看其核心流程示意图。下方表格提供了关键特性的快速概览。"
        level={2}
      >
        <div class="tech-tabs-container">
          <div class="flex flex-wrap justify-center gap-2 mb-8" id="tab-buttons"></div>
          <div id="tab-content" class="glass-card p-6 md:p-8 rounded-xl min-h-[400px]"></div>
        </div>

        <div class="mt-12">
          <h3 class="text-2xl font-bold text-center mb-6 text-blue-500">技术特性综合对比表</h3>
          <GlassTable 
            headers={['特性维度', 'U-Net', 'YOLO', 'Transformer (ViT)', 'SuperPoint', 'RoRD']}
            rows={[
              ['核心原理', '语义分割', '目标检测', '全局自注意力', '自监督局部特征', '🎯 旋转鲁棒局部特征'],
              ['版图识别优势', '✅ 像素级精确轮廓', '✅ 检测速度快', '✅ 强大的全局上下文理解', '✅ 减轻标注负担；新模板适应性', '🌟 极强旋转鲁棒性；零/少样本潜力'],
              ['版图识别挑战', '❌ 标注成本极高', '❌ 小/密集目标难；标注成本高；类别爆炸', '❌ 数据量需求巨大；计算复杂度高', '⚠️ 纹理稀疏/重复结构难；极端旋转鲁棒性不足', '⚠️ 纹理稀疏/重复结构难；大规模匹配效率'],
              ['数据需求与策略', '大量像素级标注', '大量边界框标注', '巨量多样化数据预训练', '合成数据 (同形适应)', '🔄 合成旋转数据 (旋转单应性增强)'],
              ['新模板适应性', '❌ 差 (需重训)', '❌ 差 (需重训)', '⚠️ 中 (依赖预训练和微调)', '✅ 良好', '🌟 优秀'],
              ['旋转鲁棒性 (0-360°)', '❌ 低', '⚠️ 低-中', '⚠️ 中 (依赖数据)', '✅ 中-高', '🌟 非常高']
            ]}
            striped={true}
            bordered={true}
            className="tech-comparison-table"
          />
        </div>
      </ReportSection>

      <!-- IC版图RoRD模型调整章节 -->
      <ReportSection 
        title="🛠️ 针对IC版图的RoRD模型调整"
        subtitle="原始的RoRD是为处理真实世界的三维场景图像而设计的。要将其高效应用于IC版图识别，必须根据版图数据的独有特性进行针对性调整。"
        level={2}
      >
        <div class="space-y-8">
          <div class="deep-dive-card">
            <h3 class="text-2xl font-bold text-blue-500 mb-3">1. 移除正交视图生成组件</h3>
            <p class="text-gray-700">
              <strong>原因：</strong> 原始RoRD中的正交视图生成（无论是基于表面法线还是IPM）是为了校正由相机拍摄角度引起的透视畸变，将三维场景的倾斜视图转换为二维的鸟瞰图。然而，IC版图数据（如GDSII、OASIS格式）本质上就是精确的、无透视失真的二维几何矢量数据。它们本身就是“完美”的鸟瞰图。
            </p>
            <p class="mt-2 text-gray-700">
              <strong>调整：</strong> 因此，在我们的应用中，<strong>正交视图生成组件是完全不必要的，可以直接移除</strong>。我们将光栅化后的版图图像直接作为模型的输入，这不仅简化了流程，还避免了不必要的计算开销和可能引入的插值伪影。
            </p>
          </div>

          <div class="deep-dive-card">
            <h3 class="text-2xl font-bold text-blue-500 mb-3">2. 适应稀疏、二值化的特征</h3>
            <p class="text-gray-700 mb-3">
              <strong>挑战：</strong> 与包含丰富颜色和纹理的自然图像不同，IC版图图像通常是二值化（只有图形层和背景）、稀疏（大片空白区域）且充满重复的几何结构（如SRAM阵列）。这对基于VGG等在自然图像上预训练的特征提取器构成了挑战。
            </p>
            <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">调整策略：</h4>
            <ul class="list-disc text-gray-600 space-y-3">
              <li>
                <strong>聚焦角点特征:</strong> 版图的关键信息在于多边形的顶点（角点）和边缘。我们需要确保特征检测器（detector）能够高度关注这些几何角点，而不是在空白区域或简单的直线上寻找“兴趣点”。这可以通过专门设计的损失函数或修改网络结构来实现，使其对角点响应更敏感。
              </li>
              <li>
                <strong>定制化的数据增强:</strong> 放弃复杂的色彩、光照等增强。我们的训练数据生成将严格围绕IC版图的特性：以复杂的旋转、缩放、镜像变换为主，以及少量的涻音和光照变化。
              </li>
              <li>
                <strong>学习几何而非纹理的描述子:</strong> 通过上述定制化训练，模型中的描述子（descriptor）将被迫学习关键点周围局部区域的几何构型（如角点、边的相对位置和方向），而不是纹理信息。这使得描述子天然地适应了版图的稀疏和二值化特性，并能更好地区分具有相似局部几何但不同功能的结构。
              </li>
            </ul>
          </div>

          <div class="deep-dive-card">
            <h3 class="text-2xl font-bold text-blue-500 mb-3">3. 引入多尺度匹配策略以应对尺寸差异</h3>
            <p class="text-gray-700 mb-3">
              <strong>挑战：</strong> 现实应用中，待匹配的模板（如标准单元）与完整的大版图之间存在巨大的尺寸差异。例如，模板可能只有几百像素见方，而大版图的尺寸可达数十万像素。这种悬殊的比例使得直接进行特征匹配变得不可行。
            </p>
            <h4 class="font-semibold text-lg mt-4 mb-2 text-blue-600">调整策略：</h4>
            <ul class="list-disc text-gray-600 space-y-3">
              <li>
                <strong>A. 针对大版图的滑动窗口 (Sliding Window):</strong>
                <p>我们不会将巨大的版图一次性载入内存。取而代之，我们采用滑动窗口的策略：用一个固定大小（如1024x1024像素）的窗口，以一定的步长（如768像素）在大版图上进行滑动。在每个窗口内独立提取关键点和描述子，并将其坐标转换回大版图的全局坐标系。最终，我们将所有窗口的特征点聚合起来，形成一个代表整个大版图的、完整的特征点云。</p>
              </li>
              <li>
                <strong>B. 针对模板的图像金字塔 (Image Pyramid):</strong>
                <p>为了在未知尺度下找到模板，我们为模板构建一个图像金字塔。即，将模板图像缩放到一系列不同的比例（如0.75x, 1.0x, 1.5x）。在匹配时，我们会遍历金字塔中的每一个尺度的模板，用其提取的特征去和从大版图中聚合的完整特征点云进行匹配。</p>
              </li>
              <li>
                <strong>C. 尺度抖动 (Scale Jittering) 增强鲁棒性:</strong>
                <p>在训练过程中，除了旋转增强外，我们还会在一个小范围内（如0.8x 到 1.2x）随机缩放输入图像。这样，训练出来的描述子对轻微的尺度变化也会具有一定的鲁棒性。</p>
              </li>
            </ul>
            <div class="strategy-highlight" data-reveal data-reveal-distance="48px">
              <p class="strategy-highlight__text">综合效果：通过“滑动窗口”+“图像金字塔”+“尺度抖动”的组合策略，我们使RoRD模型能够在一个任意大的版图中，高效地找到尺寸未知的模板实例，完美解决了真实场景中的尺度挑战。</p>
            </div>
          </div>
        </div>
      </ReportSection>

      <!-- 初步尝试章节 -->
      <ReportSection 
        title="🖼️ 初步尝试"
        subtitle="以下RoRD进行集成电路版图匹配的样例"
        level={2}
      >
        <div class="space-y-10">
          <div>
            <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">初始匹配</h3>
            <div class="proof-image-container">
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (18).jpg"
                  alt="keypoints"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>keypoints</p>
              </div>
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (19).jpg"
                  alt="raw-match"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>raw-match</p>
              </div>
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (20).jpg"
                  alt="RANSAC-match"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>RANSAC-match</p>
              </div>
            </div>
          </div>

          <div>
            <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">屏蔽已匹配部分后的二次匹配</h3>
            <div class="proof-image-container">
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (21).jpg"
                  alt="keypoints"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>keypoints</p>
              </div>
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (22).jpg"
                  alt="raw-match"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>raw-match</p>
              </div>
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (23).jpg"
                  alt="RANSAC-match"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>RANSAC-match</p>
              </div>
            </div>
          </div>

          <div>
            <h3 class="text-xl font-semibold text-center mb-4 text-gray-700">八方向旋转下的匹配</h3>
            <div class="proof-image-container">
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (15).jpg"
                  alt="keypoints"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>keypoints</p>
              </div>
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (16).jpg"
                  alt="raw-match"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>raw-match</p>
              </div>
              <div class="proof-image-item">
                <ImageViewer
                  src="/report/20250609-images/image (17).jpg"
                  alt="RANSAC-match"
                  className="proof-image-viewer"
                  aspectRatio="5 / 3"
                />
                <p>RANSAC-match</p>
              </div>
            </div>
          </div>
        </div>
      </ReportSection>

      <!-- 应用与未来展望章节 -->
      <ReportSection 
        title="🚀 应用与未来展望"
        subtitle=""
        level={2}
      >
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="deep-dive-card">
            <h3 class="text-2xl font-bold mb-4 text-blue-500">🔭 未来工作重点</h3>
            <ul class="space-y-3 text-gray-700 list-disc list-inside">
              <li><strong>模型优化:</strong> 针对版图特有的稀疏、二值化特性，进一步优化RoRD网络结构与训练策略。</li>
              <li><strong>提升判别力:</strong> 研究新损失函数，增强描述子在版图高度重复结构区域（如存储阵列）的区分能力。</li>
              <li><strong>大规模匹配加速:</strong> 实现并优化近似最近邻(ANN)搜索算法，以支持对海量模板库的高效匹配。</li>
              <li><strong>端到端系统构建:</strong> 将RoRD集成到完整的版图分析流程中，赋能更高级的电路分析与缺陷诊断任务。</li>
            </ul>
          </div>

          <div class="deep-dive-card">
            <h3 class="text-2xl font-bold mb-4 text-blue-500">📅 项目规划与时间节点</h3>
            <ul class="space-y-4 text-gray-700">
              <li class="flex items-start">
                <span class="text-blue-500 font-bold w-32 shrink-0">2025年7月前</span>
                <span>完成针对IC版图的RoRD模型代码编写与初步调试。</span>
              </li>
              <li class="flex items-start">
                <span class="text-green-500 font-bold w-32 shrink-0">2026年2月前</span>
                <span>完成私有数据集的标注，并完成模型的全面训练与验证。</span>
              </li>
              <li class="flex items-start">
                <span class="text-purple-500 font-bold w-32 shrink-0">2026年6月前</span>
                <span>进行模型性能优化与代码重构，完成论文撰写，并尝试向相关领域的会议或期刊投稿。</span>
              </li>
            </ul>
          </div>
        </div>
      </ReportSection>
      </div>
    </div>
  </main>
  
  <Footer />
</BaseLayout>

<script>
  // 技术对比数据
  const techData = {
    "U-Net": {
      title: "U-Net (基于语义分割)",
      principle: "一种经典的图像分割架构，通过编码器-解码器结构和跳跃连接实现像素级别的分类，从而识别出属于特定模板的区域。",
      advantage: "能够提供精确的边界分割，理论上适合识别复杂形状的模板。",
      disadvantage: "对像素级精细标注数据极度依赖，标注成本极高；难以直接区分同一类别的多个不同实例。",
      suitability: "由于高昂的标注成本，在面对大规模、动态的版图库时显得力不从心。",
      flowchart: `
        <h4 class="font-semibold text-lg mt-6 mb-3 text-center text-gray-700">核心流程示意:</h4>
        <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2">
          <div class="algo-flow-box">输入图像</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">编码器 (特征提取<br/>& 下采样)</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">解码器 (特征融合<br/>& 上采样)</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">分割掩模</div>
        </div>
        <p class="text-xs text-gray-500 text-center mt-2">注：跳跃连接在编码器和解码器间传递信息。</p>
      `
    },
    "YOLO": {
      title: "YOLO (基于目标检测)",
      principle: "一类高效的目标检测框架，能够直接在图像上预测目标的边界框及类别标签。",
      advantage: "检测速度快，适合进行模板实例的快速计数与定位。",
      disadvantage: "仍需大量边界框标注；面对大量独特的模板类别时，存在\"类别爆炸\"问题；矩形框难以描述复杂形状模板。",
      suitability: "\"类别爆炸\"和边界框表征力不足，限制了其在多样化版图模板识别中的应用。",
      flowchart: `
        <h4 class="font-semibold text-lg mt-6 mb-3 text-center text-gray-700">核心流程示意:</h4>
        <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2">
          <div class="algo-flow-box">输入图像</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">骨干网络 (特征提取)</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">颈部 (特征融合)</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">头部 (预测边界框<br/>& 类别)</div>
        </div>
      `
    },
    "Transformer (ViT)": {
      title: "Transformer (ViT)",
      principle: "将图像分割成图像块(patches)序列，利用自注意力机制来捕捉图像的全局上下文信息。",
      advantage: "强大的全局上下文建模能力，理论上适合理解版图的整体结构。",
      disadvantage: "通常需要海量数据进行预训练（数据饥饿）；计算成本高；难以有效编码版图特有的几何与结构信息。",
      suitability: "数据需求量大和版图特有信息编码的难题是其主要应用障碍。",
      flowchart: `
        <h4 class="font-semibold text-lg mt-6 mb-3 text-center text-gray-700">核心流程示意:</h4>
        <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2">
          <div class="algo-flow-box">输入图像</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">图像分块<br/>& 线性嵌入</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">Transformer 编码器<br/>(自注意力机制)</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">输出 (分类头<br/>/特征表示)</div>
        </div>
      `
    },
    "SuperPoint": {
      title: "SuperPoint (自监督局部特征)",
      principle: "通过自监督学习框架（利用随机单应性变换）训练的CNN，用于同时检测兴趣点并计算其描述子。",
      advantage: "显著减轻标注负担；对新模板适应性强（一次训练，多次匹配）；对一般视角变化鲁棒。",
      disadvantage: "对纹理稀疏或重复结构区域特征提取难；对极端、全范围的旋转鲁棒性可能不足。",
      suitability: "是迈向正确方向的重要一步，但在旋转鲁棒性这一版图核心需求上仍有提升空间。",
      flowchart: `
        <h4 class="font-semibold text-lg mt-6 mb-3 text-center text-gray-700">核心流程示意:</h4>
        <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2">
          <div class="algo-flow-box">输入图像</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">兴趣点检测</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">描述子计算</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">特征匹配</div>
        </div>
        <p class="text-xs text-gray-500 text-center mt-2">自监督训练: 利用单应性变换生成训练数据</p>
      `
    },
    "RoRD": {
      title: "RoRD (旋转鲁棒局部特征)",
      principle: "通过学习旋转鲁棒描述子、正交视图生成和对应关系集成，实现对几何变换（尤其是旋转）的高度鲁棒匹配。",
      advantage: "极强的旋转鲁棒性（0-360°）；优秀的零/少样本匹配潜力；显著降低数据依赖；在基准测试中性能领先。",
      disadvantage: "与所有局部特征方法一样，面临极端纹理稀疏区域的挑战；大规模匹配需要效率优化。",
      suitability: "目前看来是版图模板识别领域最具前景的技术路径，精准应对了旋转、数据、扩展性三大核心痛点。",
      flowchart: `
        <h4 class="font-semibold text-lg mt-6 mb-3 text-center text-gray-700">核心流程示意:</h4>
        <div class="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-2 flex-wrap">
          <div class="algo-flow-box">输入图像对</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">正交视图生成</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">旋转鲁棒描述子</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">对应关系集成</div>
          <div class="algo-flow-arrow">→</div>
          <div class="algo-flow-box">RANSAC筛选</div>
        </div>
        <p class="text-xs text-gray-500 text-center mt-2">RoRD训练: 针对IC版图的8个方向进行几何增强</p>
      `
    }
  };

  // DOM加载完成后初始化
  document.addEventListener('DOMContentLoaded', function() {
    const tabButtonsContainer = document.getElementById('tab-buttons');
    const tabContentContainer = document.getElementById('tab-content');
    const techKeys = Object.keys(techData);

    if (!tabButtonsContainer || !tabContentContainer) return;

    function updateContent(techKey: string) {
      const data = techData[techKey as keyof typeof techData];
      if (tabContentContainer) {
        tabContentContainer.innerHTML = `
        <h3 class="text-2xl font-bold mb-4 text-blue-500">${data.title}</h3>
        <div class="space-y-4">
          <div>
            <h4 class="font-semibold text-lg mb-2 text-blue-600">核心原理</h4>
            <p class="text-gray-700">${data.principle}</p>
          </div>
          <div>
            <h4 class="font-semibold text-lg mb-2 text-blue-600">版图识别优势</h4>
            <p class="text-gray-700">${data.advantage}</p>
          </div>
          <div>
            <h4 class="font-semibold text-lg mb-2 text-blue-600">版图识别挑战</h4>
            <p class="text-gray-700">${data.disadvantage}</p>
          </div>
          <div>
            <h4 class="font-semibold text-lg mb-2 text-blue-600">适用性评估</h4>
            <p class="text-gray-700">${data.suitability}</p>
          </div>
          ${data.flowchart || ''}
        </div>
      `;
      }

      document.querySelectorAll('.tab-btn').forEach((btn: Element) => {
        btn.classList.remove('active');
        if ((btn as HTMLElement).dataset.tech === techKey) {
          btn.classList.add('active');
        }
      });
    }

    // 创建标签按钮
    techKeys.forEach((key: string) => {
      const button = document.createElement('button');
      button.textContent = key;
      button.dataset.tech = key;
      button.className = 'tab-btn px-4 py-2 rounded-full text-sm font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors duration-300';
      button.addEventListener('click', () => updateContent(key));
      if (tabButtonsContainer) {
        tabButtonsContainer.appendChild(button);
      }
    });

    // 默认显示RoRD
    updateContent(techKeys[techKeys.length - 1]);
  });
</script>

<style>
  .report-main {
    min-height: 100vh;
    padding-bottom: 2rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: transparent;
    color: #333d4b;
    position: relative;
  }
  
  .report-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
      rgba(174, 206, 221, 0.1) 0%, 
      rgba(177, 217, 212, 0.05) 25%, 
      rgba(178, 197, 213, 0.03) 50%, 
      rgba(155, 181, 200, 0.05) 75%, 
      rgba(122, 153, 176, 0.1) 100%
    );
    pointer-events: none;
    z-index: -1;
  }

  .report-layout {
    --report-sidebar-width: clamp(260px, 22vw, 320px);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
    width: 100%;
  }

  .report-content {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }
  
  .container {
    max-width: 1200px;
    width: 100%;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .report-header {
    padding: 4rem 0 2rem 0;
    text-align: center;
  }
  
  .report-title {
    font-size: 3rem;
    font-weight: 800;
    color: #3b82f6;
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }
  
  .report-subtitle {
    font-size: 1.25rem;
    color: #2c4a6b;
    margin: 0 0 2rem 0;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .report-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
  }
  
  .report-date,
  .report-type {
    background: rgba(91, 119, 142, 0.1);
    color: #011a2d;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
  }
  
  .report-action {
    margin-top: 2rem;
  }
  
  .challenge-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 116, 144, 0.12));
    padding: 1.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .summary-highlight {
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
    padding: 1.75rem 2.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(59, 130, 246, 0.14));
    border-radius: 1.25rem;
    border: 1px solid rgba(45, 212, 191, 0.45);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(18px);
    color: #0f172a;
    position: relative;
    overflow: hidden;
  }

  .summary-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 55%);
    opacity: 0.65;
    pointer-events: none;
  }

  .summary-highlight__text {
    position: relative;
    font-weight: 600;
    font-size: 1.05rem;
    color: inherit;
  }

  .strategy-highlight {
    margin-top: 1.5rem;
    text-align: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.22), rgba(59, 130, 246, 0.16));
    border-radius: 1.1rem;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(14px);
    color: #0f172a;
    position: relative;
    overflow: hidden;
  }

  .strategy-highlight::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.45), transparent 60%);
    opacity: 0.6;
    pointer-events: none;
  }

  .strategy-highlight__text {
    position: relative;
    font-weight: 600;
    font-size: 1rem;
    color: inherit;
    line-height: 1.7;
  }
  
  .challenge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    border-color: rgba(14, 116, 144, 0.45);
  }
  
  .challenge-title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #3b82f6;
  }
  
  .challenge-description {
    color: #4b5563;
  }
  
  .goal-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(91, 119, 142, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .section-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3b82f6;
    margin: 0 0 1rem 0;
  }
  
  .research-pillars {
    list-style: none;
    padding: 0;
    space-y: 1rem;
  }
  
  .research-pillars li {
    background: rgba(91, 119, 142, 0.05);
    border-left: 4px solid #5b778e;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
  }
  
  .rord-component {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(91, 119, 142, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
  }
  
  .component-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .component-icon {
    font-size: 3rem;
  }
  
  .component-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #5b778e;
    letter-spacing: 0.05em;
  }
  
  .component-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    margin: 0.25rem 0 0 0;
  }
  
  .component-description {
    color: #2c4a6b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  
  .implementation-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #3b82f6;
    margin: 1.5rem 0 1rem 0;
  }
  
  .implementation-list {
    list-style: none;
    padding: 0;
  }
  
  .implementation-list li {
    background: rgba(91, 119, 142, 0.05);
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    border-left: 3px solid #5b778e;
  }
  
  /* 技术对比表格定制样式 */
  .tech-comparison-table {
    margin: 2rem 0;
  }
  
  .tech-comparison-table .glass-table th:last-child {
    background: rgba(59, 130, 246, 0.15);
    color: #1e40af;
    font-weight: 700;
  }
  
  .tech-comparison-table .glass-table td:last-child {
    background: rgba(59, 130, 246, 0.08);
    font-weight: 600;
    color: #1e40af;
  }
  
  .tech-tabs-container {
    margin: 2rem 0;
  }
  
  .glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
  }
  
  .deep-dive-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(91, 119, 142, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
  }
  
  .proof-image-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
  }
  
  .proof-image-item {
    text-align: center;
  }
  
  :global(.proof-image-viewer) {
    margin: 0;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  :global(.proof-image-viewer:hover) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.15);
  }

  :global(.proof-image-viewer .image-container) {
    aspect-ratio: 5 / 3;
  }

  :global(.proof-image-viewer .viewer-image) {
    object-fit: cover;
  }
  
  .proof-image-item p {
    text-align: center;
    font-size: 0.875rem;
    color: #4b5563;
    margin-top: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .report-title {
      font-size: 2rem;
    }
    
    .report-subtitle {
      font-size: 1.1rem;
    }
    
    .report-meta {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    
    .deep-dive-card {
      padding: 1.5rem;
    }
    

    
    .grid {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 1280px) {
    .report-main {
      padding-left: clamp(
        calc(var(--report-sidebar-width, 320px) + 3rem),
        calc((100vw - 1200px) / 2 + 2rem),
        calc(var(--report-sidebar-width, 320px) + 4rem)
      );
      padding-right: clamp(2.5rem, calc((100vw - 1200px) / 2 + 2rem), 5rem);
    }

    .report-layout {
      max-width: 1200px;
      margin: 0 auto;
    }

    .report-content {
      max-width: 1200px;
      width: 100%;
    }
  }
  
  .tab-btn {
    transition: background-color 0.3s, color 0.3s;
  }
  
  .tab-btn.active {
    background-color: #27797f !important;
    color: #ffffff !important;
  }
  
  .algo-flow-box {
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-align: center;
    font-size: 0.875rem;
    min-width: 100px;
  }
  
  .algo-flow-arrow {
    color: #94a3b8;
    font-weight: bold;
    font-size: 1.5rem;
  }
  
  .math-intro {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(91, 119, 142, 0.2);
    border-radius: 1rem;
    padding: 2rem;
  }
  
  .grid {
    display: grid;
  }
  
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  
  @media (min-width: 768px) {
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 1024px) {
    .lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  
  .gap-8 {
    gap: 2rem;
  }
  
  .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .space-y-8 > * + * {
    margin-top: 2rem;
  }
  
  .space-y-10 > * + * {
    margin-top: 2.5rem;
  }
  
  .space-y-3 > * + * {
    margin-top: 0.75rem;
  }
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  .flex {
    display: flex;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .items-center {
    align-items: center;
  }
  
  .items-start {
    align-items: flex-start;
  }
  
  .mb-8 {
    margin-bottom: 2rem;
  }
  
  .mb-4 {
    margin-bottom: 1rem;
  }
  
  .mb-3 {
    margin-bottom: 0.75rem;
  }
  
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  
  .mt-4 {
    margin-top: 1rem;
  }
  
  .mt-12 {
    margin-top: 3rem;
  }
  
  .text-center {
    text-align: center;
  }
  
  .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  
  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  
  .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  .font-bold {
    font-weight: 700;
  }
  
  .font-semibold {
    font-weight: 600;
  }
  
  .font-medium {
    font-weight: 500;
  }
  
  .text-gray-700 {
    color: #374151;
  }
  
  .text-gray-600 {
    color: #4b5563;
  }
  
  .text-gray-500 {
    color: #6b7280;
  }
  
  .text-blue-500 {
    color: #3b82f6;
  }
  
  .text-blue-600 {
    color: #2563eb;
  }
  
  .text-blue-700 {
    color: #1d4ed8;
  }
  
  .text-green-500 {
    color: #10b981;
  }
  
  .text-green-600 {
    color: #059669;
  }
  
  .text-green-700 {
    color: #047857;
  }
  
  .text-purple-500 {
    color: #8b5cf6;
  }
  
  .text-purple-600 {
    color: #7c3aed;
  }
  
  .text-purple-700 {
    color: #6d28d9;
  }
  
  .bg-gray-200 {
    background-color: #e5e7eb;
  }
  
  .hover\:bg-gray-300:hover {
    background-color: #d1d5db;
  }
  
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
  .p-6 {
    padding: 1.5rem;
  }
  
  .p-4 {
    padding: 1rem;
  }
  
  .rounded-full {
    border-radius: 9999px;
  }
  
  .rounded-xl {
    border-radius: 0.75rem;
  }
  
  .rounded-r-lg {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
  }
  
  .min-h-\[400px\] {
    min-height: 400px;
  }
  
  .w-32 {
    width: 8rem;
  }
  
  .shrink-0 {
    flex-shrink: 0;
  }
  
  .max-w-3xl {
    max-width: 48rem;
  }
  
  .max-w-4xl {
    max-width: 56rem;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .bg-\[\#27797f\] {
    background-color: #27797f;
  }
  
  .hover\:bg-\[\#1e6066\]:hover {
    background-color: #1e6066;
  }
  
  .text-white {
    color: #ffffff;
  }
  
  .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  
  .duration-300 {
    transition-duration: 300ms;
  }
  
  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  
  .bg-teal-50 {
    background-color: #f0fdfa;
  }
  
  .border-l-4 {
    border-left-width: 4px;
  }
  
  .border-teal-500 {
    border-color: #14b8a6;
  }
  
  .text-teal-800 {
    color: #115e59;
  }
  
  .bg-sky-50 {
    background-color: #f0f9ff;
  }
  
  .border-sky-500 {
    border-color: #0ea5e9;
  }
  
  .text-sky-800 {
    color: #075985;
  }
  
  .mr-4 {
    margin-right: 1rem;
  }
  
  .block {
    display: block;
  }
  
  .mt-2 {
    margin-top: 0.5rem;
  }
  
  .text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .list-disc {
    list-style-type: disc;
  }
  
  .list-inside {
    list-style-position: inside;
  }
  
  .overflow-x-auto {
    overflow-x: auto;
  }
  
  .min-w-full {
    min-width: 100%;
  }
  
  .shadow-md {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }
  
  .rounded-lg {
    border-radius: 0.5rem;
  }
  
  .w-1\/6 {
    width: 16.666667%;
  }
  
  .aspect-ratio-5\/3 {
    aspect-ratio: 5 / 3;
  }
  
  .object-fit-cover {
    object-fit: cover;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }
  
  .sm\:flex-row {
    @media (min-width: 640px) {
      flex-direction: row;
    }
  }
  
  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    @media (min-width: 640px) {
      margin-top: 0;
    }
  }
  
  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    @media (min-width: 640px) {
      margin-left: 0.5rem;
    }
  }
  
  .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.5rem;
  }
  
  .flex-col {
    flex-direction: column;
  }
  
  .gap-2 {
    gap: 0.5rem;
  }
  
  .md\:p-8 {
    @media (min-width: 768px) {
      padding: 2rem;
    }
  }
  
  .mb-6 {
    margin-bottom: 1.5rem;
  }
  
  .mt-6 {
    margin-top: 1.5rem;
  }
  
  .list-style-none {
    list-style: none;
  }
  
  .pl-0 {
    padding-left: 0;
  }
  
  @media (max-width: 640px) {
    .sm\:flex-row {
      flex-direction: column;
    }
    
    .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
      margin-left: 0;
    }
    
    .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
      margin-top: 0.5rem;
    }
  }
  
  .list-disc {
    list-style-type: disc;
  }
  
  .list-inside {
    list-style-position: inside;
  }
  
  .overflow-x-auto {
    overflow-x: auto;
  }
</style>