/* Lesson 5 only. No shared component selectors live in this file. */
.lesson5-page .lesson5-content { min-width: 0; }
.lesson5-page .lesson5-breadcrumb { display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 18px; color:#7b7390; font-size:14px; }
.lesson5-page .lesson5-breadcrumb a { color:#675f79; text-decoration:none; }
.lesson5-page .lesson5-breadcrumb a:hover { color:#651fff; }
.lesson5-page .lesson5-header { padding:0 0 28px; }
.lesson5-page .lesson5-kicker,.lesson5-page .lesson5-label,.lesson5-page .lesson5-practice-label,.lesson5-page .lesson5-quiz-label { color:#651fff; font-size:14px; font-weight:800; letter-spacing:.07em; }
.lesson5-page .lesson5-header h1 { margin:7px 0 12px; color:#111827; font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:-.045em; }
.lesson5-page .lesson5-lead { max-width:820px; margin:0 0 12px; color:#4b5563; font-size:18px; line-height:1.7; }
.lesson5-page .lesson5-meta { display:flex; flex-wrap:wrap; gap:8px; color:#7a7287; font-size:14px; }
.lesson5-page .lesson5-objectives { margin:0 0 42px; padding:21px 23px; border:1px solid #e6ddec; border-radius:10px; background:#fff; }
.lesson5-page .lesson5-objectives h2 { margin:0 0 10px; color:#171526; font-size:20px; }
.lesson5-page .lesson5-objectives ul { margin:0; padding-left:21px; }
.lesson5-page .lesson5-objectives li { margin:6px 0; color:#454052; font-size:15px; line-height:1.65; }
.lesson5-page .lesson5-section { display:grid; grid-template-columns:32px minmax(0,1fr); gap:13px; margin:0 0 48px; scroll-margin-top:110px; }
.lesson5-page .lesson5-number { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#651fff; color:#fff; font-size:14px; font-weight:800; }
.lesson5-page .lesson5-section h2 { margin:0 0 10px; color:#111827; font-size:27px; line-height:1.3; }
.lesson5-page .lesson5-section h3 { margin:22px 0 8px; color:#172033; font-size:19px; }
.lesson5-page .lesson5-section p,.lesson5-page .lesson5-practice p,.lesson5-page .lesson5-quiz p,.lesson5-page .lesson5-recap li { color:#344054; font-size:16px; line-height:1.78; }
.lesson5-page .lesson5-section p { margin:0 0 12px; }
.lesson5-page .lesson5-message-card { margin:16px 0; padding:18px 20px; background:#fff; border:1px solid #dfe4ec; border-left:4px solid #651fff; border-radius:10px; }
.lesson5-page .lesson5-message-card p { margin:9px 0 0; font-size:17px; }
.lesson5-page .lesson5-two-col,.lesson5-page .lesson5-worked-grid,.lesson5-page .lesson5-decision-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.lesson5-page .lesson5-type-card,.lesson5-page .lesson5-worked-card { padding:20px; border:1px solid #dfe4ec; border-radius:12px; background:#fff; }
.lesson5-page .lesson5-type-card.traditional { border-top:4px solid #2563eb; }
.lesson5-page .lesson5-type-card.generative { border-top:4px solid #7c3aed; }
.lesson5-page .lesson5-type-card h3 { margin:10px 0 9px; }
.lesson5-page .lesson5-pill { color:#475467; }
.lesson5-page .lesson5-big-output { margin:12px 0; padding:10px 12px; background:#f7f8fa; border-radius:8px; color:#111827; font-size:22px; font-weight:800; }
.lesson5-page .lesson5-flow,.lesson5-page .lesson5-pipeline { display:grid; align-items:center; gap:10px; margin:20px 0; }
.lesson5-page .lesson5-flow { grid-template-columns:1fr auto 1fr auto 1fr; }
.lesson5-page .lesson5-flow > div { padding:15px 12px; text-align:center; background:#f8fafc; border:1px solid #dfe4ec; border-radius:10px; }
.lesson5-page .lesson5-flow strong,.lesson5-page .lesson5-flow span { display:block; }
.lesson5-page .lesson5-flow strong { color:#172033; font-size:16px; }
.lesson5-page .lesson5-flow span { margin-top:4px; color:#667085; font-size:14px; }
.lesson5-page .lesson5-flow > b { color:#667085; font-size:22px; }
.lesson5-page .lesson5-code-block { margin:18px 0; overflow:hidden; border:1px solid #d9dee7; border-radius:10px; background:#fbfcfd; }
.lesson5-page .lesson5-code-head { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#f1f3f5; border-bottom:1px solid #d9dee7; }
.lesson5-page .lesson5-code-head span { color:#172033; font-size:14px; font-weight:700; }
.lesson5-page .lesson5-code-head button { padding:6px 10px; border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#344054; font-size:14px; cursor:pointer; }
.lesson5-page .lesson5-code-head button.is-copied { border-color:#86efac; background:#f0fdf4; color:#166534; }
.lesson5-page .lesson5-code-block pre { margin:0; padding:18px; overflow:auto; background:#fbfcfd; }
.lesson5-page .lesson5-code-block code { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; color:#26364d; font-size:15px; line-height:1.65; white-space:pre; }
.lesson5-page .py-keyword { color:#7c3aed; font-weight:600; }
.lesson5-page .py-string { color:#00897b; }
.lesson5-page .py-built-in { color:#1565c0; }
.lesson5-page .py-number { color:#d97706; }
.lesson5-page .py-comment { color:#64748b; }
.lesson5-page .lesson5-output { display:flex; gap:12px; align-items:center; margin:10px 0 14px; padding:11px 14px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; font-size:14px; }
.lesson5-page .lesson5-output code { color:#087f5b; font-size:14px; }
.lesson5-page .lesson5-explain { padding:12px 14px; background:#f7f9fc; border-radius:8px; }
.lesson5-page .lesson5-key-note,.lesson5-page .lesson5-note,.lesson5-page .lesson5-rule { padding:14px 16px; background:#fff8e8; border:1px solid #f3dfaa; border-radius:9px; color:#5f4b16 !important; }
.lesson5-page .lesson5-visual-compare { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; margin:20px 0; }
.lesson5-page .lesson5-visual-compare > div:not(.lesson5-visual-arrow) { padding:18px; border:1px solid #dfe4ec; border-radius:11px; background:#fff; }
.lesson5-page .lesson5-visual-compare span,.lesson5-page .lesson5-visual-compare strong,.lesson5-page .lesson5-visual-compare small { display:block; }
.lesson5-page .lesson5-visual-compare span { color:#651fff; font-size:14px; font-weight:800; }
.lesson5-page .lesson5-visual-compare strong { margin:9px 0; color:#172033; font-size:19px; }
.lesson5-page .lesson5-visual-compare small { color:#667085; font-size:14px; }
.lesson5-page .lesson5-visual-arrow { color:#667085; font-size:24px; }
.lesson5-page .lesson5-table-wrap { margin-top:18px; overflow-x:auto; border:1px solid #dfe4ec; border-radius:10px; }
.lesson5-page .lesson5-table { width:100%; min-width:700px; border-collapse:collapse; }
.lesson5-page .lesson5-table th,.lesson5-page .lesson5-table td { padding:13px 14px; text-align:left; border-bottom:1px solid #e5e7eb; font-size:15px; line-height:1.55; }
.lesson5-page .lesson5-table th { background:#f5f7fa; color:#172033; font-weight:800; }
.lesson5-page .lesson5-table td { color:#344054; }
.lesson5-page .lesson5-worked-card > span { color:#651fff; font-size:14px; font-weight:800; }
.lesson5-page .lesson5-worked-card h3 { margin-top:8px; }
.lesson5-page .lesson5-worked-card p { font-size:15px; }
.lesson5-page .lesson5-verdict { padding-top:10px; border-top:1px solid #e5e7eb; }
.lesson5-page .lesson5-pipeline { grid-template-columns:1fr auto 1fr auto 1fr; }
.lesson5-page .lesson5-pipeline > div { padding:17px 13px; text-align:center; border:1px solid #dfe4ec; border-radius:10px; background:#f8fafc; }
.lesson5-page .lesson5-pipeline b { display:inline-flex; width:27px; height:27px; align-items:center; justify-content:center; border-radius:50%; background:#651fff; color:#fff; font-size:14px; }
.lesson5-page .lesson5-pipeline strong,.lesson5-page .lesson5-pipeline span { display:block; }
.lesson5-page .lesson5-pipeline strong { margin-top:8px; color:#172033; font-size:16px; }
.lesson5-page .lesson5-pipeline span { margin-top:4px; color:#667085; font-size:14px; line-height:1.5; }
.lesson5-page .lesson5-pipeline i { color:#667085; font-size:22px; font-style:normal; }
.lesson5-page .lesson5-decision-grid > div { padding:16px; border:1px solid #dfe4ec; border-radius:10px; }
.lesson5-page .lesson5-decision-grid strong,.lesson5-page .lesson5-decision-grid span { display:block; }
.lesson5-page .lesson5-decision-grid strong { color:#172033; font-size:16px; }
.lesson5-page .lesson5-decision-grid span { margin-top:5px; color:#667085; font-size:15px; }
.lesson5-page .lesson5-mistakes { display:grid; gap:10px; }
.lesson5-page .lesson5-mistakes > div { padding:15px 16px; border:1px solid #e4e7ec; border-radius:9px; }
.lesson5-page .lesson5-mistakes strong { color:#172033; font-size:16px; }
.lesson5-page .lesson5-mistakes p { margin:5px 0 0; font-size:15px; }
.lesson5-page .lesson5-practice { margin:0 0 34px; padding:24px; background:#f6f8ff; border:1px solid #dbe4ff; border-radius:12px; }
.lesson5-page .lesson5-practice h2,.lesson5-page .lesson5-quiz h2,.lesson5-page .lesson5-recap h2 { margin:6px 0 9px; color:#111827; font-size:25px; }
.lesson5-page .lesson5-practice-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; padding:13px 0; border-top:1px solid #dfe5f1; }
.lesson5-page .lesson5-practice-row > span { color:#651fff; font-weight:800; }
.lesson5-page .lesson5-practice-row strong { color:#344054; font-size:15px; }
.lesson5-page .lesson5-practice-row button { padding:7px 10px; border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#344054; font-size:14px; cursor:pointer; }
.lesson5-page .lesson5-practice-row em { display:none; grid-column:2/4; padding:9px 11px; background:#fff; border-radius:7px; color:#087f5b; font-size:14px; font-style:normal; }
.lesson5-page .lesson5-practice-row.is-revealed em { display:block; }
.lesson5-page .lesson5-quiz { margin-bottom:34px; padding:24px; background:#fff; border:1px solid #dfe4ec; border-radius:12px; }
.lesson5-page .lesson5-quiz-options { display:grid; gap:9px; margin-top:16px; }
.lesson5-page .lesson5-quiz-options button { padding:13px 15px; text-align:left; border:1px solid #d8dee7; border-radius:8px; background:#fff; color:#344054; font-size:15px; line-height:1.5; cursor:pointer; }
.lesson5-page .lesson5-quiz-options button.is-correct { border-color:#86efac; background:#f0fdf4; }
.lesson5-page .lesson5-quiz-options button.is-wrong { border-color:#fca5a5; background:#fef2f2; }
.lesson5-page .lesson5-quiz-feedback { min-height:24px; margin-top:12px; font-weight:700; }
.lesson5-page .lesson5-recap { padding:22px; background:#f8fafc; border:1px solid #dfe4ec; border-radius:12px; }
.lesson5-page .lesson5-recap ul { margin:0; padding-left:21px; }
.lesson5-page .lesson5-recap li { margin:6px 0; font-size:15px; }
.lesson5-page .lesson5-navigation { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; }
.lesson5-page .lesson5-nav-card { display:block; padding:15px 16px; border:1px solid #dfe4ec; border-radius:9px; color:#344054; text-decoration:none; background:#fff; }
.lesson5-page .lesson5-nav-card:hover { border-color:#b9a0ff; }
.lesson5-page .lesson5-nav-card span,.lesson5-page .lesson5-nav-card strong { display:block; }
.lesson5-page .lesson5-nav-card span { color:#667085; font-size:14px; }
.lesson5-page .lesson5-nav-card strong { margin-top:5px; color:#172033; font-size:15px; }
.lesson5-page .lesson5-nav-card.next { text-align:right; background:#651fff; border-color:#651fff; }
.lesson5-page .lesson5-nav-card.next span,.lesson5-page .lesson5-nav-card.next strong { color:#fff; }

@media (max-width:1000px) {
    .lesson5-page .lesson5-two-col,.lesson5-page .lesson5-worked-grid,.lesson5-page .lesson5-decision-grid { grid-template-columns:1fr; }
    .lesson5-page .lesson5-pipeline { grid-template-columns:1fr; }
    .lesson5-page .lesson5-pipeline i { justify-self:center; transform:rotate(90deg); }
}
@media (max-width:760px) {
    .lesson5-page .lesson5-header h1 { font-size:36px; }
    .lesson5-page .lesson5-lead { font-size:17px; }
    .lesson5-page .lesson5-section { grid-template-columns:28px minmax(0,1fr); gap:10px; margin-bottom:42px; }
    .lesson5-page .lesson5-section h2 { font-size:24px; }
    .lesson5-page .lesson5-flow { grid-template-columns:1fr; }
    .lesson5-page .lesson5-flow > b { justify-self:center; transform:rotate(90deg); }
    .lesson5-page .lesson5-visual-compare { grid-template-columns:1fr; }
    .lesson5-page .lesson5-visual-arrow { justify-self:center; transform:rotate(90deg); }
    .lesson5-page .lesson5-practice-row { grid-template-columns:28px 1fr; }
    .lesson5-page .lesson5-practice-row button { grid-column:2; justify-self:start; }
    .lesson5-page .lesson5-navigation { grid-template-columns:1fr; }
    .lesson5-page .lesson5-nav-card.next { text-align:left; }
    .lesson5-page .lesson5-code-block code { font-size:14px; }
}
@media (max-width:480px) {
    .lesson5-page .lesson5-header h1 { font-size:32px; }
    .lesson5-page .lesson5-lead { font-size:16px; }
    .lesson5-page .lesson5-objectives,.lesson5-page .lesson5-practice,.lesson5-page .lesson5-quiz,.lesson5-page .lesson5-recap { padding:18px; }
    .lesson5-page .lesson5-code-block pre { padding:14px; }
    .lesson5-page .lesson5-message-card p { font-size:16px; }
}