@incremark/theme 0.2.3

package/dist/styles.css

@@ -0,0 +1,937 @@
+/**
+ * 样式主入口
+ * 
+ * 导入所有样式文件
+ */
+/**
+ * 基础样式
+ */
+/**
+ * Less 变量定义
+ * 
+ * 这些变量引用 CSS Variables，在运行时可以通过 ThemeProvider 动态修改
+ * 
+ * 注意：CSS Variables 定义在 css-variables.less 中（由脚本自动生成）
+ */
+/**
+ * CSS Variables 定义
+ * 
+ * ⚠️ 此文件由脚本自动生成，请勿手动编辑
+ * 生成脚本: scripts/generate-css-variables.ts
+ * 数据来源: src/tokens/*.ts 和 src/themes/*.ts
+ */
+/* ============================================
+   默认主题 CSS Variables
+   ============================================ */
+:root {
+  --incremark-base-colors-blue-1: #FCFDFF;
+  --incremark-base-colors-blue-2: #D6E6FF;
+  --incremark-base-colors-blue-3: #B0CEFF;
+  --incremark-base-colors-blue-4: #8AB6FF;
+  --incremark-base-colors-blue-5: #639EFF;
+  --incremark-base-colors-blue-6: #3B82F6;
+  --incremark-base-colors-blue-7: #296BD7;
+  --incremark-base-colors-blue-8: #1A56B9;
+  --incremark-base-colors-blue-9: #0E439A;
+  --incremark-base-colors-blue-10: #05327C;
+  --incremark-base-colors-purple-1: #FFFFFF;
+  --incremark-base-colors-purple-2: #F8F1FF;
+  --incremark-base-colors-purple-3: #E5CBFF;
+  --incremark-base-colors-purple-4: #D3A4FF;
+  --incremark-base-colors-purple-5: #C07EFF;
+  --incremark-base-colors-purple-6: #A855F7;
+  --incremark-base-colors-purple-7: #8E40D8;
+  --incremark-base-colors-purple-8: #752DBA;
+  --incremark-base-colors-purple-9: #5E1E9B;
+  --incremark-base-colors-purple-10: #49127D;
+  --incremark-base-colors-green-1: #D5FFF1;
+  --incremark-base-colors-green-2: #AFFFE5;
+  --incremark-base-colors-green-3: #84F6D0;
+  --incremark-base-colors-green-4: #57E2B4;
+  --incremark-base-colors-green-5: #31CD99;
+  --incremark-base-colors-green-6: #10B981;
+  --incremark-base-colors-green-7: #069A69;
+  --incremark-base-colors-green-8: #007C53;
+  --incremark-base-colors-green-9: #005D3E;
+  --incremark-base-colors-green-10: #003F2A;
+  --incremark-base-colors-red-1: #FFFFFF;
+  --incremark-base-colors-red-2: #FFE2E2;
+  --incremark-base-colors-red-3: #FFBBBB;
+  --incremark-base-colors-red-4: #FF9595;
+  --incremark-base-colors-red-5: #FF6F6F;
+  --incremark-base-colors-red-6: #EF4444;
+  --incremark-base-colors-red-7: #D03131;
+  --incremark-base-colors-red-8: #B22121;
+  --incremark-base-colors-red-9: #931414;
+  --incremark-base-colors-red-10: #750A0A;
+  --incremark-base-colors-orange-1: #FFE7D6;
+  --incremark-base-colors-orange-2: #FFD0B0;
+  --incremark-base-colors-orange-3: #FFBA89;
+  --incremark-base-colors-orange-4: #FFA363;
+  --incremark-base-colors-orange-5: #FF8C3D;
+  --incremark-base-colors-orange-6: #F97316;
+  --incremark-base-colors-orange-7: #DA5E08;
+  --incremark-base-colors-orange-8: #BC4D00;
+  --incremark-base-colors-orange-9: #9D4000;
+  --incremark-base-colors-orange-10: #7F3400;
+  --incremark-base-colors-cyan-1: #C6F7FF;
+  --incremark-base-colors-cyan-2: #A0F1FF;
+  --incremark-base-colors-cyan-3: #7AECFF;
+  --incremark-base-colors-cyan-4: #53E4FD;
+  --incremark-base-colors-cyan-5: #29CDE8;
+  --incremark-base-colors-cyan-6: #06B6D4;
+  --incremark-base-colors-cyan-7: #009BB5;
+  --incremark-base-colors-cyan-8: #008197;
+  --incremark-base-colors-cyan-9: #006778;
+  --incremark-base-colors-cyan-10: #004D5A;
+  --incremark-color-neutral-1: #ffffff;
+  --incremark-color-neutral-2: #f8f9fc;
+  --incremark-color-neutral-3: #f1f3f8;
+  --incremark-color-neutral-4: #e2e5ec;
+  --incremark-color-neutral-5: #cdd1da;
+  --incremark-color-neutral-6: #9ca4b1;
+  --incremark-color-neutral-7: #677284;
+  --incremark-color-neutral-8: #34435a;
+  --incremark-color-neutral-9: #011431;
+  --incremark-color-neutral-10: #01122d;
+  --incremark-color-brand-primary: #3B82F6;
+  --incremark-color-brand-primary-hover: #296BD7;
+  --incremark-color-brand-primary-active: #1A56B9;
+  --incremark-color-brand-primary-light: #D6E6FF;
+  --incremark-color-text-primary: #34435a;
+  --incremark-color-text-secondary: #677284;
+  --incremark-color-text-tertiary: #9ca4b1;
+  --incremark-color-text-inverse: #ffffff;
+  --incremark-color-background-base: #ffffff;
+  --incremark-color-background-elevated: #f8f9fc;
+  --incremark-color-background-overlay: rgba(1, 20, 49, 0.6);
+  --incremark-color-border-default: #e2e5ec;
+  --incremark-color-border-subtle: #f1f3f8;
+  --incremark-color-border-strong: #677284;
+  --incremark-color-code-inline-background: #f1f3f8;
+  --incremark-color-code-inline-text: #34435a;
+  --incremark-color-code-block-background: #011431;
+  --incremark-color-code-block-text: #f8f9fc;
+  --incremark-color-code-header-background: #01122d;
+  --incremark-color-status-pending: #A855F7;
+  --incremark-color-status-completed: #10B981;
+  --incremark-color-interactive-link: #3B82F6;
+  --incremark-color-interactive-link-hover: #296BD7;
+  --incremark-color-interactive-link-visited: #8E40D8;
+  --incremark-color-interactive-checked: #10B981;
+  --incremark-typography-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --incremark-typography-font-family-mono: 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
+  --incremark-typography-font-size-xs: 11px;
+  --incremark-typography-font-size-sm: 12px;
+  --incremark-typography-font-size-base: 14px;
+  --incremark-typography-font-size-md: 16px;
+  --incremark-typography-font-size-lg: 18px;
+  --incremark-typography-font-size-heading-h1: 2em;
+  --incremark-typography-font-size-heading-h2: 1.5em;
+  --incremark-typography-font-size-heading-h3: 1.25em;
+  --incremark-typography-font-size-heading-h4: 1em;
+  --incremark-typography-font-size-heading-h5: 0.875em;
+  --incremark-typography-font-size-heading-h6: 0.85em;
+  --incremark-typography-font-weight-normal: 400;
+  --incremark-typography-font-weight-medium: 500;
+  --incremark-typography-font-weight-semibold: 600;
+  --incremark-typography-font-weight-bold: 700;
+  --incremark-typography-line-height-tight: 1.25;
+  --incremark-typography-line-height-normal: 1.5;
+  --incremark-typography-line-height-relaxed: 1.75;
+  --incremark-spacing-xs: 4px;
+  --incremark-spacing-sm: 8px;
+  --incremark-spacing-md: 12px;
+  --incremark-spacing-lg: 16px;
+  --incremark-spacing-xl: 24px;
+  --incremark-border-radius-sm: 4px;
+  --incremark-border-radius-md: 8px;
+  --incremark-border-radius-lg: 12px;
+  --incremark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --incremark-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --incremark-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --incremark-animation-duration-fast: 150ms;
+  --incremark-animation-duration-normal: 200ms;
+  --incremark-animation-duration-slow: 300ms;
+  --incremark-animation-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --incremark-animation-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+/* ============================================
+   深色主题 CSS Variables
+   ============================================ */
+[data-theme="dark"],
+.theme-dark {
+  --incremark-base-colors-blue-1: #FCFDFF;
+  --incremark-base-colors-blue-2: #D6E6FF;
+  --incremark-base-colors-blue-3: #B0CEFF;
+  --incremark-base-colors-blue-4: #8AB6FF;
+  --incremark-base-colors-blue-5: #639EFF;
+  --incremark-base-colors-blue-6: #3B82F6;
+  --incremark-base-colors-blue-7: #296BD7;
+  --incremark-base-colors-blue-8: #1A56B9;
+  --incremark-base-colors-blue-9: #0E439A;
+  --incremark-base-colors-blue-10: #05327C;
+  --incremark-base-colors-purple-1: #FFFFFF;
+  --incremark-base-colors-purple-2: #F8F1FF;
+  --incremark-base-colors-purple-3: #E5CBFF;
+  --incremark-base-colors-purple-4: #D3A4FF;
+  --incremark-base-colors-purple-5: #C07EFF;
+  --incremark-base-colors-purple-6: #A855F7;
+  --incremark-base-colors-purple-7: #8E40D8;
+  --incremark-base-colors-purple-8: #752DBA;
+  --incremark-base-colors-purple-9: #5E1E9B;
+  --incremark-base-colors-purple-10: #49127D;
+  --incremark-base-colors-green-1: #D5FFF1;
+  --incremark-base-colors-green-2: #AFFFE5;
+  --incremark-base-colors-green-3: #84F6D0;
+  --incremark-base-colors-green-4: #57E2B4;
+  --incremark-base-colors-green-5: #31CD99;
+  --incremark-base-colors-green-6: #10B981;
+  --incremark-base-colors-green-7: #069A69;
+  --incremark-base-colors-green-8: #007C53;
+  --incremark-base-colors-green-9: #005D3E;
+  --incremark-base-colors-green-10: #003F2A;
+  --incremark-base-colors-red-1: #FFFFFF;
+  --incremark-base-colors-red-2: #FFE2E2;
+  --incremark-base-colors-red-3: #FFBBBB;
+  --incremark-base-colors-red-4: #FF9595;
+  --incremark-base-colors-red-5: #FF6F6F;
+  --incremark-base-colors-red-6: #EF4444;
+  --incremark-base-colors-red-7: #D03131;
+  --incremark-base-colors-red-8: #B22121;
+  --incremark-base-colors-red-9: #931414;
+  --incremark-base-colors-red-10: #750A0A;
+  --incremark-base-colors-orange-1: #FFE7D6;
+  --incremark-base-colors-orange-2: #FFD0B0;
+  --incremark-base-colors-orange-3: #FFBA89;
+  --incremark-base-colors-orange-4: #FFA363;
+  --incremark-base-colors-orange-5: #FF8C3D;
+  --incremark-base-colors-orange-6: #F97316;
+  --incremark-base-colors-orange-7: #DA5E08;
+  --incremark-base-colors-orange-8: #BC4D00;
+  --incremark-base-colors-orange-9: #9D4000;
+  --incremark-base-colors-orange-10: #7F3400;
+  --incremark-base-colors-cyan-1: #C6F7FF;
+  --incremark-base-colors-cyan-2: #A0F1FF;
+  --incremark-base-colors-cyan-3: #7AECFF;
+  --incremark-base-colors-cyan-4: #53E4FD;
+  --incremark-base-colors-cyan-5: #29CDE8;
+  --incremark-base-colors-cyan-6: #06B6D4;
+  --incremark-base-colors-cyan-7: #009BB5;
+  --incremark-base-colors-cyan-8: #008197;
+  --incremark-base-colors-cyan-9: #006778;
+  --incremark-base-colors-cyan-10: #004D5A;
+  --incremark-color-neutral-1: #0a1628;
+  --incremark-color-neutral-2: #162033;
+  --incremark-color-neutral-3: #273548;
+  --incremark-color-neutral-4: #546070;
+  --incremark-color-neutral-5: #8891a0;
+  --incremark-color-neutral-6: #cdd1da;
+  --incremark-color-neutral-7: #e2e5ec;
+  --incremark-color-neutral-8: #f1f3f8;
+  --incremark-color-neutral-9: #f8f9fc;
+  --incremark-color-neutral-10: #ffffff;
+  --incremark-color-brand-primary: #60A5FA;
+  --incremark-color-brand-primary-hover: #498BDB;
+  --incremark-color-brand-primary-active: #3672BD;
+  --incremark-color-brand-primary-light: #FBFDFF;
+  --incremark-color-text-primary: #f1f3f8;
+  --incremark-color-text-secondary: #e2e5ec;
+  --incremark-color-text-tertiary: #cdd1da;
+  --incremark-color-text-inverse: #0a1628;
+  --incremark-color-background-base: #0a1628;
+  --incremark-color-background-elevated: #162033;
+  --incremark-color-background-overlay: rgba(0, 0, 0, 0.75);
+  --incremark-color-border-subtle: #273548;
+  --incremark-color-border-default: #546070;
+  --incremark-color-border-strong: #e2e5ec;
+  --incremark-color-code-inline-background: #273548;
+  --incremark-color-code-inline-text: #f1f3f8;
+  --incremark-color-code-block-background: #273548;
+  --incremark-color-code-block-text: #f8f9fc;
+  --incremark-color-code-header-background: #162033;
+  --incremark-color-status-pending: #C084FC;
+  --incremark-color-status-completed: #34D399;
+  --incremark-color-interactive-link: #60A5FA;
+  --incremark-color-interactive-link-hover: #498BDB;
+  --incremark-color-interactive-link-visited: #E9D2FF;
+  --incremark-color-interactive-checked: #34D399;
+  --incremark-typography-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --incremark-typography-font-family-mono: 'Fira Code', 'SF Mono', 'Monaco', 'Consolas', monospace;
+  --incremark-typography-font-size-xs: 11px;
+  --incremark-typography-font-size-sm: 12px;
+  --incremark-typography-font-size-base: 14px;
+  --incremark-typography-font-size-md: 16px;
+  --incremark-typography-font-size-lg: 18px;
+  --incremark-typography-font-size-heading-h1: 2em;
+  --incremark-typography-font-size-heading-h2: 1.5em;
+  --incremark-typography-font-size-heading-h3: 1.25em;
+  --incremark-typography-font-size-heading-h4: 1em;
+  --incremark-typography-font-size-heading-h5: 0.875em;
+  --incremark-typography-font-size-heading-h6: 0.85em;
+  --incremark-typography-font-weight-normal: 400;
+  --incremark-typography-font-weight-medium: 500;
+  --incremark-typography-font-weight-semibold: 600;
+  --incremark-typography-font-weight-bold: 700;
+  --incremark-typography-line-height-tight: 1.25;
+  --incremark-typography-line-height-normal: 1.5;
+  --incremark-typography-line-height-relaxed: 1.75;
+  --incremark-spacing-xs: 4px;
+  --incremark-spacing-sm: 8px;
+  --incremark-spacing-md: 12px;
+  --incremark-spacing-lg: 16px;
+  --incremark-spacing-xl: 24px;
+  --incremark-border-radius-sm: 4px;
+  --incremark-border-radius-md: 8px;
+  --incremark-border-radius-lg: 12px;
+  --incremark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --incremark-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --incremark-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --incremark-animation-duration-fast: 150ms;
+  --incremark-animation-duration-normal: 200ms;
+  --incremark-animation-duration-slow: 300ms;
+  --incremark-animation-easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --incremark-animation-easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+/* ============ 颜色系统 ============ */
+/* ============ 字体系统 ============ */
+/* ============ 间距系统 ============ */
+/* ============ 边框系统 ============ */
+/* ============ 阴影系统 ============ */
+/* ============ 动画系统 ============ */
+.incremark-theme-provider {
+  height: 100%;
+}
+/* ============ 主容器 ============ */
+.incremark {
+  font-family: var(--incremark-typography-font-family-base);
+  line-height: var(--incremark-typography-line-height-normal);
+  color: var(--incremark-color-text-primary);
+  background-color: var(--incremark-color-background-base);
+  min-height: 100%;
+}
+/* ============ 链接样式 ============ */
+.incremark a {
+  color: var(--incremark-color-interactive-link);
+  text-decoration: none;
+  transition: color var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+}
+.incremark a:hover {
+  color: var(--incremark-color-interactive-link-hover);
+  text-decoration: underline;
+}
+.incremark a:visited {
+  color: var(--incremark-color-interactive-link-visited);
+}
+/* ============ 块状态显示 ============ */
+.incremark-block {
+  transition: border-color var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+}
+.incremark-block.pending,
+.incremark-block.incremark-pending {
+  border-left: 3px solid var(--incremark-color-status-pending);
+  padding-left: var(--incremark-spacing-lg);
+  opacity: 0.8;
+}
+.incremark-block.incremark-show-status.incremark-pending {
+  border-left: 3px solid var(--incremark-color-status-pending);
+  padding-left: var(--incremark-spacing-lg);
+  opacity: 0.8;
+}
+/* ============ 动画效果 ============ */
+.incremark-fade-in {
+  animation: incremark-fade-in var(--incremark-animation-duration-slow) var(--incremark-animation-easing-ease-out);
+}
+@keyframes incremark-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+/* Vue Transition 支持 */
+.incremark-fade-enter-active {
+  transition: opacity var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+}
+.incremark-fade-enter-from {
+  opacity: 0;
+}
+.incremark-fade-leave-active {
+  transition: opacity var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+}
+.incremark-fade-leave-to {
+  opacity: 0;
+}
+/**
+ * Button 组件样式
+ * 
+ * 公共按钮样式，供代码块、Mermaid 图表等使用
+ */
+/* ============ 基础按钮样式 ============ */
+.incremark-btn {
+  padding: var(--incremark-spacing-xs) var(--incremark-spacing-md);
+  border: 1px solid var(--incremark-color-border-default);
+  border-radius: var(--incremark-border-radius-sm);
+  background: transparent;
+  color: var(--incremark-color-text-tertiary);
+  font-size: var(--incremark-typography-font-size-sm);
+  font-weight: var(--incremark-typography-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+  user-select: none;
+  white-space: nowrap;
+}
+.incremark-btn:hover:not(:disabled) {
+  background-color: var(--incremark-color-background-elevated);
+  color: var(--incremark-color-text-primary);
+  border-color: var(--incremark-color-border-strong);
+}
+.incremark-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.incremark-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* ============ 代码块专用按钮 ============ */
+.incremark-code-btn {
+  padding: var(--incremark-spacing-xs) var(--incremark-spacing-md);
+  border: 1px solid var(--incremark-color-border-strong);
+  border-radius: var(--incremark-border-radius-sm);
+  background: transparent;
+  color: var(--incremark-color-text-tertiary);
+  font-size: var(--incremark-typography-font-size-sm);
+  font-weight: var(--incremark-typography-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+  user-select: none;
+  white-space: nowrap;
+}
+.incremark-code-btn:hover:not(:disabled) {
+  background-color: var(--incremark-color-border-strong);
+  color: var(--incremark-color-text-inverse);
+}
+.incremark-code-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.incremark-code-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/**
+ * Heading 组件样式
+ */
+.incremark-heading {
+  margin: var(--incremark-spacing-md) 0;
+  font-weight: var(--incremark-typography-font-weight-semibold);
+  line-height: var(--incremark-typography-line-height-tight);
+  color: var(--incremark-color-text-primary);
+  /* h1 特殊样式：带下边框 */
+  /* h6 特殊样式：颜色较淡 */
+}
+.incremark-heading.h1 {
+  font-size: var(--incremark-typography-font-size-heading-h1);
+  border-bottom: 1px solid var(--incremark-color-border-default);
+  padding-bottom: var(--incremark-spacing-sm);
+}
+.incremark-heading.h2 {
+  font-size: var(--incremark-typography-font-size-heading-h2);
+}
+.incremark-heading.h3 {
+  font-size: var(--incremark-typography-font-size-heading-h3);
+}
+.incremark-heading.h4 {
+  font-size: var(--incremark-typography-font-size-heading-h4);
+}
+.incremark-heading.h5 {
+  font-size: var(--incremark-typography-font-size-heading-h5);
+}
+.incremark-heading.h6 {
+  font-size: var(--incremark-typography-font-size-heading-h6);
+  color: var(--incremark-color-text-secondary);
+}
+/**
+ * Paragraph 组件样式
+ */
+.incremark-paragraph {
+  margin: var(--incremark-spacing-lg) 0;
+  line-height: var(--incremark-typography-line-height-normal);
+  color: var(--incremark-color-text-primary);
+}
+/**
+ * Inline Code 组件样式
+ */
+.incremark-inline-code {
+  padding: var(--incremark-spacing-xs) var(--incremark-spacing-sm);
+  background: var(--incremark-color-code-inline-background);
+  border-radius: var(--incremark-border-radius-sm);
+  font-family: var(--incremark-typography-font-family-mono);
+  font-size: var(--incremark-typography-font-size-sm);
+  color: var(--incremark-color-code-inline-text);
+}
+/**
+ * Image 组件样式
+ */
+.incremark-image {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: var(--incremark-spacing-md) 0;
+}
+/**
+ * List 组件样式
+ */
+/* ============ 列表容器 ============ */
+.incremark-list {
+  margin: var(--incremark-spacing-lg) 0;
+  padding-left: 2em;
+  /* 任务列表：移除默认标记 */
+}
+.incremark-list.task-list {
+  list-style: none;
+  padding-left: 0;
+}
+/* ============ 列表项 ============ */
+.incremark-list-item {
+  margin: var(--incremark-spacing-sm) 0;
+  line-height: var(--incremark-typography-line-height-normal);
+  /* 任务列表项：移除标记 */
+}
+.incremark-list-item.task-item {
+  list-style: none;
+  /* 任务标签容器 */
+}
+.incremark-list-item.task-item .task-label {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--incremark-spacing-sm);
+  cursor: default;
+  /* 复选框 */
+  /* 任务内容 */
+}
+.incremark-list-item.task-item .task-label .checkbox {
+  margin-top: 0.3em;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--incremark-color-interactive-checked);
+}
+.incremark-list-item.task-item .task-label .checkbox:checked {
+  accent-color: var(--incremark-color-interactive-checked);
+}
+.incremark-list-item.task-item .task-label .task-content {
+  flex: 1;
+}
+/**
+ * Table 组件样式
+ */
+.incremark-table-wrapper {
+  overflow-x: auto;
+  margin: var(--incremark-spacing-lg) 0;
+}
+.incremark-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--incremark-typography-font-size-base);
+  /* 固定表格布局，避免打字机效果时列宽抖动 */
+  table-layout: fixed;
+}
+.incremark-table th,
+.incremark-table td {
+  border: 1px solid var(--incremark-color-border-default);
+  padding: var(--incremark-spacing-md) var(--incremark-spacing-lg);
+}
+.incremark-table th {
+  background: var(--incremark-color-background-elevated);
+  font-weight: var(--incremark-typography-font-weight-semibold);
+}
+.incremark-table tr:nth-child(even) {
+  background: var(--incremark-color-background-elevated);
+}
+/**
+ * Blockquote 组件样式
+ */
+.incremark-blockquote {
+  position: relative;
+  margin: var(--incremark-spacing-lg) 0;
+  padding: var(--incremark-spacing-md) var(--incremark-spacing-lg);
+  background: var(--incremark-color-background-elevated);
+  border-radius: 0 var(--incremark-border-radius-md) var(--incremark-border-radius-md) 0;
+  color: var(--incremark-color-text-secondary);
+}
+.incremark-blockquote::before {
+  content: '';
+  position: absolute;
+  width: 4px;
+  border-radius: 2px;
+  background: var(--incremark-color-brand-primary);
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+.incremark-blockquote p {
+  margin: var(--incremark-spacing-md) 0;
+}
+.incremark-blockquote p:first-child {
+  margin-top: 0;
+}
+.incremark-blockquote p:last-child {
+  margin-bottom: 0;
+}
+/**
+ * Thematic Break 组件样式
+ */
+.incremark-hr {
+  margin: 2em 0;
+  border: none;
+  border-top: 2px solid var(--incremark-color-border-subtle);
+}
+/**
+ * Code Block 组件样式
+ */
+/* ============ 代码块容器 ============ */
+.incremark-code {
+  margin: var(--incremark-spacing-lg) 0;
+  border-radius: var(--incremark-border-radius-lg);
+  overflow: hidden;
+  background: var(--incremark-color-code-block-background);
+}
+/* ============ 代码块头部 ============ */
+.code-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--incremark-spacing-md) var(--incremark-spacing-lg);
+  background: var(--incremark-color-code-header-background);
+  border-bottom: 1px solid var(--incremark-color-border-strong);
+  font-size: var(--incremark-typography-font-size-sm);
+}
+.code-header .language {
+  color: var(--incremark-color-text-tertiary);
+  text-transform: uppercase;
+  font-weight: var(--incremark-typography-font-weight-medium);
+  letter-spacing: 0.5px;
+}
+/* ============ 代码按钮样式（引用公共样式）============ */
+.incremark-code .code-btn {
+  padding: var(--incremark-spacing-xs) var(--incremark-spacing-md);
+  border: 1px solid var(--incremark-color-border-strong);
+  border-radius: var(--incremark-border-radius-sm);
+  background: transparent;
+  color: var(--incremark-color-text-tertiary);
+  font-size: var(--incremark-typography-font-size-sm);
+  font-weight: var(--incremark-typography-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+  user-select: none;
+  white-space: nowrap;
+}
+.incremark-code .code-btn:hover:not(:disabled) {
+  background-color: var(--incremark-color-border-strong);
+  color: var(--incremark-color-text-inverse);
+}
+.incremark-code .code-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.incremark-code .code-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* ============ 代码内容区域 ============ */
+.code-content {
+  overflow-x: auto;
+}
+.code-loading {
+  opacity: 0.7;
+}
+/* ============ Shiki 高亮样式 ============ */
+.shiki-wrapper pre {
+  margin: 0;
+  padding: var(--incremark-spacing-lg);
+  background: transparent !important;
+  overflow-x: auto;
+}
+.shiki-wrapper code {
+  font-family: var(--incremark-typography-font-family-mono);
+  font-size: var(--incremark-typography-font-size-base);
+  line-height: var(--incremark-typography-line-height-normal);
+}
+/* ============ 回退样式（无高亮时） ============ */
+.code-fallback,
+.code-loading pre {
+  margin: 0;
+  padding: var(--incremark-spacing-lg);
+  overflow-x: auto;
+  background: transparent;
+}
+.code-fallback code,
+.code-loading code {
+  font-family: var(--incremark-typography-font-family-mono);
+  font-size: var(--incremark-typography-font-size-base);
+  line-height: var(--incremark-typography-line-height-normal);
+  color: var(--incremark-color-code-block-text);
+}
+/**
+ * Mermaid 图表组件样式
+ */
+/* ============ Mermaid 容器 ============ */
+.incremark-mermaid {
+  margin: var(--incremark-spacing-lg) 0;
+  border-radius: var(--incremark-border-radius-lg);
+  overflow: hidden;
+  background: var(--incremark-color-code-block-background);
+}
+/* ============ Mermaid 头部 ============ */
+.mermaid-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--incremark-spacing-md) var(--incremark-spacing-lg);
+  background: var(--incremark-color-code-header-background);
+  border-bottom: 1px solid var(--incremark-color-border-strong);
+  font-size: var(--incremark-typography-font-size-sm);
+}
+.mermaid-header .language {
+  color: var(--incremark-color-text-tertiary);
+  text-transform: uppercase;
+  font-weight: var(--incremark-typography-font-weight-medium);
+  letter-spacing: 0.5px;
+}
+/* ============ Mermaid 操作按钮（引用公共样式）============ */
+.incremark-mermaid .code-btn {
+  padding: var(--incremark-spacing-xs) var(--incremark-spacing-md);
+  border: 1px solid var(--incremark-color-border-strong);
+  border-radius: var(--incremark-border-radius-sm);
+  background: transparent;
+  color: var(--incremark-color-text-tertiary);
+  font-size: var(--incremark-typography-font-size-sm);
+  font-weight: var(--incremark-typography-font-weight-medium);
+  cursor: pointer;
+  transition: all var(--incremark-animation-duration-normal) var(--incremark-animation-easing-ease-out);
+  user-select: none;
+  white-space: nowrap;
+}
+.incremark-mermaid .code-btn:hover:not(:disabled) {
+  background-color: var(--incremark-color-border-strong);
+  color: var(--incremark-color-text-inverse);
+}
+.incremark-mermaid .code-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+.incremark-mermaid .code-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* ============ Mermaid 操作按钮组 ============ */
+.mermaid-actions {
+  display: flex;
+  gap: var(--incremark-spacing-sm);
+}
+/* ============ Mermaid 内容区域 ============ */
+.mermaid-content {
+  padding: var(--incremark-spacing-lg);
+  min-height: 100px;
+}
+.mermaid-loading {
+  color: var(--incremark-color-text-tertiary);
+  font-size: var(--incremark-typography-font-size-base);
+}
+.mermaid-source-code {
+  margin: 0;
+  padding: var(--incremark-spacing-md);
+  background: var(--incremark-color-code-block-background);
+  border-radius: var(--incremark-border-radius-sm);
+  color: var(--incremark-color-code-block-text);
+  font-family: var(--incremark-typography-font-family-mono);
+  font-size: var(--incremark-typography-font-size-sm);
+  line-height: var(--incremark-typography-line-height-normal);
+  white-space: pre-wrap;
+  overflow-x: auto;
+}
+/* ============ Mermaid SVG 渲染 ============ */
+.mermaid-svg {
+  overflow-x: auto;
+}
+.mermaid-svg :deep(svg) {
+  max-width: 100%;
+  height: auto;
+}
+/**
+ * Math 组件样式
+ */
+.incremark-math-inline {
+  display: inline;
+}
+.incremark-math-block {
+  margin: var(--incremark-spacing-lg) 0;
+  padding: var(--incremark-spacing-lg);
+  overflow-x: auto;
+  text-align: center;
+}
+.math-source {
+  background: var(--incremark-color-background-elevated);
+  padding: var(--incremark-spacing-xs) var(--incremark-spacing-sm);
+  border-radius: var(--incremark-border-radius-sm);
+  font-size: var(--incremark-typography-font-size-sm);
+  color: var(--incremark-color-text-tertiary);
+}
+.math-source-block {
+  margin: 0;
+  padding: var(--incremark-spacing-lg);
+  background: var(--incremark-color-background-elevated);
+  border-radius: var(--incremark-border-radius-sm);
+  text-align: left;
+}
+.math-source-block code {
+  font-family: var(--incremark-typography-font-family-mono);
+  font-size: var(--incremark-typography-font-size-sm);
+  color: var(--incremark-color-text-primary);
+}
+.math-rendered .katex {
+  font-size: var(--incremark-typography-font-size-md);
+}
+.math-rendered .katex-display {
+  margin: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+/**
+ * Footnotes 组件样式
+ * 
+ * 脚注在文档底部显示，包含标题、分隔线和列表
+ */
+.incremark-footnotes {
+  padding-top: var(--incremark-spacing-md);
+  font-size: var(--incremark-typography-font-size-base);
+}
+.incremark-footnotes .incremark-list {
+  margin-bottom: var(--incremark-spacing-sm) 0;
+}
+.incremark-footnotes-divider {
+  margin-bottom: var(--incremark-spacing-md);
+  border: none;
+  border-top: 1px solid var(--incremark-color-border-subtle);
+}
+.incremark-footnotes-title {
+  font-size: var(--incremark-typography-font-size-md);
+  font-weight: var(--incremark-typography-font-weight-semibold);
+  color: var(--incremark-color-text-primary);
+}
+.incremark-footnotes-list {
+  list-style: none;
+  padding-left: 0;
+  counter-reset: footnote-counter;
+}
+.incremark-footnote-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--incremark-spacing-sm);
+  padding: var(--incremark-spacing-xs);
+  border-radius: var(--incremark-border-radius-sm);
+  transition: background-color var(--incremark-animation-duration-fast) var(--incremark-animation-easing-ease-in-out);
+  line-height: var(--incremark-typography-line-height-normal);
+}
+.incremark-footnote-item:target {
+  background-color: var(--incremark-color-neutral-2);
+}
+.incremark-footnote-content {
+  flex: 1;
+  display: flex;
+  gap: var(--incremark-spacing-sm);
+}
+.incremark-footnote-number {
+  flex-shrink: 0;
+  font-weight: var(--incremark-typography-font-weight-semibold);
+  color: var(--incremark-color-text-secondary);
+  line-height: var(--incremark-typography-line-height-normal);
+}
+.incremark-footnote-body {
+  flex: 1;
+}
+.incremark-footnote-body > :first-child {
+  margin-top: 0;
+}
+.incremark-footnote-body > :last-child {
+  margin-bottom: 0;
+}
+.incremark-footnote-body p {
+  margin: var(--incremark-spacing-xs) 0;
+}
+.incremark-footnote-backref {
+  flex-shrink: 0;
+  color: var(--incremark-color-interactive-link);
+  text-decoration: none;
+  padding: 0 var(--incremark-spacing-xs);
+  border-radius: var(--incremark-border-radius-sm);
+  transition: background-color var(--incremark-animation-duration-fast) var(--incremark-animation-easing-ease-in-out);
+  line-height: var(--incremark-typography-line-height-normal);
+}
+.incremark-footnote-backref:hover {
+  background-color: var(--incremark-color-neutral-2);
+}
+/**
+ * HTML Element 组件样式
+ * 
+ * 用于渲染 HTML 元素节点和未知子节点类型
+ */
+/**
+ * 未知子节点类型样式
+ * 
+ * 当遇到无法识别的节点类型时，使用此样式显示调试信息
+ */
+.incremark-unknown-child {
+  color: var(--incremark-color-text-tertiary);
+  font-style: italic;
+}
+/**
+ * AutoScrollContainer 组件样式
+ */
+.auto-scroll-container {
+  overflow-y: auto;
+  height: 100%;
+}
+/**
+ * Default 组件样式（用于未知节点类型的调试显示）
+ */
+.incremark-default {
+  margin: var(--incremark-spacing-md) 0;
+  padding: var(--incremark-spacing-md);
+  background: var(--incremark-color-background-elevated);
+  border: 1px solid var(--incremark-color-border-strong);
+  border-radius: var(--incremark-border-radius-md);
+  font-size: 12px;
+}
+.incremark-default .type-badge {
+  display: inline-block;
+  padding: 2px var(--incremark-spacing-sm);
+  background: var(--incremark-color-border-strong);
+  border-radius: var(--incremark-border-radius-md);
+  font-weight: var(--incremark-typography-font-weight-semibold);
+  margin-bottom: var(--incremark-spacing-sm);
+}
+.incremark-default pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 11px;
+}
+/**
+ * HTML 节点样式（显示原始 HTML 源代码）
+ */
+.incremark-html-code {
+  margin: var(--incremark-spacing-md) 0;
+  padding: var(--incremark-spacing-md) var(--incremark-spacing-lg);
+  background: var(--incremark-color-code-block-background);
+  border-radius: var(--incremark-border-radius-md);
+  overflow-x: auto;
+}
+.incremark-html-code code {
+  font-family: var(--incremark-typography-font-family-mono);
+  font-size: 14px;
+  line-height: var(--incremark-typography-line-height-normal);
+  color: var(--incremark-color-code-block-text);
+  white-space: pre-wrap;
+  word-break: break-all;
+}