/* Lesson 4 only. Shared chrome/layout is separate. */
/* Lesson 4 only — namespaced to prevent interference with other lessons. */
.lesson4-content{background:#fff;border:1px solid #e3ddea;border-radius:8px;padding:26px 24px 38px;box-shadow:0 1px 2px rgba(24,12,35,.02)}
.lesson4-breadcrumb{font-size:14px;color:#7a7182;margin-bottom:17px}.lesson4-breadcrumb span{padding:0 7px;color:#b0a7b7}
.lesson4-kicker{font-size:14px;letter-spacing:.08em;font-weight:900;color:#7711f3;margin-bottom:4px}
.lesson4-content h1{font-size:40px;line-height:1.12;letter-spacing:-.03em;margin:0 0 12px}.lesson4-lead{font-size:17px;line-height:1.72;color:#433b49;margin:0 0 20px}
.lesson4-callout{background:#f8eaff;border:1px solid #dfbaff;border-radius:8px;padding:15px 16px;color:#5f0cae;margin:18px 0}.lesson4-callout strong{font-size:15px}.lesson4-callout p{margin:3px 0 0}
.lesson4-content hr{border:0;border-top:1px solid #ece7ef;margin:24px 0}.lesson4-content h2{font-size:24px;line-height:1.25;margin:25px 0 8px}.lesson4-content p{color:#3f3747}
.lesson4-visual{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;background:#fcfaff;border:1px solid #e5dcec;border-radius:9px;padding:17px;margin:17px 0}.lesson4-visual__box{border:1px solid #d9cce3;border-radius:7px;background:#fff;padding:12px;text-align:center;min-height:88px;display:flex;flex-direction:column;justify-content:center}.lesson4-visual__box span{font-size:14px;letter-spacing:.07em;color:#7612ed;font-weight:900}.lesson4-visual__box strong{font-size:14px;line-height:1.4}.lesson4-visual__box--model{background:#f5e8ff;border-color:#cfa7ee}.lesson4-visual__arrow{font-size:25px;color:#7612ed;font-weight:800}
.lesson4-example{border:1px solid #e2d9e7;border-radius:8px;padding:15px 16px;background:#fff}.lesson4-example__label{font-size:14px;font-weight:900;letter-spacing:.08em;color:#7612ed;margin-top:5px}.lesson4-example p{margin:2px 0 11px}
.lesson4-note{padding-left:13px;border-left:3px solid #a45be9}
.lesson4-code{position:relative;border:1px solid #d9cde2;border-radius:9px;overflow:hidden;background:#fff;margin:15px 0 10px}.lesson4-code__bar{height:43px;border-bottom:1px solid #ded5e5;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:14px;font-weight:800;color:#342c3a}.lesson4-code__bar a{margin-left:auto;border:1px solid #d8cde0;border-radius:6px;padding:6px 9px;color:#31293a;background:#fff;font-size:14px}.lesson4-copy{position:absolute;right:119px;top:7px;border:1px solid #d8cde0;border-radius:6px;background:#fff;padding:6px 9px;font-weight:800;font-size:14px;z-index:2}.lesson4-code pre{margin:0;padding:22px 20px;overflow:auto;background:#fff;font:15px/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;color:#24202a}.lesson4-code code{font:inherit}.lesson4-output{border:1px solid #e0d7e5;background:#fbf9fc;border-radius:7px;padding:8px 12px;font:14px ui-monospace,SFMono-Regular,Menlo,monospace}.lesson4-output span{font:11px sans-serif;font-weight:900;letter-spacing:.07em;color:#7b7081;margin-right:10px}
.lesson4-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.lesson4-grid div{border:1px solid #e1d9e5;border-radius:8px;padding:13px;background:#fff}.lesson4-grid strong{display:block;font-size:15px}.lesson4-grid span{display:block;font-size:14px;color:#6c6271;margin-top:2px;line-height:1.45}
.lesson4-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0}.lesson4-flow div{border:1px solid #dfd6e5;border-radius:8px;padding:13px;background:#fcfaff}.lesson4-flow b{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:50%;background:#eedcff;color:#7410ed;margin-bottom:7px}.lesson4-flow strong,.lesson4-flow span{display:block}.lesson4-flow strong{font-size:14px}.lesson4-flow span{font-size:14px;line-height:1.45;color:#706677}
.lesson4-warning{border-left:4px solid #8b21ee;background:#f9f1ff;padding:13px 15px;border-radius:0 7px 7px 0;margin:18px 0}
.lesson4-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.lesson4-compare div{border:1px solid #e0d7e5;border-radius:8px;padding:15px}.lesson4-compare strong{font-size:16px}.lesson4-compare p{font-size:14px;margin:5px 0}.lesson4-compare span{display:block;background:#faf7fc;border-radius:6px;padding:9px;font:13px ui-monospace,monospace}
.lesson4-practice{border:1px solid #d9c7e5;border-radius:9px;background:#fcf8ff;padding:18px}.lesson4-practice__level{font-size:14px;font-weight:900;letter-spacing:.08em;color:#7711f3}.lesson4-practice h3{margin:2px 0 7px;font-size:19px}.lesson4-practice ol{margin:8px 0 14px;padding-left:21px}.lesson4-practice__button{display:inline-block;background:#7511ef;color:#fff;border-radius:7px;padding:9px 13px;font-weight:800;font-size:14px}
.lesson4-quiz{border:1px solid #e1d8e7;border-radius:8px;padding:15px}.lesson4-quiz__answer{border:1px solid #e0d7e5;border-radius:6px;padding:9px 11px;margin:7px 0;font-size:14px}.lesson4-quiz__tip{background:#f8efff;border-radius:6px;padding:10px;margin:12px 0 0!important;font-size:14px}
.lesson4-recap{background:#f6f0fa;border:1px solid #ded3e5;border-radius:8px;padding:15px 17px;margin-top:24px}.lesson4-recap strong{font-size:17px}.lesson4-recap ul{margin:6px 0 0;padding-left:20px}
.lesson4-nextprev{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.lesson4-nextprev a{border:1px solid #ddd4e4;border-radius:8px;padding:12px 14px;font-weight:800;color:#4a4051}.lesson4-nextprev a:last-child{text-align:right}.lesson4-nextprev span{display:block;font-size:14px;color:#7711f3;margin-top:2px}
@media(max-width:760px){.lesson4-content{border-radius:7px;padding:20px 16px 30px}.lesson4-content h1{font-size:32px}.lesson4-lead{font-size:16px}.lesson4-content h2{font-size:22px}.lesson4-visual{grid-template-columns:1fr;gap:7px}.lesson4-visual__arrow{transform:rotate(90deg);text-align:center}.lesson4-grid,.lesson4-flow,.lesson4-compare{grid-template-columns:1fr}.lesson4-code pre{font-size:14px;padding:18px 14px}.lesson4-copy{right:110px}.lesson4-code__bar a{font-size:14px}.lesson4-nextprev{grid-template-columns:1fr}.lesson4-nextprev a:last-child{text-align:left}}