/* THE AI LITERACY QUIZ, on the cover (7 Oct 2026, Victor: "staged in html in the cover, desktop and mobile, as a ready to click MCQ: the user
   just clicks an option and clicks submit for the next question ... drop the MS Word charade ... keep it sexy and charming").
   Feeling: lit glass in the dark, a calm game show. One focal point: the live question and its five options. House grammar from
   .hx-doors .blk (m.vdr.me): glass body with a colour wash from a corner, a 2px glowing top edge, a gradient rim on the selected
   option, a huge outline numeral bleeding off the corner (here the question number), mono kicker, Jost display, staged entrance.
   Colour: the Scientist purple (150,80,225) with the Designer blue (47,120,255) as its second note; the LinkedIn blue on the unlock;
   green for what you gain. Gold is for money only, so none here. Everything is scoped to .qz-wrap, .qz and #qz-dlg. */

/* ---------- the card ---------- */
.qz-wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto 0 0;padding:0 var(--gut,24px) 28px clamp(28px,3.4vw,64px)}
.qz{--bc:150,80,225;--bl:47,120,255;--disp:"Jost",Futura,"Century Gothic",sans-serif;--mono2:"IBM Plex Mono",ui-monospace,Menlo,monospace;--sans2:"IBM Plex Sans",-apple-system,system-ui,sans-serif;
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(22px,3.6vw,56px);align-items:center;
  padding:clamp(22px,2.9vw,40px);border-radius:28px;color:#f2efe8;font-family:var(--sans2);
  background:radial-gradient(90% 130% at 100% 0%,rgba(var(--bc),.30),transparent 58%),radial-gradient(70% 90% at 0% 100%,rgba(var(--bl),.14),transparent 62%),linear-gradient(180deg,rgba(21,15,58,.88),rgba(8,8,32,.94));
  border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 44px 90px -44px rgba(var(--bc),.7)}
