css
ai{
  display:block;
  position:relative;
  background:#ffffff;
  color:rgba(0,0,0,.9);
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  font-size:14px;
  line-height:1.75;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(233,30,99,.12);
  box-shadow:0 0 30px rgba(233,30,99,.04),0 2px 10px rgba(0,0,0,.06);
}
ai::before{
  content:'';
  display:block;
  height:3px;
  background:linear-gradient(90deg,#E91E63,#FFD700,#E91E63);
  background-size:200% 100%;
  animation:shimBar 4s ease infinite;
}
@keyframes shimBar{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
ai hd{
  display:block;
  background:linear-gradient(135deg,rgba(233,30,99,.04),rgba(255,215,0,.02));
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
ai hd d{
  display:block;
  font-size:12.5px;
  color:rgba(0,0,0,.7);
  padding:2px 0;
  letter-spacing:.3px;
}
ai hd d:first-child{
  color:#b8860b;
  font-weight:600;
  font-size:13px;
}
ai hr{
  border:none;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(233,30,99,.2),rgba(255,215,0,.12),transparent);
  margin:0;
}
ai article{
  display:block;
  padding:18px 18px 14px;
}
ai article p{
  margin:0 0 12px;
  text-align:justify;
  font-size:14.5px;
  line-height:1.85;
  color:rgba(0,0,0,.9);
}
ai article p:last-child{
  margin-bottom:0;
}
ai details{
  display:block;
  border-top:1px solid rgba(0,0,0,.05);
  background:rgba(0,0,0,.01);
}
ai details[open]{
  background:rgba(0,0,0,.02);
}
ai summary{
  display:block;
  padding:12px 18px;
  font-size:13px;
  font-weight:700;
  color:rgba(0,0,0,.9);
  cursor:pointer;
  position:relative;
  letter-spacing:.5px;
  user-select:none;
  transition:background .2s;
  list-style:none;
}
ai summary::-webkit-details-marker{display:none}
ai summary::after{
  content:'▸';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  color:rgba(233,30,99,.5);
  transition:transform .25s ease;
}
ai details[open]>summary::after{
  transform:translateY(-50%) rotate(90deg);
}
ai summary:hover{
  background:rgba(233,30,99,.03);
}
ai details>p{
  display:block;
  padding:2px 18px;
  margin:0;
  font-size:13px;
  line-height:1.75;
  color:rgba(0,0,0,.8);
}
ai details>p:first-of-type{
  padding-top:4px;
}
ai details>p:last-of-type{
  padding-bottom:12px;
}
ai f{
  display:inline;
  color:#c4260a;
  font-weight:600;
  font-size:12px;
  letter-spacing:.3px;
  margin-right:4px;
}
ai f::after{
  content:'';
  display:inline-block;
  width:4px;
  height:4px;
  background:#E91E63;
  border-radius:50%;
  margin:0 5px 2px 1px;
  vertical-align:middle;
  opacity:.5;
}
ai table{
  width:calc(100% - 36px);
  margin:4px 18px 14px;
  border-collapse:collapse;
  font-size:12.5px;
}
ai th{
  background:rgba(233,30,99,.06);
  color:#a0522d;
  font-weight:600;
  font-size:12px;
  padding:8px 12px;
  text-align:left;
  letter-spacing:.5px;
  border-bottom:1px solid rgba(233,30,99,.1);
}
ai td{
  padding:7px 12px;
  border-bottom:1px solid rgba(0,0,0,.04);
  color:rgba(0,0,0,.8);
  vertical-align:top;
}
ai td:first-child{
  width:28px;
  color:#E91E63;
  font-weight:700;
  text-align:center;
  opacity:.7;
}
ai tr:last-child td{
  border-bottom:none;
}
ai q{
  display:block;
  margin:4px 18px;
  padding:10px 14px;
  background:rgba(233,30,99,.02);
  border:1px solid rgba(233,30,99,.08);
  border-left:3px solid #E91E63;
  border-radius:0 8px 8px 0;
  font-size:13px;
  color:rgba(0,0,0,.85);
  quotes:none;
  cursor:pointer;
  transition:all .25s ease;
  line-height:1.6;
}
ai q:first-of-type{
  margin-top:6px;
}
ai q:last-of-type{
  margin-bottom:14px;
}
ai q:hover{
  background:rgba(233,30,99,.06);
  border-color:rgba(233,30,99,.2);
  border-left-color:#FFD700;
  transform:translateX(3px);
  color:rgba(0,0,0,.95);
  box-shadow:0 2px 10px rgba(233,30,99,.06);
}
ai q:last-child{
  border-left-color:rgba(255,215,0,.4);
  color:rgba(0,0,0,.6);
  font-style:italic;
}
ai q:last-child:hover{
  border-left-color:#FFD700;
  color:rgba(0,0,0,.9);
}
ai font[color="#1E90FF"]{font-weight:500}
ai font[color="#FF2A6D"]{font-weight:500;text-shadow:0 0 8px rgba(255,42,109,.08)}
ai font[color="#b2bec3"]{font-style:italic;opacity:.75}
@keyframes fadeDetails{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
ai details[open]>p,
ai details[open]>table,
ai details[open]>q{
  animation:fadeDetails .3s ease;
}
@media(max-width:600px){
  ai article{padding:14px 14px 10px}
  ai article p{font-size:14px;line-height:1.8}
  ai details>p{padding:2px 14px;font-size:12.5px}
  ai q{margin:4px 14px;padding:9px 12px;font-size:12.5px}
  ai table{width:calc(100% - 28px);margin:4px 14px 12px;font-size:12px}
  ai hd{padding:12px 14px 10px}
  ai summary{padding:11px 14px;font-size:12.5px}
}