:root{font-family:PingFang SC,Microsoft YaHei,Noto Sans SC,sans-serif;color:#3f4659;background:radial-gradient(circle at top left,rgba(190,204,236,.45),transparent 30%),radial-gradient(circle at top right,rgba(199,188,219,.35),transparent 24%),linear-gradient(180deg,#f8f4ef,#eff2f7);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-card: rgba(255, 252, 249, .78);--border-soft: rgba(110, 127, 167, .16);--text-main: #3f4659;--text-muted: #7d8296;--primary: #6f84b7;--primary-deep: #5f74a7;--accent: #a59abf;--accent-soft: #c7bdd8;--shadow-soft: 0 18px 45px rgba(111, 123, 156, .13);--shadow-button: 0 12px 24px rgba(103, 120, 169, .24);--shadow-hero: 0 22px 50px rgba(119, 128, 162, .16)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-height:100vh}button{font:inherit}.app-shell{min-height:100vh;padding:18px 12px 28px}.phone-frame{position:relative;width:min(100%,460px);min-height:calc(100vh - 36px);margin:0 auto;padding:18px;border-radius:34px;background:#ffffff61;box-shadow:0 24px 60px #545c7c24;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);overflow:hidden}.screen{display:flex;flex-direction:column;gap:18px}.screen-home{padding-top:18px}.card{position:relative;padding:20px;border:1px solid var(--border-soft);border-radius:28px;background:var(--bg-card);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.page-title{margin:0;color:#384055;font-size:clamp(2rem,7vw,2.6rem);line-height:1.08;letter-spacing:-.03em}.page-subtitle,.result-summary{margin:0;color:#5a6278;font-size:1rem;line-height:1.85}.invite-banner{width:100%;padding:10px 16px;margin-bottom:12px;border-radius:12px;text-align:center;font-size:.88rem;font-weight:500;color:var(--primary-deep);background:linear-gradient(135deg,#beccec59,#c7bcdb4d);border:1px solid rgba(111,132,183,.15);animation:bannerFadeIn .6s ease-out}@keyframes bannerFadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.brand-tag{display:inline-flex;align-items:center;width:fit-content;padding:8px 16px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);font-size:.82rem;font-weight:600;letter-spacing:.06em;box-shadow:0 6px 16px #6f84b740}.eyebrow,.question-count{display:inline-flex;align-items:center;width:fit-content;padding:8px 14px;border-radius:999px;color:var(--primary-deep);background:#6f84b721;font-size:.84rem;letter-spacing:.04em}.lead-text,.section-title,.question-title,.transition-title{margin:0;color:var(--text-main)}.lead-text{font-size:1.05rem;font-weight:600}.section-title{font-size:1.06rem;font-weight:700}.question-title,.transition-title{font-size:1.35rem;line-height:1.6}.body-copy{margin:0;color:#596176;font-size:.98rem;line-height:1.9}.body-copy.centered{text-align:center}.body-copy.emphasis{color:#46506a;font-weight:600}.soft-list,.info-grid,.result-list{margin:0;padding:0;list-style:none}.soft-list{display:grid;gap:10px}.soft-list li,.info-grid li,.result-list li{position:relative;padding-left:18px;color:#586177;line-height:1.8}.soft-list li:before,.info-grid li:before,.result-list li:before{content:"";position:absolute;left:0;top:.75em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));transform:translateY(-50%)}.info-grid{display:grid;gap:8px;margin-top:14px}.intro-card,.notes-card,.preview-card,.quiz-card,.transition-card{display:grid;gap:16px}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-item{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;background:#6f84b712}.preview-name{font-size:.95rem;font-weight:600;color:var(--primary-deep);letter-spacing:.04em}.preview-desc{font-size:.76rem;color:#8090b0;line-height:1.4}.hero-glow,.result-hero-glow{position:absolute;z-index:0;width:180px;height:180px;border-radius:50%;filter:blur(16px);opacity:.65}.hero-glow-left{top:-40px;left:-70px;background:#b4c6e88c}.hero-glow-right{top:120px;right:-70px;background:#c9b9dd85}.primary-button,.secondary-button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;width:100%;padding:0 20px;border:0;border-radius:20px;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,background-color .18s ease}.primary-button{color:#fffdfc;background:linear-gradient(135deg,var(--primary),#8396c5 60%,#9d93bc);box-shadow:var(--shadow-button)}.secondary-button{color:var(--primary-deep);background:#6f84b71f;border:1px solid rgba(111,132,183,.22)}.primary-button:active,.secondary-button:active,.option-card:active{transform:scale(.985)}.primary-button:disabled{opacity:.45;box-shadow:none}.quiz-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.question-hint,.transition-label{color:var(--text-muted);font-size:.88rem}.progress-shell{height:10px;width:100%;overflow:hidden;border-radius:999px;background:#6f84b71f}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#7f90be,#a698c6);transition:width .24s ease}.option-list{display:grid;gap:12px}.option-card{display:grid;grid-template-columns:auto 1fr;gap:14px;width:100%;padding:16px;border:1px solid rgba(110,127,167,.18);border-radius:22px;background:#ffffffbf;text-align:left;color:var(--text-main);transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.option-card.is-active{border-color:#6f84b780;background:linear-gradient(180deg,#f1f4fff0,#f9f5fff5);box-shadow:0 12px 24px #6f84b726}.option-label{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--primary-deep);background:#6f84b71f;font-weight:700}.option-text{align-self:center;line-height:1.7}.sticky-action{margin-top:auto}.transition-screen{min-height:70vh;justify-content:center}.transition-card{align-items:center;text-align:center;padding-block:28px}.pulse-orb{width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fffffff2,#9dadd8e6 40%,#a59abfc7);box-shadow:0 0 #8091bf57;animation:pulse 2.2s infinite}.result-story-card{display:grid;gap:14px}.result-hero{position:relative;overflow:hidden;display:grid;gap:14px;padding:26px 22px 22px;border:1px solid rgba(121,136,175,.16);border-radius:32px;background:linear-gradient(180deg,#fffcfaf5,#f5f7fcf0 58%,#f6f2f9f5);box-shadow:var(--shadow-hero)}.result-hero>*{position:relative;z-index:1}.result-hero-glow-left{top:-24px;left:-54px;background:#b1c5eb85}.result-hero-glow-right{top:48px;right:-52px;background:#cbbde27a}.result-hero-badge{display:inline-flex;width:fit-content;padding:8px 14px;border-radius:999px;color:var(--primary-deep);background:#6f84b71f;font-size:.82rem;letter-spacing:.05em}.result-hero-label{margin:0;color:#788099;font-size:.88rem;letter-spacing:.03em}.result-hero-title{margin:0;color:#364056;font-size:clamp(2.1rem,8vw,2.8rem);line-height:1.12;letter-spacing:-.04em}.result-hero-subtitle{margin:6px 0 0;color:#8090b0;font-size:.92rem;letter-spacing:.04em;font-weight:400}.result-hero-summary{margin:0;color:#4f5871;font-size:1.06rem;line-height:1.9;font-weight:500}.score-chip-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.score-chip-row-hero{margin-top:6px}.score-chip{display:grid;gap:4px;padding:12px 8px;border-radius:18px;background:#ffffff94;border:1px solid rgba(111,132,183,.1);text-align:center;color:#5c647a;font-size:.76rem}.score-chip strong{color:#3a4258;font-size:1rem}.result-block{display:grid;gap:14px;padding:20px 18px;border-radius:26px;border:1px solid rgba(118,131,169,.14);background:#fffcf9d1;box-shadow:0 12px 28px #6e7b9c17}.result-block-soft-blue{background:linear-gradient(180deg,#f8fafff2,#fffcf9e0)}.result-block-soft-lilac{background:linear-gradient(180deg,#fbf7fff2,#fffcf9e6)}.result-block-soft-mist{background:linear-gradient(180deg,#f8fafaf2,#fffcf9e6)}.result-block-description{background:#fffcf9e0}.result-block-reminder{background:linear-gradient(180deg,#f5f8fff5,#f9f4fceb)}.result-block-share{background:linear-gradient(180deg,#fbf8fffa,#f5f8fff2);border-color:#8691bf33}.result-block-disclaimer{background:#ffffffb8}.result-block-header{display:grid;gap:6px}.result-block-kicker{color:#8a8ca0;font-size:.8rem;letter-spacing:.06em}.description-block,.result-list{display:grid;gap:10px}.result-list li{padding:14px 14px 14px 20px;border-radius:18px;background:#ffffff94;border:1px solid rgba(121,136,175,.08)}.result-list li:before{left:10px}.result-emphasis-copy{color:#49526a;font-weight:500}.share-copy{margin:0;padding:16px 18px;border-radius:20px;background:#ffffffb8;border:1px solid rgba(121,136,175,.1);color:#46506a;font-size:1.02rem;line-height:1.9;font-weight:600}.share-inline-button{margin-top:4px}.action-row{display:grid;gap:12px}.fade-in{animation:fadeUp .38s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #8091bf42}70%{transform:scale(1);box-shadow:0 0 0 18px #8091bf00}to{transform:scale(.95);box-shadow:0 0 #8091bf00}}@media (min-width: 768px){.app-shell{padding:28px}.phone-frame{min-height:calc(100vh - 56px);padding:22px}}@media (max-width: 420px){.phone-frame{padding:14px;border-radius:28px}.card,.result-hero,.result-block{border-radius:24px}.card{padding:18px}.score-chip-row{grid-template-columns:repeat(3,minmax(0,1fr))}.quiz-meta{flex-direction:column;align-items:flex-start}.result-hero{padding:22px 18px 20px}.result-block{padding:18px 16px}}.action-row-inline{grid-template-columns:repeat(2,minmax(0,1fr))}.action-row-inline .secondary-button:disabled{opacity:.45}@media (max-width: 420px){.action-row-inline{grid-template-columns:1fr}}.poster-offscreen{position:fixed;left:-9999px;top:0;pointer-events:none;z-index:-1}.poster-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#0009;padding:24px;animation:fadeUp .26s ease}.poster-modal-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;max-height:90vh;max-width:400px;width:100%}.poster-modal-title{margin:0;color:#fff;font-size:1rem;font-weight:600;letter-spacing:.04em;text-align:center}.poster-modal-close{position:absolute;top:-36px;right:0;width:32px;height:32px;border:none;border-radius:50%;background:#fff3;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.poster-modal-image-wrap{width:100%;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px #00000040}.poster-modal-image{display:block;width:100%;height:auto}.poster-modal-hint{margin:0;color:#ffffffb3;font-size:.84rem;text-align:center}.poster-modal-download{width:100%;max-width:280px}.poster-generate-button{margin-top:4px}.poster-generate-button:disabled{opacity:.7;cursor:not-allowed}.result-block-compat-entry{background:linear-gradient(180deg,#f5f8fff5,#f9f4fceb);border-color:#8691bf33;text-align:center}.result-block-compat{background:linear-gradient(180deg,#f8fafff5,#fbf7fff0);border-color:#8691bf2e}.compat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.compat-type-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid rgba(111,132,183,.16);border-radius:16px;background:#ffffffb8;text-align:left;font:inherit;color:var(--text-main);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.compat-type-card:active{transform:scale(.97)}.compat-type-card:hover{border-color:#6f84b761;background:#f1f4ffe6;box-shadow:0 8px 20px #6f84b71f}.compat-type-card.is-self{border-color:#6f84b759;background:linear-gradient(180deg,#f1f4fff0,#f9f5fff5)}.compat-type-name{font-size:.95rem;font-weight:600;color:var(--primary-deep);letter-spacing:.04em}.compat-type-desc{font-size:.76rem;color:#8090b0;line-height:1.45}.compat-type-badge{position:absolute;top:8px;right:10px;padding:2px 8px;border-radius:999px;font-size:.68rem;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));letter-spacing:.06em}.compat-hint{margin-top:4px;font-size:.86rem;color:var(--text-muted)}.compat-guide{display:grid;gap:16px}.compat-section{display:grid;gap:8px;padding:16px;border-radius:18px;background:#fff9;border:1px solid rgba(121,136,175,.08)}.compat-label{font-size:.78rem;font-weight:600;color:#8a8ca0;letter-spacing:.06em}.compat-chemistry{color:#49526a;font-weight:500;font-size:1.02rem;line-height:1.85}.compat-advice-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}.compat-advice-list li{position:relative;padding-left:18px;line-height:1.85}.compat-advice-list li:before{content:"";position:absolute;left:0;top:.75em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));transform:translateY(-50%)}.compat-reminder{color:#49526a;font-weight:500;font-style:italic;line-height:1.85}.compat-cta{display:grid;gap:12px;padding:18px 16px;border-radius:18px;background:linear-gradient(180deg,#f5f8fff5,#f9f4fceb);border:1px solid rgba(134,145,191,.14)}.compat-actions{display:grid;gap:8px}.compat-poster-button{margin-top:8px}.compat-poster-button:disabled{opacity:.7;cursor:not-allowed}.compat-premium-preview{display:grid;gap:16px;margin-top:4px}.compat-section-preview{background:linear-gradient(135deg,#f5f8fffa,#f9f4fff5);border-color:#8691bf38}.compat-tag{display:inline-block;padding:4px 14px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--primary-deep);background:linear-gradient(135deg,#beccec59,#c7bcdb59);letter-spacing:.04em;margin-top:4px}.compat-paywall{display:grid;gap:16px;padding:24px 18px;border-radius:18px;background:linear-gradient(180deg,#f9fafffa,#fcf8fff5);border:1px solid rgba(134,145,191,.18);text-align:center}.paywall-blur-hint{display:grid;gap:8px}.paywall-teaser{font-size:1.05rem;font-weight:600;color:var(--primary-deep);margin:0}.paywall-desc{font-size:.82rem;color:#8090b0;line-height:1.65;margin:0}.paywall-form{display:grid;gap:10px}.paywall-input{width:100%;padding:12px 16px;border:1.5px solid rgba(111,132,183,.25);border-radius:12px;font-size:.92rem;font-family:inherit;color:var(--text-main);background:#fffc;text-align:center;letter-spacing:.08em;outline:none;transition:border-color .2s ease;box-sizing:border-box}.paywall-input:focus{border-color:var(--primary)}.paywall-input-error{border-color:#d4837a;animation:shake .3s ease}.paywall-error{font-size:.8rem;color:#c0625a;margin:0}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.compat-premium-content{display:grid;gap:16px}.compat-portrait p{line-height:1.85}.compat-pair-list{display:grid;gap:12px}.compat-pair-item{padding:14px 16px;border-radius:14px;background:#ffffff8c;border:1px solid rgba(121,136,175,.08)}.compat-pair-item-friction{border-color:#bf9b8626;background:#fffcf999}.compat-pair-item-activity{border-color:#86af9b26;background:#f9fffc99}.compat-pair-title{display:block;font-size:.88rem;font-weight:600;color:var(--primary-deep);margin-bottom:6px}.compat-section-nugget{background:linear-gradient(135deg,#f5f8fffa,#fcf8fff5);border-color:#8691bf33}.compat-nugget{color:#49526a;font-weight:500;font-style:italic;line-height:1.85}.invite-link-button{margin-top:6px}.result-paywall{display:grid;gap:16px;padding:24px 18px;border-radius:18px;background:linear-gradient(180deg,#f9fafffa,#fcf8fff5);border:1px solid rgba(134,145,191,.18);text-align:center}.result-premium-content{display:contents}