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

:root { --ink:#302a35; --muted:#817681; --pink:#ff6d91; --purple:#8273f5; --cream:#fff8f5; --line:#f0e4e9; --shadow:0 22px 70px rgba(87,57,75,.12); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:'Noto Sans SC','Microsoft YaHei',sans-serif; background:radial-gradient(circle at 8% 4%,#ffe7ef 0,transparent 25%), radial-gradient(circle at 98% 18%,#ebe8ff 0,transparent 26%),var(--cream); min-height:100vh; }
button { font:inherit; cursor:pointer; }
.page-shell { width:min(100%,980px); margin:auto; padding:20px 20px 34px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.brand { font-weight:800; letter-spacing:.04em; }.brand-dot { color:var(--pink); margin-right:8px; }.tag { color:var(--muted); font-size:12px; }
.main-card { background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.9); border-radius:28px; box-shadow:var(--shadow); min-height:650px; overflow:hidden; }
.hero { display:grid; grid-template-columns:1.05fr .95fr; min-height:650px; }.hero-copy { padding:78px 64px; display:flex; flex-direction:column; justify-content:center; }.eyebrow { color:var(--pink); font-size:13px; font-weight:800; letter-spacing:.12em; }.hero h1 { margin:18px 0 16px; font-size:clamp(36px,6vw,64px); line-height:1.08; letter-spacing:-.06em; }.hero h1 em { color:var(--pink); font-style:normal; }.hero p { color:var(--muted); line-height:1.9; margin:0 0 30px; }.hero-visual { position:relative; display:grid; place-items:center; background:linear-gradient(145deg,#fff0f3,#efedff); }.orbit { width:min(73vw,370px); aspect-ratio:1; border:1px dashed rgba(130,115,245,.45); border-radius:50%; position:relative; display:grid; place-items:center; }.orbit::before,.orbit::after { content:''; position:absolute; border:1px solid rgba(255,109,145,.25); border-radius:50%; }.orbit::before { inset:13%; }.orbit::after { inset:28%; }.star-center { width:136px; height:136px; border-radius:42% 58% 55% 45%; transform:rotate(-12deg); background:linear-gradient(135deg,#ff7ca0,#8f83ff); display:grid; place-items:center; font-size:62px; box-shadow:0 18px 38px rgba(130,115,245,.3); }.orbit span { position:absolute; font-size:30px; }.s1{top:4%;left:42%}.s2{top:20%;right:9%}.s3{bottom:16%;right:10%}.s4{bottom:2%;left:42%}.s5{bottom:18%;left:8%}.s6{top:20%;left:8%}
.primary,.ghost { border:0; border-radius:14px; padding:14px 23px; font-weight:700; transition:.2s; }.primary { color:white; background:linear-gradient(100deg,#ff6d91,#9a82f8); box-shadow:0 10px 22px rgba(255,109,145,.22); }.primary:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(255,109,145,.3); }.ghost { color:var(--muted); background:#fff; border:1px solid var(--line); }.actions { display:flex; gap:12px; align-items:center; }.note { font-size:12px; color:#a0929a; margin-top:16px; }
.quiz { padding:38px 54px 50px; max-width:760px; margin:auto; }.quiz-head { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }.counter { color:var(--pink); font-weight:800; font-size:14px; }.progress { height:8px; background:#f5eaf0; border-radius:10px; overflow:hidden; margin-bottom:42px; }.progress i { display:block; height:100%; background:linear-gradient(90deg,var(--pink),#9d85ff); border-radius:10px; transition:width .3s; }.quiz h2 { font-size:clamp(24px,4vw,34px); line-height:1.4; margin:0 0 26px; letter-spacing:-.03em; }.options { display:grid; gap:13px; }.option { display:flex; align-items:center; gap:15px; text-align:left; width:100%; padding:17px 18px; background:#fff; border:1px solid var(--line); border-radius:16px; color:var(--ink); transition:.2s; }.option:hover { border-color:#ff9ab2; background:#fff7fa; transform:translateX(3px); }.option-index { color:var(--purple); font-weight:800; width:25px; height:25px; border-radius:50%; background:#f0edff; display:grid; place-items:center; font-size:13px; flex:none; }.back { margin-top:25px; color:var(--muted); background:none; border:0; padding:8px 0; font-size:13px; }
.result-wrap { padding:48px 54px 62px; max-width:850px; margin:auto; }.result-intro { text-align:center; }.result-intro .eyebrow { color:var(--purple); }.result-intro h1 { font-size:clamp(30px,5vw,48px); margin:12px 0 10px; }.result-intro p { color:var(--muted); margin:0 auto 30px; }.result-list { display:grid; gap:14px; }.result-card { display:grid; grid-template-columns:58px 1fr auto; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; }.result-card.top { border:2px solid #ff91aa; box-shadow:0 12px 28px rgba(255,109,145,.12); }.sign-icon { width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#fff0f3,#efedff);font-size:29px; }.result-card h3 { margin:0 0 4px; font-size:18px; }.result-card small { color:var(--muted); }.score { font-size:21px; font-weight:800; color:var(--pink); }.bar { grid-column:2 / -1; height:7px; background:#f6edf1; border-radius:7px; overflow:hidden; margin-top:-5px; }.bar i { display:block; height:100%; background:linear-gradient(90deg,#ff7596,#9586ff); border-radius:7px; }..result-actions { margin-top:28px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }.disclaimer { margin-top:30px; padding:14px 17px; background:#fffafc; border:1px solid #f5e2e9; border-radius:14px; color:#968690; font-size:12px; line-height:1.8; }.site-footer { text-align:center; color:#a0929a; font-size:12px; padding:22px; }
@media (max-width:700px) { .page-shell{padding:13px 12px 24px}.topbar{margin-bottom:14px}.tag{font-size:11px}.hero{display:block;min-height:auto}.hero-copy{padding:42px 26px 38px}.hero h1{font-size:42px}.hero-visual{min-height:280px}.orbit{width:240px}.star-center{width:100px;height:100px;font-size:47px}.quiz{padding:28px 20px 38px}.quiz-head{margin-bottom:20px}.progress{margin-bottom:30px}.result-wrap{padding:34px 18px 44px}.result-card{grid-template-columns:46px 1fr auto;gap:11px;padding:14px}.sign-icon{width:46px;height:46px;font-size:24px}.result-card h3{font-size:16px}.score{font-size:18px}.bar{grid-column:1 / -1}.actions .primary{width:100%}.hero-copy .actions{display:block}.hero-copy .actions .primary{width:100%}.note{text-align:center}.main-card{border-radius:22px} }
.result-actions { margin-top:28px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }