css
ai {
  --主墨:#11100e;
  --纸底:#1c1916;
  --纸底深:#0d0c0a;
  --骨白:#d8d2c4;
  --灰烬:#7a766d;
  --赭金:#c9a876;
  --血锈:#8a3636;
  --冷青:#6b8a8a;
  --粉灰:#9d7b7b;
  --警红:#a84040;
  display:block;
  max-width:680px;
  margin:0 auto;
  padding:12px 10px;
  background:linear-gradient(165deg,var(--纸底) 0%,var(--纸底深) 100%);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(165deg,var(--纸底),var(--纸底深));
  color:var(--骨白);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;
  line-height:1.6;
  position:relative;
  border:1px solid rgba(201,168,118,0.15);
  box-shadow:0 6px 24px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.03);
}
ai::before {
  content:'';
  position:absolute;
  top:-8px;
  left:16px;
  width:56px;
  height:56px;
  background:radial-gradient(circle,rgba(29,26,23,0.7) 30%,transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}
hd {
  display:block;
  padding:8px 0 10px;
  border-bottom:1px dashed rgba(201,168,118,0.3);
  margin-bottom:14px;
  font-size:13px;
  color:var(--灰烬);
  letter-spacing:0.3px;
  position:relative;
}
hd::before {
  content:'';
  width:20px;
  height:20px;
  display:inline-block;
  vertical-align:middle;
  margin-right:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16' rx='1.5' ry='4' fill='%23c9a876'/%3E%3Cellipse cx='12' cy='8' rx='2' ry='5' fill='%23f4d19b'%3E%3Canimate attributeName='ry' values='5;6;5' dur='1.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.85;1' dur='1.2s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E") center/contain no-repeat;
}
n {
  display:block;
  margin:0 0 16px;
}
n p {
  margin:0;
  padding:12px 14px;
  background:linear-gradient(to bottom,rgba(28,25,22,0.4),rgba(13,12,10,0.3));
  clip-path:polygon(0 2%,98% 0,100% 96%,3% 100%);
  text-align:justify;
  line-height:1.85;
  font-size:15px;
  color:var(--骨白);
  border-left:2px solid rgba(201,168,118,0.2);
  position:relative;
}
n p::first-letter {
  font-size:2.2em;
  font-weight:700;
  color:var(--赭金);
  float:left;
  line-height:0.9;
  margin:4px 6px 0 0;
  font-family:Georgia,serif;
}
details {
  margin:0 0 10px;
  border-top:1px solid rgba(122,118,109,0.2);
  padding-top:8px;
}
details summary {
  cursor:pointer;
  padding:6px 0 6px 28px;
  font-size:15px;
  font-weight:600;
  color:var(--赭金);
  position:relative;
  list-style:none;
  border-bottom:1px solid rgba(201,168,118,0.4);
  transition:all 0.2s;
}
details summary::-webkit-details-marker {
  display:none;
}
details summary::before {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background:radial-gradient(circle,var(--血锈) 45%,transparent 46%,transparent 60%,var(--血锈) 61%);
  border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.4);
}
details summary:hover {
  color:var(--骨白);
  padding-left:32px;
}
details summary:hover::after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(to right,var(--赭金),transparent);
  animation:underline-expand 0.3s ease;
}
@keyframes underline-expand {
  from {width:0;}
  to {width:100%;}
}
details[open] summary {
  margin-bottom:10px;
}
details p {
  margin:0 0 8px;
  padding:8px 10px;
  background:rgba(13,12,10,0.3);
  border-left:3px solid var(--冷青);
  position:relative;
}
details p[t]::before {
  content:attr(t);
  position:absolute;
  left:-3px;
  top:-8px;
  font-size:10px;
  padding:2px 6px;
  background:var(--冷青);
  color:var(--主墨);
  font-weight:700;
  letter-spacing:0.5px;
  border-radius:2px 2px 0 0;
}
details p[t="npc"] {
  border-left-color:var(--赭金);
}
details p[t="npc"]::before {
  background:var(--赭金);
}
details p[t="心"],
details p[t="环"],
details p[t="压"] {
  border-left-color:var(--灰烬);
}
details p[t="心"]::before,
details p[t="环"]::before,
details p[t="压"]::before {
  background:var(--灰烬);
}
details p[t="线"] {
  border-left-color:var(--冷青);
}
details p[t="news"] {
  border-left-color:var(--粉灰);
}
details p[t="news"]::before {
  background:var(--粉灰);
}
details p[t="memo"],
details p[t="hist"] {
  border-left-color:var(--灰烬);
  background:rgba(28,25,22,0.2);
}
details p[t="memo"]::before {
  content:'📓';
  background:transparent;
  color:var(--灰烬);
}
details p[t="hist"]::before {
  content:'📜';
  background:transparent;
  color:var(--灰烬);
}
details p[t="act"] {
  border-left-color:var(--赭金);
  background:rgba(201,168,118,0.08);
}
details p[t="act"]::before {
  content:'🎯';
  background:transparent;
}
f {
  display:inline-block;
  font-size:16px;
  font-weight:700;
  color:var(--赭金);
  font-family:Georgia,serif;
  position:relative;
  padding-bottom:4px;
  margin-right:8px;
}
f::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(to right,var(--赭金) 60%,transparent);
  transition:width 0.3s;
}
f:hover::after {
  width:120%;
}
d {
  display:block;
  padding:3px 0 3px 12px;
  position:relative;
  color:var(--灰烬);
  font-size:13px;
  line-height:1.7;
}
d::before {
  content:'';
  position:absolute;
  left:0;
  top:8px;
  width:2px;
  height:12px;
  background:var(--冷青);
}
d[c="dmg"] {
  color:var(--血锈);
}
d[c="dmg"]::before {
  background:var(--血锈);
}
d[c="x"] {
  color:var(--粉灰);
}
d[c="x"]::before {
  background:var(--粉灰);
}
d[c="warn"] {
  color:var(--警红);
  animation:warn-pulse 2s ease infinite;
}
d[c="warn"]::before {
  background:var(--警红);
}
@keyframes warn-pulse {
  0%,100% {opacity:1;}
  50% {opacity:0.6;}
}
d[w]::before {
  width:4px;
}
d[w="高"]::before {
  background:var(--血锈);
  height:16px;
  animation:pressure-high 1.5s ease infinite;
}
@keyframes pressure-high {
  0%,100% {transform:scaleY(1);}
  50% {transform:scaleY(1.3);}
}
d[w="中"]::before {
  background:var(--赭金);
  height:12px;
}
d[w="低"]::before {
  background:var(--灰烬);
  height:8px;
}
details p[t="act"] d {
  padding-left:18px;
  cursor:pointer;
  transition:all 0.25s;
}
details p[t="act"] d::before {
  width:3px;
  height:14px;
  background:var(--赭金);
  transition:all 0.25s;
}
details p[t="act"] d:hover {
  padding-left:24px;
  color:var(--骨白);
}
details p[t="act"] d:hover::before {
  width:5px;
  height:18px;
  background:linear-gradient(to bottom,var(--赭金),var(--冷青));
}
details p[t="act"] d:hover::after {
  content:'→';
  position:absolute;
  right:8px;
  color:var(--赭金);
  animation:arrow-slide 0.4s ease;
}
@keyframes arrow-slide {
  from {opacity:0;transform:translateX(-6px);}
  to {opacity:1;transform:translateX(0);}
}
b {
  display:block;
  padding:6px 10px;
  margin:4px 0;
  position:relative;
  background:linear-gradient(to right,rgba(28,25,22,0.5),rgba(13,12,10,0.3));
  border:1px solid rgba(122,118,109,0.2);
  font-size:13px;
  color:var(--骨白);
  overflow:hidden;
}
b::before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--fill,50%);
  background:var(--bar-color,var(--灰烬));
  transition:width 0.4s ease;
  z-index:0;
  opacity:0.6;
}
b[lv="1"] {
  --bar-color:var(--血锈);
  --fill:20%;
}
b[lv="2"] {
  --bar-color:linear-gradient(to right,var(--血锈),var(--灰烬));
  --fill:40%;
}
b[lv="3"] {
  --bar-color:linear-gradient(to right,var(--灰烬),var(--赭金));
  --fill:60%;
}
b[lv="4"] {
  --bar-color:linear-gradient(to right,var(--赭金),var(--冷青));
  --fill:80%;
}
b[lv="5"] {
  --bar-color:linear-gradient(to right,var(--冷青),#5a9a7c);
  --fill:100%;
}
b > * {
  position:relative;
  z-index:1;
}
q {
  display:block;
  padding:8px 12px;
  margin:6px 0;
  background:linear-gradient(135deg,rgba(244,209,155,0.15),rgba(201,168,118,0.1));
  border-left:3px solid var(--赭金);
  font-family:'Segoe Print','Comic Sans MS',cursive;
  font-size:13px;
  color:var(--骨白);
  font-style:italic;
  position:relative;
  transform:rotate(-0.5deg);
}
q::before {
  content:'';
  position:absolute;
  top:-4px;
  left:50%;
  transform:translateX(-50%);
  width:40px;
  height:12px;
  background:linear-gradient(to bottom,rgba(201,168,118,0.3),transparent);
  border-radius:2px;
}
@media (max-width:600px) {
  ai {
    padding:10px 8px;
    font-size:13px;
  }
  hd {
    font-size:12px;
  }
  n p {
    padding:10px 12px;
    font-size:14px;
  }
  details summary {
    font-size:14px;
  }
  f {
    font-size:15px;
  }
}