:root{--ink:#18342f;--sage:#6d887a;--cream:#f5f1e8;--paper:#fffdf8;--gold:#c2944f;--line:#d9ded7}*{box-sizing:border-box}html{background:var(--cream)}body{color:var(--ink);background:radial-gradient(circle at 10% 10%,#eef1e9 0,transparent 38%),var(--cream);margin:0;font-family:Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;overflow-x:hidden}button{font:inherit}.shell{min-height:100vh;position:relative;overflow:hidden}.welcome{place-items:center;padding:40px 20px;display:grid}.hero{text-align:center;z-index:1;width:min(820px,100%);position:relative}.eyebrow{color:var(--sage);letter-spacing:.24em;margin:0 0 24px;font-size:13px;font-weight:800}.verse-mark{width:84px;height:84px;color:var(--gold);border:1px solid #b9c6bd;border-radius:50%;place-content:center;margin:0 auto 26px;font-family:Georgia,serif;font-size:26px;line-height:.75;display:grid}h1{letter-spacing:.03em;margin:0;font-family:Georgia,Noto Serif TC,PMingLiU,serif;font-size:clamp(52px,9vw,92px);font-weight:500}.scripture{margin:30px auto 16px;font-family:Georgia,Noto Serif TC,PMingLiU,serif;font-size:clamp(18px,3vw,25px)}.intro{color:#556861;max-width:630px;margin:0 auto;font-size:16px;line-height:1.9}.facts{flex-wrap:wrap;justify-content:center;gap:10px;margin:34px 0 28px;display:flex}.facts span{border-left:1px solid #aebbb3;padding:0 20px;font-size:14px;font-weight:700}.facts span:first-child{border-left:0}.primary,.secondary{cursor:pointer;border:0;border-radius:4px;padding:15px 25px;font-weight:800;transition:all .2s}.primary{background:var(--ink);color:#fff;box-shadow:0 10px 28px #18342f2b}.primary:hover{background:#264b43;transform:translateY(-1px)}.primary:disabled{opacity:.35;cursor:not-allowed;transform:none}.primary span{margin-left:28px}.primary.compact{padding:13px 22px}.secondary{color:var(--ink);background:0 0;border:1px solid #bfc8c2}.secondary:disabled{opacity:.3;cursor:not-allowed}.gentle,.footnote{color:#7a8b84;margin-top:18px;font-size:12px}.glow{filter:blur(3px);opacity:.55;border-radius:50%;position:absolute}.glow-a{background:#dfe8de;width:420px;height:420px;top:-130px;left:-150px}.glow-b{background:#eadfc9;width:300px;height:300px;bottom:-100px;right:-100px}.quiz-shell{padding:0 20px 30px}.topbar{letter-spacing:.1em;justify-content:space-between;align-items:center;width:min(960px,100%);height:76px;margin:auto;font-size:13px;font-weight:800;display:flex}.brand{color:var(--ink);cursor:pointer;background:0 0;border:0;font-family:Georgia,Noto Serif TC,serif;font-size:18px}.progress{background:#d9ded7;max-width:960px;height:3px;margin:auto}.progress i{background:var(--gold);height:100%;transition:width .35s;display:block}.question-card{width:min(800px,100%);margin:7vh auto 0}.q-meta{color:var(--sage);letter-spacing:.08em;align-items:center;gap:12px;font-size:12px;font-weight:800;display:flex}.q-meta span:nth-child(2){border-left:1px solid #c8d0cb;border-right:1px solid #c8d0cb;padding:0 12px}.q-meta span:last-child{color:var(--gold);margin-left:auto}.question-card h2{margin:25px 0 34px;font-family:Georgia,Noto Serif TC,PMingLiU,serif;font-size:clamp(27px,4vw,40px);font-weight:500;line-height:1.42}.options{gap:12px;display:grid}.option{border:1px solid var(--line);text-align:left;width:100%;color:var(--ink);cursor:pointer;background:#ffffffa8;border-radius:7px;grid-template-columns:42px 1fr 24px;align-items:center;padding:15px 18px;transition:all .18s;display:grid}.option:hover{background:#fff;border-color:#93a59a}.option b{background:#edf0eb;border-radius:50%;place-items:center;width:32px;height:32px;font-family:Georgia,serif;display:grid}.option span{line-height:1.55}.option em{opacity:0;font-style:normal}.option.selected{border-color:var(--ink);background:#fff;box-shadow:0 4px 18px #18342f14}.option.selected b{background:var(--ink);color:#fff}.option.selected em{opacity:1;color:var(--gold)}.nav-row{justify-content:space-between;margin-top:28px;display:flex}.footnote{text-align:center;margin-top:60px}.result-shell{padding:70px 20px}.result-hero{text-align:center;max-width:760px;margin:auto}.score-ring{border:1px solid #b9c6bd;border-radius:50%;place-content:center;width:170px;height:170px;margin:0 auto 28px;display:grid;position:relative}.score-ring:after{content:"";border:1px solid #dbc9a9;border-radius:50%;position:absolute;inset:9px}.score-ring strong{font:500 68px/1 Georgia,serif}.score-ring span{color:var(--sage);letter-spacing:.1em;font-size:12px}.result-hero h1{font-size:clamp(35px,6vw,58px)}.result-hero>p:not(.eyebrow){color:#556861;max-width:610px;margin:20px auto;line-height:1.8}.result-actions{justify-content:center;gap:10px;margin-top:28px;display:flex}.reflection{text-align:center;border-top:1px solid #bec8c1;border-bottom:1px solid #bec8c1;width:min(900px,100%);margin:80px auto 55px;padding:55px 30px}.reflection h2{font-family:Georgia,Noto Serif TC,serif;font-size:clamp(27px,4vw,42px);font-weight:500;line-height:1.5}.three-lines{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px;display:flex}.three-lines span{color:#52675f;background:#e9ede7;padding:10px 16px;font-size:13px}.review{width:min(800px,100%);margin:auto}.review>h2{margin-bottom:20px;font-family:Georgia,Noto Serif TC,serif;font-size:30px;font-weight:500}.review-item{border-top:1px solid #d4dbd6;grid-template-columns:40px 1fr 48px;gap:14px;padding:20px 0;display:grid}.review-item>span{background:#e6ebe6;border-radius:50%;place-items:center;width:32px;height:32px;font:700 14px Georgia,serif;display:grid}.review-item h3{margin:0 0 7px;font-size:15px}.review-item p{color:#586b64;margin:0;font-size:14px;line-height:1.6}.review-item small{color:#8b6530;margin-top:7px;display:block}.review-item>b{text-align:right;color:var(--sage)}.review-item.wrong>b{color:#9a7b58}@media (width<=600px){.welcome{padding-top:28px}.hero h1{font-size:54px}.facts span{padding:0 10px}.question-card{margin-top:4vh}.question-card h2{margin-bottom:25px}.option{grid-template-columns:38px 1fr 18px;padding:13px}.nav-row{gap:10px}.result-shell{padding-top:45px}.reflection{margin-top:55px;padding:42px 8px}.review-item{grid-template-columns:36px 1fr 38px}.result-actions{flex-direction:column;align-items:stretch}.result-actions button{width:100%}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
