@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#f6f4ed;--white:#fffefa;--ink:#182e2b;--muted:#5f7069;--teal:#12655b;--deep:#124b47;--mint:#d8e9da;--line:#d8ddd2;--orange:#bb5135;--gold:#e6bd65;--sans:'DM Sans',system-ui,sans-serif;--display:'Manrope',system-ui,sans-serif;--mono:'DM Mono',monospace;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:108px}body{margin:0;background:var(--paper);font:16px/1.6 var(--sans);color:var(--ink)}button,input,select{font:inherit}button,select{cursor:pointer}button{border:1px solid var(--line);border-radius:7px;padding:8px 12px;background:var(--white);color:var(--ink)}button:hover{background:#e8eee4;border-color:#9bafa1}a{color:var(--teal)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #b27715;outline-offset:4px}::selection{background:var(--gold);color:var(--ink)}.skip{position:fixed;top:-70px;left:20px;z-index:100;background:white;padding:10px}.skip:focus{top:10px}.topbar{height:86px;position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:32px;padding:0 38px;border-bottom:1px solid var(--line);background:rgba(246,244,237,.97);backdrop-filter:blur(14px)}.brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:14px;font-size:12px;font-weight:800;letter-spacing:.12em;line-height:1.5}.logo{background:var(--deep);color:#e1edcb;width:41px;height:41px;display:grid;place-items:center;border-radius:50%;font:30px Georgia}.brand-sub{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}.progress{width:260px;margin-left:auto}.progress>div{display:flex;justify-content:space-between;font-size:12px;gap:12px}.progress progress{display:block;width:100%;height:5px;margin-top:9px;appearance:none;border:none;background:var(--line);border-radius:8px;overflow:hidden}.progress progress::-webkit-progress-bar{background:var(--line)}.progress progress::-webkit-progress-value{background:var(--teal);transition:width .3s}.progress progress::-moz-progress-bar{background:var(--teal)}.text-btn{font-size:12px;background:transparent;border:0;padding:8px}.layout{display:grid;grid-template-columns:245px minmax(0,1fr);max-width:1580px;margin:auto}.sidebar{position:sticky;top:86px;height:calc(100vh - 86px);padding:42px 26px 24px 32px;border-right:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font:500 12px/1.5 var(--mono);letter-spacing:.09em;color:var(--teal)}.sidebar>.eyebrow{font-size:11px;color:var(--muted)}nav{margin-top:24px;display:flex;flex-direction:column;gap:8px}nav a{text-decoration:none;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);padding:12px 9px;margin-left:-9px;border-radius:7px;line-height:1.4}nav a span{font:12px var(--mono);color:#627568}nav a.active{background:#e1e8d9;color:var(--ink);font-weight:700}nav a:hover{background:#e9ede2}nav a i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:transparent}nav a.done i{background:var(--teal)}.sidebar-note{margin-top:auto;padding-top:40px}.tiny-cross{font:34px var(--mono);color:var(--orange)}.sidebar-note p{font:500 18px/1.5 var(--display)}.sidebar-note small{color:var(--muted);font-size:12px}.source-link{font-size:12px;margin-top:30px;text-decoration:none}main{padding:44px 5vw 0;min-width:0;max-width:1260px}.intro{position:relative;padding:8px 0 26px}.intro h1{font:500 clamp(46px,5.5vw,78px)/1.04 var(--display);letter-spacing:-.06em;margin:16px 0 20px;max-width:700px}.intro h1 em{font:italic 1.1em Georgia,serif;color:var(--teal);letter-spacing:-.055em}.title-dot{font:20px var(--sans);color:var(--orange);vertical-align:baseline;margin-left:12px}.intro>p{position:absolute;right:0;bottom:72px;color:var(--muted);font-size:16px;line-height:1.7;max-width:280px}.intro-meta{display:flex;gap:20px;flex-wrap:wrap;font:12px var(--mono);color:var(--muted)}.intro-meta span+span:before{content:'·';margin-right:20px}.orientation{display:grid;grid-template-columns:1fr 1.4fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;gap:20px;margin-bottom:54px}.orientation b{display:block;font:11px var(--mono);color:var(--orange);letter-spacing:.08em;margin-bottom:7px}.orientation span{font-size:13px;line-height:1.4;display:block}.lab{margin-bottom:84px;scroll-margin-top:108px}.section-heading{display:flex;align-items:start;gap:19px;margin-bottom:25px}.section-number{flex-shrink:0;font:14px var(--mono);border:1px solid #bcc7bb;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;margin-top:3px}h2{font:500 clamp(29px,3.2vw,42px)/1.15 var(--display);letter-spacing:-.045em;margin:9px 0 0}h3{font:600 21px/1.3 var(--display);letter-spacing:-.035em;margin:8px 0 20px}.completion{display:none;margin-left:auto;white-space:nowrap;background:var(--mint);border-radius:20px;padding:6px 11px;font:12px var(--mono);color:var(--teal)}.lab.complete .completion{display:block}.minute{border:1px solid #ccdcca;background:#e7edde;padding:25px 28px;border-radius:var(--radius);margin-bottom:24px}.minute p{margin:10px 0 18px;max-width:900px;line-height:1.7}.equation{font:22px/1.65 Georgia,serif;color:var(--deep)}.minute .equation{border-top:1px solid #ccd6c6;padding-top:14px}.equation span{display:block;font:12px/1.6 var(--mono);color:var(--muted);margin-top:4px}.experiment{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(240px,1fr);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.visual-pane{min-width:0;padding:25px;border-right:1px solid var(--line)}.pane-heading{display:flex;justify-content:space-between;gap:10px;align-items:start}.pane-heading .eyebrow{font-size:10px}.pane-heading h3{margin-bottom:15px}.live-label{font:10px var(--mono);letter-spacing:.05em;color:var(--teal);display:flex;gap:5px;align-items:center}.live-label:before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:var(--teal)}.scene{display:block;width:100%;height:300px;background:#eef1e7;border:1px solid #e4e8dd;border-radius:10px;cursor:grab;touch-action:pan-y}.scene:active{cursor:grabbing}.scene-tools{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:9px;flex-wrap:wrap}.scene-tools span{margin-right:auto;color:var(--muted);font-size:11px}.scene-tools button{font-size:11px;padding:4px 7px;background:transparent}.visual-note{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0}.controls{padding:26px 23px;background:#fbfaf5}.controls>.eyebrow{font-size:11px}.controls h3{margin-bottom:25px}label{display:block;font-size:14px;font-weight:600;line-height:1.5;margin:21px 0 9px}output{float:right;font:12px/1.75 var(--mono);color:var(--teal);margin-left:5px}select{width:100%;border:1px solid #cbd3c8;border-radius:7px;background:var(--white);padding:10px 28px 10px 10px;color:var(--ink);font-size:14px}input[type=range]{display:block;width:100%;accent-color:var(--teal);height:20px;margin:8px 0 0}input[type=checkbox]{accent-color:var(--teal);width:18px;height:18px;flex:none}.switch-row{display:flex;align-items:start;gap:9px;font-weight:400}.switch-row input{margin-top:2px}.status{border:1px solid #cbdccd;background:#e7eee1;color:var(--deep);border-radius:8px;padding:13px;margin-top:22px;font-size:13px;line-height:1.6}.status strong{display:block;font-size:14px;margin-bottom:4px}.status.warn{border-color:#e8c8ad;background:#f6ead9;color:#794722}.control-note,.range-note{font-size:12px;line-height:1.65;color:var(--muted)}.range-note{font-size:10px;margin-top:4px}.try{border-top:1px dashed #ccd3c6;margin-top:23px;padding-top:16px}.try>b{font:11px var(--mono);letter-spacing:.08em;color:var(--orange)}.try p{font-size:13px;line-height:1.65;margin:9px 0}.try small{display:block;font-size:11px;line-height:1.6;color:var(--muted)}.try button{font-size:12px;margin:4px 2px 0 0;padding:5px 7px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}.metrics>div{min-width:0;border-top:1px solid var(--line);padding-top:10px}.metrics small{display:block;font:10px/1.5 var(--mono);text-transform:uppercase;color:var(--muted)}.metrics b{display:block;font:18px/1.7 var(--mono);overflow-wrap:anywhere}.chart{margin-top:20px}.chart svg{width:100%;display:block;overflow:visible}.chart-caption{font-size:11px;color:var(--muted);margin:5px 0}.chart-legend{display:flex;gap:16px;font-size:11px;flex-wrap:wrap;align-items:center}.chart-legend span:before{content:'';display:inline-block;width:15px;height:3px;background:var(--teal);vertical-align:middle;margin-right:6px}.chart-legend span.coral:before{background:var(--orange)}.neuron-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:18px}.neuron-grid>div{background:#f3f3eb;border-radius:6px;text-align:center;padding:9px 1px}.neuron-grid small{display:block;font:10px var(--mono);color:var(--muted)}.neuron-grid b{font:13px var(--mono);display:block;margin-top:7px}.neuron-grid .mini-bar{height:3px;max-width:90%;min-width:3px;background:var(--orange);display:block;margin:9px auto 0}.quiz{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-top:28px}.quiz[data-quiz='4']{grid-template-columns:1fr}.question{min-width:0}.q-label{font:11px var(--mono);letter-spacing:.07em;color:var(--orange);margin-bottom:10px}.question h3{font:500 17px/1.6 var(--sans);letter-spacing:0;margin:0 0 15px}.answers{display:flex;flex-direction:column;gap:8px}.answer{font-size:14px;line-height:1.5;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 13px;background:#fffefa;border-radius:8px}.answer .letter{color:var(--muted);font:12px var(--mono);flex:none}.answer.correct{border-color:var(--teal);background:#e5eddd}.answer.correct .letter{color:var(--teal)}.answer.wrong{border-color:var(--orange);background:#f8ebe4}.feedback{font-size:13px;line-height:1.65;margin:12px 0 0;padding:12px;border-left:3px solid var(--orange);background:#f9ece2}.feedback.success{border-color:var(--teal);background:#e7edde}.question .hint{margin-top:10px;border:0;background:transparent;border-radius:0;font-size:12px;color:var(--muted)}.hint summary{padding:4px 0;font-size:12px}.hint p{margin:4px 0 0;font-size:13px}details{margin-top:25px;border:1px solid var(--line);background:#f0f1e9;border-radius:10px}summary{cursor:pointer;padding:16px 20px;font-size:14px;font-weight:700}summary span{font-weight:400;color:var(--muted);margin-left:12px}.fold-body{padding:0 24px 20px;font-size:15px}.fold-body p{margin:10px 0 16px}.fold-body pre{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid var(--line);background:#fffefa;border-radius:8px;padding:18px;font-size:12px}.diagnostic-card{background:var(--deep);color:#f3f5e6;padding:32px;border-radius:var(--radius)}.diagnostic-card .eyebrow{color:#d8e5b9}.diagnostic-card h3{font-size:32px;font-weight:500;margin-top:15px}.diagnostic-card p{color:#e2e9dc;max-width:780px}.case-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin:25px 0;border-block:1px solid #47716a;padding:20px 0;gap:15px}.case-metrics span{display:block;font:10px var(--mono);color:#c2d9ca;margin-bottom:8px}.case-metrics b{font:23px var(--mono);color:#eff1cf}.reference-table{margin-top:32px;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}caption{text-align:left;font:600 23px var(--display);letter-spacing:-.025em;margin-bottom:20px}th{text-align:left;background:#e5eadf;color:var(--teal);font-weight:500;font-size:12px}th,td{padding:15px 12px;border-bottom:1px solid var(--line);vertical-align:top}td:first-child{font-weight:700;white-space:nowrap}footer{border-top:1px solid var(--line);padding:30px 0 22px;font-size:13px;color:var(--muted)}footer>p{max-width:880px}.reference-links{display:flex;flex-wrap:wrap;gap:10px 24px;margin:20px 0}.reference-links a{font-size:12px}.footer-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:11px}.footer-bottom button{font-size:11px}.finish{border:1px solid #bdcfb5;border-radius:18px;background:var(--mint);padding:32px;margin-bottom:50px}dialog{max-width:440px;width:calc(100% - 32px);padding:26px;border:1px solid var(--line);border-radius:15px;background:var(--white);color:var(--ink)}dialog::backdrop{background:#102a2666}dialog h2{font-size:26px}dialog p{font-size:14px}dialog>div{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}dialog button{font-size:13px}.primary{background:var(--teal);color:white}.primary:hover{background:var(--deep);color:white}[hidden]{display:none!important}
.visual-guide{border-top:1px solid var(--line);padding-top:16px;margin:18px 0 24px}.visual-guide h4{font:600 18px/1.4 var(--display);margin:0 0 10px}.scene-legend{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 16px}.guide-steps{padding:0;list-style:none;counter-reset:guide;display:grid;gap:8px;margin:16px 0}.guide-steps li{counter-increment:guide;position:relative;padding:11px 12px 11px 39px;font-size:13px;line-height:1.7;border:1px solid var(--line);border-radius:8px;background:#f8f9f2}.guide-steps li:before{content:counter(guide);position:absolute;left:13px;top:13px;font:12px var(--mono);color:var(--teal)}.guide-steps li.current{background:#e4ecda;border-color:#a8bda0}.walk-controls{border-top:1px dashed var(--line);padding-top:2px}.walk-controls label{font-size:14px}.walk-buttons{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0}.walk-buttons button{font-size:12px;padding:7px 9px}.walk-buttons button:disabled{opacity:.45;cursor:default}.walk-buttons label{font-size:12px;margin:0 0 0 auto}.walk-buttons select{width:68px;font-size:12px;padding:5px}.layer-flow{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:19px 0}.layer-flow span{font:12px var(--mono);background:#eff0e8;border:1px solid var(--line);border-radius:7px;padding:8px 9px}.layer-flow span.visited{background:#dce8d4;border-color:#a7bf9e}.layer-flow span.current{box-shadow:0 0 0 2px #b26a2f;border-color:var(--white)}.layer-flow i{font-style:normal;color:#88977e}.walk-readout{padding:16px;background:#edf1e4;border-left:3px solid var(--teal);border-radius:0 8px 8px 0;min-height:130px}.walk-readout>b{font-size:14px}.walk-readout p{font-size:13px;line-height:1.7;margin:10px 0 0}.walk-note{font-size:12px;line-height:1.7;color:var(--muted)}.signal-calculation{display:flex;align-items:center;gap:8px;margin-top:14px}.signal-calculation span{flex:1;min-width:0;font-size:11px;line-height:1.5;color:var(--muted)}.signal-calculation strong,.comparison-readout strong,.unit-values strong{font:14px var(--mono);display:block;margin-top:8px;color:var(--ink);overflow-wrap:anywhere}.signal-calculation i{font-style:normal;color:var(--teal)}.comparison-readout{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #cbd7c1;margin-top:14px;padding-top:12px;font-size:12px}.comparison-readout span:last-child strong{color:var(--orange)}.unit-values{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px;font:11px var(--mono)}.unit-values strong{font-size:11px}.sr-table-caption{font-size:14px;margin:10px 0}.layer-cursor{pointer-events:none}
@media(max-width:640px){.signal-calculation{gap:5px}.signal-calculation strong{font-size:12px}.layer-flow span{font-size:11px;padding:7px}.walk-buttons label{margin-left:0}.guide-steps li{font-size:13px}.scene-legend{font-size:14px}}
@media print{.walk-controls,.walk-buttons,.walk-note{display:none}.visual-guide{break-inside:avoid}.guide-steps li{font-size:10pt}.walk-readout{min-height:0}}
@media(min-width:1500px){main{padding-inline:70px}.scene{height:340px}}
@media(max-width:1180px){.layout{grid-template-columns:210px minmax(0,1fr)}.sidebar{padding:32px 18px}.sidebar nav a{font-size:13px}main{padding:34px 32px 0}.intro>p{position:static;max-width:none;margin:14px 0 20px}.intro>p br{display:none}.intro h1 br{display:none}.intro h1{font-size:58px}.experiment{grid-template-columns:minmax(0,1.5fr) minmax(225px,1fr)}.visual-pane{padding:20px}.controls{padding:22px 18px}.scene{height:280px}.pane-heading{flex-wrap:wrap}.scene-tools span{width:100%}.quiz{gap:20px}.orientation{gap:12px}.orientation span{font-size:12px}}
@media(max-width:900px){.layout{display:block}.sidebar{height:auto;position:sticky;top:75px;z-index:20;border-right:0;border-bottom:1px solid var(--line);background:var(--paper);padding:0 22px}.sidebar>.eyebrow,.sidebar-note,.source-link{display:none}.sidebar nav{flex-direction:row;margin:0;gap:8px;overflow-x:auto;padding:8px 0}.sidebar nav a{flex:none;margin:0;font-size:12px;padding:7px 9px}.sidebar nav a span{font-size:11px}.topbar{height:75px;padding:0 24px;gap:16px}.progress{width:220px}.brand{font-size:10px}.brand-sub{font-size:11px}.logo{width:35px;height:35px}html{scroll-padding-top:150px}.lab{scroll-margin-top:150px}main{max-width:850px;margin:auto;padding-top:30px}.intro h1{font-size:60px}.intro>p{max-width:600px}.orientation{margin-bottom:40px}.experiment{grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr)}}
@media(max-width:640px){.topbar{padding:0 16px;gap:12px}.brand>span:not(.logo){display:none}.progress{width:auto;flex:1}.progress>div{font-size:10px}.text-btn{max-width:60px;font-size:10px;line-height:1.4;padding:4px}.sidebar{padding:0 16px}.sidebar nav a{font-size:11px}.sidebar nav a span{display:none}main{padding:28px 18px 0}.intro h1{font-size:47px;line-height:1.12;letter-spacing:-.06em}.intro .eyebrow{font-size:10px}.intro h1 br{display:block}.intro>p{font-size:15px}.intro-meta{gap:10px;font-size:10px}.intro-meta span+span:before{margin-right:10px}.orientation{grid-template-columns:1fr;padding:16px 0;gap:12px}.orientation>div{display:flex;align-items:baseline;gap:14px}.orientation b{font-size:10px;width:104px;flex:none;margin:0}.orientation span{font-size:12px}.section-heading{gap:12px}.section-number{width:33px;height:33px;font-size:12px}.section-heading .eyebrow{font-size:10px}h2{font-size:31px}.completion{font-size:10px;padding:4px 7px;position:absolute;right:0;top:-26px}.section-heading{position:relative}.minute{padding:20px}.minute p{font-size:15px}.equation{font-size:20px}.equation span{font-size:11px}.experiment{grid-template-columns:1fr}.visual-pane{border-right:0;border-bottom:1px solid var(--line);padding:18px}.controls{padding:22px}.controls h3{margin-bottom:18px}.scene{height:275px}.scene-tools span{width:auto;font-size:10px}.quiz{grid-template-columns:1fr;gap:25px}.question h3{font-size:16px}.answer{font-size:14px}summary{font-size:13px;padding:16px}summary span{display:block;margin:3px 0 0 15px;font-size:12px}.fold-body{padding:0 18px 15px}.lab{margin-bottom:65px}.diagnostic-card{padding:23px}.diagnostic-card h3{font-size:28px}.case-metrics b{font-size:17px}.case-metrics span{font-size:8px}.case-metrics{gap:8px}.reference-table table{min-width:650px}.footer-bottom{flex-wrap:wrap;gap:12px}.chart-legend{font-size:10px}.metrics b{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{body{background:white;font-size:11pt}.topbar,.sidebar,.scene-tools,.controls,.orientation,.skip,dialog,.footer-bottom button{display:none!important}.layout{display:block}main{padding:0;max-width:none}.intro h1{font-size:36pt}.intro>p{position:static}.lab{break-before:page;margin-bottom:0}.experiment{display:block}.visual-pane{border:0}.scene{height:220px}.quiz{grid-template-columns:1fr 1fr}details>.fold-body{display:block!important}details{break-inside:avoid}.minute,.question{break-inside:avoid}.answer{font-size:10pt;padding:5pt}.feedback{font-size:10pt}footer{break-before:page}.diagnostic-card{color:black;background:#eee}.diagnostic-card p,.diagnostic-card .eyebrow,.case-metrics b,.case-metrics span{color:black}}
/* Theory precedes each visualization. */
.theory-primer,.theory-section{padding:28px;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}.theory-primer{margin-bottom:52px}.theory-primer h2{font-size:29px}.theory-primer>p{font-size:16px;line-height:1.8}.notation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:17px 0}.notation-grid b{font-size:15px;color:var(--teal)}.notation-grid p{font-size:14px;line-height:1.75;margin:7px 0}.theory-primer .theory-assumption{border-top:1px solid var(--line);padding-top:15px;font-size:13px;color:var(--muted)}.theory-section>h3{font:600 25px/1.35 var(--display);margin:10px 0 23px}.theory-reasoning{padding-left:24px;margin:0 0 23px}.theory-reasoning li{padding-left:8px;margin-bottom:18px}.theory-reasoning li::marker{color:var(--teal);font-family:var(--mono)}.theory-reasoning strong{font-size:16px}.theory-reasoning p{font-size:16px;line-height:1.8;margin:6px 0 0;max-width:850px}.theory-example{padding:17px 20px;background:#edf2e6;border-left:3px solid var(--teal);border-radius:0 8px 8px 0}.theory-example>b,.observation-task>b{font:12px var(--mono);letter-spacing:.06em;color:var(--teal)}.theory-example p,.observation-task p{margin:8px 0 0;line-height:1.8;font-size:15px}.prediction{background:#faf1df;border-color:#dfcfb1;margin-top:18px}.prediction summary{font-weight:600;font-size:15px;line-height:1.7}.prediction p{margin:0;padding:0 20px 18px;font-size:15px;line-height:1.8}.observation-task{padding:20px 0 0}.observation-task>b{color:var(--orange)}
@media(max-width:800px){.notation-grid{grid-template-columns:1fr;gap:12px}.notation-grid>div+div{border-top:1px solid var(--line);padding-top:12px}}
@media(max-width:640px){.theory-section,.theory-primer{padding:20px}.theory-section>h3{font-size:23px}.theory-primer h2{font-size:26px}.theory-reasoning{padding-left:20px}.theory-reasoning li{padding-left:3px}.theory-example{padding:15px}}
@media print{.theory-section,.theory-primer{background:white;border-radius:0;padding:12pt}.theory-section{break-inside:auto}.theory-reasoning li,.theory-example,.observation-task{break-inside:avoid}.theory-reasoning p{font-size:11pt}.prediction>p{display:block!important}}
.minute .formula-explanation{font:15px/1.8 var(--sans);margin:16px 0 0;padding:16px 18px;background:#fffefa99;border:1px solid #ccd6c6;border-radius:8px;color:var(--ink)}.formula-explanation>b{display:block;color:var(--teal);margin-bottom:5px}
.lab>h3{font:600 22px/1.35 var(--display);margin:36px 0 10px}.lab>h3 .n{color:var(--muted);font:500 15px var(--mono);margin-right:10px}.prose p{max-width:820px}.intro>p{position:static;max-width:38em;margin:4px 0 18px}.title-dot{display:none}.pane-heading h3{margin:8px 0 12px}.controls h3{margin:8px 0 18px}canvas.scene.grid-scene,canvas.scene.grid-scene.tall{display:block;width:100%;max-width:100%;min-height:0;height:unset}@media(max-width:1100px){.experiment.lab-shell{grid-template-columns:1fr}.experiment.lab-shell .visual-pane{border-right:0;border-bottom:1px solid var(--line)}}.prose ul,.prose ol{max-width:820px}.box{border-radius:var(--radius);padding:18px 22px 8px;margin:22px 0 26px;border:1px solid var(--line);background:var(--white)}.box .tag{display:block;font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 8px}.key{background:#edf2e6;border-color:#ccdcca}.hand{background:#faf1df;border-color:#dfcfb1}.hand .tag{color:var(--orange)}.warn{background:#f8ebe4;border-color:#e8c8ad}.warn .tag{color:var(--orange)}.note{background:#fbfaf5}.t{color:var(--teal);font-weight:650}.r{color:var(--orange);font-weight:650}.qin{width:74px;font:16px var(--mono);padding:6px 8px;border:1.5px solid var(--line);border-radius:7px;background:#fff;text-align:center;margin:0 3px;color:var(--ink)}.qin:focus{outline:none;border-color:var(--teal)}.qin.ok{border-color:var(--teal);background:var(--mint)}.qin.no{border-color:var(--orange);background:#f8ebe4}.qin.wide{width:118px}.chkrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 14px}.chkbtn{appearance:none;font:600 13px var(--sans);color:#fff;background:var(--deep);border:1px solid var(--deep);border-radius:999px;padding:6px 16px;cursor:pointer}.chkmsg{font-size:14px;color:var(--muted)}.chkmsg.good{color:var(--teal);font-weight:650}details.ans{margin:0;display:inline-block}details.ans summary{list-style:none;cursor:pointer;display:inline-block;font:600 13px var(--sans);color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:5px 14px}details.ans summary::-webkit-details-marker{display:none}details.ans[open]{display:block}details.ans .a{margin-top:12px;padding:12px 16px;background:var(--white);border-left:3px solid var(--orange);border-radius:0 8px 8px 0;font-size:15px}table.wt.small{font-size:16px}table.wt.small th,table.wt.small td{padding:7px 12px}.fig{margin:18px 0 22px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px}.fig canvas,.fig svg{display:block;width:100%;height:auto}.fig .cap{font-size:13px;color:var(--muted);font-style:italic;margin:10px 0 0}.lab-shell{margin:22px 0 8px}.scene.grid-scene,.scene.grid-scene.tall{display:block;width:100%;height:auto!important;min-height:0;max-width:100%;cursor:default}.num-grid{margin-top:14px;overflow:auto}.num-grid table{border-collapse:collapse;font:12px var(--mono)}.num-grid td{min-width:34px;height:28px;text-align:center;border:1px solid #c9d4c4;background:#f7f8f1}.num-grid td.win{outline:2px solid var(--orange);outline-offset:-2px}.num-grid td.pad{background:#ece7dc;color:#8a8478}.arch-col{display:flex;flex-direction:column;gap:6px}.arch-col i{font-style:normal;display:block;border:1px solid var(--line);background:#e7eee1;border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.45}.arch-col i b{display:block;font:11px var(--mono);color:var(--teal)}.compare-arch{display:grid;grid-template-columns:1fr 1fr;gap:16px}.quiz{grid-template-columns:1fr}.mcq-list{padding-left:22px}.mcq-list li{margin:0 0 10px}.layout{grid-template-columns:220px minmax(0,1fr)}nav a{font-size:13px;padding:9px 8px}@media(max-width:900px){.compare-arch{grid-template-columns:1fr}}
canvas.scene.grid-scene,canvas.scene.grid-scene.tall{display:block;width:100%;max-width:100%;min-height:0;height:unset}

/* Consistent teaching sequence and worksheet-wide example switch. */
.topbar{gap:20px}
.sidebar{overflow-y:auto}
.sidebar-note{padding-top:18px}
.visual-mode{display:flex;align-items:center;gap:3px;padding:4px;border-radius:999px;background:#e7eae0;white-space:nowrap;font-size:12px;flex-shrink:0}
.visual-mode>span{display:flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;color:#596b62}
.visual-mode [data-mode-label=numbers],.visual-mode[aria-pressed=true] [data-mode-label=images]{background:var(--deep);color:#fff}
.visual-mode[aria-pressed=true] [data-mode-label=numbers]{background:transparent;color:#596b62}
.mode-guide{padding:18px 22px;border:1px solid #c5d7c4;border-left:3px solid var(--teal);border-radius:0 12px 12px 0;margin:-25px 0 52px;background:#eef2e7}
.mode-guide p{font-size:13px;line-height:1.7;margin:7px 0}
.mode-guide #mode-status{font-size:14px;color:var(--deep);font-weight:700}
.mode-guide .mode-footnote{color:var(--muted);font-size:12px}
.step-label{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.1em;color:var(--teal);margin-bottom:12px}
.lesson-hook p{font:500 clamp(21px,2.2vw,28px)/1.45 var(--display);letter-spacing:-.025em;margin:0 0 22px;max-width:32em}
.problem-visual{margin:0 0 24px;padding:20px 22px;background:#eeeee5;border:1px solid #d7dbce;border-radius:14px}
.problem-panels{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.problem-panel{max-width:100%;overflow-x:auto;flex:1 1 220px}
.problem-visual figcaption{font-size:13px;line-height:1.65;color:#51635a;margin-top:16px;max-width:65em}
.pixel-table{border-collapse:collapse;font:500 13px/1.4 var(--mono);width:auto!important;max-width:none}
.pixel-table caption{text-align:left;font:600 12px/1.4 var(--sans);color:var(--ink);padding:0 0 10px;max-width:280px;caption-side:top}
.pixel-table td{height:27px;min-width:27px;padding:3px 4px;text-align:center;border:1px solid #8a9d8750;font-variant-numeric:tabular-nums}
.pixel-table td.in-window{box-shadow:inset 0 0 0 2px #cf572f}
.lesson-explanation{margin:24px 0}
.lesson-explanation p{font-size:16px;line-height:1.85;margin:0;max-width:52em}
.formula-card{background:#e7edde;border:1px solid #ccdcca;border-radius:14px;padding:22px 26px;margin:24px 0 12px;overflow-x:auto}
.formula-card .equation{font-size:22px}
.formula-card .step-label{color:#536d56}
.theory-fold{margin:0 0 30px!important;border:1px solid #cfd6c8;border-radius:12px;background:#fffefa}
.theory-fold>summary{list-style:none;display:flex;align-items:center;gap:13px;padding:15px 19px;cursor:pointer;color:var(--ink)}
.theory-fold>summary::-webkit-details-marker{display:none}
.theory-fold>summary::before,.theory-fold>summary::after{content:none}
.theory-fold>summary .fold-icon{display:grid;place-items:center;width:28px;height:28px;flex:none;margin:0;border:1px solid #cfdbca;border-radius:50%;font-size:18px;color:var(--teal)}
.theory-fold>summary>span{margin:0}
.theory-fold>summary b{font-size:14px;font-weight:600;display:block}
.theory-fold>summary small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.theory-fold[open] .fold-icon{transform:rotate(45deg)}
.theory-fold[open]>summary{border-bottom:1px solid var(--line)}
.theory-fold .fold-body{padding:22px 26px 12px}
.theory-fold .formula-explanation{font-size:15px;line-height:1.85;border-left:3px solid #b9cbb0;padding:0 0 0 16px;margin:0 0 26px}
.theory-fold .theory-reasoning p{font-size:15px}
.theory-fold .box{margin:18px 0}
.architecture-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.architecture-choices b{font-size:14px;color:var(--teal)}
.architecture-choices p{font-size:14px;line-height:1.7}
.interactive-step{margin-top:26px}
.interactive-step .lab-shell{margin-top:0}
.experiment.lab-shell{grid-template-columns:minmax(0,1fr) 250px}
.visual-pane{padding:22px;min-width:0}
.canvas-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid #d4dacb;border-radius:8px;background:#f3f4ed}
.canvas-scroll canvas.scene.grid-scene,.canvas-scroll canvas.scene.grid-scene.tall{display:block;max-width:none;min-height:0;height:auto!important}
.scene-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.scene-tools span{font-size:11px;width:100%}
.scene-tools button{font-size:12px}
.matrix-values{margin:12px 0;border:1px solid #d8ddd2;border-radius:8px;background:#f9faf4}
.matrix-values>summary{font-size:12px;padding:10px 13px;color:var(--teal);cursor:pointer}
.matrix-tables{padding:10px 15px 16px;display:flex;gap:24px;flex-wrap:wrap;overflow:auto}
.matrix-tables .pixel-table td{min-width:42px;height:32px;font-size:13px}
.walk-readout{min-height:0;padding:15px 17px;margin-top:15px}
.walk-readout p{line-height:1.85}
.calculation{display:block;font-family:var(--mono);font-size:12px;margin-top:9px;overflow-wrap:anywhere}
.parameter-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:15px}
.parameter-counts>span{font-size:12px;line-height:1.5}
.parameter-counts strong{display:block;font:600 18px/1.5 var(--mono);color:var(--deep);margin:4px 0}
.questions-step{margin-top:30px}
.questions-step .box:first-of-type{margin-top:12px}
.question-context{font-size:13px;color:var(--muted)}
.qin{min-height:36px}
.asset-credit{font-size:12px!important;line-height:1.7!important}
@media(max-width:1250px){.experiment.lab-shell{grid-template-columns:1fr}.experiment .visual-pane{border-right:0;border-bottom:1px solid var(--line)}.experiment .controls{display:block;padding:20px 24px}.experiment .controls input[type=range],.experiment .controls select{max-width:380px}.topbar{gap:12px;padding-inline:24px}.brand-sub{display:none}.progress{width:215px}.architecture-choices{grid-template-columns:1fr}}
@media(max-width:900px){.brand>span:not(.logo){display:none}.topbar{gap:12px}.progress{flex:1;max-width:240px}.sidebar nav{gap:3px}.problem-panels{gap:20px}.sidebar-note{display:none}}
@media(max-width:640px){
 .topbar{height:112px;flex-wrap:wrap;align-content:center;gap:8px 10px;padding:10px 16px}
 .brand{order:0}.visual-mode{order:1;margin-left:auto}.text-btn{order:2;max-width:52px}
 .progress{order:3;flex:0 0 100%;max-width:none;margin-left:0}.progress>div{font-size:10px}.progress progress{margin-top:4px;height:4px}
 .sidebar{top:112px}html{scroll-padding-top:180px}.lab{scroll-margin-top:180px}
 .visual-mode>span{font-size:11px;padding:6px 9px}.mode-guide{margin-top:-18px;padding:14px 16px}
 .problem-visual{padding:16px}.problem-panel{flex-basis:100%}.problem-panels{gap:22px}
 .formula-card{padding:18px}.formula-card .equation{font-size:20px}
 .theory-fold .fold-body{padding:18px}.theory-fold>summary{padding:13px}
 .visual-pane{padding:14px}.parameter-counts{grid-template-columns:1fr}.parameter-counts strong{display:inline;font-size:16px;margin-left:8px}
 .lesson-explanation p{font-size:15px}.lab{margin-bottom:62px}.questions-step .box{padding:17px 16px 8px}
}
@media print{
 .mode-guide,.visual-mode,.matrix-values{display:none!important}.lesson-hook p{font-size:18pt}
 .theory-fold:not([open]){display:none}.theory-fold[open] .fold-body{display:block!important}
 .problem-visual,.formula-card{break-inside:avoid}.canvas-scroll{overflow:visible;border:0}
 .canvas-scroll canvas.scene.grid-scene{max-width:100%;height:auto!important}
 .experiment.lab-shell{display:block}.interactive-step,.questions-step{break-inside:auto}
 .pixel-table td{font-size:10pt}.lab{break-before:page}
}
.historical-context{padding-bottom:16px;margin-bottom:17px!important;border-bottom:1px solid var(--line)}
.lesson-explanation .architecture-choices{margin-top:22px;padding:20px;background:#f0f0e6;border-radius:12px}
.lesson-explanation .architecture-choices p{font-size:13px;margin-top:8px;line-height:1.75}
.formula-card .notation-note{font:12px/1.7 var(--sans);color:var(--muted);margin:13px 0 0}
.image-preview{width:76px;height:76px;display:block;border-radius:5px;overflow:hidden;margin:0 0 13px;border:1px solid #bec8b7}
.fixed-example-grid{display:flex;gap:28px;flex-wrap:wrap;margin:18px 0;overflow-x:auto}
.fixed-example-grid .pixel-table td{min-width:42px;height:42px;font-size:15px}
.diagnostic-answer{background:#fffefa;color:var(--ink);border-radius:8px;margin-top:16px}
.diagnostic-answer p{padding:0 18px 15px;color:var(--ink)!important;font-size:14px}
html{scroll-padding-top:0}
@media print{.image-preview{width:60px;height:60px}}
.matrix-scroll-hint{font-size:12px;color:var(--teal);margin:8px 0}
@media print{.matrix-scroll-hint{display:none}}
.canvas-scroll canvas.scene{touch-action:auto}

/* Keep the input → operation → output visible as one continuous experiment. */
.experiment.lab-shell{grid-template-columns:minmax(0,1fr)}
.experiment .visual-pane{border-right:0;border-bottom:1px solid var(--line)}
.experiment .controls{padding:20px 24px}
.experiment .controls select,.experiment .controls input[type=range]{max-width:420px}
.animation-stages{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:12px;color:var(--muted)}
.animation-stages span{padding:7px 10px;border:1px solid transparent;border-radius:7px;transition:background .18s,color .18s}
.animation-stages span.current{background:#e1ead9;border-color:#b9cdb4;color:var(--deep)}
.animation-stages i{font-style:normal;color:#8a9b88}
.animation-timeline{display:grid;grid-template-columns:auto minmax(80px,1fr) auto 72px auto;align-items:center;gap:12px;margin-top:16px}
.animation-timeline label{font-size:12px;white-space:nowrap;margin:0}
.animation-timeline output{float:none;display:inline;font-size:11px;margin-left:6px}
.animation-timeline input[type=range]{margin:0}
.animation-timeline select,.animation-timeline button{font-size:12px;padding:6px 8px}
.animation-status{font-size:12px;color:var(--teal);margin:10px 0;min-height:2em}
.canvas-scroll canvas.scene{cursor:default}
.formula-card.formula-fold{padding:0;overflow:hidden}
.formula-fold>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;padding:17px 22px}
.formula-fold>summary::-webkit-details-marker{display:none}
.formula-fold>summary span{margin:0;color:var(--deep);font-size:13px}
.formula-fold>summary .step-label{font-size:11px;color:#536d56}
.formula-fold>summary>span:last-child{display:flex;align-items:center;gap:14px}
.formula-fold>summary>span:last-child>span{display:inline-block;font-size:19px;transition:transform .2s}
.formula-fold[open]>summary>span:last-child>span{transform:rotate(45deg)}
.formula-fold[open]>summary{border-bottom:1px solid #ccdcca}
.formula-content{padding:20px 24px;overflow-x:auto}
.calculation-fold{margin-top:14px;background:transparent;border-color:#d4dece}
.calculation-fold>summary{font-size:12px;color:var(--teal);padding:10px 13px}
.calculation-fold>div{font-size:13px;padding:0 14px 14px;line-height:1.8}
.image-preview{width:144px;height:144px;flex:none;border:8px solid #111;border-radius:8px;margin:0;box-shadow:0 3px 12px #182e2b12}
.problem-panel.with-image{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;flex-basis:390px}
@media(max-width:640px){
 .animation-stages{gap:4px;font-size:10px}.animation-stages span{padding:6px 4px}.animation-stages i{display:none}
 .animation-timeline{grid-template-columns:auto minmax(60px,1fr) auto;gap:9px}
 .animation-timeline label:first-child{grid-column:1}.animation-timeline input{grid-column:2 / 4}
 .animation-timeline select{width:72px}.animation-timeline button{justify-self:end}
 .formula-fold>summary{padding:15px;gap:10px}.formula-fold>summary span{font-size:12px}
 .formula-content{padding:18px}.image-preview{width:144px;height:144px}
 .problem-panel.with-image{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.animation-stages span,.formula-fold>summary>span:last-child>span{transition:none}}
@media print{.animation-stages,.animation-timeline,.animation-status{display:none}.image-preview{width:90px;height:90px}}

/* Parameters and the result form one compact experiment. */
.experiment .visual-pane{border:0;padding:22px}
.experiment .controls{display:flex;flex-wrap:wrap;align-items:end;gap:12px 20px;padding:14px 16px;margin:0 0 16px;border:1px solid #d4dfcd;border-radius:10px;background:#eef3e8}
.control-field{flex:1 1 170px;min-width:0;max-width:420px}
.experiment .controls label{margin:0 0 6px;font-size:12px}
.experiment .controls input[type=range]{width:100%;margin:0;height:36px}
.experiment .controls select{width:100%;max-width:none;font-size:13px;padding-block:8px}
.experiment .controls output{font-size:12px}
.experiment-guide,.layer-details{margin:12px 0 0;background:#fafbf6;border-color:#dce2d5}
.experiment-guide>summary,.layer-details>summary{padding:10px 13px;font-size:12px;color:var(--teal)}
.experiment-guide>div{padding:0 15px 13px;font-size:13px;line-height:1.7}
.experiment-guide .try{margin:0;padding:0;border:0}.experiment-guide .try>b{display:none}
.layer-details .num-grid{margin:0;padding:0 14px 14px}
.visual-pane>.scene-tools{justify-content:flex-start;margin:0 0 12px;gap:8px}
.visual-pane>.scene-tools span{display:none}
.visual-pane>.scene-tools button{padding:6px 10px;background:#fffefa}
.walk-readout{margin-top:12px;padding:12px 15px}.walk-readout p{font-size:13px;line-height:1.7;margin:7px 0 0}
.animation-stages{margin-bottom:10px}
.map-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.map-comparison button{display:flex;align-items:center;text-align:left;gap:10px;padding:10px;border:2px solid #dce3d5;background:#fafbf5}
.map-comparison button[aria-pressed=true]{border-color:var(--teal);background:#e7f0df;box-shadow:0 0 0 1px #12655b12}
.map-comparison b{display:block;font-size:12px;line-height:1.5}
.map-comparison small{display:block;font-size:10px;line-height:1.5;color:var(--muted);margin-top:4px}
.map-thumbnail{flex:none}.map-thumbnail .image-preview{width:62px;height:62px;border:0;border-radius:3px;box-shadow:none}
.pipeline-stages{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.pipeline-stages button{font-size:12px;padding:7px 10px}
.pipeline-stages button[aria-pressed=true]{color:#fff;background:var(--deep);border-color:var(--deep)}
.panel-jumps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.panel-jumps[hidden]{display:none}
.panel-jumps button{padding:5px 9px;font-size:11px;color:var(--teal);background:#f2f6eb}
.panel-jumps button:hover{border-color:var(--teal)}
.field-growth{margin:15px 0;font-size:12px;max-width:640px}
.field-growth>b{display:block;font-size:12px;margin-bottom:10px}
.field-growth>div{display:grid;grid-template-columns:66px minmax(20px,1fr) 92px;align-items:center;gap:12px;margin:7px 0}
.field-growth i{display:block;min-width:2px;height:10px;background:var(--teal);border-radius:0 4px 4px 0}
.field-growth strong{font:12px var(--mono);text-align:right;white-space:nowrap}
.field-comparison{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,1fr);gap:20px;align-items:start}
.field-comparison .field-growth{padding:14px;border:1px solid #d4dfcd;border-radius:8px;background:#f4f7ef;margin:0}
.field-comparison .field-growth>div{grid-template-columns:54px minmax(10px,1fr) 84px;gap:8px;margin:14px 0}
@media(max-width:1100px){.field-comparison{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
 .experiment .visual-pane{padding:14px}.experiment .controls{padding:12px;gap:12px;margin-bottom:14px}
 .control-field{flex-basis:125px}.experiment .controls label{font-size:11px}
 .map-comparison{gap:6px}.map-comparison button{flex-direction:column;align-items:flex-start;padding:7px;gap:7px}
 .map-thumbnail .image-preview{width:54px;height:54px}.map-comparison b{font-size:10px}.map-comparison small{display:none}
 .pipeline-stages{gap:5px}.pipeline-stages button{font-size:10px;padding:6px 7px}
 .animation-stages span{padding:5px 3px}
}
@media print{.experiment .controls,.experiment-guide,.scene-tools,.pipeline-stages{display:none}}

.scan-location{font:12px/1.7 var(--mono);color:var(--deep);padding:9px 12px;margin:0 0 10px;border-left:3px solid var(--teal);background:#eef3e8}