:root {
    --color-white: #fff;
    --color-black: #000;
    --color-facebook: #1877f2;
    --color-twitter: #1d9bf0;
    --color-whatsapp: #25d366;
    --color-linkedin: #0a66c2;
    --color-reddit: #ff4500;
    --color-telegram: #26a5e4;
    --color-pinterest: #e60023;
    --color-bluesky: #0285fe;
    --color-success: #16a34a;
    --color-error: #ef4444;
    --font-heading: var(--gh-font-heading, "Red Hat Display", sans-serif);
    --font-button: var(--gh-font-heading, "Red Hat Mono", sans-serif);
    --font-body: var(--gh-font-body, "Red Hat Text", sans-serif);
    --font-x-small: 0.875rem;
    --font-small: 0.9375rem;
    --font-large: 1.125rem;
    --font-thin: 300;
    --font-regular: 400;
    --font-medium: 450;
    --font-semibold: 550;
    --font-bold: 650;
    --spacing-1: 2px;
    --spacing-2: 4px;
    --spacing-3: 6px;
    --spacing-4: 8px;
    --spacing-5: 10px;
    --spacing-6: 12px;
    --spacing-7: 16px;
    --spacing-8: 20px;
    --spacing-9: 30px;
    --spacing-10: clamp(30px, 20.5263px + 2.6316vw, 60px);
    --vertical-rhythm: clamp(16px, 14.7368px + 0.3509vw, 20px);
    --layout--padding: clamp(16px, 11.5789px + 1.2281vw, 30px);
    --layout--gap: clamp(60px, 47.3684px + 3.5088vw, 100px);
    --navbar--min-height: 60px;
    --navbar--height: var(--navbar--min-height);
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 12px;
    --radius-4: 16px;
    --radius-5: clamp(20px, 17.4737px + 0.7018vw, 28px);
    --container--padding: clamp(16px, 11.5789px + 1.2281vw, 30px);
    --container--width: min(1300px, calc(var(--screen-width) - var(--container--padding)*2));
    --container-small--width: min(800px, calc(var(--screen-width) - var(--container--padding)*2));
    --container-wide--width: min(1600px, calc(var(--screen-width) - var(--container--padding)*2));
    --container-full--width: 100%;
    --button--padding-v: 8px;
    --button--padding-h: 18px;
    --button--min-height: 40px;
    --button--font-size: var(--font-small);
    --button--font-weight: var(--font-semibold);
    --button--border-radius: 2rem;
    --button--opacity: 1;
    --button--transition: color .15s ease, background-color .15s ease, opacity .15s ease, transform .2s ease;
    --button-hover--opacity: 0.9;
    --button-hover--transform: translateY(-1px);
    --feature-media--radius: var(--radius-4);
    --screen-width: calc(100vw - var(--scrollbar-width, 0px));
    accent-color: var(--ghost-accent-color)
}

.dark,
.light {
    --button--color: var(--color-accent-foreground);
    --button--background-color: var(--ghost-accent-color);
    --button-hover--color: var(--color-accent-foreground);
    --button-hover--background-color: var(--ghost-accent-color);
    --avatar--color: var(--color-contrast);
    --avatar--background-color: color-mix(in srgb, var(--color-contrast), transparent 90%);
    --avatar-hover--background-color: color-mix(in srgb, var(--color-contrast), transparent 85%)
}

.light {
    --csstools-color-scheme--light: initial;
    color: var(--color-foreground);
    color-scheme: light
}

.dark {
    --csstools-color-scheme--light: ;
    color: var(--color-foreground);
    color-scheme: dark
}

html {
    scroll-behavior: smooth
}

body,
html {
    display: flex;
    min-height: 100%
}

body {
    flex-direction: column;
    width: 100%
}

body>main {
    margin-bottom: auto
}

body:has(.dialog[open]) {
    padding-right: var(--scrollbar-width, 0)
}

form {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-5);
    padding: var(--spacing-9)
}

form input,
form select,
form textarea {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    color: var(--color-contrast);
    display: block;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 42px;
    padding: var(--spacing-4) var(--spacing-7);
    width: 100%
}

form input::-moz-placeholder,
form select::-moz-placeholder,
form textarea::-moz-placeholder {
    color: var(--color-secondary)
}

form input::placeholder,
form select::placeholder,
form textarea::placeholder {
    color: var(--color-secondary)
}

form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m18 9-6 6-6-6" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-position: right var(--spacing-5) center;
    background-repeat: no-repeat;
    background-size: 1em
}

form textarea {
    height: 100px;
    max-height: calc(100vh - var(--navbar--height));
    max-width: 100%;
    min-width: 100%;
    width: 100%
}

form label {
    display: inline-block
}

form label+:where(input, textarea, select) {
    margin-top: var(--spacing-4)
}

form :where(input, textarea, select)+label {
    margin-top: var(--spacing-7)
}

form label:has(>[type=checkbox], >[type=radio]) {
    display: block
}

form label:has(>[type=checkbox], >[type=radio])+label:has(>[type=checkbox], >[type=radio]) {
    margin-top: var(--spacing-4)
}

form label>[type=checkbox],
form label>[type=radio] {
    display: inline-block;
    float: left;
    margin-right: var(--spacing-4);
    min-height: 1lh;
    width: auto
}

form button {
    margin-top: var(--spacing-7)
}

.form-subscribe-message>p {
    font-size: var(--font-small);
    margin-top: var(--spacing-4)
}

.form-subscribe-message>.success {
    color: var(--color-success)
}

.form-subscribe-message>.error {
    color: var(--color-error)
}

h1 {
    font-size: 2.5rem;
    font-weight: 600
}

h1,
h2 {
    line-height: 1.2
}

h2 {
    font-size: 2rem;
    font-weight: 650
}

h3 {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3
}

h4 {
    font-size: 1.5rem;
    line-height: 1.35
}

h4,
h5 {
    font-weight: 750
}

h5 {
    font-size: 1.25rem;
    line-height: 1.4
}

h6 {
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.45
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-contrast);
    font-family: var(--font-heading)
}

.display-1 {
    font-size: clamp(2.5rem, 2.2632rem + 1.0526vw, 3.25rem)
}

.display-1,
.display-2 {
    font-weight: var(--font-semibold);
    line-height: 1.2
}

.display-2 {
    font-size: clamp(2rem, 1.8421rem + .7018vw, 2.5rem)
}

.display-3 {
    font-size: clamp(1.75rem, 1.6711rem + .3509vw, 2rem);
    font-weight: var(--font-bold);
    line-height: 1.2
}

body {
    background-color: var(--color-background);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5
}

a {
    transition: color .15s ease
}

a:where(:hover) {
    color: var(--ghost-accent-color)
}

div.kg-audio-card {
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: none;
    color: var(--color-contrast)
}

div.kg-audio-card .kg-audio-thumbnail {
    border-radius: var(--radius-2)
}

.kg-bookmark-card {
    background-color: transparent;
    border-radius: var(--radius-3);
    position: relative;
    transition: background-color .2s ease
}

.kg-bookmark-card+.kg-bookmark-card {
    margin-top: var(--spacing-8)
}

.kg-bookmark-card:before {
    border: 1px solid var(--color-border);
    border-radius: inherit;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.kg-bookmark-card:hover {
    background-color: var(--color-background-100)
}

a.kg-bookmark-container {
    color: var(--color-contrast);
    display: flex;
    -webkit-text-decoration: none;
    text-decoration: none
}

.kg-bookmark-content {
    padding: var(--spacing-7) var(--spacing-8)
}

.kg-bookmark-title {
    font-weight: var(--font-semibold)
}

.kg-bookmark-description {
    color: var(--color-foreground);
    margin-top: var(--spacing-4)
}

.kg-bookmark-thumbnail {
    flex: 0 0 40%;
    position: relative
}

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

.kg-bookmark-metadata {
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    margin-top: var(--spacing-6)
}

.kg-bookmark-metadata .kg-bookmark-icon {
    border-radius: var(--radius-1);
    display: inline;
    float: left;
    height: 1lh;
    margin-right: var(--spacing-4);
    width: 1lh
}

.kg-button-card {
    display: flex
}

.kg-button-card.kg-align-center {
    justify-content: center
}

.kg-button-card.kg-align-left {
    justify-content: flex-start
}

.kg-btn.kg-btn-accent {
    background-color: var(--ghost-accent-color);
    color: var(--color-accent-foreground)
}

div.kg-callout-card {
    border-radius: var(--radius-3);
    padding: var(--spacing-7) var(--spacing-8)
}

.kg-embed-card>[src*="player.vimeo.com"],
.kg-embed-card>[src*="youtube.com"] {
    aspect-ratio: 16/9;
    border-radius: var(--radius-3);
    display: block;
    height: auto;
    width: 100%
}

.kg-embed-card>.twitter-tweet {
    margin: 0 auto !important
}

div.kg-file-card a.kg-file-card-container {
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    color: var(--color-contrast);
    transition: border-color .2s ease
}

div.kg-file-card a.kg-file-card-container:hover {
    border-color: color-mix(in srgb, var(--color-border), var(--color-contrast) 20%)
}

div.kg-file-card-icon:before {
    border-radius: var(--radius-2);
    transition-duration: .2s;
    transition-timing-function: ease
}

.kg-header-card-content {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - var(--navbar--height))
}

@media (max-width:767px) {
    .kg-layout-split .kg-header-card-content {
        display: block
    }
}

.kg-layout-split .kg-header-card-content>picture {
    align-self: stretch;
    background-color: var(--color-background-200);
    flex: 1 0 50%
}

.kg-layout-split .kg-header-card-content>picture>img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.kg-layout-split .kg-header-card-content>.kg-header-card-text {
    align-self: center;
    flex: 1 0 50%;
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10)
}

.kg-content-wide .kg-header-card-content {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container--width);
    width: 100%
}

.kg-content-wide .kg-header-card-content>.kg-header-card-text {
    padding-right: 0
}

.kg-width-wide .kg-header-card-content {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7)
}

.kg-width-wide .kg-header-card-content .kg-header-card-text {
    margin: 0 auto;
    max-width: var(--container-small--width);
    width: 100%
}

.kg-width-regular .kg-header-card-content {
    min-height: auto;
    padding-left: clamp(20px, 10.5263px + 2.6316vw, 50px);
    padding-right: clamp(20px, 10.5263px + 2.6316vw, 50px)
}

.kg-header-card:not(.kg-layout-split) {
    position: relative
}

.kg-header-card:not(.kg-layout-split)>picture {
    background-color: var(--color-black);
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.kg-header-card:not(.kg-layout-split)>picture>img {
    height: 120%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: .8;
    top: -10%;
    width: 100%
}

.kg-header-card:not(.kg-layout-split)>.kg-header-card-content {
    position: relative;
    z-index: 1
}

.kg-header-card-text {
    padding-bottom: var(--layout--gap);
    padding-top: var(--layout--gap)
}

.kg-header-card-text.kg-align-center {
    text-align: center
}

.kg-header-card-text>h2,
.kg-header-card-text>p {
    max-width: var(--container-small--width);
    width: 100%
}

.kg-header-card-text>h2 {
    font-size: clamp(40px, 38.1053px + .5263vw, 46px)
}

.kg-header-card-text>p {
    font-size: clamp(16px, 15.3684px + .1754vw, 18px);
    margin-top: var(--spacing-7)
}

.kg-header-card-text>a {
    margin-top: var(--spacing-8)
}

.kg-header-card[data-background-color="#F0F0F0"] {
    background-color: var(--color-background-100) !important
}

.kg-header-card[data-background-color="#F0F0F0"].kg-layout-split h2 {
    color: var(--color-contrast) !important
}

.kg-header-card[data-background-color="#F0F0F0"].kg-layout-split p {
    color: var(--color-foreground) !important
}

.kg-header-card[data-background-color=accent] {
    background-color: var(--ghost-accent-color)
}

.kg-header-card .kg-header-card-button.kg-style-accent {
    background-color: var(--ghost-accent-color) !important;
    color: var(--color-accent-foreground) !important
}

.kg-gallery-image img,
.kg-image-card img {
    border-radius: var(--radius-3)
}

.kg-image-card.kg-width-full img {
    border-radius: 0
}

div.kg-product-card-container {
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    box-shadow: none;
    color: var(--color-contrast)
}

.kg-product-card img {
    border-radius: var(--radius-2);
    width: 100%
}

.kg-signup-card-content {
    align-items: center;
    display: flex;
    height: calc(100vh - var(--navbar--height));
    justify-content: center;
    min-height: -moz-min-content;
    min-height: min-content
}

@media (max-width:767px) {
    .kg-layout-split .kg-signup-card-content {
        display: block
    }
}

.kg-layout-split .kg-signup-card-content>picture {
    align-self: stretch;
    background-color: var(--color-background-200);
    flex: 1 0 50%
}

.kg-layout-split .kg-signup-card-content>picture>img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.kg-layout-split .kg-signup-card-content>.kg-signup-card-text {
    align-self: center;
    flex: 1 0 50%;
    padding-left: var(--spacing-10);
    padding-right: var(--spacing-10)
}

.kg-content-wide .kg-signup-card-content {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container--width);
    width: 100%
}

