:root{color-scheme:dark;--bg:#000;--surface:#101010;--ink:#f0e9dd;--muted:#bcae9d;--rule:#38312b;--accent:#ff1f2e;--green:#6fd98e;--serif:'Instrument Serif','Songti TC',serif;--sans:'Space Mono','PingFang TC','Microsoft JhengHei',monospace;--mono:'Space Mono',monospace}
html[data-theme=light]{color-scheme:light;--bg:#f4eee2;--surface:#fbf7ef;--ink:#1c1611;--muted:#5c4e40;--rule:#cfc4b4;--accent:#d60026;--green:#15672f}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.85 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--rule);background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:6px}button:hover{border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}p{margin:0 0 20px}ul,ol{padding-left:25px}li{margin:5px 0}.wrap,.site-header{max-width:1040px;margin:auto;padding:0 32px}.site-header{display:flex;justify-content:space-between;align-items:center;padding-top:24px;padding-bottom:24px;border-bottom:1px solid var(--rule)}.brand{font:28px var(--serif);text-decoration:none}.brand b{font-weight:400;color:var(--accent)}.barright{display:flex;align-items:center;gap:20px}.back{font-size:11px;text-transform:uppercase;letter-spacing:1px;text-decoration:none;color:var(--muted)}.toggle{width:48px;height:28px;padding:0;border-radius:30px;position:relative}.toggle:after{content:'☾';position:absolute;left:4px;top:3px;width:20px;height:20px;background:var(--ink);color:var(--bg);border-radius:50%;font-size:11px;line-height:20px}html[data-theme=light] .toggle:after{content:'☀';left:23px}.hero{padding:70px 0 42px}.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 22px}h1,h2,h3,h4{font-family:var(--serif);font-weight:400}h1{font-size:clamp(54px,7.4vw,92px);line-height:1.02;letter-spacing:-2px;max-width:800px;margin:0 0 30px}h1 em{color:var(--accent);font-weight:400}.hero-deck{max-width:750px;font-size:15px;color:var(--muted);line-height:1.8}.hero-meta{display:flex;flex-wrap:wrap;gap:12px 24px;color:var(--muted);font-size:11px;margin:25px 0}.hero-meta span{border-top:1px solid var(--rule);padding-top:12px}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;font-size:12px;margin-top:32px}.primary-link{background:var(--accent);color:#fff;padding:12px 18px;border-radius:6px;text-decoration:none}.primary-link:hover{color:#fff;filter:brightness(1.1)}.study-bar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;font-size:11px}.study-bar>span{color:var(--muted)}.study-bar button{background:none;border:0;padding:0;font-size:13px}.study-bar a{text-decoration:none}.sidebar{display:none;border-bottom:1px solid var(--rule);padding:20px 0 30px;gap:30px}.sidebar.open{display:grid;grid-template-columns:2fr 1fr}.sidebar nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}.sidebar nav a{display:flex;gap:10px;font-size:11px;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--rule)}.sidebar nav a span{color:var(--accent)}.sidebar nav a i{margin-left:auto;color:var(--green)}.sidebar nav a.complete i:after{content:'✓'}.sidebar nav a.active{color:var(--accent)}.progress-box{font-size:11px;align-self:start}.progress-box progress{display:block;width:100%;height:8px;accent-color:var(--accent);margin:15px 0}.progress-box p{margin-bottom:8px}.progress-box small{display:block;color:var(--muted);line-height:1.8}.progress-box button{margin-top:14px;font-size:10px}.tools{display:flex;align-items:flex-end;gap:18px;padding:28px 0}.search-wrap{flex:1;min-width:0}.search-wrap label{font-size:10px;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:8px;color:var(--muted)}.search-input-row{display:flex;gap:8px}.search-input-row input{width:100%;min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:12px;color:var(--ink);font-size:12px}.tools button{font-size:11px;white-space:nowrap;min-height:46px}.tool-buttons{display:flex;gap:8px}.search-status{color:var(--muted);font-size:12px;margin:0 0 20px}.search-status:empty{display:none}.chapter{padding:48px 0 40px;border-top:1px solid var(--rule)}.chapter-header{display:flex;gap:25px;align-items:flex-start;margin-bottom:35px}.chapter-number{font:54px/1.1 var(--serif);color:var(--accent);min-width:64px;flex-shrink:0}.chapter-header .eyebrow{color:var(--muted);font-size:10px;letter-spacing:1px;margin:4px 0 12px}h2{font-size:clamp(34px,4vw,48px);line-height:1.2;letter-spacing:-.6px;margin:0}h3{font-size:30px;line-height:1.3;margin:0 0 22px}h4{font-size:24px;margin:24px 0 15px}.topic{padding:12px 0 32px;scroll-margin-top:25px}.topic+.topic{padding-top:32px;border-top:1px solid var(--rule)}.chapter-footer{border:1px solid var(--rule);border-radius:8px;padding:20px;background:var(--surface);color:var(--muted);font-size:11px}.chapter-footer p{margin:0}.mastery{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:12px;color:var(--ink);cursor:pointer}.mastery input{width:18px;height:18px;accent-color:var(--accent);flex-shrink:0}.code{background:var(--surface);border:1px solid var(--rule);border-radius:8px;margin:24px 0;overflow:hidden}.code figcaption{font:10px var(--mono);text-transform:uppercase;letter-spacing:1px;color:var(--muted);border-bottom:1px solid var(--rule);padding:12px 18px}.code pre{font:12px/1.85 var(--mono);margin:0;padding:18px 20px;overflow:auto;tab-size:2}.code pre code{white-space:pre;background:none;padding:0;color:inherit;font:inherit}code{font:.88em var(--mono);background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:2px 5px;overflow-wrap:anywhere}.code code{border:0}.table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;margin:24px 0}table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.8}th{background:var(--surface);color:var(--muted);font-size:11px;text-align:left;padding:12px 15px}td{padding:14px 15px;vertical-align:top;border-top:1px solid var(--rule)}td:first-child{width:26%;font-weight:700}.note{border-left:2px solid var(--accent);background:var(--surface);padding:18px 22px;margin:24px 0;font-size:13px}.note strong{display:block;margin-bottom:8px}.note p{margin:0}.flow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:20px 0;margin:24px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:12px}.flow b{color:var(--accent)}.answer,.original{border:1px solid var(--rule);border-radius:8px;background:var(--surface);margin:12px 0;font-size:13px}.answer summary,.original summary{padding:17px 20px;cursor:pointer;line-height:1.8}.answer[open] summary,.original[open] summary{border-bottom:1px solid var(--rule);color:var(--accent)}.answer-body,.original-body{padding:20px}.answer-body p:last-child{margin:0}.original-body h4{font-size:29px}.original-body h5{font-size:18px}.original-body h6{font-size:15px}.source-meta{font-size:11px;color:var(--muted)}.trace-tool{border:1px solid var(--rule);padding:22px;border-radius:8px}.trace-tool h4{margin-top:0}.trace-buttons{display:flex;flex-wrap:wrap;gap:8px}.trace-buttons button{font-size:11px}.trace-buttons button[aria-pressed=true]{background:var(--ink);color:var(--bg)}#trace-steps{font-size:13px}#trace-result{color:var(--green)}.source-entry{padding:0 0 18px;border-bottom:1px solid var(--rule)}.source-entry h4{font-size:23px}.source-entry p{font-size:12px}.page-footer{border-top:1px solid var(--rule);padding:35px 0;color:var(--muted);font-size:11px}.page-footer p{max-width:800px}.langpick{margin:25px 0}.back-top{position:fixed;right:20px;bottom:20px;border:1px solid var(--rule);border-radius:50%;background:var(--surface);width:40px;height:40px;text-align:center;line-height:38px;text-decoration:none}.skip{position:fixed;top:-80px;left:15px;z-index:99;background:var(--ink);color:var(--bg);padding:12px}.skip:focus{top:15px}.no-results{display:none;padding:40px 0}[hidden]{display:none!important}
@media(max-width:720px){.wrap,.site-header{padding-left:20px;padding-right:20px}.hero{padding-top:46px}h1{font-size:58px}.hero-deck{font-size:13px}.hero-meta{gap:12px 18px}.hero-actions{gap:15px}.study-bar>span{display:none}.sidebar.open{grid-template-columns:1fr}.sidebar nav{grid-template-columns:1fr 1fr}.tools{flex-direction:column;align-items:stretch;gap:12px}.tools button{padding:10px 12px}.tool-buttons{flex-wrap:wrap}.chapter{padding-top:35px}.chapter-header{gap:16px}.chapter-number{min-width:42px;font-size:40px}h2{font-size:34px}h3{font-size:28px}.chapter-header .eyebrow{font-size:9px}body{font-size:13px}.code pre{font-size:11px;padding:15px}.table-wrap table{min-width:540px}.flow{justify-content:flex-start}.answer-body,.original-body{padding:15px}.back-top{right:10px;bottom:10px;width:34px;height:34px;line-height:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{@page{margin:15mm}:root,html[data-theme=light]{--bg:#fff;--ink:#000;--muted:#444;--rule:#bbb;--surface:#f5f5f5;--accent:#900;--green:#000}body{font:11pt/1.5 Georgia,serif}.site-header,.study-bar,.sidebar,.tools,.search-status,.hero-actions,.back-top,.mastery,.trace-buttons,.langpick,.skip{display:none!important}.wrap{max-width:none;padding:0}.hero{padding:0 0 25px}h1{font-size:42pt}.chapter{break-before:page}.chapter-header{break-after:avoid}h2{font-size:26pt}h3{font-size:20pt}.table-wrap{overflow:visible}table{font-size:9pt}th,td{padding:8px}tr{break-inside:avoid}.code pre{font-size:8pt;white-space:pre-wrap;overflow:visible}.code pre code{white-space:pre-wrap}.no-results{display:none!important}[hidden]{display:block!important}.page-footer{padding-top:20px}}
.source-meta,.chapter-footer,.original-body{overflow-wrap:anywhere}.chapter-header>div:last-child{min-width:0}
/* Practice paths keep the field guide's quiet notebook style. */
.learning-path{border:1px solid var(--rule);border-radius:8px;padding:22px;display:flex;align-items:center;gap:24px;margin:0 0 35px;background:var(--surface)}.learning-path>div:first-child{flex:1}.learning-path p{font-size:15px;margin:0 0 8px}.learning-path small{font-size:11px;color:var(--muted)}.path-actions{display:flex;flex-direction:column;gap:8px}.path-actions button{font-size:11px;text-align:left}.in-short{border-top:1px solid var(--rule);margin-top:28px;padding-top:20px}.in-short-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin:0 0 8px}.short-lesson{max-width:780px;font-size:16px;line-height:1.85;margin:0}.deep-dive{border:1px solid var(--rule);border-radius:8px;margin:12px 0}.deep-dive>summary{color:var(--muted);cursor:pointer;font-size:12px;padding:12px 16px}.deep-dive[open]>summary{color:var(--accent)}.deep-body{padding:0 16px 4px}.challenge{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:8px;padding:24px;margin-top:24px;background:var(--surface)}.challenge.passed{border-left-color:var(--green)}.challenge-label{font-size:10px;letter-spacing:1px;color:var(--accent);margin-bottom:15px}.challenge fieldset{border:0;padding:0;margin:0;min-width:0}.challenge legend{font-size:15px;line-height:1.8;margin-bottom:16px;max-width:100%;font-weight:bold}.choice{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--rule);border-radius:6px;padding:12px 14px;margin:8px 0;font-size:13px;cursor:pointer;overflow-wrap:anywhere}.choice:has(input:checked){border-color:var(--ink)}.choice input{margin:6px 0 0;flex-shrink:0;accent-color:var(--accent);width:18px;height:18px}.challenge-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px}.challenge-actions button{font-size:12px}.check-state,.chapter-checks{font-size:11px;color:var(--muted)}.check-feedback{margin:18px 0 0;font-size:13px}.passed .check-feedback{color:var(--green)}.check-feedback:empty{display:none}.reasoning{margin-top:18px;font-size:12px}.reasoning>summary{cursor:pointer;color:var(--muted)}.reasoning p{margin:18px 0 8px}.reasoning ul{padding-left:20px}.reasoning li{margin:12px 0}.journey{padding:22px;border:1px solid var(--rule);border-radius:8px;margin:24px 0}.journey h4{margin-top:0}.journey>p{font-size:13px}.journey-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:11px}.journey button{font-size:11px}.journey button[aria-pressed=true]{background:var(--ink);color:var(--bg)}#journey-stages{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:8px;margin:20px 0}#journey-stages li{margin:0}#journey-stages li:not(:last-child):after{content:'→';margin-left:8px;color:var(--accent)}#journey-explanation{min-height:65px;border-left:2px solid var(--accent);padding-left:16px}button:disabled{opacity:.55;cursor:default}body:not(.interactive) .challenge-actions,body:not(.interactive) .journey-controls{display:none}.chapter-checks{margin-top:12px!important}
@media(max-width:720px){.learning-path{display:block;padding:18px}.path-actions{flex-direction:row;flex-wrap:wrap;margin-top:18px}.challenge{padding:18px}.short-lesson{font-size:15px}.choice{font-size:12px;padding:12px}.journey{padding:18px}.challenge legend{font-size:14px}}
@media print{.learning-path,.challenge-actions,.journey-controls,.chapter-checks{display:none!important}.short-lesson{font-size:11pt}.challenge{break-inside:avoid;background:#fff}.deep-dive{border:0}.deep-dive>summary{font-size:10pt;padding-left:0}.deep-body{padding:0}.in-short{break-inside:avoid}.choice input{display:none}.choice{padding:6px}.check-feedback{display:none}#journey-stages button{border:0;padding:0;color:#000;background:none;opacity:1}.reasoning{font-size:10pt}}
/* Request playground and Mongo sandbox: a simulated Week 2 books API and a simulated Week 3 products collection. Nothing typed in either is sent anywhere. */
.playground{border:1px solid var(--rule);border-radius:8px;padding:24px;margin:32px 0;scroll-margin-top:25px}.playground h3{margin-bottom:14px}.playground h4{font-size:22px;margin:28px 0 10px}.playground .code{margin:12px 0}.playground pre,.playground .code pre code{white-space:pre-wrap;overflow-wrap:anywhere}.playground pre{font:12px/1.75 var(--mono);margin:0;padding:16px 18px}.pg-help{font-size:12px;color:var(--muted);margin:0 0 10px}.pg-link{font-size:13px}.pg-goals{border-bottom:1px solid var(--rule);padding-bottom:22px;margin-bottom:22px}.pg-goals h4{margin-top:12px}#pg-goals,#sb-goals{list-style:none;padding:0;margin:0 0 12px}#pg-goals li,#sb-goals li{display:grid;grid-template-columns:20px 1fr auto;gap:2px 12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--rule);margin:0;font-size:13px}#pg-goals small,#sb-goals small{grid-column:2/-1;color:var(--muted);font-size:11px;line-height:1.7;overflow-wrap:anywhere}.pg-tick{width:18px;height:18px;border:1px solid var(--muted);border-radius:4px;text-align:center;line-height:16px;font-size:12px;color:var(--green);align-self:center}.pg-done .pg-tick{border-color:var(--green)}.pg-goal-state{font-size:10px;color:var(--muted)}.pg-done .pg-goal-state{color:var(--green)}.pg-goals button{font-size:11px}.pg-status{font-size:13px;margin:12px 0 0}.pg-status:empty{margin:0}#pg-goal-status,#sb-goal-status{color:var(--green);margin:0 0 12px}.pg-form{display:grid;gap:14px}.pg-line{display:grid;grid-template-columns:140px 1fr;gap:12px}.pg-headers .pg-line{grid-template-columns:1fr 1fr}.pg-field{min-width:0}.pg-field label,.pg-headers legend{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}.pg-headers legend{padding:0 6px;margin:0}.playground select,.playground input[type=text],.playground textarea{display:block;width:100%;min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;color:var(--ink);font:12px/1.6 var(--mono)}.playground select{min-height:42px}.playground textarea{resize:vertical;min-height:104px}.pg-field .pg-help{margin:8px 0 0}.pg-headers{border:1px solid var(--rule);border-radius:8px;padding:14px 16px;margin:0;min-width:0;display:grid;gap:12px}.pg-headers .pg-help{margin:0}.pg-actions{display:flex;flex-wrap:wrap;gap:10px}.pg-actions button{font-size:12px}#pg-send,#sb-run{background:var(--accent);border-color:var(--accent);color:#fff;min-width:110px}#pg-send:hover,#sb-run:hover{filter:brightness(1.1)}.pg-trace{list-style:none;padding:0;margin:12px 0}.pg-trace li{border-left:2px solid var(--rule);padding:8px 0 8px 14px;margin:0;font-size:12px;line-height:1.75}.pg-trace li.pg-sent{border-left-color:var(--ink)}.pg-trace li.pg-error{border-left-color:var(--accent)}.pg-trace li.pg-skipped{color:var(--muted)}.pg-state{display:inline-block;font-size:10px;line-height:1.7;border:1px solid var(--rule);border-radius:4px;padding:0 6px;margin-right:4px}.pg-sent .pg-state{background:var(--ink);color:var(--bg);border-color:var(--ink)}.pg-error .pg-state{border-color:var(--accent);color:var(--accent)}.pg-why{display:block;margin-top:4px}.pg-store{list-style:none;padding:0;margin:0 0 14px}.pg-store li{margin:8px 0;font-size:12px}.pg-store code{display:block;padding:6px 10px}.pg-fresh code{border-color:var(--green)}.pg-fresh em{display:inline-block;margin-top:6px}.pg-fresh em{font-style:normal;font-size:10px;color:var(--green);border:1px solid var(--green);border-radius:4px;padding:1px 6px;white-space:nowrap}.pg-notes{font-size:12px;color:var(--muted);padding-left:18px;margin:8px 0}.pg-notes:empty{display:none}.pg-choices{margin-top:22px;font-size:12px}.pg-choices>summary{cursor:pointer;color:var(--muted)}.pg-choices[open]>summary{color:var(--accent)}.pg-choices li{margin:8px 0}.pg-gone em,.pg-hit em{display:inline-block;margin-top:6px;font-style:normal;font-size:10px;color:var(--muted);border:1px solid var(--muted);border-radius:4px;padding:1px 6px;white-space:nowrap}.pg-gone em{color:var(--accent);border-color:var(--accent)}.pg-gone code{text-decoration:line-through;color:var(--muted)}.pg-hit code{border-color:var(--muted)}.pg-store code{overflow-wrap:anywhere}#sb-query,#sb-update{min-height:68px}.playground [aria-invalid=true]{border-color:var(--accent)}.playground ::placeholder{color:var(--muted);opacity:.7}.sb-why{font-size:13px;margin:0}.sb-threw #sb-result,.sb-threw .sb-why{color:var(--accent)}body.interactive .pg-static,body:not(.interactive) .pg-live{display:none}
@media(max-width:720px){.playground{padding:16px}.pg-line,.pg-headers .pg-line{grid-template-columns:1fr}.playground pre{font-size:11px;padding:12px}.pg-headers{padding:12px}#pg-goals li,#sb-goals li{grid-template-columns:20px 1fr}.pg-goal-state{grid-column:2}}
@media print{.pg-live{display:none!important}.pg-static{display:block!important}.playground{border:0;padding:0}}
/* Diagrams: inline SVG drawn with the theme tokens, so dark, light and print share one drawing. Each is 340 units wide and laid out top to bottom, so it stays readable on a phone without sideways scrolling. */
.diagram{margin:28px 0;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.diagram svg{display:block;width:100%;max-width:420px;height:auto}.diagram figcaption{font-size:12px;line-height:1.8;color:var(--muted);margin-top:16px;max-width:420px}.dg text{font:12px var(--sans);fill:var(--ink)}.dg .dg-s{font-size:11px}.dg .dg-h{font:17px var(--serif)}.dg .dg-code{font:11px var(--mono)}.dg .dg-url{font-size:12px}.dg .dg-n{font:700 10px var(--mono);text-anchor:middle}.dg .dg-soft{fill:var(--muted)}.dg .dg-strong{font-weight:700;font-size:13px}.dg .dg-mid{text-anchor:middle}.dg .dg-end{text-anchor:end}.dg-box{fill:var(--surface);stroke:var(--muted);stroke-width:1}.dg-fill2{fill:var(--bg)}.dg-band{fill:none;stroke:var(--muted);stroke-width:1;stroke-dasharray:2 4}.dg-line{fill:none;stroke:var(--ink);stroke-width:1.5}.dg-thin{stroke-width:1;stroke:var(--muted)}.dg-life{stroke-width:3}.dg-rule{stroke:var(--rule)}.dg-dash{stroke-dasharray:5 4}.dg-head,.dg-dot{fill:var(--ink)}.dg-ring{fill:var(--bg);stroke:var(--ink);stroke-width:1.25}.dg-line.dg-alert,.dg-box.dg-alert,.dg-ring.dg-alert{stroke:var(--accent)}.dg-alert-fill{fill:var(--accent)}
@media(min-width:900px){.diagram{display:grid;grid-template-columns:420px minmax(0,1fr);gap:36px;align-items:end}.diagram figcaption{margin:0}}
@media print{.diagram{break-inside:avoid;display:block}.diagram svg{max-width:110mm}.diagram figcaption{font-size:9pt;margin-top:8pt}}
.py-js{display:grid;gap:12px;margin:24px 0}.py-js>div{min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:8px;overflow:hidden}.py-js-label{font:700 10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule);margin:0;padding:10px 16px}.py-js pre{font:12px/1.85 var(--mono);margin:0;padding:14px 16px;tab-size:2}.py-js pre,.py-js pre code{white-space:pre-wrap;overflow-wrap:anywhere}.py-js pre code{background:none;border:0;padding:0;color:inherit;font:inherit}:not(pre)>code,.challenge legend,.answer>summary,.reasoning li strong{overflow-wrap:anywhere}#python-bridge td code{white-space:nowrap}#python-bridge td:nth-child(3){min-width:220px}
@media(min-width:700px){.py-js{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:720px){.py-js pre{font-size:11px;padding:12px}}
@media print{.py-js{break-inside:avoid}.py-js pre{font-size:8pt}}
/* Line-by-line walkthroughs sit under their code block: the quoted line, then one plain sentence. */
.walk{border-left:2px solid var(--rule);margin:-10px 0 24px;padding:4px 0 2px 18px}.walk-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.walk ol{margin:0;padding-left:24px}.walk li{margin:0 0 12px;font-size:13px}.walk li::marker{color:var(--muted);font-size:11px}.walk li>code{display:block;width:fit-content;max-width:100%;margin-bottom:5px;white-space:pre-wrap;font-size:11.5px}.walk li>span{display:block}
/* Glossary terms in lesson text are quiet: a dotted underline, the text color, and the page's own focus ring. */
a.t{text-decoration:underline dotted;text-decoration-color:var(--muted);text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}a.t:hover,a.t[aria-expanded=true]{color:inherit;text-decoration-style:solid;text-decoration-color:var(--accent)}a.t:focus-visible{outline-offset:2px;border-radius:2px}
.term-pop{display:none;position:fixed;inset:auto;margin:8px 12px;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:14px 16px;border:1px solid var(--muted);border-radius:8px;background:var(--surface);color:var(--ink);font:13px/1.7 var(--sans);letter-spacing:0;text-transform:none;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:visible}.term-pop:popover-open{display:block}.term-pop b{display:block;margin-bottom:4px}#term-pop-def{display:block}.term-pop-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px;font-size:12px}.term-pop button{padding:4px 10px;font-size:12px}
@supports (anchor-name:--t){a.t[aria-expanded=true]{anchor-name:--term}.term-pop{position-anchor:--term;position-area:bottom;position-try-fallbacks:flip-block}}
@supports not (anchor-name:--t){.term-pop{left:0;right:0;bottom:12px;margin:0 auto}}
.glossary table{min-width:0}.glossary tbody th{width:15em;background:none;color:var(--ink);font-size:12px;vertical-align:top;border-top:1px solid var(--rule);padding:14px 15px;overflow-wrap:break-word}.glossary tr{scroll-margin-top:25px}.glossary tr:target>*{background:var(--surface)}.g-in{display:block;margin-top:4px;font-size:11px;color:var(--muted)}
/* On a phone each glossary entry stacks: the term, then its meaning. The column headings stay for screen readers. */
@media(max-width:720px){.walk{padding-left:12px}.walk ol{padding-left:20px}.glossary thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.glossary tbody tr{display:block;padding:12px 14px;border-top:1px solid var(--rule)}.glossary tbody tr:first-child{border-top:0}.glossary tbody th,.glossary td{display:block;width:auto;padding:0;border:0}.glossary tbody th{margin-bottom:2px;font-size:13px}}
@media print{.walk{border-left:1px solid #bbb}.walk li{break-inside:avoid;font-size:10pt}a.t{text-decoration:none;cursor:auto}.term-pop{display:none!important}.glossary tr[hidden]{display:table-row!important}}
@media print and (max-width:720px){.glossary tbody tr[hidden]{display:block!important}}
/* Recall review: one card at a time over the recall bank below it, on a five-box schedule kept in this browser. Print and no-JavaScript readers get the list. */
.flashcards{border:1px solid var(--rule);border-radius:8px;padding:24px;margin:32px 0;scroll-margin-top:25px}.flashcards h3{margin-bottom:14px}.flashcards h4{font-size:22px;margin:22px 0 10px}.fc-summary{font-size:15px;margin:0}.fc-boxes{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.fc-boxes li{border:1px solid var(--rule);border-radius:6px;padding:10px 12px;margin:0;display:grid;gap:2px;align-content:start;font-size:12px;line-height:1.6;min-width:0}.fc-boxes b{font-weight:400;color:var(--accent);font-size:11px}.fc-boxes small{color:var(--muted);font-size:10px;line-height:1.5}.fc-boxes span{font-size:14px;margin-top:4px}.fc-idle-text{font-size:14px;margin:0 0 14px}.fc-idle-text:empty{display:none}.fc-card{border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:8px;padding:22px;background:var(--surface)}.fc-card .pg-actions{margin:0 0 16px}.fc-question{font:26px/1.35 var(--serif);margin:0 0 18px;overflow-wrap:anywhere}.fc-answer{border-top:1px solid var(--rule);margin:0 0 18px;padding-top:16px;font-size:14px;overflow-wrap:anywhere}.fc-answer p:last-child{margin:0}.fc-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin:0 0 8px!important}#fc-start,#fc-reveal{background:var(--accent);border-color:var(--accent);color:#fff;min-width:110px}#fc-start:hover,#fc-reveal:hover{filter:brightness(1.1)}#fc-good{border-color:var(--green)}#fc-good,#fc-again{min-width:110px}#fc-stop,.fc-reset button{font-size:11px}.fc-reset{border-top:1px solid var(--rule);margin-top:22px;padding-top:18px}#fc-confirm{margin-top:14px}#fc-confirm p{font-size:13px;margin:0 0 12px}
@media(max-width:720px){.flashcards{padding:16px}.fc-boxes{grid-template-columns:repeat(3,minmax(0,1fr))}.fc-card{padding:16px}.fc-question{font-size:22px}}
@media print{.flashcards{display:none!important}}
/* Rebuild it: a lesson's own lines, shuffled, to put back in order. Without script the block is its task and the solved code in a closed disclosure. Lines keep their indentation and wrap inside the line, so nothing scrolls sideways on a phone. */
.parsons,.labelmap{border:1px solid var(--rule);border-left:3px solid var(--muted);border-radius:8px;padding:22px;margin:24px 0;background:var(--surface);scroll-margin-top:25px}.pp-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);margin:0 0 8px}.pp-mark{color:var(--green);border:1px solid var(--green);border-radius:4px;padding:1px 6px;margin-left:8px;font-size:10px;letter-spacing:0;text-transform:none;white-space:nowrap}.pp-mark:before{content:'✓ '}.parsons h4,.labelmap h4{font-size:22px;margin:0 0 10px}.pp-task{font-size:14px;margin:0 0 14px}.pp-lines{list-style:none;padding:0;margin:0 0 16px;counter-reset:pp}.pp-lines li{margin:0 0 6px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.pp-line{counter-increment:pp;position:relative}.pp-code{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:0 10px;text-align:left;padding:0 10px 0 0;background:var(--bg);min-width:0;user-select:none;-webkit-user-select:none}.pp-grip{touch-action:none;cursor:grab;align-self:stretch;display:grid;place-items:center;color:var(--muted);font-size:11px;border-right:1px solid var(--rule);min-height:36px}.pp-grip:before{content:counter(pp)}.pp-lines code{border:0;background:none;padding:6px 0;font-size:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.pp-fixed code{display:block;padding:2px 0 2px 41px;color:var(--muted)}.pp-moves{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-content:center;max-width:78px}.pp-move{padding:0;width:36px;min-height:36px}.pp-leave{font-size:10px;padding:4px 0;width:100%}.pp-grabbed .pp-code{border-style:dashed;border-color:var(--ink)}.pp-wrong .pp-code{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.pp-wrong .pp-grip:before{content:counter(pp) ' ✗';color:var(--accent)}.pp-left .pp-code code{text-decoration:line-through;color:var(--muted)}.pp-out-note{grid-column:2;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding-bottom:6px}.pp-extra{font-size:13px;margin:0 0 12px;padding-left:10px;border-left:2px solid var(--accent)}.pp-dragging{z-index:2;background:var(--surface)}.pp-dragging .pp-code{border-color:var(--ink);cursor:grabbing;box-shadow:0 6px 18px rgba(0,0,0,.35)}.pp-before:before,.pp-after:after{content:'';position:absolute;left:0;right:0;height:3px;background:var(--accent)}.pp-before:before{top:-5px}.pp-after:after{bottom:-5px}.pp-live .pg-status{margin:14px 0 0;font-size:14px}.pp-result{margin:16px 0 0}.pp-solution{border:1px solid var(--rule);border-radius:8px;margin:16px 0 0;font-size:13px;background:var(--bg)}.pp-solution summary{padding:12px 16px;cursor:pointer}.pp-solution[open] summary{border-bottom:1px solid var(--rule)}.pp-solution .code{margin:16px;background:var(--surface)}.pp-solution .code pre code,.pp-result pre code{white-space:pre-wrap;overflow-wrap:anywhere}.pp-why{margin:0 16px 16px}.pp-index{border-top:1px solid var(--rule);margin-top:24px}.pp-index ul{margin:0 0 18px}.pp-index li{font-size:13px}.pp-index button{font-size:11px}
@media(max-width:720px){.parsons,.labelmap{padding:16px}.pp-lines code{font-size:11px}.pp-lines li.pp-line{grid-template-columns:minmax(0,1fr);gap:4px;margin-bottom:10px}.pp-moves{max-width:none}.pp-leave{width:auto;padding:4px 12px;order:-1;margin-right:auto}.pp-solution .code{margin:12px}.pp-why{margin:0 12px 12px}}
@media print{.parsons{background:#fff;break-inside:avoid}.pp-live,.pp-mark{display:none!important}}
/* Chapter maps: with script, a lit part links to its lesson. Label the map: the same drawing with its names blanked into numbered slots. */
body.interactive .dg-jump,body.interactive .lm-slot{cursor:pointer}.dg-jump:hover :is(rect,path){stroke-width:3}.dg-jump:focus,.lm-slot:focus{outline:none}.dg-jump:focus-visible :is(rect,path,circle){stroke:var(--ink);stroke-width:3}.dg-jump:focus-visible text{text-decoration:underline}.lm-map svg{display:block;width:100%;max-width:420px;height:auto;margin:4px 0 14px}.lm-box{stroke-dasharray:4 3}.lm-slot:focus-visible .lm-box{stroke:var(--ink);stroke-width:3;stroke-dasharray:none}.lm-wrong .lm-box{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:none}.lm-wrong text{fill:var(--accent)}.lm-right .lm-box{stroke:var(--green);stroke-width:2;stroke-dasharray:none}.lm-bank{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}.lm-name{font-size:12px;padding:6px 12px;min-height:36px}.lm-name[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.lm-verdict .pg-status{font-size:14px;margin:14px 0 0}.lm-hints{margin:8px 0 0;padding-left:20px;font-size:13px}.lm-hints:empty{display:none}
@media print{.labelmap{display:none!important}}
@media screen and (min-width:1200px){body{padding-left:260px}.sidebar,.sidebar.open{display:block;position:fixed;top:0;bottom:0;left:0;width:260px;overflow-y:auto;padding:24px 20px;border-bottom:0;border-right:1px solid var(--rule);background:var(--bg);z-index:5}.sidebar nav{grid-template-columns:1fr;gap:0}.sidebar nav a.active{box-shadow:inset 2px 0 var(--accent);padding-left:10px}.progress-box{margin-top:24px}#menu-toggle{display:none}}