.cl-wrap{display:grid;gap:36px;margin-top:8px}
.cl-set{display:grid;gap:16px}
.cl-set-title{margin:0;color:#183e2d;font-size:22px}
.cl-set-intro,.cl-scenario{margin:0;color:#4c6558;line-height:1.65}
.cl-scenario{padding:16px 18px;border-radius:12px;background:#edf5ef;color:#2f4b3d}
.cl-practice{display:grid;gap:16px}
.cl-question{margin:0;padding:20px 22px;border:1px solid #dce5df;border-radius:14px;background:#fff;display:grid;gap:12px;min-width:0}
.cl-question.is-correct{border-color:#2d7a55;background:#f5fbf7}
.cl-question.is-wrong{border-color:#b4572f;background:#fff8f4}
.cl-legend{display:grid;gap:6px;padding:0 6px;max-width:100%}
.cl-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#28694d}
.cl-prompt{overflow-wrap:anywhere;font-size:17px;line-height:1.55;color:#14261d;font-weight:600}
.cl-hint-line{margin:0;font-size:13px;color:#5c7264}
.cl-code{margin:0;padding:14px 16px;border-radius:10px;background:#12281f;color:#e9f3ec;font:14px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-x:auto;white-space:pre}
.cl-option{min-width:0;overflow-wrap:anywhere;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 14px;border:1px solid #dce5df;border-radius:10px;cursor:pointer;line-height:1.5;background:#fff}
.cl-option:hover{border-color:#9cc4ae}
.cl-option input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:#1f6b49}
.cl-option:has(input:checked){border-color:#1f6b49;background:#edf5ef}
.cl-blank{box-sizing:border-box;width:100%;min-height:44px;padding:10px 14px;border:1px solid #b9c9bf;border-radius:10px;font:16px ui-monospace,SFMono-Regular,Consolas,monospace;background:#fff;color:#14261d}
.cl-order{list-style:none;counter-reset:cl-step;margin:0;padding:0;display:grid;gap:8px}
.cl-order-item{counter-increment:cl-step;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid #dce5df;border-radius:10px;background:#fff}
.cl-order-item::before{content:counter(cl-step);flex:none;width:28px;height:28px;border-radius:50%;background:#edf5ef;color:#1f6b49;font-weight:700;font-size:14px;display:grid;place-items:center}
.cl-order-text{flex:1;min-width:0;line-height:1.5}
.cl-move{min-width:44px;min-height:44px;border:1px solid #b9c9bf;border-radius:8px;background:#f3f7f4;color:#183e2d;font-size:18px;cursor:pointer}
.cl-move:disabled{opacity:.4;cursor:default}
.cl-feedback{padding:12px 14px;border-radius:10px;line-height:1.6}
.cl-feedback p{margin:4px 0 0}
.cl-feedback.is-correct{background:#e4f3ea;color:#174d33}
.cl-feedback.is-wrong{background:#fde9e0;color:#7a3317}
.cl-hint-text{font-style:italic}
.cl-actions{display:flex;gap:12px;flex-wrap:wrap}
.cl-actions .w-button{min-height:44px}
.cl-summary{margin:0}
.cl-summary strong{display:block}
.cl-summary p{margin:4px 0 0;color:#4c6558}
.cl-summary.is-pass,.cl-summary.is-retry,.cl-summary.is-error{padding:14px 16px;border-radius:12px}
.cl-summary.is-pass{background:#e4f3ea;color:#174d33}
.cl-summary.is-retry{background:#fff4de;color:#6b4a0a}
.cl-summary.is-error{background:#fde9e0;color:#7a3317}
.cl-evidence{padding:18px 20px;border:1px dashed #9cc4ae;border-radius:14px;background:#f8fbf9}
.cl-evidence h4{margin:0 0 6px;color:#183e2d}
.cl-evidence-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.catalog-module-quiz{margin-top:14px}
:focus-visible.cl-move,.cl-blank:focus-visible,.cl-option:focus-within{outline:3px solid #1f6b49;outline-offset:2px}
@media(max-width:740px){.cl-question{padding:16px}.cl-prompt{font-size:16px}.cl-order-item{flex-wrap:wrap}}
@media(prefers-reduced-motion:no-preference){.cl-question{transition:border-color .15s,background .15s}}
/* long code identifiers must wrap on narrow screens instead of widening the page */
.catalog-lesson-heading h1,.catalog-lesson-stage-panel :is(p,li,h2,h3,code){overflow-wrap:anywhere}
.catalog-lesson-layout,.catalog-lesson-body,.catalog-lesson-stage-panel{min-width:0}