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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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