/* Lesson-specific drawings; all colours come from the shared site palette. */
.rl-page .route small{display:block;font-size:12px;font-weight:400;margin-top:3px}
.rl-page .prereq{border-left:2px solid var(--line);padding:2px 15px;margin:4px 0 30px;font-size:14px}
.rl-page .prereq p{margin:0}
.rl-page .lab{padding:18px}
.rl-page .lab-plots{margin-top:8px}
.rl-page .plot-card figcaption{font-size:13px;letter-spacing:0;text-transform:none;font-weight:600}
.rl-figure{width:100%;height:auto;display:block;min-width:350px}
.rl-figure[viewBox^="0 0 560"]{min-width:520px}
.rl-page .plot-svg{min-width:420px}
.rl-page .figure-scroll{overflow:auto;max-width:100%}
.rl-page .plot-card{overflow:auto}
.rl-figure text{fill:var(--text);font:16px system-ui,sans-serif}
.rl-figure .small{fill:var(--muted);font-size:14px}
.rl-figure .blue-text{fill:var(--blue)}
.rl-figure .orange-text{fill:var(--orange)}
.rl-figure .violet-text{fill:var(--violet)}
.rl-figure .surface{fill:var(--panel-2);stroke:var(--line);stroke-width:1.5}
.rl-figure .floor{stroke:var(--muted);stroke-width:2}
.rl-figure .obstacle{fill:var(--orange-soft);stroke:var(--orange);stroke-width:2}
.rl-figure .target{fill:var(--orange-soft);stroke:var(--orange);stroke-width:2}
.rl-figure .robot{fill:var(--blue-soft);stroke:var(--blue);stroke-width:2}
.rl-figure .current{fill:var(--blue);stroke:var(--text);stroke-width:1.5}
.rl-figure .estimate-bar{fill:var(--blue)}
.rl-figure .target-bar{fill:var(--orange)}
.rl-figure .old-bar{fill:var(--muted);opacity:.55}
.rl-page .controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0;font-size:14px}
.rl-page .controls select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);padding:7px;border-radius:6px;max-width:100%}
.rl-page .controls input[type=range]{flex:1;min-width:120px;accent-color:var(--blue)}
.rl-page button.active{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.rl-page .readout>span{font-size:12px;letter-spacing:0;text-transform:none}
.rl-page .readout strong{font-size:16px}
.rl-page .q-table{border-collapse:collapse;width:100%;font-size:14px;margin:16px 0}
.rl-page .q-table th,.rl-page .q-table td{padding:9px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.rl-page .q-table th:first-child,.rl-page .q-table td:first-child{text-align:left}
.rl-page .q-table .changed{color:var(--blue);background:var(--blue-soft);font-weight:700}
.rl-page .q-table .selected-row{background:var(--blue-soft)}
.rl-page .table-scroll{overflow:auto;max-width:100%}
.rl-page .experience{font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;border:1px solid var(--line);border-radius:8px;padding:13px;overflow-wrap:anywhere;background:var(--panel-2);margin:15px 0}
.rl-page .experience span{color:var(--blue)}
.rl-page .check-answer{color:var(--text);border-top:1px solid var(--line);padding-top:12px}
.rl-page .run-steps{background:var(--panel);padding:15px;border:1px solid var(--line);border-radius:8px;overflow:auto;font-size:13px}
.rl-page .source-note{font-size:14px}
.rl-page .note-line{font-size:13px}
@media(max-width:680px){.rl-page .lab-plots{grid-template-columns:1fr}.rl-page .lab{padding:12px}.rl-page .controls select{width:100%}.rl-page .lab-actions button{flex:1 1 auto}.rl-page .q-table{font-size:13px}.rl-page .reading section{margin-bottom:34px}}
@media(max-width:680px){
  .rl-page .plot-card .rl-figure{min-width:0}
  .rl-page .plot-card .rl-figure text{font-size:19px}
  .rl-page .plot-card .rl-figure .small{font-size:16px}
  .rl-page #target-flow,.rl-page #copy-figure{min-width:0}
  .rl-page #target-flow text,.rl-page #copy-figure text{font-size:20px}
  .rl-page #target-flow .small,.rl-page #copy-figure .small{font-size:18px}
}

/* Catch (Reinforcement learning basics) */
.catch-stage{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.catch-side{flex:1;min-width:220px}
.catch-screen{width:100%;max-width:250px;height:auto;display:block}
.plot-card .catch-screen{margin:0 auto}
.catch-cell{fill:var(--panel-2);stroke:var(--line-soft);stroke-width:1}
.catch-cell.bottom{fill:var(--panel)}
.catch-cell.pickable{cursor:pointer}
.catch-cell.pickable:hover{stroke:var(--blue)}
.catch-cell.lit-ball{fill:var(--orange)}
.catch-cell.lit-paddle{fill:var(--blue)}
.catch-ball{fill:var(--orange)}
.catch-paddle{fill:var(--blue)}
.catch-trail{fill:var(--blue);opacity:.22}
.catch-screen text,.rl-figure .catch-win,.rl-figure .catch-loss{font:700 17px system-ui,sans-serif}
.catch-win{fill:var(--blue)}
.catch-loss{fill:var(--red)}
.catch-score{font:700 18px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);margin:8px 0}
.trailer{padding:16px 18px}
.rl-figure .move-label{font-size:15px;fill:var(--text)}
.rl-figure .bar-ghost{fill:none;stroke:var(--muted);stroke-dasharray:3 3}
.rl-figure .loss-bar{fill:var(--red)}
.rl-figure .map-arrow{font:700 22px system-ui,sans-serif;fill:var(--blue)}
.rl-figure .cell-pass{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1;cursor:pointer}
.rl-figure .cell-fail{fill:var(--panel-2);stroke:var(--red);stroke-width:1.5;cursor:pointer}
.rl-figure .fail-mark{fill:var(--red);font:700 20px system-ui,sans-serif;pointer-events:none}
.rl-figure .net-edge{stroke:var(--blue);opacity:.55}
.rl-figure .net-edge.negative{stroke:var(--violet)}
.rl-figure .net-node{stroke:var(--text);stroke-width:1.2}
.rl-figure .net-node.hidden{fill:var(--blue)}
.rl-figure .net-node.output{fill:var(--panel)}
.test-dot{fill:var(--orange);stroke:var(--panel);stroke-width:1.5}
.test-dot.current{stroke:var(--text)}
.loop-pair{display:grid;grid-template-columns:1fr;gap:0}
.loop-pair .code-card{margin:8px 0 20px}
.loop-pair .code-card pre{font-size:12.5px}
@media(max-width:760px){.loop-pair{grid-template-columns:1fr}}
@media(max-width:680px){.rl-page .policy-figure{min-width:620px}.rl-page .labels-film{min-width:640px}.catch-screen{max-width:230px}}
.reading-list{padding-left:20px}
.reading-list li{margin-bottom:9px}
.rl-page .q-table.softmax{max-width:520px}
.rl-page .q-table.softmax td:first-child{color:var(--muted)}
.rl-page .controls .choice{margin:0}
/* Policy gradient lesson */
.rl-figure .pong-paddle{fill:var(--blue)}
.rl-figure .pong-ball{fill:var(--orange)}
.rl-figure .pong-ghost{fill:var(--orange);opacity:.3}
.rl-figure .pong-guess{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4}
.rl-figure .pong-guess-head{fill:var(--muted)}
.rl-figure .pong-motion{stroke:var(--text);stroke-width:2.5}
.rl-figure .pong-motion-head{fill:var(--text)}
.rl-figure .pg-window{fill:var(--blue);opacity:.12}
.rl-figure .pg-mu{stroke:var(--text);stroke-width:1.5;stroke-dasharray:4 4}
.rl-figure .pg-mu-text{fill:var(--text);font-weight:700}
.rl-figure .pg-dot.good{fill:var(--blue)}
.rl-figure .pg-dot.bad{fill:var(--orange)}
.rl-figure .pg-arrow{stroke-width:2;opacity:.7}
.rl-figure .pg-arrow.good{stroke:var(--blue)}
.rl-figure .pg-arrow.bad{stroke:var(--orange)}
.rl-figure .pg-estimate{stroke:var(--text);stroke-width:5;stroke-linecap:round}
.rl-figure .pg-estimate-text{fill:var(--text);font-weight:700}
.rl-figure .pg-bar.raw{fill:var(--orange)}
.rl-figure .pg-bar.base{fill:var(--blue)}
.rl-figure .pg-true{stroke:var(--text);stroke-width:1.5;stroke-dasharray:4 3}