/* =========================================================
   人鬼恋 · 宣纸水墨卷
   Mature Ghost × Shy Taoist
   ---------------------------------------------------------
   视觉关键词：
   宣纸 / 淡墨 / 青黛 / 朱砂 / 桃烟 / 竹青 / 月白
   ---------------------------------------------------------
   安全规则：
   - 所有样式均以 ai 为根
   - 不使用 html / body / *
   - 不使用 inset
   - 不使用 backdrop-filter
   ========================================================= */


/* =========================================================
   01 · 整体变量
   ========================================================= */

ai {
  --paper: #fbf8ef;
  --paper-warm: #f7f1e4;
  --paper-light: #fffdf7;

  --ink: #4f514d;
  --ink-soft: #72756f;
  --ink-faint: #9a9c94;

  --mist: #d8ddd6;
  --mist-light: #e9ece5;

  --jade: #6f9087;
  --jade-deep: #55746c;
  --jade-soft: #cadbd5;

  --blue-ink: #6b7f83;
  --blue-soft: #d8e2e2;

  --cinnabar: #b65e58;
  --cinnabar-deep: #914943;
  --cinnabar-soft: #e7c2bb;

  --rouge: #b8797c;
  --rouge-soft: #ead3d1;

  --gold: #ad9463;
  --gold-soft: #e9dfc8;

  --line: rgba(83, 83, 75, 0.13);
  --line-soft: rgba(83, 83, 75, 0.075);

  display: block;
  position: relative;

  box-sizing: border-box;

  margin: 12px 0;
  padding: 28px 22px 34px;

  overflow: hidden;

  color: var(--ink);

  font-family:
    "Noto Serif SC",
    "Songti SC",
    "STSong",
    "SimSun",
    serif;

  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.035em;

  background:
    radial-gradient(
      ellipse at 12% 8%,
      rgba(120, 137, 129, 0.07) 0,
      rgba(120, 137, 129, 0.025) 22%,
      rgba(120, 137, 129, 0) 44%
    ),
    radial-gradient(
      ellipse at 88% 16%,
      rgba(174, 103, 99, 0.055) 0,
      rgba(174, 103, 99, 0.018) 24%,
      rgba(174, 103, 99, 0) 45%
    ),
    radial-gradient(
      ellipse at 72% 91%,
      rgba(93, 123, 116, 0.05) 0,
      rgba(93, 123, 116, 0.015) 25%,
      rgba(93, 123, 116, 0) 48%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(96, 87, 70, 0.018) 0,
      rgba(96, 87, 70, 0.018) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(96, 87, 70, 0.012) 0,
      rgba(96, 87, 70, 0.012) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 7px
    ),
    linear-gradient(
      145deg,
      var(--paper-light) 0%,
      var(--paper) 48%,
      var(--paper-warm) 100%
    );

  border-top: 1px solid rgba(101, 91, 75, 0.15);
  border-right: 1px solid rgba(101, 91, 75, 0.09);
  border-bottom: 1px solid rgba(101, 91, 75, 0.17);
  border-left: 1px solid rgba(101, 91, 75, 0.10);

  border-radius: 2px 8px 3px 7px;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 10px 28px rgba(77, 66, 51, 0.055);
}


/* =========================================================
   02 · 宣纸水墨装饰
   左下：淡墨
   右上：朱砂残印
   ========================================================= */

ai::before {
  content: "";

  position: absolute;
  left: -44px;
  bottom: -38px;

  width: 190px;
  height: 126px;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(75, 92, 87, 0.10) 0,
      rgba(75, 92, 87, 0.06) 23%,
      rgba(75, 92, 87, 0.025) 43%,
      rgba(75, 92, 87, 0) 70%
    );

  border-radius: 50%;

  transform: rotate(-14deg);
}