.kg-content-wide .kg-signup-card-content>.kg-signup-card-text {
    padding-right: 0
}

.kg-width-wide .kg-signup-card-content {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7)
}

.kg-width-wide .kg-signup-card-content .kg-signup-card-text {
    margin: 0 auto;
    max-width: var(--container-small--width);
    width: 100%
}

.kg-width-regular .kg-signup-card-content {
    height: auto;
    padding-left: clamp(20px, 10.5263px + 2.6316vw, 50px);
    padding-right: clamp(20px, 10.5263px + 2.6316vw, 50px)
}

.kg-signup-card:not(.kg-layout-split) {
    position: relative
}

.kg-signup-card:not(.kg-layout-split)>picture {
    background-color: var(--color-black);
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.kg-signup-card:not(.kg-layout-split)>picture>img {
    height: 120%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: .8;
    top: -10%;
    width: 100%
}

.kg-signup-card:not(.kg-layout-split)>.kg-signup-card-content {
    position: relative;
    z-index: 1
}

.kg-signup-card-text {
    padding-bottom: var(--layout--gap);
    padding-top: var(--layout--gap)
}

.kg-signup-card-text.kg-align-center {
    text-align: center
}

.kg-signup-card-text>h2,
.kg-signup-card-text>p {
    max-width: var(--container-small--width);
    width: 100%
}

.kg-signup-card-text>h2 {
    font-size: clamp(40px, 38.1053px + .5263vw, 46px)
}

.kg-signup-card-text>p {
    font-size: clamp(16px, 15.3684px + .1754vw, 18px);
    margin-top: var(--spacing-7)
}

.kg-signup-card-text>.kg-signup-card-disclaimer {
    font-size: 1rem
}

.kg-signup-card-text>form {
    border: 0;
    margin-top: var(--spacing-10);
    padding: 0
}

.kg-signup-card-form {
    position: relative
}

.kg-signup-card-form .kg-signup-card-fields {
    display: flex;
    max-width: 400px;
    padding: 4px;
    position: relative;
    width: 100%
}

.kg-align-center .kg-signup-card-form .kg-signup-card-fields {
    margin-left: auto;
    margin-right: auto
}

.kg-signup-card-form.loading {
    pointer-events: none
}

.kg-signup-card-form.loading button {
    visibility: hidden
}

.kg-signup-card-form.loading .kg-signup-card-button-loading {
    visibility: visible
}

.kg-signup-card-form input {
    border: 0;
    border-radius: 3rem;
    height: 100%;
    left: 0;
    padding-left: var(--spacing-8);
    padding-right: 8rem;
    position: absolute;
    top: 0
}

.kg-signup-card-form button {
    margin-left: auto;
    margin-top: 0;
    position: relative
}

.kg-signup-card-form .kg-signup-card-button-loading {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden
}

.kg-signup-card-form .kg-signup-card-success {
    display: none;
    font-size: clamp(16px, 15.3684px + .1754vw, 18px);
    font-weight: var(--font-medium);
    margin-top: var(--spacing-6)
}

.kg-signup-card-form.success .kg-signup-card-fields,
.kg-signup-card-form.success+.kg-signup-card-disclaimer {
    display: none
}

.kg-signup-card-form.success .kg-signup-card-success {
    display: block
}

.kg-signup-card.kg-style-accent {
    background-color: var(--ghost-accent-color)
}

.kg-signup-card.kg-style-accent .kg-signup-card-disclaimer,
.kg-signup-card.kg-style-accent .kg-signup-card-heading,
.kg-signup-card.kg-style-accent .kg-signup-card-subheading,
.kg-signup-card.kg-style-accent .kg-signup-card-success {
    color: var(--color-accent-foreground) !important
}

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] {
    background-color: var(--color-background-100) !important
}

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-heading,
.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-success {
    color: var(--color-contrast) !important
}

.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-disclaimer,
.kg-signup-card[style="background-color: rgb(240, 240, 240);"] .kg-signup-card-subheading {
    color: var(--color-foreground) !important
}

.kg-signup-card[data-background-color=accent] {
    background-color: var(--ghost-accent-color)
}

.kg-signup-card .kg-signup-card-button.kg-style-accent {
    background-color: var(--button--background-color) !important;
    color: var(--button--color) !important
}

.kg-signup-card .kg-signup-card-button.kg-style-accent:hover {
    background-color: var(--button-hover--background-color) !important;
    color: var(--button-hover--color) !important
}

.kg-toggle-card+.kg-toggle-card {
    margin-top: var(--spacing-5)
}

.kg-toggle-content {
    padding-left: var(--spacing-7);
    padding-right: var(--spacing-7)
}

.kg-toggle-content>:first-child {
    margin-top: var(--spacing-6)
}

.kg-toggle-card:has(+.kg-toggle-card) .kg-toggle-content>:last-child {
    margin-bottom: var(--spacing-7)
}

.kg-toggle-heading-text,
.kg-toggle-heading>button {
    font-size: 1rem;
    font-weight: var(--font-semibold);
    line-height: 1.4
}

.kg-toggle-heading {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    display: flex;
    gap: var(--spacing-6);
    padding: var(--spacing-6) var(--spacing-7);
    transition: border-color .2s ease
}

.kg-toggle-heading:hover {
    border-color: color-mix(in srgb, var(--color-border), var(--color-contrast) 20%);
    transition-duration: 0s
}

.kg-toggle-heading>button {
    margin-right: calc(var(--spacing-2)*-1)
}

.kg-video-card {
    position: relative;
    z-index: 1
}

.kg-video-card .kg-video-container {
    border-radius: var(--radius-3)
}

.button,
.kg-btn,
.kg-button-card>a,
.kg-header-card-button,
div.kg-product-card a.kg-product-card-button,
form button {
    align-items: center;
    background-color: var(--button--background-color);
    border-radius: var(--button--border-radius);
    color: var(--button--color);
    display: inline-flex;
    font-family: var(--font-button);
    font-size: var(--button--font-size);
    font-weight: var(--button--font-weight);
    justify-content: center;
    min-height: var(--button--min-height);
    opacity: var(--button--opacity);
    padding: var(--button--padding-v) var(--button--padding-h);
    position: relative;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: var(--button--transition)
}

.button svg,
.kg-btn svg,
.kg-button-card>a svg,
.kg-header-card-button svg,
div.kg-product-card a.kg-product-card-button svg,
form button svg {
    display: block;
    height: 1.125em;
    width: 1.125em
}

.button:hover,
.kg-btn:hover,
.kg-button-card>a:hover,
.kg-header-card-button:hover,
div.kg-product-card a.kg-product-card-button:hover,
form button:hover {
    background-color: var(--button-hover--background-color);
    color: var(--button-hover--color);
    opacity: var(--button-hover--opacity);
    transform: var(--button-hover--transform)
}

.pagination-button>.loader {
    display: none;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.pagination-button>.loader>svg {
    animation: echo-icon-loader .6s linear infinite
}

.pagination-button>.complete {
    display: none
}

.pagination-button.loading {
    pointer-events: none
}

.pagination-button.loading>.loader {
    display: block
}

.pagination-button.loading>.label {
    opacity: 0
}

.pagination-button.complete {
    background-color: var(--button--background-color);
    color: var(--button--color);
    transform: none
}

.pagination-button.complete>.label {
    display: none
}

.pagination-button.complete>.complete {
    display: block
}

.button-navbar {
    --button--padding-v: var(--spacing-4);
    --button--padding-h: var(--spacing-4);
    --button--min-height: auto;
    --button--font-size: 1rem;
    --button--color: var(--color-contrast);
    --button--background-color: transparent;
    --button-hover--color: var(--color-contrast);
    --button-hover--background-color: var(--color-background-300)
}

.button-navbar svg {
    height: 1em;
    width: 1em
}

@keyframes echo-icon-loader {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.card {
    position: relative;
    transition: transform .3s ease
}

.card:hover {
    transform: translateY(-2px)
}

.card>a {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

@media (min-width:576px) {
    .card:before {
        background-color: var(--color-background-100);
        bottom: calc(var(--spacing-6)*-1);
        clip-path: inset(var(--spacing-2) round var(--radius-5) var(--radius-5) var(--radius-4) var(--radius-4));
        content: "";
        left: calc(var(--spacing-6)*-1);
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: calc(var(--spacing-6)*-1);
        top: calc(var(--spacing-6)*-1);
        transition: opacity .3s ease, clip-path .3s ease;
        z-index: -1
    }

    .card:hover:before {
        clip-path: inset(0 round var(--radius-5) var(--radius-5) var(--radius-4) var(--radius-4));
        opacity: 1;
        transition-duration: .2s
    }
}

.carousel-cards {
    --carousel-cards--count: 4;
    --carousel-cards--aspect-ratio: 1/1;
    --carousel-cards--gap: var(--spacing-9);
    --carousel-cards--card--width: max(260px, calc((var(--container--width) - var(--spacing-9)*(var(--carousel-cards--count) - 1))/var(--carousel-cards--count)));
    margin-bottom: calc(var(--spacing-6)*-1);
    margin-top: calc(var(--spacing-6)*-1);
    overflow: hidden;
    position: relative
}

.has-post-card-aspect-ratio .carousel-cards {
    --carousel-cards--aspect-ratio: var(--post-card--aspect-ratio)
}

.carousel-cards>.carousel-container {
    align-items: flex-start;
    display: flex;
    gap: var(--carousel-cards--gap);
    padding: var(--spacing-6) calc((var(--screen-width) - var(--container--width))/2) var(--spacing-6) calc((var(--screen-width) - var(--container--width))/2)
}

.carousel-cards>.carousel-container>* {
    flex: 0 0 var(--carousel-cards--card--width)
}

.carousel-cards>.carousel-controls {
    align-items: center;
    aspect-ratio: var(--carousel-cards--aspect-ratio);
    display: flex;
    justify-content: space-between;
    left: calc((var(--screen-width) - var(--container--width))/2);
    margin-bottom: calc(var(--spacing-6)*-1);
    max-width: var(--carousel-cards--card--width);
    pointer-events: none;
    position: absolute;
    top: var(--spacing-6);
    width: 100%;
    z-index: 2
}

.carousel-cards>.carousel-controls>.carousel-button-prev {
    transform: translateX(-50%)
}

.carousel-cards>.carousel-controls>.carousel-button-next {
    left: var(--container--width);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.carousel-cards>.carousel-controls>.carousel-button-next,
.carousel-cards>.carousel-controls>.carousel-button-prev {
    background-color: var(--color-background);
    border-radius: 50%;
    box-shadow: 0 2px 20px -5px rgba(0, 0, 0, .16);
    padding: var(--spacing-5);
    pointer-events: visible;
    transition-duration: .15s;
    transition-property: opacity, visibility, color, background-color;
    transition-timing-function: ease-in-out
}

.carousel-cards>.carousel-controls>.carousel-button-next>svg,
.carousel-cards>.carousel-controls>.carousel-button-prev>svg {
    display: block;
    height: 1.125em;
    width: 1.125em
}

.carousel-cards>.carousel-controls>.carousel-button-next:hover,
.carousel-cards>.carousel-controls>.carousel-button-prev:hover {
    background-color: var(--color-contrast);
    color: var(--color-background)
}

.carousel-cards.carousel-end .carousel-button-next,
.carousel-cards.carousel-start .carousel-button-prev {
    opacity: 0;
    pointer-events: none
}

.dark-mode-toggle {
    align-items: center;
    color: var(--color-foreground);
    display: flex;
    flex: 0 0 auto;
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    gap: var(--spacing-4);
    transition: color .15s ease-in-out
}

.dark-mode-toggle>.switch {
    border: 1px solid var(--color-border);
    border-radius: 26px;
    color: var(--color-secondary);
    display: block;
    height: 16px;
    transition: border-color .2s ease-in-out, color .2s ease-in-out;
    width: 26px
}

.dark-mode-toggle>.switch:before {
    background-color: currentcolor;
    border-radius: 5px;
    content: "";
    display: block;
    height: 10px;
    margin-left: 2px;
    margin-top: 2px;
    transition: transform .2s ease-in-out !important;
    width: 10px
}

.dark .dark-mode-toggle>.switch:before {
    transform: translateX(100%)
}

.dark .dark-mode-toggle>.label-light,
.light .dark-mode-toggle>.label-dark {
    display: none
}

.dark-mode-toggle:hover {
    color: var(--color-contrast);
    transition-duration: 0s
}

.dark-mode-toggle:hover>.switch {
    border-color: var(--color-mute);
    color: var(--color-foreground);
    transition-duration: 0s
}

.cursor {
    filter: blur(6px);
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    transition: var(--cursor--transition), filter .3s ease, width .3s ease
}

.cursor>span {
    animation: echo-cursor-text-move-in .3s ease
}

.cursor>span:has(+span) {
    animation: echo-cursor-text-move-out .3s ease;
    transform: translateY(-100%)
}

.cursor-show {
    filter: blur(0);
    transition-duration: .5s, 0s, .3s
}

@keyframes echo-cursor-text-move-in {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes echo-cursor-text-move-out {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-100%)
    }
}

.dropdown {
    --dropdown--left: calc(var(--spacing-2)*-1 - var(--spacing-5));
    --dropdown--offset: var(--spacing-5);
    --dropdown--gap-v: var(--spacing-1);
    --dropdown--gap-h: 0px;
    background-color: var(--color-background);
    border-radius: var(--radius-3);
    box-shadow: 0 2px 26px calc(var(--radius-3)*-1) rgba(0, 0, 0, .34);
    left: 0;
    min-width: 160px;
    padding: var(--spacing-2);
    position: absolute;
    top: 100%;
    transition: opacity .15s ease-in-out, visibility .15s ease-in-out;
    width: -moz-max-content;
    width: max-content;
    z-index: 1000
}

.dark .dropdown {
    background-color: color-mix(in srgb, #fff 2%, var(--color-background));
    box-shadow: 0 2px 26px calc(var(--radius-3)*-1) rgba(0, 0, 0, .9)
}

.footer-navigation .dropdown,
.navbar-navigation .dropdown {
    left: calc(var(--spacing-2)*-1)
}

.footer-navigation .dropdown>ul,
.navbar-navigation .dropdown>ul {
    display: flex;
    flex-direction: column;
    gap: var(--dropdown--gap-v)
}

.footer-navigation .dropdown a,
.navbar-navigation .dropdown a {
    border-radius: calc(var(--radius-3) - 4px);
    display: block;
    padding: var(--spacing-3) var(--spacing-5);
    transition: color .15s ease-in-out, background-color .15s ease-in-out
}

.footer-navigation .dropdown a:before,
.navbar-navigation .dropdown a:before {
    bottom: calc(var(--dropdown--gap-v)*-.5);
    content: "";
    left: calc(var(--dropdown--gap-h)*-.5);
    position: absolute;
    right: calc(var(--dropdown--gap-h)*-.5);
    top: calc(var(--dropdown--gap-v)*-.5)
}

.footer-navigation .dropdown a:hover,
.navbar-navigation .dropdown a:hover {
    background-color: var(--color-background-200);
    transition-duration: 0s
}

.footer-navigation .dropdown {
    bottom: 100%;
    left: 0;
    margin: 0 0 var(--dropdown--offset) calc(var(--spacing-6)*-1);
    right: auto;
    top: auto
}

.footer-navigation .dropdown:before {
    bottom: 0;
    height: var(--dropdown--offset);
    left: 0;
    right: 0;
    top: 100%;
    width: 100%
}

.form-subscribe {
    border: none;
    max-width: 360px;
    padding: 0;
    width: 100%
}

.form-subscribe-fields {
    display: flex;
    padding: 4px;
    position: relative
}

.form-subscribe-fields>input {
    background-color: var(--color-background-200);
    border: 0;
    border-radius: 3rem;
    flex: 1 0 0%;
    height: 100%;
    left: 0;
    padding-left: var(--spacing-8);
    padding-right: 8rem;
    position: absolute;
    top: 0
}

.form-subscribe-fields>button {
    --button-hover--transform: scale(1.02);
    margin-left: auto;
    margin-top: 0;
    max-width: 50%;
    position: relative;
    z-index: 1
}

.form-subscribe-fields>:where(.button)>:where(.label) {
    align-items: center;
    display: flex;
    gap: var(--spacing-2)
}

.form-subscribe-fields>:where(.button)>:where(.label)>svg {
    height: 1em;
    width: 1em
}

.icon-loader {
    height: 1em;
    width: 1em
}

.icon-loader:before {
    animation: echo-form-subscribe-icon-loader .6s linear infinite;
    background-color: currentcolor;
    content: "";
    display: block;
    height: 100%;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89472 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89472 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    width: 100%
}

@keyframes echo-form-subscribe-icon-loader {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.form-subscribe-message {
    text-align: left
}

.form-subscribe-message>.join-text {
    color: var(--color-secondary);
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    margin-top: var(--spacing-3);
    text-align: center
}

.image {
    display: block
}

.image img {
    background-color: var(--color-background-200)
}

.card:hover {
    --placeholder--color: var(--color-secondary);
    --placeholder--background-color: var(--color-background-300)
}

.logo {
    align-items: center;
    color: var(--color-contrast);
    display: flex;
    font-size: var(--font-small);
    font-weight: var(--font-bold)
}

.footer .logo {
    font-size: var(--font-large)
}

.logo-img {
    height: auto;
    width: auto
}

.logo-img,
.logo-img img {
    max-height: var(--logo--max-height, 1.75rem)
}

.logo-dark {
    display: none
}

.dark .logo-dark {
    display: block
}

.dark .logo-light {
    display: none
}

.dark .logo-img:has(>img.logo-light:only-child) {
    filter: invert(1)
}

.dark .logo-img:has(>img.logo-light:only-child) img {
    display: block
}

.post-card {
    display: flex;
    flex-direction: column;
    transition: transform .3s ease
}

.post-card:hover {
    transform: translateY(-2px)
}

.post-card-content {
    margin-top: var(--spacing-8);
    padding: 0 var(--spacing-5) var(--spacing-5)
}

.post-card-content>h3 {
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.post-card-content>p {
    margin-top: var(--spacing-5)
}

.post-card-media {
    background-color: var(--color-background-300);
    border-radius: var(--radius-4);
    overflow: hidden;
    position: relative
}

.post-card-image {
    display: block
}

.post-card-image:has(+.post-card-video) {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.post-card-image>img {
    float: left;
    font-size: 0;
    transition: transform .3s ease;
    width: 100%;
    will-change: transform
}

:where(.has-post-card-aspect-ratio) .post-card-image,
:where(.has-post-card-aspect-ratio) .post-card-image>img {
    aspect-ratio: var(--post-card--aspect-ratio);
    -o-object-fit: cover;
    object-fit: cover
}

.post-card:hover .post-card-image>img {
    transform: scale(1.01)
}

div.post-card-image {
    aspect-ratio: 1/1
}

.post-card-video {
    background-color: #000;
    display: block;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
    width: 100%
}

:where(body:not(.has-post-card-aspect-ratio)) .post-card-video {
    aspect-ratio: 16/9
}

:where(.has-post-card-aspect-ratio) .post-card-video {
    aspect-ratio: var(--post-card--aspect-ratio)
}

.post-card .post-status-icons {
    font-size: var(--font-x-small);
    left: var(--spacing-7);
    position: absolute;
    top: var(--spacing-7);
    z-index: 1
}

.post-card .post-status-icons>span {
    cursor: default
}

.post-card .post-status-icons>a,
.post-card .post-status-icons>span {
    background-color: var(--color-background);
    color: var(--color-contrast);
    position: relative
}

.post-card .post-status-icons>a:before,
.post-card .post-status-icons>span:before {
    bottom: calc(var(--spacing-3)*-.5);
    content: "";
    left: calc(var(--spacing-3)*-.5);
    position: absolute;
    right: calc(var(--spacing-3)*-.5);
    top: calc(var(--spacing-3)*-.5)
}

.post-card-footer {
    display: flex;
    gap: var(--spacing-5);
    margin-top: var(--spacing-5)
}

h3+.post-card-footer:not(:has(>.post-authors)) {
    margin-top: var(--spacing-3)
}

.post-card-footer .post-date,
.post-card-footer .post-time {
    color: var(--color-secondary);
    font-size: var(--font-small)
}

.post-card-footer>span {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative
}

.post-card-footer>span>span,
.post-card-footer>span>time {
    transition: transform .2s ease-in-out
}

.post-card-footer>span>span {
    margin-bottom: -1lh
}

.post-card:has(.post-card-footer time):hover .post-card-footer>span>:where(time, span) {
    transform: translateY(-1lh)
}

.pricing {
    align-items: center;
    display: flex;
    flex-direction: column
}

.pricing .pricing-period-monthly,
.pricing .pricing-period-yearly {
    grid-column-start: 1;
    grid-row-start: 1;
    transition: visibility .4s ease-in-out
}

.pricing:where(:has(#pricing-toggle-yearly:checked)) .pricing-period-monthly {
    animation: hide-period .4s ease-in-out;
    visibility: hidden
}

.pricing:where(:has(#pricing-toggle-yearly:checked)) .pricing-period-yearly {
    animation: show-period .4s ease-in-out
}

.pricing:where(:has(#pricing-toggle-monthly:checked)) .pricing-period-yearly {
    animation: hide-period .4s ease-in-out;
    visibility: hidden
}

.pricing:where(:has(#pricing-toggle-monthly:checked)) .pricing-period-monthly {
    animation: show-period .4s ease-in-out
}

.pricing:where(:not(:has(#pricing-toggle-monthly))) .pricing-period-yearly {
    display: none
}

.pricing-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-5);
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    max-width: 100%;
    padding: var(--spacing-9);
    position: relative;
    width: 360px;
    z-index: 1
}

.pricing-card>header {
    margin-bottom: var(--vertical-rhythm);
    position: relative
}

.pricing-card:before {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--ghost-accent-color) 0, color-mix(in srgb, var(--ghost-accent-color), transparent 90%) 30%, transparent 70%);
    -webkit-mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: xor;
    padding: 1px
}

.pricing-card:after,
.pricing-card:before {
    border-radius: inherit;
    bottom: -1px;
    content: "";
    left: -1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: -1px;
    transition: opacity .3s ease;
    z-index: -1
}

.pricing-card:after {
    background: radial-gradient(circle, transparent 1px, color-mix(in srgb, var(--ghost-accent-color), transparent 70%) 1.5px, transparent 2px);
    background-size: 4px 4px;
    -webkit-mask: radial-gradient(circle 700px at var(--x, 50%) var(--y, 50%), #fff 0, transparent 50%);
    mask: radial-gradient(circle 700px at var(--x, 50%) var(--y, 50%), #fff 0, transparent 50%)
}

.pricing-card:hover:after,
.pricing-card:hover:before {
    opacity: 1
}

.pricing-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-9);
    justify-content: center
}

.pricing-toggle {
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-9);
    padding: var(--spacing-2);
    position: relative
}

.pricing-toggle>label {
    border-radius: 2rem;
    color: var(--color-accent-foreground);
    cursor: pointer;
    font-weight: var(--font-medium);
    padding: var(--spacing-3) var(--spacing-8);
    position: relative;
    z-index: 1
}

.pricing-toggle>label:before {
    background-color: var(--ghost-accent-color);
    border-radius: inherit;
    bottom: 0;
    content: "";
    filter: blur(0);
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .3s ease, filter .3s ease;
    z-index: -1
}

.pricing-toggle>label:hover:before {
    opacity: .4
}

.pricing-toggle>input:checked+label {
    background-color: var(--ghost-accent-color);
    cursor: default
}

.pricing-toggle>input:checked+label:before {
    filter: blur(6px);
    opacity: .5
}

.pricing-toggle>input:focus-visible+label {
    outline: auto
}

.pricing-toggle>input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1
}

.pricing-card>header>h3 {
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.pricing-card>header>p {
    margin-top: var(--spacing-5)
}

.pricing-card-price {
    display: grid;
    margin-top: var(--vertical-rhythm);
    max-width: 100%;
    width: -moz-max-content;
    width: max-content
}

.pricing-card-price>span>span {
    color: var(--color-contrast);
    font-size: 1.75rem;
    font-weight: 550;
    line-height: 1.3
}

.pricing-card>ul {
    margin-bottom: var(--vertical-rhythm)
}

.pricing-card>ul>li {
    padding-left: 1lh;
    position: relative
}

.pricing-card>ul>li+li {
    margin-top: var(--spacing-6)
}

.pricing-card>ul>li:before {
    background-color: currentcolor;
    color: var(--ghost-accent-color);
    content: "";
    height: 1lh;
    left: 0;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12L10 17L20 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12L10 17L20 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1em 1em;
    mask-size: 1em 1em;
    position: absolute;
    top: 0;
    width: 1em
}

.pricing-badge {
    background-color: var(--ghost-accent-color);
    border-radius: 2rem;
    color: var(--color-accent-foreground);
    font-size: var(--font-x-small);
    font-weight: var(--font-medium);
    line-height: 1;
    padding: var(--spacing-3) var(--spacing-5);
    position: absolute;
    right: 0;
    top: 0
}

.pricing-card>footer {
    display: grid;
    margin-top: auto
}

.pricing-card>footer .button {
    --button-hover--opacity: 1;
    --button--color: var(--color-contrast);
    --button--background-color: color-mix(in srgb, var(--color-contrast), transparent 90%);
    --button-hover--color: var(--color-contrast);
    --button-hover--background-color: color-mix(in srgb, var(--color-contrast), transparent 90%);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    width: 100%
}

.pricing-card>footer .button:before {
    background: radial-gradient(circle at var(--x, 50%) 50%, var(--ghost-accent-color) 0, transparent 40%);
    -webkit-mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: xor;
    padding: 1px
}

.pricing-card>footer .button:after,
.pricing-card>footer .button:before {
    border-radius: inherit;
    bottom: -1px;
    content: "";
    left: -1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: -1px;
    transition: opacity .3s ease
}

.pricing-card>footer .button:after {
    background-color: color-mix(in srgb, var(--ghost-accent-color), transparent 80%);
    -webkit-mask: radial-gradient(circle 400px at var(--x, 50%) 50%, #fff 0, transparent 100%);
    mask: radial-gradient(circle 400px at var(--x, 50%) 50%, #fff 0, transparent 100%);
    z-index: 1
}

.pricing-card:hover>footer .button:after,
.pricing-card:hover>footer .button:before {
    opacity: .3
}

.pricing-card>footer .button:hover:after,
.pricing-card>footer .button:hover:before {
    opacity: 1
}

@keyframes show-period {
    0% {
        clip-path: inset(0 100% 0 0)
    }

    to {
        clip-path: inset(0)
    }
}

@keyframes hide-period {
    0% {
        clip-path: inset(0)
    }

    to {
        clip-path: inset(0 0 0 100%)
    }
}

.toc {
    --toc--scrollbar-width: 14px;
    margin-bottom: calc(var(--vertical-rhythm)*2);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-small--width);
    width: 100%
}

.toc>h3 {
    font-size: 1rem;
    margin-bottom: var(--spacing-7)
}

.toc>.toc-loader,
.toc>ul {
    background-color: var(--color-background-100);
    border-radius: var(--radius-4);
    clip-path: inset(0 round var(--radius-4));
    padding: var(--spacing-7) var(--spacing-8)
}

.toc>ul {
    overflow-x: hidden;
    overflow-y: scroll;
    overflow: hidden scroll;
    padding-right: calc(var(--spacing-8) - var(--toc--scrollbar-width))
}

.toc>ul::-webkit-scrollbar,
.toc>ul::-webkit-scrollbar-thumb,
.toc>ul::-webkit-scrollbar-thumb:hover,
.toc>ul::-webkit-scrollbar-track {
    background-color: transparent
}

.toc ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4)
}

.toc ul ul {
    padding-left: var(--spacing-4)
}

.toc a {
    color: var(--color-foreground);
    display: block;
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    position: relative;
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color .1s ease, text-decoration-color .1s ease
}

.toc a:before {
    bottom: calc(var(--spacing-4)*-.5);
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: calc(var(--spacing-4)*-.5)
}

.toc a:hover {
    color: var(--color-contrast);
    text-decoration-color: var(--color-contrast);
    transition-duration: 0s
}

.toc>.toc-loader {
    align-items: center;
    color: var(--color-mute);
    display: flex;
    height: 200px;
    justify-content: center
}

.toc>.toc-loader>svg {
    animation: echo-icon-loader .6s linear infinite
}

.toc:has(>.toc-list)>.toc-loader {
    display: none
}

@media (min-width:992px) {
    .toc {
        margin-bottom: 0;
        order: 1;
        position: sticky;
        top: var(--navbar--height)
    }

    .toc>ul {
        max-height: calc(100vh - var(--navbar--height) - 3rem);
        overscroll-behavior: contain
    }

    .toc>ul::-webkit-scrollbar,
    .toc>ul:hover::-webkit-scrollbar {
        width: var(--toc--scrollbar-width)
    }

    .toc>ul:hover::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border: 5px solid var(--color-background-100);
        border-radius: var(--toc--scrollbar-width)
    }

    .toc>ul:hover::-webkit-scrollbar-thumb:hover {
        background-color: #7d7d7d
    }

    .toc a.active {
        color: var(--color-contrast);
        text-decoration-color: var(--color-contrast);
        transition-duration: 0s
    }
}

.footer {
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--layout--gap);
    max-width: var(--container--width);
    padding-bottom: var(--spacing-8);
    width: 100%
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-10)
}

.footer-container+.footer-container {
    margin-top: var(--spacing-10)
}

.footer-info {
    flex: 1 0 320px;
    max-width: 100%
}

.footer-info>p {
    margin-top: var(--spacing-6);
    max-width: 320px;
    width: 100%
}

.footer-info>.social-links {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-large);
    gap: var(--spacing-4);
    margin-top: var(--spacing-6)
}

.footer-info>.social-links a {
    background-color: var(--color-background-200);
    border-radius: 50%;
    color: var(--color-contrast);
    display: block;
    padding: var(--spacing-4);
    position: relative;
    transition: background-color .15s ease-in-out
}

.footer-info>.social-links a>svg {
    display: block;
    height: 1em;
    width: 1em
}

.footer-info>.social-links a>.label {
    clip-path: inset(50%);
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 1px
}

.footer-info>.social-links a:before {
    bottom: calc(var(--spacing-4)*-.5);
    content: "";
    left: calc(var(--spacing-4)*-.5);
    position: absolute;
    right: calc(var(--spacing-4)*-.5);
    top: calc(var(--spacing-4)*-.5)
}

.footer-info>.social-links a:hover {
    background-color: var(--color-background-300);
    transition-duration: 0s
}

.footer-navigation {
    --navigation--gap-v: var(--spacing-1);
    --navigation--link--padding-v: var(--spacing-2);
    --navigation--link--padding-h: var(--spacing-5);
    --dropdown--gap-v: var(--spacing-1);
    --dropdown--gap-h: 0px;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    gap: var(--spacing-9);
    max-width: 100%
}

.footer-navigation>ul {
    display: flex;
    flex: 1 0 140px;
    flex-direction: column;
    gap: var(--navigation--gap-v)
}

.footer-navigation li {
    position: relative
}

.footer-navigation .nav-section-link {
    color: var(--color-secondary);
    display: block;
    font-weight: var(--font-medium)
}

.footer-navigation .nav-section-link,
.footer-navigation a {
    padding: var(--navigation--link--padding-v) var(--navigation--link--padding-h)
}

.footer-navigation a {
    background-color: transparent;
    border-radius: var(--radius-2);
    color: var(--color-foreground);
    display: inline-block;
    transition: background-color .2s ease, color .2s ease
}

.footer-navigation a:before {
    bottom: calc(var(--spacing-4)*-.5);
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: calc(var(--spacing-4)*-.5)
}

.footer-navigation a:hover,
.footer-navigation li:hover>a {
    background-color: var(--color-background-200);
    color: var(--color-contrast);
    transition-duration: 0s
}

.footer-container>p {
    flex: 1 0 320px;
    max-width: 100%
}

.footer-container>p>a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em
}

.footer-container>p>a:hover {
    transition-duration: 0s
}

.navbar {
    --navbar--search--width: 260px;
    display: flex;
    left: 0;
    min-height: var(--navbar--min-height);
    padding: var(--spacing-6) 0;
    position: sticky;
    top: 0;
    z-index: 10
}

.navbar>.navbar-background {
    backdrop-filter: blur(10px);
    background: radial-gradient(circle, transparent 1px, var(--color-background) 1.5px, transparent 2px);
    background-color: color-mix(in srgb, var(--color-background), transparent 10%);
    background-size: 4px 4px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.navbar .navbar-search {
    align-items: center;
    align-self: center;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    color: var(--color-mute);
    display: flex;
    flex: 0 0 auto;
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    gap: var(--spacing-4);
    line-height: 1.5;
    min-height: 36px;
    padding: var(--spacing-2) var(--spacing-6);
    text-align: left;
    transition: color .15s ease-in-out, border-color .15s ease-in-out;
    width: 200px
}

.navbar .navbar-search:hover {
    border-color: color-mix(in srgb, var(--color-border), var(--color-contrast) 20%);
    color: var(--color-secondary)
}

.navbar .navbar-search>svg {
    stroke-width: 2.5px;
    flex: 0 0 auto;
    height: 1em;
    width: 1em
}

.navbar .navbar-search>.label {
    flex: 1 0 0%
}

.navbar .navbar-search>svg:last-child {
    background-color: color-mix(in srgb, currentcolor, transparent 90%);
    border-radius: var(--radius-1);
    color: var(--color-foreground)
}

@media (max-width:991px) {
    .navbar .navbar-search {
        display: none
    }
}

.navbar .navbar-search-mobile {
    display: none
}

@media (max-width:991px) {
    .navbar .navbar-search-mobile {
        display: block
    }
}

.navbar .navbar-member-button {
    --button--padding-v: var(--spacing-2);
    --button--padding-h: var(--spacing-6);
    --button--min-height: 36px;
    --button--background-color: var(--color-background-200);
    --button--color: var(--color-contrast);
    --button-hover--background-color: var(--color-background-300);
    --button-hover--color: var(--color-contrast)
}

@media (max-width:767px) {
    .navbar .navbar-member-button {
        display: none
    }
}

.navbar .navbar-member-button-mobile {
    display: none
}

@media (max-width:767px) {
    .navbar .navbar-member-button-mobile {
        display: block
    }
}

.navbar .navbar-toggle-dialog {
    display: none
}

@media (max-width:767px) {
    .navbar .navbar-toggle-dialog {
        display: flex
    }
}

.navbar-container {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-8)*2);
    margin: 0 auto;
    max-width: var(--container-wide--width);
    width: 100%
}

.navbar-container>.navbar-start {
    display: flex;
    flex: 1 0 0%;
    gap: var(--container--padding)
}

.navbar-container>.navbar-start>.logo {
    flex: 0 0 auto
}

.navbar-container>.navbar-end {
    align-items: center;
    display: flex;
    gap: var(--spacing-4);
    justify-content: flex-end
}

@media (max-width:767px) {
    .navbar-container>.navbar-end {
        gap: var(--spacing-1)
    }
}

.navbar-navigation {
    --navigation--gap-v: var(--spacing-1);
    --navigation--gap-h: var(--spacing-1);
    --navigation--link--padding-v: var(--spacing-2);
    --navigation--link--padding-h: var(--spacing-5);
    --dropdown--gap-v: var(--spacing-1);
    --dropdown--gap-h: 0px;
    display: flex;
    font-size: var(--font-small);
    font-weight: var(--font-medium)
}

.navbar-navigation>ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--navigation--gap-v) var(--navigation--gap-h)
}

