.birth { position: relative; pointer-events: none; width: 100%; height: 100%;
}
.aura { position: absolute; left: 50%; top: 4%; width: 150%; height: 96%; border-radius: 50%; background: radial-gradient(closest-side, var(--g), rgba(0, 0, 0, 0)); filter: blur(16px); transition: opacity 0.8s, transform 0.8s;
}
.floor { position: absolute; left: 50%; top: 93%; width: 0; height: 0;
}
.fl { position: absolute; border-radius: 50%; border: 1px solid var(--g); transform: translate(-50%, -50%);
}
.f1 { width: 105px; height: 22px; box-shadow: 0 0 12px var(--g), inset 0 0 9px var(--g); opacity: 0.85;
}
.f2 { width: 150px; height: 32px; opacity: 0.35; animation: ring-29ddc744 3.2s ease-out infinite;
}
.f3 { width: 150px; height: 32px; opacity: 0.35; animation: ring-29ddc744 3.2s ease-out 1.6s infinite;
}
@keyframes ring-29ddc744 {
from { transform: translate(-50%, -50%) scale(0.6); opacity: 0.6;
}
to { transform: translate(-50%, -50%) scale(1.5); opacity: 0;
}
}
.soft { position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: blur(5px) drop-shadow(0 0 14px var(--g)); animation: breathe-29ddc744 4s ease-in-out infinite; transition: opacity 0.8s;
}
@keyframes breathe-29ddc744 {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.025);
}
}
.formed { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: clip-path 0.7s cubic-bezier(0.3, 0.8, 0.3, 1), -webkit-clip-path 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); -webkit-transition: -webkit-clip-path 0.7s cubic-bezier(0.3, 0.8, 0.3, 1), clip-path 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); will-change: clip-path;
}
.core, .flow, .scan-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.core { background: radial-gradient(ellipse 60% 45% at 50% 32%, rgba(255, 255, 255, 0.98), var(--g) 75%), var(--g); opacity: 0.86; filter: drop-shadow(0 0 10px var(--g)) blur(0.6px);
}
/* 身体上斜着扫过去的一道流光 */
.flow { background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 62%); background-size: 260% 100%; background-repeat: no-repeat; animation: flow-29ddc744 2.8s ease-in-out infinite; mix-blend-mode: screen;
}
@keyframes flow-29ddc744 {
from { background-position: 130% 0;
}
to { background-position: -30% 0;
}
}
.scan { position: absolute; left: 5%; right: 5%; height: 14px; margin-top: -7px; border-radius: 50%; background: radial-gradient(ellipse 60% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 40%, rgba(201, 182, 255, 0.3) 70%, rgba(255, 255, 255, 0) 100%); box-shadow: 0 0 20px 4px #FFFFFF, 0 0 36px 8px var(--g); transition: top 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); -webkit-transition: top 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); will-change: top; pointer-events: none;
}
.plane { position: absolute; left: -40%; right: -40%; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(201, 182, 255, 0.5) 25%, #FFFFFF 50%, rgba(201, 182, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%); opacity: 0.95; box-shadow: 0 0 10px #FFFFFF, 0 0 24px var(--g); transition: top 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); -webkit-transition: top 0.7s cubic-bezier(0.3, 0.8, 0.3, 1); will-change: top; pointer-events: none;
}
.motes { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible;
}
.mote { position: absolute; bottom: 6%; width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px 2px var(--g); opacity: 0; animation: rise-29ddc744 4.2s ease-in infinite;
}
@keyframes rise-29ddc744 {
0% { opacity: 0; transform: translateY(0) scale(0.6);
}
15% { opacity: 1;
}
100% { opacity: 0; transform: translateY(-230px) scale(1.1);
}
}
.m1 { left: 18%; animation-delay: 0s;
}
.m2 { left: 30%; animation-delay: 0.6s;
}
.m3 { left: 44%; animation-delay: 1.3s;
}
.m4 { left: 56%; animation-delay: 2.1s;
}
.m5 { left: 70%; animation-delay: 0.3s;
}
.m6 { left: 82%; animation-delay: 1.8s;
}
.m7 { left: 24%; animation-delay: 2.7s;
}
.m8 { left: 64%; animation-delay: 3.3s;
}
.m9 { left: 38%; animation-delay: 3.8s;
}
.m10 { left: 50%; animation-delay: 0.9s;
}
.m11 { left: 76%; animation-delay: 2.4s;
}
.m12 { left: 12%; animation-delay: 1.5s;
}
.m13 { left: 88%; animation-delay: 3s;
}
.m14 { left: 47%; animation-delay: 3.6s;
}
.feed {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px 4px #FFFFFF, 0 0 20px 6px var(--g, #B49CFF);
  animation: feed-29ddc744 0.85s cubic-bezier(0.35, 0, 0.25, 1) both;
  -webkit-animation: feed-29ddc744 0.85s cubic-bezier(0.35, 0, 0.25, 1) both;
  pointer-events: none;
  z-index: 99999;
  will-change: transform, opacity;
}
@keyframes feed-29ddc744 {
0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 0) scale(1.2); -webkit-transform: translate3d(var(--sx), var(--sy), 0) scale(1.2);
}
15% { opacity: 1;
}
85% { opacity: 1;
}
100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.3); -webkit-transform: translate3d(0, 0, 0) scale(0.3);
}
}
@-webkit-keyframes feed-29ddc744 {
0% { opacity: 0; -webkit-transform: translate3d(var(--sx), var(--sy), 0) scale(1.2);
}
15% { opacity: 1;
}
85% { opacity: 1;
}
100% { opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0.3);
}
}
.pulse { position: absolute; left: 50%; top: 50%; width: 120%; padding-top: 120%; border-radius: 50%; border: 1.5px solid var(--g); box-shadow: 0 0 15px var(--g), inset 0 0 15px var(--g); transform: translate(-50%, -50%); animation: pulse-29ddc744 1.2s ease-out both;
}
@keyframes pulse-29ddc744 {
from { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4);
}
to { opacity: 0; transform: translate(-50%, -50%) scale(1.6);
}
}
/* 交卷：整个人形亮透、一圈强光炸开 */
.s-born .core { opacity: 1; filter: drop-shadow(0 0 22px #FFFFFF) drop-shadow(0 0 40px var(--g));
}
.s-born .soft { opacity: 0.9 !important; filter: blur(2px) drop-shadow(0 0 30px #FFFFFF);
}
/* 等待揭晓：完整通体白紫发光人形立绘，轮廓清晰分明，胸前大号纯白问号（1:1 对齐原站付款等待页） */
.s-veiled .core {
  opacity: 0.92 !important;
  background: radial-gradient(ellipse 65% 50% at 50% 32%, #FFFFFF 0%, #EDE4FF 60%, var(--g) 100%), #FFFFFF !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.98)) drop-shadow(0 0 32px var(--g)) !important;
  -webkit-filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.98)) drop-shadow(0 0 32px var(--g)) !important;
}
.s-veiled .soft {
  opacity: 0.88 !important;
  filter: blur(1.5px) drop-shadow(0 0 22px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 45px var(--g)) !important;
  -webkit-filter: blur(1.5px) drop-shadow(0 0 22px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 45px var(--g)) !important;
}
.s-veiled .flow {
  opacity: 0.75 !important;
}
.s-veiled .floor {
  opacity: 1 !important;
}
.s-veiled .f1 {
  width: 120px !important;
  height: 26px !important;
  box-shadow: 0 0 18px var(--g), 0 0 35px #FFFFFF, inset 0 0 14px #FFFFFF !important;
}
.s-veiled .f2, .s-veiled .f3 {
  width: 170px !important;
  height: 38px !important;
}
.burst { position: absolute; left: 50%; top: 48%; width: 0; height: 0;
}
.bu { position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), var(--g) 45%, rgba(0, 0, 0, 0)); animation: burst-29ddc744 1.4s ease-out both;
}
.b2 { animation-delay: 0.18s;
}
.b3 { animation-delay: 0.36s;
}
@keyframes burst-29ddc744 {
from { opacity: 1; transform: scale(0.1);
}
to { opacity: 0; transform: scale(2.6);
}
}
.veil-q {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  text-align: center;
  font-size: 88px;
  line-height: 1;
  font-weight: 900;
  color: #FFFFFF !important;
  text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 45px var(--g), 0 0 70px rgba(201, 182, 255, 0.95) !important;
  animation: q-float-29ddc744 3s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
@keyframes q-float-29ddc744 {
0%, 100% { transform: translateY(0);
}
50% { transform: translateY(-8px);
}
}
/* 光影下面那句话：宽度固定、居中（087 矮屏上人形会缩小，宽度跟着人形走会折成三四行压到题目卡上） */
.cap { position: absolute; left: 50%; width: 320px; margin-left: -160px; top: 100%; margin-top: 9px; text-align: center; font-size: 14px; line-height: 1.5; letter-spacing: 1px; color: rgba(255, 255, 255, 0.88); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8), 0 0 9px var(--g); animation: capIn-29ddc744 0.5s ease-out both;
}
@keyframes capIn-29ddc744 {
from { opacity: 0; transform: translateY(4px);
}
to { opacity: 1; transform: none;
}
}

