东南亚/KK园区/金三角？一起去东南亚搞ZP？

/* ---------- 主题颜色变量（Design Tokens） ---------- */
:root {
  /* 主背景色：极暖米白，模仿旧纸或亚麻布质感，降低眩光 */
  --theme-bg: #e7e7e7;
  /* 面板背景：纯白，用于卡片、折叠面板内部，与主背景形成轻微对比 */
  --panel-bg: #ededed;
  /* 引用块背景：半透明暖灰，叠加在主背景上，保留纹理感 */
  --quote-bg: rgba(247, 212, 198, 0.7);
  /* 引用块左边框：柔和红褐色，代替冷色，传递人文温度 */
  --quote-border: #c0a0a0;
  /* 引用块文字：深暖褐，比主文字柔和，适合引述内容 */
  --quote-text: #4a3a3a;
  /* 面板标题栏背景：极浅暖灰，区分标题区域 */
  --header-bg: #f0ebe8;
  /* 通用边框色：浅暖灰褐，整体协调，不刺眼 */
  --border-color: #c0b4b4;
  /* 标题色：深蓝灰，用于 NPC 名称等强调性文字，沉稳有分量 */
  --title-color: #1A2A3A;
  /* 键名色：中暖灰褐，用于数据标签（如“年龄”“职业”） */
  --key-color: #6a5a5a;
  /* 数值色：深暖褐，用于数据值，比键名更深，突出信息 */
  --value-color: #3a2a2a;
  /* 分区标题色（如“性格”“背景”）：暖褐偏金，增加装饰性 */
  --section-header-color: #8a6a4a;
  /* 全局圆角大小，保持统一 */
  --radius: 6px;
}

/* ---------- 基础布局 ---------- */
ai {
  /* 使用 Flex 列布局，让内部元素垂直排列，gap 控制间距 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* 应用主题背景色 */
  background-color: var(--theme-bg);
  /* 系统字体栈，保证跨平台显示一致性 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;               /* 适中的行高，提升长文本可读性 */
  padding: 12px;                  /* 内边距，让内容不贴边 */
  border: 1px solid var(--border-color);
  border-radius: var(--radius);   /* 圆角柔和边缘 */
}

/* ---------- 叙事与标题 ---------- */
ai h2 {
  font-size: 1.1em;
  color: var(--key-color);        /* 使用键名色，保持统一 */
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color); /* 分隔线 */
  font-weight: 600;
}

ai article p {
  margin: 8px 0;                  /* 段落上下间距，形成呼吸感 */
}
/* 注：段落的首尾边距由上下文控制，此处未显式重置，可保留自然间距 */

/* ---------- 对话/记忆碎片 引用块 ---------- */
ai blockquote {
  margin: 12px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--quote-border);  /* 左侧色条强调引用 */
  font-style: italic;              /* 斜体表示引述内容 */
  color: var(--quote-text);
  background: var(--quote-bg);     /* 半透明背景，透出主背景纹理 */
  border-radius: 0 var(--radius) var(--radius) 0; /* 右侧圆角，左侧直角 */
}
ai blockquote strong {
  font-style: normal;              /* 引述中的说话人名称不用斜体 */
  font-weight: 600;
  display: block;                  /* 独占一行，作为引用来源 */
  margin-bottom: 4px;
}
ai blockquote p {
  margin: 0;                       /* 引用内段落无额外外边距，由块级统一控制 */
}

/* ---------- 可折叠面板通用样式 ---------- */
/* 使用 .p3-fold 类，可应用于 <details> 元素，统一风格 */
.p3-fold {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg);
}

.p3-fold summary {
  padding: 8px 12px;
  font-weight: 600;
  color: var(--key-color);
  background-color: var(--header-bg);
  cursor: pointer;
  list-style: none;                /* 移除默认三角箭头，使用自定义样式 */
  border-radius: var(--radius) var(--radius) 0 0; /* 上方圆角，下方直角 */
}
/* 当 details 展开时，summary 增加下边框，与内容分隔 */
.p3-fold[open] > summary {
  border-bottom: 1px solid var(--border-color);
}
/* 隐藏 WebKit 浏览器默认的 details 标记 */
.p3-fold summary::-webkit-details-marker {
  display: none;
}
/* 折叠面板内容区域，内边距让内容不贴边 */
.p3-fold .fold-content {
  padding: 12px;
}

/* ---------- 状态栏（网格布局） ---------- */
/* .status-grid 用于展示键值对数据，如“健康”“心情”等 */
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列数，最小 200px */
  gap: 8px;                       /* 网格项间距 */
}

/* ---------- NPC 面板 ---------- */
/* NPC 卡片位于折叠面板的内容区内，使用 .npc-card 类 */
.fold-content .npc-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 12px;            /* 卡片之间垂直间距 */
}
.fold-content .npc-card:last-child {
  margin-bottom: 0;               /* 最后一张卡片移除底部外边距，避免多余空白 */
}

/* NPC 头部：姓名和关系标签水平排列 */
.npc-header {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  align-items: center;
  margin-bottom: 8px;
}
.npc-name {
  color: var(--title-color);
  font-weight: bold;
}
.npc-relation {
  font-size: 0.9em;
  color: var(--key-color);
}

/* NPC 内部的小节标题（如“性格”、“背景”） */
.npc-section-header {
  color: var(--section-header-color);
  font-weight: bold;
  font-size: 0.9em;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--border-color); /* 虚线分隔，减弱视觉重量 */
}

/* NPC 详情数据容器，垂直排列键值对 */
.npc-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- 记忆区 ---------- */
/* 记忆列表使用有序列表，编号表示时间或重要性 */
.memory-list {
  list-style-type: decimal;       /* 数字编号 */
  padding-left: 20px;             /* 缩进，与序号对齐 */
  margin: 0;
  color: var(--value-color);
}
.memory-list li {
  margin-bottom: 5px;             /* 列表项间距 */
}

/* ---------- 行动选项 ---------- */
/* 行动面板是一个独立的卡片区域 */
.action-panel {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--panel-bg);
  padding: 12px;
}
.action-title {
  font-weight: 600;
  color: var(--key-color);
  margin-bottom: 10px;
}
/* 行动列表无项目符号，用 flex 列排列 */
.action-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.action-list li {
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--quote-bg);      /* 使用引用背景，柔和统一 */
  color: var(--quote-text);
  border: 1px solid transparent;    /* 透明边框，为悬停预留 */
  cursor: pointer;
  transition: all 0.2s;             /* 平滑过渡 */
}
.action-list li:hover {
  border-color: var(--quote-border); /* 悬停时显示边框，提升交互反馈 */
  background: #fff;                 /* 变亮，模拟按钮按下感（颜色未改变变量） */
}

/* ---------- 通用键值对样式 (d, k, v) ---------- */
/* <d> 作为键值对容器，flex 两端对齐 */
d {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 14px;
}
k {
  color: var(--key-color);
  padding-right: 16px;            /* 与值保持距离 */
}
v {
  color: var(--value-color);
  font-weight: 500;
  text-align: right;              /* 值右对齐，与键形成视觉对比 */
}

/* 状态栏和 NPC 详情中的键值对悬停时背景变亮，增加可交互感 */
.npc-details d:hover,
.status-grid d:hover {
  background-color: var(--header-bg);
}

/* ---------- 占位符文本 ---------- */
/* 用于空状态提示，如“无记忆”等 */
.placeholder-text {
  text-align: center;
  color: var(--key-color);
  font-style: italic;
  padding: 10px;
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。