@charset "UTF-8";
:root {
    --base-font-size: 100%;
    --measure-breakpoint-small: 500px;
    --measure-breakpoint-medium: 800px;
    --measure-breakpoint-large: 1140px;
    --measure-gap: 2.25rem;
    --measure-gutter: 1.25rem;
    --measure-aside: 15.875rem;
    --measure-content: 50.625rem;
    --measure-avatar: 6.25rem;
    --measure-avatar-small: 3rem;
    --measure-icon: 40px;
    --measure-logo: 8.5rem;
    --measure-small: 0.625rem;
    --measure-small-relative: 0.625em;
    --measure-small-proportional: 2vmin;
    --measure-medium: 1.25rem;
    --measure-medium-relative: 1.25em;
    --measure-medium-proportional: 4vmin;
    --measure-large: 2.25rem;
    --measure-large-relative: 2.25em;
    --measure-large-proportional: 8vmin;
    --measure-gigantic: 2.25rem;
    --measure-gigantic-relative: 2.25em;
    --measure-gigantic-proportional: 8vmin;
    --measure-one: 1rem;
    --measure-one-relative: 1em;
    --measure-line-length-minimum: 21em;
    --measure-line-length-maximum: 30em;
    --measure-line-length-responsive: calc(21em + (30 - 21) * ((100vw - 500px) / (1140 - 500)));
    --measure-line-length-clamp: clamp(21em, 100vw, 30em);
    --opacity-alpha: 0.9;
    --opacity-beta: 0.7;
    --opacity-gamma: 0.1;
    --opacity-delta: 0.05;
    --color-transparent: rgba(0, 0, 0, 0);
    --color-bowhead: #4f758e;
    --color-raven: #5f8aa6;
    --color-coyote: #7298b1;
    --color-canada: #eb2d37;
    --color-black: #060606;
    --color-mineshaft: #2b2b2b;
    --color-kaiser: #4f4f4f;
    --color-dove: #737373;
    --color-alto: #dddddd;
    --color-white: #f9f9f9;
    --color-highlight: gold;
    --color-black--alpha: rgba(6, 6, 6, 0.9);
    --color-black--gamma: rgba(6, 6, 6, 0.1);
    --color-black--delta: rgba(6, 6, 6, 0.05);
    --color-raven--gamma: rgba(95, 138, 166, 0.1);
    --color-highlight-alpha: #586e75;
    --color-highlight-beta: #abbbbb;
    --color-highlight-gamma: lightgreen;
    --color-highlight-delta: #cb4b16;
    --color-highlight-epsilon: mediumspringgreen;
    --color-highlight-zeta: #dc322f;
    --color-highlight-eta: skyblue;
    --color-highlight-theta: #b58900;
    --color-css: #016fba;
    --color-haml: #e54d26;
    --color-html: #e54d26;
    --color-jade: #e54d26;
    --color-javascript: #f1c54c;
    --color-liquid: #7ab55c;
    --color-markdown: #4a525a;
    --color-nunjucks: #3d8137;
    --color-sass: #c6538c;
    --color-scss: #c6538c;
    --color-liquid-white: #dfebd9;
    --color-codepen: #212121;
    --color-github: #333333;
    --color-lastfm: #e31b23;
    --color-nintendo: #e60012;
    --color-spotify: #1db954;
    --color-twitter: #55acee;
    --border-width-default: 0.25rem;
    --border-width-thin: 0.125rem;
    --border-width-hairline: 1px;
    --border-width-button: 0.182em;
    --border-style-default: solid;
    --border-style-alternate: dotted;
    --border-radius-default: 0.375rem;
    --border-radius-thin: 0.25rem;
    --border-radius-hairline: 0.125rem;
    --font-display-default: swap;
    --font-family-default: Proxima Nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
    --font-family-alpha: Heebo, sans-serif;
    --font-family-serif: Georgia, serif;
    --font-family-monospace: Menlo, Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
    --font-size-default: 1rem;
    --font-size-alpha: 3.25rem;
    --font-size-beta: 1.375rem;
    --font-size-gamma: 1.125rem;
    --font-size-large: 1.25rem;
    --font-size-large-relative: 1.25em;
    --font-size-small: 0.875rem;
    --font-size-small-relative: 0.875em;
    --font-size-tiny: 0.75rem;
    --font-size-tiny-relative: 0.75em;
    --font-stretch-default: normal;
    --font-variant-default: normal;
    --font-weight-default: 400;
    --font-weight-bold: 600;
    --unicode-range-default: U+0020-007D, U+007F-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
    --line-height-default: 1.875;
    --line-height-small: 1.25;
    --line-height-medium: 1.429;
    --line-height-code: 2;
    --letter-spacing-default: 0;
    --letter-spacing-uppercase: 1px;
    --animation-duration: 2s;
    --animation-function: linear;
    --animation-fill-mode: forwards;
    --rotation-default: 5deg;
    --transition-duration-default: 0.2s;
    --transition-duration-long: 1s;
    --transition-function-default: ease;
    --transition-function-alternate: linear;
    --z-index-below: -1;
    --z-index-root: 0;
    --z-index-default: 1;
    --z-index-above: 2;
    --z-index-modal: 3;
    --z-index-dialog: 4;
    --z-index-notification: 5;
    --max-columns: 2;
    --color-scheme: "light";
}

@media (prefers-color-scheme: dark) {
    :root {
      --color-scheme: "dark";
    }

    :root:not([data-user-color-scheme]) {
      --color-kaiser: #737373;
      --color-dove: #4f4f4f;
      --color-coyote: #4f758e;
      --color-bowhead: #7298b1;
      --color-bear: #303537;
    }
    :root:not([data-user-color-scheme]) header,
  :root:not([data-user-color-scheme]) main {
      color: var(--color-white);
    }
    :root:not([data-user-color-scheme]) main {
      background-color: var(--color-mineshaft);
    }
    :root:not([data-user-color-scheme]) footer {
      background-image: linear-gradient(to bottom, var(--color-black--gamma), var(--color-black--gamma));
    }
    :root:not([data-user-color-scheme]) h1 {
      text-shadow: 0.025em -0.025em 0 var(--color-mineshaft), 0.025em -0.0125em 0 var(--color-mineshaft), 0.025em 0.025em 0 var(--color-mineshaft), 0 0.025em 0 var(--color-mineshaft), -0.025em 0.025em 0 var(--color-mineshaft), -0.025em -0.0125em 0 var(--color-mineshaft), -0.025em -0.025em 0 var(--color-mineshaft);
    }
    :root:not([data-user-color-scheme]) a,
  :root:not([data-user-color-scheme]) .anchor {
      text-decoration-color: var(--color-kaiser);
    }
    :root:not([data-user-color-scheme]) h2 a {
      color: var(--color-alto);
      text-decoration-color: var(--color-transparent);
    }
    :root:not([data-user-color-scheme]) .rating::before {
      color: var(--color-kaiser);
    }
    :root:not([data-user-color-scheme]) .rating::after {
      color: var(--color-alto);
    }
}
[data-user-color-scheme=dark] {
--color-kaiser: #737373;
--color-dove: #4f4f4f;
--color-coyote: #4f758e;
--color-bowhead: #7298b1;
--color-bear: #303537;
}
[data-user-color-scheme=dark] header,
[data-user-color-scheme=dark] main {
color: var(--color-white);
}
[data-user-color-scheme=dark] main {
background-color: var(--color-mineshaft);
}
[data-user-color-scheme=dark] footer {
background-image: linear-gradient(to bottom, var(--color-black--gamma), var(--color-black--gamma));
}
[data-user-color-scheme=dark] h1 {
text-shadow: 0.025em -0.025em 0 var(--color-mineshaft), 0.025em -0.0125em 0 var(--color-mineshaft), 0.025em 0.025em 0 var(--color-mineshaft), 0 0.025em 0 var(--color-mineshaft), -0.025em 0.025em 0 var(--color-mineshaft), -0.025em -0.0125em 0 var(--color-mineshaft), -0.025em -0.025em 0 var(--color-mineshaft);
}
[data-user-color-scheme=dark] a,
[data-user-color-scheme=dark] .anchor {
text-decoration-color: var(--color-kaiser);
}
[data-user-color-scheme=dark] h2 a {
color: var(--color-alto);
text-decoration-color: var(--color-transparent);
}
[data-user-color-scheme=dark] .rating::before {
color: var(--color-kaiser);
}
[data-user-color-scheme=dark] .rating::after {
color: var(--color-alto);
}


/* @media (prefers-color-scheme: dark) {
    :root {
        --color-scheme: "dark";
    }
    @supports ((-webkit-filter: invert(1) hue-rotate(180deg)) or (filter: invert(1) hue-rotate(180deg))) {
        :root:not([data-user-color-scheme]) {
            -webkit-filter: invert(1) hue-rotate(180deg);
            filter: invert(1) hue-rotate(180deg);
        }
        :root:not([data-user-color-scheme]) img,
        :root:not([data-user-color-scheme]) svg,
        :root:not([data-user-color-scheme]) [role="img"],
        :root:not([data-user-color-scheme]) embed,
        :root:not([data-user-color-scheme]) iframe,
        :root:not([data-user-color-scheme]) object,
        :root:not([data-user-color-scheme]) video,
        :root:not([data-user-color-scheme]) .highlight {
            -webkit-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.2);
            filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.2);
        }
        :root:not([data-user-color-scheme]) .dark-background {
            -webkit-filter: invert(1) hue-rotate(180deg);
            filter: invert(1) hue-rotate(180deg);
        }
        :root:not([data-user-color-scheme]) .dark-background img,
        :root:not([data-user-color-scheme]) .dark-background svg,
        :root:not([data-user-color-scheme]) .dark-background [role="img"],
        :root:not([data-user-color-scheme]) .dark-background embed,
        :root:not([data-user-color-scheme]) .dark-background iframe,
        :root:not([data-user-color-scheme]) .dark-background object,
        :root:not([data-user-color-scheme]) .dark-background video,
        :root:not([data-user-color-scheme]) .dark-background .highlight {
            -webkit-filter: none;
            filter: none;
        }
    }
    @supports not ((-webkit-filter: invert(1) hue-rotate(180deg)) or (filter: invert(1) hue-rotate(180deg))) {
        :root:not([data-user-color-scheme]) {
            --color-black: #f9f9f9;
            --color-mineshaft: #dddddd;
            --color-kaiser: #737373;
            --color-dove: #4f4f4f;
            --color-alto: #2b2b2b;
            --color-white: #060606;
        }
    }
}

@supports ((-webkit-filter: invert(1) hue-rotate(180deg)) or (filter: invert(1) hue-rotate(180deg))) {
    [data-user-color-scheme="dark"] {
        -webkit-filter: invert(1) hue-rotate(180deg);
        filter: invert(1) hue-rotate(180deg);
    }
    [data-user-color-scheme="dark"] img,
    [data-user-color-scheme="dark"] svg,
    [data-user-color-scheme="dark"] [role="img"],
    [data-user-color-scheme="dark"] embed,
    [data-user-color-scheme="dark"] iframe,
    [data-user-color-scheme="dark"] object,
    [data-user-color-scheme="dark"] video,
    [data-user-color-scheme="dark"] .highlight {
        -webkit-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.2);
        filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.2);
    }
    [data-user-color-scheme="dark"] .dark-background {
        -webkit-filter: invert(1) hue-rotate(180deg);
        filter: invert(1) hue-rotate(180deg);
    }
    [data-user-color-scheme="dark"] .dark-background img,
    [data-user-color-scheme="dark"] .dark-background svg,
    [data-user-color-scheme="dark"] .dark-background [role="img"],
    [data-user-color-scheme="dark"] .dark-background embed,
    [data-user-color-scheme="dark"] .dark-background iframe,
    [data-user-color-scheme="dark"] .dark-background object,
    [data-user-color-scheme="dark"] .dark-background video,
    [data-user-color-scheme="dark"] .dark-background .highlight {
        -webkit-filter: none;
        filter: none;
    }
}

@supports not ((-webkit-filter: invert(1) hue-rotate(180deg)) or (filter: invert(1) hue-rotate(180deg))) {
    [data-user-color-scheme="dark"] {
        --color-black: #f9f9f9;
        --color-mineshaft: #dddddd;
        --color-kaiser: #737373;
        --color-dove: #4f4f4f;
        --color-alto: #2b2b2b;
        --color-white: #060606;
    }
} */