ai::after {
  content: "幽";

  position: absolute;
  right: 19px;
  top: 17px;

  width: 43px;
  height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(146, 66, 61, 0.20);

  font-size: 24px;
  font-weight: 700;
  line-height: 1;

  border: 2px solid rgba(161, 76, 70, 0.13);
  border-radius: 3px 2px 5px 2px;

  transform: rotate(5deg);

  pointer-events: none;
}


/* =========================================================
   03 · 时间地点栏
   像卷首题记，不做 UI 卡片
   ========================================================= */

ai hd {
  display: block;
  position: relative;
  z-index: 1;

  margin: 0 5px 25px;
  padding: 7px 8px 10px 40px;

  color: #676b65;

  font-size: 0.91em;
  font-weight: 600;
  letter-spacing: 0.09em;

  background:
    linear-gradient(
      90deg,
      rgba(105, 134, 126, 0.07),
      rgba(105, 134, 126, 0.018) 45%,
      rgba(255, 255, 255, 0)
    );

  border-bottom: 1px solid rgba(91, 107, 101, 0.18);
}

ai hd::before {
  content: "☯";

  position: absolute;
  left: 8px;
  top: 6px;

  color: var(--jade-deep);

  font-size: 19px;
  font-weight: 400;

  opacity: 0.83;
}

ai hd::after {
  content: "山静 · 风轻 · 人鬼同行";

  display: block;

  margin-top: 3px;

  color: rgba(94, 99, 94, 0.50);

  font-size: 0.71em;
  font-weight: 400;
  letter-spacing: 0.18em;
}


/* =========================================================
   04 · 正文
   保持极简
   不做卡片、不做背景、不做 hover 大动画
   ========================================================= */

ai > p {
  position: relative;
  z-index: 1;

  margin: 13px 7px;
  padding: 0 4px;

  color: #535650;

  line-height: 1.95;
  letter-spacing: 0.035em;
}

ai > p + p {
  margin-top: 14px;
}


/* 正文 hover 只做非常细微的墨色变化 */
ai > p:hover {
  color: #454945;
}


/* =========================================================
   05 · 一级折叠栏
   宣纸册页，而非普通卡片
   ========================================================= */

ai details {
  position: relative;
  z-index: 1;

  margin: 18px 4px;

  overflow: hidden;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(84, 78, 68, 0.014) 0,
      rgba(84, 78, 68, 0.014) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 6px
    ),
    linear-gradient(
      140deg,
      rgba(255, 253, 247, 0.80),
      rgba(248, 244, 234, 0.72)
    );

  border-top: 1px solid rgba(94, 87, 75, 0.14);
  border-right: 1px solid rgba(94, 87, 75, 0.07);
  border-bottom: 1px solid rgba(94, 87, 75, 0.15);
  border-left: 1px solid rgba(94, 87, 75, 0.09);

  border-radius: 2px 8px 2px 6px;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.80) inset,
    0 6px 15px rgba(76, 67, 53, 0.035);

  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

ai details:hover {
  border-color: rgba(94, 87, 75, 0.18);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86) inset,
    0 8px 18px rgba(76, 67, 53, 0.045);
}


/* =========================================================
   06 · Summary
   卷签 + 墨题
   ========================================================= */

ai details > summary {
  position: relative;

  min-height: 49px;

  display: flex;
  align-items: center;

  padding: 10px 55px 10px 56px;

  list-style: none;
  cursor: pointer;

  color: #62655f;

  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.11em;

  background:
    linear-gradient(
      90deg,
      rgba(104, 124, 117, 0.06),
      rgba(104, 124, 117, 0.018) 33%,
      rgba(255, 255, 255, 0) 72%
    );

  border-bottom: 1px solid rgba(87, 84, 74, 0.095);

  transition:
    color 0.22s ease,
    letter-spacing 0.22s ease;
}

ai details > summary::-webkit-details-marker {
  display: none;
}


/* 左侧：小印 */
ai details > summary::before {
  content: "卷";

  position: absolute;
  left: 15px;
  top: 50%;

  width: 28px;
  height: 31px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(255, 252, 245, 0.96);

  font-size: 13px;
  font-weight: 700;

  background:
    linear-gradient(
      145deg,
      #8e7465,
      #725e53
    );

  border-radius: 2px 2px 5px 2px;

  transform:
    translateY(-50%)
    rotate(-2deg);

  opacity: 0.86;
}


