css
ai{
  --wine:#5c1a2b; --velvet:#8b1e3f; --shadow:#3d0c1a;
  --gold:#c9a961; --candle:#e6c568; --bronze:#7a5c2e;
  --parch:#f4ecd8; --cream:#ebe0c4; --ebony:#2a1810;
  --ink:#3a2418;
  display:block; max-width:640px; margin:12px auto; padding:14px;
  font:14px/1.75 "Georgia","Noto Serif SC",serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%,rgba(201,169,97,.12),transparent 50%),
    radial-gradient(ellipse at 80% 100%,rgba(139,30,63,.15),transparent 55%),
    linear-gradient(180deg,#1a0d0f 0%,#0f0608 100%);
  border:1px solid var(--gold);
  border-radius:2px;
  box-shadow:0 0 0 1px var(--shadow) inset,0 0 24px rgba(0,0,0,.6),0 8px 32px rgba(0,0,0,.4);
  position:relative;
}
ai::before,ai::after{
  content:""; position:absolute; width:38px; height:38px;
  background:
    linear-gradient(45deg,transparent 46%,var(--gold) 47%,var(--candle) 50%,var(--gold) 53%,transparent 54%),
    radial-gradient(circle at 50% 50%,var(--gold) 2px,transparent 3px);
  pointer-events:none;
}
ai::before{top:-2px;left:-2px;
  background:
    linear-gradient(135deg,var(--gold),transparent 60%),
    radial-gradient(circle at 8px 8px,var(--candle) 2px,transparent 3px);
  clip-path:polygon(0 0,100% 0,60% 8%,20% 20%,8% 60%,0 100%);}
ai::after{bottom:-2px;right:-2px;transform:rotate(180deg);
  background:
    linear-gradient(135deg,var(--gold),transparent 60%),
    radial-gradient(circle at 8px 8px,var(--candle) 2px,transparent 3px);
  clip-path:polygon(0 0,100% 0,60% 8%,20% 20%,8% 60%,0 100%);}
