:root{--paper:#cdd1ca;--ink:#171717;--red:#d4402b;--desk:#2a2a29;--edge:#e2e5de;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#2c2e2c;--ink:#e7e3d6;--red:#ef5a42;--desk:#111;--edge:#3a3c3a}}
:root[data-theme="dark"]{--paper:#2c2e2c;--ink:#e7e3d6;--red:#ef5a42;--desk:#111;--edge:#3a3c3a}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Jost",Futura,"Helvetica Neue",Arial,sans-serif}
.book{position:relative;max-width:1180px;margin:0 auto;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.pg{position:relative;padding:56px 54px 84px}
.left{padding-right:60px}.right{padding-left:60px;display:flex;align-items:center;justify-content:center}
.body,.num{transition:opacity .38s ease}
.out .body,.out .num{opacity:0}
.num{position:absolute;bottom:34px;font-size:15px}
.left .num{left:56px}.right .num{right:56px}
.credit{position:absolute;left:0;right:0;bottom:34px;text-align:center;font-size:12.5px;opacity:.7}
.left .body{max-width:520px;margin:0 auto}
.right .body{width:100%;display:flex;justify-content:center}
h2{font-size:15px;font-weight:700;text-align:center;letter-spacing:.08em;text-transform:uppercase;margin:0 0 20px}
.big h2{font-size:26px;margin-bottom:8px}
h3{font-size:15px;font-weight:700;margin:26px 0 8px}
.links{text-align:center;margin-top:26px;font-size:15px}.links a{color:inherit}.links a:hover,.links a:focus-visible{color:var(--red)}
.pg p a{color:inherit;text-underline-offset:3px}.pg p a:hover,.pg p a:focus-visible{color:var(--red)}
.sub{text-align:center;font-style:italic;margin:0 0 24px;font-size:16px}
p{font-size:16px;line-height:1.46;text-align:justify;hyphens:auto;margin:0}
p+p{margin-top:.75em}
.toc{list-style:none;margin:0;padding:0}
.toc button,.back{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.toc button{display:flex;align-items:baseline;gap:8px;width:100%;padding:7px 0;text-align:left;font-size:17px}
.toc i{flex:1;border-bottom:1.6px dotted currentColor;opacity:.55;transform:translateY(-3px)}
.toc button:hover span,.toc button:focus-visible span,.back:hover,.back:focus-visible{color:var(--red);text-decoration:underline}
.back{display:block;margin-top:28px;padding:0;font-style:italic;font-size:16px}
svg{width:100%;max-width:380px;height:auto;display:block}
.lb{font:700 14.5px "Jost",Futura,"Helvetica Neue",Arial,sans-serif;letter-spacing:.01em;fill:var(--ink)}
.lr{fill:var(--red)}.lw{fill:var(--paper)}.hl{paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.f-i{fill:var(--ink)}.f-r{fill:var(--red)}.f-p{fill:var(--paper)}
.s-i{stroke:var(--ink)}.s-r{stroke:var(--red)}
.cell{fill:none;stroke:var(--ink);stroke-opacity:.3}
@media (prefers-reduced-motion:reduce){.body,.num{transition:none}}
@media (max-width:820px){
.book{display:flex;flex-direction:column;padding-bottom:84px}
.pg{position:static;padding:36px 26px 0}
.right{padding-top:28px;flex-direction:column}
.left .body{max-width:none}
.left .num{left:26px}.right .num{right:26px}.num{font-size:14px}
.right svg{max-width:340px;max-height:62svh;margin:0 auto}
.credit{padding:0 60px;font-size:11.5px}
.book.inner{padding:36px 26px 84px}
.book.inner .pg,.book.inner .body{display:contents}
.book.inner h2,.book.inner .sub{order:0}
.book.inner .right svg{order:1;align-self:center;margin:6px auto 0}
.book.inner .body>p:not(.sub),.book.inner .back{order:3}
}