/* Web Fonts ========================================================================== */ @font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/noto-serif-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/noto-serif-latin-400-italic.woff2') format('woff2'); } @font-face { font-family: "Noto Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/noto-serif-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: "Noto Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/noto-serif-latin-700-italic.woff2') format('woff2'); } /* CSS Custom Properties ========================================================================== */ :root { /* Typography scale - increase --font-scale to make everything larger */ --font-scale: 1.2; /* 1.2 × 16px browser default ≈ 19.2px */ /* Font families */ --font-body: "Noto Serif", "DejaVu Serif", Georgia, serif; --font-mono: monospace, monospace; --font-sans: sans-serif; /* Colors. Each value is light-dark(, ) and resolves according to the page's used color-scheme — so one definition drives both themes. The OS preference is followed by default (color-scheme: light dark, set below); the theme toggle overrides it by pinning color-scheme on (see the [data-theme] rules). Palette is green-accented. */ --color-brand: light-dark(#2E8B57, #61bc84); /* headings, rule, title */ --color-brand-light: light-dark(#357a52, #8fc7a4); /* links */ --color-text: light-dark(#1a1a1a, #e0e0e0); --color-text-muted: light-dark(#222, #e0e0e0); --color-text-faint: light-dark(#6a7a72, #8b9a90); --color-bg: light-dark(#f6f7f6, #1e1e1e); --color-bg-alt: light-dark(#fbfcfb, #2d2d2d); --color-bg-highlight: light-dark(#e7efe9, #2d2d2d); --color-white: #fff; --color-border: light-dark(#d8ded9, #454545); --color-rule: light-dark(#222, #6b6b6b); /* tables, footnotes, frames */ --color-footer: light-dark(#345e37, #2d2d2d); --color-footer-text: light-dark(#fff, #e0e0e0); /* Box accent colors — analogous greens/teals/olives, so the callout boxes harmonize while staying distinguishable. Each box sets --accent to one of these; its tinted fill is derived from it via color-mix() against the page background, so it adapts automatically to light/dark. */ --color-task: light-dark(#2E8B57, #61bc84); /* exercises + essay questions */ --color-example: light-dark(#4f7a2f, #8fc46b); /* worked examples */ --color-theorem: light-dark(#2f8f86, #58c2b7); /* generic-theorem boxes */ --color-sources: light-dark(#7d8a33, #c2cd6f); /* sources / further reading */ --color-info: light-dark(#345e37, #8FBC8F); /* plain boxes (justabox) */ /* TikZ figures are pure-black line art on transparency, which vanishes on a dark background. invert(0) is a no-op in light mode; in dark mode invert turns the black strokes near-white. Driven by light-dark() so it follows the toggle automatically. */ --svg-invert: light-dark(0, 0.9); /* Layout. content-width is in rem, so it scales with --font-scale and the *measure* (characters per line) is set by this number alone, regardless of font size: chars/line ≈ content-width ÷ 0.5em. 38rem ≈ 76 chars. */ --content-width: 38rem; --line-height: 1.7; /* Follow the OS theme by default; the toggle overrides this below. */ color-scheme: light dark; /* Native controls (checkboxes, focus rings, …) pick up the brand colour. */ accent-color: var(--color-brand); } /* Theme toggle: pinning color-scheme makes every light-dark() above resolve to the chosen side, overriding the OS preference. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Base ========================================================================== */ html { font-size: calc(100% * var(--font-scale)); } body, html { margin: 0; padding: 0; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: var(--line-height); } @media print { body { max-width: none; } } /* Header ========================================================================== */ header { border-bottom: 3px solid var(--color-brand); width: 100%; } #title { max-width: var(--content-width); margin: 0.6rem auto; display: flex; align-items: center; color: var(--color-brand); font-size: 1.4rem; font-weight: bold; } #title a { color: var(--color-brand); text-decoration: none; } /* Theme toggle: a two-segment Light|Dark pill, pushed to the right of the title. The active theme's segment is filled, the other is the clickable alternative — so the control shows the current state unambiguously. */ .theme-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .theme-opt { background: none; border: none; cursor: pointer; color: var(--color-text-faint); font: inherit; line-height: 1.7; padding: 0.1em 0.65em; } .theme-opt.active { background: var(--color-bg-highlight); color: var(--color-brand); } .theme-opt:not(.active):hover { color: var(--color-brand); } /* Dropdown navigation ========================================================================== */ .dropdown { position: absolute; z-index: 10; padding-right: 0.7em; transform: translateX(-100%); } .dropdown .hamburger { cursor: pointer; /* The ☰ glyph carries its whitespace above the bars and none below, so it sits low in its box; nudge it up to optically centre it on the title. */ display: inline-block; position: relative; top: -0.12em; } .dropdown-content { display: none; position: absolute; background-color: var(--color-bg-alt); min-width: min(28rem, 88vw); max-width: 92vw; left: -0.6rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2); z-index: 100; max-height: 31rem; overflow-y: auto; overflow-x: hidden; line-height: 1.5; padding: 0.6rem; } .dropdown-content a { display: block; color: var(--color-brand); font-size: 1rem; padding-top: 0.6rem; text-decoration: none; } .dropdown-content a.sectionToc { padding: 0; font-weight: normal; } /* Main content ========================================================================== */ .content { margin: 2.5rem auto; max-width: var(--content-width); padding: 0 0.6em; } /* Footer ========================================================================== */ footer { background: var(--color-footer); color: var(--color-footer-text); text-align: center; padding: 1.25rem; font-size: 0.8rem; width: 100%; } footer a { color: var(--color-footer-text); } /* Table of contents (in-page) ========================================================================== */ .tableofcontents { line-height: 1.5; font-size: 1.05rem; } .tableofcontents a { text-decoration: none; } .tableofcontents span.chapterToc { padding-top: 0.3em; display: inline-block; } /* Typography ========================================================================== */ h1, h2, h3, h4, h5 { line-height: 1.4; /* Keep anchored headings (TOC jumps) clear of the viewport top. */ scroll-margin-top: 1.5rem; } .chapterHead, .likechapterHead { font-size: 1.7rem; } .sectionHead, .likesectionHead { font-size: 1.5rem; margin-top: 1.6em; } .subsectionHead, .likesubsectionHead { font-size: 1.3rem; } .subsubsectionHead, .likesubsubsectionHead { font-size: 1rem; } .partHead, .likepartHead { font-size: 2rem; } .titlemark { position: absolute; z-index: -1; padding-right: 0.7em; color: var(--color-text-faint); transform: translateX(-100%); } p { margin-bottom: 0; margin-top: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10; text-wrap: pretty; } div + p, p + div, p + p, p + pre, pre + p { margin-top: 1em; } .tcolorbox p + p { margin-top: 0.3em; } /* Links ========================================================================== */ a { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; word-break: break-word; color: var(--color-brand-light); /* A lighter underline that clears the serif descenders. */ text-decoration-thickness: 0.07em; text-underline-offset: 0.15em; } /* Visible keyboard-focus ring for links and controls. */ a:focus-visible, .theme-opt:focus-visible, .hamburger:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; border-radius: 2px; } ::selection { background: color-mix(in srgb, var(--color-brand) 22%, transparent); } a img { border: 0; } a.locallink { text-decoration: none; background: var(--color-bg-highlight); } a.locallink:hover { text-decoration: underline; } /* Utility classes ========================================================================== */ span.nowrap { white-space: nowrap; } /* Chapter 4's tapering rows of 'G's (the uniform/non-uniform hypotheses), rendered from \scaleto as sized spans. */ .gtaper { font-style: italic; white-space: nowrap; } center { margin-bottom: 1em; margin-top: 1em; } td center { margin: 0; } .small-caps, .smallcaps { font-variant: small-caps; } .underline { text-decoration: underline; } .overline { text-decoration: overline; } /* Navigation ========================================================================== */ .nextchapter { margin: 2.5rem 0; padding: 1.25rem 0; border-top: 1px solid var(--color-border); } @media print { div.crosslinks { visibility: hidden; } } /* Images and figures ========================================================================== */ img[src$=".svg"] { margin: 1.25rem 0 0 0; } /* TikZ figures (bdrc*.svg) are black line art; invert them in dark mode so the strokes show. The license badge and other svgs are left untouched. */ img[src^="bdrc"][src$=".svg"] { filter: invert(var(--svg-invert)); } div.figure, div.float, figure.float { margin-left: auto; margin-right: auto; } div.figure img, div.float img { text-align: center; } figure.figure { text-align: center; } figcaption.caption { margin-left: 3em; margin-right: 1em; text-align: center; text-indent: -2em; } figcaption.caption span.id { font-weight: 700; white-space: nowrap; } img + figcaption, p + figcaption { margin-top: 1em; } img.math { vertical-align: middle; } img.cdots { vertical-align: middle; } .overline img { border-top: 1px solid var(--color-rule); } .underline img { border-bottom: 1px solid var(--color-rule); margin-bottom: 1pt; } .Canvas { position: relative; } /* Lists ========================================================================== */ li.nobullet { list-style-type: none; margin-left: 0.5em; } span.itemlabel { position: absolute; padding-right: 0.6rem; transform: translateX(-100%); } .enumerate1 { list-style-type: decimal; } .enumerate2 { list-style-type: lower-alpha; } .enumerate3 { list-style-type: lower-roman; } .enumerate4 { list-style-type: upper-alpha; } li p.indent { text-indent: 0; } li p:first-child { margin-top: 0; margin-bottom: 0; } li p ~ ol:last-child, li p ~ ul:last-child { margin-bottom: 0.5em; } dl.enumerate { align-items: top; display: grid; grid-template-columns: 3ch 1fr; row-gap: 1ch; } dd.enumerate { margin-left: 0; } dl.enumerate-enumitem { display: grid; grid-template-columns: max-content 1fr; column-gap: 0.4em; row-gap: 0.5ch; margin-left: 1.25rem; align-items: start; } dt.enumerate-enumitem { text-align: right; white-space: nowrap; } dd.enumerate-enumitem { margin-left: 0.5rem; } .compactenum, dt.enumerate { clear: left; float: left; margin-left: 2em; margin-right: 0.2em; } /* Tables ========================================================================== */ div.tabular { text-align: center; padding: 0.6rem; /* Over-wide tables scroll rather than break the (narrower) text column. */ overflow-x: auto; } table.tabular { border-collapse: collapse; border-spacing: 0; margin-left: auto; margin-right: auto; /* Align digits into columns in decision matrices / data tables. */ font-variant-numeric: tabular-nums; } div.center div.tabular, div.tabular { margin-bottom: 0.5em; margin-top: 0.5em; text-align: center; } table.tabular td p { margin-top: 0; } td p:first-child { margin-top: 0; } td p:last-child { margin-bottom: 0; } table[rules] { border-left: 1px solid var(--color-rule); border-right: 1px solid var(--color-rule); } /* Table cell padding variants */ div.td00 { margin: 0; } div.td01 { margin-left: 0; margin-right: 0.3rem; } div.td10 { margin-left: 0.3rem; margin-right: 0; } div.td11 { margin: 0 0.3rem; } td.td00 { padding: 0; } td.td01 { padding-left: 0; padding-right: 0.3rem; } td.td10 { padding-left: 0.3rem; padding-right: 0; } td.td11 { padding: 0 0.3rem; } /* Table lines */ .hline, .hline hr, .cline hr { border-top: 1px solid var(--color-rule); } .cline hr, .hline hr { height: 0; margin: 0; border: none; } .cline td, .hline td { padding: 0; } .hline + .vspace:last-child { display: none; } .hline:first-child { border-bottom: 1px solid var(--color-rule); border-top: none; } tr.hline td hr { display: none; } div.array { text-align: center; } /* Decision tables: shade the header row and first column (the states and acts), restoring the \rowcolor / \columncolor / \cellcolor shading tex4ht drops. */ table.tabular td.gr, table.tabular th.gr { background: color-mix(in srgb, #ccc 30%, transparent); } /* Decision matrices (game-theory payoff tables etc.): give the cells real breathing room. The default td11 padding (0 0.3rem) leaves the shaded row-header cells (R1, R2, …) as thin slivers next to the much taller column headers; symmetric padding squares the shaded blocks up and de-cramps the whole grid. */ /* Faint full grid (the author prefers ruled cells over the usual minimal style, for clarity) inside a rounded outer frame. All rules are drawn from CSS cell borders rather than the LaTeX \hline rows, so the look is uniform regardless of which tables happened to carry a final \hline. */ table.dmatrix { border-collapse: separate; /* required for border-radius to round corners */ border-spacing: 0; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; /* clip the cell corners to the rounded frame */ } /* Every interior line is a cell's top/left border, drawn once; the first row and first column drop theirs so they don't double the outer frame. */ table.dmatrix tr:not(.hline) td { padding: 0.2em 0.75em; vertical-align: middle; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); } table.dmatrix tr:not(.hline) td:first-child { border-left: none; } table.dmatrix tr:not(.hline):first-child td { border-top: none; } /* The LaTeX rule rows and the stray trailing strut row (a single empty shaded cell) are now redundant — the cell borders supply every line. */ table.dmatrix tr.hline, table.dmatrix tr:last-child { display: none; } /* Math display ========================================================================== */ div.math-display, div.par-math-display { text-align: center; /* Let an over-wide equation scroll rather than overflow the page. */ overflow-x: auto; } span.pmatrix img { vertical-align: middle; } div.pmatrix, div.eqnarray { text-align: center; } table.pmatrix, table.eqnarray, table.eqnarray-star { width: 100%; } span.bar-css { text-decoration: overline; } /* Equations */ .equation td, .equation-star td { text-align: center; } table.equation, table.equation-star { width: 100%; } td.equation { margin: 1em 0; } td.equation-label { text-align: center; width: 5%; } td.eqnarray4 { white-space: normal; width: 5%; } td.eqnarray2 { width: 5%; } /* Alignment environments */ table.align, table.alignat, table.flalign, table.xalignat, table.xxalignat { margin-left: 5%; white-space: nowrap; width: 95%; } table.align-star, table.alignat-star, table.flalign-star, table.xalignat-star { margin-left: auto; margin-right: auto; white-space: nowrap; } td.align-label { text-align: center; width: 5%; } td.align-odd { padding-right: 0.3em; text-align: right; } td.align-even { padding-right: 0.6em; text-align: left; } table.multline, table.multline-star, table.gather { width: 100%; } td.gather, div.gather-star { text-align: center; } /* Boxes and frames ========================================================================== */ .fbox { border: 1px solid var(--color-rule); padding-left: 0.2rem; padding-right: 0.2rem; text-indent: 0; } div.fbox { display: table; } div.center div.fbox { border: 1px solid var(--color-rule); clear: both; padding: 0 0.2rem; text-align: center; text-indent: 0; } .framebox-c, .framebox-l, .framebox-r { border: 1px solid var(--color-rule); padding: 0 0.2rem; text-indent: 0; } .framebox-c { text-align: center; } .framebox-l { text-align: left; } .framebox-r { text-align: right; } div.minipage { display: inline-block; margin: 1rem 0rem 1rem 0; vertical-align: top; text-align: center; } /* Some exercises (e.g. the three-matrix games in ch. 10) line up several decision matrices as side-by-side minipages. Each matrix keeps its natural width, so at full size the row overflows the content column and the last matrix wraps to its own line with a wide gap above it. The matrix cells use em-based padding, so shrinking the minipage font-size scales the whole grid down proportionally and lets all of them sit on one row. */ .exercise div.minipage { font-size: 0.9em; } div.minipage p { text-align: center; } /* Alignment ========================================================================== */ div.center, div.center div.center { margin-left: 1em; margin-right: 1em; text-align: center; } div.center p, footer p { text-align: center; } div.center div { text-align: left; } div.flushright, div.flushright div.flushright { text-align: right; } div.flushleft, div.flushright div { text-align: left; } .centerline, td.displaylines { text-align: center; } .rightline { text-align: right; } td.displaylines { white-space: nowrap; } /* Verbatim and code ========================================================================== */ pre.verbatim { clear: both; font-family: var(--font-mono); text-align: left; } code.verb, code.lstinline, pre.listings, pre.lstlisting, pre.lstinputlisting { font-family: var(--font-mono); } pre.listings, pre.lstlisting { margin: 0.5em 0; white-space: pre-wrap; } pre.fancyvrb { font-family: var(--font-mono); margin: 0; white-space: pre-wrap; } div.verbatiminput { font-family: var(--font-mono); white-space: nowrap; } /* Footnotes ========================================================================== */ div.footnotes { border-bottom: 1px solid var(--color-rule); border-top: 1px solid var(--color-rule); font-size: 0.85rem; font-style: italic; margin-right: 15%; margin-top: 2em; padding: 0.5em 0 1em 0; } div.footnotes p { margin: 0; text-indent: 0; } span.footnote-mark a sup.textsuperscript, span.footnote-mark sup.textsuperscript { font-size: 80%; } span.thank-mark { vertical-align: super; } /* Margin notes ========================================================================== */ .marginpar, .reversemarginpar { float: right; font-size: 0.85rem; margin-left: auto; margin-top: 0.5em; text-align: left; text-decoration: underline; width: 20%; } .marginpar p, .reversemarginpar p { margin: 0.4em 0; } .reversemarginpar { float: left; } /* Title and frontmatter ========================================================================== */ div.maketitle, h2.titleHead { text-align: center; } div.maketitle { margin-bottom: 2em; } div.author, div.date { text-align: center; } div.thanks { font-size: 0.85rem; font-style: italic; margin-left: 10%; text-align: left; } div.dedication, div.titlepage { text-align: center; } div.titlepage { margin-bottom: 2em; } h1.partHead { text-align: center; } /* TOC styling ========================================================================== */ .likepartToc, .likepartToc a, .partToc, .partToc a { font-size: 1.1rem; font-weight: 700; line-height: 2; } .addchapToc a, .appendixToc, .appendixToc a, .chapterToc, .chapterToc a, .likechapterToc, .likechapterToc a { font-weight: 700; line-height: 2; } /* Bibliography ========================================================================== */ p.bibitem { text-indent: -2em; } p.bibitem, p.bibitem-p { margin: 0.6em 0 0.6em 2em; } p.bibitem-p { text-indent: 0; } /* Paragraph headings ========================================================================== */ .paragraphHead, .likeparagraphHead { font-weight: 700; margin-top: 2em; } .subparagraphHead, .likesubparagraphHead { font-weight: 700; } /* Captions ========================================================================== */ .caption td.id, .caption span.id { font-weight: 700; white-space: nowrap; } div.caption { text-align: center; } /* Wrap figures ========================================================================== */ .wrapfig-r, .wrapfig-ir, .wrapfig-or, .wrapfig-ri, .wrapfig-ro { float: right; margin-left: 2em; margin-top: 0.5em; text-align: left; } .wrapfig-l, .wrapfig-il, .wrapfig-ol, .wrapfig-li, .wrapfig-lo { float: left; margin-right: auto; margin-top: 0.5em; text-align: left; } /* Miscellaneous LaTeX constructs ========================================================================== */ p.indent { text-indent: 0; } .obeylines-h, .obeylines-v { white-space: nowrap; } div.obeylines-v p { margin: 0; } .rotatebox { display: inline-block; } /* tcolorbox elements — left-accent-bar callouts ========================================================================== Each box type sets --accent to its colour; the shared rules below build the look from it: a thick coloured left bar, a soft tinted fill (the accent mixed into the page background, so it works in light and dark), and a coloured bold title instead of a filled heading bar. Less boxy, and harmonized. */ .tcolorbox { --accent: var(--color-info); margin: 1.4rem 0; border-left: 4px solid var(--accent); border-radius: 0 5px 5px 0; background: color-mix(in srgb, var(--accent) 7%, var(--color-bg)); overflow: hidden; line-height: 1.6em; } .tcolorbox .lowerbox { margin-top: 0; } .tcolorbox dl.enumerate-enumitem { margin-left: 0rem; } .tcolorbox > div.tcolorbox-content { padding: 0.5em 1.1em; color: var(--color-text-muted); } /* Some boxes start with `\quad\newline` to push the body below the inline title in the PDF. In HTML the title is already its own block, so that leading break is pure dead space — drop it. Mid-paragraph newline breaks aren't first-child, so they're unaffected. */ .tcolorbox > div.tcolorbox-content > p:first-child > br.newline:first-child { display: none; } /* Cross-ref targets (\label) land inside the box body, below the "Exercise 2.3" title. Extra scroll-margin so a jump to one reveals the title above it, instead of landing on the body text with the title clipped off the top. */ .tcolorbox a[id] { scroll-margin-top: 3.5rem; } .tcolorbox > div.tcolorbox-title { padding: 0.45em 1.1em 0; color: var(--accent); font-weight: 700; } .tcolorbox > div.tcolorbox-title p { margin: 0; } .tcolorbox > div.tcolorbox-title + div.tcolorbox-content { padding-top: 0.3em; } /* Per-type accent colours. */ .exercise, .essay { --accent: var(--color-task); } .example { --accent: var(--color-example); } .genericthm { --accent: var(--color-theorem); } .sources { --accent: var(--color-sources); } .justabox { --accent: var(--color-info); } /* All callout boxes are fully framed: a soft accent-tinted border on all sides, gently rounded corners, and a faint diagonal gradient fill. Box types stay distinguishable by their --accent colour. */ .exercise, .essay, .example, .genericthm, .sources, .justabox { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--color-border)); border-radius: 6px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 12%, var(--color-bg)), color-mix(in srgb, var(--accent) 4%, var(--color-bg))); } .sources { font-size: 0.9rem; } /* Map tex4ht font classes to styles by font family, ignoring the size suffix tex4ht appends (-12, -10x-x-109, -17x-x-143, …). Keying on the family rather than a specific size means small (\small) and large contexts get styled too. ========================================================================== */ [class*="ec-lmr"], /* Latin Modern Roman (upright and italic) */ [class*="xydash"] { font-size: inherit; /* don't let the size suffix resize text */ } [class*="ec-lmri"], /* roman italic */ [class*="cmmi"], /* math italic */ [class*="cmti"] { /* text italic */ font-style: italic; } [class*="ec-lmbxi"] { /* bold italic */ font-weight: 700; font-style: italic; } [class*="ec-lmbx"] { /* bold extended */ font-weight: 700; } [class*="ec-lmss"] { /* sans serif */ font-family: var(--font-sans); } [class*="ec-lmssbx"] { /* sans bold */ font-family: var(--font-sans); font-weight: 700; } [class*="ec-lmtt"] { /* typewriter */ font-family: var(--font-mono); }