/*! modern-normalize | MIT License | based on normalize.css v8.0.0 */
/* General Document
   ========================================================================== */
/**
 * 1. Use a more intuitive box-sizing model.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
*,
*::before,
*::after {
  box-sizing: border-box; /* 1 */
}

html {
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* Modern addition: Improves readability of code blocks */
}

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  /* Modern addition: Set a system font stack for better performance */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5; /* Improved readability over 1.15 */
}

/* Sections
   ========================================================================== */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  height: 0; /* 1 */
  color: inherit; /* Modern addition: Allows hr to inherit color */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* Modern system monospace stack */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/*
 * Modern addition: Ensure images and media are responsive and block-level
 * to avoid "magic space" issues.
 */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*!
 * animate.css - https://animate.style/
 * Version - 4.1.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration:1s;
  --animate-delay:1s;
  --animate-repeat:1;
}

.animated {
  animation-duration: 1s;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.repeat-1 {
  animation-iteration-count: 1;
  animation-iteration-count: var(--animate-repeat);
}

.animated.repeat-2 {
  animation-iteration-count: 2;
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}

.animated.repeat-3 {
  animation-iteration-count: 3;
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}

.animated.delay-1s {
  animation-delay: 1s;
  animation-delay: var(--animate-delay);
}

.animated.delay-2s {
  animation-delay: 2s;
  animation-delay: calc(var(--animate-delay) * 2);
}

.animated.delay-3s {
  animation-delay: 3s;
  animation-delay: calc(var(--animate-delay) * 3);
}

.animated.delay-4s {
  animation-delay: 4s;
  animation-delay: calc(var(--animate-delay) * 4);
}

.animated.delay-5s {
  animation-delay: 5s;
  animation-delay: calc(var(--animate-delay) * 5);
}

.animated.faster {
  animation-duration: 0.5s;
  animation-duration: calc(var(--animate-duration) / 2);
}

.animated.fast {
  animation-duration: 0.8s;
  animation-duration: calc(var(--animate-duration) * 0.8);
}

.animated.slow {
  animation-duration: 2s;
  animation-duration: calc(var(--animate-duration) * 2);
}

.animated.slower {
  animation-duration: 3s;
  animation-duration: calc(var(--animate-duration) * 3);
}

@media (prefers-reduced-motion: reduce), print {
  .animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .animated[class*=Out] {
    opacity: 0;
  }
}
@keyframes bounce {
  0%, 20%, 53%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateZ(0) scaleY(0.95);
  }
  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }
  75% {
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }
  90% {
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }
  to {
    transform: translateZ(0);
  }
}
.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.bounceOutRight {
  animation-name: bounceOutRight;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translateZ(0);
  }
}
.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  0% {
    transform: translateZ(0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}
.slideOutDown {
  animation-name: slideOutDown;
}

/* Conditionally import animation styles if enabled in site configuration */
/*
* This file only deals with user provided variables
* This does not have any dependency on `_colors.scss` that only handles site colors
* This is optional for an user to edit. 
*/
/*
* Variables related to base html and body styling
*/
/*
* Variables related to page scrollbar
*/
/*
* Variables related to preformatted code blocks
*/
/*
* Variables related to inline code elements
*/
/*
* Variables related to blockquotes
*/
/*
* Variables related to link elements
*/
/*
* Variables related to horizontal rule element
*/
/*
* Variables related to table element
*/
/*
* Variables related to code copy button
*/
/*
* Variables related to site header
*/
/*
* Variables related to header icons, links and buttons
*/
/*
* Variables related to mobile hamburger menu button
*/
/*
* Variables related to mobile menu overlay
*/
/*
* Variables related to site footer (not hoem footer)
*/
:root {
  --ts: 100ms;
  --pbd: 2000ms;
}

/*
* Variables related to code block container border radius
*/
/*
* Variables related to sub-menu text
*/
/*
* Variables related to spotlight / homepage hero layout
*/
/*
* Variables related to 404 error page
*/
/*
* Variables related to homepage sections (links, nav, footer)
*/
/*
* Variables related to home subtitle display
*/
/*
* Variables related to post listing page
*/
/*
* Variables related to pinned posts listing
*/
/*
* Variables related to featured/background image copyright notice
*/
/*
* Variables related to single post header
*/
/*
* Variables related to post end horizontal rule
*/
/*
* Variables related to post content area
*/
/*
* Variables related to footnotes section
*/
/*
* Variables related to post description / metadata block
*/
/*
* Variables related to table of contents
*/
/*
* Variables related to post navigation (previous / next links)
*/
/*
* Variables related to related posts section
*/
/*
* Variables related to brainmade / human label
*/
.admonition {
  position: relative;
  margin: 1rem 0 1.5rem 0;
  border-left: 0.25rem solid #448aff;
  box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.5);
  border-radius: 0 8px 8px 0;
  overflow: auto;
}
.admonition .admonition-title {
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid rgba(68, 138, 255, 0.1);
  background-color: rgba(68, 138, 255, 0.1);
  color: #448aff;
}
.admonition .admonition-title .icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 0.85rem;
  color: #448aff;
}
.admonition .admonition-content {
  padding: 0.25rem 0.5rem;
}
.admonition.note {
  border-left-color: #448aff;
}
.admonition.note .admonition-title {
  color: #448aff;
}
.admonition.note .icon {
  color: #448aff;
}
.admonition.info {
  border-left-color: #00b8d4;
}
.admonition.info .admonition-title {
  color: #00b8d4;
}
.admonition.info .icon {
  color: #00b8d4;
}
.admonition.tip {
  border-left-color: #00bfa5;
}
.admonition.tip .admonition-title {
  color: #00bfa5;
}
.admonition.tip .icon {
  color: #00bfa5;
}
.admonition.success {
  border-left-color: #00c853;
}
.admonition.success .admonition-title {
  color: #00c853;
}
.admonition.success .icon {
  color: #00c853;
}
.admonition.warning {
  border-left-color: #ff9100;
}
.admonition.warning .admonition-title {
  color: #ff9100;
}
.admonition.warning .icon {
  color: #ff9100;
}
.admonition.failure {
  border-left-color: #ff5252;
}
.admonition.failure .admonition-title {
  color: #ff5252;
}
.admonition.failure .icon {
  color: #ff5252;
}
.admonition.danger {
  border-left-color: #ff1744;
}
.admonition.danger .admonition-title {
  color: #ff1744;
}
.admonition.danger .icon {
  color: #ff1744;
}
.admonition.bug {
  border-left-color: #f50057;
}
.admonition.bug .admonition-title {
  color: #f50057;
}
.admonition.bug .icon {
  color: #f50057;
}
.admonition.summary {
  border-left-color: #ccbb00;
}
.admonition.summary .admonition-title {
  color: #ccbb00;
}
.admonition.summary .icon {
  color: #ccbb00;
}
.admonition.note {
  background-color: rgba(68, 138, 255, 0.1);
}
.admonition.note .admonition-title {
  border-bottom-color: rgba(68, 138, 255, 0.1);
  background-color: rgba(68, 138, 255, 0.1);
}
.admonition.info {
  background-color: rgba(0, 184, 212, 0.1);
}
.admonition.info .admonition-title {
  border-bottom-color: rgba(0, 184, 212, 0.1);
  background-color: rgba(0, 184, 212, 0.1);
}
.admonition.tip {
  background-color: rgba(0, 191, 165, 0.1);
}
.admonition.tip .admonition-title {
  border-bottom-color: rgba(0, 191, 165, 0.1);
  background-color: rgba(0, 191, 165, 0.1);
}
.admonition.success {
  background-color: rgba(0, 200, 83, 0.1);
}
.admonition.success .admonition-title {
  border-bottom-color: rgba(0, 200, 83, 0.1);
  background-color: rgba(0, 200, 83, 0.1);
}
.admonition.warning {
  background-color: rgba(255, 145, 0, 0.1);
}
.admonition.warning .admonition-title {
  border-bottom-color: rgba(255, 145, 0, 0.1);
  background-color: rgba(255, 145, 0, 0.1);
}
.admonition.failure {
  background-color: rgba(255, 82, 82, 0.1);
}
.admonition.failure .admonition-title {
  border-bottom-color: rgba(255, 82, 82, 0.1);
  background-color: rgba(255, 82, 82, 0.1);
}
.admonition.danger {
  background-color: rgba(255, 23, 68, 0.1);
}
.admonition.danger .admonition-title {
  border-bottom-color: rgba(255, 23, 68, 0.1);
  background-color: rgba(255, 23, 68, 0.1);
}
.admonition.bug {
  background-color: rgba(245, 0, 87, 0.1);
}
.admonition.bug .admonition-title {
  border-bottom-color: rgba(245, 0, 87, 0.1);
  background-color: rgba(245, 0, 87, 0.1);
}
.admonition.summary {
  background-color: rgba(204, 187, 0, 0.1);
}
.admonition.summary .admonition-title {
  border-bottom-color: rgba(204, 187, 0, 0.1);
  background-color: rgba(204, 187, 0, 0.1);
}

details.admonition summary.admonition-title {
  cursor: pointer;
  user-select: none;
  list-style: none;
}
details.admonition summary.admonition-title::-webkit-details-marker {
  display: none;
}
details.admonition summary.admonition-title .summary-arrow {
  transition: transform 0.25s ease;
  transform: rotate(0deg);
  font-style: normal;
}
details.admonition[open] > summary.admonition-title .summary-arrow {
  transform: rotate(90deg);
}
details.admonition:not([open]) > summary.admonition-title {
  border-bottom-color: transparent;
}

/* Background */
.chroma {
  color: #eee;
  background-color: #2c3e50;
}

/* Error */
.chroma .err {
  color: #960050;
  background-color: #1e0010;
}

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0;
}

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
  overflow: auto;
  display: block;
}

/* LineHighlight */
.chroma .hl {
  display: block;
  width: 100%;
  background-color: rgba(85, 89, 94, 0.7333333333);
}

/* LineNumbersTable */
.chroma .lnt {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
}

/* LineNumbers */
.chroma .ln {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
}

/* Keyword */
.chroma .k {
  color: #66d9ef;
}

/* KeywordConstant */
.chroma .kc {
  color: #66d9ef;
}

/* KeywordDeclaration */
.chroma .kd {
  color: #66d9ef;
}

