.lesson36-page{--purple:#7c3aed;--purple-soft:#faf7ff;--ink:#172033;--muted:#475467;--line:#e4e7ec}
.lesson36-content{max-width:900px;margin:0 auto;padding:24px 0 70px;color:var(--ink)}
.lesson36-breadcrumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:4px 0 22px;color:#667085;font-size:15px}
.lesson36-breadcrumb a{color:#6d28d9;text-decoration:none}
.lesson36-hero{padding:30px 32px 28px;border:1px solid #e7def6;border-radius:16px;background:linear-gradient(135deg,#fff 0%,#fbf8ff 100%);box-shadow:0 4px 18px rgba(16,24,40,.04)}
.lesson36-label{color:#7c3aed;font-size:15px;font-weight:900;letter-spacing:.08em}
.lesson36-hero h1{margin:10px 0 12px;font-size:46px;line-height:1.08;letter-spacing:-.03em}
.lesson36-hero p{max-width:780px;margin:0;color:var(--muted);font-size:18px;line-height:1.72}
.lesson36-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:17px;color:#667085;font-size:15px;font-weight:700}
.lesson36-objectives{margin:24px 0;padding:22px 24px;border:1px solid #dcd1f1;border-left:4px solid var(--purple);border-radius:12px;background:#fbf9ff}
.lesson36-objectives h2{margin:0 0 12px;font-size:22px}
.lesson36-objectives ul{margin:0;padding-left:22px}
.lesson36-objectives li{margin:7px 0;color:var(--muted);font-size:16px;line-height:1.6}
.lesson36-section{display:grid;grid-template-columns:36px minmax(0,1fr);gap:15px;margin:42px 0}
.lesson36-number{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#efe7ff;color:#6d28d9;font-weight:900;font-size:15px}
.lesson36-body{min-width:0}
.lesson36-body h2{margin:2px 0 12px;font-size:28px;line-height:1.2;letter-spacing:-.02em}
.lesson36-body p{margin:0 0 15px;color:var(--muted);font-size:16px;line-height:1.75}
.lesson36-body code,.lesson36-note code,.lesson36-practice-box code{padding:2px 5px;border-radius:5px;background:#f2f4f7;color:#344054;font:600 15px ui-monospace,SFMono-Regular,Menlo,monospace}
.lesson36-flow,.lesson36-db-flow,.lesson36-rag{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:8px;align-items:center;margin:21px 0}
.lesson36-flow>div,.lesson36-db-flow>div,.lesson36-rag>div{min-width:0;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center}
.lesson36-flow b,.lesson36-flow span,.lesson36-db-flow b,.lesson36-db-flow span,.lesson36-rag b,.lesson36-rag span{display:block}
.lesson36-flow b,.lesson36-db-flow b,.lesson36-rag b{font-size:15px}
.lesson36-flow span,.lesson36-db-flow span,.lesson36-rag span{margin-top:6px;color:#667085;font-size:15px;line-height:1.45}
.lesson36-flow>i,.lesson36-db-flow>i,.lesson36-rag>i{font-style:normal;color:#7c3aed;font-weight:900}
.lesson36-flow-highlight{border-color:#ddd2f0!important;background:#faf8ff!important}
.lesson36-flow-highlight b{color:#6d28d9}
.lesson36-callout{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;margin:18px 0;padding:15px 17px;border:1px solid #e4e7ec;border-radius:10px;background:#f8fafc;color:var(--muted);font-size:15px;line-height:1.6}
.lesson36-callout strong{color:#344054}
.lesson36-callout--amber{border-color:#ead9ad;background:#fffbef}
.lesson36-callout--amber strong{color:#9a6700}
.lesson36-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:stretch;margin:20px 0}
.lesson36-compare>div:not(.lesson36-vs){padding:20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.lesson36-compare>div:last-child{border-color:#ddd2f0;background:#fcfaff}
.lesson36-compare span,.lesson36-example-grid span,.lesson36-metric-grid span,.lesson36-filter span,.lesson36-threshold span,.lesson36-eval span{display:block;color:#7c3aed;font-size:15px;font-weight:900;letter-spacing:.06em}
.lesson36-compare h3{margin:7px 0 12px;font-size:20px}
.lesson36-compare p{margin:0;font-size:15px}
.lesson36-vs{align-self:center;color:#98a2b3;font-weight:900}
.lesson36-example-grid,.lesson36-metric-grid,.lesson36-threshold,.lesson36-eval,.lesson36-mistakes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:20px 0}
.lesson36-example-grid>div,.lesson36-metric-grid>div,.lesson36-threshold>div,.lesson36-eval>div,.lesson36-mistakes>div{padding:17px;border:1px solid var(--line);border-radius:11px;background:#fff}
.lesson36-example-grid b,.lesson36-metric-grid h3,.lesson36-threshold b,.lesson36-eval b,.lesson36-mistakes b{display:block;margin:6px 0;font-size:16px}
.lesson36-example-grid p,.lesson36-metric-grid p,.lesson36-threshold p,.lesson36-eval p,.lesson36-mistakes p{margin:0;font-size:15px;line-height:1.55}
.lesson36-record{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:20px 0}
.lesson36-record>div{padding:15px;border:1px solid var(--line);border-radius:10px;background:#fff}
.lesson36-record span{display:block;color:#7c3aed;font-size:15px;font-weight:900}
.lesson36-record strong{display:block;margin:7px 0;font:700 15px ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word}
.lesson36-record small{color:#667085;font-size:15px;line-height:1.45}
.lesson36-note{margin:17px 0;padding:13px 15px;border-radius:9px;background:#f8fafc;color:#475467;font-size:15px;line-height:1.6}
.lesson36-note strong{color:#344054}
.lesson36-topk{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff}
.lesson36-topk-query{padding:14px;border-radius:9px;background:#faf8ff}
.lesson36-topk-query span{display:block;color:#7c3aed;font-size:15px;font-weight:900;letter-spacing:.07em}
.lesson36-topk-query b{display:block;margin-top:5px;font-size:16px}
.lesson36-topk-list{margin-top:10px}
.lesson36-topk-list>div{display:grid;grid-template-columns:40px minmax(0,1fr) 60px;gap:10px;align-items:center;padding:10px 5px;border-top:1px solid #edf0f3}
.lesson36-topk-list b{color:#7c3aed;font-size:15px}
.lesson36-topk-list span,.lesson36-topk-list strong{font-size:15px;color:#475467}
.lesson36-topk-list strong{text-align:right;color:#344054}
.lesson36-ranking{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:20px 0}
.lesson36-ranking>div{padding:15px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center}
.lesson36-ranking span{display:block;color:#7c3aed;font-size:15px;font-weight:900}
.lesson36-ranking b{display:block;margin:6px 0;font-size:25px;color:#6d28d9}
.lesson36-ranking p{margin:0;font-size:15px!important}
.lesson36-filter{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:9px;align-items:center;margin:20px 0}
.lesson36-filter>div{padding:14px;border:1px solid var(--line);border-radius:10px;background:#fff}
.lesson36-filter-plus{border:0!important;background:none!important;color:#7c3aed!important;font-size:20px;font-weight:900}
.lesson36-filter-result{border-color:#ddd2f0!important;background:#faf8ff!important}
.lesson36-filter b{display:block;margin-top:5px;font-size:15px}
.lesson36-semantic{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:20px 0}
.lesson36-semantic>div{padding:15px;border:1px solid var(--line);border-radius:10px;background:#fff}
.lesson36-semantic span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#efe7ff;color:#6d28d9;font-weight:900;font-size:15px}
.lesson36-semantic b{display:block;margin:8px 0 5px;font-size:15px}
.lesson36-semantic p{margin:0!important;font-size:15px!important;line-height:1.5!important}
.lesson36-threshold,.lesson36-eval{grid-template-columns:repeat(3,1fr)}
.lesson36-mistakes{grid-template-columns:repeat(2,1fr)}
.lesson36-practice,.lesson36-quiz{margin:42px 0;padding:25px;border-radius:14px}
.lesson36-practice{border:1px solid #ddd2f0;background:#faf8ff}
.lesson36-quiz{border:1px solid var(--line);background:#fff}
.lesson36-practice-label{color:#7c3aed;font-size:15px;font-weight:900;letter-spacing:.08em}
.lesson36-practice h2,.lesson36-quiz h2{margin:7px 0 17px;font-size:28px}
.lesson36-practice>p{font-size:16px;color:#475467;line-height:1.7}
.lesson36-practice ol{padding-left:22px}
.lesson36-practice li{margin:8px 0;color:#475467;font-size:16px;line-height:1.6}
.lesson36-practice-box{margin-top:18px;padding:15px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#475467;font-size:15px;line-height:1.6}
.lesson36-practice-box strong{color:#6d28d9}
.lesson36-question{padding:15px 0;border-top:1px solid #edf0f3}
.lesson36-question strong{font-size:16px}
.lesson36-question p{margin:6px 0 0;font-size:16px;line-height:1.6}
.lesson36-recap{margin:42px 0;padding:25px;border-radius:14px;background:#172033;color:#fff}
.lesson36-recap h2{margin:6px 0 19px;font-size:28px;color:#fff}
.lesson36-recap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.lesson36-recap-grid>div{padding:15px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.05)}
.lesson36-recap-grid b,.lesson36-recap-grid span{display:block;font-size:15px}
.lesson36-recap-grid span{margin-top:5px;color:#cbd5e1;line-height:1.45}
.lesson36-takeaways{margin:42px 0;padding:25px;border:1px solid var(--line);border-radius:14px;background:#fff}
.lesson36-takeaways h2{margin:0 0 14px;font-size:28px}
.lesson36-takeaways li{margin:8px 0;color:#475467;font-size:16px;line-height:1.6}
.lesson36-bottom-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:42px}
.lesson36-bottom-nav a{display:block;padding:14px 16px;border:1px solid #ddd2f0;border-radius:10px;background:#fff;color:#5b21b6;text-decoration:none;font-size:15px;font-weight:800;line-height:1.45;text-align:center}
.lesson36-bottom-nav a:hover{background:#faf8ff}
@media(max-width:1050px){
.lesson36-content{padding-left:18px;padding-right:18px}
.lesson36-flow,.lesson36-db-flow,.lesson36-rag{grid-template-columns:repeat(2,minmax(0,1fr))}
.lesson36-flow>i,.lesson36-db-flow>i,.lesson36-rag>i{display:none}
.lesson36-semantic{grid-template-columns:repeat(2,1fr)}
.lesson36-recap-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
.lesson36-content{padding:18px 14px 55px}
.lesson36-hero{padding:24px 20px}
.lesson36-hero h1{font-size:36px}
.lesson36-hero p{font-size:17px}
.lesson36-section{grid-template-columns:30px minmax(0,1fr);gap:10px;margin:34px 0}
.lesson36-number{width:30px;height:30px}
.lesson36-body h2{font-size:25px}
.lesson36-flow,.lesson36-db-flow,.lesson36-rag,.lesson36-compare,.lesson36-filter{grid-template-columns:1fr}
.lesson36-flow>i,.lesson36-db-flow>i,.lesson36-rag>i,.lesson36-vs,.lesson36-filter-plus{display:none}
.lesson36-example-grid,.lesson36-metric-grid,.lesson36-threshold,.lesson36-eval,.lesson36-mistakes,.lesson36-record,.lesson36-ranking,.lesson36-semantic{grid-template-columns:1fr}
.lesson36-topk-list>div{grid-template-columns:32px minmax(0,1fr) 55px}
.lesson36-practice,.lesson36-quiz,.lesson36-recap,.lesson36-takeaways{padding:20px}
.lesson36-recap-grid{grid-template-columns:1fr}
.lesson36-bottom-nav{grid-template-columns:1fr}
.lesson36-bottom-nav a{width:100%;box-sizing:border-box}
}
@media(max-width:480px){
.lesson36-hero h1{font-size:32px}
.lesson36-body h2{font-size:23px}
.lesson36-objectives h2,.lesson36-practice h2,.lesson36-quiz h2,.lesson36-recap h2,.lesson36-takeaways h2{font-size:22px}
.lesson36-callout{grid-template-columns:1fr;gap:5px}
}