/* interactive lesson tools (from the original app, recoloured through the theme tokens) */
/* widgets */
.wgt{padding:20px}.wgt .row{flex-wrap:wrap}.wgt label{font-weight:700;font-size:.85rem;color:var(--mut)}
.wgt input[type=text],.wgt input[type=number],.wgt select,.wgt textarea{background:var(--bg2);color:var(--txt);border:1px solid var(--line2);border-radius:4px;padding:8px 10px;font:inherit}
.wgt textarea{width:100%;font-family:Consolas,monospace}
.wgt .out{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:5px 12px;border-radius:99px;background:var(--card2);border:1px solid var(--line);font-weight:700;font-size:.84rem}.pill.y{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.4);color:var(--ok)}.pill.n{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.35);color:var(--bad)}
.tt{border-collapse:collapse;margin-top:12px}.tt th,.tt td{border:1px solid var(--line);padding:5px 12px;text-align:center;font-family:Consolas,monospace}.tt th{background:var(--card2)}.tt td.T{color:var(--ok);font-weight:800}.tt td.F{color:var(--bad)}
.mx{display:inline-grid;gap:6px;vertical-align:middle}.mx input{width:62px;text-align:center}
.cellgrid{display:inline-grid;gap:4px}.cellgrid button{width:42px;height:42px;border-radius:9px;border:1px solid var(--line2);background:var(--bg2);color:var(--txt);font-weight:800;cursor:pointer}.cellgrid button.on{background:var(--acc);border-color:var(--acc);color:#fff}.cellgrid .h{width:42px;text-align:center;color:var(--mut);font-weight:700}
.ct td,.ct th{border:1px solid var(--line);padding:5px 10px;text-align:center;font-family:Consolas,monospace;min-width:38px}.ct th{background:var(--card2)}.ct td.hi{background:rgba(124,92,255,.35)}.ct td.id{background:rgba(52,211,153,.25)}
svg.gsvg{width:100%;max-width:560px;height:300px;background:var(--bg2);border-radius:4px;border:1px solid var(--line)}
canvas.cv{width:100%;max-width:640px;height:300px;background:var(--bg2);border-radius:4px;border:1px solid var(--line)}
.pas{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:10px}.pas div{display:flex;gap:6px}.pas span{min-width:40px;text-align:center;padding:4px 6px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-family:Consolas,monospace;font-size:.85rem}.pas span.hi{background:var(--acc);color:#fff;border-color:var(--acc)}