/* ==================================================
   古风文明模拟 · 双视角共用 CSS
   ================================================== */

/* === 共享字体策略 === */
sk, mt {
  font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
}
sk summary, mt summary,
sk nav, mt nav,
sk strong, mt strong,
sk emp, mt emp,
sk th, mt th,
sk t, mt t {
  font-family: "STKaiti", "KaiTi", "FangSong", "Source Han Serif SC", serif;
}

/* ==================================================
   一·天意视角 神道苍穹
   ================================================== */

sk {
  display: grid;
  grid-template-columns: 1fr 34px;
  position: relative;
  margin: 14px 0;
  padding: 20px 14px 22px 20px;
  color: #d8d4c0;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(80, 60, 130, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(140, 100, 50, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(60, 50, 90, 0.15) 0%, transparent 70%),
    linear-gradient(135deg, #0d1322 0%, #1a1f3a 50%, #14182b 100%);
  border: 1px solid #c9a961;
  border-radius: 3px;
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.7),
    inset 0 0 0 5px rgba(201, 169, 97, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

/* 四角云雷纹 */
sk::before, sk::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M3 3h18v3H6v15H3V3zm42 0v18h-3V6H27V3h18zM3 45V27h3v15h15v3H3zm42 0H27v-3h15V27h3v18z' fill='%23c9a961' opacity='0.7'/><path d='M10 10h6v2h-4v4h-2v-6zm28 0v6h-2v-4h-4v-2h6zM10 38v-6h2v4h4v2h-6zm28 0h-6v-2h4v-4h2v6z' fill='%23a83232' opacity='0.8'/><circle cx='24' cy='24' r='1.5' fill='%23c9a961'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}
sk::before { top: 4px; left: 4px; }
sk::after { bottom: 4px; right: 4px; transform: rotate(180deg); }

sk > * { position: relative; z-index: 1; grid-column: 1; }

/* --- 侧边书脊 --- */
sk nav {
  grid-column: 2;
  grid-row: 1 / 999;
  position: sticky;
  top: 8px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  margin-left: 10px;
  background:
    linear-gradient(180deg, #3a2a55 0%, #251a3a 50%, #1a1228 100%);
  border-left: 1px solid #c9a961;
  border-right: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 2px;
  box-shadow:
    inset 1px 0 0 rgba(255, 220, 150, 0.2),
    inset -1px 0 0 rgba(0, 0, 0, 0.4),
    0 0 12px rgba(168, 50, 50, 0.2);
  height: fit-content;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 5;
}
sk nav::-webkit-scrollbar { width: 0; }
sk nav a {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 5px;
  font-size: 12px;
  color: #c9a961;
  text-decoration: none;
  padding: 12px 4px;
  margin: 0 auto;
  border-left: 2px solid transparent;
  transition: all 0.35s ease;
  text-shadow: 0 0 4px rgba(201, 169, 97, 0.35);
}
sk nav a:hover {
  color: #ffe8a8;
  border-left-color: #a83232;
  text-shadow: 0 0 10px rgba(255, 220, 150, 0.8);
  background: linear-gradient(90deg, rgba(168, 50, 50, 0.3), transparent);
}

/* --- 书页 page --- */
sk page {
  display: block;
  margin: 0 0 14px;
  padding: 16px 18px 18px;
  background:
    linear-gradient(180deg, rgba(40, 32, 60, 0.5) 0%, rgba(25, 20, 45, 0.6) 100%);
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 2px;
  position: relative;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
}
sk page::before, sk page::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a961 30%, #a83232 50%, #c9a961 70%, transparent);
  opacity: 0.6;
}
sk page::before { top: 6px; }
sk page::after { bottom: 6px; }

/* --- details 卷轴 --- */
sk details {
  margin: 12px 0;
  background:
    linear-gradient(180deg, rgba(45, 35, 70, 0.65) 0%, rgba(22, 18, 42, 0.75) 100%);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
sk details::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #c9a961 0%, #a83232 50%, #c9a961 100%);
  box-shadow: 0 0 6px rgba(201, 169, 97, 0.5);
}

sk summary {
  cursor: pointer;
  padding: 11px 40px 11px 44px;
  font-size: 15px;
  font-weight: bold;
  color: #ffe8a8;
  background:
    linear-gradient(90deg, rgba(168, 50, 50, 0.28) 0%, rgba(40, 30, 60, 0.5) 30%, transparent 100%);
  border-bottom: 1px solid rgba(201, 169, 97, 0.3);
  letter-spacing: 3px;
  list-style: none;
  position: relative;
  text-shadow: 0 0 8px rgba(255, 200, 100, 0.5);
  background-size: 200% 100%;
  animation: skGlow 7s ease-in-out infinite;
}
sk summary::-webkit-details-marker { display: none; }
sk summary::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
sk summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #c9a961;
  border-bottom: 2px solid #c9a961;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s;
}
sk details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
sk summary:hover {
  background:
    linear-gradient(90deg, rgba(168, 50, 50, 0.45) 0%, rgba(60, 45, 90, 0.6) 50%, transparent 100%);
  color: #fff5cc;
}
@keyframes skGlow {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}

/* --- SVG 图标 注入 各 details --- */
sk #sk1 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 20 L7 10 L10 14 L14 6 L18 12 L22 20 Z' fill='none' stroke='%23ffd97a' stroke-width='1.5' stroke-linejoin='round'/><circle cx='14' cy='6' r='1.5' fill='%23a83232'/></svg>");
}
sk #sk2 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 12 Q6 6 12 12 T22 12 M2 17 Q6 11 12 17 T22 17 M2 7 Q6 1 12 7 T22 7' fill='none' stroke='%23ffd97a' stroke-width='1.5'/></svg>");
}
sk #sk3 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><ellipse cx='12' cy='12' rx='10' ry='6' fill='none' stroke='%23ffd97a' stroke-width='1.5'/><circle cx='12' cy='12' r='3' fill='%23a83232'/><circle cx='13' cy='11' r='1' fill='%23ffe8a8'/></svg>");
}
sk #sk4 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 2 L5 13 L11 13 L9 22 L18 9 L12 9 L14 2 Z' fill='%23ffd97a' stroke='%23a83232' stroke-width='1'/></svg>");
}
sk #sk5 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='5' width='16' height='14' rx='1' fill='none' stroke='%23ffd97a' stroke-width='1.5'/><path d='M8 9h8M8 12h8M8 15h5' stroke='%23ffd97a' stroke-width='1'/><circle cx='4' cy='12' r='2' fill='%23a83232'/><circle cx='20' cy='12' r='2' fill='%23a83232'/></svg>");
}
sk #sk6 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%23ffd97a' stroke-width='1.5'/><path d='M12 2 A 5 5 0 0 1 12 12 A 5 5 0 0 0 12 22 A 10 10 0 0 1 12 2 Z' fill='%23ffd97a'/><circle cx='12' cy='7' r='1.5' fill='%230d1322'/><circle cx='12' cy='17' r='1.5' fill='%23ffd97a'/></svg>");
}