/* 右侧：折叠机关 */
ai details > summary::after {
  content: "⌄";

  position: absolute;
  right: 18px;
  top: 50%;

  width: 25px;
  height: 25px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #78817a;

  font-size: 17px;
  line-height: 1;

  border: 1px solid rgba(95, 105, 99, 0.18);
  border-radius: 50%;

  transform:
    translateY(-50%)
    rotate(0deg);

  transition:
    transform 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease;
}

ai details[open] > summary::after {
  color: var(--jade-deep);

  border-color: rgba(81, 116, 107, 0.28);

  transform:
    translateY(-50%)
    rotate(180deg);
}

ai details > summary:hover {
  color: #4f5c57;
  letter-spacing: 0.125em;
}


/* =========================================================
   07 · 主角 · 女鬼
   淡胭脂 + 朱砂残印
   成熟艳鬼不是粉色卡片，而是纸上晕开的胭脂
   ========================================================= */

ai > details:nth-of-type(2) {
  background:
    radial-gradient(
      ellipse at 9% 18%,
      rgba(183, 104, 108, 0.11) 0,
      rgba(183, 104, 108, 0.04) 27%,
      rgba(183, 104, 108, 0) 52%
    ),
    radial-gradient(
      ellipse at 88% 83%,
      rgba(197, 133, 126, 0.06) 0,
      rgba(197, 133, 126, 0.018) 26%,
      rgba(197, 133, 126, 0) 48%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(93, 76, 69, 0.013) 0,
      rgba(93, 76, 69, 0.013) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 6px
    ),
    linear-gradient(
      140deg,
      rgba(255, 252, 246, 0.92),
      rgba(250, 241, 235, 0.84)
    );

  border-left: 2px solid rgba(172, 83, 82, 0.26);
}

ai > details:nth-of-type(2) > summary {
  color: #80595b;

  background:
    linear-gradient(
      90deg,
      rgba(188, 110, 112, 0.10),
      rgba(188, 110, 112, 0.025) 41%,
      rgba(255, 255, 255, 0)
    );
}

ai > details:nth-of-type(2) > summary::before {
  content: "幽";

  background:
    linear-gradient(
      145deg,
      #b45e59,
      #8f4844
    );

  opacity: 0.92;
}

ai > details:nth-of-type(2) > summary::after {
  content: "❦";

  color: #a36769;

  border-color: rgba(164, 93, 96, 0.22);

  font-size: 15px;
}


/* =========================================================
   08 · NPC · 道士
   青灰、竹青、淡墨道纹
   ========================================================= */

ai > details:nth-of-type(3) {
  background:
    radial-gradient(
      ellipse at 90% 15%,
      rgba(94, 133, 124, 0.10) 0,
      rgba(94, 133, 124, 0.035) 28%,
      rgba(94, 133, 124, 0) 52%
    ),
    linear-gradient(
      90deg,
      rgba(96, 122, 116, 0.022) 1px,
      rgba(255, 255, 255, 0) 1px
    ),
    linear-gradient(
      180deg,
      rgba(96, 122, 116, 0.017) 1px,
      rgba(255, 255, 255, 0) 1px
    ),
    linear-gradient(
      140deg,
      rgba(252, 254, 249, 0.92),
      rgba(238, 245, 240, 0.84)
    );

  background-size:
    auto,
    20px 20px,
    20px 20px,
    auto;

  border-right: 2px solid rgba(87, 124, 115, 0.23);
}

ai > details:nth-of-type(3) > summary {
  color: #586e68;

  background:
    linear-gradient(
      90deg,
      rgba(115, 151, 142, 0.035),
      rgba(115, 151, 142, 0.025) 45%,
      rgba(115, 151, 142, 0.09)
    );
}

