@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=JetBrains+Mono:wght@400;600&display=swap");

:root {
  --paper:#eef1f4; --sheet:#ffffff; --ink:#1b2a41; --soft:#5b6b82; --rule:#d5dce5; --grid:#e3e8ee;
  --r:#d93f45; --g:#23855c; --b:#3a5bd0; --amber:#b7791f;
  --r-bg:#fdf1f1; --g-bg:#eef8f3; --b-bg:#eff2fd; --a-bg:#fcf6ea;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Source Serif 4", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --shadow: 0 0 0 1px rgba(27,42,65,.06), 0 1px 2px rgba(27,42,65,.06), 0 4px 12px rgba(27,42,65,.04);
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#0d1420; --sheet:#141d2c; --ink:#dfe6f0; --soft:#93a2b8; --rule:#26324a; --grid:#152033;
    --r:#ff7a7f; --g:#4fd197; --b:#86a2ff; --amber:#f0b44c;
    --r-bg:#2a1820; --g-bg:#122a22; --b-bg:#17213f; --a-bg:#2a2216;
    --shadow: 0 0 0 1px rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.3); }
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:1.5rem }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } * { transition:none !important; animation:none !important } }
body {
  margin:0; color:var(--ink); font:18px/1.75 var(--body); -webkit-font-smoothing:antialiased;
  background:var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  display:grid; grid-template-columns: 272px minmax(0,1fr); min-height:100vh;
}
body:has(> aside.toc) { grid-template-columns: 272px minmax(0,1fr) 220px;
}
:focus-visible { outline:2px solid var(--b); outline-offset:2px; border-radius:4px }

/* sidebar */
/* Cross-document view transition: sidebar stays visually still between pages (Chromium/Safari; others just navigate). */
@view-transition { navigation: auto }
nav.side { view-transition-name: side }
nav.side { position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--sheet); box-shadow:var(--shadow); padding:1.4rem .9rem 2rem; font:500 14px/1.4 var(--display) }
nav.side .brand { display:block; text-decoration:none; color:var(--ink); padding:0 .6rem 1.2rem }
nav.side .brand b { display:block; font-size:22px; font-weight:800; letter-spacing:-.02em }
nav.side .brand span { color:var(--soft); font-size:13px }
nav.side .bar { height:6px; border-radius:3px; background:var(--rule); margin:.6rem 0 0; overflow:hidden }
nav.side .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--r),var(--g),var(--b)) }
nav.side h4 { margin:1.2rem .6rem .3rem; font-size:12.5px; color:var(--soft); font-weight:600 }
nav.side a.pg { display:flex; gap:.6rem; align-items:baseline; color:var(--ink); text-decoration:none; padding:.45rem .6rem; border-radius:8px; transition:background-color .15s }
nav.side a.pg:hover { background:var(--paper) }
nav.side a.pg.active { background:var(--ink); color:var(--sheet) }
nav.side a.pg .n { font:600 11.5px var(--mono); color:var(--soft); min-width:1.6rem; font-variant-numeric:tabular-nums }
nav.side a.pg.active .n { color:inherit; opacity:.7 }
nav.side a.pg.done .n { color:var(--g) }

/* toc */
aside.toc { position:sticky; top:0; height:100vh; overflow-y:auto; padding:3rem 1rem; font:500 13px/1.4 var(--display) }
aside.toc p { color:var(--soft); margin:0 0 .5rem }
aside.toc a { display:block; color:var(--soft); text-decoration:none; padding:.3rem 0 .3rem .7rem; border-left:2px solid var(--rule) }
aside.toc a:hover, aside.toc a.on { color:var(--ink); border-color:var(--b) }

