@charset "UTF-8";
/*! reasonable colors v0.4.0 | MIT License | https://github.com/matthewhowell/reasonable-colors */
/* ******

Format for SCSS variables: $color-COLORNAME-SHADE

Available values for COLORNAME:
	gray,
	rose, raspberry, red, orange, cinnamon, amber, yellow, lime,
	chartreuse, green, emerald, aquamarine, teal, cyan, powder, sky
	cerulean, azure, blue, indigo, violet, purple, magenta, pink

Available values for SHADE:
	1, 2, 3, 4, 5, 6

Minimum contrast can be inferred by the difference between two SHADE numbers

- Difference of 2: (3:1)
- Difference of 3: (4.5:1)
- Difference of 4: (7:1)

reasonable-colors.css uses hex values. HSL, LCH, and RGB color spaces are available.

For .scss friendly variable declarations, FILENAME.scss for each color space are provided.

More information available at: https://www.reasonable.work/colors 

****** */
/* gray */
/* rose */
/* hue 1 */
/* raspberry */
/* hue 2 */
/* red */
/* hue 3 */
/* orange */
/* hue 4 */
/* cinnamon */
/* hue 5 */
/* amber */
/* hue 6 */
/* yellow */
/* hue 7 */
/* lime */
/* hue 8 */
/* chartreuse */
/* hue 9 */
/* green */
/* hue 10 */
/* emerald */
/* hue 11 */
/* aquamarine */
/* hue 12 */
/* teal */
/* hue 13 */
/* cyan */
/* hue 14 */
/* powder */
/* hue 15 */
/* sky */
/* hue 16 */
/* cerulean */
/* hue 17 */
/* azure */
/* hue 18 */
/* blue */
/* hue 19 */
/* indigo */
/* hue 20 */
/* violet */
/* hue 21 */
/* purple */
/* hue 22 */
/* magenta */
/* hue 23 */
/* pink */
/* hue 24 */
:root {
  --margin-avail: calc((100vw - 560px) / 2);
  --side-w: clamp(160px, var(--margin-avail) - 48px, 240px);
  --side-pull: min(calc(var(--side-w) + 32px), var(--margin-avail));
}

html {
  background: white;
  font-family: "PT Sans", sans-serif;
  font-size: 16px;
  font-size-adjust: ex-height 0.53;
  line-height: 1.5;
  box-sizing: border-box;
}

* + * {
  margin-top: 1.5em; /* line height */
}

.katex {
  font-size-adjust: none;
}

.katex * {
  margin-top: 0;
}

a {
  color: #0061fc;
}
a:visited {
  color: #b01fe3;
}

code {
  font-family: "PT Mono", monospace;
  font-size-adjust: ex-height 0.46;
}

.monospace {
  font-family: "PT Mono", monospace;
  font-size-adjust: ex-height 0.46;
}

p code {
  color: #004734;
  line-height: 1;
}

main#container {
  align-content: center;
  margin-top: 3em;
}
main#container > * {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5em;
}
main#container > header:first-child {
  margin-bottom: 0;
}
main#container > :first-child + * {
  margin-top: 0;
}

.intro {
  max-width: 560px;
}

a.∞ {
  text-decoration: none;
}
@media (min-width: 720px) {
  a.∞ {
    float: left;
    margin-left: -2rem;
  }
}

.intermission {
  max-width: 624px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px;
  border: #fd4d00 dashed 3px;
  font-size: inherit;
}
.intermission h2 {
  margin-left: -24px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5em;
  color: #fd4d00;
}
.intermission h2 a {
  color: inherit;
}
.intermission h2 a:visited {
  color: inherit;
}
.intermission .no-bullet-inline-list {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 1em;
  width: 100%;
}
.intermission .no-bullet-inline-list > li {
  display: inline;
  white-space: nowrap;
}
.intermission .no-bullet-inline-list > li + li::before {
  content: "· ";
  color: #cd3c00;
}