.ds { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #070612;
}
/* 和 App 舞台同一个 704×1280 画框，铺满屏幕（宽屏上按内容栏 520 宽算，不放大到整屏） */
.ds-frame { position: absolute; left: 50%; bottom: 0; height: max(100vh, calc(min(100vw, 520px) * 1.818)); width: max(55vh, min(100vw, 520px)); transform: translateX(-50%);
}
.ds-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease-in-out;
}
.ds-bg.on { opacity: 1;
}
.ds-light { position: absolute; left: 22%; width: 56%; top: 8%; height: 48%; border-radius: 50% 50% 8% 8%; background: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.95) 0%, rgba(232, 222, 255, 0.55) 30%, rgba(180, 156, 255, 0.18) 60%, rgba(180, 156, 255, 0) 75%); filter: blur(10px); transition: opacity 0.6s ease-out;
}
.ds-light.flare { animation: flare-2fc104f6 1.6s ease-out forwards;
}
@keyframes flare-2fc104f6 {
0% { transform: scale(1);
}
60% { transform: scale(1.5);
}
100% { transform: scale(2.4); opacity: 1;
}
}
.ds-glow { position: absolute; left: 26%; width: 48%; top: 12%; height: 40%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.85) 0%, rgba(232, 222, 255, 0.4) 35%, rgba(232, 222, 255, 0) 70%); filter: blur(12px); animation: glow-2fc104f6 2.6s ease-in-out infinite;
}
@keyframes glow-2fc104f6 {
0%, 100% { transform: scale(0.9); opacity: 0.55;
}
50% { transform: scale(1.08); opacity: 0.95;
}
}
/* 剪影：立绘压成纯黑，外圈按门的颜色发光；缩小后站在门里 */
.ds-sil, .ds-sil-pre { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 93%; transform: translateY(-38%) scale(0.46);
}
.ds-sil { filter: brightness(0) drop-shadow(0 0 3px var(--g)) drop-shadow(0 0 16px var(--g)); animation: sil-2fc104f6 3s ease-in-out both;
}
.ds-sil-pre { opacity: 0;
}
@keyframes sil-2fc104f6 {
0% { opacity: 0; transform: translateY(-37%) scale(0.45);
}
18% { opacity: 1; transform: translateY(-38%) scale(0.46);
}
82% { opacity: 1;
}
100% { opacity: 0; transform: translateY(-38.5%) scale(0.465);
}
}
.ds-shade { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transition: background 0.6s;
}
.ds-shade.sh-land, .ds-shade.sh-gender { background: linear-gradient(180deg, rgba(7, 6, 18, 0.45) 0%, rgba(7, 6, 18, 0) 14%, rgba(7, 6, 18, 0) 40%, rgba(7, 6, 18, 0.82) 58%, rgba(7, 6, 18, 0.95) 100%);
}
.ds-shade.sh-quiz { background: linear-gradient(180deg, rgba(7, 6, 18, 0.5) 0%, rgba(7, 6, 18, 0.1) 18%, rgba(7, 6, 18, 0.35) 40%, rgba(7, 6, 18, 0.85) 62%, rgba(7, 6, 18, 0.95) 100%);
}
.ds-shade.sh-load { background: linear-gradient(180deg, rgba(7, 6, 18, 0) 50%, rgba(7, 6, 18, 0.7) 100%);
}
.ds-shade.sh-pay { background: linear-gradient(180deg, rgba(7, 6, 18, 0.5) 0%, rgba(7, 6, 18, 0) 14%, rgba(7, 6, 18, 0) 42%, rgba(7, 6, 18, 0.85) 58%, rgba(7, 6, 18, 0.96) 100%);
}
/* 屏幕中央「门后的你正在诞生」：答题时在题目卡上方，交卷时挪到中间放大、炸开一圈光，等待揭晓时回到门里蒙着光（宽高比 352:640） */
.ds-birth { position: absolute; left: 50%; z-index: 1; transition: top 0.8s ease, height 0.8s ease, width 0.8s ease, margin-left 0.8s ease;
}
/* 答题时人形的高度跟着题目卡留出的空间走（--sf-fig-h 在 index.vue 的 .sf-page 上算：087 题目与选项字调大、卡片变高，矮屏上人形相应缩小，保证四个选项都在屏幕里） */
.ds-birth.b-quiz { top: 59px; height: var(--sf-fig-h, 34vh); width: calc(var(--sf-fig-h, 34vh) * 0.55); margin-left: calc(var(--sf-fig-h, 34vh) * -0.275);
}
.ds-birth.b-load { top: 15vh; height: 44vh; width: 24.2vh; margin-left: -12.1vh;
}
.ds-birth.b-pay { top: 11vh; height: 42vh; width: 23.1vh; margin-left: -11.55vh;
}

.sf-home { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 46vh 20px calc(22px + env(safe-area-inset-bottom)); text-align: center; color: #FFFFFF;
}
.sf-home__kick { font-size: 12px; letter-spacing: 3px; opacity: 0.75;
}
.sf-home__title { margin-top: 6px; font-size: 30px; font-weight: 800; letter-spacing: 2px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}
.sf-home__sub { margin-top: 6px; font-size: 15px; line-height: 1.5; opacity: 0.88;
}
.sf-home__facts { display: flex; gap: 10px; margin: 16px 0 12px;
}
.sf-fact { display: flex; flex-direction: column; align-items: center; width: 98px; padding: 9px 0; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
}
.sf-fact__n { font-size: 25px; font-weight: 800; background: linear-gradient(135deg, #C9B6FF, #FFB8D9); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sf-fact__l { font-size: 13px; opacity: 0.8;
}
.sf-home__gains { box-sizing: border-box; width: 100%; max-width: 400px; padding: 10px 15px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); text-align: left;
}
.sf-gain { font-size: 15px; line-height: 1.8; opacity: 0.92;
}
.sf-gain + .sf-gain { margin-top: 4px;
}
.sf-home__start { box-sizing: border-box; width: 100%; max-width: 400px; margin-top: 16px; height: 52px; line-height: 52px; border-radius: 999px; background: linear-gradient(135deg, #C9B6FF, #FFB8D9); color: #2A1E52; font-size: 18px; font-weight: 800; box-shadow: 0 5px 20px rgba(255, 184, 217, 0.35); cursor: pointer;
}
.sf-home__start.busy { opacity: 0.6;
}
.sf-home__restart { margin-top: 10px; font-size: 14px; opacity: 0.7; text-decoration: underline; cursor: pointer;
}
.sf-home__note { margin-top: 8px; padding: 0 6px; font-size: 12.5px; line-height: 1.6; opacity: 0.55;
}
/* 公共隐私行默认是淡紫色，这里换成深色玻璃底（只作用于本页） */
.sf-home .optional-privacy { margin-top: 10px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72);
}
.sf-home .optional-privacy__link { color: #C9B6FF;
}

