@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 200;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-200-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-200-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 300;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-300-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-300-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-400-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-400-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-500-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-500-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-600-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-600-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-700-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-700-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-800-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-800-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: normal;
    font-display: swap;
    font-weight: 900;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-900-normal.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-900-normal.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 200;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-200-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-200-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 300;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-300-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-300-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-400-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-400-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 500;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-500-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-500-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 600;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-600-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-600-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 700;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-700-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-700-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 800;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-800-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-800-italic.woff)format("woff")
}

@font-face {
    font-family: SN Pro;
    font-style: italic;
    font-display: swap;
    font-weight: 900;
    src: url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-900-italic.woff2)format("woff2"), url(https://cdn.jsdelivr.net/fontsource/fonts/sn-pro@latest/latin-900-italic.woff)format("woff")
}

*,
:before,
:after {
    box-sizing: border-box;
    backface-visibility: hidden;
    border: 0 solid;
    outline: none;
    margin: 0;
    padding: 0
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

::selection {
    background-color: var(--bg-3);
    color: var(--text-0);
    text-shadow: none
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

html {
    line-height: var(--leading-sm);
    -webkit-text-size-adjust: 100%;
    tab-size: 4
}

body {
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    -o-user-drag: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
dl,
dd,
ul,
ol,
pre,
fieldset,
legend,
hr {
    margin: 0;
    padding: 0
}

ul,
ol,
menu {
    list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: var(--font-weight-semibold)
}

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    display: block
}

img {
    -webkit-user-drag: none;
    user-select: none;
    backface-visibility: hidden;
    image-rendering: crisp-edges
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

table {
    text-indent: 0;
    border-collapse: collapse;
    border-spacing: 0;
    border-color: inherit
}

button,
input,
select,
optgroup,
textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    appearance: none;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
}

::file-selector-button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    appearance: none;
    opacity: 1;
    background-color: #0000;
    border-radius: 0
}

::placeholder {
    opacity: 1;
    color: #9ca3af
}

@supports (color:color-mix(in oklab, black, white)) {
    ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent)
    }
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    appearance: button;
    cursor: pointer
}

::file-selector-button {
    appearance: button;
    cursor: pointer
}

::-webkit-inner-spin-button {
    height: auto
}

::-webkit-outer-spin-button {
    height: auto
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-year-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-month-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-day-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-hour-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-minute-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-second-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-millisecond-field {
    padding: 0;
    display: inline-flex
}

::-webkit-datetime-edit-meridiem-field {
    padding: 0;
    display: inline-flex
}

::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit
}

:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::-webkit-file-upload-button {
    margin-right: 4px
}

:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button {
    margin-right: 4px
}

:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)))::file-selector-button {
    margin-right: 4px
}

:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))::file-selector-button {
    margin-left: 4px
}

progress {
    vertical-align: baseline
}

abbr[title] {
    text-decoration: underline dotted
}

summary {
    display: list-item
}

:focus-visible {
    outline-offset: 2px;
    outline: 2px solid
}

@media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important
    }
}

[hidden]:not([hidden=until-found]) {
    display: none !important
}

:-moz-ui-invalid {
    box-shadow: none
}

:root {
    font-feature-settings: "ss01" 1;
    --gh-font-heading: "SN Pro", sans-serif;
    --gh-font-body: "SN Pro", sans-serif;
    --gh-font-mono: "DM Mono", ui-monospace, monospace;
    --ease-out-elastic: linear(0, .21 3.6%, .402 7.4%, .568 11.3%, .711 15.3%, .772 17.3%, .83 19.4%, .882 21.5%, .929 23.7%, .97 25.9%, 1.008 28.2%, 1.04 30.6%, 1.067 33%, 1.084 34.9%, 1.099 36.9%, 1.111 38.9%, 1.12 41%, 1.127 43.2%, 1.13 45.4%, 1.132 47.7%, 1.13 50.1%, 1.124 54%, 1.111 58.5%, 1.095 62.9%, 1.044 75.5%, 1.03 79.5%, 1.019 83.2%, 1.01 87.3%, 1.004 91.3%, 1.001 95.4%, 1);
    --ease-sine: cubic-bezier(.996, .998, .005, .006);
    --ease-pop: cubic-bezier(.39, .575, .565, 1);
    --header-logo-size: 30px;
    --sidebar-padding: 20px;
    --container-padding: 20px;
    --section-padding: 36px;
    --container-gap: 24px;
    --list-item-gap: .8em;
    --radius-2: 2px;
    --radius-4: 4px;
    --radius-6: 6px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-14: 14px;
    --radius-16: 16px;
    --radius-18: 18px;
    --radius-20: 20px;
    --radius-24: 24px;
    --radius-28: 28px;
    --radius-36: 36px;
    --radius-full: 9999px;
    --radius-image: 16px;
    --font-size-10: 10px;
    --font-size-11: 11px;
    --font-size-12: 12px;
    --font-size-13: 13px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-17: 17px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-22: 22px;
    --font-size-24: 24px;
    --font-size-26: 26px;
    --font-size-28: 28px;
    --font-size-30: 30px;
    --font-size-32: 32px;
    --font-size-34: 34px;
    --font-size-36: 36px;
    --font-size-40: 40px;
    --font-size-44: 44px;
    --font-size-48: 48px;
    --font-size-60: 60px;
    --font-size-72: 72px;
    --loop-title-font-size: var(--font-size-16);
    --loop-excerpt-font-size: var(--font-size-15);
    --loop-meta-font-size: var(--font-size-13);
    --paragraph-font-size: 1.125rem;
    --navigation-font-size: 18px;
    --navigation-icon-size: 22px;
    --post-title-font-size: var(--font-size-28);
    --button-font-size: var(--font-size-14);
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --leading-0: 1em;
    --leading-xxs: 1.16em;
    --leading-xs: 1.24em;
    --leading-sm: 1.36em;
    --leading-md: 1.48em;
    --leading-lg: 1.64em;
    --leading-xl: 1.72em;
    --leading-xxl: 1.77778em;
    --letter-xxs: .0024em;
    --letter-xs: .0125em;
    --letter-sm: .025em;
    --letter-md: .0375em;
    --letter-lg: .05em;
    --letter-xl: .0625em;
    --letter-2xl: .075em;
    --image-aspect-ratio: 16/10;
    --article-image-ratio: 3/2;
    --project-image-ratio: 3/2;
    --reading-image-ratio: 2/3;
    --podcast-image-ratio: 1/1;
    --product-image-ratio: 4/3;
    --toolbar-shadow: #0000001f 0px 4px 16px, #00000014 0px 16px 40px, #0000000d 0px 32px 72px;
    --book-image: linear-gradient(90deg, #fff0 0%, #fff0 12%, #ffffff40 29.25%, #fff0 50.5%, #fff0 75.25%, #ffffff40 91%, #fff0 100%), linear-gradient(90deg, #00000008 0%, #0000001a 12%, transparent 30%, #00000005 50%, #0003 73.5%, #00000080 75.25%, #00000026 85.25%, transparent 100%);
    --book-shadow: #00000026 0px 1.1px 1.5px, #0000001a 0px 2.8px 3.9px, #00000014 0px 5.8px 7.9px, #0000000f 0px 12.0455px 16.4px, #0000000a 0px 33px 45px;
    --button-shadow: inset 0px 0px 8px #ffffff5c;
    --image-shadow: 0 1em 2em -1em #0000001f;
    --image-inner-shadow: .12em solid var(--text-0);
    --hue-bg: linear-gradient(180deg, color-mix(in oklch, var(--ghost-accent-color)100%, transparent), oklch(from var(--ghost-accent-color)l c calc(h + 24)/1)100%);
    --card-background: var(--bg-0);
    --card-border: 1.5px solid var(--border-0);
    --card-shadow: 0 3px 10px -3px #0000000f;
    --radius-card: var(--radius-12);
    --card-padding: 16px;
    --kg-card-margin: 24px
}

@media (width>=360px) {
    :root {
        --container-padding: 24px
    }
}

@media (width>=640px) {
    :root {
        --loop-title-font-size: var(--font-size-17);
        --container-padding: 36px
    }
}

@media (width>=1280px) {
    :root {
        --navigation-font-size: 15px;
        --navigation-icon-size: 18px
    }
}

html[data-theme*=dark] {
    --card-background: var(--bg-1);
    --card-border: 1.5px solid var(--border-1)
}

html {
    scrollbar-gutter: stable;
    scrollbar-color: var(--border-3)var(--bg-0)
}

html.nav-opened {
    overflow: hidden
}

html.is-safari.nav-opened {
    position: fixed;
    overflow: hidden
}

body {
    width: 100%;
    font-family: var(--gh-font-body);
    letter-spacing: -.0064em;
    word-break: break-word;
    color: var(--text-0);
    background: var(--bg-0)
}

.site-wrapper {
    background: var(--bg-0);
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    position: relative
}

@media (width>=1280px) {
    .site-wrapper {
        grid-template-columns: 272px minmax(0, 1fr) 272px;
        display: grid
    }
}

.main {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto;
    display: flex;
    position: relative
}

.container {
    width: 100%;
    padding: var(--container-padding);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    display: flex
}

@media (width>=640px) {
    .container {
        gap: 16px
    }
}

.latest-posts-section,
.latest-readings-section,
.latest-projects-section,
.latest-podcasts-section,
.latest-products-section {
    border-bottom: 1px solid var(--border-0)
}

.latest-posts-section .loops .loop:last-of-type .loop-seperator,
.latest-podcasts-section .loops .loop:last-of-type .loop-seperator {
    display: none !important
}

.main-advertisement {
    border-bottom: 1px solid var(--border-0);
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    margin: 0 auto;
    padding: 12px;
    transition: opacity .24s ease-out;
    display: flex;
    position: relative;
    overflow: hidden
}

.main-advertisement img {
    border-radius: calc(var(--radius-12) - 2px)
}

.main-advertisement:hover {
    opacity: .8
}

.auto-scrollbar {
    scrollbar-color: auto !important
}

.auto-scrollbar::-webkit-scrollbar {
    opacity: 0;
    width: 12px
}

.auto-scrollbar::-webkit-scrollbar-thumb {
    opacity: 0;
    transition: all .6s
}

.auto-scrollbar:hover::-webkit-scrollbar {
    opacity: 1
}

.auto-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: var(--border-2);
    cursor: grab;
    opacity: 1;
    background-clip: content-box;
    border: 4px solid #0000;
    border-radius: 8px
}

.auto-scrollbar:hover::-webkit-scrollbar-thumb:active {
    cursor: grabbing;
    border: 3px solid #0000
}