/* KeywordNamespace */
.chroma .kn {
  color: #f92672;
}

/* KeywordPseudo */
.chroma .kp {
  color: #66d9ef;
}

/* KeywordReserved */
.chroma .kr {
  color: #66d9ef;
}

/* KeywordType */
.chroma .kt {
  color: #66d9ef;
}

/* NameAttribute */
.chroma .na {
  color: #a6e22e;
}

/* NameClass */
.chroma .nc {
  color: #a6e22e;
}

/* NameConstant */
.chroma .no {
  color: #66d9ef;
}

/* NameDecorator */
.chroma .nd {
  color: #a6e22e;
}

/* NameException */
.chroma .ne {
  color: #a6e22e;
}

/* NameFunction */
.chroma .nf {
  color: #a6e22e;
}

/* NameOther */
.chroma .nx {
  color: #a6e22e;
}

/* NameTag */
.chroma .nt {
  color: #f92672;
}

/* Literal */
.chroma .l {
  color: #ae81ff;
}

/* LiteralDate */
.chroma .ld {
  color: #e6db74;
}

/* LiteralString */
.chroma .s {
  color: #e6db74;
}

/* LiteralStringAffix */
.chroma .sa {
  color: #e6db74;
}

/* LiteralStringBacktick */
.chroma .sb {
  color: #e6db74;
}

/* LiteralStringChar */
.chroma .sc {
  color: #e6db74;
}

