/* RL articles: pseudocode blocks and labeled equations */
.article-body .algo { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: #eeefe9; margin: 25px 0; padding: 14px 18px 12px; }
.article-body .algo-title { color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.article-body .algo ol { list-style: none; counter-reset: algo; margin: 0; padding: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.article-body .algo li { counter-increment: algo; position: relative; margin: 3px 0; padding-left: 28px; overflow-wrap: anywhere; }
.article-body .algo li::before { content: counter(algo); position: absolute; left: 0; width: 18px; text-align: right; color: var(--muted); }
.article-body .algo li.i1 { padding-left: 46px; }
.article-body .algo li.i1::before { left: 18px; }
.article-body .algo li.i2 { padding-left: 64px; }
.article-body .algo li.i2::before { left: 36px; }
.article-body .algo-note { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.article-body .eq-label { margin: 27px 0 -8px; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.4; }
.article-body .eq-label span { color: var(--muted); font-weight: 400; }
.article-body .eq-label + .katex-block + .table-scroll, .article-body .eq-label + p + .table-scroll { margin-top: 0; }
@media (max-width: 520px) {
  .article-body .algo { padding: 12px 12px 10px; }
  .article-body .algo ol { font-size: 12.5px; }
  .article-body .algo li { padding-left: 24px; }
  .article-body .algo li.i1 { padding-left: 38px; }
  .article-body .algo li.i1::before { left: 14px; }
  .article-body .algo li.i2 { padding-left: 52px; }
  .article-body .algo li.i2::before { left: 28px; }
}

/* Long-form canvas (canvas.js). Wide screens: the board is pinned beside the text and scrolling drives its camera.
   Narrower screens: each step is an inline figure in the text. Rules that depend on the step read the state from
   the drawing scope, :is(.rc-stage, .rc-fig), because the figures sit inside .rc and keep their own step. */
.article-body .rc { --rc-h: clamp(230px, 40vh, 380px); --rc-bar: 40px; --rc-stage-h: calc(var(--rc-h) + var(--rc-bar)); --rc-top: 0px; margin: 8px 0 0; }
.article-body .rc-stage { position: sticky; top: 0; z-index: 20; height: var(--rc-stage-h); background: #fbfbf8; border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.article-body .rc-bar { flex: 0 0 var(--rc-bar); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px; border-bottom: 1px solid var(--line); background: #fff; }
.article-body .rc-view { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.article-body .rc-stage svg.rc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; margin: 0; }
.article-body .rc-where { min-width: 0; font: 600 12.5px/1.3 var(--sans, Arial, sans-serif); color: var(--accent); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-body .rc-nav { position: sticky; top: var(--rc-nav-top, var(--rc-stage-h)); z-index: 19; display: flex; gap: 8px; align-items: center; padding: 8px 0; background: #fbfbf8; border-bottom: 1px solid var(--line); font: 14px/1.3 var(--sans, Arial, sans-serif); }
.article-body .rc-nav select { flex: 1 1 auto; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.article-body .rc-nav button { flex: 0 0 auto; font: inherit; font-weight: 600; width: 40px; padding: 8px 0; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.article-body .rc-nav button:hover, .article-body .rc-nav button:focus-visible, .article-body .rc-nav select:focus-visible { border-color: var(--accent); }
.article-body .rc-mark { height: 0; margin: 0; scroll-margin-top: var(--rc-top); }
.article-body .rc :is(.rc-stage, .rc-fig).is-zoomed .rc-svg .rc-panel:not(.is-active) { opacity: .22; }
.article-body .rc-route { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; margin: 14px 0 6px; font-size: 14px; line-height: 1.4; }
.article-body .rc-route a { padding: 3px 9px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; }
.article-body .rc-route a:hover, .article-body .rc-route a:focus-visible { border-color: var(--accent); color: var(--accent); }
.article-body .rc-route span { color: var(--muted); }
.article-body .rc-body > h2, .article-body .rc-body > h3[id] { scroll-margin-top: var(--rc-top); }
/* The wide camera: canvas.js draws the board once at a base scale and moves it with a transform the compositor animates. */
.article-body .rc[data-mode="wide"] .rc-stage svg.rc-svg { right: auto; bottom: auto; transform-origin: 0 0; transition: transform .38s cubic-bezier(.2, .7, .2, 1); }
@media (min-width: 1000px) {
  .article-body .rc { width: min(1260px, calc(100vw - 64px)); position: relative; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 540px); gap: 40px; align-items: start; --rc-h: calc(100vh - 32px - var(--rc-bar)); }
  .article-body .rc-stage { top: 16px; border: 0; }
  .article-body .rc-nav { top: 0; }
  /* Room after the last section, so the board stays whole while its text and drawers are read. */
  .article-body .rc .rc-body { padding-bottom: 30vh; }
}
/* On small laptops the fixed text column would leave the board too narrow to read. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .article-body .rc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 520px) { .article-body .rc-where { font-size: 11.5px; } }
/* Inline figures. The live board stays in the page, hidden, as the source of the snapshots. */
.article-body .rc.rc-inline { position: relative; }
.article-body .rc.rc-inline > .rc-stage { position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; z-index: -1; }
.article-body .rc.rc-inline.rc-static > .rc-stage { display: none; } /* a plain drawing: snapshots copy it without laying it out */
.article-body .rc.rc-inline .rc-nav { display: none; }
.article-body .rc:not(.rc-inline) .rc-fig { display: none; }
.article-body .rc-fig { margin: 26px 0 30px; padding: 0; }
.article-body .rc-fig .rc-fig-cap { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 40px; margin: 0; padding: 5px 10px 3px; cursor: auto; font: 400 18px/1.2 var(--bb-hand); color: var(--bb-yellow) !important; }
.article-body .rc-fig-title { flex: 1 1 auto; min-width: 0; }
.article-body .rc-fig .rc-map { flex: 0 0 auto; display: block; width: auto; height: 26px; max-width: 64px; overflow: visible; }
.article-body .rc-map rect { fill: none; stroke: var(--bb-faint); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.article-body .rc-map rect.is-done { fill: var(--bb-dim); fill-opacity: .5; stroke: none; }
.article-body .rc-map rect.is-now { fill: var(--bb-yellow); stroke: none; }
.article-body .rc-fig .rc-view { position: relative; overflow: hidden; }
.article-body .rc-fig .rc-view > svg.rc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; margin: 0; }
.article-body .rc-fig > .rc-fig-view { pointer-events: none; } /* a snapshot: no hit testing; the docked live board keeps its taps */
.article-body .rc-fig.is-live:not(.is-docked) { cursor: pointer; } /* a tap opens the live board here */
.article-body .rc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media print { .article-body .rc-fig:not(.is-ready) { display: none; } }
.article-body .rc-fig .rc-fig-live { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; font: 600 12px/1 Arial, Helvetica, sans-serif; color: var(--bb-chalk) !important; background: transparent !important; border: 1px solid var(--bb-dim) !important; cursor: pointer; }
.article-body .rc-fig.is-docked > .rc-fig-view { display: none; }
.article-body .rc-fig > .rc-stage { position: relative; top: auto; height: auto; border: 0; }
@media (max-width: 700px) { .article-body .rc-fig { margin-inline: -20px; } .article-body .rc-fig .rc-fig-cap { padding-inline: 20px; } }
.article-body .ct th:first-child, .article-body .ct td:first-child { min-width: 5.5em; overflow-wrap: normal; word-break: normal; hyphens: none; }
.article-body .ct .table-scroll { margin: 18px 0; }
.article-body .ct th, .article-body .ct td { min-width: 0; padding: 9px 10px; font-size: 14px; line-height: 1.5; }
@media (max-width: 520px) { .article-body .ct th, .article-body .ct td { padding: 7px 6px; font-size: 13px; } .article-body .ct .katex { font-size: 1em; } }
.article-body .ct-words th, .article-body .ct-words td { overflow-wrap: normal; }
.article-body .rb-widget { margin: 24px 0 28px; border: 1px solid #dcded6; background: #fff; padding: 14px; font: 13px/1.5 Arial, Helvetica, sans-serif; color: #242622; overflow-wrap: normal; }
.article-body .rb-widget p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; color: #242622; }
.article-body .rb-widget .rb-title { font-size: 14px; }
.article-body .rb-widget .rb-assume { padding: 8px 10px; background: #f4f5f0; border-left: 3px solid #8f1d36; }
.article-body .rb-ctrl { margin: 10px 0 12px; }
.article-body .rb-ctrl label { display: block; margin: 0 0 6px; font-weight: 600; }
.article-body .rb-row { display: flex; align-items: center; gap: 8px; }
.article-body .rb-row input[type="range"] { flex: 1; min-width: 60px; margin: 0; accent-color: #8f1d36; }
.article-body .rb-ctrl button { font: 600 13px/1 Arial, Helvetica, sans-serif; border: 1px solid #242622; background: #fff; color: #242622; padding: 8px 12px; min-height: 36px; min-width: 36px; cursor: pointer; border-radius: 2px; }
.article-body .rb-ctrl button:hover { background: #f4f5f0; }
.article-body .rb-ctrl button[disabled] { opacity: .45; cursor: default; }
.article-body .rb-widget :focus-visible { outline: 3px solid #8f1d36; outline-offset: 2px; }
.article-body .rb-lane { margin: 0 0 12px; }
.article-body .rb-lane .rb-lane-h { margin: 0 0 4px; font-weight: 700; }
.article-body .rb-lane .rb-lane-h span { font-weight: 400; color: #656b62; }
.article-body .rb-widget b, .article-body .rb-widget strong, .article-body .rb-widget output, .article-body .rb-widget label { color: #242622; }
.article-body .rb-cells { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.article-body .rb-cell { padding: 5px 0 4px; text-align: center; border: 1px solid #c9ccc2; color: #242622; font-variant-numeric: tabular-nums; }
.article-body .rb-cell span { display: block; font-size: 11px; color: #656b62; }
.article-body .rb-cell b { display: block; font-size: 13px; }
.article-body .rb-cell.rb-dark, .article-body .rb-cell.rb-dark span, .article-body .rb-cell.rb-dark b { color: #fff; }
.article-body .rb-checks { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.article-body .rb-checks label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.article-body .rb-checks input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #8f1d36; flex: none; }
.article-body .rb-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 4px; }
.article-body .rb-out > div { padding: 8px 10px; border: 1px solid #dcded6; }
.article-body .rb-out span, .article-body .rb-out small { display: block; color: #656b62; font-size: 12px; }
.article-body .rb-out output { display: block; font: 700 20px/1.3 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; }
/* Reinforcement learning series: readable equations and mechanism drawings. */
.article-body .katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: .55rem .15rem; text-align: left; }
.article-body .katex-display > .katex { display: block; width: max-content; min-width: 100%; text-align: left; font-size: 1em; }
.article-body .rls-figure { margin: 1.3rem 0; }
.article-body .rls-figure > svg { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto; background: #fbfbf8; }
.article-body .rls-figure figcaption { margin-top: .5rem; font: 14px/1.45 var(--sans, Arial, sans-serif); color: #50554e; }
.article-body pre { max-width: 100%; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.article-body .rls-canvas .rc-svg { font-family: Arial, sans-serif; }
.article-body .rls-canvas .rc-svg .rls-panel-title { font-size: 16px; font-weight: 700; fill: #50554e; }
.article-body .rls-canvas .rc-body { min-width: 0; }
.article-body .series-box { overflow-wrap: anywhere; }
/* The series starts at Part 0, so the list numbers start at 0 and match "Part N". */
.series-box ol { list-style: none; counter-reset: rl-part -1; }
.series-box ol > li { counter-increment: rl-part; }
.series-box ol > li::before { content: counter(rl-part) ". "; }
.article-body .rls-canvas details { margin: 1rem 0; }
@media (max-width: 999px) { .article-body .rls-canvas { --rc-h: clamp(230px, 38vh, 340px); } }
/* Focused views show only the chosen mechanism. Titles stay on the whole map. */
.article-body .rls-canvas :is(.rc-stage, .rc-fig).is-zoomed .rc-panel:not(.is-active) { visibility: hidden; }
.article-body .rls-canvas :is(.rc-stage, .rc-fig).is-zoomed .rc-panel > .rls-panel-title,
.article-body .rls-canvas :is(.rc-stage, .rc-fig).is-zoomed .rc-panel > rect:first-child { visibility: hidden; }

/* Dark default, scoped by loading this file only on the reinforcement learning series.
   The theme button still switches the text column to light; the boards stay dark. */
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --paper: #141a16;
  --ink: #e8ece3;
  --muted: #b5beae;
  --accent: #efa27f;
  --green: #afc99c;
  --line: #56634f;
  --white: #1d271f;
  --rl-surface: #1d271f;
  --rl-raised: #263329;
  --rl-warning: #563c30;
  --rl-link-hover: #ffd0b8;
  --rl-stripe: #19221c;
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #f7f6f2;
  --ink: #242622;
  --muted: #50554e;
  --accent: #954025;
  --green: #49724e;
  --line: #cfd2c8;
  --white: #fff;
  --rl-surface: #eeefe9;
  --rl-raised: #e4e6de;
  --rl-warning: #f0d8cb;
  --rl-link-hover: #6b2a14;
  --rl-stripe: #f2f2ed;
}
html, body { background: var(--paper) !important; color: var(--ink) !important; }
body h1, body h2, body h3, body h4, body strong, body b { color: var(--ink); }
body a { color: var(--accent); }
body a:hover { color: var(--rl-link-hover); }
body header, body footer, .article-head, .article-header, .article-body, .article-layout {
  border-color: var(--line) !important;
}
.article-body p, .article-body li, .article-body .katex { color: inherit; }
.article-body figcaption, .article-meta, .article-subtitle, .label,
.flow small, .episodes span { color: var(--muted) !important; }
.article-body pre, .article-body code, .article-body .algo,
.article-body details, .article-body blockquote, .article-body .series-box,
.note, .episodes a, .flow li {
  background: var(--rl-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
body table, body th, body td, body caption, .table-scroll {
  color: var(--ink); border-color: var(--line) !important;
}
body thead th { background: var(--rl-raised) !important; color: var(--ink) !important; }
body tbody tr:nth-child(even) { background: var(--rl-stripe); }
body td.low { background: var(--rl-warning) !important; }
.article-body details summary { color: var(--ink) !important; }
.article-body .katex-display { background: transparent; }
body button, body select, body input, body textarea,
#rc .ft-toolbar, #rc .dt-controls, #rc .ft-toolbar button, #rc .dt-controls button,
#rc .rc-bar, #rc .rc-nav, #rc .rc-where {
  background: var(--rl-surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
body :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#rc .rc-stage, #rc .rc-view, #rc .ft-viewer, #rc .dt-viewer,
#rc .ft-viewport, #rc .dt-frame, #rc .dt-conditions,
.article-body .rls-figure, .article-body .rls-figure > svg {
  background: var(--paper) !important; color: var(--ink) !important;
  border-color: var(--line) !important;
}
#rc .ft-detail summary, #rc .dt-caption, #rc .ft-hint,
#rc .ft-zoom-readout, #rc .dt-readout, #rc .ft-detail figcaption {
  color: var(--muted) !important;
}
/* Blackboard drawings. Every series diagram is chalk on a dark board: the authored
   light palette maps to chalk colors here, so the source geometry and numbers stay
   untouched. CSS fill/stroke rules override SVG presentation attributes. Red marks
   risk or the value being changed, blue marks a learned value or a choice, green
   marks a safe or good outcome, yellow marks the one thing to look at. */
@font-face { font-family: 'RL Chalk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/robotics/rl/fonts/patrick-hand-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'RL Chalk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/robotics/rl/fonts/patrick-hand-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bb-board: #1d2824;
  --bb-board-2: #24312c;
  --bb-chalk: #f4f1e8;
  --bb-dim: #c3c9bd;
  --bb-faint: #6f7d75;
  --bb-red: #ff9f88;
  --bb-pink: #ff93b8;
  --bb-blue: #93d4ff;
  --bb-green: #a8e2a0;
  --bb-yellow: #ffe17c;
  --bb-hand: 'RL Chalk', 'Patrick Hand', 'Chalkboard SE', 'Comic Neue', 'Segoe Print', 'Arial', sans-serif;
  --bb-texture: radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.045), transparent 55%),
    radial-gradient(ellipse at 82% 78%, rgba(255,255,255,.035), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --rl-diagram-filter: none;
}
/* The board surfaces. */
#rc .rc-stage, #rc .rc-view, #rc .ft-viewer, #rc .ft-viewport, #rc :is(.rc-stage, .rc-fig)[data-active-panel="tree"] .ft-viewer, #rc .rc-fig,
.article-body .rls-figure > svg, .article-body svg.ft-failure, .article-body .bb-board,
.article-body .rb-widget, .article-body .bb-figure {
  background-color: var(--bb-board) !important;
  background-image: var(--bb-texture) !important;
  color: var(--bb-chalk) !important;
}
#rc .ft-viewport svg.ft-graph, .article-body .rc-view > svg.rc-svg { background: transparent !important; }
/* Nested panel drawings inherit chalk too (the site colors any svg[role=img] dark). */
.article-body :is(svg.rc-svg, svg.ft-graph, .rls-figure > svg, svg.bb) svg { color: var(--bb-chalk) !important; }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) {
  font-family: var(--bb-hand);
  color: var(--bb-chalk) !important;
  filter: url(#bb-chalk);
  stroke-linecap: round; stroke-linejoin: round;
}
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) text {
  font-family: var(--bb-hand) !important; letter-spacing: .01em;
}
/* Ink: dark authored ink becomes chalk. */
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#242622"], [fill="#50554e"], [fill="#000"], [fill="#111"]) { fill: var(--bb-chalk); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([stroke="#242622"], [stroke="#000"], [stroke="#111"]) { stroke: var(--bb-chalk); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#656b62"], [fill="#777"], [fill="#8d9087"], [fill="#7f8f79"], [fill="#b6baaf"]) { fill: var(--bb-dim); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([stroke="#656b62"], [stroke="#777"], [stroke="#8d9087"], [stroke="#7f8f79"], [stroke="#50554e"]) { stroke: var(--bb-dim); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([stroke="#b6baaf"], [stroke="#dcded6"], [stroke="#d3d6cb"], [stroke="#c9ccc2"]) { stroke: var(--bb-faint); }
/* Paper: light surfaces become the board, so boxes read as chalk outlines. */
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#fff"], [fill="#ffffff"], [fill="white"], [fill="#fbfbf8"], [fill="#f5f4ed"], [fill="#efefe9"], [fill="#eceae2"], [fill="#eee"], [fill="#eeefe9"], [fill="#f8f9f4"], [fill="#f4f5f0"], [fill="#f7f6f2"]) { fill: var(--bb-board); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#d9d6cc"], [fill="#dcded6"]) { fill: var(--bb-board-2); }
/* Tints keep their meaning as faint colored chalk washes. */
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#d7e5ee"], [fill="#e4eef4"], [fill="#eef3f6"]) { fill: rgba(147, 212, 255, .16); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#f6e5e0"], [fill="#e7c5b8"], [fill="#efd9cf"], [fill="#fbeef1"], [fill="#f6dbe1"]) { fill: rgba(255, 159, 136, .17); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#e6f0e1"]) { fill: rgba(168, 226, 160, .15); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#f8f0cf"]) { fill: rgba(255, 225, 124, .16); }
/* Meaning colors become chalk colors. */
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) [fill="#b44c2c"] { fill: var(--bb-red); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) [stroke="#b44c2c"] { stroke: var(--bb-red); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#8f1d36"], [fill="#4a0f1c"]) { fill: var(--bb-pink); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) [stroke="#8f1d36"] { stroke: var(--bb-pink); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#2b6a8e"], [fill="#3d6f9e"]) { fill: var(--bb-blue); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([stroke="#2b6a8e"], [stroke="#3d6f9e"]) { stroke: var(--bb-blue); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([fill="#5f7f4f"], [fill="#49724e"], [fill="#3f7a45"]) { fill: var(--bb-green); }
.article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) :is([stroke="#5f7f4f"], [stroke="#49724e"], [stroke="#3f7a45"]) { stroke: var(--bb-green); }
/* New drawings use these classes directly. */
.article-body svg :is(.c-chalk) { fill: var(--bb-chalk); } .article-body svg .s-chalk { stroke: var(--bb-chalk); }
.article-body svg .c-dim { fill: var(--bb-dim); } .article-body svg .s-dim { stroke: var(--bb-dim); }
.article-body svg .s-faint { stroke: var(--bb-faint); }
.article-body svg .c-red { fill: var(--bb-red); } .article-body svg .s-red { stroke: var(--bb-red); }
.article-body svg .c-pink { fill: var(--bb-pink); } .article-body svg .s-pink { stroke: var(--bb-pink); }
.article-body svg .c-blue { fill: var(--bb-blue); } .article-body svg .s-blue { stroke: var(--bb-blue); }
.article-body svg .c-green { fill: var(--bb-green); } .article-body svg .s-green { stroke: var(--bb-green); }
.article-body svg .c-yellow { fill: var(--bb-yellow); } .article-body svg .s-yellow { stroke: var(--bb-yellow); }
.article-body svg .c-board { fill: var(--bb-board); }
.article-body svg .c-none { fill: none; }
.article-body .rls-canvas .rc-svg .rls-panel-title { fill: var(--bb-yellow); font-weight: 400; }
/* Panels on the big canvas: a thin chalk frame, no paper card. */
.article-body svg.rc-svg .rc-panel > rect:first-child { stroke: var(--bb-faint) !important; stroke-dasharray: 2 5; fill: transparent !important; }
.article-body .rls-figure > svg, .article-body svg.ft-failure { border-radius: 4px; }
.article-body img[src*="/rl/"][src$=".svg"] { border-radius: 4px; }
/* HTML widgets on the board: chalk text, faint chalk frames. */
.article-body .rb-widget { border-color: var(--line) !important; font-family: Arial, Helvetica, sans-serif; }
.article-body .rb-widget :is(p, b, strong, output, label), .article-body .rb-cell, .article-body .rb-cell b { color: var(--bb-chalk) !important; }
.article-body .rb-widget .rb-title b { font: 400 21px/1.3 var(--bb-hand); color: var(--bb-yellow) !important; }
.article-body .rb-widget .rb-assume { background: rgba(255, 147, 184, .08) !important; border-left-color: var(--bb-pink) !important; }
.article-body :is(.rb-lane .rb-lane-h span, .rb-cell span, .rb-out span, .rb-out small) { color: var(--bb-dim) !important; }
.article-body :is(.rb-cell, .rb-out > div) { border-color: var(--bb-faint) !important; }
.article-body .rb-ctrl button { background: transparent !important; color: var(--bb-chalk) !important; border-color: var(--bb-dim) !important; }
.article-body :is(.rb-row input[type="range"], .rb-checks input) { accent-color: var(--bb-yellow); }
.article-body .rb-widget :focus-visible { outline-color: var(--bb-yellow); }
@media (prefers-reduced-motion: reduce) { .article-body :is(svg.rc-svg, svg.ft-graph, svg.ft-failure, .rls-figure > svg, svg.bb) { filter: none; } }
@media print {
  :root:not([data-theme="light"]), :root[data-theme="light"] { --paper: #fff; --ink: #242622; --muted: #50554e; --accent: #954025; --line: #bbb; --rl-surface: #f5f5f0; --rl-raised: #eee; --rl-warning: #f0d8cb; --rl-diagram-filter: none; color-scheme: light; }
}

/* Keep the route links legible on the series dark surface. */
#rc .rc-route a { background: var(--rl-surface); color: var(--accent); border-color: var(--line); }