/* 文件名：style.css —— 修改颜色可从这里的变量开始 */
:root{--ink:#354b45;--muted:#6b7b74;--green:#4d7767;--mint:#e8f0e6;--pink:#f8e7e0;--paper:#fffdf8;--line:#e3e7dd;--shadow:0 16px 48px #5267480d}
*{box-sizing:border-box}body{margin:0;background:#f5f4ec;color:var(--ink);font:16px/1.75 system-ui,-apple-system,"Microsoft YaHei",sans-serif}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #ba7c55;outline-offset:4px}[hidden]{display:none!important}.shell{max-width:880px;margin:auto;padding:24px 22px 40px}.brand{display:flex;justify-content:space-between;align-items:center;font-size:14px;letter-spacing:.08em;margin-bottom:28px}.brand b{font-size:17px}.edition{color:var(--muted);font-size:12px}.card{background:var(--paper);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:clamp(24px,6vw,56px)}.hero{text-align:center;position:relative;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}h1{font-size:clamp(30px,5.7vw,46px);line-height:1.35;letter-spacing:-.04em;margin:14px auto;max-width:620px}h2{font-size:24px;line-height:1.5;margin:16px 0}h3{font-size:16px;margin:0 0 8px}p{margin:8px 0}.muted{color:var(--muted)}.intro{max-width:540px;margin:16px auto 22px}.pill{display:inline-block;border-radius:30px;background:var(--mint);padding:5px 13px;font-size:12px}.primary,.secondary{border-radius:14px;border:1px solid var(--green);padding:13px 24px;font-weight:650}.primary{background:var(--green);color:white}.secondary{background:transparent;color:var(--green)}.start{display:block;margin:24px auto 12px;min-width:220px}.pet-art{height:160px;display:flex;align-items:center;justify-content:center;gap:18px;margin:18px auto}.pet{width:124px;height:112px;border-radius:46% 46% 42% 42%;background:#ead5be;position:relative;display:grid;place-items:center;font-size:32px;transform:rotate(-7deg);border:2px solid #c9ac90}.pet:before,.pet:after{content:'';position:absolute;top:-23px;width:36px;height:55px;background:#d2b293;border-radius:70% 60% 45% 45%;z-index:-1}.pet:before{left:0;transform:rotate(-25deg)}.pet:after{right:0;transform:rotate(25deg)}.cat{background:#e0e8db;border-color:#adbfa7;transform:rotate(8deg);margin-top:28px}.cat:before,.cat:after{background:#b9cbb0;border-radius:5px 70% 5px 5px;height:38px;top:-17px}.face{letter-spacing:4px;font-size:25px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.fact{padding:15px;border:1px solid var(--line);border-radius:18px;background:#ffffff70;text-align:center;font-size:13px}.fact strong{display:block;font-size:20px}.fine{font-size:12px;color:var(--muted)}footer{text-align:center;margin-top:26px;font-size:12px;color:var(--muted)}footer p{margin:5px 0}.quiz-top{display:flex;justify-content:space-between;gap:12px;font-size:13px}.progress{height:7px;background:var(--mint);border-radius:10px;margin:12px 0 28px;overflow:hidden}.progress span{display:block;height:100%;background:var(--green);transition:width .2s}.question-label{font-size:12px;color:var(--green);letter-spacing:.08em}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-size:clamp(21px,4vw,28px);font-weight:700;line-height:1.5;margin-bottom:24px}.option{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:20px;border-radius:18px;margin:12px 0;cursor:pointer;background:#fff}.option:has(input:checked){background:var(--mint);border-color:var(--green)}.option input{accent-color:var(--green);width:20px;height:20px;flex-shrink:0}.option b{color:var(--green);font-size:14px}.navigation{display:flex;justify-content:space-between;gap:12px;margin:24px 0 18px}.dots{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}.dot{width:31px;height:31px;border:1px solid var(--line);border-radius:9px;background:white;font-size:12px;color:var(--ink)}.dot.answered{background:var(--mint)}.dot.current{border:2px solid var(--green)}.submit{width:100%}.validation{text-align:center;font-size:13px;margin-top:10px;color:var(--muted)}.result-head{text-align:center}.type{font-size:clamp(58px,12vw,90px);font-weight:800;letter-spacing:.08em;line-height:1.2;color:var(--green);margin:16px 0 8px}.tags{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:18px 0}.tags span{font-size:12px;background:var(--pink);border-radius:24px;padding:4px 12px}.result-body{margin-top:28px;border-top:1px solid var(--line);padding-top:24px}.result-body section{margin:22px 0}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.mini{background:var(--mint);padding:19px;border-radius:18px}.mini.pink{background:var(--pink)}ul{padding-left:22px;margin:8px 0}.score-row{margin:14px 0;font-size:12px}.score-label{display:flex;justify-content:space-between;gap:12px}.score-bar{height:7px;border-radius:10px;background:#e8cec3;overflow:hidden;margin-top:6px}.score-bar span{height:100%;display:block;background:var(--green)}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 10px}.share-preview{margin-top:20px;text-align:center}.share-preview img{display:block;width:100%;max-width:400px;margin:12px auto;border-radius:16px;border:1px solid var(--line)}a{color:var(--green)}.status{text-align:center;font-size:13px;min-height:24px}#resultCapture{background:var(--paper)}@media(max-width:540px){.shell{padding:18px 14px 30px}.brand{margin-bottom:20px}.edition{display:none}.card{border-radius:23px;padding:26px 20px}.facts{gap:7px}.fact{padding:12px 4px;font-size:11px}.fact strong{font-size:18px}.two-col{grid-template-columns:1fr}.navigation button{padding:11px 18px}.option{padding:17px 12px}.actions button{width:100%}.pet-art{transform:scale(.9);margin:10px auto}.score-label{font-size:11px}}

/* 手机优先视觉升级：奶油纸张、鼠尾草绿、杏桃色与手帐式卡片。 */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background-color:#f6f3eb;background-image:radial-gradient(#879b7d22 .8px,transparent .8px);background-size:18px 18px;overflow-wrap:anywhere}
button,label,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{min-height:48px;transition:background-color .15s,transform .15s}
button:active:not(:disabled){transform:translateY(1px)}
.shell{max-width:820px;padding-top:32px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
.brand b{font-weight:750;letter-spacing:.04em}.brand{padding:0 6px}
.card{border-color:#e3dfd2;box-shadow:0 8px 0 #e8e7da70,0 24px 64px #5267480b}
.hero{background:radial-gradient(ellipse at 50% 24%,#eef2e6 0,transparent 49%),var(--paper);padding-top:36px}
.hero:before{content:'✦';position:absolute;top:120px;left:13%;font-size:25px;color:#bca680;transform:rotate(12deg)}
.hero:after{content:'✧';position:absolute;top:196px;right:12%;font-size:37px;color:#a4b599}
.pill{border:1px solid #d4decb;letter-spacing:.06em;font-weight:600}
.pet-art{position:relative;isolation:isolate;height:174px;margin:16px auto 22px}
.pet-art:before{content:'';position:absolute;width:270px;height:90px;bottom:0;background:#dde6d4;border-radius:50%;z-index:-2;transform:rotate(-5deg)}
.pet{box-shadow:inset 0 -9px 0 #c8a98a33,0 8px 0 #5267480b}.cat{box-shadow:inset 0 -9px 0 #a7ba9d33,0 8px 0 #5267480b}
.face{position:relative}.face:after{content:'';position:absolute;width:18px;height:9px;background:#dfa59666;border-radius:50%;left:-7px;bottom:5px;box-shadow:76px 0 0 #dfa59666}
h1{font-weight:800;max-width:560px}.eyebrow{font-size:10px;letter-spacing:.22em}
.intro{font-size:15px;line-height:1.9;max-width:450px}.facts{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:26px 0 20px}.fact{border:0;border-radius:0;background:none;padding:0 8px}.fact+.fact{border-left:1px solid var(--line)}.fact strong{font-size:28px;font-weight:750;line-height:1.5;color:var(--green)}
.primary{background:#486c59;border-color:#486c59;box-shadow:0 5px 0 #365442}.primary:disabled{box-shadow:none}.start{width:100%;max-width:380px;margin-top:24px}.secondary{border-color:#d5decf;background:#f4f6ee}
#tieNote{margin:22px auto 0;padding-top:16px;border-top:1px dashed #dedfcf;text-align:left;max-width:460px;line-height:1.8}
.quiz-top{font-weight:650}.progress{height:6px;margin-bottom:32px}.question-label{font-size:11px;margin-bottom:14px}legend{letter-spacing:-.02em;min-height:84px}
.option{min-height:82px;border:1.5px solid #e2e4d9;box-shadow:0 3px 0 #eeeede;transition:background-color .15s,border-color .15s}.option:has(input:checked){background:#eaf0e2;box-shadow:0 3px 0 #c3d2b8}.option span{line-height:1.7}.option b{display:inline-block;margin-right:5px}.option input{width:22px;height:22px}
.navigation button{flex:1}.dots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;padding-top:22px;border-top:1px dashed var(--line)}.dot{width:100%;height:42px;border-radius:12px;min-height:42px}.dot.answered{background:#e2ebd9}.dot.current{background:#486c59;color:white;border-color:#486c59}
.result-head{padding:8px 0 12px}.result-head:before{content:'✦  PERSONALITY PORTRAIT  ✦';display:block;font-size:10px;letter-spacing:.15em;color:var(--muted);margin-bottom:22px}.type{font-weight:850;letter-spacing:.07em;text-shadow:3px 3px 0 #dce5ce}.result-head h2{margin:10px 0;font-size:28px}.tags span{border:1px solid #efd8ca;background:#faeae0}.result-body h3{color:#486c59;font-size:14px;letter-spacing:.03em}.result-body>section{padding-bottom:18px;border-bottom:1px dashed var(--line)}.result-body>section:last-child{border-bottom:0}.mini{border:1px solid #dce5d3}.mini.pink{border-color:#eed8cf}.score-row{margin:18px 0}.score-bar{height:8px}.actions{gap:16px;margin-top:30px}.actions button{min-width:200px}.share-preview{background:#fffdf8;padding:20px;border-radius:22px}
@media(max-width:540px){
 .shell{padding:20px 16px calc(24px + env(safe-area-inset-bottom))}.brand{margin-bottom:22px}.brand b{font-size:14px}.card{padding:28px 22px;border-radius:28px}.hero{padding-top:26px}.hero .pill{font-size:10px}.hero:before{left:7%;top:115px}.hero:after{right:6%;top:183px}.pet-art{height:154px;transform:scale(.9);margin:12px -10px 16px}h1{font-size:32px;line-height:1.4;margin-top:14px;letter-spacing:-.04em}.intro{font-size:14px;margin:14px auto 22px}.fact{font-size:11px}.fact strong{font-size:26px}.facts{margin-top:22px}.start{font-size:16px;min-height:54px}.fine{font-size:11px}#tieNote{font-size:10px}.question-label{font-size:10px}legend{font-size:23px;min-height:102px;margin-bottom:14px}.option{padding:18px 14px;gap:12px;font-size:15px;min-height:88px}.navigation{margin-top:28px}.dots{gap:7px}.dot{font-size:12px}.result-head h2{font-size:26px}.result-body{font-size:14px}.result-body section{margin:20px 0}.two-col{gap:0}.mini{padding:18px}.actions{flex-direction:column}.actions button{width:100%;min-height:54px}.score-label{font-size:11px}.result-head:before{font-size:9px;letter-spacing:.1em}
}
@media(max-width:350px){.shell{padding-left:10px;padding-right:10px}.card{padding-left:17px;padding-right:17px}h1{font-size:28px}.dots{gap:5px}.dot{border-radius:9px}.pet-art{gap:12px}.pet{width:112px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}