.shadow-image {
    box-shadow: var(--image-shadow);
    border-radius: var(--radius-12);
    isolation: isolate;
    border: 0;
    position: relative;
    overflow: hidden
}

.shadow-image:after {
    content: "";
    z-index: 3;
    border: var(--image-inner-shadow);
    border-radius: inherit;
    opacity: .36;
    pointer-events: none;
    mix-blend-mode: overlay;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.empty-state {
    width: 100%;
    height: 50vh;
    color: var(--text-3);
    user-select: none;
    flex-direction: column;
    grid-column: 1/-1;
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: flex
}

.empty-state svg {
    opacity: .75;
    width: 30px;
    height: 30px
}

.empty-state .empty-state-title {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    text-align: center;
    max-width: 300px;
    line-height: var(--leading-sm);
    text-wrap: pretty;
    text-wrap-style: pretty
}

.breadcrumbs {
    width: 100%;
    height: fit-content;
    padding: calc(var(--container-padding)/2)var(--container-padding);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-lg);
    user-select: none;
    background: linear-gradient(to bottom, var(--bg-1), var(--bg-0));
    border-bottom: 1px solid var(--border-0);
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: inline-flex;
    position: relative;
    overflow: hidden
}

@media (width>=1280px) {
    .breadcrumbs {
        background: var(--bg-0)
    }
}

.breadcrumbs svg {
    width: 16px;
    height: 16px;
    color: var(--text-3)
}

.breadcrumbs a {
    color: var(--text-1);
    border-radius: var(--radius-10);
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    width: fit-content;
    display: flex
}

.breadcrumbs a span {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: unset !important;
    display: -webkit-box !important
}

.breadcrumbs a svg {
    width: 16px;
    height: 16px
}