/* LiteralStringDelimiter */
.chroma .dl {
  color: #e6db74;
}

/* LiteralStringDoc */
.chroma .sd {
  color: #e6db74;
}

/* LiteralStringDouble */
.chroma .s2 {
  color: #e6db74;
}

/* LiteralStringEscape */
.chroma .se {
  color: #ae81ff;
}

/* LiteralStringHeredoc */
.chroma .sh {
  color: #e6db74;
}

/* LiteralStringInterpol */
.chroma .si {
  color: #e6db74;
}

/* LiteralStringOther */
.chroma .sx {
  color: #e6db74;
}

/* LiteralStringRegex */
.chroma .sr {
  color: #e6db74;
}

/* LiteralStringSingle */
.chroma .s1 {
  color: #e6db74;
}

/* LiteralStringSymbol */
.chroma .ss {
  color: #e6db74;
}

/* LiteralNumber */
.chroma .m {
  color: #ae81ff;
}

/* LiteralNumberBin */
.chroma .mb {
  color: #ae81ff;
}

/* LiteralNumberFloat */
.chroma .mf {
  color: #ae81ff;
}

/* LiteralNumberHex */
.chroma .mh {
  color: #ae81ff;
}

/* LiteralNumberInteger */
.chroma .mi {
  color: #ae81ff;
}

/* LiteralNumberIntegerLong */
.chroma .il {
  color: #ae81ff;
}

/* LiteralNumberOct */
.chroma .mo {
  color: #ae81ff;
}

/* Operator */
.chroma .o {
  color: #f92672;
}

/* OperatorWord */
.chroma .ow {
  color: #f92672;
}

/* Comment */
.chroma .c {
  color: #75715e;
}

/* CommentHashbang */
.chroma .ch {
  color: #75715e;
}

/* CommentMultiline */
.chroma .cm {
  color: #75715e;
}

/* CommentSingle */
.chroma .c1 {
  color: #75715e;
}

/* CommentSpecial */
.chroma .cs {
  color: #75715e;
}

/* CommentPreproc */
.chroma .cp {
  color: #75715e;
}

/* CommentPreprocFile */
.chroma .cpf {
  color: #75715e;
}

/* GenericDeleted */
.chroma .gd {
  color: #f92672;
}

/* GenericEmph */
.chroma .ge {
  font-style: italic;
}

/* GenericInserted */
.chroma .gi {
  color: #a6e22e;
}

/* GenericStrong */
.chroma .gs {
  font-weight: bold;
}

/* GenericSubheading */
.chroma .gu {
  color: #75715e;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Conditionally import share social styles if enabled in site configuration */
::-moz-selection {
  background: #7d828a;
}

::selection {
  background: #7d828a;
}

html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #2c3e50;
}
html::-webkit-scrollbar-thumb {
  background: #878787;
}
html::-webkit-scrollbar-thumb:hover {
  background: #eeeeee;
}

