/* The teaching object is one board, not a diagram followed by a second page of prose. */
.fourth-course-main:has(.l4-study){padding:16px 24px!important;max-width:1760px!important}.fourth-course-main:has(.l4-study) .l1-shell{grid-template-columns:174px minmax(0,1fr);gap:18px}.fourth-course-main:has(.l4-study) .l1-reading{padding:16px 20px}.fourth-course-main:has(.l4-study) .l1-reading>h1{font-size:28px;line-height:1.3;margin:6px 0 10px}.fourth-course-main:has(.l4-study) .l1-reading>.l1-lead{font-size:18px;line-height:1.55;margin:0 0 14px}.fourth-course-main:has(.l4-study) .level-note{padding:5px 12px;margin:6px 0 10px}.workspace:has(.l4-study) .topbar{height:54px}
.l4-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding:0 0 12px;border-bottom:1px solid #e1e8ef;margin-bottom:12px}.l4-toolbar .l1-switch{margin:0;gap:7px}.l4-toolbar button{padding:7px 12px;font-size:16px}.l4-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.l4-actions>span{font-size:15px;color:#72879a;margin-right:5px}.l4-study{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}.l4-program,.l4-understand{min-width:0}.l4-program .l1-pair{margin:0}.l4-program .l1-code,.l4-program .l1-output{padding:12px 14px}.l4-program .l1-code pre{font-size:18px;line-height:1.65;white-space:pre;overflow-wrap:normal;margin-top:8px}.l4-program .l1-code pre>span{min-height:1.65em}.l4-program .l1-output pre{font-size:18px;line-height:1.65;margin-top:7px}.l4-program .l1-output .l1-muted{margin-top:7px;font-size:17px}.l4-current{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;min-height:35px;padding:8px 0;font-size:16px;color:#55728a}.l4-current code{font-size:17px;color:#2e6486}.l4-keypoint{background:#fff8e6;border-left:3px solid #e9c567;border-radius:5px;padding:10px 13px;font-size:18px;line-height:1.6}.l4-keypoint strong{font-size:16px;color:#8a6a33}.l4-keypoint p{line-height:1.6;margin-top:3px}.l4-understand .l4-flow{width:100%;max-height:245px;min-height:100px;margin:0 0 8px}.l4-explanation{padding:12px 15px;background:#f2f7fc;border-radius:10px}.l4-explanation h2{font-size:18px;margin:0 0 6px;line-height:1.5}.l4-explanation p{font-size:18px;line-height:1.65;margin:0}.l4-error-help{padding:18px;background:#fff4ec;border-radius:10px;margin-bottom:12px;font-size:18px}.l4-study+.l1-quiz{margin-top:22px}
@media(min-width:1600px){.l4-understand .l4-flow{max-height:260px}.l4-explanation p,.l4-keypoint{font-size:20px}.l4-program .l1-code pre,.l4-program .l1-output pre{font-size:20px}}
@media(min-width:1000px) and (max-width:1250px){.fourth-course-main:has(.l4-study) .l1-shell{grid-template-columns:150px minmax(0,1fr)}.fourth-course-main:has(.l4-study) .l1-menu{position:sticky;max-height:85vh}.l4-study{gap:12px}.fourth-course-main:has(.l4-study) .l1-reading{padding:15px}.l4-understand .l4-flow{max-height:220px}}
@media(max-width:999px){.fourth-course-main:has(.l4-study) .l1-shell{display:block}.l4-study{grid-template-columns:1fr}.l4-understand .l4-flow{max-height:290px}.l4-toolbar{position:sticky;top:0;background:#fff;z-index:4;padding-top:8px}.fourth-course-main:has(.l4-study){padding:16px!important}.fourth-course-main:has(.l4-study) .l1-reading{padding:16px}.l4-keypoint{font-size:18px}}
@media(min-width:1000px){.fourth-course-main:has(.l4-study){position:relative}.fourth-course-main:has(.l4-study) .l1-shell{display:block}.fourth-course-main:has(.l4-study) .l1-menu{position:absolute;right:40px;top:22px;width:174px;z-index:10;background:white;border:1px solid #dce6ef;border-radius:9px;padding:0 10px;max-height:calc(100vh - 100px);overflow:auto;box-shadow:0 3px 10px #2c4d6810}.fourth-course-main:has(.l4-study) .l1-menu>summary{font-size:14px;padding:7px 0}.fourth-course-main:has(.l4-study) .l1-menu>summary>span{display:none}.fourth-course-main:has(.l4-study) .l1-menu[open]{width:250px;padding:8px 12px}.l4-study{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.l4-keypoint{margin-top:10px}.l4-understand .l4-flow{max-height:224px}.l4-explanation{padding:10px 14px}.l4-explanation p{line-height:1.6}.l4-keypoint{padding:8px 13px}.l4-keypoint strong{display:inline}.l4-keypoint p{display:inline;margin-left:8px}}