.breadcrumbs p {
    opacity: 0;
    color: var(--text-1);
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(90deg, #000 60%, #0000 100%);
    mask-repeat: no-repeat;
    text-overflow: unset !important;
    display: -webkit-box !important
}

.breadcrumbs i {
    font-size: var(--font-size-11);
    line-height: var(--leading-xxs);
    color: var(--border-2);
    font-style: normal
}

.breadcrumbs span {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    color: var(--text-1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: unset !important;
    display: -webkit-box !important
}

.section-title {
    user-select: none;
    width: 100%;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-sm);
    color: var(--text-2);
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    display: flex
}

.section-title .section-title-left {
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    display: flex
}

.section-title .section-title-right {
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    display: flex
}

.inset-hover {
    position: relative
}

.inset-hover:after {
    content: "";
    background: var(--bg-2);
    z-index: 0;
    opacity: 0;
    border-radius: inherit;
    -moz-transition: .2s inset var(--ease-pop), .16s opacity var(--ease-pop);
    transition: .2s inset var(--ease-pop), .16s opacity var(--ease-pop);
    will-change: inset, opacity;
    position: absolute;
    inset: -4px
}

.inset-hover:hover:after {
    opacity: 1;
    inset: -10px
}

.inset-hover:active:after {
    inset: -8px
}

.inset-hover-small {
    position: relative
}

.inset-hover-small:after {
    content: "";
    background: var(--bg-2);
    z-index: 0;
    opacity: 0;
    border-radius: inherit;
    -moz-transition: .2s inset var(--ease-pop), .16s opacity var(--ease-pop);
    transition: .2s inset var(--ease-pop), .16s opacity var(--ease-pop);
    will-change: inset, opacity;
    position: absolute;
    inset: -2px
}

.inset-hover-small:hover:after {
    opacity: 1;
    inset: -6px
}

.inset-hover-small:active:after {
    inset: -4px
}

.fade-hover {
    position: relative;
    overflow: hidden
}

.fade-hover:after {
    content: "";
    background: var(--bg-2);
    z-index: 0;
    opacity: 0;
    border-radius: initial;
    width: 100%;
    height: 100%;
    -moz-transition: .12s opacity var(--ease-pop);
    transition: .12s opacity var(--ease-pop);
    will-change: opacity;
    position: absolute;
    inset: 0
}

.fade-hover:hover:after {
    opacity: .64
}

figure {
    position: relative;
    overflow: hidden
}

figure .lazy-bg {
    border-radius: inherit;
    backdrop-filter: blur(12px)saturate(1.4);
    width: 100%;
    height: 100%;
    -moz-transition: backdrop-filter .6s var(--ease-sine), opacity .4s var(--ease-sine);
    transition: backdrop-filter .6s var(--ease-sine), opacity .4s var(--ease-sine);
    pointer-events: none;
    z-index: 2;
    isolation: isolate;
    position: absolute;
    inset: 0
}

figure:has(img.lazy.loaded):not(:has(img.lazy-opacity)) .lazy-bg {
    backdrop-filter: blur()saturate();
    opacity: 0;
    isolation: isolate
}

figure:has(img.lazy-opacity) .lazy-bg {
    display: none !important
}

figure:has(img.lazy-opacity) img.lazy-opacity {
    opacity: 0;
    -moz-transition: opacity .36s var(--ease-sine);
    transition: opacity .36s var(--ease-sine)
}

figure:has(img.lazy-opacity) img.lazy-opacity.loaded {
    opacity: 1
}

.content {
    word-break: break-word;
    overflow-wrap: break-word
}

.content figcaption {
    text-align: center;
    width: 100%;
    font-size: var(--font-size-14);
    color: var(--text-2);
    margin: .6em auto 0
}

.content figcaption>*,
.content figcaption p,
.content figcaption a,
.content figcaption u,
.content figcaption i,
.content figcaption strong,
.content figcaption em,
.content figcaption span {
    font-size: inherit
}

.content figcaption>a {
    color: var(--text-0) !important
}

.content figcaption>u {
    color: currentColor
}

.content h1:not(.kg-card *) {
    font-family: var(--gh-font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    margin: .48em 0
}

.content h1:not(.kg-card *) strong {
    font-weight: var(--font-weight-extrabold)
}

.content h1:not(.kg-card *):has(+hr) {
    margin-bottom: 0
}

.content h2:not(.kg-card *) {
    font-family: var(--gh-font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    margin: .48em 0
}

.content h2:not(.kg-card *) strong {
    font-weight: var(--font-weight-extrabold)
}

.content h2:not(.kg-card *):has(+hr) {
    margin-bottom: 0
}

.content h3:not(.kg-card *) {
    font-family: var(--gh-font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    margin: .48em 0
}

.content h3:not(.kg-card *) strong {
    font-weight: var(--font-weight-extrabold)
}

.content h3:not(.kg-card *):has(+hr) {
    margin-bottom: 0
}

.content h4:not(.kg-card *) {
    font-family: var(--gh-font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    margin: .48em 0
}

.content h4:not(.kg-card *) strong {
    font-weight: var(--font-weight-extrabold)
}

.content h4:not(.kg-card *):has(+hr) {
    margin-bottom: 0
}

.content h5:not(.kg-card *) {
    font-family: var(--gh-font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    margin: .48em 0
}

.content h5:not(.kg-card *) strong {
    font-weight: var(--font-weight-extrabold)
}

.content h5:not(.kg-card *):has(+hr) {
    margin-bottom: 0
}

.content h6:not(.kg-card *) {
    font-family: var(--gh-font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    margin: .48em 0
}

.content h6:not(.kg-card *) strong {
    font-weight: var(--font-weight-extrabold)
}

.content h6:not(.kg-card *):has(+hr) {
    margin-bottom: 0
}

.content h1:not(.kg-card *) {
    font-size: var(--font-size-36)
}

@media (width<=479px) {
    .content h1:not(.kg-card *) {
        font-size: var(--font-size-32)
    }
}

.content h2:not(.kg-card *) {
    font-size: var(--font-size-30)
}

@media (width<=479px) {
    .content h2:not(.kg-card *) {
        font-size: var(--font-size-26)
    }
}

.content h3:not(.kg-card *) {
    font-size: var(--font-size-24)
}

@media (width<=479px) {
    .content h3:not(.kg-card *) {
        font-size: var(--font-size-22)
    }
}

.content h4:not(.kg-card *) {
    font-size: var(--font-size-20)
}

@media (width<=479px) {
    .content h4:not(.kg-card *) {
        font-size: var(--font-size-18)
    }
}

.content h5:not(.kg-card *) {
    font-size: var(--font-size-18)
}

@media (width<=479px) {
    .content h5:not(.kg-card *) {
        font-size: var(--font-size-16)
    }
}

.content h6:not(.kg-card *) {
    font-size: var(--font-size-15)
}

@media (width<=479px) {
    .content h6:not(.kg-card *) {
        font-size: var(--font-size-14)
    }
}

.content h6:not(.kg-card *) {
    text-transform: uppercase;
    letter-spacing: .04em
}

.content :is(h1, h2, h3, h4, h5, h6)+:is(h1, h2, h3, h4, h5, h6) {
    margin-top: 12px;
    margin-bottom: 12px
}

.content :not(:-webkit-any(h1, h2, h3, h4, h5, h6, hr))+:-webkit-any(h1, h2, h3, h4, h5, h6):not(.kg-card *) {
    margin-top: calc(1em + 12px)
}

.content :not(:-moz-any(h1, h2, h3, h4, h5, h6, hr))+:-moz-any(h1, h2, h3, h4, h5, h6):not(.kg-card *) {
    margin-top: calc(1em + 12px)
}

.content :not(:is(h1, h2, h3, h4, h5, h6, hr))+:is(h1, h2, h3, h4, h5, h6):not(.kg-card *) {
    margin-top: calc(1em + 12px)
}

.content hr+:is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0 !important
}

.content p:not(.kg-card * p) {
    font-size: var(--paragraph-font-size);
    line-height: var(--leading-xxl);
    font-weight: var(--font-weight-regular);
    color: var(--text-1)
}

.content p:not(.kg-card * p)+p {
    margin-top: 1em
}

.content p:not(.kg-card * p)+div {
    margin-top: 24px
}

.content .table-container:has(~p) {
    margin-bottom: 24px
}

.content hr:not(.data-hr) {
    background: var(--border-1);
    border-radius: var(--radius-8);
    content: "";
    border: none;
    width: 5px;
    height: 5px;
    margin: 60px auto;
    position: relative;
    overflow: visible
}

.content hr:not(.data-hr):before {
    background: var(--bg-2);
    content: "";
    border-radius: var(--radius-8);
    width: 5px;
    height: 5px;
    position: absolute;
    left: -24px
}

.content hr:not(.data-hr):after {
    background: var(--bg-2);
    content: "";
    border-radius: var(--radius-8);
    width: 5px;
    height: 5px;
    position: absolute;
    right: -24px
}

@media (width<=767px) {
    .content hr:not(.data-hr) {
        margin: 48px auto
    }
}

@media (width<=639px) {
    .content hr:not(.data-hr) {
        margin: 40px auto
    }
}

.content hr:not(.data-hr)+.data-hr[data-text] {
    margin-top: 0 !important
}

.content .data-hr[data-text] {
    text-align: left;
    width: 100%;
    font-size: var(--font-size-14);
    text-transform: uppercase;
    letter-spacing: var(--letter-sm);
    color: var(--text-0);
    user-select: none;
    border-radius: 3px;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 1.64rem;
    margin-bottom: 1.24rem;
    transition: all .2s ease-out;
    display: flex;
    box-shadow: 0 0 0 2px #0000
}

.content .data-hr[data-text]:first-child {
    margin-top: 0
}

.content .data-hr[data-text]:before {
    content: attr(data-text);
    font-weight: var(--font-weight-extrabold);
    margin: 0;
    display: block
}

.content .data-hr[data-text]:after {
    content: "";
    border-top: 1.2px dotted var(--border-3);
    flex-grow: 1;
    min-width: 20px;
    height: 1.2px;
    margin: auto
}

.content .data-hr[data-text]:hover {
    background: var(--bg-2);
    box-shadow: 0 0 0 6px var(--bg-2);
    transition: all .2s ease-out
}

.content .data-hr[data-text]:active {
    box-shadow: 0 0 0 4px var(--bg-2);
    transition: all .2s ease-out
}

.content :-webkit-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a {
    font-weight: var(--font-weight-medium);
    color: var(--ghost-accent-color);
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    -webkit-text-decoration-color: var(--ghost-accent-color);
    text-decoration-color: var(--ghost-accent-color);
    transition: opacity .3s ease-out;
    display: inline-block;
    position: relative
}

.content :-webkit-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a:hover {
    opacity: .64
}

.content :-moz-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a {
    font-weight: var(--font-weight-medium);
    color: var(--ghost-accent-color);
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    -webkit-text-decoration-color: var(--ghost-accent-color);
    text-decoration-color: var(--ghost-accent-color);
    transition: opacity .3s ease-out;
    display: inline-block;
    position: relative
}

.content :-moz-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a:hover {
    opacity: .64
}

.content :is(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a {
    font-weight: var(--font-weight-medium);
    color: var(--ghost-accent-color);
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    -webkit-text-decoration-color: var(--ghost-accent-color);
    text-decoration-color: var(--ghost-accent-color);
    transition: opacity .3s ease-out;
    display: inline-block;
    position: relative
}

.content :is(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a:hover {
    opacity: .64
}

.content :-webkit-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a strong {
    font-weight: var(--font-weight-medium);
    color: var(--ghost-accent-color);
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    -webkit-text-decoration-color: var(--ghost-accent-color);
    text-decoration-color: var(--ghost-accent-color);
    transition: opacity .3s ease-out;
    display: inline-block;
    position: relative
}

.content :-webkit-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a strong:hover {
    opacity: .64
}

.content :-moz-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a strong {
    font-weight: var(--font-weight-medium);
    color: var(--ghost-accent-color);
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    -webkit-text-decoration-color: var(--ghost-accent-color);
    text-decoration-color: var(--ghost-accent-color);
    transition: opacity .3s ease-out;
    display: inline-block;
    position: relative
}

.content :-moz-any(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a strong:hover {
    opacity: .64
}

.content :is(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a strong {
    font-weight: var(--font-weight-medium);
    color: var(--ghost-accent-color);
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    -webkit-text-decoration-color: var(--ghost-accent-color);
    text-decoration-color: var(--ghost-accent-color);
    transition: opacity .3s ease-out;
    display: inline-block;
    position: relative
}

.content :is(p, figcaption, ul, h3, .kg-callout-text, blockquote, .footer-copyright, .hedwik-zoom-title) a strong:hover {
    opacity: .64
}

.content u {
    text-underline-offset: .2em;
    text-decoration: underline .084em;
    display: inline-block;
    position: relative
}

.content strong,
.content b {
    font-weight: var(--font-weight-bold);
    color: var(--text-0)
}

.content code:not(.hljs) {
    font-family: var(--gh-font-mono);
    font-weight: var(--font-weight-medium);
    text-align: center;
    border-radius: var(--radius-6);
    white-space: nowrap;
    background: var(--bg-1);
    border: 1.4px solid var(--border-1);
    vertical-align: middle;
    margin: 0 2px;
    padding: 2px 4px 3px;
    font-size: .9rem;
    line-height: 1em;
    display: inline;
    position: relative;
    top: -1px;
    color: var(--text-1) !important
}

html[data-theme=dark] :is(.content code:not(.hljs)) {
    background: var(--bg-1)
}

.content ul:not(.kg-card ul):not(.kg-card * ul) {
    line-height: var(--leading-sm);
    font-size: var(--paragraph-font-size);
    margin-bottom: 1em;
    padding-left: 1.16em;
    list-style-type: disc;
    list-style-position: outside
}

.content ul:not(.kg-card ul):not(.kg-card * ul) li::marker {
    color: var(--text-1);
    font-size: .9em
}

.content ul:not(.kg-card ul):not(.kg-card * ul) li {
    margin-top: var(--list-item-gap)
}

.content ul:not(.kg-card ul):not(.kg-card * ul) li ul,
.content ul:not(.kg-card ul):not(.kg-card * ul) li ol {
    margin-top: var(--list-item-gap);
    padding-left: 1.36em
}

.content ul:not(.kg-card ul):not(.kg-card * ul) li ul {
    list-style-type: circle
}

.content ul:not(.kg-card ul):not(.kg-card * ul) li ul li ul {
    list-style-type: square
}

.content .kg-toggle-card ul {
    line-height: var(--leading-sm);
    font-size: var(--paragraph-font-size);
    margin-bottom: 1em;
    padding-left: 1.16em;
    list-style-type: disc;
    list-style-position: outside
}

.content .kg-toggle-card ul li::marker {
    color: var(--text-1);
    font-size: .9em
}

.content .kg-toggle-card ul li {
    margin-top: var(--list-item-gap)
}

.content .kg-toggle-card ul li ul,
.content .kg-toggle-card ul li ol {
    margin-top: var(--list-item-gap);
    padding-left: 1.36em
}

.content .kg-toggle-card ul li ul {
    list-style-type: circle
}

.content .kg-toggle-card ul li ul li ul {
    list-style-type: square
}

.content .kg-product-card ul {
    line-height: var(--leading-sm);
    font-size: var(--paragraph-font-size);
    margin-bottom: 1em;
    padding-left: 1.16em;
    list-style-type: disc;
    list-style-position: outside
}

.content .kg-product-card ul li::marker {
    color: var(--text-1);
    font-size: .9em
}

.content .kg-product-card ul li {
    margin-top: var(--list-item-gap)
}

.content .kg-product-card ul li ul,
.content .kg-product-card ul li ol {
    margin-top: var(--list-item-gap);
    padding-left: 1.36em
}

.content .kg-product-card ul li ul {
    list-style-type: circle
}

.content .kg-product-card ul li ul li ul {
    list-style-type: square
}

.content ol:not(.kg-card ol):not(.kg-card * ol) {
    line-height: var(--leading-sm);
    font-size: var(--paragraph-font-size);
    margin-bottom: 1em;
    padding-left: 1.16em;
    list-style-type: decimal;
    list-style-position: outside
}

.content ol:not(.kg-card ol):not(.kg-card * ol) li::marker {
    font-size: .96em;
    font-weight: var(--font-weight-medium);
    color: var(--text-1)
}

.content ol:not(.kg-card ol):not(.kg-card * ol) li {
    margin-top: var(--list-item-gap)
}

.content ol:not(.kg-card ol):not(.kg-card * ol) li ul,
.content ol:not(.kg-card ol):not(.kg-card * ol) li ol {
    margin-top: var(--list-item-gap);
    padding-left: 1.36em
}

.content ol:not(.kg-card ol):not(.kg-card * ol) li ol {
    list-style-type: lower-alpha
}

.content ol:not(.kg-card ol):not(.kg-card * ol) li ol li {
    margin-bottom: var(--list-item-gap)
}

.content ol:not(.kg-card ol):not(.kg-card * ol) li ol li ol {
    list-style-type: lower-roman
}

.content .kg-toggle-card ol {
    line-height: var(--leading-sm);
    font-size: var(--paragraph-font-size);
    margin-bottom: 1em;
    padding-left: 1.16em;
    list-style-type: decimal;
    list-style-position: outside
}

.content .kg-toggle-card ol li::marker {
    font-size: .96em;
    font-weight: var(--font-weight-medium);
    color: var(--text-1)
}

.content .kg-toggle-card ol li {
    margin-top: var(--list-item-gap)
}

.content .kg-toggle-card ol li ul,
.content .kg-toggle-card ol li ol {
    margin-top: var(--list-item-gap);
    padding-left: 1.36em
}

.content .kg-toggle-card ol li ol {
    list-style-type: lower-alpha
}

.content .kg-toggle-card ol li ol li {
    margin-bottom: var(--list-item-gap)
}

.content .kg-toggle-card ol li ol li ol {
    list-style-type: lower-roman
}

.content .kg-product-card ol {
    line-height: var(--leading-sm);
    font-size: var(--paragraph-font-size);
    margin-bottom: 1em;
    padding-left: 1.16em;
    list-style-type: decimal;
    list-style-position: outside
}

.content .kg-product-card ol li::marker {
    font-size: .96em;
    font-weight: var(--font-weight-medium);
    color: var(--text-1)
}

.content .kg-product-card ol li {
    margin-top: var(--list-item-gap)
}

.content .kg-product-card ol li ul,
.content .kg-product-card ol li ol {
    margin-top: var(--list-item-gap);
    padding-left: 1.36em
}

.content .kg-product-card ol li ol {
    list-style-type: lower-alpha
}

.content .kg-product-card ol li ol li {
    margin-bottom: var(--list-item-gap)
}

.content .kg-product-card ol li ol li ol {
    list-style-type: lower-roman
}

.content iframe {
    margin-top: 24px;
    max-width: 100% !important
}

.content .kg-embed-card iframe {
    border-radius: var(--radius-12);
    margin-top: 0 !important
}

.fully {
    text-align: center;
    border: 1px solid var(--border-0);
    border-radius: var(--radius-12);
    background-color: var(--bg-0);
    user-select: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 36px;
    display: flex;
    position: relative;
    overflow: hidden;
    container-type: inline-size
}

@media (width<=767px) {
    .fully {
        padding: 24px
    }
}

@media (width<=479px) {
    .fully {
        padding: 16px
    }
}

.fully:before {
    content: "";
    background-color: var(--bg-1);
    z-index: 1;
    position: absolute;
    inset: 0;
    mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
    mask-size: 40px 40px;
    mask-repeat: repeat
}

.fully .fully-font {
    z-index: 2;
    color: var(--text-0);
    white-space: nowrap !important;
    font-size: 11cqw !important;
    line-height: var(--leading-0) !important;
    margin: 0 !important
}

h1:is(.fully .fully-font) {
    font-weight: var(--font-weight-extrabold) !important
}

:root {
    --bg-0: #fff;
    --bg-1: #f5f5f7;
    --bg-2: #ebebed;
    --bg-3: #e1e1e3;
    --border-0: #f1f2f3;
    --border-1: #e7e8e9;
    --border-2: #dddedf;
    --border-3: #d0d1d2;
    --text-0: #020202;
    --text-1: #3d3d3e;
    --text-2: #68696a;
    --text-3: #98989a;
    --green-color: #3fad1e;
    --red-color: #e62e1e;
    --blue-color: #1f95d8;
    --yellow-color: #d59800;
    --premium-color: #d59800
}

@supports (color:lab(0% 0 0)) {
    :root {
        --bg-0: lab(100% 0 0);
        --bg-1: lab(96.5022% .151694 -.89711);
        --bg-2: lab(93.0222% .151753 -.897074);
        --bg-3: lab(89.5422% .151783 -.897026);
        --border-0: lab(95.3421% .151753 -.89711);
        --border-1: lab(91.8621% .151783 -.897074);
        --border-2: lab(88.3821% .151783 -.897026);
        --border-3: lab(83.7421% .151902 -.89699);
        --text-0: lab(.459658% .0252575 -.139537);
        --text-1: lab(25.742% .154302 -.895453);
        --text-2: lab(44.3021% .153035 -.896239);
        --text-3: lab(62.8621% .15232 -.89668);
        --green-color: lab(62.7743% -51.0126 56.9378);
        --red-color: lab(51.4727% 68.4449 55.9028);
        --blue-color: lab(58.0105% -13.4193 -44.0643);
        --yellow-color: lab(67.5093% 16.3562 71.8842);
        --premium-color: lab(67.5093% 16.3562 71.8842)
    }
}

[data-theme=default-light] {
    --bg-0: #fff;
    --bg-1: #f5f5f7;
    --bg-2: #ebebed;
    --bg-3: #e1e1e3;
    --border-0: #f1f2f3;
    --border-1: #e7e8e9;
    --border-2: #dddedf;
    --border-3: #d0d1d2;
    --text-0: #020202;
    --text-1: #3d3d3e;
    --text-2: #68696a;
    --text-3: #98989a
}

@supports (color:lab(0% 0 0)) {
    [data-theme=default-light] {
        --bg-0: lab(100% 0 0);
        --bg-1: lab(96.5022% .151694 -.89711);
        --bg-2: lab(93.0222% .151753 -.897074);
        --bg-3: lab(89.5422% .151783 -.897026);
        --border-0: lab(95.3421% .151753 -.89711);
        --border-1: lab(91.8621% .151783 -.897074);
        --border-2: lab(88.3821% .151783 -.897026);
        --border-3: lab(83.7421% .151902 -.89699);
        --text-0: lab(.459658% .0252575 -.139537);
        --text-1: lab(25.742% .154302 -.895453);
        --text-2: lab(44.3021% .153035 -.896239);
        --text-3: lab(62.8621% .15232 -.89668)
    }
}

[data-theme=default-dark] {
    --bg-0: #050606;
    --bg-1: #111212;
    --bg-2: #1f1f20;
    --bg-3: #2d2e2e;
    --border-0: #161616;
    --border-1: #232424;
    --border-2: #323333;
    --border-3: #424243;
    --text-0: #dddedf;
    --text-1: #bdbebe;
    --text-2: #7f8081;
    --text-3: #555556
}

@supports (color:lab(0% 0 0)) {
    [data-theme=default-dark] {
        --bg-0: lab(1.56153% -.0657588 -.135356);
        --bg-1: lab(5.26949% -.148855 -.303313);
        --bg-2: lab(11.842% -.197567 -.396565);
        --bg-3: lab(18.802% -.197858 -.39674);
        --border-0: lab(7.22818% -.184 -.374144);
        --border-1: lab(14.162% -.197679 -.396633);
        --border-2: lab(21.122% -.197947 -.396788);
        --border-3: lab(28.082% -.198126 -.396889);
        --text-0: lab(88.402% -.198722 -.397229);
        --text-1: lab(76.802% -.198662 -.397182);
        --text-2: lab(53.602% -.198513 -.39711);
        --text-3: lab(36.202% -.198275 -.396973)
    }
}

[data-theme=dune-light] {
    --bg-0: #fff8e8;
    --bg-1: #f2eada;
    --bg-2: #e5ddcd;
    --bg-3: #d8d0c0;
    --border-0: #f2eada;
    --border-1: #e5ddcd;
    --border-2: #d8d0c0;
    --border-3: #cbc3b3;
    --text-0: #120c03;
    --text-1: #433c2f;
    --text-2: #6f6859;
    --text-3: #9f9888
}

@supports (color:lab(0% 0 0)) {
    [data-theme=dune-light] {
        --bg-0: lab(97.7759% .644863 9.23243);
        --bg-1: lab(93.1355% .652015 9.23777);
        --bg-2: lab(88.4951% .659794 9.24364);
        --bg-3: lab(83.8546% .668287 9.25011);
        --border-0: lab(93.1355% .652015 9.23777);
        --border-1: lab(88.4951% .659794 9.24364);
        --border-2: lab(83.8546% .668287 9.25011);
        --border-3: lab(79.214% .677615 9.25726);
        --text-0: lab(3.72935% .886053 4.42381);
        --text-1: lab(25.8395% .928208 9.48337);
        --text-2: lab(44.4074% .792056 9.35193);
        --text-3: lab(62.9716% .718683 9.2898)
    }
}

[data-theme=matrix-dark] {
    --bg-0: #001000;
    --bg-1: #001d00;
    --bg-2: #022b00;
    --bg-3: #053900;
    --border-0: #001d00;
    --border-1: #022b00;
    --border-2: #053900;
    --border-3: #0e4800;
    --text-0: #92e780;
    --text-1: #73c660;
    --text-2: #53a640;
    --text-3: #227702
}

@supports (color:lab(0% 0 0)) {
    [data-theme=matrix-dark] {
        --bg-0: lab(3.63718% -12.0697 8.17283);
        --bg-1: lab(8.35045% -23.087 17.0691);
        --bg-2: lab(14.217% -30.2768 26.3604);
        --bg-3: lab(20.0653% -30.4661 32.8591);
        --border-0: lab(8.35045% -23.087 17.0691);
        --border-1: lab(14.217% -30.2768 26.3604);
        --border-2: lab(20.0653% -30.4661 32.8591);
        --border-3: lab(25.902% -30.5417 35.4081);
        --text-0: lab(84.4807% -41.1363 41.622);
        --text-1: lab(72.8559% -41.0562 42.2496);
        --text-2: lab(61.2242% -40.9586 43.2259);
        --text-3: lab(43.7562% -40.7711 46.4859)
    }
}

[data-theme=royal-dark] {
    --bg-0: #0e0000;
    --bg-1: #1c0300;
    --bg-2: #2b0901;
    --bg-3: #391609;
    --border-0: #2e0600;
    --border-1: #3f1000;
    --border-2: #4e1c0a;
    --border-3: #5c2a17;
    --text-0: #f2c86c;
    --text-1: #d1a84b;
    --text-2: #b18827;
    --text-3: #7e5d00
}

@supports (color:lab(0% 0 0)) {
    [data-theme=royal-dark] {
        --bg-0: lab(.77305% 5.56512 1.82188);
        --bg-1: lab(2.78175% 11.0925 5.14293);
        --bg-2: lab(6.7793% 17.0301 10.1959);
        --bg-3: lab(12.5331% 17.024 15.4116);
        --border-0: lab(6.59379% 23.2713 12.1907);
        --border-1: lab(12.339% 23.2201 19.3548);
        --border-2: lab(18.1644% 22.8816 23.2262);
        --border-3: lab(23.983% 22.6173 23.0058);
        --text-0: lab(82.8346% 7.691 50.9405);
        --text-1: lab(71.2019% 8.24577 52.3464);
        --text-2: lab(59.5601% 8.94943 54.7773);
        --text-3: lab(42.0699% 10.4423 66.106)
    }
}

.primary-button,
.secondary-button,
.disabled-button,
.outline-button {
    justify-content: center;
    align-items: center;
    gap: calc(var(--button-font-size)/2);
    width: fit-content;
    height: fit-content;
    min-height: 30px;
    font-family: inherit;
    font-size: var(--button-font-size);
    font-weight: var(--font-weight-bold);
    font-style: normal;
    line-height: var(--leading-sm);
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
    word-break: normal;
    word-wrap: normal;
    color: inherit;
    border-radius: var(--radius-8);
    box-shadow: none;
    opacity: 1;
    will-change: opacity;
    cursor: pointer;
    pointer-events: auto;
    visibility: visible;
    user-select: none;
    appearance: none;
    aspect-ratio: auto;
    text-overflow: ellipsis;
    border-radius: var(--radius-8);
    background: 0 0;
    border: none;
    flex: none;
    grid-column: 1/-1;
    margin: 0;
    padding: .52em .88em;
    text-decoration: none;
    transition: opacity .3s;
    display: inline-flex;
    position: relative;
    overflow: visible;
    transform: none
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button):has(.button-left, .button-right) {
    justify-content: space-between
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button) .button-left {
    justify-content: flex-start;
    align-items: center;
    gap: calc(var(--button-font-size)/2);
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
    width: auto;
    height: auto;
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(90deg, #000 80%, #0000 100%)
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button) .button-right {
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    display: flex
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button) strong {
    font-weight: var(--font-weight-bold)
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button) svg {
    width: calc(var(--button-font-size) + 2px);
    height: calc(var(--button-font-size) + 2px);
    flex-shrink: 0;
    margin-left: -2px;
    margin-right: -2px;
    display: inline-block
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button):hover:not(:disabled):not(.disabled-button) {
    opacity: .84
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button):active:not(:disabled):not(.disabled-button) {
    opacity: 1
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button):disabled,
:is(.primary-button, .secondary-button, .disabled-button, .outline-button).disabled-button {
    cursor: not-allowed
}

:is(.primary-button, .secondary-button, .disabled-button, .outline-button):focus-visible {
    outline: 2px solid var(--text-0);
    outline-offset: 3px
}

.primary-button {
    background: var(--ghost-accent-color);
    color: #fff;
    border: none;
    box-shadow: inset 0 2px 5px #ffffff5c, 0 2px 6px -2px #0000005c
}

.secondary-button {
    background: var(--bg-2);
    color: var(--text-1);
    border: none;
    box-shadow: inset 0 2px 8px #ffffff1f, inset 0 0 0 1.2px #00000014
}

.disabled-button {
    background: var(--bg-2);
    opacity: .6;
    color: var(--text-2);
    pointer-events: none;
    border: none;
    box-shadow: inset 0 2px 8px #ffffff1f, inset 0 0 0 1.2px #00000014
}

.outline-button {
    background: var(--bg-0);
    box-shadow: inset 0 0 0 1.5px var(--border-1);
    color: var(--text-1)
}

.primary-button.square,
.secondary-button.square,
.disabled-button.square,
.outline-button.square {
    --square-button-size: 30px;
    width: var(--square-button-size);
    height: var(--square-button-size);
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    overflow: visible;
    border-radius: calc(var(--square-button-size)/4) !important
}

:is(.primary-button.square, .secondary-button.square, .disabled-button.square, .outline-button.square) svg {
    margin: 0;
    width: calc(var(--square-button-size)/1.8) !important;
    height: calc(var(--square-button-size)/1.8) !important
}

.primary-button.small,
.secondary-button.small,
.disabled-button.small,
.outline-button.small {
    font-size: calc(var(--button-font-size) - 1px) !important;
    padding: .44em .72em !important
}

:is(.primary-button.small, .secondary-button.small, .disabled-button.small, .outline-button.small) svg {
    width: calc(var(--button-font-size) + 1px) !important;
    height: calc(var(--button-font-size) + 1px) !important
}

textarea,
input[type=text] {
    appearance: none;
    width: 100%;
    height: 36px;
    min-height: 32px;
    font-family: inherit;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    color: var(--text-0);
    background: var(--bg-0);
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius-8);
    resize: none;
    user-select: text;
    -moz-transition: box-shadow .24s var(--ease-pop);
    transition: box-shadow .24s var(--ease-pop);
    outline: none;
    justify-content: flex-start;
    align-items: center;
    padding: .6em;
    display: inline-flex
}

input[type=text]::placeholder {
    color: var(--text-3);
    font-weight: var(--font-weight-medium)
}

input[type=text]:focus,
input[type=text]:focus-visible {
    border-color: var(--ghost-accent-color);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ghost-accent-color)16%, transparent);
    background: var(--bg-0);
    outline: none
}

input[type=text]:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-1);
    border-color: var(--border-0);
    color: var(--text-3)
}

input[type=email] {
    appearance: none;
    width: 100%;
    height: 36px;
    min-height: 32px;
    font-family: inherit;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    color: var(--text-0);
    background: var(--bg-0);
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius-8);
    resize: none;
    user-select: text;
    -moz-transition: box-shadow .24s var(--ease-pop);
    transition: box-shadow .24s var(--ease-pop);
    outline: none;
    justify-content: flex-start;
    align-items: center;
    padding: .6em;
    display: inline-flex
}

input[type=email]::placeholder {
    color: var(--text-3);
    font-weight: var(--font-weight-medium)
}

input[type=email]:focus,
input[type=email]:focus-visible {
    border-color: var(--ghost-accent-color);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ghost-accent-color)16%, transparent);
    background: var(--bg-0);
    outline: none
}

input[type=email]:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-1);
    border-color: var(--border-0);
    color: var(--text-3)
}

input[type=password] {
    appearance: none;
    width: 100%;
    height: 36px;
    min-height: 32px;
    font-family: inherit;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    color: var(--text-0);
    background: var(--bg-0);
    border: 1.5px solid var(--border-1);
    border-radius: var(--radius-8);
    resize: none;
    user-select: text;
    -moz-transition: box-shadow .24s var(--ease-pop);
    transition: box-shadow .24s var(--ease-pop);
    outline: none;
    justify-content: flex-start;
    align-items: center;
    padding: .6em;
    display: inline-flex
}

input[type=password]::placeholder {
    color: var(--text-3);
    font-weight: var(--font-weight-medium)
}

input[type=password]:focus,
input[type=password]:focus-visible {
    border-color: var(--ghost-accent-color);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ghost-accent-color)16%, transparent);
    background: var(--bg-0);
    outline: none
}

input[type=password]:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-1);
    border-color: var(--border-0);
    color: var(--text-3)
}

textarea::placeholder {
    color: var(--text-3);
    font-weight: var(--font-weight-medium)
}

textarea:focus,
textarea:focus-visible {
    border-color: var(--ghost-accent-color);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ghost-accent-color)16%, transparent);
    background: var(--bg-0);
    outline: none
}

textarea:disabled {
    opacity: .55;
    cursor: not-allowed;
    background: var(--bg-1);
    border-color: var(--border-0);
    color: var(--text-3)
}

textarea {
    min-height: 120px;
    line-height: var(--leading-md);
    white-space: pre-wrap;
    resize: vertical;
    align-items: flex-start;
    overflow-y: auto
}

.checkbox-label,
.radio-label {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    color: var(--text-1);
    line-height: var(--leading-sm);
    cursor: pointer;
    user-select: none;
    text-align: left;
    grid-column: 1/-1;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: fit-content;
    display: flex
}

:is(.checkbox-label, .radio-label) span {
    margin-top: 2px
}

input[type=checkbox],
input[type=radio] {
    appearance: none;
    cursor: pointer;
    border: 2px solid var(--ghost-accent-color);
    width: 20px;
    height: 20px;
    -moz-transition: all .3s var(--ease-pop);
    transition: all .3s var(--ease-pop);
    background-color: #0000;
    flex-shrink: 0;
    margin: 2px 2px 2px 0;
    display: inline-block;
    position: relative
}

