.reading {
  background:
    radial-gradient(circle at 100% 0, rgba(232, 214, 190, 0.45), transparent 28%),
    #f6f1e8;
  color: #3c2c24;
  padding: 0.7rem 0.85rem 2.4rem;
}
.reading .rd-top {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  margin-bottom: 0.8rem;
}
.reading .rd-top h2 {
  margin: 0;
  text-align: center;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.reading .rd-top p {
  margin: 0.1rem 0 0;
  text-align: center;
  color: #9a8476;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.rd-scope, .rd-card {
  position: relative;
  overflow: hidden;
  background: rgba(255, 252, 247, 0.94);
  border: 1px solid rgba(226, 210, 192, 0.9);
  border-radius: 1.15rem;
  box-shadow: 0 10px 24px rgba(92, 62, 40, 0.05);
  padding: 0.95rem 0.95rem 1rem;
  margin: 0 0 0.8rem;
}
.rd-scope {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0.75rem;
  min-height: 7.4rem;
}
.rd-avatar, .rd-avatar img {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: #eadccb;
}
.rd-scope b { display: block; font-size: 0.95rem; }
.rd-ok {
  display: inline-flex;
  gap: 0.28rem;
  align-items: center;
  margin: 0.28rem 0;
  color: #2f9d62;
  font-size: 0.82rem;
}
.rd-ok svg, .rd-card li svg { width: 0.95rem; height: 0.95rem; flex: none; }
.rd-scope p, .rd-card p { margin: 0.2rem 0; color: #6f5b50; font-size: 0.8rem; line-height: 1.55; }
.rd-scope time { color: #a08b7c; font-size: 0.72rem; }
.rd-card header, .rd-theme header {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.55rem;
}
.rd-card h3, .rd-theme h3 {
  margin: 0;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
}
.rd-card header span, .rd-theme header span {
  color: #b09a8a;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.rd-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 0 0 0.7rem; list-style: none; }
.rd-pills li {
  background: #f6eee4;
  color: #8a5a3c;
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.78rem;
}
.rd-hero blockquote, .rd-theme blockquote {
  margin: 0;
  color: #5c463c;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-size: 0.98rem;
  line-height: 1.7;
}
.rd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.2rem 0.45rem;
  align-items: center;
}
.rd-radar { width: 100%; height: auto; margin: 0; display: block; }
.rd-bars { list-style: none; margin: 0; padding: 0; }
.rd-bars li {
  display: grid;
  grid-template-columns: 3.5rem minmax(1.6rem, 1fr) 1.35rem 1.7rem;
  gap: 0.28rem;
  align-items: center;
  margin: 0.48rem 0;
  font-size: 0.72rem;
  color: #3c2c24;
}
.rd-bars i {
  display: block;
  height: 0.52rem;
  background: #f3e6d8;
  border-radius: 99px;
  overflow: hidden;
}
.rd-bars b {
  display: block;
  height: 100%;
  min-width: 0.35rem;
  background: #c4846a;
  border-radius: inherit;
}
.rd-bars em { font-style: normal; font-weight: 650; }
.rd-bars small { color: #c4846a; }
.rd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-bottom: 0.8rem; }
.rd-card.warm { background: #fffaf4; }
.rd-card.cool { background: #f4f8fc; }
.rd-card ul, .rd-sub ul { list-style: none; margin: 0; padding: 0; }
.rd-card li, .rd-sub li { display: flex; gap: 0.35rem; align-items: flex-start; margin: 0.38rem 0; color: #5e4b41; font-size: 0.8rem; }
.rd-card .rd-bars li {
  display: grid;
  grid-template-columns: 3.15rem minmax(2.6rem, 1fr) 1.2rem 1.6rem;
  gap: 0.22rem;
  align-items: center;
  margin: 0.42rem 0;
  font-size: 0.7rem;
  color: #3c2c24;
}
.rd-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
.rd-tips article { background: #fbf6ef; border-radius: 0.85rem; padding: 0.55rem; }
.rd-tips b {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #a56b45;
  color: white;
  font-size: 0.72rem;
}
.rd-tips strong, .rd-tips p { display: block; margin: 0.28rem 0 0; font-size: 0.72rem; line-height: 1.45; }
.rd-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.25rem;
  margin: 0.2rem 0 0.8rem;
  padding: 0.35rem;
  background: rgba(246, 241, 232, 0.94);
  border-radius: 0.9rem;
}
.rd-tabs button {
  border-radius: 0.7rem;
  padding: 0.45rem 0.1rem;
  color: #8d7568;
  font-size: 0.72rem;
}
.rd-tabs button[aria-current="true"] { background: #8d5a3c; color: #fffaf4; }
.rd-three { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
.rd-aside, .rd-sub {
  margin-top: 0.6rem;
  padding: 0.7rem;
  border-radius: 0.85rem;
  background: #fbf6ef;
}
.rd-aside b, .rd-sub h4, .rd-theme h4 { margin: 0 0 0.35rem; font-size: 0.86rem; }
.rd-path, .rd-life { list-style: none; margin: 0.8rem 0 0; padding: 0; }
.rd-path li, .rd-life li { margin: 0.55rem 0; padding-left: 0.2rem; }
.rd-path b, .rd-life b { color: #a56b45; margin-right: 0.35rem; }
.rd-mix-bar { display: flex; height: 0.72rem; border-radius: 99px; overflow: hidden; margin: 0.45rem 0; }
.rd-mix-bar i:nth-child(1) { background: #c4a574; }
.rd-mix-bar i:nth-child(2) { background: #d7c4a4; }
.rd-mix-bar i:nth-child(3) { background: #e4d3bc; }
.rd-mix-bar i:nth-child(4) { background: #efe4d4; }
.rd-mix ul { display: flex; flex-wrap: wrap; gap: 0.4rem 0.7rem; padding: 0; margin: 0; list-style: none; font-size: 0.72rem; color: #7b6558; }
.rd-flow { display: flex; justify-content: space-between; list-style: none; margin: 0.8rem 0 0; padding: 0; }
.rd-flow li {
  width: 22%;
  text-align: center;
  background: #f6eee4;
  color: #8a5a3c;
  border-radius: 999px;
  padding: 0.35rem 0;
  font-size: 0.78rem;
}
.rd-display { font-family: "Songti SC", "Noto Serif SC", serif; font-size: 1.35rem; margin: 0.2rem 0 0.4rem; }
.rd-why-grid { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.7rem; }
.rd-why figure { margin: 0; position: relative; }
.rd-why figure img, .rd-face-fallback { width: 100%; height: 9.2rem; object-fit: cover; border-radius: 0.8rem; background: #eadccb; }
.rd-why figcaption { display: flex; justify-content: space-between; color: #8a7366; font-size: 0.68rem; margin-top: 0.25rem; }
.rd-why ul { list-style: none; margin: 0; padding: 0; }
.rd-why li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.4rem; margin: 0.35rem 0; }
.rd-why li img, .rd-why li i { width: 2.4rem; height: 1.7rem; object-fit: cover; border-radius: 0.3rem; background: #eadccb; }
.rd-why li b { display: block; font-size: 0.75rem; }
.rd-why li span { color: #7d6a5e; font-size: 0.7rem; }
.rd-fine { margin-top: 0.8rem !important; color: #a08b7c !important; font-size: 0.72rem !important; }
.leaf {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.25rem;
  border-radius: 0 70% 0 70%;
  background: #c47a4a;
}
@media (max-width: 380px) {
  .rd-pair, .rd-tips { grid-template-columns: 1fr; }
  .rd-tabs { grid-template-columns: repeat(3, 1fr); }
}