.lesson-mode-note{font-size:13px!important;color:var(--muted)!important;border-bottom:1px solid var(--border);padding-bottom:18px}
.optional-note,.optional-completion{border:1px solid var(--border);background:var(--soft);border-radius:9px;padding:16px 19px;margin:16px 0 24px;font-size:13px;line-height:1.65;color:var(--copy)}
.optional-note b{color:var(--ink)}
.lesson-walkthrough{margin-top:28px;padding-top:8px;border-top:1px solid var(--border)}
.lesson-walkthrough h2{font-size:21px!important}
.walkthrough-steps{padding-left:24px!important;counter-reset:none;display:grid;gap:14px}
.walkthrough-steps li{padding-left:5px;line-height:1.8}
.walkthrough-steps li::marker{font-weight:700;color:var(--blue)}
.walkthrough-result,.code-result{border-left:3px solid var(--blue);background:var(--soft);padding:14px 17px;margin:22px 0;border-radius:0 8px 8px 0}
.code-result b{font-size:12px;color:var(--ink)}
.code-result p{margin:6px 0 0!important}
.worked-example{padding-top:20px;margin-top:16px;min-width:0}
.worked-heading{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.worked-heading h3{font-size:19px!important;margin:0!important}
.code-location{font-size:13px!important;background:var(--soft);padding:12px;border-radius:7px;overflow-wrap:anywhere}
.lesson-code{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin:18px 0;background:#f6f8fc;min-width:0;max-width:100%}
.code-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px;background:var(--soft);border-bottom:1px solid var(--border);color:var(--muted);font-size:11px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.code-toolbar>span:first-child{overflow-wrap:anywhere;flex:1}
.copy-code{border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:6px;padding:7px 10px;font:600 11px inherit;cursor:pointer;min-height:32px}
.copy-code:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.copy-status{font-size:11px;color:var(--muted)}
.lesson-body .lesson-code pre{margin:0!important;border:0!important;border-radius:0!important;padding:18px!important;overflow:auto;background:#f6f8fc!important;color:#273347!important;max-width:100%;font-size:13px;line-height:1.75;tab-size:4}
.lesson-body .lesson-code code{padding:0!important;border:0!important;background:none!important;color:inherit;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre!important;word-break:normal!important;overflow-wrap:normal!important}
.syntax-keyword{color:#7c37ae}.syntax-string{color:#16694d}.syntax-number{color:#986119}.syntax-comment{color:#64748b}
:root[data-theme=dark] .lesson-code,:root[data-theme=dark] .lesson-body .lesson-code pre{background:#161d29!important;color:#d6dfef!important}
:root[data-theme=dark] .syntax-keyword{color:#c4a5ff}:root[data-theme=dark] .syntax-string{color:#92dfb8}:root[data-theme=dark] .syntax-number{color:#eac77e}:root[data-theme=dark] .syntax-comment{color:#99aac1}
.lesson-deeper{border:1px solid var(--border);border-radius:10px;margin:30px 0;background:var(--surface);overflow:hidden}
.lesson-deeper>summary{display:flex;align-items:center;gap:14px;padding:20px;list-style:none;cursor:pointer;min-height:76px}
.lesson-deeper>summary::-webkit-details-marker{display:none}
.lesson-deeper>summary>span:first-child{display:grid;gap:6px;flex:1}
.lesson-deeper>summary b{font-size:16px;color:var(--ink)}
.lesson-deeper>summary small{font-size:12px;color:var(--muted);font-weight:400}
.deeper-chevron{font-size:26px;color:var(--muted);transition:transform .15s}.lesson-deeper[open] .deeper-chevron{transform:rotate(90deg)}
.deeper-body{padding:0 22px 22px;border-top:1px solid var(--border)}
.lesson-references{padding:14px 0;font-size:13px;margin:20px 0}.lesson-references summary{cursor:pointer;color:var(--blue);font-weight:650}.lesson-references p{font-size:12px!important;color:var(--muted)}
.visual-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:30px}.visual-heading h3{margin:0!important;font-size:19px!important}.visual-heading small{font-size:11px;color:var(--muted)}
.lesson-figure{margin:18px 0 26px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.figure-open{border:0;display:block;position:relative;width:100%;padding:12px;background:var(--soft);cursor:zoom-in}.figure-open img{display:block;max-width:100%;max-height:420px;width:auto;height:auto;margin:auto;object-fit:contain}.figure-open>span{position:absolute;bottom:10px;right:10px;padding:5px 8px;border-radius:4px;background:#111c2ee8;color:white;font-size:11px}.lesson-figure figcaption{padding:16px;font-size:13px;line-height:1.6}.lesson-figure small{display:block;font-size:11px;color:var(--muted);margin-top:9px}
.lesson-figure.image-unavailable .figure-open{display:none}.lesson-figure.image-unavailable figcaption:before{content:'Reference image could not load. Use the official source below. ';display:block;color:var(--muted);margin-bottom:8px}
.lesson-image-dialog{position:fixed;inset:0;margin:auto;width:min(1100px,95vw);max-height:95dvh;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--ink);padding:20px;overflow:auto}.lesson-image-dialog::backdrop{background:#040910cf}.lesson-image-dialog>button{display:block;margin:0 0 16px auto}.lesson-image-dialog>img{display:block;max-width:100%;max-height:72dvh;object-fit:contain;margin:auto}.lesson-image-dialog>p{font-size:13px;line-height:1.6;margin-top:12px}
.optional-catalog{margin:26px 0;border:1px solid var(--border);border-radius:10px;padding:0 20px}.optional-catalog>summary{cursor:pointer;padding:20px 0;display:flex;gap:12px;justify-content:space-between;align-items:center;color:var(--ink);font-weight:700}.optional-catalog>p{font-size:13px;color:var(--muted);margin-bottom:18px}.optional-catalog .creator-catalog{margin-bottom:22px}
.outline-optionals{border-top:1px solid var(--border);padding:10px 0;margin-top:14px}.outline-optionals>summary{padding:14px;cursor:pointer;display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700}.outline-optionals>p{padding:0 14px;color:var(--muted);font-size:11px;line-height:1.6;margin-bottom:12px}.outline-optionals .outline-module>summary small{font-size:10px;color:var(--muted)}
.optional-badge{display:inline-flex;font-size:10px;font-weight:600;letter-spacing:.04em;border-radius:5px;padding:4px 6px;color:var(--muted);background:var(--soft);white-space:nowrap;margin-top:5px}
.optional-completion h3{font-size:20px;margin:12px 0}.optional-completion .button{margin-top:14px}
.core-complete-note{padding:18px;background:var(--soft);border:1px solid var(--border);border-radius:9px;margin:18px 0;font-size:13px;color:var(--copy)}
@media(max-width:600px){.deeper-body{padding:0 15px 15px}.lesson-deeper>summary{padding:16px;gap:8px}.lesson-deeper>summary small{font-size:11px}.figure-open{padding:6px}.lesson-figure figcaption{padding:13px}.code-toolbar{padding:8px}.lesson-image-dialog{padding:12px}.optional-catalog{padding:0 12px}}
@media(prefers-reduced-motion:reduce){.deeper-chevron{transition:none}}