html {
  background: #494f5c;
  line-height: 1.6;
  letter-spacing: 0.06em;
  scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea,
a {
  color: #eeeeee;
}

body,
button,
input,
select,
textarea {
  font-family: "Trebuchet MS", Verdana, "Verdana Ref", "Segoe UI", Candara, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

pre,
code,
pre tt {
  font-family: Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, "YaHei Consolas Hybrid", monospace, "Segoe UI Emoji", "PingFang SC", "Microsoft YaHei";
}

mark {
  color: #eeeeee;
  background-color: #018472;
}

ins {
  text-decoration: underline;
  -webkit-text-decoration-color: #018472;
  text-decoration-color: #018472;
}

pre {
  padding: 0.7em 1.1em;
  font-size: 0.9em;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: pre;
  background: #2c3e50;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
pre.mermaid {
  background: #272822;
}
pre code {
  padding: 0;
  background: transparent;
}

code {
  color: #eeeeee;
  background: #3b3e48;
  border-radius: 3px;
  padding: 0 3px;
  margin: 0;
  word-wrap: break-word;
  letter-spacing: normal;
}

blockquote {
  border-left: 0.25em solid;
  margin: 1em;
  padding: 0 1em;
  font-style: italic;
}
blockquote cite {
  font-weight: bold;
  font-style: normal;
}
blockquote cite::before {
  content: "—— ";
}

a {
  text-decoration: none;
  border: none;
  transition: color 0.4s ease-out;
}
a:hover {
  color: #ffffff;
  text-shadow: 0 0 1px #ffffff;
}

hr {
  opacity: 0.2;
  border-width: 0 0 5px 0;
  border-style: dashed;
  background: transparent;
  width: 50%;
  margin: 1.8em auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  width: 100%;
  max-width: 100%;
}
table th,
table td {
  padding: 1.5%;
  border: 1px solid;
}
table th {
  font-weight: 700;
  vertical-align: bottom;
}

.highlight {
  position: relative;
}

.highlight div,
.highlight pre {
  overflow-x: auto;
  border-radius: 4px;
  -webkit-overflow-scrolling: touch;
}

.highlight-copy-btn {
  position: absolute;
  bottom: 7px;
  right: 7px;
  border: 0;
  border-radius: 4px;
  padding: 1px;
  font-size: 0.7em;
  line-height: 1.8;
  color: #ffffff;
  background-color: #666666;
  opacity: 0.6;
  min-width: 55px;
  text-align: center;
}

#site-header {
  position: fixed;
  z-index: 1;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45);
  background-color: #3b3e48;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

.hdr-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0;
  font-size: 1.2rem;
}
.hdr-wrapper .site-branding {
  display: inline-block;
  margin-right: 0.8em;
  font-size: 1.2em;
}
.hdr-wrapper .site-nav {
  display: inline-block;
  font-size: 1.1em;
  opacity: 0.8;
}
.hdr-wrapper .site-nav .has-children {
  padding-right: 0.5em;
  border-right: 2px solid #7d828a;
}
.hdr-wrapper .site-nav .sub-menu > a {
  margin-left: 0.3em;
}
.hdr-wrapper .site-nav a {
  margin-left: 0.8em;
}

.hdr-icons {
  font-size: 1.2em;
}

.hdr-links {
  display: inline-block;
  margin-left: 0.6em;
}
.hdr-links > a {
  margin-left: 0.4em;
}

.hdr-btn {
  border: none;
  background: none;
  padding: 0;
  margin-left: 0.4em;
  cursor: pointer;
}

#menu-btn {
  display: none;
  margin-left: 0.6em;
  cursor: pointer;
}

#mobile-menu {
  position: fixed;
  bottom: 4.8em;
  right: 4.5em;
  display: none;
  padding: 0.6em 1.8em;
  z-index: 1;
  border-radius: 10px;
  border: 2px solid #494f5c;
  border-style: outset;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
  background-color: #3b3e48;
}
#mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 2;
  font-size: 1.2em;
}

#site-footer {
  text-align: center;
  font-size: 0.8em;
  margin-bottom: 96px;
  margin-top: 64px;
}
#site-footer p {
  margin: 0;
}

.highlight-copy-btn:hover {
  background-color: #777777;
}

.section-inner {
  margin: 0 auto;
  max-width: 1200px;
  width: 93%;
}

.thin {
  max-width: 720px;
  margin: auto;
}

.feather {
  display: inline-block;
  vertical-align: -0.125em;
  width: 1em;
  height: 1em;
}

.sub-menu {
  font-size: 0.7em;
}

.desktop-only, .desktop-only-ib {
  display: none;
}

#spotlight {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 93%;
  margin: auto;
  font-size: 1.5rem;
}
#spotlight.error-404 {
  flex-direction: row;
  line-height: normal;
}

p.img-404 {
  margin: 0;
}
p.img-404 svg {
  width: 180px;
  max-width: 100%;
  height: auto;
}

