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

.rule .big{font-family:var(--display);font-size:1.15rem;margin-top:14px}

.ctrl{margin-top:12px}
.ctrl label{display:flex;justify-content:space-between;gap:12px;font-family:var(--display);font-size:1.1rem}
.ctrl label b{font-variant-numeric:tabular-nums}
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}

.shot{margin:0}
.shot figcaption{font-size:.95rem;line-height:1.35;margin-top:10px;font-weight:600}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#dirSvg .d{display:none}
#dirSvg[data-dir="side"] .d-side,#dirSvg[data-dir="top"] .d-top,#dirSvg[data-dir="back"] .d-back{display:inline}
#flash .f-on{display:none}
#flash.on .f-on{display:inline}
#flash.on .f-off{display:none}

.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}
}
@media (max-width:440px){.pair{grid-template-columns:1fr}}