.sf-gd { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 30vh 20px calc(26px + env(safe-area-inset-bottom)); text-align: center; color: #FFFFFF;
}
.sf-gd__kick { font-size: 13px; letter-spacing: 3px; opacity: 0.75;
}
.sf-gd__title { margin-top: 6px; font-size: 25px; font-weight: 800; letter-spacing: 1px; line-height: 1.35; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}
.sf-gd__sub { margin-top: 6px; font-size: 15px; line-height: 1.5; opacity: 0.85;
}
.sf-gd__cards { display: flex; gap: 14px; width: 100%; max-width: 400px; margin-top: 18px;
}
.sf-gd__card { --gc: #FFB8D9; flex: 1; min-width: 0; padding: 12px 0 13px; border-radius: 20px; background: rgba(20, 16, 44, 0.72); border: 1.5px solid rgba(255, 255, 255, 0.16); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.sf-gd__card.g-m { --gc: #A9CCFF;
}
.sf-gd__card.on { border-color: var(--gc); box-shadow: 0 0 22px var(--gc), 0 10px 28px rgba(0, 0, 0, 0.35); transform: scale(1.03);
}
.sf-gd__card.off { opacity: 0.45;
}
/* 光影人形：352 × 640 的画框（宽 = 高 × 0.55） */
.sf-gd__fig { position: relative; width: 94px; height: 171px; margin: 0 auto;
}
.sf-gd__halo { position: absolute; left: 50%; top: 8%; width: 150%; height: 88%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, var(--gc), rgba(0, 0, 0, 0)); opacity: 0.42; filter: blur(10px);
}
.sf-gd__soft { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.5; filter: blur(3px) drop-shadow(0 0 10px var(--gc));
}
.sf-gd__core { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: radial-gradient(ellipse 60% 45% at 50% 32%, rgba(255, 255, 255, 0.98), var(--gc) 78%), var(--gc); opacity: 0.9; filter: drop-shadow(0 0 8px var(--gc)); animation: gdBreath-74d5f63d 4s ease-in-out infinite;
}
@keyframes gdBreath-74d5f63d {
0%, 100% { opacity: 0.82;
}
50% { opacity: 1;
}
}
.sf-gd__name { margin-top: 9px; font-size: 20px; font-weight: 800; letter-spacing: 4px;
}
.sf-gd__note { margin-top: 14px; font-size: 13.5px; opacity: 0.65;
}
.sf-gd .optional-privacy { margin-top: 12px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72);
}
.sf-gd .optional-privacy__link { color: #C9B6FF;
}
@media (prefers-reduced-motion: reduce) {
.sf-gd__core { animation: none;
}
}

.sf-quiz { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; padding: 8px 18px calc(28px + env(safe-area-inset-bottom)); color: #FFFFFF !important;
}
.sf-quiz__top { flex: none; display: flex; align-items: center; height: 48px; padding-right: 4px;
}
.sf-quiz__back { width: 36px; height: 36px; line-height: 33px; text-align: center; font-size: 28px; color: #FFFFFF !important; text-decoration: none; cursor: pointer;
}
.sf-quiz__back.off { opacity: 0; pointer-events: none;
}
.sf-quiz__bar { flex: 1; height: 6px; margin: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden;
}
.sf-quiz__bar-in { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C9B6FF, #FFB8D9); box-shadow: 0 0 6px rgba(255, 184, 217, 0.8); transition: width 0.3s;
}
.sf-quiz__count { width: 52px; text-align: right; font-size: 14px; color: rgba(255, 255, 255, 0.78) !important;
}
/* 给中央的光影与它下面的一句话留位置（光影在固定背景层里：顶部 59px 起，高 --sf-fig-h，矮屏上随题目卡缩小） */
.sf-quiz__space { flex: 1 0 auto; min-height: calc(var(--sf-fig-h, 34vh) + 46px);
}
.sf-quiz__card { flex: none; padding: 18px 15px 8px; border-radius: 20px; background: rgba(20, 16, 44, 0.74); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); color: #FFFFFF !important; animation: q-in-775ff98a 0.28s ease-out;
}
@keyframes q-in-775ff98a {
from { opacity: 0.4; transform: translateY(8px);
}
to { opacity: 1; transform: none;
}
}
.sf-quiz__no { font-size: 13.5px; font-weight: 800; color: #C9B6FF !important; letter-spacing: 1px;
}
.sf-quiz__q { display: flex; align-items: center; margin: 6px 0 13px; font-size: 19px; font-weight: 700; line-height: 1.45; min-height: 56px; color: #FFFFFF !important;
}
.sf-opt { display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 64px; margin-bottom: 9px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); color: #FFFFFF !important; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none;
}
.sf-opt.on { background: rgba(201, 182, 255, 0.24); border-color: #C9B6FF; box-shadow: 0 0 12px rgba(201, 182, 255, 0.45);
}
.sf-opt__dot { flex: none; width: 26px; height: 26px; margin-right: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #E9E1FF !important; font-size: 13.5px; font-weight: 800; text-align: center; line-height: 26px;
}
.sf-opt.on .sf-opt__dot { background: linear-gradient(135deg, #C9B6FF, #FFB8D9); color: #2A1E52 !important;
}
.sf-opt__l { flex: 1; min-width: 0; font-size: 16px; line-height: 1.45; color: #FFFFFF !important; opacity: 0.96;
}
.sf-opt.on .sf-opt__l { color: #FFFFFF !important; font-weight: 600;
}
.sf-quiz__tip { margin-top: 10px; text-align: center; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.6) !important;
}
.sf-quiz .optional-privacy { margin-top: 10px; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.72);
}
.sf-quiz .optional-privacy__link { color: #C9B6FF;
}

.sf-pc.sf-pc { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20050; display: flex; align-items: center; justify-content: center; padding: 0 24px; background: rgba(7, 6, 18, 0.88); backdrop-filter: blur(8px);
}
.sf-pc__box { box-sizing: border-box; width: 100%; max-width: 360px; padding: 28px 22px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(201, 182, 255, 0.2), rgba(255, 184, 217, 0.1) 60%, rgba(255, 255, 255, 0.05)), #120E28; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); text-align: center; color: #FFFFFF;
}
.sf-pc__spin { position: relative; width: 56px; height: 56px; margin: 0 auto 16px;
}
.sf-pc__ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.14); border-top-color: #C9B6FF; border-right-color: #FFB8D9; animation: pcSpin-3f23bf40 0.9s linear infinite;
}
.sf-pc__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 12px #C9B6FF; animation: pcPulse-3f23bf40 1.4s ease-in-out infinite;
}
@keyframes pcSpin-3f23bf40 {
to { transform: rotate(360deg);
}
}
@keyframes pcPulse-3f23bf40 {
0%, 100% { transform: scale(0.7); opacity: 0.6;
}
50% { transform: scale(1.1); opacity: 1;
}
}
.sf-pc__mark { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: rgba(255, 211, 110, 0.16); border: 2px solid #FFD36E; color: #FFD36E; font-size: 30px; font-weight: 900; line-height: 48px;
}
.sf-pc__t { font-size: 22px; font-weight: 800; letter-spacing: 1px;
}
.sf-pc__s { margin-top: 9px; font-size: 15px; line-height: 1.7; color: rgba(235, 228, 255, 0.85);
}
.sf-pc__btn { margin-top: 20px; height: 50px; line-height: 50px; border-radius: 999px; background: linear-gradient(135deg, #C9B6FF, #FFB8D9); color: #2A1E52; font-size: 17px; font-weight: 800; letter-spacing: 1px; cursor: pointer;
}
.sf-pc__link { margin-top: 14px; font-size: 15px; font-weight: 700; color: #FFD9EC; text-decoration: underline; cursor: pointer;
}
.sf-pc__ghost { margin-top: 12px; height: 44px; line-height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.88); font-size: 15.5px; font-weight: 700; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.sf-pc__ring, .sf-pc__dot { animation: none;
}
}

.sf-seal { box-sizing: border-box; min-height: 100vh; padding-top: 62vh; text-align: center; color: #FFFFFF; animation: seal-in-1e2ab1bd 0.6s ease-out both;
}
@keyframes seal-in-1e2ab1bd {
from { opacity: 0; transform: translateY(10px);
}
to { opacity: 1; transform: none;
}
}
.sf-seal__t { font-size: 23px; font-weight: 800; letter-spacing: 2px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}
.sf-seal__s { margin-top: 7px; font-size: 15px; opacity: 0.85;
}