ai > details:nth-of-type(3) > summary::before {
  content: "道";

  background:
    linear-gradient(
      145deg,
      #78968e,
      #58746d
    );

  opacity: 0.91;
}

ai > details:nth-of-type(3) > summary::after {
  content: "☯";

  color: #647f78;

  border-color: rgba(84, 120, 111, 0.24);

  font-size: 15px;
}


/* =========================================================
   09 · 人鬼羁绊
   不是爱心，而是一道淡朱红线横贯青墨
   ========================================================= */

ai > details:nth-of-type(4) {
  background:
    radial-gradient(
      ellipse at 18% 50%,
      rgba(179, 104, 108, 0.075) 0,
      rgba(179, 104, 108, 0.025) 25%,
      rgba(179, 104, 108, 0) 49%
    ),
    radial-gradient(
      ellipse at 82% 50%,
      rgba(91, 132, 122, 0.075) 0,
      rgba(91, 132, 122, 0.025) 25%,
      rgba(91, 132, 122, 0) 49%
    ),
    linear-gradient(
      96deg,
      rgba(176, 82, 80, 0) 0,
      rgba(176, 82, 80, 0) 48%,
      rgba(176, 82, 80, 0.09) 49%,
      rgba(176, 82, 80, 0.19) 49.5%,
      rgba(176, 82, 80, 0.07) 50%,
      rgba(176, 82, 80, 0) 51%,
      rgba(176, 82, 80, 0) 100%
    ),
    linear-gradient(
      140deg,
      rgba(255, 252, 246, 0.93),
      rgba(242, 246, 239, 0.84)
    );
}

ai > details:nth-of-type(4) > summary {
  color: #6e6261;

  background:
    linear-gradient(
      90deg,
      rgba(180, 106, 110, 0.08),
      rgba(255, 255, 255, 0) 47%,
      rgba(89, 128, 119, 0.08)
    );
}

ai > details:nth-of-type(4) > summary::before {
  content: "缘";

  background:
    linear-gradient(
      145deg,
      #a95957,
      #7f4747
    );

  border-radius: 50% 2px 50% 2px;

  transform:
    translateY(-50%)
    rotate(-5deg);
}

ai > details:nth-of-type(4) > summary::after {
  content: "∞";

  color: #8c6a6a;

  border-color: rgba(144, 103, 101, 0.22);

  font-family: serif;
  font-size: 17px;
}


/* =========================================================
   10 · 天机卷
   旧符纸、浅金、朱砂批注
   ========================================================= */

ai > details:nth-of-type(5) {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(124, 99, 57, 0.017) 0,
      rgba(124, 99, 57, 0.017) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 5px
    ),
    radial-gradient(
      ellipse at 87% 12%,
      rgba(174, 145, 87, 0.08) 0,
      rgba(174, 145, 87, 0.025) 28%,
      rgba(174, 145, 87, 0) 49%
    ),
    linear-gradient(
      140deg,
      #fffdf5,
      #f7f0dc
    );

  border-color: rgba(144, 116, 68, 0.17);
}

ai > details:nth-of-type(5) > summary {
  color: #817050;

  background:
    linear-gradient(
      90deg,
      rgba(178, 150, 98, 0.08),
      rgba(255, 255, 255, 0)
    );
}

ai > details:nth-of-type(5) > summary::before {
  content: "符";

  background:
    linear-gradient(
      145deg,
      #b26557,
      #914c43
    );
}

ai > details:nth-of-type(5) > summary::after {
  content: "✣";

  color: #9c8458;

  border-color: rgba(145, 121, 78, 0.24);

  font-size: 14px;
}


/* =========================================================
   11 · 记忆区
   旧册页 / 旧信纸
   ========================================================= */

ai > details:nth-of-type(6) {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(92, 79, 64, 0.016) 0,
      rgba(92, 79, 64, 0.016) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 6px
    ),
    linear-gradient(
      140deg,
      #fffdf8,
      #f2ede3
    );

  border-color: rgba(119, 104, 87, 0.16);
}

ai > details:nth-of-type(6) > summary {
  color: #706963;

  background:
    linear-gradient(
      90deg,
      rgba(126, 108, 89, 0.06),
      rgba(255, 255, 255, 0)
    );
}

ai > details:nth-of-type(6) > summary::before {
  content: "忆";

  background:
    linear-gradient(
      145deg,
      #91786a,
      #706056
    );
}

ai > details:nth-of-type(6) > summary::after {
  content: "⌘";

  color: #85786e;

  border-color: rgba(126, 110, 96, 0.21);

  font-size: 13px;
}


/* =========================================================
   12 · 行动区
   像抽签与批签
   比其他区域稍有交互，但仍保持水墨
   ========================================================= */

ai > details:nth-of-type(7) {
  margin-top: 25px;

  background:
    radial-gradient(
      ellipse at 9% 18%,
      rgba(175, 92, 94, 0.07),
      rgba(175, 92, 94, 0) 33%
    ),
    radial-gradient(
      ellipse at 91% 80%,
      rgba(87, 128, 118, 0.07),
      rgba(87, 128, 118, 0) 33%
    ),
    linear-gradient(
      140deg,
      #fffdf7,
      #f2f5ed
    );

  border-left: 2px solid rgba(164, 84, 86, 0.24);
  border-right: 2px solid rgba(84, 122, 113, 0.17);

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86) inset,
    0 9px 21px rgba(76, 67, 53, 0.045);
}

ai > details:nth-of-type(7) > summary {
  color: #6b6260;

  background:
    linear-gradient(
      90deg,
      rgba(174, 91, 94, 0.07),
      rgba(255, 255, 255, 0) 48%,
      rgba(87, 128, 118, 0.07)
    );
}

ai > details:nth-of-type(7) > summary::before {
  content: "择";

  background:
    linear-gradient(
      145deg,
      #aa5b58,
      #657f77
    );
}

ai > details:nth-of-type(7) > summary::after {
  content: "签";

  color: #776d67;

  border-color: rgba(112, 106, 96, 0.21);

  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   13 · 推演链
   像道士夹在卷后的演算批注
   ========================================================= */

ai details.cot {
  opacity: 0.70;

  margin-top: 5px;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(84, 105, 98, 0.013) 0,
      rgba(84, 105, 98, 0.013) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 5px
    ),
    linear-gradient(
      140deg,
      rgba(248, 250, 244, 0.86),
      rgba(236, 241, 234, 0.78)
    );

  border-color: rgba(82, 105, 98, 0.12);

  box-shadow: none;
}

ai details.cot > summary {
  min-height: 40px;

  padding-top: 7px;
  padding-bottom: 7px;

  color: #7a837d;

  font-size: 0.77em;
  letter-spacing: 0.08em;

  background:
    linear-gradient(
      90deg,
      rgba(96, 123, 115, 0.05),
      rgba(255, 255, 255, 0)
    );
}

ai details.cot > summary::before {
  content: "隐";

  width: 25px;
  height: 27px;

  font-size: 11px;

  background:
    linear-gradient(
      145deg,
      #81938d,
      #64756f
    );
}

ai details.cot > summary::after {
  content: "⌁";

  width: 22px;
  height: 22px;

  font-size: 14px;
}


/* =========================================================
   14 · 属性块 p[t]
   轻量化
   像册页中的小标题，不做厚重卡片
   ========================================================= */

ai p[t] {
  position: relative;

  margin: 13px 14px;
  padding: 30px 12px 11px;

  color: #5b5e58;

  background:
    linear-gradient(
      90deg,
      rgba(111, 116, 106, 0.025),
      rgba(255, 255, 255, 0)
    );

  border-top: 1px solid rgba(91, 86, 75, 0.065);
  border-bottom: 1px solid rgba(91, 86, 75, 0.065);
}