.navbar-navigation>ul>li {
    align-items: center;
    display: flex;
    position: relative
}

.navbar-navigation>ul>li>a:before {
    bottom: calc(var(--navigation--gap-v)*-.5);
    content: "";
    left: calc(var(--navigation--gap-h)*-.5);
    position: absolute;
    right: calc(var(--navigation--gap-h)*-.5);
    top: calc(var(--navigation--gap-v)*-.5)
}

.navbar-navigation a {
    --link--underline-size: 1.5px;
    background-color: transparent;
    border-radius: var(--radius-2);
    color: var(--color-foreground);
    padding: var(--navigation--link--padding-v) var(--navigation--link--padding-h);
    position: relative;
    transition: background-color .2s ease, color .2s ease
}

.navbar-navigation [aria-current] {
    background-color: var(--color-background-200)
}

.navbar-navigation a:hover,
.navbar-navigation li:hover>a {
    background-color: var(--color-background-200);
    color: var(--color-contrast);
    transition-duration: 0s
}

.navbar-navigation a:focus-visible {
    align-self: center
}

@media (max-width:767px) {
    .navbar-navigation {
        display: none
    }
}

.wrapper-sidebar {
    grid-gap: var(--spacing-10);
    display: grid;
    gap: var(--spacing-10);
    grid-template-columns: minmax(0, 1fr) 400px
}

.wrapper-sidebar:where(:not(:first-child)) {
    margin-top: var(--layout--gap)
}

.sidebar {
    display: flex;
    flex-direction: column
}

.sidebar>:last-child {
    left: 0;
    position: sticky;
    top: calc(var(--navbar--height) + var(--spacing-8))
}

.sidebar>section+section {
    margin-top: calc(var(--spacing-8)*2)
}

.dialog-share[open] {
    opacity: 1;
    pointer-events: visible
}

.dialog-share[open] .dialog-container {
    opacity: 1;
    transform: translateY(0)
}

.dialog-share[open]::backdrop {
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, .2);
    background-image: radial-gradient(transparent 1px, var(--color-border) 1px);
    background-size: 2px 2px
}

.dialog-share {
    --dialog-share-transition-duration: .7s;
    background-color: transparent;
    border: 0;
    color: var(--color-contrast);
    display: flex;
    height: 100%;
    max-width: 100%;
    min-height: 100%;
    opacity: 0;
    padding: var(--layout--padding) 0;
    pointer-events: none;
    position: fixed;
    transition: opacity var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1);
    transition: opacity var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1), overlay var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1) allow-discrete, display var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1) allow-discrete;
    width: 100%
}

.dialog-share::backdrop {
    backdrop-filter: blur(0);
    background-color: transparent;
    transition: backdrop-filter var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1), background-color var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1);
    transition: backdrop-filter var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1), background-color var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1), overlay var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1) allow-discrete, display var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1) allow-discrete
}

.dialog-share h2 {
    font-size: 1rem;
    font-weight: var(--font-bold)
}

.dialog-share h3 {
    font-size: var(--font-small);
    font-weight: var(--font-bold);
    margin-top: var(--spacing-9)
}

.dialog-share .share-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-3);
    margin-top: var(--spacing-7);
    padding: var(--spacing-6) var(--spacing-7)
}

.dialog-share .share-card>.share-card-image {
    margin: calc(var(--spacing-6)*-1) calc(var(--spacing-7)*-1) var(--spacing-6)
}

.dialog-share .share-card>.share-card-image>picture {
    display: block;
    width: 100%
}

.dialog-share .share-card>.share-card-image img {
    aspect-ratio: var(--feature-media--aspect-ratio, 16/9);
    border-radius: calc(var(--radius-3) - 1px) calc(var(--radius-3) - 1px) 0 0;
    -o-object-fit: cover;
    object-fit: cover
}

.dialog-share .share-card>.share-card-title {
    font-family: var(--font-heading);
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.dialog-share .share-card>.share-card-excerpt {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--color-secondary);
    display: -webkit-box;
    font-size: var(--font-x-small);
    margin-top: var(--spacing-4);
    overflow: hidden
}

.dialog-share .share-card>.share-card-site {
    align-items: center;
    color: var(--color-foreground);
    display: flex;
    font-family: var(--font-heading);
    font-size: var(--font-x-small);
    font-weight: var(--font-bold);
    gap: var(--spacing-3);
    margin-top: var(--spacing-5)
}

.dialog-share .share-card>.share-card-site>img {
    height: 1rem;
    width: 1rem
}

.dialog-share [data-clipboard] {
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    color: var(--color-secondary);
    display: flex;
    font-size: var(--font-small);
    margin-top: var(--spacing-6);
    padding: var(--spacing-5) var(--spacing-7);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
    width: 100%
}

.dialog-share [data-clipboard]:before {
    content: attr(data-clipboard);
    flex: 1 0 0%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dialog-share [data-clipboard]>svg {
    flex: 0 0 auto;
    height: 1.25em;
    width: 1.25em
}

.dialog-share [data-clipboard]>svg:last-child,
.dialog-share [data-clipboard][data-clipboard-copied]>svg:first-child {
    display: none
}

.dialog-share [data-clipboard][data-clipboard-copied]>svg:last-child {
    color: var(--color-success);
    display: block
}

.dialog-share [data-clipboard]:hover {
    background-color: var(--color-background-200);
    border-color: var(--color-background-200);
    color: var(--color-foreground)
}

.dialog-share ul {
    grid-gap: var(--spacing-4);
    display: grid;
    gap: var(--spacing-4);
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: var(--spacing-6)
}

@media (max-width:575px) {
    .dialog-share ul {
        grid-template-columns: 1fr 1fr
    }
}

.dialog-share ul>li {
    flex: 1 0 100px;
    max-width: 100%
}

.dialog-share ul a {
    --share--color: var(--color-contrast);
    --share--background-color: transparent;
    --share-hover--background-color: var(--color-background-300);
    align-items: center;
    background-color: var(--share--background-color);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    color: var(--color-contrast);
    display: flex;
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    gap: var(--spacing-4);
    padding: var(--spacing-4) var(--spacing-6);
    position: relative;
    transition: transform .2s ease, background-color .15s ease, border-color .15s ease
}

.dialog-share ul a:before {
    bottom: calc(var(--spacing-6)*-.5);
    content: "";
    left: calc(var(--spacing-6)*-.5);
    position: absolute;
    right: calc(var(--spacing-6)*-.5);
    top: calc(var(--spacing-6)*-.5)
}

.dialog-share ul a:hover {
    background-color: color-mix(in srgb, var(--share--color), var(--color-background) 90%);
    border-color: color-mix(in srgb, var(--share--color), var(--color-background) 90%);
    transform: translateY(-1px)
}

.dialog-share ul a[href*=facebook] {
    --share--color: var(--color-facebook)
}

.dialog-share ul a[href*=twitter] {
    --share--color: var(--color-twitter)
}

.dialog-share ul a[href*="wa.me"] {
    --share--color: var(--color-whatsapp)
}

.dialog-share ul a[href*=linkedin] {
    --share--color: var(--color-linkedin)
}

.dialog-share ul a[href*=reddit] {
    --share--color: var(--color-reddit)
}

.dialog-share ul a[href*="t.me"] {
    --share--color: var(--color-telegram)
}

.dialog-share ul a[href*="bsky.app"] {
    --share--color: var(--color-bluesky)
}

.dialog-share ul a[href*=pinterest] {
    --share--color: var(--color-pinterest)
}

.dialog-share ul svg {
    color: var(--share--color);
    height: 1.375em;
    width: 1.375em
}

.dialog-share>.dialog-container {
    background-color: var(--color-background);
    border-radius: var(--radius-4);
    margin: auto;
    max-width: min(500px, var(--screen-width) - var(--layout--padding) * 2);
    opacity: 0;
    padding: calc(var(--spacing-8) + var(--spacing-1)) var(--layout--padding) var(--layout--padding);
    position: relative;
    transform: translateY(10px);
    transition: opacity var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1), transform var(--dialog-share-transition-duration) cubic-bezier(.2, 1, .2, 1);
    width: 100%
}

@starting-style {
    .dialog-share[open] {
        opacity: 0
    }

    .dialog-share[open] .dialog-container {
        opacity: 0;
        transform: translateY(10px)
    }

    .dialog-share[open]::backdrop {
        backdrop-filter: blur(0);
        background-color: transparent
    }
}

.dialog-share .dialog-close {
    background-color: var(--color-background-200);
    border-radius: 50%;
    color: var(--color-contrast);
    font-size: 1rem;
    padding: var(--spacing-4);
    position: absolute;
    right: var(--spacing-7);
    top: var(--spacing-7);
    transition: background-color .15s ease-in-out
}

.dialog-share .dialog-close>svg {
    display: block;
    height: 1em;
    width: 1em
}

.dialog-share .dialog-close:hover {
    background-color: var(--color-background-300)
}

.section-more-link {
    align-items: center;
    color: var(--color-contrast);
    display: inline-flex;
    font-weight: var(--font-medium);
    gap: var(--spacing-2);
    position: relative
}

.section-more-link>svg {
    flex: 0 0 auto;
    height: 1em;
    transition: transform .2s ease;
    width: 1em
}

.section-more-link:before {
    background-color: color-mix(in srgb, currentcolor, transparent 90%);
    border-radius: 50%;
    content: "";
    height: 1.5em;
    margin-top: -.75em;
    opacity: 0;
    position: absolute;
    right: -.5em;
    top: 50%;
    transform: scale(.8);
    transform-origin: left;
    transition: opacity .2s ease, transform .2s ease;
    width: 1.5em;
    z-index: -1
}

.section-more-link:hover>svg {
    transform: translateX(.25em)
}

.section-more-link:hover:before {
    opacity: 1;
    transform: scale(1)
}

.section-hero {
    margin-top: calc(var(--layout--gap) - var(--spacing-3));
    width: 100%
}

.section-hero>.section-container {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container--width);
    width: 100%
}

.section-hero>figure {
    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-10);
    max-width: var(--container-wide--width);
    padding-top: var(--spacing-4);
    width: 100%
}

.section-hero>figure:not(:last-child) {
    padding-bottom: var(--spacing-4)
}

.section-hero>figure picture {
    border-radius: var(--radius-5);
    display: block;
    overflow: hidden;
    width: 100%
}

