@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
:root { --text: #202020; --muted: #626262; --faint: #8e8e8e; --rule: #e2e2e2; --rule-strong: #cfcfcf; --soft: #f7f7f7; --accent: #0d7d8a; --accent-soft: #e9f7f8; --bg: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 15px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.skip-link { position: absolute; top: -100%; left: 0; z-index: 10; background: var(--text); color: var(--bg); padding: 0.5rem 1rem; text-decoration: none; font-size: 13px; }
.skip-link:focus { top: 0; }
.site-nav { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; padding: 1.6rem 1rem 0; font-size: 12px; color: var(--muted); }
.site-nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a.active { color: var(--text); border-bottom-color: var(--text); }
.book-shell { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 4rem; max-width: 1340px; margin: 0 auto; padding: 4rem 3rem 5rem; }
.book-nav { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow: auto; border-right: 1px solid var(--rule); padding-right: 1.3rem; font-size: 12px; line-height: 1.55; }
.book-nav a { text-decoration: none; }
.nav-home, .nav-index { display: block; font-weight: 650; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.nav-index { color: var(--accent); margin-bottom: 1rem; }
details { border-bottom: 1px solid var(--rule); padding: 0.55rem 0; }
summary { cursor: pointer; font-weight: 650; list-style-position: outside; }
.book-nav ol { margin: 0.55rem 0 0; padding-left: 1.2rem; }
.book-nav li { margin: 0.3rem 0; color: var(--muted); }
.book-nav li.current { color: var(--text); font-weight: 650; }
.reader { min-width: 0; max-width: 920px; }
.reader-header { padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 2rem; }
.kicker { color: var(--accent); font-size: 12px; font-weight: 650; margin-bottom: 0.8rem; }
h1 { margin: 0; max-width: 880px; font-size: 44px; line-height: 1.08; font-weight: 650; letter-spacing: 0; }
.lede { max-width: 820px; color: #444; margin: 1rem 0 0; font-size: 16px; line-height: 1.75; }
.pager { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.3rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid var(--text); padding: 0.55rem 0.8rem; font-weight: 650; font-size: 12px; text-decoration: none; }
.button.primary { background: var(--text); color: #fff; }
.button.secondary { background: #fff; }
.index-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); margin: 2rem 0 0; }
.stat { padding: 1rem; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat strong { display: block; font-size: 24px; line-height: 1; }
.stat span { display: block; color: var(--muted); margin-top: 0.35rem; font-size: 12px; }
.chapter-opening { border-left: 3px solid var(--accent); padding: 0.15rem 0 0.15rem 1rem; margin: 0 0 1.6rem; }
.chapter-opening p { margin: 0.7rem 0; max-width: 820px; }
.chapter-opening .thesis { font-weight: 650; color: var(--text); }
.concept-line { color: var(--muted); font-size: 13px; }
.book-figure { margin: 1.6rem 0 2rem; border: 1px solid var(--rule-strong); background: var(--soft); padding: 1rem; }
.book-figure svg { display: block; width: 100%; height: auto; min-height: 190px; }
.visual-frame, .visual-node rect { fill: #fff; stroke: var(--rule-strong); vector-effect: non-scaling-stroke; }
.visual-title { fill: var(--text); font: 650 14px 'JetBrains Mono', monospace; }
.visual-node text { fill: var(--text); font: 650 13px 'JetBrains Mono', monospace; }
.visual-arrow { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.visual-axis { fill: none; stroke: var(--muted); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.visual-grid { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.visual-curve { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.visual-curve-secondary { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.visual-band { fill: var(--accent-soft); }
.visual-wire { fill: none; stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.visual-gate rect, .visual-gate circle { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.visual-gate text { fill: var(--text); font: 650 13px 'JetBrains Mono', monospace; }
.visual-label { fill: var(--muted); font: 500 11px 'JetBrains Mono', monospace; }
.visual-strong { fill: var(--text); font: 650 12px 'JetBrains Mono', monospace; }
.visual-accent { fill: var(--accent); }
.visual-dot { fill: var(--accent); stroke: none; }
.visual-node.accent rect { stroke: var(--accent); }
.visual-node .node-sub { fill: var(--muted); font: 500 10px 'JetBrains Mono', monospace; }
.book-figure figcaption { margin-top: 0.7rem; color: var(--muted); font-size: 13px; line-height: 1.6; }
.chapter-content h2, .chapter-content h3, .chapter-content h4 { margin: 2.3rem 0 0.8rem; line-height: 1.35; letter-spacing: 0; }
.chapter-content h2 { font-size: 21px; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.chapter-content h3 { font-size: 16px; }
.chapter-content p, .chapter-content ul, .chapter-content ol, .chapter-content blockquote, .chapter-content table, .chapter-content pre { margin: 1rem 0; }
.chapter-content p { max-width: 820px; }
.chapter-content ul, .chapter-content ol { padding-left: 1.4rem; }
.chapter-content li { margin: 0.3rem 0; }
.chapter-content blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--muted); }
.chapter-content code { background: var(--soft); border: 1px solid var(--rule); padding: 0.08rem 0.22rem; font-size: 0.95em; }
.chapter-content pre { overflow: auto; background: var(--soft); border: 1px solid var(--rule); padding: 1rem; max-width: 880px; }
.chapter-content pre code { border: 0; padding: 0; background: transparent; }
.chapter-content table { width: 100%; border-collapse: collapse; font-size: 13px; }
.chapter-content th, .chapter-content td { border: 1px solid var(--rule); padding: 0.55rem; vertical-align: top; }
.chapter-content th { background: var(--soft); text-align: left; }
.related-reading { margin: 2.5rem 0 0; border-top: 1px solid var(--rule-strong); padding-top: 1rem; }
.related-reading h2 { margin: 0 0 0.8rem; font-size: 16px; }
.related-reading ol { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--rule); }
.related-reading li { display: grid; grid-template-columns: minmax(180px, 0.45fr) 1fr; gap: 1rem; border-bottom: 1px solid var(--rule); padding: 0.75rem 0; }
.related-reading a { color: var(--text); font-weight: 650; text-decoration: none; }
.related-reading a:hover { color: var(--accent); }
.related-reading span { color: var(--muted); font-size: 12px; }
.source-note { margin-top: 2rem; padding: 1rem; border: 1px solid var(--rule); background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1.65; }
.chapter-footer { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1rem; }
.part-section { border-top: 1px solid var(--rule); padding: 1.8rem 0; scroll-margin-top: 1rem; }
.part-heading { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 1.5rem; margin-bottom: 0.7rem; }
.part-heading h2 { margin: 0; font-size: 16px; line-height: 1.35; }
.part-heading p { margin: 0; color: var(--muted); }
.chapter-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.chapter-row { display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 1fr) auto; gap: 1.2rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.chapter-row:hover .chapter-title { color: var(--accent); }
.chapter-title { font-weight: 650; }
.chapter-excerpt { color: var(--muted); font-size: 13px; }
.chapter-label { color: var(--accent); font-size: 12px; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root { --text: #ededed; --muted: #a5a5a5; --faint: #848484; --rule: #343434; --rule-strong: #4a4a4a; --soft: #202020; --accent: #78c7d2; --accent-soft: #17363a; --bg: #181818; } .button.primary { background: #ededed; color: #181818; } .button.secondary, .visual-frame, .visual-node rect { background: var(--bg); fill: #181818; } .lede { color: #c6c6c6; } }
@media (max-width: 900px) { body { font-size: 14px; } .book-shell { display: block; padding: 1.8rem 1.15rem 4rem; } .book-nav { position: relative; top: auto; max-height: 430px; border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 1rem; margin-bottom: 2rem; } h1 { font-size: 34px; } .lede { font-size: 15px; } .part-heading, .chapter-row, .related-reading li { grid-template-columns: 1fr; gap: 0.45rem; } .chapter-label { white-space: normal; } .index-stats { grid-template-columns: 1fr; } .book-figure { padding: 0.8rem; } }

/* Audio player (same component as posts) */
.audio-player { display: flex; align-items: center; padding: 6px 10px; border: 1px solid var(--rule); margin: 0 0 1.6rem; background: var(--soft); }
.audio-play-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 26px; height: 26px; margin-right: 9px; border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: all 0.15s; padding: 0; }
.audio-play-btn svg { display: block; width: 11px; height: 11px; }
.audio-play-btn:hover { background: var(--rule); border-color: var(--muted); color: var(--text); }
.audio-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.audio-label { flex: 0 0 auto; margin-right: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; white-space: nowrap; }
.audio-progress-wrap { flex: 1 1 auto; min-width: 20px; height: 2px; background: var(--rule); cursor: pointer; position: relative; }
.audio-progress { height: 100%; background: var(--accent); width: 0%; transition: width 0.1s linear; }
.audio-time { flex: 0 0 auto; margin-left: 9px; font-size: 10px; color: var(--muted); white-space: nowrap; min-width: 34px; text-align: right; }
.audio-speed { flex: 0 0 auto; margin-left: 9px; font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; background: none; border: 1px solid var(--rule-strong); padding: 1px 5px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.audio-speed:hover { border-color: var(--muted); color: var(--text); }
@media (max-width: 640px) { .audio-label { display: none; } }

/* Print: reading on paper */
@media print {
  .site-nav, .book-nav, .pager, .audio-player, .skip-link { display: none !important; }
  .book-shell { display: block; padding: 0; max-width: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .reader { max-width: none; }
  .book-figure { break-inside: avoid; }
  .chapter-content h2 { break-after: avoid; }
  a { text-decoration: none; }
}

/* Book tools (search + progress) */
.book-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.3rem; }
#book-search { flex: 1 1 260px; min-width: 200px; padding: 0.55rem 0.7rem; border: 1px solid var(--rule-strong); background: var(--bg); color: var(--text); font: 500 13px 'JetBrains Mono', monospace; }
#book-search:focus { outline: 1px solid var(--accent); }
.book-tools-note { color: var(--muted); font-size: 12px; }
.book-tools-note a { color: var(--accent); text-decoration: none; font-weight: 650; }
.chapter-time { color: var(--faint); font-size: 11px; font-weight: 500; margin-left: 0.4rem; }
.chapter-done { color: var(--accent); font-weight: 650; }

/* Mobile sidebar: show only the current part's chapters */
@media (max-width: 900px) {
  .book-nav { max-height: none; overflow: visible; }
  .book-nav details { display: none; }
  .book-nav details.current-part { display: block; }
}