/* The selected light B palette; original images, SVG artwork and module colors stay intact. */
:root {
  --course-paper: var(--palette-paper,#fdfcf9);
  --course-surface: #fff;
  --course-soft: var(--palette-soft,#f3eff6);
  --course-tint: var(--palette-tint,#f2edf8);
  --course-selected: var(--palette-selected,#ede5f6);
  --course-ink: var(--palette-ink,#292633);
  --course-heading: var(--palette-heading,#392b50);
  --course-muted: var(--palette-muted,#666170);
  --course-brand: var(--palette-brand,#7250a9);
  --course-brand-hover: var(--palette-hover,#60408f);
  --course-line: var(--palette-line,#e3dfe6);
  --course-purple-line: var(--palette-border,#d8cde6);
  --course-code: var(--palette-soft,#f5f2f8);
}
.course-connected {
  --green: var(--course-brand);
  --navy: var(--course-heading);
  --line: var(--course-line);
  --muted: var(--course-muted);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  color: var(--course-ink);
  background: var(--course-paper);
  color-scheme: light;
  accent-color: var(--course-brand);
  min-height: 100vh;
}
html:has(body.course-connected) { background: var(--course-paper); }
.course-connected :is(a,button,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--course-brand);
  outline-offset: 3px;
}
.course-connected :is(h1,h2,h3,h4) { color: var(--course-heading); letter-spacing: -.025em; }
.course-connected :is(h1,h2) { font-weight: 650; }
.course-connected :is(button,a,summary) { -webkit-tap-highlight-color: transparent; }
.course-connected button { font-family: inherit; }
.course-connected :is(input,video) { accent-color: var(--course-brand); }
.course-connected .topbar .brand { display: inline-flex; gap: 0; }
.course-connected .topbar :is(a,small) { line-height: 1.5; }
.course-connected .topbar nav a:hover { color: var(--course-brand); }
.course-connected .course-breadcrumb { max-width: 1390px; }
.course-connected .guide { max-width: 1390px; padding: 24px 40px 0; }
.course-connected .guide-layout { grid-template-columns: 236px minmax(0,1fr); gap: 32px; }
.course-connected .guide-title { margin: 28px 0; }
.course-connected .guide-title h1 { font-size: 30px; line-height: 1.45; }
.course-connected .guide-title .eyebrow { font-size: 11px; }
.course-connected .route-nav ol { border-color: var(--course-line); background: var(--course-surface); border-radius: 9px; }
.course-connected .route-nav a { min-height: 62px; padding: 12px 9px; }
.course-connected .route-nav :is(small,.route-index) { color: var(--palette-muted,#81758e); }
.course-connected .route-nav a:hover:not([aria-current]) { background: var(--course-soft); color: var(--course-brand-hover); }
.course-connected .route-nav a[aria-current] { background: var(--course-brand); color: white; }
.course-connected .route-nav a[aria-current] :is(small,.route-index) { color: #f3eafd; }
.course-connected .course-return { background: var(--course-tint); border-color: var(--course-purple-line); border-radius: 7px; min-height: 44px; }
.course-connected .course-return:hover { background: var(--course-selected); }
.course-connected .layer-switch { background: var(--course-soft); border-color: var(--course-line); border-radius: 9px; padding: 4px; }
.course-connected .layer-switch button { border-radius: 6px; min-height: 60px; }
.course-connected .layer-switch button:hover { background: var(--palette-selected,#eae2f2); }
.course-connected .layer-switch button[aria-selected=true] { color: var(--course-brand-hover); background: var(--course-surface); box-shadow: 0 1px 4px color-mix(in srgb, var(--palette-heading,#392b50) 5.098%, transparent); }
.course-connected .layer-switch span { color: var(--course-muted); font-size: 11px; }
.course-connected .layer-caption { color: var(--course-brand); }
.course-connected .lesson-outline { border-radius: 9px; background: var(--course-surface); }
.course-connected .lesson-outline>summary { color: var(--course-heading); padding: 15px 16px; }
.course-connected .lesson-toc-scroll { scrollbar-color: var(--palette-border,#d8cde6) transparent; max-height: calc(100vh - 292px); }
.course-connected :is(.lesson-toc-scroll nav>a,.toc-group>a,.reader-nav nav>a) { color: var(--course-muted); font-size: 13px; line-height: 1.8; }
.course-connected .toc-group .toc-chapter { color: var(--course-heading); }
.course-connected .toc-group .toc-subsection { font-size: 12px; }
.course-connected :is(.lesson-toc-scroll a:hover,.reader-nav nav>a:hover) { color: var(--course-brand); background: var(--course-soft); }
.course-connected :is(.lesson-toc-scroll a[aria-current=location],.reader-nav nav>a.current) { background: var(--course-selected); color: var(--course-brand-hover); border-left-color: var(--course-brand); }
.course-connected .guide-pager { background: color-mix(in srgb, var(--palette-paper,#fdfcf9) 96.078%, transparent); border-color: var(--course-line); padding: 15px 0; }
.course-connected .guide-pager :is(.previous,.next) { font-size: 12px; }
.course-connected .guide-pager a.next { background: var(--course-brand); border-radius: 7px; padding: 13px 22px; }
.course-connected .guide-pager a.next:hover { background: var(--course-brand-hover); }
.course-connected .guide-pager a>span { font-size: 14px; }

/* Reading surfaces and the same hierarchy on knowledge, interview and source pages. */
.course-connected :is(.knowledge-doc,.source-card,.framework-reading,.note-section,.document-reader>.source) {
  background: var(--course-surface); border-color: var(--course-line); border-radius: 12px; box-shadow: none;
}
.course-connected :is(.knowledge-doc-title,.doc-content,.guide .source-card,.framework-reading) { padding-left: 32px; padding-right: 32px; }
.course-connected .knowledge-doc-title h2 { font-size: 25px; line-height: 1.6; color: var(--course-heading); }
.course-connected :is(.knowledge-section .source,.guide .source-card>.source,.document-reader>.source,.quote-content) { font-size: 16px; line-height: 1.95; color: var(--course-ink); }
.course-connected .knowledge-section .source h2 { font-size: 23px; color: var(--course-heading); }
.course-connected .knowledge-section .source h3 { font-size: 19px; color: var(--course-heading); }
.course-connected :is(.doc-intro,.framework-instruction,.source-version-note,.session-meta,.original-intro,.group-info) { color: var(--course-muted); line-height: 1.9; }
.course-connected .framework-reading>h2 { color: var(--course-heading); }
.course-connected :is(.source blockquote,.session-meta blockquote,.source-comment,.memory-clarification) {
  background: var(--course-soft); border-left: 3px solid var(--course-brand); color: var(--palette-hover,#554566); border-radius: 0 6px 6px 0;
}
.course-connected .source-comment pre { color: var(--course-ink); background: transparent; }
.course-connected :is(.source-comment>span,.excerpt-label,.implementation-path,.implementation-references>span,.framework-legend,.framework-location p>span) { color: var(--course-muted); }
.course-connected .source th { color: var(--course-heading); background: var(--course-tint); }
.course-connected .source tbody tr:nth-child(even) { background: var(--palette-soft,#faf8fc); }
.course-connected .source :is(th,td) { border-color: var(--course-line); }
.course-connected .source-path { border-bottom-color: var(--course-purple-line); }
.course-connected :is(.source-type,.course-index,.section-number,.plus,.framework-location strong,.diagram-backlink) { color: var(--course-brand); }
.course-connected :is(.framework-location,.recordings,.related-source) { border-color: var(--course-line); background: var(--course-surface); }
.course-connected .document-toc a { background: var(--course-soft); border-color: var(--course-purple-line); color: var(--course-brand-hover); font-size: 12px; }
.course-connected .document-toc a:hover { background: var(--course-selected); }
.course-connected :is(.document-reader,.code-reader,.figure-reader,.notes-directory) { padding-top: 36px; }
.course-connected .document-reader { max-width: 1100px; }
.course-connected .document-reader h1 { font-size: 32px; }
.course-connected .notes-directory h1 { font-size: 34px; }
.course-connected .note-section>summary { padding: 22px 26px; }
.course-connected .note-section>summary h2 { color: var(--course-heading); }
.course-connected .note-section>summary:hover { background: var(--course-soft); }
.course-connected :is(.layer,.step-diagram article,.guide .step-diagram article,.memory-grid article:nth-child(n)) { background: var(--course-soft); border-color: var(--course-purple-line); }
.course-connected :is(.layer,.guide .step-diagram article) { border-left-color: var(--course-brand); }
.course-connected .step-diagram article { border-top-color: var(--course-brand); }
.course-connected .layer strong { color: var(--course-heading); }
.course-connected .layer span { border-left-color: var(--course-purple-line); }

/* Keep artwork colors; only recolor its surrounding controls and interactive overlays. */
.course-connected :is(.map-card,.knowledge-figure,.knowledge-section .knowledge-figure,.note-figure) { border-color: var(--course-purple-line); background: var(--course-tint); border-radius: 12px; }
.course-connected .map-heading { background: var(--course-tint); border-bottom: 1px solid var(--course-purple-line); padding: 17px 20px; }
.course-connected .map-heading strong { color: var(--course-heading); font-size: 14px; font-weight: 650; }
.course-connected .map-caption { padding: 15px 20px; }
.course-connected .map-details { border-top-color: var(--course-purple-line); background: var(--course-paper); }
.course-connected .map-details>summary { color: var(--course-muted); }
.course-connected .detail-images>div { background: var(--course-soft); }
.course-connected :is(.knowledge-figure figcaption strong,.dock-title) { color: var(--course-heading); }
.course-connected .knowledge-figure figcaption>span { color: var(--course-muted); }
.course-connected :is(.image-open,[data-flow-toggle],.dock-actions button,.dock-actions a,.module-expand,[data-map-reset],.map-expand-controls button,.patch-actions button,.patch-toolbar button,.figure-links a) {
  color: var(--course-brand-hover); background: var(--course-surface); border-color: var(--course-purple-line); border-radius: 6px;
}
.course-connected :is(.image-open,[data-flow-toggle],.dock-actions button,.dock-actions a,.map-expand-controls button,.figure-links a) { min-height: 32px; }
.course-connected :is(.image-open,[data-flow-toggle],.dock-actions button,.dock-actions a,.module-expand,.map-expand-controls button,.patch-toolbar button,.figure-links a):hover { background: var(--course-selected); border-color: var(--course-brand); }
.course-connected :is(.patch-toolbar button[aria-expanded=true],.figure-links a.is-active) { color: var(--course-brand-hover); background: var(--course-selected); border-color: var(--course-brand); }
.course-connected .hotspot.is-current { border: 4px solid var(--course-brand); box-shadow: 0 0 0 2px white,0 0 0 5px color-mix(in srgb, var(--palette-brand,#7250a9) 16.863%, transparent); background: color-mix(in srgb, var(--palette-brand,#7250a9) 3.137%, transparent); }
.course-connected .current-node-label { background: var(--course-brand); color: white; font-weight: 600; }
.course-connected :is(.hotspot:hover,.hotspot:focus-visible,.figure-hotspot:hover:not(.is-active),.figure-hotspot:focus-visible) { border-color: var(--course-brand); background: color-mix(in srgb, var(--palette-brand,#7250a9) 7.059%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--palette-brand,#7250a9) 16.863%, transparent); }
.course-connected :is(.figure-hotspot.is-active,.focus-crop .figure-hotspot.is-active) { border-color: var(--course-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--palette-brand,#7250a9) 18.824%, transparent); background: color-mix(in srgb, var(--palette-brand,#7250a9) 8.235%, transparent); }
.course-connected .focus-crop { outline-color: var(--course-brand); }
.course-connected .source-detail-stage .focus-crop { outline-color: var(--course-purple-line); }
.course-connected .flow-trace { stroke: var(--course-brand); }
.course-connected .diagram-dock { background: var(--course-paper); border: 1px solid var(--course-purple-line); border-radius: 10px; box-shadow: 0 6px 24px color-mix(in srgb, var(--palette-heading,#392b50) 10.98%, transparent); }
.course-connected :is(.dock-position,.dock-current,.diagram-dock:has(.focus-layout) .dock-current,.diagram-dock:has(.source-detail-stage) .dock-current) { color: var(--course-brand-hover); }
.course-connected .dock-stage { background: var(--course-soft); }
.course-connected .dock-stage .hotspot.is-current { border-color: var(--course-brand); box-shadow: 0 0 0 1px white,0 0 0 3px color-mix(in srgb, var(--palette-brand,#7250a9) 16.863%, transparent); }
.course-connected .diagram-target-active { outline-color: var(--course-brand); }
.course-connected tr.diagram-target-active { background: var(--course-selected)!important; }
.course-connected dialog { background: var(--course-paper); border-color: var(--course-purple-line); }
.course-connected dialog::backdrop { background: #241c35aa; }
.course-connected .dialog-head { background: var(--course-tint); color: var(--course-heading); border-bottom-color: var(--course-purple-line); }
.course-connected .dialog-head button { min-height: 40px; padding: 8px 14px; border: 1px solid var(--course-purple-line); background: var(--course-surface); border-radius: 6px; }

/* Code stays light for long reading, with shared purple references and line highlights. */
.course-connected :is(.code-bundle,.code-symbols) { background: var(--course-soft); border-color: var(--course-line); border-radius: 10px; }
.course-connected :is(.code-links a,.code-line>a) { border-color: var(--course-line); }
.course-connected :is(.code-symbols a,.implementation-references>a,.implementation-card h3 code) { background: var(--course-selected); border-color: var(--course-purple-line); color: var(--course-brand-hover); }
.course-connected :is(.implementation-code,.source pre,.source-card .source pre) { background: var(--course-code); color: var(--palette-ink,#352e40); border: 1px solid var(--course-line); border-radius: 8px; }
.course-connected .source-comment pre { background: transparent; border: 0; padding: 0; }
.course-connected .code-file { color: var(--palette-ink,#352e40); background: #fffeff; border-color: var(--course-line); font-size: 13px; line-height: 1.9; border-radius: 10px; }
.course-connected .code-line>a { color: var(--palette-muted,#81758e); background: var(--course-code); }
.course-connected .code-line:target,.course-connected .code-line:target>a { background: var(--course-selected); color: var(--course-brand-hover); }
.course-connected .code-reader h1 { color: var(--course-heading); }

/* Video and downloads use the same primary action as Start learning. */
.course-connected :is(.lesson-video,.recording-player) { background: var(--course-tint); border: 1px solid var(--course-purple-line); border-radius: 10px; }
.course-connected .lesson-video>summary { padding: 19px 20px; color: var(--course-heading); }
.course-connected .lesson-video>summary small { color: var(--course-muted); }
.course-connected .lesson-video>summary:hover,.course-connected .recording-player summary:hover { background: var(--course-selected); }
.course-connected .lesson-video[open]>summary { border-color: var(--course-purple-line); }
.course-connected .video-play-mark { background: var(--course-brand); color: white; }
.course-connected :is(.video-status,.video-actions a,.video-actions button,.recording-player summary) { color: var(--course-brand-hover); }
.course-connected .video-actions button { border-color: var(--course-purple-line); background: var(--course-surface); min-height: 36px; }
.course-connected .video-actions button:hover { background: var(--course-selected); }
.course-connected :is(.lesson-video video,.recording-player video) { background: var(--palette-heading,#251e33); }
.course-connected .lesson-video-body .video-meta { color: var(--course-muted); }
.course-connected .video-bounds { border: 1px solid var(--course-purple-line); background: var(--course-soft); color: var(--course-brand-hover); }
.course-connected .lesson-video-body .video-source-note { background: #fbf5e8; border-left-color: #c9a65c; color: #6b542d; }
.course-connected .materials-download { background: var(--course-tint); border: 1px solid var(--course-purple-line); padding: 30px; gap: 32px; }
.course-connected .materials-button { background: var(--course-brand); border-radius: 7px; padding: 14px 22px; color: white; }
.course-connected .materials-button:hover { background: var(--course-brand-hover); }
.course-connected :is(.materials-detail,.recording-heading>span,.recording-intro,.recording-meta) { color: var(--course-muted); }
.course-connected :is(.recording-card,.session-link,.library-list li,.library-group) { border-color: var(--course-line); background: var(--course-surface); border-radius: 10px; }
.course-connected .recording-card { padding: 24px; }
.course-connected .session-link { padding: 24px; }
.course-connected .session-link:hover { border-color: var(--course-purple-line); background: var(--course-soft); }
.course-connected .recording-card:target { outline-color: var(--course-brand); }
.course-connected .recording-clip-links a { background: var(--course-soft); color: var(--course-brand-hover); }
.course-connected .recording-groups a { border-color: var(--course-purple-line); background: var(--course-paper); color: var(--course-brand-hover); border-radius: 7px; }
.course-connected .recording-groups a:hover { background: var(--course-selected); }
.course-connected .recording-pending { background: var(--course-soft); color: var(--course-muted); }
.course-connected footer { background: var(--course-paper); border-color: var(--course-line); color: var(--course-muted); }

@media(max-width:1150px) {
  .course-connected .guide { padding-left: 24px; padding-right: 24px; }
  .course-connected .guide-layout { grid-template-columns: 216px minmax(0,1fr); gap: 24px; }
  .course-connected :is(.knowledge-doc-title,.doc-content,.guide .source-card,.framework-reading) { padding-left: 24px; padding-right: 24px; }
}
@media(max-width:850px) {
  .course-connected .guide-layout { display: block; }
  .course-connected .guide-title h1 { font-size: 27px; }
  .course-connected .lesson-toc-scroll { max-height: min(50vh,430px); }
  .course-connected .lesson-sidebar { background: var(--course-paper); }
  .course-connected .layer-switch button { min-height: 52px; }
  .course-connected .course-return { min-height: 40px; }
  .course-connected .map-heading strong { font-size: 13px; }
}
@media(max-width:600px) {
  .course-connected .topbar { display:flex; flex-wrap:wrap; gap:12px; padding:16px 20px; }
  .course-connected .topbar nav { margin:0; gap:18px; }
  .course-connected .topbar nav a:last-child { display:none; }
  .course-connected .guide { padding:18px 16px 0; }
  .course-connected .guide-title { margin:22px 0; }
  .course-connected .guide-title h1 { font-size:25px; }
  .course-connected .route-nav a { min-height:60px; }
  .course-connected :is(.knowledge-doc-title,.doc-content,.guide .source-card,.framework-reading) { padding-left:18px; padding-right:18px; }
  .course-connected :is(.knowledge-section .source,.guide .source-card>.source,.document-reader>.source,.quote-content) { font-size:15px; line-height:1.95; }
  .course-connected .knowledge-doc-title h2 { font-size:22px; }
  .course-connected .knowledge-section .source h2 { font-size:20px; }
  .course-connected .knowledge-section .source h3 { font-size:18px; }
  .course-connected :is(.document-reader h1,.notes-directory h1) { font-size:26px; }
  .course-connected :is(.map-heading,.map-caption) { padding:13px 14px; }
  .course-connected .hotspot.is-current { border-width:3px; }
  .course-connected .guide-pager a>span { font-size:12px; }
  .course-connected .guide-pager a.next { padding:10px 14px; }
  .course-connected .guide-pager .page-position { font-size:10px; }
  .course-connected .lesson-video>summary { padding:15px 12px; }
  .course-connected .materials-download { padding:22px; }
  .course-connected :is(.recording-card,.session-link) { padding:20px; }
  .course-connected .code-file { font-size:12px; }
  .course-connected :is(.document-reader,.code-reader,.figure-reader,.notes-directory) { padding-top:28px; }
}
@media(prefers-reduced-motion:reduce) {
  .course-connected * { scroll-behavior:auto!important; transition:none!important; }
}