article + article {
  margin-top: 7em;
}
article > .p-author {
  display: none;
}
article > * {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 560px;
}
article > div {
  margin-top: 0;
}
article > div > *:first-child {
  margin-top: 0;
}
article > header {
  opacity: 0.5;
  max-width: 560px;
  font-size: 80%;
  margin-bottom: 0.2rem;
  font-family: "PT Mono", monospace;
  border-top: 1px solid #8b8b8b;
  border-bottom: 1px solid #e2e2e2;
}
article > header time.dt-published {
  font-size: 70%;
}
article > header time.dt-updated:not(.dt-published) {
  display: none;
}
article > header > a.u-url {
  margin-right: 1rem;
  font-weight: bold;
}
article > header > h2 {
  display: inline;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  margin-left: 2em;
}
article > header > span.p-category {
  border-radius: 0.3em;
  font-weight: 900;
  font-variant: small-caps;
  background-color: #d57300;
  padding: 0 0.5em 0.05em 0.5em;
}
article.bigpost > .p-summary {
  font-size: 1.5rem;
  margin-bottom: 3rem;
}
article.bigpost > header {
  opacity: 1;
  border-top: 1px solid #e2e2e2;
  filter: none;
  font-family: inherit;
  border-bottom: 0;
}
article.bigpost > header > * {
  margin: 0;
}
article.bigpost > header > time {
  font-family: monospace;
  font-size: 0.7rem;
  opacity: 0.5;
}
article.bigpost > header > time.dt-published:has(+ time.dt-updated)::after {
  content: ",";
}
article.bigpost > header > time.dt-updated:not(.dt-published) {
  display: inline;
}
article.bigpost > header > time.dt-updated:not(.dt-published)::before {
  content: "upd. ";
}
article.bigpost > header > time.dt-updated:not(.dt-published):lang(ru)::before {
  content: "обн. ";
}
article.bigpost > header > h2 {
  display: block;
  font-size: 2.5rem;
  margin: 0;
  line-height: 1;
}

article:not(.bigpost) > header {
  line-height: 1.5rem;
}
article:not(.bigpost) > header > h2.p-name {
  display: block;
  margin-left: 0;
  margin-top: 0;
}
@media (min-width: 720px) and (max-width: 911px) {
  article:not(.bigpost) > header {
    display: flex;
    align-items: baseline;
    gap: 1.5em;
    position: relative;
  }
  article:not(.bigpost) > header > * {
    margin-top: 0;
  }
  article:not(.bigpost) > header > a.u-url {
    position: absolute;
    left: -2rem;
    margin-left: 0;
    margin-right: 0;
  }
  article:not(.bigpost) > header > h2.p-name {
    flex: 1;
    min-width: 0;
    display: block;
    margin-left: 0;
  }
}
@media (min-width: 912px) {
  article:not(.bigpost) > header {
    position: absolute;
    top: 0;
    left: calc(50% - 560px / 2 - var(--side-pull));
    width: var(--side-w);
    max-width: none;
    margin: 0;
    border-top: none;
    border-bottom: none;
    text-align: right;
  }
  article:not(.bigpost) > header > a.u-url.∞ {
    float: none;
    margin-left: 0;
    margin-right: 0.5em;
  }
  article:not(.bigpost) > header > h2.p-name {
    display: block;
    margin-left: 0;
    margin-top: 0;
  }
}
@media (min-width: 912px) {
  article:not(.bigpost) {
    position: relative;
  }
}

#masthead {
  margin-top: -1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
  font-size: 2rem;
  line-height: 1;
  font-style: italic;
  text-align: center;
}
#masthead * {
  margin: 0;
}
#masthead a {
  color: #0061fc;
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
#masthead a:visited {
  color: #0061fc;
}
#masthead a > span {
  display: inline-block;
  vertical-align: baseline;
  height: 1.5em;
}
#masthead a > span > i {
  display: inline-block;
  vertical-align: baseline;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: marquee-content;
  animation-timing-function: linear;
}
#masthead a > span.ooooo-right {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: white;
  overflow: visible;
  padding-left: 0.05em;
}
#masthead a > span.ooooo-left {
  padding-right: 0.05em;
  position: absolute;
  overflow: visible;
  z-index: 1;
  left: 0;
  top: 0;
  background: white;
}

