.quiz{position:fixed;inset:0;z-index:9;background:#030508;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .5s}
.quiz.on{opacity:1;pointer-events:auto}
.qz{width:min(760px,100%);max-height:100%;overflow-y:auto;padding:4px}
.qz header{display:flex;align-items:center;gap:14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber)}
.qz header .n{margin-left:auto;color:var(--mute);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.qz header button{all:unset;cursor:pointer;color:var(--mute);font-size:16px;padding:4px 6px}
.qz header button:hover{color:var(--bone)} .qz header button:focus-visible{outline:1px solid var(--amber)}
.qz .prog{height:1px;background:rgba(242,235,221,.15);margin:12px 0 30px}.qz .prog i{display:block;height:1px;background:var(--amber);transition:width .5s}
.qz h3{margin:0 0 24px;font-family:var(--f-title);font-style:italic;font-weight:400;font-size:clamp(24px,3vw,36px);line-height:1.18;color:var(--bone);text-wrap:balance}
.qz .opts{display:grid;gap:10px}
.qz .opt{all:unset;box-sizing:border-box;display:flex;gap:14px;align-items:baseline;width:100%;cursor:pointer;padding:14px 16px;border:1px solid rgba(242,235,221,.18);color:#D9D2C4;font-size:15px;line-height:1.45;transition:border-color .2s,background .2s,color .2s}
.qz .opt code{font-family:var(--f-mono);font-size:.88em;color:var(--cyan)}
.qz .opt .k{font-family:var(--f-mono);font-size:11px;color:var(--dim);min-width:14px}
.qz .opt:hover:not([disabled]){border-color:rgba(242,235,221,.5);background:rgba(242,235,221,.03)}
.qz .opt:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.qz .opt.ok{border-color:var(--cyan);background:rgba(63,208,232,.08);color:var(--bone)}
.qz .opt.ko{border-color:var(--red);background:rgba(255,75,62,.07)}
.qz .opt[disabled]{cursor:default}
.qz .exp{margin-top:18px;padding:14px 16px;border-left:2px solid var(--amber);background:rgba(240,160,64,.05);font-size:14.5px;line-height:1.6;color:#CFC8BA}
.qz .exp b{color:var(--bone)}
.qz .act{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.qz .btn{font:400 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;padding:14px 18px;cursor:pointer;border:1px solid rgba(242,235,221,.35);background:transparent;color:var(--bone)}
.qz .btn.p{background:var(--bone);color:#04070A;border-color:var(--bone)}
.qz .btn:hover{border-color:var(--amber)} .qz .btn.p:hover{background:var(--amber)}
.qz .btn:focus-visible{outline:1px solid var(--amber);outline-offset:3px}
.qz .score{font-family:var(--f-title);font-size:clamp(64px,10vw,120px);line-height:1;color:var(--bone)} .qz .score small{font-size:.35em;color:var(--mute)}
.qz .verdict{font-family:var(--f-title);font-style:italic;font-size:24px;color:var(--amber);margin:8px 0 18px}
.qz .rev{display:grid;gap:12px;margin-top:20px}
.qz .rev div{border-left:1px solid rgba(255,75,62,.6);padding:4px 0 4px 14px;font-size:14px;line-height:1.55;color:#CFC8BA}
.qz .rev b{display:block;color:var(--bone);font-weight:500}
.qz .rev em{font-style:normal;color:var(--cyan)}
.qz .intro p{font-size:16px;line-height:1.6;color:#CFC8BA;max-width:56ch}
.poster .toquiz{margin-top:14px;font:400 10.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);background:none;border:0;border-bottom:1px solid rgba(242,235,221,.25);padding:4px 0;cursor:pointer}
.poster .toquiz:hover{color:var(--amber);border-color:var(--amber)}
.ctrls #bQuiz.pulse{color:var(--amber);animation:qpulse 1.6s ease-in-out infinite}
@keyframes qpulse{50%{opacity:.45}}