@font-face{font-family:Source Serif;src:url(fonts/source-serif-4-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Source Serif;src:url(fonts/source-serif-4-600.woff2) format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:light;accent-color:#3f6b53;scrollbar-color:#c7cfc2 transparent;--ink:#202d29;--muted:#5e6a63;--muted-strong:#4c574f;--forest:#254d3d;--accent:#b5c999;--line:#dde2d9;--paper:#fafbf7;--sidebar:300px;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--serif:'Source Serif',Georgia,serif}
*{box-sizing:border-box}::selection{background:#d9e4c9;color:#1b2f24}::-moz-selection{background:#d9e4c9;color:#1b2f24}html{scroll-behavior:smooth;scroll-padding-top:104px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #477eaa;outline-offset:4px}a{color:inherit;text-decoration:none}button{color:inherit}img{max-width:100%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;z-index:100;top:-100px;left:20px;padding:12px 18px;background:var(--forest);color:white}.skip-link:focus{top:15px}.sidebar{width:var(--sidebar);height:100dvh;position:fixed;inset:0 auto 0 0;background:#f2f4ee;border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c7cfc2 transparent;z-index:30;padding:31px 20px 18px}.identity{display:flex;gap:12px;align-items:center;line-height:1.3;font-weight:650;font-size:14px;margin:0 4px 32px}.identity small{display:block;font-size:8px;font-weight:600;letter-spacing:1.8px;color:var(--muted);margin-top:7px}.identity-mark{display:flex;align-items:center;justify-content:center;width:35px;height:38px;background:var(--forest);border-radius:5px;color:#e4ecd7;font:600 28px var(--serif);flex-shrink:0}.identity-mark span{font-size:22px;margin-left:1px;color:var(--accent)}.search-box{display:flex;align-items:center;gap:9px;border:1px solid #d7ddd2;background:#f9faf6;border-radius:6px;padding:8px 11px;margin-bottom:26px;color:var(--muted)}.search-box>span{font-size:21px;line-height:1}.search-box input{caret-color:#3f6b53;width:100%;min-width:0;border:0;background:transparent;outline:none;font-size:12px;color:var(--ink)}.search-box kbd{font-size:10px;border:1px solid #d7ddd2;border-radius:3px;padding:0 4px}.contents-label{font-size:9px;letter-spacing:1.5px;font-weight:650;color:var(--muted);display:flex;align-items:center;justify-content:space-between;margin:0 10px 12px}.contents-label button{border:0;background:none;font-size:18px;padding:0 5px}.toc-link{display:block;font-size:12px;line-height:1.5;padding:8px 11px;border-radius:4px;color:#55625b;overflow-wrap:anywhere}.toc-link:hover{background:#e5ebdf;color:var(--forest)}.toc-link.active{background:var(--forest);color:#fff;font-weight:550;box-shadow:0 3px 8px #15352412}.toc-link.completed:not(.active)::after{content:'✓';font-size:10px;color:#477d3e;margin-left:6px}.overview{font-size:13px;padding:10px 12px}.toc-area{margin-top:24px}.toc-area>h2{font:650 10px/1.6 var(--sans);letter-spacing:.7px;text-transform:uppercase;margin:0 9px 10px;display:flex;gap:10px;color:var(--muted-strong)}.toc-area>h2>span{font-weight:500;color:var(--muted)}.part-intro{font-size:11px;color:var(--muted);padding-top:4px;padding-bottom:5px;margin-left:25px}.toc-chapter{border:0;margin:0;background:none;padding:0}.toc-chapter>summary{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;list-style:none;font-size:12px;line-height:1.5;cursor:pointer;font-weight:550;border-radius:4px}.toc-chapter>summary:hover{background:#e8ece2}.toc-chapter>summary::-webkit-details-marker{display:none}.chapter-number{font-variant-numeric:tabular-nums;font-size:10px;font-weight:400;color:var(--muted);line-height:1.9;min-width:16px}.chevron{margin-left:auto;color:var(--muted);transition:transform .15s;font-size:18px;line-height:1.1}.toc-chapter[open]>summary>.chevron{transform:rotate(90deg)}.toc-lessons{margin:0 0 12px 16px;padding-left:10px;border-left:1px solid #d8dfd0}.toc-lessons>.toc-link{font-size:11px;padding:7px 9px;margin:1px 0}.toc-section{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:14px 8px 5px;font-weight:600}.toc-headings{list-style:none;padding:5px 0 7px 15px;margin:0}.toc-headings a{display:block;font-size:10px;line-height:1.5;color:var(--muted);padding:5px 4px;border-left:2px solid transparent;padding-left:8px}.toc-headings .depth-3{padding-left:10px}.toc-headings a:hover,.toc-headings a.current-heading{color:var(--forest);border-left-color:#7d9960;background:#e9eee3}.shelf-note{font-size:10px;color:var(--muted);margin:0 9px 5px}.reference-area{border-top:1px solid var(--line);padding-top:20px}.reference-area summary{font-size:11px}.rail-footer{font-size:8px;letter-spacing:.7px;color:var(--muted);margin:34px 9px 10px;line-height:2}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#648152;margin-right:8px;vertical-align:middle}.rail-footer button{border:0;background:none;color:var(--muted);display:block;font-size:10px;padding:5px 0;text-decoration:underline;text-underline-offset:4px}#search-results{margin:0 0 20px}#search-results>a{display:block;padding:12px 8px;border-bottom:1px solid var(--line);font-size:12px}#search-results small{display:block;font-size:10px;color:var(--muted);margin-top:3px}#search-results p{font-size:12px;color:var(--muted)}.reading-shell{margin-left:var(--sidebar);min-height:100vh}.reading-bar{font-variant-numeric:tabular-nums;position:sticky;top:0;z-index:20;height:66px;background:#fafbf7f5;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 48px;font-size:11px;color:var(--muted)}.reading-bar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.3px}.reading-controls{display:flex;align-items:center;gap:22px;white-space:nowrap;font-size:10px}.reading-controls button{border:1px solid var(--line);background:transparent;padding:5px 9px;border-radius:4px;font-size:10px}.read-progress{position:sticky;top:65px;z-index:21;height:2px}.read-progress>span{display:block;height:2px;width:0;background:#799761}.mobile-bar,.mobile-close{display:none}main{max-width:1120px;margin:0 auto;padding:44px 64px 24px;outline:none}.reader-meta{font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:9px;letter-spacing:1.25px;color:var(--muted);margin:0 0 28px;text-transform:uppercase}.reader-meta>span:first-child{color:#3f604a;font-weight:600}.lesson-body{min-width:0}.lesson-body h1{font:400 clamp(36px,3.5vw,54px)/1.1 var(--serif);letter-spacing:-1.5px;max-width:830px;margin:0 0 32px;color:#21362b;text-wrap:balance}.lesson-body h2{font:400 30px/1.25 var(--serif);letter-spacing:-.6px;margin:52px 0 20px;color:#284032;scroll-margin-top:20px}.lesson-body h3{font-size:17px;line-height:1.4;margin:34px 0 13px;font-weight:600;scroll-margin-top:20px}.lesson-body h4{font-size:15px;margin:25px 0 10px}.lesson-body p{margin:16px 0}.lesson-body p,.lesson-body li{max-width:72ch}.lesson-body ul,.lesson-body ol{padding-left:24px;margin:18px 0}.lesson-body li{margin:8px 0;padding-left:5px}.lesson-body strong{font-weight:650}.lesson-body hr{border:0;border-top:1px solid var(--line);margin:36px 0}.lesson-body blockquote{border-left:3px solid #78915b;border-radius:0 8px 8px 0;margin:27px 0;padding:16px 25px;background:#eef2e7;font-family:var(--serif);font-size:21px;line-height:1.6;color:#354d34}.lesson-body blockquote p{margin:3px 0}.lesson-body code{font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;background:#eaf0e4;border-radius:3px;padding:2px 5px;overflow-wrap:anywhere}.lesson-body pre{position:relative;overflow:auto;background:#202e28;color:#ecf2e6;border-radius:7px;margin:22px 0;padding:23px 24px;font-size:12px;line-height:1.9;tab-size:4;max-height:650px;scrollbar-width:thin;scrollbar-color:#647260 transparent}.lesson-body pre code{padding:0;background:none;color:inherit;font-size:12px;white-space:pre;overflow-wrap:normal}.code-file{margin:25px 0;border:1px solid #cfd8c8;border-radius:8px;overflow:hidden;max-width:100%}.code-file figcaption{display:flex;justify-content:space-between;gap:15px;background:#eaf0e3;padding:13px 18px;font:500 11px var(--sans);color:#456042}.code-file pre{margin:0;border-radius:0;max-height:440px}.copy-code{position:absolute;right:10px;top:9px;font-size:10px;background:#35473b;border:1px solid #596b55;color:#dce9d2;border-radius:4px;padding:4px 8px;opacity:0;transition:opacity .15s}pre:hover .copy-code,pre:focus-within .copy-code{opacity:1}.tablewrap{max-width:100%;overflow-x:auto;margin:25px 0;border:1px solid #d5dece;border-radius:7px}.lesson-body table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;line-height:1.6}.lesson-body th{background:#edf1e7;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#4d6445;font-weight:650;padding:13px 16px}.lesson-body td{font-variant-numeric:tabular-nums;padding:14px 16px;border-top:1px solid #e0e6d9;vertical-align:top;min-width:120px}.lesson-body tr:nth-child(even) td{background:#f5f7f0}.lesson-body td code{font-size:11px}.lesson-body details{margin:28px 0;border:1px solid #d3ddca;border-radius:8px;background:#f5f7f0;padding:0 23px}.lesson-body details>summary{font-size:13px;font-weight:600;cursor:pointer;padding:19px 0;color:#3b5739;list-style:none;display:flex;gap:14px;align-items:center}.lesson-body details>summary::before{content:'+';font-size:19px;font-weight:400;color:var(--muted)}.lesson-body details[open]>summary::before{content:'−'}.lesson-body details>summary::-webkit-details-marker{display:none}.lesson-body details[open]>summary{border-bottom:1px solid var(--line);margin-bottom:23px}.lesson-body details[open]{padding-bottom:22px}.lesson-body details h2{font-size:26px}.lesson-body details h3{font-size:17px}.mer,.figwrap{margin:32px 0;max-width:100%;overflow:auto;background:#faf9f7;border:1px solid #e0e3d8;border-radius:8px;padding:16px;scrollbar-width:thin}.mer img{max-width:none;display:block;margin:auto;min-width:0}.figwrap img{display:block;width:100%;height:auto}.visual-toolbar{display:flex;justify-content:flex-end;gap:10px;margin:-22px 0 25px;font-size:10px;color:var(--muted)}.visual-toolbar button{background:none;border:0;font-size:10px;padding:2px 4px;text-decoration:underline;text-underline-offset:3px}.mk{border-left:3px solid #869c6a;background:#eef2e8;padding:32px 19px 16px!important;position:relative;border-radius:0 6px 6px 0}.mk::before{content:attr(data-mk);position:absolute;top:10px;left:19px;text-transform:uppercase;letter-spacing:1px;font-size:9px;font-weight:650;color:#5d7049}.mk-changed,.mk-followup{background:#f5f0e4;border-color:#b59963}.mk-depth{background:#e7eee9;border-color:#3f6b53}.mk-depth::before{color:#1f4a39}.mk-invariant{background:#eaf0e4;border-color:#6d8449}.mk-invariant::before{color:#4a5e38}.mk-redraw{background:#eef2e8;border-color:#869c6a}.mk-redraw::before{color:#5d7049}.mk-aside{background:#f3f4f1;border-color:#cbd2c6}.mk-aside::before{color:#5b6560}.mk-changed::before,.mk-followup::before{color:#836a3a}.sources{margin-top:45px!important}.sources a{text-decoration:underline;text-underline-offset:4px;font-size:12px}.citation{color:#3f644a}.concept-reference{color:inherit}.step-navigation{border-top:1px solid #cdd7c3;display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:65px;padding:28px 0 40px}.step-navigation a{display:flex;flex-direction:column;gap:9px;border-radius:5px}.step-navigation a span,.course-end>span{font-size:9px;letter-spacing:1px;color:var(--muted-strong);font-weight:600}.step-navigation a strong{font-size:14px;line-height:1.5;max-width:300px;font-weight:500}.next-step{align-items:flex-end;text-align:right}.step-navigation a:hover strong{color:#4a7735;text-decoration:underline;text-underline-offset:5px}.course-end{display:flex;flex-direction:column;gap:10px}.course-end strong{font-size:14px}.course-end button{background:var(--forest);color:white;border:0;padding:12px;font-size:12px;border-radius:4px}.page-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;padding-top:20px;color:var(--muted);font-size:9px;letter-spacing:1px}.page-footer>span:last-child{letter-spacing:0}.chapter-lede{font:400 22px/1.65 var(--serif);color:#63705b;max-width:650px!important}.chapter-contract{padding:25px 28px;background:#edf2e5;border-left:2px solid #94aa77;margin:35px 0}.chapter-contract p{font-size:14px;margin-bottom:0}.chapter-outline{padding:0!important;list-style:none;margin:0!important}.chapter-outline li{display:flex;align-items:flex-start;gap:26px;border-bottom:1px solid var(--line);padding:20px 0;margin:0;max-width:none}.chapter-outline li>span{font:12px ui-monospace,monospace;color:var(--muted);min-width:25px;padding-top:5px}.chapter-outline h2{font:500 17px/1.4 var(--sans);letter-spacing:0;margin:0 0 5px}.chapter-outline p{font-size:12px;color:var(--muted);margin:0}.home main{max-width:1200px}.home .reader-meta{margin-bottom:50px}.home-hero{padding-bottom:62px;border-bottom:1px solid var(--line)}.eyebrow,.section-label{font-size:9px;letter-spacing:1.25px;font-weight:600;color:var(--muted-strong)}.eyebrow{margin-bottom:27px}.home-hero h1{font:400 clamp(48px,4.65vw,72px)/1.055 var(--serif);letter-spacing:-2.5px;margin-bottom:27px;max-width:900px}.home-hero h1 em{font-style:normal;color:#779069}.hero-lede{font-size:15px;line-height:1.85;color:#64715c;max-width:650px!important;margin:0!important}.hero-actions{display:flex;align-items:center;gap:24px;margin:31px 0 35px}.primary-button{background:var(--forest);color:#f2f7e8;border-radius:5px;padding:13px 21px;display:flex;align-items:center;gap:35px;font-size:12px;box-shadow:0 5px 12px #26483312}.primary-button:hover{background:#345e45}.primary-button span{font-size:19px}.hero-actions>span{font-size:10px;color:var(--muted)}.hero-stats{display:flex;gap:45px}.hero-stats>div{display:flex;align-items:baseline;gap:9px}.hero-stats strong{font-variant-numeric:tabular-nums;font:400 27px var(--serif);color:#526d43}.hero-stats span{font-size:10px;color:var(--muted)}.home-mechanism{padding:45px 0 0}.section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:35px;align-items:end;margin:18px 0 24px}.home h2{font:400 34px/1.18 var(--serif);letter-spacing:-.8px;margin:0}.section-heading p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.featured-diagram{border:1px solid #d9e1cf;border-radius:9px;background:#faf9f7;margin:0;overflow:hidden;box-shadow:0 12px 28px #2d442d05}.featured-diagram figcaption{display:flex;justify-content:space-between;gap:15px;padding:17px 22px;border-bottom:1px solid #e1e6d9;font-size:10px;color:var(--muted)}.diagram-label{font-size:9px;letter-spacing:1px;font-weight:600;color:#5c734e}.featured-diagram>img{display:block;width:100%;height:auto;padding:14px}.diagram-caption{border-top:1px solid #e4e8df;padding:15px 22px;font-size:10px;color:var(--muted)}.journey-section,.learning-contract{margin:58px 0 0}.journey-section>h2,.learning-contract>h2{margin-top:20px;margin-bottom:28px}.journey-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.journey-card{padding:27px 0;border-top:1px solid #d8e0d1;display:flex;gap:18px}.journey-number{font:400 16px var(--serif);color:var(--muted);margin-top:2px}.journey-card h3{font:500 16px/1.45 var(--sans);margin:0 0 9px}.journey-card p{font-size:12px;color:var(--muted);margin:0 0 12px}.journey-meta{font-size:9px;color:var(--muted)}.learning-contract{border-top:1px solid var(--line);padding-top:38px}.learning-contract>ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.learning-contract li{padding:0;margin:0}.learning-contract li>span{font-size:10px;color:var(--muted);display:block;margin-bottom:15px}.learning-contract li h3{font-size:13px;margin:0 0 9px}.learning-contract li p{font-size:12px;color:var(--muted);margin:0}.quiet-note{font-size:11px!important;color:var(--muted);border-top:1px solid var(--line);padding-top:23px;margin-top:30px!important}.visual-gallery figure{border-bottom:1px solid var(--line);padding-bottom:20px;margin:30px 0}.visual-gallery img{display:block;max-width:100%}.visual-gallery figcaption{font-size:12px;color:var(--muted)}
@media(min-width:1600px){:root{--sidebar:324px}.sidebar{padding-left:26px;padding-right:26px}main{padding-top:56px}.home-hero{padding-top:10px}}
@media(max-width:1200px){:root{--sidebar:270px}main{padding:35px 40px 24px}.reading-bar{padding:0 40px}.sidebar{padding-left:15px;padding-right:15px}.hero-stats{gap:25px}.hero-actions{gap:15px}.home-hero h1{font-size:55px}}
@media(max-width:1000px){:root{--sidebar:245px}main{padding:30px 28px 20px}.reading-bar{padding:0 28px}.reading-controls{gap:10px}#saved-progress{display:none}.hero-actions{flex-wrap:wrap}.hero-stats{gap:17px}.hero-stats>div{display:block}.hero-stats span{display:block}.home-hero h1{font-size:48px}.section-heading{grid-template-columns:1fr;gap:15px}.journey-grid{gap:0 24px}.toc-chapter>summary{font-size:11px}}
@media(max-width:760px){html{scroll-padding-top:118px}:root{--sidebar:300px}.sidebar{transform:translateX(-101%);transition:transform .2s;width:min(88vw,340px);padding:24px 20px;box-shadow:12px 0 35px #16321c12}.contents-open .sidebar{transform:translateX(0)}.reading-shell{margin:0}.mobile-bar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:25;height:56px;padding:0 20px;background:#f2f4ee;border-bottom:1px solid var(--line);font-size:11px}.mobile-bar button{border:0;background:none;padding:8px 0;font-size:15px;display:flex;align-items:center;gap:9px}.mobile-bar button span{font-size:11px}.mobile-close{display:block;position:absolute;top:8px;right:9px;border:0;background:none;font-size:24px;padding:0 7px}.drawer-backdrop:not([hidden]){display:block;position:fixed;inset:0;border:0;background:#15271766;backdrop-filter:blur(2px);z-index:29}.reading-bar{top:56px;height:45px;padding:0 22px;font-size:10px;gap:8px}.reading-controls button{font-size:9px;padding:3px 6px}.read-progress{top:100px}main{padding:29px 23px 20px}.reader-meta{font-size:8px;letter-spacing:.8px;gap:10px;margin-bottom:24px}.reader-meta span:last-child{font-size:7px;max-width:120px;text-align:right}.home .reader-meta{margin-bottom:34px}.eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:24px}.home-hero h1{font-size:clamp(40px,9.8vw,61px);letter-spacing:-1.5px;margin-bottom:23px}.hero-lede{font-size:13px}.desktop-only{display:none}.hero-actions{margin:26px 0 28px;gap:16px}.hero-actions>span{font-size:9px}.primary-button{padding:11px 17px;gap:24px;font-size:11px}.hero-stats{justify-content:space-between;gap:10px}.hero-stats strong{font-size:25px}.hero-stats span{font-size:9px;margin-top:3px}.home-hero{padding-bottom:34px}.home h2{font-size:29px}.section-label{font-size:8px}.home-mechanism{padding-top:31px}.section-heading{margin-top:17px;gap:15px}.section-heading p{font-size:12px;max-width:400px}.featured-diagram{overflow:auto}.featured-diagram>img{min-width:570px}.featured-diagram figcaption{padding:14px;font-size:8px}.diagram-label{font-size:8px}.diagram-caption{font-size:9px;padding:13px}.journey-section,.learning-contract{margin-top:39px}.journey-grid{grid-template-columns:1fr}.journey-card{padding:22px 0}.journey-card p{font-size:12px}.learning-contract>ol{grid-template-columns:1fr;gap:22px}.learning-contract li{display:flex;gap:18px}.learning-contract li>span{margin-top:3px;min-width:16px}.learning-contract li h3{font-size:14px}.lesson-body h1{font-size:37px;letter-spacing:-1px;margin-bottom:27px}.lesson-body h2{font-size:27px;margin-top:40px}.lesson-body h3{font-size:16px}.lesson-body p,.lesson-body li{font-size:14px}.lesson-body blockquote{padding:15px 19px;font-size:19px}.lesson-body blockquote p{font-size:19px}.lesson-body details{padding:0 15px}.lesson-body details>summary{font-size:12px}.lesson-body pre{padding:20px 16px}.lesson-body td{padding:12px;font-size:12px}.lesson-body th{font-size:9px;padding:12px}.mer{padding:10px}.figwrap{padding:8px;overflow:auto}.figwrap img{min-width:550px}.copy-code{opacity:1}.step-navigation{gap:22px;margin-top:42px;padding-top:23px}.step-navigation a strong{font-size:12px}.step-navigation a span{font-size:8px}.chapter-outline h2{font-size:16px}.chapter-outline li{gap:15px}.chapter-lede{font-size:19px!important}.chapter-contract{padding:21px}.page-footer{font-size:7px}.toc-chapter>summary{font-size:12px}.toc-lessons>.toc-link{font-size:12px}.toc-headings a{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.sidebar,.reading-bar,.read-progress,.mobile-bar,.step-navigation,.copy-code,.visual-toolbar{display:none!important}.reading-shell{margin:0}main{max-width:none;padding:0}.lesson-body details{display:block}.mer,.figwrap{overflow:visible;break-inside:avoid}.mer img,.figwrap img{max-width:100%;min-width:0}.lesson-body pre{max-height:none;white-space:pre-wrap;background:#fff;color:#111;border:1px solid #bbb}.lesson-body pre code{white-space:pre-wrap}}
/* Keep the book identity and search in view while its contents scroll. */
.sidebar{overflow:hidden}.sidebar>nav{height:100%;display:flex;flex-direction:column;min-height:0}.identity,.search-box,.contents-label,.rail-footer{flex-shrink:0}#contents-tree{min-height:0;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#c7cfc2 transparent;padding-right:3px}.rail-footer{margin:16px 8px 0;padding-top:12px;border-top:1px solid var(--line)}#search-results{flex:1;min-height:0;overflow:auto}.home .toc-area>h2{font:650 10px/1.6 var(--sans);letter-spacing:.7px;margin:0 9px 10px}.home .toc-area>h2 span{font:inherit}.home .toc-area{margin-top:24px}

.diagram-scroll-hint{margin-right:auto;display:none}@media(max-width:760px){.diagram-scroll-hint{display:block;font-size:9px}.featured-diagram+.visual-toolbar{margin:8px 0 0}.visual-toolbar{align-items:center;gap:7px;flex-wrap:wrap}}

.featured-diagram+.visual-toolbar{margin:8px 0 0}

/* The same adjacent lessons remain reachable while reading long explanations. */
.sticky-sequence{display:flex;align-items:center;gap:8px;flex-shrink:0}
.sticky-sequence>a,.sticky-sequence>button,.sticky-disabled{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:34px;padding:5px 12px;border-radius:5px;font-size:11px;white-space:nowrap}
.sticky-previous{border:1px solid var(--line);color:var(--forest)}
.sticky-previous:hover{background:#eaf0e3}
.sticky-next{background:var(--forest);color:#fff}
.sticky-next:hover{background:#345e45}
.sticky-disabled{color:#83907b;opacity:.7}
.reading-controls{flex-shrink:0}
.sticky-sequence>.sticky-finish{border:0;background:var(--forest);color:white}
.sticky-sequence>.sticky-finish:hover:not(:disabled){background:#345e45}
[data-finish]:disabled{cursor:default;opacity:.7}
.mobile-location{min-width:0;text-align:right;line-height:1.35}
.mobile-page-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:12px}
.mobile-page-position{display:block;margin-top:3px;font-size:8px;letter-spacing:.5px;color:var(--muted)}
.mobile-bar{gap:20px}
.mobile-bar>#open-contents{flex-shrink:0}
@media(max-width:1100px){.has-sequence #saved-progress{display:none}.has-sequence .reading-controls{gap:12px}}
@media(max-width:760px){.has-sequence>span{display:none}.has-sequence .reading-controls{width:100%;justify-content:space-between;gap:8px}.sticky-sequence{gap:10px}.sticky-sequence>a,.sticky-sequence>button,.sticky-disabled{min-height:44px;padding:5px 12px}.sticky-next{border-radius:4px}.has-sequence .reading-controls #motion-toggle{margin-left:auto}}

@media (pointer:coarse){.toc-link{padding:13px 11px}.toc-lessons>.toc-link{padding:14px 9px}.toc-headings a{padding:15px 4px 15px 8px}.overview{padding:14px 12px}.toc-link.part-intro{padding:14px 11px}.mobile-bar button{padding:10px 12px}.mobile-close{min-height:44px;min-width:44px}.identity{min-height:44px}.rail-footer button,.reading-controls button,.visual-toolbar button,.copy-code{min-height:44px}.toc-chapter>summary{padding:13px 8px}.contents-label button{padding:10px 12px;margin:-10px -6px}.rail-footer button{padding:11px 0}.visual-toolbar button{padding:10px 6px}.reading-controls button{padding:11px 14px}}

/* The elective studio is a distinct room at the end of the same book. */
.company-area{border-top:1px solid #d1dbd0;margin-top:28px;padding-top:26px}
.company-area>h2{color:#355349;letter-spacing:1.05px}
.company-area>.part-intro{margin-left:0;border:1px solid #d4e1d3;background:#eaf2e8;border-radius:6px;padding:12px 11px;font-weight:600}
.company-area .toc-chapter{border-bottom:1px solid #e0e7df}
.company-area .toc-chapter>summary{font-weight:600}
.track-area{border-top:2px solid #e3c9cc;margin-top:28px;padding-top:26px}.track-area .toc-part-heading .part-label{color:#8c1f2b}.track-area>.part-intro{margin-left:0;border:1px solid #e6cfd2;background:#f7ecee;border-radius:6px;padding:12px 11px;font-weight:600}.track-area .toc-chapter{border-bottom:1px solid #eadfe1}.track-area .toc-chapter>summary{font-weight:600}
.company-page{--forest:#31554a}
.company-page .lesson-body{max-width:860px}
.company-page .lesson-body>h1{font-size:clamp(36px,4vw,53px);letter-spacing:-1.5px;line-height:1.1;border-bottom:1px solid #d8e1dc;padding-bottom:27px}
.company-page .lesson-body>h2{border-top:1px solid #dce4df;padding-top:29px;margin-top:53px}
.company-page .lesson-body>h2:first-of-type{border-top:0;padding-top:0}
.company-page .lesson-body>h2+.figwrap{margin-top:24px}
.company-page .figwrap{background:#f4f8f4;border-color:#d9e5dc;padding:8px;box-shadow:0 10px 25px #294c3b0a}
.company-page .figwrap img{border-radius:8px}
.company-page .tablewrap{border:1px solid #dee6df;border-radius:8px;overflow:auto;box-shadow:0 8px 22px #27473708}
.company-page .tablewrap table{min-width:620px;margin:0}
.company-page .tablewrap tr:nth-child(even){background:#f5f8f4}
.company-page .tablewrap th{background:#edf3eb;position:sticky;top:0}
.company-page .lesson-body blockquote{border-color:#91ad91;background:#edf4e9}
.studio-hero{background:linear-gradient(120deg,#203e36,#31594b 70%,#46765b);border-radius:16px;color:#f6faef;padding:30px 34px;margin:29px 0 40px;box-shadow:0 18px 35px #1c473b1c}
.studio-hero p{font:400 clamp(19px,2.5vw,27px)/1.38 var(--serif);max-width:710px;margin:16px 0 24px;color:#f3f8ee}
.studio-eyebrow{font:600 10px var(--sans);letter-spacing:2px;color:#bed7bc}
.studio-key{display:flex;flex-wrap:wrap;gap:9px}
.studio-key span{border:1px solid #a4bda399;border-radius:30px;padding:5px 11px;font-size:10px;color:#deecdc}
.studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:22px 0 36px}
.studio-card{--brand:#42584a;display:flex;flex-direction:column;min-height:245px;padding:21px 23px;border:1px solid #dbe1d9;border-top:4px solid var(--brand);border-radius:9px;background:#fff;color:#24332b;transition:transform .18s,box-shadow .18s;box-shadow:0 8px 20px #243c3209}
.studio-card:hover,.studio-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px #243c321c}
.studio-card .studio-brand{display:flex;align-items:center;gap:11px;color:var(--brand);font-size:16px;font-weight:700;line-height:1.3}
.studio-card svg{width:31px;height:31px;flex:none}
.studio-card strong{font:400 20px/1.2 var(--serif);margin:21px 0 10px}
.studio-card small{font-size:11px;line-height:1.65;color:#58655c}
.studio-pressure{font-size:10px;font-weight:600;color:#3b5145;margin-top:13px}
.studio-confidence{font-size:9px;letter-spacing:.3px;color:#697c6f;margin-top:14px}
.studio-card .card-arrow{display:block;margin-top:auto;padding-top:17px;color:var(--brand);font-size:11px;font-weight:650}
.openai-card{--brand:#2b6555}.reddit-card{--brand:#d45e36}.meta-card{--brand:#4774c6}.db-card{--brand:#ae5b35}.observe-card{--brand:#217c81}
@media(max-width:760px){.studio-grid{grid-template-columns:1fr;gap:12px}.studio-card{min-height:0;padding:18px}.studio-card strong{margin-top:15px}.studio-hero{padding:23px 20px;margin-top:16px}.studio-hero p{font-size:20px}.company-page .lesson-body>h1{font-size:36px}.company-page .figwrap img{min-width:560px}}
@media(prefers-reduced-motion:reduce){.studio-card{transition:none}}

/* Code controls live in their own row so focus never scrolls the code sideways. */
.lesson-body .code-example{min-width:0;max-width:100%;margin:22px 0}
.lesson-body .code-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:39px;margin:0 0 8px}
.lesson-body .code-label{font-size:10px;font-weight:700;letter-spacing:.12em;color:#68766c}
.lesson-body .code-example pre{max-width:100%;margin:0;overscroll-behavior-x:contain}
.code-actions .copy-code{position:static;flex:none;opacity:1;min-height:36px;padding:6px 13px;border:1px solid #cbd7c9;border-radius:5px;background:#f2f6ef;color:#274d39;font-size:12px;font-weight:600;line-height:1.4;transition:background .15s,border-color .15s}
.code-actions .copy-code:hover,.code-actions .copy-code:focus-visible{background:#e3eee0;border-color:#91b496}
@media(max-width:760px){.lesson-body .code-actions{min-height:44px}.code-actions .copy-code{min-height:44px}}
@media print{.lesson-body .code-actions{display:none}.lesson-body .code-example{margin:22px 0}}

/* A brief is the entry point; concrete examples are readable without swiping. */
.lesson-body .task-brief{margin:24px 0 30px;padding:25px 28px;border:1px solid #bdcebc;border-left:5px solid #37684c;border-radius:10px;background:linear-gradient(120deg,#edf4e9,#fafbf7);box-shadow:0 8px 24px #25442b06}
.task-label{font:700 10px/1.5 var(--sans);letter-spacing:.15em;color:#3e634c;margin-bottom:13px}
.lesson-body .task-brief blockquote{margin:0;padding:0;border:0;background:none;border-radius:0}
.lesson-body .task-brief blockquote p{font:400 23px/1.55 var(--serif);color:#253e30;margin:0;max-width:none}
.example-cards{display:grid;gap:16px;margin:25px 0 32px;min-width:0}
.example-card{min-width:0;border:1px solid #d4ded0;border-radius:9px;overflow:hidden;background:#fbfcf9}
.lesson-body .example-title{font:650 13px/1.5 var(--sans);color:#35523c;margin:0;padding:13px 19px;background:#edf2e8;border-bottom:1px solid #dce4d5}
.example-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0}
.example-value{min-width:0;padding:18px 19px}
.example-value+.example-value{border-left:1px solid #e0e6d9;background:#f4f7f0}
.example-value dt{font:650 10px/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#61735b;margin-bottom:9px}
.example-value dd{margin:0;font-size:14px;line-height:1.7;overflow-wrap:anywhere;color:#263d2d}
.example-value code{white-space:normal;overflow-wrap:anywhere;font-size:13px}
.lesson-body .example-reason{margin:0;padding:13px 19px;border-top:1px solid #e0e6d9;font-size:13px;line-height:1.65;color:#53624d;max-width:none}
.lesson-body details.concept-refresher{background:#fafbf7;border-style:dashed;margin:25px 0}
@media(max-width:760px){.lesson-body .task-brief{padding:20px 18px}.lesson-body .task-brief blockquote p{font-size:21px}.example-pair{grid-template-columns:minmax(0,1fr)}.example-value+.example-value{border-left:0;border-top:1px solid #e0e6d9}.example-value{padding:15px 17px}.lesson-body .example-title,.lesson-body .example-reason{padding-left:17px;padding-right:17px}}
@media print{.example-card,.task-brief{break-inside:avoid;box-shadow:none}}

/* Source paths stay readable on narrow screens without widening the lesson. */
main p,main li{overflow-wrap:anywhere}
main :not(pre)>code{overflow-wrap:anywhere;white-space:normal}

/* Intro timelines are authored for a narrow page and do not need horizontal panning. */
.lesson-body img[src*="/project-context/"]{min-width:0;width:100%;max-width:520px;height:auto}
.figwrap:has(img[src*="/project-context/"])+.visual-toolbar .diagram-scroll-hint{display:none}

/* Distinct navigation levels: part bands, chapter badges, lesson addresses, section rails. */
.toc-area{--part-ink:#315d48;--part-tint:#e5ede6}
.toc-area.part-1{--part-ink:#245d78;--part-tint:#e6eef3}
.toc-area.part-2{--part-ink:#315d48;--part-tint:#e5ede6}
.toc-area.part-3{--part-ink:#82501f;--part-tint:#f3eadc}
.toc-area.part-4{--part-ink:#70467a;--part-tint:#efe6f1}
.toc-area.part-5{--part-ink:#5e537e;--part-tint:#ebe9f2}
.toc-area.part-6{--part-ink:#68446f;--part-tint:#f0e7f1}.toc-area.part-7{--part-ink:#8c1f2b;--part-tint:#f5e6e7}
.specialization-note{display:flex;align-items:flex-start;gap:18px;margin-top:18px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid #735078;border-radius:8px;background:#f4eef5;color:var(--ink)}
.specialization-note strong{min-width:210px;font:700 13px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.5px;color:#68446f}
.specialization-note span{font:400 15px/1.55 var(--sans)}
@media(max-width:760px){.specialization-note{display:block}.specialization-note strong,.specialization-note span{display:block}.specialization-note span{margin-top:8px}}
.toc-area>h2,.home .toc-area>h2{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:24px 0 8px;padding:13px 10px;border-left:3px solid var(--part-ink);background:var(--part-tint);font:650 13px/1.45 var(--sans);letter-spacing:0;color:var(--part-ink)}
.toc-area>h2 .part-label,.home .toc-area>h2 .part-label{font:750 9px/1.5 var(--sans);letter-spacing:1.1px;color:var(--part-ink);min-width:0}
.toc-area>h2 .part-title,.home .toc-area>h2 .part-title{font:650 13px/1.45 var(--sans);letter-spacing:0;color:var(--ink)}
.toc-chapter>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:9px}
.chapter-number{display:inline-flex;align-items:center;gap:3px;padding:4px 5px;min-width:43px;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:var(--part-ink);font:700 11px/1.1 var(--sans);font-variant-numeric:tabular-nums}
.chapter-number small{font:700 8px/1 var(--sans);letter-spacing:.3px}
.chapter-title{font-weight:650;line-height:1.5}
.toc-lessons>.numbered-lesson{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:baseline;gap:7px;padding-left:7px}
.lesson-index{font:650 10px/1.7 var(--sans);font-variant-numeric:tabular-nums;color:var(--part-ink);background:var(--part-tint);border-radius:3px;text-align:center;white-space:nowrap}
.numbered-lesson.active .lesson-index{color:inherit;background:rgba(255,255,255,.16)}
.lesson-title{min-width:0}
.toc-page-label{margin:15px 8px 5px 12px;color:var(--muted);font:750 8px/1.4 var(--sans);letter-spacing:1px}
.toc-headings{list-style:none;border-left:2px solid var(--line);margin:0 3px 16px 12px;padding:0 0 0 9px}
.toc-headings li::marker{content:""}
.toc-headings .depth-2>a{font-weight:550}
.toc-headings .depth-3>a{font-weight:400;padding-left:14px}
.chapter-outline .outline-index{min-width:62px;white-space:nowrap;font:650 13px/1.7 var(--sans);font-variant-numeric:tabular-nums;color:var(--accent)}
.chapter-outline h2 a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.chapter-outline h2 a:hover{text-decoration-color:var(--accent)}
/* Real UI examples must fit the reading column, including narrow screens. */
.lesson-body img[src*="/ui-lessons/"]{display:block;width:100%;min-width:0;max-width:700px;height:auto;margin-inline:auto}
.figwrap:has(img[src*="/ui-lessons/"])+.visual-toolbar .diagram-scroll-hint{display:none}

/* Homepage orientation: a focused welcome with the full curriculum one click away. */
.toc-area>.toc-part-heading,.home .toc-area>.toc-part-heading{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:24px 0 8px;padding:13px 10px;border-left:3px solid var(--part-ink);background:var(--part-tint);font:650 13px/1.45 var(--sans);letter-spacing:0;color:var(--part-ink)}
.toc-area>.toc-part-heading .part-label,.home .toc-area>.toc-part-heading .part-label{min-width:0;color:var(--part-ink);font:750 9px/1.5 var(--sans);letter-spacing:1.1px}
.toc-area>.toc-part-heading .part-title,.home .toc-area>.toc-part-heading .part-title{color:var(--ink);font:650 13px/1.45 var(--sans);letter-spacing:0}
.company-area>.toc-part-heading{border-left-color:#735078;background:#f0e7f1;color:#68446f}

.home{--home-header:64px}
.home .reading-shell{margin-left:0}
.home .reading-bar{display:none}
.home .read-progress{top:var(--home-header)}
.home .mobile-bar{position:sticky;top:0;z-index:31;display:flex;height:var(--home-header);padding:0 32px;border-bottom:1px solid var(--line);background:rgba(247,247,243,.96);backdrop-filter:blur(12px)}
.home .mobile-bar>#open-contents{display:flex;flex:0 0 auto;gap:10px;width:auto;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:650 12px/1 var(--sans)}
.home .mobile-location{margin-left:auto;text-align:right}
.home .mobile-page-title{font:650 13px/1.2 var(--sans)}
.home .mobile-page-position{font:700 9px/1.2 var(--sans);letter-spacing:1px}
.home .sidebar{position:fixed;z-index:44;width:min(90vw,380px);transform:translateX(-101%);box-shadow:18px 0 46px rgba(31,54,42,.16);transition:transform .24s ease}
.home.contents-open .sidebar{transform:translateX(0)}
.home .mobile-close{display:block}
.home .drawer-backdrop:not([hidden]){position:fixed;inset:0;z-index:43;display:block;border:0;background:rgba(24,38,30,.28);backdrop-filter:blur(2px)}

.home main{max-width:1080px;padding:58px 48px 0}
.home .reader-meta{display:none}
.home .lesson-body{max-width:none}
.home-hero{max-width:920px;padding:0 0 64px}
.home-hero .eyebrow{margin-bottom:23px;font-size:11px;letter-spacing:1.35px}
.home-hero h1{max-width:920px;margin:0;font-size:clamp(52px,7vw,88px);line-height:.96;letter-spacing:-3.5px}
.home-hero h1 em{font-weight:400}
.home .hero-lede{max-width:620px;margin:31px 0 0;color:var(--muted);font:400 clamp(20px,2vw,25px)/1.5 var(--serif)}
.home .hero-actions{display:flex;align-items:center;gap:20px;margin-top:32px;flex-wrap:wrap}
.home .hero-actions>span{flex-basis:100%;color:var(--muted);font:500 13px/1.5 var(--sans);letter-spacing:0;text-transform:none}
.home .primary-button{display:inline-flex;align-items:center;gap:18px;padding:15px 19px;font-size:13px}
.sample-link,.text-link{color:var(--accent);font:650 13px/1.5 var(--sans);text-decoration:none}
.sample-link:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}
.hero-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:47px;border:1px solid var(--line);background:var(--line)}
.hero-promises span{padding:16px 18px;background:var(--paper);color:var(--ink);font:650 13px/1.45 var(--sans)}
.hero-promises span::before{content:'✓';margin-right:9px;color:var(--accent)}

.home .home-mechanism{margin:0;padding:68px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home .section-heading{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);gap:54px;align-items:end;margin-bottom:36px}
.home .section-heading h2{margin:0;font-size:clamp(39px,5vw,62px);line-height:1.02;letter-spacing:-2px}
.home .section-heading p{margin:0;color:var(--muted);font:400 16px/1.65 var(--sans)}
.sample-brief{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:28px;align-items:stretch;margin:0 0 30px}
.sample-brief>div:first-child{padding:24px 26px;border-left:4px solid var(--accent);background:#eef3ed}
.sample-kicker{color:var(--accent);font:750 10px/1.4 var(--sans);letter-spacing:1.4px}
.sample-brief p{margin:11px 0 0;font:400 18px/1.6 var(--serif)}
.sample-evidence{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#fbfbf8}
.sample-evidence code{color:var(--muted);font:650 13px/1.4 var(--mono)}
.sample-evidence strong{color:var(--accent);font:700 17px/1.3 var(--sans)}
.sample-evidence span{color:var(--ink);font:500 13px/1.5 var(--mono)}
.home .featured-diagram{margin:0;background:#fbfbf8}
.home .featured-diagram>img{min-width:0;width:100%;height:auto}
.home .featured-diagram figcaption{font-size:12px}
.home .diagram-caption{font-size:13px;line-height:1.55}
.home .visual-toolbar{font-size:12px}
.learning-rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:28px 0 22px;border:1px solid var(--line);background:var(--line)}
.learning-rhythm>div{padding:22px 20px;background:var(--paper)}
.learning-rhythm span{display:block;margin-bottom:11px;color:var(--accent);font:750 11px/1 var(--sans);letter-spacing:1px}
.learning-rhythm strong{font:700 14px/1.35 var(--sans)}
.learning-rhythm p{margin:8px 0 0;color:var(--muted);font:400 13px/1.55 var(--sans)}

.home .journey-section{padding:74px 0 54px}
.home .journey-section>h2{max-width:740px;margin:12px 0 34px;font-size:clamp(39px,5vw,62px);line-height:1.02;letter-spacing:-2px}
.home .journey-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.home .journey-card{display:flex;gap:20px;min-height:178px;padding:25px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:inherit;text-decoration:none;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.home .journey-card:first-child{grid-column:1/-1;min-height:150px}
.home .journey-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(31,54,42,.08)}
.home .journey-number{font:400 36px/1 var(--serif)}
.home .journey-card h3{margin:0 0 9px;font:700 17px/1.3 var(--sans)}
.home .journey-card h3 span{color:var(--accent);font-size:13px}
.home .journey-card p{margin:0 0 17px;color:var(--muted);font:400 14px/1.55 var(--sans)}
.home .journey-meta{font:700 10px/1.4 var(--sans);letter-spacing:.65px;text-transform:uppercase}
.optional-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 0 74px}
.optional-paths a{display:flex;flex-direction:column;min-height:160px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#f4eef5;color:var(--ink);text-decoration:none}
.optional-paths a:hover{border-color:#735078}
.optional-paths span{color:#68446f;font:750 10px/1.3 var(--sans);letter-spacing:1.15px}
.optional-paths strong{margin-top:14px;font:700 17px/1.35 var(--sans)}
.optional-paths small{margin-top:8px;color:var(--muted);font:400 13px/1.55 var(--sans)}
.home-finish{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);gap:48px;align-items:center;padding:56px;border-radius:10px;background:var(--ink);color:var(--paper)}
.home-finish h2{margin:13px 0 0;color:inherit;font-size:clamp(35px,4.5vw,54px);line-height:1.02;letter-spacing:-1.8px}
.home-finish>div:last-child{display:flex;align-items:flex-start;flex-direction:column;gap:13px}
.home-finish .primary-button{background:var(--paper);color:var(--ink)}
.browse-button{padding:0;border:0;border-bottom:1px solid rgba(255,255,255,.65);background:transparent;color:var(--paper);font:650 13px/1.7 var(--sans);cursor:pointer}
.browse-button:hover{border-bottom-color:#fff}
.home-finish p{margin:2px 0 0;color:rgba(255,255,255,.68);font:400 12px/1.5 var(--sans)}
.home .page-footer{margin-top:74px}

@media(max-width:1000px){
  .home main{padding-inline:32px}
  .home .section-heading,.sample-brief,.home-finish{grid-template-columns:1fr}
  .home .section-heading{gap:18px}
  .home-finish{gap:28px}
}
@media(max-width:760px){
  .home{--home-header:56px}
  .home .mobile-bar{padding:0 14px}
  .home .mobile-bar>#open-contents{padding:8px 10px}
  .home .mobile-page-position{display:none}
  .home .read-progress{top:55px}
  .home main{padding:36px 20px 0}
  .home-hero{padding-bottom:46px}
  .home-hero .eyebrow{font-size:9px;line-height:1.5}
  .home-hero h1{font-size:clamp(45px,14vw,64px);line-height:.98;letter-spacing:-2.5px}
  .home .hero-lede{margin-top:24px;font-size:19px}
  .home .hero-actions{align-items:flex-start;flex-direction:column;gap:16px;margin-top:27px}
  .home .hero-actions>span{font-size:12px}
  .hero-promises{grid-template-columns:1fr;margin-top:34px}
  .hero-promises span{padding:13px 15px;font-size:12px}
  .home .home-mechanism{padding:50px 0}
  .home .section-heading{margin-bottom:27px}
  .home .section-heading h2,.home .journey-section>h2{font-size:40px;letter-spacing:-1.4px}
  .home .section-heading p{font-size:14px}
  .sample-brief{gap:14px}
  .sample-brief>div:first-child,.sample-evidence{padding:20px}
  .sample-brief p{font-size:16px}
  .home .featured-diagram>img{min-width:0!important;width:100%!important}
  .home .featured-diagram figcaption{align-items:flex-start;flex-direction:column;gap:4px;padding:14px 16px;font-size:11px}
  .home .diagram-caption{padding:13px 16px;font-size:12px}
  .home .visual-toolbar{font-size:11px}
  .home .visual-toolbar .diagram-scroll-hint{display:none}
  .learning-rhythm,.home .journey-grid,.optional-paths{grid-template-columns:1fr}
  .learning-rhythm>div{padding:18px}
  .home .journey-section{padding:52px 0 40px}
  .home .journey-card:first-child{grid-column:auto}
  .home .journey-card{min-height:0;padding:21px}
  .optional-paths{padding-bottom:52px}
  .home-finish{padding:32px 24px}
  .home-finish h2{font-size:38px}
  .home .page-footer{margin-top:52px}
}

/* Three-problem homepage sampler. */
.sample-showcase{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fbfbf8;box-shadow:0 18px 50px rgba(31,54,42,.07)}
.sample-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:8px;border-bottom:1px solid var(--line);background:#eef2eb}
.sample-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 13px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:650 12px/1.3 var(--sans);cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.sample-tabs button span{color:var(--accent);font:750 9px/1 var(--sans);letter-spacing:.8px}
.sample-tabs button:hover{color:var(--ink)}
.sample-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 2px 10px rgba(31,54,42,.09)}
.sample-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sample-stage{display:grid;background:var(--paper)}
.sample-panel{grid-area:1/1;align-self:start;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(14px) scale(.995);transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s}
.sample-panel.active{z-index:1;visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.sample-panel-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(430px,1.22fr);gap:34px;padding:34px}
.sample-problem{display:flex;flex-direction:column;align-items:flex-start}
.sample-problem .sample-kicker{color:var(--accent);font:750 10px/1.4 var(--sans);letter-spacing:1.35px}
.sample-problem h3{margin:13px 0 0;font:500 clamp(27px,3vw,38px)/1.12 var(--serif);letter-spacing:-.75px}
.sample-given{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px}
.sample-given code{padding:7px 9px;border:1px solid var(--line);border-radius:5px;background:#f1f3ed;color:var(--ink);font:650 12px/1.2 var(--mono);white-space:normal;overflow-wrap:anywhere}
.sample-given span{color:var(--muted);font:600 11px/1.4 var(--sans)}
.sample-answer{margin-top:auto;padding-top:28px}
.sample-answer>span{display:block;margin-bottom:7px;color:var(--muted);font:750 9px/1.4 var(--sans);letter-spacing:1.2px}
.sample-answer strong{display:block;color:var(--accent);font:700 20px/1.25 var(--sans)}
.sample-answer p{margin:9px 0 0;color:var(--muted);font:400 13px/1.6 var(--sans)}
.window-demo,.payment-demo,.aws-demo{align-self:stretch;padding:23px;border:1px solid var(--line);border-radius:9px;background:#f7f8f3}
.visual-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.visual-title span{color:var(--ink);font:750 9px/1.35 var(--sans);letter-spacing:1.1px}
.visual-title small{color:var(--muted);font:550 10px/1.35 var(--sans)}
.window-step{display:grid;grid-template-columns:74px minmax(0,1fr) 72px;gap:12px;align-items:center}
.window-step>span{font:650 11px/1.3 var(--sans)}
.window-step>em{color:var(--muted);font:500 10px/1.3 var(--sans);text-align:right}
.letter-row{display:grid;grid-template-columns:repeat(13,minmax(18px,1fr));gap:3px;min-width:0}
.letter-row b{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:#78827a;font:700 11px/1 var(--mono)}
.letter-row b.candidate{border-color:#bdcdb8;background:#e5ede2;color:var(--ink)}
.letter-row b.winner{border-color:var(--accent);background:var(--accent);color:white}
.window-arrow{margin:15px 84px;padding:8px 10px;border-radius:4px;background:#edf2e9;color:var(--accent);font:650 10px/1.3 var(--sans);text-align:center}
.window-step.final>span{color:var(--accent)}
.window-demo>p{margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font:500 11px/1.5 var(--sans);text-align:center}
.payment-demo{position:relative}
.payment-route{display:grid;grid-template-columns:28px minmax(100px,1fr) 18px minmax(120px,1fr) auto;gap:9px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.payment-route i{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#e5ede2;color:var(--accent);font:750 9px/1 var(--sans);font-style:normal}
.payment-route>span{font:650 12px/1.35 var(--sans)}
.payment-route small{color:var(--muted);font:550 9px/1.3 var(--mono)}
.payment-route>b{color:#90a08f;font:600 14px/1 var(--sans)}
.payment-route>strong{padding:6px 8px;border-radius:4px;background:#e5ede2;color:var(--accent);font:700 10px/1.3 var(--sans);white-space:nowrap}
.lost-reply{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0;color:#925346;font:700 10px/1.4 var(--sans);letter-spacing:.4px;text-transform:uppercase}
.lost-reply span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#f3e2dd}
.payment-route.retry{border-color:#a8c09f;background:#f2f6ef}
.payment-record{padding:7px 9px;border-left:3px solid var(--accent);background:#e5ede2}
.no-second-charge{margin-top:15px;padding:10px;border-radius:6px;background:var(--accent);color:#fff;font:650 11px/1.4 var(--sans);text-align:center}
.no-second-charge span{margin-right:7px}
.aws-entry{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 14px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);font:600 11px/1.35 var(--sans)}
.aws-entry span{color:var(--muted)}
.aws-entry strong{color:var(--accent);font-size:12px}
.aws-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.aws-zones section{padding:15px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.aws-zones header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;font:750 10px/1.3 var(--sans);letter-spacing:.5px}
.aws-zones header span{padding:4px 6px;border-radius:999px;font:700 8px/1 var(--sans);letter-spacing:.2px;text-transform:uppercase}
.aws-zones div{padding:12px;border-radius:5px;font:650 12px/1.3 var(--sans);text-align:center}
.aws-zones small{display:block;margin-top:8px;color:var(--muted);font:500 9px/1.4 var(--sans);text-align:center}
.aws-zones .failed{border-color:#dcc6bf;background:#faf3f0}
.aws-zones .failed header span{background:#f0dcd5;color:#8e4e41}
.aws-zones .failed div{background:#f3e3de;color:#8e4e41;text-decoration:line-through}
.aws-zones .healthy{border-color:#b8cab1;background:#f2f6ef}
.aws-zones .healthy header span{background:#dce9d7;color:var(--accent)}
.aws-zones .healthy div{background:#e2edde;color:var(--accent)}
.aws-database{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px;border-radius:7px;background:#e8edf2;color:#354c5c;font:600 10px/1.35 var(--sans)}
.aws-database strong{padding:4px 7px;border-radius:4px;background:#d8e2e8;font-size:9px;text-transform:uppercase}
.sample-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 34px;border-top:1px solid var(--line);background:#fbfbf8}
.sample-panel-footer a,.sample-panel-footer button{color:var(--accent);font:650 12px/1.5 var(--sans);text-decoration:none}
.sample-panel-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.sample-panel-footer button{padding:7px 0;border:0;background:transparent;cursor:pointer}
.sample-panel-footer button:hover{text-decoration:underline;text-underline-offset:4px}
.sample-panel-footer button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sample-panel,.sample-tabs button{transition:none}}

@media(max-width:900px){
  .sample-panel-grid{grid-template-columns:1fr;gap:24px}
  .sample-answer{margin-top:25px;padding-top:0}
}
@media(max-width:760px){
  .sample-tabs{padding:6px}
  .sample-tabs button{align-items:flex-start;flex-direction:column;justify-content:center;gap:4px;min-height:62px;padding:8px;font-size:10px;text-align:left}
  .sample-tabs button span{font-size:8px}
  .sample-panel-grid{gap:20px;padding:22px 18px}
  .sample-problem h3{font-size:28px;line-height:1.13}
  .sample-given{margin-top:16px}
  .sample-answer{margin-top:20px}
  .sample-answer strong{font-size:17px}
  .window-demo,.payment-demo,.aws-demo{padding:17px 12px}
  .visual-title{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:18px}
  .window-step{grid-template-columns:1fr;gap:7px}
  .window-step>em{text-align:left}
  .letter-row{grid-row:2}
  .window-arrow{margin:11px 0}
  .payment-route{grid-template-columns:27px minmax(0,1fr) 14px minmax(0,1fr);gap:7px;padding:11px}
  .payment-route>strong{grid-column:2/5;justify-self:start;margin-top:2px}
  .payment-route>span{font-size:10px}
  .payment-route>b{font-size:11px}
  .aws-entry{gap:8px;font-size:9px}
  .aws-entry strong{font-size:10px}
  .aws-zones{gap:8px}
  .aws-zones section{padding:11px 8px}
  .aws-zones header{align-items:flex-start;flex-direction:column;gap:5px}
  .aws-zones div{padding:10px 5px;font-size:10px}
  .sample-panel-footer{align-items:flex-start;flex-direction:column;gap:9px;padding:16px 18px}
}

/* The sampler demonstrates three different visual explanations, not static cards. */
/* Algorithm animation: six slow, explicit states keep the window and Counter in sync. */
.window-demo{position:relative;overflow:hidden}
.window-story{display:grid;min-height:55px;margin:0 0 15px;padding:12px 14px;border-left:3px solid var(--accent);background:#edf2e9}
.window-story section{grid-area:1/1;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;gap:4px;opacity:0}
.window-story .story-six{opacity:1}
.window-story b{color:var(--accent);font:750 9px/1.25 var(--sans);letter-spacing:.8px}
.window-story strong{color:var(--ink);font:600 11px/1.4 var(--sans)}
.window-story code{padding:1px 4px;border:1px solid #ced8c8;border-radius:3px;background:#f7faf4;font:700 10px/1 var(--mono)}
.window-animation-grid{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:18px;align-items:stretch}
.window-track-column{align-self:start;min-width:0;padding-top:8px}
.window-scan-track{position:relative;margin:8px 2px 11px}
.window-scan-track .letter-row{position:relative;z-index:1}
.window-scan-track .letter-row b.target-letter{border-color:#b9cab3;background:#edf2e9;color:var(--accent)}
.window-frame{position:absolute;z-index:2;top:-4px;bottom:-4px;left:69.23%;width:30.77%;pointer-events:none}
.window-frame::before{position:absolute;inset:0 -2px;border:2px solid var(--accent);border-radius:7px;background:rgba(134,164,114,.13);box-shadow:0 0 0 2px rgba(134,164,114,.07);content:""}
.index-rail{position:relative;height:32px;margin:0 2px}
.index-pointer{position:absolute;left:3.845%;display:grid;place-items:center;width:12px;height:12px;transform:translateX(-50%)}
.index-pointer::before{position:absolute;bottom:9px;content:"↑";font:700 9px/1 var(--sans)}
.index-pointer b{font:800 11px/1 var(--mono)}
.pointer-i{top:0;color:var(--accent)}
.pointer-j{top:17px;color:#765e19}
.counter-demo{align-self:stretch;min-height:210px;padding:13px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.counter-demo header{display:flex;align-items:flex-start;flex-direction:column;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.counter-demo header span{color:var(--accent);font:750 9px/1.3 var(--sans);letter-spacing:.9px}
.counter-demo header small{color:var(--muted);font:550 8px/1.3 var(--sans)}
.counter-head{display:grid;grid-template-columns:1fr 38px 58px;gap:4px;margin:11px 0 6px;color:var(--muted);font:650 7px/1.2 var(--sans);letter-spacing:.3px;text-align:center;text-transform:uppercase}
.counter-head span:first-child{text-align:left}
.counter-states{display:grid}
.counter-state{grid-area:1/1;align-self:start;opacity:0}
.counter-state.count-ten{opacity:1}
.counter-state>div{display:grid;grid-template-columns:1fr 38px 58px;gap:4px;align-items:center;margin-bottom:5px}
.counter-state>div>*{display:grid;place-items:center;min-height:24px;font-style:normal}
.counter-state>div b{justify-content:start;color:var(--ink);font:750 10px/1 var(--mono)}
.counter-state>div i{border-radius:4px;background:#eef1eb;color:var(--muted);font:700 10px/1 var(--mono)}
.counter-state>div strong{border:1px solid #c5d2bf;border-radius:4px;background:#f5f8f2;color:var(--accent);font:750 11px/1 var(--mono)}
.counter-state>div.missing strong{border-color:#dfc4bc;background:#faf0ed;color:#985245}
.counter-state>div.extra strong{border-color:#d9c898;background:#faf5e6;color:#82691e}
.counter-state>p{margin:10px 0 0;padding:8px 5px 0;border-top:1px solid var(--line);color:#985245;font:700 9px/1.35 var(--sans);text-align:center}
.counter-state>p.complete{color:var(--accent)}
.sample-panel.sample-animate .window-frame{animation:windowScan 32s ease-in-out infinite}
.sample-panel.sample-animate .pointer-i{animation:pointerI 32s ease-in-out infinite}
.sample-panel.sample-animate .pointer-j{animation:pointerJ 32s ease-in-out infinite}
.sample-panel.sample-animate .story-one{animation:stageOne 32s ease infinite}
.sample-panel.sample-animate .story-two{animation:stageTwo 32s ease infinite}
.sample-panel.sample-animate .story-three{animation:stageThree 32s ease infinite}
.sample-panel.sample-animate .story-four{animation:stageFour 32s ease infinite}
.sample-panel.sample-animate .story-five{animation:stageFive 32s ease infinite}
.sample-panel.sample-animate .story-six{animation:stageSix 32s ease infinite}
.sample-panel.sample-animate .count-one{animation:countOne 32s ease infinite}
.sample-panel.sample-animate .count-two{animation:countTwo 32s ease infinite}
.sample-panel.sample-animate .count-three{animation:countThree 32s ease infinite}
.sample-panel.sample-animate .count-four{animation:countFour 32s ease infinite}
.sample-panel.sample-animate .count-five{animation:countFive 32s ease infinite}
.sample-panel.sample-animate .count-six{animation:countSix 32s ease infinite}
.sample-panel.sample-animate .count-seven{animation:countSeven 32s ease infinite}
.sample-panel.sample-animate .count-eight{animation:countEight 32s ease infinite}
.sample-panel.sample-animate .count-nine{animation:countNine 32s ease infinite}
.sample-panel.sample-animate .count-ten{animation:countTen 32s ease infinite}
.sample-panel.sample-animate .window-scan-track .letter-row b:nth-child(10),.sample-panel.sample-animate .window-scan-track .letter-row b:nth-child(11),.sample-panel.sample-animate .window-scan-track .letter-row b:nth-child(13){animation:windowWinner 32s ease infinite}

/* Architecture animation: events arrive in causal order. */
.payment-route{position:relative;overflow:hidden}
.payment-packet{position:absolute;z-index:3;top:50%;left:13%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(49,93,72,.12);opacity:0;text-decoration:none}
.sample-panel.sample-animate .first-attempt{animation:paymentFirstSequence 12.8s ease infinite}
.sample-panel.sample-animate .first-attempt .payment-packet{animation:paymentPacketFirst 12.8s ease-in-out infinite}
.sample-panel.sample-animate .first-attempt>strong{animation:paymentFirstSuccess 12.8s ease infinite}
.sample-panel.sample-animate .lost-reply{animation:paymentLost 12.8s ease infinite}
.sample-panel.sample-animate .payment-route.retry{animation:paymentRetrySequence 12.8s ease infinite}
.sample-panel.sample-animate .payment-route.retry .payment-packet{animation:paymentPacketRetry 12.8s ease-in-out infinite}
.sample-panel.sample-animate .payment-route.retry>strong{animation:paymentReturnSequence 12.8s ease infinite}
.sample-panel.sample-animate .no-second-charge{animation:paymentConclusion 12.8s cubic-bezier(.2,.8,.2,1) infinite}

/* AWS animation: packets reroute as health and database roles change. */
.aws-entry,.aws-database,.aws-zones section{position:relative;overflow:hidden}
.aws-entry-packet,.zone-packet,.database-packet{position:absolute;z-index:3;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(49,93,72,.12);opacity:0}
.aws-entry-packet{top:50%;left:12%;margin-top:-4px}
.zone-packet{top:-5px;left:50%;margin-left:-4px}
.database-packet{top:50%;left:16%;margin-top:-4px}
.sample-panel.sample-animate .aws-entry-packet{animation:awsEntryPacket 13.2s ease-in-out infinite}
.sample-panel.sample-animate .aws-zones .failed{animation:awsZoneFailure 13.2s ease infinite}
.sample-panel.sample-animate .aws-zones .failed header span,.sample-panel.sample-animate .aws-zones .failed small{animation:awsFailureLabel 13.2s ease infinite}
.sample-panel.sample-animate .aws-zones .failed .zone-packet{animation:awsFailedPacket 13.2s ease-in infinite}
.sample-panel.sample-animate .aws-zones .healthy{animation:awsHealthyPulse 13.2s ease infinite}
.sample-panel.sample-animate .aws-zones .healthy .zone-packet{animation:awsHealthyPackets 13.2s ease-in-out infinite}
.sample-panel.sample-animate .aws-database{animation:awsDatabaseWake 13.2s ease infinite}
.sample-panel.sample-animate .database-packet{animation:awsDatabasePacket 13.2s ease-in-out infinite}
.sample-panel.sample-animate .aws-database strong{animation:awsFailoverLabel 13.2s ease infinite}

@keyframes windowScan{
  0%{left:0;width:7.69%;opacity:1}
  2.5%{left:0;width:15.38%}
  5%{left:0;width:23.08%}
  7.5%{left:0;width:30.77%}
  10%{left:0;width:38.46%}
  12.5%,25%{left:0;width:46.15%}
  27.5%,37.5%{left:7.69%;width:38.46%}
  40%{left:7.69%;width:46.15%}
  42.5%{left:7.69%;width:53.85%}
  45%{left:7.69%;width:61.54%}
  47.5%{left:7.69%;width:69.23%}
  50%,56.25%{left:7.69%;width:76.92%}
  58.75%{left:15.38%;width:69.23%}
  61.25%{left:23.08%;width:61.54%}
  63.75%{left:30.77%;width:53.85%}
  66.25%{left:38.46%;width:46.15%}
  68.75%{left:46.15%;width:38.46%}
  71.25%{left:46.15%;width:46.15%}
  73.75%,81.25%{left:46.15%;width:53.85%}
  83.75%{left:53.85%;width:46.15%}
  86.25%{left:61.54%;width:38.46%}
  88.75%,93.75%{left:69.23%;width:30.77%}
  100%{left:0;width:7.69%;opacity:1}
}
@keyframes pointerI{0%,25%{left:3.845%}27.5%,56.25%{left:11.535%}58.75%{left:19.225%}61.25%{left:26.915%}63.75%{left:34.605%}66.25%{left:42.295%}68.75%,81.25%{left:49.985%}83.75%{left:57.675%}86.25%{left:65.365%}88.75%,93.75%{left:73.055%}100%{left:3.845%}}
@keyframes pointerJ{0%{left:3.845%}2.5%{left:11.535%}5%{left:19.225%}7.5%{left:26.915%}10%{left:34.605%}12.5%,37.5%{left:42.295%}40%{left:49.985%}42.5%{left:57.675%}45%{left:65.365%}47.5%{left:73.055%}50%,68.75%{left:80.745%}71.25%{left:88.435%}73.75%,93.75%{left:96.155%}100%{left:3.845%}}
@keyframes stageOne{0%,12.5%{opacity:1;transform:none}14%,93.75%{opacity:0;transform:translateY(-4px)}96%,100%{opacity:1;transform:none}}
@keyframes stageTwo{0%,12.5%{opacity:0;transform:translateY(4px)}14%,24.5%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageThree{0%,24.5%{opacity:0;transform:translateY(4px)}26%,36%{opacity:1;transform:none}38.5%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageFour{0%,36%{opacity:0;transform:translateY(4px)}38.5%,56%{opacity:1;transform:none}58%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageFive{0%,56%{opacity:0;transform:translateY(4px)}58%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageSix{0%,81%{opacity:0;transform:translateY(4px)}83%,93.75%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes countOne{0%,6.5%{opacity:1}8.5%,93.75%{opacity:0}96%,100%{opacity:1}}
@keyframes countTwo{0%,6.5%{opacity:0}8.5%,11.5%{opacity:1}13.5%,100%{opacity:0}}
@keyframes countThree{0%,11.5%{opacity:0}13.5%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes countFour{0%,26%{opacity:0}28%,46.5%{opacity:1}48.5%,100%{opacity:0}}
@keyframes countFive{0%,46.5%{opacity:0}48.5%,49%{opacity:1}51%,100%{opacity:0}}
@keyframes countSix{0%,49%{opacity:0}51%,62.75%{opacity:1}64.75%,100%{opacity:0}}
@keyframes countSeven{0%,62.75%{opacity:0}64.75%,67.75%{opacity:1}69.75%,100%{opacity:0}}
@keyframes countEight{0%,67.75%{opacity:0}69.75%,72.75%{opacity:1}74.75%,100%{opacity:0}}
@keyframes countNine{0%,72.75%{opacity:0}74.75%,87.75%{opacity:1}89.75%,100%{opacity:0}}
@keyframes countTen{0%,87.75%{opacity:0}89.75%,93.75%{opacity:1}96%,100%{opacity:0}}
@keyframes windowWinner{0%,87.75%{border-color:#b9cab3;background:#edf2e9;color:var(--accent);transform:scale(1)}89.75%,93.75%{border-color:var(--accent);background:var(--accent);color:#fff;transform:scale(1)}96%,100%{border-color:#b9cab3;background:#edf2e9;color:var(--accent);transform:scale(1)}}
@keyframes paymentFirstSequence{0%{opacity:0;transform:translateY(10px)}8%,100%{opacity:1;transform:none}}
@keyframes paymentPacketFirst{0%,8%{left:13%;opacity:0}13%{opacity:1}27%{left:76%;opacity:1}31%,100%{left:86%;opacity:0}}
@keyframes paymentPacketRetry{0%,51%{left:13%;opacity:0}56%{opacity:1}67%{left:62%;opacity:1}71%,100%{left:68%;opacity:0}}
@keyframes paymentFirstSuccess{0%,25%{opacity:0;transform:scale(.88)}32%,100%{opacity:1;transform:scale(1)}}
@keyframes paymentLost{0%,32%{opacity:0;transform:scale(.8)}39%{opacity:1;transform:scale(1.08)}45%,100%{opacity:1;transform:scale(1)}}
@keyframes paymentRetrySequence{0%,43%{opacity:0;transform:translateY(10px)}51%,100%{opacity:1;transform:none}}
@keyframes paymentReturnSequence{0%,67%{opacity:0;transform:scale(.88)}74%,100%{opacity:1;transform:scale(1)}}
@keyframes paymentConclusion{0%,75%{opacity:0;transform:translateY(9px)}86%,100%{opacity:1;transform:none}}
@keyframes awsEntryPacket{0%{left:12%;opacity:0}4%{opacity:1}17%{left:76%;opacity:1}20%,100%{left:82%;opacity:0}}
@keyframes awsZoneFailure{0%,24%{border-color:var(--line);background:var(--paper);transform:none}29%{transform:translateX(-3px)}33%{transform:translateX(3px)}38%,100%{border-color:#dcc6bf;background:#faf3f0;transform:none}}
@keyframes awsFailureLabel{0%,31%{opacity:0}40%,100%{opacity:1}}
@keyframes awsFailedPacket{0%,17%{top:-5px;opacity:0;background:var(--accent)}21%{opacity:1}32%{top:48%;opacity:1;background:var(--accent)}36%{background:#9a574a;box-shadow:0 0 0 7px rgba(154,87,74,.14)}39%,100%{top:52%;opacity:0;background:#9a574a}}
@keyframes awsHealthyPulse{0%,39%{box-shadow:none}48%{box-shadow:0 0 0 5px rgba(49,93,72,.09)}60%,100%{box-shadow:none}}
@keyframes awsHealthyPackets{0%,39%{top:-5px;opacity:0}43%{opacity:1}54%{top:48%;opacity:1}58%{opacity:0;top:52%}62%{top:-5px;opacity:0}66%{opacity:1}75%{top:48%;opacity:1}79%,100%{top:52%;opacity:0}}
@keyframes awsDatabaseWake{0%,61%{border-color:transparent;filter:saturate(.35)}72%,100%{border-color:#9eb3c0;filter:none}}
@keyframes awsDatabasePacket{0%,64%{left:16%;opacity:0}68%{opacity:1}79%{left:68%;opacity:1}83%,100%{left:76%;opacity:0}}
@keyframes awsFailoverLabel{0%,78%{opacity:0;transform:scale(.8)}86%,100%{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  .sample-panel.sample-animate *{animation:none!important}
  .window-frame{left:69.23%;width:30.77%;opacity:1}
  .pointer-i{left:73.055%}
  .pointer-j{left:96.155%}
  .window-story section{opacity:0!important}
  .window-story .story-six{opacity:1!important}
  .window-scan-track .letter-row b:nth-child(10),.window-scan-track .letter-row b:nth-child(11),.window-scan-track .letter-row b:nth-child(13){border-color:var(--accent);background:var(--accent);color:#fff}
  .counter-state{opacity:0!important}
  .counter-state.count-ten{opacity:1!important}
  .payment-packet,.aws-entry-packet,.zone-packet,.database-packet{display:none}
}

@media(max-width:760px){
  .window-story{min-height:72px}
  .window-scan-track{margin:8px 2px 11px}
  .window-animation-grid{grid-template-columns:1fr}
  .counter-demo{width:100%;max-width:240px;min-height:205px;margin:0 auto}
}
/* Private track lock: a blurred decoy behind a small unlock form; real content arrives only after the password. */
.track-lock{position:relative;isolation:isolate;overflow:hidden}
.track-lock-veil{filter:blur(6px);opacity:.75;pointer-events:none;user-select:none;-webkit-user-select:none}
.track-lock-veil .veil-row{display:flex;align-items:center;gap:10px;padding:14px 4px;border-bottom:1px solid #eadfe1;font:600 14px/1.35 var(--sans)}
.track-lock-veil .veil-row .chapter-title{flex:1}
.track-lock-veil .part-intro{display:block}
.track-lock-form{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 14px;text-align:center;background:linear-gradient(180deg,#fdf8f800,#fdf8f8cc 28%,#fdf8f8cc 72%,#fdf8f800)}
.track-lock-eyebrow{display:inline-flex;align-items:center;gap:6px;color:#8c1f2b;font:750 10px/1.3 var(--sans);letter-spacing:1.6px}
.track-lock-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.track-lock-row label{flex:1 1 150px;max-width:260px}
.track-lock-row input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d9bfc3;border-radius:8px;background:#fff;color:var(--ink);font:500 14px/1.2 var(--sans);letter-spacing:.5px;transition:border-color .15s,box-shadow .15s}
.track-lock-row input:focus{outline:0;border-color:#8c1f2b;box-shadow:0 0 0 3px #8c1f2b22}
.track-lock-row button{padding:10px 22px;border:0;border-radius:999px;background:#8c1f2b;color:#fff;font:700 13px/1.2 var(--sans);letter-spacing:.4px;cursor:pointer;box-shadow:0 8px 18px #8c1f2b33;transition:transform .15s,box-shadow .15s,background .15s}
.track-lock-row button:hover{background:#75161f;transform:translateY(-1px);box-shadow:0 10px 22px #8c1f2b40}
.track-lock-row button:focus-visible{outline:3px solid #8c1f2b55;outline-offset:2px}
.track-lock-note{margin:0;max-width:300px;color:var(--muted);font:400 11.5px/1.5 var(--sans)}
.track-lock.is-busy .track-lock-row button{opacity:.6;pointer-events:none}
.track-lock.is-wrong .track-lock-row input{border-color:#b3202e;animation:lock-shake .35s}
.track-lock.is-wrong .track-lock-note{color:#b3202e}
@keyframes lock-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.track-lock.is-wrong .track-lock-row input{animation:none}.track-lock-row button{transition:none}}
html.lock-checking .track-lock{visibility:hidden}
.lock-rail{margin-top:2px;min-height:250px;border-radius:8px}
.lock-rail .track-lock-form{gap:8px;padding:14px 10px}
.lock-rail .track-lock-row label{flex-basis:100%;max-width:none}
.lock-rail .track-lock-row button{width:100%}
.lock-page{min-height:62vh;border-radius:12px}
.lock-page .track-lock-veil{padding-bottom:40px}
.lock-page .track-lock-form{gap:14px;background:linear-gradient(180deg,#fdf8f800,#fdf8f8d9 22%,#fdf8f8d9 78%,#fdf8f800)}
.lock-page .track-lock-eyebrow{font-size:11px}
.lock-page .track-lock-row input{font-size:15px;padding:12px 14px}
.lock-page .track-lock-row button{padding:12px 28px;font-size:14px}
.optional-paths .lock-card{display:block;min-height:160px;border:1px solid #e3c9cc;border-radius:8px;background:#f7ecee}
.lock-card .veil-card{display:flex;flex-direction:column;padding:24px;color:var(--ink)}
.lock-card .veil-card span{color:#8c1f2b;font:750 10px/1.3 var(--sans);letter-spacing:1.15px}
.lock-card .veil-card strong{margin-top:14px;font:700 17px/1.35 var(--sans)}
.lock-card .veil-card small{margin-top:8px;color:var(--muted);font:400 13px/1.55 var(--sans)}
.lock-card .track-lock-form{padding:14px}
.lock-card .track-lock-note{display:none}
/* Evidence labels in the private track: Official, Reported, Aggregator, Generated. Hover or focus explains each. */
.evidence{display:inline-block;padding:1px 8px 1px 7px;border:1px solid;border-radius:999px;font:700 10px/1.7 var(--sans);letter-spacing:.9px;text-transform:uppercase;vertical-align:2px;white-space:nowrap;cursor:help}
.evidence::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor;vertical-align:1px}
.evidence-official{color:#1f5a3c;background:#e4f1e8;border-color:#bcdac6}
.evidence-reported{color:#1f3f8c;background:#e6ecf8;border-color:#bccbee}
.evidence-aggregator{color:#7a4b00;background:#f8efdc;border-color:#e6cf9c}
.evidence-generated{color:#5a5560;background:#eeecf0;border-color:#d5d0d9}
.evidence:focus-visible{outline:2px solid currentColor;outline-offset:2px}
td .evidence,th .evidence{vertical-align:1px}

/* The page lays out once and only the panel's transform animates: moving the margin would re-lay out the text, and re-draw the design board, on every frame. */
:root{--panel-ease:cubic-bezier(.32,.72,0,1)}
.panel-toggle{display:none;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted)}
.panel-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.panel-toggle:focus-visible{outline-width:2px;outline-offset:1px}
@media(hover:hover){.panel-toggle:hover{background:#e3e9dc;color:var(--forest)}}
.panel-toggle:active{background:#d8e0cf}
@media(pointer:coarse){.panel-toggle{width:44px;height:44px}}
.panel-hide{position:absolute;top:33px;right:12px}
@media(max-width:1200px){.panel-hide{top:2px;right:2px}}
.panel-show{position:fixed;z-index:22;top:17px;left:12px;visibility:hidden;opacity:0;border-color:var(--line);background:var(--paper);transition:opacity .12s ease,visibility 0s linear .12s}
@media(min-width:761px){
  .panel-hide,.panel-show{display:flex}
  .lesson .sidebar{transition:transform .24s var(--panel-ease)}
  .panel-closed .lesson .sidebar{transform:translateX(-100%);visibility:hidden;transition:transform .24s var(--panel-ease),visibility 0s linear .24s}
  .panel-closed .lesson .reading-shell{margin-left:0}
  .panel-closed .lesson main{max-width:calc(1120px + var(--sidebar))}
  .panel-closed .lesson .reading-bar{padding-left:64px}
  .panel-closed .panel-show{visibility:visible;opacity:1;transition:opacity .16s ease .08s}
}
@media print{.panel-toggle{display:none!important}}