@keyframes marquee-content {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-2%); /* needs to be in % so that an int of letters is shifted; 50 o in content */
  }
}
*:lang(ru) > cite {
  /* use Russian styling for <cite> elements in Russian text, even if the <cite> itself has different lang */
  font-style: normal;
}
*:lang(ru) > cite::before {
  content: open-quote;
}
*:lang(ru) > cite::after {
  content: close-quote;
}

hr {
  width: 70%;
  border-color: rgba(246, 246, 246, 0.4);
}

.side {
  padding: 0;
  margin-left: 32px;
  font-size: 80%;
}
@media (min-width: 720px) {
  .side {
    float: right;
    clear: right;
    width: var(--side-w);
    margin-right: calc(-1 * var(--side-pull));
  }
}

.sidenote {
  padding: 0;
  margin-left: 32px;
  font-size: 80%;
}
@media (min-width: 720px) {
  .sidenote {
    float: right;
    clear: right;
    width: var(--side-w);
    margin-right: calc(-1 * var(--side-pull));
  }
  @supports (anchor-name: --a) {
    .sidenote {
      float: none;
      position: absolute;
      position-anchor: --sidenote;
      top: anchor(top);
      left: calc(anchor(right) + var(--side-pull) - var(--side-w));
      margin: 0;
    }
  }
}

@media (min-width: 720px) {
  @supports (anchor-name: --a) {
    :not(.sidenote):has(+ .sidenote) {
      anchor-name: --sidenote;
    }
  }
}
div.csl-bib-body {
  margin-top: 1em;
}

div.csl-entry {
  clear: both;
  margin-bottom: 0.3em;
}

div.csl-left-margin {
  min-width: 2em;
  float: left;
  text-align: right;
}

div.csl-right-inline {
  margin-left: 2.4em;
  padding-left: 0.4em;
}

figure.wide {
  margin: 1em auto;
}
figure.wide > img {
  display: block;
  max-width: 100%;
  margin-inline: auto;
}
figure.wide > figcaption {
  font-size: 80%;
}
@media (min-width: 912px) {
  figure.wide {
    position: relative;
  }
  figure.wide > figcaption {
    position: absolute;
    top: 0;
    left: calc(100% + var(--side-pull) - var(--side-w));
    width: var(--side-w);
    margin-top: 0;
  }
}

img {
  max-width: 100%;
  max-height: 90svh;
  width: auto;
  height: auto;
}

blockquote {
  margin-left: 2em;
  margin-right: 0;
  margin-bottom: 0;
}
blockquote > p {
  margin-bottom: 0;
}
blockquote > .quote-source {
  margin-top: 0;
}
blockquote > p.quote-source, blockquote > div.quote-source > p:first-child {
  margin-left: 5em;
  margin-top: 0;
  font-style: italic;
}
blockquote > p.quote-source > cite, blockquote > div.quote-source > p:first-child > cite {
  font-style: inherit;
}
blockquote > p.quote-source::before, blockquote > div.quote-source > p:first-child::before {
  content: "— ";
  margin-left: -2em;
}

br {
  margin: 0;
}

.nobr {
  white-space: nowrap;
}

pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 1em;
  position: relative;
  background: linear-gradient(to right, white, white) no-repeat local right/1.5em 100%, linear-gradient(to left, rgba(139, 139, 139, 0.2), transparent) no-repeat scroll right/1.5em 100%;
}

div.sourceCode {
  position: relative;
}

.code-copy {
  position: absolute;
  top: 0.4em;
  right: 0.4em;
  margin-top: 0;
  width: 1.75em;
  height: 1.75em;
  padding: 0.25em;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(246, 246, 246, 0.4);
  border-radius: 3px;
  cursor: pointer;
  color: #8b8b8b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-copy:hover, .code-copy:focus {
  color: #3e3e3e;
}
@media (min-width: 720px) {
  .code-copy {
    right: -2.25em;
    background: transparent;
    border-color: transparent;
  }
  .code-copy:hover, .code-copy:focus {
    color: #3e3e3e;
    border-color: rgba(246, 246, 246, 0.4);
  }
}

@media print {
  .code-copy {
    display: none;
  }
}
kbd {
  background-color: #f6f6f6;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 1px 1px rgba(34, 34, 34, 0.2);
  color: #3e3e3e;
  display: inline-block;
  font-family: "PT Mono", monospace;
  font-size: 0.85em;
  font-size-adjust: ex-height 0.46;
  font-weight: 600;
  line-height: 1;
  padding: 2px 4px;
  margin: -3px 0;
  white-space: nowrap;
}

