:root{--red:#8c1515;--red-dark:#671414;--ink:#242424;--muted:#686664;--line:#e4e1dc;--surface:#fff;--tint:#faf8f5;--soft:#f3efea;--green:#426550;--radius:10px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--surface);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.65}button{font:inherit;cursor:pointer}a{color:var(--red);text-underline-offset:3px}a:hover{color:var(--red-dark)}:focus-visible{outline:3px solid #bc715a;outline-offset:3px}.skip-link{position:absolute;left:-9999px;top:8px;z-index:10;padding:8px 12px;background:white}.skip-link:focus{left:8px}.site-header{border-bottom:1px solid var(--line);background:white}.header-inner{max-width:1140px;margin:auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:720;letter-spacing:-.02em;line-height:1.14}.brand:hover{color:var(--ink)}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--red);color:white;font-size:.74rem;font-weight:800;letter-spacing:.02em;border-radius:3px}.brand small{display:block;font-weight:450;font-size:.69rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}.header-right{display:flex;align-items:center;gap:20px}.version{color:var(--muted);font-size:.75rem}.quiet-button{background:none;border:none;color:var(--red);padding:7px 4px;font-size:.82rem;font-weight:700}.quiet-button:hover{text-decoration:underline}.site-footer{max-width:1140px;margin:0 auto;padding:26px 28px 36px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:22px;color:var(--muted);font-size:.75rem}
.overview{max-width:1030px;margin:auto;padding:52px 28px 82px}.eyebrow{text-transform:uppercase;letter-spacing:.17em;color:var(--red);font-size:.72rem;font-weight:800;margin:0 0 12px}.overview h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.06;letter-spacing:-.06em;margin:0 0 17px;font-weight:650}.lede{color:#53504d;max-width:680px;font-size:1.1rem;line-height:1.72;margin:0 0 25px}.intro-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:36px}.primary-button,.secondary-button{min-height:43px;border-radius:5px;padding:9px 17px;font-size:.85rem;font-weight:700}.primary-button{color:white;background:var(--red);border:1px solid var(--red)}.primary-button:hover{background:var(--red-dark)}.secondary-button{color:var(--red);background:white;border:1px solid #c8b6b3}.secondary-button:hover{background:#fbf4f2}.progress-note{font-size:.79rem;color:var(--muted)}.overview-diagram{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--radius);background:var(--tint);margin:0 0 38px}.section-title{font-size:1.35rem;line-height:1.3;letter-spacing:-.025em;margin:0 0 16px}.overview-block{margin-top:38px}.requirements{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.requirement{padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:white}.requirement h3{font-size:1rem;margin:0 0 11px}.requirement ul{margin:0;padding-left:18px;color:#56524e;font-size:.86rem}.requirement li{margin:6px 0}.notice{border-left:3px solid var(--red);background:var(--tint);padding:12px 16px;margin-top:23px;color:#514b47;font-size:.83rem}.chapter-list{border-top:1px solid var(--line)}.chapter-row{display:grid;grid-template-columns:45px 1fr auto;gap:15px;align-items:center;border-bottom:1px solid var(--line);padding:14px 0}.chapter-num{color:var(--red);font-size:.75rem;font-weight:800}.chapter-row strong{display:block;font-size:.9rem}.chapter-row small{color:var(--muted);font-size:.75rem}.chapter-count{font-size:.72rem;color:var(--muted)}details.problem-details{border:1px solid var(--line);border-radius:var(--radius);margin-top:18px}details.problem-details summary{padding:14px 18px;cursor:pointer;color:var(--red);font-size:.82rem;font-weight:700}.problem-groups{padding:0 18px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.problem-groups h3{margin:0 0 6px;font-size:.82rem}.problem-groups p{margin:0;color:var(--muted);font-size:.76rem;line-height:1.9}code,.problem-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.problem-id{display:inline-block;padding:2px 5px;margin:2px 4px 2px 0;border-radius:4px;background:var(--soft);font-size:.7rem;color:#5a4a46;overflow-wrap:anywhere}
.lesson-shell{max-width:980px;margin:0 auto;padding:34px 28px 80px}.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.78rem;color:var(--muted);margin-bottom:16px}.lesson-top strong{color:var(--red)}.progress-bar{width:100%;height:4px;background:#eeeae5;border-radius:999px;overflow:hidden;margin-bottom:34px}.progress-bar span{display:block;height:100%;background:var(--red);transition:width .25s}.lesson{max-width:760px;margin:auto}.lesson .chapter-label{text-transform:uppercase;letter-spacing:.14em;color:var(--red);font-size:.72rem;font-weight:800;margin:0 0 10px}.lesson h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.05em;line-height:1.13;margin:0 0 15px;font-weight:650}.goal{font-size:1.03rem;color:#524f4a;line-height:1.73;margin:0 0 23px}.lesson-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.76rem;margin-bottom:28px}.lesson-meta a{font-weight:700}.figure{margin:0 0 36px}.figure img{display:block;width:100%;height:auto;border-radius:8px}.figure figcaption{font-size:.75rem;color:var(--muted);margin-top:9px}.lesson-section{border-top:1px solid var(--line);padding-top:26px;margin-top:28px}.lesson-section h2{font-size:1.24rem;letter-spacing:-.025em;margin:0 0 11px;line-height:1.3}.lesson-section p{color:#4b4845;margin:0 0 13px;font-size:.91rem}.concept-list{margin:0;padding-left:20px;color:#4b4845;font-size:.88rem}.concept-list li{margin:8px 0}.equation-card{border:1px solid var(--line);border-radius:8px;margin:17px 0;background:#fff}.equation-head{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid var(--line);color:var(--red);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.equation-body{overflow-x:auto;padding:23px 14px 12px;text-align:center}.equation-body .katex-display{margin:.2em 0;min-width:max-content}.equation-notes{padding:0 17px 16px}.equation-notes p{margin:8px 0;font-size:.82rem}.equation-notes strong{color:var(--ink)}.equation-notes .watch{color:#6f443d}.assignment-box{background:var(--tint);padding:19px 21px;border:1px solid var(--line);border-radius:8px}.assignment-box p{margin:8px 0 0;font-size:.83rem}.assignment-box .problem-id{background:#eee5e2;color:#673a35}.check-list{padding-left:22px;margin:0;color:#4b4845;font-size:.88rem}.check-list li{margin:9px 0}.lesson-actions{border-top:1px solid var(--line);margin-top:38px;padding-top:22px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.nav-actions{display:flex;gap:9px;flex-wrap:wrap}.complete-label{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:8px;cursor:pointer}.complete-label input{accent-color:var(--red);width:17px;height:17px}.reset-area{margin-top:45px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--muted);font-size:.75rem}.text-button{border:0;background:none;color:var(--red);font-weight:700;font-size:.75rem;padding:4px}.text-button:hover{text-decoration:underline}.error{max-width:650px;margin:70px auto;padding:25px;border:1px solid var(--line)}
@media(max-width:720px){.header-inner{padding:10px 18px}.version{display:none}.overview{padding:36px 20px 60px}.requirements,.problem-groups{grid-template-columns:1fr}.lesson-shell{padding:27px 20px 65px}.lesson-actions{align-items:flex-start}.site-footer{padding:22px 20px;display:block}.site-footer a{display:inline-block;margin-top:8px}.chapter-row{grid-template-columns:35px 1fr}.chapter-count{grid-column:2}.equation-body{font-size:.88rem}}
@media(max-width:430px){.overview h1{font-size:2.18rem}.lesson h1{font-size:1.95rem}.requirement{padding:18px}.lesson-top{display:block}.lesson-top span{display:block;margin-top:4px}.nav-actions{width:100%}.nav-actions button{flex:1}.equation-body{font-size:.77rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.progress-bar span{transition:none}}
@media print{.site-header,.site-footer,.lesson-actions,.reset-area,.intro-actions{display:none}.overview,.lesson-shell{max-width:none;padding:0}.lesson{max-width:none}.lesson-section,.equation-card{break-inside:avoid}body{font-size:11pt}}
/* Guided-study directory */
.lesson-shell{max-width:1190px}
.study-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;align-items:start}
.study-layout .lesson{max-width:760px;width:100%;margin:0}
.desktop-directory{align-self:start;padding:0 16px 18px 0;border-right:1px solid var(--line)}
.mobile-directory{display:none}
.directory-heading{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.directory-position{margin:4px 0 12px;color:var(--muted);font-size:.74rem}
.directory-math{display:flex;justify-content:space-between;gap:8px;width:100%;padding:8px 10px;margin-bottom:15px;border:1px solid #e5d8d4;border-radius:5px;background:#fcf8f7;color:var(--red);font-size:.72rem;font-weight:700;text-align:left}
.directory-math:hover{background:#f7eeec}.directory-math span{white-space:nowrap}
.toc-chapter{margin:0 0 13px}.toc-chapter-title{display:flex;gap:8px;align-items:baseline;color:#625d59;font-size:.72rem;font-weight:750;margin-bottom:3px}.toc-chapter-title span{color:#9d5950;font-variant-numeric:tabular-nums}.toc-chapter-title.active{color:var(--red)}
.toc-chapter ol{list-style:none;padding:0;margin:0 0 0 6px;border-left:1px solid var(--line)}
.toc-chapter li{margin:0}.toc-lesson{display:grid;grid-template-columns:23px minmax(0,1fr) 13px;gap:5px;align-items:start;margin-left:-1px;padding:5px 4px 5px 10px;border-left:2px solid transparent;color:#5e5b57;font-size:.71rem;line-height:1.35;text-decoration:none;border-radius:0 4px 4px 0;min-height:33px}.toc-lesson:hover{color:var(--red);background:#faf7f3;text-decoration:none}.toc-lesson.current{border-left-color:var(--red);background:#f7efed;color:var(--red);font-weight:750}.toc-index{color:#9b9690;font-variant-numeric:tabular-nums}.toc-lesson.current .toc-index{color:var(--red)}.toc-name{overflow-wrap:anywhere}.toc-check{color:var(--green);font-weight:900}
#equations{scroll-margin-top:20px}
@media(max-width:760px){.lesson-shell{max-width:800px}.study-layout{display:block}.study-layout .lesson{margin:auto}.desktop-directory{display:none}.mobile-directory{display:block;border:1px solid var(--line);border-radius:7px;margin:0 0 26px;background:var(--tint)}.mobile-directory summary{cursor:pointer;padding:11px 14px;color:var(--red);font-size:.79rem;font-weight:750}.mobile-directory-content{padding:0 14px 14px}.mobile-directory .toc-lesson{font-size:.76rem;min-height:39px}}
@media print{.desktop-directory,.mobile-directory{display:none}.study-layout{display:block}.study-layout .lesson{max-width:none}}
.source-links,.footer-links{display:flex;flex-wrap:wrap;gap:10px 22px}.source-links{font-size:.88rem;font-weight:700}.footer-links{justify-content:flex-end}
@media(max-width:720px){.footer-links{justify-content:flex-start}}
/* Lesson-specific implementation tasks and progressive hints */
.build-section{border:1px solid var(--line);border-radius:8px;padding:22px 23px 24px;margin-top:34px;background:#fff}
.build-section h2{margin-bottom:5px}.build-scope{font-size:.72rem!important;font-weight:800;color:var(--red)!important;letter-spacing:.04em;margin:0 0 13px!important}
.build-list{margin:0 0 17px;padding-left:20px;color:#4b4845;font-size:.86rem}.build-list li{margin:7px 0}
.hint-flow{border-top:1px solid var(--line);padding-top:16px}.hint-button{border:1px solid #c8b6b3;border-radius:5px;background:white;color:var(--red);padding:7px 12px;font-size:.77rem;font-weight:750;text-align:left}.hint-button:hover{background:#fbf4f2}
.hint-panel{margin-top:13px;padding:14px 16px;background:var(--tint);border-left:3px solid var(--red)}.hint-panel[hidden]{display:none}.hint-panel p{margin:0 0 12px!important;font-size:.83rem!important}.hint-panel .hint-button{background:#fff}.pseudo-panel{background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);padding:14px 16px}
.pseudo-panel pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#383532;font:600 .78rem/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.pseudo-panel code{font:inherit}.hint-panel .hint-note{margin:11px 0 0!important;color:var(--muted);font-size:.72rem!important}
@media(max-width:720px){.build-section{padding:18px 17px}}
/* Overview: measurable progress and system dependencies */
.overview{max-width:1100px;padding-top:42px}.overview h1{font-size:clamp(2.2rem,4vw,3.45rem);max-width:790px}.overview .lede{max-width:790px}
.overview-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:9px;overflow:hidden}.metric{min-height:104px;padding:15px 19px;border-right:1px solid var(--line);background:#fff}.metric:last-child{border-right:0}.metric strong{display:block;color:var(--red);font-size:2rem;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}.metric strong span{font-size:1rem;color:var(--muted);font-weight:550}.metric small{display:block;color:var(--muted);font-size:.74rem;margin-top:5px}.metric-track{height:4px;background:#eeeae5;border-radius:99px;overflow:hidden;margin-top:10px}.metric-track span{display:block;height:100%;background:var(--green)}
.architecture-block{border:1px solid var(--line);border-radius:11px;background:var(--tint);padding:26px;margin-top:26px}.architecture-heading{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:20px}.architecture-heading .eyebrow{margin-bottom:4px}.architecture-heading h2{margin:0;font-size:1.55rem;line-height:1.25;letter-spacing:-.03em}.architecture-heading p:last-child{max-width:290px;color:var(--muted);font-size:.8rem;margin:0}
.architecture-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.arch-stage{position:relative;display:flex;flex-direction:column;min-width:0;min-height:173px;padding:15px 14px 12px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);border-radius:7px;color:var(--ink);text-decoration:none;box-shadow:0 2px 7px rgba(28,22,18,.025)}.arch-stage:hover{color:var(--ink);border-color:#c8b6b3;transform:translateY(-2px);text-decoration:none}.arch-stage:not(:last-child)::after{content:'→';position:absolute;right:-12px;top:48%;z-index:1;color:var(--red);font-size:1.1rem;font-weight:800}.arch-number{color:var(--red);font-size:.6rem;font-weight:850;letter-spacing:.1em}.arch-stage strong{font-size:1rem;margin-top:7px}.arch-stage small{font-size:.72rem;color:var(--muted);line-height:1.45;margin:4px 0 11px}.arch-contract{display:flex;align-items:center;justify-content:space-between;gap:5px;border-top:1px solid var(--line);padding-top:8px;margin-top:auto;font-size:.66rem;line-height:1.3;color:var(--muted)}.arch-contract b{color:#46423e;text-align:right;font-weight:700}
.model-strip{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:15px 0 0;padding:10px 12px;border:1px solid #e8e1d9;border-radius:6px;background:#fff;font-size:.71rem}.model-strip .strip-label{margin-right:5px;text-transform:uppercase;letter-spacing:.08em;font-size:.62rem;font-weight:800;color:var(--muted)}.model-strip a{font-weight:700}.model-strip span[aria-hidden]{color:#a9a19a}
.architecture-lanes{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:13px}.arch-lane{padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:7px}.lane-label{font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}.generate-lane .lane-label{color:var(--green)}.arch-lane p{margin:7px 0 4px;font-size:.81rem;line-height:1.6}.arch-lane small{color:var(--muted);font-size:.72rem;line-height:1.4}.architecture-outcome{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:11px 14px 0;font-size:.77rem}.architecture-outcome span:last-child{color:#5b5752}
.project-structure{border:1px solid var(--line);border-radius:9px;padding:24px 25px;background:#fff}.project-structure .eyebrow{margin-bottom:4px}.project-structure .section-title{margin-bottom:7px}.structure-intro{font-size:.84rem;color:var(--muted);max-width:690px;margin:0 0 17px}.structure-core{display:grid;grid-template-columns:145px 175px 1fr;gap:12px;align-items:center;border-left:3px solid var(--red);background:var(--tint);padding:14px 16px;font-size:.8rem}.structure-core code{font-size:.83rem;color:var(--red);font-weight:750}.structure-core span{color:#57514e}.structure-branches{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:11px 0}.structure-branch{border:1px solid var(--line);border-radius:6px;padding:13px 16px}.branch-marker{display:block;color:var(--red);font-size:.64rem;font-weight:800;letter-spacing:.08em;margin-bottom:5px}.structure-branch code,.structure-branch strong{font-size:.84rem;color:var(--ink)}.structure-branch p{font-size:.76rem;color:var(--muted);margin:5px 0 0}.structure-output{display:flex;align-items:center;gap:11px;border-top:1px solid var(--line);padding-top:12px;font-size:.76rem}.structure-output span:first-child{color:var(--muted);margin-right:4px}.structure-output code{color:var(--red);font-weight:700}
.chapter-list-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:13px}.chapter-list-heading .eyebrow{margin-bottom:3px}.chapter-list-heading .section-title{margin:0}.chapter-list-heading>span{color:var(--muted);font-size:.72rem}.chapter-row{color:var(--ink);text-decoration:none;grid-template-columns:45px 1fr auto;gap:15px}.chapter-row:hover{color:var(--ink);text-decoration:none;background:var(--tint)}.chapter-summary small{display:block}.chapter-load{position:relative;width:min(360px,100%);height:9px;background:#f1eeea;border-radius:3px;margin-top:8px;overflow:hidden}.chapter-load span{position:absolute;left:0;border-radius:3px}.chapter-load .problem-load{top:1px;height:3px;background:var(--red)}.chapter-load .completed-load{bottom:1px;height:3px;background:var(--green)}.chapter-count{white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:900px){.architecture-track{grid-template-columns:repeat(2,minmax(0,1fr))}.arch-stage:not(:last-child)::after{display:none}.structure-core{grid-template-columns:130px 1fr}.structure-core span{grid-column:1/-1}}
@media(max-width:720px){.overview{padding-top:32px}.overview-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.architecture-block{padding:17px}.architecture-heading{display:block}.architecture-heading p:last-child{margin-top:8px}.architecture-track,.architecture-lanes,.structure-branches{grid-template-columns:1fr}.arch-stage{min-height:135px}.project-structure{padding:18px}.structure-core{grid-template-columns:1fr;gap:4px}.structure-core span{grid-column:auto}.chapter-list-heading{display:block}.chapter-list-heading>span{display:block;margin-top:7px}.chapter-row{grid-template-columns:36px 1fr}.chapter-count{grid-column:2}.architecture-outcome{padding-left:0;padding-right:0}}
@media(prefers-reduced-motion:reduce){.arch-stage:hover{transform:none}}
.lesson-meta{margin-bottom:15px}.lesson-flow{display:grid;grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr) 15px minmax(0,1fr);align-items:center;gap:5px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:var(--tint);margin:0 0 27px}.lesson-flow>span{color:var(--red);text-align:center;font-weight:800}.lesson-flow div{min-width:0}.lesson-flow small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:.59rem;font-weight:800}.lesson-flow strong{display:block;color:var(--ink);font-size:.7rem;line-height:1.35;margin-top:3px}
@media(max-width:600px){.lesson-flow{grid-template-columns:1fr;gap:9px}.lesson-flow>span{display:none}.lesson-flow div:not(:first-child){border-top:1px solid var(--line);padding-top:9px}}
/* Official Python TODOs and code-marked lesson directory */
.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}
.toc-legend{font-size:.67rem;color:var(--muted);margin:0 0 13px}.toc-legend span,.toc-lesson.has-code .toc-name{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
.build-section{padding:21px 22px}.build-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.build-heading h2{margin:0}.build-heading>span{font-size:.67rem;color:var(--red);font-weight:800;white-space:nowrap}
.build-layout{display:grid;grid-template-columns:minmax(0,1fr) 218px;gap:22px;align-items:start}.code-task-area{min-width:0}.code-location{font-size:.8rem!important;color:#4b4845!important;margin:0 0 8px!important}.code-location strong{color:var(--ink)}.code-provenance{font-size:.72rem!important;color:var(--muted)!important;margin:0 0 14px!important}
.stub-card{border:1px solid var(--line);border-radius:7px;background:#fff;margin:0 0 13px;overflow:hidden}.stub-head{display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex-wrap:wrap;padding:10px 12px;background:var(--tint);border-bottom:1px solid var(--line)}.stub-head strong{font:700 .78rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}.stub-head a{font-size:.67rem;white-space:nowrap}
.todo-line-no{font:700 .63rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--red);background:#f4e9e6;padding:2px 5px;border-radius:3px}
.stub-signature,.stub-todo,.suggested-code,.full-stub pre{overflow:auto;margin:0;padding:11px 12px;font:.72rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:4;background:#fff;color:#34312e}.stub-signature code,.stub-todo code,.suggested-code code,.full-stub code{font:inherit}.stub-todo{background:#fbf4f2;color:var(--red);font-weight:700;border-top:1px solid var(--line)}.source-omission{margin:0!important;padding:0 12px 7px;color:var(--muted)!important;font-size:.64rem!important;font-style:italic}
.full-stub{border-top:1px solid var(--line)}.full-stub summary{cursor:pointer;padding:8px 12px;color:var(--red);font-size:.68rem;font-weight:750}.full-stub pre{max-height:430px;border-top:1px solid var(--line);background:#fcfbfa}.suggested-code{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:5px;background:#fcfbfa;white-space:pre;max-height:330px}.no-code-task{font-size:.83rem}.no-code-task strong{color:var(--ink)}.no-code-task p{font-size:.76rem!important;color:var(--muted)!important;margin:7px 0!important}.no-code-task ul{padding-left:18px;margin:8px 0;color:#4b4845}.no-code-task li{margin:7px 0}
.build-layout .hint-flow{border-top:0;border-left:1px solid var(--line);padding:2px 0 0 17px}.hint-title{display:block;font-size:.71rem;color:var(--ink);margin:0 0 11px}.build-layout .hint-button{width:100%;font-size:.7rem}.build-layout .hint-panel{padding:11px 12px}.build-layout .hint-panel p{font-size:.75rem!important}.build-layout .pseudo-panel pre{font-size:.66rem;line-height:1.55}
@media(max-width:720px){.build-layout{grid-template-columns:1fr}.build-layout .hint-flow{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.build-layout .hint-button{width:auto}.build-section{padding:18px 17px}}

/* Local visual explanations: consistent motifs across overview and lessons. */
.campus-cover{margin:0 0 32px}.campus-cover img{display:block;width:100%;height:auto;border-radius:7px}.campus-cover figcaption{margin-top:7px;color:var(--muted);font-size:.62rem;text-align:right}.campus-cover a{color:inherit;text-underline-offset:2px}
.stage-visual{display:block;width:100%;height:auto;aspect-ratio:12/7;border-radius:5px;margin:14px 0 9px}.arch-stage{transition:border-color .15s,transform .15s}.arch-stage:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.chapter-row{grid-template-columns:34px 112px minmax(0,1fr) auto}.chapter-thumbnail{display:block;width:112px;height:auto;border-radius:5px}.toc-chapter-title{align-items:center;gap:6px;line-height:1.3}.toc-thumbnail{display:block;flex-shrink:0;width:56px;height:auto;border-radius:4px}.toc-chapter-title>span{font-size:.64rem}
.concept-visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.58fr);align-items:center;gap:24px;margin:0 0 24px;padding:18px;background:#faf7f2;border:1px solid var(--line);border-radius:8px}.concept-visual img{display:block;width:100%;height:auto}.concept-visual figcaption{font-size:.8rem;line-height:1.6;color:var(--muted)}.concept-visual figcaption strong{display:block;color:var(--red);margin-bottom:5px}
@media(max-width:720px){.chapter-row{grid-template-columns:26px 72px minmax(0,1fr);gap:10px}.chapter-thumbnail{width:72px}.chapter-count{grid-column:3}.stage-visual{max-width:400px;align-self:center}.concept-visual{grid-template-columns:1fr;gap:8px}.concept-visual img{max-width:480px;margin:auto}.campus-cover{margin-bottom:24px}.campus-cover img{height:88px;object-fit:cover}.campus-cover figcaption{font-size:.57rem}}

/* ---- Visual layer: extra figures, inline figures, widgets, formula keys, link cards ---- */
:root{--blue:#2f5d8a;--blue-tint:#e2eaf3;--gold:#a8660f;--gold-tint:#f6ead3;--green-tint:#e3ece6}
.extra-figure{margin:-12px 0 36px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.extra-figure img{max-width:620px;margin:auto}
.figure .credit,.inline-figure .credit{display:block;margin-top:5px;font-size:.7rem;color:var(--muted)}
.figure .credit a,.inline-figure .credit a{color:inherit}
.inline-figure{margin:18px 0 22px;padding:0}
.inline-figure img{display:block;width:100%;max-width:720px;height:auto;border-radius:8px}
.inline-figure figcaption{font-size:.75rem;color:var(--muted);margin-top:7px;max-width:720px}
.section-lede{font-size:.82rem!important;color:var(--muted)!important}

.equation-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:2px 17px 12px;font-size:.76rem;color:var(--ink)}
.equation-key li{display:flex;align-items:center;gap:6px}
.equation-key li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--key);flex:none}

.link-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:6px}
.link-card{display:flex;flex-direction:column;gap:4px;padding:14px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.link-card:hover,.link-card:focus-visible{border-color:var(--red);transform:translateY(-1px)}
.link-card strong{font-size:.88rem;line-height:1.35}
.link-card small{color:var(--muted);font-size:.74rem}
.link-card span:last-child:not(.link-kind){font-size:.78rem;color:#4b4845;line-height:1.45}
.link-kind{align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--soft);color:var(--muted)}
.link-kind.kind-video{background:var(--tint);color:var(--red);box-shadow:inset 0 0 0 1px #ecd6d2}
.link-kind.kind-paper{background:var(--blue-tint);color:var(--blue)}
.link-kind.kind-article{background:var(--green-tint);color:var(--green)}
.link-kind.kind-code{background:var(--gold-tint);color:var(--gold)}

.widget{margin:0 0 36px;padding:20px;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;background:#fff}
.widget .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.widget-head{margin-bottom:14px}
.widget-kicker{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:4px;padding:2px 7px;margin-right:8px;vertical-align:2px}
.widget-head strong{font-size:1rem}
.widget-head p{margin:6px 0 0;font-size:.84rem;color:var(--muted)}
.widget-note{margin:12px 0 0;font-size:.7rem;color:var(--muted)}
.widget button{font:inherit;cursor:pointer}
.widget-presets,.widget-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.widget-presets button,.seg button{font-size:.76rem;padding:5px 10px;border:1px solid var(--line);border-radius:99px;background:var(--tint);color:var(--ink)}
.widget-presets button:hover,.seg button:hover{border-color:var(--red)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.widget .check,.widget .slider{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink)}
.widget input[type=range]{accent-color:var(--red);width:120px}
.widget input[type=checkbox]{accent-color:var(--red)}

.ce-context{font-size:.84rem;margin-bottom:8px}
.ce-rows{display:grid;gap:6px}
.ce-row{display:grid;grid-template-columns:64px minmax(90px,150px) 44px minmax(0,1fr) 48px;align-items:center;gap:10px;font-size:.8rem}
.ce-row input[type=range]{width:100%}
.ce-token{border:1px solid var(--line);border-radius:6px;background:var(--soft);padding:4px 0;font-family:ui-monospace,Menlo,monospace!important;font-size:.78rem}
.ce-row.is-target .ce-token{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.ce-logit,.ce-p{text-align:right;color:var(--muted);font-size:.76rem}
.ce-bar{height:14px;background:var(--soft);border-radius:4px;overflow:hidden}
.ce-bar span{display:block;height:100%;background:#cfc6bd;border-radius:4px;transition:width .12s}
.ce-row.is-target .ce-bar span{background:var(--red)}
.ce-row.is-target .ce-p{color:var(--red);font-weight:700}
.ce-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.ce-readout>div{padding:10px 12px;border-radius:8px;background:var(--tint)}
.ce-readout small{display:block;font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.ce-readout strong{font-size:1.25rem}
.ce-readout p{grid-column:1/-1;margin:0;font-size:.78rem}
.ce-lse{color:var(--muted)}
.tone-good{color:var(--green)}.tone-ok{color:var(--gold)}.tone-bad{color:var(--red)}

.attn-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start}
.attn-grid{max-width:400px;display:grid;grid-template-columns:48px repeat(var(--n),minmax(0,1fr));gap:3px;font-size:.72rem}
.attn-col{text-align:center;color:var(--muted);padding-bottom:3px}
.attn-rowlabel{border:0;background:none;text-align:right;color:var(--muted);padding:0 6px 0 0;font-size:.72rem}
.attn-rowlabel.is-q{color:var(--red);font-weight:800}
.attn-cell{aspect-ratio:1;display:grid;place-items:center;border-radius:4px;cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:.66rem;background:color-mix(in srgb,var(--red) calc(var(--w)*100%),#fbf8f4);color:var(--ink)}
.attn-cell[style*="--w:0.5"],.attn-cell[style*="--w:0.6"],.attn-cell[style*="--w:0.7"],.attn-cell[style*="--w:0.8"],.attn-cell[style*="--w:0.9"],.attn-cell[style*="--w:1"]{color:#fff}
.attn-cell.masked{background:repeating-linear-gradient(135deg,#f2f1ef 0 4px,#e8e6e2 4px 8px)}
.attn-cell.is-q{outline:2px solid var(--ink);outline-offset:-1px}
.attn-detail small{display:block;font-size:.78rem;margin-bottom:8px}
.attn-bar{display:grid;grid-template-columns:52px minmax(0,1fr) 38px;align-items:center;gap:8px;font-size:.76rem;margin:4px 0}
.attn-bar i{display:block;height:12px;border-radius:3px;background:var(--red);min-width:1px}
.attn-bar.masked{opacity:.4}
.attn-bar b{font-weight:400;text-align:right;color:var(--muted)}
.attn-detail p{font-size:.76rem;margin:8px 0 0;color:#4b4845}
.attn-detail .warn{color:var(--gold);font-weight:700}

@media(max-width:720px){
 .widget{padding:15px}
 .attn-layout{grid-template-columns:1fr}
 .ce-row{grid-template-columns:54px minmax(0,1fr) 40px;row-gap:3px}
 .ce-bar{grid-column:1/3}
 .ce-readout{grid-template-columns:1fr 1fr}
 .extra-figure{padding:10px}
}
@media(max-width:720px){
 .figure-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
 .figure .figure-scroll img,.inline-figure .figure-scroll img{width:660px;max-width:none}
 .extra-figure .figure-scroll img{width:100%;max-width:100%}
 .figure-scroll+figcaption::before{content:"← swipe to see the whole diagram →";display:block;font-size:.66rem;color:var(--muted);margin-bottom:3px}
 .extra-figure .figure-scroll+figcaption::before{content:none}
}

/* Chapter icons replace the chapter number in the lesson header and directory */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.chapter-icon{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:6px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line);color:#9d5950}
.chapter-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.toc-chapter-title.active .chapter-icon,.lesson-chapter .chapter-icon{background:var(--red);box-shadow:none;color:#fff}
.lesson-chapter{display:inline-flex;align-items:center;gap:8px}

/* Overview hero title */
.overview h1.hero-title{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;max-width:none;margin:10px 0 6px;font-size:inherit;letter-spacing:normal;line-height:1}
.hero-course{font-size:clamp(3.6rem,10vw,6.6rem);font-weight:900;letter-spacing:-.065em;line-height:.82;color:var(--red);background:linear-gradient(140deg,#5f0e0e 0%,#8c1515 45%,#c2372a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.04em}
.hero-name{display:flex;flex-direction:column;gap:2px;padding:0 0 3px 22px;border-left:3px solid var(--red);font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;font-weight:500;font-size:clamp(1.45rem,3.1vw,2.25rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.hero-name em{font-style:italic;color:#7a6c62}
.hero-tagline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:22px 0 20px;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-size:clamp(1.3rem,2.6vw,1.75rem);color:#5a5550}
.tg-byte{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;font-size:.72em;padding:3px 9px;border:1px solid var(--line);border-radius:6px;background:var(--tint);color:var(--ink)}
.tg-flow{display:inline-flex;align-items:center;gap:5px}
.tg-flow i{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;font-size:.48em;padding:3px 6px;border-radius:4px;background:#f0e3e0;color:var(--red)}
.tg-flow i:nth-child(2){opacity:.8}.tg-flow i:nth-child(3){opacity:.6}.tg-flow i:nth-child(4){opacity:.42}
.tg-flow b{position:relative;width:44px;height:2px;background:linear-gradient(90deg,#e8cfc9,var(--red))}
.tg-flow b::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--red);border-right:0}
.tg-ai{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-style:normal;font-weight:900;font-size:1.35em;letter-spacing:-.05em;line-height:1;background:linear-gradient(120deg,#8c1515,#d24a30);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.05em}
@media(max-width:430px){
 .overview h1.hero-title{font-size:inherit}
 .hero-name{padding-left:14px}
 .tg-flow i:nth-child(n+3){display:none}
}

/* ---- Layout v2: shared left contents on every page, sticky; right "on this page" rail on wide screens ---- */
.lesson-shell,.overview-shell{max-width:1320px;margin:0 auto;padding:30px 28px 80px}
.overview-shell .overview{max-width:none;margin:0;padding:8px 0 0;min-width:0}
.toc-chapter{margin:0 0 4px}
.toc-chapter>summary{list-style:none;cursor:pointer;padding:6px 6px 6px 0;border-radius:6px;margin-bottom:0}
.toc-chapter>summary::-webkit-details-marker{display:none}
.toc-chapter>summary:hover{color:var(--red)}
.toc-chapter-name{flex:1;min-width:0}
.toc-chapter-count{font-size:.66rem;font-weight:600;color:#9b9690;font-variant-numeric:tabular-nums}
.toc-chapter>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid #9b9690;border-bottom:1.5px solid #9b9690;transform:rotate(-45deg);margin:0 4px 0 2px;transition:transform .15s}
.toc-chapter[open]>summary::after{transform:rotate(45deg)}
.toc-chapter ol{margin:2px 0 8px 11px}
.directory-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.directory-home{font-size:.78rem;font-weight:750;color:var(--ink);text-decoration:none}
.directory-home:hover,.directory-home.current{color:var(--red)}
.directory-top .toc-legend{margin:0}
@media(min-width:761px){
 .study-layout{grid-template-columns:236px minmax(0,1fr);gap:44px}
 .desktop-directory{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
.page-rail{display:none}
@media(min-width:1180px){
 .lesson-shell .study-layout{grid-template-columns:236px minmax(0,780px) 160px;gap:44px}
 .page-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:18px;align-self:start;font-size:.74rem;padding-left:14px;border-left:1px solid var(--line)}
 .page-rail strong{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
 .page-rail a{color:var(--muted);text-decoration:none;padding:4px 0 4px 10px;margin-left:-15px;border-left:2px solid transparent}
 .page-rail a:hover{color:var(--red)}
 .page-rail a.active{color:var(--red);border-left-color:var(--red);font-weight:700}
}
.lesson-section{scroll-margin-top:18px}
#try>.widget:last-child,#try>.figure:last-child{margin-bottom:0}
#try{border-top:0;padding-top:0}
.concept-visual{margin-top:18px}

/* Overview v2 */
.overview .lede{max-width:640px}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.hero-progress{display:flex;flex-direction:column;gap:5px;font-size:.76rem;color:var(--muted);min-width:170px}
.hero-progress strong{color:var(--ink)}
.hero-progress i{display:block;height:5px;border-radius:9px;background:var(--soft);overflow:hidden}
.hero-progress b{display:block;height:100%;background:var(--green);border-radius:9px}
.section-intro{font-size:.9rem;color:var(--muted);margin:-4px 0 18px;max-width:640px}
.stage-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;counter-reset:stage}
.stage-card a{display:flex;flex-direction:column;gap:10px;height:100%;padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.stage-card a:hover,.stage-card a:focus-visible{border-color:#d6b3ad;box-shadow:0 6px 18px rgba(80,30,20,.07);transform:translateY(-2px)}
.stage-top{display:flex;align-items:center;gap:10px}
.stage-top .chapter-icon{width:30px;height:30px;border-radius:8px;background:var(--red);box-shadow:none;color:#fff}
.stage-top .chapter-icon svg{width:17px;height:17px}
.stage-top div{flex:1;min-width:0;display:flex;flex-direction:column}
.stage-top small{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stage-top strong{font-size:.95rem;line-height:1.25}
.stage-done{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.stage-card img{display:block;width:100%;height:auto;border-radius:8px;background:var(--tint)}
.stage-io{display:flex;align-items:center;gap:8px;font-size:.74rem;line-height:1.35}
.stage-io span{flex:1;padding:6px 8px;border-radius:6px;background:var(--tint)}
.stage-io span:last-child{background:#f3e6e3;color:var(--red);font-weight:700}
.stage-io b{color:var(--red)}
.stage-meta{font-size:.72rem;color:var(--muted);margin-top:auto}
.stage-bar{height:4px;border-radius:9px;background:var(--soft);overflow:hidden}
.stage-bar b{display:block;height:100%;background:var(--green)}
.problem-details summary .chapter-icon,.problem-groups h3 .chapter-icon{width:20px;height:20px;vertical-align:-5px;margin-right:4px}
.problem-groups h3 .chapter-icon svg{width:12px;height:12px}
.source-block .notice{margin:0 0 12px}
.source-note{font-size:.84rem;color:var(--muted);margin:0}
.source-note a{margin-left:10px;white-space:nowrap}
.overview-block .eyebrow{display:none}
@media(max-width:760px){
 .lesson-shell,.overview-shell{padding:20px 18px 60px}
 .stage-grid{grid-template-columns:1fr}
}
.header-inner{max-width:1320px}
.toc-chapter-title{color:#4f4b47}
.toc-chapter-title.active{color:var(--red)}
.toc-chapter-title:not(.active) .chapter-icon{color:#8a827b}
@media(min-width:900px){
 .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .stage-card a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"top top" "img io" "img meta" "img bar";align-items:start;column-gap:14px;row-gap:8px}
 .stage-top{grid-area:top}.stage-card img{grid-area:img;align-self:center}.stage-io{grid-area:io;flex-direction:column;align-items:stretch;gap:4px}.stage-io b{text-align:center;line-height:1}.stage-meta{grid-area:meta;margin-top:0}.stage-bar{grid-area:bar;align-self:end}
 .stage-card.stage-wide{grid-column:1/-1}
 .stage-card.stage-wide a{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);grid-template-areas:"top top top" "img io meta" "img io bar"}
 .stage-card.stage-wide .stage-io{flex-direction:row;align-items:center}
}
.toc-chapter-title .toc-chapter-name{color:inherit;font-size:.74rem}
.toc-chapter-title .toc-chapter-count{color:#9b9690}
@media(min-width:900px){
 .stage-card.stage-wide a{grid-template-columns:300px minmax(0,1fr);grid-template-areas:"top top" "img blurb" "img io" "img meta" "img bar"}
}
.stage-blurb{grid-area:blurb;margin:0;font-size:.86rem;line-height:1.55;color:#4b4845}
@media(max-width:720px){.inline-figure .figure-scroll img{width:560px}}
.overview-shell>.campus-cover{margin:0 0 26px}

/* Collapsible contents */
.toc-hide{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);cursor:pointer}
.toc-hide:hover{color:var(--red);border-color:#d6b3ad}
.toc-hide svg,.toc-show svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.directory-top{align-items:center;margin-bottom:4px}
.desktop-directory>.toc-legend{margin:0 0 10px}
.toc-show{display:none}
@media(min-width:761px){
 .study-layout{grid-template-columns:208px minmax(0,1fr);gap:36px}
 .desktop-directory{padding-right:12px}
 .toc-lesson{font-size:.72rem;min-height:0;padding:4px 4px 4px 9px;grid-template-columns:20px minmax(0,1fr) 12px}
 .toc-chapter-title .toc-chapter-name{font-size:.72rem}
 .toc-chapter-title .chapter-icon{width:22px;height:22px}
 html[data-toc=hidden] .desktop-directory{display:none}
 html[data-toc=hidden] .study-layout{grid-template-columns:minmax(0,1fr)}
 html[data-toc=hidden] .toc-show{display:inline-flex;align-items:center;gap:7px;position:fixed;left:16px;bottom:18px;z-index:20;padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:#fff;box-shadow:0 4px 14px rgba(40,20,10,.12);color:var(--red);font:inherit;font-size:.78rem;font-weight:750;cursor:pointer}
 html[data-toc=hidden] .toc-show:hover{border-color:var(--red)}
 html[data-toc=hidden] .overview-shell .overview{max-width:1040px;margin:0 auto}
}
@media(min-width:1180px){
 .lesson-shell .study-layout{grid-template-columns:208px minmax(0,780px) 150px;gap:40px}
 html[data-toc=hidden] .lesson-shell .study-layout{grid-template-columns:minmax(0,800px) 150px;justify-content:center}
}
@media print{.toc-show{display:none!important}}

/* Chapter 1–2 widgets */
.widget textarea,.widget input[type=text]{width:100%;box-sizing:border-box;font:inherit;font-size:.86rem;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--tint);color:var(--ink);resize:vertical}
.widget input[type=text]{flex:1;min-width:200px;width:auto}
.w-label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.w-note{font-size:.72rem;color:var(--gold);margin:6px 0 0}
.u8-cells{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.u8-cell{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 6px;border-radius:8px;background:var(--tint);min-width:52px}
.u8-glyph{font-size:1.25rem;line-height:1.2}
.u8-cp{font-size:.62rem;color:var(--blue)}
.u8-bytes{display:flex;gap:2px}
.u8-bytes i{font-style:normal;font-size:.64rem;padding:2px 3px;border-radius:3px;background:#fff;color:var(--red)}
.u8-cell.n2{background:#f6ece9}.u8-cell.n3{background:#f3e2dd}.u8-cell.n4{background:#efd6cf}
.u8-sum{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem;color:var(--muted)}
.u8-sum strong{color:var(--ink)}
.u8-key i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin:0 3px 0 8px;background:var(--tint)}
.u8-key i.n2{background:#f6ece9}.u8-key i.n3{background:#f3e2dd}.u8-key i.n4{background:#efd6cf}
.bpe-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr);gap:18px;margin-top:4px}
.bpe-word{display:flex;align-items:center;gap:3px;margin:0 0 6px;flex-wrap:wrap}
.bpe-word b{font-weight:700;font-size:.74rem;margin-left:6px;color:var(--muted)}
.tok{display:inline-block;padding:3px 7px;border-radius:5px;background:var(--blue-tint);color:var(--blue);font-family:ui-monospace,Menlo,monospace;font-size:.78rem;font-weight:700;white-space:pre}
.tok.merged{background:#f3e6e3;color:var(--red)}
.bpe-pair{display:grid;grid-template-columns:62px minmax(0,1fr) 22px;align-items:center;gap:6px;font-size:.76rem;margin:0 0 4px}
.bpe-pair i{display:block;height:11px;border-radius:3px;background:#d9d1c9}
.bpe-pair.win i{background:var(--red)}.bpe-pair.win span{color:var(--red);font-weight:800}
.bpe-pair.tie i{background:var(--gold)}
.bpe-pair b{font-weight:400;color:var(--muted);text-align:right}
.bpe-merges{margin:0;padding-left:22px;font-size:.76rem;max-height:210px;overflow:auto}
.bpe-merges li{margin:0 0 3px}
.bpe-merges li span{display:inline-block;min-width:66px;padding:1px 6px;border-radius:4px;background:#f3e6e3;color:var(--red);font-weight:700}
.bpe-merges li.new span{background:var(--red);color:#fff}
.bpe-merges li small{color:var(--muted);margin-left:6px}
.bpe-merges li.empty{list-style:none;margin-left:-22px;color:var(--muted)}
.tok-out{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 10px;padding:10px;border-radius:8px;background:#fff;border:1px dashed var(--line)}
.tok-out .tok{font-weight:600}
.tok-out .tok sub{font-size:.6rem;color:var(--muted);margin-left:3px;font-weight:400}
.tok.c0{background:#e2eaf3;color:#244a70}.tok.c1{background:#f3e6e3;color:#7a1818}.tok.c2{background:#e3ece6;color:#35533f}.tok.c3{background:#f6ead3;color:#7a4c0c}.tok.c4{background:#ece6f3;color:#4c3a70}
.tok.byte{outline:1px dashed #b1aaa3}
.tok.special{background:var(--gold);color:#fff}
.tok-stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.78rem;color:var(--muted)}
.tok-stats strong{color:var(--ink)}
@media(max-width:720px){.bpe-layout{grid-template-columns:1fr}}
/* Stanford panorama shown on every page */
.cover-band{max-width:1320px;margin:0 auto;padding:22px 28px 0}
.cover-band .campus-cover{margin:0}
.lesson-shell,.overview-shell{padding-top:18px}
@media(max-width:760px){.cover-band{padding:14px 18px 0}}
@media print{.cover-band{display:none}}
.lesson-section .widget p{font-size:.78rem;margin:0}
.lesson-section .widget .widget-head p{font-size:.84rem;margin:6px 0 0;color:var(--muted)}
.lesson-section .widget .widget-note{font-size:.7rem;margin:12px 0 0;color:var(--muted)}
.lesson-section .widget .attn-detail p{font-size:.76rem;margin:8px 0 0}
.lesson-section .widget .w-note{font-size:.72rem;margin:6px 0 0;color:var(--gold)}
.footer-author{display:block;margin-bottom:5px;color:var(--ink)}
.footer-author a{color:var(--red)}

/* Chapter 3 widgets */
.emb-sent{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px}
.emb-sent button{border:0;cursor:pointer}
.emb-sent sub{font-size:.6rem;opacity:.7;margin-left:2px}
.emb-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.emb-row{display:flex;align-items:center;gap:2px;margin:0 0 2px;border-radius:4px;opacity:.55}
.emb-row.on{opacity:1}
.emb-row.pick{outline:2px solid var(--red);outline-offset:1px}
.emb-row b{width:46px;font-size:.66rem;color:var(--muted);font-weight:700}
.emb-row.on b{color:var(--red)}
.emb-cell{flex:1;text-align:center;font-size:.62rem;padding:4px 0;border-radius:3px;background:color-mix(in srgb,var(--red) calc(max(var(--v),0)*60%),color-mix(in srgb,var(--blue) calc(max(calc(var(--v)*-1),0)*60%),#f7f4f0))}
.rms-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.rms-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.rms-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.rms-track{position:relative;width:100%;height:120px;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.rms-track i{position:absolute;left:18%;right:18%;background:var(--blue);border-radius:3px}
.rms-track i.neg{background:#8fb0cf}
.rms-bars.out .rms-track i{background:var(--green)}.rms-bars.out .rms-track i.neg{background:#9dbba8}
.rms-col input[type=range]{width:100%}
.rms-col span{font-size:.64rem;color:var(--muted)}
.lesson-section .widget .rms-read{margin-top:10px;color:var(--muted)}
.widget .plot{display:block;width:100%;max-width:560px;height:auto;margin:6px 0 10px}
.plot .axis{stroke:var(--line);stroke-width:1}
.plot path{fill:none;stroke-width:2.5}
.plot .c-red{stroke:var(--red)}.plot .c-blue{stroke:var(--blue)}.plot .c-grey{stroke:#b9b2ab}.plot .c-green{stroke:var(--green)}.plot .c-gold{stroke:var(--gold)}
.plot .dashed{stroke-dasharray:5 4;stroke-width:1.8}
.plot .lbl,.rope-planes .lbl{font-size:12px;font-weight:700;font-family:Inter,Arial,sans-serif}
.plot .lbl.red,.rope-planes .lbl.red{fill:var(--red)}.plot .lbl.blue,.rope-planes .lbl.blue{fill:var(--blue)}.plot .lbl.grey{fill:#9b9690}.plot .lbl.green{fill:var(--green)}.plot .lbl.gold{fill:var(--gold)}
.plot .dot{fill:var(--red)}.plot .guide{stroke:var(--red);stroke-dasharray:3 3}
.rope-planes{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 10px}
.rope-planes figure{margin:0;text-align:center}
.rope-planes svg{width:170px;height:170px}
.rope-planes figcaption{font-size:.72rem;color:var(--muted)}
.rope-planes .ring{fill:#faf7f2;stroke:var(--line)}
.rope-planes .v-q{stroke:var(--red);stroke-width:3;stroke-linecap:round}
.rope-planes .v-k{stroke:var(--blue);stroke-width:3;stroke-linecap:round}
@media(max-width:720px){.emb-layout,.rms-layout{grid-template-columns:1fr}}
.ce-readout small{text-transform:none;letter-spacing:0;font-size:.72rem}

/* Chapter 4–7 widgets */
.w-btn{font:inherit;font-size:.78rem;font-weight:700;padding:6px 12px;border:1px solid var(--red);border-radius:99px;background:var(--red);color:#fff;cursor:pointer}
.w-btn.ghost{background:#fff;color:var(--red)}
.w-btn:disabled{opacity:.4;cursor:default}
.plot .contour{fill:none;stroke:#e4ddd5;stroke-width:1.2}
.plot .start{fill:#fff;stroke:var(--ink);stroke-width:2}
.opt-plot path.sgd,.opt-plot path.adam{stroke-width:2.2;stroke-linejoin:round}
.clip-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:center}
.clip-plot{max-width:240px}
.clip-plot .ball{fill:var(--green-tint);stroke:var(--green);stroke-width:1.5}
.clip-plot .g-raw{stroke:var(--gold);stroke-width:2.5;stroke-dasharray:6 4;color:var(--gold);marker-end:url(#clip-arrow)}
.clip-plot .g-clip{stroke:var(--red);stroke-width:4;color:var(--red);marker-end:url(#clip-arrow)}
.batch-stream{display:flex;flex-wrap:wrap;gap:3px;margin:4px 0 12px}
.bt{display:inline-block;padding:3px 6px;border-radius:4px;background:var(--soft);font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:var(--ink)}
.bt sub{font-size:.55rem;color:var(--muted);margin-left:2px}
.bt.eot{background:var(--gold-tint);color:var(--gold)}
.bt.in-red{box-shadow:inset 0 -3px 0 var(--red)}.bt.in-blue{box-shadow:inset 0 -3px 0 var(--blue)}.bt.in-green{box-shadow:inset 0 -3px 0 var(--green)}
.batch-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 10px;margin:0 0 10px;align-items:center}
.batch-row>b{grid-row:span 2;font-size:.72rem}
.batch-row>div{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.batch-row .lbl{width:14px;font-size:.72rem;font-weight:700}
.batch-row .bt.ghost{visibility:hidden;width:18px;padding:3px 0}
.batch-row.red>b,.batch-row.red .lbl{color:var(--red)}.batch-row.red .bt{background:#f3e6e3}.batch-row.red .bt.tgt{background:#e2b9b2}
.batch-row.blue>b,.batch-row.blue .lbl{color:var(--blue)}.batch-row.blue .bt{background:#e2eaf3}.batch-row.blue .bt.tgt{background:#b8cadd}
.batch-row.green>b,.batch-row.green .lbl{color:var(--green)}.batch-row.green .bt{background:#e3ece6}.batch-row.green .bt.tgt{background:#bcd0c2}
.gen-text{padding:12px;border-radius:8px;background:#fff;border:1px dashed var(--line);font-size:.86rem;line-height:1.8;margin:4px 0 12px}
.gen-text .last{background:var(--red);color:#fff;border-radius:4px;padding:1px 5px}
.gd-row{display:grid;grid-template-columns:70px minmax(0,1fr) 110px;gap:8px;align-items:center;font-size:.76rem;margin:0 0 4px}
.gd-row i{display:block;height:13px;background:var(--soft);border-radius:3px;overflow:hidden}
.gd-row b{display:block;height:100%;background:var(--red);border-radius:3px}
.gd-row.cut b{background:#cfc6bd}.gd-row.cut span,.gd-row.cut em{color:#a7a39e}
.gd-row em{font-style:normal;color:var(--muted)}
.plot .ghost-run{stroke-width:1.5;opacity:.7}
.audit-list{list-style:none;margin:0;padding:0}
.audit-list li{margin:0 0 7px;font-size:.84rem}
.audit-list label{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.audit-list input{accent-color:var(--green);margin-top:3px}
.lesson-section .widget .audit-count{font-size:.8rem;font-weight:700;color:var(--green);margin-top:8px}
@media(max-width:720px){.clip-layout{grid-template-columns:1fr}.gd-row{grid-template-columns:60px minmax(0,1fr) 90px}}
.widget .w-btn{font-size:.78rem;line-height:1.2}

/* Hero v3: text left, CS336 artwork right */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:12px 36px;align-items:center;margin-bottom:8px}
.hero-text{min-width:0}
.overview h1.hero-title{margin:12px 0 4px}
.hero .hero-name{font-size:clamp(2.1rem,3.6vw,3.2rem);gap:4px;padding:2px 0 6px 20px;line-height:1.02}
.hero .hero-tagline{margin:22px 0 18px}
.hero .lede{font-size:1rem;margin-bottom:22px}
.hero-art{margin:0}
.hero-art img{display:block;width:100%;height:auto}
@media(max-width:900px){
 .hero{grid-template-columns:1fr}
 .hero-art{order:-1;max-width:520px}
}