ai details{
  margin:10px 0; padding:0;
  background:
    linear-gradient(135deg,rgba(244,236,216,.97),rgba(235,224,196,.94)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='none' stroke='%235c1a2b' stroke-width='.4' opacity='.15'><path d='M30 5 Q45 20 30 35 Q15 20 30 5 M30 25 Q45 40 30 55 Q15 40 30 25'/><circle cx='30' cy='30' r='2'/></g></svg>");
  background-blend-mode:multiply;
  border:1px solid var(--gold);
  border-radius:3px;
  box-shadow:0 0 0 3px var(--wine) inset,0 0 0 4px var(--gold) inset,0 4px 14px rgba(0,0,0,.5);
  position:relative;
  overflow:hidden;
  animation:fadeUp .5s ease both;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
ai details::before{
  content:""; position:absolute; inset:5px;
  border:1px dashed rgba(122,92,46,.4);
  border-radius:2px; pointer-events:none;
}
ai summary{
  list-style:none; cursor:pointer;
  padding:12px 16px 12px 42px;
  background:
    linear-gradient(180deg,var(--wine),var(--shadow) 60%,#1e0710);
  color:var(--candle);
  font:600 15px/1.4 "Cinzel","Noto Serif SC",serif;
  letter-spacing:2px;
  text-shadow:0 1px 0 #000,0 0 8px rgba(230,197,104,.5);
  border-bottom:2px solid var(--gold);
  box-shadow:0 2px 0 var(--bronze),inset 0 1px 0 rgba(230,197,104,.3),inset 0 -1px 0 rgba(0,0,0,.5);
  position:relative;
  transition:.3s;
}
ai summary::-webkit-details-marker{display:none}
ai summary::before{
  content:"❦"; position:absolute; left:14px; top:50%;
  transform:translateY(-50%);
  color:var(--candle); font-size:16px;
  text-shadow:0 0 6px var(--candle);
  transition:.4s;
}
ai summary::after{
  content:""; position:absolute; right:14px; top:50%;
  width:8px; height:8px; margin-top:-4px;
  border-right:2px solid var(--candle);
  border-bottom:2px solid var(--candle);
  transform:rotate(-45deg);
  transition:.3s;
}
ai details[open] summary::after{transform:rotate(45deg)}
ai details[open] summary::before{transform:translateY(-50%) rotate(180deg);color:var(--gold)}
ai summary:hover{background:linear-gradient(180deg,var(--velvet),var(--wine) 60%,var(--shadow))}
ai summary:hover::before{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{text-shadow:0 0 6px var(--candle)}50%{text-shadow:0 0 16px var(--candle),0 0 24px var(--gold)}}
ai details > p,ai details > t,ai details > b,ai details > q{
  margin:6px 12px; display:block;
}
ai details > p{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:5px 8px;
  background:linear-gradient(90deg,rgba(201,169,97,.08),transparent 80%);
  border-left:2px solid var(--gold);
  border-radius:0 2px 2px 0;
}
ai details > p:hover{background:linear-gradient(90deg,rgba(139,30,63,.12),transparent 90%)}
ai f{
  display:inline-block; padding:2px 9px;
  background:linear-gradient(180deg,var(--wine),var(--shadow));
  color:var(--candle);
  font:600 12px/1.5 "Cinzel","Noto Serif SC",serif;
  letter-spacing:1px;
  border:1px solid var(--gold);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(230,197,104,.35),inset 0 -1px 2px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.3);
  text-shadow:0 1px 0 #000;
  white-space:nowrap;
}
ai d{color:var(--ink); font-size:13.5px; flex:1; min-width:120px}
ai i{
  display:inline-block; padding:2px 10px;
  font-style:normal; font-size:12px; font-weight:600;
  color:var(--wine);
  background:linear-gradient(180deg,#f9f2df,#e8d9b0);
  border:1px solid var(--bronze);
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(230,197,104,.6),0 1px 0 rgba(0,0,0,.15);
  letter-spacing:.5px;
  position:relative;
}
ai i::before,ai i::after{
  content:"◆"; color:var(--gold); font-size:8px;
  margin:0 4px; vertical-align:1px;
}
ai em{
  font-style:normal;
  display:inline-block; padding:1px 8px;
  color:var(--candle);
  background:linear-gradient(180deg,var(--velvet),var(--shadow));
  border:1px solid var(--candle);
  border-radius:8px;
  font:600 12px "Georgia";
  text-shadow:0 1px 0 #000,0 0 4px rgba(230,197,104,.6);
  box-shadow:0 0 6px rgba(139,30,63,.4),inset 0 0 4px rgba(0,0,0,.5);
}
ai t{
  display:block; margin:12px 12px 6px !important;
  padding:6px 12px;
  background:linear-gradient(90deg,rgba(92,26,43,.9),rgba(92,26,43,.5) 60%,transparent);
  color:var(--candle);
  font:600 13px/1.4 "Cinzel","Noto Serif SC",serif;
  letter-spacing:2px;
  border-left:3px double var(--gold);
  text-shadow:0 1px 0 #000;
  position:relative;
}
ai t::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
ai q{
  display:block !important; quotes:none;
  margin:8px 12px !important;
  padding:8px 14px 8px 34px;
  background:linear-gradient(90deg,rgba(139,30,63,.08),rgba(201,169,97,.06));
  border-left:3px solid var(--gold);
  color:var(--wine);
  font:italic 13px/1.7 "Cormorant Garamond","STKaiti","楷体",serif;
  border-radius:0 4px 4px 0;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
ai q::before{
  content:"❝"; position:absolute; left:8px; top:4px;
  font-size:22px; color:var(--gold);
  font-family:Georgia,serif;
  text-shadow:0 0 4px rgba(201,169,97,.6);
}
ai b{
  display:block !important; margin:10px 12px !important;
  height:14px; padding:2px;
  background:linear-gradient(180deg,#1a0a10,#3d0c1a);
  border:1px solid var(--bronze);
  border-radius:8px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(230,197,104,.3);
  position:relative; overflow:hidden;
  font-weight:normal;
}
ai bi{
  display:block; height:100%;
  background:
    linear-gradient(180deg,var(--velvet),var(--wine) 40%,var(--shadow));
  border-radius:6px;
  box-shadow:inset 0 1px 0 rgba(230,197,104,.5),inset 0 -2px 4px rgba(0,0,0,.6),0 0 8px rgba(139,30,63,.6);
  position:relative;
  transition:width .8s ease;
}
ai bi::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(230,197,104,.5) 50%,transparent);
  animation:flow 2.4s linear infinite;
}
@keyframes flow{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
ai article{
  display:block; margin:16px 0;
  padding:18px 20px;
  background:
    linear-gradient(180deg,rgba(244,236,216,.98),rgba(235,224,196,.96)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='%235c1a2b' opacity='.06'><path d='M60 20 Q80 40 60 60 Q40 40 60 20 Z M60 60 Q80 80 60 100 Q40 80 60 60 Z'/></g></svg>");
  background-blend-mode:multiply;
  border:1px solid var(--gold);
  border-radius:2px;
  box-shadow:0 0 0 3px var(--wine) inset,0 0 0 4px var(--gold) inset,0 6px 20px rgba(0,0,0,.5);
  color:var(--ink);
  position:relative;
}
ai article::before,ai article::after{
  content:"✦ ❦ ✦"; display:block; text-align:center;
  color:var(--wine); letter-spacing:12px; font-size:14px;
  margin:2px 0 14px;
  text-shadow:0 0 4px rgba(201,169,97,.4);
}
ai article::after{margin:14px 0 2px}
ai article p{
  margin:0 0 14px;
  font:15px/1.95 "Georgia","Noto Serif SC",serif;
  text-align:justify;
  text-indent:2em;
  position:relative;
}
ai article p+p{
  padding-top:14px;
  border-top:1px dotted rgba(139,30,63,.3);
}
ai article p:first-of-type::first-letter{
  float:left; font-size:44px; line-height:.9;
  padding:4px 8px 0 0;
  color:var(--wine);
  font-family:"Cinzel","STKaiti",serif;
  font-weight:700;
  text-shadow:2px 2px 0 var(--gold),3px 3px 6px rgba(0,0,0,.3);
}
ai pre{
  margin:10px 12px; padding:14px 16px;
  background:
    linear-gradient(180deg,#f0e4c8,#e0d0a8);
  color:var(--ink);
  border:1px solid var(--bronze);
  border-left:4px solid var(--wine);
  border-radius:2px;
  box-shadow:inset 0 0 20px rgba(139,30,63,.1),0 2px 6px rgba(0,0,0,.2);
  font:12.5px/1.7 "Courier New","Consolas",monospace;
  white-space:pre-wrap; overflow-x:auto;
  position:relative;
}
ai pre::before{
  content:"📜"; position:absolute; top:-2px; right:8px;
  font-size:18px; opacity:.7;
}
ai code{
  background:transparent; padding:0;
  color:var(--wine); font-weight:600;
}
ai hr{
  border:none; height:14px; margin:10px 12px;
  background:
    radial-gradient(circle at 50% 50%,var(--gold) 2px,transparent 3px),
    linear-gradient(90deg,transparent,var(--bronze) 20%,var(--gold) 50%,var(--bronze) 80%,transparent);
  background-size:12px 100%,100% 1px;
  background-repeat:repeat-x,no-repeat;
  background-position:center,center;
}
ai strong{color:var(--wine); font-weight:700}