ai p[t]::before {
  content: attr(t);

  position: absolute;
  left: 10px;
  top: 6px;

  padding: 1px 9px 2px;

  color: #696d67;

  font-size: 0.69em;
  font-weight: 700;
  letter-spacing: 0.14em;

  background:
    linear-gradient(
      90deg,
      rgba(119, 135, 127, 0.09),
      rgba(255, 255, 255, 0)
    );

  border-left: 2px solid rgba(95, 117, 108, 0.32);
}


/* =========================================================
   15 · d 条目
   像竖排批注后的正文
   ========================================================= */

ai d {
  display: block;
  position: relative;

  margin: 4px 0;
  padding: 6px 8px 6px 15px;

  color: #60625d;

  border-bottom: 1px dashed rgba(92, 87, 77, 0.075);

  transition:
    color 0.20s ease,
    padding-left 0.20s ease;
}

ai d::before {
  content: "·";

  position: absolute;
  left: 4px;
  top: 5px;

  color: rgba(105, 112, 104, 0.64);

  font-weight: 700;
}

ai d:hover {
  color: #4f5651;
  padding-left: 18px;
}


/* =========================================================
   16 · 主角内部
   胭脂线，不做粉底
   ========================================================= */

ai > details:nth-of-type(2) p[t] {
  background:
    linear-gradient(
      90deg,
      rgba(181, 101, 105, 0.038),
      rgba(255, 255, 255, 0)
    );

  border-top-color: rgba(169, 96, 100, 0.08);
  border-bottom-color: rgba(169, 96, 100, 0.08);
}

ai > details:nth-of-type(2) p[t]::before {
  color: #875e61;

  background:
    linear-gradient(
      90deg,
      rgba(185, 112, 115, 0.11),
      rgba(255, 255, 255, 0)
    );

  border-left-color: rgba(168, 79, 82, 0.42);
}

ai > details:nth-of-type(2) d::before {
  color: rgba(174, 91, 95, 0.68);
}

ai > details:nth-of-type(2) d:hover {
  color: #75585a;
}


/* =========================================================
   17 · 道士内部
   青墨线
   ========================================================= */

ai > details:nth-of-type(3) p[t] {
  background:
    linear-gradient(
      90deg,
      rgba(89, 128, 119, 0.035),
      rgba(255, 255, 255, 0)
    );

  border-top-color: rgba(86, 124, 115, 0.075);
  border-bottom-color: rgba(86, 124, 115, 0.075);
}

ai > details:nth-of-type(3) p[t]::before {
  color: #5f7771;

  background:
    linear-gradient(
      90deg,
      rgba(94, 132, 123, 0.10),
      rgba(255, 255, 255, 0)
    );

  border-left-color: rgba(76, 115, 106, 0.40);
}

ai > details:nth-of-type(3) d::before {
  color: rgba(79, 120, 111, 0.67);
}

ai > details:nth-of-type(3) d:hover {
  color: #526762;
}


/* =========================================================
   18 · 主角名号 f
   朱砂题签
   ========================================================= */

ai f {
  display: inline-block;

  margin: 0 2px;
  padding: 0 5px 1px;

  color: #8d4d4d;

  font-weight: 800;
  letter-spacing: 0.08em;

  border-bottom: 1px solid rgba(168, 80, 81, 0.36);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 55%,
      rgba(188, 106, 108, 0.10) 56%
    );
}


/* =========================================================
   19 · 羁绊内部
   淡朱与青墨交替
   ========================================================= */

ai > details:nth-of-type(4) p[t="羁绊"] {
  background:
    linear-gradient(
      90deg,
      rgba(182, 106, 110, 0.04),
      rgba(255, 255, 255, 0) 46%,
      rgba(87, 127, 117, 0.04)
    );
}

ai > details:nth-of-type(4) p[t="羁绊"]::before {
  content: "红线";

  color: #825b5c;

  background:
    linear-gradient(
      90deg,
      rgba(182, 106, 110, 0.12),
      rgba(255, 255, 255, 0)
    );

  border-left-color: rgba(169, 79, 82, 0.42);
}

