@font-face{font-family:Tajawal;src:url('/assets/quiz-fonts/tajawal-400.ttf') format('truetype');font-weight:400;font-display:swap}
    @font-face{font-family:Tajawal;src:url('/assets/quiz-fonts/tajawal-500.ttf') format('truetype');font-weight:500;font-display:swap}
    @font-face{font-family:Tajawal;src:url('/assets/quiz-fonts/tajawal-700.ttf') format('truetype');font-weight:700;font-display:swap}
    @font-face{font-family:Tajawal;src:url('/assets/quiz-fonts/tajawal-800.ttf') format('truetype');font-weight:800;font-display:swap}
    :root{--forest:#173e32;--forest2:#2e624b;--gold:#ae8c47;--ink:#263b34;--muted:#69776e;--cream:#f6f1e8;--panel:#fffdf8;--line:#e5dfd2;--mint:#e6eee6;--shadow:0 20px 55px rgba(31,50,37,.12)}
    *{box-sizing:border-box}
    html{min-height:100%;background:var(--cream)}
    body{margin:0;font-family:Tajawal,Tahoma,Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 3% 10%,#e7e9db 0,transparent 31%),radial-gradient(circle at 95% 75%,#eee3ca 0,transparent 30%),var(--cream);min-height:100vh;line-height:1.7}
    button,input,a{font:inherit}
    button{cursor:pointer}
    button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c4a76a;outline-offset:3px}
    button:disabled{cursor:not-allowed;opacity:.45}
    [hidden]{display:none!important}
    .shell{width:min(100%,1000px);margin:0 auto;padding:22px 22px 60px}
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
    .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--forest)}
    .mark{width:46px;height:46px;flex-shrink:0;background:var(--forest);color:#e6cb87;border-radius:15px;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:17px;font-weight:800;letter-spacing:0;direction:ltr;white-space:nowrap;box-shadow:0 8px 20px #24453533}
    .brandtext{display:flex;flex-direction:column;line-height:1.2}
    .brandtext strong{font-size:12px;letter-spacing:1.1px;direction:ltr;text-align:right}
    .brandtext small{font-size:11px;color:#737d70;margin-top:5px}
    .preview{font-size:11px;font-weight:750;letter-spacing:.2px;background:#fff5dc;color:#7d5d1d;border:1px solid #e7d6a5;border-radius:99px;padding:6px 10px;white-space:nowrap}
    .stage{display:grid;grid-template-columns:1fr 305px;align-items:stretch;gap:20px}
    .main-card{background:var(--panel);border:1px solid #e9e1d4;border-radius:30px;box-shadow:var(--shadow);padding:clamp(22px,4vw,44px);min-height:560px;position:relative;overflow:hidden}
    .main-card::before{content:"";position:absolute;top:0;right:0;width:165px;height:5px;background:linear-gradient(90deg,var(--forest2),#c8a65b);border-bottom-left-radius:6px}
    .aside{border-radius:30px;background:linear-gradient(155deg,#143b30,#255d47);color:#fff;padding:30px 24px;min-height:560px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
    .aside::before,.aside::after{content:"";position:absolute;border:1px solid #ffffff25;border-radius:50%;width:330px;height:330px;left:-160px;top:-140px}
    .aside::after{width:240px;height:240px;left:auto;right:-145px;top:auto;bottom:-100px}
    .aside-content{z-index:1}
    .aside-kicker{font-size:12px;color:#ddc686;letter-spacing:1.5px;font-weight:700}
    .aside h2{font-size:26px;line-height:1.5;margin:17px 0;color:#fff}
    .aside p{color:#e1e9dd;font-size:14px}
    .aside-art{display:flex;align-items:center;justify-content:center;gap:8px;margin:25px 0;position:relative;z-index:1}
    .aside-art span{display:grid;place-items:center;width:68px;height:68px;border:1px solid #ffffff44;background:#ffffff11;border-radius:22px;font-size:32px;transform:rotate(5deg)}
    .aside-art span:nth-child(2){transform:rotate(-7deg) translateY(-20px);background:#ffffff20}
    .aside-art span:nth-child(3){transform:rotate(7deg)}
    .aside-footer{font-size:11px;color:#f6e6c2;position:relative;z-index:1;border-top:1px solid #ffffff35;padding-top:15px}
    .eyebrow{font-weight:800;color:var(--gold);font-size:12px;letter-spacing:.2px}
    h1{font-size:clamp(31px,4vw,49px);line-height:1.36;letter-spacing:-1.1px;color:var(--forest);margin:16px 0 14px}
    h2{font-size:clamp(23px,3vw,31px);color:var(--forest);line-height:1.5;margin:12px 0}
    p{margin:0 0 16px}
    .lead{font-size:17px;color:#516057;max-width:520px}
    .goldrule{height:3px;width:60px;border-radius:99px;background:#b99c5c;margin:21px 0}
    .benefits{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 30px}
    .pill{border:1px solid #e3e0d5;border-radius:100px;padding:6px 11px;font-size:12px;background:#faf7f0;color:#51685a;font-weight:700}
    .form-label{display:block;font-weight:750;font-size:13px;color:#3a4f43;margin:0 0 8px}
    .name{width:100%;border:1px solid #d7daca;background:#fff;padding:14px 16px;border-radius:15px;font-size:16px;color:var(--forest)}
    .gender{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:8px 0 24px}
    .gender button{border:1px solid #dadfd5;background:#fff;color:#496153;padding:12px;border-radius:14px;font-weight:700}
    .gender button.active{border-color:var(--forest);background:var(--mint);color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}
    .btn{border:0;border-radius:16px;padding:14px 21px;display:inline-flex;justify-content:center;align-items:center;gap:8px;font-weight:750;transition:transform .15s,box-shadow .15s}
    .btn:hover:not(:disabled){transform:translateY(-1px)}
    .btn-primary{background:var(--forest);color:#fff;box-shadow:0 11px 22px #1d45352a}
    .btn-secondary{background:#edf2e9;color:var(--forest);border:1px solid #d3ded3}
    .btn-outline{background:transparent;color:var(--forest);border:1px solid #cbd7cb}
    .btn-plain{background:transparent;color:#637467;padding:10px}
    .btn-block{width:100%}
    .fine{font-size:12px;color:#788179;margin-top:13px}
    .progress-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:700}
    .progress{height:7px;background:#e9eee5;border-radius:99px;overflow:hidden;margin:12px 0 32px}
    .progress > div{height:100%;width:0;background:linear-gradient(90deg,#bd9b57,#2b664d);border-radius:99px;transition:width .25s}
    .qtitle{font-size:clamp(23px,3.5vw,32px);line-height:1.55;font-weight:800;margin:0 0 26px;color:var(--forest)}
    .choices{display:grid;gap:11px}
    .choice{width:100%;text-align:right;border:1px solid #e0e3d9;background:#fff;color:#354a3d;padding:15px 17px;border-radius:16px;display:flex;gap:13px;align-items:center;transition:background .15s,border-color .15s,transform .15s}
    .choice:hover{background:#f8faf4;border-color:#9cbaa5}
    .choice.selected{background:#e8f0e8;border-color:#2e654d;box-shadow:inset 0 0 0 1px #2e654d}
    .choice .choice-mark{width:27px;height:27px;border-radius:50%;border:1px solid #cad6cb;color:#668172;display:grid;place-items:center;flex-shrink:0;font-size:12px;font-weight:800}
    .choice.selected .choice-mark{background:var(--forest);color:white;border-color:var(--forest)}
    .qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
    .qnav .btn{min-width:112px}
    .qhint{font-size:13px;color:#627669;margin:12px 0 0}
    .teaser{padding:26px;border-radius:23px;background:linear-gradient(145deg,#eaf1e8,#faf2df);border:1px solid #dce5d8;margin:24px 0}
    .teaser h3{font-size:19px;color:var(--forest);margin:0 0 6px}
    .result-kicker{font-size:13px;font-weight:850;color:var(--gold)}
    .result-art{display:block;width:100%;height:auto;max-height:390px;object-fit:cover;object-position:center 40%;border:1px solid #d7c49a;border-radius:18px;margin:15px 0 22px;background:#efe6d7}
    .result-art[hidden]{display:none}
    .result-head{display:flex;align-items:center;gap:18px;margin:14px 0 19px}
    .animal{height:92px;width:92px;border-radius:27px;background:linear-gradient(150deg,#e7efdf,#f5e8ce);border:1px solid #e0dbbd;display:grid;place-items:center;font-size:49px;flex-shrink:0}
    .result-head h1{font-size:36px;margin:0 0 4px}
    .result-sub{font-size:13px;color:#7f825f;font-weight:750;margin:0}
    .tagline{font-size:18px;color:#435d4d;font-weight:800;border-right:3px solid #bc9e60;padding-right:15px;margin:18px 0 22px}
    .insight{background:#f1f5ee;border:1px solid #e0e9dd;padding:18px;border-radius:18px;margin:14px 0}
    .insight.blind{background:#faf5e9;border-color:#ece1c9}
    .insight h3{margin:0 0 6px;color:var(--forest);font-size:15px}
    .insight p{margin:0;font-size:14px}
    .partner{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:15px 2px;margin-bottom:20px}
    .partner strong{color:var(--forest)}
    .partner-icon{background:#eee8da;border-radius:12px;padding:10px;font-size:24px}
    .lockbox{border:1px dashed #c8b88b;background:#fcf8ee;border-radius:20px;padding:20px;margin:25px 0}
    .lockbox h3{margin:0 0 8px;color:#526344;font-size:18px}
    .lockbox p{font-size:13px;color:#627465;margin:0 0 9px}
    .lock-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
    .lock-chips span{font-size:11px;border-radius:20px;padding:5px 8px;background:#eee8da;color:#6b644d}
    .cta-stack{display:grid;gap:10px}
    .result-disclaimer{font-size:11px;color:#7a8078;margin:20px 0 0}
    .hybrid-note{padding:15px;border-radius:15px;background:#f6eede;border:1px solid #e7d8b9;margin:14px 0;font-size:14px;color:#625439}
    .qual-summary{background:#eff5ed;border:1px solid #d6e5d5;border-radius:18px;padding:16px;margin:18px 0;color:#325847}
    .qual-summary p{font-size:13px;margin:6px 0 0}
    .sticky-cta{display:none}
    .share-download{margin-top:10px;font-size:13px}
    .card-preview{display:block;width:100%;max-height:52dvh;object-fit:contain;border-radius:15px;margin:10px auto;border:1px solid #dacfaf;background:#173e32}
    .finish-row{display:flex;justify-content:space-between;align-items:center;margin:25px 0 0}
    .finish-row a{font-size:12px;color:#52765d}
    .overlay{position:fixed;inset:0;background:#18291ecc;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:12px}
    .sheet{background:#fffcf6;border-radius:26px 26px 20px 20px;width:min(100%,510px);padding:25px;box-shadow:0 30px 65px #071b104e;max-height:calc(100dvh - 24px);overflow-y:auto}
    .sheet-header{display:flex;justify-content:space-between;align-items:center}
    .sheet h2{font-size:23px;margin:0}
    .sheet p{color:#657268;font-size:14px;margin-top:8px}
    .close{border:0;background:#ecede8;border-radius:50%;width:34px;height:34px;font-size:19px;color:#506354}
    .sheet-actions{display:grid;gap:10px;margin-top:20px}
    .callout{background:#f5eddf;border-right:3px solid #bd9b57;padding:12px;border-radius:9px;font-size:12px;color:#6c5d40;margin:14px 0}
    .toast{position:fixed;left:50%;bottom:27px;transform:translateX(-50%);z-index:100;background:#173d32;color:#fff;padding:12px 18px;border-radius:14px;box-shadow:0 12px 34px #10291d55;min-width:200px;text-align:center;font-size:13px}
    .footnote{margin-top:24px;text-align:center;color:#7b8177;font-size:11px}
    @media(max-width:800px){.stage{grid-template-columns:1fr}.aside{min-height:auto;padding:20px 24px;display:none}.main-card{min-height:560px}.shell{padding:14px 13px 42px}.topbar{margin-bottom:15px}}
    @media(max-width:480px){.main-card{border-radius:23px;padding:23px 19px;min-height:calc(100dvh - 115px)}.brandtext strong{font-size:10px}.brandtext small{font-size:10px}.mark{width:41px;height:41px}.preview{font-size:10px}.result-head h1{font-size:27px}.animal{height:75px;width:75px;border-radius:22px;font-size:40px}.choice{padding:11px 12px;font-size:14px;min-height:55px}.qtitle{margin-bottom:17px}.progress{margin:10px 0 23px}.qnav .btn{min-width:0}.shell{padding-bottom:25px}#viewResult{padding-bottom:85px}.sticky-cta:not([hidden]){display:block;position:fixed;right:0;left:0;bottom:0;z-index:20;background:#fffdf8f5;box-shadow:0 -6px 25px #203b2b24;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}.sticky-cta .btn{max-width:610px;margin:0 auto;display:flex}}
    @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
  
.quiz-links{display:flex;gap:16px;flex-wrap:wrap;margin:16px 0;font-size:14px}.quiz-links a{color:#173e32}.quiz-status{color:#7d5d1d;font-size:14px}.sheet a{color:inherit}.choice{text-align:start}.result-head h2{font-size:clamp(27px,3vw,36px)}html[dir=ltr] .tagline{border-right:0;border-left:3px solid #bc9e60;padding-left:15px}html[dir=ltr] .brandtext strong{text-align:left}