\u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2d\u0e34\u0e19\u0e40\u0e17\u0e2d\u0e23\u0e4c\u0e41\u0e2d\u0e04\u0e0a\u0e31\u0e48\u0e19 - Soul Quartet<\/title>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+TC:wght@400;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap\"\n rel=\"stylesheet\">\n\n <style>\n :root {\n --txt-main: #f2ece9;\n --title-color: #d2cbc9 !important;\n --card-bg: rgba(44, 44, 44, 0.4);\n --accent-color: #a09f9b;\n --font-main: 'Noto Sans TC', sans-serif;\n --font-serif: 'Noto Serif TC', serif;\n --bg-grad-1: #5e4b49;\n --bg-grad-2: #695351;\n --bg-grad-3: #867b78;\n --bg-grad-4: #a09f9b;\n --bg-grad-5: #d2cbc9;\n }\n\n body,\n html {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-family: var(--font-main);\n overflow: hidden;\n background-color: transparent;\n }\n\n * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n \/* =========================================\n \u661f\u7a7a\u80cc\u666f\n ========================================= *\/\n .starry-background-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n pointer-events: none;\n overflow: hidden;\n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n transition: background 1.5s ease;\n }\n\n .starry-background-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);\n }\n\n .starry-background-wrapper::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.5px, transparent 0.5px), radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);\n background-size: 25px 25px, 37px 37px;\n opacity: 0.6;\n animation: grain 8s steps(10) infinite;\n }\n\n @keyframes grain {\n 0% {\n transform: translate(0, 0);\n }\n\n 100% {\n transform: translate(-10%, 5%);\n }\n }\n\n @keyframes twinkle {\n\n 0%,\n 100% {\n opacity: 0.3;\n transform: scale(1);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2);\n }\n }\n\n @keyframes sparkle {\n\n 0%,\n 100% {\n opacity: 0.4;\n transform: scale(1);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.5);\n box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(200, 200, 255, 0.8);\n }\n }\n\n .starry-background-wrapper .stars {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n\n .starry-background-wrapper .star {\n position: absolute;\n background: #fff;\n border-radius: 50%;\n animation: twinkle var(--duration) infinite ease-in-out;\n animation-delay: var(--delay);\n }\n\n .starry-background-wrapper .star.large {\n width: 4px;\n height: 4px;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);\n }\n\n .starry-background-wrapper .star.medium {\n width: 3px;\n height: 3px;\n box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);\n }\n\n .starry-background-wrapper .star.small {\n width: 2px;\n height: 2px;\n box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);\n }\n\n .starry-background-wrapper .star.sparkle {\n width: 5px;\n height: 5px;\n box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(200, 200, 255, 0.5);\n animation: sparkle 2.5s infinite ease-in-out;\n animation-delay: var(--delay);\n }\n\n \/* \u6d41\u661f *\/\n .starry-background-wrapper .meteor {\n position: fixed;\n width: 5px;\n height: 5px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);\n opacity: 0;\n z-index: 100;\n }\n\n .starry-background-wrapper .meteor.big {\n width: 10px;\n height: 10px;\n box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 0.9);\n }\n\n .starry-background-wrapper .meteor::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 100%;\n width: 150px;\n height: 2px;\n background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8), #fff);\n transform: translateY(-50%);\n border-radius: 2px;\n }\n\n .starry-background-wrapper .meteor.big::before {\n width: 250px;\n height: 4px;\n }\n\n @keyframes meteorFall {\n 0% {\n opacity: 1;\n transform: translate(0, 0) rotate(-45deg);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-500px, 500px) rotate(-45deg);\n }\n }\n\n @keyframes meteorFallBig {\n 0% {\n opacity: 1;\n transform: translate(0, 0) rotate(-45deg);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-800px, 800px) rotate(-45deg);\n }\n }\n\n .starry-background-wrapper .meteor.active {\n animation: meteorFall var(--duration) linear forwards;\n }\n\n .starry-background-wrapper .meteor.big.active {\n animation: meteorFallBig var(--duration) linear forwards;\n }\n\n \/* =========================================\n \u4ecb\u9762\u4f48\u5c40\n ========================================= *\/\n #immersive-quiz-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n z-index: 10;\n background-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .quiz-card-container {\n width: 90%;\n max-width: 1000px;\n height: 92dvh;\n max-height: 900px;\n background: transparent;\n padding: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 10;\n padding-top: 20px;\n }\n\n .top-header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n flex-shrink: 0;\n }\n\n .chapter-pill {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 1px;\n color: #fff;\n background: rgba(255, 255, 255, 0.15);\n padding: 6px 14px;\n border-radius: 50px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n #mobileBackBtn {\n display: none;\n cursor: pointer;\n font-size: 16px;\n }\n\n \/* \ud83d\udd25 \u5730\u7403\u6309\u9215 *\/\n .globe-btn {\n width: 33px;\n height: 33px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.35);\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n padding: 0;\n transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n flex-shrink: 0;\n z-index: 100;\n }\n\n .globe-btn span {\n font-size: 20px;\n line-height: 1;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .globe-btn:hover {\n transform: scale(1.1);\n border-color: rgba(255, 255, 255, 0.55);\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);\n }\n\n .globe-btn:hover span {\n opacity: 0.9;\n }\n\n .globe-btn:active {\n transform: scale(0.95);\n }\n\n \/* \u9032\u5ea6\u689d *\/\n .progress-container {\n width: 100%;\n margin-bottom: 0px;\n flex-shrink: 0;\n }\n\n .progress-track {\n height: 4px;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 10px;\n overflow: visible;\n }\n\n @keyframes breatheSideways {\n\n 0%,\n 100% {\n transform: scaleX(1);\n box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);\n }\n\n 50% {\n transform: scaleX(1.015);\n box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);\n }\n }\n\n .progress-bar-fill {\n height: 100%;\n width: 0%;\n border-radius: 10px;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), #fff, rgba(255, 255, 255, 0.85));\n transition: width 0.5s ease;\n position: relative;\n transform-origin: left center;\n animation: breatheSideways 2.5s infinite ease-in-out;\n }\n\n @keyframes breatheDot {\n\n 0%,\n 100% {\n transform: translateY(-50%) scaleX(1);\n opacity: 0.6;\n }\n\n 50% {\n transform: translateY(-50%) scaleX(1.8);\n opacity: 0.9;\n }\n }\n\n .progress-bar-fill::after {\n content: '';\n position: absolute;\n right: -3px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 4px;\n background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));\n border-radius: 0 4px 4px 0;\n animation: breatheDot 2.5s infinite ease-in-out;\n transform-origin: left center;\n }\n\n \/* \ud83d\udd25 \u984c\u76ee\u5340\u57df - \u589e\u52a0\u9593\u8ddd *\/\n .question-area {\n width: 100%;\n height: 150px;\n \/* \ud83d\udd25 \u518d\u589e\u52a0\u9ad8\u5ea6 *\/\n margin-bottom: 8px;\n \/* \ud83d\udd25 \u589e\u52a0\u8207\u5716\u7247\u9593\u8ddd *\/\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n padding: 0 10px;\n padding-top: 15px;\n }\n\n \/* \ud83d\udd25 \u96fb\u8166\u7248\u6253\u5b57\u6a5f - \u589e\u52a0\u4e0a\u4e0b\u9593\u8ddd *\/\n .desktop-minor-transition {\n font-size: 17px;\n color: var(--accent-color);\n opacity: 0;\n display: none;\n transform: translateY(5px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n font-weight: 500;\n width: 100%;\n text-align: center;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);\n position: relative;\n margin-top: 8px;\n \/* \ud83d\udd25 \u4e0a\u9593\u8ddd\u589e\u52a0 *\/\n margin-bottom: 22px;\n \/* \ud83d\udd25 \u4e0b\u9593\u8ddd\u589e\u52a0 *\/\n line-height: 1.5;\n flex-shrink: 0;\n }\n\n .desktop-minor-transition.active {\n display: block;\n }\n\n .desktop-minor-transition.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .question-text {\n font-size: 28px;\n font-weight: 700;\n line-height: 1.35;\n color: var(--title-color) !important;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n font-family: var(--font-serif);\n margin: 0;\n text-align: center;\n width: 100%;\n transition: font-size 0.3s ease;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .question-area.has-transition .question-text {\n margin-top: 0;\n margin-bottom: auto;\n }\n\n .content-body {\n flex: 1;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n min-height: 0;\n }\n\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-items: center;\n }\n\n .option-container {\n width: 100%;\n max-width: 450px;\n cursor: pointer;\n position: relative;\n aspect-ratio: 1 \/ 1;\n border-radius: 24px;\n overflow: hidden;\n background: var(--card-bg);\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);\n transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), border 0.2s;\n }\n\n .option-container:hover {\n transform: translateY(-5px);\n border-color: rgba(255, 255, 255, 0.5);\n }\n\n .option-container:active {\n transform: scale(1.02);\n border-color: #fff;\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);\n }\n\n .option-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n display: block;\n }\n\n .option-container:hover .option-img {\n transform: scale(1.08);\n }\n\n .option-text-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 50px 20px 25px 20px;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 40%, transparent 100%);\n z-index: 5;\n pointer-events: none;\n }\n\n .option-text {\n color: #fff;\n font-size: 20px;\n font-weight: 500;\n letter-spacing: 1px;\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);\n text-align: center;\n }\n\n .nav-area {\n margin-top: 15px;\n width: 100%;\n height: 40px;\n position: relative;\n flex-shrink: 0;\n }\n\n .nav-btn {\n position: absolute;\n left: 0;\n bottom: 0;\n background: transparent;\n border: none;\n color: rgba(255, 255, 255, 0.5);\n font-size: 14px;\n cursor: pointer;\n padding: 5px 10px;\n transition: 0.3s;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .nav-btn:hover {\n color: #fff;\n }\n\n .nav-btn.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n \/* iframe \u5d4c\u5165\u5c64 *\/\n .iframe-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 99999;\n background: #0b0b0b;\n display: none;\n }\n\n .iframe-overlay.active {\n display: block;\n }\n\n .iframe-overlay iframe {\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .iframe-overlay iframe.loaded {\n opacity: 1;\n }\n\n \/* iframe loading \u52d5\u756b *\/\n .iframe-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n z-index: 1;\n }\n\n .iframe-loader.hidden {\n display: none;\n }\n\n .iframe-spinner {\n width: 50px;\n height: 50px;\n border: 3px solid rgba(212, 191, 151, 0.2);\n border-top-color: #d4bf97;\n border-radius: 50%;\n animation: iframeSpin 1s linear infinite;\n }\n\n @keyframes iframeSpin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .iframe-loader-text {\n color: #d4bf97;\n font-size: 14px;\n letter-spacing: 2px;\n opacity: 0.8;\n }\n\n \/* =========================================\n \ud83d\udd25 \u904e\u5834\u52d5\u756b - \u900f\u660e\u80cc\u666f + \u4e0d\u540c\u984f\u8272\u7159\u706b\n ========================================= *\/\n .transition-layer {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.85);\n \/* \ud83d\udd25 \u900f\u660e\u5ea685% *\/\n z-index: 9999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.8s ease;\n cursor: pointer;\n }\n\n .transition-layer.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .transition-content {\n text-align: center;\n max-width: 800px;\n padding: 20px 30px;\n position: relative;\n z-index: 10;\n box-sizing: border-box;\n }\n\n .transition-chapter {\n font-size: 14px;\n letter-spacing: 3px;\n color: var(--accent-color);\n margin-bottom: 20px;\n opacity: 0;\n transform: translateY(20px);\n transition: 0.8s ease;\n }\n\n .transition-text {\n font-family: var(--font-serif);\n font-size: 26px;\n font-weight: 700;\n line-height: 1.6;\n color: #fff;\n white-space: pre-line;\n overflow-wrap: break-word;\n word-break: break-word;\n }\n\n .tap-hint {\n position: absolute;\n bottom: 40px;\n color: rgba(255, 255, 255, 0.4);\n font-size: 12px;\n animation: blink 2s infinite;\n pointer-events: none;\n }\n\n .active .transition-chapter {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n\n @keyframes blink {\n\n 0%,\n 100% {\n opacity: 0.3;\n }\n\n 50% {\n opacity: 0.8;\n }\n }\n\n #fireworksCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none;\n }\n\n \/* =========================================\n \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801 - \u6eab\u6696\u6f38\u5c64 + \u6c23\u7403\n ========================================= *\/\n .transition-layer.final-mode {\n background: linear-gradient(180deg,\n #8B7355 0%,\n #A08060 25%,\n #C4A77D 50%,\n #D4B896 75%,\n #E8D4B8 100%);\n cursor: default;\n overflow-y: auto;\n justify-content: flex-start;\n \/* \u8986\u84cb center\uff0c\u5f9e\u9802\u90e8\u958b\u59cb\u6392\u5217 *\/\n padding-top: 35px;\n padding-bottom: 35px;\n }\n\n .final-mode .transition-content {\n max-width: 520px;\n padding: 12px 25px 18px;\n text-align: center;\n }\n\n .final-mode .transition-chapter {\n display: none;\n }\n\n .final-mode .tap-hint {\n display: none;\n }\n\n .final-mode .transition-text {\n font-family: var(--font-main);\n font-size: 15px;\n text-align: center;\n line-height: 1.8;\n color: #4a4a4a;\n opacity: 0;\n transition: opacity 1s;\n font-weight: 400;\n }\n\n .final-mode .transition-text.fade-in {\n opacity: 1;\n }\n\n \/* \ud83c\udfc6 LOGO \u5fbd\u7ae0 - \u5927\u5730\u8272\u7cfb *\/\n .final-badge {\n width: 100px;\n height: 100px;\n margin: 0 auto 8px;\n background: linear-gradient(145deg, #E8D4B8 0%, #D4C4A8 50%, #C4B498 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n animation: badgePulse 2.5s ease-in-out infinite, badgeFloat 3s ease-in-out infinite;\n position: relative;\n padding: 15px;\n }\n\n .final-badge img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n filter: drop-shadow(0 2px 4px rgba(93, 78, 55, 0.2));\n }\n\n .final-badge::before {\n content: '';\n position: absolute;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n border: 2px dashed rgba(160, 128, 96, 0.4);\n animation: badgeRotate 25s linear infinite;\n }\n\n .final-badge::after {\n content: '';\n position: absolute;\n width: 165px;\n height: 165px;\n border-radius: 50%;\n border: 1px dotted rgba(139, 115, 85, 0.25);\n animation: badgeRotate 35s linear infinite reverse;\n }\n\n @keyframes badgePulse {\n\n 0%,\n 100% {\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n }\n\n 50% {\n box-shadow:\n 0 0 0 12px rgba(160, 128, 96, 0.15),\n 0 0 40px rgba(139, 115, 85, 0.4),\n 0 15px 45px rgba(93, 78, 55, 0.3);\n }\n }\n\n @keyframes badgeFloat {\n\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n }\n\n @keyframes badgeRotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n\n .final-mode .final-title {\n font-size: 26px;\n color: #3D3225;\n text-align: center;\n margin-bottom: 2px;\n font-weight: 700;\n font-family: var(--font-serif);\n line-height: 1.2;\n text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);\n }\n\n .final-subtitle {\n font-size: 13px;\n color: #5D4E37;\n margin-bottom: 8px;\n letter-spacing: 2px;\n font-weight: 500;\n }\n\n \/* \ud83d\udce6 \u8cc7\u8a0a\u5361\u7247 *\/\n .final-card {\n background: rgba(255, 255, 255, 0.85);\n border-radius: 12px;\n padding: 14px 20px;\n margin-bottom: 5px;\n box-shadow: 0 4px 20px rgba(93, 78, 55, 0.15);\n text-align: left;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.5);\n transform: translateY(20px);\n opacity: 0;\n animation: cardSlideUp 0.6s ease forwards;\n }\n\n .final-card:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n .final-card:nth-child(3) {\n animation-delay: 0.4s;\n }\n\n .final-card:nth-child(4) {\n animation-delay: 0.6s;\n }\n\n @keyframes cardSlideUp {\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n .final-card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n }\n\n .final-card-icon {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n }\n\n .final-card-icon.thanks {\n background: linear-gradient(135deg, #E8D4B8, #C4A77D);\n }\n\n .final-card-icon.photo {\n background: linear-gradient(135deg, #B8D4E8, #7DA0C4);\n }\n\n .final-card-icon.time {\n background: linear-gradient(135deg, #D4E8B8, #A0C47D);\n }\n\n .final-card-title {\n font-weight: 700;\n color: #3D3225;\n font-size: 15px;\n }\n\n .final-card-text {\n color: #4a4a4a;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .final-mode .final-highlight {\n color: #6B4C0A;\n font-weight: 700;\n background: linear-gradient(120deg, rgba(255, 200, 50, 0.35) 0%, rgba(255, 165, 0, 0.3) 100%);\n padding: 2px 8px;\n border-radius: 4px;\n }\n\n \/* \u2728 \u9583\u720d\u661f\u661f *\/\n .final-stars {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .final-star {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #FFD700;\n border-radius: 50%;\n animation: starTwinkle 2s ease-in-out infinite;\n box-shadow: 0 0 6px #FFD700;\n }\n\n @keyframes starTwinkle {\n\n 0%,\n 100% {\n opacity: 0.3;\n transform: scale(0.8);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2);\n }\n }\n\n \/* \ud83d\udd25 \u6700\u7d42\u9801\u6309\u9215 *\/\n .final-btn {\n display: none;\n margin: 12px auto 0 auto;\n padding: 14px 40px;\n font-size: 16px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 8px 25px rgba(93, 78, 55, 0.4);\n transition: all 0.3s ease;\n letter-spacing: 1px;\n position: relative;\n overflow: hidden;\n }\n\n .final-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n\n @keyframes btnShine {\n\n 0%,\n 100% {\n left: -100%;\n }\n\n 50% {\n left: 100%;\n }\n }\n\n .final-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 35px rgba(93, 78, 55, 0.5);\n }\n\n .final-btn.show {\n display: inline-block;\n }\n\n \/* \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236 - \u4e3b\u6309\u9215\u7981\u7528 *\/\n .final-btn.disabled {\n background: linear-gradient(135deg, #999 0%, #aaa 50%, #bbb 100%);\n cursor: not-allowed;\n box-shadow: none;\n opacity: 0.6;\n pointer-events: none;\n }\n\n .final-btn.disabled::before {\n animation: none;\n }\n\n .final-unlock-hint {\n display: none;\n text-align: center;\n margin-top: 10px;\n font-size: 12px;\n font-weight: 500;\n color: rgba(80, 70, 60, 0.7);\n letter-spacing: 0.5px;\n }\n\n .final-unlock-hint.show {\n display: block;\n }\n\n \/* \ud83c\udd93 \u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\u6309\u9215 *\/\n .final-simple-btn {\n display: inline-block;\n padding: 20px 60px;\n font-size: 22px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 700;\n cursor: pointer;\n box-shadow: none;\n transition: all 0.3s ease;\n text-decoration: none;\n letter-spacing: 2px;\n position: relative;\n overflow: hidden;\n animation: simpleBtnBreathe 2s ease-in-out infinite;\n min-width: 280px;\n }\n\n @keyframes simpleBtnBreathe {\n\n 0%,\n 100% {\n box-shadow: none;\n transform: scale(1);\n }\n\n 50% {\n box-shadow: none;\n transform: scale(1.05);\n }\n }\n\n .final-simple-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n\n .final-simple-btn:hover {\n transform: scale(1.05);\n box-shadow: none;\n animation: none;\n }\n\n \/* \ud83d\udd12 \u4ed8\u8cbb\u906e\u7f69\u5361\u7247 *\/\n .final-card.locked {\n position: relative;\n opacity: 0.45;\n }\n\n .final-card.locked::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(190, 185, 175, 0.45);\n border-radius: 12px;\n z-index: 1;\n }\n\n \/* \ud83d\udd19 Final \u9801\u8fd4\u56de\u6309\u9215 *\/\n .final-back-btn {\n display: inline-block;\n margin-top: 8px;\n padding: 8px 20px;\n background: transparent;\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 25px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 14px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .final-back-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.6);\n color: rgba(255, 255, 255, 0.9);\n }\n\n \/* \ud83c\udf88 \u6c23\u7403\u5bb9\u5668 *\/\n .balloon-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n z-index: 0;\n display: none;\n }\n\n \/* \u57fa\u790e\u6c23\u7403\u52d5\u756b *\/\n .balloon-base {\n position: absolute;\n bottom: -120px;\n animation: balloonFloat var(--duration, 12s) ease-in-out infinite;\n animation-delay: var(--delay, 0s);\n opacity: 0;\n }\n\n @keyframes balloonFloat {\n 0% {\n transform: translateY(0) rotate(0deg);\n opacity: 0;\n }\n\n 10% {\n opacity: 0.7;\n }\n\n 90% {\n opacity: 0.7;\n }\n\n 100% {\n transform: translateY(-120vh) rotate(15deg);\n opacity: 0;\n }\n }\n\n \/* \ud83d\udd34 \u5713\u5f62\u6c23\u7403 *\/\n .balloon-round {\n width: 55px;\n height: 68px;\n border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\n }\n\n .balloon-round::after {\n content: '';\n position: absolute;\n bottom: -25px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n .balloon-round .shine {\n position: absolute;\n width: 12px;\n height: 18px;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n top: 12px;\n left: 10px;\n }\n\n \/* \u2764\ufe0f \u611b\u5fc3\u6c23\u7403 *\/\n .balloon-heart {\n width: 50px;\n height: 45px;\n background: transparent !important;\n }\n\n .balloon-heart::before,\n .balloon-heart::after {\n content: '';\n position: absolute;\n top: 0;\n width: 26px;\n height: 40px;\n border-radius: 26px 26px 0 0;\n background: inherit;\n }\n\n .balloon-heart::before {\n left: 25px;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n background: var(--heart-color);\n }\n\n .balloon-heart::after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n background: var(--heart-color);\n }\n\n .balloon-heart .string {\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n \/* \ud83c\udf69 \u751c\u751c\u5708\u6c23\u7403 *\/\n .balloon-donut {\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n }\n\n .balloon-donut::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: linear-gradient(180deg, #A08060 0%, #C4A77D 50%, #D4B896 100%);\n }\n\n .balloon-donut::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n .balloon-donut .sprinkles {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n .balloon-donut .sprinkles::before,\n .balloon-donut .sprinkles::after {\n content: '';\n position: absolute;\n width: 4px;\n height: 8px;\n border-radius: 2px;\n }\n\n .balloon-donut .sprinkles::before {\n top: 8px;\n left: 20px;\n background: #fff;\n transform: rotate(30deg);\n }\n\n .balloon-donut .sprinkles::after {\n top: 15px;\n right: 12px;\n background: #FFD700;\n transform: rotate(-20deg);\n }\n\n \/* \u2b50 \u661f\u661f\u6c23\u7403 *\/\n .balloon-star {\n width: 50px;\n height: 50px;\n background: transparent !important;\n }\n\n .balloon-star::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 50px;\n background: var(--star-color);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n }\n\n .balloon-star::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n \/* \u984f\u8272\u8b8a\u9ad4 *\/\n .color-pink {\n background: rgba(255, 182, 193, 0.75);\n --heart-color: rgba(255, 182, 193, 0.75);\n --star-color: rgba(255, 182, 193, 0.75);\n }\n\n .color-blue {\n background: rgba(173, 216, 230, 0.75);\n --heart-color: rgba(173, 216, 230, 0.75);\n --star-color: rgba(173, 216, 230, 0.75);\n }\n\n .color-peach {\n background: rgba(255, 218, 185, 0.75);\n --heart-color: rgba(255, 218, 185, 0.75);\n --star-color: rgba(255, 218, 185, 0.75);\n }\n\n .color-lavender {\n background: rgba(221, 180, 221, 0.75);\n --heart-color: rgba(221, 180, 221, 0.75);\n --star-color: rgba(221, 180, 221, 0.75);\n }\n\n .color-mint {\n background: rgba(176, 224, 200, 0.75);\n --heart-color: rgba(176, 224, 200, 0.75);\n --star-color: rgba(176, 224, 200, 0.75);\n }\n\n .color-cream {\n background: rgba(255, 250, 220, 0.75);\n --heart-color: rgba(255, 250, 220, 0.75);\n --star-color: rgba(255, 250, 220, 0.75);\n }\n\n .color-coral {\n background: rgba(255, 160, 140, 0.7);\n --heart-color: rgba(255, 160, 140, 0.7);\n --star-color: rgba(255, 160, 140, 0.7);\n }\n\n .color-gold {\n background: rgba(255, 215, 150, 0.7);\n --heart-color: rgba(255, 215, 150, 0.7);\n --star-color: rgba(255, 215, 150, 0.7);\n }\n\n \/* =========================================\n \u624b\u6a5f\u7248 - \u5b8c\u5168\u81ea\u9069\u61c9\n ========================================= *\/\n @media (max-width: 900px) {\n .quiz-card-container {\n height: 100vh;\n \/* fallback *\/\n height: 100svh;\n \/* \u5c0f\u8996\u7a97\u9ad8\u5ea6\uff0c\u78ba\u4fdd\u5730\u5740\u6b04\u986f\u793a\u6642\u4e5f\u4e0d\u6ea2\u51fa *\/\n padding: 10px 12px 10px 12px;\n display: flex;\n flex-direction: column;\n }\n\n \/* \ud83d\udd25 \u78ba\u4fdd\u9802\u90e8\u5340\u57df\u986f\u793a *\/\n .top-header {\n margin-bottom: 5px;\n flex-shrink: 0;\n display: flex !important;\n }\n\n .progress-container {\n margin-bottom: 5px;\n flex-shrink: 0;\n display: block !important;\n }\n\n .question-area {\n flex-shrink: 0;\n min-height: 50px;\n max-height: 90px;\n padding: 8px 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .question-area.has-transition .question-text {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .question-text {\n font-size: 18px;\n line-height: 1.4;\n padding: 0 5px;\n }\n\n .desktop-minor-transition {\n display: none !important;\n }\n\n .nav-area {\n display: none !important;\n }\n\n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u5927\u8f49\u5834\u6587\u5b57 - \u9632\u6b62\u6ea2\u51fa *\/\n .transition-content {\n max-width: 100%;\n padding: 15px 20px;\n }\n\n .transition-text {\n font-size: 20px;\n line-height: 1.5;\n }\n\n \/* \ud83d\udd25 \u5167\u5bb9\u5340\u57df - \u4f7f\u7528 flex: 1 \u586b\u6eff\u5269\u9918\u7a7a\u9593 *\/\n .content-body {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 5px 0;\n -webkit-overflow-scrolling: touch;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u7db2\u683c - \u5e73\u5206\u7a7a\u9593 *\/\n .options-grid {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: 8px;\n justify-content: center;\n align-items: center;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u5bb9\u5668 - \u81ea\u9069\u61c9\uff0c\u5141\u8a31\u7e2e\u5c0f *\/\n .option-container {\n width: min(85vw, calc((100svh - 200px) \/ 2 - 10px));\n max-height: calc((100svh - 200px) \/ 2 - 10px);\n aspect-ratio: 1 \/ 1;\n max-width: none;\n margin: 0;\n border-radius: 18px;\n flex-shrink: 1;\n min-height: 0;\n }\n\n .option-container:active {\n transform: none;\n border-color: #fff;\n border-width: 2px;\n box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);\n }\n\n .option-img {\n object-fit: cover;\n height: 100%;\n width: 100%;\n }\n\n .option-text {\n font-size: 16px;\n font-weight: 600;\n }\n\n .option-text-overlay {\n padding-bottom: 12px;\n padding-top: 35px;\n }\n\n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u6700\u7d42\u9801 *\/\n .final-mode .transition-content {\n padding: 10px 15px 15px;\n max-width: 100%;\n }\n\n .final-badge {\n width: 85px;\n height: 85px;\n margin-bottom: 6px;\n padding: 10px;\n }\n\n .final-badge::before {\n width: 100px;\n height: 100px;\n }\n\n .final-badge::after {\n width: 115px;\n height: 115px;\n }\n\n .final-mode .final-title {\n font-size: 22px;\n margin-bottom: 2px;\n line-height: 1.2;\n }\n\n .final-subtitle {\n font-size: 12px;\n margin-bottom: 6px;\n }\n\n .final-card {\n padding: 12px 16px;\n margin-bottom: 4px;\n border-radius: 10px;\n }\n\n .final-card-icon {\n width: 32px;\n height: 32px;\n font-size: 16px;\n }\n\n .final-card-title {\n font-size: 14px;\n }\n\n .final-card-text {\n font-size: 13px;\n line-height: 1.55;\n }\n\n .final-mode .transition-text {\n font-size: 13px;\n line-height: 1.6;\n text-align: center;\n }\n\n .final-btn {\n padding: 12px 35px;\n font-size: 14px;\n margin-top: 10px;\n }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403 *\/\n .balloon-base {\n transform: scale(0.85);\n }\n }\n\n \/* \ud83d\udd25 \u5c0f\u87a2\u5e55\u624b\u6a5f *\/\n @media (max-width: 380px) {\n .quiz-card-container {\n padding: 8px 10px 8px 10px;\n }\n\n .question-area {\n min-height: 45px;\n max-height: 75px;\n }\n\n .question-text {\n font-size: 16px;\n }\n\n .option-container {\n border-radius: 14px;\n width: min(88vw, calc((100svh - 180px) \/ 2 - 8px));\n max-height: calc((100svh - 180px) \/ 2 - 8px);\n }\n\n .option-text {\n font-size: 14px;\n }\n\n .final-badge {\n width: 80px;\n height: 80px;\n margin-bottom: 5px;\n padding: 8px;\n }\n\n .final-badge::before {\n width: 95px;\n height: 95px;\n }\n\n .final-badge::after {\n width: 108px;\n height: 108px;\n }\n\n .final-mode .final-title {\n font-size: 20px;\n margin-bottom: 2px;\n }\n\n .final-subtitle {\n font-size: 11px;\n margin-bottom: 5px;\n letter-spacing: 1px;\n }\n\n .final-card {\n padding: 10px 14px;\n margin-bottom: 4px;\n }\n\n .final-card-icon {\n width: 30px;\n height: 30px;\n font-size: 15px;\n border-radius: 8px;\n }\n\n .final-card-title {\n font-size: 13px;\n }\n\n .final-card-text {\n font-size: 12px;\n line-height: 1.5;\n }\n\n .final-mode .transition-text {\n font-size: 12px;\n line-height: 1.5;\n }\n\n .final-btn {\n padding: 10px 30px;\n font-size: 13px;\n margin-top: 8px;\n }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403\u7e2e\u5c0f *\/\n .balloon-base {\n transform: scale(0.8);\n }\n }\n\n \/* \ud83d\udd25 \u8d85\u5c0f\u87a2\u5e55 *\/\n @media (max-width: 320px) {\n .option-container {\n width: min(90vw, calc((100svh - 170px) \/ 2 - 6px));\n max-height: calc((100svh - 170px) \/ 2 - 6px);\n border-radius: 12px;\n }\n\n .question-text {\n font-size: 15px;\n }\n }\n\n \/* =========================================\n \ud83d\udd04 Loading \u756b\u9762\n ========================================= *\/\n .loading-screen {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n z-index: 99999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease;\n }\n\n .loading-screen.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 3px solid rgba(255, 255, 255, 0.2);\n border-top-color: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loading-text {\n margin-top: 20px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 16px;\n letter-spacing: 2px;\n }\n\n \/* \ud83d\udeab \u932f\u8aa4\u756b\u9762 *\/\n .error-screen {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: linear-gradient(180deg, #3d2a2a 0%, #4a3535 50%, #5c4040 100%);\n z-index: 99999;\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 30px;\n }\n\n .error-screen.active {\n display: flex;\n }\n\n .error-icon {\n font-size: 60px;\n margin-bottom: 20px;\n }\n\n .error-title {\n font-size: 24px;\n color: #fff;\n margin-bottom: 15px;\n font-family: var(--font-serif);\n }\n\n .error-message {\n font-size: 16px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.6;\n max-width: 400px;\n }\n \/* =========================================\n \ud83c\udf1f Life Concern \u554f\u5377\u8986\u84cb\u5c64\n ========================================= *\/\n .lc-overlay {\n position: fixed; top: 0; left: 0;\n width: 100vw; height: 100vh; z-index: 9998;\n background: linear-gradient(180deg, #4a3f5c 0%, #5a4a6a 20%, #6d5f7a 45%, #8a7d96 70%, #b8afc4 100%);\n display: none; justify-content: center; align-items: center;\n opacity: 0; transition: opacity 0.6s ease;\n }\n .lc-overlay.active { opacity: 1; }\n\n .lc-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }\n .lc-star {\n position: absolute; background: #fff; border-radius: 50%;\n animation: lcTwinkle var(--d, 3s) infinite ease-in-out;\n animation-delay: var(--dl, 0s);\n }\n @keyframes lcTwinkle {\n 0%,100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.3); }\n }\n\n .lc-container {\n width: 92%; max-width: 580px; max-height: 90dvh;\n display: flex; flex-direction: column;\n position: relative; z-index: 10;\n overflow: hidden;\n }\n\n .lc-step-indicator {\n display: flex; align-items: center; justify-content: center;\n gap: 8px; margin-bottom: 20px; flex-shrink: 0;\n }\n .lc-step-dot {\n width: 10px; height: 10px; border-radius: 50%;\n background: rgba(255,255,255,0.2);\n transition: all 0.4s ease;\n }\n .lc-step-dot.active { background: rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(255,255,255,0.5); }\n .lc-step-dot.done { background: rgba(255,255,255,0.5); }\n .lc-step-line {\n width: 40px; height: 2px;\n background: rgba(255,255,255,0.15); border-radius: 1px;\n transition: background 0.4s ease;\n }\n .lc-step-line.done { background: rgba(255,255,255,0.4); }\n\n .lc-header { text-align: center; flex-shrink: 0; margin-bottom: 6px; }\n .lc-label {\n font-size: 12px; letter-spacing: 3px; color: var(--accent-color);\n text-transform: uppercase; margin-bottom: 10px;\n opacity: 0; transform: translateY(8px); transition: all 0.5s ease 0.1s;\n }\n .lc-label.show { opacity: 1; transform: translateY(0); }\n .lc-title {\n font-family: var(--font-serif);\n font-size: 24px; font-weight: 700;\n color: var(--title-color);\n text-shadow: 0 2px 10px rgba(0,0,0,0.4);\n line-height: 1.4;\n opacity: 0; transform: translateY(10px); transition: all 0.5s ease 0.15s;\n }\n .lc-title.show { opacity: 1; transform: translateY(0); }\n\n .lc-summary {\n display: flex; gap: 8px; justify-content: center;\n flex-wrap: wrap; margin: 10px 0 4px; flex-shrink: 0; min-height: 28px;\n }\n .lc-summary-tag {\n font-size: 12px; padding: 4px 14px;\n background: rgba(255,255,255,0.1);\n border: 1px solid rgba(255,255,255,0.25);\n border-radius: 20px; color: rgba(255,255,255,0.7);\n cursor: pointer; transition: all 0.3s ease;\n backdrop-filter: blur(4px);\n }\n .lc-summary-tag:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }\n\n .lc-scroll {\n flex: 1; overflow-y: auto; overflow-x: hidden;\n padding: 8px 0 20px; -webkit-overflow-scrolling: touch;\n scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;\n }\n .lc-scroll::-webkit-scrollbar { width: 4px; }\n .lc-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }\n\n \/* \u4e3b\u984c 6 \u5bae\u683c *\/\n .lc-topic-grid {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 12px; padding: 4px;\n opacity: 0; transform: translateY(15px); transition: all 0.5s ease 0.2s;\n }\n .lc-topic-grid.show { opacity: 1; transform: translateY(0); }\n\n .lc-topic-card {\n background: rgba(44,44,44,0.4);\n border: 1.5px solid rgba(255,255,255,0.12);\n border-radius: 16px; padding: 20px 12px;\n text-align: center; cursor: pointer;\n transition: all 0.25s ease;\n backdrop-filter: blur(6px);\n position: relative; overflow: hidden;\n }\n .lc-topic-card::before {\n content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 70%);\n pointer-events: none;\n }\n .lc-topic-card:hover {\n border-color: rgba(255,255,255,0.35); transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.3);\n }\n .lc-topic-card:active { transform: scale(0.97); }\n .lc-topic-card.selected {\n border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12);\n box-shadow: 0 0 20px rgba(255,255,255,0.1);\n }\n .lc-topic-icon { font-size: 32px; margin-bottom: 8px; display: block; }\n .lc-topic-name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 1px; }\n\n \/* \u89d2\u8272\u81a0\u56ca *\/\n .lc-role-grid {\n display: flex; flex-wrap: wrap; gap: 10px;\n justify-content: center; padding: 4px;\n opacity: 0; transform: translateY(15px); transition: all 0.5s ease 0.2s;\n }\n .lc-role-grid.show { opacity: 1; transform: translateY(0); }\n .lc-role-pill {\n padding: 12px 22px; background: rgba(44,44,44,0.4);\n border: 1.5px solid rgba(255,255,255,0.12);\n border-radius: 50px; color: rgba(255,255,255,0.85);\n font-size: 15px; font-weight: 500; cursor: pointer;\n transition: all 0.25s ease; backdrop-filter: blur(6px);\n }\n .lc-role-pill:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }\n .lc-role-pill:active { transform: scale(0.95); }\n .lc-role-pill.selected {\n border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15);\n color: #fff; font-weight: 600; box-shadow: 0 0 15px rgba(255,255,255,0.08);\n }\n\n \/* \u56f0\u64fe\u5217\u8868 *\/\n .lc-concern-list {\n display: flex; flex-direction: column; gap: 10px; padding: 4px;\n opacity: 0; transform: translateY(15px); transition: all 0.5s ease 0.2s;\n }\n .lc-concern-list.show { opacity: 1; transform: translateY(0); }\n .lc-concern-item {\n background: rgba(44,44,44,0.4);\n border: 1.5px solid rgba(255,255,255,0.1);\n border-radius: 14px; padding: 16px 18px;\n color: rgba(255,255,255,0.8); font-size: 15px; line-height: 1.5;\n cursor: pointer; transition: all 0.25s ease;\n backdrop-filter: blur(6px);\n display: flex; align-items: center; gap: 12px;\n }\n .lc-concern-item:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); }\n .lc-concern-item:active { transform: scale(0.98); }\n .lc-concern-item.selected {\n border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); color: #fff;\n }\n .lc-concern-radio {\n width: 20px; height: 20px; flex-shrink: 0;\n border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.25s ease;\n }\n .lc-concern-item.selected .lc-concern-radio { border-color: #fff; background: #fff; }\n .lc-concern-item.selected .lc-concern-radio::after { content: '\u2713'; color: #333; font-size: 12px; font-weight: 700; }\n\n .lc-skip-option { border-style: dashed; opacity: 0.7; }\n .lc-skip-option:hover { opacity: 0.9; }\n .lc-skip-option.selected { opacity: 1; }\n\n \/* \u78ba\u8a8d\u6309\u9215 *\/\n .lc-confirm-area {\n flex-shrink: 0; text-align: center; padding: 12px 0 0;\n opacity: 0; transform: translateY(10px);\n transition: all 0.4s ease; pointer-events: none;\n }\n .lc-confirm-area.show { opacity: 1; transform: translateY(0); pointer-events: auto; }\n .lc-confirm-btn {\n display: inline-block; padding: 15px 50px;\n font-size: 17px; font-weight: 600; font-family: var(--font-main);\n color: #fff; border: none; border-radius: 50px; cursor: pointer;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n box-shadow: none;\n transition: all 0.3s ease; letter-spacing: 1px;\n position: relative; overflow: hidden;\n }\n .lc-confirm-btn::before {\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n .lc-confirm-btn:hover { transform: translateY(-3px); box-shadow: none; }\n .lc-confirm-btn:active { transform: scale(0.97); }\n\n \/* \u8fd4\u56de\u6309\u9215 *\/\n .lc-back-btn {\n position: absolute; top: 8px; left: 0;\n background: transparent; border: none;\n color: rgba(255,255,255,0.45); font-size: 14px;\n cursor: pointer; padding: 6px 12px; z-index: 20;\n transition: all 0.3s ease; font-family: var(--font-main);\n display: none;\n }\n .lc-back-btn.show { display: flex; align-items: center; gap: 4px; }\n .lc-back-btn:hover { color: rgba(255,255,255,0.8); }\n\n .lc-hidden { display: none !important; }\n\n @media (max-width: 500px) {\n .lc-title { font-size: 20px; }\n .lc-topic-card { padding: 16px 10px; }\n .lc-topic-icon { font-size: 28px; }\n .lc-topic-name { font-size: 14px; }\n .lc-role-pill { padding: 10px 18px; font-size: 14px; }\n .lc-concern-item { padding: 14px 14px; font-size: 14px; }\n .lc-confirm-btn { padding: 14px 40px; font-size: 16px; }\n }\n @media (max-height: 700px) {\n .lc-title { font-size: 19px; }\n .lc-topic-card { padding: 14px 10px; }\n .lc-topic-icon { font-size: 26px; margin-bottom: 4px; }\n .lc-concern-item { padding: 12px 14px; }\n }\n <\/style>\n<\/head>\n\n<body>\n\n \n <div class=\"loading-screen\" id=\"loadingScreen\">\n <div class=\"loading-spinner\"><\/div>\n <div class=\"loading-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e17\u0e14\u0e2a\u0e2d\u0e1a...<\/div>\n <\/div>\n\n \n <div class=\"error-screen\" id=\"errorScreen\">\n <div class=\"error-icon\">\u26a0\ufe0f<\/div>\n <div class=\"error-title\" id=\"errorTitle\">\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e25\u0e49\u0e21\u0e40\u0e2b\u0e25\u0e27<\/div>\n <div class=\"error-message\" id=\"errorMessage\">\u0e42\u0e1b\u0e23\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07<\/div>\n <\/div>\n\n <div class=\"starry-background-wrapper\" id=\"bgWrapper\">\n <div class=\"stars\" id=\"starsContainer\"><\/div>\n <div class=\"stars\" id=\"meteorsContainer\"><\/div>\n <\/div>\n\n <div class=\"iframe-overlay\" id=\"iframeOverlay\">\n <div class=\"iframe-loader\" id=\"iframeLoader\">\n <div class=\"iframe-spinner\"><\/div>\n <div class=\"iframe-loader-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/div>\n <\/div>\n <iframe id=\"embeddedFrame\" src=\"about:blank\" allow=\"camera; microphone; fullscreen\" allowfullscreen><\/iframe>\n <\/div>\n\n \n <div class=\"lc-overlay\" id=\"lcOverlay\">\n <div class=\"lc-stars\" id=\"lcStars\"><\/div>\n <div class=\"lc-container\">\n <button class=\"lc-back-btn\" id=\"lcBackBtn\" onclick=\"lcGoBack()\">\u2190 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32<\/button>\n <div class=\"lc-step-indicator\" style=\"margin-top: 8px;\">\n <div class=\"lc-step-dot active\" id=\"lcDot1\"><\/div>\n <div class=\"lc-step-line\" id=\"lcLine1\"><\/div>\n <div class=\"lc-step-dot\" id=\"lcDot2\"><\/div>\n <div class=\"lc-step-line\" id=\"lcLine2\"><\/div>\n <div class=\"lc-step-dot\" id=\"lcDot3\"><\/div>\n <\/div>\n <div class=\"lc-header\">\n <div class=\"lc-label show\" id=\"lcLabel\">\u6700\u5f8c\u4e00\u500b\u554f\u984c<\/div>\n <div class=\"lc-title show\" id=\"lcTitle\">\u4f60\u76ee\u524d\u751f\u6d3b\u4e2d\u6700\u5728\u610f\u7684\u4e8b\uff1f<\/div>\n <\/div>\n <div class=\"lc-summary\" id=\"lcSummary\"><\/div>\n <div class=\"lc-scroll\" id=\"lcScroll\">\n <div class=\"lc-topic-grid show\" id=\"lcStep1\">\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(0)\"><span class=\"lc-topic-icon\">\ud83d\udc95<\/span><span class=\"lc-topic-name\">\u611f\u60c5\u95dc\u4fc2<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(1)\"><span class=\"lc-topic-icon\">\ud83d\udcbc<\/span><span class=\"lc-topic-name\">\u8077\u6daf\u767c\u5c55<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(2)\"><span class=\"lc-topic-icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/span><span class=\"lc-topic-name\">\u5bb6\u5ead\u95dc\u4fc2<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(3)\"><span class=\"lc-topic-icon\">\ud83d\udc65<\/span><span class=\"lc-topic-name\">\u793e\u4ea4\u4eba\u969b<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(4)\"><span class=\"lc-topic-icon\">\ud83d\udcb0<\/span><span class=\"lc-topic-name\">\u91d1\u9322\u7406\u8ca1<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(5)\"><span class=\"lc-topic-icon\">\ud83d\udcda<\/span><span class=\"lc-topic-name\">\u5b78\u696d\u5347\u5b78<\/span><\/div>\n <\/div>\n <div class=\"lc-role-grid lc-hidden\" id=\"lcStep2\"><\/div>\n <div class=\"lc-concern-list lc-hidden\" id=\"lcStep3\"><\/div>\n <\/div>\n <div class=\"lc-confirm-area\" id=\"lcConfirmArea\">\n <button class=\"lc-confirm-btn\" onclick=\"lcConfirm()\">\u78ba\u8a8d\u9001\u51fa \u2726<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"transition-layer notranslate skiptranslate\" id=\"transitionLayer\" translate=\"no\"\n data-no-translation=\"true\">\n <div class=\"balloon-container\" id=\"balloonContainer\"><\/div>\n <canvas id=\"fireworksCanvas\"><\/canvas>\n <div class=\"transition-content\">\n <div class=\"transition-chapter\" id=\"transChapter\">CHAPTER<\/div>\n <div class=\"transition-text\" id=\"transText\"><\/div>\n <button class=\"final-btn\" id=\"finalBtn\" onclick=\"goToFinalStep()\">\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65<\/button>\n <\/div>\n <div class=\"tap-hint\" id=\"tapHint\">\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c<\/div>\n <\/div>\n\n <div id=\"immersive-quiz-wrapper\">\n <div class=\"quiz-card-container\">\n\n <div class=\"top-header\">\n <div class=\"chapter-pill\">\n <span id=\"mobileBackBtn\" onclick=\"prevQuestion()\"\n style=\"display:none; padding-right:8px; margin-right:8px; border-right:1px solid rgba(255,255,255,0.3); cursor:pointer;\">\u2190<\/span>\n <span id=\"chapterBadge\">\u0e1a\u0e17\u0e17\u0e35\u0e48 1<\/span>\n <span style=\"opacity: 0.5; padding: 0 5px;\">|<\/span>\n <span id=\"questionCounter\">1\/21<\/span>\n <\/div>\n \n <div class=\"globe-btn lang-switcher\" id=\"globeBtn\" role=\"button\" tabindex=\"0\"><span>\ud83c\udf0f<\/span><\/div>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-track\">\n <div class=\"progress-bar-fill\" id=\"progressBar\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"question-area\" id=\"questionArea\">\n <div class=\"desktop-minor-transition notranslate skiptranslate\" id=\"desktopMinorText\" translate=\"no\"\n data-no-translation=\"true\"><\/div>\n <div class=\"question-text\" id=\"qTitle\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...<\/div>\n <\/div>\n\n <div class=\"content-body\">\n <div class=\"fade-wrapper\" id=\"questionBox\">\n <div class=\"options-grid\">\n <div class=\"option-container\" onclick=\"selectOption('A')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgA\">\n <div class=\"option-text-overlay\">\n <div class=\"option-text\" id=\"textA\"><\/div>\n <\/div>\n <\/div>\n <div class=\"option-container\" onclick=\"selectOption('B')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgB\">\n <div class=\"option-text-overlay\">\n <div class=\"option-text\" id=\"textB\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"nav-area\">\n <button class=\"nav-btn hidden\" id=\"prevBtn\" onclick=\"prevQuestion()\">\n <span>\u2190<\/span> \u0e04\u0e33\u0e16\u0e32\u0e21\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\udee1\ufe0f \u4fdd\u8b77\u4ee3\u78bc - \u66ab\u6642\u95dc\u9589\uff08\u9664\u932f\u7528\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/*\n (function(){\n \/\/ \ud83d\udeab Console \u8b66\u544a\n const warningStyle = 'font-size:20px;color:red;font-weight:bold;';\n console.log('%c\u26a0\ufe0f \u8b66\u544a\uff1a\u5075\u6e2c\u5230\u958b\u767c\u8005\u5de5\u5177 \u26a0\ufe0f', warningStyle);\n console.log('%c\u6b64\u9801\u9762\u53d7\u5230\u4fdd\u8b77\uff0c\u8acb\u52ff\u5617\u8a66\u67e5\u770b\u6216\u8907\u88fd\u4ee3\u78bc', 'font-size:14px;color:orange;');\n\n \/\/ \ud83d\udd12 \u7121\u9650 debugger\uff08\u8b93\u958b\u767c\u8005\u5de5\u5177\u5361\u4f4f\uff09\n setInterval(function(){\n (function(a){return(function(a){return(Function('Function(arguments[0]+\"'+a+'\")()'))})(a)})('bugger')('de');\n }, 50);\n\n \/\/ \ud83d\udd0d \u5075\u6e2c\u958b\u767c\u8005\u5de5\u5177\n let devToolsOpen = false;\n const threshold = 160;\n\n const detectDevTools = function(){\n const widthThreshold = window.outerWidth - window.innerWidth > threshold;\n const heightThreshold = window.outerHeight - window.innerHeight > threshold;\n\n if(widthThreshold || heightThreshold){\n if(!devToolsOpen){\n devToolsOpen = true;\n \/\/ \ud83d\udca5 \u6e05\u7a7a\u7db2\u9801\n document.body.innerHTML = '<div style=\"display:flex;justify-content:center;align-items:center;height:100vh;background:#000;color:#fff;font-size:20px;\">\u26a0\ufe0f \u5b58\u53d6\u88ab\u62d2\u7d55<\/div>';\n }\n }\n };\n\n setInterval(detectDevTools, 500);\n window.addEventListener('resize', detectDevTools);\n\n \/\/ \ud83d\udeab \u7981\u6b62\u53f3\u9375\n document.addEventListener('contextmenu', function(e){ e.preventDefault(); });\n\n \/\/ \ud83d\udeab \u7981\u6b62\u5e38\u7528\u5feb\u6377\u9375 (F12, Ctrl+Shift+I, Ctrl+U)\n document.addEventListener('keydown', function(e){\n if(e.key === 'F12' ||\n (e.ctrlKey && e.shiftKey && e.key === 'I') ||\n (e.ctrlKey && e.shiftKey && e.key === 'J') ||\n (e.ctrlKey && e.key === 'U')){\n e.preventDefault();\n return false;\n }\n });\n })();\n *\/\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udf10 API \u8a2d\u5b9a\u8207\u52d5\u614b\u8f09\u5165\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n const API_BASE = 'https:\/\/maybeits.me\/wp-json\/ragic-proxy\/v1';\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API \u7aef\u9ede\n const API_QUIZ_BY_CODE = `${API_BASE}\/quiz-by-code`;\n\n \/\/ \u89d2\u8272 \u2192 API \u8def\u5f91\u5c0d\u61c9\uff08\u5099\u7528\uff09\n const roleToPath = {\n 'F1': '\/1', 'F2': '\/2', 'F3': '\/3', 'F4': '\/4', 'F5': '\/5', 'F6': '\/6',\n 'M1': '\/7', 'M2': '\/8', 'M3': '\/9', 'M4': '\/10', 'M5': '\/11', 'M6': '\/12',\n 'ALL': '\/0'\n };\n\n \/\/ \u4e3b\u984c\u5206\u985e \u2192 \u8996\u89ba\u6a23\u5f0f\uff08Hardcode\uff09\n const chapterStyles = {\n \"\u65e5\u5e38\u7684\u8d77\u9ede\": {\n colors: [\"#5e4b49\", \"#695351\", \"#867b78\", \"#a09f9b\", \"#d2cbc9\"],\n fireworkHues: [30, 40, 50] \/\/ \u6696\u6a58\u91d1\n },\n \"\u6311\u6230\u8207\u5192\u96aa\": {\n colors: [\"#323836\", \"#566367\", \"#7B8E95\", \"#A4A9A9\", \"#CEC5BE\"],\n fireworkHues: [180, 200, 220] \/\/ \u51b7\u9752\u85cd\n },\n \"\u5167\u5fc3\u7684\u8a66\u7149\": {\n colors: [\"#020202\", \"#392B27\", \"#715349\", \"#9F8882\", \"#CDBEBB\"],\n fireworkHues: [0, 20, 340] \/\/ \u6df1\u7d05\u73ab\u7470\n },\n \"\u771f\u5be6\u7684\u6b78\u4f86\": {\n colors: [\"#2F2F2F\", \"#3B4F5E\", \"#486F8E\", \"#96AAB9\", \"#E5E5E5\"],\n fireworkHues: [260, 280, 300] \/\/ \u795e\u79d8\u7d2b\n }\n };\n\n \/\/ \u52d5\u614b\u8cc7\u6599\u5bb9\u5668\uff08\u5f9e API \u8f09\u5165\u5f8c\u586b\u5145\uff09\n let imageSources = {};\n let chapterRanges = [];\n let fireworkColors = {};\n let transitions = {};\n let quizData = [];\n\n \/\/ \ud83c\udf10 \u591a\u8a9e\u8a00\u652f\u63f4\n const SUPPORTED_LANGS = ['zh-hk', 'zh-cn', 'en', 'kr', 'jp', 'th', 'vi', 'br', 'id'];\n\n \/\/ UI \u6587\u5b57\u7ffb\u8b6f\u5b57\u5178\n const UI_TRANSLATIONS = {\n '': { \/\/ \u7e41\u9ad4\u4e2d\u6587 TW\uff08\u9810\u8a2d\uff09\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u7684\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u611f\u8b1d\u4f60\u7684\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u5011\u62b5\u9054\u4e86\u9019\u88e1\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5982\u6b64\u771f\u8aa0\u5730\u8207\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u4e86\u9019\u8d9f\u63a2\u7d22\u3002\u9019\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u7167\u7247',\n nextStepText: '\u70ba\u4e86\u8b93\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u7167\u7247\uff0c\u7528\u65bc\u751f\u6210\u5c08\u5c6c\u7684<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u662f\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u7167\u7247\u5f8c\u7d04\u9700 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u7522\u51fa\u7d50\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u9ede\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u6c92\u6709\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-hk': { \/\/ \u7e41\u9ad4\u4e2d\u6587 HK\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u7dca...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u64b3\u4efb\u610f\u4f4d\u7f6e\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u5587\uff0c\u53bb\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u5605\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u591a\u8b1d\u4f60\u5605\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u54cb\u5230\u5497\u5462\u5ea6\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5481\u771f\u8aa0\u5481\u540c\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u5497\u5462\u8d9f\u63a2\u7d22\u3002\u5462\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u4fc2\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u76f8\u7247',\n nextStepText: '\u70ba\u5497\u4ee4\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u76f8\u7247\uff0c\u7528\u569f\u751f\u6210\u5c08\u5c6c\u5605<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u4fc2\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u76f8\u7247\u5f8c\u5927\u6982\u9700\u8981 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u5148\u51fa\u5230\u7d50\u679c\u3002\u7f8e\u597d\u5605\u5622\uff0c\u503c\u5f97\u7b49\u4e00\u9663\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u5187\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-cn': { \/\/ \u7b80\u4f53\u4e2d\u6587\n loading: '\u52a0\u8f7d\u6d4b\u9a8c\u4e2d...',\n questionLoading: '\u9898\u76ee\u52a0\u8f7d\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u9898',\n tapToContinue: '\u70b9\u51fb\u4efb\u610f\u5904\u7ee7\u7eed',\n ready: '\u6211\u51c6\u5907\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u51c6\u5907\u9886\u53d6\u4f60\u7684\u4e13\u5c5e\u7075\u9b42\u62a5\u544a \u2500\u2500',\n thanks: '\u611f\u8c22\u4f60\u7684\u575a\u6301',\n thanksText: '\u7ec8\u4e8e\uff0c\u6211\u4eec\u62b5\u8fbe\u4e86\u8fd9\u91cc\u3002\u6df1\u6df1\u611f\u8c22\u4f60\u5982\u6b64\u771f\u8bda\u5730\u4e0e\u81ea\u5df1\u5bf9\u8bdd\uff0c\u5b8c\u6210\u4e86\u8fd9\u8d9f\u63a2\u7d22\u3002\u8fd9\u4efd\u575a\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u79cd\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u4f20\u7167\u7247',\n nextStepText: '\u4e3a\u4e86\u8ba9\u62a5\u544a\u771f\u6b63\u5c5e\u4e8e\u4f60\uff0c\u4e0b\u4e00\u9636\u6bb5\u4f1a\u9080\u8bf7\u4f60\u63d0\u4f9b\u4e00\u5f20\u4e2a\u4eba\u7167\u7247\uff0c\u7528\u4e8e\u751f\u6210\u4e13\u5c5e\u7684<span class=\"final-highlight\">\"Q\u7248\u60c5\u5883\u56fe\u7247\"<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u4e3a\u662f\u6df1\u5ea6\u5b9a\u5236\u5316\u89e3\u6790\uff0c\u4e0a\u4f20\u7167\u7247\u540e\u7ea6\u9700 <span class=\"final-highlight\">15 \u5206\u949f<\/span> \u4ea7\u51fa\u7ed3\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u70b9\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8d39\u9886\u53d6\u7b80\u6613\u7248\u62a5\u544a',\n paidHint: '( \u6b64\u4e3a\u4ed8\u8d39\u89e3\u9501\u5b9a\u5236\u5316\u62a5\u544a\u4e13\u5c5e\u6d41\u7a0b\uff0c\u514d\u8d39\u7248\u6ca1\u6709\u4e13\u5c5e\u60c5\u5883\u56fe\u7247 )'\n },\n 'en': { \/\/ English\n loading: 'Loading quiz...',\n questionLoading: 'Loading question...',\n prevQuestion: 'Previous',\n tapToContinue: 'Tap anywhere to continue',\n ready: \"I'm ready, let's go!\",\n congrats: 'Congratulations!',\n soulReport: '\u2500\u2500 Ready to receive your soul report \u2500\u2500',\n thanks: 'Thank you for your perseverance',\n thanksText: \"Finally, we've arrived here. Thank you for such an honest dialogue with yourself, completing this journey of exploration. This perseverance itself is a form of strength.\",\n nextStep: 'Next: Upload Photo',\n nextStepText: 'To make the report truly yours, the next step will invite you to provide a personal photo to generate your exclusive <span class=\"final-highlight\">\"Q-style avatar\"<\/span>.',\n reminder: 'Reminder',\n reminderText: 'As this is a deeply customized analysis, it takes about <span class=\"final-highlight\">15 minutes<\/span> to generate results after uploading. Good things are worth the wait.',\n goBack: '\u2190 Go back to edit answers',\n freeReport: 'Get Free Basic Report',\n paidHint: '( This is for paid customized reports only. Free version does not include personalized scene images )'\n },\n 'kr': { \/\/ \ud55c\uad6d\uc5b4\n loading: '\ud14c\uc2a4\ud2b8 \ub85c\ub529 \uc911...',\n questionLoading: '\uc9c8\ubb38 \ub85c\ub529 \uc911...',\n prevQuestion: '\uc774\uc804',\n tapToContinue: '\uc544\ubb34 \uacf3\uc774\ub098 \ud0ed\ud558\uc5ec \uacc4\uc18d',\n ready: '\uc900\ube44\ub410\uc5b4\uc694, \ub2e4\uc74c\uc73c\ub85c!',\n congrats: '\ucd95\ud558\ud569\ub2c8\ub2e4!',\n soulReport: '\u2500\u2500 \uc601\ud63c \ubcf4\uace0\uc11c\ub97c \ubc1b\uc744 \uc900\ube44\uac00 \ub410\uc5b4\uc694 \u2500\u2500',\n thanks: '\ub048\uae30\uc5d0 \uac10\uc0ac\ub4dc\ub824\uc694',\n thanksText: '\ub4dc\ub514\uc5b4 \uc5ec\uae30\uae4c\uc9c0 \uc654\uc5b4\uc694. \uc790\uc2e0\uacfc\uc758 \uc9c4\uc194\ud55c \ub300\ud654\ub97c \ud1b5\ud574 \uc774 \ud0d0\ud5d8\uc744 \uc644\ub8cc\ud574 \uc8fc\uc154\uc11c \uac10\uc0ac\ud569\ub2c8\ub2e4. \uc774 \ub048\uae30 \uc790\uccb4\uac00 \ud798\uc774\uc5d0\uc694.',\n nextStep: '\ub2e4\uc74c: \uc0ac\uc9c4 \uc5c5\ub85c\ub4dc',\n nextStepText: '\ubcf4\uace0\uc11c\ub97c \uc9c4\uc815\uc73c\ub85c \ub2f9\uc2e0\uc758 \uac83\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574, \ub2e4\uc74c \ub2e8\uacc4\uc5d0\uc11c \uac1c\uc778 \uc0ac\uc9c4\uc744 \uc81c\uacf5\ud558\uc5ec \uc804\uc6a9 <span class=\"final-highlight\">\"Q\ubc84\uc804 \uc544\ubc14\ud0c0\"<\/span>\ub97c \uc0dd\uc131\ud574\uc694.',\n reminder: '\uc54c\ub9bc',\n reminderText: '\uc2ec\uce35 \ub9de\ucda4 \ubd84\uc11d\uc774\ubbc0\ub85c \uc5c5\ub85c\ub4dc \ud6c4 \uacb0\uacfc \uc0dd\uc131\uc5d0 \uc57d <span class=\"final-highlight\">15\ubd84<\/span>\uc774 \uc18c\uc694\ub3fc\uc694. \uc88b\uc740 \uac83\uc740 \uae30\ub2e4\ub9b4 \uac00\uce58\uac00 \uc788\uc5b4\uc694.',\n goBack: '\u2190 \ub2f5\ubcc0 \uc218\uc815\ud558\ub7ec \ub3cc\uc544\uac00\uae30',\n freeReport: '\ubb34\ub8cc \uae30\ubcf8 \ubcf4\uace0\uc11c \ubc1b\uae30',\n paidHint: '( \uc720\ub8cc \ub9de\ucda4\ud615 \ubcf4\uace0\uc11c \uc804\uc6a9 \uacfc\uc815\uc785\ub2c8\ub2e4. \ubb34\ub8cc \ubc84\uc804\uc5d0\ub294 \ub9de\ucda4 \uc774\ubbf8\uc9c0\uac00 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4 )'\n },\n 'jp': { \/\/ \u65e5\u672c\u8a9e\n loading: '\u30af\u30a4\u30ba\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n questionLoading: '\u8cea\u554f\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n prevQuestion: '\u524d\u3078',\n tapToContinue: '\u30bf\u30c3\u30d7\u3057\u3066\u7d9a\u3051\u308b',\n ready: '\u6e96\u5099\u5b8c\u4e86\u3001\u6b21\u3078\u9032\u3080\uff01',\n congrats: '\u304a\u3081\u3067\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01',\n soulReport: '\u2500\u2500 \u9b42\u306e\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f \u2500\u2500',\n thanks: '\u3042\u306a\u305f\u306e\u5fcd\u8010\u306b\u611f\u8b1d',\n thanksText: '\u3064\u3044\u306b\u3053\u3053\u307e\u3067\u6765\u307e\u3057\u305f\u3002\u81ea\u5206\u81ea\u8eab\u3068\u306e\u6b63\u76f4\u306a\u5bfe\u8a71\u3092\u901a\u3058\u3066\u3001\u3053\u306e\u63a2\u6c42\u306e\u65c5\u3092\u5b8c\u4e86\u3057\u3066\u3044\u305f\u3060\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u3053\u306e\u5fcd\u8010\u529b\u81ea\u4f53\u304c\u529b\u3067\u3059\u3002',\n nextStep: '\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u5199\u771f\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9',\n nextStepText: '\u30ec\u30dd\u30fc\u30c8\u3092\u672c\u5f53\u306b\u3042\u306a\u305f\u306e\u3082\u306e\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u500b\u4eba\u306e\u5199\u771f\u3092\u63d0\u4f9b\u3057\u3066\u3001\u5c02\u7528\u306e<span class=\"final-highlight\">\u300cQ\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30d0\u30bf\u30fc\u300d<\/span>\u3092\u751f\u6210\u3057\u307e\u3059\u3002',\n reminder: '\u304a\u77e5\u3089\u305b',\n reminderText: '\u6df1\u3044\u30ab\u30b9\u30bf\u30e0\u5206\u6790\u306e\u305f\u3081\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306e\u7d50\u679c\u751f\u6210\u306b\u306f\u7d04<span class=\"final-highlight\">15\u5206<\/span>\u304b\u304b\u308a\u307e\u3059\u3002\u826f\u3044\u3082\u306e\u306b\u306f\u5f85\u3064\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002',\n goBack: '\u2190 \u56de\u7b54\u3092\u7de8\u96c6\u3059\u308b',\n freeReport: '\u7121\u6599\u3067\u7c21\u6613\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b',\n paidHint: '( \u3053\u3061\u3089\u306f\u6709\u6599\u30ab\u30b9\u30bf\u30e0\u30ec\u30dd\u30fc\u30c8\u5c02\u7528\u3067\u3059\u3002\u7121\u6599\u7248\u306b\u306f\u5c02\u7528\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u306f\u542b\u307e\u308c\u307e\u305b\u3093 )'\n },\n 'th': { \/\/ \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\n loading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a...',\n questionLoading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...',\n prevQuestion: '\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32',\n tapToContinue: '\u0e41\u0e15\u0e30\u0e17\u0e35\u0e48\u0e43\u0e14\u0e01\u0e47\u0e44\u0e14\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d',\n ready: '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e49\u0e27 \u0e44\u0e1b\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22!',\n congrats: '\u0e22\u0e34\u0e19\u0e14\u0e35\u0e14\u0e49\u0e27\u0e22!',\n soulReport: '\u2500\u2500 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0d\u0e0d\u0e32\u0e13\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u2500\u2500',\n thanks: '\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n thanksText: '\u0e43\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e40\u0e23\u0e32\u0e01\u0e47\u0e21\u0e32\u0e16\u0e36\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e17\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e08\u0e23\u0e34\u0e07\u0e43\u0e08\u0e01\u0e31\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e1e\u0e25\u0e31\u0e07\u0e43\u0e19\u0e15\u0e31\u0e27\u0e21\u0e31\u0e19\u0e40\u0e2d\u0e07',\n nextStep: '\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b: \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e',\n nextStepText: '\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e41\u0e17\u0e49\u0e08\u0e23\u0e34\u0e07 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e08\u0e30\u0e40\u0e0a\u0e34\u0e0d\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07<span class=\"final-highlight\">\"\u0e2d\u0e27\u0e32\u0e15\u0e32\u0e23\u0e4c Q\"<\/span>\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n reminder: '\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33',\n reminderText: '\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 <span class=\"final-highlight\">15 \u0e19\u0e32\u0e17\u0e35<\/span> \u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14 \u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e41\u0e01\u0e48\u0e01\u0e32\u0e23\u0e23\u0e2d\u0e04\u0e2d\u0e22',\n goBack: '\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e04\u0e33\u0e15\u0e2d\u0e1a',\n freeReport: '\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e1f\u0e23\u0e35',\n paidHint: '( \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e19\u0e35\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19 \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e1f\u0e23\u0e35\u0e44\u0e21\u0e48\u0e21\u0e35\u0e20\u0e32\u0e1e\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e1a\u0e38\u0e04\u0e04\u0e25 )'\n },\n 'vi': { \/\/ Ti\u1ebfng Vi\u1ec7t\n loading: '\u0110ang t\u1ea3i b\u00e0i ki\u1ec3m tra...',\n questionLoading: '\u0110ang t\u1ea3i c\u00e2u h\u1ecfi...',\n prevQuestion: 'Tr\u01b0\u1edbc',\n tapToContinue: 'Nh\u1ea5n b\u1ea5t k\u1ef3 \u0111\u00e2u \u0111\u1ec3 ti\u1ebfp t\u1ee5c',\n ready: 'T\u00f4i \u0111\u00e3 s\u1eb5n s\u00e0ng, ti\u1ebfp t\u1ee5c n\u00e0o!',\n congrats: 'Ch\u00fac m\u1eebng!',\n soulReport: '\u2500\u2500 S\u1eb5n s\u00e0ng nh\u1eadn b\u00e1o c\u00e1o t\u00e2m h\u1ed3n c\u1ee7a b\u1ea1n \u2500\u2500',\n thanks: 'C\u1ea3m \u01a1n s\u1ef1 ki\u00ean tr\u00ec c\u1ee7a b\u1ea1n',\n thanksText: 'Cu\u1ed1i c\u00f9ng, ch\u00fang ta \u0111\u00e3 \u0111\u1ebfn \u0111\u00e2y. C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 th\u00e0nh th\u1eadt \u0111\u1ed1i tho\u1ea1i v\u1edbi ch\u00ednh m\u00ecnh. S\u1ef1 ki\u00ean tr\u00ec n\u00e0y ch\u00ednh l\u00e0 s\u1ee9c m\u1ea1nh.',\n nextStep: 'B\u01b0\u1edbc ti\u1ebfp theo: T\u1ea3i \u1ea3nh l\u00ean',\n nextStepText: '\u0110\u1ec3 b\u00e1o c\u00e1o th\u1ef1c s\u1ef1 thu\u1ed9c v\u1ec1 b\u1ea1n, b\u01b0\u1edbc ti\u1ebfp theo s\u1ebd m\u1eddi b\u1ea1n cung c\u1ea5p \u1ea3nh c\u00e1 nh\u00e2n \u0111\u1ec3 t\u1ea1o <span class=\"final-highlight\">\"avatar Q\"<\/span> \u0111\u1ed9c quy\u1ec1n.',\n reminder: 'L\u01b0u \u00fd',\n reminderText: 'V\u00ec \u0111\u00e2y l\u00e0 ph\u00e2n t\u00edch t\u00f9y ch\u1ec9nh s\u00e2u, s\u1ebd m\u1ea5t kho\u1ea3ng <span class=\"final-highlight\">15 ph\u00fat<\/span> \u0111\u1ec3 t\u1ea1o k\u1ebft qu\u1ea3 sau khi t\u1ea3i l\u00ean. Nh\u1eefng \u0111i\u1ec1u t\u1ed1t \u0111\u1eb9p \u0111\u00e1ng \u0111\u1ec3 ch\u1edd \u0111\u1ee3i.',\n goBack: '\u2190 Quay l\u1ea1i ch\u1ec9nh s\u1eeda c\u00e2u tr\u1ea3 l\u1eddi',\n freeReport: 'Nh\u1eadn b\u00e1o c\u00e1o c\u01a1 b\u1ea3n mi\u1ec5n ph\u00ed',\n paidHint: '( \u0110\u00e2y l\u00e0 quy tr\u00ecnh d\u00e0nh cho b\u00e1o c\u00e1o t\u00f9y ch\u1ec9nh tr\u1ea3 ph\u00ed. B\u1ea3n mi\u1ec5n ph\u00ed kh\u00f4ng c\u00f3 h\u00ecnh \u1ea3nh c\u00e1 nh\u00e2n h\u00f3a )'\n },\n 'br': { \/\/ Portugu\u00eas\n loading: 'Carregando quiz...',\n questionLoading: 'Carregando pergunta...',\n prevQuestion: 'Anterior',\n tapToContinue: 'Toque em qualquer lugar para continuar',\n ready: 'Estou pronto, vamos l\u00e1!',\n congrats: 'Parab\u00e9ns!',\n soulReport: '\u2500\u2500 Pronto para receber seu relat\u00f3rio da alma \u2500\u2500',\n thanks: 'Obrigado pela sua perseveran\u00e7a',\n thanksText: 'Finalmente chegamos aqui. Obrigado por um di\u00e1logo t\u00e3o honesto consigo mesmo. Essa perseveran\u00e7a em si \u00e9 uma for\u00e7a.',\n nextStep: 'Pr\u00f3ximo: Enviar Foto',\n nextStepText: 'Para tornar o relat\u00f3rio verdadeiramente seu, o pr\u00f3ximo passo convidar\u00e1 voc\u00ea a fornecer uma foto pessoal para gerar seu <span class=\"final-highlight\">\"avatar Q\"<\/span> exclusivo.',\n reminder: 'Lembrete',\n reminderText: 'Como esta \u00e9 uma an\u00e1lise profundamente personalizada, levar\u00e1 cerca de <span class=\"final-highlight\">15 minutos<\/span> para gerar os resultados ap\u00f3s o upload. Coisas boas valem a espera.',\n goBack: '\u2190 Voltar para editar respostas',\n freeReport: 'Receba o Relat\u00f3rio B\u00e1sico Gr\u00e1tis',\n paidHint: '( Este \u00e9 o fluxo exclusivo do relat\u00f3rio personalizado pago. A vers\u00e3o gratuita n\u00e3o inclui imagens personalizadas )'\n },\n 'id': { \/\/ Bahasa Indonesia\n loading: 'Memuat kuis...',\n questionLoading: 'Memuat pertanyaan...',\n prevQuestion: 'Sebelumnya',\n tapToContinue: 'Ketuk di mana saja untuk melanjutkan',\n ready: 'Saya siap, ayo lanjut!',\n congrats: 'Selamat!',\n soulReport: '\u2500\u2500 Siap menerima laporan jiwa Anda \u2500\u2500',\n thanks: 'Terima kasih atas ketekunan Anda',\n thanksText: 'Akhirnya, kita sampai di sini. Terima kasih atas dialog yang jujur dengan diri sendiri. Ketekunan ini sendiri adalah kekuatan.',\n nextStep: 'Selanjutnya: Unggah Foto',\n nextStepText: 'Untuk membuat laporan benar-benar milik Anda, langkah selanjutnya akan mengundang Anda untuk memberikan foto pribadi untuk menghasilkan <span class=\"final-highlight\">\"avatar Q\"<\/span> eksklusif Anda.',\n reminder: 'Pengingat',\n reminderText: 'Karena ini adalah analisis yang sangat disesuaikan, butuh sekitar <span class=\"final-highlight\">15 menit<\/span> untuk menghasilkan hasil setelah mengunggah. Hal-hal baik layak ditunggu.',\n goBack: '\u2190 Kembali untuk mengedit jawaban',\n freeReport: 'Dapatkan Laporan Dasar Gratis',\n paidHint: '( Ini adalah alur khusus laporan kustom berbayar. Versi gratis tidak termasuk gambar personal )'\n }\n };\n\n \/\/ \u5075\u6e2c\u7576\u524d\u8a9e\u8a00\uff08\u5f9e URL \u8def\u5f91\u6216 ?lang= \u53c3\u6578\uff09\n function getCurrentLang() {\n \/\/ \ud83e\uddea \u6e2c\u8a66\u7528\uff1a\u512a\u5148\u8b80\u53d6 ?lang= \u53c3\u6578\n const urlParams = new URLSearchParams(window.location.search);\n const langParam = urlParams.get('lang');\n if (langParam && SUPPORTED_LANGS.includes(langParam)) {\n return langParam;\n }\n\n \/\/ \u6b63\u5f0f\u74b0\u5883\uff1a\u5f9e URL \u8def\u5f91\u5075\u6e2c\n const path = window.location.pathname;\n const firstSegment = path.split('\/').filter(s => s)[0] || '';\n return SUPPORTED_LANGS.includes(firstSegment) ? firstSegment : '';\n }\n\n \/\/ \u53d6\u5f97 UI \u7ffb\u8b6f\u6587\u5b57\n function t(key) {\n const translations = UI_TRANSLATIONS[currentLang] || UI_TRANSLATIONS[''];\n return translations[key] || UI_TRANSLATIONS[''][key] || key;\n }\n\n \/\/ \u53d6\u5f97\u591a\u8a9e\u8a00\u6b04\u4f4d\u503c\n function getLocalizedField(field, lang) {\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u7269\u4ef6\uff08\u591a\u8a9e\u8a00\u683c\u5f0f\uff1a{ \"\": \"...\", \"en\": \"...\", ... }\uff09\n if (typeof field === 'object' && field !== null && !Array.isArray(field)) {\n \/\/ \u512a\u5148\u53d6\u7576\u524d\u8a9e\u8a00\uff0c\u82e5\u7121\u5247\u53d6\u7e41\u4e2d\u7248\u672c\uff08\u7a7a\u5b57\u4e32 key\uff09\n return field[lang] !== undefined ? field[lang] : (field[''] || field);\n }\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u5b57\u4e32\uff08\u820a\u683c\u5f0f\uff09\uff0c\u76f4\u63a5\u8fd4\u56de\n return field;\n }\n\n \/\/ \u7576\u524d\u8a9e\u8a00\n const currentLang = getCurrentLang();\n console.log('\ud83c\udf10 \u7576\u524d\u8a9e\u8a00:', currentLang || '\u7e41\u9ad4\u4e2d\u6587 TW');\n\n \/\/ \u7528\u6236\u5730\u5340\uff08\u5f9e API \u53d6\u5f97\uff09\n let userArea = '';\n\n \/\/ \u5730\u5340 \u2192 \u8a9e\u8a00\u8def\u5f91\u5c0d\u61c9\u8868\n const areaToLangPath = {\n '\ud83c\uddf9\ud83c\uddfc Taiwan - \u7e41\u9ad4\u4e2d\u6587': '',\n '\ud83c\udded\ud83c\uddf0 Hong Kong - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\uddf2\ud83c\uddf4 Macau - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\udde8\ud83c\uddf3 China - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf8\ud83c\uddec Singapore - English': '\/en',\n '\ud83c\uddf8\ud83c\uddec Singapore - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - English': '\/en',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddec\ud83c\udde7 United Kingdom - English': '\/en',\n '\ud83c\uddea\ud83c\uddfa Europe (EU) - English': '\/en',\n '\ud83c\udf10 Global \/ Other - English': '\/en',\n '\ud83c\uddf0\ud83c\uddf7 South Korea - \ud55c\uad6d\uc5b4': '\/kr',\n '\ud83c\uddef\ud83c\uddf5 Japan - \u65e5\u672c\u8a9e': '\/jp',\n '\ud83c\udde7\ud83c\uddf7 Brazil - Portugu\u00eas': '\/br',\n '\ud83c\uddf9\ud83c\udded Thailand - \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22': '\/th',\n '\ud83c\uddfb\ud83c\uddf3 Vietnam - Ti\u1ebfng Vi\u1ec7t': '\/vi',\n '\ud83c\uddee\ud83c\udde9 Indonesia - Bahasa Indonesia': '\/id',\n '\ud83c\uddf5\ud83c\udded Philippines - English': '\/en',\n '\ud83c\udde6\ud83c\uddfa Australia - English': '\/en',\n };\n\n \/\/ \u6839\u64da\u5730\u5340\u53d6\u5f97\u8a9e\u8a00\u8def\u5f91\n function getLangPathByArea(area) {\n return areaToLangPath[area] || '';\n }\n\n \/\/ \ud83d\udd04 Loading \/ Error \u63a7\u5236\n function showLoading() {\n document.getElementById('loadingScreen').classList.remove('hidden');\n }\n function hideLoading() {\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n function showError(title, message) {\n document.getElementById('errorTitle').textContent = title;\n document.getElementById('errorMessage').textContent = message;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83c\udf89 \u986f\u793a\u5df2\u5b8c\u6210\u6e2c\u9a57\u8a0a\u606f\n function showCompletedMessage(code) {\n const resultUrl = `https:\/\/maybeits.me\/mbti-result\/?id=${encodeURIComponent(code)}`;\n document.getElementById('errorTitle').textContent = '\ud83c\udf89 \u4f60\u5df2\u5b8c\u6210\u6e2c\u9a57';\n document.getElementById('errorMessage').innerHTML = `\n \u4f60\u5df2\u6e2c\u5b8c MBTI \u6e2c\u9a57\uff0c\u4ee5\u4e0b\u662f\u4f60\u7684\u5831\u544a\u9023\u7d50\uff1a<br><br>\n <a href=\"${resultUrl}\" style=\"color: var(--accent-color); text-decoration: underline; word-break: break-all;\">${resultUrl}<\/a>\n `;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n async function fetchQuizByCode(code) {\n const url = `${API_QUIZ_BY_CODE}?code=${encodeURIComponent(code)}`;\n const res = await fetch(url);\n\n if (!res.ok) {\n const errorData = await res.json().catch(() => ({}));\n throw new Error(errorData.message || '\u8f09\u5165\u5931\u6557');\n }\n\n const data = await res.json();\n\n \/\/ \u4fdd\u5b58 _meta \u8cc7\u8a0a\n const meta = data._meta;\n\n \/\/ \u79fb\u9664 meta \u8cc7\u8a0a\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u6e2c\u9a57\u8cc7\u6599\n delete data._meta;\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n \/\/ \u5c07 _meta \u9644\u52a0\u5230\u6e2c\u9a57\u8cc7\u6599\u4e0a\n const quizData = records[0];\n quizData._meta = meta;\n\n return quizData;\n }\n\n \/\/ \ud83d\udce1 API 1: \u67e5\u8a62\u4ee3\u78bc\u5c0d\u61c9\u7684\u89d2\u8272\uff08\u5099\u7528\uff09\n async function fetchCodeData(code) {\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/5&where=1005241,eq,${encodeURIComponent(code)}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u7db2\u8def\u9023\u7dda\u7570\u5e38');\n const data = await res.json();\n\n \/\/ \u79fb\u9664 _debug \u6b04\u4f4d\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u8cc7\u6599\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u4ee3\u78bc\u7121\u6548\u6216\u5df2\u904e\u671f');\n\n return records[0];\n }\n\n \/\/ \ud83d\udce1 API 2: \u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\uff08\u5099\u7528\uff09\n async function fetchQuizRawData(role) {\n const pathSuffix = roleToPath[role];\n if (!pathSuffix) throw new Error('\u89d2\u8272\u4ee3\u78bc\u7121\u6548');\n\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/11${pathSuffix}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u8f09\u5165\u6e2c\u9a57\u8cc7\u6599\u5931\u6557');\n const data = await res.json();\n\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n return records[0];\n }\n\n \/\/ \ud83d\udd27 \u89e3\u6790 JSON \u6b04\u4f4d\uff0c\u5efa\u7acb\u984c\u5eab\n function buildQuizFromAPI(rawData) {\n \/\/ \ud83c\udf10 \u89e3\u6790\u591a\u8a9e\u8a00 JSON\uff08\u6b04\u4f4d\u662f JSON \u5b57\u4e32\uff0c\u88e1\u9762\u5305\u542b\u591a\u8a9e\u8a00\u7d50\u69cb\uff09\n let quizConfig;\n try {\n \/\/ \u5148\u89e3\u6790 JSON \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedJSON = JSON.parse(rawData.JSON);\n \/\/ \u5982\u679c\u662f\u591a\u8a9e\u8a00\u7d50\u69cb\uff08\u7269\u4ef6 with \u8a9e\u8a00 key\uff09\uff0c\u53d6\u5f97\u5c0d\u61c9\u8a9e\u8a00\n if (typeof parsedJSON === 'object' && parsedJSON !== null && !Array.isArray(parsedJSON)) {\n \/\/ \u6aa2\u67e5\u662f\u5426\u6709\u8a9e\u8a00 key\uff08\u5982 \"\"\u3001\"en\"\u3001\"jp\" \u7b49\uff09\n const hasLangKeys = Object.keys(parsedJSON).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n quizConfig = parsedJSON[currentLang] || parsedJSON[''] || parsedJSON;\n console.log('\ud83c\udf10 \u5df2\u8f09\u5165\u8a9e\u8a00\u7248\u672c\u7684\u6e2c\u9a57\u914d\u7f6e:', currentLang || '\u7e41\u4e2d');\n } else {\n \/\/ \u820a\u683c\u5f0f\uff08\u76f4\u63a5\u662f\u984c\u76ee\u914d\u7f6e\uff09\n quizConfig = parsedJSON;\n console.log('\ud83d\udccb \u5df2\u8f09\u5165\u6e2c\u9a57\u914d\u7f6e\uff08\u55ae\u8a9e\u8a00\u683c\u5f0f\uff09');\n }\n } else {\n quizConfig = parsedJSON;\n }\n } catch (e) {\n console.error('\u274c \u89e3\u6790 JSON \u6b04\u4f4d\u5931\u6557:', e);\n return;\n }\n\n \/\/ \ud83c\udfaf \u5132\u5b58\u300c5\u985e\u578b\u6587\u6848\u300d\u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u4f7f\u7528\uff09\n if (rawData['5\u985e\u578b\u6587\u6848']) {\n try {\n \/\/ \u5148\u89e3\u6790 5\u985e\u578b\u6587\u6848 \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedPaywall = JSON.parse(rawData['5\u985e\u578b\u6587\u6848']);\n let localizedPaywall;\n \/\/ \u6aa2\u67e5\u662f\u5426\u70ba\u591a\u8a9e\u8a00\u7d50\u69cb\n if (typeof parsedPaywall === 'object' && parsedPaywall !== null && !Array.isArray(parsedPaywall)) {\n const hasLangKeys = Object.keys(parsedPaywall).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n localizedPaywall = parsedPaywall[currentLang] || parsedPaywall[''] || parsedPaywall;\n } else {\n localizedPaywall = parsedPaywall;\n }\n } else {\n localizedPaywall = parsedPaywall;\n }\n \/\/ \u5132\u5b58\u70ba JSON \u5b57\u4e32\n sessionStorage.setItem('quiz_paywall_copies', JSON.stringify(localizedPaywall));\n console.log('\u2705 \u5df2\u5132\u5b58 5\u985e\u578b\u6587\u6848\u5230 sessionStorage\uff08\u8a9e\u8a00:', currentLang || '\u7e41\u4e2d', '\uff09');\n } catch (e) {\n console.error('\u274c \u89e3\u6790 5\u985e\u578b\u6587\u6848 \u5931\u6557:', e);\n }\n } else {\n console.warn('\u26a0\ufe0f rawData \u4e2d\u6c92\u6709\u300c5\u985e\u578b\u6587\u6848\u300d\u6b04\u4f4d');\n console.log('rawData \u7684\u6240\u6709 key:', Object.keys(rawData));\n }\n\n \/\/ \u5efa\u7acb\u5716\u7247\u4f86\u6e90\u5c0d\u7167\u8868\n imageSources = {};\n for (let i = 1; i <= 93; i++) {\n const keyA = `${i}-0`, keyB = `${i}-1`;\n if (rawData[`${keyA}-img`]) imageSources[keyA] = rawData[`${keyA}-img`];\n if (rawData[`${keyB}-img`]) imageSources[keyB] = rawData[`${keyB}-img`];\n }\n imageSources[\"default\"] = \"https:\/\/images.unsplash.com\/photo-1534447677768-be436bb09401?w=800&q=80\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u8cc7\u8a0a\u8207\u904e\u5834\n const chapterMap = {};\n transitions = {};\n let questionIndex = 1;\n\n for (let i = 1; i <= 93; i++) {\n const config = quizConfig[String(i)];\n if (!config) continue;\n\n const chapterName = config[\"\u4e3b\u984c\u5206\u985e\"] || \"\u672a\u5206\u985e\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u7bc4\u570d\n if (!chapterMap[chapterName]) {\n chapterMap[chapterName] = { name: chapterName, start: questionIndex, end: questionIndex };\n } else {\n chapterMap[chapterName].end = questionIndex;\n }\n\n \/\/ \u6536\u96c6\u904e\u5834\u6587\u5b57\n let rawTransText = config[\"\u904e\u5834\u6587\u5b57\"];\n \/\/ \u652f\u63f4\u9663\u5217\u683c\u5f0f\uff08\u6bcf\u884c\u4e00\u500b\u5143\u7d20\uff09\u6216\u5b57\u4e32\u683c\u5f0f\n if (Array.isArray(rawTransText)) {\n rawTransText = rawTransText.join('\\n');\n }\n if (rawTransText && rawTransText.trim()) {\n const text = rawTransText.trim();\n\n \/\/ \u512a\u5148\u4f7f\u7528 JSON \u4e2d\u6307\u5b9a\u7684\u300c\u904e\u5834\u985e\u578b\u300d\uff0c\u5426\u5247\u81ea\u52d5\u5224\u65b7\n let transType = 'minor';\n if (config[\"\u904e\u5834\u985e\u578b\"]) {\n \/\/ JSON \u4e2d\u6709\u660e\u78ba\u6307\u5b9a major\/minor\n transType = config[\"\u904e\u5834\u985e\u578b\"].toLowerCase().trim();\n } else {\n \/\/ \u81ea\u52d5\u5224\u65b7\uff1a\u542b\u300c\u3010\u300d\u6216\u8d85\u904e 3 \u884c = major\n const isMajor = text.includes(\"\u3010\") || text.split('\\n').length > 3;\n transType = isMajor ? 'major' : 'minor';\n }\n\n transitions[questionIndex] = {\n type: transType,\n text: text\n };\n }\n\n questionIndex++;\n }\n\n \/\/ \u52a0\u5165\u6700\u7d42\u904e\u5834\n transitions[94] = { type: 'final' };\n\n \/\/ \u5efa\u7acb chapterRanges\uff08\u52a0\u5165\u984f\u8272\uff09\n chapterRanges = Object.values(chapterMap).map(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n return { ...ch, colors: style.colors };\n });\n\n \/\/ \u5efa\u7acb fireworkColors\n fireworkColors = {};\n chapterRanges.forEach(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n fireworkColors[ch.start] = { hues: style.fireworkHues, name: ch.name };\n });\n\n \/\/ \u5efa\u7acb quizData \u9663\u5217\n quizData = [];\n for (let i = 1; i <= 94; i++) {\n const config = quizConfig[String(i)];\n let ch = chapterRanges.find(r => i >= r.start && i <= r.end);\n if (!ch) ch = { name: \"\u6700\u7d42\u7ae0\", start: 94, end: 94, colors: [\"#000\", \"#111\", \"#222\", \"#333\", \"#444\"] };\n\n const trans = transitions[i];\n\n \/\/ \u53d6\u5f97\u9078\u9805\u5c0d\u61c9\u7684 key\n let optKeyA = `${i}-0`, optKeyB = `${i}-1`;\n let questionText = `Question ${i}`;\n let textA = \"\u9078\u9805 A\", textB = \"\u9078\u9805 B\";\n\n if (config) {\n optKeyA = config[\"\u9078\u9805A\"] || optKeyA;\n optKeyB = config[\"\u9078\u9805B\"] || optKeyB;\n\n \/\/ \u5f9e rawData \u53d6\u5f97\u984c\u76ee\u548c\u9078\u9805\u6587\u5b57\n const qKey = `Q${optKeyA.split('-')[0]}`;\n questionText = rawData[qKey] || questionText;\n textA = rawData[optKeyA] || textA;\n textB = rawData[optKeyB] || textB;\n }\n\n quizData.push({\n id: i,\n chapter: ch.name,\n chapterStart: ch.start,\n chapterEnd: ch.end,\n bgColors: ch.colors,\n transition: trans,\n questionText: questionText,\n textA: textA,\n textB: textB,\n optionsA: optKeyA,\n optionsB: optKeyB,\n indicator: config ? config[\"\u6307\u6a19\"] : null \/\/ J\/P \u8a08\u5206\u7528\n });\n }\n }\n\n \/\/ \ud83d\ude80 \u4e3b\u8981\u521d\u59cb\u5316\u6d41\u7a0b\uff08\u4f7f\u7528\u5408\u4f75 API\uff09\n async function initQuiz() {\n const urlParams = new URLSearchParams(window.location.search);\n let id = urlParams.get('id');\n\n \/\/ \u5982\u679c URL \u6c92\u6709 id\uff0c\u5617\u8a66\u5f9e sessionStorage \u8b80\u53d6\uff08\u5f9e\u5c0e\u8cfc\u9801\u56de\u4f86\u7684\u60c5\u6cc1\uff09\n if (!id) {\n id = sessionStorage.getItem('quiz_user_id');\n }\n\n if (!id) {\n showError('\u8acb\u78ba\u8a8d\u6e2c\u9a57\u5c08\u5c6c\u9023\u7d50\u662f\u5426\u6b63\u78ba', '\u627e\u4e0d\u5230\u4f60\u7684\u6e2c\u9a57\u4ee3\u78bc ...');\n return;\n }\n\n \/\/ \u5132\u5b58 id \u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u56de\u4f86\u6642\u4f7f\u7528\uff09\n sessionStorage.setItem('quiz_user_id', id);\n\n try {\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n const quizRawData = await fetchQuizByCode(id);\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u5b8c\u6210\u6e2c\u9a57\n if (quizRawData._meta && quizRawData._meta.completed === 'Yes') {\n showCompletedMessage(id);\n return;\n }\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n if (quizRawData._meta && quizRawData._meta.purchased === 'Yes') {\n hasPurchased = true;\n }\n\n \/\/ \ud83c\udf0d \u4fdd\u5b58\u7528\u6236\u5730\u5340\uff08\u7528\u65bc\u8df3\u8f49\uff09\n if (quizRawData._meta && quizRawData._meta.area) {\n userArea = quizRawData._meta.area;\n console.log('\u7528\u6236\u5730\u5340:', userArea);\n }\n\n \/\/ \u89e3\u6790\u4e26\u5efa\u7acb\u984c\u5eab\n buildQuizFromAPI(quizRawData);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u524d 5 \u984c\u5716\u7247\n preloadUpcoming(-1, 5);\n\n \/\/ \u96b1\u85cf Loading\uff0c\u555f\u52d5\u6e2c\u9a57\n hideLoading();\n loadLcProgress();\n init();\n\n } catch (error) {\n console.error('\u521d\u59cb\u5316\u5931\u6557:', error);\n showError('\u8f09\u5165\u5931\u6557', error.message || '\u8acb\u7a0d\u5f8c\u518d\u8a66');\n }\n }\n\n \/\/ \u5716\u7247\u53d6\u5f97\u51fd\u6578\n function getImgUrl(key) { return imageSources[key] || imageSources[\"default\"]; }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\ude80 \u5716\u7247\u9810\u8f09\u5165\u512a\u5316\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n const preloadedImages = new Set();\n\n \/\/ \u9810\u8f09\u5165\u55ae\u5f35\u5716\u7247\n function preloadImage(url) {\n if (!url || preloadedImages.has(url)) return;\n const img = new Image();\n img.src = url;\n preloadedImages.add(url);\n }\n\n \/\/ \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 N \u984c\u7684\u5716\u7247\n function preloadUpcoming(startIdx, count = 3) {\n for (let i = 1; i <= count; i++) {\n const nextIdx = startIdx + i;\n if (nextIdx >= quizData.length) break;\n\n const nextQ = quizData[nextIdx];\n if (nextQ) {\n preloadImage(getImgUrl(nextQ.optionsA));\n preloadImage(getImgUrl(nextQ.optionsB));\n }\n }\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udfaf Paywall \u52d5\u614b\u6587\u6848\uff1a\u5132\u5b58 Q1-Q10 \u7b54\u6848\u8207\u6307\u6a19\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n function saveQuizDataForPaywall() {\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u7b54\u6848\uff08\"A\" \u6216 \"B\"\uff09\n const first10Answers = [];\n for (let i = 0; i < 10; i++) {\n const qId = quizData[i].id;\n const answerKey = `q${qId}`;\n const answerVal = answers[answerKey]; \/\/ \"A\" \u6216 \"B\"\n first10Answers.push(answerVal || null);\n }\n\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u6307\u6a19\uff08\"J=A\" \u6216 \"J=B\"\uff09\n const first10Indicators = quizData.slice(0, 10).map(q => q.indicator);\n\n \/\/ \u5132\u5b58\u5230 sessionStorage\n sessionStorage.setItem('quiz_answers_10', JSON.stringify(first10Answers));\n sessionStorage.setItem('quiz_indicators_10', JSON.stringify(first10Indicators));\n\n \/\/ \u9664\u932f\u8f38\u51fa\n console.log('\ud83c\udfaf saveQuizDataForPaywall \u57f7\u884c');\n console.log('answers \u7269\u4ef6:', answers);\n console.log('first10Answers:', first10Answers);\n console.log('first10Indicators:', first10Indicators);\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \u4ee5\u4e0b\u70ba\u539f\u6709\u6e2c\u9a57\u908f\u8f2f\uff08\u8cc7\u6599\u5df2\u6539\u70ba\u52d5\u614b\u8f09\u5165\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n let currentIdx = 0;\n let isTransitioning = false;\n let transitionTimer = null, typeTimer = null;\n let currentFireworkHues = [30, 40, 50]; \/\/ \u9810\u8a2d\u6696\u8272\n let hasPurchased = false; \/\/ \u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n let lcCompleted = false; \/\/ Life Concern \u554f\u5377\u662f\u5426\u5df2\u5b8c\u6210\n let lcSelected = { topicIdx: null, topicKey: null, topicName: null, role: null, concern: null };\n const answers = {};\n\n const dom = {\n box: document.getElementById('questionBox'),\n counter: document.getElementById('questionCounter'),\n badge: document.getElementById('chapterBadge'),\n qTitle: document.getElementById('qTitle'),\n imgA: document.getElementById('imgA'), imgB: document.getElementById('imgB'),\n textA: document.getElementById('textA'), textB: document.getElementById('textB'),\n progressBar: document.getElementById('progressBar'),\n prevBtn: document.getElementById('prevBtn'),\n mobileBackBtn: document.getElementById('mobileBackBtn'),\n transitionLayer: document.getElementById('transitionLayer'),\n transText: document.getElementById('transText'),\n transChapter: document.getElementById('transChapter'),\n fireworksCanvas: document.getElementById('fireworksCanvas'),\n desktopMinorText: document.getElementById('desktopMinorText'),\n tapHint: document.getElementById('tapHint'),\n finalBtn: document.getElementById('finalBtn'),\n bgWrapper: document.getElementById('bgWrapper'),\n balloonContainer: document.getElementById('balloonContainer'),\n questionArea: document.getElementById('questionArea'),\n iframeOverlay: document.getElementById('iframeOverlay'),\n embeddedFrame: document.getElementById('embeddedFrame')\n };\n\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316 HTML \u975c\u614b\u6587\u5b57\u7684\u591a\u8a9e\u8a00\u7ffb\u8b6f\n function initUITranslations() {\n \/\/ Loading \u756b\u9762\n const loadingText = document.querySelector('.loading-text');\n if (loadingText) loadingText.textContent = t('loading');\n\n \/\/ iframe \u8f09\u5165\u4e2d\n const iframeLoaderText = document.querySelector('.iframe-loader-text');\n if (iframeLoaderText) iframeLoaderText.textContent = t('loading');\n\n \/\/ \u984c\u76ee\u8f09\u5165\u4e2d\n const qTitle = document.getElementById('qTitle');\n if (qTitle && qTitle.textContent.includes('\u8f09\u5165')) {\n qTitle.textContent = t('questionLoading');\n }\n\n \/\/ \u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c\n if (dom.tapHint) dom.tapHint.textContent = t('tapToContinue');\n\n \/\/ \u6211\u6e96\u5099\u597d\u4e86\u6309\u9215\n if (dom.finalBtn) dom.finalBtn.textContent = t('ready');\n\n \/\/ \u4e0a\u4e00\u984c\u6309\u9215\n const prevBtn = document.getElementById('prevBtn');\n if (prevBtn) {\n prevBtn.innerHTML = `<span>\u2190<\/span> ${t('prevQuestion')}`;\n }\n\n console.log('\ud83c\udf10 UI \u7ffb\u8b6f\u521d\u59cb\u5316\u5b8c\u6210');\n }\n\n function init() {\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316\u591a\u8a9e\u8a00 UI \u6587\u5b57\n initUITranslations();\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u8b80\u53d6\u8a72\u7528\u6236\u7684\u9032\u5ea6\n const userId = sessionStorage.getItem('quiz_user_id');\n if (userId) {\n const savedProgress = localStorage.getItem(`soul_quiz_progress_${userId}`);\n if (savedProgress) {\n const parsed = JSON.parse(savedProgress);\n if (parsed.idx >= 94) {\n \/\/ idx 94 = \u8d85\u51fa\u7bc4\u570d\uff08Q1-Q93 + final \u5171 94 \u7b46\uff0cidx 0-93\uff09\n localStorage.removeItem(`soul_quiz_progress_${userId}`);\n localStorage.removeItem(`soul_quiz_answer_keys_${userId}`);\n currentIdx = 0;\n } else {\n currentIdx = parsed.idx;\n Object.assign(answers, parsed.answers); \/\/ \u4e00\u5b9a\u8981\u9084\u539f answers\n saveProgress(); \/\/ \u540c\u6b65\u66f4\u65b0 answer_keys\n }\n }\n }\n\n checkTransitionAndLoad();\n }\n\n function saveProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return; \/\/ \u6c92\u6709 userId \u5c31\u4e0d\u5132\u5b58\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u5132\u5b58\u9032\u5ea6\uff08\u4e0d\u540c\u7528\u6236\u7368\u7acb\u5132\u5b58\uff09\n localStorage.setItem(`soul_quiz_progress_${userId}`, JSON.stringify({ idx: currentIdx, answers: answers }));\n\n \/\/ \u5132\u5b58\u9078\u9805 key\uff08\u4f9b n8n \u4f7f\u7528\uff09\n const answerKeys = {};\n for (const q of quizData) {\n const answerVal = answers[`q${q.id}`];\n if (answerVal) {\n answerKeys[q.id] = answerVal === 'A' ? q.optionsA : q.optionsB;\n }\n }\n localStorage.setItem(`soul_quiz_answer_keys_${userId}`, JSON.stringify(answerKeys));\n }\n\n \/\/ \ud83c\udf1f Life Concern \u9032\u5ea6\u4fdd\u5b58\/\u8b80\u53d6\n function saveLcProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return;\n localStorage.setItem(`soul_lc_${userId}`, JSON.stringify({\n completed: lcCompleted,\n step: lcStep,\n selected: lcSelected\n }));\n }\n\n function loadLcProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return;\n try {\n const saved = JSON.parse(localStorage.getItem(`soul_lc_${userId}`));\n if (saved) {\n lcCompleted = saved.completed || false;\n lcStep = saved.step || 1;\n if (saved.selected) lcSelected = saved.selected;\n }\n } catch (e) {}\n }\n\n function clearLcProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return;\n localStorage.removeItem(`soul_lc_${userId}`);\n }\n\n \/\/ \ud83d\udce6 \u7d44\u6210\u7b54\u6848\u5b57\u4e32\uff08\u4f9b n8n POST\uff09- \u4f9d\u7167 key \u524d\u7db4\u6578\u5b57\u6392\u5e8f\n function generateAnswerString() {\n const userId = sessionStorage.getItem('quiz_user_id');\n const answerKeys = JSON.parse(localStorage.getItem(`soul_quiz_answer_keys_${userId}`) || '{}');\n const parts = [];\n for (let i = 1; i <= 93; i++) {\n if (answerKeys[i]) {\n parts.push(answerKeys[i]);\n }\n }\n \/\/ \u4f9d\u7167 key \u7684\u6578\u5b57\u524d\u7db4\u6392\u5e8f\uff08\u5982 \"1-1\" \u2192 1, \"9-0\" \u2192 9, \"11-1\" \u2192 11\uff09\n parts.sort((a, b) => {\n const numA = parseInt(a.split('-')[0], 10);\n const numB = parseInt(b.split('-')[0], 10);\n return numA - numB;\n });\n return parts.join(',');\n }\n\n function updateBackground(colors) {\n if (!colors) return;\n const root = document.documentElement;\n root.style.setProperty('--bg-grad-1', colors[0]);\n root.style.setProperty('--bg-grad-2', colors[1]);\n root.style.setProperty('--bg-grad-3', colors[2]);\n root.style.setProperty('--bg-grad-4', colors[3]);\n root.style.setProperty('--bg-grad-5', colors[4]);\n }\n\n function checkTransitionAndLoad() {\n const data = quizData[currentIdx];\n updateBackground(data.bgColors);\n\n const showBack = (currentIdx > 0);\n dom.prevBtn.classList.toggle('hidden', !showBack);\n dom.mobileBackBtn.style.display = showBack ? 'inline-block' : 'none';\n\n if (data.transition) {\n const isMobile = window.innerWidth <= 900;\n if (data.id === 94) {\n \/\/ \ud83c\udf1f \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u5148\u986f\u793a Life Concern \u554f\u5377\n if (!hasPurchased && !lcCompleted) {\n showLifeConcern();\n return;\n }\n runFinalTransition(data);\n }\n else if (data.transition.type === 'major' || (data.transition.type === 'minor' && isMobile)) {\n runFullScreenTransition(data);\n } else {\n runDesktopMinorTransition(data);\n }\n } else {\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n }\n }\n\n \/\/ \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801\n function runFinalTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.add('active');\n dom.transitionLayer.classList.add('final-mode');\n\n dom.fireworksCanvas.style.display = 'none';\n dom.tapHint.style.display = 'none';\n dom.transitionLayer.style.cursor = 'default';\n\n \/\/ \u5275\u5efa\u6c23\u7403\u8207\u661f\u661f\n createBalloons();\n createFinalStars();\n\n \/\/ \ud83c\udf10 \u4f7f\u7528\u591a\u8a9e\u8a00\u7ffb\u8b6f\n const userId = sessionStorage.getItem('quiz_user_id');\n\n const htmlContent = `\n <div class=\"final-badge\">\n <img decoding=\"async\" src=\"https:\/\/maybeits.me\/wp-content\/uploads\/2025\/11\/LOGO-.png\" alt=\"Logo\">\n <\/div>\n <div class=\"final-title\">${t('congrats')}<\/div>\n <div class=\"final-subtitle\">${t('soulReport')}<\/div>\n\n <div class=\"final-card\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon thanks\">\ud83d\ude4f<\/div>\n <div class=\"final-card-title\">${t('thanks')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('thanksText')}\n <\/div>\n <\/div>\n\n ${!hasPurchased ? `\n <div style=\"text-align: center; margin: 10px 0 8px 0; padding: 12px 0;\">\n <button class=\"final-simple-btn\" onclick=\"goToSimpleReport()\">${t('freeReport')}<\/button>\n <\/div>\n ` : ''}\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon photo\">\ud83d\udcf8<\/div>\n <div class=\"final-card-title\">${t('nextStep')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('nextStepText')}\n <\/div>\n <\/div>\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon time\">\u23f0<\/div>\n <div class=\"final-card-title\">${t('reminder')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('reminderText')}\n <\/div>\n <\/div>\n\n <button class=\"final-back-btn\" onclick=\"goBackFromFinal()\">${t('goBack')}<\/button>\n `;\n dom.transText.innerHTML = htmlContent;\n\n setTimeout(() => { dom.transText.classList.add('fade-in'); }, 100);\n setTimeout(() => {\n dom.finalBtn.classList.add('show');\n\n \/\/ \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u4e3b\u6309\u9215\u7070\u8272\u7981\u7528 + \u5e95\u90e8\u986f\u793a\u4ed8\u8cbb\u63d0\u793a\n if (!hasPurchased) {\n dom.finalBtn.classList.add('disabled');\n \/\/ \u5728\u6309\u9215\u4e0b\u65b9\u63d2\u5165\u63d0\u793a\u6587\u5b57\n if (!document.getElementById('finalUnlockHint')) {\n const hint = document.createElement('div');\n hint.id = 'finalUnlockHint';\n hint.className = 'final-unlock-hint show';\n hint.textContent = t('paidHint');\n dom.finalBtn.parentNode.insertBefore(hint, dom.finalBtn.nextSibling);\n }\n }\n }, 1200);\n }\n\n \/\/ \ud83d\udd25 \u5275\u5efa\u591a\u7a2e\u9020\u578b\u6c23\u7403\n function createBalloons() {\n const container = dom.balloonContainer;\n container.innerHTML = '';\n container.style.display = 'block';\n\n const balloonTypes = ['round', 'heart', 'donut', 'star'];\n const balloonColors = ['color-pink', 'color-blue', 'color-peach', 'color-lavender', 'color-mint', 'color-cream', 'color-coral', 'color-gold'];\n const positions = [3, 10, 20, 32, 45, 58, 70, 82, 90, 95];\n\n for (let i = 0; i < 12; i++) {\n const balloon = document.createElement('div');\n const type = balloonTypes[i % balloonTypes.length];\n const color = balloonColors[i % balloonColors.length];\n\n balloon.className = `balloon-base balloon-${type} ${color}`;\n balloon.style.left = positions[i % positions.length] + '%';\n balloon.style.setProperty('--duration', (11 + Math.random() * 6) + 's');\n balloon.style.setProperty('--delay', (i * 0.7) + 's');\n\n \/\/ \u6839\u64da\u985e\u578b\u6dfb\u52a0\u5167\u90e8\u5143\u7d20\n if (type === 'round') {\n const shine = document.createElement('div');\n shine.className = 'shine';\n balloon.appendChild(shine);\n } else if (type === 'heart') {\n const string = document.createElement('div');\n string.className = 'string';\n balloon.appendChild(string);\n } else if (type === 'donut') {\n const sprinkles = document.createElement('div');\n sprinkles.className = 'sprinkles';\n balloon.appendChild(sprinkles);\n }\n\n container.appendChild(balloon);\n }\n }\n\n \/\/ \u2728 \u5275\u5efa\u9583\u720d\u661f\u661f\n function createFinalStars() {\n \/\/ \u79fb\u9664\u820a\u7684\u661f\u661f\u5bb9\u5668\n const oldStars = document.querySelector('.final-stars');\n if (oldStars) oldStars.remove();\n\n const container = document.createElement('div');\n container.className = 'final-stars';\n dom.transitionLayer.appendChild(container);\n\n for (let i = 0; i < 25; i++) {\n const star = document.createElement('div');\n star.className = 'final-star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.animationDelay = Math.random() * 2 + 's';\n star.style.animationDuration = (1.5 + Math.random()) + 's';\n container.appendChild(star);\n }\n }\n\n function runFullScreenTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.remove('final-mode');\n dom.transitionLayer.classList.add('active');\n dom.balloonContainer.style.display = 'none';\n\n dom.fireworksCanvas.style.display = 'block';\n dom.transChapter.innerText = `CHAPTER: ${data.chapter}`;\n dom.tapHint.style.display = 'block';\n dom.transitionLayer.style.cursor = 'pointer';\n\n dom.transText.innerText = \"\";\n\n \/\/ \ud83d\udd25 \u8a2d\u7f6e\u8a72\u7ae0\u7bc0\u7684\u7159\u706b\u984f\u8272\n if (fireworkColors[data.id]) {\n currentFireworkHues = fireworkColors[data.id].hues;\n }\n\n if (data.transition.type === 'major') startFireworks();\n\n const duration = (data.transition.type === 'major') ? 15000 : 10000;\n\n typeWriterEffect(data.transition.text, dom.transText, duration, () => {\n stopFireworks();\n dom.transitionLayer.classList.remove('active');\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n });\n }\n\n function runDesktopMinorTransition(data) {\n dom.questionArea.classList.add('has-transition');\n dom.desktopMinorText.innerText = \"\";\n dom.desktopMinorText.classList.add('active');\n setTimeout(() => { dom.desktopMinorText.classList.add('show'); }, 10);\n typeWriterEffect(data.transition.text, dom.desktopMinorText, 0, null, 55);\n renderQuestion(data);\n }\n\n function typeWriterEffect(text, element, waitTime, callback, baseSpeed = 60) {\n let i = 0;\n \/\/ \ud83d\udd25 \u6839\u64da\u6587\u5b57\u9577\u5ea6\u52d5\u614b\u8abf\u6574\u901f\u5ea6\uff08\u6587\u5b57\u8d8a\u9577\u901f\u5ea6\u8d8a\u5feb\uff09\n \/\/ \u624b\u6a5f\u7248\u984d\u5916\u52a0\u901f\n const isMobile = window.innerWidth <= 900;\n const textLen = text.length;\n let speed = baseSpeed;\n\n if (textLen > 150) {\n speed = isMobile ? 15 : 25; \/\/ \u8d85\u9577\u6587\u5b57\uff1a\u6975\u5feb\n } else if (textLen > 100) {\n speed = isMobile ? 20 : 30; \/\/ \u9577\u6587\u5b57\uff1a\u5f88\u5feb\n } else if (textLen > 60) {\n speed = isMobile ? 30 : 40; \/\/ \u4e2d\u7b49\u6587\u5b57\uff1a\u8f03\u5feb\n } else {\n speed = isMobile ? 40 : baseSpeed; \/\/ \u77ed\u6587\u5b57\uff1a\u6b63\u5e38\u901f\u5ea6\n }\n\n function type() {\n if (!isTransitioning && waitTime > 0) return;\n if (i < text.length) {\n element.innerText += text.charAt(i);\n i++;\n typeTimer = setTimeout(type, speed);\n } else {\n if (waitTime > 0) {\n transitionTimer = setTimeout(() => { endTransition(callback); }, waitTime);\n } else if (callback) { callback(); }\n }\n }\n type();\n if (waitTime > 0) dom.transitionLayer.onclick = () => endTransition(callback);\n else dom.transitionLayer.onclick = null;\n }\n\n function endTransition(callback) {\n if (!isTransitioning) return;\n isTransitioning = false;\n clearTimeout(typeTimer); clearTimeout(transitionTimer);\n dom.transitionLayer.onclick = null;\n if (callback) callback();\n }\n\n function adjustTextSize(text) {\n const len = text.length;\n let size = '28px';\n if (window.innerWidth <= 900) {\n if (len > 35) size = '16px';\n else if (len > 25) size = '18px';\n else if (len > 15) size = '20px';\n else size = '22px';\n } else {\n if (len > 40) size = '20px';\n else if (len > 30) size = '24px';\n }\n dom.qTitle.style.fontSize = size;\n }\n\n function renderQuestion(data) {\n updateBackground(data.bgColors);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 3 \u984c\u7684\u5716\u7247\n preloadUpcoming(currentIdx, 3);\n\n dom.box.classList.add('hidden');\n setTimeout(() => {\n dom.badge.innerText = data.chapter;\n const totalInChapter = data.chapterEnd - data.chapterStart + 1;\n const currentInChapter = data.id - data.chapterStart + 1;\n dom.counter.innerText = `${currentInChapter}\/${totalInChapter}`;\n const pct = Math.round((currentInChapter \/ totalInChapter) * 100);\n dom.progressBar.style.width = `${pct}%`;\n dom.qTitle.innerText = data.questionText;\n adjustTextSize(data.questionText);\n dom.imgA.src = getImgUrl(data.optionsA);\n dom.imgB.src = getImgUrl(data.optionsB);\n dom.textA.innerText = data.textA;\n dom.textB.innerText = data.textB;\n dom.box.classList.remove('hidden');\n }, 300);\n }\n\n function openEmbeddedPage(url) {\n const loader = document.getElementById('iframeLoader');\n \/\/ \u91cd\u7f6e\u72c0\u614b\n loader.classList.remove('hidden');\n dom.embeddedFrame.classList.remove('loaded');\n \/\/ \u986f\u793a overlay\n dom.iframeOverlay.classList.add('active');\n \/\/ \u76e3\u807d iframe \u8f09\u5165\u5b8c\u6210\n dom.embeddedFrame.onload = function () {\n \/\/ \u96b1\u85cf loading\uff0c\u986f\u793a iframe\n loader.classList.add('hidden');\n dom.embeddedFrame.classList.add('loaded');\n };\n \/\/ \u5ef6\u9072\u8a2d\u7f6e src \u78ba\u4fdd DOM \u5df2\u66f4\u65b0\n setTimeout(() => {\n dom.embeddedFrame.src = url;\n }, 100);\n }\n\n function closeEmbeddedPage() {\n const loader = document.getElementById('iframeLoader');\n dom.iframeOverlay.classList.remove('active');\n dom.embeddedFrame.classList.remove('loaded');\n loader.classList.remove('hidden');\n dom.embeddedFrame.src = 'about:blank';\n }\n\n window.selectOption = function (val) {\n if (isTransitioning) return;\n answers[`q${quizData[currentIdx].id}`] = val;\n saveProgress();\n \/\/ Q10 \u5b8c\u6210\uff1a\u5df2\u8cfc\u8cb7\u7528\u6236\u76f4\u63a5\u7e7c\u7e8c\uff0c\u672a\u8cfc\u8cb7\u7528\u6236\u986f\u793a\u5c0e\u8cfc\u9801\n if (quizData[currentIdx].id === 10 && !hasPurchased) {\n saveQuizDataForPaywall(); \/\/ \u5132\u5b58 Q1-Q10 \u7b54\u6848\u4f9b\u5c0e\u8cfc\u9801\u8a08\u7b97 J \u5206\u6578\n\n \/\/ \ud83c\udd95 POST webhook\uff1a\u901a\u77e5\u7b2c10\u984c\u5b8c\u6210\uff08\u4e0d\u7b49\u5f85\u56de\u61c9\uff09\n const first10Answers = JSON.parse(sessionStorage.getItem('quiz_answers_10') || '[]');\n const first10Indicators = JSON.parse(sessionStorage.getItem('quiz_indicators_10') || '[]');\n\n \/\/ \u8a08\u7b97 J \u5206\u6578\uff08\u79e9\u5e8f\u5206\uff09\n let jScore = 0;\n for (let i = 0; i < 10; i++) {\n const indicator = first10Indicators[i]; \/\/ \"J=A\" \u6216 \"J=B\"\n const answer = first10Answers[i]; \/\/ \"A\" \u6216 \"B\"\n if (indicator && answer && answer === indicator.split('=')[1]) {\n jScore++;\n }\n }\n\n \/\/ J \u5206\u6578 \u2192 \u985e\u578b\n let jType = '';\n if (jScore >= 9) jType = '\u6975\u81f4\u79e9\u5e8f';\n else if (jScore >= 7) jType = '\u9bae\u660e\u79e9\u5e8f';\n else if (jScore >= 4) jType = '\u5e73\u8861';\n else if (jScore >= 2) jType = '\u9bae\u660e\u81ea\u7531';\n else jType = '\u6975\u81f4\u81ea\u7531';\n\n fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: sessionStorage.getItem('quiz_user_id'),\n answers: first10Answers,\n jScore: jScore,\n jType: jType,\n lang: currentLang || '',\n area: userArea || ''\n })\n }).catch(err => console.error('Q10 webhook error:', err));\n\n \/\/ \u50b3\u905e\u7236\u9801\u9762\u7684 country\/test \u548c lang \u53c3\u6578\u7d66\u5c0e\u8cfc\u9801\n const urlParams = new URLSearchParams(window.location.search);\n const country = urlParams.get('country') || urlParams.get('test');\n let paywallUrl = \"https:\/\/maybeits.me\/mbit-buy\";\n const params = new URLSearchParams();\n if (country) params.set('country', country);\n if (currentLang) params.set('lang', currentLang);\n if (params.toString()) {\n paywallUrl += '?' + params.toString();\n }\n openEmbeddedPage(paywallUrl);\n return;\n }\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n } else {\n \/\/ \ud83c\udf89 Q93 \u5b8c\u6210\uff01\u7522\u751f\u7b54\u6848\u5b57\u4e32\n const answerString = generateAnswerString();\n console.log('\ud83d\udce6 93\u984c\u5168\u90e8\u5b8c\u6210\uff01\u7b54\u6848\u5b57\u4e32:', answerString);\n \/\/ TODO: POST \u5230 n8n\n }\n };\n\n window.prevQuestion = function () {\n if (currentIdx > 0) {\n currentIdx--;\n saveProgress();\n dom.questionArea.classList.remove('has-transition');\n renderQuestion(quizData[currentIdx]);\n if (!quizData[currentIdx].transition) {\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n }\n }\n };\n\n window.goToFinalStep = async function () {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._finalStepSubmitting) return;\n window._finalStepSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._finalStepSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u6309\u9215\u8996\u89ba\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = 'none';\n dom.finalBtn.style.opacity = '0.5';\n }\n\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 2. \u8a2d\u7f6e 15 \u79d2\u8d85\u6642\u6a5f\u5236\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n \/\/ 3. \u767c\u9001 webhook \u4e26\u7b49\u5f85\u56de\u61c9\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/379dc121-5a66-4694-8452-5802a7d8d95b', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n \/\/ 4. \u6aa2\u67e5\u56de\u61c9\u72c0\u614b\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 5. \u6210\u529f\u5f8c\u8df3\u8f49\u9801\u9762\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n console.log('\u8df3\u8f49\u8a9e\u8a00\u8def\u5f91:', langPath, '(\u5730\u5340:', userArea, ')');\n window.location.href = `https:\/\/maybeits.me${langPath}\/photo-editor\/?id=${userId}`;\n\n } catch (error) {\n \/\/ 6. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._finalStepSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = '';\n dom.finalBtn.style.opacity = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n \/\/ \u986f\u793a\u932f\u8aa4\u756b\u9762\uff08\u4f7f\u7528\u73fe\u6709\u7684\u932f\u8aa4 UI \u7d44\u4ef6\uff09\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToFinalStep()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83c\udd93 \u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\uff08\u514d\u8cbb\u7528\u6236\uff09\n window.goToSimpleReport = async function () {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._simpleReportSubmitting) return;\n window._simpleReportSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._simpleReportSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u514d\u8cbb\u5831\u544a\u6309\u9215\uff08\u9632\u6b62 loading \u904e\u6e21\u671f\u9593\u88ab\u518d\u6b21\u9ede\u64ca\uff09\n const simpleBtn = document.querySelector('.final-simple-btn');\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = 'none';\n simpleBtn.style.opacity = '0.5';\n simpleBtn.style.animation = 'none';\n }\n\n \/\/ 2. \u7d44\u6210\u7b54\u6848\u5b57\u4e32\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 3. POST webhook\uff0815 \u79d2\u8d85\u6642\uff09\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr,\n lc_topic: lcSelected.topicKey || '',\n lc_topic_name: lcSelected.topicName || '',\n lc_role: lcSelected.role || '',\n lc_concern: lcSelected.concern || ''\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 \u7c21\u6613\u7248\u5831\u544a Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 4. \u6210\u529f\u5f8c\u8df3\u8f49\u5230\u514d\u8cbb\u6e2c\u9a57\u7d50\u679c\u9801\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n window.location.href = `https:\/\/maybeits.me${langPath}\/mbti-express\/?id=${encodeURIComponent(userId)}`;\n\n } catch (error) {\n \/\/ 5. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._simpleReportSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = '';\n simpleBtn.style.opacity = '';\n simpleBtn.style.animation = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToSimpleReport()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83d\udd19 \u5f9e Final \u9801\u8fd4\u56de\u4e0a\u4e00\u984c\n window.goBackFromFinal = function () {\n \/\/ \u2705 \u91cd\u7f6e\u63d0\u4ea4\u9396\uff08\u56de\u5230\u984c\u76ee\u5f8c\u5141\u8a31\u91cd\u65b0\u63d0\u4ea4\uff09\n window._finalStepSubmitting = false;\n window._simpleReportSubmitting = false;\n\n \/\/ \u95dc\u9589\u8f49\u5834\u5c64\n isTransitioning = false;\n dom.transitionLayer.classList.remove('active');\n dom.transitionLayer.classList.remove('final-mode');\n dom.finalBtn.classList.remove('show');\n dom.transText.classList.remove('fade-in');\n dom.transText.innerHTML = '';\n\n \/\/ \u96b1\u85cf\u6c23\u7403\n dom.balloonContainer.style.display = 'none';\n dom.balloonContainer.innerHTML = '';\n\n \/\/ \u79fb\u9664\u661f\u661f\n const stars = document.querySelector('.final-stars');\n if (stars) stars.remove();\n\n \/\/ \ud83c\udf1f \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u8fd4\u56de Life Concern \u554f\u5377 Step 3\uff08\u4fdd\u7559\u4e4b\u524d\u9078\u64c7\uff09\n if (!hasPurchased) {\n lcCompleted = false;\n clearLcProgress();\n \/\/ \u6e05\u9664\u56f0\u64fe\u9078\u64c7\uff0c\u4f46\u4fdd\u7559\u4e3b\u984c\u548c\u89d2\u8272\n lcSelected.concern = null;\n showLifeConcernAtStep(3);\n return;\n }\n\n \/\/ \u56de\u5230\u6700\u5f8c\u4e00\u984c\uff08Q93\uff0cindex = 92\uff09\n currentIdx = quizData.length - 2; \/\/ Q93 \u7684 index \u662f 92\uff0c\u4e0d\u662f 93\uff08\u90a3\u662f final\uff09\n renderQuestion(quizData[currentIdx]);\n };\n\n \/\/ \ud83c\udd93 \u60c5\u5883 C\uff1a\u76e3\u807d\u5c0e\u8cfc\u9801 iframe \u7684 postMessage\uff08\u514d\u8cbb\u7e7c\u7e8c\u6e2c\u9a57\uff09\n window.addEventListener('message', function (event) {\n if (event.data && event.data.type === 'freeContinue') {\n console.log('\ud83c\udd93 \u6536\u5230\u514d\u8cbb\u7e7c\u7e8c\u8a0a\u865f\uff0c\u9032\u5165\u7b2c 11 \u984c');\n closeEmbeddedPage();\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n }\n }\n });\n\n \/\/ \ud83d\udd25 \u5730\u7403\u6309\u9215\u9ede\u64ca - \u53ef\u81ea\u8a02\u7ffb\u8b6f\u529f\u80fd\n window.onGlobeClick = function () {\n \/\/ \u5728\u9019\u88e1\u6dfb\u52a0\u4f60\u7684\u7ffb\u8b6f\u5916\u639b\u89f8\u767c\u4ee3\u78bc\n console.log('Globe clicked - add your translation plugin here');\n \/\/ \u793a\u4f8b\uff1a\u53ef\u4ee5\u6253\u958b\u7ffb\u8b6f\u9762\u677f\u6216\u89f8\u767c\u7ffb\u8b6f\u5916\u639b\n };\n\n \/* =========================================\n \ud83c\udf1f Life Concern \u554f\u5377\u908f\u8f2f\n ========================================= *\/\n const LC_DATA = {\n topics: [\n { key: 'love', name: '\u611f\u60c5\u95dc\u4fc2', icon: '\ud83d\udc95' },\n { key: 'career', name: '\u8077\u6daf\u767c\u5c55', icon: '\ud83d\udcbc' },\n { key: 'family', name: '\u5bb6\u5ead\u95dc\u4fc2', icon: '\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67' },\n { key: 'social', name: '\u793e\u4ea4\u4eba\u969b', icon: '\ud83d\udc65' },\n { key: 'money', name: '\u91d1\u9322\u7406\u8ca1', icon: '\ud83d\udcb0' },\n { key: 'study', name: '\u5b78\u696d\u5347\u5b78', icon: '\ud83d\udcda' }\n ],\n roles: {\n love: ['\u55ae\u8eab', '\u66d6\u6627\u4e2d', '\u4ea4\u5f80\u4e2d', '\u540c\u5c45\u4e2d', '\u5df2\u5a5a', '\u525b\u5206\u624b\/\u96e2\u5a5a'],\n career: ['\u793e\u6703\u65b0\u9bae\u4eba', '\u4e0a\u73ed\u65cf', '\u4e3b\u7ba1\/\u7ba1\u7406\u5c64', '\u81ea\u7531\u5de5\u4f5c\u8005\/\u5275\u696d', '\u5f85\u696d\u4e2d', '\u60f3\u8f49\u8077'],\n family: ['\u5152\u5b50\/\u5973\u5152', '\u7238\u7238\/\u5abd\u5abd', '\u4e08\u592b\/\u59bb\u5b50', '\u5ab3\u5a66\/\u5973\u5a7f', '\u624b\u8db3\uff08\u5144\u5f1f\u59d0\u59b9\uff09'],\n social: ['\u5b78\u751f', '\u525b\u9032\u793e\u6703', '\u4e0a\u73ed\u65cf', '\u5168\u8077\u7238\u5abd', '\u5230\u4e86\u65b0\u74b0\u5883', '\u81ea\u7531\u5de5\u4f5c\u8005'],\n money: ['\u5b78\u751f\uff08\u9760\u5bb6\u88e1\/\u6253\u5de5\uff09', '\u5c0f\u8cc7\u4e0a\u73ed\u65cf', '\u5bb6\u5ead\u7d93\u6fdf\u652f\u67f1', '\u96d9\u85aa\u5bb6\u5ead', '\u5275\u696d\u8005\/\u81ea\u71df', '\u8ca0\u50b5\u4e2d'],\n study: ['\u9ad8\u4e2d\u751f', '\u5927\u5b78\u751f', '\u7814\u7a76\u751f', '\u6e96\u5099\u8003\u8a66\/\u8b49\u7167', '\u5728\u8077\u9032\u4fee', '\u525b\u7562\u696d']\n },\n \/\/ \u89d2\u8272 \u2192 \u7fa4\u7d44\u5c0d\u7167\n roleGroups: {\n love: { '\u55ae\u8eab':'A', '\u66d6\u6627\u4e2d':'B', '\u4ea4\u5f80\u4e2d':'C', '\u540c\u5c45\u4e2d':'C', '\u5df2\u5a5a':'C', '\u525b\u5206\u624b\/\u96e2\u5a5a':'A' },\n career: { '\u793e\u6703\u65b0\u9bae\u4eba':'A', '\u4e0a\u73ed\u65cf':'B', '\u4e3b\u7ba1\/\u7ba1\u7406\u5c64':'B', '\u81ea\u7531\u5de5\u4f5c\u8005\/\u5275\u696d':'C', '\u5f85\u696d\u4e2d':'A', '\u60f3\u8f49\u8077':'C' },\n family: { '\u5152\u5b50\/\u5973\u5152':'A', '\u7238\u7238\/\u5abd\u5abd':'B', '\u4e08\u592b\/\u59bb\u5b50':'C', '\u5ab3\u5a66\/\u5973\u5a7f':'C', '\u624b\u8db3\uff08\u5144\u5f1f\u59d0\u59b9\uff09':'C' },\n social: { '\u5b78\u751f':'A', '\u525b\u9032\u793e\u6703':'A', '\u4e0a\u73ed\u65cf':'B', '\u5168\u8077\u7238\u5abd':'B', '\u5230\u4e86\u65b0\u74b0\u5883':'A', '\u81ea\u7531\u5de5\u4f5c\u8005':'B' },\n money: { '\u5b78\u751f\uff08\u9760\u5bb6\u88e1\/\u6253\u5de5\uff09':'A', '\u5c0f\u8cc7\u4e0a\u73ed\u65cf':'B', '\u5bb6\u5ead\u7d93\u6fdf\u652f\u67f1':'C', '\u96d9\u85aa\u5bb6\u5ead':'B', '\u5275\u696d\u8005\/\u81ea\u71df':'C', '\u8ca0\u50b5\u4e2d':'C' },\n study: { '\u9ad8\u4e2d\u751f':'A', '\u5927\u5b78\u751f':'B', '\u7814\u7a76\u751f':'B', '\u6e96\u5099\u8003\u8a66\/\u8b49\u7167':'C', '\u5728\u8077\u9032\u4fee':'C', '\u525b\u7562\u696d':'C' }\n },\n skipOption: '\u4e0d\u65b9\u4fbf\u8aaa\uff0c\u4f46\u60f3\u770b\u770b\u5831\u544a\u600e\u9ebc\u89e3\u8b80\u6211',\n concerns: {\n love_A: [\n '\u60f3\u812b\u55ae\uff0c\u4f46\u7e3d\u662f\u9047\u4e0d\u5230\u5c0d\u7684\u4eba',\n '\u4e0d\u77e5\u9053\u81ea\u5df1\u5230\u5e95\u60f3\u8981\u4ec0\u9ebc\u6a23\u7684\u5c0d\u8c61',\n '\u7e3d\u662f\u88ab\u767c\u597d\u4eba\u5361\uff0c\u4e0d\u77e5\u9053\u54ea\u88e1\u51fa\u554f\u984c',\n '\u5bb3\u6015\u518d\u6b21\u53d7\u50b7\uff0c\u4e0d\u6562\u8e0f\u51fa\u4e0b\u4e00\u6b65',\n '\u8eab\u908a\u7684\u4eba\u90fd\u6709\u5c0d\u8c61\uff0c\u53ea\u5269\u6211\u4e00\u500b\u4eba',\n '\u5206\u624b\u4e86\u9084\u662f\u653e\u4e0d\u4e0b\uff0c\u8d70\u4e0d\u51fa\u4f86',\n '\u7e3d\u662f\u611b\u4e0a\u4e0d\u8a72\u611b\u7684\u4eba\uff0c\u4e0d\u65b7\u91cd\u8e48\u8986\u8f4d',\n '\u89ba\u5f97\u81ea\u5df1\u4e0d\u5920\u597d\uff0c\u4e0d\u914d\u64c1\u6709\u611b\u60c5',\n '\u4ea4\u53cb\u5708\u592a\u5c0f\uff0c\u8a8d\u8b58\u4e0d\u5230\u65b0\u7684\u4eba',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5f9e\u670b\u53cb\u8b8a\u6210\u6200\u4eba'\n ],\n love_B: [\n '\u4e0d\u78ba\u5b9a\u5c0d\u65b9\u5c0d\u6211\u662f\u4e0d\u662f\u8a8d\u771f\u7684',\n '\u4e0d\u77e5\u9053\u8a72\u4e0d\u8a72\u4e3b\u52d5\u8868\u767d',\n '\u5c0d\u65b9\u5ffd\u51b7\u5ffd\u71b1\uff0c\u641e\u4e0d\u6e05\u695a\u5728\u60f3\u4ec0\u9ebc',\n '\u66d6\u6627\u592a\u4e45\u4e86\uff0c\u4e0d\u77e5\u9053\u600e\u9ebc\u63a8\u9032\u95dc\u4fc2',\n '\u6015\u8868\u767d\u88ab\u62d2\u7d55\uff0c\u9023\u670b\u53cb\u90fd\u505a\u4e0d\u6210',\n '\u8eab\u908a\u6709\u7af6\u722d\u5c0d\u624b\uff0c\u5f88\u6709\u58d3\u529b',\n '\u4e0d\u78ba\u5b9a\u81ea\u5df1\u662f\u771f\u7684\u559c\u6b61\u9084\u662f\u53ea\u662f\u5bc2\u5bde',\n '\u5c0d\u65b9\u7684\u751f\u6d3b\u5708\u8b93\u6211\u5f88\u6c92\u5b89\u5168\u611f',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5224\u65b7\u5c0d\u65b9\u7684\u5fc3\u610f',\n '\u5169\u500b\u4eba\u7684\u689d\u4ef6\u5dee\u8ddd\u8b93\u6211\u5f88\u7336\u8c6b'\n ],\n love_C: [\n '\u6e9d\u901a\u8d8a\u4f86\u8d8a\u5c11\uff0c\u611f\u89ba\u5728\u6f38\u884c\u6f38\u9060',\n '\u5c0d\u65b9\u592a\u51b7\u6de1\uff0c\u4e0d\u77e5\u9053\u600e\u9ebc\u8b93\u95dc\u4fc2\u5347\u6eab',\n '\u7e3d\u662f\u70ba\u4e86\u5c0f\u4e8b\u5435\u67b6\uff0c\u5f88\u6d88\u8017',\n '\u4e0d\u78ba\u5b9a\u9019\u6bb5\u95dc\u4fc2\u8a72\u4e0d\u8a72\u7e7c\u7e8c',\n '\u5c0d\u65b9\u8eab\u908a\u7684\u7570\u6027\u8b93\u6211\u5f88\u4e0d\u5b89',\n '\u611f\u60c5\u7a69\u5b9a\uff0c\u4f46\u597d\u50cf\u5c11\u4e86\u5fc3\u52d5\u7684\u611f\u89ba',\n '\u5f7c\u6b64\u7684\u751f\u6d3b\u7fd2\u6163\u5dee\u592a\u591a\uff0c\u78e8\u5408\u597d\u7d2f',\n '\u5c0d\u672a\u4f86\u7684\u898f\u5283\u4e0d\u4e00\u81f4\uff0c\u5f88\u7126\u616e',\n '\u89ba\u5f97\u81ea\u5df1\u4e00\u76f4\u5728\u4ed8\u51fa\uff0c\u5c0d\u65b9\u537b\u4e0d\u73cd\u60dc',\n '\u5bb6\u4eba\u4e0d\u8a8d\u540c\u9019\u6bb5\u95dc\u4fc2\uff0c\u593e\u5728\u4e2d\u9593\u5f88\u70ba\u96e3'\n ],\n career_A: [\n '\u4e0d\u77e5\u9053\u81ea\u5df1\u5230\u5e95\u9069\u5408\u505a\u4ec0\u9ebc',\n '\u9762\u8a66\u7e3d\u662f\u78b0\u58c1\uff0c\u5c0d\u81ea\u5df1\u8d8a\u4f86\u8d8a\u6c92\u4fe1\u5fc3',\n '\u6295\u4e86\u5f88\u591a\u5c65\u6b77\u90fd\u6c92\u6709\u56de\u97f3',\n '\u85aa\u6c34\u592a\u4f4e\uff0c\u89ba\u5f97\u88ab\u4f4e\u4f30\u4e86',\n '\u5b78\u6821\u5b78\u7684\u8ddf\u8077\u5834\u8981\u7684\u5b8c\u5168\u4e0d\u4e00\u6a23',\n '\u4e0d\u77e5\u9053\u8a72\u5148\u6c42\u7a69\u5b9a\u9084\u662f\u8ffd\u5922\u60f3',\n '\u8eab\u908a\u7684\u4eba\u90fd\u627e\u5230\u5de5\u4f5c\u4e86\uff0c\u5c31\u6211\u9084\u5728\u6f02',\n '\u5c0d\u81ea\u5df1\u7684\u80fd\u529b\u5f88\u6c92\u4fe1\u5fc3',\n '\u4e0d\u77e5\u9053\u8a72\u600e\u9ebc\u5beb\u597d\u5c65\u6b77\u548c\u6e96\u5099\u9762\u8a66',\n '\u5bb6\u4eba\u4e00\u76f4\u50ac\uff0c\u58d3\u529b\u5f88\u5927'\n ],\n career_B: [\n '\u5de5\u4f5c\u7a69\u5b9a\u4f46\u6beb\u7121\u6210\u5c31\u611f\uff0c\u6bcf\u5929\u50cf\u5728\u6df7\u65e5\u5b50',\n '\u4ed8\u51fa\u5f88\u591a\u4f46\u5347\u9077\u52a0\u85aa\u8f2a\u4e0d\u5230\u6211',\n '\u4e3b\u7ba1\u6216\u540c\u4e8b\u5f88\u96e3\u641e\uff0c\u8077\u5834\u95dc\u4fc2\u8b93\u6211\u5fc3\u7d2f',\n '\u5de5\u4f5c\u91cf\u592a\u5927\uff0c\u5feb\u8981\u6490\u4e0d\u4f4f\u4e86',\n '\u5de5\u4f5c\u548c\u751f\u6d3b\u5b8c\u5168\u5931\u8861\uff0c\u6c92\u6709\u81ea\u5df1\u7684\u6642\u9593',\n '\u89ba\u5f97\u81ea\u5df1\u7684\u80fd\u529b\u8ddf\u4e0d\u4e0a\uff0c\u5f88\u7126\u616e',\n '\u5718\u968a\u5f88\u96e3\u5e36\uff0c\u6e9d\u901a\u6210\u672c\u592a\u9ad8',\n '\u505a\u7684\u4e8b\u60c5\u6c92\u6709\u610f\u7fa9\u611f\uff0c\u6bcf\u5929\u5728\u6d88\u8017\u71b1\u60c5',\n '\u60f3\u8f49\u8077\u4f46\u6015\u9078\u932f\uff0c\u4e0d\u6562\u8de8\u51fa\u53bb',\n '\u8fa6\u516c\u5ba4\u653f\u6cbb\u8b93\u6211\u5fc3\u5f88\u7d2f'\n ],\n career_C: [\n '\u60f3\u5275\u696d\u6216\u505a\u526f\u696d\uff0c\u4f46\u4e0d\u77e5\u9053\u600e\u9ebc\u958b\u59cb',\n '\u6848\u5b50\u6709\u4e00\u642d\u6c92\u4e00\u642d\uff0c\u6536\u5165\u5f88\u4e0d\u7a69\u5b9a',\n '\u4e00\u500b\u4eba\u625b\u6240\u6709\u4e8b\u60c5\uff0c\u5f88\u5b64\u7368',\n '\u4e0d\u77e5\u9053\u81ea\u5df1\u7684\u65b9\u5411\u5c0d\u4e0d\u5c0d',\n '\u60f3\u8f49\u8077\u4f46\u6015\u9078\u932f\u884c\u696d\uff0c\u4ee3\u50f9\u592a\u5927',\n '\u7f3a\u4e4f\u4eba\u8108\u548c\u8cc7\u6e90\uff0c\u4e0d\u77e5\u9053\u53bb\u54ea\u627e',\n '\u5ba2\u6236\u6216\u6848\u6e90\u5f88\u4e0d\u7a69\u5b9a',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5b9a\u50f9\uff0c\u7e3d\u89ba\u5f97\u81ea\u5df1\u8981\u7684\u592a\u5c11',\n '\u8eab\u908a\u7684\u4eba\u4e0d\u7406\u89e3\u6211\u70ba\u4ec0\u9ebc\u8981\u5192\u96aa',\n '\u6642\u9593\u7ba1\u7406\u4e00\u5718\u4e82\uff0c\u6548\u7387\u5f88\u4f4e'\n ],\n family_A: [\n '\u7238\u5abd\u7ba1\u592a\u591a\uff0c\u4ec0\u9ebc\u90fd\u8981\u63d2\u624b',\n '\u7236\u6bcd\u7e3d\u662f\u62ff\u6211\u8ddf\u5225\u4eba\u6bd4\u8f03',\n '\u5bb6\u4eba\u7684\u671f\u5f85\u548c\u6211\u60f3\u8981\u7684\u5b8c\u5168\u4e0d\u540c',\n '\u7236\u6bcd\u504f\u5fc3\uff0c\u8b93\u6211\u89ba\u5f97\u4e0d\u88ab\u91cd\u8996',\n '\u548c\u5bb6\u4eba\u7684\u6e9d\u901a\u7e3d\u662f\u8b8a\u6210\u5435\u67b6',\n '\u50ac\u5a5a\u50ac\u751f\u7684\u58d3\u529b\u8b93\u6211\u5598\u4e0d\u904e\u6c23',\n '\u539f\u751f\u5bb6\u5ead\u7684\u9670\u5f71\u4e00\u76f4\u5f71\u97ff\u8457\u6211',\n '\u60f3\u4fdd\u6301\u8ddd\u96e2\u53c8\u6015\u88ab\u8aaa\u4e0d\u5b5d\uff0c\u5f88\u77db\u76fe',\n '\u7236\u6bcd\u5c0d\u6211\u7684\u4eba\u751f\u9078\u64c7\u4e0d\u8a8d\u540c',\n '\u89ba\u5f97\u4e0d\u7ba1\u600e\u9ebc\u505a\u90fd\u9054\u4e0d\u5230\u7238\u5abd\u7684\u6a19\u6e96'\n ],\n family_B: [\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u8ddf\u53db\u9006\u671f\u7684\u5b69\u5b50\u76f8\u8655',\n '\u5b69\u5b50\u8d8a\u5927\u8d8a\u4e0d\u8ddf\u6211\u8aaa\u5fc3\u4e8b',\n '\u64d4\u5fc3\u5b69\u5b50\u7684\u672a\u4f86\uff0c\u4f46\u53c8\u6015\u7ba1\u592a\u591a',\n '\u8ddf\u53e6\u4e00\u534a\u7684\u6559\u990a\u89c0\u5ff5\u4e0d\u540c\uff0c\u5e38\u8d77\u885d\u7a81',\n '\u70ba\u4e86\u5b69\u5b50\u72a7\u7272\u592a\u591a\u81ea\u5df1\uff0c\u89ba\u5f97\u5f88\u59d4\u5c48',\n '\u5b69\u5b50\u6c89\u8ff7 3C\uff0c\u600e\u9ebc\u8aaa\u90fd\u4e0d\u807d',\n '\u5728\u5de5\u4f5c\u548c\u966a\u4f34\u5b69\u5b50\u4e4b\u9593\u62c9\u626f\uff0c\u5f88\u5167\u759a',\n '\u89ba\u5f97\u81ea\u5df1\u4e0d\u662f\u4e00\u500b\u597d\u7238\u7238\/\u597d\u5abd\u5abd',\n '\u5b69\u5b50\u7684\u5b78\u696d\u58d3\u529b\u8b93\u5168\u5bb6\u90fd\u5f88\u7dca\u7e43',\n '\u9577\u8f29\u4e00\u76f4\u5e72\u6d89\u6211\u600e\u9ebc\u6559\u5b69\u5b50'\n ],\n family_C: [\n '\u5a46\u5ab3\/\u7fc1\u5a7f\u95dc\u4fc2\u8655\u4e0d\u597d\uff0c\u593e\u5728\u4e2d\u9593\u5f88\u75db\u82e6',\n '\u53e6\u4e00\u534a\u6c38\u9060\u7ad9\u5728\u4ed6\u5bb6\u4eba\u90a3\u908a',\n '\u5144\u5f1f\u59d0\u59b9\u4e4b\u9593\u5206\u914d\u4e0d\u516c\u5e73',\n '\u904e\u5e74\u904e\u7bc0\u56de\u8ab0\u5bb6\u7684\u554f\u984c\u8b93\u6211\u5f88\u7169',\n '\u88ab\u8981\u6c42\u8981\u5b5d\u9806\uff0c\u4f46\u5c0d\u65b9\u5bb6\u4eba\u5f88\u96e3\u76f8\u8655',\n '\u5bb6\u65cf\u805a\u6703\u7e3d\u662f\u5145\u6eff\u6bd4\u8f03\u548c\u9592\u8a71',\n '\u9577\u8f29\u5e72\u6d89\u6211\u5011\u7684\u751f\u6d3b\u6c7a\u5b9a',\n '\u89ba\u5f97\u81ea\u5df1\u5728\u9019\u500b\u5bb6\u88e1\u662f\u5916\u4eba',\n '\u624b\u8db3\u4e4b\u9593\u611f\u60c5\u8b8a\u6de1\uff0c\u8d8a\u4f86\u8d8a\u758f\u9060',\n '\u5bb6\u88e1\u7684\u7d93\u6fdf\u5206\u64d4\u8b93\u4eba\u89ba\u5f97\u4e0d\u516c\u5e73'\n ],\n social_A: [\n '\u5f88\u96e3\u4ea4\u5230\u771f\u6b63\u804a\u5f97\u4f86\u7684\u670b\u53cb',\n '\u793e\u4ea4\u5834\u5408\u4e0d\u77e5\u9053\u804a\u4ec0\u9ebc\uff0c\u5bb9\u6613\u5c37\u5c2c\u51b7\u5834',\n '\u5728\u5718\u9ad4\u88e1\u7e3d\u662f\u900f\u660e\u4eba\uff0c\u6c92\u6709\u5b58\u5728\u611f',\n '\u5230\u4e86\u65b0\u74b0\u5883\u4e0d\u77e5\u9053\u600e\u9ebc\u878d\u5165',\n '\u89ba\u5f97\u5927\u5bb6\u90fd\u6709\u81ea\u5df1\u7684\u5c0f\u5708\u5b50\uff0c\u63d2\u4e0d\u9032\u53bb',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u7dad\u6301\u525b\u8a8d\u8b58\u7684\u53cb\u8abc',\n '\u5bb3\u6015\u88ab\u6392\u64e0\u6216\u88ab\u8a0e\u53ad',\n '\u89ba\u5f97\u81ea\u5df1\u500b\u6027\u592a\u5167\u5411\uff0c\u4ea4\u4e0d\u5230\u670b\u53cb',\n '\u7dda\u4e0a\u804a\u5929\u5f88\u5bb9\u6613\uff0c\u4f46\u898b\u9762\u5c31\u4e0d\u77e5\u9053\u8aaa\u4ec0\u9ebc',\n '\u8eab\u908a\u7684\u4eba\u90fd\u6709\u95a8\u871c\/\u5144\u5f1f\uff0c\u5c31\u6211\u6c92\u6709'\n ],\n social_B: [\n '\u670b\u53cb\u8d8a\u4f86\u8d8a\u5c11\uff0c\u611f\u89ba\u88ab\u4e16\u754c\u907a\u5fd8\u4e86',\n '\u7e3d\u662f\u7576\u90a3\u500b\u4ed8\u51fa\u6bd4\u8f03\u591a\u7684\u4eba\uff0c\u89ba\u5f97\u4e0d\u516c\u5e73',\n '\u4e0d\u61c2\u5f97\u62d2\u7d55\uff0c\u7d50\u679c\u81ea\u5df1\u7d2f\u5230\u4e0d\u884c',\n '\u89ba\u5f97\u8eab\u908a\u7684\u4eba\u90fd\u662f\u8868\u9762\u670b\u53cb',\n '\u88ab\u670b\u53cb\u80cc\u53db\u6216\u8aaa\u9592\u8a71\uff0c\u5f88\u53d7\u50b7',\n '\u8001\u662f\u88ab\u7576\u5de5\u5177\u4eba\u6216\u60c5\u7dd2\u5783\u573e\u6876',\n '\u6709\u4e9b\u670b\u53cb\u60f3\u65b7\u4f46\u53c8\u65b7\u4e0d\u4e7e\u6de8',\n '\u5927\u5bb6\u751f\u6d3b\u5708\u4e0d\u540c\u4e86\uff0c\u805a\u5728\u4e00\u8d77\u4e5f\u6c92\u8a71\u804a',\n '\u793e\u4ea4\u6d3b\u52d5\u597d\u7d2f\uff0c\u4f46\u4e0d\u53bb\u53c8\u6015\u88ab\u908a\u7de3\u5316',\n '\u501f\u9322\u6216\u4eba\u60c5\u554f\u984c\u8b93\u53cb\u8abc\u8b8a\u5f97\u5f88\u5c37\u5c2c'\n ],\n money_A: [\n '\u96f6\u7528\u9322\u4e0d\u5920\u82b1\uff0c\u4f46\u53c8\u4e0d\u597d\u610f\u601d\u8ddf\u5bb6\u88e1\u8981',\n '\u6253\u5de5\u592a\u7d2f\u5f71\u97ff\u5b78\u696d\uff0c\u4e0d\u6253\u5de5\u53c8\u6c92\u9322',\n '\u770b\u5230\u540c\u5b78\u90fd\u5728\u82b1\u9322\uff0c\u81ea\u5df1\u537b\u8981\u7701\u5403\u5109\u7528',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u958b\u59cb\u5b58\u7b2c\u4e00\u6876\u91d1',\n '\u60f3\u8981\u7d93\u6fdf\u7368\u7acb\uff0c\u4f46\u5b8c\u5168\u4e0d\u77e5\u9053\u600e\u9ebc\u505a',\n '\u5b78\u8cb8\u58d3\u529b\u8b93\u6211\u5f88\u7126\u616e',\n '\u670b\u53cb\u4e4b\u9593\u7684\u6d88\u8cbb\u6c34\u5e73\u5dee\u592a\u591a\uff0c\u5f88\u6709\u58d3\u529b',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5206\u914d\u6709\u9650\u7684\u751f\u6d3b\u8cbb',\n '\u60f3\u6295\u8cc7\u4f46\u672c\u91d1\u592a\u5c11\uff0c\u4e0d\u77e5\u9053\u5f9e\u54ea\u958b\u59cb',\n '\u89ba\u5f97\u8b80\u66f8\u5c31\u662f\u5728\u71d2\u9322\uff0c\u4e0d\u77e5\u9053\u503c\u4e0d\u503c\u5f97'\n ],\n money_B: [\n '\u9322\u4e0d\u77e5\u4e0d\u89ba\u5c31\u82b1\u5b8c\u4e86\uff0c\u5b58\u4e0d\u4f4f',\n '\u6536\u5165\u592a\u5c11\uff0c\u6bcf\u500b\u6708\u90fd\u5728\u5403\u571f',\n '\u60f3\u958b\u59cb\u6295\u8cc7\u7406\u8ca1\u4f46\u5b8c\u5168\u4e0d\u77e5\u9053\u600e\u9ebc\u505a',\n '\u548c\u53e6\u4e00\u534a\/\u5bb6\u4eba\u7684\u91d1\u9322\u89c0\u5dee\u592a\u591a',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5206\u914d\u85aa\u6c34\u624d\u5408\u7406',\n '\u660e\u660e\u6709\u5728\u8cfa\uff0c\u4f46\u5c31\u662f\u6c92\u6709\u5b89\u5168\u611f',\n '\u60f3\u627e\u9069\u5408\u81ea\u5df1\u7684\u526f\u696d\u6216\u8cfa\u9322\u65b9\u5f0f',\n '\u623f\u50f9\u592a\u9ad8\uff0c\u89ba\u5f97\u6c38\u9060\u8cb7\u4e0d\u8d77\u623f',\n '\u70ba\u4e86\u7701\u9322\u72a7\u7272\u751f\u6d3b\u54c1\u8cea\uff0c\u89ba\u5f97\u5f88\u59d4\u5c48',\n '\u540c\u9f61\u4eba\u90fd\u8cb7\u8eca\u8cb7\u623f\u4e86\uff0c\u81ea\u5df1\u9084\u5728\u539f\u5730\u8e0f\u6b65'\n ],\n money_C: [\n '\u80cc\u8457\u8cb8\u6b3e\u6216\u50b5\u52d9\uff0c\u58d3\u529b\u5f88\u5927',\n '\u4e00\u500b\u4eba\u625b\u5168\u5bb6\u7684\u958b\u92b7\uff0c\u5598\u4e0d\u904e\u6c23',\n '\u751f\u610f\u4e0d\u597d\u505a\uff0c\u4e0d\u77e5\u9053\u9084\u80fd\u6490\u591a\u4e45',\n '\u73fe\u91d1\u6d41\u4e00\u76f4\u5f88\u7dca\uff0c\u6bcf\u500b\u6708\u90fd\u5728\u5468\u8f49',\n '\u88ab\u6b20\u9322\u6216\u6295\u8cc7\u5931\u5229\uff0c\u4e0d\u77e5\u9053\u600e\u9ebc\u7ffb\u8eab',\n '\u5bb6\u4eba\u4e0d\u77e5\u9053\u6211\u7684\u8ca1\u52d9\u58d3\u529b\u6709\u591a\u5927',\n '\u4e0d\u77e5\u9053\u8a72\u5148\u9084\u50b5\u9084\u662f\u5148\u6295\u8cc7',\n '\u4fdd\u96aa\u3001\u9000\u4f11\u91d1\u9019\u4e9b\u90fd\u6c92\u898f\u5283\uff0c\u5f88\u614c',\n '\u70ba\u4e86\u9322\u72a7\u7272\u5065\u5eb7\u548c\u5bb6\u5ead\uff0c\u503c\u5f97\u55ce\uff1f',\n '\u89ba\u5f97\u88ab\u9322\u7d81\u4f4f\u4e86\uff0c\u5b8c\u5168\u6c92\u6709\u81ea\u7531'\n ],\n study_A: [\n '\u8003\u8a66\u58d3\u529b\u5927\u5230\u5598\u4e0d\u904e\u6c23',\n '\u4e0d\u77e5\u9053\u8a72\u9078\u4ec0\u9ebc\u79d1\u7cfb',\n '\u6210\u7e3e\u600e\u9ebc\u52aa\u529b\u90fd\u4e0a\u4e0d\u53bb\uff0c\u5f88\u632b\u6298',\n '\u7236\u6bcd\u5c0d\u6211\u7684\u5b78\u696d\u671f\u5f85\u592a\u9ad8',\n '\u89ba\u5f97\u8b80\u66f8\u5f88\u7121\u804a\uff0c\u63d0\u4e0d\u8d77\u52c1',\n '\u8eab\u908a\u7684\u4eba\u90fd\u6709\u76ee\u6a19\uff0c\u5c31\u6211\u9084\u5728\u8ff7\u8def',\n '\u88dc\u7fd2\u88dc\u5230\u6c92\u6709\u81ea\u5df1\u7684\u6642\u9593',\n '\u6015\u8003\u4e0d\u4e0a\u7406\u60f3\u7684\u5b78\u6821\uff0c\u5c0d\u4e0d\u8d77\u7238\u5abd',\n '\u60f3\u8d70\u81ea\u5df1\u60f3\u8d70\u7684\u8def\uff0c\u4f46\u5bb6\u4eba\u4e0d\u652f\u6301',\n '\u58d3\u529b\u5927\u5230\u7761\u4e0d\u597d\uff0c\u7cbe\u795e\u5f88\u5dee'\n ],\n study_B: [\n '\u8b80\u7684\u79d1\u7cfb\u4e0d\u662f\u6211\u60f3\u8981\u7684\uff0c\u4f46\u4e0d\u6562\u8f49',\n '\u77e5\u9053\u8a72\u8b80\u66f8\u4f46\u5c31\u662f\u63d0\u4e0d\u8d77\u52c1',\n '\u4e0d\u77e5\u9053\u7562\u696d\u4e4b\u5f8c\u8981\u5e79\u561b',\n '\u89ba\u5f97\u5b78\u6821\u6559\u7684\u6771\u897f\u6839\u672c\u6c92\u7528',\n '\u60f3\u4f11\u5b78\u6216\u91cd\u8003\uff0c\u4f46\u6015\u6d6a\u8cbb\u6642\u9593',\n '\u8ad6\u6587\/\u5831\u544a\u58d3\u529b\u5927\u5230\u60f3\u653e\u68c4',\n '\u8eab\u908a\u7684\u4eba\u90fd\u5728\u5be6\u7fd2\u6216\u8003\u8b49\u7167\uff0c\u6211\u537b\u4ec0\u9ebc\u90fd\u6c92\u505a',\n '\u6559\u6388\u5f88\u96e3\u6e9d\u901a\uff0c\u5e2b\u751f\u95dc\u4fc2\u8b93\u6211\u5f88\u75db\u82e6',\n '\u4e0d\u78ba\u5b9a\u8a72\u7e7c\u7e8c\u5347\u5b78\u9084\u662f\u76f4\u63a5\u53bb\u5de5\u4f5c',\n '\u5927\u5b78\u751f\u6d3b\u8ddf\u6211\u60f3\u7684\u5b8c\u5168\u4e0d\u4e00\u6a23'\n ],\n study_C: [\n '\u8003\u4e86\u597d\u5e7e\u6b21\u90fd\u6c92\u8003\u4e0a\uff0c\u5feb\u8981\u653e\u68c4\u4e86',\n '\u908a\u5de5\u4f5c\u908a\u8b80\u66f8\uff0c\u6642\u9593\u6839\u672c\u4e0d\u5920\u7528',\n '\u4e0d\u78ba\u5b9a\u8003\u9019\u500b\u8b49\u7167\u5230\u5e95\u6709\u6c92\u6709\u7528',\n '\u7562\u696d\u5f8c\u624d\u767c\u73fe\u5b78\u6b77\u6c92\u6709\u60f3\u50cf\u4e2d\u91cd\u8981',\n '\u6295\u4e86\u5f88\u591a\u5c65\u6b77\u90fd\u8981\u6c42\u7d93\u9a57\uff0c\u4f46\u6211\u6c92\u6709',\n '\u4e0d\u77e5\u9053\u8a72\u5148\u5de5\u4f5c\u9084\u662f\u5148\u8003\u7814\u7a76\u6240',\n '\u6e96\u5099\u8003\u8a66\u7684\u904e\u7a0b\u592a\u5b64\u7368\uff0c\u5f88\u60f3\u653e\u68c4',\n '\u82b1\u4e86\u5f88\u591a\u9322\u88dc\u7fd2\uff0c\u58d3\u529b\u66f4\u5927\u4e86',\n '\u5e74\u7d00\u8d8a\u4f86\u8d8a\u5927\uff0c\u89ba\u5f97\u81ea\u5df1\u4f86\u4e0d\u53ca\u4e86',\n '\u8eab\u908a\u7684\u4eba\u90fd\u5728\u5de5\u4f5c\u8cfa\u9322\uff0c\u6211\u9084\u5728\u8b80\u66f8'\n ]\n },\n stepTitles: { 1: '\u4f60\u76ee\u524d\u751f\u6d3b\u4e2d\u6700\u5728\u610f\u7684\u4e8b\uff1f', 2: '\u4f60\u5728\u9019\u4ef6\u4e8b\u4e2d\u7684\u8eab\u4efd\u662f\uff1f', 3: '\u6700\u8b93\u4f60\u56f0\u64fe\u7684\u662f\uff1f' },\n stepLabels: { 1: '\u6700\u5f8c\u4e00\u500b\u554f\u984c', 2: '\u518d\u4e00\u6b65\u5c31\u5b8c\u6210\u4e86', 3: '\u9078\u51fa\u6700\u6709\u5171\u9cf4\u7684\u4e00\u9805' }\n };\n\n let lcStep = 1;\n const lcDom = {};\n\n function initLcDom() {\n lcDom.overlay = document.getElementById('lcOverlay');\n lcDom.stars = document.getElementById('lcStars');\n lcDom.title = document.getElementById('lcTitle');\n lcDom.label = document.getElementById('lcLabel');\n lcDom.step1 = document.getElementById('lcStep1');\n lcDom.step2 = document.getElementById('lcStep2');\n lcDom.step3 = document.getElementById('lcStep3');\n lcDom.summary = document.getElementById('lcSummary');\n lcDom.confirmArea = document.getElementById('lcConfirmArea');\n lcDom.backBtn = document.getElementById('lcBackBtn');\n lcDom.scroll = document.getElementById('lcScroll');\n lcDom.dots = [document.getElementById('lcDot1'), document.getElementById('lcDot2'), document.getElementById('lcDot3')];\n lcDom.lines = [document.getElementById('lcLine1'), document.getElementById('lcLine2')];\n }\n\n function createLcStars() {\n if (!lcDom.stars) return;\n lcDom.stars.innerHTML = '';\n for (let i = 0; i < 50; i++) {\n const s = document.createElement('div');\n s.className = 'lc-star';\n const sz = Math.random() < 0.3 ? 3 : 2;\n s.style.cssText = `width:${sz}px;height:${sz}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--d:${2+Math.random()*4}s;--dl:${Math.random()*3}s;box-shadow:0 0 ${sz*2}px rgba(255,255,255,${0.3+Math.random()*0.4});`;\n lcDom.stars.appendChild(s);\n }\n }\n\n function showLifeConcern() {\n initLcDom();\n createLcStars();\n\n \/\/ \u5982\u679c\u6709\u5df2\u4fdd\u5b58\u7684\u9032\u5ea6\uff08\u4e3b\u984c\u5df2\u9078\uff09\uff0c\u6062\u5fa9\u5230\u5c0d\u61c9\u6b65\u9a5f\n const hasSavedProgress = lcSelected.topicKey !== null;\n\n if (!hasSavedProgress) {\n \/\/ \u5168\u65b0\uff1a\u5f9e Step 1 \u958b\u59cb\n lcStep = 1;\n lcSelected = { topicIdx: null, topicKey: null, topicName: null, role: null, concern: null };\n\n lcDom.step1.classList.remove('lc-hidden');\n lcDom.step2.classList.add('lc-hidden'); lcDom.step2.classList.remove('show');\n lcDom.step3.classList.add('lc-hidden'); lcDom.step3.classList.remove('show');\n lcDom.confirmArea.classList.remove('show');\n document.querySelectorAll('.lc-topic-card').forEach(c => c.classList.remove('selected'));\n\n lcDom.overlay.style.display = 'flex';\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n lcDom.overlay.classList.add('active');\n lcDom.step1.classList.add('show');\n });\n });\n lcUpdateAll();\n } else {\n \/\/ \u6709\u9032\u5ea6\uff1a\u6062\u5fa9\u5230\u4fdd\u5b58\u7684\u6b65\u9a5f\n const targetStep = lcStep || 1;\n lcDom.overlay.style.display = 'flex';\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n lcDom.overlay.classList.add('active');\n lcGoToStep(targetStep);\n });\n });\n }\n }\n\n \/\/ \ud83c\udf1f \u56de\u5230\u6307\u5b9a\u6b65\u9a5f\uff08\u4fdd\u7559\u5df2\u9078\u8cc7\u6599\uff09\n function showLifeConcernAtStep(targetStep) {\n initLcDom();\n if (!lcDom.stars.hasChildNodes()) createLcStars();\n\n lcDom.overlay.style.display = 'flex';\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n lcDom.overlay.classList.add('active');\n lcGoToStep(targetStep);\n });\n });\n }\n\n function lcUpdateAll() {\n \/\/ \u9032\u5ea6\u9ede\n lcDom.dots.forEach((d, i) => {\n d.classList.toggle('active', i + 1 === lcStep);\n d.classList.toggle('done', i + 1 < lcStep);\n });\n lcDom.lines.forEach((l, i) => { l.classList.toggle('done', i + 1 < lcStep); });\n\n \/\/ \u6a19\u984c\n lcDom.title.classList.remove('show');\n lcDom.label.classList.remove('show');\n setTimeout(() => {\n lcDom.label.textContent = LC_DATA.stepLabels[lcStep];\n lcDom.title.textContent = LC_DATA.stepTitles[lcStep];\n lcDom.label.classList.add('show');\n lcDom.title.classList.add('show');\n }, 150);\n\n \/\/ \u6458\u8981\n let tags = [];\n if (lcSelected.topicName) {\n const t = LC_DATA.topics[lcSelected.topicIdx];\n tags.push({ text: `${t.icon} ${t.name}`, step: 1 });\n }\n if (lcSelected.role) tags.push({ text: lcSelected.role, step: 2 });\n lcDom.summary.innerHTML = tags.map(t =>\n `<span class=\"lc-summary-tag\" onclick=\"lcGoToStep(${t.step})\">${t.text}<\/span>`\n ).join('');\n\n \/\/ \u8fd4\u56de\u6309\u9215\uff1aStep 1 \u986f\u793a\u300c\u8fd4\u56de\u4e0a\u4e00\u984c\u300d\uff0cStep 2\/3 \u986f\u793a\u300c\u4e0a\u4e00\u6b65\u300d\n lcDom.backBtn.classList.add('show');\n lcDom.backBtn.textContent = lcStep === 1 ? '\u2190 \u8fd4\u56de\u4e0a\u4e00\u984c' : '\u2190 \u4e0a\u4e00\u6b65';\n\n \/\/ \u78ba\u8a8d\u6309\u9215\n lcDom.confirmArea.classList.remove('show');\n }\n\n function lcGoToStep(step) {\n lcDom.step1.classList.add('lc-hidden'); lcDom.step1.classList.remove('show');\n lcDom.step2.classList.add('lc-hidden'); lcDom.step2.classList.remove('show');\n lcDom.step3.classList.add('lc-hidden'); lcDom.step3.classList.remove('show');\n lcDom.confirmArea.classList.remove('show');\n\n lcStep = step;\n if (lcDom.scroll) lcDom.scroll.scrollTop = 0;\n lcUpdateAll();\n\n setTimeout(() => {\n if (step === 1) {\n lcDom.step1.classList.remove('lc-hidden');\n \/\/ \u91cd\u65b0\u6a19\u8a18\u5df2\u9078\u4e3b\u984c\n document.querySelectorAll('.lc-topic-card').forEach((c, i) => {\n c.classList.toggle('selected', i === lcSelected.topicIdx);\n });\n requestAnimationFrame(() => lcDom.step1.classList.add('show'));\n } else if (step === 2) {\n lcRenderRoles();\n lcDom.step2.classList.remove('lc-hidden');\n requestAnimationFrame(() => lcDom.step2.classList.add('show'));\n } else if (step === 3) {\n lcRenderConcerns();\n lcDom.step3.classList.remove('lc-hidden');\n requestAnimationFrame(() => lcDom.step3.classList.add('show'));\n }\n }, 200);\n }\n\n window.lcSelectTopic = function(idx) {\n lcSelected.topicIdx = idx;\n lcSelected.topicKey = LC_DATA.topics[idx].key;\n lcSelected.topicName = LC_DATA.topics[idx].name;\n lcSelected.role = null;\n lcSelected.concern = null;\n document.querySelectorAll('.lc-topic-card').forEach((c, i) => { c.classList.toggle('selected', i === idx); });\n saveLcProgress();\n setTimeout(() => lcGoToStep(2), 300);\n };\n\n function lcRenderRoles() {\n const roles = LC_DATA.roles[lcSelected.topicKey] || [];\n lcDom.step2.innerHTML = roles.map((r, i) =>\n `<div class=\"lc-role-pill${lcSelected.role === r ? ' selected' : ''}\" onclick=\"lcSelectRole(${i})\">${r}<\/div>`\n ).join('');\n }\n\n window.lcSelectRole = function(idx) {\n const roles = LC_DATA.roles[lcSelected.topicKey] || [];\n lcSelected.role = roles[idx];\n lcSelected.concern = null;\n document.querySelectorAll('.lc-role-pill').forEach((p, i) => { p.classList.toggle('selected', i === idx); });\n saveLcProgress();\n setTimeout(() => lcGoToStep(3), 300);\n };\n\n function lcGetConcerns() {\n const group = LC_DATA.roleGroups[lcSelected.topicKey]?.[lcSelected.role] || 'A';\n const key = lcSelected.topicKey + '_' + group;\n const list = LC_DATA.concerns[key] || [];\n return [...list, LC_DATA.skipOption];\n }\n\n function lcRenderConcerns() {\n const concerns = lcGetConcerns();\n lcDom.step3.innerHTML = concerns.map((c, i) => {\n const isSkip = (c === LC_DATA.skipOption);\n return `<div class=\"lc-concern-item${lcSelected.concern === c ? ' selected' : ''}${isSkip ? ' lc-skip-option' : ''}\" onclick=\"lcSelectConcern(${i})\">\n <div class=\"lc-concern-radio\"><\/div>\n <div class=\"lc-concern-text\">${c}<\/div>\n <\/div>`;\n }).join('');\n if (lcSelected.concern) lcDom.confirmArea.classList.add('show');\n }\n\n window.lcSelectConcern = function(idx) {\n const concerns = lcGetConcerns();\n lcSelected.concern = concerns[idx];\n document.querySelectorAll('.lc-concern-item').forEach((item, i) => { item.classList.toggle('selected', i === idx); });\n lcDom.confirmArea.classList.add('show');\n saveLcProgress();\n };\n\n window.lcGoBack = function() {\n if (lcStep > 1) {\n lcGoToStep(lcStep - 1);\n saveLcProgress();\n } else {\n \/\/ Step 1 \u2192 \u8fd4\u56de Q93\n clearLcProgress();\n lcSelected = { topicIdx: null, topicKey: null, topicName: null, role: null, concern: null };\n lcCompleted = false;\n lcDom.overlay.classList.remove('active');\n setTimeout(() => {\n lcDom.overlay.style.display = 'none';\n \/\/ \u56de\u5230 Q93\uff08quizData \u5012\u6578\u7b2c\u4e8c\u500b\uff09\n currentIdx = quizData.length - 2;\n isTransitioning = false;\n renderQuestion(quizData[currentIdx]);\n }, 500);\n }\n };\n\n window.lcConfirm = function() {\n if (!lcSelected.concern) return;\n lcCompleted = true;\n saveLcProgress();\n console.log('\ud83d\udce6 Life Concern \u7d50\u679c:', lcSelected);\n\n \/\/ \u76f4\u63a5\u89f8\u767c\u6700\u7d42\u611f\u8b1d\u9801\uff08z-index 9999 \u6703\u84cb\u5728 LC overlay z-index 9998 \u4e0a\u65b9\uff09\n \/\/ \u4e0d\u5148\u6de1\u51fa LC\uff0c\u907f\u514d\u9583\u904e Q93 \u756b\u9762\n checkTransitionAndLoad();\n\n \/\/ \u7b49\u6700\u7d42\u9801\u52d5\u756b\u51fa\u73fe\u5f8c\uff0c\u518d\u96b1\u85cf LC overlay\n setTimeout(() => {\n lcDom.overlay.classList.remove('active');\n lcDom.overlay.style.display = 'none';\n }, 800);\n };\n\n \/* =========================================\n \ud83d\udd25 \u7159\u706b\u5f15\u64ce - \u652f\u63f4\u4e0d\u540c\u984f\u8272\n ========================================= *\/\n const canvas = document.getElementById('fireworksCanvas');\n const ctx = canvas.getContext('2d');\n let particles = []; let fireworksInterval;\n let animationFrameId;\n\n function resizeCanvas() {\n const dpr = window.devicePixelRatio || 1;\n const width = window.innerWidth;\n const height = window.innerHeight;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n ctx.scale(dpr, dpr);\n canvas.style.width = width + 'px';\n canvas.style.height = height + 'px';\n }\n window.addEventListener('resize', resizeCanvas); resizeCanvas();\n\n function createParticle(x, y) {\n \/\/ \u4f7f\u7528\u7576\u524d\u7ae0\u7bc0\u7684\u984f\u8272\n const baseHue = currentFireworkHues[Math.floor(Math.random() * currentFireworkHues.length)];\n const isMobile = window.innerWidth < 768;\n const particleCount = isMobile ? 60 : 120; \/\/ \u66f4\u591a\u7d30\u5c0f\u7c92\u5b50\n\n for (let i = 0; i < particleCount; i++) {\n const hue = baseHue + (Math.random() * 15 - 7.5); \/\/ \u8f15\u5fae\u8272\u76f8\u8b8a\u5316\n particles.push({\n x: x, y: y,\n hue: hue,\n speed: Math.random() * 2.5 + 0.3, \/\/ \u8f03\u6162\u64f4\u6563\n angle: Math.random() * Math.PI * 2,\n alpha: 0.9 + Math.random() * 0.1,\n decay: Math.random() * 0.008 + 0.003, \/\/ \u66f4\u6162\u8870\u6e1b\n size: Math.random() * 0.8 + 0.2 \/\/ \u66f4\u7d30\u5c0f\u7684\u7c92\u5b50\n });\n }\n }\n\n function updateFireworks() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n\n \/\/ \u66f4\u67d4\u548c\u7684\u6de1\u51fa\u6548\u679c\n ctx.globalAlpha = 1;\n ctx.globalCompositeOperation = 'source-over';\n ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'; \/\/ \u66f4\u6162\u6de1\u51fa\uff0c\u62d6\u5c3e\u66f4\u9577\n ctx.fillRect(0, 0, width, height);\n ctx.globalCompositeOperation = 'lighter';\n\n for (let i = particles.length - 1; i >= 0; i--) {\n let p = particles[i];\n p.x += Math.cos(p.angle) * p.speed;\n p.y += Math.sin(p.angle) * p.speed + 0.3; \/\/ \u8f15\u5fae\u4e0b\u589c\n p.speed *= 0.985; \/\/ \u9010\u6f38\u6e1b\u901f\n p.alpha -= p.decay;\n\n if (p.alpha <= 0) {\n particles.splice(i, 1);\n continue;\n }\n\n \/\/ \u4f7f\u7528\u5f91\u5411\u6f38\u5c64\u7e6a\u88fd\uff0c\u66f4\u67d4\u548c\n const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 3);\n gradient.addColorStop(0, `hsla(${p.hue}, 65%, 75%, ${p.alpha})`);\n gradient.addColorStop(0.3, `hsla(${p.hue}, 75%, 65%, ${p.alpha * 0.5})`);\n gradient.addColorStop(1, `hsla(${p.hue}, 85%, 55%, 0)`);\n\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2);\n ctx.fill();\n }\n\n if (isTransitioning) {\n animationFrameId = requestAnimationFrame(updateFireworks);\n }\n }\n\n function startFireworks() {\n if (fireworksInterval) clearInterval(fireworksInterval);\n if (animationFrameId) cancelAnimationFrame(animationFrameId);\n updateFireworks();\n\n \/\/ \u958b\u5834\u653e\u4e00\u767c\n setTimeout(() => createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.5), 300);\n\n \/\/ \u4e3b\u5faa\u74b0 - \u9593\u9694 600ms\uff0c\u8f03\u70ba\u8212\u9069\n fireworksInterval = setInterval(() => {\n if (!isTransitioning) return;\n createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.6);\n }, 600);\n }\n\n function stopFireworks() {\n clearInterval(fireworksInterval);\n cancelAnimationFrame(animationFrameId);\n ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);\n particles = [];\n }\n\n \/* \u661f\u7a7a\u80cc\u666f *\/\n (function () {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initStarryBackground);\n } else { initStarryBackground(); }\n\n function initStarryBackground() {\n const starsContainer = document.getElementById('starsContainer');\n const meteorsContainer = document.getElementById('meteorsContainer');\n if (!starsContainer || !meteorsContainer) return;\n\n for (let i = 0; i < 120; i++) {\n const star = document.createElement('div');\n const size = Math.random();\n if (size > 0.95) star.className = 'star sparkle';\n else if (size > 0.8) star.className = 'star large';\n else if (size > 0.5) star.className = 'star medium';\n else star.className = 'star small';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.setProperty('--duration', (2 + Math.random() * 3) + 's');\n star.style.setProperty('--delay', Math.random() * 3 + 's');\n starsContainer.appendChild(star);\n }\n\n function createMeteor(isBig = false) {\n const meteor = document.createElement('div');\n meteor.className = isBig ? 'meteor big' : 'meteor';\n const startX = 30 + Math.random() * 65;\n const startY = 5 + Math.random() * 40;\n const duration = isBig ? 1.2 + Math.random() * 0.5 : 0.8 + Math.random() * 0.4;\n meteor.style.left = startX + '%';\n meteor.style.top = startY + '%';\n meteor.style.setProperty('--duration', duration + 's');\n meteorsContainer.appendChild(meteor);\n setTimeout(() => { meteor.classList.add('active'); }, 50);\n setTimeout(() => { meteor.remove(); }, duration * 1000 + 200);\n }\n\n setTimeout(() => createMeteor(), 500);\n setTimeout(() => createMeteor(), 2000);\n setTimeout(() => createMeteor(true), 4000);\n\n function scheduleMeteor() {\n const delay = 4000 + Math.random() * 6000;\n setTimeout(() => {\n createMeteor(Math.random() > 0.7);\n scheduleMeteor();\n }, delay);\n }\n setTimeout(scheduleMeteor, 5000);\n }\n })();\n\n \/\/ \ud83d\ude80 \u555f\u52d5\u6e2c\u9a57\uff08\u5148\u8f09\u5165 API \u8cc7\u6599\uff09\n initQuiz();\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Immersive Quiz &#821 […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9072","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/9072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/comments?post=9072"}],"version-history":[{"count":30,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/9072\/revisions"}],"predecessor-version":[{"id":9102,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/9072\/revisions\/9102"}],"wp:attachment":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/media?parent=9072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n \n \n \u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e1a\u0e1a\u0e2d\u0e34\u0e19\u0e40\u0e17\u0e2d\u0e23\u0e4c\u0e41\u0e2d\u0e04\u0e0a\u0e31\u0e48\u0e19 - Soul Quartet<\/title>\n <link\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+TC:wght@400;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap\"\n rel=\"stylesheet\">\n\n <style>\n :root {\n --txt-main: #f2ece9;\n --title-color: #d2cbc9 !important;\n --card-bg: rgba(44, 44, 44, 0.4);\n --accent-color: #a09f9b;\n --font-main: 'Noto Sans TC', sans-serif;\n --font-serif: 'Noto Serif TC', serif;\n --bg-grad-1: #5e4b49;\n --bg-grad-2: #695351;\n --bg-grad-3: #867b78;\n --bg-grad-4: #a09f9b;\n --bg-grad-5: #d2cbc9;\n }\n\n body,\n html {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n font-family: var(--font-main);\n overflow: hidden;\n background-color: transparent;\n }\n\n * {\n box-sizing: border-box;\n -webkit-tap-highlight-color: transparent;\n }\n\n \/* =========================================\n \u661f\u7a7a\u80cc\u666f\n ========================================= *\/\n .starry-background-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: -1;\n pointer-events: none;\n overflow: hidden;\n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n transition: background 1.5s ease;\n }\n\n .starry-background-wrapper::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);\n }\n\n .starry-background-wrapper::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.5px, transparent 0.5px), radial-gradient(circle, rgba(255, 255, 255, 0.08) 0.5px, transparent 0.5px);\n background-size: 25px 25px, 37px 37px;\n opacity: 0.6;\n animation: grain 8s steps(10) infinite;\n }\n\n @keyframes grain {\n 0% {\n transform: translate(0, 0);\n }\n\n 100% {\n transform: translate(-10%, 5%);\n }\n }\n\n @keyframes twinkle {\n\n 0%,\n 100% {\n opacity: 0.3;\n transform: scale(1);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2);\n }\n }\n\n @keyframes sparkle {\n\n 0%,\n 100% {\n opacity: 0.4;\n transform: scale(1);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.5);\n box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 40px rgba(200, 200, 255, 0.8);\n }\n }\n\n .starry-background-wrapper .stars {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n }\n\n .starry-background-wrapper .star {\n position: absolute;\n background: #fff;\n border-radius: 50%;\n animation: twinkle var(--duration) infinite ease-in-out;\n animation-delay: var(--delay);\n }\n\n .starry-background-wrapper .star.large {\n width: 4px;\n height: 4px;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);\n }\n\n .starry-background-wrapper .star.medium {\n width: 3px;\n height: 3px;\n box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);\n }\n\n .starry-background-wrapper .star.small {\n width: 2px;\n height: 2px;\n box-shadow: 0 0 5px rgba(255, 255, 255, 0.4);\n }\n\n .starry-background-wrapper .star.sparkle {\n width: 5px;\n height: 5px;\n box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(200, 200, 255, 0.5);\n animation: sparkle 2.5s infinite ease-in-out;\n animation-delay: var(--delay);\n }\n\n \/* \u6d41\u661f *\/\n .starry-background-wrapper .meteor {\n position: fixed;\n width: 5px;\n height: 5px;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.8);\n opacity: 0;\n z-index: 100;\n }\n\n .starry-background-wrapper .meteor.big {\n width: 10px;\n height: 10px;\n box-shadow: 0 0 30px rgba(255, 255, 255, 1), 0 0 60px rgba(255, 255, 255, 0.9);\n }\n\n .starry-background-wrapper .meteor::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 100%;\n width: 150px;\n height: 2px;\n background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.8), #fff);\n transform: translateY(-50%);\n border-radius: 2px;\n }\n\n .starry-background-wrapper .meteor.big::before {\n width: 250px;\n height: 4px;\n }\n\n @keyframes meteorFall {\n 0% {\n opacity: 1;\n transform: translate(0, 0) rotate(-45deg);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-500px, 500px) rotate(-45deg);\n }\n }\n\n @keyframes meteorFallBig {\n 0% {\n opacity: 1;\n transform: translate(0, 0) rotate(-45deg);\n }\n\n 100% {\n opacity: 0;\n transform: translate(-800px, 800px) rotate(-45deg);\n }\n }\n\n .starry-background-wrapper .meteor.active {\n animation: meteorFall var(--duration) linear forwards;\n }\n\n .starry-background-wrapper .meteor.big.active {\n animation: meteorFallBig var(--duration) linear forwards;\n }\n\n \/* =========================================\n \u4ecb\u9762\u4f48\u5c40\n ========================================= *\/\n #immersive-quiz-wrapper {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100%;\n z-index: 10;\n background-color: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .quiz-card-container {\n width: 90%;\n max-width: 1000px;\n height: 92dvh;\n max-height: 900px;\n background: transparent;\n padding: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n z-index: 10;\n padding-top: 20px;\n }\n\n .top-header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n flex-shrink: 0;\n }\n\n .chapter-pill {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 1px;\n color: #fff;\n background: rgba(255, 255, 255, 0.15);\n padding: 6px 14px;\n border-radius: 50px;\n border: 1px solid rgba(255, 255, 255, 0.3);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n #mobileBackBtn {\n display: none;\n cursor: pointer;\n font-size: 16px;\n }\n\n \/* \ud83d\udd25 \u5730\u7403\u6309\u9215 *\/\n .globe-btn {\n width: 33px;\n height: 33px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.35);\n box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);\n padding: 0;\n transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;\n flex-shrink: 0;\n z-index: 100;\n }\n\n .globe-btn span {\n font-size: 20px;\n line-height: 1;\n opacity: 0.7;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .globe-btn:hover {\n transform: scale(1.1);\n border-color: rgba(255, 255, 255, 0.55);\n box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);\n }\n\n .globe-btn:hover span {\n opacity: 0.9;\n }\n\n .globe-btn:active {\n transform: scale(0.95);\n }\n\n \/* \u9032\u5ea6\u689d *\/\n .progress-container {\n width: 100%;\n margin-bottom: 0px;\n flex-shrink: 0;\n }\n\n .progress-track {\n height: 4px;\n background: rgba(255, 255, 255, 0.15);\n border-radius: 10px;\n overflow: visible;\n }\n\n @keyframes breatheSideways {\n\n 0%,\n 100% {\n transform: scaleX(1);\n box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);\n }\n\n 50% {\n transform: scaleX(1.015);\n box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);\n }\n }\n\n .progress-bar-fill {\n height: 100%;\n width: 0%;\n border-radius: 10px;\n background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), #fff, rgba(255, 255, 255, 0.85));\n transition: width 0.5s ease;\n position: relative;\n transform-origin: left center;\n animation: breatheSideways 2.5s infinite ease-in-out;\n }\n\n @keyframes breatheDot {\n\n 0%,\n 100% {\n transform: translateY(-50%) scaleX(1);\n opacity: 0.6;\n }\n\n 50% {\n transform: translateY(-50%) scaleX(1.8);\n opacity: 0.9;\n }\n }\n\n .progress-bar-fill::after {\n content: '';\n position: absolute;\n right: -3px;\n top: 50%;\n transform: translateY(-50%);\n width: 12px;\n height: 4px;\n background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));\n border-radius: 0 4px 4px 0;\n animation: breatheDot 2.5s infinite ease-in-out;\n transform-origin: left center;\n }\n\n \/* \ud83d\udd25 \u984c\u76ee\u5340\u57df - \u589e\u52a0\u9593\u8ddd *\/\n .question-area {\n width: 100%;\n height: 150px;\n \/* \ud83d\udd25 \u518d\u589e\u52a0\u9ad8\u5ea6 *\/\n margin-bottom: 8px;\n \/* \ud83d\udd25 \u589e\u52a0\u8207\u5716\u7247\u9593\u8ddd *\/\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n padding: 0 10px;\n padding-top: 15px;\n }\n\n \/* \ud83d\udd25 \u96fb\u8166\u7248\u6253\u5b57\u6a5f - \u589e\u52a0\u4e0a\u4e0b\u9593\u8ddd *\/\n .desktop-minor-transition {\n font-size: 17px;\n color: var(--accent-color);\n opacity: 0;\n display: none;\n transform: translateY(5px);\n transition: opacity 0.5s ease, transform 0.5s ease;\n font-weight: 500;\n width: 100%;\n text-align: center;\n text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);\n position: relative;\n margin-top: 8px;\n \/* \ud83d\udd25 \u4e0a\u9593\u8ddd\u589e\u52a0 *\/\n margin-bottom: 22px;\n \/* \ud83d\udd25 \u4e0b\u9593\u8ddd\u589e\u52a0 *\/\n line-height: 1.5;\n flex-shrink: 0;\n }\n\n .desktop-minor-transition.active {\n display: block;\n }\n\n .desktop-minor-transition.show {\n opacity: 1;\n transform: translateY(0);\n }\n\n .question-text {\n font-size: 28px;\n font-weight: 700;\n line-height: 1.35;\n color: var(--title-color) !important;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\n font-family: var(--font-serif);\n margin: 0;\n text-align: center;\n width: 100%;\n transition: font-size 0.3s ease;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .question-area.has-transition .question-text {\n margin-top: 0;\n margin-bottom: auto;\n }\n\n .content-body {\n flex: 1;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n min-height: 0;\n }\n\n .options-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-items: center;\n }\n\n .option-container {\n width: 100%;\n max-width: 450px;\n cursor: pointer;\n position: relative;\n aspect-ratio: 1 \/ 1;\n border-radius: 24px;\n overflow: hidden;\n background: var(--card-bg);\n border: 1px solid rgba(255, 255, 255, 0.15);\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);\n transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275), border 0.2s;\n }\n\n .option-container:hover {\n transform: translateY(-5px);\n border-color: rgba(255, 255, 255, 0.5);\n }\n\n .option-container:active {\n transform: scale(1.02);\n border-color: #fff;\n box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);\n }\n\n .option-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s ease;\n display: block;\n }\n\n .option-container:hover .option-img {\n transform: scale(1.08);\n }\n\n .option-text-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 50px 20px 25px 20px;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 40%, transparent 100%);\n z-index: 5;\n pointer-events: none;\n }\n\n .option-text {\n color: #fff;\n font-size: 20px;\n font-weight: 500;\n letter-spacing: 1px;\n text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9);\n text-align: center;\n }\n\n .nav-area {\n margin-top: 15px;\n width: 100%;\n height: 40px;\n position: relative;\n flex-shrink: 0;\n }\n\n .nav-btn {\n position: absolute;\n left: 0;\n bottom: 0;\n background: transparent;\n border: none;\n color: rgba(255, 255, 255, 0.5);\n font-size: 14px;\n cursor: pointer;\n padding: 5px 10px;\n transition: 0.3s;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n\n .nav-btn:hover {\n color: #fff;\n }\n\n .nav-btn.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n \/* iframe \u5d4c\u5165\u5c64 *\/\n .iframe-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n z-index: 99999;\n background: #0b0b0b;\n display: none;\n }\n\n .iframe-overlay.active {\n display: block;\n }\n\n .iframe-overlay iframe {\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .iframe-overlay iframe.loaded {\n opacity: 1;\n }\n\n \/* iframe loading \u52d5\u756b *\/\n .iframe-loader {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n z-index: 1;\n }\n\n .iframe-loader.hidden {\n display: none;\n }\n\n .iframe-spinner {\n width: 50px;\n height: 50px;\n border: 3px solid rgba(212, 191, 151, 0.2);\n border-top-color: #d4bf97;\n border-radius: 50%;\n animation: iframeSpin 1s linear infinite;\n }\n\n @keyframes iframeSpin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .iframe-loader-text {\n color: #d4bf97;\n font-size: 14px;\n letter-spacing: 2px;\n opacity: 0.8;\n }\n\n \/* =========================================\n \ud83d\udd25 \u904e\u5834\u52d5\u756b - \u900f\u660e\u80cc\u666f + \u4e0d\u540c\u984f\u8272\u7159\u706b\n ========================================= *\/\n .transition-layer {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.85);\n \/* \ud83d\udd25 \u900f\u660e\u5ea685% *\/\n z-index: 9999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.8s ease;\n cursor: pointer;\n }\n\n .transition-layer.active {\n opacity: 1;\n pointer-events: auto;\n }\n\n .transition-content {\n text-align: center;\n max-width: 800px;\n padding: 20px 30px;\n position: relative;\n z-index: 10;\n box-sizing: border-box;\n }\n\n .transition-chapter {\n font-size: 14px;\n letter-spacing: 3px;\n color: var(--accent-color);\n margin-bottom: 20px;\n opacity: 0;\n transform: translateY(20px);\n transition: 0.8s ease;\n }\n\n .transition-text {\n font-family: var(--font-serif);\n font-size: 26px;\n font-weight: 700;\n line-height: 1.6;\n color: #fff;\n white-space: pre-line;\n overflow-wrap: break-word;\n word-break: break-word;\n }\n\n .tap-hint {\n position: absolute;\n bottom: 40px;\n color: rgba(255, 255, 255, 0.4);\n font-size: 12px;\n animation: blink 2s infinite;\n pointer-events: none;\n }\n\n .active .transition-chapter {\n opacity: 1;\n transform: translateY(0);\n transition-delay: 0.3s;\n }\n\n @keyframes blink {\n\n 0%,\n 100% {\n opacity: 0.3;\n }\n\n 50% {\n opacity: 0.8;\n }\n }\n\n #fireworksCanvas {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n pointer-events: none;\n }\n\n \/* =========================================\n \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801 - \u6eab\u6696\u6f38\u5c64 + \u6c23\u7403\n ========================================= *\/\n .transition-layer.final-mode {\n background: linear-gradient(180deg,\n #8B7355 0%,\n #A08060 25%,\n #C4A77D 50%,\n #D4B896 75%,\n #E8D4B8 100%);\n cursor: default;\n overflow-y: auto;\n justify-content: flex-start;\n \/* \u8986\u84cb center\uff0c\u5f9e\u9802\u90e8\u958b\u59cb\u6392\u5217 *\/\n padding-top: 35px;\n padding-bottom: 35px;\n }\n\n .final-mode .transition-content {\n max-width: 520px;\n padding: 12px 25px 18px;\n text-align: center;\n }\n\n .final-mode .transition-chapter {\n display: none;\n }\n\n .final-mode .tap-hint {\n display: none;\n }\n\n .final-mode .transition-text {\n font-family: var(--font-main);\n font-size: 15px;\n text-align: center;\n line-height: 1.8;\n color: #4a4a4a;\n opacity: 0;\n transition: opacity 1s;\n font-weight: 400;\n }\n\n .final-mode .transition-text.fade-in {\n opacity: 1;\n }\n\n \/* \ud83c\udfc6 LOGO \u5fbd\u7ae0 - \u5927\u5730\u8272\u7cfb *\/\n .final-badge {\n width: 100px;\n height: 100px;\n margin: 0 auto 8px;\n background: linear-gradient(145deg, #E8D4B8 0%, #D4C4A8 50%, #C4B498 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n animation: badgePulse 2.5s ease-in-out infinite, badgeFloat 3s ease-in-out infinite;\n position: relative;\n padding: 15px;\n }\n\n .final-badge img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n filter: drop-shadow(0 2px 4px rgba(93, 78, 55, 0.2));\n }\n\n .final-badge::before {\n content: '';\n position: absolute;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n border: 2px dashed rgba(160, 128, 96, 0.4);\n animation: badgeRotate 25s linear infinite;\n }\n\n .final-badge::after {\n content: '';\n position: absolute;\n width: 165px;\n height: 165px;\n border-radius: 50%;\n border: 1px dotted rgba(139, 115, 85, 0.25);\n animation: badgeRotate 35s linear infinite reverse;\n }\n\n @keyframes badgePulse {\n\n 0%,\n 100% {\n box-shadow:\n 0 0 0 6px rgba(160, 128, 96, 0.25),\n 0 0 25px rgba(139, 115, 85, 0.3),\n 0 10px 35px rgba(93, 78, 55, 0.25);\n }\n\n 50% {\n box-shadow:\n 0 0 0 12px rgba(160, 128, 96, 0.15),\n 0 0 40px rgba(139, 115, 85, 0.4),\n 0 15px 45px rgba(93, 78, 55, 0.3);\n }\n }\n\n @keyframes badgeFloat {\n\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n }\n\n @keyframes badgeRotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n\n .final-mode .final-title {\n font-size: 26px;\n color: #3D3225;\n text-align: center;\n margin-bottom: 2px;\n font-weight: 700;\n font-family: var(--font-serif);\n line-height: 1.2;\n text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);\n }\n\n .final-subtitle {\n font-size: 13px;\n color: #5D4E37;\n margin-bottom: 8px;\n letter-spacing: 2px;\n font-weight: 500;\n }\n\n \/* \ud83d\udce6 \u8cc7\u8a0a\u5361\u7247 *\/\n .final-card {\n background: rgba(255, 255, 255, 0.85);\n border-radius: 12px;\n padding: 14px 20px;\n margin-bottom: 5px;\n box-shadow: 0 4px 20px rgba(93, 78, 55, 0.15);\n text-align: left;\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.5);\n transform: translateY(20px);\n opacity: 0;\n animation: cardSlideUp 0.6s ease forwards;\n }\n\n .final-card:nth-child(2) {\n animation-delay: 0.2s;\n }\n\n .final-card:nth-child(3) {\n animation-delay: 0.4s;\n }\n\n .final-card:nth-child(4) {\n animation-delay: 0.6s;\n }\n\n @keyframes cardSlideUp {\n to {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n .final-card-header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 4px;\n }\n\n .final-card-icon {\n width: 36px;\n height: 36px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n }\n\n .final-card-icon.thanks {\n background: linear-gradient(135deg, #E8D4B8, #C4A77D);\n }\n\n .final-card-icon.photo {\n background: linear-gradient(135deg, #B8D4E8, #7DA0C4);\n }\n\n .final-card-icon.time {\n background: linear-gradient(135deg, #D4E8B8, #A0C47D);\n }\n\n .final-card-title {\n font-weight: 700;\n color: #3D3225;\n font-size: 15px;\n }\n\n .final-card-text {\n color: #4a4a4a;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .final-mode .final-highlight {\n color: #6B4C0A;\n font-weight: 700;\n background: linear-gradient(120deg, rgba(255, 200, 50, 0.35) 0%, rgba(255, 165, 0, 0.3) 100%);\n padding: 2px 8px;\n border-radius: 4px;\n }\n\n \/* \u2728 \u9583\u720d\u661f\u661f *\/\n .final-stars {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden;\n }\n\n .final-star {\n position: absolute;\n width: 4px;\n height: 4px;\n background: #FFD700;\n border-radius: 50%;\n animation: starTwinkle 2s ease-in-out infinite;\n box-shadow: 0 0 6px #FFD700;\n }\n\n @keyframes starTwinkle {\n\n 0%,\n 100% {\n opacity: 0.3;\n transform: scale(0.8);\n }\n\n 50% {\n opacity: 1;\n transform: scale(1.2);\n }\n }\n\n \/* \ud83d\udd25 \u6700\u7d42\u9801\u6309\u9215 *\/\n .final-btn {\n display: none;\n margin: 12px auto 0 auto;\n padding: 14px 40px;\n font-size: 16px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 8px 25px rgba(93, 78, 55, 0.4);\n transition: all 0.3s ease;\n letter-spacing: 1px;\n position: relative;\n overflow: hidden;\n }\n\n .final-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n\n @keyframes btnShine {\n\n 0%,\n 100% {\n left: -100%;\n }\n\n 50% {\n left: 100%;\n }\n }\n\n .final-btn:hover {\n transform: translateY(-3px);\n box-shadow: 0 12px 35px rgba(93, 78, 55, 0.5);\n }\n\n .final-btn.show {\n display: inline-block;\n }\n\n \/* \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236 - \u4e3b\u6309\u9215\u7981\u7528 *\/\n .final-btn.disabled {\n background: linear-gradient(135deg, #999 0%, #aaa 50%, #bbb 100%);\n cursor: not-allowed;\n box-shadow: none;\n opacity: 0.6;\n pointer-events: none;\n }\n\n .final-btn.disabled::before {\n animation: none;\n }\n\n .final-unlock-hint {\n display: none;\n text-align: center;\n margin-top: 10px;\n font-size: 12px;\n font-weight: 500;\n color: rgba(80, 70, 60, 0.7);\n letter-spacing: 0.5px;\n }\n\n .final-unlock-hint.show {\n display: block;\n }\n\n \/* \ud83c\udd93 \u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\u6309\u9215 *\/\n .final-simple-btn {\n display: inline-block;\n padding: 20px 60px;\n font-size: 22px;\n border-radius: 50px;\n border: none;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: #fff;\n font-weight: 700;\n cursor: pointer;\n box-shadow: none;\n transition: all 0.3s ease;\n text-decoration: none;\n letter-spacing: 2px;\n position: relative;\n overflow: hidden;\n animation: simpleBtnBreathe 2s ease-in-out infinite;\n min-width: 280px;\n }\n\n @keyframes simpleBtnBreathe {\n\n 0%,\n 100% {\n box-shadow: none;\n transform: scale(1);\n }\n\n 50% {\n box-shadow: none;\n transform: scale(1.05);\n }\n }\n\n .final-simple-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n\n .final-simple-btn:hover {\n transform: scale(1.05);\n box-shadow: none;\n animation: none;\n }\n\n \/* \ud83d\udd12 \u4ed8\u8cbb\u906e\u7f69\u5361\u7247 *\/\n .final-card.locked {\n position: relative;\n opacity: 0.45;\n }\n\n .final-card.locked::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(190, 185, 175, 0.45);\n border-radius: 12px;\n z-index: 1;\n }\n\n \/* \ud83d\udd19 Final \u9801\u8fd4\u56de\u6309\u9215 *\/\n .final-back-btn {\n display: inline-block;\n margin-top: 8px;\n padding: 8px 20px;\n background: transparent;\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 25px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 14px;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n\n .final-back-btn:hover {\n background: rgba(255, 255, 255, 0.1);\n border-color: rgba(255, 255, 255, 0.6);\n color: rgba(255, 255, 255, 0.9);\n }\n\n \/* \ud83c\udf88 \u6c23\u7403\u5bb9\u5668 *\/\n .balloon-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n pointer-events: none;\n z-index: 0;\n display: none;\n }\n\n \/* \u57fa\u790e\u6c23\u7403\u52d5\u756b *\/\n .balloon-base {\n position: absolute;\n bottom: -120px;\n animation: balloonFloat var(--duration, 12s) ease-in-out infinite;\n animation-delay: var(--delay, 0s);\n opacity: 0;\n }\n\n @keyframes balloonFloat {\n 0% {\n transform: translateY(0) rotate(0deg);\n opacity: 0;\n }\n\n 10% {\n opacity: 0.7;\n }\n\n 90% {\n opacity: 0.7;\n }\n\n 100% {\n transform: translateY(-120vh) rotate(15deg);\n opacity: 0;\n }\n }\n\n \/* \ud83d\udd34 \u5713\u5f62\u6c23\u7403 *\/\n .balloon-round {\n width: 55px;\n height: 68px;\n border-radius: 50% 50% 50% 50% \/ 60% 60% 40% 40%;\n }\n\n .balloon-round::after {\n content: '';\n position: absolute;\n bottom: -25px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n .balloon-round .shine {\n position: absolute;\n width: 12px;\n height: 18px;\n background: rgba(255, 255, 255, 0.5);\n border-radius: 50%;\n top: 12px;\n left: 10px;\n }\n\n \/* \u2764\ufe0f \u611b\u5fc3\u6c23\u7403 *\/\n .balloon-heart {\n width: 50px;\n height: 45px;\n background: transparent !important;\n }\n\n .balloon-heart::before,\n .balloon-heart::after {\n content: '';\n position: absolute;\n top: 0;\n width: 26px;\n height: 40px;\n border-radius: 26px 26px 0 0;\n background: inherit;\n }\n\n .balloon-heart::before {\n left: 25px;\n transform: rotate(-45deg);\n transform-origin: 0 100%;\n background: var(--heart-color);\n }\n\n .balloon-heart::after {\n left: 0;\n transform: rotate(45deg);\n transform-origin: 100% 100%;\n background: var(--heart-color);\n }\n\n .balloon-heart .string {\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n \/* \ud83c\udf69 \u751c\u751c\u5708\u6c23\u7403 *\/\n .balloon-donut {\n width: 55px;\n height: 55px;\n border-radius: 50%;\n position: relative;\n }\n\n .balloon-donut::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: linear-gradient(180deg, #A08060 0%, #C4A77D 50%, #D4B896 100%);\n }\n\n .balloon-donut::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n .balloon-donut .sprinkles {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n .balloon-donut .sprinkles::before,\n .balloon-donut .sprinkles::after {\n content: '';\n position: absolute;\n width: 4px;\n height: 8px;\n border-radius: 2px;\n }\n\n .balloon-donut .sprinkles::before {\n top: 8px;\n left: 20px;\n background: #fff;\n transform: rotate(30deg);\n }\n\n .balloon-donut .sprinkles::after {\n top: 15px;\n right: 12px;\n background: #FFD700;\n transform: rotate(-20deg);\n }\n\n \/* \u2b50 \u661f\u661f\u6c23\u7403 *\/\n .balloon-star {\n width: 50px;\n height: 50px;\n background: transparent !important;\n }\n\n .balloon-star::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50px;\n height: 50px;\n background: var(--star-color);\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n }\n\n .balloon-star::after {\n content: '';\n position: absolute;\n bottom: -30px;\n left: 50%;\n transform: translateX(-50%);\n width: 1px;\n height: 35px;\n background: rgba(0, 0, 0, 0.15);\n }\n\n \/* \u984f\u8272\u8b8a\u9ad4 *\/\n .color-pink {\n background: rgba(255, 182, 193, 0.75);\n --heart-color: rgba(255, 182, 193, 0.75);\n --star-color: rgba(255, 182, 193, 0.75);\n }\n\n .color-blue {\n background: rgba(173, 216, 230, 0.75);\n --heart-color: rgba(173, 216, 230, 0.75);\n --star-color: rgba(173, 216, 230, 0.75);\n }\n\n .color-peach {\n background: rgba(255, 218, 185, 0.75);\n --heart-color: rgba(255, 218, 185, 0.75);\n --star-color: rgba(255, 218, 185, 0.75);\n }\n\n .color-lavender {\n background: rgba(221, 180, 221, 0.75);\n --heart-color: rgba(221, 180, 221, 0.75);\n --star-color: rgba(221, 180, 221, 0.75);\n }\n\n .color-mint {\n background: rgba(176, 224, 200, 0.75);\n --heart-color: rgba(176, 224, 200, 0.75);\n --star-color: rgba(176, 224, 200, 0.75);\n }\n\n .color-cream {\n background: rgba(255, 250, 220, 0.75);\n --heart-color: rgba(255, 250, 220, 0.75);\n --star-color: rgba(255, 250, 220, 0.75);\n }\n\n .color-coral {\n background: rgba(255, 160, 140, 0.7);\n --heart-color: rgba(255, 160, 140, 0.7);\n --star-color: rgba(255, 160, 140, 0.7);\n }\n\n .color-gold {\n background: rgba(255, 215, 150, 0.7);\n --heart-color: rgba(255, 215, 150, 0.7);\n --star-color: rgba(255, 215, 150, 0.7);\n }\n\n \/* =========================================\n \u624b\u6a5f\u7248 - \u5b8c\u5168\u81ea\u9069\u61c9\n ========================================= *\/\n @media (max-width: 900px) {\n .quiz-card-container {\n height: 100vh;\n \/* fallback *\/\n height: 100svh;\n \/* \u5c0f\u8996\u7a97\u9ad8\u5ea6\uff0c\u78ba\u4fdd\u5730\u5740\u6b04\u986f\u793a\u6642\u4e5f\u4e0d\u6ea2\u51fa *\/\n padding: 10px 12px 10px 12px;\n display: flex;\n flex-direction: column;\n }\n\n \/* \ud83d\udd25 \u78ba\u4fdd\u9802\u90e8\u5340\u57df\u986f\u793a *\/\n .top-header {\n margin-bottom: 5px;\n flex-shrink: 0;\n display: flex !important;\n }\n\n .progress-container {\n margin-bottom: 5px;\n flex-shrink: 0;\n display: block !important;\n }\n\n .question-area {\n flex-shrink: 0;\n min-height: 50px;\n max-height: 90px;\n padding: 8px 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .question-area.has-transition .question-text {\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .question-text {\n font-size: 18px;\n line-height: 1.4;\n padding: 0 5px;\n }\n\n .desktop-minor-transition {\n display: none !important;\n }\n\n .nav-area {\n display: none !important;\n }\n\n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u5927\u8f49\u5834\u6587\u5b57 - \u9632\u6b62\u6ea2\u51fa *\/\n .transition-content {\n max-width: 100%;\n padding: 15px 20px;\n }\n\n .transition-text {\n font-size: 20px;\n line-height: 1.5;\n }\n\n \/* \ud83d\udd25 \u5167\u5bb9\u5340\u57df - \u4f7f\u7528 flex: 1 \u586b\u6eff\u5269\u9918\u7a7a\u9593 *\/\n .content-body {\n flex: 1;\n min-height: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 5px 0;\n -webkit-overflow-scrolling: touch;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u7db2\u683c - \u5e73\u5206\u7a7a\u9593 *\/\n .options-grid {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n gap: 8px;\n justify-content: center;\n align-items: center;\n }\n\n \/* \ud83d\udd25 \u5716\u7247\u5bb9\u5668 - \u81ea\u9069\u61c9\uff0c\u5141\u8a31\u7e2e\u5c0f *\/\n .option-container {\n width: min(85vw, calc((100svh - 200px) \/ 2 - 10px));\n max-height: calc((100svh - 200px) \/ 2 - 10px);\n aspect-ratio: 1 \/ 1;\n max-width: none;\n margin: 0;\n border-radius: 18px;\n flex-shrink: 1;\n min-height: 0;\n }\n\n .option-container:active {\n transform: none;\n border-color: #fff;\n border-width: 2px;\n box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);\n }\n\n .option-img {\n object-fit: cover;\n height: 100%;\n width: 100%;\n }\n\n .option-text {\n font-size: 16px;\n font-weight: 600;\n }\n\n .option-text-overlay {\n padding-bottom: 12px;\n padding-top: 35px;\n }\n\n \/* \ud83d\udd25 \u624b\u6a5f\u7248\u6700\u7d42\u9801 *\/\n .final-mode .transition-content {\n padding: 10px 15px 15px;\n max-width: 100%;\n }\n\n .final-badge {\n width: 85px;\n height: 85px;\n margin-bottom: 6px;\n padding: 10px;\n }\n\n .final-badge::before {\n width: 100px;\n height: 100px;\n }\n\n .final-badge::after {\n width: 115px;\n height: 115px;\n }\n\n .final-mode .final-title {\n font-size: 22px;\n margin-bottom: 2px;\n line-height: 1.2;\n }\n\n .final-subtitle {\n font-size: 12px;\n margin-bottom: 6px;\n }\n\n .final-card {\n padding: 12px 16px;\n margin-bottom: 4px;\n border-radius: 10px;\n }\n\n .final-card-icon {\n width: 32px;\n height: 32px;\n font-size: 16px;\n }\n\n .final-card-title {\n font-size: 14px;\n }\n\n .final-card-text {\n font-size: 13px;\n line-height: 1.55;\n }\n\n .final-mode .transition-text {\n font-size: 13px;\n line-height: 1.6;\n text-align: center;\n }\n\n .final-btn {\n padding: 12px 35px;\n font-size: 14px;\n margin-top: 10px;\n }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403 *\/\n .balloon-base {\n transform: scale(0.85);\n }\n }\n\n \/* \ud83d\udd25 \u5c0f\u87a2\u5e55\u624b\u6a5f *\/\n @media (max-width: 380px) {\n .quiz-card-container {\n padding: 8px 10px 8px 10px;\n }\n\n .question-area {\n min-height: 45px;\n max-height: 75px;\n }\n\n .question-text {\n font-size: 16px;\n }\n\n .option-container {\n border-radius: 14px;\n width: min(88vw, calc((100svh - 180px) \/ 2 - 8px));\n max-height: calc((100svh - 180px) \/ 2 - 8px);\n }\n\n .option-text {\n font-size: 14px;\n }\n\n .final-badge {\n width: 80px;\n height: 80px;\n margin-bottom: 5px;\n padding: 8px;\n }\n\n .final-badge::before {\n width: 95px;\n height: 95px;\n }\n\n .final-badge::after {\n width: 108px;\n height: 108px;\n }\n\n .final-mode .final-title {\n font-size: 20px;\n margin-bottom: 2px;\n }\n\n .final-subtitle {\n font-size: 11px;\n margin-bottom: 5px;\n letter-spacing: 1px;\n }\n\n .final-card {\n padding: 10px 14px;\n margin-bottom: 4px;\n }\n\n .final-card-icon {\n width: 30px;\n height: 30px;\n font-size: 15px;\n border-radius: 8px;\n }\n\n .final-card-title {\n font-size: 13px;\n }\n\n .final-card-text {\n font-size: 12px;\n line-height: 1.5;\n }\n\n .final-mode .transition-text {\n font-size: 12px;\n line-height: 1.5;\n }\n\n .final-btn {\n padding: 10px 30px;\n font-size: 13px;\n margin-top: 8px;\n }\n\n \/* \u5c0f\u87a2\u5e55\u6c23\u7403\u7e2e\u5c0f *\/\n .balloon-base {\n transform: scale(0.8);\n }\n }\n\n \/* \ud83d\udd25 \u8d85\u5c0f\u87a2\u5e55 *\/\n @media (max-width: 320px) {\n .option-container {\n width: min(90vw, calc((100svh - 170px) \/ 2 - 6px));\n max-height: calc((100svh - 170px) \/ 2 - 6px);\n border-radius: 12px;\n }\n\n .question-text {\n font-size: 15px;\n }\n }\n\n \/* =========================================\n \ud83d\udd04 Loading \u756b\u9762\n ========================================= *\/\n .loading-screen {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 20%, var(--bg-grad-3) 45%, var(--bg-grad-4) 70%, var(--bg-grad-5) 100%);\n z-index: 99999;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease;\n }\n\n .loading-screen.hidden {\n opacity: 0;\n pointer-events: none;\n }\n\n .loading-spinner {\n width: 50px;\n height: 50px;\n border: 3px solid rgba(255, 255, 255, 0.2);\n border-top-color: rgba(255, 255, 255, 0.8);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n }\n\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loading-text {\n margin-top: 20px;\n color: rgba(255, 255, 255, 0.7);\n font-size: 16px;\n letter-spacing: 2px;\n }\n\n \/* \ud83d\udeab \u932f\u8aa4\u756b\u9762 *\/\n .error-screen {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background: linear-gradient(180deg, #3d2a2a 0%, #4a3535 50%, #5c4040 100%);\n z-index: 99999;\n display: none;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 30px;\n }\n\n .error-screen.active {\n display: flex;\n }\n\n .error-icon {\n font-size: 60px;\n margin-bottom: 20px;\n }\n\n .error-title {\n font-size: 24px;\n color: #fff;\n margin-bottom: 15px;\n font-family: var(--font-serif);\n }\n\n .error-message {\n font-size: 16px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.6;\n max-width: 400px;\n }\n \/* =========================================\n \ud83c\udf1f Life Concern \u554f\u5377\u8986\u84cb\u5c64\n ========================================= *\/\n .lc-overlay {\n position: fixed; top: 0; left: 0;\n width: 100vw; height: 100vh; z-index: 9998;\n background: linear-gradient(180deg, #4a3f5c 0%, #5a4a6a 20%, #6d5f7a 45%, #8a7d96 70%, #b8afc4 100%);\n display: none; justify-content: center; align-items: center;\n opacity: 0; transition: opacity 0.6s ease;\n }\n .lc-overlay.active { opacity: 1; }\n\n .lc-stars { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }\n .lc-star {\n position: absolute; background: #fff; border-radius: 50%;\n animation: lcTwinkle var(--d, 3s) infinite ease-in-out;\n animation-delay: var(--dl, 0s);\n }\n @keyframes lcTwinkle {\n 0%,100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.3); }\n }\n\n .lc-container {\n width: 92%; max-width: 580px; max-height: 90dvh;\n display: flex; flex-direction: column;\n position: relative; z-index: 10;\n overflow: hidden;\n }\n\n .lc-step-indicator {\n display: flex; align-items: center; justify-content: center;\n gap: 8px; margin-bottom: 20px; flex-shrink: 0;\n }\n .lc-step-dot {\n width: 10px; height: 10px; border-radius: 50%;\n background: rgba(255,255,255,0.2);\n transition: all 0.4s ease;\n }\n .lc-step-dot.active { background: rgba(255,255,255,0.9); box-shadow: 0 0 12px rgba(255,255,255,0.5); }\n .lc-step-dot.done { background: rgba(255,255,255,0.5); }\n .lc-step-line {\n width: 40px; height: 2px;\n background: rgba(255,255,255,0.15); border-radius: 1px;\n transition: background 0.4s ease;\n }\n .lc-step-line.done { background: rgba(255,255,255,0.4); }\n\n .lc-header { text-align: center; flex-shrink: 0; margin-bottom: 6px; }\n .lc-label {\n font-size: 12px; letter-spacing: 3px; color: var(--accent-color);\n text-transform: uppercase; margin-bottom: 10px;\n opacity: 0; transform: translateY(8px); transition: all 0.5s ease 0.1s;\n }\n .lc-label.show { opacity: 1; transform: translateY(0); }\n .lc-title {\n font-family: var(--font-serif);\n font-size: 24px; font-weight: 700;\n color: var(--title-color);\n text-shadow: 0 2px 10px rgba(0,0,0,0.4);\n line-height: 1.4;\n opacity: 0; transform: translateY(10px); transition: all 0.5s ease 0.15s;\n }\n .lc-title.show { opacity: 1; transform: translateY(0); }\n\n .lc-summary {\n display: flex; gap: 8px; justify-content: center;\n flex-wrap: wrap; margin: 10px 0 4px; flex-shrink: 0; min-height: 28px;\n }\n .lc-summary-tag {\n font-size: 12px; padding: 4px 14px;\n background: rgba(255,255,255,0.1);\n border: 1px solid rgba(255,255,255,0.25);\n border-radius: 20px; color: rgba(255,255,255,0.7);\n cursor: pointer; transition: all 0.3s ease;\n backdrop-filter: blur(4px);\n }\n .lc-summary-tag:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }\n\n .lc-scroll {\n flex: 1; overflow-y: auto; overflow-x: hidden;\n padding: 8px 0 20px; -webkit-overflow-scrolling: touch;\n scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;\n }\n .lc-scroll::-webkit-scrollbar { width: 4px; }\n .lc-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }\n\n \/* \u4e3b\u984c 6 \u5bae\u683c *\/\n .lc-topic-grid {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 12px; padding: 4px;\n opacity: 0; transform: translateY(15px); transition: all 0.5s ease 0.2s;\n }\n .lc-topic-grid.show { opacity: 1; transform: translateY(0); }\n\n .lc-topic-card {\n background: rgba(44,44,44,0.4);\n border: 1.5px solid rgba(255,255,255,0.12);\n border-radius: 16px; padding: 20px 12px;\n text-align: center; cursor: pointer;\n transition: all 0.25s ease;\n backdrop-filter: blur(6px);\n position: relative; overflow: hidden;\n }\n .lc-topic-card::before {\n content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 70%);\n pointer-events: none;\n }\n .lc-topic-card:hover {\n border-color: rgba(255,255,255,0.35); transform: translateY(-3px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.3);\n }\n .lc-topic-card:active { transform: scale(0.97); }\n .lc-topic-card.selected {\n border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12);\n box-shadow: 0 0 20px rgba(255,255,255,0.1);\n }\n .lc-topic-icon { font-size: 32px; margin-bottom: 8px; display: block; }\n .lc-topic-name { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 1px; }\n\n \/* \u89d2\u8272\u81a0\u56ca *\/\n .lc-role-grid {\n display: flex; flex-wrap: wrap; gap: 10px;\n justify-content: center; padding: 4px;\n opacity: 0; transform: translateY(15px); transition: all 0.5s ease 0.2s;\n }\n .lc-role-grid.show { opacity: 1; transform: translateY(0); }\n .lc-role-pill {\n padding: 12px 22px; background: rgba(44,44,44,0.4);\n border: 1.5px solid rgba(255,255,255,0.12);\n border-radius: 50px; color: rgba(255,255,255,0.85);\n font-size: 15px; font-weight: 500; cursor: pointer;\n transition: all 0.25s ease; backdrop-filter: blur(6px);\n }\n .lc-role-pill:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.08); }\n .lc-role-pill:active { transform: scale(0.95); }\n .lc-role-pill.selected {\n border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.15);\n color: #fff; font-weight: 600; box-shadow: 0 0 15px rgba(255,255,255,0.08);\n }\n\n \/* \u56f0\u64fe\u5217\u8868 *\/\n .lc-concern-list {\n display: flex; flex-direction: column; gap: 10px; padding: 4px;\n opacity: 0; transform: translateY(15px); transition: all 0.5s ease 0.2s;\n }\n .lc-concern-list.show { opacity: 1; transform: translateY(0); }\n .lc-concern-item {\n background: rgba(44,44,44,0.4);\n border: 1.5px solid rgba(255,255,255,0.1);\n border-radius: 14px; padding: 16px 18px;\n color: rgba(255,255,255,0.8); font-size: 15px; line-height: 1.5;\n cursor: pointer; transition: all 0.25s ease;\n backdrop-filter: blur(6px);\n display: flex; align-items: center; gap: 12px;\n }\n .lc-concern-item:hover { border-color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.06); }\n .lc-concern-item:active { transform: scale(0.98); }\n .lc-concern-item.selected {\n border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.12); color: #fff;\n }\n .lc-concern-radio {\n width: 20px; height: 20px; flex-shrink: 0;\n border: 2px solid rgba(255,255,255,0.3); border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.25s ease;\n }\n .lc-concern-item.selected .lc-concern-radio { border-color: #fff; background: #fff; }\n .lc-concern-item.selected .lc-concern-radio::after { content: '\u2713'; color: #333; font-size: 12px; font-weight: 700; }\n\n .lc-skip-option { border-style: dashed; opacity: 0.7; }\n .lc-skip-option:hover { opacity: 0.9; }\n .lc-skip-option.selected { opacity: 1; }\n\n \/* \u78ba\u8a8d\u6309\u9215 *\/\n .lc-confirm-area {\n flex-shrink: 0; text-align: center; padding: 12px 0 0;\n opacity: 0; transform: translateY(10px);\n transition: all 0.4s ease; pointer-events: none;\n }\n .lc-confirm-area.show { opacity: 1; transform: translateY(0); pointer-events: auto; }\n .lc-confirm-btn {\n display: inline-block; padding: 15px 50px;\n font-size: 17px; font-weight: 600; font-family: var(--font-main);\n color: #fff; border: none; border-radius: 50px; cursor: pointer;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n box-shadow: none;\n transition: all 0.3s ease; letter-spacing: 1px;\n position: relative; overflow: hidden;\n }\n .lc-confirm-btn::before {\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);\n animation: btnShine 3s ease-in-out infinite;\n }\n .lc-confirm-btn:hover { transform: translateY(-3px); box-shadow: none; }\n .lc-confirm-btn:active { transform: scale(0.97); }\n\n \/* \u8fd4\u56de\u6309\u9215 *\/\n .lc-back-btn {\n position: absolute; top: 8px; left: 0;\n background: transparent; border: none;\n color: rgba(255,255,255,0.45); font-size: 14px;\n cursor: pointer; padding: 6px 12px; z-index: 20;\n transition: all 0.3s ease; font-family: var(--font-main);\n display: none;\n }\n .lc-back-btn.show { display: flex; align-items: center; gap: 4px; }\n .lc-back-btn:hover { color: rgba(255,255,255,0.8); }\n\n .lc-hidden { display: none !important; }\n\n @media (max-width: 500px) {\n .lc-title { font-size: 20px; }\n .lc-topic-card { padding: 16px 10px; }\n .lc-topic-icon { font-size: 28px; }\n .lc-topic-name { font-size: 14px; }\n .lc-role-pill { padding: 10px 18px; font-size: 14px; }\n .lc-concern-item { padding: 14px 14px; font-size: 14px; }\n .lc-confirm-btn { padding: 14px 40px; font-size: 16px; }\n }\n @media (max-height: 700px) {\n .lc-title { font-size: 19px; }\n .lc-topic-card { padding: 14px 10px; }\n .lc-topic-icon { font-size: 26px; margin-bottom: 4px; }\n .lc-concern-item { padding: 12px 14px; }\n }\n <\/style>\n<\/head>\n\n<body>\n\n \n <div class=\"loading-screen\" id=\"loadingScreen\">\n <div class=\"loading-spinner\"><\/div>\n <div class=\"loading-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e17\u0e14\u0e2a\u0e2d\u0e1a...<\/div>\n <\/div>\n\n \n <div class=\"error-screen\" id=\"errorScreen\">\n <div class=\"error-icon\">\u26a0\ufe0f<\/div>\n <div class=\"error-title\" id=\"errorTitle\">\u0e01\u0e32\u0e23\u0e42\u0e2b\u0e25\u0e14\u0e25\u0e49\u0e21\u0e40\u0e2b\u0e25\u0e27<\/div>\n <div class=\"error-message\" id=\"errorMessage\">\u0e42\u0e1b\u0e23\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e2b\u0e21\u0e48\u0e2d\u0e35\u0e01\u0e04\u0e23\u0e31\u0e49\u0e07\u0e20\u0e32\u0e22\u0e2b\u0e25\u0e31\u0e07<\/div>\n <\/div>\n\n <div class=\"starry-background-wrapper\" id=\"bgWrapper\">\n <div class=\"stars\" id=\"starsContainer\"><\/div>\n <div class=\"stars\" id=\"meteorsContainer\"><\/div>\n <\/div>\n\n <div class=\"iframe-overlay\" id=\"iframeOverlay\">\n <div class=\"iframe-loader\" id=\"iframeLoader\">\n <div class=\"iframe-spinner\"><\/div>\n <div class=\"iframe-loader-text\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14...<\/div>\n <\/div>\n <iframe id=\"embeddedFrame\" src=\"about:blank\" allow=\"camera; microphone; fullscreen\" allowfullscreen><\/iframe>\n <\/div>\n\n \n <div class=\"lc-overlay\" id=\"lcOverlay\">\n <div class=\"lc-stars\" id=\"lcStars\"><\/div>\n <div class=\"lc-container\">\n <button class=\"lc-back-btn\" id=\"lcBackBtn\" onclick=\"lcGoBack()\">\u2190 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32<\/button>\n <div class=\"lc-step-indicator\" style=\"margin-top: 8px;\">\n <div class=\"lc-step-dot active\" id=\"lcDot1\"><\/div>\n <div class=\"lc-step-line\" id=\"lcLine1\"><\/div>\n <div class=\"lc-step-dot\" id=\"lcDot2\"><\/div>\n <div class=\"lc-step-line\" id=\"lcLine2\"><\/div>\n <div class=\"lc-step-dot\" id=\"lcDot3\"><\/div>\n <\/div>\n <div class=\"lc-header\">\n <div class=\"lc-label show\" id=\"lcLabel\">\u6700\u5f8c\u4e00\u500b\u554f\u984c<\/div>\n <div class=\"lc-title show\" id=\"lcTitle\">\u4f60\u76ee\u524d\u751f\u6d3b\u4e2d\u6700\u5728\u610f\u7684\u4e8b\uff1f<\/div>\n <\/div>\n <div class=\"lc-summary\" id=\"lcSummary\"><\/div>\n <div class=\"lc-scroll\" id=\"lcScroll\">\n <div class=\"lc-topic-grid show\" id=\"lcStep1\">\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(0)\"><span class=\"lc-topic-icon\">\ud83d\udc95<\/span><span class=\"lc-topic-name\">\u611f\u60c5\u95dc\u4fc2<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(1)\"><span class=\"lc-topic-icon\">\ud83d\udcbc<\/span><span class=\"lc-topic-name\">\u8077\u6daf\u767c\u5c55<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(2)\"><span class=\"lc-topic-icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/span><span class=\"lc-topic-name\">\u5bb6\u5ead\u95dc\u4fc2<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(3)\"><span class=\"lc-topic-icon\">\ud83d\udc65<\/span><span class=\"lc-topic-name\">\u793e\u4ea4\u4eba\u969b<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(4)\"><span class=\"lc-topic-icon\">\ud83d\udcb0<\/span><span class=\"lc-topic-name\">\u91d1\u9322\u7406\u8ca1<\/span><\/div>\n <div class=\"lc-topic-card\" onclick=\"lcSelectTopic(5)\"><span class=\"lc-topic-icon\">\ud83d\udcda<\/span><span class=\"lc-topic-name\">\u5b78\u696d\u5347\u5b78<\/span><\/div>\n <\/div>\n <div class=\"lc-role-grid lc-hidden\" id=\"lcStep2\"><\/div>\n <div class=\"lc-concern-list lc-hidden\" id=\"lcStep3\"><\/div>\n <\/div>\n <div class=\"lc-confirm-area\" id=\"lcConfirmArea\">\n <button class=\"lc-confirm-btn\" onclick=\"lcConfirm()\">\u78ba\u8a8d\u9001\u51fa \u2726<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"transition-layer notranslate skiptranslate\" id=\"transitionLayer\" translate=\"no\"\n data-no-translation=\"true\">\n <div class=\"balloon-container\" id=\"balloonContainer\"><\/div>\n <canvas id=\"fireworksCanvas\"><\/canvas>\n <div class=\"transition-content\">\n <div class=\"transition-chapter\" id=\"transChapter\">CHAPTER<\/div>\n <div class=\"transition-text\" id=\"transText\"><\/div>\n <button class=\"final-btn\" id=\"finalBtn\" onclick=\"goToFinalStep()\">\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65<\/button>\n <\/div>\n <div class=\"tap-hint\" id=\"tapHint\">\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c<\/div>\n <\/div>\n\n <div id=\"immersive-quiz-wrapper\">\n <div class=\"quiz-card-container\">\n\n <div class=\"top-header\">\n <div class=\"chapter-pill\">\n <span id=\"mobileBackBtn\" onclick=\"prevQuestion()\"\n style=\"display:none; padding-right:8px; margin-right:8px; border-right:1px solid rgba(255,255,255,0.3); cursor:pointer;\">\u2190<\/span>\n <span id=\"chapterBadge\">\u0e1a\u0e17\u0e17\u0e35\u0e48 1<\/span>\n <span style=\"opacity: 0.5; padding: 0 5px;\">|<\/span>\n <span id=\"questionCounter\">1\/21<\/span>\n <\/div>\n \n <div class=\"globe-btn lang-switcher\" id=\"globeBtn\" role=\"button\" tabindex=\"0\"><span>\ud83c\udf0f<\/span><\/div>\n <\/div>\n\n <div class=\"progress-container\">\n <div class=\"progress-track\">\n <div class=\"progress-bar-fill\" id=\"progressBar\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"question-area\" id=\"questionArea\">\n <div class=\"desktop-minor-transition notranslate skiptranslate\" id=\"desktopMinorText\" translate=\"no\"\n data-no-translation=\"true\"><\/div>\n <div class=\"question-text\" id=\"qTitle\">\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...<\/div>\n <\/div>\n\n <div class=\"content-body\">\n <div class=\"fade-wrapper\" id=\"questionBox\">\n <div class=\"options-grid\">\n <div class=\"option-container\" onclick=\"selectOption('A')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgA\">\n <div class=\"option-text-overlay\">\n <div class=\"option-text\" id=\"textA\"><\/div>\n <\/div>\n <\/div>\n <div class=\"option-container\" onclick=\"selectOption('B')\">\n <img decoding=\"async\" src=\"\" class=\"option-img\" id=\"imgB\">\n <div class=\"option-text-overlay\">\n <div class=\"option-text\" id=\"textB\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"nav-area\">\n <button class=\"nav-btn hidden\" id=\"prevBtn\" onclick=\"prevQuestion()\">\n <span>\u2190<\/span> \u0e04\u0e33\u0e16\u0e32\u0e21\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\n <\/button>\n <\/div>\n\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\udee1\ufe0f \u4fdd\u8b77\u4ee3\u78bc - \u66ab\u6642\u95dc\u9589\uff08\u9664\u932f\u7528\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/*\n (function(){\n \/\/ \ud83d\udeab Console \u8b66\u544a\n const warningStyle = 'font-size:20px;color:red;font-weight:bold;';\n console.log('%c\u26a0\ufe0f \u8b66\u544a\uff1a\u5075\u6e2c\u5230\u958b\u767c\u8005\u5de5\u5177 \u26a0\ufe0f', warningStyle);\n console.log('%c\u6b64\u9801\u9762\u53d7\u5230\u4fdd\u8b77\uff0c\u8acb\u52ff\u5617\u8a66\u67e5\u770b\u6216\u8907\u88fd\u4ee3\u78bc', 'font-size:14px;color:orange;');\n\n \/\/ \ud83d\udd12 \u7121\u9650 debugger\uff08\u8b93\u958b\u767c\u8005\u5de5\u5177\u5361\u4f4f\uff09\n setInterval(function(){\n (function(a){return(function(a){return(Function('Function(arguments[0]+\"'+a+'\")()'))})(a)})('bugger')('de');\n }, 50);\n\n \/\/ \ud83d\udd0d \u5075\u6e2c\u958b\u767c\u8005\u5de5\u5177\n let devToolsOpen = false;\n const threshold = 160;\n\n const detectDevTools = function(){\n const widthThreshold = window.outerWidth - window.innerWidth > threshold;\n const heightThreshold = window.outerHeight - window.innerHeight > threshold;\n\n if(widthThreshold || heightThreshold){\n if(!devToolsOpen){\n devToolsOpen = true;\n \/\/ \ud83d\udca5 \u6e05\u7a7a\u7db2\u9801\n document.body.innerHTML = '<div style=\"display:flex;justify-content:center;align-items:center;height:100vh;background:#000;color:#fff;font-size:20px;\">\u26a0\ufe0f \u5b58\u53d6\u88ab\u62d2\u7d55<\/div>';\n }\n }\n };\n\n setInterval(detectDevTools, 500);\n window.addEventListener('resize', detectDevTools);\n\n \/\/ \ud83d\udeab \u7981\u6b62\u53f3\u9375\n document.addEventListener('contextmenu', function(e){ e.preventDefault(); });\n\n \/\/ \ud83d\udeab \u7981\u6b62\u5e38\u7528\u5feb\u6377\u9375 (F12, Ctrl+Shift+I, Ctrl+U)\n document.addEventListener('keydown', function(e){\n if(e.key === 'F12' ||\n (e.ctrlKey && e.shiftKey && e.key === 'I') ||\n (e.ctrlKey && e.shiftKey && e.key === 'J') ||\n (e.ctrlKey && e.key === 'U')){\n e.preventDefault();\n return false;\n }\n });\n })();\n *\/\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udf10 API \u8a2d\u5b9a\u8207\u52d5\u614b\u8f09\u5165\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n const API_BASE = 'https:\/\/maybeits.me\/wp-json\/ragic-proxy\/v1';\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API \u7aef\u9ede\n const API_QUIZ_BY_CODE = `${API_BASE}\/quiz-by-code`;\n\n \/\/ \u89d2\u8272 \u2192 API \u8def\u5f91\u5c0d\u61c9\uff08\u5099\u7528\uff09\n const roleToPath = {\n 'F1': '\/1', 'F2': '\/2', 'F3': '\/3', 'F4': '\/4', 'F5': '\/5', 'F6': '\/6',\n 'M1': '\/7', 'M2': '\/8', 'M3': '\/9', 'M4': '\/10', 'M5': '\/11', 'M6': '\/12',\n 'ALL': '\/0'\n };\n\n \/\/ \u4e3b\u984c\u5206\u985e \u2192 \u8996\u89ba\u6a23\u5f0f\uff08Hardcode\uff09\n const chapterStyles = {\n \"\u65e5\u5e38\u7684\u8d77\u9ede\": {\n colors: [\"#5e4b49\", \"#695351\", \"#867b78\", \"#a09f9b\", \"#d2cbc9\"],\n fireworkHues: [30, 40, 50] \/\/ \u6696\u6a58\u91d1\n },\n \"\u6311\u6230\u8207\u5192\u96aa\": {\n colors: [\"#323836\", \"#566367\", \"#7B8E95\", \"#A4A9A9\", \"#CEC5BE\"],\n fireworkHues: [180, 200, 220] \/\/ \u51b7\u9752\u85cd\n },\n \"\u5167\u5fc3\u7684\u8a66\u7149\": {\n colors: [\"#020202\", \"#392B27\", \"#715349\", \"#9F8882\", \"#CDBEBB\"],\n fireworkHues: [0, 20, 340] \/\/ \u6df1\u7d05\u73ab\u7470\n },\n \"\u771f\u5be6\u7684\u6b78\u4f86\": {\n colors: [\"#2F2F2F\", \"#3B4F5E\", \"#486F8E\", \"#96AAB9\", \"#E5E5E5\"],\n fireworkHues: [260, 280, 300] \/\/ \u795e\u79d8\u7d2b\n }\n };\n\n \/\/ \u52d5\u614b\u8cc7\u6599\u5bb9\u5668\uff08\u5f9e API \u8f09\u5165\u5f8c\u586b\u5145\uff09\n let imageSources = {};\n let chapterRanges = [];\n let fireworkColors = {};\n let transitions = {};\n let quizData = [];\n\n \/\/ \ud83c\udf10 \u591a\u8a9e\u8a00\u652f\u63f4\n const SUPPORTED_LANGS = ['zh-hk', 'zh-cn', 'en', 'kr', 'jp', 'th', 'vi', 'br', 'id'];\n\n \/\/ UI \u6587\u5b57\u7ffb\u8b6f\u5b57\u5178\n const UI_TRANSLATIONS = {\n '': { \/\/ \u7e41\u9ad4\u4e2d\u6587 TW\uff08\u9810\u8a2d\uff09\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u7684\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u611f\u8b1d\u4f60\u7684\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u5011\u62b5\u9054\u4e86\u9019\u88e1\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5982\u6b64\u771f\u8aa0\u5730\u8207\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u4e86\u9019\u8d9f\u63a2\u7d22\u3002\u9019\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u7167\u7247',\n nextStepText: '\u70ba\u4e86\u8b93\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u7167\u7247\uff0c\u7528\u65bc\u751f\u6210\u5c08\u5c6c\u7684<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u662f\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u7167\u7247\u5f8c\u7d04\u9700 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u7522\u51fa\u7d50\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u9ede\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u6c92\u6709\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-hk': { \/\/ \u7e41\u9ad4\u4e2d\u6587 HK\n loading: '\u8f09\u5165\u6e2c\u9a57\u4e2d...',\n questionLoading: '\u984c\u76ee\u8f09\u5165\u7dca...',\n prevQuestion: '\u4e0a\u4e00\u984c',\n tapToContinue: '\u64b3\u4efb\u610f\u4f4d\u7f6e\u7e7c\u7e8c',\n ready: '\u6211\u6e96\u5099\u597d\u5587\uff0c\u53bb\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u6e96\u5099\u9818\u53d6\u4f60\u5605\u5c08\u5c6c\u9748\u9b42\u5831\u544a \u2500\u2500',\n thanks: '\u591a\u8b1d\u4f60\u5605\u5805\u6301',\n thanksText: '\u7d42\u65bc\uff0c\u6211\u54cb\u5230\u5497\u5462\u5ea6\u3002\u6df1\u6df1\u611f\u8b1d\u4f60\u5481\u771f\u8aa0\u5481\u540c\u81ea\u5df1\u5c0d\u8a71\uff0c\u5b8c\u6210\u5497\u5462\u8d9f\u63a2\u7d22\u3002\u5462\u4efd\u5805\u6301\uff0c\u672c\u8eab\u5c31\u4fc2\u4e00\u7a2e\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u50b3\u76f8\u7247',\n nextStepText: '\u70ba\u5497\u4ee4\u5831\u544a\u771f\u6b63\u5c6c\u65bc\u4f60\uff0c\u4e0b\u4e00\u968e\u6bb5\u6703\u9080\u8acb\u4f60\u63d0\u4f9b\u4e00\u5f35\u500b\u4eba\u76f8\u7247\uff0c\u7528\u569f\u751f\u6210\u5c08\u5c6c\u5605<span class=\"final-highlight\">\u300cQ\u7248\u60c5\u5883\u5716\u7247\u300d<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u70ba\u4fc2\u6df1\u5ea6\u5ba2\u88fd\u5316\u89e3\u6790\uff0c\u4e0a\u50b3\u76f8\u7247\u5f8c\u5927\u6982\u9700\u8981 <span class=\"final-highlight\">15 \u5206\u9418<\/span> \u5148\u51fa\u5230\u7d50\u679c\u3002\u7f8e\u597d\u5605\u5622\uff0c\u503c\u5f97\u7b49\u4e00\u9663\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8cbb\u9818\u53d6\u7c21\u6613\u7248\u5831\u544a',\n paidHint: '( \u6b64\u70ba\u4ed8\u8cbb\u89e3\u9396\u5ba2\u88fd\u5316\u5831\u544a\u5c08\u5c6c\u6d41\u7a0b\uff0c\u514d\u8cbb\u7248\u5187\u5c08\u5c6c\u60c5\u5883\u5716\u7247 )'\n },\n 'zh-cn': { \/\/ \u7b80\u4f53\u4e2d\u6587\n loading: '\u52a0\u8f7d\u6d4b\u9a8c\u4e2d...',\n questionLoading: '\u9898\u76ee\u52a0\u8f7d\u4e2d...',\n prevQuestion: '\u4e0a\u4e00\u9898',\n tapToContinue: '\u70b9\u51fb\u4efb\u610f\u5904\u7ee7\u7eed',\n ready: '\u6211\u51c6\u5907\u597d\u4e86\uff0c\u524d\u5f80\u4e0b\u4e00\u6b65',\n congrats: '\u606d\u559c\u5b8c\u6210\uff01',\n soulReport: '\u2500\u2500 \u51c6\u5907\u9886\u53d6\u4f60\u7684\u4e13\u5c5e\u7075\u9b42\u62a5\u544a \u2500\u2500',\n thanks: '\u611f\u8c22\u4f60\u7684\u575a\u6301',\n thanksText: '\u7ec8\u4e8e\uff0c\u6211\u4eec\u62b5\u8fbe\u4e86\u8fd9\u91cc\u3002\u6df1\u6df1\u611f\u8c22\u4f60\u5982\u6b64\u771f\u8bda\u5730\u4e0e\u81ea\u5df1\u5bf9\u8bdd\uff0c\u5b8c\u6210\u4e86\u8fd9\u8d9f\u63a2\u7d22\u3002\u8fd9\u4efd\u575a\u6301\uff0c\u672c\u8eab\u5c31\u662f\u4e00\u79cd\u529b\u91cf\u3002',\n nextStep: '\u4e0b\u4e00\u6b65\uff1a\u4e0a\u4f20\u7167\u7247',\n nextStepText: '\u4e3a\u4e86\u8ba9\u62a5\u544a\u771f\u6b63\u5c5e\u4e8e\u4f60\uff0c\u4e0b\u4e00\u9636\u6bb5\u4f1a\u9080\u8bf7\u4f60\u63d0\u4f9b\u4e00\u5f20\u4e2a\u4eba\u7167\u7247\uff0c\u7528\u4e8e\u751f\u6210\u4e13\u5c5e\u7684<span class=\"final-highlight\">\"Q\u7248\u60c5\u5883\u56fe\u7247\"<\/span>\u3002',\n reminder: '\u5c0f\u63d0\u9192',\n reminderText: '\u56e0\u4e3a\u662f\u6df1\u5ea6\u5b9a\u5236\u5316\u89e3\u6790\uff0c\u4e0a\u4f20\u7167\u7247\u540e\u7ea6\u9700 <span class=\"final-highlight\">15 \u5206\u949f<\/span> \u4ea7\u51fa\u7ed3\u679c\u3002\u7f8e\u597d\u7684\u4e8b\u7269\uff0c\u503c\u5f97\u4e00\u70b9\u7b49\u5f85\u3002',\n goBack: '\u2190 \u8fd4\u56de\u4fee\u6539\u7b54\u6848',\n freeReport: '\u514d\u8d39\u9886\u53d6\u7b80\u6613\u7248\u62a5\u544a',\n paidHint: '( \u6b64\u4e3a\u4ed8\u8d39\u89e3\u9501\u5b9a\u5236\u5316\u62a5\u544a\u4e13\u5c5e\u6d41\u7a0b\uff0c\u514d\u8d39\u7248\u6ca1\u6709\u4e13\u5c5e\u60c5\u5883\u56fe\u7247 )'\n },\n 'en': { \/\/ English\n loading: 'Loading quiz...',\n questionLoading: 'Loading question...',\n prevQuestion: 'Previous',\n tapToContinue: 'Tap anywhere to continue',\n ready: \"I'm ready, let's go!\",\n congrats: 'Congratulations!',\n soulReport: '\u2500\u2500 Ready to receive your soul report \u2500\u2500',\n thanks: 'Thank you for your perseverance',\n thanksText: \"Finally, we've arrived here. Thank you for such an honest dialogue with yourself, completing this journey of exploration. This perseverance itself is a form of strength.\",\n nextStep: 'Next: Upload Photo',\n nextStepText: 'To make the report truly yours, the next step will invite you to provide a personal photo to generate your exclusive <span class=\"final-highlight\">\"Q-style avatar\"<\/span>.',\n reminder: 'Reminder',\n reminderText: 'As this is a deeply customized analysis, it takes about <span class=\"final-highlight\">15 minutes<\/span> to generate results after uploading. Good things are worth the wait.',\n goBack: '\u2190 Go back to edit answers',\n freeReport: 'Get Free Basic Report',\n paidHint: '( This is for paid customized reports only. Free version does not include personalized scene images )'\n },\n 'kr': { \/\/ \ud55c\uad6d\uc5b4\n loading: '\ud14c\uc2a4\ud2b8 \ub85c\ub529 \uc911...',\n questionLoading: '\uc9c8\ubb38 \ub85c\ub529 \uc911...',\n prevQuestion: '\uc774\uc804',\n tapToContinue: '\uc544\ubb34 \uacf3\uc774\ub098 \ud0ed\ud558\uc5ec \uacc4\uc18d',\n ready: '\uc900\ube44\ub410\uc5b4\uc694, \ub2e4\uc74c\uc73c\ub85c!',\n congrats: '\ucd95\ud558\ud569\ub2c8\ub2e4!',\n soulReport: '\u2500\u2500 \uc601\ud63c \ubcf4\uace0\uc11c\ub97c \ubc1b\uc744 \uc900\ube44\uac00 \ub410\uc5b4\uc694 \u2500\u2500',\n thanks: '\ub048\uae30\uc5d0 \uac10\uc0ac\ub4dc\ub824\uc694',\n thanksText: '\ub4dc\ub514\uc5b4 \uc5ec\uae30\uae4c\uc9c0 \uc654\uc5b4\uc694. \uc790\uc2e0\uacfc\uc758 \uc9c4\uc194\ud55c \ub300\ud654\ub97c \ud1b5\ud574 \uc774 \ud0d0\ud5d8\uc744 \uc644\ub8cc\ud574 \uc8fc\uc154\uc11c \uac10\uc0ac\ud569\ub2c8\ub2e4. \uc774 \ub048\uae30 \uc790\uccb4\uac00 \ud798\uc774\uc5d0\uc694.',\n nextStep: '\ub2e4\uc74c: \uc0ac\uc9c4 \uc5c5\ub85c\ub4dc',\n nextStepText: '\ubcf4\uace0\uc11c\ub97c \uc9c4\uc815\uc73c\ub85c \ub2f9\uc2e0\uc758 \uac83\uc73c\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574, \ub2e4\uc74c \ub2e8\uacc4\uc5d0\uc11c \uac1c\uc778 \uc0ac\uc9c4\uc744 \uc81c\uacf5\ud558\uc5ec \uc804\uc6a9 <span class=\"final-highlight\">\"Q\ubc84\uc804 \uc544\ubc14\ud0c0\"<\/span>\ub97c \uc0dd\uc131\ud574\uc694.',\n reminder: '\uc54c\ub9bc',\n reminderText: '\uc2ec\uce35 \ub9de\ucda4 \ubd84\uc11d\uc774\ubbc0\ub85c \uc5c5\ub85c\ub4dc \ud6c4 \uacb0\uacfc \uc0dd\uc131\uc5d0 \uc57d <span class=\"final-highlight\">15\ubd84<\/span>\uc774 \uc18c\uc694\ub3fc\uc694. \uc88b\uc740 \uac83\uc740 \uae30\ub2e4\ub9b4 \uac00\uce58\uac00 \uc788\uc5b4\uc694.',\n goBack: '\u2190 \ub2f5\ubcc0 \uc218\uc815\ud558\ub7ec \ub3cc\uc544\uac00\uae30',\n freeReport: '\ubb34\ub8cc \uae30\ubcf8 \ubcf4\uace0\uc11c \ubc1b\uae30',\n paidHint: '( \uc720\ub8cc \ub9de\ucda4\ud615 \ubcf4\uace0\uc11c \uc804\uc6a9 \uacfc\uc815\uc785\ub2c8\ub2e4. \ubb34\ub8cc \ubc84\uc804\uc5d0\ub294 \ub9de\ucda4 \uc774\ubbf8\uc9c0\uac00 \ud3ec\ud568\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4 )'\n },\n 'jp': { \/\/ \u65e5\u672c\u8a9e\n loading: '\u30af\u30a4\u30ba\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n questionLoading: '\u8cea\u554f\u3092\u8aad\u307f\u8fbc\u307f\u4e2d...',\n prevQuestion: '\u524d\u3078',\n tapToContinue: '\u30bf\u30c3\u30d7\u3057\u3066\u7d9a\u3051\u308b',\n ready: '\u6e96\u5099\u5b8c\u4e86\u3001\u6b21\u3078\u9032\u3080\uff01',\n congrats: '\u304a\u3081\u3067\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01',\n soulReport: '\u2500\u2500 \u9b42\u306e\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f \u2500\u2500',\n thanks: '\u3042\u306a\u305f\u306e\u5fcd\u8010\u306b\u611f\u8b1d',\n thanksText: '\u3064\u3044\u306b\u3053\u3053\u307e\u3067\u6765\u307e\u3057\u305f\u3002\u81ea\u5206\u81ea\u8eab\u3068\u306e\u6b63\u76f4\u306a\u5bfe\u8a71\u3092\u901a\u3058\u3066\u3001\u3053\u306e\u63a2\u6c42\u306e\u65c5\u3092\u5b8c\u4e86\u3057\u3066\u3044\u305f\u3060\u304d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u3053\u306e\u5fcd\u8010\u529b\u81ea\u4f53\u304c\u529b\u3067\u3059\u3002',\n nextStep: '\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u5199\u771f\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9',\n nextStepText: '\u30ec\u30dd\u30fc\u30c8\u3092\u672c\u5f53\u306b\u3042\u306a\u305f\u306e\u3082\u306e\u306b\u3059\u308b\u305f\u3081\u306b\u3001\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\u3067\u306f\u500b\u4eba\u306e\u5199\u771f\u3092\u63d0\u4f9b\u3057\u3066\u3001\u5c02\u7528\u306e<span class=\"final-highlight\">\u300cQ\u30d0\u30fc\u30b8\u30e7\u30f3\u30a2\u30d0\u30bf\u30fc\u300d<\/span>\u3092\u751f\u6210\u3057\u307e\u3059\u3002',\n reminder: '\u304a\u77e5\u3089\u305b',\n reminderText: '\u6df1\u3044\u30ab\u30b9\u30bf\u30e0\u5206\u6790\u306e\u305f\u3081\u3001\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u5f8c\u306e\u7d50\u679c\u751f\u6210\u306b\u306f\u7d04<span class=\"final-highlight\">15\u5206<\/span>\u304b\u304b\u308a\u307e\u3059\u3002\u826f\u3044\u3082\u306e\u306b\u306f\u5f85\u3064\u4fa1\u5024\u304c\u3042\u308a\u307e\u3059\u3002',\n goBack: '\u2190 \u56de\u7b54\u3092\u7de8\u96c6\u3059\u308b',\n freeReport: '\u7121\u6599\u3067\u7c21\u6613\u30ec\u30dd\u30fc\u30c8\u3092\u53d7\u3051\u53d6\u308b',\n paidHint: '( \u3053\u3061\u3089\u306f\u6709\u6599\u30ab\u30b9\u30bf\u30e0\u30ec\u30dd\u30fc\u30c8\u5c02\u7528\u3067\u3059\u3002\u7121\u6599\u7248\u306b\u306f\u5c02\u7528\u30a4\u30e1\u30fc\u30b8\u753b\u50cf\u306f\u542b\u307e\u308c\u307e\u305b\u3093 )'\n },\n 'th': { \/\/ \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22\n loading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e1a\u0e1a\u0e17\u0e14\u0e2a\u0e2d\u0e1a...',\n questionLoading: '\u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e04\u0e33\u0e16\u0e32\u0e21...',\n prevQuestion: '\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32',\n tapToContinue: '\u0e41\u0e15\u0e30\u0e17\u0e35\u0e48\u0e43\u0e14\u0e01\u0e47\u0e44\u0e14\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e15\u0e48\u0e2d',\n ready: '\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e25\u0e49\u0e27 \u0e44\u0e1b\u0e15\u0e48\u0e2d\u0e01\u0e31\u0e19\u0e40\u0e25\u0e22!',\n congrats: '\u0e22\u0e34\u0e19\u0e14\u0e35\u0e14\u0e49\u0e27\u0e22!',\n soulReport: '\u2500\u2500 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e27\u0e34\u0e0d\u0e0d\u0e32\u0e13\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13 \u2500\u2500',\n thanks: '\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n thanksText: '\u0e43\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e40\u0e23\u0e32\u0e01\u0e47\u0e21\u0e32\u0e16\u0e36\u0e07\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e2a\u0e19\u0e17\u0e19\u0e32\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e08\u0e23\u0e34\u0e07\u0e43\u0e08\u0e01\u0e31\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e2d\u0e07 \u0e04\u0e27\u0e32\u0e21\u0e21\u0e38\u0e48\u0e07\u0e21\u0e31\u0e48\u0e19\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e1e\u0e25\u0e31\u0e07\u0e43\u0e19\u0e15\u0e31\u0e27\u0e21\u0e31\u0e19\u0e40\u0e2d\u0e07',\n nextStep: '\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b: \u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e',\n nextStepText: '\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e41\u0e17\u0e49\u0e08\u0e23\u0e34\u0e07 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e08\u0e30\u0e40\u0e0a\u0e34\u0e0d\u0e43\u0e2b\u0e49\u0e04\u0e38\u0e13\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e31\u0e27\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07<span class=\"final-highlight\">\"\u0e2d\u0e27\u0e32\u0e15\u0e32\u0e23\u0e4c Q\"<\/span>\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13',\n reminder: '\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e04\u0e27\u0e32\u0e21\u0e08\u0e33',\n reminderText: '\u0e40\u0e19\u0e37\u0e48\u0e2d\u0e07\u0e08\u0e32\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 \u0e08\u0e30\u0e43\u0e0a\u0e49\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e23\u0e30\u0e21\u0e32\u0e13 <span class=\"final-highlight\">15 \u0e19\u0e32\u0e17\u0e35<\/span> \u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1c\u0e25\u0e25\u0e31\u0e1e\u0e18\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e2d\u0e31\u0e1b\u0e42\u0e2b\u0e25\u0e14 \u0e2a\u0e34\u0e48\u0e07\u0e14\u0e35\u0e46 \u0e04\u0e38\u0e49\u0e21\u0e04\u0e48\u0e32\u0e41\u0e01\u0e48\u0e01\u0e32\u0e23\u0e23\u0e2d\u0e04\u0e2d\u0e22',\n goBack: '\u2190 \u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02\u0e04\u0e33\u0e15\u0e2d\u0e1a',\n freeReport: '\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e1f\u0e23\u0e35',\n paidHint: '( \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e19\u0e35\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e07\u0e32\u0e19\u0e41\u0e1a\u0e1a\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e40\u0e2d\u0e07\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e40\u0e07\u0e34\u0e19 \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e19\u0e1f\u0e23\u0e35\u0e44\u0e21\u0e48\u0e21\u0e35\u0e20\u0e32\u0e1e\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e1a\u0e38\u0e04\u0e04\u0e25 )'\n },\n 'vi': { \/\/ Ti\u1ebfng Vi\u1ec7t\n loading: '\u0110ang t\u1ea3i b\u00e0i ki\u1ec3m tra...',\n questionLoading: '\u0110ang t\u1ea3i c\u00e2u h\u1ecfi...',\n prevQuestion: 'Tr\u01b0\u1edbc',\n tapToContinue: 'Nh\u1ea5n b\u1ea5t k\u1ef3 \u0111\u00e2u \u0111\u1ec3 ti\u1ebfp t\u1ee5c',\n ready: 'T\u00f4i \u0111\u00e3 s\u1eb5n s\u00e0ng, ti\u1ebfp t\u1ee5c n\u00e0o!',\n congrats: 'Ch\u00fac m\u1eebng!',\n soulReport: '\u2500\u2500 S\u1eb5n s\u00e0ng nh\u1eadn b\u00e1o c\u00e1o t\u00e2m h\u1ed3n c\u1ee7a b\u1ea1n \u2500\u2500',\n thanks: 'C\u1ea3m \u01a1n s\u1ef1 ki\u00ean tr\u00ec c\u1ee7a b\u1ea1n',\n thanksText: 'Cu\u1ed1i c\u00f9ng, ch\u00fang ta \u0111\u00e3 \u0111\u1ebfn \u0111\u00e2y. C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 th\u00e0nh th\u1eadt \u0111\u1ed1i tho\u1ea1i v\u1edbi ch\u00ednh m\u00ecnh. S\u1ef1 ki\u00ean tr\u00ec n\u00e0y ch\u00ednh l\u00e0 s\u1ee9c m\u1ea1nh.',\n nextStep: 'B\u01b0\u1edbc ti\u1ebfp theo: T\u1ea3i \u1ea3nh l\u00ean',\n nextStepText: '\u0110\u1ec3 b\u00e1o c\u00e1o th\u1ef1c s\u1ef1 thu\u1ed9c v\u1ec1 b\u1ea1n, b\u01b0\u1edbc ti\u1ebfp theo s\u1ebd m\u1eddi b\u1ea1n cung c\u1ea5p \u1ea3nh c\u00e1 nh\u00e2n \u0111\u1ec3 t\u1ea1o <span class=\"final-highlight\">\"avatar Q\"<\/span> \u0111\u1ed9c quy\u1ec1n.',\n reminder: 'L\u01b0u \u00fd',\n reminderText: 'V\u00ec \u0111\u00e2y l\u00e0 ph\u00e2n t\u00edch t\u00f9y ch\u1ec9nh s\u00e2u, s\u1ebd m\u1ea5t kho\u1ea3ng <span class=\"final-highlight\">15 ph\u00fat<\/span> \u0111\u1ec3 t\u1ea1o k\u1ebft qu\u1ea3 sau khi t\u1ea3i l\u00ean. Nh\u1eefng \u0111i\u1ec1u t\u1ed1t \u0111\u1eb9p \u0111\u00e1ng \u0111\u1ec3 ch\u1edd \u0111\u1ee3i.',\n goBack: '\u2190 Quay l\u1ea1i ch\u1ec9nh s\u1eeda c\u00e2u tr\u1ea3 l\u1eddi',\n freeReport: 'Nh\u1eadn b\u00e1o c\u00e1o c\u01a1 b\u1ea3n mi\u1ec5n ph\u00ed',\n paidHint: '( \u0110\u00e2y l\u00e0 quy tr\u00ecnh d\u00e0nh cho b\u00e1o c\u00e1o t\u00f9y ch\u1ec9nh tr\u1ea3 ph\u00ed. B\u1ea3n mi\u1ec5n ph\u00ed kh\u00f4ng c\u00f3 h\u00ecnh \u1ea3nh c\u00e1 nh\u00e2n h\u00f3a )'\n },\n 'br': { \/\/ Portugu\u00eas\n loading: 'Carregando quiz...',\n questionLoading: 'Carregando pergunta...',\n prevQuestion: 'Anterior',\n tapToContinue: 'Toque em qualquer lugar para continuar',\n ready: 'Estou pronto, vamos l\u00e1!',\n congrats: 'Parab\u00e9ns!',\n soulReport: '\u2500\u2500 Pronto para receber seu relat\u00f3rio da alma \u2500\u2500',\n thanks: 'Obrigado pela sua perseveran\u00e7a',\n thanksText: 'Finalmente chegamos aqui. Obrigado por um di\u00e1logo t\u00e3o honesto consigo mesmo. Essa perseveran\u00e7a em si \u00e9 uma for\u00e7a.',\n nextStep: 'Pr\u00f3ximo: Enviar Foto',\n nextStepText: 'Para tornar o relat\u00f3rio verdadeiramente seu, o pr\u00f3ximo passo convidar\u00e1 voc\u00ea a fornecer uma foto pessoal para gerar seu <span class=\"final-highlight\">\"avatar Q\"<\/span> exclusivo.',\n reminder: 'Lembrete',\n reminderText: 'Como esta \u00e9 uma an\u00e1lise profundamente personalizada, levar\u00e1 cerca de <span class=\"final-highlight\">15 minutos<\/span> para gerar os resultados ap\u00f3s o upload. Coisas boas valem a espera.',\n goBack: '\u2190 Voltar para editar respostas',\n freeReport: 'Receba o Relat\u00f3rio B\u00e1sico Gr\u00e1tis',\n paidHint: '( Este \u00e9 o fluxo exclusivo do relat\u00f3rio personalizado pago. A vers\u00e3o gratuita n\u00e3o inclui imagens personalizadas )'\n },\n 'id': { \/\/ Bahasa Indonesia\n loading: 'Memuat kuis...',\n questionLoading: 'Memuat pertanyaan...',\n prevQuestion: 'Sebelumnya',\n tapToContinue: 'Ketuk di mana saja untuk melanjutkan',\n ready: 'Saya siap, ayo lanjut!',\n congrats: 'Selamat!',\n soulReport: '\u2500\u2500 Siap menerima laporan jiwa Anda \u2500\u2500',\n thanks: 'Terima kasih atas ketekunan Anda',\n thanksText: 'Akhirnya, kita sampai di sini. Terima kasih atas dialog yang jujur dengan diri sendiri. Ketekunan ini sendiri adalah kekuatan.',\n nextStep: 'Selanjutnya: Unggah Foto',\n nextStepText: 'Untuk membuat laporan benar-benar milik Anda, langkah selanjutnya akan mengundang Anda untuk memberikan foto pribadi untuk menghasilkan <span class=\"final-highlight\">\"avatar Q\"<\/span> eksklusif Anda.',\n reminder: 'Pengingat',\n reminderText: 'Karena ini adalah analisis yang sangat disesuaikan, butuh sekitar <span class=\"final-highlight\">15 menit<\/span> untuk menghasilkan hasil setelah mengunggah. Hal-hal baik layak ditunggu.',\n goBack: '\u2190 Kembali untuk mengedit jawaban',\n freeReport: 'Dapatkan Laporan Dasar Gratis',\n paidHint: '( Ini adalah alur khusus laporan kustom berbayar. Versi gratis tidak termasuk gambar personal )'\n }\n };\n\n \/\/ \u5075\u6e2c\u7576\u524d\u8a9e\u8a00\uff08\u5f9e URL \u8def\u5f91\u6216 ?lang= \u53c3\u6578\uff09\n function getCurrentLang() {\n \/\/ \ud83e\uddea \u6e2c\u8a66\u7528\uff1a\u512a\u5148\u8b80\u53d6 ?lang= \u53c3\u6578\n const urlParams = new URLSearchParams(window.location.search);\n const langParam = urlParams.get('lang');\n if (langParam && SUPPORTED_LANGS.includes(langParam)) {\n return langParam;\n }\n\n \/\/ \u6b63\u5f0f\u74b0\u5883\uff1a\u5f9e URL \u8def\u5f91\u5075\u6e2c\n const path = window.location.pathname;\n const firstSegment = path.split('\/').filter(s => s)[0] || '';\n return SUPPORTED_LANGS.includes(firstSegment) ? firstSegment : '';\n }\n\n \/\/ \u53d6\u5f97 UI \u7ffb\u8b6f\u6587\u5b57\n function t(key) {\n const translations = UI_TRANSLATIONS[currentLang] || UI_TRANSLATIONS[''];\n return translations[key] || UI_TRANSLATIONS[''][key] || key;\n }\n\n \/\/ \u53d6\u5f97\u591a\u8a9e\u8a00\u6b04\u4f4d\u503c\n function getLocalizedField(field, lang) {\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u7269\u4ef6\uff08\u591a\u8a9e\u8a00\u683c\u5f0f\uff1a{ \"\": \"...\", \"en\": \"...\", ... }\uff09\n if (typeof field === 'object' && field !== null && !Array.isArray(field)) {\n \/\/ \u512a\u5148\u53d6\u7576\u524d\u8a9e\u8a00\uff0c\u82e5\u7121\u5247\u53d6\u7e41\u4e2d\u7248\u672c\uff08\u7a7a\u5b57\u4e32 key\uff09\n return field[lang] !== undefined ? field[lang] : (field[''] || field);\n }\n \/\/ \u5982\u679c\u6b04\u4f4d\u662f\u5b57\u4e32\uff08\u820a\u683c\u5f0f\uff09\uff0c\u76f4\u63a5\u8fd4\u56de\n return field;\n }\n\n \/\/ \u7576\u524d\u8a9e\u8a00\n const currentLang = getCurrentLang();\n console.log('\ud83c\udf10 \u7576\u524d\u8a9e\u8a00:', currentLang || '\u7e41\u9ad4\u4e2d\u6587 TW');\n\n \/\/ \u7528\u6236\u5730\u5340\uff08\u5f9e API \u53d6\u5f97\uff09\n let userArea = '';\n\n \/\/ \u5730\u5340 \u2192 \u8a9e\u8a00\u8def\u5f91\u5c0d\u61c9\u8868\n const areaToLangPath = {\n '\ud83c\uddf9\ud83c\uddfc Taiwan - \u7e41\u9ad4\u4e2d\u6587': '',\n '\ud83c\udded\ud83c\uddf0 Hong Kong - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\uddf2\ud83c\uddf4 Macau - \u7e41\u9ad4\u4e2d\u6587': '\/zh-hk',\n '\ud83c\udde8\ud83c\uddf3 China - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf8\ud83c\uddec Singapore - English': '\/en',\n '\ud83c\uddf8\ud83c\uddec Singapore - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - English': '\/en',\n '\ud83c\uddf2\ud83c\uddfe Malaysia - \u7b80\u4f53\u4e2d\u6587': '\/zh-cn',\n '\ud83c\uddec\ud83c\udde7 United Kingdom - English': '\/en',\n '\ud83c\uddea\ud83c\uddfa Europe (EU) - English': '\/en',\n '\ud83c\udf10 Global \/ Other - English': '\/en',\n '\ud83c\uddf0\ud83c\uddf7 South Korea - \ud55c\uad6d\uc5b4': '\/kr',\n '\ud83c\uddef\ud83c\uddf5 Japan - \u65e5\u672c\u8a9e': '\/jp',\n '\ud83c\udde7\ud83c\uddf7 Brazil - Portugu\u00eas': '\/br',\n '\ud83c\uddf9\ud83c\udded Thailand - \u0e20\u0e32\u0e29\u0e32\u0e44\u0e17\u0e22': '\/th',\n '\ud83c\uddfb\ud83c\uddf3 Vietnam - Ti\u1ebfng Vi\u1ec7t': '\/vi',\n '\ud83c\uddee\ud83c\udde9 Indonesia - Bahasa Indonesia': '\/id',\n '\ud83c\uddf5\ud83c\udded Philippines - English': '\/en',\n '\ud83c\udde6\ud83c\uddfa Australia - English': '\/en',\n };\n\n \/\/ \u6839\u64da\u5730\u5340\u53d6\u5f97\u8a9e\u8a00\u8def\u5f91\n function getLangPathByArea(area) {\n return areaToLangPath[area] || '';\n }\n\n \/\/ \ud83d\udd04 Loading \/ Error \u63a7\u5236\n function showLoading() {\n document.getElementById('loadingScreen').classList.remove('hidden');\n }\n function hideLoading() {\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n function showError(title, message) {\n document.getElementById('errorTitle').textContent = title;\n document.getElementById('errorMessage').textContent = message;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83c\udf89 \u986f\u793a\u5df2\u5b8c\u6210\u6e2c\u9a57\u8a0a\u606f\n function showCompletedMessage(code) {\n const resultUrl = `https:\/\/maybeits.me\/mbti-result\/?id=${encodeURIComponent(code)}`;\n document.getElementById('errorTitle').textContent = '\ud83c\udf89 \u4f60\u5df2\u5b8c\u6210\u6e2c\u9a57';\n document.getElementById('errorMessage').innerHTML = `\n \u4f60\u5df2\u6e2c\u5b8c MBTI \u6e2c\u9a57\uff0c\u4ee5\u4e0b\u662f\u4f60\u7684\u5831\u544a\u9023\u7d50\uff1a<br><br>\n <a href=\"${resultUrl}\" style=\"color: var(--accent-color); text-decoration: underline; word-break: break-all;\">${resultUrl}<\/a>\n `;\n document.getElementById('errorScreen').classList.add('active');\n document.getElementById('loadingScreen').classList.add('hidden');\n }\n\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n async function fetchQuizByCode(code) {\n const url = `${API_QUIZ_BY_CODE}?code=${encodeURIComponent(code)}`;\n const res = await fetch(url);\n\n if (!res.ok) {\n const errorData = await res.json().catch(() => ({}));\n throw new Error(errorData.message || '\u8f09\u5165\u5931\u6557');\n }\n\n const data = await res.json();\n\n \/\/ \u4fdd\u5b58 _meta \u8cc7\u8a0a\n const meta = data._meta;\n\n \/\/ \u79fb\u9664 meta \u8cc7\u8a0a\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u6e2c\u9a57\u8cc7\u6599\n delete data._meta;\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n \/\/ \u5c07 _meta \u9644\u52a0\u5230\u6e2c\u9a57\u8cc7\u6599\u4e0a\n const quizData = records[0];\n quizData._meta = meta;\n\n return quizData;\n }\n\n \/\/ \ud83d\udce1 API 1: \u67e5\u8a62\u4ee3\u78bc\u5c0d\u61c9\u7684\u89d2\u8272\uff08\u5099\u7528\uff09\n async function fetchCodeData(code) {\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/5&where=1005241,eq,${encodeURIComponent(code)}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u7db2\u8def\u9023\u7dda\u7570\u5e38');\n const data = await res.json();\n\n \/\/ \u79fb\u9664 _debug \u6b04\u4f4d\uff0c\u53d6\u5f97\u7b2c\u4e00\u7b46\u8cc7\u6599\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u4ee3\u78bc\u7121\u6548\u6216\u5df2\u904e\u671f');\n\n return records[0];\n }\n\n \/\/ \ud83d\udce1 API 2: \u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\uff08\u5099\u7528\uff09\n async function fetchQuizRawData(role) {\n const pathSuffix = roleToPath[role];\n if (!pathSuffix) throw new Error('\u89d2\u8272\u4ee3\u78bc\u7121\u6548');\n\n const url = `${API_BASE}\/get?path=\/comeonn\/mbti\/11${pathSuffix}`;\n const res = await fetch(url);\n if (!res.ok) throw new Error('\u8f09\u5165\u6e2c\u9a57\u8cc7\u6599\u5931\u6557');\n const data = await res.json();\n\n delete data._debug;\n const records = Object.values(data);\n if (records.length === 0) throw new Error('\u6e2c\u9a57\u8cc7\u6599\u4e0d\u5b58\u5728');\n\n return records[0];\n }\n\n \/\/ \ud83d\udd27 \u89e3\u6790 JSON \u6b04\u4f4d\uff0c\u5efa\u7acb\u984c\u5eab\n function buildQuizFromAPI(rawData) {\n \/\/ \ud83c\udf10 \u89e3\u6790\u591a\u8a9e\u8a00 JSON\uff08\u6b04\u4f4d\u662f JSON \u5b57\u4e32\uff0c\u88e1\u9762\u5305\u542b\u591a\u8a9e\u8a00\u7d50\u69cb\uff09\n let quizConfig;\n try {\n \/\/ \u5148\u89e3\u6790 JSON \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedJSON = JSON.parse(rawData.JSON);\n \/\/ \u5982\u679c\u662f\u591a\u8a9e\u8a00\u7d50\u69cb\uff08\u7269\u4ef6 with \u8a9e\u8a00 key\uff09\uff0c\u53d6\u5f97\u5c0d\u61c9\u8a9e\u8a00\n if (typeof parsedJSON === 'object' && parsedJSON !== null && !Array.isArray(parsedJSON)) {\n \/\/ \u6aa2\u67e5\u662f\u5426\u6709\u8a9e\u8a00 key\uff08\u5982 \"\"\u3001\"en\"\u3001\"jp\" \u7b49\uff09\n const hasLangKeys = Object.keys(parsedJSON).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n quizConfig = parsedJSON[currentLang] || parsedJSON[''] || parsedJSON;\n console.log('\ud83c\udf10 \u5df2\u8f09\u5165\u8a9e\u8a00\u7248\u672c\u7684\u6e2c\u9a57\u914d\u7f6e:', currentLang || '\u7e41\u4e2d');\n } else {\n \/\/ \u820a\u683c\u5f0f\uff08\u76f4\u63a5\u662f\u984c\u76ee\u914d\u7f6e\uff09\n quizConfig = parsedJSON;\n console.log('\ud83d\udccb \u5df2\u8f09\u5165\u6e2c\u9a57\u914d\u7f6e\uff08\u55ae\u8a9e\u8a00\u683c\u5f0f\uff09');\n }\n } else {\n quizConfig = parsedJSON;\n }\n } catch (e) {\n console.error('\u274c \u89e3\u6790 JSON \u6b04\u4f4d\u5931\u6557:', e);\n return;\n }\n\n \/\/ \ud83c\udfaf \u5132\u5b58\u300c5\u985e\u578b\u6587\u6848\u300d\u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u4f7f\u7528\uff09\n if (rawData['5\u985e\u578b\u6587\u6848']) {\n try {\n \/\/ \u5148\u89e3\u6790 5\u985e\u578b\u6587\u6848 \u6b04\u4f4d\uff08\u5916\u5c64\u662f\u5b57\u4e32\uff09\n const parsedPaywall = JSON.parse(rawData['5\u985e\u578b\u6587\u6848']);\n let localizedPaywall;\n \/\/ \u6aa2\u67e5\u662f\u5426\u70ba\u591a\u8a9e\u8a00\u7d50\u69cb\n if (typeof parsedPaywall === 'object' && parsedPaywall !== null && !Array.isArray(parsedPaywall)) {\n const hasLangKeys = Object.keys(parsedPaywall).some(k => k === '' || SUPPORTED_LANGS.includes(k));\n if (hasLangKeys) {\n \/\/ \u591a\u8a9e\u8a00\u7d50\u69cb\uff1a\u53d6\u5c0d\u61c9\u8a9e\u8a00\uff0cfallback \u5230\u7e41\u4e2d\n localizedPaywall = parsedPaywall[currentLang] || parsedPaywall[''] || parsedPaywall;\n } else {\n localizedPaywall = parsedPaywall;\n }\n } else {\n localizedPaywall = parsedPaywall;\n }\n \/\/ \u5132\u5b58\u70ba JSON \u5b57\u4e32\n sessionStorage.setItem('quiz_paywall_copies', JSON.stringify(localizedPaywall));\n console.log('\u2705 \u5df2\u5132\u5b58 5\u985e\u578b\u6587\u6848\u5230 sessionStorage\uff08\u8a9e\u8a00:', currentLang || '\u7e41\u4e2d', '\uff09');\n } catch (e) {\n console.error('\u274c \u89e3\u6790 5\u985e\u578b\u6587\u6848 \u5931\u6557:', e);\n }\n } else {\n console.warn('\u26a0\ufe0f rawData \u4e2d\u6c92\u6709\u300c5\u985e\u578b\u6587\u6848\u300d\u6b04\u4f4d');\n console.log('rawData \u7684\u6240\u6709 key:', Object.keys(rawData));\n }\n\n \/\/ \u5efa\u7acb\u5716\u7247\u4f86\u6e90\u5c0d\u7167\u8868\n imageSources = {};\n for (let i = 1; i <= 93; i++) {\n const keyA = `${i}-0`, keyB = `${i}-1`;\n if (rawData[`${keyA}-img`]) imageSources[keyA] = rawData[`${keyA}-img`];\n if (rawData[`${keyB}-img`]) imageSources[keyB] = rawData[`${keyB}-img`];\n }\n imageSources[\"default\"] = \"https:\/\/images.unsplash.com\/photo-1534447677768-be436bb09401?w=800&q=80\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u8cc7\u8a0a\u8207\u904e\u5834\n const chapterMap = {};\n transitions = {};\n let questionIndex = 1;\n\n for (let i = 1; i <= 93; i++) {\n const config = quizConfig[String(i)];\n if (!config) continue;\n\n const chapterName = config[\"\u4e3b\u984c\u5206\u985e\"] || \"\u672a\u5206\u985e\";\n\n \/\/ \u6536\u96c6\u7ae0\u7bc0\u7bc4\u570d\n if (!chapterMap[chapterName]) {\n chapterMap[chapterName] = { name: chapterName, start: questionIndex, end: questionIndex };\n } else {\n chapterMap[chapterName].end = questionIndex;\n }\n\n \/\/ \u6536\u96c6\u904e\u5834\u6587\u5b57\n let rawTransText = config[\"\u904e\u5834\u6587\u5b57\"];\n \/\/ \u652f\u63f4\u9663\u5217\u683c\u5f0f\uff08\u6bcf\u884c\u4e00\u500b\u5143\u7d20\uff09\u6216\u5b57\u4e32\u683c\u5f0f\n if (Array.isArray(rawTransText)) {\n rawTransText = rawTransText.join('\\n');\n }\n if (rawTransText && rawTransText.trim()) {\n const text = rawTransText.trim();\n\n \/\/ \u512a\u5148\u4f7f\u7528 JSON \u4e2d\u6307\u5b9a\u7684\u300c\u904e\u5834\u985e\u578b\u300d\uff0c\u5426\u5247\u81ea\u52d5\u5224\u65b7\n let transType = 'minor';\n if (config[\"\u904e\u5834\u985e\u578b\"]) {\n \/\/ JSON \u4e2d\u6709\u660e\u78ba\u6307\u5b9a major\/minor\n transType = config[\"\u904e\u5834\u985e\u578b\"].toLowerCase().trim();\n } else {\n \/\/ \u81ea\u52d5\u5224\u65b7\uff1a\u542b\u300c\u3010\u300d\u6216\u8d85\u904e 3 \u884c = major\n const isMajor = text.includes(\"\u3010\") || text.split('\\n').length > 3;\n transType = isMajor ? 'major' : 'minor';\n }\n\n transitions[questionIndex] = {\n type: transType,\n text: text\n };\n }\n\n questionIndex++;\n }\n\n \/\/ \u52a0\u5165\u6700\u7d42\u904e\u5834\n transitions[94] = { type: 'final' };\n\n \/\/ \u5efa\u7acb chapterRanges\uff08\u52a0\u5165\u984f\u8272\uff09\n chapterRanges = Object.values(chapterMap).map(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n return { ...ch, colors: style.colors };\n });\n\n \/\/ \u5efa\u7acb fireworkColors\n fireworkColors = {};\n chapterRanges.forEach(ch => {\n const style = chapterStyles[ch.name] || chapterStyles[\"\u65e5\u5e38\u7684\u8d77\u9ede\"];\n fireworkColors[ch.start] = { hues: style.fireworkHues, name: ch.name };\n });\n\n \/\/ \u5efa\u7acb quizData \u9663\u5217\n quizData = [];\n for (let i = 1; i <= 94; i++) {\n const config = quizConfig[String(i)];\n let ch = chapterRanges.find(r => i >= r.start && i <= r.end);\n if (!ch) ch = { name: \"\u6700\u7d42\u7ae0\", start: 94, end: 94, colors: [\"#000\", \"#111\", \"#222\", \"#333\", \"#444\"] };\n\n const trans = transitions[i];\n\n \/\/ \u53d6\u5f97\u9078\u9805\u5c0d\u61c9\u7684 key\n let optKeyA = `${i}-0`, optKeyB = `${i}-1`;\n let questionText = `Question ${i}`;\n let textA = \"\u9078\u9805 A\", textB = \"\u9078\u9805 B\";\n\n if (config) {\n optKeyA = config[\"\u9078\u9805A\"] || optKeyA;\n optKeyB = config[\"\u9078\u9805B\"] || optKeyB;\n\n \/\/ \u5f9e rawData \u53d6\u5f97\u984c\u76ee\u548c\u9078\u9805\u6587\u5b57\n const qKey = `Q${optKeyA.split('-')[0]}`;\n questionText = rawData[qKey] || questionText;\n textA = rawData[optKeyA] || textA;\n textB = rawData[optKeyB] || textB;\n }\n\n quizData.push({\n id: i,\n chapter: ch.name,\n chapterStart: ch.start,\n chapterEnd: ch.end,\n bgColors: ch.colors,\n transition: trans,\n questionText: questionText,\n textA: textA,\n textB: textB,\n optionsA: optKeyA,\n optionsB: optKeyB,\n indicator: config ? config[\"\u6307\u6a19\"] : null \/\/ J\/P \u8a08\u5206\u7528\n });\n }\n }\n\n \/\/ \ud83d\ude80 \u4e3b\u8981\u521d\u59cb\u5316\u6d41\u7a0b\uff08\u4f7f\u7528\u5408\u4f75 API\uff09\n async function initQuiz() {\n const urlParams = new URLSearchParams(window.location.search);\n let id = urlParams.get('id');\n\n \/\/ \u5982\u679c URL \u6c92\u6709 id\uff0c\u5617\u8a66\u5f9e sessionStorage \u8b80\u53d6\uff08\u5f9e\u5c0e\u8cfc\u9801\u56de\u4f86\u7684\u60c5\u6cc1\uff09\n if (!id) {\n id = sessionStorage.getItem('quiz_user_id');\n }\n\n if (!id) {\n showError('\u8acb\u78ba\u8a8d\u6e2c\u9a57\u5c08\u5c6c\u9023\u7d50\u662f\u5426\u6b63\u78ba', '\u627e\u4e0d\u5230\u4f60\u7684\u6e2c\u9a57\u4ee3\u78bc ...');\n return;\n }\n\n \/\/ \u5132\u5b58 id \u5230 sessionStorage\uff08\u4f9b\u5c0e\u8cfc\u9801\u56de\u4f86\u6642\u4f7f\u7528\uff09\n sessionStorage.setItem('quiz_user_id', id);\n\n try {\n \/\/ \ud83d\ude80 \u5408\u4f75 API\uff1a\u4e00\u6b21\u53d6\u5f97\u6e2c\u9a57\u8cc7\u6599\n const quizRawData = await fetchQuizByCode(id);\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u5b8c\u6210\u6e2c\u9a57\n if (quizRawData._meta && quizRawData._meta.completed === 'Yes') {\n showCompletedMessage(id);\n return;\n }\n\n \/\/ \ud83c\udfaf \u6aa2\u67e5\u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n if (quizRawData._meta && quizRawData._meta.purchased === 'Yes') {\n hasPurchased = true;\n }\n\n \/\/ \ud83c\udf0d \u4fdd\u5b58\u7528\u6236\u5730\u5340\uff08\u7528\u65bc\u8df3\u8f49\uff09\n if (quizRawData._meta && quizRawData._meta.area) {\n userArea = quizRawData._meta.area;\n console.log('\u7528\u6236\u5730\u5340:', userArea);\n }\n\n \/\/ \u89e3\u6790\u4e26\u5efa\u7acb\u984c\u5eab\n buildQuizFromAPI(quizRawData);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u524d 5 \u984c\u5716\u7247\n preloadUpcoming(-1, 5);\n\n \/\/ \u96b1\u85cf Loading\uff0c\u555f\u52d5\u6e2c\u9a57\n hideLoading();\n loadLcProgress();\n init();\n\n } catch (error) {\n console.error('\u521d\u59cb\u5316\u5931\u6557:', error);\n showError('\u8f09\u5165\u5931\u6557', error.message || '\u8acb\u7a0d\u5f8c\u518d\u8a66');\n }\n }\n\n \/\/ \u5716\u7247\u53d6\u5f97\u51fd\u6578\n function getImgUrl(key) { return imageSources[key] || imageSources[\"default\"]; }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83d\ude80 \u5716\u7247\u9810\u8f09\u5165\u512a\u5316\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n const preloadedImages = new Set();\n\n \/\/ \u9810\u8f09\u5165\u55ae\u5f35\u5716\u7247\n function preloadImage(url) {\n if (!url || preloadedImages.has(url)) return;\n const img = new Image();\n img.src = url;\n preloadedImages.add(url);\n }\n\n \/\/ \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 N \u984c\u7684\u5716\u7247\n function preloadUpcoming(startIdx, count = 3) {\n for (let i = 1; i <= count; i++) {\n const nextIdx = startIdx + i;\n if (nextIdx >= quizData.length) break;\n\n const nextQ = quizData[nextIdx];\n if (nextQ) {\n preloadImage(getImgUrl(nextQ.optionsA));\n preloadImage(getImgUrl(nextQ.optionsB));\n }\n }\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \ud83c\udfaf Paywall \u52d5\u614b\u6587\u6848\uff1a\u5132\u5b58 Q1-Q10 \u7b54\u6848\u8207\u6307\u6a19\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n function saveQuizDataForPaywall() {\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u7b54\u6848\uff08\"A\" \u6216 \"B\"\uff09\n const first10Answers = [];\n for (let i = 0; i < 10; i++) {\n const qId = quizData[i].id;\n const answerKey = `q${qId}`;\n const answerVal = answers[answerKey]; \/\/ \"A\" \u6216 \"B\"\n first10Answers.push(answerVal || null);\n }\n\n \/\/ \u53d6\u5f97 Q1~Q10 \u7684\u6307\u6a19\uff08\"J=A\" \u6216 \"J=B\"\uff09\n const first10Indicators = quizData.slice(0, 10).map(q => q.indicator);\n\n \/\/ \u5132\u5b58\u5230 sessionStorage\n sessionStorage.setItem('quiz_answers_10', JSON.stringify(first10Answers));\n sessionStorage.setItem('quiz_indicators_10', JSON.stringify(first10Indicators));\n\n \/\/ \u9664\u932f\u8f38\u51fa\n console.log('\ud83c\udfaf saveQuizDataForPaywall \u57f7\u884c');\n console.log('answers \u7269\u4ef6:', answers);\n console.log('first10Answers:', first10Answers);\n console.log('first10Indicators:', first10Indicators);\n }\n\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \/\/ \u4ee5\u4e0b\u70ba\u539f\u6709\u6e2c\u9a57\u908f\u8f2f\uff08\u8cc7\u6599\u5df2\u6539\u70ba\u52d5\u614b\u8f09\u5165\uff09\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n let currentIdx = 0;\n let isTransitioning = false;\n let transitionTimer = null, typeTimer = null;\n let currentFireworkHues = [30, 40, 50]; \/\/ \u9810\u8a2d\u6696\u8272\n let hasPurchased = false; \/\/ \u662f\u5426\u5df2\u8cfc\u8cb7\u5831\u544a\n let lcCompleted = false; \/\/ Life Concern \u554f\u5377\u662f\u5426\u5df2\u5b8c\u6210\n let lcSelected = { topicIdx: null, topicKey: null, topicName: null, role: null, concern: null };\n const answers = {};\n\n const dom = {\n box: document.getElementById('questionBox'),\n counter: document.getElementById('questionCounter'),\n badge: document.getElementById('chapterBadge'),\n qTitle: document.getElementById('qTitle'),\n imgA: document.getElementById('imgA'), imgB: document.getElementById('imgB'),\n textA: document.getElementById('textA'), textB: document.getElementById('textB'),\n progressBar: document.getElementById('progressBar'),\n prevBtn: document.getElementById('prevBtn'),\n mobileBackBtn: document.getElementById('mobileBackBtn'),\n transitionLayer: document.getElementById('transitionLayer'),\n transText: document.getElementById('transText'),\n transChapter: document.getElementById('transChapter'),\n fireworksCanvas: document.getElementById('fireworksCanvas'),\n desktopMinorText: document.getElementById('desktopMinorText'),\n tapHint: document.getElementById('tapHint'),\n finalBtn: document.getElementById('finalBtn'),\n bgWrapper: document.getElementById('bgWrapper'),\n balloonContainer: document.getElementById('balloonContainer'),\n questionArea: document.getElementById('questionArea'),\n iframeOverlay: document.getElementById('iframeOverlay'),\n embeddedFrame: document.getElementById('embeddedFrame')\n };\n\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316 HTML \u975c\u614b\u6587\u5b57\u7684\u591a\u8a9e\u8a00\u7ffb\u8b6f\n function initUITranslations() {\n \/\/ Loading \u756b\u9762\n const loadingText = document.querySelector('.loading-text');\n if (loadingText) loadingText.textContent = t('loading');\n\n \/\/ iframe \u8f09\u5165\u4e2d\n const iframeLoaderText = document.querySelector('.iframe-loader-text');\n if (iframeLoaderText) iframeLoaderText.textContent = t('loading');\n\n \/\/ \u984c\u76ee\u8f09\u5165\u4e2d\n const qTitle = document.getElementById('qTitle');\n if (qTitle && qTitle.textContent.includes('\u8f09\u5165')) {\n qTitle.textContent = t('questionLoading');\n }\n\n \/\/ \u9ede\u64ca\u4efb\u610f\u8655\u7e7c\u7e8c\n if (dom.tapHint) dom.tapHint.textContent = t('tapToContinue');\n\n \/\/ \u6211\u6e96\u5099\u597d\u4e86\u6309\u9215\n if (dom.finalBtn) dom.finalBtn.textContent = t('ready');\n\n \/\/ \u4e0a\u4e00\u984c\u6309\u9215\n const prevBtn = document.getElementById('prevBtn');\n if (prevBtn) {\n prevBtn.innerHTML = `<span>\u2190<\/span> ${t('prevQuestion')}`;\n }\n\n console.log('\ud83c\udf10 UI \u7ffb\u8b6f\u521d\u59cb\u5316\u5b8c\u6210');\n }\n\n function init() {\n \/\/ \ud83c\udf10 \u521d\u59cb\u5316\u591a\u8a9e\u8a00 UI \u6587\u5b57\n initUITranslations();\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u8b80\u53d6\u8a72\u7528\u6236\u7684\u9032\u5ea6\n const userId = sessionStorage.getItem('quiz_user_id');\n if (userId) {\n const savedProgress = localStorage.getItem(`soul_quiz_progress_${userId}`);\n if (savedProgress) {\n const parsed = JSON.parse(savedProgress);\n if (parsed.idx >= 94) {\n \/\/ idx 94 = \u8d85\u51fa\u7bc4\u570d\uff08Q1-Q93 + final \u5171 94 \u7b46\uff0cidx 0-93\uff09\n localStorage.removeItem(`soul_quiz_progress_${userId}`);\n localStorage.removeItem(`soul_quiz_answer_keys_${userId}`);\n currentIdx = 0;\n } else {\n currentIdx = parsed.idx;\n Object.assign(answers, parsed.answers); \/\/ \u4e00\u5b9a\u8981\u9084\u539f answers\n saveProgress(); \/\/ \u540c\u6b65\u66f4\u65b0 answer_keys\n }\n }\n }\n\n checkTransitionAndLoad();\n }\n\n function saveProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return; \/\/ \u6c92\u6709 userId \u5c31\u4e0d\u5132\u5b58\n\n \/\/ \ud83c\udd95 \u6839\u64da userId \u5132\u5b58\u9032\u5ea6\uff08\u4e0d\u540c\u7528\u6236\u7368\u7acb\u5132\u5b58\uff09\n localStorage.setItem(`soul_quiz_progress_${userId}`, JSON.stringify({ idx: currentIdx, answers: answers }));\n\n \/\/ \u5132\u5b58\u9078\u9805 key\uff08\u4f9b n8n \u4f7f\u7528\uff09\n const answerKeys = {};\n for (const q of quizData) {\n const answerVal = answers[`q${q.id}`];\n if (answerVal) {\n answerKeys[q.id] = answerVal === 'A' ? q.optionsA : q.optionsB;\n }\n }\n localStorage.setItem(`soul_quiz_answer_keys_${userId}`, JSON.stringify(answerKeys));\n }\n\n \/\/ \ud83c\udf1f Life Concern \u9032\u5ea6\u4fdd\u5b58\/\u8b80\u53d6\n function saveLcProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return;\n localStorage.setItem(`soul_lc_${userId}`, JSON.stringify({\n completed: lcCompleted,\n step: lcStep,\n selected: lcSelected\n }));\n }\n\n function loadLcProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return;\n try {\n const saved = JSON.parse(localStorage.getItem(`soul_lc_${userId}`));\n if (saved) {\n lcCompleted = saved.completed || false;\n lcStep = saved.step || 1;\n if (saved.selected) lcSelected = saved.selected;\n }\n } catch (e) {}\n }\n\n function clearLcProgress() {\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) return;\n localStorage.removeItem(`soul_lc_${userId}`);\n }\n\n \/\/ \ud83d\udce6 \u7d44\u6210\u7b54\u6848\u5b57\u4e32\uff08\u4f9b n8n POST\uff09- \u4f9d\u7167 key \u524d\u7db4\u6578\u5b57\u6392\u5e8f\n function generateAnswerString() {\n const userId = sessionStorage.getItem('quiz_user_id');\n const answerKeys = JSON.parse(localStorage.getItem(`soul_quiz_answer_keys_${userId}`) || '{}');\n const parts = [];\n for (let i = 1; i <= 93; i++) {\n if (answerKeys[i]) {\n parts.push(answerKeys[i]);\n }\n }\n \/\/ \u4f9d\u7167 key \u7684\u6578\u5b57\u524d\u7db4\u6392\u5e8f\uff08\u5982 \"1-1\" \u2192 1, \"9-0\" \u2192 9, \"11-1\" \u2192 11\uff09\n parts.sort((a, b) => {\n const numA = parseInt(a.split('-')[0], 10);\n const numB = parseInt(b.split('-')[0], 10);\n return numA - numB;\n });\n return parts.join(',');\n }\n\n function updateBackground(colors) {\n if (!colors) return;\n const root = document.documentElement;\n root.style.setProperty('--bg-grad-1', colors[0]);\n root.style.setProperty('--bg-grad-2', colors[1]);\n root.style.setProperty('--bg-grad-3', colors[2]);\n root.style.setProperty('--bg-grad-4', colors[3]);\n root.style.setProperty('--bg-grad-5', colors[4]);\n }\n\n function checkTransitionAndLoad() {\n const data = quizData[currentIdx];\n updateBackground(data.bgColors);\n\n const showBack = (currentIdx > 0);\n dom.prevBtn.classList.toggle('hidden', !showBack);\n dom.mobileBackBtn.style.display = showBack ? 'inline-block' : 'none';\n\n if (data.transition) {\n const isMobile = window.innerWidth <= 900;\n if (data.id === 94) {\n \/\/ \ud83c\udf1f \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u5148\u986f\u793a Life Concern \u554f\u5377\n if (!hasPurchased && !lcCompleted) {\n showLifeConcern();\n return;\n }\n runFinalTransition(data);\n }\n else if (data.transition.type === 'major' || (data.transition.type === 'minor' && isMobile)) {\n runFullScreenTransition(data);\n } else {\n runDesktopMinorTransition(data);\n }\n } else {\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n }\n }\n\n \/\/ \ud83d\udd25 \u6700\u7d42\u611f\u8b1d\u9801\n function runFinalTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.add('active');\n dom.transitionLayer.classList.add('final-mode');\n\n dom.fireworksCanvas.style.display = 'none';\n dom.tapHint.style.display = 'none';\n dom.transitionLayer.style.cursor = 'default';\n\n \/\/ \u5275\u5efa\u6c23\u7403\u8207\u661f\u661f\n createBalloons();\n createFinalStars();\n\n \/\/ \ud83c\udf10 \u4f7f\u7528\u591a\u8a9e\u8a00\u7ffb\u8b6f\n const userId = sessionStorage.getItem('quiz_user_id');\n\n const htmlContent = `\n <div class=\"final-badge\">\n <img decoding=\"async\" src=\"https:\/\/maybeits.me\/wp-content\/uploads\/2025\/11\/LOGO-.png\" alt=\"Logo\">\n <\/div>\n <div class=\"final-title\">${t('congrats')}<\/div>\n <div class=\"final-subtitle\">${t('soulReport')}<\/div>\n\n <div class=\"final-card\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon thanks\">\ud83d\ude4f<\/div>\n <div class=\"final-card-title\">${t('thanks')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('thanksText')}\n <\/div>\n <\/div>\n\n ${!hasPurchased ? `\n <div style=\"text-align: center; margin: 10px 0 8px 0; padding: 12px 0;\">\n <button class=\"final-simple-btn\" onclick=\"goToSimpleReport()\">${t('freeReport')}<\/button>\n <\/div>\n ` : ''}\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon photo\">\ud83d\udcf8<\/div>\n <div class=\"final-card-title\">${t('nextStep')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('nextStepText')}\n <\/div>\n <\/div>\n\n <div class=\"final-card${!hasPurchased ? ' locked' : ''}\">\n <div class=\"final-card-header\">\n <div class=\"final-card-icon time\">\u23f0<\/div>\n <div class=\"final-card-title\">${t('reminder')}<\/div>\n <\/div>\n <div class=\"final-card-text\">\n ${t('reminderText')}\n <\/div>\n <\/div>\n\n <button class=\"final-back-btn\" onclick=\"goBackFromFinal()\">${t('goBack')}<\/button>\n `;\n dom.transText.innerHTML = htmlContent;\n\n setTimeout(() => { dom.transText.classList.add('fade-in'); }, 100);\n setTimeout(() => {\n dom.finalBtn.classList.add('show');\n\n \/\/ \ud83d\udd12 \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u4e3b\u6309\u9215\u7070\u8272\u7981\u7528 + \u5e95\u90e8\u986f\u793a\u4ed8\u8cbb\u63d0\u793a\n if (!hasPurchased) {\n dom.finalBtn.classList.add('disabled');\n \/\/ \u5728\u6309\u9215\u4e0b\u65b9\u63d2\u5165\u63d0\u793a\u6587\u5b57\n if (!document.getElementById('finalUnlockHint')) {\n const hint = document.createElement('div');\n hint.id = 'finalUnlockHint';\n hint.className = 'final-unlock-hint show';\n hint.textContent = t('paidHint');\n dom.finalBtn.parentNode.insertBefore(hint, dom.finalBtn.nextSibling);\n }\n }\n }, 1200);\n }\n\n \/\/ \ud83d\udd25 \u5275\u5efa\u591a\u7a2e\u9020\u578b\u6c23\u7403\n function createBalloons() {\n const container = dom.balloonContainer;\n container.innerHTML = '';\n container.style.display = 'block';\n\n const balloonTypes = ['round', 'heart', 'donut', 'star'];\n const balloonColors = ['color-pink', 'color-blue', 'color-peach', 'color-lavender', 'color-mint', 'color-cream', 'color-coral', 'color-gold'];\n const positions = [3, 10, 20, 32, 45, 58, 70, 82, 90, 95];\n\n for (let i = 0; i < 12; i++) {\n const balloon = document.createElement('div');\n const type = balloonTypes[i % balloonTypes.length];\n const color = balloonColors[i % balloonColors.length];\n\n balloon.className = `balloon-base balloon-${type} ${color}`;\n balloon.style.left = positions[i % positions.length] + '%';\n balloon.style.setProperty('--duration', (11 + Math.random() * 6) + 's');\n balloon.style.setProperty('--delay', (i * 0.7) + 's');\n\n \/\/ \u6839\u64da\u985e\u578b\u6dfb\u52a0\u5167\u90e8\u5143\u7d20\n if (type === 'round') {\n const shine = document.createElement('div');\n shine.className = 'shine';\n balloon.appendChild(shine);\n } else if (type === 'heart') {\n const string = document.createElement('div');\n string.className = 'string';\n balloon.appendChild(string);\n } else if (type === 'donut') {\n const sprinkles = document.createElement('div');\n sprinkles.className = 'sprinkles';\n balloon.appendChild(sprinkles);\n }\n\n container.appendChild(balloon);\n }\n }\n\n \/\/ \u2728 \u5275\u5efa\u9583\u720d\u661f\u661f\n function createFinalStars() {\n \/\/ \u79fb\u9664\u820a\u7684\u661f\u661f\u5bb9\u5668\n const oldStars = document.querySelector('.final-stars');\n if (oldStars) oldStars.remove();\n\n const container = document.createElement('div');\n container.className = 'final-stars';\n dom.transitionLayer.appendChild(container);\n\n for (let i = 0; i < 25; i++) {\n const star = document.createElement('div');\n star.className = 'final-star';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.animationDelay = Math.random() * 2 + 's';\n star.style.animationDuration = (1.5 + Math.random()) + 's';\n container.appendChild(star);\n }\n }\n\n function runFullScreenTransition(data) {\n isTransitioning = true;\n dom.transitionLayer.classList.remove('final-mode');\n dom.transitionLayer.classList.add('active');\n dom.balloonContainer.style.display = 'none';\n\n dom.fireworksCanvas.style.display = 'block';\n dom.transChapter.innerText = `CHAPTER: ${data.chapter}`;\n dom.tapHint.style.display = 'block';\n dom.transitionLayer.style.cursor = 'pointer';\n\n dom.transText.innerText = \"\";\n\n \/\/ \ud83d\udd25 \u8a2d\u7f6e\u8a72\u7ae0\u7bc0\u7684\u7159\u706b\u984f\u8272\n if (fireworkColors[data.id]) {\n currentFireworkHues = fireworkColors[data.id].hues;\n }\n\n if (data.transition.type === 'major') startFireworks();\n\n const duration = (data.transition.type === 'major') ? 15000 : 10000;\n\n typeWriterEffect(data.transition.text, dom.transText, duration, () => {\n stopFireworks();\n dom.transitionLayer.classList.remove('active');\n dom.questionArea.classList.remove('has-transition');\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n renderQuestion(data);\n });\n }\n\n function runDesktopMinorTransition(data) {\n dom.questionArea.classList.add('has-transition');\n dom.desktopMinorText.innerText = \"\";\n dom.desktopMinorText.classList.add('active');\n setTimeout(() => { dom.desktopMinorText.classList.add('show'); }, 10);\n typeWriterEffect(data.transition.text, dom.desktopMinorText, 0, null, 55);\n renderQuestion(data);\n }\n\n function typeWriterEffect(text, element, waitTime, callback, baseSpeed = 60) {\n let i = 0;\n \/\/ \ud83d\udd25 \u6839\u64da\u6587\u5b57\u9577\u5ea6\u52d5\u614b\u8abf\u6574\u901f\u5ea6\uff08\u6587\u5b57\u8d8a\u9577\u901f\u5ea6\u8d8a\u5feb\uff09\n \/\/ \u624b\u6a5f\u7248\u984d\u5916\u52a0\u901f\n const isMobile = window.innerWidth <= 900;\n const textLen = text.length;\n let speed = baseSpeed;\n\n if (textLen > 150) {\n speed = isMobile ? 15 : 25; \/\/ \u8d85\u9577\u6587\u5b57\uff1a\u6975\u5feb\n } else if (textLen > 100) {\n speed = isMobile ? 20 : 30; \/\/ \u9577\u6587\u5b57\uff1a\u5f88\u5feb\n } else if (textLen > 60) {\n speed = isMobile ? 30 : 40; \/\/ \u4e2d\u7b49\u6587\u5b57\uff1a\u8f03\u5feb\n } else {\n speed = isMobile ? 40 : baseSpeed; \/\/ \u77ed\u6587\u5b57\uff1a\u6b63\u5e38\u901f\u5ea6\n }\n\n function type() {\n if (!isTransitioning && waitTime > 0) return;\n if (i < text.length) {\n element.innerText += text.charAt(i);\n i++;\n typeTimer = setTimeout(type, speed);\n } else {\n if (waitTime > 0) {\n transitionTimer = setTimeout(() => { endTransition(callback); }, waitTime);\n } else if (callback) { callback(); }\n }\n }\n type();\n if (waitTime > 0) dom.transitionLayer.onclick = () => endTransition(callback);\n else dom.transitionLayer.onclick = null;\n }\n\n function endTransition(callback) {\n if (!isTransitioning) return;\n isTransitioning = false;\n clearTimeout(typeTimer); clearTimeout(transitionTimer);\n dom.transitionLayer.onclick = null;\n if (callback) callback();\n }\n\n function adjustTextSize(text) {\n const len = text.length;\n let size = '28px';\n if (window.innerWidth <= 900) {\n if (len > 35) size = '16px';\n else if (len > 25) size = '18px';\n else if (len > 15) size = '20px';\n else size = '22px';\n } else {\n if (len > 40) size = '20px';\n else if (len > 30) size = '24px';\n }\n dom.qTitle.style.fontSize = size;\n }\n\n function renderQuestion(data) {\n updateBackground(data.bgColors);\n\n \/\/ \ud83d\ude80 \u9810\u8f09\u5165\u63a5\u4e0b\u4f86 3 \u984c\u7684\u5716\u7247\n preloadUpcoming(currentIdx, 3);\n\n dom.box.classList.add('hidden');\n setTimeout(() => {\n dom.badge.innerText = data.chapter;\n const totalInChapter = data.chapterEnd - data.chapterStart + 1;\n const currentInChapter = data.id - data.chapterStart + 1;\n dom.counter.innerText = `${currentInChapter}\/${totalInChapter}`;\n const pct = Math.round((currentInChapter \/ totalInChapter) * 100);\n dom.progressBar.style.width = `${pct}%`;\n dom.qTitle.innerText = data.questionText;\n adjustTextSize(data.questionText);\n dom.imgA.src = getImgUrl(data.optionsA);\n dom.imgB.src = getImgUrl(data.optionsB);\n dom.textA.innerText = data.textA;\n dom.textB.innerText = data.textB;\n dom.box.classList.remove('hidden');\n }, 300);\n }\n\n function openEmbeddedPage(url) {\n const loader = document.getElementById('iframeLoader');\n \/\/ \u91cd\u7f6e\u72c0\u614b\n loader.classList.remove('hidden');\n dom.embeddedFrame.classList.remove('loaded');\n \/\/ \u986f\u793a overlay\n dom.iframeOverlay.classList.add('active');\n \/\/ \u76e3\u807d iframe \u8f09\u5165\u5b8c\u6210\n dom.embeddedFrame.onload = function () {\n \/\/ \u96b1\u85cf loading\uff0c\u986f\u793a iframe\n loader.classList.add('hidden');\n dom.embeddedFrame.classList.add('loaded');\n };\n \/\/ \u5ef6\u9072\u8a2d\u7f6e src \u78ba\u4fdd DOM \u5df2\u66f4\u65b0\n setTimeout(() => {\n dom.embeddedFrame.src = url;\n }, 100);\n }\n\n function closeEmbeddedPage() {\n const loader = document.getElementById('iframeLoader');\n dom.iframeOverlay.classList.remove('active');\n dom.embeddedFrame.classList.remove('loaded');\n loader.classList.remove('hidden');\n dom.embeddedFrame.src = 'about:blank';\n }\n\n window.selectOption = function (val) {\n if (isTransitioning) return;\n answers[`q${quizData[currentIdx].id}`] = val;\n saveProgress();\n \/\/ Q10 \u5b8c\u6210\uff1a\u5df2\u8cfc\u8cb7\u7528\u6236\u76f4\u63a5\u7e7c\u7e8c\uff0c\u672a\u8cfc\u8cb7\u7528\u6236\u986f\u793a\u5c0e\u8cfc\u9801\n if (quizData[currentIdx].id === 10 && !hasPurchased) {\n saveQuizDataForPaywall(); \/\/ \u5132\u5b58 Q1-Q10 \u7b54\u6848\u4f9b\u5c0e\u8cfc\u9801\u8a08\u7b97 J \u5206\u6578\n\n \/\/ \ud83c\udd95 POST webhook\uff1a\u901a\u77e5\u7b2c10\u984c\u5b8c\u6210\uff08\u4e0d\u7b49\u5f85\u56de\u61c9\uff09\n const first10Answers = JSON.parse(sessionStorage.getItem('quiz_answers_10') || '[]');\n const first10Indicators = JSON.parse(sessionStorage.getItem('quiz_indicators_10') || '[]');\n\n \/\/ \u8a08\u7b97 J \u5206\u6578\uff08\u79e9\u5e8f\u5206\uff09\n let jScore = 0;\n for (let i = 0; i < 10; i++) {\n const indicator = first10Indicators[i]; \/\/ \"J=A\" \u6216 \"J=B\"\n const answer = first10Answers[i]; \/\/ \"A\" \u6216 \"B\"\n if (indicator && answer && answer === indicator.split('=')[1]) {\n jScore++;\n }\n }\n\n \/\/ J \u5206\u6578 \u2192 \u985e\u578b\n let jType = '';\n if (jScore >= 9) jType = '\u6975\u81f4\u79e9\u5e8f';\n else if (jScore >= 7) jType = '\u9bae\u660e\u79e9\u5e8f';\n else if (jScore >= 4) jType = '\u5e73\u8861';\n else if (jScore >= 2) jType = '\u9bae\u660e\u81ea\u7531';\n else jType = '\u6975\u81f4\u81ea\u7531';\n\n fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: sessionStorage.getItem('quiz_user_id'),\n answers: first10Answers,\n jScore: jScore,\n jType: jType,\n lang: currentLang || '',\n area: userArea || ''\n })\n }).catch(err => console.error('Q10 webhook error:', err));\n\n \/\/ \u50b3\u905e\u7236\u9801\u9762\u7684 country\/test \u548c lang \u53c3\u6578\u7d66\u5c0e\u8cfc\u9801\n const urlParams = new URLSearchParams(window.location.search);\n const country = urlParams.get('country') || urlParams.get('test');\n let paywallUrl = \"https:\/\/maybeits.me\/mbit-buy\";\n const params = new URLSearchParams();\n if (country) params.set('country', country);\n if (currentLang) params.set('lang', currentLang);\n if (params.toString()) {\n paywallUrl += '?' + params.toString();\n }\n openEmbeddedPage(paywallUrl);\n return;\n }\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n } else {\n \/\/ \ud83c\udf89 Q93 \u5b8c\u6210\uff01\u7522\u751f\u7b54\u6848\u5b57\u4e32\n const answerString = generateAnswerString();\n console.log('\ud83d\udce6 93\u984c\u5168\u90e8\u5b8c\u6210\uff01\u7b54\u6848\u5b57\u4e32:', answerString);\n \/\/ TODO: POST \u5230 n8n\n }\n };\n\n window.prevQuestion = function () {\n if (currentIdx > 0) {\n currentIdx--;\n saveProgress();\n dom.questionArea.classList.remove('has-transition');\n renderQuestion(quizData[currentIdx]);\n if (!quizData[currentIdx].transition) {\n dom.desktopMinorText.classList.remove('show');\n dom.desktopMinorText.classList.remove('active');\n }\n }\n };\n\n window.goToFinalStep = async function () {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._finalStepSubmitting) return;\n window._finalStepSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._finalStepSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u6309\u9215\u8996\u89ba\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = 'none';\n dom.finalBtn.style.opacity = '0.5';\n }\n\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 2. \u8a2d\u7f6e 15 \u79d2\u8d85\u6642\u6a5f\u5236\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n \/\/ 3. \u767c\u9001 webhook \u4e26\u7b49\u5f85\u56de\u61c9\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/379dc121-5a66-4694-8452-5802a7d8d95b', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n \/\/ 4. \u6aa2\u67e5\u56de\u61c9\u72c0\u614b\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 5. \u6210\u529f\u5f8c\u8df3\u8f49\u9801\u9762\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n console.log('\u8df3\u8f49\u8a9e\u8a00\u8def\u5f91:', langPath, '(\u5730\u5340:', userArea, ')');\n window.location.href = `https:\/\/maybeits.me${langPath}\/photo-editor\/?id=${userId}`;\n\n } catch (error) {\n \/\/ 6. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._finalStepSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (dom.finalBtn) {\n dom.finalBtn.style.pointerEvents = '';\n dom.finalBtn.style.opacity = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n \/\/ \u986f\u793a\u932f\u8aa4\u756b\u9762\uff08\u4f7f\u7528\u73fe\u6709\u7684\u932f\u8aa4 UI \u7d44\u4ef6\uff09\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToFinalStep()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83c\udd93 \u9818\u53d6\u7c21\u6613\u7248\u5831\u544a\uff08\u514d\u8cbb\u7528\u6236\uff09\n window.goToSimpleReport = async function () {\n \/\/ \u2705 \u9632\u91cd\u8907\u9ede\u64ca\n if (window._simpleReportSubmitting) return;\n window._simpleReportSubmitting = true;\n\n const userId = sessionStorage.getItem('quiz_user_id');\n if (!userId) {\n window._simpleReportSubmitting = false;\n alert('\u627e\u4e0d\u5230\u6e2c\u9a57\u4ee3\u78bc\uff0c\u8acb\u91cd\u65b0\u958b\u59cb\u6e2c\u9a57');\n return;\n }\n\n \/\/ 1. \u986f\u793a loading \u756b\u9762\n const loadingElement = document.getElementById('loadingScreen');\n const loadingText = document.querySelector('.loading-text');\n loadingElement.classList.remove('hidden');\n loadingText.textContent = '\u6b63\u5728\u5132\u5b58\u4f60\u7684\u7b54\u6848...';\n\n \/\/ \u2705 \u540c\u6642\u7981\u7528\u514d\u8cbb\u5831\u544a\u6309\u9215\uff08\u9632\u6b62 loading \u904e\u6e21\u671f\u9593\u88ab\u518d\u6b21\u9ede\u64ca\uff09\n const simpleBtn = document.querySelector('.final-simple-btn');\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = 'none';\n simpleBtn.style.opacity = '0.5';\n simpleBtn.style.animation = 'none';\n }\n\n \/\/ 2. \u7d44\u6210\u7b54\u6848\u5b57\u4e32\n const answersStr = generateAnswerString();\n\n try {\n \/\/ 3. POST webhook\uff0815 \u79d2\u8d85\u6642\uff09\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 15000);\n\n const response = await fetch('https:\/\/app.notpro.cc\/webhook\/567d8cc1-df7e-494e-9e29-03b2a75c7590', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({\n id: userId,\n answers: answersStr,\n lc_topic: lcSelected.topicKey || '',\n lc_topic_name: lcSelected.topicName || '',\n lc_role: lcSelected.role || '',\n lc_concern: lcSelected.concern || ''\n }),\n signal: controller.signal\n });\n\n clearTimeout(timeoutId);\n\n if (!response.ok) {\n throw new Error(`Webhook \u56de\u61c9\u932f\u8aa4: ${response.status}`);\n }\n\n console.log('\u2705 \u7c21\u6613\u7248\u5831\u544a Webhook \u767c\u9001\u6210\u529f:', response.status);\n\n \/\/ 4. \u6210\u529f\u5f8c\u8df3\u8f49\u5230\u514d\u8cbb\u6e2c\u9a57\u7d50\u679c\u9801\uff08\u4e0d\u89e3\u9396\uff0c\u56e0\u70ba\u5373\u5c07\u96e2\u958b\u9801\u9762\uff09\n loadingElement.classList.add('hidden');\n const langPath = getLangPathByArea(userArea);\n window.location.href = `https:\/\/maybeits.me${langPath}\/mbti-express\/?id=${encodeURIComponent(userId)}`;\n\n } catch (error) {\n \/\/ 5. \u932f\u8aa4\u8655\u7406\uff1a\u89e3\u9396\uff0c\u5141\u8a31\u91cd\u8a66\n window._simpleReportSubmitting = false;\n loadingElement.classList.add('hidden');\n\n \/\/ \u2705 \u6062\u5fa9\u6309\u9215\u72c0\u614b\n if (simpleBtn) {\n simpleBtn.style.pointerEvents = '';\n simpleBtn.style.opacity = '';\n simpleBtn.style.animation = '';\n }\n\n let errorMessage = '\u7121\u6cd5\u5132\u5b58\u4f60\u7684\u7b54\u6848\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n if (error.name === 'AbortError') {\n console.error('\u23f1\ufe0f Webhook \u8acb\u6c42\u8d85\u6642\uff0815\u79d2\uff09');\n errorMessage = '\u5132\u5b58\u7b54\u6848\u903e\u6642\uff0c\u8acb\u6aa2\u67e5\u7db2\u8def\u9023\u7dda\u5f8c\u91cd\u8a66\u3002';\n } else {\n console.error('\u274c Webhook \u767c\u9001\u5931\u6557:', error.message);\n }\n\n document.getElementById('errorTitle').textContent = '\u26a0\ufe0f \u5132\u5b58\u5931\u6557';\n document.getElementById('errorMessage').innerHTML = `\n ${errorMessage}<br><br>\n <button onclick=\"goToSimpleReport()\" style=\"\n padding: 12px 30px;\n background: linear-gradient(135deg, #5D4E37 0%, #8B7355 50%, #A08060 100%);\n color: white;\n border: none;\n border-radius: 50px;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(93, 78, 55, 0.3);\n \">\u91cd\u8a66<\/button>\n `;\n document.getElementById('errorScreen').classList.add('active');\n }\n };\n\n \/\/ \ud83d\udd19 \u5f9e Final \u9801\u8fd4\u56de\u4e0a\u4e00\u984c\n window.goBackFromFinal = function () {\n \/\/ \u2705 \u91cd\u7f6e\u63d0\u4ea4\u9396\uff08\u56de\u5230\u984c\u76ee\u5f8c\u5141\u8a31\u91cd\u65b0\u63d0\u4ea4\uff09\n window._finalStepSubmitting = false;\n window._simpleReportSubmitting = false;\n\n \/\/ \u95dc\u9589\u8f49\u5834\u5c64\n isTransitioning = false;\n dom.transitionLayer.classList.remove('active');\n dom.transitionLayer.classList.remove('final-mode');\n dom.finalBtn.classList.remove('show');\n dom.transText.classList.remove('fade-in');\n dom.transText.innerHTML = '';\n\n \/\/ \u96b1\u85cf\u6c23\u7403\n dom.balloonContainer.style.display = 'none';\n dom.balloonContainer.innerHTML = '';\n\n \/\/ \u79fb\u9664\u661f\u661f\n const stars = document.querySelector('.final-stars');\n if (stars) stars.remove();\n\n \/\/ \ud83c\udf1f \u672a\u8cfc\u8cb7\u7528\u6236\uff1a\u8fd4\u56de Life Concern \u554f\u5377 Step 3\uff08\u4fdd\u7559\u4e4b\u524d\u9078\u64c7\uff09\n if (!hasPurchased) {\n lcCompleted = false;\n clearLcProgress();\n \/\/ \u6e05\u9664\u56f0\u64fe\u9078\u64c7\uff0c\u4f46\u4fdd\u7559\u4e3b\u984c\u548c\u89d2\u8272\n lcSelected.concern = null;\n showLifeConcernAtStep(3);\n return;\n }\n\n \/\/ \u56de\u5230\u6700\u5f8c\u4e00\u984c\uff08Q93\uff0cindex = 92\uff09\n currentIdx = quizData.length - 2; \/\/ Q93 \u7684 index \u662f 92\uff0c\u4e0d\u662f 93\uff08\u90a3\u662f final\uff09\n renderQuestion(quizData[currentIdx]);\n };\n\n \/\/ \ud83c\udd93 \u60c5\u5883 C\uff1a\u76e3\u807d\u5c0e\u8cfc\u9801 iframe \u7684 postMessage\uff08\u514d\u8cbb\u7e7c\u7e8c\u6e2c\u9a57\uff09\n window.addEventListener('message', function (event) {\n if (event.data && event.data.type === 'freeContinue') {\n console.log('\ud83c\udd93 \u6536\u5230\u514d\u8cbb\u7e7c\u7e8c\u8a0a\u865f\uff0c\u9032\u5165\u7b2c 11 \u984c');\n closeEmbeddedPage();\n currentIdx++;\n saveProgress();\n if (currentIdx < quizData.length) {\n checkTransitionAndLoad();\n }\n }\n });\n\n \/\/ \ud83d\udd25 \u5730\u7403\u6309\u9215\u9ede\u64ca - \u53ef\u81ea\u8a02\u7ffb\u8b6f\u529f\u80fd\n window.onGlobeClick = function () {\n \/\/ \u5728\u9019\u88e1\u6dfb\u52a0\u4f60\u7684\u7ffb\u8b6f\u5916\u639b\u89f8\u767c\u4ee3\u78bc\n console.log('Globe clicked - add your translation plugin here');\n \/\/ \u793a\u4f8b\uff1a\u53ef\u4ee5\u6253\u958b\u7ffb\u8b6f\u9762\u677f\u6216\u89f8\u767c\u7ffb\u8b6f\u5916\u639b\n };\n\n \/* =========================================\n \ud83c\udf1f Life Concern \u554f\u5377\u908f\u8f2f\n ========================================= *\/\n const LC_DATA = {\n topics: [\n { key: 'love', name: '\u611f\u60c5\u95dc\u4fc2', icon: '\ud83d\udc95' },\n { key: 'career', name: '\u8077\u6daf\u767c\u5c55', icon: '\ud83d\udcbc' },\n { key: 'family', name: '\u5bb6\u5ead\u95dc\u4fc2', icon: '\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67' },\n { key: 'social', name: '\u793e\u4ea4\u4eba\u969b', icon: '\ud83d\udc65' },\n { key: 'money', name: '\u91d1\u9322\u7406\u8ca1', icon: '\ud83d\udcb0' },\n { key: 'study', name: '\u5b78\u696d\u5347\u5b78', icon: '\ud83d\udcda' }\n ],\n roles: {\n love: ['\u55ae\u8eab', '\u66d6\u6627\u4e2d', '\u4ea4\u5f80\u4e2d', '\u540c\u5c45\u4e2d', '\u5df2\u5a5a', '\u525b\u5206\u624b\/\u96e2\u5a5a'],\n career: ['\u793e\u6703\u65b0\u9bae\u4eba', '\u4e0a\u73ed\u65cf', '\u4e3b\u7ba1\/\u7ba1\u7406\u5c64', '\u81ea\u7531\u5de5\u4f5c\u8005\/\u5275\u696d', '\u5f85\u696d\u4e2d', '\u60f3\u8f49\u8077'],\n family: ['\u5152\u5b50\/\u5973\u5152', '\u7238\u7238\/\u5abd\u5abd', '\u4e08\u592b\/\u59bb\u5b50', '\u5ab3\u5a66\/\u5973\u5a7f', '\u624b\u8db3\uff08\u5144\u5f1f\u59d0\u59b9\uff09'],\n social: ['\u5b78\u751f', '\u525b\u9032\u793e\u6703', '\u4e0a\u73ed\u65cf', '\u5168\u8077\u7238\u5abd', '\u5230\u4e86\u65b0\u74b0\u5883', '\u81ea\u7531\u5de5\u4f5c\u8005'],\n money: ['\u5b78\u751f\uff08\u9760\u5bb6\u88e1\/\u6253\u5de5\uff09', '\u5c0f\u8cc7\u4e0a\u73ed\u65cf', '\u5bb6\u5ead\u7d93\u6fdf\u652f\u67f1', '\u96d9\u85aa\u5bb6\u5ead', '\u5275\u696d\u8005\/\u81ea\u71df', '\u8ca0\u50b5\u4e2d'],\n study: ['\u9ad8\u4e2d\u751f', '\u5927\u5b78\u751f', '\u7814\u7a76\u751f', '\u6e96\u5099\u8003\u8a66\/\u8b49\u7167', '\u5728\u8077\u9032\u4fee', '\u525b\u7562\u696d']\n },\n \/\/ \u89d2\u8272 \u2192 \u7fa4\u7d44\u5c0d\u7167\n roleGroups: {\n love: { '\u55ae\u8eab':'A', '\u66d6\u6627\u4e2d':'B', '\u4ea4\u5f80\u4e2d':'C', '\u540c\u5c45\u4e2d':'C', '\u5df2\u5a5a':'C', '\u525b\u5206\u624b\/\u96e2\u5a5a':'A' },\n career: { '\u793e\u6703\u65b0\u9bae\u4eba':'A', '\u4e0a\u73ed\u65cf':'B', '\u4e3b\u7ba1\/\u7ba1\u7406\u5c64':'B', '\u81ea\u7531\u5de5\u4f5c\u8005\/\u5275\u696d':'C', '\u5f85\u696d\u4e2d':'A', '\u60f3\u8f49\u8077':'C' },\n family: { '\u5152\u5b50\/\u5973\u5152':'A', '\u7238\u7238\/\u5abd\u5abd':'B', '\u4e08\u592b\/\u59bb\u5b50':'C', '\u5ab3\u5a66\/\u5973\u5a7f':'C', '\u624b\u8db3\uff08\u5144\u5f1f\u59d0\u59b9\uff09':'C' },\n social: { '\u5b78\u751f':'A', '\u525b\u9032\u793e\u6703':'A', '\u4e0a\u73ed\u65cf':'B', '\u5168\u8077\u7238\u5abd':'B', '\u5230\u4e86\u65b0\u74b0\u5883':'A', '\u81ea\u7531\u5de5\u4f5c\u8005':'B' },\n money: { '\u5b78\u751f\uff08\u9760\u5bb6\u88e1\/\u6253\u5de5\uff09':'A', '\u5c0f\u8cc7\u4e0a\u73ed\u65cf':'B', '\u5bb6\u5ead\u7d93\u6fdf\u652f\u67f1':'C', '\u96d9\u85aa\u5bb6\u5ead':'B', '\u5275\u696d\u8005\/\u81ea\u71df':'C', '\u8ca0\u50b5\u4e2d':'C' },\n study: { '\u9ad8\u4e2d\u751f':'A', '\u5927\u5b78\u751f':'B', '\u7814\u7a76\u751f':'B', '\u6e96\u5099\u8003\u8a66\/\u8b49\u7167':'C', '\u5728\u8077\u9032\u4fee':'C', '\u525b\u7562\u696d':'C' }\n },\n skipOption: '\u4e0d\u65b9\u4fbf\u8aaa\uff0c\u4f46\u60f3\u770b\u770b\u5831\u544a\u600e\u9ebc\u89e3\u8b80\u6211',\n concerns: {\n love_A: [\n '\u60f3\u812b\u55ae\uff0c\u4f46\u7e3d\u662f\u9047\u4e0d\u5230\u5c0d\u7684\u4eba',\n '\u4e0d\u77e5\u9053\u81ea\u5df1\u5230\u5e95\u60f3\u8981\u4ec0\u9ebc\u6a23\u7684\u5c0d\u8c61',\n '\u7e3d\u662f\u88ab\u767c\u597d\u4eba\u5361\uff0c\u4e0d\u77e5\u9053\u54ea\u88e1\u51fa\u554f\u984c',\n '\u5bb3\u6015\u518d\u6b21\u53d7\u50b7\uff0c\u4e0d\u6562\u8e0f\u51fa\u4e0b\u4e00\u6b65',\n '\u8eab\u908a\u7684\u4eba\u90fd\u6709\u5c0d\u8c61\uff0c\u53ea\u5269\u6211\u4e00\u500b\u4eba',\n '\u5206\u624b\u4e86\u9084\u662f\u653e\u4e0d\u4e0b\uff0c\u8d70\u4e0d\u51fa\u4f86',\n '\u7e3d\u662f\u611b\u4e0a\u4e0d\u8a72\u611b\u7684\u4eba\uff0c\u4e0d\u65b7\u91cd\u8e48\u8986\u8f4d',\n '\u89ba\u5f97\u81ea\u5df1\u4e0d\u5920\u597d\uff0c\u4e0d\u914d\u64c1\u6709\u611b\u60c5',\n '\u4ea4\u53cb\u5708\u592a\u5c0f\uff0c\u8a8d\u8b58\u4e0d\u5230\u65b0\u7684\u4eba',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5f9e\u670b\u53cb\u8b8a\u6210\u6200\u4eba'\n ],\n love_B: [\n '\u4e0d\u78ba\u5b9a\u5c0d\u65b9\u5c0d\u6211\u662f\u4e0d\u662f\u8a8d\u771f\u7684',\n '\u4e0d\u77e5\u9053\u8a72\u4e0d\u8a72\u4e3b\u52d5\u8868\u767d',\n '\u5c0d\u65b9\u5ffd\u51b7\u5ffd\u71b1\uff0c\u641e\u4e0d\u6e05\u695a\u5728\u60f3\u4ec0\u9ebc',\n '\u66d6\u6627\u592a\u4e45\u4e86\uff0c\u4e0d\u77e5\u9053\u600e\u9ebc\u63a8\u9032\u95dc\u4fc2',\n '\u6015\u8868\u767d\u88ab\u62d2\u7d55\uff0c\u9023\u670b\u53cb\u90fd\u505a\u4e0d\u6210',\n '\u8eab\u908a\u6709\u7af6\u722d\u5c0d\u624b\uff0c\u5f88\u6709\u58d3\u529b',\n '\u4e0d\u78ba\u5b9a\u81ea\u5df1\u662f\u771f\u7684\u559c\u6b61\u9084\u662f\u53ea\u662f\u5bc2\u5bde',\n '\u5c0d\u65b9\u7684\u751f\u6d3b\u5708\u8b93\u6211\u5f88\u6c92\u5b89\u5168\u611f',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5224\u65b7\u5c0d\u65b9\u7684\u5fc3\u610f',\n '\u5169\u500b\u4eba\u7684\u689d\u4ef6\u5dee\u8ddd\u8b93\u6211\u5f88\u7336\u8c6b'\n ],\n love_C: [\n '\u6e9d\u901a\u8d8a\u4f86\u8d8a\u5c11\uff0c\u611f\u89ba\u5728\u6f38\u884c\u6f38\u9060',\n '\u5c0d\u65b9\u592a\u51b7\u6de1\uff0c\u4e0d\u77e5\u9053\u600e\u9ebc\u8b93\u95dc\u4fc2\u5347\u6eab',\n '\u7e3d\u662f\u70ba\u4e86\u5c0f\u4e8b\u5435\u67b6\uff0c\u5f88\u6d88\u8017',\n '\u4e0d\u78ba\u5b9a\u9019\u6bb5\u95dc\u4fc2\u8a72\u4e0d\u8a72\u7e7c\u7e8c',\n '\u5c0d\u65b9\u8eab\u908a\u7684\u7570\u6027\u8b93\u6211\u5f88\u4e0d\u5b89',\n '\u611f\u60c5\u7a69\u5b9a\uff0c\u4f46\u597d\u50cf\u5c11\u4e86\u5fc3\u52d5\u7684\u611f\u89ba',\n '\u5f7c\u6b64\u7684\u751f\u6d3b\u7fd2\u6163\u5dee\u592a\u591a\uff0c\u78e8\u5408\u597d\u7d2f',\n '\u5c0d\u672a\u4f86\u7684\u898f\u5283\u4e0d\u4e00\u81f4\uff0c\u5f88\u7126\u616e',\n '\u89ba\u5f97\u81ea\u5df1\u4e00\u76f4\u5728\u4ed8\u51fa\uff0c\u5c0d\u65b9\u537b\u4e0d\u73cd\u60dc',\n '\u5bb6\u4eba\u4e0d\u8a8d\u540c\u9019\u6bb5\u95dc\u4fc2\uff0c\u593e\u5728\u4e2d\u9593\u5f88\u70ba\u96e3'\n ],\n career_A: [\n '\u4e0d\u77e5\u9053\u81ea\u5df1\u5230\u5e95\u9069\u5408\u505a\u4ec0\u9ebc',\n '\u9762\u8a66\u7e3d\u662f\u78b0\u58c1\uff0c\u5c0d\u81ea\u5df1\u8d8a\u4f86\u8d8a\u6c92\u4fe1\u5fc3',\n '\u6295\u4e86\u5f88\u591a\u5c65\u6b77\u90fd\u6c92\u6709\u56de\u97f3',\n '\u85aa\u6c34\u592a\u4f4e\uff0c\u89ba\u5f97\u88ab\u4f4e\u4f30\u4e86',\n '\u5b78\u6821\u5b78\u7684\u8ddf\u8077\u5834\u8981\u7684\u5b8c\u5168\u4e0d\u4e00\u6a23',\n '\u4e0d\u77e5\u9053\u8a72\u5148\u6c42\u7a69\u5b9a\u9084\u662f\u8ffd\u5922\u60f3',\n '\u8eab\u908a\u7684\u4eba\u90fd\u627e\u5230\u5de5\u4f5c\u4e86\uff0c\u5c31\u6211\u9084\u5728\u6f02',\n '\u5c0d\u81ea\u5df1\u7684\u80fd\u529b\u5f88\u6c92\u4fe1\u5fc3',\n '\u4e0d\u77e5\u9053\u8a72\u600e\u9ebc\u5beb\u597d\u5c65\u6b77\u548c\u6e96\u5099\u9762\u8a66',\n '\u5bb6\u4eba\u4e00\u76f4\u50ac\uff0c\u58d3\u529b\u5f88\u5927'\n ],\n career_B: [\n '\u5de5\u4f5c\u7a69\u5b9a\u4f46\u6beb\u7121\u6210\u5c31\u611f\uff0c\u6bcf\u5929\u50cf\u5728\u6df7\u65e5\u5b50',\n '\u4ed8\u51fa\u5f88\u591a\u4f46\u5347\u9077\u52a0\u85aa\u8f2a\u4e0d\u5230\u6211',\n '\u4e3b\u7ba1\u6216\u540c\u4e8b\u5f88\u96e3\u641e\uff0c\u8077\u5834\u95dc\u4fc2\u8b93\u6211\u5fc3\u7d2f',\n '\u5de5\u4f5c\u91cf\u592a\u5927\uff0c\u5feb\u8981\u6490\u4e0d\u4f4f\u4e86',\n '\u5de5\u4f5c\u548c\u751f\u6d3b\u5b8c\u5168\u5931\u8861\uff0c\u6c92\u6709\u81ea\u5df1\u7684\u6642\u9593',\n '\u89ba\u5f97\u81ea\u5df1\u7684\u80fd\u529b\u8ddf\u4e0d\u4e0a\uff0c\u5f88\u7126\u616e',\n '\u5718\u968a\u5f88\u96e3\u5e36\uff0c\u6e9d\u901a\u6210\u672c\u592a\u9ad8',\n '\u505a\u7684\u4e8b\u60c5\u6c92\u6709\u610f\u7fa9\u611f\uff0c\u6bcf\u5929\u5728\u6d88\u8017\u71b1\u60c5',\n '\u60f3\u8f49\u8077\u4f46\u6015\u9078\u932f\uff0c\u4e0d\u6562\u8de8\u51fa\u53bb',\n '\u8fa6\u516c\u5ba4\u653f\u6cbb\u8b93\u6211\u5fc3\u5f88\u7d2f'\n ],\n career_C: [\n '\u60f3\u5275\u696d\u6216\u505a\u526f\u696d\uff0c\u4f46\u4e0d\u77e5\u9053\u600e\u9ebc\u958b\u59cb',\n '\u6848\u5b50\u6709\u4e00\u642d\u6c92\u4e00\u642d\uff0c\u6536\u5165\u5f88\u4e0d\u7a69\u5b9a',\n '\u4e00\u500b\u4eba\u625b\u6240\u6709\u4e8b\u60c5\uff0c\u5f88\u5b64\u7368',\n '\u4e0d\u77e5\u9053\u81ea\u5df1\u7684\u65b9\u5411\u5c0d\u4e0d\u5c0d',\n '\u60f3\u8f49\u8077\u4f46\u6015\u9078\u932f\u884c\u696d\uff0c\u4ee3\u50f9\u592a\u5927',\n '\u7f3a\u4e4f\u4eba\u8108\u548c\u8cc7\u6e90\uff0c\u4e0d\u77e5\u9053\u53bb\u54ea\u627e',\n '\u5ba2\u6236\u6216\u6848\u6e90\u5f88\u4e0d\u7a69\u5b9a',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5b9a\u50f9\uff0c\u7e3d\u89ba\u5f97\u81ea\u5df1\u8981\u7684\u592a\u5c11',\n '\u8eab\u908a\u7684\u4eba\u4e0d\u7406\u89e3\u6211\u70ba\u4ec0\u9ebc\u8981\u5192\u96aa',\n '\u6642\u9593\u7ba1\u7406\u4e00\u5718\u4e82\uff0c\u6548\u7387\u5f88\u4f4e'\n ],\n family_A: [\n '\u7238\u5abd\u7ba1\u592a\u591a\uff0c\u4ec0\u9ebc\u90fd\u8981\u63d2\u624b',\n '\u7236\u6bcd\u7e3d\u662f\u62ff\u6211\u8ddf\u5225\u4eba\u6bd4\u8f03',\n '\u5bb6\u4eba\u7684\u671f\u5f85\u548c\u6211\u60f3\u8981\u7684\u5b8c\u5168\u4e0d\u540c',\n '\u7236\u6bcd\u504f\u5fc3\uff0c\u8b93\u6211\u89ba\u5f97\u4e0d\u88ab\u91cd\u8996',\n '\u548c\u5bb6\u4eba\u7684\u6e9d\u901a\u7e3d\u662f\u8b8a\u6210\u5435\u67b6',\n '\u50ac\u5a5a\u50ac\u751f\u7684\u58d3\u529b\u8b93\u6211\u5598\u4e0d\u904e\u6c23',\n '\u539f\u751f\u5bb6\u5ead\u7684\u9670\u5f71\u4e00\u76f4\u5f71\u97ff\u8457\u6211',\n '\u60f3\u4fdd\u6301\u8ddd\u96e2\u53c8\u6015\u88ab\u8aaa\u4e0d\u5b5d\uff0c\u5f88\u77db\u76fe',\n '\u7236\u6bcd\u5c0d\u6211\u7684\u4eba\u751f\u9078\u64c7\u4e0d\u8a8d\u540c',\n '\u89ba\u5f97\u4e0d\u7ba1\u600e\u9ebc\u505a\u90fd\u9054\u4e0d\u5230\u7238\u5abd\u7684\u6a19\u6e96'\n ],\n family_B: [\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u8ddf\u53db\u9006\u671f\u7684\u5b69\u5b50\u76f8\u8655',\n '\u5b69\u5b50\u8d8a\u5927\u8d8a\u4e0d\u8ddf\u6211\u8aaa\u5fc3\u4e8b',\n '\u64d4\u5fc3\u5b69\u5b50\u7684\u672a\u4f86\uff0c\u4f46\u53c8\u6015\u7ba1\u592a\u591a',\n '\u8ddf\u53e6\u4e00\u534a\u7684\u6559\u990a\u89c0\u5ff5\u4e0d\u540c\uff0c\u5e38\u8d77\u885d\u7a81',\n '\u70ba\u4e86\u5b69\u5b50\u72a7\u7272\u592a\u591a\u81ea\u5df1\uff0c\u89ba\u5f97\u5f88\u59d4\u5c48',\n '\u5b69\u5b50\u6c89\u8ff7 3C\uff0c\u600e\u9ebc\u8aaa\u90fd\u4e0d\u807d',\n '\u5728\u5de5\u4f5c\u548c\u966a\u4f34\u5b69\u5b50\u4e4b\u9593\u62c9\u626f\uff0c\u5f88\u5167\u759a',\n '\u89ba\u5f97\u81ea\u5df1\u4e0d\u662f\u4e00\u500b\u597d\u7238\u7238\/\u597d\u5abd\u5abd',\n '\u5b69\u5b50\u7684\u5b78\u696d\u58d3\u529b\u8b93\u5168\u5bb6\u90fd\u5f88\u7dca\u7e43',\n '\u9577\u8f29\u4e00\u76f4\u5e72\u6d89\u6211\u600e\u9ebc\u6559\u5b69\u5b50'\n ],\n family_C: [\n '\u5a46\u5ab3\/\u7fc1\u5a7f\u95dc\u4fc2\u8655\u4e0d\u597d\uff0c\u593e\u5728\u4e2d\u9593\u5f88\u75db\u82e6',\n '\u53e6\u4e00\u534a\u6c38\u9060\u7ad9\u5728\u4ed6\u5bb6\u4eba\u90a3\u908a',\n '\u5144\u5f1f\u59d0\u59b9\u4e4b\u9593\u5206\u914d\u4e0d\u516c\u5e73',\n '\u904e\u5e74\u904e\u7bc0\u56de\u8ab0\u5bb6\u7684\u554f\u984c\u8b93\u6211\u5f88\u7169',\n '\u88ab\u8981\u6c42\u8981\u5b5d\u9806\uff0c\u4f46\u5c0d\u65b9\u5bb6\u4eba\u5f88\u96e3\u76f8\u8655',\n '\u5bb6\u65cf\u805a\u6703\u7e3d\u662f\u5145\u6eff\u6bd4\u8f03\u548c\u9592\u8a71',\n '\u9577\u8f29\u5e72\u6d89\u6211\u5011\u7684\u751f\u6d3b\u6c7a\u5b9a',\n '\u89ba\u5f97\u81ea\u5df1\u5728\u9019\u500b\u5bb6\u88e1\u662f\u5916\u4eba',\n '\u624b\u8db3\u4e4b\u9593\u611f\u60c5\u8b8a\u6de1\uff0c\u8d8a\u4f86\u8d8a\u758f\u9060',\n '\u5bb6\u88e1\u7684\u7d93\u6fdf\u5206\u64d4\u8b93\u4eba\u89ba\u5f97\u4e0d\u516c\u5e73'\n ],\n social_A: [\n '\u5f88\u96e3\u4ea4\u5230\u771f\u6b63\u804a\u5f97\u4f86\u7684\u670b\u53cb',\n '\u793e\u4ea4\u5834\u5408\u4e0d\u77e5\u9053\u804a\u4ec0\u9ebc\uff0c\u5bb9\u6613\u5c37\u5c2c\u51b7\u5834',\n '\u5728\u5718\u9ad4\u88e1\u7e3d\u662f\u900f\u660e\u4eba\uff0c\u6c92\u6709\u5b58\u5728\u611f',\n '\u5230\u4e86\u65b0\u74b0\u5883\u4e0d\u77e5\u9053\u600e\u9ebc\u878d\u5165',\n '\u89ba\u5f97\u5927\u5bb6\u90fd\u6709\u81ea\u5df1\u7684\u5c0f\u5708\u5b50\uff0c\u63d2\u4e0d\u9032\u53bb',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u7dad\u6301\u525b\u8a8d\u8b58\u7684\u53cb\u8abc',\n '\u5bb3\u6015\u88ab\u6392\u64e0\u6216\u88ab\u8a0e\u53ad',\n '\u89ba\u5f97\u81ea\u5df1\u500b\u6027\u592a\u5167\u5411\uff0c\u4ea4\u4e0d\u5230\u670b\u53cb',\n '\u7dda\u4e0a\u804a\u5929\u5f88\u5bb9\u6613\uff0c\u4f46\u898b\u9762\u5c31\u4e0d\u77e5\u9053\u8aaa\u4ec0\u9ebc',\n '\u8eab\u908a\u7684\u4eba\u90fd\u6709\u95a8\u871c\/\u5144\u5f1f\uff0c\u5c31\u6211\u6c92\u6709'\n ],\n social_B: [\n '\u670b\u53cb\u8d8a\u4f86\u8d8a\u5c11\uff0c\u611f\u89ba\u88ab\u4e16\u754c\u907a\u5fd8\u4e86',\n '\u7e3d\u662f\u7576\u90a3\u500b\u4ed8\u51fa\u6bd4\u8f03\u591a\u7684\u4eba\uff0c\u89ba\u5f97\u4e0d\u516c\u5e73',\n '\u4e0d\u61c2\u5f97\u62d2\u7d55\uff0c\u7d50\u679c\u81ea\u5df1\u7d2f\u5230\u4e0d\u884c',\n '\u89ba\u5f97\u8eab\u908a\u7684\u4eba\u90fd\u662f\u8868\u9762\u670b\u53cb',\n '\u88ab\u670b\u53cb\u80cc\u53db\u6216\u8aaa\u9592\u8a71\uff0c\u5f88\u53d7\u50b7',\n '\u8001\u662f\u88ab\u7576\u5de5\u5177\u4eba\u6216\u60c5\u7dd2\u5783\u573e\u6876',\n '\u6709\u4e9b\u670b\u53cb\u60f3\u65b7\u4f46\u53c8\u65b7\u4e0d\u4e7e\u6de8',\n '\u5927\u5bb6\u751f\u6d3b\u5708\u4e0d\u540c\u4e86\uff0c\u805a\u5728\u4e00\u8d77\u4e5f\u6c92\u8a71\u804a',\n '\u793e\u4ea4\u6d3b\u52d5\u597d\u7d2f\uff0c\u4f46\u4e0d\u53bb\u53c8\u6015\u88ab\u908a\u7de3\u5316',\n '\u501f\u9322\u6216\u4eba\u60c5\u554f\u984c\u8b93\u53cb\u8abc\u8b8a\u5f97\u5f88\u5c37\u5c2c'\n ],\n money_A: [\n '\u96f6\u7528\u9322\u4e0d\u5920\u82b1\uff0c\u4f46\u53c8\u4e0d\u597d\u610f\u601d\u8ddf\u5bb6\u88e1\u8981',\n '\u6253\u5de5\u592a\u7d2f\u5f71\u97ff\u5b78\u696d\uff0c\u4e0d\u6253\u5de5\u53c8\u6c92\u9322',\n '\u770b\u5230\u540c\u5b78\u90fd\u5728\u82b1\u9322\uff0c\u81ea\u5df1\u537b\u8981\u7701\u5403\u5109\u7528',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u958b\u59cb\u5b58\u7b2c\u4e00\u6876\u91d1',\n '\u60f3\u8981\u7d93\u6fdf\u7368\u7acb\uff0c\u4f46\u5b8c\u5168\u4e0d\u77e5\u9053\u600e\u9ebc\u505a',\n '\u5b78\u8cb8\u58d3\u529b\u8b93\u6211\u5f88\u7126\u616e',\n '\u670b\u53cb\u4e4b\u9593\u7684\u6d88\u8cbb\u6c34\u5e73\u5dee\u592a\u591a\uff0c\u5f88\u6709\u58d3\u529b',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5206\u914d\u6709\u9650\u7684\u751f\u6d3b\u8cbb',\n '\u60f3\u6295\u8cc7\u4f46\u672c\u91d1\u592a\u5c11\uff0c\u4e0d\u77e5\u9053\u5f9e\u54ea\u958b\u59cb',\n '\u89ba\u5f97\u8b80\u66f8\u5c31\u662f\u5728\u71d2\u9322\uff0c\u4e0d\u77e5\u9053\u503c\u4e0d\u503c\u5f97'\n ],\n money_B: [\n '\u9322\u4e0d\u77e5\u4e0d\u89ba\u5c31\u82b1\u5b8c\u4e86\uff0c\u5b58\u4e0d\u4f4f',\n '\u6536\u5165\u592a\u5c11\uff0c\u6bcf\u500b\u6708\u90fd\u5728\u5403\u571f',\n '\u60f3\u958b\u59cb\u6295\u8cc7\u7406\u8ca1\u4f46\u5b8c\u5168\u4e0d\u77e5\u9053\u600e\u9ebc\u505a',\n '\u548c\u53e6\u4e00\u534a\/\u5bb6\u4eba\u7684\u91d1\u9322\u89c0\u5dee\u592a\u591a',\n '\u4e0d\u77e5\u9053\u600e\u9ebc\u5206\u914d\u85aa\u6c34\u624d\u5408\u7406',\n '\u660e\u660e\u6709\u5728\u8cfa\uff0c\u4f46\u5c31\u662f\u6c92\u6709\u5b89\u5168\u611f',\n '\u60f3\u627e\u9069\u5408\u81ea\u5df1\u7684\u526f\u696d\u6216\u8cfa\u9322\u65b9\u5f0f',\n '\u623f\u50f9\u592a\u9ad8\uff0c\u89ba\u5f97\u6c38\u9060\u8cb7\u4e0d\u8d77\u623f',\n '\u70ba\u4e86\u7701\u9322\u72a7\u7272\u751f\u6d3b\u54c1\u8cea\uff0c\u89ba\u5f97\u5f88\u59d4\u5c48',\n '\u540c\u9f61\u4eba\u90fd\u8cb7\u8eca\u8cb7\u623f\u4e86\uff0c\u81ea\u5df1\u9084\u5728\u539f\u5730\u8e0f\u6b65'\n ],\n money_C: [\n '\u80cc\u8457\u8cb8\u6b3e\u6216\u50b5\u52d9\uff0c\u58d3\u529b\u5f88\u5927',\n '\u4e00\u500b\u4eba\u625b\u5168\u5bb6\u7684\u958b\u92b7\uff0c\u5598\u4e0d\u904e\u6c23',\n '\u751f\u610f\u4e0d\u597d\u505a\uff0c\u4e0d\u77e5\u9053\u9084\u80fd\u6490\u591a\u4e45',\n '\u73fe\u91d1\u6d41\u4e00\u76f4\u5f88\u7dca\uff0c\u6bcf\u500b\u6708\u90fd\u5728\u5468\u8f49',\n '\u88ab\u6b20\u9322\u6216\u6295\u8cc7\u5931\u5229\uff0c\u4e0d\u77e5\u9053\u600e\u9ebc\u7ffb\u8eab',\n '\u5bb6\u4eba\u4e0d\u77e5\u9053\u6211\u7684\u8ca1\u52d9\u58d3\u529b\u6709\u591a\u5927',\n '\u4e0d\u77e5\u9053\u8a72\u5148\u9084\u50b5\u9084\u662f\u5148\u6295\u8cc7',\n '\u4fdd\u96aa\u3001\u9000\u4f11\u91d1\u9019\u4e9b\u90fd\u6c92\u898f\u5283\uff0c\u5f88\u614c',\n '\u70ba\u4e86\u9322\u72a7\u7272\u5065\u5eb7\u548c\u5bb6\u5ead\uff0c\u503c\u5f97\u55ce\uff1f',\n '\u89ba\u5f97\u88ab\u9322\u7d81\u4f4f\u4e86\uff0c\u5b8c\u5168\u6c92\u6709\u81ea\u7531'\n ],\n study_A: [\n '\u8003\u8a66\u58d3\u529b\u5927\u5230\u5598\u4e0d\u904e\u6c23',\n '\u4e0d\u77e5\u9053\u8a72\u9078\u4ec0\u9ebc\u79d1\u7cfb',\n '\u6210\u7e3e\u600e\u9ebc\u52aa\u529b\u90fd\u4e0a\u4e0d\u53bb\uff0c\u5f88\u632b\u6298',\n '\u7236\u6bcd\u5c0d\u6211\u7684\u5b78\u696d\u671f\u5f85\u592a\u9ad8',\n '\u89ba\u5f97\u8b80\u66f8\u5f88\u7121\u804a\uff0c\u63d0\u4e0d\u8d77\u52c1',\n '\u8eab\u908a\u7684\u4eba\u90fd\u6709\u76ee\u6a19\uff0c\u5c31\u6211\u9084\u5728\u8ff7\u8def',\n '\u88dc\u7fd2\u88dc\u5230\u6c92\u6709\u81ea\u5df1\u7684\u6642\u9593',\n '\u6015\u8003\u4e0d\u4e0a\u7406\u60f3\u7684\u5b78\u6821\uff0c\u5c0d\u4e0d\u8d77\u7238\u5abd',\n '\u60f3\u8d70\u81ea\u5df1\u60f3\u8d70\u7684\u8def\uff0c\u4f46\u5bb6\u4eba\u4e0d\u652f\u6301',\n '\u58d3\u529b\u5927\u5230\u7761\u4e0d\u597d\uff0c\u7cbe\u795e\u5f88\u5dee'\n ],\n study_B: [\n '\u8b80\u7684\u79d1\u7cfb\u4e0d\u662f\u6211\u60f3\u8981\u7684\uff0c\u4f46\u4e0d\u6562\u8f49',\n '\u77e5\u9053\u8a72\u8b80\u66f8\u4f46\u5c31\u662f\u63d0\u4e0d\u8d77\u52c1',\n '\u4e0d\u77e5\u9053\u7562\u696d\u4e4b\u5f8c\u8981\u5e79\u561b',\n '\u89ba\u5f97\u5b78\u6821\u6559\u7684\u6771\u897f\u6839\u672c\u6c92\u7528',\n '\u60f3\u4f11\u5b78\u6216\u91cd\u8003\uff0c\u4f46\u6015\u6d6a\u8cbb\u6642\u9593',\n '\u8ad6\u6587\/\u5831\u544a\u58d3\u529b\u5927\u5230\u60f3\u653e\u68c4',\n '\u8eab\u908a\u7684\u4eba\u90fd\u5728\u5be6\u7fd2\u6216\u8003\u8b49\u7167\uff0c\u6211\u537b\u4ec0\u9ebc\u90fd\u6c92\u505a',\n '\u6559\u6388\u5f88\u96e3\u6e9d\u901a\uff0c\u5e2b\u751f\u95dc\u4fc2\u8b93\u6211\u5f88\u75db\u82e6',\n '\u4e0d\u78ba\u5b9a\u8a72\u7e7c\u7e8c\u5347\u5b78\u9084\u662f\u76f4\u63a5\u53bb\u5de5\u4f5c',\n '\u5927\u5b78\u751f\u6d3b\u8ddf\u6211\u60f3\u7684\u5b8c\u5168\u4e0d\u4e00\u6a23'\n ],\n study_C: [\n '\u8003\u4e86\u597d\u5e7e\u6b21\u90fd\u6c92\u8003\u4e0a\uff0c\u5feb\u8981\u653e\u68c4\u4e86',\n '\u908a\u5de5\u4f5c\u908a\u8b80\u66f8\uff0c\u6642\u9593\u6839\u672c\u4e0d\u5920\u7528',\n '\u4e0d\u78ba\u5b9a\u8003\u9019\u500b\u8b49\u7167\u5230\u5e95\u6709\u6c92\u6709\u7528',\n '\u7562\u696d\u5f8c\u624d\u767c\u73fe\u5b78\u6b77\u6c92\u6709\u60f3\u50cf\u4e2d\u91cd\u8981',\n '\u6295\u4e86\u5f88\u591a\u5c65\u6b77\u90fd\u8981\u6c42\u7d93\u9a57\uff0c\u4f46\u6211\u6c92\u6709',\n '\u4e0d\u77e5\u9053\u8a72\u5148\u5de5\u4f5c\u9084\u662f\u5148\u8003\u7814\u7a76\u6240',\n '\u6e96\u5099\u8003\u8a66\u7684\u904e\u7a0b\u592a\u5b64\u7368\uff0c\u5f88\u60f3\u653e\u68c4',\n '\u82b1\u4e86\u5f88\u591a\u9322\u88dc\u7fd2\uff0c\u58d3\u529b\u66f4\u5927\u4e86',\n '\u5e74\u7d00\u8d8a\u4f86\u8d8a\u5927\uff0c\u89ba\u5f97\u81ea\u5df1\u4f86\u4e0d\u53ca\u4e86',\n '\u8eab\u908a\u7684\u4eba\u90fd\u5728\u5de5\u4f5c\u8cfa\u9322\uff0c\u6211\u9084\u5728\u8b80\u66f8'\n ]\n },\n stepTitles: { 1: '\u4f60\u76ee\u524d\u751f\u6d3b\u4e2d\u6700\u5728\u610f\u7684\u4e8b\uff1f', 2: '\u4f60\u5728\u9019\u4ef6\u4e8b\u4e2d\u7684\u8eab\u4efd\u662f\uff1f', 3: '\u6700\u8b93\u4f60\u56f0\u64fe\u7684\u662f\uff1f' },\n stepLabels: { 1: '\u6700\u5f8c\u4e00\u500b\u554f\u984c', 2: '\u518d\u4e00\u6b65\u5c31\u5b8c\u6210\u4e86', 3: '\u9078\u51fa\u6700\u6709\u5171\u9cf4\u7684\u4e00\u9805' }\n };\n\n let lcStep = 1;\n const lcDom = {};\n\n function initLcDom() {\n lcDom.overlay = document.getElementById('lcOverlay');\n lcDom.stars = document.getElementById('lcStars');\n lcDom.title = document.getElementById('lcTitle');\n lcDom.label = document.getElementById('lcLabel');\n lcDom.step1 = document.getElementById('lcStep1');\n lcDom.step2 = document.getElementById('lcStep2');\n lcDom.step3 = document.getElementById('lcStep3');\n lcDom.summary = document.getElementById('lcSummary');\n lcDom.confirmArea = document.getElementById('lcConfirmArea');\n lcDom.backBtn = document.getElementById('lcBackBtn');\n lcDom.scroll = document.getElementById('lcScroll');\n lcDom.dots = [document.getElementById('lcDot1'), document.getElementById('lcDot2'), document.getElementById('lcDot3')];\n lcDom.lines = [document.getElementById('lcLine1'), document.getElementById('lcLine2')];\n }\n\n function createLcStars() {\n if (!lcDom.stars) return;\n lcDom.stars.innerHTML = '';\n for (let i = 0; i < 50; i++) {\n const s = document.createElement('div');\n s.className = 'lc-star';\n const sz = Math.random() < 0.3 ? 3 : 2;\n s.style.cssText = `width:${sz}px;height:${sz}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--d:${2+Math.random()*4}s;--dl:${Math.random()*3}s;box-shadow:0 0 ${sz*2}px rgba(255,255,255,${0.3+Math.random()*0.4});`;\n lcDom.stars.appendChild(s);\n }\n }\n\n function showLifeConcern() {\n initLcDom();\n createLcStars();\n\n \/\/ \u5982\u679c\u6709\u5df2\u4fdd\u5b58\u7684\u9032\u5ea6\uff08\u4e3b\u984c\u5df2\u9078\uff09\uff0c\u6062\u5fa9\u5230\u5c0d\u61c9\u6b65\u9a5f\n const hasSavedProgress = lcSelected.topicKey !== null;\n\n if (!hasSavedProgress) {\n \/\/ \u5168\u65b0\uff1a\u5f9e Step 1 \u958b\u59cb\n lcStep = 1;\n lcSelected = { topicIdx: null, topicKey: null, topicName: null, role: null, concern: null };\n\n lcDom.step1.classList.remove('lc-hidden');\n lcDom.step2.classList.add('lc-hidden'); lcDom.step2.classList.remove('show');\n lcDom.step3.classList.add('lc-hidden'); lcDom.step3.classList.remove('show');\n lcDom.confirmArea.classList.remove('show');\n document.querySelectorAll('.lc-topic-card').forEach(c => c.classList.remove('selected'));\n\n lcDom.overlay.style.display = 'flex';\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n lcDom.overlay.classList.add('active');\n lcDom.step1.classList.add('show');\n });\n });\n lcUpdateAll();\n } else {\n \/\/ \u6709\u9032\u5ea6\uff1a\u6062\u5fa9\u5230\u4fdd\u5b58\u7684\u6b65\u9a5f\n const targetStep = lcStep || 1;\n lcDom.overlay.style.display = 'flex';\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n lcDom.overlay.classList.add('active');\n lcGoToStep(targetStep);\n });\n });\n }\n }\n\n \/\/ \ud83c\udf1f \u56de\u5230\u6307\u5b9a\u6b65\u9a5f\uff08\u4fdd\u7559\u5df2\u9078\u8cc7\u6599\uff09\n function showLifeConcernAtStep(targetStep) {\n initLcDom();\n if (!lcDom.stars.hasChildNodes()) createLcStars();\n\n lcDom.overlay.style.display = 'flex';\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n lcDom.overlay.classList.add('active');\n lcGoToStep(targetStep);\n });\n });\n }\n\n function lcUpdateAll() {\n \/\/ \u9032\u5ea6\u9ede\n lcDom.dots.forEach((d, i) => {\n d.classList.toggle('active', i + 1 === lcStep);\n d.classList.toggle('done', i + 1 < lcStep);\n });\n lcDom.lines.forEach((l, i) => { l.classList.toggle('done', i + 1 < lcStep); });\n\n \/\/ \u6a19\u984c\n lcDom.title.classList.remove('show');\n lcDom.label.classList.remove('show');\n setTimeout(() => {\n lcDom.label.textContent = LC_DATA.stepLabels[lcStep];\n lcDom.title.textContent = LC_DATA.stepTitles[lcStep];\n lcDom.label.classList.add('show');\n lcDom.title.classList.add('show');\n }, 150);\n\n \/\/ \u6458\u8981\n let tags = [];\n if (lcSelected.topicName) {\n const t = LC_DATA.topics[lcSelected.topicIdx];\n tags.push({ text: `${t.icon} ${t.name}`, step: 1 });\n }\n if (lcSelected.role) tags.push({ text: lcSelected.role, step: 2 });\n lcDom.summary.innerHTML = tags.map(t =>\n `<span class=\"lc-summary-tag\" onclick=\"lcGoToStep(${t.step})\">${t.text}<\/span>`\n ).join('');\n\n \/\/ \u8fd4\u56de\u6309\u9215\uff1aStep 1 \u986f\u793a\u300c\u8fd4\u56de\u4e0a\u4e00\u984c\u300d\uff0cStep 2\/3 \u986f\u793a\u300c\u4e0a\u4e00\u6b65\u300d\n lcDom.backBtn.classList.add('show');\n lcDom.backBtn.textContent = lcStep === 1 ? '\u2190 \u8fd4\u56de\u4e0a\u4e00\u984c' : '\u2190 \u4e0a\u4e00\u6b65';\n\n \/\/ \u78ba\u8a8d\u6309\u9215\n lcDom.confirmArea.classList.remove('show');\n }\n\n function lcGoToStep(step) {\n lcDom.step1.classList.add('lc-hidden'); lcDom.step1.classList.remove('show');\n lcDom.step2.classList.add('lc-hidden'); lcDom.step2.classList.remove('show');\n lcDom.step3.classList.add('lc-hidden'); lcDom.step3.classList.remove('show');\n lcDom.confirmArea.classList.remove('show');\n\n lcStep = step;\n if (lcDom.scroll) lcDom.scroll.scrollTop = 0;\n lcUpdateAll();\n\n setTimeout(() => {\n if (step === 1) {\n lcDom.step1.classList.remove('lc-hidden');\n \/\/ \u91cd\u65b0\u6a19\u8a18\u5df2\u9078\u4e3b\u984c\n document.querySelectorAll('.lc-topic-card').forEach((c, i) => {\n c.classList.toggle('selected', i === lcSelected.topicIdx);\n });\n requestAnimationFrame(() => lcDom.step1.classList.add('show'));\n } else if (step === 2) {\n lcRenderRoles();\n lcDom.step2.classList.remove('lc-hidden');\n requestAnimationFrame(() => lcDom.step2.classList.add('show'));\n } else if (step === 3) {\n lcRenderConcerns();\n lcDom.step3.classList.remove('lc-hidden');\n requestAnimationFrame(() => lcDom.step3.classList.add('show'));\n }\n }, 200);\n }\n\n window.lcSelectTopic = function(idx) {\n lcSelected.topicIdx = idx;\n lcSelected.topicKey = LC_DATA.topics[idx].key;\n lcSelected.topicName = LC_DATA.topics[idx].name;\n lcSelected.role = null;\n lcSelected.concern = null;\n document.querySelectorAll('.lc-topic-card').forEach((c, i) => { c.classList.toggle('selected', i === idx); });\n saveLcProgress();\n setTimeout(() => lcGoToStep(2), 300);\n };\n\n function lcRenderRoles() {\n const roles = LC_DATA.roles[lcSelected.topicKey] || [];\n lcDom.step2.innerHTML = roles.map((r, i) =>\n `<div class=\"lc-role-pill${lcSelected.role === r ? ' selected' : ''}\" onclick=\"lcSelectRole(${i})\">${r}<\/div>`\n ).join('');\n }\n\n window.lcSelectRole = function(idx) {\n const roles = LC_DATA.roles[lcSelected.topicKey] || [];\n lcSelected.role = roles[idx];\n lcSelected.concern = null;\n document.querySelectorAll('.lc-role-pill').forEach((p, i) => { p.classList.toggle('selected', i === idx); });\n saveLcProgress();\n setTimeout(() => lcGoToStep(3), 300);\n };\n\n function lcGetConcerns() {\n const group = LC_DATA.roleGroups[lcSelected.topicKey]?.[lcSelected.role] || 'A';\n const key = lcSelected.topicKey + '_' + group;\n const list = LC_DATA.concerns[key] || [];\n return [...list, LC_DATA.skipOption];\n }\n\n function lcRenderConcerns() {\n const concerns = lcGetConcerns();\n lcDom.step3.innerHTML = concerns.map((c, i) => {\n const isSkip = (c === LC_DATA.skipOption);\n return `<div class=\"lc-concern-item${lcSelected.concern === c ? ' selected' : ''}${isSkip ? ' lc-skip-option' : ''}\" onclick=\"lcSelectConcern(${i})\">\n <div class=\"lc-concern-radio\"><\/div>\n <div class=\"lc-concern-text\">${c}<\/div>\n <\/div>`;\n }).join('');\n if (lcSelected.concern) lcDom.confirmArea.classList.add('show');\n }\n\n window.lcSelectConcern = function(idx) {\n const concerns = lcGetConcerns();\n lcSelected.concern = concerns[idx];\n document.querySelectorAll('.lc-concern-item').forEach((item, i) => { item.classList.toggle('selected', i === idx); });\n lcDom.confirmArea.classList.add('show');\n saveLcProgress();\n };\n\n window.lcGoBack = function() {\n if (lcStep > 1) {\n lcGoToStep(lcStep - 1);\n saveLcProgress();\n } else {\n \/\/ Step 1 \u2192 \u8fd4\u56de Q93\n clearLcProgress();\n lcSelected = { topicIdx: null, topicKey: null, topicName: null, role: null, concern: null };\n lcCompleted = false;\n lcDom.overlay.classList.remove('active');\n setTimeout(() => {\n lcDom.overlay.style.display = 'none';\n \/\/ \u56de\u5230 Q93\uff08quizData \u5012\u6578\u7b2c\u4e8c\u500b\uff09\n currentIdx = quizData.length - 2;\n isTransitioning = false;\n renderQuestion(quizData[currentIdx]);\n }, 500);\n }\n };\n\n window.lcConfirm = function() {\n if (!lcSelected.concern) return;\n lcCompleted = true;\n saveLcProgress();\n console.log('\ud83d\udce6 Life Concern \u7d50\u679c:', lcSelected);\n\n \/\/ \u76f4\u63a5\u89f8\u767c\u6700\u7d42\u611f\u8b1d\u9801\uff08z-index 9999 \u6703\u84cb\u5728 LC overlay z-index 9998 \u4e0a\u65b9\uff09\n \/\/ \u4e0d\u5148\u6de1\u51fa LC\uff0c\u907f\u514d\u9583\u904e Q93 \u756b\u9762\n checkTransitionAndLoad();\n\n \/\/ \u7b49\u6700\u7d42\u9801\u52d5\u756b\u51fa\u73fe\u5f8c\uff0c\u518d\u96b1\u85cf LC overlay\n setTimeout(() => {\n lcDom.overlay.classList.remove('active');\n lcDom.overlay.style.display = 'none';\n }, 800);\n };\n\n \/* =========================================\n \ud83d\udd25 \u7159\u706b\u5f15\u64ce - \u652f\u63f4\u4e0d\u540c\u984f\u8272\n ========================================= *\/\n const canvas = document.getElementById('fireworksCanvas');\n const ctx = canvas.getContext('2d');\n let particles = []; let fireworksInterval;\n let animationFrameId;\n\n function resizeCanvas() {\n const dpr = window.devicePixelRatio || 1;\n const width = window.innerWidth;\n const height = window.innerHeight;\n canvas.width = width * dpr;\n canvas.height = height * dpr;\n ctx.scale(dpr, dpr);\n canvas.style.width = width + 'px';\n canvas.style.height = height + 'px';\n }\n window.addEventListener('resize', resizeCanvas); resizeCanvas();\n\n function createParticle(x, y) {\n \/\/ \u4f7f\u7528\u7576\u524d\u7ae0\u7bc0\u7684\u984f\u8272\n const baseHue = currentFireworkHues[Math.floor(Math.random() * currentFireworkHues.length)];\n const isMobile = window.innerWidth < 768;\n const particleCount = isMobile ? 60 : 120; \/\/ \u66f4\u591a\u7d30\u5c0f\u7c92\u5b50\n\n for (let i = 0; i < particleCount; i++) {\n const hue = baseHue + (Math.random() * 15 - 7.5); \/\/ \u8f15\u5fae\u8272\u76f8\u8b8a\u5316\n particles.push({\n x: x, y: y,\n hue: hue,\n speed: Math.random() * 2.5 + 0.3, \/\/ \u8f03\u6162\u64f4\u6563\n angle: Math.random() * Math.PI * 2,\n alpha: 0.9 + Math.random() * 0.1,\n decay: Math.random() * 0.008 + 0.003, \/\/ \u66f4\u6162\u8870\u6e1b\n size: Math.random() * 0.8 + 0.2 \/\/ \u66f4\u7d30\u5c0f\u7684\u7c92\u5b50\n });\n }\n }\n\n function updateFireworks() {\n const width = window.innerWidth;\n const height = window.innerHeight;\n\n \/\/ \u66f4\u67d4\u548c\u7684\u6de1\u51fa\u6548\u679c\n ctx.globalAlpha = 1;\n ctx.globalCompositeOperation = 'source-over';\n ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'; \/\/ \u66f4\u6162\u6de1\u51fa\uff0c\u62d6\u5c3e\u66f4\u9577\n ctx.fillRect(0, 0, width, height);\n ctx.globalCompositeOperation = 'lighter';\n\n for (let i = particles.length - 1; i >= 0; i--) {\n let p = particles[i];\n p.x += Math.cos(p.angle) * p.speed;\n p.y += Math.sin(p.angle) * p.speed + 0.3; \/\/ \u8f15\u5fae\u4e0b\u589c\n p.speed *= 0.985; \/\/ \u9010\u6f38\u6e1b\u901f\n p.alpha -= p.decay;\n\n if (p.alpha <= 0) {\n particles.splice(i, 1);\n continue;\n }\n\n \/\/ \u4f7f\u7528\u5f91\u5411\u6f38\u5c64\u7e6a\u88fd\uff0c\u66f4\u67d4\u548c\n const gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 3);\n gradient.addColorStop(0, `hsla(${p.hue}, 65%, 75%, ${p.alpha})`);\n gradient.addColorStop(0.3, `hsla(${p.hue}, 75%, 65%, ${p.alpha * 0.5})`);\n gradient.addColorStop(1, `hsla(${p.hue}, 85%, 55%, 0)`);\n\n ctx.fillStyle = gradient;\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size * 3, 0, Math.PI * 2);\n ctx.fill();\n }\n\n if (isTransitioning) {\n animationFrameId = requestAnimationFrame(updateFireworks);\n }\n }\n\n function startFireworks() {\n if (fireworksInterval) clearInterval(fireworksInterval);\n if (animationFrameId) cancelAnimationFrame(animationFrameId);\n updateFireworks();\n\n \/\/ \u958b\u5834\u653e\u4e00\u767c\n setTimeout(() => createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.5), 300);\n\n \/\/ \u4e3b\u5faa\u74b0 - \u9593\u9694 600ms\uff0c\u8f03\u70ba\u8212\u9069\n fireworksInterval = setInterval(() => {\n if (!isTransitioning) return;\n createParticle(Math.random() * window.innerWidth, Math.random() * window.innerHeight * 0.6);\n }, 600);\n }\n\n function stopFireworks() {\n clearInterval(fireworksInterval);\n cancelAnimationFrame(animationFrameId);\n ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);\n particles = [];\n }\n\n \/* \u661f\u7a7a\u80cc\u666f *\/\n (function () {\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initStarryBackground);\n } else { initStarryBackground(); }\n\n function initStarryBackground() {\n const starsContainer = document.getElementById('starsContainer');\n const meteorsContainer = document.getElementById('meteorsContainer');\n if (!starsContainer || !meteorsContainer) return;\n\n for (let i = 0; i < 120; i++) {\n const star = document.createElement('div');\n const size = Math.random();\n if (size > 0.95) star.className = 'star sparkle';\n else if (size > 0.8) star.className = 'star large';\n else if (size > 0.5) star.className = 'star medium';\n else star.className = 'star small';\n star.style.left = Math.random() * 100 + '%';\n star.style.top = Math.random() * 100 + '%';\n star.style.setProperty('--duration', (2 + Math.random() * 3) + 's');\n star.style.setProperty('--delay', Math.random() * 3 + 's');\n starsContainer.appendChild(star);\n }\n\n function createMeteor(isBig = false) {\n const meteor = document.createElement('div');\n meteor.className = isBig ? 'meteor big' : 'meteor';\n const startX = 30 + Math.random() * 65;\n const startY = 5 + Math.random() * 40;\n const duration = isBig ? 1.2 + Math.random() * 0.5 : 0.8 + Math.random() * 0.4;\n meteor.style.left = startX + '%';\n meteor.style.top = startY + '%';\n meteor.style.setProperty('--duration', duration + 's');\n meteorsContainer.appendChild(meteor);\n setTimeout(() => { meteor.classList.add('active'); }, 50);\n setTimeout(() => { meteor.remove(); }, duration * 1000 + 200);\n }\n\n setTimeout(() => createMeteor(), 500);\n setTimeout(() => createMeteor(), 2000);\n setTimeout(() => createMeteor(true), 4000);\n\n function scheduleMeteor() {\n const delay = 4000 + Math.random() * 6000;\n setTimeout(() => {\n createMeteor(Math.random() > 0.7);\n scheduleMeteor();\n }, delay);\n }\n setTimeout(scheduleMeteor, 5000);\n }\n })();\n\n \/\/ \ud83d\ude80 \u555f\u52d5\u6e2c\u9a57\uff08\u5148\u8f09\u5165 API \u8cc7\u6599\uff09\n initQuiz();\n <\/script>\n<\/body>\n\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Immersive Quiz &#821 […]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9072","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/9072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/comments?post=9072"}],"version-history":[{"count":30,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/9072\/revisions"}],"predecessor-version":[{"id":9102,"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/pages\/9072\/revisions\/9102"}],"wp:attachment":[{"href":"https:\/\/maybeits.me\/th\/wp-json\/wp\/v2\/media?parent=9072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}