@font-face {
    font-family: "Heebo";
    font-display: var(--font-display-default);
    font-stretch: var(--font-stretch-default);
    font-style: normal;
    font-variant: var(--font-variant-default);
    font-weight: 400;
    font-weight: var(--font-weight-default);
    src: local("Heebo Black"), url("https://chrisburnell.com/fonts/heebo-black.woff2") format("woff2"), url("https://chrisburnell.com/fonts/heebo-black.woff") format("woff"), url("https://chrisburnell.com/fonts/heebo-black.ttf") format("truetype"), url("https://chrisburnell.com/fonts/heebo-black.eot?#iefix") format("embedded-opentype"), url("https://chrisburnell.com/fonts/heebo-black.svg#heebo-black") format("svg");
    unicode-range: var(--unicode-range-default);
}

@font-face {
    font-family: "Proxima Nova";
    font-display: var(--font-display-default);
    font-stretch: var(--font-stretch-default);
    font-style: normal;
    font-variant: var(--font-variant-default);
    font-weight: 400;
    font-weight: var(--font-weight-default);
    src: local("Proxima Nova Regular"), url("https://chrisburnell.com/fonts/proxima-nova-regular.woff2") format("woff2"), url("https://chrisburnell.com/fonts/proxima-nova-regular.woff") format("woff"), url("https://chrisburnell.com/fonts/proxima-nova-regular.ttf") format("truetype"), url("https://chrisburnell.com/fonts/proxima-nova-regular.eot?#iefix") format("embedded-opentype"), url("https://chrisburnell.com/fonts/proxima-nova-regular.svg#proxima-nova-regular") format("svg");
    unicode-range: var(--unicode-range-default);
}

@font-face {
    font-family: "Proxima Nova";
    font-display: var(--font-display-default);
    font-stretch: var(--font-stretch-default);
    font-style: italic;
    font-variant: var(--font-variant-default);
    font-weight: 400;
    font-weight: var(--font-weight-default);
    src: local("Proxima Nova Italic"), url("https://chrisburnell.com/fonts/proxima-nova-italic.woff2") format("woff2"), url("https://chrisburnell.com/fonts/proxima-nova-italic.woff") format("woff"), url("https://chrisburnell.com/fonts/proxima-nova-italic.ttf") format("truetype"), url("https://chrisburnell.com/fonts/proxima-nova-italic.eot?#iefix") format("embedded-opentype"), url("https://chrisburnell.com/fonts/proxima-nova-italic.svg#proxima-nova-italic") format("svg");
    unicode-range: var(--unicode-range-default);
}

@font-face {
    font-family: "Proxima Nova";
    font-display: var(--font-display-default);
    font-stretch: var(--font-stretch-default);
    font-style: normal;
    font-variant: var(--font-variant-default);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    src: local("Proxima Nova Semibold"), url("https://chrisburnell.com/fonts/proxima-nova-semibold.woff2") format("woff2"), url("https://chrisburnell.com/fonts/proxima-nova-semibold.woff") format("woff"), url("https://chrisburnell.com/fonts/proxima-nova-semibold.ttf") format("truetype"), url("https://chrisburnell.com/fonts/proxima-nova-semibold.eot?#iefix") format("embedded-opentype"), url("https://chrisburnell.com/fonts/proxima-nova-semibold.svg#proxima-nova-semibold") format("svg");
    unicode-range: var(--unicode-range-default);
}

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

a,
button,
input,
label,
select,
summary,
textarea {
    touch-action: manipulation;
}

:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        background-attachment: initial !important;
        -webkit-animation-play-state: paused !important;
        animation-play-state: paused !important;
        -webkit-transition: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

html {
    background-color: var(--color-kaiser);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-color: var(--color-raven) var(--color-white);
    font-size: var(--base-font-size);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: oldstyle-nums;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    background-color: var(--color-white);
    color: var(--color-kaiser);
    width: 100%;
    margin: 0;
    font-family: var(--font-family-default);
    font-style: normal;
    font-weight: var(--font-weight-default);
    line-height: var(--line-height-default);
}

a {
    -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, -webkit-text-decoration-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s, -webkit-text-decoration-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s, text-decoration-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s, text-decoration-color 0.2s ease 0s, -webkit-text-decoration-color 0.2s ease 0s;
    background-color: var(--color-transparent);
    color: var(--color-bowhead);
    outline: 0 var(--border-style-default) var(--color-canada);
    position: relative;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-alto);
    text-decoration-color: var(--color-alto);
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

a:hover,
a:focus,
a:active {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-canada);
    text-decoration-color: var(--color-canada);
}

a:focus-visible {
    outline-color: var(--color-raven);
    outline-width: var(--border-width-thin);
    outline-offset: var(--border-width-thin);
}

a:active {
    background-color: var(--color-canada);
    color: var(--color-white);
    outline-width: var(--border-width-thin);
    outline-offset: 0;
}

button,
.button,
[type="button"] {
    background-clip: padding-box;
    border-radius: 0.25rem;
    font-family: var(--font-family-default);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
    -webkit-transition: background-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s;
    background-color: var(--color-bowhead);
    color: var(--color-white);
    min-width: 8em;
    display: inline-block;
    padding: 0.5em var(--measure-small);
    border-width: 0;
    box-shadow: inset 0 calc(var(--border-width-button) * -1) 0 0 var(--color-black--gamma);
    outline: 0 var(--border-style-default) var(--color-raven);
    overflow: visible;
    position: relative;
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-medium);
    text-align: center;
    text-decoration: none;
    text-shadow: 0 var(--border-width-hairline) var(--border-width-hairline) var(--color-black--gamma);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button:hover,
button:focus,
button:active,
.button:hover,
.button:focus,
.button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active {
    background-color: var(--color-raven);
    text-decoration: none;
}

button:focus-visible,
.button:focus-visible,
[type="button"]:focus-visible {
    outline-width: var(--border-width-thin);
    outline-offset: var(--border-width-thin);
}

button:active,
.button:active,
[type="button"]:active {
    box-shadow: none;
    outline-width: 0;
    -webkit-transform: translateY(var(--border-width-button));
    transform: translateY(var(--border-width-button));
}

button:active::before,
.button:active::before,
[type="button"]:active::before {
    content: "";
    height: var(--border-width-button);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
}

button[disabled],
.button[disabled],
[type="button"][disabled] {
    opacity: var(--opacity-beta);
    pointer-events: none;
}

button .icon,
.button .icon,
[type="button"] .icon {
    -webkit-filter: drop-shadow(0 0 var(--border-width-hairline) var(--color-black--gamma));
    filter: drop-shadow(0 0 var(--border-width-hairline) var(--color-black--gamma));
}

.button--small {
    min-width: 5em;
    padding: 0.25em 0.5em;
    font-size: var(--font-size-small);
    line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    position: relative;
    font-weight: var(--font-weight-default);
    font-variant-numeric: lining-nums;
}

h1.monospace,
h2.monospace,
h3.monospace,
h4.monospace,
h5.monospace,
h6.monospace {
    text-transform: none;
}

.alpha,
h1 {
    font-family: var(--font-family-alpha);
    font-size: var(--font-size-alpha);
    line-height: 1;
}

@media screen and (max-width: 500px) {
    .alpha,
    h1 {
        font-size: calc(var(--font-size-alpha) / 1.285);
    }
}

.beta,
h2 {
    font-size: var(--font-size-beta);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
}

.gamma,
.endnotes::before,
.footnotes::before,
h3,
.lede {
    font-size: var(--font-size-gamma);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
}

.content__body > .gamma,
.content__body > .endnotes::before,
.content__body > .footnotes::before,
.content__body > .h-feed > .gamma,
.content__body > .h-feed > .endnotes::before,
.content__body > .h-feed > .footnotes::before,
.further-reading > .gamma,
.further-reading > .endnotes::before,
.further-reading > .footnotes::before,
.widget .gamma,
.widget .endnotes::before,
.widget .footnotes::before,
.webmentions .gamma,
.webmentions .endnotes::before,
.webmentions .footnotes::before {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-uppercase);
    border-bottom-width: var(--border-width-thin);
    border-bottom-style: var(--border-style-default);
    border-bottom-color: var(--color-alto);
    width: auto;
    max-width: 100%;
    display: inline-block;
    padding-right: var(--measure-large);
}

@media screen and (max-width: 800px) {
    .content__body > .gamma,
    .content__body > .endnotes::before,
    .content__body > .footnotes::before,
    .content__body > .h-feed > .gamma,
    .content__body > .h-feed > .endnotes::before,
    .content__body > .h-feed > .footnotes::before,
    .further-reading > .gamma,
    .further-reading > .endnotes::before,
    .further-reading > .footnotes::before,
    .widget .gamma,
    .widget .endnotes::before,
    .widget .footnotes::before,
    .webmentions .gamma,
    .webmentions .endnotes::before,
    .webmentions .footnotes::before {
        align-self: flex-start;
    }
}

.delta,
h4,
.webmentions__form p,
.webmentions__label {
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
}

.epsilon,
h5 {
    font-size: var(--font-size-default);
    line-height: var(--line-height-small);
}

.zeta,
h6 {
    font-size: var(--font-size-default);
    line-height: var(--line-height-small);
}

p {
    overflow-wrap: break-word;
    word-break: break-word;
    margin: 0;
}

p:empty {
    display: none;
    visibility: hidden;
}

@media screen and (min-width: 501px) and (max-width: 800px) {
    p.columns {
        -webkit-column-count: var(--max-columns);
        -moz-column-count: var(--max-columns);
        column-count: var(--max-columns);
        -webkit-column-gap: var(--measure-medium);
        -moz-column-gap: var(--measure-medium);
        column-gap: var(--measure-medium);
    }
}

@media screen and (min-width: 1141px) {
    p.columns {
        -webkit-column-count: var(--max-columns);
        -moz-column-count: var(--max-columns);
        column-count: var(--max-columns);
        -webkit-column-gap: var(--measure-medium);
        -moz-column-gap: var(--measure-medium);
        column-gap: var(--measure-medium);
    }
}

ol,
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

ol:not([class]) ol:not([class]),
ul:not([class]) ol:not([class]),
dl:not([class]) ol:not([class]),
.default-list ol:not([class]),
ol:not([class]) ul:not([class]),
ul:not([class]) ul:not([class]),
dl:not([class]) ul:not([class]),
.default-list ul:not([class]),
ol:not([class]) dl:not([class]),
ul:not([class]) dl:not([class]),
dl:not([class]) dl:not([class]),
.default-list dl:not([class]),
ol:not([class]) .default-list,
ul:not([class]) .default-list,
dl:not([class]) .default-list,
.default-list .default-list {
    margin-top: var(--measure-medium);
}

ol:not([class]) li,
ul:not([class]) li,
.default-list li {
    padding-left: var(--measure-large);
    position: relative;
}

ol:not([class]) li:not(:last-child),
ul:not([class]) li:not(:last-child),
.default-list li:not(:last-child) {
    margin-bottom: var(--measure-small);
}

ol:not([class]) li::before,
ul:not([class]) li::before,
.default-list li::before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: var(--font-weight-bold);
}

ol:not([class]):not([class*="continued-list"]) > li:first-child,
ol.default-list:not([class*="continued-list"]) > li:first-child {
    counter-reset: ordered-list;
}

ol:not([class])[start="1"],
ol.default-list[start="1"] {
    counter-increment: ordered-list 0 !important;
}

ol:not([class])[start="2"],
ol.default-list[start="2"] {
    counter-increment: ordered-list 1 !important;
}

ol:not([class])[start="3"],
ol.default-list[start="3"] {
    counter-increment: ordered-list 2 !important;
}

ol:not([class])[start="4"],
ol.default-list[start="4"] {
    counter-increment: ordered-list 3 !important;
}