.banner-404 {
  margin-left: 2em;
}
.banner-404 h1 {
  font-size: 3em;
  margin: 0.5rem 0;
}
.banner-404 p {
  margin-top: 0;
}
.banner-404 .btn-404 {
  font-size: 0.8em;
}
.banner-404 .btn-404 a {
  display: inline-block;
  border: 2px solid #eeeeee;
  border-radius: 5px;
  padding: 5px;
  transition-property: color, border-color;
}
.banner-404 .btn-404 a:first-child {
  margin-right: 1em;
}
.banner-404 .btn-404 a:hover {
  border-color: #ffffff;
}
.banner-404 .btn-404 a svg {
  margin-right: 0.5em;
}

#home-center {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
}

#home-title {
  margin: 0;
  text-align: center;
}

#home-links {
  font-size: 1.4em;
  text-align: center;
  opacity: 0.8;
}
#home-links a {
  margin: 0 0.2em;
}

#home-nav {
  opacity: 0.8;
}
#home-nav a {
  display: block;
  text-align: center;
  margin-top: 0.5em;
}

#home-footer {
  text-align: center;
  font-size: clamp(0.4em, 0.3em + 0.5vw, 0.6em);
  white-space: nowrap;
  overflow: hidden;
  line-height: normal;
  opacity: 0.8;
}
#home-footer p {
  margin-top: 0;
}

.posts-group {
  display: flex;
  margin-bottom: 1.9em;
  line-height: normal;
}
.posts-group .post-year {
  padding-top: 6px;
  margin-right: 1.8em;
  font-size: 1.6em;
  opacity: 0.8;
}
.posts-group .post-year:hover {
  cursor: pointer;
}
.posts-group .posts-list {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.posts-group .post-item {
  border-bottom: 1px #7d828a dashed;
}
.posts-group .post-item a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
}
.posts-group .post-day {
  flex-shrink: 0;
  margin-left: 1em;
  opacity: 0.8;
}
.posts-group .post-tags,
.posts-group .post-categories {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  font-size: xx-small;
  opacity: 0.8;
}
.posts-group .post-tags a,
.posts-group .post-categories a {
  margin-right: 0.5em;
}
.posts-group .post-tags {
  padding-right: 12px;
}
.posts-group .post-description {
  font-size: x-small;
  opacity: 0.8;
}
.posts-group .post-taxonomy {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
}

