ai {
  --bg: #FFF5F7;
  --surface: #FFFFFF;
  --border: #FFD4DD;
  --text: #2D1B1F;
  --muted: #6B4D52;
  --accent: #E8547B;
  --accent-dark: #C93D63;
  --pink: #FFB3C6;
  --hot: #FF6B9D;

  display: block;
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 14px;
  background: var(--bg);
  font: 300 15px/1.6 'Inter', -apple-system, sans-serif;
  color: var(--text);
  position: relative;
}

ai::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B9D 0%, #E8547B 50%, #FFB3C6 100%);
  border-radius: 0 0 8px 8px;
}

ai::after {
  content: '';
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 54c-8 0-14-4-18-8-4-5-6-10-6-14 0-6 2-10 6-13 3-3 7-4 10-4 2 0 4 1 6 2 1 1 2 2 2 2s1-1 2-2c2-1 4-2 6-2 3 0 7 1 10 4 4 3 6 7 6 13 0 4-2 9-6 14-4 4-10 8-18 8z' fill='%23E8547B'/%3E%3Ccircle cx='24' cy='18' r='1.5' fill='%23FFF5F7' opacity='0.8'/%3E%3Ccircle cx='30' cy='16' r='1' fill='%23FFF5F7' opacity='0.6'/%3E%3Ccircle cx='36' cy='20' r='1.2' fill='%23FFF5F7' opacity='0.7'/%3E%3Cpath d='M26 8c0-3 2-5 4-6 0 0 1 0 2 0 2 1 4 3 4 6 0 2-1 4-3 5-1 0-2 1-3 1s-2-1-3-1c-2-1-3-3-3-5z' fill='%2368B85A'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}

info {
  display: block;
  background: linear-gradient(135deg, #FFE8EF 0%, #FFF5F7 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  overflow: hidden;
}

info::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28c-4 0-7-2-9-4s-3-5-3-7c0-3 1-5 3-6 1-2 3-3 5-3 1 0 2 0 3 1l1 1 1-1c1-1 2-1 3-1 2 0 4 1 5 3 2 1 3 3 3 6 0 2-1 5-3 7s-5 4-9 4z' fill='%23FFB3C6' opacity='0.3'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.5;
}

article {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 14px;
  line-height: 1.75;
  box-shadow: 0 2px 8px rgba(232, 84, 123, 0.04);
  position: relative;
}

article::first-letter {
  font-size: 3.2em;
  font-weight: 600;
  line-height: 0.85;
  float: left;
  margin: 4px 8px 0 0;
  color: var(--accent);
  font-family: 'Playfair Display', Georgia, serif;
  text-shadow: 0 2px 4px rgba(232, 84, 123, 0.15);
}

article::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 12px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28c-4 0-7-2-9-4s-3-5-3-7c0-3 1-5 3-6 1-2 3-3 5-3 1 0 2 0 3 1l1 1 1-1c1-1 2-1 3-1 2 0 4 1 5 3 2 1 3 3 3 6 0 2-1 5-3 7s-5 4-9 4z' fill='%23FFD4DD'/%3E%3Ccircle cx='12' cy='10' r='0.8' fill='%23FFFFFF' opacity='0.9'/%3E%3Ccircle cx='15' cy='9' r='0.5' fill='%23FFFFFF' opacity='0.7'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.25;
}

details {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: all 0.25s ease;
}

details:hover {
  border-color: var(--pink);
  box-shadow: 0 3px 12px rgba(232, 84, 123, 0.08);
  transform: translateY(-1px);
}

details[open] {
  padding-bottom: 12px;
}

summary {
  display: block;
  padding: 11px 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, #FFF5F7 0%, #FFFFFF 100%);
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

details[open] summary {
  border-bottom-color: var(--border);
  margin-bottom: 10px;
}

summary:hover {
  background: linear-gradient(135deg, #FFE8EF 0%, #FFF5F7 100%);
  color: var(--accent);
}

summary::marker {
  content: '';
}

summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s ease;
  color: var(--accent);
}

details[open] summary::before {
  transform: rotate(90deg);
}

d {
  display: block;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  position: relative;
}

d::before {
  content: attr(s) '：';
  font-weight: 500;
  color: var(--accent);
  margin-right: 4px;
}

d[s=""]::before {
  content: '';
  margin: 0;
}

bar {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: #FFE8EF;
  border-radius: 999px;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;
  overflow: hidden;
}

bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc(var(--v) * 1%);
  background: linear-gradient(90deg, #FFB3C6 0%, #E8547B 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

bar[t="hot"]::before {
  background: linear-gradient(90deg, #FF6B9D 0%, #E8547B 100%);
}

bar::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: seed1 2s ease-in-out infinite;
}

@keyframes seed1 {
  0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.9; transform: translateY(-50%) scale(1.3); }
}

details.away d[s="外貌服饰"],
details.away d[s="胸部"],
details.away d[s="臀部"],
details.away d[s="私密部位"],
details.away d[s="内心想法"],
details.away d[s="好感度"],
details.away d[s="淫乱度"] {
  display: none;
}

details:last-of-type {
  background: linear-gradient(135deg, #FFF9FA 0%, #FFFFFF 100%);
  border-color: var(--accent);
}

details:last-of-type summary {
  background: linear-gradient(135deg, #FFE8EF 0%, #FFF5F7 100%);
  color: var(--accent);
  font-weight: 500;
}

details:last-of-type d {
  padding: 6px 14px;
  transition: all 0.2s ease;
}

details:last-of-type d:hover {
  background: #FFF5F7;
  color: var(--accent-dark);
  padding-left: 18px;
}

@media (max-width: 480px) {
  ai {
    padding: 12px 10px;
    font-size: 14px;
  }

  article {
    padding: 14px 12px;
  }

  article::first-letter {
    font-size: 2.8em;
    margin-right: 6px;
  }

  info {
    font-size: 12px;
    padding: 8px 12px;
  }

  bar {
    width: 60px;
    height: 5px;
  }
}