```css
/* 基础容器与漫画风全局设定 */
ai {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1a202c;
  background-color: #f8fafc;
  padding: 10px;
}

ai * {
  box-sizing: border-box;
}

/* --- 1. 场景信息网格 (漫画信息框) --- */
ai hd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: #ffffff;
  border: 2px solid #1a202c;
  border-radius: 8px;
  padding: 12px;
  /* 漫画风蓝色硬阴影 */
  box-shadow: 4px 4px 0px #3b82f6; 
}

ai hd t {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 900;
  font-size: 1.1em;
  color: #1e3a8a;
  border-bottom: 2px dashed #cbd5e1;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

ai hd w {
  grid-column: 1;
  font-weight: bold;
}

ai hd l {
  grid-column: 2;
  text-align: right;
  font-weight: bold;
  color: #10b981; /* 绿色点缀 */
}

ai hd d {
  grid-column: 1 / -1;
  text-align: center;
  background: #f1f5f9;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  font-size: 0.95em;
}

/* --- 2. 正文区域 (漫画对话气泡) --- */
ai article {
  background: #ffffff;
  border: 2px solid #1a202c;
  /* 气泡形状：右上、右下、左上圆角，左下直角模拟气泡尾巴 */
  border-radius: 20px 20px 20px 0; 
  padding: 16px;
  box-shadow: 4px 4px 0px #10b981; /* 绿色硬阴影 */
  font-size: 15px;
}

ai article p {
  margin: 0 0 10px 0;
}
ai article p:last-child {
  margin-bottom: 0;
}

/* --- 3. 折叠面板与状态栏 --- */
ai details {
  background: #ffffff;
  border: 2px solid #1a202c;
  border-radius: 8px;
  box-shadow: 4px 4px 0px #3b82f6;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 隐藏默认箭头 */
ai details summary::-webkit-details-marker {
  display: none;
}
ai details summary {
  list-style: none;
  background: #3b82f6; /* 明亮蓝背景 */
  color: #ffffff;
  font-weight: 900;
  font-size: 1.1em;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 展开时的 summary 样式 */
ai details[open] summary {
  border-bottom: 2px solid #1a202c;
}

/* 伪元素绘制自定义展开图标 */
ai details summary::after {
  content: "+";
  font-size: 1.5em;
  line-height: 1;
  transition: transform 0.2s;
}
ai details[open] summary::after {
  transform: rotate(45deg);
}

/* 内部内容盒 */
ai .box {
  padding: 12px;
  background: #ffffff;
  /* 左侧绿色粗线强调 */
  border-left: 6px solid #10b981; 
}

ai .box p {
  margin: 0 0 10px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e2e8f0;
}
ai .box p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* 自定义区块分割 */
ai sec {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #cbd5e1;
}
ai sec:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* --- 4. 选项区域 (动态交互) --- */
ai opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

ai q {
  display: block;
  background: #ffffff;
  border: 2px solid #1a202c;
  border-radius: 8px;
  padding: 12px 16px;
  font-weight: bold;
  cursor: pointer;
  /* 默认蓝色阴影 */
  box-shadow: 3px 3px 0px #3b82f6;
  transition: all 0.15s ease-in-out;
}

/* Hover 与触摸反馈：向上弹起，阴影变绿且加深 */
ai q:hover, ai q:active {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0px #10b981;
  background: #f8fafc;
}