/* /course only. One shared course, two editorial routes into actual lessons.
   Routes are not numbered: numbers belong only to existing lesson references. */
.cp-paths { --cp-paper:#f0f1f3; --cp-white:#fff; --cp-ink:#101216; --cp-blue:#2347d8; --cp-muted:#586277; --cp-line:#d2d6df; background:var(--cp-white); color:var(--cp-ink); padding-block:72px; border-block:1px solid var(--cp-line); font-family:Onest,Arial,sans-serif; }
.cp-paths * { box-sizing:border-box; }
.cp-paths :is(h2,h3,p) { margin:0; }
.cp-paths :is(a,summary):focus-visible { outline:3px solid var(--cp-blue); outline-offset:5px; }
.cp-paths a { color:var(--cp-blue); text-underline-offset:4px; }
.cp-paths :is(details,[id]) { scroll-margin-top:calc(var(--header-height,80px) + 24px); }
.cp-eyebrow { font:500 11px/1.7 Onest,Arial,sans-serif; color:var(--cp-muted); text-transform:uppercase; letter-spacing:.055em; }
.cp-heading { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:end; margin-bottom:40px; }
.cp-heading > div { grid-column:1/8; min-width:0; }
.cp-heading .cp-eyebrow { margin-bottom:20px; }
.cp-heading h2 { font-size:clamp(34px,3.5vw,50px); font-weight:500; line-height:1.14; letter-spacing:-.045em; text-wrap:balance; }
.cp-heading h2 em { color:var(--cp-blue); font-style:normal; }
.cp-heading > p { grid-column:9/-1; color:var(--cp-muted); font-size:15px; line-height:1.75; min-width:0; }
.cp-route { border-top:1px solid var(--cp-line); }
.cp-route:last-child { border-bottom:1px solid var(--cp-line); }
.cp-route[open] { border-top-color:var(--cp-blue); }
.cp-route-summary { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:center; padding-block:26px; list-style:none; cursor:pointer; }
.cp-route-summary::-webkit-details-marker { display:none; }
.cp-route-title { grid-column:1/6; font-size:clamp(23px,2.25vw,31px); line-height:1.35; font-weight:500; letter-spacing:-.03em; min-width:0; }
.cp-route-purpose { grid-column:6/12; max-width:56ch; font-size:15px; line-height:1.7; color:var(--cp-muted); min-width:0; }
.cp-toggle { grid-column:12/-1; justify-self:end; display:block; width:24px; height:24px; color:var(--cp-blue); background:linear-gradient(currentColor,currentColor) center/16px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 16px no-repeat; }
.cp-route[open] > .cp-route-summary .cp-toggle,.cp-examples[open] > .cp-examples-summary .cp-toggle { background:linear-gradient(currentColor,currentColor) center/16px 1.5px no-repeat; }
.cp-route[open] > .cp-route-summary .cp-route-title { color:var(--cp-blue); }
.cp-route-body { padding-block:4px 28px; }
.cp-route-content { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.cp-route-content > div { min-width:0; border-left:2px solid var(--cp-line); padding-left:20px; }
.cp-route-content h3 { font-size:20px; line-height:1.4; font-weight:500; letter-spacing:-.025em; }
.cp-route-content > div > p:not(.cp-lesson-links) { margin-top:12px; font-size:14px; line-height:1.8; color:var(--cp-muted); }
.cp-lesson-links { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:14px!important; }
.cp-lesson-link { display:inline-flex; gap:8px; align-items:baseline; max-width:100%; min-height:40px; padding-block:8px; font-size:13px; line-height:1.7; text-decoration:none; }
.cp-lesson-link span { font:400 12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; flex-shrink:0; }
.cp-lesson-link:hover { text-decoration:underline; }
.cp-route-note { color:var(--cp-muted); font-size:12px; line-height:1.8; max-width:94ch; margin-top:24px!important; }
.cp-examples { margin-top:32px; padding:24px 28px; background:var(--cp-paper); border:1px solid var(--cp-line); border-radius:8px; }
.cp-examples-summary { display:grid; grid-template-columns:minmax(0,1fr) 24px; gap:24px; align-items:center; list-style:none; cursor:pointer; min-height:44px; }
.cp-examples-summary::-webkit-details-marker { display:none; }
.cp-examples-summary > span:first-child { min-width:0; }
.cp-examples-summary strong { display:block; font-size:21px; line-height:1.4; font-weight:500; letter-spacing:-.025em; }
.cp-examples-summary > span > span { display:block; margin-top:8px; color:var(--cp-muted); font-size:13px; line-height:1.75; }
.cp-examples-summary > .cp-toggle { grid-column:2; }
.cp-example-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:28px; padding-top:24px; border-top:1px solid var(--cp-line); }
.cp-example-list article { min-width:0; }
.cp-example-list .cp-eyebrow { font-size:10px; margin-bottom:12px; }
.cp-example-list h3 { font-size:20px; line-height:1.45; font-weight:500; letter-spacing:-.025em; }
.cp-example-list h3 a { display:inline-block; padding-block:4px; }
.cp-example-list article > p:last-child { margin-top:12px; font-size:14px; line-height:1.75; color:var(--cp-muted); }
.cp-bottom { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:baseline; justify-content:space-between; margin-top:28px; }
.cp-bottom > p { flex:1 1 520px; max-width:80ch; font-size:13px; line-height:1.8; color:var(--cp-muted); }
.cp-program-link { display:inline-flex; align-items:center; gap:16px; min-height:44px; font-size:14px; line-height:1.6; }
.cp-program-anchor,.cp-lesson-anchor { scroll-margin-top:calc(var(--header-height,80px) + 24px); }
.cp-lesson-anchor:target { outline:2px solid #2347d8; outline-offset:5px; }

@media (max-width:1000px) {
  .cp-heading > div { grid-column:1/8; }
  .cp-heading > p { grid-column:8/-1; }
  .cp-route-content { grid-template-columns:1fr; gap:24px; }
  .cp-route-content > div { padding-left:18px; }
  .cp-route-content > div > p:not(.cp-lesson-links) { max-width:78ch; }
  .cp-lesson-links { margin-top:10px!important; }
  .cp-example-list { gap:20px; }
}
@media (max-width:720px) {
  .cp-paths { padding-block:48px; }
  .cp-heading { grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:20px; margin-bottom:28px; }
  .cp-heading > div,.cp-heading > p { grid-column:1; }
  .cp-heading h2 { font-size:34px; }
  .cp-heading .cp-eyebrow { margin-bottom:16px; }
  .cp-route-summary { grid-template-columns:minmax(0,1fr) 24px; column-gap:16px; row-gap:10px; padding-block:22px; }
  .cp-route-title { grid-column:1; grid-row:1; font-size:24px; }
  .cp-route-purpose { grid-column:1; grid-row:2; font-size:14px; }
  .cp-route-summary > .cp-toggle { grid-column:2; grid-row:1/3; }
  .cp-route-body { padding-block:2px 24px; }
  .cp-route-note { margin-top:20px!important; }
  .cp-examples { margin-top:24px; padding:20px 18px; }
  .cp-examples-summary { column-gap:14px; }
  .cp-examples-summary strong { font-size:20px; }
  .cp-example-list { grid-template-columns:minmax(0,1fr); gap:24px; }
  .cp-example-list article + article { border-top:1px solid var(--cp-line); padding-top:20px; }
  .cp-bottom { margin-top:24px; gap:12px; }
}
@media (max-width:360px) {
  .cp-heading h2 { font-size:31px; }
  .cp-route-title { font-size:22px; }
  .cp-examples { padding:18px 14px; }
  .cp-examples-summary { column-gap:10px; }
  .cp-examples-summary strong { font-size:19px; }
}
@media (prefers-reduced-motion:reduce) {
  .cp-paths *,.cp-program-anchor,.cp-lesson-anchor { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
@media (forced-colors:active) {
  .cp-route,.cp-examples,.cp-route-content > div { border-color:CanvasText; }
  .cp-toggle { forced-color-adjust:none; color:ButtonText; }
  .cp-lesson-anchor:target { outline-color:Highlight; }
}