ai > details:nth-of-type(4) p[t="羁绊"] > d:nth-child(odd)::before {
  color: rgba(169, 86, 91, 0.67);
}

ai > details:nth-of-type(4) p[t="羁绊"] > d:nth-child(even)::before {
  color: rgba(75, 117, 107, 0.67);
}


/* =========================================================
   20 · 天机内部
   ========================================================= */

ai p[t="天象"]::before,
ai p[t="残忆"]::before,
ai p[t="悬念"]::before,
ai p[t="异闻"]::before {
  color: #7c7059;

  border-left-color: rgba(153, 126, 74, 0.36);

  background:
    linear-gradient(
      90deg,
      rgba(169, 142, 90, 0.09),
      rgba(255, 255, 255, 0)
    );
}

ai p[t="残忆"] d {
  color: #766759;
}

ai p[t="悬念"] d {
  color: #6d6266;
}

ai p[t="异闻"] d {
  color: #5f716c;
}


/* =========================================================
   21 · 记忆 m
   旧信纸，不做厚卡片
   ========================================================= */

ai m {
  display: block;
  position: relative;

  margin: 9px 14px;
  padding: 10px 12px 10px 28px;

  color: #69645c;

  line-height: 1.82;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(108, 90, 70, 0.014) 0,
      rgba(108, 90, 70, 0.014) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 5px
    ),
    linear-gradient(
      90deg,
      rgba(143, 118, 89, 0.035),
      rgba(255, 255, 255, 0)
    );

  border-left: 1px solid rgba(132, 108, 82, 0.16);
  border-bottom: 1px solid rgba(132, 108, 82, 0.08);
}

ai m::before {
  content: "记";

  position: absolute;
  left: 7px;
  top: 10px;

  color: rgba(143, 113, 84, 0.63);

  font-size: 0.70em;
  font-weight: 700;
}


/* =========================================================
   22 · 内层 details
   类似夹页批注
   ========================================================= */

ai details details {
  margin: 11px 13px 13px;

  background:
    linear-gradient(
      90deg,
      rgba(111, 102, 88, 0.025),
      rgba(255, 255, 255, 0)
    );

  border-top: 1px solid rgba(100, 94, 81, 0.09);
  border-right: 1px solid rgba(100, 94, 81, 0.05);
  border-bottom: 1px solid rgba(100, 94, 81, 0.08);
  border-left: 1px solid rgba(100, 94, 81, 0.10);

  border-radius: 1px 5px 1px 4px;

  box-shadow: none;
}

ai details details > summary {
  min-height: 39px;

  padding:
    7px 44px
    7px 45px;

  color: #74736c;

  font-size: 0.81em;

  background:
    linear-gradient(
      90deg,
      rgba(125, 116, 98, 0.045),
      rgba(255, 255, 255, 0)
    );
}

ai details details > summary::before {
  content: "录";

  left: 12px;

  width: 23px;
  height: 25px;

  font-size: 10px;

  background:
    linear-gradient(
      145deg,
      #8d8172,
      #746a5e
    );
}

ai details details > summary::after {
  right: 12px;

  width: 21px;
  height: 21px;

  font-size: 12px;
}


/* =========================================================
   23 · 行动选择
   像一张张竹纸签条
   ========================================================= */

ai p[t="选择"] {
  margin-top: 15px;

  padding-top: 34px;

  background: none;

  border-top: none;
  border-bottom: none;
}

ai p[t="选择"]::before {
  content: "请落一签";

  color: #6d6760;

  background:
    linear-gradient(
      90deg,
      rgba(163, 91, 92, 0.07),
      rgba(91, 126, 117, 0.06),
      rgba(255, 255, 255, 0)
    );

  border-left-color: rgba(154, 76, 77, 0.37);
}

