:root{--cream:#f6f5e9;--sage:#e3edda;--sage2:#cadbc7;--green:#285c46;--green2:#397552;--ink:#214d39;--muted:#52705d;--white:#fff;--line:#dce3d4;--shadow:0 14px 40px rgba(40,92,70,.09)}
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:#edf0e7;color:var(--ink);font-family:ui-rounded,"Avenir Next",Avenir,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
    button{font:inherit;cursor:pointer}
    button:focus-visible{outline:3px solid #d9a94d;outline-offset:3px}
    .shell{width:min(760px,100%);margin:0 auto;padding:20px 14px 36px}
    .app{background:var(--cream);border:1px solid #e0e5d9;border-radius:28px;padding:12px;box-shadow:var(--shadow)}
    .hero{background:var(--sage);border-radius:22px;padding:clamp(20px,5vw,38px);overflow:hidden;position:relative}
    .brand{display:flex;align-items:center;gap:11px;margin-bottom:25px}
    .brand-icon{width:44px;height:44px;border-radius:14px;object-fit:cover;display:block;box-shadow:0 4px 10px rgba(40,92,70,.18)}
    .brand-name{font-weight:900;letter-spacing:.12em;font-size:1rem}
    .brand-sub{font-size:.7rem;letter-spacing:.15em;color:var(--muted)}
    .pill{margin-left:auto;background:#f7f8ef;color:var(--green);border-radius:99px;padding:7px 11px;font-size:.75rem;font-weight:750;white-space:nowrap}
    .kicker{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--green2);font-weight:850}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(2rem,7vw,3.25rem);line-height:1.04;letter-spacing:-.055em;margin:9px 0 15px;max-width:620px}
    h2{font-size:clamp(1.55rem,5vw,2.2rem);line-height:1.12;letter-spacing:-.035em;margin-bottom:10px}
    .lead{font-size:1.05rem;max-width:570px;color:#385c48}
    .mascot-wrap{display:flex;justify-content:center;margin:22px 0 10px}
    .mascot{width:170px;height:150px;position:relative;display:grid;place-items:center}
    .mascot .leaf{font-size:78px;filter:drop-shadow(0 8px 4px #b7c8ad)}
    .turtle{font-size:95px;position:absolute;bottom:3px;filter:drop-shadow(0 8px 3px #b7c8ad)}
    .spark{position:absolute;font-size:22px;color:#d2a947}
    .s1{top:5px;left:12px}.s2{top:18px;right:5px}.s3{bottom:25px;right:0}
    .meta{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}
    .meta span{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--green);font-weight:650}
    .btn{border:0;border-radius:14px;padding:13px 18px;font-weight:800;transition:transform .15s,filter .15s}
    .btn:hover{filter:brightness(.97);transform:translateY(-1px)}
    .btn-primary{background:var(--green);color:white;width:100%;box-shadow:0 6px 0 #1e4735}
    .btn-secondary{background:white;color:var(--green);border:1px solid var(--line)}
    .content{padding:24px clamp(8px,3vw,22px) 12px}
    .progress-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.85rem;font-weight:800;margin-bottom:10px}
    .progress-track{height:7px;border-radius:99px;background:var(--sage2);overflow:hidden;margin-bottom:24px}
    .progress-fill{height:100%;background:var(--green2);border-radius:99px;transition:width .25s}
    .question-emoji{width:66px;height:66px;display:grid;place-items:center;background:#e0ead8;border-radius:22px;font-size:34px;margin:0 auto 16px}
    .question-title{text-align:center}
    .question-note{text-align:center;color:var(--muted);font-size:.92rem;margin-bottom:23px}
    .options{display:grid;gap:10px}
    .option{display:flex;align-items:center;gap:12px;text-align:left;width:100%;background:white;color:#294b39;border:1px solid #e2e5d9;border-radius:16px;padding:14px;line-height:1.4}
    .option:hover{border-color:#8cae91}
    .option.selected{background:#e0ead8;border:2px solid var(--green2);padding:13px}
    .letter{flex:0 0 32px;width:32px;height:32px;border-radius:10px;background:#f0f1e8;display:grid;place-items:center;font-weight:850;color:#315640}
    .selected .letter{background:var(--green2);color:white}
    .nav{display:flex;gap:10px;margin-top:22px}
    .nav .btn-secondary{min-width:100px}
    .nav .btn-primary{flex:1}
    .tiny{text-align:center;color:var(--muted);font-size:.78rem;margin:15px 0 0}
    .result{text-align:center}
    .result-mascot{font-size:78px;margin:2px 0 8px}
    .result-tag{display:inline-block;background:#d9e9d0;color:var(--green);padding:7px 12px;border-radius:99px;font-size:.75rem;font-weight:900;letter-spacing:.05em;margin-bottom:13px}
    .result-desc{color:#385c48;font-size:1rem}
    .mission{background:white;border:1px solid var(--line);padding:18px;border-radius:18px;text-align:left;margin:20px 0}
    .mission h3{margin-bottom:7px;font-size:1.08rem}
    .answers-review{text-align:left;margin:24px 0}
    .review-item{display:grid;grid-template-columns:28px 1fr;gap:9px;padding:11px 0;border-bottom:1px solid var(--line)}
    .review-item:last-child{border:0}
    .review-q{font-weight:750;font-size:.9rem}
    .review-a{font-size:.85rem;color:var(--muted);margin-top:3px}
    .disclaimer{background:#e3edda;border-radius:16px;padding:16px;text-align:left;color:#385c48;font-size:.9rem}
    .footer{padding:22px 12px 10px}
    .footer-top{display:flex;gap:12px;align-items:flex-start}
    .footer-heart{font-size:24px}
    .footer h3{margin-bottom:5px;font-size:1rem}
    .footer p{color:var(--muted);font-size:.87rem;margin-bottom:0}
    .footer-line{border:0;border-top:1px solid var(--line);margin:18px 0 12px}
    .copyright{text-align:center;color:var(--muted);font-size:.75rem}
    [hidden]{display:none!important}
    @media(min-width:620px){.app{padding:14px}.hero{padding:34px 38px}.mascot{width:190px;height:160px}.content{padding:28px 24px 14px}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}