.bl-topic-guide {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(48px, 6vw, 88px) max(24px, 6vw);
  background: #081d2a;
  color: #e8eef1;
  font: 16px/1.75 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  text-align: left;
}
.bl-topic-guide *, .bl-topic-guide *::before { box-sizing: border-box; }
.bl-topic-guide-inner { max-width: 1200px; margin: auto; }
.bl-topic-guide h2 { margin: 0 0 16px; color: #e7bc7d; font-size: clamp(26px, 3vw, 36px); line-height: 1.4; }
.bl-topic-guide .bl-topic-guide-intro { max-width: 900px; margin: 0 0 24px; }
.bl-topic-guide details { border-top: 1px solid #ffffff26; padding: 15px 0; }
.bl-topic-guide details:last-of-type { border-bottom: 1px solid #ffffff26; }
.bl-topic-guide summary { display: flex; align-items: flex-start; gap: 9px; color: #f1f4f5; font-size: 18px; font-weight: 600; cursor: pointer; list-style: none; }
.bl-topic-guide summary::-webkit-details-marker { display: none; }
.bl-topic-guide summary::before { content: "▸"; flex: none; }
.bl-topic-guide details[open] summary::before { content: "▾"; }
.bl-topic-guide details p { max-width: 960px; margin: 12px 0 0 20px; color: #c7d4dc; }
.bl-topic-guide nav { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 26px; }
.bl-topic-guide a { color: #e7bc7d; text-decoration: underline; text-underline-offset: 5px; }
.bl-topic-guide summary:focus-visible, .bl-topic-guide a:focus-visible { outline: 2px solid #e7bc7d; outline-offset: 4px; }
@media (max-width: 700px) {
  .bl-topic-guide { padding: 38px 20px; }
  .bl-topic-guide summary { font-size: 17px; }
}