:root { --bg:#FBF5EE; --card:#FFFDFC; --pink:#E87575; --blush:#F4C3BE; --ink:#4A3026; --muted:#826B60; --line:#eadbd1; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 90% 2%, #fbe2d7 0, transparent 25rem), var(--bg); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.65; }
button { font:inherit; cursor:pointer; }
#app { min-height:100vh; display:flex; flex-direction:column; }
.page { width:min(100%, 620px); margin:0 auto; padding:28px 22px 38px; flex:1; }
.brand { font-size:18px; font-weight:800; letter-spacing:.02em; }.brand span { color:var(--pink); }
.brand.small { font-size:16px; }
.landing { padding-top:40px; text-align:center; }.hero-mark { margin:44px auto 14px; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; color:var(--pink); background:#fde5dc; font-size:37px; transform:rotate(-8deg); }
.eyebrow,.question-number,.section-label { margin:0 0 8px; color:var(--pink); font-size:12px; font-weight:800; letter-spacing:.15em; }.landing h1,.result-page h1 { margin:0; font-size:clamp(38px,11vw,56px); line-height:1.14; letter-spacing:-.06em; }.lead { margin:14px 0 27px; color:var(--muted); font-size:17px; }
.intro-card,.report-card { padding:23px; text-align:left; border:1px solid rgba(232,117,117,.15); border-radius:20px; background:rgba(255,253,252,.77); box-shadow:0 12px 30px rgba(99,55,39,.05); }.intro-card strong { display:block; }.intro-card span { font-size:13px; color:var(--muted); }.intro-card p { margin:12px 0 0; color:var(--muted); font-size:14px; }
.primary { width:100%; margin-top:24px; min-height:58px; border:0; border-radius:15px; color:white; background:var(--pink); font-weight:800; box-shadow:0 8px 18px rgba(232,117,117,.25); }.primary b { margin-left:8px; font-size:20px; }.primary:active { transform:translateY(1px); }
footer { width:min(100%,620px); margin:0 auto; padding:13px 25px 22px; color:var(--muted); font-size:11px; text-align:center; }
.quiz-header { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; }.progress { height:5px; margin:18px 0 52px; border-radius:9px; overflow:hidden; background:#efdfd6; }.progress i { display:block; height:100%; border-radius:inherit; background:var(--pink); transition:width .25s ease; }.question-page h2 { margin:0 0 28px; font-size:26px; line-height:1.4; letter-spacing:-.04em; }
.options { display:grid; gap:13px; }.option { position:relative; display:flex; align-items:center; width:100%; min-height:72px; padding:16px 48px 16px 16px; border:1px solid var(--line); border-radius:17px; color:var(--ink); text-align:left; background:var(--card); transition:transform .18s, border-color .18s, background .18s; }.option em { flex:none; width:28px; height:28px; margin-right:12px; display:grid; place-items:center; border-radius:50%; color:var(--pink); background:#fce9e2; font-size:13px; font-style:normal; font-weight:800; }.option span { font-size:15px; line-height:1.48; }.option b { display:none; position:absolute; right:17px; color:var(--pink); font-size:19px; }.option.selected { border-color:var(--pink); background:#fff6f2; transform:scale(.99); }.option.selected b { display:block; }.back { margin-top:26px; padding:7px 0; border:0; color:var(--muted); background:transparent; font-size:14px; }.back:disabled { opacity:.32; cursor:default; }
.loading { display:grid; align-content:center; text-align:center; min-height:70vh; }.orb { width:92px; height:92px; margin:0 auto 22px; display:grid; place-items:center; border-radius:50%; color:var(--pink); background:#f9ddd4; animation:pulse .9s ease-in-out infinite alternate; }.orb span { font-size:45px; }.loading p { margin:0; font-size:20px; font-weight:800; }.loading small { margin-top:8px; color:var(--muted); }
.result-page { padding-top:36px; }.result-page .eyebrow { margin-top:39px; }.result-page h1 { font-size:42px; }.score-pill { display:inline-block; margin:17px 0 21px; padding:7px 14px; border-radius:99px; color:#a45757; background:#fce5df; font-size:13px; font-weight:800; }.result-page blockquote { margin:0 0 26px; padding-left:15px; border-left:3px solid var(--blush); color:var(--muted); font-size:17px; }.report-card h2 { margin:0 0 19px; font-size:20px; }.dimension { margin-top:14px; }.dimension>div { display:flex; justify-content:space-between; font-size:14px; }.dimension b { color:var(--pink); }.dimension i { display:block; height:9px; margin-top:6px; overflow:hidden; border-radius:9px; background:#f3e3da; }.dimension em { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--pink),#ef9b91); }
article { margin:37px 2px 0; } article h2 { margin:0 0 12px; font-size:23px; line-height:1.4; } article p { margin:0; color:#60463b; } article ul { margin:0; padding:0; list-style:none; } article li { padding:11px 0; border-bottom:1px solid var(--line); } article li::before { content:'♡'; margin-right:10px; color:var(--pink); }.pitfall { padding:19px; border-radius:16px; background:#f9e7df; }.pitfall .section-label { color:#b36967; }
@keyframes pulse { to { transform:scale(1.08); box-shadow:0 0 0 15px rgba(232,117,117,.08); } }
@media (min-width:600px) { .page { padding-left:38px; padding-right:38px; }.landing { padding-top:52px; }.options { gap:15px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }