:root {
    --global-max-width: 1280px;
    --global-radius: 2px;
    --global-radius-round: 50%;
    --global-header-position: initial;
    --global-hyphens: none;
    --color-primary: var(--ghost-accent-color, #7450f7);
    --color-primary-light: #7f5ef7;
    --color-primary-dark: #6841f6;
    --color-secondary: #f77a3b;
    --color-secondary-light: #f7844a;
    --color-secondary-dark: #f6702c;
    --color-black: #000;
    --color-dark: #1a1a1a;
    --color-dark-acc: #333;
    --color-grey-darker: #4d4d4d;
    --color-grey-dark: #666;
    --color-grey: grey;
    --color-grey-light: #999;
    --color-grey-lighter: #b3b3b3;
    --color-light-acc: #ccc;
    --color-light: #e6e6e6;
    --color-white: #fff;
    --color-error: #fc365e;
    --color-success: #48c774;
    --color-warning: #fddc58;
    --color-info: #259eef;
    --color-gold: #ffd900;
    --color-text: var(--color-dark);
    --color-text-acc-1: var(--color-dark-acc);
    --color-text-acc-2: var(--color-grey-darker);
    --color-text-acc-3: var(--color-grey-dark);
    --color-text-reverse: var(--color-light);
    --color-bg: #fff;
    --color-bg-body: #f6f7f9;
    --color-bg-acc-1: #fafafa;
    --color-bg-acc-2: #f5f5f5;
    --color-bg-acc-3: #f0f0f0;
    --color-bg-reverse: var(--color-dark);
    --color-neutral: var(--color-grey);
    --color-border: #f2f2f2;
    --color-outline: #4d91fe;
    --font-serif: Times, Georgia, serif;
    --font-sans: "Jost", Arial, Tahoma, sans-serif;
    --font-mono: "Lucida Console", Monaco, monospace;
    --font-size-base: 1rem;
    --font-weight-100: 100;
    --font-weight-100: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;
    --line-height-base: 1.6;
    --trans-name: ease-in-out;
    --trans-duration: 400ms;
    --trans-duration-lg: 800ms;
    --trans-duration-xl: 1200ms;
    --trans-delay: 100ms;
    --trans-default: var(--trans-duration) var(--trans-name);
    --gap: 1em;
    --gap-rem: 1rem;
    --gap-xs: calc(var(--gap)*0.25);
    --gap-sm: calc(var(--gap)*0.5);
    --gap-lg: calc(var(--gap)*2);
    --gap-xl: calc(var(--gap)*4);
    --brakepoint-sm: 36em;
    --brakepoint-md: 48em;
    --brakepoint-lg: 62em;
    --brakepoint-xl: 75em;
    --gutter-w: 1rem;
    --outer-m: 1rem;
    --gutter-comp: calc(var(--gutter-w)*-1);
    --half-gutter-w: calc(var(--gutter-w)*0.5);
    --container-sm: calc(var(--brakepoint-sm) + var(--gutter-w));
    --container-md: calc(var(--brakepoint-md) + var(--gutter-w));
    --container-lg: calc(var(--brakepoint-lg) + var(--gutter-w));
    --container-xl: calc(var(--brakepoint-xl) + var(--gutter-w))
}

html {
    box-sizing: border-box
}

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

html {
    line-height: 1.15;
    -webkit-txt-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

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

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

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

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

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

[hidden],
template {
    display: none
}

body,
html {
    font-size: 1rem;
    font-size: var(--font-size-base);
    font-weight: 400;
    font-weight: var(--font-weight-400);
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans);
    line-height: 1.6;
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-txt-size-adjust: 100%;
    -ms-txt-size-adjust: 100%;
    -webkit-hyphens: none;
    -webkit-hyphens: var(--global-hyphens);
    -ms-hyphens: none;
    -ms-hyphens: var(--global-hyphens);
    hyphens: none;
    hyphens: var(--global-hyphens)
}

body {
    color: #1a1a1a;
    color: var(--color-text);
    background-color: #f6f7f9;
    background-color: var(--color-bg-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

body.menu-open {
    overflow-y: hidden
}

@media only screen and (min-width:48em) {
    body.menu-open {
        overflow-y: scroll
    }
}

[data-color-scheme=light] #theme-dark {
    visibility: visible;
    opacity: 1
}

@media (prefers-reduced-motion:reduce),
(print) {
    body {
        --trans-duration: 1ms
    }
}

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    line-height: normal;
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
    -webkit-appearance: button
}

button::-moz-focus-inner {
    border: 0;
    padding: 0
}

code,
pre {
    max-width: 100%;
    margin: 0 0 2em;
    margin: 0 0 var(--gap-lg);
    font-family: Lucida Console, Monaco, monospace;
    font-family: var(--font-mono);
    color: #333;
    color: var(--color-text-acc-1);
    background-color: #fff;
    background-color: var(--color-bg);
    border: 1px solid #f2f2f2;
    border: 1px solid var(--color-border);
    font-size: 1rem;
    font-size: var(--font-size-base);
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.6;
    line-height: var(--line-height-base);
    border-radius: 2px;
    border-radius: var(--global-radius);
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

code {
    position: relative;
    padding: 0 .25em;
    padding: 0 var(--gap-xs);
    white-space: normal;
    box-shadow: 0 0 0 1px grey;
    box-shadow: 0 0 0 1px var(--color-neutral)
}

code,
pre {
    overflow: auto
}

pre {
    padding: 1em;
    padding: var(--gap)
}

pre code {
    padding: 0;
    white-space: pre;
    background: transparent!important;
    border: none;
    box-shadow: none
}

.code-toolbar {
    max-width: 100;
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

[dir=ltr] .code-toolbar .toolbar {
    text-align: right
}

[dir=rtl] .code-toolbar .toolbar {
    text-align: left
}

.code-toolbar pre {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

.code-toolbar button {
    padding: .4em .76em;
    background-color: #fff;
    background-color: var(--color-bg);
    line-height: 1;
    font-size: .9rem;
    box-shadow: 0 0 0 2px #f2f2f2;
    box-shadow: 0 0 0 2px var(--color-border);
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.code-toolbar button:active,
.code-toolbar button:focus,
.code-toolbar button:hover {
    box-shadow: 0 0 0 2px grey;
    box-shadow: 0 0 0 2px var(--color-neutral)
}

.code-toolbar button.focus-visible,
.code-toolbar button:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

:not(pre)>code[class*=language-] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
    color: #708090
}

[data-color-scheme=dark] .token.cdata,
[data-color-scheme=dark] .token.comment,
[data-color-scheme=dark] .token.doctype,
[data-color-scheme=dark] .token.prolog {
    color: #758595
}

.token.punctuation {
    color: #999
}

.token.namespace {
    opacity: .7
}

.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
    color: #905
}

[data-color-scheme=dark] .token.boolean,
[data-color-scheme=dark] .token.constant,
[data-color-scheme=dark] .token.deleted,
[data-color-scheme=dark] .token.number,
[data-color-scheme=dark] .token.property,
[data-color-scheme=dark] .token.symbol,
[data-color-scheme=dark] .token.tag {
    color: #fa0089
}

.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
    color: #690
}

.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
    color: #9a6e3a
}

[data-color-scheme=dark] .language-css .token.string,
[data-color-scheme=dark] .style .token.string,
[data-color-scheme=dark] .token.entity,
[data-color-scheme=dark] .token.operator,
[data-color-scheme=dark] .token.url {
    color: #aa7b41
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a
}

[data-color-scheme=dark] .token.atrule,
[data-color-scheme=dark] .token.attr-value,
[data-color-scheme=dark] .token.keyword {
    color: #008fcc
}

.token.class-name,
.token.function {
    color: #dd4a68
}

[data-color-scheme=dark] .token.class-name,
[data-color-scheme=dark] .token.function {
    color: #df5873
}

.token.important,
.token.regex,
.token.variable {
    color: #e90
}

.token.bold,
.token.important {
    font-weight: 700
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans);
    color: inherit;
    word-break: break-word
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit
}

h1 {
    font-size: 2.5rem;
    font-size: calc(var(--font-size-base)*2.5);
    font-size: calc(1.8rem + .4vw);
    font-size: calc(var(--font-size-base)*1.8 + .4vw);
    line-height: 1.28;
    line-height: calc(var(--line-height-base)*0.8);
    margin: 0 0 .5em;
    margin: 0 0 calc(var(--gap)*0.5)
}

h1,
h2 {
    font-weight: 700;
    font-weight: var(--font-weight-700)
}

h2 {
    font-size: 2rem;
    font-size: calc(var(--font-size-base)*2);
    font-size: calc(1.6rem + .3vw);
    font-size: calc(var(--font-size-base)*1.6 + .3vw);
    line-height: 1.36;
    line-height: calc(var(--line-height-base)*0.85);
    margin: 0 0 .6em;
    margin: 0 0 calc(var(--gap)*0.6)
}

h3 {
    font-size: 1.8rem;
    font-size: calc(var(--font-size-base)*1.8);
    font-size: calc(1.4rem + .25vw);
    font-size: calc(var(--font-size-base)*1.4 + .25vw);
    font-weight: 700;
    font-weight: var(--font-weight-700);
    line-height: 1.44;
    line-height: calc(var(--line-height-base)*0.9);
    margin: 0 0 .7em;
    margin: 0 0 calc(var(--gap)*0.7)
}

h4 {
    font-size: 1.5rem;
    font-size: calc(var(--font-size-base)*1.5);
    font-size: calc(1.3rem + .2vw);
    font-size: calc(var(--font-size-base)*1.3 + .2vw);
    font-weight: 600;
    font-weight: var(--font-weight-600);
    line-height: 1.52;
    line-height: calc(var(--line-height-base)*0.95);
    margin: 0 0 .8em;
    margin: 0 0 calc(var(--gap)*0.8)
}

h5 {
    font-size: 1.25rem;
    font-size: calc(var(--font-size-base)*1.25);
    font-size: calc(1.2rem + .15vw);
    font-size: calc(var(--font-size-base)*1.2 + .15vw);
    margin: 0 0 .9em;
    margin: 0 0 calc(var(--gap)*0.9)
}

h5,
h6 {
    font-weight: 600;
    font-weight: var(--font-weight-600);
    line-height: 1.6;
    line-height: calc(var(--line-height-base)*1)
}

h6 {
    font-size: 1.1rem;
    font-size: calc(var(--font-size-base)*1.1);
    font-size: calc(1.1rem + .1vw);
    font-size: calc(var(--font-size-base)*1.1 + .1vw);
    margin: 0 0 1em;
    margin: 0 0 calc(var(--gap)*1)
}

img {
    max-width: 100%;
    margin: 0
}

[data-color-scheme=dark] img {
    filter: brightness(.8) contrast(1.2)
}

input,
select,
textarea {
    width: 100%;
    display: block;
    padding: 1em;
    padding: var(--gap);
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    border: none;
    box-shadow: 0 0 0 1px #f2f2f2;
    box-shadow: 0 0 0 1px var(--color-border);
    border-radius: 2px;
    border-radius: var(--global-radius);
    outline: none;
    line-height: normal;
    background-color: transparent;
    font-size: 1rem;
    font-size: var(--font-size-base);
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans);
    color: inherit
}

input:active,
input:focus,
input:hover,
select:active,
select:focus,
select:hover,
textarea:active,
textarea:focus,
textarea:hover {
    box-shadow: 0 0 0 1px var(--ghost-accent-color, #7450f7);
    box-shadow: 0 0 0 1px #7450f7;
    box-shadow: 0 0 0 1px var(--color-primary);
    outline: none!important
}

input.focus-visible,
input:focus-visible,
select.focus-visible,
select:focus-visible,
textarea.focus-visible,
textarea:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

input:-ms-input-placeholder,
input::-webkit-input-placeholder,
input::placeholder,
select:-ms-input-placeholder,
select::-webkit-input-placeholder,
select::placeholder,
textarea:-ms-input-placeholder,
textarea::-webkit-input-placeholder,
textarea::placeholder {
    color: #666;
    color: var(--color-text-acc-3);
    font-weight: 400;
    font-weight: var(--font-weight-400)
}

ol,
ul {
    margin: 0 0 2em;
    margin: 0 0 var(--gap-lg)
}

ol li,
ul li {
    line-height: 1.6;
    line-height: var(--line-height-base)
}

ol li a,
ul li a {
    color: inherit
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-top: 0;
    margin-bottom: 0
}

.list {
    list-style: disc outside none;
    list-style: initial
}

.list--unstyled {
    padding-left: 0;
    list-style: none
}

hr {
    border: 0;
    height: 1px;
    background-color: #f2f2f2;
    background-color: var(--color-border);
    margin: 1em 0;
    margin: var(--gap) 0
}

abbr {
    -webkit-font-variant: small-caps;
    -moz-font-variant: small-caps;
    -ms-font-variant: small-caps;
    font-feature-settings: "smcp";
    font-variant: small-caps;
    font-weight: 700;
    font-weight: var(--font-weight-700);
    text-transform: lowercase;
    color: grey
}

abbr[title]:hover {
    cursor: help
}

abbr,
acronym,
blockquote,
code,
input,
kbd,
q,
samp,
var {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

table {
    display: inline-block;
    overflow-x: auto;
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans);
    margin: 1em 0 2em;
    margin: var(--gap) 0 var(--gap-lg);
    border-gap: 0;
    border-collapse: collapse;
    border-left: 1px solid #f2f2f2;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid #f2f2f2;
    border-right: 1px solid var(--color-border);
    max-width: calc(100vw - 2em);
    background-color: #fff;
    background-color: var(--color-bg)
}

@media only screen and (min-width:36em) {
    table {
        max-width: 100%
    }
}

table td,
table th {
    padding: .5em 1em;
    padding: var(--gap-sm) var(--gap);
    line-height: 1.6;
    line-height: var(--line-height-base);
    border-right: 1px solid #f2f2f2;
    border-right: 1px solid var(--color-border)
}

table td:last-of-type,
table th:last-of-type {
    border-right: none
}

table tr {
    white-space: pre
}

table thead tr {
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border)
}

table tbody tr,
table thead tr {
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border)
}

p {
    font-size: 1rem;
    font-size: var(--font-size-base);
    line-height: 1.7;
    line-height: calc(.1 + var(--line-height-base));
    margin: 0 0 2em;
    margin: 0 0 var(--gap-lg)
}

a {
    color: var(--color-link);
    color: inherit;
    text-decoration: none;
    box-shadow: none
}

a.focus-visible,
a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

blockquote {
    margin: 0 0 2em;
    margin-bottom: var(--gap-lg);
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 1.1rem;
    font-size: calc(var(--font-size-base)*1.1);
    line-height: 1.6;
    line-height: var(--line-height-base);
    background-color: #fff;
    background-color: var(--color-bg);
    border: 1px solid #f2f2f2;
    border-left: 4px solid #7450f7;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-top-right-radius: 2px;
    border-top-right-radius: var(--global-radius);
    border-bottom-right-radius: 2px;
    border-bottom-right-radius: var(--global-radius);
    padding: 2em;
    padding: var(--gap-lg);
    position: relative;
    width: 100%
}

blockquote+figcaption cite {
    display: block;
    font-size: inherit;
    text-align: right;
    font-style: italic
}

blockquote cite {
    font-weight: 700;
    font-weight: var(--font-weight-700)
}

blockquote p {
    margin: 0
}

.italic,
em,
i {
    font-style: italic
}

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

.small,
small {
    font-size: 80%
}

details summary:active,
details summary:focus,
details summary:hover {
    cursor: pointer;
    outline: none
}

details summary.focus-visible,
details summary:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.wrapper {
    box-sizing: border-box;
    max-width: 1280px;
    max-width: var(--global-max-width);
    margin: 0 auto
}

.wrapper-1080 {
    max-width: 1080px
}

.container,
.container-fixed {
    margin-right: auto;
    margin-left: auto
}

.container {
    padding-right: 1rem;
    padding-right: var(--outer-m);
    padding-left: 1rem;
    padding-left: var(--outer-m)
}

.grid {
    display: grid;
    grid-gap: 2em;
    grid-gap: var(--gap-lg)
}

.row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -1rem;
    margin-right: var(--gutter-comp);
    margin-left: -1rem;
    margin-left: var(--gutter-comp)
}

.row,
.row.reverse {
    -webkit-box-orient: horizontal
}

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

.col.reverse,
.row.reverse {}

.col.reverse {
    flex-direction: column-reverse
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-right: 1rem;
    padding-right: var(--gutter-w);
    padding-left: 1rem;
    padding-left: var(--gutter-w)
}

.col-xs {
    flex-grow: 1;
    flex-basis: 0;
    max-width: 100%
}

.col-xs-1 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%
}

.col-xs-2 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%
}

.col-xs-3 {
    flex-basis: 25%;
    max-width: 25%
}

.col-xs-4 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%
}

.col-xs-5 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%
}

.col-xs-6 {
    flex-basis: 50%;
    max-width: 50%
}

.col-xs-7 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%
}

.col-xs-8 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%
}

.col-xs-9 {
    flex-basis: 75%;
    max-width: 75%
}

.col-xs-10 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%
}

.col-xs-11 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%
}

.col-xs-12 {
    flex-basis: 100%;
    max-width: 100%
}

.col-xs-offset-0 {
    margin-left: 0
}

.col-xs-offset-1 {
    margin-left: 8.33333333%
}

.col-xs-offset-2 {
    margin-left: 16.66666667%
}

.col-xs-offset-3 {
    margin-left: 25%
}

.col-xs-offset-4 {
    margin-left: 33.33333333%
}

.col-xs-offset-5 {
    margin-left: 41.66666667%
}

.col-xs-offset-6 {
    margin-left: 50%
}

.col-xs-offset-7 {
    margin-left: 58.33333333%
}

.col-xs-offset-8 {
    margin-left: 66.66666667%
}

.col-xs-offset-9 {
    margin-left: 75%
}

.col-xs-offset-10 {
    margin-left: 83.33333333%
}

.col-xs-offset-11 {
    margin-left: 91.66666667%
}

[dir=ltr] .start-xs {
    text-align: left
}

[dir=rtl] .start-xs {
    text-align: right
}

.start-xs {
    justify-content: flex-start
}

.center-xs {
    justify-content: center;
    text-align: center
}

[dir=ltr] .end-xs {
    text-align: right
}

[dir=rtl] .end-xs {
    text-align: left
}

.end-xs {
    justify-content: flex-end
}

.top-xs {
    align-items: flex-start
}

.middle-xs {
    align-items: center
}

.bottom-xs {
    align-items: flex-end
}

.around-xs {
    justify-content: space-around
}

.between-xs {
    justify-content: space-between
}

.first-xs {
    order: -1
}

.last-xs {
    order: 1
}

@media only screen and (min-width:36em) {
    .container-fixed {
        width: calc(36em + 1rem);
        width: var(--container-sm)
    }
    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-offset-0,
    .col-sm-offset-1,
    .col-sm-offset-2,
    .col-sm-offset-3,
    .col-sm-offset-4,
    .col-sm-offset-5,
    .col-sm-offset-6,
    .col-sm-offset-7,
    .col-sm-offset-8,
    .col-sm-offset-9,
    .col-sm-offset-10,
    .col-sm-offset-11,
    .col-sm-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 1rem;
        padding-right: var(--gutter-w);
        padding-left: 1rem;
        padding-left: var(--gutter-w)
    }
    .col-sm {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-sm-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-sm-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-sm-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-sm-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-sm-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-sm-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-sm-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-sm-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-sm-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-sm-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-sm-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-sm-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-sm-offset-0 {
        margin-left: 0
    }
    .col-sm-offset-1 {
        margin-left: 8.33333333%
    }
    .col-sm-offset-2 {
        margin-left: 16.66666667%
    }
    .col-sm-offset-3 {
        margin-left: 25%
    }
    .col-sm-offset-4 {
        margin-left: 33.33333333%
    }
    .col-sm-offset-5 {
        margin-left: 41.66666667%
    }
    .col-sm-offset-6 {
        margin-left: 50%
    }
    .col-sm-offset-7 {
        margin-left: 58.33333333%
    }
    .col-sm-offset-8 {
        margin-left: 66.66666667%
    }
    .col-sm-offset-9 {
        margin-left: 75%
    }
    .col-sm-offset-10 {
        margin-left: 83.33333333%
    }
    .col-sm-offset-11 {
        margin-left: 91.66666667%
    }
    [dir=ltr] .start-sm {
        text-align: left
    }
    [dir=rtl] .start-sm {
        text-align: right
    }
    .start-sm {
        justify-content: flex-start
    }
    .center-sm {
        justify-content: center;
        text-align: center
    }
    [dir=ltr] .end-sm {
        text-align: right
    }
    [dir=rtl] .end-sm {
        text-align: left
    }
    .end-sm {
        justify-content: flex-end
    }
    .top-sm {
        align-items: flex-start
    }
    .middle-sm {
        align-items: center
    }
    .bottom-sm {
        align-items: flex-end
    }
    .around-sm {
        justify-content: space-around
    }
    .between-sm {
        justify-content: space-between
    }
    .first-sm {
        order: -1
    }
    .last-sm {
        order: 1
    }
}

@media only screen and (min-width:48em) {
    .container-fixed {
        width: calc(48em + 1rem);
        width: var(--container-md)
    }
    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 1rem;
        padding-right: var(--gutter-w);
        padding-left: 1rem;
        padding-left: var(--gutter-w)
    }
    .col-md {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-md-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-md-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-md-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-md-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-md-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-md-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-md-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-md-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-md-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-md-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-md-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-md-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-md-offset-0 {
        margin-left: 0
    }
    .col-md-offset-1 {
        margin-left: 8.33333333%
    }
    .col-md-offset-2 {
        margin-left: 16.66666667%
    }
    .col-md-offset-3 {
        margin-left: 25%
    }
    .col-md-offset-4 {
        margin-left: 33.33333333%
    }
    .col-md-offset-5 {
        margin-left: 41.66666667%
    }
    .col-md-offset-6 {
        margin-left: 50%
    }
    .col-md-offset-7 {
        margin-left: 58.33333333%
    }
    .col-md-offset-8 {
        margin-left: 66.66666667%
    }
    .col-md-offset-9 {
        margin-left: 75%
    }
    .col-md-offset-10 {
        margin-left: 83.33333333%
    }
    .col-md-offset-11 {
        margin-left: 91.66666667%
    }
    [dir=ltr] .start-md {
        text-align: left
    }
    [dir=rtl] .start-md {
        text-align: right
    }
    .start-md {
        justify-content: flex-start
    }
    .center-md {
        justify-content: center;
        text-align: center
    }
    [dir=ltr] .end-md {
        text-align: right
    }
    [dir=rtl] .end-md {
        text-align: left
    }
    .end-md {
        justify-content: flex-end
    }
    .top-md {
        align-items: flex-start
    }
    .middle-md {
        align-items: center
    }
    .bottom-md {
        align-items: flex-end
    }
    .around-md {
        justify-content: space-around
    }
    .between-md {
        justify-content: space-between
    }
    .first-md {
        order: -1
    }
    .last-md {
        order: 1
    }
}

@media only screen and (min-width:62em) {
    .container-fixed {
        width: calc(62em + 1rem);
        width: var(--container-lg)
    }
    .col-lg,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-offset-0,
    .col-lg-offset-1,
    .col-lg-offset-2,
    .col-lg-offset-3,
    .col-lg-offset-4,
    .col-lg-offset-5,
    .col-lg-offset-6,
    .col-lg-offset-7,
    .col-lg-offset-8,
    .col-lg-offset-9,
    .col-lg-offset-10,
    .col-lg-offset-11,
    .col-lg-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 1rem;
        padding-right: var(--gutter-w);
        padding-left: 1rem;
        padding-left: var(--gutter-w)
    }
    .col-lg {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-lg-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-lg-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-lg-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-lg-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-lg-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-lg-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-lg-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-lg-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-lg-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-lg-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-lg-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-lg-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-lg-offset-0 {
        margin-left: 0
    }
    .col-lg-offset-1 {
        margin-left: 8.33333333%
    }
    .col-lg-offset-2 {
        margin-left: 16.66666667%
    }
    .col-lg-offset-3 {
        margin-left: 25%
    }
    .col-lg-offset-4 {
        margin-left: 33.33333333%
    }
    .col-lg-offset-5 {
        margin-left: 41.66666667%
    }
    .col-lg-offset-6 {
        margin-left: 50%
    }
    .col-lg-offset-7 {
        margin-left: 58.33333333%
    }
    .col-lg-offset-8 {
        margin-left: 66.66666667%
    }
    .col-lg-offset-9 {
        margin-left: 75%
    }
    .col-lg-offset-10 {
        margin-left: 83.33333333%
    }
    .col-lg-offset-11 {
        margin-left: 91.66666667%
    }
    [dir=ltr] .start-lg {
        text-align: left
    }
    [dir=rtl] .start-lg {
        text-align: right
    }
    .start-lg {
        justify-content: flex-start
    }
    .center-lg {
        justify-content: center;
        text-align: center
    }
    [dir=ltr] .end-lg {
        text-align: right
    }
    [dir=rtl] .end-lg {
        text-align: left
    }
    .end-lg {
        justify-content: flex-end
    }
    .top-lg {
        align-items: flex-start
    }
    .middle-lg {
        align-items: center
    }
    .bottom-lg {
        align-items: flex-end
    }
    .around-lg {
        justify-content: space-around
    }
    .between-lg {
        justify-content: space-between
    }
    .first-lg {
        order: -1
    }
    .last-lg {
        order: 1
    }
}

@media only screen and (min-width:75em) {
    .container-fixed {
        width: calc(75em + 1rem);
        width: var(--container-xl)
    }
    .col-xl,
    .col-xl-1,
    .col-xl-2,
    .col-xl-3,
    .col-xl-4,
    .col-xl-5,
    .col-xl-6,
    .col-xl-7,
    .col-xl-8,
    .col-xl-9,
    .col-xl-10,
    .col-xl-11,
    .col-xl-12,
    .col-xl-offset-0,
    .col-xl-offset-1,
    .col-xl-offset-2,
    .col-xl-offset-3,
    .col-xl-offset-4,
    .col-xl-offset-5,
    .col-xl-offset-6,
    .col-xl-offset-7,
    .col-xl-offset-8,
    .col-xl-offset-9,
    .col-xl-offset-10,
    .col-xl-offset-11,
    .col-xl-offset-12 {
        box-sizing: border-box;
        flex: 0 0 auto;
        padding-right: 1rem;
        padding-right: var(--gutter-w);
        padding-left: 1rem;
        padding-left: var(--gutter-w)
    }
    .col-xl {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 100%
    }
    .col-xl-1 {
        flex-basis: 8.33333333%;
        max-width: 8.33333333%
    }
    .col-xl-2 {
        flex-basis: 16.66666667%;
        max-width: 16.66666667%
    }
    .col-xl-3 {
        flex-basis: 25%;
        max-width: 25%
    }
    .col-xl-4 {
        flex-basis: 33.33333333%;
        max-width: 33.33333333%
    }
    .col-xl-5 {
        flex-basis: 41.66666667%;
        max-width: 41.66666667%
    }
    .col-xl-6 {
        flex-basis: 50%;
        max-width: 50%
    }
    .col-xl-7 {
        flex-basis: 58.33333333%;
        max-width: 58.33333333%
    }
    .col-xl-8 {
        flex-basis: 66.66666667%;
        max-width: 66.66666667%
    }
    .col-xl-9 {
        flex-basis: 75%;
        max-width: 75%
    }
    .col-xl-10 {
        flex-basis: 83.33333333%;
        max-width: 83.33333333%
    }
    .col-xl-11 {
        flex-basis: 91.66666667%;
        max-width: 91.66666667%
    }
    .col-xl-12 {
        flex-basis: 100%;
        max-width: 100%
    }
    .col-xl-offset-0 {
        margin-left: 0
    }
    .col-xl-offset-1 {
        margin-left: 8.33333333%
    }
    .col-xl-offset-2 {
        margin-left: 16.66666667%
    }
    .col-xl-offset-3 {
        margin-left: 25%
    }
    .col-xl-offset-4 {
        margin-left: 33.33333333%
    }
    .col-xl-offset-5 {
        margin-left: 41.66666667%
    }
    .col-xl-offset-6 {
        margin-left: 50%
    }
    .col-xl-offset-7 {
        margin-left: 58.33333333%
    }
    .col-xl-offset-8 {
        margin-left: 66.66666667%
    }
    .col-xl-offset-9 {
        margin-left: 75%
    }
    .col-xl-offset-10 {
        margin-left: 83.33333333%
    }
    .col-xl-offset-11 {
        margin-left: 91.66666667%
    }
    [dir=ltr] .start-xl {
        text-align: left
    }
    [dir=rtl] .start-xl {
        text-align: right
    }
    .start-xl {
        justify-content: flex-start
    }
    .center-xl {
        justify-content: center;
        text-align: center
    }
    [dir=ltr] .end-xl {
        text-align: right
    }
    [dir=rtl] .end-xl {
        text-align: left
    }
    .end-xl {
        justify-content: flex-end
    }
    .top-xl {
        align-items: flex-start
    }
    .middle-xl {
        align-items: center
    }
    .bottom-xl {
        align-items: flex-end
    }
    .around-xl {
        justify-content: space-around
    }
    .between-xl {
        justify-content: space-between
    }
    .first-xl {
        order: -1
    }
    .last-xl {
        order: 1
    }
}