input[type=checkbox] {
    border-radius: var(--radius-6)
}

input[type=radio] {
    border-radius: 50%
}

input[type=checkbox]:before,
input[type=radio]:before {
    content: "";
    -moz-transition: all .3s var(--ease-pop);
    transition: all .3s var(--ease-pop);
    opacity: 0;
    background-color: var(--ghost-accent-color);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)scale(.4)
}

input[type=checkbox]:before {
    border-radius: var(--radius-4);
    width: 12px;
    height: 12px
}

input[type=radio]:before {
    border-radius: 50%;
    width: 10px;
    height: 10px
}

input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
    opacity: 1;
    transform: translate(-50%, -50%)scale(1)
}

[data-tootik] {
    cursor: pointer;
    z-index: 10;
    position: relative
}

[data-tootik]:after {
    transform-origin: bottom;
    background: var(--text-0);
    color: var(--bg-1);
    font-family: var(--gh-font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-12);
    line-height: var(--leading-sm);
    opacity: 0;
    border-radius: var(--radius-8);
    white-space: nowrap;
    content: attr(data-tootik);
    pointer-events: none;
    -moz-transition: transform .24s var(--ease-pop);
    transition: transform .24s var(--ease-pop);
    z-index: 9999;
    padding: 4px 6px;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 8px)scale(.9);
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

[data-tootik]:hover:after {
    opacity: 1;
    transform-origin: bottom;
    transform: translate(-50%, -4px)scale(1)
}

[data-tootik][data-tootik-conf*=bottom]:after {
    transform-origin: bottom;
    top: 100%;
    bottom: auto;
    transform: translate(-50%, 6px)scale(.9)
}

[data-tootik][data-tootik-conf*=bottom]:hover:after {
    transform: translate(-50%, 4px)scale(1)
}

[data-tootik][data-tootik=""]:after {
    display: none
}

.left-sidebar {
    text-align: center;
    scrollbar-width: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
    position: relative
}

.left-sidebar::-webkit-scrollbar {
    display: none
}

@media (width>=1280px) {
    .left-sidebar {
        border-right: 1px solid var(--border-0);
        justify-content: space-between;
        height: 100%;
        min-height: calc(100vh - 1px);
        max-height: calc(100vh - 1px);
        position: sticky;
        top: 0
    }
}

.left-sidebar .left-sidebar-top {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    display: flex
}

.left-sidebar .left-sidebar-bottom {
    padding: var(--sidebar-padding);
    z-index: 12;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    display: none;
    position: relative
}

@media (width>=1280px) {
    .left-sidebar .left-sidebar-bottom {
        display: flex
    }
}

.left-sidebar .left-sidebar-bottom .sign-button,
.left-sidebar .left-sidebar-bottom .account-button,
.left-sidebar .left-sidebar-bottom .upgrade-button {
    width: 100%
}

.right-sidebar {
    text-align: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    display: flex;
    position: relative
}

.right-sidebar::-webkit-scrollbar {
    display: none
}

@media (width>=1280px) {
    .right-sidebar {
        border-left: 1px solid var(--border-0);
        background: var(--bg-0);
        justify-content: space-between;
        gap: 0;
        height: 100%;
        min-height: calc(100vh - 1px);
        max-height: calc(100vh - 1px);
        position: sticky;
        top: 0;
        overflow-y: auto
    }
}

.right-sidebar .right-sidebar-top {
    width: 100%;
    padding: var(--sidebar-padding);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 36px;
    display: flex;
    scrollbar-width: none !important
}

.right-sidebar .right-sidebar-top::-webkit-scrollbar {
    display: none !important
}

@media (width>=1280px) {
    .right-sidebar .right-sidebar-top {
        height: calc(100vh - var(--right-sidebar-bottom-height));
        overflow-y: auto
    }
}