/* content */
main { padding:3rem clamp(1rem,4vw,3.5rem) 5rem; max-width:none }
main > * { max-width:42rem; margin-left:auto; margin-right:auto }
h1, h2, h3 { font-family:var(--display); letter-spacing:-.02em; text-wrap:balance; line-height:1.15 }
h1 { font-size:clamp(2.2rem,4.5vw,3.3rem); font-weight:800; margin:0 auto .6rem }
h2 { font-size:1.75rem; font-weight:700; margin-top:3.5rem; padding-top:1.4rem; border-top:3px solid var(--ink) }
h3 { font-size:1.25rem; font-weight:700; margin-top:2rem }
p, li { text-wrap:pretty }
a { color:var(--b); text-underline-offset:3px }
strong { font-weight:600 }
.lead { font-size:1.2rem; color:var(--soft); font-style:italic }
code { font:.85em var(--mono); background:var(--sheet); box-shadow:var(--shadow); padding:.1rem .35rem; border-radius:5px }
pre { font:14px/1.5 var(--mono); background:var(--sheet); box-shadow:var(--shadow); padding:1rem 1.2rem; border-radius:10px; overflow-x:auto }
pre code { box-shadow:none; padding:0; background:none }
table { border-collapse:collapse; width:100%; margin:1.4rem auto; font-size:16px; background:var(--sheet); box-shadow:var(--shadow); border-radius:10px; overflow:hidden; display:table }
th, td { padding:.55rem .85rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule) }
th { font:600 14px var(--display); background:var(--paper) }
tr:last-child td { border-bottom:0 }
/* pixel/matrix grids: <table class="grid"> */
table.grid { width:auto; display:inline-table; margin:.6rem .4rem; font:14px var(--mono); font-variant-numeric:tabular-nums }
table.grid td { border:1px solid var(--rule); text-align:center; min-width:2.4rem; padding:.3rem .4rem }
table.grid td.hl { background:var(--b-bg); color:var(--b); font-weight:600 }
figure { margin:1.6rem auto; text-align:center } figcaption { font:14px var(--display); color:var(--soft); margin-top:.4rem }
svg:not(.katex svg) { max-width:100%; height:auto; display:block; margin:1.4rem auto; background:var(--sheet); box-shadow:var(--shadow); border-radius:12px }

/* callouts: label comes from ::before, sentence case */
.box { position:relative; margin:1.6rem auto; padding:1rem 1.25rem 1rem 1.4rem; border-radius:12px; background:var(--sheet); box-shadow:var(--shadow) }
.box::after { content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--c) }
.box::before { display:block; font:700 14px var(--display); color:var(--c); margin-bottom:.25rem }
.box > :first-child { margin-top:0 } .box > :last-child { margin-bottom:0 }
.intuition { --c:var(--g); background:var(--g-bg) } .intuition::before { content:"Intuition" }
.formula   { --c:var(--b); background:var(--b-bg) } .formula::before { content:"Formula" }
.example   { --c:var(--ink) } .example::before { content:"Worked example" }
/* worked examples: tinted sheet, text-sized math, equations never split mid-line, step labels on their own line */
.example { background:color-mix(in srgb, var(--paper) 55%, var(--sheet)); box-shadow:inset 0 0 0 1px var(--rule); font-size:16.5px; line-height:1.7 }
.example::before { font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); margin-bottom:.6rem }
.example p { margin:.55rem 0 }
.example .katex { font-size:1.06em }
@media (min-width:640px) { .example .katex { white-space:nowrap } }
.example p.step { margin-top:1.1rem }
.example p.step > b:first-child, .example p.step > strong:first-child { display:block; font:700 15px var(--display); margin-bottom:.15rem }
.example table:not(.grid) { font-size:15px }
.tip       { --c:var(--amber); background:var(--a-bg) } .tip::before { content:"Exam tip" }
.warn      { --c:var(--r); background:var(--r-bg) } .warn::before { content:"Watch out" }
.summary   { --c:var(--g); border:2px solid var(--g) } .summary::before { content:"Recap" }
.watch     { --c:var(--r) } .watch::before { content:"Watch first (opens YouTube)" }
.vids { display:flex; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.4rem; scrollbar-width:thin; scrollbar-color:var(--rule) transparent }
.vids a { flex:0 0 190px; scroll-snap-align:start; text-decoration:none; color:var(--ink); font:500 13.5px/1.35 var(--display) }
.vids img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:8px; outline:1px solid rgba(0,0,0,.1); outline-offset:-1px; margin-bottom:.45rem; background:var(--paper) }
.vids a:hover b { color:var(--b) }
.vids b { display:block; font-weight:600 }
.vids span { display:block; color:var(--soft); font-size:12.5px; margin-top:.15rem }

/* self-test */
details { background:var(--sheet); box-shadow:var(--shadow); border-radius:10px; padding:0; margin:.7rem auto }
details summary { cursor:pointer; padding:.85rem 1.1rem; font:600 16px/1.45 var(--display); list-style:none; display:flex; gap:.7rem; min-height:44px }
details summary::-webkit-details-marker { display:none }
details summary::before { content:"+"; font-family:var(--mono); color:var(--b); transition:rotate .2s cubic-bezier(.2,0,0,1) }
details[open] summary::before { rotate:45deg }
details > :not(summary) { padding:0 1.1rem; margin-top:0 }
details > :last-child { padding-bottom:1rem }

/* pager */
.pager { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:5rem !important; padding-top:1.4rem; border-top:3px solid var(--ink); font:600 15px var(--display) }
.pager a { text-decoration:none; max-width:40% }
.pager button { font:700 15px var(--display); background:var(--ink); color:var(--sheet); border:0; padding:.7rem 1.2rem; min-height:44px; border-radius:999px; cursor:pointer; transition:scale .12s }
.pager button:active { scale:.96 }
.pager button.is-done { background:var(--g) }

