/* Lesson 8 only. Shared components are intentionally not styled here. */
.lesson8-page .lesson8-content { min-width:0; }
.lesson8-page .lesson8-breadcrumb { display:flex; flex-wrap:wrap; gap:7px; margin:2px 0 18px; color:#7b7390; font-size:14px; }
.lesson8-page .lesson8-breadcrumb a { color:#675f79; text-decoration:none; }
.lesson8-page .lesson8-breadcrumb a:hover { color:#651fff; }
.lesson8-page .lesson8-header { padding:0 0 28px; }
.lesson8-page .lesson8-kicker,.lesson8-page .lesson8-practice-label,.lesson8-page .lesson8-quiz-label { color:#651fff; font-size:14px; font-weight:800; letter-spacing:.07em; }
.lesson8-page .lesson8-header h1 { margin:7px 0 12px; color:#111827; font-size:clamp(38px,4vw,56px); line-height:1.08; letter-spacing:-.045em; }
.lesson8-page .lesson8-lead { max-width:830px; margin:0 0 12px; color:#4b5563; font-size:18px; line-height:1.7; }
.lesson8-page .lesson8-meta { display:flex; flex-wrap:wrap; gap:8px; color:#7a7287; font-size:14px; }
.lesson8-page .lesson8-objectives { margin:0 0 42px; padding:21px 23px; border:1px solid #e6ddec; border-radius:10px; background:#fff; }
.lesson8-page .lesson8-objectives h2 { margin:0 0 10px; color:#171526; font-size:20px; }
.lesson8-page .lesson8-objectives ul { margin:0; padding-left:21px; }
.lesson8-page .lesson8-objectives li { margin:6px 0; color:#454052; font-size:15px; line-height:1.65; }
.lesson8-page .lesson8-section { display:grid; grid-template-columns:32px minmax(0,1fr); gap:13px; margin:0 0 48px; scroll-margin-top:110px; }
.lesson8-page .lesson8-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; }
.lesson8-page .lesson8-section h2 { margin:0 0 10px; color:#111827; font-size:27px; line-height:1.3; }
.lesson8-page .lesson8-section p,.lesson8-page .lesson8-practice p,.lesson8-page .lesson8-quiz p,.lesson8-page .lesson8-recap li { color:#344054; font-size:16px; line-height:1.78; }
.lesson8-page .lesson8-section p { margin:0 0 12px; }
.lesson8-page .lesson8-pipeline,.lesson8-page .lesson8-example-grid,.lesson8-page .lesson8-two-col,.lesson8-page .lesson8-experiment-grid,.lesson8-page .lesson8-summary-grid { display:grid; gap:12px; margin-top:18px; }
.lesson8-page .lesson8-pipeline { grid-template-columns:1fr auto 1fr auto 1fr auto 1.2fr auto 1fr; align-items:stretch; }
.lesson8-page .lesson8-pipeline>div,.lesson8-page .lesson8-api-flow>div { padding:16px 13px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; }
.lesson8-page .lesson8-pipeline>div b { display:inline-flex; width:25px; height:25px; align-items:center; justify-content:center; border-radius:50%; background:#f0e6ff; color:#5f00dc; font-size:14px; }
.lesson8-page .lesson8-pipeline strong,.lesson8-page .lesson8-pipeline span { display:block; }
.lesson8-page .lesson8-pipeline strong { margin-top:8px; color:#172033; font-size:15px; }
.lesson8-page .lesson8-pipeline span { margin-top:4px; color:#667085; font-size:14px; line-height:1.45; }
.lesson8-page .lesson8-pipeline i,.lesson8-page .lesson8-api-flow i { align-self:center; color:#8b6eb5; font-style:normal; font-size:20px; }
.lesson8-page .lesson8-pipeline .is-focus { border-color:#b27cff; background:#faf5ff; }
.lesson8-page .lesson8-note,.lesson8-page .lesson8-mental-model,.lesson8-page .lesson8-explain { margin-top:16px; padding:13px 15px; border:1px solid #e4d7ef; border-radius:9px; background:#fbf7ff; color:#4b4458; font-size:14px; line-height:1.65; }
.lesson8-page .lesson8-note strong,.lesson8-page .lesson8-mental-model strong,.lesson8-page .lesson8-explain strong { color:#5f00dc; }
.lesson8-page .lesson8-token-example { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:18px 0; }
.lesson8-page .lesson8-token-input,.lesson8-page .lesson8-token-output { padding:17px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; }
.lesson8-page .lesson8-token-input span,.lesson8-page .lesson8-token-output>span { display:block; color:#651fff; font-size:14px; font-weight:800; letter-spacing:.07em; }
.lesson8-page .lesson8-token-input strong { display:block; margin-top:7px; color:#172033; font-size:18px; }
.lesson8-page .lesson8-token-output div { display:flex; flex-wrap:wrap; gap:7px; margin-top:8px; }
.lesson8-page .lesson8-token-output b { padding:6px 8px; border:1px solid #ddd6fe; border-radius:6px; background:#f5f3ff; color:#4c1d95; font-size:14px; }
.lesson8-page .lesson8-token-arrow { color:#8b6eb5; font-size:22px; }
.lesson8-page .lesson8-example-grid { grid-template-columns:1fr 1fr; }
.lesson8-page .lesson8-example-grid>div,.lesson8-page .lesson8-two-col>div,.lesson8-page .lesson8-experiment-grid>div { padding:16px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; }
.lesson8-page .lesson8-example-grid strong,.lesson8-page .lesson8-example-grid span { display:block; }
.lesson8-page .lesson8-example-grid strong { color:#651fff; font-size:14px; text-transform:uppercase; letter-spacing:.05em; }
.lesson8-page .lesson8-example-grid span { margin-top:7px; color:#667085; font-size:14px; line-height:1.6; }
.lesson8-page .lesson8-vector-card { display:grid; grid-template-columns:auto minmax(80px,1fr) auto minmax(180px,2fr); align-items:center; gap:12px; margin:18px 0; padding:18px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; }
.lesson8-page .lesson8-vector-label { color:#651fff; font-size:14px; font-weight:800; letter-spacing:.07em; }
.lesson8-page .lesson8-vector-card strong { color:#172033; font-size:21px; }
.lesson8-page .lesson8-vector-arrow { color:#8b6eb5; font-size:22px; }
.lesson8-page .lesson8-vector-card code { overflow:auto; color:#155e75; font-size:14px; }
.lesson8-page .lesson8-transformer-diagram { display:grid; gap:9px; margin-top:18px; }
.lesson8-page .lesson8-transformer-diagram>div { padding:15px 17px; border:1px solid #dfe4ec; border-radius:9px; background:#fff; }
.lesson8-page .lesson8-transformer-diagram>div.is-attention { border-color:#b27cff; background:#faf5ff; }
.lesson8-page .lesson8-transformer-diagram strong,.lesson8-page .lesson8-transformer-diagram span { display:block; }
.lesson8-page .lesson8-transformer-diagram strong { color:#172033; font-size:16px; }
.lesson8-page .lesson8-transformer-diagram span { margin-top:4px; color:#667085; font-size:14px; }
.lesson8-page .lesson8-transformer-diagram>b { justify-self:center; color:#8b6eb5; }
.lesson8-page .lesson8-attention-example { margin-top:18px; padding:18px; border:1px solid #dfe4ec; border-radius:10px; background:#fff; }
.lesson8-page .lesson8-sentence { color:#172033; font-size:17px; line-height:1.7; }
.lesson8-page .lesson8-sentence mark { padding:2px 5px; border-radius:5px; background:#f0e6ff; color:#5f00dc; }
.lesson8-page .lesson8-attention-lines { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin:16px 0 4px; color:#651fff; font-size:14px; text-align:center; }
.lesson8-page .lesson8-attention-lines b { padding:9px; border-top:2px solid #b27cff; border-bottom:2px solid #b27cff; font-size:14px; }
.lesson8-page .lesson8-attention-example p { margin:8px 0 0; color:#667085; font-size:14px; }
.lesson8-page .lesson8-two-col { grid-template-columns:1fr 1fr; }
.lesson8-page .lesson8-two-col strong { color:#172033; font-size:15px; }
.lesson8-page .lesson8-two-col p { margin:5px 0 0; color:#667085; font-size:14px; line-height:1.6; }
.lesson8-page .lesson8-probabilities { display:grid; gap:9px; margin-top:18px; }
.lesson8-page .lesson8-probabilities>div { display:grid; grid-template-columns:130px 55px minmax(100px,1fr); gap:10px; align-items:center; }
.lesson8-page .lesson8-probabilities span { color:#344054; font-size:14px; }
.lesson8-page .lesson8-probabilities b { color:#5f00dc; font-size:14px; }
.lesson8-page .lesson8-probabilities i { display:block; height:9px; border-radius:99px; background:#c4a7e7; }
.lesson8-page .lesson8-loop { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; margin-top:18px; }
.lesson8-page .lesson8-loop>div { padding:15px 12px; border:1px solid #dfe4ec; border-radius:9px; background:#fff; }
.lesson8-page .lesson8-loop strong,.lesson8-page .lesson8-loop span { display:block; }
.lesson8-page .lesson8-loop strong { color:#172033; font-size:14px; }
.lesson8-page .lesson8-loop span { margin-top:4px; color:#667085; font-size:14px; line-height:1.45; }
.lesson8-page .lesson8-loop>b { color:#8b6eb5; }
.lesson8-page .lesson8-generation-table { display:grid; margin-top:18px; border:1px solid #dfe4ec; border-radius:9px; overflow:hidden; background:#fff; }
.lesson8-page .lesson8-generation-table>div { display:grid; grid-template-columns:70px minmax(0,1fr) 100px; gap:10px; padding:11px 13px; border-top:1px solid #ece8f0; font-size:14px; }
.lesson8-page .lesson8-generation-table>div:first-child { border-top:0; background:#f7f4fa; color:#667085; font-size:14px; font-weight:800; }
.lesson8-page .lesson8-generation-table span { color:#667085; }
.lesson8-page .lesson8-generation-table b { color:#5f00dc; }
.lesson8-page .lesson8-api-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap:10px; margin:18px 0; }
.lesson8-page .lesson8-api-flow strong,.lesson8-page .lesson8-api-flow span { display:block; }
.lesson8-page .lesson8-api-flow strong { color:#172033; font-size:14px; }
.lesson8-page .lesson8-api-flow span { margin-top:4px; color:#667085; font-size:14px; line-height:1.45; }
.lesson8-page .lesson8-api-flow .is-model { border-color:#b27cff; background:#faf5ff; }
.lesson8-page .lesson8-code-block { margin:18px 0; overflow:hidden; border:1px solid #d9dee7; border-radius:10px; background:#fbfcfd; }
.lesson8-page .lesson8-code-head { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px; background:#f1f3f5; border-bottom:1px solid #d9dee7; }
.lesson8-page .lesson8-code-head>span { color:#172033; font-size:14px; font-weight:700; }
.lesson8-page .lesson8-code-head>div { display:flex; align-items:center; gap:8px; }
.lesson8-page .lesson8-code-head a,.lesson8-page .lesson8-code-head button { padding:6px 10px; border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#344054; font-size:14px; text-decoration:none; cursor:pointer; }
.lesson8-page .lesson8-code-head a:hover,.lesson8-page .lesson8-code-head button:hover { border-color:#9b72dc; color:#5f00dc; }
.lesson8-page .lesson8-code-head button.is-copied { border-color:#86efac; background:#f0fdf4; color:#166534; }
.lesson8-page .lesson8-code-block pre { margin:0; padding:18px; overflow:auto; background:#fbfcfd; }
.lesson8-page .lesson8-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; }
.lesson8-page .py-keyword { color:#7c3aed; font-weight:600; }
.lesson8-page .py-string { color:#00897b; }
.lesson8-page .py-built-in { color:#1565c0; }
.lesson8-page .lesson8-output { margin:10px 0 14px; padding:12px 14px; border:1px solid #e2e8f0; border-radius:8px; background:#f8fafc; }
.lesson8-page .lesson8-output strong { color:#172033; font-size:14px; }
.lesson8-page .lesson8-output code { display:block; margin-top:6px; color:#087f5b; font-size:14px; line-height:1.6; }
.lesson8-page .lesson8-experiment-grid { grid-template-columns:1fr 1fr; }
.lesson8-page .lesson8-experiment-grid span,.lesson8-page .lesson8-experiment-grid strong,.lesson8-page .lesson8-experiment-grid b { display:block; }
.lesson8-page .lesson8-experiment-grid span { color:#651fff; font-size:14px; font-weight:800; letter-spacing:.06em; }
.lesson8-page .lesson8-experiment-grid strong { margin-top:7px; color:#172033; font-size:15px; line-height:1.5; }
.lesson8-page .lesson8-experiment-grid b { margin-top:8px; color:#667085; font-size:14px; line-height:1.5; }
.lesson8-page .lesson8-break-fix { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.lesson8-page .lesson8-break-fix>div { padding:15px; border-radius:9px; }
.lesson8-page .lesson8-break-fix>div:first-child { border:1px solid #fecaca; background:#fff7f7; }
.lesson8-page .lesson8-break-fix>div:last-child { border:1px solid #bbf7d0; background:#f0fdf4; }
.lesson8-page .lesson8-break-fix strong { color:#172033; }
.lesson8-page .lesson8-break-fix p { margin:5px 0 0; font-size:14px; }
.lesson8-page .lesson8-summary-grid { grid-template-columns:repeat(3,1fr); }
.lesson8-page .lesson8-summary-grid>div { padding:15px; border:1px solid #dfe4ec; border-radius:9px; background:#fff; }
.lesson8-page .lesson8-summary-grid strong,.lesson8-page .lesson8-summary-grid span { display:block; }
.lesson8-page .lesson8-summary-grid strong { color:#172033; font-size:14px; }
.lesson8-page .lesson8-summary-grid span { margin-top:5px; color:#667085; font-size:14px; line-height:1.55; }
.lesson8-page .lesson8-practice { margin:0 0 42px; padding:22px; border:1px solid #e0d2ec; border-radius:12px; background:#fff; }
.lesson8-page .lesson8-practice h2,.lesson8-page .lesson8-quiz h2,.lesson8-page .lesson8-recap h2 { margin:5px 0 8px; color:#171526; font-size:24px; }
.lesson8-page .lesson8-practice-row { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 0; border-top:1px solid #ece8f0; }
.lesson8-page .lesson8-practice-row>span { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f0e6ff; color:#5f00dc; font-weight:800; font-size:14px; }
.lesson8-page .lesson8-practice-row strong { color:#344054; font-size:15px; line-height:1.5; }
.lesson8-page .lesson8-practice-row button { padding:7px 10px; border:1px solid #cfd6df; border-radius:6px; background:#fff; color:#344054; font-size:14px; cursor:pointer; }
.lesson8-page .lesson8-practice-row em { display:none; grid-column:2 / 4; color:#087f5b; font-style:normal; font-size:14px; line-height:1.6; }
.lesson8-page .lesson8-practice-row.is-revealed em { display:block; }
.lesson8-page .lesson8-practice-row.is-revealed button { display:none; }
.lesson8-page .lesson8-quiz { margin:0 0 42px; padding:22px; border:1px solid #ded0eb; border-radius:12px; background:#fbf7ff; }
.lesson8-page .lesson8-quiz-options { display:grid; gap:9px; margin-top:16px; }
.lesson8-page .lesson8-quiz-options button { padding:12px 14px; text-align:left; border:1px solid #d8d0df; border-radius:8px; background:#fff; color:#344054; font-size:15px; cursor:pointer; }
.lesson8-page .lesson8-quiz-options button:hover { border-color:#a98ad1; }
.lesson8-page .lesson8-quiz-options button.is-correct { border-color:#86efac; background:#f0fdf4; color:#166534; }
.lesson8-page .lesson8-quiz-options button.is-wrong { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.lesson8-page .lesson8-quiz-feedback { min-height:25px; margin-bottom:0 !important; font-weight:700; }
.lesson8-page .lesson8-recap { margin:0 0 42px; padding:22px; border:1px solid #e1d7e8; border-radius:12px; background:#fff; }
.lesson8-page .lesson8-recap ul { margin:0; padding-left:22px; }
.lesson8-page .lesson8-recap li { margin:7px 0; }
.lesson8-page .lesson8-navigation { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; }
.lesson8-page .lesson8-nav-card { display:block; padding:16px; border:1px solid #ded5e5; border-radius:10px; background:#fff; text-decoration:none; }
.lesson8-page .lesson8-nav-card span { display:block; color:#7b7390; font-size:14px; }
.lesson8-page .lesson8-nav-card strong { display:block; margin-top:5px; color:#4f00b8; font-size:15px; }
.lesson8-page .lesson8-nav-card.next { text-align:right; }
@media (max-width:1100px) {
    .lesson8-page .lesson8-pipeline { grid-template-columns:1fr auto 1fr auto 1fr; }
    .lesson8-page .lesson8-pipeline>i:nth-of-type(n+3),.lesson8-page .lesson8-pipeline>div:nth-of-type(n+7) { display:none; }
    .lesson8-page .lesson8-summary-grid { grid-template-columns:1fr 1fr; }
    .lesson8-page .lesson8-loop { grid-template-columns:1fr auto 1fr auto 1fr; }
    .lesson8-page .lesson8-loop>i:nth-of-type(n+3),.lesson8-page .lesson8-loop>div:nth-of-type(n+7) { display:none; }
    .lesson8-page .lesson8-api-flow { grid-template-columns:1fr auto 1fr auto 1fr; }
    .lesson8-page .lesson8-api-flow>i:nth-of-type(n+3),.lesson8-page .lesson8-api-flow>div:nth-of-type(n+5) { display:none; }
}
@media (max-width:760px) {
    .lesson8-page .lesson8-header h1 { font-size:36px; }
    .lesson8-page .lesson8-lead { font-size:16px; }
    .lesson8-page .lesson8-section { grid-template-columns:28px minmax(0,1fr); gap:9px; margin-bottom:40px; }
    .lesson8-page .lesson8-section h2 { font-size:23px; }
    .lesson8-page .lesson8-number { width:26px; height:26px; font-size:14px; }
    .lesson8-page .lesson8-pipeline,.lesson8-page .lesson8-token-example,.lesson8-page .lesson8-example-grid,.lesson8-page .lesson8-vector-card,.lesson8-page .lesson8-two-col,.lesson8-page .lesson8-loop,.lesson8-page .lesson8-api-flow,.lesson8-page .lesson8-experiment-grid,.lesson8-page .lesson8-break-fix,.lesson8-page .lesson8-summary-grid { grid-template-columns:1fr; }
    .lesson8-page .lesson8-pipeline>i,.lesson8-page .lesson8-loop>b,.lesson8-page .lesson8-api-flow>i { justify-self:center; transform:rotate(90deg); }
    .lesson8-page .lesson8-pipeline>i:nth-of-type(n+1),.lesson8-page .lesson8-pipeline>div:nth-of-type(n+1),.lesson8-page .lesson8-loop>div:nth-of-type(n+1),.lesson8-page .lesson8-api-flow>div:nth-of-type(n+1) { display:block; }
    .lesson8-page .lesson8-token-arrow,.lesson8-page .lesson8-vector-arrow { justify-self:center; transform:rotate(90deg); }
    .lesson8-page .lesson8-probabilities>div { grid-template-columns:90px 48px 1fr; }
    .lesson8-page .lesson8-generation-table>div { grid-template-columns:42px minmax(0,1fr) 70px; font-size:14px; }
    .lesson8-page .lesson8-attention-lines { grid-template-columns:1fr; }
    .lesson8-page .lesson8-attention-lines b { border-left:2px solid #b27cff; border-right:2px solid #b27cff; border-top:0; border-bottom:0; }
    .lesson8-page .lesson8-practice-row { grid-template-columns:28px minmax(0,1fr); }
    .lesson8-page .lesson8-practice-row button { grid-column:2; justify-self:start; }
    .lesson8-page .lesson8-practice-row em { grid-column:2; }
    .lesson8-page .lesson8-navigation { grid-template-columns:1fr; }
    .lesson8-page .lesson8-nav-card.next { text-align:left; }
    .lesson8-page .lesson8-code-head { align-items:flex-start; flex-direction:column; padding:9px 12px; }
    .lesson8-page .lesson8-code-head>div { width:100%; flex-wrap:wrap; }
    .lesson8-page .lesson8-code-head a,.lesson8-page .lesson8-code-head button { font-size:14px; }
    .lesson8-page .lesson8-code-block code { font-size:14px; }
}
@media (max-width:480px) {
    .lesson8-page .lesson8-header h1 { font-size:32px; }
    .lesson8-page .lesson8-objectives,.lesson8-page .lesson8-practice,.lesson8-page .lesson8-quiz,.lesson8-page .lesson8-recap { padding:18px; }
    .lesson8-page .lesson8-code-block pre { padding:14px; }
}