/* From ε to Worlds · web edition. The book's own sheet (the same one Paperback uses) is appended below this file by build.py.
   Two themes from the system setting: a pure-black page with warm ink (the Paperback look), or warm paper. */
@font-face { font-family: Literata; src: url(fonts/Literata.ttf) format('truetype'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: Literata; src: url(fonts/Literata-Italic.ttf) format('truetype'); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #000; --ink: #c2baa9; --dim: #6c665b; --k: 78%;
  --amber: color-mix(in srgb, #f0bd62 var(--k), #000); --blue: color-mix(in srgb, #9dc0f5 var(--k), #000);
  --green: color-mix(in srgb, #a5d6a0 var(--k), #000); --red: color-mix(in srgb, #f0a090 var(--k), #000);
  --rule: color-mix(in srgb, var(--ink) 28%, var(--bg));
  --font: Literata, Georgia, serif; --fs: 19px; --lhpx: 29px; --measure: 40rem;
}
@media (prefers-color-scheme: light) {
  :root { color-scheme: light;
    --bg: #f7f3ea; --ink: #2b2620; --dim: #8b8377;
    --amber: #9a5d04; --blue: #2c5aa0; --green: #2f6f2b; --red: #a8392b;
    --rule: color-mix(in srgb, var(--ink) 22%, var(--bg)); }
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 440 var(--fs)/var(--lhpx) var(--font); font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
@media (max-width: 560px) { :root { --fs: 17.5px; --lhpx: 27px; } }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; }
i, em { font-style: italic; }

/* page furniture */
.top { position: sticky; top: 0; z-index: 5; display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
  padding: 10px max(16px, calc((100vw - var(--measure)) / 2)) 9px; background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); font-size: 15px; line-height: 1.3; }
.top .home { color: var(--ink); font-weight: 600; white-space: nowrap; } .top .home i { color: var(--amber); }
.top .where { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
main#content { max-width: var(--measure); margin: 0 auto; padding: 8px 16px 32px; }
.pn { max-width: var(--measure); margin: 0 auto; padding: 0 16px 24px; display: flex; justify-content: space-between; gap: 16px; font-size: 16px; line-height: 1.4; }
.pn a { max-width: 48%; } .pn .next { text-align: right; margin-left: auto; }
.foot { max-width: var(--measure); margin: 0 auto; padding: 18px 16px 48px; border-top: 1px solid var(--rule); color: var(--dim); font-size: 14px; line-height: 1.5; }
.foot p { margin: 0 0 4px; } .foot a { color: var(--dim); }
.draftnote { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red) !important; margin: 10px 0 0 !important; }

/* body text: justified with hyphenation, as in the Paperback edition */
#content p, #content li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
#content h2, #content h3, #content h4 { font-weight: 600; color: var(--ink); }
#content h3 { scroll-margin-top: 64px; }
#content sup, #content sub { line-height: 0; }
#content hr { border: 0; border-top: 1px solid var(--rule); margin: var(--lhpx) 0; }

/* chapter opener: numeral, title, rule, reading time, sections */
#content .opener { padding: calc(var(--lhpx) * 2) 0 calc(var(--lhpx) * 1.2); }
#content .opener .o-num { display: block; font-size: 5.2em; line-height: 1.05; font-weight: 300; color: var(--amber); font-variant-numeric: lining-nums; margin-bottom: .18em; }
#content .opener :is(h1, h2) { font-size: 2.1em; line-height: 1.12; font-weight: 600; margin: 0; text-align: left; text-wrap: balance; }
#content .opener h1 i { color: var(--amber); }
#content .opener .o-rule { display: block; width: 56px; height: 2px; background: var(--amber); margin: 1.1em 0; }
#content .opener .o-meta { display: block; font-size: .78em; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); line-height: 1.5; }
#content .opener .o-authors { margin-top: .6em; font-style: italic; color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
#content .opener .o-toc { list-style: none; padding: 0; margin: 1.2em 0 0; font-size: .92em; line-height: 1.5; }
#content .opener .o-toc li { margin: 3px 0; text-align: left; } #content .opener .o-toc a { color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
#content .opener .o-toc a:hover { color: var(--blue); }
#content.cover .opener { padding-top: calc(var(--lhpx) * 3); }
#content.cover .opener h1 { font-size: 2.8em; }
#content ol.p-list li, #content .o-toc li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
#content ol.p-list li.later { color: color-mix(in srgb, var(--ink) 55%, var(--bg)); }
#content ol.p-list a { color: var(--ink); } #content ol.p-list a:hover { color: var(--blue); }

/* mathematics */
#content math, #content math * { font-family: "STIX Two Math", "Latin Modern Math", "Cambria Math", math; }
#content math { font-size: 1.04em; }
#content .m-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }

/* answers behind a tap */
#content details > summary { cursor: pointer; list-style: none; display: inline-block; color: var(--blue); font-variant-caps: all-small-caps; letter-spacing: .08em;
  border: 1px solid var(--rule); border-radius: 5px; padding: 0 10px; margin: 4px 0; line-height: 1.7; user-select: none; }
#content details > summary::-webkit-details-marker { display: none; } #content details[open] > summary { color: var(--dim); }

/* interactive figures */
#content .widget { margin: 6px 0 2px; }
#content .widget svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; touch-action: none; overflow: visible; }
#content .widget .drag { cursor: ew-resize; }
#content .w-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; max-width: 560px; margin: 8px auto 0;
  font-size: 15px; line-height: 1.35; font-variant-numeric: lining-nums tabular-nums; }
