:root{color-scheme:light;--navy:#003057;--ink:#192d3b;--muted:#566875;--paper:#faf9f5;--line:#d9dedf;--teal:#087c83;--blue:#226fba;--orange:#b54923}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}h1,h2,h3,p{margin:0}a{color:var(--teal);text-decoration:none}button,input,select{font:inherit}button,select,input[type=number]{border:1px solid #b8c5ca;border-radius:5px;background:#fff;color:var(--ink);padding:6px 10px;min-height:32px}button{cursor:pointer;white-space:nowrap;font-size:12px;font-weight:600}button:hover:not(:disabled){background:#edf5f5;border-color:var(--teal)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--navy);border-color:var(--navy);color:white}button.primary:hover{background:var(--teal)}[hidden]{display:none!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:2px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:8px 20px;border-bottom:1px solid var(--line);flex-shrink:0}.brand{display:flex;align-items:baseline;gap:18px}.brand a{font-size:12px}.brand h1{font-size:21px;letter-spacing:-.5px}.top-actions{display:flex;gap:7px}main{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) 130px;gap:10px;padding:10px 20px 12px}.controls{display:flex;align-items:center;gap:20px}label{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:600}select{font-size:12px}input[type=number]{width:70px;font-size:13px}.slider-label{position:relative;flex:1;min-width:90px;max-width:180px}.slider-label output{position:absolute;right:0;top:0;font:11px ui-monospace,monospace}input[type=range]{width:100%;accent-color:var(--blue);cursor:pointer}.value-toggle{display:flex;flex-direction:row;gap:6px;align-items:center;white-space:nowrap;font-weight:400}.value-toggle input{accent-color:var(--blue);width:15px;height:15px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 325px;min-height:0;background:white;border:1px solid var(--line);border-radius:8px}.network-panel{display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px 15px}.graph-toolbar{display:flex;gap:15px;align-items:center;justify-content:space-between;flex-shrink:0;min-height:22px}.graph-mode{font:600 10px ui-monospace,monospace;letter-spacing:.5px;color:var(--blue)}.hint{color:var(--muted);font-size:11px}.graph-scroll{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}#network{display:block;width:100%;height:100%;min-height:0}.edge{stroke:#bdcbd4;stroke-width:1.8;fill:none}.edge.pending{stroke:#dce3e6;stroke-width:1.5}.edge.forward{stroke:var(--blue);stroke-width:3.5}.edge.backward{stroke:var(--orange);stroke-width:3}.edge.selected-edge{stroke-width:4}.edge-hit{stroke:transparent;stroke-width:22;fill:none;cursor:pointer}.edge-label{font:13px ui-monospace,monospace;fill:var(--muted);paint-order:stroke;stroke:white;stroke-width:6px;stroke-linejoin:round}.edge-label.active{fill:var(--orange)}.edge-label.uncomputed-label{fill:#7a8891}.node circle,.loss-node rect{fill:#f4f8fa;stroke:#b9cbd8;stroke-width:1.6}.node.active circle,.loss-node.active rect{fill:#fff4ed;stroke:var(--orange);stroke-width:2.5}.node.forward-ready circle,.node.forward-current circle,.loss-node.forward-current rect{fill:#edf5ff;stroke:var(--blue);stroke-width:2.5}.node.forward-current circle{stroke-width:3}.node.uncomputed circle,.loss-node.uncomputed rect{fill:#f8fafb;stroke:#dce3e6}.node:focus circle,.edge-group:focus .edge{stroke:var(--teal);stroke-width:4}.node{cursor:pointer}.node-name{font:600 16px -apple-system,sans-serif;fill:var(--ink)}.node-value{font:14px ui-monospace,monospace;fill:var(--blue)}.node.uncomputed .node-value,.loss-node.uncomputed .node-value{fill:#8a989f}.node-gradient{font:14px ui-monospace,monospace;fill:var(--orange)}.column-label{font:600 13px -apple-system,sans-serif;fill:var(--ink)}.column-sub{font:12px -apple-system,sans-serif;fill:var(--muted)}.flow-label{font:14px -apple-system,sans-serif;fill:var(--orange)}.forward-caption{fill:var(--blue)}.metrics{display:flex;justify-content:space-around;gap:12px;padding:5px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.metrics strong{font:12px ui-monospace,monospace;color:var(--ink);margin-left:5px}.walkthrough{flex-shrink:0;border-top:1px solid var(--line);padding-top:9px}.step-buttons{display:flex;gap:5px}.step-buttons button{flex:1;padding:5px;font-size:11px}.step-buttons button[aria-current=step]{background:var(--navy);color:white;border-color:var(--navy)}.pass-progress{display:flex;gap:5px;margin-top:7px}.pass-progress button{font-size:11px;padding:3px 8px;min-height:26px;background:#f0f3f5;border:0;color:var(--muted)}.pass-progress button.completed{color:var(--blue)}.pass-progress button[aria-current=step]{background:var(--blue);color:#fff}.walk-actions{display:flex;gap:6px;margin-top:7px}.inspector{border-left:1px solid var(--line);background:#f2f6f5;padding:15px;min-height:0;border-radius:0 8px 8px 0}.inspector-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.inspector h2{font-size:17px;line-height:1.25}.inspector h3{font-size:12px}.inspector p{font-size:11px;color:var(--muted);line-height:1.45}.formula-box{background:white;border:1px solid #dce5e2;border-radius:5px;padding:9px;margin:8px 0}.formula-box .label{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}.equation{font:14px/1.6 ui-monospace,monospace}.fraction{display:inline-flex;flex-direction:column;align-items:stretch;vertical-align:middle;text-align:center;line-height:1.3;font:italic 18px/1.3 Georgia,serif;white-space:nowrap}.fraction>span:first-child{border-bottom:1px solid currentColor;padding:0 3px 2px}.fraction>span:last-child{padding:2px 3px 0}.chain-product,.chain-terms{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.chain-product>.chain-terms{flex-basis:100%;padding-top:5px}.multiply{font:17px Georgia,serif;color:var(--muted);margin:0 2px}.factors{display:grid;gap:5px;margin:10px 0}.factor{display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 9px;padding:5px 0 5px 8px;border-left:2px solid var(--orange)}.factor-title{grid-column:2;font-size:11px;font-weight:650}.factor-formula{grid-column:1;grid-row:1 / span 2;align-self:center;color:var(--orange)}.factor .fraction{font-size:16px}.factor p{grid-column:2}.notation-note{border-top:1px solid var(--line);padding-top:7px;margin-top:9px}.upstream-explanation{border-top:1px solid var(--line);padding-top:7px;margin-top:8px}.concept{margin:10px 0}.concept h3{margin-bottom:4px}.concept-route{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px;border:1px solid var(--line);border-radius:5px;background:#fff}.concept-route span{font-size:14px;font-weight:600}.concept-route b{font-size:16px;color:var(--blue);font-weight:400}.training{display:grid;grid-template-columns:auto minmax(0,1fr);gap:25px;min-height:0;border:1px solid var(--line);background:white;border-radius:8px;padding:9px 15px}.train-actions{display:flex;flex-wrap:wrap;align-content:center;align-items:end;gap:7px;max-width:470px}.train-actions label{width:94px}.train-actions output{flex-basis:100%;font:12px ui-monospace,monospace;color:var(--orange)}.loss-history{min-height:0;display:flex;flex-direction:column}.chart-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.chart-heading h2{font-size:12px;font-weight:600}.chart-heading small{font-size:10px;color:var(--muted);font-weight:400}.chart-heading span{font-size:11px;color:var(--muted)}#loss-chart{width:100%;flex:1;min-height:0;display:block}.chart-text{font:10px ui-monospace,monospace;fill:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog{width:min(900px,95vw);max-height:90dvh;border:1px solid var(--line);border-radius:9px;padding:22px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:rgba(0,30,50,.3)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-heading h2{font-size:21px}dialog>p{font-size:12px;color:var(--muted);margin-bottom:15px}#parameter-tables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}#parameter-tables h3{font-size:14px}table{width:100%;border-collapse:collapse;font-size:11px;text-align:left}td,th{padding:6px 2px;border-bottom:1px solid var(--line)}th{font-weight:500;color:var(--muted)}td button{padding:3px 5px;min-height:28px}td input[type=number]{width:85px;font:12px ui-monospace,monospace;padding:5px}td:last-child{font-family:ui-monospace,monospace}#panel-toggle,#close-panel{display:none}
@media(min-height:900px){main{grid-template-rows:auto minmax(0,1fr) 160px}.inspector{padding:20px}.inspector h2{font-size:20px}.inspector p{font-size:12px}.factors{gap:9px}.factor{padding-top:9px;padding-bottom:9px}.factor-title{font-size:12px}}
@media(max-width:1050px){.brand{gap:10px}.brand h1{font-size:18px}.controls{gap:12px}.workspace{grid-template-columns:minmax(0,1fr) 280px}.hint{display:none}.training{gap:15px}.train-actions{max-width:310px}.chain-terms{gap:4px}.chain-terms .fraction{font-size:16px}}
@media(max-width:800px){.topbar{padding:7px 10px}.brand{display:block}.brand h1{font-size:16px}.brand a{font-size:10px}.top-actions{gap:4px}.top-actions button{font-size:10px;padding:5px 7px}main{padding:7px 10px;gap:7px;grid-template-rows:auto minmax(0,1fr) 165px}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}.controls select{max-width:100%;width:100%}.slider-label{max-width:none;min-width:0}.value-toggle{font-size:11px}.workspace{display:block}.network-panel{height:100%;padding:10px}.inspector{display:none;height:100%;border:0;border-radius:8px;overflow:auto}.workspace.show-explanation .network-panel{display:none}.workspace.show-explanation .inspector{display:block}#panel-toggle,#close-panel{display:block}#close-panel{font-size:20px;min-height:28px;padding:0 8px}.graph-toolbar{gap:6px}.graph-mode{font-size:9px}.graph-scroll{overflow-x:auto;justify-content:start}#network{min-width:600px}.step-buttons button{font-size:10px;padding:4px 2px}.walk-actions button{font-size:10px;padding:4px 6px}.pass-progress button{font-size:10px;padding:3px 6px}.training{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:7px 10px;gap:5px}.train-actions{max-width:none;flex-wrap:nowrap;align-items:center}.train-actions label{flex-direction:row;align-items:center;gap:5px;width:auto;font-size:0}.train-actions select{max-width:62px;font-size:11px;padding:4px}.train-actions button{font-size:10px;padding:4px 7px}.train-actions output{font-size:10px;flex-basis:auto;white-space:nowrap}#parameter-tables{grid-template-columns:1fr}.metrics{font-size:10px;gap:5px}.metrics strong{font-size:10px}.inspector{padding:15px 20px}.inspector p{font-size:12px}.inspector h2{font-size:19px}.factors{gap:10px}.factor-title{font-size:12px}}
@media(max-height:680px) and (min-width:801px){main{grid-template-rows:auto minmax(0,1fr) 100px;gap:6px;padding:6px 14px}.topbar{padding:5px 14px}.controls label{font-size:10px}.controls select,.controls input[type=number]{min-height:28px;padding:4px 8px}.network-panel{padding:7px 10px}.inspector{padding:10px}.inspector h2{font-size:15px}.inspector-top{margin-bottom:5px}.formula-box{padding:6px;margin:5px 0}.factor{padding:3px 0 3px 7px}.factors{margin:5px 0;gap:3px}.fraction{font-size:16px}.inspector p{font-size:10px}.notation-note{margin-top:5px;padding-top:4px}.concept-route{gap:1px;padding:6px}.walkthrough{padding-top:5px}.pass-progress,.walk-actions{margin-top:5px}.step-buttons button{min-height:27px}.training{padding:6px 12px}}
.chain-product>.chain-terms{flex-basis:auto;padding-top:0}.chain-product{flex-wrap:nowrap}.chain-terms{flex-wrap:nowrap}.upstream-explanation h3{margin-bottom:3px}
main{grid-template-columns:minmax(0,1fr)}.workspace,.training,.loss-history{min-width:0}@media(max-width:800px){.train-actions output{display:none}.brand h1{font-size:14px}.brand a{font-size:9px}.topbar{gap:8px}.top-actions button{padding:5px}.controls{min-width:0}.controls label{min-width:0}}
/* Every main step reserves the same navigation and readout rows. */
.metrics{height:28px;min-height:28px;flex-shrink:0}.metrics[data-visible=false]{visibility:hidden}.step-buttons{height:32px;flex-shrink:0}.pass-progress{height:26px;min-height:26px;flex-shrink:0}.walk-actions{height:32px;min-height:32px;flex-shrink:0}.walk-actions button{min-height:0}.edge.update-edge{stroke:var(--teal);stroke-width:3}.node.update-node circle{stroke:var(--teal);stroke-width:3;fill:#edf7f5}.update-caption{fill:var(--teal)}math{font-family:'STIX Two Math','Cambria Math',math;font-size:19px}.equation math{display:inline math;font-size:20px}.svg-math{height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink);line-height:1}.svg-math math{font-size:16px}.svg-math.edge-label math{font-size:15px;background:#fff;padding:0 3px}.svg-math.edge-label.active{color:var(--orange)}.svg-math.edge-label.uncomputed-label{color:#7a8891}.svg-math.node-name math{font-size:19px}.svg-math.node-gradient{color:var(--orange)}.svg-math.node-gradient math{font-size:16px}.gradient-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;border-left:3px solid var(--orange);background:white;margin:8px 0}.gradient-card strong{font-size:12px;display:block}.gradient-card small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.gradient-card math{font-size:19px;color:var(--orange)}.local-slope{display:flex;align-items:center;gap:6px;margin:6px 0}.local-slope math{font-size:17px}.branch-note{margin:8px 0}.trace-bias{font-size:11px;min-height:26px;padding:3px 8px;margin-top:7px}#parameter-tables math{font-size:15px}.training{grid-template-columns:470px minmax(0,1fr)}@media(max-width:1050px){.training{grid-template-columns:310px minmax(0,1fr)}.gradient-card{padding:8px;gap:5px}.gradient-card math{font-size:17px}.gradient-card strong{font-size:11px}.gradient-card small{font-size:9px}}@media(max-width:800px){.training{grid-template-columns:1fr}.gradient-card math{font-size:19px}.gradient-card strong{font-size:12px}.gradient-card small{font-size:10px}.gradient-card{padding:9px}.walk-actions button{font-size:10px}}@media(max-height:680px) and (min-width:801px){.gradient-card{padding:6px 8px;margin:5px 0}.gradient-card math{font-size:16px}.gradient-card strong{font-size:11px}.gradient-card small{font-size:9px}.equation math{font-size:17px}.local-slope{margin:4px 0}.local-slope math{font-size:15px}.branch-note{margin:5px 0}.trace-bias{margin-top:4px}}