ai p[t="选择"] > d {
  position: relative;

  margin: 8px 0;
  padding: 9px 38px 9px 14px;

  color: #5f625d;

  background:
    linear-gradient(
      90deg,
      rgba(169, 94, 96, 0.035),
      rgba(255, 253, 247, 0.64) 48%,
      rgba(87, 127, 117, 0.035)
    );

  border-top: 1px solid rgba(91, 86, 75, 0.08);
  border-right: 1px solid rgba(91, 86, 75, 0.05);
  border-bottom: 1px solid rgba(91, 86, 75, 0.095);
  border-left: 2px solid rgba(158, 82, 84, 0.20);

  border-radius: 1px 5px 1px 4px;

  cursor: pointer;

  transition:
    color 0.20s ease,
    border-left-color 0.20s ease,
    background 0.20s ease,
    transform 0.20s ease;
}

ai p[t="选择"] > d::before {
  content: "›";

  position: absolute;
  left: auto;
  right: 13px;
  top: 50%;

  color: rgba(92, 115, 108, 0.63);

  font-size: 17px;

  transform: translateY(-50%);
}

ai p[t="选择"] > d:hover {
  color: #515a55;

  border-left-color: rgba(157, 75, 77, 0.46);

  background:
    linear-gradient(
      90deg,
      rgba(181, 100, 103, 0.07),
      rgba(255, 253, 247, 0.72) 48%,
      rgba(91, 133, 123, 0.065)
    );

  transform: translateX(3px);
}

ai p[t="选择"] > d:active {
  transform: translateX(1px);
}


/* =========================================================
   24 · 展开动画
   像轻轻掀开册页
   ========================================================= */

ai details[open] > p,
ai details[open] > d,
ai details[open] > m,
ai details[open] > details {
  animation: aiInkReveal 0.30s ease both;
}

@keyframes aiInkReveal {
  0% {
    opacity: 0;
    transform: translateY(-3px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   25 · 极淡墨气呼吸
   只给主容器装饰，不干扰阅读
   ========================================================= */

ai::before {
  animation: aiInkMist 10s ease-in-out infinite;
}

@keyframes aiInkMist {
  0% {
    opacity: 0.72;
    transform: rotate(-14deg) scale(1);
  }

  50% {
    opacity: 0.92;
    transform: rotate(-10deg) scale(1.04);
  }

  100% {
    opacity: 0.72;
    transform: rotate(-14deg) scale(1);
  }
}


/* =========================================================
   26 · 手机端
   ========================================================= */

@media (max-width: 640px) {

  ai {
    padding: 21px 12px 27px;

    font-size: 14px;

    border-radius: 2px 6px 2px 5px;
  }

  ai hd {
    margin-bottom: 20px;

    padding-left: 35px;

    font-size: 0.87em;
  }

  ai hd::before {
    left: 6px;
  }

  ai > p {
    margin-left: 3px;
    margin-right: 3px;

    padding-left: 2px;
    padding-right: 2px;
  }

  ai details {
    margin-left: 1px;
    margin-right: 1px;
  }

  ai details > summary {
    min-height: 46px;

    padding-left: 50px;
    padding-right: 48px;

    font-size: 0.88em;
    letter-spacing: 0.075em;
  }

  ai details > summary::before {
    left: 12px;

    width: 26px;
    height: 29px;

    font-size: 12px;
  }

  ai details > summary::after {
    right: 12px;

    width: 23px;
    height: 23px;

    font-size: 14px;
  }

  ai p[t] {
    margin-left: 8px;
    margin-right: 8px;
  }

  ai m {
    margin-left: 9px;
    margin-right: 9px;
  }

  ai p[t="选择"] > d {
    padding-right: 33px;

    font-size: 0.93em;
  }
}


/* =========================================================
   27 · 减少动画
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  ai::before,
  ai details[open] > p,
  ai details[open] > d,
  ai details[open] > m,
  ai details[open] > details {
    animation: none;
  }

  ai details,
  ai details > summary,
  ai details > summary::after,
  ai d,
  ai p[t="选择"] > d {
    transition: none;
  }
}
/* ===== 隐藏 class="cot" 的思维链 ===== */
ai details.cot {
  display: none !important;
}