lecture.css

.lecturePage .lecture{max-width:1100px}.lecturePage .intro p{max-width:850px}.lecturePage .lectureNav{background:#e1f3ed;border:1px solid #b7d9cf;border-radius:12px;padding:18px 22px;margin:24px 0}.lecturePage .lectureNav .links{display:flex;gap:12px 20px;flex-wrap:wrap;margin-top:12px}.lecturePage .lectureNav .buttons{margin:0}.lecturePage .technical{border-top:1px solid #d7e2df;padding-top:18px;margin-top:24px}.lecturePage .technical>summary{font-size:18px;color:#087e80;line-height:1.5}.lecturePage .technical h3{font-size:22px;margin:24px 0 12px}.lecturePage .technical p,.lecturePage .technical li{font-size:17px;line-height:1.65}.lecturePage .slide{scroll-margin-top:20px}.lecturePage .slide h2{font-size:clamp(26px,3vw,34px)}.lecturePage .twoColumns{display:grid;grid-template-columns:1fr 1fr;gap:25px}.lecturePage table{width:100%;font-size:16px}.lecturePage td,.lecturePage th{vertical-align:top}.lecturePage pre{background:#102d35;color:#e8f9f3;border-radius:10px;padding:20px;overflow:auto;font-size:15px;line-height:1.65;tab-size:2}.lecturePage pre code{background:none;padding:0;color:inherit}.lecturePage .equation{font:17px/1.7 Consolas,monospace;background:#f2f8f6;border-left:4px solid #087e80;padding:16px;overflow:auto}.lecturePage .source{font-size:13px;color:#537077}.lecturePage .source a{display:inline}.lecturePage .labControls{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center}.lecturePage .labControls label{margin:5px 0}.lecturePage input[type=number]{width:72px;padding:8px;font:inherit;border:1px solid #b5cfca;border-radius:6px}.lecturePage input[type=range]{max-width:100%;vertical-align:middle}.lecturePage .liveLab{border:2px solid #b7d9cf;padding:20px;border-radius:14px;margin:20px 0}.lecturePage .liveLab h3{margin-top:0}.lecturePage .liveLab canvas{position:static;display:block;object-fit:fill;height:auto;max-width:100%}.lecturePage .liveLab .demoPlot{width:100%;max-width:600px;border:1px solid #d7e2df;border-radius:8px}.lecturePage .cnnExamples{display:grid;grid-template-columns:1fr 1fr;gap:24px}.lecturePage .cnnLab canvas{position:static;display:block;width:192px;height:192px;max-width:100%;touch-action:none;background:#000;image-rendering:pixelated;border:2px solid #b7d9cf;border-radius:8px}.lecturePage .cnnLab #cnnFeature{width:192px;height:192px}.lecturePage .cnnLab #cnnHistory{max-height:260px;overflow:auto;padding-left:25px;font-size:14px}.lecturePage .cnnLab progress{width:100%}.lecturePage .cnnLab button{margin:4px 6px 4px 0}.lecturePage .cnnLab [role=status]{min-height:3em;line-height:1.5}.lecturePage .cnnLab #cnnPrediction,.lecturePage .cnnLab #cnnExampleResult{min-height:3em}.lecturePage .cnnLab .cnnMetrics{font-variant-numeric:tabular-nums}.lecturePage .handDiagram{width:100%;max-width:420px;height:auto;display:block;margin:10px auto}.lecturePage .professional{border-left:4px solid #7549bc;padding:10px 18px;background:#f7f4fc;margin:20px 0}.lecturePage .professional strong{color:#7549bc}.lecturePage #technicalReference>summary{font-size:25px}.lecturePage .referenceSlide{background:#fff;border:1px solid #d7e2df;border-radius:14px;padding:30px;margin:20px 0;scroll-margin-top:20px}.lecturePage .referenceSlide h2{font-size:27px}.lecturePage .runtimeFacts{font-size:15px;background:#e1f3ed;padding:12px 16px;border-radius:8px}.lecturePage [hidden]{display:none!important}@media(max-width:700px){.lecturePage .twoColumns,.lecturePage .cnnExamples{grid-template-columns:1fr}.lecturePage .slide{padding:23px}.lecturePage .referenceSlide{padding:20px}.lecturePage th,.lecturePage td{padding:9px}.lecturePage pre{font-size:13px;padding:13px}.lecturePage .liveLab{padding:14px}}@media print{.lecturePage .lectureNav,.lecturePage button,.lecturePage .labControls,.lecturePage .cnnLab{display:none}.lecturePage .slide{break-after:page;break-inside:auto}.lecturePage .technical{break-inside:auto}.lecturePage .technical>summary{color:#142d32}.lecturePage pre{white-space:pre-wrap;color:#142d32;background:#f2f8f6}.lecturePage .referenceSlide{break-before:page;border:0}.lecturePage .technical:not([open])>*:not(summary){display:none}}

.lecturePage pre{white-space:pre-wrap;overflow-wrap:anywhere}.lecturePage .cnnFeatureView{margin:24px 0}.lecturePage .cnnFeatureView label{margin:8px 0}
@media print{.lecturePage .cnnLab{display:block}.lecturePage .cnnLab .buttons,.lecturePage .cnnFeatureView label{display:none}.lecturePage .cnnExamples{grid-template-columns:1fr 1fr}}
.lecturePage nav{flex-wrap:wrap}.lecturePage code,.lecturePage td,.lecturePage th{overflow-wrap:anywhere}.lecturePage .equation{overflow-wrap:anywhere}
.lecturePage .reviewMap{padding:18px 22px;margin:24px 0;background:#fff;border:1px solid #b7d9cf;border-radius:12px}.lecturePage .reviewMap>summary{font-size:22px}.lecturePage .reviewMap table{margin:18px 0}.lecturePage #derivationReview>summary,.lecturePage #system-review>summary{font-size:24px;line-height:1.4}.lecturePage #derivationReview>p,.lecturePage #system-review>p{padding:0 12px}.lecturePage #derivationReview .mathSlide details{padding:14px 18px;background:#f2f8f6;border:1px solid #d7e2df;border-radius:8px}.lecturePage #derivationReview .mathSlide details summary{font-size:18px}.lecturePage #derivationReview .mathSlide details p{margin-bottom:0}

/* Start with the connected story; equations remain available by topic. */
.lecturePage .lectureOverview{background:#fff;border:2px solid #9fcac5;border-radius:20px;padding:34px;margin:28px 0;scroll-margin-top:24px}
.lecturePage .lectureOverview h2,.lecturePage .lectureTopics>h2{font-size:clamp(29px,3.8vw,42px);line-height:1.15;letter-spacing:-.025em}
.lecturePage .overviewLead{font-size:21px;line-height:1.6;max-width:900px}
.lecturePage .overviewFlow{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:26px 0}
.lecturePage .overviewFlow>span,.lecturePage .overviewFlow>div{flex:1 1 140px;background:#e1f3ed;border:1px solid #b7d9cf;border-radius:10px;padding:16px;font-size:18px;line-height:1.45;position:relative}
.lecturePage .overviewFlow strong{display:block;color:#075e63;font-size:20px;margin-bottom:5px}
.lecturePage .overviewFlow small{display:block;font-size:15px;line-height:1.5}
.lecturePage .overviewFlow>span:not(:last-child)::after,.lecturePage .overviewFlow>div:not(:last-child)::after{content:'→';position:absolute;right:-15px;top:calc(50% - 12px);font-size:23px;font-weight:bold;color:#087e80;z-index:1}
.lecturePage .overviewGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0}
.lecturePage .overviewCard{background:#f2f8f6;border:1px solid #d7e2df;border-radius:12px;padding:22px;min-width:0}
.lecturePage .overviewCard h3{font-size:24px;line-height:1.3;margin:0 0 12px}
.lecturePage .overviewCard p{margin:10px 0;font-size:17px;line-height:1.65}
.lecturePage .overviewCard ol,.lecturePage .overviewCard ul{padding-left:23px;line-height:1.65}
.lecturePage .overviewCard li{margin:8px 0}
.lecturePage .overviewWalkthrough{background:#142d32;color:#e8f9f3;padding:25px;border-radius:14px;margin:25px 0}
.lecturePage .overviewWalkthrough h3{font-size:26px;margin:0 0 12px}
.lecturePage .overviewWalkthrough p{font-size:18px;line-height:1.65}
.lecturePage .overviewWalkthrough a{color:#a5efe3}
.lecturePage .overviewWalkthrough strong{color:#a5efe3}
.lecturePage .overviewTakeaway{font-size:21px;line-height:1.55;border-left:4px solid #087e80;background:#e1f3ed;padding:18px 22px}
.lecturePage .overviewTime{font-size:15px;color:#537077;line-height:1.65}
.lecturePage .lectureTopics{margin:45px 0;scroll-margin-top:24px}
.lecturePage .topicGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:25px 0}
.lecturePage .topicCard{background:#fff;border:1px solid #b7d9cf;border-radius:14px;padding:24px;min-width:0;display:flex;flex-direction:column}
.lecturePage .topicCard:last-child{grid-column:1/-1}
.lecturePage .topicCard h3{font-size:24px;line-height:1.3;margin:8px 0 12px}
.lecturePage .topicNumber{font-size:13px;font-weight:bold;color:#087e80;letter-spacing:.08em;text-transform:uppercase}
.lecturePage .topicCard p{font-size:17px;line-height:1.6;margin:10px 0}
.lecturePage .topicQuestion{font-weight:bold;color:#36505d}
.lecturePage .topicLinks{display:flex;gap:10px 18px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.lecturePage .topicLinks a{font-size:16px;font-weight:bold;line-height:1.5}
.lecturePage .chapterHeading{margin:50px 0 20px;padding:25px 28px;background:#e1f3ed;border-left:6px solid #087e80;border-radius:0 14px 14px 0;scroll-margin-top:24px}
.lecturePage .chapterHeading h2{font-size:clamp(27px,3vw,35px);line-height:1.2;margin:7px 0 12px}
.lecturePage .chapterHeading p{font-size:18px;line-height:1.6;margin:10px 0}
.lecturePage .chapterHeading .chapterLinks{display:flex;gap:12px 22px;flex-wrap:wrap;font-size:16px}
.lecturePage .lectureNav .overviewButton{display:inline-block;background:#087e80;color:white;padding:11px 14px;border-radius:8px;text-decoration:none;font-size:17px;font-weight:bold}
.lecturePage .overviewEntryLinks{display:flex;gap:12px 25px;flex-wrap:wrap;margin:20px 0}
.lecturePage .overviewEntryLinks a{font-weight:bold;font-size:18px}
.lecturePage .extendedHeading{margin-top:50px;padding-top:28px;border-top:3px solid #9fcac5;scroll-margin-top:24px}
.lecturePage .extendedHeading h2{font-size:32px}
.lecturePage .toolChoice{background:white;border:1px solid #9fcac5;border-radius:16px;padding:30px;margin:30px 0;scroll-margin-top:24px}.lecturePage .toolChoice h2{font-size:32px;line-height:1.25}.lecturePage .toolChoice p{font-size:18px;line-height:1.65}.lecturePage .toolChoice table{font-size:16px}.lecturePage .nextStep{background:#e1f3ed;border:1px solid #b7d9cf;border-radius:12px;padding:22px;margin:30px 0;display:flex;gap:15px;align-items:center;flex-wrap:wrap}.lecturePage .nextStep a{font-size:19px;font-weight:bold}
@media(max-width:700px){
 .lecturePage .lectureOverview{padding:22px 18px}
 .lecturePage .overviewLead{font-size:19px}
 .lecturePage .overviewGrid,.lecturePage .topicGrid{grid-template-columns:1fr}
 .lecturePage .overviewCard,.lecturePage .topicCard{padding:19px}
 .lecturePage .overviewFlow{display:grid;grid-template-columns:1fr;gap:16px}
 .lecturePage .overviewFlow>span:not(:last-child)::after,.lecturePage .overviewFlow>div:not(:last-child)::after{content:'↓';right:calc(50% - 7px);top:auto;bottom:-20px}
 .lecturePage .chapterHeading{padding:20px}
 .lecturePage .lectureOverview table{font-size:14px}
}
@media print{
 .lecturePage .lectureOverview{break-before:auto;border:0;padding:12px}
 .lecturePage .overviewCard,.lecturePage .topicCard{break-inside:avoid}
 .lecturePage .overviewWalkthrough{color:#142d32;background:#f2f8f6}
 .lecturePage .overviewWalkthrough strong,.lecturePage .overviewWalkthrough a{color:#075e63}
 .lecturePage .chapterHeading{break-before:page}
 .lecturePage .overviewEntryLinks,.lecturePage .chapterLinks{display:none}
}

/* Sequential lecture concepts: presentation first, optional worked detail. */
.lecturePage .overviewBullets{margin:24px 0;padding-left:28px}
.lecturePage .conceptBullets{padding-left:27px;max-width:920px}
.lecturePage .conceptBullets li{font-size:clamp(19px,2vw,23px);line-height:1.55;margin:15px 0;padding-left:5px}
.lecturePage .conceptStart{display:inline-block;font-size:19px;font-weight:700;margin:8px 0}
.lecturePage .lectureTopics{margin:30px 0}
.lecturePage .lectureTopics>h2{font-size:28px}
.lecturePage .conceptIndex{display:flex;flex-wrap:wrap;gap:12px 30px;list-style-position:inside;padding:0;margin:20px 0}
.lecturePage .conceptIndex li{font-size:17px;line-height:1.6}
.lecturePage .lectureConcept{margin:30px 0;padding:30px;background:#fff;border:1px solid #b7d9cf;border-radius:16px;scroll-margin-top:24px}
.lecturePage .lectureConcept>h2{font-size:clamp(28px,3.2vw,38px);line-height:1.22;margin:10px 0 20px}
.lecturePage .learningPriority{border:2px solid #087e80;background:#f1faf7;box-shadow:0 4px 20px #087e800a}
.lecturePage .learningLoop{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0 15px}
.lecturePage .learningLoop span{background:#d9eee7;color:#075e63;border-radius:8px;padding:10px 15px;font-size:19px;font-weight:700}
.lecturePage .learningLoop span:not(:last-child)::after{content:' →';margin-left:12px}
.lecturePage .conceptCheckpoint{font-size:18px;line-height:1.6}
.lecturePage .conceptActions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.lecturePage .conceptActions a{background:#087e80;color:#fff;padding:13px 18px;border-radius:9px;text-decoration:none;font-size:18px;font-weight:700;line-height:1.4}
.lecturePage .conceptActions a:hover{background:#065e63}
.lecturePage .topicDetails{margin-top:25px;border-top:1px solid #c6dcd5;padding-top:18px}
.lecturePage .topicDetails>summary{color:#087e80;font-size:18px;font-weight:700;line-height:1.55;cursor:pointer}
.lecturePage .topicDetails>summary:hover{text-decoration:underline}
.lecturePage .topicDetailBody{padding-top:12px;min-width:0}
.lecturePage .topicDetailBody>.slide{margin:20px 0;padding:25px;min-width:0}
.lecturePage .topicDetailBody .toolChoice,.lecturePage .topicDetailBody .lectureOverview{margin:20px 0;padding:22px}
.lecturePage .lectureSelfStudy{padding:20px;border:1px solid #b7d9cf;border-radius:12px;margin:25px 0;background:#fff}
.lecturePage .lectureSelfStudy>summary{font-size:20px;color:#087e80}
@media(max-width:700px){.lecturePage .lectureConcept{padding:22px 18px}.lecturePage .topicDetailBody>.slide{padding:18px 12px}.lecturePage .conceptIndex{display:block;padding-left:8px}.lecturePage .conceptIndex li{margin:9px 0}.lecturePage .conceptActions{flex-direction:column}.lecturePage .conceptActions a{font-size:17px}.lecturePage .learningLoop span{font-size:17px}}
@media print{.lecturePage .lectureConcept{break-inside:auto;border:1px solid #ccc;margin:18px 0}.lecturePage .lectureConcept>h2{break-after:avoid}.lecturePage .conceptActions{display:none}}

.lecturePage #bpVisual{scroll-margin-top:22px}.lecturePage .animationReturn{font-size:18px;line-height:1.6}.lecturePage #learning-animation>.topicDetailBody{padding-top:18px}