@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root{--green:#164b3d;--deep:#102f29;--lime:#a8c9a6;--gold:#c7a76a;--ink:#1d2925;--muted:#718079;--paper:#f4f6f1}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 10%,#e4eee3 0,transparent 34%),var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 960px)/2));border-bottom:1px solid #dfe6de;background:#ffffffc9}.brand{display:flex;align-items:center;gap:10px;color:var(--green);text-decoration:none}.brand img{width:43px;height:43px}.brand span{display:grid;letter-spacing:2px}.brand b{font-size:15px}.brand small{font-size:9px;letter-spacing:3px;color:#78877d}.top-tag,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#788a7e}.shell{max-width:760px;margin:42px auto;padding:0 18px}.panel{background:#fff;border:1px solid #e4e9e2;border-radius:22px;padding:clamp(24px,5vw,54px);box-shadow:0 18px 60px #18392b0c}.hero{background:linear-gradient(145deg,#fff 65%,#f0f6ef)}h1{font:700 clamp(36px,7vw,56px)/1.12 'Playfair Display',serif;letter-spacing:-1px;margin:18px 0}h1 em{font-style:normal;color:var(--green)}.lead{color:#68766e;line-height:1.75;max-width:570px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.stats div,.result-grid div{background:#f4f7f2;padding:16px;border-radius:13px;display:grid;gap:5px}.stats strong{font:700 25px 'Playfair Display';color:var(--green)}.stats span,.result-grid span{font-size:12px;color:var(--muted)}.notice{background:#f7f8f4;border-left:3px solid var(--gold);padding:14px 16px;font-size:12px;line-height:1.7;color:#66736b;border-radius:0 10px 10px 0;margin:22px 0}.notice b{color:#34483d}.name-label{display:block;font-size:12px;font-weight:700;margin:24px 0 8px}input{width:100%;border:1px solid #dce4db;border-radius:10px;padding:14px;font:inherit;outline:none}input:focus{border-color:var(--green)}button{border:0;border-radius:11px;padding:14px 19px;font:600 14px 'DM Sans';cursor:pointer;transition:.2s}button:active{transform:scale(.98)}.primary{background:var(--green);color:white}.primary:hover{background:var(--deep)}#start{width:100%;margin-top:14px;display:flex;justify-content:space-between;align-items:center}.secondary{background:#edf2ec;color:var(--green)}.tiny{font-size:11px;color:#91a097;line-height:1.5}.center{text-align:center}.hidden{display:none!important}.quiz-head{display:flex;justify-content:space-between;align-items:center}.progress-label{font-weight:700;margin-top:7px}.timer{font-variant-numeric:tabular-nums;background:#f2f5f0;border-radius:9px;padding:10px 13px;color:var(--green);font-weight:700}.timer.warn{background:#fff0e8;color:#b44b2d}.progress{height:6px;background:#edf1ec;border-radius:8px;margin:22px 0 32px;overflow:hidden}.progress span{display:block;height:100%;width:5%;background:linear-gradient(90deg,var(--green),#8eb58d);transition:width .25s}.question-wrap{min-height:330px}.q-number{font-size:12px;color:var(--gold);font-weight:700;letter-spacing:2px}h2{font:600 clamp(22px,4vw,29px)/1.35 'Playfair Display',serif;margin:12px 0 24px}.visual{font-size:28px;letter-spacing:8px;text-align:center;padding:18px;background:#f5f8f3;border-radius:12px;margin-bottom:18px;color:var(--green)}.answers{display:grid;gap:10px}.answer{display:flex;gap:12px;align-items:center;text-align:left;background:#fff;border:1px solid #e0e7df;color:#34443b;padding:14px;border-radius:11px}.answer .letter{width:27px;height:27px;border-radius:8px;background:#f0f4ef;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--green);flex-shrink:0}.answer.selected{border-color:var(--green);background:#f1f7f0;box-shadow:inset 0 0 0 1px var(--green)}.answer.selected .letter{background:var(--green);color:white}.quiz-foot{display:flex;justify-content:space-between;gap:12px;margin-top:30px}.quiz-foot button{min-width:130px}.quiz-foot button:disabled{opacity:.35;cursor:not-allowed}.score-ring{width:160px;height:160px;margin:28px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) var(--score,0%),#edf1eb 0);position:relative}.score-ring:before{content:'';position:absolute;inset:10px;background:white;border-radius:50%}.score-ring div{position:relative;text-align:center}.score-ring strong{font:700 43px 'Playfair Display';color:var(--green)}.score-ring span{font-size:13px;color:var(--muted)}#result{text-align:center}.result-copy{max-width:520px;margin:auto;color:#6c7b71;line-height:1.7}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}.result-grid b{font-size:22px;color:var(--green)}#result h3{text-align:left;font:600 18px 'Playfair Display'}.breakdown{display:grid;gap:12px;text-align:left}.barrow{display:grid;grid-template-columns:110px 1fr 42px;gap:10px;align-items:center;font-size:12px}.bar{height:7px;background:#edf1eb;border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:#6f9a79}.actions{display:flex;gap:10px;justify-content:center;margin:28px 0 12px}footer{text-align:center;color:#9aa69e;font-size:11px;padding:26px 12px}footer span{padding:0 7px}@media(max-width:520px){.shell{margin:20px auto}.topbar{height:65px}.top-tag{font-size:8px;letter-spacing:1px}.stats{gap:7px}.stats div{padding:12px 9px}.stats span{font-size:10px}.quiz-foot button{min-width:0;flex:1}.panel{border-radius:17px}.barrow{grid-template-columns:90px 1fr 34px}}