.sf-wait { color: #FFFFFF;
}
.sf-wait__hero { position: relative; box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 46vh 20px calc(16px + env(safe-area-inset-bottom));
}
.sf-wait__nav { position: absolute; left: 18px; top: 14px;
}
.sf-wait__k { display: inline-block; padding: 5px 13px; border-radius: 999px; background: rgba(10, 8, 24, 0.35); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; letter-spacing: 2px;
}
.sf-wait__tip { align-self: center; margin-bottom: 12px; font-size: 23px; font-weight: 800; letter-spacing: 2px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}
.sf-wait__list { padding: 12px 15px; border-radius: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
}
.sf-wait__lt { margin-bottom: 3px; font-size: 16px; font-weight: 800;
}
.sf-wait__li { font-size: 14.5px; line-height: 1.75; opacity: 0.9;
}
.sf-wait__li + .sf-wait__li { margin-top: 3px;
}
.sf-wait__btn { box-sizing: border-box; width: 100%; margin-top: 13px; height: 52px; line-height: 52px; border-radius: 999px; text-align: center; background: linear-gradient(135deg, #C9B6FF, #FFB8D9); color: #2A1E52; font-size: 18px; font-weight: 800; letter-spacing: 1px; box-shadow: 0 5px 20px rgba(255, 184, 217, 0.35); cursor: pointer; animation: sf-beat-78686326 1.8s ease-in-out infinite;
}
.sf-wait__btn.busy { opacity: 0.6; animation: none;
}
@keyframes sf-beat-78686326 {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.03);
}
}
.sf-wait__recheck { margin-top: 11px; text-align: center; font-size: 14.5px; font-weight: 700; color: #FFE1F0; text-decoration: underline; cursor: pointer;
}
.sf-wait__foot { margin-top: 10px; text-align: center; font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, 0.55);
}
.sf-wait__more { margin-top: 8px; text-align: center; font-size: 13.5px; color: rgba(255, 225, 240, 0.85);
}
/* 往下滑的目录：实心深色底，盖住后面的门 */
.sf-wait__panel { position: relative; padding: 22px 18px calc(30px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #0D0A1F; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
}
.sf-cat { padding: 14px 14px 6px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}
.sf-cat__h { padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 18px; font-weight: 800; letter-spacing: 1px;
}
.sf-cat__row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sf-cat__row:last-child { border-bottom: none;
}
.sf-cat__no { flex: none; width: 22px; text-align: center; font-size: 15px; font-weight: 800; color: #C9B6FF;
}
.sf-cat__main { flex: 1; min-width: 0;
}
.sf-cat__t { font-size: 16px; font-weight: 800;
}
.sf-cat__d { margin-top: 3px; font-size: 14px; line-height: 1.6; color: rgba(235, 228, 255, 0.7);
}
.sf-cat__tier { flex: none; padding: 3px 9px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 12.5px; color: rgba(235, 228, 255, 0.85);
}
.sf-cat__tier.full { border-color: #C9B6FF; color: #C9B6FF;
}
.sf-ver { margin-top: 12px; padding: 13px 15px; border-radius: 14px; background: rgba(255, 255, 255, 0.04);
}
.sf-ver__t { font-size: 16px; font-weight: 800;
}
.sf-ver__p { margin-top: 6px; font-size: 14px; line-height: 1.75; color: rgba(235, 228, 255, 0.82);
}

.ca { margin: 14px 15px 4px; padding: 13px 13px 15px; border-radius: 18px; background: linear-gradient(160deg, rgba(201, 182, 255, 0.2), rgba(255, 184, 217, 0.12) 60%, rgba(255, 255, 255, 0.05)); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); color: #FFFFFF;
}
.ca.v-end { margin: 6px 0 0;
}
/* 要用户去做的事（领取虚拟人）：金色描边 + 呼吸光，一眼看得出来 */
.ca.todo { border: 2px solid #FFD36E; animation: caGlow-677ad076 2.4s ease-in-out infinite;
}
@keyframes caGlow-677ad076 {
0%, 100% { box-shadow: 0 0 0 rgba(255, 211, 110, 0), 0 8px 24px rgba(0, 0, 0, 0.25);
}
50% { box-shadow: 0 0 18px rgba(255, 211, 110, 0.55), 0 8px 24px rgba(0, 0, 0, 0.25);
}
}
.ca-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.ca-k { font-size: 17.5px; font-weight: 800; letter-spacing: 1px;
}
.ca-todo { flex: none; margin-left: 8px; padding: 4px 12px; border-radius: 999px; background: #FFD36E; color: #2A1E52; font-size: 13.5px; font-weight: 900; letter-spacing: 1px;
}
/* 门里站着 TA：门图做底，脚下有光 */
.ca-stage { position: relative; height: 330px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center 30%;
}
.v-end .ca-stage { height: 360px;
}
.ca-light { position: absolute; left: 50%; top: 10%; width: 78%; height: 70%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(232, 222, 255, 0.16) 45%, rgba(255, 255, 255, 0) 72%); pointer-events: none;
}
/* 立绘 704 × 1280：宽 = 高 × 0.55（不用 aspect-ratio，老内核不认） */
.ca-fig { position: absolute; left: 50%; bottom: 0; height: 304px; width: 167px; transform: translateX(-50%); transform-origin: 50% 100%; animation: caBreath-677ad076 4.2s ease-in-out infinite;
}
.v-end .ca-fig { height: 332px; width: 183px;
}
.ca-img { display: block; width: 100%; height: 100%;
}
@keyframes caBreath-677ad076 {
0%, 100% { transform: translateX(-50%) scale(1, 1);
}
50% { transform: translateX(-50%) scale(1.006, 1.014);
}
}
.ca-badge { position: absolute; left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(10, 8, 24, 0.6); border: 1px solid #FFD36E; font-size: 13px; font-weight: 800; color: #FFD36E;
}
.ca-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 12px; background: linear-gradient(180deg, rgba(10, 7, 22, 0) 0%, rgba(10, 7, 22, 0.78) 55%, rgba(10, 7, 22, 0.9) 100%);
}
.ca-n { font-size: 23px; font-weight: 900; letter-spacing: 1px;
}
.ca-s { margin-top: 3px; font-size: 14.5px; font-weight: 700; color: var(--tc); letter-spacing: 0.5px;
}
.ca-q { margin-top: 4px; font-size: 14px; line-height: 1.55; opacity: 0.9;
}
.ca-btn { margin-top: 13px; height: 52px; line-height: 52px; border-radius: 999px; text-align: center; background: linear-gradient(135deg, #FFE08A, #FFB8D9); color: #2A1E52; font-size: 17.5px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 5px 18px rgba(255, 211, 110, 0.4); cursor: pointer; animation: caBeat-677ad076 2s ease-in-out infinite;
}
@keyframes caBeat-677ad076 {
0%, 100% { transform: scale(1);
}
50% { transform: scale(1.025);
}
}
.ca-panel { margin-top: 12px; animation: caIn-677ad076 0.35s ease-out;
}
@keyframes caIn-677ad076 {
from { opacity: 0; transform: translateY(-6px);
}
to { opacity: 1; transform: none;
}
}
.ca-pt-t { font-size: 17px; font-weight: 800; color: #FFD36E;
}
.ca-pt { display: flex; align-items: flex-start; margin-top: 11px;
}
.ca-pt-i { flex: none; width: 32px; height: 32px; margin-right: 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.12); text-align: center; line-height: 32px; font-size: 17px;
}
.ca-pt-b { flex: 1; min-width: 0;
}
.ca-pt-n { font-size: 15.5px; font-weight: 800;
}
.ca-pt-d { margin-top: 2px; font-size: 14px; line-height: 1.6; opacity: 0.85;
}
.ca-code { display: flex; align-items: center; margin: 14px 0 3px; padding: 10px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(255, 211, 110, 0.6);
}
.ca-code-k { flex: none; font-size: 13px; opacity: 0.75;
}
.ca-code-v { flex: 1; min-width: 0; margin-left: 8px; font-size: 24px; font-weight: 800; letter-spacing: 4px; font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.ca-code-c { flex: none; padding: 6px 13px; border-radius: 999px; background: var(--tc); color: #1E1838; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.ca-step { display: flex; align-items: flex-start; margin-top: 11px; font-size: 15px; line-height: 1.55;
}
.ca-no { flex: none; width: 23px; height: 23px; margin-right: 9px; border-radius: 50%; background: #FFD36E; color: #2A1E52; text-align: center; line-height: 23px; font-size: 13.5px; font-weight: 900;
}
.ca-st { flex: 1; min-width: 0;
}
.ca-where { margin: 7px 0 0 32px; font-size: 13px; line-height: 1.55; opacity: 0.7;
}
.ca-dl { margin-top: 16px; height: 52px; line-height: 52px; border-radius: 999px; text-align: center; background: linear-gradient(135deg, #FFE08A, #FFB8D9); color: #2A1E52; font-size: 17.5px; font-weight: 900; letter-spacing: 1px; box-shadow: 0 5px 18px rgba(255, 211, 110, 0.4); cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.ca-fig, .ca-btn, .ca.todo { animation: none !important;
}
}

.card { margin-top: 11px; padding: 13px 14px; border-radius: 15px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); animation: fade-3a188eee 0.4s ease-out;
}
@keyframes fade-3a188eee {
from { opacity: 0; transform: translateY(5px);
}
to { opacity: 1; transform: none;
}
}
.card-t { margin-bottom: 7px; font-size: 15px; font-weight: 800; color: var(--tc); letter-spacing: 0.5px;
}
.p-row { margin-top: 11px;
}
.p-l { display: flex; justify-content: space-between; font-size: 13.5px; opacity: 0.8;
}
.p-l .on { color: var(--tc); font-weight: 800; opacity: 1;
}
.p-n { opacity: 0.7;
}
.p-bar { position: relative; height: 7px; margin-top: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(201, 182, 255, 0.35), rgba(255, 184, 217, 0.35));
}
.p-mid { position: absolute; left: 50%; top: -2px; width: 1px; height: 10px; background: rgba(255, 255, 255, 0.3);
}
.p-dot { position: absolute; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 8px var(--tc);
}
.img { display: block; width: 92%; margin: 0 4%;
}
.l-it { position: relative; margin-top: 8px; padding-left: 21px;
}
.l-it::before { content: '✦'; position: absolute; left: 0; top: 2px; color: var(--tc); font-size: 13.5px;
}
.l-it.warn::before { content: '·'; font-size: 26px; top: -8px; color: rgba(244, 240, 255, 0.6);
}
.l-t { font-size: 16px; font-weight: 800; line-height: 1.6;
}
.l-d { margin-top: 2px; font-size: 14.5px; line-height: 1.75; opacity: 0.82;
}
.l-it + .l-it { margin-top: 13px;
}
.l-tip { margin-top: 6px; padding: 7px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.07); font-size: 14px; line-height: 1.65; opacity: 0.94;
}
.l-tip-k { margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--tc); color: #1E1838; font-size: 12px; font-weight: 800;
}
.l-it.num { padding-left: 32px;
}
.l-it.num::before { content: none;
}
.l-no { position: absolute; left: 0; top: 2px; width: 23px; height: 23px; line-height: 23px; border-radius: 50%; background: var(--tc); color: #1E1838; text-align: center; font-size: 13.5px; font-weight: 800;
}
.h-sum { font-size: 14px; opacity: 0.88;
}
.h-n { font-size: 25px; font-weight: 800; color: var(--tc);
}
.h-wow { color: var(--tc); font-weight: 800;
}
.h-it { display: flex; align-items: center; margin-top: 9px; padding: 10px 11px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); cursor: pointer;
}
.h-it.on { background: rgba(255, 255, 255, 0.12); border-color: var(--tc);
}
.h-t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.65;
}
.h-b { flex: none; margin-left: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.26); font-size: 12.5px; white-space: nowrap; opacity: 0.85;
}
.h-it.on .h-b { background: var(--tc); border-color: transparent; color: #1E1838; font-weight: 800; opacity: 1;
}
.lt { padding: 4px 3px;
}
.lt-l { font-size: 15.5px; line-height: 1.9; opacity: 0.94;
}
.lt-l.first { font-weight: 800; color: var(--tc);
}
.lt-l + .lt-l { margin-top: 6px;
}
.lt-s { margin-top: 10px; text-align: right; font-size: 14px; opacity: 0.75;
}
.hero { text-align: center; padding: 4px 0;
}
.hero-k { font-size: 12.5px; letter-spacing: 3px; opacity: 0.75;
}
.hero-n { margin-top: 4px; font-size: 29px; font-weight: 900; letter-spacing: 2px;
}
.hero-b { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #9FFFE0, #B8C8FF, #FFC2EC); color: #3B2D5C; font-size: 12px; vertical-align: middle;
}
.hero-s { margin-top: 4px; font-size: 14px; opacity: 0.8;
}
.hero-q { margin-top: 8px; font-size: 16.5px; font-weight: 700; line-height: 1.6; color: var(--tc);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px;
}
.chip { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.11); font-size: 14px; font-weight: 700;
}
.quote { padding: 3px 0 3px 12px; border-left: 3px solid var(--tc); font-size: 16px; font-weight: 600; line-height: 1.75;
}
.tx { font-size: 15.5px; line-height: 1.85; opacity: 0.92;
}
.tx + .tx { margin-top: 7px;
}
.lk-t { font-size: 17px; font-weight: 800;
}
.lk-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 3px;
}
.lk-it { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 13.5px; opacity: 0.88;
}
.lk-n { margin-top: 8px; font-size: 12.5px; line-height: 1.6; opacity: 0.6;
}
/* 名片：门 + 发光的通用人形 + 名字（同 App 名片卡的版式，人物换成看不清是谁的光影） */
/* 名片：领取虚拟人卡（ClaimAvatar）自带底色和边框，这层不再套框 */
.c-app { padding: 0; background: none; border: none; overflow: visible;
}
/* 六个倾向两端的字母与百分比 */
.p-lt { display: inline-block; min-width: 15px; margin-right: 3px; font-weight: 900;
}
.p-lt.r { margin: 0 0 0 3px;
}
.p-pc { margin: 0 4px; font-weight: 800;
}
/* 64 型代码说明卡 */
.cd-code { display: flex; align-items: flex-start; justify-content: center; margin: 4px 0 6px;
}
.cd-l { display: flex; flex-direction: column; align-items: center; min-width: 34px;
}
.cd-ch { font-size: 34px; line-height: 1.1; font-weight: 900; letter-spacing: 1px; color: #FFFFFF; text-shadow: 0 0 12px var(--tc);
}
.cd-l.ext .cd-ch { color: var(--tc);
}
.cd-nm { margin-top: 3px; font-size: 12.5px; opacity: 0.75;
}
.cd-dash { margin: 0 2px; font-size: 30px; line-height: 1.25; font-weight: 800; opacity: 0.6;
}
.cd-sub { margin: 12px 0 2px; font-size: 15px; font-weight: 800; color: var(--tc);
}
.cd-r { display: flex; align-items: flex-start; margin-top: 9px;
}
.cd-rl { flex: none; width: 28px; height: 28px; margin-right: 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.12); text-align: center; line-height: 28px; font-size: 15px; font-weight: 900;
}
.cd-rl.ext { background: var(--tc); color: #1E1838;
}
.cd-rb { flex: 1; min-width: 0;
}
.cd-rt { font-size: 15px; font-weight: 800;
}
.cd-rd { margin-top: 1px; font-size: 13.5px; line-height: 1.55; opacity: 0.8;
}
.cd-n { margin-top: 11px; font-size: 14.5px; line-height: 1.75; opacity: 0.88;
}
.cd-forms { display: flex; flex-wrap: wrap; margin-top: 6px;
}
.cd-f { margin: 0 7px 7px 0; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13.5px;
}
.cd-f.on { background: var(--tc); border-color: var(--tc); color: #1E1838; font-weight: 800;
}
/* 「你的形态」开头那一句 */
.fm { padding: 2px 0; font-size: 16.5px; font-weight: 800; color: var(--tc); line-height: 1.6;
}

/* 底部常驻的一条：往下读一点才出来 */
.ap-bar { position: fixed; left: 50%; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 8; box-sizing: border-box; display: flex; align-items: center; width: calc(100% - 24px); max-width: 496px; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(20, 15, 40, 0.92); border: 1.5px solid rgba(255, 211, 110, 0.7); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); transform: translate(-50%, 140%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; pointer-events: none;
}
.ap-bar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto;
}
.ap-bar__av { flex: none; width: 36px; height: 36px; margin-right: 9px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.35); box-sizing: border-box;
}
/* 字放大后一行放不下：最多两行，不截断 */
.ap-bar__t { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ap-bar__btn { flex: none; margin-left: 8px; padding: 10px 19px; border-radius: 999px; background: linear-gradient(135deg, #FFE08A, #FFB8D9); color: #2A1E52; font-size: 15.5px; font-weight: 900; cursor: pointer;
}

.ah { position: relative; height: calc(min(54vh, 420px) + 34px); margin: 2px 0 0; overflow: hidden;
}
/* 身后的光：主题色，慢慢呼吸；极光隐藏款换成流动的极光色 */
.ah-halo { position: absolute; left: 50%; top: 6%; width: min(86vw, 380px); height: min(46vh, 360px); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, var(--tc) 30%, rgba(0, 0, 0, 0) 68%); opacity: 0.45; filter: blur(6px); animation: ahHalo-2cf1007a 4.2s ease-in-out infinite; pointer-events: none;
}
.ah.aurora .ah-halo { background: conic-gradient(from 0deg, #8EF2D2, #8FB9FF, #D59BFF, #FFB3D6, #8EF2D2); opacity: 0.38; filter: blur(26px); animation: ahHalo-2cf1007a 4.2s ease-in-out infinite,ahSpin-2cf1007a 14s linear infinite;
}
@keyframes ahHalo-2cf1007a {
0%, 100% { opacity: 0.38;
}
50% { opacity: 0.58;
}
}
@keyframes ahSpin-2cf1007a {
from { transform: translateX(-50%) rotate(0deg);
}
to { transform: translateX(-50%) rotate(360deg);
}
}
/* 脚下的光圈 */
.ah-floor { position: absolute; left: 50%; bottom: 34px; width: min(62vw, 260px); height: 34px; transform: translate(-50%, 45%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, var(--tc) 35%, rgba(0, 0, 0, 0) 70%); opacity: 0.5; pointer-events: none;
}
/* 形象画框：与立绘 / 待机视频同比例 704 × 1280，脚踩在光圈上 */
.ah-box { position: absolute; left: 50%; bottom: 34px; height: min(54vh, 420px); width: calc(min(54vh, 420px) * 0.55); transform: translateX(-50%);
}
.ah-sw { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 100%; animation: ahBreath-2cf1007a 4.2s ease-in-out infinite; transition: opacity 0.6s ease;
}
.ah-sw.off { opacity: 0;
}
.ah-still { display: block; width: 100%; height: 100%;
}
/* 呼吸立绘：以脚为支点，身体随呼吸轻轻起伏 */
@keyframes ahBreath-2cf1007a {
0%, 100% { transform: scale(1, 1);
}
50% { transform: scale(1.006, 1.014);
}
}
.ah-tag { position: absolute; left: 0; right: 0; bottom: 5px; text-align: center; font-size: 14px; letter-spacing: 1px; color: rgba(255, 255, 255, 0.78);
}
@media (prefers-reduced-motion: reduce) {
.ah-halo, .ah-sw { animation: none !important;
}
}

.rep { position: relative; min-height: 100vh; color: #FFFFFF; font-family: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}
.rep-bg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.rep-glow { position: absolute; left: -20%; right: -20%; top: -30vh; height: 70vh; background: radial-gradient(closest-side, var(--tc), rgba(0, 0, 0, 0)); opacity: 0.22;
}
/* ———— 报告主题：装饰与飘动的小东西（只用 transform / opacity 动画） ———— */
.rep-fx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
}
.fx-top { position: absolute; right: -8px; top: -12px; width: 135px; opacity: 0.5;
}
.fx-top.wide { left: 0; right: 0; top: 0; width: 100%; opacity: 0.75; transform-origin: 50% 0; animation: fxBunt-5e3334a0 6s ease-in-out infinite alternate;
}
@keyframes fxBunt-5e3334a0 {
from { transform: rotate(-0.8deg);
}
to { transform: rotate(0.8deg);
}
}
.fx-bottom { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; opacity: 0.9;
}
.fx-moon { position: absolute; right: 32px; top: 8px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #FFFEF0 0%, #F4F0CF 52%, rgba(244, 240, 207, 0.15) 70%, rgba(244, 240, 207, 0) 72%); box-shadow: 0 0 40px 13px rgba(236, 240, 200, 0.16); opacity: 0.8;
}
.fx-moon.left { right: auto; left: 32px;
}
.fx-beam { position: absolute; top: -12%; width: 150px; height: 120%; background: linear-gradient(180deg, rgba(255, 246, 214, 0.2), rgba(255, 246, 214, 0)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: fxSwing-5e3334a0 9s ease-in-out infinite alternate;
}
.fx-beam.b1 { left: 2%;
}
.fx-beam.b2 { right: 2%; animation-delay: -4.5s; animation-direction: alternate-reverse;
}
@keyframes fxSwing-5e3334a0 {
from { transform: rotate(-16deg);
}
to { transform: rotate(16deg);
}
}
/* 暖阳：左上角一团暖光，光芒慢慢转 */
.fx-sun { position: absolute; left: -70px; top: -70px; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 228, 165, 0.55) 0%, rgba(255, 190, 110, 0.18) 40%, rgba(255, 190, 110, 0) 70%); animation: fxPulse-5e3334a0 6s ease-in-out infinite alternate;
}
.fx-sunrays { position: absolute; left: -120px; top: -120px; width: 330px; height: 330px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 232, 175, 0.14) 0deg 6deg, rgba(255, 232, 175, 0) 6deg 20deg); -webkit-mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0) 70%); mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, 0) 70%); animation: fxRot-5e3334a0 70s linear infinite;
}
/* 暖阳花环（ENFJ）：头顶一圈大光芒 */
.fx-rays { position: absolute; left: 50%; top: -230px; width: 620px; height: 620px; margin-left: -310px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 160, 0.12) 0deg 5deg, rgba(255, 220, 160, 0) 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 66%); mask-image: radial-gradient(circle, #000 10%, rgba(0, 0, 0, 0) 66%); animation: fxRot-5e3334a0 90s linear infinite;
}
@keyframes fxPulse-5e3334a0 {
from { transform: scale(0.94); opacity: 0.8;
}
to { transform: scale(1.06); opacity: 1;
}
}
@keyframes fxRot-5e3334a0 {
to { transform: rotate(360deg);
}
}
@keyframes fxRotR-5e3334a0 {
to { transform: rotate(-360deg);
}
}
/* 晴空：几朵很淡的云慢慢飘过 */
.fx-cloud { position: absolute; left: -70vw; height: 70px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%); filter: blur(6px); animation: fxCloud-5e3334a0 linear infinite;
}
@keyframes fxCloud-5e3334a0 {
from { transform: translateX(0);
}
to { transform: translateX(180vw);
}
}
/* 月光 / 星雾：底部一层慢慢晃的薄雾 */
.fx-mist { position: absolute; left: -20%; right: -20%; bottom: 0; height: 42%; background: linear-gradient(0deg, var(--mist), rgba(0, 0, 0, 0)); animation: fxMist-5e3334a0 14s ease-in-out infinite alternate;
}
@keyframes fxMist-5e3334a0 {
from { transform: translateX(-4%);
}
to { transform: translateX(4%);
}
}
/* 星雾：偶尔划过的流星 */
.fx-meteor { position: absolute; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(270deg, rgba(255, 255, 255, 0), #FFFFFF); opacity: 0; animation: fxMeteor-5e3334a0 ease-out infinite;
}
@keyframes fxMeteor-5e3334a0 {
0%, 70% { opacity: 0; transform: rotate(-32deg) translateX(0);
}
74% { opacity: 1;
}
90% { opacity: 0; transform: rotate(-32deg) translateX(-260px);
}
100% { opacity: 0; transform: rotate(-32deg) translateX(-260px);
}
}
/* 极光：三道光带慢慢摆动 */
.fx-aur { position: absolute; left: -30%; width: 160%; height: 30vh; border-radius: 50%; filter: blur(22px); opacity: 0.4; animation: fxAur-5e3334a0 12s ease-in-out infinite alternate;
}
.fx-aur.a1 { top: 2vh;
}
.fx-aur.a2 { top: 11vh; animation-delay: -4s; animation-duration: 15s;
}
.fx-aur.a3 { top: 19vh; animation-delay: -8s; animation-duration: 18s; opacity: 0.28;
}
@keyframes fxAur-5e3334a0 {
0% { transform: translateX(-6%) skewX(-12deg) scaleY(0.9);
}
100% { transform: translateX(6%) skewX(10deg) scaleY(1.1);
}
}
/* 蓝图坐标（ESTJ）：一层慢慢平移的网格 */
.fx-grid { position: absolute; left: -40px; top: -40px; right: -40px; bottom: -40px; background-image: linear-gradient(var(--grid) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, var(--grid) 1px, rgba(0, 0, 0, 0) 1px); background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 85%); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 85%); animation: fxGrid-5e3334a0 20s linear infinite;
}
@keyframes fxGrid-5e3334a0 {
to { transform: translate(32px, 32px);
}
}
/* 时光钟面（ISTJ）：右上角一个钟，两根指针在走 */
.fx-clock { position: absolute; right: 20px; top: 14px; width: 84px; height: 84px; opacity: 0.6;
}
.fx-clock-face { display: block; width: 100%;
}
.fx-hand { position: absolute; left: 50%; top: 50%; border-radius: 2px; background: var(--tc); transform-origin: 50% 100%;
}
.fx-hand.h { width: 3px; height: 20px; margin: -20px 0 0 -1.5px; animation: fxRot-5e3334a0 48s linear infinite;
}
.fx-hand.m { width: 2px; height: 31px; margin: -31px 0 0 -1px; animation: fxRot-5e3334a0 8s linear infinite;
}
/* 齿轮火花（ISTP）：右下角两只咬合的齿轮 */
.fx-gear { position: absolute; opacity: 0.5;
}
.fx-gear.g1 { right: -46px; bottom: 90px; width: 170px; animation: fxRot-5e3334a0 26s linear infinite;
}
.fx-gear.g2 { right: 104px; bottom: 44px; width: 104px; animation: fxRotR-5e3334a0 18s linear infinite;
}
/* 极速光轨（ESTP）：斜着飞过的光线 */
.fx-streak { position: absolute; left: -40vw; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 211, 110, 0), rgba(255, 211, 110, 0.75), rgba(255, 255, 255, 0)); opacity: 0.7; animation: fxStreak-5e3334a0 linear infinite;
}
@keyframes fxStreak-5e3334a0 {
from { transform: rotate(-8deg) translateX(0);
}
to { transform: rotate(-8deg) translateX(190vw);
}
}
/* 水彩落叶（ISFP）：几团晕开的水彩慢慢漂 */
.fx-blob { position: absolute; border-radius: 50%; filter: blur(30px); opacity: 0.22; animation: fxBlob-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxBlob-5e3334a0 {
from { transform: translate(0, 0) scale(1);
}
to { transform: translate(6vw, 4vh) scale(1.15);
}
}
/* ———— 飘动的小东西 ———— */
.fx-p { position: absolute; left: 0; top: 0; will-change: transform;
}
.fx-in { width: 100%; height: 100%;
}
.fx-img { display: block; width: 100%;
}
/* 花瓣、彩带、落叶、羽毛、雪花、小花：从上往下飘，边飘边摆、边翻 */
.m-fall { top: -6%; animation: fxFall-5e3334a0 linear infinite;
}
@keyframes fxFall-5e3334a0 {
from { transform: translate3d(0, 0, 0);
}
to { transform: translate3d(var(--dx), 118vh, 0);
}
}
/* 气泡、气球、孔明灯、爱心、火星、浮尘……：从下往上飘 */
.m-rise { top: 104%; animation: fxRise-5e3334a0 linear infinite;
}
@keyframes fxRise-5e3334a0 {
0% { transform: translate3d(0, 0, 0); opacity: 0;
}
8% { opacity: 1;
}
85% { opacity: 1;
}
100% { transform: translate3d(var(--dx), -118vh, 0); opacity: 0;
}
}
.k-petal, .k-flower { opacity: 0.85;
}
.k-petal .fx-in, .k-flower .fx-in { animation: fxSway-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxSway-5e3334a0 {
from { transform: translateX(-13px) rotate(-35deg) rotateY(0deg);
}
to { transform: translateX(13px) rotate(45deg) rotateY(60deg);
}
}
.k-confetti .fx-in { height: 0; padding-top: 55%; border-radius: 1.5px; animation: fxSpin-5e3334a0 linear infinite;
}
@keyframes fxSpin-5e3334a0 {
from { transform: rotate3d(1, 1, 0, 0deg);
}
to { transform: rotate3d(1, 1, 0, 360deg);
}
}
.k-leaf { opacity: 0.85;
}
.k-leaf .fx-in { animation: fxLeaf-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxLeaf-5e3334a0 {
from { transform: translateX(-16px) rotate(-50deg);
}
to { transform: translateX(16px) rotate(70deg) rotateX(40deg);
}
}
.k-feather { opacity: 0.8;
}
.k-feather .fx-in { animation: fxFeather-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxFeather-5e3334a0 {
from { transform: translateX(-24px) rotate(-28deg);
}
to { transform: translateX(24px) rotate(28deg);
}
}
.k-snow { opacity: 0.75;
}
.k-snow .fx-in { animation: fxSnow-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxSnow-5e3334a0 {
from { transform: translateX(-6px) rotate(0deg);
}
to { transform: translateX(6px) rotate(60deg);
}
}
.k-heart .fx-in, .k-bubble .fx-in, .k-balloon .fx-in, .k-check .fx-in, .k-chat .fx-in, .k-lantern .fx-in { animation: fxBob-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxBob-5e3334a0 {
from { transform: translateX(-9px) rotate(-6deg);
}
to { transform: translateX(9px) rotate(6deg);
}
}
.k-heart, .k-check, .k-chat { opacity: 0.8;
}
.k-lantern .fx-img { filter: drop-shadow(0 0 8px rgba(255, 190, 110, 0.75)); animation: fxFlick-5e3334a0 1.7s ease-in-out infinite alternate;
}
@keyframes fxFlick-5e3334a0 {
from { opacity: 0.75;
}
to { opacity: 1;
}
}
.k-ember .fx-in, .k-mote .fx-in { border-radius: 50%; animation: fxBlink-5e3334a0 ease-in-out infinite alternate;
}
.k-ember .fx-in { box-shadow: 0 0 6px 2px rgba(255, 160, 60, 0.35);
}
/* 星光、星点、闪电：原地一闪一闪 */
.m-tw .fx-in { opacity: 0; animation: fxTwinkle-5e3334a0 ease-in-out infinite;
}
@keyframes fxTwinkle-5e3334a0 {
0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg);
}
50% { opacity: 0.9; transform: scale(1) rotate(45deg);
}
}
.k-bolt .fx-in { animation-name: fxFlash-5e3334a0;
}
@keyframes fxFlash-5e3334a0 {
0%, 100% { opacity: 0; transform: scale(0.6);
}
8% { opacity: 1; transform: scale(1.1);
}
16% { opacity: 0.2;
}
22% { opacity: 0.9; transform: scale(1);
}
40% { opacity: 0;
}
}
/* 蝴蝶：沿三条路线之一慢慢飞过，翅膀一开一合（路线按屏宽，750rpx = 100vw） */
.m-fly { animation-timing-function: ease-in-out; animation-iteration-count: infinite; opacity: 0.9;
}
.m-fly.fl1 { animation-name: fxFly1-5e3334a0;
}
.m-fly.fl2 { animation-name: fxFly2-5e3334a0;
}
.m-fly.fl3 { animation-name: fxFly3-5e3334a0;
}
.m-fly .fx-in { animation: fxFlap-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxFlap-5e3334a0 {
from { transform: scaleX(1);
}
to { transform: scaleX(0.3);
}
}
@keyframes fxFly1-5e3334a0 {
0% { transform: translate(-10.7vw, 72vh) rotate(10deg);
}
25% { transform: translate(24vw, 56vh) rotate(-8deg);
}
50% { transform: translate(50.7vw, 64vh) rotate(12deg);
}
75% { transform: translate(80vw, 44vh) rotate(-6deg);
}
100% { transform: translate(112vw, 34vh) rotate(8deg);
}
}
@keyframes fxFly2-5e3334a0 {
0% { transform: translate(110.7vw, 30vh) rotate(-10deg) scaleX(-1);
}
30% { transform: translate(74.7vw, 18vh) rotate(6deg) scaleX(-1);
}
60% { transform: translate(40vw, 34vh) rotate(-8deg) scaleX(-1);
}
100% { transform: translate(-12vw, 22vh) rotate(6deg) scaleX(-1);
}
}
@keyframes fxFly3-5e3334a0 {
0% { transform: translate(-10.7vw, 46vh) rotate(6deg);
}
35% { transform: translate(32vw, 82vh) rotate(-10deg);
}
70% { transform: translate(69.3vw, 68vh) rotate(8deg);
}
100% { transform: translate(112vw, 86vh) rotate(-6deg);
}
}
/* 萤火：慢慢游走，忽明忽暗 */
.m-ff { animation: fxDrift-5e3334a0 ease-in-out infinite alternate;
}
.m-ff .fx-in { border-radius: 50%; animation: fxBlink-5e3334a0 ease-in-out infinite alternate; box-shadow: 0 0 7px 2px rgba(220, 245, 160, 0.35);
}
@keyframes fxDrift-5e3334a0 {
0% { transform: translate(0, 0);
}
33% { transform: translate(20px, -30px);
}
66% { transform: translate(-15px, -55px);
}
100% { transform: translate(12px, -85px);
}
}
@keyframes fxBlink-5e3334a0 {
from { opacity: 0.12;
}
to { opacity: 0.95;
}
}
/* 棋子、原子、皇冠、小爪印：在原地慢慢漂浮 */
.m-drift { opacity: 0.3; animation: fxFloat-5e3334a0 ease-in-out infinite alternate;
}
@keyframes fxFloat-5e3334a0 {
0% { transform: translate(0, 0) rotate(-8deg);
}
50% { transform: translate(14px, -18px) rotate(6deg);
}
100% { transform: translate(-10px, -34px) rotate(-4deg);
}
}
/* 第一次打开：门光散开 */
.rep-flash { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.98) 0%, rgba(232, 222, 255, 0.75) 28%, rgba(180, 156, 255, 0.25) 55%, rgba(180, 156, 255, 0) 75%); animation: repFlash-5e3334a0 1.3s ease-out forwards;
}
@keyframes repFlash-5e3334a0 {
0% { opacity: 1; transform: scale(0.6);
}
45% { opacity: 0.85; transform: scale(1.4);
}
100% { opacity: 0; transform: scale(2.2);
}
}
/* ———— 顶栏（吸顶）与章节条 ———— */
.rep-head { position: sticky; top: 0; z-index: 3; transition: background 0.25s, box-shadow 0.25s;
}
.rep-head.solid { background: rgba(9, 7, 22, 0.72); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
.rep-top { display: flex; align-items: center; padding: 10px 14px 6px 16px;
}
.rep-av, .say-av { flex: none; box-sizing: border-box; border-radius: 50%; background-color: rgba(255, 255, 255, 0.08); background-image: url('/ai-java/assets/sil-core.ec083653.webp'); background-repeat: no-repeat; background-size: 340% auto; background-position: 45.75% 10%; border: 1px solid var(--tc); box-shadow: 0 0 8px rgba(255, 255, 255, 0.12), inset 0 0 6px rgba(255, 255, 255, 0.18);
}
.rep-av { width: 38px; height: 38px; margin-right: 9px;
}
.rep-tt { flex: 1; min-width: 0;
}
.rep-t { font-size: 18px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-s { margin-top: 2px; font-size: 12.5px; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rep-save { flex: none; margin-left: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24); font-size: 14px; font-weight: 700; cursor: pointer;
}
.rep-nav { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 4px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rep-nav::-webkit-scrollbar { display: none;
}
.rn { display: inline-flex; align-items: center; margin-left: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; opacity: 0.78; cursor: pointer;
}
.rn:last-child { margin-right: 8px;
}
.rn.on { opacity: 1; background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); font-weight: 800;
}
.rn-g { width: 23px; height: 23px; margin-right: 6px; border-radius: 7px; text-align: center; line-height: 23px; font-size: 12.5px; color: #FFFFFF;
}
/* ———— 正文 ———— */
.rep-body { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto;
}
.sec { padding: 6px 15px 18px;
}
.sec + .sec { border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sec-h { display: flex; align-items: center; padding-top: 20px;
}
.sec-g { flex: none; width: 44px; height: 44px; border-radius: 13px; text-align: center; line-height: 44px; font-size: 22px; color: #FFFFFF; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.sec-tt { flex: 1; min-width: 0; margin-left: 11px;
}
.sec-n { font-size: 22px; font-weight: 900; letter-spacing: 1px; line-height: 1.3;
}
/* 本章要点：章节名下面的小胶囊（我是谁 / 最明显的两个倾向 / 第一项优势 / 形态……） */
.sec-v { display: inline-block; max-width: 100%; box-sizing: border-box; margin-top: 5px; padding: 2px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--tc); font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt { margin-top: 4px;
}
/* 章里的小标题：前面一道主题色条 */
.pt-t { display: block; margin-top: 20px; padding-left: 10px; border-left: 4px solid var(--tc); font-size: 18px; font-weight: 800; line-height: 1.35; color: #FFFFFF; letter-spacing: 0.5px;
}
.say { display: flex; align-items: flex-start; margin-top: 12px;
}
.say-av { width: 34px; height: 34px;
}
.say-t { flex: 1; min-width: 0; margin-left: 9px; padding: 10px 13px; border-radius: 3px 16px 16px 16px; background: rgba(255, 255, 255, 0.1); font-size: 16px; line-height: 1.75;
}
/* 每章开头 TA 说的那句：本章的重点，做成醒目的框 */
.say.lead .say-t { padding: 12px 14px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)); border: 1px solid rgba(255, 255, 255, 0.2); border-left: 4px solid var(--tc); font-size: 17px; font-weight: 700; line-height: 1.7; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.btns { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px;
}
.bt { padding: 10px 17px; border-radius: 999px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 15px; font-weight: 700; cursor: pointer;
}
.bt.main { background: linear-gradient(135deg, #C9B6FF, #FFB8D9); color: #2A1E52; font-weight: 800; border-color: transparent;
}
.bt.ghost { background: transparent; opacity: 0.85;
}
.note { margin-top: 10px; font-size: 12.5px; line-height: 1.6; opacity: 0.55;
}
.sec.lock .sec-g { filter: grayscale(0.3);
}
.rep-end { padding: 20px 0 6px; text-align: center; font-size: 13.5px; opacity: 0.5;
}
.rep-foot { padding: 0 16px calc(28px + env(safe-area-inset-bottom)); text-align: center; font-size: 12px; line-height: 1.6; opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
.rep-fx, .rep-fx *, .rep-flash { animation: none !important;
}
.rep-fx .fx-p { display: none;
}
}

.sf-share.sf-share { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; background: rgba(6, 4, 14, 0.86);
}
.sf-share__close { position: fixed; right: 14px; top: 14px; top: calc(env(safe-area-inset-top) + 14px); z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 26px; cursor: pointer;
}
.sf-share__panel { width: 86%; max-width: 380px; text-align: center;
}
.sf-share__box { border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.sf-share__img { display: block; width: 100%; height: auto; max-height: 76vh; -o-object-fit: contain; object-fit: contain;
}
.sf-share__loading { padding: 40px 0; color: #DCD0FF; font-size: 14px;
}
.sf-share__tip { margin-top: 12px; color: #DCD0FF; font-size: 13px;
}

/* 64 型人格：深夜紫底 + 人格之门舞台（与懂懂 App 同一套）。舞台是固定层（DoorStage），内容在 .sf-main 里 */
/* --sf-fig-h：答题时中央光影人形的高度。087 题目 / 选项字调大后题目卡约 410px 高，矮屏上人形缩小（最小 88px），让四个选项都留在屏幕里；高屏照旧 34vh */
.sf-page { --sf-fig-h: max(88px, min(34vh, calc(100vh - 548px))); position: relative; min-height: 100vh; background-color: #070612; color: #FFFFFF; font-family: -apple-system, 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}
.sf-main { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 520px; margin: 0 auto;
}
.sf-keep { box-sizing: border-box; width: calc(100% - 30px); margin: 18px auto 0; padding: 20px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); text-align: center;
}
/* 要用户去做的事（关注公众号保存报告）：金色描边 + 「待你保存」标注，与领取虚拟人卡同一种醒目样式 */
.sf-keep.todo { border: 2px solid #FFD36E; box-shadow: 0 0 16px rgba(255, 211, 110, 0.3);
}
.sf-keep__tag { display: inline-block; margin-bottom: 9px; padding: 4px 12px; border-radius: 999px; background: #FFD36E; color: #2A1E52; font-size: 13.5px; font-weight: 900; letter-spacing: 1px;
}
.sf-keep__title { font-size: 19px; font-weight: 900; color: #FFFFFF;
}
.sf-keep__qr { display: flex; align-items: center; justify-content: center; width: 176px; height: 176px; margin: 13px auto 0; border-radius: 12px; background: #FFFFFF;
}
.sf-keep__img { width: 164px; height: 164px;
}
.sf-keep__tip { color: #7E77A0; font-size: 13.5px;
}
.sf-keep__desc { margin-top: 11px; color: rgba(235, 228, 255, 0.85); font-size: 15px; line-height: 1.75;
}
.sf-keep__copy { display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 10px 22px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.45); color: #FFFFFF; font-size: 15px; font-weight: 800; cursor: pointer;
}
.sf-keep__feedback { display: block; margin-top: 8px; color: #C9B6FF; font-size: 13.5px;
}
.sf-fatal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(10, 7, 22, 0.97); text-align: center;
}
.sf-fatal__title { font-size: 20px; font-weight: 900; color: #FFFFFF;
}
.sf-fatal__p { color: rgba(220, 208, 255, 0.6); font-size: 13px;
}
.sf-fatal__btn { margin-top: 8px; padding: 11px 26px; border-radius: 30px; color: #FFFFFF; background: linear-gradient(90deg, #6B48E8, #A06BFF); font-weight: 800; cursor: pointer;
}