:root{--max:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--body);font:16px/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}a{color:var(--mint);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--text);line-height:1.16;letter-spacing:-.035em}h1{font-size:clamp(2.05rem,3.4vw,3.05rem);margin-bottom:14px}h2{font-size:clamp(1.55rem,2.2vw,2rem);margin-bottom:13px}h3{font-size:1.13rem;margin-bottom:7px}strong{color:var(--text)}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}code{font-size:.91em;color:var(--body)}::selection{background:#315648;color:var(--text)}:focus-visible{outline:2px solid var(--mint);outline-offset:3px}.wrap{max-width:var(--max);margin-inline:auto;padding-inline:34px}.skip{position:absolute;top:-100px;left:14px;background:var(--text);color:var(--bg);padding:8px 13px;z-index:10}.skip:focus{top:12px}
.kicker,.eyebrow,.lab-label,.mini-label{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--mint)}.eyebrow{display:block;margin-bottom:9px}.topline{display:flex;justify-content:space-between;align-items:center;gap:15px;padding-block:21px;font-size:12px;color:var(--muted)}.topline a{color:var(--muted)}.topline a:hover{color:var(--mint)}.rule{height:1px;background:var(--line)}.overview{padding-top:40px;padding-bottom:70px}.overview>p{max-width:760px}.lead{font-size:18px;line-height:1.58}.quiet{font-size:14px;color:var(--muted)}.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:28px 0 40px}.lesson-card{display:flex;flex-direction:column;min-height:260px;padding:27px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(155deg,#1c2630,#171d27 68%);color:var(--body);transition:transform .2s,border-color .2s}.lesson-card:hover{border-color:#689f86;transform:translateY(-3px);text-decoration:none}.lesson-card h2{margin:11px 0;font-size:1.7rem}.lesson-card p{font-size:15px;max-width:440px}.lesson-card span:last-child{color:var(--mint);font-size:13px;font-weight:750;margin-top:auto}.overview-note{max-width:820px;border-top:1px solid var(--line);padding-top:25px}.overview-note h2{font-size:1.35rem}.overview-note p{font-size:14px}
.lesson-shell{display:grid;grid-template-columns:155px minmax(0,1fr);gap:56px;align-items:start}.side{position:sticky;top:24px;padding-top:17px}.side p{font-size:10px;letter-spacing:.13em;color:var(--dim);font-weight:800}.side a{display:block;border-left:1px solid var(--line);padding:9px 11px;color:var(--muted);font-size:12px;line-height:1.32}.side a:hover{color:var(--mint);border-color:var(--mint);background:#192720;text-decoration:none}.article{min-width:0;padding-bottom:90px}.article-head{max-width:830px;padding:26px 0 15px;border-top:1px solid var(--line)}.article-head>p{font-size:17px;line-height:1.58;max-width:770px}.route{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:9px 0 30px;max-width:820px}.route span{border:1px solid #40514d;background:#1a2928;color:var(--body);padding:5px 9px;border-radius:6px;font-size:11px;font-weight:750}.route b{font-size:12px;color:var(--dim);font-weight:400}.reading{max-width:800px}.reading section{margin:0 0 36px;scroll-margin-top:25px}.reading p{margin-bottom:15px;line-height:1.78}.reading li{margin-bottom:7px}.reading ul,.reading ol{padding-left:22px}.callout{border-left:3px solid var(--orange);background:#2a241f;color:var(--body);padding:15px 19px;margin:22px 0;font-size:14px}.callout strong{color:var(--body)}.two-up{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:20px 0}.concept-card{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:17px}.concept-card span{display:block;color:var(--mint);font-size:10px;letter-spacing:.12em;font-weight:800;margin-bottom:6px}.concept-card p{font-size:13px;line-height:1.6;margin-bottom:0}.trace{border:1px solid var(--line);background:var(--panel);border-radius:9px;margin:20px 0;overflow:hidden}.trace-row{display:grid;grid-template-columns:155px minmax(0,1fr);gap:15px;padding:9px 15px;border-top:1px solid var(--line);font-size:13px}.trace-row:first-child{border-top:0}.trace-row strong{font-weight:700}.trace-row>span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--body);overflow-wrap:anywhere}
.lab{max-width:850px;border:1px solid #405a51;border-radius:12px;background:var(--panel);padding:24px;margin:29px 0 42px;scroll-margin-top:25px}.lab h2{font-size:1.62rem;margin:5px 0 8px}.lab>p{font-size:14px;color:var(--muted);max-width:720px}.lab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px 0}.field{display:block;border:1px solid var(--line);border-radius:8px;background:var(--panel2);padding:11px 13px}.field>span{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;color:var(--body)}.field>span>output{color:var(--mint);font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace}.field input[type=range]{display:block;width:100%;margin-top:11px;accent-color:var(--mint)}.field input[type=number],.field select{width:100%;margin-top:8px;background:#101923;border:1px solid #45545b;color:var(--text);border-radius:6px;padding:7px 9px}.lab-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.lab-actions button{border:1px solid #567764;border-radius:7px;background:#1d2d2a;color:var(--mint);padding:9px 13px;font-size:13px;font-weight:750}.lab-actions button:hover{background:#264336}.lab-actions button.primary{background:var(--mint);color:var(--body)}.lab-actions button:disabled{opacity:.45;cursor:not-allowed}.readouts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:15px 0}.readout{border:1px solid var(--line);border-radius:8px;background:var(--panel2);padding:11px;min-width:0}.readout>span{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}.readout strong{display:block;color:var(--text);font:700 17px ui-monospace,SFMono-Regular,Menlo,monospace;margin-top:6px;overflow-wrap:anywhere}.lab-status{border-top:1px solid var(--line);padding-top:12px;margin:15px 0 0!important;color:var(--body)!important;font-size:13px!important;min-height:58px}.note-line{font-size:12px;color:var(--muted)}
.code-card{max-width:810px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--panel);margin:21px 0 27px}.code-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;font-size:12px;font-weight:700;color:var(--text)}.code-card-head a{font-weight:650;white-space:nowrap}.code-card pre{background:#0e151e;color:var(--body);margin:0;padding:15px 17px;overflow:auto;font-size:12px;line-height:1.7;tab-size:4}.code-card p{font-size:13px;line-height:1.65;padding:14px 16px;margin:0}.check{max-width:810px;background:#1a2830;border:1px solid #3d5156;border-radius:8px;padding:0 15px;margin:20px 0}.check summary{cursor:pointer;color:var(--text);font-weight:700;font-size:14px;padding:13px 0}.check p{border-top:1px solid var(--line);padding:12px 0 15px;margin:0;font-size:14px}.definitions{max-width:810px;border-top:1px solid var(--line);padding-top:22px;margin:44px 0 30px}.definitions h2{font-size:1.6rem}.definitions dl{margin:0}.definitions dl>div{display:grid;grid-template-columns:165px minmax(0,1fr);gap:14px;padding:10px 0;border-top:1px solid var(--line)}.definitions dt{font-weight:750;color:var(--text);font-size:13px}.definitions dd{margin:0;font-size:13px;line-height:1.6}.source-note{max-width:810px;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:12px}.bottom-nav{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:810px;margin:33px 0}.bottom-nav a{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:13px 16px;font-weight:750;font-size:13px}.bottom-nav a:last-child{text-align:right}.footer{border-top:1px solid var(--line);padding:24px 0 38px;color:var(--muted);font-size:12px}.footer .wrap{display:flex;justify-content:space-between;gap:12px}
.world-stage{position:relative;overflow:hidden;height:230px;border:1px solid #3b4d5b;border-radius:9px;background:linear-gradient(180deg,#142333,#1f2a36)}.world-stage:before{content:"";position:absolute;left:0;right:0;bottom:15px;height:3px;background:#92a7aa}.world-ball{position:absolute;left:50%;bottom:var(--ball-bottom,65%);width:36px;height:36px;margin-left:-18px;border-radius:50%;background:radial-gradient(circle at 32% 27%,#b9eaff,#4b96de 58%,#2d5a91);box-shadow:0 9px 18px #0006;transition:bottom .16s}.world-stage.touching .world-ball{box-shadow:0 0 0 7px #efb98645,0 9px 18px #0006}.world-stage .stage-top,.world-stage .stage-floor{position:absolute;left:13px;color:var(--body);font-size:10px}.stage-top{top:10px}.stage-floor{bottom:2px}.plot{border:1px solid var(--line);border-radius:8px;background:#101923;padding:8px;margin:14px 0}.plot svg{display:block;width:100%;height:auto}.plot text{fill:var(--muted);font:11px ui-monospace,SFMono-Regular,Menlo,monospace}.plot .grid{stroke:#293541}.plot .line{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.plot .cursor{stroke:var(--orange);stroke-width:1.5;stroke-dasharray:4 4}.plot .dot{fill:var(--orange)}
@media(max-width:850px){.lesson-shell{grid-template-columns:125px minmax(0,1fr);gap:25px}.wrap{padding-inline:24px}.readouts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.wrap{padding-inline:19px}.overview{padding-top:25px}.lesson-grid,.lesson-shell{display:block}.lesson-card{min-height:220px;margin-bottom:11px}.side{display:none}.article-head{padding-top:20px}.article-head>p{font-size:16px}.lab{padding:17px}.lab-grid,.two-up{grid-template-columns:1fr}.readouts{grid-template-columns:repeat(2,1fr)}.trace-row{grid-template-columns:1fr;gap:2px}.definitions dl>div{display:block}.definitions dt{margin-bottom:3px}.bottom-nav{grid-template-columns:1fr}.bottom-nav a:last-child{text-align:left}.footer .wrap{display:block}.footer span{display:block}}
@media(max-width:430px){.code-card-head{align-items:flex-start;flex-direction:column}.lab-actions button{flex-grow:1}.readout strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}

/* PyTorch lesson: hand-drawn figures, live plots and the training player. Colours come from the shared tokens. */
.article .code-card pre{font-size:14px}
.formula{font:600 17px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 16px;display:inline-block}
.tensor-svg{display:block;width:100%;height:auto}
.tensor-svg text{font:15px ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--text)}
.tensor-svg .cells rect{fill:var(--panel-2);stroke:var(--line);stroke-width:1.5}
.tensor-svg .cells text{text-anchor:middle;font-size:18px}
.tensor-svg .cells.hot rect{stroke:var(--orange);stroke-width:2}
.tensor-svg .cells .faint rect{stroke-dasharray:4 3}
.tensor-svg .cells .faint text{fill:var(--muted)}
.tensor-svg .fig-head{font-weight:700;fill:var(--text)}
.tensor-svg .fig-note{font:14px Inter,system-ui,sans-serif;fill:var(--muted)}
.tensor-svg .hot-text{fill:var(--orange)}
.lab-plots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 6px}
.plot-card{margin:0;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);padding:8px 8px 4px}
.plot-card figcaption{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 6px 0}
.lab-settings{border-top:1px solid var(--line);margin-top:14px;padding-top:10px}
.lab-settings summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--blue)}
.lab-settings .lab-grid{margin:14px 0 4px}
.lab-status em,.lab>p em{font-style:normal;color:var(--text)}
.train-box{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:12px 14px;margin:22px 0}
.train-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 4px;font-size:13px}
.train-controls label{white-space:nowrap}
.train-controls output{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--blue);display:inline-block;min-width:3ch;text-align:right}
.train-controls input[type=range]{flex:1;min-width:160px;accent-color:var(--blue)}
.train-controls button{border:1px solid var(--blue);border-radius:7px;background:var(--blue);color:var(--on-accent);padding:8px 14px;font-size:13px;font-weight:750;min-width:9.5em}
.update-wire.flow{stroke-width:2.2;stroke-dasharray:7 5;animation:wire-flow .8s linear infinite}
@keyframes wire-flow{to{stroke-dashoffset:-12}}
.update-svg text.changed{animation:value-flash 1.1s ease-out}
@keyframes value-flash{0%{fill:var(--orange)}100%{}}
.notebook-callout#notebook{margin-top:34px}
@media(max-width:760px){.lab-plots{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.update-wire.flow{animation:none;stroke-dasharray:none}.update-svg text.changed{animation:none}}
@media(max-width:680px){.tensor-svg{min-width:560px}#fig-rule,#fig-bowl{min-width:470px}}

/* MuJoCo: one scene and its state, driven by the recorded simulator trace. */
.mj-drawing { display: block; width: 100%; height: auto; }
.mj-drawing text { font: 14px system-ui,sans-serif; fill: var(--body); }
.mj-drawing .mj-label { font-weight: 600; fill: var(--text); }
.mj-box { fill: var(--panel-2); stroke: var(--line); stroke-width: 1.5; }
.mj-floor { stroke: var(--muted); stroke-width: 2; }
.mj-guide { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mj-sphere { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 2.5; }
.mj-centre { fill: var(--blue); }
.mj-start { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .45; }
.mj-touching { stroke: var(--orange); fill: var(--orange-soft); }
.mj-force, .mj-wire { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.mj-arrowhead { fill: var(--blue); }
.mj-measure, .mj-leader { fill: none; stroke: var(--muted); stroke-width: 1; }
.mj-drawing .mj-contact-label { fill: var(--orange); }
.mj-radius-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 5; }
.mj-cursor { stroke: var(--orange); stroke-width: 1; stroke-dasharray: 3 4; }
.mujoco-page .plot-card { overflow-x: auto; }
.mujoco-page .lab-plots .mj-drawing, .mujoco-page .lab-plots .plot-svg { min-width: 360px; }
@media(max-width:680px) {
  .mujoco-page .teaching-figure .mj-drawing { min-width: 560px; }
  .mujoco-page .plot-card .plot-svg, .mujoco-page .plot-card .mj-drawing { min-width: 420px; }
  .mujoco-page #mj-reading-height, .mujoco-page #mj-speed-plot { min-width: 470px; }
  .mujoco-page .teaching-figure { overflow-x: auto; }
}
.mj-drawing .mj-small { font-size: 13px; fill: var(--muted); }
.mj-velocity { stroke: var(--violet); stroke-width: 3; }
.mj-velocity-head { fill: var(--violet); }
.mj-drawing .mj-velocity-label { font-size: 14px; fill: var(--violet); }
.mj-floor-contact { stroke: var(--orange); }
@media (max-width: 680px) { .mujoco-page .plot-card #mj-scene { min-width: 0; } }

/* Shared by interactive figures in the foundations and the workshop (which loads this file). */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.inline-lab{max-width:800px;margin:22px 0 26px}
.choice-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px;font-size:13px}
.choice-row span{min-width:8.5em;color:var(--muted)}
.choice-row button{border:1px solid var(--line);border-radius:6px;background:var(--panel-2);color:var(--body);padding:5px 12px;font-size:13px}
.choice-row button.active{border-color:var(--blue);color:var(--blue);font-weight:700}
@media(max-width:680px){.choice-row span{min-width:0;width:100%}}
/* A small network */
.grid-cell{fill:var(--panel-2);stroke:var(--line)}
.grid-cell.bias{fill:var(--panel)}
.grid-cell.hot{stroke:var(--orange);stroke-width:1.6}
.plot-svg .grid-head{font-size:12px;fill:var(--text)}
.plot-svg .grid-label{font-size:11px}
.plot-svg .grid-note{font-size:13px;fill:var(--body)}
.plot-svg .hot-text{fill:var(--orange)}
.ramp-line{fill:none;stroke:var(--violet);stroke-width:1.3;opacity:.45}
.bend-mark{fill:var(--violet)}

.count-table{border-collapse:collapse;margin:16px 0 20px;font-size:14px;max-width:800px;width:100%}
.count-table th,.count-table td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.count-table th{color:var(--text);font-weight:700;font-size:13px}
.count-table td:nth-child(n+2):nth-child(-n+5),.count-table th:nth-child(n+2):nth-child(-n+5){text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:680px){.count-table{display:block;overflow-x:auto}}
.fit-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:10px;align-items:center}
.live-code{margin:0 0 10px}
.live-code pre{font-size:14px}
@media(max-width:680px){.fit-row{grid-template-columns:1fr}#fit-net{max-width:260px;margin:auto}}
/* Which way to correct */
.lab-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:680px){.lab-grid.three{grid-template-columns:1fr}}
.chain-box{fill:var(--panel-2);stroke:var(--line);stroke-width:1.5}
.chain-box.param{stroke:var(--blue);stroke-width:2}
.plot-svg .chain-title{font-size:13px;fill:var(--text)}
.plot-svg .chain-value{font:15px ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--blue)}
.chain-fwd{fill:none;stroke:var(--muted);stroke-width:1.5}
.chain-back{fill:none;stroke:var(--violet);stroke-width:2.2;stroke-dasharray:6 4}
.chain-fwd-head{fill:var(--muted)}.chain-back-head{fill:var(--violet)}
.plot-svg .chain-rate{font-size:12.5px;fill:var(--violet)}
.plot-svg .chain-result{font-size:13px;font-weight:700;fill:var(--violet)}
.plot-svg .chain-note{font-size:12px;fill:var(--muted)}
.vote-neg{fill:var(--blue);opacity:.75}.vote-pos{fill:var(--violet);opacity:.75}.vote-avg{fill:var(--orange)}
/* Backpropagation stepper, loop and cost */
.bp-node{fill:var(--panel-2);stroke:var(--line);stroke-width:1.5}
.bp-node.param{stroke:var(--blue);stroke-width:2}
.bp-node.input{fill:var(--panel);stroke-dasharray:4 3}
.bp-node.active{stroke:var(--orange);stroke-width:2.5}
.bp-node.off{fill:var(--panel);stroke-dasharray:3 3}
.plot-svg .bp-title{font-size:13px;fill:var(--text)}
.plot-svg .bp-value{font:15px ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--body)}
.plot-svg .bp-value.updated{fill:var(--blue);font-weight:700}
.plot-svg .bp-blame{font-size:12.5px;font-weight:700;fill:var(--violet)}
.bp-edge{fill:none;stroke:var(--line);stroke-width:1.6}
.bp-edge.lit{stroke:var(--blue);stroke-width:2.6}
.bp-edge.back{stroke:var(--violet);stroke-width:3.2;stroke-dasharray:7 4}
.bp-lit-head{fill:var(--blue)}
.bp-phase{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin:2px 0 6px}
.bp-phase strong{font-size:14px;padding:3px 10px;border-radius:999px;border:1px solid var(--line)}
.bp-phase .phase-forward{color:var(--blue);border-color:var(--blue)}
.bp-phase .phase-backward{color:var(--violet);border-color:var(--violet)}
.bp-phase .phase-update{color:var(--orange);border-color:var(--orange)}
.bp-status{min-height:76px}
.loop-w1{fill:none;stroke:var(--blue);stroke-width:2.2}.loop-v{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-dasharray:6 4}
.loop-b1{fill:none;stroke:var(--violet);stroke-width:2.2}.loop-c{fill:none;stroke:var(--violet);stroke-width:2.2;stroke-dasharray:6 4}
.plot-svg .loop-w1-text,.plot-svg .loop-v-text{fill:var(--blue)}.plot-svg .loop-b1-text,.plot-svg .loop-c-text{fill:var(--violet)}
.loop-strip span small{display:block}
.plot-svg text.on-bar{fill:var(--bg);font-weight:700}