.qz::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,rgb(var(--bc)),rgba(var(--bl),.7) 55%,transparent 92%);box-shadow:0 0 22px rgba(var(--bc),.9)}
.qz-num{position:absolute;right:clamp(14px,2.4vw,34px);bottom:-.17em;z-index:-1;pointer-events:none;font:700 clamp(150px,17vw,250px)/1 var(--disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(var(--bc),.38)}
.qz-copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.qz-kick{margin:0;align-self:flex-start;font:500 10.5px/1 var(--mono2);letter-spacing:.2em;text-transform:uppercase;padding:7px 12px 7px 13px;border-radius:999px;color:rgb(206,176,255);background:rgba(var(--bc),.16);box-shadow:inset 0 0 0 1px rgba(var(--bc),.4)}
.qz-title{margin:0;font:600 clamp(30px,3.5vw,50px)/1.05 var(--disp);letter-spacing:-.015em;color:#f6f3ec;text-wrap:balance}
.qz-title span{background:linear-gradient(100deg,#c9a6ff,#7fb2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.qz-sub{margin:0;max-width:42ch;font:400 clamp(15px,1.25vw,17.5px)/1.55 var(--sans2);color:#cfcbc2}
.qz-meter{display:flex;align-items:flex-end;gap:6px;height:34px;width:min(230px,100%);margin-top:6px}
.qz-meter i{display:block;flex:1;border-radius:3px 3px 1px 1px;background:linear-gradient(180deg,rgba(var(--bc),.9),rgba(var(--bl),.45));opacity:.85}
.qz-meter i:nth-child(1){height:7px}.qz-meter i:nth-child(2){height:11px}.qz-meter i:nth-child(3){height:15px}.qz-meter i:nth-child(4){height:19px}.qz-meter i:nth-child(5){height:24px}.qz-meter i:nth-child(6){height:29px}.qz-meter i:nth-child(7){height:34px}
.qz-meter-l{display:flex;justify-content:space-between;width:min(230px,100%);margin-top:7px;font:500 10px/1 var(--mono2);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.qz-trust{margin:8px 0 0;font:500 11px/1.5 var(--mono2);letter-spacing:.08em;color:rgba(255,255,255,.55)}

/* ---------- the live question ---------- */
.qz-panel{position:relative;min-width:0;padding:clamp(16px,2vw,26px);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -30px rgba(0,0,0,.8);backdrop-filter:blur(10px)}
.qz-prog{display:flex;gap:6px;margin-bottom:14px}
.qz-prog i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .35s,box-shadow .35s}
.qz-prog i.on{background:linear-gradient(90deg,rgb(var(--bc)),rgb(var(--bl)))}
.qz-prog i.now{box-shadow:0 0 12px rgba(var(--bl),.9)}
.qz-step{margin:0 0 8px;font:500 10.5px/1 var(--mono2);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.qz-q{margin:0 0 16px;font:600 clamp(21px,2.1vw,28px)/1.18 var(--disp);letter-spacing:-.005em;color:#f6f3ec}
.qz-opts{display:grid;gap:9px}
.qo{position:relative;display:flex;align-items:center;gap:13px;width:100%;min-height:52px;padding:11px 44px 11px 12px;text-align:left;font:400 clamp(14.5px,1.15vw,16px)/1.4 var(--sans2);color:#e9e6de;cursor:pointer;border-radius:15px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);transition:border-color .22s,background .22s,box-shadow .22s,transform .22s}
.qo b{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font:600 12px var(--mono2);color:#cdb6ff;background:rgba(var(--bc),.2);transition:background .22s,color .22s}
.qo:hover{border-color:rgba(var(--bc),.75);background:rgba(var(--bc),.11);transform:translateY(-1px)}
.qo:focus-visible{outline:2px solid #9a6bff;outline-offset:2px}
.qo[aria-checked="true"]{color:#fff;border-color:rgba(150,170,255,.95);background:linear-gradient(135deg,rgba(var(--bc),.34),rgba(var(--bl),.26));box-shadow:0 0 0 1px rgba(150,170,255,.55),0 16px 34px -18px rgba(110,90,255,.95)}
.qo[aria-checked="true"] b{color:#fff;background:linear-gradient(135deg,rgb(var(--bc)),rgb(var(--bl)))}
.qo::after{content:"";position:absolute;right:16px;top:50%;width:11px;height:6px;margin-top:-6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .22s cubic-bezier(.2,.9,.3,1.4)}
.qo[aria-checked="true"]::after{transform:rotate(-45deg) scale(1)}
.qz-bottom{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px}
.qz-back{padding:10px 4px;font:500 11px/1 var(--mono2);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);background:none;border:0;cursor:pointer}
.qz-back:hover{color:#fff}.qz-back:disabled{visibility:hidden}
.qz-submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:150px;min-height:50px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font:600 15px/1 var(--sans2);letter-spacing:.01em;color:#fff;
  background:linear-gradient(135deg,#7b3fe0,#4a8fff);box-shadow:0 16px 34px -12px rgba(110,80,255,.95);transition:transform .2s,box-shadow .2s,opacity .25s,filter .25s}
.qz-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 20px 40px -12px rgba(110,90,255,1)}
.qz-submit:disabled{cursor:not-allowed;opacity:.38;filter:saturate(.5);box-shadow:none}
.qz-submit svg{width:16px;height:16px}
.qz-submit:focus-visible,.qz-back:focus-visible{outline:2px solid #9a6bff;outline-offset:3px}
.qz-submit.ready{animation:qzready .9s ease-out 1}
@keyframes qzready{0%{box-shadow:0 0 0 0 rgba(110,90,255,.8)}100%{box-shadow:0 0 0 18px rgba(110,90,255,0)}}
.qz-state{padding:8px 2px 4px}
.qz-state h3{margin:0 0 6px;font:600 clamp(24px,2.6vw,34px)/1.1 var(--disp);color:#f6f3ec}
.qz-state p{margin:0 0 16px;color:#cfcbc2}
.qz-state .qz-tag{font:500 11px/1.3 var(--mono2);letter-spacing:.16em;text-transform:uppercase;color:rgb(206,176,255);margin-bottom:10px}
.qz-acts2{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.qz-spin{width:26px;height:26px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:#9a6bff;animation:qzspin .8s linear infinite;margin:6px 0 14px}
@keyframes qzspin{to{transform:rotate(360deg)}}

/* staged entrance: kicker, title, subtitle, panel (a film title card), once */
.qz-kick,.qz-title,.qz-sub,.qz-meter,.qz-meter-l,.qz-trust,.qz-panel{animation:qzrise .7s cubic-bezier(.2,.8,.2,1) backwards}
.qz-title{animation-delay:.08s}.qz-sub{animation-delay:.16s}.qz-meter,.qz-meter-l,.qz-trust{animation-delay:.24s}.qz-panel{animation-delay:.18s}
@keyframes qzrise{from{opacity:0;transform:translateY(14px)}}

/* the old four door cards are paused (Victor, 7 Oct 2026: "pause all cards to only show this quiz"). Delete this rule to bring them back. */
.hx-doors > .wrap{display:none!important}

@media (max-width:900px){
  .qz{grid-template-columns:1fr;gap:16px;align-items:start}
  .qz-copy{gap:10px}.qz-sub,.qz-meter,.qz-meter-l{display:none}
  .qz-title{font-size:clamp(27px,7.4vw,34px)}
  .qz-num{bottom:auto;top:-.1em;right:10px;font-size:130px}
}
@media (max-width:760px){
  html body .hx-doors{display:flex;flex-direction:column}
  html body .hx-doors > .qz-wrap{order:-2;padding:12px 14px 4px}
  .qz{padding:18px 14px 16px;border-radius:22px}
  .qz-panel{padding:14px 12px 14px;border-radius:18px}
  .qo{min-height:54px;padding:10px 40px 10px 10px;gap:11px}
  .qz-submit{flex:1;min-width:0}
  .qz-trust{margin-top:2px}
}
@media (prefers-reduced-motion:reduce){.qz-kick,.qz-title,.qz-sub,.qz-meter,.qz-meter-l,.qz-trust,.qz-panel{animation:none}.qo,.qz-submit,.qz-prog i,.qo::after{transition:none}.qz-submit.ready,.qz-spin{animation:none}}

/* ---------- the result dialog ---------- */
#qz-dlg{margin:auto;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid rgba(255,255,255,.14);border-radius:24px;color:#f2efe8;overflow:auto;
  background:radial-gradient(120% 80% at 0% 0%,rgba(150,80,225,.24),transparent 55%),linear-gradient(180deg,#14103a,#08082a);box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
  font:400 16px/1.55 "IBM Plex Sans",-apple-system,system-ui,sans-serif}
#qz-dlg::backdrop{background:rgba(3,4,20,.72);backdrop-filter:blur(6px)}
#qz-dlg *{box-sizing:border-box}
.qd-in{padding:clamp(18px,3vw,30px)}
.qd-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.qd-k{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.qd-sp{flex:1}
.qd-x{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#cfcbc2;background:rgba(255,255,255,.07);border:0;cursor:pointer;font-size:22px;line-height:1}
.qd-x:hover{background:rgba(255,255,255,.15);color:#fff}
#qz-dlg h2{margin:0 0 6px;font:600 clamp(26px,4vw,38px)/1.1 "Jost",Futura,sans-serif;letter-spacing:-.01em}
.qd-res{position:relative;overflow:hidden;padding:clamp(18px,3vw,28px);border-radius:20px;background:radial-gradient(100% 120% at 100% 0%,rgba(150,80,225,.28),transparent 60%),rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.qd-res::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgb(150,80,225),rgba(47,120,255,.7) 55%,transparent 92%)}
.qd-res small{display:block;font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:rgb(206,176,255);margin-bottom:12px}
.qd-res .tag{margin:0 0 10px;color:#b9c7ff;font-weight:500}
.qd-res p{margin:0;color:#d6d3ca}
.qd-ladder{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.qd-ladder li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;font-size:14.5px;color:#aab3d6;background:rgba(255,255,255,.05)}
.qd-ladder li i{flex:none;font:600 11px "IBM Plex Mono",ui-monospace,monospace;width:20px;color:#7e88b0;font-style:normal}
.qd-ladder li em{margin-left:auto;font-style:normal;font-size:12.5px;opacity:.75;color:inherit}
.qd-ladder li.you{color:#fff;background:linear-gradient(135deg,#7b3fe0,#4a8fff);box-shadow:0 10px 24px -10px rgba(110,80,255,.9);font-weight:600}
.qd-ladder li.you i{color:rgba(255,255,255,.8)}
.qd-lock{margin-top:18px;padding:18px;border-radius:18px;border:1px solid rgba(74,143,255,.45);background:linear-gradient(180deg,rgba(74,143,255,.14),rgba(150,80,225,.10))}
.qd-lock h3{margin:0 0 6px;font:600 19px/1.25 "Jost",Futura,sans-serif;color:#fff}
.qd-lock em,.qd-res em,.qz em{color:inherit;font-style:normal}
.qd-lock p{margin:0 0 14px;color:#cfd6ee;font-size:14.5px}
.qd-blur{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;filter:blur(3.5px);opacity:.75;user-select:none;pointer-events:none}
.qd-blur span{padding:7px 12px;border-radius:999px;font-size:12.5px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.qd-li{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px 18px;border-radius:14px;border:0;cursor:pointer;font:600 15.5px/1 "IBM Plex Sans",system-ui,sans-serif;color:#fff;text-decoration:none;background:#0a66c2;box-shadow:0 14px 30px -14px rgba(10,102,194,.9)}
.qd-li:hover{background:#1478d9}.qd-li svg{width:20px;height:20px}
.qd-alt{display:block;width:100%;margin-top:10px;padding:10px;color:#cfd6ee;background:none;border:0;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.qd-fine{margin:12px 0 0;color:#9aa3c4;font-size:12.5px}
.qd-xp{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:8px 14px;border-radius:999px;font:600 13px "IBM Plex Mono",ui-monospace,monospace;color:#9df0c0;background:rgba(46,200,110,.14);border:1px solid rgba(46,200,110,.4)}
.qd-sec{margin-top:18px}
.qd-sec h3{margin:0 0 10px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:#aab3d6}
.qd-dim{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:4px 12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.qd-dim b{font-weight:600;font-size:14.5px}
.qd-dim .qb{display:flex;gap:3px}.qd-dim .qb i{flex:1;height:8px;border-radius:2px;background:rgba(255,255,255,.14)}.qd-dim .qb i.on{background:linear-gradient(90deg,#7b3fe0,#4a8fff)}
.qd-fw{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.qd-fw div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.qd-fw small{display:block;color:#9aa3c4;font-size:11.5px}.qd-fw b{font-weight:600;font-size:14.5px}
.qd-next{padding:14px 16px;border-radius:16px;background:rgba(46,200,110,.10);border:1px solid rgba(46,200,110,.35)}
.qd-next p{margin:4px 0 0;color:#d8f5e4;font-size:14.5px}
.qd-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.qd-btn{padding:12px 18px;border-radius:12px;font:600 14px "IBM Plex Sans",system-ui,sans-serif;color:#fff;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);text-decoration:none}
.qd-btn:hover{border-color:rgba(255,255,255,.5)}.qd-btn.main{background:linear-gradient(135deg,#7b3fe0,#4a8fff);border-color:transparent}
.qd-x:focus-visible,.qd-li:focus-visible,.qd-btn:focus-visible,.qd-alt:focus-visible{outline:2px solid #9a6bff;outline-offset:2px}
@media (max-width:560px){#qz-dlg{border-radius:20px}.qd-ladder li em{display:none}.qd-dim{grid-template-columns:minmax(0,1fr) 80px}}