/* images next to headings, like in /uses */
/*
    Switch to hanging layout when the left margin is wide enough to fit the image + gap.
    Left margin = (100vw − 35×16px) / 2 ≥ 3×16px + 16px
    → 100vw ≥ 35×16px + 2×(3×16px + 16px) = 43×16px = 688px
*/
:is(h1, h2, h3, h4, h5, h6):has(.hanging-guide) .hanging-guide {
  width: auto;
  height: 24px;
  margin-right: 16px;
  vertical-align: middle;
}
@media (min-width: 688px) {
  :is(h1, h2, h3, h4, h5, h6):has(.hanging-guide) {
    position: relative;
  }
  :is(h1, h2, h3, h4, h5, h6):has(.hanging-guide) .hanging-guide {
    position: absolute;
    right: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: auto;
  }
}

/* <image-gallery> — see souper-tags/image-gallery.xsl */
.image-gallery * + * {
  margin-top: 0;
}
.image-gallery-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  height: 200px;
  padding: 20px 0;
  margin: 1em 0;
  background-color: #e2e2e2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' width='24' height='20'><rect x='6' y='6' width='12' height='8' fill='white'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' width='24' height='20'><rect x='6' y='6' width='12' height='8' fill='white'/></svg>");
  background-position: top, bottom;
  background-size: auto 20px, auto 20px;
  background-repeat: repeat-x, repeat-x;
  background-attachment: local, local;
  scrollbar-width: none;
}
.image-gallery-strip::-webkit-scrollbar {
  display: none;
}
.image-gallery-strip > .image-gallery-thumb {
  flex-shrink: 0;
  display: block;
  height: 200px;
}
.image-gallery-strip > .image-gallery-thumb img {
  height: 200px;
  width: auto;
  max-height: none;
  max-width: none;
  object-fit: cover;
  display: block;
}
.image-gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #777;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.image-gallery-lightbox:target {
  display: flex;
}
.image-gallery-lightbox > img {
  margin-top: 4rem;
  max-width: calc(95vw - 1.5rem);
  max-height: calc(100svh - 9rem - 1.5rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border: 0.75rem solid #fff;
}
.image-gallery-caption {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 0.6rem 1rem;
  padding-right: 8rem;
  font-size: 0.85rem;
  line-height: 1.3;
  max-height: 3.2em;
  overflow: hidden;
  text-align: left;
}
.image-gallery-close, .image-gallery-prev, .image-gallery-next {
  position: fixed;
  z-index: 1001;
  color: white;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.3);
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: "PT Mono", monospace;
}
.image-gallery-close:visited, .image-gallery-prev:visited, .image-gallery-next:visited {
  color: white;
}
.image-gallery-close:hover, .image-gallery-close:focus, .image-gallery-prev:hover, .image-gallery-prev:focus, .image-gallery-next:hover, .image-gallery-next:focus {
  background: rgba(0, 0, 0, 0.6);
}
.image-gallery-close {
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  border-radius: 50%;
}
.image-gallery-prev, .image-gallery-next {
  bottom: 0.6rem;
  width: 2.75rem;
  height: 2.25rem;
  font-size: 1.75rem;
  z-index: 1002;
}
.image-gallery-prev {
  right: 4rem;
}
.image-gallery-next {
  right: 1rem;
}

/* <toc></toc> */
nav.toc {
  margin: 1.5em 0;
  padding-left: 1em;
  border-left: 2px solid #cd3c00;
  font-size: 0.875em;
}
@media (min-width: 720px) {
  nav.toc {
    float: right;
    clear: right;
    width: var(--side-w);
    margin-right: calc(-1 * var(--side-pull));
    margin-left: 16px;
  }
}
nav.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.toc li {
  margin: 0.3em 0;
  line-height: 1.4;
}
nav.toc li > ul {
  padding-left: 1em;
  margin-top: 0.3em;
}
nav.toc a {
  color: #cd3c00;
  text-decoration: none;
}
nav.toc a:hover, nav.toc a:focus {
  text-decoration: underline;
}