.pinned-posts-group {
  display: flex;
  margin-bottom: 1.9em;
  line-height: normal;
  border-bottom: 2px #7d828a solid;
}
.pinned-posts-group .pinned-posts-list {
  flex-grow: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pinned-posts-group .pinned-post-item {
  display: flex;
  justify-content: start;
  align-items: baseline;
  padding: 12px 0;
}
.pinned-posts-group .pinned-post-item a {
  padding-left: 12px;
}

.bg-img {
  width: 100vw;
  height: 100vh;
  opacity: 0.03;
  z-index: -1;
  position: fixed;
  top: 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s;
}

.show-bg-img {
  z-index: 100;
  opacity: 1;
  cursor: pointer;
}

.bg-img-copyright {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 8px 15px;
  color: #eeeeee;
  background-color: rgba(59, 62, 72, 0.45);
  font-size: 0.75em;
  text-align: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.bg-img-copyright a {
  word-wrap: break-word;
  border: none;
  position: relative;
  box-shadow: inset 0 -4px 0 #018472;
  transition: box-shadow 0.3s ease;
}
.bg-img-copyright a:hover {
  box-shadow: inset 0 calc(-1.5em - 5px) 0 #018472;
}

.bg-img.show-bg-img + .bg-img-copyright {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.post-header {
  margin-top: 1.2em;
  line-height: normal;
}
.post-header .post-date {
  font-size: 0.9em;
  letter-spacing: normal;
  opacity: 0.8;
}
.post-header h1 {
  margin-top: 0.1em;
}

hr.post-end {
  width: 50%;
  margin-top: 1.6em;
  margin-bottom: 0.8em;
  margin-left: 0;
  border-style: solid;
  border-bottom-width: 4px;
}

.content a {
  word-wrap: break-word;
  border: none;
  position: relative;
  box-shadow: inset 0 -4px 0 #018472;
  transition: box-shadow 0.3s ease;
}
.content a:hover {
  box-shadow: inset 0 calc(-1.5em - 5px) 0 #018472;
}
.content figure {
  max-width: 100%;
  height: auto;
  margin: 0;
  text-align: center;
}
.content figure p {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.8;
}
.content figure.left {
  float: left;
  margin-right: 1.5em;
  max-width: 50%;
}
.content figure.right {
  float: right;
  margin-left: 1.5em;
  max-width: 50%;
}
.content figure.big {
  max-width: 100vw;
}
.content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  border-radius: 4px;
}
.content ul,
.content ol {
  padding: 0;
  margin-left: 1.8em;
}
.content a.anchor {
  float: left;
  margin-left: -20px;
  padding-right: 6px;
  box-shadow: none;
  opacity: 0.8;
}
.content a.anchor:hover {
  background: none;
  color: #018472;
  opacity: 1;
}
.content a.anchor svg {
  display: inline-block;
  width: 14px;
  height: auto;
  vertical-align: baseline;
  visibility: hidden;
}
.content a.anchor:focus svg {
  visibility: visible;
}
.content h1:hover a.anchor svg,
.content h2:hover a.anchor svg,
.content h3:hover a.anchor svg,
.content h4:hover a.anchor svg,
.content h5:hover a.anchor svg,
.content h6:hover a.anchor svg {
  visibility: visible;
}

.footnotes {
  font-size: 0.85em;
}
.footnotes a {
  box-shadow: none;
  text-decoration: underline;
  transition-property: color;
}
.footnotes a:hover {
  background: transparent;
}
.footnotes a.footnote-backref {
  text-decoration: none;
}
.footnotes ol {
  line-height: 1.8;
}

a.footnote-ref {
  box-shadow: none;
  text-decoration: none;
  padding: 2px;
  border-radius: 2px;
  background-color: #2c3e50;
}
a.footnote-ref:hover {
  box-shadow: none;
  background-color: #018472;
  transition-property: background-color;
}

.tag {
  text-transform: lowercase;
}
.tag::before {
  content: "#";
}

.category::before {
  content: "⊲";
}

.post-description {
  font-size: 0.8rem;
  line-height: normal;
  opacity: 0.8;
}
.post-description p {
  margin: 0.8em 0;
}
.post-description a:hover {
  border-bottom: 1px solid #018472;
}
.post-description svg {
  margin-right: 0.8em;
}
.post-description .tag,
.post-description .category {
  margin-right: 0.5em;
}

#toc {
  position: fixed;
  left: 50%;
  top: 0;
  display: none;
  background-color: transparent;
}

.toc-title {
  margin-left: 1em;
  margin-bottom: 0.5em;
  font-size: 0.8em;
  font-weight: bold;
}

#TableOfContents {
  font-size: 0.8em;
  opacity: 0.8;
  scroll-target-group: auto;
}
#TableOfContents ul {
  padding: 0 1em;
  margin: 0;
}
#TableOfContents > ul::-webkit-scrollbar {
  width: 4px;
}
#TableOfContents > ul::-webkit-scrollbar-track {
  background: rgb(42.9411764706%, 42.9411764706%, 42.9411764706%);
}
#TableOfContents > ul::-webkit-scrollbar-thumb {
  background: #2c3e50;
}
#TableOfContents > ul::-webkit-scrollbar-thumb:hover {
  background: rgb(24.3516761543%, 34.3137254902%, 44.2757748261%);
}
#TableOfContents > ul {
  list-style-type: none;
  overflow-y: auto;
  height: calc(100vh - 300px);
}
#TableOfContents > ul ul ul {
  font-size: 0.9em;
}
#TableOfContents a:hover, #TableOfContents :target-current {
  border-bottom: #018472 1px solid;
}

