@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@300;400;700;900&display=swap');
ai {
  --ink: #1a1a1a;
  --paper: #fafafa;
  --blue: #4fc3f7;
  --pink: #f48fb1;
  --green: #4db6ac;
  --border: 3px solid var(--ink);
  display: block;
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  padding: 12px;
  position: relative;
}
ai::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 48px,
      rgba(0,0,0,0.03) 48px,
      rgba(0,0,0,0.03) 49px
    );
  pointer-events: none;
  z-index: 0;
}
ai > * { position: relative; z-index: 1; }
/* === 场景信息区 === */
ai hd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  border: var(--border);
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--paper);
  position: relative;
}
ai hd::before {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border: 2px solid var(--ink);
  pointer-events: none;
}
ai hd::after {
  content: '◆';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 6px;
  font-size: 12px;
  color: var(--blue);
}
ai hd time {
  grid-column: 1 / -1;
  text-align: center;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 4px;
}
ai hd d[w] {
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  color: var(--blue);
  font-weight: 700;
}
ai hd d[l] {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
}
ai hd d[s] {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  font-style: italic;
}
/* === 正文 === */
ai article {
  border-left: 4px solid var(--ink);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,0.02) 0%, transparent 30%);
  position: relative;
}
ai article::before {
  content: '●';
  position: absolute;
  top: -2px; left: -8px;
  font-size: 10px;
  color: var(--ink);
}
ai article p {
  margin: 0 0 10px 0;
  text-indent: 2em;
}
ai article p:last-child { margin-bottom: 0; }
/* === 债务追踪 冰箱贴风格（放大版） === */
ai .debt {
  margin: 18px 0;
  position: relative;
}
ai .debt h3 {
  font-family: 'ZCOOL KuaiLe', cursive;
  font-size: 17px;
  margin: 0 0 10px 0;
  padding: 5px 12px;
  background: var(--ink);
  color: var(--paper);
  display: inline-block;
  transform: rotate(-1deg);
}
ai .debt .note {
  background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 60%, #e8f5e9 100%);
  border: 1px solid #b0bec5;
  border-radius: 2px;
  padding: 20px 22px 24px 22px;
  position: relative;
  box-shadow:
    2px 3px 0 rgba(0,0,0,0.08),
    4px 6px 12px rgba(0,0,0,0.06);
  transform: rotate(0.5deg);
  font-family: 'ZCOOL KuaiLe', cursive;
  font-size: 15px;
  line-height: 2.2;
  min-height: 180px;
}
ai .debt .note::before {
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 24px; height: 24px;
  background: radial-gradient(circle, var(--pink) 40%, transparent 41%);
  border-radius: 50%;
  opacity: 0.5;
}
ai .debt .note::after {
  content: '';
  position: absolute;
  bottom: 8px; left: 8px;
  width: 70px; height: 70px;
  background-image: url('https://i.postimg.cc/7htzbNJv/4ead8639c7f2889f51d516a7a2d79e91.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 4px;
  opacity: 0.25;
  filter: grayscale(0.5) blur(0.5px) contrast(0.9);
  transform: rotate(-3deg);
  z-index: 0;
}
ai .debt .note p {
  margin: 0;
  padding-left: 6px;
  position: relative;
  z-index: 1;
}
ai .debt .note p:nth-child(odd) { transform: rotate(-0.3deg); }
ai .debt .note p:nth-child(even) { transform: rotate(0.4deg); }
ai .debt .note f {
  color: #1565c0;
  margin-right: 4px;
}
ai .debt .note f::after { content: '：'; }
ai .debt .note q {
  font-size: 13px;
  color: var(--pink);
  margin-left: 8px;
  quotes: none;
}
ai .debt .note q::before { content: '//'; margin-right: 2px; }
ai .debt .sign {
  position: absolute;
  bottom: 12px; right: 18px;
  font-family: 'ZCOOL KuaiLe', cursive;
  font-size: 18px;
  color: #1565c0;
  transform: rotate(-4deg);
  opacity: 0.8;
  z-index: 1;
}
ai .debt .note:hover {
  transform: rotate(-0.3deg) scale(1.01);
  transition: transform 0.3s ease;
}
/* === Details 漫画风 === */
ai details {
  border: var(--border);
  margin: 10px 0;
  padding: 0;
  position: relative;
}
ai details::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: -3px; bottom: -3px;
  border: 1.5px solid var(--ink);
  z-index: -1;
}
ai details summary {
  font-weight: 900;
  font-size: 14px;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  letter-spacing: 1px;
  list-style: none;
  position: relative;
}
ai details summary::-webkit-details-marker { display: none; }
ai details summary::after {
  content: '▸';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s;
}
ai details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}
ai details > p {
  padding: 8px 12px;
  margin: 0;
  border-bottom: 1px dashed rgba(0,0,0,0.15);
  font-size: 14px;
}
ai details > p:last-child { border-bottom: none; }
ai details > p[t]::before {
  content: attr(t);
  display: block;
  font-weight: 900;
  font-size: 13px;
  color: var(--paper);
  background: var(--ink);
  padding: 2px 8px;
  margin: -8px -12px 8px -12px;
  border-bottom: 2px solid var(--blue);
}
ai details > p.priv::before {
  border-bottom-color: var(--pink);
}
/* === 标签样式 === */
ai d {
  display: block;
  padding: 2px 0;
  position: relative;
  padding-left: 10px;
}
ai d::before {
  content: '>';
  position: absolute;
  left: 0; top: 2px;
  font-weight: 900;
  font-size: 11px;
  color: var(--blue);
}
ai f {
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}
ai f::after { content: '：'; }
ai q {
  font-size: 12px;
  color: var(--pink);
  margin-left: 6px;
  font-style: italic;
  quotes: none;
}
ai q::before { content: '「'; }
ai q::after { content: '」'; }
/* === 工作记忆/历史档案 特色 === */
ai details:nth-last-of-type(2) summary {
  background: linear-gradient(90deg, var(--ink) 70%, var(--green) 100%);
}
ai details:last-of-type summary {
  background: linear-gradient(90deg, var(--ink) 70%, var(--blue) 100%);
}
/* === 选项区 === */
ai nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
ai nav button {
  background: var(--paper);
  border: 2.5px solid var(--ink);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: all 0.15s;
}
ai nav button::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px; right: -3px; bottom: -3px;
  border: 1.5px solid var(--ink);
  z-index: -1;
  transition: all 0.15s;
}
ai nav button:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translate(-2px, -2px);
}
ai nav button:hover::after {
  top: 5px; left: 5px;
}
ai nav button.wild {
  border-color: var(--pink);
  color: var(--pink);
}
ai nav button.wild::after {
  border-color: var(--pink);
}
ai nav button.wild:hover {
  background: var(--pink);
  color: var(--paper);
}
/* === 气泡装饰 === */
ai::after {
  content: '';
  position: absolute;
  top: 20px; right: 15px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(79,195,247,0.3);
  pointer-events: none;
  animation: bubble 4s ease-in-out infinite;
}
@keyframes bubble {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-8px) scale(1.1); opacity: 0.7; }
}
/* === 移动端适配 === */
@media (max-width: 500px) {
  ai nav { grid-template-columns: 1fr; }
  ai hd { padding: 8px 10px; }
  ai .debt .note { padding: 16px 18px 22px 18px; font-size: 14px; }
}