@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Outfit:wght@300;400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#0a0a0b;--surface:#111113;--raised:#17171a;--line:#26262b;--text:#e8e8ea;--muted:#b0b0b8;--dim:#8d8d96;--accent:#7dd3c0;--note:#6aa7ff;--tip:#7dd3c0;--warn:#f2b84b;--why:#c39bff;--ex:#ff9d7a;--body:Outfit,system-ui,sans-serif;--head:'Space Grotesk',Outfit,sans-serif;--mono:'JetBrains Mono',monospace}
:root[data-theme=light]{--bg:#fbfbfa;--surface:#f3f3f1;--raised:#ececea;--line:#d9d9d5;--text:#17171a;--muted:#46464e;--dim:#6c6c75;--accent:#0b7a68;--note:#1f5fd1;--tip:#0b7a68;--warn:#a66a00;--why:#6d3fc0;--ex:#c2441a}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--bg:#fbfbfa;--surface:#f3f3f1;--raised:#ececea;--line:#d9d9d5;--text:#17171a;--muted:#46464e;--dim:#6c6c75;--accent:#0b7a68;--note:#1f5fd1;--tip:#0b7a68;--warn:#a66a00;--why:#6d3fc0;--ex:#c2441a}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-weight:380;font-size:17.5px;line-height:1.75}
a{color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p,li,dd{color:var(--muted)}h1,h2,h3,h4{font-family:var(--head);line-height:1.25;letter-spacing:-.02em;color:var(--text)}
h1{font-size:clamp(2.2rem,5vw,3.8rem);margin:.5rem 0 1rem}h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:3rem 0 .8rem;scroll-margin-top:90px;padding-top:.4rem;border-top:1px solid var(--line)}h3{font-size:1.18rem;margin:2rem 0 .6rem;scroll-margin-top:90px}h4{font-size:1rem;margin:1.4rem 0 .4rem}
strong{color:var(--text);font-weight:600}code,pre,kbd{font-family:var(--mono)}code{overflow-wrap:anywhere;font-size:.86em;background:var(--raised);padding:.08em .35em;border-radius:5px;color:var(--text)}
pre{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow-x:auto;line-height:1.6;font-size:13.5px;color:var(--text);position:relative}pre code{background:none;padding:0;font-size:inherit;overflow-wrap:normal}.prose td,.prose li,.prose dd,.prose p{overflow-wrap:anywhere}.prose a{overflow-wrap:anywhere}
pre.ascii{font-size:13px;line-height:1.35}.copy{position:absolute;top:8px;right:8px;font:12px var(--mono);background:var(--raised);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 8px;cursor:pointer}
kbd{font-size:.8em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 .4em;background:var(--raised)}
.tablewrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:10px}table{border-collapse:collapse;width:100%;font-size:15px}th,td{border-bottom:1px solid var(--line);padding:.6rem .9rem;text-align:left;vertical-align:top;color:var(--muted)}th{color:var(--text);background:var(--surface);font-weight:600}tr:last-child td{border-bottom:none}td strong,td code{color:var(--text)}
.header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.wrap{max-width:1100px;padding:0 22px;margin:auto}.headbar{min-height:62px;display:flex;align-items:center;gap:20px}.brand{font-family:var(--head);font-size:21px;font-weight:700;text-decoration:none}.header nav{display:flex;gap:1.3rem;flex:1;flex-wrap:wrap}.header nav a{color:var(--muted);font-size:14px;text-decoration:none}.header nav a:hover{color:var(--text)}
.tools{display:flex;gap:8px}.tools button{font:13px var(--body);background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer}.tools button:hover{color:var(--text);border-color:var(--dim)}
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:50}.skip{position:absolute;left:-10000px}.skip:focus{left:12px;top:8px;background:#fff;color:#000;padding:6px;z-index:60}
.eyebrow{font:12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}.lead{font-size:21px;line-height:1.6;max-width:790px;color:var(--muted)}.muted{color:var(--dim)}
.landing{padding:70px 0 36px;border-bottom:1px solid var(--line)}.landing-body{padding-bottom:70px}.meta{display:flex;flex-wrap:wrap;gap:15px;color:var(--dim);font-size:13px;margin:20px 0}
.action{display:inline-block;border:1px solid var(--text);border-radius:8px;background:var(--text);color:var(--bg);padding:10px 18px;text-decoration:none;font-weight:600;margin:8px 8px 8px 0}.action.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:18px 0 34px}.chapter-card{border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--surface);text-decoration:none;display:block}.chapter-card:hover{border-color:var(--accent)}.chapter-card h2{font-size:19px;margin:10px 0 8px;border:0;padding:0}.chapter-card p{font-size:14.5px;margin:0}.parthead{margin-top:2.5rem}
.article-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:46px;align-items:start;max-width:1220px;margin:auto;padding:36px 22px 70px}
.sidebar{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;border-right:1px solid var(--line);padding-right:16px;font-size:13.5px}.sidebar a{display:block;text-decoration:none;color:var(--muted);padding:4px 0;line-height:1.4}.sidebar a:hover,.sidebar a.current{color:var(--text)}.sidebar a.current{font-weight:600}.sidebar .allchap{margin-bottom:10px;color:var(--accent)}.sidebar h3{font-size:13px;margin:16px 0 6px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.partbox{margin:4px 0;border-top:1px solid var(--line)}.partbox summary{cursor:pointer;padding:7px 0;font-weight:600;color:var(--text);font-size:13px}.chapter-list a .n{font:11px var(--mono);color:var(--dim);margin-right:5px}.section-list a.l3{padding-left:14px;font-size:12.5px;color:var(--dim)}
.prose{max-width:780px;min-width:0}.prose p{margin:0 0 17px}.prose li{margin-bottom:7px}.prose a:not(.action){text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--dim)}.prose a:not(.action):hover{text-decoration-color:var(--text)}
.article-top{border-bottom:1px solid var(--line);margin-bottom:30px;padding-bottom:18px}.article-top h1{font-size:clamp(2rem,4vw,3rem)}.chapter-summary{font-size:19px;color:var(--text);margin:8px 0 0}
.chapter-nav{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:24px;margin-top:40px}.chapter-nav a{text-decoration:none;color:var(--text);max-width:47%}
.callout{border:1px solid var(--line);border-left:4px solid var(--c,var(--note));border-radius:10px;background:var(--surface);padding:14px 18px;margin:1.5rem 0}.callout>*:last-child{margin-bottom:0}.callout .ctitle{display:block;font:600 13px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--c,var(--note));margin-bottom:6px}.callout p{margin:0 0 10px}
.callout.note{--c:var(--note)}.callout.tip{--c:var(--tip)}.callout.warn{--c:var(--warn)}.callout.why{--c:var(--why)}.callout.example,.callout.real{--c:var(--ex)}.callout.recap{--c:var(--accent)}
dl.defs{margin:1.4rem 0;display:grid;gap:10px}dl.defs>div{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:11px 16px}dl.defs dt{font-weight:600;color:var(--text);font-family:var(--head)}dl.defs dd{margin:3px 0 0}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:1.5rem 0}ol.steps>li{counter-increment:s;position:relative;padding:4px 0 14px 50px;border-left:2px solid var(--line);margin-left:15px}ol.steps>li::before{content:counter(s);position:absolute;left:-15px;top:2px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--bg);font:600 13px var(--mono);display:grid;place-items:center}ol.steps>li>p{margin:0 0 6px}.expect{color:var(--tip)!important;font-size:15px}.expect::before{content:"Expected result: ";font-weight:600}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:1.5rem 0}.flow .node{flex:1 1 130px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:10px 12px;font-size:14.5px;color:var(--muted)}.flow .node b{display:block;color:var(--text);font-family:var(--head);margin-bottom:2px}.flow .arrow{align-self:center;color:var(--accent);font-size:22px}
figure{margin:1.6rem 0}figcaption{font-size:14px;color:var(--dim);padding:8px 2px}figure.diagram{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px}figure.diagram svg{width:100%;height:auto;display:block}
figure.shot{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}figure.shot a{display:block;background:#fff}figure.shot img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain}figure.shot figcaption{padding:10px 14px;border-top:1px solid var(--line)}figure.shot .badge-link{font:12px var(--mono);color:var(--accent)}
.visualref{border:1px dashed var(--dim);border-radius:10px;padding:12px 16px;background:var(--surface);margin:1.4rem 0}.visualref .vtitle{font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:4px}
.mock{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:1.5rem 0;overflow:hidden;font-size:14px}.mock .mbar{background:var(--raised);padding:7px 12px;font:12px var(--mono);color:var(--dim);border-bottom:1px solid var(--line)}.mock .mbody{padding:12px 14px;color:var(--muted)}.mock .mnote{padding:7px 12px;font-size:12.5px;color:var(--dim);border-top:1px dashed var(--line)}
.badge{display:inline-block;font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:2px 8px;border:1px solid var(--line);color:var(--muted);vertical-align:middle}.badge.doc{color:var(--accent);border-color:var(--accent)}.badge.concept{color:var(--note);border-color:var(--note)}.badge.unverified{color:var(--warn);border-color:var(--warn)}
.day{display:inline-block;font:600 12px var(--mono);background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--text);white-space:nowrap}
.exercise{border:1px solid var(--accent);border-radius:12px;padding:14px 20px;margin:2rem 0;background:color-mix(in srgb,var(--accent) 6%,var(--surface))}.exercise h4{margin-top:.2rem;color:var(--accent)}
details.quiz,details.sol{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:10px 0;padding:0 16px}details.quiz summary,details.sol summary{cursor:pointer;padding:11px 0;font-weight:600;color:var(--text)}details.quiz[open] summary,details.sol[open] summary{border-bottom:1px solid var(--line);margin-bottom:10px}details>*:last-child{margin-bottom:12px}
.sample{font-size:14px}.sample caption{caption-side:top;text-align:left;font:600 12px var(--mono);color:var(--dim);padding:4px 2px;text-transform:uppercase;letter-spacing:.05em}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:1.5rem 0}.compare>div{border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:var(--surface)}.compare h4{margin-top:0}
.sources{margin:42px 0 10px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.sources h2{margin:0 0 8px;border:0;padding:0;font-size:18px}.sources ul{font-size:14.5px;margin:0}.sources li{overflow-wrap:anywhere}
.sitefooter{border-top:1px solid var(--line);padding:24px 0;color:var(--dim);font-size:13px}
#search-modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;display:flex;justify-content:center;align-items:flex-start;padding-top:9vh}#search-modal[hidden]{display:none}.search-box{width:min(680px,92vw);background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px;max-height:78vh;overflow:auto}#search-input{width:100%;font:17px var(--body);padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text)}#search-results a{display:block;text-decoration:none;padding:10px 12px;border-radius:8px;border-bottom:1px solid var(--line)}#search-results a.sel,#search-results a:hover{background:var(--raised)}#search-results b{color:var(--text);display:block}#search-results small{color:var(--dim)}#search-results span{font-size:14px;color:var(--muted)}.search-hint{font-size:12px;color:var(--dim);margin:8px 2px 0}mark{background:color-mix(in srgb,var(--warn) 35%,transparent);color:inherit;border-radius:3px}
@media(max-width:860px){.article-layout{display:block;padding:18px 16px 50px}.sidebar{position:relative;top:0;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;margin-bottom:24px}.sidebar .section-list{display:none}.compare{grid-template-columns:1fr}.header nav{display:none}.headbar{justify-content:space-between}.landing{padding:44px 0 26px}.lead{font-size:18px}body{font-size:17px}}
@media print{.header,.sidebar,.sitefooter,.chapter-nav,#progress,#search-modal,.copy,.hide-print,.action,.pagetoc{display:none!important}body{background:#fff;color:#111;font-size:11pt}.article-layout{display:block;padding:0;max-width:none}.prose{max-width:none}p,li,td,dd{color:#222}pre,code{white-space:pre-wrap;overflow-wrap:anywhere}pre,figure,.callout,table,tr,img{break-inside:avoid}h2,h3,h4,.grp{break-after:avoid}img{max-width:100%;height:auto}.prose a:not(.action){text-decoration:none;color:#111}}
/* ---- navigation: topic groups, chapter contents, landing cards ---- */
.grp{margin:3.4rem 0 1.2rem;padding:14px 18px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;background:var(--surface);scroll-margin-top:90px;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.grplabel{font:600 1.3rem/1.3 var(--head);color:var(--text);letter-spacing:-.01em}
.grp+*{margin-top:0}
.sidebar .grpbox{border-top:1px solid var(--line);margin:0}
.sidebar .grpbox>summary{cursor:pointer;padding:7px 0;font-weight:600;color:var(--text);font-size:13px;line-height:1.35}
.sidebar .secs{padding-bottom:6px}
.sidebar .secs a{padding:3px 0 3px 12px;font-size:12.5px;color:var(--dim)}
.sidebar .secs a.current{color:var(--text);font-weight:600}
.pagetoc{display:none;border:1px solid var(--line);border-radius:10px;padding:0 14px 6px;margin:0 0 26px;background:var(--surface)}
.pagetoc>summary{cursor:pointer;padding:12px 0;font-weight:600;color:var(--text)}
.pagetoc .grpbox{border-top:1px solid var(--line)}
.pagetoc .grpbox>summary{cursor:pointer;padding:8px 0;font-weight:600;color:var(--text);font-size:14px}
.pagetoc .secs a{display:block;padding:4px 0 4px 12px;font-size:14px;color:var(--muted);text-decoration:none}
@media(max-width:860px){.pagetoc{display:block}}
.chapter-card{display:block;color:var(--text);text-decoration:none}
.chapter-card:hover{border-color:var(--line)}
.chapter-card h2 a{text-decoration:none;color:var(--text)}
.chapter-card h2 a:hover{color:var(--accent)}
.cardtoc{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--line)}
.cardtoc li{margin:0;color:var(--muted)}
.cardtoc a{display:block;padding:6px 0;font-size:14px;color:var(--muted);text-decoration:none;line-height:1.4}
.cardtoc a:hover{color:var(--accent)}
.landing-body h2.nobar{border-top:0;padding-top:0;margin-top:2rem}
.sources h4{margin:0 0 8px;font-size:18px}
.source-note{margin-top:2.5rem;font-size:15px;color:var(--dim)}
/* ---- collapsible sidebar: hide it to give the text the full width ---- */
.tools #sidebar-toggle span{display:inline}
.sbtop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;position:sticky;top:0;z-index:2;background:var(--bg);padding:2px 0 6px}
.sidebar{scroll-margin-top:76px}
.sbtop .allchap{margin:0;padding:0}
.sbhide{font:12px var(--body);background:transparent;color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:2px 8px;cursor:pointer;white-space:nowrap}
.sbhide:hover{color:var(--text);border-color:var(--dim)}
html[data-sidebar=hidden] .sidebar{display:none}
html[data-sidebar=hidden] .article-layout{grid-template-columns:minmax(0,1fr);max-width:900px}
html[data-sidebar=hidden] .prose{max-width:none;margin:0 auto;width:100%;max-width:820px}
html[data-sidebar=hidden] .pagetoc{display:block}
@media(max-width:860px){.tools #sidebar-toggle span{display:none}}
.badge.video{color:var(--why);border-color:var(--why)}