.lesson22-content{padding:0 0 60px;color:#172033}.lesson22-breadcrumb{font-size:14px;color:#667085;margin-bottom:18px}.lesson22-breadcrumb a{color:#5b21b6;text-decoration:none}.lesson22-breadcrumb span{padding:0 7px}.lesson22-hero{padding-bottom:28px;border-bottom:1px solid #e7eaf0}.lesson22-label,.lesson22-practice-label,.lesson22-quiz-label{font-size:14px;letter-spacing:.07em;font-weight:800;color:#5b21b6}.lesson22-hero h1{margin:7px 0 12px;font-size:46px;line-height:1.08}.lesson22-hero p{max-width:760px;margin:0;color:#475467;font-size:18px;line-height:1.7}.lesson22-meta{display:flex;gap:10px;margin-top:16px;color:#667085;font-size:14px}.lesson22-objectives{margin:24px 0;padding:20px;border:1px solid #e4e7ec;border-radius:12px;background:#f8fafc}.lesson22-objectives h2{margin:0 0 10px;font-size:21px}.lesson22-objectives li{margin:7px 0;color:#475467;font-size:15px;line-height:1.6}.lesson22-section{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;margin:38px 0}.lesson22-number{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eee8ff;color:#5b21b6;font-size:14px;font-weight:800}.lesson22-body h2{margin:0 0 10px;font-size:28px;line-height:1.25}.lesson22-body h3{margin:7px 0 5px;font-size:18px}.lesson22-body p{margin:9px 0;color:#475467;font-size:16px;line-height:1.75}.lesson22-callout{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:start;margin:17px 0;padding:15px 16px;border-left:3px solid #7c3aed;background:#faf8ff;border-radius:0 9px 9px 0}.lesson22-callout strong{display:block;min-width:0;font-size:15px;line-height:1.6;color:#5b21b6;white-space:normal}.lesson22-callout span{display:block;min-width:0;font-size:15px;line-height:1.6;color:#475467;overflow-wrap:anywhere}.lesson22-callout--green{border-left-color:#147a55;background:#f5fbf8}.lesson22-callout--green strong{color:#147a55}.lesson22-note{font-size:14px!important;line-height:1.65!important;color:#667085!important}.lesson22-window{margin:18px 0;border:1px solid #dfe3e8;border-radius:12px;background:#fff;overflow:hidden}.lesson22-window-title{display:flex;justify-content:space-between;padding:13px 15px;background:#f8fafc;border-bottom:1px solid #e4e7ec;font-size:15px}.lesson22-window-title span{font-size:14px;color:#667085}.lesson22-window-row{display:flex;flex-wrap:wrap;gap:10px;padding:18px}.lesson22-chip{padding:11px 13px;border:1px solid #dfe3e8;border-radius:8px;background:#fff;font-size:14px;font-weight:700}.lesson22-chip--system{border-color:#d8c7f7}.lesson22-chip--history{border-color:#c8d9f7}.lesson22-chip--docs{border-color:#c9e5d7}.lesson22-chip--tools{border-color:#f0d8bd}.lesson22-chip--user{border-color:#d9d9d9}.lesson22-chip--output{border-color:#bfe2dc}.lesson22-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:17px 0}.lesson22-grid>div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-grid p{font-size:14px;line-height:1.55}.lesson22-tag{display:inline-block;font-size:14px!important;font-weight:800;color:#5b21b6}.lesson22-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin:18px 0}.lesson22-flow>div{padding:14px;border:1px solid #e4e7ec;border-radius:9px;background:#fff}.lesson22-flow b,.lesson22-flow span{display:block}.lesson22-flow b{font-size:15px}.lesson22-flow span{margin-top:4px;font-size:14px;color:#667085}.lesson22-flow i{font-size:22px;color:#7c3aed;font-style:normal}.lesson22-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.lesson22-compare>div{padding:17px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-compare h3{font-size:19px}.lesson22-compare li{margin:7px 0;font-size:15px;line-height:1.5;color:#475467}.lesson22-quality{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.lesson22-quality div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-quality strong,.lesson22-quality span{display:block}.lesson22-quality strong{font-size:16px}.lesson22-quality span{margin-top:5px;color:#667085;font-size:14px;line-height:1.5}.lesson22-position{margin:18px 0;padding:18px;border:1px solid #e4e7ec;border-radius:11px;background:#f8fafc}.lesson22-position-track{display:grid;grid-template-columns:1fr 1.2fr 1fr 1.2fr 1fr;gap:6px}.lesson22-position-track span{padding:14px 8px;text-align:center;border-radius:7px;background:#fff;border:1px solid #e4e7ec;font-size:14px}.lesson22-position-track .lesson22-position-focus{border-color:#b9a2df;background:#f5efff;color:#5b21b6;font-weight:800}.lesson22-chat{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin:18px 0}.lesson22-chat>div:not(.lesson22-arrow){padding:13px;border:1px solid #e4e7ec;border-radius:9px;background:#fff;text-align:center}.lesson22-chat b,.lesson22-chat span{display:block}.lesson22-chat b{font-size:15px}.lesson22-chat span{font-size:14px;color:#667085;margin-top:4px}.lesson22-chat .lesson22-arrow{font-size:20px;color:#7c3aed}.lesson22-chat-result{background:#f5fbf8!important;border-color:#cce8db!important}.lesson22-code{margin:18px 0;border:1px solid #dfe3e8;border-radius:10px;overflow:hidden;background:#f8fafc}.lesson22-codebar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid #dfe3e8;background:#f1f3f5;color:#344054;font-size:14px;font-weight:700}.lesson22-codebar>div{display:flex;gap:8px;align-items:center}.lesson22-codebar button,.lesson22-codebar a{border:1px solid #cdd3db;border-radius:6px;padding:6px 9px;background:#fff;color:#344054;font-size:14px;text-decoration:none;cursor:pointer}.lesson22-code pre{margin:0;padding:17px;overflow:auto;background:#f8fafc;color:#344054;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}.lesson22-code .py-keyword{color:#7c3aed}.lesson22-code .py-string{color:#0f766e}.lesson22-code .py-builtins{color:#2563eb}.lesson22-strategy{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.lesson22-strategy div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-strategy b,.lesson22-strategy span{display:block}.lesson22-strategy b{font-size:15px}.lesson22-strategy span{margin-top:5px;font-size:14px;line-height:1.55;color:#667085}.lesson22-rag{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin:18px 0}.lesson22-rag>div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;text-align:center}.lesson22-rag b,.lesson22-rag span{display:block}.lesson22-rag b{font-size:15px}.lesson22-rag span{margin-top:5px;font-size:14px;color:#667085;line-height:1.5}.lesson22-rag i{font-size:21px;color:#7c3aed;font-style:normal}.lesson22-budget{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.lesson22-budget>div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-budget b,.lesson22-budget strong,.lesson22-budget span{display:block}.lesson22-budget b{font-size:14px;color:#667085}.lesson22-budget strong{margin-top:7px;font-size:24px}.lesson22-budget span{margin-top:4px;font-size:14px;color:#667085}.lesson22-budget-result{background:#f5fbf8!important;border-color:#cce8db!important}.lesson22-practice{margin:40px 0;padding:22px;border:1px solid #ddd6fe;border-radius:13px;background:#faf8ff}.lesson22-practice h2,.lesson22-quiz h2,.lesson22-recap h2{margin:8px 0 10px;font-size:26px}.lesson22-practice p{font-size:16px;line-height:1.7}.lesson22-checklist{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}.lesson22-checklist span{padding:8px 10px;border:1px solid #ddd6fe;border-radius:7px;background:#fff;color:#475467;font-size:14px}.lesson22-practice-btn{margin-top:10px;padding:10px 14px;border:0;border-radius:7px;background:#5b21b6;color:#fff;font-size:14px;font-weight:700;cursor:pointer}.lesson22-answer{margin-top:14px;border:1px solid #dfe3e8;border-radius:9px;overflow:auto}.lesson22-answer pre{margin:0;padding:15px;background:#f8fafc;color:#344054;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}.lesson22-quiz{margin:40px 0;padding:22px;border:1px solid #e4e7ec;border-radius:13px;background:#fff}.lesson22-quiz p{font-size:16px;line-height:1.7}.lesson22-quiz-options{display:grid;gap:9px;margin-top:15px}.lesson22-quiz-options button{padding:12px 14px;border:1px solid #d7dce3;border-radius:8px;background:#fff;text-align:left;color:#344054;font-size:15px;line-height:1.5;cursor:pointer}.lesson22-quiz-options button.is-correct{border-color:#73c991;background:#f2fbf5}.lesson22-quiz-options button.is-wrong{border-color:#e29a9a;background:#fff5f5}.lesson22-quiz-feedback{margin-top:12px;min-height:22px;color:#475467;font-size:15px;line-height:1.6}.lesson22-recap{margin:40px 0;padding:20px;border:1px solid #dfe3e8;border-radius:12px;background:#f8fafc}.lesson22-recap li{margin:7px 0;color:#475467;font-size:15px;line-height:1.6}.lesson22-bottom-nav{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:20px;border-top:1px solid #e7eaf0}.lesson22-bottom-nav a{max-width:48%;padding:11px 14px;border:1px solid #dfe3e8;border-radius:8px;color:#344054;text-decoration:none;font-size:15px;line-height:1.5;background:#fff}.lesson22-bottom-nav a:hover{border-color:#7c3aed;color:#5b21b6}
@media(max-width:1050px){.lesson22-grid,.lesson22-quality,.lesson22-strategy{grid-template-columns:repeat(2,1fr)}.lesson22-flow,.lesson22-rag{grid-template-columns:1fr 1fr}.lesson22-flow i,.lesson22-rag i{display:none}.lesson22-chat{grid-template-columns:1fr auto 1fr auto 1fr}}
@media(max-width:760px){.lesson22-content{padding:0 0 50px}.lesson22-hero h1{font-size:34px}.lesson22-hero p{font-size:16px}.lesson22-section{grid-template-columns:30px minmax(0,1fr);gap:10px;margin:30px 0}.lesson22-number{width:30px;height:30px}.lesson22-body h2{font-size:23px}.lesson22-grid,.lesson22-quality,.lesson22-strategy,.lesson22-compare,.lesson22-budget,.lesson22-flow,.lesson22-rag,.lesson22-chat{grid-template-columns:1fr}.lesson22-flow i,.lesson22-rag i{display:block;text-align:center}.lesson22-chat .lesson22-arrow{display:block;text-align:center}.lesson22-position-track{grid-template-columns:1fr}.lesson22-codebar{align-items:flex-start;flex-direction:column}.lesson22-codebar>div{width:100%;flex-wrap:wrap}.lesson22-practice,.lesson22-quiz,.lesson22-recap{padding:17px}.lesson22-bottom-nav{flex-direction:column}.lesson22-bottom-nav a{max-width:none}.lesson22-meta{flex-wrap:wrap}}

.lesson22-same-question{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.lesson22-same-question>div{padding:18px;border:1px solid #e4e7ec;border-radius:12px;background:#fff}.lesson22-same-question h3{font-size:19px;margin:8px 0}.lesson22-answer{margin-top:14px;padding:14px;border-radius:9px;border:1px solid #e4e7ec}.lesson22-answer strong,.lesson22-answer span{display:block}.lesson22-answer strong{font-size:15px}.lesson22-answer span{margin-top:5px;font-size:15px;line-height:1.55;color:#475467}.lesson22-answer--strong{background:#f5fbf8;border-color:#cce8db}.lesson22-context-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin:20px 0}.lesson22-context-flow>div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-context-flow b,.lesson22-context-flow span{display:block}.lesson22-context-flow b{font-size:15px}.lesson22-context-flow span{margin-top:5px;font-size:14px;color:#667085;line-height:1.5}.lesson22-context-flow i{font-size:21px;color:#7c3aed;font-style:normal}.lesson22-flow-result{background:#f5fbf8!important;border-color:#cce8db!important}.lesson22-relevance{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.lesson22-relevance>div{padding:18px;border:1px solid #e4e7ec;border-radius:11px;background:#fff}.lesson22-relevance h3{font-size:19px;margin:8px 0}.lesson22-relevance li{font-size:15px;line-height:1.6;margin:6px 0;color:#475467}.lesson22-quality{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.lesson22-quality div{padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-quality strong,.lesson22-quality span{display:block}.lesson22-quality strong{font-size:16px}.lesson22-quality span{margin-top:5px;font-size:14px;line-height:1.55;color:#667085}.lesson22-change{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin:12px 0}.lesson22-change>div:not(.lesson22-change-arrow){padding:14px;border:1px solid #e4e7ec;border-radius:10px;background:#fff;text-align:center}.lesson22-change span{display:block;font-size:14px;font-weight:800;color:#5b21b6}.lesson22-change strong{display:block;font-size:16px;margin-top:5px}.lesson22-change p{font-size:14px;color:#667085;line-height:1.5;margin:5px 0 0}.lesson22-change-arrow{font-size:20px;color:#7c3aed}.lesson22-break{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.lesson22-break>div{padding:17px;border:1px solid #e4e7ec;border-radius:11px;background:#fff}.lesson22-status{display:inline-block;font-size:14px;font-weight:800;color:#087443}.lesson22-status--bad{color:#b42318}.lesson22-status--fixed{color:#5b21b6}.lesson22-break h3{font-size:18px;margin:8px 0}.lesson22-break p{font-size:15px;line-height:1.6;color:#475467}.lesson22-break strong{font-size:14px}.lesson22-project{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.lesson22-project>div{padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-project b,.lesson22-project span{display:block}.lesson22-project b{font-size:15px}.lesson22-project span{margin-top:5px;font-size:14px;line-height:1.55;color:#667085}.lesson22-design{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:20px 0}.lesson22-design div{padding:14px;border:1px solid #e4e7ec;border-radius:9px;background:#fff}.lesson22-design span{display:block;font-size:14px;color:#667085;font-weight:800}.lesson22-design strong{display:block;margin-top:6px;font-size:15px;line-height:1.45}.lesson22-practice{margin:40px 0;padding:22px;border:1px solid #ddd6fe;border-radius:13px;background:#faf8ff}.lesson22-practice h2,.lesson22-quiz h2,.lesson22-recap h2{margin:8px 0 10px;font-size:26px}.lesson22-practice p{font-size:16px;line-height:1.7}.lesson22-checklist{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}.lesson22-checklist span{padding:8px 10px;border:1px solid #ddd6fe;border-radius:7px;background:#fff;color:#475467;font-size:14px}.lesson22-practice-btn{margin-top:10px;padding:10px 14px;border:0;border-radius:7px;background:#5b21b6;color:#fff;font-size:14px;font-weight:700;cursor:pointer}.lesson22-answer-box{margin-top:14px;border:1px solid #dfe3e8;border-radius:9px;overflow:auto}.lesson22-answer-box pre{margin:0;padding:15px;background:#f8fafc;color:#344054;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}.lesson22-quiz{margin:40px 0;padding:22px;border:1px solid #e4e7ec;border-radius:13px;background:#fff}.lesson22-quiz p{font-size:16px;line-height:1.7}.lesson22-quiz-options{display:grid;gap:9px;margin-top:15px}.lesson22-quiz-options button{padding:12px 14px;border:1px solid #d7dce3;border-radius:8px;background:#fff;text-align:left;color:#344054;font-size:15px;line-height:1.5;cursor:pointer}.lesson22-quiz-options button.is-correct{border-color:#73c991;background:#f2fbf5}.lesson22-quiz-options button.is-wrong{border-color:#e29a9a;background:#fff5f5}.lesson22-quiz-feedback{margin-top:12px;min-height:22px;color:#475467;font-size:15px;line-height:1.6}.lesson22-recap{margin:40px 0;padding:20px;border:1px solid #dfe3e8;border-radius:12px;background:#f8fafc}.lesson22-recap li{margin:7px 0;color:#475467;font-size:15px;line-height:1.6}.lesson22-bottom-nav{display:flex;justify-content:space-between;gap:12px;margin-top:34px;padding-top:20px;border-top:1px solid #e7eaf0}.lesson22-bottom-nav a{max-width:48%;padding:11px 14px;border:1px solid #dfe3e8;border-radius:8px;color:#344054;text-decoration:none;font-size:15px;line-height:1.5;background:#fff}.lesson22-bottom-nav a:hover{border-color:#7c3aed;color:#5b21b6}
@media(max-width:1050px){.lesson22-quality,.lesson22-project,.lesson22-design{grid-template-columns:repeat(2,1fr)}.lesson22-context-flow{grid-template-columns:1fr 1fr}.lesson22-context-flow i{display:none}.lesson22-change{grid-template-columns:1fr auto 1fr}.lesson22-break{grid-template-columns:1fr}}
@media(max-width:760px){.lesson22-same-question,.lesson22-relevance,.lesson22-quality,.lesson22-project,.lesson22-design,.lesson22-context-flow,.lesson22-break{grid-template-columns:1fr}.lesson22-change{grid-template-columns:1fr}.lesson22-change-arrow{display:block;text-align:center;font-size:0}.lesson22-change-arrow::after{content:'↓';font-size:20px}.lesson22-codebar{align-items:flex-start;flex-direction:column}.lesson22-codebar>div{width:100%;flex-wrap:wrap}}

/* Mobile overflow hardening: keep Lesson 20 inside the viewport. */
@media (max-width: 760px) {
    .lesson22-page,
    .lesson22-content,
    .lesson22-body,
    .lesson22-section,
    .lesson22-objectives,
    .lesson22-practice,
    .lesson22-quiz,
    .lesson22-recap {
        max-width: 100%;
        min-width: 0;
    }

    .lesson22-page {
        overflow-x: clip;
    }

    .lesson22-page pre {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .lesson22-page code {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .lesson22-same-question > div,
    .lesson22-compare > div,
    .lesson22-relevance > div,
    .lesson22-grid > div,
    .lesson22-quality > div,
    .lesson22-strategy > div,
    .lesson22-break > div,
    .lesson22-project > div,
    .lesson22-design > div,
    .lesson22-window,
    .lesson22-position,
    .lesson22-change > div:not(.lesson22-change-arrow) {
        min-width: 0;
        max-width: 100%;
    }

    .lesson22-callout {
        min-width: 0;
    }

    .lesson22-callout strong {
        white-space: normal;
    }

    .lesson22-bottom-nav a {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}


.lesson22-role-flow,.lesson22-context-flow,.lesson22-api-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin:20px 0}.lesson22-role-flow>div,.lesson22-context-flow>div,.lesson22-api-flow>div{padding:15px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-role-flow b,.lesson22-role-flow span,.lesson22-role-flow strong,.lesson22-context-flow b,.lesson22-context-flow span,.lesson22-api-flow b,.lesson22-api-flow span{display:block}.lesson22-role-flow b,.lesson22-context-flow b,.lesson22-api-flow b{font-size:14px;color:#667085;letter-spacing:.03em}.lesson22-role-flow span,.lesson22-context-flow span,.lesson22-api-flow span{margin-top:5px;font-size:14px;color:#667085;line-height:1.5}.lesson22-role-flow strong{margin-top:7px;font-size:16px}.lesson22-role-flow i,.lesson22-context-flow i,.lesson22-api-flow i{font-size:19px;color:#7c3aed;font-style:normal;text-align:center}.lesson22-examples{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.lesson22-examples>div{padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-examples span,.lesson22-examples strong{display:block}.lesson22-examples span{font-size:14px;font-weight:800;color:#5b21b6}.lesson22-examples strong{margin-top:6px;font-size:16px}.lesson22-examples p{font-size:15px}.lesson22-misconception{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.lesson22-misconception>div{padding:18px;border:1px solid #e4e7ec;border-radius:11px;background:#fff}.lesson22-misconception h3{font-size:19px;margin:8px 0}.lesson22-misconception p{font-size:15px;line-height:1.6}.lesson22-status{display:inline-block;font-size:14px;font-weight:800}.lesson22-status--bad{color:#b42318}.lesson22-status--good{color:#087443}.lesson22-use-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.lesson22-use-grid>div{padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-use-grid b,.lesson22-use-grid span,.lesson22-use-grid strong,.lesson22-use-grid small{display:block}.lesson22-use-grid b{font-size:16px}.lesson22-use-grid span{margin-top:5px;font-size:14px;line-height:1.5;color:#667085}.lesson22-use-grid strong{margin-top:10px;font-size:14px}.lesson22-use-grid small{margin-top:4px;font-size:14px;line-height:1.5;color:#475467}.lesson22-mistakes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.lesson22-mistakes>div{padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-mistakes>div>span{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;background:#eee8ff;color:#5b21b6;font-size:14px;font-weight:800}.lesson22-mistakes b{display:block;margin-top:8px;font-size:16px}.lesson22-mistakes p{font-size:14px;line-height:1.5;margin:6px 0}.lesson22-mistakes strong{font-size:14px}.lesson22-project{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.lesson22-project>div{padding:16px;border:1px solid #e4e7ec;border-radius:10px;background:#fff}.lesson22-project b,.lesson22-project span{display:block}.lesson22-project b{font-size:15px}.lesson22-project span{margin-top:5px;font-size:14px;line-height:1.55;color:#667085}.lesson22-prompt-block{margin:18px 0;padding:16px;border:1px solid #dfe3e8;border-radius:10px;background:#f8fafc;color:#344054;font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.lesson22-design{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:20px 0}.lesson22-design div{padding:14px;border:1px solid #e4e7ec;border-radius:9px;background:#fff}.lesson22-design span{display:block;font-size:14px;color:#667085;font-weight:800}.lesson22-design strong{display:block;margin-top:6px;font-size:15px;line-height:1.45}
@media(max-width:1050px){.lesson22-use-grid,.lesson22-mistakes,.lesson22-project,.lesson22-design{grid-template-columns:repeat(2,1fr)}.lesson22-role-flow,.lesson22-context-flow,.lesson22-api-flow{grid-template-columns:1fr 1fr}.lesson22-role-flow i,.lesson22-context-flow i,.lesson22-api-flow i{display:none}}
@media(max-width:760px){.lesson22-examples,.lesson22-misconception,.lesson22-use-grid,.lesson22-mistakes,.lesson22-project,.lesson22-design,.lesson22-role-flow,.lesson22-context-flow,.lesson22-api-flow{grid-template-columns:1fr}.lesson22-role-flow i,.lesson22-context-flow i,.lesson22-api-flow i{display:block}.lesson22-page,.lesson22-content,.lesson22-body,.lesson22-section,.lesson22-objectives,.lesson22-practice,.lesson22-quiz,.lesson22-recap{max-width:100%;min-width:0}.lesson22-page{overflow-x:clip}.lesson22-page pre{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.lesson22-page code{overflow-wrap:anywhere;word-break:break-word}.lesson22-role-flow>div,.lesson22-context-flow>div,.lesson22-api-flow>div,.lesson22-examples>div,.lesson22-misconception>div,.lesson22-use-grid>div,.lesson22-mistakes>div,.lesson22-project>div,.lesson22-design>div{min-width:0;max-width:100%}.lesson22-prompt-block{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.lesson22-bottom-nav a{min-width:0;overflow-wrap:anywhere}}

/* Final mobile/viewport hardening for Lesson 22. */
.lesson22-page,
.lesson22-page * {
    box-sizing: border-box;
}

.lesson22-page {
    min-width: 0;
}

.lesson22-page .lesson22-content,
.lesson22-page .lesson22-body,
.lesson22-page .lesson22-section,
.lesson22-page .lesson22-objectives,
.lesson22-page .lesson22-practice,
.lesson22-page .lesson22-quiz,
.lesson22-page .lesson22-recap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.lesson22-page pre {
    display: block;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-wrap: anywhere;
}

.lesson22-page img,
.lesson22-page svg,
.lesson22-page video,
.lesson22-page iframe {
    max-width: 100%;
}

@media (max-width: 760px) {
    .lesson22-page {
        overflow-x: clip;
    }

    .lesson22-page [class*="grid"],
    .lesson22-page [class*="flow"],
    .lesson22-page [class*="compare"],
    .lesson22-page [class*="project"],
    .lesson22-page [class*="design"],
    .lesson22-page [class*="quality"],
    .lesson22-page [class*="strategy"],
    .lesson22-page [class*="chat"],
    .lesson22-page [class*="rag"],
    .lesson22-page [class*="change"],
    .lesson22-page [class*="relevance"],
    .lesson22-page [class*="same-question"] {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .lesson22-page pre,
    .lesson22-page code {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}


/* Lesson 22: content cards must stay inside the shared main column. */
.lesson22-page .lesson22-body > *,
.lesson22-page [class*="grid"] > *,
.lesson22-page [class*="flow"] > *,
.lesson22-page [class*="compare"] > *,
.lesson22-page [class*="project"] > *,
.lesson22-page [class*="design"] > *,
.lesson22-page [class*="quality"] > *,
.lesson22-page [class*="strategy"] > *,
.lesson22-page [class*="chat"] > *,
.lesson22-page [class*="rag"] > *,
.lesson22-page [class*="change"] > *,
.lesson22-page [class*="relevance"] > *,
.lesson22-page [class*="same-question"] > *,
.lesson22-page [class*="misconception"] > *,
.lesson22-page [class*="mistakes"] > * {
    min-width: 0;
    max-width: 100%;
}

.lesson22-page pre {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Prevent callout label/body overlap at narrow widths. */
@media (max-width: 760px) {
    .lesson22-callout {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}