@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');

:root { --ink:#382b36; --muted:#8e7d88; --rose:#fa6f98; --pink:#fff0f4; --lilac:#a287f4; --line:#f3dfe6; --cream:#fff9fa; --shadow:0 22px 70px rgba(116,64,89,.13); }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); font-family:'Noto Sans SC','Microsoft YaHei',sans-serif; background:radial-gradient(circle at 8% 5%,#ffe0e9 0,transparent 23%),radial-gradient(circle at 97% 17%,#efe7ff 0,transparent 25%),var(--cream); }
button { border:0; font:inherit; cursor:pointer; }
.page-shell { width:min(100%,980px); padding:20px; margin:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.brand { font-weight:900; letter-spacing:.05em; }.brand span { color:var(--rose); font-size:19px; margin-right:7px; }.top-tag, footer { color:#a4919c; font-size:12px; }
.main-card { overflow:hidden; min-height:650px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9); border-radius:30px; box-shadow:var(--shadow); }
.hero { display:grid; grid-template-columns:1.1fr .9fr; min-height:650px; }.hero-copy { display:flex; flex-direction:column; justify-content:center; padding:72px 62px; }.eyebrow { color:var(--rose); font-size:12px; font-weight:900; letter-spacing:.13em; }.hero h1 { margin:17px 0 16px; font-size:clamp(39px,6vw,65px); line-height:1.08; letter-spacing:-.07em; }.hero h1 em { color:var(--rose); font-style:normal; }.hero p { max-width:460px; margin:0 0 30px; color:var(--muted); line-height:1.9; }.primary,.ghost { min-height:50px; padding:13px 22px; border-radius:15px; font-weight:800; transition:.2s; }.primary { color:#fff; background:linear-gradient(105deg,#fb7298,#aa83ed); box-shadow:0 11px 24px rgba(235,91,137,.24); }.primary:hover { transform:translateY(-2px); box-shadow:0 15px 28px rgba(235,91,137,.3); }.ghost { color:var(--muted); background:#fff; border:1px solid var(--line); }.note { margin-top:15px; color:#a996a1; font-size:12px; }
.hero-visual { display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#fff0f4,#f0eaff); }.heart-scene { position:relative; width:min(72vw,360px); aspect-ratio:1; border:1px dashed #d6b8e8; border-radius:50%; display:grid; place-items:center; }.heart-scene::before,.heart-scene::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(250,111,152,.25); }.heart-scene::before { inset:13%; }.heart-scene::after { inset:27%; }.main-heart { position:relative; z-index:1; width:140px; height:126px; display:grid; place-items:center; border-radius:48% 52% 45% 55%; color:#fff; background:linear-gradient(140deg,#fa789c,#aa8af1); font-size:56px; transform:rotate(-10deg); box-shadow:0 19px 35px rgba(161,111,201,.3); }.float { position:absolute; color:#f47e9c; font-size:25px; }.f1 { top:4%; left:42%; }.f2 { top:22%; right:8%; }.f3 { right:9%; bottom:17%; }.f4 { bottom:3%; left:43%; }.f5 { left:8%; bottom:19%; }.f6 { left:9%; top:21%; }
.quiz { max-width:760px; margin:auto; padding:38px 54px 50px; }.quiz-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:27px; }.counter { margin-top:5px; color:var(--rose); font-size:14px; font-weight:900; }.quiz-tip { color:var(--muted); font-size:12px; }.progress { height:8px; margin-bottom:41px; overflow:hidden; border-radius:9px; background:#f8e8ee; }.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--rose),var(--lilac)); transition:width .25s; }.quiz h2 { margin:0 0 26px; font-size:clamp(24px,4vw,34px); line-height:1.42; letter-spacing:-.03em; }.options { display:grid; gap:13px; }.option { display:flex; align-items:center; gap:15px; width:100%; padding:17px 18px; color:var(--ink); text-align:left; background:#fff; border:1px solid var(--line); border-radius:17px; transition:.18s; }.option:hover { background:#fff7f9; border-color:#fa9bb4; transform:translateX(3px); }.option-label { display:grid; flex:none; width:26px; height:26px; place-items:center; color:#8b75d3; font-size:13px; font-weight:900; background:#f0ebff; border-radius:50%; }.back { margin-top:24px; padding:8px 0; color:var(--muted); background:transparent; font-size:13px; }
.result { max-width:820px; padding:46px 52px 58px; margin:auto; }.result-intro { text-align:center; }.result-intro h1 { margin:12px 0 8px; font-size:clamp(30px,5vw,47px); letter-spacing:-.05em; }.result-intro p { margin:0 0 28px; color:var(--muted); }.result-card { position:relative; overflow:hidden; padding:30px; color:#5a3348; background:linear-gradient(135deg,#fff1f5,#f3ecff); border:1px solid #f5d9e4; border-radius:25px; }.result-card::after { content:'♡'; position:absolute; right:20px; bottom:-46px; color:rgba(255,255,255,.7); font-size:175px; line-height:1; }.result-badge { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; color:#9c5e76; background:#fff9fb; border-radius:30px; font-size:12px; font-weight:800; }.result-icon { margin:17px 0 5px; font-size:52px; }.result-card h2 { position:relative; z-index:1; margin:0; font-size:clamp(27px,4vw,38px); }.summary { position:relative; z-index:1; margin:9px 0 20px; font-size:17px; font-weight:700; line-height:1.65; }.trait-list { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; }.trait-list span { padding:7px 10px; color:#745263; background:rgba(255,255,255,.67); border-radius:20px; font-size:12px; font-weight:700; }.detail { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:15px; }.detail article { padding:16px; background:#fff; border:1px solid #f6e6eb; border-radius:16px; }.detail h3 { margin:0 0 7px; color:#9c6a80; font-size:13px; }.detail p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:11px; margin-top:27px; }.disclaimer { margin-top:27px; padding:14px 16px; color:#998791; font-size:12px; line-height:1.8; background:#fffafc; border:1px solid #f4e3e9; border-radius:14px; } footer { padding:22px; text-align:center; }
@media (max-width:700px) { .page-shell { padding:13px 12px 23px; }.topbar { margin-bottom:14px; }.top-tag { font-size:11px; }.main-card { min-height:0; border-radius:22px; }.hero { display:block; min-height:0; }.hero-copy { padding:42px 26px 37px; }.hero h1 { font-size:42px; }.hero-visual { min-height:275px; }.heart-scene { width:235px; }.main-heart { width:102px; height:94px; font-size:42px; }.quiz { padding:28px 20px 37px; }.quiz-head { margin-bottom:20px; }.quiz-tip { display:none; }.progress { margin-bottom:30px; }.result { padding:34px 18px 43px; }.result-card { padding:23px; }.detail { grid-template-columns:1fr; }.primary { width:100%; }.actions .ghost { width:100%; } }