/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * 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 {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 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: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * 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: monospace, 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
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* 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 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  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;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 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 Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
:root {
  --bg-color: #fff;
  --bg-secondary-color: #f3f3f6;
  --color-primary: #14854f;
  --color-lightGrey: #d2d6dd;
  --color-grey: #747681;
  --color-darkGrey: #3f4144;
  --color-error: #d43939;
  --color-success: #28bd14;
  --grid-maxWidth: 120rem;
  --grid-gutter: 2rem;
  --font-size: 1.6rem;
  --font-color: #333;
  --font-family-sans: -apple-system, "BlinkMacSystemFont", "Avenir",
    "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background-color: var(--bg-color);
  line-height: 1.6;
  font-size: var(--font-size);
  color: var(--font-color);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif; /* fallback */
  font-family: var(--font-family-sans);
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  margin: 0.35em 0 0.7em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.25em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.85em;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover:not(.button) {
  opacity: 0.75;
}

button {
  font-family: inherit;
}

p {
  margin-top: 0;
}

blockquote {
  background-color: var(--bg-secondary-color);
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-lightGrey);
}

dl dt {
  font-weight: bold;
}

hr {
  border: none;
  background-color: var(--color-lightGrey);
  height: 1px;
  margin: 1rem 0;
}

table {
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

table.striped tr:nth-of-type(2n) {
  background-color: var(--bg-secondary-color);
}

td,
th {
  vertical-align: middle;
  padding: 1.2rem 0.4rem;
}

thead {
  border-bottom: 2px solid var(--color-lightGrey);
}

tfoot {
  border-top: 2px solid var(--color-lightGrey);
}

code,
kbd,
pre,
samp,
tt {
  font-family: var(--font-family-mono);
}

code,
kbd {
  font-size: 90%;
  white-space: pre-wrap;
  border-radius: 4px;
  padding: 0.2em 0.4em;
  background-color: var(--bg-secondary-color);
  color: var(--color-error);
}

pre {
  background-color: var(--bg-secondary-color);
  font-size: 1em;
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

img {
  max-width: 100%;
}

fieldset {
  border: 1px solid var(--color-lightGrey);
}

iframe {
  border: 0;
}

.container {
  max-width: var(--grid-maxWidth);
  margin: 0 auto;
  width: 96%;
  padding: 0 calc(var(--grid-gutter) / 2);
}

.row {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin-left: calc(var(--grid-gutter) / -2);
  margin-right: calc(var(--grid-gutter) / -2);
}

.row.reverse {
  flex-direction: row-reverse;
}

.col {
  flex: 1;
}

.col,
[class*=" col-"],
[class^="col-"] {
  margin: 0 calc(var(--grid-gutter) / 2) calc(var(--grid-gutter) / 2);
}

.col-1 {
  flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
  max-width: calc((100% / (12/1)) - var(--grid-gutter));
}

.col-2 {
  flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
  max-width: calc((100% / (12/2)) - var(--grid-gutter));
}

.col-3 {
  flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
  max-width: calc((100% / (12/3)) - var(--grid-gutter));
}

.col-4 {
  flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
  max-width: calc((100% / (12/4)) - var(--grid-gutter));
}

.col-5 {
  flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
  max-width: calc((100% / (12/5)) - var(--grid-gutter));
}

.col-6 {
  flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
  max-width: calc((100% / (12/6)) - var(--grid-gutter));
}

.col-7 {
  flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
  max-width: calc((100% / (12/7)) - var(--grid-gutter));
}

.col-8 {
  flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
  max-width: calc((100% / (12/8)) - var(--grid-gutter));
}

.col-9 {
  flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
  max-width: calc((100% / (12/9)) - var(--grid-gutter));
}

.col-10 {
  flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
  max-width: calc((100% / (12/10)) - var(--grid-gutter));
}

.col-11 {
  flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
  max-width: calc((100% / (12/11)) - var(--grid-gutter));
}

.col-12 {
  flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
  max-width: calc((100% / (12/12)) - var(--grid-gutter));
}

@media screen and (max-width: 599px) {
  .container {
    width: 100%;
  }

  .col,
  [class*="col-"],
  [class^="col-"] {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .col-1-md {
    flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
    max-width: calc((100% / (12/1)) - var(--grid-gutter));
  }

  .col-2-md {
    flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
    max-width: calc((100% / (12/2)) - var(--grid-gutter));
  }

  .col-3-md {
    flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
    max-width: calc((100% / (12/3)) - var(--grid-gutter));
  }

  .col-4-md {
    flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
    max-width: calc((100% / (12/4)) - var(--grid-gutter));
  }

  .col-5-md {
    flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
    max-width: calc((100% / (12/5)) - var(--grid-gutter));
  }

  .col-6-md {
    flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
    max-width: calc((100% / (12/6)) - var(--grid-gutter));
  }

  .col-7-md {
    flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
    max-width: calc((100% / (12/7)) - var(--grid-gutter));
  }

  .col-8-md {
    flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
    max-width: calc((100% / (12/8)) - var(--grid-gutter));
  }

  .col-9-md {
    flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
    max-width: calc((100% / (12/9)) - var(--grid-gutter));
  }

  .col-10-md {
    flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
    max-width: calc((100% / (12/10)) - var(--grid-gutter));
  }

  .col-11-md {
    flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
    max-width: calc((100% / (12/11)) - var(--grid-gutter));
  }

  .col-12-md {
    flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
    max-width: calc((100% / (12/12)) - var(--grid-gutter));
  }
}

@media screen and (min-width: 1200px) {
  .col-1-lg {
    flex: 0 0 calc((100% / (12/1)) - var(--grid-gutter));
    max-width: calc((100% / (12/1)) - var(--grid-gutter));
  }

  .col-2-lg {
    flex: 0 0 calc((100% / (12/2)) - var(--grid-gutter));
    max-width: calc((100% / (12/2)) - var(--grid-gutter));
  }

  .col-3-lg {
    flex: 0 0 calc((100% / (12/3)) - var(--grid-gutter));
    max-width: calc((100% / (12/3)) - var(--grid-gutter));
  }

  .col-4-lg {
    flex: 0 0 calc((100% / (12/4)) - var(--grid-gutter));
    max-width: calc((100% / (12/4)) - var(--grid-gutter));
  }

  .col-5-lg {
    flex: 0 0 calc((100% / (12/5)) - var(--grid-gutter));
    max-width: calc((100% / (12/5)) - var(--grid-gutter));
  }

  .col-6-lg {
    flex: 0 0 calc((100% / (12/6)) - var(--grid-gutter));
    max-width: calc((100% / (12/6)) - var(--grid-gutter));
  }

  .col-7-lg {
    flex: 0 0 calc((100% / (12/7)) - var(--grid-gutter));
    max-width: calc((100% / (12/7)) - var(--grid-gutter));
  }

  .col-8-lg {
    flex: 0 0 calc((100% / (12/8)) - var(--grid-gutter));
    max-width: calc((100% / (12/8)) - var(--grid-gutter));
  }

  .col-9-lg {
    flex: 0 0 calc((100% / (12/9)) - var(--grid-gutter));
    max-width: calc((100% / (12/9)) - var(--grid-gutter));
  }

  .col-10-lg {
    flex: 0 0 calc((100% / (12/10)) - var(--grid-gutter));
    max-width: calc((100% / (12/10)) - var(--grid-gutter));
  }

  .col-11-lg {
    flex: 0 0 calc((100% / (12/11)) - var(--grid-gutter));
    max-width: calc((100% / (12/11)) - var(--grid-gutter));
  }

  .col-12-lg {
    flex: 0 0 calc((100% / (12/12)) - var(--grid-gutter));
    max-width: calc((100% / (12/12)) - var(--grid-gutter));
  }
}

fieldset {
  padding: 0.5rem 2rem;
}

legend {
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.1rem;
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
select,
textarea,
textarea[type="text"] {
  font-family: inherit;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--color-lightGrey);
  font-size: 1em;
  transition: all 0.2s ease;
  display: block;
  width: 100%;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #f3f3f6 no-repeat 100%;
  background-size: 1ex;
  background-origin: content-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
}

.button,
[type="button"],
[type="reset"],
[type="submit"],
button {
  padding: 1rem 2.5rem;
  color: var(--color-darkGrey);
  background: var(--color-lightGrey);
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: var(--font-size);
  line-height: 1;
  text-align: center;
  transition: opacity 0.2s ease;
  text-decoration: none;
  transform: scale(1);
  display: inline-block;
  cursor: pointer;
}

.button.primary,
.button.secondary,
.button.dark,
.button.error,
.button.success,
[type="submit"] {
  color: #fff;
  z-index: 1; /* hightlight from other button's border when grouped */
  background-color: #000;
  background-color: var(--color-primary);
}

.button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover,
button:hover {
  opacity: 0.8;
}

input:disabled,
input:disabled:hover,
button:disabled,
button:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
}

.grouped {
  display: flex;
}

.grouped > *:not(:last-child) {
  margin-right: 16px;
}

.grouped.gapless > * {
  margin: 0 0 0 -1px !important;
  border-radius: 0 !important;
}

.grouped.gapless > *:first-child {
  margin: 0 !important;
  border-radius: 4px 0 0 4px !important;
}

.grouped.gapless > *:last-child {
  border-radius: 0 4px 4px 0 !important;
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"], :disabled):hover,
select:hover,
textarea:hover,
textarea[type="text"]:hover {
  border-color: var(--color-grey);
}

input:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]):focus,
select:focus,
textarea:focus,
textarea[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 1px var(--color-primary);
}

input.error:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
textarea.error {
  border-color: var(--color-error);
}

input.success:not([type="checkbox"], [type="radio"], [type="submit"], [type="color"], [type="button"], [type="reset"]),
textarea.success {
  border-color: var(--color-success);
}

[type="checkbox"],
[type="radio"] {
  width: 2rem;
  height: 1.6rem;
}

/* BUTTONS */

.button + .button {
  margin-left: 1rem;
}

.button.secondary {
  background-color: var(--color-grey);
}

.button.dark {
  background-color: var(--color-darkGrey);
}

.button.error {
  background-color: var(--color-error);
}

.button.success {
  background-color: var(--color-success);
}

.button.outline {
  background-color: transparent;
  border-color: var(--color-lightGrey);
}

.button.outline.primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.button.outline.secondary {
  border-color: var(--color-grey);
  color: var(--color-grey);
}

.button.outline.dark {
  border-color: var(--color-darkGrey);
  color: var(--color-darkGrey);
}

.button.clear {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-primary);
}

.button.icon {
  display: inline-flex;
  align-items: center;
}

.button.icon > img {
  margin-left: 2px;
}

.button.icon-only {
  padding: 1rem;
}

.button:active:not(:disabled),
[type="button"]:active:not(:disabled),
[type="reset"]:active:not(:disabled),
[type="submit"]:active:not(:disabled),
button:active:not(:disabled) {
  transform: scale(0.98);
}

::-moz-placeholder {
  color: #bdbfc4;
}

::placeholder {
  color: #bdbfc4;
}

.nav {
  display: flex;
  min-height: 5rem;
  align-items: stretch;
}

.nav img {
  max-height: 3rem;
}

.nav > .container {
  display: flex;
}

.nav-center,
.nav-left,
.nav-right {
  display: flex;
  flex: 1;
}

.nav-left {
  justify-content: flex-start;
}

.nav-right {
  justify-content: flex-end;
}

.nav-center {
  justify-content: center;
}

@media screen and (max-width: 480px) {
  .nav,
  .nav > .container {
    flex-direction: column;
  }

  .nav-center,
  .nav-left,
  .nav-right {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.nav a,
.nav .brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  color: var(--color-darkGrey);
}

.nav [aria-current="page"]:not(.button),
.nav .active:not(.button) {
  color: #000; /* fallback */
  color: var(--color-primary);
}

.nav .brand {
  font-size: 1.75em;
  padding-top: 0;
  padding-bottom: 0;
}

.nav .brand img {
  padding-right: 1rem;
}

.nav .button {
  margin: auto 1rem;
}

.card {
  padding: 1rem 2rem;
  border-radius: 4px;
  background: var(--bg-color);
  box-shadow: 0 1px 3px var(--color-grey);
}

.card p:last-child {
  margin: 0;
}

.card header > * {
  margin-top: 0;
  margin-bottom: 1rem;
}

.tabs {
  display: flex;
}

.tabs a {
  text-decoration: none;
}

.tabs > .dropdown > summary,
.tabs > a {
  padding: 1rem 2rem;
  flex: 0 1 auto;
  color: var(--color-darkGrey);
  border-bottom: 2px solid var(--color-lightGrey);
  text-align: center;
}

.tabs > a[aria-current="page"],
.tabs > a.active,
.tabs > a:hover {
  opacity: 1;
  border-bottom: 2px solid var(--color-darkGrey);
}

.tabs > a[aria-current="page"],
.tabs > a.active {
  border-color: var(--color-primary);
}

.tabs.is-full a {
  flex: 1 1 auto;
}

.tag {
  display: inline-block;
  border: 1px solid var(--color-lightGrey);
  text-transform: uppercase;
  color: var(--color-grey);
  padding: 0.5rem;
  line-height: 1;
  letter-spacing: 0.5px;
}

.tag.is-small {
  padding: 0.4rem;
  font-size: 0.75em;
}

.tag.is-large {
  padding: 0.7rem;
  font-size: 1.125em;
}

.tag + .tag {
  margin-left: 1rem;
}

details.dropdown {
  position: relative;
  display: inline-block;
}

details.dropdown > :last-child {
  position: absolute;
  left: 0;
  white-space: nowrap;
}

/* Colors */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-light {
  background-color: var(--color-lightGrey) !important;
}

.bg-dark {
  background-color: var(--color-darkGrey) !important;
}

.bg-grey {
  background-color: var(--color-grey) !important;
}

.bg-error {
  background-color: var(--color-error) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bd-primary {
  border: 1px solid var(--color-primary) !important;
}

.bd-light {
  border: 1px solid var(--color-lightGrey) !important;
}

.bd-dark {
  border: 1px solid var(--color-darkGrey) !important;
}

.bd-grey {
  border: 1px solid var(--color-grey) !important;
}

.bd-error {
  border: 1px solid var(--color-error) !important;
}

.bd-success {
  border: 1px solid var(--color-success) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

.text-light {
  color: var(--color-lightGrey) !important;
}

.text-dark {
  color: var(--color-darkGrey) !important;
}

.text-grey {
  color: var(--color-grey) !important;
}

.text-error {
  color: var(--color-error) !important;
}

.text-success {
  color: var(--color-success) !important;
}

.text-white {
  color: #fff !important;
}

/* Position & alignment */
.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.is-full-screen {
  width: 100%;
  min-height: 100vh;
}

.is-full-width {
  width: 100% !important;
}

.is-vertical-align {
  display: flex;
  align-items: center;
}

.is-horizontal-align {
  display: flex;
  justify-content: center;
}

.is-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.is-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.is-fixed {
  position: fixed;
  width: 100%;
}

.is-paddingless {
  padding: 0 !important;
}

.is-marginless {
  margin: 0 !important;
}

.is-pointer {
  cursor: pointer !important;
}

.is-rounded {
  border-radius: 100%;
}

.clearfix {
  content: "";
  display: table;
  clear: both;
}

.is-hidden {
  display: none !important;
}

@media screen and (max-width: 599px) {
  .hide-xs {
    display: none !important;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  .hide-sm {
    display: none !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .hide-md {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .hide-lg {
    display: none !important;
  }
}

@media print {
  .hide-pr {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Chroma Syntax — Light (monokailight) + Dark (dracula)
   ═══════════════════════════════════════════════════════ */

/* ── Light theme (default) ──────────────────────────── */
.bg { color:#272822; background-color:#f8f8f8 }
.chroma { color:#272822; background-color:#f8f8f8 }
.chroma .err { color:#960050; background-color:#1e0010 }
.chroma .lnlinks { outline:none; text-decoration:none; color:inherit }
.chroma .lntd { vertical-align:top; padding:0; margin:0; border:0 }
.chroma .lntable { border-spacing:0; padding:0; margin:0; border:0 }
.chroma .hl { background-color:#e1e1e1 }
.chroma .lnt { white-space:pre; -webkit-user-select:none; user-select:none; margin-right:0.4em; padding:0 0.4em; color:#7f7f7f }
.chroma .ln  { white-space:pre; -webkit-user-select:none; user-select:none; margin-right:0.4em; padding:0 0.4em; color:#7f7f7f }
.chroma .line { display:flex }
.chroma .k   { color:#00a8c8 }
.chroma .kc  { color:#00a8c8 }
.chroma .kd  { color:#00a8c8 }
.chroma .kn  { color:#f92672 }
.chroma .kp  { color:#00a8c8 }
.chroma .kr  { color:#00a8c8 }
.chroma .kt  { color:#00a8c8 }
.chroma .n   { color:#111 }
.chroma .na  { color:#75af00 }
.chroma .nc  { color:#75af00 }
.chroma .no  { color:#00a8c8 }
.chroma .nd  { color:#75af00 }
.chroma .ni  { color:#111 }
.chroma .ne  { color:#75af00 }
.chroma .nl  { color:#111 }
.chroma .nn  { color:#111 }
.chroma .nx  { color:#75af00 }
.chroma .py  { color:#111 }
.chroma .nt  { color:#f92672 }
.chroma .nb  { color:#111 }
.chroma .bp  { color:#111 }
.chroma .nv  { color:#111 }
.chroma .vc  { color:#111 }
.chroma .vg  { color:#111 }
.chroma .vi  { color:#111 }
.chroma .vm  { color:#111 }
.chroma .nf  { color:#75af00 }
.chroma .fm  { color:#75af00 }
.chroma .l   { color:#ae81ff }
.chroma .ld  { color:#d88200 }
.chroma .s   { color:#d88200 }
.chroma .sa  { color:#d88200 }
.chroma .sb  { color:#d88200 }
.chroma .sc  { color:#d88200 }
.chroma .dl  { color:#d88200 }
.chroma .sd  { color:#d88200 }
.chroma .s2  { color:#d88200 }
.chroma .se  { color:#8045ff }
.chroma .sh  { color:#d88200 }
.chroma .si  { color:#d88200 }
.chroma .sx  { color:#d88200 }
.chroma .sr  { color:#d88200 }
.chroma .s1  { color:#d88200 }
.chroma .ss  { color:#d88200 }
.chroma .m   { color:#ae81ff }
.chroma .mb  { color:#ae81ff }
.chroma .mf  { color:#ae81ff }
.chroma .mh  { color:#ae81ff }
.chroma .mi  { color:#ae81ff }
.chroma .il  { color:#ae81ff }
.chroma .mo  { color:#ae81ff }
.chroma .o   { color:#f92672 }
.chroma .ow  { color:#f92672 }
.chroma .p   { color:#111 }
.chroma .c   { color:#75715e }
.chroma .ch  { color:#75715e }
.chroma .cm  { color:#75715e }
.chroma .c1  { color:#75715e }
.chroma .cs  { color:#75715e }
.chroma .cp  { color:#75715e }
.chroma .cpf { color:#75715e }
.chroma .ge  { font-style:italic }
.chroma .gs  { font-weight:bold }

/* ── Dark theme ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .bg     { color:#f8f8f2; background-color:#1e1e2e }
  .chroma { color:#f8f8f2; background-color:#1e1e2e }
  .chroma .err { color:#ff5555; background-color:transparent }
  .chroma .hl  { background-color:#313244 }
  .chroma .lnt { color:#585b70 }
  .chroma .ln  { color:#585b70 }
  .chroma .k   { color:#ff79c6 }
  .chroma .kc  { color:#ff79c6 }
  .chroma .kd  { color:#8be9fd; font-style:italic }
  .chroma .kn  { color:#ff79c6 }
  .chroma .kp  { color:#ff79c6 }
  .chroma .kr  { color:#ff79c6 }
  .chroma .kt  { color:#8be9fd }
  .chroma .n   { color:#f8f8f2 }
  .chroma .na  { color:#50fa7b }
  .chroma .nc  { color:#50fa7b }
  .chroma .no  { color:#8be9fd }
  .chroma .nd  { color:#50fa7b }
  .chroma .ni  { color:#f8f8f2 }
  .chroma .ne  { color:#50fa7b }
  .chroma .nl  { color:#8be9fd; font-style:italic }
  .chroma .nn  { color:#f8f8f2 }
  .chroma .nx  { color:#50fa7b }
  .chroma .py  { color:#f8f8f2 }
  .chroma .nt  { color:#ff79c6 }
  .chroma .nb  { color:#8be9fd; font-style:italic }
  .chroma .bp  { font-style:italic }
  .chroma .nv  { color:#8be9fd; font-style:italic }
  .chroma .vc  { color:#8be9fd; font-style:italic }
  .chroma .vg  { color:#8be9fd; font-style:italic }
  .chroma .vi  { color:#8be9fd; font-style:italic }
  .chroma .vm  { color:#8be9fd; font-style:italic }
  .chroma .nf  { color:#50fa7b }
  .chroma .fm  { color:#50fa7b }
  .chroma .l   { color:#bd93f9 }
  .chroma .ld  { color:#f1fa8c }
  .chroma .s   { color:#f1fa8c }
  .chroma .sa  { color:#f1fa8c }
  .chroma .sb  { color:#f1fa8c }
  .chroma .sc  { color:#f1fa8c }
  .chroma .dl  { color:#f1fa8c }
  .chroma .sd  { color:#f1fa8c }
  .chroma .s2  { color:#f1fa8c }
  .chroma .se  { color:#f1fa8c }
  .chroma .sh  { color:#f1fa8c }
  .chroma .si  { color:#f1fa8c }
  .chroma .sx  { color:#f1fa8c }
  .chroma .sr  { color:#f1fa8c }
  .chroma .s1  { color:#f1fa8c }
  .chroma .ss  { color:#f1fa8c }
  .chroma .m   { color:#bd93f9 }
  .chroma .mb  { color:#bd93f9 }
  .chroma .mf  { color:#bd93f9 }
  .chroma .mh  { color:#bd93f9 }
  .chroma .mi  { color:#bd93f9 }
  .chroma .il  { color:#bd93f9 }
  .chroma .mo  { color:#bd93f9 }
  .chroma .o   { color:#ff79c6 }
  .chroma .ow  { color:#ff79c6 }
  .chroma .p   { color:#f8f8f2 }
  .chroma .c   { color:#6272a4 }
  .chroma .ch  { color:#6272a4 }
  .chroma .cm  { color:#6272a4 }
  .chroma .c1  { color:#6272a4 }
  .chroma .cs  { color:#6272a4 }
  .chroma .cp  { color:#ff79c6 }
  .chroma .cpf { color:#ff79c6 }
  .chroma .gd  { color:#ff5555 }
  .chroma .gi  { color:#50fa7b; font-weight:bold }
  .chroma .go  { color:#44475a }
  .chroma .ge  { text-decoration:underline }
  .chroma .gh  { font-weight:bold }
  .chroma .gu  { font-weight:bold }
  .chroma .gl  { text-decoration:underline }
}
@charset "UTF-8";
:root {
  --color-primary: #1067D1;
  --grid-maxWidth: 100rem;
  --font-family-sans: -apple-system, BlinkMacSystemFont, 
      Helvetica Neue, "Roboto", "Ubuntu", "Cantarell",
      PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei,
      sans-serif;
  --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; }

del {
  text-decoration: line-through; }

/* ── Block math overflow ───────────────────────────── */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0; }

/* ── Code block — Sublime Text style ───────────────── */
.highlight {
  --cb-bg: #f8f8f8;
  --cb-header-bg: #ededee;
  --cb-header-border: #dcdcde;
  --cb-border: #d4d4d8;
  --cb-lang-color: #8b8b8e;
  --cb-ln-color: #b0b0b4;
  --cb-ln-border: #e0e0e3;
  --cb-btn-bg: transparent;
  --cb-btn-hover: rgba(0, 0, 0, 0.06);
  --cb-btn-icon: #a0a0a4;
  --cb-radius: 6px;
  --cb-font: "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", monospace;
  position: relative;
  max-width: 100%;
  border-radius: var(--cb-radius);
  border: 1px solid var(--cb-border);
  background: var(--cb-bg);
  overflow: hidden;
  margin: 1rem 0;
  font-family: var(--cb-font);
  font-size: 12.8px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@media (prefers-color-scheme: dark) {
  .highlight {
    --cb-bg: #1e1e2e;
    --cb-header-bg: #252536;
    --cb-header-border: #2e2e42;
    --cb-border: #2e2e42;
    --cb-lang-color: #6c6c80;
    --cb-ln-color: #44445a;
    --cb-ln-border: #2a2a3e;
    --cb-btn-bg: transparent;
    --cb-btn-hover: rgba(255, 255, 255, 0.08);
    --cb-btn-icon: #555568; } }

/* Header bar: lang label left, copy button right */
.code-header {
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  background: var(--cb-header-bg);
  border-bottom: 1px solid var(--cb-header-border);
  user-select: none;
  height: 30px; }

.code-lang {
  font-family: var(--cb-font);
  font-size: 11px;
  color: var(--cb-lang-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  flex: 1; }

.code-lang-guessed {
  font-style: italic;
  opacity: 0.7; }

.copy-code-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--cb-btn-bg);
  color: var(--cb-btn-icon);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, transform 60ms ease; }

.highlight:hover .copy-code-button {
  opacity: 1; }

.copy-code-button:hover {
  background: var(--cb-btn-hover);
  color: var(--cb-lang-color); }

.copy-code-button:active {
  transform: scale(0.9); }

.copy-code-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round; }

.copy-code-button .icon-check {
  display: none; }

.copy-code-button.copied {
  opacity: 1; }

.copy-code-button.copied .icon-copy {
  display: none; }

.copy-code-button.copied .icon-check {
  display: block;
  color: #28c840; }

/* Line number table layout —
   Key: the table is display:grid so gutter has fixed width and
   code cell takes remaining space with overflow-x scroll. */
.highlight .lntable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  border-spacing: 0; }

.highlight .lntd:first-child {
  /* gutter column — fixed width, no shrink */
  white-space: nowrap;
  vertical-align: top;
  padding: 0.7rem 0;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid var(--cb-ln-border);
  background: var(--cb-header-bg);
  position: sticky;
  left: 0;
  z-index: 1; }

.highlight .lntd:first-child pre {
  margin: 0;
  padding: 0 0.6rem;
  background: transparent;
  border: none;
  overflow: hidden; }

.highlight .lntd:last-child {
  /* code column — this IS the horizontal scroll container.
     Like VSCode: lines never wrap, scrollbar on the code pane. */
  min-width: 0;
  vertical-align: top;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }

.highlight .lnt {
  color: var(--cb-ln-color);
  font-size: 12px;
  line-height: 20.48px;
  padding: 0 0.15rem;
  display: block;
  text-align: right; }

/* Code body — pre is NOT the scroll container, td is.
   pre renders at natural (possibly >100%) width. */
.highlight pre {
  position: relative;
  border-radius: 0;
  border: none;
  width: max-content;
  min-width: 100%;
  overflow: visible;
  box-sizing: border-box;
  margin: 0;
  padding: 0.7rem 1rem;
  white-space: pre;
  background: var(--cb-bg);
  line-height: 20.48px;
  tab-size: 4; }
  .highlight pre code {
    border: none;
    padding: 0;
    margin: 0;
    font-family: var(--cb-font);
    font-size: 12.8px;
    line-height: 20.48px;
    background: none;
    color: inherit;
    white-space: pre; }
  .highlight pre .line, .highlight pre .cl {
    white-space: pre; }

/* Standalone pre (not Chroma) */
pre:not(.highlight pre) {
  position: relative;
  border-radius: 6px;
  border: 1px solid #d4d4d8;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  line-height: 1.6;
  font-family: "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
  font-size: 12.8px; }
  pre:not(.highlight pre) code {
    border: none; }

@media (prefers-color-scheme: dark) {
  pre:not(.highlight pre) {
    border-color: #2e2e42;
    background: #1e1e2e;
    color: #f8f8f2; } }

code {
  font-size: 1.4rem;
  color: #5c5d66;
  padding: 0.1em 0.2em;
  margin: 0 0.1em; }

blockquote {
  margin-left: 0;
  margin-right: 0; }
  blockquote p:first-child {
    margin-top: 0; }
  blockquote p:last-child {
    margin-bottom: 0; }

p hanla:after {
  content: " ";
  display: inline;
  font-size: 0.89em; }

#topnav {
  margin-top: 1rem;
  margin-bottom: 4rem; }
  #topnav .nav-left {
    font-size: 2em;
    font-weight: 500;
    padding: 0; }
    #topnav .nav-left a {
      padding-left: 0; }
  #topnav .nav-right i {
    font-size: 2rem; }

article.blog-content {
  counter-reset: figure;
  /* Prevent long content (e.g. code) from forcing flex columns wider than the container. */
  /* Bars column — collapsed indicator, vertically centered */
  /* Expanded text panel — slides in from right */
  /* --- Collapsed bars (inside .toc-float-inner) --- */
  /* --- Expanded panel items (inside .toc-float-panel) --- */
  /*
  a.footnote-ref {
    &::before {
      content: "["
    }
    &::after {
      content: "]"
    }
  }
  */ }
  article.blog-content .row > .col,
  article.blog-content .row > [class^="col-"],
  article.blog-content .row > [class*=" col-"] {
    min-width: 0; }
  article.blog-content.draft {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200px' width='200px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(220,220,220)' font-size='20'>DRAFT</text></svg>"); }
  article.blog-content .date {
    font-size: 1.6rem;
    margin-bottom: 0;
    color: var(--color-darkGrey); }
    article.blog-content .date i {
      margin-right: 0.5rem; }
  article.blog-content .tags {
    font-size: 1.2rem;
    margin-bottom: 0;
    color: var(--color-darkGrey); }
    article.blog-content .tags i {
      margin-right: 1rem; }
    article.blog-content .tags .tag {
      border-radius: .2em;
      text-transform: unset;
      padding: 0.4rem; }
  article.blog-content .title a {
    color: var(--font-color); }
  article.blog-content .toc-float {
    --toc-line: rgba(0, 0, 0, 0.14);
    --toc-line-active: rgba(0, 0, 0, 0.65);
    --toc-panel-bg: #fff;
    --toc-panel-shadow: rgba(25, 25, 25, 0.05) 0px 20px 24px 0px, rgba(25, 25, 25, 0.027) 0px 5px 8px 0px, rgba(42, 28, 0, 0.07) 0px 0px 0px 1px;
    --toc-text: rgb(125, 122, 117);
    --toc-text-hover: rgb(55, 53, 47);
    --toc-text-active: rgb(39, 131, 222);
    --toc-hover-bg: rgba(0, 0, 0, 0.04);
    --toc-sb-thumb: rgb(211, 209, 203);
    position: fixed;
    right: 0;
    top: 0;
    width: 56px;
    height: 100vh;
    z-index: 50;
    display: flex;
    flex-direction: column;
    pointer-events: none; }
  @media (prefers-color-scheme: dark) {
    article.blog-content .toc-float {
      --toc-line: rgba(255, 255, 255, 0.13);
      --toc-line-active: rgba(255, 255, 255, 0.65);
      --toc-panel-bg: #202020;
      --toc-panel-shadow: rgba(0, 0, 0, 0.3) 0px 20px 24px 0px, rgba(0, 0, 0, 0.15) 0px 5px 8px 0px, rgba(255, 255, 255, 0.06) 0px 0px 0px 1px;
      --toc-text: rgb(155, 150, 145);
      --toc-text-hover: rgb(215, 212, 208);
      --toc-text-active: rgb(82, 168, 255);
      --toc-hover-bg: rgba(255, 255, 255, 0.055);
      --toc-sb-thumb: rgb(70, 70, 70); } }
  article.blog-content .toc-float-inner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 56px;
    max-height: 400px;
    overflow: hidden;
    padding: 0 8px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 150ms ease;
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent); }
  article.blog-content .toc-float:is(:hover, :focus-within, [data-pinned="true"]) .toc-float-inner {
    opacity: 0;
    transition: opacity 80ms ease; }
  article.blog-content .toc-float-panel {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    right: 10px;
    width: 242px;
    max-height: 488px;
    overflow-y: auto;
    scrollbar-color: var(--toc-sb-thumb) transparent;
    background: var(--toc-panel-bg);
    box-shadow: var(--toc-panel-shadow);
    border-radius: 14px;
    padding: 12px 12px 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 100ms ease, transform 100ms ease; }
  article.blog-content .toc-float:is(:hover, :focus-within, [data-pinned="true"]) .toc-float-panel {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition: opacity 180ms ease 60ms, transform 180ms ease 60ms; }
  article.blog-content details.toc-mobile {
    margin: 1rem 0 1.25rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.015); }
  article.blog-content details.toc-mobile > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none; }
  article.blog-content details.toc-mobile > summary::-webkit-details-marker {
    display: none; }
  article.blog-content nav.toc {
    margin-top: 0.75rem;
    font-size: 1rem; }
  article.blog-content .toc-n-bar {
    height: 2px;
    border-radius: 2px;
    background: var(--toc-line);
    transition: background 0.2s ease, box-shadow 0.2s ease; }
  article.blog-content .toc-n-bar[data-level="2"] {
    width: 16px;
    margin-left: 0; }
  article.blog-content .toc-n-bar[data-level="3"] {
    width: 12px;
    margin-left: 4px; }
  article.blog-content .toc-n-bar[data-level="4"] {
    width: 8px;
    margin-left: 8px; }
  article.blog-content .toc-n-bar[aria-current="true"] {
    background: var(--toc-line-active); }
  article.blog-content nav.toc.toc-notion {
    margin: 0;
    font-size: 13px;
    padding-bottom: 6px; }
  article.blog-content .toc-n-item {
    display: block;
    padding: 4px 6px;
    text-decoration: none;
    font-size: 12.5px;
    color: var(--toc-text);
    line-height: 1.35;
    width: 100%;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2; }
  article.blog-content .toc-n-item[data-level="3"] {
    padding-left: 18px; }
  article.blog-content .toc-n-item[data-level="4"] {
    padding-left: 30px; }
  article.blog-content .toc-n-item:hover {
    color: var(--toc-text-hover);
    background: var(--toc-hover-bg); }
  article.blog-content .toc-n-item[aria-current="true"] {
    color: var(--toc-text-active); }
  article.blog-content .toc-n-item[aria-current="true"]:hover {
    color: var(--toc-text-active);
    background: var(--toc-hover-bg); }
  article.blog-content nav.toc #TableOfContents > ul {
    margin: 0;
    padding: 0; }
  article.blog-content nav.toc #TableOfContents ul {
    list-style: none;
    margin: 0;
    padding-left: 0.9rem;
    border-left: 1px dashed rgba(0, 0, 0, 0.12); }
  article.blog-content nav.toc #TableOfContents li {
    margin: 0.35rem 0;
    position: relative; }
  article.blog-content nav.toc #TableOfContents li::before {
    content: "";
    position: absolute;
    left: -0.9rem;
    top: 0.85em;
    width: 0.75rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.12); }
  article.blog-content nav.toc #TableOfContents a {
    color: var(--font-color);
    opacity: 0.85;
    text-decoration: none; }
  article.blog-content nav.toc #TableOfContents a[aria-current="true"] {
    opacity: 1;
    font-weight: 600;
    text-decoration: underline; }
  article.blog-content nav.toc #TableOfContents a:hover {
    opacity: 1;
    text-decoration: underline; }
  article.blog-content .content > figure {
    margin: 1rem;
    width: calc(100% - var(--grid-gutter)); }
  article.blog-content .dir-tree {
    margin-top: 1rem;
    font-family: var(--font-family-mono);
    font-size: 1.35rem; }
  article.blog-content .dir-tree details {
    margin: 0.25rem 0; }
  article.blog-content .dir-tree summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
    padding: 0.35rem 0.45rem;
    border-radius: 0.5rem; }
  article.blog-content .dir-tree summary:hover {
    background: rgba(0, 0, 0, 0.03); }
  article.blog-content .dir-tree summary::-webkit-details-marker {
    display: none; }
  article.blog-content .dir-tree summary::before {
    content: "›";
    display: inline-block;
    width: 0.9rem;
    opacity: 0.6;
    transform: translateY(-0.03em);
    transition: transform 120ms ease; }
  article.blog-content .dir-tree details[open] > summary::before {
    transform: rotate(90deg) translateX(-0.05em); }
  article.blog-content .dir-tree .dir-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  article.blog-content .dir-tree .dir-meta {
    font-size: 1.1rem;
    opacity: 0.55;
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.015); }
  article.blog-content .dir-tree .dir-node {
    padding-left: 0.75rem;
    border-left: 1px dashed rgba(0, 0, 0, 0.12); }
  article.blog-content .dir-tree .dir-files {
    margin: 0.2rem 0 0.35rem 0;
    padding-left: 1.55rem; }
  article.blog-content .dir-tree a.dir-file {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.25rem 0.45rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--font-color);
    opacity: 0.9; }
  article.blog-content .dir-tree a.dir-file:hover {
    background: rgba(0, 0, 0, 0.03);
    opacity: 1;
    text-decoration: none; }
  article.blog-content .dir-tree .dir-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-family-sans);
    font-size: 1.45rem; }
  article.blog-content .dir-tree .dir-date {
    font-size: 1.1rem;
    opacity: 0.6;
    white-space: nowrap; }
  article.blog-content .footnotes p {
    margin: 0 0; }
  article.blog-content figure {
    margin: 0;
    width: 100%; }
    article.blog-content figure img, article.blog-content figure video {
      max-width: 100%; }
    article.blog-content figure.center > img, article.blog-content figure.center > video {
      display: block;
      margin: 0 auto; }
    article.blog-content figure.center figcaption {
      text-align: center; }
    article.blog-content figure.medium-width > img, article.blog-content figure.medium-width > video {
      max-width: MIN(100%, 60rem); }
    article.blog-content figure figcaption::before {
      counter-increment: figure;
      content: "图 " counter(figure) ": "; }

#blogroll article {
  margin-bottom: 5rem; }
  #blogroll article .summary {
    line-height: 1.55;
    max-height: calc(1.55em * 7);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7; }
  #blogroll article .read-more {
    color: var(--color-grey); }
    #blogroll article .read-more:before {
      content: "»"; }

#blog-article .related {
  margin-top: 5rem; }

#blog-article .pubkey-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.2rem 0 1rem; }

#blog-article .pubkey-actions .button {
  margin: 0; }

#about-me {
  margin-bottom: 5rem; }

section.pager .button {
  margin: 0 1em; }

footer.copy-right {
  margin: 2em auto; }
  footer.copy-right p {
    margin: 0; }