.katex-display { overflow-x:auto; overflow-y:hidden; padding:.2rem 0; scrollbar-width:thin; scrollbar-color:var(--rule) transparent }

@media (max-width:1200px) { body, body:has(> aside.toc) { grid-template-columns:260px minmax(0,1fr) } aside.toc { display:none } }
@media (max-width:820px) {
  body { display:block }
  nav.side { position:static; height:auto; max-height:none }
  nav.side .list { display:none } nav.side.open .list { display:block }
  nav.side .toggle { display:block !important }
  main { padding-top:1.5rem }
  body { font-size:16.5px }
  table:not(.grid) { display:block; overflow-x:auto }
  .box { padding-left:1.1rem; padding-right:1rem }
}
main { overflow-x:clip; position:relative }
nav.side .toggle { display:none; width:100%; font:600 15px var(--display); background:var(--paper); color:var(--ink); border:0; border-radius:8px; padding:.7rem; min-height:44px; cursor:pointer }
svg:not(.katex svg) text { font-family:var(--display) }
/* matrices placed directly in the text column: keep them aligned with the text, side by side */
.grids { margin:.6rem auto } .grids table.grid { margin:.3rem .6rem .3rem 0 }

/* search: sidebar button + Cmd/Ctrl+K dialog */
nav.side .search-btn { display:flex; align-items:center; justify-content:space-between; width:100%; margin:0 0 .6rem; padding:.55rem .7rem; min-height:40px; border:0; border-radius:8px; background:var(--paper); color:var(--soft); font:500 14px var(--display); cursor:pointer; box-shadow:inset 0 0 0 1px var(--rule) }
nav.side .search-btn:hover { color:var(--ink) }
kbd { font:600 11.5px var(--mono); padding:.1rem .35rem; border-radius:5px; background:var(--sheet); box-shadow:inset 0 0 0 1px var(--rule); color:var(--soft) }
dialog.search { margin:12vh auto auto; width:min(640px, 92vw); max-height:72vh; padding:0; border:0; border-radius:14px; background:var(--sheet); color:var(--ink); box-shadow:0 0 0 1px var(--rule), 0 24px 60px rgba(0,0,0,.25); overflow:hidden; flex-direction:column }
/* open: 180ms ease-out drop-in; close: quicker 120ms fade. @starting-style + discrete display/overlay keep it CSS-only. */
dialog.search { opacity:0; translate:0 -8px; scale:.985; transition:opacity .12s ease-in, translate .12s ease-in, scale .12s ease-in, display .12s allow-discrete, overlay .12s allow-discrete }
dialog.search[open] { display:flex; opacity:1; translate:0 0; scale:1; transition:opacity .18s cubic-bezier(.2,0,0,1), translate .18s cubic-bezier(.2,0,0,1), scale .18s cubic-bezier(.2,0,0,1), display .18s allow-discrete, overlay .18s allow-discrete }
@starting-style { dialog.search[open] { opacity:0; translate:0 -8px; scale:.985 } }
dialog.search::backdrop { background:rgba(13,20,32,0); transition:background .12s ease-in, display .12s allow-discrete, overlay .12s allow-discrete }
dialog.search[open]::backdrop { background:rgba(13,20,32,.45); transition:background .18s ease-out, display .18s allow-discrete, overlay .18s allow-discrete }
@starting-style { dialog.search[open]::backdrop { background:rgba(13,20,32,0) } }
@media (prefers-reduced-motion: reduce) { dialog.search, dialog.search[open], dialog.search::backdrop, dialog.search[open]::backdrop { transition:none } }
dialog.search input { width:100%; border:0; border-bottom:1px solid var(--rule); background:transparent; color:var(--ink); padding:1rem 1.2rem; font:500 17px var(--display); outline:none }
dialog.search ul { list-style:none; margin:0; padding:.4rem; overflow-y:auto; flex:1 }
dialog.search li a { display:block; padding:.6rem .8rem; border-radius:8px; text-decoration:none; color:var(--ink) }
dialog.search li[aria-selected=true] a, dialog.search li a:hover { background:var(--paper) }
dialog.search li b { font:600 15px var(--display) }
dialog.search li span { display:block; font:500 12.5px var(--display); color:var(--soft) }
dialog.search li small { display:block; margin-top:.2rem; font:14px/1.45 var(--body); color:var(--soft) }
dialog.search mark { background:none; color:var(--b); font-weight:inherit }
dialog.search .empty { padding:1rem; color:var(--soft); font:15px var(--display) }
dialog.search .hint { margin:0; padding:.55rem 1.2rem; border-top:1px solid var(--rule); font:13px var(--display); color:var(--soft) }