#content .w-controls label { color: var(--dim); white-space: nowrap; }
#content .w-controls output { color: var(--amber); min-width: 4.5em; text-align: right; }
#content .w-controls input[type=range] { width: 100%; accent-color: var(--amber); }
#content .w-controls button { grid-column: 1 / -1; justify-self: start; font: inherit; font-size: 14px; color: var(--blue); background: none;
  border: 1px solid var(--rule); border-radius: 5px; padding: 2px 10px; cursor: pointer; }
#content .w-read { max-width: 560px; margin: 6px auto 0; font-size: 15px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 85%, var(--bg));
  font-variant-numeric: lining-nums tabular-nums; text-align: left !important; min-height: 2.9em; }
#content .w-read b { color: var(--amber); font-weight: 600; }
#content .w-try { max-width: 560px; margin: 2px auto 0; font-size: 13.5px; letter-spacing: .02em; color: var(--green); text-align: left !important; }

#content .opener .o-num p, #content .opener .o-meta p { font-size: inherit !important; line-height: inherit !important; margin: 0 !important; text-indent: 0 !important; color: inherit !important; }
#content .opener .o-rule p { display: none; }
#content .opener .art-wrap { flex: none; width: min(100%, 460px); margin-top: calc(var(--lhpx) * 1.5); }
#content :is(h3, h4) { text-align: left !important; letter-spacing: 0 !important; hyphens: none; -webkit-hyphens: none; break-after: avoid; }
#content h3 { font-size: 1.2em !important; font-weight: 600; line-height: 1.25 !important; margin: calc(var(--lhpx) * 1.3) 0 calc(var(--lhpx) * .5) !important; color: var(--ink) !important; }
#content h3::first-line { color: inherit; }
#content h4.p-part { font-size: .8em !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--amber) !important; margin: var(--lhpx) 0 calc(var(--lhpx) * .3) !important; font-weight: 600; }
#content ol.p-list { margin: 0; padding-left: 1.6em; text-align: left; hyphens: none; -webkit-hyphens: none; font-size: .92em; } #content ol.p-list li { margin: 2px 0; line-height: 1.4; } #content ol.p-list li::marker { color: var(--amber); font-variant-numeric: lining-nums; } #content ol.p-list b { font-weight: 600; }
#content p { text-indent: 0 !important; margin: 0 0 calc(var(--lhpx) * .5) !important; }
#content .dropcap { float: left; font-size: calc(var(--lhpx) * 2.55) !important; line-height: calc(var(--lhpx) * 2) !important; padding: 0 .08em 0 0; margin-top: .05em; color: var(--amber) !important; }
#content .box { --c: var(--amber); margin: calc(var(--lhpx) * .8) 0 !important; padding: calc(var(--lhpx) * .45) 13px; border-left: 2px solid var(--c); background: color-mix(in srgb, var(--c) 9%, var(--bg)) !important; border-radius: 0 7px 7px 0; }
#content .box p:last-child { margin-bottom: 0 !important; }
#content .box p, #content .box li { text-align: left; }   /* inline formulas cannot break: ragged-right avoids rivers in the narrower boxes */
#content .box > p:first-child > strong:first-child { color: var(--c) !important; font-variant-caps: all-small-caps; letter-spacing: .08em; font-weight: 700; }
#content .b-why { --c: var(--green); background: transparent !important; border-left-style: double; border-left-width: 4px; } #content .b-check { --c: var(--dim); background: transparent !important; } #content .b-check ol { margin: 4px 0; } #content .b-check details p, #content .b-check details li { font-size: .92em !important; color: color-mix(in srgb, var(--ink) 80%, var(--bg)) !important; }
#content .b-definition { --c: var(--blue); } #content .b-theorem { --c: var(--amber); } #content .b-warning { --c: var(--red); } #content .b-forward { --c: color-mix(in srgb, var(--blue) 70%, var(--green)); background: transparent !important; border-left-style: dashed; }
#content .b-proof { --c: var(--rule); background: transparent !important; border-left-width: 1px; padding-top: 0; padding-bottom: 0; } #content .b-proof > p:first-child > em:first-child { color: var(--dim) !important; }
#content .b-idea { --c: var(--blue); } #content .b-example { --c: var(--green); } #content .b-remark { --c: color-mix(in srgb, var(--ink) 60%, var(--bg)); } #content .b-papers { --c: var(--amber); }
#content .b-goal { --c: var(--blue); background: transparent !important; border-left-style: dotted; } #content .b-goal p { font-size: .94em !important; }
#content .b-answers { --c: var(--dim); background: transparent !important; } #content .b-answers p { font-size: .88em !important; line-height: 1.45 !important; color: color-mix(in srgb, var(--ink) 75%, var(--bg)) !important; }
#content code { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; font-size: .84em; color: var(--green) !important; hyphens: none; -webkit-hyphens: none; }
#content strong { font-weight: 650; } #content ul, #content ol { margin: 0 0 calc(var(--lhpx) * .5); padding-left: 1.4em; } #content li { margin: 3px 0; } #content li::marker { color: var(--amber); }
#content math[display="block"] { margin: calc(var(--lhpx) * .6) 0; }
#content .art-wrap { display: block; text-align: center; margin: var(--lhpx) auto; break-inside: avoid; } #content .art-wrap svg { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; overflow: visible; }
#content .art .i { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } #content .art .d { fill: none; stroke: var(--dim); stroke-width: 1.3; } #content .art .a { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; }
#content .art .fa { fill: var(--amber); } #content .art .fd { fill: var(--dim); } #content .art .fi { fill: var(--ink); }
#content .plot { max-width: 560px !important; } #content .plot polyline, #content .plot path, #content .plot circle.p-dash { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
#content .plot .p-ink { stroke: var(--ink); } #content .plot .p-dim { stroke: var(--dim); } #content .plot .p-amb { stroke: var(--amber); } #content .plot .p-blue { stroke: var(--blue); } #content .plot .p-green { stroke: var(--green); }
#content .plot .thick { stroke-width: 2.4; } #content .plot .p-axis { stroke: var(--rule); stroke-width: 1; } #content .plot .p-dash { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 5; }
#content .plot .bar { fill: color-mix(in srgb, var(--blue) 38%, var(--bg)); } #content .plot .band { stroke: none; fill: var(--amber); } #content .plot .b3 { fill-opacity: .10; } #content .plot .b2 { fill-opacity: .16; } #content .plot .b1 { fill-opacity: .24; }
#content .plot text { font-family: var(--font); font-size: 13px; fill: var(--dim); stroke: none; } #content .plot text.ta { fill: var(--amber); } #content .plot text.ts { font-size: 10.5px; } #content .plot text.big { fill: var(--amber); font-size: 15px; font-weight: 600; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; }
#content figure.fig { margin: var(--lhpx) 0 !important; break-inside: avoid; } #content figure.fig figcaption { font-size: .84em !important; line-height: 1.4 !important; text-align: left; hyphens: none; -webkit-hyphens: none; margin-top: 4px; color: color-mix(in srgb, var(--ink) 74%, var(--bg)) !important; } #content figure.fig figcaption strong { color: var(--amber) !important; font-variant-caps: all-small-caps; letter-spacing: .06em; }
#content table { font-size: .88em; margin: calc(var(--lhpx) * .7) auto !important; border-collapse: collapse; } #content th { color: var(--amber) !important; font-weight: 600; text-align: left; border-bottom: 1px solid var(--rule); padding: 3px 8px; } #content td { padding: 3px 8px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, var(--bg)); vertical-align: top; text-align: left; hyphens: none; -webkit-hyphens: none; }
#content:not(.designed) .opener :is(h1, h2) { font-size: 1.5em !important; text-align: left !important; letter-spacing: 0 !important; }