.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  font-size: 1.2em;
}
.post-nav a {
  flex-basis: 50%;
  flex-grow: 1;
}
.post-nav .next-post {
  text-align: left;
  padding-right: 5px;
}
.post-nav .prev-post {
  text-align: right;
  padding-left: 5px;
}
.post-nav .post-nav-label {
  font-size: 0.8em;
  opacity: 0.8;
  text-transform: uppercase;
}

.related-posts {
  padding: 0.8em;
  margin-top: 1.5em;
  font-size: 0.8rem;
  border: 3px dashed rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}
.related-posts h2 {
  margin: 0;
  line-height: normal;
}
.related-posts ul {
  margin-top: 0.5em;
  margin-bottom: 0;
}

.human {
  display: flex;
  justify-content: flex-end;
  margin-top: 1em;
}

#typewriter-container {
  width: 100%;
  max-width: 60vw;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  padding-bottom: 1em;
}

#home-subtitle {
  margin: 0;
  line-height: 1.4;
  font-size: 0.7em;
  font-style: italic;
  opacity: 0.9;
  display: inline-block;
  text-align: center;
  position: relative;
  max-width: 85ch;
  margin-left: auto;
  margin-right: auto;
  /* reliable wrapping rules */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@media (max-width: 520px) {
  .content figure.left,
  .content figure.right {
    float: unset;
    max-width: 100%;
    margin: 0;
  }
  hr.post-end {
    width: 60%;
  }
  #mobile-menu {
    right: 4.2em;
  }
}
@media (max-width: 760px) {
  .hide-in-mobile,
  .site-nav.hide-in-mobile {
    display: none;
  }
  #menu-btn {
    display: inline-block;
  }
  .posts-group {
    display: block;
  }
  .posts-group .post-year {
    margin: -6px 0 4px;
  }
  #spotlight.error-404 {
    flex-direction: column;
    text-align: center;
  }
  #spotlight.error-404 .banner-404 {
    margin: 0;
  }
  #home-subtitle {
    font-size: 0.7rem;
  }
  #typewriter-container {
    width: 80vw;
    font-size: 1rem;
    width: 90vw;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
  }
  /* Remove artificial height limits */
  #home-subtitle {
    min-height: auto !important;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
  /* CRITICAL: stop per-character whitespace preservation */
  #home-subtitle .char {
    white-space: normal;
  }
  .content a.anchor {
    float: inherit;
    margin-left: 10px;
  }
}
@media (min-width: 761px) {
  #mobile-menu {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #typewriter-container {
    width: 70vw;
  }
}
@media (min-width: 800px) {
  .site-main {
    margin-top: 3em;
  }
  hr.post-end {
    width: 40%;
  }
}
@media (min-width: 960px) {
  .site-main {
    margin-top: 6em;
  }
}
@media (min-width: 1300px) {
  .site-main {
    margin-top: 8em;
  }
  .desktop-only,
  #toc.show-toc {
    display: block;
  }
  .desktop-only-ib {
    display: inline-block;
  }
  figure.left {
    margin-left: -240px;
  }
  figure.left p {
    text-align: left;
  }
  figure.right {
    margin-right: -240px;
  }
  figure.right p {
    text-align: right;
  }
  figure.big {
    width: 1200px;
    margin-left: -240px;
  }
  hr.post-end {
    width: 30%;
  }
  #toc {
    top: 13em;
    margin-left: 370px;
    max-width: 220px;
  }
}
@media (min-width: 1800px) {
  .site-main {
    margin-top: 10em;
  }
  .section-inner {
    max-width: 1600px;
  }
  .thin {
    max-width: 960px;
  }
  figure.left {
    margin-left: -320px;
    max-width: 75%;
  }
  figure.right {
    margin-right: -320px;
    max-width: 75%;
  }
  figure.big {
    width: 1600px;
    margin-left: -320px;
  }
  hr.post-end {
    width: 30%;
  }
  #toc {
    top: 15em;
    margin-left: 490px;
    max-width: 300px;
  }
}