ol:not([class])[start="5"],
ol.default-list[start="5"] {
    counter-increment: ordered-list 4 !important;
}

ol:not([class])[start="6"],
ol.default-list[start="6"] {
    counter-increment: ordered-list 5 !important;
}

ol:not([class])[start="7"],
ol.default-list[start="7"] {
    counter-increment: ordered-list 6 !important;
}

ol:not([class])[start="8"],
ol.default-list[start="8"] {
    counter-increment: ordered-list 7 !important;
}

ol:not([class])[start="9"],
ol.default-list[start="9"] {
    counter-increment: ordered-list 8 !important;
}

ol:not([class])[start="10"],
ol.default-list[start="10"] {
    counter-increment: ordered-list 9 !important;
}

ol:not([class]) > li,
ol.default-list > li {
    counter-increment: ordered-list;
}

ol:not([class]) > li::before,
ol.default-list > li::before {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum", "tnum";
    content: counters(ordered-list, "·", decimal-leading-zero);
}

ol:not([class])[type="a"] li::before,
ol:not([class]).lower-alpha li::before,
ol.default-list[type="a"] li::before,
ol.default-list.lower-alpha li::before {
    content: counters(ordered-list, "·", lower-alpha);
}

ol:not([class])[type="A"] li::before,
ol:not([class]).upper-alpha li::before,
ol.default-list[type="A"] li::before,
ol.default-list.upper-alpha li::before {
    content: counters(ordered-list, "·", upper-alpha);
}

ol:not([class])[type="i"] li::before,
ol:not([class]).lower-roman li::before,
ol.default-list[type="i"] li::before,
ol.default-list.lower-roman li::before {
    content: counters(ordered-list, "·", lower-roman);
}

ol:not([class])[type="I"] li::before,
ol:not([class]).upper-roman li::before,
ol.default-list[type="I"] li::before,
ol.default-list.upper-roman li::before {
    content: counters(ordered-list, "·", upper-roman);
}

ol:not([class])[reversed],
ol.default-list[reversed] {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    flex-direction: column-reverse;
}

ol:not([class])[reversed] > li:first-child,
ol.default-list[reversed] > li:first-child {
    margin-bottom: 0;
}

ol:not([class])[reversed] > li:not(:first-child),
ol.default-list[reversed] > li:not(:first-child) {
    margin-bottom: var(--measure-small);
}

ol:not([class]) ol:not([class]) li,
ol.default-list ol:not([class]) li,
ol:not([class]) ol.default-list li,
ol.default-list ol.default-list li {
    padding-left: calc(var(--measure-large) + var(--measure-medium));
}

[counter-reset] {
    counter-reset: ordered-list;
}

ul:not([class]) li::before,
ul.default-list li::before {
    content: "•";
    font-size: 1.5rem;
    line-height: 1;
}

dl {
    display: grid;
    grid-template-columns: 100%;
    -webkit-column-gap: var(--measure-medium);
    -moz-column-gap: var(--measure-medium);
    column-gap: var(--measure-medium);
    row-gap: var(--measure-large);
    margin-top: 0;
    overflow: hidden;
}

@media screen and (min-width: 501px) {
    dl {
        grid-template-columns: minmax(-webkit-min-content, 33.33%) 1fr;
        grid-template-columns: minmax(min-content, 33.33%) 1fr;
    }
}

@media screen and (min-width: 701px) and (max-width: 800px) {
    dl {
        grid-template-columns: repeat(2, minmax(-webkit-min-content, 16.67%) 1fr);
        grid-template-columns: repeat(2, minmax(min-content, 16.67%) 1fr);
    }
}

@media screen and (min-width: 986px) {
    dl {
        grid-template-columns: repeat(2, minmax(-webkit-min-content, 16.67%) 1fr);
        grid-template-columns: repeat(2, minmax(min-content, 16.67%) 1fr);
    }
}

@media screen and (min-width: 501px) {
    dl.full {
        grid-template-columns: -webkit-max-content 1fr !important;
        grid-template-columns: max-content 1fr !important;
    }
}

dl.compact {
    row-gap: 0.5rem;
}

dt {
    font-weight: var(--font-weight-bold);
}

dt .beta,
dt h2,
dt .delta,
dt h4,
dt .webmentions__form p,
.webmentions__form dt p,
dt .webmentions__label {
    line-height: var(--line-height-default);
}

dd {
    margin: 0;
    vertical-align: top;
}

@media screen and (min-width: 801px) {
    :not([class*="full"]) > dd:only-of-type {
        grid-column: 2 / span 3;
    }
}

blockquote {
    background-clip: padding-box;
    border-radius: 0.375rem;
    hanging-punctuation: first;
    background-color: var(--color-raven--gamma);
    width: 100%;
    max-width: var(--measure-line-length-responsive);
    padding: var(--measure-medium);
    margin: 0 auto var(--measure-medium);
}

blockquote,
:lang(en) blockquote {
    quotes: "“" "”" "‘" "’";
}

:lang(de) blockquote,
:lang(pl) blockquote {
    quotes: "„" "“" "‚" "‘";
}

:lang(fr) blockquote {
    quotes: "« " " »" "‹ " " ›";
}

blockquote code,
blockquote kbd,
blockquote samp,
blockquote var,
blockquote .monospace,
blockquote cite,
blockquote strong {
    font-style: normal;
}

blockquote p {
    font-family: var(--font-family-serif);
    font-style: italic;
}

blockquote p::before {
    content: open-quote;
}

blockquote p::after {
    content: close-quote;
}

blockquote p:not(:last-of-type)::after {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
}

blockquote cite {
    color: var(--color-kaiser);
    display: block;
    margin-top: var(--measure-medium);
    text-align: right;
}

blockquote cite::before {
    content: "– ";
}

.twitter-tweet {
    margin: 0 auto var(--measure-medium) !important;
}

cite {
    font-style: normal;
}

q {
    hanging-punctuation: first;
}

q,
:lang(en) q {
    quotes: "“" "”" "‘" "’";
}

:lang(de) q,
:lang(pl) q {
    quotes: "„" "“" "‚" "‘";
}

:lang(fr) q {
    quotes: "« " " »" "‹ " " ›";
}

img,
picture,
svg {
    margin: 0 auto;
    position: relative;
}

img,
a img,
picture,
a picture,
svg,
a svg {
    width: auto;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

img[src=""] {
    display: none !important;
}

picture,
picture img,
picture svg {
    display: block;
}

svg:not(:root) {
    overflow: hidden;
}

audio,
iframe,
video {
    width: 100%;
    display: block;
    border: 0;
    overflow-x: hidden;
}

audio {
    width: 100%;
    max-width: var(--measure-breakpoint-small);
}

audio:not([controls]) {
    display: none;
    height: 0;
}

iframe {
    max-width: 100% !important;
    margin: 0;
}

figure {
    max-width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0;
}

figure:not(.highlight) {
    overflow-x: auto;
    overflow-y: hidden;
}

figure img,
figure picture,
figure svg,
figure audio,
figure canvas,
figure embed,
figure iframe,
figure object,
figure video {
    max-height: 100vh;
}

figure.full img,
figure.full picture,
figure.full svg,
figure.full audio,
figure.full canvas,
figure.full embed,
figure.full iframe,
figure.full object,
figure.full video {
    max-width: initial;
}

figure.tall img,
figure.tall picture,
figure.tall svg,
figure.tall audio,
figure.tall canvas,
figure.tall embed,
figure.tall iframe,
figure.tall object,
figure.tall video {
    max-height: initial;
}

figure img,
figure picture,
figure svg,
figure > a,
figure > a img,
figure > a picture,
figure > a svg {
    background-clip: padding-box;
    border-radius: 0.375rem;
}

figure > a {
    display: block;
    text-decoration: none;
}

figure > a figcaption {
    color: var(--color-dove);
    font-style: italic;
}

figure figcaption {
    font-family: var(--font-family-serif);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    padding-top: var(--measure-medium);
    line-height: var(--line-height-small);
}

code,
kbd,
samp,
var,
.monospace {
    font-family: var(--font-family-monospace);
    font-variant-ligatures: none;
    font-variant-numeric: proportional-nums;
}

code,
kbd,
samp {
    font-size: var(--font-size-small);
}

h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code,
blockquote > code,
details > code,
table > code,
dl > code,
ol > code,
ul > code,
figure:not([class]) > code,
p > code,
ins,
mark,
samp,
var {
    overflow-wrap: break-word;
    word-break: break-word;
}

h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code,
blockquote > code,
details > code,
table > code,
dl > code,
ol > code,
ul > code,
figure:not([class]) > code,
p > code,
del,
ins,
kbd,
mark,
samp {
    background-clip: padding-box;
    border-radius: 0.25rem;
    padding: calc(var(--measure-one-relative) / 4);
    line-height: var(--line-height-medium);
}

h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code,
blockquote > code,
details > code,
table > code,
dl > code,
ol > code,
ul > code,
figure:not([class]) > code,
p > code,
samp {
    background-color: var(--color-raven--gamma);
}

kbd {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-uppercase);
    box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-kaiser);
}

mark {
    background-color: var(--color-highlight);
    font-size: var(--font-size-default);
}

