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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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


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

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

@media(max-width:600px){.lesson21-callout{grid-template-columns:1fr;gap:4px}}