.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}

.shutter{background:var(--wax);color:#18203a;border-color:#18203a;font-size:1.1rem;padding:12px 24px}
.tally{align-self:center;font-weight:600;color:var(--soft)}

#exSvg .x{display:none}
#exSvg[data-s="0"] .e-open,#exSvg[data-s="0"] .m-smile,#exSvg[data-s="1"] .e-closed,#exSvg[data-s="1"] .m-smile,#exSvg[data-s="2"] .e-side,#exSvg[data-s="2"] .m-flat,
#exSvg[data-s="3"] .e-open,#exSvg[data-s="3"] .m-o,#exSvg[data-s="4"] .e-open,#exSvg[data-s="4"] .m-frown{display:inline}

.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}
}