.section-hero>figure img {
    aspect-ratio: var(--hero--aspect-ratio, 21/9);
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.section-hero>:where(.section-container)>p {
    font-size: clamp(1rem, .9605rem + .1754vw, 1.125rem);
    margin-top: var(--vertical-rhythm);
    max-width: var(--container-small--width);
    width: 100%
}

.section-hero>:where(.section-container)>.form-subscribe {
    margin-top: calc(var(--vertical-rhythm) + var(--spacing-2))
}

.section-hero-align-center {
    text-align: center
}

.section-hero-align-center>:where(.section-container)>.form-subscribe,
.section-hero-align-center>:where(.section-container)>p {
    margin-left: auto;
    margin-right: auto
}

.section-posts>.section-container,
.section-posts>.section-container-wrapper {
    margin-top: var(--spacing-9)
}

.section-posts .section-posts-tags+.section-container,
.section-posts .section-posts-tags+.section-container-wrapper {
    margin-top: var(--spacing-10)
}

.section-posts .section-container {
    container-type: inline-size
}

.section-posts .section-container-wrapper:has(>aside) {
    grid-gap: var(--layout--padding);
    display: grid;
    gap: var(--layout--padding);
    grid-template-columns: 1fr 320px
}

@media (max-width:991px) {
    .section-posts .section-container-wrapper:has(>aside) {
        display: block
    }
}

.section-posts .section-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--layout--padding)
}

@media (max-width:991px) {
    .section-posts .section-sidebar {
        display: none
    }
}

.section-posts-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-7);
    margin-top: var(--vertical-rhythm)
}

.section-posts-tags a {
    border-radius: 2rem;
    box-shadow: 0 0 0 1px var(--color-border);
    color: var(--color-contrast);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    font-size: var(--font-small);
    gap: var(--spacing-1);
    line-height: normal;
    min-height: calc(44px + var(--spacing-4)*2);
    padding: var(--spacing-4) var(--spacing-9) var(--spacing-4) calc(44px + var(--spacing-4) + var(--spacing-5));
    position: relative;
    transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .2s ease
}

.section-posts-tags a>.label {
    font-family: var(--font-heading);
    font-weight: var(--font-bold)
}

.section-posts-tags a>.label:last-child {
    margin-bottom: auto;
    margin-top: auto
}

.section-posts-tags a>.count {
    color: var(--color-secondary)
}

.section-posts-tags a.current,
.section-posts-tags a:hover {
    background-color: var(--color-background-200);
    box-shadow: 0 0 0 1px var(--color-background-200);
    transform: translateY(-1px)
}

.section-posts-tags a[style].current,
.section-posts-tags a[style]:hover {
    background-color: color-mix(in srgb, var(--tag--color), var(--color-background) 90%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tag--color), var(--color-background) 90%)
}

.section-posts-tags .section-posts-tags-image {
    --placeholder--color: var(--color-white);
    --placeholder--background-color: var(--tag--color, var(--color-background-200));
    border-radius: 50%;
    font-weight: var(--font-medium);
    height: 44px;
    left: var(--spacing-4);
    overflow: hidden;
    position: absolute;
    top: var(--spacing-4);
    width: 44px
}

.section-posts-tags .section-posts-tags-image>img {
    border-radius: 50%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.section-posts-tags a:not([style]) .section-posts-tags-image {
    --placeholder--color: var(--color-secondary)
}

.section-posts-tags a:not([style]):hover .section-posts-tags-image {
    --placeholder--background-color: var(--color-background-300)
}

.section-posts-pagination {
    align-items: center;
    display: flex;
    gap: var(--spacing-8);
    justify-content: center;
    margin-top: var(--spacing-9)
}

.section-posts-pagination:after,
.section-posts-pagination:before {
    border-top: 1px solid var(--color-border);
    content: "";
    display: block;
    flex: 1 0 0%
}

.section-posts-pagination>.button {
    --button--font-size: 1rem;
    --button--color: var(--color-contrast);
    --button--background-color: transparent;
    --button-hover--color: var(--color-contrast);
    --button-hover--background-color: var(--color-background-300);
    box-shadow: 0 0 0 1px var(--color-border);
    flex: 0 0 auto;
    transition: var(--button--transition), box-shadow .15s ease-in-out
}

.section-posts-pagination>.button:hover {
    box-shadow: 0 0 0 1px var(--button-hover--background-color)
}

.section-posts-pagination:has(>.section-posts-pagination-current) {
    gap: var(--spacing-4)
}

.section-posts-pagination:has(>.section-posts-pagination-current):before {
    margin-right: var(--spacing-6)
}

.section-posts-pagination:has(>.section-posts-pagination-current):after {
    margin-left: var(--spacing-6)
}

.section-posts-pagination:has(>.section-posts-pagination-current)>.button {
    --button--padding-v: 0px;
    --button--padding-h: 0px;
    min-width: var(--button--min-height)
}

.section-posts-pagination:has(>.section-posts-pagination-current) .section-posts-pagination-current {
    --button--background-color: var(--color-background-300);
    box-shadow: 0 0 0 1px var(--color-background-300);
    pointer-events: none
}

.section-posts-pagination:has(>.section-posts-pagination-current) .section-posts-pagination-ellipsis {
    color: var(--color-secondary);
    padding: 0 var(--spacing-2)
}

.section-author-posts {
    margin-top: var(--layout--gap)
}

.section-author-posts .post-card-image,
.section-author-posts .post-card-video {
    aspect-ratio: var(--carousel-cards--aspect-ratio)
}

.section-author-posts .post-card-image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.section-author-posts .post-card-content>p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden
}

.section-author-posts .section-head {
    display: flex;
    flex-direction: column;
    margin: 0 auto var(--spacing-9);
    margin-bottom: var(--spacing-10);
    max-width: var(--container--width);
    width: 100%
}

.section-author-posts .section-head>p {
    margin-top: calc(var(--spacing-7) + var(--spacing-2));
    max-width: var(--container-small--width);
    width: 100%
}

.section-author-posts .section-head>span {
    color: var(--color-secondary);
    font-size: var(--font-small);
    margin-top: var(--spacing-7)
}

.section-author-posts .section-head-content {
    grid-gap: var(--spacing-2) var(--spacing-7);
    align-self: flex-start;
    display: grid;
    flex-direction: column;
    gap: var(--spacing-2) var(--spacing-7);
    grid-template-columns: 80px auto;
    grid-template-rows: auto auto;
    justify-content: center;
    padding-right: var(--spacing-7);
    position: relative;
    transition: transform .2s ease
}

.section-author-posts .section-head-content:has(>a):hover {
    transform: translateY(-1px)
}

.section-author-posts .section-head-content>a {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.section-author-posts .section-head-content:has(>a):before {
    background-color: var(--color-background-100);
    bottom: calc(var(--spacing-4)*-1);
    clip-path: inset(var(--radius-2) round var(--radius-4));
    content: "";
    left: calc(var(--spacing-4)*-1);
    opacity: 0;
    position: absolute;
    right: calc(var(--spacing-4)*-1);
    top: calc(var(--spacing-4)*-1);
    transition: opacity .3s ease, clip-path .3s ease;
    z-index: -1
}

.section-author-posts .section-head-content:has(>a):hover:before {
    clip-path: inset(0 round var(--radius-4));
    opacity: 1;
    transition-duration: .1s
}

.section-author-posts .section-head-content>.image {
    aspect-ratio: 3/4;
    border-radius: var(--radius-3);
    font-size: var(--font-large);
    font-weight: var(--font-medium);
    grid-row: span 2;
    overflow: hidden;
    width: 80px
}

.section-author-posts .section-head-content>.image>img {
    border-radius: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%
}

.section-author-posts .section-head-content:has(>a):hover {
    --placeholder--color: var(--color-secondary);
    --placeholder--background-color: var(--color-background-300)
}

.section-author-posts .section-head-content:has(>a):hover>.image>img {
    transform: scale(1.02)
}

.section-author-posts .section-head-content>h1,
.section-author-posts .section-head-content>h2 {
    align-content: center;
    font-size: var(--font-large);
    font-weight: var(--font-bold);
    grid-column: 2/3;
    grid-row: span 2
}

.section-author-posts .section-head-content>h1:has(+span),
.section-author-posts .section-head-content>h2:has(+span) {
    align-content: end;
    grid-row: 1/2
}

.section-author-posts .section-head-content>span {
    color: var(--color-secondary);
    font-size: var(--font-small);
    grid-column: 2/3;
    grid-row: 2/3
}

.section-tag-posts {
    margin-top: var(--layout--gap)
}

.section-tag-posts .carousel-cards {
    --carousel-cards--count: 3
}

.section-tag-posts .post-card-image,
.section-tag-posts .post-card-video {
    aspect-ratio: var(--carousel-cards--aspect-ratio)
}

.section-tag-posts .post-card-image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.section-tag-posts .post-card-content>p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden
}

.section-tag-posts .section-head {
    margin: 0 auto var(--spacing-9);
    max-width: var(--container--width);
    width: 100%
}

.section-tag-posts .section-head>p {
    margin-bottom: var(--spacing-10);
    margin-top: calc(var(--spacing-7) + var(--spacing-2));
    max-width: var(--container-small--width);
    width: 100%
}

.section-tag-posts .section-head-content {
    display: inline-flex;
    flex-direction: column;
    gap: var(--spacing-2);
    justify-content: center;
    min-height: 80px;
    padding-left: calc(80px + var(--spacing-7));
    padding-right: var(--spacing-7);
    position: relative;
    transition: transform .2s ease
}

.section-tag-posts .section-head-content:has(>a):hover {
    transform: translateY(-1px)
}

.section-tag-posts .section-head-content>a {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.section-tag-posts .section-head-content:has(>a):before {
    background-color: var(--color-background-100);
    bottom: calc(var(--spacing-4)*-1);
    clip-path: inset(var(--radius-2) round var(--radius-4));
    content: "";
    left: calc(var(--spacing-4)*-1);
    opacity: 0;
    position: absolute;
    right: calc(var(--spacing-4)*-1);
    top: calc(var(--spacing-4)*-1);
    transition: opacity .3s ease, clip-path .3s ease;
    z-index: -1
}

.section-tag-posts .section-head-content:has(>a):hover:before {
    clip-path: inset(0 round var(--radius-4));
    opacity: 1;
    transition-duration: .1s
}

.section-tag-posts .section-head-content>.image {
    aspect-ratio: 1;
    border-radius: var(--radius-3);
    font-size: var(--font-large);
    font-weight: var(--font-medium);
    height: 80px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 80px;
    z-index: 0
}

.section-tag-posts .section-head-content>.image>img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: transform .3s ease;
    width: 100%
}

.section-tag-posts .section-head-content:has(>a):hover {
    --placeholder--color: var(--color-contrast);
    --placeholder--background-color: var(--color-background-300)
}

.section-tag-posts .section-head-content:has(>a):hover>.image>img {
    transform: scale(1.02)
}

.section-tag-posts .section-head-content>h1,
.section-tag-posts .section-head-content>h2 {
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.section-tag-posts .section-head-content>span {
    color: var(--color-secondary);
    font-size: var(--font-small)
}

.section-tag-posts--playlist .post-card-image,
.section-tag-posts--playlist .post-card-video {
    aspect-ratio: 1 / 1
}

.section-recommendations {
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--layout--gap);
    max-width: 2000px;
    width: 100%
}

@media (min-width:2000.02px) {
    .section-recommendations {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 100px, #000 calc(100% - 100px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 100px, #000 calc(100% - 100px), transparent);
        overflow: hidden
    }
}

.section-recommendations .marquee {
    margin-top: -2px
}

.section-recommendations .marquee-inner {
    gap: var(--spacing-8);
    padding-top: 2px
}

.section-recommendations .recommendation-card {
    background-color: var(--color-background-100);
    border-radius: var(--radius-3);
    flex: 0 0 360px;
    padding: var(--spacing-8);
    position: relative;
    transition: background-color .2s ease, transform .2s ease
}

