.strip svg.frame{display:block;width:100%;height:auto;border-radius:3px;background:#8fd0f0}
.clip{overflow:hidden;border-radius:3px}

output{display:block;min-height:3.1em;font-weight:600;margin-top:4px}
.rule output{margin-top:12px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.thumb{position:relative;display:block;padding:0;border:3px solid transparent;border-radius:4px;background:#2a3355;overflow:hidden;aspect-ratio:1}
.thumb svg{display:block;width:100%;height:100%}
.thumb.wide{aspect-ratio:3/2}
.thumb.right{border-color:#5fd39e}
.thumb.wrong{border-color:#ff8088}
.thumb.sel{border-color:var(--wax)}
button.thumb:focus-visible{outline:3px solid var(--wax);outline-offset:2px}
#stT .thumb,#pkT .thumb{cursor:pointer}
.badge{position:absolute;left:6px;top:6px;width:26px;height:26px;border-radius:50%;background:var(--wax);color:#18203a;font:800 1rem/26px var(--display);text-align:center}

.quiz{background:var(--panel);border-radius:10px;padding:24px 26px;max-width:720px;margin-bottom:44px}
.qnum{color:var(--soft);font-weight:600}
.qtext{font-family:var(--display);font-size:1.4rem;line-height:1.2;margin-top:4px}
.qopts{display:grid;gap:10px;margin:14px 0}
.qopts button{border-radius:12px;text-align:left;padding:12px 16px}
.qopts button:disabled{cursor:default;color:var(--ink);opacity:1}
.qopts button.right{background:var(--yes);color:var(--bg);border-color:var(--yes)}
.qopts button.wrong{background:var(--no);color:var(--bg);border-color:var(--no)}
.qmsg{font-weight:600;min-height:3.1em;margin-bottom:10px}

@media (max-width:760px){
  .quiz{padding:18px 16px}
  .qtext{font-size:1.2rem}
  .btns{gap:8px}
  .btns button{padding:8px 14px}
}