var {
    color: var(--color-raven);
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

pre {
    margin: 0 0 var(--measure-large);
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    white-space: pre-wrap;
}

figure pre {
    width: auto;
    min-width: 10vw;
    margin-bottom: 0;
}

figure pre:not(.codepen) {
    background-clip: padding-box;
    border-radius: 0.375rem;
    font-family: var(--font-family-monospace);
    font-variant-ligatures: none;
    background-color: var(--color-mineshaft);
    color: var(--color-white);
    padding: var(--measure-medium) var(--measure-medium) var(--measure-one);
    overflow-x: auto;
    overflow-y: hidden;
    font-size: var(--font-size-small);
}

figure pre:not(.codepen),
figure pre:not(.codepen) code {
    line-height: var(--line-height-code);
}

figure pre:not(.codepen) code {
    min-width: 100%;
    display: block;
    text-shadow: 0 var(--border-width-hairline) var(--border-width-hairline) var(--color-black--delta);
}

.highlight {
    position: relative;
}

.highlight pre {
    width: 100%;
}

.highlight .c {
    color: var(--color-highlight-alpha);
}

.highlight .err {
    color: var(--color-highlight-beta);
}

.highlight .g {
    color: var(--color-highlight-beta);
}

.highlight .k {
    color: var(--color-highlight-gamma);
}

.highlight .l {
    color: var(--color-highlight-beta);
}

.highlight .n {
    color: var(--color-highlight-beta);
}

.highlight .o {
    color: var(--color-highlight-gamma);
}

.highlight .x {
    color: var(--color-highlight-delta);
}

.highlight .p {
    color: var(--color-highlight-beta);
}

.highlight .cm {
    color: var(--color-highlight-alpha);
}

.highlight .cp {
    color: var(--color-highlight-gamma);
}

.highlight .c1 {
    color: var(--color-highlight-alpha);
}

.highlight .cs {
    color: var(--color-highlight-gamma);
}

.highlight .gd {
    color: var(--color-highlight-epsilon);
}

.highlight .ge {
    color: var(--color-highlight-beta);
    font-style: italic;
}

.highlight .gr {
    color: var(--color-highlight-zeta);
}

.highlight .gh {
    color: var(--color-highlight-delta);
}

.highlight .gi {
    color: var(--color-highlight-gamma);
}

.highlight .go {
    color: var(--color-highlight-beta);
}

.highlight .gp {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
    color: var(--color-highlight-beta);
}

.highlight .gs {
    color: var(--color-highlight-beta);
    font-weight: var(--font-weight-bold);
}

.highlight .gu {
    color: var(--color-highlight-delta);
}

.highlight .gt {
    color: var(--color-highlight-beta);
}

.highlight .kc {
    color: var(--color-highlight-delta);
}

.highlight .kd {
    color: var(--color-highlight-eta);
}

.highlight .kn {
    color: var(--color-highlight-gamma);
}

.highlight .kp {
    color: var(--color-highlight-gamma);
}

.highlight .kr {
    color: var(--color-highlight-eta);
}

.highlight .kt {
    color: var(--color-highlight-zeta);
}

.highlight .ld {
    color: var(--color-highlight-beta);
}

.highlight .m {
    color: var(--color-highlight-epsilon);
}

.highlight .s {
    color: var(--color-highlight-epsilon);
}

.highlight .na {
    color: var(--color-highlight-beta);
}

.highlight .nb {
    color: var(--color-highlight-theta);
}

.highlight .nc {
    color: var(--color-highlight-eta);
}

.highlight .no {
    color: var(--color-highlight-delta);
}

.highlight .nd {
    color: var(--color-highlight-eta);
}

.highlight .ni {
    color: var(--color-highlight-delta);
}

.highlight .ne {
    color: var(--color-highlight-delta);
}

.highlight .nf {
    color: var(--color-highlight-eta);
}

.highlight .nl {
    color: var(--color-highlight-beta);
}

.highlight .nn {
    color: var(--color-highlight-beta);
}

.highlight .nx {
    color: var(--color-highlight-beta);
}

.highlight .py {
    color: var(--color-highlight-beta);
}

.highlight .nt {
    color: var(--color-highlight-eta);
}

.highlight .nv {
    color: var(--color-highlight-eta);
}

.highlight .ow {
    color: var(--color-highlight-gamma);
}

.highlight .w {
    color: var(--color-highlight-beta);
}

.highlight .mf {
    color: var(--color-highlight-epsilon);
}

.highlight .mh {
    color: var(--color-highlight-epsilon);
}

.highlight .mi {
    color: var(--color-highlight-epsilon);
}

.highlight .mo {
    color: var(--color-highlight-epsilon);
}

.highlight .sb {
    color: var(--color-highlight-alpha);
}

.highlight .sc {
    color: var(--color-highlight-epsilon);
}

.highlight .sd {
    color: var(--color-highlight-beta);
}

.highlight .s2 {
    color: var(--color-highlight-epsilon);
}

.highlight .se {
    color: var(--color-highlight-delta);
}

.highlight .sh {
    color: var(--color-highlight-beta);
}

.highlight .si {
    color: var(--color-highlight-epsilon);
}

.highlight .sx {
    color: var(--color-highlight-epsilon);
}

.highlight .sr {
    color: var(--color-highlight-zeta);
}

.highlight .s1 {
    color: var(--color-highlight-epsilon);
}

.highlight .ss {
    color: var(--color-highlight-epsilon);
}

.highlight .bp {
    color: var(--color-highlight-eta);
}

.highlight .vc {
    color: var(--color-highlight-eta);
}

.highlight .vg {
    color: var(--color-highlight-eta);
}

.highlight .vi {
    color: var(--color-highlight-eta);
}

.highlight .il {
    color: var(--color-highlight-epsilon);
}

form {
    width: 100%;
    display: grid;
    grid-gap: var(--measure-small);
    grid-template-columns: 65% 1fr;
    position: relative;
}

form:not([class]) > * + * {
    margin-top: var(--measure-large);
}

@media screen and (max-width: 500px) {
    form:not([class]) {
        grid-template-columns: 1fr;
    }
}

input[type="checkbox"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="file"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="week"],
input[type="url"],
optgroup,
select,
textarea {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-default);
}

input,
textarea,
[contenteditable] {
    caret-color: var(--color-raven);
}

input,
textarea {
    background-clip: padding-box;
    border-radius: 0.25rem;
    -webkit-transition: border-color 0.2s ease 0s;
    transition: border-color 0.2s ease 0s;
    background-color: var(--color-white);
    color: var(--color-black);
    box-sizing: inherit !important;
    padding: 0 0.4em;
    border-width: var(--border-width-thin);
    border-style: var(--border-style-default);
    border-color: var(--color-alto);
    outline-width: 0;
}

input:hover,
textarea:hover {
    border-color: var(--color-coyote);
}

input:focus,
textarea:focus {
    border-color: var(--color-raven);
}

input[disabled],
textarea[disabled] {
    opacity: var(--opacity-beta);
    pointer-events: none;
}

input::-moz-focus-inner,
textarea::-moz-focus-inner {
    padding: 0;
    margin: 0;
}