sk details > *:not(summary) { padding: 4px 16px; }
sk details > p, sk details > ul, sk details > ol, sk details > table {
  margin: 8px 14px;
}

/* --- 文本元素 --- */
sk strong {
  color: #ffd97a;
  font-weight: normal;
  text-shadow: 0 0 6px rgba(255, 217, 122, 0.45);
  letter-spacing: 1.5px;
}
sk em, sk i {
  color: #b8b0d0;
  font-style: italic;
  display: block;
  padding: 8px 14px;
  margin: 10px 0;
  border-left: 2px solid rgba(184, 176, 208, 0.5);
  background: rgba(184, 176, 208, 0.06);
  font-size: 14px;
  position: relative;
}
sk em::before, sk i::before {
  content: "「"; color: #c9a961; margin-right: 4px; font-size: 16px;
}
sk em::after, sk i::after {
  content: "」"; color: #c9a961; margin-left: 4px; font-size: 16px;
}
sk emp {
  display: inline-block;
  padding: 1px 9px;
  margin: 0 2px;
  background: linear-gradient(135deg, #a83232 0%, #6b1f1f 100%);
  color: #ffe8a8;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 1.5px;
  box-shadow:
    0 1px 3px rgba(168, 50, 50, 0.6),
    inset 0 1px 0 rgba(255, 220, 150, 0.35);
}

/* --- 正文标签 --- */
sk n {
  display: block;
  margin: 12px 0;
  font-size: 15.5px;
  line-height: 2.05;
  color: #dcd5be;
  text-indent: 2em;
}
sk page n:first-of-type::first-letter {
  font-size: 1.5em;
  color: #ffd97a;
  font-family: "STKaiti", "KaiTi", serif;
  text-shadow: 0 0 8px rgba(255, 217, 122, 0.4);
}
sk env {
  display: block;
  margin: 10px 0;
  padding: 8px 14px;
  font-style: italic;
  color: #a8a090;
  font-size: 14px;
  border-left: 2px solid #c9a961;
  background: linear-gradient(90deg, rgba(201, 169, 97, 0.1), transparent);
}
sk t {
  display: inline-block;
  padding: 3px 12px;
  margin: 4px 8px 4px 0;
  background: radial-gradient(circle, #a83232 0%, #6b1f1f 100%);
  color: #ffe8a8;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid #c9a961;
  letter-spacing: 2px;
  box-shadow: 0 0 10px rgba(168, 50, 50, 0.5);
}
sk img {
  display: block;
  max-width: 100%;
  margin: 16px auto;
  border: 2px solid #c9a961;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(201, 169, 97, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.7);
  filter: sepia(0.18) contrast(1.06);
}

/* --- 列表 --- */
sk ul, sk ol { padding-left: 24px; margin: 10px 14px; }
sk li {
  margin: 6px 0;
  padding: 5px 12px;
  background: linear-gradient(90deg, rgba(201, 169, 97, 0.1), transparent 80%);
  border-left: 2px solid #c9a961;
  list-style: none;
  position: relative;
  font-size: 14.5px;
}
sk ul li::before {
  content: "◈"; color: #a83232; margin-right: 8px; font-size: 11px;
}
sk ol { counter-reset: skol; }
sk ol li { counter-increment: skol; }
sk ol li::before {
  content: counter(skol, cjk-heavenly-stem) "、";
  color: #ffd97a; margin-right: 6px; font-weight: bold;
}

/* --- 表格 --- */
sk table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
  background: rgba(20, 15, 35, 0.55);
  border: 1px solid #c9a961;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
sk thead { background: linear-gradient(180deg, #a83232 0%, #6b1f1f 100%); }
sk th {
  padding: 9px 12px; color: #ffe8a8; font-weight: normal;
  letter-spacing: 2px; border: 1px solid #c9a961;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-size: 13px;
}
sk td {
  padding: 7px 12px; border: 1px solid rgba(201, 169, 97, 0.35);
  color: #d8d4c0; vertical-align: top; white-space: normal; min-width: 60px;
}
sk tbody tr:nth-child(odd) td { background: rgba(201, 169, 97, 0.06); }
sk tbody tr:hover td { background: rgba(168, 50, 50, 0.18); color: #fff5cc; }

sk hr {
  border: none;
  height: 2px;
  margin: 16px 0;
  background: linear-gradient(90deg, transparent, #c9a961 20%, #a83232 50%, #c9a961 80%, transparent);
  opacity: 0.65;
}

/* ==================================================
   二·国民视角 宣纸市井
   ================================================== */

mt {
  display: grid;
  grid-template-columns: 1fr 34px;
  position: relative;
  margin: 14px 0;
  padding: 20px 12px 24px 20px;
  color: #2c2820;
  background:
    radial-gradient(circle at 15% 20%, rgba(180, 150, 100, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(160, 130, 80, 0.12) 0%, transparent 45%),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(180, 140, 80, 0.02) 20px 21px),
    linear-gradient(135deg, #f7eedb 0%, #ebdbb2 50%, #ddca9d 100%);
  border: 1px solid #b8956a;
  border-radius: 3px;
  box-shadow:
    inset 0 0 50px rgba(180, 140, 80, 0.18),
    inset 0 0 0 3px rgba(184, 149, 106, 0.22),
    0 8px 20px rgba(60, 40, 20, 0.35);
  overflow: hidden;
}

mt::before, mt::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'><path d='M3 3h36v36H3V3zm3 3v30h30V6H6zm3 3h24v24H9V9zm3 3v18h18V12H12zm3 3h12v12H15V15z' fill='none' stroke='%23a13d2d' stroke-width='0.9' opacity='0.6'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}
mt::before { top: 6px; left: 6px; }
mt::after { bottom: 6px; right: 6px; transform: rotate(180deg); }

mt > * { position: relative; z-index: 1; grid-column: 1; }

/* --- 侧边书脊 --- */
mt nav {
  grid-column: 2;
  grid-row: 1 / 999;
  position: sticky;
  top: 8px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  margin-left: 8px;
  background: linear-gradient(180deg, #d4ad7a 0%, #b8956a 50%, #8a6e44 100%);
  border-left: 1px solid #6b4a28;
  border-right: 1px solid #e8c89c;
  border-radius: 2px;
  box-shadow:
    inset 0 0 10px rgba(60, 40, 20, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.25);
  height: fit-content;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 5;
}
mt nav::-webkit-scrollbar { width: 0; }
mt nav::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(60, 40, 20, 0.35), transparent);
  transform: translateX(-50%);
}
mt nav a {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 4px;
  font-size: 12px;
  color: #2c2820;
  text-decoration: none;
  padding: 10px 4px;
  margin: 0 auto;
  border-left: 2px solid transparent;
  transition: all 0.3s ease;
  font-weight: bold;
}
mt nav a:hover {
  color: #a13d2d;
  border-left-color: #a13d2d;
  background: linear-gradient(90deg, rgba(245, 236, 217, 0.5), transparent);
  text-shadow: 0 0 5px rgba(161, 61, 45, 0.4);
}

/* --- 书页 page --- */
mt page {
  display: block;
  margin: 0 0 14px;
  padding: 18px 20px;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(184, 149, 106, 0.06) 28px 29px),
    linear-gradient(180deg, #fcf4dc 0%, #f5ecd9 100%);
  border: 1px solid rgba(184, 149, 106, 0.5);
  border-radius: 2px;
  position: relative;
  box-shadow:
    inset 0 0 20px rgba(180, 140, 80, 0.12),
    0 2px 6px rgba(60, 40, 20, 0.1);
}
mt page::before, mt page::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8956a 30%, #a13d2d 50%, #b8956a 70%, transparent);
}
mt page::before { top: 6px; }
mt page::after { bottom: 6px; }

/* --- details 账册 --- */
mt details {
  margin: 12px 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 232, 0.7) 0%, rgba(240, 225, 195, 0.55) 100%);
  border: 1px solid #b8956a;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
mt details::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #a13d2d 0%, #7a2e22 100%);
}

mt summary {
  cursor: pointer;
  padding: 11px 40px 11px 44px;
  font-size: 15.5px;
  font-weight: bold;
  color: #2c2820;
  background:
    linear-gradient(90deg, rgba(161, 61, 45, 0.1) 0%, rgba(245, 236, 217, 0.55) 100%);
  border-bottom: 1px dashed rgba(184, 149, 106, 0.55);
  letter-spacing: 3px;
  list-style: none;
  position: relative;
  transition: all 0.3s;
}
mt summary::-webkit-details-marker { display: none; }
mt summary::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-size: contain;
}
mt summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #a13d2d;
  border-bottom: 2px solid #a13d2d;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.35s;
}
mt details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
mt summary:hover {
  background: linear-gradient(90deg, rgba(161, 61, 45, 0.18) 0%, rgba(245, 236, 217, 0.8) 100%);
  color: #a13d2d;
}

/* --- 国民视角 SVG 图标 --- */
mt #mt1 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='7' r='4' fill='none' stroke='%23a13d2d' stroke-width='1.5'/><path d='M4 22 Q4 14 12 14 Q20 14 20 22' fill='none' stroke='%23a13d2d' stroke-width='1.5'/></svg>");
}
mt #mt2 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='%23a13d2d' stroke-width='1.5'/><circle cx='12' cy='12' r='6' fill='none' stroke='%23a13d2d' stroke-width='1.2'/><circle cx='12' cy='12' r='2' fill='%23a13d2d'/></svg>");
}
mt #mt3 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='8' cy='8' r='3' fill='none' stroke='%23a13d2d' stroke-width='1.4'/><circle cx='16' cy='8' r='3' fill='none' stroke='%23a13d2d' stroke-width='1.4'/><path d='M2 22 Q2 15 8 15 Q14 15 14 22 M10 22 Q10 15 16 15 Q22 15 22 22' fill='none' stroke='%23a13d2d' stroke-width='1.4'/></svg>");
}
mt #mt4 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5 Q3 3 5 3 H19 Q21 3 21 5 V14 Q21 16 19 16 H10 L5 21 V16 Q3 16 3 14 Z' fill='none' stroke='%23a13d2d' stroke-width='1.4'/><circle cx='8' cy='10' r='1' fill='%23a13d2d'/><circle cx='12' cy='10' r='1' fill='%23a13d2d'/><circle cx='16' cy='10' r='1' fill='%23a13d2d'/></svg>");
}
mt #mt5 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 16 Q2 16 2 13 Q2 10 5 10 Q5 6 10 6 Q14 6 14 10 Q19 10 19 13 Q19 16 16 16 Q14 18 10 18 Q6 18 5 16 Z' fill='none' stroke='%23a13d2d' stroke-width='1.4'/></svg>");
}
mt #mt6 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 4 Q12 2 12 6 V20 Q12 16 3 18 Z M21 4 Q12 2 12 6 V20 Q12 16 21 18 Z' fill='none' stroke='%23a13d2d' stroke-width='1.4'/><path d='M12 6 V20' stroke='%23a13d2d' stroke-width='1.4'/></svg>");
}
mt #mt7 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21 C 8 17 3 14 3 9 A 5 5 0 0 1 12 6 A 5 5 0 0 1 21 9 C 21 14 16 17 12 21 Z' fill='%23a13d2d' opacity='0.85'/></svg>");
}
mt #mt8 summary::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='6' y='2' width='12' height='20' rx='2' fill='none' stroke='%23a13d2d' stroke-width='1.5'/><path d='M10 6 V18 M14 6 V18' stroke='%23a13d2d' stroke-width='1.2'/></svg>");
}

