:root{--page-margin:20.0mm}
@font-face{ font-family:'Inter'; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:800; font-display:swap; src:url('fonts/inter-800.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/serif-400.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/serif-400i.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/serif-600.woff2') format('woff2'); }
@font-face{ font-family:'Source Serif 4'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/serif-700.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url('fonts/jbmono-400.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-weight:500; font-display:swap; src:url('fonts/jbmono-500.woff2') format('woff2'); }
:root{
  --accent:#2563eb; --accent-dark:#1e40af; --error:#b42318;
  --ink:#1a1a1a; --muted:#6b7280; --rule:#e5e7eb;
  --body-font:'Inter'; --heading-font:'Inter'; --mono-font:'JetBrains Mono';
  
  --paper:#ffffff; --wash:#f6f7f9}
*{ box-sizing:border-box}
html, body{ margin:0; padding:0}
body{
  font-family:var(--body-font), system-ui, sans-serif;
  font-size:calc(var(--reader-size) * 0.9545); line-height:1.55; color:var(--ink);
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
  hyphens:auto}
h1, h2, h3, h4, h5, h6{ font-family:var(--heading-font), system-ui, sans-serif;
  color:var(--ink); font-weight:700; line-height:1.15; margin:0 0 3mm 0}
h1{ font-size:calc(var(--reader-size) * 2.182); letter-spacing:-0.02em}
h2{ font-size:calc(var(--reader-size) * 1.455); margin-top:6mm; letter-spacing:-0.01em}
h3{ font-size:calc(var(--reader-size) * 1.136); margin-top:4mm}
h4{ font-size:calc(var(--reader-size) * 1); margin-top:3mm}
p{ margin:0 0 3mm 0}
ul, ol{ margin:0 0 3mm 0; padding-left:6mm}
li{ margin-bottom:1mm}
blockquote{ margin:0 0 3mm 0; padding:0 0 0 5mm; border-left:2px solid var(--rule); color:var(--muted)}
hr{ border:0; border-top:1px solid var(--rule); margin:5mm 0}
a{ color:var(--accent-dark); text-decoration:none}
strong{ font-weight:700}
em{ font-style:italic}
img{ max-width:100%; height:auto}
sup, sub{ line-height:0}
figure{ margin:4mm 0; break-inside:avoid}
figure img{ width:100%; height:auto; display:block}
figure svg{ display:block; margin:0 auto; max-width:100%; height:auto}
figcaption{ font-size:calc(var(--reader-size) * 0.7727); color:var(--muted); margin-top:2mm; font-style:italic}
html{ counter-reset: figure audio}
figure[id^="fig-"]{ counter-increment: figure}
figure[id^="fig-"] > figcaption::before{
  content: var(--figure-label) " " counter(figure) ". ";
  font-style:normal; font-weight:600}
figure.audio audio{ width:100%}
.audio-print{ display:none}
@media print{audio{ display:none}
figure.audio{ border:0.3mm solid var(--rule); border-radius:1.5mm; padding:2.5mm 3mm}
figure.audio .audio-print{ display:block; font-family:var(--mono-font), monospace;
                              font-size:calc(var(--reader-size) * 0.7273); margin:0}
.audio-print::before{ content:"\25B6\00A0"}
figure.audio .audio-print [data-file]::after,
  figure.audio .audio-print[data-file]::after{ content:attr(data-file)}
span.audio-print{ display:inline}
span.audio-print [data-file]::after,
  span.audio-print[data-file]::after{ content:" (" attr(data-file) ")"}}
figure[id^="aud-"]{ counter-increment: audio}
figure[id^="aud-"] > figcaption::before{
  content: var(--audio-label) " " counter(audio) ". ";
  font-style:normal; font-weight:600}
.unit{ display:flow-root; margin:0 0 3.5mm 0}
.unit > *:last-child{ margin-bottom:0}
.codeblock{ position:relative}
.code-file{ display:block; font-family:var(--mono-font), monospace; font-size:calc(var(--reader-size) * 0.6364);
  color:var(--muted); margin:0 0 1mm 1mm}
.hl, pre.output{ background:var(--wash); border:1px solid var(--rule); border-radius:4px;
  padding:3mm 4mm; font-family:var(--mono-font), monospace; font-size:calc(var(--reader-size) * 0.7727); line-height:1.5; overflow:hidden}
.hl pre{ margin:0; background:none; border:0; padding:0; white-space:pre-wrap; word-break:break-word}
pre.output{ white-space:pre-wrap; word-break:break-word; color:var(--muted); border-left:2px solid var(--accent)}
pre.output.error{ border-left-color:var(--error)}
pre.output.error .stderr{ color:var(--error)}
code{ font-family:var(--mono-font), monospace; font-size:0.9em}
table{ border-collapse:collapse; width:100%; font-size:calc(var(--reader-size) * 0.8182)}
thead th{ text-align:left; font-size:calc(var(--reader-size) * 0.6818); letter-spacing:0.12em; text-transform:uppercase;
  font-weight:700; color:var(--muted); border-bottom:1.5px solid var(--ink); padding:2.5mm 3mm}
tbody td{ padding:2.5mm 3mm; border-bottom:1px solid var(--rule); vertical-align:top}
tbody tr{ break-inside:avoid}
tbody td strong{ color:var(--ink)}
.math-display{ text-align:center; margin:4mm 0}
.math-display svg{ max-width:100%}
.math-err{ color:#be123c; font-family:var(--mono-font), monospace}
.two-col{ columns:2; column-gap:8mm}
.two-col > *{ break-inside:avoid-column}
.three-col{ columns:3; column-gap:6mm}
.three-col > *{ break-inside:avoid-column}
.keep{ display:flow-root}
.stamp{ position:absolute; bottom:calc(var(--page-margin, 20mm) * 0.5);
  left:var(--page-margin, 20mm); right:var(--page-margin, 20mm); display:flex;
  justify-content:space-between; font-family:var(--heading-font), sans-serif;
  font-size:calc(var(--reader-size) * 0.7273); color:var(--muted)}
.runhead{ position:absolute; top:calc(var(--page-margin, 20mm) * 0.5);
  left:var(--page-margin, 20mm); right:var(--page-margin, 20mm);
  font-family:var(--heading-font), sans-serif; font-size:calc(var(--reader-size) * 0.7273); letter-spacing:0.08em; color:var(--muted)}
h1, h2, h3, h4, h5, h6{ hyphens: none}
thead th{ hyphens: none; overflow-wrap: break-word}
tbody td strong{ hyphens: none; overflow-wrap: break-word}
.no-hyphen{ hyphens: none; white-space: nowrap}
code{ hyphens: none; overflow-wrap: break-word}
.footnote-ref{ font-size: 0.72em; line-height: 0; vertical-align: super}
.footnote-ref a{ color: var(--accent-dark); text-decoration: none; border-bottom: none}
.footnote-ref a:hover{ text-decoration: underline}
.cite-ref{ white-space: nowrap}
.cite-ref a{ color: var(--accent-dark); text-decoration: none; border-bottom: none}
.gloss-ref{ color: var(--accent-dark); text-decoration: none;
             border-bottom: 0.4pt dotted currentColor}
.footnotes, .references, .glossary{
  margin-top: 6mm; padding-top: 3mm; border-top: 0.3mm solid var(--rule)}
.footnotes.labelled, .references.labelled, .glossary.labelled{
  border-top: none; padding-top: 0}
.apparatus-title{ font-size: calc(var(--reader-size) * 1.091); margin: 0 0 2.5mm 0}
.footnotes ol, .references ol, .glossary p{ font-size: calc(var(--reader-size) * 0.8182); line-height: 1.45; margin: 0}
.footnotes ol, .references ol{ padding-left: 6mm}
.footnotes li, .references li, .glossary p{ margin: 0 0 1.5mm 0}
.footnotes a, .references a, .glossary a{ color: var(--accent-dark); border-bottom: none}
.cite-back::after, .gloss-back::after{
                    font-variant-numeric: tabular-nums}
.timeline{ margin-top: 6mm; padding-top: 3mm; border-top: 0.3mm solid var(--rule)}
.timeline.labelled{ border-top: none; padding-top: 0}
.tl-group{ font-size: calc(var(--reader-size) * 0.9091); font-variant: small-caps; letter-spacing: 0.04em;
            color: var(--accent-dark); margin: 4mm 0 1.5mm 0; border-bottom: 0.2mm solid var(--rule)}
.timeline p{ font-size: calc(var(--reader-size) * 0.8182); line-height: 1.45; margin: 0 0 1.5mm 0; text-indent: 0}
.timeline a{ color: var(--accent-dark); border-bottom: none}
.tl-back::after{
                  font-variant-numeric: tabular-nums}
.footnote-inline{ float: footnote; font-size: calc(var(--reader-size) * 0.8182)}
:root{ --brand:var(--accent)}
body{
  font-family: var(--body-font), Georgia, "DejaVu Serif", serif;
  font-size:calc(var(--reader-size) * 1); line-height:1.55; color:var(--ink);
  counter-reset: chapter part}
p{ margin:0 0 0 0; text-indent:5mm; text-align:justify; hyphens:auto}
p:first-of-type, h1 + p, h2 + p, h3 + p{ text-indent:0}
.lead, blockquote p{ text-indent:0}
h1, h2, h3, h4{ font-family: var(--heading-font), system-ui, sans-serif; color:var(--ink)}
h1{
  counter-increment: chapter; counter-reset: section;
  font-size:calc(var(--reader-size) * 2.545); font-weight:800; line-height:1.05; letter-spacing:-0.02em; margin:0 0 10mm 0}
h1::before{
  content: counter(chapter);
  display:block; font-family:var(--body-font), serif; font-size:calc(var(--reader-size) * 5.818); font-weight:300;
  line-height:1; color:var(--accent); margin-bottom:2mm}
h1.unnumbered{ counter-increment: none}
h1.unnumbered::before{ content: none}
h1.part{ counter-increment: part; break-before: column}
h1.part::before{
  content: "Part " counter(part, upper-roman);
  display:block; font-family:var(--heading-font), system-ui, sans-serif;
  font-size:calc(var(--reader-size) * 1.273); font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  line-height:1; color:var(--accent); margin-bottom:4mm}
h2{ counter-increment: section; font-size:calc(var(--reader-size) * 1.364); font-weight:700; margin:7mm 0 3mm 0}
h3{ font-size:calc(var(--reader-size) * 1.136); font-weight:700; margin:5mm 0 2mm 0}
a{ color:var(--brand); text-decoration:none}
.page.titlepage{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center}
.tp-title{ font-family:system-ui,sans-serif; font-size:calc(var(--reader-size) * 3.455); font-weight:800; color:var(--brand); line-height:1.1; hyphens:none}
.tp-sub{ font-size:calc(var(--reader-size) * 1.273); color:var(--muted); margin-top:6mm; max-width:130mm; hyphens:none}
.tp-author{ margin-top:16mm; font-size:calc(var(--reader-size) * 1.091); color:var(--ink); letter-spacing:0.04em}
.tp-institution{ margin-top:3mm; font-size:calc(var(--reader-size) * 0.9091); color:var(--muted)}
.page.coverpage{ padding:0; overflow:hidden}
.cover-img{ width:100%; height:100%; object-fit:cover; display:block}
.page.copyrightpage{ display:flex; flex-direction:column}
.cp-spacer{ flex:1 1 auto}
.cp-block{ font-family:system-ui,sans-serif; font-size:calc(var(--reader-size) * 0.7727); color:var(--muted); line-height:1.7}
.cp-line{ margin:0 0 1mm 0}
.cp-line strong{ color:var(--ink)}
.cp-muted{ margin-top:4mm}
.stamp{
  position:absolute; bottom:10mm; left:20mm; right:20mm;
  display:flex; justify-content:space-between;
  font-family:system-ui,sans-serif; font-size:calc(var(--reader-size) * 0.7273); color:var(--muted)}
.runhead{
  position:absolute; top:11mm; left:20mm; right:20mm;
  font-family:system-ui,sans-serif; font-size:calc(var(--reader-size) * 0.7273); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--rule); padding-bottom:1.5mm}
.runhead-recto{ text-align:right}
.runhead-verso{ text-align:left}
.toc-h{ font-family:system-ui,sans-serif; font-size:calc(var(--reader-size) * 2.182); font-weight:800; color:var(--brand); margin:0 0 9mm 0}
.unit:has(.toc-entry){ margin-bottom:0}
.toc-entry{ display:flex; align-items:baseline; gap:2mm; text-decoration:none; color:var(--ink); line-height:1.3; margin:1mm 0}
.toc-entry::after{ font-variant-numeric:tabular-nums; color:var(--muted)}
.toc-txt{ flex:0 0 auto}
.toc-lead{ flex:1 1 auto; border-bottom:1px dotted var(--rule); transform:translateY(-1mm)}
.toc-l1{ font-weight:700; margin-top:3.5mm}
.toc-l2{ margin-left:9mm; font-size:calc(var(--reader-size) * 0.9091); color:var(--muted)}
.glossary{ border-top:none; padding-top:0; margin-top:0}
.glossary p{ text-indent:0}
.timeline{ border-top: none; padding-top: 0; margin-top: 0}
.codeblock{ position:relative}
.code-file{ display:block; font-family:ui-monospace, monospace; font-size:calc(var(--reader-size) * 0.6364); color:var(--muted); margin:0 0 1mm 1mm}
.hl, pre.output{ background:#f6f7f9; border:1px solid var(--rule); border-radius:4px;
  padding:3mm 4mm; font-family:ui-monospace, monospace; font-size:calc(var(--reader-size) * 0.7727); line-height:1.5}
.hl pre{ margin:0; background:none; border:0; padding:0; white-space:pre-wrap; word-break:break-word}
pre.output{ white-space:pre-wrap; color:var(--muted); border-left:3px solid var(--brand)}
.math-display{ text-align:center; margin:4mm 0}
.math-display svg{ max-width:100%}
:root{--mono-font:'JetBrains Mono';--rule:#e5e7eb;--heading-font:Inter;--ink:#1a1a1a;--muted:#6b7280;--audio-label:"Audio";--body-font:'Source Serif 4';--figure-label:"Figure";--accent:#9a3412;--accent-dark:#7c2d12}
pre{ line-height: 125%}
td.linenos .normal{ color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px}
span.linenos{ color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px}
td.linenos .special{ color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px}
span.linenos.special{ color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px}
.hl .hll{ background-color: #ffffcc }
.hl{ background: #f8f8f8}
.hl .c{ color: #3D7B7B; font-style: italic }
.hl .err{ border: 1px solid #F00 }
.hl .k{ color: #008000; font-weight: bold }
.hl .o{ color: #666 }
.hl .ch{ color: #3D7B7B; font-style: italic }
.hl .cm{ color: #3D7B7B; font-style: italic }
.hl .cp{ color: #9C6500 }
.hl .cpf{ color: #3D7B7B; font-style: italic }
.hl .c1{ color: #3D7B7B; font-style: italic }
.hl .cs{ color: #3D7B7B; font-style: italic }
.hl .gd{ color: #A00000 }
.hl .ge{ font-style: italic }
.hl .ges{ font-weight: bold; font-style: italic }
.hl .gr{ color: #E40000 }
.hl .gh{ color: #000080; font-weight: bold }
.hl .gi{ color: #008400 }
.hl .go{ color: #717171 }
.hl .gp{ color: #000080; font-weight: bold }
.hl .gs{ font-weight: bold }
.hl .gu{ color: #800080; font-weight: bold }
.hl .gt{ color: #04D }
.hl .kc{ color: #008000; font-weight: bold }
.hl .kd{ color: #008000; font-weight: bold }
.hl .kn{ color: #008000; font-weight: bold }
.hl .kp{ color: #008000 }
.hl .kr{ color: #008000; font-weight: bold }
.hl .kt{ color: #B00040 }
.hl .m{ color: #666 }
.hl .s{ color: #BA2121 }
.hl .na{ color: #687822 }
.hl .nb{ color: #008000 }
.hl .nc{ color: #00F; font-weight: bold }
.hl .no{ color: #800 }
.hl .nd{ color: #A2F }
.hl .ni{ color: #717171; font-weight: bold }
.hl .ne{ color: #CB3F38; font-weight: bold }
.hl .nf{ color: #00F }
.hl .nl{ color: #767600 }
.hl .nn{ color: #00F; font-weight: bold }
.hl .nt{ color: #008000; font-weight: bold }
.hl .nv{ color: #19177C }
.hl .ow{ color: #A2F; font-weight: bold }
.hl .w{ color: #BBB }
.hl .mb{ color: #666 }
.hl .mf{ color: #666 }
.hl .mh{ color: #666 }
.hl .mi{ color: #666 }
.hl .mo{ color: #666 }
.hl .sa{ color: #BA2121 }
.hl .sb{ color: #BA2121 }
.hl .sc{ color: #BA2121 }
.hl .dl{ color: #BA2121 }
.hl .sd{ color: #BA2121; font-style: italic }
.hl .s2{ color: #BA2121 }
.hl .se{ color: #AA5D1F; font-weight: bold }
.hl .sh{ color: #BA2121 }
.hl .si{ color: #A45A77; font-weight: bold }
.hl .sx{ color: #008000 }
.hl .sr{ color: #A45A77 }
.hl .s1{ color: #BA2121 }
.hl .ss{ color: #19177C }
.hl .bp{ color: #008000 }
.hl .fm{ color: #00F }
.hl .vc{ color: #19177C }
.hl .vg{ color: #19177C }
.hl .vi{ color: #19177C }
.hl .vm{ color: #19177C }
.hl .il{ color: #666 }
html,body{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{break-after:avoid}
.pagebreak{break-before:column;display:block;height:0;margin:0;padding:0}
.unit{display:flow-root}
.unit.break-before{break-before:column}
.unit.keep{break-inside:avoid}
figure{break-inside:avoid;margin:4mm 0}
figcaption{font-size:calc(var(--reader-size) * 0.7727);color:var(--muted);margin-top:2mm}
.unit img,figure img{width:100%;height:auto;display:block}
/* The HTML book's reader. Appended after the theme's CSS (filtered for the
   browser), so the book keeps its theme's fonts and colours; this file adds the
   page geometry, the chrome and the reading modes. A theme may append its own
   reader.css after this one. */

:root {
  --paper: #fffdf8; --desk: #2b2118;
  --chrome-bg: rgba(255,253,248,.94); --chrome-ink: var(--ink);
  --reader-size: 19px;
  /* geometry, written by reader.js */
  --stage-x: 0px; --stage-y: 0px; --stage-w: 100vw; --stage-h: 100vh;
  --m: 24px; --pad-y: 40px; --col: 300px; --gap: 48px;
}
[data-mode=sepia] { --paper:#f4ecd8; --ink:#3a2e20; --muted:#8c7a60; --rule:#d9ccb0; --chrome-bg:rgba(244,236,216,.95); }
[data-mode=dark]  { --paper:#1c1a17; --ink:#d9d1c3; --muted:#8d8476; --rule:#3a362f; --desk:#0e0d0b; --chrome-bg:rgba(28,26,23,.95); color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--desk); }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; touch-action: pan-y pinch-zoom; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#stage { position:fixed; left:var(--stage-x); top:var(--stage-y); width:var(--stage-w); height:var(--stage-h); overflow:hidden; user-select:none; -webkit-user-select:none; }
#paper { position:absolute; inset:0; display:flex; }
#paper > div { flex:1; background:var(--paper); }
.spread #paper > div:first-child { box-shadow: inset -28px 0 30px -26px rgba(0,0,0,.28); border-radius: 6px 0 0 6px; }
.spread #paper > div:last-child  { box-shadow: inset 28px 0 30px -26px rgba(0,0,0,.28); border-radius: 0 6px 6px 0; }
body:not(.spread) #paper > div:last-child { display:none; }

/* The book: one multi-column strip. The browser breaks the text into columns
   one page wide; turning a page translates the strip by one screen. */
.book {
  position:relative; height:100%; padding: var(--pad-y) var(--m);
  column-width: var(--col); column-gap: var(--gap); column-fill: auto;
  font-size: var(--reader-size); color: var(--ink); overflow-wrap: anywhere;
}
#book { will-change: transform; }
#book.animate { transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.book p { hyphens: auto; -webkit-hyphens: auto; orphans: 2; widows: 2; }
.book a { color: var(--brand, var(--accent)); }
.book img { -webkit-user-drag: none; user-drag: none; pointer-events: none; max-width: 100%; height: auto; }
.book pre { white-space: pre-wrap; }
.book table { display: block; max-width: 100%; overflow-x: auto; }
.book figure { break-inside: avoid; }
/* Image boxes never depend on the image having loaded: the full column width,
   the height from the width/height attributes' ratio, capped, and the picture
   fitted inside. A box sized by the loaded image would give a chapter another
   page count in the hidden strip than on the stage. */
.book figure img { width: 100%; height: auto; max-height: calc(var(--stage-h) - 2 * var(--pad-y) - 5em); object-fit: contain; margin: 0 auto; }

.chapter { break-before: column; -webkit-column-break-before: always; }
.book p.dropcap::first-letter { font-size: 3.1em; float: left; line-height: .85; padding: .06em .08em 0 0; color: var(--accent); font-weight: 600; }

/* full pages: the cover, the title page, a figure.fullpage, a master, a blank */
.fullpage, .titlepage, .blank {
  height: calc(var(--stage-h) - 2 * var(--pad-y)); margin: 0;
  break-after: column; -webkit-column-break-after: always; break-inside: avoid;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.blank { break-before: column; -webkit-column-break-before: always; }
.book .fullpage img, .book .fullpage figure img { width:100%; height:100%; max-height:none; object-fit: contain; }
.book .fullpage figure { margin: 0; width: 100%; height: 100%; }
.cover img { filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }
.titlepage .book-title { font-family: var(--heading-font), var(--body-font), serif; font-weight:700; font-size: 2.1em; line-height:1.1; margin: 0 0 .6em; hyphens:none; text-indent: 0; }
.titlepage .book-subtitle { font-style: italic; color: var(--muted); text-indent: 0; }
.titlepage .book-author { margin-top: 3em; font-size: .85em; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-indent: 0; }

#folio { position:fixed; left:var(--stage-x); width:var(--stage-w); top: calc(var(--stage-y) + var(--stage-h) - var(--pad-y) * .72); display:flex; pointer-events:none;
  font: 12px/1 var(--body-font), Georgia, serif; color: var(--muted); font-variant-numeric: oldstyle-nums; }
#folio span { flex:1; text-align:center; }
body:not(.spread) #folio-r { display:none; }

#bar, #foot { position:fixed; left:0; right:0; display:flex; align-items:center; gap:.6em; padding: .5em .8em; background: var(--chrome-bg); color: var(--chrome-ink);
  font: 15px/1.2 system-ui, sans-serif; transition: transform .22s ease; z-index: 5; backdrop-filter: blur(6px); }
#bar { top:0; padding-top: max(.5em, env(safe-area-inset-top)); transform: translateY(-110%); box-shadow: 0 1px 0 rgba(0,0,0,.08); }
#foot { bottom:0; padding-bottom: max(.6em, env(safe-area-inset-bottom)); transform: translateY(110%); box-shadow: 0 -1px 0 rgba(0,0,0,.08); }
.chrome #bar, .chrome #foot { transform: none; }
#bar-title { flex:1; text-align:center; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bar button { padding:.35em .6em; border-radius:6px; font-size: 1.05em; min-height: 44px; min-width: 44px; }
#btn-install { font-size: .85em !important; border: 1px solid currentColor !important; min-height: 0 !important; }
#foot-chapter { flex: 0 1 34%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--muted); font-size: .85em; }
#scrub { flex: 1; accent-color: var(--accent); }
#foot-page { font-variant-numeric: tabular-nums; font-size: .85em; color: var(--muted); min-width: 4.5em; text-align: right; }
#foot-offline { font-size: .8em; color: var(--muted); }

.panel { position:fixed; top:0; bottom:0; width:min(86vw, 360px); background: var(--paper); color: var(--ink); z-index: 6; overflow:auto;
  padding: max(1.2em, env(safe-area-inset-top)) 1.3em 1.5em; font: 16px/1.4 var(--body-font), Georgia, serif;
  box-shadow: 0 0 40px rgba(0,0,0,.35); transition: transform .25s ease; }
/* open state through the id, so it outranks the closed state's id rule */
#toc { left:0; transform: translateX(-105%); }
#settings { right:0; transform: translateX(105%); }
#toc[data-open], #settings[data-open] { transform: none; }
.panel h2 { font-size: 1.15em; margin: 0 0 .8em; }
#toc-list { list-style:none; padding:0; margin:0; }
#toc-list a { display:block; padding:.55em .2em; color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
#toc-list a.here { color: var(--accent); font-weight: 600; }
/* a part heads a collapsible group; its label comes from the theme's h1.part */
#toc-list { counter-reset: part; }
#toc-list .toc-part { counter-increment: part; }
#toc-list .toc-part summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .5em;
  margin-top: 1.2em; padding: .55em .2em; border-bottom: 1px solid var(--rule); color: var(--accent); }
#toc-list .toc-part summary::-webkit-details-marker { display: none; }
#toc-list .toc-part summary::after { content: "›"; margin-left: auto; transition: transform .2s; }
#toc-list .toc-part details[open] > summary::after { transform: rotate(90deg); }
#toc-list .toc-part-label { flex: none; font-size: .75em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
#toc-list .toc-part-title { font-weight: 700; font-variant: small-caps; letter-spacing: .03em; }
#toc-list .toc-part ol { list-style: none; padding: 0 0 0 .9em; margin: 0; }
#settings .row { display:flex; align-items:center; gap:.5em; margin: .7em 0; }
#settings .row span { flex:1; }
#settings button { border: 1px solid var(--rule); border-radius: 8px; padding: .4em .8em; min-height: 44px; }
#settings button.on { border-color: var(--accent); color: var(--accent); }
#install-hint { font-size: .9em; color: var(--muted); }

#toast { position:fixed; left:50%; bottom: 4.5em; transform: translate(-50%, 20px); opacity:0; pointer-events:none; z-index:7;
  background: #2b2118; color:#f6efe2; padding:.6em 1em; border-radius: 10px; font: 14px/1.3 system-ui, sans-serif; transition: all .25s ease; max-width: 90vw; }
#toast.show { opacity:1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { color: #f2b27c; font-weight: 600; margin-left: .6em; }

/* where chapters are laid out out of sight to count their pages: the same
   size and the same rules as the stage, never painted. Far away, because
   Chrome fetches a lazy image within about a screen of the viewport even when
   hidden: at -200vw a phone fetched every chapter's first image */
#measure { position:fixed; left:0; top:0; width:var(--stage-w); height:var(--stage-h); overflow:hidden;
  visibility:hidden; pointer-events:none; transform: translate(-100000px, -100000px); contain: strict; }

#toc-list .toc-part-label::before { content: "Part " counter(part, upper-roman); }