/* Layer map */
.layer-box{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-dasharray:6 5;opacity:.8}
.layer-split{stroke:var(--line);stroke-dasharray:3 4}
.plot-svg .layer-head{font-size:13px;font-weight:700;fill:var(--blue)}
.plot-svg .layer-name{font-size:13px;font-weight:700;fill:var(--text)}
.plot-svg .layer-data{font-size:13px;font-weight:700;fill:var(--muted)}
.plot-svg .layer-sub{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;fill:var(--body)}
.layer-table .data-row td{color:var(--muted)}
.bp-group{fill:none;stroke:var(--blue);stroke-width:1.3;stroke-dasharray:6 5;opacity:.7}
.plot-svg .bp-group-title{font-size:12.5px;font-weight:700;fill:var(--blue)}
.plot-svg .bp-group-title.muted{fill:var(--muted)}
.plot-svg .bp-group-sub{font-size:11.5px;fill:var(--muted)}
.layer-table th,.layer-table td{text-align:left!important}
.layer-table th:last-child,.layer-table td:last-child{text-align:right!important}

/* Neural network · part 2 (choices) */
.choices-page .prereq{border-left:2px solid var(--line);padding:2px 15px;margin:4px 0 30px;font-size:14px}
.choices-page .prereq p{margin:0}
.choices-page .reading-list{padding-left:20px}
.choices-page .reading-list li{margin-bottom:9px}
.choices-page .figure-scroll{overflow:auto;max-width:100%}
.choice-map{min-width:440px;cursor:crosshair}
.region-0{fill:var(--blue)} .region-1{fill:var(--violet)} .region-2{fill:var(--orange)}
.person{stroke:var(--panel);stroke-width:1.2}
.person.size-0{fill:var(--blue)} .person.size-1{fill:var(--violet)} .person.size-2{fill:var(--orange)}
.chart-line{stroke:var(--muted);stroke-width:1.4;stroke-dasharray:5 4}
.neuron-line{stroke:var(--text);stroke-width:2;opacity:.8}
.neuron-tag{fill:var(--panel);stroke:var(--text);stroke-width:1.4}
.neuron-tag-text{fill:var(--text);font:700 12px system-ui,sans-serif}
.picked{fill:none;stroke:var(--text);stroke-width:2.5}
.loss-dot{fill:var(--orange);stroke:var(--panel);stroke-width:1.5}
.worked{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:12px 15px;margin:14px 0 18px;font:14px/1.9 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto}
.worked div span{display:inline-block;min-width:9.5em;color:var(--muted);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.worked strong{color:var(--blue)}
.softmax-table{margin:4px 0}
.softmax-table td,.softmax-table th{text-align:right}
.softmax-table td:first-child,.softmax-table th:first-child{text-align:left;color:var(--muted)}
.choices-page .plot-card .table-scroll{padding:6px}
@media(max-width:680px){.worked div span{display:block;min-width:0}.choice-map{min-width:360px}}
.choices-page .plot-card{overflow:auto;min-width:0}
.choices-page .run-steps{background:var(--panel);padding:15px;border:1px solid var(--line);border-radius:8px;overflow:auto;font-size:13px}
.numbers-table td,.numbers-table th{text-align:right;white-space:nowrap}
.numbers-table td:first-child,.numbers-table th:first-child{text-align:left}
.numbers-table tr.off td{color:var(--muted);opacity:.7}
.numbers-table tr.picked-row td{background:var(--blue-soft)}
.numbers-person{font-size:14px;margin:10px 0 0}
.softmax-sliders{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 8px;font-size:14px}
.softmax-sliders label{display:flex;align-items:center;gap:8px;font-weight:700}
.softmax-sliders input{accent-color:var(--blue);width:130px}
.softmax-sliders output{font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;min-width:3.2em}
#softmax-figure{min-width:600px}
#softmax-figure .sm-title{fill:var(--text);font:700 14px system-ui,sans-serif}
#softmax-figure .sm-sub{fill:var(--muted);font:13px system-ui,sans-serif}
#softmax-figure .sm-label{fill:var(--text);font:700 16px system-ui,sans-serif}
#softmax-figure .sm-num{fill:var(--text);font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace}
#softmax-figure .sm-arrow{fill:var(--muted);font:20px system-ui,sans-serif}
#softmax-figure .sm-zero{stroke:var(--muted);stroke-width:1.2}
.worked div span{min-width:12em}
/* Robot basics (robot-basics.html) */
.robot-page .prereq{border-left:2px solid var(--line);padding:2px 15px;margin:4px 0 30px;font-size:14px}
.robot-page .prereq p{margin:0}
.robot-page .reading-list{padding-left:20px}
.robot-page .reading-list li{margin-bottom:9px}
.robot-page .figure-scroll,.robot-page .table-scroll{overflow:auto;max-width:100%}
.robot-page .plot-card{overflow:auto;min-width:0}
.robot-page .run-steps{background:var(--panel);padding:15px;border:1px solid var(--line);border-radius:8px;overflow:auto;font-size:13px}
.robot-page .lab .table-scroll{margin-top:12px}
.robot-drawing{display:block;width:100%;height:auto}
.robot-drawing.wide{min-width:560px}
.robot-drawing text{font:14px system-ui,sans-serif;fill:var(--body)}
.robot-drawing .rb-note.strong{font-weight:700;fill:var(--text)}
.robot-drawing .rb-note.sim,.robot-drawing .rb-note.blue{fill:var(--blue);font-weight:700}
.robot-drawing .rb-note.orange{fill:var(--orange)}
.robot-drawing .rb-note.muted{fill:var(--muted)}
.rb-table,.rb-numberline{stroke:var(--muted);stroke-width:2}
.rb-body{fill:var(--panel-2);stroke:var(--muted);stroke-width:1.5}
.rb-axis{stroke:var(--line);stroke-width:1.2;stroke-dasharray:4 5}
.rb-turn{fill:none;stroke:var(--muted);stroke-width:1.5}
.rb-turn-head{fill:var(--muted)}
.rb-link{stroke:var(--muted);stroke-width:12;stroke-linecap:round;opacity:.7}
.rb-link.sim{stroke:var(--blue);opacity:1}
.rb-jaw{stroke:var(--muted);stroke-width:6;stroke-linecap:round}
.rb-pivot{fill:var(--panel);stroke:var(--muted);stroke-width:2.5}
.rb-pivot.sim{stroke:var(--blue)}
.rb-leader{stroke:var(--muted);stroke-width:1;opacity:.7}
.rb-mount{fill:var(--panel-2);stroke:var(--muted);stroke-width:1.5}
.rb-arm{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rb-arm.measured{stroke:var(--blue);stroke-width:8}
.rb-arm.target{stroke:var(--orange);stroke-width:2.5;stroke-dasharray:7 5}
.rb-arm.start{stroke:var(--muted);stroke-width:6;opacity:.25}
.rb-joint{fill:var(--panel);stroke:var(--blue);stroke-width:2.5}
.rb-hand{fill:var(--blue)}
.rb-angle{fill:none;stroke:var(--blue);stroke-width:1.5}
.rb-angle.two{stroke:var(--violet)}
.rb-drop{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.rb-bar{stroke-width:6;stroke-linecap:butt}
.rb-bar.upper{stroke:var(--blue)}
.rb-bar.fore{stroke:var(--violet)}
.rb-tick{stroke:var(--muted);stroke-width:1.5}
.rb-tick.orange{stroke:var(--orange);stroke-width:2.5}
.rb-range{fill:var(--blue);opacity:.22}
.rb-target-line{stroke:var(--orange);stroke-width:2;stroke-dasharray:6 5}
.rb-action-steps{fill:none;stroke:var(--orange);stroke-width:2}
.rb-trace{fill:none;stroke:var(--blue);stroke-width:1.2;opacity:.55}
.rb-state-dot{fill:var(--blue)}
.rb-cursor{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.plot-svg .plot-note.orange{fill:var(--orange)}
.teleop-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px;margin:18px 0 6px}
.teleop-plots{display:grid;gap:12px}
.rows-table{font-variant-numeric:tabular-nums}
.rows-table td{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.rows-table tr.current td{color:var(--text);font-weight:700;background:var(--blue-soft)}
.feature-table td:first-child{white-space:nowrap}
@media(max-width:760px){.teleop-grid{grid-template-columns:1fr}}
.robot-drawing .rb-note.violet{fill:var(--violet);font-weight:700}
.rb-forearm{stroke:var(--violet);stroke-width:8;stroke-linecap:round}
.robot-page .count-table td,.robot-page .count-table th{white-space:nowrap}
.robot-page .feature-table td:nth-child(2){white-space:normal;min-width:16em}
.robot-page .katex-display{overflow-x:auto;overflow-y:hidden;padding-bottom:2px}
.robot-page .feature-table td,.robot-page .feature-table th{text-align:left!important}
@media(max-width:680px){.robot-page #step-plot,.robot-page #teleop-shoulder,.robot-page #teleop-elbow{min-width:400px}}
/* Generalization and evaluation (generalization.html) */
.gen-page .prereq{border-left:2px solid var(--line);padding:2px 15px;margin:4px 0 30px;font-size:14px}
.gen-page .prereq p{margin:0}
.gen-page .reading-list{padding-left:20px}
.gen-page .reading-list li{margin-bottom:9px}
.gen-page .figure-scroll,.gen-page .table-scroll{overflow:auto;max-width:100%}
.gen-page .plot-card{overflow:auto;min-width:0}
.gen-page .run-steps{background:var(--panel);padding:15px;border:1px solid var(--line);border-radius:8px;overflow:auto;font-size:13px}
.gen-page .count-table td,.gen-page .count-table th{white-space:nowrap}
.gen-page .count-table tr.current td{color:var(--text);font-weight:700;background:var(--blue-soft)}
.gen-page .count-table tr.total td{color:var(--text);font-weight:700}
.gen-page .count-table td.bad{color:var(--red);font-weight:700}
.gen-page .katex-display{overflow-x:auto;overflow-y:hidden}
.gen-curves{display:grid;gap:12px}
.gen-wide{min-width:560px}
.person.hollow{fill:var(--panel)!important;stroke-width:2.2}
.person.hollow.size-0{stroke:var(--blue)} .person.hollow.size-1{stroke:var(--violet)} .person.hollow.size-2{stroke:var(--orange)}
.odd-ring{fill:none;stroke:var(--text);stroke-width:1.4}
.val-curve{fill:none;stroke:var(--orange);stroke-width:2.2}
.stop-line{stroke:var(--text);stroke-width:1.2;stroke-dasharray:4 4;opacity:.7}
.step-cursor{stroke:var(--muted);stroke-width:1}
.usual-box{fill:none;stroke:var(--text);stroke-width:1.8}
.new-box{fill:none;stroke:var(--text);stroke-width:1.6;stroke-dasharray:6 4}
.plot-svg .box-label{font-size:13px;fill:var(--text);font-weight:600}
@media(max-width:680px){.gen-page #fit-map,.gen-page #fit-loss,.gen-page #fit-acc{min-width:380px}}
/* Optimizers (optimizers.html) */
.contour{fill:none;stroke:var(--line);stroke-width:1.2}
.bottom-cross{stroke:var(--text);stroke-width:2}
.opt-path{fill:none;stroke-width:2.2;stroke-linejoin:round}
.opt-path.faint{stroke-width:1.2;opacity:.35}
.opt-sgd{stroke:var(--orange);fill:var(--orange)} .opt-mom{stroke:var(--violet);fill:var(--violet)} .opt-adam{stroke:var(--blue);fill:var(--blue)}
.opt-path.opt-sgd,.opt-path.opt-mom,.opt-path.opt-adam{fill:none}
.opt-dot{stroke:none}
.opt-now{stroke:var(--panel);stroke-width:2}
.opt-map{min-width:560px}
.gen-page .count-table td.best{color:var(--text);font-weight:700;background:var(--blue-soft)}
.gen-page .table-note{font-size:13px;color:var(--muted);margin:-8px 0 16px}
.plot-svg .legend-bold{font-weight:700;fill:var(--text)}
/* Convolutional networks (convolution.html) */
.cell-pos{fill:var(--blue)} .cell-neg{fill:var(--violet)} .cell-bright{fill:var(--text)}
.cell-outline{fill:none;stroke:var(--orange);stroke-width:2.2}
.cell-frame{fill:none;stroke:var(--line);stroke-width:1}
.cnn-wide{min-width:560px}
.conv-hand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
.conv-hand p{margin:0 0 4px;font-size:13px;color:var(--muted)}
.conv-hand .op{font-size:22px;color:var(--muted)}
.mini-grid{border-collapse:collapse;font:13px ui-monospace,SFMono-Regular,Menlo,monospace}
.mini-grid td{border:1px solid var(--line);padding:4px 6px;text-align:right}
.mini-grid td.mark{background:var(--blue-soft);color:var(--text);font-weight:700}
.mini-grid.out td.mark{background:var(--orange-soft)}
.cnn-lab{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:center}
.cnn-readouts{grid-template-columns:1fr 1fr!important}
.cnn-screen{max-width:440px;cursor:crosshair}
.heat-cell{fill:var(--blue)}
.pixel-grid{stroke:var(--line);stroke-width:.6;opacity:.6}
.corner-box{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:6 4}
.plot-svg .corner-label{fill:var(--orange)}
.true-ring{fill:none;stroke:var(--text);stroke-width:2}
.ans-dense{stroke:var(--orange);stroke-width:3;fill:none}
.ans-cnn{fill:var(--violet);stroke:var(--panel);stroke-width:1.5}
.ans-heat{fill:var(--blue);stroke:var(--panel);stroke-width:1.5}
@media(max-width:760px){.cnn-lab{grid-template-columns:1fr}}
/* Attention and transformers (attention.html) */
.att-surface{fill:var(--panel-2);stroke:var(--line);stroke-width:1.5}
.request-box{fill:var(--panel);stroke:var(--orange);stroke-width:1.8}
.plot-svg .strong-note{font-weight:700;fill:var(--text)}
.att-line{stroke:var(--orange);stroke-linecap:round}
.att-object{fill:var(--panel);stroke:var(--text);stroke-width:2}
.att-answer{fill:var(--blue);stroke:var(--panel);stroke-width:1.5}
.att-lab{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
.att-table-svg{max-width:460px}
.att-note{font-size:14px}
@media(max-width:760px){.att-lab{grid-template-columns:1fr}}
/* Autoencoders and VAEs (vae.html) */
.vae-map{max-width:460px}
.vae-obstacle{fill:var(--muted);opacity:.55}
.demo-path{fill:none;stroke-width:1.2;opacity:.55}
.demo-path.faint{opacity:.2}
.demo-path.left{stroke:var(--blue)} .demo-path.right{stroke:var(--violet)}
.policy-path{fill:none;stroke:var(--orange);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.policy-path.hit{stroke:var(--red);stroke-dasharray:8 4}
.z-bar.left{fill:var(--blue);opacity:.75} .z-bar.right{fill:var(--violet);opacity:.75}
.bell{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4}
.z-now{stroke:var(--orange);stroke-width:2.5}