
  /* ELI 2026-09-15 (WCAG 2.3.3): 19 pages animated with no reduced-motion guard. One
     site-wide rule; pages with their own guard are unaffected. */
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
  body{background-image:none!important}
  .spine{display:none!important}
  /* Listen: a small ink disc, bottom-right; inline variant on class pages */
  .listen{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:6px;align-items:center;background:transparent;border:0;box-shadow:none;padding:0}
  .listen.listen-inline{position:static;display:inline-flex;margin:0 0 22px}
  .listen button{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:0 14px 0 10px;height:36px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 8px 24px -12px rgba(20,18,16,.5)}
  .listen button.primary{background:var(--ink);color:var(--paper)}
  .listen button:hover,.listen button.primary:hover{background:#2A2622;color:var(--paper)}
  .listen button::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zm-2.5-8.5v2.1a6.5 6.5 0 0 1 0 12.8v2.1a8.5 8.5 0 0 0 0-17z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zm-2.5-8.5v2.1a6.5 6.5 0 0 1 0 12.8v2.1a8.5 8.5 0 0 0 0-17z'/></svg>") center/contain no-repeat}
  /* the reading run-head on class, build, lab and capstone pages */
  .runhead{background:rgba(244,241,234,.86)!important;backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--hair)!important}
  .rh{padding:14px 0 12px!important;align-items:center!important}
  .rh .book{font-family:var(--serif)!important;font-weight:500!important;font-size:19px!important;color:var(--ink)!important;letter-spacing:-.01em}
  .rh .chap{font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:var(--ink-3)!important}
  .rh .idx,.rh .idx-btn{font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;border:1px solid var(--hair)!important;border-radius:var(--r-s);padding:8px 14px!important;background:transparent}
  .rh .idx:hover,.rh .idx-btn:hover,.rh .idx-btn[aria-expanded="true"]{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
  .progress{background:var(--ink)!important}
  .idx-panel{border-bottom:1px solid var(--hair)!important;box-shadow:0 24px 40px -24px rgba(20,18,16,.35)!important}
  /* the class rail (left) */
  .cxrail{background:var(--paper)!important;border-right:1px solid var(--hair)!important}
  /* the sign-in nudge on class pages */
  #cx-savebar{border-top:0!important;box-shadow:0 -12px 30px -20px rgba(0,0,0,.4)!important}
  /* the sheet: marketing pages widen to a 1600px ceiling; reading pages go fluid,
     text starts at the rail and stays at 72ch, the frame takes the screen */
  .wrap{max-width:1600px!important;padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}

  /* ---- the classroom: a centred composition right of the rail ----
     rail 272 | [ margin | article ~74ch @18px | notes 300 | margin ]
     The composition caps at 1240px so both margins balance at any width. */
  .cx-reading .wrap{max-width:1240px!important;margin:0 auto!important;padding-left:clamp(24px,4vw,56px)!important;padding-right:clamp(24px,4vw,56px)!important}
  .cx-reading .layout{grid-template-columns:minmax(0,1fr) 300px!important;gap:clamp(40px,5vw,80px)!important;padding-top:40px!important}
  @media(max-width:1100px){.cx-reading .layout{grid-template-columns:1fr!important}}
  /* On a phone the sidebar notes ("The one idea", vocabulary, the case file) used to
     render after the end of the page, past the next-class button, where nobody reads
     them. They are reading aids, so they fold into one collapsible block right under
     the title instead. The fold is built by a script below; this is only its look. */
  .cx-reading details.cx-railfold{margin:0 clamp(24px,4vw,56px) 22px;border:1px solid var(--hair,#DDD8CC);border-radius:12px;background:var(--surface,#EBE7DE);padding:0 16px}
  .cx-reading details.cx-railfold>summary{cursor:pointer;padding:14px 0;font-family:var(--sans,'Inter Tight',system-ui,sans-serif);font-weight:500;font-size:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .cx-reading details.cx-railfold>summary::-webkit-details-marker{display:none}
  .cx-reading details.cx-railfold>summary::after{content:'+';font-size:18px;color:var(--ink-3,#6B655B)}
  .cx-reading details.cx-railfold[open]>summary::after{content:'–'}
  .cx-reading details.cx-railfold aside.margins{position:static!important;top:auto!important;padding:0 0 14px!important;margin:0!important;max-height:none!important}
  /* two fixed bars can sit at the bottom of a class page; the footer's last line
     must still be reachable at the end of the scroll */
  .cx-reading footer{padding-bottom:132px!important}
  .cx-reading .idx-grid{max-width:1240px!important;padding-left:clamp(24px,4vw,56px)!important;padding-right:clamp(24px,4vw,56px)!important}
  /* reading type */
  .cx-reading article p,.cx-reading .sec p,.cx-reading .sec li{font-size:18px;line-height:1.65;max-width:none}
  .cx-reading .sec p{color:var(--ink)}
  .cx-reading .lede-para{font-size:18px;color:var(--ink-2)}
  .cx-reading .standfirst{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.6vw,24px);line-height:1.4;max-width:60ch;color:var(--ink-2)}
  .cx-reading h1{font-weight:400!important;letter-spacing:-.03em!important;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0!important}
  .cx-reading h2{font-weight:400!important;font-variation-settings:'opsz' 144!important;letter-spacing:-.02em!important}
  .cx-reading h3{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:-.01em}
  .cx-reading .sec-mark{font-weight:300;color:var(--ink-3)!important;font-size:22px!important}
  .cx-reading .drop::first-letter{font-weight:400!important;color:var(--ink)!important}
  .cx-reading .sec{padding-bottom:64px!important}
  /* margin notes */
  .cx-reading aside.margins,.cx-reading .mnote{font-size:14px;line-height:1.55;color:var(--ink-2)}
  .cx-reading .mnote{border-top:1px solid var(--hair)!important;border-bottom:0!important;padding:16px 0!important;margin:0!important}
  .cx-reading .mnote p{font-size:14px;line-height:1.55;margin:0;color:var(--ink-2)}
  .cx-reading .mnote:first-child{border-top:0!important;padding-top:0!important}
  .cx-reading .mnote .mn-k,.cx-reading .mnote b:first-child,.cx-reading .mnote strong:first-child{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px}
  /* the class rail, refined */
  .cxrail{width:272px!important;background:var(--paper)!important;border-right:1px solid var(--hair)!important;padding:0 12px 24px!important}
  @media(min-width:1240px){body.cx-reading{padding-left:272px!important}}
  .cxrail .cx-h{background:var(--paper)!important;color:var(--ink)!important;padding:20px 12px 14px!important;font-family:var(--serif)!important;font-size:18px!important;font-weight:500!important;letter-spacing:-.01em!important;text-transform:none!important;border-bottom:1px solid var(--hair)}
  .cxrail .cx-h a{color:var(--ink)!important}
  .cxrail .cx-ph-d>summary{font-family:var(--sans)!important;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-3)!important;padding:22px 12px 8px!important}
  .cxrail .cx-ph-d>summary .cv{font-size:13px!important}
  .cxrail a.cx-c,.cxrail summary.cx-par{font-size:14px!important;padding:7px 12px!important;border-radius:8px;color:var(--ink-2)!important;line-height:1.35!important;margin:1px 0}
  .cxrail .n{font-family:var(--sans)!important;font-variant-numeric:tabular-nums;font-size:13px!important;color:var(--ink-3)!important;min-width:22px!important}
  .cxrail a.cx-c:hover,.cxrail summary.cx-par:hover{background:var(--surface)!important;color:var(--ink)!important;box-shadow:none!important}
  .cxrail [aria-current="page"]{background:var(--surface)!important;color:var(--ink)!important;font-weight:600!important}
  .cxrail [aria-current="page"] .n{color:var(--ink)!important}
  .cxrail .cx-sub a.cx-s{padding-left:40px!important;font-size:13px!important}
  .cxrail .cx-foot a{font-family:var(--sans)!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-2)!important}
  .cx-teaser .cx-unlock{font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;border-radius:6px;padding:10px 12px!important;margin:14px 12px!important}
  .cx-teaser .cx-unlock:hover{background:#2A2622!important}
  /* the rail shows only when the full composition fits beside it */
  @media(max-width:1399px){.cxrail{display:none!important}body.cx-reading{padding-left:0!important}body.cx-reading .cx-mom,body.cx-reading #cx-savebar{left:0!important}}
  /* drills in the booklet style */
  .cx-reading .booklet{background:var(--surface)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;padding:22px 24px 20px!important}
  .cx-reading .booklet-head{font-size:13px!important;color:var(--ink-3)!important;border:0!important;padding:0 0 14px!important;margin:0!important;background:transparent!important}
  .cx-reading .booklet-body{padding:0!important}
  .cx-reading .q-text{font-weight:400!important;font-size:22px!important;letter-spacing:-.015em}
  .cx-reading .opts{gap:6px!important}
  .cx-reading .opt{background:var(--paper)!important;border:1px solid transparent!important;border-radius:8px!important;padding:12px 14px!important;align-items:center!important;font-size:16px!important;transition:border-color .15s}
  .cx-reading .opt:hover:not(:disabled){border-color:var(--hair)!important;padding-left:14px!important}
  .cx-reading .opt .box{border-radius:50%!important;width:28px!important;height:28px!important;border:1px solid var(--hair)!important;font-family:var(--sans)!important;font-weight:600;font-size:13px!important;color:var(--ink-2)!important}
  .cx-reading .opt.correct{border-color:var(--ink)!important}
  .cx-reading .opt.correct .box{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
  .cx-reading .opt.wrong .box{border-color:var(--pen)!important;color:var(--pen)!important}
  .cx-reading .marked{border-top:0!important;background:var(--paper);border-radius:8px;padding:18px 20px!important;margin-top:12px!important}
  .cx-reading .exam-open{border-top:1px solid var(--hair)!important}
  .cx-reading .defn{border-top:1px solid var(--hair)!important;border-bottom:1px solid var(--hair)!important}
  .cx-reading .hang{border-top:1px solid var(--hair)!important}
  .cx-reading .hang > div{border-bottom:1px solid var(--hair)!important}
  .cx-reading .footnotes{border-top:1px solid var(--hair)!important}
  /* footnotes: the original two-column grid turned every inline run into its own cell */
  .cx-reading .footnotes li{display:block!important;position:relative;padding:8px 0 8px 30px!important;max-width:78ch;font-size:14px!important;line-height:1.6!important}
  .cx-reading .footnotes li::before{position:absolute;left:0;top:8px;font-family:var(--sans)!important;font-size:13px!important;font-weight:500;color:var(--ink-3)!important;padding-top:3px!important}
  .cx-reading .fig-plate{background:var(--surface)!important;border:0!important;box-shadow:none!important;border-radius:12px!important}
  .cx-reading .fig-plate .fig-cap{background:transparent!important;color:var(--ink-3)!important;font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;padding:16px 18px 0!important}
  .cx-reading .fig-plate .fig-note{font-family:var(--sans)!important;font-size:13px!important;letter-spacing:0!important;line-height:1.5!important}
  .cx-reading .sec{scroll-margin-top:84px}
  /* in-class section navigator, nested under the current class in the rail */
  .cx-secs{list-style:none;margin:2px 0 8px;padding:0}
  .cx-secs a{display:block;padding:5px 12px 5px 34px;font-size:13px;color:var(--ink-3);text-decoration:none;line-height:1.35;position:relative}
  .cx-secs a::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:1px;background:var(--hair)}
  .cx-secs a:hover{color:var(--ink)}
  .cx-secs a.on{color:var(--ink);font-weight:500}
  .cx-secs a.on::before{background:var(--ink);width:2px;left:21.5px}
  /* contents page */
  .cx-page-contents .ch-num{display:none!important}
  .cx-page-contents .ch-head{display:block!important;padding-top:clamp(40px,6vw,88px)}
  .cx-page-contents .milestone{background:var(--surface)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;padding:22px 26px!important}
  .cx-page-contents .phase-row{border-bottom:1px solid var(--hair)!important;padding:44px 0!important}
  .cx-page-contents .toc a{text-decoration:none}
  /* ---- Phase D: practice surfaces ---- */
  /* the thick black rule under every kicker becomes a hairline */
  body:not(.cx-reading) .rule-thick{height:1px!important;background:var(--hair)!important}
  /* exam index: paper cards */
  .cx-page-exam-practice .exam-paper{background:var(--surface)!important;border:0!important;border-radius:16px!important;box-shadow:none!important;padding:26px 26px 24px!important}
  .cx-page-exam-practice .exam-paper .tab{position:static!important;background:transparent!important;color:var(--ink-3)!important;padding:0 0 8px!important;font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;display:block}
  .cx-page-exam-practice .exam-paper h2{font-weight:400!important;font-size:26px!important;letter-spacing:-.02em}
  .cx-page-exam-practice .exam-paper .facts{border-top:1px solid rgba(20,18,16,.1)!important;font-family:var(--sans)!important;font-size:14px!important;line-height:1.7!important;letter-spacing:0!important;color:var(--ink-2)!important}
  .cx-page-exam-practice .exam-paper .facts b{color:var(--ink)!important;font-weight:600!important}
  .cx-page-exam-practice .exam-paper .prep{font-family:var(--sans)!important;font-size:13.5px!important;letter-spacing:0!important;color:var(--ink-3)!important}
  .cx-page-exam-practice .lastmark{border:1px solid var(--hair)!important;border-radius:999px;transform:none!important;font-family:var(--sans)!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-2)!important;padding:6px 12px!important}
  .cx-page-exam-practice .group-head{border-bottom:1px solid var(--hair)!important}
  .cx-page-exam-practice main a{font-family:var(--sans)!important;letter-spacing:0!important;text-transform:none!important}
  /* the exam hall: ink and paper instead of navy */
  [class*="cx-page-exam-"]{--nav:#141210;--nav-2:#F4F1EA;--nav-line:#DDD8CC;--nav-ink:#F4F1EA;--nav-ink-2:rgba(244,241,234,.6);--white:#F4F1EA;--go:#141210;--go-2:#2A2622;--plot:#141210}
  [class*="cx-page-exam-"] body,body[class*="cx-page-exam-"]{background:var(--paper)!important}
  body[class*="cx-page-exam-"] .ribbon{color:var(--ink)!important;background:var(--paper)!important}
  body[class*="cx-page-exam-"] .rb-step{color:var(--ink-3)!important}
  body[class*="cx-page-exam-"] .rb-dots i{background:var(--hair)!important}
  body[class*="cx-page-exam-"] .rb-dots i.on{background:var(--ink)!important}
  body[class*="cx-page-exam-"] .rb-dots i.done{background:var(--ink-3)!important}
  body[class*="cx-page-exam-"] .sheet{background:var(--surface)!important;border:0!important;border-radius:16px!important;box-shadow:none!important}
  body[class*="cx-page-exam-"] .sheet h1{font-weight:400!important;font-size:30px!important;letter-spacing:-.02em!important}
  body[class*="cx-page-exam-"] .sheet h2{font-weight:400!important}
  body[class*="cx-page-exam-"] .fineprint{background:var(--paper)!important;border:0!important;border-radius:8px!important}
  body[class*="cx-page-exam-"] .agree{background:var(--paper)!important;border:1px solid var(--hair)!important;border-radius:8px!important}
  body[class*="cx-page-exam-"] .fact{background:var(--paper)!important}
  body[class*="cx-page-exam-"] .facts{background:transparent!important;border:0!important;gap:8px!important}
  body[class*="cx-page-exam-"] .fact{border-radius:8px}
  body[class*="cx-page-exam-"] .btn{border-radius:8px!important;font-weight:500!important}
  body[class*="cx-page-exam-"] .btn.next{background:var(--paper)!important;color:var(--ink)!important}
  body[class*="cx-page-exam-"] .btn.ghost{color:var(--paper)!important;border-color:rgba(244,241,234,.3)!important}
  body[class*="cx-page-exam-"] ul.rules li::before{border-color:var(--ink)!important;border-radius:50%!important}
  /* the automation bench */
  .cx-page-code-practice .tcard{background:var(--surface)!important;border:0!important;border-radius:16px!important;box-shadow:none!important;padding:24px 24px 22px!important}
  .cx-page-code-practice .tcard:hover{transform:translateY(-3px)!important;box-shadow:0 24px 40px -28px rgba(20,18,16,.4)!important}
  .cx-page-code-practice .tc-tag{border:0!important;background:var(--paper)!important;color:var(--ink-2)!important;border-radius:999px;padding:4px 10px!important;font-family:var(--sans)!important;font-size:12.5px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important}
  .cx-page-code-practice .tc-title{font-weight:400!important;font-size:24px!important}
  .cx-page-code-practice .tc-foot{font-family:var(--sans)!important;font-size:13px!important;letter-spacing:0!important}
  .cx-page-code-practice .tc-go{color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important;font-weight:500}
  /* 100 Days */
  .cx-page-100-days-of-azure .how .c{border:0!important;border-radius:16px!important;background:var(--surface)!important;box-shadow:none!important;padding:22px 24px!important}
  .cx-page-100-days-of-azure .finish{border:0!important;border-radius:16px!important;background:var(--surface)!important;box-shadow:none!important}
  .cx-page-100-days-of-azure .cov-grid span{border:0!important;background:var(--surface)!important;border-radius:999px;font-family:var(--sans)!important;font-size:13px!important;letter-spacing:0!important;padding:6px 12px!important}
  .cx-page-100-days-of-azure .d-row{border-left:0!important}
  /* the résumé sheets */
  .cx-page-resume-templates .rz{border:0!important;border-radius:12px!important;box-shadow:none!important;background:var(--surface)!important}
  .cx-page-resume-templates .doc-tab{background:var(--surface)!important;color:var(--ink-3)!important;border-bottom:1px solid rgba(20,18,16,.1);font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;padding:12px 16px!important}
  /* ---- Phase G sweep ---- */
  /* the plotter blue retires: links and drawn lines are ink */
  :root{--plot:#141210}
  main a:not([class]),article a:not([class]),.wrap a:not([class]){color:var(--ink);text-decoration-color:var(--hair);text-underline-offset:3px}
  main a:not([class]):hover,article a:not([class]):hover,.wrap a:not([class]):hover{text-decoration-color:var(--ink)}
  .cx-page-how-it-works :has(> svg),.cx-page-how-classes-work :has(> svg),.cx-page-how-it-works :has(> img),.cx-page-how-classes-work :has(> img){border:0!important;box-shadow:none!important;border-radius:16px}
  /* hero italics in ink everywhere but the landing page; red stays for annotation */
  body:not(.cx-reading) h1 em{color:var(--ink)!important}
  /* the illustrated explainers: pictures sit on surface, not in ink frames */
  .cx-page-how-it-works figure,.cx-page-how-classes-work figure,.cx-page-how-it-works .ill,.cx-page-how-classes-work .ill,.cx-page-how-it-works .frame,.cx-page-how-classes-work .frame{border:0!important;border-radius:16px!important;background:var(--surface)!important;box-shadow:none!important;overflow:hidden}
  .cx-page-how-it-works .grid a,.cx-page-how-it-works .rooms a{border:0!important;background:var(--surface)!important;border-radius:12px!important;box-shadow:none!important}
  /* prose measure on the wide tool pages */
  .cx-page-interview-questions p,.cx-page-skills-radar p,.cx-page-roles p,.cx-page-job-search-plan p,.cx-page-first-90-days p{max-width:72ch}
  /* ---- Phase E: blog articles (364 pages) ---- */
  body[class*="cx-page-blog-"] .art{max-width:760px!important}
  body[class*="cx-page-blog-"] .crumb{font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;padding-top:40px!important}
  body[class*="cx-page-blog-"] .kw{font-family:var(--sans)!important;font-size:13px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:var(--ink-3)!important}
  body[class*="cx-page-blog-"] .art h1{font-weight:400!important;letter-spacing:-.03em!important;line-height:1!important;font-variation-settings:'opsz' 144!important}
  body[class*="cx-page-blog-"] .byline{font-family:var(--sans)!important;font-size:13.5px!important;letter-spacing:0!important;text-transform:none!important;border-top:1px solid var(--hair)!important;border-bottom:1px solid var(--hair)!important;color:var(--ink-3)!important}
  body[class*="cx-page-blog-"] .dek{font-size:19.5px!important;line-height:1.5!important;font-weight:300!important;color:var(--ink-2)!important;margin:22px 0 30px!important}
  body[class*="cx-page-blog-"] .art p,body[class*="cx-page-blog-"] .art li{font-size:18px;line-height:1.65}
  body[class*="cx-page-blog-"] .art h2{font-weight:400!important;font-variation-settings:'opsz' 144!important;letter-spacing:-.02em!important}
  body[class*="cx-page-blog-"] .art h3{font-family:var(--sans)!important;font-weight:600!important;font-size:18px!important}
  body[class*="cx-page-blog-"] .pull{border-left:2px solid var(--ink)!important;padding-left:22px!important;font-weight:300!important}
  body[class*="cx-page-blog-"] .enroll,body[class*="cx-page-blog-"] .further,body[class*="cx-page-blog-"] .box,body[class*="cx-page-blog-"] .ecta,body[class*="cx-page-blog-"] [data-hired-section],body[class*="cx-page-blog-"] .nextprev{border:0!important;background:var(--surface)!important;border-radius:16px!important;box-shadow:none!important}
  body[class*="cx-page-blog-"] .nextprev{background:transparent!important;border-top:1px solid var(--hair)!important;border-radius:0!important}
  body[class*="cx-page-blog-"] .art figure,body[class*="cx-page-blog-"] .art pre{border-radius:12px}
  body[class*="cx-page-blog-"] .art table{border-radius:12px;overflow:hidden}
  body[class*="cx-page-blog-"] .art a,body[class*="cx-page-blog-"] .further a,body[class*="cx-page-blog-"] .nextprev a,body[class*="cx-page-blog-"] .crumb a{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
  body[class*="cx-page-blog-"] .art a:hover,body[class*="cx-page-blog-"] .further a:hover{text-decoration-color:var(--ink)}
  .cx-page-blog .post h2 a,.cx-page-blog .post .more,.cx-page-blog .post .meta a{text-decoration:none!important}
  /* the injected start bridge: a quiet surface line, not a red bar */
  body[class*="cx-page-blog-"] [data-blog-bridge]{border-left:0!important;background:var(--surface);border-radius:8px;padding:12px 16px!important;font-size:14px!important;color:var(--ink-2)!important;margin:20px 0 28px!important}
  body[class*="cx-page-blog-"] [data-blog-bridge] a{color:var(--ink)!important}
  /* on wide screens the empty margin carries "In this note", a sticky list of the h2s */
  .cx-toc{display:none}
  @media(min-width:1280px){
    .cx-toc{display:block;position:fixed;top:120px;left:calc(50% + 420px);width:240px;font-size:13.5px;line-height:1.4}
    .cx-toc .t{font-weight:500;color:var(--ink-3);margin-bottom:10px;font-size:13px}
    .cx-toc a{display:block;color:var(--ink-3);text-decoration:none;padding:5px 0 5px 14px;border-left:1px solid var(--hair)}
    .cx-toc a:hover{color:var(--ink)}
    .cx-toc a.on{color:var(--ink);border-left:2px solid var(--ink);padding-left:13px;font-weight:500}
  }
  body[class*="cx-page-blog-"] .art h2{scroll-margin-top:84px}
  /* injected ink/red panels (class bridge, lead magnet, common room) become surface panels */
  body[class*="cx-page-blog-"] [data-classbridge],body[class*="cx-page-blog-"] [data-blog-magnet],body[class*="cx-page-blog-"] [style*="background:var(--ink)"],body[class*="cx-page-blog-"] [style*="background:var(--pen)"]{background:var(--surface)!important;color:var(--ink)!important;border-radius:16px!important;border:0!important;box-shadow:none!important}
  body[class*="cx-page-blog-"] [data-classbridge] *,body[class*="cx-page-blog-"] [data-blog-magnet] *,body[class*="cx-page-blog-"] [style*="background:var(--ink)"] *{color:var(--ink)!important;border-color:var(--hair)!important}
  body[class*="cx-page-blog-"] [data-classbridge] [style*="background:var(--pen)"],body[class*="cx-page-blog-"] [data-blog-magnet] [style*="background:var(--pen)"],body[class*="cx-page-blog-"] [data-blog-magnet] button,body[class*="cx-page-blog-"] [style*="background:var(--ink)"] [style*="background:var(--pen)"]{background:var(--ink)!important;color:var(--paper)!important;border-radius:8px!important}
  body[class*="cx-page-blog-"] [data-blog-magnet] button *{color:var(--paper)!important}
  body[class*="cx-page-blog-"] [data-blog-magnet] input{background:var(--paper)!important;border:1px solid var(--hair)!important;border-radius:8px!important;color:var(--ink)!important}
  body[class*="cx-page-blog-"] [data-blog-magnet] [style*="background:var(--paper-3)"],body[class*="cx-page-blog-"] [data-classbridge] [style*="background:var(--paper-3)"]{background:var(--paper)!important;border-radius:8px}
  /* the article template's own enrol aside was ink-on-ink; its text follows the surface now */
  body[class*="cx-page-blog-"] .enroll,body[class*="cx-page-blog-"] .enroll *{color:var(--ink)!important}
  body[class*="cx-page-blog-"] .enroll .et{color:var(--ink-3)!important;font-size:13px!important;font-weight:500}
  body[class*="cx-page-blog-"] .enroll .eh{font-family:var(--serif)!important;font-weight:400!important;font-size:26px!important;letter-spacing:-.02em}
  body[class*="cx-page-blog-"] .enroll .ecta a,body[class*="cx-page-blog-"] .enroll a.btn{background:var(--ink)!important;color:var(--paper)!important;border-radius:8px!important;border:0!important;padding:12px 20px!important;text-decoration:none!important}
  body[class*="cx-page-blog-"] .enroll .ecta a *{color:var(--paper)!important}
  /* the nudge sits above the momentum bar instead of covering it */
  body:has(.cx-mom.show) #cx-savebar{bottom:46px!important}
  @media(min-width:1240px){body.cx-reading .cx-mom,body.cx-reading #cx-savebar{left:272px!important}}
  /* inline code tokens inside prose stay monospace (the label conversion must not touch them) */
  .cx-reading p .mono,.cx-reading li .mono,.cx-reading .mnote .mono,.cx-reading td .mono,.cx-reading dd .mono,code{font-family:var(--mono)!important;font-size:14px!important;letter-spacing:0!important;text-transform:none!important;background:var(--surface);padding:1px 5px;border-radius:4px;color:var(--ink)}
  pre code{background:none;padding:0;font-size:inherit!important}
  .cx-mom{border-top:1px solid rgba(244,241,234,.12)!important}
  #cx-savebar a{font-family:var(--sans)!important;font-size:14px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;border:1px solid rgba(244,241,234,.35)!important;border-radius:6px;padding:8px 14px!important}
