:root { --paper:#f4f0e7; --surface:#fffdfa; --ink:#25241f; --muted:#77746b; --line:#ded8ca; --accent:#b95e4d; --accent-soft:#faebe6; --green:#2f7254; --green-soft:#e7f3ea; --yellow:#926c1d; --yellow-soft:#fbf4dd; --red:#a64238; --red-soft:#f9e8e5; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 88% 0%, #fffdf6 0, transparent 30rem), var(--paper); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
#app { width:min(100%, 620px); min-height:100vh; margin:0 auto; padding:28px 18px 56px; }
.intro,.question-view,.result-view { animation:rise .25s ease-out; }
.eyebrow,.question-meta { margin:0; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin:10px 0; font-family:Georgia,"Songti SC",serif; font-size:clamp(32px,8vw,45px); font-weight:500; line-height:1.15; letter-spacing:-.04em; }
h2 { margin:0 0 10px; font-size:20px; line-height:1.45; }
.lead { max-width:29rem; color:var(--muted); font-size:17px; line-height:1.75; }
.length-picker { padding:0; margin:28px 0 8px; border:0; }
.length-picker legend { margin-bottom:12px; padding:0; font-size:14px; font-weight:700; }
.length-cards { display:grid; gap:10px; }
.length-card { position:relative; display:grid; grid-template-columns:1fr auto; width:100%; padding:16px; border:1.5px solid var(--line); border-radius:14px; color:var(--ink); text-align:left; background:var(--surface); transition:border-color .12s,background .12s,transform .12s; }
.length-card:hover { transform:translateY(-1px); border-color:#b9ada0; background:#fff; }
.length-card.recommended { border-color:var(--accent); background:var(--accent-soft); }
.length-card .length-label { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.04em; }
.length-card strong { align-self:center; grid-column:2; grid-row:1 / span 2; font-family:Georgia,"Songti SC",serif; font-size:26px; font-weight:500; }
.length-card > span:not(.length-label) { margin-top:5px; color:var(--muted); font-size:13px; }
.length-card small { grid-column:1 / -1; margin-top:8px; color:#5b574d; font-size:13px; line-height:1.5; }
.intro-card,.result-card,.type-card,.action-card { margin:20px 0; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 8px 28px rgba(71,58,32,.035); }
.intro-card p { margin-bottom:8px; font-weight:700; }
.intro-card ol { margin:0; padding-left:1.25rem; color:#4d4b44; line-height:1.9; }
.field-label { display:block; margin:24px 0 8px; font-size:14px; font-weight:700; }
.field-label span { display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:400; }
input { width:100%; padding:14px; border:1.5px solid var(--line); border-radius:12px; outline:none; color:var(--ink); background:var(--surface); }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.button { display:block; width:100%; margin-top:12px; padding:15px 18px; border:1.5px solid transparent; border-radius:13px; font-weight:700; transition:transform .12s,background .12s; }
.button:hover { transform:translateY(-1px); }
.button.primary { color:#fff; background:var(--accent); }
.button.secondary { color:var(--accent); border-color:var(--accent); background:transparent; }
.privacy,.saved { color:var(--muted); font-size:12px; line-height:1.6; text-align:center; }
.privacy { margin:18px 4px; }
.question-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; letter-spacing:.05em; }
.question-meta span:first-child { color:var(--accent); font-weight:700; }
.progress { height:5px; margin:16px 0 28px; overflow:hidden; border-radius:999px; background:#e1dccf; }
.progress i,.axis-track i { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .22s ease; }
.question-view h2 { font-size:clamp(22px,5.5vw,28px); letter-spacing:-.025em; }
.question-note { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.65; }
.answers { display:grid; gap:10px; margin-top:20px; }
.option,.scale-option { min-height:57px; padding:13px 15px; border:1.5px solid var(--line); border-radius:14px; color:var(--ink); text-align:left; line-height:1.45; background:var(--surface); transition:border-color .12s,background .12s,transform .12s; }
.option:hover,.scale-option:hover { transform:translateY(-1px); border-color:#b9ada0; }
.option.selected,.scale-option.selected { border-color:var(--accent); background:var(--accent-soft); }
.option span { display:inline-block; width:26px; color:var(--accent); font-weight:700; }
.answers.scale { grid-template-columns:repeat(5,1fr); gap:7px; }
.scale-option { min-height:72px; padding:8px 5px; font-size:12px; text-align:center; }
.question-nav { display:flex; min-height:35px; align-items:center; justify-content:space-between; margin-top:18px; }
.text-button { padding:5px 0; border:0; color:var(--muted); text-decoration:underline; background:transparent; }
.type-card { padding:26px 20px; text-align:center; background:linear-gradient(145deg,#fffdf9,#f8eee8); }
.type-card h1 { margin:2px 0 12px; font-size:clamp(31px,8vw,43px); }
.type-card p:last-child { margin-bottom:0; color:#5d544c; line-height:1.75; }
.type-emoji { color:var(--accent); font-size:44px; line-height:1; }
.type-name { margin:10px 0 0; color:var(--muted); font-size:13px; }
.result-card p,.action-card p:not(.eyebrow) { margin-bottom:0; color:#514e46; line-height:1.8; }
.result-card h2:not(:first-child) { margin-top:20px; }
.result-card .evidence { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; line-height:1.7; }
.axis { margin-top:14px; }
.axis>div:first-child { display:flex; justify-content:space-between; font-size:14px; }
.axis>div:first-child b { font-variant-numeric:tabular-nums; }
.axis-track { height:7px; margin-top:7px; overflow:hidden; border-radius:999px; background:#e8e2d6; }
.light { border-width:1.5px; }
.light-label { margin-bottom:6px!important; font-weight:800; }
.light.green { border-color:#b9d7c1; background:var(--green-soft); }.light.green .light-label{color:var(--green)}
.light.yellow { border-color:#e8d39d; background:var(--yellow-soft); }.light.yellow .light-label{color:var(--yellow)}
.light.red { border-color:#e5b8b2; background:var(--red-soft); }.light.red .light-label{color:var(--red)}
.action-card { border:0; color:#fff; background:#28261f; }.action-card .eyebrow{color:#e7bd86}.action-card p:not(.eyebrow){color:#faf3e7}
.notice { padding:12px 14px; border-radius:12px; color:#755c24; background:var(--yellow-soft); font-size:13px; line-height:1.6; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
button:focus-visible { outline:3px solid #3a78c2; outline-offset:3px; }
@keyframes rise { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:600px) { #app { padding-top:48px; }.intro-card,.result-card,.type-card,.action-card { padding:24px; }.scale-option { font-size:13px; }.length-cards { grid-template-columns:repeat(3,1fr); }.length-card { min-height:150px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }