.job-quiz{max-width:860px;margin:36px auto 100px;padding:clamp(24px,5vw,60px);background:#1e1e1e;border-radius:28px}.job-quiz button,.job-quiz a{font:inherit}.jq-intro,.jq-result{text-align:center}.jq-eyebrow{color:#e5f35b;letter-spacing:.08em;font-size:14px}.job-quiz h1{font-size:clamp(28px,4vw,46px);line-height:1.35;margin:20px 0}.job-quiz p{color:#b7b7b7;line-height:1.8}.job-quiz h1:focus{outline:none}.jq-party{display:flex;justify-content:center;gap:26px;margin:36px 0}.job-quiz .job-art{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;background:#292929;border-radius:18px}.job-quiz .job-art img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}.jq-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0}.jq-chips span{background:#303127;color:#e5e7be;border-radius:8px;padding:7px 12px;font-size:14px}.job-quiz .jq-primary{display:inline-block;background:#e5f35b;color:#191b0f;padding:17px 25px;border:0;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:bold}.job-quiz .jq-secondary{background:transparent;color:#bcbcbc;border:0;padding:14px;cursor:pointer}.jq-intro small{display:block;color:#8f8f8f;margin-top:28px;line-height:1.6}.jq-top{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#aaa}.jq-progress{height:6px;border-radius:8px;background:#353535;margin:12px 0 40px;overflow:hidden}.jq-progress span{display:block;height:100%;background:#e5f35b;transition:width .2s}.jq-question{margin-bottom:28px}.jq-answers{display:grid;gap:12px}.jq-answers button{display:flex;align-items:center;gap:16px;width:100%;padding:22px;text-align:left;color:#eee;background:#292929;border:1px solid transparent;border-radius:14px;cursor:pointer}.jq-answers button>span:first-child{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;background:#393939;border-radius:8px;color:#e5f35b}.jq-answers strong{flex:1;font-weight:normal;line-height:1.6}.jq-answers button>span:last-child{color:#969696}.jq-answers button:hover,.jq-answers button[aria-pressed=true]{background:#323426;border-color:#797e41}.job-quiz button:focus-visible,.job-quiz a:focus-visible{outline:2px solid #e5f35b;outline-offset:4px}.jq-primary:hover{filter:brightness(1.08)}.jq-secondary:hover{color:#e5f35b}.jq-footnote{font-size:13px;margin-top:28px}.jq-winner{padding:24px 0}.jq-winner-illustration{display:block;width:min(220px,60vw);height:auto;aspect-ratio:190/166;object-fit:contain;margin:0 auto 24px}.jq-winner>.job-art{width:108px;height:108px;margin-bottom:18px;background:#333525}.jq-winner>.job-art img{width:64px;height:64px}.jq-winner>span:not(.job-art){display:block;color:#aaa;font-size:14px}.jq-winner h2{font-size:32px;margin:12px 0;color:#e5f35b}.jq-reasons{text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 32px}.jq-reasons>div{min-width:0;padding:24px;background:#262626;border-radius:14px}.jq-reasons h3,.jq-also{font-size:17px}.jq-reasons h3{margin:0 0 12px;line-height:1.45}.jq-reasons p{font-size:15px;margin:0;line-height:1.7;word-break:keep-all;overflow-wrap:break-word}.jq-also{margin-top:48px;text-align:left}.jq-alternatives{display:grid;gap:12px;text-align:left}.jq-alternatives a{display:flex;align-items:center;gap:20px;background:#272727;border-radius:14px;padding:24px;text-decoration:none;color:#eee}.jq-alternatives a>div{flex:1;min-width:0}.jq-alternatives a>div>strong{display:block;line-height:1.4}.jq-alternatives a>span[aria-hidden]{display:flex;align-items:center;justify-content:center;flex:0 0 24px;margin-left:auto;align-self:center;line-height:1;font-size:22px}.jq-alternatives a:hover{background:#303127}.jq-alternatives .job-art{flex-shrink:0}.jq-alternatives p{font-size:14px;margin:8px 0 0;line-height:1.65;word-break:keep-all;overflow-wrap:break-word}.jq-actions{display:flex;justify-content:center;flex-wrap:wrap;margin-top:28px}@media(max-width:600px){.job-quiz{margin-top:16px;padding:24px 18px}.jq-party{gap:10px}.job-quiz .job-art{width:60px;height:60px}.jq-reasons{grid-template-columns:1fr;gap:12px}.jq-reasons>div{padding:20px}.jq-answers button{padding:16px;gap:12px}.jq-alternatives a{padding:16px;gap:12px}.jq-top{font-size:12px}}@media(prefers-reduced-motion:reduce){.jq-progress span{transition:none}}

progress.jq-progress{display:block;width:100%;border:0;appearance:none}progress.jq-progress::-webkit-progress-bar{background:#353535}progress.jq-progress::-webkit-progress-value{background:#e5f35b}progress.jq-progress::-moz-progress-bar{background:#e5f35b}

/* Skill marquee belongs to the job quiz introduction. */
.job-quiz .jq-skill-marquee{display:block;width:100%;max-width:560px;margin:36px auto;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.jq-skill-track{display:flex;width:max-content;animation:jq-skills-scroll 32s linear infinite}
.jq-skill-group{display:flex;flex:none;align-items:center;gap:26px;padding-right:26px}
.jq-skill-group .job-art{flex:none}
.jq-skill-marquee:hover .jq-skill-track{animation-play-state:paused}
@keyframes jq-skills-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){.jq-skill-group{gap:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){.jq-skill-track{animation:none;width:100%}.jq-skill-group{width:100%;justify-content:center;flex-wrap:wrap;padding:0}.jq-skill-group+.jq-skill-group{display:none}.job-quiz .jq-skill-marquee{mask-image:none}}

.jq-alternatives .jq-winner-illustration{width:80px;height:70px;flex:none;margin:0;object-fit:contain}

/* Collectible result card, with a quiet foil sweep. */
.jq-share-card{position:relative;isolation:isolate;overflow:hidden;max-width:450px;margin:0 auto;padding:26px 24px 22px;border:1px solid #c8bbdf40;border-radius:22px;background:radial-gradient(ellipse at 50% 45%,#61457866,transparent 56%),linear-gradient(145deg,#403553,#1c1927 55%,#302b40);box-shadow:inset 0 0 0 6px #ffffff05,0 20px 50px #0004}
.jq-share-card::before{content:"";position:absolute;inset:-70%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 43%,#e6d0ff08 47%,#fff3 50%,#c7e7ff0d 53%,transparent 57%);transform:translateX(-60%);animation:jq-foil 7s ease-in-out infinite}
.jq-share-card::after{content:"✦";position:absolute;top:35%;left:12%;color:#f4dfff;font-size:25px;text-shadow:280px 38px 0 #e4d6f8,20px 155px 0 #d9c7eb,260px 185px 0 #eddfff;pointer-events:none;animation:jq-twinkle 3s ease-in-out infinite alternate}
.jq-card-brand{display:flex;justify-content:space-between;gap:12px;margin-bottom:30px;font-size:10px;letter-spacing:.12em;color:#cabbdf}
.job-quiz .jq-share-card h1{font-size:clamp(22px,5vw,30px);margin:12px 0 6px;word-break:keep-all}
.jq-share-card .jq-eyebrow{font-size:12px;color:#cabbdf}
.jq-share-card .jq-winner{padding:20px 0 8px}
.jq-share-card .jq-winner-illustration{width:min(280px,100%);margin-bottom:22px;filter:drop-shadow(0 12px 20px #0005)}
.jq-share-card .jq-winner h2{font-size:32px;margin:12px 0 20px}
.jq-share-card .jq-chips{gap:7px;margin:0 0 14px}.jq-share-card .jq-chips span{font-size:12px;padding:6px 9px;background:#ffffff0c;color:#e1d7ed}
.jq-card-footer{border-top:1px solid #ffffff20;padding-top:18px;margin-top:8px;color:#b9accb;font-size:11px}
.jq-share-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:22px}.jq-share-actions button:disabled{opacity:.6;cursor:wait}
.job-quiz .jq-share-status{font-size:12px;min-height:22px;margin:10px 0 24px}
@keyframes jq-foil{0%,20%{transform:translateX(-60%)}65%,100%{transform:translateX(60%)}}
@keyframes jq-twinkle{from{opacity:.25}to{opacity:.85}}
@media(prefers-reduced-motion:reduce){.jq-share-card::before{animation:none;opacity:0}.jq-share-card::after{animation:none;opacity:.6}}
@media(max-width:420px){.jq-share-card{padding:22px 16px}.jq-card-brand{font-size:8px}.jq-share-card::after{display:none}}

.job-quiz .jq-question h1{font-size:clamp(24px,3vw,34px);line-height:1.5;word-break:keep-all;overflow-wrap:break-word;margin:0 0 16px}

.jq-question-scene{display:flex;align-items:flex-end;justify-content:center;gap:18px;min-height:110px;margin:0 auto 24px;padding:8px 12px 12px;position:relative;width:fit-content;max-width:100%}
.jq-question-scene::after{content:"";position:absolute;bottom:3px;left:5%;right:5%;height:12px;border-radius:50%;background:#0003;z-index:0}
.jq-question-scene img{position:relative;z-index:1;object-fit:contain;width:var(--sprite-width);height:var(--sprite-height);max-width:50vw;image-rendering:pixelated;flex-shrink:0}
.jq-scene-2 img:nth-child(2){margin-bottom:-4px}.jq-scene-0 img:last-child{margin-bottom:2px}
@media(max-width:600px){.jq-question-scene{margin-bottom:18px;gap:14px;min-height:100px}}

.jq-winner-illustration{aspect-ratio:782/642;border-radius:14px}.jq-share-card .jq-winner-illustration{width:min(340px,100%);image-rendering:auto}.jq-card-footer{line-height:1.8}.jq-card-footer span{font-size:10px;color:#a99cb9}.jq-alternatives .jq-winner-illustration{height:auto;aspect-ratio:782/642;border-radius:8px}

.job-quiz .jq-question h1{white-space:nowrap;word-break:normal;overflow-wrap:normal;width:100%;font-size:34px;line-height:1.5}

.jq-share-card .jq-winner-illustration{height:280px;aspect-ratio:auto;object-fit:contain;background:transparent;border-radius:0}.jq-alternatives .jq-winner-illustration{height:80px;aspect-ratio:auto;background:transparent;border-radius:0}

/* Shared spacing for every quiz question, independent of sprite size. */
.job-quiz:has(.jq-question){--jq-space:24px;padding:40px;box-sizing:border-box}
.job-quiz:has(.jq-question) .jq-top .jq-secondary{padding:8px 0}
.job-quiz:has(.jq-question) .jq-progress{margin:16px 0 var(--jq-space)}
.job-quiz:has(.jq-question) .jq-question{margin:0 0 var(--jq-space)}
.job-quiz:has(.jq-question) .jq-question-scene{height:110px;min-height:110px;box-sizing:border-box;margin:0 auto var(--jq-space);padding:8px 12px 12px}
.job-quiz:has(.jq-question) .jq-question h1{margin:0 0 16px}
.job-quiz:has(.jq-question) .jq-question p{margin:0}
.job-quiz:has(.jq-question) .jq-answers{gap:12px}
.job-quiz:has(.jq-question) .jq-answers button{padding:20px;gap:16px}
.job-quiz:has(.jq-question) .jq-footnote{margin:var(--jq-space) 0 0}
@media(max-width:600px){
 .job-quiz:has(.jq-question){--jq-space:20px;padding:24px}
 .job-quiz:has(.jq-question) .jq-answers button{padding:16px;gap:12px}
}

/* A narrow pearl highlight travels around the result card edge. */
@property --jq-border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.jq-card-border-glow{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--jq-border-angle),transparent 0% 12%,#cbdcff18 20%,#f4eaff99 25%,#d8c7ed24 30%,transparent 38% 62%,#d0defa18 70%,#eee1ff70 75%,#d8c7ed18 80%,transparent 88%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:jq-border-orbit 12s linear infinite}
@keyframes jq-border-orbit{to{--jq-border-angle:360deg}}
@media(prefers-reduced-motion:reduce){.jq-card-border-glow{animation:none;opacity:.45}}

.job-quiz.jq-shared-view{max-width:530px;padding:24px;background:transparent}.jq-shared-view .jq-actions{margin-top:24px}.jq-share-status input{display:block;width:100%;margin-top:12px;padding:12px;color:inherit;background:#292929;border:1px solid #777;border-radius:8px}

/* Compact question progress in the upper right. */
.job-quiz:has(.jq-question) .jq-top{margin-bottom:24px;gap:16px}
.jq-progress-dots{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-shrink:0}
.jq-progress-dots span{display:block;width:8px;height:8px;border-radius:99px;background:#ffffff30;transition:width .2s,background-color .2s}
.jq-progress-dots .is-complete{background:#ffffff70}
.jq-progress-dots .is-current{width:30px;background:#fff}
@media(max-width:600px){.jq-progress-dots{gap:6px}.jq-progress-dots .is-current{width:24px}.job-quiz:has(.jq-question) .jq-top{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.jq-progress-dots span{transition:none}}

/* Keep scene artwork close to the question with consistent visual weight. */
.job-quiz:has(.jq-question) .jq-top{margin-bottom:16px}
.job-quiz:has(.jq-question) .jq-question-scene{height:132px;min-height:132px;align-items:center;gap:24px;margin-bottom:20px;padding:8px 12px 12px}
.jq-question-scene img{width:calc(var(--sprite-width)*1.4);height:calc(var(--sprite-height)*1.4);max-width:28vw;max-height:112px;object-fit:contain}
@media(max-width:600px){
 .job-quiz:has(.jq-question) .jq-top{margin-bottom:12px}
 .job-quiz:has(.jq-question) .jq-question-scene{height:116px;min-height:116px;gap:18px;margin-bottom:16px}
 .jq-question-scene img{max-height:96px;max-width:24vw}
}

.jq-actions.jq-actions-split{justify-content:space-between;align-items:center;gap:16px;margin-top:40px}

.jq-question-scene img.jq-scale-1-5{zoom:1.5}