.section-recommendations .recommendation-card>a {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.section-recommendations .recommendation-card h3 {
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.section-recommendations .recommendation-card p {
    margin-top: var(--spacing-6)
}

.section-recommendations .recommendation-card svg {
    color: var(--color-mute);
    float: right;
    height: 1em;
    margin-left: var(--spacing-6);
    opacity: 0;
    transition: opacity .15s ease;
    width: 1em
}

.section-recommendations .recommendation-card:hover {
    background-color: var(--color-background-200);
    transform: translateY(-2px)
}

.section-recommendations .recommendation-card:hover svg {
    opacity: 1
}

.section-recommendations .recommendation-card-favicon {
    float: left;
    margin-right: var(--spacing-4)
}

.section-recommendations div.recommendation-card-favicon,
.section-recommendations picture.recommendation-card-favicon img {
    border-radius: var(--radius-1);
    height: 1lh;
    width: 1lh
}

.section-recommendations .section-recommendations-grid {
    grid-gap: var(--spacing-8);
    display: grid;
    gap: var(--spacing-8);
    grid-template-columns: repeat(1, minmax(320px, 1fr));
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container--width)
}

@media (min-width:576px) {
    .section-recommendations .section-recommendations-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:992px) {
    .section-recommendations .section-recommendations-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width:1200px) {
    .section-recommendations .section-recommendations-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

.section-recommendations .section-recommendations-grid .recommendation-card {
    flex: none
}

.section-related {
    --posts--card--width: max(260px, calc((var(--container--width) - var(--spacing-9)*3)/4));
    margin-top: var(--layout--gap)
}

.section-related>h2 {
    margin-bottom: var(--spacing-10);
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container--width);
    width: 100%
}

.section-related .post-card {
    flex: 0 0 var(--posts--card--width)
}

.section-related .post-card-image,
.section-related .post-card-video {
    aspect-ratio: var(--carousel-cards--aspect-ratio)
}

.section-related .post-card-image img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.section-related .post-card-content>p {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden
}

.section-related .scroll-carousel-container {
    align-items: baseline;
    display: flex;
    gap: var(--spacing-9);
    margin-top: calc(var(--spacing-7)*-1);
    padding-left: calc((var(--screen-width) - var(--container--width))/2);
    padding-right: calc((var(--screen-width) - var(--container--width))/2);
    padding-top: var(--spacing-7)
}

.section-related .scroll-carousel-controls {
    align-items: center;
    display: flex;
    height: var(--posts--card--width);
    justify-content: space-between;
    left: 50%;
    margin-bottom: calc(var(--posts--card--width)*-1);
    max-width: var(--container--width);
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2
}

.section-related .scroll-carousel-controls>button {
    background-color: var(--color-background);
    border-radius: 50%;
    box-shadow: 0 2px 20px -5px rgba(0, 0, 0, .16);
    padding: var(--spacing-5);
    pointer-events: visible;
    transition-duration: .15s;
    transition-property: opacity, visibility, color, background-color;
    transition-timing-function: ease-in-out
}

.section-related .scroll-carousel-controls>button>svg {
    display: block;
    height: 1.125em;
    width: 1.125em
}

.section-related .scroll-carousel-controls>button:hover {
    background-color: var(--color-contrast);
    color: var(--color-background)
}

.section-related .scroll-carousel-controls>button:first-child {
    transform: translateX(-50%)
}

.section-related .scroll-carousel-controls>button:last-child {
    transform: translateX(50%)
}

.section-related.scroll-carousel-end .scroll-carousel-controls>button:last-child,
.section-related.scroll-carousel-start .scroll-carousel-controls>button:first-child {
    opacity: 0;
    pointer-events: none
}

.widget-about {
    align-items: center;
    background-color: #1B4467;
    border-radius: var(--radius-4);
    color: #F2E6DE;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    padding: var(--spacing-10) var(--spacing-8);
    position: sticky;
    text-align: center;
    top: calc(var(--navbar--height) + var(--layout--padding))
}

.widget-about>h3 {
    color: #F2E6DE;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2
}

.widget-about>p {
    color: #F2E6DE
}

.widget-about>img {
    border-radius: 4px;
    margin-bottom: var(--spacing-7)
}

.widget-about>.button {
    background-color: #CD985C;
    color: #fff;
    margin-top: var(--spacing-7)
}

.widget-about>.button:hover {
    background-color: #CD985C;
    color: #fff
}

.widget-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6)
}

.widget-recommendations .widget-head {
    margin-bottom: var(--spacing-7)
}

.widget-recommendations .widget-title {
    display: inline-block;
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.widget-recommendations .recommendation-card {
    background-color: var(--color-background-100);
    border-radius: var(--radius-4);
    padding: var(--spacing-8);
    position: relative;
    transition: background-color .15s ease-in-out, transform .2s ease
}

.widget-recommendations .recommendation-card:hover {
    background-color: var(--color-background-200);
    transform: translateY(-2px)
}

.widget-recommendations .recommendation-card>a {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.widget-recommendations .recommendation-card>h3 {
    font-size: 1rem;
    font-weight: var(--font-bold);
    line-height: 1.4
}

.widget-recommendations .recommendation-card>h3>picture {
    float: left;
    margin-right: var(--spacing-4)
}

.widget-recommendations .recommendation-card>h3>picture>img {
    border-radius: var(--radius-1)
}

.widget-recommendations .recommendation-card>h3>svg {
    color: var(--color-secondary);
    float: right;
    height: 1em;
    opacity: 0;
    transition: opacity .2s ease;
    width: 1em
}

.widget-recommendations .recommendation-card:hover>h3>svg {
    opacity: 1
}

.widget-recommendations .recommendation-card>p {
    font-size: var(--font-small);
    margin-top: var(--spacing-6)
}

.feature-media {
    border-radius: var(--feature-media--radius);
    margin-top: var(--spacing-10)
}

.feature-media-image img {
    --rizoom--border-radius: var(--feature-media--radius);
    aspect-ratio: var(--feature-media--aspect-ratio, auto);
    border-radius: var(--rizoom--border-radius);
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.feature-media-image>figcaption {
    color: var(--color-secondary);
    margin-top: var(--spacing-6);
    text-align: center;
    width: 100%
}

.feature-media-image>figcaption a {
    color: var(--color-contrast);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-underline-offset: .1em
}

.feature-media-image>figcaption a:hover {
    color: var(--ghost-accent-color)
}

.feature-media-video .kg-video-container,
.feature-media-video iframe,
.feature-media-video video,
iframe.feature-media-video {
    border-radius: var(--feature-media--radius)
}

:where(.content-wrapper) {
    margin-top: var(--layout--gap)
}

.tag-hash-video :where(.content-wrapper):has(.content>:where(.kg-video-card, .kg-embed-card, iframe):only-child),
:where(.content-wrapper):not(:has(.content>:first-child)) {
    display: none
}

:where(.content)>* {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-small--width)
}

:where(.content)>.kg-blockquote-alt,
:where(.content)>.kg-width-wide {
    max-width: var(--container--width)
}

:where(.content)>.kg-width-full {
    max-width: 100%
}

:where(.content)>:where(*)+:where(*) {
    margin-top: calc(var(--vertical-rhythm) + .2lh)
}

:where(.content)>:where(*)+:where(p, ul, ol) {
    margin-top: var(--vertical-rhythm)
}

:where(.content)>:where(*)+:where(h1, h2, h3, h4, h5, h6) {
    margin-top: calc(var(--vertical-rhythm)*2)
}

:where(.content)>:where(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: calc(var(--navbar--height) + var(--spacing-7))
}

:where(.content)>:where(h1)+:where(h2, h3, h4, h5, h6),
:where(.content)>:where(h2)+:where(h3, h4, h5, h6),
:where(.content)>:where(h3)+:where(h4, h5, h6),
:where(.content)>:where(h4)+:where(h5, h6),
:where(.content)>:where(h5)+:where(h6) {
    margin-top: var(--vertical-rhythm)
}

:where(.content)>iframe {
    display: block
}

:where(.content) a {
    color: var(--ghost-accent-color);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-thickness: .1em;
    text-underline-offset: .1lh;
    transition: text-decoration-color .15s ease
}

:where(.content) a:hover {
    text-decoration-color: transparent
}

:where(.content) figcaption {
    margin: var(--spacing-6) auto 0;
    max-width: var(--container--width);
    text-align: center;
    width: 100%
}

:where(.content) ol {
    list-style: decimal;
    padding-left: 2.5ch
}

:where(.content) ol>li::marker {
    color: var(--color-contrast);
    font-weight: var(--font-semibold)
}

:where(.content) li>:where(ol) {
    list-style: lower-alpha
}

:where(.content) li>:where(ol)>:where(li)>:where(ol) {
    list-style: lower-roman
}

:where(.content) ul {
    padding-left: 2.5ch
}

:where(.content) ul>li {
    position: relative
}

:where(.content) ul>li:before {
    background-color: currentcolor;
    border-radius: 50%;
    content: "";
    font-weight: var(--font-medium);
    height: 3.5px;
    margin-right: var(--spacing-5);
    margin-top: .5lh;
    position: absolute;
    right: 100%;
    translate: 0 -1.75px;
    width: 3.5px
}

:where(.content) ul>li>ul>li:before {
    background-color: transparent;
    border: 1px solid
}

:where(.content) ul>li>ul>li>ul>li:before {
    background-color: currentcolor;
    border: 0;
    border-radius: 0
}

:where(.content) li>:where(ol, ul),
:where(.content) ol>li+li,
:where(.content) ul>li+li {
    margin-top: var(--spacing-6)
}

:where(.content) blockquote:not(.kg-blockquote-alt) {
    border-left: 2px solid var(--color-contrast);
    color: var(--color-contrast);
    padding-left: var(--spacing-7)
}

:where(.content) .kg-blockquote-alt {
    color: var(--color-contrast);
    font-size: clamp(30px, 22.4211px + 2.1053vw, 54px);
    font-weight: var(--font-thin);
    line-height: 1.3;
    padding: var(--vertical-rhythm) var(--spacing-7);
    text-align: center;
    width: 100%
}

:where(.content) hr {
    border: 0;
    border-top: 1px solid var(--color-border)
}

:where(.content) mark {
    border-radius: var(--radius-1);
    padding: var(--spacing-1) var(--spacing-3)
}

:where(.content) code {
    background-color: var(--color-background-200);
    border-radius: var(--radius-1);
    font-family: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    padding: var(--spacing-1) var(--spacing-3)
}

:where(.content) pre {
    background-color: var(--color-background-200);
    border-radius: var(--radius-3);
    max-height: 80vh;
    overflow: auto;
    padding: var(--spacing-6) var(--spacing-7)
}

:where(.content) pre>code {
    background-color: transparent;
    border-radius: 0;
    padding: 0
}

:where(.content) :where(strong, b, th) {
    font-weight: var(--font-semibold)
}

:where(.content) table {
    border: 1px solid var(--color-border)
}

:where(.content) table td,
:where(.content) table th {
    border: 1px solid var(--color-border);
    padding: var(--spacing-4) var(--spacing-6)
}

.content-teaser {
    position: relative
}

.content-teaser:before {
    background-image: linear-gradient(180deg, transparent 0, var(--color-background) 100%);
    bottom: 0;
    content: "";
    height: 160px;
    left: 0;
    max-height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
    z-index: 3
}

.content-cta {
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-4);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-7);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--spacing-9);
    max-width: var(--container-small--width);
    padding: calc(var(--spacing-10)*2) var(--spacing-10);
    position: relative;
    scroll-margin-top: calc(var(--layout--navbar--height) + var(--spacing-7));
    text-align: center;
    transition: background-color .2s ease;
    width: 100%;
    z-index: 1
}

.content-cta:first-child {
    margin-top: 0
}

.content-cta>p {
    margin-bottom: 0
}

.content-cta .button {
    --button-hover--opacity: 1;
    --button--color: var(--color-contrast);
    --button--background-color: color-mix(in srgb, var(--color-contrast), transparent 95%);
    --button-hover--color: var(--color-contrast);
    --button-hover--background-color: color-mix(in srgb, var(--ghost-accent-color), transparent 90%);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    margin: var(--spacing-2) 0
}

.content-cta .button:before {
    background: radial-gradient(circle at var(--x, 50%) 50%, var(--ghost-accent-color) 0, transparent 50%);
    -webkit-mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: xor;
    padding: 1px
}

.content-cta .button:after,
.content-cta .button:before {
    border-radius: inherit;
    bottom: -1px;
    content: "";
    left: -1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: -1px;
    transition: opacity .3s ease
}