.right-sidebar .right-sidebar-top .sidebar-note {
    user-select: none;
    --borderWidth: 2px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    height: fit-content;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-note:after {
    content: "";
    top: calc(-1*var(--borderWidth));
    left: calc(-1*var(--borderWidth));
    width: calc(100% + var(--borderWidth)*2);
    height: calc(100% + var(--borderWidth)*2);
    border-radius: var(--radius-12);
    z-index: 0;
    background: linear-gradient(60deg, #e6a04c, #de7c68, #d75a7c, #9a63a8, #6077b8, #3a93a3, #34a88f, #76b87d) 0 0/300% 300%;
    animation: 3s infinite alternate animatedgradient;
    position: absolute
}

.right-sidebar .right-sidebar-top .sidebar-note .sidebar-note-content {
    border-radius: var(--radius-10);
    width: 100%;
    height: fit-content;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-sm);
    text-align: left;
    color: var(--text-0);
    background: var(--bg-0);
    z-index: 6;
    padding: 8px 10px;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-subscribe {
    user-select: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-container {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-sm);
    color: var(--text-0);
    text-align: left
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form {
    z-index: 1;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form input {
    width: 100%;
    height: 32px;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-semibold)
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form input::placeholder {
    font-weight: var(--font-weight-semibold)
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form .primary-button {
    width: 100%;
    height: 32px
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form.success .sidebar-subscribe-success-message,
.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form.error .sidebar-subscribe-error-message {
    opacity: 1;
    display: flex;
    transform: translateY(0)
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form .sidebar-subscribe-success-message,
.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form .sidebar-subscribe-error-message {
    width: 100%;
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-sm);
    border-radius: var(--radius-8);
    text-align: left;
    opacity: 0;
    border: 1px solid;
    padding: 6px 8px;
    transition: all .18s cubic-bezier(.34, 1.56, .64, 1);
    display: none;
    transform: translateY(-8px)
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form .sidebar-subscribe-success-message {
    border-color: color-mix(in oklch, var(--green-color)20%, transparent);
    background: color-mix(in oklch, var(--green-color)8%, transparent);
    color: var(--green-color)
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-form .sidebar-subscribe-error-message {
    border-color: color-mix(in oklch, var(--red-color)20%, transparent);
    background: color-mix(in oklch, var(--red-color)8%, transparent);
    color: var(--red-color)
}

.right-sidebar .right-sidebar-top .sidebar-subscribe .sidebar-subscribe-meta {
    z-index: 1;
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-sm);
    color: var(--text-2);
    align-items: center;
    gap: 4px;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-tags {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    display: flex
}

.right-sidebar .right-sidebar-top .sidebar-tags .sidebar-tags-grid {
    flex-direction: column;
    gap: 14px;
    width: 100%;
    display: flex
}

.right-sidebar .right-sidebar-top .sidebar-tags .sidebar-tag {
    border-radius: var(--radius-12);
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: fit-content;
    height: fit-content;
    padding-right: 2px;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-tags .sidebar-tag .sidebar-tag-image {
    z-index: 1;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    position: relative
}

.right-sidebar .right-sidebar-top .sidebar-tags .sidebar-tag .sidebar-tag-image img {
    object-fit: contain;
    object-position: center;
    width: fit-content;
    height: 100%
}

.right-sidebar .right-sidebar-top .sidebar-tags .sidebar-tag .sidebar-tag-name {
    color: var(--text-0);
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-xs);
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    z-index: 2;
    width: 100%;
    overflow: hidden
}

.right-sidebar .right-sidebar-bottom {
    z-index: 12;
    background: var(--bg-0);
    width: 100%;
    padding: var(--sidebar-padding);
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    display: flex;
    position: relative
}

.right-sidebar .right-sidebar-bottom .sidebar-footer {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    display: flex
}

.right-sidebar .right-sidebar-bottom .sidebar-footer p {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-md);
    text-align: left;
    color: var(--text-2)
}

.right-sidebar .right-sidebar-bottom .sidebar-footer p strong {
    color: var(--text-1);
    font-weight: var(--font-weight-bold)
}

.right-sidebar .right-sidebar-bottom .sidebar-footer p a {
    color: var(--text-1);
    font-weight: var(--font-weight-bold);
    -moz-transition: .24s var(--ease-sine)color;
    transition: .24s var(--ease-sine)color
}

.right-sidebar .right-sidebar-bottom .sidebar-footer p a:hover,
.right-sidebar .right-sidebar-bottom .sidebar-footer p a:hover strong {
    color: var(--ghost-accent-color) !important
}

.right-sidebar .right-sidebar-bottom .sidebar-footer p a strong {
    font-weight: var(--font-weight-bold);
    -moz-transition: .24s var(--ease-sine)color;
    transition: .24s var(--ease-sine)color
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .footer-navigation {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    display: flex
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .footer-navigation a {
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-semibold);
    color: var(--text-0);
    background: var(--bg-0);
    border: 1.5px solid var(--border-3);
    border-radius: var(--radius-8);
    opacity: .6;
    -moz-transition: .24s var(--ease-sine)opacity;
    transition: .24s var(--ease-sine)opacity;
    justify-content: center;
    align-items: center;
    padding: 4px 6px;
    display: flex
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .footer-navigation a span {
    width: fit-content;
    line-height: var(--leading-sm);
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .footer-navigation a:hover {
    background: var(--bg-3);
    -moz-transition: .24s var(--ease-sine)background;
    transition: .24s var(--ease-sine)background
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .footer-navigation .site-social-link-item {
    display: none
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .theme-switcher {
    background: var(--bg-3);
    border-radius: var(--radius-12);
    user-select: none;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    max-width: 250px;
    margin-top: 2px;
    padding: 4px;
    display: grid
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .theme-switcher .theme-switcher-button {
    width: 100%;
    height: 24px;
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-xs);
    border-radius: var(--radius-8);
    color: var(--text-1);
    justify-content: center;
    align-items: center;
    display: flex
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .theme-switcher .theme-switcher-button.active {
    background: linear-gradient(to bottom, var(--text-0), var(--text-1));
    color: var(--bg-0)
}

.right-sidebar .right-sidebar-bottom .sidebar-footer .theme-switcher .theme-switcher-button span {
    word-break: keep-all;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

@keyframes animatedgradient {
    0% {
        background-position: 0%
    }

    50% {
        background-position: 100%
    }

    to {
        background-position: 0%
    }
}

.pagination {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
    margin-top: 36px;
    display: flex
}

.pagination .pagination-button {
    width: fit-content;
    max-width: 100%;
    height: 34px;
    padding: .6em .94em
}

.pagination .pagination-button.disable {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    color: var(--text-3);
    box-shadow: none;
    pointer-events: none;
    background: 0 0;
    border: none
}

.pagination .pagination-button .load-icon {
    justify-content: center;
    align-items: center;
    display: none
}

.pagination .pagination-button .load-icon svg {
    width: 24px
}

.pagination .pagination-button .load-text {
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex
}

.pagination .pagination-button .load-text i {
    opacity: .6
}

.pagination .pagination-button .load-text span {
    justify-content: center;
    align-items: center;
    gap: 2px;
    display: flex
}

.pagination .pagination-button .load-text span i {
    opacity: 1;
    font-style: normal
}

.pagination .pagination-button .loaded-text {
    display: none
}

.nav-opened .brand {
    box-shadow: inset 0 -1px 0 var(--border-1)
}

html[data-theme*=light] .light-logo {
    display: block !important
}

html[data-theme*=light] .dark-logo,
html[data-theme*=dark] .light-logo {
    display: none !important
}

html[data-theme*=dark] .dark-logo {
    display: block !important
}

.brand {
    z-index: 16;
    width: 100%;
    height: fit-content;
    padding: var(--sidebar-padding);
    background: var(--bg-0);
    user-select: none;
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: sticky;
    top: 0
}

.brand .logo {
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex
}

.brand .logo .logo-text {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    color: var(--text-0)
}

.brand .logo .logo-image {
    min-height: 20px;
    height: var(--header-logo-size);
    object-fit: contain;
    object-position: left;
    max-height: 40px
}

.brand .left-sidebar-brand-buttons {
    justify-content: end;
    align-items: center;
    gap: 8px;
    display: flex
}

@media (width<=1279px) {
    .brand .left-sidebar-brand-buttons .square {
        --square-button-size: 32px !important
    }
}

@media (width>=1280px) {
    .brand .left-sidebar-brand-buttons .mobile-menu-button {
        display: none
    }
}

.brand .left-sidebar-brand-buttons .mobile-menu-button .first-line,
.brand .left-sidebar-brand-buttons .mobile-menu-button .last-line {
    border-radius: var(--radius-4);
    background-color: var(--text-1);
    width: 14px;
    height: 1.8px;
    -moz-transition: .12s all var(--ease-sine);
    transition: .12s all var(--ease-sine);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.brand .left-sidebar-brand-buttons .mobile-menu-button .first-line {
    transform-origin: 50%;
    margin-top: -4px
}

.brand .left-sidebar-brand-buttons .mobile-menu-button .last-line {
    transform-origin: 50%;
    margin-top: 4px
}

.brand .left-sidebar-brand-buttons .mobile-menu-button.active .first-line {
    width: 15px;
    margin-top: 0;
    transform: translate(-50%, -50%)rotate(45deg)
}

.brand .left-sidebar-brand-buttons .mobile-menu-button.active .last-line {
    width: 15px;
    margin-top: 0;
    transform: translate(-50%, -50%)rotate(-45deg)
}

.navbar {
    z-index: 9999;
    width: 100%;
    height: calc(100svh - var(--brand-height));
    padding: calc(var(--sidebar-padding)/2);
    background: var(--bg-0);
    opacity: 0;
    visibility: hidden;
    user-select: none;
    grid-template-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    transition: none;
    display: none;
    position: relative;
    overflow-y: auto
}

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

@media (width>=1280px) {
    .navbar {
        z-index: 2;
        height: calc(100svh - (var(--brand-height) + var(--left-sidebar-bottom-height)));
        padding: calc(var(--sidebar-padding)/2)calc(var(--sidebar-padding) - 12px)calc(var(--sidebar-padding)/2)calc(var(--sidebar-padding) - 4px);
        opacity: 1;
        visibility: visible;
        background: 0 0;
        border: none;
        flex-direction: column;
        transition: none;
        display: flex
    }

    .navbar::-webkit-scrollbar {
        display: block
    }
}

.navbar.open {
    opacity: 1;
    visibility: visible;
    flex-direction: column;
    display: flex
}

.navbar .navigation-subtitle {
    width: fit-content;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-lg);
    text-transform: uppercase;
    text-align: left;
    color: var(--text-2);
    margin: 24px 0 4px;
    padding-left: 12px
}

@media (width>=1280px) {
    .navbar .navigation-subtitle {
        font-size: var(--font-size-12);
        padding-left: 8px
    }
}

.navbar .navigation-divider:has(+.navigation-subtitle) {
    margin-bottom: 0 !important
}

.navbar .navigation-divider {
    border-top: 1px solid var(--border-1);
    width: calc(100% - 12px);
    height: 1px;
    margin: 24px auto
}

.navbar .nav-menu-item {
    opacity: 1;
    border-radius: var(--radius-8);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 10px 0 8px;
    display: flex;
    position: relative
}

@media (width>=1280px) {
    .navbar .nav-menu-item {
        height: 32px;
        padding: 0 6px 0 4px
    }
}

.navbar .nav-menu-item:after {
    z-index: -1;
    border-radius: inherit;
    background: var(--bg-2);
    opacity: 0;
    -moz-transition: opacity .24s var(--ease-pop), inset .24s var(--ease-pop);
    transition: opacity .24s var(--ease-pop), inset .24s var(--ease-pop);
    position: absolute;
    inset: 0
}

@media (width>=1280px) {
    .navbar .nav-menu-item:after {
        inset: 4px
    }
}

.navbar .nav-menu-item:after {
    content: ""
}

.navbar .nav-menu-item:hover:after {
    opacity: 1;
    inset: 0
}

.navbar .nav-menu-item:hover .nav-menu-item-left .nav-menu-item-icon svg,
.navbar .nav-menu-item:hover .nav-menu-item-left .nav-menu-item-text {
    color: var(--text-0)
}

.navbar .nav-menu-item:hover .nav-menu-item-info {
    color: var(--text-1)
}

.navbar .nav-menu-item.active:after {
    opacity: 1;
    inset: 0
}

.navbar .nav-menu-item.active .nav-menu-item-left .nav-menu-item-icon svg,
.navbar .nav-menu-item.active .nav-menu-item-left .nav-menu-item-text {
    color: var(--text-0)
}

.navbar .nav-menu-item.active .nav-menu-item-info {
    color: var(--text-1)
}

.navbar .nav-menu-item .nav-menu-item-left {
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex
}

.navbar .nav-menu-item .nav-menu-item-left .nav-menu-item-icon {
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    margin-top: -1px;
    display: flex;
    position: relative
}

.navbar .nav-menu-item .nav-menu-item-left .nav-menu-item-icon svg {
    width: var(--navigation-icon-size);
    height: var(--navigation-icon-size);
    color: var(--text-2);
    justify-content: center;
    align-items: center;
    transition: color .24s;
    display: flex
}

.navbar .nav-menu-item .nav-menu-item-left .nav-menu-item-text {
    width: fit-content;
    font-size: var(--navigation-font-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-xs);
    color: var(--text-1);
    transition: color .24s;
    display: inline-block
}

.navbar .nav-menu-item .nav-menu-item-info {
    width: fit-content;
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-semibold);
    color: var(--text-3);
    padding: 2px;
    transition: color .24s;
    display: inline-block
}

.loops {
    --loop-gap: 36px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--loop-gap);
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative
}

.loops .loop-seperator {
    bottom: calc(-.5px - (var(--loop-gap)/2));
    border-top: 1.2px dotted var(--border-3);
    width: calc(100% - 10px);
    height: 1.2px;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0
}

.loop {
    border-radius: var(--radius-16);
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    display: grid;
    position: relative
}

@media (width>=640px) {
    .loop {
        grid-template-columns: 144px minmax(0, 1fr);
        gap: 20px
    }
}

.loop .loop-link {
    content: "";
    z-index: 3;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.loop .loop-badges {
    z-index: 4;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    display: flex;
    position: absolute;
    top: 6px;
    left: 6px
}

.loop .loop-badges .featured-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .featured-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-badges .podcasts-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .podcasts-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-badges .readings-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .readings-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-badges .projects-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .projects-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-badges .member-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .member-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-badges .products-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .products-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-badges .paid-icon {
    border-radius: var(--radius-6);
    backdrop-filter: blur(12px)saturate(2.4);
    isolation: isolate;
    background: #000000d6;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    display: flex;
    box-shadow: 0 1.1px 1.5px #00000026, 0 2.8px 3.9px #0000001a, 0 5.8px 7.9px #00000014, 0 12.0455px 16.4px #0000000f, 0 33px 45px #0000000a
}

.loop .loop-badges .paid-icon svg {
    color: #fff;
    width: 16px;
    height: 16px
}

.loop .loop-image {
    aspect-ratio: 3/2;
    border-radius: var(--radius-12);
    background: var(--bg-2);
    z-index: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
    display: flex;
    position: relative;
    overflow: hidden !important
}

.loop .loop-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    border-radius: inherit !important
}

.loop .loop-content {
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    height: fit-content;
    padding: 2px 0;
    display: flex
}

.loop .loop-content .loop-title {
    font-size: var(--loop-title-font-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-sm);
    cursor: pointer;
    color: var(--text-0);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    letter-spacing: 0;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.loop .loop-content .loop-excerpt {
    font-size: var(--loop-excerpt-font-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-sm);
    color: var(--text-2);
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: none;
    overflow: hidden
}

@media (width>=640px) {
    .loop .loop-content .loop-excerpt {
        display: -webkit-box
    }
}

.loop .loop-content .loop-meta {
    user-select: none;
    font-size: var(--loop-meta-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--text-3);
    line-height: var(--leading-sm);
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex
}

@media (width>=640px) {
    .loop .loop-content .loop-meta {
        margin-top: 6px
    }
}

.loop .loop-content .loop-meta i {
    color: var(--text-3)
}

.loop .loop-content .loop-meta .loop-reading-time,
.loop .loop-content .loop-meta .loop-date,
.loop .loop-content .loop-meta .loop-tag {
    justify-content: flex-start;
    align-items: center;
    gap: 3px;
    display: flex
}

.cover-section {
    border-bottom: 1px solid var(--border-0)
}

.cover-section .cover {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    display: flex
}

.cover-section .cover .cover-image {
    border-radius: var(--radius-full);
    width: 96px;
    height: 96px;
    position: relative;
    overflow: hidden
}

.cover-section .cover .cover-image img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.cover-section .cover .cover-texts {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 380px;
    display: flex
}

.cover-section .cover .cover-title {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

.cover-section .cover .cover-title h1 {
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-sm);
    color: var(--text-0);
    text-align: center;
    width: 100%
}

.cover-section .cover .cover-title h1 u {
    text-underline-offset: .2em;
    text-decoration-style: dotted
}

.cover-section .cover .cover-title h1 i,
.cover-section .cover .cover-title h1 em {
    opacity: .8
}

.cover-section .cover .cover-description {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

.cover-section .cover .cover-description p {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: var(--leading-md);
    color: var(--text-1);
    text-align: center;
    text-wrap-style: balance;
    width: 100%
}

.cover-section .cover .cover-description p u {
    text-underline-offset: .2em;
    text-decoration-style: dotted
}

.cover-section .cover .cover-description p i,
.cover-section .cover .cover-description p em {
    opacity: .8
}

.site-social-links {
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 360px;
    height: fit-content;
    display: flex
}

.site-social-links .site-social-link-item {
    z-index: 0
}

.site-social-links .site-social-link-item:hover {
    z-index: 2
}

.site-social-links .nav-menu-item {
    display: none
}

.page-header {
    width: 100%;
    padding: var(--container-padding);
    border-bottom: 1px solid var(--border-0);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

.page-header .page-header-content {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    display: flex
}

.page-header .page-header-content .page-header-image {
    flex-shrink: 0;
    width: fit-content;
    height: 48px;
    display: block
}

.page-header .page-header-content .page-header-image img {
    object-fit: contain;
    object-position: left;
    width: 100%;
    height: 100%;
    display: block
}

.page-header .page-header-content .page-header-texts {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 6px;
    display: flex
}

.page-header .page-header-content .page-header-texts .page-header-title {
    width: fit-content;
    font-family: inherit;
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--leading-xs);
    letter-spacing: calc(0px - var(--letter-xs));
    text-align: left;
    text-transform: none;
    color: var(--text-0);
    display: inline-block
}

@media (width>=480px) {
    .page-header .page-header-content .page-header-texts .page-header-title {
        font-size: var(--font-size-28)
    }
}

@media (width>=640px) {
    .page-header .page-header-content .page-header-texts .page-header-title {
        font-size: var(--font-size-36)
    }
}

.page-header .page-header-content .page-header-texts .page-header-description {
    width: 100%;
    max-width: 480px;
    font-family: inherit;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-md);
    letter-spacing: normal;
    text-align: left;
    color: var(--text-2);
    display: inline-block
}

@media (width>=480px) {
    .page-header .page-header-content .page-header-texts .page-header-description {
        font-size: var(--font-size-18)
    }
}

.account-page-header {
    width: 100%;
    padding: var(--container-padding);
    border-bottom: 1px solid var(--border-0);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

.account-page-header .account-page-header-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    display: flex
}

.account-page-header .account-page-header-content .member-image {
    aspect-ratio: 1;
    border-radius: var(--radius-16);
    background: var(--bg-2);
    z-index: 2;
    width: 96px;
    height: 96px;
    display: block;
    position: relative;
    overflow: hidden
}

.account-page-header .account-page-header-content .member-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.account-page-header .account-page-header-content .account-page-header-texts {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex
}

.account-page-header .account-page-header-content .account-page-header-texts .member-name {
    width: fit-content;
    font-family: inherit;
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    letter-spacing: calc(0px - var(--letter-xs));
    text-align: center;
    color: var(--text-0);
    display: inline-block
}

.account-page-header .account-page-header-content .account-page-header-texts .welcome-message {
    width: 100%;
    max-width: 480px;
    font-family: inherit;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-md);
    letter-spacing: normal;
    text-align: center;
    color: var(--text-2);
    margin: 0 auto;
    display: inline-block
}

.account-page-content {
    gap: var(--container-gap);
    grid-template-columns: 1fr;
    width: 100%;
    display: grid
}

@media (width>=640px) {
    .account-page-content {
        grid-template-columns: repeat(auto-fit, minmax(312px, 1fr))
    }
}

.account-page-content .account-details-item {
    border: 1.5px solid var(--border-0);
    border-radius: var(--radius-10);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px;
    display: flex
}

.account-page-content .account-details-item .account-details-title {
    font-family: inherit;
    font-size: var(--font-size-14);
    letter-spacing: normal;
    text-align: left;
    color: var(--text-3);
    font-weight: 600;
    line-height: normal
}

.account-page-content .account-details-item .account-details-description {
    font-family: inherit;
    font-size: var(--font-size-16);
    letter-spacing: normal;
    text-align: left;
    color: var(--text-0);
    font-weight: 600;
    line-height: normal
}

.account-page-content .current-period-end {
    grid-column: 1/-1;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex
}

.account-page-content .current-period-end .current-period-end-success {
    border: 1px solid color-mix(in oklch, var(--green-color)10%, transparent);
    border-radius: var(--radius-10);
    background: color-mix(in oklch, var(--green-color)6%, transparent);
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-15);
    letter-spacing: normal;
    text-align: left;
    color: var(--green-color);
    padding: 12px;
    font-weight: 600;
    line-height: normal;
    display: block
}

.account-page-content .current-period-end .current-period-end-warning {
    border: 1px solid color-mix(in oklch, var(--red-color)10%, transparent);
    border-radius: var(--radius-10);
    background: color-mix(in oklch, var(--red-color)6%, transparent);
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-15);
    letter-spacing: normal;
    text-align: left;
    color: var(--red-color);
    padding: 12px;
    font-weight: 600;
    line-height: normal;
    display: block
}

.account-page-content .account-details-footer {
    flex-wrap: wrap;
    grid-column: 1/-1;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: 100%;
    display: flex
}

.account-page-content .account-details-footer a {
    display: inline-flex
}

.account-page-content .account-details-footer .sign-out-button {
    background: var(--red-color);
    color: #fff
}

.account-page-content .cancel-error {
    border: 1px solid color-mix(in oklch, var(--red-color)10%, transparent);
    border-radius: var(--radius-10);
    background: color-mix(in oklch, var(--red-color)6%, transparent);
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-16);
    letter-spacing: normal;
    text-align: left;
    color: var(--red-color);
    grid-column: 1/-1;
    padding: 12px;
    font-weight: 600;
    line-height: normal;
    display: none
}

.author-page-header {
    width: 100%;
    padding: var(--container-padding);
    border-bottom: 1px solid var(--border-0);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    display: flex;
    position: relative;
    overflow: hidden
}

.author-page-header .author-page-header-content {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    display: flex
}

.author-page-header .author-page-header-content .author-image {
    aspect-ratio: 1;
    background: var(--bg-2);
    z-index: 2;
    width: 96px;
    height: 96px;
    display: block;
    position: relative;
    overflow: hidden
}

.author-page-header .author-page-header-content .author-image img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.author-page-header .author-page-header-content .author-page-header-texts {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex
}

.author-page-header .author-page-header-content .author-page-header-texts .author-name {
    width: fit-content;
    font-family: inherit;
    font-size: var(--font-size-22);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-xxs);
    letter-spacing: calc(0px - var(--letter-xs));
    text-align: center;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-wrap: normal;
    color: var(--text-0);
    text-decoration: none;
    display: inline-block
}

.author-page-header .author-page-header-content .author-page-header-texts .author-bio {
    width: 100%;
    max-width: 360px;
    font-family: inherit;
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-md);
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-wrap: normal;
    color: var(--text-2);
    margin: 0 auto;
    text-decoration: none;
    display: inline-block
}

.author-page-header .author-page-header-content .author-page-header-texts .author-location {
    width: 100%;
    font-family: inherit;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-sm);
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-wrap: normal;
    color: var(--text-1);
    margin: 4px auto 0;
    text-decoration: none;
    display: inline-block
}

.author-page-header .author-page-header-content .author-social-links {
    user-select: none;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: fit-content;
    display: flex
}

.blog-nav {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    height: fit-content;
    margin-bottom: 8px;
    display: flex
}

.blog-nav .blog-nav-button {
    width: fit-content;
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-bold)
}

:is(.tag-template, .post-template, .home-template) .podcast-loop {
    grid-template-columns: 80px minmax(0, 1fr)
}

@media (width>=480px) {
    :is(.tag-template, .post-template, .home-template) .podcast-loop {
        grid-template-columns: 96px minmax(0, 1fr)
    }
}

@media (width>=640px) {
    :is(.tag-template, .post-template, .home-template) .podcast-loop {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 16px
    }
}

:is(.tag-template, .post-template, .home-template) .podcast-loop .loop-image {
    width: 100%;
    height: fit-content;
    aspect-ratio: var(--podcast-image-ratio) !important
}

:is(.tag-template, .post-template, .home-template) .projects-loops {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--container-gap);
    grid-template-columns: 1fr;
    width: 100%;
    display: grid
}

@media (width>=640px) {
    :is(.tag-template, .post-template, .home-template) .projects-loops {
        gap: calc(var(--container-gap)*1.25);
        grid-template-columns: repeat(2, 1fr)
    }
}

:is(.tag-template, .post-template, .home-template) .projects-loops .project-loop {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 0;
    display: flex;
    position: relative
}

:is(.tag-template, .post-template, .home-template) .projects-loops .project-loop .loop-image {
    width: 100%;
    height: fit-content;
    aspect-ratio: var(--project-image-ratio)
}

:is(.tag-template, .post-template, .home-template) .projects-loops .project-loop .loop-content .loop-excerpt {
    -webkit-line-clamp: 2;
    line-clamp: 2
}

:is(.tag-template, .post-template, .home-template) .projects-loops .project-loop .loop-content .loop-meta i,
:is(.tag-template, .post-template, .home-template) .projects-loops .project-loop .loop-content .loop-meta .loop-reading-time {
    display: none
}

:is(.tag-template, .post-template, .home-template) .products-loops {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--container-gap);
    grid-template-columns: 1fr;
    width: 100%;
    display: grid
}

@media (width>=640px) {
    :is(.tag-template, .post-template, .home-template) .products-loops {
        gap: calc(var(--container-gap)*1.25);
        grid-template-columns: repeat(2, 1fr)
    }
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop {
    border-radius: var(--radius-16);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 0;
    display: flex;
    position: relative
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-link {
    content: "";
    z-index: 3;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-image {
    aspect-ratio: var(--product-image-ratio)
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-content .product-loop-title {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-sm);
    cursor: pointer;
    color: var(--text-0);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    letter-spacing: 0;
    -webkit-box-orient: vertical;
    transition: color .24s ease-out;
    overflow: hidden;
    display: -webkit-box !important
}

@media (width>=640px) {
    :is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-content .product-loop-title {
        font-size: var(--font-size-18)
    }
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-content .product-loop-title:hover {
    color: var(--ghost-accent-color)
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-content .loop-excerpt {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

:is(.tag-template, .post-template, .home-template) .products-loops .product-loop .loop-content .product-loop-button {
    position: relative;
    z-index: 12 !important
}

:is(.tag-template, .post-template, .home-template) .reading-loops {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--container-gap);
    grid-template-columns: repeat(1, 1fr);
    width: 100%;
    display: grid
}

@media (width>=480px) {
    :is(.tag-template, .post-template, .home-template) .reading-loops {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (width>=640px) {
    :is(.tag-template, .post-template, .home-template) .reading-loops {
        gap: calc(var(--container-gap)*1.25);
        grid-template-columns: repeat(3, 1fr)
    }
}

:is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop {
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 0;
    display: grid;
    position: relative
}

@media (width>=480px) {
    :is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 12px;
        display: flex
    }
}

:is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop .loop-image {
    width: 100%;
    height: fit-content;
    aspect-ratio: var(--reading-image-ratio);
    box-shadow: var(--book-shadow);
    border-radius: var(--radius-6)var(--radius-4)var(--radius-4)var(--radius-6);
    isolation: isolate
}

:is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop .loop-image:before {
    content: "";
    z-index: 12;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: var(--book-image);
    border-radius: 3px;
    width: 6.4%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

:is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop .loop-image:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    border: 2px solid #00000014;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    box-shadow: inset 0 1px 2px #ffffff4d
}

:is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop .loop-content .reading-loop-caption {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-medium);
    color: var(--text-2);
    line-height: var(--leading-sm);
    -webkit-line-clamp: 1;
    line-clamp: 1;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
    overflow: hidden;
    display: -webkit-box !important
}

:is(.tag-template, .post-template, .home-template) .reading-loops .reading-loop .loop-content .loop-excerpt {
    -webkit-line-clamp: 2;
    line-clamp: 2
}

.error-page {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 50vh;
    margin: 0 auto;
    display: flex
}

.error-page .error-content {
    user-select: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    display: flex
}

.error-page .error-content .error-icon {
    width: 240px;
    height: 120px;
    color: var(--text-2);
    background: var(--bg-0);
    border: 1px solid var(--border-0);
    border-radius: var(--radius-16);
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    display: flex
}

.error-page .error-content .error-icon svg {
    width: 32px;
    height: 32px
}

.error-page .error-content .error-title {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-sm);
    text-align: center;
    color: var(--text-0)
}

.error-page .error-content .error-description {
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-md);
    text-align: center;
    color: var(--text-3);
    margin-top: -6px
}

.kg-width-wide {
    max-width: 1050px;
    margin: 0 auto;
}

.kg-width-full {
    max-width: 100%;
    margin: 0 auto;
}

.right-sidebar-top .sidebar-tags .sidebar-tag .sidebar-tag-image {
    border-radius: 50%;
    overflow: hidden;
    width: 30px;
    height: 30px
}

.right-sidebar-top .sidebar-tags .sidebar-tag .sidebar-tag-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.brand .logo {
    display: flex;
    align-items: center;
    padding: 0
}

.logo-text {
    margin-left: 8px;
    font-size: 1.5rem;
    font-weight: 700
}

.brand {
    padding-left: 20px
}

@media (max-width: 991px) {
    .brand {
        padding: 16px 20px
    }

    .logo-text {
        font-size: 1.1rem;
        margin-left: 8px
    }

    .logo-image {
        height: 24px !important;
        width: auto !important
    }
}

.contact-page-content {
    margin-top: var(--container-gap);
    margin-bottom: var(--container-gap)
}

.contact-page-form {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--container-gap);
    width: 100%
}

.contact-form-group.full-width {
    grid-column: 1/-1
}

.contact-form-input,
.contact-form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-8);
    background: var(--bg-1);
    color: var(--text-0);
    font-family: inherit
}

.contact-form-input {
    height: 44px
}

.contact-form-textarea {
    min-height: 150px;
    resize: vertical
}

.contact-form-button {
    margin-top: 12px
}

.button-content {
    display: flex;
    align-items: center;
    gap: 8px
}

@media (min-width: 768px) {
    .contact-page-form {
        grid-template-columns: repeat(2, 1fr)
    }
}

.eras-section {
    margin-top: calc(var(--container-gap)*1.5);
    margin-bottom: var(--container-gap)
}

.eras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--container-gap);
    margin-top: 24px
}

.era-card {
    background: var(--bg-1);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-12);
    padding: 24px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    text-decoration: none !important;
    display: block
}

.era-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-small);
    border-color: var(--ghost-accent-color)
}

.era-year {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ghost-accent-color);
    margin-bottom: 8px;
    display: block
}

.era-title {
    font-size: 1.5rem;
    margin: 4px 0 12px;
    color: var(--text-0)
}

.era-description {
    font-size: .95rem;
    color: var(--text-1);
    line-height: 1.5;
    margin: 0
}