/* Reading pages (chapter previews, choose-your-tool) on the shared system.
   css/chapter.css and css/diagram.css stay as they are because the members area
   still uses them; this layer maps their old colour variables onto the system's
   light/dark tokens and restyles the few shared components the content uses. */

:root{
  --bg2:var(--surface); --bg3:var(--surface-2);
  --white:var(--text);
  --border:var(--line); --border-hover:color-mix(in srgb,var(--purple) 45%,transparent);
  --purple-light:var(--link); --teal:var(--done); --yellow:var(--hl, #875c00);
  --font-display:var(--sans); --font-body:var(--sans);
  --grad-purple-teal:linear-gradient(135deg,var(--link),var(--done));
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.25rem; --text-2xl:1.5rem; --text-3xl:1.875rem; --text-4xl:2.25rem;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-full:100px;
  --container-max:1200px; --container-pad:24px;
  --transition:.2s ease; --transition-slow:.4s ease;
}
/* --hl is defined on the feature-ground tokens; give paper pages the same accent */
:root{--hl:#875c00}
:root[data-theme="dark"]{--hl:#f5c842}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hl:#f5c842}}

.page-content{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.container{width:min(1200px,100% - 48px);margin-inline:auto}
@media (max-width:520px){.container{width:calc(100% - 32px)}}

/* Chapter type in the system face */
.chapter-intro__title{font-family:var(--sans);font-weight:760;letter-spacing:-.035em;line-height:1.02}
.chapter-body h2,.chapter-body h3,.chapter-body h4{font-family:var(--sans);letter-spacing:-.02em}
.chapter-body p,.chapter-body li,.chapter-body td{color:var(--text)}
.chapter-intro__epigraph{color:var(--muted)}
.chapter-body tr:nth-child(even) td{background:var(--surface-2)}
.chapter-body code:not(pre code){font-family:var(--mono)}
.code-block pre,.code-block pre code{font-family:var(--mono)}
.text-gradient-purple-teal,.text-gradient-yellow-teal{background:none;-webkit-text-fill-color:currentColor;color:var(--hl)}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:650;padding:.2rem .65rem;border-radius:99px;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.badge--purple{background:var(--accent-soft);color:var(--link);border-color:color-mix(in srgb,var(--purple) 30%,transparent)}
.badge--teal{background:var(--done-soft);color:var(--done);border-color:color-mix(in srgb,var(--done) 30%,transparent)}
.badge--yellow{background:color-mix(in srgb,var(--hl) 12%,transparent);color:var(--hl);border-color:color-mix(in srgb,var(--hl) 30%,transparent)}

/* Old button modifiers on the system .btn */
.btn--lg{height:52px;padding:0 1.4rem}
.btn--sm{height:40px;padding:0 1rem;font-size:.92rem}
.btn--primary,.btn--teal{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn--ghost,.btn--secondary,.btn--ghost-teal{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover,.btn--teal:hover{background:var(--purple-hover)}
  .btn--ghost:hover,.btn--secondary:hover,.btn--ghost-teal:hover{border-color:var(--muted)}
}
.btn-group{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.chapter-body a.btn,.chapter-body a.btn:hover{border-bottom-width:1px}
.chapter-body a.btn--primary,.chapter-body a.btn--teal{color:#fff}
.chapter-body a.btn--secondary,.chapter-body a.btn--ghost{color:var(--text)}

/* Cards and the join gate */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:1.75rem}
.card--featured{border-color:color-mix(in srgb,var(--purple) 40%,transparent);background:linear-gradient(180deg,var(--accent-soft),var(--surface))}
.chapter-gate h2{font-family:var(--sans)}

/* Accordion (opened and closed by js/main.js) */
.accordion{display:flex;flex-direction:column;gap:.75rem}
.accordion__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;transition:border-color 200ms ease}
.accordion__item.open{border-color:color-mix(in srgb,var(--purple) 40%,transparent)}
.accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;text-align:left;font-weight:650;font-size:1rem;color:var(--text);transition:color 160ms ease}
@media (hover:hover) and (pointer:fine){.accordion__trigger:hover{color:var(--link)}}
.accordion__icon{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--link);font-size:.95rem;transition:transform 200ms var(--ease-out)}
.accordion__item.open .accordion__icon{transform:rotate(45deg)}
.accordion__content{max-height:0;overflow:hidden;transition:max-height 300ms var(--ease-out)}
.accordion__content-inner{padding:0 1.4rem 1.25rem;color:var(--text);line-height:1.7}

/* Video frames inside reading pages */
.chapter-video,.guide-video{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-surface);padding:10px}
.chapter-video__eyebrow,.guide-video__eyebrow{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:.88rem;font-weight:600;color:var(--muted);margin:.1rem 0 .6rem .2rem}

/* Hard-coded dark tints from the old components, made theme aware */
.chapter-body .callout-quote{background:var(--accent-soft);border-color:color-mix(in srgb,var(--purple) 45%,transparent);color:var(--text)}
.chapter-body .callout-quote.teal{background:var(--done-soft);border-color:color-mix(in srgb,var(--done) 45%,transparent)}
.chapter-body .callout-quote.yellow{background:color-mix(in srgb,var(--hl) 10%,transparent);border-color:color-mix(in srgb,var(--hl) 45%,transparent)}

/* Keep the nav sign-in slot on the system style (clerk-auth.js renders .btn--teal into it) */
.site-nav .nav__auth-slot a.btn,.mnav .nav__auth-slot a.btn{background:transparent;color:var(--text);border-color:var(--line-strong);height:40px;padding:0 .95rem}

/* Diagrams are dark product plates in both themes: pin their text tokens to the dark set */
.diagram{--white:#f4f2fa;--text:#f4f2fa;--muted:#a9a5b8;--border:rgba(255,255,255,.08);--line:rgba(255,255,255,.08);--purple-light:#a78bfa;--link:#c4b5fd;--teal:#2dd4bf;--done:#2dd4bf;--bg2:#14121d;--surface:#14121d;color:#f4f2fa;box-shadow:var(--shadow-exhibit)}

/* ───────────────────────────────────────────────────────────────────────────
   Responsive reading layout
   Text keeps a readable measure; wide objects (code, tables, diagrams, video,
   tool grids) use all the width the device offers; navigation moves to where
   it costs the least space.
     phone    < 720   one column, 16px gutters, collapsible "On this page"
     tablet   720+    one column, measure 66ch, wide objects full width
     laptop   1100+   sticky contents rail on the left, text and wide objects beside it
     desktop  1500+   wider rail and wide objects
     large    1900+   larger type, wider measure, wide objects up to 1240px
   ─────────────────────────────────────────────────────────────────────────── */
:root{--measure:66ch;--wide:100%}
.page-content>.container{width:min(1680px,100% - 48px)}
.chapter{column-gap:clamp(2rem,4vw,4.5rem)}
.chapter-body{max-width:none}
.chapter-body>*{max-width:var(--measure)}
.chapter-body>:is(.code-block,table,.diagram,figure,.chapter-figure,.accordion,.tool-grid,.ai-stack-wrap,.ai-stack,.loop,.guide-video,.chapter-video,.callout-quote,.btn-group,iframe){max-width:var(--wide)}
.chapter>.chapter-video,.chapter-intro,.chapter-intro__epigraph{max-width:var(--wide)}
.chapter-intro__title{max-width:24ch}
.chapter-body table{width:100%}

/* phone and tablet: one column; tables and code scroll sideways inside themselves */
@media (max-width:1099px){
  .chapter{grid-template-columns:minmax(0,1fr);grid-template-areas:"video" "intro" "mobiletoc" "body" "nav"}
  .chapter-toc{display:none}
  .chapter-toc--mobile{display:block}
  .chapter-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chapter>*{margin-inline:auto;width:100%;max-width:min(var(--wide),860px)}
}
@media (max-width:719px){
  .page-content>.container{width:calc(100% - 32px)}
  .chapter-body{font-size:1.0625rem;line-height:1.75}
  .chapter-intro__title{font-size:clamp(1.9rem,8vw,2.4rem)}
  .code-block pre{font-size:.8rem}
}

/* laptop and up: contents rail on the left, sticky for the whole article */
@media (min-width:1100px){
  :root{--measure:68ch;--wide:min(100%,920px)}
  .chapter{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"toc video" "toc intro" "toc body" "toc nav";align-items:start}
  .chapter-toc{grid-area:toc;order:-1;align-self:start;position:sticky;top:calc(var(--nav-h) + 24px);max-height:calc(100vh - var(--nav-h) - 48px);padding:0 1rem 0 0;border-left:0;border-right:1px solid var(--line)}
  .chapter-toc a{border-left:0;border-right:2px solid transparent;margin-left:0;margin-right:-1rem;padding:.3rem .8rem .3rem 0}
  .chapter-toc a.is-active{border-right-color:var(--purple);color:var(--link)}
  .chapter-toc li.is-h3 a{padding-left:.9rem}
  .chapter-toc__label{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:.85rem;font-weight:650}
  .chapter-toc--mobile{display:none}
}
@media (min-width:1500px){
  :root{--measure:70ch;--wide:min(100%,1080px)}
  .chapter{grid-template-columns:250px minmax(0,1fr)}
}
@media (min-width:1900px){
  :root{--measure:72ch;--wide:min(100%,1240px)}
  .chapter{grid-template-columns:280px minmax(0,1fr)}
  .chapter-body{font-size:1.1875rem}
}
/* the reading pages carry an inline 860-1200px cap on .container; the layout above owns width now */
.page-content>.container{max-width:none!important}
.chapter-toc--mobile summary{font-family:var(--sans);letter-spacing:0}
/* centre the rail + article as one composition at each size */
@media (min-width:1100px){.chapter{max-width:1240px;margin-inline:auto}}
@media (min-width:1500px){.chapter{max-width:1420px}}
@media (min-width:1900px){.chapter{max-width:1640px}}
/* code blocks are dark objects in both themes, like the diagrams */
.code-block{--purple-light:#a78bfa;--link:#c4b5fd;--muted:#a9a5b8;--white:#f4f2fa;--text:#f4f2fa;--border:rgba(255,255,255,.1);--line:rgba(255,255,255,.1);--teal:#2dd4bf;--done:#2dd4bf}

/* ── Builder's Journey wayfinding on step pages ───────────────────────────── */
.chapter>.journey-bar{grid-area:jbar}
.chapter>.jb-pager{grid-area:nav}
.chapter>.chapter-video{grid-area:video}
.chapter{grid-template-areas:"jbar" "intro" "video" "mobiletoc" "body" "nav"}
@media (max-width:1099px){.chapter{grid-template-areas:"jbar" "intro" "video" "mobiletoc" "body" "nav"}}
@media (min-width:1100px){.chapter{grid-template-areas:"toc jbar" "toc intro" "toc video" "toc body" "toc nav"}}

.journey-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-bottom:1.75rem;padding:.6rem .6rem .6rem 1rem;border-radius:var(--r-surface);background:var(--surface);border:1px solid var(--line)}
.jb-back{display:inline-flex;align-items:center;gap:.45rem;font-weight:650;font-size:.95rem;color:var(--text);text-decoration:none;white-space:nowrap}
.jb-back .i{color:var(--link);transition:transform 200ms var(--ease-out)}
.jb-of{margin-left:.35rem;font-weight:560;font-size:.85rem;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.jb-back:hover .i{transform:translateX(-3px)}.jb-back:hover{color:var(--link)}}
.jb-steps{list-style:none;display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.jb-steps a{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .65rem 0 .35rem;border-radius:99px;text-decoration:none;color:var(--muted);font-size:.82rem;font-weight:600;transition:background-color 160ms ease,color 160ms ease}
.jb-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:700;border:1.5px solid var(--line-strong);font-variant-numeric:tabular-nums;flex:none}
.jb-n .i{width:13px;height:13px}
.jb-t{display:none}
.jb-steps .is-done .jb-n{background:var(--done);border-color:var(--done);color:var(--bg)}
.jb-steps .is-current a{background:var(--accent-soft);color:var(--text)}
.jb-steps .is-current .jb-n{background:var(--purple);border-color:var(--purple);color:#fff}
.jb-steps .is-current .jb-t{display:inline}
.jb-steps .is-locked .jb-n{color:var(--link);border-style:dashed}
@media (hover:hover) and (pointer:fine){.jb-steps a:hover{background:var(--surface-2);color:var(--text)}}
@media (max-width:620px){.journey-bar{padding:.75rem}.jb-steps{margin-left:0;width:100%;justify-content:space-between}.jb-steps .is-current .jb-t{display:none}}

.jb-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:3rem;max-width:var(--wide)}
.jb-pager a{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--text);font-weight:680;transition:border-color 200ms ease,transform 200ms var(--ease-out)}
.jb-pager small{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.15rem}
.jb-pager .i{width:22px;height:22px;flex:none;color:var(--link)}
.jb-next{justify-content:flex-end;text-align:right}
@media (hover:hover) and (pointer:fine){.jb-pager a:hover{border-color:var(--purple);transform:translateY(-2px)}}
@media (max-width:620px){.jb-pager{grid-template-columns:1fr}}

/* Videos: smaller, under the opening quote */
.chapter>.chapter-video,.chapter-body>.guide-video{width:100%;max-width:640px;margin:0 0 2rem;padding:8px;background:var(--surface)}
.chapter-video__eyebrow,.guide-video__eyebrow{display:flex;align-items:center;gap:.4rem}
.chapter-video__eyebrow .i{width:16px;height:16px;color:var(--link)}
@media (max-width:1099px){.chapter>.chapter-video{margin-inline:0}}
.chapter .chapter-video__eyebrow,.chapter .guide-video__eyebrow{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:.9rem;font-weight:620;color:var(--muted)}
.chapter>.chapter-video,.chapter-body>.guide-video{max-width:560px}
/* video spans the article's wide area (same width as code, tables and diagrams) */
.chapter>.chapter-video,.chapter-body>.guide-video{max-width:var(--wide)}
/* one shared right edge for the journey bar, video, wide blocks and pager */
.chapter>.chapter-body{max-width:none}
.chapter>.journey-bar,.chapter>.jb-pager,.chapter>.chapter-video{max-width:var(--wide);width:100%}

/* "Keep reading" cue under the lead video (js/reading.js) */
.read-cue{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;width:100%;max-width:var(--wide);margin:-1rem 0 2.25rem;padding:.75rem 1rem;border-radius:var(--r-panel);background:var(--accent-soft);color:var(--text);text-decoration:none;font-size:.95rem}
.chapter>.read-cue{grid-area:cue}
.read-cue .i{width:18px;height:18px;color:var(--link);flex:none}
.read-cue b{font-weight:680}
.read-cue em{margin-left:auto;font-style:normal;font-size:.85rem;font-weight:600;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.read-cue .i{animation:cue-bob 1.6s var(--ease-in-out) infinite}}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (hover:hover) and (pointer:fine){.read-cue:hover b{color:var(--link)}}

/* the cue gets its own row under the video */
.chapter{grid-template-areas:"jbar" "intro" "video" "cue" "mobiletoc" "body" "nav"}
@media (max-width:1099px){.chapter{grid-template-areas:"jbar" "intro" "video" "cue" "mobiletoc" "body" "nav"}}
@media (min-width:1100px){.chapter{grid-template-areas:"toc jbar" "toc intro" "toc video" "toc cue" "toc body" "toc nav"}}

/* Tighter space above the lead video so the first screen reaches the "Keep reading" cue */
.page-content{padding-top:1.25rem}
.page-content>.container{padding-top:0!important}
.journey-bar{margin-bottom:1.25rem}
.chapter-intro{margin-bottom:1.25rem;padding-bottom:1.25rem}
.chapter-intro__title{margin-bottom:.6rem}
.chapter-intro__epigraph{margin-top:.75rem}
.chapter>.chapter-video,.chapter-body>.guide-video{margin-bottom:1rem}
.read-cue{margin-top:0}
.chapter-body a.read-cue,.chapter-body a.read-cue:hover{color:var(--text);border-bottom:0}
.guide-video__eyebrow .i{width:16px;height:16px;color:var(--link)}
.jb-steps .is-lab .jb-n{background:color-mix(in srgb,var(--hl) 16%,transparent);border-color:var(--hl);color:var(--hl)}

/* Tabs inside reading pages (js/tabs.js) */
.chapter-body>.tabs{max-width:var(--wide)}
.tabs-list{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:var(--surface);border:1px solid var(--line);width:max-content;max-width:100%}
.tabs-list button{display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 1rem;border-radius:9px;font-weight:620;font-size:.93rem;color:var(--muted);transition:background-color 160ms ease,color 160ms ease}
.tabs-list button img,.tabs-list button .i{width:18px;height:18px;flex:none}
.tabs-list button[aria-selected="true"]{background:var(--purple);color:#fff}
@media (hover:hover) and (pointer:fine){.tabs-list button[aria-selected="false"]:hover{background:var(--accent-soft);color:var(--text)}}
.tab-panel{margin-top:1.25rem;padding:1.5rem;border-radius:var(--r-surface);border:1px solid var(--line);background:var(--surface)}
.tab-panel>*+*{margin-top:1rem}
.tab-panel h3:first-child{margin-top:0}
.tab-panel>p,.tab-panel>ul{max-width:var(--measure)}
@media (max-width:620px){.tabs-list{width:100%}.tabs-list button{flex:1 1 auto;justify-content:center;padding:0 .6rem;font-size:.85rem}.tab-panel{padding:1rem}}

/* ── Audit fixes (2026-10-13) ───────────────────────────────────────────── */
/* Dark product panels keep their own palette in both themes */
:is(.diagram,.tchart,.anat,.editor,.code-block,.loop){--white:#f4f2fa;--text:#f4f2fa;--muted:#a9a5b8;--border:rgba(255,255,255,.1);--line:rgba(255,255,255,.1);--purple-light:#a78bfa;--link:#c4b5fd;--teal:#2dd4bf;--done:#2dd4bf;--bg2:#14121d;--surface:#14121d;--surface-2:#1d1a29;
  --chip-y:#2dd4bf;--chip-n:#f87171;--chip-m:#f59e0b;--chip-s:#eab308;--chip-d:#34d399;color:#f4f2fa}
/* Status chips: dark colours by default, deeper shades on paper in light mode */
:root{--chip-y:#2dd4bf;--chip-n:#f87171;--chip-m:#f59e0b;--chip-s:#eab308;--chip-d:#34d399}
:root[data-theme="light"]{--chip-y:#0f766e;--chip-n:#b42318;--chip-m:#92400e;--chip-s:#854d0e;--chip-d:#047857}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--chip-y:#0f766e;--chip-n:#b42318;--chip-m:#92400e;--chip-s:#854d0e;--chip-d:#047857}}
.chapter-body .chip--y{color:var(--chip-y)!important}
.chapter-body .chip--n{color:var(--chip-n)!important}
.chapter-body .chip--m{color:var(--chip-m)!important}
.chapter-body .chip--s{color:var(--chip-s)!important}
.chapter-body .chip--d{color:var(--chip-d)!important}
.chapter-body .chip:not([class*="chip--"]){color:var(--link)}
/* Inline code: the chapter accent, deepened toward the text colour on paper */
:root{--code-ink:var(--code-accent,#cdbcff)}
:root[data-theme="light"] .chapter-body{--code-ink:color-mix(in srgb,var(--code-accent,#7c3aed) 58%,#17151f)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .chapter-body{--code-ink:color-mix(in srgb,var(--code-accent,#7c3aed) 58%,#17151f)}}
.chapter-body code:not(pre code){color:var(--code-ink);font-family:var(--mono)}
:root[data-theme="light"] .chapter-body code:not(pre code){box-shadow:none;background:color-mix(in srgb,var(--code-ink) 9%,transparent);border-color:color-mix(in srgb,var(--code-ink) 28%,transparent)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .chapter-body code:not(pre code){box-shadow:none;background:color-mix(in srgb,var(--code-ink) 9%,transparent);border-color:color-mix(in srgb,var(--code-ink) 28%,transparent)}}
.chapter-body :is(.diagram,.tchart,.anat,.editor,.loop) code:not(pre code){--code-ink:var(--code-accent,#cdbcff)}
/* Builder Skills category labels: lighter in dark mode */
:root[data-theme="dark"] .skillcat{--cat-ink:color-mix(in srgb,var(--cat) 72%,#ffffff)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .skillcat{--cat-ink:color-mix(in srgb,var(--cat) 72%,#ffffff)}}
/* Larger tap areas */
.jb-back{min-height:44px;padding:0 .4rem 0 0}
.video-all{display:inline-flex;align-items:center;min-height:36px;padding:0 .4rem}

/* Chapter comparison tables (.pmx) are dark product panels too */
.pmx-wrap{background:#101019;--white:#f4f2fa;--text:#f4f2fa;--muted:#a9a5b8;--border:rgba(255,255,255,.1);--line:rgba(255,255,255,.1);--link:#c4b5fd;color:#f4f2fa}
.chapter-body .pmx-wrap td,.chapter-body .pmx-wrap th{color:#f4f2fa}
.editor__code .d{color:#8d88a0!important}
.chapter-body .chip:not([class*="chip--"]){color:#c4b5fd}
:root[data-theme="light"] .chapter-body .chip:not([class*="chip--"]):not(:is(.tchart,.diagram,.anat,.editor,.pmx-wrap) *){color:var(--link)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .chapter-body .chip:not([class*="chip--"]):not(:is(.tchart,.diagram,.anat,.editor,.pmx-wrap) *){color:var(--link)}}
/* Inline-coloured words written for dark mode: deepen them on light paper, keep the hue.
   Anything inside a dark product panel is left as authored. */
:root[data-theme="light"] .chapter-body code[style*="color:#"]:not(:is(.diagram,.tchart,.anat,.editor,.code-block,.loop,.pmx-wrap) *){color:var(--code-ink)!important}
:root[data-theme="light"] .chapter-body :is(span,strong,b,em,a)[style*="color:#"]:not(:is(.diagram,.tchart,.anat,.editor,.code-block,.loop,.pmx-wrap) *){filter:brightness(.6) saturate(1.25)}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .chapter-body code[style*="color:#"]:not(:is(.diagram,.tchart,.anat,.editor,.code-block,.loop,.pmx-wrap) *){color:var(--code-ink)!important}
  :root:not([data-theme="dark"]) .chapter-body :is(span,strong,b,em,a)[style*="color:#"]:not(:is(.diagram,.tchart,.anat,.editor,.code-block,.loop,.pmx-wrap) *){filter:brightness(.6) saturate(1.25)}
}
.pmx-wrap{--surface:#14121d;--surface-2:#1a1726;--bg2:#14121d}
.chapter-body .pmx-wrap tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.chapter-body .chip[style*="color:#a855f7"]{color:#c4b5fd!important}