.content-cta .button:after {
    background-color: color-mix(in srgb, var(--ghost-accent-color), transparent 80%);
    -webkit-mask: radial-gradient(circle 400px at var(--x, 50%) 50%, #fff 0, transparent 100%);
    mask: radial-gradient(circle 400px at var(--x, 50%) 50%, #fff 0, transparent 100%);
    z-index: 1
}

.content-cta:hover .button:after,
.content-cta:hover .button:before {
    opacity: .3
}

.content-cta .button:hover:before {
    opacity: 1
}

.content-cta .button:hover:after {
    opacity: 0
}

.content-cta:before {
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--ghost-accent-color) 0, color-mix(in srgb, var(--ghost-accent-color), transparent 90%) 40%, transparent 90%);
    -webkit-mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    mask: linear-gradient(#fff, #fff 0) content-box, linear-gradient(#fff, #fff 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: xor;
    padding: 1px
}

.content-cta:after,
.content-cta:before {
    border-radius: inherit;
    bottom: -1px;
    content: "";
    left: -1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    right: -1px;
    top: -1px;
    transition: opacity .3s ease;
    z-index: -1
}

.content-cta:after {
    background: radial-gradient(circle, transparent 1px, color-mix(in srgb, var(--ghost-accent-color), transparent 85%) 1.5px, transparent 2px);
    background-size: 4px 4px;
    -webkit-mask: radial-gradient(circle 700px at var(--x, 50%) var(--y, 50%), #fff 0, transparent 50%);
    mask: radial-gradient(circle 700px at var(--x, 50%) var(--y, 50%), #fff 0, transparent 50%)
}

.content-cta:hover:after,
.content-cta:hover:before {
    opacity: 1
}

@media (min-width:992px) {
    :where(.content-wrapper):has(>.toc) {
        grid-gap: var(--layout--padding);
        align-items: start;
        display: grid;
        gap: var(--layout--padding);
        grid-template-columns: 1fr 320px;
        margin-left: auto;
        margin-right: auto;
        max-width: var(--container--width);
        width: 100%
    }

    :where(.content-wrapper):has(>.toc)+.post-footer {
        grid-gap: var(--layout--padding);
        align-items: start;
        display: grid;
        gap: var(--layout--padding);
        grid-template-columns: 1fr 320px;
        max-width: var(--container--width)
    }

    :where(.content-wrapper):has(>.toc)+.post-footer>.post-footer-container {
        margin-left: auto;
        margin-right: auto;
        max-width: var(--container-small--width);
        width: 100%
    }
}

.post-header {
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--layout--gap);
    max-width: 100%;
    width: var(--container--width)
}

.post-header>.post-header-content {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-small--width);
    width: 100%
}

.post-header>.post-header-content>p {
    font-size: clamp(1rem, .9605rem + .1754vw, 1.125rem);
    margin-top: var(--vertical-rhythm)
}

.post-status-icons {
    color: var(--color-contrast);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-small);
    font-weight: 500;
    gap: var(--spacing-3);
    line-height: 1;
    margin-bottom: var(--spacing-6)
}

.post-status-icons:not(:has(>:first-child)) {
    display: none
}

.post-status-icons>a,
.post-status-icons>span {
    background-color: var(--color-background-200);
    border-radius: 1em;
    min-height: 2em;
    min-width: 2em
}

.post-status-icons>a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: var(--spacing-1) var(--spacing-5);
    transition: background-color .15s ease, color .15s ease
}

.post-status-icons>a:hover {
    background-color: var(--color-contrast);
    color: var(--color-background)
}

.post-status-icons>a[style] {
    background-color: color-mix(in srgb, var(--tag--color), var(--color-background) 90%);
    color: var(--tag--color)
}

.post-status-icons>a[style]:hover {
    background-color: var(--tag--color);
    color: var(--color-white)
}

.post-status-icons>span {
    align-items: center;
    display: flex;
    justify-content: center
}

.post-status-icons>span>svg {
    height: 1em;
    width: 1em
}

.post-meta {
    align-items: center;
    border-top: 1px solid var(--color-border);
    color: var(--color-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2) var(--spacing-6);
    margin-top: var(--vertical-rhythm);
    padding-top: var(--vertical-rhythm)
}

.post-meta>.post-date,
.post-meta>.post-time {
    align-items: center;
    display: flex;
    gap: inherit
}

.post-meta>.post-date:before,
.post-meta>.post-time:before {
    background-color: var(--color-mute);
    border-radius: 50%;
    content: "";
    flex: 0 0 auto;
    height: 3px;
    width: 3px
}

.post-meta>.post-authors-name>a {
    color: var(--color-contrast);
    font-weight: var(--font-medium);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color .15s ease
}

.post-meta>.post-authors-name>a:hover {
    text-decoration-color: var(--color-contrast);
    transition-duration: 0s
}

.post-authors {
    display: flex
}

.post-authors .image {
    --placeholder--padding: 0px;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: var(--font-semibold);
    height: 24px;
    overflow: hidden;
    width: 24px
}

.post-authors .image>img {
    border-radius: 50%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.post-authors>a+a {
    margin-left: calc(var(--spacing-3)*-1);
    -webkit-mask-image: radial-gradient(circle 28px at -25% 50%, transparent 50%, #000 calc(50% + 1px));
    mask-image: radial-gradient(circle 28px at -25% 50%, transparent 50%, #000 calc(50% + 1px))
}

.post-authors>a {
    position: relative;
    transition: transform .2s ease
}

.post-authors>a:hover {
    transform: scale(1.05)
}

.post-authors>a:first-child {
    z-index: 4
}

.post-authors>a:nth-child(2) {
    z-index: 3
}

.post-authors>a:nth-child(3) {
    z-index: 2
}

.post-authors>a:nth-child(4) {
    z-index: 1
}

.post-authors>a:nth-child(5) {
    z-index: 0
}

.post-comments {
    align-items: center;
    background-color: var(--color-background-100);
    border-radius: var(--radius-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4) var(--spacing-9);
    margin: var(--layout--gap) auto 0;
    max-width: var(--container--width);
    padding: var(--spacing-10) var(--layout--padding);
    width: 100%
}

.post-comments>h2 {
    flex: 1 0 200px;
    max-width: 100%
}

.post-comments>span {
    flex: 0 0 auto
}

.post-comments>div {
    flex: 0 0 100%;
    max-width: 100%;
    overflow: hidden
}

.post-comments>div>iframe:only-child {
    margin-bottom: -24px
}

.post-comments>div>iframe:not(:last-child) {
    margin-bottom: -52px
}

.post-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6) var(--spacing-9);
    margin: calc(var(--vertical-rhythm)*2) auto 0;
    max-width: var(--container-small--width);
    width: 100%
}

.post-footer>time {
    color: var(--color-secondary);
    font-weight: var(--font-medium)
}

.post-toggle-share {
    align-items: center;
    background-color: var(--color-background-200);
    border-radius: 2rem;
    color: var(--color-contrast);
    display: flex;
    font-weight: var(--font-medium);
    gap: var(--spacing-4);
    margin-right: auto;
    padding: var(--spacing-3) var(--spacing-7) var(--spacing-3) var(--spacing-6);
    transition: background-color .15s ease
}

.post-toggle-share>svg {
    height: 1.125em;
    width: 1.125em
}

.post-toggle-share:hover {
    background-color: var(--color-background-300)
}

.page-template .page-header {
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--layout--gap);
    max-width: 100%;
    text-align: center;
    width: var(--container--width)
}

.page-template .page-header>p {
    font-size: clamp(1rem, .9605rem + .1754vw, 1.125rem);
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--vertical-rhythm);
    max-width: var(--container-small--width);
    width: 100%
}

.page-error-section {
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(var(--layout--gap) - var(--spacing-3));
    max-width: var(--container--width);
    width: 100%
}

.page-error-section>h1,
.page-error-section>p {
    max-width: var(--container-small--width);
    width: 100%
}

.page-error-section>p {
    font-size: clamp(1.125rem, 1.0855rem + .1754vw, 1.25rem);
    margin-top: var(--vertical-rhythm)
}

.page-error-section>.button {
    margin-top: calc(var(--vertical-rhythm) + var(--spacing-2))
}

.page-membership .section-subscription {
    margin-top: var(--spacing-9)
}

.author-template .section-author-posts {
    margin-bottom: calc(var(--layout--gap)*-1 + var(--spacing-10));
    margin-top: var(--spacing-10)
}

.author-template .social-links-author {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-large);
    gap: var(--spacing-4);
    margin-top: var(--spacing-7)
}

.author-template .social-links-author:empty {
    display: none
}

.author-template .social-links-author a {
    align-items: center;
    background-color: var(--color-background-200);
    border-radius: 2rem;
    color: var(--color-contrast);
    display: flex;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-7) var(--spacing-4) var(--spacing-5);
    position: relative;
    transition: background-color .2s ease
}

.author-template .social-links-author a:before {
    bottom: calc(var(--spacing-4)*-.5);
    content: "";
    left: calc(var(--spacing-4)*-.5);
    position: absolute;
    right: calc(var(--spacing-4)*-.5);
    top: calc(var(--spacing-4)*-.5)
}

.author-template .social-links-author a>.label {
    font-size: var(--font-small);
    font-weight: var(--font-medium)
}

.author-template .social-links-author a>svg {
    display: block;
    height: 1.125em;
    width: 1.125em
}

.author-template .social-links-author a:hover {
    background-color: var(--color-background-300);
    transition-duration: 0s
}

.tag-template .section-tag-posts {
    margin-bottom: calc(var(--layout--gap)*-1 + var(--spacing-10));
    margin-top: var(--spacing-10)
}

.section-tags {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-9)
}

.section-tags:not(:first-child) {
    margin-top: var(--layout--gap)
}

.section-tags-card {
    flex: 1 0 280px
}

.section-tags-card>h3,
.section-tags-card>p,
.section-tags-card>span {
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5)
}

.section-tags-card>h3 {
    font-size: var(--font-large);
    font-weight: var(--font-bold)
}

.section-tags-card>h3>a {
    display: block
}

.section-tags-card>span {
    font-size: var(--font-small);
    margin-top: var(--spacing-1)
}

.section-tags-card>p {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin-top: var(--spacing-6);
    overflow: hidden
}

.section-tags-image {
    background-color: var(--color-background-100);
    border-radius: var(--radius-4);
    display: block;
    margin-bottom: var(--spacing-7);
    overflow: hidden;
    transform-origin: bottom;
    transition: transform .4s ease, background-color .2s ease;
    width: 100%
}

.section-tags-image:not(:has(>picture)) {
    aspect-ratio: 16/9
}

.section-tags-image img {
    border-radius: var(--radius-4);
    transition: transform .4s ease
}

.section-tags-image:hover {
    background-color: var(--color-background-200)
}

.section-tags-image:hover,
.section-tags-image:hover img {
    transform: scale(1.01)
}

/* Video post template */
.post-template-video .post-header{margin-top:0}

.post-video-hero {
    width: var(--container--width);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: var(--spacing-10);
    margin-bottom: var(--layout--padding);
    border-radius: var(--feature-media--radius);
    overflow: hidden
}

.post-video-hero iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0
}

.post-video-hero .kg-video-container {
    border-radius: 0
}

/* Playlist post template */
.post-template-playlist .post-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--layout--gap)
}

.post-template-playlist .post-header > .post-header-content {
    flex: 1;
    max-width: none;
    margin-right: 0;
    margin-left: 0
}

.post-template-playlist .post-header > .feature-media {
    flex: 0 0 clamp(200px, 35%, 380px);
    margin-top: 0;
    border-radius: var(--feature-media--radius);
    overflow: hidden
}

.post-template-playlist .post-header > .feature-media .feature-media-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover
}

@media (max-width: 767px) {
    .post-template-playlist .post-header {
        flex-direction: column
    }

    .post-template-playlist .post-header > .feature-media {
        order: -1;
        flex-basis: auto;
        width: 100%;
        max-width: 380px
    }
}