/* Career Blueprint, scoped under .qz. Built by tools/build_quiz.py from quiz-src/index.html. */
.qz{
  --canvas:#fffdf9;
  --surface:#ffffff;
  --ink:#17181c;
  --muted:#3d4049;
  --line:rgba(23,24,28,.12);
  --accent:#F5A524;
  --accent-text:#9a5800;
  --accent-ink:#17181c;
  --agree:#2e7d57;
  --disagree:#b23a52;
  --ring:#F5A524;
  --serif:"Google Sans","Google Sans Flex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Google Sans","Google Sans Flex",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
.qz{
    --canvas:#0e0f12;--surface:#17181c;--ink:#f2f1ee;--muted:#b8bac2;
    --line:rgba(255,255,255,.12);--accent:#F5A524;--accent-text:#F5A524;--accent-ink:#17181c;
    --agree:#6fcf9f;--disagree:#f08a9c;
  }

}
.qz *{box-sizing:border-box}
.qz{background:var(--canvas);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;}
.qz button{font:inherit;color:inherit;cursor:pointer}
.qz button:focus-visible,.qz a:focus-visible,.qz select:focus-visible{outline:none;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--ring)}
.qz .qz-wrap{max-width:760px;margin:0 auto;padding:40px 24px 80px}
.qz .label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qz h1,.qz h2,.qz h3{font-family:var(--serif);letter-spacing:-.02em;line-height:1.1;margin:0}
.qz h1{font-size:clamp(40px,7vw,68px);font-weight:600}
.qz h2{font-size:clamp(28px,4.5vw,40px);font-weight:600}
.qz h3{font-size:20px;font-weight:600}
.qz p{max-width:62ch}
.qz .lede{font-size:19px;color:var(--muted);margin:18px 0 28px}
.qz .btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:14px 26px;background:var(--ink);color:var(--canvas);font-weight:600;transition:all .15s ease-out}
.qz .btn:hover{transform:translateY(-1px)}
.qz .btn:active{transform:scale(.98)}
.qz .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.qz .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.qz .btn[disabled]{opacity:.35;pointer-events:none}
.qz .meta-row{display:flex;gap:28px;flex-wrap:wrap;margin:28px 0 36px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qz .meta-row b{display:block;font-family:var(--serif);font-size:26px;font-variant-numeric:tabular-nums}
.qz .stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0 30px}
.qz .stage{text-align:left;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);transition:all .15s ease-out}
.qz .stage:hover{border-color:var(--muted)}
.qz .stage:active{transform:scale(.98)}
.qz .stage[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.qz .stage small{display:block;color:var(--muted);font-size:13px}
.qz .notice{font-size:14px;color:var(--muted);margin-top:22px}
.qz .resume{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);margin-bottom:28px}
.qz .alert{padding:14px 18px;border-radius:12px;border:1px solid var(--disagree);color:var(--ink);margin-bottom:24px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.qz /* quiz */
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-variant-numeric:tabular-nums}
.qz .bar{height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.qz .bar i{display:block;height:100%;background:var(--accent);transition:width .25s ease-out}
.qz .q{min-height:52vh;display:flex;flex-direction:column;justify-content:center}
.qz .q h2{font-size:clamp(26px,4vw,36px);margin:12px 0 44px;max-width:22ch}
.qz .q.enter h2{animation:rise .25s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qz .scale{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px}
.qz .dots{display:flex;justify-content:space-between;align-items:center}
.qz .dot{border-radius:50%;background:transparent;border:2px solid;padding:0;transition:all .15s ease-out;position:relative}
.qz .dot:hover{transform:scale(1.08)}
.qz .dot:active{transform:scale(.95)}
.qz .dot[data-v="1"],.qz .dot[data-v="7"]{width:52px;height:52px}
.qz .dot[data-v="2"],.qz .dot[data-v="6"]{width:44px;height:44px}
.qz .dot[data-v="3"],.qz .dot[data-v="5"]{width:36px;height:36px}
.qz .dot[data-v="4"]{width:28px;height:28px;border-color:var(--muted)}
.qz .dot[data-v="1"],.qz .dot[data-v="2"],.qz .dot[data-v="3"]{border-color:var(--disagree)}
.qz .dot[data-v="5"],.qz .dot[data-v="6"],.qz .dot[data-v="7"]{border-color:var(--agree)}
.qz .dot[aria-pressed=true][data-v="1"],.qz .dot[aria-pressed=true][data-v="2"],.qz .dot[aria-pressed=true][data-v="3"]{background:var(--disagree)}
.qz .dot[aria-pressed=true][data-v="5"],.qz .dot[aria-pressed=true][data-v="6"],.qz .dot[aria-pressed=true][data-v="7"]{background:var(--agree)}
.qz .dot[aria-pressed=true][data-v="4"]{background:var(--muted)}
.qz .end{font-size:14px;font-weight:600}
.qz .end.l{color:var(--disagree)}
.qz .end.r{color:var(--agree)}
.qz .nav{display:flex;justify-content:space-between;align-items:center;margin-top:48px}
.qz .hint{font-size:13px;color:var(--muted)}
.qz kbd{font:12px var(--sans);padding:1px 6px;border:1px solid var(--line);border-radius:5px}
.qz /* loading */
.sk{background:linear-gradient(90deg,var(--line),transparent,var(--line));background-size:200% 100%;animation:sh 1.1s linear infinite;border-radius:8px}
@keyframes sh{to{background-position:-200% 0}}
.qz /* results */
.qz-hero{padding-bottom:28px;border-bottom:1px solid var(--line)}
.qz .code{font-family:var(--serif);font-size:clamp(64px,13vw,120px);font-weight:600;letter-spacing:-.04em;line-height:.9;margin:10px 0 6px}
.qz .code span{color:var(--accent)}
.qz .name{font-family:var(--serif);font-size:28px;font-style:italic;color:var(--muted)}
.qz section{padding:36px 0;border-bottom:1px solid var(--line)}
.qz section>h3{margin-bottom:18px}
.qz .axis{display:grid;grid-template-columns:110px 1fr 110px;gap:14px;align-items:center;margin:14px 0;font-size:14px}
.qz .axis .r{text-align:right}
.qz .axis b{font-variant-numeric:tabular-nums}
.qz .track{height:10px;border-radius:10px;background:var(--line);position:relative}
.qz .track i{position:absolute;top:0;bottom:0;border-radius:10px;background:var(--accent)}
.qz .track::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--muted);opacity:.5}
.qz .win{color:var(--ink);font-weight:600}
.qz .lose{color:var(--muted)}
.qz .two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.qz ul.clean{list-style:none;padding:0;margin:0}
.qz ul.clean li{padding:10px 0;border-top:1px solid var(--line)}
.qz ul.clean li:first-child{border-top:0}
.qz .careers{counter-reset:c;list-style:none;padding:0;margin:0}
.qz .careers li{counter-increment:c;display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:16px 0;border-top:1px solid var(--line)}
.qz .careers li:first-child{border-top:0}
.qz .careers li::before{content:counter(c,decimal-leading-zero);font-family:var(--serif);font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums;grid-row:span 2}
.qz .careers b{font-size:17px}
.qz .careers span{color:var(--muted);font-size:15px}
.qz .plan{display:grid;gap:0}
.qz .phase{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.qz .phase:first-child{border-top:0}
.qz .phase ul{margin:6px 0 0;padding-left:18px}
.qz .phase li{margin:4px 0}
.qz .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.qz .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--canvas);padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .2s ease-out;pointer-events:none}
.qz .toast.show{opacity:1}
.qz .fine{font-size:13px;color:var(--muted);margin-top:28px}
@media (max-width:600px){
.qz .qz-wrap{padding:28px 18px 64px}
.qz .scale{grid-template-columns:1fr;gap:10px}
.qz .scale .end{display:none}
.qz .ends-m{display:flex!important;justify-content:space-between}
.qz .dot[data-v="1"],.qz .dot[data-v="7"]{width:42px;height:42px}
.qz .dot[data-v="2"],.qz .dot[data-v="6"]{width:38px;height:38px}
.qz .dot[data-v="3"],.qz .dot[data-v="5"]{width:32px;height:32px}
.qz .dot[data-v="4"]{width:26px;height:26px}
.qz .two{grid-template-columns:1fr;gap:12px}
.qz .phase{grid-template-columns:1fr;gap:4px}
.qz .axis{grid-template-columns:76px 1fr 76px;font-size:13px}

}
.qz .ends-m{display:none;margin-top:10px}
@media print{
.qz .actions,.qz .toast{display:none}
.qz{background:#fff;color:#000}
.qz section{break-inside:avoid}

}


/* site chrome around the quiz */
.qz{background:var(--canvas)}
.qz-page .hero{padding:28px 0 24px}
.qz .code span,.qz .careers li::before{color:var(--accent-text)}
@media (prefers-color-scheme:dark){
  body.qz-page{--paper:#0e0f12;--cream:#17181c;--ink:#f2f1ee;--ink-soft:#b8bac2;--line:rgba(255,255,255,.12);color-scheme:dark}
  body.qz-page a:hover{background:rgba(245,165,36,.22)}
}
/* What you get / Why take it, on the start page */
.qz .qz-gets{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:-12px 0 32px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.qz .qz-gets-list{list-style:none;padding:0;margin:8px 0 0}
.qz .qz-gets-list li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.qz .qz-gets-list li:first-child{border-top:0}
.qz .qz-gets-list b{color:var(--ink);font-weight:500}
@media (max-width:600px){.qz .qz-gets{grid-template-columns:1fr;gap:16px}}
@media print{.qz-page>header,.qz-page>footer{display:none}}