input {
    overflow: visible;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"],
input[type="url"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="url"]::-webkit-search-cancel-button,
input[type="url"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input::-webkit-file-upload-button {
    -webkit-appearance: button;
}

input::-webkit-inner-spin-button {
    opacity: 1;
}

textarea {
    overflow: auto;
}

.code-toggle input[type="checkbox"] {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
}

input[type="checkbox"] + label {
    background-clip: padding-box;
    border-radius: 0.375rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
    -webkit-transition: all var(--transition-duration-default) var(--transition-function-default);
    transition: all var(--transition-duration-default) var(--transition-function-default);
    background-color: var(--color-kaiser);
    color: var(--color-white);
    display: inline-block;
    padding: 0 var(--measure-medium);
    position: relative;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    line-height: calc(var(--line-height-code) * 1.25);
}

input[type="checkbox"] + label::after {
    content: "✔";
    background-color: var(--color-black--gamma);
    width: var(--measure-large);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    font-size: var(--font-size-beta);
    line-height: 1;
    border-radius: var(--border-radius-default) 0 0 var(--border-radius-default);
}

input[type="checkbox"]:checked + label {
    background-color: var(--color-liquid);
    padding-left: calc(var(--measure-large) + var(--measure-small));
    padding-right: calc(var(--measure-medium) - var(--measure-small));
}

input[type="checkbox"]:checked + label::after {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

table {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum", "tnum";
    -webkit-box-flex: 1;
    flex: 1 0 auto;
    align-self: flex-start;
    border-width: 0;
    border-collapse: collapse;
    overflow-x: auto;
    overflow-y: hidden;
    font-variant-numeric: lining-nums tabular-nums;
}

table.zebra tbody tr:nth-child(even) td {
    background-color: var(--color-black--delta);
}

th,
td {
    -webkit-transition: background-color 0.2s ease 0s;
    transition: background-color 0.2s ease 0s;
    padding: var(--measure-small);
    text-align: left;
    vertical-align: top;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

th.numeral,
td.numeral {
    text-align: right;
}

th {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

th:not(:empty) {
    background-color: var(--color-black--delta);
}

tbody th {
    width: 1px;
}

td.numeral {
    white-space: nowrap;
}

details {
    background-clip: padding-box;
    border-radius: 0.25rem;
    width: 100%;
    max-width: var(--measure-line-length-responsive);
    position: relative;
}

details blockquote,
details details,
details table,
details dl,
details ol,
details ul,
details figure:not([class]),
details p {
    padding: 0 var(--measure-small) var(--measure-small);
}

details > div {
    background-color: var(--color-alto);
    max-height: 0;
    padding-top: var(--measure-small);
    position: absolute;
    top: 100%;
    left: 0;
    font-size: var(--font-size-small);
    -webkit-transition: max-height 0.2s ease 0s;
    transition: max-height 0.2s ease 0s;
    z-index: var(--z-index-above);
}

details[open] > div {
    max-height: 9999vh;
}

summary {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
    -webkit-transition: padding 0.2s ease 0s;
    transition: padding 0.2s ease 0s;
    display: list-item;
    outline-width: 0;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

summary + blockquote,
summary + details,
summary + table,
summary + dl,
summary + ol,
summary + ul,
summary + figure:not([class]),
summary + p {
    margin-top: var(--measure-small);
    border-top-width: var(--border-width-thin);
    border-top-style: var(--border-style-default);
    border-top-color: var(--color-raven);
    padding-top: var(--measure-medium);
}

hr {
    background-color: var(--color-black--gamma);
    width: 100%;
    height: var(--border-width-thin);
    display: block;
    margin: var(--measure-large) 0;
    border: 0;
    position: relative;
    overflow: visible;
}

@media screen and (max-width: 800px) {
    blockquote + hr,
    details + hr,
    table + hr,
    dl + hr,
    ol + hr,
    ul + hr,
    figure:not([class]) + hr,
    p + hr {
        margin-top: var(--measure-medium);
    }
}

abbr[title],
dfn[title] {
    color: var(--color-dove);
    font-style: italic;
    font-weight: var(--font-weight-default) !important;
}

abbr[title],
dfn[title] {
    border-bottom-width: var(--border-width-hairline);
    border-bottom-style: var(--border-style-alternate);
    border-bottom-color: var(--color-dove);
    cursor: help;
}

a abbr[title],
a dfn[title] {
    border-bottom-width: 0;
}

abbr[title],
dfn[title],
ins {
    text-decoration: none;
}

ins {
    background-color: var(--color-liquid-white);
    color: #4f4f4f;
    font-size: var(--font-size-default);
}

del {
    color: var(--color-canada);
}

s {
    color: var(--color-dove);
}

small,
.small {
    font-size: var(--font-size-small);
}

strong,
.strong {
    font-weight: var(--font-weight-bold);
}

sub,
sup {
    position: relative;
    vertical-align: baseline;
    font-size: 1em;
    line-height: 0;
    text-transform: initial;
}

sub {
    bottom: 0;
    font-variant-position: sub;
}

sup {
    top: 0;
    font-variant-position: super;
}

em {
    font-weight: var(--font-weight-default) !important;
}

em.small {
    font-variant: small-caps;
    text-transform: lowercase;
}

time {
    display: inline-block;
}

.acronym {
    text-transform: uppercase;
}

::-moz-selection {
    background-color: var(--color-raven);
    color: var(--color-white);
}

::selection {
    background-color: var(--color-raven);
    color: var(--color-white);
}

.canada::-moz-selection {
    background-color: var(--color-canada);
}

.canada::selection {
    background-color: var(--color-canada);
}

.full-bleed {
    width: 100vw;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.break-anywhere {
    word-wrap: anywhere;
}

.wrap {
    width: auto;
    max-width: var(--measure-breakpoint-large);
    padding-left: var(--measure-gutter);
    padding-right: var(--measure-gutter);
    margin-left: auto;
    margin-right: auto;
}

.wrap--full {
    max-width: 100%;
}

main {
    display: block;
    padding-bottom: var(--measure-large);
}

main > * + * {
    margin-top: var(--measure-large);
}

@media screen and (min-width: 801px) {
    main:not(.stretch) {
        display: grid;
        grid-template-columns: var(--measure-aside) minmax(1px, 1fr);
        grid-template-areas: "author content";
        -webkit-column-gap: var(--measure-gap);
        -moz-column-gap: var(--measure-gap);
        column-gap: var(--measure-gap);
    }
}

header {
    display: grid;
    overflow: hidden;
    position: relative;
}

@media screen and (max-width: 800px) {
    header {
        grid-template-rows: 7rem -webkit-min-content;
        grid-template-rows: 7rem min-content;
        -webkit-box-pack: center;
        justify-content: center;
    }
}

@media screen and (min-width: 801px) {
    header {
        grid-template-columns: var(--measure-aside) -webkit-min-content;
        grid-template-columns: var(--measure-aside) min-content;
        -webkit-box-pack: justify;
        justify-content: space-between;
    }
}

header::before {
    content: "";
    background-color: var(--color-raven);
    height: var(--border-width-default);
    position: absolute;
    bottom: 0;
    left: var(--measure-gutter);
    right: var(--measure-gutter);
}

.content {
    padding-top: var(--measure-large);
}

.content > * + * {
    margin-top: var(--measure-large);
}

@media screen and (max-width: 800px) {
    .content {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

@media screen and (min-width: 801px) {
    :not(.stretch) > .content {
        max-width: var(--measure-content);
        grid-area: content;
    }
}

.stretch > .content {
    max-width: var(--measure-breakpoint-medium);
    margin: 0 auto;
}

.content__body > * + * {
    margin-top: var(--measure-gigantic);
}

aside {
    margin-top: var(--measure-large);
    position: relative;
}

aside > * + * {
    margin-top: var(--measure-large);
}

@media screen and (max-width: 800px) {
    aside {
        -webkit-box-flex: 1;
        flex: 1 0 100%;
    }
}

@media screen and (min-width: 801px) {
    aside {
        width: var(--measure-aside);
        float: left;
        margin-left: calc((var(--measure-aside) + var(--measure-large)) * -1);
        margin-bottom: var(--measure-large);
    }
}

aside:not([class]) {
    background-clip: padding-box;
    border-radius: 0.375rem;
    font-family: var(--font-family-serif);
    background-color: var(--color-black--delta);
    padding: var(--measure-medium);
    z-index: var(--z-index-above);
}

@media screen and (max-width: 800px) {
    aside:not(.author):not(:last-child) {
        margin-bottom: var(--measure-medium);
    }
}

.gamma + aside,
.endnotes::before + aside,
.footnotes::before + aside,
h3 + aside,
.lede + aside {
    margin-top: var(--measure-large);
}

@media screen and (min-width: 501px) {
    aside figcaption,
    aside p {
        font-size: var(--font-size-small);
    }
}

footer {
    width: 100%;
    padding: var(--measure-large) 0;
    border-top-width: var(--border-width-default);
    border-top-style: var(--border-style-default);
    border-top-color: var(--color-raven);
}

footer .wrap {
    display: grid;
    grid-gap: var(--measure-medium);
    -webkit-box-align: center;
    align-items: center;
}

@media screen and (max-width: 800px) {
    footer .wrap {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 801px) {
    footer .wrap {
        grid-template-columns: auto 1fr auto;
    }
}

[hidden]:not([hidden="false"]):not([href]),
[hidden]:not([hidden="false"])[href]:not(:focus):not(:active),
.hidden:not([href]),
.hidden[href]:not(:focus):not(:active) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
}

.hyphen,
.hyphenate {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}

.non-selectable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
}

.non-interactive {
    pointer-events: none;
    cursor: not-allowed;
}

.non-motion {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
    -webkit-transition: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

.leading-small {
    line-height: var(--line-height-small);
}

.no-js .requires-js {
    display: none;
}

.logo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
    height: var(--measure-avatar);
    -webkit-box-flex: 1;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: var(--measure-aside);
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.logo .icon {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    fill: var(--color-raven);
    width: var(--measure-logo);
    height: var(--measure-logo);
}

@media (any-pointer: coarse) {
    .logo .icon {
        -webkit-transform: translateX(-50%) translateY(-30%);
        transform: translateX(-50%) translateY(-30%);
    }
}

@media (any-pointer: fine) {
    .logo .icon {
        -webkit-transition: -webkit-transform var(--transition-duration-long) ease 0s;
        transition: -webkit-transform var(--transition-duration-long) ease 0s;
        transition: transform var(--transition-duration-long) ease 0s;
        transition: transform var(--transition-duration-long) ease 0s, -webkit-transform var(--transition-duration-long) ease 0s;
        -webkit-transform: translateX(-65%) translateY(-40%) rotateZ(var(--rotation-default));
        transform: translateX(-65%) translateY(-40%) rotateZ(var(--rotation-default));
    }
}

@media (any-pointer: fine) {
    .logo[href]:hover .icon,
    .logo[href]:focus .icon {
        -webkit-transform: translateX(-40%) translateY(-30%);
        transform: translateX(-40%) translateY(-30%);
    }
}

.logo[href]:active {
    background-color: var(--color-transparent);
    outline-width: 0;
}

@media (any-pointer: fine) {
    .logo[href]:active .icon {
        -webkit-transition-duration: var(--transition-duration-default);
        transition-duration: var(--transition-duration-default);
        -webkit-transform: translateX(-30%) translateY(-25%);
        transform: translateX(-30%) translateY(-25%);
    }
}

.nav-primary {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-top: var(--measure-medium);
    padding-bottom: var(--measure-medium);
    white-space: nowrap;
}

@media screen and (max-width: 800px) {
    .nav-primary {
        -webkit-box-flex: 1;
        flex: 1 0 100%;
        padding-top: var(--measure-small);
        text-align: center;
    }
}

.nav-primary-list {
    font-size: 0;
}

.nav-primary-list li {
    font-size: var(--font-size-default);
}

.nav-primary-list li {
    display: inline-block;
}

@media screen and (max-width: 500px) {
    .nav-primary-list li + li {
        margin-left: calc(var(--measure-one-relative) / 4);
    }
}

@media screen and (min-width: 501px) and (max-width: 800px) {
    .nav-primary-list li + li {
        margin-left: calc(var(--measure-one-relative) / 2);
    }
}

@media screen and (min-width: 801px) {
    .nav-primary-list li + li {
        margin-left: var(--measure-one-relative);
    }
}

.nav-primary-list a {
    -webkit-transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s;
    transition: box-shadow 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    color: var(--color-dove);
    display: block;
    padding: calc(var(--measure-one) - var(--border-width-default)) var(--measure-one);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-small);
    text-decoration: none !important;
}

.nav-primary-list a:active {
    background-color: var(--color-transparent);
    outline-width: 0;
    -webkit-transform: translateY(var(--border-width-button));
    transform: translateY(var(--border-width-button));
}

.nav-primary-list a:active::before {
    content: "";
    height: var(--border-width-button);
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
}

@media screen and (max-width: 500px) {
    .nav-primary-list a {
        padding-left: calc(var(--measure-one) / 2);
        padding-right: calc(var(--measure-one) / 2);
    }
}

.nav-primary-list a:hover,
.nav-primary-list a:focus,
.nav-primary-list a:active,
.nav-primary-list a[aria-current="page"],
.nav-primary-list a[aria-current="true"] {
    color: var(--color-kaiser);
    box-shadow: inset 0 calc(var(--border-width-button) * -1) var(--color-raven);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: var(--color-kaiser);
    -webkit-text-decoration-color: var(--color-transparent);
    text-decoration-color: var(--color-transparent);
    text-decoration-thickness: var(--border-width-thin);
    text-underline-offset: var(--border-width-default);
}

.dark-background a {
    color: var(--color-white);
    -webkit-text-decoration-color: var(--color-dove);
    text-decoration-color: var(--color-dove);
}

.dark-background a:hover,
.dark-background a:focus,
.dark-background a:active {
    -webkit-text-decoration-color: var(--color-canada);
    text-decoration-color: var(--color-canada);
}

:not(.cf-wrapper) > a span:not([class]) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(100%) !important;
    clip-path: inset(100%) !important;
}

.colourful-anchor:hover,
.colourful-anchor:focus,
.colourful-anchor:active {
    background-image: -webkit-gradient(linear, left top, right bottom, from(var(--color-raven)), to(var(--color-canada)));
    background-image: linear-gradient(to bottom right, var(--color-raven), var(--color-canada));
    -webkit-background-clip: text;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: none;
}

.title-anchor {
    display: inline-block;
}

.title-anchor,
.title-anchor:link {
    -webkit-text-decoration-color: var(--color-transparent);
    text-decoration-color: var(--color-transparent);
}

.title-anchor:hover,
.title-anchor:focus,
.title-anchor:active {
    color: var(--color-kaiser);
}

.fragment-anchor {
    text-transform: lowercase;
    font-family: var(--font-family-monospace);
    font-variant-ligatures: none;
    color: var(--color-dove);
    display: none;
    visibility: hidden;
    padding-left: var(--measure-small);
    padding-right: var(--measure-small);
    position: absolute;
    top: var(--border-width-thin);
    right: calc(var(--measure-small) * -1);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    text-shadow: none;
}

h1:hover .fragment-anchor,
h2:hover .fragment-anchor,
h3:hover .fragment-anchor,
h4:hover .fragment-anchor,
h5:hover .fragment-anchor,
h6:hover .fragment-anchor,
h1:focus .fragment-anchor,
h2:focus .fragment-anchor,
h3:focus .fragment-anchor,
h4:focus .fragment-anchor,
h5:focus .fragment-anchor,
h6:focus .fragment-anchor,
h1:active .fragment-anchor,
h2:active .fragment-anchor,
h3:active .fragment-anchor,
h4:active .fragment-anchor,
h5:active .fragment-anchor,
h6:active .fragment-anchor,
.fragment-anchor:target {
    display: inline-block;
    visibility: visible;
}

.related-anchor::after {
    content: " →";
}

h1[id]:target,
h2[id]:target,
h3[id]:target,
h4[id]:target,
h5[id]:target,
h6[id]:target,
sup[id]:target,
li[id]:target {
    -webkit-animation: anchor-target var(--animation-duration) var(--animation-function);
    animation: anchor-target var(--animation-duration) var(--animation-function);
}

@-webkit-keyframes anchor-target {
    0%,
    50% {
        background-color: var(--color-highlight);
    }
    100% {
        background-color: var(--color-transparent);
    }
}

@keyframes anchor-target {
    0%,
    50% {
        background-color: var(--color-highlight);
    }
    100% {
        background-color: var(--color-transparent);
    }
}

.title,
.tagline {
    width: 100%;
}

.title {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.title--success,
.title--error {
    width: auto;
    align-self: flex-start;
    display: inline-block;
    padding: var(--measure-small);
}

.title--success {
    background-color: var(--color-liquid);
    color: var(--color-white);
}

.title--error {
    background-color: var(--color-canada);
    color: var(--color-white);
}

.meta {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: baseline;
    align-items: baseline;
    overflow: hidden;
    font-family: var(--font-family-serif);
    font-style: italic;
    line-height: 3;
}

aside + .meta {
    margin-top: calc(var(--measure-small) * -1);
}

.meta div {
    margin-right: var(--measure-large);
}

.meta div + div {
    position: relative;
}

.meta div + div::before {
    content: "•";
    color: var(--color-dove);
    position: absolute;
    left: calc(var(--measure-medium) * -1);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-style: normal;
}

.meta a,
.meta data,
.meta strong,
.meta .strong,
.meta time {
    color: inherit;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-default);
    font-style: normal;
}

.meta a {
    -webkit-text-decoration-color: var(--color-transparent);
    text-decoration-color: var(--color-transparent);
}

.meta a:hover,
.meta a:focus,
.meta a:active {
    -webkit-text-decoration-color: var(--color-canada);
    text-decoration-color: var(--color-canada);
}

.meta a:active {
    color: var(--color-white);
}

.meta a em {
    font-family: var(--font-family-serif);
}

.meta label {
    display: none;
    background-color: var(--color-black--delta);
    padding: 0.1rem var(--measure-small);
    background-clip: padding-box;
    border-radius: 0.25rem;
    cursor: pointer;
}

.meta label:hover,
.meta label:focus,
.meta label:active {
    background-color: var(--color-raven--gamma);
}

.meta label:active {
    color: var(--color-canada);
}

.meta div + div ~ label {
    display: inline-block;
}

.meta .emoji {
    margin-right: 1ch;
}

.banner {
    background-clip: padding-box;
    border-radius: 0.375rem;
    width: var(--measure-content);
    max-height: 100vh;
}

@media screen and (max-width: 500px) {
    .banner {
        width: var(--measure-breakpoint-small);
    }
}

.banner--cover {
    width: auto;
    max-width: var(--measure-line-length-minimum);
}

@media screen and (max-width: 800px) {
    .lede {
        text-align: left;
    }
}

.lede--featured {
    max-width: var(--measure-line-length-responsive) !important;
    font-size: var(--font-size-large);
}

.edit {
    background-clip: padding-box;
    border-radius: 0.375rem;
    background-color: var(--color-raven--gamma);
    width: 100%;
    max-width: var(--measure-line-length-responsive);
    padding: var(--measure-medium);
    margin-left: auto;
    margin-right: auto;
    line-height: var(--line-height-medium);
}

.edit time {
    margin-bottom: var(--measure-small);
    font-size: var(--font-size-gamma);
    font-weight: var(--font-weight-bold);
}

.h-feed > * + * {
    margin-top: var(--measure-large);
}

.badges {
    display: block;
}

.rating {
    display: inline-block;
    position: relative;
    font-size: var(--font-size-large);
    line-height: 1;
}

.rating::before,
.rating::after {
    content: "★★★★★";
    speak: none;
}

.rating::before {
    color: var(--color-alto);
}

.rating::after {
    background-color: inherit;
    color: var(--color-kaiser);
    width: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.rating:not([value]) {
    display: none;
}

.rating[value="0.25"]::after {
    width: 5%;
}

.rating[value="0.5"]::after {
    width: 10%;
}

.rating[value="0.75"]::after {
    width: 15%;
}

.rating[value="1"]::after {
    width: 20%;
}

.rating[value="1.25"]::after {
    width: 25%;
}

.rating[value="1.5"]::after {
    width: 30%;
}

.rating[value="1.75"]::after {
    width: 35%;
}

.rating[value="2"]::after {
    width: 40%;
}

.rating[value="2.25"]::after {
    width: 45%;
}

.rating[value="2.5"]::after {
    width: 50%;
}

.rating[value="2.75"]::after {
    width: 55%;
}

.rating[value="3"]::after {
    width: 60%;
}

.rating[value="3.25"]::after {
    width: 65%;
}

.rating[value="3.5"]::after {
    width: 70%;
}

.rating[value="3.75"]::after {
    width: 75%;
}

.rating[value="4"]::after {
    width: 80%;
}

.rating[value="4.25"]::after {
    width: 85%;
}

.rating[value="4.5"]::after {
    width: 90%;
}

.rating[value="4.75"]::after {
    width: 95%;
}

.rating[value="5"]::after {
    width: 100%;
}

.further-reading > * + * {
    margin-top: var(--measure-large);
}

.deck {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--measure-medium);
    line-height: var(--line-height-small);
}

@media screen and (min-width: 501px) {
    .deck {
        grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    }
}

.deck li,
.deck article {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.deck article,
.deck a {
    -webkit-box-flex: 1;
    flex: 1 0 100%;
}

.deck a {
    background-clip: padding-box;
    border-radius: 0.375rem;
    display: block;
    padding: var(--measure-medium);
    overflow: hidden;
    text-decoration: none;
}

.deck a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    opacity: 0;
    background-position: center;
    background-size: cover;
}

.deck a:hover,
.deck a:focus,
.deck a:active {
    background-color: var(--color-raven--gamma) !important;
}

.deck a:hover::before,
.deck a:focus::before,
.deck a:active::before {
    background-image: var(--cover);
    opacity: var(--opacity-gamma);
}

.deck a:active {
    outline-width: 0;
}

aside .deck a {
    padding: var(--measure-small);
}

.deck .title,
.deck .lede,
.deck .date {
    text-shadow: 0 var(--border-width-hairline) 0 var(--color-white);
}

.deck .title {
    width: auto;
    display: inline-block;
    margin-bottom: var(--measure-small);
}

.deck a:link .title {
    -webkit-transition: -webkit-text-decoration-color 0.2s ease 0s;
    transition: -webkit-text-decoration-color 0.2s ease 0s;
    transition: text-decoration-color 0.2s ease 0s;
    transition: text-decoration-color 0.2s ease 0s, -webkit-text-decoration-color 0.2s ease 0s;
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-alto);
    text-decoration-color: var(--color-alto);
    text-decoration-thickness: var(--border-width-thin);
    text-underline-offset: var(--border-width-default);
}

.deck a:hover .title,
.deck a:focus .title,
.deck a:active .title {
    color: var(--color-raven);
    -webkit-text-decoration-color: var(--color-canada);
    text-decoration-color: var(--color-canada);
}

.deck [rel*="external"] h1::after,
.deck [rel*="external"] h2::after,
.deck [rel*="external"] h3::after,
.deck [rel*="external"] h4::after,
.deck [rel*="external"] h5::after,
.deck [rel*="external"] h6::after {
    content: " ↗";
}

.deck .lede,
.deck .date {
    width: 100%;
    color: var(--color-dove);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
}

.deck .lede {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
    margin-bottom: 0;
    overflow: hidden;
    line-clamp: 3;
    text-overflow: ellipsis;
}

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

.deck .date::before {
    content: "– ";
}

.deck dl + .date {
    margin-top: var(--measure-small);
}

.deck .emoji {
    margin-right: var(--measure-small);
}

.deck .badges {
    font-size: var(--font-size-small);
}

.deck .checkin {
    display: block;
}

.deck .rating {
    margin-top: var(--measure-small);
}

.shelf {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--measure-medium);
}

@media screen and (min-width: 501px) {
    .shelf {
        grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    }
}

.shelf li {
    margin: 0;
}

.shelf .cover {
    display: inline-block;
    margin: 0 0 var(--measure-small);
    text-decoration: none;
}

.shelf .cover[href]:hover,
.shelf .cover[href]:focus,
.shelf .cover[href]:active {
    background-color: var(--color-transparent);
    outline: var(--border-width-thin) var(--border-style-default) var(--color-raven);
    outline-offset: var(--border-width-thin);
}

.shelf img,
.shelf picture,
.shelf svg {
    max-width: 100%;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0;
}

.page--books .shelf img,
.page--books .shelf picture,
.page--books .shelf svg {
    height: var(--measure-aside);
}

.shelf .emoji {
    margin-right: var(--measure-small);
}

.shelf .badges {
    font-size: var(--font-size-small);
}

.shelf .checkin {
    display: block;
}

.search-main {
    max-width: var(--measure-breakpoint-small);
}

.search-submit {
    min-width: 5em;
}

.buttons-list {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(12em, -webkit-max-content);
    grid-template-columns: minmax(12em, max-content);
    grid-gap: var(--measure-medium);
    -webkit-box-pack: center;
    justify-content: center;
}

@media screen and (min-width: 501px) {
    .buttons-list {
        grid-template-columns: repeat(auto-fit, minmax(12em, -webkit-max-content));
        grid-template-columns: repeat(auto-fit, minmax(12em, max-content));
    }
}

.author {
    font-family: var(--font-family-default);
}

@media screen and (max-width: 800px) {
    .author {
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-ordinal-group: 10000;
        order: 9999;
        margin-top: var(--measure-large);
    }
}

@media screen and (min-width: 801px) {
    .author {
        float: none;
        margin-left: 0;
    }
}

@media screen and (min-width: 801px) {
    :not(.stretch) > .author {
        float: none;
        grid-area: author;
        margin-top: calc(var(--measure-large) * 2 + var(--font-size-alpha));
        margin-left: 0;
    }
}

@media screen and (min-width: 801px) {
    .stretch > .author {
        width: 100%;
        max-width: var(--measure-breakpoint-medium);
        float: none;
        margin: var(--measure-large) auto 0;
    }
}

.author-information {
    font-family: var(--font-family-serif);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    font-size: var(--font-size-small);
    font-style: italic;
    line-height: var(--line-height-medium);
}

@media screen and (max-width: 800px) {
    .author-information {
        padding-top: var(--measure-large);
        border-top-width: var(--border-width-thin);
        border-top-style: var(--border-style-default);
        border-top-color: var(--color-black--gamma);
    }
}

.author-information a,
.author-information strong,
.author-information .strong {
    text-transform: uppercase;
    letter-spacing: 0;
    font-family: var(--font-family-default);
    color: inherit;
    font-style: normal;
    font-weight: var(--font-weight-bold);
}

.author-information a {
    -webkit-text-decoration-color: var(--color-transparent);
    text-decoration-color: var(--color-transparent);
}

.author-information a:hover,
.author-information a:focus,
.author-information a:active {
    -webkit-text-decoration-color: var(--color-canada);
    text-decoration-color: var(--color-canada);
}

.author-information a:active {
    color: var(--color-white);
}

.author-image {
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: var(--measure-avatar);
    float: left;
    position: relative;
    box-shadow: inset 0 var(--border-width-default) 0 0 var(--color-black--gamma);
    text-decoration: none;
}

.author-image,
.author-image::before,
.author-image img,
.author-image picture,
.author-image svg {
    background-clip: padding-box;
    border-radius: 50%;
    width: var(--measure-avatar);
    height: var(--measure-avatar);
}

@supports (shape-outside: circle(50%)) {
    .author-image,
    .author-image::before,
    .author-image img,
    .author-image picture,
    .author-image svg {
        shape-outside: circle(50%);
    }
}

.author-image::before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48ZmlsdGVyIGlkPSJiIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIxMiIgLz48L2ZpbHRlcj48cGF0aCBmaWxsPSIjZDBjZGNjIiBkPSJNMCAwaDQwMHY0MDBIMHoiLz48ZyBmaWx0ZXI9InVybCgjYikiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC44IC44KSBzY2FsZSgxLjU2MjUpIiBmaWxsLW9wYWNpdHk9Ii41Ij48ZWxsaXBzZSBmaWxsPSIjN2EzYzAxIiBjeD0iMTMwIiBjeT0iODEiIHJ4PSI1NCIgcnk9IjQzIi8+PGVsbGlwc2UgZmlsbD0iIzM5NWY5NyIgcng9IjEiIHJ5PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMTIxLjUyNDc2IDYuNjM4NDggLTMuNTY2MzEgLTY1LjI4NTMyIDEyNy44IDI0OS4zKSIvPjxlbGxpcHNlIGZpbGw9IiNmZWIzN2MiIGN4PSIxMjgiIGN5PSIxNDMiIHJ4PSI0NSIgcnk9IjgxIi8+PGVsbGlwc2UgZmlsbD0iI2ZmZiIgcng9IjEiIHJ5PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtNDkuMzk3MDUgMi41ODg3OSAtOC4yODAwNSAtMTU3Ljk5MjczIDIyNi41IDU2LjUpIi8+PGVsbGlwc2UgZmlsbD0iI2ZmZiIgY3g9IjI1IiBjeT0iODciIHJ4PSI1MyIgcnk9IjEzMCIvPjxlbGxpcHNlIGZpbGw9IiNmZmYiIGN4PSIxMDkiIGN5PSIxNiIgcng9IjI1NSIgcnk9IjI0Ii8+PHBhdGggZmlsbD0iIzE0MDkwMCIgZD0iTTEwOCA0Mmw3NSA1MS0yNy00OXoiLz48ZWxsaXBzZSBmaWxsPSIjYmY3NzQ4IiByeD0iMSIgcnk9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDI3LjQwNjE1IC00LjU2OTI4IDYuMTY1NTYgMzYuOTgwNTUgMTMyLjMgMTcyLjIpIi8+PC9nPjwvc3ZnPg==");
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 800px) {
    .author-image {
        margin-right: var(--measure-medium);
    }
}

@media screen and (min-width: 801px) {
    .author-image {
        margin-right: var(--measure-small);
    }
}

.author-image img,
.author-image picture,
.author-image svg {
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    display: block;
}

.author-image:hover::before,
.author-image:focus::before,
.author-image:active::before {
    z-index: var(--z-index-default);
}

.author-image:hover img,
.author-image:hover picture,
.author-image:hover svg,
.author-image:focus img,
.author-image:focus picture,
.author-image:focus svg,
.author-image:active img,
.author-image:active picture,
.author-image:active svg {
    -webkit-animation: peek var(--transition-duration-long) var(--transition-function-default) var(--transition-duration-long) var(--animation-fill-mode);
    animation: peek var(--transition-duration-long) var(--transition-function-default) var(--transition-duration-long) var(--animation-fill-mode);
}

@-webkit-keyframes peek {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    50% {
        -webkit-transform: translateY(-60%);
        transform: translateY(-60%);
    }
    75% {
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
    }
    100% {
        -webkit-transform: rotateZ(calc(var(--rotation-default) * 2 * -1)) translateY(-60%);
        transform: rotateZ(calc(var(--rotation-default) * 2 * -1)) translateY(-60%);
    }
}

@keyframes peek {
    0% {
        -webkit-transform: none;
        transform: none;
    }
    50% {
        -webkit-transform: translateY(-60%);
        transform: translateY(-60%);
    }
    75% {
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
    }
    100% {
        -webkit-transform: rotateZ(calc(var(--rotation-default) * 2 * -1)) translateY(-60%);
        transform: rotateZ(calc(var(--rotation-default) * 2 * -1)) translateY(-60%);
    }
}

.author-image:active {
    outline-width: 0;
}

.author-name {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
}

.webring-links p {
    font-size: var(--font-size-default);
}

.webring-links .webring-links__previous,
.webring-links .webring-links__home {
    margin-right: 0;
}

.webring-links .webring-links__next,
.webring-links .webring-links__home {
    margin-left: 0;
}

.widget {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.widget > * + * {
    margin-top: var(--measure-large);
}

.widget--browse-posts,
.widget--pagination {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.widget-related-anchor,
.widget-previous-anchor,
.widget-next-anchor {
    margin-top: var(--measure-medium);
    font-weight: var(--font-weight-bold);
}

.widget-related-anchor {
    align-self: flex-end;
}

.widget-related-anchor::after {
    content: " ↩︎";
}

.widget-previous-anchor,
.widget-next-anchor {
    max-width: calc(50% - (var(--measure-gutter) / 2));
    -webkit-box-flex: 0;
    flex: 0 1 auto;
}

.widget-previous-anchor::before,
.widget-next-anchor::before {
    display: block;
}

.widget--browse-posts .widget-previous-anchor::before {
    content: "← Older";
}

.widget-next-anchor {
    text-align: right;
    margin-left: auto;
}

.widget--browse-posts .widget-next-anchor::before {
    content: "Newer →";
}

.endnotes,
.footnotes {
    max-width: var(--measure-line-length-responsive);
}

.endnotes::before,
.footnotes::before {
    content: "Footnotes" !important;
    margin-bottom: var(--measure-medium);
}

.endnote,
.footnote {
    padding-left: var(--border-width-default);
    padding-right: var(--border-width-default);
}

footer {
    background-color: var(--color-kaiser);
    color: var(--color-alto);
    font-weight: var(--font-weight-bold);
}

.footer-links,
.elsewhere {
    overflow: hidden;
    vertical-align: middle;
}

.footer-home-anchor,
.footer-links a,
.footer-links button,
.footer-links div {
    display: inline-block;
    white-space: nowrap;
}

.footer-home-anchor,
.footer-links a {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-uppercase);
}

.footer-home-anchor {
    width: 3.125rem;
    height: 3.125rem;
    justify-self: center;
    text-indent: 100%;
    text-decoration: none;
    white-space: nowrap;
}

.footer-home-anchor .icon {
    -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    transition: opacity 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    opacity: var(--opacity-alpha);
    fill: var(--color-raven);
    width: 100%;
    height: 100%;
    display: block;
}

.footer-home-anchor:hover .icon,
.footer-home-anchor:focus .icon,
.footer-home-anchor:active .icon {
    opacity: 1;
}

.footer-home-anchor:active {
    background-color: var(--color-transparent);
    outline-width: 0;
}

.footer-home-anchor:active .icon {
    -webkit-transform: translateY(var(--border-width-thin));
    transform: translateY(var(--border-width-thin));
}

.footer-links {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
}

@media screen and (max-width: 800px) {
    .footer-links {
        -webkit-box-pack: center;
        justify-content: center;
    }
}

.footer-links a,
.footer-links button {
    margin: var(--measure-small);
    font-size: var(--font-size-small);
    text-decoration-thickness: var(--border-width-thin);
    text-underline-offset: var(--border-width-default);
}

.footer-links button {
    text-transform: initial;
}

@media screen and (max-width: 800px) {
    .footer-links--indieweb {
        margin-top: var(--measure-medium);
    }
}

.elsewhere {
    max-height: var(--measure-icon);
}

@media screen and (max-width: 800px) {
    .elsewhere {
        text-align: center;
    }
}

.elsewhere__list li {
    display: inline-block;
}

.elsewhere__list li + li {
    margin-left: var(--measure-one);
}

.elsewhere__list a {
    display: block;
    text-decoration: none;
}

.elsewhere__list a .icon {
    -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    transition: opacity 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    opacity: var(--opacity-beta);
    height: var(--measure-icon);
}

.elsewhere__list a:hover .icon,
.elsewhere__list a:focus .icon,
.elsewhere__list a:active .icon {
    opacity: 1;
}

.elsewhere__list a:active {
    background-color: var(--color-transparent);
    outline-width: 0;
}

.elsewhere__list a:active .icon {
    -webkit-transform: translateY(var(--border-width-thin));
    transform: translateY(var(--border-width-thin));
}

.comments {
    text-align: center;
}

.comments iframe {
    margin-top: var(--measure-large);
}

.comments noscript {
    font-size: var(--font-size-large);
    font-style: italic;
}

.button--show-comments::before,
.button--show-comments:active::before {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

.webmentions > * + * {
    margin-top: var(--measure-large);
}

.webmentions__thread {
    margin-top: var(--measure-medium);
}

.webmentions__form {
    max-width: var(--measure-breakpoint-small);
    margin: 0 auto;
}

.webmentions__form p {
    grid-column: 1 / span 2;
    margin-top: var(--measure-small);
}

.webmentions__label {
    grid-column: 1 / span 2;
    margin-bottom: var(--measure-small);
}

@media (max-width: 500px) {
    .webmentions__label {
        margin-bottom: var(--measure-medium);
    }
}

.webmentions__submit {
    min-width: 5em;
    margin-top: 0;
}

@media screen and (min-width: 801px) {
    .webmentions__list {
        grid-template-columns: minmax(6rem, -webkit-max-content) minmax(12em, 1fr);
        grid-template-columns: minmax(6rem, max-content) minmax(12em, 1fr);
        row-gap: var(--measure-small);
    }
}

.webmentions__list a {
    overflow-wrap: break-word;
    word-break: break-word;
}

.webmentions__list .webmentions__list__replies ol {
    margin-top: 0;
}

.webmentions__responses {
    contain: content;
}

.webmentions__responses > * + * {
    margin-top: var(--measure-large);
}

.webmentions__response {
    position: relative;
}

.webmentions__list__replies .webmentions__response + .webmentions__response {
    margin-top: var(--measure-medium);
}

.webmentions__response small {
    color: var(--color-dove);
    font-style: italic;
}

.webmentions__response__avatar,
.webmentions__response__image {
    background-clip: padding-box;
    border-radius: 50%;
    width: var(--measure-avatar-small);
    height: var(--measure-avatar-small);
}

.webmentions__response__avatar {
    background-image: url("/images/default-profile.png");
    background-size: 100%;
}

.webmentions__list__replies .webmentions__response__avatar {
    float: left;
    margin-right: var(--measure-medium);
    margin-bottom: var(--measure-small);
}

.webmentions__response__image {
    display: block;
}

.webmentions__response__name {
    padding-right: var(--measure-medium);
}

.webmentions__list__reactions .webmentions__response__name {
    display: none;
}

[hidden] + .webmentions__list__reactions {
    grid-column-start: 1;
    grid-column-end: -1;
}

.webmentions__list__reactions li {
    display: inline-block;
    margin-right: var(--measure-small);
}

.webmentions__list__reactions .webmentions__response__avatar,
.webmentions__list__reactions .webmentions__response__type {
    display: block;
}

.webmentions__list__reactions .webmentions__response__avatar:active,
.webmentions__list__reactions .webmentions__response__type:active {
    outline-width: 0;
}

.webmentions__list__reactions .webmentions__response__type {
    position: absolute;
    bottom: 0;
    left: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: var(--font-size-gamma);
    line-height: 1;
    text-decoration: none;
}

[data-type="bookmark"] .webmentions__response__type::before {
    content: "🔖";
}

[data-type="like"] .webmentions__response__type::before {
    content: "❤️";
}

[data-type="link"] .webmentions__response__type::before {
    content: "🔗";
}

[data-type="repost"] .webmentions__response__type::before {
    content: "🔄️";
}

.webmentions__response__type:not([data-reacji=""])::before {
    content: attr(data-reacji);
}

.webmentions__response__meta {
    clear: both;
}

.button--show-webmentions::before,
.button--show-webmentions:active::before {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}

hr + .webmentions[hidden] + hr {
    display: none;
}

code[data-lang] {
    padding-top: var(--measure-large);
    padding-top: calc(var(--measure-large) + var(--measure-small));
}

code[data-lang]::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background-clip: padding-box;
    border-radius: 0.375rem 0.375rem 0 0;
    font-family: var(--font-family-alpha);
    -webkit-transition: all var(--transition-duration-default) var(--transition-function-default);
    transition: all var(--transition-duration-default) var(--transition-function-default);
    content: attr(data-lang);
    background-color: var(--color-dove);
    color: var(--color-white);
    padding: 0 var(--measure-medium);
    font-size: var(--font-size-large);
    letter-spacing: var(--letter-spacing-uppercase);
    line-height: calc(var(--measure-large) + var(--measure-small));
    text-shadow: 0 var(--border-width-hairline) 0 var(--color-mineshaft);
}

code[data-lang].language-css::before {
    background-color: #016fba !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-haml::before {
    background-color: #e54d26 !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-html::before {
    background-color: #e54d26 !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-jade::before {
    background-color: #e54d26 !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-javascript::before {
    background-color: #f1c54c !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-liquid::before {
    background-color: #7ab55c !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-markdown::before {
    background-color: #4a525a !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-nunjucks::before {
    background-color: #3d8137 !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-sass::before {
    background-color: #c6538c !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-scss::before {
    background-color: #c6538c !important;
    color: #f9f9f9 !important;
    text-shadow: 0 var(--border-width-hairline) 0 #2b2b2b;
}

code[data-lang].language-liquid-white::before {
    background-color: #dfebd9 !important;
    color: #2b2b2b !important;
    text-shadow: 0 var(--border-width-hairline) 0 #f9f9f9;
}

code[data-lang].language-html::before,
code[data-lang].language-css::before,
code[data-lang].language-json::before,
code[data-lang].language-scss::before,
code[data-lang].language-yaml::before {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-uppercase);
}

code[data-lang].language-javascript::before {
    content: "JavaScript";
}

code[data-lang].language-liquid::before {
    text-transform: capitalize;
}

.code-toggle {
    position: relative;
}

.code-toggle-label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

.code-toggle-input:checked ~ .code-toggle-label {
    display: none;
    visibility: hidden;
}

.code-toggle-label button {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    pointer-events: none;
}

.code-toggle-input + .highlight pre {
    -webkit-transition: max-height 0.2s ease 0s;
    transition: max-height 0.2s ease 0s;
    max-height: 9999vh;
}

.code-toggle-input:not(:checked) ~ .highlight pre {
    max-height: calc(var(--font-size-small) * var(--line-height-code) * 5 + var(--measure-medium) * 2);
    overflow-x: hidden;
}

.code-toggle-input:not(:checked) ~ .highlight pre::after {
    background-clip: padding-box;
    border-radius: 0 0 0.375rem 0.375rem;
    content: "";
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(19%, rgba(5, 5, 5, 0.2358)), color-stop(34%, rgba(6, 6, 6, 0.4131)), color-stop(47%, rgba(6, 6, 6, 0.5562)), color-stop(56.5%, rgba(6, 6, 6, 0.6498)), color-stop(65%, rgba(6, 6, 6, 0.7254)), color-stop(73%, rgba(6, 6, 6, 0.7866)), color-stop(80.2%, rgba(6, 6, 6, 0.8325)), color-stop(86.1%, rgba(6, 6, 6, 0.8622)), color-stop(91%, rgba(6, 6, 6, 0.8811)), color-stop(95.2%, rgba(6, 6, 6, 0.8928)), color-stop(98.2%, rgba(6, 6, 6, 0.8982)), to(rgba(6, 6, 6, 0.9)));
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(5, 5, 5, 0.2358) 19%, rgba(6, 6, 6, 0.4131) 34%, rgba(6, 6, 6, 0.5562) 47%, rgba(6, 6, 6, 0.6498) 56.5%, rgba(6, 6, 6, 0.7254) 65%, rgba(6, 6, 6, 0.7866) 73%, rgba(6, 6, 6, 0.8325) 80.2%, rgba(6, 6, 6, 0.8622) 86.1%, rgba(6, 6, 6, 0.8811) 91%, rgba(6, 6, 6, 0.8928) 95.2%, rgba(6, 6, 6, 0.8982) 98.2%, rgba(6, 6, 6, 0.9) 100%);
    background-size: 100% calc(var(--font-size-small) * var(--line-height-code) * 4);
    background-position: bottom;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.icon {
    display: block;
    speak: none;
}

button .icon,
.button .icon,
[type="button"] .icon,
.fragment-anchor .icon {
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
}

button .icon,
.button .icon,
[type="button"] .icon {
    width: var(--font-size-default);
    height: var(--font-size-default);
    margin-right: var(--measure-small);
}

.fragment-anchor .icon {
    width: var(--font-size-gamma);
    height: var(--font-size-gamma);
}

.icons-list .icon {
    fill: var(--color-kaiser);
    height: calc(var(--measure-large) * 2);
}

.icon--codepen {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--github {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--lastfm {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-lastfm);
}

.icon--switch {
    width: 36px;
    width: calc(0.9 * var(--measure-icon));
    fill: var(--color-nintendo);
}

.icon--rss {
    width: 31px;
    width: calc(0.775 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--spotify {
    width: 37px;
    width: calc(0.925 * var(--measure-icon));
    fill: var(--color-spotify);
}

.icon--twitter {
    width: 37px;
    width: calc(0.925 * var(--measure-icon));
    fill: var(--color-twitter);
}

.icon--article {
    width: 36px;
    width: calc(0.9 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--feather {
    width: 29px;
    width: calc(0.725 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--heart {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--link {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--search {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-white);
}

.icon--tag {
    width: 40px;
    width: calc(1 * var(--measure-icon));
    fill: var(--color-white);
}

.emoji {
    height: 1.5em;
    font-style: normal;
    vertical-align: middle;
    text-shadow: none;
}

.media {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}

.media audio,
.media canvas,
.media embed,
.media iframe,
.media object,
.media video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    margin-bottom: 0;
}

.media--16-by-9,
.media--vimeo,
.media--youtube {
    padding-top: 56.25%;
}

.media--4-by-3,
.media--speakerdeck {
    padding-top: 75%;
}

.pixelated {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.cp_embed_wrapper {
    resize: both;
    overflow: auto;
}

.cp_embed_wrapper iframe {
    margin-bottom: 0;
}

.sparkline {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: default;
    -webkit-touch-callout: none;
    -webkit-transition: all var(--transition-duration-default) var(--transition-function-default);
    transition: all var(--transition-duration-default) var(--transition-function-default);
    width: 160px !important;
    height: 24px !important;
}

.sparkline:hover,
.sparkline:focus {
    background-color: var(--color-highlight);
    outline: var(--border-width-thin) var(--border-style-default) var(--color-highlight);
}

.sparkline:active {
    background-color: var(--color-canada);
    outline: var(--border-width-thin) var(--border-style-default) var(--color-canada);
}

@media screen and (min-width: 501px) {
    h1 .sparkline,
    h2 .sparkline,
    h3 .sparkline,
    h4 .sparkline,
    h5 .sparkline,
    h6 .sparkline {
        margin-top: var(--measure-medium);
    }
}

.last-fm__cover {
    max-height: var(--measure-icon);
    float: left;
    margin-right: var(--measure-small) !important;
    margin-bottom: var(--measure-small) !important;
}

.last-fm__track + .last-fm__artist:not(:empty)::before {
    content: " by ";
    font-family: var(--font-family-serif);
    font-size: var(--font-size-small);
    font-style: italic;
}

.notification {
    background-color: var(--color-mineshaft);
    color: var(--color-white);
    display: block;
    padding: var(--measure-small) var(--measure-medium);
    position: fixed;
    bottom: var(--measure-large);
    right: var(--measure-medium);
    left: var(--measure-medium);
    font-size: var(--font-size-gamma);
    font-weight: var(--font-weight-bold);
}

@media screen and (min-width: 501px) {
    .notification {
        left: auto;
    }
}

.notification:not([class*="hidden"]) {
    -webkit-animation: fade-out var(--transition-duration-default) var(--animation-function) var(--animation-duration) var(--animation-fill-mode);
    animation: fade-out var(--transition-duration-default) var(--animation-function) var(--animation-duration) var(--animation-fill-mode);
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.notification.notification--positive {
    background-color: var(--color-liquid);
}

.notification.notification--negative {
    background-color: var(--color-canada);
}

.unit {
    display: none;
}

[id="metric"]:checked ~ .units [for="metric"] {
    opacity: var(--opacity-beta);
    pointer-events: none;
}

[id="metric"]:checked ~ .ingredients .unit--metric {
    display: inline;
}

[id="canada"]:checked ~ .units [for="canada"] {
    opacity: var(--opacity-beta);
    pointer-events: none;
}

[id="canada"]:checked ~ .ingredients .unit--canada {
    display: inline;
}

[id="uk"]:checked ~ .units [for="uk"] {
    opacity: var(--opacity-beta);
    pointer-events: none;
}

[id="uk"]:checked ~ .ingredients .unit--uk {
    display: inline;
}

[id="us"]:checked ~ .units [for="us"] {
    opacity: var(--opacity-beta);
    pointer-events: none;
}

[id="us"]:checked ~ .ingredients .unit--us {
    display: inline;
}

@media print {
    nav,
    .widget,
    .comments,
    footer .home-anchor,
    footer .style-guide-anchor {
        display: none;
        visibility: hidden;
    }
    button,
    .button,
    [type="button"] {
        color: var(--color-kaiser);
        border-width: var(--border-width-hairline);
        border-style: var(--border-style-default);
        border-color: var(--color-kaiser);
        box-shadow: none;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        orphans: 3;
        widows: 3;
    }
    kbd {
        box-shadow: none;
    }
}

.ads > * + * {
    margin-top: var(--measure-large);
}

.ad,
[id="carbonads"] {
    width: 100%;
    max-width: var(--measure-breakpoint-small);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

.ad a,
[id="carbonads"] a,
.ad a:hover,
[id="carbonads"] a:hover,
.ad a:focus,
[id="carbonads"] a:focus,
.ad a:active,
[id="carbonads"] a:active {
    color: inherit;
    text-decoration: none;
}

.ad__wrap,
.carbon-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.ad__split,
.carbon-img,
.carbon-text {
    background-color: var(--color-black--delta);
    background-clip: padding-box;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-width: var(--border-width-thin);
    border-style: var(--border-style-default);
    border-color: var(--color-alto);
    padding: var(--measure-small);
}

.ad__image,
.carbon-img {
    border-radius: var(--border-radius-thin) 0 0 var(--border-radius-thin);
    border-right-width: 0;
    -webkit-box-pack: center;
    justify-content: center;
    margin: 0;
    line-height: 1;
}

.ad__image img,
.carbon-img img {
    display: block;
}

.ad__content,
.carbon-text {
    -webkit-box-flex: 1;
    flex: 1;
    border-radius: 0 var(--border-radius-thin) var(--border-radius-thin) 0;
    border-left-width: 0;
    line-height: var(--line-height-small);
}

.ad__label,
.carbon-poweredby {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-uppercase);
    color: var(--color-kaiser);
    display: block;
    padding: var(--measure-small);
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

[id="carbonads"] {
    min-height: 9.75rem;
}

.carbon-img img {
    width: 130px !important;
    height: 100px !important;
}

.page--style-guide .lede + .gamma,
.page--style-guide .lede + .endnotes::before,
.page--style-guide .lede + .footnotes::before,
.page--style-guide .lede + h3,
.page--style-guide .lede + .lede {
    margin-top: 0;
}

.palette-list {
    width: 100%;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 500px) {
    .palette-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
    }
}

.palette-list li {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum", "tnum";
    padding: var(--measure-medium) 0;
    vertical-align: middle;
    font-size: var(--font-size-small);
    text-align: center;
    white-space: nowrap;
}

@media screen and (max-width: 500px) {
    .palette-list li {
        -webkit-box-flex: 1;
        flex: 1 0 100%;
    }
}

@media screen and (min-width: 501px) and (max-width: 1140px) {
    .palette-list li {
        -webkit-box-flex: 1;
        flex: 1 0 50%;
    }
}

@media screen and (min-width: 1141px) {
    .palette-list li {
        -webkit-box-flex: 1;
        flex: 1 0 33.333%;
    }
}

.palette-list li[data-color="bowhead"] {
    background-color: var(--color-bowhead);
    color: #f9f9f9;
}

.palette-list li[data-color="raven"] {
    background-color: var(--color-raven);
    color: #f9f9f9;
}

.palette-list li[data-color="coyote"] {
    background-color: var(--color-coyote);
    color: #f9f9f9;
}

.palette-list li[data-color="canada"] {
    background-color: var(--color-canada);
    color: #f9f9f9;
}

.palette-list li[data-color="black"] {
    background-color: var(--color-black);
    color: #f9f9f9;
}

.palette-list li[data-color="mineshaft"] {
    background-color: var(--color-mineshaft);
    color: #f9f9f9;
}

.palette-list li[data-color="kaiser"] {
    background-color: var(--color-kaiser);
    color: #f9f9f9;
}

.palette-list li[data-color="dove"] {
    background-color: var(--color-dove);
    color: #f9f9f9;
}

.palette-list li[data-color="alto"] {
    background-color: var(--color-alto);
    color: #4f4f4f;
}

.palette-list li[data-color="white"] {
    background-color: var(--color-white);
    color: #4f4f4f;
}

.palette-list li .gamma,
.palette-list li .endnotes::before,
.palette-list li .footnotes::before,
.palette-list li h3,
.palette-list li .lede {
    margin-bottom: 0;
    line-height: var(--line-height-default);
}

.measure-example {
    background-color: var(--color-alto);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eb2d37), to(#eb2d37));
    background-image: linear-gradient(to bottom, #eb2d37, #eb2d37);
    background-position: center center;
    background-size: 100% var(--border-width-thin);
    background-repeat: no-repeat;
    height: var(--measure-medium);
    display: block;
}

.measure-example--small {
    width: var(--measure-small);
}

.measure-example--medium {
    width: var(--measure-medium);
}

.measure-example--large {
    width: var(--measure-large);
}

.measure-example--one {
    width: var(--measure-one);
}

.measure-example--responsive {
    width: var(--measure-line-length-responsive);
}

.transition-example {
    position: relative;
    margin-bottom: calc(var(--measure-large) + var(--measure-medium));
}

.transition-example::before {
    content: "(Hover to interact.)";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: var(--color-kaiser);
    margin-top: var(--measure-small);
}

@media (any-pointer: coarse) {
    .transition-example::before {
        content: "(Tap to interact.)";
    }
}

.transition-example__demo {
    background-clip: padding-box;
    border-radius: 0.25rem;
    -webkit-transition: color 0.2s ease 0s;
    transition: color 0.2s ease 0s;
    width: 100%;
    max-width: var(--measure-line-length-responsive);
    height: calc(var(--measure-large) * 1.5);
    display: block;
    border-width: var(--border-width-thin);
    border-style: var(--border-style-default);
    border-color: var(--color-alto);
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
    position: relative;
    line-height: 3.125;
    text-align: center;
    z-index: var(--z-index-above);
}

.transition-example__demo:hover,
.transition-example__demo:focus {
    color: var(--color-white);
}

.transition-example__demo::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-clip: padding-box;
    border-radius: 0.125rem;
    background-color: var(--color-kaiser);
    z-index: var(--z-index-below);
}

.transition-example--slide .transition-example__demo {
    cursor: e-resize;
}

.transition-example--slide .transition-example__demo::before {
    -webkit-transition: -webkit-transform 0.2s ease 0s;
    transition: -webkit-transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s;
    transition: transform 0.2s ease 0s, -webkit-transform 0.2s ease 0s;
    -webkit-transform: translateX(-101%);
    transform: translateX(-101%);
}

.transition-example--slide .transition-example__demo:hover::before,
.transition-example--slide .transition-example__demo:focus::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.transition-example--fade .transition-example__demo {
    cursor: cell;
}

.transition-example--fade .transition-example__demo::before {
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
    opacity: 0;
}

.transition-example--fade .transition-example__demo:hover::before,
.transition-example--fade .transition-example__demo:focus::before {
    opacity: 1;
}

.icons-list {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
}

.icons-list li {
    display: inline-block;
    margin-left: var(--measure-medium);
    margin-right: var(--measure-medium);
}