/* Local homepage integration: approved dark full-body illustration and real question links. */
#xiaoyun {
  padding: 64px 0 48px !important;
  background: #061326 !important;
  color: #fff;
}
#xiaoyun::before, #xiaoyun::after { display: none !important; }
#xiaoyun .s77-xiaoyun-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto auto !important;
  gap: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 1180px;
}
#xiaoyun .s77-xiaoyun-grid > div:first-child, #xiaoyun .s77-ask { display: contents !important; }
#xiaoyun .s77-section-marker { grid-area: 1 / 1; margin: 0 0 24px; }
#xiaoyun .s77-eyebrow { margin: 0; color: #d6b372 !important; }
#xiaoyun .s77-section-marker::before { order: -1; }
#xiaoyun .s77-section-marker .s77-eyebrow { order: 0 !important; }
#xiaoyun .s77-section-marker::after { order: 1; }
#xiaoyun #xiaoyun-title {
  grid-area: 2 / 1;
  margin: 0 0 16px !important;
  color: #fff !important;
  font-size: clamp(28px, 3.3vw, 44px) !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
#xiaoyun .s77-lead { grid-area: 3 / 1; max-width: 980px !important; margin: 0 0 28px !important; color: #c6d5e6 !important; }
#xiaoyun .s77-xiaoyun-portrait {
  grid-area: 4 / 1 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 700px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: #061326 !important;
  box-shadow: none !important;
}
#xiaoyun .s77-xiaoyun-portrait::before, #xiaoyun .s77-xiaoyun-portrait::after { display: none !important; }
#xiaoyun .s77-xiaoyun-portrait .xiaoyun-scene {
  display: block !important; position: static !important; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover !important; object-position: center !important;
  transform: none !important; filter: none !important; mask-image: none !important; opacity: 1 !important;
}
#xiaoyun .s77-ask h3 { display: none !important; }
#xiaoyun .s77-ask ul {
  grid-area: 4 / 1 !important; position: relative !important; z-index: 3;
  display: block !important; inset: auto !important; width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important; pointer-events: none;
}
#xiaoyun .s77-ask li:nth-child(n) {
  position: absolute !important; width: 29% !important; max-width: none !important; min-height: 0 !important;
  height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important;
  border: 0 !important; background: none !important; box-shadow: none !important; pointer-events: auto;
}
#xiaoyun .s77-ask li[hidden] { display: none !important; }
#xiaoyun .s77-ask li::before { display: none !important; }
#xiaoyun .s77-ask li:nth-child(n) a {
  display: block !important; position: relative !important; width: auto !important;
  min-height: 0 !important; height: auto !important; padding: 12px 15px !important;
  color: #0c294d !important; background: #f7fbff !important; border: 1px solid #86bdff !important;
  border-radius: 22px !important; box-shadow: 0 0 12px #1670d42b !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important;
  text-align: center !important; text-decoration: none !important; white-space: normal !important;
  overflow: visible !important; transition: background .15s, box-shadow .15s;
}
#xiaoyun .s77-ask li a::before { display: none !important; }
#xiaoyun .s77-ask .s77-phrase { white-space: normal !important; }
#xiaoyun .s77-ask li:nth-child(n) a::after {
  content: '' !important; display: block !important; position: absolute !important;
  width: 13px !important; height: 13px !important; top: auto !important; bottom: -7px !important;
  left: auto !important; right: 13px !important; transform: skewY(35deg) !important;
  border: 0 !important; border-right: 1px solid #86bdff !important; border-bottom: 1px solid #86bdff !important;
  background: #f7fbff !important; clip-path: polygon(0 0,100% 0,100% 100%) !important;
}
#xiaoyun .s77-ask li:nth-child(even) a::after { left: 13px !important; right: auto !important; transform: scaleX(-1) skewY(35deg) !important; }
#xiaoyun .s77-ask li:nth-child(n+7) a::after { top: -7px !important; bottom: auto !important; transform: scaleY(-1) skewY(35deg) !important; }
#xiaoyun .s77-ask li:nth-child(n+7):nth-child(even) a::after { transform: scale(-1) skewY(35deg) !important; }
#xiaoyun .s77-ask li:nth-child(3) { inset: 7% auto auto 2% !important; }
#xiaoyun .s77-ask li:nth-child(4) { inset: 7% 2% auto auto !important; }
#xiaoyun .s77-ask li:nth-child(5) { inset: 32% auto auto 2% !important; }
#xiaoyun .s77-ask li:nth-child(6) { inset: 32% 2% auto auto !important; }
#xiaoyun .s77-ask li:nth-child(7) { inset: 57% auto auto 2% !important; }
#xiaoyun .s77-ask li:nth-child(8) { inset: 57% 2% auto auto !important; }
#xiaoyun .s77-ask li:nth-child(9) { inset: 82% auto auto 2% !important; }
#xiaoyun .s77-ask li:nth-child(10) { inset: 82% 2% auto auto !important; }
#xiaoyun .s77-ask .s77-button {
  grid-area: 5 / 1 !important; justify-self: center; position: relative !important; inset: auto !important;
  transform: none !important; margin: 24px auto 0 !important; width: auto !important; min-width: 220px;
  min-height: 48px !important; color: #fff !important; background: #0965e9 !important;
}
#xiaoyun .s77-ask li a:hover { box-shadow: 0 0 20px #55b9ff80 !important; }
#xiaoyun .s77-ask a:focus-visible { outline: 3px solid #efc56f !important; outline-offset: 4px; }
#xiaoyun .s77-ask a:active { filter: brightness(.9); }
@media (min-width: 800px) {
  #xiaoyun .s77-ask li:nth-child(n) { width: 26% !important; }
  #xiaoyun .s77-ask li:nth-child(odd) { left: 4% !important; }
  #xiaoyun .s77-ask li:nth-child(even) { right: 4% !important; }
  #xiaoyun .s77-ask li:nth-child(n) a { font-size: 16px !important; text-wrap: balance; }
  #xiaoyun .s77-ask .s77-phrase { white-space: nowrap !important; }
}
@media (max-width: 799px) {
  #xiaoyun { padding: 40px 0 32px !important; }
  #xiaoyun .s77-xiaoyun-grid { width: calc(100% - 32px) !important; }
  #xiaoyun .s77-lead { font-size: 13px !important; line-height: 1.85 !important; margin-bottom: 20px !important; }
  #xiaoyun .s77-section-marker { margin-bottom: 20px; }
  #xiaoyun .s77-xiaoyun-portrait { height: auto !important; aspect-ratio: 5 / 6; }
  #xiaoyun .s77-ask li:nth-child(n) { width: 35.5% !important; }
  #xiaoyun .s77-ask li:nth-child(odd) { left: 0 !important; }
  #xiaoyun .s77-ask li:nth-child(even) { right: 0 !important; }
  #xiaoyun .s77-ask li:nth-child(n) a { padding: 7px 4px !important; font-size: clamp(8.5px,2.25vw,12px) !important; line-height: 1.4 !important; border-radius: 15px !important; }
  #xiaoyun .s77-ask .s77-button { min-width: 190px; font-size: 14px !important; }
}
/* Longer translations and text zoom use natural flow instead of overlapping the illustration. */
html:not([lang="zh-CN"]) #xiaoyun .s77-ask ul { grid-area: auto / 1 !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; height: auto !important; }
html:not([lang="zh-CN"]) #xiaoyun .s77-ask li:nth-child(n) { position: static !important; width: auto !important; }
html:not([lang="zh-CN"]) #xiaoyun .s77-ask .s77-button { grid-area: auto / 1 !important; }
@media (max-width: 340px) {
  #xiaoyun #xiaoyun-title { font-size: 25px !important; }
  #xiaoyun .s77-ask li:nth-child(n) a { font-size: 9px !important; }
}
@media (max-width: 300px) {
  #xiaoyun .s77-ask ul { grid-area: auto / 1 !important; display: grid !important; grid-template-columns: minmax(0,1fr); gap: 16px; height: auto !important; margin-top: 20px !important; }
  #xiaoyun .s77-ask li:nth-child(n) { position: static !important; width: auto !important; }
  #xiaoyun .s77-ask li:nth-child(n) a { font-size: 12px !important; }
  #xiaoyun .s77-ask .s77-button { grid-area: auto / 1 !important; min-width: 0; }
}