:root {
  --v2-ink: #25193f;
  --v2-purple: #7355a5;
  --v2-lilac: #b7a3d6;
  --v2-paper: #fffdf8;
  --v2-wash: #f1ebf7;
  --v2-gold: #b39058;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(158, 126, 193, .24), transparent 34%),
    radial-gradient(circle at 88% 17%, rgba(212, 193, 225, .52), transparent 31%),
    linear-gradient(180deg, #eee8f4 0%, #f8f4ef 52%, #eee7f4 100%);
  color: var(--v2-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.shell { max-width: 760px; padding: 14px 12px 70px; }
body:has(.result:not(.hidden)) .shell { max-width: 1060px; padding: 28px 30px 70px; }
.card, .q-header, .q-body, .top-card, .report-section {
  background: rgba(255, 253, 248, .92);
  border-color: rgba(92, 66, 124, .11);
  box-shadow: 0 18px 55px rgba(61, 38, 86, .1);
  backdrop-filter: blur(14px);
}

.card, .q-body, .top-card, .report-section { border-radius: 30px; }
.icon-box, .lock-mark { background: linear-gradient(145deg, #8f71bb, #5e417f); }
.hero-sub { color: #8065a7; }
.primary { background: linear-gradient(135deg, #8c6ec0, #5f4389); }

.intro { overflow: hidden; position: relative; }
.intro::after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: 98px;
  width: 220px;
  height: 270px;
  opacity: .12;
  background: radial-gradient(ellipse at center, #6d4d94 0 34%, transparent 35%);
  transform: rotate(-12deg);
}

.q-body { min-height: 610px; position: relative; overflow: hidden; }
.q-body::before {
  content: "情境问答";
  display: inline-flex;
  padding: 6px 12px;
  border: 1px solid #d9cce8;
  border-radius: 99px;
  color: #745a98;
  font-size: 11px;
  letter-spacing: .18em;
}
.q-text { font-family: "Songti SC", STSong, serif; font-size: 24px; }
.choice {
  background: rgba(255,255,255,.74);
  border-color: #e3d8ec;
  box-shadow: 0 7px 22px rgba(67, 45, 92, .05);
}
.choice small { display: none; }
.choice.selected { background: #eee6f6; border-color: #8a6ab0; }

.top-card {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  /* Stop immediately after the quote panel.  The reference bitmap also
     contains the beginning of its sample section 01; our real 01-06 report
     stays below this card unchanged, so that duplicate strip is cropped. */
  aspect-ratio: 969 / 1010;
  min-height: 0;
  padding: 0;
  text-align: left;
  background: #f8f6ff;
  border: 0;
  border-radius: 46px;
}
.top-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -4.65%;
  left: -6.05%;
  width: 112.1%;
  aspect-ratio: 1086 / 1419;
  background: url("./assets/poster/result-top-blank.png") center top / 100% 100% no-repeat;
  pointer-events: none;
}
.top-card::after { content: none; }
.top-sub { position: absolute; z-index: 3; top: 3.7%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 2.5cqw; text-align: center; font-size: 3.5cqw; color: #7651d1; letter-spacing: .08em; font-weight: 900; }
.top-sub::before, .top-sub::after { content: ""; width: 8.5cqw; height: 1px; background: #bda3ec; opacity: .9; }
.top-icon-emoji { display: none; }
.match-pct { position: absolute; z-index: 3; top: 23.7%; left: 10.8%; width: 45%; margin: 0; font-size: 20.2cqw; line-height: .82; }
.result-name { position: absolute; z-index: 3; top: 42.5%; left: 10.8%; width: 48%; margin: 0; font-size: 10.2cqw; line-height: 1; letter-spacing: .015em; }
.result-name.medium-name { font-size: 7.5cqw; white-space: nowrap; }
.result-name.long-name { font-size: 6.2cqw; white-space: nowrap; }
.person-title { position: absolute; z-index: 3; top: 56.2%; left: 10.8%; width: 42%; margin: 0; font-size: 2.45cqw; line-height: 1.18; color: #554d72; overflow-wrap: anywhere; }
.tags { position: absolute; z-index: 3; top: 63%; left: 9.5%; width: 46%; margin: 0; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 1cqw; }
.tag { min-width: 11.5cqw; padding: 1.1cqw 1.2cqw; white-space: nowrap; text-align: center; border: 0; border-radius: 99px; background: rgba(224, 214, 255, .72); color: #3f286c; font-size: 2.2cqw; }
.dominant-chip { position: absolute; z-index: 5; top: 70.6%; left: 9.5%; min-width: 43%; margin: 0; padding: 1.35cqw 2.2cqw; text-align: center; border-radius: 99px; background: rgba(224, 214, 255, .72); color: #321b5f; font-size: 2.8cqw; }
.match-reason { position: absolute; z-index: 4; top: 79.5%; left: 6%; right: 6%; bottom: 3.5%; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 0; background: transparent; }
.reason-title { display: flex; align-items: center; justify-content: center; gap: 2.5cqw; margin-bottom: .8cqw; color: #5b2ca4; font-size: 2.75cqw; line-height: 1.15; }
.reason-title::before, .reason-title::after { content: ""; width: 6cqw; height: 1px; background: #b9a8e7; }
.quote { margin: 0; max-width: 100%; font-family: "Songti SC", STSong, serif; font-size: 4.2cqw; line-height: 1.23; font-weight: 800; color: #2b164f; overflow-wrap: anywhere; }
.quote.medium-quote { font-size: 3.5cqw; }
.quote.long-quote { font-size: 2.9cqw; }

.portrait-stage {
  position: absolute;
  right: 0;
  top: 12%;
  width: 43%;
  height: 62%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.portrait-stage::after { content: none; }
.portrait-stage img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 10px 14px rgba(43, 28, 55, .1)); }

.atlas-card { margin: 18px 0; }
.atlas-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.atlas-title h2 { margin: 0; font-size: 20px; }
.atlas-title span { color: #88759e; font-size: 12px; }
.atlas-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.atlas-person { border: 1px solid #e4daeb; border-radius: 18px; padding: 12px 8px; background: rgba(255,255,255,.68); text-align: center; }
.atlas-avatar { width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center; color: white; font-family: "Songti SC", serif; font-size: 20px; background: linear-gradient(145deg, #9176b3, #594071); box-shadow: inset 0 0 0 4px rgba(255,255,255,.2); }
.atlas-person b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atlas-person small { color: #9184a1; font-size: 10px; }
.atlas-more { margin-top: 14px; }


@media (max-width: 520px) {
  body:has(.result:not(.hidden)) .shell { padding: 28px 14px 54px; }
  .atlas-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}