/* Lesson 58 — What is an AI Agent? */
.lesson60-page { font-size:16px; }
.lesson60-page, .lesson60-page * { box-sizing:border-box; }
.lesson60-content { max-width:860px; margin:0 auto; color:#14213d; }
.lesson60-content p, .lesson60-content li, .lesson60-content span, .lesson60-content a, .lesson60-content button { font-size:max(15px,1em); }
.lesson60-breadcrumb { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:10px 0 20px; color:#667085; font-size:15px; }
.lesson60-breadcrumb a { color:#4f46e5; text-decoration:none; }
.lesson60-hero { padding:30px 34px; border:1px solid #e5e7eb; border-radius:22px; background:linear-gradient(135deg,#f4f7ff 0%,#fbf7ff 55%,#f4fbff 100%); box-shadow:0 10px 30px rgba(31,41,55,.05); }
.lesson60-label { display:inline-flex; padding:7px 12px; border-radius:999px; background:#ede9fe; color:#5b21b6; font-weight:800; letter-spacing:.04em; font-size:14px!important; }
.lesson60-hero h1 { margin:14px 0 10px; font-size:46px; line-height:1.08; letter-spacing:-.035em; color:#101a3a; }
.lesson60-hero > p { margin:0; max-width:760px; font-size:18px!important; line-height:1.7; color:#344054; }
.lesson60-meta { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; color:#667085; font-size:15px; }
.lesson60-objectives { margin:24px 0; padding:25px 28px; border:1px solid #dbeafe; border-radius:18px; background:#f7fbff; }
.lesson60-objectives h2 { margin:0 0 12px; font-size:25px; line-height:1.25; }
.lesson60-objectives ul { margin:0; padding-left:23px; }
.lesson60-objectives li { margin:9px 0; line-height:1.6; }
.lesson60-section { display:grid; grid-template-columns:44px minmax(0,1fr); gap:15px; padding:30px 0; border-bottom:1px solid #e5e7eb; }
.lesson60-number { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid #c7d2fe; border-radius:50%; color:#4338ca; background:#f5f3ff; font-weight:800; font-size:15px!important; }
.lesson60-body h2 { margin:0 0 11px; font-size:29px; line-height:1.25; letter-spacing:-.02em; }
.lesson60-body h3 { margin:7px 0 5px; font-size:19px; line-height:1.3; }
.lesson60-body p { margin:10px 0; line-height:1.72; color:#27364f; }
.lesson60-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.lesson60-card, .lesson60-check, .lesson60-stage, .lesson60-project > div, .lesson60-compare > div { min-width:0; border:1px solid #e1e7ef; border-radius:15px; padding:18px; background:#fff; box-shadow:0 5px 16px rgba(15,23,42,.035); }
.lesson60-card span, .lesson60-stage span, .lesson60-project span, .lesson60-compare span { display:block; margin-bottom:7px; color:#6d28d9; font-weight:800; font-size:13px!important; letter-spacing:.06em; }
.lesson60-card b, .lesson60-project b, .lesson60-compare b { display:block; font-size:18px!important; line-height:1.35; }
.lesson60-card p, .lesson60-stage p, .lesson60-project p, .lesson60-compare p { margin:7px 0 0; }
.lesson60-stage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0; }
.lesson60-stage { background:#fafaff; }
.lesson60-flow { display:flex; align-items:stretch; gap:8px; margin:18px 0; overflow-x:auto; padding-bottom:4px; }
.lesson60-flow > div { flex:1 1 150px; min-width:135px; border:1px solid #ddd6fe; border-radius:14px; padding:15px; background:#fbfaff; }
.lesson60-flow > b { align-self:center; flex:0 0 auto; font-size:21px!important; color:#7c3aed; }
.lesson60-flow div b { display:block; font-size:16px!important; }
.lesson60-flow div span { display:block; margin-top:5px; color:#667085; font-size:15px!important; }
.lesson60-callout { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; margin:18px 0; padding:16px 18px; border-left:4px solid #6366f1; border-radius:10px; background:#f8fafc; line-height:1.65; }
.lesson60-callout strong { white-space:nowrap; font-size:16px!important; }
.lesson60-callout span { min-width:0; line-height:1.65; }
.lesson60-checklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.lesson60-check { background:#fbfffd; }
.lesson60-check b { font-size:17px!important; }
.lesson60-check p { margin-top:6px; }
.lesson60-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.lesson60-compare > div:first-child { background:#f8fafc; }
.lesson60-compare > div:last-child { background:#faf5ff; border-color:#ddd6fe; }
.lesson60-project { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.lesson60-project > div { background:#f9fafb; }
.lesson60-quiz { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.lesson60-quiz > div { min-width:0; padding:18px; border:1px solid #e1e7ef; border-radius:15px; background:#fff; }
.lesson60-quiz b { display:block; font-size:17px!important; line-height:1.45; }
.lesson60-quiz p { margin:9px 0 0; }
.lesson60-recap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.lesson60-recap > div { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start; padding:13px 15px; border:1px solid #e5e7eb; border-radius:13px; background:#fff; }
.lesson60-recap b { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#eef2ff; color:#4338ca; font-size:15px!important; }
.lesson60-recap span { line-height:1.55; min-width:0; }
.lesson60-code-note { font-size:15px!important; color:#667085!important; }
.lesson60-bottom-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:25px 0 45px; }
.lesson60-bottom-nav a { min-width:0; display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:11px 14px; border:1px solid #dbe1ea; border-radius:12px; color:#24324a; text-decoration:none; background:#fff; line-height:1.4; }
.lesson60-bottom-nav a:hover { border-color:#a5b4fc; background:#f8f7ff; }
.sah-lesson-main { min-width:0; }
.sah-lesson-main pre { min-width:0; }
@media (max-width:900px){ .lesson60-content{max-width:100%;} .lesson60-stage-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:760px){ .lesson60-hero{padding:24px 20px;border-radius:18px;} .lesson60-hero h1{font-size:36px;} .lesson60-hero > p{font-size:17px!important;} .lesson60-section{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:24px 0;} .lesson60-number{width:32px;height:32px;} .lesson60-body h2{font-size:25px;} .lesson60-grid,.lesson60-checklist,.lesson60-compare,.lesson60-project,.lesson60-quiz,.lesson60-recap{grid-template-columns:1fr;} .lesson60-stage-grid{grid-template-columns:1fr;} .lesson60-flow{margin-right:-4px;} .lesson60-callout{grid-template-columns:1fr;gap:3px;} .lesson60-callout strong{white-space:normal;} .lesson60-bottom-nav{grid-template-columns:1fr;margin-bottom:30px;} }
@media (max-width:480px){ .lesson60-hero h1{font-size:32px;} .lesson60-breadcrumb{margin-top:4px;} .lesson60-objectives{padding:20px;} .lesson60-objectives h2{font-size:22px;} .lesson60-card,.lesson60-check,.lesson60-stage,.lesson60-project > div,.lesson60-compare > div,.lesson60-quiz > div{padding:16px;} }