mt details > *:not(summary) { padding: 4px 16px; }
mt details > p, mt details > ul, mt details > ol, mt details > table {
  margin: 8px 14px;
}

/* --- 文本元素 --- */
mt strong {
  color: #a13d2d;
  font-weight: bold;
  letter-spacing: 1.5px;
}
mt em, mt i {
  color: #5a4a30;
  font-style: italic;
  display: block;
  padding: 8px 14px;
  margin: 10px 0;
  border-left: 2px dotted #a13d2d;
  background: rgba(161, 61, 45, 0.05);
  font-size: 14px;
}
mt em::before, mt i::before {
  content: "「"; color: #a13d2d; margin-right: 4px; font-size: 16px;
}
mt em::after, mt i::after {
  content: "」"; color: #a13d2d; margin-left: 4px; font-size: 16px;
}
mt emp {
  display: inline-block;
  padding: 1px 9px;
  margin: 0 2px;
  background: linear-gradient(135deg, #a13d2d 0%, #7a2e22 100%);
  color: #f5ecd9;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 1.5px;
  box-shadow: 0 1px 3px rgba(122, 46, 34, 0.5);
}

/* --- 正文标签 --- */
mt n {
  display: block;
  margin: 12px 0;
  font-size: 15.5px;
  line-height: 2.05;
  color: #2a2418;
  text-indent: 2em;
}
mt page n:first-of-type::first-letter {
  font-size: 1.5em;
  color: #a13d2d;
  font-family: "STKaiti", "KaiTi", serif;
  font-weight: bold;
}
mt env {
  display: block;
  margin: 10px 0;
  padding: 8px 14px;
  font-style: italic;
  color: #6b5a3a;
  font-size: 14px;
  border-left: 2px solid #5d7a4a;
  background: linear-gradient(90deg, rgba(93, 122, 74, 0.1), transparent);
}
mt t {
  display: inline-block;
  padding: 4px 10px;
  margin: 4px 8px 4px 0;
  background: radial-gradient(circle, #a13d2d 0%, #7a2e22 100%);
  color: #f5ecd9;
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 1px;
  box-shadow: 0 0 0 2px #f5ecd9, 0 0 0 3px #a13d2d, 0 2px 4px rgba(0,0,0,0.2);
  font-weight: bold;
}
mt img {
  display: block;
  max-width: 100%;
  margin: 16px auto;
  border: 1px solid #b8956a;
  padding: 8px;
  background: #f7eedb;
  box-shadow:
    0 0 0 1px #a13d2d,
    0 4px 12px rgba(60, 40, 20, 0.35);
  filter: sepia(0.12);
}

/* --- 角色对话 q 多色阶 --- */
mt q, sk q {
  display: block;
  margin: 10px 0 10px 14px;
  padding: 8px 14px;
  border-left: 3px solid #a13d2d;
  background: linear-gradient(90deg, rgba(161, 61, 45, 0.08), transparent);
  position: relative;
  font-size: 15px;
  line-height: 1.85;
}
mt q[s]::before, sk q[s]::before {
  content: attr(s);
  display: block;
  font-size: 12px;
  margin-bottom: 3px;
  font-weight: bold;
  letter-spacing: 2px;
  font-family: "STKaiti", "KaiTi", serif;
}

/* c="0" 主角 朱红 */
mt q[c="0"], sk q[c="0"] {
  border-left-color: #a13d2d;
  background: linear-gradient(90deg, rgba(161, 61, 45, 0.12), transparent);
}
mt q[c="0"]::before, sk q[c="0"]::before { color: #a13d2d; }

/* c="1" 朱砂红 */
mt q[c="1"], sk q[c="1"] {
  border-left-color: #c44536;
  background: linear-gradient(90deg, rgba(196, 69, 54, 0.1), transparent);
}
mt q[c="1"]::before, sk q[c="1"]::before { color: #c44536; }

/* c="2" 竹青绿 */
mt q[c="2"], sk q[c="2"] {
  border-left-color: #5d7a4a;
  background: linear-gradient(90deg, rgba(93, 122, 74, 0.1), transparent);
}
mt q[c="2"]::before, sk q[c="2"]::before { color: #5d7a4a; }

/* c="3" 靛蓝 */
mt q[c="3"], sk q[c="3"] {
  border-left-color: #3d5a7a;
  background: linear-gradient(90deg, rgba(61, 90, 122, 0.1), transparent);
}
mt q[c="3"]::before, sk q[c="3"]::before { color: #3d5a7a; }

/* c="4" 紫绛 */
mt q[c="4"], sk q[c="4"] {
  border-left-color: #7a4a8c;
  background: linear-gradient(90deg, rgba(122, 74, 140, 0.1), transparent);
}
mt q[c="4"]::before, sk q[c="4"]::before { color: #7a4a8c; }

/* c="5" 赭黄 */
mt q[c="5"], sk q[c="5"] {
  border-left-color: #b8782a;
  background: linear-gradient(90deg, rgba(184, 120, 42, 0.1), transparent);
}
mt q[c="5"]::before, sk q[c="5"]::before { color: #b8782a; }

/* c="6" 黛青 */
mt q[c="6"], sk q[c="6"] {
  border-left-color: #2d6a6a;
  background: linear-gradient(90deg, rgba(45, 106, 106, 0.1), transparent);
}
mt q[c="6"]::before, sk q[c="6"]::before { color: #2d6a6a; }

/* c="7" 桃绛 */
mt q[c="7"], sk q[c="7"] {
  border-left-color: #8a3a5a;
  background: linear-gradient(90deg, rgba(138, 58, 90, 0.1), transparent);
}
mt q[c="7"]::before, sk q[c="7"]::before { color: #8a3a5a; }

/* c="8" 苔绿 */
mt q[c="8"], sk q[c="8"] {
  border-left-color: #4a5a3a;
  background: linear-gradient(90deg, rgba(74, 90, 58, 0.1), transparent);
}
mt q[c="8"]::before, sk q[c="8"]::before { color: #4a5a3a; }

/* sk 内 q 文本颜色调整为浅色背景适配 */
sk q { color: #e8dcc0; }
sk q[s]::before { text-shadow: 0 0 4px currentColor; }

/* --- 列表 --- */
mt ul, mt ol { padding-left: 24px; margin: 10px 14px; }
mt li {
  margin: 6px 0;
  padding: 4px 12px;
  background: linear-gradient(90deg, rgba(161, 61, 45, 0.06), transparent 80%);
  border-left: 2px solid #a13d2d;
  list-style: none;
  position: relative;
  font-size: 14.5px;
}
mt ul li::before {
  content: "·"; color: #a13d2d; font-weight: bold;
  margin-right: 8px; font-size: 18px;
}
mt ol { counter-reset: mtol; }
mt ol li { counter-increment: mtol; padding-left: 14px; }
mt ol li::before {
  content: counter(mtol);
  display: inline-block;
  width: 20px; height: 20px; line-height: 20px;
  text-align: center;
  background: #a13d2d;
  color: #f5ecd9;
  border-radius: 2px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: bold;
}

/* --- 表格 --- */
mt table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
  background: rgba(255, 250, 235, 0.45);
  border: 1px solid #b8956a;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
mt thead { background: linear-gradient(180deg, #dcc294 0%, #c9a878 100%); }
mt th {
  padding: 9px 12px; color: #2c2820; font-weight: bold;
  letter-spacing: 2px; border: 1px solid #a8895a; font-size: 13px;
}
mt td {
  padding: 7px 12px; border: 1px solid rgba(184, 149, 106, 0.55);
  color: #2c2820; vertical-align: top; white-space: normal; min-width: 60px;
}
mt tbody tr:nth-child(odd) td { background: rgba(184, 149, 106, 0.07); }
mt tbody tr:hover td { background: rgba(161, 61, 45, 0.12); color: #7a2e22; }

mt hr {
  border: none;
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, transparent, #b8956a 20%, #a13d2d 50%, #b8956a 80%, transparent);
}

/* ==================================================
   响应式 移动端
   ================================================== */

@media (max-width: 480px) {
  sk, mt {
    grid-template-columns: 1fr 28px;
    font-size: 14px;
    padding: 14px 10px 16px 14px;
  }
  sk page, mt page { padding: 12px 14px; }
  sk nav a, mt nav a {
    font-size: 11px; letter-spacing: 3px; padding: 8px 2px;
  }
  sk summary, mt summary {
    font-size: 14px;
    padding: 9px 36px 9px 38px;
    letter-spacing: 2px;
  }
  sk summary::before, mt summary::before { width: 18px; height: 18px; left: 12px; }
  sk table, mt table { font-size: 12px; }
  sk th, sk td, mt th, mt td { padding: 5px 7px; }
  sk n, mt n { font-size: 14.5px; }
}