.lesson14-page,
.lesson14-page * { box-sizing: border-box; }
.lesson14-page { min-width: 0; }
.lesson14-content { padding: 22px 0 70px; color: #344054; }
.lesson14-breadcrumb { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0 0 12px; color:#667085; font-size:14px; line-height:1.5; }
.lesson14-breadcrumb a { color:#5b21b6; text-decoration:none; }
.lesson14-breadcrumb a:hover { text-decoration:underline; }
.lesson14-hero { border-bottom:1px solid #e7eaf0; padding-bottom:24px; }
.lesson14-label,.lesson14-practice-label,.lesson14-quiz-label { display:inline-flex; padding:6px 10px; border-radius:999px; background:#f1edff; color:#5b21b6; font-size:14px; line-height:1.2; font-weight:800; letter-spacing:.04em; }
.lesson14-hero h1 { margin:10px 0; color:#172033; font-size:42px; line-height:1.12; letter-spacing:-1px; }
.lesson14-hero p { max-width:760px; margin:0; color:#526173; font-size:18px; line-height:1.7; }
.lesson14-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; color:#667085; font-size:14px; }
.lesson14-objectives { margin:22px 0 30px; padding:18px 20px; border:1px solid #d9e5ff; border-radius:12px; background:#f5f8ff; }
.lesson14-objectives h2 { margin:0 0 9px; color:#244f91; font-size:18px; line-height:1.4; }
.lesson14-objectives ul { margin:0; padding-left:22px; }
.lesson14-objectives li { margin:7px 0; color:#41546b; font-size:15px; line-height:1.6; }
.lesson14-section { display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; margin:36px 0; scroll-margin-top:100px; }
.lesson14-number { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#5b21b6; color:#fff; font-size:15px; font-weight:800; }
.lesson14-body { min-width:0; }
.lesson14-body h2 { margin:0 0 10px; color:#172033; font-size:27px; line-height:1.3; }
.lesson14-body h3 { margin:0 0 7px; color:#1f2937; font-size:18px; line-height:1.35; }
.lesson14-body p { margin:0 0 13px; color:#475467; font-size:16px; line-height:1.75; }
.lesson14-body code,.lesson14-output code { padding:2px 5px; border-radius:5px; background:#f2f4f7; color:#344054; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; }
.lesson14-callout { display:grid; grid-template-columns:auto 1fr; gap:10px; margin:16px 0; padding:15px 17px; border:1px solid #ddd6fe; border-radius:10px; background:#faf8ff; color:#475467; font-size:15px; line-height:1.65; }
.lesson14-callout strong { color:#5b21b6; }
.lesson14-callout--green { border-color:#cce8db; background:#f5fbf8; }
.lesson14-callout--green strong { color:#147a55; }
.lesson14-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; align-items:stretch; gap:10px; margin-top:18px; }
.lesson14-flow > div { min-width:0; padding:15px 12px; border:1px solid #e1e5ec; border-radius:10px; background:#fff; box-shadow:0 3px 12px rgba(16,24,40,.04); text-align:center; }
.lesson14-flow b { display:block; color:#172033; font-size:16px; }
.lesson14-flow span { display:block; margin-top:5px; color:#667085; font-size:14px; line-height:1.5; }
.lesson14-flow i { align-self:center; color:#7c3aed; font-size:22px; font-style:normal; }
.lesson14-example-grid,.lesson14-impact-grid,.lesson14-mistakes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.lesson14-example-card,.lesson14-type-grid > div,.lesson14-three-cards > div,.lesson14-impact-grid > div,.lesson14-mistakes > div { min-width:0; padding:17px; border:1px solid #e4e7ec; border-radius:11px; background:#fff; }
.lesson14-example-tag { display:inline-block; margin-bottom:9px; color:#6941c6; font-size:14px; font-weight:800; }
.lesson14-example-card p,.lesson14-type-grid p,.lesson14-three-cards p,.lesson14-impact-grid p,.lesson14-mistakes p { font-size:15px; line-height:1.65; }
.lesson14-token-row,.lesson14-token-line { display:flex; flex-wrap:wrap; gap:7px; }
.lesson14-token-row span,.lesson14-token-line span { padding:7px 9px; border:1px solid #d6bbfb; border-radius:7px; background:#f7f2ff; color:#512da8; font-size:15px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.lesson14-note { margin-top:14px; padding:13px 15px; border-left:3px solid #7c3aed; background:#f8f9fc; color:#526173; font-size:15px; line-height:1.65; }
.lesson14-note strong { color:#344054; }
.lesson14-message { margin:15px 0; padding:16px 18px; border-left:4px solid #7c3aed; border-radius:8px; background:#f7f7fb; color:#27364a; font-size:17px; line-height:1.65; }
.lesson14-token-demo { margin:15px 0; padding:16px; overflow-x:auto; border:1px solid #e4e7ec; border-radius:10px; background:#fcfcfd; }
.lesson14-token-line { min-width:max-content; }
.lesson14-token-caption { margin-top:11px; color:#667085; font-size:14px; line-height:1.5; }
.lesson14-type-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.lesson14-type-grid > div strong,.lesson14-three-cards > div h3,.lesson14-impact-grid > div h3 { display:block; margin-bottom:7px; color:#344054; font-size:17px; }
.lesson14-three-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.lesson14-three-cards span { display:inline-flex; margin-bottom:10px; color:#7c3aed; font-size:14px; font-weight:800; }
.lesson14-diagram-wrap { margin:16px 0; overflow-x:auto; border:1px solid #e4e7ec; border-radius:12px; background:#fff; padding:10px; }
.lesson14-diagram-wrap img { display:block; width:100%; min-width:700px; height:auto; }
.lesson14-steps { margin:16px 0 0; padding-left:23px; }
.lesson14-steps li { margin:8px 0; color:#475467; font-size:15px; line-height:1.65; }
/* Documentation-style light Python blocks; minimum 14px. */
.lesson14-code { overflow:hidden; margin:16px 0; border:1px solid #d9dee7; border-radius:11px; background:#f8fafc; }
.lesson14-codebar { min-height:44px; display:flex; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid #d9dee7; background:#eef2f7; }
.lesson14-codebar > span { margin-right:auto; color:#344054; font-size:14px; font-weight:700; }
.lesson14-codebar div { display:flex; gap:8px; align-items:center; }
.lesson14-codebar button,.lesson14-codebar a { border:1px solid #cbd2dc; border-radius:6px; padding:7px 10px; background:#fff; color:#344054; font-size:14px; line-height:1.2; text-decoration:none; cursor:pointer; }
.lesson14-codebar button:hover,.lesson14-codebar a:hover { background:#f5f7fa; }
.lesson14-code pre { margin:0; padding:18px; overflow:auto; }
.lesson14-code code { padding:0; background:transparent; color:#263445; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:15px; line-height:1.7; white-space:pre; }
.lesson14-code .py-keyword { color:#7c3aed; font-weight:700; }
.lesson14-code .py-string { color:#087f5b; }
.lesson14-code .py-comment { color:#667085; font-style:italic; }
.lesson14-output { margin:13px 0; padding:12px 14px; border:1px solid #dfe3e8; border-radius:9px; background:#f8fafc; color:#475467; font-size:15px; line-height:1.6; }
.lesson14-output strong { margin-right:7px; color:#344054; }
.lesson14-comparison { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; margin:16px 0; }
.lesson14-comparison > div:not(.lesson14-comparison-arrow) { padding:17px; border:1px solid #e4e7ec; border-radius:11px; background:#fff; }
.lesson14-comparison-arrow { color:#7c3aed; font-size:32px; font-weight:800; }
.lesson14-big-number { margin-top:10px; color:#5b21b6; font-size:24px; font-weight:800; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.lesson14-mistakes > div strong { display:block; margin-bottom:7px; color:#344054; font-size:16px; }
.lesson14-practice { margin:42px 0 28px; padding:24px; border:1px solid #d9d0ff; border-radius:14px; background:#fbfaff; }
.lesson14-practice h2,.lesson14-quiz h2,.lesson14-recap h2 { margin:9px 0 9px; color:#172033; font-size:25px; line-height:1.3; }
.lesson14-practice p { margin:0 0 15px; color:#526173; font-size:16px; line-height:1.7; }
.lesson14-practice-btn { display:inline-flex; align-items:center; justify-content:center; margin-top:5px; padding:11px 16px; border-radius:8px; background:#5b21b6; color:#fff; text-decoration:none; font-size:15px; font-weight:700; }
.lesson14-practice-btn:hover { background:#4c1d95; }
.lesson14-quiz { margin:28px 0; padding:23px; border:1px solid #e4e7ec; border-radius:14px; background:#fff; }
.lesson14-quiz-label { background:#eef6ff; color:#1756a9; }
.lesson14-quiz-option { display:block; width:100%; margin:9px 0; padding:13px 15px; border:1px solid #dfe3e8; border-radius:9px; background:#fff; color:#344054; text-align:left; font-size:15px; line-height:1.5; cursor:pointer; }
.lesson14-quiz-option:hover { border-color:#b692f6; background:#faf8ff; }
.lesson14-quiz-option.is-correct { border-color:#86efac; background:#f0fdf4; }
.lesson14-quiz-option.is-wrong { border-color:#fca5a5; background:#fff1f2; }
.lesson14-quiz-feedback { min-height:24px; margin-top:10px; color:#475467; font-size:15px; font-weight:600; }
.lesson14-recap { margin:30px 0; padding:22px; border-radius:13px; background:#f8fafc; }
.lesson14-recap ul { margin:0; padding-left:22px; }
.lesson14-recap li { margin:7px 0; color:#475467; font-size:15px; line-height:1.65; }
.lesson14-bottom-nav { display:flex; justify-content:space-between; gap:14px; margin-top:35px; padding-top:20px; border-top:1px solid #e4e7ec; }
.lesson14-bottom-nav a { color:#5b21b6; text-decoration:none; font-size:15px; font-weight:700; line-height:1.5; }
.lesson14-bottom-nav a:hover { text-decoration:underline; }
@media (max-width: 900px) {
  .lesson14-flow { grid-template-columns:1fr; }
  .lesson14-flow i { transform:rotate(90deg); }
  .lesson14-type-grid,.lesson14-three-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .lesson14-content { padding-top:16px; }
  .lesson14-hero h1 { font-size:34px; }
  .lesson14-hero p { font-size:16px; }
  .lesson14-section { grid-template-columns:30px minmax(0,1fr); gap:10px; margin:30px 0; }
  .lesson14-number { width:30px; height:30px; font-size:14px; }
  .lesson14-body h2 { font-size:24px; }
  .lesson14-example-grid,.lesson14-impact-grid,.lesson14-mistakes,.lesson14-type-grid,.lesson14-three-cards,.lesson14-comparison { grid-template-columns:1fr; }
  .lesson14-comparison-arrow { transform:rotate(90deg); justify-self:center; }
  .lesson14-codebar { flex-wrap:wrap; }
  .lesson14-codebar > span { width:100%; }
  .lesson14-codebar div { width:100%; }
  .lesson14-codebar button,.lesson14-codebar a { flex:1; text-align:center; }
  .lesson14-diagram-wrap img { min-width:650px; }
  .lesson14-bottom-nav { flex-direction:column; }
}