@-webkit-keyframes a {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes a {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes b {
    0% {
        opacity: 0;
        transform: translate3d(0, -50%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes b {
    0% {
        opacity: 0;
        transform: translate3d(0, -50%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes c {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes c {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes d {
    0% {
        opacity: 0;
        transform: translate3d(50%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes d {
    0% {
        opacity: 0;
        transform: translate3d(50%, 0, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes e {
    0% {
        opacity: 0;
        transform: translate3d(0, 50%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes e {
    0% {
        opacity: 0;
        transform: translate3d(0, 50%, 0)
    }
    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@-webkit-keyframes f {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes f {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.alert {
    position: relative;
    background-color: #fff;
    background-color: var(--color-bg);
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    font-weight: 500;
    font-weight: var(--font-weight-500);
    padding: 2em;
    padding: var(--gap-lg);
    border: 3px solid #666;
    border: 3px solid var(--color-text-acc-3);
    margin-top: 1em;
    margin-top: var(--gap);
    margin-bottom: 2em;
    margin-bottom: var(--gap-lg);
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.alert.info {
    border-color: #259eef;
    border-color: var(--color-info)
}

.alert.warning {
    border-color: #fddc58;
    border-color: var(--color-warning)
}

.alert.error {
    border-color: #fc365e;
    border-color: var(--color-error)
}

.alert.success {
    border-color: #48c774;
    border-color: var(--color-success)
}

.announcements {
    position: relative
}

.announce--toggle {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    outline: none
}

.announce--toggle:active,
.announce--toggle:focus,
.announce--toggle:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary);
    cursor: pointer
}

.announce--toggle.focus-visible,
.announce--toggle:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.announce--toggle:after {
    position: absolute;
    width: 11px;
    height: 11px;
    content: "";
    right: 6px;
    top: 3px;
    background-color: #fc365e;
    background-color: var(--color-error);
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    border: 2px solid #fff;
    border: 2px solid var(--color-bg)
}

.announce-feed {
    position: absolute;
    right: 0;
    top: 2.5em;
    min-width: 18rem;
    background-color: #fff;
    background-color: var(--color-bg);
    flex-direction: column;
    cursor: auto;
    border-radius: 2px;
    border-radius: var(--global-radius);
    box-shadow: 0 0 0 1px #f2f2f2, 0 10px 20px 5px rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 1px var(--color-border), 0 10px 20px 5px rgba(0, 0, 0, .1);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px)
}

.announce-feed.is-active,
.announce-feed[focus-within] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.announce-feed.is-active,
.announce-feed:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.announce-post {
    display: block;
    padding: 1em;
    padding: var(--gap);
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border);
    line-height: 1.2
}

.announce-post:last-of-type {
    border-bottom: none
}

.announce-post:active,
.announce-post:focus,
.announce-post:hover {
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1)
}

.announce-post:active span,
.announce-post:focus span,
.announce-post:hover span {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.announce-post.focus-visible,
.announce-post:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.announce-post__title {
    font-size: .95rem;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    margin-bottom: .4rem
}

.announce-post__description {
    font-size: .9rem;
    margin-bottom: .4rem
}

.announce-post span {
    font-size: .9rem;
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.page-archive .hero__content {
    margin-bottom: 0
}

.page-archive .hero__figure {
    margin-top: 1em;
    margin-top: var(--gap)
}

.archive-post {
    padding: 1.5em 1em;
    padding: 1.5em var(--gap);
    background-color: #fff;
    background-color: var(--color-bg);
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border);
    display: flex
}

.archive-post-label {
    font-size: 1.4rem
}

.archive-post time {
    font-size: .8rem;
    padding: .25em .5em;
    padding: var(--gap-xs) var(--gap-sm);
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2);
    border-radius: 2px;
    border-radius: var(--global-radius);
    min-width: 6rem;
    max-height: 1.6rem;
    text-align: center;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    margin: 0 1em 0 0;
    margin-right: var(--gap)
}

.archive-post__title {
    font-size: 1.1rem
}

.archive-post a:hover {
    text-decoration: underline
}

.post-date-2014+.post-date-2014 .archive-post-label,
.post-year-2015+.post-year-2015 .archive-post-label,
.post-year-2016+.post-year-2016 .archive-post-label,
.post-year-2017+.post-year-2017 .archive-post-label,
.post-year-2018+.post-year-2018 .archive-post-label,
.post-year-2019+.post-year-2019 .archive-post-label,
.post-year-2020+.post-year-2020 .archive-post-label,
.post-year-2021+.post-year-2021 .archive-post-label,
.post-year-2022+.post-year-2022 .archive-post-label,
.post-year-2023+.post-year-2023 .archive-post-label,
.post-year-2024+.post-year-2024 .archive-post-label,
.post-year-2025+.post-year-2025 .archive-post-label {
    display: none
}

.author-card__media {
    display: block;
    width: 120px;
    height: 120px;
    min-width: 0;
    margin: 0 auto;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    box-shadow: 0 0 0 3px #f0f0f0;
    box-shadow: 0 0 0 3px var(--color-bg-acc-3);
    overflow: hiden
}

.author-card__media .name-letter {
    position: absolute;
    font-size: 3.2rem;
    max-height: 5rem;
    overflow: hidden;
    color: grey;
    color: var(--color-neutral)
}

.author-card a.author-card__media:active,
.author-card a.author-card__media:focus,
.author-card a.author-card__media:hover {
    box-shadow: 0 0 0 3px grey;
    box-shadow: 0 0 0 3px var(--color-neutral)
}

.author-card a.author-card__media.focus-visible,
.author-card a.author-card__media:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.author-card__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    align-self: center;
    border-radius: inherit
}

.author-card__social {
    align-items: center
}

.author-card__social a {
    padding: .5em;
    padding: var(--gap-sm);
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2);
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    margin-right: .5em;
    margin-right: var(--gap-sm);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.author-card__social a:active,
.author-card__social a:focus,
.author-card__social a:hover {
    background-color: transparent;
    box-shadow: 0 0 0 1px var(--ghost-accent-color, #7450f7);
    box-shadow: 0 0 0 1px #7450f7;
    box-shadow: 0 0 0 1px var(--color-primary);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.author-card__social a.focus-visible,
.author-card__social a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.author-card__descr,
.author-card__title {
    text-align: center
}

@media only screen and (min-width:48em) {
    .author-card__descr,
    .author-card__title {
        text-align: left
    }
}

.author-card__title {
    font-size: 1.4rem
}

.author-card__name {
    display: block;
    font-size: 1.2rem
}

.author-card__name:active,
.author-card__name:focus,
.author-card__name:hover {
    text-decoration: underline
}

.author-card__name.focus-visible,
.author-card__name:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.author-card__content {
    max-width: 35rem
}

.author-card[data-type=hero],
.author-card[data-type=hero]:active,
.author-card[data-type=hero]:focus,
.author-card[data-type=hero]:hover,
.author-card[data-type=post-mini],
.author-card[data-type=post-mini]:active,
.author-card[data-type=post-mini]:focus,
.author-card[data-type=post-mini]:hover,
.author-card[data-type=post],
.author-card[data-type=post]:active,
.author-card[data-type=post]:focus,
.author-card[data-type=post]:hover {
    box-shadow: none
}

.author-card[data-type=hero].focus-visible,
.author-card[data-type=hero]:focus-visible,
.author-card[data-type=post-mini].focus-visible,
.author-card[data-type=post-mini]:focus-visible,
.author-card[data-type=post].focus-visible,
.author-card[data-type=post]:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.author-card[data-type=mini],
.author-card[data-type=post-mini] {
    display: flex
}

.author-card[data-type=mini] .author-card__media,
.author-card[data-type=post-mini] .author-card__media {
    width: 72px;
    height: 72px;
    margin-right: 1em;
    margin-right: var(--gap)
}

.author-card[data-type=mini] .author-card__media .name-letter,
.author-card[data-type=post-mini] .author-card__media .name-letter {
    font-size: 2rem;
    max-height: 3rem
}

@media only screen and (min-width:48em) {
    .author-card[data-type=hero],
    .author-card[data-type=post] {
        display: flex;
        align-items: center
    }
}

.author-card[data-type=hero] .author-card__media,
.author-card[data-type=post] .author-card__media {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

@media only screen and (min-width:48em) {
    .author-card[data-type=hero] .author-card__media,
    .author-card[data-type=post] .author-card__media {
        margin: 0 2em 0 0;
        margin-right: var(--gap-lg)
    }
}

.author-card.no-img[data-type=hero] .author-card__media {
    display: none
}

.author-card[data-type=post] .author-card__media {
    width: 86px;
    height: 86px
}

.author-card[data-type=post] .author-card__media .name-letter {
    font-size: 2.6rem
}

.author-card[data-type=post] .author-card__details {
    justify-content: center
}

@media only screen and (min-width:48em) {
    .author-card[data-type=post] .author-card__details {
        justify-content: flex-start
    }
}

.author-card[data-type=post] .author-card__name {
    text-align: center
}

@media only screen and (min-width:48em) {
    .author-card[data-type=post] .author-card__name {
        text-align: left
    }
}

.author-card[data-type=post-mini] {
    flex-direction: column;
    padding-bottom: 0;
    padding-left: .5em;
    padding-left: var(--gap-sm);
    padding-right: .5em;
    padding-right: var(--gap-sm)
}

.author-card[data-type=post-mini] .author-card__media {
    margin-right: 0;
    margin-bottom: .5em;
    margin-bottom: var(--gap-sm)
}

.author-card[data-type=post-mini] .author-card__name {
    text-align: center
}

.author-mini {
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.author-mini,
.author-mini__item {
    display: flex;
    align-items: center
}

.author-mini__item {
    width: 30px;
    height: 30px;
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1);
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    position: relative;
    box-shadow: 0 0 0 3px #f0f0f0;
    box-shadow: 0 0 0 3px var(--color-bg-acc-3);
    justify-content: center
}

.author-mini__item.nr-1 {
    z-index: 11
}

.author-mini__item.nr-2 {
    z-index: 12
}

.author-mini__item.nr-3 {
    z-index: 13
}

.author-mini__item img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    position: relative;
    z-index: 3
}

.author-mini__item .icon {
    margin: 5px;
    color: #666;
    color: var(--color-text-acc-3);
    position: relative;
    z-index: 2
}

.author-mini__item:active,
.author-mini__item:focus,
.author-mini__item:hover {
    z-index: 15;
    box-shadow: 0 0 0 3px grey;
    box-shadow: 0 0 0 3px var(--color-neutral)
}

.author-mini__item:active .author-mini__tooltip,
.author-mini__item:focus .author-mini__tooltip,
.author-mini__item:hover .author-mini__tooltip {
    opacity: 1;
    transform: translateY(0)
}

.author-mini__item.focus-visible,
.author-mini__item:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.author-mini__tooltip {
    position: absolute;
    top: -35px;
    right: 0;
    white-space: pre;
    font-size: .75rem;
    background-color: #1a1a1a;
    background-color: var(--color-bg-reverse);
    color: #e6e6e6;
    color: var(--color-text-reverse);
    padding: .25em .5em;
    padding: var(--gap-xs) var(--gap-sm);
    opacity: 0;
    transition: all .4s ease-in-out;
    transition: all var(--trans-default);
    transform: translateY(6px);
    pointer-events: none;
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.author-mini__letter {
    position: relative;
    font-size: 1.2rem;
    color: grey;
    color: var(--color-neutral);
    z-index: 1;
    overflow: hidden
}

.author-mini__letter,
.name-letter {
    font-weight: 600;
    font-weight: var(--font-weight-600);
    font-family: Lucida Console, Monaco, monospace;
    font-family: var(--font-mono);
    max-width: 1ch;
    max-height: 100%;
    letter-spacing: 1em
}

.name-letter {
    overflow: visible
}

.bookmarks {
    padding: 0 1em;
    padding: 0 var(--gap);
    background-color: #fff;
    background-color: var(--color-bg)
}

.bookmark-post button {
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.bookmark-post__action:active,
.bookmark-post__action:focus,
.bookmark-post__action:hover {
    color: #fc365e;
    color: var(--color-error)
}

.bookmark-post__action.focus-visible,
.bookmark-post__action:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.bookmark-post__title {
    display: block
}

.bookmark-post a {
    border: none!important;
    color: #4d4d4d!important;
    color: var(--color-text-acc-2)!important
}

.bookmark-post:active a,
.bookmark-post:focus a,
.bookmark-post:hover a {
    text-decoration: underline
}

.bookmark-post:active button,
.bookmark-post:focus button,
.bookmark-post:hover button {
    opacity: 1;
    visibility: visible
}

.bookmark-post.focus-visible,
.bookmark-post:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.social-share .handle-bookmark:active,
.social-share .handle-bookmark:focus,
.social-share .handle-bookmark:hover {
    border-color: #48c774;
    border-color: var(--color-success);
    color: #48c774;
    color: var(--color-success)
}

.social-share .handle-bookmark.focus-visible,
.social-share .handle-bookmark:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.social-share .handle-bookmark.is-saved {
    border-color: #48c774;
    border-color: var(--color-success);
    color: #48c774;
    color: var(--color-success)
}

.social-share .handle-bookmark.is-saved:active,
.social-share .handle-bookmark.is-saved:focus,
.social-share .handle-bookmark.is-saved:hover {
    border-color: #fc365e;
    border-color: var(--color-error);
    color: #fc365e;
    color: var(--color-error)
}

.social-share .handle-bookmark.is-saved.focus-visible,
.social-share .handle-bookmark.is-saved:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn {
    color: inherit;
    font-weight: 600;
    font-weight: var(--font-weight-600);
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans);
    font-size: .9rem;
    letter-spacing: .025rem;
    letter-spacing: calc(var(--font-size-base)*0.025);
    line-height: 1;
    background-color: transparent;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    text-transform: uppercase;
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: 1px solid #4d4d4d;
    border: 1px solid var(--color-text-acc-2);
    border-radius: 2px;
    border-radius: var(--global-radius);
    padding: .75rem 1.5rem
}

.btn:active,
.btn:focus,
.btn:hover {
    color: #1a1a1a;
    color: var(--color-text);
    border-color: #1a1a1a;
    border-color: var(--color-text)
}

.btn.focus-visible,
.btn:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--xs {
    font-size: .8rem
}

.btn--sm {
    font-size: .9rem
}

.btn--lg {
    font-size: 1.2rem
}

.btn--xl {
    font-size: 1.4rem
}

.btn--rounded {
    border-radius: 3rem
}

.btn--wide {
    padding: 1em 4em;
    padding: var(--gap) var(--gap-xl)
}

.btn--full {
    width: 100%
}

.btn--opac {
    background: transparent
}

.btn--dark {
    background-color: #333;
    background-color: var(--color-dark-acc)
}

.btn--dark,
.btn--dark:active,
.btn--dark:focus,
.btn--dark:hover {
    border-color: #333;
    border-color: var(--color-dark-acc);
    color: #e6e6e6;
    color: var(--color-light)
}

.btn--dark:active,
.btn--dark:focus,
.btn--dark:hover {
    background-color: #1a1a1a;
    background-color: var(--color-dark);
    box-shadow: none
}

.btn--dark.focus-visible,
.btn--dark:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--light {
    background-color: #e6e6e6;
    background-color: var(--color-light)
}

.btn--light,
.btn--light:active,
.btn--light:focus,
.btn--light:hover {
    border-color: #e6e6e6;
    border-color: var(--color-light);
    color: #1a1a1a;
    color: var(--color-dark)
}

.btn--light:active,
.btn--light:focus,
.btn--light:hover {
    background-color: #fff;
    background-color: var(--color-white);
    box-shadow: none
}

.btn--light.focus-visible,
.btn--light:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--brand {
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary);
    border-color: #7450f7;
    border-color: var(--color-primary);
    color: #fff;
    color: var(--color-white)
}

.btn--brand:active,
.btn--brand:focus,
.btn--brand:hover {
    background-color: #6841f6;
    background-color: var(--color-primary-dark);
    border-color: #6841f6;
    border-color: var(--color-primary-dark);
    color: #fff;
    color: var(--color-white);
    box-shadow: none
}

.btn--brand.focus-visible,
.btn--brand:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--primary {
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary);
    border-color: #7450f7;
    border-color: var(--color-primary);
    color: #fff;
    color: var(--color-white)
}

.btn--primary:active,
.btn--primary:focus,
.btn--primary:hover {
    background-color: #6841f6;
    background-color: var(--color-primary-dark);
    border-color: #6841f6;
    border-color: var(--color-primary-dark);
    color: #fff;
    color: var(--color-white);
    box-shadow: none
}

.btn--primary.focus-visible,
.btn--primary:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--secondary {
    background-color: #f7844a;
    background-color: var(--color-secondary-light);
    border-color: #f7844a;
    border-color: var(--color-secondary-light);
    color: #1a1a1a;
    color: var(--color-dark)
}

.btn--secondary:active,
.btn--secondary:focus,
.btn--secondary:hover {
    background-color: #f77a3b;
    background-color: var(--color-secondary);
    border-color: #f77a3b;
    border-color: var(--color-secondary);
    color: #1a1a1a;
    color: var(--color-dark);
    box-shadow: none
}

.btn--secondary.focus-visible,
.btn--secondary:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--filled {
    background-color: #333;
    background-color: var(--color-text-acc-1);
    color: #e6e6e6;
    color: var(--color-text-reverse)
}

.btn--filled:active,
.btn--filled:focus,
.btn--filled:hover {
    background-color: #1a1a1a;
    background-color: var(--color-text);
    color: #e6e6e6;
    color: var(--color-text-reverse)
}

.btn--filled.focus-visible,
.btn--filled:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--bordered {
    background-color: transparent;
    color: #666;
    color: var(--color-text-acc-3)
}

.btn--bordered:active,
.btn--bordered:focus,
.btn--bordered:hover {
    background-color: transparent;
    box-shadow: 0 0 0 1px #666;
    box-shadow: 0 0 0 1px var(--color-text-acc-3)
}

.btn--bordered.focus-visible,
.btn--bordered:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--bordered.btn--brand {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.btn--bordered.btn--brand:active,
.btn--bordered.btn--brand:focus,
.btn--bordered.btn--brand:hover {
    background-color: transparent;
    box-shadow: 0 0 0 1px var(--ghost-accent-color, #7450f7);
    box-shadow: 0 0 0 1px #7450f7;
    box-shadow: 0 0 0 1px var(--color-primary)
}

.btn--bordered.btn--brand.focus-visible,
.btn--bordered.btn--brand:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--bordered.btn--snd {
    color: #f77a3b;
    color: var(--color-secondary)
}

.btn--bordered.btn--snd:active,
.btn--bordered.btn--snd:focus,
.btn--bordered.btn--snd:hover {
    background-color: transparent;
    box-shadow: 0 0 0 1px #f77a3b;
    box-shadow: 0 0 0 1px var(--color-secondary)
}

.btn--bordered.btn--snd.focus-visible,
.btn--bordered.btn--snd:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--bordered.btn--dark {
    color: #1a1a1a;
    color: var(--color-dark)
}

.btn--bordered.btn--dark:active,
.btn--bordered.btn--dark:focus,
.btn--bordered.btn--dark:hover {
    background-color: transparent;
    box-shadow: 0 0 0 1px #1a1a1a;
    box-shadow: 0 0 0 1px var(--color-dark)
}

.btn--bordered.btn--dark.focus-visible,
.btn--bordered.btn--dark:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--shadow {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .05);
    transition: box-shadow .4s ease-in-out;
    transition: box-shadow var(--trans-default)
}

.btn--shadow:active,
.btn--shadow:focus,
.btn--shadow:hover {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1)
}

.btn--shadow.focus-visible,
.btn--shadow:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn--disabled,
.btn[disabled] {
    cursor: not-allowed;
    opacity: .6
}

.btn.is-loading,
.btn.loading {
    position: relative;
    color: transparent!important;
    pointer-events: none
}

.btn.is-loading:after,
.btn.loading:after {
    content: "";
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    top: 50%;
    left: 50%;
    border: 2px solid #fff;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    border-right-color: transparent!important;
    border-top-color: transparent!important;
    z-index: 1;
    -webkit-animation: f .4s linear infinite;
    animation: f .4s linear infinite;
    -webkit-animation: f var(--trans-duration) infinite linear;
    animation: f var(--trans-duration) infinite linear
}

.btn.btn--bordered:after {
    border-color: #1a1a1a;
    border-color: var(--color-text)
}

.btn.btn--bordered.btn--brand:after,
.btn.btn--bordered.btn--primary:after {
    border-color: #7450f7;
    border-color: var(--color-primary)
}

.btn.btn--bordered.btn--secondary:after {
    border-color: #f77a3b;
    border-color: var(--color-secondary)
}

.js-load-more[disabled] {
    display: none
}

.btn-toggle-round {
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default);
    box-shadow: inset 0 0 0 2px #f2f2f2;
    box-shadow: inset 0 0 0 2px var(--color-border);
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    background-color: #fff;
    background-color: var(--color-bg)
}

.btn-toggle-round:active,
.btn-toggle-round:focus,
.btn-toggle-round:hover {
    outline: none
}

.btn-toggle-round.focus-visible,
.btn-toggle-round:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.card {
    padding: 1em;
    padding: var(--gap);
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius);
    transition: transform .4s ease-in-out, box-shadow .4s ease-in-out;
    transition: transform var(--trans-default), box-shadow var(--trans-default);
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .02)
}

.card:active,
.card:focus,
.card:hover {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1)
}

.card.focus-visible,
.card:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.comments .subscribe-form .subscribe-box {
    display: flex;
    flex-direction: column
}

.comments .subscribe-form .cove-input {
    margin-right: 0!important;
    margin-bottom: 1em!important;
    margin-bottom: var(--gap)!important
}

.comments .cove-comment {
    margin-top: 0
}

.tns-outer {
    padding: 0!important
}

.tns-outer [hidden] {
    display: none!important
}

.tns-outer [aria-controls],
.tns-outer [data-action] {
    cursor: pointer
}

.tns-slider {
    transition: all 0s
}

.tns-slider>.tns-item {
    box-sizing: border-box
}

.tns-horizontal.tns-subpixel {
    white-space: nowrap
}

.tns-horizontal.tns-subpixel>.tns-item {
    display: inline-block;
    vertical-align: top;
    white-space: normal
}

.tns-horizontal.tns-no-subpixel:after {
    content: "";
    display: table;
    clear: both
}

.tns-horizontal.tns-no-subpixel>.tns-item {
    float: left
}

.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item {
    margin-right: -100%
}

.tns-gallery,
.tns-no-calc {
    position: relative;
    left: 0
}

.tns-gallery {
    min-height: 1px
}

.tns-gallery>.tns-item {
    position: absolute;
    left: -100%;
    transition: transform 0s, opacity 0s
}

.tns-gallery>.tns-slide-active {
    position: relative;
    left: auto!important
}

.tns-gallery>.tns-moving {
    transition: all .25s
}

.tns-autowidth {
    display: inline-block
}

.tns-lazy-img {
    transition: opacity .6s;
    opacity: .6
}

.tns-lazy-img.tns-complete {
    opacity: 1
}

.tns-ah {
    transition: height 0s
}

.tns-ovh {
    overflow: hidden
}

.tns-visually-hidden {
    position: absolute;
    left: -10000em
}

.tns-transparent {
    opacity: 0;
    visibility: hidden
}

.tns-fadeIn {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 0
}

.tns-fadeOut,
.tns-normal {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: -1
}

.tns-vpfix {
    white-space: nowrap
}

.tns-vpfix>div,
.tns-vpfix>li {
    display: inline-block
}

.tns-t-subp2 {
    margin: 0 auto;
    width: 310px;
    position: relative;
    height: 10px;
    overflow: hidden
}

.tns-t-ct {
    width: 2333.3333333%;
    width: 2333.33333%;
    position: absolute;
    right: 0
}

.tns-t-ct:after {
    content: "";
    display: table;
    clear: both
}

.tns-t-ct>div {
    width: 1.4285714%;
    width: 1.42857%;
    height: 10px;
    float: left
}

.featured-wrapper {
    padding: 1em;
    padding: var(--gap)
}

@media only screen and (min-width:48em) {
    .featured-wrapper {
        padding: 2em;
        padding: var(--gap-lg)
    }
}

.featured-descr i {
    margin-left: .4em;
    color: #ffd900;
    color: var(--color-gold);
    fill: #ffd900;
    fill: var(--color-gold)
}

.featured-control button:active,
.featured-control button:focus,
.featured-control button:hover {
    outline: none;
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.featured-control button.focus-visible,
.featured-control button:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.featured-feed {
    display: none
}

.featured-feed.tns-slider {
    display: block
}

.featured-card a:active,
.featured-card a:focus,
.featured-card a:hover {
    text-decoration: underline
}

.featured-card a.focus-visible,
.featured-card a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.filter-bar {
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius);
    position: relative
}

.filter-bar .btn--grid,
.filter-bar .btn--list {
    color: #666;
    color: var(--color-text-acc-3);
    border-radius: 2px;
    border-radius: var(--global-radius);
    display: none
}

@media only screen and (min-width:48em) {
    .filter-bar .btn--grid,
    .filter-bar .btn--list {
        display: block
    }
}

.filter-bar .btn--grid:active,
.filter-bar .btn--grid:focus,
.filter-bar .btn--grid:hover,
.filter-bar .btn--list:active,
.filter-bar .btn--list:focus,
.filter-bar .btn--list:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary);
    outline: none
}

.filter-bar .btn--grid.focus-visible,
.filter-bar .btn--grid:focus-visible,
.filter-bar .btn--list.focus-visible,
.filter-bar .btn--list:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.filter-btn {
    position: relative;
    max-width: 100%
}

.filter-btn label {
    left: .75em;
    color: #666;
    color: var(--color-text-acc-3)
}

.filter-btn label i,
.filter-text {
    display: none
}

.filter-text.is-active {
    display: block
}

.filter-select {
    display: none;
    max-width: 100%;
    height: 36px;
    padding: 6px 1em;
    padding: 6px var(--gap);
    padding-left: 2.5em;
    padding-right: 2.5em;
    border: none;
    box-shadow: none;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2);
    width: auto;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, grey 0), linear-gradient(135deg, grey 50%, transparent 0);
    background-position: calc(100% - 20px) calc(.85em + 2px), calc(100% - 15px) calc(.85em + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat
}

.filter-select:active,
.filter-select:focus,
.filter-select:hover {
    box-shadow: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--ghost-accent-color, #7450f7) 0), linear-gradient(135deg, var(--ghost-accent-color, #7450f7) 50%, transparent 0);
    background-image: linear-gradient(45deg, transparent 50%, #7450f7 0), linear-gradient(135deg, #7450f7 50%, transparent 0);
    background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 0), linear-gradient(135deg, var(--color-primary) 50%, transparent 0)
}

.filter-select:active,
.filter-select:active+label i,
.filter-select:focus,
.filter-select:focus+label i,
.filter-select:hover,
.filter-select:hover+label i {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.filter-select.focus-visible,
.filter-select:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px;
    outline: none
}

.filter-select.is-active {
    display: flex
}

.filter-select.is-active+label {
    position: absolute
}

.filter-select.is-active+label i {
    display: block
}

[data-view-type=grid] .btn--grid,
[data-view-type=list] .btn--list {
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2)
}

.footer {
    background-color: #fff;
    background-color: var(--color-bg);
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border)
}

.footer .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #666;
    color: var(--color-text-acc-3)
}

.footer__title {
    font-size: 1.2rem;
    font-weight: 600;
    font-weight: var(--font-weight-600)
}

.footer__sub-text {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

@media only screen and (min-width:48em) {
    .footer__sub-text {
        margin-bottom: 0
    }
}

.footer__sub-action {
    height: 100%
}

@media only screen and (min-width:48em) {
    .footer__sub-action {
        align-items: center;
        justify-content: flex-end
    }
}

.footer__bottom a:active,
.footer__bottom a:focus,
.footer__bottom a:hover,
.footer__top a:active,
.footer__top a:focus,
.footer__top a:hover {
    text-decoration: underline
}

.footer__bottom a.focus-visible,
.footer__bottom a:focus-visible,
.footer__top a.focus-visible,
.footer__top a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.footer__bottom {
    max-height: 60px;
    padding: 1em 0;
    padding: var(--gap) 0;
    font-size: .9rem
}

.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 2em;
    margin: 0 0 var(--gap-lg);
    min-width: 100%;
    max-width: 100%
}

.kg-embed-card figcaption {
    margin: .5em 0 0;
    margin: var(--gap-sm) 0 0;
    color: #666;
    color: var(--color-text-acc-3)
}

.kg-embed-card .fluid-width-video-wrapper {
    margin: 0
}

.kg-embed-card iframe {
    max-width: 100%
}

.kg-gallery-card,
.kg-image-card {
    align-self: center;
    margin: 0 0 2em;
    margin: 0 0 var(--gap-lg)
}

.kg-gallery-card figcaption,
.kg-image-card figcaption {
    padding: .5em;
    padding: var(--gap-sm);
    color: #666;
    color: var(--color-text-acc-3);
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    font-weight: var(--font-weight-600);
    font-style: italic
}

.kg-gallery-card .kg-gallery-container,
.kg-image-card img {
    max-width: 100vw;
    display: block;
    margin: 0 auto;
    height: auto
}

@media only screen and (min-width:48em) {
    .kg-image-card img {
        max-width: 100%
    }
    .kg-image-wide img,
    .kg-width-wide img {
        max-width: 80vw
    }
    .kg-image-full img,
    .kg-width-full img {
        max-width: 100vw
    }
}

@media only screen and (min-width:62em) {
    .kg-image-wide img,
    .kg-width-wide img {
        max-width: 70vw
    }
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

@media only screen and (min-width:48em) {
    .kg-gallery-container {
        width: 80vw;
        max-width: 80vw
    }
}

@media only screen and (min-width:62em) {
    .kg-gallery-container {
        width: 70vw;
        max-width: 70vw
    }
}

.post-with-sidebar .kg-gallery-container {
    width: 100%;
    max-width: none
}

.post-with-sidebar .kg-image-card img {
    max-width: 100%
}

.post-with-sidebar .kg-gallery-card,
.post-with-sidebar .kg-image-card {
    width: 100%
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%
}

.kg-gallery-row:not(:first-of-type) {
    margin: .5em 0 0;
    margin: var(--gap-sm) 0 0 0
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 .5em;
    margin: 0 0 0 var(--gap-sm)
}

.kg-bookmark-card {
    background-color: #fff;
    background-color: var(--color-bg);
    width: 100%;
    margin: 0 0 2em;
    margin-bottom: var(--gap-lg)
}

.kg-bookmark-card:active .kg-bookmark-title,
.kg-bookmark-card:focus .kg-bookmark-title,
.kg-bookmark-card:hover .kg-bookmark-title {
    text-decoration: underline
}

.kg-bookmark-card.focus-visible,
.kg-bookmark-card:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.kg-card+.kg-bookmark-card {
    margin-top: 0
}

.kg-bookmark-container {
    display: flex;
    text-decoration: none;
    min-height: 148px;
    box-shadow: 0 0 0 1px #f2f2f2;
    box-shadow: 0 0 0 1px var(--color-border);
    border-radius: 2px;
    border-radius: var(--global-radius);
    flex-direction: column-reverse
}

@media only screen and (min-width:36em) {
    .kg-bookmark-container {
        flex-direction: row
    }
}

.kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px
}

.kg-bookmark-title {
    font-weight: 700;
    font-weight: var(--font-weight-700);
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

.kg-bookmark-description {
    overflow-y: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .9rem;
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

.kg-bookmark-thumbnail {
    position: relative;
    min-width: 33%;
    max-height: 100%;
    overflow: hidden;
    padding-top: 56.25%
}

@media only screen and (min-width:36em) {
    .kg-bookmark-thumbnail {
        padding-top: 0
    }
}

.kg-bookmark-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0 2px 2px 0;
    border-radius: 0 var(--global-radius) var(--global-radius) 0;
    margin: 0
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: .9rem;
    font-weight: 600;
    font-weight: var(--font-weight-600)
}

.kg-bookmark-icon {
    width: 1.5em;
    width: calc(var(--gap)*1.5);
    height: 1.5em;
    height: calc(var(--gap)*1.5);
    margin: 0 .5em 0 0;
    margin-right: var(--gap-sm)
}

.kg-bookmark-author:after {
    content: "•";
    margin: 0 .5em;
    margin: 0 var(--gap-sm)
}

.kg-bookmark-publisher {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px
}

.kg-code-card {
    max-width: 100%;
    margin: 0 0 2em;
    margin-bottom: var(--gap-lg)
}

.kg-code-card pre {
    margin-bottom: .5em;
    margin-bottom: var(--gap-sm)
}

.kg-code-card figcaption {
    text-align: center;
    font-size: .9rem;
    color: #666;
    color: var(--color-text-acc-3);
    font-style: italic
}

.header {
    z-index: 50;
    top: 0;
    background-color: #fff;
    background-color: var(--color-bg);
    width: 100%;
    position: static;
    position: var(--global-header-position);
    box-shadow: 0 0 0 1px #f2f2f2;
    box-shadow: 0 0 0 1px var(--color-border)
}

.header__left {
    height: 60px;
    flex: 1;
    padding-right: 0
}

@media only screen and (min-width:48em) {
    .header__left {
        max-width: 14rem;
        border-right: 1px solid #f2f2f2;
        border-right: 1px solid var(--color-border);
        padding-right: 1em;
        padding-right: var(--gap)
    }
    .header__left .header__search--toggle {
        display: none
    }
}

.header__search {
    padding: .5em 1em;
    padding: var(--gap-sm) var(--gap);
    background-color: #f6f7f9;
    background-color: var(--color-bg-body);
    border-radius: 2em
}

.header__search input {
    font-size: .9rem
}

.header__center.is-active~.header__right .announcements,
.header__center.is-active~.header__right .header__user {
    display: none
}

.header__center {
    display: none;
    position: relative
}

.header__center .search__icon {
    outline: none
}

.header__center.is-active {
    position: absolute;
    height: 60px;
    display: flex;
    background: #fff;
    background: var(--color-bg);
    width: 70%;
    padding-left: 1em;
    padding-left: var(--gap)
}

.header__center.is-active .search__input:not(:-moz-placeholder-shown)+.search__cancel {
    display: none
}

.header__center.is-active .search__input:not(:-ms-input-placeholder)+.search__cancel {
    display: none
}

.header__center.is-active .search__icon,
.header__center.is-active .search__input:not(:placeholder-shown)+.search__cancel {
    display: none
}

@media only screen and (min-width:36em) {
    .header__center.is-active {
        width: 50%
    }
}

@media only screen and (min-width:48em) {
    .header__center.is-active {
        position: relative
    }
    .header__center.is-active .search__input:not(:-moz-placeholder-shown)+.search__cancel {
        display: block
    }
    .header__center.is-active .search__input:not(:-ms-input-placeholder)+.search__cancel {
        display: block
    }
    .header__center.is-active .search__icon,
    .header__center.is-active .search__input:not(:placeholder-shown)+.search__cancel {
        display: block
    }
}

@media only screen and (min-width:48em) {
    .header__center {
        display: flex
    }
}

.header__right {
    display: flex;
    flex: 0;
    padding-left: 0
}

@media only screen and (min-width:48em) {
    .header__right {
        flex: 1;
        padding-left: 1em;
        padding-left: var(--gap)
    }
}

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

.header__brand img {
    height: 25px;
    -o-object-fit: contain;
    object-fit: contain
}

@media only screen and (min-width:36em) {
    .header__brand img {
        max-width: 200px
    }
}

.header__title {
    margin: 0;
    font-size: 1.2rem;
    padding: .25em 0;
    padding: var(--gap-xs) 0;
    display: block;
    font-weight: 700;
    font-weight: var(--font-weight-700)
}

.header__menu {
    white-space: nowrap;
    height: 100%
}

.header .account-link,
.header .signin-link,
.header .signout-link,
.header .signup-link,
.header .upgrade-link {
    font-size: .9rem;
    font-weight: 600;
    font-weight: var(--font-weight-600);
    line-height: 1;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    white-space: nowrap;
    align-items: center;
    height: 32px;
    padding: 0 1.5em;
    display: none;
    outline: none;
    margin-left: .5em;
    margin-left: var(--gap-sm);
    border: 1px solid #4d4d4d;
    border: 1px solid var(--color-text-acc-2);
    border-radius: 2em
}

.header .account-link:active,
.header .account-link:focus,
.header .account-link:hover,
.header .signin-link:active,
.header .signin-link:focus,
.header .signin-link:hover,
.header .signout-link:active,
.header .signout-link:focus,
.header .signout-link:hover,
.header .signup-link:active,
.header .signup-link:focus,
.header .signup-link:hover,
.header .upgrade-link:active,
.header .upgrade-link:focus,
.header .upgrade-link:hover {
    color: #f77a3b;
    color: var(--color-secondary);
    border-color: #f77a3b;
    border-color: var(--color-secondary)
}

.header .account-link.focus-visible,
.header .account-link:focus-visible,
.header .signin-link.focus-visible,
.header .signin-link:focus-visible,
.header .signout-link.focus-visible,
.header .signout-link:focus-visible,
.header .signup-link.focus-visible,
.header .signup-link:focus-visible,
.header .upgrade-link.focus-visible,
.header .upgrade-link:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

@media only screen and (min-width:36em) {
    .header .account-link,
    .header .signin-link,
    .header .signout-link,
    .header .signup-link,
    .header .upgrade-link {
        display: flex
    }
}

.header .header-cta {
    border: none;
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary);
    color: #fff;
    color: var(--color-white);
    margin-left: 1em;
    margin-left: var(--gap)
}

.header .header-cta:active,
.header .header-cta:focus,
.header .header-cta:hover {
    background-color: #6841f6;
    background-color: var(--color-primary-dark);
    color: #fff;
    color: var(--color-white);
    cursor: pointer
}

.header .header-cta.focus-visible,
.header .header-cta:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.header__menu--toggle,
.header__search--toggle,
.header__theme--toggle {
    display: flex;
    width: 32px;
    height: 32px;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    outline: none
}

.header__menu--toggle:active,
.header__menu--toggle:focus,
.header__menu--toggle:hover,
.header__search--toggle:active,
.header__search--toggle:focus,
.header__search--toggle:hover,
.header__theme--toggle:active,
.header__theme--toggle:focus,
.header__theme--toggle:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary);
    cursor: pointer
}

.header__menu--toggle.focus-visible,
.header__menu--toggle:focus-visible,
.header__search--toggle.focus-visible,
.header__search--toggle:focus-visible,
.header__theme--toggle.focus-visible,
.header__theme--toggle:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.header__menu--toggle .icon-x {
    display: none
}

.header__menu--toggle .icon-menu,
.header__menu--toggle.is-active .icon-x,
.header__menu--toggle .menu .icon-x {
    display: block
}

.header__menu--toggle.is-active .icon-menu,
.header__menu--toggle .menu .icon-menu {
    display: none
}

.header__user {
    position: relative;
    display: flex;
    width: 32px;
    height: 32px;
    color: #666;
    color: var(--color-text-acc-3);
    box-shadow: inset 0 0 0 2px #f0f0f0;
    box-shadow: inset 0 0 0 2px var(--color-bg-acc-3);
    padding: 2px;
    overflow: hidden;
    outline: none
}

.header__user,
.header__user-avatar {
    border-radius: 50%;
    border-radius: var(--global-radius-round)
}

.header__user-avatar {
    z-index: 2
}

.header__user span {
    position: absolute;
    text-transform: uppercase;
    font-size: 1.2rem;
    max-height: 26px
}

.header__user:active,
.header__user:focus,
.header__user:hover {
    box-shadow: inset 0 0 0 2px grey;
    box-shadow: inset 0 0 0 2px var(--color-neutral)
}

.header__user.focus-visible,
.header__user:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

@media only screen and (min-width:36em) {
    .header__user.non-member {
        display: none
    }
}

.header__theme--toggle {
    display: none
}

@media only screen and (min-width:48em) {
    .header__theme--toggle {
        display: flex;
        align-items: center;
        justify-content: center
    }
}

.header__theme--toggle .icon-sun {
    visibility: hidden;
    opacity: 0
}

.header__theme--toggle .icon-moon {
    visibility: visible;
    opacity: 1
}

.btn-theme-toggle,
.btn-view-toggle {
    position: relative
}

.btn-theme-toggle .icon,
.btn-view-toggle .icon {
    position: absolute;
    transition: visibility .4s ease-in-out, opacity .4s ease-in-out;
    transition: visibility var(--trans-default), opacity var(--trans-default)
}

.btn-theme-toggle .icon-sun {
    visibility: hidden;
    opacity: 0
}

.btn-theme-toggle .icon-moon {
    visibility: visible;
    opacity: 1
}

.btn-view-toggle .icon-grid {
    visibility: hidden;
    opacity: 0
}

.btn-view-toggle .icon-list {
    visibility: visible;
    opacity: 1
}

[data-header=sticky] .header {
    position: sticky
}

[data-view-type=list] .btn-view-toggle .icon-grid {
    visibility: visible;
    opacity: 1
}

[data-color-scheme=dark] .btn-theme-toggle .icon-moon,
[data-view-type=list] .btn-view-toggle .icon-list {
    visibility: hidden;
    opacity: 0
}

[data-color-scheme=dark] .btn-theme-toggle .icon-sun {
    visibility: visible;
    opacity: 1
}

[data-color-scheme=dark] .nav-current a:after,
[data-color-scheme=dark] .nav a:before {
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary);
    opacity: .75
}

.hero__inner {
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.hero__title {
    max-width: 50rem
}

.hero__media {
    max-width: 40rem;
    margin: 0 auto
}

.hero__media.wide {
    max-width: none
}

.hero__figure {
    position: relative;
    margin: 0;
    padding-top: 56.25%;
    overflow: hidden;
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.hero__img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: inherit
}

.hero .featured .icon {
    color: #ffd900;
    color: var(--color-gold);
    fill: #ffd900;
    fill: var(--color-gold)
}

.hero__social a:active,
.hero__social a:focus,
.hero__social a:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.hero__social a.focus-visible,
.hero__social a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.author-card .hero__inner,
.author-template .hero__inner,
.tag-template .hero__inner {
    position: relative;
    min-height: 12rem;
    padding: 2em;
    padding: var(--gap-lg);
    overflow: hidden;
    background-color: #fff;
    background-color: var(--color-bg);
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .02);
    flex-direction: column
}

@media only screen and (min-width:48em) {
    .author-card .hero__inner,
    .author-template .hero__inner,
    .tag-template .hero__inner {
        flex-direction: row
    }
}

.author-card .hero__title,
.author-template .hero__title,
.tag-template .hero__title {
    font-size: 1.6rem
}

.author-card .hero__img,
.author-template .hero__img,
.tag-template .hero__img {
    width: 120px;
    height: 120px;
    min-width: 0;
    -o-object-fit: cover;
    object-fit: cover;
    align-self: center;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    border: 3px solid #f0f0f0;
    border: 3px solid var(--color-bg-acc-3)
}

@media only screen and (min-width:48em) {
    .author-card .hero__img,
    .author-template .hero__img,
    .tag-template .hero__img {
        margin-bottom: 0;
        margin-right: 2em;
        margin-right: var(--gap-lg)
    }
}

.author-card .hero__content,
.author-template .hero__content,
.tag-template .hero__content {
    max-width: 35rem;
    z-index: 1;
    text-align: center
}

@media only screen and (min-width:48em) {
    .author-card .hero__content,
    .author-template .hero__content,
    .tag-template .hero__content {
        text-align: left
    }
}

.icon {
    display: flex;
    width: 25px;
    height: 25px;
    stroke-width: 2px;
    fill: none
}

.icon svg {
    fill: inherit;
    background: inherit;
    stroke: currentcolor;
    stroke-width: inherit;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translateX(0);
    transition: fill var(--animation-duration) var(--animation-name), stroke var(--animation-duration) var(--animation-name)
}

.icon--filled {
    stroke-width: 0px;
    fill: #fff;
    fill: var(--color-bg)
}

.icon--xxs {
    width: 10px;
    height: 10px;
    stroke-width: 2.5px
}

.icon--xs {
    width: 15px;
    height: 15px;
    stroke-width: 2.5px
}

.icon--sm {
    width: 20px;
    height: 20px
}

.icon--lg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5px
}

.icon--xl {
    width: 40px;
    height: 40px;
    stroke-width: 1.5px
}

.icon--2x {
    width: 50px;
    height: 50px;
    stroke-width: 1.5px
}

.icon--3x {
    width: 75px;
    height: 75px;
    stroke-width: 1.5px
}

.icon--4x {
    width: 100px;
    height: 100px;
    stroke-width: 1.5px
}

.icon__wave {
    width: 80px;
    margin: -.25em auto 0;
    margin-top: calc(var(--gap)*-0.25);
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

.icon__wave .line {
    fill: none;
    stroke: url(#gradient) var(--ghost-accent-color, #7450f7);
    stroke: url(#gradient) #7450f7;
    stroke: url(#gradient) var(--color-primary);
    stroke-width: 15;
    stroke-miterlimit: 10
}

.wave-gradient {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden
}

.site {
    min-height: 100vh
}

.site__cover {
    display: none;
    flex-basis: 40%;
    height: 100vh;
    background-color: #fff;
    background-color: var(--color-bg)
}

.site__cover img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: 0;
    overflow: hidden
}

@media only screen and (min-width:48em) {
    .site__cover {
        display: block
    }
}

.site__cover+.site__inner {
    flex: 1
}

.site__inner {
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative
}

.site__brand {
    position: absolute;
    left: 1em;
    left: var(--gap);
    top: 1em;
    top: var(--gap);
    font-size: 1.4rem;
    font-weight: 600;
    font-weight: var(--font-weight-600);
    line-height: 1
}

.site__brand img {
    height: 25px
}

.site__brand:active,
.site__brand:focus,
.site__brand:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.site__brand.focus-visible,
.site__brand:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.site__content {
    padding: 1em;
    padding: var(--gap);
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius);
    max-width: 24rem;
    margin: 0 auto
}

@media only screen and (min-width:48em) {
    .site__content {
        padding: 2em;
        padding: var(--gap-lg)
    }
}

.site__title {
    font-size: 2rem;
    font-weight: 600;
    font-weight: var(--font-weight-600);
    text-align: center
}

.site p {
    color: #666;
    color: var(--color-text-acc-3);
    max-width: 20rem
}

.site p a {
    color: #333;
    color: var(--color-text-acc-1);
    text-decoration: underline
}

.checkout {
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.checkout__title {
    font-size: 1.2rem
}

.checkout-plan {
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius);
    padding: 1em 0;
    padding: var(--gap) 0
}

.checkout-plan__content,
.checkout-plan__price,
.checkout-plan__title {
    text-align: center
}

.checkout-plan__price {
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    color: #f77a3b;
    color: var(--color-secondary)
}

.checkout-plan__price sup {
    top: -.75em;
    font-size: 1rem;
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.checkout-plan__price strong {
    font-size: 2.2rem;
    font-weight: 600;
    font-weight: var(--font-weight-600)
}

.checkout-plan__price span {
    text-transform: uppercase;
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.checkout-plan li {
    margin-bottom: .25em;
    margin-bottom: var(--gap-xs)
}

.subscriber-box {
    background-color: #fff;
    background-color: var(--color-bg);
    padding: 2em;
    padding: var(--gap-lg);
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.subscriber-box__main {
    flex-direction: column
}

@media only screen and (min-width:48em) {
    .subscriber-box__main {
        flex-direction: row
    }
}

.subscriber-box__details {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap
}

@media only screen and (min-width:48em) {
    .subscriber-box__details {
        flex-direction: row
    }
}

.subscriber-box img {
    border: 3px solid #f2f2f2!important;
    border: 3px solid var(--color-border)!important
}

.subscriber-detail {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    margin-top: var(--gap)
}

@media only screen and (min-width:48em) {
    .subscriber-detail {
        margin-right: 2em;
        margin-right: var(--gap-lg)
    }
    .subscriber-detail:last-of-type {
        margin-right: 0
    }
}

.subscriber-detail-label {
    text-transform: uppercase;
    font-weight: 700;
    font-weight: var(--font-weight-700);
    font-size: .8rem
}

.subscriber__edit a {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

@media only screen and (min-width:36em) {
    .subscriber__edit a {
        margin-bottom: 0;
        margin-right: 1em;
        margin-right: var(--gap)
    }
}

.subscriber__edit a:last-of-type {
    margin-bottom: 0
}

.subscriber__edit .gh-error.gh-error-subscription-cancel {
    display: block;
    margin-top: 1em;
    margin-top: var(--gap);
    color: #fc365e;
    color: var(--color-error);
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.subscriber__edit .gh-error.gh-error-subscription-cancel:empty {
    margin-top: 0
}

.menu {
    position: fixed;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 14rem;
    z-index: -1;
    opacity: 0;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    font-size: .9rem;
    transform: translateX(-14rem);
    background-color: #fff;
    background-color: var(--color-bg);
    border-right: 1px solid #f2f2f2;
    border-right: 1px solid var(--color-border);
    box-shadow: 0 50px 50px 10px rgba(0, 0, 0, .25);
    transition: transform .4s cubic-bezier(.785, .135, .15, .86), opacity .4s cubic-bezier(.86, 0, .07, 1), z-index .4s step-end;
    transition: transform var(--trans-duration) cubic-bezier(.785, .135, .15, .86), opacity var(--trans-duration) cubic-bezier(.86, 0, .07, 1), z-index var(--trans-duration) step-end;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.menu::-webkit-scrollbar {
    display: none
}

@media only screen and (min-width:36em) {
    .menu {
        box-shadow: none
    }
}

.menu .nav {
    margin: 0;
    padding: 0;
    list-style: none
}

.menu .nav:first-of-type {
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border)
}

.menu .nav a {
    display: flex;
    align-items: center;
    padding: .75em 1em;
    padding: .75em var(--gap);
    text-align: center;
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border);
    color: #666;
    color: var(--color-text-acc-3)
}

.menu .nav a:active,
.menu .nav a:focus,
.menu .nav a:hover {
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.menu .nav a.focus-visible,
.menu .nav a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.menu .nav a i {
    width: 18px;
    height: 18px;
    margin-right: .75em
}

.btn-bookmarks,
.btn-theme-toggle,
.btn-view-toggle {
    display: flex;
    align-items: center;
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border);
    line-height: 1;
    cursor: pointer;
    padding: 1em;
    padding: var(--gap);
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    height: 50px
}

.btn-bookmarks:active,
.btn-bookmarks:focus,
.btn-bookmarks:hover,
.btn-theme-toggle:active,
.btn-theme-toggle:focus,
.btn-theme-toggle:hover,
.btn-view-toggle:active,
.btn-view-toggle:focus,
.btn-view-toggle:hover {
    outline: none;
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.btn-bookmarks.focus-visible,
.btn-bookmarks:focus-visible,
.btn-theme-toggle.focus-visible,
.btn-theme-toggle:focus-visible,
.btn-view-toggle.focus-visible,
.btn-view-toggle:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.btn-theme-toggle {
    display: none
}

.btn-theme-toggle.is-visible {
    display: flex
}

.btn-view-toggle {
    display: none
}

@media only screen and (min-width:48em) {
    .btn-view-toggle {
        display: flex
    }
}

.menu[data-menu-active],
.menu[focus-within] {
    z-index: 100;
    opacity: 1;
    overflow-y: scroll;
    transform: translateX(0);
    transition: transform .4s cubic-bezier(.785, .135, .15, .86), opacity .4s cubic-bezier(.86, 0, .07, 1), z-index .4s step-start;
    transition: transform var(--trans-duration) cubic-bezier(.785, .135, .15, .86), opacity var(--trans-duration) cubic-bezier(.86, 0, .07, 1), z-index var(--trans-duration) step-start
}

.menu:focus-within,
.menu[data-menu-active] {
    z-index: 100;
    opacity: 1;
    overflow-y: scroll;
    transform: translateX(0);
    transition: transform .4s cubic-bezier(.785, .135, .15, .86), opacity .4s cubic-bezier(.86, 0, .07, 1), z-index .4s step-start;
    transition: transform var(--trans-duration) cubic-bezier(.785, .135, .15, .86), opacity var(--trans-duration) cubic-bezier(.86, 0, .07, 1), z-index var(--trans-duration) step-start
}

.btn-toggle-icons {
    width: 15px;
    height: 15px;
    margin-right: .5em;
    margin-right: var(--gap-sm)
}

[data-header=sticky] .menu {
    top: 60px
}

.btn-theme-toggle.is-active~.color-scheme-picker {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.color-scheme-picker {
    flex-direction: column-reverse;
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.color-scheme,
.color-scheme-picker {
    display: flex
}

.color-scheme {
    padding: 1em;
    padding: var(--gap);
    background-color: #fff;
    background-color: var(--color-bg);
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border);
    outline: none;
    align-items: center;
    height: 50px
}

.color-scheme:active,
.color-scheme:focus,
.color-scheme:hover {
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.color-scheme.focus-visible,
.color-scheme:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.color-scheme__color {
    width: 20px;
    height: 20px;
    margin-left: -2px;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    box-shadow: 0 0 0 2px #f2f2f2;
    box-shadow: 0 0 0 2px var(--color-border)
}

.notify {
    position: fixed;
    z-index: 200;
    top: -60px;
    left: 0;
    right: 0;
    background-color: #1a1a1a;
    background-color: var(--color-bg-reverse);
    color: #e6e6e6;
    color: var(--color-text-reverse);
    padding: 1em 0;
    padding: var(--gap) 0;
    height: 60px;
    font-size: .9rem;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    color: #fff;
    color: var(--color-white);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.notify:active,
.notify:focus,
.notify:hover {
    outline: none
}

.notify.focus-visible,
.notify:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.notify.is-closed {
    top: -60px!important;
    opacity: 0!important;
    visibility: hidden!important;
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.notify.notify-billing-cancel,
.notify.notify-error {
    background-color: #fc365e;
    background-color: var(--color-error)
}

.notify.notify-billing-success,
.notify.notify-checkout,
.notify.notify-signin,
.notify.notify-signup,
.notify.notify-subscribe,
.notify.notify-success {
    background-color: #48c774;
    background-color: var(--color-success)
}

.notify__close {
    padding: 5px;
    width: 25px;
    height: 25px;
    background-color: #e6e6e6;
    background-color: var(--color-light);
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    color: #1a1a1a;
    color: var(--color-dark);
    cursor: pointer
}

.notify__close:active,
.notify__close:focus,
.notify__close:hover {
    background-color: #fff;
    background-color: var(--color-white);
    outline: none
}

.notify__close.focus-visible,
.notify__close:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.notify__close .icon {
    stroke-width: 3px;
    pointer-events: none
}

.notify .container {
    height: 30px
}

.billing-cancel .notify-billing-cancel,
.billing-success .notify-billing-success,
.checkout-success .notify-checkout,
.signin-success .notify-signin,
.signup-success .notify-signup,
.subscribe-success .notify-subscribe,
form[data-members-form].error .notify-error,
form[data-members-form].success .notify-success {
    visibility: visible;
    opacity: 1;
    top: 0
}

.content {
    display: flex;
    flex-direction: column;
    color: #333;
    color: var(--color-text-acc-1)
}

.content>:last-child {
    margin-bottom: 0
}

.content-wrap {
    max-width: 40rem;
    max-width: calc(var(--gap-rem)*40);
    margin: 0 auto 2em;
    margin-bottom: var(--gap-lg)
}

.content a:not([class*=kg-]) {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary);
    border-bottom: 1px solid #7450f7;
    border-bottom: 1px solid var(--color-primary)
}

.content a:not([class*=kg-]):active,
.content a:not([class*=kg-]):focus,
.content a:not([class*=kg-]):hover {
    border-bottom-width: 2px
}

.content a:not([class*=kg-]).focus-visible,
.content a:not([class*=kg-]):focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

[data-color-scheme=dark] .content a:not([class*=kg-]) {
    color: #f77a3b;
    color: var(--color-secondary);
    border-bottom: 2px solid #f77a3b;
    border-bottom: 2px solid var(--color-secondary)
}

.js-toc-content h1[id],
.js-toc-content h2[id],
.js-toc-content h3[id],
.js-toc-content h4[id] {
    outline: none
}

.post-sneak-peek {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.post-sneak-peek.fading:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 80%;
    background: linear-gradient(transparent, #f6f7f9 85%);
    background: linear-gradient(transparent, var(--color-bg-body) 85%)
}

.post-access-cta {
    position: relative;
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius);
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .02)
}

.post-access-cta a.btn,
.post-access-cta a.post-access-alt {
    border-bottom: none!important
}

.post-access-cta a.btn.btn--brand,
.post-access-cta a.post-access-alt.btn--brand {
    color: #fff;
    color: var(--color-white)
}

.post-access-cta .post-access-alt {
    text-decoration: underline
}

.post-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    background-color: var(--color-bg);
    border-radius: 2px;
    border-radius: var(--global-radius);
    padding: 1em;
    padding: var(--gap)
}

.post-card[focus-within] {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1)
}

.post-card:focus-within {
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1)
}

.post-card .featured .icon {
    color: #ffd900;
    color: var(--color-gold);
    fill: #ffd900;
    fill: var(--color-gold)
}

@media only screen and (min-width:48em) {
    .post-card {
        padding: 2em;
        padding: var(--gap-lg)
    }
}

.post-card__media {
    position: relative;
    padding-top: 56.25%;
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    overflow: hidden;
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1)
}

@media only screen and (min-width:48em) {
    .post-card__media {
        margin-bottom: 1.5em
    }
}

.post-card__media img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.post-card__details {
    font-size: .85rem;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.post-card__content {
    display: flex;
    flex-direction: column;
    flex: 1
}

.post-card .tag-list {
    margin-bottom: .75em
}

.post-card__title {
    font-size: 1.6rem;
    font-weight: 600;
    font-weight: var(--font-weight-600)
}

.post-card__title:active,
.post-card__title:focus,
.post-card__title:hover {
    outline: none;
    text-decoration: underline
}

.post-card__title.focus-visible,
.post-card__title:focus-visible,
.post-card__title a.focus-visible,
.post-card__title a:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.post-card .visibility {
    text-transform: capitalize;
    color: green
}

.post-card__exc {
    color: #666;
    color: var(--color-text-acc-3)
}

.post-card__ftr {
    display: flex;
    align-items: center;
    font-size: .9rem;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    font-weight: 500;
    font-weight: var(--font-weight-500);
    text-transform: uppercase
}

.grid-col-3,
.post-feed[data-grid-columns="3"],
[data-grid-columns="3"] .post-feed {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr))
}

@media only screen and (min-width:36em) {
    .grid-col-3,
    .post-feed[data-grid-columns="3"],
    [data-grid-columns="3"] .post-feed {
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr))
    }
}

.grid-col-2,
.post-feed[data-grid-columns="2"],
[data-grid-columns="2"] .post-feed {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr))
}

@media only screen and (min-width:36em) {
    .grid-col-2,
    .post-feed[data-grid-columns="2"],
    [data-grid-columns="2"] .post-feed {
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr))
    }
}

@media only screen and (min-width:62em) {
    .grid-col-2,
    .post-feed[data-grid-columns="2"],
    [data-grid-columns="2"] .post-feed {
        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr))
    }
    .grid-col-2 .post-card__img img,
    .post-feed[data-grid-columns="2"] .post-card__img img,
    [data-grid-columns="2"] .post-feed .post-card__img img {
        height: 300px
    }
}

[data-view-type=list] .grid {
    grid-template-columns: auto
}

@media only screen and (min-width:48em) {
    [data-view-type=list] .post-card {
        flex-direction: row
    }
    [data-view-type=list] .post-card:active,
    [data-view-type=list] .post-card:focus,
    [data-view-type=list] .post-card:hover {
        box-shadow: none;
        transform: translateY(0)
    }
    [data-view-type=list] .post-card.focus-visible,
    [data-view-type=list] .post-card:focus-visible {
        outline-color: #4d91fe;
        outline-color: var(--color-outline);
        outline-offset: -2px;
        outline-style: dashed;
        outline-width: 2px
    }
    [data-view-type=list] .post-card.featured {
        border-radius: 2px;
        border-radius: var(--global-radius);
        position: relative;
        overflow: hidden
    }
    [data-view-type=list] .post-card.featured:before {
        height: 100%;
        width: 4px;
        background: linear-gradient(180deg, transparent, var(--ghost-accent-color, #7450f7) 10%, #f77a3b 90%, transparent);
        background: linear-gradient(180deg, transparent, #7450f7 10%, #f77a3b 90%, transparent);
        background: linear-gradient(180deg, transparent, var(--color-primary) 10%, var(--color-secondary) 90%, transparent)
    }
    [data-view-type=list] .post-card .post-card__media {
        margin-bottom: 0;
        margin-right: 2em;
        margin-right: var(--gap-lg);
        padding-top: 0;
        padding-right: 35%
    }
}

@media only screen and (min-width:62em) {
    [data-view-type=list] .post-card .post-card__media {
        padding-right: 30%
    }
}

@media only screen and (min-width:75em) {
    [data-view-type=list] .post-card .post-card__media {
        padding-right: 25%
    }
}

[data-color-scheme=dark] .post-card .visibility {
    color: #48c774;
    color: var(--color-success)
}

.scroll-top {
    position: fixed;
    z-index: 50;
    right: 1em;
    right: var(--gap);
    bottom: 1em;
    bottom: var(--gap);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px)
}

@media only screen and (min-width:48em) {
    .scroll-top {
        right: 2em;
        right: var(--gap-lg);
        bottom: 2em;
        bottom: var(--gap-lg)
    }
}

.scroll-top:active,
.scroll-top:focus,
.scroll-top:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.scroll-top:active .progress-circle path,
.scroll-top:focus .progress-circle path,
.scroll-top:hover .progress-circle path {
    stroke: var(--ghost-accent-color, #7450f7);
    stroke: #7450f7;
    stroke: var(--color-primary)
}

.scroll-top.focus-visible,
.scroll-top:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.scroll-top.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.scroll-top i {
    position: absolute
}

.scroll-top svg path {
    fill: none
}

.scroll-top svg.progress-circle path {
    stroke: #4d4d4d;
    stroke: var(--color-text-acc-2);
    stroke-width: 4
}

.scroll-top svg.progress-circle path,
.search__form {
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.search__form {
    position: relative;
    display: inline-flex;
    flex: 1 0 auto
}

.search__form.focus-visible,
.search__form:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.search__form:not(.focused)+.search-result {
    border: none
}

.search__input[type=search],
.search__input[type=text] {
    margin: 0;
    padding: 0;
    color: #1a1a1a;
    color: var(--color-text);
    font-weight: 500;
    font-weight: var(--font-weight-500);
    border: none;
    box-shadow: none;
    font-size: 1rem;
    background-color: transparent;
    flex: 1 0;
    outline: none!important;
    box-shadow: none!important
}

.search__input[type=search]::-moz-placeholder,
.search__input[type=text]::-moz-placeholder {
    color: hsla(0, 0%, 50%, .5);
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.search__input[type=search]:-ms-input-placeholder,
.search__input[type=text]:-ms-input-placeholder {
    color: hsla(0, 0%, 50%, .5);
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.search__input[type=search]::placeholder,
.search__input[type=text]::placeholder {
    color: hsla(0, 0%, 50%, .5);
    font-weight: 500;
    font-weight: var(--font-weight-500)
}

.search__input[type=search]::-webkit-search-cancel-button,
.search__input[type=text]::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.search__cancel {
    display: none
}

.search__cancel svg {
    width: 15px;
    height: 15px;
    fill: grey
}

.search__input:not(:-moz-placeholder-shown)+.search__cancel {
    display: flex
}

.search__input:not(:-ms-input-placeholder)+.search__cancel {
    display: flex
}

.search__input:not(:placeholder-shown)+.search__cancel {
    display: flex
}

.search__icon {
    border: none;
    font-size: 1rem;
    font-size: var(--font-size-base);
    transition: color .4s ease-in-out;
    transition: color var(--trans-default);
    margin: 0;
    background-color: transparent;
    box-shadow: none;
    min-width: 0;
    cursor: pointer;
    color: #666;
    color: var(--color-text-acc-3)
}

.search__icon:active,
.search__icon:focus,
.search__icon:hover {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.search__icon.focus-visible,
.search__icon:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.search-content {
    max-width: 640px;
    margin: 1em auto 0;
    margin-top: var(--gap);
    padding: 0 1em;
    padding: 0 var(--gap)
}

@media only screen and (min-width:36em) {
    .search-content {
        padding: 0
    }
}

.search-result {
    width: 100%;
    position: absolute;
    left: 0;
    top: 61px;
    background-color: #fff;
    background-color: var(--color-bg);
    border: 1px solid #f2f2f2;
    border: 1px solid var(--color-border);
    border-left: 0;
    border-top: 0;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .1);
    overflow-y: scroll;
    max-height: calc(100vh - 60px);
    -ms-overflow-style: none;
    scrollbar-width: none
}

.search-result::-webkit-scrollbar {
    display: none
}

.search-result__post {
    display: flex;
    position: relative;
    border-radius: 2px;
    border-radius: var(--global-radius);
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border)
}

.search-result__post:active .search-result__title,
.search-result__post:focus .search-result__title,
.search-result__post:hover .search-result__title {
    text-decoration: underline
}

.search-result__post.focus-visible,
.search-result__post:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.search-result__content {
    padding: 1em;
    padding: var(--gap);
    flex: 1
}

.search-result__title {
    margin-bottom: .25em;
    margin-bottom: var(--gap-xs);
    font-size: .9rem;
    font-weight: 600;
    font-weight: var(--font-weight-600)
}

.search-result__date,
.search-result__title {
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.search-result__date {
    margin-bottom: 0;
    font-size: .8rem
}

.footer,
.main {
    position: relative;
    transition: margin-left .4s cubic-bezier(.785, .135, .15, .86);
    transition: margin-left var(--trans-duration) cubic-bezier(.785, .135, .15, .86)
}

.main {
    flex: 1;
    padding-top: 2em;
    padding-top: var(--gap-lg)
}

@media only screen and (min-width:36em) {
    [data-menu-active]~.footer,
    [data-menu-active]~.main {
        margin-left: 14rem;
        transition: margin-left .4s cubic-bezier(.785, .135, .15, .86);
        transition: margin-left var(--trans-duration) cubic-bezier(.785, .135, .15, .86)
    }
}

.section {
    margin-bottom: 2em;
    margin-bottom: var(--gap-lg)
}

.section__title {
    font-weight: 600;
    font-weight: var(--font-weight-600);
    line-height: 1;
    font-size: 1.1rem;
    position: relative;
    color: #333;
    color: var(--color-text-acc-1)
}

[data-color-scheme=dark] .section__title:before {
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary)
}

.special-delimiter {
    display: block;
    height: 3px;
    background-color: #f6f7f9;
    background-color: var(--color-bg-body);
    position: relative
}

.special-delimiter,
.special-delimiter:after {
    border-radius: 2px;
    border-radius: var(--global-radius);
    width: 100%
}

.special-delimiter:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, transparent 0, var(--ghost-accent-color, #7450f7) 40%, #f77a3b 50%, transparent 55%);
    background: linear-gradient(90deg, transparent 0, #7450f7 40%, #f77a3b 50%, transparent 55%);
    background: linear-gradient(90deg, transparent 0, var(--color-primary) 40%, var(--color-secondary) 50%, transparent 55%)
}

.sidebar {
    height: 100%
}

.sidebar__section {
    margin-bottom: 2em;
    margin-bottom: var(--gap-lg);
    padding: 1em;
    padding: var(--gap);
    border-radius: 2px;
    border-radius: var(--global-radius);
    background-color: #fff;
    background-color: var(--color-bg)
}

.sidebar__title {
    margin-bottom: 0;
    text-align: center;
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.sidebar__descr {
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    text-align: center;
    color: #666;
    color: var(--color-text-acc-3)
}

.sidebar__subscribe {
    padding: 1.5em
}

.sidebar__tag {
    display: flex;
    padding: .5em 0;
    padding: var(--gap-sm) 0;
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border);
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.sidebar__tag:first-of-type {
    padding-top: 0
}

.sidebar__tag:last-of-type {
    border-bottom: none;
    padding-bottom: 0
}

.sidebar__tag:active,
.sidebar__tag:focus,
.sidebar__tag:hover {
    text-decoration: underline
}

.sidebar__tag.focus-visible,
.sidebar__tag:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.sidebar__tag-name {
    margin-bottom: 0;
    flex: 1
}

.sidebar__tag-count,
.sidebar__tag-name {
    font-weight: 600;
    font-weight: var(--font-weight-600);
    color: inherit;
    font-size: .9rem
}

.sidebar-story {
    display: flex;
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    padding-bottom: 1em;
    padding-bottom: var(--gap);
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border)
}

.sidebar-story:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none
}

.sidebar-story__title {
    font-weight: 600;
    font-weight: var(--font-weight-600);
    font-size: .9rem;
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    flex: 1;
    margin: 0
}

.sidebar-story__title:active,
.sidebar-story__title:focus,
.sidebar-story__title:hover {
    text-decoration: underline
}

.sidebar-story__title.focus-visible,
.sidebar-story__title:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.sidebar-story__media {
    height: 4rem;
    width: 4rem;
    box-shadow: 0 0 0 3px #f0f0f0;
    box-shadow: 0 0 0 3px var(--color-bg-acc-3);
    border-radius: 50%;
    border-radius: var(--global-radius-round)
}

.sidebar-story__media:active,
.sidebar-story__media:focus,
.sidebar-story__media:hover {
    box-shadow: 0 0 0 3px grey;
    box-shadow: 0 0 0 3px var(--color-neutral)
}

.sidebar-story__media.focus-visible,
.sidebar-story__media:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.sidebar-story__media img {
    margin: 0;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

.sidebar-story__counter {
    font-size: 2.5rem;
    font-weight: 600;
    font-weight: var(--font-weight-600);
    display: flex;
    align-items: center;
    justify-content: center
}

.social__item {
    margin-right: .5em;
    margin-right: var(--gap-sm);
    padding: .5em;
    padding: var(--gap-sm);
    color: #4d4d4d;
    color: var(--color-text-acc-2);
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2);
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.social__item:last-of-type {
    margin-right: 0
}

.social__item:active,
.social__item:focus,
.social__item:hover {
    box-shadow: 0 0 0 1px var(--ghost-accent-color, #7450f7);
    box-shadow: 0 0 0 1px #7450f7;
    box-shadow: 0 0 0 1px var(--color-primary);
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.social__item.focus-visible,
.social__item:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.social-share {
    display: flex;
    margin-bottom: 2em;
    margin-bottom: var(--gap-lg)
}

.social-share a,
.social-share button {
    flex: 1;
    padding: .6rem;
    background-color: #fff;
    background-color: var(--color-bg);
    color: #666;
    color: var(--color-text-acc-3);
    border-radius: 2px;
    border-radius: var(--global-radius);
    border: 1px solid #f5f5f5;
    border: 1px solid var(--color-bg-acc-2);
    margin-right: .5em;
    margin-right: var(--gap-sm);
    cursor: pointer
}

.social-share a:active,
.social-share a:focus,
.social-share a:hover,
.social-share button:active,
.social-share button:focus,
.social-share button:hover {
    border-color: #7450f7;
    border-color: var(--color-primary);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary);
    outline: none
}

.social-share a.focus-visible,
.social-share a:focus-visible,
.social-share button.focus-visible,
.social-share button:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.social-share button:last-of-type {
    margin-right: 0
}

.social-share .icon {
    margin: 0 auto
}

.social-share .copy-link,
.social-share .handle-bookmark {
    position: relative
}

.social-share .copy-link.has-tooltip:after,
.social-share .copy-link.has-tooltip:before,
.social-share .handle-bookmark.has-tooltip:after,
.social-share .handle-bookmark.has-tooltip:before {
    visibility: visible;
    opacity: 1;
    transition: visibility .4s ease-in-out, opacity .4s ease-in-out;
    transition: visibility var(--trans-default), opacity var(--trans-default)
}

.social-share .copy-link:before,
.social-share .handle-bookmark:before {
    content: "";
    top: auto;
    right: 50%;
    bottom: -12px;
    margin-right: -5px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #1a1a1a;
    border-bottom: 6px solid var(--color-bg-reverse)
}

.social-share .copy-link:after,
.social-share .copy-link:before,
.social-share .handle-bookmark:after,
.social-share .handle-bookmark:before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: visibility .4s ease-in-out, opacity .4s ease-in-out;
    transition: visibility var(--trans-default), opacity var(--trans-default)
}

.social-share .copy-link:after,
.social-share .handle-bookmark:after {
    content: attr(data-label);
    padding: .5em 1em;
    padding: var(--gap-sm) var(--gap);
    border-radius: 2px;
    border-radius: var(--global-radius);
    background-color: #1a1a1a;
    background-color: var(--color-bg-reverse);
    color: #e6e6e6;
    color: var(--color-text-reverse);
    font-size: .8rem;
    font-weight: var(--font-weight-semi-bold);
    top: 3rem;
    top: calc(var(--gap-rem)*3);
    right: 0
}

@media only screen and (min-width:48em) {
    .social-share .copy-link:after,
    .social-share .handle-bookmark:after {
        right: 25px
    }
}

.subscribe-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.subscribe-form input {
    padding: .75em 1em;
    padding: .75em var(--gap);
    line-height: 1;
    border-color: #f2f2f2;
    border-color: var(--color-border)
}

.subscribe-form input:active,
.subscribe-form input:focus,
.subscribe-form input:hover {
    box-shadow: 0 0 0 1px grey;
    box-shadow: 0 0 0 1px var(--color-neutral);
    border-color: transparent
}

.subscribe-form input.focus-visible,
.subscribe-form input:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

form.loading button {
    position: relative;
    color: transparent!important;
    pointer-events: none
}

form.loading button:after {
    content: "";
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    top: 50%;
    left: 50%;
    border: 2px solid #e6e6e6;
    border: 2px solid var(--color-light);
    border-radius: 50%;
    border-right-color: transparent!important;
    border-top-color: transparent!important;
    z-index: 1;
    -webkit-animation: f .4s linear infinite;
    animation: f .4s linear infinite;
    -webkit-animation: f var(--trans-duration) infinite linear;
    animation: f var(--trans-duration) infinite linear
}

form.loading button.btn--secondary:after {
    border: 2px solid #1a1a1a;
    border: 2px solid var(--color-dark)
}

.tag-list {
    font-size: .85rem;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.tag-list__item {
    padding: .4em .8em;
    line-height: 1;
    display: inline-block;
    font-size: .9rem;
    border-radius: 2em;
    border: 1px solid #666;
    border: 1px solid var(--color-text-acc-3);
    margin-bottom: .5em;
    margin-bottom: var(--gap-sm);
    color: #666;
    color: var(--color-text-acc-3)
}

.tag-list__item:active,
.tag-list__item:focus,
.tag-list__item:hover {
    border-color: #333;
    border-color: var(--color-text-acc-1);
    color: #333;
    color: var(--color-text-acc-1)
}

.tag-list__item.focus-visible,
.tag-list__item:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.tag-list__item--accent {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    display: block;
    margin-right: .5em;
    margin-right: var(--gap-sm)
}

.tag-card {
    height: 100%
}

.tag-card__content {
    max-width: 35rem
}

.tag-card__title {
    font-size: 1.4rem
}

.tag-card__name {
    display: block;
    font-size: 1.2rem
}

.tag-card__name:active,
.tag-card__name:focus,
.tag-card__name:hover {
    text-decoration: underline
}

.tag-card__name.focus-visible,
.tag-card__name:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.tag-card__count,
.tag-card__descr,
.tag-card__title {
    text-align: center
}

.tag-card a.tag-card__media .tag-card__img:active,
.tag-card a.tag-card__media .tag-card__img:focus,
.tag-card a.tag-card__media .tag-card__img:hover {
    box-shadow: 0 0 0 3px grey;
    box-shadow: 0 0 0 3px var(--color-neutral)
}

.tag-card a.tag-card__media .tag-card__img.focus-visible,
.tag-card a.tag-card__media .tag-card__img:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.tag-card__img {
    display: block;
    width: 120px;
    height: 120px;
    min-width: 0;
    margin: 0 auto 1em;
    margin-bottom: var(--gap);
    -o-object-fit: cover;
    object-fit: cover;
    align-self: center;
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    box-shadow: 0 0 0 3px #f0f0f0;
    box-shadow: 0 0 0 3px var(--color-bg-acc-3)
}

.tag-card__img.mini {
    width: 74px;
    height: 74px
}

.tag-card.is-hero {
    min-height: 200px
}

.tag-card.is-hero,
.tag-card.is-hero:active,
.tag-card.is-hero:focus,
.tag-card.is-hero:hover {
    box-shadow: none
}

.tag-card.is-hero.focus-visible,
.tag-card.is-hero:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

@media only screen and (min-width:48em) {
    .tag-card.is-hero {
        display: flex
    }
    .tag-card.is-hero .tag-card__img {
        margin: 0 2em 0 0;
        margin-right: var(--gap-lg)
    }
    .tag-card.is-hero .tag-card__content {
        display: flex;
        flex-direction: column;
        justify-content: center
    }
    .tag-card.is-hero .tag-card__count,
    .tag-card.is-hero .tag-card__descr,
    .tag-card.is-hero .tag-card__title {
        text-align: left
    }
}

.toc-toggle {
    position: fixed;
    right: 1em;
    right: var(--gap);
    bottom: 5em;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    z-index: 50
}

@media only screen and (min-width:48em) {
    .toc-toggle {
        right: 2em;
        right: var(--gap-lg);
        bottom: 6em
    }
}

.toc-toggle:active,
.toc-toggle:focus,
.toc-toggle:hover {
    box-shadow: inset 0 0 0 2px #666;
    box-shadow: inset 0 0 0 2px var(--color-text-acc-3)
}

.toc-toggle.focus-visible,
.toc-toggle:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.toc-toggle.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.toc-toggle.is-active {
    box-shadow: inset 0 0 0 2px var(--ghost-accent-color, #7450f7);
    box-shadow: inset 0 0 0 2px #7450f7;
    box-shadow: inset 0 0 0 2px var(--color-primary);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.toc-toggle.is-active~.post-toc {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.post-toc {
    position: fixed;
    top: 1rem;
    min-width: 10rem;
    max-width: 20rem;
    right: 1em;
    right: var(--gap);
    padding: 1em;
    padding: var(--gap);
    background-color: #fff;
    background-color: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.post-toc__content {
    max-height: 65vh;
    overflow-y: scroll;
    font-size: .9rem;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    color: #666;
    color: var(--color-text-acc-3);
    -ms-overflow-style: none;
    scrollbar-width: none
}

.post-toc__content::-webkit-scrollbar {
    display: none
}

.post-toc .toc-list-item.is-active-li>a {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.post-toc .toc-list-item ol {
    padding-left: .5em;
    padding-left: var(--gap-sm)
}

.post-toc .toc-list-item::marker {
    color: transparent
}

.post-toc .toc-link {
    display: block;
    line-height: 1.2;
    margin-bottom: .5em;
    margin-bottom: var(--gap-sm)
}

.post-toc .toc-link:active,
.post-toc .toc-link:focus,
.post-toc .toc-link:hover {
    text-decoration: underline
}

.post-toc .toc-link.focus-visible,
.post-toc .toc-link:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.post-toc .js-toc>.toc-list {
    padding-left: 0;
    margin-bottom: 0
}

[data-header=sticky] .post-toc {
    top: 5rem
}

.user-menu {
    position: absolute;
    right: 1em;
    top: 3.5em;
    min-width: 12rem;
    background-color: #fff;
    background-color: var(--color-bg);
    flex-direction: column;
    cursor: auto;
    border-radius: 2px;
    border-radius: var(--global-radius);
    box-shadow: 0 0 0 1px #f2f2f2, 0 10px 20px 5px rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 1px var(--color-border), 0 10px 20px 5px rgba(0, 0, 0, .1);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px)
}

.user-menu.is-active,
.user-menu[focus-within] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.user-menu.is-active,
.user-menu:focus-within {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.user-menu i {
    margin-right: .5em;
    margin-right: var(--gap-sm)
}

.user-menu .member-user {
    display: flex;
    padding: 1em;
    padding: var(--gap)
}

.user-menu .member-avatar img {
    display: block;
    width: 35px;
    height: 35px
}

.user-menu .member-name {
    font-size: .9rem;
    font-weight: 500;
    font-weight: var(--font-weight-500);
    line-height: 1
}

.user-menu .member-email {
    font-size: .85rem;
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.user-menu .account-link,
.user-menu .signin-link,
.user-menu .signout-link,
.user-menu .signup-link,
.user-menu .upgrade-link {
    display: flex;
    padding: 1em;
    padding: var(--gap);
    min-height: 3rem;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border);
    outline: none
}

.user-menu .account-link:active,
.user-menu .account-link:focus,
.user-menu .account-link:hover,
.user-menu .signin-link:active,
.user-menu .signin-link:focus,
.user-menu .signin-link:hover,
.user-menu .signout-link:active,
.user-menu .signout-link:focus,
.user-menu .signout-link:hover,
.user-menu .signup-link:active,
.user-menu .signup-link:focus,
.user-menu .signup-link:hover,
.user-menu .upgrade-link:active,
.user-menu .upgrade-link:focus,
.user-menu .upgrade-link:hover {
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1);
    border-color: #f2f2f2;
    border-color: var(--color-border);
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.user-menu .account-link.focus-visible,
.user-menu .account-link:focus-visible,
.user-menu .signin-link.focus-visible,
.user-menu .signin-link:focus-visible,
.user-menu .signout-link.focus-visible,
.user-menu .signout-link:focus-visible,
.user-menu .signup-link.focus-visible,
.user-menu .signup-link:focus-visible,
.user-menu .upgrade-link.focus-visible,
.user-menu .upgrade-link:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

@media only screen and (min-width:36em) {
    .user-menu .upgrade-link {
        display: none
    }
}

@media only screen and (min-width:48em) {
    .user-menu .btn-theme-toggle {
        display: none
    }
}

.welcome {
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary);
    border-radius: 2px;
    border-radius: var(--global-radius);
    color: #e6e6e6;
    color: var(--color-light);
    min-height: 200px;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 1em;
    padding: var(--gap)
}

@media only screen and (min-width:36em) {
    .welcome {
        padding: 1.5em
    }
}

@media only screen and (min-width:48em) {
    .welcome {
        flex-direction: row;
        padding: 2em;
        padding: var(--gap-lg)
    }
}

.welcome__title {
    font-size: 1.6rem;
    margin-bottom: .5em;
    margin-bottom: var(--gap-sm);
    max-width: 32em
}

@media only screen and (min-width:48em) {
    .welcome__title {
        font-size: 1.8rem
    }
}

.welcome__profile {
    position: relative;
    margin: 0 0 1em;
    margin-bottom: var(--gap);
    border-radius: 50%;
    border-radius: var(--global-radius-round);
    overflow: hidden
}

@media only screen and (min-width:48em) {
    .welcome__profile {
        margin-bottom: 0;
        margin-right: 2em;
        margin-right: var(--gap-lg)
    }
}

.welcome__profile img {
    display: block;
    width: 120px;
    height: 120px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    background-color: hsla(0, 0%, 100%, .25);
    border: 3px solid hsla(0, 0%, 100%, .25);
    border-radius: inherit;
    z-index: 2;
    position: relative;
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.welcome__profile span {
    position: absolute;
    text-transform: uppercase;
    font-size: 4.6rem
}

.welcome a.welcome__profile:active img,
.welcome a.welcome__profile:focus img,
.welcome a.welcome__profile:hover img {
    border-color: transparent
}

.welcome a.welcome__profile.focus-visible,
.welcome a.welcome__profile:focus-visible {
    outline-color: #4d91fe;
    outline-color: var(--color-outline);
    outline-offset: -2px;
    outline-style: dashed;
    outline-width: 2px
}

.welcome__content {
    z-index: 10;
    text-align: center
}

@media only screen and (min-width:48em) {
    .welcome__content {
        text-align: left
    }
}

.welcome.has-bg:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, var(--ghost-accent-color, #7450f7), rgba(0, 0, 0, .25));
    background: linear-gradient(to bottom right, #7450f7, rgba(0, 0, 0, .25));
    background: linear-gradient(to bottom right, var(--color-primary), rgba(0, 0, 0, .25))
}

@media only screen and (min-width:48em) {
    .welcome.has-bg:after {
        background: linear-gradient(90deg, var(--ghost-accent-color, #7450f7), rgba(0, 0, 0, .25));
        background: linear-gradient(90deg, #7450f7, rgba(0, 0, 0, .25));
        background: linear-gradient(90deg, var(--color-primary), rgba(0, 0, 0, .25))
    }
}

.welcome__media {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    margin: 0
}

.welcome__media img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.welcome__descr {
    margin-bottom: 1em;
    margin-bottom: var(--gap);
    max-width: 32em
}

@media only screen and (min-width:48em) {
    .welcome__descr {
        margin-bottom: 1.5em;
        font-size: 1.1rem
    }
}

.welcome__figures {
    display: grid;
    grid-gap: 1em;
    grid-gap: var(--gap);
    z-index: 10;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2em;
    margin-top: var(--gap-lg);
    flex: 1
}

@media only screen and (min-width:36em) {
    .welcome__figures {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media only screen and (min-width:48em) {
    .welcome__figures {
        margin-top: 0;
        margin-left: 1em;
        margin-left: var(--gap);
        max-width: 22rem;
        grid-template-columns: repeat(2, 1fr)
    }
}

.welcome__stat {
    padding: 1.5em 1em;
    padding: 1.5em var(--gap);
    background-color: hsla(0, 0%, 100%, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 2px;
    border-radius: var(--global-radius);
    display: flex;
    flex-direction: column;
    position: relative
}

.welcome__count {
    font-size: 1.6rem;
    font-weight: 700;
    font-weight: var(--font-weight-700);
    color: #fff;
    color: var(--color-white);
    text-align: center;
    line-height: 1
}

@media only screen and (min-width:48em) {
    .welcome__count {
        font-size: 2rem
    }
}

.welcome__count-descr {
    font-size: .9rem;
    color: #fff;
    color: var(--color-white);
    font-weight: 500;
    font-weight: var(--font-weight-500);
    text-align: center
}

.border-1 {
    border: 1px solid #f2f2f2;
    border: 1px solid var(--color-border)
}

.border-2 {
    border: 2px solid #f2f2f2;
    border: 2px solid var(--color-border)
}

.border-top-1 {
    border-top: 1px solid #f2f2f2;
    border-top: 1px solid var(--color-border)
}

.border-right-1 {
    border-right: 1px solid #f2f2f2;
    border-right: 1px solid var(--color-border)
}

.border-bottom-1 {
    border-bottom: 1px solid #f2f2f2;
    border-bottom: 1px solid var(--color-border)
}

.border-left-1 {
    border-left: 1px solid #f2f2f2;
    border-left: 1px solid var(--color-border)
}

.radius {
    border-radius: 2px;
    border-radius: var(--global-radius)
}

.radius-round {
    border-radius: 50%;
    border-radius: var(--global-radius-round)
}

.w-100 {
    width: 100%
}

.h-100 {
    height: 100%
}

.h-10 {
    height: 10rem
}

.shadow {
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, .02)
}

.z-index-1 {
    z-index: 1
}

.z-index-minus-1 {
    z-index: -1
}

.m-b-dyn {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

@media only screen and (min-width:62em) {
    .m-b-dyn {
        margin-bottom: 2em;
        margin-bottom: var(--gap-lg)
    }
}

.m-t-dyn {
    margin-top: 1em;
    margin-top: var(--gap)
}

@media only screen and (min-width:62em) {
    .m-t-dyn {
        margin-top: 2em;
        margin-top: var(--gap-lg)
    }
}

.m {
    margin: 1em;
    margin: var(--gap)
}

.m-0 {
    margin: 0
}

.m-xs {
    margin: .25em;
    margin: var(--gap-xs)
}

.m-sm {
    margin: .5em;
    margin: var(--gap-sm)
}

.m-md {
    margin: 1em;
    margin: var(--gap)
}

.m-lg {
    margin: 2em;
    margin: var(--gap-lg)
}

.m-xl {
    margin: 4em;
    margin: var(--gap-xl)
}

.m-t {
    margin-top: 1em;
    margin-top: var(--gap)
}

.m-t-0 {
    margin-top: 0
}

.m-t-xs {
    margin-top: .25em;
    margin-top: var(--gap-xs)
}

.m-t-sm {
    margin-top: .5em;
    margin-top: var(--gap-sm)
}

.m-t-md {
    margin-top: 1em;
    margin-top: var(--gap)
}

.m-t-lg {
    margin-top: 2em;
    margin-top: var(--gap-lg)
}

.m-t-xl {
    margin-top: 4em;
    margin-top: var(--gap-xl)
}

.m-r {
    margin-right: 1em;
    margin-right: var(--gap)
}

.m-r-0 {
    margin-right: 0
}

.m-r-xs {
    margin-right: .25em;
    margin-right: var(--gap-xs)
}

.m-r-sm {
    margin-right: .5em;
    margin-right: var(--gap-sm)
}

.m-r-md {
    margin-right: 1em;
    margin-right: var(--gap)
}

.m-r-lg {
    margin-right: 2em;
    margin-right: var(--gap-lg)
}

.m-r-xl {
    margin-right: 4em;
    margin-right: var(--gap-xl)
}

.m-b {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

.m-b-0 {
    margin-bottom: 0
}

.m-b-xs {
    margin-bottom: .25em;
    margin-bottom: var(--gap-xs)
}

.m-b-sm {
    margin-bottom: .5em;
    margin-bottom: var(--gap-sm)
}

.m-b-md {
    margin-bottom: 1em;
    margin-bottom: var(--gap)
}

.m-b-lg {
    margin-bottom: 2em;
    margin-bottom: var(--gap-lg)
}

.m-b-xl {
    margin-bottom: 4em;
    margin-bottom: var(--gap-xl)
}

.m-l {
    margin-left: 1em;
    margin-left: var(--gap)
}

.m-l-0 {
    margin-left: 0
}

.m-l-xs {
    margin-left: .25em;
    margin-left: var(--gap-xs)
}

.m-l-sm {
    margin-left: .5em;
    margin-left: var(--gap-sm)
}

.m-l-md {
    margin-left: 1em;
    margin-left: var(--gap)
}

.m-l-lg {
    margin-left: 2em;
    margin-left: var(--gap-lg)
}

.m-l-xl {
    margin-left: 4em;
    margin-left: var(--gap-xl)
}

.p {
    padding: 1em;
    padding: var(--gap)
}

.p-0 {
    padding: 0
}

.p-xs {
    padding: .25em;
    padding: var(--gap-xs)
}

.p-sm {
    padding: .5em;
    padding: var(--gap-sm)
}

.p-md {
    padding: 1em;
    padding: var(--gap)
}

.p-lg {
    padding: 2em;
    padding: var(--gap-lg)
}

.p-xl {
    padding: 4em;
    padding: var(--gap-xl)
}

.p-t {
    padding-top: 1em;
    padding-top: var(--gap)
}

.p-t-0 {
    padding-top: 0
}

.p-t-xs {
    padding-top: .25em;
    padding-top: var(--gap-xs)
}

.p-t-sm {
    padding-top: .5em;
    padding-top: var(--gap-sm)
}

.p-t-md {
    padding-top: 1em;
    padding-top: var(--gap)
}

.p-t-lg {
    padding-top: 2em;
    padding-top: var(--gap-lg)
}

.p-t-xl {
    padding-top: 4em;
    padding-top: var(--gap-xl)
}

.p-r {
    padding-right: 1em;
    padding-right: var(--gap)
}

.p-r-0 {
    padding-right: 0
}

.p-r-xs {
    padding-right: .25em;
    padding-right: var(--gap-xs)
}

.p-r-sm {
    padding-right: .5em;
    padding-right: var(--gap-sm)
}

.p-r-md {
    padding-right: 1em;
    padding-right: var(--gap)
}

.p-r-lg {
    padding-right: 2em;
    padding-right: var(--gap-lg)
}

.p-r-xl {
    padding-right: 4em;
    padding-right: var(--gap-xl)
}

.p-b {
    padding-bottom: 1em;
    padding-bottom: var(--gap)
}

.p-b-0 {
    padding-bottom: 0
}

.p-b-xs {
    padding-bottom: .25em;
    padding-bottom: var(--gap-xs)
}

.p-b-sm {
    padding-bottom: .5em;
    padding-bottom: var(--gap-sm)
}

.p-b-md {
    padding-bottom: 1em;
    padding-bottom: var(--gap)
}

.p-b-lg {
    padding-bottom: 2em;
    padding-bottom: var(--gap-lg)
}

.p-b-xl {
    padding-bottom: 4em;
    padding-bottom: var(--gap-xl)
}

.p-l {
    padding-left: 1em;
    padding-left: var(--gap)
}

.p-l-0 {
    padding-left: 0
}

.p-l-xs {
    padding-left: .25em;
    padding-left: var(--gap-xs)
}

.p-l-sm {
    padding-left: .5em;
    padding-left: var(--gap-sm)
}

.p-l-md {
    padding-left: 1em;
    padding-left: var(--gap)
}

.p-l-lg {
    padding-left: 2em;
    padding-left: var(--gap-lg)
}

.p-l-xl {
    padding-left: 4em;
    padding-left: var(--gap-xl)
}

.fw-100 {
    font-weight: 100
}

.fw-200 {
    font-weight: 200
}

.fw-300 {
    font-weight: 300
}

.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.fw-800 {
    font-weight: 800
}

.fw-900 {
    font-weight: 900
}

.italic {
    font-style: italic
}

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

.font-mono {
    font-family: Lucida Console, Monaco, monospace;
    font-family: var(--font-mono)
}

.font-serif {
    font-family: Times, Georgia, serif;
    font-family: var(--font-serif)
}

.font-sans {
    font-family: Jost, Arial, Tahoma, sans-serif;
    font-family: var(--font-sans)
}

.text-xxs {
    font-size: .6rem
}

.text-xs {
    font-size: .8rem
}

.text-sm {
    font-size: .9rem
}

.text-md {
    font-size: 1rem
}

.text-lg {
    font-size: 1.1rem
}

.text-xl {
    font-size: 1.2rem
}

.text-xxl {
    font-size: 1.4rem
}

.text-xxxl {
    font-size: 1.6rem
}

.line-height-1 {
    line-height: 1
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.flex {
    display: flex
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-col {
    flex-direction: column
}

.flex-col,
.flex-row {}

.flex-row {
    flex-direction: row
}

.flex-1 {
    flex: 1
}

.flex-0 {
    flex: 0
}

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

.content-start {
    justify-content: flex-start
}

.content-center {
    justify-content: center
}

.content-end {
    justify-content: flex-end
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.items-end {
    align-items: flex-end
}

.self-justify-start {
    justify-self: flex-start
}

.self-justify-center {
    justify-self: center
}

.self-justify-end {
    justify-self: flex-end
}

.self-align-start {
    align-self: flex-start
}

.self-align-center {
    align-self: center
}

.self-align-end {
    align-self: flex-end
}

.is-hidden {
    display: none;
    visibility: hidden;
    opacity: 0
}

.is-in-view {
    display: block
}

.lazyload {
    opacity: 0
}

.lazyload,
.lazyloading {
    filter: blur(10px);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.lazyloading {
    opacity: .5
}

.lazyloaded {
    opacity: 1;
    filter: blur(0);
    transition: all .4s ease-in-out;
    transition: all var(--trans-default)
}

.is-sticky {
    position: sticky
}

.is-fixed {
    position: fixed
}

.is-abs {
    position: absolute
}

.is-rel {
    position: relative
}

.is-round {
    border-radius: 50%;
    border-radius: var(--global-radius-round)
}

[data-color-scheme=dark] .initial.loaded,
[data-color-scheme=dark] .lazyload.loaded {
    filter: blur(0) brightness(.8) contrast(1.2)
}

.animate {
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-duration: var(--trans-duration-lg);
    animation-duration: var(--trans-duration-lg);
    -webkit-animation-delay: 0ms;
    animation-delay: 0ms;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.fade-in {
    -webkit-animation-name: a;
    animation-name: a
}

.fade-in-down {
    -webkit-animation-name: b;
    animation-name: b
}

.fade-in-left {
    -webkit-animation-name: c;
    animation-name: c
}

.fade-in-right {
    -webkit-animation-name: d;
    animation-name: d
}

.fade-in-up {
    -webkit-animation-name: e;
    animation-name: e
}

.color-primary {
    color: var(--ghost-accent-color, #7450f7);
    color: #7450f7;
    color: var(--color-primary)
}

.color-secondary {
    color: #f77a3b;
    color: var(--color-secondary)
}

.color-white {
    color: #fff;
    color: var(--color-white)
}

.color-light {
    color: #e6e6e6;
    color: var(--color-light)
}

.color-dark {
    color: #1a1a1a;
    color: var(--color-dark)
}

.color-black {
    color: #000;
    color: var(--color-black)
}

.color-default {
    color: #1a1a1a;
    color: var(--color-text)
}

.color-success {
    color: #48c774;
    color: var(--color-success)
}

.color-error {
    color: #fc365e;
    color: var(--color-error)
}

.color-warning {
    color: #fddc58;
    color: var(--color-warning)
}

.color-info {
    color: #259eef;
    color: var(--color-info)
}

.text-acc-1 {
    color: #333;
    color: var(--color-text-acc-1)
}

.text-acc-2 {
    color: #4d4d4d;
    color: var(--color-text-acc-2)
}

.text-acc-3 {
    color: #666;
    color: var(--color-text-acc-3)
}

.bg-primary {
    background-color: var(--ghost-accent-color, #7450f7);
    background-color: #7450f7;
    background-color: var(--color-primary)
}

.bg-secondary {
    background-color: #f77a3b;
    background-color: var(--color-secondary)
}

.bg-default {
    background-color: #fff;
    background-color: var(--color-bg)
}

.bg-acc-1 {
    background-color: #fafafa;
    background-color: var(--color-bg-acc-1)
}

.bg-acc-2 {
    background-color: #f5f5f5;
    background-color: var(--color-bg-acc-2)
}

.bg-acc-3 {
    background-color: #f0f0f0;
    background-color: var(--color-bg-acc-3)
}

.bg-text {
    background-color: #1a1a1a;
    background-color: var(--color-text)
}

.bg-gradient {
    background: linear-gradient(135deg, var(--ghost-accent-color, #7450f7), #f77a3b);
    background: linear-gradient(135deg, #7450f7, #f77a3b);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary))
}

.bg-gradient-radial {
    background: radial-gradient(circle, var(--color-secondary) 40%, grey 52%, var(--ghost-accent-color, #7450f7) 68%);
    background: radial-gradient(circle, #f77a3b 40%, grey 52%, #7450f7 68%);
    background: radial-gradient(circle, var(--color-secondary) 40%, var(--color-neutral) 52%, var(--color-primary) 68%)
}

.overlay {
    position: relative
}

.overlay:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #1a1a1a;
    background-color: var(--color-dark);
    opacity: .25
}

.overlay__dark {
    position: relative
}

.overlay__dark:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #1a1a1a;
    background-color: var(--color-dark);
    opacity: .4
}