:root { --ink:#233333; --muted:#718080; --paper:#f7f8f4; --mint:#dcefe7; --mint-deep:#8bc8ae; --coral:#ed795f; --line:#d9e3df; --white:#fff; }
* { box-sizing:border-box; }
html { min-height:100%; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC", sans-serif; overflow-x:hidden; }
button, a { font:inherit; }
button { cursor:pointer; }
.ambient { position:fixed; border-radius:50%; pointer-events:none; opacity:.5; filter:blur(1px); z-index:0; }
.ambient-one { width:420px; height:420px; left:-170px; top:14%; background:#e7f2ec; }
.ambient-two { width:280px; height:280px; right:-110px; bottom:8%; background:#f6e9dd; }
.app-shell { width:min(1120px, calc(100% - 64px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; position:relative; z-index:1; }
.site-header { height:94px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(35,51,51,.1); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.08em; }
.brand-mark { display:flex; align-items:flex-end; gap:3px; width:24px; height:24px; }
.brand-mark span { display:block; width:6px; background:var(--coral); border-radius:4px 4px 1px 1px; }.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:20px;background:var(--mint-deep)}.brand-mark span:nth-child(3){height:16px;background:var(--ink)}
.header-note,.eyebrow,.microcopy,.question-kicker,.progress-percent,.result-tag,.site-footer,.card-label { font-family:"DM Sans", sans-serif; letter-spacing:.14em; }
.header-note { font-size:10px; color:var(--muted); }
.view { flex:1; animation:fadeIn .4s ease; }.view[hidden] { display:none; } @keyframes fadeIn { from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
.view-welcome { display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:70px; padding:52px 22px 70px; }
.eyebrow { color:var(--coral); font-size:11px; font-weight:700; margin:0 0 24px; }.welcome-copy h1,.result-heading h1 { font-size:clamp(42px,6vw,76px); line-height:1.18; letter-spacing:-.045em; margin:0 0 28px; font-weight:800; }.welcome-copy h1 em,.result-heading h1 em { color:var(--coral); font-style:normal; }.intro { color:#647474; font-size:16px; line-height:2; max-width:480px; margin:0 0 34px; }.primary-button,.next-button { border:0; color:#fff; background:var(--ink); border-radius:3px; padding:15px 23px; font-weight:700; letter-spacing:.04em; transition:transform .2s,background .2s; }.primary-button:hover,.next-button:hover { background:var(--coral); transform:translateY(-2px); }.primary-button span,.next-button span { margin-left:18px; font-size:18px; }.microcopy { font-size:10px; color:var(--muted); margin-top:18px; }
.welcome-art { min-height:480px; position:relative; }.orbit { position:absolute; border:1px solid #cfe2d9; border-radius:50%; }.orbit-large { width:420px; height:420px; top:30px; left:26px; }.orbit-small { width:290px; height:290px; top:95px; left:92px; border-color:#f2cabe; }.art-sun { position:absolute; width:150px; height:150px; border-radius:50%; background:#f2b5a2; top:95px; left:155px; }.art-card { position:absolute; width:180px; height:238px; border-radius:5px; box-shadow:0 14px 30px rgba(35,51,51,.12); transform:rotate(-11deg); }.card-back { background:#b5dcca; top:190px; left:92px; }.card-front { background:#fffaf0; top:170px; left:135px; transform:rotate(7deg); padding:25px; display:flex; flex-direction:column; }.card-label { font-size:10px; color:var(--coral); }.card-front strong { margin-top:42px; font-size:25px; line-height:1.35; letter-spacing:-.04em; }.card-front i { color:var(--coral); font-size:22px; font-style:normal; margin-top:auto; }.art-caption { position:absolute; bottom:27px; right:30px; font-family:"DM Sans",sans-serif; font-size:11px; letter-spacing:.1em; line-height:1.7; color:var(--muted); }.art-caption span { color:var(--coral); }
.site-footer { display:flex; justify-content:space-between; font-size:9px; color:#93a09d; padding:18px 0 22px; border-top:1px solid rgba(35,51,51,.1); }
.view-quiz { padding:51px 22px 65px; }.quiz-topline { display:flex; justify-content:space-between; align-items:center; }.quiz-topline .eyebrow { margin:0; color:var(--muted); }.question-count { margin-left:20px; color:var(--coral); font:700 12px "DM Sans",sans-serif; }.progress-percent { font-size:11px; color:var(--muted); }.progress-track { width:100%; height:3px; background:#dce6e1; margin-top:17px; }.progress-fill { height:100%; background:var(--coral); transition:width .3s ease; }.quiz-layout { display:grid; grid-template-columns:190px 1fr; gap:55px; max-width:870px; margin:84px auto 0; }.quiz-aside { padding-top:9px; display:flex; flex-direction:column; align-items:flex-start; }.aside-index { font:700 52px "DM Sans",sans-serif; color:var(--mint-deep); line-height:1; }.aside-rule { width:35px; border-top:2px solid var(--coral); margin:24px 0 18px; }.quiz-aside p { color:var(--muted); line-height:1.9; font-size:13px; margin:0; }.question-kicker { color:var(--coral); font-size:11px; font-weight:700; margin:0 0 18px; }.question-area h2 { font-size:clamp(25px,3.3vw,42px); line-height:1.5; letter-spacing:-.04em; max-width:680px; margin:0; }.question-hint { color:#9aa7a3; font-size:12px; margin:19px 0 25px; }.options { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }.option { min-height:74px; position:relative; border:1px solid var(--line); background:rgba(255,255,255,.42); border-radius:3px; padding:13px 8px; color:#5c6c69; font-size:13px; transition:.2s; }.option:hover { border-color:var(--mint-deep); background:#eff8f3; }.option input { position:absolute; opacity:0; }.option span { display:flex; height:100%; align-items:center; justify-content:center; text-align:center; }.option:has(input:checked) { border-color:var(--coral); background:#fff3ed; color:var(--coral); font-weight:700; box-shadow:0 3px 0 var(--coral); }.validation-message { min-height:20px; color:var(--coral); font-size:12px; margin:12px 0 0; }.quiz-actions { display:flex; justify-content:space-between; align-items:center; margin-top:34px; }.text-button { border:0; background:none; color:var(--muted); padding:10px 0; }.text-button:hover { color:var(--ink); }.text-button span { margin-right:12px; }.next-button { min-width:130px; }.next-button span { margin-left:14px; }
.view-result { padding:59px 22px 70px; }.result-heading { text-align:center; }.result-heading .eyebrow { margin-bottom:17px; }.result-heading h1 { font-size:clamp(38px,5vw,60px); margin-bottom:42px; }.result-grid { max-width:780px; margin:auto; display:grid; grid-template-columns:270px 1fr; gap:65px; align-items:center; }.score-panel { display:flex; flex-direction:column; align-items:center; }.score-ring { width:190px; height:190px; border-radius:50%; border:12px solid var(--mint); outline:1px solid #b7d8c9; outline-offset:-25px; display:flex; flex-direction:column; align-items:center; justify-content:center; }.score-value { font:700 48px "DM Sans",sans-serif; color:var(--coral); line-height:1; }.score-label { color:var(--muted); font-size:12px; margin-top:6px; }.score-range { font:10px "DM Sans",sans-serif; color:#9aa7a3; letter-spacing:.08em; }.result-copy { border-left:1px solid var(--line); padding-left:42px; }.result-tag { color:var(--coral); font-size:10px; font-weight:700; }.result-copy h2 { font-size:30px; margin:13px 0 14px; }.result-copy > p:not(.result-tag) { color:#647474; line-height:1.9; font-size:14px; margin:0; }.result-advice { display:flex; gap:12px; align-items:flex-start; margin-top:25px; padding:15px 18px; background:#eff7f2; border-radius:3px; }.result-advice span { color:var(--coral); }.result-advice p { font-size:13px; line-height:1.7; margin:0; color:var(--ink); }.result-footer { max-width:780px; margin:52px auto 0; padding-top:23px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:30px; }.result-footer p { color:#8a9793; font-size:11px; line-height:1.8; max-width:535px; margin:0; }.result-footer strong { color:var(--ink); }
@media (max-width:760px) { .app-shell{width:min(100% - 36px, 560px)}.site-header{height:74px}.header-note{font-size:8px}.view-welcome{display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:54px 0 42px}.welcome-copy h1{font-size:46px}.intro{font-size:14px;line-height:1.9}.welcome-art{width:100%; min-height:340px; transform:scale(.78); transform-origin:top center; margin-bottom:-55px}.art-caption{right:0}.view-quiz{padding:38px 0 45px}.quiz-layout{display:block;margin-top:48px}.quiz-aside{display:none}.question-area h2{font-size:27px}.options{grid-template-columns:repeat(2,1fr);gap:9px}.option{min-height:60px}.option:last-child{grid-column:span 2}.quiz-actions{margin-top:26px}.result-heading{text-align:left}.result-heading h1{font-size:42px;margin-bottom:34px}.result-grid{display:flex;flex-direction:column;align-items:stretch;gap:32px}.score-panel{align-items:flex-start}.score-ring{width:150px;height:150px}.score-value{font-size:40px}.result-copy{border-left:0;border-top:1px solid var(--line);padding:27px 0 0}.result-footer{display:block;margin-top:35px}.result-footer .primary-button{margin-top:22px}.site-footer{font-size:8px} }