:root{--green:#188c55;--green2:#35aa6b;--ink:#202824;--muted:#66716c;--paper:#f4fbf7;--card:#fff;--line:#dcebe3;--shadow:0 16px 44px rgba(49,91,70,.1)}
*{box-sizing:border-box}
html{background:#eef8f2;color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#edf9f3,#f8fbf9);overflow-x:hidden}
button{font:inherit}
header{width:min(900px,calc(100% - 40px));margin:auto;padding:24px 0 12px}
.brand{display:inline-flex;gap:8px;align-items:center;color:var(--green);font-weight:750;text-decoration:none}
main{width:min(760px,calc(100% - 32px));margin:0 auto;padding:22px 0 50px}
footer{text-align:center;color:#8b958f;font-size:.82rem;padding:0 16px 36px}
.hero{min-height:calc(100vh - 160px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:7vw 4vw}
.eyebrow{font-size:.78rem;letter-spacing:.16em;color:var(--green);font-weight:800}
h1{font-size:clamp(3rem,11vw,6.4rem);line-height:1.05;margin:24px 0;letter-spacing:-.06em}
h1 em{font-style:normal;color:var(--green)}
.hero>p{max-width:560px;font-size:1.12rem;line-height:1.9;color:var(--muted);margin:0 0 34px}
.primary,.secondary,.link-button{min-height:52px;border-radius:13px;padding:0 28px;cursor:pointer}
.primary{border:1px solid var(--green);background:var(--green);color:#fff;font-weight:800}
.secondary{border:1px solid var(--green);background:#fff;color:var(--green);font-weight:700}
.link-button{border:0;background:transparent;color:var(--muted);text-decoration:underline}
.meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;color:var(--muted)}
.meta span{background:rgba(255,255,255,.72);padding:8px 13px;border-radius:999px;border:1px solid var(--line)}
.card,.result-card,details{background:var(--card);border-radius:28px;box-shadow:var(--shadow)}
.quiz{padding:clamp(24px,6vw,56px);margin-top:3vh}
.quiz-top{display:flex;justify-content:space-between;gap:16px;color:var(--green);font-size:.88rem;font-weight:750}
progress{width:100%;height:8px;margin:20px 0 42px;accent-color:var(--green)}
.quiz h2{font-size:clamp(1.65rem,5vw,2.5rem);line-height:1.45;margin:0;outline:none}
.hint,.save-note,.detail-note,.disclaimer{color:var(--muted)}
.hint{margin:14px 0 30px}
.options{display:grid;gap:13px}
.option{display:grid;grid-template-columns:42px 1fr;align-items:center;text-align:left;gap:12px;width:100%;min-height:74px;border:1px solid var(--line);background:#fbfdfc;border-radius:16px;padding:12px 18px;color:var(--ink);cursor:pointer}
.option:hover,.option.selected{border-color:var(--green);background:#eff9f3}
.option span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e5f4eb;color:var(--green);font-weight:850}
.option strong{font-weight:520;line-height:1.55;overflow-wrap:anywhere}
.quiz-actions,.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.save-note{text-align:center;font-size:.82rem;margin-bottom:0}
.result{width:100%;min-width:0}
.result-kicker{color:var(--green);font-weight:800;margin:0 0 18px 10px}
.result-card{width:100%;min-width:0;margin-bottom:24px;padding:32px;overflow:hidden}
.cover{padding:24px;text-align:center}
.cover img{display:block;width:min(100%,620px);height:auto;margin:auto;border:0;outline:0;clip-path:inset(3px);mix-blend-mode:multiply}
.cover>p{font-size:1.12rem;color:#46514d;margin:10px auto 4px;line-height:1.6;overflow-wrap:anywhere}
.result-card h2{position:relative;font-size:1.35rem;margin:0 0 24px;padding-left:18px}
.result-card h2:before{content:"";position:absolute;left:0;top:.06em;width:5px;height:1.35em;border-radius:3px;background:var(--green)}
.copy p{white-space:pre-line;font-size:1.03rem;line-height:1.9;margin:0;color:#37443e;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.metrics{display:grid;gap:23px}
.metric{display:grid;grid-template-columns:70px minmax(0,1fr) 42px;align-items:center;gap:16px;color:#55615b}
.metric i,.scale{display:block;height:12px;background:#e2ede7;border-radius:999px;overflow:hidden}
.metric i b,.scale i{display:block;height:100%;background:var(--green2);border-radius:inherit}
.metric>strong{color:var(--green);text-align:right}
details{padding:24px 28px;margin-bottom:24px}
summary{cursor:pointer;font-weight:750;color:#405048}
.tendency{margin-top:24px}
.tendency>div:first-child,.ends{display:flex;justify-content:space-between;gap:16px}
.tendency strong{color:var(--green)}
.scale{height:9px;margin:10px 0 6px}
.ends{font-size:.78rem;color:#7d8983}
.detail-note{font-size:.8rem;line-height:1.7;margin:24px 0 0}
.result-actions{margin:28px 0 22px}
.disclaimer{text-align:center;font-size:.8rem}
#notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#162a21;color:#fff;padding:11px 18px;border-radius:999px;z-index:20}
#notice:empty{display:none}
@media(max-width:560px){header{width:calc(100% - 28px);padding-top:18px}main{width:calc(100% - 24px);padding-top:14px}.hero{padding:8vw 3vw}.hero h1{font-size:14vw}.quiz{border-radius:22px;padding:24px 18px}.quiz-top{align-items:flex-start}.option{grid-template-columns:36px 1fr;padding:11px 13px}.option span{width:34px;height:34px}.quiz-actions{grid-template-columns:1fr}.result-card{border-radius:22px;padding:22px 18px}.cover{padding:12px 12px 22px}.cover img{width:100%;clip-path:inset(2px)}.copy p{font-size:.96rem;line-height:1.82}.metric{grid-template-columns:58px minmax(0,1fr) 34px;gap:9px}.result-actions{gap:10px}.result-actions button{padding:0 12px}details{border-radius:22px;padding:22px 18px}}